@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/noto-sans-jp-v53-latin-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/noto-sans-jp-v53-latin-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/noto-sans-jp-v53-latin-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url("../font/noto-sans-jp-v53-latin-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

body {
    background: #005BAE;
    font-family: "Noto Sans JP", -apple-system, system-ui, sans-serif;
}

a {
    display: block;
}

a:hover {
    opacity: .8;
}

img {
    width: 100%;
    vertical-align: bottom;
}

.header {
    height: 100%;
    width: 100%;
    position: relative;
}

div#mv {
    position: relative;
}

.pc_mv_left {
    width: calc(50% - 195px);
    height: 100vh;
    background-image: url(../img/mv_left.png);
    background-size: cover;
    background-position: bottom left;
    position: fixed;
    top: 0;
    left: 0;
}

.pc_mv_right {
    width: calc(50% - 195px);
    height: 100vh;
    background-image: url(../img/mv_right.png);
    background-size: cover;
    background-position: bottom right;
    position: fixed;
    top: 0;
    right: 0;
}

.mv_cta {
    position: absolute;
    width: 90%;
    margin: 0 5%;
    bottom: 350px;
}

.mv_auto__slide {
    overflow: hidden;
    width: 100%;
    height: 188px;
    position: absolute;
    bottom: 140px;
}

.mv_auto__track {
    display: flex;
    width: max-content;
    height: 188px;
    animation: mvLoop 40s linear infinite;
}

.mv_auto__track img {
    width: auto;
    height: 188px;
    margin-right: 12px;
    flex-shrink: 0;
}

/* 横へ無限ループ */
@keyframes mvLoop {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.floating {
    position: fixed;
    left: calc(50% - 390px);
    bottom: 20px;
    width: 184px;
}

.contents {
    position: relative;
    max-width: 390px;
    margin: auto;
    z-index: 99;
    overflow: hidden;
}

.swiper-container.img_slide3 {
    width: 95%;
    padding-bottom: 50px;
}

/* スライダー周り */
.swiper-container.img_slide3 { overflow: visible; }
.swiper-container.img_slide3 .swiper-slide { width: auto; }

/* 9:16の縦動画に最小UIでフィット */
.tiktok-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 9 / 16;     /* ここを 16/9 に変えれば横動画にも対応 */
    border-radius: 12px;
    overflow: hidden;
}
.tiktok-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.section_3 {
    padding-top: 127px;
    position: relative;
}

.sec3_bg {
    position: absolute;
    top: 0;
}

.cta_inner {
    position: relative;
}

.cta_btn_wrap {
    position: absolute;
    bottom: 145px;
    width: 90%;
    margin: 0 5%;
}

.sec3_cta {
    margin-top: 115.5px;
}

.section_4 {
    position: relative;
    background: url(../img/sec4_bg.png);
    background-size: cover;
    overflow: hidden;
    z-index: 3;
    margin-top: -113px;
}

.sec4_bnr {
    width: 91%;
    margin: auto;
    position: relative;
    z-index: 2;
}

.sec4_tiktok_wrap {
    padding-top: 20px;
    padding-bottom: 50px;
    position: relative;
}

.swiper-pagination.sec4 {
    bottom: 50px;
}

.sec4_1 {
    position: absolute;
}

.swiper-container.img_slide4 {
    padding-top: 80px;
    padding-bottom: 40px;
    width: 95%;
}

.section_5 {
    position: relative;
    padding-top: 235px;
}

.sec5_bg {
    position: absolute;
    top: 0;
}

.swiper-container.img_slide5 {
    width: 74%;
    margin-left: 5%;
    margin-bottom: 40px;
}

.swiper-container.img_slide6 {
    width: 74%;
    margin-left: -5.7%;
    padding-bottom: 38px;
}

.section_7 {
    margin-top: -160px;
}

.section_8 {
    margin-top: -400px;
    position: relative;
}

.sec8_slide {
    position: relative;
}

.sec8_inner {
    width: 80.586vw;
    margin: auto;
    overflow: hidden;
}

.sec8_detail {
    margin-top: 6.593vw;
}

.section_9 {
    margin-top: -120px;
}

/* アコーディオン */

/* ===== Accordion styles ===== */
:root{
    --acc-bg:#f6f8fb;
    --acc-border:#d8e0ee;
    --acc-primary:#294a86; /* 見出しの濃いブルー */
    --acc-title:#ffffff;
    --acc-trigger-bg:#3a62a8; /* ボタン背景 */
    --acc-trigger-bg-hover:#345a9b;
    --acc-radius:0.733vw;
    --acc-shadow:0 6px 20px rgba(0,0,0,.06);
    --acc-duration:.28s;
}

.program-accordion {
    width: 83.81vw;
    margin: 0 auto;
    padding: 0 0;
    display: grid;
    gap: 1.172vw;
}

.acc-item{
    box-shadow: var(--acc-shadow);
    overflow:hidden;
}

.acc-header{
    margin:0;
}

.acc-trigger{
    -webkit-tap-highlight-color: transparent;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:0.879vw;
    padding:1.172vw 1.319vw;
    background: var(--acc-trigger-bg);
    color: var(--acc-title);
    font-size: clamp(16px, 2.2vw, 18px);
    line-height:1.3;
    border:0;
    cursor:pointer;
}

.acc-trigger:hover,
.acc-trigger:focus-visible{
    background: var(--acc-trigger-bg-hover);
    outline: none;
}

/* 初期（閉じている状態） */
.acc-trigger {
    background: #fff;
    color: #2f5aa8; /* 青文字 */
    border-bottom: 2px solid #2f5aa8;
    transition: background 0.25s ease, color 0.25s ease;
}

