@charset "UTF-8";
/* CSS Document */

:root {
	--font_serif: "YakuHanMP", 'Noto Serif JP', '游明朝体', 'Yu Mincho', YuMincho, 'ヒラギノ明朝 Pro', 'Hiragino Mincho Pro', 'MS P明朝', 'MS PMincho', serif;
}

body main {
	font-family: var(--font_serif);
	font-weight: 500;
	letter-spacing: -0.03em;
	font-feature-settings: 'palt';
}

.gothic {
	font-family: var(--font_sans);
	font-weight: 300;
}

footer#mainFooter {
	margin-bottom: 130px;
	padding-top: 30px;
}

/*------------------------------------------------*/
#sec-mv {
	width:100%;
	position:relative;
	background-color:#fef2cc;
	padding-bottom:12vw;
}

#sec-mv .wrapper {
	padding: 0;
}

#sec-mv .heading {
	flex: 1;
	background: url("/assets/images/kokuup/mv_bg_sp.png") no-repeat center top;
	background-size:cover;
	display: flex;
	justify-content: center;
	align-items: center;
}
#sec-mv .heading .outer {
	width: 100%;
	height: 62vw;
	position:relative;
	z-index:10;
}
#sec-mv .heading .inner {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	margin:10vw auto 0;
	position:absolute;
	z-index:20;
}

#sec-mv .heading .inner div{
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
}

#sec-mv .heading .inner img.t1 {
	width: 52vw;
}
#sec-mv .heading .inner img.t2 {
	width: 74vw;
}
#sec-mv .heading .inner h2 img {
	width: 74vw;
}

#sec-mv .bg {
	position: relative;
	height: 72vw;
}

#sec-mv .bg img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

#sec-mv #product {
	position: absolute;
	z-index: 10;
	left: calc(50% - 22.5vw);
	bottom: 0;
	margin: 0 auto;
	width: 45vw;
	z-index:100;
}

#sec-mv #product img{
	width: 100%;
}

/*------------------------------------------------*/

.pc{
	display:none;
}

.sp{
	display:block;
	line-height:0;
}

.block{
	width:90%;
	margin:0 auto;
	position:relative;
}

/*--------------------------------------
worry
----------------------------------------*/
#worry{
	width:100%;
	margin:0 auto;
	position:relative;
	background: linear-gradient(#b7691e, #82430e);
	padding-bottom:8vw;
}

#worry .catch{
	text-align:center;
	padding-top:5vw;
}

#worry .catch p{
	position:relative;
	display:inline-block;
	color:#ffffdc;
	font-size:6vw;
	font-weight: 900;
	line-height:1.2;
	text-align:left;
	position:relative;
	box-sizing:border-box;
	padding:2vw 0;
	filter: drop-shadow(0px 0px 3px rgba(0, 0, 0, 0.4));
	padding-right:10vw;
}

#worry .catch p:after {
	background: url("/assets/images/kokuup/worry_icon.png") no-repeat center top;
	background-size:100% auto;
  content: '';
  position: absolute;
  top: 4vw;
	right:0;
  width: 8vw;
  height: 12vw;
}

#worry p.txt:nth-of-type(1) {
	width:90%;
	margin:1vw auto 0;
	color:#fff;
	font-size:4vw;
	font-weight: 700;
}

#worry .worry_graf_sp{
	width:100%;
	margin:5vw auto 0;
	filter: drop-shadow(0px 1vw 1vw rgba(0, 0, 0, 0.4));
}

#worry .worry_graf_sp img{
	width:100%;
}

#worry p.txt:nth-of-type(2) {
	text-align:center;
	margin-top:6vw;
}

#worry p.txt:nth-of-type(2) span{
	color:#ffffdc;
	font-size:5vw;
	font-weight: 700;
	border-bottom:3px solid #ffffdc;
	display:inline-block;
	line-height:1.4;
	padding-bottom:2vw;
}

/*--------------------------------------
feature
----------------------------------------*/
#feature{
	width:100%;
	margin:0 auto 0;
	position:relative;
  background: linear-gradient(to right, #fed46e,#fee3ac 50%,#fed46e);
}

#feature img{
	width:100%;
}

#feature #feature_title{
	width:100%;
	height:140vw;
	margin:0 auto 0;
	position:relative;
	background: url("/assets/images/kokuup/feature_bg_sp.png") no-repeat center top;
	background-size:100% auto;
}

#feature #feature_title #feature_title_inner{
	width:100%;
	box-sizing:border-box;
}

#feature #feature_title #feature_title_inner p{
	color:#b76a1e;
	font-size:5.2vw;
	font-weight: 900;
	line-height:1.3;
	text-align:center;
	padding:4vw 0 2vw;
}

#feature #feature_title #feature_title_inner #feature_logo{
	width:52vw;
	margin:0 auto 0;
	position:relative;
}

