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


/* ---------------------------------------------------------------------------------------------

   Fonts

--------------------------------------------------------------------------------------------- */


/*Noto Sans JP 和ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

/*font-family: 'Noto Sans JP', sans-serif;*/




/*Noto Serif Japanese 和明朝
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Brygada+1918:ital@1&display=swap');

/*font-family: 'Brygada 1918', serif;*/




/*Jost 英ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Jost&display=swap');

/*font-family: 'Jost', sans-serif;*/




/*Anton 英ゴシックインパクト
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Anton&family=Brygada+1918:ital@1&display=swap');

/*font-family: 'Anton', sans-serif;*/




/*Instrument 英細長明
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif&display=swap');

/*font-family: 'Instrument Serif', serif;*/




/*Antonio 英細長ゴシック
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Antonio&display=swap');

/*font-family: 'Antonio', sans-serif;*/




/*Sorts Mill Goudy 英明
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap');

/*font-family: 'Sorts Mill Goudy', serif;*/




/*Playfair Display 英明
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&display=swap');

/*font-family: 'Playfair Display', serif;*/




/*Ibarra Real Nova 英明
-----------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Ibarra+Real+Nova&display=swap');

/*font-family: 'Ibarra Real Nova', serif;*/






/* ---------------------------------------------------------------------------------------------

   Wrap,Contents-wrap,Contents

--------------------------------------------------------------------------------------------- */
.wrap{
	width: 100%;
	overflow: hidden !important;
	background: #000;
}

.contents-wrap{
	width: 92% !important;
	margin: 0 auto;
}

.contents1200{
	width: 1200px;
	margin: 0 auto;
}

.contents1000{
	width: 1000px;
	margin: 0 auto;
}

.contents1400{
	width: 1400px;
	margin: 0 auto;
}

.contents800{
	width: 800px;
	margin: 0 auto;
}

.contents700{
	width: 700px;
	margin: 0 auto;
}

.contents100p{
	width: 100%;
	margin: 0 auto;
}

@media screen and (max-width:1400px) {

.contents1400{
	width: 100% !important;
}

}

@media screen and (max-width:1200px) {

.contents1200{
	width: 100% !important;
}

}

@media screen and (max-width:1000px) {

.contents1000{
	width: 100% !important;
}

}

@media screen and (max-width:700px) {

.contents700{
	width: 100% !important;
}

}

@media screen and (max-width:900px) {

.contents-wrap{
	width: 94% !important;
}

}





/* ---------------------------------------------------------------------------------------------

   Parallax_content,Front_content

--------------------------------------------------------------------------------------------- */
.parallax_content{
  min-height: 750px;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  position: relative;
}

.front_content{
  padding: 50px 0;
  /*border-top: 1px solid #bdb76b;*/
}



.img_bg_01{
	background-image: url(../images/img_bg_01.png);
}

.img_bg_02{/*GALLERY*/
	background-image: url(../images/img_bg_02.png);
}

.img_bg_03{/*SYSTEM*/
	background-image: url(../images/img_bg_03.png);
}

.img_bg_04{
	background-image: url(../images/img_bg_04.png);
}

@media screen and (max-width: 900px){
	
  .parallax_content{
    height: 100%;
    min-height: 500px;
    background-image: none;
 	background-attachment: scroll;
	/*-webkit-overflow-scrolling: touch;*/
  }
  .parallax::before{
    content: "";
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    -webkit-transform: translate3d(0, 0, -1px);
    transform: translate3d(0, 0, -1px);
    width: 100%;
    min-height: 100%;
    -webkit-background-size: cover;
    background-size: cover;
    z-index: -1;
	-webkit-backface-visibility: hidden;/*202306追記*/
	backface-visibility: hidden;/*202306追記*/
	overflow: hidden;/*202306追記*/	
	/*scroll-behavior: smooth;*/
  }
  .parallax_content.img_bg_01::before{
  background-image: url(../images/img_bg_01.png);
  }
  .parallax_content.img_bg_02::before{
    background-image: url(../images/img_bg_02.png);
  }
  .parallax_content.img_bg_03::before{
    background-image: url(../images/img_bg_03.png);
  }
  .parallax_content.img_bg_04::before{
    background-image: url(../images/img_bg_04.png);
  }

}

@media screen and (max-width: 700px){

.parallax_content.img_bg_03{
	background-position: right top;
}
  
}


