@charset "utf-8";

/*
============================================================
基本レイアウト設定
============================================================
*/
.phone{display: none;}
.sp{display: none;}
.tb{display: none;}
.pc{display: block;}

.no_phone{display: inline;}


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

noscript p{
    text-align: center;
    width: 100%;
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
}
/* ---------------------------------------------------------
■ ローディング
--------------------------------------------------------- */
#index_wrap {
	display: none;
}

#loading_wrap {
	display: none;
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	background: #2778be;
	z-index: 10000;
	color: #FFF;
}

#loading_wrap #load_content {
	position:absolute;
    display: inline-block;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


#bowlG{
	position:relative;
	width:58px;
	height:58px;
	margin:auto;
}

#bowl_ringG{
	position:absolute;
	width:58px;
	height:58px;
	border:5px solid rgb(255,255,255);
	border-radius:58px;
    box-sizing: content-box;
}

.ball_holderG{
	position:absolute;
	width:16px;
	height:58px;
	left:21px;
	top:0px;
	animation-name:ball_moveG;
		-webkit-animation-name:ball_moveG;
	animation-duration:1.5s;
		-webkit-animation-duration:1.5s;
	animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
	animation-timing-function:linear;
		-webkit-animation-timing-function:linear;
}

.ballG{
	position:absolute;
	left:0px;
	top:-14px;
	width:23px;
	height:23px;
	background:rgb(255,255,255);
	border-radius:19px;
}



@keyframes ball_moveG{
	0%{
		transform:rotate(0deg)
	}

	100%{
		transform:rotate(360deg)
	}
}



@-webkit-keyframes ball_moveG{
	0%{
		-webkit-transform:rotate(0deg)
	}

	100%{
		-webkit-transform:rotate(360deg)
	}
}

/* ---------------------------------------------------------
■ 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;
}

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

/*a img:hover   { opacity: 0.8; transition: 0.2s;}*/

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

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

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

.tx_red{color: #D80003;}
.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;}
.bg_white {background: #fff;}

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

.pdt_10{padding-top: 10px;}
.pdt_20{padding-top: 20px;}
.pdt_30{padding-top: 30px;}

.pdb_10{padding-bottom: 10px;}
.pdb_20{padding-bottom: 20px;}
.pdb_30{padding-bottom: 30px;}

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

p {
	text-align: justify;
	text-justify: inter-ideograph;
    line-height: 200%;
}

img {
    width: 100%;
    height: auto;
}

i.br:after{
    content: '\A';
    white-space: pre;
}

i.sp_br:after{
    content: '';
}

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

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

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

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

.layout_box .left{
	float: left;
    width: 48.5%;
}

.layout_box .right{
	float: right;
    width: 48.5%;
}

/* ---------------------------------------------------------
■ エントリーボタン
--------------------------------------------------------- */
.entry_btn{
    width: 100%;
    background: #2eedbf;
    position: relative;
    transition: 0.2s;
}

.entry_btn:before{
    content: '';
    position: absolute;
    top: 6px;
    left: 6px;
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border: 2px solid #fff;
    box-sizing: border-box;
}

.entry_btn p{
    width: 100%;
    height: 100%;
    padding: 22px 50px 18px 20px;
    text-align: center;
    font-weight: bold;
    font-size: 157%;
    font-family: 'Kosugi';
    color: #fff;
    position: relative;
}

.entry_btn p:after{
    content: "";
    position: absolute;
    width: 36px;
    height: 16px;
    background: url("../images/arrow_ye.png") no-repeat;
    background-size: 36px 16px;
    top: 45%;
    right: 25px;
    transform: translate(0,-50%);
    transition: 0.3s;
}

.entry_btn:hover{
    background: #82f4d9;
}

.entry_btn:hover p:after{
    transform: translate(5px,-50%);
}

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

header:after {
    content: "";
	width: 100%;
	height: 80px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 30;
    opacity: 0.2;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#00154b+0,00154b+100&1+0,0+100 */
background: -moz-linear-gradient(top, rgba(0,21,75,1) 0%, rgba(0,21,75,0) 90%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(0,21,75,1) 0%,rgba(0,21,75,0) 90%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(0,21,75,1) 0%,rgba(0,21,75,0) 90%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00154b', endColorstr='#0000154b',GradientType=0 ); /* IE6-9 */
}

/*ヘッダーボックス*/
header #head_box{
	position: fixed;
	height: 60px;
    top: 0;
	width: 100%;
	z-index: 500;
}

header .head_hide{
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.9);
	position: absolute;
	top: 0;
	left: 0;
}

