@charset "UTF-8";


/*------------メディアクエリ----------------*/

body#door{background: #fff;}
#door header{text-align: -webkit-center;}
body#door .siteTitle{max-width: 387px;}

#door footer{background: #fff; text-align: center; padding: 20px;}
#door #footer{background: #fff; padding: 0;}
#door #footer address{color: #000; text-align: center;}
#door #footeraddress a,
#door #footer address a:link,
#door #footer address a:visited{color: #000;}
#door #footer .copyright{margin-top: 0;}





.top_con{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.bt_con{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.dr_link{
  display: flex;
  flex-direction: column-reverse;
  justify-content: space-between;
  height: 500px;
  position: relative;
  border-top: 5px solid #fff;
  border-right: 5px solid #fff;
  
}

.dr_link.bg01 h2 img,
.dr_link.bg02 h2 img,
.dr_link.bg03 h2 img{
  width: 2.5rem;
  margin-right: 10px;
}

/*bg01******************************/
.dr_link.bg01{
  background: url(../images/door/link01.png)no-repeat right;
  background-size: cover;
}
.dr_link.bg01 .dor_txt{
  height: 44%;
  background: #0e01597d;
  padding: 10px;
}
.dr_link.bg01 h2{
    position: absolute;
    top: 0;
    left: 0;
    background: #100169;
    font-size: 37px;
    color: #fff;
    margin-bottom: 15px;
    display: inline-block;
    padding: 12px 20px;
    line-height: 1;
}
.dr_link.bg01 p{
  font-size: 21px;
  line-height: 1.5;
  text-align: left;
}
.dr_link.bg01 p span{
  font-size: 32px;
}

/*bg02******************************/
.dr_link.bg02{
        background: url(../images/door/link02.png) center / cover no-repeat;
}
.dr_link.bg02 .dor_txt{
    height: 44%;
  background: #0e01597d;
  padding: 10px;
}
.dr_link.bg02 .dor_img{
  position: absolute;
  bottom: 4vw;
  right: 10px;
}
.dr_link.bg02 h2{
    position: absolute;
    top: 0;
    left: 0;
    background: #100169;
    font-size: 37px;
    color: #fff;
    margin-bottom: 15px;
    display: inline-block;
    padding: 12px 20px;
    line-height: 1;
}


/*bg03******************************/
.dr_link.bg03{
  background: url(../images/door/link03.png) right / cover no-repeat;
  background-size: cover;
}
.dr_link.bg03 .dor_txt{
    height: 44%;
  background: #0e01597d;
  padding: 30px;
}
.dr_link.bg03 .dor_img{

}
.dr_link.bg03 .dor_img img{
}
.dr_link.bg03 h2{
    position: absolute;
    top: 0;
    left: 0;
    background: #100169;
    font-size: 37px;
    color: #fff;
    margin-bottom: 15px;
    display: inline-block;
    padding: 12px 20px;
    line-height: 1;
}
.dr_link.bg03 p{
  font-size: 21px;
  line-height: 1.5;
  text-align: left;
}



/*bg04******************************/
.dr_link.bg04{
  background: linear-gradient(
    304deg,
    rgb(30 37 124 / 21%) 0%,
    rgba(30, 37, 124, 0.9) 50%,
    transparent 50%
  ),
  url(../images/door/link04.png) center / cover no-repeat;
}

.dr_link.bg04 .dor_img{
    width: 70%;
    position: absolute;
    bottom: 0;
    left: 40%;
    transform: translate(-50%, 0);
}
.dr_link.bg04 .dor_img img{
  width: 90%;
}

/*bg05******************************/
.dr_link.bg05{
  background: linear-gradient(
    304deg,
    rgb(30 37 124 / 21%) 0%,
    rgba(30, 37, 124, 0.9) 50%,
    transparent 50%
  ),
  url(../images/door/link05.png) center / cover no-repeat;
}
.dr_link.bg05 .dor_img{
    width: 70%;
    position: absolute;
    top: 50%;
    left: 35%;
    transform: translate(-50%, -50%);
}
.dr_link.bg05 .dor_img img{
  width: 70%;
}


/*bg04 bg05******************************/
.dr_link.bg04 h2,
.dr_link.bg05 h2{
    position: absolute;
    top: 0;
    left: 0;
    background: #100169;
    font-size: 37px;
    color: #fff;
    margin-bottom: 15px;
    display: inline-block;
    padding: 12px 20px;
    line-height: 1;
}
.dr_link.bg04 h2 img,
.dr_link.bg05 h2 img{
  width: 2.5rem;
  margin-right: 10px;
}


.dor_img{

}
.dor_img img{ 
  width: 100%;
}
.dor_txt{

}
.dor_txt p{
  color: #fff;
}


.dor_btn{
  position: absolute;
  right: 10px;
  bottom: 30px;
  z-index: 1;

}
.dor_btn a {
    color: #fff;
    padding: 10px 40px 10px 30px;
    font-size: 24px;
    background: url(../images/common/arrow_r.png) no-repeat right center #e4af0edb;
    background-position: right 10px center;
    background-size: 12px;
    transition: 0.2s;
    border: 1px solid #fff;
}
.dor_btn a:hover{
  text-decoration: none;
  background: url(../images/common/arrow_r.png) no-repeat right center #e4af0e;
  background-position: right 5px center;
  background-size: 12px;
}


@media (max-width: 1440px) {
  .dr_link.bg01 h2,
  .dr_link.bg02 h2,
  .dr_link.bg03 h2,
  .dr_link.bg04 h2,
  .dr_link.bg05 h2{font-size: 30px;}

  .dr_link.bg01 h2 img,
  .dr_link.bg02 h2 img,
  .dr_link.bg03 h2 img,
  .dr_link.bg04 h2 img,
  .dr_link.bg05 h2 img{width: 2rem;}

  .dr_link.bg01 p span {font-size: 30px;}
  .dr_link.bg02 .dor_img{bottom: 5vw;}
}

@media (max-width: 1220px) {
  .dr_link{height: 384px;}
  .dor_btn{bottom: 20px;}
  .dr_link.bg01 p span {font-size: 27px;}

  .dr_link.bg01 h2,
  .dr_link.bg02 h2,
  .dr_link.bg03 h2,
  .dr_link.bg04 h2,
  .dr_link.bg05 h2{font-size: 28px;}
}

@media (max-width: 1055px) {
  .dr_link.bg01 h2,
  .dr_link.bg02 h2,
  .dr_link.bg03 h2,
  .dr_link.bg04 h2,
  .dr_link.bg05 h2{font-size: 25px;}

  .dr_link.bg01 h2 img,
  .dr_link.bg02 h2 img,
  .dr_link.bg03 h2 img,
  .dr_link.bg04 h2 img,
  .dr_link.bg05 h2 img {width: 1.5rem;}

  .dr_link.bg01 p span {font-size: 24px;}
  .dr_link.bg01 p,.dr_link.bg03 p {font-size: 18px;}
  
  .dr_link.bg03 .dor_txt,
  .dr_link.bg02 .dor_txt,
  .dr_link.bg03 .dor_txt{padding: 20px;}

}

@media (max-width: 1024px) {
  .dr_link{height: 432px; border: 1px solid #fff;}
  .top_con{grid-template-columns: repeat(1, 1fr);}
  .dr_link.bg01, .dr_link.bg02, .dr_link.bg03 {background-size: cover;}
  .dor_img img{width: 90%;}
  
  .bt_con{grid-template-columns: repeat(1, 1fr);}
  .bt_con .dr_link{height: 376px;}

  .dr_link.bg02 .dor_img {bottom: 0; right: 20%;}
  .dr_link.bg02 .dor_img img{width: 100%;}

  .dr_link.bg04 .dor_img img {width: 68%;}
  .dr_link.bg04 .dor_img {position: absolute; bottom: 0; left: 0; transform: unset;}
}

@media (max-width: 599px) {
  .dr_link{height: 350px;}

  .dr_link.bg04{background: url(../images/door/link04_sp.png)no-repeat;}
  .dr_link.bg04 .dor_img{display: block; position: absolute; bottom: 0; left: 5%;}
  .dr_link.bg04 .dor_img img{width: 100%;}
  .dr_link.bg05 .dor_img {width: 70%;top: 50%; left: 50%; transform: translate(-50%, -50%);}
  .dr_link.bg05 .dor_img img {width: 100%;}

  .dor_img img {width: 100%;}
  
  .dor_btn{}
  .dor_btn a{font-size: 19px;}
}

@media (max-width: 425px) {
  .dr_link{height: 350px;}
.dr_link.bg02 .dor_img {bottom: 14vw; right: 7%;}
.dr_link.bg04 .dor_img{width: 100%; left: 0;}
}