@charset "utf-8";


/*基本設定-----------------------------------------*/
html, body { 
  margin: auto;
  padding: 0px;
 }

/* ページ内全体の文字の設定と背景の設定 */
body {
     margin: auto;
    font-family: "ab-kirigirisu", sans-serif;
font-style: normal;
    line-height:1.8em;
    font-size: 1em;
    background-color: #efe0bd;
    }

 .page-wrap {
  width: 390px;        /* デザイン基準幅 */
  margin: 0 auto;      /* PCで中央寄せ */
  position: relative;  /* absoluteの基準 */
}


/* ページ内全体のリンクの文字色 */
a{text-decoration: none;}
a:link {color: #000000;} 
a:visited {color: #000000;} 
a:hover {color: #000000;} 
a:active {color: #000000;} 


/*トップページ---------------------------------------------------------*/

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
   margin: 0px;
  background: #efe0bd;
  z-index: 100;
  font-size: 2em;
}

.logo {
  font-size: 24px;
}

/*ハンバーガーメニュー*/
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

.drawer_open {
  display: flex;
  height: 65px;
  width: 50px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 700;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 30px;
  border-radius: 1px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}
/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.menu_js-hamburgerInner {
  width: 390px;
  height: 844px;
  position: fixed;
  top: 65;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index:700;
  background: #efe0bd;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.menu__list{
  list-style: none;
  color: #292929;
    font-size: 1em;
   text-align: center;
   margin-top: 100;
   margin-right: 50;
    line-height:2em

}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .menu_js-hamburgerInner {
  left: 0;/* メニューを画面に入れる */
}


.header__logo {
  display: flex;
  align-items: center;
}

#top{
  width: 390px;
  height: 665px;
  background-image: url("img/bg_top.png");
  background-size: cover;
  background-position:top center;
  background-repeat: no-repeat;
  position:relative;
}

#lead{ 
    width: 390px;
  height: 440px;
  background-image: url("img/bg_lead.png");
  background-size: cover;
  background-repeat: no-repeat;
   margin-top: -2px;
    text-align: center;
    position:relative;
}


.logo img {
  width: 110px;
  max-width: 100%;
  height: auto;
}

/* カクカク揺れるアニメーション */
.rotate {
  animation-name: decoSwing;
  animation-duration: 2400ms;
  animation-timing-function: steps(2, end);
  animation-iteration-count: infinite;
}

@keyframes decoSwing {
  0% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(20deg);
  }
}

.rotate2 {
  animation-name: decoSwing2;
  animation-duration: 3s;
  animation-timing-function: steps(1, end);
  animation-iteration-count: infinite;
}

@keyframes decoSwing2 {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(15deg);
  }
  60%{
     transform: rotate(-10deg);
  }

  100% {
    transform: rotate(-10deg);
  }
}

/* キービジュアル */
#main img{
    width: 370px;
    text-align: center;
     margin-top: 110px;
     margin-left: 8px;
     z-index:300;
     position: absolute;
      filter: drop-shadow(2px 3px  #ffffff);
 }


#hukuwarai img{
    width: 390px;
     text-align: center;
    height: auto;
    margin: auto;
    z-index:10;
    position: absolute;
    top: 65px;
}

.container {
  position: relative; /* 画像の基準位置 */
  width: 70%;
  height: auto;
   z-index:100;
   margin-top: 190px;
   margin-left: 55px;
}

.container2{
  position: relative; /* 画像の基準位置 */
  width: 40%;
  height: auto;
   z-index:150;
   margin-top: 370px;
   margin-left: 120px;
}

/* 親 */
.hbk {
  position: relative;
  width: 390px;
  height: auto;
  margin-top: 70px;
}

/* 画像共通 */
.hbk img {
  position: absolute;  
  top: -350px;
  left: 0;
  width: 390px;
  height: auto;
  z-index: 200;
}

.image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

/* 1枚目 */
.image:nth-child(1) {
  animation: img1 9s infinite steps(1, end);
}

