@charset "utf-8";
#kv { background: url(../img/bg-ptn-1.jpg) 50% 0% / cover;}
#kv .inner-kv { padding: 170px 0 90px; text-align: center;}
#kv h2 { margin-bottom: 15px; color: #000; font-size: 40px; font-weight: 700; line-height: 1;}
#kv p { color: #000; font-size: 22px; font-weight: 700; line-height: 1;}
@media (max-width: 481px) {
	#kv .inner-kv { padding: 100px 0 50px;}
	#kv h2 { margin-bottom: 8px; font-size: 24px;}
	#kv p { font-size: 17px;}
}

.wrap { background: url(../img/bg-ptn-2.jpg);}
.wrap.pt { padding-top: 80px;}
@media (max-width: 481px) {
	.wrap.pt { padding-top: 40px;}
}

.breadlist { padding: 30px 25px;}
.breadlist ul li{ display: inline-block; margin-right: 10px; font-size: 14px;}
.breadlist ul li:before { content: ''; display: inline-block; width: 0; height: 0; margin-right: 10px;
 border: solid 5px transparent; border-left: solid 7px #fff; border-right: 0;
}
.breadlist ul li:first-child:before { content: none;}
.breadlist ul li a { color: #fff; text-decoration: none;}
.breadlist ul li a:hover { text-decoration: underline;}
@media (max-width: 481px) {
	.breadlist { padding: 15px;}
}



/* ------------------------------
		詳細ページ
 ------------------------------ */

#detail { padding-top: 20px;}
#detail .inner{ position: relative; width: 92%; max-width: 1080px; margin: 0 auto;}
#detail .main-pht{ margin: 0 auto 30px; padding: 0 60px;}

/* ▼ add marukin ▼ */
#detail .main-pht a{ display: inline-block;  margin-bottom: 4px; }
/* ▲ add marukin ▲ */

#detail .pht { margin-bottom: 10px; text-align: center;}
#detail .pht img { width: 100%;}
#detail .thumb { width: 94%; max-width: 950px; margin: 0 auto 70px;}
#detail .thumb { height: 220px; overflow-y: scroll; } 												/*（20210930）add marukin*/

#detail .thumb .pht-nav .slick-track { width: 100% !important; display: flex; flex-wrap: wrap;}
#detail .thumb .pht-nav .slick-slide { width: 12.5% !important; padding: 4px; border-radius: 5px; background: transparent; transition: 0.3s linear;}
#detail .thumb .pht-nav .slick-slide.slick-current { background: #b8a16b;}
#detail .thumb .pht-nav img { width: 100%;}
#detail .thumb .pht-nav .slick-track { transform: none !important;}
#detail .thumb .pht-nav .slick-slide:hover img{ opacity: 0.9;}

#detail .ctn { position: relative; width: 94%; max-width: 950px; margin: 0 auto 50px;}
#detail .ctn ul { background: #e8e8e8; font-size: 0;}
#detail .ctn ul li { display: inline-block; border-bottom: solid 1px #6d6d6d; vertical-align: top;}
#detail .ctn ul li:last-child { border-bottom: none;}
#detail .ctn ul li.w50 { width: 50%;}
#detail .ctn ul li.w100{ width: 100%;}
#detail .ctn ul li dl { display: table; width: 100%;}
#detail .ctn ul li dl dt,
#detail .ctn ul li dl dd { display: table-cell; padding: 20px 10px 20px 30px; color: #000; font-size: 18px; vertical-align: top;}
#detail .ctn ul li dl dt { width: 180px; background: #262626; color: #fff;}
#detail .ctn ul li dl dd { width: auto;}

#detail .ctn ul li ul.more { width: 90%; margin: 0 auto; padding: 25px 0; text-align: center;}
#detail .ctn ul li ul.more li { display: inline-block; width: 32%; margin: 0 auto; border: none;}
#detail .ctn ul li ul.more li a { position: relative; display: block; width: 92%; margin: 0 auto; padding: 10px 0;
 background: #000; box-shadow: 0 0 8px #999;
 color: #fff; text-align: center; text-decoration: none;
}



