@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 {
	padding-top: 24px;
	margin-bottom: 120px;
}

/*------------------------------------------------*/
#sec-mv {
	width:100%;
	min-width:1000px;
	height: 610px;
	background: url("/assets/images/kokuup/bg_line.png") repeat-x left bottom;
	position:relative;
	z-index:20;
	overflow: visible;
	box-sizing:border-box;
}

#sec-mv .wrapper {
	max-width: none;
	height: 520px;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}

#sec-mv .heading {
	flex: 1;
	display: flex;
	justify-content: start;
	align-items: center;
  background-image:
    url(/assets/images/kokuup/mv_bg2.png), url(/assets/images/kokuup/mv_bg.jpg);
  background-repeat: no-repeat, no-repeat;
  background-position:
    center center,
    center center;
	background-size:auto , cover;
}

#sec-mv .heading .outer {
	width: 100%;
	height: 360px;
	position:relative;
}
#sec-mv .heading .inner {
	width: 430px;
	height: 340px;
	position:relative;
	margin:20px auto 0;
}

#sec-mv .heading .inner img.t1 {
	width: 430px;
}
#sec-mv .heading .inner img.t2 {
	width: 430px;
}
#sec-mv .heading .inner h2 img {
	width: 430px;
}

#sec-mv .bg {
	width: 50%;
	height: 100%;
	position: relative;
}

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

#sec-mv #product {
	position: absolute;
	width: 270px;
	left: 0;
	right: 0;
	bottom: 0;
	margin: 0 auto;
	z-index: 1000;
}

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

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

.pc{
	display:block;
}

.sp{
	display: none;
}

.block{
	width:1000px;
	margin:0 auto;
	position:relative;
}

/*--------------------------------------
worry
----------------------------------------*/
#worry{
	width:100%;
	min-width:1000px;
	height:860px;
	margin:0 auto 0;
	position:relative;
  background-image:
    url(/assets/images/kokuup/worry_graf.png),linear-gradient(#b7691e, #82430e);
  background-repeat: no-repeat, no-repeat;
  background-position:
    top center,
    center center;
}

#worry .catch{
	text-align:center;
	padding-top:50px;
}

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

#worry .catch p:after {
	background: url("/assets/images/kokuup/worry_icon.png") no-repeat center top;
  content: '';
  position: absolute;
  top: 20px;
	right:0;
  width: 60px;
  height: 90px;
}

#worry p.txt:nth-of-type(1) {
	color:#fff;
	font-size:24px;
	font-weight: 700;
}

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

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

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

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

#feature #feature_title:before {
  content: '';
  position: absolute;
  top: 210px;
	left:0;
  width: 250px;
  height: 155px;
	background: url("/assets/images/kokuup/feature_left.png") no-repeat center top;
	z-index:1;
}

#feature #feature_title:after {
  content: '';
  position: absolute;
  top: 210px;
	right:0;
  width: 250px;
  height: 155px;
	background: url("/assets/images/kokuup/feature_right.png") no-repeat center top;
	z-index:1;
}

#feature #feature_title .block{
	height:450px;
	margin:0 auto 0;
	position:relative;
	background: url("/assets/images/kokuup/feature_bottle.png") no-repeat center top;
	z-index:10;
}

#feature #feature_title #feature_title_inner{
	width:640px;
	padding-top:40px;
	margin-left:60px;
	box-sizing:border-box;
}

#feature #feature_title #feature_title_inner p{
	color:#b76a1e;
	font-size:38px;
	font-weight: 900;
	line-height:1.3;
	text-align:center;
	margin-bottom:20px;
}

#feature #feature_title #feature_title_inner #feature_logo,
#feature #feature_title #feature_title_inner #feature_sub{
	width:490px;
	margin:0 auto 0;
	position:relative;
}

#feature_why{
	width:540px;
	margin:0 auto 0;
	position:relative;
}

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

#feature_block_title{
	width:1140px;
	height:160px;
	position:absolute;
	left:-70px;
	top:-100px;
	background: url("/assets/images/kokuup/title_bg.png") no-repeat center top;
	z-index:10;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color:#fff;
	font-size:38px;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	text-shadow: 1px 1px 2px #000;
	letter-spacing:1px;
}

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

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

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

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

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

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

.feature_block_img{
	width:900px;
	margin:40px auto 0;
}

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

#then #wave1{
	width:100%;
}

#then #feature_then{
	width:560px;
	margin:0 auto 0;
	padding-top:20px;
}

#then p.catch{
	width:900px;
	margin:20px auto 0;
	color:#df600a;
	font-size:38px;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	background-color:#ffecbf;
	padding:10px 0;
}

