@charset "utf-8";

/*--- reset */

html {
	overflow-y: scroll; 
	overflow-x: hidden;
}
body,
html {  
    height: 100%;
	font-size: 62.5% ;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
figure{
	margin: 0;
	padding: 0;
}
	
address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
	font-style: normal;}

table {
	border-collapse: collapse;
	border-spacing: 0;
	font-size:100%;
}


caption {text-align: left;}

q:before,
q:after {
	content: '';}

object,
embed {vertical-align: top;}

h1,
h2,
h3,
h4,
h5,
h6 {font-size: 100%;}

img,
abbr,
acronym,
fieldset {border: 0;}

img{
	vertical-align: bottom;
	line-height: 0;
		width:100%;
		height:auto;
}

li {list-style-type: none;}
li img{vertical-align: bottom;}
p{
	text-justify: inter-ideograph;
}

a {color: #0a337f; text-decoration:none;}
a:hover{opacity:0.7; transition: all .3s; }
.underline{text-decoration:underline;}

/* clearfix */
.clear:before,
.clear:after {
    content: " ";
    display: table;
}

.clear:after {
    clear: both;
}

/*hr reset*/
hr {
	border: 0;
	height: 0;
	margin: 0;
	padding: 0;
}
.hr01{
	border-bottom:1px #ccc solid;
}

.f-center{text-align:center !important;}
.f-left{text-align: left !important;}
.f-right{text-align:right !important;}

.fs-14{font-size: 80%;}
.fs-20{font-size: 110%;}
.fs-30{font-size: 150%;}

.fc-white{color: #fff;}
.fc-pink{color: #C00393;}
.fc-brown{color: #673703;}
.fc-orange{color: #E96507;}

.f-marker{ background: rgba(0, 0, 0, 0) linear-gradient(transparent 70%, #FFF1A3 0%) repeat scroll 0 0;}

.f-bold{font-weight:600;}

.f-shadow{ text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);}

.palt{font-feature-settings: "palt"; }

/*margin*/
.mb20{margin:0 0 1rem 0;}
.mb40{margin:0 0 2rem 0;}
.mb60{margin:0 0 3rem 0;}
.mb80{margin:0 0 4rem 0;}

/*padding*/
.pb80{padding: 0 0 4rem;}
.ptb80{padding: 4rem 0;}
.ptb140{ padding: 7rem 0;}

/*flex*/
.flex{
	display:block;
}
.order2{order: 2;}

/*iphone reset*/
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*====================================
 default 
====================================*/
body {
	background: #fff;
	color: #333;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4em;/*14px*/
	font-weight:400;
	line-height: 2;
	text-align: left;
	overflow-wrap: anywhere;
	word-break: normal;
	line-break: strict;
}
#wrap{
  position:relative;
  height:auto;
}
#wrap:before {
    content: "";
    display: block;
}
@media screen and (max-width: 768px) {
	.sp-none{display:none;}
	
	#wrap{
		overflow-x: hidden;
	}
}

/*#wrap section*/
.contents{
	width:92%;
	margin:0 4%;
	position:relative;
}


.f-min {
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	font-style: normal;
}

.align-c{
	align-items: center;
}

@media screen and (min-width: 769px) {
	.pc-none{
		display:none;
	}
	a[href^="tel:"] {
		pointer-events: none;
	}
	.contents{
		opacity: 0; 
		transition: all 1s; 
		overflow-x: none;
	}
	.main .contents,
	.btm-bnr .contents,
	footer .contents{
		opacity: 1;
	}
}

/* フェードイン用のクラス */
.fadeIn {
    opacity: 1;
}
/*animation*/
.fade-in {
	opacity: 0;
	transition-duration: 1s;
	transition-property: opacity, transform;
}
.fade-in-up {
	transform: translate(0, 50px);
}
.fade-in-left {
	transform: translate(-50px, 0);
}
.fade-in-right {
	transform: translate(50px, 0);
}
.fade-in-down {
	transform: translate(0, -50px);
}
.scroll-in {
	opacity: 1;
	transform: translate(0, 0);
}

/*====================================
 HEADER
====================================*/

/*====================================
 MAIN
====================================*/
.main .contents{
	margin: 0 auto;
	width: 100%;
}

/*====================================
 cta
====================================*/
.cta{
	background: url("../images/bg_cta.webp") no-repeat center top / cover;
}
.cta .first{
	margin-bottom: -2rem;
	font-size: 2.4rem;
	position: relative;
	z-index: 1;
}
.cta .first span{
	padding: 1rem 2rem;
	border-radius: 100px;
	background: #673703;
	color: #fff;
}
.cta .product h3{
	padding: 1rem;
	font-size: 2.8rem;
	background: linear-gradient(90deg, #E06B17 0%, #F6AC35 50%, #E06B17 100%);
	line-height: 1.1;
}
.cta .seal-ph{
	background: #fff;
}
.cta .product ul{
	padding:  1.5rem;
	gap:0.5rem;
	line-height: 1.4;
	font-weight: 500;
	display: flex;
	text-align: center;
}
.cta .product li{
	padding: 0.5rem;
}
.cta .product ul{
	flex-direction: column;
}
.cta .product .list2{
	flex-direction: row;
	justify-content: center;
}
.cta .product .list1 li{
	color: #29427E;
	background: #E6EDF8;
}
.cta .product .list1 li span{
	margin-left: 1rem;
	font-size: 80%;
	color: #222;
}
.cta .product .list2 li{
	color: #F07218;
	border: 1px solid #F07218;
	box-sizing: border-box;
}
.cta .price-box{
	display: flex;
	justify-content: center;
	gap:1rem;
}
.cta .offbox{
	padding: 1rem;
	font-size: 1.5rem;
	line-height: 1.2;
	background:linear-gradient(90deg, #E3010D 0%, #B6030D 100%);
	color: #fff;
}
.cta .offbox span{
	color: #FDF176;
}
.cta .offbox .num{
	font-size: 3.6rem;
}
.cta .tujo{
	font-size: 1.7rem;
	line-height: 1;
	text-decoration-line: line-through;
	text-decoration-style: double;
	text-decoration-color: rgba(255,185,49,0.8);
	text-decoration-thickness: 2px;
}
.cta .price{
	font-size: 1.4rem;
	color: #B5030D;
	line-height: 1;
	display: flex;
	align-items:end;
}
.cta .price .num{
	font-size:6rem;
}
.cta .product .caution{
	padding: 0 1.5rem 2rem;
	font-size: 80%;
	line-height: 1.4;
}

.cta .kaiketsu{
	padding:0 0 2rem;
	color: #fff;
	background: linear-gradient(180deg, #8E3D0B 0%, #3F2D0A 100%);
}
.cta .kaiketsu figure{
	width: 50%;
	top: -6rem;
	left: 50%;
	transform: translateX(-50%);
	margin-bottom: -7rem;
	position: relative;
}
.cta .kaiketsu h2{
	font-size: 2.7rem;
}
.cta .kaiketsu h2 span{
	padding: 0 0.3rem;
	color: #222;
	background: #FFF8B3;
}


/*====================================
 contents
====================================*/
.fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 10;
}

.box-shdw1{
	box-shadow: 0 0 30px rgba(113,83,24,0.15);
}
.w-box1{
	background: rgba(255,255,255,1);
}
.w-box5{
	background: rgba(255,255,255,0.5);
}
.w-box7{
	background: rgba(255,255,255,0.7);
}
.box-blur{backdrop-filter: blur(4px);}

/*H2*/
h2, h3, h4{
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	line-height:1.4;
	position: relative;
	font-feature-settings: "palt" 1;
}
h2{
	font-size:3.2rem; /*4.2*/
	text-align:center;
}
#wrap .fs-mini{
	font-size: 2rem;
}
#wrap .fs-bg{
	font-size: 4.2rem;
}
h2 .f-en{
	font-size: 5rem;
	font-family: "Shippori Mincho", serif;
	display: block;
	line-height: 0.5rem;
}
h3{
	font-size: 2.4rem;
}

/*onayami*/
.onayami h2{
	font-size: 2.8rem;
}
.onayami h3{
	margin-top: -6.5rem;
}
.onayami .one{
	padding: 3rem 0;
	color: #fff;
	text-align: center;
	background: url("../images/onayami_bg_sp.webp") no-repeat center top #000;
	background-size: cover;
}
.onayami .one h4{
	font-size: 2rem;
}
.onayami .one h4 span{
	font-size: 2.8rem;
	color: #FDF176;
}

/*after*/
.after{	
	padding: 0 0 4rem;
	background: #FEF9EE;
}
.kieta{
	margin-top: -5rem;
}
.kieta .fuki{
	margin-bottom: -2rem;
	text-align: center;
}
.kieta h4{
	margin-bottom: -1.5rem;
	padding:0 2rem 0.75rem 2rem;
	font-size: 2.6rem;
	line-height: 1.3;
	background:linear-gradient(0deg, #A30215 0%, #FFB880 100%);
	color: #fff;
	display: inline-block;
}
.kieta h4 span{
	font-size: 1.8rem;
}
.kieta h4::after{
	width: 24px;
	height: 10px;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	clip-path: polygon(100% 0, 0 0, 50% 100%);
	background: #A30215;
	position: absolute;
	content: '';
}
.kieta ul{
	padding: 1.75rem;
}
.kieta ul li{
	padding:0.25rem 0 0.25rem 2.5rem;
	font-size: 1.5rem;
	font-weight: 400;
	border-bottom: 1px dashed #ccc;
	position: relative;
}
.kieta ul li::before{
	width: 16px;
	height: 16px;
	left: 0;
	top: 12px;
	background: url("../images/icon_check.svg") no-repeat left 0;
	background-size: cover;
	position: absolute;
	content: '';
}
.kieta ul li:last-child{
	border-bottom: none;
}
.cover{
	background: linear-gradient(180deg, #FEF9EE 0%, #FAD0AE 15%, #FEF9EE 60%, #FEF9EE 100%);
}
.cover .box-blur{
	padding: 2rem;
	line-height: 1.7;
}

/*reason*/
.reason{
	background: url("../images/bg_reason.webp") repeat-y center top;
	background-size: cover;
	counter-reset: number 0;
}
.reason .ttl{
	padding: 4rem 0 1rem;
}
.reason .fs-bg{
	display: block;
}
.reason .f-en{
	color: rgba(255,255,255,0.15);
}
.reason h3 .step{
	margin-bottom: 1rem;
	font-size: 1.7rem;
	position: relative;
	display: block;
	color: #F6AC35;
	font-family: "Shippori Mincho", serif;
}
.reason h3 .step::before{
	font-size: 5rem;
	left: 6.5rem;
	bottom: 0;
	line-height: 1;
	counter-increment: number 1; 
	content: "0" counter(number) ;
	position: absolute;
}
.reason h3 .step::after{
	width: 100px;
	height: 1px;
	background: #F6AC35;
	left: 13rem;
	bottom: 0.5rem;
	position: absolute;
	content: '';
}
.reason figure{
	margin: 1rem 8% -4rem -4%;
}
.reason .box-wrap2 figure{
	margin: 1rem -4% -2rem 8%;
}
.reason p{
	padding: 2rem;
	position: relative;
	z-index: 1;
}
.reason .hojo{
	padding: 0.75rem;
	font-size: 115%;
	display: block;
	line-height: 1.4;
	background: #F4F1EC;
}
.reason .hojo .fc-orange{
	font-size: 130%;
}
.reason .box{
	margin: 1rem 8% 0 -4%;
}
.reason .box ul{
	padding-top: 2rem;
	gap:0.5rem;
	display: flex;
	justify-content: center;
}
.reason .box li{
	padding: 0.75rem;
	color: #D0993F;
	border: 1px solid #D0993F;
	line-height: 1;
	font-weight: 500;
}
video{
	width: 100%; 
	height: auto;  
	max-width: 100%;
	display: block; /*下の隙間対応*/
}

/*long*/
.long{
	background: linear-gradient(180deg, #BF8D2A 0%, #715318 100%);
}
.long h2{
	font-size: 2rem;
	color: #fff;
}
.long h2 span{
	font-size: 2.7rem;
	color: #FFF8B3;
}
.long dl{
	position: relative;
}
.long dt{
	padding: 0.25rem 1rem;
	bottom: -2rem;
	left: 1.5rem;
	color: #fff;
	background: #EC6D6A;
	font-weight: 500;
	display: inline-block;
	position: absolute;
}
.long dd{
	padding: 1.5rem 1.5rem 2.5rem;
	background: linear-gradient(180deg, #fff 0%, #fff 60%, #FFF7EB 100%);
	border: 1px solid #fff;
}

/*howto*/
.howto{
	background: url("../images/bg_howto.webp") no-repeat center center;
	background-size: cover;
}
.howto .f-en{
	color: #EFE2CE;
}
.howto .finish .f-en{
	position: relative;
	z-index: 10;
}
.howto .num span{
	padding: 0 2rem;
	font-size: 1.8rem;
	border-radius: 50px 50px 0 0;
	background: #D0993F;
	color: #fff;
	display: inline-block;
}
.howto dl{
	padding: 2rem;
	line-height: 1.6;
	background: #fff;
	box-sizing: border-box;
	border: 1px solid #D0993F;
}
.howto dt{
	font-size: 2rem;
}
.howto .finish{
	padding: 4rem 0;
	background: #F6AC35;
	position: relative;
}
.howto .finish::before,
.howto .finish::after{
	width: 50%;
	height: 60px;
	background: #F6AC35;
	top: -59px;
	position: absolute;
	content: '';
}
.howto .finish::before{
	left: 0;
	clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.howto .finish::after{
	right: 0;
	clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}
.finish .f-en{
	color: rgba(255,255,255,0.3);
}
#wrap .finish .fs-bg{
	font-size: 2.8rem;
}
.finish .box-wrap{
	padding: 0 0 2rem;
	background: linear-gradient(180deg, #fff 0%, #f6f6f6 100%);
	text-align: center;
}
.finish h3{
	font-size: 2rem;
}
.finish h3 .f-marker{
	font-size: 2.8rem;
}
.finish .w-box1{
	padding: 1.5rem;
}
.youtube{
	margin: 0 auto;
	max-width: 900px;
	width: 100%;
	aspect-ratio: 16 / 9;
}
.youtube iframe {
	width: 100%;
	height: 100%;
}
.youtube_short{
	 width: 100%; /* 伸縮する横幅 */
	 max-width: 400px; /* 最大の横幅 */
	 margin: auto; /* 画面の中央に配置 */
}
.youtube_short iframe{
	 aspect-ratio: 9 / 16;
	 width: 100%;
	 height: 100%;
}

/*support*/
.support{
	background: #F4F2ED;
}
.support .ttl-box{
	padding: 0.5rem 0;
	color: #fff;
	font-weight: 500;
	background: #673703;
	text-align: center;
}
.support .f-en{
	color: #ECE5D9;
}
.support .fs-mini{
	color: #E96507;
	display: block;
}
.support .w-box1{
	padding: 2rem 2rem 1rem;
}
.support dl{
	position: relative;
}
.support dt{
	padding: 0 1rem;
	font-size: 1.7rem;
	position: absolute;
	background: #333;
	bottom: 0;
	left: 0;
}

/*voice*/
.voice{
	background: url("../images/bg_voice.jpg") repeat;
}
.reason .ttl,
.voice .ttl{
	padding: 4rem 0 2rem 0;
	background: linear-gradient(90deg, #FFB931 0%, #EE6E13 100%);
	position: relative;
}
.voice .ttl::before,
.voice .ttl::after{
	background: rgba(255,255,255,0.15);
	width: 100%;
	height: 2px;
	left: 0;
	position: absolute;
	content: '';
}
.voice .ttl::before{
	top: 0.5rem;
}
.voice .ttl::after{
	bottom: 0.5rem;
}
.voice .f-en{
	color: rgba(255,255,255,0.15);
}
.voice .ttl-box{
	display: flex;
	justify-content: flex-start;
	align-items: baseline;
	position: relative;
	z-index: 2;
}
.voice .box-wrap{
	margin: 0 -4% 2rem 6%;
}
.voice .box-wrap2{
	margin: 0 6% 2rem -4%;
}
.voice .box-wrap2 .ttl-box{
	justify-content: flex-end;
}
.voice .ttl-box figure img{
	margin: 0 0 -3.5rem -15%;
	width: 100px;
	height: 100px;
	object-fit: cover;
	border-radius: 50%;
	background: #fff;
}
.voice .box-wrap2 figure{
	order: 3;
}
.voice .box-wrap2 .ttl-box figure img{
	margin: 0 0 -3.5rem 15%;
}
.voice .ttl-box h3{
	font-size: 3rem;
	font-family: "Carattere", cursive;
	font-weight: 400;
	font-style: normal;
	color: #DAA612;
}
.voice .ttl-box p{
	margin-left: 1rem;
	padding: 0.5rem;
	line-height: 1;
	font-weight: 500;
	background: #DAA612;
	color: #fff;
}
.voice .txt-box{
	padding: 3rem 2rem;
	background: rgba(255,255,255,0.5);
	position: relative;
	z-index:1;
}
.voice .txt-box h4{
	margin: 1rem 0;
	padding-bottom: 1rem;
	font-size: 2rem;
	color: #673703;
	border-bottom: 1px solid #CBBEA4;
}

/*faq*/
.faq .f-en{
	color: #eee;
}
.faq dl{
	border-top: 1px solid #CBBEA4;
}
.faq dt, .faq dd{
	padding: 1.5rem 0;
}
.faq dt{
	padding-left: 3rem;
	font-size: 1.8rem;
	line-height: 1.4;
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	position: relative;
	border-bottom: 1px solid #CBBEA4;
}
.faq dt::before{
	font-size: 2.4rem;
	content: 'Q';
	font-family: "Shippori Mincho", serif;
	font-weight: 600;
	color: #DAA612;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

/*about*/
.about{
	padding: 0 0 3rem;
	background: #F5E58D;
}
.about .contents{
}
.about .box-wrap{
	padding: 1.5rem;
	background: #fff;
}
.about h2{
	padding: 1.5rem 0;
	font-size: 2.4rem;
	color: #8F420B;
	border-bottom: 1px solid #CBBEA4;
}
.about .logo-bg{
	margin: 0 auto;
	width: 70%;
	height: auto;
}

/*====================================
 FOOTER
====================================*/
footer{
	font-size:1.3rem;
	text-align:center;
	color:#fff;
	background:#222;
	padding:4rem 0 18rem;
}
footer a{
	color: #fff;
}
footer li{
	padding: 0.5rem 0;
}
footer p{
	font-size: 1rem;
	color: #ccc;
}

#scrollUp {
	bottom:12rem;
	right: 0;
}
#scrollUp img{
	width:60px;
	opacity: 0.7;
}


/*btm-bnr*/
.btm-bnr {
	z-index: 100;
    bottom: 0;
    width: 100%;
}
.btm-bnr .contents{
	width: 94%;
	padding:3% 0;
}
.btm-bnr.fixed{
	background:rgba(0,0,0,0.5);
}
.btm-bnr .contents{
	padding: 3rem 0;
}
.btm-bnr p{
	font-size: 3rem;
	position: relative;
	z-index: 200;
	color: #000;
	letter-spacing: -0.05em;
}
.btm-bnr p a{
	padding: 1.5rem 2.5rem;
	border-radius: 50px;
	color: #fff;
	background: linear-gradient(180deg, #fe9c04 0%, #fd6402 100%);
	box-shadow:0 6px 0 0 rgba(0, 0, 0, 0.2);
}
.btm-bnr p a span{
	background: url("../images/icon_btn.png") no-repeat right center;
	background-size: 1.8rem;
	padding-right: 3rem;
}