/* グローバル共通値 */
:root {
    --main_color:#DCF3FF;
    --sub_color:#4476BB;
    --accent_color:#FF8047;
    --title_font_size:clamp(24px,3vw, 32px);
    --main_font_size:clamp(16px,3vw, 24px);
    --sub_font_size:clamp(8px, 3vw, 16px);
}
body {
    font-family: "Noto Sans JP", sans-serif;
    color:#404040;
  }

ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
a {
    color: inherit; 
    text-decoration: none;
}
 /* 共通コンテナ */
.container{
    width: 100%;
    margin: 0 auto; 
    padding: clamp(10px, 5vw, 40px) clamp(20px, 5vw, 300px); /* 全てのコンテナに余白を統一 */
    box-sizing: border-box;
}
header {
    position: sticky;
    top: 0;
    z-index: 1100;
    background-color: #fff;
}
.flex{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
}

/* 固定ヘッダーの高さぶんオフセットする */
section {
    scroll-margin-top: clamp(20px, 15vw, 160px); /* ←ヘッダーの高さに合わせて */
}


/* =========================
  ヘッダー
========================= */
.header_container{
    width: 100%;
    margin: 0 auto;
    padding: clamp(8px, 5vw, 16px) clamp(20px, 15vw, 160px);   /* 全てのコンテナに余白を統一 */
    box-sizing: border-box;
    box-shadow: 0 4px 6px -2px rgba(0, 0, 0, 0.2); /* ← 下方向に影 */
}
.header_logo img{
    width: clamp(20px, 15vw, 130px);
    height: auto;    /* 縦横比を維持して高さを自動調整 */
    display: block;  /* 余計な隙間をなくす（任意） */
}
.header_menu.flex {
    display: flex;
    gap: 5px;                  /* ボタン間の間隔（お好みで） */
    align-items: center;       /* 子の高さを揃えやすくする */
    padding: 0;
    margin: 0;
}
.header_menu.flex > li {
    flex: 1 1 0;                /* 各項目が同じ幅に伸びる */
    text-align: center;
}
/* ボタン共通：同幅・同高さ・中央揃え・改行禁止 */
.header_menu.flex .headerbtn,
.header_menu.flex .headerbtn_contact {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: clamp(42px, 5vw, 44px);         /* 高さを揃える（必要なら 44〜52px 程度で調整） */
  padding:clamp(6px, 1vw, 12px) clamp(8px, 1vw, 24px);       /*強すぎると折れるので控えめに */
  white-space: nowrap;      /* ★ 1行に固定（改行させない） */
  line-height: 1.2;
  text-align: center;
}
.header_menu li .headerbtn{
    border: 3px solid var(--accent_color);
    cursor:pointer;   
    color:#ffff; 
    background-color: var(--accent_color);
    font-size: clamp(8px, 2.5vw, 16px);
}
.header_menu li .headerbtn:hover {
    border:3px solid var(--accent_color);
    color:var(--accent_color);      
    background-color: #fff; 
    transition:.3s;
}
.header_menu li .headerbtn_contact{
    border: 3px solid var(--sub_color);
    cursor:pointer;
    color:var(--sub_color); 
    background-color: #fff;
    font-size: clamp(8px, 2.5vw, 16px);
}
.header_menu li .headerbtn_contact:hover {
    border:3px solid var(--sub_color);
    color:#fff;      
    background-color: var(--sub_color); 
    transition:.3s;
}
.header_menu li{
    margin-left: 40px;
    font-weight: bold;
}
.header_menu li a{
    transition:.3s;
    font-size: clamp(8px, 2.5vw, 16px);
}
.header_menu li a:hover{
    color:var(--sub_color);
    transition:.3s;
}
  

/* =========================
  hero
========================= */
#hero {
    position: relative;
    overflow: hidden;
    isolation: isolate ;
    min-height: 100vh;
  }
