@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) 1800px
 * 03) 1480px
 * 04) 1023px
 * 05) 860px
 * 06) 540px
 */



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

    html {font-size: 0.05254860746190225vw;}

}



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

	/* layout */
    .global-pagination__data p {font-size: 56rem;}

    .main-container {padding-top: 270rem;}

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

	/* HEADER */
    #logo {left: 60rem;}

	.menu-container {right: 32rem;}
    #menu > li:last-child > ul {right: 0;left: auto;margin-left: 0;}

    /* FOOTER */
    #footer {padding-left: 60rem;padding-right: 60rem;}

    /* PAGE */
    .article-header {padding-bottom: 100rem;}
    .article-title {font-size: 90rem;}
    .article-desc {margin-top: 44rem;font-size: 38rem;}
    .article-sup {font-size: 30rem;}

    .article-visual__inner {padding-top: 110rem;}

    /* 404 */
    .error-404__pic {-webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);margin-left: -53rem;margin-bottom: -53rem;}

    /* SCROLL */
    .scroll-down {right: 35rem;}

}



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

    html { font-size: 0.06756756756756757vw;}

	/* LAYOUT */
    .wrap {margin: 0 50rem;}

    .global-container {margin-bottom: 560rem;}

    .global-pagination {height: 560rem;}
    .global-pagination__data a {padding-bottom: 10rem;padding-right: 200rem;}
    .global-pagination__data p {font-size: 52rem;}
    .global-pagination__data .jt-btn--circle {margin-top: -82rem;}

    .main-container {padding-top: 200rem;padding-bottom: 200rem;}

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

    #logo {left: 50rem;top: 40rem;}

	.menu-container {right: 26rem;top: 32rem;}
	#menu > li > a {padding-left: 26rem;padding-right: 26rem;}
    #menu > li > ul > li > a {padding: 19rem 17rem 15rem;}
    #menu > li > ul > li > a:after {border-width: 8rem;}
    html.ios #menu > li > ul > li > a {padding-top: 17rem;padding-bottom: 17rem;}

    /* FOOTER */
    #footer {padding: 185rem 50rem 100rem;}
    .footer__bottom {padding-top: 170rem;}

    .footer__contact a {font-size: 42rem;}

    .footer__sns-wrap {margin-top: 100rem;}
    .footer__sns > li {width: 160rem;height: 160rem;}
    .footer__sns > li > a {line-height: 160rem;}

    .footer__addr p {font-size: 15rem;}

    .footer__menu > li {width: 250rem;}
    .footer__menu > li > a {padding: 17rem 0 14rem;font-size: 17rem;}
    html.ios .footer__menu > li > a {padding-bottom: 18rem;}

    /* PAGE */
    .article-header {padding-bottom: 80rem;}
    .article-title {font-size: 86rem;}
    .article-desc {margin-top: 30rem;font-size: 32rem;}
    .article-sup {font-size: 26rem;}

    .article-visual__inner {padding-top: 70rem;}
    .article-visual .article-title {font-size: 80rem;}
    .article-visual__gradient {width: 730rem;height: 1632rem;}

    /* PRIVACY */
    .privacy-intro {margin-bottom: 80rem;}

    .privacy-effective {font-size: 17rem;}

    .privacy-data h3 {margin-bottom: 20rem;font-size: 22rem;}
    .privacy-data p {margin-bottom: 20rem;font-size: 17rem;}
    .privacy-data b {font-size: 17rem;}
    .privacy-data table {margin-bottom: 20rem;}
    .privacy-data table th, .privacy-data table td {padding: 24rem 30rem 20rem;font-size: 17rem;}
    .privacy-data ul {margin-bottom: 20rem;}
    .privacy-data li {margin-bottom: 8rem;font-size: 17rem;}
    html.mac .privacy-data ul > li:before {top: 14rem;}

    /* BROWSER SUPPORT */
    .browser-support-popup .browser-support-content p {font-size: 17rem;}

    /* 404 */
    .error-404 {padding: 240rem 0 200rem;}
    .error-404 h1 {font-size: 50rem;}
    .error-404 p {margin-bottom: 80rem;font-size: 17rem;}
    .error-404__pic {-webkit-transform: scale(0.75);-ms-transform: scale(0.75);transform: scale(0.75);margin-left: -78rem;margin-bottom: -68rem;}

    /* INTRO */
    .intro-transmit {margin-top: -128rem;margin-left: -158rem;-webkit-transform: scale(0.9);-ms-transform: scale(0.9);transform: scale(0.9);}

    /* SCROLL */
    .scroll-down {right: 25rem;bottom: 20rem;}

}



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

    html {font-size: 0.09775171065493645vw;}

    /* LAYOUT */
    .wrap-narrow {max-width: inherit;margin: 0 50rem;}

    .global-container {margin-bottom: 0;}

    .global-pagination {height: auto;padding: 100rem 0 90rem;position: relative;bottom: inherit;left: inherit;}
    .global-pagination__data a {padding-bottom: 0;padding-right: 0;}
    .global-pagination__data span {margin-bottom: 24rem;font-size: 18rem}
    .global-pagination__data p {font-size: 38rem;}
    .global-pagination__data p br {display: none;}
    .global-pagination__data .jt-btn--circle {width: 52rem;height: 52rem;margin-top: 30rem;position: relative;top: inherit;right: inherit;font-size: 52rem;line-height: 52rem;}
    .global-pagination__data .jt-btn--circle:before {display: none;}

    .main-container {padding-top: 155rem;padding-bottom: 165rem;}

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

	#logo {width: 100rem;height: 29rem;}

	.menu-container {display: none;}

	#small-menu-btn {display: block;width: 30rem;height: 30rem;position: absolute;top: 39rem;right: 50rem;-webkit-transition: top .3s;transition: top .3s;}
	.small-menu-btn__line {display: block;width: 100%;height: 3rem;position: absolute;left: 0;background: #fff;}
	.small-menu-btn__line--01 {top: 8rem}
	.small-menu-btn__line--02 {bottom: 7rem}

    #small-menu-container {display: none;width: 100%;height: 100%;position: fixed;top: 0;left: 0;z-index: 650;background: #000;overflow: hidden;}
    #small-menu-container:before {content: '';display: block;position: absolute;left: 0;right: 0;top: 0;bottom: 0;background: -webkit-radial-gradient(50% 50%, 50% 50%, rgba(21, 90, 222, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #000000;background: radial-gradient(50% 50% at 50% 50%, rgba(21, 90, 222, 0.2) 0%, rgba(0, 0, 0, 0) 100%), #000000;z-index: 1;}
    .small-menu-container__inner {width: 100%;height: 100%;padding: 100rem 50rem 32rem;position: relative;z-index: 2;overflow-y: scroll;}
    .small-menu-nav {display: block;max-width: 325rem;}
    #small-menu {position: relative;}
    #small-menu li {display: block;position: relative;}
    #small-menu a {display: block;position: relative;line-height: 1.77;font-weight: 700;letter-spacing: 0.05em;color: #fff;text-transform: uppercase;}
    #small-menu > li > a {padding: 17rem 0 11rem;font-size: 22rem;}
    #small-menu > li > ul {display: none;margin-bottom: 13rem;}
    #small-menu > li > ul > li + li {margin-top: -2rem;}
    #small-menu > li > ul > li > a {padding: 21rem 18rem 17rem;font-size: 15rem;border: 2rem solid #fff;}
    #small-menu > li > ul > li.active > a {color: #000;background: #fff;}
    html.ios #small-menu > li > ul > li > a {padding-top: 19rem;padding-bottom: 18rem;}

    .minimize#header {height: 80rem;}
    .minimize #logo {width: 92rem;height: 26rem;top: 25rem;}
    .minimize #small-menu-btn {top: 23rem;}

    body.open-menu-fixed {width: 100%;height: 100%;top: 0;bottom: 0;left: 0;right: 0;overflow: hidden;}
    body.open-menu #header {-webkit-transform: none !important;-ms-transform: none !important;transform: none !important;opacity: 1 !important;visibility: visible !important;}
    body.open-menu #logo, body.open-menu #small-menu-btn {z-index: 651;}

    /* FOOTER */
    #footer {padding-top: 140rem;}
    .footer__bottom {padding-top: 84rem;}

    .footer__contact a {font-size: 36rem;}

    .footer__sns-wrap {margin-top: 60rem;}
    .footer__sns > li {width: 146rem;height: 146rem;margin: 0 14rem;}
    .footer__sns > li > a {line-height: 146rem;}
    .footer__sns > li.medium > a:after {font-size: 25rem;}
    .footer__sns > li.facebook > a:after {font-size: 26rem;}
    .footer__sns > li.github > a:after {font-size: 30rem;}

    .footer__addr {margin-bottom: 30rem;position: relative;bottom: inherit;left: inherit;}

    .copyright {text-align: left;}
    .copyright figure {height: 22rem;}

    .footer__menu > li {width: auto;}
    .footer__menu > li > a {padding: 15rem 0 12rem;font-size: 16rem;}
    html.ios .footer__menu > li > a {padding-bottom: 16rem;}

    /* PAGE */
    .article-header {padding-bottom: 50rem;}
    .article-title {font-size: 76rem;}
    .article-desc {margin-top: 12rem;font-size: 24rem;}
    .article-desc a > span:before, .article-desc a > span:after {bottom: 4rem;}
    .article-sup {font-size: 22rem;}

    .article-visual {height: auto;}
    .article-visual__inner {padding-top: 180rem;padding-bottom: 180rem;}
    .article-visual .article-title {font-size: 70rem;}
    .article-visual__gradient {height: 900rem;}

    /* PRIVACY */
    .privacy-intro {margin-bottom: 70rem;}

    .privacy-effective {font-size: 16rem;}

    .privacy-data {margin-bottom: 70rem;}
    .privacy-data h3 {font-size: 21rem;}
    .privacy-data p {font-size: 16rem;}
    .privacy-data b {font-size: 16rem;}
    .privacy-data table th, .privacy-data table td {padding-left: 26rem;padding-right: 26rem;font-size: 16rem;}
    .privacy-data table th br, .privacy-data table td br {display: none;}
    .privacy-data li {font-size: 16rem;}
    .privacy-data ul > li:before {top: 12rem;}
    html.ios .privacy-data ul > li:before {top: 16rem;}

    /* BROWSER SUPPORT */
    .browser-support-popup {width: -webkit-calc(100% - 100rem);width: calc(100% - 100rem);padding: 39rem 50rem 36rem;top: 25rem;}
    .browser-support-popup .browser-support-content {padding-left: 74rem;}
    .browser-support-popup .browser-support-content:before {width: 48rem;height: 48rem;top: 1rem;font-size: 40rem;line-height: 48rem;}
    .browser-support-popup .browser-support-content p {font-size: 16rem;}
    .browser-support-popup .browser-support-close {top: 15rem;right: 15rem;}

    /* 404 */
    .error-404 {padding: 200rem 0 165rem;}
    .error-404 h1 {font-size: 42rem;}
    .error-404 p {margin: 20rem 0 70rem;font-size: 16rem;}
    .error-404__pic {-webkit-transform: scale(0.55);-ms-transform: scale(0.55);transform: scale(0.55);margin-left: -120rem;margin-bottom: -120rem;}

    /* SCROLL */
    .scroll-down {display: none;}

}



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

    html { font-size: 0.13020833333333335vw;}

    /* LAYOUT */
    .wrap {margin: 0 32rem;}
    .wrap-narrow {margin: 0 32rem;}

    .global-pagination {padding: 100rem 0 80rem;}
    .global-pagination__data p {font-size: 32rem;}
    .global-pagination__data .jt-btn--circle {width: 44rem;height: 44rem;font-size: 44rem;line-height: 44rem;}

    .main-container {padding-top: 140rem;padding-bottom: 145rem;}

    /* HEADER */
    #header {height: 90rem;border-bottom-width: 2rem;}
    #logo {left: 32rem;top: 30rem;}
	#small-menu-btn {top: 28rem;right: 32rem;}
    .small-menu-container__inner {padding-left: 32rem;padding-right: 32rem;}

    .minimize#header {height: 78rem;}

    /* FOOTER */
    #footer {padding: 120rem 32rem 100rem;}
    .footer__bottom {padding-top: 72rem;}
    .footer__draw-line {height: 2rem;}

    .footer__contact a {font-size: 34rem;}

    .footer__sns-wrap {margin-top: 56rem;}
    .footer__sns > li {width: 116rem;height: 116rem;margin: 0 10rem;}
    .footer__sns > li > a {line-height: 116rem;}

    .footer__addr {margin-bottom: 26rem;}
    .footer__addr p {font-size: 14rem;}

    .copyright figure {height: 20rem;}

    /* PAGE */
    .article-header {padding-bottom: 40rem;}
    .article-title {font-size: 58rem;}
    .article-desc {font-size: 22rem;}
    .article-desc a > span:before, .article-desc a > span:after {height: 2rem;}
    .article-sup {font-size: 20rem;}

    .article-visual__inner {padding-top: 160rem;padding-bottom: 160rem;}
    .article-visual .article-title {font-size: 54rem;}
    .article-visual__gradient {width: 313rem;height: 700rem;}

    /* PRIVACY */
    .privacy-intro {margin-bottom: 65rem;}

    .privacy-effective {margin-bottom: 18rem;font-size: 15rem;}

    .privacy-data {margin-bottom: 62rem;}
    .privacy-data h3 {margin-bottom: 18rem;font-size: 20rem;}
    .privacy-data p {margin-bottom: 18rem;font-size: 15rem;line-height: 1.77;}
    .privacy-data b {font-size: 15rem;line-height: 1.77;}
    .privacy-data table {margin-top: 28rem;margin-bottom: 18rem;}
    .privacy-data table th, .privacy-data table td {font-size: 15rem;line-height: 1.77;}
    .privacy-data ul {margin-bottom: 18rem;}
    .privacy-data li {margin-bottom: 7rem;padding-left: 14rem;font-size: 15rem;line-height: 1.77;}
    .privacy-data ul > li:before {width: 3rem;height: 3rem;top: 9rem;}
    html.ios .privacy-data ul > li:before {top: 11rem;}

    /* BROWSER SUPPORT */
    .browser-support-popup {width: -webkit-calc(100% - 64rem);width: calc(100% - 64rem);padding: 34rem 38rem 31rem;border-width: 2rem;}
    .browser-support-popup .browser-support-content {padding-left: 65rem;}
    .browser-support-popup .browser-support-content:before {width: 45rem;height: 45rem;font-size: 34rem;line-height: 45rem;}
    .browser-support-popup .browser-support-content p {font-size: 15rem;}
    .browser-support-popup .browser-support-close:after {font-size: 20rem;}

    /* 404 */
    .error-404 {padding: 200rem 0 210rem;}
    .error-404 h1 {font-size: 32rem;}
    .error-404 p {margin: 16rem 0 40rem;font-size: 15rem;}
    .error-404__pic {-webkit-transform: scale(0.45);-ms-transform: scale(0.45);transform: scale(0.45);margin-left: -148rem;margin-bottom: -148rem;}

    /* INTRO */
    .intro-transmit {-webkit-transform: scale(0.8);-ms-transform: scale(0.8);transform: scale(0.8);}
    .intro-progress-wrap {bottom: 60rem;}

}



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

    html { font-size: 0.26666666666666665vw;}

	/* LAYOUT */
    .wrap {margin: 0 24rem;}
    .wrap-narrow {margin: 0 24rem;}

    .global-pagination {padding: 80rem 0 70rem;}
    .global-pagination__data span {margin-bottom: 15rem;font-size: 15rem;}
    .global-pagination__data p {font-size: 20rem;}
    .global-pagination__data .jt-btn--circle {margin-top: 22rem;width: 32rem;height: 32rem;line-height: 32rem;font-size: 32rem;}

    .main-container {padding-top: 110rem;padding-bottom: 100rem;}

    /* HEADER */
    #header {height: 70rem;}
    #logo {width: 80rem;height: 23rem;left: 24rem;top: 23rem;}

	#small-menu-btn {top: 19rem;right: 24rem;}
    .small-menu-container__inner {padding-left: 24rem;padding-right: 24rem;}
    .small-menu-nav {max-width: inherit;}
    #small-menu > li > a {font-size: 20rem;}
    #small-menu > li > ul > li > a {font-size: 12rem;}

    .minimize#header {height: 70rem;}
    .minimize #logo {width: 80rem;height: 23rem;top: 23rem;}
    .minimize #small-menu-btn {top: 19rem;}

    /* FOOTER */
    #footer {padding: 80rem 24rem;}
    .footer__bottom {padding-top: 60rem;}

    .footer__contact {text-align: left;}
    .footer__contact a {font-size: 18rem;letter-spacing: 0.05em;}

    .footer__sns-wrap {height: 87rem;margin: 38rem -24rem 0;overflow: hidden;}
    .footer__sns {height: 97rem;white-space: nowrap;overflow-y: hidden;overflow-x: auto;-webkit-overflow-scrolling: touch;}
    .footer__sns > li {width: 87rem;height: 87rem;margin: 0 8rem;}
    .footer__sns > li:first-child {margin-left: 24rem;}
    .footer__sns > li:last-child {margin-right: 24rem;}
    .footer__sns > li > a {font-size: 17rem;line-height: 87rem;}
    .footer__sns > li.medium > a:after {font-size: 16rem;}
    .footer__sns > li.facebook > a:after {font-size: 16rem;}
    .footer__sns > li.github > a:after {font-size: 19rem;}

    .footer__addr {margin-bottom: 32rem;}
    .footer__addr p {font-size: 13rem;line-height: 1.42;}

    .footer__menu-wrap {margin-bottom: 56rem;position: relative;right: inherit;bottom: inherit;}
    .footer__menu > li > a {padding: 24rem 0 18rem;font-size: 15rem;letter-spacing: 0.02em;}
    html.ios .footer__menu > li > a {padding-top: 20rem;padding-bottom: 20rem;}

    /* PAGE */
    .article-header {padding-bottom: 30rem;}
    .article-title {font-size: 36rem;}
    .article-desc {font-size: 17rem;}
    .article-desc a > span:before, .article-desc a > span:after {height: 1rem;}
    .article-sup {font-size: 17rem;}

    .article-visual__inner {padding-top: 140rem;padding-bottom: 40rem;}
    .article-visual .article-title {font-size: 36rem;}
    .article-visual__gradient {width: 280rem;height: 626rem;}

    /* PRIVACY */
    .privacy-effective {margin-bottom: 16rem;}

    .privacy-data {margin-bottom: 55rem;}
    .privacy-data h3 {margin-bottom: 16rem;font-size: 18rem;}
    .privacy-data p {margin-bottom: 16rem;}
    .privacy-data > b {margin-bottom: 3rem;}
    .privacy-data__table {width: 100%;margin-top: 26rem;margin-bottom: 16rem;overflow-x: auto;}
    .privacy-data table {margin-top: 0;margin-bottom: 0;}
    .privacy-data table th, .privacy-data table td {width: auto;min-width: 130rem;padding: 16rem 15rem 13rem;font-size: 12rem;}
    .privacy-data table li {padding-left: 11rem;font-size: 12rem;}
    .privacy-data table ul > li:before {top: 7rem;}
    .privacy-data ul {margin-bottom: 16rem;}
    .privacy-data li {margin-bottom: 6rem;}
    html.ios .privacy-data table ul > li:before {top: 9rem;}

    /* BROWSER SUPPORT */
    .browser-support-popup {width: -webkit-calc(100% - 48rem);width: calc(100% - 48rem);padding: 24rem 24rem 21rem;top: 20rem;}
    .browser-support-popup .browser-support-content {padding-left: 0;padding-top: 58rem;}
    .browser-support-popup .browser-support-content:before {width: 38rem;height: 38rem;font-size: 30rem;line-height: 38rem;}
    .browser-support-popup .browser-support-close {top: 12rem;right: 12rem;}

    /* 404 */
    .error-404 {padding: 138rem 0 100rem;}
    .error-404 h1 {font-size: 30rem;}
    .error-404 h1 br {display: block;}

    .error-404__pic {display: none;}

    /* INTRO */
    .intro-transmit {margin-top: -116rem;margin-left: -142rem;-webkit-transform: scale(0.55);-ms-transform: scale(0.55);transform: scale(0.55);}
    .intro-progress-wrap {width: 120rem;height: 12rem;bottom: 50rem;margin-left: -60rem;border-width: 3rem;}

}