@charset "UTF-8";
/* common */
html {
  font-family: "Yu Gothic Medium","游ゴシック" , "Yu Gothic" , "游ゴシック体" , "YuGothic" ,"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  line-height: 1.8;
  word-break: break-all;
  position: relative; }

* {
  box-sizing: border-box; }

p {
  font-size: 0.95rem; }

.spn {
  display: none !important; }

li {
  vertical-align: top; }

.bold {
  font-weight: bold; }

.text_l {
  text-align: left; }

.text_r {
  text-align: right; }

.text_c {
  text-align: center; }

.white {
  color: #fff; }

.text_title {
  font-size: 1.2rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 10px 0;
  display: inline-block; }

.w100p {
  width: 100%; }

.red {
  color: #D5007E; }

table {
  width: 100%;
  margin-bottom: 3%;
  border-collapse: collapse; }

th, td {
  border: solid 1px #fff;
  padding: 3% 4%;
  box-sizing: border-box; }

th {
  vertical-align: top;
  text-align: left; }

/* block(all) */
[class^="inner-box"] > p {
  line-height: 2.0;
  letter-spacing: 1.5px;
  font-size: 1rem; }

[class*="btn"] {
  -webkit-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease; }

.btn {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  padding: 12px 30px;
  background: #fff;
  text-align: center;
  align-items: center;
  border-radius: 5px;
  text-decoration: none;
  line-height: 1.4;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2); }
  .btn i {
    margin-right: 10px;
    font-size: 1.15rem; }

.btn + .btn {
  margin-left: 20px; }

/* mixin */
.mb_xsmall {
  margin-bottom: 10px; }

.mb_small {
  margin-bottom: 20px; }

.mb_normal {
  margin-bottom: 40px; }

.mb_large {
  margin-bottom: 60px; }

.mb_xlarge {
  margin-bottom: 80px; }

.mt_xsmall {
  margin-top: 10px; }

.mt_small {
  margin-top: 20px; }

.mt_normal {
  margin-top: 40px; }

.mt_large {
  margin-top: 60px; }

.mt_xlarge {
  margin-top: 80px; }

html {
  color: #424242; }

header {
  box-sizing: border-box;
  background: #161B59;
  color: #fff;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 98; }

.header-logo {
  margin-top: 10px; }
  @media screen and (min-width: 980px) {
    .header-logo {
      margin-top: 50px; } }

.header-logo img {
  width: 160px; }
  @media screen and (min-width: 980px) {
    .header-logo img {
      width: 222px; } }

.link-type a {
  padding: 30px 0 0 40px; }
  @media screen and (min-width: 980px) {
    .link-type a {
      padding: 0 0 0 10px;
      margin-top: 38px; } }

.link-type a:after {
  content: none; }
  @media screen and (min-width: 980px) {
    .link-type a:after {
      content: " ｜";
      color: #666; } }

.link-type-a a:after {
  content: none; }

.txt_yellow {
  margin-left: 0; }
  @media screen and (min-width: 980px) {
    .txt_yellow {
      margin-left: 30px; } }

.txt_yellow a:after {
  content: none; }

.link-type-b a:link {
  color: #FAE70A; }

@media screen and (min-width: 768px) {
  .header-inner {
    max-width: 1000px;
    margin: auto; }

  .link-type-a {
    border-bottom: none; } }
.txt_yellow {
  color: #FAE70A; }

.txt_yellow a:link, .txt_yellow a:hover {
  color: #FAE70A; }

/* common */
a:hover {
  opacity: 0.5; }

.font_bold {
  font-weight: bold; }

.font_12 {
  font-size: 12px; }

.mb_20 {
  margin-bottom: 20px; }

/* kv */
#kv {
  width: 100%;
  margin-top: 60px;
  background-image: url("../img/kv_bg.png");
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  padding: 30px 0; }
  @media screen and (min-width: 980px) {
    #kv {
      margin-top: 90px;
      padding: 120px 0 120px 0; } }

.kv-inner {
  width: 100%;
  max-width: 1000px;
  margin: auto;
  text-align: center; }
  .kv-inner img {
    width: 100%;
    max-width: 90vw; }
    @media screen and (min-width: 980px) {
      .kv-inner img {
        max-width: 54vw; } }

/* shop-navi */
.shop-navi {
  width: 100%;
  text-align: center;
  font-size: 1.2rem;
  font-weight: bold;
  margin: 30px 0 30px 0;
  color: #161B59; }
  @media screen and (min-width: 768px) {
    .shop-navi {
      font-size: 1.8rem;
      margin: 10px 0 60px 0; } }

.shop-navi a:link, .shop-navi a:visited {
  text-decoration: none;
  color: #161B59; }

.shop-navi a:hover {
  text-decoration: underline; }

.campaign-bnr {
  width: 100%;
  text-align: center;
  margin-bottom: 40px;
  box-sizing: border-box;
  padding: 0 20px; }
  @media screen and (min-width: 768px) {
    .campaign-bnr {
      margin-bottom: 80px; } }

.campaign-bnr img {
  width: 100%;
  max-width: 980px; }

.bnr-area {
  width: 100%;
  text-align: center;
  padding: 20px;
  background-color: #E5E0DA;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .bnr-area {
      padding: 40px 20px; } }

.bnr-area img {
  width: 100%;
  max-width: 980px; }

/* section01 */
#section01 {
  background-image: url("../img/concept_bg.png");
  background-repeat: no-repeat;
  background-position: top right;
  background-size: 120% auto; }
  @media screen and (min-width: 768px) {
    #section01 {
      background-image: url("../img/concept_bg.png");
      background-size: 100% auto; } }

.section01-inner {
  position: relative;
  max-width: 980px;
  margin: auto;
  padding-top: 121%; }
  @media screen and (min-width: 768px) {
    .section01-inner {
      padding-top: 900px; } }

.concept_title {
  position: absolute;
  top: 130px;
  left: 20px;
  max-width: 60vw;
  min-width: 28vw;
  width: 408px; }
  @media screen and (min-width: 768px) {
    .concept_title {
      top: 10px;
      left: 0;
      max-width: 58vw; } }

.concept_txt {
  position: absolute;
  top: 230px;
  left: 20px;
  width: 100%;
  max-width: 80vw; }
  @media screen and (min-width: 768px) {
    .concept_txt {
      position: absolute;
      top: 240px;
      left: 0;
      width: 70vw;
      max-width: 620px; } }

/* section02 */
#section02 {
  position: relative;
  overflow: hidden; }

#section02::before {
  position: absolute;
  content: '';
  width: calc(50% - 40vw);
  height: 390px;
  left: 0;
  bottom: 0;
  background: url(../img/concept_bg_l.png) right center no-repeat;
  background-size: auto 100%; }
  @media screen and (min-width: 768px) {
    #section02::before {
      width: calc(50% - 390px); } }

.section02-inner {
  padding: 60px 20px 60px 20px;
  box-sizing: border-box;
  max-width: 980px;
  margin-top: 120px;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .section02-inner {
      margin: auto;
      padding: 100px 20px 100px 20px; } }
  .section02-inner p {
    font-size: 14px;
    line-height: 1.6; }
    @media screen and (min-width: 768px) {
      .section02-inner p {
        font-size: 24px; } }

.section02_title {
  width: 90%;
  margin-bottom: 30px; }
  @media screen and (min-width: 768px) {
    .section02_title {
      max-width: 796px;
      width: 100%; } }

/* section03 */
#section03 {
  text-align: center;
  width: 100%;
  background-color: #EEEEF0; }

.machine_title {
  width: 100%;
  min-width: 50vw;
  margin: auto; }

.section03-inner {
  max-width: 980px;
  margin: auto; }

.section03-inner img {
  max-width: 980px;
  width: 100%;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .section03-inner img {
      margin-bottom: 80px; } }

/* section04 */
#section04 {
  background-color: #161B59;
  padding-bottom: 20px; }
  @media screen and (min-width: 768px) {
    #section04 {
      padding-bottom: 70px; } }