.hero_container{
    width: 100%;
    margin: 0 auto;
    background-color:#0F2A4A;
} 
/* 背景レイヤー（全面に配置） */
.hero_bg {
    position: absolute;
    inset: 0;                     /* top/right/bottom/left: 0 で全面 */
    z-index: 0;                   /* コンテンツより背面 */
    opacity: 0;                   /* 初期は非表示 */
    transition: opacity 2s ease;/* ← 文字と同じフェード時間に合わせる */
    pointer-events: none;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
} 
/* 表示中の背景だけ見せる */
.hero_bg.is-active {
    opacity: 1;
}

.hero_inner{
    position: relative ;
    z-index: 10;
    width:100%;
    text-align: left;
    margin-inline: auto;
    /* コンテナ中央に寄せて最大幅を制限（大画面で間延びしない） */
    max-width: 1200px;
    padding: clamp(50px, 5vw, 160px) 0;   /* 全てのコンテナに余白を統一 */
    gap: clamp(10px, 5vw, 40px) 0;  
}

/* 左：テキスト＋右：画像の二分割（PC） */
.hero_main {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* テキストやや広め */
    gap: clamp(16px, 4vw, 48px);
    align-items: center;
    padding:clamp(10px, 2vw, 40px);
}
.hero_title {
    display: flex;
    flex-direction: column; /* 縦に並べる */
    gap:clamp(8px, 3vw, 16px);/* 間隔を調整 */
    align-items: flex-start; /* 子が横に伸びない */
}
.enterprises-system{
    font-weight: bold;
    color:#fff;
    border: 2px solid #fff;
    font-size: var(--sub_font_size);
} 
.hero_maintitle{
    font-size: clamp(32px, 5vw, 64px); 
}
.hero_subtitle{
    font-size: clamp(15px, 2.5vw, 24px);
    white-space: nowrap;
}
.hero_maintitle .slide-text,.hero_subtitle .slide-text{  
    display: inline-block;
    white-space: nowrap;
    font-weight: bold;
    color:#fff;
}
.fade{
    opacity: 1;
    transition: opacity 2s ease; /* フェードの滑らかさ */
    will-change: opacity;           /* パフォーマンス補助（任意） */
}
/* 画像を親要素の幅にフィットさせる */
.pc_img {
    display: block;       /* 余計な隙間を防ぐ */
    max-width: 100%;      /* 親の幅を超えない */
    height: auto;         /* 縦横比を維持して縮小 */
    z-index: 10;
    /* 画像フェード */
    opacity: 0; /*最初は非表示*/
    transition: opacity 2s ease; /* 背景・文字のフェード時間(2s)に合わせる */   
}
/*ボタン*/
.btn-group{
    position: relative;
    z-index: 11;  
    display: flex;
    justify-content: center; /* 横並びを中央寄せ */
    gap: 24px;               /* ボタン同士の間隔 */
    padding: clamp(10px, 2vw, 40px);
    margin:clamp(8px, 2vw, 16px);
    z-index: 11; 
}

.btn-group li{
    flex: 1;
}
.btn-hero{
    display:flex;
    flex-direction: column; /*要素を縦方向に並べる*/
    justify-content:center;
    align-items:center;
    padding:clamp(8px, 2vw,16px) clamp(8px, 2vw,32px);
    gap:4px;
}
.btn-hero span:first-child{
    font-size: clamp(8px, 2vw, 16px);
}

