@charset "utf-8";

/*
 * File       : rwd-layout.css
 * Author     : STUDIO-JT (KMS)
 * Guideline  : JTstyle.1.1
 * Dependency : css/reset.css
 *              css/jt-strap.css
 *
 * SUMMARY:
 * 01) 2000px
 * 02) 1480px
 * 03) 1023px
 * 04) 860px
 * 05) 540px
 */



/* **************************************** *
 * 2000px
 * **************************************** */
@media (min-width: 2000px){

    html {font-size: 0.05254860746190225vw;}

}



/* **************************************** *
 * 1480px
 * **************************************** */
@media (max-width: 1480px){

    html {font-size: 0.06756756756756757vw;}

    /* LAYOUT */
    .main-container {padding: 230rem 50rem 0;}

    /* HEADER */
    #header {padding: 0 50rem;}
    #menu > li {margin-left: 64rem;}

    /* FOOTER */
    #footer {padding: 0 50rem;}
    .footer__top {padding: 242rem 0 241rem;}
    .footer__bottom {padding: 25rem 0 130rem;}

    .footer__typo p {font-size: 42rem;}
    .footer__typo-blank {width: 26rem;left: -6rem;}

    .footer__menu-wrap {top: 22rem;}

    /* PAGE */
    .article-header__count .jt-text--04 {margin-top: 12rem;}

    .assist-section {padding-bottom: 165rem;}
    .assist-section__illust {margin-bottom: 70rem;}

    body.error404 .assist-section__illust {margin-bottom: 50rem;}

    /* PRIVACY */
    .privacy-data:last-child {margin-bottom: 220rem;}
    .privacy-data h2 {font-size: 18rem;}
    .privacy-data p, .privacy-data li, .privacy-data b {font-size: 15rem;}
    .privacy-data li:before {top: 10rem;}
    html.ios .privacy-data li:before {top: 11rem;}

    /* BROWSER SUPPORT */
    .jt-browser-support h1 {font-size: 32rem;}
    .jt-browser-support p {font-size: 17rem;}
    .jt-browser-list b {font-size: 13rem;}

}



/* **************************************** *
 * 1023px
 * **************************************** */
