header #gl_nav {
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9910; }
  @media screen and (min-width: 769px) {
    header #gl_nav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 8rem;
      pointer-events: auto !important; } }
  @media screen and (max-width: 768px) {
    header #gl_nav {
      position: fixed;
      top: -5rem;
      left: 0;
      width: 100%;
      height: 100lvh;
      background: #fff;
      flex-direction: column;
      gap: 3rem;
      opacity: 0;
      pointer-events: none;
      transition: ease-in-out .6s all; } }

@media screen and (max-width: 768px) {
  header #gl_nav.open {
    top: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important; } }

header nav div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center; }
  @media screen and (min-width: 769px) {
    header nav div {
      flex-direction: row;
      gap: 0rem; } }
  @media screen and (max-width: 768px) {
    header nav div {
      flex-direction: column;
      gap: 1.2rem; } }

header nav div a {
  position: relative;
  transition: ease-in-out .6s all; }
  @media screen and (min-width: 769px) {
    header nav div a {
      width: 19rem; } }
  @media screen and (max-width: 768px) {
    header nav div a {
      width: 28rem; } }

@media screen and (min-width: 769px) {
  header nav div a::after {
    display: block;
    content: "";
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: #44200a 0rem solid;
    opacity: 0;
    transition: ease-in-out .4s all; } }

header nav div a:hover::after {
  opacity: 1; }
  @media screen and (min-width: 769px) {
    header nav div a:hover::after {
      border: #44200a 0.6rem solid; } }

@media screen and (min-width: 769px) {
  .nav_btn {
    display: none !important; } }
@media screen and (max-width: 768px) {
  .nav_btn {
    display: inline-block;
    position: absolute;
    top: 0rem;
    right: 0rem;
    width: 6.5rem;
    height: 6.5rem;
    z-index: 9980;
    cursor: pointer;
    transition: .3s;
    display: block;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    border: none;
    background: none;
    pointer-events: auto !important; } }

.nav_btn > span {
  display: block;
  position: absolute;
  top: 3.1rem;
  left: 2rem;
  width: 2.4rem;
  height: 2px;
  margin: 0;
  background: #000;
  transition: .4s ease-in-out;
  border-radius: 0.1rem; }

.nav_btn > span:before,
.nav_btn > span:after {
  display: block;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.4rem;
  height: 2px;
  background: #000;
  transition: .4s ease-in-out; }

.nav_btn > span:before {
  margin-top: -9px; }

.nav_btn > span:after {
  margin-top: 10px; }

.nav_btn.close,
.nav_btn.close > span {
  background: transparent !important; }

.nav_btn.close > span:before, .nav_btn.close > span:after {
  margin-top: 0; }

.nav_btn.close > span:before {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg); }

.nav_btn.close > span:after {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); }

/*common*/
#sns {
  background: #fff; }

#brandsite {
  position: relative;
  width: 100%;
  margin: 0;
  background: #fafaf5; }

@media screen and (min-width: 769px) {
  #brandsite .cover_line {
    border-radius: 1.4rem; } }

@media screen and (min-width: 769px) {
  #brandsite .cover_line::after {
    border: #bf242c 0rem solid; } }

@media screen and (min-width: 769px) {
  #brandsite .cover_line:hover::after {
    border: #bf242c 1rem solid; } }

@media screen and (min-width: 769px) {
  #brandsite .cover_line.look_color::after {
    border: #ffe814 0rem solid; } }

@media screen and (min-width: 769px) {
  #brandsite .cover_line.look_color:hover::after {
    border: #ffe814 1rem solid; } }

@media screen and (min-width: 769px) {
  #special .cover_line::after {
    border: #bf242c 0rem solid; } }

@media screen and (min-width: 769px) {
  #special .cover_line:hover::after {
    border: #bf242c 2.8rem solid; } }

/*page*/
#kv {
  position: relative;
  width: 100%;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #kv {
      height: 68.8rem; } }
  @media screen and (max-width: 768px) {
    #kv {
      height: 46.8rem; } }

#kv_ttl {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%); }
  @media screen and (min-width: 769px) {
    #kv_ttl {
      width: 98%;
      max-width: 135rem; } }
  @media screen and (max-width: 768px) {
    #kv_ttl {
      width: 36.5rem; } }

#kv_peco {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 50%;
  transform: translateX(-50%); }
  @media screen and (min-width: 769px) {
    #kv_peco {
      top: 9rem;
      width: 88.4rem;
      height: 36.6rem; } }
  @media screen and (max-width: 768px) {
    #kv_peco {
      top: 6rem;
      width: 29.5rem;
      height: 30rem; } }