.btn-hero span:last-child{
    font-size: clamp(12px, 4vw, 24px);
}
.btn-download{
    border:3px solid var(--accent_color);
    color: #fff;
    background-color: var(--accent_color);
    font-weight: bold;
    cursor:pointer;
}
.btn-download:hover {
    border:3px solid var(--accent_color);
    color:var(--accent_color);       
    background-color: #fff;
    transition:.3s; 
}
.btn-contact{
    color: var(--sub_color);
    background-color: #fff;
    border:2px solid var(--sub_color);
    font-weight: bold;
    cursor:pointer;
}
.btn-contact:hover{
    border:3px solid #fff;
    color: #fff;       
    background-color: var(--sub_color); 
    transition:.3s;
}
/* =========================
  product
========================= */
.title{
    font-size: var(--title_font_size);
    font-weight: bold;
    text-align:center;
    position: relative;
}
.color-change{
    color:var(--sub_color);
}
.color-change-A{
    color:var(--accent_color);
}
/* 下のライン */
.title::after {
    content: "";
    display: block;
    width: 40px;          /* ラインの長さ */
    height: 3px;          /* ラインの太さ */
    background-color: var(--sub_color); /* ライン */
    margin: 16px auto 0; /* 中央寄せ */
}
#product{
    background-color: #f2fbff;
}
.introduction{
    font-size: var(--main_font_size);
    font-weight: bold;
    text-align:center;
    position: relative;
    padding:clamp(8px, 2vw, 16px);
}
.highlight {
  display: inline;
  background: linear-gradient(transparent 80%, var(--accent_color) 60%);
}
.flow-img{       
    width: clamp(240px, 50vw, 420px);
    height: auto;    /* 縦横比を維持して高さを自動調整 */
    display: block;  /* 余計な隙間をなくす（任意） */
}
.merit-list ul{
    list-style: disc;               /* 復活（discでもOK、::markerで上書きする） */
    list-style-position: outside;   /* 折り返しがきれいに揃う */
    padding-left: 1.25em;           /* 左の余白（お好みで調整） */
    margin: 0;   
}
.merit-list li::marker {
    content: "●";
    color: var(--sub_color, #4476BB);
    font-weight: 700;
    font-size: 1.1em;
}

/* =========================
  function
========================= */
#function{
    margin-top:16px;
}
.function-title {
  display: table;       /* 横幅を文字＋ラインに合わせる */
  background-color: var(--main_color);   /* 背景色を全体に付ける */
  padding: clamp(6px, 4vw, 16px) clamp(8px, 1vw, 16px);
  margin: 0 auto;              /* 中央寄せ */

}
.step{
    position: relative;
    background-color: var(--main_color);;
    font-weight: bold;
}
.step-header {
    display: inline-block;
    padding: 16px 32px;
    background: linear-gradient(to right,#8CB9DA,var(--sub_color));
    color: #fff;
    clip-path: polygon(20px 0, 100% 0, calc(100% - 20px) 100%, 0 100%);
}
.step-badge,.step-title {
    display: inline-block; /* 横並びにする */
    margin-right:8px;     /* 適度な間隔 */
}
.step-badge span,.step-title,.step-content,.lead  {
    font-size: var(--main_font_size);
}

/* セクションのボディを2列に固定（どのSTEPでも同じ列定義） */
.step-body {
    align-items: center;
    background: #F9FDFF; 
    display: grid;
    grid-template-columns: 1fr 3fr; /* 左:画像 固定 / 右:文字 可変 */
    align-items: center;  /* 画像と文字の縦位置をそろえる（上揃えなら flex-start） */
    padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 160px) ;
    column-gap: clamp(36px, 10vw, 72px);
    max-width: 1400px;  
    margin-inline: auto; 
    border: 1px solid var(--sub_color);      /*全体の枠線*/ 
    border-left: 16px solid var(--accent_color); /*左側だけ太く＆色変更*/
}
.step-content .benefits,.step-badge{
    font-size: var(--sub_font_size);
}
.lead{
    margin-bottom:clamp(8px, 4vw, 32px);
    letter-spacing: 0.1em;
}
.benefits{
    list-style: disc;               /* 復活（discでもOK、::markerで上書きする） */
    list-style-position: outside;   /* 折り返しがきれいに揃う */
    padding-left: 1.25em;           /* 左の余白（お好みで調整） */
    margin: 0;   
}
.benefits li::marker {
    content: "✓ ";
    color: var(--sub_color, #4476BB);
    font-weight: 700;
    font-size: 1.1em;
}
.benefits li{
    margin-bottom:5px;
}
.step-icon {
    place-self: center;
    display: flex;
    justify-content: center; /* 画像を列の中央に置く（左寄せなら flex-start） */
    align-items: center;
    min-height: 80px; /* 画像の高さ上限（揃える） */
    width:clamp(72px, 20vw, 190px);
}
/* 画像サイズの統一（もう揃っているとのことですがCSSでも再保証） */
.step-icon img {
    max-width: 100%;            /* 列幅に合わせる */
    height: auto;
    width: auto;
    object-fit: contain;         /* はみ出さず収める */
    display: block;              /* 画像の下の余白対策 */
}
.triangle-down {
    width: 0;
    height: 0;
    margin: clamp(8px, 2vw, 12px) auto; /* 中央に配置 */
    border-left: clamp(20px, 5vw, 30px) solid transparent;
    border-right: clamp(20px, 5vw, 30px) solid transparent;
    border-top: clamp(20px, 5vw, 30px) solid var(--sub_color); /* 三角形の色 */
}

/* =========================
  voice
========================= */
#voice{
    padding-bottom:80px
}
.voice-body{
    display: flex;              /* 横並びにする */
    justify-content: center;    /* 横方向の中央ぞろえ */
    align-items: center;        /* 縦方向の中央ぞろえ */
    gap: clamp(8px, 10vw, 80px);
    padding: clamp(20px, 4vw, 32px) clamp(20px, 4vw, 36px);
    letter-spacing: 0.1em; 
    border: 16px solid var(--main_color); ;
    background-color: #fff;
    font-weight: bold;
}
.voice-profile {
    display: flex;
    flex-direction: column;   /* 縦並び */
    align-items: center;      /* 横方向の中央揃え */
    justify-content: center;  /* 必要なら縦方向も中央揃え */
    text-align: center;       /* テキストを中央寄せ */
    gap: 8px;                 /* 画像とテキストの間隔（任意） */
} 
.voice-content{   
   text-align: center;
}

