@charset "UTF-8";
/* CSS Document */
header { position: relative; width: 100%; height: 100vh; overflow: hidden; }

h2 { text-align: center; }

/*========= メインイメージのCSS ===============*/
#news { position: absolute; bottom: 5%; left: 0; right: 0; background: #fff; z-index: 50; box-sizing: border-box; padding: 10px 15px 10px 2em; border-radius: 50px; display: flex; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); max-width: 1100px; margin: 0 auto; }
#news .btn_list { background: #C7D882; width: 50px; height: 50px; display: block; border-radius: 50%; line-height: 50px; text-align: center; color: #162A41; font-size: 90%; font-weight: 700; }
#news .btn_list:hover { background: #162A41; color: #fff; }
#news .ticker { margin: 12px auto; text-align: left; position: relative; overflow: hidden; background-color: #ffffff; width: calc(100% - 50px); }
#news .ticker ul { width: 100%; position: relative; }
#news .ticker ul li { width: 100%; display: none; font-size: 105%; }
#news .ticker a { color: #707070; text-decoration: underline; }
#news .newMark { display: inline-block; padding: 3px 1em; font-size: 90%; font-weight: 700; line-height: 100%; background: #C7D882; color: #162A41; border-radius: 20px; margin-right: 0.5em; }

#newsList li.cat-4 .catName { background: rgba(221, 114, 14, 0.3); }
#newsList li.cat-5 .catName { background: rgba(46, 143, 255, 0.3); }
#newsList li .catName { font-size: 0.8em; display: inline-block; padding: 0 0.5em; margin-right: 0.5em; }

