*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "hiragino-kaku-gothic-pron", sans-serif;
    font-weight: 600;
    font-style: normal;
    scroll-behavior: smooth;
    text-align: center;
}

html {
    background-color: #d3d3d3;
}

img {
    width: 100%;
    vertical-align: bottom;
}

body {
    margin: 0 auto;
    background-color: #ffffff;
    max-width: 600px;
}

button {
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    line-height: 0;
    font: inherit;
}

.anno {
    text-align: right;
    color: #fff;
    font-size: 15px;
}

.header_wrapper{
    padding: 2%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header_logo {
    width: 70%;
    padding-right: 5%;
    box-sizing: border-box;
}

.header_btn {
    width: 15%;
}

/*cta*/
.cta_wrapper {
   position: relative;
}

.cta_btn {
    position: absolute;
    width: 90%;
    left: 5%;
    top: 7%;
}

.cta_wrapper02 .cta_btn {
    position: static;
    width: 100%;
    padding-bottom: 8%;
}

.cta_flex {
    display: flex;
    padding-top: 2%;
}

.cta_flex img{
    width: 97%;
}

.cta_time {
    position: absolute;
    bottom: 27%;
    font-size: 20px;
    color: #fff;
    width: 80%;
    left: 10%;
}

/* =========================
   電話ボタン 光るアニメーション
========================= */

.cta_tel_btn {
    position: relative;
    display: block;
    width: 100%;
    overflow: hidden;
}

.cta_tel_btn img {
    display: block;
    width: 100%;
    height: auto;
}


/* 光 */
.cta_tel_btn::after {
    content: "";

    position: absolute;
    top: -50%;
    left: -60%;

    width: 20%;
    height: 200%;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.8),
        transparent
    );

    transform: rotate(20deg);

    animation: telShine 3s ease-in-out infinite;

    pointer-events: none;
}


/* 左から右へ */
@keyframes telShine {

    0% {
        left: -60%;
    }

    35% {
        left: 140%;
    }

    100% {
        left: 140%;
    }

}

.price_bottom {
    background-image: url(../img/price_bottom_bg.jpg);
    background-size: cover;
    padding: 8% 5%;
}

.price_bottom_ttl {
    width: 80%;
    padding-bottom:3%;
}

#area {
    background-image: url(../img/area_bg.jpg);
    background-size: cover;
    padding: 3% 5%;
}
.area_ttl {
    width: 68%;
    padding-bottom: 5%;
}

.area_contents {
    padding-bottom: 8%;
}

/*選ばれる理由*/
#reason {
    background-color: #8bddff;
    padding: 8% 3%;
}

.reason_ttl {
    width: 70%;
    margin: 0 auto;
    padding-bottom: 4%;
}

/*流れ*/
#flow {
    background-image: url(../img/flow_bg.jpg);
    background-size: cover;
    padding: 0 5% 7%;
}

.flow_ttl {
    width: 80%;
    margin: 0 auto;
    padding-bottom: 5%;
}


/* =========================
   お客様の声
========================= */

#review {
    width: 100%;
    overflow: hidden;
    padding-bottom: 10%;
}

#review .review_ttl {
    display: block;
    width: 100%;
    height: auto;
}


/* スライダー全体 */
.review_slider {
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 0 38px 10px;
    box-sizing: border-box;
    padding-top: 5%;
}


/* スライド */
.review_wrapper {
    display: flex;
    width: 100%;
    overflow: visible;

    transform: translateX(0);
    transition: transform 0.6s ease;
}

.review_slide {
    flex: 0 0 100%;
    width: 100%;
}

.review_slide img {
    display: block;
    width: 100%;
    height: auto;
    padding: 0 5%;
}


/* =========================
   左右の矢印
========================= */

.review_arrow {
    position: absolute;
    top: 50%;
    z-index: 10;
    width: 0;
    height: 0;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    transform: translateY(-50%);
}


/* 左矢印 */
.review_prev {
    left: 3%;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-right: 34px solid #00398a;
}


/* 右矢印 */
.review_next {
    right: 3%;

    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    border-left: 34px solid #00398a;
}


/* =========================
   ドット
========================= */

.review_dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;

    width: 100%;
    margin-top: 3%;
}

.review_dot {
    width: 8px;
    height: 8px;
    padding: 0;

    border: none;
    border-radius: 50%;

    background-color: #aaa;
    cursor: pointer;
}

.review_dot.active {
    background-color: #00398a;
}

/*Q&A*/

#faq {
    background-color: #ace7ff;
    padding: 8% 3%;
}

.faq_ttl {
    width: 50%;
    padding-bottom: 4%;
}


/* FAQ全体 */
.faq_wrapper {
    width: 100%;
}


/* FAQ 1つ */
.faq_item {
    width: 100%;
    margin-bottom: 3%;
}


/* =========================
   質問
========================= */

.faq_question {
    display: flex;
    width: 100%;
    align-items: center;

    padding: 2.5% 3%;

    border: none;
    background-color: #0644b5;

    color: #fff;
    text-align: left;

    cursor: pointer;
    box-sizing: border-box;
}