.voice-content .voice-sub {
    text-align: left;       /* テキストを左寄せ */
    display: inline-block;  /* 親の text-align の影響で真ん中に来るのを防げる場合あり */
    line-height: 1.6;
}
  
/* voice-content の直下の子に適用（タイトル・本文・ボタン間） */
.voice-content > * + * {
    margin-top: clamp(12px, 2.5vw, 36px);
}

.voice-title{
    font-size: var(--main_font_size);
}
.voice-name,.voice-sub{
    font-size: var(--sub_font_size);
}
.responsive-img{       
    width: clamp(100px, 20vw, 240px);
    height: auto;    /* 縦横比を維持して高さを自動調整 */
    display: block;  /* 余計な隙間をなくす（任意） */
}
.btn-more{
    color: #fff;
    border:3px solid var(--sub_color);
    background-color: var(--sub_color);
    font-weight: bold; 
    font-size: var(--sub_font_size);
}
.btn-more:hover{
    border:3px solid var(--sub_color);
    color: var(--sub_color);     
    background-color: #fff; 
    transition:.3s;    
}
.voice-name {
    display: flex;
    align-items: center; /* 縦位置そろえ */
    gap: clamp(1px, 1vw, 8px);           /* 文字とアイコンの間隔（任意） */
}
.ico_go{
    width: clamp(6px, 3vw, 20px);
    margin-left: 6px
}
/* 横並びにする */
.row{
    display: flex;              /* 横並びにする */
    justify-content: center;    /* 横方向の中央ぞろえ */
    align-items: center;        /* 縦方向の中央ぞろえ */
    gap:clamp(16px, 5vw, 48px);
    padding: clamp(20px, 4vw, 32px) 0;
}
.merit-list li{
    font-size:var(--sub_font_size);
    line-height: 1.6; /* 行間（文字の行高さ） */
    margin-bottom: clamp(8px, 2vw, 12px);
    font-weight: bold;
}

