/* --- 基本設定 --- */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    line-height: 1.6;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

.hamburger-menu{
	display: none;
}


a {
    text-decoration: none;
    color: inherit;
}

/* --- ヒーローセクション --- */
.hero-section {
    position: relative;
    height: 90vh; /* ビューポートの高さの90% */
    min-height: 700px; /* 高さが小さくなりすぎないように */
    background-image: url('https://www.nicojapan.co.jp/wp-content/uploads/mv_001.jpg');
    background-size: cover;
    background-position: center center;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* ヘッダーを上、ナビを下に配置 */
}

/* --- ヘッダー --- */
.site-header {
    width: 100%;
    background-color: #ffffff;
    padding: 15px 40px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    box-sizing: border-box; /* paddingを含めてwidth 100%に */
}

.site-logo {
    margin: 0 auto;
    width: 220px;
    text-align: center;
}

/* --- キャッチコピー --- */
.hero-content {
    position: absolute;
    top: 50%;
    left: 8%; /* 左からの位置 */
    transform: translateY(-50%);
    color: #333;
}

.hero-text-container {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    color: #fff;
}

.hero-catchphrase {
    writing-mode: vertical-rl; /* テキストを縦書きに */
    font-size: 2.5rem; /* 約40px */
    font-weight: bold;
    margin: 0;
    letter-spacing: 0.1em;
    line-height: 1.4;
}

.hero-subtext {
    writing-mode: vertical-rl;
    font-size: 1rem; /* 約16px */
    margin: 0 25px 0 0; /* 縦書きテキストの左側にマージン */
    padding-top: 10px; /* 位置調整 */
    line-height: 1.8;
}

/* --- グローバルナビゲーション --- */
.global-navigation {
    width: 100%;
    background-color: #8cc34b; /* 画像から抽出した緑色 */
}

.global-navigation ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-navigation li {
    flex: 1; /* 均等割り付け */
    max-width: 180px; /* あまり広がりすぎないように */
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
}

.global-navigation li:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.global-navigation a {
    display: block;
    padding: 12px 10px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    transition: background-color 0.3s;
}

.global-navigation a span {
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
}

.global-navigation a:hover {
    background-color: #fff; /* ホバー時の少し濃い緑 */
}

/* --- 固定サイドボタン --- */
.fixed-side-buttons {
    position: fixed;
    top: 35%; /* 上からの位置（お任せ） */
    right: 10px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 8px; /* ボタン間の隙間 */
}

.fixed-side-buttons img {
    width: 70px; /* ボタンの幅 */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
    transition: opacity 0.3s;
}

.fixed-side-buttons a:hover img {
    opacity: 0.8; /* ホバー時に少し透明に */
}


/* --- グローバルナビゲーション（プルダウン対応版） --- */
.global-navigation {
    width: 100%;
    background-color: #8cc34b; /* 画像から抽出した緑色 */
}

