@charset "UTF-8";
/* CSS Document */

@media (min-width:1051px) {	
	/*メイン*/
	
/* トップセクションの基本設定 */
#se_top {
  position: relative;height: 100vh;
  width: 100%;background: linear-gradient(0deg, #13202e 20%, #FFF 20%);}

#se_top .main_imgBox {
  position: absolute;bottom: 10%;right: 0;width: 80%;height: 80%;
  margin: 0;padding: 0;display: block;overflow: hidden;}



/* タイトルの位置設定 */
#se_top #text01,
#se_top #text02 {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 42px;
  letter-spacing: 5px;
  writing-mode: vertical-rl;
  z-index: 999;
}

#se_top #text01 {
  position: absolute;
  top: 35%;
  left: 80%;
}

#se_top #text02 {
  position: absolute;
  top: 40%;
  left: 75%;
}




.image_slider {width:100%;height: 100%;margin: 0 auto;font-size: 0}  
.image_slider div{position: relative;width:100%;height: 100%;margin: 0 auto;padding: 0;}                          
.image_slider div img{width:100%;height:100%;margin: 0 ;padding: 0;object-fit: cover;object-position: 50% 50%}






	/*ご挨拶*/
	#greeting{background:#13202e url("../img/concept_background01.jpg") no-repeat;background-size: 880px auto;padding:60px 0 140px 0;background-position: center;}
	#greeting .greeting-inner{/width:40%; margin: 0 auto;}
	#greeting .greeting-inner{width:40%; margin: 0 auto;}
	#greeting .title_area{writing-mode: vertical-rl;margin:0 auto;}
	#greeting .title_area span{color: white;font-size:18px;letter-spacing: 3px;}
	#greeting .title_area h3{color: white;font-size:32px;letter-spacing: 10px;font-weight: normal;margin:0 8px 0 56px;}
	#greeting .title_area p{color: white;font-size:20px;letter-spacing: 3px;line-height: 40px;margin-top:32px;}
	
    /*事業内容*/
	#business{background:#093c73;}
	#business .title_area{position: relative;width:100%;height:auto;min-height: 600px;writing-mode: vertical-rl;}
	#business .title_area::after { display:block; content:''; width:100%; height:0;padding-top:32%;}
	#business .title_area p{position:absolute;bottom:80px;right:74%;margin:0;padding: 0 0px 0px 0px;color: white;font-size:18px;letter-spacing: 3px;}
	#business .title_area h4{position:absolute; bottom:0;right:75%;margin:0;padding: 0 8px 0 0;color: white;font-size:32px;letter-spacing: 10px;font-weight: normal;}	
	#business .title_area .image_photo{position:absolute; bottom:0;right:0%;width: 70%;height: 80%;}	
	#business .title_area .image_photo img{width:100%;height: 100%;object-fit: cover}
	#business .list_area{width:100%;padding:120px 0 200px 0;  text-align: center;}
	#business .list_area ul{list-style: none;width: 650px; margin: 0 auto; padding: 0 0 0px 0;text-align: center;display: flex;    /*コレ*/flex-direction: row-reverse;    align-items: flex-start;}
	#business .list_area ul li{position: relative;display:inline-block;text-align:center;writing-mode: vertical-rl;color: white;font-size: 20px;letter-spacing: 4px;margin: 0; padding: 0px 30px 0px 30px;}
	#business .list_area ul li::before{content: "";  width: 1px;  height:200px;  position: absolute;  top: 0;  left: 0;  border-left: 1px dotted #666}
	#business .list_area ul li:last-of-type::before{display:none;}
	
	/*施工事例*/
	#gallery{padding:120px 0;}
	#gallery .gallery_inner{width:1000px;margin:0 auto;display: flex;flex-direction: row-reverse;}
	#gallery .title_area{width: 10%;height: auto;display: flex;flex-direction: column; justify-content: center;writing-mode: vertical-rl;}
	#gallery .title_area span{color:#605952;font-size:18px;letter-spacing: 3px;margin-bottom: 10px;}
	#gallery .title_area h3{color:#605952;font-size:32px;letter-spacing: 10px;font-weight: normal;margin:0 8px 0 0;}
	#gallery .list{width: 90%;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 32px;margin:0 10px;}
	#gallery .list .product{flex: 1 1 calc(50% - 20px);margin:0;height:auto;box-sizing:border-box;display:flex;flex-direction: column;align-items: center}
	
	/* キャプションのスタイル */
