@charset "UTF-8";

*,*:before,*:after {box-sizing: border-box;}
html{
  /* font-size: 62.5%; */
  background-color: #F2EFE9;
}
body {
  max-width: 100%;
  padding: 0;
  margin: 0;
  /* font-family: "Zen Maru Gothic", sans-serif; */
  font-family: "Zen Maru Gothic", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif;

  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.8;
  color: #765b46;
  background-color: #F2EFE9;
}

/* 初期状態で透明にする */
body {
  opacity: 0;
  transition: opacity 0.8s ease-in-out;
}
/* フェードイン時に透明度を100%に */
body.fade-in {
  opacity: 1;
}
a {
  text-decoration: none;
  transition: 0.3s;
}
img {
  max-width: 100%;
  vertical-align: bottom;
}
img.copy-guard{
  pointer-events: none;
}
ul{
  padding: 0;
  margin: 0;
}
li {
  list-style: none;
}
h1,h2,h3,p {
  margin: 0;
}
h1,h2,h3 {
  font-weight: normal;
}
.container{
  padding: 0 20px;
}
.visually-hidden {
  display: none; /* 完全に非表示、音声も読み上げられない */
}

/*---------------------- ボタン */
.btn {
/* a.btn { */
	position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 250px;
  width: 100%;
  height: 40px;
	padding: 0 0 2px 0;
	margin: 0 auto;
  font-size: 16px;
  font-weight: 500;
	text-align: center;
	text-decoration: none;
	color: #F2EFE9;
	background: #765b46;
  border: 2px solid #765b46;
  border-radius: 5px;
  transition: color 0.3s ease-in, background 0.3s ease-in;
}
.btn:hover {
  color: #765b46;
  font-weight: 500;
  background: #E6E1DE;
  border: 2px solid #765b46;
  background-position: right center;
}
@media screen and (min-width : 1440px){
  .btn {
    max-width: 320px;
    height: 60px;
    padding: 20px 0;
    font-size: 20px;
    line-height: 1;
  }
}
/*----------------------- header */

