@charset "UTF-8";
/* CSS Document */
*{ 
	margin: 0px;
	padding: 0px;
	font-size: 14pt;
	line-height: 1.5em;
}
html,body{
	margin: 0;
	padding: 0;
}
a{
	text-decoration: none;
}
ul{
	list-style: none;
}
body{
	box-sizing : border-box;
	overflow-x: hidden;
	width: 100%;
	margin: 0 auto;
	font-family:　YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif",sans-serif;
}
h1,.big{
	font-size: 5em;
}
h2,.midium{
	font-size: 4em;
}
h3,.small{
	font-size: 2em;
}
.font-ss{
	font-size:0.5em;
}
.m-bottom150{
	margin-bottom: 80px;
}
/*--------------headder------------------*/
.container{
	position:relative;
}
.bgi{
	background-image: url("../img/topimg.png");
	background-size: cover;
	width: 500px;
	height: 500px;
	position:absolute;
	bottom: 550px;
	right: 0px;
	z-index: -1;
}
.hukidashi{
	position: absolute;
	width:30%;
	height:auto;
	top:0px;
	left: 0px;
}
.hukidashi img{
	display: inline-block;
	width: 100%;
	height: auto;
}
.hukidashi p{
	font-weight: bold;
	color: #fabe00;
	position: absolute;
	top:40%;
	left:45%;
	-ms-transform: translate(-40%,-50%);/*ベンダープレフィックス*/
  -webkit-transform: translate(-40%,-50%);/*ベンダープレフィックス*/
  transform: translate(-40%,-50%);/*センター寄せの修正*/
  color: #000;
  font-size: 1.8rem;
  margin: 0!important;/*文字がずれている場合や*/
  padding: 0!important;/*文字が折り返される場合*/
}
.pink{
	background-color: rgba(250,220,124,0.4);
}
.display-n{
	display: none;
}
.tac{
	text-align: center;
}

h1{
	padding-top: 100px;
	text-shadow: #fb5555 5px 3px 8px;
	clear: both;
}
h1 span{
	font-size: 0.5em;
	text-shadow: none;
}
.lh{
	display: inline-block;
	line-height: 1.4em;
}
.fs15{
	font-size:1.5em;
}
/*その他と主な共通部分は省略*/

