/*===========================================
  目次
  -   CSS変数
  -   基本設定
  -   ヘッダー
  -   フッター
  -   汎用パーツ
  -   Story
  -   Service
  -   Home
  -   Contact
  -   Company
  -   Community
  -   ブロックエディタ（ブロックアイコン）
  -   ブロックエディタ
  -   レスポンシブ（SP）
  -   レスポンシブ（PC）
  -   レスポンシブ（その他）
  -   レスポンシブ（SP）: Story
  -   レスポンシブ（SP）: Service
  -   レスポンシブ（SP）: Contact
  -   レスポンシブ（SP）: Company
  -   レスポンシブ（SP）: Community
===========================================*/

/*===========================================
  CSS変数
===========================================*/

/* Color */
:root {
  --color-text: #111111;
  --color-text-subtle: #545454;
  --color-text-light: #a2a5a5;
  --color-text-superlight: #b4b4b4;
  --color-text-white: white;
  --color-bg-main: white;
  --color-bg-accent: #f2f9f8;
  --color-attention: #a00000;
  --color-bg-subtle: #ebefef;
  --color-accent: #00a088;
  --color-subaccent: #315fd5;
  --color-subtle: #d0d0d0;
  --color-border: #d7eae8;
  --color-border-subtle: #c2c2c2;
  --color-border-light: #d5d5d5;

  /* Font Family */
  --font-main: 'Noto Sans JP', sans-serif;
  --font-accent: 'Shippori Mincho', serif;
  --font-en: 'Libre Baskerville', serif;

  /* Global Margin */
  --mg-side: 10vw;
  --mg-side-sp: 20px;
}


/*===========================================
  基本設定
===========================================*/

/* ウェブフォント */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Libre+Baskerville:ital,wght@0,400;0,700;1,400&family=Shippori+Mincho&display=swap');

body {
  margin: 0;
  color: var(--color-text);
  font-family: var(--font-main);
}

#page {
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  width: 100vw;
  height: 100vh;

  .main_scroll {
    grid-row: 1 / 3;
    grid-column: 1;
    overflow-y: auto;
    overflow-x: hidden;
  }
}

main {
  position: relative;
}

h1 {
  margin: 0;
  font-family: var(--font-accent);
  font-weight: normal;
  font-size: 38px;
}

h2 {
  margin: 0;
  font-family: var(--font-accent);
  font-size: 28px;
}

h3 {
  line-height: 2;
  padding: 0 20px;
  font-family: var(--font-main);
  font-size: 18px;
}

h4 {
  font-size: 14px;
}

p {
  margin: 2em 0;
  padding: 0 20px;
  font-family: var(--font-main);
  font-size: 12px;
  line-height: 2;
  color: var(--color-text);
}

a {
  text-decoration: none;
  color: inherit;
}

a, button {
  &:hover, &:active {
    img {
      opacity: 0.5;
    }
  }
  img {
    transition: 0.5s;
    user-select: none;
  }
}

img {
  &.inversion {
    transform: rotate(180deg);
  }
}

form {
  .hidden {
    display: none;
  }
}

button, input[type=button], input[type=submit] {
  border: none;
  box-sizing: content-box;
  background: none;
  padding: 0;
  cursor: pointer;
  user-select: none;
}

ul, ol {
  margin: 0;
  padding: 0;
}

input[type=text], input[type=email], input[type=tel], textarea {
  border: none;
  background: var(--color-bg-subtle);
  font-family: var(--font-main);
}

textarea {
  resize: none;
  font-family: var(--font-main);
}

:where(figure) {
  margin: 0;
}

#page figure.icon .hidden {
  display: none;
}

