@charset "utf-8";
/* ============================================================

	naeiro graphica WEBsite

	FILE NAME: common.css
	AUTHOR: naeiro graphica sana*
	
	UPDATE: 2022/08/08

============================================================ */

/*==========================================================
1:Common Style
==========================================================*/
* {	-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; word-wrap: break-word; overflow-wrap: break-word;}
html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var, b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, figcaption, figure,footer, header, hgroup, menu, nav, section, summary,time, mark, audio, video { 
margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; font-weight:normal;
vertical-align: baseline; background: transparent; }

html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { width: 100%; min-width: 320px; line-height: 1.5; font-size:14px; -webkit-text-size-adjust: 100%;}

header, footer, nav, section, article, figure, aside, main { display: block;}
h1, h2, h3, h4, h5, h6 { font-size: 100%;  margin: 0; padding: 0; font-weight:normal;}
p, ul, ol, dl, table, pre, dl ,li , dt, dd { margin: 0; padding: 0; }
ul, ol{ list-style:none;}
table { font-size: 100%; padding: 0; border-collapse: collapse; border-spacing: 0;}
th { font-weight: normal;}
th, td { padding: 0; text-align: left;}
blockquote { border-left: #eee solid 5px; margin: 0.5em 0 0.5em 1em; padding: 0 0 0 1em;}
pre { font-size: 0.9em; max-width: 100%; overflow: auto; padding: 0.5em;}
abbr, acronym { border-bottom: 1px dotted #666; cursor: help;}
sup, sub { font-size:0.7em; height: 0; line-height: 0; position: relative; vertical-align: baseline;}
sup { bottom: 1ex;}
sub { top: .5ex;}
embed, iframe, object { max-width: 100%;}
hr{ border: 0; height: 0; margin: 0; padding: 0; border-top: 1px dashed rgba(0, 0, 0, 0.2);}

img { border: none;max-width: 100%; height: auto; vertical-align: top;}
table img { }

/*LINK*/
#menuBTN{ -webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease; text-decoration:none;}
a img { border: none;}
a{ color:#3A7CA7;}
a,a img {-webkit-transition: All 0.5s ease;-moz-transition: All 0.5s ease;-o-transition: All 0.5s ease;-ms-transition: All 0.5s ease;transition: All 0.5s ease;}
/*HOVER*/
a:hover img, a:hover{opacity:0.9; color: #777;}

/*form*/
button, input, select, textarea { box-sizing: border-box; max-width: 100%; font-size: 100%; margin: 0; vertical-align: baseline; *vertical-align: middle;}
button, input[type="button"], input[type="reset"], input[type="submit"] { background: #555;  color:#fff;
-webkit-appearance: none;	-moz-appearance: none;appearance: none; cursor: pointer; border-radius: 3px; 
font-size: 14px; line-height: 1; padding: .6em 1em .4em; }
button:hover, input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover { }
button:focus, input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, button:active, input[type="button"]:active, input[type="reset"]:active, input[type="submit"]:active {  }
input[type="checkbox"], input[type="radio"] { padding: 5px; border:1px solid #aaa; }
input[type="search"] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;}
button::-moz-focus-inner, input::-moz-focus-inner {
border: 0;padding: 0;}
input[type="text"], input[type="email"],input[type="tel"], input[type="url"], input[type="password"], input[type="search"], textarea { color: #666; border: 1px solid #ccc; border-radius: 3px; }
input[type="text"]:focus, input[type="email"]:focus,input[type="tel"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, textarea:focus { color: #111; }
input[type="text"], input[type="email"],input[type="tel"], input[type="url"], input[type="password"], input[type="search"] { padding: 3px; }
textarea { overflow: auto; padding-left: 3px; vertical-align: top; }

/*==========================================================
2:Base Style
==========================================================*/
body{
	text-align:center;
	font-family:'Averia Serif Libre',Century Gothic , Helvetica, sans-serif;
	color:#555;
}

#waitWrap {
	width: 90%;
	padding-bottom: 180px;
	margin: 11px auto 11px;
	background:url(../../img/sanaanime.gif) no-repeat center bottom;
}

#wrap {
	width: 96%;
	height:auto;
	margin: 20px auto;
}

h1,h2,h3,h4,h5,h6,p,li{
	color:#555;
	font-weight:normal;
}
h1{
	margin: 0 auto;
	font-size:1.8em;
}
#waitWrap h1{
font-size: 2.2em;
}

h2{
	margin: 11px auto;
	font-size:1.2em;
}
h3{
	margin: 15px auto 0;
	font-size:0.9em;
	line-height: 1.7;
}
h3:before,
h3:after{
padding: 3px 0;
display: block;
content: "♥";
font-size: 1.2em;
color: #eee;
}
h4{
	margin: 10px auto;
	font-size:0.9em;
	line-height: 1.7;
}
h5,h6{
	margin: 10px auto;
	font-size:0.9em;
	line-height: 1.7;
}
p{
line-height:2.2;
}
ul{
margin: 10px auto;
}
li a{
display: inline-block;
width: 200px;
background: #eee;
margin: 0 0 1px;
border-radius: 3px;
font-size: 1.6em;
padding: 0.3em;
}
li a:hover{
background: #3A7CA7;
color: #fff;
}


nav ul{margin: 10px auto; display: flex; text-align: center;justify-content: center;align-items: center;}
nav li a{display:block; text-decoration: none;
width: auto;background: #eee;margin:1px;font-size: 1.2em;padding: 0.2em 0.8em;}
nav li a:hover{background: #3A7CA7;color: #fff;}
nav li a span{ display: block;font-size: 0.6em;border-top: 1px dotted #fff; padding: 0.5em 0 0 0;}

/*for PC-Tablet ==========================================*/
@media screen and (min-width:1025px) {

.SP{ display:none;}
.PC{ display:block;}

/**/}

/*for SP ==========================================*/
@media screen and (max-width:1024px) {

.PC{ display:none;}
.SP{ display:block;}

nav ul{margin: 10px auto; display: block; }
nav li a{margin:3px;}
nav li a span{}

/**/}




/*===========================================*/

#NEWS{ margin:20px auto 50px; max-width: 800px; padding: 20px; letter-spacing: 0.05em;}
#NEWS h1{font-size: 16px; padding: 1em 0; margin: 0;}
#NEWS h2{font-size: 14px; padding: 0; margin: 0;font-weight: bold;	color: #f0908d;}
#NEWS p{margin: 1em 0; font-size: 12px; font-weight: normal;}
#NEWS p em{
	font-style:normal;
	font-weight: bold;
	font-size: 1.2em;
	padding: 0 5px;
	color: #b7282e;
	background: linear-gradient(transparent 50%, #e9e4d4 50%);
}
/*===========================================*/


#MOVIE {
font-family:'Averia Serif Libre',Century Gothic , Helvetica, sans-serif;
width: 90%;
height:500px;
margin: 50px auto;
}
#MOVIE h1{
margin: 0 auto 0.5em;
}
#MOVIE ul{
margin: 20px auto 30px;
}
#MOVIE p{
line-height: 1.3;
margin: 0 auto 0.5em;
}
#MOVIE ul li a{
width: 480px;
padding: 10px;
font-size: 16px;
}
video{ margin: 20px auto; width: 88%; height: auto;}
#MOVIE em{ font-style: normal; letter-spacing: 0.1em; font-size: 1.2em;}

/*===========================================*/
#THETA{
	width: 90%;
	margin: 11px auto 11px;
}
#THETA header{ margin: 0 auto 20px; padding: 0 0 20px 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
#THETA section{ margin: 0 auto 20px; padding: 0 0 20px 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}

/*===========================================*/
#KIMONO{	width: 100%;	margin: 11px auto 11px; padding: 0;}
#KIMONO header{ margin: 0 auto 20px; padding: 0 0 20px 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
#KIMONO section{ margin: 0 auto 20px; padding: 0 0 20px 0;
	border-bottom: 1px dashed rgba(0, 0, 0, 0.2);
}
.notes{font-size:0.9em;}
p.notes{font-size:0.8em; line-height: 1.8;}
h1 .notes{font-size:0.7em;}

