body{
   font-family:"Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
   font-size:16px;
   font-weight:normal;
   /* ▼入らなければ消す */
   line-height:1.7;
   color:#333;
}

html{
   scroll-behavior:smooth;
}

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

.pc-none{
   display:none;
}

.sp-none{
   display:block;
}

.tc{
   text-align:center;
}

.sr-only{
   position:absolute !important;
   overflow:hidden !important;
   clip:rect(0 0 0 0) !important;
   width:1px !important;
   height:1px !important;
   margin:-1px !important;
   padding:0 !important;
   white-space:nowrap !important;
   border:0 !important;

   clip-path:inset(50%) !important;
}

/* 画像を元のサイズに */
.img-original{
   width:80%;
   margin:auto;
}

.img-original-70{
   width:70%;
   margin:auto;
}

/* マイナスマージン */

.mt_-60{
   margin-top:-60px;
}

.mt_-100{
   margin-top:-100px;
}

.mt_-250{
   margin-top:-250px;
}

/* マージン */
.mt-100{
   margin-top:100px;
}

.mt-60{
   margin-top:60px;
}

.relative{
   position:relative;
}

@media (max-width: 768px){
   .pc-none{
      display:block;
   }

   .sp-none{
      display:none;
   }

   .mt_-100{
      margin-top:30px;
   }
   .img-original{
      width:95%;
      margin:auto;
   }

   .img-original-70{
      width:95%;
      margin:auto;
   }

   .mt-100{
      margin-top:60px;
   }

   .mtSp-60{
      margin-top:60px;
   }
}

.hero-section{
   position:relative;
   display:flex;
   overflow:hidden;
   align-items:center;
   flex-direction:column;
   justify-content:center;
   margin-top:100px;
   padding:80px 20px;
   background:#88d4d4;
}

.hero-section::before{
   position:absolute;
   top:50%;
   left:50%;
   width:800px;
   height:800px;
   content:"";
   transform:translate(-50%, -50%);
   pointer-events:none;
   border-radius:50%;
   background:radial-gradient(circle, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 70%);
}

.hero-section::after{
   position:absolute;
   top:50%;
   left:50%;
   width:1200px;
   height:1200px;
   content:"";
   transform:translate(-50%, -50%);
   pointer-events:none;
   border-radius:50%;
   background:radial-gradient(circle, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, 0) 60%);
}

.content-wrapper{
   position:relative;
   z-index:1;
   width:100%;
   max-width:1200px;
   text-align:center;
}

h2{
   font-size:clamp(1.5rem, 5vw, 3rem);
   font-weight:700;
   margin-bottom:1.5rem;
   letter-spacing:.05em;
   color:#2c3e50;
}

.subtitle{
   font-size:clamp(.9rem, 2vw, 1.1rem);
   font-weight:400;
   letter-spacing:.05em;
   color:#34495e;
}

/* レスポンシブ対応 */
@media (max-width: 768px){
   .hero-section{
      padding:1.5rem;
   }

   h2{
      margin-bottom:1rem;
   }
}

.faq-container{
   max-width:900px;
   margin:100px auto 0;
}

.faq-title{
   font-size:clamp(1.8rem, 4vw, 2.5rem);
   font-weight:700;
   margin-bottom:3rem;
   text-align:center;
   letter-spacing:.05em;
   color:#2c3e50;
}

.faq-item{
   margin-bottom:1.5rem;
   background:white;
}

.question{
   display:flex;
   align-items:flex-start;
   margin-bottom:1.2rem;

   gap:1rem;
}

.q-icon{
   font-size:1.1rem;
   font-weight:bold;
   display:flex;
   align-items:center;
   flex-shrink:0;
   justify-content:center;
   width:36px;
   height:36px;
   color:white;
   border-radius:50%;
   background-color:#2c3e50;
}

.question-text{
   font-size:clamp(1rem, 2vw, 1.2rem);
   font-weight:600;
   line-height:1.6;
   padding-top:.3rem;
   color:#2c3e50;
}

.answer{
   margin-left:3rem;
   padding:1.5rem;
   border-radius:6px;
   background-color:#f8f9fa;
}

.answer p{
   font-size:clamp(.9rem, 1.8vw, 1rem);
   line-height:1.8;
   margin-bottom:.8rem;
   color:#495057;
}

.answer p:last-child{
   margin-bottom:0;
}

@media (max-width: 768px){
   .faq-item{
      padding:0 .8rem 0;
   }

   .answer{
      margin-top:1rem;
      margin-left:0;
   }

   .q-icon{
      font-size:1rem;
      width:32px;
      height:32px;
   }
}

