@charset "utf-8";
/*==================================
SWITCH DOT LINE WCS-CSS 5.5
https://www.switchdotline.net/
Edit:2026 -
LastUpdate:20260918
==================================*/
/* FONTS
Source Han Sans JP Regular
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 400;
font-style: normal;

Source Han Sans JP Medium
font-family: "source-han-sans-japanese", sans-serif;
font-weight: 500;
font-style: normal;

Carrotflower Regular
font-family: "carrotflower", sans-serif;
font-weight: 400;
font-style: normal;

SicYubi-HyojunBansho Regular
font-family: "sicyubi-hyojunbansho", sans-serif;
font-weight: 400;
font-style: normal;

Futura PT Light
font-family: "futura-pt", sans-serif;
font-weight: 300;
font-style: normal;

Futura PT Light Oblique
font-family: "futura-pt", sans-serif;
font-weight: 300;
font-style: italic;

Futura PT Book
font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: normal;

Futura PT Book Oblique
font-family: "futura-pt", sans-serif;
font-weight: 400;
font-style: italic;

Futura PT Medium
font-family: "futura-pt", sans-serif;
font-weight: 500;
font-style: normal;

M+ 2c regular
font-family: "m-plus-2c", sans-serif;
font-weight: 400;
font-style: normal;

M+ 2c medium
font-family: "m-plus-2c", sans-serif;
font-weight: 500;
font-style: normal;
*/

/*==================================
* DEFINITION
==================================*/
:root {
  --color-page_base: #eefef7;
  --color-page_main: #508292;
  --color-page_main_dark: #d9f7f4;
  --color-page_main_alpha70: rgba(80, 130, 146, 0.7);
  --color-page_main_alpha10: rgba(80, 130, 146, 0.1);
  --color-page_main_alpha05: rgba(80, 130, 146, 0.05);
  --color-page_sub: #a87866;
  --color-page_sub_alpha80: rgba(168, 120, 102, 0.8);
  --color-highlight: #fff3a1;
  --color-important_lv1: #f13268;
  --color-important_lv2: #b75dc4;
  --color-alpha-0: rgba(0, 0, 0, 0);
}

::selection {
  background-color: #bcdde3;
}

:lang(ja-btn) {
  --font-top-offset: 0.1em;
}

