@charset "utf-8";
/* CSS Document */

@font-face {
font-family: Acme;
src: url('../font/Acme-Regular.ttf') format("opentype");
}

@font-face {
font-family: dist;
src: url('../font/DistProTh.otf') format("opentype");
}

/* ==========================================================================
Reset & Base Setting
========================================================================== */
/* default style reset
-------------------------------------*/
html{background:#fff;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
table{border-collapse:separate;border-spacing:0;}
fieldset,img{border:0;}
img{vertical-align:top;}
address,caption,em,strong,th{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th,td{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
sup{vertical-align:text-top;}
sub{vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
input,textarea,select{*font-size:100%;}
a{text-decoration:none;color:#f85a1d;}
a:hover{text-decoration:underline;cursor:pointer!important;}
a:active{text-decoration:none;}
header, footer, nav, section, article, figure, aside {display:block;}
*{box-sizing:border-box;}
/* body setting
-------------------------------------*/
html{
	width:100%;
}

body{
	font-size:75%;
	text-align:left;
	line-height:1.5;
	color:#575656;
	width:100%;
}

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,400italic,600,600italic,700,700italic);
body{
font-family:-apple-system, BlinkMacSystemFont, "Helvetica Neue", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

html:not(:target) body{
	font-size:12px;
}

ul li img{
	vertical-align:bottom;
	line-height:0;
}

img{
	width:100%;
}

.imgover:hover{
	opacity:0.6;
}

.tgt {opacity: 0;}
.tgt span{opacity: 0;}

/* clearfix
-------------------------------------*/
.clear:before,
.clear:after{
	display:table;
	content:"";
}

.clear:after{
	clear:both;
}

.clear{
	zoom:1;
}

/* 汎用パーツ
-------------------------------------*/
.contentsInner{
	width:960px;
	margin:0 auto;
}

.column2Wrap .columnBlock01,
.column3Wrap .columnBlock01{
	float:left;
}

h2{
	font-family:"Acme";
	font-size: 32px;
	margin-bottom:100px;
	text-align:center;
	padding:50px 0 25px;
	color:#333;
	/* text-shadow:2px 2px 0px #00AA97; */
}

.imageRightBlock .img{
	width:50%;
	float:right;
}

.imageRightBlock .read{
	width:50%;
	float:left;
}

.bgBlock01{
	height:60px;
	background:url(../images/film_bg.png) left top repeat-x;
	background-size: auto 60px;
	}

.SPdisplayBlock{display:none!Important;}
.SPdisplayBlock_s{display:none;}

#pageTopBtn{
	display:block;
	width:65px;
	height:65px;
	background:url(../images/arrow.png) center center no-repeat rgba(256,256,256,.70);
	padding:20px;
	background-size:30px 30px;
	border:1px solid #333;
	border-radius:5px;
	position:fixed;
	right:30px;
	bottom:30px;
	z-index:9999;
}

#pageTopBtn:hover{
	background:url(../images/arrow_on.png) center center no-repeat #2ea77e;
	background-size:30px 30px;
	color:#FFF;
	border-color:#2ea77e;
}

#menubtn{
	position:fixed;
	top:20px;
	right:20px;
	z-index:9999;
}

#menubtn button{
	-webkit-appearance:none;
	border-style:none;
	padding:20px;
	cursor:pointer;
	border:1px solid #333;
	border-radius:5px;
	background:rgba(256,256,256,.70);
}

#menubtn button:hover{
	background:#2ea77e;
	color:#FFF;
	border:1px solid #2ea77e;
}

.sb-menu{
	padding-top:75px;
}

.sb-menu li a{
	color:#FFF;
	padding:15px;
	font-size:130%;
	display:block;
}

.sb-menu li.last-child{
	border-top:1px dotted #fff;
}

.sb-slidebar.sb-active {
	z-index: 99;
}


/* header
-------------------------------------*/
#headerArea{
	width:100%;
	min-width:960px;
	position:fixed;
	top:0;
	padding:20px 0 20px;
	box-shadow:3px 3px 5px rgba(0,0,0,0.30);
	z-index:9999;
	background:rgba(256,256,256,.90);
	font-family:"Acme";
}

#headerArea .contentsInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

#headerArea h1#logo{
	width:170px;
}

#headerArea h1#logo img {
	position: relative;
	top: -5px;
}

#headerArea ul{
	display: flex;
}

#headerArea ul li {
	display: flex;
	align-items: center;
	margin: 0 10px;
}

#headerArea ul li a{
	display:block;
	padding:0;
	letter-spacing:0.2em;
	text-align:center;
	color:#2E2E2E;
}

#headerArea ul li a span{
	width:50px;
	margin:0 auto;
	display:block;
	display: none;
	padding:5px 0;
	border-bottom:3px solid #FFF;
}

#headerArea ul li.last-child a span{
	border-bottom:3px solid rgba(0,0,0,0);
}

