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

/* --------------------------------------------------------------- */
/* 共通項目
/* --------------------------------------------------------------- */

.topbox01,.topbox02 {
    width: 90%;
    }


.topbox03 {
    width: 100%;
    }

a:hover {
    opacity: 1;
    -webkit-opacity: 1;
    -moz-opacity: 1;
    }


/* 改行位置-----------------------------------------------------------*/
  .br-pc { display:none; }
  .br-tab-sp { display:block; }
  .br-sp { display:none; }

/* --------------------------------------------------------------- */


/* ヘッダー指定 */

.header_box01 {
    width: 90%;
    }

.header_box01 li {
    display: inline-block;
    width: 25%;
    }

.header_box01 li:first-child {
    width: 40%;
    }

.header_box01 li:nth-child(2){
    margin-left: 50px;
    margin-right: 10px;
    }

.header_copy01 img {
    max-width: 350px;
    }

.header_box02 {
    width: 10%;
    }
/* --------------------------------------------------------------- */

/*ハンバーガーボタン*/

#hamburger_btn:hover {
    background: rgba(255,255,255,0); 
    cursor: pointer;
    }
    
/* --------------------------------------------------------------- */

/* グローバルメニュー */

.active #sidebar {
    width: 30%;
    }

/* --------------------------------------------------------------- */

/* フッターバナー */

.footer_bana01 {
    margin: 20px auto;
    }

.footer_bana01 li {
    width: 24%;
    margin-left: 1.2%;
    }

.footer_bana01 li:first-child {
    margin-left: 0;
    }

/* --------------------------------------------------------------- */

/* フッターコピーライト */

.footer_copyright {
    margin: 5px auto 0;
	padding-bottom: 10%;
    }


/* --------------------------------------------------------------- */

/* スマホのみ追従バナー */

.pagetop_sp {
	display: none;
}

/* --------------------------------------------------------------- */

/* --------------------------------------------------------------- */
/* 派生共通項目
/* --------------------------------------------------------------- */

.haseiti_bg01,.haseiti_bg02 {
    max-width: 100%;
    }

.haseiti_bigbox01 {
    margin: -5px auto 40px;
    }

.haseiti_box01 {
    width: 60%;
    }

.haseiti_box01 h2 {
    margin-bottom: 20px;
    }

.haseiti_box02 {
    top: -55px;
    }

.haseiti_box02 li:before {
    margin: 0 2px;
    }

/* --------------------------------------------------------------- */
/* トップページ
/* --------------------------------------------------------------- */


/* スクロール画像ボックス */

.scroll_box01 ul,.scroll_box02 ul,.scroll_box03 ul {
	height: 120px;    
    -webkit-transform: translateZ(0);/* safariちらつき防止 */
	}

.scroll_box02 ul {
	height: 200px;
	}

.scroll_box01 li,.scroll_box03 li {
	max-width: 210px;
	}

.scroll_box02 li {
	max-width: 320px;
	}

.scroll_box02 li:last-child {
	max-width: 140px;
	}

.scroll_box03 li:nth-child(5) {
	max-width: 80px;
	}

/* --------------------------------------------------------------- */

/* ブログ更新情報 */

.topblog_bigbox01 {
    margin: 30px auto;
    }

.topblog_box01 {
    width: 99%;
    margin-bottom: 30px;
    float: none;
    }

.topblog_tibox01 {
    padding-bottom: 5px;
    }

.topblog_libox01 li a {
    display: block;
    width: 100%;
    }


.topblog_libox01 span {
    display: block;
    width: 85%;
    margin-left: 0;
    }

.topblog_libox01 .new,.topblog_libox02 .new {
    background: url("../images/icon_img01.gif") no-repeat center right;
    background-size: 40px;
    }



.topblog_box02 {
    width: 100%;
    float: none;
    }

.topblog_libox02 li a,.topblog_libox03 li a {
    display: block;
    width: 90%;
    text-align: left;
    }

.topblog_libox01 li a:hover,.topblog_libox02 li a:hover {
    color: #000;
    }

.topblog_libox02 span,.topblog_libox03 span {
    display: block;
    width: 100%;
    margin-right: 0;
    }