/*sp head*/
.head-sp {
	display: none;
}
@media screen and (max-width:900px) {
.parallax_content{ display: none;}
.head-sp {
	display: block;
    height: 30vh;
	position: relative;
}
.head-sp__attachment {
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    height: 100%;
    width: 100%;
}
.head-sp__attachment__clip {
    position: relative;
    overflow: hidden;
    clip-path: inset(0 0 0 0);
    height: 100%;
}
.head-sp__attachment img {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    height: auto;
    left: 0;
    top: 0;
    pointer-events: none;
}
.head-sp__text-area{
	position: absolute;
	top: 40%;
	width: 100%;
	z-index: 1;
}
.head-sp__title{
	text-align: center;
	color: #fff;
	font-size: clamp(48px, 3vw, 60px);
	font-family: 'Sorts Mill Goudy', serif;
	/*letter-spacing: 0.05em;*/
	text-shadow: 0 0 15px #f0f;
	font-weight: normal;
	line-height: 1.25;
	margin: 0 auto;
	width: auto;
}
}/* SYSTEM,GALLERY,RECRUIT,ACCESS 共通
-----------------------------------------------------------*/
.text-area{
	position: absolute;
	top: 40%;
	width: 100%;
}
.parallax_title{
	text-align: center;
	color: #fff;
	font-size: clamp(48px, 3vw, 60px);
	font-family: 'Sorts Mill Goudy', serif;
	/*letter-spacing: 0.05em;*/
	text-shadow: 0 0 15px #f0f;
	font-weight: normal;
	line-height: 1.25;
	margin: 0 auto;
	width: auto;
}

/* SYSTEM
-------------------------------------*/
.fa-glass-cheers{
	color: #fff;
}

/* GALLERY
-------------------------------------*/
.fa-venus{
	color: #fff;
}

/* RECRUIT
-------------------------------------*/
.fa-gem{
	color: #fff;
}

/* ACCESS
-------------------------------------*/
.fa-map-marked-alt{
	color: #fff;
}

@media screen and (max-width: 700px){

.parallax_title{
	text-shadow: 0 0 10px #f0f;
}

}






/* ---------------------------------------------------------------------------------------------

   Pタグ他

--------------------------------------------------------------------------------------------- */
.xxxl-text{
	font-size: clamp(22px, 3vw, 30px);
}

.xxl-text{
	font-size: clamp(18px, 3vw, 24px);
}

.xl-text{
	font-size: clamp(16px, 3vw, 20px);
}

.l-text{
	font-size: clamp(14px, 3vw, 18px);
	/*line-height: 2;*/
}

.m-text{
	font-size: clamp(12px, 3vw, 16px);
	line-height: 2;
}

.s-text{
	font-size: clamp(10px, 3vw, 14px);
	line-height: 2;
}

.white-text{
	color: #fff;
}

.red-text{
	color: #F00;
}

.pink-text{
	color: #F06;
}

table th{
	font-size: clamp(14px, 3vw, 16px);
}

table td{
	font-size: clamp(14px, 3vw, 16px);
}






/* ---------------------------------------------------------------------------------------------

   Br

--------------------------------------------------------------------------------------------- */
.br-1400{
	display: none;
}

@media screen and (max-width:1400px) {
	
.br-1400{
	display: block;
}

}

.br-1000{
	display: none;
}

@media screen and (max-width:1000px) {
	
.br-1000{
	display: block;
}

}

.br-700{
	display: none;
}

@media screen and (max-width:700px) {
	
.br-700{
	display: block;
}

}

.br-500{
	display: none;
}

@media screen and (max-width:500px) {
	
.br-500{
	display: block;
}

}

.br-400{
	display: none;
}

@media screen and (max-width:400px) {
	
.br-400{
	display: block;
}

}

.br-350{
	display: none;
}

@media screen and (max-width:350px) {
	
.br-350{
	display: block;
}

}





/* ---------------------------------------------------------------------------------------------

   網点背景、色背景

--------------------------------------------------------------------------------------------- */
.dotted-back07{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back07.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.dotted-back08{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back08.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.dotted-back05{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back05.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.dotted-back09{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back09.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.dotted-back10{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back09.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.dotted-back11{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back11.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.dotted-back12{/*網点リピート背景*/
	width: 100%;
	height: 100%;
	background: url(../images/dotted-back12.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}


.random-grey-back{/*未使用*/
	width: 100%;
	height: 100%;
	background: url(../images/random-grey-back.png) repeat 0 0;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.back-white{
	width: 100%;
	height: 100%;
	background: #eee;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.back-yellow{
	width: 100%;
	height: 100%;
	background: #debb69;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}

.back-gold{
	width: 100%;
	height: 100%;
	/*background: #c29f5d;*/
	background: #aea58b;
	background: #c8ba8c;
  	position:relative;
	z-index: 1;/*----------Z-index-----------*/
}





/* ---------------------------------------------------------------------------------------------

   Fadeアニメーション設定

--------------------------------------------------------------------------------------------- */
 .fade{
  opacity: 0;
   transform: translate3d(0, 0, 0);
  transition: all 3s ease;/*fadeスピード*/
  &.full {
   transition: all 0.1 ease;
  }
}

 .top_fade{
  opacity: 0;
   transform: translate3d(0, -50px, 0);
  transition: all 1s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .left_fade{
  opacity: 0;
   transform: translate3d(-100%, 0, 0);
  transition: all 1s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

 .bottom_fade{
  opacity: 0;
   transform: translate3d(0, 100px, 0);
  transition: all 1s ease;/*fadeスピード*/
  &.full {
   transition: all 0.8 ease;
  }
}

.fade-content .anm_mod.active {
 opacity: 1;
 transform: translate3d(0, 0, 0);
}

.graph-area .m-text{
	padding-left: 1em;
	line-height: 1.5;
}