/* ▼ add marukin ▼ */
#detail .ctn ul li ul.more li a.not_active{ background: #ccc; box-shadow: none; }
/* ▲ add marukin ▲ */

/* ▼（20230801）add marukin ▼ */
#detail .pager .btn a svg { display: inline-block; width: 36px; margin-right: 12px; fill: #fff; vertical-align: middle; }
/* ▲（20230801）add marukin ▲ */



#detail .ctn ul li ul.more li a span { position: relative; z-index: 2; font-size: 21px; font-weight: 700; vertical-align: middle;}
#detail .ctn ul li ul.more li a:after { content: ''; display: block; width: 100%; height: 100%;
 position: absolute; left: 0; top: 0; background: url(../img/bg-ptn-3.png) 50% 50%; z-index: 1;
}
#detail .ctn ul li ul.more li a:hover { opacity: 0.85;}

#detail .pager { position: relative; width: 90%; max-width: 950px; margin: 0 auto; padding: 0 120px;}
#detail .pager .prev,
#detail .pager .next { position: absolute; top: 0;}
#detail .pager .prev { left: 0;}
#detail .pager .next { right: 0;}
#detail .pager .prev a,
#detail .pager .next a{ position: relative; color: #fff; font-size: 22px; text-decoration: none;}
#detail .pager .prev a{ padding-left: 40px;}
#detail .pager .next a{ padding-right: 40px;}
#detail .pager .prev a:before,
#detail .pager .prev a:after,
#detail .pager .next a:before,
#detail .pager .next a:after { content: ''; display: block; position: absolute; top: 50%; transform: translate(0,-50%);}
#detail .pager .prev a:before,
#detail .pager .next a:before{ width: 27px; height: 27px; background: #b8a16b; border-radius: 50%; transition: 0.3s linear;}
#detail .pager .prev a:before{ left: 0;}
#detail .pager .next a:before{ right: 0;}
#detail .pager .prev a:after,
#detail .pager .next a:after { width: 0; height: 0; border: solid 5px transparent;}
#detail .pager .prev a:after { left: 8px; border-right: solid 8px #fff; border-left: 0;}
#detail .pager .next a:after { right: 9px; border-left: solid 8px #fff; border-right: 0;}
#detail .pager .prev a:hover:before,
#detail .pager .next a:hover:before { opacity: 0.8;}

#detail .pager .btn { width: 100%; max-width: 430px; margin: 0 auto; background: #fff;}
#detail .pager .btn a { display: block; padding: 25px 0; background: linear-gradient(#b59e68,#c8b17a);
 color: #fff; font-size: 22px; font-weight: 700; text-align: center; text-decoration: none;
}
#detail .pager .btn a:hover { opacity: 0.8;}
@media (max-width: 1001px) {
	#detail .thumb .pht-nav .slick-slide { width: 16.66667% !important;}
	#detail .ctn ul li dl dt,
	#detail .ctn ul li dl dd { padding: 15px 6px 15px 20px; font-size: 16px;}
	#detail .ctn ul li dl dt { width: 140px;}
}
@media (max-width: 801px) {
	#detail .main-pht{ margin: 0 auto 20px; padding: 0 50px;}

	#detail .thumb .pht-nav .slick-slide { width: 25% !important;}
	#detail .ctn ul { width: 100%;}
	#detail .ctn ul li { display: block;}
	#detail .ctn ul li.w50 { width: 100%;}
	#detail .ctn ul li dl dt,
	#detail .ctn ul li dl dd { padding: 10px 6px 10px 12px; font-size: 14px;}
	#detail .ctn ul li a.pdf { font-size: 18px;}

	#detail .pager .btn a { padding: 15px 0; font-size: 18px;}
}
@media (max-width: 641px) {
	#detail .ctn ul li ul.more li a span { font-size: 16px;}
	
	#detail .thumb { height: 25vh; } 											/*（20210930）add marukin*/
}
@media (max-width: 481px) {
	#detail .main-pht{ padding: 0px;}
	#detail .thumb { margin: 0 auto 30px;}

	#detail .ctn { margin: 0 auto 30px;}
	#detail .ctn ul li dl { display: block;}
	#detail .ctn ul li dl dt,
	#detail .ctn ul li dl dd { display: block; padding: 5px 10px;}
	#detail .ctn ul li dl dt { width: 100%;}
	#detail .ctn ul li dl dd { width: 100%; font-size: 13px;}
	#detail .ctn ul li ul.more{ width: 96%; padding: 15px 0;}
	#detail .ctn ul li ul.more li a span { font-size: 15px;}

	#detail .pager { padding: 0 0 50px;}
	#detail .pager .prev,
	#detail .pager .next { top: auto; bottom: 0;}
	#detail .pager .prev a,
	#detail .pager .next a{ font-size: 15px;}
	#detail .pager .prev a{ padding-left: 30px;}
	#detail .pager .next a{ padding-right: 30px;}
	#detail .pager .prev a:before,
	#detail .pager .next a:before{ width: 21px; height: 21px;}
	#detail .pager .prev a:after,
	#detail .pager .next a:after { border: solid 5px transparent;}
	#detail .pager .prev a:after { left: 6px; border-right: solid 7px #fff; border-left: 0;}
	#detail .pager .next a:after { right: 7px; border-left: solid 7px #fff; border-right: 0;}

	#detail .pager .btn a { padding: 10px 0; font-size: 15px;}



	/* ▼（20230801）add marukin ▼ */
	#detail .pager .btn a svg { width: 28px; margin-right: 10px; }
	/* ▲（20230801）add marukin ▲ */
}


