@charset "UTF-8";
@import url('http://fonts.googleapis.com/earlyaccess/notosansjapanese.css');
*{ font-family:"Noto Sans Japanese", "Hiragino Kaku Gothic ProN", Meiryo, Helvetica, sans-serif; }
@import url('http://fonts.googleapis.com/earlyaccess/notoserifjapanese.css');
.serif{ font-family:"Noto Serif Japanese", "Hiragino Mincho ProN", YuMincho, "Times New Roman", serif; }

/**
 * 初期化
----------------------------------------------------------------------------------------------------*/
table{ width:100%; }
p{ text-align:justify; }
img{ display:block; max-width:100%; }
.box{
	border:1px solid #555;
	padding:10px;
	margin:10px;
	border-radius:4px;
}

/**
 * 全体
----------------------------------------------------------------------------------------------------*/
html,body{ overflow-x:hidden; }
body{
	background:rgb(255,250,240);
	color:black;
	font-size:14px;
	line-height:150%;
	width:100%;
	height:100%;
}
body > *{
	max-width:1024px;
	margin:0 auto;
}

/**
 * プロトタイプ
----------------------------------------------------------------------------------------------------*/
a{ color:#000; }
a:hover{ color:#000; }
.gm > iframe{ height:400px; }
.yt {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 25px;
	height: 0;
	overflow: hidden;
}
.yt > iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
hr{
	margin-top:40px;
}
.inactive{
	opacity:.5;
}
.overimage-x{
	position:relative;
	width:150%;
	left:50%;
	margin-left:-75%;
}
.overimage-x > img{ display:block; }
@media screen and (max-width: 1024px){
	.overimage-x{ width:150%; }
}
/* 羽根 */
.wing{ position:relative; }
.wing::before,
.wing::after{
	content:'';
	display:block;
	position:absolute;
	top:0;
	height:100%;
	width:1000%;
	z-index:-1;
}
.wing::before{ right:50%; }
.wing::after{ left:50%; }
@media screen and (max-width: 1024px){
	.wing::before,
	.wing::after{ width:50%; }
}

/**
 * ヘッダー
----------------------------------------------------------------------------------------------------*/
body > header{
	background:rgb(255,140,0);
	max-width:none;
	position:fixed;
	left:0;
	right:0;
	height:60px;
	width:100%;
	z-index:1000;
}

/* ロゴ */
#logo{
	margin:0 auto;
	max-width:1024px;
	position:relative;
	z-index:1200;
}
#logo > a{
	display:block;
	max-width:370px;
}
#logo > a:hover{
	opacity:.8;
	background:rgba(0,0,0,.1);
}
#logo > a > img{
	display:block;
	max-height:60px;
}
#logo > a:hover{ opacity:.8; }
@media screen and (max-width: 768px){
	#logo{ margin-right:60px; }
}

/* メニューボタン */
#menu{
	position:absolute;
	right:0;
	width:60px;
	padding:0;
	margin:0;
	display:block;
	border:none;
	background:none;
}
#menu:hover{
	opacity:.8;
	background:rgba(0,0,0,.1);
}

/* Gナビ */
#gnav{
	position:absolute;
	top:0;
	left:0;
	right:0;
}
#gnav > ul{
	margin-top:60px;
	background:rgba(0,0,0,.2);
	padding-bottom:20px;
	display:none;
}
#gnav > ul:hover,
#menu:hover + ul{ display:block; }
#gnav > ul > li{ float:left; }
#gnav > ul > li > a{ display:block; }
#gnav > ul > li.active > a{ background:rgba(255,255,255,.9); }
#gnav > ul > li > a:hover{ background:rgba(255,255,255,.2); }
#gnav > ul > li.active > a:hover{ background:rgba(255,255,255,1); }
#gnav > ul > li > a > img{ margin:0 auto; }
#gnav > ul > li{ width:8.3333333333333%; }
#gnav > ul > li{ width:8.3333333333333%; }
@media screen and (max-width: 1126px){ #gnav > ul > li{ width:16.666666666667%; } }
@media screen and (max-width: 768px){ #gnav > ul > li{ width:25%; } }

/**
 * コンテンツ
----------------------------------------------------------------------------------------------------*/
body > main{ padding:60px 20px 0; }
@media screen and (max-width: 1024px){
	body > main{ overflow:hidden; }
}

/* メインビジュアル */
#mvis,
#mvis::before,
#mvis::after{ background:white; }

/* 言語 */
#lang{
	position:absolute;
	top:80px;
	right:20px;
	max-width:200px;
}
#lang > li{
	margin-bottom:4px;
}
#lang > li > a{
	display:block;
	border-radius:4px;
	overflow:hidden;
	transition:opacity .2s;
}
#lang > li > a:hover{ opacity:.8; }
@media screen and (max-width: 768px){
	#lang{
		max-width:120px;
		top:60px;
		right:0;
	}
	#lang > li{ margin:0; }
	#lang > li > a{ border-radius:0; }
}

/* サイト説明 */
#summary{ margin-top:-170px; }
@media screen and (max-width: 1024px){
	#summary{ margin-top:-17%; }
}
@media screen and (max-width: 768px){
	#summary{
		left:0;
		width:auto;
		overflow:hidden;
		margin:-22% -20px 0;
	}
	#summary > img{
		width:230%;
		max-width:230%;
		margin-left:-40.5%;
	}
	#summary::before{
		display:block;
		content:'';
		position:absolute;
		top:28%;
		left:0;
		right:0;
		height:12%;
		background:rgb(178,232,178);
		z-index:-1;
	}
}

