@charset "utf-8";

/* =========================================================================================
Global Reset
========================================================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { font-family: "Noto Sans Japanese", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Meiryo", sans-serif; color: #000; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
svg text { font-family: initial !important;}

:root { 
    --blue: #0098D7; 
    --deepblue: #007CD7;
    --slyblue: #BCEBFE;
    --black: #000;}


@media screen and (min-width: 1025px) { .pc { display: block; } .tb, .sp { display: none; } }
@media screen and (min-width: 769px) and (max-width: 1024px) { .tb { display: block; } .pc, .sp { display: none; } }
@media screen and (max-width: 768px) { .sp { display: block; } .pc, .tb { display: none; } }


/* =========================================================================================
Container
========================================================================================= */
section { position: relative;}
.container { max-width: 1200px; margin: 0 auto; padding-right: 0.7em; padding-left: 0.7em;}

@media screen and (max-width: 768px) { 
    .container { max-width: 600px; padding-right: 1em; padding-left: 1em;}
}


/* =========================================================================================
Header
========================================================================================= */
.header { padding: 20px 0px;}
.header .container {  display: flex; justify-content: space-between;  align-items: center; max-width: unset; }
.header .container .flex { display: flex; gap: 1em; justify-content: right;}
.header .container .flex img { height: clamp(30px, 4vw, 40px);}
.header .logo { color: var(--blue); font-size: clamp(18px, 4vw, 23px); font-weight: bold;}
.header .logo b { color: var(--black);font-size: clamp(24px, 4vw, 29px); padding-left: 0.5em;}

@media screen and (max-width: 900px) {
    .header .container { flex-direction: column-reverse; padding-right: 0.1em; padding-left: 0.1em;}

}

/* =========================================================================================
Main-visual
========================================================================================= */
.main-visual .visual-content img { width: 100%; }
.main-visual .button img { width: 200px; }

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

