@charset "utf-8";

/*
============================================================
基本レイアウト設定
------------------------------------------------------------

■ デフォルトリセット
■ floatクリア
■ スクロール
■ テキストリンク
■ 汎用パーツ
■ レイアウトベース
■ ヘッダー
■ フッター
■ コンテンツ


============================================================
*/
.sp{display: none;}
.tb{display: none;}
.pc{display: block;}
/* ---------------------------------------------------------
■ デフォルトリセット
--------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, address,
ul, ol, li, dl, dt, dd,
table, th, td, img, form, figure {
	margin: 0;
	padding: 0;
	font-weight: normal;
	font-style: normal;
	font-size: 100%;
	line-height: 1.6;
	border: none;
	list-style-type: none;
}

/* ---------------------------------------------------------
■ floatクリア
--------------------------------------------------------- */
span.clear {
	height: 0;
	margin: 0;
	padding: 0;
	font-size: 1px;
	line-height: 1px;
	display: block;
	clear: both;
}

.clearfix:after{
	content: "";
	clear: both;
	display: block;
}

/* ---------------------------------------------------------
■ スクロール
--------------------------------------------------------- */
body {
	scrollbar-arrow-color:#f1ebd9;
	scrollbar-face-color:#f1ebd9;
	scrollbar-3dlight-color:#f1ebd9;
	scrollbar-darkshadow-color:#f1ebd9;
	scrollbar-highlight-color:#f1ebd9;
	scrollbar-shadow-color:#f1ebd9;
	scrollbar-track-color:#db700e;
}

/*スクロールバーの横幅指定*/
body::-webkit-scrollbar {
    width: 12px;
}
/*スクロールバーの背景色・角丸指定*/
body::-webkit-scrollbar-track {
	background: #db700e;
}
/*スクロールバーの色・角丸指定*/
body::-webkit-scrollbar-thumb {
	border-radius: 15px;
	background:#f1ebd9;
}

/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%;
	z-index: 100;
}
#page-top a {
    background: #a2a4ab;
    text-decoration: none;
    color: #fff;
    width: 80px;
    padding: 20px 0;
    text-align: center;
    display: block;
    border-radius: 5px;
	opacity: 0.8;
}
#page-top a:hover {
	background: #b6b9c8;
}

/* ---------------------------------------------------------
■ リンク
--------------------------------------------------------- */
a:link    { color: #666666; text-decoration: none; }
a:visited { color: #666666; text-decoration: none; }
a:hover   { color: #0066CC; text-decoration: none; }
a:active  { color: #0066CC; text-decoration: none; }

img{
	transition: 0.1s;
}

a.none:hover img{
	-webkit-transform: translate(0,0);
	-moz-transform: translate(0,0);
	-ms-transform: translate(0,0);
	-o-transform: translate(0,0);
	transform: translate(0,0);
}

/* ---------------------------------------------------------
■ 汎用パーツ
--------------------------------------------------------- */
.small {font-size: 70%;}
.small_80 {font-size: 80%;}
.small_90 {font-size: 90%;}

.big {font-size: 110%;}
.big_120 {font-size: 120%;}
.big_130 {font-size: 130%;}

.tx_center{text-align: center;}
.tx_right{text-align: right;}
.tx_left{text-align: left;}

.bold{font-weight: bold;}

.under_yellow {background:linear-gradient(transparent 40%,#ffcc00 0%); display: inline; padding: 0 2px 8px;}

.bg_yellow {background: yellow;}
.bg_blue {background: #cdeef2;}

.mgt_10{margin-top: 10px;}
.mgt_20{margin-top: 20px;}
.mgt_30{margin-top: 30px;}

.mgr_10{margin-right: 10px;}
.mgr_20{margin-right: 20px;}
.mgr_30{margin-right: 30px;}

.mgb_10{margin-bottom: 10px;}
.mgb_20{margin-bottom: 20px;}
.mgb_30{margin-bottom: 30px;}

.mgl_10{margin-left: 10px;}
.mgl_20{margin-left: 20px;}
.mgl_30{margin-left: 30px;}

.pdg_25{padding: 25px;}

.right{float: right;}
.left{float: left;}

p {
	text-align: justify;
	text-justify: inter-ideograph;
}

/* ---------------------------------------------------------
■ レイアウトベース
--------------------------------------------------------- */
body {
	margin: 0;
	padding: 0;
	text-align: center; /* 中央レイアウト */
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	color: #000000;
	font-size: 16px;
	position:relative;
}

div{ box-sizing: border-box;}

.snow {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 900;
    width: 100%;
    height: 100%;
    background: red;
}

#content_base {
	width: 100%;
	height: 100%;
	margin: 0 auto; /* 中央レイアウト */
	text-align: center;
	position: relative;
    overflow: hidden;
}

.layout_box{
	margin: 0 auto; /* 中央レイアウト */
}

.layout_box:after {
	content: "";
	clear: both;
	display: block;
}

.layout_box .left{
	float: left;
}

.layout_box .right{
	float: right;
}

/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */
.featherlight{ padding: 2%}

.lightbox { 
	display: none;
	max-width: 700px;
	width: 100%;
	height: 100%;
	overflow: auto;
	text-align: left;
	font-size: 13px;
    padding: 25px;
}

.lightbox p{ 
	line-height: 1.6;
    padding: 5px;
}
.lightbox .layout_box{
	width: 100%;
    margin-bottom: 20px;
}

.lightbox .layout_box .left{ 
	width: 25%;
}

.lightbox .layout_box .left img{ 
	width: 100%;
    height: auto;
}

.lightbox .layout_box .right{ 
	width: 72%;
}

.lightbox .name_tit{ 
    font-size: 16px;
    line-height: 16px;
    background: #417fb2;
    color: #fff;
    padding: 6px 5px 5px 5px;
}

.lightbox .name{ 
    font-size: 26px;
    line-height: 20px;
    margin: 20px 0 5px;
    padding-bottom: 15px;
/*  font-family:"Sawarabi Mincho";
	-ms-font-feature-settings: "normal";*/
    border-bottom: 1px solid #ccc;
}

.lightbox .name .ruby{ 
    font-size: 16px;
    vertical-align: middle;
    padding-left: 5px;
}

.youtube,.frame_box{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}

iframe.frame{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.youtube img{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

.youtube:before {
	position: absolute;
	content: "";
	background: rgba(0, 0, 0, 0.6);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	transition: all 0.3s;
}
.youtube:hover:before {
	background: rgba(0, 0, 0, 0.7);
	cursor: pointer;
	transition: all 0.3s;
}

.youtube:after {
	position: absolute;
	content: "▶ Play";
	color: #fff;
	text-align: center;
	font-size: 160%;
	font-weight: bold;
	top: 50%;
	left: 50%;
    transform: translate(-50%,-50%);
	z-index: 11;
}


/* ---------------------------------------------------------
■ フェードイン
--------------------------------------------------------- */
.fadein {
  visibility: hidden; }

.fadein_delay {
	-webkit-animation-delay: 0.8s;
	-ms-animation-delay: 0.8s;
	animation-delay: 0.8s;
}

.fadeInDown {
  visibility: visible !important;
  -webkit-animation-fill-mode: both;
  -ms-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-duration: 0.5s;
  -ms-animation-duration: 0.5s;
  animation-duration: 0.5s;
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown; }

@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0); } }
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translateY(30px);
    -ms-transform: translateY(30px);
    transform: translateY(30px); }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0); } }