@charset "UTF-8"; 

:root {
    --red: #ED0303;
    --pink: #F8F2F2;
    --black: #100F10;
    --orange: #FF4E00;
    --white: #ffffff;
    --blue: #215888;
    --ja: "Noto Sans JP", sans-serif;
    --en: "Josefin Sans", sans-serif;
    --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
}

main{padding-top: 85px;}


/* ====================================================
    ▼ 電鉄毎の広告ページ
==================================================== */

/* ============== 電鉄毎：メインビジュアル ============== */

/* 縦書き英単語用relative */
.sec-adintro {
    position: relative;
}

.sec-adintro:has(.sec-adintro__filter.is-fixed) {
    padding-bottom: calc(70px + 2em);
}

/* 縦書き英単語用疑似要素_RAILWAY */
.sec-adintro::before {
    content: "RAILWAY";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-55%);
    font-family: var(--en);
    font-size: calc(8rem + 9vw);
    font-weight: 300;
    writing-mode: vertical-rl;
    color: #FFD1D1;
    z-index: -1;
    pointer-events: none;
    line-height: 0.5;
    letter-spacing: 1rem;
}

/* 赤い三角形,白い台形用relative */
.sec-adintro__innner {
    position: relative;
    width: 95%;
    max-width: 1440px;
    margin: 0 auto;
}

/* 赤い三角形 */
.sec-adintro__innner::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, 100%);
    width: 3%;
    min-width: 25px;
    max-width: 35px;
    aspect-ratio: 3 / 1;
    background-color: var(--red);
    clip-path: polygon(50% 100%, 0 0, 100% 0);
    z-index: 3;
}

/* 白い台形 */
.sec-adintro__innner::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 15%;
    min-width: 120px;
    aspect-ratio: 4 / 1;
    background-color: #fff;
    clip-path: polygon(0 0, 100% 0, 85% 100%, 15% 100%);
    z-index: 2;
}

/* adintroの背景、レイアウト */
.sec-adintro__content {
    position: relative;
    display: grid;
    align-items: center;
    background-color: #fff;
    margin: 3em auto 5em;
    border-radius: 4rem 4rem 0 4rem;
    border-top: 4px solid #ED0303;
    grid-template-columns: 1fr minmax(40%,320px);
    padding: 0 calc(1rem + 6vw) 7rem;
    gap: 1rem 3rem;
}

.sec-adintro__ttl {
    grid-column: 1/3;
    grid-row: 1;
    font-weight: 900;
    font-size: min(calc(1.9rem + 1.5vw), 3.4rem);
    background-color: #fff;
    border-radius: 0 60px 0 0;
    border-right: 5px solid var(--red);
    padding: 0.5em 0;
    width: 80%;
    margin:auto auto 0 0;
    max-width: 670px;z-index: 5;
}

.sec-adintro__ttl--s {
    font-size: min(calc(1.4rem + 1.6vw), 2.8rem);
}

.sec-adintro__text {
    position: relative;
    z-index: 2;
    padding: 3em 1.4em;
}

.sec-adintro__text p {
    font-size: min(calc(1.2rem + 0.8vw), 1.9rem);
    line-height: 2.0;
}

.sec-adintro__right {
    width:fit-content;
    margin: auto;
    text-align: center;
}

.sec-adintro__right--label {
    display: inline-block;
    border: 1px solid #707070;
    border-radius: 30px;
    padding: 0.3em 1.5em;
    text-align: center;
    margin-bottom: 4rem;
    font-size: min(calc(1.2rem + 1.4vw), 2.2rem);
}

.sec-adintro__right--list {
    text-align: left;
    font-weight: 600;
    color: var(--red);
}

.sec-adintro__right--item {
    display: block;
    position: relative;
    margin-bottom: 1.1em;
    border-bottom: 2px dotted;
    font-size:min(calc(1rem + 3vw),2.3rem);
}

.sec-adintro__right--item::before {
    content: "";
    position: absolute;
    left: 5%;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3em;
    height: 1.3em;
    background-image: url('../img/train_icon.svg');
    background-size: contain;
    background-repeat: no-repeat;
}

.sec-adintro__right--item a {
    display: block;
    color: inherit;
    padding-left: 2em;
    padding-right: 1em;
    width: 100%;
    height: 100%;
    font-size: min(calc(1.2rem + 1.5vw), 2.4rem);
}

.sec-adintro__right--item a:hover {
    opacity: 0.8;
}

.sec-adintro__right--item:last-child {
    margin-bottom: 0;
}

.sec-adintro__img {
    grid-column: 1/3;
    grid-row: 1;
    display: flex;
    width: 100%;
    height: 30vh;
    min-height: 240px;
    transform: translateY(-30px);
}

.sec-adintro__img img {
    width: 50%;
    object-fit: cover;
    height: 100%;
}

.sec-adintro__nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin: 0 auto 5%;
    padding: 0;
    list-style: none;
    width: 90%;
    max-width: 1300px;
}

.sec-adintro__nav-item a {
    border: 0.5px solid var(--black);
    text-align: center;
    font-weight: 600;
    background-color: #fff;
    transition: background-color 0.3s, color 0.3s;
    display: block;
    padding: 1.5em 0;
    text-decoration: none;
    color: var(--black);
    font-size: min(calc(1rem + 1.2vw), 1.8rem);
}


.sec-adintro__nav-item:hover a {
    background-color: var(--red);
    color: var(--white);
}

/* ---  レスポンシブ  --- */
@media (max-width: 768px) {
    .sec-adintro__content {
        display: flex;        /* ← blockじゃなくflexに */
        flex-direction: column;
    }

    /* 順番を指定 */
    .sec-adintro__ttl {
        order: 1;
    }
    .sec-adintro__img {
        order: 2;
    }

    .sec-adintro__text {
        order: 3;
    }
    .sec-adintro__right {
        order: 4;
    }

    .sec-adintro__ttl {
        padding: 2em 0 0.4em;
        width: auto;
        background-color:unset;
        border-right: unset;
        border-bottom: dashed 2px red;
    }

    .is-train .sec-adintro__ttl {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .sec-adintro__img {
        height: auto;
        min-height: auto;
        transform: inherit;
        display: block;
        margin-top: 3rem;
    }

    .sec-adintro__img img {
        width: 100%;
    }

    .sec-adintro__img img:nth-of-type(2) {
        display: none;
    }
}

/* ============== 電鉄毎：広告別 ============== */
.sec-ad {
    background: var(--white);
}

.sec-ad__container {
    width: 90%;
    margin: 0 auto;
    padding: 5em 0;
    max-width: 1200px;
}


.sec-ad__ttl {
    position: relative;
    width: 95%;
    margin: 0 auto 2em;
    font-family: var(--ja);
    font-size: min(calc(1.8rem + 1.2vw),6rem);
    font-weight: 600;
    padding-bottom: 0.4em;
}

.sec-ad__ttl::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right,
            var(--black),
            var(--black) 8px,
            transparent 8px,
            transparent 14px);
}