#kv_peco::after {
  display: block;
  content: "";
  position: absolute;
  pointer-events: none;
  transition: ease-in-out .4s all;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3; }
  @media screen and (min-width: 769px) {
    #kv_peco::after {
      background: url("../../img/kv_bg_pc.svg") center center no-repeat;
      background-size: contain; } }
  @media screen and (max-width: 768px) {
    #kv_peco::after {
      background: url("../../img/kv_bg_sp.svg") center center no-repeat;
      background-size: contain; } }

#kv_peco figure {
  display: block;
  position: relative; }
  @media screen and (min-width: 769px) {
    #kv_peco figure {
      width: 32.4rem; } }
  @media screen and (max-width: 768px) {
    #kv_peco figure {
      width: 16.3rem; } }

#kv #kv_peco::after {
  transition: all 500ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28);
  opacity: 0;
  transform: scale(0.85); }

#kv.active #kv_peco::after {
  opacity: 1;
  transform: scale(1); }

#kv_peco figure {
  transition: all 500ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28);
  opacity: 0;
  transform: scale(0.85); }

#kv.active #kv_peco figure {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.1s; }

#kv_ttl {
  transition: all 600ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28);
  opacity: 0; }
  @media screen and (min-width: 769px) {
    #kv_ttl {
      transform: translate(-50%, 5rem); } }
  @media screen and (max-width: 768px) {
    #kv_ttl {
      transform: translate(-50%, 4rem); } }

#kv.active #kv_ttl {
  opacity: 1;
  transform: translate(-50%, 0rem);
  transition-delay: 0.3s; }

#message {
  position: relative;
  width: 100%;
  margin: 0;
  background: #bf242c; }

#message .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #message .inner {
      height: 71.4rem; } }
  @media screen and (max-width: 768px) {
    #message .inner {
      height: 43.8rem; } }

#message .inner::after {
  display: block;
  content: "";
  position: absolute;
  pointer-events: none;
  transition: ease-in-out .4s all;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3; }
  @media screen and (min-width: 769px) {
    #message .inner::after {
      background: url("../../img/read_bg_pc.png") center center no-repeat;
      background-size: 90rem auto; } }
  @media screen and (max-width: 768px) {
    #message .inner::after {
      background: url("../../img/read_bg_sp.png") center center no-repeat;
      background-size: 28.5rem auto; } }

#message .message_txt {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em;
  color: #fff;
  text-align: center; }
  @media screen and (min-width: 769px) {
    #message .message_txt {
      line-height: 2em;
      font-size: 2rem; } }
  @media screen and (max-width: 768px) {
    #message .message_txt {
      line-height: 1.715em;
      font-size: 1.4rem; } }

/**/
#message .inner::after {
  transition: all 500ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28);
  opacity: 0;
  transform: scale(0.85); }

#message.active .inner::after {
  opacity: 1;
  transform: scale(1);
  transition-delay: 0.3s; }

#message .message_txt {
  transition: all 700ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28);
  opacity: 0; }
  @media screen and (min-width: 769px) {
    #message .message_txt {
      transform: translateY(0rem); } }
  @media screen and (max-width: 768px) {
    #message .message_txt {
      transform: translateY(0rem); } }

#message.active .message_txt {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; }

.main_section hgroup {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    .main_section hgroup {
      gap: 3.5rem; } }
  @media screen and (max-width: 768px) {
    .main_section hgroup {
      gap: 2.5rem; } }

.main_section hgroup h2 {
  position: relative;
  text-align: center; }

.main_section hgroup h2 img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto !important; }
  @media screen and (min-width: 769px) {
    .main_section hgroup h2 img {
      height: 9.2rem !important; } }
  @media screen and (max-width: 768px) {
    .main_section hgroup h2 img {
      height: 4.6rem !important; } }

