@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300&display=swap');

/*! destyle.css v2.0.2 | MIT License | https://github.com/nicolas-cusan/destyle.css */
/* Reset box-model and set borders */
/* ============================================ */
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

@font-face {
  font-family: 'myfont';
  src: url('../../assets/fonts/NotoSansJP-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-robo';
  src: url('../../assets/fonts/RobotoCondensed-Bold.ttf') format('truetype');
}

@font-face {
  font-family: 'myfont-bold';
  src: url('../../assets/fonts/ZenKakuGothicNew-Bold.ttf') format('truetype');
}

.yamagata-file {
  border-width: 0 !important;
}

.calendar-event.mc_2 {
  color: #aca00c;
}

/* Document */
/* ============================================ */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 * 3. Remove gray overlay on links for iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
  -webkit-tap-highlight-color: transparent;
  /* 3*/
  font-family: 'Zen Kaku Gothic New', sans-serif;
  text-align: justify;
}

/* Sections */
/* ============================================ */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
  font-size: 0.9rem;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
  font-family: 'myfont-bold', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

p {
  line-height: 1.95;
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

/* Headings */
/* ============================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
  font-weight: normal;
  font-family: 'myfont-bold', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

/* Lists (enumeration) */
/* ============================================ */
ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
  font-weight: normal;
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

span {
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

/* Lists (definition) */
/* ============================================ */
dt {
  font-weight: bold;
  font-weight: normal;
}

dd {
  margin-left: 0;
  font-weight: normal;
}

/* Grouping content */
/* ============================================ */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

address {
  font-style: inherit;
}

/* Text-level semantics */
/* ============================================ */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
  font-weight: normal;
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: inherit;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content */
/* ============================================ */
/**
 * Prevent vertical alignment issues.
 */
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

/* Forms */
/* ============================================ */
/**
 * Reset form fields to make them styleable
 */
button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

/**
 * Reset radio and checkbox appearance to preserve their look in iOS.
 */
[type=checkbox] {
  -webkit-appearance: checkbox;
  -moz-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  -moz-appearance: radio;
  appearance: radio;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
  font-weight: normal;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove arrow in IE10 & IE11
 */
select::-ms-expand {
  display: none;
}

/**
 * Remove padding
 */
option {
  padding: 0;
}

/**
 * Reset to invisible
 */
fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the outline style in Safari.
 */
[type=search] {
  outline-offset: -2px;
  /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/**
 * Clickable labels
 */
label[for] {
  cursor: pointer;
}

/* Interactive */
/* ============================================ */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/*
 * Remove outline for editable content.
 */
[contenteditable] {
  outline: none;
}

/* Table */
/* ============================================ */
table {
  border-collapse: collapse;
  border-spacing: 0;
  font-family: 'myfont';
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
  font-family: 'myfont', 'Yu Gothic',
    'Hiragino Kaku Gothic ProN',
    'ヒラギノ角ゴ ProN W3',
    sans-serif;
}

th {
  text-align: left;
  font-weight: bold;
}

/* Misc */
/* ============================================ */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

.mc_edit_links {
  display: none;
}

.time-separator {
  display: none;
}

.battle-callender .my-calendar-navigation .my-calendar-header {
  display: none !important;
}

/* ヘッダーナビゲーション用のメディクリ設定　*/
@media only screen and (max-width: 3267px) {
  .header {
    position: fixed;
    height: 70px;
    display: flex;
    z-index: 12;
    top: 0;
  }

  .disktop {
    display: none;
  }

  .header-company {
    position: absolute;
  }

  .header-nav__desktop {
    display: none !important;
  }

  .icon-weather {
    width: 57px;
    margin-right: 14px;
  }

  .header-nav__mobile {
    display: block;
    position: fixed;
    z-index: 30000;
    right: 64px;
    top: 9px;
    width: 58px;
    height: 72px;
    cursor: pointer;
    text-align: center;
    transition: 0.5s all;
  }

  .logo-wrapper {
    cursor: pointer;
  }

  .logo-wrapper span {
    display: block;
    font-size: 10px;
    margin: -5px 0 0 12px;
    color: #053534;
    background: white;
    width: 30px;
    text-align: center;
    border-radius: 3px;
    padding: 0px 0px;
    margin-bottom: 7px;
  }

  .header-nav {
    position: fixed;
    right: 50px;
    top: 10px;
  }

  .header-mobile {
    display: none;
    width: 0;
    margin-left: -100px;
  }

  .weather-c-name {
    text-decoration: none !important;
    color: #dfdfdf !important;
  }

  .header-mobile.active {
    background: #e9f9f9;
    height: 460px;
    padding: 55px 20px 0px;
    text-align: center;
    width: 332px;
    position: fixed;
    right: 67px;
    margin: 0 auto;
    top: 12px;
    z-index: -1;
  }

  .header-mobile-left.active {
    background: white url('../../assets/images/img-smart-back.png');
    background-size: cover;
    height: 100vh;
    padding: 55px 20px 0px;
    text-align: center;
    width: 100vw;
    position: fixed;
    right: 0;
    margin: 0 auto;
    top: 0;
    z-index: -1;
    display: block;
    overflow-y: scroll;
    padding-bottom: 150px;
  }

  .header-mobile ul li {
    padding: 20px 0;
    font-size: 1rem;
    color: black;
    background: transparent !important;
    margin: 10px 20px 30px 0px;
    width: 100%;
  }

  .header-mobile ul li:nth-child(5) {
    color: #f8c21a;
    background: #2a62c4;
  }

  .header-mobile ul li a img {
    width: 17px;
    margin-right: 10px;
  }

  .header-mobile {
    display: none;
    background: white;
    height: calc(100vh - 60px);
    margin-top: -6px;
    padding: 100px 20px;
    text-align: center;
  }

  .header-mobile-left {
    display: none;
    background: white;
    height: calc(100vh - 60px);
    margin-top: -6px;
    padding: 100px 20px;
    text-align: center;
  }

  .header-nav__mobile span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: transparent;
  }

  .header-nav__mobile.left span {
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 6px;
    background: #10aba8;
  }

  .header-nav__desktop {
    display: none;
  }

  .header-nav__mobile span:nth-child(1) {
    top: 10px;
  }

  .header-nav__mobile span:nth-child(2) {
    top: 20px;
  }

  .header-nav__mobile span:nth-child(3) {
    top: 30px;
  }

  .header-nav__mobile.active {
    transform: rotate(360deg);
  }

  .header-nav__mobile.active span {
    background: #023535;
  }

  .header-nav__mobile.active span:nth-child(1) {
    top: 33px;
    left: 15px;
    background: #023535;
    transform: rotate(-45deg);
  }

  .header-nav__mobile.active span:nth-child(2) {
    top: 33px;
    background: #023535;
    transform: rotate(45deg);
    left: 15px;
  }

  .header-nav__mobile.left.active span:nth-child(1) {
    top: 20px;
    left: 5px;
    background: #023535;
    transform: rotate(-45deg);
  }

  .header-nav__mobile.left.active span:nth-child(2) {
    top: 20px;
    background: #023535;
    transform: rotate(45deg);
    left: 5px;
  }

  .header-nav__mobile.active span:nth-child(3) {
    opacity: 0;
  }
}

/* ヘッダーナビゲーション用のメディクリ設定　ここまで　*/

/*==================================================
じわっ
===================================*/

/* ぼかしから出現 */
.blur {
  animation-name: blurAnime;
  animation-duration: 1s;
  animation-fill-mode: forwards;
  opacity: 1;
}

@keyframes blurAnime {
  from {
    filter: blur(10px);
    transform: scale(1.02);
  }

  to {
    filter: blur(0);
    transform: scale(1);
  }
}

@media print,
screen and (min-width:769px) {
  .weather-api-smart #weather1 img {
    display: block;
    position: absolute;
    top: 100px;
    left: 40px;
  }

  .header-nav__mobile.left {
    display: none;
  }

  .common-loading {
    width: 100%;
    height: 100vh;
    z-index: 9999;
    position: fixed;
    background: white;
    padding-top: 30vh;
    text-align: center;
    transition: 0.5s all;
    opacity: 1;
  }

  .loader-inner {
    width: calc(100vw - 250px);
    right: 50px;
    position: fixed;
    background: #ebfffb;
    margin: -80px -50px;
    padding: 80px 0px;
  }

  .common-loading.loaded {
    transition: 0.5s all;
    opacity: 0;
  }

  .common-loading__image img {
    width: 130px;
    margin-bottom: 20px;
    transition: 0.5s all;
    opacity: 0;
    animation-name: wipe;
    animation-fill-mode: forwards;
    animation-duration: 1s;
    padding: 0 20px 20px;
  }

  @keyframes wipe {
    from {
      opacity: 0;
      padding: 0 20px 20px;
    }

    to {
      opacity: 1;
      padding: 0 0px 0px;
    }
  }

  .common-loading h1 {
    font-size: 25px;
    color: #27a3a3;
  }

  .common-loading small {
    font-size: 22px;
    color: #27a3a3;
    display: block;
  }

  .display {
    display: none;
  }

  .js-inview {
    opacity: 0;
    transform: translateY(60px);
    transition: all 1s;
  }

  .inview {
    opacity: 1;
    transform: translateY(0);
    transition: all 1s;
  }

  .js-inview2 {
    opacity: 0;
  }

  .js-inview2.tlt {
    opacity: 1;
  }

  .w_bg {
    width: 45%;
    background: transparent !important;
    font-family: 'myfont' !important;
  }

  #weather1 img {
    position: relative;
    display: none;
  }

  .sep {
    display: flex;
    justify-content: flex-end;
  }

  .weather-wrapper {
    box-shadow: rgba(17, 194, 192, 0.1);
    font-family: 'myfont' !important;
  }

  .weather-api-smart {
    position: relative;
    z-index: 9;
    display: flex;
    justify-content: center;
  }

  #weather1 {
    border: 0px solid #ccc;
    background: rgba(17, 194, 192, 0.1);
  }

  #weather2 ul {
    display: flex;
    justify-content: space-between;

  }

  #weather2 li {
    background: rgba(17, 194, 192, 0.1);
    border: 0px;
    font-family: 'myfont' !important;
  }

  .w_title {
    font-family: 'myfont' !important;
  }

  .fa.fa-caret-up {
    font-family: 'myfont' !important;
    font-weight: normal !important;
  }

  .weather-c-name {
    font-size: 7px;
    color: #a4a4a4;
    padding-right: 5px;
  }

  .main {}

  .main img {
    max-width: 100%;
  }

  .left-sidebar {
    width: 300px;
    background: #0FC2C0;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    font-size: 0.9rem;
    z-index: 3;
  }

  .right-sidebar {
    width: 50px;
    background: #023535;
    height: 100vh;
    position: fixed;
    right: 0;
    top: 0;
    color: white;
    writing-mode: vertical-rl;
    letter-spacing: 2px;
    z-index: 13;
    font-size: 15px;
  }

  .right-sidebar::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
    border-radius: 10px;
  }

  .right-sidebar::-webkit-scrollbar-thumb {
    background-color: #023535;
    border-radius: 10px;
  }

  .right-sidebar::-webkit-scrollbar-thumb:hover {
    background-color: #023535;
    border-radius: 10px;
  }

  .right-sidebar .menu {
    width: 30px;
  }

  .right-sidebar ul {
    display: flex;
    width: 50px;
    justify-content: space-around;
    padding: 20px 0;
  }

  .right-sidebar ul li {
    display: flex;
    align-items: center;
    position: relative;
    padding-bottom: 20px;
  }

  .right-sidebar ul li:after {
    content: "";
    background: url(../../assets/images/icon-sideline.png);
    background-size: 50px;
    background-repeat: repeat-x;
    position: absolute;
    bottom: -18px;
    right: 0px;
    width: 50px;
    height: 2px;
  }

  .right-sidebar ul li:before {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    top: -25px;
    background: url('../../assets/images/icon-ball.png');
    background-size: contain;
  }

  .right-sidebar ul li a {
    display: flex;
    align-items: center;
    padding: 0px 16px 0px;
  }

  .right-sidebar ul li:hover:before {
    opacity: 0.9;
    ;
  }

  .right-sidebar ul li a:hover {
    color: #DDCD0E;
  }

  .right-sidebar ul li a img {
    margin-top: 5px;
  }

  .left-sidebar-1 .logo {
    width: 35px;
    margin: 10px 7px;
  }

  .left-sidebar-1 {
    width: 285px;
    background: #023535;
    color: white;
    height: 100vh;
    overflow-y: scroll;
    position: fixed;
    left: 0;
    top: 0;
  }

  .left-sidebar-1::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
    border-radius: 10px;
  }

  .left-sidebar-1::-webkit-scrollbar-thumb {
    background-color: #023535;
    border-radius: 10px;
  }

  .left-sidebar-1::-webkit-scrollbar-thumb:hover {
    background-color: #023535;
    border-radius: 10px;
  }

  .left-sidebar-1 img {
    width: 25px;
    margin-right: 25px;
  }

  .left-sidebar-1 ul {
    padding-left: 10px;
    padding-right: 20px;
  }

  .left-sidebar-1 ul li {
    padding: 15px 0;
    position: relative;
    padding-left: 40px;
  }

  .left-sidebar-1 ul li:before {
    position: absolute;
    left: 2px;
    width: 27px;
    height: 27px;
    top: 10px;
    content: "";
  }

  .left-sidebar-1 ul li:nth-child(1):before {
    background: url(../../assets/images/icon-course.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(1):hover:before {
    background: url(../../assets/images/icon-course-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(2):before {
    background: url(../../assets/images/icon-info.png);
    background-size: 25px;
    background-repeat: no-repeat;
    top: 11px;
  }

  .left-sidebar-1 ul li:nth-child(2):hover:before {
    background: url(../../assets/images/icon-info-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(3):before {
    background: url(../../assets/images/icon-quarity.png);
    background-size: 25px;
    background-repeat: no-repeat;
    top: 15px;
  }

  .left-sidebar-1 ul li:nth-child(3):hover:before {
    background: url(../../assets/images/icon-quarity-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(4):before {
    background: url(../../assets/images/icon-dress.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(4):hover:before {
    background: url(../../assets/images/icon-dress-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(5):before {
    background: url(../../assets/images/icon-practice.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(5):hover:before {
    background: url(../../assets/images/icon-practice-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(6):before {
    background: url(../../assets/images/icon-monster.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(6):hover:before {
    background: url(../../assets/images/icon-monster-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(17):before {
    background: url(../../assets/images/icon-family.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(17):hover:before {
    background: url(../../assets/images/icon-family-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(7):before {
    background: url(../../assets/images/icon-privacy.png);
    background-size: 23px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(7):hover:before {
    background: url(../../assets/images/icon-privacy-g.png);
    background-size: 23px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(8):before {
    background: url(../../assets/images/icon-staff.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(8):hover:before {
    background: url(../../assets/images/icon-staff-g.png);
    background-size: 25px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:nth-child(9):before {
    background: url(../../assets/images/icon-link.png);
    background-size: 20px;
    background-repeat: no-repeat;
    left: 3px;
  }

  .left-sidebar-1 ul li:nth-child(9):hover:before {
    background: url(../../assets/images/icon-link-g.png);
    background-size: 20px;
    background-repeat: no-repeat;
  }

  .left-sidebar-1 ul li:hover {
    color: #DDCD0E;
  }

  .left-sidebar-1 ul li:after {
    content: "";
    background: url(../../assets/images/icon-sideline.png);
    background-size: 50px;
    background-repeat: repeat-x;
    position: absolute;
    bottom: 0;
    left: -12px;
    width: 300px;
    height: 2px;
  }

  .left-sidebar-2 {
    width: 250px;
    height: 100vh;
    overflow-y: scroll;
    position: fixed;
    left: 50px;
    top: 0;
    background: #0FC2C0;
    transition: 0.5s all;
    color: white;
    text-align: center;
  }

  .left-sidebar-2::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
    border-radius: 10px;
  }

  .left-sidebar-2::-webkit-scrollbar-thumb {
    background-color: #0FC2C0;
    border-radius: 10px;
  }

  .left-sidebar-2::-webkit-scrollbar-thumb:hover {
    background-color: #0FC2C0;
    border-radius: 10px;
  }

  .left-sidebar-1:hover~div {
    left: 285px;
    transition: 0.5s all;
  }

  .left-sidebar-2 .access {
    color: white;
    text-align: left;
    padding-bottom: 5px;
    font-size: 0.8rem;
  }

  .left-sidebar-2 .access img {
    height: 14px;
    margin-bottom: 3px;
    margin-right: 5px;
  }

  .left-sidebar-2 .access p {
    line-height: 21px;
    padding: 0 6px 0 10px;
    margin: 3px 0;
  }

  .left-sidebar-2 .access p span {
    margin-right: 5px;
    font-family: monospace;
    font-size: 0.9rem;
  }

  .left-sidebar-2 .member {
    padding: 0 20px;
  }

  .left-sidebar-2 .member img {
    width: 17px;
    margin-right: 10px;
  }

  .left-sidebar-2 .member b {
    margin: 20px 0;
    background: #015958;
    display: block;
    border-radius: 5px;
    font-size: 0.9rem;
    line-height: 24px;
    box-shadow: 1px 1px 3px #474747;
  }

  .left-sidebar-2 .member b a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 7px 10px;
    transition: 0.3s ease-in-out;
    border-radius: 5px;
  }

  .left-sidebar-2 .member b a:hover {
    background: #008f8c;
  }

  .left-sidebar-2 .member b a:before,
  .left-sidebar-2 .member b a:after {
    box-sizing: inherit;
    content: "";
    position: absolute;
    border: 2px solid transparent;
    width: 0;
    height: 0;
  }

  .left-sidebar-2 .member b a:before {
    top: 0;
    left: 0;
  }

  .left-sidebar-2 .member b a:after {
    bottom: 0;
    right: 0;
  }

  .left-sidebar-2 .member b a:hover:before,
  .left-sidebar-2 .member b a:hover:after {
    width: 100%;
    height: 100%;
  }

  .left-sidebar-2 .member b a:hover:before {
    border-top-color: #e2b65b;
    border-right-color: #e2b65b;
    transition: width 0.15s ease-out, height 0.15s ease-out 0.15s;
    border-radius: 5px;
  }

  .left-sidebar-2 .member b a:hover:after {
    border-bottom-color: #e2b65b;
    border-left-color: #e2b65b;
    border-radius: 5px;
    transition: border-color 0s ease-out 0.2s, width 0.15s ease-out 0.2s, height 0.15s ease-out 0.3s;
  }

  .left-sidebar-2 .side-facebook {
    overflow: hidden;
    margin-top: 10px;
  }

  .left-sidebar-2 .side-facebook iframe::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
    border-radius: 10px;
  }

  .left-sidebar-2 .side-facebook iframe::-webkit-scrollbar-thumb {
    background-color: #023535;
    border-radius: 10px;
  }

  .left-sidebar-2 .side-facebook iframe::-webkit-scrollbar-thumb:hover {
    background-color: #023535;
    border-radius: 10px;
  }

  .left-sidebar-2 .side-facebook iframe {
    margin-top: -69px;
  }

  .left-sidebar-2 .event {
    text-align: right;
    padding: 35px 25px 20px;
    font-size: 0.8rem;
    line-height: 2;
    border-bottom-width: 2px;
    border-top-width: 2px;
    border-color: #008F8C;
    border-style: solid;
    transition: 0.5s all;
  }

  .left-sidebar-2 .event h2 {
    text-align: center;
    position: relative;
    font-size: 15px;
    color: white;
    margin-bottom: 18px;
    z-index: 2;
    border-width: 1px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.5s all;
    background: #025958;
  }

  .left-sidebar-2 .event .h2-member {
    cursor: auto;
  }

  .sp-only {
    display: none;
  }

  #reserved-switch {
    display: none;
  }

  .left-sidebar-2 .event h2:hover {
    background: #018d8a;
    transition: 0.5s all;
  }

  .left-sidebar-2 .event .h2-member:hover {
    background: #068e8b;
    transition: 0.5s all;
  }

  .left-sidebar-2 .event h2:after {}

  .left-sidebar-2 .event {
    text-align: justify;
    height: 85px;
    overflow: hidden;
    transition: 0.5s all;
  }

  .left-sidebar-2 .event.memb {
    height: auto;
  }

  .left-sidebar-2 .event.active {
    text-align: justify;
    height: auto;
    transition: 0.5s all;
  }

  .left-sidebar-2 .event ul li {
    position: relative;
    padding-left: 17px;
    transition: 0.5 all;
  }

  .left-sidebar-2 .event ul li:hover {
    text-decoration: underline;
    color: #DDCD0E;
    transition: 0.5 all;
  }

  .left-sidebar-2 .event ul li:before {
    content: "・";
    position: absolute;
    width: 5px;
    height: 5px;
    top: 0px;
    left: 0px;
  }

  .left-sidebar-2 .club-info {
    text-align: right;
    padding: 35px 10px 20px;
    font-size: 0.8rem;
    line-height: 2;
    border-bottom-width: 2px;
    border-color: #008F8C;
    border-style: solid;
    transition: 0.5s all;
  }

  .left-sidebar-2 .club-info h2 {
    text-align: center;
    position: relative;
    font-size: 15px;
    color: white;
    margin-bottom: 18px;
    z-index: 2;
    border-width: 1px;
    border-radius: 3px;
    cursor: pointer;
    transition: 0.5s all;
    background: #025958;
  }

  .left-sidebar-2 .club-info .h2-member {
    cursor: auto;
  }

  .left-sidebar-2 .club-info h2:hover {
    background: #018d8a;
    transition: 0.5s all;
  }

  .left-sidebar-2 .club-info .h2-member:hover {
    background: #025958;
    transition: 0.5s all;
  }

  .left-sidebar-2 .club-info h2:after {}

  .left-sidebar-2 .club-info {
    text-align: justify;
    height: 85px;
    overflow: hidden;
    transition: 0.5s all;
  }

  .left-sidebar-2 .club-info.memb {
    height: auto;
  }

  .left-sidebar-2 .club-info.active {
    text-align: justify;
    height: auto;
    transition: 0.5s all;
  }

  .left-sidebar-2 .club-info ul li {
    position: relative;
    padding-left: 17px;
    transition: 0.5 all;
  }

  .left-sidebar-2 .club-info ul li:hover {
    text-decoration: underline;
    color: #DDCD0E;
    transition: 0.5 all;
  }

  .left-sidebar-2 .club-info ul li:before {
    content: "・";
    position: absolute;
    width: 5px;
    height: 5px;
    top: 0px;
    left: 0px;
  }

  .left-sidebar-2 .logo2 {
    width: 70px;
    margin-bottom: 20px;
  }

  .font-size-inner {
    padding: 20px 10px;
  }

  .font-size-inner {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 25px;
  }

  .font-size-inner p {
    font-size: 12px;
    color: #023535;
    margin-right: 14px;
  }

  .thanks-contents {
    text-align: center;
    border-width: 1px;
    padding: 30px;
    margin-bottom: 80px;
    border-color: #005958;
    margin-top: 20px;
    font-family: "myfont";
    line-height: 33px;
  }

  .news_content_wrapper {
    font-family: "myfont";
  }

  .thanks-contents h2 {
    display: block;
    font-size: 20px;
    border-bottom-width: 0;
    margin-bottom: 20px;
  }

  .font-size-inner .left.is_active {
    background: #023535;
    border-radius: 5px 0 0 5px;
    padding: 5px 10px;
    border-width: 0.5px;
    border-color: #023535;
    width: 63px;
    cursor: pointer;
    font-size: 14px;
    color: white;
  }

  .font-size-inner .right {
    color: #023535;
    border-radius: 0 5px 5px 0;
    padding: 5px 10px;
    border-width: 0.5px;
    border-color: #023535;
    background: white;
    width: 63px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'myfont-bold';
  }

  .font-size-inner .left {
    color: #023535;
    border-radius: 5px 0px 0px 5px;
    padding: 5px 10px;
    border-width: 0.5px;
    border-color: #023535;
    background: white;
    width: 63px;
    cursor: pointer;
    font-size: 14px;
  }

  .font-size-inner .right.is_active {
    background: #023535;
    border-radius: 0px 5px 5px 0px;
    padding: 5px 10px;
    border-width: 0.5px;
    border-color: #023535;
    width: 63px;
    cursor: pointer;
    font-size: 14px;
    font-family: 'myfont-bold';
    color: white;
  }


  .other-link {
    display: flex;
    background: white;
    justify-content: center;
    align-items: center;
    padding: 20px 5px;
  }

  .other-link .gora img {
    width: 70px;
    margin: 10px;
  }

  .other-link .line img {
    width: 105px;
    margin: 10px;
  }

  .list-button {
    color: #015958;
    background: white;
    border-radius: 5px;
    padding: 0px 15px;
    display: block;
    margin-top: 10px;
    font-size: 0.8rem;
    transition: .4s all;
    text-align: center;
  }

  .list-button a {
    display: block;
  }

  .list-button:hover {
    background: #015958;
    color: white;
    transition: .4s all;
  }

  .main-contents {
    width: calc(100vw - 350px);
    position: relative;
    left: 300px;
    top: 0;
    background: #0CABA8;
    min-height: 100vh;
  }

  .main-contents::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
    border-radius: 10px;
  }

  .main-contents::-webkit-scrollbar-thumb {
    background-color: #023535;
    border-radius: 10px;
  }

  .main-contents::-webkit-scrollbar-thumb:hover {
    background-color: #023535;
    border-radius: 10px;
  }

  .main-contents img {
    max-width: 100%;
  }

  .hero img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .hero {
    text-align: center;
    padding-top: 30vh;
    height: 100vh;
  }

  .hero video {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    z-index: 0;
  }

  .hero h2 {
    text-align: center;
    display: inline-block;
    font-family: 'myfont-robo';
    color: white;
    font-size: 26px;
    position: relative;
    z-index: 3;
  }

  .black-sheet {
    position: absolute;
    width: 100%;
    height: 100vh;
    top: 0;
    z-index: 1;
    background: #6b9178;
    opacity: 0.4;
  }

  .hero h2 img:nth-child(1) {
    display: block;
    position: relative;
    width: 125px;
    margin: 0 auto;
    margin-bottom: 25px;
  }

  .hero h2 img:nth-child(2) {
    display: block;
    position: relative;
    width: 595px;
    margin: 0 auto;
  }

  .weather {}

  .client {
    padding: 10px 0;
    background: #022424;
    position: relative;
  }

  .client li {
    margin: 0 10px;
  }

  .today-info {
    background: url(../../assets/images/img-today-info-back.png) #11c2c0;
    background-size: 90%;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 100px;
    background-position: center;
    padding-bottom: 100px;
    position: relative;
  }

  .today-info h2 {
    font-family: 'myfont-robo';
    color: white;
    font-size: 78px;
    margin-bottom: 10px;
    letter-spacing: 5px;
  }

  .today-info-contents {
    display: flex;
    background: white;
    border-style: solid;
    border-width: 2px;
    border-radius: 5px;
    border-color: #000000;
    padding: 20px 6px 20px 20px;
    max-width: 855px;
    margin: 0 auto;
    justify-content: flex-end;
  }

  .today-info-contents .left {
    width: 378px;
    margin-right: 30px;
  }

  .today-info-contents .left h3 {
    font-size: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-style: solid;
    border-bottom-width: 1.5px;
    padding-bottom: 5px;
  }

  .today-info-contents .left h3 span {
    font-size: 28px;
    width: 60px;
    display: inline-block;
    margin-top: 10px;
  }

  .today-info-contents .left h4 {
    font-size: 110px;
    color: #015958;
    font-family: 'myfont-bold';
  }

  .today-info-contents .right .right-inner {
    position: relative;
  }

  .today-info-contents .right p {
    position: absolute;
    top: -150px;
    left: 87px;
    font-size: 130px;
    color: #015958;
  }

  .today-info-contents .right span {
    position: absolute;
    bottom: 26px;
    right: 56px;
    font-size: 50px;
    color: white;
    font-family: 'myfont-bold';
  }

  .today-info-contents .right img {
    width: 390px;
  }

  .today-info h2 img {
    max-width: 920px;
    width: 100%;
  }

  .about {
    background: #076c6a url(../../assets/images/img-clubinfo.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    text-align: center;
    padding-top: 145px;
    background-position: top;
    padding-bottom: 100px;
    position: relative;
    background-attachment: fixed;
  }

  .about h2 {
    text-align: center;
    color: white;
    font-size: 200%;
  }

  .about h2 span {
    display: block;
    font-size: 150%;
  }

  .about h2 img {
    width: 490px;
    display: block;
    margin: 0 auto;
  }

  .about h3 {
    font-size: 28px;
    margin-bottom: 30px;
    font-family: 'myfont-bold';
  }

  .about-contents {
    width: 540px;
    text-align: justify;
    padding: 20px 0;
    line-height: 30px;
    color: white;
    margin: 0 auto;
    margin-top: 50px;
  }

  .about-contents h3 {
    text-align: center;
  }

  .about-contents p {}

  .link-button {
    font-size: 15px;
    background: #015958;
    border-color: #015958;
    border-width: 2px;
    color: white;
    padding: 3px 26px;
    border-radius: 4px;
    margin-top: 10px;
    display: inline-block;
    float: right;
    transition: 0.5s all;
  }

  .link-button:hover {
    font-size: 15px;
    color: #015958;
    background: white;
    transition: 0.5s all;
  }

  .link-button a {
    padding: 9px 26px;
    margin: 0 -26px;
  }

  .photo {
    background: #EEEEEF;
    padding: 130px 50px;
    position: relative;
  }

  .photo-wrapper {
    margin-top: 20px;
  }

  .photo-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .photo-contents {
    flex-basis: 50%;
    min-height: 300px;
    position: relative;
    color: white;
    overflow: hidden;
  }

  .photo-content {
    min-height: 300px;
    width: 100%;
    position: absolute;
    top: 0;
  }

  .photo-contents a {
    display: block;
    min-height: 300px;
    z-index: 1;
    position: relative
  }

  .photo-contents:nth-child(1) .photo-content {
    background: url(../../assets/images/img-photo-course.png);
    background-size: cover;
  }

  .photo-contents:nth-child(2) .photo-content {
    background: url(../../assets/images/img-photo-house.png);
    background-size: cover;
  }

  .photo-contents:nth-child(3) .photo-content {
    background: url(../../assets/images/img-photo-eat.png);
    background-size: cover;
  }

  .photo-contents:nth-child(4) .photo-content {
    background: url(../../assets/images/img-photo-other.png);
    background-size: cover;
  }

  .photo-contents p {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 23px;
    text-align: center;
    margin-top: 170px;
    font-family: 'myfont';
  }

  .photo-contents img {
    max-width: 68px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    margin-top: 120px;
    width: 13%;
  }

  .photo-contents .photo-content {
    transform: scale(1);
    transition: 1s all;
    z-index: -1;
  }

  .photo-contents .photo-content:hover {
    transform: scale(1.1);
    transition: 1s all;
  }

  .photo-contents:nth-child(1) img {
    margin-top: 110px;
  }

  .photo h2 {
    text-align: center;
    font-family: 'myfont-robo';
    font-size: 455%;
    letter-spacing: 7px;
    color: #023535;
  }

  .photo h2 img {
    width: 650px;
  }

  .nation-info {
    padding: 80px 30px;
    background: #076c6a;
    position: relative;
  }

  .nation-info-wrapper {
    max-width: 1400px;
    color: white;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    background: #008F8C;
    padding: 50px 30px;
  }

  .nation-info-wrapper h2 {
    font-size: 27px;
    border-bottom-width: 3px;
    border-color: #DDCD0E;
    border-style: solid;
    padding-bottom: 5px;
    margin-bottom: 20px;
  }

  .nation-info-wrapper p {
    line-height: 2;
  }

  .nation-info-wrapper h3 {
    font-size: 20px;
    line-height: 25px;
    margin-bottom: 20px;
    margin-top: 55px;
  }

  .nation-info-wrapper ul {
    line-height: 2.1;
    text-decoration: underline;
  }

  .nation-info-wrapper .left {
    max-width: 700px;
    padding-right: 30px;
  }

  .nation-info-wrapper .right {
    max-width: 275px;
    display: flex;
    padding: 30px;
    background: white;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .nation-info-wrapper .right img:nth-child(1) {
    width: 100%;
    max-width: 235px
  }

  .nation-info-wrapper .right img:nth-child(2) {
    width: 100%;
    max-width: 250px;
    padding: 20px 0;
  }

  .bag {
    max-width: 1400px;
    background: white;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    padding: 50px 30px;
    background: white url(../../assets/images/img-bag-back.png);
    background-size: 200px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
  }

  .bag .left {
    max-width: 750px;
    padding-right: 30px;
  }

  .bag h2 {
    font-size: 24px;
    line-height: 35px;
    margin-bottom: 30px;
  }

  .bag .left h3 {
    font-size: 24px;
    line-height: 25px;
    margin-bottom: 50px;
  }

  .bag ul {
    line-height: 2;
    text-decoration: underline;
  }

  .bag span {
    padding-top: 30px;
    display: block;
    ;
  }

  .bag .right img {
    max-width: 235px;
  }

  .nation-info-bag {
    display: flex;
    justify-content: center;
    padding: 30px;
    margin-bottom: 100px;
    background: #023535;
    margin-top: -1px;
  }

  .nation-info-bag-inner {
    background: white;
    padding: 20px 80px;
  }

  .nation-info-bag img {
    padding: 10px;
    max-width: 180px;
  }

  .line-friend {
    background: #015958;
    padding: 100px 20px;
  }

  .line-friend-wrapper {
    max-width: 1060px;
    display: flex;
    justify-content: center;
    background: white;
    margin: 0 auto;
  }

  .line-friend-wrapper .right {
    padding: 30px 50px;
    text-align: center;
  }

  .line-friend-wrapper .left {
    background: white url(../../assets/images/img-line-friend.png);
    background-size: cover;
    background-repeat: no-repeat;
    width: 70%;
  }

  .line-friend-wrapper .right h2 {
    font-size: 35px;
    color: #C2990F;
    display: inline-block;
    border-bottom-width: 3px;
    border-color: #008F8C;
    border-style: solid;
    padding-bottom: 5px;
    margin-bottom: 30px;
    float: left;
  }

  .line-friend-wrapper .right p {
    line-height: 2;
    text-align: justify;
    overflow: hidden;
    width: 100%;
    max-width: 550px;
  }

  .line-friend-wrapper .right p span {
    color: #30D712;
  }

  .line-friend-wrapper .right b {
    background: #30D712;
    color: white;
    display: inline-block;
    padding: 3px 26px 10px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-width: 2px;
    border-color: #30D712;
    transition: 0.5s all;
  }

  .line-friend-wrapper .right b:hover {
    color: #30D712;
    background: rgb(226, 255, 225);
    display: inline-block;
    transition: 0.5s all;
  }

  .line-friend-wrapper .right b a {
    padding: 10px 26px;
    margin: 0 -26px;
  }

  .line-friend-wrapper .right b img {
    width: 23px;
    margin-left: 10px;
    margin-bottom: -3px;
    margin-top: 3px;
  }

  footer {
    position: relative;
  }

  .footer-wrapper {
    display: flex;
  }

  .footer-wrapper .left {
    width: 50%;
    background: white;
    padding-bottom: 30px;
  }

  .footer-wrapper .left img {
    width: 100%;
  }

  .footer-wrapper .left .logo3 {
    max-width: 520px;
    margin: 30px 0 5px;
  }

  .footer-wrapper .right {
    width: 50%;
  }

  .footer-wrapper .right iframe {
    width: 100%;
    height: 100%;
  }

  .footer-inner {
    padding: 0 30px;
    line-height: 30px;
  }

  .footer-inner span {
    padding: 0px 17px;
    display: inline-block;
    border-style: solid;
    border-radius: 2px;
    border-width: 1px;
    font-size: 0.7rem;
    line-height: 1.9;
  }

  .footer-inner span:nth-child(2) {
    background: #008F8C;
    border-color: #008F8C;
    color: white;
  }

  .footer-inner span:nth-child(3) {
    background: #015958;
    border-color: #015958;
    color: white;
    margin: 0 5px;
  }

  footer b {
    display: block;
    text-align: center;
    color: white;
    padding: 15px;
    background: #015958;
  }

  footer b a {
    margin-left: 50px;
    text-decoration: underline;
  }

  footer small {
    background: #023332;
    display: block;
    text-align: center;
    padding: 5px 20px;
    color: white;
  }

  .footer-inner span:nth-child(4) {
    background: white;
    border-color: #707070;
    margin: 0 5px 0 0;
  }

  footer .news {
    position: fixed;
    right: 60px;
    bottom: 0px;
    z-index: 2;
  }

  footer .news img {
    width: 200px;
  }

  footer .news-title {
    margin-bottom: 20px;
    cursor: pointer;
  }

  footer .news-contents {
    height: 0;
    width: 250px;
    transition: 1s all;
    display: none;
    opacity: 0;
  }

  footer .news-contents.active {
    transition: 1s all;
    width: auto;
    height: auto;
    display: block;
    opacity: 1;
    height: 500px;
    width: 340px;
  }

  .balloon {
    display: none;
  }

  .right-sidebar ul li:hover .balloon {
    display: flex;
    align-items: center;
    position: absolute;
    max-width: 300px;
    margin-right: 15px;
    padding: .8em 1.2em;
    border: 3px solid #517807;
    border-radius: 5px;
    background-color: #fff;
    color: #287c04;
    left: -305px;
    writing-mode: horizontal-tb;
    font-size: 0.8rem;
    top: -21px;
  }

  .balloon::before,
  .balloon::after {
    position: absolute;
    right: -15px;
    width: 15px;
    height: 30px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    content: '';
  }

  .balloon::before {
    background-color: #517807;
  }

  .balloon::after {
    right: -11px;
    background-color: #fff;
  }

  .course-title-box {
    height: 450px;
    text-align: center;
    width: 100%;
  }

  .course-title-box.all {
    background: white url(../../assets/images/img-course-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: bottom;
  }

  .course-title-box.contact {
    background: white url(../../assets/images/img-contact-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position-y: bottom;
  }

  .course-title-box h1 {
    font-size: 29px;
    padding-top: 200px;
    color: white;
  }

  .course-title-box h1 span {
    font-size: 43px;
    line-height: 50px;
    display: block;
    margin-top: 5px;
  }

  .course-wrapper {
    background: white;
    padding: 80px 50px;
    text-align: center;
    color: #023535;
  }

  .course-wrapper h2 {
    color: #023535;
    font-size: 58px;
    line-height: 77px;
    margin-bottom: 80px;
  }

  .course-map-all {
    margin-bottom: 150px;
  }

  .course-map-all img {
    width: 100%;
    max-width: 900px;
  }

  .course-late {
    display: flex;
    justify-content: center;
    max-width: 1000px;
    margin: 0 auto;
    margin-top: 50px;
  }

  .course-late img {
    width: 50%;
    padding: 5px;
  }

  .course-inner {
    padding-bottom: 100px;
    max-width: 1200px;
    margin: 0 auto;
  }

  .title-section {
    display: flex;
    justify-content: center;
    margin-bottom: 80px;
  }

  .title-section h3 {
    font-size: 48px;
    line-height: 63px;
    border-bottom-width: 2.4px;
  }

  .title-section.hole {
    align-items: flex-end;
  }

  .title-section.hole h3 {
    font-size: 35px;
    line-height: 63px;
    border-bottom-width: 2.4px;
  }

  .title-section.hole h3 span {
    font-size: 58px;
    line-height: 77px;
    margin-right: 15px;
  }

  .title-section img {
    height: 70px;
  }

  .course-contents {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
  }

  .course-contents.all {
    justify-content: center;
  }

  .course-contents img {
    flex-basis: calc(100% / 3);
    padding: 7px;
    max-width: 300px;
  }

  .course-title-box.hole1 {
    background: white url(../../assets/images/img-course-1-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole2 {
    background: white url(../../assets/images/img-course-2-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole3 {
    background: white url(../../assets/images/img-course-3-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole4 {
    background: white url(../../assets/images/img-course-4-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole5 {
    background: white url(../../assets/images/img-course-5-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole6 {
    background: white url(../../assets/images/img-course-6-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole7 {
    background: white url(../../assets/images/img-course-7-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole8 {
    background: white url(../../assets/images/img-course-8-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole9 {
    background: white url(../../assets/images/img-course-9-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole10 {
    background: white url(../../assets/images/img-course-10-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole11 {
    background: white url(../../assets/images/img-course-11-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole12 {
    background: white url(../../assets/images/img-course-12-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole13 {
    background: white url(../../assets/images/img-course-13-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole14 {
    background: white url(../../assets/images/img-course-14-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole15 {
    background: white url(../../assets/images/img-course-15-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole16 {
    background: white url(../../assets/images/img-course-16-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole17 {
    background: white url(../../assets/images/img-course-17-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.hole18 {
    background: white url(../../assets/images/img-course-18-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-contents .left {
    max-width: 580px;
    width: 40%;
    padding-right: 50px;
  }

  .course-viede {
    padding: 50px 0;
  }

  video {
    width: 100%;
  }

  .course-contents .left img {
    width: 100%;
    max-width: 100%;
  }

  .course-contents .right {
    text-align: left;
    width: 60%;
  }

  .course-contents .right img {
    max-width: 480px;
    margin: 50px 0;
  }

  .course-contents .right h4 {
    font-size: 28px;
    line-height: 37px;
    color: #008F8C;
    display: inline-block;
    margin-right: 20px;
    width: 70px;
  }

  .course-contents .right ul {
    display: flex;
  }

  .course-contents .right ul li {
    margin: 5px;
    border-style: solid;
    border-width: 1px;
    border-radius: 50px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #008F8C;
  }

  .course-contents .right ul li a {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50px;
  }

  .course-contents .right ul li a:hover {
    background: #008F8C;
    color: white;
  }

  .course-contents .right ul .active {
    background: #008F8C;
    color: white;
  }

  .other-course-link-box {
    display: flex;
    padding: 10px 0;
    max-width: 480px;
  }

  .other-course-link-box.first {
    margin-top: 50px;
    border-style: solid;
    border-bottom-width: 2px;
    position: relative;
    border-color: #023332;
  }

  .other-course-link-box.first:after {
    position: absolute;
    content: "⚫︎";
    font-size: 17px;
    right: -5px;
    bottom: -10px;
  }

  .course-button {
    text-align: center;
    margin-top: 80px;
  }

  .course-button b {
    padding: 15px 30px;
    background: #015958;
    border-radius: 5px;
    color: white;
  }

  .tabs {
    margin: 10px auto;
    position: relative;
    background: white;
  }

  .tab-buttons span {
    font: 400 14px 'open sans', sans-serif;
    color: white;
    background: #008F8C;
    cursor: pointer;
    border-bottom: 2.5px solid #023332;
    display: block;
    float: left;
    text-align: center;
    height: 40px;
    line-height: 40px;
    width: 25%;
  }

  .tab-buttons span:nth-child(1) {
    border-left-width: 0;
  }

  .tab-buttons span:nth-child(4) {
    border-right-width: 0;
  }

  .tab-content {
    padding: 15px 0;
    background: white;
    display: inline-block;
    width: 100%;
  }

  #lamp {
    width: 25%;
    height: 2.5px;
    background: #ff3e3e;
    display: block;
    position: absolute;
    top: 37.5px;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }

  #lamp.content2 {
    left: calc(25% - 2px);
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }

  #lamp.content3 {
    left: calc(50% - 5px);
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }

  #lamp.content4 {
    left: 75%;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }

  #lamp.content1 {
    left: 1px;
    transition: all .3s ease-in;
    -o-transition: all .3s ease-in;
    -webkit-transition: all .3s ease-in;
    -moz-transition: all .3s ease-in;
  }

  .galerry-photo {
    display: flex;
    flex-wrap: wrap;
  }

  .galerry-photo .smoke-wrapper {
    height: 150px;
    max-width: 300px;
    overflow: hidden;
  }

  .galerry-photo .smoke-wrapper img {
    width: auto;
    height: 150px;
  }

  .galerry-photo .modalContents {
    text-align: center;
  }

  .galerry-photo .modalContents img {
    max-width: 800px;
    width: 100%;
    height: auto;
    max-height: 500px;
  }

  .galerry-photo .galerry-photo-contents {
    flex-grow: 1;
    object-fit: cover;
    height: 150px;
    max-width: 300px;
    position: relative;
    min-width: 200px;
  }

  .galerry-photo-contents .smoke-wrapper .smoke {
    background: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    cursor: pointer;
    transition: 0.5s all;
  }

  .galerry-photo-contents .smoke-wrapper button {
    display: none;
  }

  .galerry-photo-contents .smoke-wrapper:hover .smoke {
    background: rgba(6, 35, 7, 0.5);
    transition: 0.5s all;
    z-index: 2;
  }

  .galerry-photo-contents .smoke-wrapper:hover button {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    width: 100%;
    padding: 0 20px;
    background: no-repeat;
    color: white;
    border-width: 0;
    height: 100%;
    line-height: 30px;
    z-index: 10;
  }


  /* モーダルCSS */
  .modalArea {
    display: none;
    position: fixed;
    z-index: 10;
    /*サイトによってここの数値は調整 */
    top: 0px;
    left: 0;
    width: 100%;
    height: 100vh;
  }

  .modalBg {
    width: 100%;
    height: 100vh;
    background-color: rgba(30, 30, 30, 0.9);
  }

  .modalWrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1000px;
    padding: 10px 5px;
    background-color: #fff;
    max-height: 98vh;
  }

  .closeModal {
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    cursor: pointer;
    background: white;
    border-radius: 50px;
    padding: 2px;
  }


  /* 以下ボタンスタイル */
  button {
    padding: 10px;
    background-color: #fff;
    border: 1px solid #282828;
    border-radius: 2px;
    cursor: pointer;
  }

  .galerry-wrapper {
    position: relative;
    z-index: 2;
  }

  .galerry-title-box {
    height: 450px;
    text-align: center;
    width: 100%;
  }

  .galerry-title-box {
    background: white url(../../assets/images/img-course-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .galerry-title-box h1 {
    font-size: 29px;
    padding-top: 200px;
    color: white;
  }

  .galerry-title-box h1 span {
    font-size: 43px;
    line-height: 50px;
    display: block;
    margin-top: 5px;
  }

  .galerry-inner {
    background: white;
    padding: 80px 50px;
  }

  .login-title-box {
    height: 450px;
    text-align: center;
    width: 100%;
    background: white url(../../assets/images/img-login-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }


  .login-title-box h1 {
    font-size: 29px;
    padding-top: 200px;
    color: white;
  }

  .login-title-box h1 span {
    font-size: 43px;
    line-height: 50px;
    display: block;
    margin-top: 5px;
  }

  .login-wrapper {
    background: white;
  }

  .login-inner {
    text-align: center;
    padding: 100px 50px 200px;
  }

  .login-inner h2 {
    font-size: 35px;
    line-height: 35px;
    color: #015958;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 15px;
  }

  .login-inner p {
    font-size: 1.2rem;
    line-height: 40px;
  }

  .login-contents {
    max-width: 580px;
    margin: 0 auto;
    margin-top: 50px;
    border-width: 1px;
    padding: 0 50px 100px;
    border-color: #707070;
    background: #FCFCFC;
    border-radius: 10px;
    position: relative;
    padding-top: 70px;
  }

  .login-contents .login-title {
    position: absolute;
    max-width: 370px;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: -19px;
  }

  .login-input {
    display: flex;
    flex-wrap: nowrap;
    border-style: solid;
    border-width: 1px;
    border-radius: 10px;
    background: #F2F2F2;
    padding: 5px 15px;
    align-items: center;
    margin-bottom: 20px;
    border-color: #707070;
    min-height: 50px;
  }

  .login-input:nth-child(2) {
    background: #FCFCFC;
  }

  .sp-only {
    display: none;
  }

  .login-input img {
    width: 30px;
    padding-right: 10px;
    border-right-width: 1px;
    border-right-color: #707070;
    margin-right: 10px;
  }

  .login-input input {
    text-align: left;
    padding-left: 10px;
    font-size: 1.2rem;
    line-height: 1.2;
    width: 100%;
  }

  .login-input input::placeholder,
  textarea::placeholder {
    color: #9E9E9E;
  }

  /* Edge */
  .login-input input::-ms-input-placeholder,
  textarea::-ms-input-placeholder {
    color: #9E9E9E;
  }

  /* IE11 & IE10 */
  .login-input input:-ms-input-placeholder,
  .login-input textarea:-ms-input-placeholder {
    color: #9E9E9E;
  }

  .login-submit {
    width: 115px;
    background: #0CABA8;
    color: white;
    border-radius: 10px;
    height: 45px;
    float: right;
    margin-top: 20px;
  }

  .login-info {
    max-width: 700px;
    text-align: left;
    margin: 0 auto;
    margin-top: 100px;
    border-width: 1px;
    border-color: #0FC2C0;
    padding: 30px;
    position: relative;
  }

  .login-info h3 {
    font-size: 24px;
    color: #146665;
    margin-bottom: 30px;
  }

  .login-info p {
    position: relative;
    z-index: 2;
    font-size: 1rem;
    padding-right: 50px;
    line-height: 2;
    padding: 0;
    margin: 0;
    max-width: 530px;
  }

  .login-info img {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 100%;
    z-index: 0;
  }

  .restaurant-title-box {
    height: 450px;
    text-align: center;
    width: 100%;
    background: white url(../../assets/images/img-restaurant-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 70px;
  }

  .main-contents.restaurant {
    background: white;
  }

  .restaurant-title-box h1 {
    font-size: 29px;
    padding-top: 200px;
    color: white;
  }

  .restaurant-title-box h1 span {
    font-size: 43px;
    line-height: 50px;
    display: block;
    margin-top: 5px;
  }

  .mini-header-wrapper {
    background: white;
    padding: 10px 50px;
    position: sticky;
    top: 0;
    z-index: 2;
  }

  .mini-header {}

  .mini-header ul {
    display: flex;
    justify-content: center;
  }

  .mini-header ul li {
    color: #015958;
    font-size: 1.2rem;
    line-height: 2;
    padding: 1px 20px;
    margin: 6px;
    border-width: 1px;
    border-radius: 5px;
    border-color: #015958;
  }

  .mini-header ul li:hover {
    background: #025958;
    color: white;
  }

  .mini-header ul li a {
    padding: 5px 20px;
    margin: 0 -20px;
  }

  .restaurant-wrapper h2 {
    font-size: 32px;
    line-height: 50px;
    color: #015958;
    text-align: center;
    padding: 50px 0;
  }

  .restaurant-info {
    background: #0CABA8;
    color: white;
    padding: 50px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
  }

  .restaurant-info .left {
    flex-basis: 70%;
    padding-right: 50px;
    max-width: 520px;
  }

  .restaurant-info .left h3 {
    font-size: 28px;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    padding-bottom: 5px;
    border-color: #DDCD0E;
    margin-bottom: 30px;
  }

  .restaurant-info .left p {
    font-size: 1.1rem;
  }

  .restaurant-info .left ul {
    line-height: 2;
  }

  .restaurant-info .left img {
    width: 100%;
    max-width: 480px;
  }

  .restaurant-info .right {
    display: flex;
  }

  .restaurant-info .right img {
    max-width: 180px;
    margin: 0 10px;
  }

  .restaurant-menu {
    padding: 100px 50px;
  }

  .restaurant-menu span {
    font-size: 0.8rem;
  }

  .restaurant-menu-contents h4 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 50px 0 30px;
  }

  .restaurant-menu-wrapper {
    display: flex;
    margin: 0 auto;
    margin-bottom: 80px;
    justify-content: space-between;
    max-width: 920px;
    margin-top: 30px;
    align-items: flex-end;
  }

  .restaurant-menu-contents {
    flex-basis: 47%;
  }

  .restaurant-menu-contents .inner-p {
    display: flex;
    justify-content: space-between;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    margin-bottom: 10px;
    margin-left: 5px;
  }

  .restaurant-menu-contents .inner-p p {
    margin: 0;
  }

  .restaurant-menu-wrapper2 {
    max-width: 920px;
    margin: 0 auto;
    padding-top: 80px;
    margin-top: -80px;
  }

  .restaurant-menu-wrapper2 h4 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 50px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
  }

  .restaurant-menu-wrapper2 h5 {
    font-size: 18px;
    padding-left: 17px;
    border-left-width: 5px;
    border-left-color: #707070;
    margin: 50px 0 15px;
  }

  .restaurant-menu-wrapper h5 {
    font-size: 18px;
    padding-left: 17px;
    border-left-width: 5px;
    border-left-color: #707070;
    margin: 0px 0 15px;
  }

  .restaurant-menu-inner {
    display: flex;
    flex-wrap: wrap;
    max-width: 920px;
    justify-content: space-between;
    margin: 0 auto;
  }

  .restaurant-menu-photo {
    max-width: 430px;
    margin-bottom: 40px;
    width: 100%;
  }

  .menu-photo-img {
    width: 100%;
    height: 280px;
  }

  .restaurant-menu-inner img {
    width: 100%;
  }

  .restaurant-menu-photo .inner-p {
    display: flex;
    justify-content: space-between;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    padding: 15px 0 0;
    font-size: 1.1rem;
  }

  .restaurant-menu-photo .inner-p p {
    margin: 0;
  }

  .restaurant-menu-photo .inner-p p span {
    font-size: 1rem;
  }

  .topping-wrapper {
    display: flex;
    max-width: 920px;
    margin: 0 auto;
    justify-content: space-between;
  }

  .topping-wrapper .inner-p {
    display: flex;
    justify-content: space-between;
    border-bottom-style: dashed;
    border-bottom-width: 1px;
    padding: 15px 0 0;
    font-size: 1.1rem;
  }

  .topping-wrapper .inner-p p {
    margin: 0;
  }

  .topping-wrapper .left {
    max-width: 430px;
    margin-bottom: 20px;
    flex-basis: 47%;
  }

  .topping-wrapper .right {
    max-width: 430px;
    margin-bottom: 20px;
    flex-basis: 47%;
  }

  .restaurant-menu-inner3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .restaurant-menu-wrapper3 {
    max-width: 920px;
    margin: 0 auto;
    padding-top: 80px;
    margin-top: -80px;
  }

  .restaurant-menu-wrapper3 h4 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 50px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
  }

  .restaurant-menu-wrapper3 h5 {
    font-size: 18px;
    padding-left: 17px;
    border-left-width: 5px;
    border-left-color: #707070;
    margin: 50px 0 15px;
  }

  .restaurant-menu-wrapper3 h6 {
    font-size: 1rem;
    line-height: 2;
    color: #D00808;
    font-family: 'myfont';
    font-weight: normal;
  }

  .course-title-box.practice {
    background: white url(../../assets/images/img-practice-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .practice-wrapper {
    text-align: center;
    background: white;
    padding: 150px 50px;
  }

  .practice-coution {
    max-width: 700px;
    padding: 30px;
    margin: 0 auto;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    border-color: #0FC2C0;
    background: white url(../../assets/images/img-bag-back.png);
    background-size: 110px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    margin-bottom: 150px;
  }

  .practice-coution h2 {
    font-size: 24px;
    color: #146665;
    padding-bottom: 10px;
  }

  .practice-coution p {
    max-width: 530px;
  }

  .practice-contents {
    text-align: left;
    max-width: 960px;
    margin: 0 auto;
  }

  .practice-contents h2 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 50px 0 50px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
  }

  .practice-content {
    display: flex;
    justify-content: space-between;
  }

  .practice-content .left,
  .practice-content .right {
    padding: 0 20px;
  }

  .practice-contents img {
    max-width: 430px;
  }

  .practice-contents b {
    display: block;
    font-size: 1.2rem;
    text-align: center;
    padding: 30px 20px 30px;
  }

  .practice-contents h3 img {
    width: 85px;
    margin-bottom: -10px;
  }

  .practice-contents h3 {
    border-bottom-width: 1.5px;
    border-color: #D4AF37;
    border-style: solid;
    padding-bottom: 5px;
    margin-bottom: 150px;
  }

  .practice-contents h3 span {
    color: #D00808;
  }

  .course-title-box.staff {
    background: white url(../../assets/images/img-staff-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .staff-wrapper {
    background: white;
    padding: 150px 50px;
    text-align: center;
  }

  .staff-wrapper h2 {
    color: #015958;
    padding-bottom: 5px;
    border-bottom-width: 2px;
    border-style: solid;
    font-size: 35px;
    display: inline-block;
  }

  .staff-wrapper h3 {
    font-size: 1.3rem;
    padding: 20px;
    margin-bottom: 150px;
  }

  .staff-contents {
    text-align: left;
    max-width: 960px;
    margin: 0 auto;
    margin-bottom: 80px;
  }

  .staff-contents h2 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 50px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
  }

  .staff-contents table {
    line-height: 2;
    border-width: 1px;
    border-color: #0CABA8;
    width: 100%;
  }

  .staff-contents th {
    background: rgba(15, 194, 191, 0.158);
    padding: 20px;
    border-bottom-width: 1px;
    border-color: #0CABA8;
    border-style: solid;
    vertical-align: middle;
    min-width: 190px;
  }

  .staff-contents td {
    padding: 20px;
    border-bottom-width: 1px;
    border-color: #0CABA8;
    border-style: solid;
  }

  .course-title-box.rate {
    background: white url(../../assets/images/img-courselate-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-rate-wrapper {
    background: white;
    padding: 150px 50px;
    text-align: center;
  }

  .course-rate-wrapper h2 {
    color: #015958;
    font-size: 35px;
    border-bottom-width: 3px;
    display: inline-block;
    padding-bottom: 10px;
    margin-bottom: 30px;
  }

  .pdf-wrapper {
    display: flex;
    justify-content: space-around;
  }

  .pdf-button p {
    line-height: 1;
  }

  .pdf-button a {
    background: #015958;
    color: white;
    border-radius: 5px;
    padding: 1px 30px;
    display: block;
  }

  .rate-mini-header {
    position: sticky;
    top: 0;
    background: white;
    padding: 10px;
    z-index: 3;
  }

  .rate-mini-header ul {
    display: flex;
    justify-content: center;
  }

  .rate-mini-header ul li {
    border-style: solid;
    border-width: 1px;
    border-color: #015958;
    color: #015958;
    padding: 10px 30px;
    font-size: 1.3rem;
    border-radius: 5px;
    margin: 0 20px;
  }

  .rate-mini-header ul li:hover {
    background: #025958;
    color: white;
  }

  .course-rate-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .course-rate-box {
    flex-basis: 50%;
    max-width: 430px;
  }

  .modalContents {
    text-align: center;
  }

  .modalContents p {
    text-align: left;
    padding: 0 20px;
    margin-top: -10px;
  }

  .modalContents img {
    height: 80vh;
    width: auto;
  }

  .modalContents img {
    max-width: 100%;
    height: auto;
    max-height: 96vh;
  }

  .course-rate-wrapper2 {
    background: white;
    padding: 100px 50px;
    text-align: center;
  }

  .course-rate-contents {
    max-width: 960px;
    margin: 0 auto;
    padding-top: 70px;
  }

  .course-rate-contents h2 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 150px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
    text-align: left;
  }

  .course-rate-contents h2 span {
    color: #0FC2C0;
    margin-left: 30px;
  }

  .course-rate-content {
    text-align: left;
  }

  .course-rate-content h3 {
    font-size: 18px;
    padding-left: 17px;
    border-left-width: 5px;
    border-left-color: #707070;
    margin: 50px 0 15px;
    border-bottom-width: 1px;
    border-bottom-style: dashed;
    padding-bottom: 3px;
  }

  .photo-img {
    position: relative;
  }

  .photo-img button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    text-align: center;
    background: no-repeat;
    border-style: none;
  }

  .course-title-box.battle {
    background: white url(../../assets/images/img-battle-pg-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .battle-wrapper {
    background: white;
    padding: 150px 50px;
    text-align: center;
  }

  .battle-callender h2 {
    display: inline-block;
    border-bottom-width: 2px;
    padding-bottom: 3px;
    border-bottom-style: solid;
    color: #015958;
    font-size: 35px;
  }

  .my-calendar {}

  .my-calendar .heading:not(.widget .mc-main .heading) {
    margin-bottom: 0px !important;
  }

  .mc-main .my-calendar-navigation>div {
    display: flex !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
  }

  .mc-date-container .mc-change-months {
    color: white !important;
    background: #ddcd0f !important;
    width: 40px !important;
    border-radius: 5px !important;
    font-size: 12px !important;
  }

  .mc-date-container.has-month {
    padding: 2px 8px !important;
  }

  .calendar.js-modal.button.button-link.url.summary div {
    line-height: 1.1;
    letter-spacing: -1px;
    font-size: 0.8rem;
  }

  .mc-main .mc-list li.mc-events {
    margin: 30px 0 !important;
  }

  .course-title-box.facilities {
    background: white url(../../assets/images/img-facilities-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 75px;
  }

  .facilities-inner h2 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 0px 0 30px;
    /* margin: 150px 0 30px; */
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
    text-align: left;
  }

  .facilities-wrapper {
    background: white;
    margin-top: -150px;
    padding: 150px 50px;
  }

  .facilities-wrapper img {
    width: 100%;
  }

  .facilities-2 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 30px;
  }

  .facilities-2 .facilities-content {
    flex-basis: 49%;
  }

  .facilities-3 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    margin-bottom: 30px;
  }

  .facilities-3 .facilities-content {
    flex-basis: 32%;
  }

  .my-calendar-modal {
    top: 2vh !important;
    max-height: 96vh !important;
  }

  .weekend {
    background: #f1ffff !important;
  }



  .course-title-box.price {
    background: white url(../../assets/images/img-price-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 25px;
  }

  .price-wrapper {
    background: white;
    text-align: center;
    padding: 250px 50px;
    margin-top: -100px;
  }

  .price-contents h2 {
    color: #015958;
    font-size: 35px;
  }

  .price-contents h3 {
    color: #015958;
    font-size: 24px;
    margin-top: 30px;
    border-bottom-width: 2px;
    border-style: solid;
    padding-bottom: 5px;
    display: inline-block;
  }

  .price-callender {
    padding-top: 100px;
  }

  .price-callender-wrapper {
    display: flex;
    max-width: 980px;
    justify-content: space-between;
    margin: 0 auto;
    flex-wrap: wrap;
  }

  .price-content {
    max-width: 470px;
    margin-top: 10px;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
  }

  .price-content h4 {
    background: #0CABA8;
    color: white;
    font-size: 24px;
    margin-bottom: 10px;
    padding: 3px;
  }

  .price-content a {
    display: block;
    width: 175px;
    margin: 0 auto;
    margin-top: 20px;
    background: #008F8C;
    color: white;
    border-radius: 5px;
    padding: 5px;
  }

  .price-conpetition {
    padding-top: 100px;
    display: flex;
    max-width: 980px;
    justify-content: space-between;
    margin: 0 auto;
  }

  .price-conpetition-content h4 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 150px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
    text-align: left;
  }

  .price-conpetition-content {
    max-width: 470px;
  }

  .price-conpetition-content img {
    /* max-width: 450px; */
    max-height: 90vh;
  }

  .course-title-box.quality {
    background: white url(../../assets/images/img-quality-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .single-wrapper {
    background: white;
    padding: 100px 50px;
    text-align: center;
  }

  .single-inner h2 {
    background: #008F8C;
    font-size: 28px;
    text-align: center;
    padding: 10px 20px;
    display: inline-block;
    width: 480px;
    border-radius: 0 0 5px 5px;
    margin-bottom: 50px;
    color: white;
  }

  .single-contents {
    text-align: left;
  }

  .single-inner {
    border-color: #008F8C;
    border-width: 2px;
    border-radius: 5px;
    border-style: solid;
    max-width: 960px;
    margin: 0 auto;
    padding: 0 50px 100px 50px;
  }

  .single-inner ol li h3 {
    font-size: 1.1rem;
    padding-left: 17px;
    border-left-width: 5px;
    border-left-color: #707070;
    margin: 50px 0 15px;
    border-style: dashed;
    border-bottom-width: 1px;
    padding-bottom: 3px;
    border-left-style: solid;
  }

  .single-inner ol {
    counter-reset: count 0;
    margin-left: 50px;
    margin-bottom: 100px;
  }

  .single-inner ol li {
    position: relative;
    margin-bottom: 50px;
  }

  .single-inner ol li:before {
    content: counter(count) "";
    counter-increment: count 1;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    background: #008F8C;
    position: absolute;
    left: -50px;
    top: -3px;
    color: white;
    font-size: 16px;
    text-align: center;
    line-height: 28px;
  }

  .single-inner ol li .ol-p {
    padding-left: 20px;
  }

  .single-contents .president {
    text-align: right;
    font-size: 24px;
  }

  .single-contents .president span {
    display: block;
    margin-bottom: 5px;
    font-size: 1rem;
  }

  .course-title-box.usage {
    background: white url(../../assets/images/img-usage-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .sub-title {
    font-size: 35px;
    color: #015958;
    border-bottom-style: solid;
    border-bottom-width: 3px;
    padding-bottom: 4px;
    display: inline-block;
    margin-bottom: 50px;
  }

  .single-contents h3 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 150px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
    text-align: left;
  }

  .single-contents ul {
    padding-top: 50px;
    line-height: 4;
    list-style: disc;
    padding-left: 40px;
  }

  .course-title-box.monster {
    background: white url(../../assets/images/img-monster-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .single-info {
    max-width: 960px;
    padding: 30px;
    margin: 0 auto;
    text-align: left;
    border-style: solid;
    border-width: 1px;
    border-color: #0FC2C0;
    background: white url(../../assets/images/img-bag-back.png);
    background-size: 110px;
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: bottom;
    margin-bottom: 150px;
  }

  .single-info h5 {
    font-size: 24px;
    color: #146665;
    padding-bottom: 10px;
  }

  .single-info p {
    padding-right: 150px;
  }

  .single-contents {
    max-width: 960px;
    margin: 0 auto;
  }

  .course-title-box.personal {
    background: white url(../../assets/images/img-personal-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .single-contents h4 {
    font-size: 1.1rem;
    padding-left: 17px;
    border-left-width: 5px;
    border-left-color: #707070;
    margin: 50px 0 15px;
    border-style: dashed;
    border-bottom-width: 1px;
    padding-bottom: 3px;
    border-left-style: solid;
    text-align: left;
    display: inline-block;
  }

  .course-title-box.info {
    background: white url(../../assets/images/img-news-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .news-wrapper {
    background: white;
    padding: 100px 50px;
    text-align: center;
  }

  .news-wrapper h2 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 0px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
    text-align: left;
  }

  .news-wrapper h2 span {
    display: inline-block;
    font-size: 0.9rem;
    margin-left: 20px;
  }

  .news-box {
    display: flex;
    padding-bottom: 30px;
    margin-bottom: 30px;
    border-bottom-width: 1px;
    border-bottom-style: solid;
    justify-content: center;
  }

  .news-box .left {
    width: 30%;
  }

  .news-box .right {
    padding: 0 30px;
    text-align: left;
    width: 70%;
  }

  .news-box .right h4 {
    color: #191919;
    font-size: 28px;
  }

  .news-box .right p {
    background: #E9FBFA;
    padding: 0 10px;
    font-size: 1.3rem;
  }

  .news-box .right span {
    background: #008F8C;
    color: white;
    padding: 4px 10px;
    margin-right: 10px;
    display: inline-block;
    margin-bottom: 5px;
  }

  .course-title-box.event {
    background: white url(../../assets/images/img-event-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .course-title-box.member {
    background: white url(../../assets/images/img-member-back.jpg);
    background-size: cover;
    background-repeat: no-repeat;
  }

  .member-wrapper {
    text-align: center;
    margin: 0 auto;
    background: white;
    padding: 50px;
  }

  .member-wrapper h2 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 0px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    color: #000000;
    display: block;
    text-align: left;
  }

  .member-inner {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
  }

  .logout-button {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #f23051;
    color: white;
    border-radius: 5px;
    font-size: 15px;
    display: inline-block;
    padding: 5px 3px;
    border-style: solid;
    border-width: 1px;
    padding-top: 2px;
    border-color: #c40202;
  }

  .member-logout {
    width: 100px;
  }

  .logout-button:hover {
    opacity: 0.8;
  }

  .member-inner table {
    width: 100%;
    border-style: solid;
  }

  .member-inner table .table-title {
    background: #0CABA8;
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 22px;
  }

  .member-inner table th {
    border-style: solid;
    border-color: #0CABA8;
    padding: 0px 0px 0 5px;
    text-align: left;
    width: 85px;
    letter-spacing: -1px;
    vertical-align: bottom;
    border-bottom-width: 1px;
    padding-bottom: 1px;
    padding-top: 10px;
    color: #ffffff;
    font-weight: normal;
  }

  .member-inner table tr:nth-child(1) th {
    /* display: none; */
  }

  .member-inner table td {
    border-style: solid;
    border-color: #0CABA8;
    padding: 0px 0px;
    text-align: right;
    font-size: 18px;
    border-bottom-width: 1px;
    line-height: 1;
    padding-bottom: 0px;
    padding-top: 10px;
    white-space: nowrap;
  }

  body::-webkit-scrollbar {
    background: transparent;
    width: 0px;
    height: 5px;
    border-radius: 10px;
  }

  body::-webkit-scrollbar-thumb {
    background-color: #023535;
    border-radius: 10px;
  }

  body::-webkit-scrollbar-thumb:hover {
    background-color: #023535;
    border-radius: 10px;
  }

  .news-inner {
    max-width: 1200px;
    margin: 0 auto;
  }

  .news-content.result {
    margin-bottom: 200px;
  }

  .news-content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
  }

  .tornament-scheduled {
    max-width: 700px !important;
    margin: 0 auto;
    margin-bottom: 100px;
  }

  .contact-all-wrapper {
    background: white;
    line-height: 27px;
    text-align: center;
    padding: 100px 50px;
  }

  .contact-all-wrapper h2 {
    font-size: 35px;
    line-height: 80px;
    color: #015958;
    margin-bottom: 50px;
  }

  .contact-all-wrapper iframe {
    width: 100%;
    height: 450px;
  }

  .contact-all-wrapper h3 {
    font-size: 28px;
    padding-left: 20px;
    border-left-width: 5px;
    border-left-color: #D4AF37;
    margin: 50px 0 30px;
    border-bottom-width: 1px;
    border-bottom-color: #707070;
    padding-bottom: 3px;
    text-align: left;
  }

  .access-table {
    text-align: left;
    border-color: #0CABA8;
    border-width: 2px;
    border-style: solid;
    width: 100%;
  }

  .access-table th {
    background: #e9fafa;
    padding: 20px;
    border-right-width: 1px;
    font-size: 1.1;
    border-color: #0CABA8;
  }

  .access-table td {
    padding: 20px;
  }

  .access-table .under {
    border-bottom-width: 1px;
    border-color: #0CABA8;
  }

  .contact-wrapper {
    background: white;
    padding: 50px;
    text-align: center;
  }

  .contact-wrapper h2 {
    font-size: 35px;
    line-height: 60px;
    color: #015958;
    margin-bottom: 50px;
    display: inline-block;
    border-bottom-width: 2px;
    padding-bottom: 0px;
    border-style: solid;
    border-color: #015958;
  }

  .contact-wrapper .contact-info {
    text-align: left;
  }

  .contact-wrapper .contact-info span {
    color: #008F8C;
  }

  .contact-table table {
    width: 100%;
    margin-bottom: 50px;
    border-color: #0CABA8;
    border-width: 2px;
    border-style: solid;
  }

  .mw_wp_form {
    text-align: left;
    width: 100%;
  }

  .mw_wp_form th {
    background: #e9fafa;
    padding: 20px;
    border-right-width: 1px;
    font-size: 1.1;
    border-color: #0CABA8;
    border-bottom-width: 1px;
    border-color: #0CABA8;
  }

  .mw_wp_form td {
    padding: 20px;
    border-bottom-width: 1px;
    border-color: #0CABA8;
  }

  .contact-table table input,
  .contact-table table textarea,
  .captcha-contents input {
    border-width: 1px;
    padding: 5px 20px;
    border-color: #696971;
    border-radius: 3px;
  }

  .captcha-contents {
    text-align: center;
    margin-bottom: 50px;
  }

  .captcha-contents input {
    width: 300px;
    margin-top: 20px;
    padding: 15px 20px;
  }

  .captcha-contents img {
    width: 300px;
    margin-bottom: 30px;
  }

  .submit-contents {
    text-align: center;
  }

  .submit-contents input {
    width: 300px;
    background: #008F8C;
    color: white;
    padding: 14px 20px;
    border-radius: 3px;
    box-shadow: 0px 3px 6px #b8b8b8;
    margin-bottom: 200px;
  }

  .top-access {
    background: white url(../../assets/images/img-logo-bk.png);
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 1px;
  }

  .top-logo-title {
    padding: 20px 10px 10px 20px;
  }

  /**
     * ポップアップ
    */
  .information-wrapper {
    position: relative;
    box-sizing: border-box;
    position: fixed;
    top: 50%;
    left: 50%;
    width: 375px;
    line-height: 22px;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 99;
  }

  #popup:before {
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-news-line.png) center center;
    background-size: 390px;
    width: 390px;
    height: 25px;
    background-position-y: 0;
    background-repeat: no-repeat;
    right: -5px;
    top: -30px;
  }

  #popup:after {
    content: "";
    position: absolute;
    background: url(../../assets/images/icon-news-line.png) center center;
    background-size: 390px;
    width: 390px;
    height: 25px;
    background-position-y: 0;
    background-repeat: no-repeat;
    right: -5px;
    bottom: -30px;
  }

  #popup {}

  .popup_inner {
    padding: 15px 20px 0;
    border-width: 10px;
    border-radius: 3px;
    border-color: #e95d3d;
    background: white;
  }

  .eraser_button {
    display: block;
    width: 20px;
    line-height: 20px;
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 25px;
    color: #e95d3d;
  }

  label span:hover {
    cursor: pointer;
  }

  input[type="checkbox"] {
    display: none;
  }

  input[type="checkbox"]:checked~.eraser_button {
    display: none;
  }

  input[type="checkbox"]:checked~#popup {
    display: block;
    transition: .2s;
    display: none;
  }

  .popup_inner h2 {
    text-align: center;
    padding-top: 20px;
  }

  .popup_inner h2 img {
    height: 30px;
  }

  .popup_inner h5 {
    text-align: center;
    font-size: 45px;
    font-weight: bold;
    margin-top: 13px;
    letter-spacing: 4px;
    color: #e95d3d;
  }

  .popup_contents {
    padding: 50px 20px 30px;
    line-height: 25px;
    color: black;
    text-align: left;
  }

  .popup_contents h4 {
    text-align: center;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
  }

  .popup_contents h3 {
    text-align: center;
    background: #b8af53;
    color: white;
    font-size: 25px;
    line-height: initial;
    padding: 10px 10px;
    border-radius: 5px;
    margin-bottom: 20px;
    display: inline-block;
    font-weight: bold;
  }

  .popup_contents p {
    color: #5c5714;
    text-align: left;
  }

  .footer-smart-menu {
    display: none;
  }

  .my-calendar-navigation {
    margin-top: 50px !important;
  }

  .my-calendar-nav {
    display: none !important;
  }

  .my-calendar-modal-close {
    top: 97px !important;
    right: 6px !important;
  }

  .mc-main .category-key li.current a {
    border: 0px solid var(--highlight-dark) !important;
  }

  .reserved-excel-wrapper {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    margin-bottom: 50px;
  }

  .reserved-excel {
    display: block;
    width: 175px;
    margin: 0 auto;
    margin-top: 20px;
    background: #008F8C;
    color: white;
    border-radius: 5px;
    padding: 5px;
  }

  .reserved-excel:hover {
    opacity: 0.7;
  }

}