.sec-ad__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 6em 2em;
}


.sec-ad__item {
    width: 100%;
    height: fit-content;
    max-width: 378px;
}

.sec-ad__link {
    position: relative;
    display: block;
    color: #100F10;
}

.sec-ad__img {
    position: relative;
    overflow: hidden;
    height: 280px;
    padding: 0.4em;
    box-sizing: border-box;
    z-index: 1;
}

.sec-ad__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;    /* z-index効かせる用 */
    z-index: 1;
    transition: transform 0.4s ease;
}

/* ホバー時に画像を拡大 */
.sec-ad__item:hover .sec-ad__img img {
    transform: scale(1.1); 
}


.sec-ad__label {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 3em;
    background-color: rgba(255, 78, 0, 0.8);
    border-radius: 0 100px 0 0;
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    z-index: 2;
    pointer-events: none;
}

.sec-ad__img::before {
    content: "";
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(140deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 0%, rgba(252, 163, 155, 0.10970325630252098) 35%, rgba(243, 29, 2, 1) 50%, rgba(243, 29, 2, 1) 50%, rgba(252, 163, 155, 0.11) 65%, rgba(255, 255, 255, 0) 100%);
    z-index: 0;
    pointer-events: none;
}


.sec-ad__caption {
    position: relative;
}

.sec-ad__caption-ttl {
    font-family: var(--ja);
    padding: 1em 1em 2.4em 0.2em;
    font-size: min(calc(1.4rem + 1.4vw), 2.2rem);
    border-bottom: solid 0.5px;
}

/* ホバー */
.sec-ad__view {
    position: absolute;
    bottom: 0;
    right: 0;
    transform: translateY(50%);
    background: var(--black);
    color: var(--white);
    padding: 0 1em;
    font-size: min(calc(1.2rem + 1.5vw), 2.0rem);
    font-family: var(--en);
    font-weight: 300;
    display: inline-flex;
    align-items: center;
    overflow: hidden;
    z-index: 0;
}

/* 擬似要素で斜め白帯を作成 */
.sec-ad__view::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 150%;
    height: 100%;
    background: rgba(255,255,255,0.2);
    transform: skewX(-45deg);
    z-index: -1;
    opacity: 0; 
}

/* hover時にアニメーション再生 */
.sec-ad__view:hover::before {
    animation: skewanime 0.6s forwards;
    opacity: 1; 
}

@keyframes skewanime {
    100% {
        left: 120%;
    }
}

.sec-ad__view::after{
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

.sec-ad__view:visited {
    color: var(--white);
}

/* スクロールイベント */
.js-ad-card {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.js-ad-card.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---  レスポンシブ  --- */
@media (max-width:1137px) {
    .sec-ad__item {
        max-width: 480px;
    }
}

@media (max-width: 746px) {
    .sec-ad__ttl {
        text-align: center;
    }

    .sec-ad__list {
        justify-items: center;
    }

    .sec-ad__item:hover .sec-ad__img img {
        transform: none; 
    }

    .sec-ad__view:hover::before {
        animation: none;  
        opacity: 0;        
    }
}

/* ============== 下層：NEWS ============== */
.sec-news {
    position: relative;
    padding: 5em 0 8em 0;
    z-index: 2;
    background: linear-gradient(180deg,white 50%,var(--pink) 50%);
}

.sec-news__container {
    position: relative;
    display: grid;
    margin: 0 auto;
    padding: 2em 0;
    width: 85%;
    max-width: 1200px;
    min-height: 350px;
    grid-template-columns: minmax(200px, 25vw) minmax(400px, 50vw);
    gap: 2em;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom, #ED0303, #FF4E00);
    border-radius: 60px;
    z-index: 10;
}

.sec-news__container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% + 1px));
    width: max(10vw, 120px);
    aspect-ratio: 4 / 1;
    background-color: var(--red);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

.sec-news__ttlbtn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sec-news__ttl--ja {
    font-size: min(calc(1rem + 1.2vw), 1.8rem);
    color: var(--black);
    font-weight: 400;
    margin-bottom: 10px;
}

.sec-news__ttl--en {
    font-family: var(--en);
    font-size: min(calc(3.5rem + 1.8vw), 4.5rem);
    font-weight: 300;
    line-height: 1.0;
    color: #fff;
}

.sec-news__btn {
    background-color: var(--black);
    color: #fff !important;
    border: none;
    margin-top: 1.5em;
    padding: 10px 40px;
    border-radius: 9999px;
    cursor: pointer;
    font-size: min(calc(1rem + 1.5vw), 1.6rem);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sec-news__btn:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    background-color: var(--white);
    color: var(--black) !important;
}


.sec-news__link {
    display: block; 
    color: inherit;
}

.sec-news__link:hover {
    opacity: 0.7;
}

.sec-news__item {
    position: relative;
    color: #fff;
    padding: 10px;
}

.sec-news__text {
    position: relative;
    display: inline-block;
    color: #fff;
    line-height: 1.8;
}