/*==================================
CSS ANIMATION
==================================*/
@keyframes fixed {
  0%,
  75% {
    opacity: 1;
  }
  85% {
    z-index: 200;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

@keyframes ani-fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes ani-loading {
  0%,
  100% {
    opacity: 0;
  }
  40%,
  80% {
    opacity: 1;
  }
}

/*==================================
* INTRO ANIMATION
==================================*/
#intro_ani {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100svh;
  padding: 0;
  background-color: var(--color-page_base);
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
  z-index: 9999;
  animation: fixed 1.8s ease-in-out 0s 1 forwards;
}

#intro_ani:before {
  content: "";
  display: block;
  width: 240px;
  height: 60px;
  background-image: url(../common/logo-official_fc-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: calc(50% - 120px);
  top: calc(50% - 30px);
  animation: ani-loading 1.4s ease-in-out 0s 1 forwards;
}

/*==================================
ANCHOR LINK
==================================*/
.anchor {
  display: block !important;
  padding-top: 120px !important;
  margin-top: -120px !important;
  position: absolute;
}

/*==================================
* BTN PAGETOP
==================================*/
a.fixed_pagetop {
  display: block;
  width: 50px;
  height: 50px;
  padding: 0;
  margin: 0;
  background-color: var(--color-page_base);
  background-image: url(../common/icon-pagetop-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  position: fixed;
  left: 10px;
  z-index: 100;
  transition: 0.4s;
  opacity: 0.7;
}

a:hover.fixed_pagetop {
  background-image: url(../common/icon-pagetop-blonze.png);
}

/*==================================
* COMMON SPLIDE
==================================*/
/* SLIDE */
.splide__arrow {
  width: 40px !important;
  height: 40px !important;
  background-color: var(--color-alpha-0) !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  top: calc(100% + 30px) !important;
  opacity: 1 !important;
  transition: 0.4s;
}

.splide__arrow:disabled {
  opacity: 0.3 !important;
}

.splide__arrow:hover,
.splide__arrow:hover:not(:disabled) {
  background-color: var(--color-alpha-0) !important;
  opacity: 1 !important;
}

.splide__arrow--prev {
  background-image: url(../common/btn-arrow_slide_left-blue.png) !important;
  left: calc(50% - 50px) !important;
}

.splide__arrow--prev:hover {
  background-image: url(../common/btn-arrow_slide_left-blonze.png) !important;
}

.splide__arrow--next {
  background-image: url(../common/btn-arrow_slide_right-blue.png) !important;
  right: calc(50% - 50px) !important;
}

.splide__arrow--next:hover {
  background-image: url(../common/btn-arrow_slide_right-blonze.png) !important;
}

.splide__arrow svg {
  display: none;
}

/* SLIDE CONTENT */
.slide-img_normal,
.slide-img_single,
.slide-mov_normal {
  margin: 30px auto 50px auto;
}

.slide-banner {
  margin: 30px -6.5% 50px -6.5%;
}

.slide-img_normal ul.splide__list .splide__slide,
.slide-mov_normal ul.splide__list .splide__slide {
  width: 100%;
  padding: 0;
}

.slide-img_single ul.splide__list .splide__slide {
  width: 100%;
  padding: 0;
}

.slide-img_normal .splide__slide,
.slide-img_single .splide__slide,
.slide-mov_normal .splide__slide {
  transition: 1.2s;
  opacity: 0.5;
}

.slide-img_normal .splide__slide.is-active,
.slide-img_single .splide__slide.is-active,
.slide-mov_normal .splide__slide.is-active {
  transition: 1.2s;
  opacity: 1;
}

/* BANNER SLIDE */
.slide-banner ul.splide__list .splide__slide {
  width: 80%;
  padding: 0;
}

/*==================================
* COMMON TEXT
==================================*/
h1,
h2,
h3,
h4,
h5 {
  padding: 0;
  margin: 0;
  font-family: "m-plus-2c", sans-serif;
  font-weight: 400;
  font-style: normal;
  line-height: 160%;
}

p {
  line-height: 180%;
  padding: 5px 0;
  margin: 0;
}

a {
  color: var(--color-page_main);
  text-decoration: none;
  transition: 0.4s;
}

a:hover {
  color: var(--color-page_sub);
  text-decoration: none;
}

.caption {
  font-size: 0.8rem !important;
}

p strong {
  color: var(--color-important_lv1);
  font-weight: 400;
}

p .marker {
  background-color: var(--color-highlight);
}

img {
  -webkit-user-drag: none;
}

/*==================================
* COMMON LAYOUT
==================================*/
html {
  font-size: 15.6px;
  overflow-x: hidden;
  height: -webkit-fill-available;
}

body {
  height: 100%;
  min-height: 100svh;
  padding: 0;
  margin: 0;
  background-color: var(--color-page_base);
  color: var(--color-page_main);
  line-height: 180%;
  /* font-family: "source-han-sans-japanese", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.06em; */
  font-family: "m-plus-2c", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0em;
  font-feature-settings: "palt" 1;
  -webkit-text-size-adjust: 100%;
  min-height: -webkit-fill-available;
  overflow-wrap: anywhere;
  word-break: normal;
  line-break: strict;
}

/* Fixed BG */
body::before {
  content: "";
  width: 100vw;
  height: 100svh;
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

#content-area {
  min-height: 100vh;
  padding: 90px 0;
  position: relative;
  top: 0;
  clip-path: inset(0);
}

article {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
}

section {
  padding: 0;
  margin: 45px 6% 150px 6%;
  position: relative;
}

section a:not([class]) {
  padding: 0 1px 1px 1px;
  color: var(--color-page_sub);
  border-bottom: 2px dotted var(--color-page_sub);
  font-weight: 500;
}

section a:not([class]):hover {
  padding: 0 1px 1px 1px;
  border-bottom: 2px dotted var(--color-page_sub);
  background-color: var(--color-highlight);
}

.title_area {
  display: block;
  padding: 0;
  margin: 0 auto 45px auto;
  text-align: left;
}

.title_area h2 {
  padding: 0;
  margin: 0;
  font-size: 3rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.08em;
}

.title_area h3 {
  padding: 3px 0 3px 26px;
  margin: 15px 0 0 0;
  background-image: url(../common/icon-members_star-blue.png);
  background-position: left 50%;
  background-repeat: no-repeat;
  background-size: 19px;
  font-size: 1.15rem;
  line-height: 100%;
}

.element_block {
  padding: 0;
  margin: 0 5%;
  text-align: left;
  position: relative;
}

/*==================================
* COMMON HEADER
==================================*/
header {
  width: 100%;
  height: 90px;
  position: absolute;
  left: 0;
  top: 0;
}

header h1 a {
  display: block;
  width: 80px;
  height: 30px;
  padding: 0;
  margin: 30px auto 0 auto;
  background-image: url(../common/logo-yuika-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  transform: scale(1);
  transition: 0.4s;
}

header h1 a:hover {
  background-image: url(../common/logo-yuika-blonze.png);
  transform: scale(1.02);
}

header #btn-common_menu {
  display: block;
  width: 50px;
  height: 50px;
  background-color: var(--color-page_base);
  background-image: url(../common/icon-menu-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  position: fixed;
  right: 10px;
  top: 20px;
  z-index: 10;
  transition: 0.4s;
  cursor: pointer;
  opacity: 0.7;
}

header #btn-common_menu:hover {
  background-image: url(../common/icon-menu-blonze.png);
  transition: 0.4s;
}

header #btn-common_lang {
  display: block;
  width: 50px;
  height: 50px;
  background-color: var(--color-page_base);
  background-image: url(../common/icon-lang-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 20px;
  border-radius: 50%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
  position: fixed;
  right: 10px;
  bottom: 10px;
  z-index: 10;
  transition: 0.4s;
  cursor: pointer;
  opacity: 0.7;
}

header #btn-common_lang:hover {
  background-image: url(../common/icon-lang-blonze.png);
  transition: 0.4s;
}

header a#btn_corner-login {
  display: block;
  width: 160px;
  height: 24px;
  background-image: url(../common/corner-login-blonze.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: fixed;
  left: -40px;
  top: 28px;
  z-index: 10;
  transform: rotate(-45deg);
  transition: 0.4s;
}

header a:hover#btn_corner-login {
  background-image: url(../common/corner-login-blue.png);
  left: -49px;
  top: 36px;
}

header a#btn_corner-mypage {
  display: block;
  width: 200px;
  height: 30px;
  background-image: url(../common/corner-mypage-blonze.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: fixed;
  left: -50px;
  top: 35px;
  z-index: 10;
  transform: rotate(-45deg);
  transition: 0.4s;
}

header a:hover#btn_corner-mypage {
  background-image: url(../common/corner-mypage-blue.png);
  left: -48px;
  top: 37px;
}

/*==================================
* COMMON FOOTER
==================================*/
footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 0;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

footer a {
  color: var(--color-page_main);
}

footer a:hover {
  text-decoration: none;
  color: var(--color-page_sub);
}

footer #common_footer_elements {
  display: block;
  width: 100%;
  padding: 90px 0 0 0;
  margin: 0;
  background-image: url(../common/logo-yuika-blue.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 108px;
  text-align: center;
  position: relative;
}

/* SNS ICON */
#sns_link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 0 45px 0;
}

#sns_link li {
  width: 26px;
  height: 26px;
  padding: 0;
  margin: 0 24px;
}

#sns_link li a {
  display: block;
  width: 26px;
  height: 26px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transform: scale(1);
}

#sns_link li a:hover {
  transform: scale(1.1);
}

#sns_link li a.icon-x {
  background-image: url(../common/snsicon-x-blue.png);
}

#sns_link li a.icon-youtube {
  background-image: url(../common/snsicon-yt-blue.png);
}

#sns_link li a.icon-instagram {
  background-image: url(../common/snsicon-inst-blue.png);
}

#sns_link li a.icon-tiktok {
  background-image: url(../common/snsicon-tiktok-blue.png);
}

#sns_link li a:hover.icon-x {
  background-image: url(../common/snsicon-x-blonze.png);
}

#sns_link li a:hover.icon-youtube {
  background-image: url(../common/snsicon-yt-blonze.png);
}

#sns_link li a:hover.icon-instagram {
  background-image: url(../common/snsicon-inst-blonze.png);
}

#sns_link li a:hover.icon-tiktok {
  background-image: url(../common/snsicon-tiktok-blonze.png);
}

/* TEXT LINK */
#text_link {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0 0 15px 0;
}