.main_section hgroup p {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em;
  color: #000;
  text-align: center; }
  @media screen and (min-width: 769px) {
    .main_section hgroup p {
      line-height: 1em;
      font-size: 2.2rem; } }
  @media screen and (max-width: 768px) {
    .main_section hgroup p {
      line-height: 1em;
      font-size: 1.8rem; } }

/**/
#special {
  position: relative;
  width: 100%;
  margin: 0;
  background: #bf242c; }

#special .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  width: 100% !important; }
  @media screen and (min-width: 769px) {
    #special .inner {
      padding: 13.5rem 0 13.5rem; } }
  @media screen and (max-width: 768px) {
    #special .inner {
      padding: 8rem 0 8rem; } }

#special .slider_outer {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 100% !important; }
  @media screen and (min-width: 769px) {
    #special .slider_outer {
      margin-top: 16rem;
      height: 30rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_outer {
      margin-top: 9rem;
      height: 16.8rem; } }

#special .slider_set {
  position: relative;
  margin: 0 auto !important; }
  @media screen and (min-width: 769px) {
    #special .slider_set {
      width: 54rem;
      height: 30rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_set {
      width: 30rem;
      height: 16.6rem; } }

#special .slick-list {
  overflow: visible; }

#special .slider_nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row; }
  @media screen and (min-width: 769px) {
    #special .slider_nav {
      margin: 5rem auto 0;
      width: 54rem;
      height: 6.5rem;
      gap: 4rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_nav {
      margin: 3rem auto 0;
      width: 30.2rem;
      height: 3.8rem;
      gap: 2.4rem; } }

#special .slider_nav div {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row; }
  @media screen and (min-width: 769px) {
    #special .slider_nav div {
      gap: 2rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_nav div {
      gap: 1rem; } }

#special .slider_nav div .dot {
  position: relative;
  overflow: hidden;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 50%;
  cursor: pointer;
  transition: ease-out .6s all;
  background: #000; }
  @media screen and (min-width: 769px) {
    #special .slider_nav div .dot {
      width: 2rem;
      height: 2rem;
      border: #fff 0.3rem solid; } }
  @media screen and (max-width: 768px) {
    #special .slider_nav div .dot {
      width: 1.2rem;
      height: 1.2rem;
      border: #fff 0.2rem solid; } }

#special .slider_nav div .dot:hover,
#special .slider_nav div .dot.active {
  background: #f53645; }

#special .slider_nav .prev,
#special .slider_nav .next {
  position: absolute;
  overflow: hidden;
  padding: 0 !important;
  cursor: pointer;
  transition: ease-out .6s all;
  pointer-events: auto !important;
  border: none; }
  @media screen and (min-width: 769px) {
    #special .slider_nav .prev,
    #special .slider_nav .next {
      top: -23rem;
      width: 6.4rem;
      height: 6.4rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_nav .prev,
    #special .slider_nav .next {
      top: -13rem;
      width: 3.8rem;
      height: 3.8rem; } }

#special .slider_nav .prev {
  background: url("../../img/prev.png") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    #special .slider_nav .prev {
      left: -3.2rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_nav .prev {
      left: -1.9rem; } }

#special .slider_nav .next {
  background: url("../../img/next.png") center center no-repeat;
  background-size: contain; }
  @media screen and (min-width: 769px) {
    #special .slider_nav .next {
      right: -3.2rem; } }
  @media screen and (max-width: 768px) {
    #special .slider_nav .next {
      right: -1.9rem; } }

@media screen and (min-width: 769px) {
  #special .slider_nav .prev:hover,
  #special .slider_nav .next:hover {
    opacity: .7; } }

.lineup_item a {
  position: relative;
  display: block;
  padding: 0 !important;
  transition: ease-in-out .4s all;
  margin: 0 auto !important; }
  @media screen and (min-width: 769px) {
    .lineup_item a {
      width: 29rem;
      height: 30rem; } }
  @media screen and (max-width: 768px) {
    .lineup_item a {
      width: 26rem;
      height: 14.4rem; } }

