@charset "utf-8";

/* -------------------------------------------------------
 company top
------------------------------------------------------- */
.companyBG{
 background:url(../image/bg_company.jpg) no-repeat center center;
 background-size: cover;
}
#ttlText h1 .ttlLine{
 width: 7em;
}
#companyNav{
 display: flex;
 flex-direction:row;
 flex-wrap: wrap;
 justify-content:space-between;
}
#companyNav li{
 margin-top:60px;
 width:47%;
 max-width:464px;
}
#companyNav li:nth-child(-n+2){
 margin-top:0px;
}

#companyNav a{
 display: block;
 text-decoration: none;
 color:#fff;
}
.topImg{
 background-color: #fff;
 margin-bottom: 30px;
 overflow: hidden;
}
.topImg img{
 transition: 0.5s;
}
#companyNav a:hover .topImg img{
 transform: scale(1.05);
 opacity: 0.7;
}
#companyNav li p{
 margin-top:30px;
 padding-top:20px;
 position: relative;
 font-size: 15px;
 line-height: 1.6;
}
#companyNav li p:before{
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 30px;
 height: 1px;
 background-color:#fff;
}
@media screen and (max-width: 767px) {/* SP */
  #companyNav{
   flex-direction:column;
  }
  #companyNav li{
   margin-top:60px;
   width:100%;
   max-width:100%;
  }
  #companyNav a:hover .topImg img{
   transform: none;
   opacity: 1;
  }
}


/* -------------------------------------------------------
 outline
------------------------------------------------------- */
#ttlText.outline h1 .ttlLine{
 width: 15.6em;
}
.outlineText{
 display: flex;
 flex-direction:row;
 flex-wrap: wrap;
 justify-content:space-between;
}
.outlineText dl{
 width:100%;
 border-bottom:1px solid rgba(255,255,255,0.5);
 font-size:15px;
 line-height: 1.6;
}
.outlineText dl dt{
 width:260px;
 padding:34px 0;
 float: left;
 font-weight: bold;
}
.outlineText dl dd{
 padding:34px 0;
 margin-left: 260px;
}
.outlineText p{
 width:100%;
 padding:36px 0;
 font-size: 12px;
 line-height: 1.6;
 text-align: right;
 opacity: 0.9;
}
@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  .outlineText{
   flex-direction:column;
  }
  .outlineText dl{
   width:100%;
  }
  .outlineText dl dt{
   width:100%;
   padding:25px 0 10px;
  }
  .outlineText dl dd{
   margin-left: 0px;
   padding:0 0 25px;
  }
}
@media screen and (max-width: 767px) {/* SP */
  .outlineText dl{
   width:100%;
   font-size:14px;
   line-height: 1.4;
  }
  .outlineText dl dt{
   width:100%;
   padding:20px 0 5px;
  }
  .outlineText dl dd{
   padding:0 0 20px;
   margin-left: 0px;
  }
  .outlineText p{
   width:100%;
   padding:20px 0;
   font-size:14px;
   line-height: 1.4;
  }
}



