@charset "UTF-8";
/*
カラー・フォント定義
*/
/* =========================== 共通 =========================== */
* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

select::-ms-expand {
  display: none; }

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

ul {
  list-style-type: none; }

figure {
  margin: 0px 0px 0px 0px; }

body {
  font-family: "Philosopher", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-weight: 400;
  color: #fff;
  background-color: #000;
  position: relative;
  font-size: 16px;
  line-height: 1;
  padding: 0px;
  overflow: hidden;
  padding: 70px 0px 0px 0px; }
  body.no_scroll {
    overflow: hidden !important; }
  @media only screen and (max-width: 959px) {
    body {
      font-size: 14px;
      padding: 42px 0px 0px 0px; } }

/* =========================== 汎用スタイル =========================== */
@media only screen and (min-width: 960px) {
  .pc {
    display: block; } }
@media only screen and (max-width: 959px) {
  .pc {
    display: none; } }

@media only screen and (min-width: 960px) {
  .sp {
    display: none; } }
@media only screen and (max-width: 959px) {
  .sp {
    display: block; } }

@media only screen and (min-width: 960px) {
  .pcTb {
    display: block; } }
@media only screen and (max-width: 959px) {
  .pcTb {
    display: block; } }
@media only screen and (max-width: 500px) {
  .pcTb {
    display: none; } }

.anchorlink {
  position: relative;
  top: -128px;
  display: block; }

.mb8 {
  margin-bottom: 8px !important; }

.mb12 {
  margin-bottom: 12px !important; }

.mb16 {
  margin-bottom: 16px !important; }

.mb24 {
  margin-bottom: 24px !important; }

.mb32 {
  margin-bottom: 32px !important; }

.mb48 {
  margin-bottom: 48px !important; }

.mb64 {
  margin-bottom: 64px !important; }

.mb96 {
  margin-bottom: 96px !important; }

.mb128 {
  margin-bottom: 128px !important; }

.fadein {
  opacity: 0;
  transform: translate(0, 40px);
  transition: all 1000ms; }

.fadein.scrollin {
  opacity: 1;
  transform: translate(0, 0);
  transition-timing-function: ease-in-out; }
  .fadein.scrollin.del01 {
    transition-delay: 0.1s; }
  .fadein.scrollin.del02 {
    transition-delay: 0.2s; }
  .fadein.scrollin.del03 {
    transition-delay: 0.3s; }
  .fadein.scrollin.del04 {
    transition-delay: 0.4s; }
  .fadein.scrollin.del05 {
    transition-delay: 0.5s; }
  .fadein.scrollin.del06 {
    transition-delay: 0.6s; }
  .fadein.scrollin.del07 {
    transition-delay: 0.7s; }
  .fadein.scrollin.del08 {
    transition-delay: 0.8s; }
  .fadein.scrollin.del09 {
    transition-delay: 0.9s; }
  .fadein.scrollin.del1 {
    transition-delay: 1s; }

.fadeinX {
  opacity: 0;
  transform: translate(40px, 0);
  transition: all 1000ms; }

.fadeinX.scrollin {
  opacity: 1;
  transform: translate(0, 0);
  transition-timing-function: ease-in-out; }
  .fadeinX.scrollin.del01 {
    transition-delay: 0.1s; }
  .fadeinX.scrollin.del02 {
    transition-delay: 0.2s; }
  .fadeinX.scrollin.del03 {
    transition-delay: 0.3s; }
  .fadeinX.scrollin.del04 {
    transition-delay: 0.4s; }
  .fadeinX.scrollin.del05 {
    transition-delay: 0.5s; }
  .fadeinX.scrollin.del06 {
    transition-delay: 0.6s; }
  .fadeinX.scrollin.del07 {
    transition-delay: 0.7s; }
  .fadeinX.scrollin.del08 {
    transition-delay: 0.8s; }
  .fadeinX.scrollin.del09 {
    transition-delay: 0.9s; }
  .fadeinX.scrollin.del1 {
    transition-delay: 1s; }