.section04-inner {
  max-width: 980px;
  margin: auto; }

.menu-title-area {
  max-width: 864px;
  margin: auto;
  padding: 30px 20px;
  box-sizing: border-box; }

.menu_title {
  max-width: 160px;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .menu_title {
      max-width: 260px; } }

.menu_sub_title {
  width: 100%;
  max-width: 300px;
  margin: 30px auto; }
  @media screen and (min-width: 768px) {
    .menu_sub_title {
      max-width: 850px;
      margin: 30px 0  30px 0;
      box-sizing: border-box; } }

.option_area {
  position: relative;
  background-color: #fff;
  background-image: url("../img/menu_bg.png");
  background-repeat: no-repeat;
  background-position: top left;
  background-size: 70% auto;
  padding-top: 60%; }
  @media screen and (min-width: 768px) {
    .option_area {
      padding-top: 52%; } }

.option_title {
  position: absolute;
  right: 20px;
  top: 20px;
  text-align: right; }
  @media screen and (min-width: 768px) {
    .option_title {
      right: 78px;
      top: 7vw; } }

.option_icon {
  margin-bottom: 10px;
  width: 110px;
  max-width: 10vw; }
  @media screen and (min-width: 768px) {
    .option_icon {
      margin-bottom: 20px; } }

.option_txt01 {
  margin-bottom: 10px;
  width: 372px;
  max-width: 50vw; }
  @media screen and (min-width: 768px) {
    .option_txt01 {
      margin-bottom: 20px; } }