/* 2枚目 */
.image:nth-child(2) {
  animation: img2 9s infinite steps(1, end);
}

/* 3枚目 */
.image:nth-child(3) {
  animation: img3 9s infinite steps(1, end);
}

@keyframes img1 {
  0%   { opacity: 1; }
  33%  { opacity: 1; }
  33.1%{ opacity: 0; }
  100% { opacity: 0; }
}

@keyframes img2 {
  0%   { opacity: 0; }
  33%  { opacity: 0; }
  33.1%{ opacity: 1; }
  66%  { opacity: 1; }
  66.1%{ opacity: 0; }
  100% { opacity: 0; }
}

@keyframes img3 {
  0%   { opacity: 0; }
  66%  { opacity: 0; }
  66.1%{ opacity: 1; }
  100% { opacity: 1; }
}

.hb:nth-child(1) {
  animation: img1 3s infinite steps(1, end);
}

/* 2枚目 */
.hb:nth-child(2) {
  animation: img2 3s infinite steps(1, end);
}

/* 3枚目 */
.hb:nth-child(3) {
  animation: img3 3s infinite steps(1, end);
}

#bk_line img{
    width: 390px;
    height: auto;
      position: absolute;
      z-index: 300;
      margin-top: 190px;
}

#yobikomu{
      color: #292929;
    font-size: 2.3em;
   text-align: center;
    line-height:1.5em;
    margin-top: 60px;
}

#huku{ 
    position: absolute; 
    margin-top: -100px;
     margin-left:65px; 
    color: #d81825;
     font-size: 3.5em; }

#lead_text{
    color: #292929;
    font-size: 1.3em;
   text-align: center;
    line-height:2em;
}

#uke{ 
    margin-top: -57px;
     margin-left:-245px; 
    color: #d81825;
     font-size: 1.7em;
    letter-spacing: -0.05em;
}

 #bk3 img{ 
    width: 150px;
    height: auto;
      margin-left:-8px; 
    margin-top: 65px;
 }

#sugosikata{  
     width: 390px;
  height: 2560px;
  background-image: url("img/bg_sugosikata.png");
  background-size: cover;
  background-repeat: no-repeat;
   margin-top: -1;
    text-align: center;
}

#hukidasi img{
    width: 150px;
    height: auto;
    margin-top: 60px;

}

#osyougatu{
    color: #292929;
    font-size: 2.2em;
   text-align: center;
    line-height:2em;
     letter-spacing: -0.05em;
}

#tx_osyougatu{
     font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
     color: #292929;
    font-size: 1em;
   text-align: center;
    line-height:2em;
}

.js-scroll {
  opacity: 0;
}

.js-scroll.is-show {
  animation: fadeIn 0.7s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#tomo{
    position: relative;
}

#tomo_tx img{
      width: 268px;
    height: auto;
    margin: auto;
    margin-left: -140px;
    z-index:20;
    position: absolute;
    top: 35px;
}

#tomo_p img{
  width: 344px;
    height: auto;
    margin-top: 65px;
     z-index:10;
}
#tomo_aonori img{
    width: 130px;
    height: auto;
    margin: auto;
    z-index:20;
    position: absolute;
    top: 330px;
    left: 20px;
    transform:rotate(-10deg); 
}
#tomo_setumei{
      font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    font-size: 0.9em;
   text-align: center;
    line-height:2em;
    margin-top: 50px;
     letter-spacing: 0.15em;
}

.aonori_syousai img{
     width: 198px;
    height: auto;
     text-align: center;
      margin-top: 15px;
}

#hitori{
    position: relative;
     margin-top: 70px;
}

#hitori_p img{
  width: 344px;
  height: auto;
  margin-top: 60px;
}



#hitori_tx img{
      width: 268px;
    height: auto;
    margin: auto;
    margin-left: -140px;
    z-index:20;
    position: absolute;
    top: 35px;
}