@media (max-width: 1023px){

    html {font-size: 0.09775171065493645vw;}

    /* LAYOUT */
    .main-container {padding-top: 180rem;}

    .wrap {max-width: inherit;padding: 0 100rem;}

    /* HEADER */
    #header {height: 80rem;}

    #logo {width: 118rem;height: 18rem;top: 31rem;}

    .menu-container {display: none;}

    #small-menu-btn {display: block;width: 40rem;height: 40rem;position: absolute;top: 20rem;right: 50rem;z-index: 550;cursor: pointer;-webkit-transition: top .3s;transition: top .3s;}
    .small-menu-btn__line {display: block;width: 100%;height: 2px;position: absolute;right: 0;background: #000;-webkit-transform-origin: center center;-ms-transform-origin: center center;transform-origin: center center;}
    .small-menu-btn__line--01 {top: 13rem;}
    .small-menu-btn__line--02 {bottom: 13rem;}

    #small-menu-container {display: none;width: 100%;height: 100%;padding: 82rem 50rem;position: fixed;top: 0;left: 0;z-index: 650;background: #fff;overflow: hidden;}
    #small-menu > li > a {display: block;padding: 8rem 0;font-size: 0;line-height: 1.6;font-weight: 400;position: relative;}
    #small-menu > li > a > span {display: block;}
    #small-menu > li > a > span > span {display: inline-block;vertical-align: middle;position: relative;font-size: 20rem;}
    #small-menu > li > a > span > i {display: inline-block;vertical-align: top;margin-left: 5rem;font-size: 11rem;font-style: normal;}
    #small-menu > li > a > span > span:after {content: '';display: block;width: 100%;height: 1rem;position: absolute;left: 0;bottom: 2rem;background: #000;-webkit-transform-origin: 100% 50%;-ms-transform-origin: 100% 50%;transform-origin: 100% 50%;-webkit-transform: scale3d(0, 1, 1);transform: scale3d(0, 1, 1);-webkit-transition: -webkit-transform .3s;transition: -webkit-transform .3s;transition: transform .3s;transition: transform .3s, -webkit-transform .3s;}
    html.desktop #small-menu > li:hover > a > span > span:after, #small-menu > li.current-menu-item > a > span > span:after {-webkit-transform-origin: 0% 50%;-ms-transform-origin: 0% 50%;transform-origin: 0% 50%;-webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}
    #small-menu > li.menu-item--news {margin-bottom: 50rem;}

    .minimize#header {height: 70rem;}
    .minimize #logo {top: 26rem;}
    .minimize #small-menu-btn {top: 15rem;}

    body.open-menu--fixed {width: 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;}
    body.open-menu #header {border-bottom-color: transparent;z-index: 651;}
    body.open-menu #logo {display: none;}

    /* FOOTER */
    .footer__top {padding: 162rem 0 161rem;}
    .footer__bottom {padding-bottom: 100rem;}

    .footer__typo p {font-size: 36rem;}
    .footer__typo-blank {width: 24rem;left: -3rem;}

    .footer__sns-wrap {bottom: 14rem;}
    .footer__sns > li > a {padding: 8rem 15rem;}

    .footer__menu-wrap {top: 20rem;}
    .footer__menu > li > a {padding: 8rem 15rem;}

    .footer__info-btn .copyright {font-size: 18rem;}
    .footer__info-btn .jt-guide--icon {margin-top: -4rem;}
    .footer__info-detail {padding-top: 20rem;}
    .footer__info-detail p span {font-size: 14rem;}

    .go-top {width: 40rem;right: 10rem;top: 40rem;}

    /* PAGE */
    .article-header {margin-bottom: 22rem;}
    .article-header__count .jt-text--04 {margin-top: 10rem;}

    .assist-section {padding-bottom: 128rem;}
    .assist-section .jt-text--06 {margin-top: 15rem;}
    .assist-section__illust {max-width: 230rem;margin: 20rem auto 30rem;}

    body.error404 .assist-section__illust {max-width: 280rem;margin-bottom: 24rem;}

    /* PRIVACY */
    .privacy-data {margin-bottom: 65rem;}
    .privacy-data:last-child {margin-bottom: 180rem;}
    .privacy-data.privacy-data--intro {margin-top: 43rem;}

    .privacy-data h2 {padding-bottom: 15rem;margin-bottom: 18rem;font-size: 16rem;}
    .privacy-data p, .privacy-data li, .privacy-data b {font-size: 14rem;}
    .privacy-data p {margin-bottom: 15rem;}
    .privacy-data li {padding-left: 12rem;}
    .privacy-data > ul {margin-bottom: 15rem;}
    .privacy-data > ul > li {margin-bottom: 7rem;}
    .privacy-data > ul > li > ul {margin: 4rem 0;}
    .privacy-data > ul > li > ul > li {margin-bottom: 4rem;}

    /* BROWSER SUPPORT */
    .jt-browser-support h1 {font-size: 28rem;}
    .jt-browser-support p {font-size: 15rem;}

}



/* **************************************** *
 * 860px
 * **************************************** */
@media (max-width: 860px){

    html {font-size: 0.13020833333333335vw;}

    /* LAYOUT */
    body {font-family: sans-serif;}

    .main-container {padding: 140rem 32rem 0;}
    .wrap {padding: 0;}

    /* HEADER */
    #header {padding: 0 32rem;}
    #small-menu-btn {right: 32rem;}
    #small-menu-container {padding-left: 32rem;padding-right: 32rem;}

    /* FOOTER */
    #footer {padding: 0 32rem;}
    .footer__bottom {padding: 22rem 0 90rem;}

    .footer__typo p {font-size: 32rem;}
    .footer__typo-blank {width: 20rem;height: 2rem;}

    .footer__sns > li > a {padding: 6rem 12rem;font-size: 14rem;}

    .footer__menu-wrap {top: 17rem;}
    .footer__menu > li > a {padding: 6rem 12rem;font-size: 12rem;}

    .footer__info-btn {padding-right: 16rem;}
    .footer__info-btn .copyright {font-size: 15rem;}
    .footer__info-btn .jt-guide--icon {margin-top: -3rem;}
    .footer__info-detail {padding-top: 18rem;}
    .footer__info-detail p span {padding-right: 15rem;font-size: 12rem;}
    html.ios .footer__info-btn .jt-guide--icon {margin-top: -5rem;}

    /* PAGE */
    .article-header__count .jt-text--04 {margin-top: 2rem;}

    .assist-section {padding-bottom: 100rem;}

    /* PRIVACY */
    .privacy-data:last-child {margin-bottom: 150rem;}
    .privacy-data h2 {font-size: 15rem;}
    .privacy-data p, .privacy-data li, .privacy-data b {font-size: 13rem;}
    .privacy-data li:before {top: 8rem;}
    html.ios .privacy-data li:before {top: 8rem;}

    /* BROWSER SUPPORT */
    .jt-browser-support__inner {width: 680rem;}
    .jt-browser-support h1 {font-size: 25rem;}
    .jt-browser-support p {font-size: 14rem;}
    .jt-browser-list > li {width: 130rem;height: 150rem;}
    .jt-browser-list figure {width: 66rem;}
    .jt-browser-list b {margin-top: 14rem;font-size: 12rem;}

}



/* **************************************** *
 * 540px
 * **************************************** */
@media (max-width: 540px){

    html {font-size: 0.26666666666666665vw;}

    /* LAYOUT */
    .main-container {padding: 120rem 18rem 0;}

    /* HEADER */
    #header {padding: 0 18rem;}
    #logo {width: 106rem;height: 16rem;top: 32rem;}
    #small-menu-btn {top: 19rem;right: 18rem;}

    #small-menu-container {padding-left: 18rem;padding-right: 18rem;}

    .minimize#header {height: 60rem;}
    .minimize #logo {width: 78rem;height: 12rem;top: 24rem;}
    .minimize #small-menu-btn {top: 9rem;}

    /* FOOTER */
    #footer {padding: 0 18rem;}
    .footer__top {padding: 122rem 0 168rem;}
    .footer__bottom {padding-bottom: 26rem;}

    .footer__typo p {font-size: 26rem;}
    .footer__typo-blank {width: 16rem;bottom: -1rem;}

    .footer__sns-wrap {right: auto;left: 0;}
    .footer__sns > li > a {font-size: 12rem;}

    .footer__menu-wrap {margin-top: 17rem;position: relative;top: inherit;right: inherit;}
    .footer__menu {text-align: left;}
    .footer__menu > li > a {padding: 6rem 9rem;font-size: 12rem;}

    .footer__info-detail {padding-top: 12rem;}
    .footer__info-detail p span {padding-right: 10rem;font-size: 11rem;line-height: 2;}
    .footer__info-detail p + p {margin-top: 0;}

    .go-top {padding: 6rem 12rem;right: -8rem;top: 22rem}

    /* PAGE */
    .article-header {margin-bottom: 13rem;}
    .article-header__count .jt-text--04 {margin-top: 0;margin-left: 7rem;font-size: 13rem;}

    .assist-section {padding-bottom: 77rem;}
    .assist-section .jt-heading--02 br {display: none;}
    .assist-section .jt-text--06 {margin-top: 10rem;}
    .assist-section__illust {max-width: 220rem;margin: 6rem auto 16rem;}

    body.error404 .assist-section__illust {max-width: 240rem;margin: 6rem auto 16rem;}

    /* PRIVACY */
    .privacy-data {margin-bottom: 50rem;}
    .privacy-data:last-child {margin-bottom: 110rem;}
    .privacy-data.privacy-data--intro {margin-top: 37rem;}
    .privacy-data h2 {padding-bottom: 14rem;margin-bottom: 16rem;}
    .privacy-data p {margin-bottom: 12rem;}
    .privacy-data li {padding-left: 10rem;}
    .privacy-data li:before {width: 3rem;height: 3rem;top: 9rem;}
    .privacy-data > ul {margin-bottom: 12rem;}
    .privacy-data > ul > li {margin-bottom: 5rem;}
    .privacy-data > ul > li > ul {margin: 2rem 0;}
    .privacy-data > ul > li > ul > li {margin-bottom: 2rem;}
    html.ios .privacy-data li:before {top: 8rem;}

    /* BROWSER SUPPORT */
    .jt-browser-support__inner {width: 100%;padding: 0 18rem;}
    .jt-browser-support h1 {font-size: 20rem;}
    .jt-browser-list {margin: 20rem 0 26rem;}
    .jt-browser-list > li {width: 46%;height: 140rem;margin: 2%;}
    .jt-browser-list figure {width: 58rem;}

}