#KIMONO  ul.menu li{}
#KIMONO  ul.menu li span{ font-size: 0.9em;}

#KIMONO  dl.ITEM{ max-width: 500px; margin: 0 auto;}
#KIMONO  dl.ITEM dt{ padding: 1em 0 0 0 ;}
#KIMONO  dl.ITEM dd{ padding: 0 0 0.5em 0; font-size: 0.9em; border-bottom: 1px dotted #aaa;}

#KIMONO .works{ padding: 0; margin: 30px auto;}
#KIMONO .works ul{ padding: 0; margin: 0px auto;}
#KIMONO .works ul li{ width: 20%; display: inline-block; padding: 1px 0; margin: 0;}
#KIMONO .works ul li.wd{ width:30%; display: inline-block; padding: 1px 0; margin: 0;}
#KIMONO .works ul li img{ }
#KIMONO .works p{ padding: 0; margin: 1em auto 50px;}
/*===========================================*/


#SEMINAR{}
#SEMINAR dl{ background: #fafafa; margin: 1em; border-radius: 5px;}
#SEMINAR dl em{ font-style: normal;display: block;}
#SEMINAR dl span{ font-size: 0.8em;}
#SEMINAR dl dt{border-bottom: 1px solid #fff; padding: 1em 0; color: #f89; font-size: 1.2em;}
#SEMINAR dl dt em{ font-size: 0.9em; color: #777;}
#SEMINAR dl dd{ font-size: 0.8em; color: #333; padding: 1em 0;}
#SEMINAR dl dd em{ font-size: 1.2em; color: #333;}
#SEMINAR dl dd p{ font-size: 1.2em; color: #777;font-weight: normal;margin: 1em; line-height: 1.5;}
#SEMINAR dl dd p strong{ font-size: 1.1em; color: #555; display: block; padding: 0 0 0.5em 0;}
#SESSION{ padding: 1em 0;}
#SESSION ul li{ color: #777; font-size: 0.9em;}
#ABOUT { background: #efefef; padding: 10px;}
#ABOUT p{color: #777; font-size: 0.9em; font-weight: normal ; line-height: 1.5; margin: 0 auto 1em;}

