@charset "UTF-8";
*{
	box-sizing: border-box;
}
html,body{
	margin: 0;
	padding: 0;
	height: 100%;
    line-height: 2.0rem;
    font-family: "KozGoPro-Light", "小塚ゴシック Pro L", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
    font-feature-settings: "palt";
    background-image:url('images/bg_main.png');
    background-size: cover;
    min-height:100vh;
    transform:translateY(-2px);
}
a{
	cursor: pointer;
	text-decoration: none;
}
ul{
	list-style:none;
}
h1,h2,h3,h4,h5,p{
    margin:0;
}
img{
    width:100%;
}
.main{
    /* max-width:1300px; */
    background-size: cover;
    margin:0 auto;
}
.container{
    max-width: 1200px;
    margin:0 auto;
}
@media screen and (min-width:630px){
    .sp{
        display:none;
    }
}
header{
    padding:30px 10px 20px 10px;
    display:flex;
    justify-content: space-between;
    border-bottom:1px dotted #eeeeee;
}
.header_logo{
    width:50%;
}
header img{
    width:30%;
}
@media screen and (max-width:630px){
    header{
        padding:40px 2vw 20px 2vw;
    }
}
.header_btn {
    margin-top: 20px;
    padding: 10px;
    text-align: center;
    color: #ffffff;
    width: 220px; /* 修正：ロゴが入る分、200pxから220pxに少し広げました */
    border-radius: 5px;
    background: linear-gradient(to bottom, #77DD77, #03C03C);
    box-shadow: 0 8px 20px rgba(60, 40, 20, 0.25); 
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px; /* ロゴと文字の間の隙間 */
}
.header_line_icon {
    width: 20px; /* ヘッダーに合わせて小さめに設定 */
    height: 20px;
    display: inline-flex;
    align-items: center;
}

.header_line_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.header_btn p {
    color: #ffffff;
    margin: 0;
    line-height: 1; /* 縦方向の中央に綺麗に揃えるためのリセット */
}
.header_btn p{
    color:#ffffff;
}
.fv_container{
    height:750px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.fv_text{
    padding-left:30px;
    width:50%;
    align-content: center;
}
.fv_text p, .fv_text h1, .fv_text h2{
    margin:10px auto;
    line-height:1.5;
}
.fv_txt_bluearia{
    color:#0543CC;
    background-color: #E4EFFE;
    padding:5px 10px;
    border-radius:10px;
    width:45%;
}
.fv_text h1{
    font-size:50px;
}
.fv_five{
    font-size:5rem;
    color:blue;
}
.fv_text h2{
    font-size:25px;
    color:darkblue;
}
.fv_bolet{
    width:100%;
    padding-top:20px;
}
.fv_btn{
    background-color:#FE674A;
    margin:20px;
    padding:15px;
    font-size:25px;
    text-align: center;
    color:#ffffff;
    /* width:200px; */
    border-radius: 5px;
}
.section_title{
    text-align: center;
    padding:30px 0;
    font-size:40px;
    font-weight:600;
    position: relative;
}
.section_title::after {
    content: "";
    position: absolute;
    left: 50%; /* 中央寄せ */
    bottom: 0; /* タイトルの下端 */
    transform: translateX(-50%); /* 中央寄せ */
    width: 60px; /* 線の幅 */
    height: 3px; /* 線の厚み */
    background-color: #007bff; /* 青色 */
    border-radius: 2px; /* 少し角丸 */
}
.subttl{
    text-align: center;
    padding:20px 0;
}
.problems{
    background-color: #F6F7FC;
    padding:50px;
}
.grid_6{
    display: flex;
    flex-wrap: wrap; /* 【追加】要素が親枠を超えたら折り返す */
    justify-content: space-around;
    text-align: center;
    gap: 20px 0;
}
.card{
    width:30%;
    border-radius:5px;
    box-shadow: 3px 3px 6px -2px #555,3px 3px 8px rgba(255,255,255,0.8) inset;
    background-color: #ffffff;
    padding:20px;
    height:250px;
}
.card img{
    width:30%;
}
.solve{
    color:#1242C0;
    margin:30px 0;
}
.reasons{
    background-image: url('img/bg_reasons.png');
    background-size:cover;
    padding:50px;
}
.reason_graph{
    text-align: center;
    margin:0 auto;
}
.reason_graph img{
    width:95%;
}
.grid_3{
    display: flex;
    flex-wrap: wrap; /* 【追加】要素が親枠を超えたら折り返す */
    justify-content: space-around;
    gap: 20px 0;
}
/* 差し替えここから */
.reason {
    width: 30%;
    border-radius: 5px;
    box-shadow: 3px 3px 6px -2px #555, 3px 3px 8px rgba(255,255,255,0.8) inset;
    background-color: #ffffff;
    padding: 20px;
    height: 250px;
    display: flex;
    flex-direction: column;  /* 【追加】アイコンとテキストを縦並びにする */
    align-items: center;     /* 【追加】横方向の中央に揃える */
    justify-content: center; /* 上下の中央に揃える */
    text-align: center;
    gap: 15px;               /* 【追加】アイコンとテキストの間に少し余白を作る */
}

/* 【追加】パソコン版でのアイコンサイズを適切な大きさに制限する */
.reason_icon img {
    width: 80px; /* ここを60px〜100pxくらいの間で変えると、好きな大きさに微調整できます */
    height: auto;
}
/* 差し替えここまで */
.adsta_choice{
    background-color: #F0F3F8;
    padding:50px;
}
.adsta_choice_ttl{
    display: flex;            /* 中身を横並びにする */
    align-items: center;      /* 縦方向の中央（センター）で揃える */
    justify-content: center;  /* 横方向の中央に配置する（左寄せにしたい場合は不要です） */
    font-weight: bold;        /* 文字の太さ（お好みで） */
}
.adsta_choice_logo{
    height: 100px;             
    width: auto;              /* 高さに合わせて横幅を自動調整 */
}
.adsta_reason{
    width:30%;
    border-radius:5px;
    box-shadow: 3px 3px 6px -2px #555,3px 3px 8px rgba(255,255,255,0.8) inset;
    background-color: #ffffff;
    padding:20px;
    height:500px;
}
.re_img{
    text-align: center;
    margin-top:30px;
}
.re_img img{
    width:70%;
}
.flow_comment{
    text-align: center;
    color: #2b5cdd; 
    padding:30px;
    margin: 0 auto;
}
.adsta_comment{
    text-align: center;
    color: #2b5cdd; 
    padding:30px;
    margin: 0 auto;
}
.flow_comment p,
.adsta_comment p {
    text-align: center;
    display: flex;
    align-items: center;      /* 縦方向の中央で揃える */
    color: #2b5cdd;           /* 文字の色（画像に近い青） */
    font-size: 18px;          /* 文字の大きさ */
    font-weight: bold;        /* 文字の太さ */
    margin: 0;
}
.adsta_comment p::before,
.adsta_comment p::after {
    content: "";
    flex-grow: 1;             /* 【重要】余ったスペースを埋めるように線を伸ばす */
    height: 1px;              /* 線の太さ */
    background-color: #2b5cdd; /* 線の色（文字と同じ青） */
}
.adsta_comment p::before {
    margin-right: 20px;       /* 左の線と文字の隙間 */
}
.adsta_comment p::after {
    margin-left: 20px;        /* 右の線と文字の隙間 */
}
.flow{
    background-image: url('img/bg_flow.png');
    padding:50px;
}
.flow_comment{
    text-align: center;
    color:#0450CF;
    padding:30px;
}
.voices{
    padding:50px 0;
}
.voice_card{
    width:30%;
    border-radius:5px;
    box-shadow: 3px 3px 6px -2px #555,3px 3px 8px rgba(255,255,255,0.8) inset;
    background-color: #ffffff;
    padding:20px;
    height:400px;
}
.voice_title{
    display: flex;
    justify-content: space-between;
    border-bottom:1px solid #efefef;
}
.voice_person_img{
    width:40%;
}
.voice_budge{
    background-color:blue;
    color:white;
    font-weight:bold;
    padding:5px 10px;
    border-radius:5px;
}
.voice_img img{
    width:10%;
    margin:10px;
}
.faq{
    background-color: #F6F7FD;
    padding:50px;
}
/* アコーディオン全体の大枠 */
.faq_item {
    border: 1px solid #e0e5f0; /* 少し青みがかった薄いグレーの枠線 */
    border-radius: 8px;        /* 角丸 */
    margin: 20px 0;
    background-color: #ffffff;
    overflow: hidden;          /* 中身がはみ出ないようにする（角丸を保つため） */
}

/* 質問部分（クリックするエリア） */
.faq_item summary {
    display: flex;
    align-items: center;
    padding: 20px;
    cursor: pointer;
    list-style: none; /* デフォルトの三角形マークを消す */
    font-weight: bold;
    position: relative;
}

/* Safariなどのデフォルト三角形マークを消す専用コード */
.faq_item summary::-webkit-details-marker {
    display: none;
}

/* ＝＝＝ 青い丸の「Q」アイコン ＝＝＝ */
.q_icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    background-color: #2b5cdd; /* 青色 */
    color: #ffffff;            /* 文字は白 */
    border-radius: 50%;        /* 真円にする */
    font-size: 18px;
    margin-right: 15px;        /* 右側のテキストとの隙間 */
    flex-shrink: 0;            /* 画面が狭くても丸が潰れないようにする */
}

/* 質問テキスト */
.q_text {
    flex-grow: 1; /* 余ったスペースを埋める（右端のアイコンを押し出す） */
    padding-right: 20px;
}

/* ＝＝＝ 右端の開閉アイコン（＋ / －） ＝＝＝ */
.toggle_icon {
    position: absolute;
    right: 25px;
    color: #2b5cdd; /* アイコンも青色 */
    font-size: 24px;
    font-weight: normal;
}

/* 閉じている時は「＋」を表示 */
.toggle_icon::before {
    content: "＋";
}

/* 開いている時（details[open]）は「－」を表示 */
details[open] summary .toggle_icon::before {
    content: "－";
}

/* ＝＝＝ 回答部分 ＝＝＝ */
.answer {
    border-top: 1px solid #e0e5f0;
    background-color: #f5f8ff; /* 薄い青色の背景 */
    padding: 25px 20px 25px 70px; /* 左側に余白を多めに取って「Q」テキストの位置と揃える */
    line-height: 1.8;
    color: #333;
}

/* === スマートフォン向け調整 === */
@media (max-width: 768px) {
    .faq_item summary {
        padding: 15px;
    }
    .answer {
        padding: 20px 15px 20px 15px; /* スマホではインデントをなくして読みやすくする */
    }
}
.cta-bottom{
    background-image: url('img/bg_ctabottom.png');
    background-size: cover;
    position: relative;
    padding: 80px 20px;
    text-align: center;
    overflow: hidden; /* 背景の装飾がはみ出ないようにする */
}
.cta_content {
    position: relative;
    z-index: 10;
    max-width: 800px;
    margin: 0 auto;
}

/* === タイトルと青い線 === */
.cta_title {
    font-size: 36px;
    font-weight: bold;
    color: #111;
    margin-bottom: 20px;
    position: relative; /* 青線の基準 */
    padding-bottom: 25px; /* 青線との余白 */
}

.cta_title::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #007bff; /* 青色 */
    border-radius: 2px;
}