/* -------------------- 在庫一覧はこちら -------------------- */
#select .inner{ position: relative; width: 90%; max-width: 1200px; margin: 0 auto; padding: 70px 0;}
#select h2 { margin-bottom: 30px; font-size: 32px; letter-spacing: 0.05rem; text-align: center; text-shadow: 2px 2px 5px #000;}
#select ul{ position: relative; font-size: 0;}
#select ul li { display: inline-block; width: 16.5%; vertical-align: top;}
#select ul li a { position: relative; display: block; width: 92%; margin: 0 auto; padding-top: 75%; background: #c6c6c6; text-decoration: none;
 box-shadow: 0px 0px 10px #000; transition: 0.4s linear;
}
#select ul li a:before,
#select ul li a:after { content: ''; display: block; position: absolute;}
#select ul li a:after { width: 100%; height: 100%; background: url(../img/bg-ptn-3.png) 50% 50%; left: 0; top: 0; z-index: 1;}
#select ul li a span { display: block; width: 100%; text-align: center; position: absolute; left: 0; top: 50%; transform: translate(0,-50%);
 color: #000; font-size: 24px; font-weight: 600; letter-spacing: 0.1rem; z-index: 3;
}
#select ul li a span img { display: block; width: 60%; max-width: 112px; margin: 0 auto 15px;}
#select ul li a em { display: block; width: 100%; font-size: 16px; line-height: 1.4; text-align: center;}
#select ul li a em.eng { font-size: 24px;}
#select ul li a:hover { background: #fff;}
@media (max-width: 1001px) {
	#select ul li a em { font-size: 20px;}
}
@media (max-width: 801px) {
	#select h2 { margin-bottom: 20px; font-size: 24px;}
	#select ul li { display: inline-block; width: 50%; margin: 0 auto 20px;}
	#select ul li a { padding-top: 32%;}
	#select ul li a em.eng { font-size: 20px;}
	#select ul li.txt a { padding: 25px 0;}
	#select ul li.txt a span { position: relative; top: 0; transform: translate(0,0);}
	#select ul li.txt a em { position: relative; top: 0%; transform: translate(0,0); font-size: 18px;}	
}
@media (max-width: 641px) {
	#select ul li.txt a { padding: 15px 0;}
	#select ul li a span img { margin: 0 auto 10px;}
}
@media (max-width: 481px) {
	#select ul li { margin: 0 auto 10px;}
	#select ul li a { padding-top: 42%;}
	#select ul li a span img { margin: 0 auto 6px;}
	#select ul li a em { font-size: 14px;}
	#select ul li.txt a em { font-size: 14px;}
	#select ul li a em.eng { font-size: 18px;}
	#select ul li.txt a { padding: 10px 0;}
}




