@charset "utf-8";
/* CSS Document */

/* 目次エリア
-------------------------------------------------------*/

.section-title .feature {
    font-size: 10rem;
    font-family: anzeigen-grotesk, sans-serif;
    font-weight: 400;
    font-style: normal;
    color: #003090;
    line-height: 1;
    margin-right: 1rem;
}
@media screen and (max-width: 767px) {
    .section-title .feature {
        font-size: 6rem;
        display: block;
    }
}
.section-title .feature::before {
    content: url("../images/features/feature.svg");
    display: inline-block;
    width: 122px;
    height: 126px;
    
}
@media screen and (max-width: 767px) {
    .section-title .feature::before {
        width: 60px;
        height: auto;
    }
}
.anker-area {
    
}
.anker-block {
    color: #333;
    display: flex;
    align-items: flex-start;
    gap: 40px;
    padding: 0 0 0 15%;
}
@media screen and (max-width: 767px) {
    .anker-block {
        display: block;
        padding: 0;
    }
}

/* 左側のテキストエリア */
.description {
    flex: 1;
    font-size: 1.5rem;
    font-weight: bold;
    line-height: 1.8;
    max-width: 400px;
}
@media screen and (max-width: 767px) {
    .description {
        max-width: 100%;
        margin-bottom: 1rem;
    }
}
/* 右側のリストコンテナ */
.list-container {
    flex: 1;
    width: 100%;
/*    max-width: 500px;*/
    border-top: 2px solid #e0e0e0;
}
.anchor-nav {
    width: 60%;
}
@media screen and (max-width: 767px) {
    .anchor-nav {
        width: 100%;
    }
}
/* リストの各アイテム */
.anchor-nav__item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: #fff;
    border-bottom: 2px solid #e0e0e0;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-decoration: none;
    color: #333;
    font-weight: 500;
}

/* マウスホバー時のスタイル（濃いブルー） */
.anchor-nav__item:hover {
    background-color: #003399; /* 濃いブルー */
    color: #ffffff;
}

/* V字アイコンの作成 */
.arrow-icon {
    width: 10px;
    height: 10px;
    border-right: 3px solid #003399;
    border-bottom: 3px solid #003399;
    transform: rotate(45deg);
    margin-right: 20px;
    margin-bottom: 5px;
    transition: border-color 0.2s;
}

/* ホバー時にアイコンを白くする */
.anchor-nav__item:hover .arrow-icon {
    border-color: #ffffff;
}

/* バッジ（PRO/オプション）のスタイル */
.badge {
    margin-left: 10px;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 3px;
}

.badge-pro {
    background-color: #001a4d;
    color: white;
    font-weight: bold;
}

.badge-option {
    color: #666;
    font-size: 14px;
}
.anchor-nav__item:hover .badge-option {
    color: #ddd;
}

/* アコーディオン エリア
-------------------------------------------------------*/

/* アコーディオンの外枠 */
.accordion-container {
    margin: 60px 0;;
    border-top: 1px solid #333;
}
.accordion-title {
    width: 90%;
}

/* 各アコーディオン項目 */
details {
    border-bottom: 1px solid #333;
    background-color: #fff;
}

/* 見出し部分 */
summary {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    cursor: pointer;
    list-style: none; /* デフォルトの三角矢印を消す */
    font-size: 22px;
    font-weight: bold;
    color: #003399;
    background-color: #F9F8F8;
/*    transition: background-color 0.3s, color 0.3s;*/


    position: relative; /* 背景層の基準 */
    z-index: 1;         /* 重なり順の管理 */
    overflow: hidden;    /* はみ出た背景を隠す */
    transition: color 0.4s; /* 文字色の変化を滑らかに */
}
@media screen and (max-width: 767px) {
    summary {
        padding: 20px 15px 20px 15px;
    }
}

/* 左からスライドしてくる青い背景層 */
summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%; /* 左側に完全に隠す */
    width: 100%;
    height: 100%;
    background-color: #003399; /* 塗りつぶす色（濃いブルー） */
    transition: left 0.2s ease-in-out; /* 塗りつぶしの速度と動き */
    z-index: -1; /* 文字の後ろに配置 */
}

/* マウスホバー時の動き */
summary:hover {
    color: #FFFF54; /* ホバー時に文字を白くする */
}

summary:hover::before {
    left: 0; /* 左から右へスライド */
}

/* アコーディオンが開いている（open）時の状態 */
/* ホバーしていなくても青い状態を維持 */
details[open] summary {
    background-color: #003399;
    color: #FFFF54;
}

/* 開いている時は塗りつぶしアニメーションを不要にする設定 */
details[open] summary::before {
    display: none;
}

/* アイコン（プラス・マイナス）の色調整 */
.icon {
    z-index: 2; /* 背景層より上に表示 */
}

/* Chrome/Safari用：デフォルト矢印を消す */
summary::-webkit-details-marker {
    display: none;
}

/* 開いている時の見出しスタイル（濃いブルー背景） */
details[open] summary {
    background-color: #003399;
    color: #FFFF54;
}


/* プラス・マイナスマークの作成 */
.icon {
    position: relative;
    width: 32px;
    height: 32px;
}
/* 横棒 */
.icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 8px;
    background-color: currentColor;
    transform: translateY(-50%);
}
/* 縦棒（プラスの時だけ表示） */
.icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 8px;
    height: 100%;
    background-color: currentColor;
    transform: translateX(-50%);
    transition: transform 0.3s ease;
}

/* 開いた時に縦棒を消してマイナスにする */
details[open] .icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

/* 中身のコンテンツエリア */
.content {
    display: flex;
    padding: 40px 10%;
    background-color: #e6f2f8; /* 薄い水色 */
    gap: 30px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
@media screen and (max-width: 767px) {
    .content {
        display: block;
        padding: 40px 5%;
    }
}

/* 装飾用の背景矢印（簡易再現） */
.content::before {
/*    content: ">>>";
    position: absolute;
    left: -10px;
    bottom: -10px;
    font-size: 100px;
    color: #cedde6;
    font-weight: bold;
    letter-spacing: -15px;
    opacity: 0.6;
*/
content: ""; /* 文字列としての ">>>" は空にする */
    position: absolute;
    left: -10px;
    bottom: -60px;
    width: 200px;  /* SVGの大きさに合わせて調整 */
    height: 150px; /* SVGの大きさに合わせて調整 */

    /* SVGファイルを読み込み（マスクとして使用） */
    -webkit-mask-image: url("../images/features/triple-arrow.svg");
    mask-image: url("../images/features/triple-arrow.svg");
    
    /* マスクの設定：リピートさせず、枠内に収める */
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;

    /* ここで色を指定（#B7C0D4） */
    background-color: #B7C0D4; 

    /* 重なり順と透明度 */
    opacity: 0.6;
    z-index: 0;
}

.text-area {
    flex: 1;
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    z-index: 1;
}

.image-placeholder {
    flex: 0 0 55%;
    position: relative;
    z-index: 10;
/*    height: 200px;
    background-color: #eee;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
    z-index: 1;
*/
}

.badge-pro, .badge-opt {
    font-size: 14px;
    margin-left: 10px;
    font-weight: normal;
}
.badge-pro {
    background: #001a4d;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
}