@charset "utf-8";

/*===============================
 Base
===============================*/
html {
	height: 100%;
}
body {
	color: #5F5959;
	height: 100%;
}
a {
	color: black;
	text-decoration: none;
	transition: .5s;
}
a:hover {
	color: black;
	text-decoration: none;
}
img {
	width: 100%;
	height: auto;
	max-width: 555px;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
}

/*===============================
 Clear
===============================*/
img {
	border: 0;
	vertical-align: top;
	font-size: 0;
	line-height: 0;
}
ol, ul {
	list-style: none!important;
}
* {
	margin: 0;
	padding: 0;
}

/*===============================
 Font
===============================*/
html {
	font-size: 10px;
}
body {
	font-family: "Noto Sans JP", sans-serif;
    font-weight: 700;
	line-height: 1.75;
	font-size: 1.2rem;
}
h2, h3 {
	line-height: 1.5;
	font-weight: 700;
}
@media screen and (min-width: 769px) {
	html {
		font-size: 12px;
	}
}


/*===============================
 Wrapper
===============================*/
.wrapper {
	position: relative;
	width: 100%;
	margin: 0 auto;
	background: #e4e4e4;
}
@media screen and (min-width: 769px) {
	.wrapper {
		min-width: 1024px;
	}
}

/*===============================
 main
===============================*/
@media screen and (min-width: 769px) {
	.main {
		margin: 0 auto;
	}
}

/*===============================
 Key visual 
===============================*/
.kv {
	position: relative;
	width: 100%;
	z-index: 1;
	
}
.kv:before {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	z-index: -1;
	background: #0091C2 center center / 100% auto no-repeat;
	opacity: .75;
}

.kv_inner{
	padding: 30px 5.33% 35px;
}
.kv_main_txt{
	color: #fff;
	font-size: 3.0rem;
	text-align: center;
	line-height: 1.5;
	display: block;
}
.kv_main_sub{
	color: #fff;
	font-size: 2.0rem;
	text-align: center;
	line-height: 1.5;
	margin: 20px 0;
	display: block;
}
.kv h1{
	width: 100%;
	color: #fff;
	font-weight: 2.0rem;
	text-align: center;
}
.kv h1 img{
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}
.kv_video{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: -10;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
}

