@charset "UTF-8";
@property --zoom-factor {
  syntax: "<length>";
  inherits: false;
  initial-value: 0; }
.zoom-wrapper {
  --_min-viewport-width: 480px;
  /* viewportの最小値を下回ったら縮小をやめる */
  --_max-viewport-width: 1350px;
  /* viewportの最大値を上回ったら拡大をやめる */
  --_zoom-value: clamp(
    tan(atan2(var(--_min-viewport-width), var(--_max-viewport-width))),
    tan(atan2(var(--zoom-factor), var(--_max-viewport-width))),
    1
  );
  --zoom-factor: clamp(
    var(--_min-viewport-width),
    100dvi,
    var(--_max-viewport-width)
  );
  zoom: var(--_zoom-value);
  -webkit-text-size-adjust: initial;
  /* iOS Safariのバグを修正 */
  /* 768px以下では100%のズーム値を適用 */ }
  @media (max-width: 480px) {
    .zoom-wrapper {
      zoom: 1; } }

/* ========================================================
	reset.css
	Format,Font Reset
======================================================== */
*,
*::before,
*::after {
  box-sizing: border-box; }

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
figure {
  margin: 0;
  padding: 0; }

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none; }

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed; }

a:not([class]) {
  text-decoration-skip-ink: auto; }

img,
picture {
  max-width: 100%;
  border: 0; }

input,
button,
textarea,
select {
  margin: 0;
  padding: 0;
  font: inherit; }

address,
caption,
cite,
code,
dfn,
em,
th,
var {
  font-style: normal;
  font-weight: normal; }

sup {
  vertical-align: text-top; }

sub {
  vertical-align: text-bottom; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }
html {
  font-family: "Zen Kaku Gothic New", "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 62.5%;
  color: #000000;
  -webkit-overflow-scrolling: touch; }

body {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.02em;
  background: #FFFFFF;
  overflow-x: hidden;
  position: relative;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
  animation: fadeIn 2s ease 0s 1 normal; }
  body:after {
    content: '';
    width: 100vw;
    height: 100svh;
    background-color: #333333;
    mix-blend-mode: multiply;
    position: fixed;
    left: 0;
    top: 0;
    z-index: -1;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.2s;
    transition: all 0.2s; }
  body.fixed {
    position: fixed;
    width: 100%; }
    body.fixed:after {
      z-index: 99;
      opacity: 1;
      visibility: visible; }
  @media (max-width: 480px) {
    body {
      font-size: 1.4rem; } }

@keyframes fadeIn {
  0% {
    opacity: 0; }
  100% {
    opacity: 1; } }
a, a:link, a:visited {
  color: #000000;
  text-decoration: none;
  -webkit-transition: all .4s;
  transition: all .4s; }
  a:hover img, a:link:hover img, a:visited:hover img {
    opacity: 0.6; }

img {
  max-width: 100%;
  width: auto;
  height: auto;
  vertical-align: bottom;
  -webkit-transition: all .4s;
  transition: all .4s; }

.container {
  margin: auto;
  max-width: 1200px;
  width: 94%;
  height: auto; }
  .container .inner {
    width: 90%; }

.inner {
  margin: auto;
  max-width: 1070px;
  width: 85%;
  height: auto; }

@media (min-width: 1025px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none; } }
button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none; }

.cContactArea {
  padding: clamp(75px, 13.0215vw, 125px) 0;
  position: relative;
  z-index: 3; }
  .cContactArea .parts {
    position: absolute;
    top: 5.5555555556vw;
    left: auto;
    right: 5.5555555556vw;
    width: 22.64%; }
    @media (max-width: 820px) {
      .cContactArea .parts {
        top: auto;
        right: 10px;
        bottom: -60px; } }
    .cContactArea .parts figure {
      width: 100%;
      display: block;
      overflow: hidden;
      position: relative; }
      .cContactArea .parts figure::before {
        content: '';
        padding-top: 191.72%;
        display: block; }
      .cContactArea .parts figure img, .cContactArea .parts figure source {
        margin: auto;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 0; }
  .cContactArea h2 {
    margin-bottom: 30px; }
    .cContactArea h2 span {
      font-size: clamp(28px, 4.3758vw, 35px);
      line-height: 1.7142857143;
      letter-spacing: 0.05em;
      font-weight: 700;
      display: inline-block;
      position: relative;
      width: fit-content;
      text-decoration: underline;
      text-underline-offset: 3px;
      text-decoration-thickness: 1px;
      -webkit-text-decoration: underline;
      -webkit-text-underline-offset: 3px;
      -webkit-text-decoration-thickness: 1px; }
      @media (max-width: 480px) {
        .cContactArea h2 span {
          font-size: 1.8rem;
          line-height: 1.7; } }
  .cContactArea p {
    font-size: clamp(14px, 3.4vw, 18px);
    font-weight: 700;
    line-height: 1.9444444444;
    letter-spacing: 0.05em;
    max-width: 618px; }
    @media (max-width: 480px) {
      .cContactArea p {
        line-height: 1.7; } }

dialog {
  background: #fff;
  border: none;
  z-index: 100;
  transition: opacity 1s, translate 1s; }
  dialog[open] {
    opacity: 1;
    translate: 0 0; }
@starting-style {
  dialog[open] {
    opacity: 0;
    translate: 0 20px; } }
  dialog::backdrop {
    background: rgba(0, 0, 0, 0.5); }
  dialog .dialog-inner {
    position: relative; }
    dialog .dialog-inner .modalClose {
      margin: auto;
      width: 40px;
      height: 40px;
      background: #000000;
      display: block;
      border-radius: 50%;
      border: none;
      outline: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      cursor: pointer;
      position: absolute;
      top: max(-25px,-3.472vw);
      right: max(-15px,-2.084vw); }
      dialog .dialog-inner .modalClose span {
        margin: auto;
        width: 20px;
        display: block;
        position: relative; }
        dialog .dialog-inner .modalClose span::before, dialog .dialog-inner .modalClose span::after {
          content: '';
          width: 100%;
          height: 2px;
          background: #FFFFFF;
          border-radius: 4px;
          -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
          position: absolute;
          left: 0; }
        dialog .dialog-inner .modalClose span::before {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg); }
        dialog .dialog-inner .modalClose span::after {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }

/*============================================================================
	電話問い合わせ
=============================================================================*/
dialog.phoneBox {
  padding: clamp(24px, 4.167vw, 40px) clamp(18px, 3.1245vw, 30px);
  width: 80%;
  max-width: 500px;
  border-radius: 10px; }
  dialog.phoneBox .dialog-inner h2 {
    margin: 0 auto 10px;
    font-size: clamp(16px, 2.5002vw, 20px);
    text-align: center; }
  dialog.phoneBox .dialog-inner .phone a {
    padding: clamp(12px, 2.0835vw, 20px) 10px;
    color: #FFFFFF;
    font-weight: 700;
    text-align: center;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 10px;
    background: #0BB3A4; }
    dialog.phoneBox .dialog-inner .phone a .telno {
      margin-left: 12px;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
      dialog.phoneBox .dialog-inner .phone a .telno::before {
        content: '';
        margin-right: 6px;
        width: 20px;
        height: 20px;
        background: url("../img/common/icon_tel.svg") no-repeat center center/contain;
        display: block;
        filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(144deg) brightness(103%) contrast(101%); }
  dialog.phoneBox .dialog-inner .phone + .phone {
    margin-top: 20px; }

/*============================================================================
	header
=============================================================================*/
/*============================================================================
	drawer menuBtn
=============================================================================*/
.menuBtn {
  margin: auto 0;
  padding: 15px 10px;
  width: 42px;
  height: 42px;
  text-align: center;
  background: none;
  display: block;
  outline: 0;
  border: none;
  border-radius: 0;
  position: fixed;
  top: 22px;
  right: 15px;
  z-index: 9999;
  -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0); }
  .menuBtn:hover {
    cursor: pointer; }
  .menuBtn .drawer-hamburger-icon {
    margin: auto;
    width: 100%;
    height: 2px;
    -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
    background-color: #0BB3A4;
    position: relative;
    display: block; }
    .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before, .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after {
      content: '';
      width: 100%;
      height: 2px;
      -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
      background-color: #0BB3A4;
      position: absolute;
      left: 0; }
    .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:before {
      top: -8px; }
    .menuBtn .drawer-hamburger-icon.drawer-hamburger-icon:after {
      top: 8px; }
  .menuBtn.close-btn .drawer-hamburger-icon {
    background-color: transparent; }
    .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before, .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after {
      top: 0; }
    .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:before {
      -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      transform: rotate(45deg); }
    .menuBtn.close-btn .drawer-hamburger-icon.drawer-hamburger-icon:after {
      -webkit-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      transform: rotate(-45deg); }
  .menuBtn.cross .drawer-hamburger-icon.drawer-hamburger-icon:before, .menuBtn.cross .drawer-hamburger-icon.drawer-hamburger-icon:after {
    background: #fff; }
  @media (min-width: 1101px) {
    .menuBtn {
      display: none; } }
  @media (max-width: 480px) {
    .menuBtn {
      top: 15px;
      width: 50px;
      height: 50px; } }

header {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100;
  -webkit-transition: all .4s;
  transition: all .4s; }
  header #headerBox {
    padding: 25px 0 0 60px; }
    @media (max-width: 1100px) {
      header #headerBox {
        padding: 15px;
        padding-left: 5%; } }
    @media (max-width: 480px) {
      header #headerBox {
        padding: 10px; } }
    header #headerBox #hlogo {
      width: 101px; }
      @media (max-width: 480px) {
        header #headerBox #hlogo {
          width: 80px; } }
    header #headerBox #gnaviWrap {
      margin: 0 0 0 auto; }
      header #headerBox #gnaviWrap ul li {
        margin: 0 clamp(30px, 5.208vw, 50px) 0 0; }
        header #headerBox #gnaviWrap ul li a {
          color: #000000;
          font-size: 1.4rem;
          font-weight: 700;
          letter-spacing: 0.1em; }
          header #headerBox #gnaviWrap ul li a:hover {
            position: relative; }
            header #headerBox #gnaviWrap ul li a:hover::before {
              content: '';
              position: absolute;
              width: 13px;
              height: 13px;
              right: -10px;
              top: -10px;
              background: #0BB3A4;
              border-radius: 50%;
              -webkit-transition: all .4s;
              transition: all .4s; }
              @media (max-width: 1100px) {
                header #headerBox #gnaviWrap ul li a:hover::before {
                  display: none; } }
        header #headerBox #gnaviWrap ul li.parent {
          position: relative; }
          @media (max-width: 1100px) {
            header #headerBox #gnaviWrap ul li.parent {
              width: 95px;
              display: -webkit-flex;
              display: -moz-flex;
              display: flex; } }
          header #headerBox #gnaviWrap ul li.parent i {
            display: none; }
            @media (max-width: 1100px) {
              header #headerBox #gnaviWrap ul li.parent i {
                margin: auto 0 auto auto;
                width: 16px;
                height: 16px;
                display: block;
                position: relative; }
                header #headerBox #gnaviWrap ul li.parent i::before, header #headerBox #gnaviWrap ul li.parent i::after {
                  content: '';
                  margin: auto;
                  width: 12px;
                  height: 2px;
                  background: #0BB3A4;
                  display: block;
                  position: absolute;
                  top: 0;
                  left: 0;
                  right: 0;
                  bottom: 0;
                  -webkit-transition: all .4s;
                  transition: all .4s; }
                header #headerBox #gnaviWrap ul li.parent i::after {
                  transform-origin: center;
                  transform: rotate(90deg); } }
          header #headerBox #gnaviWrap ul li.parent .submenuBox {
            margin: auto;
            padding: 2px;
            width: fit-content;
            height: auto;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(8px);
            border-radius: 20px;
            display: block;
            position: absolute;
            top: 100%;
            left: -100%;
            right: -100%;
            bottom: auto;
            transform: translateY(-10px);
            visibility: hidden;
            opacity: 0;
            -webkit-transition: all .4s;
            transition: all .4s; }
            header #headerBox #gnaviWrap ul li.parent .submenuBox > ul {
              padding: .5em 0 .5em 1em;
              border-radius: 2px; }
              header #headerBox #gnaviWrap ul li.parent .submenuBox > ul > li {
                padding-left: 2em;
                position: relative;
                width: max-content; }
                header #headerBox #gnaviWrap ul li.parent .submenuBox > ul > li::before {
                  content: '';
                  margin: auto;
                  width: 20px;
                  height: 3px;
                  background: #0BB3A4;
                  display: block;
                  position: absolute;
                  top: 3px;
                  left: 0;
                  right: auto;
                  bottom: 0; }
                header #headerBox #gnaviWrap ul li.parent .submenuBox > ul > li a {
                  color: #000000;
                  -webkit-transition: all .4s;
                  transition: all .4s; }
                header #headerBox #gnaviWrap ul li.parent .submenuBox > ul > li:hover a {
                  color: #0BB3A4; }
                  header #headerBox #gnaviWrap ul li.parent .submenuBox > ul > li:hover a::before {
                    display: none; }
              header #headerBox #gnaviWrap ul li.parent .submenuBox > ul li + li {
                margin-top: 0.5em; }
          @media (min-width: 1025px) and (hover: hover) {
            header #headerBox #gnaviWrap ul li.parent:hover i::before, header #headerBox #gnaviWrap ul li.parent:focus-within i::before {
              transform: rotate(180deg); }
            header #headerBox #gnaviWrap ul li.parent:hover i::after, header #headerBox #gnaviWrap ul li.parent:focus-within i::after {
              transform: rotate(270deg); }
            header #headerBox #gnaviWrap ul li.parent:hover .submenuBox, header #headerBox #gnaviWrap ul li.parent:focus-within .submenuBox {
              visibility: visible;
              opacity: 1;
              transform: translateY(0); } }
        header #headerBox #gnaviWrap ul li.contact {
          width: 110px;
          height: 33px; }
          header #headerBox #gnaviWrap ul li.contact a {
            border-radius: 30px;
            border: 1px solid #0BB3A4;
            display: block;
            width: 100%;
            height: 100%;
            background: #0BB3A4;
            color: #fff;
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: 0.1em;
            text-align: center;
            line-height: 31px;
            -webkit-transition: all .4s;
            transition: all .4s; }
            header #headerBox #gnaviWrap ul li.contact a:hover {
              border: 1px solid #0BB3A4;
              background: transparent;
              color: #0BB3A4; }
              header #headerBox #gnaviWrap ul li.contact a:hover::before {
                display: none; }
      @media (max-width: 1100px) {
        header #headerBox #gnaviWrap {
          margin: 0;
          padding: clamp(60px, 10.416vw, 100px) 4em;
          width: 100%;
          height: 100vh;
          background: #fff;
          position: fixed;
          top: 0;
          right: -100vw;
          -webkit-transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1);
          transition: all 0.6s cubic-bezier(0.19, 1, 0.22, 1); }
          header #headerBox #gnaviWrap.open {
            right: 0; }
          header #headerBox #gnaviWrap > ul {
            -ms-flex-wrap: wrap;
            flex-wrap: wrap; }
            header #headerBox #gnaviWrap > ul > li {
              margin: 0 5% clamp(36px, 6.2505vw, 60px) 0;
              width: 30%; }
              header #headerBox #gnaviWrap > ul > li:nth-of-type(3n) {
                margin-right: 0; }
              header #headerBox #gnaviWrap > ul > li > a {
                display: block;
                color: #000000;
                border-bottom: 1px solid #0BB3A4; }
              header #headerBox #gnaviWrap > ul > li.parent {
                margin-bottom: auto;
                width: 30%;
                -ms-flex-wrap: wrap;
                flex-wrap: wrap; }
                header #headerBox #gnaviWrap > ul > li.parent > a {
                  width: calc(100% - 24px); }
                header #headerBox #gnaviWrap > ul > li.parent i {
                  width: 24px;
                  height: 24px; }
                header #headerBox #gnaviWrap > ul > li.parent .submenuBox {
                  width: 100%;
                  background: transparent;
                  border-radius: 0;
                  position: static;
                  transform: none;
                  height: 0;
                  overflow: hidden;
                  visibility: visible;
                  opacity: 1; }
                  header #headerBox #gnaviWrap > ul > li.parent .submenuBox ul {
                    padding: 0.5em 0 0;
                    border: none; }
                    header #headerBox #gnaviWrap > ul > li.parent .submenuBox ul li {
                      padding-left: 1.8em;
                      position: relative; }
                      header #headerBox #gnaviWrap > ul > li.parent .submenuBox ul li a {
                        color: #000000;
                        font-size: 1.4rem; }
                      header #headerBox #gnaviWrap > ul > li.parent .submenuBox ul li::before {
                        content: '';
                        margin: auto;
                        width: 15px;
                        height: 2px;
                        background: #0BB3A4;
                        display: block;
                        position: absolute;
                        top: 0px;
                        left: 0;
                        right: auto;
                        bottom: 0; }
                      header #headerBox #gnaviWrap > ul > li.parent .submenuBox ul li + li {
                        margin-top: .25em; } }
      @media (max-width: 480px) {
        header #headerBox #gnaviWrap > ul {
          -ms-flex-wrap: wrap;
          flex-wrap: wrap; }
          header #headerBox #gnaviWrap > ul > li {
            margin: 0 0 clamp(36px, 6.2505vw, 60px) 0;
            width: 100%; }
            header #headerBox #gnaviWrap > ul > li.parent {
              margin-bottom: clamp(36px, 6.2505vw, 60px);
              width: 100%; } }
  header[data-scroll="true"] {
    position: fixed;
    top: 0;
    left: 0;
    animation: headerScl 0.5s forwards; }
    @media (max-width: 1100px) {
      header[data-scroll="true"] {
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(8px); } }
    @media (max-width: 480px) {
      header[data-scroll="true"] {
        height: 75px; } }
    header[data-scroll="true"] #headerBox #hlogo {
      width: 80px; }
      @media (min-width: 1101px) {
        header[data-scroll="true"] #headerBox #hlogo {
          position: relative; }
          header[data-scroll="true"] #headerBox #hlogo::before {
            content: '';
            width: 220px;
            height: 200px;
            position: absolute;
            top: -80px;
            left: -100px;
            background: rgba(255, 255, 255, 0.5);
            backdrop-filter: blur(8px);
            border-radius: 0 0 20px 0;
            z-index: 2; }
          header[data-scroll="true"] #headerBox #hlogo a {
            display: block;
            z-index: 3;
            position: relative; } }
      @media (max-width: 1100px) {
        header[data-scroll="true"] #headerBox #hlogo {
          width: 50px; } }
    header[data-scroll="true"] #headerBox #gnaviWrap > ul {
      position: relative; }
      header[data-scroll="true"] #headerBox #gnaviWrap > ul::before {
        content: '';
        width: 100%;
        height: 50px;
        background: rgba(255, 255, 255, 0.5);
        backdrop-filter: blur(8px);
        position: absolute;
        top: 50%;
        left: -1.5em;
        transform: translateY(-50%);
        border-radius: 9999px;
        z-index: 1; }
      header[data-scroll="true"] #headerBox #gnaviWrap > ul li {
        position: relative;
        z-index: 2; }