.global-navigation ul {
    display: flex;
    justify-content: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.global-navigation li {
    flex: 1;
    max-width: 180px;
    text-align: center;
    border-left: 1px solid rgba(255, 255, 255, 0.3);
    
    /* ▼ プルダウン用に position: relative を追加 ▼ */
    position: relative; 
}

.global-navigation li:last-child {
    border-right: 1px solid rgba(255, 255, 255, 0.3);
}

.global-navigation a {
    display: block;
    padding: 12px 10px;
    color: white;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    transition: background-color 0.3s;
}

.global-navigation a span {
    font-size: 10px;
    font-weight: normal;
    text-transform: uppercase;
}

.global-navigation a:hover {
    background-color: #7cb342; /* ホバー時の少し濃い緑 */
	color: #fff;
}



/* 1. サブメニューの初期状態（非表示） */
.global-navigation .sub-menu {
    display: none; /* 通常は非表示 */
    position: absolute;
    top: 100%; /* 親liの真下に配置 */
    left: 0;
    background-color: #7cb342; /* 背景色 */
    min-width: 250px; /* サブメニューの最小幅 */
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 100;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-top: 3px solid #689f38; /* アクセント */
}

/* 2. 親メニューにホバーしたらサブメニューを表示 */
.global-navigation li:hover > .sub-menu {
    display: block;
}

/* 3. サブメニューのリストアイテム */
.global-navigation .sub-menu li {
    max-width: none; /* 親の幅制限を解除 */
    border-left: none; /* 縦線をリセット */
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 区切り線 */

}

.global-navigation .sub-menu li:hover{
	opacity: 0.8;
}

/* 4. サブメニューのリンク */
.global-navigation .sub-menu a {
    text-align: left; /* 左揃えに */
    padding: 12px 15px;
    font-size: 13px;
    line-height: 1.4; /* <br>が不要なためリセット */
}

/* 5. サブメニューのspan (もし使う場合) */
.global-navigation .sub-menu a span {
    display: none; /* サブメニューでは英語表記を非表示 */
}



.catchbox{
margin: 60px 10% 60px 0;
display: flex;
gap: 50px;
}

.catch_inner{
    margin: 0 0 0 10%;
}

.catch01 h2{
color: #7cb61a;
margin: 0 0 10px 0;
font-size: 45px;
}

p.catch_sub{
color: #7cb61a;
font-weight: normal;
margin: 0 0 40px 0;
}

.catch01 h3{
color: #7cb61a;
font-size: 20px;
margin: 0 0 30px 0;
}

.top_txt{
    line-height: 2;
    margin-bottom: 40px;
}

.tp03 img{
    margin: 60px auto 0 auto;
    text-align: center;
    display: block;
}

.top-news{
	margin: 0 10%;
}

.top-news h2{
    color: #7cb61a;
    margin: 0 0 10px 0;
    font-size: 45px;
	text-align: center;
}
.top-news h3{
    color: #7cb61a;
    font-weight: normal;
    margin: 0 0 40px 0;
	text-align: center;
}


.custom-tab-container {
    width: auto;
	margin: 0 10% 60px 10%;
    position: relative;
}

/* タブナビゲーションのラッパー (Gridに変更) */
.tab-nav {
    display: flex;
    gap: 3px;
    list-style: none;
    padding: 0;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
	margin: 0 0 20px 0;
    align-items: center;
}

/* 個々のタブ (li) */

.tab-nav li {
    margin: 0;
    padding: 0;
    position: relative;
    flex-basis: 24.7%;
}



.tab-nav li a {
display: flex; 
    align-items: center; /* 追加 (垂直中央揃え) */
    justify-content: center; /* 追加 (水平中央揃え) */
padding: 10px 15px;
min-height: 70px;
text-decoration: none;
background-color: #d8ecba; /* 非アクティブ時の背景色 */
color: #7cb61a;
font-size: 14px;
font-weight: bold;
border-bottom: none;
border-radius: 5px;
position: relative;
z-index: 1;
/* 幅100%にするために必要 */
box-sizing: border-box; 
}

/* アクティブなタブ (li.active) */
.tab-nav li.active {
    z-index: 2; /* 他のタブより手前 */
}

/* アクティブなタブ (a) */
.tab-nav li.active a {
    background-color: #7cb61a;
    color: #fff;
    z-index: 2; /* 他のタブのリンクより手前 */
}

/* タブコンテンツ (変更) */
.tab-content-wrapper {
    background: #fff;
    border: 3px solid #7cb61a;
    padding: 25px 20px;
    /* 左上だけ角丸をなくす */
    border-radius: 0 5px 5px 5px; 
    
    /* タブより背面(z-index: 0)に配置 */
    position: relative;
    z-index: 0;
    clear: both;
}

/* --- 以下の投稿リストのスタイルは変更なし --- */

.tab-panel {
    display: none;
}
.tab-panel.active {
    display: block;
}
.tab-panel ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.tab-panel ul li {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dotted #ccc;
}
.tab-panel ul li:last-child {
    border-bottom: none;
}
.tab-panel .post-date {
    margin-right: 1.5em;
    font-family: 'Arial', sans-serif;
    color: #555;
    flex-shrink: 0;
}
.tab-panel li a {
    text-decoration: none;
    color: #222;
    font-weight: bold;
}
.tab-panel li a:hover {
    text-decoration: underline;
}

@media screen and (max-width: 1151px) {
.tab-nav li {
    margin: 0;
    padding: 0;
    position: relative;
	flex-basis: 32.5%;
}
}

@media screen and (max-width: 768px) {

.tab-nav li a {
    padding: 10px 15px;
    min-height: 70px;
    text-decoration: none;
    font-size: 13px;
}
}


@media screen and (max-width: 500px) {

.tab-nav li a {
    padding: 10px 15px;
    min-height: 60px;
    text-decoration: none;
    color: #333;
    font-size: 13px;
}

.tab-nav {
    gap: 3px;
}
.tab-nav li a{
        font-size: 12px;
}
}



@media screen and (max-width: 1151px) {
.fixed-side-buttons {
    display: none;
}
.global-navigation{
    display: none;
}


	html.is-fixed,
html.is-fixed body {
  height: 100%;
  overflow: hidden;
}
	.side_btn{
		display: none;
	}
.hamburger-menu{
	display: block;	
	}

.hamburger-menu{
	display: block;	
	}

.menu-btn {
position: absolute;
top: 10px;
right: 10px;
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
z-index: 10001;
background-color: #b3645b;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
content: '';
display: block;
height: 3px;
width: 25px;
border-radius: 3px;
background-color: #fff;
position: absolute;
}
.menu-btn span:before {
bottom: 8px;
}
.menu-btn span:after {
top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
background-color: rgba(255, 255, 255, 0);
}
#menu-btn-check:checked ~ .menu-btn span::before {
bottom: 0;
transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
top: 0;
transform: rotate(-45deg);
}
#menu-btn-check {
display: none;
}

