body {
  font-family: "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "HiraMinProN-W3", "HGS明朝E", "ＭＳ Ｐ明朝", "MS PMincho", serif;
  font-size: 100%;
  line-height: 1.7;
  margin: 0;
  padding: 0;
  color: #555;
  position: relative;
}

html,
body,
header,
nav,
article,
section,
time,
footer,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
p,
pre,
blockquote,
table,
th,
td {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 100%
}

ul,
ol {
  list-style: none
}

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

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

body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  -webkit-transition: opacity .8s ease;
  -ms-transition: opacity .8s ease;
  -moz-transition: opacity .8s ease;
  transition: opacity .8s ease
}

body.fadeout::after {
  opacity: 1
}

body.fadeout article {
  -webkit-transform: scale(1.2);
  transform: scale(1.2)
}

.gothic {
  font-family: "游ゴシック Medium", YuGothic, YuGothicM, "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, sans-serif
}
.gothic.small-txt {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #ddd;
  font-size: 13px;
}
.greenbox {
  position: relative;
  text-align: center;
  padding: 15px 0;
  background-color: #e3fda2;
  color: #555;
  font-size: 16px
}

@media screen and (min-width: 768px) {
  .greenbox {
    font-size: 21px
  }
}

.greenbox:after {
  content: '';
  height: 0;
  position: absolute;
  width: 0;
  border: 15px solid transparent;
  border-top-color: #e3fda2;
  top: 100%;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (min-width: 768px) {
  .greenbox:after {
    border: 30px solid transparent;
    border-top-color: #e3fda2
  }
}

.dot-text {
  padding-top: .3em;
  background-position: top left -2px;
  background-repeat: repeat-x;
  background-size: 1.05em .4em;
  background-image: radial-gradient(0.07em 0.07em at center center, #555, #555 100%, transparent)
}
@media screen and (max-width: 767px) {
    .dot-text {
        background: none;
        text-emphasis-style:dot filled;
        -webkit-text-emphasis-style:dot filled;
    }
}
header {
  width: 100%;
  height: 70px;
  padding-top: 13px;
  background-color: #fff;
  position: fixed;
  z-index: 999
}

header img {
  width: 100%
}

header .container {
  position: relative
}

header .logo {
  float: left;
  width: 45%;
  margin: 0
}

header .telnum {
  float: left;
  color: #00A199;
  margin-top: 10px
}

header .telnum a {
  color: #00A199
}

header .telnum h2 {
  font-size: 100%;
  font-weight: bold
}

header .telnum p {
  font-size: 80%
}

@media screen and (min-width: 768px) {
  header {
    height: 100px;
    padding-top: 9px
  }

  header .logo {
    width: 100px
  }

  header img {
    height: 100%;
    width: auto
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  header .logo {
    width: 80px
  }
}

@media screen and (min-width: 768px) {
  header .telnum {
    display: block;
    float: left;
    margin-top: 18px
  }

  header .telnum a {
    color: #00A199
  }

  header .telnum h2 {
    font-size: 120%;
    font-weight: bold
  }

  header .telnum p {
    font-size: 80%
  }
}

@media screen and (min-width: 768px) and (min-width: 1200px) {
  header .telnum {
    margin-top: 10px
  }

  header .telnum h2 {
    font-size: 150%;
    font-weight: bold
  }

  header .telnum p {
    font-size: 120%
  }
}

@media screen and (min-width: 768px) {
  header nav {
    float: right
  }

  header nav ul li {
    background-color: #00A199;
    margin: 25px 0 25px 10px;
    width: 150px;
    padding: 3px 0;
    text-align: center;
    border-radius: 30px
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
  header nav ul li {
    width: auto;
    font-size: 80%;
    margin-top: 30px
  }
}

@media screen and (min-width: 768px) {
  header nav ul li:hover {
    background-color: #90C01E;
    color: #fff;
    text-decoration: none
  }
}

.sec00 {
  height: 50px;
  background-color: #fff
}

@media screen and (min-width: 768px) {
  .sec00 {
    height: 100px
  }
}

.sec01 {
  height: 59.9vw;
  position: relative;
  background-image: url(../img/bk01.jpg);
  background-size: cover;
  position: relative
}

.sec01 .catch {
  position: absolute;
  right: 3%;
  top: 45%;
  transform: translateY(-50%)
}

.sec01 .catch img {
  width: 100%
}

.sec01 .catch2 {
  position: absolute;
  left: 50%;
  bottom: 5%;
  transform: translateX(-50%);
  width: 90%
}

.sec01 .catch2 img {
  width: 100%
}

@media screen and (min-width: 768px) {
  .sec01 {
    background-image: url(../img/top.jpg)
  }
}

.sec02 {
  text-align: center
}

.sec02 .kakaku {
  width: 95%;
  margin: 0 auto;
  padding-top: 20px
}

.sec02 .kakaku img {
  width: 100%
}

#fixed_navi {
    display: none;
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 999;
}
@media screen and (max-width: 767px) {
    #fixed_navi {
        display: none;
    }
}
.sec02 .copy {
  padding: 15px 5px
}

.sec02 .copy p {
  font-size: 16px;
  letter-spacing: 0.05em
}

.sec02 .copy p span {
  font-size: 19px
}

.sec02 .copy img {
  width: 210px
}

.sec02 .tell,
.sec02 .mail,
.sec02 .counseling {
  position: relative;
  font-size: 11px;
  height: 70px;
  padding: 25px 0
}

.sec02 .tell img,
.sec02 .mail img,
.sec02 .counseling img {
  position: relative;
  z-index: 5;
  margin-right: .5em
}

.sec02 .tell a,
.sec02 .mail a,
.sec02 .counseling a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -999px;
  z-index: 2
}

.sec02 .tell {
  color: #fff;
  background-color: #666
}

.sec02 .mail {
  color: #555;
  background-color: #d3fb6e
}

.sec02 .counseling {
  color: #fff;
  background-color: #f8407a
}

@media screen and (min-width: 768px) {
  .sec02 .copy {
    padding: 15px 0px;
    height: 79px
  }

  .sec02 .copy p {
    font-size: 11px
  }

  .sec02 .copy p span {
    font-size: 11px
  }

  .sec02 .copy img {
    width: 140px
  }

  .sec02 .tell,
  .sec02 .mail,
  .sec02 .counseling {
    height: 79px;
    padding: 30px 0
  }
}

@media screen and (min-width: 992px) {
  .sec02 .copy {
    height: 84px
  }

  .sec02 .copy p {
    font-size: 12px
  }

  .sec02 .copy p span {
    font-size: 17px
  }

  .sec02 .copy img {
    width: 200px
  }

  .sec02 .tell,
  .sec02 .mail,
  .sec02 .counseling {
    font-size: 15px;
    height: 84px
  }
}

@media screen and (min-width: 1200px) {
  .sec02 .copy p {
    font-size: 16px
  }

  .sec02 .copy p span {
    font-size: 20px
  }
}

.sec03 {
  padding: 50px 0
}

.sec03 .container {
  max-width: 850px
}

.sec03 h2 {
  text-align: center;
  background-image: url(../img/fukidashi.png);
  background-size: 19em;
  background-repeat: no-repeat;
  background-position: bottom;
  padding-bottom: 30px;
  margin-bottom: 20px
}

.sec03 h3 {
  color: #f8407a;
  margin-bottom: 5px
}

.sec03 h3 .check {
  width: 15px;
  margin: -5px 5px 0 0
}

.sec03 p {
  font-size: 13px;
  line-height: 2em;
  margin-bottom: 20px
}

.sec03 img {
  width: 100%;
  margin-bottom: 50px
}

.sec03 .img02 {
  margin-bottom: 0px
}

@media screen and (min-width: 768px) {
  .sec03 {
    letter-spacing: 0.1em
  }

  .sec03 h2 {
    font-size: 25px;
    background-repeat: no-repeat;
    background-position: bottom;
    padding-bottom: 40px;
    margin-bottom: 20px
  }

  .sec03 h3 {
    font-size: 21px;
    margin-bottom: 18px
  }

  .sec03 p {
    font-size: 18px;
    margin-bottom: 18px
  }

  .sec03 img {
    width: 240px;
    margin-bottom: 50px
  }

  .sec03 .img01_box {
    text-align: left
  }

  .sec03 .img02_box {
    text-align: right
  }

  .sec03 .img02 {
    margin-top: -100px
  }
}

.sec04 {
  padding: 50px 10px;
  background-image: url(../img/bk02.jpg);
  background-size: cover;
  background-position: center center
}

.sec04 h2,
.sec04 h3 {
  text-align: center;
  line-height: 1.5em
}

.sec04 h2 {
  color: #f8407a;
  margin-bottom: 10px
}

.sec04 h3,
.sec04 p {
  color: #555
}

.sec04 h3 {
  margin-bottom: 20px
}

.sec04 h3 span {
  border-bottom: 1px solid #555
}

.sec04 p {
  font-size: 14px;
  padding: 0 10px
}

.sec04 p span {
  font-weight: bold
}

.sec04 .box {
  position: relative;
  max-width: 700px;
  margin: 0 auto;
  padding: 60px 10px 20px;
  background: rgba(255, 255, 255, 0.5)
}

.sec04 .box .box_top {
  position: absolute;
  bottom: 95%;
  left: 50%;
  transform: translateX(-50%)
}

@media screen and (min-width: 768px) {
  .sec04 {
    background-position: center 10%;
    padding: 100px 0px
  }

  .sec04 h2,
  .sec04 h3 {
    line-height: 1.5em
  }

  .sec04 h2 {
    font-size: 25px;
    margin-bottom: 10px;
    letter-spacing: 0.15em
  }

  .sec04 h3 {
    font-size: 18px;
    letter-spacing: 0.1em
  }

  .sec04 h3 span {
    border-bottom: 1px solid #555
  }

  .sec04 .box {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
    padding: 60px 40px 40px;
    background: rgba(255, 255, 255, 0.5)
  }

  .sec04 .box .box_top {
    position: absolute;
    bottom: 95%;
    left: 50%;
    transform: translateX(-50%)
  }
}

.sec05 .menu01,
.sec05 .menu02,
.sec05 .menu03,
.sec13 menu01 {
  padding: 50px 10px
}

.sec05 .menu01 h3,
.sec05 .menu02 h3,
.sec05 .menu03 h3,
.sec13 h3 {
  font-size: 25px;
  margin-bottom: 20px
}

.sec05 .menu01 .red,
.sec05 .menu02 .red,
.sec05 .menu03 .red,
.sec13 .menu01 .red {
  color: #f8407a;
  letter-spacing: 0.08em
}

.sec05 .menu01 .menu_visual01,
.sec05 .menu01 .menu_visual02,
.sec05 .menu01 .menu_visual03,
.sec05 .menu02 .menu_visual01,
.sec05 .menu02 .menu_visual02,
.sec05 .menu02 .menu_visual03,
.sec05 .menu03 .menu_visual01,
.sec05 .menu03 .menu_visual02,
.sec05 .menu03 .menu_visual03,
.sec13 .menu01 .menu_visual01 {
  text-align: center
}

.sec05 .menu01 .menu_visual01 img,
.sec05 .menu01 .menu_visual02 img,
.sec05 .menu01 .menu_visual03 img,
.sec05 .menu02 .menu_visual01 img,
.sec05 .menu02 .menu_visual02 img,
.sec05 .menu02 .menu_visual03 img,
.sec05 .menu03 .menu_visual01 img,
.sec05 .menu03 .menu_visual02 img,
.sec05 .menu03 .menu_visual03 img,
.sec13 .menu01 .menu_visual01 img {
  margin-bottom: 20px
}

.sec05 .menu01 .menu_visual01 img,
.sec05 .menu01 .menu_visual02 img,
.sec05 .menu02 .menu_visual01 img,
.sec05 .menu02 .menu_visual02 img,
.sec05 .menu03 .menu_visual01 img,
.sec05 .menu03 .menu_visual02 img,
.sec13 .menu01 .menu_visual01 img {
  width: 100%;
/*  max-width: 177.5px */
}

.sec05 .menu01 .menu_visual03 img,
.sec05 .menu02 .menu_visual03 img,
.sec05 .menu03 .menu_visual03 img,
.sec13 .menu01 .menu_visual01 img {
  width: 80%;
  max-width: 284px
}

.sec05 .menu01 {
  background-color: #fff
}

.sec05 .menu02 {
  background-color: #f7f7f7
}

.sec05 .menu03 {
  background-color: #fff
}

@media screen and (min-width: 768px) {

  .sec05 .menu01,
  .sec05 .menu03 {
    padding: 0;
    height: 380px
  }
  .sec05 .menu02 {
    padding: 0;
    height: 420px
  }
  .sec05 .menu01 .menu_box,
  .sec05 .menu02 .menu_box,
  .sec05 .menu03 .menu_box {
    padding: 50px 0px;
    width: 900px;
    height: 100%;
    margin: 0 auto;
    position: relative
  }
  .sec05 .menu02 .menu_box2 {
    padding: 50px 0px;
    width: 900px;
    height: 100%;
    margin: 0 auto;
    position: relative
  }
  .sec05 .menu01 h3,
  .sec05 .menu02 h3,
  .sec05 .menu03 h3 {
    font-size: px;
    margin-bottom: 20px;
    width: 80%
  }

  .sec05 .menu01 p,
  .sec05 .menu03 p {
    width: 50%
  }
  .sec05 .menu02 p {
    width: 50%
  }
  .mini_txt {
    font-size: .8em !important;
    line-height: 1.8;
    }
  .sec05 .menu02 h4 {
    margin: 10px 0 10px 33%;
    padding: 0 60px;
    position: relative;
    display: inline-block;
    width: 50%;
    text-align: center;
  }
  .sec05 .menu02 h4:before, .sec05 .menu02 h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 150px;
    height: 1px;
    background-color: #888;
}
    .sec05 .menu02 h4:before { left:0; }
    .sec05 .menu02 h4:after { right: 0; }

  .sec05 .menu01 .red,
  .sec05 .menu02 .red,
  .sec05 .menu03 .red,
  .sec13 .menu01 .red {
    font-size: 12px;
    letter-spacing: 0.3em;
    padding-left: 5px;
    margin-bottom: 5px
  }

  .sec05 .menu01 .menu_visual01,
  .sec05 .menu01 .menu_visual02,
  .sec05 .menu01 .menu_visual03,
  .sec05 .menu02 .menu_visual01,
  .sec05 .menu02 .menu_visual02,
  .sec05 .menu02 .menu_visual03,
  .sec05 .menu03 .menu_visual01,
  .sec05 .menu03 .menu_visual02,
  .sec05 .menu03 .menu_visual03,
  .sec13 .menu01 .menu_visual01 {
    position: absolute
  }

  .sec05 .menu01 .menu_visual01 img,
  .sec05 .menu01 .menu_visual02 img,
  .sec05 .menu01 .menu_visual03 img,
  .sec05 .menu02 .menu_visual01 img,
  .sec05 .menu02 .menu_visual02 img,
  .sec05 .menu02 .menu_visual03 img,
  .sec05 .menu03 .menu_visual01 img,
  .sec05 .menu03 .menu_visual02 img,
  .sec05 .menu03 .menu_visual03 img {
    margin-bottom: 0px;
    max-width: none
  }

  .sec05 .menu01 .menu_visual01,
  .sec05 .menu02 .menu_visual01,
  .sec05 .menu03 .menu_visual01 {
    right: 0%;
    bottom: 0%;
    text-align: right
  }

  .sec05 .menu01 .menu_visual01 img,
  .sec05 .menu02 .menu_visual01 img,
  .sec05 .menu03 .menu_visual01 img {
    width: 50%
  }

  .sec05 .menu01 .menu_visual02,
  .sec05 .menu02 .menu_visual02,
  .sec05 .menu03 .menu_visual02 {
    left: 0%;
    top: 60px;
    text-align: left;
  }

  .sec05 .menu01 .menu_visual02 img,
  .sec05 .menu02 .menu_visual02 img,
  .sec05 .menu03 .menu_visual02 img {
    width: 50%
  }

  .sec05 .menu01 .menu_visual03,
  .sec05 .menu02 .menu_visual03,
  .sec05 .menu03 .menu_visual03,
  .sec13 .menu01 .menu_visual01 {
    right: 0%;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    text-align: center;
  }

  .sec05 .menu01 .menu_visual03 img,
  .sec05 .menu02 .menu_visual03 img,
  .sec05 .menu03 .menu_visual03 img {
    width: 80%
  }

  .sec05 .menu02 h3 {
    margin-left: auto;
    text-align: right;
  }
  .sec05 .menu02 p {
    margin-left: auto;
  }
}

