/* life-in-japan日本の生活
---------------------------------------------------------------------------------*/
#cont01{padding-top: 100px;}
.sec{margin-bottom: 80px;}

@media screen and (max-width: 768px){
  #cont01{padding-top: 40px;}
  .sec{margin-bottom: 40px;}
}


.sec.life-in-japan{margin-top: 100px;}
.blockLink02.life-in-japan{
  display: flex;
  justify-content: space-between;
}
.blockLink02.life-in-japan li{
  width: 46%;
}
.blockLink02.life-in-japan li h3{font-size: 142.9%; margin-bottom: 20px;}
.blockLink02.life-in-japan li h3 i{font-size: 160%;margin-right: 20px;}
.blockLink02.life-in-japan li.cal01 h3{color:#5a9bb6;}
.blockLink02.life-in-japan li.cal02 h3{color:#d66859;}
.blockLink02.life-in-japan li .txtBox{padding: 150px 35px 20px;}
.blockLink02.life-in-japan li .txtBox .title{padding: 0;}

.cost-table{display: flex;justify-content: space-between;}
.cost-table .figure{width: 48%;}
.insurance .figure-box{width: 60%; margin: auto;}

/*図形*/
.figure-box .figure{
  border: 2px solid #e4ddcb;
  padding: 20px;
  text-align: center;
}
.figure-box .figure figcaption{
  display: inline-block;
  line-height: 1;
  padding: 5px 25px;
  margin-bottom: 20px;
  font-weight: bold;
  background: #e4ddcb;
  border-radius: 14px;
  color: #464646;
  font-size: 107.1%;
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro","ＭＳ Ｐ明朝", "MS PMincho", "serif";
}

.blockLink01.part-time-job li:not(:last-child){margin-bottom: 70px;}
.blockLink01.part-time-job li .imgBox{width: 40%;background: transparent;}
.blockLink01.part-time-job .txtBox{
  width: 60%;
  padding: 20px 35px;
  font-size: 100%;
  display: block;
  font-family: inherit;
}
.blockLink01.part-time-job .txtBox p{
  text-align: left;
}
.blockLink01.part-time-job .txtBox .job-detail{
  display: flex;
  justify-content: space-between;
  margin-bottom: 25px;
}
.blockLink01.part-time-job .txtBox .job-detail .job-imgbox{width: 18%;}
.blockLink01.part-time-job .txtBox .job-detail .job-prof{width: 76%;}
.blockLink01.part-time-job li:hover .imgBox img{opacity: 1}
.blockLink01.part-time-job li:hover .txtBox{background: #fff;color: #000;}


.room-list{
  display: flex;
  /*justify-content: space-between;*/
  justify-content: space-around;
  flex-wrap: wrap;
}
.room-list li a:hover{text-decoration: none;}
.room-list li{
  width: calc(90%/3);
  padding: 0 5%;
  text-align: center;
  margin-bottom: 5%;
}
.room-list li .room-img{
  position: relative;
  display: block;
  margin-bottom: 40px;
}
.room-list li .room-img::before{
  content: "";
  display: block;
  padding-top: 100%;
}
.room-list li .room-img>span{
  position: absolute;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 30px;
  overflow: hidden;
}
.room-list li .room-img img{
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* 画像の最大サイズは枠の1.8倍まで */
  min-width: 180%;
  z-index: 1;
}
.room-list li .room-img::after{
  content: "";
  position: absolute;
  top: 10px;
  left: -10px;
  border-radius: 30px;
  width: 100%;
  height: 100%;
  background: url("../../common/img/common/bg_dot01.png");
}
.room-list li .area{
  display: block;
  font-size: 171.4%;
  text-align: center;
  position: relative;
  margin-bottom: 40px;
  color: #005bac;
}
.room-list li .area::after{
  content: "";
  width: 50px;
  height: 2px;
  background: #005bac;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  margin: auto;
}

/*-- 学校バナーの色 --*/
.room-list li:nth-child(2) .room-img::after{background: url("../../common/img/common/bg_dot06.png");}
.room-list li:nth-child(2) .area{color: #ee7800;}
.room-list li:nth-child(2) .area::after{background: #ee7800;}
.room-list li:nth-child(3) .room-img::after{background: url("../../common/img/common/bg_dot03.png");}
.room-list li:nth-child(3) .area{color: #00a051;}
.room-list li:nth-child(3) .area::after{background: #00a051;}
.room-list li:nth-child(4) .room-img::after{background: url("../../common/img/common/bg_dot03.png");}
.room-list li:nth-child(4) .area{color: #8da013;}
.room-list li:nth-child(4) .area::after{background: #8da013;}
.room-list li:nth-child(5) .room-img::after{background: url("../../common/img/common/bg_dot03.png");}
.room-list li:nth-child(5) .area{color: #ac9e00;}
.room-list li:nth-child(5) .area::after{background: #ac9e00;}
.room-list li:nth-child(6) .room-img::after{background: url("../../common/img/common/bg_dot04.png");}
.room-list li:nth-child(6) .area{color: #23dfcf;}
.room-list li:nth-child(6) .area::after{background: #23dfcf;}
.room-list li:nth-child(7) .room-img::after{background: url("../../common/img/common/bg_dot05.png");}
.room-list li:nth-child(7) .area{color: #6b1685;}
.room-list li:nth-child(7) .area::after{background: #6b1685;}
.room-list li:nth-child(8) .room-img::after{background: url("../../common/img/common/bg_dot04.png");}
.room-list li:nth-child(8) .area{color: #30a8da;}
.room-list li:nth-child(8) .area::after{background: #30a8da;}
.room-list li:nth-child(9) .room-img::after{background: url("../../common/img/common/bg_dot02.png");}
.room-list li:nth-child(9) .area{color: #ed7a94;}
.room-list li:nth-child(9) .area::after{background: #ed7a94;}
.room-list li:nth-child(10) .room-img::after{background: url("../../common/img/common/bg_dot07.png");}
.room-list li:nth-child(10) .area{color: #e60012;}
.room-list li:nth-child(10) .area::after{background: #e60012;}

.life-chart{
  position: relative;
}
.life-chart::before{
  content: "";
  position: absolute;
  width: 10px;
  height: 100%;
  background: #b2a887;
  margin: auto;
  left: 0;
  right: 0;
}
.life-chart dt{text-align: center;}
.life-chart dt>span{
  color: #b2a887;
  font-weight: bold;
  font-size: 171.4%;
  display: inline-block;
  position: relative;
}
.life-chart dt>span i{
  display: inline-block;
  width: 50px;
  border-radius: 50%;
  height: 50px;
  background: #b2a887;
  color: #fff;
  text-align: center;
  line-height: 50px;
}
.life-chart dt>span i:nth-child(2){
  margin-left: 40px;
  position: relative;
}
.life-chart dt>span i:nth-child(2)::after{
  content: "";
  position: absolute;
  left: -30px;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent #b2a887;
}
.life-chart dt>span::after{
  position: absolute;
  content: attr(title);
  line-height: 50px;
  margin-left: 15px;
  white-space: nowrap;
}
.life-chart dd{
  margin: 40px 0 70px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.life-chart dd .fukidashi,.life-chart dd .img{width: 45%;}
.life-chart dd .fukidashi{
  position: relative;
}
.life-chart dd .fukidashi div{
  padding: 30px 25px;
  border: 2px solid #ecbeb6;
  position: relative;
  background: #fff;
  z-index: 1;
}
.life-chart dd .fukidashi div::before{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent #fff;
  right: -19px;
  z-index: 1;
  top: 0;
  bottom: 0;
  margin: auto;
}
.life-chart dd .fukidashi div::after{
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 23px;
  border-color: transparent transparent transparent #ecbeb6;
  right: -23px;
  top: 0;
  bottom: 0;
  margin: auto;
}
.life-chart dd .fukidashi::after{
  content: "";
  position: absolute;
  background: url("../../common/img/common/bg_dot02.png");
  width: 100%;
  height: 100%;
  top: 10px;
  left: -10px;
}
.life-chart dd.reverse{
  flex-direction: row-reverse;
}
.life-chart dd.reverse .fukidashi div::before{
  border-width: 14px 23px 14px 0;
  border-color: transparent #fff transparent transparent;
  left: -19px;
  right: auto;
}
.life-chart dd.reverse .fukidashi div::after{
  border-width: 14px 23px 14px 0;
  border-color: transparent #ecbeb6 transparent transparent;
  left: -23px;
  right: auto;
}
.life-chart dd.reverse .fukidashi::after{
  right: -10px;
  left: auto;
}
.life-chart dt:last-of-type>span::after{
  left: auto;
  right: 63px;
  margin: 0;
}
.life-chart dd:last-child{
  width: 100%;
  margin: 0;
  position: absolute;
  bottom: -16px;
}

/*チャート色設定*/
/*#ced59a*/
.life-chart dd.c01 .fukidashi div{border: 2px solid #ced59a;}
.life-chart dd.c01 .fukidashi::after{background: url("../../common/img/common/bg_dot03.png");}
.life-chart dd.c01 .fukidashi div::after{border-color: transparent transparent transparent #ced59a;}
.life-chart dd.reverse.c01 .fukidashi div::after{border-color: transparent #ced59a transparent transparent;}
/*#bad3db*/
.life-chart dd.c02 .fukidashi div{border: 2px solid #bad3db;}
.life-chart dd.c02 .fukidashi::after{background: url("../../common/img/common/bg_dot04.png");}
.life-chart dd.c02 .fukidashi div::after{border-color: transparent transparent transparent #bad3db;}
.life-chart dd.reverse.c02 .fukidashi div::after{border-color: transparent #bad3db transparent transparent;}
/*#d2bdd7*/
.life-chart dd.c03 .fukidashi div{border: 2px solid #d2bdd7;}
.life-chart dd.c03 .fukidashi::after{background: url("../../common/img/common/bg_dot05.png");}
.life-chart dd.c03 .fukidashi div::after{border-color: transparent transparent transparent #d2bdd7;}
.life-chart dd.reverse.c03 .fukidashi div::after{border-color: transparent #d2bdd7 transparent transparent;}
/*#f5c594*/
.life-chart dd.c04 .fukidashi div{border: 2px solid #f5c594;}
.life-chart dd.c04 .fukidashi::after{background: url("../../common/img/common/bg_dot06.png");}
.life-chart dd.c04 .fukidashi div::after{border-color: transparent transparent transparent #f5c594;}
.life-chart dd.reverse.c04 .fukidashi div::after{border-color: transparent #f5c594 transparent transparent;}

@media screen and (max-width:768px){
  .blockLink02.life-in-japan{display: block;}
  .blockLink02.life-in-japan li{width: 100%;}
  .blockLink02.life-in-japan li:not(:last-child){margin-bottom: 30px;}
  .blockLink02.life-in-japan li h3{font-size: 120%;}
  .cost-table{display: block;}
  .cost-table .figure{width: 100%;}
  .insurance .figure-box{width: 90%;}
  .blockLink01.part-time-job li{flex-wrap: wrap;}
  .blockLink01.part-time-job li .imgBox,.blockLink01.part-time-job .txtBox{width: 100%; margin: 0;}
  .blockLink01.part-time-job li .imgBox{margin-right: 30px;}
  .blockLink01.part-time-job li .txtBox{margin-left: 30px;}
  .room-list li{
    width: calc(90%/2);
    white-space: nowrap;
    font-size: 90%;
    margin-bottom: 10%;
  }
  .room-list li .room-img,.room-list li .area{margin-bottom: 20px;}
  .room-list li .linkArrow01::after{margin-left: 10px;}
  .life-chart dd{margin: 20px 0 35px;}
  .life-chart dd .fukidashi div{padding: 15px;}
  .life-chart dd:last-child{bottom: 0;}
  .life-chart dd:last-child .fukidashi{width: 35%;}
  .life-chart dt>span::after{
    line-height: 1;
    white-space: normal;
    font-size: 80%;
    height: fit-content;
    top: 0;
    bottom: 0;
    margin: auto 15px;
  }
  .life-chart dt:last-of-type>span::after{margin: auto 15px;}
}