#text_link li {
  padding: 0;
  margin: 0 10px;
  font-size: 0.84rem;
}

#text_link a {
  padding: 0 0 5px 0;
  border-bottom: 3px dotted var(--color-alpha-0);
}

#text_link a:hover {
  padding: 0 0 5px 0;
  border-bottom: 3px dotted var(--color-page_sub);
}

a.link-copyright {
  display: block;
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
}
/*==================================
* COMMON MENU
==================================*/
#common_menu {
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  opacity: 0;
  transition: 0.4s;
}

#common_menu .menu_modal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding: 30px;
  background-color: var(--color-page_base);
  color: var(--color-page_main);
  text-align: center;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

#common_menu .menu_list {
  min-width: 240px;
  padding: 0 0 75px 0;
  margin: 0;
  background-image: url(../common/logo-official_fc-blue.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 240px;
  font-size: 1.3rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
}

#common_menu .menu_list li {
  padding: 0;
  margin: 30px 0;
}

#common_menu .menu_list a {
  display: inline-block;
  color: var(--color-page_main);
  position: relative;
}

#common_menu .menu_list a:hover {
  color: var(--color-page_sub);
  text-decoration: none;
}

#common_menu .menu_list li.imp a {
  color: var(--color-page_sub);
}

#common_menu .menu_list a:before {
  content: "";
  display: block;
  width: 34px;
  height: 18px;
  background-image: url(../common/icon-selected_ar-blonze.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: -50px;
  top: calc(50% - 10px);
  transition: 0.4s;
  opacity: 0;
}

#common_menu .menu_list a:hover::before {
  right: -45px;
  opacity: 1;
}

/* Click After */
#common_menu.open {
  z-index: 100;
  opacity: 1;
}

/* Close */
#common_menu_close {
  display: block;
  width: 25px;
  height: 27px;
  padding: 0;
  margin: 0;
  background-image: url(../common/icon-close-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: 18px;
  top: 32px;
  cursor: pointer;
  transition: 0.4s;
  transform: scale(1);
}

#common_menu_close:hover {
  background-image: url(../common/icon-close-blonze.png);
  transform: scale(1.2);
}

/*==================================
TRANSLATE
==================================*/
#common_translate {
  display: flex;
  flex-wrap: wrap;
  justify-content: right;
  align-items: center;
  background-color: #fff;
  position: fixed;
  bottom: 90px;
  right: 18px !important;
  cursor: pointer;
  z-index: -1;
  opacity: 0;
  transition: 0.4s;
}

/* Click After */
#common_translate.open {
  z-index: 100;
  opacity: 1;
}

.goog-te-gadget-simple {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 5px 8px !important;
  border: 1px solid #141616 !important;
  border-radius: 6px;
}

