@charset "UTF-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

body {
  line-height: 1; }

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block; }

nav ul {
  list-style: none; }

blockquote, q {
  quotes: none; }

blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none; }

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent; }

ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none; }

mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold; }

del {
  text-decoration: line-through; }

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

/* change border colour to suit your needs 
*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0; }

input, select {
  vertical-align: middle; }

/* Slider */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -khtml-user-select: none;
  -ms-touch-action: pan-y;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent; }

.slick-list {
  position: relative;
  display: block;
  overflow: hidden;
  margin: 0;
  padding: 0; }

.slick-list:focus {
  outline: none; }

.slick-list.dragging {
  cursor: pointer;
  cursor: hand; }

.slick-slider .slick-track,
.slick-slider .slick-list {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }

.slick-track {
  position: relative;
  top: 0;
  left: 0;
  display: block; }

.slick-track:before,
.slick-track:after {
  display: table;
  content: ''; }

.slick-track:after {
  clear: both; }

.slick-loading .slick-track {
  visibility: hidden; }

.slick-slide {
  display: none;
  float: left;
  height: 100%;
  min-height: 1px; }

[dir='rtl'] .slick-slide {
  float: right; }

.slick-slide img {
  display: block; }

.slick-slide.slick-loading img {
  display: none; }

.slick-slide.dragging img {
  pointer-events: none; }

.slick-initialized .slick-slide {
  display: block; }

.slick-loading .slick-slide {
  visibility: hidden; }

.slick-vertical .slick-slide {
  display: block;
  height: auto;
  border: 1px solid transparent; }

.slick-arrow.slick-hidden {
  display: none; }

/* Slider */
.slick-loading .slick-list {
  background: #fff url("./ajax-loader.gif") center center no-repeat; }

/* Icons */
@font-face {
  font-family: 'slick';
  font-weight: normal;
  font-style: normal;
  src: url("./fonts/slick.eot");
  src: url("./fonts/slick.eot?#iefix") format("embedded-opentype"), url("./fonts/slick.woff") format("woff"), url("./fonts/slick.ttf") format("truetype"), url("./fonts/slick.svg#slick") format("svg"); }
/* Arrows */
.slick-prev,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  -ms-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent; }

.slick-prev:hover,
.slick-prev:focus,
.slick-next:hover,
.slick-next:focus {
  color: transparent;
  outline: none;
  background: transparent; }

.slick-prev:hover:before,
.slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before {
  opacity: 1; }

.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before {
  opacity: .25; }

.slick-prev:before,
.slick-next:before {
  font-family: 'slick';
  font-size: 20px;
  line-height: 1;
  opacity: .75;
  color: white;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.slick-prev {
  left: -25px; }

[dir='rtl'] .slick-prev {
  right: -25px;
  left: auto; }

.slick-prev:before {
  content: '←'; }

[dir='rtl'] .slick-prev:before {
  content: '→'; }

.slick-next {
  right: -25px; }

[dir='rtl'] .slick-next {
  right: auto;
  left: -25px; }

.slick-next:before {
  content: '→'; }

[dir='rtl'] .slick-next:before {
  content: '←'; }

/* Dots */
.slick-dotted.slick-slider {
  margin-bottom: 30px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center; }

.slick-dots li {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin: 0 5px;
  padding: 0;
  cursor: pointer; }

.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 5px;
  cursor: pointer;
  color: transparent;
  border: 0;
  outline: none;
  background: transparent; }

.slick-dots li button:hover,
.slick-dots li button:focus {
  outline: none; }

.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
  opacity: 1; }

.slick-dots li button:before {
  font-family: 'slick';
  font-size: 6px;
  line-height: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  content: '•';
  text-align: center;
  opacity: .25;
  color: black;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

.slick-dots li.slick-active button:before {
  opacity: .75;
  color: black; }

* {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
  text-decoration: none;
  line-height: 1.5;
  font-size: 100%;
  font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "Meiryo UI", sans-serif;
  -webkit-font-smoothing: antialiased; }
  @media only screen and (min-width: 980px) {
    * {
      font-size: 120%; } }

@media only screen and (min-width: 980px) {
  .pc_hidden {
    display: none; } }

@media only screen and (min-width: 640px) {
  .tab_hidden {
    display: none; } }

.tab_block {
  display: none; }
  @media only screen and (min-width: 640px) {
    .tab_block {
      display: inline-block; } }

.pc_block {
  display: none; }
  @media only screen and (min-width: 980px) {
    .pc_block {
      display: inline-block; } }

.fadein {
  opacity: 0.1;
  transform: translate(0, 50px);
  transition: all 700ms; }
  @media only screen and (min-width: 640px) {
    .fadein {
      transition: all 700ms; } }

/* 画面内に入った状態 */
.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0); }

@keyframes Slide {
  0% {
    width: 1px; }
  100% {
    width: 100%;
    transform: translateX(0); } }
br {
  line-height: inherit; }

a {
  display: block;
  text-decoration: none; }
  a:hover {
    opacity: .8; }
  a img {
    width: 100%; }

.clear {
  clear: both; }

img {
  width: auto;
  margin: 0 auto;
  max-width: 100%; }

hr {
  width: 100%; }

body {
  line-height: 1.4;
  font-size: 14px;
  color: #666666; }

@media only screen and (min-width: 980px) {
  .container {
    height: auto;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto; } }

@media only screen and (min-width: 980px) {
  .content {
    padding-top: 60px; } }

.inner {
  background: white;
  padding: 60px 3% 30px 3%;
  margin: 3%;
  color: #666666; }
  @media only screen and (min-width: 640px) {
    .inner {
      padding: 60px 6% 30px 6%; } }
  @media only screen and (min-width: 980px) {
    .inner {
      padding: 75px 8% 60px 8%;
      max-width: 1200px;
      margin: 0 auto; } }
  .inner p, .inner li, .inner th, .inner td {
    padding: 0 0 5px;
    line-height: 1.5;
    font-size: 14px;
    letter-spacing: .3px; }
    @media only screen and (min-width: 640px) {
      .inner p, .inner li, .inner th, .inner td {
        padding: 0 0 10px; } }
    @media only screen and (min-width: 980px) {
      .inner p, .inner li, .inner th, .inner td {
        font-size: 16px;
        line-height: 1.7; } }
  .inner table {
    text-align: left;
    margin: 10px 0;
    border-top: 1px dotted #21ccca;
    border-bottom: 1px dotted #21ccca;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word; }
    @media only screen and (min-width: 980px) {
      .inner table {
        margin: 30px 0; } }
    .inner table tr {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      padding: 10px 0 15px; }
      @media only screen and (min-width: 980px) {
        .inner table tr {
          padding: 15px 0 5px; } }
    .inner table th {
      width: 100%;
      font-size: 1rem; }
      @media only screen and (min-width: 980px) {
        .inner table th {
          width: 19%;
          padding: 0 0 0 2%; } }
    .inner table td {
      width: 100%; }
      @media only screen and (min-width: 640px) {
        .inner table td {
          padding-left: 3%; } }
      @media only screen and (min-width: 980px) {
        .inner table td {
          width: 81%;
          display: flex;
          flex-wrap: wrap;
          align-items: center; } }
      .inner table td p {
        width: 100%; }
      .inner table td a {
        display: inline-block;
        text-decoration: underline; }

.center {
  text-align: center; }

.section {
  padding: 30px 2%;
  position: relative;
  z-index: 0;
  background: white; }
  @media only screen and (min-width: 640px) {
    .section {
      padding: 40px 10%; } }
  @media only screen and (min-width: 980px) {
    .section {
      padding: 50px 25%; } }
  @media only screen and (min-width: 980px) {
    .section__top {
      background: rgba(255, 255, 255, 0.5); } }
  .section__green {
    background: #21ccca; }
  .section__reservation {
    background: #21ccca;
    padding: 20px 10px; }
    @media only screen and (min-width: 640px) {
      .section__reservation {
        padding: 30px 10% 30px; } }
    @media only screen and (min-width: 980px) {
      .section__reservation {
        padding: 30px 25%; } }
    .section__reservation a {
      background: white;
      border: 2px solid black;
      padding: 20px;
      text-align: center;
      width: 100%;
      position: relative;
      font-size: 1.05rem;
      font-weight: 600;
      font-family: "Noto Sans JP", "ヒラギノ角ゴシック", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "Meiryo UI", sans-serif;
      color: #666666; }
      .section__reservation a:after {
        content: "";
        background-image: url(../img/icon_arrow_green.svg);
        background-repeat: no-repeat;
        background-position: center center;
        width: 10%;
        height: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto; }
        @media only screen and (min-width: 980px) {
          .section__reservation a:after {
            height: 25px; } }
    .section__reservation:hover {
      transition: .5s;
      background: #21ccca; }

.section__navy {
  background-image: url(../img/img_bg_2.jpg);
  background-size: auto 100%;
  position: relative;
  z-index: 0; }
  .section__navy:after {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: rgba(33, 204, 202, 0.8); }
  .section__navy .inner {
    background: none; }
  .section__navy .title {
    margin-top: -80px; }
    @media only screen and (min-width: 640px) {
      .section__navy .title {
        margin-top: -100px; } }
    @media only screen and (min-width: 980px) {
      .section__navy .title {
        margin-top: -140px; } }
  .section__navy p {
    color: white; }

.map {
  width: 100%;
  height: 300px; }
  .map iframe {
    height: 100%;
    width: 100%; }

header {
  width: 100%;
  margin: 0;
  padding: 5px;
  height: auto;
  position: fixed;
  top: 0;
  z-index: 999999999999999999;
  background: white;
  border-top: 2px solid #21ccca; }
  @media only screen and (min-width: 980px) {
    header {
      padding: 0; } }

.header__logo {
  height: auto;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: auto; }
  @media only screen and (min-width: 980px) {
    .header__logo {
      display: block; } }
  @media only screen and (min-width: 980px) {
    .header__logo_pc_area {
      max-width: 1280px;
      margin: 0 auto;
      display: flex;
      height: 80px;
      align-items: center;
      justify-content: space-between; } }
  @media only screen and (min-width: 980px) {
    .header__logo_pc_inner {
      width: 80%;
      display: flex;
      align-items: center; } }
  .header__logo .header__info {
    display: none; }
    @media only screen and (min-width: 980px) {
      .header__logo .header__info {
        display: inline-block;
        padding: 0 20px;
        width: auto; } }
    .header__logo .header__info .header_category {
      background: #21ccca;
      padding: 3px 5px;
      color: white;
      font-size: 12px;
      margin-right: 5px;
      font-weight: bold; }
  .header__logo .header__sns {
    display: none; }
    @media only screen and (min-width: 980px) {
      .header__logo .header__sns {
        display: flex;
        padding: 0 10px;
        width: auto; } }
    .header__logo .header__sns a {
      display: block;
      margin: 10px; }
    .header__logo .header__sns img {
      width: 55px;
      height: 39px; }
    .header__logo .header__sns .airbnb img {
      width: 55px;
      height: 39px; }
  .header__logo--link {
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    color: black; }
    @media only screen and (min-width: 980px) {
      .header__logo--link {
        width: 60%;
        display: inline-block;
        width: auto;
        padding-left: 10px; } }
    .header__logo--link img {
      height: 53px;
      width: auto;
      margin: -5px 0; }
      @media only screen and (min-width: 980px) {
        .header__logo--link img {
          height: 88px;
          margin: 0; } }
    .header__logo--link:hover {
      opacity: .5;
      transition: .2s linear; }
  .header__logo--title {
    font-family: 'Muli';
    font-style: italic;
    position: relative;
    overflow: hidden;
    line-height: 1;
    color: white;
    font-size: 1rem; }

#nav-drawer {
  position: relative;
  right: 15px;
  width: 30px;
  float: right; }
  @media only screen and (min-width: 980px) {
    #nav-drawer {
      width: 100%;
      padding: 0;
      right: 0; } }

/*チェックボックス等は非表示に*/
.nav-unshown {
  display: none; }

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
  background: #21ccca;
  padding: 5px 7px;
  position: relative; }
  @media only screen and (min-width: 980px) {
    #nav-open {
      display: none; } }
  #nav-open p {
    position: absolute;
    bottom: 1px;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 9px;
    color: white;
    text-align: center; }

/*ハンバーガーアイコンをCSSだけで表現*/
#nav-open span, #nav-open span:before, #nav-open span:after {
  position: absolute;
  height: 3px;
  /*線の太さ*/
  width: 24px;
  /*長さ*/
  border-radius: 3px;
  background: white;
  display: block;
  content: '';
  cursor: pointer;
  margin: 0 1px; }

#nav-open span:before {
  bottom: -8px;
  margin: 0; }