.top_text { position: absolute; bottom: 155px; left: 20px; color: #fff; font-size: 280%; font-weight: 500; line-height: 1.1em; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35); }

.top_tel { position: absolute; right: 100px; top: 20px; color: #fff; text-shadow: 0 2px 3px rgba(0, 0, 0, 0.35); }
.top_tel strong { font-size: 200%; vertical-align: -0.1em; margin-right: 0.3em; letter-spacing: 0.05em; }
.top_tel strong::before { content: "TEL"; font-size: 70%; margin-right: 0.3em; }

@media screen and (max-width: 450px) { #news { bottom: 10%; height: 55px; /*PHP工房タグ取れたら削除*/ }
  #news .btn_list { width: 35px; height: 35px; line-height: 35px; }
  #news .ticker { margin: 7px auto 0; height: auto !important; }
  /*#newsList li .up_ymd { 	width: 8em; 	float: left; 	display: block; }*/ }
/*========= 施工実績のCSS ===============*/
#works { background: #F5EFE9; padding: 3em 0; }
#works__inner { padding: 0 100px 0 1em; display: flex; max-width: 1600px; margin: 0 auto; }
@media only screen and (max-width: 450px) { #works__inner { padding: 0 1em; } }
#works__inner h2 { margin-right: clamp(1em, 5vw, 5em); }
@inxlude xxs { #works__inner h2 { margin-right: 1em; } }
#works__inner h2 a img { padding-bottom: 10px; }
#works__inner h2 a .cssbtnC { margin-top: 0; transition: 0.3s; }
#works__inner h2 a:hover img { opacity: 1; }
#works__inner h2 a:hover .cssbtnC { background: #162A41; color: #fff; }
#works__inner .works_list { display: flex; }
@media only screen and (max-width: 450px) { #works__inner .works_list { display: block; } }
#works__inner .works_list li { margin-right: 2em; margin-bottom: 1em; box-sizing: border-box; width: calc(100% / 3); }
@media only screen and (max-width: 450px) { #works__inner .works_list li { width: 100%; margin-right: 1em; margin-bottom: 2em; } }
#works__inner .works_list li:last-child { margin-right: 1em; }
#works__inner .works_list figure { margin-bottom: 15px; position: relative; }
#works__inner .works_list figure::after { content: "→"; background: #C7D882; display: block; position: absolute; right: 20px; bottom: -20px; width: 50px; height: 50px; border-radius: 50%; text-align: center; line-height: 50px; color: #162A41; }
@media only screen and (max-width: 450px) { #works__inner .works_list figure::after { width: 35px; height: 35px; line-height: 35px; } }
#works__inner .works_list figure.noLink::after { content: none; }
#works__inner .works_list p { color: #707070; margin-bottom: 0.3em; }
#works__inner .works_list .new::before { content: "New"; background: #90A7B0; padding: 0 1em 2px; margin-right: 10px; color: #fff; font-weight: 700; font-size: 95%; }
#works__inner .works_list .type::before { content: "タイプ："; }
#works__inner .works_list .comment { font-size: 85%; }
#works__more { max-width: 1600px; margin: 0 auto; padding-right: 100px; }
@media only screen and (max-width: 450px) { #works__more { padding-right: 0; } }
#works__more p { margin-right: 1em; text-align: right; font-weight: bold; }
#works__more p a { display: inline-block; background: #C7D982; color: #162A41; padding: 0.5em 1.5em 0.5em 2em; border-radius: 4em; }
#works__more p a:hover { background: #162A41; color: #fff; }
#works__more p a:hover span.arrow { background-color: #fff; }
#works__more p a:hover span.arrow::before { background-color: #fff; }
#works__more p a span.arrow { position: relative; display: inline-block; width: 2em; height: 1px; margin-top: 1em; border-radius: 9999px; background-color: #162A41; margin-left: 1em; transition: 0.3s; }
#works__more p a span.arrow::before { content: ""; position: absolute; top: calc(50% - 2px); right: 0; width: 0.5em; height: 1px; border-radius: 9999px; background-color: #162A41; transform: rotate(45deg); transform-origin: calc(100% - 2px) 50%; transition: 0.3s; }

/*========= コンセプトのCSS ===============*/
#concept { background: #F5EFE9; padding: 3em 0 3em 0; }

#concept .concept_img { display: flex; }

.concept_img h2 { padding: 0 80px 0 0; width: 25%; flex-grow: 1; }

.concept_img figure { width: 75%; flex-grow: 2; }

.concept_img figcaption { color: #162A41; line-height: 1.4em; padding: 1.5em 0 3em 2em; }

.concept_list { display: flex; flex-wrap: wrap; }

.concept_list li { width: calc((100% - 60px) / 4); margin-right: 20px; }

.concept_list li:last-child { margin-right: 0; }

.concept_list li:nth-of-type(even) { margin-top: 25px; }

.concept_list li h4 { font-size: 200%; font-weight: 700; padding: 20px 0 20px 1.9em; letter-spacing: 0.1em; color: #162A41; }

.concept_list li:nth-of-type(1) h4 { background: url("../img/01.svg") no-repeat 10px 10px; background-size: auto 1.5em; }

.concept_list li:nth-of-type(2) h4 { background: url("../img/02.svg") no-repeat 10px 10px; background-size: auto 1.4em; }

.concept_list li:nth-of-type(3) h4 { background: url("../img/03.svg") no-repeat 10px 10px; background-size: auto 1.4em; }

.concept_list li:nth-of-type(4) h4 { background: url("../img/04.svg") no-repeat 10px 10px; background-size: auto 1.4em; }

.concept_list li a p { position: relative; padding: 0 60px 0 10px; color: #162A41; font-size: 90%; }

.concept_list li a p:after { content: "→"; background: #C7D882; width: 50px; height: 50px; line-height: 50px; border-radius: 50%; display: block; text-align: center; position: absolute; right: 0; top: 0; }

.concept_list li a:hover p:after { background: #162A41; color: #fff; }

.concept_list li a:hover img { opacity: 0.75; }

@media screen and (max-width: 780px) { .concept_img h2 { padding: 0; }
  .concept_list li { width: calc((100% - 20px) / 2); }
  .concept_list li:nth-of-type(even) { margin-right: 0; }
  .concept_list li a p { padding-right: 40px; }
  .concept_list li a p:after { width: 35px; height: 35px; line-height: 35px; } }
/*========= ラインナップのCSS ===============*/
#plan { padding: 3em 0 1em 2em; display: flex; }

#plan h2 { width: 25%; margin-right: 5%; flex-grow: 1; }

#plan .plan_list { width: 75%; flex-grow: 2; display: flex; justify-content: flex-end; flex-wrap: wrap; }

#plan .plan_list li { width: calc((100% - 25px) / 2); margin-right: 25px; margin-bottom: 3em; }

#plan .plan_list li:nth-of-type(even) { margin-right: 0; }

#plan .plan_list li figure { margin-bottom: 1em; }

#plan .plan_list li p { position: relative; padding-right: 60px; }

#plan .plan_list a { color: #162A41; }

#plan .plan_list li:nth-of-type(1) strong { color: #A667DA; font-size: 105%; margin-bottom: 10px; display: block; }

#plan .plan_list li:nth-of-type(1) p:after { background: #A667DA; }

#plan .plan_list li:nth-of-type(2) strong { color: #E2271B; font-size: 105%; margin-bottom: 10px; display: block; }

#plan .plan_list li:nth-of-type(2) p:after { background: #E2271B; }

#plan .plan_list li:nth-of-type(3) strong { color: #EB5420; font-size: 105%; margin-bottom: 10px; display: block; }

#plan .plan_list li:nth-of-type(3) p:after { background: #EB5420; }

#plan .plan_list li:nth-of-type(4) strong { color: #6EC8E2; font-size: 105%; margin-bottom: 10px; display: block; }

#plan .plan_list li:nth-of-type(4) p:after { background: #6EC8E2; }

#plan .plan_list li p:after { content: "→"; position: absolute; top: 0; right: 0; width: 50px; height: 50px; display: block; border-radius: 50%; line-height: 50px; color: #fff; text-align: center; }

#plan .plan_list a:hover p:after { background: #162A41; }

@media screen and (max-width: 450px) { #plan { padding: 2em 1em; }
  #plan h2 { width: 20%; }
  #plan .plan_list { display: block; }
  #plan .plan_list li { width: 100%; margin-right: 0; }
  #plan .plan_list li p { padding-right: 40px; }
  #plan .plan_list li p:after { width: 35px; height: 35px; line-height: 35px; } }
/*========= スタッフのCSS ===============*/
#staff { margin-top: 5em; }

/*========= 会社情報のCSS ===============*/
#info { position: relative; }

#info .info_inner { position: absolute; top: 7%; left: 2%; background: rgba(255, 255, 255, 0.7); padding: 1em; box-sizing: border-box; max-width: 340px; color: #162A41; font-weight: 500; letter-spacing: 0.05em; }

#info .info_inner figure { margin-bottom: 1em; }

#map { width: 100%; height: 650px; overflow: hidden; }

#map iframe { width: 100%; height: 880px; margin-top: -170px; }

@media screen and (max-width: 450px) { #info { padding-bottom: 500px; }
  #info .info_inner { position: absolute; top: 400px; left: 0; right: 0; margin: 0 auto; width: 100%; }
  #map { height: 400px; }
  #map iframe { height: 720px; } }
footer { margin-top: -150px; }