@charset "utf-8";

@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
@import url('https://fonts.googleapis.com/css?family=Tinos');

/* --------------------------------------------
									全ページ共通
---------------------------------------------- */ 
html,
body { height:100%; }

html{ overflow-x:hidden; }
body { height:auto; background:url(../img/share/bg.jpg);}

body *{ /*border:1px solid #000000; background:rgba(000,000,000,0.1)*/}



/* フォントの指定 */
body,input,select,textarea {
	font-family: "HG明朝B", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", serif;
	color:#000; font-size:14px; line-height:1.8; letter-spacing:0.05em;}
	
a {color:#00f;}
p {text-align:justify; text-justify:inter-ideograph;}


@media screen and (max-width:960px){
body,input,select,textarea { font-size:12px; }
}


/* --------------------------------------------
									webフォント
---------------------------------------------- */ 
#kasamayaki main div section p,
#menu main small
{font-family: 'Noto Sans JP', sans-serif; font-weight: 300;}





/* header */
header { width: 220px; height: 100vh; position: fixed; left: 0; top: 0; background:#fff;
	padding-top: 5em;}
header h1,
header p{ position:relative; margin: auto;}
header h1 *,
header p *{ display:block; position: absolute; top:0; left:0;}
header h1,
header h1 *,
header p,
header p *{ width:122px; height:330px; margin: auto;}
header h1 a {}
header h1 span,
header p span { background:url(../img/share/logo.png)}


/* nav */
nav { }
nav ul { width:54%; margin:8em auto 0;}
nav ul li { float: right; height:12em; padding: 1.6em 0.48em 0; position:relative;
	background: url(../img/share/navIcon.png) no-repeat top center;
	 background-size: 0.8em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	/*border: 1px solid #000; box-sizing: border-box;*/ }
nav ul li a { display: block; color: #000; text-decoration: none; font-size: 1.071em; }
nav ul li a:hover { color: #939393;}



@media screen and (max-height:850px){
	header { padding-top:3em; }
	
	nav ul { width:53%; margin:3em auto 0;}
	nav ul li { height:10em;}
	nav ul li a { font-size:1em; }

}

@media screen and (max-width:960px){
	header { width: 100%; height: auto; position: relative; left: auto; top: auto; padding-top: 2em; }
	header h1,
	header h1 *,
	header p,
	header p *{ width:250px; height:59px;}
	header h1 span,
	header p span { background:url(../img/share/logoSp.png) no-repeat center top; background-size:contain;}

	nav ul { width: 200px; margin:3em auto 0;}
	nav ul li { float: right; height:10em; }
	nav ul li a { font-size: 1em; }

}



/* --------------------------------------------
						article共通
---------------------------------------------- */ 
.contents h1 { position: fixed; top: 2em; left:220px;
	background: url(../img/share/h1Bg.png) top center no-repeat;
	padding: 3em 0.6em 0;
	font-size: 1.142em;
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

@media screen and (max-width:1180px){
.contents h1 { position: relative; top:auto; left: auto;
	margin: 3em 5% 0em 250px;
	padding:1em 0.6em 1em 2.5em;
	background: url(../img/share/h1Bg.png) left center no-repeat;
	background-size: 2em;
  -webkit-writing-mode: horizontal-tb;
  -ms-writing-mode:lr-tb;
	writing-mode:horizontal-tb;}
}

@media screen and (max-width:960px){
.contents h1 {margin: 3em 5%;}
}

/* main */
main { padding-left:220px; max-width: 1280px; width:80%; margin: auto; padding-top: 0; }
.contents main { max-width: 970px; width:70%; padding-top: 4em; }
.contents main>* { width:100%; margin: auto; }

@media screen and (max-width:960px){
main { padding-left: 0px; width: 100%; padding-top: 0em;}
.contents main { padding-left: 0px; width: 90%; padding-top: 0em;}

}


/* footer */
footer { text-align: center; font-size: 0.76em; padding: 2em 0;}