.wp-block-image {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.wpcf7-list-item {
  margin: 0;
}

body.privacy-policy, body.error404 {
  h1 {
    margin: 4em 0 1em;
  }
  .entry-content, .page-content {
    h2 {
      margin-top: 2.5em;
      margin-left: var(--mg-side-sp);
      margin-right: var(--mg-side-sp);
      color: var(--color-text-subtle);
      font-size: 18px;
      font-family: var(--font-main);
    }
  }
}

body.error404 {
  h1 {
    font-size: 28px;
    color: var(--color-accent);
  }
}



/*===========================================
  ヘッダー
===========================================*/

header {
  grid-row: 1;
  grid-column: 1;
  position: relative;
  display: grid;
  align-items: center;
  width: calc(100% - var(--mg-side-sp) * 2);
  padding: 18px var(--mg-side-sp) 13px;
  grid-template-columns: 1fr auto auto auto;
  gap: 0 8px;
  z-index: 10;
  transition: 0.5s;

  &.hidden {
    margin-top: -60px;
    opacity: 0;
    transition: 0.3s;
  }

  .header-ttl {
    grid-column: 1;
    justify-self: start;
    transition: 0.5s;
    h2 {
      display: inline-block;
      font-size: 20px;
      font-family: var(--font-en);
    }
  }

  #primary-menu {
    display: flex;
    margin-right: 10px;
    justify-content: end;
    font-size: 14px;
    gap: 4%;
    a {
      transition: 0.5s;
    }
  }
  
  .contact-btn {
    grid-column: 2;
    transition: 0.3s;
  }
  
  .toggle_menu {
    width: 40px;
    height: 18px;
    margin-left: 8px;
    margin-bottom: 2px;

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

body:not(.home) header, header.opaque {
  --color: var(--color-text);

  .header-ttl {
    color: var(--color);
    &:hover {
      color: var(--color-accent);
    }
  }

  #primary-menu {
    color: var(--color);
    a:hover, a:active {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }
  
  .contact-btn {
    color: var(--color);
    border-color: var(--color);
    &:hover, &:active {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }

  background: linear-gradient(180deg,
    white 10%,
    rgba(255, 255, 255, 0.95),
  );
  img.white {
    display: none;
  }
}

body:not(.home) .main_scroll {
  padding-top: 60px;
}

body.home header:not(.opaque) {
  --color: var(--color-text-white);

  .header-ttl {
    color: var(--color);
    &:hover {
      color: var(--color-accent);
    }
  }

  #primary-menu {
    color: var(--color);
    a:hover, a:active {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }
  
  .contact-btn {
    color: var(--color);
    border-color: var(--color);
    &:hover, &:active {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }

  text-shadow: 0 0 0.5em rgba(0, 0, 0, 50%);
  img:not(.white) {
    display: none;
  }
}



/*===========================================
  フッター
===========================================*/

.site-footer {
  margin: 80px 20px;

  .colophon {
    display: grid;
    grid-template-columns: 30% 1fr;
    align-items: center;
    gap: 10px;

    .logo {
      width: 100%;
    }
  
    .company_info {
      margin-top: 5px;
      p {
        margin: 0;
        padding-right: 0;
        line-height: 1.75;
        letter-spacing: 0.3px;
      }
    }
  }

  .footer_menu {
    margin-top: 30px;
  }

  .contact-btn {
    margin-top: 31px;
    margin-bottom: 16px;
    padding: 12px 40px 10px;
    font-size: 14px;
    border-color: var(--color-border-subtle);
    transition: 0.5s;
    &:hover, &:active {
      color: var(--color-accent);
      border-color: var(--color-accent);
    }
  }

  .sub {
    display: flex;
    margin-top: 9px;
    .menu {
      font-size: 14px;
    }
    .sns_nav {
      margin-left: 26px;
      .icon {
        width: 18px;
        height: 18px;
      }
    }
  }

  .copyright {
    margin-top: 30px;
    padding: 0;
    font-family: var(--font-en);
    font-size: 12px;
    color: var(--color-text-superlight);
  }
}



/*===========================================
  汎用パーツ
===========================================*/

.no-break {
  display: inline-block;
  overflow-wrap: break-word;
}

.menu {
  padding: 0;
  list-style: none;
  line-height: 2.35;
  font-family: var(--font-en);
  font-size: 17px;

  li a {
    display: block;
    transition: 0.5s;
    &:hover, &:active {
      color: var(--color-accent);
    }
  }
}

.stdパーツn, input.std-btn, .page_index li {
  position: relative;
  display: inline-block;
  padding: 5px 14px;
  font-family: var(--font-en);
  border: 2px solid var(--color-text);
  border-radius: 999px;
  font-size: 12px;
  transition: 0.5s;

  .icon {
    padding: 0;
    position: absolute;
    top: calc(50% - 3.9px);
    width: 9px;
    height: 7.8px;
    object-fit: contain;
  }

  &.green {
    border-color: var(--color-accent);
    background: var(--color-accent);
    color: var(--color-text-white);
    font-family: var(--font-main);
    &:hover {
      background-color: var(--color-bg-main);
      color: var(--color-accent);
    }
  }

  &.white-green {
    border-color: var(--color-accent);
    color: var(--color-accent);
    &:hover {
      background: var(--color-accent);
      color: var(--color-text-white);
      .icon {
        opacity: 1;
        &:not(.white) {
          opacity: 0;
        }
      }
    }
    &:not(:hover) .icon.white {
      opacity: 0;
    }
  }
}

.std-link {
  color: var(--color-accent);
  text-decoration: underline;
  transition: 0.25s;
  &:hover, &:active {
    opacity: 0.5;
  }
  &:visited {
    color: var(--color-text-light);
  }
}

.icon {
  width: 16px;
  height: 16px;
  padding: 4px;
  user-select: none;

  img {
    width: 100%;
    height: 100%;
    display: block;
  }
}

.page_header {
  margin: 82px var(--mg-side) 95px;
  & > .wp-block-group__inner-container {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
  }
  .wp-block-roomoon-s-heading {
    flex-direction: row;
    align-items: center;
    .en {
      margin-right: 5.7%;
      font-size: 84px;
    }
    .jp {
      margin-top: 1.3em;
      letter-spacing: 0;
      font-size: 14px;
    }
  }
}

.breadcrumbs {
  margin-bottom: 35px;
  font-family: monospace;
  font-size: 18px;
  font-stretch: 50%;
  .crumb {
    display: inline-block;
    font-family: var(--font-en);
    font-size: 12px;
    &:not(:first-child) {
      margin-left: -0.5em;
    }
    &:not(:last-child) {
      margin-right: -0.5em;
    }
  }
}

.page_top_image {
  padding-top: 150px;
  height: 85vh;
  background-repeat: no-repeat;
  background-size: 65%;
}

.page_index {
  display: flex;
  margin: 81px var(--mg-side);
  padding: 0;
  gap: 0.9em;
  li {
    color: var(--color-accent);
    border-color: var(--color-accent);
    font-size: 14px;
    font-family: var(--font-main);
    &:hover {
      background: var(--color-accent);
      color: var(--color-text-white);
    }
    a {
      display: block;
      padding: 1em 2em;
    }
  }
}

.required_marker {
  display: inline-block;
  margin: 0 1.1em;
  padding: 0.4em 0.6em 0.45em 0.5em;
  border-radius: 999px;
  background: var(--color-attention);
  color: var(--color-text-white);
  font-size: 0.75em;
  line-height: 1;
}

.custom_radio {
  display: flex;
  flex-direction: column;
  label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  input[type=radio] {
    display: none;
  }
  input[type=radio] + .custom_radio_btn {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-bg-subtle);
    &:before {
      content: "";
      position: absolute;
      top: 21%;
      left: 21%;
      width: 58%;
      aspect-ratio: 1;
      border-radius: 50%;
      background-color: var(--color-subtle);
    }
  }
  input[type=radio]:checked + .custom_radio_btn {
    &:before {
      background-color: var(--color-accent);
      animation: appear_pop 0.25s;
    }
  }
}

.custom_checks {
  display: flex;
  flex-direction: column;
  label {
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  input[type=checkbox] {
    display: none;
  }
  input[type=checkbox] + .custom_checkbox {
    position: relative;
    width: 1em;
    height: 1em;
    border: 1px solid var(--color-subtle);
    background-color: var(--color-bg-subtle);
    &:before {
      content: "";
      position: absolute;
      top: calc(17% + 0.5px);
      left: calc(17% + 0.5px);
      width: 66%;
      aspect-ratio: 1;
      background-color: var(--color-accent);
      transition: 0.25s;
      transform: scale(0);
      opacity: 0;
    }
  }
  input[type=checkbox]:checked + .custom_checkbox {
    &:before {
      transform: scale(1);
      opacity: 1;
    }
  }
}

.note {
  color: var(--color-text-subtle);
  font-size: smaller;
}

@keyframes appear_pop {
  0% { transform: scale(0.4); opacity: 0.7; }
  100% { transform: scale(1); opacity: 1; }
}

.wp-block-roomoon-s-main-link {
  display: inline-flex;
  align-items: center;
  margin-right: -12px;
  padding: 0 20px;
  justify-self: start;
  color: var(--color-accent);
  font-family: var(--font-main);
  font-size: 12.5px;
  cursor: pointer;
  .ttl {
    transition: 0.5s;
  }
  &:hover {
    .ttl {
      opacity: 0.5;
      transform: translateX(5px);
    }
    img {
      transform: scale(1.05);
      opacity: 1;
    }
  }
}

.wp-block-roomoon-s-heading {
  display: flex;
  padding: 20px 20px 0;
  flex-direction: column;
  .en {
    color: var(--color-accent);
    font-size: 40px;
    font-weight: normal;
    line-height: 1.4;
    font-family: var(--font-en);
  }
  .jp {
    font-family: var(--font-main);
    font-size: 11px;
    font-weight: normal;
  }
}

.wp-block-roomoon-s-card-link {
  display: grid;
  width: calc(100% - 40px);
  margin: 0 20px;
  padding: 16px 0;
  grid-template-columns: 45% 1fr auto;
  align-items: center;
  border-bottom: 2px solid var(--color-border);
  .thumbnail {
    width: 100%;
    aspect-ratio: 1.5;
    object-fit: cover;
  }
  .title-en {
    margin: 0;
    font-family: var(--font-en);
    font-size: 9px;
    color: var(--color-text-light);
  }
  .title {
    margin: 10px 0;
    font-weight: bold;
    line-height: 1.5;
    font-size: 12px;
    transition: 0.5s;
  }
  a {
    transition: 0.5s;
  }
  a:hover, a:active, a:hover + a, a:active + a {
    .title {
      color: var(--color-accent);
    }
    &.icon {
      transform: translateX(5px);
    }
    img {
      opacity: 1;
    }
  }
}

.wp-block-roomoon-s-card-info {
  flex: 0 0 62vw;
  padding: 20px 0px 20px 20px;
  display: grid;
  justify-content: start;
  .title-en {
    margin-bottom: 5px;
    padding: 0;
    font-family: var(--font-en);
    font-size: 9.5px;
  }
  .title {
    margin: 0;
    padding: 0;
    font-size: 12px;
  }
  .thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .description {
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0;
    ul {
      margin: 0 20px;
      li {
        color: var(--color-accent);
        font-size: 14px;
        line-height: 2.4;
      }
    }
  }
}

.wp-block-roomoon-s-store-link {
  margin: 20px;
  display: grid;
  grid-template-columns: 44.5% 1fr;
  align-items: center;

  .thumbnail {
    width: 100%;
    aspect-ratio: 16 / 10;
    height: auto;
    object-fit: cover;
  }
  .title {
    margin-bottom: 0;
    padding-left: 17px;
    font-size: 12px;
    letter-spacing: 0.5px;
    transition: color 0.25s;
  }
  .title-en {
    margin-top: 4px;
    margin-bottom: 9px;
    padding-left: 17px;
    font-size: 9px;
    font-family: var(--font-en);
    letter-spacing: 0.4px;
    color: var(--color-text-light);
    transition: color 0.25s;
  }
  .description {
    color: var(--color-text-subtle);
    font-size: 13px;
    transition: color 0.25s;
  }
  &:hover {
    .title, .title-en {
      color: var(--color-accent);
    }
    .description {
      color: var(--color-text-light);
    }
  }
}

.wp-block-roomoon-s-multi-image {
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.scroll_custom {
  &::-webkit-scrollbar {
    height: 1px;
  }
  &::-webkit-scrollbar-track {
    background: var(--color-bg-main);
    border-radius: 10px;
  }
  &::-webkit-scrollbar-thumb {
    background: var(--color-border);
  }
  &::-webkit-scrollbar-button {
    display: none;
  }
  &::-webkit-scrollbar-track-piece:start,
  &::-webkit-scrollbar-track-piece:end {
    background-color: transparent;
  }
}

.sns_nav {
  display: flex;
  align-items: center;
}


#sb_instagram {
  #sbi_images {
    margin: 20px auto 45px;
    width: calc((100% - var(--mg-side-sp) * 2));
  }
  .sbi_playbtn {
    opacity: 0.7;
  }
}

.toggle-navigation {
  position: absolute;
  display: grid;
  grid-template-columns: 1fr auto;
  top: 0;
  left: 0;
  width: calc(100% - 40px);
  height: calc(100vh - 40px);
  padding: 20px;
  background: rgba(255, 255, 255, 0.95);
  z-index: 20;
  transition: opacity 0.3s;
  &.hidden {
    opacity: 0;
    pointer-events: none;
  }
  .close_btn {
    margin: -20px -20px -20px 10px;
    padding: 20px;
    width: 30px;
    height: 30px;
  }
}



/*===========================================
  Story
===========================================*/

body.story {
  .page_header {
    margin-top: 130px;
    h1 {
      .en {
        font-size: 71px;
      }
    }
  }
  .page_top_image {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/story.png);
    background-size: 47%;
  }

  #story_main {
    padding-bottom: 116px;
    margin: 134px var(--mg-side) 0;
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/ellipse.png);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
    & > .wp-block-group__inner-container {
      display: grid;
      grid-template-columns: 50% 50%;
    }
    h2 {
      margin-top: 8px;
      font-size: 39px;
      font-weight: 400;
    }
    .story_body {
      p {
        margin: 0 0 2.3em 3em;
        line-height: 2.4;
        font-size: 16px;
      }
    }
  }

  #profile {
    margin: 0 var(--mg-side);
    h2 {
      display: flex;
      align-items: center;
      gap: 1.5em;
      font-size: 21px;
      font-family: var(--font-en);
      &::after {
        content: '';
        flex: 1;
        height: 3px;
        background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/dotted.svg);
        background-repeat: repeat-x;
        background-size: contain;
        background-position: 0%;
      }
    }
    .profile_main {
      & > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 50% 50%;
      }
    }
    .info {
      & > .wp-block-group__inner-container {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
      }
      .wp-block-roomoon-s-heading {
        display: grid;
        justify-content: start;
        align-items: center;
        gap: 2em;
        .jp {
          grid-row: 1;
          font-size: 18px;
        }
        .en {
          grid-column: 2;
          color: var(--color-text);
          font-size: 14px;
        }
      }
    }
  }
}



