@charset "utf-8";
body{
    margin: 0;
    padding: 0;
}
#wrapper{
    margin: auto;
}
#wrapper img{
    width: 100%;
    vertical-align: middle;
}

@media only screen and (min-width: 768px){
    #wrapper{
        max-width: 1920px;
        margin: auto;
    }
}

.sp {
    display: none;
}
@media only screen and (max-width: 767px){
    .sp {
        display: block;
    }
}

/* header */
.header{
    width: 100%;
    height: auto;
    background-color: #fff;
}
.header_inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1% auto 0.5%;
    padding: 0 20px;
    gap: 35%;
}
.header_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

@media only screen and (max-width: 767px){
    .header_inner {
        margin: 1% auto 0.5%;
        padding: 0 2%;
        gap: 10%;
    }
}

/* mv */
.mv{
    width: 100%;
    height: 100%;
}
h1 {
    margin: 0;
    padding: 0;
}


/* cta */
.cta_area {
    background-image: url(../img/cta_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
}
.cta_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5% 0;
    width: 70%;
    margin: 0 auto;
    gap: 3%;
}
.cta_inner img {
    box-shadow: 0 9px 10px 0 rgb(0 0 0 / 24%);
    border-radius: 65px;
}

@media only screen and (max-width: 767px){
    .cta_inner {
        display: block;
        padding: 15% 0 13%;
        width: 90%;
        margin: 0 auto;
    }
    .cta_inner img {
        margin-bottom: 5%;
    }
}


/* worries */
.worries_area {
    position: relative;
}
.worries_inner {
    margin: 0 auto;
}
.worries_ttl {
    position: absolute;
    width: 100%;
    height: 100%;
}
.worries_ttl img {
    display: block;
    width: 50% !important;
    height: auto;
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    .worries_ttl img {
        width: 100% !important;
    }
}


/* about */
.about_area {
    position: relative;
}
.about_inner {
    margin: 0 auto;
}
.about_ttl {
    position: absolute;
    width: 100%;
    height: 100%;
}
.about_ttl img {
    display: block;
    width: 53% !important;
    height: auto;
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    .about_ttl img {
        width: 100% !important;
    }
}


/* reason */
.reason_area {
    position: relative;
}
.reason_inner {
    margin: 0 auto;
}
.reason_ttl {
    position: absolute;
    width: 100%;
    height: 100%;
}
.reason_ttl img {
    display: block;
    width: 65% !important;
    height: auto;
    margin: 3px auto 0;
}
@media only screen and (max-width: 767px){
    .reason_ttl img {
        width: 100% !important;
    }
}


