@charset "UTF-8";
/* --------------------------- responsive
-----------------------------*/
@media screen and (max-width: 768px) {
 body {
  font-size: 1.4rem;
  min-width: inherit;
 }
 #wrapper {
  min-width: inherit;
  width: 100%;
 }
 /* ------ header ---------*/
  .header {
    height: 60px;
  }
  .header-menu-inner {
    position: absolute;
    width: 100%;
  }
  .header-logo {
    position: absolute;
    top: 16px;
    left: 20px;
    width: 60%;
    max-width: 180px;
  }
  .header-menu-inner.open {}
  #header-menu-bg {
    top: 65px;
  }
  #nav-toggle {
    display: block;
    position: absolute;
    right: 20px;
    top: 10px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 101;
    padding: 0 10px;
  }
  #nav-toggle div {
    position: relative;
  }
  #nav-toggle::after {
    bottom: -3px;
    font-size: 0.6rem;
  }
  #nav-toggle.on::after {
    bottom: -3px;
  }
  #nav-toggle span {
    display: block;
    position: absolute;
    height: 1px;
    width: 100%;
    /*	background: #fff;*/
    left: 0;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
  }
  #nav-toggle span:nth-child(1) {
    top: 14px;
  }
  #nav-toggle span:nth-child(2) {
    top: 20px;
  }
  #nav-toggle span:nth-child(3) {
    top: 26px;
  }
  /* #nav-toggle 切り替えアニメーション */
  #nav-toggle.on span:nth-child(1) {
    top: 20px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  #nav-toggle.on span:nth-child(2) {
    width: 0;
    left: 50%;
  }
  #nav-toggle.on span:nth-child(3) {
    top: 20px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
  }
  /* === g-nav ======================== */
  .g-nav-wrapper {
    top: 0;/*65px;*/
    padding: 0 20px;
  }
  .g-nav {
    margin: 20px 0 30px;
  }
  .g-nav li {
    font-size: 1.6rem;
  }
  .g-nav li a {
    padding: 1em 2em;
  }
  .g-nav li a:hover {}

 /*------------- 	footer ---------------*/
 .footer {
   clear: both;
   background-color: #282828;
   color: #fff
  }
.copyright {
   padding: 30px 20px;
   text-align: center;
   font-size: 1.2rem;
  }
 /* ========== 	 parts       ======================= */
 .container {
  position: relative;
 }
 /*section*/
 .section {
 /* padding: 40px 0;*/
 }
 .col-inner {
  /* width: 92%;*/
  max-width: inherit;
  padding: 0 4%;
 }
 /* === title ======================== */
 /* セクションタイトル === */
 .section-title {
   margin: 45px auto 40px;
  font-size: 1.8rem; /* 3.4rem;*/
 }
 .section-title .en {
  margin-bottom: 10px;
  font-size: 4.0rem;
 }
.index-title{
  position: relative;
  margin-bottom: 25px;
  height: 80px;
	line-height: 1.25;
	font-size: 2.4rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
	align-items: center;
	justify-content: center;
}
  .index-title::after{
  bottom: -24px;
  width: 80px;
  height: 24px;
  background: url(../../common/images/bg_index.svg) no-repeat;
  background-size: cover;
}

 /* === top-area ======================== */
 .section-top {
  top: 0; /*50px;*/
  max-height: 667px;
  background: url("../../common/images/bg_mv.jpg") no-repeat center 0;
  background-size: cover;
  //padding-bottom: 300px;
 }
.section-top::before {
  border-width: 0 0 100px 100vw;
 }
.section-top::after {
  border-width: 100px 0 0 100vw;
 }
.top-area {
  position: relative;
  overflow: hidden;
  height: 667px;
 }
 .top-title-area {
  width: 74.6%;
  padding-bottom: 205px;
 }
.top-area-image {
  max-width: 250px;
  }
.top-title-lead {
  margin-top: 10px;
  font-size: 1.2rem; /*2.6rem;*/
}
.top-text-lead {
  margin: 0 auto 30px;
  font-size: 1.8rem; /*2.6rem;*/
}
.top-title-lead span::before {
  left:-35px;
  width: 30px;
}
.top-title-lead span::after {
  right:-30px;
  width: 30px;
  }
