@charset "UTF-8";
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}
body{line-height:1}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
nav ul{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent;text-decoration:none}
mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}
del{text-decoration:line-through}
abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}
table{border-collapse:collapse;border-spacing:0}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select{vertical-align:middle}
li{list-style:none}
* {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}


/* ======================================================
-----mainContents------------------------------------
=========================================================*/
html {
	margin : 0;
	padding : 0;
	font-size:62.5%;
}

body {
	margin : 0;
	padding : 0;
	width : 100%;
	height:100%;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.5rem;
	line-height: 1.8;
	letter-spacing: 0.05em;
	color:#6A6A6A;
	background-color:#fff;
	/* -webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: auto | grayscale; */
	/* font-feature-settings : "palt"; */
}

.en {
	font-family: 'Roboto', sans-serif;
}

h1,h2,h3,h4,strong {
	font-weight: normal;
}
a {
	position: relative;
	display: inline-block;
	color:#000;
	text-decoration: none;
	word-break: break-word;
	transition: 0.3s;
}
a:hover {
	opacity: 0.6;
}
img {
	width: 100%;
	height: auto;
	display: block;
	vertical-align: text-bottom;
}

li{
	list-style:none;
}
/* SVG */
.svg-block {
  display: block;
}
object {
	pointer-events: none;
}
.svg-link object {
	overflow:visible;
}
/* SVG */
svg {
	width: 100%;
	height: 100%;
}
::selection {
 background: #333;
 color:#f5f5f5;
}
::-moz-selection {
 background: #333;
 color:#f5f5f5;
}
form ::selection {
 background: #333;
 color:#f5f5f5;
}
form ::-moz-selection {
 background: #333;
 color:#f5f5f5;
}

:focus {
	outline: 0;
}

.nolink {
	cursor: none;
}
.br_sp {
	display: none;
}
.br_pc {
	display: inline-block;
}


/*---Animation */
.elm,
.anime .obj {
	transition: 1.2s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity: 0;
	transform: translate(0,100px);
}
.elm.active,
.anime.active .obj {
	opacity: 1;
	transform: translate(0,0);
}


/*---Flex box */
.flex {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items:center;
}
.bg_cover {
	width: 100%;
	height: 100%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
}
.fix_img {
	width: 100%;
	position: relative;
	background-attachment: fixed;
}


.video {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
	overflow: hidden;
}
.video iframe,
.video video {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.video.full iframe,
.video.full video {
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
}

/* ***** Common **************** */
.pc { display: inline-block; }
.sp { display: none; }
@media only screen and (max-width: 767px) {
	.pc { display: none; }
	.sp { display: inline-block; }
}
	

/* ***** Layout **************** */
#maincontents {
	position: relative;
}
section {
	position: relative;
}
.blockwrap {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 50px;
}
@media only screen and (max-width: 767px) {
	body {
		font-size: 1.3rem;
	}
	.blockwrap {
		padding: 0;
	}
}


/* ***** kv **************** */
#kv {
	padding-bottom: 10vw;
	background: #f1f1f1;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/main_img.jpg);
}
#kv h1 {
	width: 300px;
	position: absolute;
	top: 10%;
	left: 15%;
	transition: 1.2s;
	transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
	opacity: 0;
	transform: translate(0,100px);
}
body.ready #kv h1 {
	opacity: 1;
	transform: translate(0,0);
}
#kv #lead {
	padding-top: 62.5vw;
	padding-bottom: 10vw;
	font-size: 1.6rem;
	text-align: center;
}
#kv #lead span {
	display: block;
}

@media only screen and (max-width: 767px) {
	#kv {
		padding-bottom: 60px;
		background-image: url(../img/main_img_sp.jpg);
	}
	#kv h1 {
		width: 70%;
		top: 10%;
		left: 10%;
	}
	#kv #lead {
		padding-top: 140vw;
		font-size: 1.3rem;
	}
}

#video_block {
	margin-top: -10vw;
}
#video_block:after {
	content:'';
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/video.jpg);
	z-index: 1;
	transition: 0.3s;
	pointer-events: none;
}
#video_block #playbtn {
	width: 140px;
	height: 140px;
	position: absolute;
	top: 50%;
	left: 50%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(../img/play.svg);
	transform: translate(-50%,-50%);
	transition: 0.3s;
	z-index: 2;
	cursor: pointer;
}
#video_block #playbtn:hover {
	transform: translate(-50%,-50%) scale(1.1);
}
#video_block.play:after,
#video_block.play #playbtn {
	opacity: 0;
	pointer-events: none;
}