/* 黄色の装飾 */
.sec-news__item::before {
    content: "";
    position: absolute;
    top: 20px;
    left: -15px;
    width: 15px;
    height: 2px;
    background: linear-gradient(to right,
            #DBC75A,
            #F3F8AC,
            #B2A720,
            #CCCC19,
            #A29216);
}

/* 日付 */
.sec-news__time {
    display: block;
    font-size: min(calc(1.2rem + 1.2vw), 1.8rem);
    font-family: "Josefin Sans", serif;
    font-weight: 300;
    line-height: 1.6em;
    color: var(--white);
}

/* ---  レスポンシブ  --- */
@media (max-width: 800px) {
    .sec-news__container {
        padding: 4em 3em;
        grid-template-columns: 1fr;
        gap: 30px;
    }
}

/* ============== 下層：MEDIA Search ============== */
.sec-medsrch {
    padding: 4em 0 5em;
    background: linear-gradient(to bottom, #c5e4fc, #ffffff);
}

.sec-medsrch__ttl {
    margin-bottom: 0.6em;
    font-family: var(--en);
    font-size: min(calc(3.6rem + 2.4vw), 6.3rem);
    font-weight: 400;
    line-height: 1.0;
    text-align: center;
    background: linear-gradient(45deg, #36B4D2 20%, #29489B 40%, #74C368 70%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.sec-medsrch__list {
    display: grid;
    justify-content: center;
    gap: 2em;
    width: 90%;
    margin: 0 auto;
    max-width: 800px;
    grid-template-columns: 1fr 1fr;
}

.sec-medsrch__item {
    position: relative;
    background-color: #C5E5FC;
    border-radius: 25px;
    padding: 4rem 2rem 7rem;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    width: 100%;
    cursor: pointer;
}

.sec-medsrch__item::after {
    content: "";
    position: absolute;
    bottom: calc(1.1em + 5%);/* フォントサイズ+5% */
    left: 50%;
    transform: translateX(-50%);
    width: 2em;
    height: 2em;
    background-image: url("../img/plus_icon.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.js-medsrch-toggle.is-open::after {
    background-image: url("../img/minus_icon.svg");
}


.sec-medsrch__btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    cursor: pointer;
}

.sec-medsrch__main {
    font-size:min(calc(1.7rem + 2vw),5.2rem);
    font-weight: 600;
    color: #0D559D;
    text-align: center;
    line-height: 1.3;
}

.sec-medsrch__sub {
    font-size: 0.6em;
    font-weight: 600;
    color: var(--black);
    display: block;
}

/* トグルで表示されるリスト */
.sec-medsrch__dropdown {
    display: none;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translateX(-50%);
    width: 130%;
    background: #fff;
    border-radius: 20px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    padding: 3rem 0.5rem;
    z-index: 100;
}

.sec-medsrch__dropdown ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem 1rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

.sec-medsrch__dropdown a {
    display: flex; 
    justify-content: flex-start; 
    align-items: center; 
    padding: 0.8rem 1.2rem;
    background: #fff;
    border-radius: 12px;
    color: var(--black);
    font-weight: 400;
    text-align: left;
    transition: background 0.3s, color 0.3s;
    position: relative;
}

.sec-medsrch__dropdown a::before {
    content: ""; 
    display: inline-block;
    width: 0.7em;
    height: 0.7em;
    margin-left: 0.5rem;
    margin-right: 1rem;
    background: url('../img/blue-list.svg') no-repeat center;
    background-size: contain;
    transition: transform 0.2s;
}

.sec-medsrch__dropdown a:hover {
    color: var(--blue);
}

.sec-medsrch__dropdown.is-open {
    display: block;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .sec-medsrch__list {
        grid-template-columns: 1fr;
        width: 70%;
    }
    .sec-medsrch__dropdown {
        padding: 1em 0em;
    }

    .sec-medsrch__dropdown a {
        padding: 1.5rem 1.2rem;
    }
}

@media (max-width: 425px) {
    .sec-medsrch__dropdown ul {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* ====================================================
    ▼ 媒体別ページ
==================================================== */

/* ============== 媒体別：メインビジュアル ============== */

/* 縦書き英単語用疑似要素_train */
.sec-adintro.is-train::before {
    content: "TRAIN";
}

.sec-adintro.is-train .sec-adintro__right--item a {
    font-size: min(calc(1.1rem + 1.2vw), 1.8rem);
}

/* 電球アイコン */
.sec-adintro.is-train .sec-adintro__right--item::before {
    left: 4%;
    background-image: url('../img/light_icon.svg');
}

/* 電鉄で絞るボタン */
.sec-adintro__filter {
    position: relative;
    display: block;
    width: fit-content;
    padding: 1em 6em 1em 5.2em;
    font-size: min(calc(1.2rem + 1.3vw), 2.0rem);
    color: #C3C3C3;
    border: 1px solid #707070;
    border-radius: 50px;
    background: #fff;;
    cursor: pointer;
    margin: 0 auto 2em;
}

.sec-adintro__filter::after {
    content: "";
    position: absolute;
    right: 15%;
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 8px;
    height: 8px;
    border-right: 1px solid #707070;
    border-bottom: 1px solid #707070;
}

.sec-adintro__filter select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

/* 電鉄で絞る・媒体種類を選ぶボタン fixed時 */
.sec-adintro__filter.is-fixed {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%) scale(0.8);
    z-index: 999;
    background: linear-gradient(to bottom, #00c6fb, #005bea);
    border: 1px solid #fff;
    color: #fff;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.7);
    animation: poyon 0.8s ease;
} 

.sec-adintro__filter.is-fixed::after {
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
}

/* ▼ぽよんアニメーション */
@keyframes poyon {
    0%   { transform: translateX(-50%) scale(0.8); } 
    30%  { transform: translateX(-50%) scale(0.9); }   
    60%  { transform: translateX(-50%) scale(0.82); } 
    100% { transform: translateX(-50%) scale(0.8); }   
}




/* ============== 媒体別：メインビジュアル ============== */
/* ここに電鉄名 */
.page__train-ad .sec-ad__img::after, 
.page__search .sec-ad__img::after {
    content: "ここに電鉄名";
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 3em;
    background-color: rgba(255, 78, 0, 0.8);
    color: #fff;
    font-weight: bold;
    font-size: min(calc(1rem + 1.2vw), 1.8rem);
    border-radius: 0 60px 0 0;
    z-index: 2;
    pointer-events: none;
}


/* ====================================================
    ▼ 駅別ページ
==================================================== */
/* ============== 駅別：メインビジュアル ============== */
/* 縦書き英単語用疑似要素_なし */
.sec-adintro.is-sta::before {
    content: none;
}

.sec-adintro__sta {
    position: relative;
    display: grid;
    align-items: center;
    background-color: #fff;
    margin: 5% 0 12%;
    border-radius: 40px 40px 0 40px;
    border-top: 4px solid #ED0303;
    padding: 5rem;
    grid-template-columns: 1fr minmax(40%, 320px);
    gap: 4rem;
}

.sec-adintro__sta-txt {
    padding: 1.4rem;
}

.sec-adintro__sta-label {
    display: inline-block;
    background-color: #FF4E00;
    color: #ffffff;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 0.8em 2.5em;
    border-radius: 999px;
    margin-bottom: 2rem;
}

.sec-adintro__sta-ttl {
    position: relative;
    font-weight: 900;
    font-size: min(calc(1.4rem + 3vw), 3.4rem);
    margin-bottom: 5rem;
    padding-left: 4rem;
}

.sec-adintro__sta-ttl::before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 0;
    left: 0;
    width: 1.2em;
    height: 1.2em;
    background-image: url(../img/train_icon.svg);
    background-size: contain;
    background-repeat: no-repeat;
}

.sec-adintro__sta-ttl--s {
    font-size: min(calc(1rem + 1.5vw), 2.4rem);
}

.sec-adintro__sta-txt p {
    font-size: min(calc(1.2rem + 0.8vw), 1.9rem);
    line-height: 1.8;
}

.sec-adintro__sta-img {
    aspect-ratio: 4/4;
}

.sec-adintro__sta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

@media(max-width:768px) {
    .sec-adintro__sta {
        display: block;
        padding: 2em calc(1rem + 6vw) 7rem;
    }
}

/* ============== 駅別：広告 ============== */
.sec-sta-ad__ttl {
    position: relative;
    width: 95%;
    margin: 0 auto 8rem;
    font-family: var(--ja);
    font-size: min(calc(1.8rem + 1.2vw), 6rem);
    font-weight: 600;
    padding-bottom: 0.4em;
}

.sec-sta-ad__ttl::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-image: repeating-linear-gradient(to right, var(--black), var(--black) 8px, transparent 8px, transparent 14px);
}

.sec-sta-ad__list {
    display: grid;
    /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    justify-content: start;
    gap: 6em 2em;
}

.sec-sta-ad__item {
    width: 100%;
    max-width: 378px;
    height: fit-content;
    background: linear-gradient(135deg, rgba(237, 3, 3, 1) 0%, rgba(255, 78, 0, 1) 50%, rgba(224, 146, 0, 1) 100%);
    transition: transform 0.3s ease;
}

/* ホバー */
.sec-sta-ad__item:hover {
    transform: scale(1.08);
}

.sec-sta-ad__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    margin-top: -1em;
    margin-left: 0.6em;
    margin-right: 0.6em;
}

.sec-sta-ad__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
}

.sec-sta-ad__item-ttl {
    font-size: min(calc(1.4rem + 1.4vw), 2.2rem);
    padding: 1.2em 0 1.2em 0.5em;
    color: var(--white);
}

.sec-sta-ad__info {
    position: relative;
    background-color: var(--white);
    border-radius: 30px;
    border-top: 2px solid var(--black);
    border-left: 2px solid var(--black);
    border-bottom: 6px solid var(--black);
    border-right: 6px solid var(--black);
    padding: 2.2em 2em 3em;
    margin-bottom: -2.4rem;
}

.sec-sta-ad__view::after {
    content: "";
    display: inline-block;
    width: 0.5em;
    height: 0.5em;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    transform: rotate(45deg);
}

.sec-sta-ad__info-item {
    border-bottom: 2px dotted var(--black);
    margin-bottom: 2rem;
    font-weight: 600;
}

.sec-sta-ad__info-item:nth-of-type(2) {
    margin-bottom: 0;
}

.sec-sta-ad__info-period,
.sec-sta-ad__info-price {
    display: inline-block;
    color: var(--red);
    font-size: 2.4rem;
    font-weight: 400;
    margin-left: 1rem;
}

.sec-sta-ad__info-price {
    display: inline-block;
    color: var(--blue);
    font-family: var(--en);
    font-size: 3rem;
    font-weight: 300;
    margin-left: 1rem;
}

@media (max-width: 746px) {
    .sec-sta-ad__list {
        justify-items: center;
    }


    .sec-sta-ad__item:hover {
        transform: none;
    }
}

/* ============== 駅別：各電鉄の主要駅 ============== */
.sec-mainsta {
    padding-top: 12em;
    margin-bottom: 6rem;
    background: linear-gradient(180deg, white 50%, var(--pink) 50%);
}

.sec-mainsta__wrapper {
    position: relative;
    width: 90%;
    height: auto;
    margin: 0 auto;
    padding: 5em;
    border-radius: 35px;
    border-top: 3px solid var(--red);
    background-color: #fff;
    text-align: center;
}

.sec-mainsta__wrapper::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, calc(-100% + 1px));
    width: max(10vw, 120px);
    aspect-ratio: 4 / 1;
    background-color: var(--red);
    clip-path: polygon(10% 0, 90% 0, 100% 100%, 0% 100%);
}