@media screen and (max-width: 767px) {
      .sec05 .menu02 h4 {
    margin: 10px auto;
    padding: 0 30%;
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
  }
  .sec05 .menu02 h4:before, .sec05 .menu02 h4:after {
    content: '';
    position: absolute;
    top: 50%;
    display: inline-block;
    width: 30%;
    height: 1px;
    background-color: #888;
    }
    .sec05 .menu02 h4:before { left:0; }
    .sec05 .menu02 h4:after { right: 0; }
      .mini_txt {
        font-size: .8em !important;
        line-height: 1.8;
    }
    .ope_box .about .box h4:before, .ope_box .about .box h4:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 30% !important; height: 1px; background-color: #888; }
    .ope_box .about .box h4:before { left:0; }
    .ope_box .about .box h4:after { right: 0; }
}

.sec06 {
  padding: 80px 10px 0;
  background-image: url(../img/bk06.jpg);
  background-position: center center;
  background-size: cover
}

.sec06 .box {
  position: relative;
  max-width: 700px;
  margin: 0 auto 30px;
  padding: 60px 10px 20px;
  background: rgba(255, 255, 255, 0.8)
}

.sec06 .box .box_top {
  position: absolute;
  bottom: 97%;
  left: 50%;
  transform: translateX(-50%)
}