/* -------------------------------------------------------
 our-mission
------------------------------------------------------- */
#ttlText.our-mission h1 .ttlLine{
 width: 10em;
}
.missionCopy{
 font-size:19px;
 line-height: 2;
 letter-spacing: 0;
}
.policyArea{
 min-height:590px;
 margin-top:70px;
 padding:90px 40px 0 90px;
 background:url(../../company/our-mission/image/bg_policy_pc.png) no-repeat 0 0;
 background-size: 100% auto;
}
.trainingArea{
 min-height:590px;
 margin-top:70px;
 padding:90px 10px 0 90px;
 background:url(../../company/our-mission/image/bg_training_pc.png) no-repeat 0 0;
 background-size: 100% auto;
}
.policyArea h2,
.trainingArea h2{
 padding-bottom: 40px;
 margin-bottom:30px;
 position: relative;
}
.policyArea h2:after,
.trainingArea h2:after{
 content: "";
 position: absolute;
 bottom: 0;
 left: 0;
 width: 50px;
 height: 2px;
 background-color:#fff;
}
.ttl-e{
 display: block;
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
 font-size: 32px;
}
.policyArea p{
  font-size:30px;
  line-height:1.8;
}
.trainingArea dl{
 display: flex;
 flex-wrap: nowrap;
 justify-content:start;
 align-items: center;
 margin-bottom:30px;
}
.trainingArea dl dt{
 width:40%;
 max-width:350px;
 overflow: hidden;
}
.trainingArea dl dt p{
 display: inline-block;
 font-size:18px;
 letter-spacing: 0;
 position: relative;
}
.trainingArea dl dt p:after{
 content: "";
 width: 300px;
 height: 1px;
 position: absolute;
 top: 50%;
 right: -320px;
 background-color:rgba(255,255,255,0.7);
}
.trainingArea dl dt p span{
  display: inline-block;
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
  font-size:24px;
  padding-right: 20px;
}
.trainingArea dl dd{
 margin-left:30px;
 line-height: 1.2;
 flex:1;
}
@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  .policyArea,
  .trainingArea{
   min-height:57vw;
   margin-top:70px;
   padding:60px 10px 0 50px;
  }
  .policyArea p{
   font-size:24px;
   line-height:2;
  }
  .trainingArea dl dt p{
   font-size:17px;
  }
  .trainingArea dl dt p span{
   font-size:22px;
   padding-right: 10px;
  }
  .trainingArea dl dd{
   font-size:14px;
  }
}
@media screen and (max-width: 767px) {/* SP */
  .missionCopy{
   font-size:14px;
   line-height: 2;
   letter-spacing: 1;
  }
  .policyArea{
   min-height:106vw;
   margin-top:30px;
   padding:70px 10px 70px 30px;
   background:url(../../company/our-mission/image/bg_policy_sp.png) no-repeat 0 0;
   background-size: 94% auto;
  }
  .trainingArea{
   min-height:161vw;
   margin-top:30px;
   padding:60px 10px 50px 30px;
   background:url(../../company/our-mission/image/bg_training_sp.png) no-repeat 0 0;
   background-size: 94% auto;
  }
  .policyArea h2,
  .trainingArea h2{
   padding-bottom: 20px;
   margin-bottom:20px;
  }
  .policyArea h2:after,
  .trainingArea h2:after{
   width: 25px;
   height: 1px;
  }
  .ttl-e{
   font-size: 20px;
  }
  .policyArea p{
   font-size:17px;
   line-height:1.9;
  }
  .policyArea p span{
   display: inline-block;
  }
  .trainingArea dl{
   display: flex;
   flex-direction: column;
   align-items: start;
   margin-bottom:15px;
  }
  .trainingArea dl dt{
   width:100%;
   max-width:100%;
  }
  .trainingArea dl dt p{
   display: inline-block;
   font-size:16px;
   position: relative;
  }
  .trainingArea dl dt p:after{
   width: 500px;
   right: -520px;
  }
  .trainingArea dl dt p span{
   font-size:20px;
   padding-right: 10px;
  }
  .trainingArea dl dd{
   font-size: 14px;
   line-height: 1.6;
   margin:5px 0 0;
   flex:1;
  }
  .trainingArea dl dd span{
   display: inline-block;
  }
}
@media screen and (min-width: 590px) and (max-width: 767px) {/* SP */
  .policyArea{
   min-height:86vw;
   background:url(../../company/our-mission/image/bg_policy_sp.png) no-repeat 0 0;
   background-size: 70vw auto;
  }
  .trainingArea{
   min-height:126vw;
   background:url(../../company/our-mission/image/bg_training_sp.png) no-repeat 0 0;
   background-size: 70vw auto;
  }
}