#hitori_gomaage img{
    width: 130px;
    height: auto;
    margin: auto;
    z-index:20;
    position: absolute;
    top: 330px;
    right: 20px;
}
#hitori_setumei{
      font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    font-size: 0.9em;
   text-align: center;
    line-height:2em;
    margin-top: 50px;
     letter-spacing: 0.15em;
}


.gomaage_syousai img{
     width: 198px;
    height: auto;
     text-align: center;
       margin-top: 15px;
}

#kazoku{
    position: relative;
      margin-top: 70px;
}

#kazoku_tx img{
      width: 268px;
    height: auto;
    margin: auto;
    margin-left: -140px;
    z-index:20;
    position: absolute;
    top: 35px;
}

#kazoku_p img{
  width: 344px;
    height: auto;
    margin-top: 65px;
     z-index:10;
}
#kazoku_kaiun img{
    width: 200px;
    height: auto;
    margin: auto;
    z-index:20;
    position: absolute;
    top: 355px;
    left: -3px;
    transform:rotate(-8deg); 
}
#kazoku_setumei{
      font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    font-size: 0.9em;
   text-align: center;
    line-height:2em;
    margin-top: 50px;
     letter-spacing: 0.15em;
}

.kaiun_syousai img{
     width: 198px;
    height: auto;
     text-align: center;
      margin-top: 15px;
}

#kp{
  width: 392px;
  height: 1058px;
  background-image: url("img/bg_kp.png");
  background-size: cover;
  background-repeat: no-repeat;
   margin-top: -10px;
    text-align: center;
     position: relative;
}

#kyoutyou img{
    width: 57px;
     margin-top: 45px;
     margin-left:-270px;
}
#kp_tx img{
    width: 259px;
    height: auto;
     text-align: center;
}

#kikaku{
     color: #d81825;
    font-size: 1.3em;
   text-align: center;
    line-height:2em;
    margin-top:60px;
     letter-spacing: -0.05em;
}
#pay{
     color: #d81825;
    font-size: 1.45em;
   text-align: center;
    line-height:1em;
}
#pointo{
     color: #d81825;
    font-size: 1.55em;
   text-align: center;
}
#kp_p img{
    width: 300px;
    text-align: center;
    margin-top:20px;
}

#kp_setumei{
       font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    font-size: 0.85em;
   text-align: center;
    line-height:2em;
    margin-top: 10px;
     letter-spacing: 0.03em;
}

#kp_oubo{
       font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    font-size: 0.78em;
   text-align: left;
    line-height:2em;
    margin-top: 30px;
    margin-left: 40px;
     letter-spacing: 0.05em;
}

.kp_syousai img{
      width: 198px;
    height: auto;
     text-align: center;
      margin-top: 15px;
}

#hannbai{
      width: 390px;
  height: 600px;
  background-image: url("img/bg_syouhin.png");
  background-size: cover;
  background-repeat: no-repeat;
   padding-top: -10px;
    text-align: center; 
    position: relative; 
    
}

#hannbaityuu{
  font-style: normal;
     color: #292929;
    font-size: 2.1em;
   text-align: center;
  position: relative;
  top: 55px

}

#grandparent {
width:281px;
height:auto;
 text-align: center;
 margin-top: 100px;
 margin-left: 55px;
overflow:hidden;
}

#parent{
display:flex;
}

#s1 img{
      width: 277px;
      text-align: center;
    height: auto;
    margin-top: 10px;
}

#s1{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    line-height:4.6em;
   text-align: center;
     letter-spacing: 0.05em;
}

#s2 img{
      width: 167px;
      text-align: center;
      margin-left: 60px;
      margin-right: 30px;
    height: auto;
    margin-top: 10px;
}

#s2_tx{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
   text-align: center;
    line-height:1.2em;
     letter-spacing: 0.05em;
      margin-left: 50px;
      margin-top: 20px;
      margin-right: 10px;
}