/* -------------------- 会社概要 -------------------- */
#company { margin-bottom: 50px; padding: 30px 0;}
#company .inner { width: 92%; max-width: 950px; margin: 0 auto;}
#company ul { background: #fff; border-bottom: none;}
#company ul li { border-bottom: solid 1px #6d6d6d;}
#company ul li:last-child { border-bottom: none;}
#company ul li dl { display: table; width: 100%;}
#company ul li dl dt,
#company ul li dl dd { display: table-cell; padding: 20px 40px; color: #000; font-size: 18px; font-weight: 700; line-height: 1.8; letter-spacing: 0.075rem;}
#company ul li dl dt { width: 24%; background: #262626; color: #fff;}
#company ul li dl dd { width: 76%; background: #e8e8e8;}
#company ul li dl dd a { color: #000;}
#company ul li dl dd a:hover { text-decoration: none;}

#access { position: relative;}
#access #sct-access{ position: absolute; left: 0; top: -100px;}
#access #map { width: 100%; height: 420px;}
#access #map iframe { width: 100%; height: 100%;}
#access .inner-sct { width: 90%; max-width: 950px; margin: 0 auto; padding: 60px 0;}
#access ul li { margin-bottom: 15px;}
#access ul li dl {}
#access ul li dl dt,
#access ul li dl dd { position: relative; padding-left: 40px; font-size: 18px; letter-spacing: 0.075rem; text-shadow: 1px 1px 3px #000;}
#access ul li dl dt { font-weight: 900;}
#access ul li dl dt:before { content: ''; display: block; width: 34px; height: 34px; position: absolute; left: 0; top: -2px;}
#access ul li dl dt.train:before { background: url(../img/icn-train.png) no-repeat 50% 50% / cover;}
#access ul li dl dt.bus:before { background: url(../img/icn-bus.png) no-repeat 50% 50% / cover;}
#access ul li dl dt.car:before { background: url(../img/icn-car.png) no-repeat 50% 50% / cover;}
#access ul li dl dd { margin-bottom: 5px; font-weight: 600;}
#access ul li dl dd a { position: relative; padding-left: 30px; color: #fff;}
#access ul li dl dd a:before,
#access ul li dl dd a:after { content: ''; display: block; position: absolute;}
#access ul li dl dd a:before{ left: 0; top: -2px; width: 22px; height: 22px; background: #c8b079; border-radius: 50%;}
#access ul li dl dd a:after { width: 0; height: 0; border: solid 4px transparent; border-left: solid 8px #fff; border-right: 0;
 top: 5px; left: 7px;
}
#access ul li dl dd a:hover { text-decoration: none;}
@media (max-width: 801px) {
	#company ul li dl dt,
	#company ul li dl dd { padding: 12px 20px; font-size: 16px;}

	#access ul li dl dt,
	#access ul li dl dd { font-size: 16px;}
}
@media (max-width: 641px) {
	#company ul li dl dt,
	#company ul li dl dd { display: block; width: 100%;}
}
@media (max-width: 481px) {
	#company { padding: 0px;}
	#company ul li dl dt,
	#company ul li dl dd { padding: 6px 20px;}
	#company ul li dl dt { font-size: 14px;}
	#company ul li dl dd { font-size: 13px;}

	#access #map { height: 300px;}
	#access .inner-sct { padding: 40px 0;}
	#access ul li dl dt { margin-bottom: 5px; font-size: 14px;}
	#access ul li dl dt:before { width: 30px; height: 30px;}
	#access ul li dl dd { font-size: 13px; letter-spacing: 0.025rem;}
	#access ul li dl dd a { padding-left: 25px;}
	#access ul li dl dd a:before{ width: 18px; height: 18px;}
	#access ul li dl dd a:after { border: solid 3px transparent; border-left: solid 6px #fff; border-right: 0; top: 4px; left: 6px;}
}