/* -------------------------------------------------------
 history
------------------------------------------------------- */
#ttlText.history h1 .ttlLine{
 width: 6.4em;
}
h3.blue{
 display: inline-block;
 padding:10px 15px;
 background-color: #00aeeb;
 font-size:18px;
 line-height: 1;
 color:#fff;
 font-weight: bold;
}
h3.pro{
 margin-top:110px;
}
.yearWrap{
 display: flex;
 border-top:1px solid #00aeeb;
}
h3 + .yearWrap{
 margin-top: 55px;
}
.yearTitle{
 width:170px;
 padding-top:45px;
 font-size: 34px;
 line-height: 0;
 color:#00aeeb;
}
.yearTitle span{
 font-family: acumin-pro, sans-serif;
 font-weight: 700;
}
.historyList{
 flex: 1;
}
.historyList li{
 min-height: 100px;
 display: flex;
 flex-direction: row;
 align-items: center;
 border-top: 1px solid #d9d9d9;
}
.historyList li:first-child{
 border-top: none;
}
.historyList li.photo{
 position: relative;
}
.historyList li p{
 font-size: 15px;
 line-height: 1.4;
 letter-spacing: 0;
}
.historyList li p.day{
 width:130px;
 color:#808080;
}
.photoR{
 width:150px;
 height: auto;
 position: absolute;
 top:50%;right:0;
 transform: translateY(-50%);
 z-index: 1;
}
.photoL{
 width:150px;
 height: auto;
 position: absolute;
 top:50%;right:150px;
 transform: translateY(-50%);
 z-index: 1;
}
.historyList.pro .photoL{
right:120px;
}
.wid{
 display: none;
}
@media screen and (min-width: 768px) and (max-width: 1010px) {/* TB */
  .yearWrap{
   display: flex;
   flex-direction: column;
  }
  .yearTitle{
   width:100%;
   min-height: 100px;
   padding-top:45px;
   font-size: 34px;
   line-height: 0;
   color:#00aeeb;
   border-bottom: 1px solid #d9d9d9;
  }
}
@media screen and (min-width: 768px) and (max-width: 800px) {/* TB */
  .wid{
   display: block;
  }
}
@media screen and (max-width: 767px) {/* SP */
  .yearWrap{
   display: flex;
   flex-direction: column;
  }
  h3 + .yearWrap{
   margin-top: 30px;
  }
  .yearTitle{
   width:auto;
   min-height: 60px;
   padding-top:30px;
   font-size: 26px;
   border-bottom: 1px solid #d9d9d9;
  }
  .historyList li{
   min-height: 60px;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
   border-top: 1px solid #d9d9d9;
   position: relative;
  }
  .historyList li.photo{
   padding-right:100px;
  }
  .historyList li p{
   font-size: 14px;
   padding:0 0 5px;
   line-height: 1.6;
  }
  .historyList li p.day{
   width:110px;
   color:#808080;
   padding: 5px 0 0;
  }
  .historyList li p span{
   display: inline-block;
  }
  .photoR,
  .photoL{
   width:90px;
   height: auto;
   position: absolute;
   top:50%;right:0;
   transform: translateY(-50%);
  }
  .historyList.pro li.photo{
   padding-right:75px;
  }
  .historyList.pro .photoR,
  .historyList.pro .photoL{
   width:63px;
   right:0;
  }
}


/* -------------------------------------------------------
 offices top
------------------------------------------------------- */
#ttlText.offices h1 .ttlLine{
 width: 19.7em;
}
.officeList{
 width:100%;
 overflow: hidden;
}
.officeList ul {
 width:calc(100% + 46px);
 margin-left:-23px;
 display: flex;
 flex-direction:row;
 flex-wrap: wrap;
 justify-content:start;
}
.officeList ul li{
 padding:40px 23px 10px;
 width:25%;
 max-width:259px;
}
.officeList ul a{
 display: block;
 text-decoration: none;
 color:#fff;
}
.officeTopImg{
 background-color: #fff;
 overflow: hidden;
}
.officeTopImg img{
 transition: 0.5s;
}
.officeList a:hover .officeTopImg img{
 transform: scale(1.05);
 opacity: 0.7;
}
.officeList li h3{
 padding:4px 0 4px 12px;
 position: relative;
 font-size: 15px;
 line-height: 1.6;
 font-weight: bold;
 letter-spacing: 0.5px;
 border-left:1px solid #fff;
}
.officeTopImg + h3{
 margin-top:15px;
}
.officeList a:hover h3{
 text-decoration: underline;
}
.officeList a:active h3{
 color:#000;
}
.overseas{
 margin-top:80px;
}
.officeList.smlTxt li h3{
 font-size: 12px;
 letter-spacing: 0.5px;
}

