@charset "utf-8";

a,
abbr,
acronym,
address,
applet,
b,
big,
blockquote,
body,
caption,
center,
cite,
code,
dd,
del,
dfn,
div,
dl,
dt,
em,
fieldset,
font,
form,
h1,
h2,
h3,
h4,
h5,
h6,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
object,
ol,
p,
pre,
q,
s,
samp,
small,
span,
strike,
strong,
sub,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
tr,
tt,
u,
ul,
var {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
}
 a:hover {
    text-decoration: underline;
    color: #0584c3;
}
a,
a:link {
  cursor: pointer;
  color: #333;
}
.under {
  text-decoration: underline;
}
body{
  color:#333;
  font-size: 13px;
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	background-image:url("/img/dark-denim-3.png");
	background-color:#000;
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
}

pre{
  font-family: 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size:14px;
  white-space: pre-line;
}
a {
    text-decoration: none;
}
a.defaultLink:visited {
    color: #06f;
    text-decoration: none;
}
.fa {
    cursor: pointer;
}
ul {
    list-style: none;
}
section{
	margin-bottom:10px;
}
.detail_button{
	margin-top:10px;
	text-align:center;
}
.detail_button a{
	padding:10px 40px;
	border:1px solid #EEE;
	color:#EEE;
	font-size:16px;
}

#logo{
	display:inline-block;
	position:absolute;
	top:20px;
	left:0;
}

#logo h1{
	display:inline-block;

}
#logo h1 a{
	color:#FFF;
}
#container{
}

header{
	background-image:url("/img/dark-denim-3.png");
//	background-color:#000;
	background-color:rgba(0,0,0,0.8);
	background-blend-mode:lighten;
//box-shadow: 0px 5px 12px -4px rgba(0,0,0,0.6);
	position: fixed;
 	width: 100%;
	top:0;
	z-index:99;
}
#header_inner{
	max-width:1024px;
	margin:0 auto;
	position:relative;
}

nav{

}

#header_inner ul{
	margin-left:250px;
	width:100%;
	max-width:800px;
}
#header_inner li{
	display:inline-block;
	text-align:center;
	position:relative;

}

.menu_list li a{
	box-sizing: border-box;
	font-size:14px;
	color:#C0C0C0;
	display:block;
	padding:10px 40px;
	width:100%;
	height:100%;
  line-height: 50px;
	border-bottom:3px solid rgba(40,40,40,0);
	font-weight:bold;
}
.menu_list li a:hover{
	text-decoration:none;
	border-bottom:3px solid #D4B45B;
}

.sp_menu{
	display:none;
	color:#CCC;
	position:absolute;
	right:8px;
	top:15px;
	width:50px;
	text-align:center;
	font-size:26px;
}
.sp_menu span{
	font-size:12px;
	line-height:6px;
	display:block;
}

main{
	margin-top:70px;
}
main video{
    width: 100%;
    height: 700px;
    object-fit: cover;
}

.movie {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.movie::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.1);
	background-image: radial-gradient(#111 20%, transparent 31%), radial-gradient(#111 20%, transparent 31%);
	background-size: 3px 3px;
	background-position: 0 0, 2px 2px;
}

.movie_bottom_banner{
	padding:10px 0;
	max-width:1140px;
	margin:0 auto;
	text-align:center;
}

.item_section{

}
.item_section_inner{
	padding:20px 0;
	max-width:1140px;
	margin:0 auto;
}
.item_title{
	border:1px solid #FFF;
	border-radius: 50px;
	padding:10px 20px;
	color:#FFF;
	font-size: 18px;
  text-align: center;
	margin-bottom:10px;
}
.box4{
	text-align:center;

}
.box4 h3{
background-image: linear-gradient(0deg, #b8751e 0%, #ffce08 37%, #fefeb2 47%, #fafad6 50%, #fefeb2 53%, #e1ce08 63%, #b8751e 100%);
  -webkit-background-clip: text;
  color: transparent;
	font-size:20px;
	margin:5px 0;
}

.box4 div{
	display:inline-block;
	width:48%;
	padding:10px;
	box-sizing: border-box;
}
.box4 img{
	background:#999;
	width:100%;
	height:300px;
	object-fit: cover;
}

#slider{
	text-align:center;
	max-height:700px;

}
#slider img{
	object-fit:cover;
}
#slider video{
	background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