/*===============================
	feature
===============================*/
.feature{
	position: relative;
}
.feature_inner{
}
.common_ttl{
	font-size: 2.4rem;
	text-align: center;
	background: #ECF1F9;
	padding: 20px 0;
	color: #0091C2;
}
.common_ttl span{
	color: #5F5959;
}
.common_ttl_s{
	font-size: 1.6rem;
}
.feature_wh_arrow{
	background: #fff;
	position: relative;
	padding: 35px 0; 
}
.feature_wh{
	background: #fff;
	position: relative;
	padding: 35px 5.33%; 
}
.feature_wh_arrow:before{
	z-index: 100;
    display: block;
    content: "";
    position: absolute;
    left: 50%;
    height: 100%;
	-webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: -20px;
    background: url(../img/arrow_under.png) center top no-repeat;
    background-size: 100% auto;
	width: 50px;
}
.feature_arrow_inner{
	padding: 0 5.33%; 
	margin: 0 auto;
	max-width: 768px;
}
.feature_blue{
	background: #ECF1F9;
	position: relative;
	padding: 35px 5.33%; 
}
.feature_box{
	margin: 0 auto;
	width: 100%;
	text-align: center;
}
.feature_num{
	font-size: 3.2rem;
	color: #0091C2;
	text-align: center;
	width: 100%;
}
.feature_num span{
	border-bottom: 3px solid #0091C2;
	display: inline-block;
	padding: 0 8px;
}
.feature_yellow{
	width: 100%;
	font-size: 2.4rem;
	text-align: center;
	position: relative;
	color: #0091C2;
	z-index: 10;
	margin: 5px 0 15px;
}
.feature_yellow span{
	background: linear-gradient(transparent 60%, #F8F82B 30%);
    display: inline-block;
}
.feature_imgbox_limit{
	max-width: 520px;
}
.feature_imgbox{
	width: 100%;
}
.feature_imgbox p{
	font-weight: 500;
	margin: 0 auto;
	text-align: center;
}
.feature_imgbox_txts{
	font-size: 1.0rem;
	font-weight: 500;
}
.feature_imgbox_txtm{
	font-size: 1.4rem;
	color: #5F5959;
}
.feature_imgbox_txtl{
	font-size: 2.4rem;
	color: #5F5959;
	text-align: center;
	margin: 0 auto;
	text-decoration: underline;
}
.feature_radius_wh{
	background: #fff;
	border-radius: 30px;
	padding: 7px 20px;
	margin-bottom: 10px!important;
	font-size: 1.4rem;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: center;
	justify-content: center;
    width: 60%;
	color: #5F5959;
	max-width: 715px;
}
.feature_radius_blue{
	background: #ECF1F9;
	border-radius: 30px;
	padding: 7px 20px;
	margin-bottom: 10px!important;
	font-size: 1.4rem;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: center;
	justify-content: center;
    width: 60%;
	color: #5F5959;
	margin-top: 30px!important;
	max-width: 715px;
}
.feature_imgbox p img{
	width: 100%;
	height: auto;
	padding: 12px 0 25px;
}
.feature_exp{
	font-size: 1.6rem;
	font-weight: 500;
	color: #5F5959;
	text-align: center;
	margin: 0 auto;
}
.feature_exp span{
	font-weight: 700;
	text-decoration: underline;
}
.feature_item_wh{
	background: #fff;
}
.feature_item_blue{
	background: #ECF5F6;
	margin-top: 25px;
}
.feature_item{
	border-radius: 20px;
	padding: 20px 5.92% 22px;
	color: #5F5959;
	font-size: 1.5rem;
	line-height: 1.6;
	max-width: 715px;
    margin: 25px auto 0;
}
.feature_item_center{
	text-align: center;
	padding-bottom: 10px;
}
.feature_production{
	margin-bottom: 25px;
}
/*===============================
results
===============================*/
.results_wh{
	background: #fff;
}
.results_gray{
	background: #F5F5F5;
}
.results_wh img{
	 padding: 10px 0;
}
.results_ttl{
	background: #0091C2;
	font-size: 1.6rem;
	color: #fff;
	padding: 12px 0;
	text-align: center;
	margin: 0 auto;
}
.results_common_inner{
	padding: 18px 5.33% 25px;
	max-width: 768px;
	margin: 0 auto;
}
.results_flex{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.results_item{
	width: 47.46%;
	padding-bottom: 10px;
}
.results_item p{
	margin-top: 10px;
	font-size: 1.2rem;
	color: #5F5959;
	font-weight: 500;
}
.results_item_ttl{
	background: #ECF1F9;
	font-size: 1.4rem;
	color: #5F5959;
	padding: 6px 0;
	text-align: center;
	margin: 0 auto;
}
.results_test_ttl{
	border-radius: 30px;
	padding: 7px 20px;
	margin-bottom: 10px!important;
	font-size: 1.4rem;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: center;
	justify-content: center;
    width: 100%;
	color: #5F5959;
}
.results_test_wh{
	background: #fff;
}
.results_test_blue{
	background: #ECF1F9;
}
.results_test_txts{
	text-align: center;
	margin: 5px 0;
	color: #5F5959;
	font-size: 1.2rem;
	font-weight: 500;
}
.results_test_txtm{
	text-align: center;
    margin-top: 7px;
    color: #5F5959;
    font-size: 1.4rem;
    padding-bottom: 5px;
}
.results_test_wh{
	background: #fff;
	padding: 10px 3.58%;
	margin-top: 12px;
}
.results_test_item{
	width: 100%;
	margin-bottom: 18px;
}
.results_test_item:nth-of-type(3),.results_test_item:nth-of-type(4){
	width: 47.43%;
}
.results_wh_ttl{
	margin: 7px auto 0;
	text-align: center;
	border-bottom: 1px solid #5F5959;
	padding-bottom: 10px;
}
.results_test_item p{
	font-size: 1.2rem;
	text-align: left;
	margin-top: 9px;
	font-weight: 500;
}
.results_test_flex{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}
.results_test_flex p{
	width: 50%;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	text-align: center;
	font-weight: 500;
	font-size: 1.2rem;
}
.results_anti_flex{
	display: -webkit-flex;
	display: flex;
	padding: 12px 7.46%;
	-webkit-align-items: center;
	align-items: center;
}
.results_anti_flexwh{
	background: #fff;
	border: 1px solid #707070;
}
.results_anti_flexgray p{
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;
	font-weight: 500;
	font-size: 1.4rem;
	text-align: center;
}
.results_anti_flex p{
	font-size: 1.4rem;
	font-weight: 500;
}
.results_anti_flex p:nth-of-type(1){
	width: 49.83%;
}
.results_anti_flex p:nth-of-type(2){
	width: 50.16%;
	text-align: left;
}
.results_anti_ttl{
	border-bottom: 2px dotted #707070;
}
.results_txt_left{
	text-align: left;
	line-height: 1.66;
	font-weight: 500;
	font-size: 1.2rem;
}
.results_txt_small{
	text-align: left;
	line-height: 1.8;
	font-weight: 500;
	font-size: 1.0rem;
	margin-top: 40px;
}
/*===============================
exa
===============================*/
.exa_ttl{
	font-size: 1.8rem;
	text-decoration: underline;
	text-align: center;
}
.exa_txt{
	font-size: 1.5rem;
	line-height: 1.866;
	text-align: left;
	padding: 23px 0 25px;
	font-weight: 500;
}
/*===============================
other
===============================*/
.other__child{
	margin-top: 20px;
}
.other__guide{
	border-bottom: 2px dotted #707070;
	padding-bottom: 10px;
}
.other__txt{
	font-size: 1.5rem;
	text-align: center;
	margin-top: 10px;
	line-height: 1.46;
	position: relative;
}
.other__txt::after {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	margin-top: -8px;
	width: 15px;
	height: 13px;
	background-image :url("../img/arrow_right_under.png");
	background-size: 100% auto;
}
.other__txt.open::after{
	transform: rotate(180deg);
}

/*===============================
story
===============================*/
.story_inner{
	padding-bottom: 70px;
	max-width: 768px;
    margin: 0 auto;
}
.story_img_left {
	margin-right: 5.33%;
}
.story_img_right {
	margin-left: 5.33%;
	display: -webkit-flex;
	display: flex;
    -webkit-justify-content: flex-end;
	justify-content: flex-end;
}
.story_img_left img, .story_img_right img{
	margin: 0!important;
}
.story_img_center{
	width: 60%;
    margin: 0 auto;
}
.story_ttl{
	font-size: 1.8rem;
	color: #0091C2;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 25px;
}
.story_ttl_bk{
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.866;
	margin-bottom: 35px;
}
.story_txt{
	font-size: 1.5rem;
	text-align: left;
	line-height: 1.8666;
	padding: 0 5.33%;
	font-weight: 500;
}
.story_txt_bottom{
	margin-bottom: 30px;
}
.story_txt_center{
	text-align: center;
}
/*===============================
btn
===============================*/
.btn{
	max-width: 768px;
	padding: 0 5.33%;
	position: fixed;
	bottom: 8%;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
	z-index: 1000000;
}
.btn a{
	width: 100%;
	height: 61px;
	background: #0091C2;
	color: #fff;
	font-size: 1.5rem;
	text-align: center;
	display: block;
    border-radius: 50px;
	position: relative;
	line-height: 1.533;
	padding-top: 7px;
}
.btn a:before{
	position: absolute;
	content: '';
	width: 10px;
	height: 11px;
	right: 5%;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	background:url("../img/arrow_right.png") center right / 100% auto no-repeat;
}
.btn a:hover{
	opacity: .6;
}
@media screen and (min-width: 769px) {
	.btn{
		bottom: 7%;
	}
	.btn a{
		height: 72px;
	}
}

/*===============================
footer
===============================*/
.footer{
	background: #0091C2;

    position: relative;
	padding: 15px 5.33%;
	margin: 0 auto;
    text-align: center;
}
.footer_copy{
	font-size: 1.0rem;
	color: #fff;
	font-weight: 500;
}