@charset "utf-8";

.en {font-family: "futura-pt", sans-serif;font-weight: 700;}

/* -------------------------------------------------- */
/* #block-mv */
/* -------------------------------------------------- */
#block-mv{position: relative; font-weight:bold;border-bottom:35px solid #231815;position:relative;}
#block-mv::after {content: "";position: absolute;left: 0;bottom: 290px;width: 550px;height: 1px;background: rgb(149,149,149);background: linear-gradient(90deg, rgba(149,149,149,1) 0%, rgba(255,255,255,0) 100%);}
#block-mv .container{padding-bottom:90px;}
#block-mv .inner{display:inline-block;position:relative;z-index:5;}
#block-mv .ttl{margin-top: 15px; color: #69913d; font-size:60px;line-height:1.4;letter-spacing:0.1em;opacity:0;transform:translateX(40px);}
#block-mv .sub{position:relative;opacity:0;transform:translateX(40px);}
#block-mv .sub img{display: block;}
#block-mv .sub .ttl02 {margin-top: 30px;}
#block-mv .txt{margin-top: 60px; font-size:20px;font-weight:700;line-height: 2.1;opacity:0;transform:translateX(40px);}
#block-mv .back{position:absolute;width:100%;height:100%;top:0;left:0;z-index:0;}
#block-mv .back::before{content:"";display:block;width:100%;height:100%;position:absolute;top:0;right:0;background:url(/prof/recruit/archi/building_construction/img/feel/mv_back.png) no-repeat right center;background-size:auto 100%;z-index:2;}
#block-mv .back .img{position:absolute;bottom:0;right:0;z-index:0;height:100%;opacity:0;}
#block-mv .back img{width:auto;max-width:none;height:100%;}
#block-mv.animated .ttl,
#block-mv.animated .sub,
#block-mv.animated .txt{opacity:1;transform:none;transition:1.2s ease .3s;}
#block-mv.animated .inner::before{opacity:1;transform:none;transition:1.2s ease .3s;}
#block-mv.animated .inner::after{opacity:1;transform:none;transition:1.2s ease .3s;}
#block-mv.animated .back .img{opacity:1;transition:opacity 1s ease .6s;}

