@charset "utf-8";

/* --------------------------全セクション共通 --------------------------*/

body{
  margin: 0px;
  overflow-x: hidden;
}

html {
  overflow-x: hidden;
}



/* ―――――――――――SP用――――――――――― */

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

  .image {
    text-align: center;
  }

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

  #top .image img:nth-child(1){
    width: 70%;
    margin-bottom: 2.5rem;
    margin-top: 1.5rem;
  }
  #top .image img:nth-child(2){
    width: 70%;
  }
  

 /* -----------------くるみナビとは------------------------------------- */
  .image-b{
   text-align: center;
   margin-top: -30px;
}

 /* -------------------お悩み------------------------------------ */

 #worries .image img:nth-child(1){
  position: relative;
  margin-top: -50px;
}
/* -----------------開設記念-------------------------------- */

#campaign .image img:nth-child(1){
  margin-top: -30px;
 }
 #campaign .image img:nth-child(2){
  margin-top: -1px;
 }
  .sp{
    display: block !important
  }
  .pc{
    display: none !important
  }
  
  
  .flex .image {
    width: 100%; /*画像サイズ指定*/
    margin: 0;
    padding: 0;
    overflow: hidden;
    position: relative;
  }
  

  .flex .text {
    /* font-size: 0.9rem;
    margin: 0;
    padding: 0; */
    width: 100%;
    max-width: 1000px;
    margin-top: 4rem;
    font-size: 20px;
    font-weight: bold;
    text-align: center;
    color: #F7728B;
  }

  .flexsp{
    display: flex;
    justify-content: space-around;
    overflow: hidden;
    width: 100%;
    /* margin:auto; */
    /* text-align: center; */
    background-color: rgba(0, 0, 0, 0.3);
  }
  

/* ーーーーーーーSPフッターーーーーーーーー */
  footer {
    position: fixed;
    bottom: 0;
    height: auto;
    left: 0;
    right: 0;
    /* text-align: center; */
  }

  footer img{
    width: 100%;
    /* margin: 0; */
  }

  .reflection{
    display:inline-block;
    position:relative;
    overflow:hidden;
  }
     
  .reflection:after {
    content:"";
    height:100%;
    width:30px;
    position:absolute;
    top:-180px;
    left:0;
    background-color: #fff;
    opacity:0;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 6s ease-in-out infinite;
  }
      
  }

     
    @keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
    }

    .footer-fixed {
      display: -webkit-flex;
      display: flex;
      -webkit-justify-content: space-around;
      justify-content: space-around;
      -webkit-align-items: center;
      align-items: center;
      height: 80px;
      padding-right: 10px;
      padding-left: 10px;
      text-align: center;
      background-color: rgba(255,255,255,0.8);
      position: fixed;
      width: 100%;
      bottom: 0;
      z-index: 9998;
    }
    
    .footer_btn_01 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #4bbd68;
      border: none;
      border-radius: 5px;
      font-weight: 600;
      height: 60px;
      width: 48%;
    }
  
    .footer_btn_01 a {
      color: #ffffff;
      font-size: 17px !important;
      text-decoration: none;
    }
  
    .footer_btn_02 {
      display: flex;
      justify-content: center;
      align-items: center;
      background: #fc5978;
      border: none;
      border-radius: 5px;
      font-weight: 600;
      height: 60px;
      width: 48%;
    }
  
    .footer_btn_02 a {
      color: #ffffff;
      font-size: 17px !important;
      text-decoration: none;
    }
    

    
   .footer--sns {
      width: 85%;
      max-width: 1000px;
      margin: 15 auto 10px;
      padding: 0 10px;
      font-size: 14px;
      /* font-weight: bold; */
      /* list-style: none; */
      text-align: center;
      list-style: none; /* リストのマーカー（デフォルトの点々）を非表示にする */
      display: flex; /* リスト項目を横並びにする */
      justify-content: space-between; /* 項目を均等に配置 */
    }

    .footer--sns li {
      flex: 1; /* 各項目の幅を均等にする */
      margin: 0; /* リスト項目の余白をリセット */
      padding: 0 10px; /* リスト項目の内側の余白をリセット */
    }

    .footer--sns img {
      max-width: 100%; /* 画像が親要素を超えないように */
    }

    .footer--sns a {
      margin: 0px;
      pointer-events: auto;
    }
    
  .footer--adress{
    text-align: center;
    margin-bottom:1rem;
    color: #ed8675;
    font-size: 16;
  }

  a {
    color:#ed8675;
    text-decoration:underline;
    }

  .footer-youth{
    text-align: center;
    margin-bottom: 6rem;
    color: #ed8675;
    font-size: 13;
  
  }
