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

/*===============================================
*************************************************

　　共通

*************************************************
=================================================*/

.sub_ttl {margin-bottom: 46px;}
.sub_ttl h3 {
  font-size: 50px;
  display: inline-block;
  line-height: 1;
}
.sub_ttl p {
  display: inline-block;
  font-size: 20px;
}

.bg_blue {
  background: #04b9f5;
  padding: 0 5px 6px;
}

.br_ipad,
.br_sp{display: none;}

@media screen and (max-width: 900px) {
  .br_ipad {display: block;}
}

@media screen and (max-width: 700px) {

  .sub_ttl {margin-bottom: 20px;}
  .sub_ttl h3 {font-size: 40px;}
  .sub_ttl p{font-size: 16px;}

  .br_ipad {display: none;}
  .br_sp {display: block;}

}

/*===============================================
*************************************************

　　box_one

*************************************************
=================================================*/

.box_one{margin-bottom: 130px;}

.box_one h2{
  font-size: 80px;
  margin-bottom: 60px;
  writing-mode: vertical-rl;
  vertical-align: middle;
  display: inline;
  text-align: left;
}

.box_one p {
  font-size: 20px;
  line-height: 2.5;
}

@media screen and (max-width: 900px) {

}

@media screen and (max-width: 700px) {
  .box_one h2 {
    font-size: 40px;
    margin-bottom: 40px;
  }
  .box_one p{font-size: 16px;}
}

/*===============================================
*************************************************

　　box_two

*************************************************
=================================================*/

.box_two{margin-bottom: 180px;}

.box_two .sub_ttl{
  text-align: right;
  display: block;
}

#company_img{position: relative;}

#company_img img{
  object-fit: cover;
  width: 1200px;
  max-width: 100%;
  height: 500px;
}

#company_img h3 {
  writing-mode: vertical-rl;
  display: inline;
  text-align: left;
  font-size: 45px;
  position: absolute;
  left: 30px;
  bottom: -57%;
}

#company_img em{
  background: #ffffff;
  padding: 15px 4px;
  margin-left: 10px;
  display: inline-block;
}
#company_img em:last-child{margin-left: 0;}

#company_txt{
  width: 45%;
  margin: 48px 0 0 auto;
}
#company_txt>p{
  font-size: 18px;
  line-height: 2.22;
  text-align: justify;
}
#company_txt span {
  width: 100%;
  text-align: right;
  display: block;
  margin-top: 36px;
}

@media screen and (max-width: 1200px) {

  #company_img h3 {font-size: 3.8vw;}

}

@media screen and (max-width: 1000px) {

  #company_img h3 {
    font-size: 4.2vw;
    bottom: -58%;
    height: 420px;
  }
  #company_txt{width: 48%;}

}

@media screen and (max-width: 850px) {
  #company_txt{width: 100%;}
}

@media screen and (max-width: 700px) {

  .box_two {margin-bottom: 100px;}

  #company_img img{height: 280px;}

  #company_img em{margin-left: 6px;}

  #company_img h3 {
    bottom: 0;
    left: 20px;
    top: 68%;
  }

  .box_two #company_txt{margin: 27% 0 0 auto;}
  .box_two #company_txt>p {font-size: 14px;}
  .box_two #company_txt span{margin-top: 16px;}

}


/*===============================================
*************************************************

街img

*************************************************
=================================================*/


#wrapper>img{
  object-fit: cover;
  width: 100%;
  max-width: 100%;
  height: 1040px;
}

@media screen and (max-width: 1000px) {

  #wrapper>img {height: 540px;}

}

@media screen and (max-width: 700px) {

  #wrapper>img {height: 340px;}

}

/*===============================================
*************************************************

　　box_three

*************************************************
=================================================*/

.box_three{margin: 110px auto 210px;}

.table_1{margin-bottom: 70px;}

.box_three>p{
  font-size: 20px;
  float: left;
  margin-bottom: 17px;
  padding: 2px 17px 4px;
}

.box_three>ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 80px;
}

.box_three>ul li {
  width: 48%;
  margin-bottom: 86px;
}
.box_three>ul li:nth-last-child(2),
.box_three>ul li:last-child{
  margin-bottom: 0;
}

.box_three>ul span{
  background: #ffffff;
  font-size: 20px;
  padding: 5px 0;
  width: 100px;
  display: block;
  margin-bottom: 10px;
}

.box_three>ul img,
.box_three>ul iframe{
  width: 100%;
}

.box_three>ul iframe {margin-top: 10px;}

@media screen and (max-width: 700px) {

  .box_three{margin-bottom: 120px;}

  .box_three>ul li{
    margin-bottom: 46px;
    width: 100%;
  }

  .box_three>ul li:nth-last-child(2){margin-bottom: 46px;}

  .box_three>ul span{
    font-size: 16px;
    padding: 2px 0;
    width: 90px;
  }

  .box_three>ul img{
    object-fit: cover;
    width: 100%;
    max-width: 100%;
    height: 200px;
  }

  .box_three>ul iframe {height: 200px;}

  .box_three>p {font-size: 16px;}

}