@charset "UTF-8";
/* CSS Document */

/*---共通部分----*/
html{
	font-size: 100%;/*ブラウザーのデフォルトのフォントサイズ。文字サイズをremで設定すると、レスポンシブデザインにする時@mediaの中でhtml font-sizeの指定を記述すると一括で変更できる*/
}
body{
	font-family: 'Arbutus Slab', serif;
    line-height: 1.7;
    color: #432;
}
a{
	text-decoration: none;
}
img{
	max-width: 100%;/*親要素より画像が大きくならないようにする*/
}

/*----Header----*/
/*.logo{
	width: 210px;
	margin-top: 14px;
}
.main-nav{
	display: flex;
	font-size: 1.25rem;
	text-transform: uppercase;
	margin-top: 34px;
	list-style: none;
}
.main-nav li{
	margin-left: 36px;
}
.main-nav a{/*liに色を指定しないのはaタグのリンクの色に対して色をつけるため*/
/*	color: #432;
}
.main-nav a:hover{
	color: #00BBDD;
}
.page-header{
	display: flex;
	justify-content: space-between;
}*/
body{
	background-color: #B1CFCF;
}
.wrapper{
	max-width: 1100px;/*%で指定すると画面が大きい時間が空きすぎて見にくくなる*/
	margin: 0 auto;/*中央に配置する*/
	padding: 0 4%;/*左右に余白を作れる。レスポンシブを考えると％で指定する方が見やすくなる*/
}

/*.page-title{
	font-size: 5rem;
	font-family: 'Philosopher',serif;
	text-transform: uppercase;/*全部大文字に変える*/
	/*font-weight: normal;
}

/*ボタン*/
.button{
	font-size: 1.375rem;
	color: #434343;
	border-radius: 5px;
	margin: 3px;
}
.button:hover{
	color: #FFF9ED;/*ボタンにカーソルを合わせると色が変わる*/
}

.post-info{
	position: relative;/*relativeとabsolute*/
	padding-top: 5px;
	margin-bottom: 40px;
}
.phto{
	text-align: center;
	margin: 5%;
}
.main{
	text-align: center;
	margin: 5%;
}

.bun{
	max-width: 75vw;
	display: flex;
	margin: 0 auto;
}
.text1{
	text-align: left;
	vertical-align:  middle; 
}
.box{
	width: 50%;
	order: 2;
	padding: 30px;
}
/*モバイル版ーーーーーーーーーーーーー*/
@media(max-width: 600px) {/*スタイルを切り替えるポイントとなる画面サイズをブレークポイントという*/
	html{
		font-size: 80%;
	}
	/*home*/
	.home-content{
		margin-top: 20%;
	}
	.bun{
		flex-direction: column;
		align-items: center;
	}
	/*main*/
	
	article{
		width: 100%;
	}
	
	.post-info{
		margin-bottom: 30px;
	}
	
	.post-title{
		font-size: 1.375rem;
	}
	
	.box{
		width: 100%;
	}
	
}