.sec-mainsta__ttl {
    border: solid 1px var(--red);
    border-radius: 120px;
    text-align: center;
    width: fit-content;
    margin: 0 auto 4rem;
    padding: 2rem 7rem;
    font-size: min(calc(1.4rem + 1.5vw), 2.4rem);
    font-weight: 400;
    line-height: 1.2;
}

.sec-mainsta__ttl-s {
    display: inline-block;
    font-size: min(calc(1rem + 1vw), 1.8rem);
    color: var(--red);
}

.sec-mainsta__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem; 
}

.sec-mainsta__li {
    display: grid;
    grid-auto-flow: column; /* 横に並べる */
    grid-auto-columns: 230px; /* 各アイテムの幅固定 */
    gap: 1.875rem 20px;
    width: max-content; 
}

.sec-mainsta__item_a {
    display: flex; 
    flex-direction: column;
    justify-content: center; 
    align-items: center;
    aspect-ratio: 230 / 130;
    border-top: 3px solid var(--red);
    border-radius: 20px;
    background-color: var(--pink);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sec-mainsta__item_a:hover {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.sec-mainsta__item_a p {
    font-size: min(calc(0.8rem + 1.2vw), 1.6rem);
}
.sec-mainsta__item_a h3 {
    font-size: min(calc(1rem + 1.5vw), 2.08rem);
}

/* ---  レスポンシブ  --- */

@media(max-width:600px) {
    .sec-mainsta__wrapper {
        padding: 5rem 3rem;
    }

    .sec-mainsta__li {
        grid-auto-columns: 160px; /* 各アイテムの幅固定 */
    }

    .sec-mainsta__item_a:hover {
        box-shadow: none;   
        transform: none;    
    }
} 

/* ====================================================
    ▼ 検索結果
==================================================== */
/* ============== 検索結果：メインビジュアル ============== */
/* 縦書き英単語用疑似要素_なし */
.sec-adintro.is-srch::before {
    content: none;
}

.sec-adintro.is-srch .sec-adintro__innner {
    width: 85%;
    max-width: 1200px;
}

.sec-srch__content {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-around;
    background-color: #fff;
    margin: 5% 0 12%;
    border-radius: 4rem 4rem 0 4rem;
    border-top: 4px solid #ED0303;
    padding: 4em 2em;
}

.sec-srch__content::before {
    content: "SEARCH";
    position: absolute;
    top: 7%;
    left: 5%;
    font-family: var(--en);
    font-size: min(calc(1.2rem + 1.5vw), 2.8rem);
    letter-spacing: 0.15em;
    font-weight: 300;
    color: #FFD1D1;
    z-index: 1;
}

.sec-srch-ttl {
    font-size: min(calc(1rem + 2.4vw), 3.4rem);
}

.sec-srch__keyword {
    color: var(--orange);
}

.sec-srch__label {
    font-size: min(calc(1rem + 1.5vw), 2.4rem);
}

@media (max-width:768px) {
    .sec-srch__content {
        padding: 3em 1em;
    }
}


/* ====================================================
    ▼ 媒体別
==================================================== */

/* ============== 媒体別：メインビジュアル ============== */
/* 縦書き英単語用疑似要素_なし */
.sec-adintro.is-media::before {
    content: none;
}

.sec-adintro.is-media .sec-adintro__innner {
    width: 85%;
    max-width: 1200px;
}

.sec-srch__content.is-media::before {
    content: "MEDIA";
}

/* ============== 媒体別：広告詳細 ============== */

.sec-media__container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    align-items: start;
    width: 85%;
    max-width: 1200px;
    margin: 0 auto 5em;
}

.sec-media__img-wrap  {
    position: sticky;
    top: 30px; /* ← 調整要 */
    align-self: start; 
}

/* スワイパー */
.swiper-ad {
    width: 100%;
    overflow: hidden;
    position: relative ;
}

.swiper-wrapper {
    display: flex;
    aspect-ratio: 4 / 3;
}

.swiper-slide {
    flex-shrink: 0;
    width: 100%;
    height: 100%;
}

.media-detail-img,
.media-detail-img--single {
    position: sticky;
    top: 0;
}

.swiper-slide img,
.media-detail-img--single img {
    width: 100%;
    height: 100%;
    min-width: 100%;
    max-width: none;      
    object-fit: cover;
    display: block;
    border-radius: 20px;
}

.swiper-pagination {
    position: static;
    display: flex ;
    justify-content: center;
    gap: 1em ;
    padding-top: 1.5em;
}

/* ページネーションの余白 */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 20px 20px ;
}