.goog-te-gadget-simple a {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.goog-te-gadget-simple .goog-te-menu-value span {
  border: none !important;
}

/*==================================
* COMMON BTN
==================================*/
.btn_area {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 0 0 90px 0;
  position: relative;
}

.btn_area a {
  font-size: 1.1rem;
  font-family: "carrotflower", "sicyubi-hyojunbansho", sans-serif;
  font-weight: 400;
  font-style: normal;
}

a.btn-center {
  padding: 0 0 5px 0;
  margin: 0 auto;
  border-bottom: 3px dotted var(--color-alpha-0);
  text-align: center;
  transform: scale(1);
  opacity: 0.7;
}

a.btn-center:hover {
  border-bottom: 3px dotted var(--color-page_sub);
  transform: scale(1.05);
  opacity: 1;
}

a.btn-left {
  padding-left: 70px;
  background-image: url(../common/btn-arrow_left-blue.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 60px;
  text-align: left;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.7;
}

a.btn-left:hover {
  background-image: url(../common/btn-arrow_left-blonze.png);
  opacity: 1;
}

a.btn-right {
  padding-right: 70px;
  background-image: url(../common/btn-arrow_right-blue.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 60px;
  text-align: right;
  position: absolute;
  right: 0;
  top: 0;
  opacity: 0.7;
}

a.btn-right:hover {
  background-image: url(../common/btn-arrow_right-blonze.png);
  opacity: 1;
}

/* TEXT LINK */
.btn_area-text_center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 45px 0 15px 0;
  text-align: center;
}

.btn_area-text_center a {
  min-width: 60px;
  padding: 0 0 35px 0 !important;
  margin: 0;
  background-image: url(../common/btn-arrow_right-blue.png);
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: 60px;
  border: none !important;
  color: var(--color-page_main) !important;
  font-size: 1.2rem;
  font-family: "carrotflower", "sicyubi-hyojunbansho", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.btn_area-text_center a:hover {
  background-color: var(--color-alpha-0) !important;
  background-image: url(../common/btn-arrow_right-blonze.png);
  background-position: right 40% bottom;
  color: var(--color-page_sub) !important;
}

.btn_area-text_center a.text_link_big,
.btn_area-text_center button.text_link_big {
  min-width: 60px;
  padding: 45px 0 0 0 !important;
  margin: 0;
  background-color: var(--color-alpha-0);
  background-image: url(../common/btn-arrow_big_right-blue.png);
  background-position: center top 2px;
  background-repeat: no-repeat;
  background-size: 57px;
  border: none !important;
  outline: none;
  font-size: 1.1rem;
  font-family: "m-plus-2c", sans-serif;
  font-weight: 500;
  font-style: normal;
  transition: 0.4s;
}

.btn_area-text_center a:hover.text_link_big,
.btn_area-text_center button:hover.text_link_big {
  background-image: url(../common/btn-arrow_big_right-blonze.png);
  background-position: center top;
  color: var(--color-page_sub);
}

/* WIDE BLOCK */
.btn_area-wide_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 30px 0 0 0;
  text-align: center;
}

.btn_area-wide_block a {
  display: block;
  width: 100%;
  padding: 10px 15px !important;
  margin: 0;
  background-color: var(--color-page_main_alpha10);
  border: none !important;
  color: var(--color-page_main) !important;
  border: none;
  font-size: 1rem;
  font-weight: 500;
}

.btn_area-wide_block a:hover {
  padding: 10px 15px;
  background-color: var(--color-page_sub) !important;
  color: var(--color-page_base) !important;
  border: none;
}

/*==================================
PAGINATION
==================================*/
ul.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style: none;
  font-size: 1.4rem;
  font-family: "carrotflower", sans-serif;
  font-weight: 400;
  font-style: normal;
}

ul.pagination li {
  margin: 0 10px;
}

ul.pagination a {
  display: block;
  padding: 0 5px !important;
  border: none !important;
  color: var(--color-page_main) !important;
  transform: scale(1);
  opacity: 0.7;
}

ul.pagination a:hover {
  background-color: var(--color-alpha-0) !important;
  color: var(--color-page_sub) !important;
  transform: scale(1.3);
  opacity: 1;
}

ul.pagination li.selected a {
  opacity: 1;
}

ul.pagination li.prev a {
  display: block;
  width: 35px;
  height: 20px;
  margin-bottom: 5px;
  background-image: url(../common/btn-arrow_short_left-blue.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 30px;
}

ul.pagination li.prev a:hover {
  background-image: url(../common/btn-arrow_short_left-blonze.png);
  background-position: left center;
  transform: scale(1);
  opacity: 1;
}

ul.pagination li.next a {
  display: block;
  width: 35px;
  height: 20px;
  margin-bottom: 5px;
  background-image: url(../common/btn-arrow_short_right-blue.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 30px;
}

ul.pagination li.next a:hover {
  background-image: url(../common/btn-arrow_short_right-blonze.png);
  background-position: right center;
  transform: scale(1);
  opacity: 1;
}

/*==================================
BANNER AREA
==================================*/
.slide-banner .splide__slide img {
  border-radius: 3px;
}

.slide-banner a {
  padding: 0 !important;
  border: none !important;
}

/*==================================
CONTENT WINDOW
==================================*/
.content_window {
  display: block;
  width: 100%;
  padding: 40px;
  margin: 0 auto;
  background-color: var(--color-page_main_alpha10);
  color: var(--color-page_main);
  text-align: center;
}

.content_window h4 {
  padding: 0;
  margin: 5px 0 15px 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.content_window h4.bubble {
  padding: 48px 0 0 0;
  margin: 0 0 15px 0;
  background-image: url(../common/btn-bbs_post-blue.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 47px;
}

/*==================================
ENTRY TITLE
==================================*/
.entry_title_block {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  padding: 0;
  margin: 0 0 30px 0;
  text-align: left;
  color: var(--color-page_main);
  position: relative;
  transition: 0.4s;
}

a:hover.entry_title_block {
  text-decoration: none;
  color: var(--color-page_sub);
}

.entry_title_block.new:before {
  content: "";
  display: block;
  width: 40px;
  height: 24px;
  background-image: url(../common/label-new-blonze.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: -15px;
  top: -30px;
}

.entry_title_block dt {
  width: 20%;
  padding: 0;
  font-size: 1.5rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.02em;
}

.entry_title_block dd {
  width: 80%;
  padding: 0;
  margin: 0;
}

.entry_title_block dd h3 {
  padding: 0;
  margin: 0;
  font-size: 1.1rem;
  line-height: 160%;
}

.entry_title_block dd ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0;
  margin: 2px 0 0 0;
  font-size: 0.96rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}

.entry_title_block dd ul li {
  padding: 0;
  margin: 0 10px 0 0;
  position: relative;
}

.entry_title_block dd ul li.entry_category:before {
  content: "-";
  padding: 0 5px 0 0;
}

.entry_title_block.members li.entry_category:after {
  content: "";
  display: block;
  width: 115px;
  height: 17px;
  background-image: url(../common/label-members-blue.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  right: -130px;
  top: 5px;
}

a:hover.entry_title_block.members li.entry_category:after {
  background-image: url(../common/label-members-blonze.png);
}

/*==================================
ENTRY LIST
==================================*/
.entry_list {
  min-height: 360px;
  margin: 0 0 60px 0;
}

.entry_list .entry_title_block {
  margin: 0 0 30px 0;
}

.category_filter_area + .pagination {
  margin-top: 480px;
}

/*==================================
ENTRY PANEL
==================================*/
.entry_panel {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0;
}

.entry_panel .entry_title_block {
  width: 100%;
  padding: 0;
  margin: 0 auto 60px auto;
}

.entry_panel .entry_title_block:hover {
  margin-left: 0;
}

.entry_panel .entry_title_block.new:before {
  content: "";
  left: -15px;
  top: -40px;
}

.entry_panel .entry_title_block dt {
  width: 100%;
  padding: 0;
  margin: 0;
  background-color: var(--color-page_base);
}

.entry_panel .entry_title_block dt img {
  transition: 0.4s;
  /* opacity: 0.7; */
}

.entry_panel .entry_title_block:hover dt img {
  opacity: 1;
}

.entry_panel .entry_title_block dd {
  width: 100%;
  padding: 15px;
  margin: 0;
}

.entry_panel .entry_title_block dd h3 {
  padding: 0;
  margin: 0;
  font-size: 1rem;
  line-height: 160%;
}

.entry_panel .entry_title_block dd ul {
  margin: 5px 0 0 0;
}

.entry_panel .entry_title_block dd ul li {
  width: 100%;
  margin: 0;
}

.entry_panel .entry_title_block dd ul li.entry_category {
  padding: 0 0 0 22px;
  margin: 8px 0 0 0;
  background-image: url(../common/icon-members_star-blue.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 18px;
  font-size: 0.96rem;
  font-family: "m-plus-2c", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.02em;
  transition: 0.4s;
  opacity: 0.7;
}

.entry_panel a:hover.entry_title_block dd ul li.entry_category {
  background-image: url(../common/icon-members_star-blonze.png);
}

.entry_panel .entry_title_block dd ul li.entry_category:before {
  content: "";
  display: none;
}

.entry_panel .entry_title_block.members li.entry_category:after {
  display: none;
}

/*==================================
ENTRY DETAIL
==================================*/
/* .entry_detail .entry_title_block + .element_block {
  padding-top: 45px;
} */

.entry_detail .entry_title_block + .element_block:before,
.entry_detail .title_area + .element_block:before {
  content: "";
  display: block;
  width: 10%;
  height: 1px;
  background-color: var(--color-page_main);
  position: absolute;
  left: -5%;
  top: 0;
  opacity: 0.5;
}

.entry_detail .element_block {
  padding-top: 45px;
}

/* .entry_detail .title_area + .element_block {
  padding-top: 0;
} */

.entry_detail .element_block h3 {
  padding: 0;
  margin: 0 0 20px 0;
  font-size: 1.16rem;
  font-weight: 500;
}

.entry_detail .element_block h4 {
  padding: 0;
  margin: 0 0 5px 0;
  font-size: 1.1rem;
}

.entry_detail .element_block img {
  width: 100%;
  padding: 0;
  margin: 30px 0 0 0;
}

.entry_detail .element_block img + p {
  margin-top: 30px;
}

.entry_detail .btn_area {
  margin-top: 60px;
}

.entry_detail .element_block + .btn_area {
  margin-top: 150px;
}

.entry_detail .speech_bubble {
  display: inline-block;
  padding: 32px;
  margin: 0 0 15px 0;
  background-color: var(--color-page_main_dark);
  border-radius: 15px;
  position: relative;
}

.entry_detail .speech_bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 85%;
  border-style: solid;
  border-width: 25px 20px 0 0;
  border-color: var(--color-page_main_dark) transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
  transform: skew(50deg);
  transform-origin: top;
}

.entry_detail .speech_bubble h3 {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.entry_detail .speech_bubble .post_name {
  padding: 0;
  margin: 5px 0 0 0;
  text-align: right;
  font-style: italic;
}

.entry_detail .speech_bubble .btn_area-bbs_post {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  margin: 15px 0 0 0;
}

.entry_detail .speech_bubble .btn_area-bbs_post a {
  padding: 15px 55px 15px 0 !important;
  margin: 0;
  background-image: url(../common/btn-bbs_post-blue.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 45px;
  border: none !important;
  color: var(--color-page_main) !important;
  font-size: 1.1rem;
  font-weight: 500;
  text-align: right;
  transform: scale(1);
}

.entry_detail .speech_bubble .btn_area-bbs_post a:hover {
  background-color: var(--color-alpha-0);
  background-image: url(../common/btn-bbs_post-blonze.png);
  color: var(--color-page_sub) !important;
  transform: scale(1.02);
}

.entry_detail .element_block.from_yuika {
  padding: 110px 5% 0 5%;
  margin: 30px auto 0 auto;
  background-image: url(../img/icon-from_yuika.png);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 90px;
}

.entry_detail .element_block.from_yuika h4 {
  margin: 0 0 15px 0;
  text-align: center;
}

/*==================================
ACTION & COMMENT
==================================*/
ul.entry_action {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0;
  margin: 60px 0 45px 0;
  font-size: 0.96rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0;
}

ul.entry_action li a,
ul.entry_action li span {
  display: block;
  min-width: 45px;
  padding: 25px 0 0 0 !important;
  margin: 0 5px;
  border: none !important;
  color: var(--color-page_main);
  background-position: center top;
  background-repeat: no-repeat;
  text-align: center;
  cursor: pointer;
  transition: 0.4s;
}

ul.entry_action li a:hover {
  background-color: var(--color-alpha-0) !important;
}

ul.entry_action li.action-comment a {
  background-image: url(../common/icon-action_comment-off.png);
  background-size: 24px;
}

ul.entry_action li.action-comment a:hover {
  background-image: url(../common/icon-action_comment-on.png);
}

ul.entry_action li.action-comment.selected a {
  background-image: url(../common/icon-action_comment-on.png);
  color: var(--color-important_lv2);
}

ul.entry_action li.action-heart span {
  background-image: url(../common/icon-action_heart-off.png);
  background-size: 22px;
}

ul.entry_action li.action-heart span:hover {
  background-image: url(../common/icon-action_heart-on.png);
}

ul.entry_action li.action-heart.selected span {
  background-image: url(../common/icon-action_heart-on.png);
  color: var(--color-important_lv1);
}

/* COMMENT COMMON */
.comment_area h3 {
  padding: 0;
  margin: 15px 0 0 0;
  font-size: 2rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 100%;
}

.comment_area .comment_post {
  padding: 0;
  margin: 30px 0 0 0;
  position: relative;
}

.comment_area .comment_post h4 {
  padding: 0;
  margin: 0;
  font-size: 1.09rem;
  font-weight: 500;
}

.comment_area .comment_post .poster_caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  margin: 2px 0 0 0;
  list-style: none;
  font-size: 0.96rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.04em;
}

.comment_area .comment_post .poster_caption li {
  padding: 0;
  margin: 0 10px 0 0;
}

.comment_area .comment_post .poster_caption li.number {
  margin: 0 15px 0 0;
}

.comment_area .comment_post .poster_caption li.day:before {
  content: "-";
}

.comment_area .comment_post.member-comment {
  padding: 30px 30px 130px 30px;
  background-color: var(--color-page_main_alpha10);
  background-image: url(../img/icon-from_yuika.png);
  background-position: center bottom 25px;
  background-repeat: no-repeat;
  background-size: 90px;
  border-radius: 15px;
  position: relative;
}

.comment_area .comment_post.member-comment::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 85%;
  border-style: solid;
  border-width: 25px 20px 0 0;
  border-color: var(--color-page_main_alpha10) transparent transparent;
  translate: calc(-50% - 0.4px) 100%;
  transform: skew(50deg);
  transform-origin: top;
}

.comment_area .pagination {
  justify-content: center;
  margin: 60px 0 15px 0;
}

/* ENTRY COMMENT */
#entry_comment {
  padding: 30px;
  margin: 5px 0 0 0;
  background-color: var(--color-page_main_alpha05);
}

/* BBS */
#bbs_comment {
  padding: 15px 5%;
  margin: 0;
  background-color: var(--color-alpha-0);
}

.comment_post.bbs ul.entry_action {
  justify-content: flex-end;
  margin: 0;
  position: absolute;
  bottom: 0;
  right: 0;
}

.comment_post.bbs ul.entry_action li span {
  padding: 0 30px 0 0 !important;
  margin: 0;
  background-position: right center;
  background-repeat: no-repeat;
  text-align: right;
  cursor: pointer;
}

/*==================================
FORM ELEMENT
==================================*/
.entry_detail .element_block.form_notes h4 {
  padding: 0;
  margin: 0 0 10px 0;
  font-size: 1.45rem;
}

.entry_detail .element_block.form_notes h5 {
  padding: 0;
  margin: 25px 0 5px 0;
  font-size: 1.2rem;
}

.entry_detail .element_block.form_notes ul {
  list-style: disc;
  padding-left: 20px;
  font-size: 0.96rem;
  line-height: 160%;
}

.entry_detail .element_block.form_notes ul li {
  padding: 3px 0;
}

/* FORM */
#form_window {
  padding: 40px 25px;
  text-align: left;
  position: relative;
}

.element_block + #form_window {
  margin-top: 45px;
}

#form_window h4 {
  padding: 0 0 0 36px;
  margin: 0 0 20px 0;
  background-image: url(../common/icon-action_comment-off.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 24px;
  font-size: 1.3rem;
  font-weight: 500;
}

#form_window.entry_bbs h4 {
  padding-left: 45px;
  background-image: url(../common/btn-bbs_post-blue.png);
  background-size: 34px;
}

#form_window h5.nickname {
  padding: 0;
  margin: 0;
  color: var(--color-page_main_alpha70);
  font-size: 1.1rem;
  font-weight: 500;
}