/*===========================================
  Service
===========================================*/

body.service {
  .page_header {
    margin-top: 137px;
    .wp-block-roomoon-s-heading {
      .en {
        font-size: 74px;
      }
    }
  }

  .page_top_image {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/service.png);
    background-size: 63%;
    background-position: 2% 0;
  }

  section {
    background-repeat: no-repeat;
    & > .wp-block-group__inner-container {
      display: grid;
      grid-template-columns: 50% 50%;
    }
    .info {
      margin: 53px 10px 40px var(--mg-side);
      h2 {
        font-family: var(--font-main);
        color: var(--color-accent);
      }
      h3 {
        margin-top: 1.7em;
        margin-bottom: 0;
        font-size: 16px;
      }
      p {
        margin: 0.9em 0 1.6em;
      }
      .wp-block-roomoon-s-main-link {
        margin-top: 3em;
      }
    }
  }

  #botany_painting {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/botany-painting.png);
    background-position: 7.5% 0%;
    .wp-block-image:nth-child(2) {
      margin: 74px 0 0 7.2vw;
      height: 445px;
    }
    .wp-block-image:nth-child(3) {
      margin-top: 42px;
      margin-bottom: -37px;
      width: 32.5vw;
      aspect-ratio: 2;
    }
    .wp-block-image:nth-child(4) {
      margin-top: -39px;
      margin-left: -3.5vw;
      width: 25vw;
      aspect-ratio: 2;
    }
  }

  #flower_school {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/flower-school.png);
    background-position: 60% 0%;
    .info {
      grid-column: 2;
      margin: 61px var(--mg-side) 65px 10px;
    }
    .wp-block-image:nth-child(2) {
      grid-row: 1;
      margin: 200px 135px 0 65px;
    }
  }

  #flower_decoration {
    margin-top: 100px;
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/flower-decoration.png);
    background-position: 10% 11%;
    .info {
      grid-row: 1 / 3;
      margin-top: 100px;
      .btns > .wp-block-group__inner-container {
        display: flex;
        gap: 0.5em;
        justify-content: space-around;
        .wp-block-roomoon-s-main-link {
          margin-top: 22px;
          gap: 0;
          img {
            margin-left: -3px;
          }
        }
      }
    }
    .wp-block-image:nth-child(2) {
      margin: 0 0 0 150px;
      height: 395px;
    }
    .wp-block-image:nth-child(3) {
      grid-column: 2;
      width: 24.5vw;
      aspect-ratio: 1.9;
      margin-top: 72px;
      margin-left: 32px;
    }
  }
}



/*===========================================
  Home
===========================================*/

