@charset "UTF-8";

/* CSS Document */

/* ============================================ */
/* TOP */

/* header */
.herosp .h_wrap {padding-top:75px;padding-bottom:10%;max-width:1100px;margin:0 auto;}
.herosp .h_wrap .logo_pc {margin:0;}
.herosp .h_wrap .logo_pc span{display:inline-block;font-size:0.8em;font-weight:100;padding:15px 0 5px 1em;width:100%;text-align: left;}

.herosp .h_wrap .logo_pc img {width:53.9090%;max-width:593px;}

.herosp ul#bt_menu {text-align:center;border:0;}
.herosp ul#bt_menu li {list-style:none;display:inline-block;border:0;margin:0 0.9090%;width:20.0909%;min-width:174px;max-width:221px;}
.herosp ul#bt_menu li img {width:100%;}
.herosp ul#bt_menu a:hover img {opacity:0.6;transform: scale(1.1, 1.1);}
.herosp a.sns {display:block;margin:0 auto;max-width:607px;}
.herosp a.sns img {width:100%;}

.c_wrap.box{width:85%;max-width:1100px;margin:0 auto;}

/* TOP:grace */
section.grace {background:url(../img/bgimg_gankin.webp)no-repeat;background-size: cover;background-position: center center;padding:10% 0;}
section.grace h2 {padding-top:10%;}
section.grace .c_wrap {background-color: rgba(255,255,255,0.7);}
section.grace .c_left{margin:0;padding:0;}
section.grace .c_rignt {text-align:left;color:#666;margin:5% 5% 0;padding-bottom:5%;}
section.grace .c_left h2 {width:auto;margin:0 auto;max-width:240px;}
section.grace .c_rignt p {margin-bottom:1em;line-height:1.75em;}
section.grace .concept_text.TextTyping.box {padding:7.5% 0;line-height:1.25em;color:#ac8d85;}
section.grace .c_rignt .hsub {line-height: 1.4em;}
section.grace .c_rignt em {font-style: normal;font-size:0.9em;}

/* TOP:aging */
section.aging {background:url(../img/common/bg2.webp)no-repeat;background-size: cover;background-position: center center;padding:10% 0;}
section.aging .c_wrap.box{}
section.aging .c_wrap.box h3 {text-align:center;padding:0 2.5%;}
section.aging .c_wrap.box h3 span{margin-bottom:0.8em;display:block;background:url("../img/common/logo_gankin.webp")no-repeat;background-size:contain;background-position: center center;height:76px;text-indent:100%;white-space:nowrap;overflow:hidden;}
section.aging .c_wrap.box h3 em{line-height: 1.5em;}
section.aging .c_wrap.box p{margin-bottom:1em!important;}
section.aging .link-insta {text-align:center;margin:5% 0 0;}
section.aging .link-insta a {display:inline-block;width:120px;}
section.aging .link-insta a img {border-radius:130px;width:100%;}

/* TOP:about */
section.about {background-color:#f8efdf;padding:10% 0;}
section.about .c_wrap.box{position:relative;}
section.about .c_left,
section.about .c_rignt {display:inline-block;vertical-align:top;margin:0;padding:0;text-align:left;}
section.about .c_left {width:30%;}
section.about .c_rignt {width:68%;}
section.about .c_left h2 {width:95%;max-width:250px;padding:0;margin:0;}
section.about .c_left h2 img{width:100%;}
section.about .about-salon {text-align:center;line-height:1.7;}
section.about .about-salon dd p{margin-bottom:1.5em;}
section.about .about-salon dd a.sns {display:block;margin:0 auto;width:100%;}
section.about .about-salon dd a.sns img {width:100%;}

/* TOP:Calendar */
section.calendar {background-color:#f8efdf;}
section.calendar .c_wrap.box{margin-bottom:5%;}
section.calendar h3 {text-align: center;}
/*========= Googleカレンダー埋め込み ===============*/
section.calendar .google-cal{text-align:center;margin:0 auto;}
section.calendar .google-cal iframe{
	width:100%;
	max-width:800px;
	height: 400px;
}
/* タブレット＆スマホ表示用 */
@media (min-width: 750px) {section.calendar .google-cal iframe{height: 600px;}}

/* TOP:access */
section.access {background: none;}
section.access .m_wrap.box{position:relative;max-width: 1100px;margin:0 auto;}
section.access h2{width:auto;max-width:240px;padding:0;}
section.access h2 img{width:100%;}
section.access address {font-style:normal;text-align: center;margin-top:30px;font-size:0.9em;letter-spacing:0;}

/* 横幅を指定するための要素 */
.map-wrap {max-width:1100px; /* ここに横幅を指定 */margin-bottom:1em;}
 
/* Google Mapを囲う要素 */
.map {position:relative;width:100%;height:0;}
/* Google Mapのiframe */
.map iframe {position:absolute;top:0;left:0;width: 100%;height: 100%;}


/* デザインA（スマートフォン） */
@media screen and (max-width: 640px) {

/* 全画面表示CSS */
.hero {
  height: 100vh; /* 全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  background-image: url("../img/gd_sp.webp");
  position:relative;}
.hero ul#bt_menu {text-align:center;border:0;width:100%;position:absolute;bottom:12.5%;}
.hero ul#bt_menu li {list-style:none;display:inline-block;border:0;margin:0 0.7161%;width:29.4687%;min-width:110px;max-width:200px;}
.hero ul#bt_menu li img {width:100%;}

/* Grace */
section.grace {padding:15% 0;}
section.grace .c_left h2{padding-top:10%!important;}
section.grace .c_left h2 img {width:60%;}
section.grace .concept_text.TextTyping.box {margin-bottom:5%;line-height: 1.2em;}
section.grace .c_left .concept_text {font-size:1.4em;}
section.grace .c_rignt {padding-top:5%;}

/* TOP:aging */
section.aging {padding:15% 0;}
section.aging img.sp {margin-bottom:1em;}
section.aging .link-insta a {width:120px;}
section.aging .link-insta a img {border-radius:60px;}
	
/* TOP:about */
section.about {padding:15% 0;font-size:1em;}
section.about .c_wrap.box{width:100%;margin:0;}
section.about .c_left,
section.about .c_rignt {display:block;width:100%;padding:0;}
section.about .c_rignt {padding-top:5%;}
section.about .c_left h2 {width:100%;max-width:180px;margin:0 auto!important;}
section.about .about-salon {padding-top:15%;}
section.about .about-salon dd a.sns {width:100%;max-width:320px;}

/* Calendar */
section.calendar {padding:15% 0;font-size:1em;}
section.calendar .c_wrap.box{margin-bottom:10%;}
section.calendar h3 {font-size:1.4em;margin-bottom:1.5em;}
	
/* アクセス */
section.access {background:none;padding:15% 0;font-size:1em;}
.m_wrap.box{position:relative;max-width: 1100px;margin:0 auto;}
section.access h2 {margin:0 auto 12.5%;}
section.access h2 img {width:70%;}
.map {padding-top: 70%; /* 比率を : に固定 */}
section.access address {}
}

/* デザインB（タブレット） */
@media screen and (min-width: 641px) and (max-width: 1024px) {

/* 全画面表示CSS */
.herosp {
   /* height: 100vh;全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url("../img/gd_tablet.webp");
  }

.herosp .h_wrap .logo_pc{margin-left:30px;}
.herosp .h_wrap .logo_pc img {}
.link {width: 80%;}
.herosp ul#bt_menu {padding:200px 0 5%!important;}
.herosp a.sns {width:50%;min-width:480px;}

/* Grace */
section.grace .c_left h2 img {width:75%;}
section.grace .c_left .concept_text {font-size:1.7em;}
	
/* TOP:aging */
section.aging {padding:7.5% 0;}
section.aging img.sp {margin-bottom:2em;}
section.aging .link-insta a {width:160px;}
section.aging .link-insta a img {border-radius:80px;}
	
/* about */
section.about {padding:7.5% 0;}
section.about .c_wrap.box{width:100%;margin:0;}
section.about .c_left,
section.about .c_rignt {display:block;width:85%;max-width:800px;padding:0;margin:0 auto;}
section.about .c_rignt {padding-top:5%;}
section.about .c_left h2 {width:100%;max-width:180px;margin:0 auto!important;}
section.about .about-salon{padding-top:10%;font-size:1.1em;}
section.about .about-salon dd a.sns {max-width:420px;}

/* Calendar */
section.calendar {padding:7.5% 0;}
section.calendar h3 {font-size:1.5em;}

/* アクセス */
section.access {background: none;padding:7.5% 0;}
.m_wrap.box{position:relative;max-width:1100px;margin:0 auto;}
section.access h2 {margin:0 auto 7.5%;}
section.access h2 img {width:80%;}
/* Google Mapを囲う要素 */
.map {padding-top: 70%; /* 比率を3:4に固定 */}
section.access address {}
}

/* デザインC(PC) */
@media screen and (min-width: 1025px) {

/* 全画面表示CSS */
.herosp {
   /* height: 100vh;全画面表示 */
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url("../img/gd_pc.webp");
  position: relative;}

.herosp ul#bt_menu {padding:15% 0 5%;}
.herosp a.sns {display:block;}
	
/* Grace */
section.grace h2 {padding-top:5%!important;}
section.grace .concept_text.TextTyping.box {font-size:1.8em;}
section.grace .c_rignt p {font-size:1.1em;}

/* TOP:aging */
section.aging {}
section.aging img.pc {margin-bottom:1.5em;}
section.aging .link-insta a {width:200px;}
section.aging .link-insta a img {border-radius:100px;}
	
/* about */
section.about {}
.about-salon{position:absolute;top:300px;left:0;width:250px;text-align:center;line-height:1.7;}
.about-salon dd p{margin-bottom:1em;}
.about-salon dd a.sns {width:100%;max-width:250px;}
.about-salon dd a.sns img {width:100%;}


/* Calendar */
section.calendar {padding:10% 0;}
	
/* アクセス */
section.access{padding:12% 10% 10%;}
section.access h2 {position:absolute;top:-90px;right:10px;z-index:2;}
/* Google Mapを囲う要素 */
.map {padding-top: 50%; /* 比率を2:1に固定 */}
.map iframe {border-radius: 20px;}
section.access address {}

}