#form_window form {
  position: relative;
}

#form_window .form-input .form_block {
  display: block;
  margin: 20px 0 0 0;
}

#form_window .form-input .form_block:first-of-type {
  margin: 0;
}

#form_window .form-input .form_block p {
  padding: 0;
}

#form_window .form-input .form_block label {
  display: block;
  font-size: 1rem;
  margin-left: 3px;
}

#form_window .form-input .form_block input,
#form_window .form-input .form_block textarea,
#form_window .form-input .form_block select,
#form_window .form-input .form_block .input_field_check {
  width: 100%;
  padding: 15px;
  margin: 5px 0 0 0;
  background-color: var(--color-page_base);
  border: none;
  outline: none;
}

#form_window .form-input .form_block .input_field_check {
  background-color: var(--color-page_main_alpha05);
}

#form_window .form-input .form_block textarea {
  min-height: 15rem;
}

#form_window .form-input .form_block input:focus,
#form_window .form-input .form_block textarea:focus {
  background-image: none;
  background-color: var(--color-highlight);
  border: none;
  outline: none;
  color: var(--color-page_main);
}

#form_window .form-input .form_block input::placeholder,
#form_window .form-input .form_block textarea::placeholder {
  color: var(--color-page_main_alpha70);
}

#form_window .form-input .form_block input:focus::placeholder,
#form_window .form-input .form_block textarea:focus::placeholder {
  opacity: 0;
}