#s3 img{
      width: 170px;
      text-align: center;
      margin-left: 60px;
    height: auto;
     margin-right: 30px;
      margin-top: 10px;
}

#s3_tx{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    line-height:4em;
   text-align: center;
     letter-spacing: 0.05em;
      margin-left: 30px;
}
#s4 img{
      width: 252px;
      text-align: center;
       margin-left: 17px;
       margin-top: 20px;
    height: auto;
}

#s4_tx{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    line-height:4em;
   text-align: center;
     letter-spacing: 0.05em;
     margin-top: 30px;
     margin-left: 26px;
}
#s5 img{
      width: 165px;
      text-align: center;
    height: auto;
      margin-left: 60px;
      margin-right: 30px;
       margin-top: 10px;
}

#s5_tx{
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-style: normal;
     color: #292929;
    line-height:1.2em;
   text-align: center;
   margin-top: 20px;
   margin-left: 20px;
     letter-spacing: 0.05em;
}

#buttons {
display:flex;
width:13em;
margin:-330 -144;
justify-content:space-around;
}


#buttons button {

width:30%;
font-size:1em;
margin: 150px;
background-color: #efe0bd;
border: none;
}

.susumu {
animation:susumu 0.4s;
}

@keyframes susumu {
to {
transform:translate(-25%);
}
}

.modoru {
animation:modoru 0.4s;
}

@keyframes modoru {
from {
transform:translate(-25%);
 }
}

#ten{
     font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 700;
  font-style: normal;
     color: #bfad91;
    line-height:1.6em;
   text-align: center;
   margin-top: 300px;
     letter-spacing: 0.05em;
}

.onrainn img{
      width: 259px;
    height: auto;
     text-align: center;
     margin-top: 30px;
}

:root {
    --marquee-item-width: 390px;
    --marquee-item-height: 140px;
}
.marquee {
    margin-inline: auto;
    position: relative;
    height: var(--marquee-item-height);
    overflow: hidden;
}
.marquee__item img {
    width: 150px;
    height: auto;
    position: absolute;
    left: max(calc(var(--marquee-item-width) * var(--marquee-number-of-items)), 100%);
    animation: marquee-scroll var(--marquee-animation-speed) linear infinite;
    animation-delay: calc(var(--marquee-animation-speed) / var(--marquee-number-of-items) * var(--marquee-position) * -1);
}
@keyframes marquee-scroll {
  from { left: 100%; }
  to   { left: -260px; } /* ← この値を画像幅＋余白に */
}


#hukuwaraimini{
        width: 390px;
  height: 705px;
  background-image: url("img/bg_rinku.png");
  background-size: cover;
  background-repeat: no-repeat;
   padding-top: -10px;
    text-align: center; 
    position: relative; 
}

#hukuwaraimini_e img{
     width: 140px;
    height: auto;
    z-index: 50;
       position: absolute;
       justify-content: center;
      margin:40px 0 0 -75px;
}

#hukuwaraimini_mozi img{
     width: 200px;
    height: auto;
    position: absolute;
    z-index: 300;
     margin: -10px 0 0 -95px;

}

#logo_red img{
       width: 200px;
    height: auto;
    z-index: 50;
       justify-content: center;
      margin: 250px 0 0 0px;

}

.sns {
  margin: 20px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  font-style: normal;
     color: #292929;
}

.sns ul {
  display: flex;
  justify-content: center; 
  gap: 16px;          
  padding: 0;
  margin: 10px 0 0;
}

.sns li {
  list-style: none; 
}

.sns img {
  width: 40px; 
  height: auto;
}

.footer_bottom{
 margin: 20px;
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 500;
  font-size: 12px;
  font-style: normal;
     color: #ffffff;
}

.footer_bottom a{
     color: #ffffff;
}

.footer_bottom ul {
 color: #ffffff;
  display: flex;
  justify-content: center; 
  gap: 16px;             
  padding: 0;
  margin: 50px 0 0;
}

.footer_bottom li {
  list-style: none; 
}