@charset "utf-8";
/* ===========================================================================
CSS Inf	rmation

Update:2017/12/06

01：reset
02：link
03：Clear Fix Hack (Float Clear Hack)
04：design detail
05：contents
=========================================================================== */

/*----------------------------------------------------------------------------
	01：reset
----------------------------------------------------------------------------*/
body,h1,h2,h3,h4,h5,ul,ol,li,dl,dt,dd,p,table,form,img {
margin:0;
padding:0;
font-size:100%;
line-height:1.5;
}

body {
margin:0;
text-align:center;
color:#333;
font-size:100%;
font-family:'Noto Sans JP','メイリオ', sans-serif;
height: 100%;
overflow: auto;
}

html {height: 100%; /*overflow-x: hidden;*/}
img {border:none; vertical-align:top;max-width: 100%;}
ul {list-style:none;}
table {border-collapse:collapse;border-spacing:0;}
th,td {vertical-align:top;}
select option {padding:0 5px;}
hr {display:none;}
.is-pc{display:block;}
.is-sp{display:none;}

/*----------------------------------------------------------------------------
	02：link
----------------------------------------------------------------------------*/
a{color:#369; text-decoration:none;}
a:hover{text-decoration:none;}
*:focus {-moz-outline-style:none;}
a {outline:none;}


/*----------------------------------------------------------------------------
	03：Clear Fix Hack (Float Clear Hack)
----------------------------------------------------------------------------*/
/* new clearfix */
.clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;}
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

/*----------------------------------------------------------------------------
	04：design detail
----------------------------------------------------------------------------*/
/* margin padding */
.marginB5{margin-bottom:5px;}
.marginB10{margin-bottom:10px;}
.marginB15{margin-bottom:15px;}
.marginTB10{margin-bottom:10px; margin-top:10px;}
.marginT30{margin-top:30px;}
.marginB20{margin-bottom:20px;}
.marginB30{margin-bottom:30px;}
.marginB40{margin-bottom:40px;}
.marginB50{margin-bottom:50px;}
.marginB100{margin-bottom:100px;}
.marginL10{margin-left:10px;}
.marginR10{margin-right:10px;}
.marginL20{margin-left:20px;}
.marginR20{margin-right:20px;}
.marginL30{margin-left:30px;}
.marginR30{margin-right:30px;}
.paddingLR30{padding-left:30px; padding-right:30px;}
.paddingLR50{padding-left:50px; padding-right:50px;}

/* font */
.fontWeight{font-weight:bold;}
.fontSize85{font-size:85%;}
.fontSize120{font-size:120%;}

/* float */
.floatL{float:left;}
.floatR{float:right;}

/* align */
.tAlignL{text-align:left;}
.tAlignC{text-align:center;}
.tAlignR{text-align:right;}
.vAlignB {vertical-align:bottom;}
.vAlignM {vertical-align:middle;}

/* note */
.note01{display:block;padding-left:1em;text-indent:-1em;}/*※*/
.note02{display:block;padding-left:1.6em;text-indent:-1.6em;}/*（1）［1］*/
.note03{display:block;padding-left:0.5em;text-indent:-0.5em;}/*・*/
.note04{display:block;padding-left:1.3em;text-indent:-1.3em;}/*1．1）*/

a.linkArrow:hover,
ul.linkArrow li a:hover{
text-decoration:underline;
}
/* text */
.nowrap{text-wrap:suppress;}

/*----------------------------------------------------------------------------
	05：contents
----------------------------------------------------------------------------*/
	body{
		background:url("../img/body-bg.png") left top repeat; 
		margin: 0; 
		padding: 0; 
		min-height: 100vh;
		box-sizing: border-box;
		font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	header{
		height: 16vh;
		padding: 15px;
		box-sizing: border-box;
	}
	header h1{
		height: 100%; 
		text-align: center; 
		margin: 0; 
		padding: 0;
	}
	header h1 img{
		max-height: 100%; 
		max-width: 100%;
	}
	@media (orientation: landscape){
		header{
			height: 25vh;
			padding: 10px;
			margin-bottom: 7px;
		}
		header h1{
			display: flex;
			align-items: center;
			justify-content: center;
		}
		header h1 img{
			max-height: 100%; 
			max-width: 40%;
		}
	}
	main{
		margin: 0; 
		padding: 0;
	}
	main section{
		padding:0 14px;
		box-sizing: border-box;
	}
	main ul{
		list-style: none; 
		margin: 0; 
		padding: 0; 
		display: flex; 
		flex-wrap: wrap;
	}
	main ul li{
		width: 100%;
		height: 7vh; 
		margin: 0 0 1vh 0;
	}
	@media (orientation: landscape){
		main{
			margin: -10px 0 0; 
		}
		main ul li{
			width: calc(33% - 8px);
			height: 15vh; 
			margin: 0 14px 1vh 0;
		}
		main ul li:nth-child(3n){
			margin-right: 0;
		}
	}
	main ul li a{
		width: 100%; 
		height: 100%; 
		background-color: #FFF; 
		display: flex; 
		align-items: center; 
		justify-content: center; 
		padding:0 5px; 
		border-radius: 15px; 
		border-top: 2px solid #633628;
		border-left: 2px solid #633628;
		border-right: 5px solid #633628;
		border-bottom: 5px solid #633628;
		box-sizing: border-box;
	}
	main ul li a img{
		max-width: 100%;
		max-height: 100%;
	}
	@media (orientation: landscape){
		main ul li a{
			padding:3px 5px; 
			border-radius: 13px; 
		}
	}
	main section div{
		text-align: center;
		height: 12vh;
		position: relative;
	}
	main section div img{
		position: absolute;
		right: 10px;
		bottom: 0;
		width: auto;
		max-width: 100%;
		max-height: 10vh;
		margin:0 auto;
		padding: 0;
	}
	@media (orientation: landscape){
		main section{
			position: relative;
		}
		main section div{
			height: 20vh;
			margin-top: -8vh;
		}
		main section div img{
			position: absolute;
			right: 0;
			bottom: 0;
			width: auto;
			max-width: 100%;
			max-height: 20vh;
		}
	}
	footer{
		width: 100%; 
		margin: 0; 
		padding: 5px 0; 
		font-size: 0.8em; 
		background-color: #633628;
		color: #C98; 
		display: flex; 
		align-items: center; 
		justify-content: center;
		box-sizing: border-box;
	}