.topblog_libox03 {
    margin: 0 auto 50px;
    text-align: left;
    }


.topblog_libox03 li {
    display: block;
    width: 100%;
    }

.topblog_libox03 li:nth-child(2) {
    margin: 0;
	}


.topblog_libox03 .new {
    background: url("../images/icon_img01.gif") no-repeat right;
    background-size: 40px;
    }

/* --------------------------------------------------------------- */

/* トップページコンセプト */

.topconcept_box01 {
    width: 45%;
    }


.topconcept_box02 {
    width: 48%;
    }

.topconcept_box02 h3 {
    max-width: 300px;
    margin: 60px 0 80px;
    }

.topconcept_box02 p {
    line-height: 1.6;
    margin-bottom: 30px;
    }

.topconcept_more01 {
    position: relative;
    top: 0;
    }

/* --------------------------------------------------------------- */

/* トップページSNS */

.topsns_bigbox01 {
    margin: 40px auto;
    }


.topsns_box02 {
    margin-top: 30px;
    text-align: left;
    }

.topsns_box02 li {
    display: inline-block;
    width: 22.5%;
    margin-left: 20px;
    }

/* --------------------------------------------------------------- */

/* トップページ施工例バナー */

.top_bana02 {
    max-width: 100%;
    padding: 30px 0;
    }



/* --------------------------------------------------------------- */
/* コンセプト
/* --------------------------------------------------------------- */

.concept_bg01 {
    height: 0;
    padding-bottom: 120%;
    background-size: cover;
    }

/* コンセプトタイトル周り */

.conceptti_box01 {
    width: 60%;
    float: left;
    }

.conceptti_box01 p {
    position: relative;
    top: -30px;
    right: -125px;
    }

/* --------------------------------------------------------------- */

/* コンセプト紹介 */

.concept_bigbox01 {
    width: auto;
    max-width: 90%;
    margin: 0 auto;
    text-align: center;
    top: 0;
    }

.concept_copy01 {
    max-width: 350px;
    margin: 80px auto 60px;
    }


.concept_bigbox01 ul {
    width: 100%;
    margin: 0 auto;
    text-align: center;
    }


.concept_bigbox01 li:first-child {
    flex-basis: 20%;
    }

.concept_bigbox01 li:nth-child(2) {
    flex-basis: 50%;
    margin: 0 60px;
    }

.concept_bigbox01 li:nth-child(2) p {
    margin: 10px auto;
    font-size: 1.4rem;
    line-height: 2;
    text-align: left;
    }

.concept_bigbox01 li:nth-child(2) br {
    display: none;
    }

.concept_bigbox01 li:last-child {    
    flex-basis: 20%;
    }


/* --------------------------------------------------------------- */

/* 特長 */

.philosophy_bigbox01 {
    padding-bottom: 250px;
    font-size: 1.4rem;
    }

.philosophy_ti01 {
    margin-bottom: 30px;
    }

.philosophy_copy01 {
    max-width: 290px;
    }

.philosophy_bigbox02 {
    margin-top: -280px;
    }

.philosophy_bigbox02 li {
    margin-bottom: 40px;
    padding-bottom: 40px;
    }


.philosophy_bg01,.philosophy_bg02,.philosophy_bg03,.philosophy_bg04,.philosophy_bg05 {
    padding-top: 20%;
    }

.philosophy_txbox01 {
    padding: 0 40px;
    }

.philosophy_box01 {
    width: 39%;
    top: -15px;
    }

.philosophy_box02 {
    width: 57%;
    font-size: 1.6rem;
    }

.philosophy_subti01 {
    margin-top: 65px;
    }



/* --------------------------------------------------------------- */
/* 設計基準・構造
/* --------------------------------------------------------------- */

/* 信頼できる構造 */

.construction_ti01 {
    margin-bottom: 3%;
    padding: 1.5% 0 1.5% 8%;
    }

.construction_bg01 {
    padding: 5% 0;
    }

.construction_copy01 {
    font-size: 2rem;
    }

.construction_tx01 {
    margin-top: 3%;
    }

