@charset "utf-8";

/* --- 0. 全体調整 --- */
html {
    scroll-behavior: smooth;
    /* 固定ヘッダーの高さ分、スクロール位置をずらす設定 */
    scroll-padding-top: 80px; 
}
@media (max-width: 767px) {
    html { scroll-padding-top: 100px; }
}

/* --- 1. 基本設定 --- */
*, *::before, *::after { box-sizing: border-box; }
body { 
    margin: 0; 
    padding: 0; 
    font-family: "Noto Serif JP", serif; 
    font-weight: 400; 
    color: #000; 
    line-height: 1.6; 
    overflow-x: hidden; 
}

.gothic { 
    font-family: "Noto Sans JP", sans-serif; 
    font-weight: 700; 
}

/* --- 2. 表示切り替え --- */
.pc-view { display: block !important; }
.sp-view { display: none !important; }
@media (max-width: 767px) {
    .pc-view { display: none !important; }
    .sp-view { display: block !important; }
}

/* --- 3. メインビジュアル --- */
.mv { width: 100%; background-color: #ebf7fe; }
.mv img { width: 100%; height: auto; display: block; }

/* --- 4. 背景グラデーション --- */
.bg-yellow-grad-bottom { background: #FFF100; background: linear-gradient(to bottom, #FFF100 80%, #ffffff 100%); }
.bg-yellow-grad-both { background: #FFF100; background: linear-gradient(to bottom, #ffffff 0%, #FFF100 5%, #FFF100 95%, #ffffff 100%); }
.bg-yellow-grad-top { height: 120px; background: linear-gradient(to bottom, #ffffff 0%, #FFF100 100%); }

/* --- 5. コンテナ・共通余白 --- */
.container { max-width: 1100px; margin: 0 auto; padding: 0 40px; position: relative; }
.section-padding { padding: 100px 0; }
.space-top-60 { margin-top: 60px; }

.space-top-60_s { margin-top: 60px; }
@media (max-width: 767px) { 
    .space-top-60_s { margin-top: 0px; }
}

.space-top-40_s { margin-top: 40px; }
@media (max-width: 767px) { 
    .space-top-40_s { margin-top: 20px; }
}
.space-top-0 { margin-top: 0px; }

/* --- 6. グローバルナビゲーション（固定） --- */
.global-nav {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #FFF100;
    width: 100%;
}
.nav-inner {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 40px;
}
.nav-list {
    display: flex;
    justify-content: space-evenly;
    list-style: none;
    margin: 0;
    padding: 0;
}
.nav-list li a {
    display: block;
    padding: 18px 20px;
    font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
    font-size: 1rem;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

/* ホバー時、およびJavaScriptで付与されるactiveクラスに対して下線を表示 */
.nav-list li a:hover,
.nav-list li a.active {
    text-decoration: underline;
    text-underline-offset: 5px;
}

/* PC用：メニュー全体のどこかにマウスが乗っている時は、active項目の線を一旦消す（ホバー優先にするため） */
@media (min-width: 768px) {
    .nav-list:hover li a.active {
        text-decoration: none;
    }
    /* ただし、active項目そのものにマウスが乗っている場合は再度表示する */
    .nav-list:hover li a.active:hover {
        text-decoration: underline;
    }
}

/* スマホ用メニュー：等間隔にせず、横にスペースを空けて中央寄せ */
@media (max-width: 767px) {
    .nav-inner { padding: 0 10px; }
    .nav-list {
        flex-wrap: wrap;
        justify-content: center;
        padding: 10px 0;
        /*gap: 0 40px;*/
        /* gap: 0 30px;*/
		 gap: 0 20px;
    }
    .nav-list li {
        width: auto;
    }
    .nav-list li a {
        padding: 8px 5px;
        font-size: 0.85rem;
    }
}

/* --- 7. 固定LINEボタン --- */
.fixed-line-container {
    position: fixed; 
    right: calc(50% - 550px); 
    bottom: 50px; 
    z-index: 10000;
}
@media (max-width: 1200px) { .fixed-line-container { right: 20px; } }
@media (max-width: 767px) { 
    .fixed-line-container { bottom: 20px; right: 10px; } 
    .fixed-line-container img { width: 180px; }
}
.fixed-line-container img { width: 300px; height: auto; display: block; }
@media (min-width: 768px) {
    .fixed-line-container img { image-rendering: -webkit-optimize-contrast; }
}

/* --- 8. 各コンテンツの配置調整 --- */
.intro-inner { max-width: 740px; margin: 0 auto; text-align: left; }
.headline-40-pc { max-width: 740px; margin-left: 0; }
.lead-text { font-size: 2rem; line-height: 1.4; margin-bottom: 10px; }
.note { font-size: 1.1rem; font-weight: bold; }
@media (max-width: 767px) { .note { font-size: 0.9rem; } }
    
.company-names { font-size: 1.8rem; display: inline-block; line-height: 1.4; margin-bottom: 0px;}

.flex-layout { display: flex; justify-content: space-between; align-items: flex-start; }
.side-title-area { width: 30%; }
.content-area { width: 65%; }
.section-title { font-size: 2.2rem; margin: 0; line-height: 1.2; }

/*.tile-grid { 
 display: grid; 
 grid-template-columns: 1fr 1fr; 
 gap: 20px; }
*/
.tile-grid { display: grid; grid-template-columns: 1fr;}
.p-card { background-color: #FFF100; padding: 15px 25px; border-radius: 2px; }
.p-card h3 { margin: 0 0 10px; font-size: 1rem; }
.p-card p { margin: 0; font-size: 0.9rem; }
.p-card span.cap { font-size: 0.8rem; }
@media (max-width: 767px) { 
	.p-card p { font-size: 0.8rem; } 
	.p-card span.cap { font-size: 0.7rem; } 
}
.and-more { margin-top: 15px; }

.recommend-footer-inner { max-width: 740px; margin: 0 auto; }
.check-list { list-style: none; padding: 0; font-weight: bold; font-size: 1.6rem; margin-top: 0px; }
@media (max-width: 767px) { .check-list{ font-size: 1rem; } }
.check-list li::before { content: "・"; }

.schedule-item { display: flex; margin-bottom: 30px; }
.sch-time { width: 160px; flex-shrink: 0; font-size: 1.5rem; }
.sch-content { font-size: 1.5rem; }
.sch-sub { font-size: 1.1rem; display: block; margin-top: 5px; }
    
@media (max-width: 767px) {
    .sch-time { width: 120px; font-size: 1rem; }
    .sch-content { font-size: 1rem; }
    .sch-sub { font-size: 0.9rem; }
}

.prize-text-inner { text-align: left; max-width: 740px; margin: 0 auto; font-weight: bold; font-size: 1.5rem; }
@media (max-width: 767px) { .prize-text-inner { font-size: 1.1rem; } }

.info-wrapper-left { text-align: left; }
.info-title-left { font-size: 2.2rem; margin-bottom: 0px; }
.info-row { display: flex; margin-bottom: 10px; font-size: 1rem; font-weight: bold; }
.info-label { width: 70px; }
.info-note-left { margin-top: 0px; font-weight: bold; font-size: 1rem; }

/* --- 9. フッター --- */
.footer-area { background-color: #FFF100; padding: 0px 0 80px; text-align: center; }
.copyright { font-size: 0.85rem; margin: 0; font-weight: bold; }
@media screen and (max-width: 480px) { .copyright { font-size: 2.5vw; white-space: nowrap; } }

/* --- 10. レスポンシブ (SP) その他 --- */
@media (max-width: 767px) {
    .section-padding { padding: 60px 0; }
    .intro.section-padding { 
		/*padding-top: 40px !important;*/
		padding-top: 20px !important;
	}
    .container { padding: 0 20px; }
    .flex-layout { flex-direction: column; }
    .side-title-area, .content-area { width: 100%; }
    .section-title { text-align: left; margin-bottom: 30px; font-size: 1.8rem; }
    .tile-grid { grid-template-columns: 1fr; }
    .lead-text { font-size: 1.2rem; }
    .company-names { font-size: 1.1rem; }
    .footer-area { padding: 40px 0 60px; }
    .info-title-left { font-size: 1.5rem; white-space: nowrap; }
}

/* --- 11. 画像の設定（にじみ対策） --- */
img { max-width: 100%; height: auto; display: block; margin: 0 auto; -ms-interpolation-mode: bicubic; }
@media (min-width: 768px) {
    .mv img, .headline-40-pc, .recommend-img-pc, .prize-img-pc, .fixed-line-container img {
        image-rendering: -webkit-optimize-contrast;
        transform: translateZ(0); 
        backface-visibility: hidden;
    }
}

.headline-40-pc { max-width: 740px; margin-left: 0; }
.recommend-img-pc { max-width: 740px; }
    
@media (min-width: 768px) {
    .prize-img-headline-wrap{ width:740px; margin:0px auto; }
    .prize-img-pc { max-width: 480px; margin:0px; }
}
@media (max-width: 767px) {
    .prize-img-headline-wrap{ width:80%; margin:0px; }
}

.footer-lead{ font-size: 1.6rem; margin-bottom: 0px; }
@media (max-width: 767px) { .footer-lead{ font-size: 1rem; } }

/* --- 12. アクセスマップ --- */
.access-map-wrap iframe { width: 100%; height: 400px; border: 0; display: block; }
.access-info { margin-top: 20px; font-weight: bold; font-size: 1rem; line-height: 1.8; }
.access-info p { margin: 0 0 4px; }
@media (max-width: 767px) {
    .access-map-wrap iframe { height: 250px; }
    .access-info { font-size: 0.9rem; }
}


/* ナビ直下：黄色 → 白 へ下向きにぼかす */
.bg-yellow-fade-down {
    background: linear-gradient(to bottom, #FFF100 0, #ffffff 20px);
}

/* --- 13. こんなことが聞けます --- */
.hear-wrap { max-width: 740px; margin: 0 auto; }
.hear-title { max-width: 420px; margin: 0 auto 40px 0; }
.hear-title img { margin: 0; }

.hear-list.check-list { margin: 0; }
.hear-list li {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
    line-height: 1.4;
}
.hear-list li::before {
    content: "";
    flex-shrink: 0;
    width: 1em;
    height: 1em;
    background: url("images/check.png") no-repeat center / contain;
}
.hear-etc { display: inline; font-size: 0.7em; margin-left: 0.8em; vertical-align: baseline; }

.hear-copy { margin-top: 50px; text-align: left; }
.hear-copy img { max-width: 560px; width: 100%; margin: 0; }

@media (max-width: 767px) {
    .hear-title { max-width: 260px; margin-bottom: 24px; }
    .hear-list li { gap: 10px; padding: 10px 0; }
    .hear-copy { margin-top: 36px; }
    .hear-copy img { max-width: 346px; }
}
