@charset "UTF-8";

html { scroll-behavior: smooth; }


body {
font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
/*表示フェードイン*/
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}
/*表示フェードイン*/
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

a img:hover { opacity: 0.5 ; }


/*　ヘッダ　*/
#headerwrap { width: 100%; margin: 0px 0 0 0; background: #FFF; }

#headerwrap img:hover { opacity: 0.5; } /*ロゴ*/

/*ナビテキスト*/
.navbar-nav a { color: #000; font-size: 20px;
  font-family: "Ysabeau Office", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.navbar-nav a:hover {
  transform: translateY(-3px); 
  transition : 1s;
  color: #ccc;
}

nav .active { color: #CD9192; }

/*ハンバーガーカラー*/
.navbar-toggler{ border-color: #666; }
.navbar-toggler{ background-color: #666; }
.navbar-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
}
button.navbar-toggler:focus{
  outline:none;
}

/*ナビの背景色*/
.navback { background: #fff; }

@media screen and (max-width: 768px) {
.navback {
background: #EFEFEF;
	text-align: center;
	padding: 10px 0;
}
}


/*googlefont*/
.ysabeau-office {
  font-family: "Ysabeau Office", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

.zen-maru gothic-light {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
}

.zen-maru gothic-regular {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 400;
  font-style: normal;
}


/*TOPのイメージ画像フェードインアウト*/
.group_imageWrap {
	position: relative;
}
.group_image {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition-duration: 5.5s;
	transition-property: opacity;
	transition-delay: 0.2s;
}
.group_image.isCurrent {
	z-index: 1;
	position: relative;
	opacity: 1;
	transition-delay: 0s;
}

#info a { color: #000000; text-decoration: underline; }
#info a:hover { opacity: 0.6 ; }


h1 { font-size: 35px; font-weight: normal;
  font-family: "Ysabeau Office", sans-serif;
  font-optical-sizing: auto;

  font-style: normal;
}

h2 {
  font-family: "Zen Maru Gothic", serif;
  font-weight: 300;
  font-style: normal;
}

h2 a { color: #000 }

h2 a:hover { color: #D79293; text-decoration: none;}


/** Concept ページ ***********/

.txt_01 { font-size: 1.0em; }


@media screen and (max-width: 800px) {
.txt_01 { font-size: 0.9em; }
}

/** Products ページ ***********/

#clothes img { cursor: pointer; }

#clothes img:hover { opacity: 0.7 ;  cursor: pointer;  }


.border_waku { border:5px solid #eee!important }

/*　商品紹介 モーダル内 */

#detail img
{
	width: 100%;
	height: auto;
	vertical-align: bottom;
}

#detail .sub_img 
{
	display: table;
	table-layout: fixed;
	width: 100%;
	margin:20px 0 0  0px;
	padding: 0px; 
}

#detail .sub_img dl dt
{
	display: table-cell;
	width: 10%;
	margin: 10px;
	padding: 7px;
	vertical-align: top;
}


#detail .sub_img dl dt img {	cursor:pointer; }

.select {	border: 1px solid #ddd !important; }


.backnum { background: #939393; padding: 5px 8px; color: #fff; font-size: 0.9em; }


/** ページ内リンクの高さマージン ***********/
.target {
  scroll-margin-top: 80px; 
}






/** フッタ ***********/

#foot a { font-size: 1em; color: #000000;  }
#foot a:hover { opacity: 0.5; }

.tellink { color: #F1E485; text-decoration: none; }

/*TELリンク*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}





/* 料金表　ページ内リンクボタン */

.btnstyle { background: #DEE2E5; font-size: 0.95em; color:#336881; padding: 5px 12px; margin: 0 2px 6px 2px; display: block;  }
.btnstyle:hover { opacity: 0.7 ; }

.nonstyle a { text-decoration: none; }

/* 料金表　ページ内リンクのヘッダマージン */
.pspace { padding-top: 120px;margin-top:-120px; }

/* 料金表　タイトル */
.pricetitle { background: #047DCF; padding: 10px 20px; margin: 20px 0 20px 0; border-radius: 4px; color: #fff; font-size: 1.2em; }


/*TOPへ戻るボタン*/

.pagetop {
    height: 50px;
    width: 50px;
    position: fixed;
    right: 30px;
    bottom: 30px;
    background: #fff;
    border: solid 2px #000;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2;
    opacity: 0.7;
}

.pagetop_arrow {
    height: 10px;
    width: 10px;
    border-top: 3px solid #000;
    border-right: 3px solid #000;
    transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
    .pagetop:hover, .pagetop:hover .pagetop_arrow {
        opacity: 0.5;
    }
}



.pagetopp{
width: 60px;
 height: 60px;
 border-radius:50%;
 margin-right:15px;
 margin-bottom:15px;
 opacity: .6;
 background:#F2F0E9;/*背景色*/
 color: #333;/*マークの色*/
 border: 2px solid #555;/*外枠の線*/
 }





/*線*/
.hr_01 { width:100%; border-bottom:solid #eee 5px; border-top:0; border-left:0; border-right:0; margin:20px 0 20px 0; }

.hr_02 { width:100%; border-bottom:dotted #555 1px; border-top:0; border-left:0; border-right:0; margin:20px 0 20px 0; }


/*フォントスタイル*/


.txt_underline { text-decoration: underline; }

/*文字サイズ*/

.fs_12 { font-size:12px; }
.fs_13 { font-size:13px; }
.fs_14 { font-size:14px; }
.fs_15 { font-size:15px; }
.fs_16 { font-size:16px; }
.fs_17 { font-size:17px; }
.fs_18 { font-size:18px; }
.fs_19 { font-size:19px; }
.fs_20 { font-size:20px; }
.fs_21 { font-size:21px; }
.fs_22 { font-size:22px; }
.fs_23 { font-size:23px; }
.fs_24 { font-size:24px; }

.fs_em07  { font-size:0.7em; }
.fs_em08  { font-size:0.8em; }
.fs_em085 { font-size:0.85em; }
.fs_em09  { font-size:0.9em; }
.fs_em095 { font-size:0.95em; }
.fs_em1  { font-size:1.0em; }
.fs_em11  { font-size:1.1em; }
.fs_em12  { font-size:1.2em; }
.fs_em13  { font-size:1.3em; }
.fs_em14  { font-size:1.4em; }
.fs_em15 { font-size:1.5em; }
.fs_em16 { font-size:1.6em; }
.fs_em18 { font-size:1.8em; }
.fs_em2 { font-size:2em; }
.fs_em25 { font-size:2.5em; }

/*文字カラー*/

.fc_red { color:#FF0004 !important; }
.fc_enji { color:#bc0909 !important; }
.fc_sian { color:#27909c !important; }
.fc_green { color:#309700 !important; }
.fc_orange { color: #e65900 !important; }
.fc_yellow { color: #f5e666 !important;}
.fc_yellow_dark { color: #ca9400 !important; }
.fc_blue_dark { color: #00559d !important; }
.fc_white { color: #fff !important; }
.fc_black { color: #000 !important; }

/*文字weight*/

.fw_b { font-weight: bold; }
.fw_n { font-weight: normal; }

/*背景カラー*/

.bc_main { background: #abbccd; }
.bc_gray50 { background:#323232; }
.bc_graylight { background:#efefef; }
.bc_graylight2 { background:#ddd; }
.bc_gray80 { background:#555; }
.bc_sian { background:#abcccd; }
.bc_darkblue { background:#2c4d8f; }
.bc_lightgreen { background: #96C885; }
.bc_darkyellow { background: #cdc06c; }
.bc_darkpink { background: #e5b4bd; }
.bc_lightpink { background: #FDE8E8; }
.bc_lightpink2 { background: #FFF6F6; }
.bc_lightbrown { background: #cdbcab; }
.bc_enji { background: #AE1719; }
.bc_orange { background: #E89D58; }
.bc_orange2 { background: #FA983E; }
.bc_purple { background: #AB92C9; }
.bc_lightblue { background: #92B4E1; }
.bc_lightyellow { background: #FFF8D8; }
.bc_lightyellow2 { background: #FFFCEF; }

/* line height */

.lh_100 { line-height: 100%; }
.lh_120 { line-height: 120%; }
.lh_160 { line-height: 160%; }
.lh_180 { line-height: 180%; }
.lh_200 { line-height: 200%; }
.lh_250 { line-height: 250%; }
.lh_300 { line-height: 300%; }

/* letter spacing */

.ls_01 { letter-spacing: 1px; }
.ls_02 { letter-spacing: 2px; }