.home, .home-draft {
  height: 100vh;

  .fv_video {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100vh;
    video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .fv {
    position: relative;
    display: grid;
    height: 100vh;
    align-items: end;
    color: var(--color-text-white);
    text-shadow: 0 0 0.5em rgba(0, 0, 0, 20%);

    h1 {
      margin-left: -8px;
      padding: 17px 8px;
      font-size: 40px;
    }

    p {
      margin: 0;
      line-height: 1.6;
      padding: 0 20px 42px;
      font-size: 10.5px;
      font-family: var(--font-en);
      letter-spacing: 0.2px;
      color: var(--color-text-white);
    }

    .scroll-indicator {
      writing-mode: vertical-lr;
      position: absolute;
      right: 5vw;
      bottom: 40px;
      font-family: var(--font-en);
      font-size: 10px;
      .line {
        position: relative;
        display: inline-block;
        height: 100px;
        width: 1px;
        margin-top: 1.5em;
        background-color: var(--color-text-white);
        animation: extend infinite linear 2s;
        transform-origin: 0% 0%;
        will-change: transform, opacity;
      }

      @keyframes extend {
        0% {
          transform: scaleY(0);
          opacity: 0;
        }
        50% {
          transform: scaleY(0);
          opacity: 0;
        }
        70% {
          transform: scaleY(1);
          opacity: 1;
        }
        90% {
          transform: scaleY(1);
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    }
  }

  .second_view {
    margin: 40px var(--mg-side-sp);
    h2 {
      margin-top: 5px;
      font-size: 18px;
      font-family: var(--font-en);
      font-weight: 400;
    }
  }

  #new_arrival {
    & > .wp-block-group__inner-container {
      display: grid;
      gap: 18px 6.1vw;
    }
    .store_gallery {
      position: relative;
      .splide__arrow {
        background-color: transparent;
        transition: opacity 150ms;
        &:hover {
          opacity: 0.5;
        }
      }
      &:after {
        content: '';
        position: absolute;
        pointer-events: none;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        background: linear-gradient(90deg, white , transparent 25%, transparent 75%, white);
      }
    }
  }

  #news {
    & > .wp-block-group__inner-container {
      display: grid;
      grid-template-columns: 1fr auto;
      align-items: start;
      gap: 18px;
    }
    .latest-news-navigation {
      display: flex;
      .icon {
        margin: -4px;
        width: 32px;
        height: auto;
        aspect-ratio: 1;
        &.hidden {
          visibility: hidden;
        }
      }
    }
    .latest-news {
      grid-column: 1 / 3;
      ul {
        list-style: none;
        li {
          border-bottom: 1px solid var(--color-border);
          &.current {
            .plus {
              display: none;
            }
          }
          &:not(.current) {
            .minus {
              display: none;
            }
            .news_detail {
              opacity: 0;
            }
          }
        }
        li > a {
          transition: 0.5s;
          &:hover, &:active {
            opacity: 0.7;
          }
        }
        li > a, li > div {
          display: grid;
          padding: 1em 0;
          grid-template-columns: 1fr auto;
          align-items: center;
          .date {
            margin: 0;
            padding: 0;
            font-family: var(--font-en);
            color: var(--color-text-superlight);
            font-size: 12px;
          }
          .ttl {
            grid-row: 2;
            margin: 0.5em 1em 0 0;
            padding: 0;
            font-size: 14px;
            line-height: 1.6;
            font-weight: normal;
          }
          .icon {
            grid-column: 2;
            grid-row: 1 / 3;
            aspect-ratio: 1;
            margin: -4px;
          }
        }
      }
      .news_detail {
        margin-bottom: 0.3em;
        transition: opacity 0.3s;
        &.hidden {
          display: none;
        }
        p {
          margin: 0;
          padding: 0;
          font-size: 14px;
          line-height: 2;
        }
        a {
          color: var(--color-subaccent);
        }
      }
    }
  }

  .story {
    margin-bottom: 50px;
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/ellipse.png);
    background-repeat: no-repeat;
    background-position: 50%;

    .story_content {
      padding-top: 45px;
      background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/story.png);
      background-repeat: no-repeat;
      background-position: 130% 0%;
      background-size: 80%;

      .x-mark {
        margin-left: 0;
        margin-right: 0;
      }
    }

    h2 {
      padding: 16px var(--mg-side-sp) 10px;
      font-weight: normal;
      ruby {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        rt {
          line-height: 0.4;
        }
      }
    }
    h3 {
      font-family: var(--font-accent);
      line-height: 1.5;
      font-weight: normal;
    }

    .wp-block-image {
      text-align: right;
      margin-top: 60px;
      margin-left: var(--mg-side-sp);
    }
  }

  .service {
    padding-top: 10px;
    padding-bottom: 50px;
    background: var(--color-bg-accent);

    .service_list {
      margin-bottom: 30px;
    }
  }

  .lesson {
    padding-top: 10px;
    h2 {
      margin-bottom: 0.7em;
    }
    .lesson_list {
      flex-direction: column;
      row-gap: 0;
    }
    .wp-block-roomoon-s-card-info {
      padding-right: var(--mg-side-sp);
    }
    .wp-block-roomoon-s-main-link {
      padding: 10px;
      justify-content: end;
      justify-self: end;
    }
  }

  .community_bg {
    padding-top: 30px;
    margin-bottom: 0;
  }

  .community_inner {
    margin: 0 20px;
    padding: 0 5px 22px;
    background: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/community_bg.jpg);
    background-size: cover;
    color: var(--color-text-white);

    h2 {
      margin-top: 0;
      margin-bottom: 40px;
      padding-top: 8px;
      .en {
        color: var(--color-text-white);
      }
      .jp {
        color: var(--color-text-white);
      }
    }
    h3 {
      font-weight: normal;
    }
    p {
      margin-top: 0;
      margin-left: 3px;
      margin-bottom: 20px;
      letter-spacing: 0.5px;
      color: var(--color-text-white);
    }
    .wp-block-image.size-full {
      margin: 20px 35px;
    }
    .wp-block-roomoon-s-main-link {
      color: var(--color-text-white);
    }
  }

  .store {
    margin-top: 35px;

    .store_list {
      margin-top: 40px;
      margin-bottom: 28px;
    }
  }

  .atelier {
    margin-top: 45px;
    margin-bottom: 77px;
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/ellipse.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    background-size: contain;

    .atelier_main {
      margin-right: 16%;
    }
    h2 {
      margin-top: 32px;
      margin-bottom: 29px;
    }
    .labo_logo {
      margin-left: var(--mg-side-sp);
      width: 96px;
      aspect-ratio: 375 / 365;
    }
    p {
      letter-spacing: 0.4px;
      line-height: 2.1;
    }
    .std-btn {
      margin-top: 10px;
      margin-left: 20px;
      padding: 13px 55px;
      .icon {
        right: 35px;
      }
    }
  }

  .instagram-icon {
    width: 40px;
    height: 40px;
    margin: 0 auto;
  }

  .closing_galary {
    gap: 0;
    height: 222px;
    display: flex;
    flex-wrap: nowrap;
    animation: autoScroll 30s linear infinite;
    figure {
      flex: 0 0 50vw;
      height: 100%;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    @keyframes autoScroll {
      0% { margin-left: 0% }
      100% { margin-left: -200% }
    }    
  }

  .x-mark {
    margin-left: -0.3em;
    margin-right: -0.3em;
  }
}



/*===========================================
  Contact
===========================================*/

body.contact, body.contact-confirm, body.contact-thankyou {
  --mg-side-contact: 14.9vw;

  h1 {
    margin: 25px var(--mg-side-contact);
    flex-direction: row;
    align-items: end;
    gap: 6%;
    .en {
      font-size: 75px;
      line-height: 1;
    }
    .jp {
      margin-bottom: 1.4em;
      letter-spacing: 0.07em;
    }
  }

  .content_header {
    margin: 110px var(--mg-side-contact) 32px;
    padding-bottom: 50px;
    border-bottom: 1px solid var(--color-border);
    p {
      margin: 0.6em 0;
    }
  }

  form {
    --gap-x: 6%;

    display: grid;
    margin: 60px var(--mg-side-contact);
    grid-template-columns: auto 1fr;
    gap: 1.85em 6%;
    p {
      margin: 0;
      & > label {
        display: block;
        margin: 1.64em 0;
      }
    }
    .custom_radio {
      .wpcf7-list-item {
        margin-bottom: 0.8em;
      }
    }
    .custom_radio_btn {
      margin-right: 0.9em;
    }
    input[type=text], input[type=email], input[type=tel], textarea {
      width: calc(100% - 6% - 2.2em);
      padding: 1.3em 2.2em;
      &::placeholder {
        color: var(--color-text-subtle);
      }
    }
    textarea {
      line-height: 1.8;
    }
    .custom_checkbox {
      margin-left: 0.1em;
      margin-right: 1.2em;
    }
    .acceptance {
      grid-column: 2;
      padding: 2em 2.6em;
      border: 1px solid var(--color-border);
      font-size: 15px;
      a {
        text-decoration: underline;
      }
    }
    .btns {
      margin-top: 0.6em;
      grid-column: 2;
      justify-self: center;
      input[type=submit], input[type=button] {
        padding: 1.4em 6.2vw;
        font-size: 14px;
        transition: 0.5s;
        font-family: var(--font-main);
        &:disabled {
          background: var(--color-bg-subtle);
          border-color: var(--color-bg-subtle);
        }
      }
      .wpcf7-spinner {
        position: absolute;
      }
    }
    .wpcf7-response-output {
      grid-column: 2;
    }
  }
}

body.contact-confirm {
  form {
    align-items: center;
    column-gap: 3em;
    & > :nth-child(2n) {
      color: var(--color-text-subtle);
    }
    .btns {
      display: flex;
      grid-column: 1 / 3;
      gap: 3em;
      .std-btn:hover {
        background-color: rgba(var(--color-accent), 0.5);
      }
    }
  }
}

.wpcf7 {
  form {
    &.init:not(.invalid):not(.unaccepted) .wpcf7-response-output {
      opacity: 0;
    }
    &.init .wpcf7-response-output {
      display: block;
    }
    &.invalid .wpcf7-response-output {
      color: var(--color-attention);
    }
    .wpcf7-response-output {
      justify-self: center;
      border-width: 0;
      font-size: 13px;
      transition: 1s;
    }
  }
}

.grecaptcha-badge {
  opacity: 0.3;
  box-shadow: none !important;
  transition: 1s !important;
  &:hover {
    opacity: 1;
  }
}



/*===========================================
  Company
===========================================*/

