@charset "utf-8";

/* ----------------------------------------
- RESET
---------------------------------------- */
*,*::before,*::after{box-sizing:border-box}ul[class],ol[class]{padding:0}body,h1,h2,h3,h4,p,ul[class],ol[class],figure,blockquote,dl,dd{margin:0}body{min-height:100vh;scroll-behavior:smooth;text-rendering:optimizeSpeed;line-height:1.5}ul[class],ol[class]{list-style:none}a:not([class]){text-decoration-skip-ink:auto}img{max-width:100%;display:block}article>*+*{margin-top:1em}input,button,textarea,select{font:inherit}/*img:not([alt]){filter:blur(10px)}*/@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}


/* CLEAR
----------------------------------------------------- */
.clear {clear:both;}


/* CLEAR FIX
----------------------------------------------------- */
.clearfix::after {
	display: block;
	clear: both;
	content: "";
}


/* ----------------------------------------
- FORMAT
---------------------------------------- */
html {font-size:62.5%;}/*デフォルト16px*/

body {color:#000; font-family:YakuHanJP,"Cormorant","ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","Helvetica Neue",Helvetica,Arial,"Lucida Grande","メイリオ",Meiryo,sans-serif; text-size-adjust:100%; -webkit-text-size-adjust:100%; background:url("assets/images/backimage.png") center center / cover no-repeat fixed;}

a {text-decoration:none; outline:none; color:#000; -webkit-tap-highlight-color:rgba(0,0,0,0);}

.spNone {display:none!important;}
.pcNone {display:block!important;}
/*** 960px以上 PCサイズcss適用 ***/
@media screen and (min-width: 960px) {
  .spNone {display:block!important;}
  .pcNone {display:none!important;}
}


/* ヘッダー */
.header {
  width: 100%;
  height: 60px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #636464;
}

@media screen and (min-width: 960px) {
  .header {
    height: 100px;
    background: #fff;
  }
}

.header_inner {
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: inherit;
  position: relative;
}

.header_title {
  width: 120px;
}

.logo_white {
    display: block !important;
}

.logo_black {
    display: none !important;
}

@media screen and (min-width: 960px) {
  .header_title {
    width: 170px;
  }
  .logo_white {
    display: none !important;
  }
  .logo_black {
    display: block !important;
  }
}

.header_title a {
  display: block;
  width: 100%;
  height: 100%;
  position:relative;
  top: 0;
  left: -5px;
}

@media screen and (min-width: 960px) {
  .header_title a {
    left:15px;
    z-index: 10;
  }
  .header_title a {
  	transition-property: opacity;
  	transition-duration: 0.5s;
  }
  .header_title a:hover {
  	opacity: 0.7;
  }
}

.header_nav {
  position: absolute;
  right: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100vh;
  transform: translateX(100%);
  transition: ease .4s;
}


@media screen and (min-width: 960px) {
  .header_nav {
    position: static;
    transform: initial;
    height: inherit;
  }
}

.nav-items {
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0;
}

.sns-items {
  position: absolute;
  top: 330px;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  border-top: solid 1px #fff;
}


@media screen and (min-width: 960px) {
  .nav-items, .sns-items {
    width: 100%;
    height: 100%;
    display: flex;
    position: static;
    top: 0;
    left: 0;
    transform: translate(0, 0);
  }
  .nav-items {
    justify-content: flex-end !important;
    padding: 0 20px 0 0 !important;
    position: relative;
    top: -50px;
  }
  .sns-items {
    border: none;
    justify-content: end !important;
    position: relative;
    top: 20px;
    left: -20px;
  }
}

.nav-items_item a {
  color: #fff;
  width: 100%;
  display: block;
  text-align: center;
  font-size: 20px;
  margin-bottom: 24px;
  font-family: "Open Sans", sans-serif;
  font-weight: bold;
}

.nav-items_item:last-child a {
  margin-bottom: 0;
}

@media screen and (min-width: 960px) {
  .nav-items_item a {
    margin-bottom: 0;
    transition : all 0.5s ease 0s;
	width: fit-content;
	color: #000;
  }
  .nav-items .nav-items_item a {
    margin-left: 25px;
  }
  .sns_items .nav-items_item a {
    margin-left: 25px;
  }
  .nav-items .nav-items_item a:hover {
    color: #636464;
  }
}

.nav-items_item i {
  color: #fff;
  font-size: 20px;
  float: left;
  margin: 30px 0 0 20px;
}

.nav-items_item i.fa-x-twitter {
  margin-left: 0;
}

@media screen and (min-width: 960px) {
  .nav-items_item i {
    margin: 0;
    color: #000;
  }
  .nav-items_item i:hover {
    color: #636464;
    transition : all 1s ease 0s;
  }
}


/* ハンバーガーメニュー */
.header_hamburger {
  width: 48px;
  height: 100%;
  margin: 5px -10px 0 0;
}

.hamburger {
  background-color: transparent;
  border-color: transparent;
  z-index: 9999;
  font-family: "Open Sans", sans-serif;
}

.hamburger::after {
	content: "MENU";
	font-size: 11px;
	color: #fff;
}

@media screen and (min-width: 960px) {
  .hamburger {
    display: none;
  }
}

.hamburger span {
  width: 100%;
  height: 3px;
  background-color: #fff;
  position: relative;
  transition: ease .4s;
  display: block;
  border-radius: 10px;
}

.hamburger span:nth-child(1) {
  top: 0;
}

.hamburger span:nth-child(2) {
  margin: 6px 0;
}

.hamburger span:nth-child(3) {
  top: 0;
}


/* ハンバーガーメニュークリック後のスタイル */
.header_nav.active {
  transform: translateX(0);
  background: #000;
}

.hamburger.active::after {
  content: "CLOSE";
  color: #fff;
}

.hamburger.active span {
  background-color: #fff;
}

.hamburger.active span:nth-child(1) {
  top: 9px;
  transform: rotate(45deg);
}

.hamburger.active span:nth-child(2) {
  opacity: 0;
}

.hamburger.active span:nth-child(3) {
  top: -9px;
  transform: rotate(-45deg);
}


/*=============
content  area
=============*/
#content {
	width: 100%;
	padding: 0 0 40px;
}

#content h2 {
	color: #000;
	font-size: 30px;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
}

