@charset "UTF-8";

/* ========================
common
======================= */

:root {
    --black: #000;
    --white: #fff;
    --darkBlue: #1432aa;
    --lightBlue: #e7f8ff;
    --ctaRed: #e13000;
    --ctaRed-hover: #ff6c45;
    --regular: "UD新ゴ R", Arial, Helvetica, sans-serif;
    --medium: "UD新ゴ M", Arial, Helvetica, sans-serif;
    --bold: "UD新ゴ B", Arial, Helvetica, sans-serif;
}

html {
    font-size: 62.5% !important;
}

body {
    font-family: "UD新ゴ R", "UD新ゴ M", "UD新ゴ B", Arial, Helvetica, sans-serif;
    font-style: normal;
    color: #000000;
    background-color: #fff;
    line-height: 1.5;
}

img {
    max-width: 100%;
    height: auto;
}

h1 {
    color: var(--darkBlue);
    font-family: var(--bold);
    font-weight: bold;
    font-size: 4.2rem;
    text-align: center;
}

h2 {
    font-family: var(--bold);
    font-weight: bold;
    font-size: 2.8rem;
    text-align: center;
}

h3.section_title {
    font-family: var(--bold);
    font-weight: bold;
    font-size: 3.6rem;
    position: relative;
    text-align: center;
}

h3.section_title::after {
    content: '';
    position: absolute;
    bottom: -20px;
    display: inline-block;
    width: 48px;
    height: 6px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    background-color: var(--darkBlue);
    border-radius: 3px;
}

p {
    font-family: var(--regular);
    font-size: 1.6rem;
    text-align: center;
}

p.section_description {
    margin-top: 60px;
}

.spbr {
    display: none;
}

.bg_white {
    width: 100%;
    height: auto;
    padding: 100px 13.9%;
}

.bg_white_container {
    max-width: 1080px;
    margin: 0 auto;
}

.bg_lightBlue {
    width: 100%;
    height: auto;
    padding: 100px 13.9%;
    background-color: var(--lightBlue);
}

.bg_lightBlue_container {
    max-width: 1080px;
    margin: 0 auto;
}

.btn_white {
    display: block;
    color: var(--darkBlue);
    font-family: var(--bold);
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    width: 240px;
    background-color: var(--white);
    padding-top: 15px;
    padding-bottom: 15px;
    border-radius: 32px;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
    box-shadow: inset 0 0 0 2px var(--darkBlue);
}

.btn_white:hover {
    background-color: var(--darkBlue);
    color: var(--white);
    box-shadow: inset 0 0 0 0px var(--darkBlue);
}