#feature #feature_title #feature_title_inner #feature_sub{
	width:74vw;
	margin:0 auto 0;
	position:relative;
}

#feature_why{
	width:78vw;
	margin:0 auto 0;
	position:relative;
	padding-top:5vw;
}

#feature_block{
	width:88%;
	margin:15vw auto 10vw;
	position:relative;
	background-color:#fffcf2;
	overflow:visible;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

#feature_block_title{
	width:112%;
	height:22vw;
	position:absolute;
	left:-6%;
	top:-12vw;
	background: url("/assets/images/kokuup/title_bg_sp.png") no-repeat center top;
	background-size:100% auto;
	z-index:10;
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	color:#fff;
	font-size:5.0vw;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	text-shadow: 1px 1px 4px #000;
	letter-spacing:1px;
	box-sizing:border-box;
	padding-top:4vw;
}

#feature_block ul.feature_lead{
	width:86%;
	margin:0 auto;
	padding-top:12vw;
	position:relative;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#feature_block ul.feature_lead li:nth-child(1){
	width:100%;
}

#feature_block ul.feature_lead li:nth-child(2){
	width:100%;
}

#feature_block ul.feature_lead li:nth-child(1) p{
	color:#df600a;
	font-size:5.0vw;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	background-color:#ffecd5;
	padding:1vw 0;
}

#feature_block ul.feature_lead li:nth-child(1) p span{
	display:inline;
	font-size:3.4vw;
}

#feature_block ul.feature_lead li:nth-child(1) span{
	font-size:4.0vw;
	display:block;
	margin-top:4vw;
	line-height:1.6;
}

.feature_block_img{
	width:97%;
	margin:4vw auto 0;
}

#then{
	width:100%;
	background-color:#fef7de;
	position:relative;
}

#then #wave1{
	width:100%;
	font-size:0;
}

#then #feature_then{
	width:76vw;
	margin:0 auto 0;
	padding-top:3vw;
}

#then p.catch{
	width:86%;
	color:#df600a;
	font-size:5.0vw;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	background-color:#ffecbf;
	padding:1vw 0;
	margin:2vw auto 0;
}

#then p.catch span{
	font-size:3.4vw;
}

#then span.lead{
	width:86%;
	margin:3vw auto 0;
	font-size:4.0vw;
	display:block;
	line-height:1.6;
}

#then ul.then_lead{
	width:86%;
	position:relative;
	margin:3vw auto 0;
	padding-bottom:10px;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#then ul.then_lead li{
	width:100%;
	margin-bottom:5vw;
}

#then ul.then_lead li:last-child{
	margin-bottom:0;
}

#then ul.then_lead li img{
	width:100%;
}

#then ul.then_lead li p{
	font-size:4.2vw;
	font-weight: 700;
	text-align:center;
	line-height:1.0;
	margin-top:2vw;
}

#then ul.then_lead li span{
	display:block;
	color:#df600a;
	font-size:3.8vw;
	font-weight: 700;
	text-align:center;
	line-height:1.0;
	margin-top:1vw;
}

#feature_graf{
	width:97%;
	position:relative;
	margin:3vw auto 0;
}

#more{
	width:100%;
	position:relative;
}

#more #wave2{
	width:100%;
	font-size:0;
}

#feature_more{
	width:76vw;
	position:relative;
	margin:0 auto 0;
	padding-top:3vw;
}

#more p.catch{
	width:86%;
	color:#df600a;
	font-size:5.0vw;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	background-color:#ffecd5;
	padding:1vw 0;
	margin:2vw auto 0;
}

#more p.catch span{
	font-size:3.4vw;
}

#more span.lead{
	width:86%;
	margin:3vw auto 0;
	font-size:4.0vw;
	display:block;
	line-height:1.6;
}

#more #more_img ul.more_lead{
	width:92%;
	position:relative;
	margin:3vw auto 0;
	padding-bottom:2vw;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

#more #more_img ul.more_lead li{
	width:49%;
	margin-bottom:3vw;
}

#more #more_img ul.more_lead li img{
	width:100%;
}

#more #more_img ul.more_lead li p{
	font-size:3.4vw;
	font-weight: 700;
	text-align:center;
	line-height:1.0;
	margin-top:1vw;
	color:#dd7a1e;
}

#more #more_img .caution{
	width:92%;
	position:relative;
	margin:0 auto;
	font-size:2.8vw;
	text-align:right;
	padding-bottom:3.0vw;
}

/*--------------------------------------
movie
----------------------------------------*/
#movie{
	width:100%;
	margin:0 auto 0;
	background-color:#fff;
	position:relative;
	padding:7vw 0;
}

#movie .title{
	text-align:center;
}

#movie br.pc2{
	display:none;
}

