@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sriracha&display=swap");
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box; }

:where([hidden]:not([hidden='until-found'])) {
  display: none !important; }

:where(html) {
  -webkit-text-size-adjust: none;
  /*color-scheme: dark light;*/
  tab-size: 2;
  /*scrollbar-gutter: stable;*/ }

:where(html:has(dialog:modal[open])) {
  overflow: clip; }

@media (prefers-reduced-motion: no-preference) {
  :where(html:focus-within) {
    scroll-behavior: smooth; } }
:where(body) {
  line-height: 1.5;
  font-family: system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

:where(button) {
  all: unset; }

:where(input, button, textarea, select) {
  font: inherit;
  color: inherit; }

:where(textarea) {
  resize: vertical;
  resize: block; }

:where(button, label, select, summary, [role='button'], [role='option']) {
  cursor: pointer; }

:where(:disabled) {
  cursor: not-allowed; }

:where(label:has(> input:disabled), label:has(+ input:disabled)) {
  cursor: not-allowed; }

:where(a) {
  color: inherit;
  text-underline-offset: 0.2ex; }

:where(ul, ol) {
  list-style: none; }

:where(img, svg, video, canvas, audio, iframe, embed, object) {
  display: block; }

:where(img, picture, svg, video) {
  max-inline-size: 100%;
  block-size: auto; }

:where(p, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: break-word; }

:where(h1, h2, h3) {
  line-height: calc(1em + 0.5rem);
  /*text-wrap: balance;*/ }

:where(hr) {
  border: none;
  border-block-start: 1px solid;
  color: inherit;
  block-size: 0;
  overflow: visible; }

:where(dialog, [popover]) {
  border: none;
  background: none;
  color: inherit;
  inset: unset;
  max-width: unset;
  max-height: unset; }

:where(dialog:not([open], [popover]), [popover]:not(:popover-open)) {
  display: none !important; }

:where(:focus-visible) {
  outline: 3px solid CanvasText;
  box-shadow: 0 0 0 5px Canvas;
  outline-offset: 1px; }

:where(:focus-visible, :target) {
  scroll-margin-block: 8vh; }

:where(.visually-hidden:not(:focus-within, :active)) {
  clip-path: inset(50%) !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  border: 0 !important;
  user-select: none !important; }

/* ---------- body ---------- */
body {
  color: #231815;
  font-family: "Noto Sans JP";
  font-weight: 500;
  line-height: 1; }
  body#en {
    font-family: "Noto Sans"; }
  body#tw {
    font-family: "Noto Sans TC"; }

/* ---------- header ---------- */
.header {
  align-items: flex-start;
  display: flex;
  position: absolute;
  width: 100%;
  z-index: 9999; }
  .header > p {
    line-height: 1;
    padding: 20px 20px 0; }
    @media only screen and (max-width: 980px) {
      .header > p {
        padding: 15px 0 0 10px; } }
    .header > p a {
      align-items: center;
      display: flex;
      gap: 15px;
      text-decoration: none; }
      @media only screen and (max-width: 780px) {
        .header > p a {
          gap: 0; } }
      .header > p a span {
        flex: 1;
        font-size: 0.75rem;
        font-weight: 600;
        text-align: center; }
        .header > p a span img {
          display: block;
          padding: 0 0 5px; }
          @media only screen and (max-width: 980px) {
            .header > p a span img {
              padding: 10px 0 5px;
              width: 240px; } }
          @media only screen and (max-width: 780px) {
            .header > p a span img {
              padding: 0 0 5px;
              width: 220px; } }
      .header > p a::before {
        aspect-ratio: 78 / 64;
        background-image: url("../img/common/kotori.svg");
        background-size: cover;
        content: "";
        display: block;
        width: 78px; }
        @media only screen and (max-width: 980px) {
          .header > p a::before {
            width: 64px; } }
        @media only screen and (max-width: 780px) {
          .header > p a::before {
            width: 50px; } }
  .header > ul {
    align-items: center;
    border-radius: 5px;
    display: flex;
    font-weight: 600;
    height: 48px;
    margin-left: auto;
    margin-top: 30px;
    opacity: 0;
    padding: 0 5px;
    transition: background-color .3s, opacity .3s; }
    .header > ul:hover {
      background-color: #fff; }
    @media (hover: none) {
      .header > ul {
        display: none; } }
    @media only screen and (max-width: 1280px) {
      .header > ul {
        display: none; } }
    .header > ul > li {
      border-right: #231815 1px solid;
      position: relative; }
      .header > ul > li:last-child {
        border-right: none; }
      .header > ul > li:nth-child(1) > div div::before {
        background-image: url("../img/kotohira/slider/1.webp"); }
      .header > ul > li:nth-child(2) > div div::before {
        background-image: url("../img/takamatsu/slider/1.webp"); }
      .header > ul > li > a,
      .header > ul > li > span {
        cursor: pointer;
        display: inline-block;
        padding: 0 20px;
        text-decoration: none;
        white-space: nowrap; }
      .header > ul > li > div {
        display: none;
        left: calc(50% - 120px);
        padding: 25px 0 0;
        position: absolute;
        top: 100%;
        width: 240px; }
        .header > ul > li > div div {
          background-color: #fff;
          border-radius: 5px;
          filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
          padding: 10px; }
          .header > ul > li > div div::before {
            aspect-ratio: 16 / 10;
            background-image: url("../img/kotohira/slider/1.webp");
            background-position: center center;
            background-repeat: no-repeat;
            background-size: cover;
            content: "";
            display: block;
            margin: 0 0 5px; }
          .header > ul > li > div div::after {
            background-color: #fff;
            box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
            clip-path: polygon(50% 0, 100% 100%, 0 100%);
            content: "";
            position: absolute;
            top: -15px;
            left: 50%;
            margin-left: -15px;
            height: 18px;
            width: 30px; }
          .header > ul > li > div div ul li {
            border-bottom: #231815 1px dotted; }
            .header > ul > li > div div ul li:last-child {
              border-bottom: none;
              padding: 0 0 5px; }
            .header > ul > li > div div ul li a {
              display: block;
              font-size: 0.9375rem;
              padding: 12px 5px;
              text-decoration: none; }
          .header > ul > li > div div p {
            line-height: 1;
            padding: 0; }
            .header > ul > li > div div p a {
              background-color: #c00;
              border-radius: 3px;
              color: #fff;
              display: block;
              font-weight: 600;
              letter-spacing: 0.1rem;
              padding: 10px 0;
              text-align: center;
              text-decoration: none;
              transition: opacity .3s; }
              .header > ul > li > div div p a:hover {
                opacity: 0.7; }

.header-float {
  background-color: #231815;
  border-radius: 5px;
  color: #fff;
  display: flex;
  height: 48px;
  position: fixed;
  top: 30px;
  right: 30px;
  z-index: 9999; }
  @media only screen and (max-width: 780px) {
    .header-float {
      height: 40px;
      top: 15px;
      right: 15px; } }
  .header-float > p {
    align-items: center;
    border-left: #fff 1px solid;
    border-right: #fff 1px solid;
    cursor: pointer;
    display: flex;
    gap: 0 7px;
    line-height: 1;
    margin: 15px 0;
    padding: 0 20px;
    position: relative; }
    body.nav-open .header-float > p {
      border-left: none !important; }
    @media only screen and (max-width: 780px) {
      .header-float > p {
        border-left: none;
        border-right: none;
        margin: 12px 0;
        padding: 0 12px; }
        body.scroll .header-float > p {
          border-left: #fff 1px solid; } }
    .header-float > p em {
      font-family: "Montserrat";
      font-style: normal;
      font-weight: 500;
      font-size: 1.125rem; }
      @media only screen and (max-width: 780px) {
        .header-float > p em {
          display: none; } }
    .header-float > p > span {
      height: 12px;
      position: relative;
      width: 20px; }
      .header-float > p > span span {
        background: #fff;
        display: inline-block;
        height: 2px;
        left: 0;
        position: absolute;
        transition: all .3s;
        width: 100%; }
        .header-float > p > span span:nth-of-type(1) {
          top: 0; }
          .nav-open .header-float > p > span span:nth-of-type(1) {
            transform: translateY(5px) rotate(-30deg); }
        .header-float > p > span span:nth-of-type(2) {
          top: calc(50% - 1px); }
          .nav-open .header-float > p > span span:nth-of-type(2) {
            display: none; }
        .header-float > p > span span:nth-of-type(3) {
          bottom: 0; }
          .nav-open .header-float > p > span span:nth-of-type(3) {
            transform: translateY(-5px) rotate(30deg); }
  .header-float .booking,
  .header-float .language {
    position: relative; }
    .header-float .booking p,
    .header-float .language p {
      align-items: center;
      cursor: pointer;
      display: flex;
      font-family: "Montserrat";
      font-weight: 500;
      font-size: 1.125rem;
      height: 100%;
      line-height: 1;
      padding: 0 20px; }
      @media only screen and (max-width: 780px) {
        .header-float .booking p,
        .header-float .language p {
          padding: 0 12px; } }
    .header-float .booking div,
    .header-float .language div {
      display: none;
      position: absolute; }
  @media only screen and (max-width: 780px) {
    .header-float .booking {
      display: none; } }
  .header-float .booking div {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.5));
    left: calc(50% - 250px);
    top: calc(100% + 10px);
    transition: top .3s;
    padding: 10px;
    width: 500px; }
    @media only screen and (max-width: 780px) {
      .header-float .booking div {
        left: calc(50% - 100px);
        width: 200px; } }
    .header-float .booking div::before {
      background-color: #fff;
      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
      clip-path: polygon(50% 0, 100% 100%, 0 100%);
      content: "";
      position: absolute;
      top: -15px;
      left: 50%;
      margin-left: -15px;
      height: 18px;
      width: 30px; }
    .header-float .booking div ul {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 1px; }
      .header-float .booking div ul li {
        background-image: url("../img/kotohira/slider/1.webp");
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: opacity .3s; }
        .header-float .booking div ul li:nth-child(2) {
          background-image: url("../img/takamatsu/slider/1.webp"); }
        .header-float .booking div ul li:hover {
          opacity: 0.7; }
        .header-float .booking div ul li a {
          aspect-ratio: 16 / 10;
          display: flex;
          text-decoration: none; }
          .header-float .booking div ul li a span {
            background-color: rgba(204, 0, 0, 0.8);
            color: #fff;
            font-weight: 600;
            margin: auto 0 0;
            letter-spacing: 0.1rem;
            padding: 10px 0;
            text-align: center;
            width: 100%; }
            @media only screen and (max-width: 780px) {
              .header-float .booking div ul li a span {
                font-size: 0.875rem;
                font-weight: 500;
                letter-spacing: 0.05rem;
                padding: 7px 0; } }
  @media only screen and (max-width: 780px) {
    .header-float .language {
      display: none; } }
  .header-float .language p {
    align-items: center;
    display: flex;
    gap: 0 7px; }
    .header-float .language p::after {
      background-color: #fff;
      clip-path: polygon(0 0, 100% 0%, 50% 100%);
      content: "";
      height: 8px;
      transition: transform .5s;
      width: 9px; }
  .header-float .language div {
    top: 100%;
    transition: padding .3s;
    width: 100%; }
    .header-float .language div ul {
      background-color: rgba(35, 24, 21, 0.7);
      border-radius: 5px;
      font-family: "Montserrat";
      font-weight: 500;
      padding: 5px;
      text-align: center; }
      .header-float .language div ul li em {
        display: block;
        font-style: normal;
        padding: 10px 0; }
      .header-float .language div ul li a {
        border-radius: 3px;
        color: rgba(255, 255, 255, 0.7);
        display: block;
        padding: 10px 0;
        text-decoration: none;
        transition: background-color .3s, color .3s; }
        .header-float .language div ul li a:hover {
          background-color: rgba(255, 255, 255, 0.2);
          color: #fff; }
  @media (hover) {
    .header-float .language:hover p::after {
      transform: rotate(180deg); }
    .header-float .language:hover div {
      padding: 10px 0 0; } }
  @media (hover: none) {
    .header-float .language._open p::after {
      transform: rotate(180deg); }
    .header-float .language._open div {
      padding: 10px 0 0; } }

.header-menu {
  background-color: rgba(35, 24, 21, 0.9);
  display: none;
  height: 100dvh;
  position: fixed;
  width: 100%;
  z-index: 999; }
  @media only screen and (max-width: 780px) {
    .header-menu {
      background-color: transparent;
      background-image: url("../img/home/slider_1.webp");
      background-position: center center;
      background-size: cover; }
      .header-menu::before {
        background-color: rgba(35, 24, 21, 0.85);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1; } }
  .header-menu dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1px;
    height: 100%; }
    @media only screen and (max-width: 780px) {
      .header-menu dl {
        height: auto;
        gap: 0 15px;
        padding: 0 15px; } }
    .header-menu dl div {
      background-image: url("../img/kotohira/slider/1.webp");
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      padding: 0 20px 20px;
      position: relative;
      text-align: center;
      z-index: 0; }
      .header-menu dl div:nth-child(2) {
        background-image: url("../img/takamatsu/slider/2.webp"); }
      @media only screen and (max-width: 780px) {
        .header-menu dl div {
          background-image: unset !important;
          padding: 0; } }
      .header-menu dl div::before {
        background-color: rgba(35, 24, 21, 0.75);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1; }
        @media only screen and (max-width: 780px) {
          .header-menu dl div::before {
            display: none; } }
      .header-menu dl div dt {
        margin: auto auto 0;
        width: 400px;
        padding: 0 0 50px; }
        @media only screen and (max-width: 1280px) {
          .header-menu dl div dt {
            max-width: 320px;
            padding: 0 0 40px; } }
        @media only screen and (max-width: 980px) {
          .header-menu dl div dt {
            max-width: 240px;
            padding: 0 0 30px; } }
        @media only screen and (max-width: 780px) {
          .header-menu dl div dt {
            padding: 70px 5px 15px;
            width: 100%; } }
        .header-menu dl div dt em {
          display: none; }
          @media only screen and (max-width: 780px) {
            .header-menu dl div dt em {
              color: #fff;
              display: block;
              font-size: 0.875rem;
              font-style: normal;
              font-weight: 400;
              letter-spacing: 0.1rem;
              padding: 15px 0 0; } }
      @media only screen and (max-width: 780px) {
        .header-menu dl div dd {
          text-align: left; } }
      .header-menu dl div dd ul {
        display: flex;
        flex-direction: column; }
        @media only screen and (max-width: 780px) {
          .header-menu dl div dd ul {
            border-top: rgba(255, 255, 255, 0.2) 1px dotted;
            height: 100%; } }
        .header-menu dl div dd ul li {
          padding: 0 0 20px; }
          @media only screen and (max-width: 780px) {
            .header-menu dl div dd ul li {
              border-bottom: rgba(255, 255, 255, 0.2) 1px dotted;
              padding: 0; } }
          .header-menu dl div dd ul li a {
            color: #fff;
            font-size: 1.375rem;
            font-weight: 300;
            text-decoration: none;
            transition: opacity .3s; }
            @media only screen and (max-width: 980px) {
              .header-menu dl div dd ul li a {
                font-size: 1.125rem; } }
            @media only screen and (max-width: 780px) {
              .header-menu dl div dd ul li a {
                font-size: 0.8125rem;
                font-weight: 400;
                display: block;
                letter-spacing: 0.05rem;
                padding: 12px 5px; } }
            @media (hover) {
              .header-menu dl div dd ul li a:hover {
                opacity: 0.5; } }
      @media only screen and (max-width: 780px) {
        .header-menu dl div:nth-child(2) dd ul li:nth-child(3) {
          border-top: rgba(255, 255, 255, 0.2) 1px dotted;
          margin: auto 0 0; } }
  .header-menu > div {
    align-items: center;
    background-color: rgba(35, 24, 21, 0.9);
    bottom: 50px;
    border-radius: 5px;
    display: flex;
    gap: 0 20px;
    justify-content: space-between;
    left: 50px;
    padding: 20px 30px;
    position: absolute;
    width: calc(100% - 100px); }
    @media only screen and (max-width: 1280px) {
      .header-menu > div {
        bottom: 30px;
        left: 30px;
        width: calc(100% - 60px); } }
    @media only screen and (max-width: 980px) {
      .header-menu > div {
        padding: 20px; } }
    @media only screen and (max-width: 780px) {
      .header-menu > div {
        background-color: transparent;
        flex-direction: column;
        justify-content: center;
        padding: 35px 15px;
        position: static;
        width: 100%; } }
    .header-menu > div ul.nav {
      display: flex;
      gap: 0 30px;
      padding: 2px 0 0; }
      @media only screen and (max-width: 980px) {
        .header-menu > div ul.nav {
          gap: 10px 20px; } }
      @media only screen and (max-width: 780px) {
        .header-menu > div ul.nav {
          flex-wrap: wrap;
          gap: 15px 20px;
          justify-content: center;
          padding: 0 0 30px; } }
      .header-menu > div ul.nav li a {
        color: #fff;
        font-size: 1.25rem;
        font-weight: 300;
        text-decoration: none;
        transition: opacity .3s; }
        @media only screen and (max-width: 1280px) {
          .header-menu > div ul.nav li a {
            font-size: 1.125rem; } }
        @media only screen and (max-width: 980px) {
          .header-menu > div ul.nav li a {
            font-size: 1rem; } }
        @media only screen and (max-width: 780px) {
          .header-menu > div ul.nav li a {
            font-size: 0.875rem; } }
        @media (hover) {
          .header-menu > div ul.nav li a:hover {
            opacity: 0.5; } }
    .header-menu > div ul.language {
      display: flex;
      gap: 0 30px; }
      @media only screen and (max-width: 980px) {
        .header-menu > div ul.language {
          gap: 0 15px; } }
      .header-menu > div ul.language li {
        font-family: "Montserrat";
        font-size: 1.5rem; }
        @media only screen and (max-width: 1280px) {
          .header-menu > div ul.language li {
            font-size: 1.25rem; } }
        @media only screen and (max-width: 980px) {
          .header-menu > div ul.language li {
            font-size: 1rem; } }
        .header-menu > div ul.language li em {
          color: #fff;
          font-style: normal;
          font-weight: 500; }
        .header-menu > div ul.language li a {
          color: rgba(255, 255, 255, 0.7);
          font-weight: 300;
          text-decoration: none;
          transition: color .3s, font-weight .3s; }
          @media (hover) {
            .header-menu > div ul.language li a:hover {
              color: white;
              font-weight: 500; } }

/* ---------- footer ---------- */
.footer {
  background-color: #231815;
  color: #fff;
  position: relative; }
  .footer a {
    color: #fff;
    text-decoration: none;
    transition: opacity .3s; }
    @media (hover) {
      .footer a:hover {
        opacity: 0.6; } }
  .footer dl {
    display: grid;
    gap: 1px;
    grid-template-columns: repeat(2, 1fr); }
    @media only screen and (max-width: 780px) {
      .footer dl {
        grid-template-columns: repeat(1, 1fr); } }
    .footer dl div {
      background-position: center center;
      background-repeat: no-repeat;
      background-size: cover;
      padding: 65px 20px 50px;
      position: relative;
      text-align: center;
      width: 100%;
      z-index: 0; }
      @media only screen and (max-width: 780px) {
        .footer dl div {
          padding: 55px 20px 40px; } }
      .footer dl div:nth-child(1) {
        background-image: url("../img/kotohira/slider/2.webp"); }
      .footer dl div:nth-child(2) {
        background-image: url("../img/takamatsu/slider/2.webp"); }
      .footer dl div::before {
        background-color: rgba(35, 24, 21, 0.8);
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1; }
      .footer dl div dt {
        margin: 0 auto;
        max-width: 320px;
        padding: 0 0 20px;
        text-align: center; }
        @media only screen and (max-width: 980px) {
          .footer dl div dt {
            font-size: 0.9375rem;
            max-width: 280px; } }
        .footer dl div dt em {
          font-style: normal;
          display: block;
          padding: 20px 0 0; }
      .footer dl div dd p {
        font-size: 0.875rem;
        letter-spacing: 0.1rem;
        line-height: 1.5;
        padding: 0; }
        @media only screen and (max-width: 980px) {
          .footer dl div dd p {
            font-size: 0.75rem; } }
        .footer dl div dd p.phone {
          padding: 7px 0; }
          .footer dl div dd p.phone a {
            background-image: url("../img/common/phone.svg");
            background-position: left 7px;
            background-repeat: no-repeat;
            background-size: 16px auto;
            display: inline-block;
            font-family: "Montserrat";
            font-size: 1.25rem;
            font-weight: 400;
            padding: 0 0 0 20px; }
          .footer dl div dd p.phone em {
            display: block;
            font-size: 0.75rem;
            font-style: normal; }
            #en .footer dl div dd p.phone em {
              font-family: "Montserrat";
              font-size: 0.8125rem; }
            .footer dl div dd p.phone em span {
              font-family: "Montserrat";
              font-size: 0.875rem; }
              #en .footer dl div dd p.phone em span {
                font-size: 0.8125rem; }
      .footer dl div dd ul {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0 10px;
        margin: 0 auto;
        max-width: 70px;
        padding: 20px 0 0; }
  .footer > div {
    align-items: center;
    display: flex;
    justify-content: space-between;
    padding: 20px 30px 0; }
    @media only screen and (max-width: 780px) {
      .footer > div {
        flex-direction: column;
        padding: 30px 0 40px; } }
    .footer > div ul {
      display: flex;
      font-size: 0.875rem;
      gap: 0 25px;
      padding: 5px 0 20px; }
      @media only screen and (max-width: 780px) {
        .footer > div ul {
          font-size: 0.8125rem; } }
    .footer > div p {
      font-family: "Montserrat";
      font-size: 0.75rem;
      line-height: 1;
      margin: 0 0 0 auto; }
      @media only screen and (max-width: 780px) {
        .footer > div p {
          margin: 0; } }