/* =========================
  FAQ
========================= */
#FAQ{
    background-color: var(--main_color);
    padding: 3px 0;
}
#FAQ .title{
    margin-bottom:0;
}
.FAQ-body{
    background-color: var(--main_color);
}
.FAQ-content{   
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 4vw, 40px);
}
.FAQ-section{
    background: #ffff;
    line-height:clamp(20px, 4vw,40px) ;
    font-weight: bold;
    font-size: var(--sub_font_size);
}
.FAQ-section .question,.answer {
   padding:5px 10px 5px 10px;
}

.FAQ-section{
    list-style-position: outside;   /* 折り返しがきれいに揃う */
    margin: 0;   
}
  
.question::before {
    content: "Q";
    color: var(--sub_color, #4476BB);
    font-weight: 700;
    font-size: 1.1em;
}
 .answer::before {
    content: "A";
    color: var(--accent_color);
    font-weight: 700;
    font-size: 1.1em;
}
  
 
/* =========================
  CONTACT
========================= */
.logo{
    display: flex;
    justify-content: center; /* 水平中央 */
    align-items: center;      /* 垂直中央 */
}
.logo img{
    width: clamp(50px, 25vw,320px);
    height: auto;    /* 縦横比を維持して高さを自動調整 */
    display: block;  /* 余計な隙間をなくす（任意） */
}

/* PCでは改行タグを無効化 */
.sp-break {
    display: none;
}
.sp-break-tb{
    display: none;
}

@media (min-width: 1440px) {
    .container{
        padding: clamp(10px, 5vw, 40px) 240px; 
    }
}
@media (min-width: 1900px) {
    .container{
        padding: clamp(10px, 5vw, 40px) 400px; 
    }
}

/* =========================
   Tablet（1024px以下）
========================= */
@media (max-width: 1024px) {
 
    .header_menu li {
        margin-left: 24px;
    }
    .logo {
        font-size: 28px;
    }
    /*縦並び*/
    #voice .voice-body,#product .orizon-merit{
        flex-direction: column;
        align-items: center;
        gap:16px;
    }
    .hero_main{
        grid-template-columns: 1fr;
        justify-items: center;   /* セル内の水平中央 */
        align-items: center;     /* セル内の垂直中央（内容に応じて） */
        text-align: center;      /* テキスト要素の水平中央 */
        gap: clamp(16px, 6vw, 32px);  
    }
    /* 2) テキストブロックはフレックスの中央寄せに切り替え */
    .hero_title {
        align-items: center; /* フレックス軸の中央寄せ */
    }
      /* 3) nowrap を解除して、はみ出し防止＋中央寄せが効くように */
    .hero_subtitle,
    .hero_maintitle .slide-text,
    .hero_subtitle .slide-text {
        white-space: normal;       /* ← nowrap を解除 */
    }
  
    .hero_maintitle {
        font-size: clamp(28px, 5.5vw, 56px); /* 少し下げる*/
        text-align: center;                   /* 中央寄せ */
    }
    .hero_subtitle {
        font-size: clamp(14px, 3.5vw, 22px);
        text-align: center;
    }
    .btn-group{
        flex-direction: column;
        gap: 16px;
    }
    .btn-group li{
        max-width: 100%;
    }

    /*縦並び*/
    #function .step-body,#voice .voice-body,#product .orizon-merit{
        display: flex; 
        flex-direction: column;
        align-items: center;
    }
    .step-content .lead {
        text-align: center;
    } 
    .sp-break-tb {
        display: inline;
    }  

}

/* =========================
   Mobile（768px以下）
========================= */
@media (max-width: 768px){
/* =========================
  ヘッダー
========================= */
    /* ナビ */
    .header_menu {
        margin-left: 1px;
        gap: 8px;
    }
    .header_menu li {
        margin-left: 0;
        text-align: center;
    }
    /* CTAボタンを横幅いっぱい */
    .header_menu li .headerbtn {
        display: inline-block;
        width: 100%;
        max-width: 240px;
        text-align: center;
    }
    .sp-break {
        display: inline;
    }
         
}