@charset "UTF-8";
/*additional reset
---------------------------------------------------*/
*{
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	overflow-x: hidden!important;
	height: 100%!important;
}

body.safari #content, body.safari #footer {/*サファリでリンク先から戻った時文字が拡大する対応*/
    -webkit-text-size-adjust: 100%;
    position:relative;
}

/** link **/
a:link {
    color: #1c7fbd;
	text-decoration: underline;
}
a:visited {
    color: #1c7fbd;
}
a:hover,
a:active {
	text-decoration: none;
}

video{
	width: 100%;
	margin: 20px auto;
}

.content_wrapper, .content_wrapper2{
	max-width: 700px;
	margin: 0 auto;
}

.pics:last-child{
	margin-bottom: 0;
}

.pc {
	display: block;
}
.sp {
	display: none;
}
@media screen and (max-width:740px){
	.pc {
		display: none;
	}
	.sp {
		display: block;
	}
	.content_wrapper2{
	width: 90%;
	}
}

.taC{
    text-align: center;
}
.taR{
    text-align: right;
}

.fwB{
    font-weight: bold;
}

/*共通パーツ*/
.ref{
	font-size: .8em;
	color: #999;
}
.mt60{
	margin-top: 60px !important;
}
.mt40{
	margin-top: 40px !important;
}
.mt30{
	margin-top: 30px !important;
}
.mt20{
	margin-top: 20px !important;
}
.mt10{
	margin-top: 10px !important;
}
.mb20{
	margin-bottom: 20px !important;
}
.ptb10{
	padding: 10px 0 !important;
}
.plr10{
	padding: 0 10px !important;
}
.pb30{
	padding-bottom: 30px !important;
}

.marker{
	background: linear-gradient(transparent 0%, #fdfb70 0%);
	font-size: 18px;
	font-weight: bold;
}

.caution_txt{
    text-align:right;
    font-size:0.7em;
    color: #777;
	margin-top: 3%;
}

#wrapper{
	max-width: 800px;
	width: 100%;
	margin: auto;
	padding: 0 0 0 0;
	overflow: hidden;
	color: #222;
	background: #fff;
}

.fsS{
	font-size: 0.8em !important;
}
.fsM{
	font-size: 1.1em !important;
}
.fsL{
	font-size: 1.5em !important;
}
@media screen and (max-width:740px){
	.fsL{
		font-size: 1.3em !important;
	}
}
.fcP{
    color: #f4688c;
}
.fcB{
    color: #568dd4;
}
.fcR{
    color: #da2929;
}
.fcY {
    color: #dba728;
}
.fcBG{
    color: #d47854;
}
.fcW{
    color: #fff;
}
.fcP2{
    color: #d65c66;
}

.border{
	border: 3pt solid #f7a3aa;
}

.bg_p{
	background-color: #fff4f5;
	padding: 15px;
	margin: 0 !important;
}

.bg_b{
	background-color: #fff5e7;
	padding: 15px;
	margin: 0 !important;
}

.pics {
	max-width: 100%;
	margin: 10px 0;
}

p{
	margin-bottom: 10px;
	word-wrap: break-word;
}


.mv {
	max-width: 700px;
	margin: 0 auto;
}
.mv_pr{
    padding-right: 10px;
}