/*ヘッダーロゴ*/
header .head_logo{
	position: fixed;
    top: 10px;
    left: 20px;
	z-index: 1000;
	width: 274px;
    height: 60px;
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}

header .head_logo:hover{
    opacity: 0.7;
    transition-duration: 0.2s;
}

header .logo_w{
    width: 100%;
    height: 100%;
    background: url(../images/logo_main.png) no-repeat;
    background-size: 100% auto;
    opacity: 1;
}

header .logo_b{
    width: 100%;
    height: 100%;
    background: url(../images/logo_main_black.png) no-repeat;
    background-size: 100% auto;
    opacity: 0;
}

header .head_logo a{
    display: block;
    height: 100%;
}

/*ヘッダーボタン*/
header .head_btn{
    position: absolute;
    top: 5px;
    right: 0;
    width: auto;
}

header .head_btn .left,header .head_btn .right{
    width: 340px;
    margin-right: 10px;
}

header .head_btn .entry_btn:before{
    top: 4px;
    left: 4px;
    width: calc(100% - 8px);
    height: calc(100% - 8px);
}

header .head_btn .entry_btn p{
    width: 100%;
    height: 50px;
    padding: 15px 15px 0 0;
    line-height: 100%;
    text-align: center;
    font-size: 143%;
    font-weight: inherit;
    background-size: 28.8px 12.8px;
}

/* ---------------------------------------------------------
■ ページトップ
--------------------------------------------------------- */
#page-top {
    position: fixed;
    right: 10px;
	z-index: 100;
    width: 40px;
    height: 110px;
    background: url(../images/pagetop.png) no-repeat top center;
    background-size: 25px auto;
    transition-duration: 0.2s;
}

#page-top:hover {
	cursor: pointer;
    transform: translateY(-5px);
}

/* ---------------------------------------------------------
■ フェードイン
--------------------------------------------------------- */
.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); } }

/* ---------------------------------------------------------
■ フッター
--------------------------------------------------------- */
footer {
	width: 100%;
	background: #ebf2f0;
}

.foot_contents{
    width: 95%;
	max-width: 1100px;
	margin: 0 auto;
	text-align: center;
    padding: 20px 0 0;
}

/*フッターボタン*/
.foot_btn {
    width: 280px;
    height: 50px;
    margin: 0 auto;
    padding: 16px 0 0 0;
    line-height: 100%;
    border-radius: 25px;
    font-family: 'Kosugi';
    font-size: 129%;
    background: #fcee21;
    position: relative;
    transition: 0.3s;
}

.foot_btn:after{
    content: "";
    width: 28.8px;
    height: 12.8px;
    position: absolute;
    top: 46%;
    right: 25px;
    background: url("../images/arrow_bk.png") no-repeat;
    background-size: 28.8px 12.8px;
    transform: translate(0,-50%);
    transition: 0.3s;
}

.foot_btn:hover{
    background-color: #fff16c;
}

.foot_btn:hover:after{
    transform: translate(5px,-50%);
}

/*コピーライト*/
footer .copy{
    text-align: center;
    padding-top: 20px;
}


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

.lightbox{ 
	display: none;
	width: 100%;
	height: 100%;
	overflow: auto;
	text-align: left;
    padding: 25px;
	background-color:#fff;
}
@media screen and (max-width: 767px){
	.lightbox {
	    padding: 25px 20px;
	}
}