@media screen and (min-width: 769px) {
  .lineup_item.slick-center a {
    width: 54rem;
    height: 30rem; } }
@media screen and (max-width: 768px) {
  .lineup_item.slick-center a {
    width: 30.2rem;
    height: 16.8rem; } }

.lineup_item a::after {
  display: block;
  content: "";
  position: absolute;
  pointer-events: none;
  transition: ease-in-out .4s all;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3; }
  @media screen and (min-width: 769px) {
    .lineup_item a::after {
      border: #bf242c 0.5rem solid; } }
  @media screen and (max-width: 768px) {
    .lineup_item a::after {
      border: #bf242c 0.5rem solid; } }

@media screen and (min-width: 769px) {
  .lineup_item a:hover::after {
    border: #bf242c 1.2rem solid; } }

.lineup_item a figure {
  position: absolute;
  left: 0;
  transition: ease-in-out .6s all;
  width: 100%;
  z-index: 5; }
  @media screen and (min-width: 769px) {
    .lineup_item a figure {
      top: 6.5rem; } }
  @media screen and (max-width: 768px) {
    .lineup_item a figure {
      top: 1.2rem; } }

@media screen and (min-width: 769px) {
  .lineup_item.slick-center a figure {
    top: 0rem; } }
@media screen and (max-width: 768px) {
  .lineup_item.slick-center a figure {
    top: 0rem; } }

#special hgroup h2 img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto !important; }
  @media screen and (min-width: 769px) {
    #special hgroup h2 img {
      height: 7.6rem !important; } }
  @media screen and (max-width: 768px) {
    #special hgroup h2 img {
      height: 5.2rem !important; } }

#brandsite hgroup h2 img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto !important; }
  @media screen and (min-width: 769px) {
    #brandsite hgroup h2 img {
      height: 8rem !important; } }
  @media screen and (max-width: 768px) {
    #brandsite hgroup h2 img {
      height: 5.2rem !important; } }

/**/
#entrance {
  position: relative;
  width: 100%;
  margin: 0; }
  @media screen and (min-width: 769px) {
    #entrance {
      background: url("../../img/entrance_bg.png") 0 0 repeat;
      background-size: 2.4rem auto; } }
  @media screen and (max-width: 768px) {
    #entrance {
      background: url("../../img/entrance_bg.png") 0 0 repeat;
      background-size: 1.8rem auto; } }

#entrance .inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #entrance .inner {
      padding: 12rem 0 14rem; } }
  @media screen and (max-width: 768px) {
    #entrance .inner {
      padding: 8rem 0 8rem; } }

#entrance .box {
  background: #fff;
  width: 100%; }
  @media screen and (min-width: 769px) {
    #entrance .box {
      padding: 9.5rem 0 12rem; } }
  @media screen and (max-width: 768px) {
    #entrance .box {
      padding: 5rem 0 5rem; } }

#entrance figure {
  position: relative;
  margin: 0 auto; }
  @media screen and (min-width: 769px) {
    #entrance figure {
      width: 25rem; } }
  @media screen and (max-width: 768px) {
    #entrance figure {
      width: 18.2rem; } }

#entrance hgroup {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #entrance hgroup {
      margin-top: 3.5rem;
      padding-bottom: 3rem;
      gap: 2.5rem;
      background: url("../../img/entrance_item_pc.png") center bottom no-repeat;
      background-size: 100% auto; } }
  @media screen and (max-width: 768px) {
    #entrance hgroup {
      margin-top: 2.5rem;
      gap: 2rem;
      background: url("../../img/entrance_item_sp.png") center top no-repeat;
      background-size: 100% auto; } }

#entrance hgroup h2 {
  position: relative;
  text-align: center; }

#entrance hgroup h2 img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto !important; }
  @media screen and (min-width: 769px) {
    #entrance hgroup h2 img {
      height: 3.696rem !important; } }
  @media screen and (max-width: 768px) {
    #entrance hgroup h2 img {
      height: 5.571rem !important; } }