@media only screen and (max-width: 767px) {
	#video_block {
		margin-top: 0;
	}
	#video_block #playbtn {
		width: 100px;
		height: 100px;
	}
}


.btn_block {
	width: 100%;
	padding: 12vw 0;
}
.btn_block a {
	display: block;
	width: 250px;
	margin: 0 auto;
}
@media only screen and (max-width: 767px) {
	.btn_block {
		padding: 100px 0;
	}
	.btn_block a {
		width: 80%;
	}
}


h2 {
	padding: 8vw 0;
}
h2 img {
	height: 26px;
	width: auto;
	margin: 0 auto;
}
h2:after {
	content:'';
	display: block;
	width: 48px;
	height: 1px;
	margin: 0 auto;
	margin-top: 30px;
	background: #2C832F;
}
@media only screen and (max-width: 767px) {
	h2 {
		padding: 40px 0;
	}
	h2 img {
		height: 20px;
	}
}

#feature_kv {
	margin-bottom: 10vw;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-image: url(../img/feature_full.jpg);
}
#feature_kv .blockwrap {
	justify-content: flex-end;
	min-height: 56.25vw;
	padding-top: 5vw;
	padding-bottom: 5vw;
}
#feature_kv .txt {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items:flex-end;
	flex-direction: column;
	width: 240px;
	color: #fff;
}
#feature_kv .mlc_logo {
	width: 180px;
	padding-top: 40px;
}

.feature {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 10vw;
}
.feature:first-of-type {
	flex-direction: row-reverse;
}
.feature .img {
	width: calc(95% - 350px);
}
.feature .txt {
	width: 350px;
	padding: 0 50px;
}
.feature .txt h3 {
	padding-bottom: 20px;
}
.feature .txt h3 img {
	height: 36px;
	width: auto;
}

@media only screen and (max-width: 767px) {
	#feature_kv {
		margin-bottom: 80px;
		background-image: url(../img/feature_full_sp.jpg);
	}
	#feature_kv .blockwrap {
		min-height: 146vw;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	#feature_kv .txt {
		justify-content: flex-start;
		width: 80%;
		margin: 0 auto;
	}
	#feature_kv .mlc_logo {
		width: 150px;
		margin: 0 auto;
	}
	
	.feature {
		margin-bottom: 80px;
	}
	.feature .img {
		width: 80%;
		margin: 0 auto;
	}
	.feature .txt {
		width: 80%;
		margin: 0 auto;
		padding: 0;
		padding-top: 30px;
	}
	.feature .txt h3 {
		padding-bottom: 20px;
	}
	.feature .txt h3 img {
		height: 24px;
	}
}


#style_block {
	background: #F4F4F4;
}
#style_lead {
	max-width: 600px;
	margin: 0 auto;
	padding: 5vw 0;
}
#style .imgs {
	display:flex;
	justify-content: space-between;
	flex-wrap: wrap;
	align-items: stretch;
}
#style .imgs img {
	width: calc((100% - 10px) / 2);
}

@media only screen and (max-width: 767px) {
	#style_lead {
		width: 80%;
		max-width: 100%;
		margin: 0 auto;
		padding: 40px 0;
	}
	#style .imgs {
		width: 80%;
		margin: 0 auto;
	}
	#style .imgs img {
		width: 100%;
	}
	#style .imgs img:first-of-type {
		margin-bottom: 10px;
	}
}


#btt {
	cursor: pointer;
}

#footer {
	padding-top: 10vw;
	padding-bottom: 5vw;
	font-family: 'Roboto', sans-serif;
	text-align: center;
}
#footer ul {
	display:flex;
	justify-content: center;
	flex-wrap: wrap;
	align-items: center;
	flex-direction: column;
}
#footer li {
	padding-bottom: 40px;
}
#footer #ub_logo {
	width: 290px;
}
#footer #insta img {
	width: 33px;
	margin: 0 auto;
}
#footer #insta p {
	padding-top: 10px;
	color: #000;
}
#footer #onward {
	width: 108px;
}
#footer #copyright {
	font-size: 1rem;
	color: #9B9B9B;
}

@media only screen and (max-width: 767px) {
	#footer {
		padding-top: 60px;
		padding-bottom: 20px;
	}
	#footer li {
		padding-bottom: 40px;
	}
	#footer #ub_logo {
		width: 200px;
	}
	#footer #insta p {
		font-size: 1.2rem;
	}
	#footer #insta img {
		width: 40px;
	}
	#footer #onward {
		width: 140px;
	}
}