#content ul li {
	list-style: none;
}

.privacy {
    width: 100%;
    margin: 40px auto 20px;
    padding: 50px 20px 0;
    font-size: 12px;
    line-height: 1.8em;
}

.privacy h4 {
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 5px;
}

.privacy th {
    width: 100%;
    text-align: left;
    vertical-align: top;
    padding: 15px 0 5px;
    display: block;
}

.privacy td {
    width: 100%;
    padding: 5px 0;
    display: block;
}

.privacy .right {
    float: right;
    margin: 20px 0 0;
}

.privacy .left {
    float: left;
    margin: 40px 0 0;
}

#pageTop {position:fixed; bottom:10px; right:10px; z-index:9;}
#pageTop a {background:url(../img/toTop.png) center no-repeat; width:50px; height:0; padding:50px 0 0; display:block; overflow:hidden;}

@media screen and (min-width: 960px) {
  #content {
    padding: 0;
    margin: 60px auto 0;
  }
  #content h2 {
	font-size: 40px;
  }
  .privacy {
      width: 960px;
      margin: 80px auto 20px;
      padding: 40px 0 0;
      font-size: 15px;
      line-height: 2em;
  }
  .privacy h4 {
      font-size: 18px;
      margin: 30px 0 0;
  }
  .privacy th {
      padding: 25px 0 15px;
  }
  .privacy td {
      padding: 15px 0;
  }
  .privacy .right {
    margin: 40px 0 0;
  }
  .privacy .left {
    margin: 80px 0 0;
  }
  #pageTop {bottom:20px; right:20px;}
}


/*=============
footer  area
=============*/
footer {
	width: 100%;
	margin: 20px 0;
	padding: 0 30px;
}

footer ul li {
	display: inline-block;
	width: fit-content;
}

.footer-sns {
	float: left;
}

.footer-sns i {
	font-size: 25px;
	margin: 0 0 0 20px;
}

.footer-sns i.fa-x-twitter {
	margin-left: 0;
}

.footer-menu li {
	font-size: 10px;
	margin: 5px 0 0 20px;
}

.copyright {
	font-size: 10px;
	float: right;
	font-family: "Open Sans", sans-serif;
	font-weight: bold;
}

@media screen and (min-width: 960px) {
	footer {
		margin: 120px 0 30px;
	}
	footer a {
  		transition : all 0.5s ease 0s;
  	}
	footer a:hover {
		color: #636464;
	}
	.footer-sns i {
		font-size: 35px;
		margin: 0 0 0 30px;
	}
	.footer-menu li {
		font-size: 13px;
		margin: 7px 0 0 30px;
	}
	.copyright {
		font-size: 15px;
		margin: 0 0 0 20px;
	}
}