/* コンテンツ幅 フル */
.contentsInr{width:auto;padding:0px;}
/* コンテンツ幅 950px */
.contentsInr .contentsUnit{padding:0 10px;}
@media all and (min-width:740px){.contentsInr .contentsUnit{width:950px;padding:0px;margin:0 auto;}}

.heroimgWrap.heroimgWrap-titleImg .mainHeading {
    @media (min-width: 740px) {
        width: calc(950 / 1920 * 100vw);
    }
    .mainTtl img {
        width: 100%;
    }
} 
.ttlSub {
    font-size: 1.6rem;
    text-align: left;
    @media (min-width: 740px) {
        text-align: center;
    }
}
.cpnLead {
    background-image: linear-gradient(90deg, #d5f894, #e4ffbf 20%, #fcffc9 50%, #e4ffbf 80%, #d5f894);
    padding: 20px 10px;
    @media (min-width: 740px) {
        padding-block: 40px;
    }
    .cpnLeadTtl {
        font-size: 1.6rem;
        @media (min-width: 740px) {
            font-size: 2rem;
        }
    }
    .cpnLeadTxt {
        font-size: 1.6rem;
    }
}
.recommendArea {
    background-color: #fff;
    padding-bottom: 96px;
    @media (min-width: 740px) {
        padding-bottom: 96px;
        background: #fff url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/shirahama/img_sites/2026/bg_recommend.png) center top repeat-y;
    }
}
.modelCourse {
    --grad: linear-gradient(180deg, #d2f1ff, #f3fcff);
    background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/shirahama/img_sites/2026/bg_dotted_sp.png), var(--grad);
    background-position: center top;
    background-repeat: no-repeat;
    background-size: contain;
    @media (min-width: 740px) {
        background-image: url(/content/dam/sites/wwwjalcojp/jp/ja/dom/special/shirahama/img_sites/2026/bg_dotted_pc.png), var(--grad);
    }
}
.recommendBox {
    position: relative;
    margin-top: 40px;
    @media (max-width: 739px) {
        .colWrap.clm_1_2col {
            .col:nth-of-type(n+2) {
                margin-top: 16px;
            }
        }
    }
    .recommendPointImg {
        position: relative;
    }
    &.--recom01 {
        width: 100%;
        margin-inline: auto;
        @media (min-width: 740px) {
            width: 750px;
        }
        .recommendPointImg {
            width: 100%;
            @media (min-width: 740px) {
                width: 460px;
            }
        }
        .recommendPointTxt {
            margin-top: -21px;
            display: grid;
            width: 100%;
            position: relative;
            z-index: 3;
            @media (min-width: 740px) {
                width: fit-content;
                margin-top: 0;
                padding-top: 40px;
                position: absolute;
                top: 0;
                right: 0;
            }
            .recommendPointSub {
                margin-top: 13px;
                margin-inline: auto;
                width: fit-content;
                text-align: center;
                font-size: 1.6rem;
                @media (min-width: 740px) {
                    margin-top: 56px;
                    margin-inline: auto 0;
                    text-align: left;
                }
            }
        }
    }
}
.relationLink {
    width: 100%;
    margin-top: 16px;
    margin-inline: auto;
    @media (min-width: 740px) {
        width: 750px;
        margin-top: 40px;
    }
    .relationLinkBox {
        display: flex;
        flex-direction: column;
        gap: 24px;
        @media (min-width: 740px) {
            padding: 10px;
        flex-direction: row;
        }
        &::before,
        &::after {
            display: none;
        }
    }
}
.labelRound {
    --roundSizeTag: 24px 0 16px 0;
    --roudSizeTxt: 16px 0 16px 0;
    border-radius: var(--roundSizeTag);
    padding: 8px 24px 4px 24px;
    display: inline-block;
    &.labelGrGrad {
        position: absolute;
        top: 0;
        left: 0;
        font-size: 2rem;
        color: #fff;
        background-image: linear-gradient(90deg, #005013, #007e2f);
    }
    &.labelTxt {
        border-radius: var(--roudSizeTxt);
        background-color: #FCFFC9;
        padding: 16px 24px 12px;
        font-size: 1.4rem;
        @media (min-width: 740px) {
            font-size: 1.6rem;
        }
    }
}
@media (max-width: 739px) {
    .text:has(.labelRound) {
        text-align: right;
    }
}
.spotContainer {
    margin-top: 28px;
    @media (min-width: 740px) {
        margin-top: 64px;
    }
    .ctm_pageTtl.spotTtl {
        .ttlLv2 {
            margin-block: 0;
            padding-block: 0 32px;
            .heading {
                font-size: 2rem;
                background: linear-gradient(transparent 60%, #FFE13C 0%);
                display: inline-block;
                @media (min-width: 740px) {
                    padding-inline: 13px;
                    font-size: 2.8rem;
                }
            }
        }
        &.cpnTtl {
            .heading {
                position: relative;
                padding-inline: 0;
                display: grid;
                width: fit-content;
                margin-inline: auto;
                background: none;
                @media (min-width: 740px) {
                    display: inline-block;
                }
                &::before, &::after {
                    content: '';
                    display: inline-block;
                    width: 7px;
                    height: 100%;
                    position: absolute;
                    inset: 0 auto 0;
                    margin-block: auto;
                    background-color: #262100;
                    clip-path: polygon(0 0, 100% 0%, 50% 100%);
                    @media (min-width: 740px) {
                        width: 8px;
                        height: 28px;
                    }
                }
                &::before {
                    left: -10px;
                    transform: rotate(-30deg);
                }
                &::after {
                    right: -10px;
                    transform: rotate(30deg);
                }
                span {
                    background: linear-gradient(transparent 60%, #FFE13C 0%);
                    display: inline-block;
                    letter-spacing: -0.04em;
                    @media (max-width: 739px) {
                        width: fit-content;
                        margin-inline: auto;
                    }
                    @media (min-width: 740px) {
                        &:first-child {
                            padding-left: 25px;
                            padding-right: 0;
                        }
                        &:nth-child(2) {
                            padding-left: 0;
                            padding-right: 25px;
                        }
                    }
                }
            }
            &.spWide {
                .heading {
                    @media (max-width: 739px) {
                        &::before {
                            left: -25px;
                        }
                        &::after {
                            right: -25px;
                        }
                    }
                }
            }
        }
    }
}
.modelCourse {
    padding-block: 48px;
    @media (min-width: 740px) {
        padding-block: 64px 96px;
    }
    .courceContainer {
        margin-top: 16px;
        @media (min-width: 740px) {
            padding-top: 64px;
        }
        .courceImg {
            padding-top: 12px;
            @media (min-width: 740px) {
                margin-top: 40px;
            }
        }
        &.--reverse {
            @media (max-width: 739px) {
                margin-top: 40px;
                .col {
                    order: 2;
                    &:last-child {
                        order: 1;
                    }
                }
            }
        }
    }
    .ctm_pageTtl {
        &.ttlModel {
            .ttlLv1 {
                margin-block: 0;
                padding-block: 0 24px;
                @media (min-width: 740px) {
                    padding-block: 0 32px;
                }
                .heading {
                    background-color: #124DAD !important;
                    border-radius: 80px;
                    padding: 8px 32px 4px;
                    font-size: 2rem;
                    color: #ffffff;
                    display: inline-block;
                    @media (min-width: 740px) {
                        padding: 10px 64px 6px;
                    }
                }
            }
        }
        &.ttlCourse {
            .ttlLv2 {
                margin-top: 0;
                padding-top: 0;
                .heading {
                    display: flex;
                    gap: 16px;
                    align-items: center;
                    font-size: 2rem;
                    .iconDay {
                        font-size: 1.6rem;
                        color: #fff;
                        display: inline-flex;
                        align-items: center;
                        justify-content: center;
                        background-image: linear-gradient(315deg, #006cbf, #124dad);
                        border-radius: 50px;
                        width: 60px;
                        height: 60px;
                    }
                    .ttlTxt {
                        padding-bottom: 2px;
                        border-bottom: 2px dotted #124DAD;
                        text-align: left;
                    }
                }
            }
        }
    }
    .courceTbl {
        border-radius: 8px;
        overflow: hidden;
        .table_typeA table tr th:first-child,
        .table_typeA table tr td:first-child {
            border-left: none;
        }
        .table_typeA {
            border-color: transparent;
            table {
                border: none;
                background: transparent;
                .tbl_col_1 {
                    width: 80px;
                }
                tr {
                    th, td {
                        border-style: dotted;
                        border-color: #66A3DD;
                    }
                    th {
                        background-color: #A3DCFF;
                        color: #333;
                        vertical-align: top;
                    }
                    td {
                        border-left: none;
                        background-color: #ffffff;
                        padding: 10px 24px 6px;
                        &:has(.inrTable) {
                            padding: 0;
                        }
                        .inrTable {
                            .text {
                                padding: 10px 24px 6px;
                                float: none;
                                &:not(:first-child) {
                                    border-top: 1px dotted #66A3DD;
                                }
                            }
                        }
                    }
                    &:first-child {
                        th, td {
                            border-top: none;
                        }
                    }
                }
            }
        }
    }
}
.cpnDetail {
    padding-top: 20px;
    .spotContainer {
        .tmblist {
            margin-top: 0;
        }
    }
}
.applyContainer {
    border-top: 1px solid #333;
    border-bottom: 1px solid #333;
    .applyBox {
        padding-block: 24px;
        display: flex;
        align-items: center;
        flex-direction: column;
        @media (max-width: 739px) {
            .freehtml {
                margin-left: 0 !important;
            }
        }
        @media (min-width: 740px) {
            flex-direction: row;
        }
    }
    .responsivegrid:nth-child(2) {
        border-top: 1px solid #333;
        border-bottom: 1px solid #333;
    }
    .prizeName {
        font-size: 1.6rem;
    }
}