/* =========================================================================================
Intro Section
========================================================================================= */
.intro { background-color: #fff; margin-bottom: 5em; text-align: center; }

.headline { font-size: clamp(42px, 4vw, 50px); font-weight: bold; width: fit-content; margin: 0 auto; line-height: 1.8;}
.headline p { padding-top: 10px;}
.headline span { position: relative; color: var(--blue); }
.headline span::before { content: ''; position: absolute; top: -13px; left: 33%; width: 15px; height: 15px; background-color: var(--blue); border-radius: 50%; }


.problems { display: flex; justify-content: space-around;  padding: 3em 0px;}
.problem:nth-child(2) { padding-top: 10em;}
.problem img { margin: 0 auto; padding-bottom: 1em;}
.problem p { background: linear-gradient(transparent 60%, var(--slyblue) 0%); display: inline; padding: 0 1px 0px; font-size: clamp(20px, 4vw, 25px); font-weight: bold; text-wrap: nowrap;}
.problem { }

@media screen and (max-width: 900px) { 
    .problems { flex-direction: column; gap: 2em;}
    .problem:nth-child(2) { padding-top: 0px;}

    .intro { margin-top: 2em;}
}

/* =========================================================================================
Flow Section
========================================================================================= */
/* --- 背景の設定 --- */
.flow { background-color: var(--slyblue); background-image: url(../images/body/section_separate_01.png), url(../images/body/section_separate_02.png); background-size: contain; background-position: top, bottom; background-repeat: no-repeat, no-repeat; }

@media screen and (max-width: 768px) {
    .flow { background-image: url(../images/body/section_separate_01_sp.png), url(../images/body/section_separate_02_sp.png);} 
}

/* --- レイアウト調整 --- */
.flow .text-content { position: relative; display: flex; justify-content: center; margin-bottom: 10em; }

/* --- 左右のキャラクター画像配置 --- */
.flow .text-content::before, .text-content::after { content: ''; position: absolute; top: 50%; transform: translateY(-50%); max-width: 250px; height: auto; animation: float 3s ease-in-out infinite; }
@keyframes float {
    0% { transform: translateY(-50%);}
    50% { transform: translateY(-60%); /* 上に浮かせる */}
    100% { transform: translateY(-50%); /* 元に戻る */}
}
.flow .text-content::before { left: 0; background-image: url('../images/body/person-left.png'); background-size: contain; background-repeat: no-repeat; width: 250px; height: 100%; }
.flow .text-content::after { right: 0; background-image: url('../images/body/person-right.png'); background-size: contain; background-repeat: no-repeat; width: 250px; height: 100%; }

/* --- テキストのスタイル --- */
.flow .center { text-align: center; margin: 0 auto; }
.flow .center h2 { font-size: clamp(40px, 4vw, 57px); color: var(--deepblue); font-weight: 900; margin-bottom: 50px; position: relative; display: inline-block; text-wrap: nowrap; line-height: 1.2;}
.flow .center h2::before { content: ''; position: absolute; left: -40px; top: 55%; transform: translateY(-50%) rotate(-45deg); border-left: 5px solid var(--deepblue); height: 1.2em; border-radius: 30px; }
.flow .center h2::after { content: ''; position: absolute; right: -40px; top: 55%; transform: translateY(-50%) rotate(45deg); border-right: 5px solid var(--deepblue); height: 1.2em; border-radius: 30px; }
.flow .center p { font-size: clamp(20px, 2vw, 23px); line-height: 2.2; font-weight: bold; }

/* --- 吹き出しのスタイル --- */
.speech { text-align: center; }
.speech .speech-bubble { display: inline-block; background-color: #FFF500; color: var(--blue); padding: 10px 30px; border-radius: 20px; position: relative; font-size: clamp(28px, 2vw, 40px); font-weight: bold; text-align: center; margin-bottom: 1.5em; }
.speech .speech-bubble::after { content: ''; position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); border-width: 25px 25px 0; border-style: solid; border-color: #FFF500 transparent transparent transparent; }
.speech .description { font-size: clamp(20px, 2vw, 20px); line-height: 2; text-align: center; font-weight: bold; }

/* --- その他のスタイル --- */
.nadonado { position: relative; width: 20%; min-width: 180px; max-width: 255px; margin: 0 auto; padding-bottom: 3em; top: -50px;}

.insurance-box { padding-top: 3em; padding-bottom: 20em;}
.insurance-process { display: flex; align-items: center; margin-top:  clamp(3em, 4vw, 5em);; background-color: #fff; padding: 3em; gap: 2em; position: relative; min-height: 500px;}
.insurance-process:nth-child(odd) { margin-left: calc(50% - 50vw); border-radius: 0px 100px 100px 0px; justify-content: end; }
.insurance-process:nth-child(even) { margin-right: calc(50% - 50vw); border-radius: 100px 0px 0px 100px; flex-direction: row-reverse; justify-content: start; }
.insurance-process:first-of-type::before { content: ''; position: absolute; top: -80px; left: 15%; width: 139px; height: 80px; background-image: url(../images/body/tori.svg); background-size: cover;}

.image-container { flex: 1; max-width: 480px; padding: 0em 0em;}
.text-container {  flex: 1; max-width: 600px; padding: 0em 2em;}
.text-container h2 { font-size: clamp(30px, 4vw, 35px); color: var(--deepblue); padding-bottom: clamp(20px, 4vw, 35px);}
.text-container p { font-size: clamp(17px, 4vw, 19px); line-height: 2;}
.text-container p.complement { font-size: 0.9em; margin-top: 1em;}


/* --- メディアクエリのスタイル --- */
@media screen and (max-width: 1025px) {
    .flow .text-content { margin-bottom: 28em; max-width: 600px; margin: 0 auto 380px;}
    .flow .text-content::before, .text-content::after { top: 155%;  width: 200px !important; }

    .flow .center p { text-align: left; }
    .flow .center h2::before { left: -5%;  top: 70px;}
    .flow .center h2::after { right: -5%; top: 70px;}

    .speech .description { max-width: 600px; margin: 0 auto; text-align: left; }

    .insurance-box { display: flex; flex-direction: column; align-items: center; padding-bottom: 13em;}
    .insurance-process { flex-direction: column-reverse !important; margin-left: unset !important; border-radius: 30px !important; gap: 1.5em; width: fit-content; padding: 1.5em; }
    .insurance-process:nth-child(odd) { margin-left: unset;}
    .insurance-process:nth-child(even) { margin-right: unset; flex-direction: unset;}

    .text-container { padding: 0em;}
    .text-container h2 { text-align: center;}

}



/* =========================================================================================
Shop Info Section
========================================================================================= */
.shop-info { position: relative; top: -2px; background: #fff;}
.shop-details { width: fit-content; margin: 0 auto;}
.shop-details h4 { font-size: clamp(24px, 2vw, 37px); text-align: center; line-height: 1.2;}
.shop-details b { font-size: clamp(50px, 4vw, 53px); }

.shop-details dl { font-weight: bold; font-size: clamp(18px, 4vw, 20px); margin-top: 2em;}
.shop-details dl div { display: flex; margin-bottom: 0.8em;}
.shop-details dt {  background-color: var(--blue); color: white; padding: 2px; border-radius: 10px; width: 133px; margin-right: 20px; text-align: center; height: fit-content;}
.shop-details dd { margin: 0; padding: 5px 0; flex: 1; }
.shop-details dd .black {  font-weight: normal; background-color: #000; color: #fff; width: fit-content; padding: 3px 7px;}


@media screen and (max-width: 768px) { 
    .shop-details dt { width: 100%;}
    .shop-details dl div { flex-direction: column;}
    .shop-details dd { text-align: center;}
    .shop-details dd .black { margin: 0 auto;}
}

.exterior { display: flex; gap: 1em; flex-wrap: wrap; justify-content: space-around; padding: 3em 0px;}
.exterior img { border-radius: 20px;}

.map { position: relative; width: 100%; height: 400px; }
.map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



/* =========================================================================================
Footer
========================================================================================= */

.reservation {
    position: fixed;
    right: 3%;
    bottom: 3%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in {
    opacity: 1;
    transform: translateY(0);
}

@media screen and (max-width: 750px), screen and (max-height: 500px) {
    .reservation {
        right: 50%;
        transform: translateX(50%) !important;
        width: 90%;
        max-width: 330px;
    }
}




.footer { background-color: var( --slyblue); text-align: center; padding: 40px 0; margin-top: 100px; }
.footer p { font-size: clamp(13px, 2vw, 18px);  text-wrap: nowrap;}


@media screen and (max-width: 750px), screen and (max-height: 500px) {
    .footer { padding: 30px 0 100px 0px;}
}