@charset "utf-8";
body{
	font-size: 17px;
    line-height: 1.5em;
    font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
    overflow-wrap: break-word;
	word-break: normal;
	color: #333;
	font-feature-settings: "palt";
}
:root {
	--maincolor: #0b86d1;
	--subcolor: #1d95aa;
	--sub2color: #BDA040;
	--bgcolor: #eaf3f9;
	--redcolor: #f29102;
	--yecolor: #FFEB2E;
	--gdcolor: linear-gradient(130deg, rgba(91, 47, 32, 1) 0%, rgba(172, 119, 50, 1) 50%, rgba(91, 47, 32, 1) 100%);

	--serif: 'Shippori Mincho B1', serif;
	--italic: "Lugrasimo", cursive;

	--shadow: drop-shadow(2px 2px 10px #ddd);

	--_radius-base: 10px;
	--_padding: 8px;
	--_radius-inner: calc(var(--_radius-base) - var(--_padding));
}
::selection {
	background: var(--maincolor);
	color: #FFF;
}
::-webkit-scrollbar {width: 12px;}
::-webkit-scrollbar-track {background: #eee;}
::-webkit-scrollbar-thumb {background: var(--maincolor);}

/******共通******/
.sp{display: none!important;}
img{width:auto; height: auto;max-width:100%;}
p{line-height: 1.7em; margin-bottom: 1.7em;}

.right{
  width: 300px;
  display: block;
  float: right;
  padding: 0 1%;
}
.center{text-align: center;}
.img_b{
	text-align: center;
	margin: 0 auto 1.7em auto;
	display: block;
	display: block;
}

.refl{
	-webkit-box-reflect: below 2px -webkit-gradient(linear, left bottom, left 90%, from(rgba(255, 255, 255, 0.3)), to(transparent));
	margin-bottom: 2.3em;
}

.btn{
	margin: 3% auto;
	text-align: center;
}
.btn img{transition: all .5s;}
.btn:has(:hover) img {transform: translateY(-10px);}

:is(p,.img_b,.btn,.box,.movie,.timer,.tail):last-child{margin-bottom: 0;}

/* clearfix */
.cf:before {
    content: "";
    display: table;
}
.cf:after {
    content: " ";
    display: block;
    clear: both;
}

/***テキスト***/
.big{font-size: 1.3em;}
.small{font-size: .8em;line-height: .8em;}
.b{font-weight: 800;}
.u{text-decoration:underline;}
.red{color: var(--redcolor);}
.ye{color: var(--yecolor);}
.ita{font-family: var(--italic);}
.c_txt{
	text-align: center;
	font-size: 1.4em;
}

/*追従*/
.cont{
  width: 170px;
  height: auto;
  position:fixed;
  bottom :5px;
  right: 5px;
  z-index: 1000;
  transition: opacity 0.3s;
}

/*********
header
*********/
.top_head{
	text-align: center;
	padding: .5em;
	font-size: 1.3em;
	font-weight: 600;
	background: var(--maincolor);
	color: #fff;
}
.top_txt{
	text-align: center;
	color: #fff;
	font-size: 1.3em;
	font-weight: 600;
	color: var(--maincolor);
}
.label{
	background: #fff;
	color: var(--maincolor);
	padding: .1em 1em;
	border-radius: 500px;
	margin-right: .5em;
	display: inline-flex;
}
.box .label{background: var(--maincolor); color: #fff;}

header{
	background: url(../img/head_bg.png)center/cover;
	text-align: center;
	display: flex;
	justify-content: center;
    align-items: center;
}

/************
main
************/
.bg{background: var(--bgcolor);}
.main{background: var(--maincolor);}
.wrap{
	max-width: 900px;
	margin: 0 auto;
	padding: 3% 2%;
}

/************/
h2,h3{
	text-align: center;
	font-weight: 700;
	line-height: 1.4em;
	margin: 1.2em auto;
	font-size: 1.5em;
	display: block;
}
h2{
	margin: 0 0 40px;
    position: relative;
    font-size: 1.7em;
    line-height: 1.2;
    border-bottom: 1px solid #dcdddd;
    padding: 3% 0;
	color: var(--maincolor);
}
h2:after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
	transform: translateX(-50%);
    width: 15%;
    height: 3px;
    background-color: var(--redcolor);
}
h2 span:not([class]) {
	font-size: 1.2em;
	color: var(--redcolor);
}
h4{
	color: var(--maincolor);
	font-size: 1.4em;
	font-weight: 700;
	line-height: 1.4em;
	margin-bottom: 1em;
}
h5{
	font-size: 1.2em;
	font-weight: 600;
	margin-bottom: .4em;
	text-align: center;
}

:is(h2,h3,.btn):first-child{margin-top: 0;}

/*******
リスト
*******/
ul:not(ul:last-child),ol:not(ol:last-child){margin-bottom: 1.5em;}
ul:not([class]) li{
    position: relative;
    padding-left: 1.3em;
	margin-bottom: .3em;
}
ul:not([class]) li:before{
    border-radius: 50%;
    width: 7px;
    height: 7px;
    display: block;
    position: absolute;
    left: 5px;
    top: 10px;
    content: "";
	background: var(--maincolor);
}

ul.notes li {
    text-indent: -1em;
    padding-left: 1em;
    margin-bottom: .2em;
	line-height: 1.5em;
	font-size: .9em;
}
ul.notes li::before {content: "※";}

ol:not([class]) li {
	font-weight: 600;
    position: relative;
    padding-left: 30px;
    line-height: 1.5em;
    padding: 0.3em 0 0.3em 30px;
    counter-increment: my-counter; /* li要素ごとにカウンターをインクリメント */
}
ol:not([class]) li:before {
    position: absolute;
    content: counter(my-counter);
    display:inline-block;
    background: var(--maincolor);
    color: white;
    font-weight:bold;
    font-size: 12px;
    border-radius: 50%;
    left: 0;
    width: 23px;
    height: 23px;
    line-height: 20px;
    text-align: center;
    top: 20px;
    transform: translateY(-50%);
}

/******/
.movie{
	width: 100%;
    aspect-ratio: 16/9;
	margin: 0 0 3% 0;
}
.movie iframe {
	width: 100%;
	height: 100%;
}

/******/
.box {
    background: var(--bgcolor);
    padding: 3%;
    margin-bottom: 1.3em;
    box-sizing: border-box;
}
.box:after {
    display: block;
    content: '';
    clear: both;
}
.border{border: var(--maincolor) solid 1px;}

.msg{
	background: url(../img/msg_bg.png)center/cover;
	padding: 5%;
}
.r_name {
    font-family: var(--serif);
	font-weight: bold;
    text-align: right;
	font-size: 1.1em;
}

/****/
h3 img{
	display: block;
	margin: 0 auto .8em auto;
}

.note{
    position: relative;
    background: url(../img/note.png) left top no-repeat;
	padding: 1em;
	margin-bottom: 1em;
	font-size: 1.3em;
	font-style: italic;
	font-family: var(--serif);
	font-weight:bold;
}
.note::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    width: 24px;   /* 画像サイズに合わせて */
    height: 16px;  /* 画像サイズに合わせて */
    background: url(../img/note.png) no-repeat center center/contain;
    transform: rotate(180deg);
    pointer-events: none;
}

.marker {
  /* 初期は透明テキスト、背景非表示 */
  color: transparent;
  background: linear-gradient(to right, var(--maincolor) 0%, var(--maincolor) 100%) 0 100% / 0% 80% no-repeat;
  transition: none;
  padding: 0.2em 0;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* スクロールinで発火 */
.marker.slide {
  animation: marker-appear 1.6s cubic-bezier(.77,0,.18,1) 1 forwards;
  -webkit-animation: marker-appear 1.6s cubic-bezier(.77,0,.18,1) 1 forwards;
}

@keyframes marker-appear {
  0% {
    background-size: 0% 85%;
    background-position: 0% 100%;
    color: transparent;
  }
  35% {
    background-size: 100% 85%;
    background-position: 0% 100%;
    color: #fff;
  }
  /* 35〜60%: 背景フル・文字色そのまま */
  60% {
    background-size: 100% 85%;
    background-position: 0% 100%;
	color: #fff;
  }
  /* 100%: 背景右へ抜けて全消失・文字だけ残る */
  100% {
    background-size: 0% 85%;
    background-position: 100% 100%;
    color: #333;
  }
}

/*吹き出し*/
.tail{
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 600;
	margin: .5% auto 1% auto;
	font-size: 1.2em;
	text-align: center;
	gap: 10px;
}
.tail::before,.tail::after{
	content: '';
	width: 30px;
	height: 3px;
	background: var(--yecolor);
}
.tail::before{transform: rotate(60deg);}
.tail::after{transform: rotate(-60deg);}


/*****/
.step{
	display: flex;
	gap: 10px;
	text-align: center;
	font-size: .9em;
	margin-bottom: 1.3em;
	justify-content: center;
}
.step div{width: calc(100% / 4 - 10px);}
.step_img{
	width: 200px;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 130px;/*角丸*/
}
.step .num{
	text-align: center;
	display: block;
	margin: 0 auto;
	color: #c6c6c6;
	font-size: 1.1em;
}

.prof{
	background: var(--maincolor);
	color: #fff;
	padding: 3%;
	margin-bottom: 1.4em;
}
.prof .index{
	display: flex;
	align-items: center;
	margin-bottom: 1.5em;
}
.prof .index img{width: 35%;}
.prof h3{text-align: left;}
.prof h3 span:not([class]){font-size: .9em; color: var(--bgcolor);}
.prof h3 .name{
	font-size: 1.4em;
	letter-spacing: .1em;
	padding-right: .5em;
}
:is(.prof,.wh) ul li::before{background: #fff;}

/****/
.tktn{
	background: #fff;
	border-radius: 25px 0 25px 0;
	text-align: center;
}
.tktn p{font-size: 1.1em;}

/******/
dl {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
	margin-bottom: 1.3em;
}
dl dt,dl dd {
    box-sizing: border-box;
    font-weight: 600;
    margin-bottom: 0;
    padding: .5em .5em;
}

dl dt {
    flex-basis: 40%;
    flex-shrink: 0;
    text-align: center;
}
dl dd { flex-basis: calc(100% - 40%);}

dl dt.title,dl dd.title {
    background: var(--maincolor);
    color: #fff;
    text-align: center;
    font-size: 1.1em;
	padding: .5em;
}
dl dt.title{border-right: 1px solid var(--bgcolor);}

/**/
.dow{
	color:#FFF;
	font-size:13px;
	margin-left:10px;
	padding:4px 7px;
	background:#333;
	border-radius: 100px;
	vertical-align: middle;
}
.dow_Sat{background: #1e63bd;}
.dow_Sun{background: var(--redcolor);}

/******/
.price{
	background: #fff;
	margin-bottom: 1.4em;
}
.price_txt{
	background: var(--maincolor);
	color: #fff;
	text-align: center;
	font-size: 1.5em;
	font-weight: 600;
	padding: 1em;
	margin-bottom: 0;
}
.price_label{
	display: block;
	font-size: .8em;
	color: var(--bgcolor);
}
.value{
	font-size: 1.6em;
	padding-right: .1em;
}
.price .price_txt .value{font-size: 2.2em;}
.price-info{padding: 1em;}

.price dl{gap : 10px 15px;}
.price dl dt {
	background: var(--bgcolor);
	box-sizing: border-box;
	border-radius: var(--_radius-base);
	text-align: center;
	flex-basis: calc(38% - 15px);
	font-size: 1.1em;
}
.price dl dd { flex-basis: calc(100% - 38% - 15px);}

/*****/
.pay_end{
  pointer-events: none;
  filter: brightness(60%);
}

/****************/
.btn{
	display: block;
	margin: 3% auto;
	border-radius: 5px;
}
.animation{
	-webkit-animation: anime_pulse 1.5s infinite;
	animation: anime_pulse 1.5s infinite;
}
/*アニメーション*/
@-webkit-keyframes anime_pulse {
	0% { -webkit-transform: scale(0.95);
	transform: scale(0.95); }
	70% { -webkit-transform: scale(1);
	transform: scale(1) }
	100% { -webkit-transform: scale(0.95);
	transform: scale(0.95);}
}

.rule{
	border: #eee solid 3px;
	background: #fff;
	padding: 3%;
	/* overflow-y: scroll;
	height: 100px; */
	margin-top: 3%;
	font-size: .9em;
	font-family: 'Noto Sans JP', sans-serif;
	color: #333;
	/* text-align: center; */
}

/*タイマー*/
.timer{
	text-align: center;
	padding: 1% 2%;
	font-family: var(--serif);
	font-size: 1.2em;
	font-weight: 800;
	filter: var(--shadow);
	margin: 1em auto 2em auto;
}
.timer:last-child{margin-bottom: 0;}
.timer p{margin-bottom: 0;}
.counter span{
	font-size: 1.4em;
	padding: .3em .3em;
	margin: 0 .2em;
	border-radius: 5px;
	background: var(--gdcolor);
	color: #fff;
}


/*footer*/
footer{
	background: var(--maincolor);
	padding: 30px 2%;
	text-align:center;
	font-size:14px;
}
footer p{
    line-height: 1em;
	color:#fff;
}
footer a{
	font-size:13px;
	color:#fff;
	margin: 0 .5%;
}

@media screen and (max-width: 768px) {
   /*--- 表示領域が768px以下の場合に適用するスタイル ---*/

}/*///media*/

@media screen and (max-width: 640px) {
   /*--- 表示領域が640px以下の場合に適用するスタイル ---*/
	body{overflow-x: hidden;}

	.sp{display: block!important;}
	.pc{display: none!important;}

	.text p br{display: none;}
	.text p.br br{display: block;}

	.right{
		float: none;
		padding: 0;
		margin: 0 auto 1.3em auto;
		display: block;
		width: 90%;
	}
	.right.refl{
		float: none;
		width: 100vw;
		max-width: 100vw;
		padding: 0;
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		margin-bottom: 2.3em;
	}

	/*追従*/
	.cont{width: 130px;}

	/*********
	header
	*********/
	header {
		flex-direction: column;
		padding: 2em 0;
	}

	/*main*/
	.big{font-size: 1.2em;}
	.c_txt{font-size: 1.3em;}

	h2{
		font-size: 1.5em;
		background-size: 60px;
	}
	h3{font-size: 1.3em;}

	/*****/
	.step{flex-wrap: wrap;}
	.step div{width: calc(100% / 2 - 10px);}

	/***/
	.price dl{gap : 10px;}
	.price dl dt {
		flex-basis: calc(40% - 10px);
		font-size: 1em;
	}
	.price dl dd { flex-basis: calc(100% - 40% - 10px);}

	/*タイマー*/
	.counter{display: block; margin-top: .5em;}

}/*///media*/