@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:#d9def1;
	scrollbar-face-color:#d9def1;
	scrollbar-3dlight-color:#d9def1;
	scrollbar-darkshadow-color:#d9def1;
	scrollbar-highlight-color:#d9def1;
	scrollbar-shadow-color:#d9def1;
	scrollbar-track-color:#417fb2;
}

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

/* ---------------------------------------------------------
■ トップへ戻るボタン
--------------------------------------------------------- */
#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:hover img{
	-webkit-transform: translate(0,-2px);
	-moz-transform: translate(0,-2px);
	-ms-transform: translate(0,-2px);
	-o-transform: translate(0,-2px);
	transform: translate(0,-2px);
	cursor: pointer;
}
*/
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;*/
}

h3 { 
	font-weight: bold;
	font-size: 16px;
	padding: 8px 0 4px;
}


/* ---------------------------------------------------------
■ レイアウトベース
--------------------------------------------------------- */
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: 14px;
}

#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;
}

/* ---------------------------------------------------------
■ ヘッダー
--------------------------------------------------------- */
header {
	width: 100%;
	height: auto;
	margin: 0 auto;
	text-align: center;
	position: relative;
}

/*ヘッダーロゴ*/
header #head_logo{
	position: fixed;
	height: 80px;
    top: 10px;
    left: 0;
	z-index: 1000;
	width: 170px;
}

header #head_logo img{
	max-width: 100%;
	height: auto;
	margin-left: 0;
}

header #head_logo:hover{
   /* transform: translateY(2px);
    transition: 0.1s;*/
}

/*ヘッダーボタン*/
header #head_btnbox{
	position: fixed;
	height: 56px;
    top: 0;
	width: 100%;
	z-index: 500;
	background: rgba(255,255,255,0.9);

}

header #head_btnbox img{
	position: absolute;
	top: 10px;
	/*transform: translateY(-40px);*/
	
}

header #head_btnbox img.tel{
	right: 170px;
	/*background: #89acc8;*/
}

header #head_btnbox img.mail{
	right: 10px;
	background: #417fb2;
}

header #head_btnbox a:hover img{
	transform: translateY(0);
}

/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
footer {
	background:#014099;
	color:#FFF;
	padding:60px 0;
	box-sizing: border-box;
}

footer .inner:after {
	content:'';
	display:block;
	clear:both;
}
footer .inner {
	width:960px;
	margin:0 auto;
	box-sizing: border-box;
}

footer h2 {
	font-size:200%;
	line-height:1.2;
	margin:0 0 3px;
	text-align: left;
	font-family: "メイリオ", Meiryo, sans-serif;
	font-weight: bold;
}

footer h2::before,
footer h2::after {
	content: none;
}

footer .overflowHidden {
	overflow: hidden;
	min-height: 120px;
}

footer p {
	margin-bottom:0;
	text-align: left;
}

footer .btn {
	display:inline-block;
	background:#FFF;
	color:#014099;
	min-width:272px;
	padding:3px 15px 0;
	border-radius:48px;
	text-align:center;
	text-decoration:none;
	font-size:171.4%;
	font-weight:bold;
	line-height:1.5;
}

footer .btn:hover {
	opacity:0.7;
	filter:alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

footer .floatL {
	float: left;
	width:450px;
	margin:0 0 80px;
}


footer .floatR {
	float: right;
	width:425px;
	margin:0 0 80px;
}

footer .floatR .contactTex {
	font-size:114.3%;
	font-weight:bold;
	margin:0 0 10px;
	line-height:1.2;
}


footer .floatR .telLink {
	font-size:270%;
	font-weight:bold;
	line-height:1.2;
}

footer .floatR .telLink i {
	font-size:108%;
	vertical-align:top;
}

footer .copy {
	margin: 50px 0 0;
	text-align: center;
	clear: both;
}

footer small {
	font-size:85.7%;
}



/* ---------------------------------------------------------
■ ライトボックス
--------------------------------------------------------- */
.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); } }