/* Q・A画像 */
.faq_icon {
    display: block;
    flex: 0 0 10%;
    width: 10%;
    height: auto;

    margin-right: 3%;
}


/* 質問テキスト */
.faq_question_text {
    flex: 1;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}


/* =========================
   矢印
========================= */

.faq_arrow {
    flex-shrink: 0;

    width: 0;
    height: 0;

    margin-left: 3%;

    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 8px solid #fff;

    transition: transform 0.3s ease;
}


/* 開いている時 */
.faq_item.active .faq_arrow {
    transform: rotate(180deg);
}


/* =========================
   回答
========================= */

.faq_answer {
    display: none;

    width: 100%;

    background-color: #fff;

    border-right: 2px solid #0644b5;
    border-bottom: 2px solid #0644b5;
    border-left: 2px solid #0644b5;

    box-sizing: border-box;
}


/* 開いている回答 */
.faq_item.active .faq_answer {
    display: block;
}


/* 回答内部 */
.faq_answer_inner {
    display: flex;
    width: 100%;
    align-items: flex-start;

    padding: 4% 3%;

    box-sizing: border-box;
}


/* 回答テキスト */
.faq_answer p {
    flex: 1;
    margin: 0;
    color: #062d6b;
    font-size:  16px;
    font-weight: 600;
    line-height: 1.55;
    text-align: left;
}


/*お問い合わせフォーム*/
#form {
    background-color: #feae03;
    padding: 8% 5%;
}

.form_ttl {
    padding-bottom: 5%;
}

#form .contact {
    width: 100%;
    margin: 0 auto;
    padding: 2% 5%;
    background-color: #fff;
    box-sizing: border-box;
}

#form form {
    width: 100%;
}

#form .form_tbl {
    width: 100%;
}


/* =========================
   tableを縦並びに
========================= */

#form table {
    display: block;
    width: 100%;
    border-collapse: collapse;
}

#form tbody {
    display: block;
    width: 100%;
}

#form tr {
    display: block;
    width: 100%;
    margin-bottom: 5%;
}

#form th,
#form td {
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    box-sizing: border-box;
}


/* =========================
   項目名
========================= */

#form th {
    margin-bottom: 1.5%;
    text-align: left;
}

#form th label {
    display: flex;
    align-items: center;
    color: #062b64;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}


/* =========================
   必須
========================= */

#form .must {
    display: inline-block;

    margin-right: 2%;

    padding: 0.5% 1.5%;

    background-color: #e72d18;

    color: #fff;

    font-size:  10px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
}


/* =========================
   input共通
========================= */

#form input[type="text"],
#form input[type="tel"],
#form input[type="email"],
#form input[type="date"],
#form input[type="time"],
#form select,
#form textarea {
    width: 100%;
    padding: 3%;
    border: 1px solid #062b64;
    border-radius: 4px;
    background-color: #fff;
    color: #062b64;
    font-size: 18px;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    text-align: left;
}


/* 通常input */
#form input[type="text"],
#form input[type="tel"],
#form input[type="email"] {
    min-height: 20px;
}


/* =========================
   フォーカス
========================= */

#form input:focus,
#form select:focus,
#form textarea:focus {
    border-color: #005ac6;
    outline: 1px solid #005ac6;
}


/* =========================
   placeholder
========================= */

#form input::placeholder,
#form textarea::placeholder {
    color: #aaa;
    font-size:  18px;
}


/* =========================
   セレクト
========================= */

#form select {
    min-height: 20px;
    padding-right: 10%;
    background-image:
        linear-gradient(45deg, transparent 50%, #062b64 50%),
        linear-gradient(135deg, #062b64 50%, transparent 50%);
    background-position:
        calc(100% - 6%) 48%,
        calc(100% - 4.5%) 48%;
    background-size:
        1.5% 1.5%,
        1.5% 1.5%;
    background-repeat: no-repeat;
     text-align: left;
}

#form option {
    text-align: left;
}


/* =========================
   日付・時間
========================= */

#form .date-time td {
    color: #062b64;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
}

#form .date-time input[type="date"],
#form .date-time input[type="time"] {
    width: 100%;
    margin: 1% 0 3%;
}


/* =========================
   症状 textarea
========================= */

#form textarea {
    display: block;
    width: 100%;
    height: 150px;
    resize: vertical;
    line-height: 1.5;
}


/* =========================
   個人情報保護方針
========================= */

#form .suc {
    width: 100%;
    height: 150px;

    margin: 7% auto 5%;

    overflow-y: scroll;

    border: 1px solid #aaa;

    background-color: #fff;

    box-sizing: border-box;
}

#form .suc > div {
    padding: 4%;
}

#form .suc p {
    margin: 0;

    color: #333;

    font-size:  15px;
    font-weight: 400;
    line-height: 1.6;

    text-align: left;
}


/* =========================
   確認ボタン
========================= */

#form .submitbtn {
    width: 100%;
    margin: 6% auto 0;
    text-align: center;
    margin-bottom: 5%;
}