/* ---------- main ---------- */
.main {
  padding-top: 45vh; }
  @media only screen and (max-width: 780px) {
    .main {
      padding-top: 35vh; } }

.main-header {
  align-items: center;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  height: 45vh;
  justify-content: center;
  left: 0;
  padding: 80px 0 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 0; }
  @media only screen and (max-width: 780px) {
    .main-header {
      height: 35vh;
      padding: 55px 0 0; } }
  #coliving .main-header {
    background-image: url("../img/home/coliving.jpg"); }
  #event .main-header {
    background-image: url("../img/home/slider_1.webp"); }
  #information .main-header {
    background-image: url("../img/home/slider_1.webp"); }
  #inquiry .main-header {
    background-image: url("../img/home/slider_1.webp"); }
  #kotohira .main-header {
    background-image: url("../img/kotohira/slider/1.webp"); }
  #kotohira-activity .main-header {
    background-image: url("../img/kotohira/activity/bike_2.jpg"); }
  #kotohira-coworking .main-header {
    background-image: url("../img/kotohira/slider/2.webp"); }
  #kotoripark .main-header {
    background-image: url("../img/kotohira/kotoripark/3.jpg"); }
  #privacy .main-header {
    background-image: url("../img/home/slider_1.webp"); }
  #takamatsu .main-header {
    background-image: url("../img/takamatsu/slider/1.webp"); }
  #takamatsu-coworking .main-header {
    background-image: url("../img/takamatsu/slider/2.webp"); }
  #terms .main-header {
    background-image: url("../img/home/slider_1.webp"); }
  .main-header * {
    background-color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    line-height: 1;
    padding: 12px 12px 15px;
    text-align: center;
    transition: opacity .3s; }
    @media only screen and (max-width: 780px) {
      .main-header * {
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.05rem;
        padding: 12px; } }
    #en .main-header * {
      font-family: "Montserrat";
      font-size: 2rem;
      font-weight: 300;
      letter-spacing: 0.05rem;
      padding: 15px; }
      @media only screen and (max-width: 780px) {
        #en .main-header * {
          font-size: 1.5rem;
          letter-spacing: 0; } }
    .main-header *::before {
      content: attr(data-en);
      display: block;
      font-family: "Montserrat";
      font-size: 2.25rem;
      font-weight: 300;
      padding: 0 0 10px; }
      @media only screen and (max-width: 780px) {
        .main-header *::before {
          font-size: 1.625rem;
          letter-spacing: 0; } }
      #en .main-header *::before {
        display: none; }
    body.scroll .main-header * {
      opacity: 0; }

.main-contents {
  background-color: #fff;
  padding: 100px 0 0;
  position: relative; }
  @media only screen and (max-width: 980px) {
    .main-contents {
      padding: 80px 0 0; } }
  @media only screen and (max-width: 780px) {
    .main-contents {
      padding: 60px 0 0; } }

/* ---------- section ---------- */
.section {
  margin: 0 auto;
  max-width: 1280px;
  padding: 0 50px 80px; }
  @media only screen and (max-width: 980px) {
    .section {
      padding: 0 30px 60px; } }
  @media only screen and (max-width: 780px) {
    .section {
      padding: 0 20px 40px; } }

.section-border {
  border: #eee 1px solid;
  margin: 20px 0;
  padding: 20px 20px 0; }
  .section-border h3 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    padding: 0 0 10px; }
    @media only screen and (max-width: 780px) {
      .section-border h3 {
        font-size: 1.125rem; } }

a {
  color: #231815; }

img {
  display: inline-block;
  height: auto;
  max-width: 100%;
  vertical-align: top; }

p {
  font-size: 0.875rem;
  line-height: 1.8;
  padding-bottom: 20px; }

.more._center {
  text-align: center; }
.more a {
  border: #231815 1px solid;
  display: inline-block;
  font-size: 0.9375rem;
  line-height: 1;
  text-decoration: none;
  padding: 10px 15px 7px; }

.attention {
  color: #D90000; }

p.caution {
  padding-left: 0.875rem;
  position: relative; }
  p.caution::before {
    content: "※";
    left: 0;
    position: absolute;
    top: 0; }
    #en p.caution::before {
      content: "*"; }

ul.caution {
  font-size: 0.875rem;
  line-height: 1.8;
  padding: 0 0 15px; }
  ul.caution li {
    padding-bottom: 5px;
    padding-left: 0.875rem;
    position: relative; }
    ul.caution li::before {
      content: "※";
      left: 0;
      position: absolute;
      top: 0; }
      #en ul.caution li::before {
        content: "*"; }

