@charset 'UTF-8';

/*COMMON*/
html { -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-text-size-adjust: 100%; font-size: 62.5%; }
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, button, textarea, select, p, blockquote, th, td { margin: 0; padding: 0 }
table { border-collapse: collapse; border-spacing: 0 }
fieldset, img { border: 0 }
address, button, caption, cite, code, dfn, em, input, optgroup, option, select, strong, textarea, th, var { font: inherit }
del, ins { text-decoration: none }
li { list-style: none }
caption, th { text-align: left }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: inherit }
q:before, q:after { content: '' }
abbr, acronym { border: 0; font-variant: normal }
sup { vertical-align: baseline }
sub { vertical-align: baseline }
legend { color: #000 }
body, html { width: 100%; height: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family:'Roboto', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, sans-serif; }
* { outline: none; box-sizing: border-box;}
img { vertical-align: bottom; }
a { text-decoration: none; color: #000;}
input[type="button"],,input[type="text"]input[type="submit"] { -webkit-appearance: none; border-radius: 0;}
.table { display: table; width: 100%; height: 100%; }
.cell { display: table-cell; vertical-align: middle; }
.flex { display: flex; }
.flex-center { align-items: center; }
.in { height: 100%; width: 100%; position: relative; display: block; }
.wrap-h {padding-bottom: 396px; height: 0; position: relative;}
.in-abs { height: 100%; width: 100%; position: absolute; left: 0; top: 0; display: block; }
.js-bg{ width: 100%; height: 100%; }
.is-bg-loaded .bg{ opacity: 1;}
.bg{ width: 100%; height: 100%; -webkit-background-size: cover; background-size: cover; transition: opacity 0.6s; background-position: center;}
section{ padding: 0 64px; }
.wrap { max-width: 940px; width: 100%; position: relative; margin: 210px auto; }

/*FONTS*/
body { color: #000; text-transform: uppercase; background-color: #fcfcfc; }
p { font-size: 1.4em; line-height: 2; letter-spacing: 0.02rem; color: #000;}
ul li, ol li { font-size: 1.3em; line-height: 2; }
ul li .ser, ol li .ser{ font-size: 1.2em; letter-spacing: 0.1em;}
ul li:last-child, ol li:last-child { margin: 0; }
nav ul li{ font-size: 1.3em; letter-spacing: 0.1em;}
section h2{ font-size: 3em; font-weight: 700; letter-spacing: 0.1em; margin-bottom: 6px; }
section h3{ font-size: 1.3em; font-weight: bold; letter-spacing: 0.1em; margin-bottom: 60px; }
section h4{ font-size: 3.3em; letter-spacing: 0.08em; margin-bottom: 40px; font-weight: bold;}
section h4 span { color: #42e5aa }
section h5 { font-size: 1.6rem; letter-spacing: 0.06em; font-weight: bold; text-align: center; margin-top: 5px;} 

/*LOADING*/
.whole-wrap { width: 100%; height: 100%; transition: 1s; }
.loader-bg { height: 100%; margin: 0 auto; width: 100%; align-items: center; justify-content: center; position: fixed; background-color: #fcfcfc; z-index: 120;}
.pb { width: 138px; height: 103px; position: relative;}
.progress-bg{ width: 138px;}
.progress-bar { transition: 1s; width: 100%; height: 100%; background-color: #fcfcfc; position: absolute; left: 0%; top: 0; opacity: .7;}
@keyframes loading { 0% { transform: rotate(0); } 100% { transform: rotate(360deg);} }
@keyframes loading-circle { 0% { stroke-dashoffset: 600 } 100% { stroke-dashoffset: 0;} }

/*FADE-IN*/
.animation { opacity: 0; transform: translate(0, 3.2rem); }
.loaded_animation .animation { transition: all .8s; opacity: 1; transform: translate(0, 0); }
.is_ie .cir-in { transition: all .8s; }

/*HEADER*/
.header {background-color: #fcfcfc; z-index: 100; height: 70px; width: 100%; padding-top: 6px; /*justify-content: space-between; align-items: center; flex-direction: row;*/ position: fixed;}
.header:before { content: ''; display: block; height: 6px; width: 100%; background-color: #42e5aa; position: absolute; top: 0; left: 0; }
.h-left { margin-left: 64px; height: 100%; width: 147px; }
.h-left img { width: 147px; height: 64px; }
.h-left a { transition: .3s; }
.h-right {margin-right: 64px; position: absolute; right: 0; top: 50%; margin-top: -13px;}
.h-right ul li{padding-left: 2.8rem;}
.h-right ul li a { transition: .3s; }
.h-right ul li:first-child{ padding-left: 0; }
/*open;*/
.overlay { transition: .4s; width: 100%; height: 100%; position: fixed; top: 0; right: 0; visibility: hidden; background-color: #fff; z-index: 100; opacity: 0;}
.is-opened .overlay { visibility: visible; opacity: .6;}
.side-overlay { width: 70%; height: 100%; position: fixed; top: 0; right: 0; background-color: #000; z-index: 101; transform: translate(100%, 0); transition: .4s;}
.is-opened .side-overlay{ transform: translate(0,0); }
.side-overlay ul { margin-left: 32px; }
.side-overlay ul li { margin-bottom: 22px; }
.side-overlay ul li a { color: #fff; font-size: 2.5rem; letter-spacing: 0.1rem; }
.open-nav { display: none; height: 60px; width: 60px; z-index: 102; position: fixed; top: 6px; right: 0;}
.open-icon { width: 20px; height: 12px; display: block; position: relative; margin: 0 auto; }
.open-icon span { width: 20px; height: 2px; background-color: #000; display: block; position: absolute; left: 0; transition: .4s;}
.is-opened .open-icon span { background-color: #42e5aa; }
.b1{ top: 0; }
.b3{ bottom: 0; }
.b1{ top: 50%; margin-top: -1px; }
.is-opened .b1{ transform: rotate(-45deg); top: 5px;}
.is-opened .b2{ display: none; }
.is-opened .b3{ transform: rotate(45deg); bottom: 5px; }

/*MV*/
.mv { height: 100%; position: relative;}
.mv .cell { text-align: center; }
h1 img { width: 138px; height: 104px; }
.bar {position: absolute; left: calc(50% - 29px); bottom: 0; padding-bottom: 40px; font-size: 1.3em; letter-spacing: 0.1em;}
.bar:after { content: ''; height: 32px; width: 1px; position: absolute; bottom: 0; left: 50%; background-color: #000;}

/*CONCEPT*/
.w-left { width: 50%; margin-right: 5%;}
.w-right { max-width: 430px; max-height: 440px; width: 100%; height: auto; margin-right: -4%; position: relative;}
.cir { position: absolute; bottom: -40px; left: 50%; margin-left: calc(-100%/2); max-width: 428px; max-height: 428px; width: 100%; transform: rotate(-90deg);}
.cir-in { fill: transparent; fill-opacity: 0; stroke: #42e5aa; stroke-linejoin: round; stroke-width: 66px; transition: 1s; transition-timing-function:linear;}
.graph { max-width: 242px; max-height: 396px; width: 100%; height: auto; margin: 0 auto;}
#concept{ justify-content: space-between; padding-top: 10px;}
.arr { animation: arr 1.5s linear infinite; width: 29px; height: 100px; position: absolute; top: 96px; right: 50px; }
@keyframes arr { 0% { transform: translate(0, -150px); opacity: 0;} 40% { opacity: 0;} 50% { opacity: 1;} 70% { opacity: 1;} 100% { transform: translate(0, 100px); opacity: 0;}}

/*SERVICE*/
#service { padding-top: 10px; }
.box-wrap ul { flex-wrap: wrap; }
.box-wrap ul li { width: 30%; background-color: #111; margin-right: 5%; margin-bottom: 44px; color: #fff;}
.box-wrap ul li:nth-child(3){ margin-right: 0; }
.box-wrap ul li ul {padding: 0 25px 35px; }
.box-wrap ul li ul li{ font-size: 1.2rem; width: 100%; margin: 0; position: relative; padding-left: 12px; }
.box-wrap ul li ul li:before { content: ''; display: block; position: absolute; top: calc( 50% - 2.5px ); left: 0; width: 5px; height: 5px; border-radius: 10px; background-color: #42e5aa;}
.icon-wrap {padding: 40px 25px 28px;}
.icon-box {height: 67px; width: 100%; display: block; }
.icon-box .flex { width: 100%; height: 100%; }
.icon-box svg {margin: 0 auto; }
.icon-box svg.icon1 { height: 48px; }
.icon-box svg.icon2 { height: 55px; }
.icon-box svg.icon3 { height: 42px; }
.icon-box svg.icon4 { height: 52px; }
.icon-box svg.icon5 { height: 67px; }
/*icon*/
.cls-1,.cls-2{fill:none; stroke:#4affbd; stroke-miterlimit:10; stroke-width:1.5px;}
.cls-2{stroke-linecap:round;}
.cls-3{fill:#4affbd;}

/*CONTACT*/
section.cont{ background-color: #0f0f0f; padding-top: 90px; padding-bottom: 90px; }
section.cont h2, section.cont h3, section.cont h4, section.cont p { color: #fff; }
section.cont h3 { margin-bottom: 24px;  }
section.cont .req { margin-bottom: 40px; font-size: 1.3em;}
section.cont h4 { font-size: 2.6em;}
section.cont .wrap { margin: 0 auto; }
input, textarea {transition: .3s; width: 100%; height: 100%; background-color: transparent; border-style: none; border-radius:0; border-bottom: 1px solid #575757; color: #999; padding: 0 20px 0 130px; font-size: 1.6em; line-height: 1.8; position: relative; z-index: 2;}
textarea { overflow: auto; padding: 56px 0 20px; }
dl { display: flex; flex-wrap: wrap; }
dd { color: #fff; width: 100%; height: 274px; margin-bottom: 38px; position: relative;}
dd span { position: absolute; top: 50%; left: 0; margin-top: -11px; font-size: 1.4em; z-index: 1;}
dd.form-r1, dd.form-r2 { height: 52px; width: 48%; position: relative; }
.form-r1 { margin-right: 4%;}
.mfp_buttons { width: 48%; display: flex; flex-direction: row-reverse; }
.mfp_buttons button{ transition: .4s all; border-style: none; width: 100%; height: 60px; background-color: #0f0f0f; font-size: 1.6em; font-weight: bold; border: 1px solid #fff; color: #fff; }
.button a{ transition: .4s all; width: 200px; height: 60px; font-size: 1.6em; font-weight: bold; border: 1px solid #000; color: #000; margin: 32px auto 0; line-height: 3.6; display: block;}
#mfp_phase_confirm .mfp_buttons { width: 100%; }
label { width: 210px; align-items: center; height: 100%; position: relative; flex-wrap: wrap;}
label span{ transition: .3s; width: 16px; height: 16px; border: 1px solid #fff; position: absolute; top:50%; left: 0; margin-top: -8px;}
label.mfp_checked span { background-color: #42e5aa; border-color: #42e5aa; }
label input{ visibility: hidden; display: inline-block; width: 16px; height: 16px; }
label p { color: #fff; left: 28px; position: absolute; top: 50%; margin-top: -14px; }
label { transition: .3s; }
.label_contents {margin-top: 0; top: 7%;}
input:focus, textarea:focus{ border-color: #42e5aa; }
div.mfp_buttons button#mfp_button_send { width: 90%; margin-left: 10px;}
div.mfp_buttons button#mfp_button_cancel {width: 90%;}
.thanks { text-align: center; }
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active { -webkit-box-shadow: 0 0 0px 1000px rgba(102, 163, 177, 0) inset; -webkit-transition: background-color 9999s; transition: background-color 9999s; color: #999!important;}
input:-webkit-autofill:first-line { color: #999; }

/*FOOTER*/
footer { background-color: #000; padding: 64px 64px 56px; }
footer .wrap{ margin: 0 auto 54px; }
footer p{ color: #fff; font-size: 1.3em;}
.ad { margin-right: 6%; }
footer p span{ opacity: .5; display: inline-block; margin-left: 16px;}
.credit { text-align: right; font-size: 11px; opacity: .3; letter-spacing: 0.1em;}

/*RESPONSIVE*/
/*hover*/
@media screen and (min-width:769px) {
.mfp_buttons button:hover, .button a:hover { border-color: #42e5aa; color: #42e5aa; }
label:hover, .h-right ul li a:hover, .h-left a:hover { opacity: .6; }
}

@media screen and (min-width: 1400px) {
	p { font-size: 1vw; }
	.box-wrap ul li ul li { font-size: 0.9vw; }
	label p { font-size: 1.4em; }
}

@media screen and (min-width: 2000px) {
	p { font-size: 1.8rem; }
	label p{ font-size: 1.4em; }
	.box-wrap ul li ul li { font-size: 1.8rem; }
}

@media screen and (max-width:768px) {
.open-nav { display: block; }
.header { height: 66px; }
.h-right { display: none; }
.h-left { margin-left: 20px; width: 120px; }
section{ padding: 0 20px; }
#concept { flex-wrap: wrap; }
.wrap { margin: 100px auto; }
.w-left { width: 100%; margin-right: 0;}
.w-right { width: 100%; margin: 24px auto 0; height: auto;}
.arr { right: 6%; }
section h2 { font-size: 2.6em; }
section h3 { font-size: 1.2em; margin-bottom: 42px;}
section h4 { font-size: 2.5em; margin-bottom: 20px;}
section h5 { margin: 0; }
.box-wrap ul { flex-wrap: wrap; }
.box-wrap ul li { width: 100%; margin-right: 0; margin-bottom: 16px;}
.box-wrap ul li:last-child{ margin: 0; }
.box-wrap ul li ul { padding: 0 30px 28px; }
.box-wrap ul li ul li { font-size: 1.3rem; }
.icon-wrap { display: flex; align-items: center; padding: 30px 30px 20px;}
.icon-box { width: auto; display: inline-block; margin-right: 14px; height: 52px;}
.icon-box svg.icon1 { height: 36px; }
.icon-box svg.icon2 { height: 41px; }
.icon-box svg.icon3 { height: 30px; }
.icon-box svg.icon4 { height: 37px; }
.icon-box svg.icon5 { height: 52px; }
section.cont { padding-top: 46px; padding-bottom: 46px; }
dd { margin-bottom: 18px; height: 225px;}
dd.check { margin-bottom: 30px; }
dd.form-r1, dd.form-r2, .mfp_buttons { width: 100%; }
.form-r1 { margin-right: 0; }
input { padding: 0 0 0 114px; }
.label_contents { top: 6%; }
textarea { padding: 45px 0 10px; }
.mfp_buttons button{ border-color: #42e5aa; color: #42e5aa; }
footer { padding: 32px 0; }
footer .wrap { flex-wrap: wrap; align-items: center; flex-direction: column; margin: 0 auto 40px;}
.credit { text-align: center; }
footer p { margin: 0; }
.ad{ margin-bottom: 4px; margin-right: 0; }

}

@media screen and (max-width:375px) {
.pb { width: 35%; height: auto;}
.progress-bg { width: 100%; }
h1 img { width: 35%; height: auto; }
section.cont p { margin-bottom: 30px; }
.side-overlay ul li { margin-bottom: 14px; }
.loader {width: 70px;}
.cir { bottom: 50%; margin-bottom: calc(-100%/2);}
.arr { right: 0; }
}