header {
  height: 70px;
  width: 100%;
  display: -webkit-flex;
  /* Safari */
  display: flex;
  -webkit-flex-direction: row;
  /* Safari */
  flex-direction: row;
  -webkit-flex-wrap: wrap;
  /* Safari */
  flex-wrap: wrap;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  padding: 0px 32px 0px 32px;
  background-color: black; }
  @media only screen and (max-width: 1280px) {
    header {
      padding: 0px 10px 0px 10px; } }
  @media only screen and (max-width: 959px) {
    header {
      height: 42px;
      padding: 0px 10px 0px 10px; } }
  header nav {
    width: 100%;
    max-width: 1080px;
    height: 70px;
    z-index: 1000;
    margin: 0px auto 0px auto; }
    @media only screen and (max-width: 959px) {
      header nav {
        display: block;
        position: fixed;
        top: 0px;
        left: 0;
        width: 100%;
        height: 100%;
        visibility: hidden;
        transition: 0.4s;
        opacity: 0;
        background-color: rgba(0, 0, 0, 0.7); } }
    header nav.on {
      transition: 0.4s;
      opacity: 1;
      visibility: visible;
      transform: translateY(0px);
      -webkit-transform: translateY(0px); }
    header nav .main-nav {
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-direction: row;
      /* Safari */
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap;
      justify-content: flex-end;
      height: 100%; }
      @media only screen and (max-width: 959px) {
        header nav .main-nav {
          display: block;
          height: auto;
          padding: 64px 0px 16px 0px;
          box-sizing: border-box;
          margin: 0px 0px 0px 0px;
          z-index: 1001; } }
      header nav .main-nav li {
        display: inline-block;
        height: 100%;
        line-height: 90px;
        margin: 0px 40px 0px 0px; }
        header nav .main-nav li:last-child {
          margin: 0px 0px 0px 0px; }
        @media only screen and (max-width: 959px) {
          header nav .main-nav li {
            display: block;
            width: 100%;
            text-align: center;
            margin: 0px 0px 6px 0px;
            padding: 0px 0px 0px 0px;
            height: auto;
            line-height: 1; }
            header nav .main-nav li:last-child {
              margin: 0px 0px 0px 0px; } }
        header nav .main-nav li > a {
          display: block;
          width: 100%;
          height: 100%;
          font-size: 20px;
          position: relative;
          overflow: hidden;
          color: #fff; }
          @media only screen and (max-width: 959px) {
            header nav .main-nav li > a {
              height: auto;
              font-size: 18px;
              font-weight: 400;
              padding: 10px 20px 10px 46px;
              background-image: url("../img/base/arrow-333.svg");
              background-position: left 24px center;
              background-size: 10px auto;
              line-height: 1; } }
          header nav .main-nav li > a::after {
            content: "";
            position: absolute;
            width: 100%;
            height: 1px;
            bottom: 8px;
            left: -100%;
            background-color: #333333;
            transition: 0.2s; }
            @media only screen and (max-width: 959px) {
              header nav .main-nav li > a::after {
                display: none; } }
          header nav .main-nav li > a:hover {
            text-decoration: none; }
            header nav .main-nav li > a:hover::after {
              left: 0%; }
  header .menu-btn {
    display: none;
    position: absolute;
    cursor: pointer;
    right: 32px;
    top: 16px;
    width: 32px;
    height: 23px; }
    @media only screen and (max-width: 959px) {
      header .menu-btn {
        display: block;
        z-index: 1002; } }
    header .menu-btn span {
      position: absolute;
      width: 32px;
      height: 1px;
      display: block;
      background-color: #fff;
      left: 0px;
      transition: 0.3s; }
      header .menu-btn span:nth-child(1) {
        top: 0px;
        animation: type7-top .5s;
        animation-fill-mode: forwards; }
      header .menu-btn span:nth-child(2) {
        top: 4px;
        animation-fill-mode: forwards; }
      header .menu-btn span:nth-child(3) {
        animation: type7-bottom .5s;
        animation-fill-mode: forwards;
        top: 8px;
        animation: type7-bottom .5s; }
    header .menu-btn.on span:nth-child(1) {
      animation: type7-top-close .5s;
      animation-fill-mode: forwards !important; }
    header .menu-btn.on span:nth-child(2) {
      opacity: 0; }
    header .menu-btn.on span:nth-child(3) {
      animation: type7-bottom-close .5s;
      animation-fill-mode: forwards !important; }

body.hina {
  background-color: #fff;
  padding: 70px 0px 0px 0px; }
  @media only screen and (max-width: 959px) {
    body.hina {
      padding: 42px 0px 0px 0px; } }
  body.hina header {
    background-color: #fff; }
    @media only screen and (max-width: 959px) {
      body.hina header {
        background-color: #000; } }
    body.hina header a {
      color: #000 !important; }
      @media only screen and (max-width: 959px) {
        body.hina header a {
          color: #fff !important; } }

footer {
  padding: 0px 0px 150px 0px; }
  footer .inner-bnr {
    width: 100%;
    max-width: 520px;
    margin: 0px auto 0px auto; }
    @media only screen and (max-width: 959px) {
      footer .inner-bnr {
        max-width: 260px; } }
    footer .inner-bnr li {
      margin: 0px 0px 50px 0px; }
      @media only screen and (max-width: 959px) {
        footer .inner-bnr li {
          margin: 0px 0px 32px 0px; } }
      footer .inner-bnr li:last-child {
        margin: 0px 0px 0px 0px; }
      footer .inner-bnr li a {
        display: block; }
        footer .inner-bnr li a:hover {
          opacity: 0.7; }
        footer .inner-bnr li a img {
          width: 100%;
          height: auto;
          vertical-align: bottom; }

@keyframes type7-top {
  0% {
    transform: translateX(0px) rotate(0deg); }
  50% {
    transform: translateY(0px) rotate(0deg); }
  100% {
    transform: translateY(0px) rotate(0deg); } }
@keyframes type7-bottom {
  0% {
    transform: translateY(0px) rotate(0deg); }
  50% {
    transform: translateY(0px) rotate(0deg); }
  100% {
    transform: translateY(0px) rotate(0deg); } }
@keyframes type7-top-close {
  0% {
    transform: translateY(0px) rotate(0deg); }
  50% {
    transform: translateY(0px) rotate(0deg); }
  100% {
    transform: translateY(4px) rotate(-20deg); } }
@keyframes type7-bottom-close {
  0% {
    transform: translateY(0px) rotate(0deg); }
  50% {
    transform: translateY(0px) rotate(0deg); }
  100% {
    transform: translateY(-4px) rotate(20deg); } }
h2.base-ttl {
  font-size: 40px;
  font-weight: 400;
  text-align: center;
  margin: 0px 0px 40px 0px; }
  @media only screen and (max-width: 959px) {
    h2.base-ttl {
      font-size: 28px;
      line-height: 1.2; } }

.base-container {
  margin: 0px 0px 64px 0px; }
  @media only screen and (max-width: 959px) {
    .base-container {
      margin: 0px 0px 32px 0px;
      padding: 0px 0px 0px 0px; } }

main {
  max-width: 1080px;
  width: 100%;
  margin: 0px auto 0px auto;
  background-color: #000; }
  @media only screen and (max-width: 959px) {
    main {
      padding: 0px 0px 0px 0px; } }

body.index {
  /* ベース：重ねて表示 */
  /* 初期チラつき防止（JSで is-ready を付与） */
  /* モーション軽減ユーザー配慮（任意） */ }
  body.index .mv .slide-inner ul li img {
    width: 100%;
    height: auto; }
  body.index .box01 {
    padding: 30px 0px 130px 0px;
    text-align: center; }
    @media only screen and (max-width: 959px) {
      body.index .box01 {
        padding: 48px 32px 48px 32px; } }
    body.index .box01 .inner {
      display: block;
      margin: 0px auto 0px auto;
      text-align: right;
      padding: 0px 16px 0px 16px; }
      @media only screen and (max-width: 959px) {
        body.index .box01 .inner {
          padding: 0px 0px 0px 0px; } }
      body.index .box01 .inner h1 {
        text-align: left;
        font-size: 42px;
        font-weight: 400;
        margin: 0px 0px 48px 0px;
        text-align: center; }
        @media only screen and (max-width: 959px) {
          body.index .box01 .inner h1 {
            font-size: 30px;
            text-align: left;
            line-height: 1.6;
            margin: 0px 0px 24px 0px; } }
      body.index .box01 .inner h2 {
        display: inline-block;
        text-align: left;
        font-size: 24px;
        line-height: 1.4;
        font-weight: 300; }
        @media only screen and (max-width: 959px) {
          body.index .box01 .inner h2 {
            font-size: 18px;
            line-height: 1.6; } }
  body.index .box02 {
    padding: 300px 0px 340px 0px;
    background-image: url("../img/index/box02/bg.webp");
    background-position: center center;
    background-size: cover; }
    @media only screen and (max-width: 959px) {
      body.index .box02 {
        padding: 0px 0px 0px 0px; } }
    body.index .box02 .inner {
      width: 100%;
      max-width: 1080px;
      margin: 0px auto 0px auto;
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-direction: row;
      /* Safari */
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap; }
      body.index .box02 .inner .left {
        width: 60%;
        font-size: 19px;
        line-height: 1.3;
        font-weight: 400;
        color: #fff;
        text-shadow: 0px 0px 3px black, 0px 0px 6px black, 0px 0px 9px rgba(0, 0, 0, 0.9);
        letter-spacing: 2px;
        padding: 0px 0px 0px 120px; }
        @media only screen and (max-width: 959px) {
          body.index .box02 .inner .left {
            font-size: 15px;
            width: 100%;
            padding: 0px 0px 0px 0px;
            letter-spacing: 1px;
            					/*text-shadow:
              0px 0px 1px rgba(0,0,0,1),
              0px 0px 2px rgba(0,0,0,1),
              0px 0px 3px rgba(0,0,0,1),
              0px 0px 4px rgba(0,0,0,1),
              0px 0px 6px rgba(0,0,0,1);*/ } }
        @media only screen and (max-width: 959px) {
          body.index .box02 .inner .left span {
            display: block;
            background-color: rgba(0, 0, 0, 0.3);
            padding: 64px 32px 64px 32px; } }
        body.index .box02 .inner .left .w500Br {
          display: block; }
          @media only screen and (max-width: 959px) {
            body.index .box02 .inner .left .w500Br {
              display: block; } }
          @media only screen and (max-width: 500px) {
            body.index .box02 .inner .left .w500Br {
              display: none; } }
      body.index .box02 .inner .right {
        width: 40%;
        padding: 0px 0px 0px 0px;
        position: relative; }
        @media only screen and (max-width: 959px) {
          body.index .box02 .inner .right {
            display: none; } }
        body.index .box02 .inner .right .slide01-container {
          text-align: center;
          width: 100%;
          max-width: 292px;
          margin: 0px auto 0px auto;
          padding: 0px 60px 0px 0px; }
        body.index .box02 .inner .right .slide01 {
          width: 100%;
          max-width: 232px;
          margin: 120px 0px 110px 0px; }
          body.index .box02 .inner .right .slide01 ul li img {
            width: 100%;
            height: auto; }
        body.index .box02 .inner .right .slide02-container {
          text-align: center;
          width: 100%;
          max-width: 292px;
          margin: 0px auto 0px auto;
          padding: 0px 0px 0px 60px; }
        body.index .box02 .inner .right .slide02 {
          width: 100%;
          max-width: 232px; }
          body.index .box02 .inner .right .slide02 ul li img {
            width: 100%;
            height: auto; }
  body.index .box02 .inner .right .slide01,
  body.index .box02 .inner .right .slide02 {
    position: relative;
    aspect-ratio: 16/24; }
  body.index .box02 .inner .right .slide01 ul,
  body.index .box02 .inner .right .slide02 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative; }
  body.index .box02 .inner .right .slide01 li,
  body.index .box02 .inner .right .slide02 li {
    position: absolute;
    inset: 0; }
  body.index .box02 .inner .right .slide01 img,
  body.index .box02 .inner .right .slide02 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block; }
  body.index .box02 .inner .right .slide01 ul,
  body.index .box02 .inner .right .slide02 ul {
    opacity: 0;
    transition: opacity .3s ease; }
  body.index .box02 .inner .right .slide01 ul.is-ready,
  body.index .box02 .inner .right .slide02 ul.is-ready {
    opacity: 1; }
  @media (prefers-reduced-motion: reduce) {
    body.index :root {
      --slide-dur: .25s; } }
  body.index .box03 {
    padding: 235px 0px 0px 0px;
    margin: 0px 0px 188px 0px; }
    @media only screen and (max-width: 959px) {
      body.index .box03 {
        padding: 64px 0px 64px 0px;
        margin: 0px 0px 0px 0px; } }
    body.index .box03 .base-box3-container {
      width: 100%;
      max-width: 1000px;
      margin: 0px auto 60px auto; }
      @media only screen and (max-width: 959px) {
        body.index .box03 .base-box3-container {
          margin: 0px 32px 48px 32px;
          width: calc(100% - 64px); } }
      body.index .box03 .base-box3-container:last-child {
        margin-bottom: 0px; }
      body.index .box03 .base-box3-container figure {
        position: relative; }
        body.index .box03 .base-box3-container figure h3 {
          position: absolute;
          left: 24px;
          top: 24px;
          z-index: 6;
          font-size: 32px;
          margin: 0px 0px 40px 0px;
          font-weight: 400;
          padding: 0px; }
          @media only screen and (max-width: 959px) {
            body.index .box03 .base-box3-container figure h3 {
              font-size: 24px;
              left: 16px;
              top: 16px;
              text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7); } }
        body.index .box03 .base-box3-container figure img {
          position: relative;
          z-index: 5;
          width: 100%;
          height: auto;
          vertical-align: bottom; }
      body.index .box03 .base-box3-container .text-inner {
        background-color: #fff;
        padding: 40px 50px;
        color: #000;
        position: relative;
        display: block;
        text-decoration: none;
        				/*.more {
        					position: absolute;
        					right: 0px;
        					bottom: 0px;
        
        					font-weight: 400;
        					
        					font-size: 20px;
        					
        					width: 184px;
        					text-decoration: none;
        					padding: 0px 0px 8px 0px;
        
        					color: #000;
        					background-image: url("../img/index/box03/arrow.svg");
        					background-size: 184px auto;
        					background-position: right bottom;
        				}*/ }
        @media only screen and (max-width: 959px) {
          body.index .box03 .base-box3-container .text-inner {
            padding: 20px 32px; } }
        body.index .box03 .base-box3-container .text-inner h4 {
          margin: 0px 0px 30px 0px;
          font-size: 32px;
          font-weight: 400;
          position: relative;
          padding: 0px 200px 0px 0px; }
          @media only screen and (max-width: 959px) {
            body.index .box03 .base-box3-container .text-inner h4 {
              padding: 0px 0px 0px 0px;
              margin: 0px 0px 16px 0px;
              font-size: 16px;
              line-height: 1.4; } }
        body.index .box03 .base-box3-container .text-inner p {
          position: relative;
          font-size: 18px;
          line-height: 1.2;
          padding: 0px 300px 0px 0px;
          font-weight: 400; }
          @media only screen and (max-width: 959px) {
            body.index .box03 .base-box3-container .text-inner p {
              font-size: 14px;
              line-height: 1.4;
              padding: 0px 0px 48px 0px; } }
          body.index .box03 .base-box3-container .text-inner p span.pc {
            display: inline; }
            @media only screen and (max-width: 959px) {
              body.index .box03 .base-box3-container .text-inner p span.pc {
                display: none; } }
          body.index .box03 .base-box3-container .text-inner p .more {
            position: absolute;
            right: 0px;
            bottom: 0px;
            font-style: normal;
            width: 164px;
            text-decoration: none;
            padding: 0px 0px 8px 0px;
            color: #000;
            background-image: url("../img/index/box03/arrow.svg");
            background-size: 164px auto;
            background-position: right bottom; }
            @media only screen and (max-width: 959px) {
              body.index .box03 .base-box3-container .text-inner p .more {
                width: 120px;
                background-size: 120px; } }
  body.index .box05 {
    margin: 0px 0px 150px 0px; }
    @media only screen and (max-width: 959px) {
      body.index .box05 {
        margin: 0px 0px 96px 0px;
        padding: 0px 32px 0px 32px; } }
    body.index .box05 .inner {
      width: 100%;
      max-width: 960px;
      margin: 0px auto 0px auto; }
      body.index .box05 .inner ul {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        -webkit-flex-direction: row;
        /* Safari */
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        /* Safari */
        flex-wrap: wrap;
        margin: 0px 0px 0px -40px; }
        @media only screen and (max-width: 959px) {
          body.index .box05 .inner ul {
            margin: 0px 0px 0px 0px; } }
        body.index .box05 .inner ul li {
          width: calc(50% - 40px);
          margin: 0px 0px 40px 40px; }
          @media only screen and (max-width: 959px) {
            body.index .box05 .inner ul li {
              width: 100%;
              margin: 0px 0px 32px 0px; } }
          body.index .box05 .inner ul li figure {
            margin: 0px 0px 16px 0px; }
            body.index .box05 .inner ul li figure img {
              vertical-align: bottom;
              width: 100%;
              height: auto; }
          body.index .box05 .inner ul li p {
            text-align: right; }
            body.index .box05 .inner ul li p strong {
              font-size: 22px;
              font-weight: 400;
              background-image: url("../img/index/box05/arrow.svg");
              background-position: right bottom 6px;
              background-size: 47px auto;
              padding: 0px 60px 0px 0px; }
              @media only screen and (max-width: 959px) {
                body.index .box05 .inner ul li p strong {
                  font-size: 16px;
                  background-size: 40px auto;
                  background-position: right bottom 4px;
                  padding: 0px 48px 0px 0px; } }

body.hina .mv {
  position: relative;
  margin: 0px 0px 120px 0px; }
  @media only screen and (max-width: 959px) {
    body.hina .mv {
      margin: 0px 0px 32px 0px; } }
  body.hina .mv figure {
    position: relative;
    z-index: 5; }
    body.hina .mv figure img {
      width: 100%;
      height: auto;
      vertical-align: bottom; }
  body.hina .mv h1 {
    position: absolute;
    z-index: 6;
    left: 32px;
    top: 32px;
    font-size: 48px;
    font-weight: 400;
    color: #fff; }
    @media only screen and (max-width: 959px) {
      body.hina .mv h1 {
        font-size: 32px;
        left: 24px;
        top: 24px; } }
body.hina main {
  background-color: #fff !important;
  color: #000; }
  body.hina main .inner {
    margin: 0px 0px 40px 0px; }
    @media only screen and (max-width: 959px) {
      body.hina main .inner {
        padding: 0px 32px 0px 32px; } }
    body.hina main .inner a {
      color: #005F7C;
      text-decoration: underline; }
    body.hina main .inner h1 {
      font-size: 40px;
      margin: 0px 0px 40px 0px;
      font-weight: 400; }
      @media only screen and (max-width: 959px) {
        body.hina main .inner h1 {
          font-size: 28px;
          line-height: 1.4;
          margin: 0px 0px 32px 0px; } }
    body.hina main .inner figcaption {
      display: block;
      font-size: 16px;
      text-align: right;
      margin: 10px 0px 0px 0px; }
    body.hina main .inner figure.single {
      margin: 0px 0px 40px 0px; }
      @media only screen and (max-width: 959px) {
        body.hina main .inner figure.single {
          margin: 0px 0px 24px -32px; } }
      body.hina main .inner figure.single img {
        width: 100%;
        height: auto;
        vertical-align: bottom; }
        @media only screen and (max-width: 959px) {
          body.hina main .inner figure.single img {
            width: calc(100% + 32px); } }
    body.hina main .inner ul.multiple {
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-direction: row;
      /* Safari */
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap;
      margin: 0px 0px 40px -52px; }
      @media only screen and (max-width: 959px) {
        body.hina main .inner ul.multiple {
          display: block;
          margin: 0px 0px 24px -32px;
          width: calc(100% + 32px); } }
      body.hina main .inner ul.multiple li {
        width: calc(50% - 52px);
        margin: 0px 0px 0px 52px; }
        @media only screen and (max-width: 959px) {
          body.hina main .inner ul.multiple li {
            width: calc(100% + 32px);
            margin: 0px 0px 12px -32px; }
            body.hina main .inner ul.multiple li:last-child {
              margin: 0px 0px 0px -32px; } }
        body.hina main .inner ul.multiple li.retreat2-1 {
          width: calc(65.5% - 52px); }
        body.hina main .inner ul.multiple li.retreat2-2 {
          width: calc(34.5% - 52px); }
        body.hina main .inner ul.multiple li figure img {
          width: 100%;
          height: auto;
          vertical-align: bottom; }
          @media only screen and (max-width: 959px) {
            body.hina main .inner ul.multiple li figure img {
              width: calc(100% + 32px); } }
    @media only screen and (max-width: 959px) {
      body.hina main .inner ul.multiple-sp {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        -webkit-flex-direction: row;
        /* Safari */
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        /* Safari */
        flex-wrap: wrap;
        background-color: #ff0000;
        width: calc(100% + 64px) !important;
        margin: 0px 0px 32px -32px !important; }
        body.hina main .inner ul.multiple-sp li {
          width: calc(50%) !important;
          margin: 0px 0px 0px 0px !important; }
          body.hina main .inner ul.multiple-sp li figure img {
            width: 100%;
            height: auto;
            vertical-align: bottom; } }
    body.hina main .inner p {
      font-size: 19px;
      line-height: 1.3; }
      @media only screen and (max-width: 959px) {
        body.hina main .inner p {
          font-size: 18px;
          line-height: 1.5; } }
body.hina footer {
  background-color: #000;
  padding: 128px 0px 128px 0px; }
  body.hina footer .inner {
    max-width: 1000px;
    width: 100%;
    margin: 0px auto 0px auto; }
  body.hina footer .back-top {
    text-align: center; }
    body.hina footer .back-top a {
      font-size: 40px;
      color: #fff;
      text-decoration: underline;
      font-weight: 400; }
      @media only screen and (max-width: 959px) {
        body.hina footer .back-top a {
          font-size: 20px; } }
  body.hina footer .other-articles {
    margin: 0px auto 96px auto;
    width: 100%;
    max-width: 960px; }
    @media only screen and (max-width: 959px) {
      body.hina footer .other-articles {
        margin: 0px auto 48px auto; } }
    body.hina footer .other-articles ul {
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-direction: row;
      /* Safari */
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap;
      margin: 0px 0px 0px -40px;
      color: #000; }
      @media only screen and (max-width: 959px) {
        body.hina footer .other-articles ul {
          display: block;
          margin: 0px 0px 0px 0px;
          padding: 0px 32px 0px 32px; } }
      body.hina footer .other-articles ul li {
        width: calc(50% - 40px);
        margin: 0px 0px 0px 40px; }
        @media only screen and (max-width: 959px) {
          body.hina footer .other-articles ul li {
            width: 100%;
            margin: 0px 0px 32px 0px; } }
        body.hina footer .other-articles ul li figure {
          margin: 0px 0px 0px 0px; }
          body.hina footer .other-articles ul li figure img {
            vertical-align: bottom;
            width: 100%;
            height: auto; }
        body.hina footer .other-articles ul li .text {
          background-color: #fff;
          padding: 30px 30px; }
          @media only screen and (max-width: 959px) {
            body.hina footer .other-articles ul li .text {
              padding: 32px; } }
          body.hina footer .other-articles ul li .text h3 {
            font-size: 28px;
            font-weight: 400;
            line-height: 1.2;
            margin: 0px 0px 40px 0px; }
            @media only screen and (max-width: 959px) {
              body.hina footer .other-articles ul li .text h3 {
                font-size: 20px;
                line-height: 1.4;
                margin: 0px 0px 24px 0px; } }
          body.hina footer .other-articles ul li .text .read {
            font-size: 20px;
            min-width: 90px;
            display: inline-block;
            padding: 0px 0px 10px 0px;
            background-image: url("../img/footer/read-arrow.svg");
            background-position: left bottom;
            background-size: 90px auto;
            color: #000; }
            @media only screen and (max-width: 959px) {
              body.hina footer .other-articles ul li .text .read {
                font-size: 16px;
                min-width: 70px;
                background-size: 70px auto;
                padding: 0px 0px 6px 0px; } }
            body.hina footer .other-articles ul li .text .read:hover {
              text-decoration: none; }

.box04 {
  margin: 0px 0px 140px 0px; }
  @media only screen and (max-width: 959px) {
    .box04 {
      padding: 24px 32px 0px 32px;
      margin: 0px 0px 96px 0px; } }
  .box04 .infow {
    display: flex;
    gap: 8px;
    max-width: 280px;
    color: #000; }
    .box04 .infow a {
      color: #000; }
  .box04 .infow-img img {
    max-width: 96px;
    height: auto;
    display: block;
    border-radius: 6px;
    display: none; }
  .box04 .infow-title {
    font-weight: 700;
    margin: 2px 0 4px;
    font-size: 24px; }
    @media only screen and (max-width: 959px) {
      .box04 .infow-title {
        font-size: 16px; } }
  .box04 .infow-address, .box04 .infow-desc {
    font-size: 12px;
    line-height: 1.5; }
  .box04 .infow-link {
    margin-top: 6px; }
  .box04 .gm-style-iw {
    padding-top: 10px !important;
    padding-right: 50px !important; }
  .box04 .gm-style-iw-chr {
    position: absolute;
    right: 0px;
    top: 0px; }
  .box04 .inner {
    width: 100%;
    max-width: 1080px;
    margin: 0px auto 0px auto; }
    .box04 .inner .btn-container ul {
      text-align: center;
      padding: 0px 16px;
      margin: 0px 0px 40px 0px; }
      @media only screen and (max-width: 959px) {
        .box04 .inner .btn-container ul {
          padding: 0px 0px 0px 0px;
          margin: 0px 0px 20px 0px; } }
      .box04 .inner .btn-container ul li {
        width: calc(33.3% - 40px);
        display: inline-block;
        font-size: 24px;
        border-radius: 100px;
        height: 78px;
        line-height: 78px;
        border: 1px solid #fff;
        padding: 0px 0px 0px 0px;
        margin: 0px 40px 0px 0px;
        cursor: pointer; }
        @media only screen and (max-width: 959px) {
          .box04 .inner .btn-container ul li {
            font-size: 15px;
            width: calc(33.3% - 4px);
            margin: 0px 4px 0px 0px;
            height: 32px;
            line-height: 32px; } }
        .box04 .inner .btn-container ul li:last-child {
          margin: 0px 0px 0px 0px; }
        .box04 .inner .btn-container ul li.active {
          background-color: #fff;
          color: #000; }
    .box04 .inner .map-parent .map-base {
      display: -webkit-flex;
      /* Safari */
      display: flex;
      -webkit-flex-direction: row;
      /* Safari */
      flex-direction: row;
      -webkit-flex-wrap: wrap;
      /* Safari */
      flex-wrap: wrap; }
      .box04 .inner .map-parent .map-base.map-Retreat {
        display: none; }
      .box04 .inner .map-parent .map-base.map-Reimagination {
        display: none; }
      .box04 .inner .map-parent .map-base.is-active {
        display: -webkit-flex;
        /* Safari */
        display: flex;
        -webkit-flex-direction: row;
        /* Safari */
        flex-direction: row;
        -webkit-flex-wrap: wrap;
        /* Safari */
        flex-wrap: wrap; }
    .box04 .inner .map-parent .map {
      margin: 0px 0px 0px 0px;
      width: 62%;
      height: 700px; }
      @media only screen and (max-width: 959px) {
        .box04 .inner .map-parent .map {
          width: 100%;
          height: 400px;
          margin: 0px 0px 24px 0px; } }
    .box04 .inner .map-parent .map-link {
      width: 38%;
      padding: 0px 0px 0px 24px; }
      @media only screen and (max-width: 959px) {
        .box04 .inner .map-parent .map-link {
          width: 100%;
          padding: 0px 0px 0px 0px; } }
      .box04 .inner .map-parent .map-link ul li {
        font-size: 20px;
        margin: 0px 0px 20px 0px;
        line-height: 1.2; }
        @media only screen and (max-width: 959px) {
          .box04 .inner .map-parent .map-link ul li {
            font-size: 14px;
            line-height: 1;
            margin: 0px 0px 16px 0px; } }
        .box04 .inner .map-parent .map-link ul li:last-child {
          margin: 0px 0px 0px 0px; }
        .box04 .inner .map-parent .map-link ul li span {
          cursor: pointer; }
          .box04 .inner .map-parent .map-link ul li span:hover {
            text-decoration: underline; }

body.hina .box04 .inner .map-parent .map-base.map-Continuity {
  display: flex; }
body.hina .box04 .inner .map-parent .map-base.map-Retreat {
  display: flex; }
body.hina .box04 .inner .map-parent .map-base.map-Reimagination {
  display: flex; }