.caption {
    margin-bottom: 10px; /* キャプションを画像の上に配置 */
    font-size: 16px;
    
    text-align: center;
    color: #333;
    height: 30px; /* キャプションの高さを統一 */color:#605952;
}

/* 画像を親要素にフィットさせる */
#gallery .list .product img {
    width: 100%;
    height: 200px;
    object-fit: fill;
    display: block;
}

/* キャプションがない場合でも同じ高さを維持 */
#gallery .list .product .caption {
    height: 30px; /* キャプションの高さを統一 */
}



	
	
	
	/*会社概要*/
	#company{padding: 120px;background: url("../img/company_background.jpg") ;background-size: cover;background-repeat: no-repeat;}
	#company .company_inner{width: 800px;margin: 0 auto;font-size: 0;}
	#company .company_inner .title_area{display: inline-block;width: 10%;writing-mode: vertical-rl;}
	#company .company_inner .title_area p{margin:0;padding: 0 0px 0px 10px;color: #605952;font-size:14px;letter-spacing: 3px;text-align: left}
	#company .company_inner .title_area h5{margin:0;padding: 0;color: #605952;font-size:26px;letter-spacing:8px;font-weight: normal;}	
	#company .company_inner .detail{display: inline-block;width:70%;padding: 0 0 0 20%;vertical-align: top}
	#company .company_inner .detail .company_name{margin:0 auto 30px auto;padding: 0;font-size: 20px;letter-spacing:2px;color:#605952;}
	#company .company_inner .detail .photo_area {width: 325px !important;text-align: center;margin:0 auto;padding-bottom:8px;}
    #company .company_inner .detail .photo_area img {width: 100% !important;height: auto !important;}
	#company .company_inner .detail dl{flex-wrap: wrap;display: flex;width:100%;font-size: 14px;letter-spacing: 2px;color:#605952;}
	#company .company_inner .detail dl dt{width: 30%;margin: 0;padding:18px 0;border-bottom: 1px dotted #8a8a8a}
	#company .company_inner .detail dl dt:last-of-type{border-bottom:none;}
	#company .company_inner .detail dl dd{width: 70%;margin: 0;padding:18px 0;border-bottom: 1px dotted #8a8a8a}
	#company .company_inner .detail dl dd:last-of-type{border-bottom:none;}
	
	/*お問い合わせ*/
	#contact{padding: 80px 0;background:}
	#contact .inner{position: relative;width: 900px;height:300px;margin: 0 auto}
	#contact .inner a{display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5}
	#contact .inner h6{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);margin: 0;padding: 0;color: white;font-size: 24px;letter-spacing: 3px;font-weight: normal;z-index: 4}
	#contact .inner p{position: absolute;top: 60%;left: 50%;transform: translateX(-50%);margin: 0;padding: 0;color: white;font-size: 14px;letter-spacing: 2px;z-index: 4}
	#contact .inner .curtain_area{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2}
	#contact .inner .image_photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; z-index: 2}
	#contact .inner .image_photo img{width:100%;height: 100%;object-fit: cover;transition: all 1.0s ease-in-out;}
	#contact .inner:hover{cursor:pointer;}
	#contact .inner:hover .curtain_area{background: rgba(255,255,255,0.6);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
	#contact .inner:hover h6,#contact .inner:hover p{color:#4c4249;}
	#contact .inner:hover .image_photo img{transform: scale(1.2);}	
}

