/* ===============================================
ヘッダー */

header {
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: fixed;
 top: 0;
 left: 0;
 z-index: 5;
 width: 100%;
 transition: .3s;
 padding: 1em 3%;
}

.js-animation { background: #4AC4BF; border-bottom: solid 1px #ffffff9e;}

.logo { width: max(260px, min(25vw, 250px));}
.logo img { width: 100%; display: block;}
@media print, screen and (min-width: 1360px){
.drw_title { display: none;}
.logo { width: max(180px, min(23vw, 380px));}
#SlideMenu { width: 80vw;}
}


/* ======================================
ドロワー */

@media only screen and (max-width: 1359px) {

/* ハンバーガーメニュー */
#nav-toggle {
 width: 44px;
 height: 35px;
 cursor: pointer;
}
#nav-toggle > div {
 position: relative;
 width: 100%;
}
#nav-toggle span {
 width: 100%;
 height: 2px;
 left: 0;
 display: block;
 background: #fff;
 position: absolute;
 transition: transform 0.6s ease-in-out, top 0.5s ease;
}
#nav-toggle span:nth-child(1) { top: 0;}
#nav-toggle span:nth-child(2) { top: 15px;}
#nav-toggle span:nth-child(3) { top: 30px;}

/* オープン時 */
.open #nav-toggle span { background: #4AC4BF;}
.open #nav-toggle span:nth-child(1) {
 top: 35px;
 transform: rotate(45deg);
}
.open #nav-toggle span:nth-child(2) {
 top: 35px;
 width: 0;
 left: 50%;
}
.open #nav-toggle span:nth-child(3) {
 top: 35px;
 transform: rotate(-45deg);
}

/* z-index */
#nav-toggle {z-index: 1000;}

/* ドロワー内 */
#SlideMenu {
 overflow: auto;
 background: rgba(255, 255, 255, 0.986);
 color: #555555;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;
 z-index: 990;
 text-align: left;
 visibility: hidden;
 font-size: 110%;
 opacity: 0;
 transition: opacity .2s ease, visibility .2s ease;
}
.drw_title { margin-top: 4em; margin-bottom: .5em; padding: 0 3% .5em 3%;}
.drw_title img {
   max-width: 370px;
   height: auto;
   margin: 0 auto;
   width: 90%;
   display: block;
}

.gnv {
 width: 80%;
 margin-right: auto;
 margin-left: auto;
 margin-bottom: 4em;
}
@media all and (orientation: landscape) {
.gnv {
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
}
.gnv li a {
 display: block;
 color: #000;
 text-decoration: none;
 transition: .2s;
 padding: 1em 0;
 text-align: center;
 border-bottom: 2px #F19385 solid;
 text-align: center;
}
.gnv li a:hover { opacity: .7;}
/* open */
.open {  overflow: hidden;}
.open #SlideMenu {  visibility: visible;  opacity: 1;}
.open #SlideMenu li,
.open .drw_tel {  opacity: 1;  transform: translateX(0);}
}

@media print, screen and (max-width: 1359px){
.gnv li { width: 45%;}
}
@media print, screen and (max-width: 767px){
.gnv li { width: 100%;}
}

/* ==========================================
PC時のグローバルメニュー */
@media print, screen and (min-width: 1360px){
.gnv {
 display: flex;
 justify-content: flex-end;
}
.gnv li { margin-left: 2.5em;}
.gnv li a {
 display: inline-block;
 font-weight: 400;
 position: relative;
 transition: .3s;
 padding: .3em 0;
 text-decoration: none;
 color: #fff;
 font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);
}
.gnv li a::after {
   background: #fff;
   content: '';
   width: 100%;
   height: 2px;
   position: absolute;
   left: 0;
   bottom: 0;
   transform-origin: center top;
   transform: scale(.2, 1);
   transition: transform .4s;
}
.gnv li:not(.gnv_li_sns) a:hover:after {
   transform-origin: center top;
   transform: scale(1, 1);
}
}

/* ====================================
   メインコンテンツ */
main { overflow: hidden;}

/* ========================================
フッター */

.flogo img {
   width: 80%;
   height: auto;
   max-width: 160px;
   display: block;
   margin: 0 auto .5em auto;
}