/* ページネーションのサイズと色 */
.swiper-pagination-bullet {
    background-color: #fff ;
    border-radius: 0 ;
    height: 15px ;
    width: 80px ;
    opacity: 1;
}

.swiper-pagination-bullet-active {
    background-color: var(--orange);
}
/* ↑↑スワイパー↑↑ */

/* ◯媒体名 広告詳細 テーブルの上 */
.sec-media__heading {
    position: relative;
    display: inline-block;
    font-size: 1.8rem;
    font-weight: 300;
    padding-left: 3em;
    margin-bottom: 2rem;
}

.sec-media__heading::before {
    position: absolute;
    content: "";
    top: 50%;
    left: 12%;
    transform: translate(-50%, -50%);
    padding: 0.8rem;
    border: 1px solid var(--orange);
    border-radius: 50%;
}

.sec-media__heading-s {
    font-size: 1.2rem;
    font-weight: 500;
    position: relative;
    display: block;
    white-space: normal;
    z-index: 2;
    color: var(--orange);
}

/* テーブル */
/* 媒体情報 */
/* .sec-media__table-wrap {
    max-height: 500px;   
    overflow-y: scroll;  
    padding:0 10px 0 0;  
} */

.sec-media__table {
    width: 100%;
    font-size: 1.6rem;
    font-weight: bold;
}

.sec-media__table tr {
    display: grid;
    grid-template-columns: 2fr 3fr;
    align-items: center;
    background-color: #fff;
    border-radius: 1em;
    padding: 1.5em 2em;
    margin-bottom: 0.8rem;
    font-weight: 400;
}

.sec-media__table th,
.sec-media__table td {
    text-align: left;
}

.sec-media__p {
    text-align: right;
    font-size: 1.3rem;
    color: #808080;
}

/* 配置図 */
.sec-media__map .sec-media__heading {
    position: relative;
    display: inline-block;
    transform: translate(10%, 0);
    padding:0 2em 1em 3em;
    margin-bottom: 3rem;
    background: var(--pink);
    clip-path: polygon(0 0, 100% 0, 90% 100%, 10% 100%);
    z-index: 1;
}

.sec-media__map {
    position: relative;
    width: 75%;
    margin: 0 auto 5em;
    padding-bottom: 3em;
    border-radius: 25px;
    background-color: #fff;
}

.sec-media__map-img {
    margin: 0 auto;
    width: 85%;
    max-width: 900px;
}

.sec-media__map-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}



/* 備考 */
.sec-media__remarks {
    width: 60%;
    max-width: 874px;
    margin: 0 auto;
}

.sec-media__remarks-list {
    display: block;
    width: 90%;
    margin: 0 auto;
    padding-top: 2em;
}


.sec-media__remarks-item {
    position: relative;
    margin-bottom: 2.8rem;
    padding-left: 2rem;
    line-height: 1.6;
    font-size: 1.4rem;
}

.sec-media__remarks-item:last-child {
    margin-bottom: 0;
}

.sec-media__remarks-item::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    width: 15px;
    height: 4px;
    background: #FFD6D6;
}

/* 備考下のデフォルト部分 */
.sec-media__remarks-note {
    width: 80%;
    max-width: 500px;
    margin: 8rem auto 4rem;
    padding: 1.6em;
    background-color: var(--white);
    border-radius: 1em;
    font-size: 1.2rem;
    color: #808080;
    line-height: 1.8;
}
.sec-media__remarks-note-text {
    position: relative;
    padding-left: 1em;
}

.sec-media__remarks-note-text::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(-50%, -50%);
    background-color: #e2574c; /* 赤色 */
    width: 8px;
    height: 8px;
    border-radius: 50%;
}


/* お問い合わせボタン */
.sec-media__contact {
    display: flex;
    justify-content: center;
    margin-bottom: 5em;
}

.sec-media__contact-btn {
    position: relative;
    display: block;
    border-radius: 100px;
    z-index: 1;
}

.sec-media__contact-btn::before{
    position: absolute;
    content: "";
    background: linear-gradient(107deg, #d82319, #ed6c1d);
    border-radius: 100px;
    z-index: -1;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    top: -10px;
    left: -10px;
}

.sec-media__contact-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5em 2em 0.5em 0.8em;
    color: #fff;
    font-size: min(calc(1.2rem + 1vw), 2.4rem);
    font-weight: 400;
    border-radius: 100px;
    position: relative;
    z-index: 2;
    background: linear-gradient(to right, #ed6c1d, #d82319);
}

.sec-media__contact-icon {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: #fff;
    border-radius: 1000px;
    width: 4em;
    height: 2em;
    padding: 0.5rem;
}

.sec-media__contact-icon img {
    width: 1.6em;
    height: auto;
    transition: transform 0.3s ease;
}

/* ボタンホバーでアイコンを右に移動 */
.sec-media__contact-btn:hover .sec-media__contact-icon img {
    transform: translateX(45px); 
}

/* ============== 媒体別：その他の広告メディア ============== */
.sec-other {
    width: 75%;
    margin: 0 auto 5em;
    position: relative;
    margin: 0 auto 5em;
    padding: 0 3em 3em 3em;
    border-radius: 70px;
    background-color: #fff;
}

.sec-other__ttl {
    position: relative;
    display: inline-block;
    font-size: 1.4rem;
    color: var(--white);
    margin-bottom: 3rem;
    padding: 1rem 2rem 1rem 8rem;
    z-index: 3;
}

.sec-other__ttl::before {
    position: absolute;
    content: "PICK UP";
    top: 33%;
    left: 5%;
    font-size: 1.4rem;
    font-family: var(--en);
    font-weight: 300;
}

.sec-other__ttl::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 6rem;
    background-color: var(--red);
    border-radius: 0 0 1em 1em;
    z-index: -1;
}

.sec-other__img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    padding: 0 0.4em;
    box-sizing: border-box;
    z-index: 1;
}

.sec-other__label {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 1em 3em;
    background-color: rgba(255, 78, 0, 0.8);
    color: #fff;
    font-weight: bold;
    font-size: 1.8rem;
    z-index: 2;
    pointer-events: none;
}


.sec-other__img::before {
    content: "";
    position: absolute;
    top: 10%;
    left: 0;
    width: 100%;
    height: 90%;
    background: linear-gradient(130deg, rgba(237, 3, 3, 1) 0%, rgba(255, 78, 0, 1) 50%, rgba(255, 214, 214, 1) 100%);
    z-index: -1;
    pointer-events: none;
}


