/* =================================================================

    reset

================================================================= */
* {
    box-sizing: border-box;
}

:after,
:before {
    box-sizing: inherit;
}

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    margin: 0;
}

main {
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0;
}

p,
ul,
ol {
    margin: 0;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

a {
    background-color: transparent;
    text-decoration: none;
    color: inherit;
}

img {
    border-style: none;
    vertical-align: bottom;
    width: 100%;
    height: auto;
    display: block;
}

button {
    -webkit-appearance: none;
    appearance: none;
    color: inherit;
    font: inherit;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    outline: 0;
    border-radius: 0;
    cursor: pointer;
}

[hidden] {
    display: none;
}

/* =================================================================

    base

================================================================= */
body {
    color: #111;
    font-family: "Noto Sans JP", sans-serif;
    font-size: 16px;
    line-height: 190%;
    overflow-x: hidden;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}

.en {
    font-family: "Poppins", sans-serif;
}

/* =================================================================

    共通レイアウト（index.php準拠）

================================================================= */
.pc_base {
    min-height: 100vh;
}

.wrapper {
    display: flex;
    background: url(../../../assets/images/pc_bg2.jpg) no-repeat 0 0 / cover;
    background-attachment: fixed;
}

.wrapper .main_left {
    width: calc(40% - 230px);
}

.wrapper .main_left .in {
    position: fixed;
    width: calc(40% - 230px);
}

.wrapper .main {
    background-color: #fff;
    width: 460px;
    box-shadow: 0px 4px 77.5px 39px rgba(29, 42, 146, 0.25);
}

.wrapper .main_right {
    width: calc(60% - 230px);
}

.wrapper .main_right .in {
    position: fixed;
    width: calc(60% - 230px);
}

.wrapper .main_right .in .base {
    position: relative;
    height: 100vh;
}

.wrapper .main_right .in .base .menu {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 320px;
    border-radius: 12px;
    padding: 16px 0;
    background: #4360f3;
}

.wrapper .main_right .in .base .menu .ttl {
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    letter-spacing: 2px;
    margin-bottom: 4px;
    padding: 8px 16px 0 24px;
}

.wrapper .main_right .in .base .menu ul {
    padding: 0 8px;
}

.wrapper .main_right .in .base .menu li a {
    display: flex;
    color: #fff;
    background: url(../../../assets/images/dot_white.svg) no-repeat 16px 50%;
    background-blend-mode: multiply;
    padding: 12px 16px 12px 36px;
}

.wrapper .main_right .in .base .menu li a .en {
    font-size: 19px;
    margin-right: 16px;
}

.wrapper .main_right .in .base .menu li a .sf {
    color: #bdcef3;
    font-size: 13px;
}

.wrapper .main_right .in .base .menu li a:hover {
    background: #fff url(../../../assets/images/dot_blue.svg) no-repeat 12px 50%;
    background-blend-mode: multiply;
    color: #4360f3;
    border-radius: 8px;
}

.wrapper .main_right .in .base .menu li a:hover .sf {
    color: #4360f3;
}

.wrapper .main_right .in .base .menu .cta {
    width: 80%;
    margin: 16px auto;
}

.wrapper .main_right .in .base .menu .cta a {
    padding: 8px;
    font-size: 13px;
    background: linear-gradient(90deg, #fff 0%, #fff 100%);
    color: #4360f3;
}

.wrapper .main_right .in .base .menu .cta a span {
    background: url(../../../assets/images/dot_blue.svg) no-repeat 100% 50%;
    padding-right: 24px;
}

.wrapper .main_right .in .base .menu .cta a:hover {
    color: #fff;
}

.wrapper .main_right .in .base .menu .cta a:hover span {
    background: url(../../../assets/images/dot_white.svg) no-repeat 100% 50%;
    padding-right: 24px;
}

/* ハンバーガーメニュー（既存ページと同一構成） */
.hamburger-morph,
.nav-morph {
    display: none;
}

@media screen and (max-width: 768px) {
    .hamburger-morph {
        display: block;
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        width: 50px;
        height: 50px;
        padding: 0;
        border: none;
        background: #000;
        border-radius: 100px;
        cursor: pointer;
    }

    .hamburger-morph__icon {
        width: 100%;
        height: 100%;
    }

    .hamburger-morph__line {
        fill: none;
        stroke: #fff;
        stroke-width: 2;
        transition:
            stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
            stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
    }

    .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 30 207;
    }

    .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 30 60;
    }

    .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 30 207;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(1) {
        stroke-dasharray: 60 157;
        stroke-dashoffset: -126;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(2) {
        stroke-dasharray: 1 60;
        stroke-dashoffset: -30;
    }

    .hamburger-morph.active .hamburger-morph__line:nth-child(3) {
        stroke-dasharray: 60 157;
        stroke-dashoffset: -126;
    }

    .nav-morph {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100vh;
        background: #4360f3;
        clip-path: circle(0% at calc(100% - 44px) 44px);
        transition: clip-path 0.7s cubic-bezier(0.4, 0, 0.2, 1);
        z-index: 900;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav-morph.active {
        clip-path: circle(150% at calc(100% - 44px) 44px);
    }

    .nav-morph__wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        margin: 23vw 0 0 0;
    }

    .nav-morph__list {
        margin: 0;
        padding: 0;
        list-style: none;
        text-align: center;
        width: 100%;
    }

    .nav-morph__item {
        opacity: 0;
        transform: translateY(30px);
        transition:
            opacity 0.4s ease,
            transform 0.4s ease;
    }

    .nav-morph.active .nav-morph__item {
        opacity: 1;
        transform: translateY(0);
    }

    .nav-morph.active .nav-morph__item:nth-child(1) {
        transition-delay: 0.3s;
    }
    .nav-morph.active .nav-morph__item:nth-child(2) {
        transition-delay: 0.4s;
    }
    .nav-morph.active .nav-morph__item:nth-child(3) {
        transition-delay: 0.5s;
    }
    .nav-morph.active .nav-morph__item:nth-child(4) {
        transition-delay: 0.6s;
    }

    .nav-morph__link {
        position: relative;
        display: flex;
        justify-content: space-between;
        gap: 16px;
        padding: 16px;
        font-size: 24px;
        color: #fff;
        text-decoration: none;
        overflow: hidden;
        width: 100%;
        border-bottom: 1px solid #6177e6;
    }

    .nav-morph__link .sf {
        font-size: 12px;
    }

    .wrapper .main_left,
    .wrapper .main_right {
        display: none;
    }

    .wrapper .main {
        width: 100%;
    }
}

/* =================================================================

    mv セクション

================================================================= */
.mv {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to left, #005bee 0%, #04a8ee 100%);
}

.mv__canvas {
    position: relative;
    width: 100%;
    padding-top: 192.045%; /* 845 / 440 * 100 */
}

.mv__canvas > * {
    position: absolute;
}

/* --- bg_2（1枚絵で再現） --- */
.mv__bg2 {
    left: -8.64%;
    top: -16.92%;
    width: 123.32%;
    height: auto;
    pointer-events: none;
}

/* --- 写真ベルト（mv_toright.png 1枚をタイル状に敷き詰めて無限横スクロール） ---
   配置範囲はFigma実測値（mv_toleft/mv_toright フレームのバウンディングボックス）に準拠 */
.mv__belt {
    position: absolute;
    pointer-events: none;
}

.mv__belt--left {
    left: -250.68%;
    top: -37.51%;
    width: 501.38%;
    height: 137.77%;
    opacity: 0.25; /* 透過 */
    z-index: 1;
}

.mv__belt--right {
    left: -338.41%;
    top: 22.14%;
    width: 499.55%;
    height: 92.83%;
    opacity: 1; /* 不透過 */
    z-index: 2;
}

.mv__belt-rotate {
    position: absolute;
    inset: 0;
}

.mv__belt--left .mv__belt-rotate {
    transform: rotate(18.09deg);
}

.mv__belt--right .mv__belt-rotate {
    transform: rotate(-7.09deg);
}

.mv__belt-track {
    position: absolute;
    top: 50%;
    left: 0;
    display: flex;
    align-items: center;
    gap: 16px;
    width: max-content;
    transform: translateY(-50%);
    will-change: transform;
}

.mv__belt-track img {
    height: 400px;
    width: auto;
    max-width: none;
    flex: none;
}

/* --- ロゴ・タイトル（ベルトより前面に表示） --- */
.mv__logo-mark,
.mv__logo-word1,
.mv__logo-word2,
.mv__logo-main,
.mv__ttl {
    z-index: 10;
}

.mv__logo-mark {
    left: 50.97%;
    top: 8.57%;
    width: 23.74%;
}

.mv__logo-word1 {
    left: 6.5%;
    top: 14.69%;
    width: 39.57%;
}

.mv__logo-word2 {
    left: 47.38%;
    top: 15.13%;
    width: 25.7%;
}

.mv__logo-main {
    left: 6.33%;
    top: 8.4%;
    width: 40.99%;
}

.mv__ttl {
    left: 5.68%;
    top: 18.9%;
    width: 68.18%;
    font-size: 52.077px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    line-height: normal;
    white-space: nowrap;
    color: #fff;
}

/* --- 縦書き Start（オフキャンバス装飾） --- */
.mv__start {
    left: 134.77%;
    top: 6.51%;
    width: 5.91%;
    transform: rotate(90deg);
    transform-origin: left top;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 17px;
    letter-spacing: 3.74px;
    color: #000;
    white-space: nowrap;
}

/* --- Seminar Report（固定テキスト・mv_torightの上に配置） --- */
.mv__fixtxt {
    left: 28.64%;
    top: 51%;
    width: 73.88%;
    transform: rotate(-7.36deg);
    z-index: 5;
}

/* --- 実績数値バー --- */
.mv__results {
    left: 5.91%;
    top: 78.11%;
    width: 88.64%;
    height: 15.98%;
    border-radius: 8px;
    background: linear-gradient(
        to right,
        rgba(0, 71, 193, 0.75),
        rgba(14, 170, 239, 0.75)
    );
    -webkit-backdrop-filter: blur(4.15px);
    backdrop-filter: blur(4.15px);
    box-shadow: 0px 3px 16.3px 0px rgba(18, 156, 255, 0.5);
    z-index: 3;
    /* 認定衛生士数が0/未入力のときは1件だけを中央表示するため、
       アイコン・文言・数値はすべてこのコンテナのflexで配置する
       （固定座標(%)から通常フローに変更）。 */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 15.34%; /* 元デザインの2グループ間の余白比率を踏襲 */
    padding-top: 21px; /* 元デザインのバー上端からアイコンまでの余白を踏襲 */
    box-sizing: border-box;
}

/* 認定衛生士数が0/未入力で1グループのみの場合、中央に大きめの余白は不要 */
.mv__results--single {
    gap: 0;
}

.mv__results-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 2px;
}