#form_window .form-input .form_block .input_field_check:last-of-type {
  margin-bottom: 20px;
}

/* FORM BTN */
.btn_area-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  padding: 0;
  margin: 15px 0 0 0;
  text-align: center;
}

.btn_area-form a.btn-block,
.btn_area-form button.btn-block {
  display: inline-block;
  padding: 0;
  margin: 0 0 0 30px;
  background-color: var(--color-alpha-0);
  color: var(--color-page_main);
  border: none;
  outline: none;
  font-size: 1rem;
  font-weight: 500;
  transition: 0.4s;
}

.btn_area-form a.btn-cancel,
.btn_area-form button.btn-cancel {
  padding: 5px 28px 5px 0;
  background-image: url(../common/icon-close-blue.png);
  background-position: right 50%;
  background-repeat: no-repeat;
  background-size: 20px;
  opacity: 0.5;
}

.btn_area-form a:hover.btn-cancel,
.btn_area-form button:hover.btn-cancel {
  background-image: url(../common/icon-close-blonze.png);
  color: var(--color-page_sub);
  opacity: 1;
}

.btn_area-form a.btn-check,
.btn_area-form button.btn-check {
  padding: 5px 45px 5px 0;
  background-image: url(../common/icon-check-blue.png);
  background-position: right 40%;
  background-repeat: no-repeat;
  background-size: 30px;
}

.btn_area-form a:hover.btn-check,
.btn_area-form button:hover.btn-check {
  background-image: url(../common/icon-check-blonze.png);
  color: var(--color-page_sub);
  opacity: 1;
}

.btn_area-form a.btn-back,
.btn_area-form button.btn-back {
  padding: 5px 40px 5px 0;
  background-image: url(../common/icon-back-blue.png);
  background-position: right 50%;
  background-repeat: no-repeat;
  background-size: 26px;
  opacity: 0.5;
}

.btn_area-form a:hover.btn-back,
.btn_area-form button:hover.btn-back {
  background-image: url(../common/icon-back-blonze.png);
  color: var(--color-page_sub);
  opacity: 1;
}

/* LOGIN */
#form_window.login_window {
  text-align: center;
}

#form_window.login_window h4 {
  padding: 0;
  margin: 0 0 30px 0;
  background-image: none;
  font-size: 2.4rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.06em;
}

#form_window.login_window .form-input .form_block label {
  margin: 0 0 3px 0;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.04em;
}

#form_window.login_window .form-input .form_block input {
  text-align: center;
}

/* LOGIN BTN */
.btn_area-login {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 45px 0 0 0;
  text-align: center;
}

.btn_area-login a.btn-login,
.btn_area-login button.btn-login {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  padding: 0;
  margin: 0 0 30px 0;
  background-color: var(--color-alpha-0);
  color: var(--color-page_main);
  border: 1px solid var(--color-page_main);
  border-radius: 50%;
  outline: none;
  text-align: center;
  font-size: 1.3rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.08em;
  transition: 0.4s;
}

.btn_area-login a:hover.btn-login,
.btn_area-login button:hover.btn-login {
  background-color: var(--color-page_main);
  color: var(--color-page_base);
}

/*==================================
ERROR
==================================*/
.error_msg {
  display: block;
  width: 100%;
  margin: 15px 0 -10px 0;
  color: var(--color-page_base);
  font-size: 0.84rem;
  text-align: left;
}

.error_msg span {
  padding: 3px 10px 3px 20px;
  background-color: var(--color-page_sub_alpha80);
  border-radius: 0 30px 30px 0;
  position: relative;
  z-index: 1;
}

.error_msg:before {
  content: "!";
  padding: 3px 15px;
  margin: 0 -10px 0 0;
  border-radius: 30px;
  background-color: var(--color-page_sub);
  position: relative;
  z-index: 2;
}

.login_window .error_msg {
  margin-top: 0;
  text-align: center;
  position: absolute;
  top: -30px;
}

.contact_form .error_msg {
  margin: 0 0 -5px 0;
}

/* ERROR PAGE */
.error_window {
  margin-bottom: 60px;
}

.error_window h3 {
  padding: 0;
  margin: 0 0 15px 0;
  font-size: 1.3rem;
  font-weight: 500;
}

/*==================================
ITEM DETAIL
==================================*/
.entry_detail #item_detail_block {
  margin-top: 45px;
}

#item_detail_block img {
  width: 100%;
  height: auto;
  padding: 0;
  margin: 0 0 30px 0;
}