#headerArea ul li a:hover{
	text-decoration:none;
	color:#2EA77E;
}

#headerArea ul li a:hover span{
	border-bottom:3px solid #FFD817;
}

#headerArea ul li.last-child a {
	padding: 3px 10px;
	border:1px solid #333;
	border-radius: 2px;
}

#headerArea ul li.last-child a:hover{
	background:#333;
	color:#FFF!important;
}

#headerArea ul li.last-child:hover span{
	border-bottom:none;
}

#headerArea .inner {
	display: flex;
}

.sns {
	display: flex;
	align-items: center;
	margin-left: 10px;
}

.sns-youtube {
	margin-right: 10px;
}

.sns-youtube:hover {
	opacity: 0.85;
}

.sns-facebook:hover {
	opacity: 0.85;
}

.sns-youtube img {
	width: 28px;
	height: auto;
}

.sns-facebook img {
	width: 23px;
	height: auto;
}

/* MAIN AREA
------------------------------------*/
#mainArea{
position:relative;
}

#mainAreaInner{
	height:600px;
	padding-top:250px;
	background:url(../images/main_bg_img.jpg) center top no-repeat;
	background-size:cover;
}

#mainArea p{
	color:#FFF;
	text-align:center;
	padding: 50px 0;
	font-size: 24px;
	text-shadow:3px 3px 5px rgba(0,0,0,.80);
	letter-spacing:0.1em;
}

#mainArea p span{
	display:block;
	font-size:70%;
	letter-spacing:0.08em;
	padding-top:20px;
}

/* ABOUT
-------------------------------------*/
#about{
	padding:50px 0;
}

#about h2{
	margin-bottom:0;
}

#about p{
	margin: 10px 0;
	font-size: 14px;
	line-height:1.75;
	letter-spacing: 0.02em;
}

#about h5{
	margin-top: 20px;
}

#about .img{
	width:150px;
	margin:0 auto;
}

#about .read{
	max-width:600px;
	margin:0 auto;
	padding:20px;
	line-height: 1.3;
}

#about .read .en{
	display:block;
	font-size:120%;
	text-align:center;
	padding:10px 0 0;
	font-weight:bold;
	font-family:"Acme";
	margin-bottom:3px;
	line-height: 1;
}

#about .read .ja{
	display:block;
	font-size:90%;
	text-align:center;
	padding:10px 0 0;
	font-weight:bold;
	line-height: 1;
	margin-bottom:20px;
}

#about .movie {
	max-width: 560px;
	margin: 0 auto;
}

.heading-table-lv1 {
	padding-top: 60px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
}

.heading-table-lv2 {
	font-size: 13px;
	font-weight: bold;
	background: #f1f1f1;
	padding: 10px 0;
	margin-top: 40px;
	text-align: center;
}

.table-01 {
	max-width: 600px;
	padding: 20px;
	margin: 0 auto;
}

.table-01 table {
	width: 100%;
}

.table-01 thead th,
.table-01 thead td {
	font-weight: bold;
}

.table-01 th,
.table-01 td {
	padding: 20px 6px;
	font-size: 14px;
	border-bottom: 1px solid #f1f1f1;
}

.table-01 .caption {
	padding-top: 10px;
	text-align: right;
}

.table-01 .more {
	margin-top: 15px;
	padding: 20px;
	font-size: 13px!important;
	line-height: 1.75!important;
	border: 1px solid #f1f1f1;
}

/* SERVICE
-------------------------------------*/
#service{
	padding: 50px 0 100px;
}

#service h2{
	margin-bottom:0;
}

#service .read {
	max-width: 660px;
	font-size: 100%;
	text-align:left;
	line-height: 1.8;
	font-size: 13px;
	margin: 0 auto;
}

#service .read p span {
		font-weight: bold;
	}


#service .read p+p {
	margin-top: 30px;
}

#service .caution{
	font-size: 12px%;
	text-align:center;
}

.jaService {
	font-size: 120%;
	max-width: 660px;
	margin: 40px auto 30px;
	padding: 1px 60px 80px;
	background-color: #efefef;
}

.jaService h3 {
	margin-top: 50px;
	font-weight: bold;
	font-size: 16px;
}

.jaService h4 {
	margin-top: 30px;
	margin-bottom: 20px;
	font-weight: bold;
	font-size: 14px;
}

.jaService p {
	line-height: 1.75;
	font-size: 13px;
}

.jaService p + p {
	margin-top: 10px;
}

.jaService p em {
	font-weight: bold;
}

ul#serviceBlock{
	position:relative;
	width:600px;
	margin:0 auto;
}

ul#serviceBlock li{
	display: flex;
	align-items: center;
	justify-content: center;
	background:#333;
	border-radius:1000px;
	color:#FFF;
	padding: 0 40px;
	font-size: 14px;
	opacity:0.5;
	margin:0 auto -50px;
	box-shadow:3px 3px 10px rgba(0,0,0,.50);
	text-align:center;
}

