/* --- 共通設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Noto Sans JP', sans-serif; line-height: 1.6; color: #333; overflow-x: hidden; }
img { max-width: 100%; height: auto; vertical-align: middle; }
section{ padding: 160px 0!important; }
h1,h2,h3,h4,h5,h6,p,span { font-family: 'Zen Old Mincho', serif; }
.foreground{ z-index: 9999; }
.txt_left { text-align: left; }
.txt_right { text-align: right; }
.big { font-size: 26px; }
.emphasis {color: #523482; background: linear-gradient(transparent 60%, #FFFFFF 60%); background-position: bottom; background-repeat: no-repeat; display: inline; font-weight: bold;  font-family: 'Noto Sans JP'; }
.red { font-size: 10px; color: #FF0000; margin-bottom: 6px; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.btn { text-decoration: none; border-radius: 50px; font-weight: bold; transition: 0.3s; display: inline-block; cursor: pointer; border: none; text-align: center; }
.section-title { text-align: center; font-size: 24px; margin-bottom: 50px; line-height: 1.6; }
.section-title span { color: #4B2C71; font-weight: bold; border-bottom: 2px solid #E2D9EE; }
.section-title--underline { text-align: center; font-size: 28px; margin-bottom: 40px; position: relative; padding-bottom: 15px; }
.section-title--underline::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 60px; height: 3px; background-color: #4B2C71; }
.logo { width: 184px; height:46px; }
.text-center{ text-align: center; }
/* --- ヘッダー --- */
.header { height: 80px; display: flex; align-items: center; background: #fff; position: sticky; top: 0; z-index: 1000; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
.header__inner { display: flex; justify-content: space-between; align-items: center; width: 1024px; }
.nav__list { display: flex; list-style: none; gap: 25px; }
.nav__list a { text-decoration: none; color: #333; font-size: 14px; font-weight: bold; }
.btn--header { background: linear-gradient(to right, rgb(75, 44, 113), rgb(50, 26, 77)); color: rgb(255, 255, 255); padding: 10px 25px; font-size: 14px; height: 50px; width: 170px; align-items: center; display: flex !important; justify-content: center; align-items: center; }
.menu-btn { display: none; }

/* --- セクション別のスタイル --- */
.hero { background-image: url("img/1-fv/FV_bg_PC.png"); background-size: cover; color: #fff; padding: 0!important; }
.hero__content { max-width: 496px; }
.hero__image { max-width: 768px; }
.hero__inner { display: flex; align-items: center; justify-content: space-between; }
.hero-btn { max-width: 288px; margin: 0 auto; }
.hero-btn img { margin-right: 16px; }
.tag { padding: 2px 8px; border-radius: 4px; margin: 0 4px; font-weight: bold; font-size: 14px; }
.tag--purple { background: #6b46c1; }
.tag--green { background: #2c7a7b; }
.hero__title { font-size: 40px; line-height: 1.3; margin: 25px 0; }
.btn--hero { width: 288px; background: linear-gradient(to right, #4B2C71, #321a4d); color: #fff; padding: 18px 50px; transition: all 0.3s ease; border: 1px solid rgba(255,255,255,0.2); font-size: 16px; display: flex; justify-content: center; align-items: center; }
.btn--hero svg{ width: 32px; height: 24px; margin-right: 16px; }
.btn--hero:hover { background: #ffffff !important; color: #4B2C71 !important; border: 1px solid #4B2C71; 
}

.problem { clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%); background-color: #F8F4FF; text-align: center; padding: 64px 0 144px !important; }
.problem__grid { display: flex; justify-content: center; gap: 20px; margin-top: 40px; }
.problem-title{ font-size: 24px; font-family: Noto Snas; font-weight: bold; }
.problem__icon { background: #4B2C71; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin: 0 auto 20px; }
.problem__icon img { width: 16px; }

.solution__diagram { text-align: center; margin-top: -180px; }
.solution__diagram img { width: 760px; }

.features { padding: 0 0 160px!important; }
.features_MV { max-width: 1200px; margin: -180px auto 0; }
.features_MV img { width: 100%; }
.features__inner { max-width: 720px; margin: 0 auto; }
.features__list { list-style: none; }
.features__list li { display: flex; gap: 20px; margin-bottom: 25px; font-size: 18px; align-items: flex-start; }

.reasons { padding: 100px 0; background: #F8F4FF; }
.reason-card { max-width: 960px; margin: 0 auto 40px; }
.reason-card__content { flex: 1; }

.cases { padding: 80px 0; background: #fff; }
.accordion__item { background: #fff; border-radius: 8px; margin-bottom: 10px; overflow: hidden; }
.accordion__header { width: 100%; padding: 25px; font-size: 20px; display: flex; justify-content: space-between; border: none; background: none; cursor: pointer; font-weight: bold; color: #4B2C71; border-bottom: 1px solid #523482; }
.accordion__header span { display: inline-block; transition: transform 0.3s ease; margin-left: 10px; }
.accordion__item.active .accordion__header span { transform: rotate(180deg); }
.accordion__content { max-height: 0; overflow: hidden; transition: 0.4s; }
.active .accordion__content { max-height: 2000px; padding: 30px; }
.timeline { position: relative; padding-left: 100px; border-left: 2px solid #E2D9EE; margin-left: 45px; }
.timeline__item { margin-bottom: 40px; position: relative; }
.timeline__icon { position: absolute; left: -147px; width: 90px; height: 90px; background: #4B2C71; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.cta-middle { padding: 80px 0!important; background-image: url("img/5-cta/bg_PC.png"); color: #fff; text-align: center; background-size:cover; }
.cta-middle__lead { font-size: 24px; font-weight: bold; margin-bottom: 15px; opacity: 0.9; letter-spacing: 0.05em; }
.cta-middle__title { font-size: 20px; line-height: 1.4; margin-bottom: 50px; text-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.cta-middle__btns { display: flex; justify-content: center; gap: 25px; }
.cta-middle__img img { height: 32px;  width: 25px; margin-right: 16px; }
.cta-middle__img_2 img { width: 32px; height: 24px; margin-right: 16px; }
.btn--white { background: #fff; color: #4B2C71; padding: 18px 50px; font-size: 16px; border: 2px solid #fff; transition: all 0.3s ease; display: flex; justify-content: center; align-items: center; }
.btn--white svg{ height: 32px;  width: 25px; margin-right: 16px; }
.btn--white:hover { background: #4B2C71; color: #fff; }

.achievements { padding: 100px 0; }
.achieve-card { max-width: 960px; width: 100%; margin: 0 auto 32px; }

.experts { background: #F8F4FF; }
.experts p { font-family: 'Noto Sans JP'; }
.experts__pillars { max-width: 760px; width: 100%; margin: 50px auto 80px; }
.experts__pillars img { width: 760px; }
.pillar { flex: 1; background: #fff; padding: 30px; border-radius: 10px; border-left: 5px solid #4B2C71; text-align: left; box-shadow: 0 5px 15px rgba(0,0,0,0.05); }

.domains__grid{ max-width: 1024px; width: 100%; gap: 32px; display: flex; margin: 0 auto;}
.domain-box img{ width: 496px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 20px; }
.tag-list span { background: #fff; padding: 8px 16px; border-radius: 4px; font-size: 13px; box-shadow: 0 2px 4px rgba(0,0,0,0.03); }

.plans__grid { max-width: 1024px; display: flex; gap: 32px; margin: 50px auto 0; }
.plan-txt { max-width: 1024px; margin: 16px auto 0; text-align: end; }
.plan-txt p { font-family: 'Noto Sans JP'; }
.plan-card { max-width: 320px; }
.plan-card__header { padding: 30px; text-align: center; color: #fff; background: #4B2C71; }
.plan-card__header img{ width: 36px; height: 36px;}
.plan-card__body { text-align: center; }

.security { background-color: rgba(154, 154, 154, 0.1);}
.security__grid { max-width: 1024px; gap: 32px; margin: 40px auto 32px; display: flex;}
.security-box { width: 496px; font-size: 14px; }
.security-box ul { background-color: #fff; list-style:none; padding:32px 24px; display:grid; grid-template-columns:1fr 1fr; text-align:left; gap:15px; }
.pmark-img { max-width: 1024px; width: 100%; margin: 0 auto; }
.pmark-img img { width: 100%; }

.download { padding:100px 0; background:#0D1078; color:#fff; }
.download-img { width: 280px; margin: 0 auto; }
.download-img img { width: 280px; }
.download-content { flex:1; }
.download-content p { text-align: center; }
.download-title { text-align: center; font-size:30px; margin-bottom:20px; }
.container.download__inner { display: flex; gap: 60px; }
.download-txt { width: 362px; margin: 32px auto; }
.download-txt h3 { font-size: 16px;  margin-bottom: 4px; font-family: 'Noto Sans JP';}
.download-txt p { text-align: left; font-family: 'Noto Sans JP';}

.form__agreement { text-align: center; margin: 30px 0; }
.form__agreement span { font-family: 'Noto Sans JP'; }
.form__policy-text { font-size: 14px; line-height: 1.6; margin-bottom: 15px; font-weight: bold; color: #000; font-family: 'Noto Sans JP'; }
.form__policy-link { text-decoration: underline; color: #000; }
.form__checkbox-label {display: flex;align-items: center;justify-content: center;gap: 10px;cursor: pointer;font-size: 16px;font-weight: bold;}
.form__checkbox-label input[type="checkbox"] { width: 20px; height: 20px; cursor: pointer; accent-color: #4B2C71; }

.footer { padding: 40px 0; background: #0D1078; color: #fff; border-top: 1px solid rgba(255,255,255,0.1); }
.footer__innner { display:flex; justify-content:space-between; align-items:center; }
.fotter-icon{ width: 16px; margin-left: 16px; margin-right: 8px; }
.footer_txt a{ color: #fff; }
.footer_pmark { margin-left: 16px; }
.footer_pmark img { width: 40px; }
.footer__innner span {
    font-family: 'Noto Sans JP'; 
}


.pc-only { display: block; }
.sp-only { display: none; }
/* --- レスポンシブ --- */


@media (max-width: 768px) {
    .header{ 
        height: 48px; 
        max-width: 343px;
        position: fixed;
        top: 16px;
        left: 50%;
        transform: translate(-50%, -100px);
        opacity: 0;
        visibility: hidden;
        transition: all 0.5s ease;
        z-index: 1000;
        width: calc(100% - 30px);
        max-width: 1160px;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        border-radius: 12px;
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
    .header.is-show {
        transform: translate(-50%, 0);
        opacity: 1;
        visibility: visible;
    }
    .hero-sp{ padding: 0!important; padding-bottom: 32px !important; background-image: url("img/1-fv/FV_SP.png"); background-size: cover; }
    section{ padding: 64px 0!important; }
    p { font-size: 14px; }
    .big{ font-size: 16px; }
    .small { font-size: 18px; font-family: 'Zen Old Mincho', serif !important; }
    .emphasis {color: #523482; background: linear-gradient(transparent 60%, #FFFFFF 60%); background-position: bottom; background-repeat: no-repeat; display: inline; font-weight: bold; font-family: 'Noto Sans JP'; }
    .hero__inner, .problem__grid, .achievements, .experts__pillars, .plans__grid { flex-direction: column; align-items: center; }
    .hero-btn { margin: 24px auto; }
    .section-title--underline { padding-top: 0; font-size: 20px; margin-bottom: 32px; }
    .section-title {font-size: 20px; }
    .problem-title{ font-size: 14px; }
    .problem{ clip-path: polygon(0 0, 100% 0, 100% 91%, 50% 100%, 0 91%); padding-bottom: 60px !important; }
    .problem .container { padding: 0 19px; }
    .problem__grid{ gap: 0; max-width: 343px; margin: 16px auto 0;}
    .problem__card { margin-bottom: 16px;  padding: 0; }
    .problem__card:nth-child(1) { margin-top: 24px; }
    .cta-middle__lead { font-size: 20px; }
    .features{ margin-top: -40px; padding: 0 0 64px!important; }
    .features_MV { margin: -50px auto 0; }
    .solution__diagram { margin: 0; }
    .reason-card__image { max-width: 312px; }
    .reason-card__content { max-width: 312px; padding: 0; margin: 0 auto; }
    .accordion__header { font-size: 16px; padding: 32px 16px; }
    .achieve-card, .achieve-card:nth-child(odd), .reason-card { flex-direction: column-reverse; padding: 0; text-align: center; }
    .achieve-card { max-width: 343px; }
    .achieve-card__image { max-width: 312px; margin-top: 24px; }
    .achieve-card__text{ padding: 16px 0; }
    .timeline { padding-left: 70px; margin-left: 20px; }
    .timeline__icon { left: -90px; width: 60px; height: 60px; font-size: 10px; }
    .logo { width: 96px; height:24px; }
    .pc-only { display: none; }
    .sp-only { display: block; }
    .menu-btn {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: 32px;
        height: 22px;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 2000;
        outline: none;
    }
    .cta-middle-btn {
        display: block;
    }
    .cta-middle-btn .btn{
        margin-bottom: 20px;
    }
    .menu-btn span {
        display: block;
        width: 100%;
        height: 3px;
        background-color: #4B2C71;
        border-radius: 10px;
        transition: all 0.3s ease;
    }
    .menu-btn.active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg);
    }
    .menu-btn.active span:nth-child(2) {
        opacity: 0;
    }
    .menu-btn.active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg);
    }
    .header__inner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .nav__list .sp-only a.btn--header {
        color: #ffffff !important;
        text-align: center;
        display: block;
        padding: 15px 0;
        margin-top: 10px;
    }
    .nav__list .sp-only a.btn--header:visited {
        color: #ffffff;
    }
    .menu-btn span {
        background-color: #4B2C71;
    }
    .nav {
        position: fixed;
        top: 48px;
        left: 0;
        width: 100%;
        height: calc(100vh - 80px);
        background: #fff;
        z-index: 1500;
        transform: scaleY(0);
        transform-origin: top;
        opacity: 0;
        visibility: hidden;
        transition: transform 0.4s ease, opacity 0.3s ease;
        padding: 28px 52px 130px;
    }
    .nav.active {
        transform: scaleY(1);
        opacity: 1;
        visibility: visible;
    }
    .header.active {
        border-radius: 0;
    }
    .nav__list {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }
    .nav__list .sp-only .btn {
        width: 100%;
        padding: 15px;
        font-size: 16px;
        border-radius: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
    }
    .menu-cta--white {
        background: #fff;
        color: #4B2C71;
        border: 1px solid #4B2C71;
    }
    .menu-cta--white img{
        width: 32px;
        height: 24px;
    }
    .menu-cta--purple {
        background: #4B2C71;
        color: #fff !important;
    }
    .menu-cta--purple img{
        width: 24px;
        height: 19px;
    }
    .menu-cta--contact {
        background: #5D438A;
        color: #fff !important;
        border: 1px solid rgba(255,255,255,0.2);
    }
    .nav__list li:not(.sp-only) {
        text-align: left;
        margin-top: 10px;
    }
    .nav__list a {
        font-size: 18px;
    }
    .active .accordion__content { 
        max-width: 600px;
        padding: 32px 0 0 0;
        margin: 0 auto;
    }
    .experts__pillars{
        margin: 50px auto 40px;
        max-width: 500px;
    }
    .cta-middle {
        padding: 40px 0 !important;
    }
    .cta-middle__title {
        font-size: 16px;
        margin-bottom: 35px;
    }
    .cta-middle__btns {
        flex-direction: column;
        gap: 15px;
        padding: 0 20px;
    }
    .cta-middle__btns .btn {
        width: 240px;
        height: 60px;
        margin: 0 auto;
        padding: 15px;
        font-size: 16px;
    }
    .container.download__inner { 
        display: block;
        gap: 60px; 
    }
    .experts_txt{
        width: 312px;
        margin: 0 auto;
    }
    .domains__grid{
        display: block;
        max-width: 343px;
    }
    .domain-box:nth-child(even) {
        margin-top: 32px;
    }
    .plan-txt{
        text-align: left;
        max-width: 343px;
    }
    .security__grid{
        display: block;
        max-width: 320px;
        width: 100%;
    }
    .security-box{
        width: 100%;
    }
    .security_txt{
        max-width: 455px;
        margin: 0 auto;
    }
    .security-box:nth-child(even) {
        margin-top: 32px;
    }
    .pmark-img {
        max-width: 320px; 
    }
    .download-title{
        font-size: 19px;
    }
    .download-txt h3 { 
        font-size: 16px;
    }
    .download-txt{
        width: 322px;
    }
    .footer_txt{
        font-size: 12px;
    }
    .footer__innner{
        align-items: end;
    }
    .fotter-icon{
        margin-left: 0;
    }
    .footer_pmark {
        margin-left: 8px; 
    }
    .footer_pmark img {
        width: 32px!important ; 
    }
    .features__inner { 
        max-width: 343px;
    }
    .accordion__img{
        max-width: 400px;
        margin: 0 auto;
    }
    .btn--white svg{ 
        height: 24px;  
        width: 19px;
    }
    .btn--hero svg{ 
        width: 24px; 
        height: 19px;
    }
}