.top-btn-area{
  position: relative;
  margin: 25px auto;
  max-width: 320px;
}
.m-btn {
  position: relative;
  display: block;
  padding: 17px 20px;
  width: 100%;
  font-size: 1.5rem;
 }
/*== top-product-wrap ====*/
.top-product-wrap{
  height: 205px;
}
.top-product a {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  justify-content: inherit;
  height: 205px;
}
.top-product-image{
  margin: -40px auto 0;
  width: 134px;
}
.top-product-title{
  margin-top: -40px;
  margin-left: inherit;
  font-size: 5.1rem;
}
.top-product-title.pr2{
  font-size: 2.6rem;
}

.top-product-lead{
  margin-bottom: 10px;
font-size: 0.7rem;
  line-height: 1.24;
  }
.top-product-title.pr2 .top-product-lead{
  margin-bottom: 0;
}

/* === modaal ======================== */
.modaal-container{
	margin-top: 30px;
	max-width: inherit;
}
.modaal-content-container {
  padding: 0;
}
.modaal-inner-wrapper {
	padding: 20px 4%;
}
.modaal-overlay {
  opacity: 0.7 !important; }

.modaal-close {
  position: absolute;
  right: -10px;
  top: -50px; }

.modaal-close:focus,
.modaal-close:hover {
  background-color: transparent;
  border-radius: 0; }

.modaal-close:focus:before,
.modaal-close:focus:after,
.modaal-close:hover:before,
.modaal-close:hover:after {
  background: #fff;
  border-radius: 0; }

.modal-wrap {
  max-width: inherit;
  display: none;
}
.tmh-area{
	padding: 30px 15px;
}
.tmh-title {
  display: block;
  font-size: 2.4rem;
}
.tmh-text {
	margin-top: 10px;
	line-height: 2;
  }
.tmh-lead{
	position: relative;
	margin-top: 20px;
	margin-bottom: 25px;
	padding: 10px 20px 15px;
	font-size: 1.0rem;
}
.tmh-lead span{
	display: block;
	font-size: 2.0rem;
}
.tmh-lead::after{
	position: absolute;
	content:"";
	bottom: -25px;
	left:50%;
	transform: translateX(-50%);
	width:14px;
	height: 40px;
	background: url("../images/ico_arrow_b.svg") no-repeat;
	background-size: contain ;
}
.tmh-cont{
	margin-bottom: 15px;
	padding: 10px 15px 15px;
	border: solid 2px #1d3160;
}
.tmh-cont-title{
	font-size: 2.0rem;
}
.tmh-cont-link span{
	position: relative;
}
.tmh-cont-link span::after{
}
.tmh-cont-image{
  margin-top: 10px;
}


/* === 1 about-area ======================== */
.about-area {
 padding-bottom: 50px;
}
.about-text{
  margin-bottom: 40px;
}
.about-text p{
  line-height: 2;
  margin-bottom: 2em;
}
.about-text .txt-r{
  font-size: 1.2rem;
  line-height: 1.75;
}
.name{
  margin-left: 5px;
  font-size: 1.6rem;
}
/* === 2 product-head-area ======================== */