/* サブテキスト */
.cta_desc {
    font-size: 16px;
    margin-bottom: 50px;
    color: #333;
}

/* === 白いプレゼントボックス === */
.present_box {
    background-color: #fff;
    color: #111;
    font-weight: bold;
    font-size: 20px;
    padding: 25px 40px;
    border-radius: 50px; /* カプセル型にする */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.04); /* 柔らかい影 */
    margin-bottom: 30px;
    display: inline-block;
    width: 100%;
    max-width: 600px;
}
.present_box p {
    margin: 0; /* デフォルトの余白を消す */
}

/* === オレンジのボタン === */
.cta_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* background: linear-gradient(to bottom, #02A646, #017831); */
    background: linear-gradient(to bottom, #77DD77, #03C03C);
    color: #fff;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    text-decoration: none; /* リンクの下線を消す */
    padding: 25px 40px;
    border-radius: 50px; /* カプセル型にする */
    box-shadow: 0 10px 25px rgba(60, 40, 20, 0.25);
    width: 100%;
    max-width: 600px;
    position: relative; /* 矢印の基準 */
    margin-bottom: 30px;
    transition: transform 0.2s, box-shadow 0.2s; /* ホバー時のアニメーション準備 */
}

/* マウスを乗せた時の動き（少し浮き上がる） */
.cta_btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 30px rgba(60, 40, 20, 0.35);
}

