/*layout*/
@charset "utf-8";
html{ font-size: 3.7vw; scroll-padding-top: 10vw; }

@media screen and (min-width: 600px) {
  html { font-size: 16px; scroll-padding-top: 150px; }
}

.contents-wrap-m { width: 90%; max-width: 1200px;  margin: 0 auto; }
.contents-wrap { width: 90%; max-width: 1100px;  margin: 0 auto; }
.contents-wrap-s { width: 90%; max-width: 960px;  margin: 0 auto; }


.conts-section { padding: 15vw 0; }
.conts-section-t { padding-top: 15vw; }

.conts-section-s { padding: 8vw 0; }
.conts-section-s-t { padding-top: 8vw; }

@media screen and (min-width: 768px) {

  .conts-section { padding: 100px 0; }
  .conts-section-t { padding-top: 100px; }
  .conts-section-s { padding: 50px 0; }
  .conts-section-s-t { padding-top: 50px; }
}

.page-main { margin-bottom: 4rem; }
@media screen and (min-width: 768px) {
.page-main { margin-bottom: 6rem; }
}

.btn-line { width: 16em; background: #06C755; display: grid; grid-template-columns: 10vw minmax(0, 1fr); padding: 2vw 5vw; border-radius: 3em; margin: 0 auto; color: #FFF; align-items: center; text-align: center; line-height: 1.1; transition: background .3s; }
.btn-line .t-l { font-size: 1.14em; }

.btn-apply {  width: 16em; background: #FF6173 url(../img/common/arrow-line-white.svg) no-repeat right 1em center / 1em auto; color: #FFF; border-radius: 3em; margin: 0 auto; padding: 5vw 0;  transition: background-color .3s;  }

@media screen and (min-width: 600px) {
  .btn-line { position: relative; padding:.5rem 1rem; width: 16em; gap: 1rem; grid-template-columns: 36px minmax(0, 1fr); gap: 0; margin-left: 1em; font-size: .65rem;}
  .btn-apply { padding: 1rem; }
}
@media screen and (min-width: 769px) {
  .btn-line { font-size: .8375rem; }
}
@media (hover:hover) {
  .btn-line:hover { background: #54D68C; }
  .btn-apply:hover { background-color: #f98a96; }
}


.header { padding-top: 22vw;  }
.header .logo { width: 60vw; height: auto; }
.header .logo img { width: 100%; display: block; }
.header-top { position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 999; padding: 5vw; display: flex; justify-content: space-between; align-items: center; background: #FFF;  }
.header .head-search {  margin-left: auto; }
.header .head-search-button { border: 1px solid #FF6173; border-radius: 2rem; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; }
.header .head-search .icon { width: 60%; height: 60%; }

.head-btn-line{ display: none; }


.g-navi { display: flex; justify-content: center; font-weight: bold; padding-bottom: 5vw;  }
.g-navi > li { flex-grow: 1; text-align: center; }
.g-navi > li + li { position: relative; }
.g-navi > li + li::before { content: ''; width: 1px; height: 90%; background: #EBC0C5; position: absolute; left: 0; bottom: 0; margin: auto; display: block; }
.g-navi .icon { display: block; margin: 0 auto; width: 6vw; height: 6vw; }
.g-navi a { transition: opacity .3s; }

@media screen and (min-width: 600px) {
  body { padding-top: 152px; }
  .header{ position: fixed; top: 0; left: 0; right: 0; margin: auto; border-bottom: 1px solid #DEDBDB; z-index: 999; width: 100%; background: #FFF; padding: 7px 3% 11px; }
  .header.home { border: none; }
  .header-top { position: relative;top: auto; left: auto; right: auto; padding: 0;  }
  
  
  .header .searchform { max-width: 223px; margin: 0 0 0 auto; }
  .header .searchform .input-text { padding: 6px; }
  .header .searchform .search-button { margin: 6px; }
  
  .header .logo  { max-width: 400px; margin-right: 1em; }
  .g-navi { padding-bottom: 0; margin-top: 1.5rem; }
  .g-navi > li { flex-grow: 0; }
  .g-navi .icon { width: 23px; height: 23px; }
  .g-navi a { display: block; padding: 0 1em; }
  
  .head-btn-line { display: block; }
}

@media (hover:hover){
  .g-navi a:hover{ opacity: .7; }
}
.footer { background: #FFE8E2;  padding-bottom: calc(23vw + constant(safe-area-inset-bottom));  padding-bottom: calc(23vw + env(safe-area-inset-bottom)); }
.footer .logo { width: 65vw;  margin: 0 auto; display: block; }
.footer-top { padding-top: 10vw;  }
.foot-menu { display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, auto); gap: 1em; color: #76444A; font-size: 1.07rem; font-weight: bold; margin-top: 2rem; }
.foot-menu a { transition: opacity .3s; }
.foot-menu > li { padding-left: 1em; }
.foot-menu > li::before { content: ''; width: .5rem; height: .5rem; display: inline-block; margin-left:-1rem; margin-right: .5rem; border-radius: 50%; background: currentColor; }

.foot-instagram { width: 1.28rem; height: 1.28rem; margin: 2rem .5rem; transition: opacity .3s; }

.copyright { font-size: .72rem; text-align: center; border-top: 1px solid rgba(118, 68, 74, .3); padding: 1.5em 0; color: #76444A;  }

@media screen and (min-width: 600px) {
  .footer { padding-bottom: 0; }
  .footer-top { padding: 90px 0 0; }
  .footer .logo { width: 285px; margin-bottom: 2rem; }
  .foot-menu { width: 20em; margin: 0 auto; font-size: .9375rem; }
  
  .copyright { font-size: .625rem; padding: 4em 0; width: 96%; margin: 0 auto; }
}

@media screen and (min-width: 769px) {
  .footer-top .inner { display: flex; padding-bottom: 90px; justify-content: space-between; align-items: flex-start; }
  .footer .logo { margin: 0; }
  .foot-menu { margin: 0; width: fit-content; column-gap: 3em; }
  .foot-instagram{ margin: 0 5vw 0 0; }
}
@media (hover: hover) {
  .foot-menu a:hover{ opacity: .7; }
  .foot-instagram:hover { opacity: .7; }
}

.fixed-menu { position: fixed; bottom: 0; padding: 3vw 5vw calc(3vw + constant(safe-area-inset-bottom)); padding: 3vw 5vw calc(3vw + env(safe-area-inset-bottom)); z-index: 99;  background: #FFF; left: 0; right: 0; bottom: 0; margin: auto; font-weight: bold; }
.fixed-menu .btn-line{ margin: 0 auto; }

.fixed-menu.-plan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fixed-menu.-plan .btn-apply { width: 100%;text-align: center; }
.fixed-menu.-plan .btn-line { width: 100%; min-width: 0; padding: 2vw; font-size: 3vw; }

.fixed-menu.-plan .disabled { pointer-events: none; }
.fixed-menu.-plan .disabled .btn-apply { background: #CCC;  }

@media screen and (min-width: 600px) {
  .fixed-menu { display: none; }
  .fixed-menu.-plan　 { }
  .fixed-menu.-plan .btn-line { font-size: .8rem; padding: 1em; }
  .fixed-menu.-plan .btn-line br { display: none; }
  .fixed-menu.-plan .btn-line .t-l { display: block; }
  .fixed-menu.-plan .btn-apply { padding: 1.2rem; }
}

@media screen and (min-width: 768px) {
  .fixed-menu.-plan { display: flex; justify-content: center; gap: 0; padding: 2rem; }
  .fixed-menu.-plan .btn-line { width: 300px;   margin-left: 1rem; }
  .fixed-menu.-plan .btn-apply { width: 300px;  }
}
.cookie-agree { background: #76444A; color: #FFF; font-size: .72rem; padding: 1em 0; display: none; }
.cookie-agree .agree { background: none; color: #FFF; border: 1px solid #FFF; border-radius: .4em; font-size: .7rem; padding: .5em 2em; font-weight: bold; margin: 0 0 0 auto; display: block; width: fit-content; cursor: pointer; }
@media screen and (min-width: 600px) {
  .cookie-agree .contents-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 6rem; gap: 1rem; align-items: center; }
  .cookie-agree .agree { padding: .5em; width: 100%; }
}