#then p.catch span{
	font-size:28px;
}

#then span.lead{
	width:900px;
	margin:20px auto 0;
	font-size:24px;
	display:block;
	line-height:1.6;
}

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

#then ul.then_lead li{
	width:400px;
}

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

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

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

#feature_graf{
	width:900px;
	position:relative;
	margin:50px auto 0;
}

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

#more #wave2{
	width:100%;
}

#feature_more{
	width:510px;
	position:relative;
	margin:0 auto 0;
	padding-top:30px;
}

#more p.catch{
	width:900px;
	margin:20px auto 0;
	color:#df600a;
	font-size:38px;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	background-color:#ffecd5;
	padding:10px 0;
}

#more p.catch span{
	font-size:28px;
}

#more span.lead{
	width:900px;
	margin:20px auto 0;
	font-size:24px;
	display:block;
	line-height:1.6;
}

#more #more_img{
	width:1000px;
	margin:20px auto 0;
	background: url("/assets/images/kokuup/feature_img2_bg.png") no-repeat center top;
}

#more #more_img ul.more_lead{
	width:900px;
	position:relative;
	margin:30px auto 0;
	padding-bottom:10px;
	display: flex;
	justify-content: start;
	align-items: start;
	flex-wrap: wrap;
}

#more #more_img ul.more_lead li{
	width:350px;
	margin:0 25px 20px 0;
}

#more #more_img ul.more_lead li:nth-child(3){
	margin-left:175px;
}

#more #more_img ul.more_lead li:nth-child(4){
	margin-right:0;
}

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

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

#more #more_img .caution{
	width:900px;
	position:relative;
	margin:0 auto;
	font-size:16px;
	text-align:right;
	padding-bottom:20px;
}

/*--------------------------------------
movie
----------------------------------------*/
#movie{
	width:100%;
	min-width:1000px;
	margin:0 auto 0;
	background-color:#fff;
	position:relative;
	padding:60px 0;
}

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

#movie .title span{
	display:inline-block;
	font-size:47px;
	line-height:1.2;
	font-weight:900;
	border-bottom:4px solid #c30d23;
	padding-bottom:10px;
}

#movie .wrap-YouTube {
	margin-top:60px;
}

#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:60px 0 20px;
}

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

#evaluation_block_title{
	width:1140px;
	height:160px;
	position:absolute;
	left:-70px;
	top:-100px;
	background: url("/assets/images/kokuup/title_bg.png") no-repeat center top;
	z-index:10;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	color:#fff;
	font-size:38px;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	text-shadow: 1px 1px 2px #000;
	letter-spacing:1px;
}

#evaluation ul{
	width:950px;
	position:relative;
	padding-top:80px;
	display: flex;
	justify-content: space-between;
	align-items: start;
	flex-wrap: wrap;
}

#evaluation ul li:nth-child(1){
	width:425px;
	line-height:0;
}

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

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

#evaluation ul li:nth-child(2){
	width:480px;
}

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

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

#evaluation ul li:nth-child(2) span.txt{
	display:block;
	font-size:22px;
	margin-top:25px;
	line-height:1.6;
}

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

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

#info_block{
	width:1000px;
	margin:100px auto 0;
	padding-bottom:20px;
	position:relative;
	background-color:#fffcf2;
	overflow:visible;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
	padding-top:100px;
	padding-bottom:50px;
}

#info_block_title{
	width:1140px;
	height:160px;
	position:absolute;
	left:-70px;
	top:-100px;
	background: url("/assets/images/kokuup/title_bg.png") no-repeat center top;
	z-index:10;
	color:#fff;
	font-size:38px;
	font-weight: 900;
	line-height:1.2;
	text-align:center;
	text-shadow: 1px 1px 2px #000;
	letter-spacing:1px;
	box-sizing:border-box;
	padding-top:30px;
}

#info_block_title span{
	font-size:28px;
}

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

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

#info ul li:nth-child(1){
	width:260px;
}

#info ul li:nth-child(1) p{
	width:200px;
	margin:0 auto;
}

#info ul li:nth-child(2){
	width:600px;
	font-size:20px;
	font-weight:700;
}

#info dl{
	width:600px;
	position:relative;
	margin:0 auto;
	display: flex;
	justify-content: space-between;
	align-items: stretch;
	flex-wrap: wrap;
	font-size:20px;
	font-weight:600;
}

#info dl dt{
	width:110px;
	position:relative;
	box-sizing:border-box;
}

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

#info dl dd{
	width:490px;
	position:relative;
	box-sizing:border-box;
	padding-left:10px;
}

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