/* ---------- title ---------- */
.title_l {
  font-family: "Montserrat";
  font-size: 1.75rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 0 30px;
  text-align: center; }
  @media only screen and (max-width: 780px) {
    .title_l {
      font-size: 1.5rem;
      padding: 0 0 25px; } }

.title_m {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0 0 25px; }
  @media only screen and (max-width: 780px) {
    .title_m {
      font-size: 1.25rem; } }

.title_s {
  border-bottom: #333 dashed 1px;
  font-size: 1.25rem;
  font-weight: 500;
  margin: 0 0 30px;
  padding: 0 0 25px; }
  @media only screen and (max-width: 780px) {
    .title_s {
      font-size: 1.125rem; } }

/* ---------- catch ---------- */
.catch_l {
  font-feature-settings: "palt";
  font-size: 1.875rem;
  font-weight: 400;
  letter-spacing: 0.1rem;
  line-height: 1.5;
  padding: 0 0 40px;
  text-align: center; }
  @media only screen and (max-width: 780px) {
    .catch_l {
      font-size: 1.375rem;
      letter-spacing: -0.05rem;
      padding: 0 0 35px; } }

/* ---------- list ---------- */
.circle {
  font-size: 0.875rem;
  line-height: 1.8;
  list-style: circle;
  margin: 0 0 0 19px;
  padding: 0 0 10px; }
  .circle li {
    padding: 0 0 10px; }
    .circle li ul {
      padding: 0; }
      .circle li ul li {
        padding: 0; }

.parallel {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.875rem;
  line-height: 1.8;
  padding: 0 0 20px; }
  .parallel li::after {
    content: "/";
    padding: 0 5px; }
  .parallel li:last-child::after {
    content: ""; }

/* ---------- table ---------- */
.table {
  border-top: #ccc 1px dashed;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 5px 0 20px;
  width: 100%; }
  @media only screen and (max-width: 980px) {
    .table {
      margin: 0 -20px 20px;
      width: calc(100% + 40px); } }
  .table tr {
    border-bottom: #ccc 1px dashed; }
    .table tr th {
      font-size: 0.875rem;
      font-weight: 600;
      line-height: 1.8;
      text-align: left;
      padding: 20px 20px 20px 0;
      vertical-align: top;
      white-space: nowrap; }
      @media only screen and (max-width: 980px) {
        .table tr th {
          display: block;
          font-size: 1rem;
          padding: 20px 20px 10px;
          width: 100%; } }
    .table tr td {
      padding: 22px 20px 10px;
      vertical-align: middle; }
      @media only screen and (max-width: 980px) {
        .table tr td {
          display: block;
          padding: 0 20px 10px;
          width: 100%; } }
      .table tr td p,
      .table tr td ul.parallel {
        padding-bottom: 10px; }
      .table tr td ul.circle {
        padding: 0 0 5px; }
        .table tr td ul.circle li {
          padding: 0 0 5px; }
      .table tr td dl div {
        display: flex; }
        .table tr td dl div dt {
          font-size: 0.875rem;
          line-height: 1.8;
          margin: 0 0 0 -0.4rem;
          white-space: nowrap; }
          #en .table tr td dl div dt {
            margin: 0 5px 0 0; }

/* ---------- home ---------- */
.home {
  padding-top: 100vh; }
  @media only screen and (max-width: 780px) {
    .home {
      padding-top: 50vh; } }

.home-contents {
  background-color: #fff;
  position: relative; }

/* ---------- keyvisual ---------- */
#home-keyvisual {
  height: 100vh;
  position: fixed;
  top: 0;
  width: 100%; }
  @media only screen and (max-width: 780px) {
    #home-keyvisual {
      height: 50vh; } }
  #home-keyvisual p {
    align-items: center;
    color: #fff;
    filter: drop-shadow(0 0 5px #000);
    font-family: "Montserrat";
    font-size: clamp(1rem, 3.5vw, 3rem);
    font-weight: 500;
    display: flex;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    transition: opacity .3s;
    width: 100%;
    z-index: 99; }
    @media only screen and (max-width: 780px) {
      #home-keyvisual p {
        font-size: clamp(1rem, 6vw, 3rem);
        line-height: 1.5;
        padding: 50px 0 0; } }
    body.scroll #home-keyvisual p {
      opacity: 0; }
    #home-keyvisual p br {
      display: none; }
      @media only screen and (max-width: 780px) {
        #home-keyvisual p br {
          display: block; } }
  #home-keyvisual #movie {
    height: 100%;
    left: 50%;
    min-height: 56.25vw;
    min-width: 1920px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 100%; }
    @media only screen and (max-width: 780px) {
      #home-keyvisual #movie {
        height: 50vh; } }
  #home-keyvisual .slider li {
    height: 100vh; }
    @media only screen and (max-width: 780px) {
      #home-keyvisual .slider li {
        height: 50vh; } }
    #home-keyvisual .slider li img {
      height: 100%;
      max-width: none;
      object-fit: cover;
      width: 100%; }

/* ---------- hours ---------- */
#home-hours {
  background-color: rgba(241, 237, 237, 0.9);
  position: relative; }
  @media only screen and (max-width: 780px) {
    #home-hours {
      background-color: #F1EDED; } }
  #home-hours dl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 auto;
    max-width: 1280px;
    padding: 30px 0; }
    @media only screen and (max-width: 780px) {
      #home-hours dl {
        grid-template-columns: 1fr;
        padding: 0 20px; } }
    #home-hours dl div {
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      padding: 5px 50px;
      width: 100%; }
      @media only screen and (max-width: 1280px) {
        #home-hours dl div {
          padding: 5px 40px; } }
      @media only screen and (max-width: 980px) {
        #home-hours dl div {
          padding: 5px 30px 0; } }
      @media only screen and (max-width: 780px) {
        #home-hours dl div {
          padding: 25px 0; } }
      #home-hours dl div:nth-child(1) {
        border-right: 1px solid #231815;
        white-space: nowrap; }
        @media only screen and (max-width: 780px) {
          #home-hours dl div:nth-child(1) {
            border-bottom: 1px solid #231815;
            border-right: none; } }
      #home-hours dl div dt {
        font-family: "Montserrat";
        font-size: 1.125rem;
        font-weight: 600;
        padding: 0 0 12px; }
      #home-hours dl div dd {
        align-items: flex-start;
        display: flex;
        gap: 10px 20px;
        justify-content: space-between; }
        @media only screen and (max-width: 980px) {
          #home-hours dl div dd {
            flex-direction: column; } }
        #home-hours dl div dd p {
          font-weight: 500;
          line-height: 1.6;
          padding: 0; }
          #home-hours dl div dd p span {
            display: inline-block;
            font-size: 0.75rem;
            line-height: 1.8;
            padding: 7px 0 0; }
        #home-hours dl div dd ul {
          display: grid;
          gap: 7px;
          margin: 2px 0 0; }
          #en #home-hours dl div dd ul {
            flex-direction: column; }
          @media only screen and (max-width: 1280px) {
            #home-hours dl div dd ul {
              flex-direction: column; } }
          @media only screen and (max-width: 980px) {
            #home-hours dl div dd ul {
              flex-direction: row;
              width: 100%; } }
          #home-hours dl div dd ul li {
            border: #231815 1px solid;
            border-radius: 3px; }
            #home-hours dl div dd ul li:nth-child(1) {
              grid-row: 1 / 2;
              grid-column: 1 / 2; }
            #home-hours dl div dd ul li:nth-child(2) {
              grid-row: 1 / 2;
              grid-column: 2 / 3; }
            #home-hours dl div dd ul li:nth-child(3) {
              grid-row: 2 / 3;
              grid-column: 1 / 3; }
            @media only screen and (max-width: 980px) {
              #home-hours dl div dd ul li {
                width: 100%; } }
            #home-hours dl div dd ul li a {
              display: block;
              font-size: 0.9375rem;
              font-weight: 600;
              letter-spacing: 0.1rem;
              padding: 8px 10px;
              text-align: center;
              text-decoration: none;
              white-space: nowrap; }
              #en #home-hours dl div dd ul li a {
                font-weight: 500;
                letter-spacing: 0; }
              @media only screen and (max-width: 780px) {
                #home-hours dl div dd ul li a {
                  font-size: 0.875rem;
                  letter-spacing: 0.05rem;
                  padding: 7px 0; }
                  #en #home-hours dl div dd ul li a {
                    letter-spacing: 0; } }

/* ---------- information ---------- */
#home-information {
  background-color: #E2D7D7;
  padding: 10px 0; }
  @media only screen and (max-width: 780px) {
    #home-information {
      padding: 0; } }
  #home-information div {
    align-items: center;
    display: flex; }
    @media only screen and (max-width: 780px) {
      #home-information div {
        flex-wrap: wrap; } }
    #home-information div h2 {
      font-family: "Montserrat";
      font-size: 1.125rem;
      font-weight: 600;
      text-align: center;
      width: 160px; }
      @media only screen and (max-width: 780px) {
        #home-information div h2 {
          order: 0;
          padding: 20px;
          width: auto; } }
    #home-information div ul {
      border-right: rgba(35, 24, 21, 0.1) 1px solid;
      display: flex;
      flex: 1; }
      @media only screen and (max-width: 980px) {
        #home-information div ul {
          flex-direction: column; } }
      @media only screen and (max-width: 780px) {
        #home-information div ul {
          border-right: none;
          flex: none;
          order: 2;
          width: 100%; } }
      #home-information div ul li {
        border-left: rgba(35, 24, 21, 0.1) 1px solid;
        width: 100%; }
        @media only screen and (max-width: 780px) {
          #home-information div ul li {
            border-left: none;
            border-top: rgba(35, 24, 21, 0.1) 1px solid; } }
        #home-information div ul li a {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 5px 10px;
          padding: 10px 30px;
          text-decoration: none;
          transition: background-color .3s; }
          @media only screen and (max-width: 780px) {
            #home-information div ul li a {
              padding: 15px 20px; } }
          @media (hover) {
            #home-information div ul li a:hover {
              background-color: rgba(255, 255, 255, 0.2); } }
          #home-information div ul li a p.date {
            font-family: "Montserrat";
            font-size: 1rem;
            font-weight: 600;
            line-height: 1.6;
            padding: 1px 0 0; }
          #home-information div ul li a p.category {
            border: #231815 1px solid;
            border-radius: 2px;
            line-height: 1;
            font-size: 0.75rem;
            padding: 3px 5px; }
          #home-information div ul li a p.title {
            font-size: 0.9375rem;
            line-height: 1.6;
            padding: 0;
            width: 100%; }
    #home-information div > p {
      line-height: 1;
      padding: 0 20px;
      width: 160px; }
      @media only screen and (max-width: 780px) {
        #home-information div > p {
          margin: 0 0 0 auto;
          order: 1;
          width: auto; } }
      #home-information div > p a {
        border: #231815 1px solid;
        display: block;
        padding: 10px 0;
        text-align: center;
        text-decoration: none;
        white-space: nowrap; }
        @media only screen and (max-width: 780px) {
          #home-information div > p a {
            padding: 5px 10px; } }

/* ---------- point ---------- */
#home-point {
  margin: 0 auto;
  max-width: 1280px;
  padding: 100px 0; }
  @media only screen and (max-width: 980px) {
    #home-point {
      padding: 80px 0; } }
  @media only screen and (max-width: 780px) {
    #home-point {
      padding: 60px 0 40px; } }
  #home-point > p {
    line-height: 2;
    margin: 0 auto;
    max-width: 800px;
    padding: 0 30px; }
    @media only screen and (max-width: 780px) {
      #home-point > p {
        padding: 0 20px; } }
  #home-point section {
    align-items: center;
    display: flex;
    padding: 80px 0 0; }
    @media only screen and (max-width: 780px) {
      #home-point section {
        flex-direction: column;
        padding: 40px 0 0; } }
    #home-point section div {
      flex: 1;
      padding: 0 50px; }
      @media only screen and (max-width: 980px) {
        #home-point section div {
          padding: 0 30px; } }
      @media only screen and (max-width: 780px) {
        #home-point section div {
          order: 1; } }
      #home-point section div h3 {
        color: #231815;
        font-family: "Sriracha";
        font-size: 1.625rem;
        font-weight: 400;
        line-height: 1.4;
        margin: 0 0 10px;
        position: relative; }
        #home-point section div h3::after {
          background-position: right bottom;
          background-repeat: no-repeat;
          background-size: 80px auto;
          bottom: 5px;
          content: "";
          height: 100px;
          position: absolute;
          right: 0;
          width: 100px; }
      #home-point section div p {
        padding: 0; }
    #home-point section figure {
      width: calc(50% + 100px); }
      @media only screen and (max-width: 1280px) {
        #home-point section figure {
          width: 50%; } }
      @media only screen and (max-width: 780px) {
        #home-point section figure {
          margin: 0 0 30px;
          width: 100%; } }
      #home-point section figure img {
        height: 350px;
        object-fit: cover;
        width: 100%; }
    #home-point section:nth-of-type(1) div h3::after {
      background-image: url("../img/illust/01.svg");
      background-size: 100px auto; }
    #home-point section:nth-of-type(2) div {
      order: 1; }
      #home-point section:nth-of-type(2) div h3::after {
        background-image: url("../img/illust/02.svg");
        background-size: auto 100px; }
    #home-point section:nth-of-type(3) div h3::after {
      background-image: url("../img/illust/03.svg");
      background-size: 90px auto; }