body.company {
  .page_header {
    margin-top: 90px;

    .wp-block-roomoon-s-heading {
      .en {
        font-size: 75px;
        letter-spacing: -0.01em;
        &::first-letter {
          font-size: inherit;
        }
      }
    }
  }

  .page_top_image {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/company.png);
  }

  section {
    margin: 90px var(--mg-side) 83px;
    & > .wp-block-group__inner-container {
      display: grid;
      grid-template-columns: 34% 1fr;
    }
    h2 {
      padding-top: 0;
      .jp {
        font-size: 14px;
      }
    }
  }

  #outline {
    h2 {
      padding-top: 29px;
      .en {
        font-size: 48px;
      }
      .jp {
        margin-top: 5px;
        font-size: 14px;
      }
    }
    .content_body {
      & > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 31% 1fr;
        & > * {
          margin: 0;
          padding: 2.4em 0;
          line-height: 1.5;
          border-bottom: 1px solid var(--color-border);
          font-size: 16px;
        }
        h4 {
          padding-left: 1.2em;
        }
      }
    }
  }

  #map {
    width: 100%;
    height: max(60vh, 320px);
  }

  #atelier {
    margin-top: 52px;
    & > .wp-block-group__inner-container {
      gap: 2.2%;
    }
    h2 {
      .en {
        font-size: 50px;
        letter-spacing: -1px;
      }
      .jp {
        margin-top: 3px;
      }
    }
    .content_header {
      padding-bottom: 1.5em;
      border-bottom: 1px solid var(--color-border);
      & > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: auto auto 1fr;
        align-items: center;
        gap: 0.8em;
      }
      figure {
        margin-left: -10px;
        width: 74px;
        height: auto;
        aspect-ratio: 365 / 355;
      }
      h3 {
        margin-right: 2.1em;
      }
    }
    .content_body {
      padding: 0.9em 0 3em;
      grid-column: 2;
      border-bottom: 1px solid var(--color-border);
      h4 {
        margin: 1.1em 0 0.6em;
      }
      p {
        margin: 0 0 0.34em;
      }
      .atelter_access {
        & > .wp-block-group__inner-container {
          display: grid;
          grid-template-columns: 1fr 44%;
          align-items: center;
          .map-btn {
            justify-self: start;
            padding: 1.2em 5em;
            .icon {
              right: 3.3em;
              width: 10px;
              height: auto;
            }
          }
        }
      }
      .sub-ttl {
        margin-right: 0.8em;
      }
    }
  }
}



/*===========================================
  Community
===========================================*/

body.community {
  .page_header {
    margin-top: 90px;

    .wp-block-roomoon-s-heading {
      .en {
        font-size: 75px;
        &::first-letter {
          font-size: inherit;
        }
      }
    }
  }

  .page_top_image {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/community.png);
    background-size: 100%;
  }

  .content_header {
    margin: 95px var(--mg-side) 70px;
    .en {
      font-size: 50px;
    }
    .jp {
      margin-top: 3px;
      font-size: 14px;
    }
  }

  .activities > .wp-block-group__inner-container {
    > :nth-child(2n - 1) section > .wp-block-group__inner-container {
      & > div.wp-block-group:not(.album) {
        grid-column: 2;
        grid-row: 1;
        padding-right: 9.8vw;
      }
      > figure, > .album {
        grid-column: 1;
        grid-row: 1;
      }
    }
    > :nth-child(2n) section > .wp-block-group__inner-container {
      > figure, > .album {
        grid-column: 2;
        grid-row: 1;
      }
      & > div.wp-block-group:not(.album) {
        grid-column: 1;
        grid-row: 1;
        padding-left: 9.8vw;
      }
    }
  }

  section {
    position: relative;
    &::before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      pointer-events: none;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      background-size: auto 20%;
    }
    & > .wp-block-group__inner-container {
      display: grid;
      grid-template-columns: 50% 50%;
      align-items: stretch;
      & > div.wp-block-group:not(.album) {
        padding: 9vw;
        align-self: center;
      }
      & > figure, & > .album {
        padding: 9.3vw 9.3vw;
        background: var(--color-bg-accent);
        aspect-ratio: 0.87;
      }
    }
    h2 {
      display: flex;
      margin-bottom: 2.3em;
      align-items: center;
      font-family: var(--font-main);
      &::before {
        content: '';
        margin-right: 0.5em;
        background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/section_list.svg);
        background-size: contain;
        background-repeat: no-repeat;
        display: block;
        height: 1em;
        aspect-ratio: 0.5;
      }
    }
    h3 {
      line-height: 1.8;
    }
    p:last-child {
      margin-bottom: 0;
    }
    .album {
      & > .wp-block-group__inner-container {
        display: grid;
        height: 100%;
        gap: 1.4vw;
      }
    }
  }

  #greening::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/greening.png);
    background-size: 5.5vw;
    background-position: 49.5% 50%;
  }

  #socialfirm::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/socialfirm.png);
    background-size: 4.4vw;
    background-position: 50.3% 45.5%;
  }

  #socialfirm {
    .heading-with-logo {
      margin-bottom: 2.3em;
      & > .wp-block-group__inner-container {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center;
      }
      h2 {
        margin: 0;
      }
      figure {
        width: 75px;
        height: 75px;
      }
    }
    .album {
      & > .wp-block-group__inner-container {
        grid-template-columns: calc(50% - 0.7vw) calc(50% - 0.7vw);
        & > :first-child {
          grid-column: 1 / 3;
        }
      }
    }
  }

  #assembly::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/assembly.png);
    background-size: 5.7vw;
    background-position: 49.6% 50%;
  }

  #continued::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/continued.png);
    background-size: 4.4vw;
    background-position: 50.2% 50.5%;
  }

  #sdgs::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/sgds.png);
    background-size: 4.1vw;
  }

  #kids_workshop::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/kids-workshop.png);
    background-size: 5.6vw;
    background-position: 49.8% 50%;
  }
}



/*===========================================
  ブロックエディタ（ブロックアイコン）
===========================================*/

.dashicons-link::before {
  content: "\f103";
}

.dashicons-card::before {
  content: "\f510";
}

.dashicons-heading::before {
  content: "\f10e";
}



/*===========================================
  ブロックエディタ
===========================================*/

.image-button, .components-button {
  img {
    width: 100%;
    height: 100%;
  }
}



/*===========================================
  レスポンシブ（SP）
===========================================*/

@media screen and (max-width: 767px) {

	p {
		font-size: 13px;
		line-height: 1.8;
	}

	.sns_nav {
		gap: 2px;
	}
	
  .wp-block-roomoon-s-heading {
		padding-top: 12px;
		.jp {
			padding-top: 1.5em;
			font-size: 12px;
		}
	}

	.page_header {
		margin: 75px 0 40px;
		.wp-block-roomoon-s-heading {
			margin: 0 0 43px;
			flex-direction: column;
			align-items: start;
			.en {
				font-size: 44px;
				letter-spacing: 0;
			}
			.jp {
				margin-top: 0.9em;
				padding-top: 0;
				letter-spacing: 0em;
				font-size: 12px;
			}
		}
	}

	.page_top_image {
		padding-top: 73px;
		background-size: auto 105px;
	}

	.page_index {
		margin: 60px var(--mg-side-sp) 55px;
		flex-direction: column;
		align-items: start;
	}

	.wp-block-roomoon-s-main-link {
		font-size: 13px;
		gap: 0.4em;
		img {
			width: 84px;
			height: auto;
			aspect-ratio: 1;
		}
	}

	.wp-block-roomoon-s-card-info {
		.thumbnail {
			height: auto;
		}
	}

	.only_pc {
		display: none !important;
	}

	.home, .home-draft {
		.fv_video {
			height: 80vh;
		}
		.fv {
			height: 80vh;
		}
		#new_arrival {
			margin-bottom: 45px;
			.store_gallery {
				ul {
					display: flex;
					gap: 20px;
					> li {
						flex: 1;
					}
				}
				&:after {
					content: none;
				}
			}
		}
		.lesson {
			& > .wp-block-group__inner-container {
				display: grid;
			}
			.wp-block-roomoon-s-main-link {
				margin-right: calc(var(--mg-side-sp) - 10px);
				padding-right: 0;
				justify-self: end;
			}
		}
		.story {
			background-position: 50% 10%;
			background-size: 110% auto;
		}
		.story_content {
			p {
				font-size: 14px;
			}
		}
		.community {
			.community_bg {
				padding-top: 40px;
				height: 37vh;
			}
			.community_inner {
				position: relative;
				margin-top: -30px;
				padding: 30px 10px;
				z-index: 1;
				h2 {
					.en {
						font-size: 38px;
					}
					.jp {
						padding-top: 2px;
					}
				}
				h3 {
					line-height: 1.9;
				}
			}
		}
	}

}



