@charset "utf-8";
#index .content{
	padding-top:0;
}
/*--------------------------------------------------------------------*/
/*                     .メインイメージ     　　　　                   */
/*--------------------------------------------------------------------*/
.hero{
	margin:85px 0 20px 0;
	background:url("../img/top/img_index.jpg") no-repeat center center;
	background-size:cover;
	width:100%;
	height: 658px;
	max-height:678px;
	color:#fff;
	/* padding-bottom:60px; */
}
.hero .inner{
	max-width:1200px;
	margin:0 auto;
	padding:60px 0 0 0;
	height: 100%;
}
.hero_read .pc_none{
	display: none;
}
.hero_read{
	padding: 0 10px;
	height: 100%;
}

.hero_read_right{
	width: 55%;
	height: 100%;
	padding-left: 10px;
	margin-left: auto;
	position: relative;
}
/* .gold_label{
	position: relative;
} */
/* .hero_img_wrap{
	position: relative;
} */
.circle{
	position: relative;
}
 .circle.-sp{
	display: none;
 }
.hero_img_text{
	color: #000;
	font-size: 2rem;
	font-weight: bold;
	position: absolute;
	top: 43px;
	left: 170px;
}
.hero_img_text.-sp{
	display: none;
}
.hero_text_img{
	width: min(100%,632px);
}
.hero_text_small{
	margin-top: 20px;
	line-height: 1.8;
}
.hero_text_small {
	letter-spacing: 0.03em;
}
.gold_label span{
	position: absolute;
	top:8px;
	left: 205px;
	color: #000;
	font-size: 2rem;
	font-weight: bold;
}
.gold_label .shiraishi{
	display: none;
}
.gold_bord_sp{
	display: none;
}
.hero h1{
	font-size: clamp(4.4rem,5vw,8.5rem);
	font-family:"メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    text-shadow: 3px 5px 3px #00000054;
    /* font-feature-settings: "palt"; */
    letter-spacing: 0.1em;
	line-height: 1.2;
	text-align: left;
}
.hero h1 b {
	font-feature-settings: "palt";
	-webkit-font-feature-settings: "palt";
	font-family:"游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
	-webkit-text-stroke-width: 4px;
  	-webkit-text-stroke-color: #fff;
	text-shadow: 3px 5px 3px #00000054;
	letter-spacing: 0.1em;
}
.hero h1 b:first-of-type{
	letter-spacing: -0.05em;
}

.hero h1 span{
	font-size: clamp(1.8rem,2vw,2.2rem);
	color: #fff;
	text-shadow: 3px 2px 3px #00000054;
	line-height: 1.2;
	letter-spacing: 0.01em;
}

.hero p span{
	display:inline-block;
}
.hero p span{
	display: block;
	font-size:1.6rem;
	font-weight: bold;
	text-align: left;
	margin-bottom:20px;
	text-shadow: 0px 2px 3px #000;
}
.hero p span:nth-child(3){
	min-width:420px;
	color:#333;
	padding:10px 0;
	font-size:2.0rem;
	font-weight: bold;
	text-align: center;
	background:url("../img/top/bg_hero_p.png");
	background-color:rgba(255,255,255,0.7);
}
.hero .gold_bg {
	width: 282px;
	height: 50px;
	border-radius: 5px;
	background: linear-gradient(90deg, rgba(239,234,103,1) 0%, rgba(249,248,203,1) 58%, rgba(235,221,54,1) 85%, rgba(251,230,50,1) 100%);
	border: 1px solid #e6df9d;
	box-shadow: 3px 3px 0px #876c00;
	color:#000;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size:2rem;
	font-weight: bold;
	margin-bottom: 30px;
}

