@charset "utf-8";
/* Navigation 固定
----------------------------------------------------------------------------------------------------*/
.header_box {
  width: 100%;
  top: 0;
  left: 0;
  z-index: 9999;
  transition: .6s;
  position: fixed;
}
.header_box.view {
  background-color: rgba(0, 0, 0, 0.60);
}
.header_box a {
  text-decoration: none;
}
.header {
  transition: .6s;
  position: relative;
  z-index: 9999;
  width: 93.333%;
  margin-right: auto;
  margin-left: auto;
  align-items: center;
  display: flex;
}
.header-logo {
  line-height: 1;
  margin-bottom: 0;
  position: relative;
  z-index: 999999;
}
.header-logo img {
  max-width: 100%;
  height: auto;
}
.header-text {
  margin-bottom: 0;
  color: #fff;
  position: relative;
  z-index: 999999;
}
.pc-head-sns-icon a {
  transition: .3s;
}
.pc-head-sns-icon a:hover {
  opacity: 0.6;
}
/*色変更*/
.header_box.header-box-black.view {
  background-color: rgba(255, 255, 255, 0.60);
}
.header_box.header-box-black .header-logo {
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("../images/logo-w.svg?2025");
}
.header_box.header-box-black .header-logo img {
  transition: 0.6s ease-in-out;
}
.fixed .header_box.header-box-black .header-logo img {
  opacity: 0;
}
.header-box-black .header-text {
  color: #000;
  transition: 0.6s ease-in-out;
}
.fixed .header-box-black .header-text {
  color: #fff;
}
@media screen and (max-width: 575px) {
  .header-logo {
    width: 9rem;
  }
  .pc-head-sns {
    display: none;
  }
  .br-ht {
    display: none;
  }
}
@media screen and (min-width: 576px) {
  .header {
    display: flex;
  }
  .header-logo {
    width: 14rem;
  }
  .br-ht-sp {
    display: none;
  }
  .pc-head-sns {
    display: flex;
    flex-grow: 1;
    justify-content: flex-end;
  }
  .pc-head-sns .pc-head-sns-icon:nth-of-type(2) {
    padding: 0 1.6rem 0 1rem;
  }
}
@media screen and (min-width:576px) and (max-width:991px) {
  .pc-head-sns {
    padding-right: 8.8rem;
  }
}
@media screen and (max-width: 991px) {
  .header {
    padding: 1.6rem 0;
  }
  .header-logo {
    margin-right: 16px;
  }
}
@media screen and (min-width: 992px) {
  .header {
    min-height: 13rem;
  }
  .header_box.DownMove {
    top: 0;
  }
  .header_box.UpMove {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
  }
  .header-logo {
    margin-right: 1.486%;
  }
  .pc-head-sns {
    padding-right: 10rem;
  }
}
@media screen and (max-width: 1399px) {
  .header-text {
    font-size: 1rem;
  }
}
@media screen and (min-width: 1400px) {
  .header-text {
    font-size: 1.3rem;
  }
}
/* -togglemenu.css
--------------------------------------------------------------------------------------------- */
.scroll_tgl_wrap {
  display: block;
  position: absolute;
  top: 0;
  z-index: 99999;
}
/*Toggle*/
.Toggle {
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  z-index: 6666;
  transition: 0.6s ease-in-out;
}
.Toggle span {
  display: block;
  position: absolute;
  transition: .3s ease-in-out;
  border-bottom: solid 1px #fff;
}
/*Toggle.tgl-active*/
.Toggle.tgl-active span {
  border-bottom: solid 1px #fff;
}
.Toggle.tgl-active span:nth-child(1) {
  top: 50%;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.Toggle.tgl-active span:nth-child(2) {
  top: 50%;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}
/*togglewrap.active*/
.togglewrap {
  position: fixed;
  top: 0;
  right: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1111;
  -webkit-transform: translateX(102%);
  transform: translateX(102%);
  /*background-color: #000;*/
  background-color: #565656;
  transition: 0.6s ease-in-out;
}
/*body.fixed*/
body.fixed {
  position: fixed;
  width: 100%;
  height: 100%;
}
/*togglewrap.active*/
.togglewrap.active {
  -webkit-transform: translateX(0%);
  transform: translateX(0%);
  overflow-y: scroll;
}
.toggle-imgarea.active {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  opacity: 1.0;
  filter: alpha(opacity=100);
}
/*色変更*/
.header-box-black .Toggle span {
  border-bottom: solid 1px #000;
}
.header-box-black .Toggle.tgl-active span {
  border-bottom: solid 1px #fff;
}
@media screen and (max-width: 575px) {
  .scroll_tgl_wrap {
    right: -3%;
  }
  .scroll_tgl_wrap, .Toggle {
    width: 6.9rem;
    height: 6rem;
  }
}
@media screen and (min-width: 576px) {
  .scroll_tgl_wrap {
    right: 0;
  }
}
@media screen and (min-width:576px) and (max-width:991px) {
  .scroll_tgl_wrap, .Toggle {
    width: 7.5rem;
    height: 7.5rem;
  }
}
@media screen and (max-width: 991px) {
  .Toggle span {
    width: 30px;
    left: 30%;
  }
  .Toggle span:nth-child(1) {
    top: 42%;
  }
  .Toggle span:nth-child(2) {
    top: 56%;
  }
}
@media screen and (min-width: 992px) {
  .togglewrap {
    display: flex;
    align-items: flex-start;
  }
  .scroll_tgl_wrap, .Toggle {
    width: 5rem;
    height: 13rem;
  }
  .Toggle span {
    width: 100%;
    left: 0;
  }
  .Toggle span:nth-child(1) {
    top: 45%;
  }
  .Toggle span:nth-child(2) {
    top: 55%;
  }
}
/*********tgl contents*********/
.tgl-contact-wrap {
  width: 81%;
  margin-right: auto;
  margin-left: auto;
  color: #fff;
}
.togglewrap ul {
  padding-left: 0;
}
.togglewrap ul li {
  list-style: none;
}
.tgl-mainmenu {
  display: flex;
}
.tgl-mainmenu-list-wrap {
  width: calc(100% / 2);
  padding-left: 5%;
}
.tgl-mainmenu-list-wrap:first-of-type {
  border-right: 1px #fff solid;
}
.tgl-mainmenu-list-wrap:nth-of-type(2) {
  padding-left: 5%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media screen and (max-width: 767px) {
  .tgl-contact-wrap {
    padding-top: 9.6rem;
  }
  .tgl-mainmenu {
    margin-left: -5%;
    margin-right: -5%;
    margin-bottom: 4.8rem;
  }
}
@media screen and (min-width: 768px) {
  .tgl-contact-wrap {
    display: flex;
  }
  .tgl-mainmenu-list-wrap:nth-of-type(2) {
    border-right: 1px #fff solid;
  }
}
@media screen and (min-width:768px) and (max-width:1199px) {
  .tgl-mainmenu {
    width: 50%;
  }
}
@media screen and (min-width:768px) and (max-width:1399px) {
  .tgl-contact-wrap {
    padding-top: 18rem;
  }
}
@media screen and (min-width: 1200px) {
  .tgl-mainmenu {
    width: 39.041%;
  }
}
@media screen and (max-width: 1399px) {
  .tgl-contact-wrap {
    padding-bottom: 4.8rem;
  }
}
@media screen and (min-width: 1400px) {
  .tgl-contact-wrap {
    padding-top: 23.5rem;
    padding-bottom: 10rem;
  }
  .togglewrap ul li {
    font-size: 1.2rem;
  }
}
/*menu list*/
.tmlw-list {
  margin-bottom: 0;
}
.tmlw-list li {
  list-style: none;
}
.tmlw-list li a {
  color: #fff;
  transition: .3s;
  display: inline-block;
}
.tmlw-list li a:hover {
  opacity: 0.6;
}
.tmlw-list-under-e {
  line-height: 1;
  display: block;
}
.tmlw-list-sub {
  margin-bottom: 0;
}
@media screen and (max-width: 1399px) {
  .tmlw-list-under-e {
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
  }
  .tmlw-list-li:not(:last-of-type) {
    margin-bottom: 2rem;
  }
  .tmlw-list-sub {
    padding-top: 0.4rem;
  }
}
@media screen and (min-width: 1400px) {
  .tmlw-list-under-e {
    font-size: 2.4rem;
    margin-bottom: 0.6rem;
  }
  .tmlw-list-li:not(:last-of-type) {
    margin-bottom: 3.6rem;
  }
  .tmlw-list-sub {
    padding-top: 1rem;
  }
}
/*SNS*/
.tgl-sns {
  display: flex;
  margin-left: -0.6rem;
}
.tgl-sns-icon:nth-of-type(2) {
  padding-left: 0.8rem;
}
.tgl-sns-icon:nth-of-type(3) {
  padding-left: 1.6rem;
}
.tgl-sns-icon a {
  transition: 0.3s;
}
.tgl-sns-icon a:hover {
  opacity: 0.6;
}
/*store トップのSTOREでも使用*/
.tgl-store-item a {
  display: block;
  color: #fff;
}
.tgl-store-item {
  margin-bottom: 5.6rem;
}
.tsi-img {
  margin-bottom: 1rem;
}
.tsi-txt-ttl {
  line-height: 1.5;
}
@media screen and (min-width:576px) and (max-width:767px) {
  .tgl-store {
    display: flex;
    margin-left: -2.5%;
    margin-right: -2.5%;
  }
  .tgl-store .tgl-store-item {
    width: calc(100% /2);
    padding: 0 2.5%;
  }
}
@media screen and (min-width: 768px) {
  .tgl-store {
    padding-left: 7.397%;
  }
  .tgl-store .tgl-store-item:nth-of-type(2) {
    margin-bottom: 0;
  }
}
@media screen and (min-width:768px) and (max-width:1199px) {
  .tgl-store {
    width: 50%;
  }
}
@media screen and (min-width: 1200px) {
  .tgl-store {
    width: 60.959%;
  }
  .tgl-store .tgl-store-item a {
    display: flex;
  }
  .tgl-store .tgl-store-item a .tsi-img {
    width: 44.871%;
    margin-bottom: 0;
  }
  .tgl-store .tgl-store-item a .tsi-txt {
    width: 55.129%;
    padding-left: 3.846%;
  }
}
@media screen and (max-width: 1399px) {
  .tsi-txt-ttl .efont {
    font-size: 1.8rem;
  }
}
@media screen and (min-width: 1400px) {
  .tsi-txt-ttl .efont {
    font-size: 2.4rem;
  }
  .tsi-txt-ttl {
    font-size: 1.4rem;
    margin-bottom: 2.6rem;
  }
  .tsi-txt-ttl + p {
    font-size: 1.3rem;
    margin-bottom: 3.2rem;
    line-height: 2;
  }
  .tsi-txt .bt_more {
    width: 70%;
  }
}
/*hover ホームページ全体で共通*/
.hover-ani-more {
  position: relative;
  overflow: hidden;
}
.hover-ani-more img {
  max-width: 100%;
  height: auto;
  transition: .6s !important;
}
a:hover .hover-ani-more img {
  transform: scale(1.2);
}
.hover-ani-more::before {
  content: " ";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.80);
  top: 0;
  left: 0;
  transition: .6s;
  opacity: 0;
  z-index: 1;
}
.hover-ani-more::after {
  content: "VIEW MORE";
  font-family: 'Arimo', sans-serif;
  font-weight: normal;
  color: #fff;
  font-size: 1.4rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: .6s;
  opacity: 0;
  z-index: 2;
  line-height: 1;
  width: 100%;
  text-align: center;
}
a:hover .hover-ani-more::before, a:hover .hover-ani-more::after {
  opacity: 1;
}
/**************************
ページヘッダー
**************************/
.page-head {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.page-head-bdt-bdb {
  border-top-width: 1px;
  border-top-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}
.head-ttl {
  margin-bottom: 0;
  line-height: 1.4;
}
.head-jfont {
  margin-bottom: 0;
  display: inline-block;
}
/*色変更*/
.page-head-black {
  /*background-color: #000;*/
  color: #fff;
  background-color: #565656;
}
.page-head-black .page-head-bdt-bdb {
  border-top-color: #fff;
  border-bottom-color: #fff;
}
.page-head-gray {
  background-color: #efefef;
}
.page-head-gray .page-head-bdt-bdb {
  border-top-color: #c8c8c8;
  border-bottom-color: #c8c8c8;
}
@media screen and (max-width: 575px) {
  .page-head {
    padding-top: 6.4rem;
  }
}
@media screen and (min-width:576px) and (max-width:991px) {
  .page-head {
    padding-top: 7.2rem;
  }
}
@media screen and (min-width: 992px) {
  .page-head {
    padding-top: 13rem;
  }
}
@media screen and (max-width: 1399px) {
  .page-head-bdt-bdb {
    padding: 3.2rem 0;
  }
  .head-bfont {
    font-size: 3.2rem;
    margin-left: -0.2rem;
    letter-spacing: 0.2rem;
    padding-right: 1.6rem;
  }
  .head-jfont {
    font-size: 1.4rem;
  }
}
@media screen and (min-width: 1400px) {
  .page-head-bdt-bdb {
    padding: 6.4rem 0;
  }
  .head-bfont {
    font-size: 6rem;
    margin-left: -0.2rem;
    letter-spacing: 0.5rem;
    padding-right: 2.4rem;
  }
  .head-jfont {
    font-size: 1.8rem;
  }
}