/* ---------- hostels ---------- */
#home-hostels {
  display: grid;
  gap: 0 1px;
  grid-template-columns: 1fr 1fr;
  padding: 0 0 100px;
  position: relative;
  z-index: 0; }
  @media only screen and (max-width: 980px) {
    #home-hostels {
      padding: 0 0 80px; } }
  @media only screen and (max-width: 780px) {
    #home-hostels {
      grid-template-columns: 1fr;
      padding: 0; } }
  #home-hostels section {
    background-color: rgba(255, 255, 255, 0.8);
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span 3;
    margin: 380px 100px 0;
    padding: 25px 30px;
    position: relative;
    text-align: center; }
    @media only screen and (max-width: 1280px) {
      #home-hostels section {
        margin: 380px 50px 0; } }
    @media only screen and (max-width: 980px) {
      #home-hostels section {
        margin: 280px 30px 0; } }
    @media only screen and (max-width: 780px) {
      #home-hostels section {
        margin: 230px 20px 50px;
        padding: 25px 15px 15px; } }
    #home-hostels section h2 {
      font-size: 0.9rem;
      padding: 0 0 20px; }
      #home-hostels section h2 strong {
        display: block;
        padding: 20px 0 0; }
    #home-hostels section p {
      font-size: 0.875rem;
      line-height: 1.6;
      text-align: left; }
    #home-hostels section ul {
      display: grid;
      gap: 10px;
      grid-template-columns: 1fr 1fr;
      place-content: start; }
      @media only screen and (max-width: 980px) {
        #home-hostels section ul {
          grid-template-columns: 1fr; } }
      @media only screen and (max-width: 780px) {
        #home-hostels section ul {
          gap: 5px;
          grid-template-columns: 1fr 1fr; } }
      #home-hostels section ul li a {
        border: #231815 1px solid;
        display: block;
        font-size: 0.9375rem;
        line-height: 1;
        text-decoration: none;
        padding: 7px 0; }
        @media only screen and (max-width: 780px) {
          #home-hostels section ul li a {
            font-size: 0.8125rem; } }
    #home-hostels section > div {
      height: 500px;
      left: -100px;
      position: absolute;
      top: -380px;
      width: calc(100% + 200px);
      z-index: -1; }
      @media only screen and (max-width: 1280px) {
        #home-hostels section > div {
          left: -50px;
          width: calc(100% + 100px); } }
      @media only screen and (max-width: 980px) {
        #home-hostels section > div {
          height: 400px;
          left: -30px;
          top: -280px;
          width: calc(100% + 60px); } }
      @media only screen and (max-width: 780px) {
        #home-hostels section > div {
          left: -20px;
          height: 350px;
          top: -230px;
          width: calc(100% + 40px); } }
      #home-hostels section > div li {
        height: 500px; }
        @media only screen and (max-width: 980px) {
          #home-hostels section > div li {
            height: 400px; } }
        @media only screen and (max-width: 780px) {
          #home-hostels section > div li {
            height: 350px; } }
        #home-hostels section > div li img {
          height: 100%;
          max-width: none;
          object-fit: cover;
          width: 100%; }

/* ---------- event ---------- */
#home-event > div {
  background-image: url("../img/home/event.jpg");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: cover;
  margin: 0 0 80px; }
  @media only screen and (max-width: 980px) {
    #home-event > div {
      margin: 0 0 60px; } }
  @media only screen and (max-width: 780px) {
    #home-event > div {
      margin: 0 0 50px; } }
  #home-event > div div {
    background-color: #fff;
    margin: 0 10% 0 auto;
    max-width: 25%;
    padding: 40px 30px 20px; }
    @media only screen and (max-width: 1280px) {
      #home-event > div div {
        margin: 0 5% 0 auto;
        max-width: 30%; } }
    @media only screen and (max-width: 980px) {
      #home-event > div div {
        margin: 0 5% 0 auto;
        max-width: 35%;
        padding: 30px 20px 10px; } }
    @media only screen and (max-width: 780px) {
      #home-event > div div {
        background-color: rgba(255, 255, 255, 0.7);
        margin: 0;
        max-width: 100%;
        padding: 40px 20px 20px; } }
    #home-event > div div h2 {
      font-size: 1.375rem;
      font-weight: 400;
      letter-spacing: 0.05rem;
      line-height: 1.6;
      padding: 0 0 20px; }
      @media only screen and (max-width: 980px) {
        #home-event > div div h2 {
          font-size: 1.25rem; } }
#home-event p.more {
  padding: 60px 0 20px;
  text-align: center; }
  @media only screen and (max-width: 780px) {
    #home-event p.more {
      padding: 50px 0 20px; } }

/* ---------- coliving ---------- */
#home-coliving {
  max-width: 1100px;
  position: relative;
  z-index: 0; }
  #home-coliving div {
    border: #231815 1px dotted;
    margin: 0 0 20px;
    padding: 40px 400px 20px 50px;
    position: relative; }
    @media only screen and (max-width: 980px) {
      #home-coliving div {
        padding: 40px 360px 20px 30px; } }
    @media only screen and (max-width: 780px) {
      #home-coliving div {
        background-color: #fff;
        border: none;
        margin: 200px 0 0;
        padding: 20px 0 0 20px; } }
    #home-coliving div h2 {
      font-size: 1.375rem;
      font-weight: 400;
      letter-spacing: 0.05rem;
      line-height: 1.6;
      padding: 0 0 20px; }
      @media only screen and (max-width: 980px) {
        #home-coliving div h2 {
          font-size: 1.25rem; } }
      @media only screen and (max-width: 780px) {
        #home-coliving div h2 {
          font-size: 1.125rem;
          letter-spacing: 0; } }
    #home-coliving div figure {
      height: calc(100% - 80px);
      position: absolute;
      right: -40px;
      top: 40px;
      width: 400px; }
      @media only screen and (max-width: 980px) {
        #home-coliving div figure {
          right: -21px;
          width: 350px; } }
      @media only screen and (max-width: 780px) {
        #home-coliving div figure {
          height: 300px;
          right: auto;
          top: -200px;
          left: -21px;
          width: 100%;
          z-index: -1; } }
      #home-coliving div figure img {
        height: 100%;
        object-fit: cover;
        width: 100%; }

/* ---------- instagram ---------- */
#home-instagram {
  background-image: url("../img/illust/04.svg");
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 50px; }
  @media only screen and (max-width: 780px) {
    #home-instagram {
      background-size: 80px auto;
      padding-top: 35px; } }
  #home-instagram > div {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0 60px; }
    @media only screen and (max-width: 1280px) {
      #home-instagram > div {
        gap: 0 40px; } }
    @media only screen and (max-width: 980px) {
      #home-instagram > div {
        gap: 10px 30px; } }
    @media only screen and (max-width: 780px) {
      #home-instagram > div {
        grid-template-columns: 1fr; } }
    #home-instagram > div section {
      padding: 0 0 20px; }
      #home-instagram > div section h3 {
        line-height: 1;
        padding: 0 25px 20px;
        text-align: center; }
        #home-instagram > div section h3 em {
          display: block;
          font-size: 0.875rem;
          font-style: normal;
          line-height: 1.4;
          padding: 10px 0 0; }
      #home-instagram > div section div {
        position: relative; }
        #home-instagram > div section div a {
          height: 100%;
          left: 0;
          position: absolute;
          top: 0;
          width: 100%;
          z-index: 999; }

/* ---------- room ---------- */
#hostel-room {
  margin-bottom: 20px; }
  #hostel-room > p {
    font-size: 0.9375rem;
    line-height: 2;
    position: relative;
    text-align: center; }
    @media only screen and (max-width: 980px) {
      #hostel-room > p {
        font-size: 0.875rem;
        padding: 0 0 40px;
        text-align: left; }
        #hostel-room > p br {
          display: none; } }
    @media only screen and (max-width: 780px) {
      #hostel-room > p {
        padding: 0 0 70px; } }
    #hostel-room > p::before, #hostel-room > p::after {
      background-position: 0 bottom;
      background-repeat: no-repeat;
      background-size: 100% auto;
      bottom: -40px;
      content: "";
      position: absolute; }
      @media only screen and (max-width: 780px) {
        #hostel-room > p::before, #hostel-room > p::after {
          bottom: -1px; } }
    #hostel-room > p::before {
      aspect-ratio: 166 / 36;
      background-image: url("../img/illust/06.svg");
      left: 20px;
      width: 166px; }
    #hostel-room > p::after {
      aspect-ratio: 98 / 84;
      background-image: url("../img/illust/05.svg");
      right: 20px;
      width: 100px; }
      @media only screen and (max-width: 780px) {
        #hostel-room > p::after {
          width: 70px; } }
  #hostel-room #mattress {
    align-items: center;
    background-color: #f5f5f5;
    border: #231815 1px solid;
    display: flex;
    gap: 15px 30px;
    padding: 20px;
    margin: 40px 0 0; }
    @media only screen and (max-width: 780px) {
      #hostel-room #mattress {
        flex-direction: column;
        margin: 0 0 20px;
        padding: 15px; } }
    #hostel-room #mattress div {
      align-items: center;
      display: flex;
      flex: 1;
      gap: 10px 30px; }
      @media only screen and (max-width: 780px) {
        #hostel-room #mattress div {
          align-items: flex-start;
          flex-direction: column; } }
      #hostel-room #mattress div img {
        width: 120px; }
        @media only screen and (max-width: 780px) {
          #hostel-room #mattress div img {
            width: 70px; } }
      #hostel-room #mattress div p {
        flex: 1;
        padding: 0; }
        @media only screen and (max-width: 780px) {
          #hostel-room #mattress div p {
            font-size: 0.75rem; } }
    #hostel-room #mattress > img {
      width: 180px;
      height: auto; }
  #hostel-room section {
    background-color: #F1EDED;
    display: flex;
    gap: 30px;
    margin: 40px 0 0;
    padding: 30px; }
    @media only screen and (max-width: 980px) {
      #hostel-room section {
        gap: 20px;
        padding: 20px 20px 30px; } }
    @media only screen and (max-width: 780px) {
      #hostel-room section {
        flex-direction: column;
        margin: 1px -20px 0;
        width: calc(100% + 40px); } }
    #hostel-room section div.detail {
      width: 45%; }
      @media only screen and (max-width: 780px) {
        #hostel-room section div.detail {
          order: 1;
          width: 100%; } }
      #hostel-room section div.detail h3 {
        border-bottom: #333 1px solid;
        font-size: 1.375rem;
        margin: 0 0 25px;
        padding: 15px 0 20px; }
        @media only screen and (max-width: 980px) {
          #hostel-room section div.detail h3 {
            font-size: 1.25rem; } }
        @media only screen and (max-width: 780px) {
          #hostel-room section div.detail h3 {
            font-size: 1.125rem;
            margin: 0 0 20px;
            padding: 10px 0 15px; } }
      #hostel-room section div.detail dl {
        display: flex;
        flex-wrap: wrap;
        font-size: 0.875rem;
        gap: 3px 20px;
        line-height: 1.8;
        padding: 20px 0; }
        @media only screen and (max-width: 780px) {
          #hostel-room section div.detail dl {
            padding: 15px 0; } }
        #hostel-room section div.detail dl div {
          display: flex; }
          #hostel-room section div.detail dl div dt::after {
            content: "："; }
      #hostel-room section div.detail p {
        padding-bottom: 0; }
        #hostel-room section div.detail p.more {
          padding: 5px 0; }
          @media only screen and (max-width: 980px) {
            #hostel-room section div.detail p.more {
              text-align: center; } }
    #hostel-room section div.slider {
      flex: 1; }
      #hostel-room section div.slider span {
        display: block;
        font-size: 0.875rem;
        padding: 10px 0 20px;
        text-align: center; }
      #hostel-room section div.slider .slider-thumbnail ul {
        display: flex;
        gap: 5px; }
        #hostel-room section div.slider .slider-thumbnail ul li {
          width: 100%; }
          #hostel-room section div.slider .slider-thumbnail ul li img {
            height: 80px;
            object-fit: cover;
            max-width: none;
            width: 100%; }