/*--------------------------------------------------------------------*/
/*                     .当社の強み     　　　　                   */
/*--------------------------------------------------------------------*/
.strength{
	margin-top:70px;
	margin-bottom:100px;
}
.strength ul{
    max-width: 900px;
	margin-inline: auto;
}
.strength ul li{
    /* width:25%;
    border-right:dashed 1px #ccc;
    border-bottom:dashed 1px #ccc; */
	/* padding:15px; */
    position:relative;
	margin-bottom: 15px;
}
.strength ul li span{
    font-size:2.4rem;
    font-weight:bold;
    color:#005DB8;
    padding:10px 0 10px 30px;
    display: block;
}
.strength ul li:before{
    position:absolute;
    top:5px;
    left:0;
    font-size:3.2rem;
    color:#005DB8;
    font-weight: bold;
    font-family: "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
}
.strength ul li:nth-child(1):before{
    content:"1";
}
.strength ul li:nth-child(2):before{
    content:"2";
}
.strength ul li:nth-child(3):before{
    content:"3";
}

*/
/*--------------------------------------------------------------------*/
/*                     .製品情報　　　　　　　                       */
/*--------------------------------------------------------------------*/
.content .products{
	margin-bottom:60px;
}
.products .inner{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-pack: justify;
	    -ms-flex-pack: justify;
	        justify-content: space-between;
}
.content .products{
	margin-bottom: 80px;
}
.products .inner h3{
	font-size:1.8rem;
	margin-bottom:20px;
	padding-left:3.8vw;
	position:relative;
}
.products .inner h3 span{
	font-size:1.6rem;
	font-weight: normal;
}
.products .products_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.products .products_list li{
	width: 32%;
	margin-bottom: 20px;
}
.products .products_list li a{
	display: block;
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	top:0;
	left: 0;
	right: 0;
	bottom:0;
	overflow: hidden;
}
.products .products_list li a::after{
	content:"";
	width: 10px;
	height: 10px;
	color:#fff;
	border-top:2px solid #fff;
	border-right:2px  solid #fff;
	position: absolute;
	right:35px;
	bottom:36px;
	transform: rotate(45deg);
	transition: all .3s ease-out;
}
@media (hover: hover){
	.products .products_list li a:hover::after{
		right:30px;
	}
	.products .products_list li a:hover img{
		transform: scale(1.1);
	}
}

.products .products_list li a img{
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
	transition: .3s;
}

.products .products_list li a span:first-of-type{
	color: #fff;
	position: absolute;
	top:50%;
	left: 50%;
	transform: translate(-50%,-20%);
	font-size:clamp(2.4rem,3.3vw,3.4rem);
	font-weight: bold;
	text-align: center;
}
.products .products_list li:first-of-type a span:first-of-type::before{
	content:"";
	background: url(../img/common/tent_w.svg) no-repeat;
	position: absolute;
	left: 50%;
	top: -140%;
	display: inline-block;
	transform: translateX(-50%);
	width: 59px;
    height: 46px;
    background-size: contain;
}
.products .products_list li:nth-of-type(2) a span:first-of-type::before{
	content:"";
	background: url(../img/common/sign2_w.svg) no-repeat;
	position: absolute;
	left: 50%;
	top: -140%;
	display: inline-block;
	transform: translateX(-50%);
	width: 45px;
    height: 61px;
    background-size: contain;
}
.products .products_list li:last-of-type a span:first-of-type::before{
	content:"";
	background: url(../img/common/track_w.svg) no-repeat;
	position: absolute;
	left: 50%;
	top: -130%;
	display: inline-block;
	transform: translateX(-50%);
	width: 66px;
    height: 38px;
    background-size: contain;
}
.products .products_list li a .more{
	color: #fff;
	position: absolute;
	bottom:30px;
	right:75px;
}


/*--------------------------------------------------------------------*/
/*                     .施工実績works(お知らせ)                                      */
/*--------------------------------------------------------------------*/

.works .inner{
	max-width: 1200px;
	margin:0 auto 130px auto;
}

.works .inner .btn-area{
	width:380px;
	display: block;
	margin-inline: auto;
	margin-top:50px;
}
.works .inner .btn-area a {
	display: block;
	
}

.works .works_list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.works .works_list li{
	width: 32%;
	margin-bottom: 20px;
}

.works .works_list li a{
	width: 100%;
	color:#000;
}

