/*layout*/
@charset "utf-8";
body { background: linear-gradient(to bottom, #FFC8DD, #FFF0F5 calc(100% - 800px)); padding-top: 80px;  }
.contents-width { width: 90%; max-width: 1200px; margin: 0 auto; }

@media screen and (max-width: 1000px) {
  body { padding-top: 0; }
}
.contents-width-l { width: 90%;  margin: 0 auto; }
.contents-width { width: 90%; max-width: 1210px;  margin: 0 auto; }

.header { background: #FFF; border-bottom: 1px solid; padding: 1rem 2rem; display: flex; align-items: center; position: fixed; top: 0; left: 0; right: 0; margin: auto; z-index: 9999; }
.header .sitetitle { margin-right:2em; width: 230px; }
.header .sitetitle img { width: 100%; height: auto; display: block; } 
.gnav { display: flex; align-items: center; justify-content: space-between; flex-grow: 1; }
.gnav .menu  { display: flex; align-items: center;  font-size: .875rem; font-weight: bold; margin-right: auto; }
.gnav .menu > li { margin-right: 2em; }
.gnav .tools { display: flex; align-items: center; }

.head-search { background: #EBEBEB; border-radius: 10px; width: 58px; height: 48px; display: flex; align-items: center; justify-content: center; border: none; padding: 0 1em; cursor: pointer;}
.btn-heade-memeber,
.btn-head-login{ font-size: .8125rem; font-weight: bold; border: 2px solid;  border-radius: 10px; margin-left: 10px; height: 48px; display: flex; align-items: center; justify-content: center; padding: 0 1em; white-space: nowrap; }

.btn-heade-memeber { color: #FFF; background:#FF49AE;  }
.btn-heade-memeber span{ font-size: .8em; vertical-align: baseline; }
.btn-head-login { color: #FF49AE; background: #FFF0F5; }
.btn-head-login .icon { margin-right: .5em; }

.header .gtranslate_wrapper { font-size: .875rem; margin-right: 1em; font-family: 'Montserrat', sans-serif; height: 2em; line-height: 2; }
.header .glink + .glink::before { content: '/'; margin: 0 .3em; font-weight: normal; }

.btn-head-member-wrap { position: relative; }
.btn-head-member-sub { position: absolute; display: none; top: 100%; right: 0; margin: auto; background: #FFF; padding: 1rem; border-radius: 10px; width: fit-content; box-shadow: 0 2px 5px rgba(0,0,0,.3);}
.btn-head-member-sub a { display: block; font-size: .85rem; padding: .3em 0;  width: 9em; font-weight: bold; }


@media screen and (max-width: 1450px) {
  .header .sitetitle { width: 200px; }
}
@media screen and (max-width: 1365px) {
  .btn-head-login .icon { display: none; }
  .header .sitetitle { width: 12%; min-width: 120px; }
  .header .sitetitle img { width: 100%; display: block; }
  .gnav .menu > li { margin-right: 1.5em; }
}

@media screen and (max-width: 1280px) {
  .header { padding: 1rem; }
  .btn-head-login { background: none; border: none; flex-direction: column; padding: 0; }
  .btn-head-login .icon { display: block; width: fit-content; margin: 0 auto;  }
  .header .sitetitle{ margin-right: 0; }
  .gnav .menu  { font-size: .8135rem; justify-content: space-around; flex-grow: 1; }
  .gnav .menu > li { margin-right: 0; }
}
@media screen and (max-width: 1000px) {
  .header { justify-content: space-between; width: 100%; left: 0; right: 0; margin: auto; border: none; z-index: 9999; box-shadow: 0 0 2px rgba(0,0,0,.2); padding: 1vw 1.5vw;  position: relative; }
  .gnav .menu { display: none; }
  .gnav .tools { margin-left: auto; }
  .head-search { display: none; }
  .btn-heade-memeber { padding: 0 .5em; }
}

@media screen and (max-width: 768px) {
  .header { padding: .8rem 1rem; }
  .header .gtranslate_wrapper { font-size: .7rem; margin-right: 5px;white-space: nowrap; }
  .btn-heade-memeber { font-size: .625rem; height: 30px; margin-left: 5px;padding: .5em; display: block; line-height: 1.5; height: auto; text-align: center; }
  .btn-heade-memeber span { display: block; }
  .btn-head-login { font-size: .625rem; height: 32px; margin-left: 5px; }
  .btn-head-login .icon { width: 20px; height: 20px; }
}



.menu-btn { position: fixed; right: 5%; bottom: 4.5rem; border-radius: 50%;  width: 50px; height: 50px; background: #181818;border: none;  }
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after { content: ''; display: block; height: 2px; width: 20px; inset: 0; margin: auto; background: #FFF; position: absolute; }
.menu-btn span { background: linear-gradient(to right, #FFF 70%, transparent 70%); }
.menu-btn span:before { transform: translateY(-8px); }
.menu-btn span:after { transform: translateY(8px); }
	
.menu-btn.open span {
    background: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
.menu-btn.open span::before {
    transform: rotate(45deg);
}
.menu-btn.open span::after {
    transform: rotate(-45deg);
}

.menu-content { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 80; background-color: #333333; transition: all 0.5s; padding: 40px 5%; color: #FFF; overflow-y: scroll; }
.menu-content.open {
    left: 0;/*メニューを画面内へ*/
}

.menu-content .inner { padding: 0 10px; margin-bottom: 2rem; }
.menu-content .title { font-family: 'Montserrat', sans-serif; color: #FF49AE; font-size: 1.25rem; font-weight: 600; margin-bottom: .5em; text-transform: uppercase; }
.menu-content .primary-menu { font-size: 1.125rem; margin-bottom: 1.5em; font-weight: 500;  }
.menu-content .primary-menu .icon { margin-right: 1em; vertical-align: middle; }
.menu-content .primary-menu > li { margin-bottom: .5em; }
.menu-content .secondary-menu { border-top: 1px solid #666666; margin-bottom: 2em; }
.menu-content .secondary-menu > li { border-bottom: 1px solid #666666; }
.menu-content .secondary-menu a { display: block; padding: .7em 0; font-weight: 500; }

.menu-content .title-sns { font-weight: 600; font-family: 'Montserrat', sans-serif; font-size: 2rem; color: #FF49AE; font-style: italic; margin-bottom: .5em; }


.menu-content .list-sns-x { margin-bottom: 2em ; font-weight: 500; }
.menu-content .list-sns-x > li { margin-bottom: 1em; }
.menu-content .list-sns-x .icon { margin-right: .5em; vertical-align: middle; }
.menu-content .list-sns-sub { display: grid; grid-template-columns: repeat(3, 2rem); gap: 2rem; }


.menu-content .controls { display: flex; }
.menu-btn-close { border-radius: 50%;  width: 50px; height: 50px; background: #181818;border: none; white-space: nowrap; overflow: hidden; text-indent: 200%; position: relative; }
.menu-btn-close::before,
.menu-btn-close::after { content: ''; width: 20px; height: 2px; display: block; background: #FFF; position: absolute; inset: 0; margin: auto; }
.menu-btn-close::before { transform: rotate(45deg); }
.menu-btn-close::after { transform: rotate(-45deg); }

.menu-bookmark { flex-grow: 1; margin-left: 1em; display: flex; justify-content: space-between; height: 50px; align-items: center; padding: 0 2em; border-radius: 2em; background: #FFF; }
.menu-bookmark img { display: block; }


.foot-sns { margin-top: 60px; }
.foot-sns .title { font-size: 2.5rem; color: #FF49AE; font-family: 'Montserrat', sans-serif; font-style: italic; font-weight: 600; text-align: center; }
.foot-sns .list { margin: 1em 0 2em; display: flex; align-items: center; justify-content: center; }
.foot-sns .list .x { display: flex; justify-content: center; font-weight: bold; }
.foot-sns .list .x img { display: inline-block; margin-right: .5em; }
.foot-sns .list a { margin: 0 .5em; }
.foot-sns .list .other { display: flex; align-items: flex-start; }
@media screen and (max-width: 768px) {
  .foot-sns .list { flex-direction: column; }
  .foot-sns .list .x { font-size: .75rem; }
  .foot-sns .list .x img { width: 2em; height: auto; }
  .foot-sns .list .other { margin-top: 2em; }
  .foot-sns .list a { margin: 0 1em; }
}

.footer { background: #333333; border-radius: 60px 60px 0 0; color: #FFF; padding: 50px 0 40px; position: relative; }
.footer .inner { width: calc(100% - 120px); margin: 0 auto; }
.footer::before { content: ''; width: 700px; height: 360px; position: absolute; right: 0; bottom: 0; margin: auto; display: block; background: url("../img/common/foot-bg.svg") no-repeat left top / 103% auto; }
.footer-head { display: flex; }
.footer-head p { line-height: 1.6; }
.footer-head .logo { margin-right: 2.5rem; width: 300px; }
.footer-nav { display: flex; font-size: .8215rem; margin-top: 3rem;  }
.footer-nav .menu { margin-right: 3em; }
.footer-nav .title { font-weight: 600; font-family: 'Montserrat', sans-serif; color: #FF49AE; text-transform: uppercase; margin-bottom: 1em;  }

@media screen and (max-width: 1366px) {
  .footer .inner { width: 90%; }
}

@media screen and (max-width: 1000px) {
  .footer { padding-bottom: 8rem;}
}
@media screen and (max-width:900px) {
  .footer-head p { font-size: .75rem; width: fit-content; margin: 0 auto;  }
  .footer-head .logo { width: 245px; display: block; margin: 0 auto; }
  .footer::before  { display: none; }
  
}
@media screen and (max-width:768px) {
  .footer-head { flex-direction: column; }
  .footer-head .logo { margin: 0 auto 2rem; }
  
  .footer-nav { width: fit-content; margin: 2em auto; }
  .footer-nav .menu { text-align: center; margin: 0; }
  .footer-nav .menu ul > li + li { margin-top: 1em; }
  .footer-nav .menu.sp-hidden { display: none; }
  
}

.copyright { font-size: .75rem; margin-top: 4em; }
@media screen and (max-width:768px) {
  .copyright { text-align: center; }
}


.sp-bookmark { display: none; }
@media screen and (max-width:1000px) {
  .sp-bookmark { display: block; position: fixed; left: 0; bottom: 0; right: 0; margin: auto; background: #FFF; padding: 10px 15px; width: 100%; z-index: 99; box-shadow: 0 0 2px rgba(0,0,0,.2); }
  .sp-bookmark .menu { display: flex; align-items: center; justify-content: space-around; }
  .sp-bookmark .menu a img { display: block; }
  .foot-search { background: none; border: none; width: 30px; height: 30px; padding: 0; }
  .foot-login { display: flex; flex-direction: column; align-items: center; justify-content: center; color: #FF49AE; font-size: .625rem; font-weight: bold; }
  .foot-login-wrap { position: relative; }
  .foot-login-submenu { position: absolute; bottom: 100%; right: 0; width: 13em; font-size: .9rem; background: #FFF; border-radius: 10px; padding: 1em; z-index: 10; box-shadow: 0 0 3px rgba(0,0,0,.5); }
  .foot-login-submenu a { display: block; font-weight: bold; color: #000; }
}

.recaptcha-text { font-size: .625rem; margin-top: 1em; line-height: 1.5;}
.grecaptcha-badge { visibility: hidden; }


.column-wrapper { display: grid; grid-template-columns: minmax(0, 1fr) 270px; padding: 0; align-items: flex-start;  position: relative; }
.column-wrapper::after { content: ''; width: 100%; height: 50px; background: linear-gradient(to bottom, transparent, #FFF0F5); position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }

.column-left { padding: 25px 0 50px; }
.column-left-inner { width: 90%; max-width: 1400px; margin: 0 auto; }

.column-side { padding: 25px 1rem 50px; position: sticky; top: 80px;  max-height: calc(100vh - 80px); overflow: scroll; 
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE, Edge */
}
.column-side::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}
.column-side .banner * { max-width: 100%!important; height: auto; }


@media screen and (max-width: 1200px) {
  .column-left-inner { width: 96%; }
}
@media screen and (max-width: 1000px) {
  .column-wrapper::after { display: none; }
  .column-wrapper { display: block; }
  .column-left-inner { width: 90%; }
  .column-side  { padding: 0; width: 90%; margin: 0 auto; display: none; }
}

.age-confirmation { background: rgba(0,0,0,.8); width: 100%; height: 100%; position: fixed; inset: 0; margin: auto; z-index: 999999; display: flex; align-items: center; justify-content: center; display: none; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.age-confirmation .inner { background: #FFF; text-align: center; border-radius: 10px; max-width: 480px; width: 90%; padding: 2rem 0 2.5rem; }
.age-confirmation .msg { margin: 1em 0 .5em; line-height: 1.7;  }
.age-confirmation .question { font-size: 1.5rem;font-weight: 500;  }
.age-confirmation .buttons { margin-top: 1em; display: flex; align-items: center; justify-content: center; }

.age-confirmation .buttons .yes { background:  #FF49AE; border-radius: 10px; padding: .5em 1em ; color: #FFF; border: none; font-size: 1.25rem; font-weight: 500; cursor: pointer; }
.age-confirmation .buttons .no { background: none; color: #FF49AE; border: none; padding: .5em; margin-left: 2em; font-weight: 500; cursor: pointer; }
@media screen and (max-width: 768px) {
  .age-confirmation .msg { font-size: .8135rem; }
  .age-confirmation .question { font-size: 1.2rem; }
  
  .age-confirmation .buttons .yes { font-size: 1rem; }
}


.unlogin-hidden { background: rgba(0,0,0,.8); width: 100%; height: 100%; position: fixed; inset: 0; margin: auto; z-index: 98; display: flex; align-items: center; justify-content: center; display: flex; backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px);  }
.unlogin-hidden .inner { background: #FFF; text-align: center; border-radius: 10px; max-width: 480px; width: 90%; padding: 2rem 0 2.5rem; }
.unlogin-hidden .msg { margin: 1em 0 .5em; line-height: 1.7;  }
.unlogin-hidden .buttons { margin-top: 1em; display: flex; align-items: center; justify-content: center; }

.unlogin-hidden .buttons .register { background:  #FF49AE; border-radius: 10px; padding: .5em 1em ; color: #FFF; border: none; font-weight: 500; cursor: pointer; }

@media screen and (max-width: 768px) {
  .unlogin-hidden .msg { font-size: .8135rem; }
}