.mv__results-icon {
    display: block;
}

.mv__results-icon--people {
    width: 27px;
    height: auto;
}

.mv__results-icon--badge {
    width: 16px;
    height: auto;
}

.mv__results-text {
    color: #fff;
    white-space: nowrap;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1.2;
}

.mv__results-row {
    display: inline-flex;
    align-items: baseline;
    color: #fff;
    white-space: nowrap;
    font-family: "Noto Sans JP", sans-serif;
    line-height: 1; /* 大きいフォントの行間による余分な余白を詰める */
}

.mv__results-num {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 37.501px;
    line-height: 1;
}

.mv__results-unit {
    margin-left: 6px; /* 数値が桁数によって伸びても被らないよう通常フローで隣に配置 */
    font-size: 20.698px;
    font-weight: 700;
}

.mv__results-label {
    font-size: 16px;
    font-weight: 700;
}

.mv__results-note {
    font-size: 12px;
    font-weight: 700;
}

/* =================================================================

    pickup セクション

================================================================= */
.pickup {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to left, #005bee 0%, #04a8ee 100%);
}

.pickup__canvas {
    position: relative;
    width: 100%;
    /* 元は要素数一定を前提にpadding-topで高さを固定していたが、
       タイトルが長くなっても崩れないよう通常フロー（可変高さ）に変更している。 */
    padding: 24px 0 40px;
}

