@charset "utf-8";
/* CSS Document */
/* =====================
  r_style
===================== */
.mg_t-60px{margin-top: 60px;}
.mg_t-80px{margin-top: 80px;}
.mg_r-60px{margin-right: 60px;}
.mg_r-80px{margin-right: 80px;}
.mg_l-60px{margin-left: 60px;}
.mg_l-80px{margin-left: 80px;}
.mg_b-60px{margin-bottom: 60px;}
.mg_b-80px{margin-bottom: 80px;}

.pd_t-60px{padding-top: 60px;}
.pd_t-80px{padding-top: 80px;}
.pd_r-60px{padding-right: 60px;}
.pd_r-80px{padding-right: 80px;}
.pd_l-60px{padding-left: 60px;}
.pd_l-80px{padding-left: 80px;}
.pd_b-60px{padding-bottom: 60px;}
.pd_b-80px{padding-bottom: 80px;}

.font_13{font-size: 13px;letter-spacing: 3px}
.font_14{font-size: 14px;letter-spacing: 4px;}
.font_15{font-size: 15px;letter-spacing: 4.3px;}
.font_16{font-size: 16px;letter-spacing: 4.5px;}
.font_18{font-size: 18px;letter-spacing: 4.8px;}

.font_13_txt{font-size: 13px;line-height: 2.2;letter-spacing: 1.8px;}
.font_14_txt{font-size: 14px;line-height: 2.2;letter-spacing: 1.8px;}
.font_15_txt{font-size: 15px; line-height: 2.3;letter-spacing: 2px;}
.font_16_txt{font-size: 16px; line-height: 2.375;letter-spacing: 2.1px;}


/* ---------- 1280 ---------- */
@media screen and (max-width: 1280px){
.width_80per_1280{width: 80%; margin-right: auto; margin-left: auto;}
.width_90per_1280{width: 90%; margin-right: auto; margin-left: auto;}

}
/* ---------- スマホ ---------- */
@media screen and (max-width: 667px){
.font_14_sp{font-size: 14px;letter-spacing: 4px;}
.font_13_txt_sp{font-size: 13px;line-height: 2.2;letter-spacing: 1.8px;}
.font_14_txt_sp{font-size: 14px;line-height: 2.2;letter-spacing: 1.8px;}
.font_15_txt_sp{font-size: 15px; line-height: 2.05;letter-spacing: 1.8px;}
.font_16_txt_sp{font-size: 16px; line-height: 2.05;letter-spacing: 1.8px;}
}

/* =====================
  base & reset
===================== */
input, button, textarea, select {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	border-radius: 0;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	letter-spacing: 2px;
}

/* before  after
   ----------------------------------------------------------------- */
*, *:before, *:after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
#footLink div a::after,.conTitle h4 span::after,#topCon1::after,#topCon2::after,#topCon3::after{content: "";}	

/* #default
   ----------------------------------------------------------------- */
body{
	color: #333435;
	background: #f9f9f9;
	font-size: 16px;
	font-family: "Noto Sans JP", "Hiragino Sans", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "Helvetica Neue", Helvetica, sans-serif;
   line-height: 1.6;
  font-weight: 300;
  letter-spacing : 0.02em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
	 -webkit-overflow-scrolling: touch;
	overflow-scrolling:touch;
}
a{
	color: #797d80;
}
.linkStyle{
	color: #797d80;
}
.linkStyle:hover{
	color: #797d80;
}
img{vertical-align:top;}
em{	font-style: normal;}