/* 開いた状態（true） */
.acc-trigger[aria-expanded="true"] {
    background: #2f5aa8;
    color: #fff;
}

/* ホバー時のアクセント */
.acc-trigger:hover {
    background: #f0f5ff;
    color: #2f5aa8;
}

.acc-trigger[aria-expanded="true"]:hover {
    background: #254b90;
    color: #fff;
}

.acc-title{
    font-weight:700;
    letter-spacing:.02em;
}

.acc-icon{
    inline-size: 1.319vw;
    block-size: 1.319vw;
    flex: 0 0 1.319vw;
    border: 2px solid currentColor;
    border-left-color: transparent;
    border-top-color: transparent;
    transform: rotate(45deg);
    border-radius: 0.147vw;
    transition: transform var(--acc-duration) ease;
}

.acc-trigger[aria-expanded="true"] .acc-icon{
    transform: rotate(225deg);
}

/* パネル：スムーズ開閉（max-heightアニメ） */
.acc-panel{
    display:block;
    overflow:hidden;
    max-height: 73.26vw; /* 開時にJSでauto→確定値へ切り替え */
    transition: max-height var(--acc-duration) ease, opacity var(--acc-duration) ease;
    background: var(--acc-bg);
}

.acc-panel[hidden]{
    display:block; /* hiddenでもアニメ用にblockのまま */
    max-height:0;
    opacity:0;
    padding-block:0 !important;
    border-top:0;
}

.acc-panel{
    border-top:1px solid var(--acc-border);
    opacity:1;
}

.acc-media{
    margin:0;
}

.acc-media img{
    width:100%;
    height:auto;
    border-radius: 0.586vw;
    background:#e9eef7;
}

@media (max-width: 480px){
    .acc-trigger{ padding:14px 14px; }
}

/* アコーディオン */

.section_11 {
    background: #F7FC8C;
    padding: 60px 0 40px;
}

.swiper-button-next:after,
.swiper-button-prev:after {
    display: none !important;
}

.sec11_ttl_wrap {
    margin-bottom: 32px;
}

.faq_wrap {
    margin: 0 auto 37px;
    text-align: left;
}

.cta2_btn_wrap {
    position: absolute;
    bottom: 43px;
    width: 90%;
    margin: 0 5%;
}

/* FAQ *//* FAQ *//* FAQ */

.cp_qa .cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 20px 0;
    color: #fff;
}
.cp_qa .cp_actab {
    position: relative;
    overflow: hidden;
    width: 100%;
    margin: 0 0 20px 0;
    color: #fff;
}
.cp_qa .cp_actab input {
	position: absolute;
	opacity: 0;
}
/* 質問 */
.cp_qa .cp_actab label {
    font-size: 16px;
    font-weight: bold;
    position: relative;
    display: block;
    margin: 0 0 0 0;
    padding: 1em 3em 1em 80px;
    cursor: pointer;
    color: #424242;
    border-bottom: solid 2px #1d50a2;
}
.cp_qa .cp_actab label::before {
    width: 30px;
    height: 30px;
    content: '';
    background: url(../img/qa3.png);
    background-size: 100%;
    position: absolute;
    left: 1.465vw;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0,-50%);
}
.cp_qa .cp_actab label:hover {
    transition: all 0.3s;
    color: #1d50a2;
}
/* --質問の＋アイコン */
.cp_qa .cp_actab label::after {
    font-size: 1.7em;
    font-weight: bold;
    line-height: 2em;
    position: absolute;
    top: 50%;
    right: 10px;
    content: '';
    background: url(../img/qa1.png);
    background-size: contain;
    display: inline-block;
    width: 21px;
    height: 13px;
    -webkit-transform: translate(0, -50%);
    transform: translate(0, -50%);
    background-repeat: no-repeat;
}
/* 答え */
.cp_qa .cp_actab .cp_actab-content {
	position: relative;
	overflow: hidden;
	max-height: 0;
	padding: 0 0 0 40px;
	-webkit-transition: max-height 0.2s;
	transition: max-height 0.2s;
}
.cp_qa .cp_actab .cp_actab-content::before {
    width: 30px;
    height: 30px;
    content: '';
    background: url(../img/qa4.png);
    background-size: 100%;
    position: absolute;
    left: 1.465vw;
    top: 50%;
    -webkit-transform: translate(0, -50%);
    transform: translate(0,-50%);
}
.cp_qa .cp_actab .cp_actab-content p {
    margin: 1em 1em 1em 40px;
    color: #212121;
    font-weight: 400;
}

p.qa_anc {
    color: #343434;
}
/* 質問を開いた時の仕様 */
/* --答えの高さ */
.cp_qa .cp_actab input:checked ~ .cp_actab-content {
    max-height: 40em;
    background: #fff;
}
/* 質問をクリックした時のアイコンの動き */
.cp_qa .cp_actab input:checked ~ label {
    background: #fff;
}
/* 質問をクリックした時の+の動き */
.cp_qa .cp_actab input[type=checkbox]:checked + label::after {
    background: url(../img/qa2.png);
    background-size: contain;
	-webkit-transform-origin: 50% 50%;
	transform-origin: 50% 50%;
    background-repeat: no-repeat;
}

/* FAQ *//* FAQ *//* FAQ */

.footer .copyright {
    padding: 1.099vw 0.366vw;
    background: #1d50a2;
    color: var(--Neutral-White-000, #FFF);
    text-align: center;
    font-size: 1.026vw;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.footer .copyright {
    font-size: 14px;
}

@media (max-width: 767px) {

    header#header {
        display: none;
    }

    .floating {
        left: auto;
        right: 2%;
        bottom: 10px;
        width: 120px;
        z-index: 9999;
    }

}

@media (max-width: 500px) {
    .contents {
        max-width: 100%;
    }
}