/* ---------- 事業紹介 ---------- */
#concept { margin-bottom: 100px; padding: 30px 0;}
#concept h2 { margin-bottom: 30px; font-size: 60px; font-weight: 400; letter-spacing: 0.1rem; text-align: center; text-shadow: 2px 2px 6px #000;}
#concept p { font-size: 18px; line-height: 2.8; text-align: center; text-shadow: 2px 2px 6px #000;}
#concept p.mb { margin-bottom: 30px;}



/* ▼ add marukin ▼ */
#img_residentName{ width: 282px; }
/* ▲ add marukin ▲ */



#flow { padding-bottom: 100px;}
#flow ul{ width: 90%; max-width: 850px; margin: 0 auto 140px;}
#flow .box { width: 90%; max-width: 850px; margin: 0 auto;}

#flow ul li { position: relative; margin: 0 auto; padding-top: 18px;}
#flow ul li::after { content: ''; display: block; width: 0px; height: 0px;
 border: solid 40px transparent; border-top: solid 16px #c8b079; border-bottom: 0;
 margin: 0 auto;
}
#flow ul li:last-child:after { content: none;}
#flow ul li img.step { position: absolute; left: 30px; top: 0px; width: 110px;}
#flow ul li dl { display: flex; align-items: center; width: 100%; margin: 0 auto 20px; padding: 25px 0; background: #fff; box-shadow: 0px 0px 8px #000;}
#flow ul li dl dt { width: 230px; border-right: solid 1px #c8c8c8; text-align: center;}
#flow ul li dl dt img { width: 50%; max-width: 110px;}
#flow ul li dl dd { width: auto; padding: 0 50px; color: #000;}
#flow ul li dl dd span.tit{ display: block; font-size: 26px; font-weight: 700; letter-spacing: 0.05rem;}
#flow ul li dl dd span.gothic{ display: block; font-size: 18px; letter-spacing: 0.075rem; line-height: 1.8;}

#flow .box { padding: 60px 60px 40px; border: solid 1px #ffff;}
#flow .box h3 { margin-bottom: 25px; font-size: 26px; letter-spacing: 0.075rem; text-align: center;}
#flow .box p { line-height: 1.8; letter-spacing: 0.075rem;}
#flow .box p.note { font-size: 14px;}
@media (max-width: 641px) {
	#concept h2 { margin-bottom: 20px; font-size: 40px;}
	#concept p { font-size: 16px; line-height: 2;}

	#flow ul li img.step { left: 15px; width: 80px;}
	#flow ul li dl { padding: 15px 0;}
	#flow ul li dl dt { width: 150px;}
	#flow ul li dl dd { padding: 0 30px;}
	#flow ul li dl dd span.tit{ font-size: 21px;}
	#flow ul li dl dd span.gothic{ font-size: 14px;}

	#flow .box { padding: 30px 25px 30px;}
	#flow .box h3 { margin-bottom: 20px; font-size: 21px;}
}
@media (max-width: 481px) {
	#concept { padding: 0px;}
	#concept h2 { font-size: 30px;}
	#concept p { font-size: 15px; line-height: 1.8;}
	#concept p span { display: block;}
	#concept p img { width: 50%}

	#flow ul,
	#flow .box { margin: 0 auto 80px;}

	#flow ul li dl { display: block; padding: 10px 25px 20px;}
	#flow ul li dl dt { width: 100%; padding-bottom: 15px; border-right: 0;}
	#flow ul li dl dd { width: 100%; padding: 0;}

	#flow .box { padding: 30px 20px;}
	#flow .box h3 { margin-bottom: 20px; font-size: 17px;}
	#flow .box p { font-size: 14px; line-height: 1.6; letter-spacing: 0.05rem;}
	#flow .box p.note { font-size: 12px;}
}