#form .chbtn {
    width: 90%;
    padding: 4% 3%;

    border: none;
    border-radius: 6px;

    background-color: #e62202;
    color: #fff;

    font-size:  18px;
    font-weight: 700;

    cursor: pointer;
    box-sizing: border-box;

    /* 立体感 */
    box-shadow: 0 6px 0 #9e1802;

    transition: transform 0.1s ease,
                box-shadow 0.1s ease;
}


/* 押した時 */
#form .chbtn:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #9e1802;
}


/* タップ時 */
#form .chbtn:active {
    transform: translateY(1px);
}

/*エラー文*/
#form .tel_error {
    margin: 2% 0 0;
    color: #e62202;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
}


/*footer*/
footer {
    padding: 7% 0;
    background-color: #00398a;
}

footer p {
    font-size: 12px;
    color: #fff;
}


/*追従*/
/* =========================
   追従CTA
========================= */
/* =========================
   追従CTA
========================= */

.floating {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;

    width: 100%;

    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;
}


/* ボタン全体 */
.float_wrapper {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 1%;
    width: 100%;
    padding: 2%;
    background-color: #fff ;
}


/* 各リンク */
.float_wrapper a {
    display: block;
    height: 100%;
}


/* 画像 */
.float_wrapper img {
    display: block;

    width: auto;
    height: 100%;
}


/* 電話ボタン */
.float_wrapper a:nth-child(1) {
    width: 64%;
}


/* メールボタン */
.float_wrapper a:nth-child(2) {
    width: 18%;
}


/* LINEボタン */
.float_wrapper a:nth-child(3) {
    width: 18%;
}


/* 各画像をリンクサイズに合わせる */
.float_wrapper a img {
    width: 100%;
    height: auto;
}


/* 非表示 */
.floating.is-hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    pointer-events: none;
}

/* =========================
   確認画面
========================= */

.confirm_wrapper {
    background-color: #feae00;
    padding: 2%;
}

.contact.confirm {
    width: 90%;
    margin: 8% auto;
    padding: 6% 5% 8%;
    background-color: #ffffff;
    box-sizing: border-box;
}


/* =========================
   タイトル
========================= */

.contact.confirm h1 {
    margin: 0 0 7%;

    color: #062b64;

    font-size:  24px;
    font-weight: 700;
    line-height: 1.4;

    text-align: center;
}


/* =========================
   フォーム
========================= */

.contact.confirm form,
.contact.confirm .form_tbl {
    width: 100%;
}


/* =========================
   確認内容
========================= */

.contact.confirm table {
    display: block;

    width: 100%;

    border-collapse: collapse;
}

.contact.confirm tbody {
    display: block;
    width: 100%;
}

.contact.confirm tr {
    display: block;

    width: 100%;

    margin-bottom: 5%;
}


/* 項目名・内容 */
.contact.confirm th,
.contact.confirm td {
    display: block;

    width: 100%;

    box-sizing: border-box;
}


/* =========================
   項目名
========================= */

.contact.confirm th {
    padding: 2.5% 3%;

    border: none;

    background-color: #062b64;

    color: #fff;

    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;

    text-align: left;
}


/* =========================
   入力内容
========================= */

.contact.confirm td {
    min-height: 20px;

    padding: 3.5% 3%;

    border-right: 1px solid #062b64;
    border-bottom: 1px solid #062b64;
    border-left: 1px solid #062b64;

    background-color: #fff;

    color: #062b64;

    font-size:  18px;
    font-weight: 500;
    line-height: 1.6;

    text-align: left;

    overflow-wrap: anywhere;
}


/* =========================
   ボタンエリア
========================= */

.contact.confirm .submitbtn {
    display: flex;

    width: 100%;

    flex-direction: column;
    align-items: center;

    gap: 4%;

    margin: 8% auto 0;
}


/* ボタン共通 */
.contact.confirm .submitbtn input {
    display: block;

    width: 90%;

    margin-bottom: 4%;
    padding: 4% 3%;

    border: none;
    border-radius: 6px;

    font-family: inherit;
    font-size:  18px;
    font-weight: 700;

    cursor: pointer;

    box-sizing: border-box;

    -webkit-appearance: none;
    appearance: none;

     /* 立体感 */
     box-shadow: 0 6px 0 #9e1802;
     transition: transform 0.1s ease,
                 box-shadow 0.1s ease;
}


/* =========================
   送信する
========================= */

.contact.confirm .submitbtn input[name="submit"] {
    background-color:  #e62202;

    color: #fff;
}


/* =========================
   戻る
========================= */

.contact.confirm .submitbtn input[name="submitBack"] {
    background-color: #747474;
    box-shadow: 0 6px 0 #4e4e4e;
    color: #ffffff;
    margin-top: 2%;
}

/*完了画面*/
.finish {
    background-color: #fff;
    width : 90%;
    margin: 5% auto;
    padding: 5%
}

.backbtn a{
    color: #fff;
    text-decoration: none;
    padding: 5%;
    background-color: #747474;
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-top: 5%;
    border-radius: 6px;
    box-shadow: 0 6px 0 #4e4e4e;
}

@media screen and (min-width: 800px){
    .sp {
        display: none;
    }
}