@charset "utf-8";

/* 準備中 */
#construction { text-align: center; padding: 10% 0 13% 0; color: #555; font-size: 22px;}
#construction i { font-size: 30px; color: #777;}

/* ページタイトル */
#page-title { clear:both; width:100%; height:240px; margin:0 auto; padding:76px 0 0 0; text-align:center; background: #3A2820 url("../images/title_bg_logo.png") no-repeat right 10% bottom 20px; }
#page-title h2 { margin:0 auto; padding:0.5em 1.5em 0.5em 1.5em; text-align:center; font-size: 41px; letter-spacing:0.12em; line-height:1.2; color:#fff; background: url("../images/title_h2.png") no-repeat center bottom;}
#page-title:after { content:" "; display:block; clear:both;}

/* --------------------------------------------------------------
#page-title { clear:both; width:100%; height:240px; margin:0 auto; padding:76px 0 0 0; text-align:center; background: url("../images/title_bg.jpg") no-repeat center top; background-size: cover; }
#page-design #page-title,
#page-performance #page-title,
#page-passive #page-title,
#page-strong #page-title,
#page-warranty #page-title{ background: url("../images/title_design.jpg") no-repeat center top; background-size: cover; }
#page-sekou_you #page-title { background: url("../images/title_sekou_you.jpg") no-repeat center top; background-size: cover; }
#page-prologue #page-title { background: url("../images/title_prologue.jpg") no-repeat center top; background-size: cover; }
#page-price #page-title { background: url("../images/title_price.jpg") no-repeat center top; background-size: cover; }
#page-reform #page-title { background: url("../images/title_reform.jpg") no-repeat center top; background-size: cover; }
#page-staff #page-title { background: url("../images/title_staff.jpg") no-repeat center top; background-size: cover; }
#page-kaisya #page-title { background: url("../images/title_kaisya.jpg") no-repeat center top; background-size: cover; }
#page-sdgs #page-title { background: url("../images/title_sdgs.jpg") no-repeat center top; background-size: cover; }
#page-event #page-title { background: url("../images/title_event.jpg") no-repeat center top; background-size: cover; }
#page-osirase_list #page-title,
#page-osirase #page-title { background: url("../images/title_osirase.jpg") no-repeat center top; background-size: cover; }
#page-privacy #page-title { background: url("../images/title_privacy.jpg") no-repeat center top; background-size: cover; }
-------------------------------------------------------------- */
@media only screen and (max-width: 1400px) { 
    #page-title { background: #3A2820 url("../images/title_bg_logo.png") no-repeat right 4% bottom 20px; }
}

@media only screen and (max-width: 1024px) { 
    #page-title { margin-top: 50px; background-image: none;}
    #page-title h2 { padding: 0.5em; font-size: 30px; }
}

