/* 20230121 背景を斜めにするsectionのdiv*/
/* 20221113 変数名、重複記述見直し*/
/* 20220504 CSS見直し*/
/*ギャラリーっぽい奴 https://myisland.jp/template/gallery/gallery01.html */

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


body{

	font-family: Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "メイリオ", Meiryo, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "ＭＳ Ｐゴシック", sans-serif;
  font-weight:450;
/*	background:#a48f7e; */
	color:#696969;
line-height: 150%;
  background-image: url("wallpaper1.jpg");
  background-size: cover;
text-align: center;

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

.fuchidori {
  text-shadow:1.0px 1.0px 0 #f8f8ff, -1.0px -1.0px 0 #f8f8ff,
              -1.0px 1.0px 0 #f8f8ff, 1.0px -1.0px 0 #f8f8ff,
              0px 1.0px 0 #f8f8ff,  0-1.0px 0 #f8f8ff,
              -1.0px 0 0 #f8f8ff, 1.0px 0 0 #f8f8ff;
}

/*■白エリア内の設定 */
.white-area{
	padding:5px;
	width:680px; 
	color:#654a41;
	background:#ffffff;
	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 #654a41;/* 左に縦線 */
}
.white-area a,a:visited{
	text-decoration:none;
	color:#654a41;
}

.section {
	background: 
	linear-gradient(0deg, #cfe3f0 0%, #cfe3f0 70%, #a48f7e 70%, #a48f7e 100%);
}

#white-ImageDisp{
	text-align:center; /*真ん中寄せ*/
}
.largeImg{
	border: solid 1px #654a41;
	/* width: 550px;
	height: 400px; */
	padding: 5px;
}

#largeImgText{
	text-align:left;
	padding-left: 1.2rem;
	padding-right: 1.2rem;

}
/*白メニューの設定 */
.white-area-menu{
	/*背景白のリンク用*/
	display:inline-block; /*横に並べる*/
	border:1px solid #654a41; /*枠をつける*/
	letter-spacing:1px;
	padding:1px 2px;
	margin:2px;
}
.white-area-menu:hover{
	background:#FFD027;
}

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

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


/*■メニュー(大分類)の設定 */
#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 #654a41; /*枠をつける*/
	letter-spacing:1px;
	padding:5px 4px;
	margin:2px;
}
.major-menu:hover{
	background:#FFD027;
}

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

/*■メニュー(詳細)の設定 */
.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:hover,a:active{
	color:#FFD027;
}

.detail-menu-area a:visited{
	text-decoration:none;
	color:#654a41;
}

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

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





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