.sec-other__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: relative;
    z-index: 1;
    transition: transform 0.4s ease;
}

.sec-other .sec-ad__caption-ttl {
    font-size: 1.8rem;
}

.sec-other__list {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 300px; /* カード幅調整 */
    gap: 3rem;
    overflow-x: auto;
    padding-bottom: 2rem;
}

.sec-ad__item {
    scroll-snap-align: start;
}

/* ホバー */
.sec-ad__item:hover .sec-other__img img{
    transform: scale(1.1); 
}

/* ---  レスポンシブ  --- */
@media (max-width: 1000px) {
    .sec-media__container {
        grid-template-columns: 1fr;
    }

    .sec-media__heading-s {
        white-space: normal;
    }

    .media-detail-img,
    .media-detail-img--single {
        position: static;  
        top: auto;   
    }

    .sec-media__map {
        width: 85%;
    }

    .sec-media__map .sec-media__heading::after {
        width: 100%;
    }

    .sec-media__remarks {
        width: 80%;
    }

    .sec-media__contact-btn:hover .sec-media__contact-icon img {
        transform: translateX(25px); 
    }

    .sec-other {
        width: 85%;
        padding: 0 1em 3em 1em;
    }

    .sec-other__ttl {
        font-size: 1.2rem;
        padding: 1rem 2rem 1rem 7rem;
    }

    .sec-other__ttl::before {
        font-size: 1.2rem;
        left: 7%;
    }


    .sec-other__img::after {
        font-size: 1.4rem;
        padding: 0.8em 2em;
    }

    .sec-other__list {
        grid-auto-columns: 220px; /* カード幅調整 */
        padding-bottom: 1rem;
    }
}

@media (max-width: 768px) {
    .sec-media__table td {
        font-size: 1.4rem;
    }

    .sec-media__table tr {
        grid-template-columns: 1fr;
        padding: 1.5em 1.5em;
    }

    .sec-media__table th {
        border-bottom: dotted #FF4E00;
        padding-bottom: 0.2em;
        margin-bottom: 1em;
    }

    .sec-media__table hr {
        display: none;
    }
}
/* ====================================================
    ▼ ニュース記事一覧
==================================================== */
.sec-arch {
    margin-top: 3em;
    margin-bottom: 5em;
}

.sec-arch__header.is-news {
    background-color: var(--blue);
    color: #ffffff;
    text-align: center;
}

.sec-arch__headtext {
    position: relative;
    width: 90%;
    margin: 0 auto;
    padding: 3em 0;
}

.sec-arch__headtext::before,
.sec-arch__headtext::after {
    content: "";
    position: absolute;
    top: 0;
    width: 10vw;
    height: 100%;
    background-color: #F8F2F2;
    clip-path: polygon(50% 0%, 100% 0%, 50% 100%, 0% 100%);
    z-index: 0;
}

.sec-arch__headtext::before {
    left: 0;
}

.sec-arch__headtext::after {
    right: 0;
}

.sec-arch__ttl {
    font-family: var(--en);
    font-weight: 300;
    font-size: min(calc(2rem + 4vw), 5.6rem);
    line-height: 1.0;
}

.sec-arch__subttl {
    font-size: min(calc(1rem + 1vw), 1.6rem);
    line-height: 1.0;
}

.sec-newsarch__list {
    width: 85%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 4em 0;
}

.sec-newsarch__item {
    margin-bottom: 4rem;
    box-shadow: 0 3px 7px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    transform: scale(1); 
}

/* ホバー */
.sec-newsarch__item:hover {
    transform: scale(1.03); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}



.sec-newsarch__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2rem;
    background-color: var(--white);
    border-radius: 10px;
    padding: 3rem 2rem;
}

.sec-newsarch__link::before {
    content: '';
    position: absolute;
    background-image: url(../img/small-arrow.svg);
    width: 33px;
    height: 33px;
    right: 2%;
    top: 50%;
    transform: translateY(-50%) scale(0.6);
}

.sec-newsarch__date {
    position: relative;
    font-family: var(--en);
    font-size: min(calc(1.2rem + 1.2vw), 1.8rem);
    color: var(--blue);
    padding-left: 2rem;
}

.sec-newsarch__date::before {
    position: absolute;
    content: '';
    width: 5px;
    height: 20px;
    background-color: var(--blue);
    left: 0;
}

.sec-newsarch__headline {
    position: relative;
    color: var(--black);
    font-size: min(calc(1rem + 1vw), 1.8rem);
    font-weight: 500;
    display: block;
    width: 70%;
}

/* ページネーション */
.sec-newsarch__pg {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 8px;
    list-style-type: none;
    padding: 0;
}

.sec-newsarch__pg a {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3em;
    height: 2em;
    border: 0.7px solid #707070;
    background-color: #ffffff;
    border-radius: 25px;
    color: var(--black);
    font-family: var(--en);
}

/* ホバー */
.sec-newsarch__pg a:hover {
    opacity: 0.7;
}


/* ---  レスポンシブ  --- */
@media (max-width:768px) {

    .sec-newsarch__link {
        gap: 1rem;
    }

    .sec-newsarch__link::before {
        transform: translateY(-50%) scale(0.5);
    }

    .sec-newsarch__date {
        padding-left: 1rem;
    }

    .sec-newsarch__headline {
        width: 60%;
    }
}

/* ====================================================
    ▼ ブログ記事一覧
==================================================== */

.sec-arch__header.is-blog {
    background: linear-gradient(0deg, rgba(255, 78, 0, 1) 0%, rgba(255, 78, 0, 1) 50%, rgba(237, 3, 3, 1) 100%);
    color: #ffffff;
    text-align: center;
}

.sec-blogarch__list {
    width: 80%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(250px, 1fr));
    gap: 4em;
    padding: 10% 0;
}

.sec-blogarch__link {
    display: block;
    position: relative;
    min-height: 300px;
    background: #fff;
    border-radius: 15px;
    padding: 1.6rem;
    text-align: center;
    border: 1px solid var(--black);
    box-shadow: 5px 5px 0 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease; 
    transform: scale(1); 
}

/* ホバー */
.sec-blogarch__link:hover {
    transform: scale(1.03); 
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); 
}

.sec-blogarch__link::before {
    content: "";
    position: absolute;
    right: 3rem;
    bottom: 1.2rem;
    width: 30%;
    height: 10px;
    border-bottom: 1px solid red;
    border-right: 2px solid red;
    transform: skew(60deg);
}

.sec-blog__tag {
    display: block;
    background: var(--red);
    color: #fff;
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    white-space: nowrap;
    padding: 0.5em 1.4em;
    text-align: center;
    border-radius: 10rem;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border: 1px solid var(--black);
    box-shadow: inset 0 5px 0 black;
    top: 5px;
}

.sec-blog__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: block;
}