@media screen and (min-width:701px) and ( max-width:1050px)  {
	/*メイン*/
	/* トップセクションの基本設定 */
#se_top {
  position: relative;height: 100vh;
  width: 100%;background: linear-gradient(0deg, #13202e 20%, #FFF 20%);}

#se_top .main_imgBox {
  position: absolute;bottom: 10%;right: 0;width: 80%;height: 80%;
  margin: 0;padding: 0;display: block;overflow: hidden;}

#se_top .main_imgBox .inner {
  position: relative;display: flex;width: 100%;height: 100%;transition: transform 0.5s ease-in-out;}

/* スライダーの基本設定 */
.slide {
  position: relative;overflow: hidden;width:100%;height: 100%;}

ul.slider {
  display: flex;width:100%;height: 100%;}

ul.slider li {
  list-style: none;width: 100%;flex-shrink: 0;height:100%;}

/* 画像を親要素にフィットさせる */
ul.slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



.image_slider {width:100%;height: 100%;margin: 0 auto;font-size: 0}  
.image_slider div{position: relative;width:100%;height: 100%;margin: 0 auto;padding: 0;}                          
.image_slider div img{width:100%;height:100%;margin: 0 ;padding: 0;object-fit: cover;object-position: 50% 50%}
	
    /* title */
    #se_top #text01,
    #se_top #text02 {margin: 0;padding: 0;color: white;font-size: 30px;letter-spacing: 5px;writing-mode: vertical-rl;z-index: 999;}
    #se_top #text01 {position: absolute;top: 35%;left: 81%;}
    #se_top #text02 {position: absolute;top: 40%;left: 75%;}
	
	
	/*ご挨拶*/
	#greeting{background:#13202e url("../img/concept_background01.jpg") no-repeat;background-size: 70% auto;padding:0px 0 140px 0;background-position: center;}
	#greeting .greeting-inner{width:80%; margin: 0 auto;}
	#greeting .title_area{writing-mode: vertical-rl;margin:0 auto;}
	#greeting .title_area span{color: white;font-size:18px;letter-spacing: 3px;}
	#greeting .title_area h3{color: white;font-size:32px;letter-spacing: 10px;font-weight: normal;margin:0 8px 0 56px;}
	#greeting .title_area p{color: white;font-size:20px;letter-spacing: 3px;line-height: 40px;margin-top:32px;}
	
	
	/*事業内容*/
	#business{background:#093c73;}
	#business .title_area{position: relative;width:100%;height:auto;min-height: 400px;writing-mode: vertical-rl;}
	#business .title_area::after { display:block; content:''; width:100%; height:0;padding-top:20%;}
	#business .title_area p{position:absolute;bottom:80px;right:78%;margin:0;padding: 0 0px 0px 0px;color: white;font-size:18px;letter-spacing: 3px;}
	#business .title_area h4{position:absolute; bottom:0;right:80%;margin:0;padding: 0 8px 0 0;color: white;font-size:32px;letter-spacing: 10px;font-weight: normal;}	
	#business .title_area .image_photo{position:absolute; bottom:0;right:0%;width: 70%;height: 80%;}	
	#business .title_area .image_photo img{width:100%;height: 100%;object-fit: cover}
	#business .list_area{width:100%;padding:120px 0 150px 0;  text-align: center;}
	#business .list_area ul{list-style: none;width: 650px; margin: 0 auto; padding: 0 0 0px 0;text-align: center;display: flex;    /*コレ*/flex-direction: row-reverse;    align-items: flex-start;}
	#business .list_area ul li{position: relative;display:inline-block;text-align:center;writing-mode: vertical-rl;color: white;font-size: 20px;letter-spacing: 4px;margin: 0; padding: 0px 30px 0px 30px;}
	#business .list_area ul li::before{content: "";  width: 1px;  height:200px;  position: absolute;  top: 0;  left: 0;  border-left: 1px dotted #666}
	#business .list_area ul li:last-of-type::before{display:none;}
	
	/*施工事例*/
	#gallery{background-color:}
	#gallery .gallery_inner{width:90%;margin:0 auto;display: flex;flex-direction: row-reverse;padding:100px 0;}
	#gallery .title_area{width: 10%;height: auto;display: flex;flex-direction: column; justify-content: center;writing-mode: vertical-rl;}
	#gallery .title_area span{color:#605952;font-size:14px;letter-spacing: 3px;margin-bottom: 10px;}
	#gallery .title_area h3{color:#605952;font-size:26px;letter-spacing: 8px;font-weight: normal;margin:0 8px 0 0;}
	#gallery .list{width: 90%;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 24px;margin:0 10px;}
	#gallery .list .product{flex: 1 1 calc(50% - 20px); margin: 0; height: auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;}
	.caption { margin-bottom: 10px; font-size: 15px; text-align: center; color: #333; height: 24px;color:#605952}
    #gallery .list .product img { width: 100%; height: 160px; object-fit: fill; display: block; }
    #gallery .list .product .caption { height: 24px;}
	
	/*会社概要*/
	#company{padding: 80px 0;background: url("../img/company_background.jpg") ;background-size: cover;background-repeat: no-repeat; }
	
	#company .company_inner{width: 90%;margin: 0 auto;font-size: 0;}
	#company .company_inner .title_area{display: inline-block;width: 10%;writing-mode: vertical-rl;}
	#company .company_inner .title_area p{margin:0;padding: 0 0px 0px 10px;color: #605952;font-size:14px;letter-spacing: 3px;text-align: left}
	#company .company_inner .title_area h5{margin:0;padding: 0;color: #605952;font-size:26px;letter-spacing:8px;font-weight: normal;}	
	#company .company_inner .detail{display: inline-block;width:70%;padding: 0 0 0 10%;vertical-align: top}
	#company .company_inner .detail .company_name{margin:0 auto 30px auto;padding: 0;font-size: 20px;letter-spacing:2px;color:#605952;}
	#company .company_inner .detail .photo_area {width: 50% !important;text-align: center;margin:0 auto;padding-bottom:6px;}
    #company .company_inner .detail .photo_area img {width: 100% !important;height: auto !important;}

	#company .company_inner .detail dl{flex-wrap: wrap;display: flex;width:100%;font-size: 14px;letter-spacing: 2px;color:#605952;}
	#company .company_inner .detail dl dt{width: 26%;margin: 0;padding:18px 0;border-bottom: 1px dotted #8a8a8a}
	#company .company_inner .detail dl dt:last-of-type{border-bottom:none;}
	#company .company_inner .detail dl dd{width: 74%;margin: 0;padding:18px 0;border-bottom: 1px dotted #8a8a8a}
	#company .company_inner .detail dl dd:last-of-type{border-bottom:none;}
	
	/*お問い合わせ*/
	#contact{padding: 60px 0}
	#contact .inner{position: relative;width: 90%;height:300px;margin: 0 auto}
	#contact .inner a{display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5}
	#contact .inner h6{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);margin: 0;padding: 0;color: white;font-size: 24px;letter-spacing: 3px;font-weight: normal;z-index: 4}
	#contact .inner p{position: absolute;top: 60%;left: 50%;transform: translateX(-50%);margin: 0;padding: 0;color: white;font-size: 14px;letter-spacing: 2px;z-index: 4}
	#contact .inner .curtain_area{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2}
	#contact .inner .image_photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; z-index: 2}
	#contact .inner .image_photo img{width:100%;height: 100%;object-fit: cover;transition: all 1.0s ease-in-out;}
	#contact .inner:hover{cursor:pointer;}
	#contact .inner:hover .curtain_area{background: rgba(255,255,255,0.6);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
	#contact .inner:hover h6,#contact .inner:hover p{color:#4c4249;}
	#contact .inner:hover .image_photo img{transform: scale(1.2);}
}

