@charset "UTF-8";

/*==================================================================*/
/* common_base css */
/*==================================================================*/
:root{
	--color_base:#310607;
	--color_accent:#9db647;
	--color_day1:#166c2d;
	--color_day2:#39988e;
	--tombo-bg: #f7f5e0;
	--tombo-green: #b8c987;
	--tombo-yellow: #e3be16;
	--size_sp_s:90%;
	--size_sp:340px;
	--size_sp_l:380px;
	--size_tab:700px;
	--size_pc:840px;
	}

*{margin:0;padding:0;}
html,body{
	margin: 0;
	min-height: 100%;
}
body{
	margin:0;
	padding:0;
	position: relative;
	box-sizing: border-box;
	height: 100dvh;
	min-height: 100dvh;
	overflow: hidden;
	line-height:1.6;
	color:var(--color_base);
	background: var(--tombo-bg);
	font-family:'Noto Sans JP',Verdana,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:14px;
	letter-spacing:1px;
	-webkit-text-size-adjust:100%;
	-ms-text-size-adjust:100%;
	font-weight:700;
	background-image: url("../image/bg.svg");
	background-size:150%;
	background-repeat: repeat;
	}

a{
	color:var(--color_base);
	outline:none;
	text-decoration:none;
	transition:all .3s;
	}
a:hover{color:var(--color_accent);}
img{
	border:none;
	vertical-align:bottom;
	width:100%;
	max-width: auto;
	}

/* 360 *//* ------- */@media print, screen and (max-width:360px){}
/* 400 *//* ------- */@media print, screen and (min-width:400px){}
/* 768 *//* ------- */@media print, screen and (min-width:768px){body{font-size:16px;}}
/* 840 *//* ------- */@media print, screen and (min-width:840px){}


/* -------------------------------------------------------------- */
/* main */
/* -------------------------------------------------------------- */
main{

}

/* 360 *//* ------- */@media print, screen and (max-width:360px){}
/* 400 *//* ------- */@media print, screen and (min-width:400px){}
/* 500 *//* ------- */@media print, screen and (min-width:500px){main{background-size:180%;}}
/* 680 *//* ------- */@media print, screen and (min-width:680px){main{background-size:160%;}}
/* 768 *//* ------- */@media print, screen and (min-width:768px){main{background-size:150%;}}
/* 840 *//* ------- */@media print, screen and (min-width:840px){main{background-size:140%;}}

/* -------------------------------------------------------------- */
/* mainvisual */
/* -------------------------------------------------------------- */
#mainvisual{
	margin:0;
	position:relative;
	z-index: 3;
	overflow:hidden;
	box-sizing: border-box;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/*山の高さpadding*/
	padding: 48px 24px clamp(190px, 25vh, 280px);
	}
#mainvisual h1{
	margin:0 auto;
	width:300px;
	text-align: center;
	}
#mainvisual h2{
	margin:40px auto 0;
	width:300px;
	text-align: center;
	}

/* 360 *//* ------- */@media print, screen and (max-width:360px){
	#mainvisual h1{max-width:280px;width: 100%;}
	#mainvisual h2{max-width:280px;width: 100%;}
}
/* 400 *//* ------- */@media print, screen and (max-width:400px){
}
/* 600 *//* ------- */
@media (max-width: 600px) {
	#mainvisual{
		padding: 48px 20px 140px;/*山の高さpadding*/
		background-size: auto cover;
		background-position: center top;
	}
	#mainvisual h1{max-width:300px;width: 100%;}
	#mainvisual h2{max-width:300px;width: 100%;}
}
/* 768 *//* ------- */@media print, screen and (min-width:768px){}
/* 840 *//* ------- */@media print, screen and (min-width:840px){
	#mainvisual h1{width:540px;}
	#mainvisual h2{width:560px;}
}
@media print, screen and (max-height: 900px) and (min-width: 400px) {
	#mainvisual{ padding-top: 40px;padding-bottom: 130px;}
	#mainvisual h1{width: 400px}
	#mainvisual h2{width: 400px;margin-top: 40px;}
}
/* 横向きの時横並びに */
@media (orientation: landscape) and (max-height: 500px) {
	#mainvisual{
		height: 100%;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		gap: clamp(20px, 3vw, 50px);
		/*下の山＋コピーライト分だけ確保。横向きは高さがないので、paddingは控えめに*/
		padding: 20px 40px 64px;
	}
	#mainvisual h1{
		width: clamp(200px, 30vw, 340px);
		height: auto;
		margin-right: 0;
	}
	#mainvisual h2{
		width: clamp(200px, 28vw, 340px);
		max-width: 42vw;
		height: auto;/*縦並び時のmarginを消します。*/
		margin-top: 0;
		margin-left: 0;
	}
}
/* 縦画面の時ロゴをちょっとしたに */
@media (orientation: portrait) {

  main {

    transform: translateY(24px);

  }

}
/* -------------------------------------------------------------- */
/* .pagetop */
/* -------------------------------------------------------------- */

/* -------------------------------------------------------------- */
/* footer */
/* -------------------------------------------------------------- */
footer{
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		pointer-events: none;
}
footer .footer_mountain{
	height: clamp(100px, 12vh, 180px);
	inset: 0;background-image: url("../image/footer_mountain.svg");
	background-repeat: repeat-x;
	background-position: center bottom;background-size: auto 100%;
}
footer .footer_bar{
	display: grid;
	place-items: center;
	min-height: clamp(34px, 5vh, 52px);
	background: var(--tombo-green);
	padding-bottom: env(safe-area-inset-bottom);
}
footer p.copylight{
	font-size: clamp(10px, 0.85vw, 13px);
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
/* 360 *//* ------- */@media print, screen and (max-width:360px){
	footer .footer_mountain{
		height: 40px;
	}
}
/* 400 *//* ------- */@media print, screen and (max-width:400px){
	footer .footer_mountain{
		height: 60px;
	}
}
/* 768 *//* ------- */@media print, screen and (max-width:768px){
	footer .footer_mountain{
		height: 70px;
	}
}
@media (max-height: 720px) and (min-width: 768px) {
	footer .footer_mountain{
		height: 90px;
	}
}
/* 840 *//* ------- */@media print, screen and (min-width:840px){
}
/* 横向きの時 */
@media (orientation: landscape) and (max-height: 500px) {
	footer .footer_mountain{
		height: 30px;
	}
	footer .footer_bar{
		height: 24px;
	}
	footer p.copylight{
		font-size: 9px;
	}
}

/* -------------------------------------------------------------- */