/* -------------------------------------------------- */
/* #block-topic */
/* -------------------------------------------------- */
#block-topic{position:relative;padding-top: 60px;background: url(/prof/recruit/archi/building_construction/img/feel/topics_back.jpg) left top / 100% auto no-repeat;}
#block-topic .topic-top{text-align:center;margin-bottom:40px;position:relative;}
#block-topic .topic-top p{position:relative;z-index:2;font-size: 24px;font-weight:bold;line-height: 1.5;padding-top: 60px;}
#block-topic .topic-top p span{font-size:48px;color:#69913d;letter-spacing:0.08em;vertical-align: -7px;}
#block-topic .topic-top::before{content:"";display:block;animation:partsttl 20s linear infinite;width:100%;height:102px;background:url(/prof/recruit/archi/building_construction/img/feel/topback.png) repeat-x;background-size:1365px auto;position:absolute;top:0;left:0;z-index:1;}
@keyframes partsttl{0%{background-position:0% center;}100%{background-position:1365px center;}}
#block-topic .topic-pagelink {display: flex;justify-content: center;max-width: 1280px;margin: 0 auto 120px;}
#block-topic .topic-pagelink > li {position: relative;width: calc(33.3% - 26.6px);}
#block-topic .topic-pagelink > li + li {margin-left: 40px;}
#block-topic .topic-pagelink > li a {position: relative; display: block; width: 100%;height: 0;padding-top: 100%;border-radius: 50%; background-color: #69913d; box-shadow: 0 30px 60px rgba(0,0,0,0.3); transition: .25s ease;}
#block-topic .topic-pagelink > li a:hover {opacity: 0.8;}
#block-topic .topic-pagelink > li a .detail {position:absolute; left: 50%;top: 50%;transform: translate(-50%, -50%);width: 100%;text-align: center;}
#block-topic .topic-pagelink > li a .detail .sub {position: relative; display: inline-block; padding: 0 25px; background: linear-gradient(90deg, rgba(105,145,61,1) 0%, rgba(142,197,82,1) 100%);font-size: 24px;letter-spacing: -0.02em; -webkit-background-clip: text;-webkit-text-fill-color: transparent; white-space: nowrap;}
#block-topic .topic-pagelink > li a .detail .sub::before{content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1; background-color:#fff; transform: skewX(-25deg);}
#block-topic .topic-pagelink > li a .detail .ttl {color: #fff; font-size: 36px; font-weight: bold; letter-spacing: 0.08em; line-height: 1.4;}
#block-topic .topic-pagelink > li a .detail .ttl span {display: block; font-size: 42px;}
#block-topic .topic-pagelink > li a .more {position: absolute; left: 50%; bottom: 30px; padding-bottom: 25px; color: #fff; font-size: 18px; line-height: 1; letter-spacing: -0.02em; transform: translateX(-50%);}
#block-topic .topic-pagelink > li a .more::after {content: ''; width: 10px; height: 10px; margin-left: -5px; border-top: solid 4px #fff; border-right: solid 4px #fff; border-radius: 3px; position: absolute; left: 50%; bottom: 0; transform: rotate(135deg);}
#block-topic .topic-block + .topic-block {margin-top: 80px;}
#block-topic .topic-block .about {position: relative; display: flex;}
#block-topic .topic-block .about-reverse {flex-direction: row-reverse;}
#block-topic .topic-block .about::before, #block-topic .topic-block .about::after {content: ""; position: absolute; z-index: 1;}
#block-topic .topic-block .about::before {top: 0; left: 0; border-top: 400px solid #fff; border-right: 230px solid transparent;}
#block-topic .topic-block .about::after {bottom: 0; right: 0; border-bottom: 400px solid #fff; border-left: 230px solid transparent;}
#block-topic .topic-block#feelthink .about::after {border-bottom: 400px solid #f1f1f1;}
#block-topic .topic-block .about .detail {width: 50%; color: #fff; background: rgb(105,145,61); background: linear-gradient(45deg, rgba(105,145,61,1) 0%, rgba(142,197,82,1) 100%);}
#block-topic .topic-block .about .detail .inner {position: relative; margin-left: auto; padding: 80px 80px 120px 80px; z-index: 2;}
#block-topic .topic-block .about-reverse .detail .inner {margin-left: 0; margin-right: auto; padding: 80px 80px 120px 80px;}
#block-topic .topic-block .about .detail .inner h2 {position: relative; padding-top: 40px; font-size: 60px; font-weight: bold; line-height: 1.4; letter-spacing: 0.1em; text-align: center;}
#block-topic .topic-block .about .detail .inner h2 small {display: block; margin-bottom: 0.5em; font-size: 42px; letter-spacing: 0.08em;}
#block-topic .topic-block .about .detail .inner h2 span {position: absolute; left: 50%; top: 0; color: rgba(255,255,255,0.2); font-size: 72px; letter-spacing: -0.02em; white-space: nowrap; transform: translateX(-50%); z-index: 0;}
#block-topic .topic-block .about .detail .inner p {margin-top: 1em; font-size: 20px; font-weight: bold; line-height: 2.1;}
#block-topic .topic-block .about .main {position: relative; width: 50%;}
#block-topic .topic-block .about .main .img {position: relative; width: 100%; height: 100%;}
#block-topic .topic-block .about .main .img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
#block-topic .topic-block .career {position: relative; max-width: 1440px; margin: auto; padding: 110px 80px 70px; background-color: #f4faee; overflow: hidden;}
#block-topic .topic-block .career .sub {position: absolute; left: 50%; top: 0; color: #dbeec9; font-size: 120px; line-height: 0.7; letter-spacing: -0.02em; white-space: nowrap; transform: translateX(-50%);}
#block-topic .topic-block .career .ttl {font-size: 60px; font-weight: bold; line-height: 1.4; letter-spacing: 0.1em; text-align: center;}
#block-topic .topic-block .career .ttl span {color: #69913d;}
#block-topic .topic-block .career .lead {margin-top: 1em; font-size: 20px; font-weight: bold; line-height: 2.1; text-align: center;}
#block-topic .topic-block .career .map {margin-top: 70px; padding: 0 30px;}
#block-topic .topic-block .career .map.zoom {overflow-x: scroll;}
#block-topic .topic-block .career .map.zoom img {max-width: none;}
#block-topic .topic-point {position: relative; padding: 100px 0 120px; overflow: hidden; z-index: 1;}
#block-topic .topic-point::after {content: ""; position: absolute; bottom: 0; left: 50%; width: 1109px; height: 100%; transform: skewX(-25deg) translateX(-50%); background: #f1f1f1; z-index: -1;}
#block-topic .topic-point .point {max-width: 1280px; margin: auto;}
#block-topic .topic-point .point > li {display: flex; justify-content: space-between; align-items: flex-start;}
#block-topic .topic-point .point > li:nth-of-type(odd) {flex-direction: row-reverse;}
#block-topic .topic-point .point > li + li {margin-top: 70px;}
#block-topic .topic-point .point > li:nth-of-type(odd) .img::before {left: -60px;}
#block-topic .topic-point .point > li:nth-of-type(even) .img::before {right: -60px;}
#block-topic .topic-point .point > li .detail {width: calc(50% - 80px);}
#block-topic .topic-point .point > li .detail .num {position: relative; display: inline-block; padding: 0 12px; margin-bottom: 15px; color: #fff; font-size: 18px; letter-spacing: -0.02em; background-color: #231815;}
#block-topic .topic-point .point > li .detail .num::before {content: ""; position: absolute; left: 0; top: 0; width: 4px; height: 100%; background-color: #69913d;}
#block-topic .topic-point .point > li .detail h3 {position: relative; padding-bottom: 30px; margin-bottom: 20px; color: #69913d; font-size: 42px; font-weight: bold; line-height: 1.4; letter-spacing: 0.08em;}
#block-topic .topic-point .point > li .detail h3::after {content: ""; position: absolute; left: 0; bottom: 0; width: 50px; height: 6px; background-color: #231815;}
#block-topic .topic-point .point > li .detail .txt p {font-size: 20px; line-height: 2.1;}
#block-topic .topic-point .point > li .img {position: relative; width: 50%;}
#block-topic .topic-point .point > li .img::before {content: ""; position: absolute; bottom: -55px; width: 238px; height: 119px; background: url(/prof/recruit/archi/building_construction/img/feel/topics_point_back.png) left top / auto auto repeat; z-index: -1;}
#block-topic .topic-point .point > li:last-of-type .img::before {background-image: url(/prof/recruit/archi/building_construction/img/feel/topics_point_back_wt.png);}
@media screen and (max-width:1400px){
  #block-topic .topic-block .about::before {border-top: 200px solid #fff; border-right: 115px solid transparent;}
  #block-topic .topic-block .about::after {border-bottom: 200px solid #fff; border-left: 115px solid transparent;}
  #block-topic .topic-block#feelthink .about::after {border-bottom: 200px solid #f1f1f1;}
}