.sec06 .box h2 {
  color: #f8407a;
  text-align: center;
  margin-bottom: 20px
}

.sec06 .box p {
  font-size: 14px;
  padding: 0 10px 20px
}

.sec06 .box p span {
  font-weight: bold
}

.sec06 .box .syomei {
  width: 90%;
  max-width: 335px;
  padding: 0 10px 20px
}

.sec06 .director {
  width: 100%;
  margin: 0 auto;
  text-align: center
}

.sec06 .director img {
  width: 70%;
  max-width: 300px;
  max-height: 300px;
  object-fit: cover;
  object-position: 100% 0
}

@media screen and (min-width: 768px) {
  .sec06 {
    padding: 150px 0 50px
  }

  .sec06 .my_container {
    position: relative;
    width: 1200px;
    max-width: 95%;
    margin: 0 auto
  }

  .sec06 .box {
    position: relative;
    max-width: 52vw;
    width: 800px;
    padding: 60px;
    margin: 0 0px 20px auto;
    background: rgba(255, 255, 255, 0.8)
  }

  .sec06 .box .box_top {
    position: absolute;
    bottom: 97%;
    left: 50%;
    transform: translateX(-50%)
  }

  .sec06 .box h2 {
    font-size: 26px;
    letter-spacing: 0.2em;
    line-height: 1.5em
  }

  .sec06 .box p {
    margin-bottom: 0px;
    line-height: 1.8em
  }

  .sec06 .box p span {
    font-weight: bold
  }

  .sec06 .box .syomei {
    width: 98%;
    max-width: 100%
  }

  .sec06 .director {
    width: 500px;
    max-width: 44vw;
    position: absolute;
    bottom: -80px;
    left: -6%;
    margin: 0
  }

  .sec06 .director img {
    width: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain
  }
}