#nav-open span:after {
  bottom: -16px;
  margin: 0; }

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;
  /*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;
  /*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: .3s ease-in-out; }

#nav-close-02 {
  width: 90%;
  margin: 15px 5% 0px;
  padding: 15px;
  background: #868eb0;
  display: flex;
  justify-content: center;
  border-radius: 2px;
  color: white; }
  @media only screen and (min-width: 980px) {
    #nav-close-02 {
      display: none; } }
  #nav-close-02:hover {
    background: #4c4c4c;
    transition: .5s all; }
  #nav-close-02 p {
    font-family: 'Muli', sans-serif; }

#nav-close-03 {
  position: absolute;
  top: -21px;
  right: 2.8%;
  background: #21ccca;
  height: 71px; }
  @media only screen and (min-width: 980px) {
    #nav-close-03 {
      display: none; } }
  #nav-close-03 p {
    font-size: 3.4rem;
    color: white;
    padding: 0 5px; }

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  padding-top: 50px;
  top: 0;
  left: 0;
  z-index: 9999999999999;
  /*最前面に*/
  width: 100%;
  /*右側に隙間を作る（閉じるカバーを表示）*/
  height: auto;
  transition: .4s ease-in-out;
  /*滑らかに表示*/
  -webkit-transform: translateY(-180%);
  transform: translateY(-180%);
  /*右に隠しておく*/
  opacity: 0; }
  @media only screen and (min-width: 980px) {
    #nav-content {
      position: static;
      transform: translateX(0%);
      height: 60px;
      width: 100%;
      overflow: visible;
      opacity: 1;
      background: #21ccca;
      padding-top: 0px; } }
  @media only screen and (min-width: 980px) {
    #nav-content .section__reservation {
      padding: 5px;
      width: 25%; } }
  @media only screen and (min-width: 980px) {
    #nav-content .section__reservation a {
      padding: 10px 0; } }
  #nav-content .nav-list {
    background: rgba(33, 204, 202, 0.9);
    padding: 10px 5% 0;
    position: relative; }
    @media only screen and (min-width: 980px) {
      #nav-content .nav-list {
        width: 100%;
        height: 60px;
        padding: 0;
        display: flex;
        justify-content: space-between;
        max-width: 1200px;
        margin: 0 auto; } }
    #nav-content .nav-list .nav-list--item {
      border-bottom: 1px solid white;
      padding-top: 5px; }
      @media only screen and (min-width: 980px) {
        #nav-content .nav-list .nav-list--item {
          border: none;
          padding: 0;
          margin: 0;
          display: flex;
          align-items: center;
          width: 20%; } }
      #nav-content .nav-list .nav-list--item:first-of-type {
        margin: 0; }
      #nav-content .nav-list .nav-list--item:last-of-type {
        border: none; }
        @media only screen and (min-width: 980px) {
          #nav-content .nav-list .nav-list--item:last-of-type {
            border: none;
            padding-bottom: 0px; } }
      #nav-content .nav-list .nav-list--item p {
        background: white;
        color: #21ccca;
        padding: 5px;
        font-weight: 600; }
        #nav-content .nav-list .nav-list--item p span {
          color: #21ccca;
          padding: 0 5px; }
      #nav-content .nav-list .nav-list--item a {
        color: white;
        display: block;
        position: relative;
        line-height: 1;
        font-weight: bold;
        font-size: 1rem;
        height: 100%;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        padding: 8px 5px 8px;
        display: block;
        text-align: center; }
        @media only screen and (min-width: 980px) {
          #nav-content .nav-list .nav-list--item a {
            font-size: 1.2rem;
            padding: 15px; } }
        #nav-content .nav-list .nav-list--item a:after {
          content: "";
          background-image: url(../img/icon_arrow_white.svg);
          background-repeat: no-repeat;
          background-position: center center;
          width: 10%;
          height: 20px;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          margin: auto; }
          @media only screen and (min-width: 980px) {
            #nav-content .nav-list .nav-list--item a:after {
              background: none; } }
        #nav-content .nav-list .nav-list--item a:hover {
          opacity: 1;
          transition: color .25s linear;
          transition: .2s linear;
          color: white; }
          @media only screen and (min-width: 980px) {
            #nav-content .nav-list .nav-list--item a:hover {
              background: rgba(255, 255, 255, 0.8);
              color: #21ccca; } }
          #nav-content .nav-list .nav-list--item a:hover span {
            color: #21ccca; }
      #nav-content .nav-list .nav-list--item span {
        font-family: 'Muli';
        font-style: italic;
        color: white;
        width: 100%;
        font-size: .8rem;
        font-weight: 100;
        margin: 3px 0 0;
        display: block; }
        @media only screen and (min-width: 980px) {
          #nav-content .nav-list .nav-list--item span {
            margin: -3px 0 0;
            font-size: 1rem; } }
      #nav-content .nav-list .nav-list--item .inner-nav-list {
        width: 100%;
        border-top: 1px solid #21ccca;
        background: rgba(33, 204, 202, 0.6); }
        @media only screen and (min-width: 980px) {
          #nav-content .nav-list .nav-list--item .inner-nav-list {
            display: none; } }
        #nav-content .nav-list .nav-list--item .inner-nav-list .inner-nav-list--item {
          justify-content: flex-start;
          width: 100%; }
          #nav-content .nav-list .nav-list--item .inner-nav-list .inner-nav-list--item a {
            text-align: center;
            font-size: .85rem;
            font-weight: 100;
            color: white;
            display: block;
            position: relative;
            line-height: 1;
            font-weight: bold;
            font-size: 1rem;
            height: 100%;
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            padding: 8px 5px 8px;
            display: block; }
            @media only screen and (min-width: 980px) {
              #nav-content .nav-list .nav-list--item .inner-nav-list .inner-nav-list--item a {
                font-size: 1.2rem;
                padding: 15px; } }
            #nav-content .nav-list .nav-list--item .inner-nav-list .inner-nav-list--item a span {
              display: block;
              font-size: .7rem;
              width: 100%;
              padding-top: 2px; }
              @media only screen and (min-width: 980px) {
                #nav-content .nav-list .nav-list--item .inner-nav-list .inner-nav-list--item a span {
                  padding-top: 12px;
                  font-size: .5rem; } }
  #nav-content .nav-list--hover {
    height: auto;
    position: relative; }
    @media only screen and (min-width: 980px) {
      #nav-content .nav-list--hover:hover .inner-nav-list {
        transition: .2s;
        display: block;
        position: absolute;
        top: 60px;
        left: 0;
        z-index: 999;
        width: 115%;
        box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.25); } }
    @media only screen and (min-width: 980px) {
      #nav-content .nav-list--hover:hover .inner-nav-list--item a {
        padding: 20px; } }

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;
  /*カバーを表示*/
  opacity: .5; }

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateY(0%);
  transform: translateY(0%);
  /*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0, 0, 0, 0.15);
  opacity: 1; }

footer {
  font-size: 16px;
  font-weight: 100;
  background: #f2f2f2; }
  footer .footer__info {
    text-align: center;
    font-weight: bold; }
    footer .footer__info .item {
      margin-bottom: 10px; }
      footer .footer__info .item .item-title {
        color: #21ccca;
        background: white;
        border-radius: 25px;
        display: inline-block;
        padding: 2px;
        width: 100px;
        margin-bottom: 5px;
        font-weight: bold; }
        @media only screen and (min-width: 980px) {
          footer .footer__info .item .item-title {
            width: 130px; } }
      footer .footer__info .item p {
        font-weight: normal; }
  footer .footer__sns {
    display: flex;
    padding: 0 10px;
    width: auto;
    justify-content: center; }
    footer .footer__sns a {
      display: block;
      margin: 10px; }
      footer .footer__sns a img {
        max-width: 39px; }
  footer .footer_top {
    background: #21ccca; }
    @media only screen and (min-width: 980px) {
      footer .footer_top {
        padding: 15px 0; } }
    footer .footer_top .footer__logo--link .footer__logo--title {
      max-width: 350px;
      margin: auto;
      font-family: 'Muli';
      font-style: italic;
      margin: 0 5px 2px;
      position: relative;
      overflow: hidden;
      line-height: 1;
      color: white;
      font-size: 1.4rem;
      max-width: 350px;
      margin: auto; }
      @media only screen and (min-width: 980px) {
        footer .footer_top .footer__logo--link .footer__logo--title {
          font-size: 1.2rem; } }
    footer .footer_top #nav-drawer {
      float: none; }
    footer .footer_top #nav-content {
      display: block;
      position: relative;
      opacity: 1;
      transform: translateY(0%);
      z-index: 1; }
    footer .footer_top #nav-content .nav-list {
      padding: 0px 8% 20px;
      display: flex;
      flex-wrap: wrap; }
      @media only screen and (min-width: 980px) {
        footer .footer_top #nav-content .nav-list {
          flex-wrap: nowrap;
          padding-bottom: 0; } }
      footer .footer_top #nav-content .nav-list .nav-list--item {
        border: 0;
        width: 50%; }
        @media only screen and (min-width: 640px) {
          footer .footer_top #nav-content .nav-list .nav-list--item {
            width: 25%; } }
        @media only screen and (min-width: 980px) {
          footer .footer_top #nav-content .nav-list .nav-list--item {
            width: auto; } }
        footer .footer_top #nav-content .nav-list .nav-list--item:first-of-type {
          margin-top: 10px; }
          @media only screen and (min-width: 980px) {
            footer .footer_top #nav-content .nav-list .nav-list--item:first-of-type {
              margin-top: 0px; } }
        footer .footer_top #nav-content .nav-list .nav-list--item a {
          justify-content: left;
          font-size: .9rem; }
          @media only screen and (min-width: 980px) {
            footer .footer_top #nav-content .nav-list .nav-list--item a {
              justify-content: center; } }
          footer .footer_top #nav-content .nav-list .nav-list--item a span {
            text-align: left;
            display: block;
            margin: 0; }
            @media only screen and (min-width: 980px) {
              footer .footer_top #nav-content .nav-list .nav-list--item a span {
                text-align: center;
                margin-top: -5px; } }
  footer .footer_list {
    height: auto;
    overflow: hidden;
    clear: both;
    position: relative;
    z-index: 100;
    padding: 20px 3%; }
    @media only screen and (min-width: 640px) {
      footer .footer_list {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 8% 40px 8%; } }
    @media only screen and (min-width: 980px) {
      footer .footer_list__box {
        display: flex;
        width: 100%;
        padding: 15px 0; } }
    footer .footer_list p {
      padding: 0 0 8px;
      font-size: .95rem;
      width: 100%; }
      footer .footer_list p a {
        display: inline-block; }
        footer .footer_list p a:hover {
          text-decoration: underline; }
    footer .footer_list__top {
      text-align: center;
      font-weight: bold;
      font-size: 1.1rem;
      width: 100%; }
      @media only screen and (min-width: 980px) {
        footer .footer_list__top {
          width: 50%;
          padding-left: 50px; } }
      @media only screen and (min-width: 980px) {
        footer .footer_list__top p {
          font-size: 1.1rem; } }
    footer .footer_list__icon {
      display: flex;
      justify-content: center;
      margin: 0 0 20px; }
      footer .footer_list__icon img {
        width: 45px;
        margin: 0 10px; }
    footer .footer_list .link__privacy {
      background: white;
      color: #c7b299; }
  footer small {
    padding: 20px 0;
    display: block;
    text-align: center;
    font-size: .7rem;
    font-family: 'Muli', sans-serif;
    color: white;
    background: #21ccca; }

.section__bottom_info {
  background: #21ccca;
  text-align: center;
  position: relative;
  z-index: 1;
  margin: -10px 0; }
  @media only screen and (min-width: 640px) {
    .section__bottom_info {
      margin: -3% 0 -3%; } }
  @media only screen and (min-width: 980px) {
    .section__bottom_info {
      margin: 0;
      border-bottom: 1px solid #868eb0; } }
  .section__bottom_info .title {
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    margin-top: -50px; }
  .section__bottom_info .inner {
    background: none;
    padding-top: 70px; }
    @media only screen and (min-width: 640px) {
      .section__bottom_info .inner {
        padding-top: 90px; } }
    @media only screen and (min-width: 980px) {
      .section__bottom_info .inner {
        display: flex;
        padding: 120px 5% 50px 5%; } }
    @media only screen and (min-width: 980px) {
      .section__bottom_info .inner .link_box {
        width: calc(100% / 3); } }
    .section__bottom_info .inner p {
      padding: 5px 0 30px;
      color: white; }
      @media only screen and (min-width: 980px) {
        .section__bottom_info .inner p {
          padding: 5px 0; } }
    @media only screen and (min-width: 980px) {
      .section__bottom_info .inner .link_button {
        width: 90%;
        margin: 0 5%; } }

.key-visual {
  font-size: .8rem;
  padding: 30% 17% 15%;
  position: relative; }
  @media only screen and (min-width: 640px) {
    .key-visual {
      padding: 20% 3%; } }
  @media only screen and (min-width: 980px) {
    .key-visual {
      padding: 200px 4% 100px; } }
  .key-visual__top {
    text-align: center;
    height: 350px; }
    @media only screen and (min-width: 640px) {
      .key-visual__top {
        height: auto;
        padding: 26% 3% 25%; } }
    @media only screen and (min-width: 980px) {
      .key-visual__top {
        padding: 270px 4% 100px; } }
    .key-visual__top img {
      margin: 0 auto; }
      @media only screen and (min-width: 980px) {
        .key-visual__top img {
          width: 280px; } }
      @media only screen and (min-width: 980px) {
        .key-visual__top img {
          width: 350px; } }

.breadcrumb {
  margin: 0 0 10px; }
  @media only screen and (min-width: 980px) {
    .breadcrumb {
      margin: 0 0 15px; } }
  .breadcrumb a, .breadcrumb p {
    display: inline-block;
    font-size: .75rem; }
  .breadcrumb p:after {
    content: "／";
    padding-left: 5px;
    color: #ccc; }
  .breadcrumb p:last-child:after {
    content: ""; }
  .breadcrumb p a {
    color: #ac8d68;
    text-decoration: underline; }
    @media only screen and (min-width: 980px) {
      .breadcrumb p a {
        text-decoration: none; } }
    .breadcrumb p a:hover {
      opacity: 1;
      text-decoration: underline; }

.title {
  text-align: center;
  padding: 0 0 25px; }
  .title h2 {
    margin: 0 0 -6px;
    font-size: 1.2rem; }
    @media only screen and (min-width: 640px) {
      .title h2 {
        font-size: 1.5rem;
        margin: 0 0 -3px; } }

.title__white .title__box {
  background: white; }
  .title__white .title__box h2 {
    color: #21ccca; }

.top {
  position: relative;
  background: #21ccca;
  background-image: url(../img/main_cover.jpg);
  background-size: 120%;
  background-position: top 50px center;
  background-repeat: no-repeat; }
  @media only screen and (min-width: 640px) {
    .top {
      background-size: 100%; } }
  @media only screen and (min-width: 980px) {
    .top {
      background-size: cover;
      background-position: top 140px center; } }

.catch_text {
  padding: 20px 0; }
  .catch_text p {
    padding-bottom: 10px; }

.brand__list {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -1% 20px; }
  .brand__list a {
    width: calc(92% / 2);
    border: 1px solid #868eb0;
    margin: 2%;
    display: flex;
    flex-wrap: wrap; }
    @media only screen and (min-width: 640px) {
      .brand__list a {
        width: calc(88% / 3); } }
    @media only screen and (min-width: 980px) {
      .brand__list a {
        width: calc(25% - 20px);
        margin: 10px; } }
  .brand__list .brand__img {
    display: flex; }
    .brand__list .brand__img img {
      width: 100%; }
  .brand__list .brand__name-box {
    background: linear-gradient(#0e1d61, #1b3cac);
    width: 100%; }
  .brand__list .brand__name, .brand__list .brand__kana {
    text-align: center;
    font-family: 'Muli';
    font-style: italic;
    color: #c7b299;
    font-size: .9rem;
    font-weight: bold;
    background: linear-gradient(#0e1d61, #1b3cac);
    padding: 3px 0;
    line-height: 1;
    width: 100%; }
    @media only screen and (min-width: 640px) {
      .brand__list .brand__name, .brand__list .brand__kana {
        font-size: 1.05rem;
        padding: 5px 0; } }
  .brand__list .brand__kana {
    font-weight: 100;
    font-size: .85rem;
    padding: 1px 0; }
    @media only screen and (min-width: 640px) {
      .brand__list .brand__kana {
        font-size: .95rem;
        padding: 3px 0; } }

.product__list {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 2% 20px; }
  @media only screen and (min-width: 640px) {
    .product__list {
      margin: 20px 2% 20px; } }

.product__link {
  background: rgba(255, 255, 255, 0.8);
  width: 100%;
  display: flex;
  align-items: center;
  margin: 0 0 10px; }
  @media only screen and (min-width: 640px) {
    .product__link {
      width: calc(50% - 10px);
      margin: 5px; } }
  @media only screen and (min-width: 980px) {
    .product__link {
      width: calc(33% - 10px);
      margin: 5px; } }
  .product__link .product__img {
    width: 35%;
    position: relative;
    overflow: hidden;
    padding-top: 25%; }
    .product__link .product__img img {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: auto;
      height: 100%;
      margin: auto;
      min-width: 100%;
      object-fit: cover;
      font-family: 'object-fit: cover;'; }
  .product__link .product__name {
    font-weight: bold;
    font-size: 1.1rem;
    color: #21ccca;
    padding: 0;
    padding-left: 10px;
    line-height: 1.2; }

@media only screen and (min-width: 640px) {
  .section__harf {
    padding-bottom: 50px; } }
@media only screen and (min-width: 980px) {
  .section__harf .container {
    padding: 0 3%;
    display: flex; } }
.section__harf .news, .section__harf .contact {
  margin: 0 0 50px;
  background: none; }
  @media only screen and (min-width: 980px) {
    .section__harf .news, .section__harf .contact {
      width: 50%;
      padding: 20px; } }
  @media only screen and (min-width: 980px) {
    .section__harf .news .title__box, .section__harf .contact .title__box {
      width: 40%; } }
  @media only screen and (min-width: 980px) {
    .section__harf .news .inner, .section__harf .contact .inner {
      height: 640px; } }
.section__harf .contact .title__box {
  background: white; }
  .section__harf .contact .title__box h2 {
    color: #21ccca; }
.section__harf .contact .inner {
  text-align: center;
  background: rgba(33, 204, 202, 0.95); }
  @media only screen and (min-width: 980px) {
    .section__harf .contact .inner {
      padding-top: 95px; } }
.section__harf .contact p {
  color: white;
  padding: 5px 0 20px; }
  @media only screen and (min-width: 980px) {
    .section__harf .contact p {
      padding: 5px 0 33px; } }

.top__menu .menu__title {
  color: white;
  display: flex;
  align-items: center;
  font-size: 20px; }
  .top__menu .menu__title:after {
    content: "";
    flex-grow: 1;
    height: 2px;
    /* 線の太さを変えたいときはここを変える */
    width: 40%;
    background: #98eeed;
    /* 線の色を変えたいときはここを変える */
    margin: 0 -.4rem 0 .8em;
    /* 文字と線の余白用 なくても良い */ }