.works .works_list li a img{
	aspect-ratio: 19 / 12;
	object-fit: cover;
	width: 100%;
	transition: .3s;
	border:1px solid #000;
}
.works .works_list li a p{
	margin:10px 0 0 10px;
}
.works .works_list li a p .cat{
	background: #005DB8;
	color:#fff;
	padding:3px 10px;
	margin-right: 10px;
}

/*--------------------------------------------------------------------*/
/*                     .その他リンクボタン                            */
/*--------------------------------------------------------------------*/
.link{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap:wrap;
	    flex-wrap:wrap;
	-webkit-box-pack:justify;
	    -ms-flex-pack:justify;
	        justify-content:space-between;
	margin:60px auto;
	max-width:1200px;
}
.link a{
	display: inline-block;
	width:48%;
	padding:32px 0;
	text-align: center;
	color:#fff;
	font-size:3.0rem;
	background-color:#005DB8;
    position:relative;
}
.link a span{
	display: block;
	font-size:1.4rem;
}
.link a:after{
    content: "";
    position: absolute;
    top: 45%;
    right: 10%;
    width: 14px;
    height: 14px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    -webkit-transition: all .3s ease-out;
    -o-transition: all .3s ease-out;
    transition: all .3s ease-out;
}

@media (hover: hover){
	.link a:hover{
		background-color:#1F7BD5;
	}
	.link a:hover:after{
		right:8%;
	}
}


/*--------------------------------------------------------------------*/
/*                     バナー                                      */
/*--------------------------------------------------------------------*/
.bnr{
  display: flex;
  justify-content: center;
  margin-bottom: 90px;
  padding:0 20px;
}
.bnr a img{
  width:100%;
  max-width: 1000px;
}