.sec07, .sec08, .sec09, .sec10, .sec11, .sec12 {
  padding: 10px 0
}
.sec07 .my_container, .sec08 .my_container, .sec09 .my_container, .sec10 .my_container, .sec11 .my_container, .sec12 .my_container {
  padding: 0 10px
}
.sec07 .ttl, .sec08 .ttl, .sec09 .ttl, .sec10 .ttl, .sec11 .ttl {
  text-align: center;
  background-color: #f8407a;
  color: #fff;
  padding: 15px 0;
  letter-spacing: 0.2em
}
    .sec12 .ttl {
        text-align: center;
        background-color: #408ef8;
        color: #fff;
        padding: 15px 0;
        letter-spacing: 0.2em
    }
.ope_box .about { background-color: #f7f7f7; }
.ope_box .about img { width: 100% }
.ope_box .about .box { padding: 10px }
.ope_box .about .box ul { padding-left: 1em; margin-bottom: 20px; }
.ope_box .about .box ul li { padding-left: 1em; text-indent: -1.5em; color: #f8407a }
.ope_box .about .box ul li img { width: 1em; margin-top: -5px; margin-right: .5em }
.ope_box .about .box p { font-size: 14px; margin-bottom: 20px }
.ope_box .about .box .col-md { border: 1px solid #333; padding: 15px }
@media screen and (max-width: 767px) {
    .ope_box .about .box .col-md { width: 90%; margin: 0 auto 20px }
}
.ope_box .about .box .list_ttl { text-align: center; margin-bottom: 10px }
.ope_box .about .box ul.list { margin: 0; padding-left: -1em }
.ope_box .about .box ul.list li { font-size: 14px; color: #555; padding-left: 1em; text-indent: -1.2em }
.ope_box .about .box h3 { font-size: 21px; display: inline; vertical-align: middle}
.ope_box .about .box h4 { margin: 0 auto 5px; padding: 0 100px; position: relative; display: inline-block; width: 100%; text-align: center;
  }
.ope_box .about .box h4:before, .ope_box .about .box h4:after { content: ''; position: absolute; top: 50%; display: inline-block; width: 180px; height: 1px; background-color: #888; }
.ope_box .about .box h4:before { left:0; }
.ope_box .about .box h4:after { right: 0; }
.ope_box .about .box .white_box { display: inline; vertical-align: middle; width: auto; font-size: 12px; border: 1px solid #555; background-color: #fff; padding: 2px 10px; margin: 0 5px }
.ope_box .about .box .fee { text-align: center; margin-bottom: 20px }
.ope_box .about .box .fee img { max-width: 280px }
.ope_box .about .box .fee_box { margin-bottom: 5px; text-align: right; }
.ope_box .about .box .fee_box img { width: auto; }
.ope_box .about .box .gray_box { text-align: center; background-color: #656565 }
.ope_box .about .box .gray_box p { color: #fff; letter-spacing: .2em; padding: 5px 0 }
.ope_box .about .box .annotation { margin-bottom: 20px }
.ope_box .about .box .annotation p { font-size: 12px; margin: 0; padding-left: 1.8em; text-indent: -1.8em }
.sec09 .about { padding-top: 5%; }
.sec09 .about img.sp { margin-bottom: 5%; }
@media screen and (min-width: 768px) {
    .ope_box .my_container { max-width: 1200px; margin: 0 auto; padding: 0 }
    .ope_box .ttl { font-size: 21px }
    .sec07 .about { background: url(../img/bk07.jpg) top center no-repeat; background-size: contain }
    .sec08 .about { background: url(../img/bk08.jpg) right 90% no-repeat; background-size: cover }
    .sec09 .about { background: url(../img/illust_pc.png) left 15px no-repeat; background-size: contain }
    .sec10 .about { background: url(../img/bk10.jpg) 70% center no-repeat; background-size: cover }
    .sec11 .about { background: url(../img/bk11.jpg) 20% center no-repeat; background-size: cover }
    .sec12 .about { padding-bottom: 180px; background: #f7f7f7 url(../img/bk09.png) left bottom no-repeat; background-size: 60%; }
    .ope_box.right_txt .about .box { width: 50%; min-width: 500px; margin-left: auto; padding: 30px }
    
    .sec07.ope_box.right_txt .about .box { width: 100%; padding: 600px 30px 30px }
    .sec09.ope_box.right_txt .about .box { width: 100%; padding: 20% 30px 30px }
    
    .sec12.ope_box.left_txt .about .box { display: inline-block; width: 49%; vertical-align: top; }
    .ope_box.left_txt .about .box { width: 50%; min-width: 500px; margin-right: auto; padding: 30px }
    .ope_box .about .box ul { padding-left: 1em; margin-bottom: 20px }
    .ope_box .about .box ul li { line-height: 2em; font-size: 19px }
    .ope_box .about .box p { font-size: 16px }
    .ope_box .about .box .col-md { margin-bottom: 20px; padding: 20px 0 }
}
@media screen and (min-width: 768px) and (min-width: 1158px) {
    .ope_box .about .box .col-md { margin-bottom: 20px}
}
@media screen and (min-width: 768px) {
    .ope_box .about .box h3 { font-size: 21px; vertical-align: middle; letter-spacing: 0.1em }
    .ope_box .about .box .white_box { display: inline; vertical-align: middle; width: auto; font-size: 12px; border: 1px solid #555; background-color: #fff; padding: 2px 5px 2px 10px; margin: 0 10px; letter-spacing: 0.1em }
    .ope_box .about .box .fee { text-align: center; margin-bottom: 20px }
}
@media screen and (min-width: 768px) and (min-width: 1158px) {
    .ope_box .about .box .fee { display: inline }
}
@media screen and (min-width: 768px) {
    .ope_box .about .box .fee img { width: 240px; max-width: none; margin-top: 10px }
}
@media screen and (min-width: 768px) and (min-width: 1158px) {
    .ope_box .about .box .fee img { margin-top: -40px; margin-left: 20px }
}¥
@media screen and (min-width: 768px) {
    .ope_box .about .box .gray_box { margin-top: 20px }
    .ope_box .about .box .gray_box p { color: #fff; letter-spacing: .2em; padding: 5px 0 }
    .ope_box .about .box .annotation { margin-bottom: 20px }
    .ope_box .about .box .annotation p { font-size: 10px; letter-spacing: -0.08em; line-height: 2em; margin: 0; padding-left: 1.8em; text-indent: -1.8em }
}

  .sec13 .menu_box {
    padding: 80px 0px;
    width: 800px;
    height: 100%;
    margin: 0 auto;
    position: relative
  }
  .sec13 h3 {
    margin-bottom: 20px;
    width: 80%;
  }
  .sec13 .menu01 p {
    width: 60%
  }
    .sec14 {
        text-align: center;
    }
    .sec14 h3 {
        margin: 40px auto 20px;
        font-size: 20px;
    }
    .sec14 p {
        margin: 20px auto;
    }
@media screen and (max-width: 767px) {
    .sec13 .menu_box {
        padding: 0;
        width: 100%;
    }
    .sec13 .menu01 {
        padding: 30px 10px;
    }
    .sec13 .menu01 p { width: 100%; }
    .sec14 iframe{
        width: 100%;
        height: 300px;
    }
}

footer {
  padding: 2% 0 7%;
  color: #fff;
  background-color: #aaa;
  text-align: center
}

.pc {
  display: none
}

.sp {
  display: block
}

@media screen and (min-width: 768px) {
  .pc {
    display: block
  }

  .sp {
    display: none
  }
}

header nav {
  margin-right: -16px
}

header nav ul {
  display: flex;
  align-items: center
}

header nav ul li a {
  color: #333;
  text-decoration: none;
  padding: 10px 16px
}

header nav ul li a:hover {
  color: #333
}

#nav_toggle {
  display: none
}

@media screen and (max-width: 767px) {
  nav {
    display: none;
    position: absolute;
    top: 50px;
    width: 100%;
    background: #F7F7F7;
    left: 0
  }

  header nav ul {
    display: block;
    margin: 0 auto;
    width: 90%
  }

  header nav ul li {
    margin: 0 auto;
    text-align: center;
    border-bottom: 1px solid #333
  }

  header nav ul li:last-child {
    border-bottom: none
  }

  header nav ul li a {
    display: block
  }
}

@media screen and (max-width: 767px) {
  .tel_btn {
    float: right;
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    top: 0;
    right: 25px;
    z-index: 100;
    background-color: #f8407a;
    border-radius: 4px  
  }
  .tel_btn img {
    width: 24px;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%)
  }
  .tel_btn p {
    text-align: center;
    color: #fff;
    font-size: 13px;
    position: absolute;
    z-index: 3;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    line-height: 1em
  }

  .reservation_btn {
    float: right;
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    top: 0px;
    right: 15px;
    z-index: 100;
    background-color: #f8407a;
    border-radius: 4px
  }

  .reservation_btn img {
    width: 24px;
    position: absolute;
    top: 0%;
    left: 50%;
    transform: translateX(-50%)
  }

  .reservation_btn p, .reservation_btn2 p {
    text-align: center;
    color: #fff;
    font-size: 12px;
    position: absolute;
    z-index: 3;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    line-height: 1em
  }
  .reservation_btn2 {
    float: right;
    display: block;
    width: 40px;
    height: 40px;
    position: relative;
    top: 0px;
    right: 20px;
    z-index: 100;
    background-color: #f8407a;
    border-radius: 4px
  }


  .reservation_btn:hover {
    background-color: #fc729d
  }

  #nav_toggle {
    float: right;
    display: block;
    width: 30px;
    height: 30px;
    position: relative;
    top: 10px;
    right: 5px;
    z-index: 100
  }

  #nav_toggle div {
    position: relative
  }

  #nav_toggle span {
    display: block;
    height: 3px;
    background: #555;
    position: absolute;
    width: 100%;
    left: 0;
    -webkit-transition: 0.5s ease-in-out;
    -moz-transition: 0.5s ease-in-out;
    transition: 0.5s ease-in-out
  }

  #nav_toggle span:nth-child(1) {
    top: 0px
  }

  #nav_toggle span:nth-child(2) {
    top: 9px
  }

  #nav_toggle span:nth-child(3) {
    top: 18px
  }

  .open #nav_toggle span:nth-child(1) {
    top: 9px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    transform: rotate(135deg)
  }

  .open #nav_toggle span:nth-child(2) {
    width: 0;
    left: 50%
  }

  .open #nav_toggle span:nth-child(3) {
    top: 9px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    transform: rotate(-135deg)
  }
}