/* ーーーーーーSPお問い合わせーーーーーーーー */
  .contact-form {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #ed8675; /* 画像のピンク色に近い色 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-top: -1.5rem;
  }

  .contact-form h2 {
    text-align: center;
    margin-bottom: 20px;
  }

  .contact-form label {
    display: block;
    margin-bottom: 8px;
    color: #ffffff;
  }

  .contact-form input[type="text"],
  .contact-form input[type="tel"],
  .contact-form input[type="email"],
  .contact-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #e2b7b7;
    border-radius: 5px;
    font-size: 16px;
  }

  .contact-form button {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #ffffff;
    color: #ed8675;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }

  @media screen and (min-width:1300px) {
    .pc800{
      display: block !important;
    }
  }
  
  @media screen and (max-width:1300px) {
    .pc800{
      display: none !important;
    }
  }
  
/* ――――――――――PC用―――――――――― */
/* トップーーーーーーーーー */
@media screen and (min-width:641px){
  body {
    background-color: #f3f2e9;
    margin: 0 1rem;
    /* background-size: cover;             
    background-attachment: fixed;         
    background-position: center center; */
  }
  .pc{
    display: block !important
  }

  .sp{
    display: none !important
  }


  /* PC画像 */
  .img {
    max-width: 100%;
    height: auto;
    width: auto;
}
  .image {
    text-align: center;
    /* display: flex;
    flex-direction: column; */
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
    /* padding-left: 1rem;
    padding-right: 1rem; */
  }
  
  
 /* -------------------トップ:pc--------------------- */

  #top .image img:nth-child(1){
    width: 70%;
    margin-bottom: 3.5rem;
    margin-top: 1.5rem;
  }
  #top .image img:nth-child(2){
      width: 70%;
      margin-bottom: 40px;
   }

  #top .image {
    background-color: #ffffff; /* 白色の背景 */
    text-align: center;
    max-width: 420px; /* 他の画像と同じ幅 */
    margin-left: auto;
    margin-right: auto;
  }

/* ----------------お悩み---------------------------------------- */

  #worries .image img:nth-child(1){
    position: relative;
    margin-top: -30px;
  }
    
/* -------------------------開設記念----------------------------------- */

  #campaign .image img:nth-child(1){
    margin-top: -30px;
  }
  #kaisetsu img {
    background-color: white;
 }
  /* -----------------くるみナビとは------------------------------------- */

  .image-b{
    text-align: center;
    margin-top: -30px;
 }


  /* a {
    max-width: 420px;
  } */

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



/* ---------------フッター:pc--------------- */

  .footer-fixed {
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-around;
    justify-content: space-around;
    -webkit-align-items: center;
    align-items: center;
    height: 80px;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
    background-color: rgba(255,255,255,0.8);
    position: fixed;
    width: 100%;
    bottom: 0;
    z-index: 9998;
    max-width: 420;
    left: calc(50% - 210px);
  }

  .footer-fixed img{
    width: 80%;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .footer_btn_01 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #4bbd68;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    height: 60px;
    width: 48%;
  }

  .footer_btn_01 a {
    color: #ffffff;
    font-size: 17px !important;
    text-decoration: none;
  }

  .footer_btn_02 {
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fc5978;
    border: none;
    border-radius: 5px;
    font-weight: 600;
    height: 60px;
    width: 48%;
  }

  .footer_btn_02 a {
    color: #ffffff;
    font-size: 17px !important;
    text-decoration: none;
  }

  /* --------SNS;pc------------ */
