@charset "shift_jis";

@media screen and (max-width:736px){
	
	body{
		line-height: 1.4em;
	}
	
	img{
		max-width: 100%;
		height: auto;
		vertical-align: bottom;
	}
	
	h1{
		border-left: none !important;
	}
	h2{
		border-bottom: none !important;
	}
	.mainArea{
		padding-top: 0;
	}
	.quizArea h2 img{
		width: 56px;
	}
	h3{
		margin: 15px 10px 0 10px;
	}
	h3 img{
		width: 235px;
	}
	h4 img{
		width: 270px;
	}
	
	.contents{
		padding: 0 10px;
		margin-top: 0;
	}
	
	.mainAreaInr,
	#intro,
	#diary_info,
	#calendar_info{
		width: 100%;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	.ft13{
		text-align: left !important;
		font-size: 1.1em !important;
	}
	
	.quizArea .quiz_txt{
		font-size: 2.0rem;
		margin: 30px auto 25px;
		line-height: 1.4;
	}
	
	.quiznote{
		text-align: left !important;
	}
	
	.charm_txt3{
		width: 100%;
		float: none;
		margin-bottom: 0;
	}
	.diaryLeft,
	.diaryRight,
	.diaryLeft2{
		width: 100%;
		float: none;
	}
	.left_pict{
		float: none;
		display: block;
		text-align: center;
		margin: 0 auto;
	}
	.diaryRight li{
		width: 49%;
		text-align: center;
	}
	.diaryRight2{
		float: none;
		margin: 0 auto;
	}
	
	#info .attention{
		margin-left: 0;
	}
	
	#outerImageContainer,
	#imageDataContainer{
		width: 100% !important;
		height: auto !important;
	}
	
	.popimg img{
		width: 100%;
		height: auto;
	}
	
	.popimg .closeBtn{
		width: auto;
		padding: 0 20px;
	}
	
	#dialy_detail .left_pict,
	#calendar_detail{
		width: auto;
	}
	/* 20191018 add */
	.mainArea .mainArea_date{
		width: auto;
		padding: 1px 0;
	}
	.mainArea .mainArea_date p{
		font-size: 0.8em;
	}
	
	/* 20211102 add */
	.blue2btn{
		width: 100%;
	}
	.blue2btn a{
		padding: 10px;
		width: 100%;
	}
}