.footer{
   justify-content:space-between;
   margin-top:100px;
   padding:40px 20px;
   color:#fff;
   background-color:#2c3e50;
}

.footer_list{
   display:flex;
   justify-content:center;
   margin-bottom:50px;

   gap:20px;
}

.copylight{
   font-size:14px;
   display:block;
   text-align:center;
}

.footer_logo{
   display:inline-block;
   margin-bottom:30px;
}

/* CTAボタン */
.cta-button{
   position:fixed;
   z-index:1000;
   right:30px;
   bottom:30px;
   display:block;
   width:auto;
   max-width:90%;
   padding:1.8rem 2.5rem;
   cursor:pointer;
   transition:transform .4s ease, opacity .4s ease;
   transform:translateX(0) translateY(150%);
   text-decoration:none;
   opacity:0;
   border-radius:20px;
   background:linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
   box-shadow:0 8px 24px rgba(44, 62, 80, .3);
}

.cta-button:hover{
   transform:translateX(0) translateY(-3px);
   box-shadow:0 12px 32px rgba(44, 62, 80, .4);
}

.cta-button.visible:hover{
   transform:translateX(0) translateY(-3px);
}

.cta-button.visible{
   transform:translateX(0) translateY(0);
   opacity:1;
}

.cta-button.hidden{
   transform:translateX(-50%0) translateY(150%);
   opacity:0;
}

.close-button{
   position:absolute;
   top:-12px;
   right:-12px;
   display:flex;
   align-items:center;
   justify-content:center;
   width:48px;
   height:48px;
   cursor:pointer;
   transition:transform .2s ease, box-shadow .2s ease;
   border:none;
   border-radius:50%;
   background:white;
   box-shadow:0 4px 12px rgba(0, 0, 0, .15);
}

@media (any-hover: hover){
   .close-button:hover{
      transform:scale(1.1);
      box-shadow:0 6px 16px rgba(0, 0, 0, .2);
   }
}

.close-button::before,.close-button::after{
   position:absolute;
   width:20px;
   height:2.5px;
   content:"";
   border-radius:2px;
   background:#2c3e50;
}

.close-button::before{
   transform:rotate(45deg);
}

.close-button::after{
   transform:rotate(-45deg);
}

.cta-content{
   display:flex;
   align-items:center;
   flex-direction:column;

   gap:1rem;
}

.cta-title{
   font-size:clamp(1.5rem, 3vw, 2rem);
   font-weight:700;
   line-height:1.4;
   margin-bottom:0;
   text-align:center;
   letter-spacing:.05em;
   color:white;
}

.cta-link{
   font-size:clamp(1.1rem, 2vw, 1.3rem);
   font-weight:600;
   display:flex;
   align-items:center;
   text-decoration:none;
   pointer-events:none;
   color:#4ade80;

   gap:.8rem;
}

.play-icon{
   display:flex;
   align-items:center;
   flex-shrink:0;
   justify-content:center;
   width:36px;
   height:36px;
   border-radius:50%;
   background:#4ade80;
}

.play-icon::after{
   width:0;
   height:0;
   margin-left:3px;
   content:"";
   border-top:6px solid transparent;
   border-bottom:6px solid transparent;
   border-left:10px solid white;
}

@media (max-width: 768px){
   .cta-button{
      right:auto;
      bottom:20px;
      left:0;
      width:calc(100% - 32px);
      /* max-width:440px; */
      padding:1rem 1.5rem;
      border-radius:50px;
   }

   .cta-button.visible{
      transform:translateX(5%) translateY(0);
   }

   .cta-content{
      align-items:center;
      flex-direction:row;
      justify-content:center;

      gap:.8rem;
   }

   .cta-title{
      font-size:clamp(.95rem, 3.5vw, 1.1rem);
      flex:1;
      min-width:0;
      text-align:left;
   }

   .cta-link{
      font-size:clamp(.85rem, 3vw, .95rem);
      flex-shrink:0;
      white-space:nowrap;
   }

   .play-icon{
      flex-shrink:0;
      width:28px;
      height:28px;
   }

   .play-icon::after{
      border-top-width:5px;
      border-bottom-width:5px;
      border-left-width:8px;
   }

   .close-button{
      display:none;
   }
}

@media (max-width: 390px){
   .cta-button{
      padding:.9rem 1.2rem;
   }

   .cta-title{
      font-size:.9rem;
   }

   .cta-link{
      font-size:.8rem;
   }

   .play-icon{
      width:26px;
      height:26px;
   }
}