.construction_li01 {
    margin: 3% auto;
    }

.construction_li01 li {
    padding: .5% 1%;
    font-size: 1.4rem;
    border: 1px solid #000;
    border-radius: 5px;
    }

.construction_li01 li:first-child {
    margin-right: 1%;
    }


/* --------------------------------------------------------------- */

.design_ti01 {    
    margin: 10% auto 3%;
    padding: 1.5% 0 1.5% 8%;
    }


.design_bg01 {
    padding: 5% 0;
    }

.design_copy01 {
    font-size: 2rem;
    }

.design_tx01 {
    margin-top: 3%;
    }

/* 構造の詳細 */

.construction_bigbox02 {
    text-align: left;
    border: 1px solid #aaa;
    border-radius: 5px;
    }

.construction_ti02 {
    font-size: 1.8rem;
    }


/* --------------------------------------------------------------- */
/* 家づくりの逃れ
/* --------------------------------------------------------------- */


.flow_bigbox01 li {
    margin-bottom: 40px;
    }

.flow_bigbox01 li:after {
    height: 42px;
    }

.flow_ti01,.flow_ti02,.flow_ti04,.flow_ti08,.flow_ti10 {
    margin-bottom: 20px;
    padding-left: 50px;
    font-size: 2rem;
    }

.flow_ti03,.flow_ti05,.flow_ti06,.flow_ti07 ,.flow_ti09 {
    padding-left: 20px;
    font-size: 2rem;
    }