#entrance hgroup p {
  position: relative;
  font-weight: 700;
  letter-spacing: 0.0em;
  color: #44200a;
  text-align: center; }
  @media screen and (min-width: 769px) {
    #entrance hgroup p {
      line-height: 2em;
      font-size: 1.8rem; } }
  @media screen and (max-width: 768px) {
    #entrance hgroup p {
      line-height: 2em;
      font-size: 1.4rem; } }

#entrance .btn_set {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: center; }
  @media screen and (min-width: 769px) {
    #entrance .btn_set {
      flex-direction: row;
      gap: 3rem;
      margin-top: 6rem; } }
  @media screen and (max-width: 768px) {
    #entrance .btn_set {
      flex-direction: column;
      gap: 4.5rem;
      margin-top: 4rem; } }

#entrance .btn_set a {
  position: relative;
  margin: 0;
  overflow: hidden; }
  @media screen and (min-width: 769px) {
    #entrance .btn_set a {
      width: 43rem; } }
  @media screen and (max-width: 768px) {
    #entrance .btn_set a {
      width: 33rem; } }

@media screen and (min-width: 769px) {
  #entrance .cover_line::after {
    border: #bf242c 0rem solid; } }

@media screen and (min-width: 769px) {
  #entrance .cover_line:hover::after {
    border: #bf242c 1rem solid; } }

@media screen and (min-width: 769px) {
  #entrance .cover_line.look_color::after {
    border: #ffe814 0rem solid; } }

@media screen and (min-width: 769px) {
  #entrance .cover_line.look_color:hover::after {
    border: #ffe814 1rem solid; } }

/**/
#intro {
  position: fixed;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100lvh;
  z-index: 9999;
  background: #fafaf5;
  opacity: 0;
  pointer-events: none;
  transition: ease-out .6s all;
  display: flex;
  justify-content: center;
  align-items: center; }

#intro.open {
  opacity: 1;
  pointer-events: auto !important; }

#intro hgroup {
  position: relative;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column; }
  @media screen and (min-width: 769px) {
    #intro hgroup {
      gap: 4.5rem; } }
  @media screen and (max-width: 768px) {
    #intro hgroup {
      gap: 2.5rem; } }

#intro hgroup h1,
#intro hgroup p {
  position: relative;
  text-align: center; }

#intro hgroup h1 img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto !important; }
  @media screen and (min-width: 769px) {
    #intro hgroup h1 img {
      height: 3.312rem !important; } }
  @media screen and (max-width: 768px) {
    #intro hgroup h1 img {
      height: 1.8rem !important; } }

#intro hgroup p img {
  position: relative;
  display: block;
  margin: 0 auto;
  width: auto !important; }
  @media screen and (min-width: 769px) {
    #intro hgroup p img {
      height: 8.2rem !important; } }
  @media screen and (max-width: 768px) {
    #intro hgroup p img {
      height: 9.8rem !important; } }

#intro hgroup h1,
#intro hgroup p {
  transition: all 900ms cubic-bezier(0.67, 0.515, 0.11, 1.28);
  transition-timing-function: cubic-bezier(0.67, 0.515, 0.11, 1.28);
  opacity: 0; }
  @media screen and (min-width: 769px) {
    #intro hgroup h1,
    #intro hgroup p {
      transform: translateY(5rem); } }
  @media screen and (max-width: 768px) {
    #intro hgroup h1,
    #intro hgroup p {
      transform: translateY(4rem); } }

#intro.active hgroup h1,
#intro.active hgroup p {
  opacity: 1;
  transform: translateY(0); }

#intro.active hgroup h1 {
  transition-delay: 0.3s; }

#intro.active hgroup p {
  transition-delay: 0.5s; }

.special_soon {
  position: relative;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 769px) {
    .special_soon {
      margin-top: 4rem;
      width: 86.7rem; } }
  @media screen and (max-width: 768px) {
    .special_soon {
      margin-top: 3rem;
      width: 22.9rem; } }

.special_banner {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto; }
  @media screen and (min-width: 769px) {
    .special_banner {
      margin-top: 4rem;
      width: 54rem; } }
  @media screen and (max-width: 768px) {
    .special_banner {
      margin-top: 3rem;
      width: 30rem; } }