.top__menu .top__facial, .top__menu .top__body {
  margin-bottom: 25px;
  margin-top: 10px; }
  @media only screen and (min-width: 980px) {
    .top__menu .top__facial, .top__menu .top__body {
      margin: 15px; } }
.top__menu .top__facial {
  background-image: url(../img/face.svg);
  background-repeat: no-repeat;
  margin-left: 20px; }
  .top__menu .top__facial .menu__title_face {
    position: relative;
    left: -10px;
    padding-top: 25px; }
.top__menu .top__body {
  background-image: url(../img/body.svg);
  background-repeat: no-repeat;
  margin-left: 20px; }
  .top__menu .top__body .menu__title_body {
    position: relative;
    left: -10px;
    padding-top: 25px; }
    .top__menu .top__body .menu__title_body:after {
      content: "";
      flex-grow: 1;
      height: 2px;
      /* 線の太さを変えたいときはここを変える */
      width: 40%;
      background: #98eeed;
      /* 線の色を変えたいときはここを変える */
      margin: 0 -.4rem 0 4.6em;
      /* 文字と線の余白用 なくても良い */ }

.salon__photo {
  text-align: center;
  margin-bottom: 50px; }
  @media only screen and (min-width: 980px) {
    .salon__photo p {
      width: 48%;
      text-align: left;
      margin-left: 4%; } }
  .salon__photo .salon__photo_img {
    text-align: center;
    margin: 10px; }
    @media only screen and (min-width: 980px) {
      .salon__photo .salon__photo_img {
        width: 48%; } }
    .salon__photo .salon__photo_img img {
      width: 80%;
      margin: auto; }
      @media only screen and (min-width: 980px) {
        .salon__photo .salon__photo_img img {
          width: auto; } }