.sec-blog__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.sec-blog__content {
    margin: 0.6em 0 1.2em;
    display: flex;
    justify-content: left;
    gap: 10px;
    align-items: flex-start;
    text-align: left;
}

.sec-blog__time {
    display: inline-block;
    font-size: min(calc(1.1rem + 1.3vw), 2.0rem);
    color: var(--black);
    writing-mode: vertical-lr;
    font-family: var(--en);
    font-weight: 200;
}

.sec-blog__text {
    font-size: min(calc(1rem + 1vw), 1.6rem);
    line-height: 1.8;
    color: var(--black);
}

/* ---  レスポンシブ  --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .sec-blogarch__list {
        grid-template-columns: repeat(2, minmax(250px, 1fr));
        gap: 4em;
    }
}

@media (max-width: 768px) {
    .sec-blogarch__list {
        grid-template-columns: repeat(1, minmax(250px, 700px));
        gap: 4em;
    }
}

/* ====================================================
    ▼ ニュース記事
==================================================== */
.sec-article {
    width: 85%;
    max-width: 1000px;
    margin: 3em auto 5em;
}

.sec-article__body {
    position: relative;
    background-color: var(--white);
    padding: 3em 3em 5em 3em;
    border-radius: 20px;
}

.sec-article__body.is-news {
    border-top: 4px solid var(--blue);
}


.sec-article__body::before {
    position: absolute;
    content: '';
    right: 4%;
    width: clamp(80px, 13vw, 130px);
    height: clamp(30px, 5vw, 50px);
    background-size: contain;
    background-repeat: no-repeat;
}

.sec-article__body.is-news::before {
    background-image: url(../img/news.svg);
}

.sec-article__time {
    font-family: var(--en);
    font-size: min(calc(1.2rem + 1vw), 2rem);
    font-weight: 300;
    line-height: 1.0;
}

.sec-article__body.is-news .sec-article__time {
    color: var(--blue);
}

.sec-article__ttl {
    position: relative;
    color: var(--black);
    font-size: min(calc(1.5rem + 1vw), 2.4rem);
    padding: 2em 0 0.8em;
    margin-bottom: 4rem;
}

.sec-article__ttl::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 2px;
    z-index: 2;
}

.sec-article__body.is-news .sec-article__ttl::before {
    background: var(--blue);
}


.sec-article__ttl::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #E5E5E5;
    z-index: 1;
}

.sec-article__img {
    width: 100%;
    max-width: 800px;
    margin: 0 auto 5rem;
}

.sec-article__img img {
    width: 100%;
    height: auto;
    object-fit: cover;
    display: block;
}

.sec-article__text p {
    font-size: min(calc(1.1rem + 1vw), 1.5rem);
    line-height: 1.8;
    margin-bottom: 2em;
}

.sec-article__pg {
    display: flex;
    justify-content: center;
    gap: 2rem;
    align-items: center;
    width: 90%;
    margin: 4em auto 0;
}

.sec-article__prev,
.sec-article__next {
    position: relative;
    color: var(--black);
    font-size: min(calc(0.8rem + 1vw), 1.6rem);
    font-weight: 500;
}

.sec-article__prev::after,
.sec-article__next::after {
    content: "";
    position: absolute;
    bottom: 0.9em;
    width: 6em;
    height: 10px;
    bottom: -8px;
    background-size: contain;
    background-repeat: no-repeat;
}

.sec-article__prev::after {
    transform: scaleX(-1);
    transform-origin: center;
    right: 0;
}

.sec-article__next::after {
    left: 0;
}

.sec-article__body.is-news .sec-article__prev::after,
.sec-article__body.is-news .sec-article__next::after {
    background-image: url(../img/blue-arrow.svg);
}

.sec-article__back {
    font-size: min(calc(0.9rem + 1vw), 1.6rem);
    color: var(--white);
    font-weight: 500;
    background: linear-gradient(0deg,rgba(255, 78, 0, 1) 0%, rgba(255, 78, 0, 1) 50%, rgba(237, 3, 3, 1) 100%);
    padding: 3% 5%;
    border-radius: 1000px;
    display: inline-block;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* ← 追加 */
}

/* ホバー */
.sec-article__back:hover {
    transform: scale(1.05); 
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15); 
}


.sec-article__back:link,
.sec-article__back:visited {
    color: var(--white);
}

@media (max-width:768px) {
    .sec-article {
        width: 90%;
    }

    .sec-article__body {
        padding: 3em 2em;
    }

    .sec-article__pg {
        width: 100%;
    }
}

@media (max-width:425px) {
    .sec-article__pg {
        gap: 1rem;
    }
    .sec-article__body {
        padding: 3em 1em;
    }
}

/* ====================================================
    ▼ ブログ記事
==================================================== */
.sec-article__body.is-blog {
border-top: 4px solid var(--red);
}

.sec-article__body.is-blog::before {
    background-image: url(../img/blog.svg);
}
.sec-article__tag {
    display: inline-block;
    background: var(--red);
    color: var(--white);
    font-size: clamp(1.4rem, 2vw, 1.8rem);
    padding: 0.5em 1.4em;
    margin-right: 1em;
    text-align: center;
    border-radius: 10rem;
    border: 1px solid var(--black);
    box-shadow: inset 0 5px 0 black;
}

.sec-article__body.is-blog .sec-article__time {
    color: var(--black);
}

.sec-article__body.is-blog .sec-article__ttl::before {
    background: var(--red);
}

.sec-article__body.is-blog .sec-article__prev::after,
.sec-article__body.is-blog .sec-article__next::after {
    background-image: url(../img/red-arrow.svg);
}


/* ====================================================
    ▼ ブログ記事内（管理画面で更新する部分）
==================================================== */
/* --- ブログ記事見出し  --- */
.sec-article__body.is-blog h2,
.sec-article__body.is-blog h3,
.sec-article__body.is-blog h4,
.sec-article__body.is-blog h5,
.sec-article__body.is-blog h6 {
    border-bottom: 1px dotted var(--red);
    padding-bottom: 0.3em;
    margin-top: 4em;
    margin-bottom: 1em;
    font-weight: bold;
}

.sec-article__body.is-blog .ad-table {
    width: 100%;
    border-collapse: collapse;
    margin: 4em 0;
    font-size: 1.4rem;
    text-align: center;
}

.sec-article__body.is-blog .ad-table th,
.sec-article__body.is-blog .ad-table td {
    border: 1px solid #ddd;
    padding: 1em;
}

.sec-article__body.is-blog .ad-table thead th {
    background-color: #000;
    color: #fff;
    font-weight: bold;
}

