@charset "utf-8";
*{
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin:0;
}

img{
	max-width:100%;
	height:auto;
}

/*全体レイアウト*/


/* 幅が 768px 以下であれば 　スマホ・タブレット設定用*/
@media (max-width:768px) {


/*全体レイアウト*/
div#wrap{
	width:100%;
	margin:0 auto;
}

/*上部ヘッダー*/

header{
	overflow:hidden;
}

/*会社ロゴとメインメニュー領域*/
div#head_menu{
	width:100%;
	height:60px;
	display:flex;
	background:#33cc00;
	align-items: center;
	padding:20px;
}

/*会社ロゴの調整とリンク*/
h1{
	width:80%;
	color:#fff;
	text-align:left;
}

h1 a{
	text-decoration:none;
	color:#fff;
}

h1 a:hover{
	text-decoration:none;
	color:#ff3300;
	border-bottom:solid 2px #ff3300;
}

h1 img{
	max-width:65%;
	height:auto;
}



/*メインメニュー*/

/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #fff;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}

/* メニューのデザイン*/
.nav_content {
  width: 100%;
  position: fixed;
  top: 100px;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}

ul#main_menu{
	list-style:none;
}

ul#main_menu li{
	margin:25px 5px;
}

ul#main_menu li a{
	text-decoration:none;
}

/*メイン画像*/
div#img_header{
	width:100%;
}

div#img_header img{
	max-width:100%;
	height:auto;
}

/*パンくず*/
.pankuzu{
	margin-top:2%;
	margin-left:2%;
}

.pankuzu a{
	text-decoration:none;
}

.pankuzu a:hover{
	text-decoration:none;
	color:#ff0000;
}

/*コンテンツ部分*/

section{
	width:90%;
	margin:10px auto;
	overflow:hidden;
}

.section02{
	width:90%;
	margin:0 auto;
	margin:40px auto;
	overflow:hidden;
}

.section03{
	width:90%;
	margin:0 auto;
	display:block;
}

.section03 img{
	max-width:90%;
	height:auto;
}

.marugoto{
	width:90%;
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	justify-content: center;
}

.marugoto img{
	max-width:43%;
	margin:1%;
}

.link{
	width:90%;
	margin:10px auto;
}

.link div{
	margin:10px auto;
	text-align:center;
}

.link a{
	text-decoration:none;
}
.setubi{
	margin:20px auto;
	margin-bottom:0px;
	background-color:#ffcc66;
	color:#000000;
	width:70%;	
}

.gallery{
	width:95%;
	margin:0 auto;
	text-align:center;
}

.gallery img{
	max-width:30%;
	height:auto;
	margin:2px;
}

div#left_side,#right_side,#right_side1{
	width:90%;
	margin:0 auto;
}

div#left_side img,#right_side img{
	max-width:90%;
	height:auto;
}

div#right_side1 img{
	max-width:30%;
	height:auto;
}

.title01{
	font-size:150%;
	border-left:7px solid #33cc00;
	padding-left:15px;
}

.title02{
	width:80%;
	margin:0 auto;
	margin-top:50px;
	padding-top:10px;
	font-size:110%;
	border-top:3px solid #33cc00;
	text-align:center;
}

.text01{
	color:#003366;
	font-size:90%;
	line-height:2;
	margin-top:10px;
}

div#left,#mid,#right{
	width:90%;
	margin:5px auto;
	border:3px solid #ff3300;
	padding:8px;
	text-align:center;

}

div#left img,#mid img,#right img{
	max-width:70%;
}

div#left a,#mid a,#right a{
	text-decoration:none;
}

h3{
	font-size:95%;
	color:#ff3300;
	text-align:center;
}

.rinen{
	margin:20px auto;
}

.rinen01 img{
	max-width:65%;
	height:auto;
}

.rinen01{
	border:1px solid #ff3300;
	border-radius:8px;
	margin:5px auto;
	padding:8px;
}

.kyocho{
	font-size:110%;
	color:#ff3300;
}

iframe#newspage{
		width:90%;
		margin:0 auto;
		margin-top:20px;
		border-radius:8px;
		border:1px solid #33cc00;
		display:block;
}

.wood_img{
	margin:20px auto;
}

.wood_imgbox{
	text-align:center;
	padding:0 15px;
	width:95%;
}

.wood_imgbox02{
	text-align:center;
	padding:0 15px;
	width:95%;
}

.wood_imgbox img{
	max-width:100%;
	height:auto;
}

.wood_imgbox02 img{
	max-width:100%;
	height:auto;
}

.wood_imgbox02 p{
	text-align:left;
}

div#left_reno,#mid_reno,#right_reno{
	margin:0 auto;
	text-align:center;

}

/*表*/


dl dt {
	width: 50%;
	border:1px solid #ccc;
	margin:2px 1px;
	padding:8px;
	font-size:85%;
	background-color:#ccffcc;
	text-align:center;
	font-weight: bold;
}
dl dd {
	width: 95%;
	border:1px solid #ccc;
	margin:2px 1px;
	padding:8px;
	font-size:85%;
}

