@charset "UTF-8";

/* ヘッダー下メニューカスタム */
.mod-subMenu_subNav_item__child {
  background: #F2F9FB;
}
.mod-subMenu_subNav_item__child ul{
display: flex;
flex-wrap: wrap;
}
.mod-subMenu_subNav_item__child ul li a{
position:relative;
text-indent: -.75em;
}
.mod-subMenu_subNav_item__child ul li a::before{
content:"";
display: inline-block;
width:.25em;
height:.25em;
background: #000;
border-radius:50%;
margin: .25em .5em .25em 0;
}
@media print, screen and (min-width: 768px) {
  .mod-subMenu_subNav.is-large{
    min-width:500px;
  }
  .mod-subMenu_subNav.is-medium{
    min-width:320px;
  }
  .mod-subMenu_subNav_item__child {
    border-top: 1px solid #eaeced;
  }
.mod-subMenu_subNav_item__child ul:not(.is-single) li{
   width:calc(100% / 3);
  }
  .mod-subMenu_subNav_item__child ul li a {
    font-size: 13px;
    padding: 12px 20px 12px 30px;
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .mod-subMenu_subNav_item__child ul li{
   width:calc(100% / 2);
  }
  .mod-subMenu_subNav_item__child ul li a{
    padding: 1.6vw 1.6vw 1.6vw 5.3333333333vw;
  }
  .mod-subMenu_subNav_item__child ul li a {
    font-size: 12px;
    font-size: 3.2vw;
    display: block;
  }
}

.menu {
  width: 100%;
  background-color: #fff;
  position: fixed;
  z-index: 40;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: 0.5s ease;
  transition: 0.5s ease;
  top: 0;
}

.menu_inner {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  background: #fff;
}

@media print, screen and (min-width: 768px) {
  .menu_inner {
    width: 100%;
    min-width: 1000px;
    margin: auto;
    padding: 0 20px;
    height: 74px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_inner {
    width: 100%;
    height: 12vw;
    position: relative;
  }
}
@media only screen and (max-width: 767px) {
  .menu_ttl {
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
  }
}
.menu_ttl > a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

@media only screen and (max-width: 767px) {
  .menu_ttl > a {
    height: 100%;
    position: relative;
    padding: 0 5.3333333333vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_mainTtl {
    font-size: 17px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_mainTtl {
    font-size: 16px;
    font-size: 4.2666666667vw;
  }
  .menu_mainTtl img {
    width: auto;
    max-width: none;
    height: 10vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav {
    margin-left: auto;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .menu_nav {
    position: absolute;
    width: 100%;
    bottom: 100%;
    top: auto;
    left: 0;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
    background-color: #fff;
    z-index: 3;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav_wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav_list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
}
@media only screen and (max-width: 767px) {
  .menu_nav_list {
    padding: 2.6666666667vw 2.6666666667vw 0;
  }
}
.menu_nav_item {
  position: relative;
  line-height: 1.6;
}
@media print, screen and (min-width: 768px) {
  .menu_nav_item {
    font-size: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_nav_item {
    font-size: 14px;
    font-size: 3.7333333333vw;
    padding: 2.1333333333vw 0;
  }
}

@media print, screen and (min-width: 768px) {
  .menu_nav_item + .menu_nav_item {
    margin-left: 25px;
  }
}
.menu_nav_item [data-trigger=dropdown] {
  position: relative;
  cursor: default;
}

@media print, screen and (min-width: 768px) {
  .menu_nav_item [data-trigger=dropdown] {
    padding-right: 20px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_nav_item [data-trigger=dropdown] {
    padding-right: 5.3333333333vw;
  }
}
.menu_nav_item [data-trigger=dropdown]::after {
  content: "";
  position: absolute;
  display: block;
  -webkit-transform: translateY(-50%) rotate(135deg);
  transform: translateY(-50%) rotate(135deg);
  right: 0;
}

@media print, screen and (min-width: 768px) {
  .menu_nav_item [data-trigger=dropdown]::after {
    top: calc(50% - 2px);
    width: 8px;
    height: 8px;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    -webkit-transition: all 0.2s ease;
    transition: all 0.2s ease;
  }
}
@media only screen and (max-width: 767px) {
  .menu_nav_item [data-trigger=dropdown]::after {
    top: calc(50% - 0.53333vw);
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-top: 0.5333333333vw solid #999;
    border-right: 0.5333333333vw solid #999;
  }
}
.menu_nav_item [data-trigger=dropdown]:hover::after {
  border-color: #00b2ab;
}

@media only screen and (max-width: 767px) {
  .menu_nav_item [data-trigger=dropdown].active::after {
    top: calc(50% + 0.53333vw);
    border-color: #00b2ab;
    -webkit-transform: translateY(-50%) rotate(-45deg);
    transform: translateY(-50%) rotate(-45deg);
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav_item:hover .menu_subNav {
    -webkit-transform: translate(-15px, 0);
    transform: translate(-15px, 0);
    -webkit-transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    opacity: 1;
    visibility: visible;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav_item.border {
    border-left: 1px solid #e0e0e0;
    padding-left: 25px;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav_item.border .menu_subNav {
    -webkit-transform: translate(10px, 10px);
    transform: translate(10px, 10px);
  }
}
@media print, screen and (min-width: 768px) {
  .menu_nav_item.border:hover .menu_subNav {
    -webkit-transform: translate(10px, 0);
    transform: translate(10px, 0);
  }
}
@media only screen and (max-width: 767px) {
  .menu_close {
    cursor: pointer;
    position: absolute;
    bottom: -13.3333333333vw;
    right: 3.3333333333vw;
    width: 11vw;
    height: 11vw;
  }
  .menu_close::before, .menu_close::after {
    content: "";
    display: block;
    position: absolute;
    width: 0.5333333333vw;
    height: 10.6666666667vw;
    top: 50%;
    left: 50%;
    background-color: #fff;
    pointer-events: none;
    z-index: 5;
  }
  .menu_close::before {
    -webkit-transform: translate(-50%, -50%) rotate(-45deg);
            transform: translate(-50%, -50%) rotate(-45deg);
  }
  .menu_close::after {
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
            transform: translate(-50%, -50%) rotate(45deg);
  }
}
@media only screen and (max-width: 767px) {
  .menu_scroll {
    overflow-y: scroll;
    max-height: 80vh;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_scroll_inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
  }
}
@media only screen and (max-width: 767px) {
  .menu_scroll_inner {
    padding: 0 4vw 8vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_btn {
    margin-left: 35px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_btn {
    margin-top: 8vw;
  }
}
.menu_btn_list {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

@media only screen and (max-width: 767px) {
  .menu_btn_list {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
  }
}
.menu_btn_item a {
  display: inline-block;
  text-align: center;
  border-width: 2px;
  border-style: solid;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
  line-height: 1.3;
  text-decoration: none;
}

@media print, screen and (min-width: 768px) {
  .menu_btn_item a {
    font-size: 14px;
    padding: 6px 20px 7px;
    border-radius: 18px;
    min-width: 120px;
    -webkit-transition: 0.2s ease;
    transition: 0.2s ease;
  }
}
@media only screen and (max-width: 767px) {
  .menu_btn_item a {
    font-size: 14px;
    font-size: 3.7333333333vw;
    padding: 1.8666666667vw 5.3333333333vw 1.6vw;
    border-radius: 4.8vw;
    min-width: 41.0666666667vw;
  }
}
.menu_btn_item.trial a {
  color: #333;
  border-color: #d1d1d1;
  background-color: #fff;
}

.menu_btn_item.trial a:hover {
  background-color: #333;
  border-color: #333;
  color: #fff;
}

.menu_btn_item.buy a {
  border-color: #00b2ab;
  background-color: #00b2ab;
  color: #fff;
}

@media print, screen and (min-width: 768px) {
  .menu_btn_item.buy a {
    padding: 6px 35px 7px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_btn_item.buy a {
    padding: 1.8666666667vw 8vw 1.6vw;
  }
}
.menu_btn_item.buy a:hover {
  background-color: #fff;
  color: #00b2ab;
}

.menu_btn_item.buy a:hover .arrow_diagonal::after {
  background-image: url(/img/2022/icon_arrow_diagonal.svg);
  opacity: 1;
}

.menu_btn_item.buy .arrow_diagonal {
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

@media print, screen and (min-width: 768px) {
  .menu_btn_item.buy .arrow_diagonal {
    right: 18px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_btn_item.buy .arrow_diagonal {
    right: 5.3333333333vw;
  }
}
.menu_btn_item.buy .arrow_diagonal::after {
  background-image: url(/img/2022/icon_arrow_diagonal_w.svg);
  opacity: 0.6;
}

@media print, screen and (min-width: 768px) {
  .menu_btn_item + .menu_btn_item {
    margin-left: 15px;
  }
}
@media only screen and (max-width: 767px) {
  .menu_btn_item + .menu_btn_item {
    margin-left: 4vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_subNav {
    position: absolute;
    z-index: 1;
    top: 100%;
    left: 0;
    padding-top: 25px;
    -webkit-transform: translate(-15px, 10px);
    transform: translate(-15px, 10px);
    opacity: 0;
    visibility: hidden;
    min-width: 240px;
    -webkit-transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), right 0s linear 0.4s, -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), right 0s linear 0.4s, -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), right 0s linear 0.4s;
    transition: opacity 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1), right 0s linear 0.4s, -webkit-transform 0.4s cubic-bezier(0.075, 0.82, 0.165, 1);
    -webkit-box-shadow: -5px 0 20px -20px rgba(4, 0, 0, 0.1), 0 5px 20px -20px rgba(4, 0, 0, 0.1), 5px 0 20px -20px rgba(4, 0, 0, 0.1);
    box-shadow: -5px 0 20px -20px rgba(4, 0, 0, 0.1), 0 5px 20px -20px rgba(4, 0, 0, 0.1), 5px 0 20px -20px rgba(4, 0, 0, 0.1);
    background-color: #fff;
  }
}
@media only screen and (max-width: 767px) {
  .menu_subNav {
    display: none;
    margin-top: 2.6666666667vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_subNav_list {
    -webkit-box-shadow: 0 12px 20px 0 rgba(4, 0, 0, 0.1);
    box-shadow: 0 12px 20px 0 rgba(4, 0, 0, 0.1);
  }
}
@media only screen and (max-width: 767px) {
  .menu_subNav_list {
    padding-left: 4vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_subNav_item {
    border-top: 1px solid #eaeced;
  }
}
@media only screen and (max-width: 767px) {
  .menu_subNav_item {
    padding: 1.6vw 0;
  }
}
@media print, screen and (min-width: 768px) {
  .menu_subNav_item > a {
    font-size: 14px;
    padding: 12px 20px;
    display: block;
  }
}
@media only screen and (max-width: 767px) {
  .menu_subNav_item > a {
    font-size: 14px;
    font-size: 3.7333333333vw;
  }
}
@media print, screen and (min-width: 768px) {
  .menu.scroll {
    -webkit-transform: translateY(-110px);
    transform: translateY(-110px);
    -webkit-box-shadow: 0 5px 20px 0 rgba(4, 0, 0, 0.1);
    box-shadow: 0 5px 20px 0 rgba(4, 0, 0, 0.1);
  }
}
@media only screen and (max-width: 767px) {
  .menu.scroll {
    -webkit-transform: translateY(calc(-100% - 2.4vw));
    transform: translateY(calc(-100% - 2.4vw));
  }
}
.sp_menu_bg,
.sp_menu_bg_add {
  display: none;
  z-index: -50;
}

.menu_toggle{
  padding: 0!important;
  margin: 0!important;
  display: inline!important;
}
.menu_toggle::before{
  content: none!important;
}
@media only screen and (max-width: 767px) {
  .menu_toggle::after {
    content: "";
    position: absolute;
    display: block;
    -webkit-transform: translateY(-50%) rotate(135deg);
    transform: translateY(-50%) rotate(135deg);
    right: 8vw;
    top: calc(50% - 0.53333vw);
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-top: 0.5333333333vw solid #999;
    border-right: 0.5333333333vw solid #999;
  }
}
.menu_input {
  display: none;
}
.menu_input:checked ~ .sp_menu_bg,
.menu_input:checked ~ .sp_menu_bg_add {
  display: block;
  width: 100%;
  height: 100%;
  background-color: #000;
  position: fixed;
  top: 0px;
  left: 0px;
  opacity: 0.5;
}
.menu_input:checked ~ .menu_nav {
  bottom: auto;
  top: 12vw;
}
.menu_input:checked ~ .menu_toggle::after {
  top: calc(50% + 0.53333vw);
  border-color: #00b2ab;
  -webkit-transform: translateY(-50%) rotate(-45deg);
  transform: translateY(-50%) rotate(-45deg);
}

.mod-subMenu_mainTtl img {
  width: auto;
  height: 40px;
}
@media only screen and (max-width: 767px) {
  .mod-subMenu_mainTtl img {
      height: 36px;
      height: auto;
      width: 30%;
  }
}

.justdb:not(.story_content_inner) .mod-subMenu .mod-subMenu_btn_item.buy a {
  background-color: #00b2ab;
  border-color: #00b2ab;
}
.justdb:not(.story_content_inner) .mod-subMenu .mod-subMenu_btn_item.buy a:hover {
  background-color: #fff;
  color: #00b2ab;
}
.justdb:not(.story_content_inner) .mod-subMenu_nav_item .link_hover:hover {
  color: #00b2ab !important;
}
.justdb:not(.story_content_inner) .mod-subMenu_nav_item [data-trigger="dropdown"]:hover::after {
  border-color: #00b2ab;
}

@media print, screen and (min-width: 768px) {
  .containner {
    padding-top: 75px;
  }
}
@media only screen and (max-width: 767px) {
  .containner {
    padding-top: 12vw;
  }
}