/* === メニュー内容（変更・追加あり）=== */

.menu-content ul {
padding: 70px 30px 0 30px;
}
.menu-content ul li {
border-bottom: solid 1px #ffffff;
list-style: none;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 15px;
box-sizing: border-box;
color:#ffffff;
text-decoration: none;
padding: 20px 15px 20px 0;
position: relative;
}

/* 既存の矢印（通常のリンク用） */
.menu-content ul li a::before {
content: "";
width: 7px;
height: 7px;
border-top: solid 2px #ffffff;
border-right: solid 2px #ffffff;
transform: rotate(45deg);
position: absolute;
right: 11px;
top: 24px;
    transition: all 0.3s; /* ▼追加：矢印の回転用 */
}

/* ▼▼▼ 以下、アコーディオン対応のために追加 ▼▼▼ */

/* サブメニューを持つ li > a の矢印（下向きに変更） */
.menu-content ul li.has-submenu > a::before {
    transform: rotate(135deg); /* 下向き矢印 */
}

/* 開いた状態(openクラス)の li > a の矢印（上向きに変更） */
.menu-content ul li.has-submenu.open > a::before {
    transform: rotate(-45deg); /* 上向き矢印 */
    top: 28px; /* 回転による位置ズレ調整 */
}

/* サブメニュー(ul ul)のスタイル */
.menu-content ul ul {
    display: none; /* ★重要：サブメニューを初期状態で非表示 */
    padding: 0;
    margin: 0 0 0 15px; /* 少しインデントさせる */
    background-color: rgba(0, 0, 0, 0.05); /* 背景色を少し変える（任意） */
    border-radius: 5px; /* 角丸（任意） */
}

/* サブメニュー内の li のスタイル */
.menu-content ul ul li {
    border-bottom: solid 1px rgba(255, 255, 255, 0.5); /* サブメニュー内の区切り線 */
}
.menu-content ul ul li:last-child {
    border-bottom: none; /* 最後の線の削除 */
}

/* サブメニュー内の a のスタイル */
.menu-content ul ul li a {
    padding: 15px 15px 15px 10px; /* パディング調整 */
    font-size: 14px; /* 少し小さく */
}

/* サブメニュー内の a には矢印をつけない */
.menu-content ul ul li a::before {
    display: none;
}

/* ▲▲▲ アコーディオン対応ここまで ▲▲▲ */


/* === 既存のCSS（変更なし）=== */
.menu-content {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 100%;
z-index: 10000;
background-color: #c17e76;
transition: all 0.5s;
    overflow-y: auto; /* ▼追加：メニューが多くなった時にスクロールさせる */
}
#menu-btn-check:checked ~ .menu-content {
left: 0;
}


}


.tm3{
	display: flex;
	width: 100%;
}
.tm3 a{
	flex-basis: 33.33%;
	position: relative;
}

.tm3 a img{
	width: 100%;
	height: auto;
}
.tm3 a img:hover{
	opacity: 0.7;
}

.tm_title{
	position: absolute;
	bottom: 0;
	padding: 15px 20px;
	text-align: center;
	margin: 0 auto;
	left: 0;
	right: 0;
	background: rgba(124,182,26,0.7);
	color: #fff;
	font-weight: bold;
}

.top-location h2{
    color: #7cb61a;
    margin: 0 0 10px 0;
    font-size: 45px;
	text-align: center;
}
.top-location h3{
    color: #7cb61a;
    font-weight: normal;
    margin: 0 0 40px 0;
	text-align: center;
}




@media screen and (max-width: 768px) {
.tm3 {
    display: block;
}
}

