/*

オレンジ
#e13018

グリーン
#246f57 文字線
#d9e0e2 背景

*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@200..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:wght@100..900&display=swap');

html,body{
	font-family:YakuHanJP,Roboto,'Noto Sans JP','Noto Serif JP',sans-serif;
	font-weight:400;
	font-size:1.0em;
	line-height:1.8em;
	box-sizing: border-box;
	font-feature-settings:"palt";
	margin:0;
	padding:0;
	position:relative;
/*	height: 6000px;*/
	background-color: transparent;}

html {
	scroll-behavior: smooth; /* スムーズスクロール */}

*	{margin:0;padding:0;list-style:none;box-sizing:border-box;text-align:justify;}

h1,h2,h3,h4
	{font-size: 1em;margin:0;padding:0;}

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

.t_mms	{font-size: 0.5em;line-height:1.2em !important;}
.t_ms	{font-size: 0.8em;}
.t_em	{font-size: 1.0em;}
.t_s	{font-size: 1.1em;}
.t_m	{font-size: 1.2em;}
.t_l	{font-size: 1.5em;}
.t_ll	{font-size: 1.625em;}
.t_xl	{font-size: 1.875em;}
.t_xxl	{font-size: 3.0em;line-height:1.0em !important;}

.txt_l	{font-weight: 200;}
.txt_r	{font-weight: 400;}
.txt_b	{font-weight: 600;}
.txt_eb	{font-weight: 800;}

.indent	{text-indent:-1em;padding-left:1em;}
.indent2{text-indent:-2em;padding-left:2em;}
.indent3{text-indent:-3em;padding-left:3em;}

.t_left		{text-align:left;}
.t_right	{text-align:right;}
.t_center	{text-align:center;}