@media (max-width: 700px) {
	/*メイン*/
	/* トップセクションの基本設定 */
#se_top {
  position: relative;height: 100vh;
  width: 100%;background: linear-gradient(0deg, #13202e 20%, #FFF 20%);}

#se_top .main_imgBox {
  position: absolute;bottom: 10%;right: 0;width: 80%;height: 80%;
  margin: 0;padding: 0;display: block;overflow: hidden;}

#se_top .main_imgBox .inner {
  position: relative;display: flex;width: 100%;height: 100%;transition: transform 0.5s ease-in-out;}

/* スライダーの基本設定 */
.slide {
  position: relative;overflow: hidden;width:100%;height: 100%;}

ul.slider {
  display: flex;width:100%;height: 100%;}

ul.slider li {
  list-style: none;width: 100%;flex-shrink: 0;height:100%;}

/* 画像を親要素にフィットさせる */
ul.slider li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* タイトルの位置設定 */
#se_top #text01,
#se_top #text02 {
  margin: 0;
  padding: 0;
  color: white;
  font-size: 42px;
  letter-spacing: 5px;
  writing-mode: vertical-rl;
  z-index: 999;
}

#se_top #text01 {
  position: absolute;
  top: 35%;
  left: 80%;
}

#se_top #text02 {
  position: absolute;
  top: 40%;
  left: 75%;
}

