@charset "UTF-8";
/* CSS Document */

/*********************************************************************
*
* Copyright (c) CUBIC DESIGN INC.
*
* Url : http://www.cubicdesign.co.jp
*
* Built       : 2017/06/23
* Last update : 2017/06/23
* Made by     : Murata Hiroyuki
* Updated by  : Murata Hiroyuki
*
**********************************************************************/


/*************************************************************************************************************************
* 画面幅：680px 以下
*************************************************************************************************************************/

/* training
**********************************************************************/
.training{ padding: 0 16px;}
.training h3{ background: url(../img/training_icon.svg) no-repeat center 0 / 36px 36px; margin: 30px 0 0; padding: 42px 0 30px; font: 300 20px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; text-align: center;}
.training h3 span{ display: block; margin: 0 0 8px; font: 400 12px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}
.training h4{ font: 300 19px/1.5 "heisei-kaku-gothic-std",sans-serif; color: #333; text-align: center;}
.training > h4::before{ display: block; content: ""; margin: 0 auto 5px auto; width: 40px; height: 26px; background: url("../img/myanmar.svg") no-repeat top left/cover;}
.training h5{ margin: 10px 0 0 0; font: 300 15px/1.5 "heisei-kaku-gothic-std",sans-serif; color: #dd0716; text-align: center;}
.training p{ margin: 30px 0 0 0; font-size: 15px; line-height: 1.8;}
.training .figure{ margin: 20px -16px 0 -16px; padding: 16px; background: #E4F1F3;}
.training .figure .bg{ display: none;}
.training ul.img{ display: flex; flex-wrap: wrap; margin: 0 -16px;}
.training ul.img li{ width: 50%;}
.training .imgcaption{ font: 300 11px/1.5 "heisei-kaku-gothic-std",sans-serif; color: #333; padding: 5px 0 0 0;}
@media print, screen and (min-width:681px){
  .training{ padding: 0 0 20px 0;}
  .training h3{ background-size: 40px 40px; margin-top: 40px; padding: 44px 0 40px; font-size: 23px;}
  .training h3 span{ font-size: 15px;}
  .training h4{ font-size: 27px;}
  .training h4 br{ display: none;}
  .training > h4::before{ width: 50px; height: 33px;}
  .training h5{ font-size: 17px;}
  .training p{ width: 840px; margin: 40px auto 0 auto;}
  .training .figure{ margin: 80px 0 0 0; padding: 10px; position: relative;}
  .training .figure img{ display: block; width: 633px; height: auto; margin: -60px auto 30px auto; position: relative; z-index: 2;}
  .training .figure .bg{ display: block; width: 840px; height: 450px; background: rgba(255,255,255,.5); border-radius: 225px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1;}
  .training ul.img{ margin: 0;}
  .training ul.img li{ width: 16.6%;}
  .training ul.img li:last-child{ width: 17%;}
  .training .imgcaption{ padding: 5px 20px 0 0; text-align: right;}
}


/* magazine
**********************************************************************/
.magazine{ padding: 0 16px 20px;}
.magazine h3{ background: url(../img/magazine_icon.svg) no-repeat center 0 / 36px 36px; margin: 30px 0 0; padding: 42px 0 30px; font: 300 20px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; text-align: center;}
.magazine h3 span{ display: block; margin: 0 0 8px; font: 400 12px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}
.magazine .wrap{  padding: 16px; border: 2px solid #DD0716;}
.magazine .wrap h4{ font: 300 16px/1.5 "heisei-kaku-gothic-std",sans-serif; color: #333; text-align: center;}
.magazine .wrap h4 br{ display: none;}
.magazine .wrap p{ margin: 10px 0 0; font-size: 15px; line-height: 1.8;}
.magazine .wrap img{ display: block; width: 70%; height: auto; margin: 10px auto 0 auto;}
@media print, screen and (min-width:681px){
  .magazine{ width: 840px; margin: 0 auto; padding: 0 0 40px 0;}
  .magazine h3{ background: url(../img/training_icon.svg) no-repeat center 0 / 36px 36px; margin: 0; padding: 42px 0 30px; font: 300 20px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; text-align: center;}
  .magazine h3 span{ display: block; margin: 0 0 8px; font: 400 12px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}
  .magazine .wrap{ padding: 40px; border: 3px solid #DD0716; position: relative;}
  .magazine .wrap::before{ display: block; content: ""; width: 106px; height: 33px; background: url(../img/magazine_topics.svg) no-repeat center center/cover; position: absolute; top: 0; right: 0;}
  .magazine .wrap h4{ font-size: 20px; text-align: left;}
  .magazine .wrap h4 br{ display: block;}
  .magazine .wrap p{ width: 510px; margin: 20px 0 0;}
  .magazine .wrap img{ width: 238px; height: auto; position: absolute; top: 72px; right: 25px;}
}


/* case study
**********************************************************************/
.case_wrap{ margin: 40px 0 60px -16px; position: relative;}
.case_wrap::before{ display: block; content: ""; width: calc(100vw*0.7); height: calc(100% - 20px); position: absolute; background: #e8eaf1; top: 50px; left: calc(100vw*0.3); z-index: 1;}
.case_wrap-img{ width: calc(100vw*0.9); height: 250px; background: url("../img/casestudy_index.jpg") no-repeat left top/cover; position: relative; z-index: 2;}
.case_wrap-text{ width: calc(100vw*0.9); padding: 30px 8%; background: #dd0716; position: relative; top: -60px; left: calc(100vw*0.1); z-index: 3;}
.case_wrap-text-title{ margin: 0 0 8px 0; font: 300 18px/1.5 "heisei-kaku-gothic-std",sans-serif !important; color: #fff !important; text-align: left !important;}
.case_wrap-text-title-en{ font: 400 12px/1 "din-2014",sans-serif; color: #fff; letter-spacing: 1px;}
.case_wrap-text p{ width: auto !important; margin: 0 0 15px 0; font: 300 15px/1.8 "heisei-kaku-gothic-std",sans-serif; color: #fff;}
.case_wrap-text p::before{ display: block; content: ""; width: 40px; height: 1px; margin: 13px 0 15px 0; background: #fff;}
.case_wrap-text-btn{ display: block; height: 40px; padding: 11px 0 0 0; font: 300 15px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center; letter-spacing: 2px; border: 1px solid #fff; transition: all .2s;}
.case_wrap-faqbtn{ display: block; height: 40px; margin: -25px calc((100vw*0.1) - 16px) 30px calc(100vw*0.1); padding: 11px 0 0 0; font: 500 14px/1 "heisei-kaku-gothic-std",sans-serif; color: #dd0716; text-align: center; letter-spacing: 1px; border: 3px solid #dd0716; border-radius: 20px; position: relative; z-index: 3; transition: all .2s;}
.case_wrap-faqbtn span{ display: none;}
@media print, screen and (min-width:681px){
  .case_wrap{ height: 790px !important; margin: 70px 0 0 0;}
  .case_wrap::before{ height: 490px; top: 150px;}
  .case_wrap-img{ width: calc(100vw*0.7); min-width: 560px; height: 500px; position: absolute; top: 0; left: 0;}
  .case_wrap-text-title{ font-size: 23px !important;}
  .case_wrap-text{ width: 480px; padding: 50px 70px; position: absolute; top: 100px; left: auto; right: 50px;}
  .case_wrap-text p{ line-height: 2;}
  .case_wrap-text-btn:hover{ background: #fff; font-weight: 500; color: #dd0716;}
  .case_wrap-faqbtn{ width: 490px; height: 50px; margin: 0; padding: 13px 0 0 0; font-size: 17px; border-radius: 25px; position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);}
  .case_wrap-faqbtn:hover{ background: #dd0716; font-weight: 500; color: #fff;}
  .case_wrap-faqbtn span{ display: inline;}
}


/* voice
**********************************************************************/
.voice_wrap{ padding: 20px 0 0 0;}

@media print, screen and (min-width:681px){
  .voice_wrap{ width: 980px; margin: -60px auto 0 auto; padding: 50px 0 0 0; background: rgba(255,255,255,.9); box-shadow: 0px 0px 12px -2px rgba(0,0,0,.3);}
}

.voice__list{ padding: 0 0 20px 0;}
.voice__box{ margin: 0 0 20px 0;}
.voice__title{ margin: 0 0 30px 0; font: 300 18px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; text-align: center;}
.voice__title span{ display: block; margin: 0 0 8px; font: 400 12px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}
.voice__box-title{ display: flex; align-items: center; margin: 0 0 0 16px; font: 300 20px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; position: relative; z-index: 2;}
.voice__box-right .voice__box-title{ flex-direction: row-reverse; margin: 0 16px 0 0;}
.voice01 .voice__box-title span{ color: #d56809;}
.voice02 .voice__box-title span{ color: #638d44;}
.voice03 .voice__box-title span{ color: #9a304b;}
.voice__box-right .voice__box-title span{ order: 1;}
.voice__box-title::before{ display: inline-block; content: ""; width: 80px; height: 63px; margin: 15px 10px 0 0;}
.voice__box-right .voice__box-title::before{ margin: 15px 0 0 10px;}
.voice01 .voice__box-title::before{ background: url(../img/movie01_num.svg) no-repeat left top/cover;}
.voice02 .voice__box-title::before{ background: url(../img/movie02_num.svg) no-repeat left top/cover;}
.voice03 .voice__box-title::before{ background: url(../img/movie03_num.svg) no-repeat left top/cover;}
.voice__box-movie{ display: block; width: calc(100vw*0.9); margin: -10px 0 0 0; position: relative; z-index: 1;}
.voice__box-right .voice__box-movie{ margin: -10px 0 0 auto;}
.voice__box-movie img{ position: relative; z-index: 2;}
.voice__box-movie::before{ display: block; content: ""; width: 100vw; height: calc(100vw*0.2); position: absolute; bottom: -5px; left: 0; z-index: 1;}
.voice01 .voice__box-movie::before{ background: url("../img/movie01_bg.jpg") no-repeat left top/cover;}
.voice02 .voice__box-movie::before{ background: url("../img/movie02_bg.jpg") no-repeat left top/cover;}
.voice03 .voice__box-movie::before{ background: url("../img/movie03_bg.jpg") no-repeat left top/cover;}
.voice__box-right .voice__box-movie::before{ left: calc(100vw*-0.1);}
.voice__box-movie::after{ display: block; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,.3) url("../img/movie_start.svg") no-repeat center center/40px 40px; position: absolute; top: 0; left: 0; z-index: 2;}
.voice__box-text{ width: calc(100vw*0.9); margin: -40px 0 0 auto; background: #FFF; padding: 25px; box-shadow: 0px 0px 12px -2px rgba(0,0,0,.3); position: relative; z-index: 2;}
.voice__box-right .voice__box-text{ margin: -40px 0 0 0;}
.voice01 .voice__box-text{ border-top: 3px solid #d56809;}
.voice02 .voice__box-text{ border-top: 3px solid #638d44;}
.voice03 .voice__box-text{ border-top: 3px solid #9a304b;}
.voice__box-text-copy{ margin: 0 0 12px 0; padding: 0 0 12px 0; font: 300 14px/1.6 "heisei-kaku-gothic-std",sans-serif; color: #333;}
.voice01 .voice__box-text-copy{ border-bottom: 1px dotted #d56809;}
.voice02 .voice__box-text-copy{ border-bottom: 1px dotted #638d44;}
.voice03 .voice__box-text-copy{ border-bottom: 1px dotted #9a304b;}
.voice__box-text-name{ display: flex; align-items: center; font: 300 14px/1.6 "heisei-kaku-gothic-std",sans-serif; color: #333;}
.voice__box-text-name::before{ display: inline-block; content: ""; width: 26px; height: 17px; margin: 0 5px 0 0; background: url("../img/myanmar.svg") no-repeat left top/cover;}
.voice__box-text-name span{ padding: 3px 0 0 3px; font-size: 12px;}
.voice__box-text-btn{ display: block; height: 40px; margin: 12px 0 0 0; padding: 11px 0 0 0; font: 300 14px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; text-align: center;}
.voice01 .voice__box-text-btn{ background: #d56809;}
.voice02 .voice__box-text-btn{ background: #638d44;}
.voice03 .voice__box-text-btn{ background: #9a304b;}

@media print, screen and (min-width:371px){
  .voice__box-text{ padding: 25px 30px;}
  .voice__box-text-copy{ font-size: 16px;}
}

@media print, screen and (min-width:681px){
  .voice__title{ margin: 0 0 60px 0; font-size: 23px;}
  .voice__title span{ font-size: 15px;}
  .voice__box{ margin: 0 0 60px 0; position: relative;}
  .voice__box-title{ flex-direction: row-reverse; margin: 0; font-size: 18px; position: absolute; top: 35px; right: 60px;}
  .voice__box-title::before{ width: 120px; height: 94px; margin: 0 0 0 15px;}
  .voice__box-title span{ order: 1;}
  .voice__box-right .voice__box-title{ flex-direction: row; position: absolute; top: 35px; left: 60px; right: auto;}
  .voice__box-right .voice__box-title::before{ margin: 0 15px 0 0;}
  .voice__box-right .voice__box-title span{ order: 0;}
  .voice__box-movie{ width: 500px; margin: 0 0 0 50px;}
  .voice__box-right .voice__box-movie{ margin: 0 0 0 430px;}
  .voice__box-movie::before{ width: 980px; height: 206px; bottom: -75px; left: -50px;}
  .voice__box-right .voice__box-movie::before{ left: auto; right: -50px;}
  .voice__box-text{ width: 460px; margin: -180px 0 0 470px; padding: 45px 50px;}
  .voice__box-right .voice__box-text{ margin: -180px 0 0 50px;}
  .voice__box-text-copy{ margin: 0 0 15px 0; font-size: 20px; line-height: 1.8; letter-spacing: 1px;}
  .voice__box-text-name{ font-size: 16px;}
  .voice__box-text-btn{ margin: 25px 0 0 0;}
  .voice__box-text-btn{ font-size: 15px; letter-spacing: 2px;}
}

.manager__wrap{ padding: 25px 16px 10px 16px; background: url("../img/manager_bg.jpg") no-repeat center top/cover}
.manager__wrap-title{ width: 100%; margin: 0 auto 20px auto; font: 300 18px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; letter-spacing: 3px; text-align: center;}
.manager__wrap-title span{ display: block; margin: 10px 0 0 0; padding: 10px 0 0 0; font: 400 12px/1 "din-2014",sans-serif; color: #fff; letter-spacing: 1px; border-top: 1px solid #fff;}
.manager__box-movie{ display: block; margin: 0 0 8px 0; position: relative; box-shadow: 0px 0px 12px -2px rgba(0,0,0,.3);}
.manager__box-movie::after{ display: block; content: ""; width: 100%; height: 100%; background: rgba(0,0,0,.3) url("../img/movie_start.svg") no-repeat center center/40px 40px; position: absolute; top: 0; left: 0; z-index: 2;}
.manager__box-title{ display: flex; align-items: center; margin: 0 0 20px 1px; padding: 0 0 0 5px; font: 300 16px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; border-left: 2px solid #fff;}
.manager__box-title span{ margin: 0 5px 0 0; font-size: 12px;}
.manager__box-title span:last-of-type{ margin: 0 0 0 5px;}

.manager__success-box{ margin: 0 0 15px 0; padding: 15px; background: rgba(0,0,0,.2); border: 1px solid #fff;}
.manager__success-title{ margin: 0 0 8px 0; font: 300 15px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff;}
.manager__success-box p{ font: 300 13px/1.6 "heisei-kaku-gothic-std",sans-serif; color: #fff;}

@media print, screen and (min-width:681px){
  .manager__wrap{ padding: 40px 0 30px 0;}
  .manager__wrap-title{ width: 240px; margin: 0 auto 40px auto; font-size: 20px;}
  .manager__wrap-title span{ letter-spacing: 2px;}
  .manager__list{ display: flex; width: 880px; margin: 0 auto;}
  .manager__box{ margin: 0 24px 0 0;}
  .manager__box:last-of-type{ margin: 0;}
  .manager__box-movie{ margin: 0 0 10px 0;}
  .manager__box-title{ padding: 0 0 0 10px;}
  
  .manager__success{ display: flex; width: 880px; margin: 0 auto 40px auto;}
  .manager__success-box{ width: 280px; margin: 0 20px 0 0;}
  .manager__success-box:last-child{ margin: 0;}
  .manager__success-title{ font-size: 16px;}
  .manager__success-box p{ line-height: 1.8;}
}

.company__wrap{ padding: 16px 16px 0 16px;}
.company__img{ width: 100%; height: 200px; background: url("../img/company_img.jpg") no-repeat top right/cover;}
.company__box{ width: calc(100vw - 32px); background: rgba(221,7,22,.9); margin: -20px 0 0 -16px; padding: 25px 30px;}
.company__name{ margin: 0 0 15px 0; font: 300 16px/1 "heisei-kaku-gothic-std",sans-serif; color: #fff; letter-spacing: 1px;}
.company__name span{ display: block; margin: 10px 0 0 0; font-size: 12px; letter-spacing: 0;}
.company__name::after{ display: block; content: ""; width: 50px; height: 1px; margin: 15px 0 0 0; background: #fff;}
.company__prof span{ margin: 0 0 10px 0; font: 400 12px/1 "din-2014",sans-serif; color: #fff; letter-spacing: 1px;}
.company__prof{ font: 300 13px/1.8 "heisei-kaku-gothic-std",sans-serif; color: #fff;}

@media print, screen and (min-width:681px){
  .company__wrap{ padding: 40px 40px 0 40px;}
  .company__img{ height: 400px;}
  .company__box{ width: 368px; margin: -237px 0 0 -40px; padding: 50px;}
  .company__name{ font-size: 18px;}
  .company__name span{ font-size: 13px;}
  .company__name::after{ margin: 20px 0 0 0;}
  .company__prof span{ margin: 0 0 15px 0; font-size: 13px;}
  .company__prof{ font-size: 14px;}
}

.faq__wrap{ padding: 20px 16px; background: #e6e6e6;}
.faq__title{ background: url(../img/faq_icon.svg) no-repeat center 0 / 36px 36px; margin: 0; padding: 42px 0 30px; font: 300 20px/1 "heisei-kaku-gothic-std",sans-serif; letter-spacing: 3px; text-align: center;}
.faq__title span{ display: block; margin: 0 0 8px; font: 400 12px/1 "din-2014",sans-serif; color: #dd0716; letter-spacing: 1px;}
.faq__list{ width: 100%; margin: 0 0 15px 0;}
.faq__box{ margin: 0 0 5px 0; background: #ffffff; border-radius: 5px;}
.faq__box-title{ padding: 12px 40px 11px 40px; font: 700 13px/1.3 "heisei-kaku-gothic-std"; position: relative; overflow: hidden;}
.faq__box-title span{ display: block; font: 400 15px/1 "din-2014",sans-serif; color: #dd0716; position: absolute; left: 15px; top: 12px;}
.faq__box-title::before,
.faq__box-title::after{ content: ""; width: 12px; height: 2px; background: #dd0716; transform: rotate(-90deg); position: absolute; top: 50%; right: 15px; transform: rotateY(-50%); transition: all .2s;}
.faq__box-title::after{ transform: rotate(0);}
.faq__box-title.open::before{ transform: rotate(0);}
.faq__box-answer{ height: 0; padding: 0 40px; font-size: 13px; line-height: 1.5; border-top: 0px solid #dce0e0; position: relative; overflow: hidden; transition: all .2s;}
.faq__box-answer::after{ content: "A."; width: 10px; height: 10px; font: 400 15px/1 "din-2014",sans-serif; color: #dd0716; position: absolute; top: 12px; left: 22px; opacity: 0; transition: all .2s;}
.faq__box-answer.open{ height: auto; padding: 10px 40px; border-top: 1px solid #dce0e0;}
.faq__box-answer.open::after{ opacity: 1;}

.faq__box-table{ width: 100%; margin: 20px 0 0 0; border-right: #3EB1C6 solid 1px; border-collapse: collapse;}
.faq__box-table thead th{ padding: 10px; background: #3EB1C6; font-size: 13px; color: #FFF; text-align: center; border-right: #FFF solid 1px; border-bottom: #FFF solid 1px;}
.faq__box-table thead th:last-child{	border-right: #3EB1C6 solid 1px;}
.faq__box-table tbody th{ padding: 10px; background: #3EB1C6; font-size: 13px; color: #FFF; border-bottom: #FFF solid 1px; vertical-align: center;}
.faq__box-table tbody tr:last-child th{	border-bottom: #3EB1C6 solid 1px;}
.faq__box-table tbody td{ padding: 10px; background: #FFF; font-size: 13px; text-align: center; border-left: #3EB1C6 solid 1px; border-bottom: #3EB1C6 solid 1px; vertical-align: center;}
@media print, screen and (max-width: 681px){
  .faq__box-table thead{ display: none;}
  .faq__box-table tbody th{ display:block;}
  .faq__box-table tbody td{ display:block;}
  .faq__box-table tbody td::before{ content: attr(label); float: left; clear: both; font-weight: bold;}
  .faq__box-table tbody td p{ padding-left: 6em;}
}
  
@media print, screen and (min-width:681px){
  .faq__wrap{ padding: 50px 0 30px 0;}
  .faq__title{ padding: 40px 0 40px; background-size: 40px 40px; font-size: 23px;}
  .faq__list{ width: 880px; margin: 0 auto 30px auto; padding: 0;}
  .faq__box{ margin: 0 0 20px 0;}
  .faq__box-title{ padding: 17px 50px 15px 70px; font-size: 16px;}
  .faq__box-title span{ margin: 0; font-size: 22px; left: 30px; top: 15px;}
  .faq__box-title::before,
  .faq__box-title::after{ width: 16px; right: 20px;}
  .faq__box-answer{ padding: 0 50px 0 70px; font-size: 14px; line-height: 1.6;}
  .faq__box-answer.open{ padding: 20px 50px 20px 70px;}
  .faq__box-answer::after{ font-size: 22px; top: 0; left: 43px;}
  .faq__box-answer.open::after{ top: 20px;}
}

.contact__wrap{ padding: 20px 16px 0 16px;}
.contact__wrap p{ margin: 0 0 10px 0; font: 300 14px/1.5 "heisei-kaku-gothic-std",sans-serif; color: #333;}
.contact__btn{ display: block; height: 40px; margin: 0 auto; padding: 10px 0 0 0; font: 500 14px/1 "heisei-kaku-gothic-std",sans-serif; color: #dd0716; text-align: center; border: 3px solid #dd0716; border-radius: 20px; position: relative; z-index: 3; transition: all .2s;}

@media print, screen and (min-width:681px){
  .contact__wrap{ padding: 40px 0;}
  .contact__wrap p{ margin: 0 0 20px 0; text-align: center;}
  .contact__btn{ width: 450px; height: 50px; padding: 14px 0 0 0; font-size: 16px; border-radius: 25px;}
}