/*===========================================
  レスポンシブ（PC）
===========================================*/

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

	.main_scroll {
		grid-column: 1;
		grid-row: 2;
	}

	h1, h2, h3 {
		padding: 0;
	}

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

	#sb_instagram {
		#sbi_images {
			margin: 24px auto 144px;
			width: calc(100% - var(--mg-side) * 2);
		}
	}

	.wp-block-roomoon-s-main-link {
		padding: 0;
		font-size: 16px;
		gap: 5px;
	}

	.wp-block-roomoon-s-heading {
		padding-left: 0;
		.en {
			font-size: 54px;
		}
		.jp {
			font-size: 13px;
		}
	}

	.wp-block-roomoon-s-card-link {
		grid-template-columns: 1fr auto;
		padding-bottom: 10px;
		.thumbnail {
			grid-column: 1 / 3;
			margin-bottom: 18px;
			aspect-ratio: 1.55;
		}
		.title-en {
			font-size: 12px;
		}
		.title {
			margin-top: 0;
			font-size: 18px;
			font-weight: normal;
		}
		.arrow {
			width: 10px;
			height: 10px;
			margin-top: 13px;
			margin-right: -4px;
		}
	}
	
	.wp-block-roomoon-s-card-info {
		flex: 1;
		display: block;
		.title-en {
			margin-top: 17px;
			line-height: 1;
			font-size: 12px;
		}
		.title {
			font-size: 18px;
			font-weight: 500;
		}
		.description {
			margin-top: 12px;
		}
	}

	.wp-block-roomoon-s-store-link {
		margin: 0;
		flex: 1;
		display: block;
		.title {
			margin-top: 10px;
			padding: 0;
			font-size: 15px;
			letter-spacing: 1px;
		}
		.title-en {
			margin-top: 2px;
			padding: 0;
			font-size: 11.5px;
		}
	}

	header {
		width: calc(90% - 16px);
		margin-right: 16px;
		padding: 35px 5% 20px 5%;
		grid-template-columns: auto 1fr auto auto auto;
		gap: 0 1.5%;
		.header-ttl {
			line-height: 0.7;
			h2 {
				font-size: 38px;
				margin-bottom: 3px;
			}
		}
		#primary-menu {
			gap: 4.5%;
		}
		.contact-btn {
			grid-column: 3;
			padding: 7px 21px;
			font-size: 13px;
		}
		.sns_nav {
			.icon {
				width: 20px;
				height: 18px;
			}
		}
		.toggle_menu {
			width: 50px;
			margin-top: 0;
		}
	}

	.toggle-navigation {
		grid-column: 1;
		grid-row: 2;
		position: relative;
		justify-self: end;
		align-self: start;
		width: auto;
		height: auto;
		margin-right: 16px;
		.menu {
			font-size: 14px;
		}
		img.white {
			display: none;
		}
	}

	.home, .home-draft {
		header {
			&:not(.opaque) {
				background: linear-gradient(180deg, rgba(0, 0, 0, 30%), transparent);
			}
		}

		.toggle-navigation {
			background: transparent;
			color: var(--color-text-white);
			img:not(.white) {
				display: none;
			}
			img.white {
				display: block;
			}
		}

		header.opaque + .toggle-navigation {
			background: var(--color-bg-main);
			color: var(--color-text);
			img:not(.white) {
				display: block;
			}
			img.white {
				display: none;
			}
		}

		.fv {
			h1 {
				margin: 0px calc(var(--mg-side) - 0.8em);
				line-height: 1.5;
				font-size: 70px;
				.x-mark {
					margin-left: -0.5em;
					margin-right: -0.5em;
				}
			}
			p {
				margin: 0 var(--mg-side) 20px;
				padding-left: 0;
				font-size: 15px;
				letter-spacing: 0.4px;
			}
		}

		.second_view {
			margin: 22px var(--mg-side);
			& > .wp-block-group__inner-container {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: 10vw;
			}
			h2 {
				margin: 18px 0 0;
			}
		}

		#new_arrival {
			grid-row: 1;
			grid-column: 2;
		}

		#news {
			grid-row: 1;
			grid-column: 1;
			& > .wp-block-group__inner-container {
				gap: 18px 0;
			}
			.latest-news-navigation {
				margin-top: 24px;
				grid-row: 3;
				gap: 4px;
				justify-content: end;
				align-self: end;
				.icon {
					width: 27px;
				}
			}
			.latest-news {
				ul {
					li > a, li > div {
						margin: 1em 0;
						grid-template-columns: auto 1fr auto;
						gap: 3% 0.6em;
						padding: 0;
						.date {
							padding-top: 0.5em;
						}
						.ttl {
							margin: 0;
						}
						.icon {
							grid-column: 3;
							width: 15px;
						}
					}
				}
				.news_detail {
					margin-bottom: 1.5em;
				}
			}
		}

		.story {
			margin-top: 115px;
			margin-bottom: 90px;

			.story_content {
				padding-right: var(--mg-side);
				padding-left: calc(var(--mg-side) / 2);
				background-size: 63%;
				background-position: 40% 1.5%;
				.story_main {
					> .wp-block-group__inner-container {
						display: grid;
						grid-template-columns: 50% 50%;
					}
				}
				h2 {
					margin-top: 34px;
					padding: 0;
					font-size: 48px;
					font-weight: 400;
					.x-mark {
						margin-left: -0.3em;
						margin-right: -0.3em;
					}
				}
				h3 {
					line-height: 1.5;
					font-family: var(--font-accent);
					font-size: 24px;
				}
				.message {
					p {
						line-height: 2.4;
						font-size: 13px;
						&.note {
							font-size: 12px;
						}
					}
				}
			}
			.wp-block-image {
				margin-top: 0;
				margin-left: 0;
				width: 100%;
				height: auto;
				max-height: 90vh;
			}
			.wp-block-roomoon-s-main-link {
				grid-column: 1 / 3;
				justify-self: end;
				margin-top: 85px;
			}
		}

		.service {
			padding: 72px var(--mg-side) 150px;
			& > .wp-block-group__inner-container {
				display: grid;
				grid-template-columns: auto 1fr auto;
				align-items: end;
			}
			.service_list {
				grid-column: 1 / 4;
				margin-top: 46px;
				& > .wp-block-group__inner-container {
					display: flex;
					flex-direction: row;
					gap: 32px;
				}
				.wp-block-roomoon-s-card-link {
					margin: 0;
					.icon {
						width: 10px;
					}
				}
			}
			.wp-block-roomoon-s-main-link {
				grid-row: 1;
				grid-column: 3;
			}
		}

		.lesson {
			position: relative;
			margin-top: -98px;
			margin-bottom: 80px;
			padding: 0 var(--mg-side);
			&::before {
				content: '';
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/logo.png);
				background-repeat: no-repeat;
				background-size: 27.5%;
				background-position: 3% 80%;
				opacity: 0.15;
				pointer-events: none;
			}
			& > .wp-block-group__inner-container {
				display: grid;
				grid-template-columns: auto 1fr;
				gap: 32px 5%
			}
			.lesson_list {
				display: flex;
				flex-direction: row;
				align-items: start;
				overflow: visible;
				gap: 20px;
				z-index: 1;
				.wp-block-roomoon-s-card-info {
					padding-right: 0;
				}
			}
			h2 {
				writing-mode: vertical-lr;
				.en {
					margin-right: 22px;
					display: inline-block;
					vertical-align: baseline;
					line-height: 0.6;
				}
				.jp {
					font-size: 14px;
					letter-spacing: 0.5em;
				}
			}
			.accent {
				color: var(--color-text-subtle);
				font-family: var(--font-accent);
			}
			.note {
				grid-column: 1 / 3;
				text-align: center;
			}
			.wp-block-roomoon-s-main-link {
				padding: 0;
				grid-column: 2;
			}
		}

		.community {
			.community_bg {
				height: 400px;
			}
			.community_inner {
				position: relative;
				margin: -80px var(--mg-side) 0;
				padding: 65px 80px 70px;
				& > .wp-block-group__inner-container {
					display: grid;
					grid-template-columns: 46% 50%;
					justify-content: space-between;
				}
				h2 {
					.en {
						letter-spacing: 2px;
					}
				}
				h3 {
					margin-top: 50px;
					font-size: 28px;
					line-height: 1.65;
				}
				.wp-block-image {
					grid-row: 1 / 3;
					grid-column: 2;
					margin: 0;
					img {
						object-fit: contain;
					}
				}
				.wp-block-roomoon-s-main-link {
					margin-top: 28px;
					font-size: 14px;
				}
			}
		}

		.store {
			margin: 72px var(--mg-side);
			& > .wp-block-group__inner-container {
				display: grid;
				grid-template-columns: 1fr auto;
				align-items: end;
			}
			.store_list {
				grid-column: 1 / 3;
				margin-top: 60px;
				& > .wp-block-group__inner-container {
					display: flex;
					flex-direction: row;
					gap: 3%;
				}
			}
			.wp-block-roomoon-s-main-link {
				grid-row: 1;
				grid-column: 2;
				font-size: 14px;
			}
		}

		.atelier {
			margin-top: 78px;
			margin-bottom: 110px;
			padding-right: var(--mg-side);
			& > .wp-block-group__inner-container {
				display: grid;
				grid-template-columns: 49.5vw auto 1fr;
				grid-template-rows: 1fr auto 1fr;
			}
			.atelier_main {
				grid-row: 1 / 4;
				margin: 0 7.7vw 0 0;
			}
			h2 {
				margin-top: 60px;
				grid-column: 2 / 4;
				align-self: end;
				.en {
					font-size: 48px;
				}
				.jp {
					font-size: 14px;
				}
			}
			.labo_logo {
				margin-left: 0;
				margin-right: 40px;
				width: 94px;
				align-self: center;
				img {
					object-fit: contain;
				}
			}
			p {
				margin: 0;
			}
			.map-btn {
				margin: 60px 0;
				padding: 1.2em 4.9em;
				grid-column: 2 / 4;
				justify-self: start;
				align-self: start;
				&:not(:hover):not(:active) {
					background: var(--color-bg-main);
				}
				.icon {
					width: 15px;
					top: calc(50% - 7px);
				}
			}
		}
		
		.closing_galary {
			height: 354px;
			animation: autoScrollPc 90s linear infinite;
			figure {
				flex-basis: 25vw;
			}
			@keyframes autoScrollPc {
				0% { margin-left: 0% }
				100% { margin-left: -100% }
			}
		}
	}

	body.story {
		#profile {
			.profile_main {
				.timeline {
					grid-column: 1 / 3;
				}
			}
		}
	}

	body.privacy-policy, body.error404 {
		.entry-content, .page-content {
			h1, h2, p {
				margin-left: var(--mg-side);
				margin-right: var(--mg-side);
			}
			h2 {
				margin-top: 4em;
			}
		}
	}

	.site-footer {
		margin: 120px var(--mg-side) 0;
		padding-bottom: 60px;
		display: grid;
		grid-template-columns: auto 1fr auto;
		grid-template-rows: auto auto 1fr;
		align-items: center;
		gap: 20px 2%;
		.colophon {
			grid-row: 1 / 4;
			grid-template-columns: auto;
			.logo {
				width: 135px;
			}
		}
		.footer_menu {
			grid-column: 2 / 4;
			margin-top: 10px;
			ul {
				display: flex;
				justify-content: end;
				gap: 2vw;
				font-size: 14px;
			}
		}
		.contact-btn {
			margin: 12px 0;
			justify-self: end;
			align-self: center;
			padding: 0.6em 2.1em;
		}
		.sub {
			margin: 0;
			.menu {
				font-size: 14px;
			}
			.sns_nav {
				gap: 4px;
				margin-left: 32px;
				margin-right: -6px;
			}
		}
		.copyright {
			align-self: end;
			grid-column: 2 / 4;
			margin-bottom: 0;
			text-align: right;
			font-size: 12.5px;
			line-height: 1;
		}
	}

	.only_sp {
		display: none !important;
	}

}