/*スタッフ紹介の名前*/
.staff{
	width:95%;
	margin:0 auto;
	font-size:95%;
}

.staff2{
	width:95%;
	margin:10px auto;
	font-size:95%;
	text-align:center;
}

.name{
	font-size:1.5em;
	text-align:center;
	color:#000;
}

/*事業案内*/
.jigyou01{
	text-align:left;
	width:95%;
	margin:0 auto;
}

.soudan{
	text-align:center;
	font-weight:bold;
}

.soudan02 li{
	margin-top:8px;
}

.selco a{
	color:#ff0000;
	font-weight:bold;
}			

/*会社案内*/
.company01{
	margin:0 auto;
	width:95%;
	display:flex;
	flex-wrap: wrap;
}

.company01 dt{
	width:50%;
}

.company01 dd{
	width:95%;
}

/*木へのこだわり*/
.mokuzai01{
	width:95%;
	margin:0 auto;
	margin-bottom:10px;
}

.mokuzai02{
	width:95%;
	margin:0 auto;
	margin-bottom:10px;
}

#mokuzai{
	margin:20px auto;
	display:flex;
	flex-wrap: wrap;
}

.mokuzai03{
	margin:5px auto ;
	width:95%;
	background-color:#ffffcc;
	padding:5px;
	border-radius:8px;
}

.mokuzai04{
	font-size:95%;
	color:#000;
}	


/*リフォーム写真*/
.section{
	display:flex;
	align-items: center;
}

.section img{
	max-width:80%;
	height:auto;
}

.renovation{
	width:95%;
	margin:0 auto;
	text-align:left;
}

.renovation a{
	color:#ff0000;
}

/*セルコ写真並び*/
.selco_img{
	width:90%;
	margin:0 auto;
}

.selco_img>div{
	margin: 1px;
	padding: 10px;
}

.selco_img img{
	width:90%;
	height:auto;
}

.selco{
	width:95%;
	margin:0 auto;
}

/*施工事例の強調部分*/
.sekoujirei{
	width:90%;
	margin:0 auto;
	font-size:95%;
	line-height:2;
}

span#kyouchou{
	font-size:115%;
	color:#ff3300;
	font-weight:bold;
}

/*新築*/

.new_house01{
	text-align:left;
}

.new_house01 a{
	font-weight:bold;
	color:#ff0000;
}

/*お問い合わせページ*/
.toiawase{
	width:90%;
	font-size:100%;
	color:#fff;
	background-color:#003366;
	margin:10px auto;
	border-radius:8px;

}

.toiawase02{
	width:90%;
	margin:5px auto;
	margin-bottom:80px;
	font-size:100%;
}

.toiawase03{
	width:90%;
	margin:0 auto;
	margin-bottom:20px;
	font-size:95%;
	line-height:2;
}

.inquiry_img{
	border:1px solid;
	width:90%;
	margin:10px auto;
	padding:25px 0;
	text-align:center;
}

.inquiry_img img{
	max-width:90%;
}

/*不動産情報*/

.fudousan{
	width:95%;
	margin:0 auto;
	margin-top:20px;
	font-weight:bold;
	text-align:center;

}

h3.fudousan02{
	margin:5px auto;
	width:90%;
	height:30px;
	font-size:70%;
	color:#fff;
	background-color:#cc6633;
	padding-top:15px;
	border-radius:5px;
}

h3.fudousan02 a{
	text-decoration:none;
	color:#fff;	
}

h3.fudousan02 a:hover{
	color:#f00;
}

.fudousan_left{
	width:90%;
	margin:0 auto;
	text-align:center;
}

.fudousan_right{
	margin-left:3%;
}

.fudousan_font{
	color:#f00;
	font-weight:bold;
}

h3.fudousan02_1{
	margin:5px auto;
	width:90%;
	height:30px;
	font-size:70%;
	color:#fff;
	background-color:#cc6633;
	padding-top:15px;
	border-radius:5px;
}

.fudousan1{
	color:#0000CD;
	text-align:center;
	font-weight:bold;	
}

.fudousaniro{
	color:#ff0000
}

.keikou{
	background: linear-gradient(transparent 50%, #00ffff 50%);
}		

/*下部フッター部分*/

footer{
	background:#33cc00;
	padding-top:25px;
}

div#inquiry{
	text-align:center;
	background:#fff;
	width:90%;
	margin:0 auto;
	padding:25px 0;
	border-radius:12px;
	font-size:0.7em;
}

div#inquiry img{
	max-width:75%;
	height:auto;
}

address{
	display:none;
}

/*キャッチコピー部*/
p#info{
	position:fixed;
	right:1%;
	bottom:1%;
}

.copyright{
	text-align:center;
	font-size:80%;
	color:#000;
}

p#info img{
	display:none;
}

/*google map*/
.gmap{
	width:95%;
	height:auto;
	margin-top:10px;
}

}