@charset "utf-8";
/* CSS Document */

.ccy_top{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ccy_pagelink{display: flex;}
.ccy_pagelink li:nth-of-type(2){margin: 0 48px;}
.ccy_pagelink li a{
  font-size: 0.875rem;
  color: #2D2D2D;
}
.ccy_pagelink li a b{
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 12px;
  vertical-align: middle;
  border-radius: 100%;
  background: linear-gradient(#08294d 0%, #092e57 12.97%, #0b3666 38.08%, #0c3d73 55.24%, #0d4581 73.65%, #0e4a8a 88.29%, #0f4b8c 100%);
}
.ccy_pagelink li a span{vertical-align: middle;}

.ccy_comprof h2 span{transition: all 0.6s ease 0.4s;}
.ccy_comprof h2 i{transition: all 0.6s ease 0.4s;}
.ccy_comprof h2::after{transition: all 0.6s ease 0.2s;}
.ccy_history h2::after{background-color: #F4F4F6}

.ccy_comprof.active h2 span,
.ccy_history.active h2 span,
.ccy_access.active h2 span{width: 100px;}
.ccy_comprof.active h2 i,
.ccy_history.active h2 i,
.ccy_access.active h2 i{width: 880px;}
.ccy_comprof.active h2::after,
.ccy_history.active h2::after,
.ccy_access.active h2::after{width: 0;}


.ccy_pardl{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #151515;
}
.ccy_pardl>dt{
  width: 260px;
  font-weight: bold;
  opacity: 0;
  transform: translateY(20px);
}
.ccy_pardl>dd{
  width: calc(100% - 260px);
  opacity: 0;
  transform: translateY(20px);
}
.ccy_map{
  opacity: 0;
  transform: translateY(20px);
}

.ccy_pardl>dt,
.ccy_pardl>dd{transition:  all 0.2s linear 1s;}


.ccy_history .ccy_pardl>dt:nth-of-type(1),
.ccy_history .ccy_pardl>dd:nth-of-type(1){transition: all 0.2s linear 0.2s;}
.ccy_map{transition: all 0.2s linear 0.3s;}


.ccy_pardl.active>dt,
.ccy_pardl.active>dd,
.ccy_map.active{
  transform: none;
  opacity: 1;
}

.ccy_wtbg.active h2::after {
  width: 0;
}



.ccy_comprof{
  margin-bottom: 124px;
  padding-bottom: 80px;
  background: linear-gradient(270deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) calc((100% - 1140px)/2) , #FFFFFF calc((100% - 1140px)/2), #FFFFFF 1980px);
  background-size: calc(100%) 100%;
}
.ccy_comprof .ccy_pardl{line-height: 2;}
.ccy_comprof .ccy_pardl>dd{margin-bottom: 40px;}

.ccy_pardl>dd li i{margin-left: 1em;}


.ccy_history{padding-bottom: 64px;}
.ccy_history .ccy_pardl{margin-bottom: 72px;}
.ccy_hisdl{
  display: flex;
  flex-wrap: wrap;
}
.ccy_hisdl dt{width: 130px;}
.ccy_hisdl dd{
  width: calc(100% - 130px);
  margin-bottom: 10px;
}



.ccy_img img{
  aspect-ratio: calc(1280 / 616);
  height: 100%;
}


.ccy_access{position: relative;}
.ccy_wtbg{
  margin: -75px 0 75px;
  padding: 75px 0 64px;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0, rgba(255,255,255,0) calc((100% - 1140px)/2) , #FFFFFF calc((100% - 1140px)/2), #FFFFFF 1980px);
  background-size: calc(100%) 100%;
}
.ccy_access .ccy_wrap{padding-top: 77px;}
.ccy_access .ccy_map{margin-bottom: 64px;}
.ccy_access .ccy_map > div#map{
  aspect-ratio: 88/45;
  margin-bottom: 20px;
}

.ccy_office {
  display: flex;
  align-items: center;
  gap: 5%;
  margin-top: 32px;
}
.ccy_office img {
  aspect-ratio: 820 / 612;
  width: 340px;
  height: 254px;
}





/*---------------------------
ホバーエフェクト
-----------------------------------------*/
@media screen and (min-width:821px){
  .ccy_pagelink li a:hover{opacity: 0.7;}
}




/*---------------------------
レスポンシブ
-----------------------------------------*/
@media screen and (max-width:820px){
  .ccy_comprof{background: linear-gradient(270deg, rgba(255,255,255,0) 0 80px , #FFFFFF 80px 800px);}

  .ccy_top{display: block;}
  .ccy_pagelink {margin-top: 16px;}
  .ccy_pagelink li:nth-of-type(2){margin: 0 5.85vw;}

  .ccy_pardl{flex-wrap: wrap;}
  .ccy_pardl>dt,
  .ccy_pardl>dd{width: 100%;}
  .ccy_pardl>dt{margin-bottom: 8px;}
  .ccy_history .ccy_pardl>dt{margin-bottom: 24px;}

  .ccy_wtbg{background: linear-gradient(90deg, rgba(255,255,255,0) 0 80px , #FFFFFF 80px 800px);}

  .ccy_access .ccy_map > div#map{
    aspect-ratio: 4/3;
    margin-bottom: 8px;
  }

  .ccy_office {display: block;}
  .ccy_office img {
    width: 100%;
    height: auto;
  }
  .ccy_office p {margin-top: 8px;}


  .ccy_comprof.active h2 i,
  .ccy_history.active h2 i,
  .ccy_access.active h2 i{width: 468px;}

}
@media screen and (max-width:420px){
  .ccy_comprof{background: linear-gradient(270deg, rgba(255,255,255,0) 0 20px , #FFFFFF 20px 460px);}

  .ccy_pardl{font-size: 0.875rem;}

  .ccy_pardl>dd li{
    line-height: 1.2;
    margin-bottom: 8px;
  }
  .ccy_pardl>dd li i{
    display: block;
    margin: 0;
  }


  .ccy_hisdl{flex-wrap: wrap;}
  .ccy_hisdl dt,
  .ccy_hisdl dd{width: 100%;}
  .ccy_pardl.ccy_pardladj dt{margin-bottom: 6px;}
  .ccy_hisdl dd{margin-bottom: 16px;}

  .ccy_wtbg{
    padding: 88px 0 1px;
    background: linear-gradient(270deg, rgba(255,255,255,0) 0 20px , #FFFFFF 20px 460px);
    margin-top: -40px;
  }
  .ccy_access .ccy_wrap{padding-top: 0;}
  .ccy_access .ccy_innerblock{padding-right: 20px;}
  .ccy_access .ccy_map > div#map{aspect-ratio: 4/5;}

  .ccy_comprof.active h2 i,
  .ccy_history.active h2 i,
  .ccy_access.active h2 i{width: 380px;}
}
@media screen and (max-width:375px){
  .ccy_comprof.active h2 i,
  .ccy_history.active h2 i,
  .ccy_access.active h2 i{width: 335px;}
}
@media screen and (max-width:360px){
  .ccy_comprof.active h2 i,
  .ccy_history.active h2 i,
  .ccy_access.active h2 i{width: 300px;}
}
@media screen and (max-width:320px){
  .ccy_comprof.active h2 i,
  .ccy_history.active h2 i,
  .ccy_access.active h2 i{width: 280px;}
}