.option_txt02 {
  font-size: 14px;
  text-align: right;
  line-height: 1.2;
  font-weight: bold;
  text-shadow: 1px 1px 2px #fff, 0 0 1em #fff, 0 0 0.2em #fff; }
  @media screen and (min-width: 768px) {
    .option_txt02 {
      font-size: 20px;
      text-align: left; } }

.option_card_area {
  max-width: 768px;
  margin: auto;
  display: block;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 10px;
  box-sizing: border-box;
  text-align: center; }
  @media screen and (min-width: 768px) {
    .option_card_area {
      display: flex;
      max-width: 824px;
      height: auto;
      align-items: flex-start;
      text-align: inherit; } }

.card {
  width: 80%;
  margin-bottom: 10px;
  align-self: flex-start; }
  @media screen and (min-width: 768px) {
    .card {
      max-width: 400px;
      width: 48%;
      margin-bottom: 24px; } }

.card_a {
  width: 80%;
  margin-bottom: 28px;
  align-self: flex-start; }
  @media screen and (min-width: 768px) {
    .card_a {
      margin-bottom: 48px;
      max-width: 824px;
      width: 100%; } }

/* section05 */
#section05 {
  width: 100%; }

.shop-title-area-wrap {
  width: 100%; }

.kyoto-grade {
  background: -webkit-linear-gradient(#232031, #8E89A9);
  background: -o-linear-gradient(#232031, #8E89A9);
  background: linear-gradient(#232031, #8E89A9); }

.shop_title {
  max-width: 120px;
  width: 100%;
  text-align: left; }
  @media screen and (min-width: 768px) {
    .shop_title {
      max-width: 234px;
      width: 100%; } }

.shop-title-area {
  max-width: 864px;
  margin: auto;
  padding: 10px 20px;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .shop-title-area {
      padding: 30px 20px; } }

.shop_title_txt {
  font-size: 3rem;
  line-height: 1.5;
  font-weight: bold;
  color: #fff;
  margin: auto; }
  @media screen and (min-width: 768px) {
    .shop_title_txt {
      font-size: 8rem; } }

.shop-btn-wrapper {
  display: flex;
  margin: auto;
  max-width: 470px;
  width: 100%;
  justify-content: space-around;
  margin-bottom: 10px; }
  @media screen and (min-width: 768px) {
    .shop-btn-wrapper {
      margin-bottom: 30px; } }

.shop_btn {
  color: #fff;
  text-align: center;
  font-size: 1.0rem;
  display: inline-block;
  border-radius: 100px;
  padding: 8px 10px;
  width: 220px;
  max-width: 42vw;
  text-decoration: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.6); }
  @media screen and (min-width: 768px) {
    .shop_btn {
      font-size: 1.6rem;
      max-width: 46vw;
      padding: 14px 20px; } }

.btn_blue {
  background-color: #161B59; }

.btn_red {
  background-color: #C21531; }

.access_icon {
  max-width: 96vw;
  width: 100%;
  margin-bottom: 0; }
  @media screen and (min-width: 768px) {
    .access_icon {
      max-width: 473px;
      margin-bottom: 20px; } }

.gym-area {
  width: 100%;
  background-color: #E9E9E9; }

.gym-title {
  width: 100%;
  padding: 34px;
  text-align: center; }
  .gym-title img {
    max-width: 50vw;
    width: 100%; }
    @media screen and (min-width: 768px) {
      .gym-title img {
        max-width: 313px;
        width: 100%; } }

.gym-title-kyoto {
  background-color: #292638; }

.gym-title-makuhari {
  background-color: #343F66; }

.gym-kyoto {
  position: relative;
  background-color: #fff;
  background-image: url("../img/kyoto_main_img_sp.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding-top: 124%; }
  @media screen and (min-width: 768px) {
    .gym-kyoto {
      background-image: url("../img/kyoto_main_img_pc.png");
      padding-top: 86%; } }

.diamond {
  padding: 20px;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .diamond {
      margin: auto;
      max-width: 980px;
      width: 100%;
      padding: 40px 80px 20px 80px;
      box-sizing: border-box;
      filter: drop-shadow(0 10px 10px rgba(0, 0, 0, 0.9));
      margin-bottom: 50px; } }

.diamond-kyoto {
  background-color: #CCC9D8; }
  @media screen and (min-width: 768px) {
    .diamond-kyoto {
      background-image: url("../img/diamond_kyoto_bg.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: transparent; } }

.diamond .diamond-card {
  display: block;
  font-size: 14px;
  margin-bottom: 10px; }
  @media screen and (min-width: 768px) {
    .diamond .diamond-card {
      display: flex;
      font-size: 18px; } }

.diamond-card p {
  width: 100%;
  font-size: 14px;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .diamond-card p {
      font-size: 18px;
      width: 26%; } }

.diamond-card ul {
  width: 100%;
  margin: 0;
  display: inline-block; }
  @media screen and (min-width: 768px) {
    .diamond-card ul {
      width: 70%; } }

.diamond-card li {
  display: inline-block; }

.service-area {
  max-width: 1020px;
  width: 100%;
  margin: auto auto 40px auto;
  box-sizing: border-box;
  padding: 0 20px; }

.box-wrap {
  display: block;
  justify-content: space-around;
  margin-bottom: 10px; }
  @media screen and (min-width: 768px) {
    .box-wrap {
      display: flex; } }

.box-a {
  max-width: 100%;
  width: 100%;
  margin: auto auto 20px auto; }
  @media screen and (min-width: 768px) {
    .box-a {
      margin: 0;
      max-width: 480px;
      width: 49%; } }

.box-a_kyoto {
  background-color: #2E2B3E;
  color: #ccc; }

.box-a_makuhari {
  background-color: #D5D9DB; }

.box-a .tit {
  padding: 1em 0.4em;
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.4; }
  @media screen and (min-width: 768px) {
    .box-a .tit {
      font-size: 28px;
      padding: 1em 1em; } }

.box-a .tit_kyoto {
  background: #6B6681;
  border-left: solid 10px #2E2B3E; }

.box-a .tit_makuhari {
  background: #6E91A7;
  border-left: solid 10px #D5D9DB; }

.box-a .tit span {
  font-size: 14px; }
  @media screen and (min-width: 768px) {
    .box-a .tit span {
      font-size: 18px; } }

.tab {
  margin: 0 0 10px 0; }
  @media screen and (min-width: 768px) {
    .tab {
      margin: 0 0 20px 0; } }

.tab li {
  display: inline-block;
  color: #C5AB34;
  font-size: 12px;
  border: 1px solid #C5AB34;
  padding: 0.1em 1em;
  border-radius: 4px;
  margin-right: 10px; }
  @media screen and (min-width: 768px) {
    .tab li {
      font-size: 16px; } }

.box-a .txt-box {
  padding: 20px 20px;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .box-a .txt-box {
      padding: 20px 36px; } }

.box-a .txt-box .txt {
  font-size: 16px;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .box-a .txt-box .txt {
      font-size: 20px; } }

.schedule-btn {
  color: #fff;
  font-size: 14px;
  display: inline-block;
  border-radius: 100px;
  padding: 14px 20px;
  width: 220px;
  max-width: 100vw;
  background-color: #2EB4D6;
  text-decoration: none;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .schedule-btn {
      max-width: 46vw;
      font-size: 16px; } }

.box-a_img {
  width: 100%; }

.youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%; }

.youtube iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important; }

.tenpo-jyohou {
  width: 100%; }

.tenpo_img {
  width: 100%; }

.tenpo-info-wrapper {
  width: 100%;
  padding: 20px 20px;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .tenpo-info-wrapper {
      padding: 80px 20px; } }

.kyoto_bg {
  background-color: #383549; }

.makuhari_bg {
  background-color: #3980AC; }

.tenpo-info-inner {
  max-width: 1020px;
  box-sizing: border-box;
  width: 100%;
  margin: auto;
  display: block; }
  @media screen and (min-width: 768px) {
    .tenpo-info-inner {
      width: 100%;
      display: flex; } }

.info-area {
  width: 100%;
  color: #fff; }
  .info-area a:link {
    color: #fff;
    text-decoration: none; }
  @media screen and (min-width: 768px) {
    .info-area {
      width: 54%; } }

.info-area p {
  font-size: 14px;
  margin-bottom: 0;
  line-height: 1.5; }
  @media screen and (min-width: 768px) {
    .info-area p {
      font-size: 20px;
      margin-bottom: 20px; } }

.info-tit-wrapper {
  display: flex;
  margin-bottom: 10px; }
  @media screen and (min-width: 768px) {
    .info-tit-wrapper {
      display: block;
      margin-bottom: 30px; } }

.info-logo img {
  width: 70px;
  margin-right: 20px; }
  @media screen and (min-width: 768px) {
    .info-logo img {
      width: 140px; } }

.info-area .info-tit {
  font-size: 2.4rem;
  line-height: 1.0;
  font-weight: bold;
  margin-bottom: 10px; }
  @media screen and (min-width: 768px) {
    .info-area .info-tit {
      font-size: 4rem;
      margin-bottom: 30px; } }

.info-area .font-small {
  font-size: 14px;
  font-weight: bold; }
  @media screen and (min-width: 768px) {
    .info-area .font-small {
      font-size: 18px; } }

.map-area {
  margin-top: 20px;
  width: 100%; }
  @media screen and (min-width: 768px) {
    .map-area {
      margin-top: 100px;
      width: 56%; } }

.map-area img {
  max-width: 520px;
  height: auto;
  width: 70%; }
  @media screen and (min-width: 768px) {
    .map-area img {
      width: 100%; } }

/* section06 */
.makuhari-grade {
  background: -webkit-linear-gradient(#A3A2A2, #3980AC);
  background: -o-linear-gradient(#A3A2A2, #3980AC);
  background: linear-gradient(#A3A2A2, #3980AC); }

.gym-makuhari {
  position: relative;
  background-color: #fff;
  background-image: url("../img/makuhari_main_img_sp.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% auto;
  padding-top: 184%; }
  @media screen and (min-width: 768px) {
    .gym-makuhari {
      background-image: url("../img/makuhari_main_img_pc.png");
      padding-top: 86%; } }

.diamond-makuhari {
  background-color: #D5D9DB; }
  @media screen and (min-width: 768px) {
    .diamond-makuhari {
      background-image: url("../img/diamond_makuhari_bg.png");
      background-repeat: no-repeat;
      background-size: 100%;
      background-color: transparent; } }

.box-b {
  max-width: 100%;
  width: 100%;
  margin: auto auto 20px auto; }

.box-b .tit {
  padding: 1em 0.4em;
  margin: 0;
  color: #fff;
  font-size: 20px;
  line-height: 1.4; }
  @media screen and (min-width: 768px) {
    .box-b .tit {
      font-size: 28px;
      padding: 1em 1em; } }

.box-b .tit_makuhari {
  background: #6E91A7;
  border-left: solid 10px #D5D9DB; }

.box-b.tit span {
  font-size: 14px; }
  @media screen and (min-width: 768px) {
    .box-b.tit span {
      font-size: 18px; } }

.box-b .txt-box {
  padding: 20px 20px;
  box-sizing: border-box; }
  @media screen and (min-width: 768px) {
    .box-b .txt-box {
      padding: 20px 36px; } }

.box-b .txt-box .txt {
  font-size: 16px;
  margin-bottom: 20px; }
  @media screen and (min-width: 768px) {
    .box-b .txt-box .txt {
      font-size: 20px; } }

.makuhari-service {
  border: solid 6px #2EB4D6;
  padding: 20px 20px 0 20px;
  background-color: #fff; }
  .makuhari-service .tel {
    color: #000;
    text-decoration: none; }
  .makuhari-service dt {
    color: #2EB4D6;
    font-size: 18px;
    font-weight: bold; }
    @media screen and (min-width: 768px) {
      .makuhari-service dt {
        font-size: 26px; } }
  .makuhari-service dd {
    font-size: 18px; }
    @media screen and (min-width: 768px) {
      .makuhari-service dd {
        font-size: 20px; } }

/* footer */
footer {
  background: #424242;
  text-align: center;
  color: #fff;
  padding: 0 0 1% 0; }

footer a {
  color: #fff;
  text-decoration: none; }

footer small {
  font-style: normal;
  font-size: 1rem;
  display: block;
  margin-top: 1%; }

.footer-upper {
  background-color: #E9E9E9;
  padding: 40px 0;
  color: #000; }
  .footer-upper .inner {
    max-width: 980px;
    padding: 0 1%;
    width: 100%;
    margin: auto;
    display: block;
    justify-content: space-between; }
    @media screen and (min-width: 768px) {
      .footer-upper .inner {
        display: flex; } }
    .footer-upper .inner p {
      font-size: 16px; }
      @media screen and (min-width: 768px) {
        .footer-upper .inner p {
          font-size: 20px; } }

#btn_top {
  position: fixed;
  right: 1%;
  bottom: 10%;
  display: none;
  z-index: 999;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
  background-color: #fff;
  border-radius: 100%;
  overflow: hidden; }