/* ---------- common ---------- */
#hostel-common > ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 40px;
  padding: 0 0 10px; }
  @media only screen and (max-width: 980px) {
    #hostel-common > ul {
      grid-template-columns: repeat(2, 1fr);
      gap: 30px; } }
  @media only screen and (max-width: 780px) {
    #hostel-common > ul {
      gap: 20px 15px; } }
  #hostel-common > ul > li h3 {
    font-size: 1.125rem;
    line-height: 1.5;
    padding: 20px 0 10px;
    text-align: center; }
    @media only screen and (max-width: 780px) {
      #hostel-common > ul > li h3 {
        font-size: 0.9375rem;
        padding: 15px 0 5px; } }
  #hostel-common > ul > li p,
  #hostel-common > ul > li ul.parallel {
    padding-bottom: 10px; }
    @media only screen and (max-width: 780px) {
      #hostel-common > ul > li p,
      #hostel-common > ul > li ul.parallel {
        font-size: 0.75rem;
        padding-bottom: 5px; } }

/* ---------- rules ---------- */
#hostel-rules {
  background-color: #F1EDED;
  padding: 100px 50px 50px;
  position: relative; }
  @media only screen and (max-width: 980px) {
    #hostel-rules {
      padding: 80px 30px 30px; } }
  @media only screen and (max-width: 780px) {
    #hostel-rules {
      padding: 60px 20px 10px; } }
  #hostel-rules > div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 70px;
    margin: 0 auto;
    max-width: 1600px; }
    @media only screen and (max-width: 1280px) {
      #hostel-rules > div {
        gap: 0 50px; } }
    @media only screen and (max-width: 980px) {
      #hostel-rules > div {
        gap: 0 30px; } }
    @media only screen and (max-width: 780px) {
      #hostel-rules > div {
        grid-template-columns: 1fr; } }
    #hostel-rules > div > div section {
      padding: 0 15px 30px; }
      #hostel-rules > div > div section h3 {
        background-color: #E2D7D7;
        font-size: 1rem;
        margin: 0 -15px 25px;
        padding: 10px 15px 8px; }
      #hostel-rules > div > div section ul.disc,
      #hostel-rules > div > div section ol.decimal {
        font-size: 0.875rem;
        line-height: 1.8;
        list-style: disc;
        margin: 0 0 0 19px;
        padding: 0 0 5px; }
        #hostel-rules > div > div section ul.disc li,
        #hostel-rules > div > div section ol.decimal li {
          padding: 0 0 5px; }
      #hostel-rules > div > div section ol.decimal {
        list-style: decimal; }
      #hostel-rules > div > div section p {
        padding: 0 0 10px; }
      #hostel-rules > div > div section span.note {
        display: inline-block;
        padding-left: 0.875rem;
        position: relative; }
        #hostel-rules > div > div section span.note::before {
          content: "※";
          left: 0;
          position: absolute;
          top: 0; }
      #hostel-rules > div > div section dl.rule div {
        padding: 0 0 20px; }
        #hostel-rules > div > div section dl.rule div:last-child {
          padding: 0; }
        #hostel-rules > div > div section dl.rule div dt {
          border-bottom: #231815 1px dotted;
          font-size: 1rem;
          font-weight: 700;
          line-height: 1.4;
          margin: 0 0 15px;
          padding: 0 0 10px; }
      #hostel-rules > div > div section dl.cancel {
        border-top: #E2D7D7 1px solid;
        margin: 10px 0 20px; }
        #hostel-rules > div > div section dl.cancel div {
          border-bottom: #E2D7D7 1px solid;
          display: flex;
          font-size: 0.9375rem;
          line-height: 1.4;
          padding: 15px 0 12px; }
          @media only screen and (max-width: 980px) {
            #hostel-rules > div > div section dl.cancel div {
              font-size: 0.875rem; } }
          #hostel-rules > div > div section dl.cancel div dt {
            font-weight: 600; }
          #hostel-rules > div > div section dl.cancel div dd {
            margin: 0 0 0 auto; }

/* ---------- summary ---------- */
#coworking-summary p {
  font-size: 1rem;
  line-height: 2;
  text-align: center; }
  @media only screen and (max-width: 780px) {
    #coworking-summary p {
      font-size: 0.875rem;
      padding: 0 0 10px;
      text-align: left; }
      #coworking-summary p br {
        display: none; } }
#coworking-summary ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  padding: 50px 0 20px;
  position: relative; }
  @media only screen and (max-width: 980px) {
    #coworking-summary ul {
      gap: 10px; } }
  @media only screen and (max-width: 780px) {
    #coworking-summary ul {
      padding: 30px 0 20px; } }
  #coworking-summary ul::before, #coworking-summary ul::after {
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: 100% auto;
    content: "";
    position: absolute; }
  #coworking-summary ul::before {
    aspect-ratio: 161 / 109;
    background-image: url("../img/illust/08.svg");
    left: 0;
    top: 0;
    width: 150px; }
    @media only screen and (max-width: 980px) {
      #coworking-summary ul::before {
        left: -30px; } }
    @media only screen and (max-width: 780px) {
      #coworking-summary ul::before {
        left: -20px;
        width: 30%; } }
  #coworking-summary ul::after {
    aspect-ratio: 160 / 101;
    background-image: url("../img/illust/07.svg");
    right: -40px;
    top: 10px;
    width: 140px; }
    @media only screen and (max-width: 980px) {
      #coworking-summary ul::after {
        right: -20px; } }
    @media only screen and (max-width: 780px) {
      #coworking-summary ul::after {
        right: -15px;
        top: 0;
        width: 30%; } }

/* ---------- service ---------- */
#coworking-service {
  background-image: url("../img/illust/09.svg");
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 75px; }
  #coworking-service > dl {
    padding: 0 0 50px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px 50px; }
    @media only screen and (max-width: 780px) {
      #coworking-service > dl {
        grid-template-columns: repeat(1, 1fr); } }
    #coworking-service > dl > div > dt {
      font-size: 1.375rem;
      font-weight: 600;
      letter-spacing: 0.1rem;
      padding: 0 0 20px;
      text-align: center; }
      #coworking-service > dl > div > dt span {
        display: block;
        font-size: 0.875rem;
        letter-spacing: 0.05rem;
        padding: 0 0 15px; }
    #coworking-service > dl > div > dd dl.fee {
      padding: 0 0 10px; }
      #coworking-service > dl > div > dd dl.fee div {
        align-items: center;
        background-color: #F5F1F1;
        display: flex;
        margin: 0 0 10px;
        padding: 20px 30px 17px; }
        #coworking-service > dl > div > dd dl.fee div dt {
          font-size: 1.125rem;
          padding: 2px 0 0;
          white-space: nowrap; }
        #coworking-service > dl > div > dd dl.fee div dd {
          color: #D90000;
          font-size: 1.5rem;
          margin: 0 0 0 auto;
          text-align: right; }
          #coworking-service > dl > div > dd dl.fee div dd span {
            color: #231815;
            font-size: 1rem;
            padding: 0 0 0 3px; }
            #coworking-service > dl > div > dd dl.fee div dd span.limit {
              display: block;
              font-size: 0.75rem;
              line-height: 1.5;
              padding: 8px 0 0; }
    #coworking-service > dl > div > dd p.available {
      font-size: 0.9375rem;
      font-weight: 500;
      text-align: center; }
    #coworking-service > dl > div > dd .option p.heading {
      border-bottom: #ccc 1px dotted;
      font-size: 0.9375rem;
      font-weight: 700;
      padding: 0 0 5px; }
    #coworking-service > dl > div > dd .option dl {
      display: grid;
      gap: 0 30px;
      grid-template-columns: repeat(2, 1fr);
      padding: 0 0 20px; }
      @media only screen and (max-width: 980px) {
        #coworking-service > dl > div > dd .option dl {
          grid-template-columns: repeat(1, 1fr); } }
      #coworking-service > dl > div > dd .option dl div {
        border-bottom: #ccc 1px dotted;
        display: flex;
        font-size: 0.875rem;
        line-height: 1.6;
        padding: 10px 0 7px; }
        #coworking-service > dl > div > dd .option dl div dd {
          margin: 0 0 0 auto; }
    #coworking-service > dl > div > dd .flow p.heading {
      align-items: center;
      display: flex;
      gap: 0 15px;
      font-size: 0.9375rem;
      font-weight: 700;
      padding: 10px 0; }
      #coworking-service > dl > div > dd .flow p.heading::before, #coworking-service > dl > div > dd .flow p.heading::after {
        background-color: #ddd;
        content: "";
        flex: 1;
        height: 1px; }
    #coworking-service > dl > div > dd .flow ol {
      padding: 0 0 5px; }
      #coworking-service > dl > div > dd .flow ol li {
        font-size: 0.875rem;
        line-height: 1.8;
        padding: 0 0 15px 25px;
        position: relative;
        z-index: 0; }
        #coworking-service > dl > div > dd .flow ol li::before {
          background-color: #fff;
          border: #231815 1px solid;
          border-radius: 9999px;
          content: attr(data-num);
          font-size: 0.75rem;
          left: 0;
          line-height: 14px;
          padding: 1px 0 0 1px;
          position: absolute;
          text-align: center;
          top: 3px;
          width: 17px;
          z-index: 10; }
        #coworking-service > dl > div > dd .flow ol li::after {
          background-color: #231815;
          content: "";
          height: 100%;
          left: 8px;
          position: absolute;
          top: 3px;
          width: 1px;
          z-index: 1; }
        #coworking-service > dl > div > dd .flow ol li:last-child::after {
          display: none; }
        #coworking-service > dl > div > dd .flow ol li em {
          display: inline-block;
          font-style: normal;
          font-size: 0.9375rem;
          font-weight: 700;
          padding: 0 0 5px; }
        #coworking-service > dl > div > dd .flow ol li a {
          border: #231815 1px solid;
          border-radius: 9999px;
          display: inline-block;
          margin: 5px 0;
          text-decoration: none;
          padding: 2px 15px 0; }

#coworking-service_workspace {
  border: #eee 1px solid;
  max-width: 720px;
  margin: 0 auto;
  padding: 40px; }
  @media only screen and (max-width: 780px) {
    #coworking-service_workspace {
      padding: 20px; } }
  #coworking-service_workspace h3 {
    font-family: "Montserrat";
    font-size: 1.5rem; }
    @media only screen and (max-width: 780px) {
      #coworking-service_workspace h3 {
        font-size: 1.25rem; } }
  #coworking-service_workspace dl {
    border-top: #eee 1px solid;
    padding: 0 0 20px; }
    #coworking-service_workspace dl div {
      justify-content: space-between;
      border-bottom: #eee 1px solid;
      display: flex;
      font-size: 0.9375rem;
      line-height: 1.8;
      padding: 10px 0; }
      @media only screen and (max-width: 780px) {
        #coworking-service_workspace dl div {
          flex-direction: column;
          font-size: 0.875rem; } }
      #coworking-service_workspace dl div dd {
        text-align: right; }
  #coworking-service_workspace ul {
    display: flex; }

/* ---------- partners ---------- */
#coworking-partners {
  max-width: 640px;
  text-align: center; }
  #coworking-partners p {
    margin: -10px 0 0;
    padding: 0 0 10px; }
    #coworking-partners p br {
      display: none; }
      @media only screen and (max-width: 780px) {
        #coworking-partners p br {
          display: block; } }
  #coworking-partners ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr); }
    @media only screen and (max-width: 780px) {
      #coworking-partners ul {
        grid-template-columns: repeat(2, 1fr); } }

/* ---------- payment ---------- */
#coworking-payment p {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: -10px 0 0;
  padding: 0 0 30px;
  text-align: center; }
#coworking-payment ul {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(6, 1fr);
  margin: 0 auto 20px;
  max-width: 590px; }
  @media only screen and (max-width: 780px) {
    #coworking-payment ul {
      gap: 5px; } }
  #coworking-payment ul li img {
    width: 100%; }

/* ---------- equipment ---------- */
ul.equipment {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
  padding: 0 0 25px; }
  @media only screen and (max-width: 780px) {
    ul.equipment {
      gap: 15px 10px;
      grid-template-columns: repeat(3, 1fr); } }
  ul.equipment li {
    font-size: 0.875rem;
    line-height: 1.2;
    text-align: center; }
    @media only screen and (max-width: 780px) {
      ul.equipment li {
        font-size: 0.8125rem; } }
    ul.equipment li span {
      border: #eee 1px solid;
      display: block;
      margin: 0 0 10px;
      padding: 15px 0; }
      ul.equipment li span img {
        height: 50px; }
        @media only screen and (max-width: 780px) {
          ul.equipment li span img {
            height: 40px; } }

/* ---------- customer ---------- */
#coworking-customer {
  max-width: 1000px; }
  #coworking-customer ul {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(4, 1fr);
    text-align: center;
    margin: -10px 0 0; }
    @media only screen and (max-width: 780px) {
      #coworking-customer ul {
        grid-template-columns: repeat(2, 1fr); } }
    #coworking-customer ul li img {
      max-width: none;
      width: 100%; }

/* ---------- floor ---------- */
#coworking-floor figure {
  margin: 0 auto;
  max-width: 640px;
  padding: 0 0 20px; }
  #takamatsu #coworking-floor figure {
    max-width: 720px; }
  #coworking-floor figure img {
    width: 100%; }

/* ---------- googlemap ---------- */
#access-googlemap iframe {
  width: 100%;
  height: 400px; }