a.btn-solid,a.btn-solid2 {
padding: 20px 30px;
  color: #fff;
  border-top: 4px solid #fb8282;
  border-right: 4px solid #b84c00;
  border-bottom: 4px solid #b84c00;
  border-left: 4px solid #fb8282;
  border-radius: 0;
  background: #fb5555;
	opacity: 0.9;
}
a.btn-solid span{
	font-size: 2em;
	font-weight: 200;
}
a.btn-solid2 span{
	font-size: 1.5em;
}
a.btn-solid:hover ,a.btn-solid2:hover{
  color: #fff;
  border-top: 4px solid #b84c00;
  border-right: 4px solid #fb8282;
  border-bottom: 4px solid #fb8282;
  border-left: 4px solid #b84c00;
}
/*a.btn{
	padding: 10px 20px;
	border-radius: 10px;
	width: 200px;
	display: block;
	margin: 0 auto;
	clear: bith;
}
a.btn--orange {
  color: #fff;
  background-color: #fb5555;
  border-bottom: 5px solid #b84c00;
}
a.btn--orange:hover {
  margin-top: 3px;
  color: #fff;
  background: #fb5555;
  border-bottom: 2px solid #b84c00;
}
a.btn--shadow {
  -webkit-box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .3);
}*/
@media screen and (max-width: 1290px) {
	.hukidashi p{
		font-size:1.3em;
	}
	a.btn-solid{
		width: 100%;
	}
}
@media screen and (max-width: 677px) {
	.hukidashi p{
		font-size:0.8em;
	}
	.pink{
		padding: 0px 30px;
	}
	h1{
		font-size: 3em;
	}
	.fs15{
		font-size: 1em;
	}
	.moji{
		font-size: 1em;
		background-color: rgba(255,255,255,0.6);
		padding: 10px 20px;
		margin-bottom: 50px;
	}
	a.btn-solid span{
		font-size: 2em;
	}
}
@media screen and (max-width: 414px){
	.bgi{
		background-image: none;
	}
	a.btn-solid2 span{
	font-size: 0.6em;
}
	a.btn-solid2{
		padding: 30px 40px;
	}
}
/*--------------class_tg---------------*/
.tg-list{
	width: 600px;
	margin: 150px auto 50px;
	font-weight: bold;
	color: #fb5555;
}
.tg-list li{
	margin-bottom: 30px;
}
.aic{
	display: flex;
	align-items: center;
	gap:8px;
}
.bg_fadc7c{
	background-image: url("../img/yajirushi.png");
	background-size: cover;
	margin: 0 auto;
	text-align: center;
	padding: 50px 0px 100px;
}
.w50p{
	width:50px;
	height: auto;
}
.check{
	display: inline-block;
	margin-right: 20px; 
}
.dod span{
   text-emphasis: circle #fb8282;
   font-size: 1em;
}
.dod{
	color:#626262;
}
@media screen and (max-width:620px){
	.tg-list{
		width: 100%;
	}
	.tg-list li{
		font-size: 1.5em;
	}
	.w50p{
		width: 20px;
	}
}
@media screen and (max-width:540px){
	.bg_fadc7c{
		background-size: 100%;
	}
}
/*--------------class_service---------------*/
.width{
	width: 50%;
}
.service{
	padding-right: 50px;
}
.d-block{
	display: block;
}
.f-left{
	float: left;
}
.icon-text{
	display: flex;
	align-items: center;
	gap: 0px;
}
.icon-text2{
	display: flex;
	align-items: center;
	gap: 5px;
}
.icon-text3{
	display: flex;
	align-items:center;
	gap: 20px;
}
.fuchidori {
  color: #fff;
  -webkit-text-stroke: 1px #000;
  /*-webkit-text-stroke: 1px #000;*/
}
.shadow{
	text-shadow: #e79a2c 5px 3px 8px;
}
@media screen and (max-width: 1290px){
	.service h2{
		font-size: 4em;
	}
	.service{
	padding-right: 0px;
}
}
	@media screen and (max-width: 700px){
		.service .small{
			font-size: 1em;
		}
	}
	@media screen and (max-width: 540px){
		.servise h2{
			font-size: 2em;
		}
	}	
	@media screen and (max-width: 460px){
		.service h3{
			font-size: 1.5em;
		}
		.service .f-left{
			clear:both;
		}
		.font-ss{
		font-size: 0.3em;
	}
		.icon-text{
			display: block;
		}
		.width{
			width:100%
		}
	}
/*--------------class_benefit---------------*/
.w100{
	width:100%;
}
.catch{
	margin: 50px 0px;
}

.clg{
	color: #626262;
}
.clg span{
	font-size: 0.8em;
}
.benefit span::after {
position: absolute;
left: 0;
content: '';
width: 100%;
height: 2px;
background: #000000;
bottom: -1px;               /*アンダーラインがaタグの下端から現れる*/
transform: scale(0, 1);     /*アンダーラインの縮尺比率。ホバー前はx方向に0*/
transform-origin: left top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の左端*/
transition: transform 0.3s; /*変形の時間*/
}
.benefit span:hover::after {
transform: scale(1, 1);     /*ホバー後、x軸方向に1（相対値）伸長*/
transform-origin: left top; /*左から右に向かう*/
}

.textDecorationMarker {
font-size: 1em;	
  text-decoration-color: #fadc7c;
  text-decoration-line: underline;
  text-decoration-thickness: 8px;
  text-underline-offset: -5px;
box-decoration-break: slice; /* Firefox用に指定 */
  -webkit-box-decoration-break: slice; /* Firefox以外のブラウザ用に指定 */
  transition: background-size 1.2s ease-out;
}
	@media screen and (max-width:450px){
		.benefit .midium{
			font-size: 2em;
		}
	}
/*--------------class_performance---------------*/
.performance{
	padding: 50px 50px;
}
.percent{
	padding: 50px 100px 100px;
	margin: 0 auto;
}
.circle{
	width: 400px;
	height: 400px;
	background-color: #fb5555;
	border-radius: 50%;
	color: #fff;
	font-weight: bold;
	float: left;
	line-height:150px;
	margin-bottom: 50px;
}
.circle:nth-child(2){
	margin-left: 13%;
}
.clear-b{
	clear: both;
}
.fwb{
	font-weight: bold;
}
.c-red{
	color: #fb5555;
}
.price img{
	width: 80%;
	display: block;
	margin: 0 auto;
}
.prana{
	margin-bottom: 50px;
	text-align: left;
}
/* CSSアニメーションの指定 */
.Headline{
  animation: SlideIn 3s infinite;
	margin-bottom: 20px;
}
.w80{
	width:80%;
}
	.blue{
		color:#2e93ba;
	}
	.purple{
		color:#8f56a6;
	}
	.green{
		color:#5ba656;
	}
