/* 基本設定
-------------------------------------*/
body { margin: 0; padding: 0;}
img{height: auto; max-width: 100%; width: auto;}
.box{
 max-width: 780px;
 width: 92%; 
 margin: 0 auto;
 padding: 30px 0;
}
@media print,screen and (min-width:769px) {
 .box{ width: 100%;}
 .flex{
  display: flex;
  gap:30px;padding: 0 20px;
 }
}

h2 {
	color: #364e96;/*文字色*/
	border: solid 3px #364e96;/*線色*/
	padding: 0.5em;/*文字周りの余白*/
	border-radius: 0.5em;/*角丸*/
  }

/* ヘッダー （以下に追記）
-------------------------------------*/
/*ヘッダー
-------------------------------------*/
/* ヘッダー背景 */
#siteHeader {
 background-image: url("../images/sample1-3.jpg"); /* 背景画像のパス */
 background-attachment: fixed;
 background-size: cover;
 background-position: center;
 width: 100%;
 height: 800px;
 display: flex;
 align-items: center;
 justify-content: center;
}
/* ロゴ画像 */
#logoArea {
 max-width: 480px;
 width: 100%;
 text-align: center;
}
/* サイトタイトル */
#logoArea h1 {
 color: #FFFFFF; /* テキストの色 */
 border-bottom: 1px solid #FFF;
 font-size: 280%;
 padding-bottom: 15px;
}
/* サブタイトル */
#logoArea #discription {
 color: #FFFFFF; /* テキストの色 */
 font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
 font-size: 120%;
}
/* ロゴ画像のサイズ */
#logoArea img {
 width: 150px;
 height: auto;
}

/* セクション１ （以下に追記）
-------------------------------------*/

/*セクション１
-------------------------------------*/
#contents1{
 background-color: #55308d; /* 背景色 */
 color:#FFFFFF;
}
#contents1 .box{
 max-width: 920px;
}
h2{color:#FFFFFF;}
@media print,screen and (min-width:769px) {
 .leftArea,
 .rightArea{width:48%;}
}


/* セクション２ （以下に追記）
-------------------------------------*/
/*セクション２
-------------------------------------*/
#contents2{
 background-image: url("../images/sample1-4.jpg"); /* 背景画像のパス */
 background-position: center;
 background-size: cover;
}
#contents2 .flex{flex-direction: column; gap:10px;}
#contents2 h2{
 text-align: center;
}
#contents2 .itemBox{
 background-color: #FFFFFF; /* 背景色 */
 padding: 20px;
 box-shadow: 3px 3px 3px rgba(0,0,0,.5);
}
#contents2 .itemBox h3{
 text-align: center;
}
@media print,screen and (max-width:768px) {
 .contents2 .itemBox{width: 100%;} 
}
@media print,screen and (min-width:769px) {
 #contents2{padding: 60px 0;}
}


/* セクション３ （以下に追記）
-------------------------------------*/

/*セクション３
-------------------------------------*/
#contents3 {
 text-align:center;
  background-color: #55308d; /* 背景色 */
}
#contents3 .box{
 max-width: 920px;
}
#contents3 .flex{
	justify-content: center;
}
#contents3 .itemBox{
 color: #FFFFFF; /* テキスト色 */
 background:#55308d;/* 写真背景の色 */
 padding: 20px;
}
@media print,screen and (min-width:769px) {
 #contents3 .itemBox{ width: 30%;}
}
#contents3 img{
width: auto;
height:270px ;
}

/* フッター
-------------------------------------*/
/* ページトップボタン */
#pagetop {
	position: fixed;
	width: 120px;
	right: 10px;
	bottom: 10px;
}
#pagetop a {
	color: #FFFFFF; /* テキスト色 */
	background-color: #666666; /* 背景の色 */
	display: block;
	font-size:80%;
	text-decoration: none;
	text-align: center;
	padding: 4px 10px;
border-radius: 10px;
}
/* コピーライト */
#copy{
 color: #FFFFFF; /* テキスト色 */
 background-color: #666666; /* 背景の色 */
 font-size: 80%;
 padding: 10px;
}
#copy p{
 text-align: center;
 margin: 0;
}