/*# sourceMappingURL=style.css.map */

.list_three {
	margin: 2% auto;
	width: 910px;
	text-align: center;
}
	.list_three li {
		display: inline-block;
		position: relative;
		margin: 0 20px 20px 0;
		width: 285px;
		font-size: 20px;
		vertical-align: top;
	}
	    .list_three li p { font-size: 14px; }
	    .list_three li:after {
	        position: absolute;
	        top: 42%;
	        right: -20px;
	        content: '▶';
	        color: #666;
	    }
		.list_three li img { width: 100%; }
		.list_three li:nth-child(3n) { margin-right: 0; }
		.list_three li:last-child:after { content: none; }
@media screen and (max-width: 767px) {
    .list_three {
	    margin: 2% auto 5%;
	    width: 100%;
	    text-align: center;
    }
	.list_three li {
		display: inline-block;
		margin: 0 5% 1% 0;
		width: 40%;
		font-size: 18px;
		line-height: 1.4;
		vertical-align: top;
	}
	    .list_three li:after {
	        top: 40%;
	        right: -11%;
	    }
		.list_three li img {
			width: 100%;
		}
		.list_three li:nth-child(2n) {
			margin-right: 0;
		}
		.list_three li:nth-child(3n) { margin: 0 5% 3% 0; }
}