@charset "UTF-8";

/*フォント*/
@font-face {
  font-family: FlopDesignFont;
  src: url(../font/FlopDesignFONT.eot) format('eot'),
       url(../font/FlopDesignFONT.otf) format('opentype'),
       url(../font/FlopDesignFONT.woff) format('woff');
}
@font-face {
  font-family: KozGoPro-Heavy;
  src: url(../font/KozGoPro-Heavy.otf);
}
@font-face {
  font-family: FOT-SeuratPro-M;
  src: url(../font/FOT-SeuratPro-M.otf);
}
@font-face {
  font-family: BebasNeue;
  src: url(../font/BebasNeue.otf);
}
@font-face {
  font-family: KozGoPr6N-Bold;
  src: url(../font/KozGoPr6N-Bold.otf);
}

.sp {
	display: none;
}

body {
	font-weight: bold;
    font-family: FlopDesignFont,"Helvetica Neue", Helvetica, Arial, sans-serif;
}

.container{
	width:1024px;
}

/* header */
header{
	background-image:url(../images/common/header_back.png);
	height:168px;
}
#index header{
	background-image:none;
}
header .container{
	position: relative;
}
header .logo{
	position: absolute;
	top:0;
	left:0;
	z-index:1000;
}
header h1{
	position:absolute;
	font-size:0;
	width:261px;
	height:13px;
	background-image:url(../images/common/header_h1_text.png);
	background-size:contain;
	background-repeat: no-repeat;
	left:126px;
	z-index:1000;
	margin:0;
	padding:0;
}
header .nav_back{
	position:absolute;
	background-color:rgba(35,24,21,0.83);
	width:100%;
	height:54px;
	top:0;
	left:0;
	z-index:900;
}
header .gloval_nav{
	position:absolute;
	z-index:1000;
	right:0;
	top:8px;
}
header .gloval_nav ul{
}
header .gloval_nav ul li{
	display:inline-block;
	border-right:1px solid #FFFFFF;
	text-align:center;
	width:96px;
	font-weight: bold;
	font-size:14px;
	font-family: KozGoPro-Heavy;
}
header .gloval_nav ul li span{
	display:block;
	font-size:10px;
	font-weight: normal;
	font-family: FOT-SeuratPro-M;
}
header .gloval_nav ul li a{
	color:#FFFFFF;
	display:block;
	text-decoration: none;
}
header .header_btn_otoiawase{
	width:217px;
	height:33px;
	background-image:url(../images/common/header_btn_otoiawase.png);
	background-size:contain;
	position:absolute;
	right:0;
	top:64px;
	font-size:0;
}
header .header_btn_tel{
	width:170px;
	height:19px;
	background-image:url(../images/common/header_btn_tel.png);
	background-size:contain;
	position:absolute;
	right:9px;
	top:109px;
	font-size:0;
}

#index header .header_btn_tel{
	width:170px;
	height:19px;
	background-image:url(../images/common/header_btn_tel_index.png);
	background-size:contain;
	position:absolute;
	right:9px;
	top:109px;
	font-size:0;
}
header .header_btn_otoiawase a,
header .header_btn_tel a{
	display:block;
	height:100%;
	width:100%;
}



/*ブロック*/
.area01{
	width:740px;
	background-color:#FFFFFF;
	margin:24px auto 48px;
	border:1px solid #231815;
	padding:16px 16px;
}
.area01:after{
	content:" ";
	display:block;
	clear:both;
}
.area01 .inblock-top{
	margin:-16px -16px 0;
	background-color:rgba(228,0,127,0.21);
	padding:42px 16px 16px;
}