.contactbg{
	background-image: url(https://www.nicojapan.co.jp/wp-content/uploads/contactbg.jpg);
	width: 100%;
	height: auto;
	background-size: cover;
	padding: 50px 0;
	margin: 60px 0 40px 0;
}



.contactbg h2{
	font-size: 45px;
	color: #fff;
	text-align: center;
	margin: 0 0 20px 0;
}
.contactbg h3{
	font-size: 20px;
	color: #fff;
	text-align: center;
	margin: 0 0 30px 0;
}

.contact_txt{
	font-size: 16px;
	color: #fff;
	text-align: center;
	padding: 0 20px;
	line-height: 2;
	margin-bottom: 30px;
}



.fban3 {
    max-width: 1200px;
    display: flex;
    margin: 0 auto 50px auto;
}
.fban3 p {
    flex-basis: 30%;
    margin: 0 1.5%;
}
.fban3 p img {
    width: 100%;
    height: auto;
}


@media screen and (max-width: 768px) {
	.fban3 {
		flex-direction: column;
		gap: 20px;
		margin-left: 5%;
		margin-right: 5%;
	}
    .fban3 p {
        margin: 0;
    }
}

a.fbtn{
    width: 220px;
    display: block;
    text-align: center;
    background: #fff;
    color: #7cb61a;
    padding: 10px 20px;
    margin: 0 auto;
    z-index: 10000;
    font-weight: bold;
    letter-spacing: 1px;
    border-radius: 5px;
}
a:hover.fbtn{
opacity: 0.7;
    background: #fff;
    color: #7cb61a;
}

.flink{
	max-width: 420px;
	margin: 0 auto 40px auto;
	display: flex;
	gap: 30px;
}

.copy{
padding: 15px;
text-align: center;
border-top: 1px dashed silver;
}

@media screen and (max-width: 768px) {
.flink{
	max-width: auto;
	margin: 0 5% 40px 5%;
	display: block;
	gap: 20px;
	line-height: 2;
}
    .tab-nav li {
        margin: 0;
        padding: 0;
        position: relative;
        flex-basis: 49.5%;
    }

.catchbox {
    margin: 60px 5%;
    display: flex;
    gap: 20px;
    flex-direction: column-reverse;
}

.tp03 img {
    margin: 0px auto 0 auto;
    text-align: center;
    display: block;
    width: 100px;
}
.hero-content {
    position: absolute;
    top: 60%;
    right: 8%;
    left: unset;
    transform: translateY(-50%);
    color: #333;
}
.hero-catchphrase {
    writing-mode: vertical-rl;
    font-size: 26px;
}
.hero-subtext {
    writing-mode: vertical-rl;
    font-size: 14px;
}
.hero-section {
    position: relative;
    height: 40vh;
    min-height: 500px;
}
}


.section-wrapper {
            max-width: 1100px;
            margin: 0 auto;
            padding: 50px 20px;
        }

        /* --- 共通セクションタイトル --- */
        .section-title-en {
            font-size: 55px;
            color: #7cb61a; /* 画像から推測した緑色 */
            font-weight: 300;
            margin: 0 0 10px 0;
            line-height: 1.2;
    text-align: center !important;
        }

        .section-title-ja {
            font-size: 18px;
            color: #7cb61a;
            margin: 0 0 20px 0;
            font-weight: bold;
    text-align: center !important;
        }


        /* --- 1. Application (ご利用希望の方へ) --- */
        .application-section .container-flex {
            display: flex;
            align-items: center;
            gap: 40px; /* 画像とテキストの間隔 */
        }

        .application-section .apply-image {
            flex: 1;
            min-width: 0;
        }

        .application-section .apply-image img {
            width: 100%;
            height: auto;
            display: block;
            border-radius: 5px; /* 画像の角を少し丸める */
        }

        .application-section .apply-content {
            flex: 1;
        }

        /* Applicationセクションのタイトルは左揃え */
        .application-section .section-title-en,
        .application-section .section-title-ja {
            text-align: left;
        }

        .application-section .description {
            font-size: 15px;
            line-height: 1.8;
            color: #333;
            margin-bottom: 30px;
        }

        .application-section .btn-detail {
            display: block;
            background-color: #7cb61a;
            color: #ffffff;
            text-decoration: none;
			width: 200px;
			margin: 0 auto;
            padding: 12px 40px;
            border-radius: 5px;
            font-weight: bold;
            font-size: 16px;
            transition: opacity 0.3s;
        }

        .application-section .btn-detail:hover {
            opacity: 0.8;
        }


        /* --- 2. Flow (ご利用の流れ) --- */
        .flow-section {
            background-color: #ffffff; /* このセクションだけ白背景 */
        }

        /* Flowセクションのタイトルは中央揃え */
        .flow-section .section-title-en,
        .flow-section .section-title-ja {
            text-align: center;
        }

        .flow-section .flow-steps {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 40px 0 0 0;
            gap: 20px; /* ステップ間の隙間 */
        }

        .flow-section .flow-steps li {
            flex: 1; /* 4つのステップを均等配置 */
            background-color: #f0f7e4; /* 薄い緑色 */
            padding: 25px 20px;
            border-radius: 10px;
            text-align: center;
            box-sizing: border-box; /* paddingを含めて計算 */
        }

        .flow-section .step-number {
            display: inline-block;
            width: 44px;
            height: 44px;
            line-height: 44px;
            border-radius: 50%;
            background-color: #e1f0c9; /* 番号の背景色 */
            color: #7cb61a;
            font-weight: bold;
            font-size: 20px;
            margin-bottom: 15px;
        }

        .flow-section .step-title {
            font-size: 18px;
            color: #333;
            font-weight: bold;
            margin: 0 0 15px 0;
        }

        .flow-section .step-icon {
    height: 50px;
    width: auto;
    margin: 0 auto 15px auto;
    text-align: center;
        }

        .flow-section .step-description {
            font-size: 14px;
            color: #333;
            line-height: 1.7;
            text-align: left; /* 説明文だけ左揃え */
            margin: 0;
        }

        /* --- レスポンシブ対応 (スマホ表示) --- */
        @media screen and (max-width: 768px) {
            .section-wrapper {
                padding: 30px 15px;
            }

            /* 1. Application (縦並び) */
            .application-section .container-flex {
                flex-direction: column;
                gap: 25px;
            }

            .application-section .apply-content {
                width: 100%;
            }

            .application-section .btn-detail {
                width: 100%;
                box-sizing: border-box;
                text-align: center;
                padding: 15px;
            }

            /* 2. Flow (縦並び) */
            .flow-section .flow-steps {
                flex-direction: column;
                gap: 15px;
            }

            .flow-section .flow-steps li {
                padding: 20px;
            }
        }

.youtube {
    position: relative;
    width: 100%;
    max-width: 800px; /* 適宜変更。制限したくなければ消してOK */
    aspect-ratio: 16 / 9;
    margin: 2rem auto; /* 中央寄せ＋上下余白 */
    background-color: #000; /* 読み込み前に黒背景 */
    overflow: hidden;
    border-radius: 8px; /* 角丸いらなければ消してOK */
}

.youtube iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.top_movie{
    background-image: url(https://www.nicojapan.co.jp/wp-content/uploads/bg01.jpg);
    background-size: 100% 200px;
    background-repeat: no-repeat;
    background-position: bottom;
	padding-bottom: 50px;
}

.top_movie h2{
    font-size: 30px;
	text-align: center;
    color: #7cb61a;
    font-weight: 300;
    margin: 0;
    line-height: 1.2;
}


.flogo {
    text-align: center;
    margin-bottom: 30px;
    margin: 0 auto 30px auto;
    display: block;
}

.flogo img{
	text-align: center;
    margin: 0 auto;
}



.support_area{
	padding: 50px 0 0 0;
	position: relative;
}

.support_area h2{
	padding: 0 20px;
	text-align: center;
	font-size: 36px;
	color: #cd7998;
}

.support_area h3{
	padding: 0 20px;
	text-align: center;
	font-size: 16px;
	color: #cd7998;
	margin-bottom: 30px;
}

.suppor_txt{
	padding: 0 20px;
	text-align: center;
	font-size: 15px;
	line-height: 2.4;
}
.mapbox{
	margin: 50px 10% 70px 10%;
	width: 80%;
}
.map_l{
	width: 60%;
	float: left;
	margin: 0 5% 0 0;
}

.map_l img{
	width: 100%:
		height: auto;
}

.map_r{
		width: 35%;
	float: left;
	margin: 0;
}

.station_box{
	border: #cd7998 2px solid;
	padding: 20px;
}

.support_area .station_box h2{
	color: #000;
	font-size: 20px;
	margin: 10px 10px 20px 10px;
}

.station_txt{
	font-size: 14px;
	line-height: 2.2;
	margin-bottom: 30px;
}