.footerinfoarea {
   background: #fff;
   padding-top: 3em;
   padding-bottom: 3em;
   font-size: 90%;
   color: #2b2823;
}

.fadd { margin-top: 1.5em;}
.fadd_title { font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem); font-weight: 700;}
.address {
   display: block;
   font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem);
   line-height: 1.6;
   margin-bottom: .5em;
   font-weight: 400;
}

.catchcopy img,.f_contact_btn img,.sns_btn img { display: block; width: 100%; height: auto;}
.catchcopy {
   width: 80%;
   display: block;
   margin: 2.5em auto 1.5em auto;
}

.f_contact_btn a {
   display: block;
   width: 100%;
   margin: 1.5em auto 1em auto;
   transition: .2s;
}
@media print, screen and (min-width: 1200px){
.f_contact_btn {
   max-width: 750px;
   margin-bottom: 1em;
}
.f_contact_link { max-width: 750px;}
}
@media print, screen and (max-width: 1199px){
.f_contact_btn,
.f_contact_link {
   margin-right: auto;
   margin-left: auto;
   max-width: 500px;
}
}
.f_contact_link { width: 100%;}
.f_hp_btn a {
   display: block;
   border: solid 1px #4AC4BF;
   color: #4AC4BF;
   text-decoration: none;
   font-weight: 700;
   padding: 1em;
   border-radius: 2em;
   text-align: center;
   transition: .2s;
}

.sns_btn {
   display: flex;
   justify-content: space-between;
   width: 60%;
   margin: 1.5em auto 0 auto;
}
.sns_btn li { width: 25%;}
.sns_btn a { display: block; transition: .2s;}

@media print, screen and (min-width: 1025px) {
.f_contact_btn a:hover { opacity: .7;}
.sns_btn a:hover { opacity: .7;}
.f_hp_btn a:hover {
   color: #fff;
   background: #4AC4BF;
}
}

@media print, screen and (min-width: 1200px) {
.footerinfoarea_inner {
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.footerinfo {
   width: 37%;
   text-align: left;
   padding: 0 3% 0 0;
}
.flogo img {
   width: 100%;
   height: auto;
   max-width: 180px;
   display: block;
}
.flogo { margin-bottom: 2em;}
.fnvarea {
   width: 63%;
   text-align: left;
   padding: 0 0 0 3%;
}
.catchcopy { margin: 0; width: 100%;}
.f_contact_link {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-top: 2em;
}
.f_hp_btn { width: 70%;}
.sns_btn { width: 25%; margin: 0;}
}


.f_area {
   background: #4AC4BF;
   padding: .5em 3%;
   text-align: center;
}
.copyright {
 font-size: 80%;
 text-align: center;
 color: #fff;
 font-weight: 500;
}


/* =====================================
コールトゥアクション */
.cta {
 width: 100%;
 position: fixed;
 z-index: 1;
 bottom :0;
 left: 0;
}
@media print, screen and (min-width: 1200px){
.cta {
 writing-mode: vertical-rl;
 bottom: auto;
 left: auto;
 right: 0;
 top: 40%;
 width: 4vw;
 display: block;
}
}

.btn_form {
 margin: 0;
}
@media print, screen and (min-width: 1200px){
.btn_form span { display: inline;}
.btn_form { width: 100%;}
}
.btn_form img { margin-right: .5em;}
@media print, screen and (min-width: 1200px){
.btn_form img { margin-right: 0; margin-bottom: .5em;}
}
.cta a {
 color: #fff;
 background: #F19385;
 text-decoration: none;
 font-weight: 700;
 display: block;
 transition: .2s;
 border-top: solid 3px #fff;
 font-size: 120%;
 letter-spacing: .1rem;
 padding: .7em;
 text-align: center;
}
.cta a i {
   color: #F6F9AE;
   margin-left: .3em;
   font-size: 120%;
   letter-spacing: 0;
}

@media print, screen and (min-width: 1200px){
.cta a {
   padding: 1em .7em 1em .7em;
   font-size: 110%;
   border-top: solid 3px #fff;
   border-left: solid 3px #fff;
   border-bottom: solid 3px #fff;
}
.cta a:hover { padding-right: 2em;}
.cta a i {
   margin-top: .3em;
   margin-left: 0;
   font-size: 120%;
   letter-spacing: 0;
}
}
.cta img { display: inline;}