@keyframes border_anim {
  0% {
    width: 0%; }
  100% {
    width: 100%; } }
#headerContactBox {
  width: 160px;
  overflow: hidden;
  position: fixed;
  top: 20px;
  right: 0;
  z-index: 100; }
  #headerContactBox p {
    margin-left: 100px;
    width: 60px;
    height: 54px;
    border-top: 1px solid #4880D3;
    border-left: 1px solid #4880D3;
    border-bottom: 1px solid #4880D3;
    position: relative;
    -webkit-transition: all .4s;
    transition: all .4s; }
    #headerContactBox p + p {
      margin-top: 6px; }
    #headerContactBox p .hcBtn {
      padding: 12px 15px;
      width: 160px;
      height: 53px;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      background: #FFFFFF;
      -webkit-transition: all .4s;
      transition: all .4s; }
      #headerContactBox p .hcBtn .icon {
        width: 29px;
        height: 24px;
        display: inline-block;
        filter: invert(44%) sepia(92%) saturate(607%) hue-rotate(186deg) brightness(89%) contrast(84%); }
        #headerContactBox p .hcBtn .icon.mail {
          background: url("../img/common/icon_mail.svg") no-repeat center center/contain; }
        #headerContactBox p .hcBtn .icon.phone {
          background: url("../img/common/icon_tel.svg") no-repeat center center/contain; }
      #headerContactBox p .hcBtn .text {
        margin-left: 10px;
        color: #0BB3A4;
        font-size: 1.4rem;
        font-weight: 700;
        letter-spacing: 0.065em;
        display: inline-block;
        opacity: 0; }
    #headerContactBox p .arrow {
      margin: auto;
      width: 65px;
      height: 33px;
      background: url("../img/common/border.svg") repeat-y top left 2px #FFFFFF;
      display: -webkit-flex;
      display: -moz-flex;
      display: flex;
      -webkit-justify-content: center;
      -moz-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      position: absolute;
      top: 0;
      left: auto;
      right: 0;
      bottom: 0;
      z-index: 5;
      transform-origin: right;
      -webkit-transition: all .4s;
      transition: all .4s; }
      #headerContactBox p .arrow i {
        width: 9px;
        height: 12px;
        background: url("../img/common/sankaku.svg") no-repeat center center/contain;
        display: inline-block;
        filter: invert(44%) sepia(92%) saturate(607%) hue-rotate(186deg) brightness(89%) contrast(84%); }
  #headerContactBox.wh p {
    border-top: 1px solid #FFFFFF;
    border-left: 1px solid #FFFFFF;
    border-bottom: 1px solid #FFFFFF; }
    #headerContactBox.wh p .hcBtn .icon {
      filter: invert(21%) sepia(68%) saturate(1%) hue-rotate(32deg) brightness(96%) contrast(86%); }
    #headerContactBox.wh p .hcBtn .text {
      color: #000000; }
    #headerContactBox.wh p .arrow i {
      filter: invert(21%) sepia(68%) saturate(1%) hue-rotate(32deg) brightness(96%) contrast(86%); }
  #headerContactBox[data-scroll="true"].wh p {
    border-top: 1px solid #4880D3;
    border-left: 1px solid #4880D3;
    border-bottom: 1px solid #4880D3; }
    #headerContactBox[data-scroll="true"].wh p .hcBtn {
      color: #0BB3A4; }
      #headerContactBox[data-scroll="true"].wh p .hcBtn .icon {
        filter: invert(44%) sepia(92%) saturate(607%) hue-rotate(186deg) brightness(89%) contrast(84%); }
    #headerContactBox[data-scroll="true"].wh p .arrow i {
      filter: invert(44%) sepia(92%) saturate(607%) hue-rotate(186deg) brightness(89%) contrast(84%); }
    #headerContactBox[data-scroll="true"].wh p:hover .hcBtn .icon {
      filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(144deg) brightness(103%) contrast(101%); }
  #headerContactBox p:hover {
    margin-left: 0;
    width: 180px;
    border-top: 1px solid #434343;
    border-left: 1px solid #434343;
    border-bottom: 1px solid #434343; }
    #headerContactBox p:hover .hcBtn {
      background: #434343;
      cursor: pointer; }
      #headerContactBox p:hover .hcBtn .icon {
        filter: invert(100%) sepia(0%) saturate(1%) hue-rotate(144deg) brightness(103%) contrast(101%); }
      #headerContactBox p:hover .hcBtn .text {
        color: #FFFFFF;
        opacity: 1; }
    #headerContactBox p:hover .arrow {
      background: url("../img/common/border_wh.svg") repeat-y top left 2px #434343;
      right: -50px; }
  @media (max-width: 1024px) {
    #headerContactBox {
      top: 30vh; } }
  @media (max-width: 480px) {
    #headerContactBox {
      top: auto;
      bottom: 100px; } }