.t_gold		{color:#8f713c;}
.t_silver	{color:#9fa0a0;}
.t_red		{color:#e61911;}
.t_dred		{color:#c42a15;}
.t_blue		{color:#1d2088;}
.t_color	{color:#231815;}
.t_skyblue	{color:#00afec;}
.t_white	{color:#fff;}
.t_orange	{color:#f60;}

ruby rt		{font-family:'Noto Sans JP',sans-serif;font-size:0.4em;}

/*
.bg_red		{background-color:#e23014;}
.bg_blue	{background-color:#0060b0;}
.bg_gold	{background-color:#c5b254;}
*/

a	{text-decoration:none;color:#cf2c16;-webkit-text-decoration-skip: none;}
a:hover,
a:focus	{text-decoration:underline;opacity:0.5;transition:0.5s;}

a.other	{
	background-image:url(../img/icon_otherlink.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_w{
	background-image:url(../img/icon_otherlink_w.png);
	background-position:right 10px top 50%;
	background-repeat:no-repeat;}

a.other_txt	{
	padding-right:18px;
	background-image:url(../img/icon_otherlink.png);
	background-position:right 0 top 50%;
	background-repeat:no-repeat;}

img	{vertical-align:bottom;}
img.w	{width: 100%;}

@media screen and (max-width:640px){
a	{-webkit-text-decoration-skip: none;}
}

.cf:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}

.skip{
	position: absolute;
	margin-left:-9999px;}

.pc	{display:inline;}
.sp	{display:none;}

@media screen and (max-width:640px){
.pc	{display:none;}
.sp	{display:inline;}
}

/* scroll fade */
/* 基本のフェードイン */
.fade-in,
.fade-in3{
	opacity: 0;
	transition: opacity 0.5s;}

.fade-in.active,
.fade-in3.active{
	opacity: 1;}

/* 左からフェードイン */
.fade-in-left{
	opacity: 0;
	transform: translateX(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left3{
	opacity: 0;
	transform: translateX(-500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-left.active,
.fade-in-left3.active{
	opacity: 1;
	transform: translateX(0);}

/* 右からフェードイン */
.fade-in-right{
	opacity: 0;
	transform: translateX(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right3{
	opacity: 0;
	transform: translateX(500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-right.active,
.fade-in-right3.active{
	opacity: 1;
	transform: translateX(0);}

/* 上からフェードイン */
.fade-in-up{
	opacity: 0;
	transform: translateY(-100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up3{
	opacity: 0;
	transform: translateY(-500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-up.active,
.fade-in-up3.active{
	opacity: 1;
	transform: translateY(0);}

/* 下からフェードイン */
.fade-in-down{
	opacity: 0;
	transform: translateY(100px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down3{
	opacity: 0;
	transform: translateY(500px);
 	transition: opacity 1.0s, transform 1.0s;}

.fade-in-down.active,
.fade-in-down3.active{
	opacity: 1;
	transform: translateY(0);}

@media screen and (max-width:500px){
/* scroll fade */

/* 左からフェードイン */
.fade-in-left,
.fade-in-left3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 右からフェードイン */
.fade-in-right,
.fade-in-right3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 上からフェードイン */
.fade-in-up,
.fade-in-up3{
 	transition: opacity 1.0s, transform 0.5s;}

/* 下からフェードイン */
.fade-in-down,
.fade-in-down3{
 	transition: opacity 1.0s, transform 0.5s;}
}



/* 並びのフェードイン */
.fade-in-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-item.active {
  opacity: 1;
  transform: translateY(0);
}



.float-button__wrap {
	display: none;/*最初は隠す*/
	width: 75px;
	height: 75px;
	position: fixed;
	bottom: 140px;
	right: 20px;
	z-index: 10;}

.float-button__wrap a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 100%;
	text-decoration: none;}

@media screen and (max-width:640px){
.float-button__wrap {
	width: 50px;
	height: 50px;
	bottom: 140px !important;}
}


/*
 * パララックスを適用する汎用クラス
 */
.parallax-background {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: -1;
	background-image: url('../img/back.png');
	background-repeat: no-repeat;
	background-position: 50% 0;
	background-size: auto;
	will-change: transform;}

@media screen and (max-width:640px){
.parallax-background {
	background-image: url('../img/back.png');}
}

@media screen and (max-width:450px){
.parallax-background {
	background-image: url('../img/back.png');}
}



.content-wrapper {
	width:1100px;
	margin:0 auto;
	display: flex;
	flex-direction: column;
	justify-content: space-between; /* コンテンツを上下に分散配置 */
	height: 100%; /* bodyの高さ(6000px)いっぱいに広げる */
	box-sizing: border-box; /* paddingを含めて高さを計算 */
}

@media screen and (max-width:1200px){
.content-wrapper {
	width:100%;
	padding:0 50px;
	box-sizing:border-box;}
}

@media screen and (max-width:640px){
.content-wrapper {
	width:100%;
	padding:0 30px;
	box-sizing:border-box;}
}


.content-box {
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 140px 60px;
	text-align: center;
	box-sizing:border-box;
	background-size:100%;
	background-repeat:no-repeat repeat;}
/*
footer {
	font-family:YakuHanMP,'Noto Serif JP';
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 0 60px 140px;
	font-size:0.9em;
	font-weight:200;
	color:#fff;
	text-align: center;
	box-sizing:border-box;
	background-size:100%;
	background-repeat:no-repeat repeat;
	background-image:url(../img/back_black.png);}

footer.sec {
	font-family:YakuHanMP,'Noto Serif JP';
	width: 100%;
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 60px 140px;
	font-size:0.9em;
	font-weight:200;
	color:#fff;
	text-align: center;
	box-sizing:border-box;
	background-size:100%;
	background-repeat:no-repeat repeat;
	background-image:url(../img/back_black.png);}
*/



header {
	width: 100%;
	display: flex;
	justify-content:center;
	align-items: flex-end;
	padding:60px 0;
	gap:30px;}

header h1{
	max-width:552px;}

header h1 img{
	width:100%;}

header .card{
	max-width:320px;}

header .card img{
	width:100%;}

@media screen and (max-width:1000px){
header .header-content ul{
	display:none;}
}

header .header-content ul li{
	}

header .header-content ul li a{
	font-family:YakuHanMP,'Noto Serif JP';
	line-height:1em;
	font-size:1em;
	color:#fff;
	text-decoration:none;}

@media screen and (max-width:640px){
header {
	width: 100%;
	flex-direction:column;
	align-items: center;
	padding:3em 0 3em;
	gap:2em;}

header .card{
	max-width:70%;}

}



section{
	width:100%;
	margin-bottom:100px;}

section h2{
	text-align:center;}

@media screen and (max-width:640px){
section{
	width:100%;
	margin-bottom:3em;}
}



section.main{
	margin-bottom:0px;}

section.main img{
	width:100%;}

@media screen and (max-width:640px){
section.main{
	margin-bottom:50px;}
}




section.osusume h2{
	text-align:left;
	margin-bottom:40px;}

@media screen and (max-width:800px){
section.osusume h2 img{
	max-width:390px;
	width:100%;}

section.osusume img.wos{
	max-width:390px;
	width:100%;}
}

@media screen and (max-width:640px){
section.osusume{
	margin-bottom:3em;}

section.osusume h2{
	margin-bottom:1.5em;}
}





section.deposit{
	display: flex;
	justify-content:space-between;
	align-items: flex-start;
	gap:20px;}

section.deposit .card{
	max-width:377px;}

section.deposit .card img{
	width:100%;}

section.deposit .word{
	max-width:calc(100% - 397px);
	min-width:50%;}

section.deposit .word h2{
	text-align:left;
	margin-bottom:30px;}

section.deposit .word h2 img{
	width:100%;
	max-width:427px;}

@media screen and (max-width:640px){
section.deposit .word{
	max-width:100%;
	min-width:100%;}
}




section.kihon h2{
	text-align:center;
	margin-bottom:50px;}

@media screen and (max-width:640px){
section.kihon h2{
	margin-bottom:1.5em;}

section.kihon h2 img{
	width:100%;
	max-width:390px;}
}

section.kihon dl{
	background:rgba(255,255,255,0.5);
	border-bottom:#666 1px solid;}

section.kihon dt{
	display:block;
	width:340px;
	padding:15px;
	float:left;
	box-sizing:border-box;
	border-top:#666 1px solid;}

section.kihon dd{
	display:block;
	width:calc(100% - 340px);
	margin-left:340px;
	padding:15px;
	border-top:#666 1px solid;
	box-sizing:border-box;}

section.kihon dd ul{
	display:flex;
	align-items:center;
	gap:15px;}

@media screen and (max-width:900px){
section.kihon dt{
	width:100%;
	background-color:rgba(60,60,60,0.1);
	float:none;
	border-top:#666 1px solid;}

section.kihon dd{
	display:block;
	width:100%;
	margin-left:0;
	border-top:none;
	box-sizing:border-box;}
}



section.moushikomi h2{
	text-align:center;
	margin-bottom:50px;}

@media screen and (max-width:800px){
section.moushikomi h2 img{
	max-width:315px;
	width:100%;}
}

section.moushikomi ul{
	width:100%;
	display:flex;
	justity-content:space-between;
	gap:20px;}

section.moushikomi li{
	position:relative;
	width:25%;
	padding:20px;
	display:flex;
	flex-direction:column;
	align-items:center;
	border:5px solid #22b573;
	background:#fff;}

section.moushikomi li::after{
	content: "";
	position: absolute;
	right: -25px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 20px solid #22b573;}

section.moushikomi li img{
	width:100%;
	max-width:186px;}

section.moushikomi li img.sub{
	width:100%;
	max-width:195px;}

section.moushikomi li:last-child{
	border:5px solid #f15a24;}

section.moushikomi li:last-child::after{
	border:none;}

@media screen and (max-width:640px){
section.moushikomi h2{
	max-width:315px;
	width:80%;
	margin:0 auto 1.5em auto;}

section.moushikomi ul{
	flex-wrap:wrap;}

section.moushikomi li{
	width:calc(50% - 10px);}

section.moushikomi li::after{
	border:none;}
}



section.toiawase{
	margin-bottom:100px;}

section.toiawase h2{
	text-align:center;
	margin-bottom:30px;}

section.toiawase .tel{
	display:block;
	text-align:center;
	margin-bottom:20px;}

@media screen and (max-width:800px){
section.toiawase .tel img{
	max-width:350px;
	width:100%;}
}

section.toiawase .time{
	text-align:center;}



@media screen and (max-width:640px){
section.toiawase h2{
	width:80%;
	margin:0 auto 1.5em auto;}
section.toiawase h2 img{
	max-width:261px;
	width:100%;}
}

section.toiawase .back{
	margin-top:50px;}

section.toiawase .back a{
	text-align:center;
	display:block;
	background-color:#bed12b;
	padding:15px;
	color:#fff;}





section.faq h2{
	text-align:center;
	margin-bottom:50px;}

@media screen and (max-width:800px){
section.faq h2 img{
	max-width:407px;
	width:100%;}
}

@media screen and (max-width:640px){
section.faq h2{
	margin-bottom:1.5em;}
}


#acMenu dt{
	position:relative;
	display:block;
	width:100%;
	line-height:1.6em;
	cursor:pointer;
	box-sizing:border-box;
	background-image: linear-gradient(90deg, #22b573, #006837);
	color:#fff;
	padding:15px 60px 15px 15px;
	margin-top:15px;
	transition:0.5s;}

#acMenu dt:hover{
	opacity:0.6;}

#acMenu dt:after{
	content:"";
	position:absolute;
	top:calc(50% - 6px);
	right:15px;
	background-image:url(../img/arrow_close.png);
	width:31px;
	height:12px;
	transition:0.5s;}

#acMenu dd{
	width:100%;
	background:rgba(255,255,255,0.5);
	line-height:1.6em;
	border-left:3px solid #22b573;
	border-bottom:#666 1px solid;
	box-sizing:border-box;
	padding:15px;
	display:none;}

#acMenu dt.active:after{
	content:"";
	position:absolute;
	top:calc(50% - 6px);
	right:15px;
	background-image:url(../img/arrow_open.png);
	width:31px;
	height:12px;}


.footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	background-color: rgba(128, 128, 128, 0.3); /* 透過グレー (#808080, 50%) */
	color: #fff; /* テキストを見やすくする */
	text-align: center;
	padding: 25px 0;
	z-index: 1000;
	backdrop-filter: blur(4px); /* 半透明感を強調（対応ブラウザのみ） */}

.footer .btn{
	display:inline-block;}

.footer .btn a{
	display:block;
	background-image: linear-gradient(90deg, #22b573, #006837);
	padding:20px 40px;
	border-radius:35px;
	 box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);}


footer a{
	color:#000;}



/* =========================================================
   Lightbox Modal Baseline v1.0  ——  レイアウト固定版
   ※ このファイルを“唯一のベース”として使います。
   ※ 以後の改修では、下の「CONFIG（可変でも良い値）」だけ変更可。
   ※ HTML構造／クラス名／主要寸法は変更しません。
   ========================================================= */

:root{
  --modal-width: 80vw;
  --modal-height: 80vh;
  --modal-radius: 12px;

  --modal-shadow: 0 24px 60px rgba(0,0,0,.35);
  --overlay-color: rgba(0,0,0,.6);
  --text-color: #333;
  --close-color: #666;
  --close-color-hover: #111;

  --fade-ms: 350ms;
  --easing: ease;
  --enter-scale: .96;
}
/* スムーズスクロール一時無効 */
html.no-smooth { scroll-behavior: auto !important; }

/* 背景スクロール停止（position:fixed は使わない） */
html.no-scroll,
html.no-scroll body { overflow: hidden !important; }
/* ======================================================================= */

.btn-open {
  display: inline-block;
  padding: .7em 1.2em;
  background: #22b573;
  color: #fff;
  text-decoration: none;
  border-radius: .5em;
  font-weight: 700;
}
.btn-open:hover { opacity: .9; }

.modal {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  visibility: hidden; opacity: 0;
  transition: opacity var(--fade-ms) var(--easing),
              visibility var(--fade-ms) var(--easing);
  z-index: 10000;
}
.modal.is-open { visibility: visible; opacity: 1; }

.modal__overlay { position: absolute; inset: 0; background: var(--overlay-color); }

.modal__content {
  position: relative;
  width: var(--modal-width);
  height: var(--modal-height);
  background: #fff;
  border-radius: var(--modal-radius);
  box-shadow: var(--modal-shadow);
  overflow: auto;                         /* 中だけスクロール */
  overscroll-behavior: contain;           /* 端で背面に連鎖しない */
  -webkit-overflow-scrolling: touch;      /* iOS慣性 */
  touch-action: auto;                     /* モーダル内のパン操作を許可 */
  transform: scale(var(--enter-scale));
  opacity: 0;
  transition: transform var(--fade-ms) var(--easing), opacity var(--fade-ms) var(--easing);}

.modal.is-open .modal__content { transform: scale(1); opacity: 1; }

.modal__header {
  position: sticky; top: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 30px 30px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.modal__title { margin: 0; font-size: 1.4em; font-weight: 700; letter-spacing:0;}

.modal__close {
  position:absolute;
  top:0;
  right:0;
  appearance: none;
  border: none; background: transparent;
  width: 40px; height: 40px;
  border-radius: 8px;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  color: var(--close-color);
}
.modal__close:hover { background: #f5f5f5; color: var(--close-color-hover); }

.modal__body { padding: 30px; line-height: 1.9; }

.container { padding: 48px 20px 120px; max-width: 960px; margin: 0 auto; }
.demo-spacer { height: 1200px; background: repeating-linear-gradient(180deg,#fafafa 0 40px,#f3f3f3 40px 80px); border: 1px solid #eee; }

/* ===== 追加機能：同意チェック→ボタン有効化（レイアウト不変で追加） ===== */
.gate {
  margin: 12px 0 8px;
  padding: 12px 12px;
  background: #f8f8f8;
  border: 1px solid #eee;
  border-radius: 10px;
  text-align:center;
}
.gate__row {
  display: flex;
  align-items: center;
  justify-content:center;
  gap: 10px;
  margin-bottom:10px;
}
.gate__label {
  user-select: none;
  cursor: pointer;
}
.gate__note {
  margin: 8px 0 14px;
  font-size: 14px;
  color: #666;
}

/* ボタン（a要素）。未同意＝無効（グレー・ホバー無効・クリック不可） */
.gate__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin:0 auto;
  padding: 12px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  color: #fff;
  background: #c9c9c9;           /* 無効：グレー */
  pointer-events: none;          /* クリック不可（ポインタ） */
  cursor: not-allowed;
  border: none;
  outline: none;
  transition: background .2s ease, transform .05s ease, filter .2s ease;
	font-size:1.3em;
	line-height:1em;
	text-align:center;
}
.gate__cta:focus {
  outline: none;
}
.gate form {
  display: flex;
  justify-content: center; /* 横方向中央 */
  margin-top: 12px;        /* 上に少し余白（任意） */
}
.gate__cta[aria-disabled="true"]:hover { filter: none; }

/* 有効化された状態（同意チェックON） */
.gate__cta.is-enabled {
  background: #1976d2;          /* ブルー */
  pointer-events: auto;          /* クリック可 */
  cursor: pointer;
}
.gate__cta.is-enabled:hover { filter: brightness(0.95); }
.gate__cta.is-enabled:active { transform: translateY(1px); }