#access-googlemap h3 {
  font-size: 1.375rem;
  line-height: 1.6;
  padding: 30px 0 5px;
  text-align: center; }
  @media only screen and (max-width: 980px) {
    #access-googlemap h3 {
      font-size: 1.125rem; } }
  #access-googlemap h3 em {
    display: block;
    font-size: 0.9375rem;
    font-style: normal;
    padding: 0 0 5px; }
    @media only screen and (max-width: 980px) {
      #access-googlemap h3 em {
        font-size: 0.875rem; } }
#access-googlemap p.address {
  font-size: 1rem;
  padding: 0;
  text-align: center; }
  @media only screen and (max-width: 980px) {
    #access-googlemap p.address {
      font-size: 0.875rem; } }
#access-googlemap p.more {
  padding: 20px 0;
  text-align: center; }

/* ---------- express ---------- */
#access-express {
  max-width: 1100px; }
  #access-express > div {
    border: #eee 1px solid;
    padding: 35px 30px 10px; }
    @media only screen and (max-width: 980px) {
      #access-express > div {
        padding: 30px 20px 5px; } }
    @media only screen and (max-width: 780px) {
      #access-express > div {
        border-left: none;
        border-right: none;
        margin: 0 -20px;
        padding: 50px 20px 25px; } }
    #access-express > div h3 {
      font-size: 1rem;
      letter-spacing: 0.1rem;
      padding: 0 0 20px;
      text-align: center; }
      #access-express > div h3 img {
        display: block;
        margin: 0 auto 15px; }
    #access-express > div dl {
      display: grid;
      gap: 10px;
      padding: 0 0 20px; }
      #takamatsu #access-express > div dl {
        grid-auto-flow: column; }
      #kotohira #access-express > div dl {
        grid-template-columns: repeat(4, 1fr); }
      @media only screen and (max-width: 780px) {
        #access-express > div dl {
          grid-auto-flow: dense !important;
          grid-template-columns: repeat(2, 1fr) !important; } }
      #access-express > div dl div {
        border: #004098 1px solid;
        text-align: center;
        width: 100%; }
        @media only screen and (max-width: 980px) {
          #access-express > div dl div {
            font-size: 0.875rem; } }
        #access-express > div dl div dt {
          background-color: #004098;
          color: #fff;
          padding: 12px 0; }
        #access-express > div dl div dd {
          padding: 15px 0; }

/* ---------- means ---------- */
#access-means {
  margin: 0 auto;
  max-width: 1000px; }
  #access-means h3 {
    background-position: center 0;
    background-repeat: no-repeat;
    background-size: 36px auto;
    border-bottom: #231815 dotted 1px;
    color: #231815;
    font-size: 1.5rem;
    font-weight: 500;
    margin: 0 0 30px;
    padding: 45px 0 15px;
    text-align: center; }
    @media only screen and (max-width: 780px) {
      #access-means h3 {
        font-size: 1.125rem;
        margin: 0; } }
  #access-means #train h3 {
    background-image: url("../img/icon/access/train.svg"); }
  @media only screen and (max-width: 780px) {
    #takamatsu #access-means #train dl div dd ol li:nth-child(5) ul li:nth-child(2),
    #takamatsu #access-means #train dl div dd ol li:nth-child(6) ul li:nth-child(2) {
      display: flex; } }
  #access-means #car h3 {
    background-image: url("../img/icon/access/car.svg"); }
  #access-means #airplane h3 {
    background-image: url("../img/icon/access/plane.svg"); }
  @media only screen and (max-width: 780px) {
    #access-means dl div {
      border-bottom: #231815 dotted 1px; } }
  #access-means dl div dt {
    display: none; }
    @media only screen and (max-width: 780px) {
      #access-means dl div dt {
        display: block;
        font-weight: 600;
        letter-spacing: 0.1rem;
        padding: 15px 0;
        position: relative;
        text-align: center; }
        #access-means dl div dt::before {
          background-color: #231815;
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
          clip-path: polygon(0 0, 100% 0%, 50% 100%);
          content: "";
          height: 10px;
          right: 10px;
          position: absolute;
          top: calc(50% - 5px);
          transition: background-color .3s, transform .3s;
          width: 12px; }
        #access-means dl div dt.open::before {
          transform: rotate(180deg); } }
  #access-means dl div dd {
    text-align: center; }
    @media only screen and (max-width: 780px) {
      #access-means dl div dd {
        display: none; } }
    #access-means dl div dd ol li {
      position: relative;
      z-index: 0; }
      #access-means dl div dd ol li::before {
        background-color: #ddd;
        content: "";
        height: 100%;
        left: calc(50% - 2px);
        position: absolute;
        top: 0;
        width: 4px;
        z-index: -1; }
      #access-means dl div dd ol li:has(ul)::before {
        display: none; }
      #access-means dl div dd ol li em {
        background-color: #231815;
        color: #fff;
        display: block;
        font-style: normal;
        padding: 15px 0; }
      #access-means dl div dd ol li span {
        background-color: #fff;
        display: inline-block;
        margin: 30px 0;
        padding: 10px 0; }
      #access-means dl div dd ol li ul {
        display: flex;
        gap: 0 40px; }
        #access-means dl div dd ol li ul li {
          display: flex;
          justify-content: center;
          flex-direction: column;
          width: 100%; }
          @media only screen and (max-width: 780px) {
            #access-means dl div dd ol li ul li:nth-child(2) {
              display: none; } }
    #access-means dl div dd ol > li:last-child {
      background-color: #F1EDED;
      padding: 20px 0; }
      #access-means dl div dd ol > li:last-child::before {
        display: none; }
  #access-means dl div:nth-child(2) {
    display: none; }
    @media only screen and (max-width: 780px) {
      #access-means dl div:nth-child(2) {
        display: block; } }
  #access-means p.caution {
    margin-top: 30px; }
    @media only screen and (max-width: 780px) {
      #access-means p.caution {
        margin-top: 20px; } }

/* ---------- activity ---------- */
#activity {
  background-color: #f3f9ff;
  padding: 0 50px 20px; }
  @media only screen and (max-width: 980px) {
    #activity {
      padding: 0 30px 20px; } }
  @media only screen and (max-width: 780px) {
    #activity {
      padding: 0 20px 20px; } }
  #activity .catch_l {
    padding: 100px 0 80px; }
    @media only screen and (max-width: 980px) {
      #activity .catch_l {
        padding: 80px 0 50px; } }
    @media only screen and (max-width: 780px) {
      #activity .catch_l {
        padding: 60px 0 40px; } }
  #activity .activity {
    margin: 0 auto 80px;
    max-width: 1280px; }
    @media only screen and (max-width: 980px) {
      #activity .activity {
        margin: 0 0 60px; } }
    @media only screen and (max-width: 780px) {
      #activity .activity {
        margin: 0 0 40px; } }
    #activity .activity > div {
      background-repeat: no-repeat;
      background-size: 100%;
      color: #fff;
      height: 350px;
      position: relative;
      z-index: 0; }
      @media only screen and (max-width: 980px) {
        #activity .activity > div {
          height: 300px; } }
      @media only screen and (max-width: 780px) {
        #activity .activity > div {
          height: 200px; } }
      #activity .activity > div div {
        align-items: flex-start;
        background-color: rgba(0, 0, 0, 0.8);
        cursor: pointer;
        display: flex;
        flex-direction: column;
        padding: 45px 40px 40px;
        height: 100%;
        width: 50%; }
        @media only screen and (max-width: 980px) {
          #activity .activity > div div {
            padding: 35px 30px 30px; } }
        @media only screen and (max-width: 780px) {
          #activity .activity > div div {
            padding: 20px 15px 15px;
            width: 60%; } }
        #activity .activity > div div h2 {
          font-size: 1.125rem;
          font-weight: 500;
          letter-spacing: 0.1rem;
          padding: 0 0 25px; }
          @media only screen and (max-width: 980px) {
            #activity .activity > div div h2 {
              padding: 0 0 15px; } }
          @media only screen and (max-width: 780px) {
            #activity .activity > div div h2 {
              font-size: 0.875rem; } }
          #activity .activity > div div h2 span {
            display: block;
            font-family: "Montserrat";
            font-size: 2rem;
            font-weight: 300;
            letter-spacing: 0.05rem;
            padding: 0 0 15px; }
            @media only screen and (max-width: 980px) {
              #activity .activity > div div h2 span {
                font-size: 1.75rem;
                letter-spacing: 0; } }
            @media only screen and (max-width: 780px) {
              #activity .activity > div div h2 span {
                font-size: 1.5rem;
                line-height: 1.1;
                padding: 0 0 5px; } }
        #activity .activity > div div p.text {
          font-weight: 400;
          line-height: 2; }
          @media only screen and (max-width: 780px) {
            #activity .activity > div div p.text {
              display: none; } }
        #activity .activity > div div p.open {
          border: #fff 1px solid;
          border-radius: 3px;
          display: inline-block;
          margin: auto 0 0;
          padding: 5px 15px; }
          @media only screen and (max-width: 780px) {
            #activity .activity > div div p.open {
              font-size: 0.75rem;
              padding: 3px 10px; } }
    #activity .activity > section {
      background-color: #fff;
      display: none; }
      #activity .activity > section .banner {
        align-items: center;
        display: flex;
        gap: 20px 30px;
        margin: 0 auto;
        max-width: 1000px;
        padding: 50px 20px; }
        @media only screen and (max-width: 780px) {
          #activity .activity > section .banner {
            flex-direction: column;
            padding: 40px 20px; } }
        #activity .activity > section .banner h3 {
          border: #eee 1px solid;
          padding: 20px;
          max-width: 280px; }
          #activity .activity > section .banner h3 img {
            width: 100%; }
        #activity .activity > section .banner p {
          flex: 1;
          padding: 0; }
    #activity .activity#ebike > div {
      background-image: url("../img/kotohira/activity/bike_2.jpg");
      background-position: 0 center; }
    #activity .activity#ebike > section #ebike-price {
      margin: 0 auto;
      max-width: 1000px;
      padding: 60px 20px 70px; }
      @media only screen and (max-width: 980px) {
        #activity .activity#ebike > section #ebike-price {
          padding: 50px 20px 60px; } }
      @media only screen and (max-width: 780px) {
        #activity .activity#ebike > section #ebike-price {
          padding: 40px 20px; } }
      #activity .activity#ebike > section #ebike-price dl {
        display: grid;
        gap: 0 30px;
        grid-template-columns: repeat(3, 1fr); }
        @media only screen and (max-width: 980px) {
          #activity .activity#ebike > section #ebike-price dl {
            gap: 20px; } }
        @media only screen and (max-width: 780px) {
          #activity .activity#ebike > section #ebike-price dl {
            grid-template-columns: repeat(1, 1fr); } }
        #activity .activity#ebike > section #ebike-price dl div {
          box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.15);
          padding: 5px; }
          #activity .activity#ebike > section #ebike-price dl div dt {
            background-color: #f3f9ff;
            font-weight: 600;
            padding: 20px 0;
            text-align: center; }
          #activity .activity#ebike > section #ebike-price dl div dd {
            padding: 20px 0;
            text-align: center; }
            #activity .activity#ebike > section #ebike-price dl div dd p {
              padding: 0; }
    #activity .activity#ebike > section ul.picture {
      display: grid;
      grid-template-columns: repeat(4, 1fr); }
      @media only screen and (max-width: 980px) {
        #activity .activity#ebike > section ul.picture {
          grid-template-columns: repeat(2, 1fr); } }
    #activity .activity#rentcar > div {
      background-image: url("../img/kotohira/activity/d0cb99a38c8171edc8121ca8ea6a6382.webp");
      background-position: right center; }
      #activity .activity#rentcar > div div {
        margin: 0 0 0 auto; }
    #activity .activity#rentcar #rentcar-price > div {
      margin: 0 auto;
      max-width: 1000px;
      padding: 60px 20px 40px; }
      @media only screen and (max-width: 980px) {
        #activity .activity#rentcar #rentcar-price > div {
          padding: 50px 20px 30px; } }
      @media only screen and (max-width: 780px) {
        #activity .activity#rentcar #rentcar-price > div {
          padding: 40px 20px 20px; } }
      #activity .activity#rentcar #rentcar-price > div h3 {
        font-size: 1.25rem;
        font-weight: 400;
        letter-spacing: 0.05rem;
        padding: 0 0 30px;
        text-align: center; }
      #activity .activity#rentcar #rentcar-price > div table {
        border-collapse: collapse;
        margin: 0 0 25px;
        width: 100%; }
        #activity .activity#rentcar #rentcar-price > div table th {
          background-color: #fafafa; }
        #activity .activity#rentcar #rentcar-price > div table th, #activity .activity#rentcar #rentcar-price > div table td {
          border: #eee 1px solid;
          font-size: 0.9375rem;
          line-height: 1.6;
          padding: 15px 0;
          text-align: center; }
          @media only screen and (max-width: 780px) {
            #activity .activity#rentcar #rentcar-price > div table th, #activity .activity#rentcar #rentcar-price > div table td {
              font-size: 0.75rem; } }
    #activity .activity#mobi > div {
      background-image: url("../img/kotohira/activity/mobi_1.jpg");
      background-position: 0 bottom; }
    #activity .activity#experience > div {
      background-image: url("../img/kotohira/activity/P0001B6C0C.jpg");
      background-position: right center; }
      #activity .activity#experience > div div {
        margin: 0 0 0 auto; }
    #activity .activity#experience > section #experience-map {
      align-items: center;
      justify-content: center;
      background-color: #eee;
      display: flex;
      height: 500px;
      padding: 0; }
    #activity .activity#experience > section dl {
      border-left: #eee 1px solid;
      border-top: #eee 1px solid;
      display: grid;
      grid-template-columns: repeat(4, 1fr); }
      @media only screen and (max-width: 980px) {
        #activity .activity#experience > section dl {
          grid-template-columns: repeat(3, 1fr); } }
      @media only screen and (max-width: 780px) {
        #activity .activity#experience > section dl {
          grid-template-columns: repeat(2, 1fr); } }
      #activity .activity#experience > section dl div {
        border-bottom: #eee 1px solid;
        border-right: #eee 1px solid;
        padding: 20px; }
        @media only screen and (max-width: 780px) {
          #activity .activity#experience > section dl div {
            padding: 15px; } }
        #activity .activity#experience > section dl div dt {
          font-weight: 600;
          line-height: 1.8; }
          @media only screen and (max-width: 780px) {
            #activity .activity#experience > section dl div dt {
              font-size: 0.875rem; } }
        #activity .activity#experience > section dl div dd ul {
          list-style: disc;
          font-size: 0.875rem;
          line-height: 1.6;
          margin: 0 0 0 20px; }
          @media only screen and (max-width: 780px) {
            #activity .activity#experience > section dl div dd ul {
              font-size: 0.75rem;
              margin: 0 0 0 16px; } }
          #activity .activity#experience > section dl div dd ul li {
            margin: 3px 0 0; }

