@charset "utf-8" ;
/* ==================================
common
===================================*/
html {
    font-size: 62.5%;
}

@font-face {
  font-family: '07YasashisaGothic';
  src: url('/assets/Images/Fonts/07Yasashisa/transfonter.org-20260113-013055/07YasashisaGothic.woff') format('woff');
  src: url('/assets/Images/Fonts/07Yasashisa/transfonter.org-20260113-013055/07YasashisaGothic.woff2') format('woff2');
  font-weight: normal;
  font-display: swap;
}

@font-face {
  font-family: 'YasashisaGothicBoldV2';
  src: url('/assets/Images/Fonts/YasashisaGothicV2-B/transfonter.org-20260114-003656/YasashisaGothicBoldV2-bold.woff') format('woff2');
  src: url('/assets/Images/Fonts/YasashisaGothicV2-B/transfonter.org-20260114-003656/YasashisaGothicBoldV2-bold.woff2') format('woff');
  font-weight: 700;
  font-style: normal;
}

body {
  font-family: 'YasashisaGothic', sans-serif;
  font-weight: 400;
}


body {
  font-family: '07YasashisaGothic', 
    sans-serif;
    font-style: normal;
    color: var(--BrownBlack, #231F1F);
    color:var(--Elegant, #260D0D);
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 25px;
}

img {
    max-width: 100%;
    height: auto;
}

.main {
  overflow: hidden;
}

.title {
  color: var(--BrownBlack, #231F1F);
  text-align: center;
  font-family: 'YasashisaGothicBoldV2', sans-serif;
  font-size: 1.8rem;
  font-style: normal;
  font-weight: 700;
  line-height: 30px; 
}

.txt {
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 400;
  line-height: 25px;
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.spBr {
  display: block;
}

@media screen and (min-width: 769px) {
    .title {
    color: var(--BrownBlack, #231F1F);
    text-align: center;
    font-family: 'YasashisaGothicBoldV2', sans-serif;
    font-size: 2.4rem;
    font-style: normal;
    font-weight: 700;
    line-height: 30px;
  } 

    .txt {
    font-size: 1.8rem;
    font-style: normal;
    font-weight: 400;
    line-height: 35px;
    margin-top: 16px;
  }

  .spBr {
    display: none;
  }
}

/* pc 769px */

/* ==================================
header
===================================*/

.header__btn_pc {
  display: none;
}

.nav__btn_pc {
  display: none;
}


.header__btn img {
    max-width: 100%;
    height: auto;
}

.header__btn {
    position: fixed;
    top: 12px;
    right: 4.87%;
    display: block;
    cursor: pointer;
    width: 50px;
    height: 50px;
    z-index: 3;
}

/* nav */

.nav__btn img {
    max-width: 100%;
    height: auto;
}

.nav {
    background: #FFF;
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    text-align: center;
    visibility: hidden;
    opacity: 0;
}

.nav__header {
    padding:  10px 4.8% 0 82%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__list {
  padding: 80px 24% 0 12.8%; 
  text-align: left;
}

.nav__item {
  color: var(--BrownBlack, #231F1F);
  font-family: sans-serif;
  font-size: 2rem;
  font-weight: 700;
  line-height: normal;
  margin-top: 35px;
}

.nav__item:first-of-type {
  margin-top: 0;
}

.Icon {
  display: flex;
  padding: 0 24% 0 12.8%;
}

.nav__item2 {
  margin-top: 35px;
  margin-right: 15px;
}

.nav__item2 img {
    width: 50px;
    height: 50px;
}

.nav__btn {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 12px;
    right: 4.87%;
    border-radius: 50px;
}

.nav__btn:hover {
    opacity: .8;
    }

.nav__item:hover {
    opacity: .8;
    }

.nav__item2:hover {
    opacity: .8;
    }

.nav.active {
    visibility: visible;
    opacity: 1;
    transition:  opacity .5s;
}

 .header__btn:hover {
    opacity: .8;
    }

/* header pc */

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

  .header__btn {
    display: block;
    cursor: pointer;
    width: 90px ;
    height: 90px ;
    top: 20px;
}


/* nav  pc*/

.nav {
    background: #FFF;
    width: 100%;
    height: 1275px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    text-align: center;
}

.nav__header {
    padding:  31px 2% 0 88%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav__list {
  margin-top: 80px; 
  text-align: left;
}

.nav__item {
  color: var(--BrownBlack, #231F1F);
  font-family: sans-serif;
  font-size: 4.8rem;
  font-weight: 700;
  line-height: normal;
  margin-top: 60px;
}

.nav__item:first-of-type {
  margin-top: 0;
}

.Icon {
  display: flex;
  margin-top: 30px;
}

.nav__btn {
    width: 90px;
    height: 90px;
    top:20px
}

.nav__item2 img {
  width: 90px;
  height: 90px;
}

.nav.active {
    transform: translateX(0);
}

.nav__item2 {
  margin-right: 38px;
}

}
/* pc 769px */

/* ==================================
.main
===================================*/

.fuwafuwa {
  animation: fuwafuwa 3s ease-in-out infinite alternate;
  background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
  display: inline-block;
  transition: 1.5s ease-in-out;
}
 
@keyframes fuwafuwa {
  0% {
    transform:translate(0, 0) rotate(-7deg);
  }
  50% {
    transform:translate(0, -7px) rotate(0deg);
  }
  100% {
    transform:translate(0, 0) rotate(7deg);
  }
}


.about__ppp {
    background-image: url(../Images/ABOUT_PC/ABOUT1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    height: 310px;
}    


.about {
  padding:  68px 19.7% 76px 17.6%;
}

.about__img {
  padding: 0 0 42px 17.6%;
}

.about__img2 {
  padding: 0 41% 0 0;
  display: block;
}

.p__box {
  position: relative;
} 

.p__box:before{
  content: "";
  display: block;
  background: rgba(255, 219, 214, 0.20);
  /* width: 90%;
  height: 360px; */
  position: absolute;
  padding: 0 0 500px 0;
  left: 0;
  bottom: 0;
  z-index: 0;
}

.about__wrapper {
  position: relative;
  display: inline-block;
}

.pink__box {
  background: rgba(255, 219, 214, 0.20);
  /* padding: 0 11.4%; */
  z-index: -1;
  /* position: absolute;
  top: 40%;
  right: 0;; */

  position: relative;
  margin-top: -200px;
  width: 83%;
  margin-left: auto;
  max-width: 460px;
}

.pink__box.title {
  margin: 0 0 10px;
}

.about__p {
  padding: 250px 0 95px 0;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.p__txt {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 30px;
  margin-top: 10px;
}

.pan__sp {
    width: 100px;
    position: absolute;
    right: 137px;
    transform: rotate(12deg);
    bottom: -40px;
}

.pan {
  display: none;
}

.view{
    overflow: hidden;
}

.view img{
    vertical-align: middle;
    transform: scale(1.3);
    opacity: 0;
    transition: all 1.2s 0s cubic-bezier(.33,1,.68,1),opacity .6s 0s linear;
}
.view.js-on img{
    transform: scale(1, 1);
    opacity: 1;
}

/* .main pc */

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

  .about__ppp {
    background-image: url(../Images/ABOUT_PC/ABOUT1.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    max-width: 100%;
    height: 100vh;
}
  .a__display {
    padding: 165px 0 0 0;
    display: flex;
    max-width: 1440px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
  }

  .about__wrapper {
    display: block;
    display: flex ;
    margin-top: 45px;
    position: relative;
    z-index: 2;
  }

  .about__img {
    width: 45%;
    padding: 0;
  }
  

  .about {
    padding: 67px 10% 67px 10%;
    width: 55%;
  }


  .p__txt {
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 35px;
  margin-top: 10px;
}

    .pink__box {
        padding: 0;
        width: 50%;
        top: inherit;
        position: inherit;
        background-color: inherit;
        display: flex;
        align-items: flex-end;
        margin-left: inherit;
    }

   .txt.txt__ab {
      font-size: 1.6rem;
        font-style: normal;
        font-weight: 400;
        line-height: 30px;
        margin-top: 16px;
   }

   .about__img2 {
    padding: 0;
    width: 50%;
    text-align: center;
   }

   .about__img2 img {
    max-width: 369px;
   }

   .about__p {
    padding: 20px 0 35px;
}

.p__box {
     padding: 0 ; 
     position: relative;
}
.p__box:before{
  content: "";
  display: block;
  background: rgba(255, 219, 214, 0.20);
  width: 90%;
  height: 360px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 0;
  padding: inherit
}

.pan {
  display: block;
  position: absolute;
  bottom: 124px;
  right: 90px;
  width: 120px;
  z-index: 1;
  transform: rotate(12deg);
  top: inherit;
}

.pan__sp {
  display: none;
}

   }

/* pc 769px */

/* ==================================
follow
===================================*/

.section.section--follow {
margin-top: 100px;
}


.follow {
  margin: 60px 20% 80px;
  position: relative;
  max-width: 400px;
  margin-inline: auto;
}

.f__btn {
  display: flex;
  justify-content: center;
}

.follow__btn {
  display: inline-block;
  padding: 10px 7.69%;
  border-radius: 15px;
  background: var(--Pink, #FFDBD6);
  display: flex;
  align-items: center;
  margin-bottom: 92px;
}

.follow__btn:hover {
    opacity: .9;
    }

.I__icon {
  margin-right: 20px;
}

.I__icon img {
  width: 50px;
  height: 50px;
} 

.btxt {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 30px; 
}

  .ashi {
    right: 78px;
    display: block;
    width: 169px; 
    height: 100px;
    bottom: -87px;
    transform: rotate(-25deg); 
    pointer-events: none; 
    z-index: -5; 
    position: absolute;
    background: url(../Images/ABOUT_PC/asi.png) no-repeat;
    animation: stepsline 3s steps(6) infinite;
  }

  @keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1018px 0;
  }
}


/*section--follow pc  */
@media screen and (min-width: 769px) {
  .section.section--follow {
    display: flex;
    padding: 0 10%;
    align-items: center;
    justify-content: center;
    margin-top: inherit;
  }

  .follow {
  margin: 158px 20% 165px;
  position: relative;
  max-width: 400px;
  margin-inline: auto;
}
    .ashi {
    right: 26px;
    display: block;
    width: 230px; 
    height: 100px;
    bottom: -43px;
    transform: rotate(-25deg); 
    pointer-events: none; 
    z-index: -5; 
    position: absolute;
    background: url(../Images/ABOUT_PC/asi24377850.png) no-repeat;
    animation: stepsline 3s steps(6) infinite;
  }

  @keyframes stepsline {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: -1380px 0;
  }
}

  .follow__btn {
    display: inline-block;
    padding: 25.4px 50px;
    border-radius: 15px;
    background: var(--Pink, #FFDBD6);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 30px;
    max-width: 523px;
}

.I__icon {
  width: 50px;
  height: 50.485px;
  margin-right: 23px;
}

.btxt {
  font-size: 2.4rem;
  font-weight: 400;
  line-height: 30px; 
}

.I__icon img {
  width: 50px;
  height: 50px;
  max-width: inherit;
}


.f__btn {
    display: flex;
    justify-content: center;
    margin-left: 20px;
}
}


/* pc 769px */

/* ==================================
.section section--Comment
===================================*/

.section.section--Comment {
  background-color: rgba(216, 196, 175, 0.2);
} 


.comment {
  padding: 73px 0 170px;
  position: relative;
}

.n__img {
  position: relative;
  z-index: 1;
}

.n__img img {
  width: 85%;
}

.mama {
    background-image: url(../Images/ABOUT_PC/B22.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #FFF;
    padding: 49.5px 13.6% ;
    position: relative;
    z-index: 2;
    width: 85%;
    margin-left: auto;
    margin-top: -50px;
}


.C__txt {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 20px;
  margin-top: 15px;
}


.maru2 {
  margin-top: 34px;
}

.cd {
  position: relative;
  top: -100px;
  z-index: 2;
  padding: 0 11.7%;
}

.cd img {
  background-color: #FFF;
}

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

 .section.section--Comment {
    position: relative;
    padding: 178px 5% 228px 5%;
  }

 .n__img {
  padding: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

 .comment {
  padding: 0;
  max-width: 1217px;
  margin: 0 auto;
 }


 .n__img img {
  width: 45%;
  position: relative;
  right: -25px;
 }


 .mama {
    position: relative;
    background-image: url(../Images/ABOUT_PC/B22.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-color: #FFF;
    padding: 60px ;
    z-index: 2;
    left: -25px;
    width: calc(55% + 50px);
    margin-top: 150px;
    top: inherit;
}

.C__txt {
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 35px;
}

.cd {
  display: flex;
  max-width: 1414px;
  justify-content: center;
  padding: 0 10%;
  top: -90px;
  margin: 0 auto;
  position: relative;
  margin-bottom: 100px;
}

.maru1 {
  width: 50%;
  margin-right: 50px;
}

.maru2 {
  margin-top: 0;
  width: 50%;
}

}
/* pc 769px */


/* ==================================
.section section--img
===================================*/


/* ==================================
footer
===================================*/

.footer {
  padding: 43.5px 37.1%;
  background: rgba(255, 219, 214, 0.30);
}

.copy {
  color: var(--BrownBlack, #231F1F);
  text-align: center;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: normal;
}


/* fotter pc */
@media screen and (min-width: 769px) {
  .copy {
    font-size: 1.4rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
  }

  .footer {
  padding: 129px 44%;
  background: rgba(255, 219, 214, 0.30);
}
}
/* pc 769px */

/* ==================================
fadeIn
===================================*/

.fadeIn {
  transform: translate(0, 50px);
  opacity: 0;
  transition: 0.8s;
}

.fadeIn.animated {
  transform: translate(0, 0);
  opacity: 1;
}


@keyframes fade {
  from { opacity: 0; }
  to { opacity: 2; }
}
.fade {
  animation: fade 2.5s ease-in-out;
}

/* 動きの設定 */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
/* アニメーション「bounce」を指定 */
.bounce {
  animation: bounce 1.3s infinite;
}



.about__ppp {
animation: zoomFade 5s;
transform: scale(1.08);
}


@keyframes zoomFade {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.08);
    opacity: 1;
  }
}