.area01 h3{
	font-family: BebasNeue;
	font-size:31px;
	font-weight:bold;
}
.area01 h3 span{
	font-family: FlopDesignFont;
	font-size:13px;
	vertical-align: middle;
	text-indent: 1em;
	display:inline-block;
}
.area01 h3:before{
	content:" ";
	display:inline-block;
	height:54px;
	width:6px;
	background-color:#e4007f;
	vertical-align: middle;
	margin-right:13px;
}
.area01 p.p01{
	font-size:16px;
}
.area01 p.p02{
	font-size:13px;
	color:#e4007f
}
.area01 p.p1{
	font-size:14px;
	line-height:1.8em
}
.area01 p.p2{
	font-size:9px;
	color:#e4007f
}
.back01{
	background-image:url(../images/common/back01.png);
	background-repeat: repeat;
	background-position: center top;
}
img{
	max-width:100%;
}


.area02{
	width:640px;
	margin:24px auto 48px;
	font-family: FlopDesignFont;
}
.area02:after{
	content:" ";
	display:block;
	clear:both;
}
.area02 h3{
	background-color:#000000;
	color:#FFFFFF;
	text-align:center;
	font-size:16px;
	padding:6px;
	margin:2em 0 1em;
}
.area02 p.p1{
	font-size:18px;
}
.area02 p.p2{
	font-size:10.5px;
}
.area02 span.p3{
	font-size:9px;
	line-height:12px;
	display:inline-block;
}


.area03{
	background-color:#dcdddd;
	padding:16px;
	text-align:center;
	font-size:13px;
}
.area03 h4{
	border-radius: 30px;
	background-color:#898989;
	font-size:18px;
	width:auto;
	margin:1em auto;
	display:inline-block;
	padding:0.5em 1.5em;
}
.area03 p span{
	color:#FF0000;
	font-size:24px;
	font-family: KozGoPr6N-Bold;
}


.table01{
	width:100%;
	border-collapse:  collapse;
	font-size:15px;
	table-layout: fixed;
	border:1px solid #000000;
}
.table01 th{
	border:1px solid #000000;
	text-align:center;
	padding:3px;
	background-color:#9fa0a0;
}
.table01 td{
	border:1px solid #000000;
	text-align:center;
	padding:6px;
	position:relative;
}
.table01 .ao{
	width:10px;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	background-color:rgba(0,160,233,0.38);
}
.table01 .aka{
	width:10px;
	position:absolute;
	left:0;
	top:0;
	bottom:0;
	background-color:rgba(288,0,127,0.38);
}
.table-layout-none{
	table-layout:auto;
}

.table02{
	width:100%;
	border-collapse:  collapse;
	font-size:13px;
	table-layout: fixed;
	border:1px solid #000000;
	table-layout:auto;
}
.table02 th{
	border:1px solid #000000;
	text-align:center;
	padding:1.5em 1em;
	background-color:#9fa0a0;
	white-space: nowrap;
}
.table02 td{
	border:1px solid #000000;
	text-align:left;
	padding:1em;
}



/*ページタイトル*/
.title-area{
	text-align:center;
	background-image:url(../images/common/h2_back.png);
	background-position: center;
	background-repeat: repeat-x;
	width:668px;
	margin:0 auto;
}
.title-area h2{
	display:inline-block;
	font-family: FlopDesignFont;
	font-family: BebasNeue;
	font-size:30px;
	background-color: #FFFFFF;
	padding:1em;
	vertical-align: middle;
}
.title-area h2 span{
	font-family: FlopDesignFont;
	font-size:18px;
	vertical-align: middle;
	margin-left:1em;
}

/*index*/

.btn_youtube{
	position:fixed;
	height:44px;
	bottom:0;
	right:280px;
}
.btn_youtube img{
	height:44px;
}
.btn_instagram{
	position:fixed;
	height:44px;
	bottom:0;
	right:110px;
}
.btn_instagram img{
	height:44px;
}

.video-container{
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	z-index:-1000;
}
video {
	position: absolute;
}
@media (aspect-ratio: 16/9), (min-aspect-ratio: 16/9) {
	video {
		width: 100%;
		top: 50%;
		transform: translateY(-50%);
	}
}
@media (max-aspect-ratio: 16/9) {
	video {
		height: 100%;
		left: 50%;
		transform: translateX(-50%);
	}
}