/* -------------------------------------------------- */
/* .block-banner */
/* -------------------------------------------------- */
.block-banner{text-align:center;padding:60px 0 120px;}


/* ======================================================================================================================= */
/* for SP */
/* ======================================================================================================================= */
@media screen and (min-width:1px) and (max-width:959px){
  /* -------------------------------------------------- */
  /* #block-mv */
  /* -------------------------------------------------- */
  #block-mv{border-bottom-width:25px;}
  #block-mv::after {content: none;}
  #block-mv .back{height:340px;transform:translateY(-50%);top:50%;}
  #block-mv .container{padding-bottom:60px;}
  #block-mv .ttl{font-size:36px; text-align: center;}
  #block-mv .sub{display: flex; justify-content: space-between; align-items: center;}
  #block-mv .sub img {width: 48%;}
  #block-mv .sub .ttl02 {margin-top: 0;}
  #block-mv .txt{font-size:18px;margin-top:10px;}
  #block-mv .inner::before{width:100px;height:90px;left:80%;top:45%;}
  #block-mv .inner::after{width:150px;height:140px;left:50%;}


  /* -------------------------------------------------- */
  /* #block-topic */
  /* -------------------------------------------------- */
  #block-topic {background-size: auto auto; background-position: center top;}
  #block-topic .topic-top::before {background-size:682px auto;top:-55px;}
  #block-topic .topic-top p {padding-top: 0; font-size: 18px;}
  #block-topic .topic-top p span {font-size: 40px;}
  #block-topic .topic-pagelink {display: block; margin: 0 40px 60px;}
  #block-topic .topic-pagelink > li {width: 100%;}
  #block-topic .topic-pagelink > li + li {margin-left: 0; margin-top: 30px;}
  #block-topic .topic-pagelink > li a .detail .sub {font-size: 18px;}
  #block-topic .topic-pagelink > li a .detail .ttl {font-size: 30px;}
  #block-topic .topic-pagelink > li a .detail .ttl span {font-size: 36px;}
  #block-topic .topic-pagelink > li a .more {bottom: 15px; font-size: 14px;}
  #block-topic .topic-block .about::before {border-top: 100px solid #fff; border-right: 90px solid transparent;}
  #block-topic .topic-block .about::after {border-bottom: 100px solid #fff; border-left: 90px solid transparent;}
  #block-topic .topic-block#feelthink .about::after {border-bottom: 100px solid #f1f1f1;}
  #block-topic .topic-block .about {display: block;}
  #block-topic .topic-block .about .detail {width: 100%;}
  #block-topic .topic-block .about .main {width: 100%;}
  #block-topic .topic-block .about .main .img {height: 0; padding-top: 100%;}
  #block-topic .topic-block .about .detail .inner {padding: 40px 20px;}
  #block-topic .topic-block .about .detail .inner h2 {font-size: 36px;}
  #block-topic .topic-block .about .detail .inner h2 small {font-size: 30px;}
  #block-topic .topic-block .about .detail .inner h2 span {font-size: 50px;}
  #block-topic .topic-block .about .detail .inner p {font-size: 14px;}
  #block-topic .topic-block .career {padding: 60px 20px 40px;}
  #block-topic .topic-block .career .sub {font-size: 80px;}
  #block-topic .topic-block .career .ttl {font-size: 40px;}
  #block-topic .topic-block .career .lead {font-size: 16px;}
  #block-topic .topic-block .career .map {margin-top: 30px; padding: 0; overflow-x: scroll;}
  #block-topic .topic-block .career .map .scroll-hint-icon {top: 20px;}
  #block-topic .topic-block .career .map img {max-width: none;}
  #block-topic .topic-point {padding: 50px 0 60px;}
  #block-topic .topic-point .point {margin: 0 20px;}
  #block-topic .topic-point .point > li {display: block;}
  #block-topic .topic-point .point > li .detail {width: 100%;}
  #block-topic .topic-point .point > li .detail h3 {font-size: 30px;}
  #block-topic .topic-point .point > li .detail .txt p {font-size: 16px;}
  #block-topic .topic-point .point > li .img {width: 100%; margin-top: 20px;}
  #block-topic .topic-point .point > li .img::before {background-image: url(/prof/recruit/archi/building_construction/img/feel/topics_point_back_wt.png);}

  /* -------------------------------------------------- */
  /* .block-banner */
  /* -------------------------------------------------- */
  .block-banner {padding-bottom: 0;}
}
/* ----------------------------------- */
@media screen and (min-width:1px) and (max-width:699px){
  #block-mv{padding-top:260px;}
  #block-mv .back{height:280px;top:0;transform:none;}

}

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

}