.pickup__ttl-bg {
    position: relative;
    display: block;
    width: 61.11%;
    margin-left: -2.95%;
    transform: rotate(-7.47deg);
}

.pickup__ttl-txt {
    position: relative;
    margin: -58px 0 0 5.68%;
    padding-bottom: 32px;
    font-size: 22px;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    color: #fff;
    white-space: nowrap;
}

.pickup__card {
    display: block;
    position: relative;
    width: 88.64%;
    margin: 16px auto 0;
}

.pickup__card-inner {
    display: flex;
    align-items: stretch;
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10.3px 3px rgba(117, 155, 185, 0.09);
    overflow: hidden; /* カード本体の角丸クリップ。NEWバッジはこの外側の.pickup__cardに配置しているため影響しない */
}

.pickup__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 48px 4.62% 20px;
}

.pickup__thumb {
    position: relative;
    flex: 0 0 42.05%;
    width: 42.05%;
    overflow: hidden;
    /* 角丸クリップは親の .pickup__card-inner (border-radius + overflow:hidden) が
       一括で担当しているため、ここでの個別マスク指定は行わない
       （%指定のmask-sizeがサブピクセルの端数で右端に細い隙間を作る原因になっていた）。 */
}

.pickup__thumb img {
    position: absolute;
    left: -34.15%;
    top: -10.75%;
    width: 158.5%;
    height: 125.8%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.pickup__card:hover .pickup__thumb img {
    transform: scale(1.08);
}

.pickup__date {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 28px;
    background: #949ab6;
    border-radius: 4px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.pickup__h3 {
    margin-top: 12px;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: normal;
}

.pickup__lead {
    margin-top: 12px;
    color: #949ab6;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
}

.pickup__divider {
    margin-top: 16px;
    width: 100%;
    height: 1px;
    background: #eeeff4;
}

.pickup__link {
    align-self: flex-end;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #0081cc;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 13px;
    white-space: nowrap;
}

.pickup__link-arrow {
    width: 33px;
    height: 33px;
    transition: transform 0.3s ease;
}

.pickup__card:hover .pickup__link-arrow {
    transform: translateX(8px);
}

.pickup__badge {
    position: absolute;
    left: -5.13%;
    top: -22px;
    width: 64px;
    height: 64px; /* カードの高さが可変になったため%指定から固定pxに変更 */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pickup__badge-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    animation: dhs-badge-spin 8s linear infinite;
}

@keyframes dhs-badge-spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.pickup__badge-txt {
    position: relative;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 13px;
}

/* =================================================================

    recap セクション

================================================================= */
.recap {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to left, #005bee 0%, #04a8ee 100%);
    padding-bottom: 40px;
}

.recap__canvas {
    position: relative;
    width: 100%;
}

.recap__title {
    position: relative;
    width: 100%;
    padding-top: 28.06%; /* 123.485 / 440 * 100 */
}

.recap__ttl-bg {
    position: absolute;
    left: -3.18%;
    top: 0;
    width: 48.93%;
    height: 100%;
    transform: rotate(-8.87deg);
}

.recap__ttl-txt {
    position: absolute;
    left: 5.68%;
    top: 38.87%;
    font-size: 22px;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    color: #fff;
    white-space: nowrap;
}

.recap__card {
    position: relative;
    width: 88.64%;
    margin: -17px auto 0;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10.3px 3px rgba(117, 155, 185, 0.09);
}

.recap__block {
    position: relative;
    padding: 27px 24px;
    min-height: 153px; /* テキストが短い場合も写真が元の高さ(129px)を下回らないよう確保 */
}

.recap__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 28px;
    background: #0880f4;
    border-radius: 4px;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 13px;
    vertical-align: middle;
}

.recap__time {
    display: inline-block;
    margin-left: 13px;
    color: #0880f4;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 13px;
    vertical-align: middle;
}

.recap__h3 {
    margin-top: 11px;
    margin-right: 148px; /* 右上の写真(width:131px + right:17px)に潜り込まないよう手前で折り返す */
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
}

.recap__desc {
    margin-top: 16px;
    width: 51.28%;
    color: #75798c;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.7;
}

.recap__img {
    position: absolute;
    right: 17px;
    top: 12px;
    bottom: 12px; /* 左のテキスト量に応じてブロックの高さいっぱいまで伸縮 */
    width: 131px;
    overflow: hidden;
    display: block;
}

.recap__img img {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
}

.recap__divider {
    display: block;
    height: 1px;
    background: #b0cbdc;
}

/* =================================================================

    Archives セクション

================================================================= */
.archives {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
    padding-top: 40px;
    padding-bottom: 0;
}

.archives__canvas {
    position: relative;
    width: 100%;
    padding-bottom: 54px;
    /* 元はFigma由来の固定4件レイアウト用に padding-top で高さを固定していたが、
       件数が変わっても崩れないよう、タイトルは自己完結の縦横比ボックス、
       一覧は .archives__list の通常フロー（可変高さ）に変更している。 */
}

.archives__title {
    position: relative;
    width: 57.15%;
    margin-left: -0.23%;
    padding-top: 21.15%; /* 6.19% × 341.59%（旧キャンバス比）＝自身の横幅に対する高さ比 */
}

.archives__ttl-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-13.49deg);
}

