@charset "utf-8";
/* CSS Document */
#story{  
}
#story #pageMain #pageTtlMain {
  height: 600px;
}
#story #contentsArea{
  background: #f0f0f0;
}
#story #contents .contentsInner{
  background: #fff;
  max-width: calc(1100px - 10%);
	padding: 48px 5% 64px;
  margin-top: 23%;
}
@media only screen and (max-width:767px){
  #story #pageMain #pageTtlMain {
    height: 788px;
  }
  #story #pageMain #pageTtlMain .ttlBox {
    top: 65%;
  }
  #story #contents .contentsInner {
    margin: 23% 5% 0 5%;
  }
  #story.door #pageMain #pageTtlMain{
    margin-bottom: 0;
  }
}
#story.door #pageMain #pageTtlMain .ttlBox h1 {
  font-family: Zen Kaku Gothic New;
  font-weight: 700;
  font-size: 1.8rem;
  line-height: 180%;
  letter-spacing: 0%;
}
#story p.titleCatch{
  font-family: Zen Kaku Gothic New;
  font-weight: 700;
  font-size: 3.2rem;
  line-height: 160%;
  letter-spacing: 0%;
  margin-top: 16px;
}
#story p.titlelead{
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 200%;
  letter-spacing: 0%;
  margin-top: 40px;
}
@media only screen and (max-width:767px){
  #story.door #pageMain #pageTtlMain .ttlBox h1 {
    font-size: 1.6rem;
  }
  #story p.titleCatch{
    font-size: 2.8rem;
    margin-top: 8px;
  }
  #story p.titlelead{
    margin-top: 24px;
  }

}


#story #contentsArea .section{
  border-top: 1px solid #f0f0f0;
}
#story #contentsArea .section#sec00{
  margin-top: 0;
}
#story #contents .section#sec00 .contentsInner {
  background: none;
  margin-top: 0;
  max-width: 1100px;
  padding: 48px 0;
}
#story #contents .section#sec00 .link-ac {
  margin-top: 0;
}
#story #contentsArea .section#ac01{
  background: url("../img/story_section01_bg.jpg") no-repeat;
  background-size: 100% auto;
  margin: 0;
}
#story #contentsArea .section#ac02{
  background: url("../img/story_section02_bg.jpg") no-repeat;
  background-size: 100% auto;
}
#story #contentsArea .section#ac03{
  background: url("../img/story_section03_bg.jpg") no-repeat;
  background-size: 100% auto;
}
#story #contentsArea .section#ac04{
  background: url("../img/story_section04_bg.jpg") no-repeat;
  background-size: 100% auto;
}
#story #contentsArea .section#ac05{
  background: url("../img/story_section05_bg.jpg") no-repeat;
  background-size: 100% auto;
}
#story #contentsArea .section .bgImg{
  width: 100vw;
}
#story #contentsArea .contentsInner{
  /*position: relative;*/
}

/* cardType
-----------------------------------------*/
#story #contentsArea .cardType{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  justify-content: center;
  column-gap: 14px;
  margin-top: 16px;
}
@media only screen and (max-width:767px){
  #story #contentsArea .cardType{
      flex-direction: column;
  }
}
#story .cardType .cardInner{
  background: #F2F2F7;
  width: calc(33.33% - 42px);
  padding: 16px;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 200%;
  color: #3071B9;
  margin: 10px 0;
}
@media only screen and (max-width:767px){
  #story .cardType .cardInner{
    flex-direction: column;
    width: calc(100% - 32px);
  }  
}
#story .cardType .cardInner h3{
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 180%;
  margin-bottom: 16px;
}

/* #sec03 */
#story .section#ac03 .cardInner{
  display: flex;
  flex-direction: column;
}
#story .section#ac03 .cardInner h3{
  font-weight: 700;
  line-height: 180%;  
  font-size: 2.2rem;
}
#story .section#ac03 .cardInner h3 span{
  display: block;
  font-size: 1.4rem;
}
#story .section#ac03 .cardInner p{
  flex-grow: 1;  
}
#story .section#ac03 .cardInner figure{
  margin-top: 16px;
}
#story .section#ac03 .link-primary-btn{
  margin: 32px auto 0 auto;
}
#story .section#ac03 .link-primary-btn a span{
  text-align: left;
  min-width: 12em;  
}

/* #sec04 */
#story #contents .section#ac04 .contentsInner {
  position: relative;
}
#story .section#ac04 .photoCredit{
  text-align: right;
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 1.4rem;
}
@media only screen and (max-width:767px){
  #story .section#ac04 .photoCredit{
    font-size: 1.1rem;
  }
}




/*===================================================
  footterSnbNavi
===================================================*/
/* 他の記事を見る */
#story #footerSubNavi #reference{
  display: none;
}
/* こちらもぜひご覧ください */
#story #footerSubNavi #moreInfo li.moreInfo_story,
#story #footerSubNavi #moreInfo li.moreInfo_keyword,
#story #footerSubNavi #moreInfo li.moreInfo_aboutrever{
  display: none;
}
/*
#footerSubNavi #moreInfo li.moreInfo_story{}
#footerSubNavi #moreInfo li.moreInfo_issue{}
#footerSubNavi #moreInfo li.moreInfo_innovation{}
#footerSubNavi #moreInfo li.moreInfo_keyword{}
#footerSubNavi #moreInfo li.moreInfo_report{}
#footerSubNavi #moreInfo li.moreInfo_denso{}
#footerSubNavi #moreInfo li.moreInfo_aboutrever{}
*/