/* ---------- kotoripark ---------- */
#kotoripark p.more {
  padding-top: 40px;
  text-align: center; }
  @media only screen and (max-width: 780px) {
    #kotoripark p.more {
      padding-top: 35px; } }

#kotoripark-summary h2 {
  text-align: center; }
  #kotoripark-summary h2 img {
    max-width: 320px; }
    @media only screen and (max-width: 780px) {
      #kotoripark-summary h2 img {
        max-width: 240px; } }
  #kotoripark-summary h2 span {
    color: #231815;
    display: block;
    font-size: 1.125rem;
    font-weight: 400;
    letter-spacing: 0.1rem;
    padding: 35px 0 5px; }
    @media only screen and (max-width: 780px) {
      #kotoripark-summary h2 span {
        font-size: 0.875rem;
        font-weight: 500;
        letter-spacing: 0.05rem;
        padding: 20px 0 0; } }
#kotoripark-summary p {
  padding: 0 0 30px; }
  #kotoripark-summary p.text {
    line-height: 2;
    text-align: center; }
    @media only screen and (max-width: 780px) {
      #kotoripark-summary p.text {
        text-align: left; }
        #kotoripark-summary p.text br {
          display: none; } }

#kotoripark-slider {
  margin: -50px 0 80px;
  overflow: hidden; }
  @media only screen and (max-width: 980px) {
    #kotoripark-slider {
      margin: -30px 0 80px; } }
  @media only screen and (max-width: 780px) {
    #kotoripark-slider {
      margin: -30px 0 60px; } }
  #kotoripark-slider .bx-viewport {
    width: 100vw !important; }

#kotoripark-price {
  max-width: 640px; }
  #kotoripark-price h3 {
    padding: 0 0 30px;
    text-align: center; }
  #kotoripark-price .price {
    align-items: center;
    background-color: #F5F1F1;
    display: flex;
    font-size: 1.125rem;
    margin: 0 0 25px;
    padding: 20px 30px; }
    #kotoripark-price .price em {
      color: #D90000;
      font-size: 1.5rem;
      font-style: normal;
      margin: 0 0 0 auto;
      text-align: right; }
  #kotoripark-price dl {
    font-size: 1rem;
    padding: 5px 0 10px;
    text-align: center; }
    #kotoripark-price dl div {
      align-items: center;
      display: flex;
      gap: 0 15px;
      padding: 0 0 15px; }
      #kotoripark-price dl div dt {
        background-color: #231815;
        box-sizing: content-box;
        border-radius: 3px;
        color: #fff;
        font-size: 0.875rem;
        padding: 5px;
        width: 7rem; }

/* ---------- coliving ---------- */
#coliving-longstay {
  max-width: 1000px; }
  #coliving-longstay > p {
    font-size: 0.9375rem;
    line-height: 2;
    text-align: center; }
    @media only screen and (max-width: 780px) {
      #coliving-longstay > p {
        font-size: 0.875rem;
        text-align: left; } }
  #coliving-longstay dl {
    padding: 10px 0 15px;
    display: grid;
    gap: 0 30px;
    grid-template-columns: repeat(3, 1fr); }
    @media only screen and (max-width: 780px) {
      #coliving-longstay dl {
        padding: 5px 0 10px;
        grid-template-columns: repeat(1, 1fr); } }
    #coliving-longstay dl div {
      border: #231815 1px solid;
      display: grid;
      grid-template-rows: subgrid;
      grid-row: span 2;
      margin: 0 0 15px; }
      #coliving-longstay dl div dt {
        background-color: #231815;
        color: #fff;
        letter-spacing: 0.1rem;
        padding: 17px 0;
        text-align: center; }
        #coliving-longstay dl div dt span {
          font-size: 1.25rem; }
      #coliving-longstay dl div dd {
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #231815;
        gap: 5px 0;
        letter-spacing: 0.1rem;
        line-height: 1.4;
        padding: 20px 0;
        text-align: center; }
        #coliving-longstay dl div dd span {
          display: block;
          font-size: 1.25rem; }
  #coliving-longstay .reservation {
    display: grid;
    gap: 10px 20px;
    grid-template-columns: repeat(2, 1fr);
    padding: 20px 0; }
    #coliving-longstay .reservation li a {
      border: #D90000 1px solid;
      border-radius: 2px;
      color: #D90000;
      display: block;
      font-weight: 600;
      padding: 11px 0;
      text-align: center;
      text-decoration: none; }
      @media only screen and (max-width: 780px) {
        #coliving-longstay .reservation li a {
          font-size: 0.875rem; } }

#coliving-program > p {
  text-align: center; }
  @media only screen and (max-width: 780px) {
    #coliving-program > p {
      text-align: left; }
      #coliving-program > p br {
        display: none; } }
#coliving-program ul {
  display: grid;
  gap: 30px 40px;
  grid-template-columns: repeat(3, 1fr);
  padding: 20px 0; }
  @media only screen and (max-width: 780px) {
    #coliving-program ul {
      grid-template-columns: repeat(1, 1fr); } }
  #coliving-program ul li {
    display: flex;
    flex-direction: column; }
    #coliving-program ul li p.image {
      margin: 0 0 20px;
      padding: 0;
      position: relative; }
      #coliving-program ul li p.image span {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%; }
    #coliving-program ul li.otetsutabi p.image span img {
      background-color: #fff;
      border: #FF580F 2px solid;
      padding: 8px 10px;
      width: 50%; }
    #coliving-program ul li p.more {
      margin: auto 0 0; }
      #coliving-program ul li p.more a {
        text-align: center;
        width: 100%; }

/* ---------- inquiry ---------- */
#inquiry .section {
  max-width: 980px; }
  #inquiry .section table {
    border-collapse: collapse;
    border-spacing: 0;
    border-top: #eee 1px solid;
    margin: 20px 0 25px;
    width: 100%; }
    @media only screen and (max-width: 780px) {
      #inquiry .section table {
        margin: 20px -20px 25px;
        width: calc(100% + 40px); } }
    #inquiry .section table tr {
      border-bottom: #eee 1px solid; }
      #inquiry .section table tr.error {
        background-color: rgba(217, 0, 0, 0.05); }
      @media only screen and (max-width: 780px) {
        #inquiry .section table tr.emailadd td p {
          flex-wrap: wrap; } }
      #inquiry .section table tr th {
        font-size: 0.95rem;
        line-height: 1.8;
        text-align: left;
        padding: 25px 20px;
        vertical-align: middle;
        white-space: nowrap;
        width: 240px; }
        @media only screen and (max-width: 780px) {
          #inquiry .section table tr th {
            display: block;
            padding: 20px 20px 5px;
            width: 100%; }
            #inquiry .section table tr th br {
              display: none; } }
        #inquiry .section table tr th span {
          background-color: #D90000;
          border-radius: 2px;
          color: #fff;
          font-size: 0.8125rem;
          font-weight: 400;
          float: right;
          line-height: 1;
          margin: 2px 0 0;
          padding: 6px 5px; }
          @media only screen and (max-width: 780px) {
            #inquiry .section table tr th span {
              margin: 0; } }
      #inquiry .section table tr td {
        padding: 25px 20px;
        vertical-align: middle; }
        @media only screen and (max-width: 780px) {
          #inquiry .section table tr td {
            display: block;
            padding: 0 20px 20px;
            width: 100%; } }
        #inquiry .section table tr td p {
          align-items: center;
          display: flex;
          gap: 5px 10px;
          padding: 0;
          white-space: nowrap; }
          #inquiry .section table tr td p em {
            font-style: normal; }
  #inquiry .section input[type="text"],
  #inquiry .section input[type="tel"],
  #inquiry .section input[type="email"],
  #inquiry .section textarea,
  #inquiry .section select {
    background: #fff;
    border: #999 1px solid;
    border-radius: 3px;
    font-size: 1.125rem;
    line-height: 1.6;
    outline: none;
    padding: 7px 10px;
    width: 100%; }
    @media only screen and (max-width: 780px) {
      #inquiry .section input[type="text"],
      #inquiry .section input[type="tel"],
      #inquiry .section input[type="email"],
      #inquiry .section textarea,
      #inquiry .section select {
        font-size: 1rem; } }
  #inquiry .section input[type="tel"] {
    width: 200px; }
  #inquiry .section .name input[type="text"],
  #inquiry .section .company input[type="text"] {
    width: 400px; }
    @media only screen and (max-width: 780px) {
      #inquiry .section .name input[type="text"],
      #inquiry .section .company input[type="text"] {
        width: 100%; } }
  #inquiry .section textarea {
    height: 150px; }
  #inquiry .section select {
    width: auto; }
  #inquiry .section .privacy {
    padding: 20px 0;
    text-align: center; }
    @media only screen and (max-width: 780px) {
      #inquiry .section .privacy {
        margin: 0 0 0 1.5rem;
        text-align: left;
        text-indent: -1.5rem; } }
  #inquiry .section .button {
    display: flex;
    gap: 0 20px;
    justify-content: center;
    padding: 20px 0 25px; }
    #inquiry .section .button button {
      background-color: #231815;
      border-radius: 9999px;
      color: #fff;
      font-size: 1.125rem;
      line-height: 1;
      letter-spacing: 0.1rem;
      padding: 15px 25px;
      text-decoration: none; }
      @media only screen and (max-width: 780px) {
        #inquiry .section .button button {
          font-size: 0.9375rem;
          padding: 13px 15px; } }
      #inquiry .section .button button:disabled {
        background-color: #999;
        cursor: default; }
      #inquiry .section .button button.back {
        background-color: #999; }

/* ---------- terms ---------- */
#terms .section,
#privacy .section {
  max-width: 980px; }
  #terms .section dl div,
  #privacy .section dl div {
    padding: 0 0 30px; }
    #terms .section dl div:last-child,
    #privacy .section dl div:last-child {
      padding: 0; }
    #terms .section dl div dt,
    #privacy .section dl div dt {
      font-size: 1.125rem;
      font-weight: 700;
      line-height: 1.7;
      padding: 0 0 15px; }
      @media only screen and (max-width: 780px) {
        #terms .section dl div dt,
        #privacy .section dl div dt {
          font-size: 1rem; } }
  #terms .section ul.decimal,
  #terms .section ul.iroha,
  #privacy .section ul.decimal,
  #privacy .section ul.iroha {
    font-size: 0.875rem;
    line-height: 1.8;
    list-style: decimal;
    margin: 0 0 0 20px;
    padding: 0 0 10px; }
    #terms .section ul.decimal li,
    #terms .section ul.iroha li,
    #privacy .section ul.decimal li,
    #privacy .section ul.iroha li {
      padding: 0 0 10px; }
      #terms .section ul.decimal li ul,
      #terms .section ul.iroha li ul,
      #privacy .section ul.decimal li ul,
      #privacy .section ul.iroha li ul {
        padding: 0; }
        #terms .section ul.decimal li ul li,
        #terms .section ul.iroha li ul li,
        #privacy .section ul.decimal li ul li,
        #privacy .section ul.iroha li ul li {
          padding: 0; }
  #terms .section ul.iroha,
  #privacy .section ul.iroha {
    list-style: katakana-iroha;
    margin: 0 0 0 32px; }
  #terms .section ul.abc,
  #privacy .section ul.abc {
    list-style: lower-alpha;
    margin: 0 0 0 17px; }