@keyframes headerScl {
  0% {
    transform: translateY(-100%); }
  100% {
    transform: translateY(0%); } }
@keyframes headerStop {
  0% {
    transform: translateY(0%); }
  100% {
    transform: translateY(-100%); } }
/*============================================================================
	footer
=============================================================================*/
#goTop {
  width: 50px;
  height: 50px;
  background: #4880D3;
  position: fixed;
  right: 10px;
  bottom: 20px;
  z-index: 2;
  -webkit-transition: all .4s;
  transition: all .4s;
  opacity: 0; }
  #goTop .arrow {
    width: 50px;
    height: 50px;
    position: relative; }
    #goTop .arrow::before {
      content: '';
      margin: auto;
      width: 14px;
      height: 14px;
      border-top: 2px solid #FFFFFF;
      border-right: 2px solid #FFFFFF;
      display: block;
      transform: rotate(-45deg);
      position: absolute;
      top: 23px;
      left: 0;
      right: 0;
      bottom: auto; }
  #goTop.active {
    opacity: 1; }
  #goTop.stop {
    position: absolute;
    top: -70px;
    bottom: auto; }
  #goTop:hover {
    opacity: 0.5; }

footer {
  padding: clamp(42px, 7.2915vw, 70px) 0 25px;
  color: #FFFFFF;
  background: #634621;
  position: relative;
  z-index: 5; }
  @media (min-width: 1600px) {
    footer .fl {
      justify-content: center; } }
  footer #fInnerBox {
    display: flex;
    padding-left: 60px; }
    @media (max-width: 820px) {
      footer #fInnerBox {
        display: block;
        padding-left: 5%; } }
    footer #fInnerBox #flogo {
      width: 101px; }
    footer #fInnerBox #flinkList {
      margin-left: clamp(80px, 16.6668vw, 200px);
      gap: clamp(45px, 7.812vw, 75px); }
      @media (max-width: 820px) {
        footer #fInnerBox #flinkList {
          margin-left: 0;
          margin-top: 45px; } }
      @media (max-width: 480px) {
        footer #fInnerBox #flinkList {
          row-gap: 30px; } }
      @media (max-width: 480px) {
        footer #fInnerBox #flinkList > ul {
          width: 40%; } }
      footer #fInnerBox #flinkList > ul > li a {
        color: #FFFFFF;
        font-weight: 700;
        font-size: clamp(14px, 3.4vw, 18px); }
      footer #fInnerBox #flinkList > ul > li > ul > li {
        position: relative;
        padding-left: 1.25em; }
        footer #fInnerBox #flinkList > ul > li > ul > li::before {
          content: '';
          position: absolute;
          top: .9em;
          left: 0;
          width: .8em;
          height: 1.5px;
          background: #FFFFFF; }
        footer #fInnerBox #flinkList > ul > li > ul > li a {
          font-weight: 500;
          line-height: 1.3; }
      footer #fInnerBox #flinkList > ul > li.privacy a {
        font-weight: 500;
        line-height: 1.3; }
      footer #fInnerBox #flinkList > ul > li + li {
        margin-top: 25px; }
  footer ul.fprivacyLink {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    position: relative; }
    footer ul.fprivacyLink li a {
      font-size: 1.5rem;
      letter-spacing: 0;
      font-weight: 500;
      color: #fff; }
    footer ul.fprivacyLink li + li {
      padding-left: 2em;
      position: relative; }
      footer ul.fprivacyLink li + li::before {
        content: '';
        position: absolute;
        top: 55%;
        left: 1em;
        transform: translate(-50%, -50%);
        width: 2px;
        height: .75em;
        background: #FFFFFF; }
    @media (max-width: 480px) {
      footer ul.fprivacyLink {
        display: block; }
        footer ul.fprivacyLink li a {
          font-size: 1.3rem; }
        footer ul.fprivacyLink li + li {
          padding-left: 0;
          margin-top: .25em; }
          footer ul.fprivacyLink li + li::before {
            display: none; } }
  footer .copyright {
    font-family: "Roboto", sans-serif;
    margin-top: 25px;
    text-align: center; }
  @media (max-width: 1024px) {
    footer #fleftBox {
      width: 100%; }
      footer #fleftBox #flogo {
        width: 70%;
        max-width: 350px; }
    footer #frightBox {
      margin-top: clamp(48px, 8.334vw, 80px);
      width: 100%; } }
  @media (max-width: 480px) {
    footer .inner {
      width: 94%; }
    footer #fleftBox #flinkList li {
      margin: 0 4% 20px 0;
      max-width: 250px;
      width: 48%; }
      footer #fleftBox #flinkList li:nth-of-type(3n) {
        margin-right: 4%; }
      footer #fleftBox #flinkList li:nth-of-type(2n) {
        margin-right: 0; }
    footer #frightBox .companyBox .cname {
      margin: 0 auto 5px; }
    footer .copyright {
      font-size: 1.2rem; } }