.product-head-wrap{
  position: relative;
  top:0;
  height: 330px;
  width:100vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.product-head {
  width: 100%;
}
.product-head {
}
.product-head.pr1{
  background: url("../../common/images/bg_btn_01.jpg") no-repeat 0 center;
  background-size: cover;
}
.product-head.pr2 {
  background-color: #458cc8;
  background: url("../../common/images/bg_btn_02.jpg") no-repeat center center;
  background-size: cover;
}
.product-head a {
  position: relative;
  display: block;
  height: 165px;
  overflow: hidden;
}
.product-head-image{
  margin: 15px auto 0;
  max-width: 79px;
}
.product-head-link{
  position: relative;
  top: -25px;
  text-align: center;
  font-size: 2.4rem;
  color: #fff;
}
.product-head-link::after{
  position: absolute;
  content:"";
  bottom: -10px;
  left:50%;
  transform: translateX(-50%);
  width: 18px;
  height: 12px;
  background:url("../../common/images/ico_arrow_wh.svg") no-repeat;
  background-size: cover;
}

 /* === 3 product-mv-area pr1 ======================== */
.product-mv {
  position: relative;
  background-color: #000;
  background:url("../../common/images/bg_product_mv_01.jpg") no-repeat center center;
  background-size: cover;
  color:#fff;
}
.product-mv-wrap{
  padding: 30px 4% 60px;
  height: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}
.product-mv-image{
  margin: 0 auto;
  max-width: 250px;
}
.product-mv-texts{
  margin: -60px auto 0;
  width: 100%;
  max-width:560px;
  font-size: 1.2rem;
  line-height: 1.75;
}
.product-mv-lead{
}
.product-mv-title{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
}
.product-mv-logo{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  align-items: center;
  margin-right: 15px;
  font-size:7.0rem;
}
.product-mv-text{
  font-size: 1.4rem;
}
.txt-caption {
  margin-top: 20px;
  text-align: left;
  font-size: 1.3rem;
  line-height: 1.5;
}

/* === 3-1 case-area ======================== */
.case-area {
}
.case-item-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 10px 40px;
  height: 100%;
}
.case-item{
  width: 100%;
}
.case-item-image {
 margin: 30px auto 20px;
 width: 166px;
 height: 166px;
 border-radius: 50%;
 overflow: hidden;
}
.case-item-lead {
 margin-bottom: 45px;
 font-size: 1.5rem;
}
.case-item-lead::after{
 bottom: -32px;
}
.case-item-text {
 margin-top: auto;
 padding: 20px 20px;
 min-height: inherit;
 font-size: 1.3rem;
 line-height: 1.75;
}

/* === 3-2 faq-area ======================== */
.faq-area {
  margin: 46px auto;
}
.faq-area a{
}
.faq-area a:hover{
  }
.faq-item {
  margin: 30px 0 0;
  text-align: left;
}
.faq-item-title {
  padding: 10px 10px 10px 50px;
  min-height: 40px;
  font-size: 1.5rem;
}
.faq-item-title:before {
  width: 40px;
  height: 40px;
}
.faq-item-title:after {
  content: "Q";
  top: 10px;
  font-size: 1.2rem;
  left: 15px;
}
.faq-item-text {
  position: relative;
  padding: 20px 0 0 50px;
  text-align: left;
  font-size: 1.4rem;
  line-height: 1.75;
  overflow: hidden;
}
.faq-item-text:before {
  width: 40px;
  height: 40px;
  top: 20px;
  left: 0;
}
.faq-item-text:after {
  content: "A";
  position: absolute;
  top:28px;
  left: 16px;
  font-size: 1.2rem;
  font-weight: 700;
  color: #a49453;
}

/* === 3-3 note-area ======================== */
.note-area{
  padding: 40px 0 80px;
}
.note-item{
  padding: 25px 20px;
}
.note-item-title{
  font-size: 1.6rem;
}
.note-item-list{
  font-size: 1.3rem;
}
.note-item-list li{
}
.link-item-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-top: 10px;
  padding-bottom: 0;/*20px;*/
  height: 100%;
}
.link-item{
  margin-bottom: 18px;
  padding: 0;
  width: 100%;
}
.link-item a{
  height: 97px;
}
.link-item-image{
  margin-right: 10px;
  width: 115px;
}
.link-item-text{}
.ink-item-btn{
}
.btn-ban{}
.btn-ban-wrap {
 max-width: 640px;
}
.btn-ban {
 padding-right: 40px;
padding-left: 30px;
 height: 72px;
 font-size: 1.5rem;
 border: solid 2px #bf0000;
 border-radius: 36px;
 box-shadow: 2px 10px 16px rgba(0, 0, 0, 0.2);
}
.btn-ban:after {
  right: 20px;
  width: 12px;
  height: 16px;
  background: url("../../common/images/ico_arrow3.svg") no-repeat;
  background-size: cover;
}
.btn-ban-wrap .link-item-image{
    width: 67px;
  }

/* === 4 product-mv-area pr2 ======================== */
.product-mv.pr2 {
  position: relative;
  background-color: #000;
  background:url("../../common/images/bg_product_mv_02.jpg") no-repeat center center;
  background-size: cover;
  color:#fff;
}

