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

.cty_top .cty_enttl{margin-bottom: 0;}

.cty_pagelink{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.cty_top h1{padding-top: 30px;}
.cty_pagelink ul{
  width: 224px;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_pagelink ul li{margin-bottom: 16px;}
.cty_pagelink ul li:last-of-type{margin-bottom: 0;}
.cty_pagelink ul li a{
  font-size: 0.75rem;
  color: #212121;
}
.cty_pagelink ul li a::before{
  content: "";
  display: inline-block;
  width: 10px;
  margin-right: 12px;
  vertical-align: middle;
  border-top: 1px solid #212121;
}
.cty_top.active .cty_pagelink ul{opacity: 1;}



.cty_innerwrap{padding: 90px 16px 114px;}

.cty_mainphbox{
  position: relative;
  aspect-ratio:2 / 1;
}

.cty_mainphbox > div{
  position: absolute;
  top:0;
  left:0;
  width:100%;
  height: 100%;
  clip-path: inset(0);
}

.cty_mainph{
  height: 482px;
  background: url("../img/business/ph_top.jpg") center center no-repeat;
  background-size: cover;
  background-attachment: fixed;
}



.cty_businessblock{
  position: relative;
  padding-top: 30px;
  opacity: 0;
  transition: all 0.3s linear;
}
.cty_businessblock.active{opacity: 1;}
.cty_businessblock figure{
  display: flex;
  justify-content: space-between;
  padding: 40px 64px;
  background-color: #FFFFFF;
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.08);
}
.cty_businessblock figure>p{
  width: 282px;
  aspect-ratio: 6/5;
}
.cty_businessblock figure>p a{
  display: block;
  overflow: hidden;
}
.cty_businessblock figure>p a img{
  width: 100%;
  height: 100%;
  transition: all 0.2s linear;
}
.cty_businessblock figure figcaption{width: 470px;}
.cty_businessblock figure figcaption h2{
  margin-bottom: 10px;
  font-size: 2rem;
  font-weight: bold;
  color: #212121;
}
.cty_businessblock figure figcaption .cty_blbox{
  width: 100%;
  margin-bottom: 16px;
  padding: 10px 20px;
  font-weight: 500;
  color: #FFFFFF;
  background: linear-gradient(90deg ,#1C84E5 0%, #004EA2 100%);
}
.cty_businessblock figure figcaption .cty_txt{
  line-height: 1.75;
  margin-bottom: 32px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #212121;
}

.cty_txtbottom{
  display: flex;
  align-items: center;
  margin-top: 6px;
}
.cty_businessblock figure figcaption .cty_maplink a{color: #212121;}
.cty_businessblock figure figcaption .cty_maplink img{
  height: 22px;
  margin-right: 12px;
}

.cty_link{margin: 0 0 0 auto;}
.cty_link a{
  font-weight: 500;
  color: #004EA2;
}
.cty_link a span{
  margin-right: 12px;
}
.cty_link a img{
  width: 12px;
  height: 12px;
  margin-top: 7px;
  vertical-align: top;
}




@media screen and (min-width:821px){
  .cty_pagelink ul li a:hover{text-decoration: underline;}
  .cty_businessblock figure>p a:hover img{transform: scale(1.1);}
  .cty_businessblock figure figcaption .cty_maplink a:hover{text-decoration: underline;}
  .cty_link a:hover{border-bottom: 1px solid #004EA2;}
}






@media screen and (max-width:960px){/*942+17*/
  .cty_businessblock figure>p{width: 29.3vw;}
  .cty_businessblock figure figcaption{width: 48.9vw;}
}
@media screen and (max-width:820px){
  .cty_pagelink ul{width: 200px;}
  .cty_businessblock figure{padding: 24px 16px}
  .cty_businessblock figure figcaption{width: 440px;}
  .cty_businessblock figure figcaption .cty_blbox_in {width: calc(100% - 138px);}
}
@media screen and (max-width:428px){
  .cty_pagelink ul{display: none;}
  .cty_top h1{padding-top: 0;}
  
  .cty_mainphbox{aspect-ratio:4 / 3;}
  .cty_mainph{
    background: url("../img/business/ph_top_sp.jpg") center top no-repeat;
    background-size: 100% auto;
    background-attachment: fixed;
    width:100vw;
    height: 60vh;
    position: fixed;
    top:0;
    left:0;
  }


  .cty_innerwrap{padding: 0;}
  .cty_businessblock{padding: 48px 16px 0;}
  .cty_businessblock figure{
    flex-wrap: wrap;
    padding:28px 24px 28px;
  }
  .cty_businessblock figure>p{
    width: 100%;
    margin-bottom: 30px;
  }
  .cty_businessblock figure>p>img{width: 100%;}
  .cty_businessblock figure figcaption{width: 100%;}
  .cty_businessblock figure figcaption h2{
    margin-bottom: 16px;
    font-size: 1.25rem;
  }
  .cty_businessblock figure figcaption .cty_blbox{
    width: 100%;
    line-height: 2;
      padding: 0.75em;
  font-size: calc(100vw / 33);
  }
  .cty_businessblock figure figcaption .cty_blbox_in {width:100%;}
  .cty_businessblock figure figcaption .cty_ph {
    width: 50%;
    margin: 0 auto 10px;
}
  .cty_businessblock figure figcaption .cty_txt{font-size: 0.75rem;}

  .cty_txtbottom{flex-wrap:wrap;}
  .cty_txtbottom .cty_link{width:100%;}
  .cty_txtbottom .cty_link a{display: block;width: fit-content;max-width: 100%;margin-left: auto;}
}