/*============================================================================
	common
=============================================================================*/
.wh {
  color: #FFFFFF; }

.bl {
  color: #4880D3; }

.gd {
  color: #E2B623; }

.gr {
  color: #a1a1a1; }

.cmnTtl01 {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }
  .cmnTtl01 .en {
    margin-right: 20px;
    font-family: "Roboto", sans-serif;
    font-size: clamp(40.8px, 6.1386vw, 68px);
    font-weight: 900;
    line-height: 1.0;
    display: inline-block; }
  .cmnTtl01 .jp {
    margin: auto 0 0 0;
    font-size: clamp(12px, 2.222vw, 16px);
    font-weight: 500;
    line-height: 1.2;
    display: inline-block; }
  @media (max-width: 480px) {
    .cmnTtl01 {
      -ms-flex-wrap: wrap;
      flex-wrap: wrap; }
      .cmnTtl01 .jp {
        line-height: 2.4; } }

.cmnTtl02 .en {
  font-family: "Roboto", sans-serif;
  font-size: clamp(32.5px, 5.9024vw, 50px);
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.05em;
  line-height: 1.0;
  display: block; }
.cmnTtl02 .jp {
  margin-top: -1px;
  font-size: clamp(16px, 2.5002vw, 20px);
  font-weight: 700;
  line-height: 1.2;
  display: block; }

.cmnTtl03 .jp {
  font-size: clamp(25.6px, 3.9996vw, 32px);
  font-weight: 900;
  line-height: 1.2;
  display: block; }
.cmnTtl03 .en {
  margin-top: 10px;
  font-family: "Roboto", sans-serif;
  font-size: clamp(12px, 2.222vw, 16px);
  font-weight: 700;
  line-height: 1.0;
  opacity: 0.5;
  display: block; }

a .arrowBtn {
  width: 45px;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  display: inline-block;
  overflow: hidden;
  position: relative;
  z-index: 5; }
  a .arrowBtn::before, a .arrowBtn::after {
    content: '';
    margin: auto;
    width: 24px;
    height: 13px;
    background: url("../img/common/arrow.svg") no-repeat center center/contain;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation-fill-mode: forwards;
    animation-duration: 0.6s; }
  a .arrowBtn::after {
    transform: translateX(-150%); }
  a .arrowBtn.bl {
    background: #4880D3; }
    a .arrowBtn.bl::before, a .arrowBtn.bl::after {
      filter: invert(100%) sepia(9%) saturate(7427%) hue-rotate(269deg) brightness(118%) contrast(94%); }
  a .arrowBtn.wh {
    background: #FFFFFF; }
    a .arrowBtn.wh::before, a .arrowBtn.wh::after {
      filter: invert(64%) sepia(79%) saturate(4357%) hue-rotate(196deg) brightness(88%) contrast(85%); }
  @media (max-width: 820px) {
    a .arrowBtn {
      width: 30px; }
      a .arrowBtn::before, a .arrowBtn::after {
        width: 20px;
        height: 10px; } }
a:hover .arrowBtn::before {
  animation-name: transformRightLeft;
  animation-delay: 0s; }
a:hover .arrowBtn::after {
  animation-name: transformLeftRight;
  animation-delay: 0.2s; }

.moreBtn {
  width: 250px;
  height: 50px; }
  .moreBtn a {
    width: 100%;
    height: 100%;
    border-radius: 30px;
    border: 2px solid #000000;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    position: relative;
    -webkit-transition: all .4s;
    transition: all .4s; }
    .moreBtn a span {
      font-weight: 500;
      letter-spacing: 0em;
      font-family: "Roboto", sans-serif;
      font-size: clamp(20px, 3.1248vw, 25px);
      line-height: 50px;
      text-align: center;
      position: relative;
      z-index: 5;
      -webkit-transition: all .4s;
      transition: all .4s; }
    .moreBtn a:hover {
      border: 2px solid #0BB3A4;
      background: #0BB3A4; }
      .moreBtn a:hover span {
        color: #FFFFFF; }
  @media (max-width: 1024px) {
    .moreBtn {
      width: 60%;
      max-width: 160px;
      height: 40px; }
      .moreBtn a span {
        font-size: 1.6rem;
        line-height: 40px; } }
  .moreBtn.long {
    max-width: 450px;
    width: 100%;
    height: auto;
    min-height: 50px; }
  .moreBtn.notCenter a {
    padding: clamp(9px, 1.563vw, 15px) clamp(30px, 5.208vw, 50px) clamp(9px, 1.563vw, 15px) clamp(12px, 2.0835vw, 20px);
    line-height: 1.2;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .moreBtn.notCenter a i {
      position: absolute;
      left: auto;
      right: clamp(12px, 2.0835vw, 20px); }
  .moreBtn.wh a {
    color: #4880D3;
    background: #FFFFFF; }
    .moreBtn.wh a i {
      background: #4880D3; }
      .moreBtn.wh a i.arrow::before, .moreBtn.wh a i.arrow::after {
        filter: invert(100%) sepia(9%) saturate(7427%) hue-rotate(269deg) brightness(118%) contrast(94%); }
      .moreBtn.wh a i.plus::before, .moreBtn.wh a i.plus::after {
        background: #FFFFFF; }
    .moreBtn.wh a::before {
      border: 1px solid #4880D3; }
    .moreBtn.wh a::after {
      background: #4880D3; }
    .moreBtn.wh a:hover {
      color: #FFFFFF; }
      .moreBtn.wh a:hover i {
        background: #FFFFFF; }
        .moreBtn.wh a:hover i.arrow::before, .moreBtn.wh a:hover i.arrow::after {
          filter: invert(47%) sepia(77%) saturate(674%) hue-rotate(185deg) brightness(87%) contrast(88%); }
        .moreBtn.wh a:hover i.plus::before, .moreBtn.wh a:hover i.plus::after {
          background: #4880D3; }
  .moreBtn.bl a {
    color: #FFFFFF;
    background: #4880D3; }
    .moreBtn.bl a i {
      background: #FFFFFF; }
      .moreBtn.bl a i.arrow::before, .moreBtn.bl a i.arrow::after {
        filter: invert(47%) sepia(77%) saturate(674%) hue-rotate(185deg) brightness(87%) contrast(88%); }
      .moreBtn.bl a i.plus::before, .moreBtn.bl a i.plus::after {
        background: #4880D3; }
    .moreBtn.bl a::before {
      border: 1px solid #4880D3; }
    .moreBtn.bl a::after {
      background: #FFFFFF; }
    .moreBtn.bl a:hover {
      color: #4880D3; }
      .moreBtn.bl a:hover i {
        background: #4880D3; }
        .moreBtn.bl a:hover i.arrow::before, .moreBtn.bl a:hover i.arrow::after {
          filter: invert(100%) sepia(9%) saturate(7427%) hue-rotate(269deg) brightness(118%) contrast(94%); }
        .moreBtn.bl a:hover i.plus::before, .moreBtn.bl a:hover i.plus::after {
          background: #FFFFFF; }
  .moreBtn.hoverBorderBL a:hover::before {
    border: 1px solid #FFFFFF; }

@keyframes transformLeftRight {
  0% {
    transform: translateX(-150%); }
  100% {
    transform: translateX(0); } }
@keyframes transformRightLeft {
  0% {
    transform: translateX(0); }
  100% {
    transform: translateX(150%); } }
/* お問い合わせボタン */
.contactBtn a {
  width: 100%;
  height: 140px;
  border-radius: 4px;
  background: #2359AA;
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  overflow: hidden;
  position: relative; }
  .contactBtn a::before, .contactBtn a::after {
    content: '';
    width: 100%;
    height: 100%;
    border-radius: 4px;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: all .4s;
    transition: all .4s; }
  .contactBtn a::before {
    border: 1px solid #2359AA;
    z-index: 2; }
  .contactBtn a::after {
    background: #FFFFFF;
    transform: scale(1, 0);
    transform-origin: center;
    z-index: 1; }
  .contactBtn a span {
    text-align: center;
    display: block;
    position: relative;
    z-index: 5; }
  .contactBtn a .icon {
    margin: 0 auto 15px;
    width: 50px; }
  .contactBtn a .text {
    color: #FFFFFF;
    font-size: clamp(22.4px, 3.4992vw, 28px);
    font-weight: 900;
    line-height: 1.2; }
  .contactBtn a:hover::before {
    border: 1px solid #E2B623; }
  .contactBtn a:hover::after {
    transform: scale(1, 1); }
  .contactBtn a:hover .text {
    color: #E2B623; }
  @media (max-width: 480px) {
    .contactBtn a {
      height: 100px; }
      .contactBtn a .icon {
        width: 30px; } }

/*============================================================================
	animation
=============================================================================*/
.maskText {
  overflow: hidden;
  position: relative; }
  .maskText::after {
    content: '';
    width: 100%;
    height: 100%;
    background: #0BB3A4;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(var(--maskText)); }

.slipin {
  overflow: hidden; }
  .slipin span {
    transform: translate(0, 100px);
    transform-origin: top;
    transition: all 0.3s ease-out; }
    .slipin span[data-status="active"] {
      transform: translate(0, 0); }

.maskDoor {
  overflow: hidden;
  position: relative; }
  .maskDoor::before, .maskDoor::after {
    content: '';
    margin: auto;
    width: 51%;
    height: 100%;
    background: #E2B623;
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    transform: scale(var(--myScale), 1);
    z-index: 10; }
  .maskDoor::before {
    left: 0;
    right: auto;
    transform-origin: left; }
  .maskDoor::after {
    left: auto;
    right: 0;
    transform-origin: right; }

.maskBlock {
  overflow: hidden;
  position: relative; }
  .maskBlock::after {
    content: '';
    margin: auto;
    width: 100%;
    height: 100%;
    background: #E2B623;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    transform: translateX(var(--blockScale));
    z-index: 10; }
  .maskBlock.fromR::after {
    transform-origin: right; }

/*============================================================================
	regulation
=============================================================================*/
/*============================================================================
	調整用
=============================================================================*/
.fl {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }

.fl-tab {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }
  @media (max-width: 1024px) {
    .fl-tab {
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column; } }

.fl-sp {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex; }
  @media (max-width: 480px) {
    .fl-sp {
      -webkit-flex-direction: column;
      -moz-flex-direction: column;
      flex-direction: column; } }

.fl-jst {
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }

.fl-cen {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center; }

.fl-end {
  -webkit-box-pack: end;
  -ms-flex-pack: end;
  justify-content: flex-end; }

.fl-wrap {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }

.fl-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column; }

.fl-reverse {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse; }

.mt0 {
  margin-top: min(0vw,0px); }

.mb0 {
  margin-bottom: min(0vw,0px); }

.pt0 {
  padding-top: min(0vw,0px); }

.pb0 {
  padding-bottom: min(0vw,0px); }

.mt10 {
  margin-top: min(3vw,10px); }

.mb10 {
  margin-bottom: min(3vw,10px); }

.pt10 {
  padding-top: min(3vw,10px); }

.pb10 {
  padding-bottom: min(3vw,10px); }

.mt20 {
  margin-top: min(6vw,20px); }

.mb20 {
  margin-bottom: min(6vw,20px); }

.pt20 {
  padding-top: min(6vw,20px); }

.pb20 {
  padding-bottom: min(6vw,20px); }

.mt30 {
  margin-top: min(9vw,30px); }

.mb30 {
  margin-bottom: min(9vw,30px); }

.pt30 {
  padding-top: min(9vw,30px); }

.pb30 {
  padding-bottom: min(9vw,30px); }

.mt40 {
  margin-top: min(12vw,40px); }

.mb40 {
  margin-bottom: min(12vw,40px); }

.pt40 {
  padding-top: min(12vw,40px); }

.pb40 {
  padding-bottom: min(12vw,40px); }

.mt50 {
  margin-top: min(15vw,50px); }

.mb50 {
  margin-bottom: min(15vw,50px); }

.pt50 {
  padding-top: min(15vw,50px); }

.pb50 {
  padding-bottom: min(15vw,50px); }

.mt60 {
  margin-top: min(18vw,60px); }

.mb60 {
  margin-bottom: min(18vw,60px); }

.pt60 {
  padding-top: min(18vw,60px); }

.pb60 {
  padding-bottom: min(18vw,60px); }

.mt70 {
  margin-top: min(21vw,70px); }

.mb70 {
  margin-bottom: min(21vw,70px); }

.pt70 {
  padding-top: min(21vw,70px); }

.pb70 {
  padding-bottom: min(21vw,70px); }

.mt80 {
  margin-top: min(24vw,80px); }

.mb80 {
  margin-bottom: min(24vw,80px); }

.pt80 {
  padding-top: min(24vw,80px); }

.pb80 {
  padding-bottom: min(24vw,80px); }

.mt90 {
  margin-top: min(27vw,90px); }

.mb90 {
  margin-bottom: min(27vw,90px); }

.pt90 {
  padding-top: min(27vw,90px); }

.pb90 {
  padding-bottom: min(27vw,90px); }

.mt100 {
  margin-top: min(30vw,100px); }

.mb100 {
  margin-bottom: min(30vw,100px); }

.pt100 {
  padding-top: min(30vw,100px); }

.pb100 {
  padding-bottom: min(30vw,100px); }

.mt110 {
  margin-top: min(33vw,110px); }

.mb110 {
  margin-bottom: min(33vw,110px); }

.pt110 {
  padding-top: min(33vw,110px); }

.pb110 {
  padding-bottom: min(33vw,110px); }

.mt120 {
  margin-top: min(36vw,120px); }

.mb120 {
  margin-bottom: min(36vw,120px); }

.pt120 {
  padding-top: min(36vw,120px); }

.pb120 {
  padding-bottom: min(36vw,120px); }

.mt130 {
  margin-top: min(39vw,130px); }

.mb130 {
  margin-bottom: min(39vw,130px); }

.pt130 {
  padding-top: min(39vw,130px); }

.pb130 {
  padding-bottom: min(39vw,130px); }

.mt140 {
  margin-top: min(42vw,140px); }

.mb140 {
  margin-bottom: min(42vw,140px); }

.pt140 {
  padding-top: min(42vw,140px); }

.pb140 {
  padding-bottom: min(42vw,140px); }

br {
  display: inline; }
  @media (min-width: 1301px) {
    br.showPC {
      display: none !important; } }
  @media (min-width: 1025px) {
    br.showTab {
      display: none !important; } }
  @media (min-width: 821px) {
    br.showStab {
      display: none !important; } }
  @media (min-width: 481px) {
    br.showSP {
      display: none !important; } }
  @media (max-width: 1100px) {
    br.hdn1100 {
      display: none; }
    br.show1100 {
      display: inherit; } }
  @media (max-width: 1300px) {
    br.hdnPC {
      display: none; }
    br.showPC {
      display: inherit; } }
  @media (max-width: 1024px) {
    br.hdnTab {
      display: none; }
    br.showTab {
      display: inherit; } }
  @media (max-width: 820px) {
    br.hdnStab {
      display: none; }
    br.showStab {
      display: inherit; } }
  @media (max-width: 480px) {
    br.hdnSP {
      display: none; }
    br.showSP {
      display: inherit; } }

span {
  display: inline-block; }
  @media (min-width: 1301px) {
    span.showPC {
      display: none !important; } }
  @media (min-width: 1025px) {
    span.showTab {
      display: none !important; } }
  @media (min-width: 821px) {
    span.showStab {
      display: none !important; } }
  @media (min-width: 481px) {
    span.showSP {
      display: none !important; } }
  @media (max-width: 1300px) {
    span.hdnPC {
      display: none !important; }
    span.showPC {
      display: inherit; } }
  @media (max-width: 1024px) {
    span.hdnTab {
      display: none !important; }
    span.showTab {
      display: inherit; } }
  @media (max-width: 820px) {
    span.hdnStab {
      display: none !important; }
    span.showStab {
      display: inherit; } }
  @media (max-width: 480px) {
    span.hdnSP {
      display: none !important; }
    span.showSP {
      display: inherit; } }

p, div, figure, ul {
  display: block; }
  @media (min-width: 1301px) {
    p.showPC, div.showPC, figure.showPC, ul.showPC {
      display: none !important; } }
  @media (min-width: 1025px) {
    p.showTab, div.showTab, figure.showTab, ul.showTab {
      display: none !important; } }
  @media (min-width: 821px) {
    p.showStab, div.showStab, figure.showStab, ul.showStab {
      display: none !important; } }
  @media (min-width: 481px) {
    p.showSP, div.showSP, figure.showSP, ul.showSP {
      display: none !important; } }
  @media (max-width: 1300px) {
    p.hdnPC, div.hdnPC, figure.hdnPC, ul.hdnPC {
      display: none !important; }
    p.showPC, div.showPC, figure.showPC, ul.showPC {
      display: inherit; } }
  @media (max-width: 1024px) {
    p.hdnTab, div.hdnTab, figure.hdnTab, ul.hdnTab {
      display: none !important; }
    p.showTab, div.showTab, figure.showTab, ul.showTab {
      display: inherit; } }
  @media (max-width: 820px) {
    p.hdnStab, div.hdnStab, figure.hdnStab, ul.hdnStab {
      display: none !important; }
    p.showStab, div.showStab, figure.showStab, ul.showStab {
      display: inherit; } }
  @media (max-width: 480px) {
    p.hdnSP, div.hdnSP, figure.hdnSP, ul.hdnSP {
      display: none !important; }
    p.showSP, div.showSP, figure.showSP, ul.showSP {
      display: inherit; } }

li {
  display: list-item; }
  @media (min-width: 1301px) {
    li.showPC {
      display: none !important; } }
  @media (min-width: 1025px) {
    li.showTab {
      display: none !important; } }
  @media (min-width: 821px) {
    li.showStab {
      display: none !important; } }
  @media (min-width: 481px) {
    li.showSP {
      display: none !important; } }
  @media (max-width: 1300px) {
    li.hdnPC {
      display: none !important; }
    li.showPC {
      display: inherit; } }
  @media (max-width: 1024px) {
    li.hdnTab {
      display: none !important; }
    li.showTab {
      display: inherit; } }
  @media (max-width: 820px) {
    li.hdnStab {
      display: none !important; }
    li.showStab {
      display: inherit; } }
  @media (max-width: 480px) {
    li.hdnSP {
      display: none !important; }
    li.showSP {
      display: inherit; } }

.ta_cnt {
  text-align: center; }

.ta_right {
  text-align: right; }

.clearfix:after {
  content: "";
  display: block;
  clear: both; }