ul#serviceBlock li:hover{
	opacity:1;
	background:#00aa97;
}

ul#serviceBlock li#service01{
	width:250px;
	height:250px;
	position:relative;
	right:-106px;
}

ul#serviceBlock li#service02{
	width:200px;
	height:200px;
	position:relative;
	left:-150px;
}

ul#serviceBlock li#service03{
	width:300px;
	height:300px;
	position:relative;
	right:-170px;
	top:-40px;
}

ul#serviceBlock li#service04{
	width:200px;
	height:200px;
	position:relative;
	left:-50px;
	top:-50px;
}

ul#serviceBlock li#service05{
	width:200px;
	height:200px;
	text-align:center;
	position:relative;
	position:relative;
	right:-178px;
	top:-42px;
}

ul#serviceBlock li#service06{
	width:200px;
	height:200px;
	text-align:center;
	position:relative;
	left:-176px;
	top:-110px;
}

ul#serviceBlock li#service07{
	width:200px;
	height:200px;
	position:relative;
	right:-50px;
	top:-100px;
}

ul#serviceBlock li#service08{
	width:200px;
	height:200px;
	text-align:center;
	position:relative;
	left:-105px;
	top:-30px;
	margin:0 auto 40px;
}

ul#serviceBlock li#service09 {
	width:200px;
	height:200px;
	text-align:center;
	position:relative;
	right:-125px;
	top:-180px;
	margin:0 auto 40px;
}


/* COMPANY
-------------------------------------*/
#company{
	padding:30px 0 80px;
	background: #f1f1f1;
}

#company h2 {
	margin-bottom: 0;
}

#company table{
	width: 100%;
	max-width: 600px;
	margin: 0 auto;
	font-size: 13px;
}

#company table th{
	padding:10px 10px;
	vertical-align:top;
	width:150px;
	border-bottom:1px solid #a5a5a5;
}

#company table td{
	padding:10px 10px;
	border-bottom:1px solid #a5a5a5;
}

#company .img{
	width:150px;
	margin:0 auto 30px;
}

#company .name {
	text-align: center;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: bold
}

#company .read{
	max-width:600px;
	margin:0 auto 45px;
	line-height: 1.85;
}


/* CONTACT
-------------------------------------*/
#contact{
	padding:60px 0;
	background:#333;
	color:#FFF;
}

#contact h2{
	color:#FFF;
	margin-bottom:0;;
}

#contact p{
	font-size: 13px;
	margin-bottom:30px;
	text-align: center;
}

#contact .read{
	line-height:2.00;
}

#contact table{
	font-size:14px;
	width:800px;
	margin: 0 auto;
	font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	border-top:1px solid #a5a5a5;
}

#contact table th{
	padding:25px 10px;
	vertical-align:top;
	width:200px;
	border-bottom:1px solid #a5a5a5;
}

#contact table td{
	padding:20px 20px;
	border-bottom:1px solid #a5a5a5;
}

#contact table input{
	border-style:none;
	-webkit-appearance:none;
	border:1px solid #D8D8D8;
	padding:5px 10px;
}

#contact table input.txt01{
	width:300px;
}

#contact table input.txt02{
	width:200px;
}

#contact table textarea{
	resize:none;
	border-style:none;
	-webkit-appearance:none;
	border:1px solid #D8D8D8;
	width:100%;
	height:200px;
	padding:10px;
}

p.btnBlock{
	width:450px;
	margin:0 auto;
	padding-top:30px;
}

.submitBtn,
.resetBtn{
	width:200px;
	float:left;
	border-style:none;
	-webkit-appearance:none;
	padding:10px 0;
	text-align:center;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	border-radius:5px;
	border:1px solid #FFF;
	background:#333;
	color:#FFF;
}

.resetBtn{
	float:right;
}

.submitBtn:hover,
.resetBtn:hover{
	color:#333;
	background:#FFF;
	cursor:pointer;
}


/* FOOTER
-------------------------------------*/
#footerArea{
	padding:30px 0;
}

#footerArea #copyright{
	text-align:center;
}



/* THANKS
-------------------------------------*/
#thanks{
	padding:80px 0;
	text-align:center;
}

#thanks h1{
	font-size:200%;
	font-weight:bold;
	background:#333;
	color:#fff;
	padding:40px 0;
	margin-bottom:30px;
}

#thanks p{
	font-size:133%;
	line-height:3.00;
}

#thanks p.topBtn{
	width:300px;
	margin:50px auto 0;
}

#thanks p.topBtn a{
	display:block;
	padding:20px 0;
	text-align:center;
	color:#333;
	font-weight:bold;
	border:1px solid #333;
	border-radius:10px;
}

#thanks p.topBtn a:hover{
	background:#333;
	color:#fff;
	text-decoration:none;
}