/*---トップページ---*/
.index__body header::before{
  background-image: url(../img/menu-bg-sp.png);
}
.index__body header::after {
  content: none;
  display: none;
}
/*---共通---*/
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 80px;
  z-index: 0;
  z-index: 100;/*test*/
  padding-top: 15px;
}
/* .no-bg が付いたらフィルターSet 7.11.27*/
header.no-bg {
  backdrop-filter: blur(2px);
  background-color: rgba(153, 196, 189, 0.1);
}
header::before {
  content: "";
  position: absolute;
  top: -25px;
  right: -45px;
  width: 150px;
  height: 150px;
  background-image: url(../img/menu-bg-sp.png);
  background-size: cover;
  background-position: center;
  opacity: 1; /* 初期状態は不透明 */
  transition: opacity 0.5s ease-in-out; /* ふわっと切り替えるトランジション */
  z-index: -1;
}
.thanks__body header::before {/*thanksページでは不要のため*/
  content: none;
}
header.no-bg::before{/*7.11.27*/
  opacity: 0;
}
header .header-logo{
  height: 100%;
}
header .header-logo a{
  display: inline-block;
  height: 100%;
  transition: opacity 0.3s ease-in-out; /* ふわっと切り替えるトランジション */
}
header .header-logo a:hover{
  opacity: 0.7;
}
header .header-logo img{/* ロゴ */
  width: 200px;
  height: 100%;
  @media screen and (min-width : 768px){
      width: 260px;
  }
}
/*------------------------ MENU */
/*ドロワーナビゲーション*/
.g-menu {
  position: fixed;
  display: block;
  width: 300px;
  top: 0;
  right: -300px;
  bottom: 0;
  background: #99C4BD;
  transition: .5s;
  z-index: 999;/*7.1.16*/
}
.open .g-menu {
  right: 0;/* 右端に収める */
}
.g-menu .nav__list {
  padding: 25px;
  padding-top: 100px;
}
.g-menu .nav__list ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.g-menu .nav__list ul li {
  position: relative;
  margin: 0;
  border-bottom: 1px solid #765b46;
}
.g-menu .nav__list ul li a {
  display: block;
  padding: 1em;
  font-size: 14px;
  text-decoration: none;
  color: #765b46;
  transition: color 0.3s ease-in;
}
.g-menu .nav__list ul li a:hover {
  color: #D85564;
}
/*---ハンバーガー---*/
.nav__btn {
  position: fixed;
  display: block;
  width: 60px;
  height: 30px;
  top: 15px;
  right: 0;
  right: 10px;/*11.26 test*/
  transform: translate(0, 0);
  transition: all .5s;
  cursor: pointer;
  z-index: 9999;/*7.1.16*/
}
.open .nav__btn {
  right: 5px;
  z-index: 9999;/*7.1.16*/
}
.nav__btn span {
  position: absolute;
  display: block;
  width: 30px;
  height: 2px;
  left: 0;
  background-color: #F2EFE9;
  transition: all .5s;
}
.nav__btn span:nth-child(1) {
  width: 60px;
  top: 5px;
  animation: equalizer01 7000ms infinite;
}
.nav__btn span:nth-child(2) {
  width: 30px;
  top: 15px;
  animation: equalizer02 5000ms infinite;
  animation-delay: 0.33s;
}
.nav__btn span:nth-child(3) {
  width: 20px;
  top: 25px;
  animation: equalizer02 5000ms infinite;
}
.open .nav__btn span {
  width: 30px;
  background-color: #765b46;
}
.open .nav__btn span:nth-child(1) {
  transform: translate(0, 10px) rotate(-45deg);
  animation: unset;
}
.open .nav__btn span:nth-child(2) {
  opacity: 0;
  animation: unset;
}
.open .nav__btn span:nth-child(3) {
  transform: translate(0, -10px) rotate(45deg);
  animation: unset;
}
@keyframes equalizer01 {
  0% {
    width: 70%;
  }
  10% {
    width: 50%;
  }
  20% {
    width: 100%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 50%;
  }
  50% {
    width: 70%;
  }
  60% {
    width: 50%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 100%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 70%;
  }
}
@keyframes equalizer02 {
  0% {
    width: 30%;
  }
  10% {
    width: 20%;
  }
  20% {
    width: 40%;
  }
  30% {
    width: 10%;
  }
  40% {
    width: 20%;
  }
  50% {
    width: 30%;
  }
  60% {
    width: 20%;
  }
  70% {
    width: 10%;
  }
  80% {
    width: 40%;
  }
  90% {
    width: 10%;
  }
  100% {
    width: 30%;
  }
}
/*--- #mask ---*/
/*---------------------------- h1*/
/*---------------------------- h3*/
.header-title{
  position: relative;
  display: block;
  margin-bottom: 70px;
  /* font-family: "vdl-admin", sans-serif;
  font-family: "VDL-Admin", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif; */
  font-weight: 600;
  font-style: normal;
  font-size: 24px;
  letter-spacing: 1.5px;
  line-height: 2;
  text-align: center;
  color: #765b46;
}
.header-title .section__title_highlight {
  color: #D85564;
}
.header-title .section__subtitle{
  display: block;
  font-size: 16px;
  letter-spacing: 0.65px;
  line-height: 1.3;
  text-align: center;
  color: #765b46;
}
.header-title::before,
.header-title::after{
  content: "";
  position: absolute;
  width: 80px;
  top: 40%;
  border: 1.5px solid #99C4BD;
}
.contact .header-title::before,
.contact .header-title::after{
  border: 1.5px solid #F2EFE9;
}
.header-title::before,
.contact h3::before{
  right: calc(50% + 80px);
}
.header-title::after,
.contact .header-title::after{
  left: calc(50% + 80px);
}
@media (max-width: 350px) {
  .header-title::before,
  h.header-title3::after{
      width: 50px;
  }
}
@media screen and (min-width : 768px){/*PC*/
  .header-title span.heading {
    font-size: 36px;
    letter-spacing: 1.8px;
    line-height: 1.22;
  }
}
@media screen and (min-width : 1440px){/*PC*/
  .header-title{
    font-size: 36px;
  }
  .header-title::before,
  .contact .header-title::before{
    right: calc(50% + 120px);
  }
  .header-title::after,
  .contact .header-title::after{
      left: calc(50% + 120px);
  }
  .header-title .section__subtitle{
    margin-bottom: 50px;
    font-size: 20px;
  }
}
@media screen and (min-width : 768px){/*PC*/
  h3 span.heading {
    font-size: 36px;
    letter-spacing: 1.8px;
    line-height: 1.22;
  }
}
@media screen and (min-width : 1440px){/*PC*/
  h3{
    font-size: 36px;
  }
  h3::before,
  .contact h3::before{
    right: calc(50% + 120px);
  }
  h3::after,
  .contact h3::after{
      left: calc(50% + 120px);
  }
  h3 .section__subtitle{
    margin-bottom: 50px;
    font-size: 20px;
  }
}
/*-----------------------------wave */
.wave-container {
  position: relative;
  overflow: hidden;
  line-height: 0;
  margin-bottom: -5px; /* 波の間の隙間を取り除く */
}
.wave-container svg{
  display: block;
  width: 100%;
  height: 100px;
  height: auto;
}
/*--------------------------contact */
.contact{
  position: relative;
  background-color: #99C4BD;
  padding-bottom: 50px;
}
.contact::before {
  content: '';
  position: absolute;
  display: inline-block;
  max-width: 1200px;
  width: 60px;
  height: 60px;
  bottom: -25px;
  left: 40px;
  vertical-align: middle;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url(../img/plane.png);
  transform: rotate(0deg);
}
.contact p{
  margin-bottom: 50px;
  /* font-family: "vdl-admin", sans-serif;
  font-family: "VDL-Admin", "Noto Sans JP", "Yu Gothic", "Hiragino Sans", sans-serif; */
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  text-align: center;
  line-height: 2;
}
@media (max-width: 350px) {
  .contact::before {
    width: 50px;
    height: 50px;
  }
}
/*-------------------------footer */
footer{
  padding: 30px 30px 20px 30px;
  color: #765b46;
  background-color: #F2EFE9;
}
footer ul{
  display: flex;
  margin-bottom: 30px;
  gap: 20px;
  font-size: 14px;
  font-weight: 600;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  letter-spacing: 0px;
  line-height: 1.25;
}
footer li a{
  transition: opacity 0.3s ease-in;
}
footer li a:hover{
  opacity: 0.7;
}
footer .footer__second-block{
  text-align: center;
}
footer .footer-copyright{
  font-size: 10px;
  letter-spacing: 0.5px;
  line-height: 1.3;
  color: #765b46;
}
.footer-scrolltop{
  position: fixed;
  width: 50px;
  height: 50px;
  right: 15px;
  bottom: 15px;
  font-size: 25px;
  background-color: rgba(85, 57, 60, 0.2);
  border-radius: 50%;
  cursor: pointer;
  /*デフォルトで非表示にする*/
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s ease-in-out;
  z-index: 10;
}
.footer-scrolltop::before{
  content: "TOP";
  position: absolute;
  width: 100%;
  height: 2px;
  top: 50%;
  left: 50%;
  font-size: 10px;
  font-weight: bold;
  transform: translate(-50%, -50%);
  color: #4E342E;
}
.footer-scrolltop::after{
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  border-top: 2px solid #55393C;
  border-right: 2px solid #55393C;
  transform: translate(-50%, -50%) rotate(-45deg);
}
.footer-scrolltop:hover{
  opacity: 0.7;

}
.footer-scrolltop img{
  width: 80%;
  border-radius: 50%;
}