.product-mv-title.pr2{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  margin-top: 10px;
  margin-bottom: 30px;
}
.product-mv-title.pr2 .product-mv-logo{
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-right: inherit;
  margin-bottom: 10px;
  font-size: 6.0rem;
  line-height: 0.9;
}
/* === 4-1 scene-area ======================== */
.scene-area {

}
.scene-item-wrap {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding: 0 0 50px;
  height: 100%;
}
.scene-item{
  width: 100%;
}
.scene-item-image {
  margin: 30px auto 20px;
  width: 166px;
  height: 166px;
  border-radius: 50%;
  overflow: hidden;
}
.scene-item-lead {
  font-size: 1.6rem;
  line-height: 1.5;
}

/* === 4-2 lineup-area ======================== */
.lineup-area {
  clear: both;
  overflow: hidden;
}
.lineup-item-wrap {
  margin: 0 -3px 0;
  padding: 0 0 40px;
  height: 100%;
}
.lineup-item{
  margin: 3px 3px;
  width: calc( 100% / 2 - 6px );
  border: solid 1px #e0e0e0;
}
.lineup-item-image {
 margin: 0px auto 20px;
  max-width:252px;
}
.lineup-item-image figcaption {
 margin-top: 5px;
 font-size: 1.4rem;
letter-spacing: 0;
}

/* === 4-3 feature-area ======================== */
.feature-area{
  margin: 40px auto 40px;
}
.feature-list li{
  position: relative;
  margin-bottom: 10px;
  padding: 8px 10px 8px 50px;
  font-size: 1.6rem;
}
.feature-num{
	width: 40px;
	font-size: 1.4rem;
}
.feature-num::before {
    width: 40px;
    height: 40px;
}
/* === 5 company-area ======================== */
.company-area {

}
.company-tbl{
  margin: -10px auto 60px;
  width: 100%;
}
.company-tbl th{
	display: block;
  padding: 16px 18px;
  width:100%;
  border-bottom: none;
}
.company-tbl td{
	display: block;
	width:100%;
  padding: 18px 18px;
  border-bottom: solid 2px #fff;
}
.company-image{
  margin: 20px auto 0;
}
.company-data {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: start;
  -ms-flex-align: start;
  align-items: flex-start;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  width: 100%;
}
.company-data dt{
 width: 100%;
  line-height: 1.75;
}
.company-data dd{
 width: 100%;
 margin-bottom: 10px;
}


/* === 7 contact-area ======================== */

.contact-area {
 position: relative;
 padding: 70px 20px 65px;
 width: 100%;
}
.contact-title {
 margin: 0 auto 25px;
 font-size: 1.8rem;
}
.contact-title .en {
 display: block;
  margin-bottom: 20px;
 font-size: 4.0rem;
}
.btn-contact-wrap {
 position: relative;
 margin: 0 auto;
 text-align: center;
 max-width: 640px;
}
.btn-contact {
 height: 72px;
 line-height: 72px;
 font-size: 1.5rem;
 letter-spacing: 0;
 border-radius: 36px;
 box-shadow: 2px 10px 16px rgba(0, 0, 0, 0.2);
}
.btn-contact:before {
 top: 30px;
 right: 20px;
 bottom: inherit;
 width: 16px;
 height: 12px;
 background: url("../../common/images/ico_arrow_wh.svg") no-repeat;
 background-size: cover;
 transform: rotate(-90deg);
}
.btn-contact:hover{
 color:#458cc8;
}

 /* col-3 */
 .col-3 {
  /* margin: 0 -1%; /* 0 -20px; */
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
 }
 .col-3 li {
  margin: 5px auto 30px;
  width: 100%;
  /* max-width: 360px;*/
 }
 .txt-caption {
  word-wrap: break-word;
  overflow-wrap: break-word;
 }
 .txt-caution {
  font-size: 1.3rem;
 }
 /* pc/sp , br */
 .m-pc-only, .br-pc {
  display: none;
 }
 .m-sp-only, .br-sp {
  display: block;
 }

 .more::before {
  content: "English";
  transition: .2s;
  -erbkit-transition: .2s;
}
.more.on-click::before{
  content: "Close";
}
.txt-hide{
  display: none;
}

}