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

/* ===================================================================
 MV
=================================================================== */
#mv { width: 100%; margin:0 auto; padding: 0; text-align: center; }
#mv #mv-l { width: 100%;}
#mv #mv-r { width: 100%; position: relative; }
#mv #mv-r img.mv-r-bg {}
#mv #mv-r .mv-slide { width:62.5%; aspect-ratio: 3 / 2; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;}
#mv #mv-r .mv-slide .slide-img { width:100%; max-width: 600px; }
#mv #mv-r .mv-slide .slick-slide { margin: 0; transition: all ease-in-out .3s; opacity: 1;}

@media only screen and (min-width: 960px) {
    #mv { text-align: center; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center;}
    #mv #mv-l { width: 50%;}
    #mv #mv-r { width: 50%; position: relative; }
    #mv #mv-l img,
    #mv #mv-r img.mv-r-bg { width:100%;}
}

@media only screen and (max-width:599px) {
    
}

/* ===================================================================
 main
=================================================================== */
#main { clear: both; width: 100%; padding: 0; text-align: center;}

#information { background: #C2B8AF; padding: 20px 0; margin-bottom: 70px;}
#information section { width: 90%; max-width:1400px; margin:0 auto;}
#information h2 { width:180px; color: #FFF; }
#information dl { width:calc(100% - 360px); text-align:left; border-left:1px solid #FFF; border-right:1px solid #FFF; line-height: 1.2;}
#information dl dt { padding:16px 0 6px 30px; clear:left; float:left; width:10em; }
#information dl dd { padding:16px 0 6px 10px; margin-left:10em;}
#information dl:after,#information dl dt:after,#information dl dd:after { content:" "; display:block; clear:both;}
#information a.link { width: 120px; text-align: right; margin: 10px 0 0 0; text-decoration: underline;}

@media only screen and (max-width: 640px) {
    #information h2 { width:180px; color: #FFF; margin-bottom: 10px; }
    #information dl { width:100%; border: none; border-top:1px solid #FFF; border-bottom:1px solid #FFF;}
	#information dl dt { clear: both; float: none; width: 100%; padding:16px 0 3px 5px; }
	#information dl dd { margin-left:0; border-top:none; padding:3px 0 16px 5px; }
    #information a.link { width: 100%; text-align: right; text-decoration: underline;}
}

#top-message { position: relative; padding-bottom: 120px; text-align: center; background: url("../images/bg_check.png") no-repeat right bottom;}
#top-message:after { content:" "; display:block; clear:both;}
#top-message section { width: 90%; max-width:1400px; margin:0 auto;}
#top-message section .photo { margin: 0; width:50%;}
#top-message section .txt { width:50%; max-width: 480px; margin:0 auto; padding:100px 0 180px 20px; text-align: left;}
#top-message section .txt h3{ margin:0 0 2.5em 0; padding:0; font-size: 31px; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#top-message section .txt h3:after{ content: ''; position: absolute; bottom: -1em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}

@media only screen and (max-width:959px) {
    #top-message { padding-bottom:30px;}
	#top-message section .photo { float:none; margin: 0 auto; width:90%;}
    #top-message section { float:none; margin: 0 auto; width:90%;}
    #top-message section .txt { width:100%; margin: 0 auto 15px auto; padding:50px 0; }
}

@media only screen and (max-width: 640px) {
    #top-message section {background-size: 90% auto;}
    #top-message section .txt h3{ font-size: 21px;}
}

/* オーダー家具 ========================================================== */
#top-order { position: relative; text-align: center; margin-bottom: 60px;}
#top-order:after { content:" "; display:block; clear:both;}
#top-order section { width: 90%; max-width:1400px; margin:0 auto;}
#top-order section .photo { margin: 0; width:30%; text-align: right;}
#top-order section .txt { width:61%; margin:0; padding:100px 0; text-align: left;}
#top-order section .txt:after { content:" "; display:block; clear:both;}
#top-order section .txt h3{ font-size: 31px; margin:0 0 2.5em 0; padding:0; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#top-order section .txt h3:after{ content: ''; position: absolute; bottom: -0.8em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#top-order section .txt p {}

#top-order .order-list { max-width: 850px; margin:40px auto 0 auto;}
#top-order .order-list ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center;}
#top-order .order-list ul li{ position: relative; width:23.53%; aspect-ratio: 1 / 1; margin-bottom:10px; border: 1px solid #201211; overflow: hidden;}
#top-order .order-list ul li h4 { position: absolute; bottom: 0; width: 100%; height: 46px; padding: 5px 20px 5px 0; font-size: 15px; font-weight: bold; text-align: center; color: #FFF; background-color:rgba(32,18,17,0.8); line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 11111;}
#top-order .order-list ul li h4:after { position: absolute; top:40%; right: 10px; font-family: "Font Awesome 6 Free"; content: "\f35a"; font-size: 14px; font-weight: normal; color: #FFF;}
#top-order .order-list ul li img { width:100%; height:100%; object-fit: cover; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-position:center; font-family: 'object-fit: cover; object-position: center;'}

