@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;
}
:root {
	--maincolor: #c3b7a0;
	--subcolor: #1d95aa;
	--sub2color: #BDA040;
	--bgcolor: #F3F2EF;
	--redcolor: #e77373;
	--yecolor: #FFEB2E;

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

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

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

/*******/
p{
	line-height: 1.7em;
	margin-bottom: 1.5em;
}

.big{font-size: 1.3em;}
.small{font-size: .8em;}
.b{font-weight: 700;}
.u{text-decoration: underline;}
.red{color: var(--redcolor);}
.s{font-size: 0.8em;}

/*******/
.sp{display: none!important;}
img{width:auto;
	height: auto;
	max-width:100%;
}
.center{
	text-align: center;
	display: block;
	margin: 0 auto;
}
.right{
	width: 280px;
	display: block;
    float: right;
	padding: 0 1%;
}
.img_b{
	text-align: center;
	margin: 0 auto 3% auto;
	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: 2em;
}

.flex{
	display: flex;
	gap: 5px;
	justify-content: center;
	align-items: center;
}

.c_text{
	text-align: center;
	font-family: 'Shippori Mincho B1', serif;
	font-size: 1.4em;
	font-weight: 800;
	margin-bottom: 0.8em;
	font-feature-settings: "palt";
	margin-bottom: 1.3em;
	line-height: 1.5em;
}
.c_text span:not([class]) {font-size: 1.3em;}

/**/
.btn{
	text-align: center;
	margin: 1.3em auto;
	transition: all .5s;
}
.btn img{transition: all .5s;}
.btn img:hover,.p_btn:hover,.m_btn img:hover{transform: translateY(-10px);}

/*last-child*/
p:last-child,.img_b:last-child,.btn:last-child{margin-bottom: 0;}

/*追従*/
.cont{
    width: 170px;
    height: auto;
    position:fixed;
    bottom :10px;
    right: 10px;
	z-index: 1000;
}

/********
header
********/
header{
	padding: 6%;
  /*background: url(../img/head_bg.png) center/cover;*/
	text-align: center;
  background: #23346a;
}


/********
main
********/
.bg{background: var(--bgcolor);}
.bg_tktn{background: url(../img/bg_02.png)center/cover; background-attachment: fixed;}
.wrap{
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 2%;
}

/********
index
********/
h1{
  color: #ffffff;
  font-family: var(--serif);
  font-weight: 800;
	font-size: 2em;
}

h2,h3{
	text-align: center;
	font-family: var(--serif);
	font-weight: 800;
	font-size: 1.5em;
	line-height: 1.4em;
	margin-bottom: 1.2em;
}
h2{font-size: 1.8em;}
h2 span:not([class]){color: var(--redcolor);}

h4{
	text-align: center;
	margin-bottom: 3%;
	font-size: 1.4em;
	font-weight: 600;
	line-height: 1.4em;
}
h4 span:not([class]){
	font-size: .9em;
	font-weight: 800;
	font-family: 'Shippori Mincho B1', serif;
	color: #fff;
	background: #866E44;
background: linear-gradient(0deg, rgba(134, 110, 68, 1) 0%, rgba(176, 150, 95, 1) 100%);
	margin: 0 auto 1.5% auto;
	padding: 5px 20px;
	display: block;
	width: fit-content;
	border-radius: 50px;
}
h5 {
    position: relative;
    padding: 1rem;
	font-family: var(--serif);
	font-size: 1.4em;
	line-height: 1.5em;
	font-weight: 800;
    font-weight: bold;
    text-align: center;
	margin-bottom: 3%;
}
h5::before,h5::after {
    position: absolute;
    width: 30px;
    height: 30px;
    content: '';
}
h5::before {
    border-left: solid 2px var(--redcolor);
    border-top: solid 2px var(--redcolor);
    top: 0;
    left: 0;
}
h5::after {
    border-right: solid 2px var(--redcolor);
    border-bottom: solid 2px var(--redcolor);
    bottom: 0;
    right: 0;
}
h6{
	text-align: center;
    padding: 1%;
    background: #eee;
    color: var(--redcolor);
    font-weight: 600;
    font-size: 1.1em;
    margin: 0 auto 1em auto;
    letter-spacing: .1em;
	line-height: 1.2em;
}

.c_txt{
	text-align: center;
	font-family: var(--serif);
	font-size: 1.3em;
	font-weight: 800;
	margin-bottom: 0.8em;
	font-feature-settings: "palt";
}
.c_txt span:not([class]) {font-size: 1.3em;}

/**/
.movie{
	width: 100%;
    aspect-ratio: 16/9;
	margin: 0 0 3% 0;
}
.movie iframe {
	width: 100%;
	height: 100%;
}
.modaal-video-wrap{margin: auto 0!important;}
.m_btn img{
	max-height: 100%;
	width: 100%;
	transition: all .5s;
}


/*******/
.list_bg{
	background: url(../img/list_bg.png)center/cover;
	background-attachment: fixed;
}
.list_bg ul li{
	background: #fff;
	width: fit-content;
	font-size: 1.1em;
	font-weight: 600;
	font-family: var(--serif);
	padding: .3em .5em .3em 1.5em;
}
.list_bg ul li:before {left: 10px;}


/********
お客様の声
********/
.swiper{margin-bottom: 1.7em;}
.swiper .swiper-slide {
	width: 100%;
	height: auto!important;
	padding: 7% 10%;
	background: #fff;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	font-size: .9em;
}
.swiper-button-prev:after, .swiper-button-next:after{
	color: var(--maincolor);
	font-size: 1.7em!important;
}
.swiper .swiper-pagination-bullet-active{background: var(--maincolor);}

/**/
.voice_box{
	border: solid 2px #eee;
	padding: 3%;
	background: #fff;
	height: 250px;
	overflow-y: scroll;
}
.voice_box hr{
	border: none;
	height: 2px;
	margin:  2% 0;
	background: #eee;
}

.r_name{
	display: block;
	margin-right: 0;
	text-align: right;
}
.r_name::after{
	content: "さん";
	font-size: .8em;
}


/**/
.box{
	padding: 3px;
	background: rgb(36,89,146);
  background: linear-gradient(180deg, rgb(225 223 209) 0%, rgba(207, 194, 160, 1) 100%);
	margin: 0 auto;
	display: flex;
    flex-direction: column;
	width: 100%;
	box-sizing: border-box;
  margin-bottom: 1.5em;
}
.box_in{
	padding: 5%;
	background: #fff;
	flex: 1;
}
.flex{
	display: flex;
	gap: 5px;
	margin-bottom: 1.4em;
}
.w_box{
	background: #fff;
	padding: 5%;
	border-radius: 10px;
}


/********/
.prof{
	padding: 3%;
	background: #A78F6C;
background: linear-gradient(0deg, rgba(167, 143, 108, 1) 0%, rgba(237, 232, 220, 1) 100%);
	border-image-slice: 1;
	margin-bottom: 1em;
  background: #ffffff;
}
.prof .p_img{
	display: inline-block;
	width: 25%;
	margin-right: 2%;
    vertical-align: middle;
}
.prof h3{
	display: inline-block;
	width: 72%;
	vertical-align: middle;
	text-align: left;
	font-size: 1.3em;
}
.prof .name{
	background: var(--maincolor);
background: linear-gradient(0deg, rgba(134, 110, 68, 1) 0%, rgba(176, 150, 95, 1) 100%);
	color: #fff;
	padding: .1em .8em .1em 1em;
	font-family: 'Shippori Mincho B1', serif;
	width: fit-content;
	margin: 0.8em 0 0 0;
    border-radius: 0px 50px 50px 0px;
	display: block;
	font-size: 1.1em;
}
.prof .name span{
	font-size: 1.2em;
	padding-right: .5em;
}
hr{
	border: none;
	height: 3px;
	margin: .8em auto;
}


/**/
.tktn_box h4{
	background: rgb(127,91,33);
	background: linear-gradient(90deg, rgba(127,91,33,1) 0%, rgba(191,142,43,1) 50%, rgba(127,91,33,1) 100%);
  margin: 1em auto;
  border-radius: 50px;
  	font-size: 1.4em;
	font-weight: 800;
	line-height: 1.4em;
	padding: 1% 5%;
	color: #fff;
	text-align: center;
	font-family: 'Shippori Mincho B1', serif;
}
.tktn_box{
	background: rgb(246,237,201);
	background: linear-gradient(300deg, rgba(246,237,201,1) 0%, rgba(255,255,255,1) 50%, rgba(246,237,201,1) 100%);
	padding: 4%;
	filter: drop-shadow(3px 3px 7px #dbd6cc);
	box-sizing: border-box;
	font-family: 'Shippori Mincho B1', serif;
	color: #3F2F19;
	font-size: 1em;
	display: grid;
	font-weight: 700;
	margin-bottom: 1em;
}

/*******/
ul:not(ul:last-child){margin-bottom: 1.3em;}
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: "※";}

/*******/
dl{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
	gap : 10px 0;
	font-weight: 600;
	margin-bottom: 1.3em;
}
dl dt {
	background: var(--bgcolor);
	width: 35%;
	padding: 1.3% 2.5%;
	font-size: 1.1em;
	text-align: center;
	margin-bottom: 0;
	box-sizing: border-box;
}
dl dd {
    font-size: 1em;
    width: 60%;
	padding: 0 1em;
	box-sizing: border-box;
}

/********
価格
*********/
.price{
	background: var(--sub2color);
	margin: 0 auto 1.5em auto;
	text-align: center;
	font-weight: 500;
	max-width: 800px;
	font-feature-settings: "palt";
	padding: var(--_padding);
	border-radius: var(--_radius-base);
	/* filter: var(--shadow); */
}
.price_2{background: var(--redcolor);}
.price_3{background: var(--subcolor);}

.List_price.price_2{
    background: var(--redcolor);
    background: linear-gradient(0deg, rgba(235, 235, 235, 0.8) 0%, rgba(235, 235, 235, 0.8) 60%),var(--redcolor);
}
.List_price.price_3{
    background: var(--subcolor);
    background: linear-gradient(0deg, rgba(235, 235, 235, 0.8) 0%, rgba(235, 235, 235, 0.8) 60%),var(--subcolor);
}

/* .price:not(.price_2,.price_3) h4{color: #333;} */
.price h4{
	color: #fff;
	margin-bottom: .5em;
	padding: 1% 0 0 0;
	font-size: 1.5em;
}
.List_price h4{color: #333;}
.price h4 span{
	background: #fff;
    padding: 0.1em 1em;
    border-radius: 50px;
    color: var(--redcolor);
    display: block;
    width: fit-content;
    margin: 0 auto;
    letter-spacing: .1em;
    font-size: .8em;
	margin-top: .3em
}
.price_2 h4 span{color: var(--redcolor);}
.price_3 h4 span{color: var(--subcolor);}

.price_text{
	background: #fff;
	padding: 3%;
	font-size: 1.3em;
	border-radius: 0 0 var(--_radius-inner) var(--_radius-inner);
}
.price:not(:has(h4)) .price_text {border-radius: var(--_radius-inner);}

.price_text p:not(:last-child){
	margin-bottom: 1em;
	line-height: 1.4em;
}

.price_text p span:not([class]){
	font-size: 1.7em;
	font-weight: bold;
	/* font-family: var(--serif); */
	padding: 0 1.5% 0% 1%;
	position: relative;
    background: var(--redcolor);
    background: linear-gradient(0deg, rgba(0,0,0,.2) 0%, rgba(113,113,113,0) 60%),var(--redcolor);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.price_text p s{
	font-weight: bold;
	padding: 0 1%;
}
ruby{
	font-size: .9em;
    padding-left: .4%;
}

.price .notes {
    font-size: .7em;
    text-align: left;
	background: #eee;
    padding: 3%;
    margin: 0 auto;
}
.price img{
	display: block;
	margin-bottom: 2%;
	max-height: 40px;
}
.price a img{
	width: auto;
    max-height: 100%;
    margin: 0 auto;
}

/*吹き出し*/
.tail{
	display: flex;
	justify-content: center;
	align-items: center;
	color: var(--redcolor);
	font-weight: 600;
	margin: 0 auto 0.5em auto;
}
.tail::before,.tail::after{
	content: '';
	width: 30px;
	height: 1px;
	background: #333;
}
.tail::before{transform: rotate(60deg);}
.tail::after{transform: rotate(-60deg);}

/*矢印*/
.arrow_s {
    position: relative;
    padding-left: 12px;
    text-decoration: none;
}
.arrow_s:before {
    content: '';
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 10px;
    border-color: transparent transparent transparent #333;
    position: absolute;
    top: 50%;
    left: -3px;
    margin-top: -7px;
}


/************
決済ボタン
*************/
.pay_wrap{
	display:flex;
	align-items: stretch;
	gap:10px;
}
.pay_btn{
	font-size: .9em;
	display: flex;
	flex-direction: column;
    width: -webkit-fill-available;
}
.pay_btn .price_text{
	flex: 2;
	display:grid;
	align-content: space-evenly;
	font-size: 1.5em;
}
.pay_btn .price_text p{margin: 1em 0;}
.pay_btn .price_text p span{font-size: 1.8em;}
.pay_btn .price_text p .small{font-size: .7em;}
.pay_btn .price_text ruby{font-size: .6em;}

.pay_btn img{margin: 0 auto;}
.pay_btn .price_text p.notes{margin-bottom: 0; font-size: .5em; text-align: center;}

.p_btn {
    text-align: center;
    margin-bottom: 3%;
    width: 100%;
    padding: 13px 0;
    text-decoration: none;
    letter-spacing: .1em;
    border-radius: 5px;
	background: #0CA401;
	background: linear-gradient(180deg, #54BD4C 0%, #0CA401 100%);
	color: #fff;
	box-sizing: border-box;
    border: #0CA401 solid 2px;
	font-weight: 600;
	font-family: var(--serif);
	position: relative;
	transition: all .5s;
	font-size: .9em;
}
.p_btn::after {
	position: absolute;
	top: 50%;
	right: .7em;
	width:  .3em;
	height: .3em;
	transform: translateY(-50%) rotate(45deg);
	border-right: 2px solid currentColor;
	border-top: 2px solid currentColor;
	content: "";
}

/*タイマー*/
.timer{
	text-align: center;
	padding: 1% 2%;
	font-family: var(--serif);
	font-size: 1.2em;
	font-weight: 800;
	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(--maincolor);
	color: #fff;
}

/************
募集概要
*************/
.paymentTable{
	width: 100%;
	border: 1px solid #aaa;
	margin: 2% 0;
	font-size: 0.9em;
	background: #fff;
}
.paymentTable th{
	width: 30%;
	border: 1px solid #767676;
	background: #ADADAD;
    color: #fff;
}
.paymentTable td{
	width: 70%;
	border: 1px solid #aaa;
	padding: 10px;
}

.paymentTable h6{
	font-size: 1.1em;
	margin: 1em 0 .5em 0;
	padding: .4em .6em;
	color: #333;
	text-align: left;
	letter-spacing: normal;
}
h6.price{color: #fff; border-radius: 5px; text-align: center; max-width: 100%;}
h6:first-child{margin-top: 0}
.paymentTable .big{font-size: 1.2em;}

.kiyaku{
	margin: 2% 0;
	width: 100%;
	height: 200px;
	background: #fff;
}
.kiyaku iframe{width: 100%;}
.paymentTable img{
	display: block;
	height: 30px;
	margin: .5% 0 3% 0;
}

/********
footer
********/
footer{
	background: #333;
	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以下の場合に適用するスタイル ---*/

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

	.text p:not([class]) br{display: none;}
	.text p.br br,.text p br.br,
	.text .price p br{display: block;}

	.right{
		float: none;
		width: 90%;
		margin: 0 auto 5%;
	}
	.flex{flex-direction: column;}

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

	/*header*/

	/*main*/
	h2{font-size: 1.4em;}
	h2::after {height: 18px;}
	h3,h4{font-size: 1.3em;}
	h5,.c_txt{font-size: 1.1em;}

	h6{font-size: 1em;
	letter-spacing: normal;}

	/**/
	.m_btn{
		width: 90%;
	}

	/*form*/
	.form-mail p{font-size: 1.1em;}
	.form-item {width: 100%;}
	.label {display: none;}
	.input {margin: 1% auto;}
	.form_btn{width: 100%;}

	/**/
	table.table thead {display:none;}
	table.table tbody th,table.table tbody td {display:block;}
	table.table tbody td::before {
		content: attr(label);
		float: left;
		clear:both;
		font-weight:600;
	}
	table.table tbody td {
		display: block;
		position: relative;
		padding: .625em .625em .625em 10em;
		border-right: none;
	}
	table.table td::before {
		content: attr(data-label);
		font-weight: bold;
		position: absolute;
		left: 10px;
	}

	/*タイマー*/
	.counter {display: block;}

  
  /**/
	.prof .p_img{
		display: block;
		width: 40%;
		margin: 0 auto 1em auto;
	}
	.prof h3{
		display: block;
		width: 100%;
		font-size: 1.2em;
	}
  
	/********
	価格
	*********/
	.price h4{font-size: 1.3em;}
	.price_text{font-size: 1.2em;}

	/************
	決済ボタン
	*************/
	.pay_wrap{flex-direction: column;}

	/************
	募集概要
	*************/
	.paymentTable{border:none;}
	.paymentTable tr th,td{
		width:100% !important;
		display:inline-block;
		border: none;
		padding: 5px 0;
	}
	.paymentTable td{padding:0;
		border: none;
		padding: 10px;
		box-sizing: border-box;
	}

}/*///media*/