#item_detail_block .item-release_date {
  padding: 0;
  margin: 40px 0 10px 0;
  font-size: 0.96rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 150%;
}

#item_detail_block h3 {
  padding: 0;
  margin: 0;
  font-size: 1.5rem;
  letter-spacing: 0.04em;
}

#item_detail_block .item-track_list {
  margin: 15px 0 60px 0;
  font-size: 0.96rem;
}

#item_detail_block .item-track_list ol {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-left: 0;
  list-style: decimal;
}

#item_detail_block .item-track_list ol li {
  padding: 0;
  margin: 10px 0 0 0;
  text-align: left;
  list-style-position: inside;
}

#item_detail_block + .btn_area {
  margin-top: 60px;
}

/*==================================
VIDEO
==================================*/
/* VIDEO COMMON */
.video-item {
  margin: 0;
  position: relative;
  width: 100%;
}

.video-item .click-trigger {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  cursor: pointer;
  background: transparent;
}

.video-item.is-playing .click-trigger {
  display: none;
}

.video-item iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 3px;
}

.video-item + .element_block {
  padding-top: 25px;
}

dl#video_list {
  width: 100%;
}

dl#video_list dt {
  width: 100%;
  padding: 0;
  margin: 0;
}

dl#video_list dd {
  width: 100%;
  padding: 15px 0 60px 0;
  margin: 0;
}

dl#video_list dd h3 {
  font-size: 1.1rem;
}

.element_block p + .video-item {
  margin: 30px 0;
}

#video_list + .pagination + .btn_area-wide_block {
  margin-top: 60px;
}

/*==================================
CATEGORY FILLTER
==================================*/
.category_filter_area {
  margin: -30px 0 60px 0;
}

.category_filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  margin: 0;
  position: relative;
}

.category_filter .filter_pulldown {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0 0 0 30px;
  margin: 0;
  width: 180px;
  height: 40px;
  background-color: var(--color-page_main_dark);
  background-image: url(../common/icon-pulldown-blue.png);
  background-position: left 18px top 40%;
  background-repeat: no-repeat;
  background-size: 14px;
  border-radius: 10px;
  color: var(--color-page_main);
  font-size: 0.83rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 100%;
  cursor: pointer;
  transition: 0.4s;
  z-index: 20;
}

.category_filter .filter_pulldown.selected {
  background-color: var(--color-page_base);
  border-radius: 10px 10px 0 0;
  color: var(--color-page_main);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
}

.category_filter .filter_pulldown:hover,
.category_filter .filter_pulldown.selected:hover {
  background-color: var(--color-page_main_dark);
}

.category_filter ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 180px;
  padding: 0;
  margin: 0;
  background-color: var(--color-page_base);
  color: var(--color-page_main);
  list-style: none;
  position: absolute;
  top: 40px;
  z-index: 10;
  display: none;
  font-size: 0.8rem;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.07);
}

.category_filter ul li {
  padding: 0;
  margin: 0;
  text-align: center;
  border-top: 2px dotted var(--color-page_main_alpha10);
}

.category_filter ul li a {
  display: block;
  padding: 5px 15px !important;
  border: none !important;
  color: var(--color-basic);
  cursor: pointer;
  transition: 0.4s;
}

.category_filter ul li.selected a,
.category_filter ul li a:hover {
  background-color: var(--color-page_main_dark);
  color: var(--color-page_main);
  text-decoration: none;
}
/*==================================
PAGE - INDEX
==================================*/
#mainvisual_area {
  padding: 0;
  margin: 0 3% 60px 3%;
  background-color: var(--color-page_base);
  background-image: url(../img/mainvisual2026.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  aspect-ratio: 1.618 / 1;
  border-radius: 3px;
}

/*==================================
PAGE - LOGIN
==================================*/
.login_window {
  margin-bottom: 30px;
}
#content-login ul.text_link-login {
  display: block;
  text-align: center;
  font-size: 0.96rem;
}

#content-login ul.text_link-login li a {
  display: inline-block;
  padding: 10px 0 5px 0;
  border-bottom: 3px dotted var(--color-alpha-0);
  color: var(--color-page_main) !important;
}

#content-login ul.text_link-login li a:hover {
  background-color: var(--color-alpha-0) !important;
  border-bottom: 3px dotted var(--color-page_sub);
  color: var(--color-page_sub) !important;
}

#content-login ul.text_link-login + .btn_area-text_center {
  margin: 30px 0 90px 0;
}

/*==================================
PAGE - PROFILE
==================================*/
#profile_photo {
  width: 100%;
  padding: 0;
  margin: 0 0 30px 0;
  aspect-ratio: 4 / 3;
  background-image: url(../img/photo_profile.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 3px;
}

/*==================================
PAGE - DISCOGRAPHY
==================================*/
.grid_discography {
  list-style: none;
  padding: 0;
  margin: -30px 0 60px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.grid_discography li {
  display: flex;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  cursor: pointer;
  transition: 0.2s;
  z-index: 1;
}

.grid_discography li:hover {
  border-radius: 3px;
  box-shadow: 0 0 45px var(--color-page_main_alpha70);
  transform: scale(1.04);
  z-index: 2;
}

.grid_discography li a {
  padding: 0 !important;
  border: none !important;
}

/*==================================
PAGE - MYPAGE
==================================*/
#content-mypage h3 {
  padding: 0;
  margin: 5px 0 15px 0;
  font-size: 2.4rem;
  font-family: "futura-pt", sans-serif;
  font-weight: 300;
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 100%;
}

#mypage-message_area {
  display: block;
  padding: 30px 45px;
  margin: 0 0 30px 0;
  background-color: var(--color-page_main);
  color: var(--color-page_base);
}

#mypage-message_area a {
  border-bottom: 2px dotted var(--color-page_base) !important;
  color: var(--color-page_base) !important;
}

#mypage-message_area a:hover {
  background-color: var(--color-alpha-0) !important;
  border-bottom: 2px dotted var(--color-highlight) !important;
  color: var(--color-highlight) !important;
}

#mypage-membership_area {
  padding: 45px 30px;
  margin: 0 auto 30px auto;
}

#mypage-membership_area dl {
  padding: 0;
  margin: 25px 0 0 0;
  font-size: 1.09rem;
}

#mypage-membership_area dl dt {
  padding: 0;
  margin: 20px 0 2px 0;
  font-weight: 500;
}

