@charset "utf-8";

@import"https://fonts.googleapis.com/css?family=Roboto:400,700";
@import"https://fonts.googleapis.com/css?family=Noto+Sans+JP:400,700&display=swap&subset=japanese";
@charset "UTF-8";
@font-face {
    font-family: aderans_mens-fonts;
    src: url('/mens/common/rn-font//aderans_mens-fonts.eot');
    src: url('/mens/common/rn-font//aderans_mens-fonts.eot?#iefix') format("eot"), url('/mens/common/rn-font//aderans_mens-fonts.woff') format("woff"), url('/mens/common/rn-font//aderans_mens-fonts.ttf') format("truetype"), url('/mens/common/rn-font//aderans_mens-fonts.svg#aderans_mens-fonts') format("svg")
}

/* ====================================== */
/* common */

/* 
html {
    visibility: hidden;
}

html.wf-active,
html.loading-delay {
    visibility: visible;
}
 */
body {
    font-family: 'Noto Sans JP', sans-serif;
    color: #313131;
}
a:hover,
a img:hover {
	opacity: 0.7 !important;
    text-decoration: underline !important;
}
a:link, a:visited {
    color: white;
}
main,img,p,div,ul,li,a,p,dl,dt,dd {
    box-sizing: border-box;
    letter-spacing: 0.03em;
    line-height: 1.8;
}

main {
	position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    padding-bottom: 10%;
}
main p {
    top: -2px;
}

img, h1, h2, h3, p, li, a, div, span {
    transition: all .1s ease;
    font-feature-settings: "palt";
}
section img,
.fv img {
  opacity: 0;
  -webkit-transition: opacity 3s;
  transition: opacity 3s;
}
section img.lazyload,
.fv img.lazyload {
  opacity: 1;
}