/* CSSアニメーションの設定 */
@keyframes SlideIn {
  0% {
    opacity: 0;/*初期状態では透明に*/
    transform: translateX(64px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
@media screen and (max-width: 1291px){
	.dn{
		display: none;
	}
	.prana{
		display:block;
	}
	.percent{
		padding: 50px 0px 100px;
		text-align: center;
	}
	.prana li{
		margin-bottom: 20px;
		font-size:1.5em;
	}
}
@media screen and (max-width: 1020px){
	.circle{
		width: 300px;
		height: 300px;
	}
	.lesp_percent{
		font-size: 4em;
	}
}
@media screen and (max-width: 789px){
	.circle{
		clear: both;
		width: 300px;
		height: 300px;
		margin: 0 auto 50px;
		line-height:100px;
	}
	.circle:nth-child(2){
		margin-left: 0px;
	}
	.percent{
		width: 400px;
	}
}
@media screen and (min-width: 938px){
	.dn{
		display: block;
	}
	.prana{
		display: none
	}
}
@media screen and (min-width: 476px){
	.prana ul li img{
		width:300px;
		height: auto;
	}
	.Headline{
		fontsize: 2.5em;
	}
	.list-tx li{
		fontsize: 12pt;
	}
}
/*--------------class_voice---------------*/
.voice{
	background-color: #fbd5d5;
	padding: 100px 50px;
}
.voice h2{
	padding: 30px 30px 0px;
	font-size: 3em;
	text-align: center;
}
.bcfff{
	background-color: #fff;
}
.p30{
	padding: 30px 20px 30px 0px;
}
.mtop100{
	margin-top: 100px;
}
.textDecorationMarker2{
	font-size: 1em;	
  	text-decoration-color: #fbd5d5;
  	text-decoration-line: underline;
 	text-decoration-thickness: 8px;
  	text-underline-offset: -5px;
}
@media screen and (max-width: 1290px){
	.voice{
		padding: 50px 50px 80px;
	}
	.voice_p{
		font-size: 1em;
	}
	.voice h2{
		font-size: 2em;
	}
	.voice h3{
		font-size: 1.3em;
	}
	.mtop100{
		margin-top: 80px;
	}
}
@media screen and (max-width: 745px){
	.f-left{
		float: none;
	}
}
@media screen and (max-width: 500px){
	.voice h2{
		font-size: 1.3em;
	}
}
/*--------------class_gift---------------*/
.gift{
	background: #fcd96a;
	padding: 30px 20px 100px;
}
.gift h3{
	color:#fff;
}
.gift h2{
	margin-bottom: 30px;
}
.gift h2 span{
	font-size: 0.6em;
}
.gift h4{
	font-size: 3em;
}
.present{
	margin: 0px 20px 50px;
}
.p-icon{
	display: inline-block;
	width: 100px;
}
.p-right{
	float: right;
	width: 50%;
	padding-right: 40px;
}
.p-left p{
	display: flex;
	align-items: center;
	gap:8px;
	color: #fff;
	font-size: 2em;
	font-weight: bold;
}
.p-leftimg{
	/*object-fit: cover;*/
	display: inline-block;
	width:100%;
}
.p-leftimg2{
	display: inline-block;
	width:100%;
}
@media screen and (max-width: 1290px){
	.gift h2{
		font-size: 32px;	
	}
	.gift h3{
		font-size: 18px;
	}
	.p-icon{
		width: 50px;
	}
	.p-right h4{
		font-size: 1.5em;
	}
}
@media screen and (min-width:681px){
	.w50{
		width: 50%;
	}
}
@media screen and (max-width:680px){
	.icon-text,.icon-text3{
		display: block;
	}
	.p-right{
		width: 90%;
		margin-bottom: 50px;
		padding-right: 20px;
		padding-left: 20px;
	}
	.p-leftimg{
		display: none;
	}
	.width{
		width:100%;
	}
	.m30{
		margin: 0px 20px;
	}
	.m30:nth-child(3){
		margin-bottom: 20px;
	}
	.voice,.gift{
		padding-right: 15px;
		padding-left: 15px;
	}
}
@media screen and (max-width: 480px){
	.btn{
		font-size:0.6em;
	}
	.btn2{
		font-size: 0.4em;
	}
}
@media screen and (min-width:681px){
	.p-leftimg2{
		display: none;
	}
}