.txt_bg {
    background: linear-gradient(135deg, #e6848c 0%, #ec8f58 100%);
    padding: 20px 15px;
}
.txt_bg_inner {
    background-color: #fff;
    padding: 4% 3% 3%;
    border-radius: 10px;
}
.txt_bg_inner2 {
    padding: 4% 3% 3%;
}

h3{
	padding: 10px 20px;
	border-bottom: 3px dotted #dd757e;
	background: #fff4f5;
	font-size: 1.3rem;
	color: #d85b65;
}

.ttl {
	max-width: 700px;
	width: 95%;
	margin: 30px auto 20px;
	padding: 10px 20px;
	color: #ffffff;
    background: #fbb38a;
    -webkit-box-shadow: 5px 5px 0 #e1aa8b;
    box-shadow: 5px 5px 0 #f7ccb3;
	font-size: 1.3em;
}

.ttl2 {
	display: block;
	width: 80%;
	margin: 30px auto 10px;
	text-align: center;
}
@media screen and (max-width:760px){
	.ttl2 {
		width: 100%;
	}
}

/*voice*/
.box {
	max-width: 600px;
	background-color: #fff;
	border-radius: 10px;
	box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
	padding: 12px 12px;
	margin: 0 auto 22px;
	box-sizing: border-box;
}
h4.kutikomi-title {
	margin: 0 0 12px;
	font-weight: bold;
	font-family: serif;
	
}
.parent {
	display: flex;
}
.child-left {
	margin-right: 12px;
}
.child-right img {
	width: 80px;
	min-width: 80px;
	height: 80px !Important;
	border-radius: 50%;
	object-fit: cover;
}
.child-left {
	height: auto;
	flex-grow: 1;
	padding: 0 12px 0 0;
}
.child-left dl {
	margin: 0;
}
.child-left dt {
	font-size: 14px;
}
.child-left dd {
	font-size: 14px;
	margin: 0;
	text-align: right;
}
p.plus {
	font-size: 10px;
	color: #8B8A8A;
	margin: 10px 0 0;
	line-height: 1.4;
	text-align: right;
}

/*動く矢印*/
.downArrow {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.downArrow>span {
	width: 100px;
	height: 65px;
	padding: 0 10px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.downArrow>span::before {
	content: "";
	display: block;
	margin: 0 auto;
	width: 50%;
	height: 40%;
	background: #ffc8c8;
}
.downArrow>span::after {
	content: "";
	display: block;
	width: 100%;
	height: 60%;
	background: -webkit-gradient(linear, left bottom, right top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top left/50% 100% no-repeat, -webkit-gradient(linear, right bottom, left top, color-stop(49%, transparent), color-stop(50%, #d096bb)) top right/50% 100% no-repeat;
	background: linear-gradient(to top right, transparent 49%, #ffc8c8 50%) top left/50% 100% no-repeat, linear-gradient(to top left, transparent 49%, #ffc8c8 50%) top right/50% 100% no-repeat;
}
/*動きの速さを変更する場合は、複数あるanimation-durationの1.5s(=1.5秒)の時間を変更
動きの回数を変更する場合は、複数あるanimation-iteration-countのinfinite（=無限,3=3回など）を変更*/
.movebtn {
	-webkit-animation-name: btnAnime02;
	-webkit-animation-duration: 1.5s;
	-webkit-animation-iteration-count: infinite;
	-webkit-animation-timing-function: ease;
	-moz-animation-name: btnAnime02;
	-moz-animation-duration: 1.5s;
	-moz-animation-iteration-count: infinite;
	-moz-animation-timing-function: ease;
	align-items: flex-start;
	justify-content: center;
}
@-webkit-keyframes btnAnime02 {
	0% {
		-webkit-transform: translate(0, 0);
	}
	50% {
		-webkit-transform: translate(0, -8px);
	}
	100% {
		-webkit-transform: translate(0, 0);
	}
}
@-moz-keyframes btnAnime02 {
	0% {
		-moz-transform: translate(0, 0);
	}
	50% {
		-moz-transform: translate(0, -8px);
	}
	100% {
		-moz-transform: translate(0, 0);
	}
}

/*動く矢印2*/
.step_arr {
	position: relative;
	padding-top: 22vw;
	margin-top: -4vw;
}
.step_arr span {
	position: absolute;
	top: 0;
	left: 50%;
	width: 10vw;
	height: 10vw;
	margin-left: -5vw;
	border-left: 1px solid #333;
	border-bottom: 1px solid #333;
	-webkit-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-animation: sdb 2s infinite;
	animation: sdb 2s infinite;
	opacity: 0;
	box-sizing: border-box;
}

.step_arr span:nth-of-type(1) {
	-webkit-animation-delay: 0s;
	animation-delay: 0s;
}

.step_arr span:nth-of-type(2) {
	top: 4vw;
	-webkit-animation-delay: .15s;
	animation-delay: .15s;
}

.step_arr span:nth-of-type(3) {
	top: 8vw;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
}

@-webkit-keyframes sdb {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
@keyframes sdb {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}
@media (min-width: 620px) {
	.step_arr {
	position: relative;
	padding-top: 136px;
	margin-top: -25px;
	}
	.step_arr span {
	width: 62px;
	height: 62px;
	margin-left: -31px;
	}
	.step_arr span:nth-of-type(2) {
	top: 24.8px;
	}

	.step_arr span:nth-of-type(3) {
	top: 49.6px;
	}
}
/*動く矢印2 end*/


/*インフルエンサー*/
.swiper {
	display: flex;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	overflow: hidden;
	list-style: none;
	/*余白なし*/
	padding: 0;
	/*スライドの横幅*/
	width: 90%;
}
.swiper-wrapper {
	position: relative;
	/*横幅*/
	width: 100%;
	/*高さ*/
	height: 100%;
	display: flex;
	transform: translate3d(0, 0, 0);
	transition-property: transform;
	transition-timing-function: linear !important;
	box-sizing: content-box;
}

.swiper-slide {
	/*背景の色*/
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	width: 100%;
	height: auto;
	position: relative;
	transition-property: transform;
}


.cta{
	max-width: 550px;
	width: 100%;
	margin: 30px auto;
}

.animation{
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
	animation-direction: alternate;
	animation-duration: 1.5s;
}
.keyframe6 {
	animation-name: poyopoyo;
}
@keyframes poyopoyo {
	0%, 40%, 60%, 80% {
		transform: scale(1.0);
	}
	50%, 70% {
		transform: scale(0.95);
	}
}


figcaption{
	font-size: .8em;
	color: #999;
	text-align: center;
}

.mainttl{
	/*margin-top: 5%;*/
	margin-bottom: 0 !important;
	text-align: center;
	color: #000;
	font-size: 1.8em;
}

ul,li{
	list-style: disc;
}


ul.points{
	border:1px solid #eee;
	background: #f9f9f9;
	margin:0px 0 10px;
	padding: 1em 1em 1em 2em;
	font-size: .9em;
}



/*@media only screen and (max-width:839px){*//*スマホ表示で反映させる設定*/
@media only screen and (max-width:839px){
	.table-wrap{
		width: 100%;
		overflow:auto;
		overflow-x:hidden;
	}
}

	
td.txt_only {
	font-size: 1.5rem;
	color: #333333;
	padding: 2.5% 0;
}
span.ex, span.go, span.so, span.ba {
	font-weight: normal;
	line-height: 70px;
}
span.ex {
	font-size: 5rem;
	color: #f8525d;
}
span.go {
	font-size: 3.5rem;
	color: #7cd0dd;
}
span.so {
	font-size: 3.2rem;
	color: #f5c132;
}
span.ba {
	font-size: 4rem;
	color: #7a7a7a;
}
span.txt_ex {
	font-weight: bold;
	color: #f8525d;
}
.rankTable table tr th {
	font-size: 1rem;
}
@media (max-width: 620px){
	span.ex, span.go, span.so, span.ba {
		line-height: 50px;
	}
	span.ex {
		font-size: 2.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 1rem;
	}
}

.bgY{
	background-color: #fffce5;
}
.bgP{
	background-color: #f8cbcf;
}
.bgP2{
	background-color: #dc6770;
}


/* 比較表 start*/
.rankTable {
    width: 100%; /* 最大幅を指定 */
    border: 3px solid #dc6770;
    overflow-x: auto; /* 横スクロールを有効に */
    margin: 0 auto;
    border-radius: 10px 10px 0 0;
    box-shadow: 5px 5px 0 #ddd;
    display: block; /* スクロールを確実に表示させる */
}

table{
	width: 1500px;
}


.rank_ttl{
	padding: 0.3%;
	font-size: 1em;
	color: #fff;
	line-height: 1.2;
	font-weight: bold;
	border-bottom: 1px solid #ffffff;
	border-right: 1px dotted #fff;
	background: #dc6770;
	text-align: center;
	width: 9%;
	vertical-align: middle;
}

.rankTable td,.rankTable th{
    width: 900px;
	border-right: 2px dotted #e1e1e1;
	border-bottom: 1px solid #e1e1e1;
	font-size: 0.8em;
	text-align: center;
	vertical-align: middle;
	line-height: 1.3;
	height: 50px;
}

.rankTable td{
	width: 5%;
}

.rankTable td:last-child {
border-right: none;
}
.rankTable tr:last-child th, .rankTable tr:last-child td{
border-bottom: none;
}

.rankTable th a {
color: #1c7fbd;
}

.rankTable .item img{
	width: 80%;
}

.rankTable .ex {
color: #ff0000;
font-size: 1.6em;
}
.rankTable .go {
color: #aadaf6;
font-size: 1.6em;
}
.rankTable .so {
color: #f5c132;
font-size: 1.6em;
}
.rankTable .bad {
    font-size: 1.6em;
}

@media screen and (max-width:760px){
	.rankTable {
		overflow-x: scroll;
	}
	.rankTable table{
		width: 1600px;
	}
	.rankTable td{
		width: 5%;
	}
}
/* 比較表 end*/

.site_btn{
	display: block;
	width: 100%;
	margin: 5px auto;
	line-height: 1.2;
	padding: 5px;
	border-radius: 5px;
	background-color: #0c9c07;
	box-shadow: 2px 2px 0 #0a6c06;
	color: #fff;
	font-weight: bold;
}
@media (min-width: 620px){
	span.ex, span.go, span.so, span.ba {
		font-weight: normal;
		line-height: 70px;
	}
	span.ex {
		font-size: 5rem;
		color: #f8525d;
	}
	span.go {
		font-size: 3.5rem;
		color: #7cd0dd;
	}
	span.so {
		font-size: 3.2rem;
		color: #f5c132;
	}
	span.ba {
		font-size: 4rem;
		color: #7a7a7a;
	}
	span.txt_ex {
		font-weight: bold;
		color: #f8525d;
	}
	span.ex, span.go, span.so, span.ba {
		line-height: 50px;
	}
	span.ex {
		font-size: 3.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 1rem;
	}
}



	span.ex, span.go, span.so, span.ba {
		line-height: 20px;
	}
	span.ex {
		font-size: 3.5rem;
	}
	span.go {
		font-size: 2.5rem;
	}
	span.so {
		font-size: 2.2rem;
	}span.ba {
		font-size: 3rem;
	}
	.rankTable table tr th {
		font-size: 0.75rem;
	}

@media (max-width: 380px){
	.rankTable table tr.sp_th th {
	width: calc(100% - 7.9%);
	color: #fff;
	}
}



.mainttl{
	font-size:min(4.4vw,33px);
	line-height: 1.3;
	display: block;
}

/* ミニ表 */
.border2{
	border: 3pt solid #f7a3aa;
	border-radius: 15px;
}
.mini_table table,.mini_table2 table{
	width: 95%;
	border-collapse: collapse;
	border: 2pt solid #e06478;
	margin: 20px auto;
	border-radius: 15px;
}
.mini_table table tr{
	border-bottom: solid 1px #e06478;
}
.mini_table2 table{
	border: 2pt solid #d29775;
}
.mini_table2 table tr{
	border-bottom: solid 1px #d29775;
}
.mini_table table tr:last-child,.mini_table2 table tr:last-child{
	border-bottom: none;
}
.mini_table table th, .mini_table2 table th{
	position: relative;
	text-align: left;
	width: 30%;
	background-color: #e06478;
	color: white;
	text-align: center;
	padding: 7.5px 0;
	font-weight: bold;
	vertical-align: middle;
}
.mini_table table th:after,.mini_table2 table th:after{
	display: block;
	content: "";
	width: 0px;
	height: 0px;
	position: absolute;
	top:calc(50% - 10px);
	right:-10px;
	border-left: 10px solid #e06478;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
}
.mini_table2 table th{
	background-color: #d29775;
}
.mini_table2 table th:after{
	border-left: 10px solid #d29775;
}
.mini_table table td{
	text-align: left;
	width: 70%;
	text-align: center;
	background-color: #fff;
	padding: 7.5px 0;
}
.mini_table2 table td{
	text-align: left;
	width: 70%;
	text-align: center;
	background-color: rgb(245, 245, 245);
	padding: 7.5px 0;
}




@media (max-width: 750px){
    /*.jituryoku_inner_bg {
		background-color: #fff;
		max-width: 100%;
		margin: 0 auto;
		padding: 17% 3% 2%;
	  }
	.function {
		max-width: 100%;
		padding: 0;
		margin: 0 auto;
		top: 36.5%;
	}
	.function img{
		padding: 0 5px;
	}
	.slider01,.slider01-1 {
		margin-bottom: 2%;
	}*/
	.mv {
		max-width: 100%;
		padding: 0;
	}
	/*
	.point_viage_minttl {
		font-size: 1.3rem;
		margin-bottom: 3%;
		line-height: 1.4;
	}*/
	.mini_table table,.mini_table2 table{
		width: 100%;
		margin: 0 auto;
	}
	/*
	.sono_reason{
		font-size: 1.5rem;
	}
	.jituryoku {
		max-width: 100%;
	}
	.kaihatu {
		max-width: 100%;
		margin: 10% auto -12%;
	}
	.third_txt {
		font-size: 1.5rem;
	}
	.first_txt2 {
		font-size: 1.5rem;
		margin-left: -4%;
	}
	.second_txt {
		font-size: 1.5rem;
	}
	.caution_txt2{
		margin-right: 4%;
	}
	.review {
		margin-bottom: 20px;
		padding: 30px 16px 0px 16px;
		background-color: #fff;
	}
	.tyousa {
		margin: 0 auto;
		max-width: 92%;
	}
	.tyousa p{
		font-size: 0.7rem;
	}
	.kome {
		font-size: 10px;
	}*/
}
/*.merihari_bg {
	background-color: #fff;
	padding: 8% 3% 12%;
	border-radius: 10px;
	margin: 8% 0 0%;
}
.merihari_ttl {
	max-width: 98%;
	margin: 0 auto 4%;
	font-weight: bold;
}*/
img {
	width: 100%;
}
@media (max-width: 768px) { 
	/*.merihari_ttl {
		max-width: 90%;
		margin: 0 auto 7%;
	}*/
	.mini_table table td {
		
		font-size: 14px;
	}
	.mini_table2 table td{
		font-size: 14px;
	}
}
/* 改行レスポンシブ */ 
@media (min-width: 768px) { 
    .br-sp {  
        display: none;  
    }  
}      
@media (max-width: 768px) { 
    .br-pc { display:none; }  
} 


/*KV・サイズ表のスライド*/
.slider-container {
	width: 95%;
	margin: auto;
}
.slider {
	width: 100%;
}
.slider img {
	width: 100%;
	height: auto;
}

/* サムネイルの親要素 */
.thumb-container {
	width: 100%;
	display: flex;
	justify-content: center; /* サムネイルを中央配置 */
	margin-top: 10px;
	gap: 10px; /* サムネイルの間隔 */
}

/* サムネイル */
.thumb-container img {
	width: 100px;
	height: 100%;
	cursor: pointer;
	border: 2px solid transparent;
	transition: border 0.3s;
}

/* アクティブなサムネイル */
.thumb-container img.active {
	border: 1px solid rgb(204, 204, 204);
}


/*footer*/
#footer{
	background-color: #868686;
	padding: 30px 0 20px;
}

#footer a{
	color: #fff;
}

#footer .tx-ss{
	font-size: 11px;
}