@charset "utf-8";

/********** main ***********/
.main p{
  font-size: 20px;
  color: #152245;
}
h1{
  font-size: 32px;
  color: #152245;
  text-align: center;
}
.flex{
  font-size: 28px;
  color: #152245;
  width: fit-content;
  margin: 50px auto 20px;
}
h2{
  background-image: linear-gradient(to right, #1B6098, #fff); /* 線の色 */
  background-size: 100% 2px; /* 幅(100%=文字の長さ) | 高さ(線の太さ) */
  background-position: bottom; /* 下に配置 */
  background-repeat: no-repeat; /* 背景を繰り返さない */
  margin-left: 10px;
}
.wrap{
  width: 100%;
  max-width: 60vw;
  margin: 0 auto;
  text-align: center;
}
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 50%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}
.fadeIn_up:nth-child(2) { 
  transition-delay: .5s;
  }
.fadeIn_up.after_pic { 
  transition-delay: .5s;
  }
.btn {
  background-color: #F3503E;
    border: 2px solid #F3503E;
    box-shadow: 0 4px 0 #d01a0a;
    width: 250px;
    height: 60px;
    border-radius: 15px;
    color: #fff;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 50px 0 0 auto;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease;
}
.main .btn {
  color: #fff;
}
.btn:hover {
  transform: translateY(4px); /* 影の分だけ下に移動 */
  box-shadow: none;           /* 影を消して押下感を出す */
}
.left{
  display: flex;
  width: 15px;
}
/*************** 組合の主な事業 ****************/
.line_m {
  margin: -4.3vw 20vw 50px -20vw;
}
.title_mainbuisiness{
  margin-top: 100px;
}
.img_mainbuisiness{
  width: 400px;
  height: 300px;
}
/*********** テナント賃貸 *************/
.tenant,.carparking,.mtgroom,.joint_project{
  margin: 0 auto 80px;
}
.flex{
  display: flex;
}
.flex .left{
  width: 10px;
  margin: auto 0;
}
.blocklayout{
  margin: 65px 0 15px auto;
}
.tenantinquiry{
  margin: 15px 0 65px auto;
}
.chintai{
  width: fit-content;
  margin: 50px auto 0;
  color: #1B6098;
  background-image: linear-gradient(to right, #1B6098, #fff); /* 線の色 */
  background-size: 100% 1px; /* 幅(100%=文字の長さ) | 高さ(線の太さ) */
  background-position: bottom; /* 下に配置 */
  background-repeat: no-repeat; /* 背景を繰り返さない */
}
/********* 駐車場管理 ************/

.carparking p{
  margin-bottom: 20px;
  text-align: center;
}
.carparking_flex{
  display: flex;
  gap: 2.5vw;
  justify-content: center;
}
.carparking .blue{
  background-color: #1B6098;
  border-radius: 15px;
  padding: 20px;
}
table{
  width: 360px;
  height: 260px;
  text-align: center;
  border-collapse: collapse;
  border-spacing: 0;
  color:white;
}
tr td{
  font-size: 20px;
  padding: 10px;
  border: solid 1px #fff;
  text-align: left;
  vertical-align:middle;
}
/********* 貸し会議室 ***********/
.mtgroom p{
  margin-bottom: 20px;
}
.img_mtgroom{
  margin: 0 auto;
}
.container{
  text-align: right;
}
.container .tenantinquiry{
  text-align: center;
}
.br_pc_hidden{
  display: none;
}
/************ 共同事業 **************/
.joint_project{
  margin: 0 auto 120px;
}
h3{
  font-size: 24px;
  color: #152245;
}
.joint_project p{
  margin: 20px 0 20px;
}
.img_cub{
  margin: 0 auto;
}
/*************** 自然災害への備え ***************/

.line_p{
  margin: -7vw 25vw 100px -25vw;
}
/*************** ジギョケイ ***************/
.jigyokei_group1{
  display: flex;
  gap: 40px;
  justify-content: center;
  margin-bottom: 150px;
}
.jigyokei_text1{
  width: 400px;
  margin: auto 0 auto;
}
.jigyokei_group2{
  height: 600px;
  display: flex;
  justify-content: center;
  position: relative;
}
.slide_left{
  transition: 2s cubic-bezier(0.75, 0, 0.25, 1);
  transform: translateX(calc(-50vw - 50%));
}
.slide_right{
  transition: 1.5s cubic-bezier(0.75, 0, 0.25, 1);
  transform: translateX(calc(50vw + 50%));
}
.show{
  transform: translateX(0);
}
.fadeIn {
  opacity: 0;
  transition: 3.5s;
}
.fadeIn.is-show {
  opacity: 1;
}
.jigyokei_g2bg {
  position: relative;
  width: 100%;
  height: 100%;
}
.bg_blue {
  width: 100%;
  height: 550px;
  padding-right: 30px;
  z-index: 100;
  position: absolute;
  top: 0;
  right: 0;
}
.bg_blue img{
  width: 100%;
  height:100%;
  padding-right: 60px;
  opacity: .95;
}
.bg_navy {
  width: 100%;
  height: 550px;
  margin-left: auto;
  /* padding-top: 20px;
  padding-left: 40px; */
  /* bottom: 50px; */
  left: 0;
  bottom: 0;
  z-index: 10;
  position: absolute;
  text-align: right;
}
.bg_navy img{
  width: 100%;
  height: 100%;
  padding-left: 60px;
}
.img_jigyokei{
  width: calc((100% - 100px) / 2 );
  max-width: 300px;
  /* margin: 100px 0 130px; */
}
.main .jigyokei_text2{
  width: calc((100% - 100px) / 2 );
  color: #fff;
}
.jigyokei_article {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  align-items: center;
  column-gap: 100px;
  z-index: 200;
}
/*************** 地盤沈下 ***************/
.wrap_jiban{
  display: flex;
  justify-content: space-evenly;
  gap: 10px;
}
.jiban p,.cub_pro p, .ken_aed p{
  margin-bottom: 20px;
}
.sankaku{
  align-self: center;
}
.before,.after{
  font-size: 30px;
  text-align: left;
}
.wrap_before,
.wrap_after{
  display: flex;
  flex-direction: column;
  font-weight: bold;
}
.wrap_after_all {
  display: flex;
  column-gap: 10px;
}
.wrap_before{
  align-self: flex-end;
}
/*************** キュービクル+調査 ***************/
.cub_pro{
  display: flex;
  justify-content: center;
  gap: 2.5vw;
  margin-bottom: 150px;
}
.cubicle, .surveyproject{
  width: 400px;
}
.surveyproject h2 br,.surveyproject .left2{
  display: none;
}
.left2{
  display: none;
}
.surveyproject h2 br{
  display: block;
}
/*************** 地域貢献活動 ***************/
.line_h{
  margin: -4.3vw 20vw 50px -20vw;
}
.ken_aed{
  display: flex;
  justify-content: space-between;
}
.kenketsu, .aed{
  width: 27.7vw;
}
.lineart{
  margin: 10vw 0 5vw;
}

/* レスポンシブ(TB用) */
@media screen and (max-width:900px){
  /********** main ***********/
  .main p{
    font-size: 16px;
  }
  h1{
    font-size: 24px;
  }
  .flex{
    font-size: 22px;
  }
  h3{
    font-size: 20px;
  }
  .wrap{
    width: 100%;
    max-width: 80vw;
  }
  /*********** テナント賃貸 *************/
  .blocklayout{
    margin: 65px auto 15px auto;
  }
  .tenantinquiry{
    margin: 15px auto 65px auto;
  }
  /********* 駐車場管理 ************/
  .carparking_flex{
    display: block;
  }
  .carparking .img_mainbuisiness{
    margin: 0 auto 30px auto;
  }
  .carparking .blue{
    margin: 30px auto auto auto;
    width: 400px;
  }
    /********* 駐車場管理 ************/
  .br_pc_hidden{
    display: none;
  }
  /*************** ジギョケイ ***************/
  .jigyokei_group2{
    gap: 5vw;
  }
  .jigyokei_article {
    width: 70%;
  }
  /* .img_jigyokei{
    max-width: 260px;
  }
  /*************** キュービクル+調査 ***************/
  .cub_pro{
    display: block;
  }
  .cubicle, .surveyproject{
    width: 400px;
    margin: 0 auto;
  }
  /*************** 地域貢献活動 ***************/
  .ken_aed{
    gap: 30px;
  }
  .kenketsu, .aed{
    width: 40vw;
  }
}

/* レスポンシブ(SP用) */
@media screen and (max-width:650px){
  /********** main ***********/
  .wrap{
    width: 100%;
    max-width: 100vw;
    padding: 0 20px;
  }
  .fadeIn_up {
  opacity: 1;
  transform: none;
}
  /*************** 組合の主な事業 ****************/
  .line_m {
    margin: -5vw 10vw 50px -10vw;
  }
  /********* 駐車場管理 ************/
  .carparking .img_mainbuisiness{
    width: calc(100% - 40px);
    max-width: 400px;
    height: auto;
  }
  .carparking .blue{
    margin: 30px auto auto auto;
    width: calc(100% - 40px);
    max-width: 400px;
    padding: 20px;
  }
  table{
    width: 100%;
    height: 260px;
    text-align: center;
    border-collapse: collapse;
    border-spacing: 0;
    color:white;
  }
  tr td{
    font-size: 14px;
  }
  .br_sp_hidden{
    display: none;
  }

  /********* 貸し会議室 ***********/
  .img_mtgroom{
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-bottom: 60px;
  }
  /************ 共同事業 **************/
  .img_cub{
    width: 100%;
    max-width: 400px;
    height: auto;
  }
/*************** 自然災害への備え ***************/
.Disaster_preparedness{
  margin-top: 80px;
}
.line_p{
  margin: -7vw 12vw 100px -12vw;;
}
/*************** ジギョケイ ***************/
.jigyokei_group1{
  display: block;
  margin-bottom: 60px;
}
.logo_jigyokei{
  width: 80%;
  max-width: 300px;
  margin: 40px auto;
}
.jigyokei_text1{
  width: 100%;
  max-width: 400px;
  margin: 40px auto;
}
.main .jigyokei_text2 {
  width: 100%;
}
.bg_blue {
  padding-right: 0;
}
.bg_blue img {
  padding-right: 0;
}
.bg_navy  {
  bottom: -50px;
  padding-left: 0;
}
.bg_navy img {
  padding-left: 0;
}
.jigyokei_article {
  display: block;
}
.img_jigyokei{
  width: 65vw;
  max-width: 300px;
  margin: 60px auto 20px;
  padding: 50px 30px 0 30px;
}
.jigyokei_text2{
  min-width: 270px;
  height: auto;
  margin: 0 auto;
  padding-bottom: 50px;
  color: #fff;
}
/*************** 地盤沈下 ***************/
.wrap_jiban,
.wrap_after_all{
  display: block;
}
.wrap.jiban {
  padding-top: 50px;
} 
.img_before{
  width: 64vw;
  margin: 0 auto;
}
.sankaku{
  align-self: center;
  margin: 50px auto;
  height: 47px;
  width: 41px;
  transform: rotate( 90deg );
  text-align: center;
  vertical-align: middle;
}
.before,.after{
  font-size: 18px;
  text-align: center;
  margin: 50px auto;
}
.after{
  margin-top: 0;
}
.wrap_before,.wrap_after{
  display: flex;
  flex-direction: column-reverse;
  font-weight: bold;
  margin-bottom: 20px;
}
.img_after,.img_slope{
  width: 77vw;
  margin: 0 auto;
}
  /*************** キュービクル+調査 ***************/
  .cubicle, .surveyproject{
    max-width: 400px;
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .surveyproject h2{
    text-align: center;
  }
  .surveyproject .left1{
    display: none;
  }
  .surveyproject h2 br,.surveyproject .left2{
    display: block;
  }
  /*************** 地域貢献活動 ***************/
  .line_h{
    margin: -6vw 10vw 50px -10vw;
  }
  .ken_aed{
    display: block;
  }
  .kenketsu, .aed{
    max-width: 400px;
    width: calc(100% - 40px);
    margin: 0 auto;
  }
}