/* 画像トリミング */
.vertiLong_img{
	position: relative;
	overflow: hidden;
}
.vertiLong_img img{
	position: absolute;
	top: 50%;
	left: 50%;
	-ms-transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

/* font
   ----------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Roboto&display=swap');
@import url('https://fonts.googleapis.com/css?family=Fjalla+One&display=swap');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');
.roboto{font-family: 'Roboto', sans-serif; font-weight: 600;}
.Fjalla{font-family: 'Fjalla One', sans-serif;}

/* color
   ----------------------------------------------------------------- */
.txt_color1{color: #AD9842;}
.txt_color2{color: #A89678;}
.txt_color3{color: #F6F6F6;}
.txt_color4{color: #AAABAC;}
.txt_color5{color: #88898A;}
.txt_color6{color: #333435;}
.txt_color7{color: #1D1F21;}
.txt_color8{color: #F2F1ED;}
.txt_color9{color: #131517;}
.txt_color10{color: #797d80;}

.bg_color1{background: #AD9842;}
.bg_color2{background: #A89678;}
.bg_color3{background: #F6F6F6;}
.bg_color4{background: #AAABAC;}
.bg_color5{background: #88898A;}
.bg_color6{background: #333435;}
.bg_color7{background: #1D1F21;}
.bg_color8{background: #F2F1ED;}
.bg_color9{background: #131517;}

/* =====================
  all page
===================== */


/* loader
   ----------------------------------------------------------------- */
#loading_logo{
	position: absolute;
	top: 49%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 50%;
	max-width: 300px;
	z-index: 1001;
}
#loading_logo{
	animation-name: loader;
	animation: loader 600ms cubic-bezier(0.77, 0, 0.175, 1) /*0.5s*/ forwards;
	animation-duration: 3s;
/*	animation-timing-function: ease;*/
/*	animation-iteration-count: infinite;*/
}
@keyframes loader {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

#loader{z-index: 1000;top: 0;right: 0;width: 100%}
#loader .loader{width: 0;top: 0;left: 0}
#loadcover{transition-delay: 5s; z-index: 9999;}

/* more
   ----------------------------------------------------------------- */
.more a{line-height: 100px;}
.more a::after{  background-color: #333435;}


/* hover
   ----------------------------------------------------------------- */
.hover1 a{position: relative;  z-index: 1; }
.hover1 a::after{
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;	
}
.hover1 a:hover::after{
	transform: scaleX(1);
  transform-origin: center left;
}
.hover2 a{position: relative;  z-index: 1; }
.hover2 a::before{
  content: '';
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  right: 0;
  transform-origin: center right;
  transform: scaleX(0);
  transition: transform 0.2s ease-in-out;	
}
.hover2 a:hover::before{
	transform: scaleX(1);
  transform-origin: center left;
}
.hover3 a{position: relative;}
.hover3 a::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: 0;
    right: 100%;
    bottom: -3px;
    height: 1px;
    transition: right 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
.hover3 a:hover::before {
    right: 0;
}

#btmEntr{bottom: 0; left: 0; right: 0; z-index: 999;}
#btmEntr div a{padding: 20px 0px;}

.sns-link{padding: 0 5%;
    margin-bottom: 30px;}
.sns-link a:hover{opacity: 0.6;}

/* =====================
  #asideNav
===================== */
#asideNav{
	position: fixed;
	text-align: center;
    width: 230px;
    height: 100%;
    z-index: 999;
    background: #131517;
    box-sizing: border-box;
    border-right: 1px solid #333435;
}
#asideNav h1{padding: 30px 0px;}
#asideNav h1 a img{width:180px;}
#asideNav a span:nth-last-child(2){color: #29aee2;letter-spacing: 0.1em;}
#asideNav a span:nth-last-child(1){color: #b5b5b5;letter-spacing: 4px;}
#asideNav ul li a{ padding: 10px 20px;color: #AD9842;}
#asideNav ul li a::after{background:#1D1F21; }
#asideNav ul li a span{right: 20px;
top: 18px;
height: 6px;
width: 5px;}
#asideNav nav p{margin: 0px 20px; padding-top: 10px;}
#asideNav nav p a{color: #A89678;}
#asideNav nav p a::before{background:#333435; }
#asideNav nav p:first-of-type{border-top: 1px solid #333435;margin-top: 20px;}
.asideEntr{bottom: 0; left: 0;    width: 230px;}
.asideEntr a{padding: 40px 0px 35px;}
.asideEntr a:first-child::after{background: #131517; }
.asideEntr a:last-child::after{background: #131517; }
/* =====================
  #mainContainer
===================== */
#mainContainer{
	margin: 0 auto auto 230px;
	background-image: url("../img/texture2.png");
	background-repeat: repeat-y;
}

@media screen and (max-width: 667px){
	#mainContainer{	margin: 0 auto auto 0px;}
}
	
/* =====================
  footer
===================== */
/* footGal
   ----------------------------------------------------------------- */
#footGal .pc a{
	display: block;
	background-image: url("../img/topGal.jpg");
	height: 300px;
	background-position: center center;
}
#footGal .pc a:hover{opacity: 0.8;}

/* footLink
   ----------------------------------------------------------------- */
footer{ padding: 100px 5% 100px;background: #262626;}
#footLink div a .en{letter-spacing: 0.3em;}
#footLink div a::before{background-image: url("../img/more.png");background-size: cover;width: 50px; height: 11px; top: 45%; right: 40px; position: absolute;z-index: 99;}
#footLink div:first-of-type a::after{background: #1D1F21;}
#footLink div:last-of-type a::after{background: #131517;}

.footerLogo img{width: 186px;}
.footerRi{border-top: 2px solid #3e3e3e;border-bottom: 2px solid #3e3e3e;}
.footerRi li a::before{background: #F2F1ED;}
.copy{ color: #7e7f7f;}
.copy a{ color: #7e7f7f;}

/* =====================
  pageTop
===================== */
#pageTop{	
	text-align: center;
	margin-bottom: 50px;
}
#pageTop a{display: inline-block;	width: 120px;	height: 88px;}
#pageTop a img{transition: transform 0.5s ease;}
#pageTop a:hover img{	transform: translateY(-5px);}


/* =====================
  sub page
===================== */
.pageTitle{ height: 260px; background: #242426; background-image: url("../img/texture3.png"); background-repeat: no-repeat; background-position: right top; padding-top: 70px;padding-left: 30px;}
.pageTitle h2{height: 117px;}
.pageTitle h2 img{height: 100%; width: auto;}



/* ---------- 1000 ---------- */
@media screen and (max-width: 1000px){
	#footGal .pc{display: none;}
	#footGal .sp{display: block;border-bottom: 1px solid #333435;}
	#footLink div a .en{font-size: 30px;}
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 768px){
	#mainContainer{	margin: 0 auto auto 0px;}
	.pageTitle{height: 180px;padding-top: 30px;}
	
}
	

@media screen and (max-width: 667px){
	body{padding-bottom: 60px;}
	.pageTitle{ height: 140px; }
	.pageTitle h2{height: 80px;}
	#footLink div:first-of-type a{background:#1D1F21;}
	#footLink div:last-of-type a{background:#131517;}
	footer{ padding: 30px 5% 30px;}
	.footerCms{border-bottom: 1px solid #3e3e3e;}
}
@media only screen and (max-device-width:768px ) and (orientation:landscape) {
	#global-nav {
	overflow: scroll;
	height: 80vh;
}
}
/*====================================
  	IE環境の設定
====================================*/
@media all and (-ms-high-contrast:none){
	.button a span{padding: 16px 0px 14px;}
}