/*===========================================
  レスポンシブ（その他）
===========================================*/

@media screen and (min-width: 768px) and (max-width: 1030px) {
	header {
		.main-navigation-pc {
			margin-bottom: 0.25em;
			grid-column: 2 / 6;
			justify-self: end;
		}
	}

	.page_header {
		h1.wp-block-roomoon-s-heading {
			flex-direction: column;
			align-items: start;
		}
	}

	body.service {
		#flower_decoration {
			.btns {
				& > .wp-block-group__inner-container {
					flex-direction: column;
				}
			}
		}
	}

	body.community {
		section {
			& > .wp-block-group__inner-container {
				& > figure, & > .album {
					aspect-ratio: auto;
				}
			}
		}
	}
}



/*===========================================
  レスポンシブ（SP）: Story
===========================================*/

@media screen and (max-width: 767px) {

  body.story {
  #story_main {
    padding-bottom: 0;
    margin: 80px 0 52px;
    & > .wp-block-group__inner-container {
      grid-template-columns: auto;
    }
    h2 {
      margin: 0 var(--mg-side-sp) 0.3em;
      font-size: 26px;
    }
    .story_body {
      p {
        margin: 1.8em 0;
        font-size: 13px;
        line-height: 1.85;
      }
    }
  }

  #profile {
    margin: 0;
    h2 {
      margin: 0 var(--mg-side-sp) 30px;
      gap: 14px;
      font-size: 15px;
    }
    .profile_main {
      & > .wp-block-group__inner-container {
        grid-template-columns: auto;
      }
      .wp-block-roomoon-s-heading {
        margin: 0;
        gap: 1.1em;
        .jp {
          padding: 0;
        }
        .en {
          padding-top: 4px;
          font-size: 10px;
          letter-spacing: 0;
        }
      }
      p {
        margin: 1.3em 0;
        font-size: 12px;
        line-height: 1.6;
      }
    }
  }
}
}


/*===========================================
  レスポンシブ（SP）: Service
===========================================*/

@media screen and (max-width: 767px) {

  body.service {
  .page_header {
    margin-top: 67px;
    .wp-block-roomoon-s-heading {
      .en {
        font-size: 44px;
      }
    }
  }

  section {
    & > .wp-block-group__inner-container {
      grid-template-columns: auto;
    }
    .info {
      margin: 40px 0;
      h2 {
        margin: 0 var(--mg-side-sp) 35px;
        font-size: 20px;
        font-weight: 500;
      }
      h3 {
        margin-top: 0px;
        margin-bottom: 0px;
        line-height: 1.8;
        font-weight: 500;
      }
      p {
        margin: 20px 0 26px;
      }
      .wp-block-roomoon-s-main-link {
        margin-top: 1.9em;
        font-size: 16px;
        img {
          width: 80px;
        }
      }
    }
  }

  #botany_painting {
    background-size: 150%;
    background-position: 4% 0%;
    .wp-block-image:nth-child(2) {
      margin: 10px 0 0 25%;
      aspect-ratio: 1.22;
      height: auto;
    }
    .wp-block-image:nth-child(3) {
      margin: -20px var(--mg-side-sp) 0;
      width: 45vw;
    }
    .wp-block-image:nth-child(4) {
      margin: 30px 0;
      width: 62vw;
    }
  }

  #flower_school {
    margin-top: 40px;
    background-size: 125%;
    background-position: 8% 0%;
    .info {
      margin: 50px 0 0;
      grid-column: 1;
    }
    .wp-block-image:nth-child(2) {
      grid-row: auto;
      justify-self: end;
      margin: 53px var(--mg-side-sp) 0;
      width: 77vw;
      aspect-ratio: 1.24;
    }
  }

  #flower_decoration {
    margin-top: 50px;
    background-size: 220%;
    background-position: 2% 0%;
    .info {
      margin-top: 44px;
      .btns {
        & > .wp-block-group__inner-container {
          flex-direction: column;
          align-items: start;
          .wp-block-roomoon-s-main-link {
            margin-top: 0;
          }
        }
      }
    }
    .wp-block-image:nth-child(2) {
      justify-self: end;
      margin: 0;
      width: 76vw;
      height: auto;
      aspect-ratio: 1.24;
    }
    .wp-block-image:nth-child(3) {
      grid-column: 1;
      margin: 30px var(--mg-side-sp) 0;
      width: 48.1vw;
    }
  }

}
}