.bg-y { background: #FEF6E6;}
.bg-g { background: #F4F3F1;}
.bg-check { background:url("../images/bg_check_gr.png") repeat;}

.flex { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
.flex .LtoR { -webkit-flex-direction: row; flex-direction: row;}
.flex .RtoL { -webkit-flex-direction: row-reverse; flex-direction: row-reverse;}

.catch { position: relative; font-size: 18px; text-align: center; padding:0 0 40px 0; margin-bottom: 30px; letter-spacing: 0.07em; }
.catch:before { position: absolute; font-family: "Font Awesome 5 Free"; content: '\f141'; font-weight: 900; color: #8FC31F; font-size: 26px; bottom:0; left: 0; right: 0;}

/* --------------------------------------------------------------
 リフォーム
-------------------------------------------------------------- */
#page-reform .main { padding-top: 30px;}
#page-reform .main section { width: 90%; max-width: 1250px; margin: 0 auto;}
#reform-about h3,
#reform-studio h3 { margin-bottom: 2em; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#reform-about h4,
#reform-studio h4 { margin-bottom: 1.5em; font-size: 47px; text-align: center; font-weight: bold; color: #8EC31F;}

@media only screen and (max-width: 959px) { 
    #reform-about h3,
    #reform-studio h3 { font-size: 25px; line-height: 1.3;}
    #reform-about h4,
    #reform-studio h4 { font-size: 40px; }
}

@media only screen and (max-width: 640px) { 
    #reform-studio h3 br {display: none;}
    #reform-about h4,
    #reform-studio h4 { font-size: 30px; }
}

#reform-about { padding: 80px 0;}
#reform-about section { margin: 0 auto 30px auto; }
#reform-about .txt { width:36%; font-size: 17px; margin: 0 auto; padding:42px 48px; color: #39261F; line-height: 1.8; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline-block; }
#reform-about .photo { width:64%; }

@media only screen and (max-width: 959px) { 
    #reform-about .txt { width:100%; padding:30px 0 20px 30px;}
    #reform-about .photo { width:100%; }
}

#reform-about2 { padding: 80px 0;}
#reform-about2 h4 { margin-bottom: 1.5em; font-size: 32px; line-height: 1.3; text-align: center; font-weight: bold; color: #8EC31F;}
#reform-about2 h5 { position: relative; display: inline-block; margin: 1em 0 2em 0; text-align: left; font-size: 21px; font-weight: bold;}
#reform-about2 h5:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 7px; left: 0; background-color: #8FC31F; }
#reform-about2 .txt { width:52%; padding-left: 50px;}
#reform-about2 .photo { width:48%; }
#reform-about2 .photo img {margin-bottom: 10px;}
#reform-about2 .photo p {font-size: 14px; color: #555;}

@media only screen and (max-width: 640px) { 
    #reform-about2 h4 { font-size: 24px; }
    #reform-about2 h4 br { display: none;}
    #reform-about2 .txt { width:100%; padding-left:0;}
    #reform-about2 .photo { width:100%; }
}

#reform-point section { clear: both; padding:70px 0 20px 0; }
#reform-point h3 { margin-bottom: 1em; font-size: 32px; line-height: 1.3; text-align: center; font-weight: bold; color: #8EC31F;}
#reform-point-list { padding: 70px 0 20px 0;}
#reform-point #reform-point-list section { clear: both; margin-bottom: 30px; padding:70px 50px 20px 50px; background: #FFF;}
#reform-point h4 { position: relative; margin: 0 0 1em 0; padding-left: 100px; text-align: left; font-size: 27px; font-weight: bold; letter-spacing: 0.05em; color: #625048;}
#reform-point h4::before { position: absolute; left: 0; top: -5px; bottom: 0; width: 87px; height: 87px; line-height: 87px; content: attr(data-number); display: inline-block; color: #fff; font-size: 32px; text-align: center; border-radius: 50%; background:#796258;}
#reform-point h5 { position: relative; display: inline-block; margin: 1em 0 2em 0; text-align: left; font-size: 21px; font-weight: bold;}
#reform-point h5:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 7px; left: 0; background-color: #8FC31F; }
#reform-point .box { margin-bottom: 30px; }
#reform-point .box:after { content:" "; display:block; clear:both;}
#reform-point .txt { width:47%; padding:20px 50px 0 0;}
#reform-point .photo { width:53%; }
#reform-point .txt p {margin-bottom: 1.5em;}

@media only screen and (max-width: 959px) { 
    #reform-point h3 { font-size: 24px; }
    #reform-point h4 { font-size: 20px; }
    #reform-point .txt { width:100%; padding:20px 0 0 0;}
    #reform-point .photo { width:100%; text-align: center;}
}

@media only screen and (max-width: 640px) { 
    #reform-point #reform-point-list section { padding:50px 20px 20px 20px;}
    #reform-point h4 { padding-left: 60px;}
    #reform-point h4::before { width: 50px; height: 50px; line-height: 50px; font-size: 27px; }
    #reform-point h3 br,
    #reform-point h4 br { display: none;}
}

#reform-studio { padding: 80px 0 0 0;}
#reform-studio section { margin: 0 auto 30px auto; }
#reform-studio .box { margin-bottom: 20px;}
#reform-studio .box h5 { position: relative; display: inline-block; margin: 1em 0 2em 0; text-align: left; font-size: 21px; font-weight: bold;}
#reform-studio .box h5:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 7px; left: 0; background-color: #8FC31F; }
#reform-studio .txt { width:44%; padding-left: 50px;}
#reform-studio .txt p {margin-bottom: 1.5em;}
#reform-studio .photo { width:56%; }
#reform-studio ul li { width: 48%;}
#reform-studio .txt2 { padding: 30px 0 1px 0;}
#reform-studio .txt2 p { font-size: 20px; text-align: center; font-weight: bold; color: #333; }
#reform-studio .txt2 p.toi{ font-size: 30px; color: #F8B62C; text-shadow: transparent 0 0 0, rgba(0, 0, 0, 0) 0 0 0 !important;}
#reform-studio .txt2 p.toi i { font-size: 40px; color: #F8B62C;}

@media only screen and (max-width: 959px) { 
    #reform-studio .txt { width:100%; padding-left:0;}
    #reform-studio .photo { width:100%; }
}

@media only screen and (max-width: 640px) { 
    #reform-studio ul li { width:100%; margin-bottom: 15px;}
    #reform-studio .txt2 p { font-size: 18px;}
    #reform-studio .txt2 p.toi{ font-size: 19px;}
}

/* --------------------------------------------------------------
 TERADAの家づくり
-------------------------------------------------------------- */
#design-exp { background: url("../images/design_exp_bg.jpg") no-repeat center bottom; background-size: cover; padding: 150px 0; text-align: center;}
#design-exp:after { content:" "; display:block; clear:both;}
#design-exp img { max-width: 90%; margin: 0 auto;}
#design-message { max-width: 90%; margin: 0 auto; padding: 50px 0; font-size: 21px; line-height: 2.2; letter-spacing: 0.1em; text-align: center; color: #39261F;}
#design-message p { margin: 0; padding: 0;}
#design-message img { margin: 30px auto;}

@media only screen and (max-width: 1200px) { 
    #design-message p { font-size: 18px; }
}

@media only screen and (max-width: 760px) { 
    #design-message br {display:none;}
    #design-message p{ text-align: left;}
}

/* --------------------------------------------------------------
 数字でわかる家の性能
-------------------------------------------------------------- */
#page-performance .main section { width: 90%; max-width: 1250px; margin: 0 auto;}
#page-performance .main h3 { margin-bottom: 2em; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#page-performance .main .flex > * { width:48%; }
#page-performance .main .photo {text-align: center;}

#performance-about { padding: 80px 0;}
#performance-about h4 { margin-bottom: 1.5em; font-size: 47px; text-align: center; font-weight: bold; color: #8EC31F;}
#performance-about section { margin: 0 auto 30px auto; }
#performance-about .txt { font-size: 17px; margin: 0 auto; padding:42px 48px; color: #39261F; line-height: 1.8; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline-block; }

@media only screen and (max-width: 640px) { 
    #performance-about h4 { font-size: 40px; }
    #performance-about .txt { padding:42px 20px 42px 30px;}
}

#performance-spec { background: #F4F3F1; padding: 70px 0 20px 0;}

#page-performance .main #performance-spec section { clear: both; margin-bottom: 30px; padding:50px; background: #FFF;}
#performance-spec section:after { content:" "; display:block; clear:both;}
#performance-spec section h4 { position: relative; display: inline-block; margin: 1em 0 2em 0; text-align: left; font-size: 21px; font-weight: bold;}
#performance-spec section h4:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 7px; left: 0; background-color: #8FC31F; }
#performance-spec section .box { margin-bottom: 30px; }
#performance-spec section .box:after { content:" "; display:block; clear:both;}
#performance-spec section#spec1 ul li,
#performance-spec section#spec2 ul li{ width:32%; max-width: 375px; }
#performance-spec section#spec3 ul li{ width:49.2%; }

/* 高気密住宅 */
#performance-airtight { width: 90%; max-width: 1250px; margin: 0 auto 30px auto; padding: 80px 0 50px 0; }
#performance-airtight .box { margin-bottom: 30px;}
#page-performance .main #performance-airtight ul li{ width:49.2%; text-align: center;}

/* 断熱性能 */
#performance-insulation { padding: 80px 0 50px 0;}
#performance-insulation .box { margin-bottom: 30px;}
/* 換気システム */
#performance-ventilate { margin: 0 auto 30px auto; padding: 80px 0;}

@media only screen and (max-width: 959px) { 
    #page-performance .main h3 { font-size: 25px; }
    #page-performance .main .flex > * { width:100%; }
    #performance-airtight .box img { margin:0 auto;}
    #performance-insulation .box ul li { text-align: center; margin: 10px auto 0 auto;}
    #performance-airtight .photo,
    #performance-insulation .photo,
    #performance-ventilate .photo{ margin:0 auto 15px auto;}
}

@media only screen and (max-width: 640px) { 
    #page-performance .main #performance-spec section { padding:30px;}
    #page-performance .main #performance-airtight ul li{ width:100%;}
}
    
/* --------------------------------------------------------------
 最高の日当たりと風通し
-------------------------------------------------------------- */
#page-passive .main section { width: 90%; max-width: 1250px; margin: 0 auto;}
#page-passive .main h3 { margin-bottom: 2em; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}

#passive-dsn { padding: 80px 0; }
#passive-dsn ul.illust { width: 100%; margin-bottom: 30px;}
#passive-dsn ul.illust:after { content:" "; display:block; clear:both;}
#passive-dsn ul.illust li { width: 30.4%; }
#passive-dsn p { margin-bottom: 40px; }
#passive-dsn ul.photo  { width: 100%;}
#passive-dsn ul.photo li { width: 48%; }

#passive-tour { padding: 80px 0;}
#passive-tour ul li { width: 48%; }

@media only screen and (max-width: 959px) { 
    #page-passive .main h3 { font-size: 25px; }
}

@media only screen and (max-width: 640px) { 
    #passive-dsn p { text-align: left;}
    #passive-dsn ul.illust li { width:100%; text-align: center; margin-bottom: 10px;}
}

/*--------------------------------------------------------------
 耐震等級3を超える力
--------------------------------------------------------------*/
#page-strong .main section { width: 90%; max-width: 1250px; margin: 0 auto;}
#page-strong .main h3 { margin-bottom: 2em; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#page-strong .main .photo { text-align: center;}

#strong-about { padding: 80px 0; }
#strong-about .photo { width: 260px; margin-bottom: 30px;}
#strong-about .txt { text-align: left; width : -webkit-calc(100% - 300px) ; width : calc(100% - 300px) ;}
#strong-about ul li { width: 48%;}

#strong-data { padding: 80px 0 50px 0; text-align: center; }
#strong-data img { margin-bottom: 20px;}
#strong-data .movie{  width: 560px; margin:0 auto 30px auto;}
#strong-data .movie iframe{ }
#strong-data ul li p { text-align: left;}
#strong-data .flex > * { width: 48%;}

#strong-earthquake { padding: 80px 0; }
#strong-earthquake .flex > * { width: 48%;}

@media only screen and (max-width: 959px) { 
    #page-strong .main h3 { font-size: 25px; }
}

@media only screen and (max-width: 640px) { 
    #strong-data .movie{ position:relative; max-width:100%; width: 560px; height:0; padding-top:75%; margin:0 auto 30px auto;}
    #strong-data .movie iframe{ position:absolute; top:0; left:0; width:100%; height:100%;}
    #strong-about .photo,
    #strong-about .txt { width: 100%; margin-bottom: 30px;}
    #strong-data .flex > *,
    #strong-earthquake .flex > * { width: 100%;}
}

/*--------------------------------------------------------------
 TERADAの長期保証
--------------------------------------------------------------*/
#page-warranty .main section { width: 90%; max-width: 1250px; margin: 0 auto;}
#page-warranty .main h3 { margin-bottom: 2em; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#page-warranty .main .photo { text-align: center;}
#page-warranty section h4 { position: relative; display: inline-block; margin: 1em 0 2.5em 0; text-align: left; font-size: 21px; font-weight: bold;}
#page-warranty section h4:before { content: ''; position: absolute; bottom: -15px; display: inline-block; width: 60px; height: 7px; left: 0; background-color: #8FC31F; }
#warranty-about { padding: 80px 0 0 0; }
#warranty-about .catch { margin-bottom: 0;}

@media only screen and (max-width: 959px) { 
    #page-warranty .main h3 { font-size: 25px; }
}

/* 断熱材35年間無結露保証 */
#warranty-cond { padding: 40px 0 80px 0; }
#warranty-cond .flex > * { width: 48%;}

@media only screen and (max-width: 640px) { 
    #warranty-cond { padding: 40px 0; }
    #warranty-cond .txt { width: 100%;}
    #warranty-cond .photo { width: 100%; text-align: center;}
    #warranty-cond .photo img{ width: 300px; }
}

/* すまいの設備機器保証 */
#warranty-eqp { padding: 80px 0; }
#warranty-eqp .cover { width: 100%; max-width: 960px; margin: 0 auto 30px auto;}
#warranty-eqp .cover .photo { width: 40%; text-align: center;}
#warranty-eqp .cover .txt { width: 60%; text-align: left;}
#warranty-eqp h4 { }
#warranty-eqp h5 { font-size: 17px; font-weight: bold; margin-bottom: 0.3em;}
#warranty-eqp .break { width: 100%; margin:0 auto 30px auto;}
#warranty-eqp .break h5 { font-size: 18px;}
#warranty-eqp .break ul { width: 100%; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
#warranty-eqp .break ul li { text-align: center; width: 19%; max-width: 230px; font-size: 15px; line-height: 1.3;}
#warranty-eqp .break ul li img { margin-bottom: 5px;}
#warranty-eqp .break ul li p { margin-bottom: 0.2em;}
#warranty-eqp .term { clear: both;}
#warranty-eqp .term img { margin-bottom: 15px;}
#warranty-eqp .term > * { width: 48%;}

@media only screen and (max-width: 959px) { 
    #warranty-eqp .break ul { justify-content: normal;}
    #warranty-eqp .break ul li { width: 32%; margin-right: 1.3%;}
}

@media only screen and (max-width: 640px) { 
    #warranty-eqp { padding: 40px 0; }
    #warranty-eqp .cover .photo,
    #warranty-eqp .cover .txt { width: 100%;}
    #warranty-eqp .break ul { margin: 0 auto;}
    #warranty-eqp .break ul li { width: 48%; margin-right: 2%; text-align: left; font-size: 14px;}
    #warranty-eqp .break ul li p br { display: none;}
    #warranty-eqp .term > * { width: 100%; max-width: 550px; margin: 7px auto;}
}

/* 延長保証5つのポイント */
#warranty-ext { padding: 80px 0; text-align: center;}
#page-warranty #warranty-ext h4:before { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#warranty-ext img { margin: 0 auto 30px auto;}
#warranty-ext .flex > * { width: 48%;}
#warranty-ext img.sp { display: none;}

@media only screen and (max-width: 640px) { 
    #warranty-ext { padding: 40px 0;}
    #warranty-ext p { text-align: left;}
    #warranty-ext .flex > * {width: 100%;}
    #warranty-ext img.pc { display: none;}
    #warranty-ext img.sp { display: block;}
}

/* TERADAの家は長期優良住宅が標準仕様 */
#warranty-std { padding: 80px 0; }
#warranty-std .flex > * { width: 48%;}

@media only screen and (max-width: 640px) { 
    #warranty-std .flex > * { width: 100%;}
}

/* 一生涯続くアフターメンテナンスと安心の保証 */
#warranty-maint { padding: 80px 0; text-align: center;}
#page-warranty #warranty-maint h4:before { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%);}
#warranty-maint img { margin: 0 auto 30px auto;}
#warranty-maint p { text-align: left;}
#warranty-maint .flex > * { width: 48%;}
#warranty-maint img.sp { display: none;}

@media only screen and (max-width: 640px) { 
    #warranty-maint { padding: 40px 0;}
    #warranty-maint img.pc { display: none;}
    #warranty-maint img.sp { display: block;}
}

/*--------------------------------------------------------------
 ラインナップ
--------------------------------------------------------------*/
#page-lineup .main {}
#page-lineup .main h3 { margin:0 auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#page-lineup .main section { width: 90%; max-width: 1250px; margin: 0 auto;}

#page-lineup section .flex {}
#page-lineup section .photo { width: 60%; text-align: center; }
#page-lineup section .txt { width: 38%; }
#page-lineup section .photo2 { width: 100%; margin: 30px auto 0 auto;}
#page-lineup section .photo2 ul { width: 100%;}
#page-lineup section .photo2 ul li { text-align: center; width: 48%; }

#page-lineup #cozy { padding: 80px 0;}
#page-lineup #trettio { padding: 80px 0;}
#page-lineup #steel { padding: 80px 0;}

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

@media only screen and (max-width: 640px) { 
    #page-lineup .main h3 { font-size: 25px; }
    #page-lineup section .photo,
    #page-lineup section .txt { width: 100%;}
    #page-lineup section .txt { margin-bottom: 20px;}
}

@media only screen and (max-width: 420px) { 
    #page-lineup section .photo2 ul { width: 100%;}
    #page-lineup section .photo2 ul li { text-align: center; width: 100%; margin: 10px auto; }
}

/*--------------------------------------------------------------
 家づくりスケジュール
--------------------------------------------------------------*/
#page-prologue .main section { width: 90%; max-width: 1250px; margin: 0 auto;}
#page-prologue .main h3 { max-width: 90%; margin:0 auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}

#page-prologue #schd { padding: 80px 0;}
#page-prologue #schd h4 { position: relative; display: inline-block; margin: 0 0 2.5em 0; text-align: left; font-size: 21px; font-weight: bold; }
#page-prologue #schd h4:before { content: ''; position: absolute; bottom: -18px; display: inline-block; width:60px; height: 7px; left: 0; background-color: #8FC31F; }
#page-prologue #schd h4 span { color: #8FC31F; font-size: 22px; font-weight: bold;}
#page-prologue #schd p { margin-bottom: 0;}
#page-prologue #schd section { position: relative; border: 2px solid #EBE9E8; padding: 40px 50px; margin-bottom: 32px;}
#page-prologue #schd section:after { content: ""; position: absolute; top:103%; left: 50%; margin-left: -19px; border: 19px solid transparent; border-top: 19px solid #D4CDCA;}
#page-prologue #schd section.last:after { display: none;}

#page-prologue #schd section .txt { width: 54%;}
#page-prologue #schd section .photo { width: 40%; padding: 0;}

@media only screen and (max-width: 959px) { 
    #page-prologue .main h3 { font-size: 25px;}
    #page-prologue #schd section .txt { width: 100%; margin-bottom: 15px;}
    #page-prologue #schd section .photo { width: 100%; padding: 0; text-align: center;}
}

/*--------------------------------------------------------------
 スタッフ
--------------------------------------------------------------*/
#page-staff .main {}
#page-staff .main h3 { max-width: 90%; margin:80px auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}

#page-staff #staff-area section { clear: both;}
#page-staff #staff-area > *:nth-child(odd) { background: #F4F3F1;}

#page-staff #staff-area .staff { width: 90%; max-width: 1250px; margin: 0 auto; padding: 70px 0;}
#page-staff #staff-area .staff:after { content:" "; display:block; clear:both;}

#page-staff #staff-area .portrait { float: left;}
#page-staff #staff-area .txt { float: right;}
#page-staff #staff-area > *:nth-child(even) .portrait { float: right;}
#page-staff #staff-area > *:nth-child(even) .txt { float: left;}

#page-staff section .portrait { position: relative; width: 300px; height: 500px; margin-right: 15px;}
#page-staff section .portrait img { position: absolute;}
#page-staff section .portrait a.blog { position: absolute; width: 270px; height: 50px; right: -15px; bottom: 20px; padding: 12px 10px 0 0; font-size: 15px; font-weight: bold; text-align: right; background:rgba(38,27,21,0.95); color: #FFF; line-height: 1.2; text-decoration: none; z-index: 999;}
#page-staff section .portrait a.blog:after { font-family: "Font Awesome 5 Free"; content: '\f0da'; font-weight: 900; font-size: 20px; margin-left: 0.5em;}
#page-staff section .txt { width : -webkit-calc(100% - 400px) ; width : calc(100% - 400px) ;}
#page-staff section .txt .profile { width: 100%; padding: 0 0 20px 0; background: url("../images/ico_line_dash2.png") repeat-x left bottom;}
#page-staff section .txt .profile h4 { width: 50%; font-size: 25px; margin: 0; padding:30px 0 8px 35px; color: #39261F; text-align: left; line-height: 1.8; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline-block;}
#page-staff section .txt .profile h4 span {font-size: 18px;}
#page-staff section .txt .licence { width: 50%; padding-top: 20px; color: #39271F; font-weight: bold; text-align: right;}
#page-staff section .txt .comment { width: 100%; min-height: 180px; padding-top: 30px; margin-bottom: 30px;}
#page-staff section .txt .message { width: 56%; padding-top: 0.3em; }
#page-staff section .txt .like { width: 36%; font-size: 15px;}
#page-staff section .txt .like h5 {width: 56px; margin-bottom: 0.5em; padding-bottom: 0.1em; color: #8DC31F; font-weight: bold; border-bottom: 2px solid #8DC31F;}
#page-staff section .txt ul.photo { width: 100%; max-width: 850px;}
#page-staff section .txt ul.photo li { width: 50%;}
#page-staff section .txt ul.photo li img{ max-width: 100%;}

@media only screen and (max-width: 959px) { 
    #page-staff section {}
    #page-staff section .portrait { margin: 0 auto 20px auto;}
    #page-staff section .txt { width: 100%;}
    #page-staff #staff-area .portrait,
    #page-staff #staff-area > *:nth-child(even) .portrait { float: none;}
    #page-staff #staff-area .txt,
    #page-staff #staff-area > *:nth-child(even) .txt { float: none;}
}

@media only screen and (max-width: 640px) { 
    #page-staff section .portrait { width: 270px; height: 450px;}
    #page-staff section .txt .profile h4 { width: 100%;}
    #page-staff section .txt .licence { width: 100%; text-align: left;}
    #page-staff section .txt .message { width: 100%;}
    #page-staff section .txt .like { width: 100%;}
    #page-staff section .txt ul.photo { width: 100%; max-width: 425px; margin: 0 auto;}
    #page-staff section .txt ul.photo li { width: 100%; margin: 0 auto;}
}

#page-staff #staff-pict { width: 90%; max-width: 1250px; margin: 0 auto; padding:1px 0 70px 0;}
#page-staff #staff-pict ul { width: 100%;}
#page-staff #staff-pict ul li { text-align: center; width: 24%; }

@media only screen and (max-width: 760px) { 
    #page-staff #staff-pict ul li { text-align: center; width: 49%; margin-bottom: 10px;}
}

/*--------------------------------------------------------------
 会社概要
--------------------------------------------------------------*/
#page-kaisya .main {}
#page-kaisya .main h3 { margin:80px auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}

#kaisya-omoi {width: 90%; max-width: 1250px; margin: 0 auto; padding-bottom: 80px;}
#kaisya-omoi section h4 { font-size: 32px; margin: 0 auto; padding:42px 35px; color: #39261F; text-align: center; line-height: 1.8; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline-block; }
#kaisya-omoi section .txt { width : -webkit-calc(100% - 38%) ; width : calc(100% - 38%) ;}
#kaisya-omoi section .photo { width: 32%; padding: 30px 0 0 0;}
#kaisya-omoi section .photo img { margin: 10px auto;}

@media only screen and (max-width: 1250px) { 
    #kaisya-omoi section .txt { width : -webkit-calc(100% - 45%) ; width : calc(100% - 45%) ;}
    #kaisya-omoi section .photo { width: 40%;}     
}

@media only screen and (max-width: 959px) { 
    #page-kaisya .main h3 { font-size: 25px;}
    #kaisya-omoi section h4 { font-size: 21px;}
    #kaisya-omoi section .txt { width: 100%;}
    #kaisya-omoi section .photo { width: 100%;}  
    #kaisya-omoi section .photo ul li { width: 49%;}  
}

#kaisya-polepole { background: url("../images/kaisya_polepole_bg.jpg") no-repeat center top; padding: 10px 0 80px 0;}
#kaisya-polepole section { width: 90%; max-width: 1250px; margin: 0 auto; background:rgba(255,255,255,0.6); padding:50px; }
#kaisya-polepole section h4 { font-size: 30px; margin: 0 auto; padding:40px 0 40px 35px; color: #39261F; text-align: center; line-height: 1.8; background: url("../images/ico_fluffy.png") no-repeat left top; display: inline-block; }
#kaisya-polepole section .photo { width: 100%; margin: 30px auto 0 auto;}
#kaisya-polepole ul { width: 100%;}
#kaisya-polepole ul li { text-align: center; width: 33.3%;}

@media only screen and (min-width: 1920px) { 
    #kaisya-polepole { background-size: cover;}
}
@media only screen and (max-width: 959px) { 
    #kaisya-polepole section { padding:30px; }
    #kaisya-polepole section h4 { font-size: 21px; padding:40px 0 40px 10px;  }
}

#kaisya-profile { width: 90%; max-width: 1250px; margin: 80px auto; }
#kaisya-profile .txt { width : -webkit-calc(100% - 36%) ; width : calc(100% - 36%) ;}
#kaisya-profile .photo { width: 32%; padding: 0;}
#kaisya-profile .photo ul li { margin-bottom: 15px; }
#kaisya-profile .photo iframe { max-width: 100%;}
#kaisya-profile table { width:100%; }
#kaisya-profile table th, #kaisya-profile table td { padding: 10px 10px 8px 10px; text-align: left; border: 1px solid #CCC; }
#kaisya-profile table th { background: #EEE; width: 145px; }
#kaisya-profile table td ul li { padding: 10px 0 8px 0; border-bottom: 1px dashed #CCC;}
#kaisya-profile table td ul li:last-child {border-bottom: none;}
#kaisya-profile .photo2 { width: 100%; margin: 30px auto 0 auto; padding: 0;}
#kaisya-profile .photo2 ul { width: 100%;}
#kaisya-profile .photo2 ul li { text-align: center; width: 32%; }

@media only screen and (max-width: 959px) { 
    #kaisya-profile .txt { width: 100%; margin-bottom: 20px;}
    #kaisya-profile .photo { width: 100%;} 
    #kaisya-profile .photo ul { display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between;} 
    #kaisya-profile .photo ul li { width: 49%; } 
    #kaisya-profile .photo iframe { width: 100%; height: 260px;} 
}

@media only screen and (max-width: 640px) { 
	#kaisya-profile table { margin: 0 auto; }
	#kaisya-profile table tr { display:block; }
	#kaisya-profile table th { display:block; width: 100%; }
	#kaisya-profile table td { width: 100%; border:none; } 
}
   
@media only screen and (max-width: 420px) { 
    #kaisya-profile .photo2 ul li { text-align: center; width: 100%; margin: 10px auto;}
}


/*--------------------------------------------------------------
 プライバシーポリシー
--------------------------------------------------------------*/
#page-privacy .main h3 { margin:80px auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#privacy section { width: 90%; max-width: 1250px; margin: 0 auto; background: #fff; }
#privacy .catch p { text-align: left; font-size: 16px;}
#privacy .bg-g { padding: 50px 0;}
#privacy dl { padding:70px 50px 20px 50px; margin: 0 auto; background: #fff; }
#privacy dl dt { font-size: 19px; font-weight: bold;  margin-bottom: 0.5em; padding-bottom: 0.2em; border-bottom: 1px solid #CCC;}
#privacy dl dd { margin-bottom: 1.8em;}
#privacy dl dd h4 { font-weight: bold; margin: 0 0 0.3em 18px; color: #222; position: relative; display: inline-block;}
#privacy dl dd h4:before { position: absolute; font-family: "Font Awesome 5 Free"; content: '\f111'; font-weight: normal; color: #CCC; top:2px; font-size: 14px; left:-18px;}
#privacy dl dd ul { font-weight: bold; margin: 0 0 15px 18px;}
#privacy dl dd ul li {  margin: 0 0 0 15px; color: #222; position: relative; }
#privacy dl dd ul li:before { position: absolute; font-family: "Font Awesome 5 Free"; content: '\f111'; font-weight: 900; color: #AAA; top:9px; font-size: 5px; left:-15px;}
#privacy dl dd p.sign { margin-top: 30px; text-align: right;}


/*--------------------------------------------------------------
 建築実例
--------------------------------------------------------------*/
#page-sekou_you .main { width: 90%; max-width: 1250px; margin: 0 auto;}
#page-sekou_you .main h3 { margin:80px auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}

#page-sekou_you .case-wrap { width: 100%; margin-bottom: 80px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify;}
#page-sekou_you .case-wrap > * { max-width: 300px; }
#page-sekou_you .case-wrap > *:last-child { margin-right: auto; }
#page-sekou_you .case .photo { position: relative; width: 100%; max-width: 300px; height: auto; max-height: 200px; background-color: #000; text-align: center;}
#page-sekou_you .case .photo:after { content:" "; display:block; clear:both;}
#page-sekou_you .case .photo a { display: block; }
#page-sekou_you .case img { width:100%; height:200px; object-fit: cover; border: 1px solid #3A2820;}

#page-sekou_you .case h4 { margin:0.5em auto; padding:0; text-align:left; font-size:15px; line-height: 1.3; }

@media only screen and (min-width: 960px), print { 
    #page-sekou_you .case-wrap > *{ width: 24%; margin-right: 1%; margin-bottom: 20px; }
    #page-sekou_you .case-wrap > *:nth-child(4n) { margin-right: 0; }
}

@media screen and (min-width: 741px) and (max-width: 959px) {
    #page-sekou_you .case-wrap > * { width: 32%; margin-right: 1%; margin-bottom: 20px;}
    #page-sekou_you .case-wrap > *:nth-child(3n) { margin-right: 0;}
}

@media screen and (max-width: 740px) {
    #page-sekou_you .case-wrap > * { width: 48%; margin-right: 2%; margin-bottom: 15px;}
    #page-sekou_you .case-wrap > *:nth-child(even) { margin-right: 0;}
    #page-sekou_you .case h4 { font-size:14px; }
}

@media screen and (max-width: 480px) {
    #page-sekou_you .case img { height:140px;}
}

/*--------------------------------------------------------------
 建築実例　詳細
--------------------------------------------------------------*/
#page-sekou_you_ .main { width: 100%; margin: 0 auto; padding: 30px 0;}
#page-sekou_you_ .main h3 { margin:50px auto 2em auto; font-size: 30px; text-align: center; font-weight: bold; background: url("../images/h3_line.png") no-repeat center bottom;}
#page-sekou_you_ .nxt-prv-box { width: 90%; max-width: 1250px; margin: 0 auto; padding: 10px 0; }
#page-sekou_you_ .bg-check { padding:10px 0 20px 0;}

#sekou { width: 90%; max-width: 1200px; margin: 0 auto; padding:0; border-top:1px solid #EBE9E8; text-align: center;}
#sekou img { max-width: 100%; margin: 0 auto;}
#sekou .main-photo { clear: both; margin: 0 auto 40px auto; text-align: center;}
#sekou .photo { clear: both; margin: 0 auto 40px auto; text-align: center;}
#sekou .photo img { margin-bottom: 15px; max-height: 100vh;}
#sekou .photo p { clear: both; text-align: left;}
#sekou .txt { clear: both; background: url("../images/bg_check_gr.png") repeat; padding:50px 4% 30px 4%; margin: 0 auto 40px auto; text-align: left;}
#sekou .movie { width: 100%; margin: 0 auto 40px auto; position: relative; padding-bottom: 56.25%; /*アスペクト比 16:9 */ height: 0; overflow: hidden;}
#sekou .movie iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#sekou table { width:100%; margin: 0 auto 40px auto; background:#FFF; text-align: left;}
#sekou table th, #sekou table td  { padding: 10px; text-align: left; border: 1px solid #CCC; }
#sekou table th { background: #EEE; width: 180px; }
#sekou table td { }

@media only screen and (max-width: 640px) { 
    #sekou table th { background: #EEE; width: 120px; }
}

/* 削除 ====== */
#sekou-slide { clear:both; width:740px; margin:0 auto 30px auto; padding:0;}
#sekou-slide ul { clear:both; margin:0; padding:0;}
#sekou-slide ul li { clear:both; margin:0; padding:0; text-align:center;}
#sekou-slide ul li p { margin:0; text-align:left;}

/* 見学会・イベント 一覧 ========================================================== */
#page-event .main { width: 90%; max-width: 1250px; margin: 30px auto;}

#event-list section { border: 1px solid #593D31; margin: 35px auto; padding:40px 4.8%;}
#event-list .photo{ width: 360px; text-align: center;}
#event-list .photo img { max-height: 360px;}
#event-list .txt { width : -webkit-calc(100% - 430px) ; width : calc(100% - 430px) ; }
#event-list .txt h3 { margin-bottom: 1em; font-size: 25px; border-bottom: 1px solid #000; padding:0 0 2px 0; text-align: left; }
#event-list .txt h3 img { float: left; margin: 3px 10px 0 0; width: 96px; height: 32px;}
#event-list .txt .data { background: url("../images/bg_check_gr.png") repeat; padding: 15px; margin-bottom: 20px;}
#event-list .txt .data li { text-align: left; margin:0.5em 0;}
#event-list .txt .data li i { font-style: normal; font-size: 16px; font-weight: bold; color: #595656; text-align: center; width: 1.2em; margin-right: 0.5em;}
#event-list .txt .data .day {font-size: 21px; color: #D80000;}
#event-list .txt .comment {text-align:left; margin: 0;}

@media screen and (max-width: 959px) {
    #event-list .txt h3 { font-size: 21px; line-height: 1.3; }
    #event-list .txt h3 img { width: 66px; height: 22px;}
    #event-list .photo{ margin: 0 auto 20px auto; }
    #event-list .txt { width: 700px; }
    #event-list .txt .data .day {font-size: 17px; }
}

/* 見学会・イベント 詳細 ========================================================== */
#page-event .main { width: 90%; max-width: 1250px; padding: 30px 0;}

#event { border: 1px solid #593D31; margin: 0 auto; padding:70px 4.8% 50px 4.8%;}
#event h3 { margin-bottom: 1em; font-size: 30px; border-bottom: 1px solid #000; padding:0 0 2px 0; text-align: left;}
#event h3 img { float: left; margin: 5px 5px 0 0; width: 96px; height: 32px;}
#event .photo{ width: 600px; text-align: center;}
#event .photo img { max-height: 600px;}
#event .txt{ width : -webkit-calc(100% - 630px) ; width : calc(100% - 630px) ; }
#event .txt .data { background: url("../images/bg_check_gr.png") repeat; padding: 15px; margin-bottom: 20px;}
#event .txt .data li { text-align: left; margin:0.5em 0;}
#event .txt .data li i { font-style: normal; font-size: 16px; font-weight: bold; color: #595656; text-align: center; width: 1.2em; margin-right: 0.5em;}
#event .txt .data .day { font-size: 21px; color: #D80000;}
#event .txt .data .map { padding: 8px 0 0 23px;}
#event .txt .data .map a { margin: 0; padding: 5px 0; width: 140px; border: 1px solid #9B938E; color: #595656; border-radius: 20px; font-size: 14px; text-align: center; display: block;}
#event .comment { text-align:left; margin:50px auto;}
#event .comment h4 { margin: 0 0 1.2em 0; padding: 0 0 0.5em 0.5em; font-size: 20px; text-align: center; background: url("../images/top_event_h3.png") no-repeat center bottom;}
#event .detail { margin: 50px auto 0 auto; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
#event .detail > * { width: 50%; text-align: center;}

@media screen and (min-width: 960px)  and (max-width: 1250px) {
    #event .photo{ width: 60%;}
    #event .txt{ width : -webkit-calc(100% - 63%) ; width : calc(100% - 63%) ; }
}

@media screen and (max-width: 959px) {
    #event h3 { font-size: 21px; padding-bottom: 2px; line-height: 1.3; }
    #event h3 img { width: 66px; height: 22px;}
    #event .photo{ margin: 0 auto 20px auto; }
    #event .txt{ width: 600px; margin: 0 auto;}
    #event .txt h4 { font-size: 21px;}
    #event .txt .data .day { font-size: 17px;}
    #event .detail > * { width: 100%; text-align: center; margin-bottom: 10px;}
}

/*--------------------------------------------------------------
 お知らせ　一覧
--------------------------------------------------------------*/
#page-osirase_list .main {width: 90%; max-width: 1250px; margin: 0 auto; padding-top: 30px;}

#osirase-list { width: 100%; max-width: 960px; margin: 0 auto 50px auto;}
#osirase-list ul { border-top: 1px solid #CCC;}
#osirase-list ul li { padding: 1.5em 15px 1.2em 15px; border-bottom: 1px solid #CCC; font-size: 17px; }
#osirase-list 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; }
#osirase-list ul li:nth-child(even) { background: url("../images/bg_check_gr.png");}
#osirase-list ul li .date { width: 180px; float: left; font-size: 15px; color: #595454; padding: 2px 0 0 0;}

@media only screen and (max-width: 640px) {
    #osirase-list ul li .date { width: 100%; float: none;}
}

/*--------------------------------------------------------------
 お知らせ　詳細
--------------------------------------------------------------*/
#page-osirase .main {width: 90%; max-width: 1250px; margin: 0 auto; padding-top: 30px;}
#osirase h3 { font-size: 25px; border-bottom: 1px solid #000; text-align: center; padding-bottom: 0.2em; margin-bottom: 50px;}

#osirase .photo { width: 100%; max-width: 600px; margin: 0 auto 15px auto; text-align: center;}

#osirase li .date { color: #D90000; font-size: 23px;}
#osirase ul { width: 100%; max-width: 600px; margin: 0 auto 50px auto; text-align: left; border-top: none; }
#osirase li { padding: 0.8em 2px 0.6em 0; background: url("../images/ico_line_dash2.png") repeat-x left bottom; }
#osirase li:after { content:" "; display:block; clear:both;}
#osirase li i { font-size: 17px; font-style: normal; font-weight: bold; color: #595656; text-align: center; width: 1.2em; margin-right: 10px;}
#osirase li .map { float: right;}
#osirase li .map a{ width: 120px; position: relative; background: #3A2820; margin: 0 auto; padding: 6px 12px 4px 5px; border-radius: 2px; color: #fff; text-align: center; font-size: 12px; line-height: 1.2; display: block;}
#osirase li .map a:after { position: absolute; right: 10px; top: 7px; font-family: "Font Awesome 5 Free"; content: '\f054'; font-weight: 900; font-size: 11px;}

#osirase .txt { clear: both; background: url("../images/bg_check_gr.png") repeat; padding:50px 4% 30px 4%; margin-bottom: 50px;}
#osirase .txt h4 { font-size: 25px; text-align: center; border-bottom: 1px solid #000; width: 100%; max-width: 800px; margin: 0 auto 25px auto; padding-bottom: 8px;}

#osirase .detail { margin-bottom: 50px; display: -webkit-flex; display: flex; -webkit-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: justify; justify-content: space-between; }
#osirase .detail > * { width: 48%; text-align: center;}
#osirase .detail h5 { font-size: 18px; position: relative; display: inline-block; margin-bottom: 0.5em; color: #595656; font-weight: bold;}
#osirase .detail h5:before { position: absolute; font-family: "Font Awesome 5 Free"; content: '\f111'; font-weight: 900; color: #F8B62C; font-size: 10px; top:28%; left:-2em;}

@media only screen and (max-width: 640px) { 
    #osirase h3 { font-size: 20px; }
    #osirase li .date { font-size: 20px;}
    #osirase .detail > * { width: 100%; margin-bottom: 20px;}
    #osirase .txt h4 { font-size: 20px;}
}

/*--------------------------------------------------------------
 PAGE-NAVI
--------------------------------------------------------------*/
.nxt-prv-list { font-size: 14px; padding: 30px 1em; text-align: right;}
.nxt-prv-list strong { color: #595454;}

.nxt-prv-box { width: 100%; padding: 30px 0; }
.nxt-prv-box:after { content:" "; display:block; clear:both;}
.nxt-prv-box .back-list { float: left; width: 48%; font-size: 14px; text-align: left; padding: 0;}
.nxt-prv-box .nxt-prv-list { float: right; width: 48%; padding: 0;}
.back-list,
.nxt-prv-list{color:#595656;}
.back-list i,
.nxt-prv-list i{ color: #94837A; }
.back-list a,
.nxt-prv-list a,
.nxt-prv-list strong { margin: 0 0.3em; color: #593D31;}

@media only screen and (max-width: 360px) {
    .nxt-prv-list { font-size: 13px; text-align: center; margin: 0 auto;}
    .nxt-prv-box { margin: 0 auto; text-align: center; }
    .nxt-prv-box .back-list { float: none; width: 100%; font-size: 13px; text-align: center; margin-bottom: 10px;}
    .nxt-prv-box .nxt-prv-list { float: none; width: 100%; text-align: center; }
}