/* ---------- お問い合わせ ---------- */
#contact { margin-bottom: 50px; padding: 30px 0;}
#contact .inner { width: 92%; max-width: 950px; margin: 0 auto;}
#contact ul { margin: 0 auto 40px; background: #fff; border: solid 1px #dbe2e9; border-bottom: none;}
#contact ul li { border-bottom: solid 1px #dbe2e9;}
#contact ul li dl { display: table; width: 100%;}
#contact ul li dl dt,
#contact ul li dl dd { position: relative; display: table-cell; color: #000; font-size: 18px; font-weight: 700; line-height: 1.8; vertical-align: top;}
#contact ul li dl dt { width: 36%; padding: 20px 0 20px 40px; background: #eef2f6;}
#contact ul li dl dt span { display: inline-block; margin-left: 6px; padding: 4px 5px; background: #c8b079; border-radius: 3px;
 color: #fff; font-size: 13px; line-height: 1; vertical-align: middle;
}
#contact ul li dl dd { width: 64%; padding: 15px 40px;}
#contact ul li dl dd input[type="text"],
#contact ul li dl dd input[type="tel"],
#contact ul li dl dd input[type="email"] { width: 100%; padding: 6px; background: #f5f6f7; border: solid 1px #dbe2e9; border-radius: 4px;}
#contact ul li dl dd textarea { width: 100%; height: 170px; padding: 6px; background: #f5f6f7; border: solid 1px #dbe2e9; border-radius: 4px;}

#contact p { margin-bottom: 30px; letter-spacing: 0.075rem; line-height: 2; text-align: center;}
#contact p a { color: #fff;}
#contact p a:hover { text-decoration: none;}
#contact .send-btn { width: 60%; max-width: 350px; margin: 0 auto; box-shadow: 0 0 8px #222;}
#contact .send-btn input{ display: block; width: 100%; padding: 25px 0; background: linear-gradient(#b59e68,#c8b17a); border: none;
 color: #fff; font-size: 24px; line-height: 1; text-align: center;
 appearance: none; -webkit-appearance: none;
}
#contact .send-btn input:hover{ opacity: 0.85;}

#privacy { padding: 50px 0 100px;}
#privacy .box { width: 90%; max-width: 800px; margin: 0 auto; padding: 60px 50px; background: #fff; border: solid 3px #ddd; color: #000;}
#privacy .box h3 { margin-bottom: 30px; font-size: 26px; letter-spacing: 0.075rem; text-align: center;}
#privacy .box p { margin-bottom: 30px; font-size: 18px; letter-spacing: 0.075rem;}
#privacy .box ol li{ position: relative; margin: 0 auto 20px; padding: 0px; padding-left: 40px;}
#privacy .box ol li:last-child { margin: 0 auto;}
#privacy .box ol li span { display: block; width: 25px; height: 25px; line-height: 25px; background: #b8a16b; border-radius: 50%;
 color: #fff; font-size: 16px; font-weight: 700; text-align: center;
 position: absolute; left: 0; top: 0;
}
@media (max-width: 801px) {
	#contact ul li dl dt,
	#contact ul li dl dd { font-size: 15px;}
	#contact ul li dl dt { padding: 12px 0 12px 10px;}
	#contact ul li dl dt span{ font-size: 11px;}
	#contact ul li dl dd { padding: 12px 20px;}
	#contact p { font-size: 14px;}
	#contact .send-btn input { padding: 18px 0; font-size: 20px;}

	#privacy .box { padding: 40px 30px;}
	#privacy .box h3 { font-size: 21px;}
	#privacy .box p { font-size: 16px;}
}
@media (max-width: 641px) {
	#contact ul li dl dt,
	#contact ul li dl dd { display: block; width: 100%;}
	#contact ul li dl dt { padding: 12px 20px;}
	#contact ul li dl dd { padding: 18px 20px;}
	#contact p { font-size: 14px; text-align: left;}

	#privacy .box p { font-size: 14px;}
	#privacy .box ol li{ margin: 0 auto 10px; padding-left: 30px; font-size: 14px;}
	#privacy .box ol li span { width: 20px; height: 20px; line-height: 20px; font-size: 14px;}
}
@media (max-width: 641px) {
	#contact ul { margin: 0 auto 20px;}
	#contact ul li dl dt { padding: 8px 15px; font-size: 14px;}
	#contact ul li dl dd { padding: 15px;}
	#contact .send-btn input { padding: 15px 0;}

	#privacy .box { padding: 30px 20px;}
	#privacy .box h3 { margin-bottom: 20px;}
	#privacy .box p { margin-bottom: 20px;}

}