.pc {
    display: block;
}
.ipad {
    display: none;
} 
.sp {
    display: none;
}
.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    max-width: initial;
    margin: 0 auto 0 auto;
}
.youtube iframe {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

/* header
========================================== */
header {
  position: relative;
  width: 100%;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 70px;
  padding: 0 40px 0 30px;
  background-color: #232323;
}
header .logo img {
  width: 127px;
}
header nav {
  display: flex;
  align-items: center;
}
header nav ul {
  display: flex;
  align-items: center;
}
header nav ul li {
  margin-right: 36px;
}
header nav ul li:last-child {
  margin-right: 0;
}
header nav ul li a {
  font-size: 18px;
  color: #fff;
}
header nav ul li p {
  display: none;
}
header .humberger {
  display: none;
}

/* ====================================== */
/* liveact */

section.fv {
    position: relative;
    padding: 0 0 0 0;
    margin: 0 0 150px 0;
}
section.fv .sec_inner {
    position: relative;
    margin: auto;
    font-size: 0;
}
section.fv .sec_inner .fv_video {
    width: 100%;
    position: relative;
    overflow: hidden;
}
.liveact-controls > .lac-row {
    display: none!important
}

/* ====================================== */
/* section lead */

section.lead {
    position: relative;
}
section.lead img.bg {
    position: absolute;
    z-index: -1;
    top: -50px;
    right: 0;
}
section.lead .inner h1 {
    width: 404px;
    height: 90px;
    display: table;
    margin: 0 auto 4em auto;
    text-indent: -999em;
    background: url("../images/firstlead_logo.png") no-repeat;
}
section.lead .inner p {
    text-align: center;
    font-size: 1.7rem;
    font-weight: 500;
    line-height: 2.2;
}

/* ====================================== */
/* section history */

section.history .lead {
    margin: 0 auto 3em auto;
}
section.history .lead dl,
section.tech .lead dl {
    text-align: center;
}
section.history .lead dl dt,
section.tech .lead dl dt {
    font-weight: 700;
    margin: 0 auto 1em auto;
    font-size: 1.85rem;
    line-height: 1em;
}
section.history .lead dl dd,
section.history ul.box li p.sentence,
section.newproduct dl dd,
section.tech p {
    line-height: 2;
    font-size: 1rem;
    font-weight: 500;
}
section.history ul.box {
    display: flex;
    max-width: 1000px;
    margin: 0 auto;
    justify-content: space-between;
}
section.history ul.box li {
    width: calc(100% / 3 - 30px);
}
section.history ul.box li .year {
    background: #313131;
    padding: 0.5em 0;
    width: 100%;
    margin: 0 auto 1em auto;
}
section.history ul.box li .year p {
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1em;
    color: white;
    text-align: center;
}
section.history ul.box li .year p span {
    font-size: 70%;
}
section.history ul.box li p.catch {
    line-height: 1em;
    font-size: 1.2rem;
    text-align: center;
    font-weight: 500;
    margin-bottom: 1em;
}
section.history ul.box li picture {
    margin-bottom: 1em;
    display: table;
}

/* ====================================== */
/* section newproduct */

section.newproduct {
    max-width: 1000px;
    margin: 0 auto;
}
section.newproduct .detail {
    display: flex;
    align-items: flex-start;
}
section.newproduct .detail picture {
    flex-shrink: 0;
}
section.newproduct .detail dl {
    padding-left: 1em;
}
section.newproduct .detail dl dt {
    position: relative;
    text-align: center;
    font-size: 1.4rem;
    font-weight: 500;
    margin-bottom: 1em;
}
section.newproduct .detail dl dt:before,
section.newproduct .detail dl dt:after {
    content: "";
    background-repeat: no-repeat;
    display: table;
    width: 586px;
    height: 25px;
}
section.newproduct .detail dl dt:before {
    background-image: url("../images/newproduct_deco1.png");
    background-position: bottom center;
}
section.newproduct .detail dl dt:after {
    background-image: url("../images/newproduct_deco2.png");
    background-position: top center;
}
section.newproduct dl dd {
    letter-spacing: 0;
}

/* ====================================== */
/* section tech */

section.tech {
    padding: 0 0 0 0;
}
section.tech .headline {
    margin: 0 auto 3em auto;
}
section.tech .profile {
    background: url("../images/tech_bg.jpg") no-repeat;
    background-size: cover;
    border: 1px solid #c8c8c8;
}
section.tech .profile .inner {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding-bottom: 2em;
}
section.tech .profile picture {
    flex-shrink: 0;
    position: absolute;
    bottom: 0;
}
section.tech .profile .text img {
    position: relative;
    top: -20px;
}
section.tech .profile .text dl {
    line-height: 1em;
    padding-bottom: 1em;
    border-bottom: 2px dotted rgba(49,49,49,0.3);
    margin-bottom: 1.5em;
}
section.tech .profile .text dl dt {
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1em;
}
section.tech .profile .text dl dd {
    font-size: 2.5rem;
    font-weight: 700;
}
section.tech .profile .text dl dd span.blue {
    color: #0d336d;
}
section.tech .profile .text dl dd span.small {
    font-size: 60%;
}
section.tech .text {
    padding-left: 390px;
    position: relative;
    top: -20px;
}
section.tech .lead {
    margin-bottom: 5em;
}
section.tech .headline p.sub {
    margin-bottom: 0;
    line-height: 1em;
}

/* ====================================== */
/* section secret */

section.secret {
    max-width: 1000px;
    margin: 0 auto;
}
section.secret .title {
    background-color: #313131;
    position: relative;
    background-position: right;
    background-size: auto 100%;
    background-repeat: no-repeat;
    cursor: pointer;
    margin-bottom: 4em;
}
section.secret .title:hover {
    opacity: 0.7;
}
section.secret .title:after,
section.secret .title.one.mouseon:after {
    content: "";
    width: 58px;
    height: 56px;
    display: table;
    right: 3em;
    top: 0;
    bottom: 0;
    margin: auto;
    position: absolute;
    background: url("../images/more.png") no-repeat;
}
section.secret .title.mouseon:after,
section.secret .title.one:after {
    width: 66px;
    height: 57px;
    background: url("../images/close.png") no-repeat;
}
section.secret .title.one {
    background-image: url("../images/tech_list_bg1.jpg");
}
section.secret .title.two {
    background-image: url("../images/tech_list_bg2.jpg");
}
section.secret .title.three {
    background-image: url("../images/tech_list_bg3.jpg");
}
section.secret .title.four {
    background-image: url("../images/tech_list_bg4.jpg");
    margin-bottom: 0;
}
section.secret .acc-inner.one {
    display: block;
}
section.secret .acc-inner.four .movie p {
    padding-top: 2em;
}
section.secret .num {
    position: absolute;
    top: -2em;
    left: -2em;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
section.secret .num p {
    font-size: 5.2rem;
    font-weight: 900;
    position: relative;
    color: white;
    background: rgba(38,55,122,0.9);
    font-family: 'Noto Serif JP', serif;
    padding: 0.2em 0.2em;
    line-height: 1em;
    letter-spacing: 0;
}
section.secret .num p:before {
    content: "#";
    font-size: 50%;
}
section.secret .wrap {
    background: url(../images/dot.png) repeat-y;
    color: white;
    padding: 2.5em 0 2.5em 12em;
    position: relative;
    display: table;
}
section.secret .wrap .catch {
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1em;
    margin-bottom: 0.8em;
}
section.secret .wrap h2 {
    font-size: 2.8rem;
    line-height: 1.3em;
}
section.secret .title.one .wrap:after,
section.secret .title.four .wrap:after {
    content: "";
    width: 109px;
    height: 122px;
    display: table;
    position: absolute;
    right: -140px;
    top: 0;
    bottom: 0;
    margin: auto;    
}
section.secret .title.one .wrap:after {
    background: url(../images/tech1_list_balloon.png) no-repeat;
}
section.secret .title.four .wrap:after {
    background: url(../images/tech4_list_balloon.png) no-repeat;
}
section.secret .acc-inner {
    display: none;
    transition: none;
}
section.secret ul.ok {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 5em;
}
section.secret ul.ok li {
    border: 1px solid #313131;
    position: relative;
    width: calc(100% / 3 - 20px);
}
section.secret ul.ok li img {
    width: 100%;
}
section.secret ul.ok li p {
    display: table;
    background: #313131;
    line-height: 1em;
    color: white;
    text-align: center;
    padding: 0.5em 1em;
    position: absolute;
    bottom: -1em;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
    font-size: 1.5rem;
    white-space: nowrap;
}
section.secret .poly p {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
    margin-bottom: 3em;
}
section.secret .poly ul.merit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-content: center;
}
section.secret .poly ul.merit li:first-child,
section.secret .poly ul.merit li:nth-child(3) {
    border: 1px solid #313131;
    padding: 5em 2em 1em 2em;
    position: relative;
    background: url("../images/merit_bg.png") repeat-x top center;
}
section.secret .poly ul.merit li:first-child {
    right: -1em;
}
section.secret .poly ul.merit li:nth-child(3) {
    left: -1em;
}
section.secret .poly ul.merit li dl {
    text-align: center;
    line-height: 1.5;
}
section.secret .poly ul.merit li p.blue {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
    padding: 0.5em 1em;
    line-height: 1em;
    background: #26377a;
    position: absolute;
    top: -1em;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
    display: table;
}
section.secret .poly ul.merit li dl:first-of-type dt {
    color: #e50000;
    font-weight: 500;
}
section.secret .poly ul.merit li dl:last-of-type dt {
    color: #263779;
    font-weight: 500;
}
section.secret .poly ul.merit li dl:first-of-type dd {
    margin-bottom: 1em;
}
section.secret .poly picture.arrow {
    margin: 1em auto 3em auto;
    display: table;
    text-align: center;
}
section.secret .poly .cyber {
    border: 1px solid #313131;
    position: relative;
    background: url(../images/cyber_bg.png) repeat-x top center;
    padding: 6em 2em 2em 2em;
    margin: 0 auto 5em auto;
}
section.secret .poly .cyber picture.cyberlogo {
    border: 4px solid #313131;
    line-height: 1em;
    padding: 1em 3em;
    display: table;
    position: absolute;
    top: -2em;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
    background: white;
}
section.secret .poly .cyber .inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.secret .poly .cyber .inner ul.text {
    margin-right: 1.5em;
}
section.secret .poly .cyber .inner ul.text li {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 2;
    position: relative;
    display: flex;
    align-items: center;
}
section.secret .poly .cyber .inner ul.text li:before {
    content: "";
    display: inline;
    background: #e50000;
    width: 10px;
    height: 10px;
    margin-right: 0.5em;
    border-radius: 50%;    
}
section.secret .poly .cyber .inner picture {
    position: relative;
    margin-right: -80px;
}
section.secret ul.tachi {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 5em auto;
}
section.secret ul.tachi li {
    position: relative;
}
section.secret ul.tachi p {
    color: white;
    font-weight: 500;
    font-size: 1.5rem;
    padding: 0.5em 2em;
    position: relative;
    display: table;
    top: -1em;
    line-height: 1em;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px); 
    left: 50%;
    right: 0;
}
section.secret ul.tachi li:first-child p {
    background: #e50000;
}
section.secret ul.tachi li:nth-child(2) p {
    background: #313131;
}
section.secret p.lead,
section.fv-btm p.lead {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: left;
    margin-bottom: 3em;
}
section.secret p.note.btm {
    margin-top: 1em;
}

