@charset "UTF-8";
/* ======================================
common
======================================== */
:root {
  --color-primary: #EBDDD5;
  --color-accent: #FFD4C0;
  --color-base: #FEFCFA;
  --color-white: #ffffff;
  --color-text: #7C6B59;
}
body {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 300;
  font-style: normal;

  color: var(--color-text, #7C6B59);
  background-color: var(--color-base, #FEFCFA);
  line-height: 150%;
}
a:hover {
  opacity: 0.75;
}
img {
  width: 100%;
  display: block;
}
picture {
  display: block;
  width: 100%;
  /* max-width: 100%; 画質を落としたくない時は入れる　
  　　　　　　　　　　　　ただし％指定のレイアウトは崩れる可能性高い*/
  margin: 0 auto;
}

html {
  scroll-behavior: smooth;
}

h2 {
  color: #7C6B59;
  font-family: "Lato";
  font-size: 3em;
  font-style: normal;
  font-weight: 200;
  line-height: normal;
  margin: 0 auto;
  text-align: center;
}

@media screen and (min-width: 1025px) {
  /* --px以上に適用されるCSS（PC用） */
  h2 {
    font-size: 4em;
    margin-bottom: 30px;
    margin-left: 0;
  }
}

h3 {
  color: #7C6B59;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-size: 1.5em;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
}

.container {
  margin: 0 auto;
}

.flex {
  display: flex;

}

.stSP {
  margin-top: 30px;
}

.btn__flameLine {
  display: block;
  color: #7C6B59;
  display: flex;
  padding: 7px 0px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  border: 1px solid #7C6B59;
  position: relative;
  font-family: Lato;
  font-size: 1.5em;
  font-weight: 300;
  line-height: normal;

}

.btnArrow {
  position: absolute;
  width: 34.5px;
  right: 41.5px;
  top: 15px;
}

.btn__flameLine:hover {
  background-color: var(--color-primary);
  border: 1px solid #7C6B59;
  opacity: 1;
}

/* CTA */
.CTA {
  position: fixed;
  /* 固定表示の設定 */
  bottom: 75px;
  /* 画面下部から--pxの位置に表示 */
  right: 20px;
  /* 画面右から--pxの位置に表示 */
  z-index: 2;
}

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

  /* 1024px以下に適用されるCSS（SP用） */
  .CTA {
    display: none
  }

  .brPC {
    display: none;
  }
}

/* ----------header---------------- */
.header__container {
  display: flex;
  padding-right: 10px;
  justify-content: space-between;
  width: 100%;
}

.logoG {
  display: flex;
  padding-top: 10px;
  align-items: flex-start;
}

.navPC {
  margin-top: 20px;
}

.headerSP__menuIcon {
  padding-top: 20px;
}

.nav__list {
  align-items: center;
}

.nav__item {
  margin-left: 35px;
  font-family: Lato;
  font-size: 1.25em;
  font-weight: 300;
  line-height: normal;

}

.navPC {
  padding-right: 20px;
}

.instaPCheader {
  width: 50px;
}

/* ナビ下線 */
.gnavi li a {
  /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover {
  color: var(--color-base);
}

.gnavi li a::after {
  content: '';
  /*絶対配置で線の位置を決める*/
  position: absolute;
  bottom: -5px;
  left: 0%;
  /*線の形状*/
  width: 100%;
  height: 1px;
  background: var(--color-base);
  /*アニメーションの指定*/
  transition: all .3s;
  transform: scale(0, 1);
  /*X方向0、Y方向1*/
  transform-origin: center top;
  /*上部中央基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
  transform: scale(1, 1);
  /*X方向にスケール拡大*/
}

@media screen and (max-width: 1266px) {
  .navPC {
    display: none
  }
}

@media screen and (min-width: 1267px) {
  .headerSP__menuIcon {
    display: none;
  }


  /* ナビ下線 */
  .gnavi li.current a,
  .gnavi li a:hover {
    color: #7C6B59;
  }

  .gnavi li a::after {
    background: #7C6B59;
  }
}

/* ---------navPCサブメニュー----------- */
.navPC ul ul {
  display: block;
}

.navPC ul .has-child {
  position: relative;
}

/* 矢印 */
.navPC ul .has-child::before {
  content: '';
  position: absolute;
  right: 0;
  top: 3px;
  translate: 130%;
  width: 13px;
  height: 13px;
  border-top: 1px solid #7C6B59;
  border-right: 1px solid #7C6B59;
  transform: rotate(135deg);
}
  
.navPC ul .has-child:hover::before{
  transform: rotate(-45deg); 
  top: 12px;
}
  
.navPC ul li li a {
  display: block;
  width: fit-content;
  font-family: "IBM Plex Sans JP", sans-serif;
  padding-top: 24px;
}

.navPC .has-child ul {
  position: absolute;
  left: 0;
  top: 37px;
  z-index: 4;
  background-color: #FEFCFA;
  border-radius: 5px;
  padding: 0 25px 24px;
  width: 234px;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

.navPC li.has-child:hover>ul,
.navPC li.has-child:active>ul {
  visibility: visible;
  opacity: 1;
}

/* ---------navSPサブメニュー----------- */
.navSP ul ul ul {
  display: block;
}

.navSP .has-child {
  position: relative;
}

.navSP ul li li ul li a {
  display: block;
  width: fit-content;
  font-family: "IBM Plex Sans JP", sans-serif;
  padding-top: 40px;
  margin: 0 auto;
}

.navSP .has-child ul {
  position: absolute;
  width: 100%;
  left: -20px;
  top: 30px;
  z-index: 4;
  padding: 0 20px 60px;
  margin-right: 10px;
  border-radius: 5px 0px 5px 5px;
  background: #7C6B59;
  visibility: hidden;
  opacity: 0;
  transition: all .3s;
}

.navSP li.has-child:hover > ul,
.navSP li.has-child:active > ul{
  visibility: visible;
  opacity: 1;
}

/* 矢印 */
.navSP ul .has-child::before {
  content: '';
  position: absolute;
  right: 50%;
  top: 3px;
  translate: 400%;
  width: 13px;
  height: 13px;
  border-top: 1px solid var(--color-base);
  border-right: 1px solid var(--color-base);
  transform: rotate(135deg);
  z-index: 5;
}

.navSP ul .has-child:hover::before,
.navSP ul .has-child:active::before {
  transform: rotate(-45deg);
  top: 12px;
}

/* ---------navSP----------- */
.navSP {
  background: rgba(124, 107, 89, 0.90);
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  transform: translate(-100%);
  transition: transform 0.4s;
  color: #FEFCFA;
}

.down {
  width: 25px;
  margin-left: 10px;
}

.instaNav {
  width: 50px;
  margin: 0 auto;
}

.closeNavImg {
  width: 60px;
  padding-top: 20px;
}

.navline {
  align-items: center;
  justify-content: space-evenly;
  margin-top: 60px;
}

.navs {
  display: flex;
  width: 100%;
  align-items: center;
}

.navs .nav__item {
  width: 50%;
  text-align: center;
  margin-left: 0;
}

@media screen and (min-width: 1267px) {
  .navSP {
    display: none;
  }
}

/* footerSP */
@media screen and (max-width: 1024px) {

  /* 1024px以下に適用されるCSS（SP用） */
  .footerPC {
    display: none;
  }
}

/* footerInner */
.footer__innerSP {
  padding: 10px;
  position: relative;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin-bottom: 82px;
}

.copyRightSP {
  font-family: "Lato";
  justify-content: center;
  align-items: flex-end;

}

.footer__UPbtn {
  width: 60px;
  height: 60px;
  padding: 16px;
  align-items: center;
  border-radius: 60px;
  background: #EBDDD5;
  position: absolute;
  right: 15px;
  bottom: 5px;
}

/* footerFixed */
.footer__fixedSP {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999;
  display: flex;
}

.footer__menubtnSP img {
  width: 60px;
}

.footer__menubtnSP {
  height: 66px;
  width: 50%;
  background: #EBDDD5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  font-family: "Lato";
  
}
.footer__menubtnSP img{
  padding-top: 5px;
}
.footer__contactSP {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  background: #7C6B59;
  color: #FEFCFA;
}

/* footerPC */
@media screen and (min-width: 1025px) {

  /* --px以上に適用されるCSS（PC用） */
  .footerSP {
    display: none;
  }
}

/* footerPC innner */
.footerContactBtn {
  display: flex;
  width: 72.2%;
  height: 230px;
  padding: 10px;
  margin: 60px auto 90px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  background: linear-gradient(273deg, #7C6B59 1.72%, #B3A497 49.12%, #E0CCC0 98.22%);

  color: #FFF;
  font-size: 24px;
}

.footerContactBtn img {
  width: 200px;
  height: 200px;
}

/* footerBTM PC*/
.footer__BTMpc {
  width: 100%;
  position: relative;
  height: 300px;
}

.footerMain {
  width: 100%;
  display: flex;
  height: 300px;
  padding: 0px 45px 0px 20px;
  justify-content: space-between;
  align-items: flex-start;
  background: #EBDDD5;


}

.footerLogo {
  width: 180px;
  height: 180px;
  margin-top: 60px;
}

.footerNav {
  width: 83.3%;
}

.footer__listPC {
  justify-content: flex-end;

  gap: 6.2%;
  flex-wrap: wrap;
}

.footerListItem {
  font-family: "Lato";
  font-size: 1.25em;
  margin-top: 30px;
}

/* サブリストの位置 */
.footerListItem:nth-of-type(3) {
  margin-left: -8.7%;

}

.footer__sublist a {
  display: flex;
  margin-top: 20px;
  align-items: center;
  text-align: right;
  gap: 5px;
  font-size: 0.8em;
  font-family: "IBM Plex Sans JP", sans-serif;
  line-height: 100%;
}


.line {
  width: 15px;
  height: 16px;

}


.copyRightPC {
  position: absolute;
  left: 10px;
  bottom: 7px;
}

.footer__UPbtnPC {
  width: 60px;
  height: 60px;
  padding: 16.091px;
  align-items: center;
  position: absolute;
  right: 142px;
  bottom: 22px;
  border-radius: 53.636px;
  background: #FEFCFA;
}

.footer__instaBtn {
  position: absolute;
  right: 35px;
  bottom: 21px;
}

/* .nav activeの表示 */
.navSP.active {
  transform: translateX(0);
}