/*.activeクラス付与で表示する*/
.active{
  opacity: 1;
  visibility: visible;
}
@media screen and (min-width : 768px){/*PC*/
  .footer-scrolltop{
    width: 60px;
    height: 60px;
  }
}













/*=========== breadcrumb =================================*/
/* .breadcrumb{
  display: flex;
  padding: 6px 0 5px 20px;
  margin-bottom: 40px;
  background-color: rgba(178, 223, 219, 0.5);
}
.breadcrumb p{
  width: 100%;
  font-size: 11px;
  letter-spacing: 0.55px;
  line-height: 1.27;
  color: #795548;
}
.breadcrumb .breadcrumb__list-current{
  color: #4E342E;
  opacity: 1;
  cursor: text;
}
@media screen and (min-width : 768px){
  .breadcrumb{
    padding: 14px 0 15px 11.5%;
    margin-bottom: 70px;
  }
  .breadcrumb p{
    font-size: 12px;
    letter-spacing: 0.6px;
    line-height: 1.33;
  }
} */
/*=========== pagination =================================*/
.pagination{
  display: flex;
  margin-bottom: 80px;
  gap: 10px;
  flex-direction: row;
  justify-content: center;
  }
.pagination p{
  width: 45px;
  height: 45px;
  padding: 11px 0 10px 0;
  font-size: 20px;
  font-weight: bold;
  letter-spacing: 1px;
  color: #FFFDE7;
  line-height: 1.2;
  text-align: center;
  border-radius: 50%;
  background: transparent linear-gradient(180deg, #7633A4 0%, #250D65 100%) 0% 0% no-repeat padding-box;
}
.pagination p.pagination__list-link{
  color: #4F31A5;
  background: #F1EBF8 0% 0% no-repeat padding-box;
}


/***********/
.br--pc{
  display: none;
  @media screen and (min-width :790px){/*PC*/
  /* @media screen and (min-width : 650px){PC */
    display: block;
  }
}
.br--sp{
  display: block;
  @media screen and (min-width : 767px){/*PC*/
    display: none;
  }
}