.bk-green {
  background: #21ccca; }

.salon__image {
  border: 1px solid; }
  .salon__image .flex-box {
    display: flex; }
    .salon__image .flex-box .salon__image_img {
      width: 50%;
      margin: 0px; }
      .salon__image .flex-box .salon__image_img img {
        height: 100%;
        width: 100%;
        display: block; }
    .salon__image .flex-box .salon__image_text {
      width: 50%;
      margin-left: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      flex-direction: column;
      font-weight: bold;
      color: #21ccca;
      text-align: center; }
      .salon__image .flex-box .salon__image_text span {
        font-size: 15px;
        display: block;
        font-weight: normal;
        color: #666666; }
  .salon__image .flex-reverse .salon__image_text {
    background: #21ccca;
    margin-right: 0;
    color: white; }
    .salon__image .flex-reverse .salon__image_text span {
      color: white; }

.top__facial {
  background-image: url(../img/face.svg);
  background-repeat: no-repeat;
  margin-left: 20px; }
  .top__facial .menu__title_face {
    position: relative;
    left: -10px;
    padding-top: 25px; }

.top__price {
  background-image: url(../img/price.svg);
  background-repeat: no-repeat;
  margin-left: 20px;
  margin-top: 10px; }
  @media only screen and (min-width: 980px) {
    .top__price .section {
      padding: 0; } }
  @media only screen and (min-width: 980px) {
    .top__price {
      margin-left: 0;
      margin: auto; } }
  .top__price .menu__title {
    color: white;
    display: flex;
    align-items: center;
    font-size: 20px; }
    @media only screen and (min-width: 980px) {
      .top__price .menu__title {
        width: 100%;
        margin: auto; } }
    .top__price .menu__title:after {
      content: "";
      flex-grow: 1;
      height: 2px;
      /* 線の太さを変えたいときはここを変える */
      width: 40%;
      background: #98eeed;
      /* 線の色を変えたいときはここを変える */
      margin: 0 -.4rem 0 3.6em;
      /* 文字と線の余白用 なくても良い */ }
  .top__price .menu__title_price {
    position: relative;
    left: -10px;
    padding-top: 25px;
    margin-bottom: 25px; }

@media only screen and (min-width: 980px) {
  .flex-box {
    display: flex;
    align-items: center; } }

.flex-reverse {
  flex-direction: row-reverse; }
  @media only screen and (min-width: 980px) {
    .flex-reverse p {
      text-align: right;
      margin-right: 4%; } }

.content > .section {
  padding-top: 80px; }
  @media only screen and (min-width: 980px) {
    .content > .section {
      padding-top: 20px; } }

.content__img {
  padding: 40% 0 0;
  background-attachment: fixed;
  background-size: 100% auto;
  background-position: top center; }
  @media only screen and (min-width: 640px) {
    .content__img {
      padding: 200px 0 0; } }
  @media only screen and (min-width: 980px) {
    .content__img {
      padding: 220px 0 0; } }
  .content__img .section {
    padding-top: 20px;
    position: relative; }
    @media only screen and (min-width: 980px) {
      .content__img .section {
        padding-top: 50px; } }
    .content__img .section .inner {
      padding-top: 25px; }
      @media only screen and (min-width: 980px) {
        .content__img .section .inner {
          padding-top: 60px; } }
      .content__img .section .inner figure {
        width: 100%; }
        @media only screen and (min-width: 980px) {
          .content__img .section .inner figure {
            text-align: inherit;
            width: auto;
            max-width: 70%; } }
        .content__img .section .inner figure img {
          max-width: 100%;
          width: auto;
          width: 100%; }
    .content__img .section .title {
      margin: -70px auto -25px; }
      @media only screen and (min-width: 640px) {
        .content__img .section .title {
          margin: -80px auto -30px; } }
      @media only screen and (min-width: 980px) {
        .content__img .section .title {
          margin: -120px auto -30px; } }

.brand {
  background-image: url(../img/cover/cover8.jpg); }

.product {
  background-image: url(../img/cover/cover10.jpg); }

.company {
  background-image: url(../img/cover/cover18.jpg); }

.greetings {
  background-image: url(../img/cover/cover18.jpg); }

.support {
  background-image: url(../img/cover/cover21.jpg); }

.qa {
  background-image: url(../img/cover/cover21.jpg); }

.download {
  background-image: url(../img/cover/cover21.jpg); }

.news {
  background-image: url(../img/cover/cover25.jpg); }

.contact {
  background-image: url(../img/cover/cover20.jpg); }

.privacy {
  background-image: url(../img/cover/cover1.jpg); }

@media only screen and (min-width: 980px) {
  .company-page {
    display: flex; } }
.company-page .company__side {
  display: flex;
  flex-wrap: wrap;
  padding-bottom: 20px; }
  @media only screen and (min-width: 980px) {
    .company-page .company__side {
      align-self: baseline;
      width: 250px;
      padding-right: 50px; } }
  .company-page .company__side a {
    margin: 2.5px;
    padding: 10px;
    width: calc(50% - 5px);
    display: flex;
    align-items: center;
    font-size: .9rem;
    text-align: left; }
    @media only screen and (min-width: 640px) {
      .company-page .company__side a {
        width: calc(33.333% - 5px); } }
    @media only screen and (min-width: 980px) {
      .company-page .company__side a {
        width: 100%;
        font-size: 1rem;
        padding: 15px 10px; } }
    .company-page .company__side a:after {
      width: 5%;
      right: 5px; }
  .company-page .company__side .active {
    background: #21ccca; }
@media only screen and (min-width: 980px) {
  .company-page .company__inner {
    width: calc(100% - 250px); } }
.company-page table img {
  max-width: 50%; }
  @media only screen and (min-width: 980px) {
    .company-page table img {
      max-width: 100%; } }
.company-page table th {
  color: #21ccca;
  font-weight: bold; }
.company-page table th.img {
  text-align: center; }
.company-page table .bor_dot_t {
  border-top: 1px dotted #21ccca; }
.company-page table .main-cl {
  color: #21ccca; }
.company-page table .table-head {
  font-weight: bold;
  color: #21ccca;
  font-size: 1.1rem;
  padding: 5px 0 0; }
  @media only screen and (min-width: 980px) {
    .company-page table .table-head {
      font-size: 1.5rem; } }

.brand__cover_img {
  width: 100%;
  position: relative;
  padding-top: 40%; }
  @media only screen and (min-width: 980px) {
    .brand__cover_img {
      padding-top: 28%;
      margin-top: -10px; } }
  .brand__cover_img img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 100%;
    width: auto; }

@media only screen and (min-width: 640px) {
  .brand .alignright {
    margin-right: 0; } }
@media only screen and (min-width: 640px) {
  .brand .alignleft {
    margin-left: 0; } }
@media only screen and (min-width: 640px) {
  .brand figure {
    width: 100%;
    text-align: center;
    margin: 20px 0; } }
@media only screen and (min-width: 640px) {
  .brand figure img {
    width: 80%; } }

.brand__title {
  text-align: center;
  background: linear-gradient(#0e1d61, #1b3cac);
  padding: 10px 5px;
  margin: 0 0 20px; }
  @media only screen and (min-width: 980px) {
    .brand__title {
      padding: 15px 5px; } }
  .brand__title h1 {
    color: white;
    font-size: 1.3rem; }
    @media only screen and (min-width: 980px) {
      .brand__title h1 {
        font-size: 1.5rem; } }
    .brand__title h1 span {
      font-style: normal;
      font-weight: 100;
      color: white; }
      .brand__title h1 span:before {
        content: "【"; }
      .brand__title h1 span:after {
        content: "】"; }
  .brand__title span {
    color: #c7b299;
    font-family: 'Muli';
    font-style: italic;
    margin: -5px 0 0; }

.brand__subtitle {
  font-size: 1.1rem;
  font-weight: 100;
  position: relative;
  padding: 10px 0 5px;
  margin: 0 0 10px; }
  @media only screen and (min-width: 980px) {
    .brand__subtitle {
      font-size: 1.5rem;
      margin: 0 0 15px;
      padding: 10px 5px 10px; } }
  .brand__subtitle:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: linear-gradient(to right, #c7b299, white); }

.brand__text img {
  margin: 10px 0;
  width: 100%;
  margin: 0px; }
  @media only screen and (min-width: 980px) {
    .brand__text img {
      width: auto;
      max-width: calc(100% - 20px); } }
.brand__text h1 {
  font-size: 1.2rem;
  font-weight: 100;
  position: relative;
  padding: 10px 0 5px;
  margin: 0 0 10px; }
  @media only screen and (min-width: 980px) {
    .brand__text h1 {
      font-size: 1.6rem;
      margin: 0 0 15px;
      padding: 10px 5px 10px; } }
.brand__text h1::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #c7b299, white); }
.brand__text h2 {
  font-size: 1.1rem;
  font-weight: 100;
  position: relative;
  padding: 10px 0 5px;
  margin: 0 0 10px; }
  @media only screen and (min-width: 980px) {
    .brand__text h2 {
      font-size: 1.5rem;
      margin: 0 0 15px;
      padding: 10px 5px 10px; } }
.brand__text h2::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: linear-gradient(to right, #c7b299, white); }

.brand__carousel {
  padding: 20px 0; }
  @media only screen and (min-width: 980px) {
    .brand__carousel {
      padding: 50px 0; } }

.brand__carousel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 20px 0 50px;
  width: 100%; }
  @media only screen and (min-width: 980px) {
    .brand__carousel p {
      width: 86%;
      margin: 0 auto; } }

#slider {
  width: 98%;
  margin: 0 auto 10px;
  background: #222; }
  @media only screen and (min-width: 980px) {
    #slider {
      width: 86%; } }

.slide-item {
  position: relative;
  height: 250px; }
  @media only screen and (min-width: 980px) {
    .slide-item {
      height: 500px; } }
  .slide-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto; }

#thumbnail-list {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap; }
  @media only screen and (min-width: 980px) {
    #thumbnail-list {
      width: 88%; } }

li.thumbnail-item {
  width: calc(90% / 5);
  margin: 0 1% 10px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  padding-top: 15%; }
  @media only screen and (min-width: 640px) {
    li.thumbnail-item {
      width: calc(88% / 6);
      padding-top: 12%; } }
  @media only screen and (min-width: 980px) {
    li.thumbnail-item {
      width: calc(88% / 6); } }
  li.thumbnail-item:after {
    content: '';
    background-color: rgba(0, 0, 0, 0.4);
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 1;
    transition: .3s opacity linear; }
  li.thumbnail-item.thumbnail-current {
    border: 2px solid #222; }
  li.thumbnail-item.thumbnail-current:after {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 0.5; }
  li.thumbnail-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto; }

.product .product__link {
  border: 1px solid #868eb0; }
  .product .product__link:hover {
    background: #e3e4ec; }

.greetings-page .right {
  text-align: right; }
.greetings-page img {
  margin-right: 15px;
  margin-bottom: 10px;
  float: left; }
  @media only screen and (min-width: 980px) {
    .greetings-page img {
      margin-right: 20px; } }

.about-page img {
  margin-left: 15px;
  margin-bottom: 10px;
  float: right; }
  @media only screen and (min-width: 980px) {
    .about-page img {
      margin-left: 20px; } }
.about-page img.about_img {
  float: none;
  width: 100%;
  margin: 30px 0 0; }

.idea-page ul li {
  border-bottom: 1px dotted #21ccca;
  padding: 10px; }
  @media only screen and (min-width: 980px) {
    .idea-page ul li {
      padding: 10px 20px; } }
  .idea-page ul li:first-child {
    border-top: 1px dotted #21ccca; }
.idea-page h3 {
  color: #21ccca;
  font-size: 1.1rem;
  padding: 10px 0 5px; }
  @media only screen and (min-width: 980px) {
    .idea-page h3 {
      font-size: 1.2rem;
      padding: 10px 0px; } }

.qa-page {
  transition: all 0.5s; }
  .qa-page a {
    display: inline; }
  .qa-page img {
    max-width: 100%; }
  .qa-page .js-tab {
    display: flex;
    margin: 0 -2px; }
    @media only screen and (min-width: 980px) {
      .qa-page .js-tab {
        margin: 0 -5px; } }
    .qa-page .js-tab li {
      width: calc(50% - 4px);
      text-align: center;
      padding: 10px;
      margin: 2px;
      background: #ccc;
      color: white;
      border-radius: 5px 5px 0 0;
      font-size: 1.1rem; }
      @media only screen and (min-width: 980px) {
        .qa-page .js-tab li {
          padding: 20px;
          margin: 5px;
          font-size: 1.2rem; } }
      .qa-page .js-tab li:hover {
        opacity: .8; }
    .qa-page .js-tab li.active {
      background: #21ccca;
      color: white; }
  .qa-page .js-tab_content {
    display: none; }
    @media only screen and (min-width: 980px) {
      .qa-page .js-tab_content {
        padding: 15px; } }
  .qa-page .active {
    display: block; }
  .qa-page .question_area {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer; }
    .qa-page .question_area:hover {
      background: #f5f6f9; }
    .qa-page .question_area:after {
      content: "";
      width: 1rem;
      height: 10px;
      position: absolute;
      right: 10px;
      top: 0;
      bottom: 0;
      margin: auto;
      background-image: url("../img/icon_arrow_blue.svg");
      background-repeat: no-repeat; }
    .qa-page .question_area .q-icon {
      color: #21ccca;
      font-weight: bold;
      font-size: 1.2rem;
      padding-bottom: 0;
      margin-right: 10px; }
    .qa-page .question_area .q-title {
      color: #0000EE;
      padding: 0;
      padding-right: 22px; }
      @media only screen and (min-width: 980px) {
        .qa-page .question_area .q-title {
          padding-right: 30px; } }
  .qa-page .question_area_nomal {
    cursor: auto; }
    .qa-page .question_area_nomal:after {
      background: none; }
    .qa-page .question_area_nomal:hover {
      background: white; }
  .qa-page .answer_area {
    display: flex; }
    .qa-page .answer_area .a-icon {
      color: #c7b299;
      font-weight: bold;
      font-size: 1.2rem;
      padding-bottom: 0;
      margin-right: 10px; }
  .qa-page .bor_dot_t {
    border-bottom: 1px dotted #21ccca; }
  .qa-page ol {
    margin: 1em 0;
    padding-left: 40px; }
    .qa-page ol li {
      display: list-item;
      list-style: decimal; }
  .qa-page .question_area {
    position: relative;
    padding: 10px; }
  .qa-page .answer_area {
    padding: 0 10px;
    height: 0;
    /* ここでもとの高さを0にしとく */
    overflow: hidden;
    transition: all 0.3s; }
  .qa-page .answer_area.selected {
    background: #f2f2f2;
    padding: 10px;
    height: auto;
    /* ここでもとの高さを0にしとく */
    transition: all 0.3s;
    padding-right: 25px; }
    @media only screen and (min-width: 980px) {
      .qa-page .answer_area.selected {
        padding-right: 35px; } }

.contact-page .red {
  color: red; }
.contact-page .fwn {
  font-weight: normal;
  font-size: .8rem;
  display: block;
  width: 100%; }
.contact-page .fwb {
  font-weight: bold; }
.contact-page .tac {
  text-align: center; }
.contact-page .nobt {
  border-top: 0; }
.contact-page .obgc01 {
  background: #f4f4f4;
  border: #ccc 2px solid; }
.contact-page .wsnw {
  font-size: .9rem; }
.contact-page span {
  font-weight: 100; }
.contact-page table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  border: none;
  border-collapse: collapse;
  border-top: 0; }
  @media only screen and (min-width: 980px) {
    .contact-page table {
      width: 80%;
      margin: 30px auto; } }
  .contact-page table th {
    align-items: center;
    border-right: 0px;
    border-bottom: 0px;
    border-left: 0;
    padding: 10px 10px 3px;
    line-height: 1.2; }
    @media only screen and (min-width: 980px) {
      .contact-page table th {
        width: 25%;
        font-size: 1.1rem; } }
  .contact-page table tr {
    padding: 0; }
    @media only screen and (min-width: 980px) {
      .contact-page table tr {
        margin: 0 0 20px; } }
  .contact-page table td {
    padding: 0 10px 10px;
    border-right: 0px;
    border-bottom: 0px; }
    @media only screen and (min-width: 980px) {
      .contact-page table td {
        width: 75%; } }
  .contact-page table select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none; }
  .contact-page table textarea, .contact-page table input, .contact-page table select {
    max-width: 100%;
    border: 2px solid #ccc;
    padding: 4px;
    font-size: 1rem;
    min-height: 2.5rem; }
    @media only screen and (min-width: 980px) {
      .contact-page table textarea, .contact-page table input, .contact-page table select {
        padding: 5px;
        margin: 0 5px; } }
  .contact-page table select {
    padding: 4px 10px; }
  .contact-page table label {
    margin-right: 20px;
    font-size: 1rem;
    vertical-align: middle; }
.contact-page .form_top {
  background: #f4f4f4;
  border-top: 1px solid #ccc; }
.contact-page .button_area01 {
  display: flex;
  justify-content: center;
  margin: 0 -5px; }
  @media only screen and (min-width: 980px) {
    .contact-page .button_area01 {
      width: 75%;
      margin: 0 auto; } }
  .contact-page .button_area01 .button {
    width: calc(50% - 10px);
    padding: 20px 30px;
    color: white;
    font-size: 1.05rem;
    margin: 10px 5px;
    text-align: center; }
  .contact-page .button_area01 .btn_cancel {
    background: #ccc; }
  .contact-page .button_area01 .btn_check {
    background: #21ccca; }

@media only screen and (min-width: 980px) {
  .support-page .support-top, .support-page .support-bottom {
    display: flex; } }
.support-page .link_box {
  padding: 20px 0 10px;
  background: #f2f2f2;
  margin: 20px 0;
  text-align: center; }
  @media only screen and (min-width: 980px) {
    .support-page .link_box {
      width: 50%;
      padding: 30px 0 10px;
      margin: 15px; } }
  .support-page .link_box p {
    padding: 10px 40px;
    line-height: 1.5; }
    @media only screen and (min-width: 640px) {
      .support-page .link_box p {
        padding: 10px 200px; } }
    @media only screen and (min-width: 980px) {
      .support-page .link_box p {
        padding: 10px 40px; } }
  .support-page .link_box .icon {
    width: 35px;
    margin: 0 auto 10px; }
    @media only screen and (min-width: 980px) {
      .support-page .link_box .icon {
        width: 45px; } }
@media only screen and (min-width: 640px) {
  .support-page .support-top {
    text-align: center; } }
.support-page .support-top .link_box {
  background: white; }
.support-page .support-bottom a.link_button {
  background: #c7b299; }
.support-page .support-bottom .link_contact_box {
  text-align: left; }
  .support-page .support-bottom .link_contact_box h5 {
    color: #b59978;
    font-size: 1.05rem;
    text-align: center;
    padding: 15px 0 0; }
    @media only screen and (min-width: 980px) {
      .support-page .support-bottom .link_contact_box h5 {
        font-size: 1.1rem; } }

.download .inner ul.product__list {
  height: auto;
  margin: 0; }
  .download .inner ul.product__list li {
    border: 1px solid #868eb0;
    background: rgba(255, 255, 255, 0.8);
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0 2px 5px;
    padding: 0; }
    @media only screen and (min-width: 640px) {
      .download .inner ul.product__list li {
        width: calc(33.333% - 4px); } }
    @media only screen and (min-width: 980px) {
      .download .inner ul.product__list li {
        width: calc(20% - 4px); } }
    .download .inner ul.product__list li:hover {
      background: #e3e4ec; }
    .download .inner ul.product__list li:after {
      width: 0;
      height: 0; }
    .download .inner ul.product__list li p.product__name {
      font-size: .8rem;
      padding-left: 10px;
      line-height: 1.2;
      font-weight: bold; }
      .download .inner ul.product__list li p.product__name:before {
        content: ""; }
    .download .inner ul.product__list li .product__img {
      width: 30%;
      padding-top: 25%;
      position: relative; }
      .download .inner ul.product__list li .product__img img {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: auto;
        height: 100%;
        margin: auto;
        min-width: 100%;
        object-fit: cover;
        font-family: 'object-fit: cover;'; }
  .download .inner ul.product__list .active {
    background: #21ccca; }
    .download .inner ul.product__list .active:hover {
      background: #2addda; }
    .download .inner ul.product__list .active .product__name {
      color: white; }
.download .js-tab_content {
  display: none; }
.download .active {
  display: block; }
.download table {
  display: table;
  width: 100%; }
  .download table thead {
    display: none;
    background: #f2f2f2; }
    @media only screen and (min-width: 980px) {
      .download table thead {
        display: table-header-group; } }
    .download table thead th {
      width: 100%;
      font-size: .8rem;
      padding: 0 10px; }
      @media only screen and (min-width: 980px) {
        .download table thead th {
          width: auto;
          font-size: .9rem;
          padding: 5px 10px;
          text-align: left;
          display: table-cell; } }
  @media only screen and (min-width: 980px) {
    .download table th, .download table td {
      width: auto;
      display: table-cell;
      flex-wrap: nowrap;
      align-items: baseline;
      padding: 10px 10px; } }
  .download table tr {
    width: 100%;
    padding: 15px 5px; }
    @media only screen and (min-width: 980px) {
      .download table tr {
        display: table;
        flex-wrap: nowrap;
        align-items: baseline; } }
  @media only screen and (min-width: 980px) {
    .download table .t_number {
      width: 150px; } }
  @media only screen and (min-width: 980px) {
    .download table .t_download {
      width: 230px; } }
  .download table .t_download a {
    background: #868eb0;
    color: white;
    text-decoration: none;
    padding: 5px 12px;
    margin: 0 5px 0 0;
    width: 30%;
    text-align: center;
    position: relative; }
    @media only screen and (min-width: 640px) {
      .download table .t_download a {
        width: 31%;
        padding: 10px 12px; } }
    @media only screen and (min-width: 980px) {
      .download table .t_download a {
        width: auto;
        padding: 8px 20px 8px 5px; } }
    .download table .t_download a:after {
      content: "";
      background-image: url(../img/icon_arrow_white.svg);
      background-repeat: no-repeat;
      background-position: center center;
      width: 10%;
      height: 15px;
      position: absolute;
      top: 0;
      bottom: 0;
      right: 5px;
      margin: auto; }
  .download table tbody {
    display: table-row-group;
    width: 100%; }
    .download table tbody tr {
      border-bottom: 1px dotted #21ccca; }
      .download table tbody tr:last-child {
        border-bottom: none; }
      .download table tbody tr:hover {
        background: #f8f9fb; }
      @media only screen and (min-width: 980px) {
        .download table tbody tr td {
          font-size: .92rem; } }

.privacy ol li {
  padding: 10px 0; }
  @media only screen and (min-width: 980px) {
    .privacy ol li {
      padding: 25px 0; } }
  .privacy ol li p {
    padding-left: 10px; }
    @media only screen and (min-width: 980px) {
      .privacy ol li p {
        padding-left: 20px; } }
  .privacy ol li h4 {
    padding-bottom: 5px;
    margin-bottom: 10px;
    font-size: 1rem;
    position: relative; }
    .privacy ol li h4:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
      left: 0;
      right: 0;
      bottom: 0;
      background-image: linear-gradient(to right, #c7b299, white); }
    .privacy ol li h4::first-letter {
      color: #c7b299;
      margin-right: 5px;
      font-size: 1.1rem; }
      @media only screen and (min-width: 980px) {
        .privacy ol li h4::first-letter {
          margin-left: 5px;
          font-size: 1.2rem; } }
    @media only screen and (min-width: 980px) {
      .privacy ol li h4 {
        font-size: 1.1rem;
        padding-bottom: 10px; } }
  .privacy ol li ul {
    padding: 5px 0 5px 10px;
    margin-left: 20px; }
    @media only screen and (min-width: 980px) {
      .privacy ol li ul {
        padding: 5px 0 20px 20px;
        margin-left: 40px; } }
    .privacy ol li ul li {
      padding: 0;
      list-style-type: disc; }

.news .inner .wp-block-table, .download .inner .wp-block-table {
  margin: 0 0 1rem;
  border-collapse: collapse;
  width: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
  border: 1px solid #767676; }
  .news .inner .wp-block-table tr, .download .inner .wp-block-table tr {
    flex-wrap: inherit;
    padding: 0; }
  .news .inner .wp-block-table td, .news .inner .wp-block-table th, .download .inner .wp-block-table td, .download .inner .wp-block-table th {
    padding: 0.5em;
    border: 1px solid #767676;
    word-break: break-all; }
  .news .inner .wp-block-table td:first-child, .download .inner .wp-block-table td:first-child {
    width: 30%; }
.news .inner ul, .download .inner ul {
  padding: 0 0 20px; }
  @media only screen and (min-width: 980px) {
    .news .inner ul, .download .inner ul {
      padding: 10px 0 20px;
      height: 455px; } }
  .news .inner ul li, .download .inner ul li {
    padding: 5px 0 5px 15px;
    margin: 0 0 10px;
    position: relative; }
    @media only screen and (min-width: 640px) {
      .news .inner ul li, .download .inner ul li {
        margin: 0 0 10px 10px; } }
    @media only screen and (min-width: 980px) {
      .news .inner ul li, .download .inner ul li {
        padding: 5px 0 10px 15px; } }
    .news .inner ul li:after, .download .inner ul li:after {
      content: "";
      height: 1px;
      width: 100%;
      background: #efefef;
      position: absolute;
      bottom: 0;
      margin: auto;
      left: 0; }
    .news .inner ul li a, .download .inner ul li a {
      color: #666666;
      padding-right: 10%;
      position: relative; }
      .news .inner ul li a:after, .download .inner ul li a:after {
        content: "";
        background-image: url(../img/icon_arrow_brown.svg);
        background-repeat: no-repeat;
        background-position: center center;
        width: 10%;
        height: 20px;
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto; }
        @media only screen and (min-width: 980px) {
          .news .inner ul li a:after, .download .inner ul li a:after {
            height: 25px; } }
    .news .inner ul li p, .download .inner ul li p {
      padding: 5px 0; }
      @media only screen and (min-width: 980px) {
        .news .inner ul li p, .download .inner ul li p {
          position: relative;
          max-height: 3.6rem;
          word-break: break-all;
          overflow: hidden; }
          .news .inner ul li p:before, .news .inner ul li p:after, .download .inner ul li p:before, .download .inner ul li p:after {
            position: absolute;
            background: #fff; }
          .news .inner ul li p:before, .download .inner ul li p:before {
            content: '...';
            bottom: 0px;
            right: 0;
            width: 1.1em;
            padding: 0 6px; }
          .news .inner ul li p:after, .download .inner ul li p:after {
            content: '';
            width: 100%;
            height: 100%; } }
.news .date, .download .date {
  font-family: 'Muli';
  font-style: italic;
  color: #c7b299; }
.news .category, .download .category {
  color: white;
  padding: 3px 10px;
  font-size: .8rem;
  background: #868eb0; }
  .news .category__maker, .download .category__maker {
    background: #868eb0; }
  .news .category__event, .download .category__event {
    background: #c7b299; }

.pager .page-numbers {
  display: none; }
.pager .next.page-numbers {
  display: block; }
  .pager .next.page-numbers span {
    display: inline-block;
    width: 100%; }
.pager .prev.page-numbers {
  display: block; }
  .pager .prev.page-numbers span {
    display: inline-block;
    width: 100%; }
@media only screen and (min-width: 640px) {
  .pager {
    width: 80%;
    margin: 0 auto 30px; } }
@media only screen and (min-width: 980px) {
  .pager {
    width: 70%;
    margin: 0 auto 30px; } }
.pager:after {
  content: "";
  clear: both;
  display: block; }
.pager a {
  margin: 0 5px; }
  @media only screen and (min-width: 980px) {
    .pager a {
      margin: 0 10px; } }
.pager .prev {
  float: left;
  width: calc(50% - 10px); }
  @media only screen and (min-width: 980px) {
    .pager .prev {
      width: calc(50% - 20px); } }
  .pager .prev:after {
    right: auto;
    left: 5px;
    transform: rotate(180deg); }
.pager .next {
  width: calc(50% - 10px);
  float: right; }
  @media only screen and (min-width: 980px) {
    .pager .next {
      width: calc(50% - 20px); } }
  .pager .next:after {
    right: 5px; }

.recruit {
  background-image: url(../img/cover/cover18.jpg); }
  .recruit .link_button {
    margin: 10px auto; }
    @media only screen and (min-width: 980px) {
      .recruit .link_button {
        margin: 30px auto; } }
  @media only screen and (min-width: 980px) {
    .recruit .recruit__page {
      display: flex;
      padding-top: 20px; } }
  .recruit .brand__title h2, .recruit .brand__title h3 {
    color: white;
    font-size: 1.3rem; }
    @media only screen and (min-width: 980px) {
      .recruit .brand__title h2, .recruit .brand__title h3 {
        font-size: 1.5rem; } }
  .recruit .recruit__side {
    display: flex;
    flex-wrap: wrap;
    padding-bottom: 20px; }
    @media only screen and (min-width: 980px) {
      .recruit .recruit__side {
        align-self: baseline;
        width: 250px;
        padding-right: 50px; } }
    .recruit .recruit__side a {
      margin: 2.5px;
      padding: 10px;
      width: calc(33% - 5px);
      display: flex;
      align-items: center;
      font-size: .9rem;
      text-align: left; }
      @media only screen and (min-width: 640px) {
        .recruit .recruit__side a {
          width: calc(33.333% - 5px); } }
      @media only screen and (min-width: 980px) {
        .recruit .recruit__side a {
          width: 100%;
          font-size: 1rem;
          padding: 15px 10px; } }
      .recruit .recruit__side a:after {
        width: 5%;
        right: 5px; }
    .recruit .recruit__side .active {
      background: #21ccca; }
  @media only screen and (min-width: 980px) {
    .recruit .recruit__inner {
      width: calc(100% - 250px); } }
  .recruit table {
    border-bottom: none; }
    .recruit table tr {
      border-bottom: 1px dotted #0e1d61; }
      .recruit table tr:last-child {
        border: none; }
    .recruit table th {
      color: #0e1d61;
      font-weight: bold; }
    .recruit table img {
      max-width: 100%;
      max-height: 300px; }
  .recruit h3 {
    color: #0e1d61;
    font-size: 1.2rem;
    padding: 10px 0 5px; }
    @media only screen and (min-width: 980px) {
      .recruit h3 {
        font-size: 1.3rem;
        padding: 10px 0px; } }

@media only screen and (min-width: 980px) {
  .price-section {
    font-size: 18px; } }
.price-section .section-title {
  padding: 15px 20px;
  font-size: 18px; }
  @media only screen and (min-width: 980px) {
    .price-section .section-title {
      font-size: 21px; } }
.price-section .top-section {
  margin-top: 52px; }
  @media only screen and (min-width: 980px) {
    .price-section .top-section {
      margin-top: 142px; } }
.price-section .section {
  padding-top: 0; }
  .price-section .section .title {
    padding-top: 30px; }
    @media only screen and (min-width: 640px) {
      .price-section .section .title {
        padding-top: 40px; } }
    @media only screen and (min-width: 980px) {
      .price-section .section .title {
        padding-top: 50px; } }
.price-section .bk-green {
  border: solid 1px #21ccca;
  border-radius: 5px;
  background: #f0fcfc; }
.price-section .bk-red {
  border: solid 1px #ff7777;
  border-radius: 5px;
  background: #fff7f7; }
.price-section .cource-about {
  margin-top: 15px;
  letter-spacing: 1px;
  padding: 20px 15px; }
.price-section .cource-price {
  padding: 0 5px;
  margin-top: 15px; }
  .price-section .cource-price .price-type {
    font-weight: bold; }
  .price-section .cource-price table {
    width: 100%;
    margin-top: 10px; }
    .price-section .cource-price table .price-type {
      text-align: left; }
    .price-section .cource-price table tr td {
      border-top: solid 1px #ebe7e3;
      padding: 8px 10px; }
      .price-section .cource-price table tr td:nth-child(3) {
        width: 30%; }
    .price-section .cource-price table tr .original-price {
      color: gray;
      font-size: 11px;
      text-decoration: line-through;
      text-align: right; }
      @media only screen and (min-width: 980px) {
        .price-section .cource-price table tr .original-price {
          font-size: 14px; } }
    .price-section .cource-price table tr .price {
      text-align: right; }
    .price-section .cource-price table tr .percentage {
      color: red;
      font-size: 10px;
      text-align: right; }
      @media only screen and (min-width: 980px) {
        .price-section .cource-price table tr .percentage {
          font-size: 13px; } }
    .price-section .cource-price table tr .per-time {
      font-size: 10px;
      text-align: right; }
      @media only screen and (min-width: 980px) {
        .price-section .cource-price table tr .per-time {
          font-size: 13px; } }
    .price-section .cource-price table tbody {
      border-bottom: 1px solid #ebe7e3; }
.price-section .price-detail {
  padding: 15px; }
  .price-section .price-detail .price-detail-title {
    color: #ff7777;
    font-weight: bold;
    text-align: center;
    margin-bottom: 15px;
    font-size: 18px; }
    @media only screen and (min-width: 980px) {
      .price-section .price-detail .price-detail-title {
        font-size: 21px; } }
  .price-section .price-detail p {
    line-height: 160%;
    margin-bottom: 20px; }
  .price-section .price-detail p:last-child {
    margin-bottom: 0; }
.price-section .bold {
  font-weight: bold; }
.price-section .text {
  padding: 0px 15px; }

@media only screen and (min-width: 980px) {
  .salon-section {
    font-size: 18px; } }
.salon-section .section-title {
  padding: 15px 20px;
  font-size: 18px; }
  @media only screen and (min-width: 980px) {
    .salon-section .section-title {
      font-size: 21px; } }
.salon-section .top-section {
  margin-top: 52px; }
  @media only screen and (min-width: 980px) {
    .salon-section .top-section {
      margin-top: 142px; } }
.salon-section .section {
  padding-top: 0; }
  .salon-section .section .title {
    padding-top: 30px; }
    @media only screen and (min-width: 640px) {
      .salon-section .section .title {
        padding-top: 40px; } }
    @media only screen and (min-width: 980px) {
      .salon-section .section .title {
        padding-top: 50px; } }
.salon-section .salon-content {
  text-align: center; }
  .salon-section .salon-content .alphabet-name {
    font-size: 17px; }
    @media only screen and (min-width: 980px) {
      .salon-section .salon-content .alphabet-name {
        font-size: 20px; } }
  .salon-section .salon-content .item {
    margin-bottom: 10px; }
    .salon-section .salon-content .item .item-title {
      color: white;
      background: #21ccca;
      border-radius: 25px;
      display: inline-block;
      padding: 2px;
      width: 95px;
      margin-bottom: 5px; }
      @media only screen and (min-width: 980px) {
        .salon-section .salon-content .item .item-title {
          width: 130px; } }
  .salon-section .salon-content iframe {
    max-width: 100%; }
  .salon-section .salon-content .airbnb-embed-frame {
    max-width: 100%;
    text-align: center;
    margin: auto; }

@media only screen and (min-width: 980px) {
  .perfect_shape-section {
    font-size: 18px; } }
.perfect_shape-section img {
  margin: 10px 0px; }
.perfect_shape-section .section-title {
  padding: 15px 20px;
  font-size: 16px; }
  @media only screen and (min-width: 980px) {
    .perfect_shape-section .section-title {
      font-size: 19px; } }
.perfect_shape-section .top-section {
  margin-top: 52px; }
  @media only screen and (min-width: 980px) {
    .perfect_shape-section .top-section {
      margin-top: 142px; } }
.perfect_shape-section .section .title {
  padding-top: 30px; }
  @media only screen and (min-width: 640px) {
    .perfect_shape-section .section .title {
      padding-top: 40px; } }
  @media only screen and (min-width: 980px) {
    .perfect_shape-section .section .title {
      padding-top: 50px; } }
@media only screen and (min-width: 980px) {
  .perfect_shape-section .pc-hidden {
    display: none; } }
.perfect_shape-section .bk-gray {
  background: #dcdfdf; }
.perfect_shape-section .green-text {
  color: #21ccca; }
.perfect_shape-section .red-text {
  color: #ff7777; }
.perfect_shape-section .bk-green {
  border: solid 1px #21ccca;
  border-radius: 5px;
  background: #f0fcfc; }
.perfect_shape-section .tac {
  text-align: center; }
.perfect_shape-section .fwb {
  font-weight: bold; }
.perfect_shape-section .perfect_shape_image {
  text-align: center; }
  .perfect_shape-section .perfect_shape_image .topic-text {
    font-size: 16px; }
    @media only screen and (min-width: 980px) {
      .perfect_shape-section .perfect_shape_image .topic-text {
        font-size: 19px; } }
  .perfect_shape-section .perfect_shape_image img {
    width: 80%; }
.perfect_shape-section .topic-text {
  font-weight: bold;
  font-size: 18px;
  text-align: center;
  margin-top: 20px; }
  @media only screen and (min-width: 980px) {
    .perfect_shape-section .topic-text {
      font-size: 21px; } }
.perfect_shape-section .list {
  padding: 25px 15px;
  margin-top: 10px; }
  .perfect_shape-section .list ul li {
    font-size: 13px;
    line-height: 200%; }
    .perfect_shape-section .list ul li:before {
      content: '・'; }
    @media only screen and (min-width: 980px) {
      .perfect_shape-section .list ul li {
        font-size: 16px; } }
.perfect_shape-section .three-power {
  display: flex; }
  .perfect_shape-section .three-power .each-power {
    margin: 2px;
    width: calc(100% / 3);
    flex-direction: column; }
    @media only screen and (min-width: 980px) {
      .perfect_shape-section .three-power .each-power {
        margin: 2%; } }
    .perfect_shape-section .three-power .each-power img {
      display: block;
      height: 75px;
      margin: 0; }
      @media only screen and (min-width: 980px) {
        .perfect_shape-section .three-power .each-power img {
          height: 10vw; } }
    .perfect_shape-section .three-power .each-power .text {
      font-size: 12px;
      text-align: center;
      height: 36px; }
      @media only screen and (min-width: 980px) {
        .perfect_shape-section .three-power .each-power .text {
          font-size: 15px;
          height: 50px; } }
      .perfect_shape-section .three-power .each-power .text span {
        font-size: 9px;
        letter-spacing: -1px; }
        @media only screen and (min-width: 980px) {
          .perfect_shape-section .three-power .each-power .text span {
            font-size: 12px; } }
.perfect_shape-section .flex-box {
  display: flex; }
.perfect_shape-section .mlf-image {
  flex-wrap: wrap; }
  .perfect_shape-section .mlf-image img {
    width: 48%;
    margin: 5px auto;
    height: 48%; }

@media only screen and (min-width: 980px) {
  .cool_shape-section {
    font-size: 18px; } }
.cool_shape-section .section-title {
  padding: 15px 20px;
  font-size: 16px; }
  @media only screen and (min-width: 980px) {
    .cool_shape-section .section-title {
      font-size: 19px; } }
.cool_shape-section .top-section {
  margin-top: 52px; }
  @media only screen and (min-width: 980px) {
    .cool_shape-section .top-section {
      margin-top: 142px; } }
.cool_shape-section .green-text {
  color: #21ccca; }
.cool_shape-section .red-text {
  color: #ff7777; }
.cool_shape-section .bk-green {
  border: solid 1px #21ccca;
  border-radius: 5px;
  background: #f0fcfc; }
.cool_shape-section .cool_shape_image {
  text-align: center; }
  .cool_shape-section .cool_shape_image .topic-text {
    font-size: 16px;
    margin-top: 0; }
    @media only screen and (min-width: 980px) {
      .cool_shape-section .cool_shape_image .topic-text {
        font-size: 19px; } }
  .cool_shape-section .cool_shape_image img {
    width: 40%;
    margin-top: 20px; }
.cool_shape-section .topic-text {
  font-weight: bold;
  font-size: 18px;
  text-align: center; }
  @media only screen and (min-width: 980px) {
    .cool_shape-section .topic-text {
      font-size: 21px; } }
.cool_shape-section .flex-box {
  display: flex; }
.cool_shape-section .bk-gray {
  background: #dcdfdf; }
.cool_shape-section .cool_shape_image_small {
  margin-top: 20px;
  margin-bottom: 30px; }
  .cool_shape-section .cool_shape_image_small img {
    width: 40%;
    height: 40%; }
.cool_shape-section .list {
  padding: 15px; }
  .cool_shape-section .list ul li {
    font-size: 13px;
    line-height: 200%; }
    .cool_shape-section .list ul li:before {
      content: '・'; }
    @media only screen and (min-width: 980px) {
      .cool_shape-section .list ul li {
        font-size: 16px; } }
.cool_shape-section .step {
  margin-bottom: 10px;
  margin-right: 25px;
  margin-left: 25px; }
  .cool_shape-section .step p {
    font-size: 13px; }
    @media only screen and (min-width: 980px) {
      .cool_shape-section .step p {
        font-size: 16px; } }
  .cool_shape-section .step .step-title {
    color: white;
    background: #21ccca;
    border-radius: 25px;
    display: inline-block;
    padding: 2px;
    width: 95px;
    text-align: center;
    margin: auto;
    margin-bottom: 5px;
    display: block; }
  .cool_shape-section .step .step-image {
    justify-content: center;
    align-items: center;
    align-content: space-between;
    margin-bottom: 10px; }
    .cool_shape-section .step .step-image p {
      margin-left: 40px;
      text-align: center; }
    .cool_shape-section .step .step-image img {
      max-width: 150px;
      margin: 0;
      margin-left: 30px; }
      @media only screen and (min-width: 980px) {
        .cool_shape-section .step .step-image img {
          max-width: 450px; } }
.cool_shape-section .flow {
  margin-bottom: 10px; }
  .cool_shape-section .flow p {
    width: 25%;
    text-align: center; }
.cool_shape-section .tac {
  text-align: center; }

.confort_dual-section img {
  height: auto; }
.confort_dual-section p {
  line-height: 180%; }
@media only screen and (min-width: 980px) {
  .confort_dual-section {
    font-size: 18px; } }
.confort_dual-section .topic-text {
  margin-top: 20px;
  font-size: 16px; }
  @media only screen and (min-width: 980px) {
    .confort_dual-section .topic-text {
      font-size: 19px; } }
.confort_dual-section .confort-text {
  margin: 10px; }
.confort_dual-section .confort_dual_image {
  text-align: center; }
  .confort_dual-section .confort_dual_image .topic-text {
    margin-top: 0; }
  .confort_dual-section .confort_dual_image img {
    width: 70%;
    margin-top: 20px; }
.confort_dual-section .confort_dual_image_small {
  margin-bottom: 30px; }
  .confort_dual-section .confort_dual_image_small div {
    width: 50%;
    height: 170px;
    overflow: hidden; }
    .confort_dual-section .confort_dual_image_small div img {
      width: 100%;
      height: 100%;
      max-height: 170px; }
      @media only screen and (min-width: 980px) {
        .confort_dual-section .confort_dual_image_small div img {
          height: 100%;
          margin: auto; } }
  .confort_dual-section .confort_dual_image_small .left {
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0) calc(100% - 40px), rgba(255, 255, 255, 0.9)), url(../img/1d17eb06ebfa65c82d2f41435cc0d34e_s.jpg);
    background-size: cover;
    background-position: center; }
  .confort_dual-section .confort_dual_image_small .right img {
    transform: rotate(85deg);
    width: 85%;
    margin-left: 15%; }
    @media only screen and (min-width: 980px) {
      .confort_dual-section .confort_dual_image_small .right img {
        transform: rotate(55deg); } }
.confort_dual-section .confort_dual_feature {
  text-align: left;
  margin: 20px 15px;
  margin-top: 0; }
  .confort_dual-section .confort_dual_feature .feature_title {
    font-size: 15px;
    vertical-align: middle;
    line-height: 19px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 5px; }
    @media only screen and (min-width: 980px) {
      .confort_dual-section .confort_dual_feature .feature_title {
        font-size: 18px; } }
    .confort_dual-section .confort_dual_feature .feature_title:before {
      content: '●';
      color: #21ccca;
      font-size: 19px;
      margin-right: 5px;
      vertical-align: bottom; }
      @media only screen and (min-width: 980px) {
        .confort_dual-section .confort_dual_feature .feature_title:before {
          font-size: 22px; } }
.confort_dual-section .confort_ba {
  flex-wrap: wrap; }
  .confort_dual-section .confort_ba img {
    width: 48%;
    margin: 5px auto;
    height: 48%; }

@media only screen and (min-width: 980px) {
  .cavipot-section {
    font-size: 18px; } }
.cavipot-section img {
  margin: 10px 0px; }
.cavipot-section .section-title {
  padding: 15px 20px;
  font-size: 16px; }
  @media only screen and (min-width: 980px) {
    .cavipot-section .section-title {
      font-size: 19px; } }
.cavipot-section .top-section {
  margin-top: 52px; }
  @media only screen and (min-width: 980px) {
    .cavipot-section .top-section {
      margin-top: 142px; } }
.cavipot-section .section .title {
  padding-top: 30px; }
  @media only screen and (min-width: 640px) {
    .cavipot-section .section .title {
      padding-top: 40px; } }
  @media only screen and (min-width: 980px) {
    .cavipot-section .section .title {
      padding-top: 50px; } }
.cavipot-section .topic-text {
  font-weight: bold;
  font-size: 16px;
  text-align: center; }
  @media only screen and (min-width: 980px) {
    .cavipot-section .topic-text {
      font-size: 19px; } }
.cavipot-section .green-text {
  color: #21ccca; }
.cavipot-section .red-text {
  color: #ff7777; }
.cavipot-section .bk-green {
  border: solid 1px #21ccca;
  border-radius: 5px;
  background: #f0fcfc; }
.cavipot-section .list {
  padding: 20px 15px;
  margin-bottom: 10px; }
  .cavipot-section .list ul li {
    font-size: 13px;
    line-height: 200%; }
    .cavipot-section .list ul li:before {
      content: '・'; }
    @media only screen and (min-width: 980px) {
      .cavipot-section .list ul li {
        font-size: 16px; } }
    .cavipot-section .list ul li:first-child {
      font-weight: bold; }
      .cavipot-section .list ul li:first-child:before {
        content: ''; }
.cavipot-section .step {
  margin-bottom: 25px;
  margin-right: 25px;
  margin-left: 25px;
  text-align: center; }
  .cavipot-section .step p {
    font-size: 15px;
    line-height: 180%; }
    @media only screen and (min-width: 980px) {
      .cavipot-section .step p {
        font-size: 18px; } }
  .cavipot-section .step .step-title {
    color: white;
    background: #21ccca;
    border-radius: 25px;
    display: inline-block;
    padding: 0px;
    width: 105px;
    text-align: center;
    margin: auto;
    margin-bottom: 5px;
    display: block; }
  .cavipot-section .step .step-image {
    justify-content: center;
    align-items: center;
    align-content: space-between;
    margin-bottom: 5px; }
    .cavipot-section .step .step-image img {
      max-width: 150px;
      margin: 0;
      margin-top: 10px; }
      @media only screen and (min-width: 980px) {
        .cavipot-section .step .step-image img {
          max-width: 450px; } }
.cavipot-section .cavipot_image {
  text-align: center; }
  .cavipot-section .cavipot_image img {
    width: 75%; }
.cavipot-section .cavipot_feature {
  text-align: left;
  margin: 20px 15px;
  margin-top: 0; }
  .cavipot-section .cavipot_feature p {
    padding: 0 5px;
    margin: 20px auto;
    line-height: 180%; }
  .cavipot-section .cavipot_feature .feature_title {
    font-size: 15px;
    vertical-align: middle;
    line-height: 19px;
    text-align: left;
    font-weight: bold;
    margin-bottom: 5px; }
    @media only screen and (min-width: 980px) {
      .cavipot-section .cavipot_feature .feature_title {
        font-size: 18px; } }
    .cavipot-section .cavipot_feature .feature_title:before {
      content: '●';
      color: #21ccca;
      font-size: 19px;
      margin-right: 5px;
      vertical-align: bottom; }
      @media only screen and (min-width: 980px) {
        .cavipot-section .cavipot_feature .feature_title:before {
          font-size: 22px; } }
.cavipot-section .cavipot_feature_image {
  text-align: center; }
  .cavipot-section .cavipot_feature_image .machine {
    width: 25%; }

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