/* 20221113 変数名、重複記述見直し*/
/* 20220504 CSS見直し*/

html{
	padding:0;
	margin:0;
	width:100%; 
	font-size: 75%; /*基準となる文字サイズが62.5%で10px*/
}
body{
	background:#FBFCFD;
}

/*リンクは基本白*/ 
a,a:hover,a:active,a:visited{
	text-decoration:none;
	color:#FBFCFD;  /*ベース*/
}

/*■白エリア内の設定 */
.white-area{
	padding:5px;
	width:700px; 
	color: #4D4535;  /*テキスト*/
	background:#FBFCFD;  /*ベース*/
	margin:0 auto; /* 親の幅にいい感じで合わせて */
	box-sizing:border-box;
	/* 高さや横幅を指定した要素にpaddingを設定すると、
	その分の大きさが要素に反映されて指定された値より大きくなってしまう事があります。その対応（？）*/
	text-align:left;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}
.white-area h1{
	font-size:1.2rem;
	font-weight: normal;
	font-style :normal;
	border-left: 3px solid #1c9af0;  /*twitter色*//* 左に縦線 */
}
/*.white-area a,a:visited{*/
/*	text-decoration:none;*/
/*	color:#4D4535;*/
/*}*/


#white-ImageDisp{
	text-align:center; /*真ん中寄せ*/
}
.largeImg{
	border: solid 1px #4D4535;  /*テキスト*/
	/* width: 550px;
	height: 400px; */
	padding: 5px;
}
/*白メニューの設定 */
.white-area-menu{
	/*背景白のリンク用*/
	display:inline-block; /*横に並べる*/
	border:1px solid #4D4535;  /*テキスト*/ /*枠をつける*/
	letter-spacing:1px;
	padding:1px 2px;
	margin:2px;
	background:#4D4535;  /*テキスト*/
}
/*.white-area-menu a,a:visited{*/
/*	color:#E97F12;*/
/*}*/

.white-area-menu:hover{
	border:1px solid #E97F12;  /*アクセント*/ /*枠をつける*/
	background:#E97F12;  /*アクセント*/

}

/*ここまで白メニューの設定 */

/*■ここまで白エリア内の設定 */


/*■メニュー(大分類)の設定 */
#major-menu-area{
	/*font-size:1.2rem;	/* メニュー大きめ */
	text-align:center; /*真ん中寄せ*/
	width:100%;
	padding:3px 0;
}
.major-menu{
	/* width:100%; 
	border-radius:0.5rem; 要素を角丸にする。値が大きいほど円に近付く。
	font:*太さ(任意)・文字サイズ(必須)・書体(必須) */
	display:inline-block; /*横に並べる*/
	border:1px solid #4D4535;  /*テキスト*//*枠をつける*/
	letter-spacing:1px;
	padding:5px 4px;
	margin:2px;
	background:#4D4535;  /*テキスト*/
}

/*.major-menu a
,major-menu a:hover
,major-menu a:visited{
	text-decoration:none;
	color:#FBFCFD;
}
*/
.major-menu:hover{
	background:#E97F12;  /*アクセント*/
	border:1px solid #E97F12;  /*アクセント*//*枠をつける*/

}

/*■ここまでメニュー(大分類)の設定 */

/*■メニュー(詳細)の設定 */
.detail-menu-area{
	 font-size:1.2rem;	/*メニュー大きめ */
	letter-spacing: 0.07em;/* 字間広い目 */
	max-width:650px;
	margin:0 auto; /*親の幅にいい感じで合わせて */
	text-align:left;
	padding-left: 1.2rem;
	padding-right: 1.2rem;
}

.detail-menu-area a{
	color:#E97F12;  /*アクセント*/
}
.detail-menu-area a:hover,
.detail-menu-area a:active{
	color:#1c9af0;  /*twitter色*/
}
.detail-menu-area a:hover,a:active{
	color:#1c9af0;  /*twitter色*/
}
.detail-menu-area a:visited{
	text-decoration:none;
	color:#4D4535;  /*テキスト*/
}


.picLink{
	margin:0 auto; /* 親の幅にいい感じで合わせて */
}

/*■ここまでメニュー(詳細)の設定 */





/* スマホ対応　
今回は横幅をpx指定した要素が.contentsだけだったので、このdivの横幅を
「幅650px以下の環境で見た時、width:100%;の箱に変更させ、内左右の余白を10px」設定。
左右の余白が無いと読みにくいので、余白は10px作る*/
@media screen and (max-width:650px){
.white-area{
	width:90%;
	}
.largeImg{
	width:90%;
}
/*img{
	width: 90%;
	padding: 5px;
	height: auto;
	} */
}