.archives__ttl-txt {
    position: absolute;
    left: 11.93%;
    top: 59.28%;
    font-size: 22.447px;
    font-weight: 700;
    font-family: "Noto Sans JP", sans-serif;
    color: #073c63;
    white-space: nowrap;
}

.archives__line {
    position: absolute;
    left: 5.68%;
    top: 21.15%;
    bottom: 0;
    width: 1px;
    background: #0880f4;
}

.archives__list {
    position: relative;
    display: flex;
    flex-direction: column;
    padding-top: 5.45%;
}

.archives__item {
    position: relative;
    width: 100%;
    min-height: 129px;
    margin-bottom: 32px;
}

.archives__item:last-child {
    margin-bottom: 0;
}

.archives__kaisu {
    position: absolute;
    left: 5.68%;
    top: 0;
    width: 7.73%;
    height: 129px; /* 固定サイズの装飾タブ（旧デザインの129pxを踏襲） */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 16px;
    z-index: 1;
}

.archives__kaisu img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.archives__kaisu-txt {
    position: relative;
    transform: rotate(90deg);
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 17px;
    white-space: nowrap;
}

.archives__card {
    display: flex;
    align-items: stretch;
    position: relative;
    margin-left: 16.14%;
    width: 77.95%;
    min-height: 129px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10.3px 3px rgba(117, 155, 185, 0.12);
    overflow: hidden;
}

