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

/* ===================================================================
 TOP
=================================================================== */
a.btn{ width: 90%; max-width: 530px; position: relative; background: #3A2820; padding: 14px 50px 12px 35px; color: #fff; margin: 0 auto; text-align: center; font-size: 20px; line-height: 1.2; display: block;}
a.btn:after { position: absolute; right: 15px; top: 20px; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; font-size: 12px;}

a.btn-s{ position: relative; background: #3A2820; padding: 14px 45px 12px 30px; color: #fff; margin: 0 auto; text-align: center; font-size: 16px; line-height: 1.2;}
a.btn-s:after { position: absolute; right: 10px; top: 16px; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; font-size: 12px;}

@media screen and (max-width: 959px) {
    a.btn{  font-size: 18px;}
}

/* メインビジュアル
---------------------------------------------------------------------- */
#mv h2 { color: #FFF; }

@media only screen and (min-width: 1730px) {
    #mv h2 {}
    #mv .mv-photo { position: absolute; top:0; left:0;}
    #mv .mv-catch { position: absolute; left:1390px; }
}

@media only screen and (min-width: 1025px) and (max-width: 1729px) {
    #mv h2 {}
    #mv .mv-photo { position: absolute; top:0; right: 340px; z-index: 1;}
}

@media only screen and (min-width: 1367px), print  {
    #mv { clear:both; position: relative; width:100%; height: 840px; margin:0; padding:0; text-align:center; }
    #mv:after { content:" "; display:block; clear:both;}
    #mv h2 { }
    #mv .mv-catch { position: absolute; right:0; width: 340px; height: 590px; padding: 1em 60px 0 0; writing-mode: vertical-rl; background: url("../images/mv_logomark.png") no-repeat right 60px bottom 0; z-index: 3;}
    #mv .mv-catch p { margin-left: 0.6em; text-align: left; font-size: 27px; line-height: 1.7; color: #39261F;}
}

@media only screen and (min-width: 1025px) and (max-width: 1366px)   {
    #mv { clear:both; position: relative; width:100%; height: 600px; margin:0; padding:0; text-align:center; }
    #mv:after { content:" "; display:block; clear:both;}
    #mv h2 { }
    #mv .mv-catch { position: absolute; right:0; width: 340px; height: 490px; padding: 1em 70px 0 0; writing-mode: vertical-rl; background: url("../images/mv_logomark.png") no-repeat right 100px bottom 0; background-size: auto 100px; z-index: 3;}
    #mv .mv-catch p { margin-left: 0.6em; text-align: left; font-size: 20px; line-height: 1.7; color: #39261F;}
	#mv .mv-photo img.sp { display:none;}
}

@media only screen and (min-width: 1025px) {
	#mv .mv-photo img.sp { display:none;}
}

@media only screen and (max-width: 1024px) {
    #mv { clear:both; width:100%; margin:52px 0 0 0; padding:0; text-align:center; }
    #mv:after { content:" "; display:block; clear:both;}
    #mv h2 { }
    #mv .mv-photo { position: relative; top:0; left:0; margin-bottom: 20px; text-align: center; z-index: 1;}
    #mv .mv-catch { clear: both;}
    #mv .mv-catch p { margin-left: 0.6em; text-align: center; font-size: 27px; line-height: 1.7; color: #39261F;}
    #mv .mv-catch:after { content:" "; display:block; clear:both;}
	#mv .mv-photo img.pc { display:none;}
}

@media only screen and (max-width: 640px) {
    #mv h2 {}
    #mv .mv-catch p { font-size: 18px; }
}

@media only screen and (max-width:420px) {
    #mv h2 { }
}

/* RECOMMEND ========================================================== */
#recommend { width: 100%; background: #3A2820; text-align: center; padding: 20px 0; z-index: 10;}
#recommend ul { width: 94%; max-width:1250px; margin: 0 auto; list-style: none;}
#recommend ul li { position: relative; width: 32%; background: #fff; text-align: left; letter-spacing: 0; }
#recommend ul li a { padding: 5px; height: 160px; display: block; text-decoration: none; color: #000;}
#recommend ul li img { float: left; width: 240px; height: 150px; padding-right: 15px;}
#recommend ul li h3 { color: #D80000; font-size: 20px; padding:3em 0.5em 1em 0.5em; margin: 0; font-weight: normal; line-height: 1.3; background: url("../images/top_recommend_bg.png")no-repeat right 48px top 5px;}
#recommend ul li h3 span { font-size: 86%; color: #000;}
#recommend ul li:before { position: absolute; bottom: 5px; right: 5px; color: #F8B62C; font-family: "Font Awesome 5 Free"; content: '\f138'; font-weight: 900;}
#recommend ul li:after { content:" "; display:block; clear:both;}

@media screen and (min-width: 1025px),print {
    #recommend { position: absolute; bottom:25px; right: 0; left: 0;}
}

@media screen and (max-width: 1200px) {
    #recommend ul li a { height: 110px; }
    #recommend ul li img { width: 150px; height: 100px; }
    #recommend ul li h3 { padding-top:2.4em; font-size: 17px; background: url("../images/top_recommend_bg.png")no-repeat right 48px top 2px; background-size: 45px auto;}
}

@media screen and (max-width: 960px) {
	#recommend ul li { width: 400px; max-width: 100%; margin:0 auto 20px auto; }
    #recommend ul li p { font-size: 15px;}
    #recommend ul li h3 { background: url("../images/top_recommend_bg.png")no-repeat right 96px top 2px; }
}

/* お知らせ ==================================================================== */
#top-osirase { width: 94%; max-width: 1250px; margin: 0 auto; padding: 25px 0 25px 0; background: #FFF;}
#top-osirase:after { content:" "; display:block; clear:both;}
#top-osirase h3 { float: left; width: 180px; padding: 1em 15px; font-size: 18px; text-align: left; color: #39261F; }
#top-osirase ul { float: left; width: calc(100% - 320px); border-left: 1px solid #CCC; border-right: 1px solid #CCC; }
#top-osirase ul li { padding: 1em 15px; font-size: 17px; text-align: left; }
#top-osirase ul li .date:before { font-family: "Font Awesome 5 Free"; content: '\f138'; font-weight: 900; color: #94837A; font-size: 14px; top:0; left: 0; padding-right: 0.7em; }
#top-osirase ul li:nth-child(even) { background: url("../images/bg_check_gr.png");}
#top-osirase ul li .date { width: 180px; float: left; font-size: 15px; color: #595454; padding: 2px 0 0 0;}
#top-osirase .link-list { float: right; width: 120px; text-align: right; font-size: 14px; padding-top: 1.2em;}
#top-osirase .link-list:before { font-family: "Font Awesome 5 Free"; content: '\f105'; font-weight: 900; color: #94837A; font-size: 12px; top:0; left: 0; padding-right: 0.7em; }

@media only screen and (max-width: 640px) {
    #top-osirase h3{ float: none; width: 100%; text-align: center;}
    #top-osirase ul{ float: none; width: 100%; border-left:none; border-right:none; border-top: 1px solid #CCC;  border-bottom: 1px solid #CCC;}
    #top-osirase .link-list{ float: none; width: 100%;}
    #top-osirase ul li .date { width: 100%; float: none;}
}

/* 受賞 ==================================================================== */
#top-award { background: #FEF6E6; text-align: center; padding: 35px 0 25px 0;}
#top-award ul { width: 94%; max-width: 1250px; list-style: none; margin: 0 auto; display:-webkit-box; display:-webkit-flex; display:-ms-flexbox; display:flex; -webkit-flex-wrap:wrap; -ms-flex-wrap:wrap; flex-wrap:wrap; -webkit-box-pack: justify; justify-content: space-between;}
#top-award ul li { width: 48.8%; margin: 0 auto 20px auto;}
#top-award ul li:first-child { margin-right: 2.4%;}

@media screen and (max-width: 1024px) {
    #top-award ul li:first-child { margin-right:0;}
    #top-award ul li { width: 100%;}
}

/* このような方にオススメ ========================================================== */
#top-like { width: 94%; max-width: 1250px; background: #fff; text-align: center; margin: 0 auto; padding: 50px 0;}  
#top-like .txt { width: 410px; }
#top-like .txt h3 { padding: 51px 0 10px 33px; margin-bottom:0.5em; font-size: 25px; font-weight: bold; text-align: left; line-height: 1.3; letter-spacing: 0.06em; background: url("../images/top_like_h3.gif") no-repeat left top;}
#top-like ul {}
#top-like ul li { position: relative; background: url("../images/ico_line_dash.png") repeat-x left bottom; text-align: left; margin: 0; padding: 0.65em 0 0.5em 1em; font-size: 18px;}
#top-like ul li:before { position: absolute; font-family: "Font Awesome 5 Free"; content: '\f111'; font-weight: 900; color: #F8B62C; font-size: 9px; top:40%; left:0;}

#top-like .slide { margin-top: 15px; position: relative; width: calc(100% - 420px); }
#top-like .swiper-container { margin-left: auto; margin-right: auto; max-width: 702px; padding: 0;}
#top-like .swiper-container img { border: 1px solid #3A2820; }

@media screen and (max-width: 1024px) {
	#top-like .txt { width: 100%; max-width: 700px; margin:0 auto 20px auto;}
    #top-like .txt h3 { font-size: 21px; padding: 60px 0 20px 33px;}
    #top-like .slide { width: 100%; margin:0 auto;}
}

/* TERADAの家づくりとは ========================================================== */
#top-design { clear: both; background: #F4F3F1 url("../images/top_design_bg.jpg") no-repeat center top; padding: 70px 0 0 0;}
#top-design h3 { text-align: center; font-size: 32px; font-weight: bold; margin: 0 auto; padding: 50px; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline;}
#top-design h3 strong { font-size: 44px;}
#top-design p.catch { font-size: 18px; font-weight: bold; margin: 20px 0 60px 0;}

@media only screen and (max-width: 959px) { 
    #top-design h3 { font-size: 22px; }
    #top-design h3 strong { font-size: 28px;}
}

@media only screen and (max-width: 640px) { 
    #top-design h3 { font-size: 20px; padding: 50px 10px 50px 24px; }
    #top-design h3 strong { font-size: 25px;}
}


#top-design-wrap { background: url("../images/top_design_wrap.jpg") no-repeat center bottom; background-size: cover; padding: 90px 0;}
#top-design-wrap:after { content:" "; display:block; clear:both;}
#top-design-wrap section { width: 90%; max-width: 1250px; margin: 0 auto;}
.design-catch { text-align: center; padding:0 0 50px 0; background: url("../images/mv_logomark.png") no-repeat right 1% top 26%;}
.design-catch p { font-size: 27px; margin: 0 auto; padding:42px 48px; color: #39261F; text-align: center; line-height: 1.8; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline-block; }
.design-catch h4 { font-size: 43px; clear: both; padding: 0 0.3em; margin-bottom: 1.3em; color: #39271F; }
.design-catch h4 span { display: inline-block; background: url("../images/ico_line_stripe.png") repeat-x; background-position: center bottom 8px;}
.design-message { padding: 55px 5% 35px 5%; background:rgba(255,255,255,0.6); text-align: center;}
.design-message h5 { font-size: 30px; margin-bottom: 1.2em; padding: 0 0.8em 0 1em; font-weight: bold; background: linear-gradient(transparent 73%, #8FC31F 73%); line-height: 1.2; display: inline-block;}
.design-message p { font-size: 17px;}

@media only screen and (max-width: 959px) { 
    .design-catch { text-align: center; padding: 20px 0; background: url("../images/mv_logomark.png") no-repeat center top 93%; background-size: 90px auto;}
    .design-catch p { font-size: 25px; }
    .design-catch h4 { font-size: 33px; margin-bottom: 90px;}
    .design-message h5 { font-size: 20px;}
}

@media only screen and (max-width: 640px) { 
    #top-design-wrap {padding: 70px 0;}
    .design-catch { text-align: center; padding: 20px 0; background: url("../images/mv_logomark.png") no-repeat center top 93%; background-size: 90px auto;}
    .design-catch p { font-size: 18px; padding:42px 5px 42px 17px; }
    .design-catch h4 { font-size: 25px; }
    .design-message { padding: 35px 5% 15px 5%;}
    .design-message h5 { padding: 0 0.5em;}
    .design-message p { font-size: 16px; text-align: left;}
}


/* 見学会・イベント ========================================================== */
#top-event { width: 94%; max-width: 1250px; border: 1px solid #593D31; margin: 70px auto; padding:40px 4.8%;}
#top-event h3 { margin: 0 0 1.5em 0; padding: 0 0 0.7em 0; font-size: 16px; text-align: left; background: url("../images/top_event_h3.png") no-repeat left bottom;}
#top-event h3 strong { font-size: 32px; }
#top-event .box{}
#top-event .photo{ width: 360px; text-align: center;}
#top-event .photo img { max-height: 360px;}
#top-event .txt{ width : -webkit-calc(100% - 430px) ; width : calc(100% - 430px) ; }
#top-event .txt h4 { margin-bottom: 1em; font-size: 25px; border-bottom: 1px solid #000; text-align: left;}
#top-event .txt h4 img { float: left; margin: 3px 10px 0 0; width: 96px; height: 32px;}
#top-event .txt .data { background: url("../images/bg_check_gr.png") repeat; padding: 15px; margin-bottom: 20px;}
#top-event .txt .data li { text-align: left; margin:0.5em 0;}
#top-event .txt .data li i { font-style: normal; font-weight: bold; color: #595656; text-align: center; width: 1.2em; margin-right: 0.5em;}
#top-event .txt .comment {text-align:left; margin: 0 0 50px 0;}

@media screen and (max-width: 1024px) {
    #top-event h3 strong { font-size: 27px; }
    #top-event .photo{ margin: 0 auto 20px auto; }
    #top-event .txt{ width: 700px; }
    #top-event .txt h4 { font-size: 21px;}
    #top-event .txt h4 img { width: 66px; height: 22px;}
}



/* 建築実例 ========================================================== */
#top-work { background: #F4F3F1; position: relative; padding: 50px 0;}
#top-work h3 span { padding: 0 0.3em; font-size: 43px; font-weight: bold; display: inline; background: url("../images/ico_line_stripe.png") repeat-x; background-position: center bottom 8px;}
#top-work h3 { margin: 0 auto 50px auto; font-size: 18px; font-weight: bold; letter-spacing: 0.15em;}
#top-work .case-wrap { width: 94%; max-width: 1250px; margin: 0 auto;}
#top-work .case { margin-bottom: 40px; }
#top-work .case ul li { background: url("../images/ico_line_dash2.png") repeat-x left bottom; text-align: left; padding: 0.4em 0; }
#top-work .case ul li br { display: none; }

#top-work .case .photo { position: relative; max-width: 600px; height: 400px; background-color: #000; }
#top-work .case .photo:after { content:" "; display:block; clear:both;}
#top-work .case .photo .photo-on { width:100%; color:#fff; text-align:center; margin:0 auto; padding:0; position:absolute; top: 50%; left: 50%; 
-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); }
#top-work .case .photo a { background:#000; display: block; }
#top-work .case .photo a .photo-on { display:none;}
#top-work .case .photo a:hover { opacity:1; filter: alpha(opacity=100);}
#top-work .case .photo a:hover .photo-on { display: block;}
#top-work .case .photo a:hover img { opacity:0.45; filter: alpha(opacity=45); -webkit-transition: all .3s; transition: all .3s; }
#top-work .case .photo a:hover .photo-on:before { position: absolute; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; color: #fff; font-size: 16px; padding-top: 0.6em; right: 10px; }

#top-work .case .photo .photo-on h4 { margin:0 auto ; padding:0.5em 1.5em 1.2em 1.5em; text-align:center; font-size:20px; letter-spacing:0.12em; line-height:1.2; color:#fff; background: url("../images/top_work_h4.png") no-repeat center bottom;}

@media screen and (max-width: 1249px) {
    #top-work .case .photo { position: relative; width: 100%; height: auto;}
}

@media only screen and (min-width: 960px) {
	#top-work .case .photo img { width:100%; height:400px; object-fit: cover;}
}

@media only screen and (min-width: 641px) and (max-width: 959px) {
	#top-work .case .photo img { width:100%; height:300px; object-fit: cover;}
}

/* INSTAGRAM ========================================================== */
#top-instagram { background: #FAFAFA; width: 100%; padding: 50px 0 50px 0; }
#top-instagram:after { content:" "; display:block; clear:both;}
#top-instagram h3 { text-align: center; font-size: 26px; font-weight: bold; margin-bottom: 50px; }
#instagram-box { position: relative; width: 94%; max-width: 1250px; margin: 0 auto; text-align: center; }
#instagram-box:after { content:" "; display:block; clear:both;}
#instagram-box h4{ position: absolute; width: 150px; top:20%; left:0; right: 0; margin: 0 auto; z-index: 100;}

.instagram{ width: 100%; margin: 0 auto; padding: 0;}
.instagram { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
.instagram li { list-style-type: none; position: relative; width: 24%; margin-bottom: 17px;}
.instagram li:before{ content: ""; display: block; padding-top: 100%;}
.instagram li:hover { opacity:0.6; filter: alpha(opacity=60); -webkit-transition: all .3s; transition: all .3s;}
.instagram img{ position: absolute; width: 100%; height: 100%; top: 0; right: 0; bottom: 0; left: 0; margin: auto; object-fit: cover;}

@media screen and (max-width: 1024px) {
	.instagram li { width: 48%; }
    #instagram-box h4 { top:36%;}
}

@media screen and (max-width: 480px) {
    #instagram-box h4 { width:90px; top:32%;}
}

/* BLOG ========================================================== */

#top-blog { background: #F4F3F1; padding: 50px 0; }
#top-blog h3 { text-align: center; margin-bottom: 50px;}
#top-blog .flex { width:100%; max-width: 1250px; margin: 0 auto; }
#top-blog .title h3 { text-align: left; font-size: 19px; padding: 22px 10px 10px 15px;}
#top-blog .title h3:before { font-family: "Font Awesome 5 Free"; content: '\f304'; font-weight: 900; color: #3A2820; font-size: 20px; padding-right: 0.3em; } 
#top-blog dl { clear:both; width:94%; margin: 0 auto; text-align: left; border-bottom:1px solid #EFF3EC; }
#top-blog dl:after { content:" "; display:block; clear:both;}
#top-blog dt { padding: 10px 0 5px 0; float: left; width:150px; border-top:1px solid #EFF3EC; color:#777; }
#top-blog dt img { width: 144px; height: 144px;}
#top-blog dd { float: left; width:calc(33.3% - 150px); padding: 20px 25px 5px 0; border-top:1px solid #EFF3EC; font-size: 17px; padding-left: 1.3em; text-indent: -1.3em;}
#top-blog dd a { color: #000;}
#top-blog dd .date { color: #585754; text-align: right; font-size:14px; }
#top-blog a.go-blog { clear: both; text-align: right; color: #796258; float: right; margin: 20px 25px 0 0;}
#top-blog a.go-blog:before { font-family: "Font Awesome 5 Free"; content: '\f138'; font-weight: 900; color: #796258; opacity: 0.6; font-size: 16px; padding-right: 0.5em; vertical-align:middle;}

#top-blog #blog-staff { width:100%; padding: 0 0 15px 0;}
#top-blog #blog-staff { background:#fff url("../images/top_blog_staff_line.gif") repeat-x bottom left;}
#top-blog #blog-staff .title { height:70px; margin-bottom: 20px; background:#fff url("../images/top_blog_staff_tit.gif") repeat-x top left;}
#top-blog #blog-staff dd:before { font-family: "Font Awesome 5 Free"; content: '\f27a'; font-weight: 900; color: #AFCA5E; font-size: 14px; padding-right: 0.3em; vertical-align:middle;}

@media only screen and (max-width: 1024px) {
    #top-blog dt { clear: left;}
    #top-blog dd { width:calc(100% - 150px);}
}

@media only screen and (max-width: 640px) {
	#top-blog dt { width: 80px; padding-bottom: 5px; }
	#top-blog dd { width:calc(100% - 90px); font-size: 15px; }
    #top-blog dt img { width: 72px; height: 72px;}
    #top-blog #blog-staff .title {height: auto; background-size: auto 100%;}
    #top-blog #blog-staff { width: 100%; padding: 15px 0; margin: 0 auto 30px auto;}
}

/* BLOG ==========================================================
#top-blog dl { clear:both; width: 90%; margin: 0 auto; text-align: left; border-bottom:1px solid #EFF3EC; }
#top-blog dt { padding: 10px 0 5px 0; clear: left; float: left; width: 160px; border-top:1px solid #EFF3EC; color:#777; }
#top-blog dt img { width: 144px; height: 144px;}
#top-blog dd { padding: 20px 0 5px 0; margin-left:160px; border-top:1px solid #EFF3EC; font-size: 17px; padding-left: 1.3em; text-indent: -1.3em;}

#top-blog #blog-boss,
#top-blog #blog-staff { width: 48%; padding: 0 0 15px 0;}
#top-blog #blog-boss { background:#fff url("../images/top_blog_boss_line.gif") repeat-x bottom left;}
#top-blog #blog-staff { background:#fff url("../images/top_blog_staff_line.gif") repeat-x bottom left;}
#top-blog #blog-boss .title { height:70px; background:#fff url("../images/top_blog_boss_tit.gif") repeat-x top left;}
#top-blog #blog-staff .title { height:70px; background:#fff url("../images/top_blog_staff_tit.gif") repeat-x top left;}
#top-blog #blog-boss dd:before { font-family: "Font Awesome 5 Free"; content: '\f27a'; font-weight: 900; color: #C8B188; font-size: 14px; padding-right: 0.3em; vertical-align:middle;}
#top-blog #blog-staff dd:before { font-family: "Font Awesome 5 Free"; content: '\f27a'; font-weight: 900; color: #AFCA5E; font-size: 14px; padding-right: 0.3em; vertical-align:middle;}

@media only screen and (max-width: 1024px) {
	#top-blog dt { clear: both; width: 80px; padding-bottom: 5px; }
	#top-blog dd { margin-left:80px; font-size: 15px; }
    #top-blog dt img { width: 72px; height: 72px;}
    #top-blog #blog-boss .title,
    #top-blog #blog-staff .title {height: auto; background-size: auto 100%;}
    #top-blog #blog-boss,
    #top-blog #blog-staff { width: 100%; padding: 0 0 15px 0; margin: 0 auto 30px auto;}
}
 */