#movie .title span{
	display:block;
	color:#000;
	font-size:5.4vw;
	font-weight:800;
	letter-spacing:0.02em;
	line-height:1.2;
	border-bottom:5px solid #c30d23;
	padding-bottom:3vw;
}

#movie .wrap-YouTube {
	margin-top:5vw;
}

#movie .wrap-YouTube iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
}

/*--------------------------------------
evaluation
----------------------------------------*/
#evaluation{
	width:100%;
	margin:0 auto 0;
	position:relative;
  background: linear-gradient(to right, #fed46e,#fee3ac 50%,#fed46e);
	padding:5vw 0 2vw;
}

#evaluation_block{
	width:88%;
	margin:15vw auto 0;
	padding-bottom:5vw;
	position:relative;
	background-color:#fffcf2;
	overflow:visible;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

#evaluation_block_title{
	width:112%;
	height:22vw;
	position:absolute;
	left:-6%;
	top:-12vw;
	background: url("/assets/images/kokuup/title_bg_sp.png") no-repeat center top;
	background-size:100% auto;
	z-index:10;
	display: flex;
	justify-content: center;
	align-items: start;
	flex-wrap: wrap;
	color:#fff;
	font-size:5.0vw;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	text-shadow: 1px 1px 4px #000;
	letter-spacing:1px;
	box-sizing:border-box;
	padding-top:4vw;
}

#evaluation ul{
	width:76vw;
	margin:0 auto;
	position:relative;
	padding-top:12vw;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#evaluation ul li:nth-child(1){
	width:78%;
	line-height:0;
	margin:0 auto 5vw;
}

#evaluation ul li:nth-child(1) #name{
	background-color:#df600a;
	font-size:4.0vw;
	color:#fff;
	text-align:center;
	line-height:1.4;
	padding:2vw 0;
	margin:0;
}

#evaluation ul li:nth-child(1) img{
	width:100%;
}

#evaluation ul li:nth-child(2){
	width:100%;
}

#evaluation ul li:nth-child(2) p{
	background-color:#ffecd5;
	font-size:5.0vw;
	color:#df600a;
	text-align:center;
	line-height:1.2;
	padding:1vw 0;
	margin:0;
	font-weight:900;
}

#evaluation ul li:nth-child(2) p span{
	font-size:3.4vw;
}

#evaluation ul li:nth-child(2) span.txt{
	display:block;
	font-size:4.0vw;
	margin:3vw auto 0;
	line-height:1.6;
}

#evaluation ul li:nth-child(2) span.caution{
	display:block;
	font-size:2.8vw;
	margin-top:5vw;
	text-align:right;
}

/*--------------------------------------
info
----------------------------------------*/
#info{
	width:100%;
	margin:0 auto 0;
	position:relative;
  background: linear-gradient(to right, #fed46e,#fee3ac 50%,#fed46e);
	padding:5vw 0 2vw;
}

#info_block{
	width:88%;
	margin:15vw auto 10vw;
	padding-bottom:5vw;
	position:relative;
	background-color:#fffcf2;
	overflow:visible;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
}

#info_block_title{
	width:112%;
	height:22vw;
	position:absolute;
	left:-6%;
	top:-12vw;
	background: url("/assets/images/kokuup/title_bg_sp.png") no-repeat center top;
	background-size:100% auto;
	z-index:10;
	color:#fff;
	font-size:5.0vw;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	text-shadow: 1px 1px 4px #000;
	letter-spacing:1px;
	box-sizing:border-box;
	padding-top:4vw;
}

#info_block_title span{
	font-size:3.4vw;
}

#info ul{
	width:84%;
	position:relative;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

#info ul:nth-of-type(1){
	padding-top:12vw;
}

#info ul li img{
	width:100%;
}

#info ul li:nth-child(1){
	width:100%;
	margin-bottom:3vw;
}

#info ul li:nth-child(1) img{
	width:66%;
	margin-left:17%;
}

#info ul li:nth-child(2){
	width:100%;
	font-size:3.8vw;
	font-weight:600;
}

#info dl{
	width:100%;
	position:relative;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
}

#info dl dt{
	width:30%;
	position:relative;
	box-sizing:border-box;
}

#info dl dt:after{
  position: absolute;
  top: 0;
  right:0;
  content: '：';
}

#info dl dd{
	width:70%;
	position:relative;
	box-sizing:border-box;
	padding-left:2vw;
}

#info dl dt:nth-of-type(1),
#info dl dd:nth-of-type(1){
	margin-bottom:5vw;
}

#info dl dt:nth-of-type(2){
	padding-left:15px;
}

#info .code{
	margin-top:5vw;
}

#info ul:nth-of-type(2){
	margin-top:10vw;
}

#info ul:nth-of-type(2) li:nth-child(1) img{
	width:56%;
	margin-left:22%;
}