@charset "utf-8";

/**
 *
 *  component.css
 *
 *  単語間はハイフン-で接続
 *  共通パーツの意味分けは下記接頭辞を付与。その際、アンダーバー_で接続
 *
 *  ・utility    接頭辞 u_
 *   便利クラス。 テキストの強調、テキストの配置、余白調整など
 *  ・component  接頭辞 c_
 *   プロフィール、カテゴリindexリストなどprojectの固有パターン（再利用というより、そのためだけ！のようなもの）
 *  ・project    接頭辞 p_
 *   コメントエリア、プロフィールなど大枠パーツになるもの また、共通コンテンツ
 *
 *  component projectに関しては拡張する場合、先頭アンダーバー ._* の複数クラスで行う
 *  (例) .c_ttl-style01._type02(スタイルの拡張)
 *       .c_tbl-style._col3（テーブルの3カラムレイアウト）
 *
 *  状態を表すクラスに関しては.is-activeなど.is-*で統一。（拡張クラスの場合._is-*とする）
 *  (例) .c_btn-style01._is-active
 *
 *  なお、上記の接頭辞を使うcssは/shared/css/各名前.css に全て記述すること
 *
 */

/*--------------------------------------------------------------------------
   レイアウト枠
---------------------------------------------------------------------------*/

.c_l-inner-base{
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
}
.c_l-inner-base02{
	position: relative;
	max-width: 1600px;
	margin: 0 auto;
}
.c_l-content{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 60px;
	margin: 0 auto;
}
.c_l-content02{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 40px;
	margin: 0 auto;
}

/*--------------------------------------------------------------------------
   セクションスタイル
---------------------------------------------------------------------------*/

.c_sec-style01{
	padding-bottom: 40px;
	background: #3F3F3F;
}
.c_sec-style01 .sec-inner{
	margin-top: 30px;
}


/*--------------------------------------------------------------------------
   区切り線
---------------------------------------------------------------------------*/

.c_separate{
	margin-top: 60px;
	padding-top: 65px;
	border-top: 2px solid #1e415d;
}

/*--------------------------------------------------------------------------
   コンテンツスタイル
---------------------------------------------------------------------------*/

.c_cont-style01{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 30px;
  -webkit-border-radius: 10px;
 -moz-border-radius: 10px;
  border-radius: 10px;
  background: #212121;
}


/*--------------------------------------------------------------------------
   タイトルスタイル
---------------------------------------------------------------------------*/
/* style01
-----------------------------------------------------------------*/
.c_ttl-style01{
	background: #00299E;
	font-size: 110%;
	font-weight: bold;
}
.c_ttl-style01 span{
	display: block;
	margin: 0 auto;
	padding: 15px 0;
	text-align: center;
}

/* style02
-----------------------------------------------------------------*/
.c_ttl-style02{
	font-size: 24px;
	font-weight: bold;
}

/*--------------------------------------------------------------------------
   グリッドスタイル
---------------------------------------------------------------------------*/
.c_grid{
	overflow: hidden;
}
.c_grid._col02{
	margin: 0 -.8%;
}
.c_grid._col02 .item{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	float: left;
	margin-top: 30px;
	width: 50%;
}
.c_grid._col02 .item .box-inner{
	margin: 0 2%;
}

/*--------------------------------------------------------------------------
   イメージボックススタイル
---------------------------------------------------------------------------*/

/* img-box01
-----------------------------------------------------------------*/
.c_img-box01{
	-webkit-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-moz-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-webkit-border-radius: 10px;
	-moz- border-radius: 10px;
  border-radius: 10px;
	display: table;
	width: 100%;
	background: #212121;
}
.c_img-box01._v-ct{
	vertical-align: middle;
}
.c_img-box01 .cell{
	display: table-cell;
	vertical-align: top;
}
.c_img-box01 .cell.img img{
	width: 100%;
	height: auto;
}
.c_img-box01 .txt-wrap{
	padding: 38px 20px 10px 40px;
}
.c_img-box01 .txt-wrap .ttl{
	font-size: 30px;
	font-weight: bold;
	line-height: 1.4;
}
.c_img-box01 .txt-wrap .txt{
	margin-top: 10px;
	font-size: 22px;
	color: #ccc;
	line-height: 1.8;
}

/* img-box02
-----------------------------------------------------------------*/
.c_img-box02{
	overflow: hidden;
}
.c_img-box02 .img._left{
	float: left;
}
.c_img-box02 .img._right{
	float: right;
}
.c_img-box02 .txt-wrap{
	overflow: hidden;
}