/* 表　横スクロール対応 */
@media (max-width: 768px) {
    .sec-article__body.is-blog .ad-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 1em;
    }

    /* スクロールバーを表示 */
    .sec-article__body.is-blog .ad-table {
        -webkit-overflow-scrolling: touch; 
        scrollbar-color: #999 #f5f5f5; 
    }

    .sec-article__body.is-blog .ad-table::-webkit-scrollbar {
        height: 8px; 
    }
    .sec-article__body.is-blog .ad-table::-webkit-scrollbar-thumb {
        background-color: #999;
        border-radius: 4px;
    }
    .sec-article__body.is-blog .ad-table::-webkit-scrollbar-track {
        background-color: #f5f5f5;
    }

    .sec-article__body.is-blog .ad-table th,
    .sec-article__body.is-blog .ad-table td {
        min-width: 120px; 
    }
}

/* ---　媒体詳細下線  --- */
.blog-line {
    color: var(--red) !important; 
    text-decoration: underline;
    text-decoration-color: var(--red); 
    text-underline-offset: 0.2em;
    font-weight: bold;
}

.blog-line:hover {
    opacity: 0.8; 
}

/* ---　媒体詳細ボタン  --- */
.blog-btn {
    display: block;                
    width: fit-content;           
    margin: 3em auto;             
    background: linear-gradient(to bottom, #00c6fb, #005bea);
    color: var(--white) !important;
    padding: 0.9em 1.6em;
    text-decoration: none;
    transition: opacity 0.2s ease;
    text-align: center;
}

.blog-btn:hover {
    opacity: 0.9;
}


/* ====================================================
    ▼ お問い合わせフォーム（Contact Form 7＋カスタム構造）
==================================================== */
.sec-contact__head {
    text-align: center;
}

.sec-contact__title {
    margin-bottom: 1.5em;
    font-size: 3.0rem;
}

.sec-contact__head {
    margin-bottom: 3.5em;
}

.csform {
    max-width: 1000px;
    width: 80%;
    margin: 0 auto;
    padding: 4em 4em;
    background-color: #fff;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.05);
}

/* ─ 表形式：ラベルと入力欄を2列に配置 ─ */
.common_formtable {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 4em 1em;
}

/* ─ ラベル欄 ─ */
.common_formtd01 {
    font-weight: 500;
    font-size: 1.4rem;
    color: #111;
    display: flex;
    align-items: center;
}

/* ─ 必須バッジ ─ */
.common_formtd01 .required-icon {
    background-color: var(--red);
    color: #fff;
    font-size: 1.1rem;
    padding: 0.3em 0.6em;
    margin-left: 0.8em;
    line-height: 1;
    display: inline-block;
}

/* ─ 入力欄 ─ */
    .common_formtd02 {
    display: flex;
    flex-direction: column;
}

/* ─ テキスト・メール・電話入力 ─ */
.common_formtd02 input[type="text"],
.common_formtd02 input[type="email"],
.common_formtd02 input[type="tel"] {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 1.4rem;
    box-sizing: border-box;
    margin-bottom: 0.5em;
}

/* 郵便番号の幅を調整 */
.common_formtd02 input.zip-3 {
    width: 5em;
}

.common_formtd02 input.zip-4 {
    width: 5em;
}

/* ─ テキストエリア ─ */
.common_formtd02 textarea {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    min-height: 150px;
    box-sizing: border-box;
    resize: vertical;
    margin-bottom: 0.5em;
}

/* ─ プレースホルダー説明テキスト ─ */
.csform-p {
    margin-bottom: 0.5em;
    font-size: 1.2rem;
    color: #888;
}

/* ─ チェックボックスやセレクトにも余白調整 ─ */
.common_formtd02 select,
.common_formtd02 .wpcf7-checkbox,
.common_formtd02 .wpcf7-radio {
    margin-bottom: 0.5em;
}

/* ─ 送信ボタン ─ */
.common_formb {
    text-align: center;
    margin-top: 2.5em;
}

.common_formb input[type="submit"] {
    background-color: var(--red, #e60033);
    color: #fff;
    padding: 0.75em 2.5em;
    font-size: 1.4rem;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.common_formb input[type="submit"]:hover {
    background-color: #c7002b;
}

.wpcf7-spinner {
    display: none !important;
}

/* ─ 同意文など ─ */
.form-privacy {
    font-size: 1.4rem;
    color: #333;
    margin-top: 1.5em;
    text-align: center;
}

/* ─ エラーメッセージや成功時メッセージ ─ */
.wpcf7-not-valid-tip {
    color: red;
    font-size: 0.85rem;
    margin-top: 0.2em;
}

.wpcf7-response-output {
    margin-top: 1em;
    font-size: 0.95rem;
    color: #111;
}

/* ─ プライバシーポリシーリンク ─ */
.privacy-link {
    text-align: center;
    margin-top: 1.5em;
}

.privacy-link a {
    display: inline-block;
    color: var(--red); 
    text-decoration: underline;
    font-weight: bold;
    font-size: 1.2rem;
    transition: opacity 0.3s ease;
}

.privacy-link a:hover {
    opacity: 0.7;
}


/* ---  レスポンシブ（550px以下で縦並び）  --- */

@media screen and (max-width: 767px) {
    .common_formtable {
        grid-template-columns: 1fr;
        gap: 1em 1em;
    }

    .common_formtd01 {
        margin-bottom: 0.3em;
    }

    .common_formtd02 {
        margin-bottom: 1.5em;
    }

}

/* ====================================================
    ▼ お問い合わせ（受付完了）
==================================================== */
/* 受付完了 見出し */
.sec-thanks {
    text-align: center;
    min-height: 55vh;
}

.thanks__title {
    text-align: center;
    font-size: 3.0rem;
    font-weight: bold;
    color: #100F10;
    margin-bottom: 1.5em;
}

/* 説明テキスト */
.thanks__text {
    text-align: center;
    line-height: 1.8;
    margin-bottom: 4em;
}

/* ====================================================
    ▼ 個人情報保護方針について
==================================================== */
/* 全体セクション */
.sec-privacy {
    padding: 4em 1em;
    background-color: var(--pink);
}

/* innerエリア */
.sec-privacy .inner {
    background-color: #fff;
    max-width: 1000px;
    width: 90%;
    margin: 0 auto;
    padding: 4em 3em;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.03);
}

.sec-privacy__title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 2em;
}

.sec-privacy h2 {
    position: relative;
    color: #100F10;
    font-size: 1.8rem;
    font-weight: 500;
    padding-bottom: 0.5em;
    margin-bottom: 0.8em;
}

/* 手前に赤い短めライン（左寄せ） */
.sec-privacy h2::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100px;
    height: 2px;
    background: var(--red); 
    z-index: 2;
}

/* 下に全幅の薄グレーライン */
.sec-privacy h2::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #e5e5e5;
    z-index: 1;
}

.sec-privacy p {
    color: #888;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.8;
    margin-bottom: 4em;
}


/* リスト（ul, li） */
.sec-privacy ul {
    margin-left: 1.5em;
    margin-bottom: 1.5em;
}

.sec-privacy li {
    color: #888;
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.6;
    margin-bottom: 0.5em;
}

/* リンク */
.sec-privacy a {
    text-decoration: underline;
}

.sec-privacy a:hover {
    opacity: 0.75;
}