@media only screen and (max-width:1200px) {
    #top-order .top-order-cut { float:none; margin: 0 auto; width:90%; max-width: 400px; text-align: center;}
    #top-order .order-list { clear: both; width:90%; max-width: 1142px; margin:0 auto; padding-top:30px;}
    #top-order section .txt { width:90%; margin:0 auto; padding:50px 0; text-align: left;}
	#top-order section .txt p { float: none; width:100%; margin-bottom: 30px;}
}

@media only screen and (max-width:640px) {
    #top-order { margin-bottom: 30px;}
	#top-order .top-order-cut { max-width: 300px; }
    #top-order section { float:none; margin: 0 auto; width:94%;}
    #top-order section .txt { padding-bottom:20px;}
    #top-order section .txt h3{ font-size: 21px;}
    #top-order .order-list ul li{ width:48.5%; margin-bottom: 15px;}
}

/* リフォーム ========================================================== */
#top-reform {position: relative; text-align: center; margin-bottom: 50px; padding-bottom: 240px; background: url("../images/bg_check.png") no-repeat right bottom;}
#top-reform:after { content:" "; display:block; clear:both;}
#top-reform .photo { float:left; margin: 0; width:50%;}
#top-reform section { float:right; margin: 0; width:50%;}
#top-reform section .txt { width:50%; margin:0 37.5% 0 12.5%; padding:20px 0; text-align: left;}
#top-reform section .txt h3{ font-size: 31px; margin:0 0 2.5em 0; padding:0; font-weight: bold; text-align: left; color: #5A0023; position: relative; display: inline-block;}
#top-reform section .txt h3:after{ content: ''; position: absolute; bottom: -0.8em; display: inline-block; width: 80px; height: 1px; left: 0; background-color:#C2B8AF;}
#top-reform section .txt a { color: #590022; text-decoration: underline;}

@media only screen and (max-width: 1200px) {
	#top-reform .photo { float:none; margin: 0 auto; width:90%;}
    #top-reform section { float:none; margin: 0 auto; width:90%;}
    #top-reform section .txt { width:100%; margin: 0 auto; padding:50px 0; }
}

@media only screen and (max-width:640px) {
    #top-reform {margin-bottom: 0; padding-bottom: 120px;}
    #top-reform section .txt h3{ font-size: 21px;}
}

/* 建築実例 ========================================================== */
#top-gallery { width: 100%; padding: 90px 0; background: url("../images/top_gallery.jpg") no-repeat left top; background-size:65.63% auto;}
#top-gallery section { width: 100%; }
#top-gallery section h3{ font-size: 31px; margin:1em auto 2em auto; text-align: center; font-weight: bold; color: #FFF; letter-spacing: 0.17em;}
#top-gallery .gallery-list { clear: both; width:86.67%; max-width: 1664px; margin: 0 0 40px auto; text-align: left;}
#top-gallery .gallery-list ul { margin-bottom: 20px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; align-items:center;}
#top-gallery .gallery-list ul li{ position: relative; width:25%; margin: 0; border: none; aspect-ratio: 1 / 1; overflow: hidden;}
#top-gallery .gallery-list ul li h4 { position: absolute; bottom: 0; width: 100%; height: 60px; padding: 5px 25px 5px 0px; font-size: 17px; font-weight: bold; text-align: center; color: #FFF; background-color:rgba(32,18,17,0.8); line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 11111;}
#top-gallery .gallery-list ul li h4:after { position: absolute; top: 40%; right: 10px; font-family: "Font Awesome 6 Free"; content: "\f35a"; font-size: 17px; font-weight: normal; color: #FFF;}
#top-gallery .gallery-list ul li a { color: #FFF; font-weight: bold;}
#top-gallery .gallery-list ul li img { width:100%; height:416px; object-fit: cover; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); object-position:center; }

@media only screen and (max-width: 959px) {
    #top-gallery { padding: 40px 0; background-size:auto 260px;}
    #top-gallery section h3{ font-size: 27px;}
    #top-gallery .gallery-list { width:90%; margin: 0 auto 40px auto; }
    #top-gallery .gallery-list ul li{ width:50%; }
}

#top-map { background:#F3F2F1;}
#top-map section { width:90%; max-width: 1400px; text-align: center; margin: 0 auto; padding: 90px 0;}
#top-map section h3{ font-size: 25px;}
#top-map section p{ font-size: 17px;}
#top-map .map{ position:relative; width:100%; height:420px; margin: 0 auto;}
#top-map .map iframe { position:absolute; top:0; left:0; width:100%; height: 100%;}

@media only screen and (max-width:640px) {
    #top-map .map{ width:100%; height:320px; }
    #top-map section h3{ font-size:19px;}
    #top-map section p{ font-size: 15px;}
}