/* img-box03
-----------------------------------------------------------------*/
.c_img-box03{
}
.c_img-box03 .box-inner{
	box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-moz-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-webkit-border-radius: 10px;
	-moz- border-radius: 10px;
  border-radius: 10px;
	background: #212121;
}
.c_img-box03 .txt-wrap{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	width: 100%;
	padding: 30px 40px;
}
.c_img-box03 .txt-wrap._bt{
	-webkit-border-radius: 0 0 10px 10px;
	-moz- border-radius: 0 0 10px 10px;
	padding: 8px 35px 48px;
  border-radius: 0 0 10px 10px;
}
.c_img-box03 .txt-wrap .ttl{
	font-size: 24px;
	font-weight: bold;
	line-height: 1.4;
}
.c_img-box03 .txt-wrap .txt{
	margin: 18px 0 0 2px;
	color: #ccc;
	line-height: 32px;
}
@media only screen and ( max-width: 1400px ) {
	.c_img-box03 .img img{
		width: 100%;
		height: auto;
	}
}

/* img-box04
-----------------------------------------------------------------*/
.c_img-box04{
	box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 10px 16px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 10px 16px;
	-moz-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 10px 16px;
	-webkit-border-radius: 10px;
	-moz- border-radius: 10px;
  border-radius: 10px;
	margin-top: 42px;
	background: #222;
}
.c_img-box04 > .title{
	background: #101010;
	text-align: center;
  border-radius: 10px 10px 0 0;
}
.c_img-box04 .txt-wrap{
	padding: 28px 35px 30px;
}

@media only screen and ( max-width: 1400px ) {
	.c_img-box04 .img img{
		width: 100%;
		height: auto;
	}
}


/*--------------------------------------------------------------------------
   ボックススタイル
---------------------------------------------------------------------------*/

/* style01
-----------------------------------------------------------------*/
.c_box-style01{
	box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-moz-box-shadow:rgba(0, 0, 0, 0.658824) 0px 0px 18px 6px;
	-webkit-border-radius: 10px;
	-moz- border-radius: 10px;
  border-radius: 10px;
	background: #212125;
}
.c_box-style01 .box_bt{
	border-top: 1px solid #3A3939;
}
.c_box-style01._no-radius{
	-webkit-border-radius: 0;
	-moz- border-radius: 0;
  border-radius: 0;
}


/* style02
-----------------------------------------------------------------*/
.c_box-style02{
	padding: 34px;
	border: solid 2px #3A3939;
	background: #232521;
	font-size: 22px;
}

/*--------------------------------------------------------------------------
   ボタンスタイル
---------------------------------------------------------------------------*/

.c_btn-list{
	overflow: hidden;
}
.c_btn-list li{
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	text-align: center;
}
.c_btn-list._col02 li{
	width: 50%;
}
.c_btn-list li a{
	text-align: left;
}


/*--------------------------------------------------------------------------
   ボタンスタイル
---------------------------------------------------------------------------*/

.c_btn-style01{
	margin-top: 20px;
}
.c_btn-style01._no-gap{
	margin-top: 0;
}
.c_btn-style01 a,
.c_btn-style01 span.btn-nolink {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 5px;
 -moz- border-radius: 5px;
  border-radius: 5px;
	display: inline-block;
	font-weight: bold;
	padding: 13px 20px 13px 28px;
	background: #F4D372;
	color: #000;
}
.c_btn-style01 a:hover{
	-ms-filter: "alpha(opacity=70)";
	filter: alpha(opacity=70);
	opacity: .7;
}
.c_btn-style01 a > span,
.c_btn-style01 span.btn-nolink > span {
	display: block;
	padding-right: 33px;
	background: url(/universal-cool-japan2016/src/img/global/ico_arw01.png) no-repeat 100% 50%;
}
.c_btn-style01 a .sub{
	font-weight: normal;
}
/* width */
.c_btn-style01._w01 a{
	width: 342px;
	max-width: 342px;
}
.c_btn-style01._w02 a{
	width: 352px;
	max-width: 352px;
}
.c_btn-style01._w03 a{
	width: 407px;
	max-width: 407px;
}
.c_btn-style01._w04 a{
	width: 528px;
	max-width: 528px;
}
.c_btn-style01._wf a{
	width: 100%;
}
@media only screen and ( max-width: 1400px ) {
	.c_btn-style01._w01 a,
	.c_btn-style01._w02 a,
	.c_btn-style01._w03 a,
	.c_btn-style01._w05 a,
	.c_btn-style01._w06 a{
		width: 100%;
	}
}

/* color別
-----------------------------------------------------------------*/
/* _col01 */
.c_btn-style01._col01 a{
	background: #FFF;
}
.c_btn-style01._col01 a > span{
	background-image: url(/universal-cool-japan2016/src/img/global/ico_arw02.png);
}