/* common SP--------------------------------- */
@media screen and (max-width: 768px) {

    h1 {
        font-size: 3.2rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3.section_title {
        font-size: 2.0rem;
    }

    h3.section_title::after {
        bottom: -8px;
        width: 24px;
        height: 4px;
        border-radius: 2px;
    }

    p {
        font-size: 1.4rem;
        text-align: left;
    }

    p.section_description {
        margin-top: 24px;
    }

    .spbr {
        display: block;
    }

    .pcbr {
        display: none;
    }

    .bg_white {
        padding: 64px 4.3%;
    }

    .bg_white_container {
        max-width: 1080px;
        margin: 0 auto;
    }

    .bg_lightBlue {
        padding: 48px 4.3%;
    }

    .bg_lightBlue_container {
        max-width: 1080px;
        margin: 0 auto;
    }

    .btn_white {
        font-size: 1.6rem;
        width: 200px;
        padding-top: 12px;
        padding-bottom: 12px;
    }
}

/* ---------------------------------common SP */

/* ========================
header
======================= */

.header {
    background-image: url(../img/Common/header_background.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 116px;
    box-shadow: 0 1px 3px rgba(142, 147, 164, 0.26);
    z-index: 100;
    position: sticky;
    top: -48px;
}

.header_backgroundImage {
    width: 100%;
    height: 48px;
}

.header_nav {
    width: 100%;
    height: 68px;
    background-color: var(--white);
    border-radius: 48px 48px 0 0;
    padding: 16px 4.4%;
    transition: border-radius 0.2s ease;
}


/* 上部に来たら角丸0 */
.header_nav.is-sticky {
    border-radius: 0;
}

.nav_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.hamburger {
    display: none;
}

.header_logo img {
    width: auto;
    height: 26px;
}

.header_menu{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.header_navlist {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
}

.header_navitem {
    color: var(--darkBlue);
    font-family: var(--medium);
    font-size: 1.6rem;
}

.header_navitem:hover {
    color: #8ba2ff;
}

.header_navitem:last-child a span{
    display: flex;
    align-items: flex-start;
}

.registeredTrademark {
    font-size: 1.2rem;
}

.contact_button {
    display: block;
    width: 160px;
    height: 36px;
    color: var(--white);
    text-align: center;
    font-family: var(--bold);
    font-weight: bold;
    font-size: 1.6rem;
    line-height: 1;
    background-color: var(--ctaRed);
    padding: 10px 32px;
    border-radius: 24px;
}

.contact_button:hover {
    background-color: var(--white);
    color: var(--ctaRed);
    box-shadow: inset 0 0 0 4px var(--ctaRed);
}

.contact_button-SP {
    display: none;
}

@media screen and (min-width: 769px) and (max-width: 1100px) {
    .header {
        background-image: url(../img/Common/header_background.jpg);
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        height: 108px;
        box-shadow: 0 1px 3px rgba(142, 147, 164, 0.26);
        z-index: 100;
        position: sticky;
        top: -48px;
    }
    
    .header_backgroundImage {
        width: 100%;
        height: 48px;
    }
    
    .header_nav {
        width: 100%;
        height: 60px;
        background-color: var(--white);
        border-radius: 36px 36px 0 0;
        padding: 16px 4.4%;
        transition: border-radius 0.2s ease;
    }
    
    
    /* 上部に来たら角丸0 */
    .header_nav.is-sticky {
        border-radius: 0;
    }
    
    .nav_container {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    
    .header_logo img {
        width: auto;
        height: 20px;
    }
    
    .header_menu{
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }
    
    .header_navlist {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    
    .header_navitem {
        color: var(--darkBlue);
        font-family: var(--medium);
        font-size: 1.1rem;
    
    }

    .registeredTrademark {
        font-size: 1rem;
    }
    
    .contact_button {
        display: block;
        width: auto;
        height: 28px;
        color: var(--white);
        text-align: center;
        font-family: var(--bold);
        font-weight: bold;
        font-size: 1.2rem;
        line-height: 1;
        background-color: var(--ctaRed);
        padding: 8px 24px;
        border-radius: 24px;
        flex-shrink: 0;
    }
    
    .contact_button:hover {
        background-color: var(--white);
        color: var(--ctaRed);
        box-shadow: inset 0 0 0 4px var(--ctaRed);
    }
    
    .contact_button-SP {
        display: none;
    }
}

/* headerSP--------------------------------- */
@media screen and (max-width: 768px) {
    .header {
        width: 100%;
        /* 背景24px + ナビ72px (40+16+16) = 96px */
        height: 92px; 
        position: sticky;
        top: -24px; /* 背景画像の高さ分だけマイナス */
    }

    .header_backgroundImage {
        width: 100%;
        height: 24px;
    }

    .header_nav {
        /* アイコン40px + 上下パディング16px×2 = 72px */
        height: 68px;
        padding: 16px 4.4%;
        border-radius: 24px 24px 0 0;
    }

    /* ロゴの高さを40pxに固定 */
    .header_logo img {
        height: 22px !important;
        width: auto;
    }

        /* ハンバーガーアイコン本体 (36px × 36px) */
    .hamburger {
        display: block;
        position: relative;
        z-index: 300;
        width: 36px; 
        height: 36px;
        background-color: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
    }

    /* 三本線の設定 (長さ30px, 厚さ2px) */
    .hamburger span {
        position: absolute;
        /* 左右中央寄せ: (36px - 30px) / 2 = 3px */
        left: 3px;
        width: 30px;
        height: 2px;
        background-color: var(--darkBlue);
        transition: all 0.3s ease;
        border-radius: 2px;
    }

    /* 線の垂直配置の計算
    1本目: 上から 8px
    2本目: 17px (中央)
    3本目: 下から 8px (36 - 8 - 2 = 26px)
    */
    .hamburger span:nth-child(1) { top: 8px; }
    .hamburger span:nth-child(2) { top: 17px; }
    .hamburger span:nth-child(3) { top: 26px; }

    /* メニューが開いた時の「X」印アニメーション */
    .hamburger.is-active span:nth-child(1) {
        /* 中央(17px)へ移動: 17 - 8 = 9px */
        transform: translateY(9px) rotate(45deg);
    }
    .hamburger.is-active span:nth-child(2) {
        opacity: 0;
    }
    .hamburger.is-active span:nth-child(3) {
        /* 中央(17px)へ移動: 26 - 17 = 9px */
        transform: translateY(-9px) rotate(-45deg);
    }


    /* メニュー本体（ノレン形式） */
    .header_menu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #f1fbff; /* 指定: 薄い青 */
        z-index: 250;
        box-shadow: 0 10px 10px rgba(0,0,0,0.05);
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease-in-out;
        /* お問い合わせボタンを確実に消す */
        display: flex;
        flex-direction: column;
    }

    .header_menu.is-active {
        max-height: 500px;
        /* 内部の余白は0にして境界線を端まで飛ばす */
        padding: 0; 
    }

    /* お問い合わせボタン（メニュー内では非表示） */
    .header_menu .contact_button {
        display: none !important;
    }

    /* --- リスト全体のスタイル --- */
    .header_navlist {
        flex-direction: column;
        gap: 0; /* 境界線を入れるので隙間は0 */
        width: 100%;
    }

    /* --- 各リスト項目（縦並び・境界線） --- */
    .header_navitem {
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* 境界線（薄い黒） */
        font-size: 1.4rem;
        font-family: var(--regular);
        font-weight: 400;

    }

    /* 最初の項目の上にも境界線を入れる場合 */
    .header_navitem:first-child {
        border-top: 1px solid rgba(0, 0, 0, 0.08);
    }

    /* --- リンクエリア（左に文字、右に矢印） --- */
    .header_navitem a {
        display: flex;
        justify-content: space-between; /* 左右に振り分け */
        align-items: center;
        padding: 10px 6.4%; /* 左右余白をロゴ等に合わせる */
        color: var(--darkBlue);
        text-decoration: none;
        width: 100%;
        transition: background-color 0.2s;
    }

    /* タップ時の反応（お好みで） */
    .header_navitem a:active {
        background-color: rgba(0, 0, 0, 0.03);
    }

    /* --- 右側の「くの字」矢印 --- */
    .header_navitem a::after {
        content: '';
        width: 10px;
        height: 10px;
        border-top: 2px solid var(--darkBlue);
        border-right: 2px solid var(--darkBlue);
        transform: rotate(45deg); /* 45度傾けて「>」にする */
        display: block;
    }

    .contact_button {
        display: none;
    }

    .contact_button-SP {
        display: block;
        position: fixed;
        bottom: 16px;
        right: 4.3%;
        z-index: 200;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
}

/* ---------------------------------headerSP */


/* ========================
アーティクルヘッダー
article_header
======================= */

.article_header {
    width: 100%;
    height: auto;
    padding: 70px 13.9% 120px;
}

.article_header_container {
    max-width: 1080px;
    margin: 0 auto;
}

.subcopy {
    font-family: var(--medium);
    font-weight: medium;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
}

.main_title {
    margin-top: 8px;
}

.keyvisual_container {
    width: 100%;
    height: auto;
    margin-top: 32px;
}

.keyvisual {
    border-radius: 48px;
}

.main_description {
    margin-top: 32px;
}

.head_description {
    margin-top: 16px;
}

/* article_header SP--------------------------------- */
@media screen and (max-width: 768px) {

    .article_header {
        padding: 36px 4.3%;
    }

    .subcopy {
        font-size: 1.4rem;
        line-height: 1.5;
    }

    .main_title {
        margin-top: 12px;
    }

    .keyvisual_container {
        margin-top: 32px;
    }

    .keyvisual {
        border-radius: 24px;
    }

    .main_description {
        margin-top: 16px;
    }

}

/* ---------------------------------article_header SP */


/* ========================
ハイライトパネル
highlightPanel
======================= */

.highlightPanel_container {
    display: grid;
    /* 列 = 1 */
    grid-template-columns: 1fr;
    /* 行 = 3 */
    grid-template-rows: auto auto 1fr;
}

.panelTitle_container {
    /* 1列目に配置 */
    grid-column: 1;
    /* 1行目〜2行目を占有 */
    grid-row: 1 / 3;

    z-index: 2;
    /* 中央寄せ */
    justify-self: center;

    background-color: var(--darkBlue);
    color: var(--white);
    padding: 8px 40px;
    border-radius: 100px;
    text-align: center;
    width: fit-content;
}

.panelTitle {
    font-family: var(--bold);
    font-weight: bold;
    font-size: 2.8rem;
    color: var(--white);
}

.panelContent_container {
    /* 同じく1列目に配置。これで青と重なる */
    grid-column: 1;
    /* 2行目〜3行目を占有（タイトルの下半分から開始） */
    grid-row: 2 / 4;

    z-index: 1;
    background-color: var(--white);
    border-radius: 48px;
    padding: 72px 4.2% 48px;
}

.content_list {
    display: grid;
    list-style: none;
    margin: 0;
}

.content_list li {
    text-align: center;
}

/* 2列指定 */
.content_list.col-2 {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 10%;
    gap: 48px 80px;
}

.content_list.col-2 li img {
    width: 80%;
}


/* 3列指定 */
.content_list.col-3 {
    grid-template-columns: repeat(3, 1fr);
    padding: 0;
    gap: 40px;
}


.panelItem_description {
    font-family: var(--medium);
    font-weight: medium;
}

/* highlightPanel SP--------------------------------- */
@media screen and (max-width: 768px) {

    .panelTitle_container {
        padding: 8px 24px;
    }

    .panelTitle {
        font-size: 2.0rem;
    }

    .panelContent_container {
        border-radius: 24px;
        padding: 64px 14% 48px;
    }

    .content_list {
        display: grid;
        list-style: none;
        margin: 0;
    }

    /* 2列指定→1列 */
    .content_list.col-2 {
        grid-template-columns: repeat(1, 1fr);
        padding: 0;
        gap: 32px;
    }

    .content_list.col-2 li img {
        width: 100%;
    }


    /* 3列指定→1列 */
    .content_list.col-3 {
        grid-template-columns: repeat(1, 1fr);
        padding: 0;
        gap: 32px;
    }

    .panelItem_description {
        text-align: center;
    }
}

/* ---------------------------------highlightPanel SP */

/* ========================
3カラム
column-3
======================= */
.column-3_list {
    display: grid;
    /* 3カラム設定 */
    grid-template-columns: repeat(3, 1fr);
    /* 縦60px、横32pxの隙間（XDに合わせて微調整してください） */
    gap: 60px 48px;
    list-style: none;
    padding: 0;
    margin-top: 48px;
}

.column-3_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.column-3_item img {
    width: 90%;
    height: auto;
    object-fit: cover;
}

.column-3_description {
    font-family: var(--medium);
    font-weight: medium;
}

/* --- 3カラム版：最後が1個余った時の中央寄せ (4個目、7個目など) --- */
@media (min-width: 769px) {

    /* 3で割って1余る(3n+1)かつ、それが最後(last-child)の場合 */
    .column-3_item:last-child:nth-child(3n + 1) {
        grid-column: 1 / 4;
        /* 3列分をぶち抜く */
        justify-self: center;
        /* その中央に配置 */
        width: calc(33.333% - 22px);
        /* 1枚だけ巨大化しないよう、3列時の幅に合わせる */
    }
}

/* --- スマホ版：1列 --- */
@media (max-width: 768px) {
    .column-3_list {
        grid-template-columns: 1fr;
        gap: 40px 0;
        margin-top: 32px;
    }

    .column-3_item img {
        width: 80%;
    }

    .column-3_description {
        text-align: center;
    }
}

/* =========================================
3カラム（番号+背景水色）
column-3_type-numbered
========================================= */
/* --- 1. カウンターの初期化 --- */
/* 親要素（ul）でカウンターをリセット（0に戻す）します */
.column-3_type-numbered {
    counter-reset: number-badge-counter;
    gap: 60px 48px;
}


/* --- 2. リストアイテム（li）自体のスタイル --- */
.column-3_type-numbered .column-3_item {
    /* 擬似要素を絶対配置するための基準点にする */
    position: relative;

    /* 背景色と見た目の調整 */
    background-color: var(--lightBlue);
    border-radius: 0 24px 24px 24px;
    padding: 40px 5% 24px;

    /* カウンターを1つずつ進める */
    counter-increment: number-badge-counter;

}

.column-3_img_wrapper {
    width: 100%;
    /* 親(li)の横幅いっぱいに広げる */
    margin: 0;
    /* ブラウザ標準の余計な余白（上下左右）をリセット */
    display: flex;
    /* Flexboxにして中身を制御 */
    justify-content: center;
    /* 横方向の中央揃え */
    align-items: center;
    /* 縦方向の中央揃え */
    overflow: hidden;
    /* はみ出し防止（角丸を効かせるため） */
}

/* 画像自体の設定 */
.column-3_img_wrapper img {
    /* 画像を親の幅に合わせる場合（はみ出さないように） */
    max-width: 100%;
    height: auto;
    display: block;
    /* 画像下の謎の隙間を消す */
}


/* --- 3. 擬似要素（::before）で番号バッジを作る --- */
.column-3_type-numbered .column-3_item::before {
    /* カウンターの数字を表示させる */
    content: counter(number-badge-counter);

    /* 位置の指定（左上） */
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 1;

    /* バッジの見た目 */
    width: 52px;
    height: 52px;
    background-color: var(--darkBlue);
    color: #fff;
    /* 数字の色（var(--white)があればそちらで） */
    border-radius: 0 0 24px 0;

    /* 数字をバッジの中央に配置 */
    display: flex;
    justify-content: center;
    align-items: center;

    /* フォント調整 */
    font-weight: bold;
    font-family: var(--bold);
    /* 指定のフォントがあれば */
    font-size: 2.4rem;
    line-height: 1;
    /* 数字の上下位置ズレを防ぐ */
}

/* --- スマホ版：1列 --- */
@media (max-width: 768px) {

    .column-3_type-numbered {
        counter-reset: number-badge-counter;
        gap: 32px 0;
        margin: 32px 9.3% 0;
    }

    .column-3_type-numbered .column-3_item {
        border-radius: 0 16px 16px 16px;
        padding: 16px 5% 24px;
    }

    .column-3_type-numbered .column-3_item::before {

        /* バッジの見た目 */
        width: 40px;
        height: 40px;
        border-radius: 0 0 16px 0;

        /* フォント調整 */
        font-size: 1.6rem;
    }

}


/* ========================
2カラム
column-2
======================= */

/* リスト全体のレイアウト */
.column-2_list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* 2カラム */
    gap: 32px 120px;
    /* [縦] [横] の順で指定（横はXDに合わせて調整してください） */
    list-style: none;
    padding: 0 6%;
    margin-top: 48px;
}

/* 各アイテムの基本スタイル */
.column-2_item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* 画像とテキストを中央に */
}

.column-2_item img {
    width: 70%;
    height: auto;
    object-fit: cover;
}

.column-2_description {
    font-family: var(--medium);
    font-weight: medium;
}

/* --- 奇数だった場合の最後を中央に寄せる --- */
@media (min-width: 769px) {
    .column-2_item:last-child:nth-child(odd) {
        grid-column: 1 / 3;
        /* 1〜3列目（＝2列分）のエリアをぶち抜いて確保 */
        justify-self: center;
        /* 確保した広いエリアのど真ん中に自分を配置 */

        /* 1枚だけ巨大化するのを防ぐため、他のカードと同じ幅に制限する */
        width: calc(50% - 60px);
        /* 「50% - gapの半分」くらいにするとサイズが揃います */
    }
}

/* スマホ版（1カラム） */
@media (max-width: 768px) {
    .column-2_list {
        grid-template-columns: 1fr;
        /* スマホは1列 */
        gap: 40px 0;
        margin-top: 32px;
    }

    .column-2_description {
        text-align: center;
    }

    .column-2_item img {
        width: 80%;
    }

    .column-2_item:last-child:nth-child(odd) {
        width: 100%;
        /* スマホでは全幅でOK */
    }
}

/* ========================
カルーセル
carousel
======================= */
.carousel {
    position: relative;
    overflow: hidden;
    /* 見切れが画面外にはみ出さないように */
}

.carousel_contents {
    width: 86%;
    margin: 48px auto 0;
}

.carousel_contents .slick-track {
    display: flex !important;
}

.carousel_items {
    padding: 8px 24px;
    background: transparent;
    height: auto !important;
    display: flex !important;
    flex-direction: column;
}

.card_wrapper {
    border-radius: 32px;
    overflow: hidden;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
    background: #fff;
    display: flex;
    flex-direction: column;
    height: 100%;
    /* これでliと同じ高さまで伸びる */
    width: 100%;
}

.carousel_items img {
    width: 100%;
    aspect-ratio: 640/282;
    object-fit: cover;
}

.carousel_items:not(.slick-center) {
    opacity: 0.3;
    transition: opacity 0.3s ease;
}

.slick-center.carousel_items {
    opacity: 1;
}

.slick-center.carousel_items:hover {
    opacity: 0.9;
}

.card_body {
    padding-top: 20px;
    padding-bottom: 32px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

.card_title {
    font-family: var(--bold);
    font-weight: bold;
    font-size: 2.4rem;
    color: var(--darkBlue);
    text-align: center;
}

.card_text {
    font-family: var(--regular);
    font-size: 1.6rem;
    max-width: 90%;
    margin: 16px auto 0;
    text-align: left;
    flex-grow: 1;
}

.slick-arrow {
    position: absolute;
    cursor: pointer;
    z-index: 10;
    width: 40px;
    height: 40px;
}

.slick-dotted.slick-slider {
    margin-bottom: 0;
}

/* --- PC: 矢印をカードの中央に配置 --- */
.slick-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 10;
}

.prev-arrow {
    left: -8.1%;
}

.next-arrow {
    right: -8.1%;
}

/* --- ドット（ul）全体のスタイル --- */
.slick-dots {
    bottom: -24px;
    /* カルーセル本体との距離（必要に応じて調整） */
    display: flex !important;
    justify-content: center;
    align-items: center;
    list-style: none;
    padding: 0;
}

/* --- 各ドット（li）の間隔設定 --- */
.slick-dots li {
    position: relative;
    display: inline-block;
    /* ドット同士の間隔を12pxにするため、左右に6pxずつ設定 */
    margin: 0 6px;
    padding: 0;
    width: 12px;
    height: 12px;
}

/* --- ドットの中身（button）のスタイルリセットと整形 --- */
.slick-dots li button {
    cursor: pointer;
    color: transparent;
    border: 0;
    outline: none;
    background: #CFCFCF;
    /* 非アクティブ時の色 */
    width: 12px;
    /* 縦幅12px */
    height: 12px;
    /* 横幅12px */
    border-radius: 50%;
    /* 正円にする */
    padding: 0;
    display: block;
}

/* デフォルトの「・」を消去する */
.slick-dots li button:before {
    display: none;
}

/* --- アクティブなドットのスタイル --- */
.slick-dots li.slick-active button {
    background-color: var(--darkBlue);
    /* アクティブ時の色 */
}

/* carousel SP---------------------------------*/
@media (max-width: 768px) {

    .carousel_contents {
        width: 100%;
        margin: 40px auto 0;
        padding-bottom: 32px;
    }

    .carousel_items {
        padding: 8px;
    }

    .card_wrapper {
        border-radius: 16px;
    }

    .card_body {
        padding: 16px 6.2%;
    }

    .card_title {
        font-size: 1.6rem;
    }

    .card_text {
        font-size: 1.2rem;
    }

    .slick-arrow {
        width: 24px;
        height: 24px;
    }

    /* --- 各ドット（li）の間隔設定 --- */
    .slick-dots li {
        margin: 0 4px;
        width: 8px;
        height: 8px;
    }

    /* --- ドットの中身（button）のスタイルリセットと整形 --- */
    .slick-dots li button {
        width: 8px;
        height: 8px;
    }

    /* ドットの位置調整 */
    .slick-dots {
        bottom: 8px;
        display: flex !important;
        justify-content: center;
        align-items: center;
        list-style: none;
    }

    /* 矢印をドットと同じ高さまで下ろす */
    .slick-arrow {
        top: auto;
        bottom: 0;
        /* ドットの高さに合わせる */
        transform: none;
    }

    /* ドットを挟むように配置 */
    .prev-arrow {
        left: 50%;
        margin-left: -64px;
        /* ドットの幅に合わせて調整 */
    }

    .next-arrow {
        left: 50%;
        margin-left: 40px;
        /* ドットの幅に合わせて調整 */
    }
}

/* ---------------------------------carousel SP */

/* ========================
CTA
======================= */

.cta_title {
    font-family: var(--bold);
    font-weight: bold;
    font-size: 3.2rem;
    text-align: center;
}

.cta_text {
    margin-top: 16px;
}

.cta_btn {
    display: flex;
    gap: 64px;
    align-items: center;
    justify-content: center;
    margin-top: 32px;
}

.cta_btn a {
    display: block;
    color: var(--white);
    font-family: var(--bold);
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 1;
    text-align: center;
    width: 280px;
    padding-top: 16px;
    padding-bottom: 16px;
    border-radius: 32px;
    transition: box-shadow 0.3s ease, background-color 0.3s ease;
    box-sizing: border-box;
}

.cta_bizsite {
    background-color: var(--darkBlue);
}

.cta_bizsite:hover {
    background-color: var(--white);
    color: var(--darkBlue);
    box-shadow: inset 0 0 0 4px var(--darkBlue);
}

.cta_contact {
    background-color: var(--ctaRed);
}

.cta_contact:hover {
    background-color: var(--white);
    color: var(--ctaRed);
    box-shadow: inset 0 0 0 4px var(--ctaRed);
}

/* CTA SP---------------------------------*/
@media (max-width: 768px) {

    .cta_title {
        font-size: 2.0rem;
    }

    .cta_text {
        margin-top: 24px;
        text-align: center;
    }

    .cta_btn {
        display: flex;
        gap: 24px;
        flex-direction: column;
        margin-top: 24px;
    }

    .cta_btn a {
        font-size: 1.6rem;
        width: 240px;
        padding-top: 12px;
        padding-bottom: 12px;
    }

    .cta_bizsite {
        background-color: var(--darkBlue);
    }

    .cta_contact {
        background-color: var(--ctaRed);
    }
}

/* ---------------------------------CTA SP */

/* ========================
ホームに戻るボタン
article_footer
======================= */
.home_btn {
    margin: 0 auto;
}

/* ========================
フッター
footer
======================= */
.footer {
    background-color: var(--white);
    width: 100%;
    padding: 20px;
}

.footer_container {
    display: grid;
    /* 左(1fr) : 中央(コンテンツ幅) : 右(1fr) の3カラムに分割 */
    grid-template-columns: 270px 1fr 270px;
    align-items: center;
    /* 上下中央揃え */
    width: 100%;
    margin: 0 auto;
}

.footer_dnp {
    display: flex;
    flex-direction: column;
    gap: 8px;
    text-align: center;
}

.copyright {
    font-size: 1.2rem;
    font-family: var(--regular);
    color: var(--darkBlue);
    margin: 0;
}

.copyright_trademark {
    font-size: 1.4rem;
}

.copyright_company {
    font-size: 1.2rem;
}

.footer_logo {
    justify-self: end;
    /* ロゴだけを右端に寄せる */
}

.footer_logo img {
    height: 25px;
    width: auto;
    display: block;
}

/* footerSP--------------------------------- */
@media screen and (max-width: 768px) {
    .footer {
        padding-bottom: 75px;
    }

    .footer_container {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .footer_spacer {
        display: none;
        /* スマホでは不要 */
    }

    .footer_logo {
        order: -2;
        /* ロゴを一番上に */
        justify-self: center;
    }

    .copyright {
        text-align: center;
    }
}

/* ---------------------------------footerSP */

/* ========================
TOPボタン
======================= */

.page_top {
    position: fixed;
    z-index: 100;
    /* 他の要素より上に配置 */
    /* 最初は非表示（スクロールしたら出す場合はJSで制御） */
    display: none;
}

.page_top a img {
    width: 100%;
    height: auto;
    vertical-align: bottom;
    filter: drop-shadow(0 0 10px rgba(169, 181, 185, 0.47));
}

/* PCの設定 */
@media (min-width: 769px) {
    .page_top {
        right: 4.4%;
        bottom: 10%;
    }

    .page_top a {
        display: block;
        width: 48px;
        height: 48px;
        transition: opacity 0.3s;
    }
}

/* スマホの設定 */
@media (max-width: 768px) {
    .page_top {
        right: 2.1%;
        bottom: 10%;
    }

    .page_top a {
        display: block;
        width: 36px;
        height: 36px;
    }
}

.page_top a:hover {
    opacity: 0.7;
}