/*--------------------------------------------------------------------*/
/*                     .幅1000px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 1000px) {
	.products .inner .unyu{
		width:25%;
	}
}
/*--------------------------------------------------------------------*/
/*                     .幅960px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 960px) {
	.hero {
	    margin: 67px 0 20px 0;
	}

	.hero p span:nth-child(2) {
		font-size: 1.8rem;
	}
	.hero h1 b {
		-webkit-text-stroke-width: 3px;
	}
    
	.products .inner h3{
	    font-size:1.6rem;
	}
	.products .inner h3 span{
		font-size:1.2rem;
	}
}
/*--------------------------------------------------------------------*/
/*                     .幅860px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 860px) {
	.products .inner{
		display: block;
	}
	.products .inner>div{
		margin-bottom:30px;
	}
	.products .inner .sangyo,
	.products .inner .syogyo,
	.products .inner .unyu{
		width:100%;
	}
	.products .inner h3{
	    font-size:2.0rem;
		padding-left: 42px;
	}
	.products .inner h3 span{
		font-size:1.6rem;
	}
	.products .inner .sangyo h3:after{
		width:36px;
		background-size: 36px auto;
	}
	.products .inner .syogyo h3:after{
		width:36px;
		background-size: 36px auto;
	}
	.products .inner .unyu h3:after{
		width:36px;
		background-size: 36px auto;
	}

}
/*--------------------------------------------------------------------*/
/*                     .幅768px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	.hero{
		background:url("../img/top/img_index@2x.jpg") no-repeat center center;
		background-size:cover;
		padding-bottom: 20px;
		height: 125vw;
		position: relative;
	}
	.hero .inner {
		position: absolute;
		top:0;
		padding-top:0;
		display: flex;
		flex-direction: column-reverse;
		justify-content: space-between;
		height: 100%;
	}
	.hero_read{
		margin-top:50px;
	}
	.hero_read_right {
		display: flex;
		flex-direction: column;
	}
	.hero_read .pc_none{
		display: inline-block;
		background: #000;
		margin: 0 15px 5px;
		padding: 6px 15px;
		line-height: 1;
		font-weight: bold;
		letter-spacing: 0.1em;
	}
	.hero h1{
		writing-mode: vertical-rl;
		text-orientation: upright;
		font-size: 6rem;
		margin-left: auto;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
		/* margin-inline: 13px;
		font-size: clamp(2.4rem,5vw,3.4rem);
		line-height: 1.3;
		text-shadow: none;
		letter-spacing: 0.4rem;
		margin-top:25px;
		margin-bottom: 10px; */
	}
	.hero h1 b {
		-webkit-text-stroke-color: #fff;
		text-shadow: none;
		font-weight: normal;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
		letter-spacing: 0.05em;
	}
	.hero h1 b:first-of-type{
	letter-spacing: 0;
    }
	.dot{
	font-size: 3rem;
	display: inline-block;
	transform: translateX(0.1em); /
	}
	.gold_label{
		position: inherit;
		display: flex;
		justify-content: flex-end;
		padding-right: 10px;
	}
	.hero .glod_bg_pc{
		display: none;
	}
	.gold_label span{
		color:#fff;
		text-shadow: none;
		width: 100%;
		position: absolute;
		font-size:clamp(1.45rem,2vw,2rem);
		display: flex;
		align-items: center;
		top:inherit;
		right: 0;
		bottom:15px;
		padding-left: 4vw;
		left: inherit;
		background: linear-gradient(90deg, rgba(233,209,76,1) 0%, rgba(254,240,167,1) 29%, rgba(223,198,56,1) 66%, rgba(217,183,59,1) 85%, rgba(246,208,49,1) 100%);
		min-height: 50px;
		box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
		text-shadow: -1px 1px 2px rgba(0, 0, 0, 0.5);
	}
	.gold_label span::after{
		content:"";
		border: 1px solid rgba(255,255,255,.3);
		padding: 10px;
		display: block;
		width: calc(100% - 30px);
		height: 20px;
		position: absolute;
		left: 4px;
	}
	.gold_label span .pc{
		display: none;
	}
	.hero_img_text{
		display: none;
	}
	.hero_img_text.-sp{
		display: block;
		top: 92px;
	}
	.hero_text_img{
		display: block;
		margin-left: auto;
		max-width: 130px;
	}
	.circle{
		display: none;
		/* max-width: clamp(111px,30vw,190px);
		left: 10px;
		position: inherit;
		margin-bottom: 5px;
		z-index: 1; */
	}
	.circle.-sp{
		display: block;
	}
	.gold_bord_sp{
		background: url("../img/top/gold_sp.png") no-repeat;
		background-size: contain;
		width: 100%;
		aspect-ratio: 1432	/ 169;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.gold_bord_sp span{
		color:#000;
		font-size:clamp(1.6rem,3.8vw,2.8rem);
		font-weight: bold;
	}
	.hero p span:nth-child(1){
		color:#fff;
		font-size:clamp(1.4rem,1.4vw,2rem);
		letter-spacing: 0.18rem;
		padding-inline: 13px;
		text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
	}
	.hero p span:nth-child(2) {
		font-size: 1.4rem;
	}
	.hero p span:nth-child(3) {
		min-width: 100%;
		font-size:3.6vw;
	}
	.hero p span:nth-child(3){
		width:100%;
	}
	.hero p .sp_none{
		display: none;
	}
	.strength{
		margin-bottom: 50px;
	}
	.content .products{
		margin-bottom: 50px;
	}
	.products .products_list{
		flex-direction: column;
	}
	.products .products_list li {
		width: 100%;
		margin-bottom: 20px;
	}
	.products .products_list li a{
		aspect-ratio: 1 / 1;
	}
	.products .products_list li a img{
		width: 100%;
	}
	.works .works_list li a img{
		width: 100%;
		height: inherit;
	}
	.products .products_list li a::after{
		right:15px;
		bottom:16px;
		width: 8px;
		height: 8px;
	}
	.products .products_list li:first-of-type a span:first-of-type::before{
		width: 40px;
		height: 35px;
		top:-37px;
	}
	.products .products_list li:nth-of-type(2) a span:first-of-type::before{
		width: 30px;
		height: 42px;
		top:-37px;
	}
	.products .products_list li:last-of-type a span:first-of-type::before{
		width: 44px;
		height: 27px;
		top:-37px;
	}
	.products .products_list li a .more{
		bottom:10px;
		right:38px;
	}
	.works .inner{
		margin-bottom: 100px;
	}
	.works .works_list{
		flex-direction: column;
		align-items: center;
		margin-bottom: 10px;
	}
	.works .works_list li {
		width: 100%;
		max-width: 540px;
		margin-bottom: 40px;
	}
	.works .works_list li a img{
		object-fit: cover;
		aspect-ratio: 540 / 310;
	}
	.works .inner .btn-area {
		width: 100%;
		max-width: 380px;
		margin-top:0;
	}

    .link{
	display: block;
	}
	.link a{
		width:100%;
		position:relative;
		margin-bottom:20px;
		padding:35px 0;
	}
	.link a:after{
		content:"";
		position:absolute;
		top:45%;
		width: 10px;
		height: 10px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		    transform: rotate(45deg);	
	}
	.inquiry{
		display: block;
	}
	.inquiry>div{
		width:100%;
		margin-bottom:30px;
	}
	@media (hover: hover){
		.inquiry div.phone a:hover{
			background-color:#f9f9f9;
		}
	}
    .btn-area{
        margin-bottom:40px;
    }
	.products .inner ul li.unyu01 a::after {
	    background: url("../img/top/img_unyu_01.png") no-repeat center center;
	    background-size: cover;
	}
  .bnr{
    margin-bottom: 50px;
  }
}
@media screen and (max-width: 550px){
	.hero_text_img {
        max-width: 110px;
    }
}
/*--------------------------------------------------------------------*/
/*                     .幅480px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
    .hero {
    margin: 50px 0 20px 0;
	padding: 0;
    }
	.hero h1{
		font-size: 4.4rem;
	}
	.hero h1 b {
		letter-spacing: 0.2em;
	}
	.hero h1 img{
	margin-left: -3px;
	}
    .hero .inner p span:nth-child(2)  {
	display: none;
    }
	.hero_read{
		margin-top:20px;
	}
	.hero_read_right{
	margin-top: -80px;
    }
	.circle.-sp{
		width: 200px;
	}
	.hero_img_text.-sp{
		font-size: 1rem;
		top: 42px;
		left: 95px;
	}
	.hero_text_img{
		max-width: 90px;
		margin-top: 30px;
		margin-right: 10px;
	}
    .strength ul li {
        padding: 5px 10px 20px;
		margin-bottom: 0;
    }
    .strength ul li span {
        font-size: 2.0rem;
        padding: 10px 0 10px 30px;
    }
    .strength ul li:before{
        top: 7px;
        left:8px;
    }
    .strength ul li span:before {
        font-size:2.2rem;
    }
    .link{
        margin: 40px auto;
    }
    .link a {
        padding: 25px 0 20px 0;
        font-size:2.4rem;
    }
    .products .inner ul li {
        min-height: 180px!important;
    }

}
/*--------------------------------------------------------------------*/
/*                     .幅414px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 414px) {
	.hero h1 span{
		font-size:1.6rem;
	} 
    .strength ul li {
        width:100%;
        border-right:none;
        /* border-bottom:dashed 1px #ccc!important; */
    }
    .products .inner ul li,
    .products .inner ul li a {
        min-height: 132px!important;
    }

	.link{
		display: block;
	}
	.link a{
		width:100%;
		margin-bottom:15px;
	}
}
/*--------------------------------------------------------------------*/
/*                     .幅375px以下                                      */
/*--------------------------------------------------------------------*/
@media screen and (max-width: 375px) {
	.products .inner h3 {
	    font-size: 1.6rem;
		line-height:30px;
	}
	.products .inner h3 span{
		font-size:1.2rem;
	}
	.hero h1{
		margin-inline: 10px;
		font-size: 2.3rem;
	}
	.hero h1 b {
		-webkit-text-stroke-width: 2px;
	}
	_:lang(x)::-internal-media-controls-overlay-cast-button,.hero h1{
		margin-inline: 10px;
		font-size: clamp(4rem,5vw,3.4rem);
		letter-spacing: 0.25rem;
	}
	_:lang(x)::-internal-media-controls-overlay-cast-button, .hero h1 b{
		letter-spacing: 0.2em;
	}
}