@charset "utf-8";

/* =========================================
   共通設定
   ========================================= */
body {
    font-family: "Noto Sans JP", Meiryo, sans-serif;
    margin: 0 auto;
    font-size: 16px;
    color: #000;
    width: 100%;
}

h1, h2, h3 {
    font-size: 2em;
}

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

header, section, footer {
    width: 100%;
    margin: 0 auto;
}

/* =========================================
   Header
   ========================================= */
header {
    position: relative;
}

header h1 {
    width: 100%;
    line-height: 0; 
}

h1.fv_pc {
    position: relative;
    display: block;
}

h1.fv_pc img {
    height: auto;
    object-fit: contain;
}

h1.fv_sp {
    display: none;
}

.top {
    background: #fff;
    padding: 15px 0 2px 0; 
    margin: 0 0 6px 0;
    font-size: clamp(16px, 1.2vw, 24px);
    text-align: center;
    line-height: 1.5;
}

.header_txt {
    display: inline-block;
    background: #E17B61;
    color: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    vertical-align: middle;
    position: relative;
    font-weight: bold;
}

.btn_instole {
    position: absolute;
    bottom: -20px; 
    left: 50%;
    transform: translateX(-50%);
    width: 41%;
    height: 18%;
    padding: 8px;
    z-index: 10; 
}

.btn_instole_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-top: 3%;
}

.flex_left,
.flex_right {
    width: auto;
    flex: initial;
}

.btn_instole_flex img {
    width: auto;
    height: 55px; 
    object-fit: contain;
}

.sp_instole_area {
    display: none;
}

/* =========================================
   Point セクション
   ========================================= */
.point {
    width: 80%;           
    max-width: 1800px;
    margin: 20px auto 0;  
    padding: 10px 0 250px; 
    box-sizing: border-box;
}

.point_title_sp {
    display: none;
}

.point_title {
    display: block;
    text-align: center;
    margin: 30px 0;
}

.point_title img,
.point_title_sp img {
    max-width: 100%;
    margin: 30px 0;
    height: auto;
}

.point_flex {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 100%;
    margin: 0 auto 60px;
    padding: 20px 0;
}

.point_item {
    width: calc((100% - 40px) / 3); 
    height: auto;
    flex-shrink: 0;
}

/* =========================================
   Footer 設定
   ========================================= */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    background: #E8A69C;
    padding: 1%;
    z-index: 100;
}

.footer_flex {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90%;
    margin: 0 auto;
    max-width: 1200px;
    text-align: center;
}

footer h2 {
    color: #fff;
    width: 100%;
    text-align: center;
    line-height: 2;
    font-size: clamp(0.8rem, 4.5vw, 1.5rem);
    white-space: nowrap;
    overflow: hidden;
    margin-bottom: 3px;
}

.footer_btn_instole_flex {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin: 0 auto;
    width: 100%;
}

.footer_btn_instole_flex > div,
.footer_flex_left,
.footer_flex_right {
    width: auto;
    flex: initial;
}

.footer_btn_instole_flex img {
    width: auto;
    height: 55px;
    display: block;
    object-fit: contain;
}

.footer_faq {
    margin-top: 10px;
}

footer p,
footer small {
    text-align: center;
    color: #fff;
    line-height: 1.5;
    margin-top: 5px;
}

footer small {
    display: block;
}

.underline {
    text-decoration: underline;
}

.footer_gif {
    position: absolute;   
    bottom: 5px;          
    right: 10px;
    height: 80%;          
    width: auto;
    z-index: 120;         
    pointer-events: none; 
}

/* =========================================
   レスポンシブ設定
   ========================================= */

@media screen and (max-width: 1230px) {
    .btn_instole {
        bottom: 2%; 
    }
}

@media screen and (max-width: 1000px) {
    .top {
        margin-bottom: 3px;
    }

    h1.fv_pc,
    .btn_instole {
        display: none;
    }

    h1.fv_sp {
        display: block;
    }

    .sp_instole_area {
        display: block;
        width: 100%;
        background: #E8A69C; 
        padding: 20px 0;
        text-align: center;
    }

    .sp_instole_area h2 {
        color: #fff;
        font-size: 1.2rem;
        margin-bottom: 15px;
        font-family: "DNP Shuei MaruGo Std", "DNP 秀英丸ゴシックStd", sans-serif;
        font-weight: bold;
    }

    .sp_instole_flex {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        width: 100%;
        margin: 0 auto;
    }

    .sp_flex_item {
        width: auto;
        margin: 0;
        flex: 0 1 auto;
    }

    .sp_flex_item img {
        width: auto;
        height: 55px;
        max-width: 100%;     
        object-fit: contain;
        display: block;
    }

    .footer_flex {
        display: block;
    }
    
    footer h2 {
        width: 100%;
    }
}

@media screen and (max-width: 800px) {
    .footer_flex {
        width: 80%;
    }
}

@media screen and (max-width: 768px) {
    .btn_instole_flex img,
    .footer_btn_instole_flex img {
        height: 48px; 
    }

    .point {
        width: 90%;
        margin-top: 15px; 
        padding-bottom: 120px;
    }

    .point_flex {
        flex-direction: column;
        align-items: center;
    }

    .point_item {
        width: 100%; /* 横幅いっぱいにする */
        height: auto;
    }
    
    .point_title {
        display: none;
    }

    /* ▼▼▼ 追加・修正箇所 ▼▼▼ */
    /* タイトル画像とPoint画像を揃えるための調整 */
    .point_title_sp {
        display: block;
        width: 100%;
    }

    .point_title_sp h2 {
        width: 100%;
        padding: 0; /* 他のスタイルでついた余白をリセット */
        margin: 0;
        line-height: 1;
    }

    .point_title_sp img {
        width: 100%;
        height: auto;
        margin: 0;
        display: block;
    }
    /* ▲▲▲ 追加・修正箇所 ▲▲▲ */

    /* 念のため優先度を高く指定 */
    h1.fv_pc {
        display: none !important;
    }
    h1.fv_sp {
        display: block;
    }
}

@media screen and (max-width: 670px) {
    h1, h2, h3 {
        font-size: 1.4em;
    }
    
    .footer_flex {
        display: block;
        width: 90%;
    }
    
    footer h2 {
        font-size: 1.3em;
    }
    
    footer small {
        font-size: 70%;
    }
}

@media screen and (max-width: 600px) {
    .footer_gif {
        height: 60%;
        width: auto;
        bottom: 5px;
        right: 5px;
    }
}

@media screen and (max-width: 500px) {
    .top {
        font-size: 11px; 
        padding-left: 15px;
        padding-right: 15px;
        line-height: 1.8; 
    }

    section h2 {
        padding: 10px 4%;
        font-size: 1.2em;
    }
    
    .footer_flex {
        width: 95%; 
    }

    .footer_btn_instole_flex {
        gap: 10px; 
    }

    .footer_btn_instole_flex img {
        height: 45px;
    }

    footer p {
        font-size: 12px;
    }
    
    footer small {
        font-size: 10px;
    }
}

@media screen and (max-width: 465px) {
    .footer_gif {
        height: 40%;
        width: auto;
        bottom: 5px;
        right: 5px;
    }
}



@media screen and (max-width: 430px) {
    .point {
        padding-bottom: 200px; 
    }
    
    .sp_instole_area h2 {
        font-size: 1rem;
    }

    .sp_flex_item img {
        height: 40px; 
    }
}

@media screen and (max-width: 375px) {
    footer h2 {
        font-size: 1.1em;
    }
}

@media screen and (max-width: 330px) {
    .footer_btn_instole_flex img {
        height: 40px;
    }
}