footer{
	border-top:1px solid #333;
	background-image:url("/img/dark-denim-3.png");
	background-color:#000;
	overflow:hidden;
	position:relative;
}
#footer_bg{
	position:absolute;
	bottom:-16px;
	right:0;
	color: #fff;
	opacity: .06;
	font-size:120px;
}
#footer_bg p{
	line-height:110px;
	text-align:right;
}

#footer_inner{
	padding:40px 10px;
	max-width:1024px;
	margin:0 auto;
	display:flex;
	column-gap: 35px;
}
.footer_box{
	z-index:9
}
.footer_box:nth-child(1){
	flex-grow:1
}
.footer_box:nth-child(2){
	flex-grow:5
}
.footer_box:nth-child(3){
	flex-grow:3;

}

#footer_inner ul li a{
	color:#C0C0C0;
	line-height:25px;
	font-size:14px;
}
#footer_inner ul li a:hover{
	color:#FFF;
}

.footer_icon li{
	display:inline-block;
	margin:0 10px;
}
.footer_icon a{
	font-size:20px!important;
}
.footer_icon a:hover{
	text-decoration:none;
}
.inquiry_button{
	padding:10px 60px;
	border:1px solid #FFF;
	color:#FFF;
	position:relative;
	
}
.inquiry_button i{
	font-size:20px;
}

.company_info p{
	color:#C0C0C0
}
#copyright{
	text-align:center;
	background-image:url("/img/dark-denim-3.png");
	background-color:#000;
	color:#C0C0C0
}

/* Loading背景画面設定　*/
#splash {
/*fixedで全面に固定*/
  position: fixed;
  width: 100%;
  height: 100%;
	background-image:url("/img/dark-denim-3.png");
	background-color:#000;
	top:0;
	left:0;
  text-align:center;
  color:#fff;
	z-index:999;
}

/* Loading画像中央配置　*/
#splash_logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Loading アイコンの大きさ設定　*/
#splash_logo img {
  width:130px;
}

/* fadeUpをするアイコンの動き */
.fadeUp{
	animation-name: fadeUpAnime;
	animation-duration:0.5s;
	animation-fill-mode:forwards;
	opacity: 0;
}

.insta_images{
	max-width:1155px;
  margin:0 auto;
	text-align:center;
	padding:30px 0;
}

section{

}
.images_box {
  position: relative;
	padding:10px;
  max-width:100%;

}
 
.item {
  display: block; /* 必須 */
  position: absolute; /* 必須 */
  width:280px;
  height:280px;
  margin: 4px; /* アイテム間のマージン(この2倍になる) */
  z-index: 1;
}

   .item.w2{
			width:568px;
    }
    .item.h2{
    	height:568px;
    }

.item img{
	width:100%;
	height:100%;
	object-fit:cover;
}

.item-content {
  position: relative;
  width: 100%;
  height: 100%;
  display:block;
}
.custom-content{
  display:table-cell;
  vertical-align:middle;
  text-align: center;
  background: #fff;
  color: #666;
  border:2px solid;
  border-radius:3px;
}

.question_scroll{
	text-align:center;
}

.question_scroll_inner{
	max-width:1280px;
	width:100%;
	margin:0 auto;
}

.question_box{
	margin-bottom:50px;
}

.question_box_inner{
	max-width:1280px;
	width:100%;
	margin:0 auto;
}

.question_box dl{
	background:#FFF;
	border-radius: 5px;
	font-size:18px;
  box-shadow: 0 0 5px 0 rgb(0 0 0 / 12%);
	margin-bottom:20px;
}
.question_box dl p{
	display:inline;

}
.question_box dt, .question_box dd{
	padding:26px 20px;
	padding-left:65px;
	position:relative;
}
.question_box dt, .question_box dd pre{
	white-space: pre-line;
  line-height: 1.4em;
}
.question_box dt{
	font-weight:bold;
	border-bottom:1px dotted #CCC;
}
.question_box dt:before{
	content: "Q";
  color: #e50000;
  font-weight: 500;
	border: 1px solid #e50000;
	padding:4px 11px;
	margin-right:5px;
	position:absolute;
	top:20px;
	left:15px
}
.question_box dd:before{
  content: "A";
  color: #337ab7;
	border: 1px solid #337ab7;
	padding:4px 11px;
	margin-right:5px;
	position:absolute;
	top:20px;
	left:15px
}


