@charset "UTF-8";
@import url("global.css");
#mainvisual .img {
  background: url(../gbm/img/main.jpg) no-repeat center center;
  background-size: cover;
  background-attachment: fixed; }

#bodyarea {
  padding-bottom: 40px; }

.intro {
  padding-bottom: 100px; }
  .intro .wrapper {
    text-align: center; }
  .intro .sub {
    font-size: 24px;
    font-weight: bolder;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.4;
    padding-bottom: 5px; }
  .intro h2 {
    font-size: 40px;
    font-weight: bolder;
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    line-height: 1.4; }
  .intro .text {
    font-size: 16px;
    margin-top: 20px;
    line-height: 1.7; }

.element {
  height: 520px;
  position: relative;
  margin-bottom: 80px; }
  .element::before {
    content: "";
    position: absolute;
    width: 80%;
    height: 100%;
    left: 0;
    top: 0;
    background: url(../gbm/img/bg.jpg) center center;
    background-size: cover; }
  .element .wrapper {
    position: relative;
    height: 520px; }
    .element .wrapper .box {
      position: absolute;
      right: 0;
      bottom: 50px;
      padding: 40px;
      z-index: 100;
      background-color: #fff;
      box-sizing: border-box;
      width: 440px; }
      .element .wrapper .box h2 {
        font-size: 32px;
        font-weight: bolder;
        font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif; }
      .element .wrapper .box ul li {
        margin-top: 5px;
        margin-right: 15px;
        font-size: 24px;
        font-weight: 700;
        line-height: 1.4;
        display: inline-block;
        padding: 0.1em;
        background: linear-gradient(transparent 70%, rgba(223, 81, 4, 0.7) 70%); }

.bio {
  background-color: #eee; }
  .bio .wrapper {
    position: relative;
    padding-top: 80px;
    padding-bottom: 80px; }
  .bio .image {
    width: 600px;
    margin: 0 auto; }
  .bio .txt {
    position: absolute;
    padding: 20px 25px;
    box-sizing: border-box;
    z-index: 10;
    background-color: #fff;
    border-radius: 3px; }
    .bio .txt .sub {
      padding-left: 17px;
      font-size: 16px;
      font-weight: 800;
      border-left: 8px solid #492523;
      line-height: 1.4; }
    .bio .txt h3 {
      padding-left: 15px;
      font-size: 28px;
      font-weight: 800;
      border-left: 8px solid #492523;
      line-height: 1.4; }
    .bio .txt.training {
      top: 40px;
      right: 120px; }
    .bio .txt.conditioning {
      top: 180px;
      left: 40px; }
    .bio .txt.swing {
      bottom: 40px;
      right: 30%; }

.menu {
  margin-top: 60px; }
  .menu dl {
    padding: 20px 0;
    font-size: 18px;
    display: flex;
    align-items: center; }
    .menu dl dt {
      font-weight: 700;
      width: 280px;
      padding: 0 20px; }
    .menu dl dd {
      padding: 0 20px; }
    .menu dl:nth-child(2n) {
      background-color: #f3f3f3; }

/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-1 ( 1200px )
 
------------------------------------------------------------------------------------------------------------------------ */
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 960px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 959px) {
  #mainvisual .img {
    background-attachment: inherit; }

  .intro {
    padding-bottom: 80px; }
    .intro .sub {
      font-size: 20px; }
    .intro h2 {
      font-size: 32px; }

  .element {
    height: 360px;
    margin-bottom: 70px; }
    .element::before {
      content: "";
      width: 85%; }
    .element .wrapper {
      height: 360px; }
      .element .wrapper .box {
        bottom: 40px;
        padding: 30px;
        width: 340px; }
        .element .wrapper .box h2 {
          font-size: 26px; }
        .element .wrapper .box ul li {
          font-size: 20px; }

  .bio .wrapper {
    padding-top: 40px;
    padding-bottom: 40px; }
  .bio .image {
    width: 320px;
    margin: 0;
    float: left; }
  .bio .txt {
    padding: 8px 10px;
    margin-left: 340px;
    position: relative;
    background-color: inherit; }
    .bio .txt .sub {
      padding-left: 17px;
      font-size: 16px;
      border-left: 8px solid #492523; }
    .bio .txt h3 {
      padding-left: 15px;
      font-size: 22px;
      border-left: 8px solid #492523; }
    .bio .txt.training {
      top: 0px;
      right: 0px; }
    .bio .txt.conditioning {
      top: 0px;
      left: 0px; }
    .bio .txt.swing {
      bottom: 0px;
      right: 0; }

  .menu {
    margin-top: 50px; }
    .menu dl {
      padding: 15px 0;
      font-size: 16px; }
      .menu dl dt {
        width: 200px;
        box-sizing: border-box; }
      .menu dl dd {
        box-sizing: border-box; } }
/* ------------------------------------------------------------------------------------------------------------------------

 Responsive-Breakpoint-2 ( 645px )
 
------------------------------------------------------------------------------------------------------------------------ */
@media only screen and (max-width: 644px) {
  .intro {
    padding-bottom: 50px; }
    .intro .sub {
      font-size: 18px; }
    .intro h2 {
      font-size: 22px; }
    .intro .text {
      text-align: left; }
      .intro .text br {
        display: none; }

  .element {
    height: auto;
    margin-top: 0px;
    margin-bottom: 40px; }
    .element::before {
      content: "";
      width: 100%;
      height: 160px; }
    .element .wrapper {
      height: auto;
      position: relative; }
      .element .wrapper .box {
        bottom: 0px;
        padding: 0 15px;
        width: 100%;
        margin-top: 180px;
        position: relative; }
        .element .wrapper .box h2 {
          font-size: 24px;
          margin-bottom: 5px;
          text-align: center; }
        .element .wrapper .box ul li {
          font-size: 18px; }

  .bio .wrapper {
    padding: 0 0 30px;
    margin: 0; }
  .bio .image {
    width: 100%;
    margin: 0 auto 20px;
    float: none; }
  .bio .txt {
    padding: 10px 10px 0px;
    margin-left: 0; }
    .bio .txt .sub {
      font-size: 15px; }
    .bio .txt h3 {
      font-size: 20px; }

  .menu {
    margin-top: 40px; }
    .menu.wrapper {
      margin: 0; }
    .menu dl {
      padding: 30px 0;
      font-size: 16px;
      display: block; }
      .menu dl dt {
        width: 90%;
        box-sizing: border-box;
        border-bottom: 1px dotted #ccc;
        margin: 0 auto 15px;
        padding: 0 0 15px 0; }
        .menu dl dt br {
          display: none; }
      .menu dl dd {
        box-sizing: border-box;
        margin: 0 auto 0px;
        padding: 0;
        width: 90%;
        font-size: 15px; } }