/* ====================================== */
/* section fv-btm */

section.fv-btm .fvbtm-wrap {
    background: url(../images/conv_bg.jpg) no-repeat;
    background-size: cover;
    min-height: 540px;
    position: relative;
}
section.fv-btm .fvbtm-wrap picture {
    display: table;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
section.fv-btm p.lead {
    margin: 0 auto 8em auto;
    display: table;
    padding: 0 5%;
}

/* ====================================== */
/* section linkbanner */

section.linkbanner {
    max-width: 1000px;
    margin: 0 auto;
}
section.linkbanner p.lead {
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    margin-bottom: 1em;
}
section.linkbanner ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
section.linkbanner li {
    position: relative;
}
section.linkbanner li picture {
    margin-bottom: 2em;
    display: table;
    border: 1px solid #313131;
    position: relative;
}
section.linkbanner li p.black {
    background: #313131;
    font-size: 1.5rem;
    font-weight: 500;
    text-align: center;
    position: relative;
    margin: 0 auto;
    top: 1em;
    padding: 0.8em 2.5em;
    line-height: 1em;
    display: table;
    color: white;
    z-index: 2;
}
section.linkbanner li .link a {
    border-radius: 8px;
    background: #e50000;
    margin: 0 auto;
    display: table;
    padding: 0.8em 3em 0.8em 2em;
    font-weight: 500;
    position: relative;
    font-size: 1.5rem;
    line-height: 1em;
}
section.linkbanner li .link a:hover {
    text-decoration: none !important;
}
section.linkbanner li .link a:after {
    content: "";
    width: 25px;
    height: 9px;
    position: absolute;
    display: table;
    right: 1.5em;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: all .1s ease;
    background: url("../images/dotarrow.png") no-repeat;
}
section.linkbanner li .link a:hover:after {
    right: 0.5em;
}

/* ====================================== */
/* section common */

section {
    padding: 0 0 150px 0;
}
.headline {
    position: relative;
    padding-bottom: 1.8em;
    border-bottom: 1px solid #313131;
    margin: 0 auto 6em auto;
    display: table;
}
.headline:after {
    content: "";
    display: table;
    left: 0;
    right: 0;
    margin: auto;
    background: url(../images/headline_underline.png) no-repeat center;
    background-size: contain;
    bottom: -20px;
    width: 36px;
    height: 21px;
    position: absolute;
}
.headline p {
    line-height: 1em;
    text-align: center;
}
.headline p.sub {
    color: rgba(49,49,49,0.5);
    font-size: 1.8rem;
    margin-bottom: 1em;
}
.headline p.main {
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 1.4em;
}
.headline p.main span {
    color: #e50000;
}
.headline p.main span.big {
    font-size: 180%;
}
p.note {
    font-size: 70%;
}
.subheadline {
    position: relative;
    text-align: center;
    line-height: 0;
    margin-bottom: 3em;
}
.subheadline:after {
    content: "";
    width: 100%;
    height: 1px;
    background: rgba(178,178,178,1);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    line-height: 0;
    display: table;
}
.subheadline p {
    font-weight: 700;
    display: table;
    padding: 1em;
    background: white;
    font-size: 2rem;
    text-align: center;
    margin: 0 auto;
    line-height: 1.5;
    z-index: 2;
    position: relative;
}
section.explanation {
    max-width: 1000px;
    margin: 0 auto;
}
.movie p {
    padding: 0 0 3em 0;
    font-size: 1.5rem;
    font-weight: 500;
}
.movie p.lead-marginzero {
    padding: 0 0 0 0;
}
.secret-subtitle {
    margin: 4em auto 0 auto;
}
.secret-subtitle p {
    position: relative;
    text-align: center;
    margin-bottom: 1.5em;
    font-size: 1.8rem;
    font-weight: 500;
}
.secret-subtitle p:after {
    content: "";
    display: table;
    margin: 0 auto;
    width: 292px;
    height: 16px;
    background: url(../images/secret_underarrow.png) no-repeat center;
    bottom: -0.2em;
    position: relative;
}
.blacktitle {
    background: #313131;
    width: 100%;
    padding: 1em;
    position: relative;
    text-align: center;
    margin: 0 auto 3em auto;
}
.blacktitle:before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    display: table;
    width: 10px;
    height: 100%;
    background: #e50000;
}
.blacktitle p,
.blacktitle img {
    margin: 0 auto;
    color: white;
}
.blacktitle p {
    font-size: 2.5rem;
    font-weight: 500;
    line-height: 1.5;
} 
.blacktitle p.small {
    font-size: 80%;
}
.overview {
    display: flex;
    align-items: flex-end;
    position: relative;
    margin-bottom: 6em;
}
.overview:after {
    content: "";
    display: table;
    background: rgba(227,227,227,0.5);
    width: 100%;
    height: 66px;
    right: 0;
    bottom: 0;
    position: absolute;
    z-index: -1;
}
.overview picture {
    flex-shrink: 0;
    align-items: baseline;
}
.overview .text {
    padding-left: 2em;
}
.overview .text p {
    font-size: 1.3rem;
    font-weight: 500;
    margin-bottom: 2em;
    line-height: 2;
}
.overview .text img {
    border: 1px solid #d1d1d1;
    padding: 1.5em;
    background: white;
    position: relative;
    bottom: 1em;
}
.point {
    border: 2px dotted #c8c8c8;
    background: url(../images/point_bg.jpg) no-repeat right;
    background-size: auto 100%;
    padding: 1em 2em;
    position: relative;
    margin-bottom: 100px;
}
section.secret .acc-inner.four .point {
    margin-bottom: 0;
}
.point dl {
    padding: 0 220px 0 0;
    line-height: 1em;
}
.point dl dt {
    position: relative;
    border-bottom: 1px solid #fdd228;
    padding-bottom: 0.5em;
    font-size: 2rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    line-height: 1.5em;
    margin-bottom: 0.5em;
}
.point dl dt:before {
    content: "";
    width: 86px;
    height: 37px;
    display: table;
    margin-right: 0.5em;
    background: url("../images/secret_point_title.png") no-repeat;
}
.point dl dd {
    font-size: 1.15rem;
}
.point dl dd span {
    background: linear-gradient(transparent 70%, #fdd228 20%);
}
.point picture {
    position: absolute;
    right: 2em;
    bottom: 0;
}


/* ====================================== */
/* bottom other banner */

section.bottomotherbanner {
    margin: 0 auto;
    max-width: 1000px;
}
section.bottomotherbanner ul {
    display: flex;
    justify-content: space-between;
}
section.bottomotherbanner li {
    width: calc(100% / 2 - 10px);
}
section.bottomotherbanner p {
    font-weight: 800;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1em;
}
section.bottomotherbanner p.catch {
    position: relative;
    display: table;
    margin: 0 auto 1.5em auto;
    padding: 0 1em 0.8em 1em;
    line-height: 1;
    border-bottom: 2px solid #fdd228;
}
section.bottomotherbanner p.catch:after {
    content: "";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 30px 0 30px;
    border-color: #fdd228 transparent transparent transparent;
    position: absolute;
    bottom: -15px;
    transform: translate(-50%, 0px);
    -webkit-transform: translate(-50%, 0px);
    -ms-transform: translate(-50%, 0px);
    left: 50%;
    right: 0;
}
section.bottomotherbanner li p {
    margin-bottom: 0.5em;
    font-weight: 600;
    font-size: 1.25rem;
}

/* ====================================== */
/* media query */

@media screen and (max-width : 64em) {
	
    body {
        min-width: 1100px;
    }
}
@media screen and (max-width : 42em) {
	
    /* common */
    body {
        min-width: 100%;
    }
    .pc {
        display: none;
    }
	.sp {
		display: block;
	}

    header {
        justify-content: center;
        height: 75px;
    }
    header .logo {
        flex-basis: 148px;
    }
    header nav {
        display: none;
    }
    header .hamburger {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 75px;
        height: 75px;
        background-color: transparent;
        z-index: 9999;
        transition: background-color .2s linear;
    }
    header .menu-trigger,
    .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box;
    }
    .menu-trigger {
        position: absolute;
        top: 26px;
        right: 20px;
        width: 35px;
        height: 23px;
    }
    .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: #fff;
    }
    .menu-trigger span:nth-of-type(1) {
        top: 0;
    }
    .menu-trigger span:nth-of-type(2) {
        top: 11px;
    }
    .menu-trigger span:nth-of-type(3) {
        bottom: 0;
    }
    .menu-trigger.active span {
    }
    .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-45deg);
    }
    .menu-trigger.active span:nth-of-type(2) {
        opacity: 0;
    }
    .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-10px) rotate(45deg);
        transform: translateY(-10px) rotate(45deg);
    }
    header nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: #000;
        z-index: 9998;
        padding: 80px 50px 0;
        overflow-y: scroll;
    }
    header nav.open {
          display: block;
          animation: open .3s linear 0s;
    }
    @keyframes open {
      from{
          opacity: 0;
      }
      to{
          opacity: 1;
      }
    }
    header nav {
        flex-wrap: wrap;
    }
    header nav ul {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin-bottom: 60px;
    }
    header nav ul li {
        flex-basis: 100%;
        padding-bottom: 25px;
        margin-bottom: 20px;
        margin-right: 0;
        border-bottom: 1px dotted #fff;
    }
    header nav ul li:after {
        display: none;
    }
    header nav ul li:last-child {
        margin-bottom: 0;
    }
    header nav ul li a {
        font-size: 25px;
        line-height: 1;
    }
    header nav ul li p {
        font-size: 17px;
        display: block;
        padding-top: 12px;
    }
    
    /* section fv */
    
    section.fv {
        margin: 0 0 4em 0;
    }
    
    /* section lead */
    
    section.lead {
        position: relative;
        padding: 0 5% 4em 5%;
    }
    section.lead .inner h1 {
        padding-top: 22.2772277228%;
        line-height: 0;
        width: 70%;
        margin: 0 auto 1em auto;
    }
    section.lead .inner p {
        line-height: 1.8;
        font-size: 4vw;
        text-align: left;
    }
    .headline {
        padding-bottom: 1em;
        margin: 0 auto 3em auto;
    }
    .headline p.sub {
        font-size: 3.8vw;
    }
    .headline p.main {
        font-size: 5.5vw;
    }
    
    /* section history */

    section.history .lead dl dt,
    section.tech .lead dl dt {
        font-size: 4.5vw;
        line-height: 1.5;
    }
    section.history .lead {
        padding: 0 5%;
        margin: 0 auto 2em auto;
    }
    section.history .lead dl dd {
        text-align: left;
    }
    section.history ul.box {
        display: block;
        width: 90%;
    }
    section.history ul.box li {
        width: 100%;
        margin-bottom: 1.5em;
    }
    section.history ul.box li picture {
        margin: 0 auto 1em auto;
    }
    section.history ul.box li .year p {
        font-size: 7vw;
    }
    section.history ul.box li p.catch {
        font-size: 5vw;
    }
    
    /* section newproduct */  

    section.newproduct,
    section.explanation {
        max-width: 100%;
        padding: 0 5% 4em 5%;
    }
    section.newproduct .detail {
        display: block;
    }
    section.newproduct .detail picture {
        margin: 0 auto 2em auto;
        display: table;
    }
    section.newproduct .detail dl {
        padding-left: 0;
    }
    section.newproduct .detail dl dt:before,
    section.newproduct .detail dl dt:after {
        width: 100%;
        padding-top: 4.2662116041%;
    }
    section.newproduct .detail dl dt {
        font-size: 4vw;
    }
    
    /* section tech */
    
    section.tech .lead {
        padding: 0 5%;
        margin-bottom: 2em;
    }
    section.tech .headline {
        margin: 0 auto 2em auto;
    }
    section.tech .profile .inner {
        max-width: 95%;
    }
    section.tech .profile picture {
        width: 40%;
        display: table;
        top: -6em;
    }
    section.tech .profile .text img {
        position: absolute;
        width: 60%;
        right: 0;
        top: -2em;
    }
    section.tech .text {
        padding-left: 0;
        top: 0;
    }
    section.tech .profile .text dl {
        margin: 0 0 0 auto;
        display: table;
        padding-top: 3em;
        padding-right: 1em;
        padding-bottom: 0.5em;
        margin-bottom: 1em;
    }
    section.tech .profile .text dl dt {
        font-size: 3.5vw;
    }
    section.tech .profile .text dl dd {
        font-size: 4.5vw;
    }
    .subheadline {
        margin-bottom: 1em;
    }
    .subheadline p {
        font-size: 5vw;
    }
    section.tech p {
        padding: 0 5%;
    }
    
    /* setion secret */
    
    section.secret {
        max-width: 90%;
    }
    section.secret .wrap .catch {
        font-size: 4vw;
    }
    section.secret .num {
        width: auto;
        height: auto;
        top: -1em;
        left: -1em;
    }
    section.secret .num p {
        font-size: 7vw;
    }
    section.secret .wrap h2 {
        font-size: 4.5vw;
        font-weight: 700;
    }
    section.secret .wrap {
        padding: 1.5em 1.5em 1.5em 2.5em;
        background: url(../images/dot_sp.png) repeat-y;
        background-size: 10%;
    }
    section.secret .title.one .wrap:after,
    section.secret .title.four .wrap:after {
        zoom: 0.6;
        bottom: initial;
        top: -20px;
        right: -5em;
    }
    section.secret .title:after, section.secret .title.one.mouseon:after {
        background: url(../images/more_sp.png) no-repeat center;
        width: 2em;
        height: 2em;
        right: 1em;
        padding-top: 0;
        background-size: contain;
    }
    section.secret .title.mouseon:after,
    section.secret .title.one:after {
        background: url(../images/close_sp.png) no-repeat center;
        width: 2em;
        height: 2em;
        right: 1em;
        padding-top: 0;
        background-size: contain;
    }
    .secret-subtitle {
        margin: 2em auto 0 auto;
    }    
    .secret-subtitle p {
        font-size: 4.8vw;
    }
    .secret-subtitle p:after {
        zoom: 0.6;
    }
    section.secret .acc-inner.four .movie p {
        padding-top: 1em;
    }
    section.secret .title {
        margin-bottom: 1.5em;
    }
    section.secret ul.ok {
        display: block;
        margin-bottom: 3em;
    }
    section.secret ul.ok li {
        width: 70%;
        margin: 0 auto 2em auto;
    }
    section.secret ul.ok li p {
        font-size: 4vw;
    }
    section.secret .poly p {
        font-size: 4vw;
    }
    section.secret .poly ul.merit {
        display: block;
    }
    section.secret .poly ul.merit li:first-child,
    section.secret .poly ul.merit li:nth-child(3) {
        padding: 3em 1em 1em 1em;
        background-size: contain;
    }    
    section.secret .poly ul.merit li:first-child {
        right: 0;
    }
    section.secret .poly ul.merit li:nth-child(2) picture {
        margin: 1em auto 3em auto;
        display: table;
        zoom: 0.8;
    }    
    section.secret .poly ul.merit li:nth-child(3) {
        left: 0;
    }
    section.secret .poly ul.merit li p.blue {
        font-size: 5vw;
    }
    section.secret .poly ul.merit li dl {
        font-size: 3.8vw;
    }
    section.secret .poly picture.arrow {
        zoom: 0.6;
    } 
    section.secret .poly .cyber picture.cyberlogo {
        zoom: 0.6;
    }
    section.secret .poly .cyber {
        background: url(../images/merit_bg.png) repeat-x top center;
        background-size: contain;
        padding: 3em 1.5em 1.5em 1.5em;
        margin: 0 auto 2em auto;
    }
    section.secret .poly .cyber .inner ul.text li {
        font-size: 4vw;
    }
    section.secret .poly .cyber .inner {
        display: block;
    } 
    section.secret .poly .cyber .inner ul.text {
        margin-right: 1.5em;
        margin-bottom: 1em;
    }
    section.secret .poly .cyber .inner picture {
        margin-right: 0;
    }   
    section.secret ul.tachi {
        display: block;
        margin: 0 auto 2em auto;
    }
    section.secret ul.tachi p {
        font-size: 4vw;
    } 
    section.secret p.lead,
    section.fv-btm p.lead,
    section.linkbanner p.lead {
        font-size: 4vw;
    }
    
    /* section fv-btm */
    
    section.fv-btm p.lead {
        margin: 0 auto 3em auto;
        display: table;
        padding: 0 5%;
    }
    section.fv-btm .fvbtm-wrap {
        background: none;
        min-height: initial;
    }
    section.fv-btm .fvbtm-wrap picture {
        position: relative;
    } 
    
    /* section linkbanner */
    
    section.linkbanner p.lead {
        padding: 0 5%;
        margin-bottom: 0;
    }
    section.linkbanner ul {
        width: 90%;
        margin: 0 auto;
        display: block;
    }   
    section.linkbanner ul p.black {
        font-size: 5vw;
        padding: 0.5em 1em;
    }
    section.linkbanner li picture {
        margin-bottom: 1.5em;
    }    
    section.linkbanner li .link a {
        font-size: 4vw;
    }
    section.linkbanner li:first-child {
        margin-bottom: 2em;
    }
    section.linkbanner li .link a:after {
        right: 1em;
    }    

    /* section common */
    
    section {
        padding: 0 0 4em 0;
    }
    section h1,
    section.newproduct .detail dl dt:before,
    section.newproduct .detail dl dt:after {
        height: 0 !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
    }
    section.history .lead dl dd,
    section.history ul.box li p.sentence,
    section.newproduct dl dd,
    section.tech p {
        line-height: 1.8;
        font-size: 3.8vw;
    }
    .blacktitle {
        margin: 0 auto 1em auto;
    }
    .blacktitle p {
        font-size: 4vw;
    }
    .movie p {
        padding: 0 0 2em 0;
        font-size: 4vw;
    }
    .overview {
        margin-bottom: 0;
        flex-flow: column;
    }
    .overview picture {
        order: 2;
        zoom: 0.6;
        margin: 0 auto 0;
        display: table;
    }
    .overview .text p {
        font-size: 3.5vw;
        line-height: 1.5;
    }
    .overview .text {
        order: 1;
        padding-left: 0;
    }
    .overview:after {
        height: 3em;
    }
    .point {
        padding: 1em 1em;
    }
    .point dl {
        padding: 0 5.5em 0 0;
    }
    .point dl dt {
        font-size: 4vw;
        display: block;
    }
    .point dl dt:before {
        zoom: 0.5;
        margin: 0 auto 0.5em auto;
    }
    .point dl dd {
        font-size: 3.5vw;
    }
    .point picture {
        zoom: 0.5;
        right: 0;
    }
    
    /* section bottom other banner */
    
    section.bottomotherbanner {
        max-width: 90%;
    }
    section.bottomotherbanner ul {
        display: block;
    }
    section.bottomotherbanner li {
        width: 100%;
    }
    section.bottomotherbanner li:first-child {
        margin-bottom: 1em;
    }
    section.bottomotherbanner p.catch {
        font-size: 5vw;
        padding: 0 1em 0.5em 1em;
    }
    section.bottomotherbanner li p {
        font-size: 4vw;
    }
    section.bottomotherbanner p.catch:after {
        border-width: 10px 20px 0 20px;
        bottom: -10px;
    }

}