/* 映像リスト */
#videolist{
	margin:20px 0;
}
#videolist > li{
	float:left;
	width:50%;
}
@media screen and (max-width: 768px){
	#videolist > li{
		width:auto;
		float:none;
	}
}
#videolist > li > a{ display:block; }
#videolist > li > a:hover{ background:rgba(0,0,0,.05); }

/* 再生ボタン */
.play{
	padding:1% 0 5%;
}
.play > img{
	margin:0 auto;
	display:block;
	max-width:300px;
}
.play > img:hover{ opacity:.8; }
@media screen and (max-width: 480px){
	.play > img{ max-width:200px; }
}

/* 記事ページヘッダー */
#cont > header > .area{
	float:left;
	width:140px;
	background:orange;
	height:100px;
	line-height:100px;
	margin-bottom:20px;
	margin-right:20px;
	text-align:center;
	font-size:30px;
	font-weight:bold;
	color:white;
}
#cont > header > h1 > .catch{
	font-size:20px;
	line-height:30px;
	font-weight:bold;
}
#cont > header > h1 > .tit{
	font-size:40px;
	line-height:70px;
}

/* 記事ページコンテンツ */
#cont > .article h1{
	font-size:18px;
	font-weight:bold;
	line-height:22px;
	margin-bottom:20px;
}

/* 記事ページフッター */
#cont > footer,
#cont > footer::before,
#cont > footer::after{
	background:white;
}
#cont > footer{ margin-top:20px; }
#cont > footer > .tit{
	font-size:18px;
	font-weight:bold;
	line-height:22px;
	padding:20px 0;
}
@media screen and (max-width: 1024px){
	#cont > footer{
		margin-right:-20px;
		margin-left:-20px;
		padding:0 20px;
	}
}

/* 説明 */
.summary{
	margin:20px 0;
}
.summary > *{
	float:left;
	width:50%;
}
@media screen and (max-width: 768px){
	.summary > *{
		float:none;
		width:auto;
	}
}
.summary > div{
	background:white;
	padding:20px;
	box-sizing:border-box;
	box-shadow:0 0 10px rgba(0,0,0,.05);
}

/* 制作協力 */
.cooperation > li{
	display:inline-block;
	margin-bottom:10px;
	margin-right:10px;
}
.cooperation > li > a{
	background:rgb(0,180,0) url(./../image/ui_favicon.png) scroll no-repeat -20px center;
	color:white;
	padding:10px 10px 10px 50px;
	display:inline-block;
	border-radius:4px;
}
.cooperation > li > a:hover{ background-color:rgb(-51,165,-51); }

/* 他のみえびと */
.mnav > li > a{
	display:block;
	float:left;
	width:16.666666666667%;
}
@media screen and (max-width: 768px){ .mnav > li > a{ width:25%; } }
@media screen and (max-width: 480px){ .mnav > li > a{ width:33.333333333333%; } }
.mnav > li > a:hover{ background:rgba(0,0,0,.1); }
.mnav > li > a > img{
	margin:0 auto;
	display:block;
}

/**
 * フッター
----------------------------------------------------------------------------------------------------*/
body > footer,
body > footer::before,
body > footer::after{
	background:rgb(255,140,0);
}
body > footer{
	color:white;
	margin-top:28px;
	padding:60px 10px 10px;
	text-align:right;
}
@media screen and (max-width: 480px){
	body > footer{ text-align:center; }
}

/* トップへ戻る */
#totop{
	display:block;
	width:124px;
	position:absolute;
	top:-28px;
	right:10px;
}
#totop:hover{ opacity:.8; }

/* お問い合わせ */
#tocontact{
	display:inline-block;
	max-width:210px;
}
#tocontact:hover{ opacity:.8; }

/* 著作権表記 */
#cr{
	display:inline-block;
	max-width:210px;
}

/**
 * フォーム
----------------------------------------------------------------------------------------------------*/
dialog#contact{
	content:'';
	background:rgba(0,0,0,.8);
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:50000;
	display:none;
}
dialog#contact.active{ display:block; }
dialog#contact > form{
	-moz-appearance:none;
	-webkit-appearance:none;
	appearance:none;
	position:absolute;
	left:50%;
	top:50%;
	background:white;
	width:400px;
	height:300px;
	margin-left:-200px;
	margin-top:-150px;
	text-align:left;
	display:block;
}
dialog#contact > form > header{
	background:rgb(255,140,0);
	line-height:40px;
	position:absolute;
	top:0;
	width:100%;
	text-align:center;
	font-weight:bold;
}
dialog#contact > form > div{
	position:absolute;
	top:50px;
	bottom:50px;
	left:10px;
	right:10px;
	color:black;
}
dialog#contact > form > footer{
	background:rgb(255,140,0);
	line-height:40px;
	position:absolute;
	bottom:0;
	width:100%;
	text-align:center;
}
input[type="text"],textarea{
	border:1px solid #ccc;
	background:white;
	padding:4px;
}
input[type="button"],input[type="submit"]{
	border:none;
	background:white;
	padding:4px 10px;
	font-size:14px;
}
input[type="button"]:hover,input[type="submit"]:hover{
	background:#eee;
}
label,
label > span{ display:block; }
dialog.success,
dialog.error{
	position:fixed;
	left:50%;
	top:50%;
	background:white;
	width:200px;
	height:150px;
	margin-left:-100px;
	margin-top:-75px;
	box-shadow:0 0 0 10000px rgba(0,0,0,.8);
	color:black;
	text-align:center;
}
dialog.success > *,
dialog.error > *{
	padding:4px 10px;
}
dialog.success input,
dialog.error input{
	border:1px solid black;
	background:white;
	padding:4px 10px;
	font-size:14px;
}