.scroll_button{
	cursor:pointer;
	position: relative;
	text-align: center;
	background: #333;
	margin-bottom: 20px;
	color:#FFF;
	line-height:4em;
	width:40%;
	display:inline-block;
	user-select: none;
}
.scroll_button:hover{
	background: #555;
}
.scroll_button:hover:before, .scroll_button:active:before{
	border-top-color:#555;
	outline: none;
}

.scroll_button:before{
	position: absolute;
	top: 100%;
	left: 50%;
	border: solid transparent;
	content: " ";
	border-top-color: #333;
	border-width: 20px;
	margin-left: -20px;
}

.question_title{
  font-size: 18px;
  margin-bottom: 10px;
}

#main_inner{
	max-width:1140px;
	width:100%;
	margin:0 auto;
	padding:20px 0;

	
}

.page_title{
	font-size:22px;
	margin-bottom:20px;

}
.page_title h2{
	font-weight:bold;
}
.question_title:before{

	border: solid transparent;
	content: "▼";
}

.contact_outer_box{
	text-align:center;
	padding:20px;
	background:#FFF;
	margin-bottom:10px;
}

.contact_box{
	margin:0 10px;
	width:40%;
	text-align:left;
	padding:20px;
	display:inline-block;
	background:#EEE
}

.contact_title{
	font-size:16px;
	font-weight:bold;
}
.number_str{
	color:#2961aa;
	font-weight:bold;
	font-size:20px;
}

@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

@media ( max-width : 877px ){
	header{
		height:70px;
	}
  .item{
    width:calc(33.33% - 14px);
    height:calc(33.33vw - 14px);
		}
    .item.w2{
      width:calc(33.33% - 14px);
    }
   .item.h2{
      height:calc(33.33vw - 14px);
    }
 	.menu_list{
		display:none
	}
	.sp_menu{
		display:block
	}
	.sp_menu span{
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}
	.menu_list{
		border-left:2px solid #999;
		padding-top:50px;
	  width: 70%!important;
    position: fixed;
    top: 0;
    right: 0;
    height: 100%!important;
    z-index: 99999;
		background-image:url("/img/dark-denim-3.png");
		background-color:rgba(0,0,0,1);
	}
	#header_inner li{
		display:block;
	}
	.box4 div{
		width:100%;
	}
	.contact_box{
		margin:0;
		width:100%;
		display:block;
		margin-bottom:10px;
	}
}
@media ( max-width : 640px ){
	main{
		margin-top:60px;
	}
	header{
		height:60px;
	}
	#splash_logo img{
		width:100px;
	}
	#logo{
		left:5px
	}
	#logo img{
		width:160px
	}
  .item{
    width:calc(50% - 10px);
    height:calc(50vw - 12px);
		}
   .item.w2{
      width:calc(50% - 12px);
    }
    .item.h2{
      height:calc(50vw - 12px);
    }
	main video{
    width: 100%;
    height: 300px;
    object-fit: cover;
	}
	.movie::after {
		content: '';
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,0.1);
		background-image: radial-gradient(#111 30%, transparent 31%), radial-gradient(#111 30%, transparent 31%);
		background-size: 2px 2px;
		background-position: 0 0, 2px 2px;
	}
	.sp_menu{
		display:block;
	}
	.item_title{
		margin:0 10px;
		padding:5px 10px;
	}
	.item_title, .box4 h3{
		font-size:16px;
	}
	.question_box dl{
		font-size:16px;
	}
	#main_inner{
		padding: 20px 7px;
    box-sizing: border-box;
	}
	.question_box dt, .question_box dd{
		padding:18px 15px;
		padding-left:60px;
	}
	.question_box dt:before, .question_box dd:before{
		top:15px;
	}
	.scroll_button{
		line-height:3em
	}
	.scroll_button:before{
		border-width: 10px;
		margin-left: -10px;
	}
	.question_title{
		font-size:16px;
	}
	#footer_bg{
		font-size:80px;
		top:0;
		bottom:auto;
	}
	#footer_inner{
		flex-direction: column-reverse;
		padding:20px 10px;
	}

	.footer_box{
		margin-bottom:25px;
	}
	#footer_inner ul li a{
		line-height:35px;
	}
	.swiper-button-prev, .swiper-button-next{
		background-size: 50%!important;
	}
	.company_info a{
		color:#C0C0C0
	}
}
@media ( max-width : 340px ){

	#splash_logo img{
		width:70px;
	}
}