#mypage-membership_area #memberscard {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  padding: 6%;
  margin: 0;
  background-color: var(--color-page_base);
  border-radius: 10px;
  aspect-ratio: 1.618 / 1;
  position: relative;
}

#mypage-membership_area #memberscard span {
  padding: 0;
  margin: 0;
  font-size: 0.8rem;
  font-family: "carrotflower", sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.2em;
  line-height: 100%;
  z-index: 10;
}

/* CARD SELECT BTN */
#mypage-membership_area .btn-select_card {
  display: block;
  margin: 15px 0 45px 0;
  text-align: center;
}

#mypage-membership_area .btn-select_card a {
  padding: 5px 30px 5px 0;
  background-image: url(../common/icon-change-blue.png);
  background-position: right center;
  background-repeat: no-repeat;
  background-size: 20px;
  border: none !important;
  color: var(--color-page_main) !important;
  font-size: 0.84rem;
}

#mypage-membership_area .btn-select_card a:hover {
  margin-right: -5px;
  background-color: var(--color-alpha-0) !important;
  background-image: url(../common/icon-change-blonze.png);
  color: var(--color-page_sub) !important;
}

#mypage-stamp_area ul.stamp_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: left;
  align-items: center;
  padding: 0;
  margin: 30px 0 0 0;
  list-style: none;
}

#mypage-stamp_area ul.stamp_list li {
  width: calc((100% - 20px) / 3);
  padding: 0;
  margin: 0 10px 10px 0;
  border-radius: 3px;
  background-color: var(--color-page_base);
  aspect-ratio: 1 / 1;
}

#mypage-stamp_area ul.stamp_list li:nth-child(3n) {
  margin: 0 0 10px 0;
}

#mypage-stamp_area ul.stamp_list li a {
  display: block;
  height: 0;
  padding-bottom: 100%;
  margin: 0 auto;
  border: none !important;
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: 0.4s;
  opacity: 0.7;
}

#mypage-stamp_area ul.stamp_list li a:hover {
  opacity: 1;
}

#mypage-stamp_area ul.stamp_list li a img {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  object-fit: cover;
  object-position: 50% 50%;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 0;
}

#mypage-stamp_area + .btn_area {
  margin-top: 90px;
}

#mypage-stamp_area .embed_img {
  margin-top: 45px;
}

#mypage-stamp_area .embed_img img {
  width: 100%;
  padding: 0;
  margin: 0;
}

#mypage-stamp_area .embed_img + .btn_area-wide_block {
  margin-top: 30px;
}

/* STAMP GET */
#mypage-stamp_area.stamp-get .embed_img {
  margin: 30px auto 0 auto;
  border-radius: 3px;
  overflow: hidden;
}

#mypage-stamp_area.stamp-get .embed_img img {
  transform: scale(1.1);
  filter: blur(15px);
}

#mypage-stamp_area.stamp-get .btn_area-text_center {
  margin-top: 45px;
}

/* CARD SELECT */
#mypage-card_area + .btn_area {
  margin-top: 90px;
}

#select_card form {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin: 45px 0 0 0;
}

#select_card .card_face {
  display: block;
  width: 100%;
  padding: 10px;
  margin: 0;
  color: var(--color-page_main);
  font-size: 1rem;
}

#select_card .card_face img {
  width: 100%;
  height: auto;
  margin: 0;
  border-radius: 8px;
  border: 3px solid var(--color-alpha-0);
  transition: 0.4s;
  /* opacity: 0.7; */
}

#select_card .card_face img:hover {
  opacity: 1;
}

#select_card .card_face p {
  width: 100%;
  padding: 10px;
  text-align: center;
}

#select_card .card_face label {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  padding: 0;
  margin: 0;
  transition: 0.4s;
}

#select_card input[type="radio"] {
  display: none;
}

#select_card .card_face label:hover {
  color: var(--color-important_lv1);
}

#select_card input[type="radio"]:checked + label,
#select_card input[type="radio"].switch:checked + input + label {
  color: var(--color-important_lv1);
}

#select_card input[type="radio"]:checked + label img {
  border: 3px solid var(--color-important_lv1);
  opacity: 1;
}

#mypage-card_area h4 {
  margin: 30px 0 5px 0;
}

/*==================================
CARD
==================================*/
/* CARD DESIGN 01 */
#mypage-membership_area #memberscard.card-type01 {
  background-color: var(--color-page_base);
}

#mypage-membership_area #memberscard.card-type01:before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/memberscard-01_bg.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 0;
  animation: ani-memberscard-fade_bg 40s ease-in-out 0s infinite;
  z-index: 1;
}

#mypage-membership_area #memberscard.card-type01:after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url(../img/memberscard-01_element.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}

#mypage-membership_area #memberscard.card-type01 span {
  color: var(--color-page_sub);
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* CARD DESIGN 02 */
#mypage-membership_area #memberscard.card-type02 {
  justify-content: flex-end;
  align-items: center;
  background-color: var(--color-page_base);
  background-image: url(../img/memberscard-02.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
}

#mypage-membership_area #memberscard.card-type02 span {
  color: var(--color-page_sub);
  text-align: right;
}

/* CARD DESIGN 03 */
#mypage-membership_area #memberscard.card-type03 {
  background-color: var(--color-page_base);
  background-image: url(../img/memberscard-03.jpg);
  background-position: center top;
  background-repeat: no-repeat;
  background-size: 100%;
}

#mypage-membership_area #memberscard.card-type03 span {
  color: var(--color-page_main_dark);
  font-family: "futura-pt", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* CARD ANI */
@keyframes ani-memberscard-fade_bg {
  0% {
    background-position: center top;
    background-size: 100%;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  25% {
    opacity: 1;
  }
  34% {
    background-position: center top;
    background-size: 120%;
    opacity: 0;
  }
  35% {
    background-position: center bottom;
    background-size: 100%;
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  69% {
    background-position: center bottom;
    background-size: 120%;
    opacity: 0;
  }
  70% {
    background-position: center center;
    background-size: 100%;
    opacity: 0;
  }
  75% {
    opacity: 1;
  }
  95% {
    opacity: 1;
  }
  100% {
    background-position: center center;
    background-size: 120%;
    opacity: 0;
  }
}

/*==========================================*/
.fix {
  overflow: hidden;
  zoom: 1;
}

.none {
  display: none;
}

.display_sp {
  display: block !important;
}

.display_pc {
  display: none !important;
}