.image_slider {width:100%;height: 100%;margin: 0 auto;font-size: 0}  
.image_slider div{position: relative;width:100%;height: 100%;margin: 0 auto;padding: 0;}                          
.image_slider div img{width:100%;height:100%;margin: 0 ;padding: 0;object-fit: cover;object-position: 50% 50%}
	
	/*title*/
	#se_top #text01,#se_top #text02 {margin: 0;padding: 0;color: white;font-size: 20px;letter-spacing: 1px;writing-mode: vertical-rl;z-index: 999;}
	#se_top #text01 {position: absolute;top: 35%;left: 81%;}
	#se_top #text02 {position: absolute;top: 40%;left: 75%;}
	
	/*ご挨拶*/
	#greeting{background:#13202e url("../img/concept_background01.jpg") no-repeat;background-size: 80% auto;padding:0px 0 40px 0;background-position: center;}
	#greeting .greeting-inner{width:80%; margin: 0 auto;}
	#greeting .title_area{margin:0 auto 20px auto;padding: 0;}
	#greeting .title_area span{color: white;font-size:16px;letter-spacing: 3px;margin:0 auto 10px auto;padding: 0 5px ;}
	#greeting .title_area h3{margin:0;padding: 0;color: white;font-size:22px;letter-spacing: 10px;font-weight: normal;}
	#greeting .title_area p{color: white;font-size:15px;letter-spacing: 3px;line-height: 40px;margin-top:32px;text-align: center;}
	
	
	/*事業内容*/
	#business{background:#093c73;padding: 0 0 50px 0}
	#business .title_area{width:100%;margin: 0 auto 10px auto;text-align: center}
	#business .title_area p{width:80%;margin:0 auto;padding: 0 0px 0px 0px;color: white;font-size:18px;letter-spacing: 3px;}
	#business .title_area h4{ width:80%;margin:0 auto;padding: 0;color: white;font-size:22px;letter-spacing:3px;font-weight: normal;}	
	#business .title_area .image_photo{/*position:absolute; bottom:0;right:0%;*/width:80%;margin: 0 0 30px auto}	
	#business .title_area .image_photo img{width:100%;height:200px;object-fit: cover}
	#business .list_area{width:80%;padding:0px 0 0px 0; margin: 0 auto;}
	#business .list_area ul{list-style: none;width:100%; margin: 0 auto; padding: 0 0 0px 0;}
	#business .list_area ul li{position: relative;color: white;font-size: 16px;letter-spacing: 2px;margin: 0; padding: 16px 0px;}
	#business .list_area ul li::before{content: "";  width: 100%;  height:1px;  position: absolute;  top: 0;  left: 0;  border-top: 1px dotted #666}
	#business .list_area ul li:first-of-type::before{display:none;}
	
	/*施工事例*/
	#gallery{background-color:}
	#gallery .gallery_inner{width:95%;margin:0 auto;display: flex;flex-direction: row-reverse;padding:80px 0;}
	#gallery .title_area{width: 10%;height: auto;display: flex;flex-direction: column; justify-content: center;writing-mode: vertical-rl;}
	#gallery .title_area span{color:#605952;font-size:14px;letter-spacing: 3px;margin-bottom: 10px;}
	#gallery .title_area h3{color:#605952;font-size:22px;letter-spacing: 3px;font-weight: normal;margin:0 4px 0 0;}
	#gallery .list{width: 90%;display: flex;flex-wrap: wrap;justify-content: space-between;gap: 16px;margin:0 10px;}
	#gallery .list .product{flex: 1 1 calc(50% - 20px); margin: 0; height: auto; box-sizing: border-box; display: flex; flex-direction: column; align-items: center;}
	.caption { margin-bottom: 8px; font-size: 14px; text-align: center; color: #333; height: 24px;color:#605952}
	 #gallery .list .product img { width: 100%; height: 120px; object-fit: fill; display: block; }
	 #gallery .list .product .caption { height: 24px;}
	
	/*会社概要*/
	#company{padding: 30px 0;background: url("../img/company_background.jpg") ;background-size: cover;background-repeat: no-repeat;}
	#company .company_inner{width: 80%;margin: 0 auto;font-size: 0;}
	#company .company_inner .title_area{margin: 0 auto 20px auto;text-align: center}
	#company .company_inner .title_area p{margin:0;padding: 0 0px;color: #605952;font-size:14px;letter-spacing: 3px;}
	#company .company_inner .title_area h5{margin:0;padding: 0;color: #605952;font-size:22px;letter-spacing:3px;font-weight: normal;}	
	#company .company_inner .detail{width:100%;padding: 0 0 0 0%;}
	#company .company_inner .detail .company_name{margin:0 auto 16px auto;padding: 0;font-size: 16px;letter-spacing:1px;text-align: center;color: #605952;}
	#company .company_inner .detail .photo_area {width: 50% !important;text-align: center;margin:0 auto;}
    #company .company_inner .detail .photo_area img {width: 100% !important;height: auto !important;}
	#company .company_inner .detail dl{flex-wrap: wrap;display: flex;width:100%;font-size: 14px;letter-spacing: 0px;color:#605952;}
	#company .company_inner .detail dl dt{width: 100%;margin: 0;padding:12px 0 5px 0;}	
	#company .company_inner .detail dl dd{width: 100%;margin: 0;padding:0 0 12px 0;border-bottom: 1px dotted #8a8a8a}
	#company .company_inner .detail dl dd:last-of-type{border-bottom:none;}
	
	
	/*お問い合わせ*/
	#contact{padding: 0px 0}
	#contact .inner{position: relative;width: 100%;height:200px;margin: 0 auto}
	#contact .inner a{display:block;position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 5}
	#contact .inner h6{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);margin: 0;padding: 0;color: white;font-size: 18px;letter-spacing: 1px;font-weight: normal;z-index: 4}
	#contact .inner p{position: absolute;top: 60%;left: 50%;transform: translateX(-50%);margin: 0;padding: 0;color: white;font-size: 14px;letter-spacing: 2px;z-index: 4}
	#contact .inner .curtain_area{position: absolute;top: 0;left: 0;width: 100%;height: 100%;z-index: 2}
	#contact .inner .image_photo{position: absolute;top: 0;left: 0;width: 100%;height: 100%;overflow: hidden; z-index: 2}
	#contact .inner .image_photo img{width:100%;height: 100%;object-fit: cover;transition: all 1.0s ease-in-out;}
	#contact .inner:hover{cursor:pointer;}
	#contact .inner:hover .curtain_area{background: rgba(255,255,255,0.6);-webkit-transition: all 0.3s ease;-moz-transition: all 0.3s ease;-o-transition: all 0.3s ease;transition: all  0.3s ease;}
	#contact .inner:hover h6,#contact .inner:hover p{color:#4c4249;}
	#contact .inner:hover .image_photo img{transform: scale(1.2);}
}