/* ---------- event ---------- */
#event-list {
  display: flex;
  flex-direction: column; }
  #event-list .title_l {
    order: 0; }
  #event-list .event-list {
    order: 2; }
  #event-list .event-category {
    margin: -15px 0 0;
    order: 1;
    padding: 0 0 40px; }
    #event-list .event-category dl div {
      display: block; }
      #event-list .event-category dl div dt {
        display: none; }
      @media only screen and (max-width: 780px) {
        #event-list .event-category dl div dd ul {
          display: flex; } }
      #event-list .event-category dl div dd ul li a {
        font-size: 0.9375rem;
        padding: 10px 30px 8px; }
  #event-list .event-archive {
    order: 3;
    padding: 80px 0 20px; }

#event-post {
  max-width: 960px; }
  #event-post .article {
    border-bottom: #231815 1px dotted;
    margin: 0 0 80px;
    padding: 0 0 20px; }
    @media only screen and (max-width: 780px) {
      #event-post .article {
        margin: 0 0 50px; } }
    #event-post .article header {
      display: block;
      text-align: center; }
      #event-post .article header .category {
        display: inline-block;
        margin: 0 0 20px; }
      #event-post .article header h2 {
        font-size: 1.5rem; }
      #event-post .article header div {
        display: flex;
        flex-wrap: wrap;
        gap: 0 20px;
        justify-content: center;
        padding: 20px 0 0; }
        #event-post .article header div p.date,
        #event-post .article header div p.time {
          background-image: url("../img/icon/event/calendar.svg");
          background-position: 0 5px;
          background-repeat: no-repeat;
          background-size: 15px auto;
          font-size: 1rem;
          font-weight: 500;
          padding: 0 0 0 22px; }
        #event-post .article header div p.time {
          background-image: url("../img/icon/event/clock.svg"); }

.event-list ul {
  display: grid;
  gap: 40px;
  grid-template-columns: repeat(3, 1fr); }
  @media only screen and (max-width: 980px) {
    .event-list ul {
      gap: 30px; } }
  @media only screen and (max-width: 780px) {
    .event-list ul {
      gap: 15px;
      grid-template-columns: repeat(1, 1fr); } }
  .event-list ul li {
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.1); }
    @media only screen and (max-width: 780px) {
      #home-event .event-list ul li:nth-child(3) {
        display: none; } }
    .event-list ul li a {
      display: flex;
      flex-direction: column;
      height: 100%;
      position: relative;
      text-decoration: none; }
      .event-list ul li a p.thumbnail {
        background-color: #fafafa;
        height: 180px;
        padding: 0; }
        @media only screen and (max-width: 780px) {
          .event-list ul li a p.thumbnail {
            height: 240px; } }
        .event-list ul li a p.thumbnail img {
          height: 100%;
          max-width: none;
          object-fit: cover;
          width: 100%; }
      .event-list ul li a p.title {
        font-size: 1.125rem;
        font-weight: 600;
        line-height: 1.6;
        padding: 20px 20px 10px; }
        @media only screen and (max-width: 780px) {
          .event-list ul li a p.title {
            font-size: 0.9375rem;
            padding: 20px 15px 5px;
            text-align: left; } }
      .event-list ul li a p.category {
        background-color: #231815;
        color: #fff;
        font-size: 1rem;
        font-weight: 500;
        left: 0;
        letter-spacing: 0.1rem;
        padding: 5px 10px 2px;
        position: absolute;
        top: 0; }
        @media only screen and (max-width: 780px) {
          .event-list ul li a p.category {
            font-size: 0.875rem;
            padding: 3px 10px 1px; } }
      .event-list ul li a p.excerpt {
        font-size: 0.8125rem;
        line-height: 1.5;
        padding: 0 20px 15px; }
        @media only screen and (max-width: 780px) {
          .event-list ul li a p.excerpt {
            font-size: 0.75rem;
            padding: 0 15px 10px; } }
      .event-list ul li a div {
        display: flex;
        flex-wrap: wrap;
        gap: 0 20px;
        margin: auto 0 0;
        padding: 0 20px 20px; }
        @media only screen and (max-width: 780px) {
          .event-list ul li a div {
            padding: 0 15px 15px; } }
        .event-list ul li a div p.date,
        .event-list ul li a div p.time {
          background-image: url("../img/icon/event/calendar.svg");
          background-position: 0 5px;
          background-repeat: no-repeat;
          background-size: 14px auto;
          font-size: 0.9375rem;
          font-weight: 500;
          padding: 0 0 0 20px; }
          @media only screen and (max-width: 780px) {
            .event-list ul li a div p.date,
            .event-list ul li a div p.time {
              background-position: 0 4px;
              background-size: 10px auto;
              font-size: 0.75rem;
              padding: 0 0 0 16px; } }
        .event-list ul li a div p.time {
          background-image: url("../img/icon/event/clock.svg"); }

.event-category,
.event-archive {
  padding: 0 0 20px; }
  @media only screen and (max-width: 780px) {
    .event-category,
    .event-archive {
      padding: 20px 0 20px; } }
  .event-category dl div,
  .event-archive dl div {
    align-items: center;
    display: flex;
    gap: 15px; }
    @media only screen and (max-width: 780px) {
      .event-category dl div,
      .event-archive dl div {
        align-items: stretch;
        flex-direction: column; } }
    .event-category dl div dt,
    .event-archive dl div dt {
      font-family: "Montserrat";
      font-size: 1rem;
      font-weight: 600;
      letter-spacing: 0.05rem; }
    .event-category dl div dd ul,
    .event-archive dl div dd ul {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      justify-content: center; }
      @media only screen and (max-width: 780px) {
        .event-category dl div dd ul,
        .event-archive dl div dd ul {
          display: grid;
          grid-template-columns: repeat(3, 1fr); } }
      .event-category dl div dd ul li a,
      .event-archive dl div dd ul li a {
        border: #231815 1px solid;
        border-radius: 9999px;
        color: #231815;
        display: block;
        font-size: 0.875rem;
        padding: 10px 15px;
        text-align: center;
        text-decoration: none;
        transition: background-color .3s, color .3s; }
        @media (hover) {
          .event-category dl div dd ul li a:hover,
          .event-archive dl div dd ul li a:hover {
            background-color: #231815;
            color: #fff; } }

/* ---------- article ---------- */
@media only screen and (max-width: 780px) {
  .article {
    border-bottom: #231815 1px dotted;
    margin: 0 0 40px;
    padding: 0 0 10px; } }
.article header {
  align-items: center;
  border-bottom: #231815 1px dotted;
  display: flex;
  flex-wrap: wrap;
  gap: 15px 20px;
  margin: 0 0 40px;
  padding: 0 0 30px; }
  @media only screen and (max-width: 780px) {
    .article header {
      margin: 0 0 40px;
      padding: 0 0 20px; } }
  .article header .date {
    font-family: "Montserrat";
    font-size: 1.125rem;
    font-weight: 600;
    padding: 0; }
  .article header .category {
    border: #231815 1px solid;
    border-radius: 2px;
    color: #231815;
    line-height: 1;
    font-size: 0.9375rem;
    padding: 5px; }
  .article header h2 {
    color: #231815;
    font-size: 1.375rem;
    line-height: 1.3;
    width: 100%; }
.article div p {
  padding: 0 0 30px; }

/* ---------- information ---------- */
.information {
  display: flex;
  gap: 0 70px; }
  @media only screen and (max-width: 980px) {
    .information {
      gap: 30px 40px; } }
  @media only screen and (max-width: 780px) {
    .information {
      flex-direction: column; } }
  .information .information-main {
    flex: 1; }
    .information .information-main > h2 {
      border-left: #231815 3px solid;
      font-size: 1.25rem;
      letter-spacing: 0.1rem;
      line-height: 1;
      margin: 0 0 30px;
      padding: 3px 0 0 17px; }
      @media only screen and (max-width: 780px) {
        .information .information-main > h2 {
          font-size: 1rem;
          padding: 2px 0 0 10px; } }
    .information .information-main .information-list {
      border-top: #eee 1px solid;
      padding: 0 0 20px; }
      @media only screen and (max-width: 780px) {
        .information .information-main .information-list {
          margin: 0 -20px; } }
      .information .information-main .information-list li {
        border-bottom: #eee 1px solid; }
        .information .information-main .information-list li a {
          align-items: center;
          display: flex;
          gap: 7px 20px;
          padding: 20px 20px 18px;
          text-decoration: none; }
          @media only screen and (max-width: 1280px) {
            .information .information-main .information-list li a {
              flex-wrap: wrap; } }
          .information .information-main .information-list li a p.date {
            font-family: "Montserrat";
            font-size: 0.9375rem;
            font-weight: 600;
            padding: 0;
            white-space: nowrap; }
          .information .information-main .information-list li a p.category {
            border: #231815 1px solid;
            border-radius: 2px;
            line-height: 1;
            font-size: 0.8125rem;
            padding: 5px 0;
            text-align: center;
            width: 120px;
            white-space: nowrap; }
          .information .information-main .information-list li a p.title {
            font-size: 0.9375rem;
            flex: 1;
            padding: 2px 0 0; }
            @media only screen and (max-width: 1280px) {
              .information .information-main .information-list li a p.title {
                flex: none;
                width: 100%; } }
  .information .information-side {
    width: 300px; }
    @media only screen and (max-width: 980px) {
      .information .information-side {
        width: 200px; } }
    @media only screen and (max-width: 780px) {
      .information .information-side {
        width: 100%; } }
    .information .information-side dl div dt {
      font-family: "Montserrat";
      font-size: 1.125rem;
      font-weight: 600;
      letter-spacing: 0.05rem;
      padding: 0 0 15px; }
      @media only screen and (max-width: 780px) {
        .information .information-side dl div dt {
          font-size: 1rem; } }
    .information .information-side dl div dd ul {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px; }
      @media only screen and (max-width: 980px) {
        .information .information-side dl div dd ul {
          grid-template-columns: 1fr; } }
      @media only screen and (max-width: 780px) {
        .information .information-side dl div dd ul {
          grid-template-columns: repeat(2, 1fr); } }
      .information .information-side dl div dd ul li a {
        border: #231815 1px solid;
        border-radius: 9999px;
        color: #231815;
        display: block;
        font-size: 0.9375rem;
        padding: 12px 0;
        text-align: center;
        text-decoration: none;
        transition: background-color .3s, color .3s; }
        @media only screen and (max-width: 780px) {
          .information .information-side dl div dd ul li a {
            font-size: 0.875rem;
            padding: 10px 0; } }
        @media (hover) {
          .information .information-side dl div dd ul li a:hover {
            background-color: #231815;
            color: #fff; } }
    .information .information-side dl div.archive {
      padding: 50px 0 20px; }
      @media only screen and (max-width: 780px) {
        .information .information-side dl div.archive {
          padding: 40px 0 20px; }
          .information .information-side dl div.archive dd ul {
            grid-template-columns: repeat(3, 1fr); } }

/* ---------- faq ---------- */
@media only screen and (max-width: 780px) {
  #faq {
    padding-left: 0;
    padding-right: 0; } }
#faq .faq:last-child {
  border-bottom: #eee 1px solid;
  margin-bottom: 20px; }
#faq .faq h2 {
  border-bottom: #fff 1px solid;
  border-top: #eee 1px solid;
  cursor: pointer;
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 40px 20px 40px 45px;
  position: relative;
  transition: background-color .3s, color .3s; }
  @media only screen and (max-width: 780px) {
    #faq .faq h2 {
      font-size: 1.125rem;
      padding: 25px 20px 25px 40px; } }
  #faq .faq h2::before {
    background-color: #231815;
    box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.1);
    clip-path: polygon(0 0, 100% 0%, 50% 100%);
    content: "";
    height: 10px;
    left: 20px;
    position: absolute;
    top: calc(50% - 5px);
    transition: background-color .3s, transform .3s;
    width: 12px; }
  #faq .faq h2.open {
    background-color: #231815;
    color: #fff; }
    #faq .faq h2.open::before {
      background-color: #fff;
      transform: rotate(180deg); }
#faq .faq dl {
  display: none; }
  #faq .faq dl div {
    padding: 0 0 1px; }
    #faq .faq dl div dt {
      background-color: rgba(226, 215, 215, 0.35);
      cursor: pointer;
      font-size: 1.125rem;
      line-height: 1.5;
      padding: 30px 20px 30px 45px;
      position: relative; }
      @media only screen and (max-width: 780px) {
        #faq .faq dl div dt {
          font-size: 1rem;
          padding: 25px 20px 25px 40px; } }
      #faq .faq dl div dt::before {
        content: "Q";
        font-family: "Montserrat";
        font-size: 1.25rem;
        font-weight: 600;
        left: 20px;
        position: absolute;
        top: 25px; }
        @media only screen and (max-width: 780px) {
          #faq .faq dl div dt::before {
            font-size: 1rem;
            top: 23px; } }
    #faq .faq dl div dd {
      background-color: #fafafa;
      display: none;
      padding: 30px 20px 10px 45px; }
      @media only screen and (max-width: 780px) {
        #faq .faq dl div dd {
          padding: 25px 20px 5px; } }
      #faq .faq dl div dd > div > * {
        font-size: 0.875rem;
        line-height: 1.8;
        padding: 0 0 15px; }