@charset "UTF-8";

/* CSS リセット */
html,
header, footer, hgroup,
section, article, nav, aside, details, figure, figcaption,
div, span,
a, b, i, u, s,
address, blockquote, q, ins, del, sub, sup, em, strong, abbr, cite, dfn, code, samp, var, mark, data,
h1, h2, h3, h4, h5, h6,
p, ol, ul, li, dl, dt, dd, pre,
bdo, bdi,
ruby, rt, rp,
fieldset, legend, label,
table, thead, tbody, tfoot, tr, th, td, caption, colgroup, col,
img, audio, video, source, track,
form, summary,
iframe
{
	margin: 0;
	padding: 0;
}

*, *:before, *:after
{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

.all_block table
{
	border-collapse: collapse;
}

.all_block a
{
	color: #3c3c3c;
}
.all_block img
{
	vertical-align: top;
	font-size: 0;
	line-height: 0;
	border: none;
}

.all_block img.size
{
	width: 100%;
}

body
{
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	font-size: 16pt;
}

.all_block ol, ul
{
	list-style: none;
}

/* 基本エリア */
.clearfix:after
{
	content: "";
	clear: both;
	display: block;
}

.clear
{
	clear: both;
	font-size: 1px;
	height: 1px;
}

/* ヘッダーロゴ規定 ---------------------------------- */

div.header
{
	width: 100%;
	max-width: 1000px;
	margin: 0% auto 0% auto;
	background-color: #ffffff;
	padding: 15px 0px 16px 16px;
}

h1.logo
{
	width: 18%;
	max-width: 180px;
	min-width: 140px;
	margin: 0% auto 0% 1%;
	line-height: 100%;
}

/* 入力しても良いのココから -------------------------- */
div.all_block
{
	position: relative;
	font-family: "游明朝 Medium", "Yu Mincho Medium", "YuMincho Medium", "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", serif;
	width: 100%;
	max-width: 1000px;
	padding: 0;
	margin: 0 auto;
	font-size: 16pt;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}

/* ハンバーガーメニュー・スライドショー・Ｑ＆Ａなど ---------- */

:root{
--accent: #4c4298; /* 線の色 */
--menu-width: 300px; /* スライドしてくるメニュー幅 */
--touch-area: 50px; /* 押しやすい領域 */
}

/* ベーシックリセット */
*{box-sizing:border-box}
body
{
	margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif
	user-select: none;      /* テキスト選択不可 */
	caret-color: transparent; /* キャレットを非表示 */
}

/* ハンバーガーの配置（all_block 内の右上に固定） */
	.hamburger-root {
	position: fixed;
	top: 12px;
	right: calc((100% - 1000px)/2 + 12px);
	z-index: 1500;
}

/* ブラウザ幅が1000px以下のとき */
@media (max-width: 1000px) {
.hamburger-root {
right: 12px; /* ブラウザ右端から12pxに固定 */
}
}

/* 実際にクリックする領域（input + labelで動作） */
.hamburger-toggle{
position:absolute;
width:var(--touch-area);
height:var(--touch-area);
top:0;right:0;
opacity:0;
z-index:1600; /* ← 1300 → 1600 に変更 */
cursor:pointer;
}

.hamburger-btn
{
	display: inline-grid;
	place-items: center;
	width: var(--touch-area);
	height: var(--touch-area);
	padding: 14px 10px 0px 5px; /* 上・右・下・左の順 */
	background-color: rgba(255, 255, 255, 0.8); /* 白＋透明度80% */
	border-radius: 5px; /* 角丸5px */
	border: none;
	-webkit-tap-highlight-color: transparent;
}

/* 三本線 */
.hamburger-icon
{
position:relative;
width: 40px;	/* 横幅 */
height: 40px;	/* 全体の大きさ */
display:block;
}

.hamburger-icon span
{
position:absolute;
left:0;
right:0;
height: 3px;	/* 三本線の太さ */
border-radius:2px;
background:var(--accent);
transition:transform .35s cubic-bezier(.2,.9,.3,1), opacity .2s, top .35s;
display:block;
}

.hamburger-icon span:nth-child(1){top:0}
.hamburger-icon span:nth-child(2){top: 10px}	/* 三本線の間隔 */
.hamburger-icon span:nth-child(3){top:20px}

/* メニュー（右からスライド） */
.side-menu {
position: fixed;
top: 30px;
right: 0;
height: 100vh;
width: var(--menu-width);
transform: translateX(calc(var(--menu-width) + 20px)); /* 初期は画面外 */

/* 背景画像設定 */
background-image: url('../image/menu_bg.png'); /* 画像パスを変更 */
background-size: 100%;
background-repeat: no-repeat;      /* 縦方向に繰り返す */
background-position: left top;    /* 左上に配置 */

transition: transform .45s cubic-bezier(.2, .9, .3, 1);
z-index: 1200;
padding: 75px 20px 20px 20px;
display: flex;
flex-direction: column;
gap: 0px; /* メニューの行間 */
}

/* ブラウザ幅が600px以下のとき */
@media (max-width: 420px) {
.side-menu {
padding: 100px 20px 20px 20px;
}
}


/* メニュー項目 */
.side-menu a
{
	position: relative;
	text-decoration: none;
	color: #492400;
	font-weight: 600;
	padding: 6px 6px;
	text-align: right;
	font-size: 16pt;
	margin: 0px 40px 0px 0px; /* アイコン表示スペース */
}

/* ホバー時の文字効果 */
.side-menu a:hover
{
color: #ff3777;
text-decoration: none;
}

/* ホバー時に右側へアイコン表示 */
.side-menu a:hover::after {
content: "";
position: absolute;
right: -40px; /* aタグの右側に50px＋余白10px */
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}



/* チェックが入ったら変化 */
.hamburger-toggle:checked + .hamburger-btn .hamburger-icon span:nth-child(1){
transform:translateY(10px) rotate(45deg);	/* 三本線の×中心点 */
}
.hamburger-toggle:checked + .hamburger-btn .hamburger-icon span:nth-child(2){
opacity:0; transform:scaleX(.2);
}
.hamburger-toggle:checked + .hamburger-btn .hamburger-icon span:nth-child(3){
transform:translateY(-10px) rotate(-45deg);	/* 三本線の×中心点 */
}

.hamburger-toggle:checked ~ .side-menu{
transform:translateX(0);
}

/* 背景のオーバーレイ（メニューが開いているときだけ表示） */
.overlay{
position:fixed;inset:0;pointer-events:none;opacity:0;transition:opacity .35s;
background:rgba(255,255,255,255.0.1);z-index:1100;
}
.hamburger-toggle:checked ~ .overlay{pointer-events:auto;opacity:1}

/* レスポンシブでメニュー幅調整 */
@media (max-width:420px){:root{--menu-width:84vw}}



/* Q&A全体 */
.qa-container
{
width: 96%;
max-width: 600px;
margin: 0 auto;
padding: 20px 0px 20px 0px;
}

/* 質問部分 */
.question
{
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
padding: 15px 20px;
background: #002b3f; /* ← 背景色変更 */
color: #ffffff;
margin-top: 10px;
transition: background 0.3s;
border-radius: 3px; /* 角丸を追加 */
}

.question:hover {
background: #18385a;
}

.q-text {
font-weight: bold;
font-size: 16px;
color: #ffffff;
}

/* ＋／－（白い丸で囲む） */
.toggle {
display: inline-flex;
justify-content: center;
align-items: center;
width: 28px;
height: 28px;
border-radius: 50%;
background: #ffffff; /* 白い丸 */
color: #4c4298; /* 文字色 */
font-size: 18px;
font-weight: bold;
box-shadow: 0 0 2px rgba(0,0,0,0.3);
transition: transform 0.3s, background 0.3s;
}

/* 答え部分 */
.answer {
display: none;
padding: 15px 20px;
font-size: 15px;
line-height: 1.6;
color: #333;
text-align: left;
background: #eeeeee; /* ← Aの背景色 */
border-radius: 0px; /* 角丸を追加 */
}

/* 表示時 */
.show {
display: block;
}

/* ハンバーガーメニュー・スライドショー・Ｑ＆Ａなど --------------// */

div.contents
{
	width: 100%;
	padding: 0% 0% 0% 0%;
	margin: 0% auto 0% auto;
	font-size: 14pt;
	color: #000000;
	text-align: center;
	background-color: #ffffff;
}

div.contents01_left
{
	float: left;
	width: 50%;
	background: url(../image/contents01_left.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #6167b7;
}

div.contents01_right
{
	float: right;
	width: 50%;
	background: url(../image/contents01_right.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-color: #ea6a95;
}

div.button01
{
	width: 40%;
	padding: 79% 0% 17% 0%;
	margin: 0% auto 0% auto;
}

div.button02
{
	width: 40%;
	padding: 79% 0% 17% 0%;
	margin: 0% auto 0% auto;
}

div.contents02
{
	width: 100%;
	padding: 0% 0% 0% 0%;
	margin: 0% auto 0% auto;
	font-size: 14pt;
	color: #000000;
	text-align: center;
	background: url(../image/contents02_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;  /* 画像を中央に配置 */
	background-color: #2d2215;
	position: relative; /* 上下位置の調整のために必要 */
}

h2.subtitle02
{
	width: 80%;
	padding: 3% 0% 3% 0%;
	margin: 0% auto 0% auto;
}

div.contents02_text
{
	width: 80%;
	padding: 0% 0% 0% 0%;
	margin: 0% auto 0% auto;
	color: #efd896;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	line-height: 160%;
}

span.contents02_text_big
{
	font-size: clamp(10pt, 2vw, 16pt);
}

h2.subtitle02-2
{
	width: 28%;
	padding: 3% 0 0 0;
	margin: 0 auto;
	position: relative;
	z-index: 50;  /* 上に重ねたいので大きめ */
}

div.contents02_movie
{
	width: 60%;
	margin: 0 auto;
	position: relative;
	top: -40px;
	z-index: 10;  /* subtitle02-2 より下 */
}

div.contents03
{
	width: 100%;
	padding: 0% 0% 3% 0%;
	margin: 0% auto 0% auto;
	font-size: 14pt;
	text-align: center;
	/*background: url(../image/contents03_bg.png);*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;  /* 画像を中央に配置 */
	background-color: #ddb6a8;
}

div.contents03_image
{
	width: 80%;
	padding: 5% 0% 0% 0%;
	margin: 0% auto 0% auto;
}

div.contents03_text
{
	width: 100%;
	max-width: 640px;
	padding: 0% 0% 0% 0%;
	margin: 0% auto 0% auto;
}

div.contents03_left
{
	float: left;
	width: 50%;
	padding: 10px 0% 0% 0%;
	font-size: 14pt;
	text-align: left;
	color: #000000;
}

div.contents03_right
{
	float: left;
	width: 50%;
	padding: 10px 0% 0% 0%;
	font-size: clamp(8pt, 2vw, 10pt); /* 最小8pt、最大12pt */
	text-align: left;
}

div.contents03_level
{
	font-size: 16pt;
	font-weight: bold;
	padding: 0% 0% 5px 0%;
}

h3.mintitle03
{
	width: 40%;
	padding: 3% 0% 0% 0%;
	margin: 0% auto 0% auto;
}

div.content03_synopsis-01
{
	width: 80%;
	padding: 0% 0% 3% 0%;
	margin: 0% auto 0% auto;
	text-align: center;
	color: 3c3c3c;
	line-height: 200%;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	background: url('../image/contents03_footer01.png') no-repeat center bottom;
    background-size: contain; /* 横幅に合わせたい場合は cover に変更可能 */
}

span.content03_synopsis-01_big
{
	color: #321597;
	font-size: clamp(12pt, 2vw, 16pt); /* 最小8pt、最大12pt */
}

div.contents03_2
{
	width: 100%;
	max-width: 640px;
	margin: 0% auto 0% auto;
}

div.content03_synopsis-02
{
	width: 80%;
	padding: 0% 0% 3% 0%;
	margin: 0% auto 0% auto;
	text-align: center;
	color: 3c3c3c;
	line-height: 200%;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	background: url('../image/contents03_footer02.png') no-repeat center bottom;
    background-size: contain; /* 横幅に合わせたい場合は cover に変更可能 */
}

span.content03_synopsis-02_big
{
	color: #b60b41;
	font-size: clamp(12pt, 2vw, 16pt); /* 最小8pt、最大12pt */
}

div.contents04
{
	width: 100%;
	padding: 0% 0% 3% 0%;
	margin: 0% auto 0% auto;
	font-size: 14pt;
	color: #000000;
	text-align: center;
	background: url(../image/contents02_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;  /* 画像を中央に配置 */
	background-color: #2d2215;
	position: relative; /* 上下位置の調整のために必要 */
}

h2.subtitle04
{
	width: 28%;
	padding: 3% 0 0 0;
	margin: 0 auto;
	position: relative;
	z-index: 50;  /* 上に重ねたいので大きめ */
}

div.contents04_image
{
	width: 60%;
	margin: 0 auto;
	position: relative;
	top: -40px;
	z-index: 10;  /* subtitle02-2 より下 */
}

div.contents04_logo
{
	width: 12%;
	min-width: 140px;
	margin: 0 auto;
	padding: 2% 0% 2% 0%;
}

div.contents04_text
{
	width: 80%;
	padding: 0% 0% 5% 0%;
	margin: 0% auto 0% auto;
	text-align: center;
	color: #ffffff;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	line-height: 180%;
}

div.contents04_item_area
{
	width: 70%;
	margin: 0% auto 0% auto;
}

div.contents04_item
{
	float: left;
	width: 19%;
	padding: 1% 1% 1% 1%;
	margin: 0% auto 10px auto;
	text-align: center;
	color: #ffffff;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	background-color: #002b3f;
}

div.contents04_item_text
{
	float: right;
	width: 80%;
	padding: 1% 2% 1% 2%;
	margin: 0% auto 10px auto;
	text-align: left;
	color: #002b3f;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	background-color: #ffffff;
}

div.contents05
{
	width: 100%;
	padding: 0% 0% 3% 0%;
	margin: 0% auto 0% auto;
	font-size: 14pt;
	color: #000000;
	text-align: center;
	background: url(../image/contents05_bg.png);
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;  /* 画像を中央に配置 */
	background-color: #211c0f;
}

h2.subtitle05
{
	width: 28%;
	padding: 3% 0 0 0;
	margin: 0 auto;
}

div.contents05_slide
{
	width: 80%;
	margin: 0% auto 0% auto;
	padding: 20px 0% 0% 0%;
}

div.contents06
{
	width: 100%;
	padding: 0% 0% 30px 0%;
	margin: 0% auto 0% auto;
	font-size: 14pt;
	color: #000000;
	text-align: center;
	/*background: url(../image/contents03_bg.png);*/
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;  /* 画像を中央に配置 */
	background-color: #ddb6a8;
}

div.contents06_footer
{
	width: 80%;
	padding: 0% 0% 3% 0%;
	margin: 0% auto 0% auto;
	background: url('../image/contents06_footer.png') no-repeat center bottom;
    background-size: contain; /* 横幅に合わせたい場合は cover に変更可能 */
}

h2.subtitle06
{
	width: 80%;
	padding: 6% 0 0 0;
	margin: 0 auto;
}

h3.mintitle06
{
	font-size: clamp(24pt, 2vw, 32pt);
}

div.contents06_text
{
	width: 80%;
	padding: 30px 0% 30px 0%;
	margin: 0% auto 0% auto;
	text-align: center;
	color: #000000;
	font-size: clamp(8pt, 2vw, 12pt); /* 最小8pt、最大12pt */
	line-height: 180%;
}

span.contents06_text_min
{
	font-size: clamp(6pt, 2vw, 10pt);
}

div.contents06_logo
{
	width: 30%;
	min-width: 250px;
	margin: 0% auto 0% auto;
	padding: 10px 0px 10px 0px;
}

/* フッター -------------------------------- */
footer.block_footer
{
	min-width: 100%;
	margin: 0px 0px 0px 0px;
	padding: 30px 0px;
	color: #ffffff;
	text-align: center;
	background-color: #002b3f;
}

address.copy
{
	font-size: 11pt;
}

/* スマホのみ電話を押せるように -------------------------------- */
@media screen and (min-width: 1000px) {
	a[href^="tel:"] {
		pointer-events: none;
	}
}

@media screen and (min-width:1000px){
    .brsp {display:none;}
}

/* スマホ限定の改行コード -------------------------------- */
@media screen and (min-width:1000px){
    .brsp {display:none;}
}

/* ＰＣのみ表示 -------------------------------- */
@media screen and (max-width:1000px){
    .pc {display:none;}
}

/* スマホのみ表示 -------------------------------- */
@media screen and (min-width:999px){
    .sp {display:none;}
}