footer{
	font-family:'Averia Serif Libre',Century Gothic , Helvetica, sans-serif;
	margin: 2em 0 0;
	padding: 1em 0;
	border-top:1px dotted #eee;
	font-size: 0.9em;
}
footer p{
}
br.SP{display: none;}
br.PC{display: block;}

/*for SP
=====================================*/
@media screen and (max-width:736px) {

#MOVIE ul li a{width: 90%;font-size: 1em;}

#SEMINAR dl dd p{ text-align: left;}
br.SP{display: block;}
br.PC{display: none;}
#ABOUT p{ text-align: left;}

#KIMONO .works{ padding: 0; margin:20px auto;}
#KIMONO .works ul{ padding: 0; margin: 0px auto;}
#KIMONO .works ul li{ width: 30%; display: inline-block; padding: 1px 0; margin: 0;}
#KIMONO .works ul li.wd{ width:45%; display: inline-block; padding: 1px 0; margin: 0;}
#KIMONO .works ul li img{ }
#KIMONO .works p{ padding: 0; margin: 1em auto 50px;}

	
/**/}

/*===========================================*/
#CHECK{}
#CHECK header{ margin-bottom: 30px; padding-bottom:30px;}
#CHECK h1{ padding-top: 30px;}
#CHECK h2{ margin-top: 30px;}

.LINK { margin: 1em 0; }
.LINK a{ padding: 10px 20px; background: #eee; border:2px solid #ccc; border-radius: 5px;  font-size: 1.2em; text-decoration: none; }
.LINK a:hover{ background: #fff; border:2px solid #eee; }

/*PageTOP
==============================================================*/
#pageTop { position: fixed; right: 40px; bottom: -200px; z-index: 1000; height: 120px; }
#pageTop a  { display: inline-block; position: relative; width: 10px;	height: 80px; }
#pageTop a::before { width: 1px; height: 100%; left: 0; top: 0;}
#pageTop a::before, #pageTop a::after {display: block; content: ''; position: absolute; background: #888;
transition: all .4s cubic-bezier(.3,0,.15,1);}
#pageTop a::after { width: 8px;height: 1px; left: -1px; top: 3px;transform: rotate(45deg);}
#pageTop span { display: block;position: absolute;bottom: 0;right: 0;width: 100px;
font-size: 0.9em;text-align: right;transform: rotate(90deg);transform-origin: right bottom;}
#pageTop a:hover { opacity: 1; color: #888;}

/*for PC-Tablet ==========================================*/
@media screen and (min-width:1025px) {
#pageTop a:hover::before { height: 90px; top: -10px;}
#pageTop a:hover::after { top: -7px;}
/**/}

/*for SP(+Tablet)==========================================*/
@media screen and (max-width:1024px) {
#pageTop { opacity: 0.7;  position: fixed; right: 20px; bottom:-100px; height: 70px; }
#pageTop a  { width: 4px;	height: 60px; }
#pageTop span { font-size: 0.7em;}
#pageTop a:hover { opacity: 0.7; color: #888;}

/**/}