.footer--sns {
  width: 50%;
  max-width: 1000px;
  margin: 15 auto 10px;
  padding: 0 10px;
  font-size: 14px;
  /* font-weight: bold; */
  /* list-style: none; */
  text-align: center;
  list-style: none; /* リストのマーカー（デフォルトの点々）を非表示にする */
  display: flex; /* リスト項目を横並びにする */
  justify-content: space-between; /* 項目を均等に配置 */
}

.footer--sns li {
flex: 1; /* 各項目の幅を均等にする */
margin: 0; /* リスト項目の余白をリセット */
padding: 0 15px; /* リスト項目の内側の余白をリセット */
}

.footer--sns img {
max-width: 100%; /* 画像が親要素を超えないように */
}

.footer--sns a {
  margin: 0px;
  pointer-events: auto;
}

.footer--adress{
  text-align: center;
  margin-bottom:1rem;
  color: #ed8675;
  font-size: 16;
}

.footer--adress a {
  color:#ed8675;
  text-decoration:underline;
  }
  
.footer-youth{
  text-align: center;
  margin-bottom: 6rem;
  color: #ed8675;
  font-size: 13;

}



/*-----scrolldown-----*/
.scrolldown{
  position:absolute;
  top:60px;
  left:calc(50% + 235px);
  animation: arrowmove 1s ease-in-out infinite;
}

@keyframes arrowmove{
      0%{top:60px;}
      50%{top:70px;}
     100%{top:60px;}
 }

.scrolldown span{
  position: absolute;
  left:-20px;
  bottom:10px;
  color: #000;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}

.scrolldown:before {
    content: "";
    position: absolute;
    bottom: 0;
    right: -6px;
    width: 1px;
    height: 20px;
    background: #000;
    transform: skewX(-31deg);
}

.scrolldown:after{
  content:"";
  position: absolute;
  bottom:0;
  right:0;
  width:1px;
  height: 50px;
  background:#000;
}


/* ----------お問い合わせ:pc---------------------- */
.contact-form {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 20px;
  background-color: #ed8675; /* 画像のピンク色に近い色 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: relative;
  margin-top: -1.5rem;
}


.contact-form label {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
}

.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #e2b7b7;
  border-radius: 5px;
  font-size: 16px;
}

.contact-form button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #ffffff;
  color: #ed8675;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

/*--------------QR(pcのみ)---------------------*/
.qrArea{
  position:fixed;
  top:calc(46% - 90px);
  left:calc((42% - 210px)/2 - 85px);
  display: flex;
  flex-direction: column;
}

.qrArea img{
  width: 33%;
}

.qrArea__text{
  width: 170px;
  text-align: center;
  font-size: 14px;
  margin: 0px !important;
}
.qrArea__image{
  display: flex;
  flex-direction: column;
}

.qrArea__image img:nth-child(1){
  margin-bottom: 2rem;
}

.qrArea2{
  position:fixed;
  top:calc(40% - 70px);
  right: calc((9% - 450px)/2 - 250px);
  z-index: 1;

}


.qrArea2 img{
  width: 26%;
}
  
.qrArea2 ul{
  list-style: none; /* リストのデフォルトのマーカーを非表示にする */
  /* padding: 0; 内側の余白を0にする */
  margin-left: 30px; /* 外側の余白を0にする */
  /* padding-left: 30px; 内側の余白を0にする */

  }
  
.qrArea2 li {
    display: block; /* 画像をブロック要素として表示させる */
    margin-bottom: 10px; /* 画像の下に余白を追加する（必要に応じて調整） */
  }
}