@charset "utf-8";

header, nav, #slider, #slider ul li img, #contents, footer {
	width: 100%;
	max-width: 100%;
}
nav ul {
	margin: 0;
}
#slider {
    width: 100%;
    margin-bottom: 50px;
	padding-top: 50px;
    overflow: hidden;
}

#main {
	width: auto;
	float: none;
}
nav ul li {
	margin: 0;
}
nav ul li#nav_policy,
nav ul li#nav_service_visa,
nav ul li#nav_service,
nav ul li#nav_facility,
nav ul li#nav_inquiry {
	width: 100%;
	border: 1px solid #f2f2f2;
}
nav ul li#nav_policy a,
nav ul li#nav_service_visa a,
nav ul li#nav_service a,
nav ul li#nav_facility a,
nav ul li#nav_inquiry a {
	height: auto;
	padding-top: 7px;
	padding-bottom: 7px;
	background-image: none;
	color: #000000;
	text-align: center;
	text-decoration: none;
}
nav ul li#nav_policy a:hover,
nav ul li#nav_service_visa a:hover,
nav ul li#nav_service a:hover,
nav ul li#nav_facility a:hover,
nav ul li#nav_inquiry a:hover {
	background-color: #36a0e0;
	color: #ffffff;
}
#topics h2 {
	margin-bottom: 0;
}
#topics ul li {
	margin-top: 0;
	padding: 12px 0 12px 0;
	text-indent: 0;
}
#topics ul li time {
	display: block;
	margin-bottom: 10px;
	width: auto;
}
#sub {
	margin-left: 10px;
	float: none;
}
#sub aside {
	margin-bottom: 10px;
}
footer #info_group {
	padding: 8px 0 0 0;
}

/**/
nav ul {
	margin: 0;
	padding: 0;
}

nav ul li {
	width: 100%;
	margin: 0;
}

nav ul li a {
	width: 100%;
	display: block;
	padding: 12px 0;
	text-align: center;
	text-decoration: none;
	color: #000;
	background-size: cover;
	text-shadow: 0 0 0px #000;/*影*/
}

nav ul li a:hover {
	background-color: #36a0e0;
	color: #fff;
}

/*スマホ向けにテキストエリアを調整*/
input[type="text"],
input[type="tel"],
input[type="email"],
textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/*スマホ向けにテキストエリアを調整*/
/* テーブルはみだし対応 */

table {
    width: 100%;          /* 画面幅に合わせる */
    max-width: 100%;      /* はみ出し禁止 */
    table-layout: fixed;  /* セル幅を自動調整して縮める */
    word-break: break-word; /* 長い文字を折り返す */
}

/* スマホ時のロゴ縦並び */
header#top {
    display: flex;
    flex-direction: column; /* ← 縦並びにする */
    align-items: center;    /* ← 中央揃え */
}

/* 1枚目のロゴ（logo.png）をスマホ用に調整 */
.logo-wrapper h1 img {
    width: 100%;   /* ← スマホ用に縮小（調整可） */
    height: auto;
    left: 0;      /* ← PC用の left:70px を無効化 */
}

/* 2枚目のロゴ（logo_2.png）もスマホ用に調整 */
header#top > img {
    width: 60%;   /* ← スマホ用に縮小（調整可） */
    height: auto;
    margin-top: 10px; /* ← 1枚目との間に余白 */
    position: static; /* ← PC用の absolute を無効化 */
}
/* スマホ時のロゴ縦並び */

/* 幽霊スクロール対策 */
header, nav, #level, #contents, footer {
    width: 100%;
    max-width: 100%;
}
/* 幽霊スクロール対策 */

#main h1,
#main h2 {
    line-height: 1.2em !important; /* ← 行間を広げる（重要） */
}
footer {
	width: 100% !important;
	max-width: 100% !important;
	font-size: 14px;        /* ← 文字が潰れない */
	line-height: 1.6;       /* ← 読みやすくなる */
	padding: 10px 15px;     /* ← 余白を確保 */
	box-sizing: border-box; /* ← はみ出し防止 */
}
footer #info_group {
	font-size: 14px;        /* ← ここも明示的に指定 */
	line-height: 1.6;
}
/* 幽霊スクロール対策 */
body {
    overflow-x: hidden;
}
.main-video-bg,
.main-video-bg video {
    max-width: 100%;
    overflow: hidden;
}
header#top > img {
    position: static;
}
header#top > img {
    left: 0 !important;
    top: auto !important;
    transform: none !important;
}
/* 幽霊スクロール対策 */

/* 処理軽量化 */
.main-video-bg video {
    transform: translateZ(0);
    will-change: transform;
}

#tsparticles {
    transform: translateZ(0);
    will-change: transform;
}

#logo-effect {
    transform: translateZ(0);
    will-change: transform;
}

.fadein {
    will-change: opacity, transform;
}
/* 処理軽量化 */

/* ハンバーガーメニュー */
.sp-menu-btn {
	display: block;
	width: 100%;
	padding: 12px;
	background: #36a0e0;
	color: #fff;
	text-align: center;
	font-size: 20px;
	border: none;
}
.sp-menu-btn {
    display: block; /* PCではハンバーガーメニュー非表示 */
}
nav {
    max-height: 0;
    overflow: visible; /* ★ nav は隠さない → dropdown が切れない */
    opacity: 0;
    transform: translateY(-10px);
    transition:
        max-height 0.4s ease,
        opacity 0.4s ease,
        transform 0.4s ease;
}

/* ★ nav の中身だけを隠す（アニメーション対象は ul の高さ） */
nav > ul {
    overflow: hidden;
}

nav.open {
    max-height: 1000px;
    opacity: 1;
    transform: translateY(0);
}
nav ul li.open .dropdown {
    transform: none !important;
}
nav ul li .dropdown {
    display: block;
    position: static;
    width: 100%;        /* ← PC版の180pxを完全に無効化 */
    padding: 0;         /* ← PC版の余白を無効化 */
    margin: 0;
    transform: none;    /* ← PC版の中央寄せロジックを無効化 */
    left: auto;
    top: auto;
    border: none;       /* ← PC版の枠線を消す（必要なら） */
    background: transparent; /* ← PC版の白背景を消す（必要なら） */
}
nav ul li .dropdown li a {
    background-image: none; /* ← 背景画像を完全に消す */
    height: auto;
    line-height: normal;
    background: #f4faff;
    width: 100%;
    display: block;
    padding: 6px 10px;
    color: #04002c;
    text-decoration: none;
    border-bottom: 1px solid #eee;
    border-radius: 4px;
}
nav ul li:hover .dropdown,
nav ul li.open .dropdown {
    transform: none;
    left: auto;
    top: auto;
}
/* ハンバーガーメニュー */

/* ハンバーガーメニュー固定 */
.sp-menu-btn.fixed {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;

    animation: fadeSlideDown 0.4s ease forwards;
}
.sp-menu-btn:not(.fixed) {
    animation: fadeSlideUp 0.3s ease forwards;
}

nav.fixed-mobile {
    background: rgba(255, 255, 255, 0.9); /* 半透明白背景 */
    backdrop-filter: blur(4px); /* ぼかし効果（任意） */
    position: fixed;
    top: 50px; /* 固定されたハンバーガーの下に配置 */
    left: 0;
    width: 100%;
    z-index: 9998;
}
/* スマホメニュー（閉じている時） */
nav {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* スマホメニュー（開いている時） */
nav.open {
    max-height: 80vh;
    overflow-y: auto;
}
/* ハンバーガーメニュー固定 */