.archives__info {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    padding: 24px 7%;
}

.archives__date {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    height: 28px;
    background: #0880f4;
    border-radius: 4px;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 13px;
    white-space: nowrap;
}

.archives__h3 {
    margin-top: 12px;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: normal;
}

.archives__lead {
    margin-top: 12px;
    color: #949ab6;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 14px;
    line-height: normal;
}

.archives__result {
    margin-top: 16px;
    white-space: nowrap;
}

.archives__result-row {
    display: flex;
    align-items: baseline;
}

.archives__result-row:first-child {
    align-items: center;
}

.archives__result-row + .archives__result-row {
    margin-top: -2px;
}

.archives__result-icon {
    position: relative;
    width: 18px;
    height: 18.667px;
    margin-right: 6px;
}

.archives__result-label {
    color: #0880f4;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 13px;
    white-space: nowrap;
}

.archives__result-num {
    color: #0880f4;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 21px;
}

.archives__result-unit {
    color: #0880f4;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 17px;
    margin-left: 2px;
}

.archives__thumb {
    position: relative;
    flex: 0 0 39.65%;
    width: 39.65%;
    overflow: hidden;
    -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEzNiIgaGVpZ2h0PSIzMDEiIHZpZXdCb3g9IjAgMCAxMzYgMzAxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDE0OSIgZD0iTTAgMEgxMjhDMTMyLjQxOCAwIDEzNiAzLjU4MTcyIDEzNiA4VjMwMUgwVjBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
    mask-image: url("data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiBvdmVyZmxvdz0idmlzaWJsZSIgc3R5bGU9ImRpc3BsYXk6IGJsb2NrOyIgd2lkdGg9IjEzNiIgaGVpZ2h0PSIzMDEiIHZpZXdCb3g9IjAgMCAxMzYgMzAxIiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBpZD0iUmVjdGFuZ2xlIDE0OSIgZD0iTTAgMEgxMjhDMTMyLjQxOCAwIDEzNiAzLjU4MTcyIDEzNiA4VjMwMUgwVjBaIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.archives__thumb img {
    position: absolute;
    inset: 0;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.archives__card:hover .archives__thumb img {
    transform: scale(1.08);
}

.archives__arrow {
    position: absolute;
    right: 16px;
    bottom: 14px;
    width: 33px; /* Figma仕様の固定サイズ。カードが縦に伸びても拡大されないよう%指定をやめた */
    height: 33px;
    transition: transform 0.3s ease;
}

.archives__card:hover .archives__arrow {
    transform: translateX(8px);
}

.archives__arrow img {
    position: static; /* .archives__thumb img の広いセレクタ(left:-82.65%等)を打ち消す */
    display: block;
    left: auto;
    top: auto;
    width: 33px;
    height: 33px;
    max-width: 33px;
    object-fit: contain;
}

/* =================================================================

    joinus セクション

================================================================= */
.joinus {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to left, #005bee 0%, #04a8ee 100%);
    padding-bottom: 64px;
}

.joinus__canvas {
    position: relative;
    width: 100%;
    padding-top: 2.95%; /* 旧デザインのタイトル上余白比(13px/440px)を踏襲 */
    /* 元は次回案内カードの数が常に3件である前提でpadding-topにより高さを固定していたが、
       案内数が変わっても崩れないよう、タイトル・カードとも通常フロー（可変高さ）に変更している。 */
}

.joinus__title {
    position: relative;
    width: 97.72%;
    margin: 0 auto;
    padding-left: 1.14%;
}

.joinus__ttl-bg {
    display: block;
    width: 48.8%;
    transform: rotate(-9.66deg);
}

.joinus__ttl-txt {
    margin-top: 6px;
    text-align: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 22px;
}

.joinus__ttl-sub {
    margin-top: 8px;
    text-align: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.joinus__card {
    position: relative;
    width: 77.95%;
    margin: 5.45% auto 0; /* 24px / 440px（他セクションの余白比に合わせた通常フロー用マージン） */
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 10.3px 3px rgba(0, 104, 187, 0.3);
    padding: 21px 0 27px;
}

.joinus__card-ttl {
    text-align: center;
    color: #0281ee;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.joinus__box {
    position: relative;
    width: 89.8%;
    margin: 23px auto 0;
    padding: 16px 0 24px;
    background: rgba(72, 150, 245, 0.18);
    border-radius: 8px;
    text-align: center;
}

.joinus__box-loc {
    color: #0281ee;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 500;
    font-size: 20px;
}

.joinus__box-date {
    display: block;
    margin-top: 14px;
    color: #0281ee;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-size: 37px;
}

.joinus__box-day {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 13px;
    margin-left: 6px;
}

.joinus__btn {
    position: relative;
    display: block;
    width: 72.08%;
    height: 41px;
    margin: 12px auto 0;
    line-height: 41px;
    border-radius: 107.018px;
    background: linear-gradient(to right, #05deff, #0f3cff);
    box-shadow: 0px 3px 14.2px 0px rgba(0, 129, 204, 0.38);
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.joinus__btn:hover {
    transform: translateY(-4px);
    box-shadow: 0px 8px 20px 0px rgba(0, 129, 204, 0.5);
}

.joinus__btn-dot {
    position: absolute;
    right: 7.66%;
    top: 41.46%;
    width: 6px;
    height: 6px;
    border-radius: 100px;
    background: #fff;
}

/* =================================================================

    footer（index.php と共通のスタイル）

================================================================= */
.cta a {
    background: linear-gradient(90deg, #00c9e8 0%, #0f3cff 100%);
    box-shadow: 0px 4px 26.1px rgba(0, 129, 204, 0.48);
    font-weight: 700;
    color: #fff;
    border-radius: 100px;
    display: block;
    margin: 0 auto;
    text-align: center;
    padding: 14px 24px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.cta a::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, #39e4c2 0%, #00c6a5 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
}

.cta a span {
    position: relative;
    z-index: 1;
    background: url(../img/footer/dot_white.svg) no-repeat 100% 50%;
    padding-right: 24px;
}

.cta a:hover::before {
    opacity: 1;
}

footer .f_cta {
    background: url(../img/footer/sec9_1.png) no-repeat 0 0 / 110%;
    padding: 40px 24px;
}

footer .f_cta p {
    padding-bottom: 32px;
}

footer .f_main {
    background: #000;
    text-align: center;
    color: #ddd;
    padding: 40px 24px;
}

footer .f_main .logo {
    width: 80px;
    margin: auto;
}

footer .f_main p {
    font-size: 12px;
    margin: 32px 0 24px 0;
    line-height: 170%;
}

footer .f_main .copy {
    font-size: 10px;
}

/* =================================================================

    詳細ページ: dheader セクション

================================================================= */
.dheader {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.dheader__canvas {
    position: relative;
    width: 100%;
    padding-top: 189.55%; /* 834 / 440 * 100 */
}

.dheader__canvas > * {
    position: absolute;
}

.dheader__photo {
    left: 0%;
    top: 0%;
    width: 100%;
    max-width: none;
    height: 54.8%;
    object-fit: cover;
}

.dheader__wave {
    left: -35.91%;
    top: 46.04%;
    width: 177.62%;
    height: auto;
}

.dheader__card {
    left: 5.68%;
    top: 45.44%;
    width: 88.64%;
    height: 18.94%;
    background: #fff;
    border-radius: 16px;
}

.dheader__logo-main {
    left: 20%;
    top: 53%;
    width: 34.81%;
}

.dheader__logo-mark {
    left: 56.88%;
    top: 53%;
    width: 20.16%;
}

.dheader__logo-word1 {
    left: 27.27%;
    top: 58.03%;
    width: 27.27%;
}

.dheader__logo-word2 {
    left: 55.44%;
    top: 58.34%;
    width: 17.71%;
}

.dheader__report-1 {
    left: 24.32%;
    top: 63.16%;
    width: 15.23%;
    transform: rotate(-3.3deg);
}

.dheader__report-2 {
    left: 38.27%;
    top: 63.2%;
    width: 33%;
    transform: rotate(-3.3deg);
}

.dheader__report-swoosh {
    left: 23.41%;
    top: 66.55%;
    width: 49.25%;
}

.dheader__tag {
    left: 27.5%;
    top: 72.54%;
    width: 50%;
    padding: 2px 0;
    border-top: 2px solid #0880f4;
    border-bottom: 2px solid #0880f4;
    text-align: center;
}

.dheader__tag-txt {
    display: inline-block;
    color: #0880f4;
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 1.6px;
}

.dheader__ttl {
    left: 5.68%;
    top: 82.74%;
    width: 88.64%;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 31px;
}

.dheader__date {
    left: 6.36%;
    top: 91.85%;
    color: #717171;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 13px;
    line-height: 24px;
}

/* =================================================================

    詳細ページ: dvoice セクション（参加者の声スライダー）

================================================================= */
.dvoice {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: linear-gradient(to left, #005bee 0%, #04a8ee 100%);
}

.dvoice__canvas {
    position: relative;
    width: 100%;
    padding-top: 121.14%; /* 533 / 440 * 100 */
}

.dvoice__canvas > * {
    position: absolute;
}

.dvoice__ttl-bg {
    left: 1.36%;
    top: 1.31%;
    width: 34.45%;
    transform: rotate(-13.22deg);
}

.dvoice__ttl-txt {
    left: 7.95%;
    top: 10.32%;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 31px;
}

.dvoice__lead {
    left: 8.18%;
    top: 18.57%;
    width: 84.09%;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 27px;
}

.dvoice__slider {
    left: 0;
    top: 38.84%;
    width: 100%;
    height: 50.66%;
}

.dvoice__slider > * {
    position: absolute;
}

.dvoice__arrow {
    top: 40.37%;
    width: 29px;
    height: 19.63%;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.dvoice__arrow--prev {
    left: calc(50% - min(40vw, 166px)); /* スライド幅(80vw, 最大332px)の左端にぴったり付ける */
    transform: translateX(-100%);
}

.dvoice__arrow--next {
    left: calc(50% + min(40vw, 166px)); /* スライド幅(80vw, 最大332px)の右端にぴったり付ける */
}

.dvoice__arrow img {
    width: 7px;
    height: auto;
}

.dvoice__arrow--prev img {
    transform: scaleX(-1);
}

.dvoice__viewport {
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.dvoice__track {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 24px;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.dvoice__slide {
    flex: none;
    width: 80vw;
    max-width: 332px;
    height: 100%;
}

.dvoice__card {
    position: relative;
    width: 100%;
    height: 100%;
    background: #f3ece4;
    border-radius: 16px;
}

.dvoice__note {
    position: absolute;
    left: 2.11%;
    top: 12.22%;
    width: 95.78%;
    height: 61.11%;
    object-fit: contain;
}

.dvoice__divider {
    position: absolute;
    left: 4.82%;
    top: 82.96%;
    width: 90.66%;
    height: 1px;
    background: #e2d6ca;
}

.dvoice__label {
    position: absolute;
    right: 3.01%;
    top: 84.81%;
    color: #6f7071;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 12px;
}

/* =================================================================

    詳細ページ: dseminar セクション（セミナーの様子）

================================================================= */
.dseminar {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.dseminar__canvas {
    position: relative;
    width: 100%;
    /* 元はFigma由来の固定4枚レイアウト用に padding-top で高さを固定していたが、
       写真を無制限に追加できるようにしたため、写真は .dseminar__photos（通常フロー）へ分離し、
       このキャンバスは背景画像の実サイズに合わせて高さが決まるようにしている。 */
}

.dseminar__canvas > * {
    position: absolute;
}

.dseminar__bg {
    position: static;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    display: block;
}

.dseminar__ttl-bg {
    left: -5.23%;
    top: 40px;
    width: 60.87%;
    transform: rotate(-11.91deg);
}

.dseminar__ttl-txt {
    left: 7.5%;
    top: 86px;
    width: 88.86%;
    color: #000;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 21px;
    line-height: 31px;
}

.dseminar__photos {
    position: static;
    display: flex;
    flex-direction: column;
    margin-top: -135px;
    padding: 0 5.68% 0;
}

.dseminar__photo {
    position: static;
    display: block;
    width: 100%;
    aspect-ratio: 3 / 2; /* 元の1枚あたりの縦横比(390:260)を踏襲 */
    object-fit: cover;
    margin-bottom: 24px;
}

/* =================================================================

    詳細ページ: dalbum セクション（パスワード付き写真アルバム）

================================================================= */
.dalbum {
    position: relative;
    width: 100%;
    background: #fff;
    padding: 40px 0 40px;
}

.dalbum__canvas {
    position: relative;
    width: 100%;
    padding-top: 86.82%; /* 382 / 440 * 100 */
}

.dalbum__card {
    position: absolute;
    left: 6.14%;
    top: 0;
    width: 88.41%;
    height: 100%;
    background: linear-gradient(to left, #005bee 0%, #04a8ee 100%);
    border-radius: 8px;
}

.dalbum__card > * {
    position: absolute;
}

.dalbum__icon {
    left: 45.68%;
    top: 6.45%;
    width: 9.09%;
}

.dalbum__lead {
    left: 5.68%;
    top: 17.8%;
    width: 88.86%;
    text-align: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 16px;
    line-height: 25px;
}

.dalbum__box {
    left: 3.86%;
    top: 35.6%;
    width: 92.03%;
    height: 36.41%;
    background: #0561c1;
    border-radius: 8px;
}

.dalbum__box-txt {
    position: absolute;
    left: 0;
    top: 9.17%;
    width: 100%;
    text-align: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 25px;
}

.dalbum__box-label {
    position: absolute;
    left: 7.54%;
    top: 59.17%;
    width: 23.46%;
    height: 24.17%;
    background: #062b52;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.dalbum__box-date {
    position: absolute;
    left: 30.93%;
    top: 59.17%;
    width: 65.36%;
    height: 24.17%;
    background: #fff;
    border-radius: 0 4px 4px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #062b52;
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-size: 18px;
}

.dalbum__btn {
    left: 5.4%;
    top: 78.04%;
    width: 88.17%;
    height: 13.87%;
    background: #fff;
    border-radius: 100px;
    box-shadow: 0px 4px 10.3px 3px rgba(0, 104, 187, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #0281ee;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 18px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dalbum__btn:hover {
    transform: translateY(-4px);
    box-shadow: 0px 10px 20px 0px rgba(0, 104, 187, 0.45);
}

.dalbum__btn img {
    width: 7px;
    height: auto;
}

/* =================================================================

    詳細ページ: 開催レポート一覧へ戻るリンク

================================================================= */
.dsingle-back {
    width: 100%;
    padding: 40px 5.68%;
    background: #fff;
    text-align: center;
}

.dsingle-back__btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 100px;
    border: 1px solid #0880f4;
    color: #0880f4;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease, color 0.3s ease;
}

.dsingle-back__btn:hover {
    background: #0880f4;
    color: #fff;
    transform: translateY(-4px);
    box-shadow: 0px 8px 20px 0px rgba(8, 128, 244, 0.35);
}