.flow_ti01:before {
    background: url("../flow/images/number01.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti02:before {
    background: url("../flow/images/number02.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti03:before {
    left: 0;
    background: url("../flow/images/number03.png") no-repeat left center;
    background-size: contain;
    }

.flow_ti04:before {
    background: url("../flow/images/number04.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti05:before {
    left: 0;
    background: url("../flow/images/number05.png") no-repeat left top;
    background-size: contain;
    }
    
.flow_ti06:before {
    left: 0;
    background: url("../flow/images/number06.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti07:before {
    left: 0;
    background: url("../flow/images/number07.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti08:before {
    left: 0;
    background: url("../flow/images/number08.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti09:before {
    left: 0;
    background: url("../flow/images/number09.png") no-repeat left top;
    background-size: contain;
    }

.flow_ti10:before {
    background: url("../flow/images/number10.png") no-repeat left top;
    background-size: contain;
    }


.flow_box02 {
    width: 35%;
    }

/* --------------------------------------------------------------- */
/* オーナーズボイス
/* --------------------------------------------------------------- */

/* 個別 */

.voice_box01 h3 {
    margin: 60px auto 40px;
    font-size: 2rem;
    }

.voice_box02 {
    margin: 50px auto;
    }


.voice_box02 p {
    margin-top: 30px;
    }

.voice_comment01::before,
.voice_comment01::after {
    width: 10px;
    height: 20px;
    }

.voice_thanks01 {
    margin-bottom: 40px;
    }


.voice_pagination01 {
    margin: 50px auto;
    }


/* --------------------------------------------------------------- */
/* ブログ（スタッフブログ・イベント）
/* --------------------------------------------------------------- */


/* ブログ関連のフッターバナー */

#event .footer_bana01,#staff_blog .footer_bana01,#news .footer_bana01 {
    display: block;
    }
    
/* --------------------------------------------------------------- */

/* ボックス設定 */

.blog_box01 {
    width: 100%;
    float: none;
    }

.blog_box02 {
    width: 100%;
    float: none;
    }



/* --------------------------------------------------------------- */

/* タイトル・テキスト・画像設定 */

.blogti_box01 {
    margin: 20px auto;
    padding-bottom: 10px;
    }

.blog_ti01 {
    font-size: 2rem;
    }

.blog_day01 {
    margin-top: .5%;
    }

.blog_tx01 {
    line-height: 1.6;
    }

/* --------------------------------------------------------------- */

/* サイドエリア設定 */

.blog_sidebox01 {
    margin-bottom: 30px;
    }

.blog_sidebox01 p {
    border-bottom: 1px solid #000;
    }

.blog_sidebox01 li {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.2rem;
    border-bottom: none;
    }

.blog_sidebox01 li:before {
    content: "●";
    margin-right: 4px;
    font-size: .5rem;
    color: #009046;
    vertical-align: middle;
    }

.blog_sidebox01 li a {
    display: inline;
    padding: 0;
    }

.blog_sidebox01 li:first-child a {
    display: inline;
    padding: 0;
    }

.blog_sidebox02 {
    display: none;
    }


/* --------------------------------------------------------------- */
/* スタッフ紹介
/* --------------------------------------------------------------- */
.staff_bigbox li {
    width: 47%;
}


/* --------------------------------------------------------------- */
/* お問い合わせ
/* --------------------------------------------------------------- */


/* フォーム設定 */

.contact_ti01,.contact_ti02 {
	width: 27%;
	}



.contact_inner {
    margin: 0 5%;
}


.con_tx{
	text-align:left;
}


/* --------------------------------------------------------------- */
/* HOMA
/* --------------------------------------------------------------- */


/*HOMAメイン画像*/

.homa_mainti01 {
    margin: 5% auto 8%;
    }

.homa_bigbox01 {
    position: static;
    justify-content: space-between;
    align-items: flex-end;
    max-width: 90%;
    margin: 0 auto;
    }

.homa_maintx {
    position: static;
    width: 26%;
    top: 0;
    left: 0;
    }

.homa_mainimg_area {
    position: static;
    width: 70%;
    }

/*HOMA バナーエリア*/

.homa_banabox01 {
    margin: 8% auto;
    }

	
.homa_banabox03 {
	width:90%;
    }


	
/*HOMA コロナウイルス対策*/
.homa_kakudai {
	width:90%;}
/*HOMA ポイントエリア*/

.homa_pointbox01 {
    padding: 8% 0;
    }

/*HOMA スクロールアイコン*/

.homa_scroll_icon {
    margin: 5% auto;
    }


/*HOMA コンセプトエリア*/

.homa_bg03 {
    max-width: 70%;
    padding: 0 5%;
    }


.homa_conceptbox01 h2 {
    padding: 8% 0;
    }

.homa_conceptbox01 p {
    padding-bottom: 5%;
    line-height: 1.6;
    }

.homa_conceptbox01 p:last-child {
    padding-bottom: 10%;
    }

.homa_concept_icon {
    max-width: 90%;
    padding-bottom: 5%;
    }


/* HOMA スクロール画像ボックス */

.homa_bg04 {
    background: url("../homa/images/bg_img02.gif") no-repeat center 50%;
    background-size: 90% auto;
    }

.homa_scroll_box01 {
	margin: 10% auto 8%;
	}

.homa_scroll_box02 {
	margin-bottom: 10%;
	}


/* HOMA タイトル設定 */

.homa_main_ti01 {
    max-width: 100%;
    margin-bottom: 5%;
    }

.homa_subti {
    margin: 0 auto 8%;
    }


/* HOMA 特長エリア */

.homa_featurebox02 {
    margin-bottom: 10%;
    }

.homa_feature02 {
    margin-top: 5%;
    }


/* HOMA 例エリア */

.homa_examplebox01 {
    padding: 10% 0;
    }

.homa_example01 {
    max-width: 100%;
    }


/* HOMA プランエリア */

.homa_plan_bigbox01 {
    margin: 10% auto;
    }

.homa_planbox01 {
    margin: 10% auto 5%;
    }


/* HOMA お問い合わせエリア */

.homa_contact_ti01 {
    margin: 15% auto 10%;
    }
	
/* --------------------------------------------------------------- */
/* オンライン相談会
/* --------------------------------------------------------------- */	
	
.online_pctab {
	display: block;
}

.online_sp {
	display: none;
}
	
.online_br_sp {
	display: none;
    }
	
.online_con01_inner {
	flex-wrap: wrap;
	}

.online_con01_inner ul {
	flex-basis: 30%;
	margin-bottom: 1%;
}

.online_con02_ti {
	font-size: 3rem;
    }

.online_con03_inner img {
	width: 85%;
}

.online_con03_ti {
	font-size: 1.7rem;
}