/* ボタン右端の矢印 */
.cta_btn .arrow {
    position: absolute;
    right: 30px; /* 右から30pxの位置に固定 */
    font-size: 24px;
}

/* 注釈テキスト */
.cta_note {
    font-size: 14px;
    color: #333;
    margin: 0;
}

.line_icon {
    position: absolute;
    left: 25px; /* 左端からの距離 */
    top: 50%;
    transform: translateY(-50%); /* 縦方向の中央に配置 */
    width: 50px; /* ロゴの大きさ（画像に合わせて調整してください） */
    height: 50px;
}

.line_icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* ボタン内のテキストの行間調整 */
.cta_btn p {
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

/* =========================================
   背景の幾何学模様（画像を使わずCSSで再現）
========================================= */
.bg_decor {
    position: absolute;
    z-index: 1; /* コンテンツの奥に配置 */
    pointer-events: none; /* クリックの邪魔にならないようにする */
}

/* 右側の大きな薄青い丸 */
.decor_circle_large {
    width: 450px;
    height: 450px;
    background-color: #e6edfa;
    border-radius: 50%;
    top: 20%;
    right: -150px;
}

/* 左下の枠線だけの丸 */
.decor_circle_outline {
    width: 70px;
    height: 70px;
    border: 3px solid #d8e3f9;
    border-radius: 50%;
    bottom: 120px;
    left: 8%;
}

/* 左下の三角形 */
.decor_triangle {
    width: 0;
    height: 0;
    border-left: 35px solid transparent;
    border-right: 35px solid transparent;
    border-bottom: 60px solid #d8e3f9;
    bottom: 30px;
    left: 15%;
    transform: rotate(15deg); /* 少し傾ける */
}

/* ドット柄（左上と右下） */
.decor_dots_top {
    top: 25%;
    left: 8%;
    width: 100px;
    height: 80px;
    background-image: radial-gradient(#c6d5f7 2.5px, transparent 2.5px);
    background-size: 18px 18px; /* ドットの間隔 */
}
.decor_dots_bottom {
    bottom: 12%;
    right: 8%;
    width: 100px;
    height: 80px;
    background-image: radial-gradient(#c6d5f7 2.5px, transparent 2.5px);
    background-size: 18px 18px;
}

/* === スマートフォン向け調整 === */
@media (max-width: 768px) {
    .cta_title { font-size: 24px; }
    .cta_desc { font-size: 14px; }
    .present_box, .cta_btn { font-size: 16px; padding: 20px; }
    .cta_btn .arrow { right: 20px; }
}
/* フッター全体 */
.site_footer {
    background-color: #041c3b; /* 濃いネイビー背景 */
    color: #ffffff;            /* 文字は白 */
    padding: 60px 20px 20px;   /* 上60px、左右下20pxの余白 */
}

/* フッターの中央寄せ用の枠 */
.footer_container {
    max-width: 1000px;
    margin: 0 auto;
}

/* 上部のメッセージ */
.footer_message {
    text-align: center;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 0.05em; /* 文字の間隔を少し開ける */
    margin-bottom: 80px;
}

/* 中部（ロゴとリンク）のレイアウト */
.footer_middle {
    display: flex;
    justify-content: space-between; /* 左右に端寄せして配置 */
    align-items: center;            /* 縦方向の中央を合わせる */
    margin-bottom: 20px;            /* 下の横線との余白 */
}

/* ロゴのサイズ調整 */
.footer_logo img {
    height: 100px; /* 実際のロゴ画像に合わせて数値を変更してください */
    width: auto;
}

/* リンクメニュー */
.footer_links {
    display: flex;
    list-style: none; /* リストの「・」を消す */
    padding: 0;
    margin: 0;
    align-items: center;
}

.footer_links li {
    display: flex;
    align-items: center;
}

/* リンク間の「縦線」を疑似要素で作成 */
.footer_links li:first-child::after {
    content: "";
    display: inline-block;
    width: 1px;               /* 線の太さ */
    height: 14px;             /* 線の長さ */
    background-color: rgba(255, 255, 255, 0.4); /* 半透明の白線 */
    margin: 0 20px;           /* 線の左右の余白 */
}

.footer_links a {
    color: #ffffff;
    text-decoration: none; /* リンクの下線を消す */
    font-size: 14px;
    opacity: 0.9;
}

.footer_links a:hover {
    opacity: 1;
    text-decoration: underline; /* マウスを乗せたら下線を出す */
}

/* 下部（横線とコピーライト） */
.footer_bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.3); /* 半透明の横の区切り線 */
    padding-top: 20px; /* 横線と文字の間の余白 */
    text-align: center;
}

.copyright {
    font-size: 14px;
    opacity: 0.8;
    margin: 0;
}

/* === スマートフォン向け調整 === */
@media (max-width: 768px) {
    .footer_message {
        font-size: 22px;
        margin-bottom: 50px;
    }

    .footer_middle {
        flex-direction: column; /* 横並びから縦並びに変更 */
        gap: 30px;              /* ロゴとリンクの間の余白 */
    }

    .footer_links li:first-child::after {
        margin: 0 15px; /* スマホ時は縦線の左右余白を少し詰める */
    }
}
/* =========================================
   レスポンシブ対応（スマートフォン向け）
   画面幅768px以下の時に適用されるスタイル
========================================= */
@media screen and (max-width: 768px) {
    /* ------------------------------
       全体共通
    ------------------------------ */
    .section_title {
        font-size: 6.5vw; /* 画面幅に合わせて美しく拡縮 */
        padding: 20px 0;
        line-height: 1.4; /* 2行になっても読みやすい行間 */
    }
    
    .subttl {
        padding: 10px 0 30px;
        font-size: 3.5vw; /* 本文より少し小さめ */
        text-align: left;
    }

    .problems, .reasons, .adsta_choice, .flow, .voices, .faq {
        padding: 40px 20px;
    }

    /* ------------------------------
       ヘッダー
    ------------------------------ */
    header img {
        width: 80%;
        max-width: 150px;
    }
    .header_btn {
        width: 40vw; /* 文字とロゴが収まるよう、35vwから40vwに少し広げます */
        max-width: 160px; /* max-widthも150pxから160pxへ */
        font-size: 3.5vw;
        padding: 10px 5px; /* 左右の余白を少し詰めまています */
        margin-top: 10px;
        gap: 4px; /* スマホではロゴと文字の隙間を狭くします */
    }
    
    /* 【追記】スマホ時のヘッダーロゴサイズ */
    .header_line_icon {
        width: 16px;
        height: 16px;
    }

    /* ------------------------------
       ファーストビュー（FV）
    ------------------------------ */
    .fv_container {
        height: auto;
        flex-direction: column; 
        padding: 30px 15px;
    }

    .fv_left, .fv_text {
        width: 100%;
        padding-left: 0;
    }

    .fv_left {
        margin-bottom: 20px;
    }

    .fv_text h1 {
        font-size: 7.5vw; /* メインコピーを大きく */
        line-height: 1.4;
    }

    .fv_five {
        font-size: 13vw;
    }

    .fv_text h2 {
        font-size: 4.5vw;
    }

    .fv_txt_bluearia {
        width: 100%;
        text-align: center;
        font-size: 3.5vw;
    }

    .fv_btn {
        font-size: 5vw;
        padding: 15px;
        margin: 20px 0;
    }

    /* ------------------------------
       受講者の声セクション（スマホ表示の微調整）
    ------------------------------ */
    .voice_person_img {
        width: 30%; /* 【修正】画像の幅を40%→30%に小さくし、文字スペースを広げる */
    }
    
    .voice_ttl {
        width: 65%; /* 右側のテキストエリアをしっかり確保する */
    }

    .voice_ttl p {
        font-size: 3.5vw; /* 名前や肩書きの文字サイズ */
    }

    .voice_budge {
        display: inline-block; /* 文字の長さに合わせて青い背景枠をフィットさせる */
        margin-top: 5px;
    }

    .voice_budge p {
        font-size: 3vw;        /* スマホ画面に合わせて文字を少し小さく */
        white-space: nowrap;   /* 【魔法のコード】絶対に改行させない */
    }

    /* ------------------------------
       カード部分を確実に1カラムに
    ------------------------------ */
    .grid_6, .grid_3 {
        flex-direction: column;
        align-items: center;
    }

    .card, .reason, .adsta_reason, .voice_card {
        width: 100%;
        height: auto;
        margin-bottom: 20px;
    }

    .cta_btn .line_icon {
        width: 35px;
        height: 35px;
        left: 15px; /* スマホでは左端の余白を少し狭くする */
    }

}