@charset "Shift_JIS";

/***************■全体構造*********************/

/*背景色の指定#fbeac1*/
#backcolor{
	background-color: #d1de4c;
}

/*タイトル*/
#titleImage{
	padding: 0px;
	margin: 0 auto;
	border: none;
	display: block;
}



#lead{
  background-color: #fff;
  width: 900px;
  padding: 15px 25px 25px 25px;
  margin-left: auto;
  margin-right: auto;
  text-align:left;
}




/*作業範囲*/
#box_main{
	background-color: #fff;
	width: 900px;
	font-size: 120%;
	vertical-align: middle;
	padding: 10px 0px 10px 0px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/*イントロ*/
.box_int{
	background-color: #ffce00;
	width: 950px;
	font-size: 1.0em;
	vertical-align: middle;
	padding: 10px 0px 10px 0px;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
        color:#333; 
}

/*見出し　行*/
.midaLine{
	background-color: #e4007f;
	border-radius: 10px;
	color: #fff;
	font-size: 110%;
	font-weight: bold;
	width: 760px;
	vertical-align: middle;
	padding: 5px 20px;
	text-align: cinter;
	margin-top: 10px;
	margin-bottom: 5px;
	margin-left: auto;
	margin-right: auto;
}


/*リード（本文）*/
.lead{
  background-color: #fff;
  width: 870px;
  padding: 20px 40px 35px 40px;
  margin-left: auto;
  margin-right: auto;
  font-size: 1.1em;
  text-align:left;
}



.top-banner{
	display: flex;
	flex-wrap:wrap;
}
.top-banner li {
	width: calc(100%/3);/*←画像を横に3つ並べる*/
	padding:10 10px;/*←画像の左右に2pxの余白を入れる*/
	box-sizing:border-box;
}
.top-banner li img {
	max-width:100%; /*画像のはみだしを防ぐ*/
	height: auto; /*画像の縦横比を維持 */
	border-radius: 20px;
        border: 2px #90243f dotted;/*←画像を1pxの点線で囲む*/
        margin:0.3em;
}


.line{
        color:#9b0b32;}


/*画像*/

.ph_small{
  border: 1px #ff0000 dotted;
  border-radius: 15px;
}


/*動画上に付ける見出し*/
.midashi{
 font-size:1em;
 text-align:center;
 font-weight:bold;
 color:#cc0000;
 padding:5px 0px 10px 0px;
}


/*用意するもの*/
.things{
 font-size:0.8em; text-align:left;
 font-weight:normal;
 color:#000;
 padding:5px 100px 10px 100px;
}


/*テーブル内の画像をセンタリング*/
td { text-align:center; vertical-align:middle; }



/*--囲み枠--*/
.kakomi{
 width: 820px;
 text-align: left;
 margin-top: 25px;
 margin-bottom: 10px;
 margin-left: auto;
 margin-right: auto;
 background-color:#d9e367;
 padding:25px ;
 border-radius: 15px;
 font-size:1em;
}




 li {
    list-style: none;
  }

ul.mokuzai {
  display: flex;
  justify-content: space-between;
  margin: 15px 0px 15px 0px;
  text-align: left;
  font-size: 13px;
}


.shikaku{
  padding:2px 8px; /* 枠と文字の空間 */
  margin-bottom:5px; /* 枠の外の空間 */
  background-color:#fff; /* 枠の背景色 */
  border:1px solid #cc0000; /* 枠の線の太さ・種類・色 */
  border-radius:2px; /* 枠の角を丸くする */
  box-shadow: 1px 2px 2px #ddd; /*影をいれる*/
  font-family:inherit; /* フォントの種類を継承する */
  font-size:1em;	/* フォントの大きさ */"
  display:block;
}



/* 横並び */

.flex {
  display: flex; /*横並び*/
   background-color:#d9e367;
 padding:20px ;
 border-radius: 15px;

}
.flex .image {
  width: 180px; /*画像サイズ指定*/
  margin: 0 0 0 18px;
  padding: 0 10 0 0px;
  overflow: hidden;
  position: relative;
}
.flex .right {
  margin: 0 0 0 20px;
  padding: 0;
}
.flex .title {
  margin: 0;
  padding: 0;
  font-weight: bold;
  font-size: 18px;
}
.flex .text {
  margin: 0px;
  padding: 0 0 0 0px;
  font-size:1em;
  width:75%;
  color:#333;
}


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

.kadomaru{
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}


.aka{
 color:#cc0000;
}

.aka_bold{
 color:#cc0000;
 font-weight:bold;
}

.green{
 color:#004d25;
}

/*木造建築例 テキスト*/
.example{
 text-align:center;
 font-size:1.1em;
}

/*木造建築例 写真*/
.exphoto{
 border-radius:7px;
 border:1px dotted #2e8b57;
}

/*文字サイズ変更*/
.up30{
	font-size: 130%;
}

.down10{
	font-size: 90%;
}

.clearBoth{
	clear:both;
}

/*パーソナリティ*/
.p_Image{
	padding: 0px;
	border: none;
}


/* --------------------------------------------------
	リンク色
-------------------------------------------------- */
a:link{
	text-decoration:none;
	color:#0000ff
}
a:visited{
	text-decoration:none;
	color:#0000ff
}
a:hover{
	text-decoration:none;
	color:#ff6600
}
a:active{
	text-decoration:none;
	color:#ccccff
}