/* @import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap'); */

@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,opsz,wght@0,18..144,300..900;1,18..144,300..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Tangerine:wght@400;700&display=swap');
*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role='list'],ol[role='list']{list-style:none}body{min-height:100vh;line-height:1.5}h1,h2,h3,h4,button,input,label{line-height:1.1}h1,h2,h3,h4{text-wrap:balance}a:not([class]){text-decoration-skip-ink:auto;color:currentColor}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}textarea:not([rows]){min-height:10em}:target{scroll-margin-block:5ex}
#main, h1,h2,h3,h4, b, i{font-style: normal;font-weight: normal;}
#main{font-size: 18px;}
ul, li{list-style: none;padding: 0;margin: 0;}

.txt_shadow{text-shadow: 3px 4px 3px rgb(61 70 70);}
.shadow{  box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);}
.flex{display: flex;}
.flex_colum{display: flex; flex-direction: column;}
.space_bet{display: flex;justify-content: space-between;}
.flex_wrap{flex-wrap: wrap;}

.blue_txt{color: #0e54a5;}
.eco_color{color: #007940;}
.design_inner.m_top_40{margin: 40px auto 0 auto;}
.design_inner.m_top_100{margin: 100px auto 0 auto;}

.design_inner.m_btm_100{margin: 100px auto 200px auto;}
.design_inner.p_btm_100{padding: 100px 0 200px 0;}
@media (max-width: 767px) {.design_inner.p_btm_100{padding: 20px 0 50px 0;}
.design_inner.p_top_40{padding: 40px 0 0 0;}
.design_inner.p_top_100{padding: 100px 0 0 0;}

}

.txt_center{text-align: center;}
.u_bar{border-bottom: 1px solid #000; padding-bottom: 15px;}
.no-pc, .sp_only{display: none;}
.serif{ font-family: "Noto Serif JP", serif;;font-optical-sizing: auto;font-style: normal;font-variation-settings:"wdth" 100%;}
.merriweather{font-family: "Merriweather", serif;}
.tangerine{  font-family: "Tangerine", cursive;}
.margin_btm_50{margin-bottom: 50px;}
.to_link_black a{ background:url('../img/to_black.svg') no-repeat right center ,#fff;background-size:10%}
.to_link_blue a{ background:url('../img/to_blue.svg') no-repeat right center ,#fff;background-size:10%}
.to_link_white a{ background:url('../img/to_white.svg') no-repeat right center ,#fff;background-size:10%}


#main{  font-family: "Open Sans", sans-serif;font-optical-sizing: auto;font-style: normal;  position: relative; }
.attempt_main{width: 90%; }
#business, .design_inner{width: 90%;}
@media (max-width: 1300px) {.attempt_main{width: 98%; }}
@media (max-width: 1000px) {.attempt_main{width: 90%; }}


/* ====================================================================================================================================================== */
/* indesx */
/* ====================================================================================================================================================== */

/* トップイメージ========================================================================================================================================= */
.hero {background: url('../img/main_back_new.jpg') center/cover no-repeat;height: 100vh;display: flex;align-items: center;justify-content: center;color: #fff;position: relative;}

@media (min-width: 1200px) {.hero {background: url('../img/main_back_new@2x.jpg')center/cover no-repeat;}}
@media (min-width: 1500px) {.hero {background: url('../img/main_back_new@3x.jpg')center/cover no-repeat;}}

.hero::before, .hero::after {  content: "";position: absolute;inset: 0;background: rgba(255,255,255,0.8);}
.hero::after {position:fixed;clip-path: polygon(0 0, 55% 0%, 0 15%); z-index: 0;}
.hero::before {bottom: 0px;clip-path: polygon(100% 85%, 50% 100%, 100% 100%); z-index: 1;}
.hero .main_copy{font-family: "Open Sans", sans-serif;font-optical-sizing: auto;font-style: normal;font-variation-settings:"wdth" 100%;}
.main_404_copy{ font-family: "Noto Serif JP", serif;;font-optical-sizing: auto;font-style: normal;font-variation-settings:"wdth" 100%; letter-spacing: 0.2em;font-weight: 800;text-align: center;padding: 20px 0 0 0;}


.hero-content { flex-direction: column;display: flex;}
.hero-content h1 img{filter: drop-shadow(5px 5px 5px  rgba(35, 24, 21, 0.8));}
.hero-content p img{filter: drop-shadow(2px 2px 3px  rgba(0,0, 0, 0.9));}
/*その他ページ用*/
.hero_other {background: url('../img/other_back.jpg') center/cover no-repeat;height: 50vh;display: flex;align-items: center;justify-content: center;color: #fff;position: relative; margin-bottom: 180px;}

@media (min-width: 1200px) {.hero_other {background: url('../img/other_back@2x.jpg')center/cover no-repeat;}}
@media (min-width: 1500px) {.hero_other {background: url('../img/other_back@3x.jpg')center/cover no-repeat;}}

.hero_other::before, .hero_other::after {  content: "";position: absolute;inset: 0;background: rgba(255,255,255,0.8);}
.hero_other::after {clip-path: polygon(0 0, 55% 0%, 0 25%); z-index: 0; top: 0;}
.hero_other::before {bottom: -1px;clip-path: polygon(100% 85%, 50% 100%, 100% 100%); z-index: 1;}
.hero_other .main_copy{ font-family: "Noto Serif JP", serif;;font-optical-sizing: auto;font-style: normal;font-variation-settings:"wdth" 100%; font-size: 5vw;letter-spacing: 0.2em;font-weight: 800;}
.hero_other .main_copy + p{text-align: center;padding-top: 10px;}
.hero_other .hero-content { flex-direction: column;display: flex;justify-content: center;}


@media (max-width: 767px) {
.hero {background: url('../img/main_back_new@0.5x.jpg') center/cover no-repeat;height: 100vh;display: flex;align-items: center;justify-content: center;color: #fff;position: relative;}
.hero::after {clip-path: polygon(0 0, 100% 0%, 0 13%); position: absolute; }
.hero::before {bottom: 0px;clip-path: polygon(100% 87%, 00% 100%, 100% 100%);}
.hero-content {padding: 0 10px;}
.hero_other {background: url('../img/other_back@0.5x.jpg') center/cover no-repeat;}
.hero_other::after {clip-path: polygon(0 0, 85% 0%, 0 30%); z-index: 0; top: 0;}
.hero_other {height: 350px;margin-bottom: 0;}
}


@media (max-width: 500px){
.hero {background: url('../img/main_back_sp.jpg') center/cover no-repeat;}
.hero::after {clip-path: polygon(0 0, 100% 0%, 0 13%); clip-path: polygon(0 0, 100% 0, 100% 1%, 0 10%);position: absolute; }
.hero-content { flex-direction: column;display: flex; margin-top: -70px;}

.hero_other {height: 200px;margin-bottom: 50px;}
.hero_other::after {clip-path: polygon(0 0, 100% 0, 100% 1%, 0 40%);z-index: 0; top: 0;}
.hero_other .hero-content { flex-direction: column;display: flex;justify-content: center; align-items: center;margin-top: 0px;}
.hero_other .main_copy{ font-size: 7vw;padding-top: 20px;}
}



/* トップニュー========================================================================================================================================= */
.menu{position:fixed;top:0;left:0;width:100%;;display:flex;justify-content: space-between;align-items: flex-start;;z-index: 100;}
.menu h2{padding: 20px;   font-weight: 600;}
.logo a{font-weight: 600;display: flex;align-items: center;font-style: none; text-decoration: none; font-size: 1.6vw;}
.logo img{width: 40px; margin-right: 10px;}

.menu ul{display:flex;align-items: center;padding:20px 0 0px 0px ;justify-content: flex-end;}
.menu ul li {margin: 0 20px;}
.to-recruit a{display: block;padding: 5px 50px 5px 20px;background:url('../img/to_white.svg') no-repeat right center ,#40220f;background-size:20%;border:1px solid #c9a063}
.menu ul a{text-decoration: none;color: #fff;}


/* スクロールで表示 */
.container{position: sticky;top: 0;container-type: scroll-state;}

#cookie-banner {position: fixed; bottom: 0;left: 0;right: 0;background: rgba(22, 22, 22, 0.8);color: #fff;padding: 20px;text-align: center;font-size: 14px;z-index: 1000;}
.cookie-banner a {color: #4eaaff; text-decoration: underline;}
.cookie-buttons {margin-top: 10px;}
.cookie-buttons button { margin: 0 10px;padding: 8px 12px;border: none;border-radius: 4px;cursor: pointer; }

@container scroll-state(stuck: top) {
.menu{background-color: rgba(255, 255, 255, 0.8); box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);}
.hero::after {position:relative;}
.menu ul a{color: #000;}
.menu ul .to-recruit a{color:#fff}
}


/* 和工電気の取組=================================================================================================================================== */
/* タイトル */
#attempt{ background: url('../img/attempt_title.png') no-repeat;background-size: contain; }
@media (max-width: 1600px) {#attempt{ background: url('../img/attempt_title@2x.png') no-repeat;background-size: contain; }}
@media (max-width: 2600px) {#attempt{ background: url('../img/attempt_title@3x.png') no-repeat;background-size: contain; }}


.attempt_title{padding: 20px;display:flex;align-items:baseline;line-height: 1em;;} 
.attempt_title h3{display:flex;flex-direction: column;}
.attempt_title h3 b{ font-size:14px;font-size:2vw;display: flex;justify-content: space-between; margin-top: 5px;}
.attempt_title h3, .attempt_title h3 + p {color:#fff; font-size: 5vw; /* font-size: 500%;; */}

.attempt_main{margin: 150px auto;justify-content: center;}

.new_area{flex-basis: 30%;}
.new_area.flex{flex-wrap: wrap;justify-content: space-between;}
.new_area .new{width: 100%;background:#fff;padding: 10px; position:relative;display:flex;flex-direction:column;margin-bottom: 50px ;}
.new_area .new dd img{  aspect-ratio: 16 / 10;width: 100%;object-fit: cover;height: auto;}

.new_area .new_mark::after{ content: "";position: absolute;inset: 0; top:-10px; left:10px;background: url('../img/new.png') no-repeat ; pointer-events: none;}
.new_area .new dd{order:1;}
.new_area .new dt{order:2;}

/* 3個表示させる場合ここを表示する */
.new_area.three .new:nth-of-type(3), .new_area.three .new:nth-of-type(2){width: 48%;}
.new_area.three .new:nth-of-type(3) dd img, .new_area.three .new:nth-of-type(2) dd img{aspect-ratio: 3 /3;}
/* .new_area .new:nth-of-type(3), .new_area .new:nth-of-type(2){width: 48%;}
.new_area .new:nth-of-type(3) dd img, .new_area .new:nth-of-type(2) dd img{aspect-ratio: 3 /3;} */

.to_new_page{width: 100%;}
.to_new_page a{padding: 5px 30px ; border: 1px solid #0e54a5;display: flex;align-items: center; text-decoration: none;border-radius: 18px 0px 17px 0px;color: #0e54a5;width: 100%;  justify-content: center;}
.to_new_page a:hover{background: #0e54a5; color: #fff;}


.attempt-business__bnr{ flex-basis:70%;}
.attempt-business__bnr{padding: 00px 0 0 50px;}
.attempt-business__bnr a img{margin: 0px 0 30px 0;width: 100%;}

@media (max-width: 1000px) {
.attempt_main .flex:nth-of-type(1){flex-direction: column;}

.new_area .new:nth-of-type(3), .new_area .new:nth-of-type(2){width: 100%;}
.new_area .new:nth-of-type(3) dd img, .new_area .new:nth-of-type(2) dd img{aspect-ratio: 16 /9;}

.to_new_page{margin: 0 0 50px 0;}

.attempt-business__bnr{ flex-basis:100%;}
.attempt-business__bnr{padding: 00px 0 0 00px;}

}



/* 3つのテキストでの紹介 */
.kintou{padding: 50px 0 0 0;}
.attempt_txt_area{flex-basis: 23%;}
.attempt_txt_area.sdgs{flex-basis: 48%; padding-bottom: 50px; }
.sdgs .flex{align-items: center;}

@media (max-width: 1500px) {
.attempt_txt_area{flex-basis: 49%;}
.attempt_txt_area.sdgs{flex-basis: 100%; padding-bottom: 50px; }
.sdgs .flex{align-items: center;}}




.attempt_txt_area.sdgs dt{font-size: 140%;}
.attempt_txt_area.sdgs dt:nth-of-type(2){padding-top: 20px;}
.attempt_txt_area.sdgs dd:nth-of-type(2) img{width:160px ;padding-right: 30px;}
/* .attempt_txt_area.sdgs dd.flex{display: flex;} */
.attempt_txt_area h4{background: #fff;border: 1px solid #0e54a5;padding: 5px;position: relative; text-align: center;font-size: 130%;;}
.attempt_txt_area h4::after {border: 1px solid #0e54a5;content: "";position: absolute;inset: 0;top: 6px;left: 6px;  width: 100%;height: 100%;z-index: -1;}
.attempt_txt_area dl{padding:20px 0 0 0  ;}
/* .attempt_txt_area dl + img{object-fit: contain;} */
.attempt_txt_area.sdgs picture{  object-fit: contain; padding: 5px 40px 0 0 ;width:350px ;flex-shrink: 0;display: block;}

@media (max-width: 767px) {.attempt_title{padding: 10px;}
#attempt{ background: url('../img/attempt_title_mobile.png') no-repeat;}
.attempt_title h3 b{ /*font-size:12px;*/margin-top: 3px;font-size: 3vw;}
.attempt_title h3, .attempt_title h3 + p {font-size: 8vw;;}
.attempt_main{margin: 30px auto;}
.new_area{flex-basis:30%;}
.new_area .new{padding: 5px;}
.new_area .new dd{order:1;}
.new_area .new dt{order:2; }
.attempt_txt_area img{width: 100%;}
.attempt-business__bnr{ flex-basis:70%;}
.attempt-business__bnr{padding: 00px 0 0 0px;}
.attempt-business__bnr a img{margin: 0px 0 30px 0;}
.attempt_txt_area{flex-basis: 45%;}
.sdgs .flex{align-items: center; flex-direction: column; display: flex;}
 .attempt_txt_area.sdgs dd.flex{flex-direction:row;}
.sdgs .flex dl{order:0;}
.sdgs .flex picture{order:12;}
.attempt_txt_area img{object-fit: contain;padding: 20px 00px 0 0 ;}}



/* コーナータイトル部=================================================================================================================================== */
.corner_title dd{ font-size: 190%;font-size: 2.2vw;line-height: 1.2em;}
.corner_title dt h2{font-size:540%;font-size: 6.3vw;line-height: 1.2em; white-space: nowrap;}
.corner_title dt{align-items: center;}
@media (max-width: 767px) {/
.corner_title dd{ font-size: 120%;}
.corner_title dt h2{font-size:300%;; text-align: left; align-self: flex-start;}
.corner_title .flex{flex-direction: column;}
}
/* 事紹介介=================================================================================================================================== */
#business{clip-path: polygon(0 10%, 100% 0%, 100% 90%, 0% 100%);margin: 0 auto 100px auto;padding:450px 90px 300px 90px;
background: url("../img/business_back_1.png") right 100px no-repeat ,url("../img/business_back_2.png") left 95% no-repeat,#f0f3f8 }
@media (max-width: 1300px) {#business{padding:350px 90px 300px 90px;}}
@media (max-width: 1000px) {#business{padding:250px 20px 100px 20px;}}


#business .corner_title{color: #0e54a5;margin-bottom: 60px; }
#business .corner_title dt{justify-content: flex-start;}
#business .corner_title dt p{padding:00px 0 0 100px; color: #000;}
@media (max-width: 1200px) {#business .corner_title dt p{padding:00px 0 0 50px; color: #000;}}




.business_to{flex-basis: 23.5%; display: flex; flex-direction: column;}
.business_to dt{ background: #0e54a5;display: block;text-align: center; color: #fff;padding: 3px 0;font-size: 90%;font-size: 1.5vw}
.business_to dt a{text-decoration: none;}
.business_to dd img{aspect-ratio: 30 / 22;width: 100%;object-fit: cover;height: auto;}
.business_to dd{order:1;}
.business_to dt{order:2;}
@media (max-width: 767px) {/* 事紹介介=================================================================================================================================== */
#business{clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);padding:80px 10px 60px 10px;background-size:20%;}
#business .corner_title{margin-bottom: 20px; }
#business .corner_title dt p{padding:00px 0 0 0px; color: #000;}
}

/* 施工事例=================================================================================================================================== */
.construction_results{background: #fff;clip-path: polygon(5% 0%, 100% 0, 100% 5%, 100% 95%, 95% 100%, 0 100%, 0% 95%, 0% 5%);padding:100px 50px 50px 50px;margin: 0 auto 100px auto;}
.construction_results h3, .construction_results p{text-align: center;padding-bottom: 30px;}
.construction_results h3{font-size: 210%;}
.construction_results_photo{padding-bottom: 30px;}
.construction_results_photo li{flex-basis: 23%; padding-bottom: 2%;}
.construction_results_photo li img{aspect-ratio: 1 / 1;width: 100%;object-fit: cover;height: auto;}
.construction_results_photo + p a{width: 50%; padding:10px ;display: inline-block;border: 1px solid #0e54a5; color: #0e54a5;}
#business .space_bet{ flex-wrap: wrap;}

/* 会社概要部=================================================================================================================================== */
#company .design__txt{background: rgba(0,0,0,0.6);}
.design_inner{margin: 0 auto; display: flex;}
.design_inner_company{margin: 0 auto; display: flex; flex-direction: column;}
.design_inner .corner_title{ color: #000;/*padding-left: 10%;*/margin-bottom: 80px;text-align: left;}
.design__harf{flex-basis: 70%; }

.design__txt{background: rgba(14,84,165,0.8);/*margin-left: 10%;*/padding:80px 120px 20px 80px ; color: #fff;}
.design__txt ul{margin: 50px auto 40px auto;}
.design__txt li{margin: 40px auto;}
.design__txt li a{ border: 1px solid 000; color: #000;width: 80%;display: inline-block;text-align: center;padding: 10px;}
.design__photo{ flex-basis: 50%;margin-left: -60px;margin-right: 0px;}



/* 写真と背景パターン=================================================================================================================================== */
.right .design__photo{ margin: 0px;margin-right: -60px;z-index: 1;;}
.design__photo img{width: 100%;}
.right .corner_title{ color: #000;/*padding-left: 10%;*/margin-bottom: 80px; text-align: right;}
.right .corner_title dt h2{text-align: right;width: 100%;}
.right .design__txt{margin-left: -0px;padding:80px 80px 20px 160px ;}
.design_inner.right{flex-direction: row-reverse;}

/* スライドショー================================================================================================================================== */

/* スライドレールの枠 */
/* .slide_wrap { overflow: hidden;width: 100%;  display: flex;  align-items: center;  height: 280px; margin-top: -100px;z-index: -100; margin-bottom: 60px;}
.slide_wrap .content { width: 400px;height: 280px;display: block; }
.slide_wrap .content img{aspect-ratio:40 / 28;width: 100%; height: auto;} */

/* content4つをまとめたスライドブロック */
/* .slideshow::after{content: "";position: absolute;inset: 0;background: rgba(195,195,195,0.6);}/

@-webkit-keyframes loop-slide {from {transform: translateX(0);}to {transform: translateX(-100%);}}
@keyframes loop-slide {from {transform: translateX(0);}to {transform: translateX(-100%);}}
@keyframes loop {0% {transform: translateX(100%);} to {transform: translateX(-100%);}}
@keyframes loop2 { 0% {transform: translateX(0);} to {transform: translateX(-200%);}}
.slide_wrap .slideshow{display: flex;}
.slide_wrap .slideshow:first-child {animation: loop 80s -40s linear infinite;}
.slide_wrap .slideshow:last-child {animation: loop2 80s linear infinite;} */


/* スライドショー2================================================================================================================================== */

/* スライダー全体 */
.slide_wrap { overflow: hidden;width: 100%;  display: flex;  align-items: center;  height: 280px; margin-top: -100px;z-index: -100; margin-bottom: 60px;}
.slider::after{content: "";position: absolute;inset: 0;background: rgba(195,195,195,0.6);}/*スライドレールの墨網*/

.slider {  animation: scroll-left 20s infinite linear .5s both;  display: flex; }
.slider li { aspect-ratio:4 / 3;display: block; object-fit: over;   width: calc(100vw / 4); }
.slider li img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {.slider li {  width: calc(100vw / 2); }}
@keyframes scroll-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

.slide_wrap:hover .slider{
  animation-play-state: paused;
}

/* リクルートボタン=================================================================================================================================== */
.recruit_area{display: flex;background: url(../img/recruit_back.png) top right no-repeat;width: 1300px;margin: 50px auto 100px auto;position: relative;transform: scale(1);}
.recruit_area dl{  background-image: linear-gradient(90deg, rgba(174, 137, 39, 1), rgba(202, 175, 107, 1)); color: #fff;clip-path: polygon(0 0, 100% 0, 72% 100%, 0% 100%);height: 260px;width: 480px;padding: 20px;}
.recruit_area .corner_title dd{ font-size: 190%;line-height: 1.2em;}
.recruit_area .corner_title dt h2{font-size:440%;line-height: 1.2em; white-space: nowrap;}
.recruit_back{display: flex;justify-content: center;align-items: center;}
.recruit_back a{width: 100%;height: 100%;display: flex;justify-content: center;align-items: center}
.recruit_area .to-recruit{  width: 8em;margin-top: 40px;}
#recruit{margin-top: 200px;}
#recruit a{text-decoration: none;}
#recruit .to-recruit {display: block;padding: 5px 50px 5px 20px;background:url('../img/to_white.svg') no-repeat right center ,#40220f;background-size:20%;border:1px solid #c9a063}
#main .recruit_recruit{position: absolute;right: 0;top:-10px;color:rgba(202, 175, 107, .5);line-height: 0;font-size: 500%;font-family: "Merriweather", serif;font-optical-sizing: auto;font-weight: 400;font-style: normal;font-variation-settings:"wdth" 100;}

@media (max-width: 1400px) {.recruit_area{transform: scale(0.9);width: 100%;}}
@media (max-width: 1200px) {.recruit_area{transform: scale(0.8);margin: 50px auto;width: 100%;}}
@media (max-width: 767px) {#recruit{margin-top: 100px;}
.recruit_area{  transform: scale(0.9);  margin: 50px auto;width: 100%;}
.recruit_area dl{padding:10px;clip-path: polygon(0 0, 100% 0, 90% 100%, 0% 100%);width: 250px;}
.recruit_area .corner_title dd{ font-size: 100%;}
.recruit_area .corner_title dt h2{font-size:250%;}
#main .recruit_recruit{font-size: 300%;}
#recruit .recruit_area .to-recruit { margin-top: 40px;padding:10px ;}
#recruit .recruit_area a .to-recruit{font-size: 18px;}}
@media (max-width: 430px) {.recruit_area dl{width: 150px;}
.recruit_area .corner_title dt h2{font-size:150%;}
#main .recruit_recruit{font-size: 250%;}
#recruit .recruit_area .to-recruit { margin-top: 60px;padding:10px ;}
#recruit .recruit_area a .to-recruit{font-size: 14px;}}


/* フッター=================================================================================================================================== */
#fotter{background: #efefef;margin: 50px 0 0 0 ;padding: 100px;width: 100%;}
#fotter .logo a{font-size: 1.3vw;}
#fotter .logo_area{width: 380px;}
#fotter .logo_area dt{margin-bottom: 30px;white-space: nowrap;}
#fotter .logo_area dd:nth-of-type(2){margin-top: 50px; color: #999999;font-size: 90%;}
.to_link{justify-content: flex-end;}

#fotter .fotter_link{margin: 0 30px;}
#fotter .fotter_link dt{margin: 0 0 30px 0;}
#fotter .fotter_link dd{margin: 10px 0;;}
#fotter.space_bet a{width: 100%;}
#fotter + .copyright{ text-align: center; margin:10px 0 ;}

.fotter_link dd a::before{content: ">";}
@media (max-width: 1400px) {#fotter{padding: 30px;}
@media (max-width: 1200px) {#fotter{padding: 10px;}
#fotter .logo_area{width: auto}
#fotter .fotter_link{margin: 0 10px;}
#fotter .logo_area dd:nth-of-type(2){margin-top: 20px; margin-bottom: 30px; color: #999999;font-size: 90%;}}
}
/* スマホメニュー=================================================================================================================================== */
#mobile_menu{position: fixed;bottom: 0 ;width: 100%;background: rgba(255,255,255,0.9);align-items: center;display: flex;align-items: center; box-shadow: 0px 0px 10px 0px rgba(136, 136, 136, 1);padding:10px 15px;z-index: 102;}
#mobile_menu div{z-index: 30000;align-items: center;position: relative; color: #f000;width: 100%;}
#mobile_menu .logo{color: #000;}
#mobile_menu .logo img{width: 40px;}
#mobile_menu::before{clip-path: polygon(0 0, 43% 0, 78% 100%, 0% 100%);content: "";position: absolute;inset: 0;background: rgba(255,255,255,0.4);height: 100%;z-index: 10;}
#mobile_menu::after{clip-path: polygon(80% 0, 100% 0, 100% 100%, 50% 100%);content: "";position: absolute;inset: 0;background: rgba(255,255,255,0.4);height: 100%;z-index: 10;}
#mobile_menu, #mobile_menu::before, #mobile_menu::after{height:auto ; }
#mobile_menu{display: none;}

#mobile_menu .btn{display: flex;justify-content: flex-end;}
#mobile_menu .btn .material-symbols-outlined{ color: #9fa0a0;margin-right: 20px; }
#mobile_menu .btn .material-symbols-outlined a{text-decoration: none; display: block; border: 2px solid #c9caca;padding:8px ; border-radius: 10px;}


/* ハンバーガーメニューボタン */
.hamburger-menu {width: 44px;height: 44px;background: none;border: none;cursor: pointer;padding: 8px;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 7px;z-index: 1001;border: 2px solid #c9caca;border-radius: 10px;}
.hamburger-line {width: 100%;height: 4px;background-color: #9fa0a0;border-radius: 2px;transition: all 0.3s ease-in-out;}

/* アクティブ状態（Xアニメーション） */
.hamburger-menu.active .hamburger-line:nth-child(1) {  transform: rotate(45deg) translate(6px, 6px);}
.hamburger-menu.active .hamburger-line:nth-child(2) {  opacity: 0; color: #fff;}
.hamburger-menu.active .hamburger-line:nth-child(3) {transform: rotate(-45deg) translate(9px, -9px);}

/* スライドメニュー */
.slide-menu {display: none;position: fixed;top: 0;right: -900px;width: 100%;height: 100vh;background:rgba(255, 255, 255, 0.9) ;/* background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); */
transition: right 0.3s ease-in-out;z-index: 100;box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);overflow-y: auto;overflow-x: hidden;}

.slide-menu.active {right: 0;}
.menu-list {list-style: none;padding: 20px 0 0 0;margin: 0;}
.menu-list li {margin: 0;padding: 0;}
.menu-list a {display: block;padding: 15px 30px;color: #000;text-decoration: none;font-size: 18px;font-weight: 500;transition: background-color 0.3s ease;}
.menu-list a:hover {background-color: rgba(255, 255, 255, 0.1);}
.menu-list li .fotter_link dd a{padding: 5px 30px 5px 40px;}
.menu-list li.to-recruit a{width: 90%;margin: 30px auto;text-align: center; color: #fff;}
.menu-list li.to-recruit a:hover{background-color: rgba(64, 35, 14, 0.7);}

/* ====================================================================================================================================================== */
/* works */
/* ====================================================================================================================================================== */
#achievements_1 .slide_wrap{margin-bottom: 140px;}
#achievements_1 .design__txt{font-size: 150%;line-height: 1.9em;padding:80px 120px 20px 80px ;}
#achievements_1 .right .design__txt{font-size: 150%;line-height: 1.9em;padding:80px 80px 20px 120px ;}
#achievements_1 .corner_title .merriweather{color: #666;}
#achievements_1 .corner_title h2{font-size: 5vw;}

/* 実績 */
.info .hero_other { margin-bottom: 0px;}

#achievements_2{border-top: 26px solid #0e54a5;background: #f0f3f8; padding-bottom: 1px;}
.info #achievements_2{border: none;padding-top: 10px;}
#achievements_2 .corner_title{ color:#0e54a5 ;display: flex;flex-direction: column-reverse;margin:130px 0;}
#achievements_2 .achievements_area{width: 90%;margin: 90px auto 40px auto;}
#achievements_2 .achievements_area h3{ font-size: 3.5vw;margin-bottom: 0.5em;;}
#achievements_2 .achievements_area h3+p{font-size: 140%; margin-bottom: 60px;}

#achievements_2 .new_area{ display: flex;flex-wrap: wrap;justify-content: space-between;}
#achievements_2 .new_area .new{width: 48%;padding: 20px; margin:2% 0 ;}
#achievements_2 .new_area .new dd img{  aspect-ratio: 3 / 2;width: 100%;object-fit: cover;height: auto;margin-bottom: 30px;}

#achievements_2 .new_area .new b{padding: 3px 0px; background: #c3c3c4; margin-right: 1em;width: 5em;text-align: center;display: inline-block;}
#achievements_2 .new_area .new ul.flex{margin-bottom: 20px;}
#achievements_2 .new_area .new ul li:nth-of-type(1){margin-right: 50px;}
#achievements_2 .new_area.divided_into_3 .new_clear{width: 32%;}
#achievements_2 .new_area.divided_into_3 .new{width: 32%;}
#achievements_2 .new_area.divided_into_3 .new ul.flex{flex-direction: column; margin: 0;}
#achievements_2 .new_area.divided_into_3 .new ul li{margin-bottom: 20px;}

#achievements_2 .works-table{margin: 50px auto  ;}
#achievements_2 .works-table dl{display: flex;padding:15px 5%; margin-bottom: 1em;}
#achievements_2 .works-table dl:nth-child(odd){background: #fff;}
#achievements_2 .works-table dl:nth-of-type(1){background: none;}
#achievements_2 .works-table dl dt{width: 20%;}
#achievements_2 .works-table dl dd:nth-of-type(1){width: 40%;}

#achievements_2 .works-table table{ border-collapse: collapse;  width: 100%;}
#achievements_2 .works-table table td{padding:20px 40px;box-sizing:border-box;}
#achievements_2 .works-table table tr:nth-child(odd){background: #fff;}
#achievements_2 .works-table table tr:nth-of-type(1){background: none;}

@media (max-width: 1200px) {
#achievements_2 .works-table dl{padding:20px 10px; justify-content: space-between;}
#achievements_2 .works-table dl dt{width: 15%;}
#achievements_2 .works-table dl dd:nth-of-type(1){width: 25%;}
#achievements_2 .works-table dl dd:nth-of-type(2){width: 55%;}
}


@media (max-width: 1000px) {
#achievements_1 .design__txt{padding:40px 80px 20px 40px ;}
#achievements_2 .new_area .new ul li:nth-of-type(1){margin-right:20px;}}


@media (max-width: 767px) {
#achievements_1 .corner_title dt h2{font-size: 11vw;}
#achievements_1 .design__txt{font-size: 120%;}
#achievements_1 .right .design__txt{font-size: 120%;}

#achievements_2 .corner_title dt h2{text-align: center;}
#achievements_1 .design__harf{border-top: 1px solid #333;padding-top: 30px;}
#achievements_1 .right .corner_title{ text-align: left;}
#achievements_1 .right .corner_title dt h2{text-align: left;}
#achievements_1 .flex.design_inner{flex-direction: column;}
#achievements_1 .design_inner{margin: 0 auto;}
#company .corner_title, #achievements_1 .design_inner .corner_title{ color: #000;padding-left: 10px;margin-bottom: 20px;}
#achievements_1 .design__txt, #achievements_1 .right .design__txt{margin: 10px;padding:15px ;}
#achievements_1 .design__txt li a{ width: 100%;}
#achievements_1 .design__photo, #achievements_1 .right .design__photo{ margin: 0;}
#achievements_1 .slide_wrap {   margin-top: 20px;z-index: -100;margin-bottom: 30px;}
#achievements_2 .new_area .new ul.flex{flex-wrap: wrap;margin: 0;flex-direction: column;}
#achievements_2 .new_area .new ul li:nth-of-type(1){margin-right:0px;}
#achievements_2 .new_area .new ul.flex li{margin: 0 0 20px 0;}
#achievements_2 .new_area .new ul li b{display: block;}
#achievements_2 .new_area.divided_into_3 .new{width: 48%;}
#achievements_2 .new_area.divided_into_3 .new_clear{display: none;}
#achievements_2 .works-table table td{padding:20px 20px;}

}


@media (max-width: 500px){
#achievements_2 .achievements_area{margin: 40px auto 40px auto;}
#achievements_2 .corner_title{margin:30px 0;}
#achievements_2 .achievements_area h3+p br{display: none;}
#achievements_2 .achievements_area h3{ font-size: 7.5vw;margin-bottom: 0.5em;;}
#achievements_2 .achievements_area h3+p{font-size: 110%; margin-bottom: 60px;}
#achievements_2 .new_area .new, #achievements_2 .new_area.divided_into_3 .new{width: 98%;}
#achievements_2 .new_area .new{width: 98%; margin-bottom: 40px;}
#achievements_2 .works-table dl.u_bar{display: none;}
#achievements_2 .works-table dl{padding:20px 10px; flex-direction: column;}
#achievements_2 .works-table dl dt, #achievements_2 .works-table dl dd:nth-of-type(1), #achievements_2 .works-table dl dd:nth-of-type(2){width: 100%;margin-bottom: 15px;}
#achievements_2 .works-table dl dt::before{content: "施工期間";}
#achievements_2 .works-table dl dd:nth-of-type(1)::before{content: "発注者";}
#achievements_2 .works-table dl dd:nth-of-type(2)::before{content: "工事名";}
#achievements_2 .works-table dl dt::before, #achievements_2 .works-table dl dd:nth-of-type(1)::before, #achievements_2 .works-table dl dd:nth-of-type(2)::before{padding: 3px 0px; background: #c3c3c4; margin-right: 15px;display: inline-block;text-align: center;width: 5em;}
#achievements_2 .works-table table{ border-collapse: collapse;  width: 100%;}
#achievements_2 .works-table table tr{display: flex; flex-direction: column; margin-bottom: 1em;padding: 20px;}
#achievements_2 .works-table table tr:nth-of-type(1){display: none;}
#achievements_2 .works-table table td{padding:0px;box-sizing:border-box;margin-bottom: 10px;display: flex; align-items: center;}
#achievements_2 .works-table table td::before{content: "工事名";}
#achievements_2 .works-table table td:nth-of-type(1)::before{content: "施工期間";}
#achievements_2 .works-table table td:nth-of-type(2)::before{content: "発注者";}
#achievements_2 .works-table table td::before, #achievements_2 .works-table table td:nth-of-type(1)::before, #achievements_2 .works-table table td:nth-of-type(2)::before{padding: 3px 0px; background: #c3c3c4; margin-right: 15px;display: inline-block;text-align: center;width: 5em;flex-shrink: 0;}
}



/* company.php=================================================================================================================================== */
#company .design_inner_president .design__txt{mbackground: rgba(0,0,0,0.8);padding:80px 120px 80px 80px ; background: #40220f; z-index: -10;position: relative;margin:190px auto 220px auto  ;}
.design_inner_president{width: 90%;margin: 0 auto;}
.design__all .design__txt{display: flex ;}
.president_txt{margin-right: 100px;}
.president_txt dt{font-size: 4vw; padding-bottom: 40px;}
.president_txt dd{font-size: 110%; line-height: 2.5em;}
.design__photo_president{margin-top: -200px; }
.design__photo_president dt{font-size: 190%; padding-top: 80px;line-height: 2em;}
.design__photo_president dd{ width: 500px;flex-shrink: 0;position: relative;}
.design__photo_president dd div::after {  content: "";position: absolute;inset: 0;background: rgba(0,0,0,0.8); background: #221714; z-index: -1; top: 0;transform: rotate(-5deg);}

#company #business{background:#e6eff7 ;padding-bottom: 200px; clip-path: polygon(0 5%, 100% 0%, 100% 95%, 0% 100%);}
#company #business .corner_title{color: #000;margin-bottom: 60px; }
.company_profile{padding: 100px;}
.company_profile dl{display: flex;border-bottom: 1px solid #000;padding: 0 10px 30px 10px; font-size: 140%; margin-bottom: 30px;}
.company_profile dt{width: 12em;padding-right: 50px;flex-shrink: 0;}
.company_profile dd{width: 100%;}
.company_profile dd ul, .company_profile dd ul.nospace{display: flex;justify-content: space-between;width: 100%;flex-wrap: wrap;}
.company_profile dd ul.nospace{justify-content: flex-start;}
.company_profile dd ul.nospace li::after{ content: "、";}
.company_profile dd ul.nospace li:nth-last-of-type(1):after{ content: "";}

.company_profile dd img{width: 180px; padding:20px 0 ;}


.company_profile dd ul li.flex{gap: 20px;}
.company_profile dd ul li img{width: 220px;height: 160px;object-fit: contain;object-fit: cover;}



.company_profile dd ul.eco21_list li{color:#007940;margin: 20px 0;padding: 5px 10px;border: 1px solid #007940;display: inline-block;}
.company_profile dd ul.eco21_list a{text-decoration: none;display: inline-block;}


.company_profile dd iframe{width: 100%;padding: 20px 0 0 0;}
.w_10em{width: 8em; display: inline-block;}
.w_5em{width: 5em; display: inline-block;}

.company-table{margin-bottom: 1em}
.company-table td{background: #fff;}
.company-table tr.table_title td{ font-size: 75%; background: #eeebeb;}
.company-table , .company-table td, .company-table th {border: solid 1px #595959;border-collapse: collapse;}
.company-table td, .company-table th {padding: 5px;}
.company-table td{text-align: center; line-height: 1.1em;;}
.company-table td div{ text-align: left; display: inline-block;margin: 0 auto;}
.company-table td b{font-style: normal; font-size: 70%; font-weight: normal; }
.company-table td .shikaku{background: #d3d2d2;padding: 1px 5px;}
.company-table td .shikaku2{background: #d3d2d2;padding: 1px 5px;display: inline-block;}


@media (max-width: 1400px) {
.design_inner_president{width: 98%;margin: 0 auto;}
#company .design_inner_president .design__txt{padding:20px ;}
.design__photo_president dd{ width: 400px;}
#company #business{padding: 300px 20px;width: 98%;}
.company_profile{padding: 0px;}
}


@media (max-width: 1200px) {
.president_txt{margin-right: 50px;}
.design__photo_president dd{ width: 300px;}
.design__photo_president{margin-top: -100px; }
.design__photo_president dt{font-size: 170%; }
.company_profile dd ul li img{width: 150px;height: 120px;}
}


@media (max-width: 1000px) {
#company #business{padding: 300px 10px;width: 98%;}
.design_inner_president{width: 100%;margin: 0 auto;}
.company_profile dd ul{display: flex;justify-content: space-between;width: 100%; align-items: flex-start; flex-direction: column;}
.company_profile dd ul li.flex{ justify-content: space-around;}
.company_profile dd ul li img{aspect-ratio: 3 / 2;width: 50%;height: auto;margin: 0;}
}

@media (max-width: 767px) {
#company #business{padding:40px 10px;clip-path:none}
#company .design_inner_president .design__txt{margin:10px auto 120px auto  ;padding:20px 10px;}
.design__all .design__txt{flex-direction: column;padding: 10px;}
.design__photo_president{margin: 50px auto 0 auto; }
.design__photo_president dt{font-size: 130%;padding-top: 50px; }
.president_txt dt{font-size: 8vw; padding-bottom: 40px;}
.president_txt{margin-right: 00px;}
.company_profile dl{flex-direction: column;padding: 0 00px 30px 00px;font-size: 110%; }
.company_profile dt{width: 100%;padding-right: 00px;flex-shrink: 0;}
.company_profile dt::before{content: "■ ";}
.company_profile dd ul{display: block;}
.company_profile dd ul.eco21_list li{color:#007940;margin: 20px 0;padding: 5px 10px;border: 1px solid #007940;display: block;}

}


@media (max-width: 1000px) {.flex_wrap{flex-wrap: wrap;}}



@media (max-width: 767px) {
.no-pc{display: inline;}
.slide-menu {display:block;}
#main{font-size: 14px;}

#main{padding-bottom: 60px;}
.attempt_main{width: 100%;padding: 0 10px; }
#business, .design_inner{width: 100%;}
.business_to dt{font-size: 80%;}


/* .logo a{ font-size: 120%;} */
.logo a{ font-size: 2.5vw;}
.logo img{width: 30px; margin-right: 10px;}
.txt_shadow{text-shadow: 3px 4px 3px rgb(61 70 70);}
.shadow{box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .5);}

#mobile_menu .logo a{font-size: 3.3vw;white-space: nowrap;}
#mobile_menu{display: flex;}
.menu{position:absolute;}
.menu ul{display: none;}

/* 事紹介介=================================================================================================================================== */
.construction_results{background: none;padding:50px 0px 20px 0px;border-top: 3px solid #0e54a5; margin: 0 auto 10px auto;}

/* 会社概要部=================================================================================================================================== */
#company{margin-top: 100px;}
#company .corner_title{ padding-left: 10px;margin-bottom: 30px;}
.design__txt{margin-left: 10px;padding:20px 70px 20px 20px ; }
.right .design__txt{padding:20px 20px 20px 70px ; }
.design__txt ul{margin: 20px auto 0px auto;}
.design__txt li{margin: 20px auto 0 auto;}
.design__photo{ flex-basis: 50%;margin-left: -60px;margin-right: 10px;}

/* スライドレールの枠 */
.slide_wrap {       /* height: 140px; */     margin-top: -30px;}
#fotter, #fotter + p{display: none;}

.w_5em{width: 5em;}
.w_10em{width: 8em; display: inline-block;padding-bottom: 0px;padding-top: 50px;}
.w_10em:nth-of-type(1){padding: 0;}

.sp_only{display: block;}
.no-sp{display: none;}

}



@media (max-width: 500px){
.menu h2{padding: 10px;   font-weight: 600;}
/* コーナータイトル部=================================================================================================================================== */
.corner_title dt h2{ white-space: wrap;}
.corner_title dt{align-items: center;}
.attempt_main{width: 95%;padding: 0 0px; margin: 30px auto; }
/* .attempt_txt_area .flex{flex-direction: column;} */
.attempt_txt_area img{width: 100%; text-align: center;margin: 0 auto;}

.company_profile dd ul li img{width: 48%;height: 160px;object-fit: contain;margin: 0 0 0 00px;}
.w_5em{width: 4em;display: inline;}
.w_5em::before{content:"ー" ;}
.w_5em::after{content:"ー" ;}
.w_10em::before{content:"●" ;}
.no_sp{display: none;}
.w_10em{display: inline;padding-bottom: 0px;padding-top: 50px;}
}


@media (max-width: 430px) {

#main{font-size: 16px;}
.logo a{ font-size: 3.4vw;}
.logo img{width: 30px; margin-right: 5px;}
/* コーナータイトル部=================================================================================================================================== */
.corner_title dd{ font-size: 100%;}
.corner_title dt h2{font-size:200%;; }

/* .attempt_title h3, .attempt_title h3 + p {font-size: 220%;;} */
/* .attempt_title h3, .attempt_title h3 + p {font-size: 10vw;;} */
.attempt_txt_area{flex-basis: 100%;margin-bottom: 20px;}
.attempt_main .flex{flex-direction: column;}
.new_area{margin-bottom: 00px;}
.attempt_txt_area.sdgs picture{  object-fit: contain; padding: 5px 0 0 0 ;width:auto ;flex-shrink: 0;display: block;}

#business{clip-path: polygon(0 2%, 100% 0%, 100% 98%, 0% 100%);padding:80px 10px 60px 10px;background-size:20%;}

.business_to{flex-basis: 48%; margin-bottom: 20px;}
.business_to_link{flex-wrap: wrap;}
.construction_results h3 + p br{display: none;}
.construction_results h3 + p{text-align: left;}
.construction_results_photo{flex-wrap: wrap;}
.construction_results_photo li{flex-basis: 48%;margin-bottom: 20px; }
#company .flex{flex-direction: column;}

.flex.design_inner{flex-direction: column;}
.right .corner_title{margin-bottom: 80px; text-align: left;}

.right .corner_title dt h2{text-align: left;}
.right .design__txt{margin-left: 0px;}


.design_inner{margin: 0 auto;}
#company .corner_title, .design_inner .corner_title{ color: #000;padding-left: 10px;margin-bottom: 20px;}
.design__txt, .right .design__txt{margin: 10px;padding:15px ;}
.design__txt li a{ width: 100%;}
.design__photo, .right .design__photo{ margin: 0;}
.slide_wrap {   margin-top: 20px;z-index: -100;}


#company #business .flex{flex-direction:row;justify-content: space-between;}

}