/*===========================================
  レスポンシブ（SP）: Contact
===========================================*/

@media screen and (max-width: 767px) {

  body.contact, body.contact-confirm, body.contact-thankyou {
  .wp-block-roomoon-s-heading {
    margin: 0 0 43px;
    flex-direction: column;
    align-items: start;
    .en {
      font-size: 44px;
    }
    .jp {
			letter-spacing: 0em;
    }
  }

  .content_header {
    margin: 0  var(--mg-side-sp) 10px;
    padding-bottom: 28px;
    p {
      margin: 0.9em 0;
      padding: 0;
    }
  }

  form {
    margin: 0;
    grid-template-columns: auto;
    row-gap: 0px;
    p > label {
      margin: 2.16em 0 1.3em;
    }
    .custom_radio .wpcf7-list-item {
      margin-bottom: 1.2em;
      &.last {
        margin-bottom: 0.2em;
      }
    }
    input[type=text], input[type=email], input[type=tel], textarea {
      width: calc(100% - 2.2em);
      padding: 1em 1.1em;
    }
    .acceptance {
      grid-column: 1;
      margin: 1.4em var(--mg-side-sp);
      padding: 1.45em 1.7em;
      label .wpcf7-list-item-label {
        display: flex;
        align-items: center;
      }
    }
    .btns {
      grid-column: 1;
      width: 100%;
      p {
        display: grid;
        grid-template-columns: 18% 64% 18%;
      }
      input[type=submit], input[type=button] {
        grid-column: 2;
        padding-right: 0;
        padding-left: 0;
        width: 100%;
      }
      .wpcf7-spinner {
        position: static;
      }
    }
    .wpcf7-response-output {
      grid-column: 1;
    }
  }
}

body.contact-confirm {
  form {
    & > :nth-child(2n - 1) {
      padding-left: 3em;
    }
    .btns {
      gap: 1em;
      margin-top: 3em;
      flex-direction: column;
    }
  }
}
}


/*===========================================
  レスポンシブ（SP）: Company
===========================================*/

@media screen and (max-width: 767px) {
body.company {
  .page_header {
    margin-top: 79px;
    .wp-block-roomoon-s-heading {
      .en {
        font-size: 44px;
      }
    }
  }

  section {
    margin: 0 var(--mg-side-sp);
    & > .wp-block-group__inner-container {
      grid-template-columns: auto;
    }
    .wp-block-roomoon-s-heading {
      padding: 0;
    }
  }

  #outline {
    margin-top: 48px;
    margin-bottom: 63px;
    h2 {
      margin-bottom: 14px;
      .en {
        font-size: 38px;
      }
      .jp {
        margin-top: 4px;
        padding-top: 0;
        font-size: 12px;
      }
    }
    .content_body {
      & > .wp-block-group__inner-container {
        grid-template-columns: auto;
        & > * {
          font-size: 13px;
          padding: 0.3em 0;
        }
        & > :nth-child(2n - 1) {
          padding-top: 2.1em;
          border-bottom: none;
        }
        & > :nth-child(2n) {
          padding-bottom: 1.8em;
        }
        h4 {
          padding-left: 0;
        }
        p {
          line-height: 1.8;
        }
      }
    }
  }

  #atelier {
    margin: 31px 20px;
    & > .wp-block-group__inner-container {
      gap: 30px;
    }
    h2 {
      .en {
        font-size: 40px;
      }
      .jp {
        padding-top: 0;
      }
    }
    .content_header {
      margin-top: 19px;
      & > .wp-block-group__inner-container {
        grid-template-columns: auto 1fr;
        & > :nth-child(3) {
          grid-column: 1 / 3;
        }
      }
      .icon {
        width: 67px;
      }
      h3 {
        padding: 0;
        font-size: 16px;
      }
      p {
        margin: 0;
      }
    }
    .content_body {
      padding: 0;
      grid-column: 1;
      border-bottom: none;
      & > .wp-block-group__inner-container {
        display: grid;
      }
      .atelter_access {
        & > .wp-block-group__inner-container {
          grid-template-columns: auto;
          .map-btn {
            .icon {
              width: 9px;
            }
          }
        }
      }
    }
    h4 {
      font-size: 13px;
    }
    p {
      padding-left: 0;
    }
  }

}
}


/*===========================================
  レスポンシブ（SP）: Community
===========================================*/

@media screen and (max-width: 767px) {

body.community {
  .page_header {
    margin-top: 66px;
    .wp-block-roomoon-s-heading {
      .en {
        font-size: 44px;
      }
      .jp {
        margin-left: 2px;
      }
    }
  }

  .page_top_image {
    background-position: 3% 0;
    background-size: 155%;
  }

  .content_header {
    margin: 65px 0 40px;
    .en {
      font-size: 38px;
    }
    .jp {
      padding-top: 0;
      font-size: 12px;
    }
  }

  .activities > .wp-block-group__inner-container {
    > :nth-child(2n - 1) section > .wp-block-group__inner-container,
    > :nth-child(2n) section > .wp-block-group__inner-container {
      & > div.wp-block-group:not(.album) {
        grid-column: 1;
        grid-row: 2;
        padding: 0;
      }
      & > figure, & > .album {
        grid-column: 1;
        grid-row: 1;
      }
    }
    > :nth-child(2n - 1) section > .wp-block-group__inner-container {
      & > figure::before, & > .album::before {
        right: 6vw;
      }
    }
    > :nth-child(2n) section > .wp-block-group__inner-container {
      & > figure::before, & > .album::before {
        left: 6vw;
      }
    }
  }

  section {
    margin-bottom: 3.7em;
    &::before {
      content: none;
    }
    & > .wp-block-group__inner-container {
      grid-template-columns: auto;
      > div.wp-block-group:not(.album) {
        padding: 0;
      }
      & > figure, & > .album {
        position: relative;
        box-sizing: content-box;
        width: calc(100vw - var(--mg-side-sp) * 2 - 11vw * 2);
        margin: 0 var(--mg-side-sp);
        padding: 11vw;
        aspect-ratio: 0.89;
        &::before {
          content: '';
          position: absolute;
          width: 7.6vw;
          height: 100%;
          top: 0;
          pointer-events: none;
          background-repeat: no-repeat;
          background-size: contain;
          background-position: 50% 50%;
        }
      }
    }
    h2 {
      margin: 2.8em var(--mg-side-sp) 1.8em;
      font-size: 20px;
      &::before {
        height: 1.2em;
        margin-top: 3px;
        margin-right: 0.7em;
      }
    }
    h3 {
      font-size: 16px;
    }
    p {
      margin-top: 1.6em;
      font-size: 13px;
    }
  }

  #greening > .wp-block-group__inner-container > figure::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/greening.png);
    right: 5vw;
    width: 9.5vw;
  }

  #socialfirm > .wp-block-group__inner-container > .album::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/socialfirm.png);
  }

  #socialfirm {
    .album {
      & > .wp-block-group__inner-container {
        height: auto;
      }
    }
    .heading-with-logo {
      margin: 3.3em var(--mg-side-sp) 2.2em;
      & > .wp-block-group__inner-container {
        grid-template-columns: auto 1fr;
      }
      figure {
        margin-left: 12.5%;
        width: 50px;
        height: auto;
        aspect-ratio: 375 / 365;
      }
    }
  }

  #assembly > .wp-block-group__inner-container > figure::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/assembly.png);
    width: 9.6vw;
    right: 5vw;
  }

  #continued > .wp-block-group__inner-container > figure::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/continued.png);
  }

  #sdgs > .wp-block-group__inner-container > .album::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/sgds.png);
  }

  #kids_workshop > .wp-block-group__inner-container > figure::before {
    background-image: url(https://roomoon.net/wp-content/themes/roomoon_s/assets/img/kids-workshop.png);
    width: 10vw;
  }

}
}