/* before_after */
.before_after_area {
    background-image: url(../img/ba_bg_pc.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    position: relative;
}
.before_after_inner {
    margin: 0 auto;
}
.before_after_ttl {
    width: 100%;
    height: 100%;
}
.before_after_ttl img {
    display: block;
    width: 58% !important;
    height: auto;
    margin: 0 auto 5%;
}
.before_after_item {
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    .before_after_area {
        background-image: url(../img/ba_bg_sp.jpg);
    }
    .before_after_ttl img {
        width: 100% !important;
        margin: 0 auto 10%;
    }
    .before_after_item.swiper {
        padding: 0 0 22%;
    }
}

/* swiper */
.before_after_item.swiper {
    width: 100%;
    overflow: hidden;
    padding: 0 0 10%;
}
.before_after_item .swiper-slide {
    text-align: center;
    /* サイズや不透明度の変化を滑らかにする設定 */
    transition: transform 0.6s ease, opacity 0.6s ease;
}
.before_after_item .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
@media screen and (min-width: 768px) {
    .before_after_item .swiper-slide {
        opacity: 0.3;
    }
}
.before_after_item .swiper-slide-active {
    opacity: 1;
}


.swiper-pagination {
    bottom: 15% !important;
}
.swiper-pagination-bullet {
    background: #ffffff80 !important;
    opacity: 1 !important;
    transition: background-color 0.3s ease, transform 0.3s ease !important;
}
.swiper-pagination-bullet-active {
    background: #00a3ba !important;
}

@media only screen and (max-width: 767px){
    .before_after_item.swiper {
        padding: 0px 0 26%;
    }
    .before_after_item .swiper-slide img {
        width: 90% !important;
        margin: 0 auto;
    }
    .swiper-pagination {
        bottom: 20% !important;
    }
}


/* comparison */
.comparison {
    background-image: url(../img/comparison_pc_bg.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding: 0 0 8%;
}
.comparison_inner {
    margin: 0 auto;
}
.comparison_ttl img {
    display: block;
    width: 52% !important;
    height: auto;
    margin: 0 auto 3%;
}
.comparison_txt img {
    display: block;
    width: 40% !important;
    height: auto;
    margin: 0 auto 2%;
}
.comparison_item img {
    display: block;
    width: 50% !important;
    height: auto;
    margin: 0 auto;
}

@media only screen and (max-width: 767px){
    .comparison{
        padding: 0 0 35%;
    }
    .comparison_ttl img {
        width: 100% !important;
        margin: 0 auto 10%;
    }
    .comparison_txt img {
        width: 90% !important;
        margin: 0 auto 5%;
    }
    .comparison_item {
        width: 100%;
        overflow-x: auto;         /* 横方向にはみ出た分をスクロールさせる */
        white-space: nowrap;      /* 改行を防止 */
        -webkit-overflow-scrolling: touch; /* スマホでのスクロールを滑らかにする */
        padding: 0 20px;          /* 必要に応じて両端に少し余白を作ると綺麗です */
        box-sizing: border-box;
    }
    .comparison_item img {
        max-width: none !important; /* 画面内に収まろうとするのを防ぐ */
        min-width: 600px;         /* 【調整】スマホで表が見やすくなる最小の横幅 */
        height: auto;
        margin: 0 auto;
    }
}


/* reason2 */
.reason2 {
    position: relative;
    margin: -5% 0 0;
}
.reason2_inner {
    margin: 0 auto;
}
.reason2_ttl {
    position: absolute;
    width: 100%;
    height: 100%;
}
.reason2_ttl img {
    display: block;
    width: 60% !important;
    height: auto;
    margin: 5% auto 0;
}

@media only screen and (max-width: 767px){
    .reason2 {
        margin: -18% 0 0;
    }
    .reason2_ttl img {
        width: 100% !important;
        margin: 10% auto 0;
    }
}


/* cost */
.cost {
    position: relative;
}
.cost_inner {
    margin: 0 auto;
}
.cost_ttl {
    position: absolute;
    width: 100%;
    height: 100%;
}
.cost_ttl img {
    display: block;
    width: 55% !important;
    height: auto;
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    .cost_ttl img {
        width: 100% !important;
    }
}


/* faq */
.faq {
    background-color: #f3f5f7;
    padding: 0 0 7%;
}
.faq_inner {
    margin: 0 auto;
}
.faq_ttl {
    margin: 0 auto; 
}
.faq_ttl img {
    display: block;
    width: 55% !important;
    height: auto;
    margin: 0 auto 5%;
}
@media only screen and (max-width: 767px){
    .faq_ttl img {
        width: 100% !important;
        margin: 0 auto 10%;
    }
}

/* 全体のコンテナ */
.faq_container {
    background-color: #fff;
    margin: 0 24%;
    padding: 3%;
}

/* 1つのQ&Aの塊 */
.faq_item {
  border-bottom: 1px solid #707070;
}
.faq_item:first-child {
  border-top: 1px solid #707070;
}

/* 質問部分（ボタン） */
.faq_question {
  width: 100%;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 24px 10px;
  display: flex;
  align-items: center;
  text-align: left;
  position: relative;
}

/* QとAのアイコン共通 */
.ico_q, .ico_a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.3rem;
  margin-right: 15px;
  flex-shrink: 0;
}
.ico_q {
  background-color: #0d94a9;
  color: #fff;
}
.ico_a {
  border: 1px solid #0d94a9;
  color: #0d94a9;
}

/* 質問のテキスト */
.faq_txt {
  font-size: 1.3rem;
  color: #333;
  line-height: 1.5;
  font-weight: bold;
  padding-right: 40px;
  font-family: "Noto Serif JP", serif;
}

/* プラス・マイナスアイコンのCSS描画 */
.ico_toggle {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
}
.ico_toggle::before,
.ico_toggle::after {
  content: "";
  position: absolute;
  background-color: #333;
  transition: transform 0.3s ease;
}
/* 横棒 */
.ico_toggle::before {
  top: 7px;
  left: 0;
  width: 100%;
  height: 1px;
}
/* 縦棒 */
.ico_toggle::after {
  top: 0;
  left: 7px;
  width: 1px;
  height: 100%;
}
/* 開いているときは縦棒を回転させて隠す（マイナスにする） */
.faq_item.is-active .ico_toggle::after {
  transform: rotate(90deg);
  opacity: 0;
}

/* 回答部分（アニメーション用） */
.faq_answer {
  display: none;
  grid-template-rows: 0fr; /* 初期状態は高さゼロ */
  transition: grid-template-rows 0.3s ease;
  overflow: hidden;
}
.faq_item.is-active .faq_answer {
    display: block;            /* クラスがついたら表示 */
}

/* 回答の内側デザイン */
.faq_answer_inner {
  background-color: #f4fafd;
  padding: 0 20px 20px 20px;
  margin-bottom: 10px;
}
.answer_ttl {
  display: flex;
  align-items: center;
  font-weight: bold;
  color: #333;
  font-size: 1.3rem;
  font-weight: bold;
  padding-top: 20px;
  font-family: "Noto Serif JP", serif;
}
.answer_ttl p {
    margin: 0;
}
.answer_body {
  font-size: 1.1rem;
  color: #333;
  line-height: 1.8;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

@media only screen and (max-width: 767px){
    .faq {
        background-color: #f3f5f7;
    }
    .faq_container {
        margin: 0 5%;
    }
    .faq_txt {
        font-size: 1.1rem;
    }
    .answer_ttl {
        font-size: 1.1rem;
    }
    .answer_body {
        font-size: 1rem;
    }
}



/* director */
.director {
    position: relative;
}
.director_inner {
    margin: 0 auto;
}
.director_ttl {
    position: absolute;
    width: 100%;
    height: 100%;
}
.director_ttl img {
    display: block;
    width: 55% !important;
    height: auto;
    margin: 0 auto;
}
@media only screen and (max-width: 767px){
    .director_ttl img {
        width: 100% !important;
    }
}


/* footer */
footer {
    position: relative;
    padding: 40px 20px;
    background-color: #5c5c5c;
}
footer iframe {
    width: 100%;
    height: 150px;
}
.txt {
    color: #fff;
    margin-top: 20px;
}
.info_box {
    display: flex;
    font-size: 15px;
    padding: 2px 2px 15px;
    align-items: flex-start;
}
/* 左のラベル */
.left .info_label {
    min-width: 80px;
}
.right .info_label {
    min-width: 80px;
}
/* 右のテキスト */
.info_content {
    padding-left: 10px;
    border-left: 1px solid #ffffff;
    line-height: 1.4;
}
@media (max-width:768px){
    .txt .right {
        width: 100%;
    }
    .txt .left {
        width: 100%;
    }
    .left .info_label {
        min-width: 60px;
    }
    .right .info_label {
        min-width: 60px;
    }
    .info_box {
        display: flex;
        font-size: 12px;
    }
}
@media (min-width: 769px) {
    footer {
        padding: 8% 9%;
        background-color: #5c5c5c;
    }
    footer .content{
        display: flex;
        flex-direction: row-reverse;
        max-width: 1000px;
        margin: 0 auto;
        gap: 40px;
    }
    footer iframe {
        width: 50%;
        height: 270px;
    }
    .txt {
        width: 50%;
        margin-top: 0;
    }
    footer .left , footer .right{
        width: 100%;
    }
}



/* follow */
.follow_inner {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2%;
    margin: 0 2%;
}
.follow_btn, .follow_line {
    width: 50%;
}
.follow_btn img, .follow_line img {
    width: 100%;
    height: auto;
}
.cta_fixed {
    display: none;
}
@media only screen and (max-width: 767px) {
    .cta_fixed {
        display: block; /* SPの時は配置する */
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 9999;
        background: rgba(255, 255, 255, 0.9);
        padding: 10px 0;
        box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
        
        /* 最初はふわっと消しておく */
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s, visibility 0.3s;
    }

    /* JSで .show がついたら表示 */
    .cta_fixed.show {
        opacity: 1;
        visibility: visible;
    }
}