@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  .officeList ul {
   width:calc(100% + 24px);
   margin-left:-12px;
  }
  .officeList ul li{
   padding:40px 12px 10px;
   max-width:auto;
  }
}
@media screen and (max-width: 767px) {/* SP */
  .officeList ul {
   width:100%;
   margin-left:0;
   justify-content:space-between;
  }
  .officeList ul li{
   padding:30px 0 10px;
   width:47%;
   max-width:100%;
  }
  .officeList li h3{
   padding:4px 0 4px 10px;
   font-size: 14px;
   line-height: 1.4;
  }
  .officeList a:hover .officeTopImg img{
   transform: none;
   opacity: 1;
  }
  .officeList.overseas li h3{
   padding:4px 0 4px 6px;
   font-size: 11px;
   line-height: 1.6;
   letter-spacing: 0px;
  }
}


/* -------------------------------------------------------
 offices
------------------------------------------------------- */
#officeMain{
 max-width: 990px;
 margin:70px auto 0;
 display: flex;
 flex-direction:row;
 flex-wrap: nowrap;
 justify-content:space-between;
}
.officePhoto{
 width:50%;
 max-width: 500px;
 order: 2;
}
#officeText{
 width:100%;
 max-width: 100%;
 order: 1;
}
.officePhoto + #officeText{
 width:47%;
 max-width: 410px;
}
#officeText h1{
 display: inline-block;
 padding: 8px 20px;
 margin-bottom:40px;
 line-height: 1;
 color: #fff;
 font-size: 30px;
 font-weight: bold;
 background: #000;
}
#officeText h1.en{
 display: inline-block;
 padding: 0px;
 margin-bottom:36px;
 background: transparent;
}
#officeText h1.en span{
 display: inline-block;
 padding: 8px 20px;
 margin-bottom:4px;
 line-height: 1;
 color: #fff;
 font-size: 30px;
 font-weight: bold;
 background: #000;
}
#officeText dl{
 width:100%;
 font-size: 15px;
 line-height: 1.6;
}
#officeText dl dt{
 padding:15px 0 3px;
 font-weight: bold;
 border-top:1px solid rgba(255,255,255,0.5);
}
#officeText dl dd{
 padding:0 0 15px;
}
#officeText dl dt:first-child{
 border-top:none;
}
#officeMap{
 max-width: 990px;
 margin: 70px auto 0;
}
#map{
 width:100%;
 height:400px;
}
.maplink{
  margin-top:25px;
  text-align: right;
}
@media screen and (min-width: 768px) and (max-width: 989px) {/* TB */
  #officeText h1{
   margin-bottom:20px;
  }
  #officeText h1.en{
   display: inline-block;
   padding: 0px;
   margin-bottom:0px;
   background: transparent;
  }
  #officeText h1.en span{
   padding: 8px 10px;
   font-size: 26px;
  }
  #officeMap{
   margin: 40px auto 0;
  }
}
@media screen and (max-width: 767px) {/* SP */
  #officeMain{
   margin:0 auto;
   flex-direction:column;
   justify-content:start;
  }
  .officePhoto{
   width:calc(100% + 10vw);
   max-width: calc(100% + 10vw);
   order: 1;
   transform: translateX(-5vw);
  }
  #officeText,
  .officePhoto + #officeText{
   width:100%;
   max-width: 100%;
   margin-top:70px;
   order: 2;
  }
  #officeText h1{
   padding: 5px 10px;
   margin-bottom:20px;
   font-size: 20px;
  }
  #officeText h1.en{
   margin-bottom:16px;
  }
  #officeText h1.en span{
   padding: 5px 10px;
   font-size: 20px;
  }
  #officeText dl{
   font-size:14px;
   line-height: 1.4;
  }
  #officeMap{
   margin: 40px auto 0;
  }
  #map{
   width:100%;
   height:320px;
  }
}