/*
Theme Name: Oracle Design Theme(202603)
Author URI: https://oracle-design.com
Version: 1.0.0
Description:占い・デザインJugem専用テーマです。
Author: Oracle Design Jugem
*/

@charset "utf-8";

:root {
  /* fallback */
  --green: #40aaba;
  --pink: #f0afc2;
  --blue: #5cdefc;
  --main-color: var(--green);
  --sub-color: #034982;
  --accent-color: #fd7b73;
  --text-color: #444;
  --bg-color: #fff;
  --box-shadow: 0px 0px 0px -6px oklch(from var(--main-color) l c h / 0.35);
  /* color */
  @supports (color: oklch(0 0 0)) {
    --green: oklch(0.684 0.0978 209.12);
    --pink: oklch(0.82 0.08 360);
    --blue: oklch(0.84 0.12 216);
    --main-color: var(--green);
    --sub-color: oklch(from var(--blue) 0.4 c h);
    --accent-color: oklch(from var(--pink) l 0.1 h);
    --text-color: oklch(0.3867 0 0);
    --bg-color: oklch(1 0 0 / 0.78);
    --grad-1: linear-gradient(in oklch to right, var(--main-color), var(--accent-color));
    --grad-2: linear-gradient(in oklch to right, oklch(from var(--main-color) 0.9 c h / 0.25), oklch(from var(--accent-color) l c h / 0.25));
  }
  /* font-size */
  --main-fz: clamp(1rem, 0.955rem + 0.23vw, 1.125rem);
  --small-fz: clamp(0.688rem, 0.642rem + 0.23vw, 0.813rem);
  --large-fz: clamp(1.5rem, 1.409rem + 0.45vw, 1.75rem);
  --exl-fz: clamp(2rem, 1.364rem + 3.18vw, 3.75rem);
  /* other settings */
  --la-en: 'Lexend Deca', sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --trans-fast: 0.25s var(--ease);
  --trans-slow: 0.6s var(--ease);
  --radius: clamp(0.25rem, 0.068rem + 0.91vw, 0.75rem);
}
html {
  scroll-behavior: smooth;
}
body {
  position: relative;
  background-color: #fff;
  font-family: 'Zen Kaku Gothic Antique', sans-serif;
  font-size: var(--main-fz);
  letter-spacing: 0.09em;
  line-height: 1.8;
  color: var(--text-color);
  z-index: 0;
}
main {
  overflow-x: hidden;
}
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
p {
  margin-bottom: 2em;
}
.section {
  position: relative;
  padding-block: 108px;
}
.inner {
  width: min(1200px, 100%);
  padding-inline: 24px;
  margin-inline: auto;
}
.btn-wrapper {
  display: block grid;
  gap: 2em;
  text-align: center;
}
a.btn {
  position: relative;
  display: block grid;
  place-items: center;
  width: min(420px, 100%);
  min-height: 5em;
  z-index: 0;
  background: var(--grad-2);
  border-radius: 100vmax;
  box-shadow: var(--box-shadow);
  &::before {
    position: absolute;
    inset: 0;
    z-index: -1;
    content: '';
    border-radius: 100vmax;
    background: var(--grad-1);
    opacity: 0;
  }
  & > p {
    display: block flex;
    justify-content: center;
    align-items: center;
    position: relative;
    margin-bottom: initial;
    font-weight: bold;
    &::after {
      content: '\e5cc';
      font-family: 'Material Symbols Outlined';
      font-size: large;
      font-weight: 500;
      margin-left: 6px;
    }
  }
}
.section-title {
  line-height: 1.4;
  margin-bottom: 4em;
  & h2 {
    font-weight: normal;
  }
  & p {
    margin-bottom: initial;
  }
  & .la-en {
    text-transform: uppercase;
    font-weight: bold;
    font-size: var(--exl-fz);
    color: var(--main-color);
  }
}
.catch {
  font-size: var(--large-fz);
  margin-bottom: 2em;
}
.sitename,
.la-en {
  font-family: var(--la-en);
  letter-spacing: 0.06em;
}
.sitename {
  text-transform: uppercase;
  font-weight: 400;
}
.link-list {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-bottom: 2em;
  & li a {
    font-family: var(--la-en);
  }
}
.bold {
  font-weight: bold;
}
.text-red {
  color: var(--accent-color);
}
.text-green {
  color: var(--main-color);
}
.text-right {
  text-align: right;
  & .btn-wrapper {
    place-items: end;
  }
}
.text-small {
  font-size: var(--small-fz);
}
.mb-1em {
  margin-bottom: 1em;
}
.mb-4em {
  margin-bottom: 4em;
}
a.text-link {
  color: var(--accent-color);
  font-weight: bold;
  text-decoration: underline;
}
/* header */
.header {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  z-index: 1000;
  padding: 12px;
  background-color: var(--bg-color);
  &.front::after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    content: '';
    background: var(--grad-2);
    z-index: -1;
  }
}
.navigation {
  position: relative;
}
.nav-list {
  display: block flex;
  justify-content: center;
  gap: 2em;
  text-transform: uppercase;
  font-size: var(--small-fz);
  font-family: var(--la-en);
}
.navToggle {
  display: none;
}
/* footer */
.footer {
  background: var(--grad-2);
  padding: 60px 24px;
  text-align: center;
  & .la-en {
    text-transform: uppercase;
    font-size: var(--large-fz);
  }
  & .link-list {
    justify-content: center;
  }
}
.copyright {
  display: inline-block;
  font-size: var(--small-fz);
  font-family: var(--la-en);
  margin-bottom: 4em;
}
.footer-list {
  display: block flex;
  justify-content: flex-end;
  font-size: var(--small-fz);
  color: oklch(from var(--text-color) l c h / 0.6);
  gap: 1em;
}

/* front */
.section#front-mv {
  min-height: 100dvh;
  background: var(--grad-2);
  padding-block: initial;
  display: grid;
  place-items: center;
}
:where(.section[id^='front']:not(#front-mv, #front-contact)) {
  background: var(--bg-color);
  & .inner {
    &::after {
      position: absolute;
      top: 15%;
      left: 15%;
      width: 480px;
      aspect-ratio: 1;
      border-radius: 100vmax;
      content: '';
      background-image: url(./img/bg-blue.webp);
      mix-blend-mode: multiply;
      z-index: -1;
    }
  }
  &:nth-of-type(odd) .inner::after {
    left: initial;
    right: 15%;
    filter: hue-rotate(90deg) brightness(105%);
    rotate: 90deg;
  }
}
.mv-title {
  & .la-en {
    font-size: var(--exl-fz);
    margin-bottom: 1em;
    text-transform: uppercase;
    font-weight: bold;
    & span {
      display: inline-block;
      opacity: 0;
      background: var(--grad-1);
      color: transparent;
      background-clip: text;
      translate: 0 48px;
      rotate: -4deg;
      transition:
        opacity var(--trans-slow),
        translate var(--trans-slow),
        rotate var(--trans-slow);
      &.on {
        opacity: 1;
        translate: 0;
        rotate: 0deg;
        transition:
          opacity var(--trans-slow),
          translate var(--trans-slow),
          rotate var(--trans-slow);
      }
    }
  }
  & .sitename {
    font-size: var(--main-fz);
  }
}
.section#front-profile {
  container: front-prof / inline-size;
}
@container front-prof (max-width:640px) {
  .text-right {
    text-align: left;
    & .btn-wrapper {
      place-items: start;
    }
  }
}
.front-fortune-list,
.front-web-list {
  margin-bottom: 5em;
  & li {
    position: relative;
    margin-left: clamp(3.75rem, 3.477rem + 1.36vw, 4.5rem);
    margin-bottom: 2em;
    &::before {
      position: absolute;
      left: -72px;
      bottom: 0;
      top: 0;
      width: clamp(2.25rem, 1.977rem + 1.36vw, 3rem);
      height: auto;
      content: '';
      background-image: url('./img/bg-blue.webp');
      background-size: cover;
      border-radius: 100vmax;
    }
    &:nth-of-type(even)::before {
      filter: hue-rotate(90deg);
    }
    & h3 {
      font-size: var(--large-fz);
      font-weight: normal;
    }
    & .text-red {
      margin-bottom: 0.5em;
    }
  }
}
.section#front-contact {
  background: var(--grad-2), var(--grad-2);
  & .btn-wrapper a.btn {
    background: #fff;
    min-height: 6em;
  }
}
:where(.info-list),
:where(.note-list) {
  margin-bottom: 4em;
  border-top: solid 0.5px;
  & li a {
    display: block flex;
    justify-content: space-between;
    align-items: center;
    padding: 2em;
    border-bottom: solid 0.5px;
    background-color: var(--bg-color);
    & time {
      font-family: var(--la-en);
      font-weight: bold;
    }
    & h3 {
      text-align: right;
      font-size: var(--main-fz);
    }
  }
}
.info-list {
  container: info-list / inline-size;
}
.note-list {
  container: note-list / inline-size;
  & li {
    display: block;
    & a {
      flex-direction: row-reverse;
      & img {
        width: 240px;
        aspect-ratio: 16/9;
        object-fit: cover;
      }
    }
  }
}
@container info-list (max-width:700px) {
  li a {
    display: block;
    & h3 {
      text-align: left;
    }
  }
}
@container note-list (max-width:560px) {
  li a {
    display: block;
    & img {
      display: block;
      margin-bottom: 1em;
    }
    & h3 {
      text-align: left;
      text-transform: uppercase;
    }
  }
}
/* menu */
.menu .section-title {
  display: block flex;
  flex-direction: column-reverse;
  & h2 {
    font-size: var(--large-fz);
    font-weight: normal;
  }
  & .la-en {
    font-size: var(--main-fz);
    color: var(--text-color);
  }
}
.section:has(.menu-title) {
  padding-block: 48px;
  & .inner::before {
    position: absolute;
    top: 12px;
    right: 7.5%;
    width: clamp(15rem, 12.273rem + 13.64vw, 22.5rem);
    aspect-ratio: 1;
    border-radius: 100vmax;
    content: '';
    background-image: url(./img/bg-blue.webp);
    opacity: 0.55;
    z-index: -1;
  }
}
.menu-title {
  & h1 {
    font-size: var(--large-fz);
  }
  & .la-en {
    font-size: var(--exl-fz);
    text-transform: uppercase;
    font-weight: bold;
    background: var(--grad-1);
    color: transparent;
    background-clip: text;
    margin-bottom: initial;
  }
}
img.prof-img {
  display: block;
  max-width: 160px;
  border-radius: var(--radius);
  margin-bottom: 1em;
}
.anchor-list {
  display: block grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1em;
  & li {
    display: block;
    & a {
      position: relative;
      display: block;
      font-size: var(--small-fz);
      background-color: var(--main-color);
      border-radius: 100vmax;
      padding: 0.5em 1em;
      color: #fff;
      &::after {
        position: absolute;
        top: 1.5px;
        bottom: 0;
        right: 4px;
        content: '\e313';
        font-family: 'Material Symbols Outlined';
        font-size: large;
        font-weight: 500;
        vertical-align: middle;
      }
    }
  }
}
.menu-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2em;
}
.menu-content {
  padding: 1.5em;
  border: solid 2px;
  border-image: url(./img/bg-blue.webp) 1;
  & h3 {
    font-size: var(--main-fz);
  }
  & .price {
    display: block;
    font-weight: bold;
    font-family: 'Lexend Deca', 'Zen Kaku Gothic Antique', sans-serif;
    font-size: var(--large-fz);
    text-align: right;
    color: var(--accent-color);
    border-bottom: solid 0.5px var(--main-color);
    margin-bottom: 1em;
    & span {
      font-size: var(--small-fz);
    }
  }
}
.section#guideline h3 {
  color: var(--main-color);
  font-weight: bold;
  margin-bottom: 1em;
  border-bottom: dotted 2px;
}
.section#contact .inner {
  padding: 4em 2em;
  background: var(--grad-2), var(--grad-2);
  text-align: center;
  & .btn-wrapper {
    place-items: center;
    & a.btn {
      background: #fff;
      min-height: 6em;
    }
  }
}
.works-list {
  display: block grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 1em;
}
.popup-open {
  position: relative;
  width: 100%;
  height: clamp(7.5rem, 6.045rem + 7.27vw, 11.5rem);
  border: none;
  box-shadow: var(--box-shadow);
  background-size: cover;
  & span {
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: var(--main-color);
    color: #fff;
    font-size: var(--small-fz);
    padding: 4px 2px;
  }
}
.popup-modal {
  position: fixed;
  inset: 0;
  transition:
    display var(--trans-fast),
    overlay var(--trans-fast),
    opacity var(--trans-fast);
  width: min(100%, 780px);
  height: 85dvh;
  padding: 4em 2em 2em;
  box-shadow: var(--box-shadow);
  overflow-y: scroll;
  @starting-style {
    opacity: 0;
  }
  &::backdrop {
    transition:
      display var(--trans-fast),
      overlay var(--trans-fast),
      opacity var(--trans-fast);
    background: var(--grad-2);
    backdrop-filter: blur(6px);
  }
  & h1 {
    font-size: var(--large-fz);
    margin-bottom: 1em;
  }
}
.popup-close {
  position: fixed;
  top: 24px;
  right: clamp(0.75rem, 0.477rem + 1.36vw, 1.5rem);
  display: block grid;
  place-items: center;
  border: none;
  border-radius: 100vmax;
  background-color: var(--main-color);
  color: #fff;
  aspect-ratio: 1/1;
}
.contact-wrapper {
  width: min(980px, 100%);
  margin-inline: auto;
  padding: 1em;
}
.contact-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.contact-name {
  & p {
    margin-bottom: 0px;
  }
  & label {
    font-weight: 600;
  }
}
input:is(:-webkit-autofill, :autofill) {
  background-color: #fff;
}
.contact-form {
  max-width: 100%;
}
.contact-input input,
.contact-input textarea {
  width: 100%;
  padding: 0.5em;
  font-size: var(--main-fz);
  border: 1px solid var(--main-color);
  background: #fff;
  border-radius: 4px;
  transition:
    border-color var(--trans-fast),
    filter var(--trans-fast);
}
.contact-input:focus-within input,
.contact-input:focus-within textarea {
  border-color: var(--accent-color);
}
.contact-input textarea {
  height: 184px;
  resize: vertical;
}
.privacy-policy {
  padding: 12px;
  margin-bottom: 12px;
  font-size: var(--small-fz);
}
input[type='submit'] {
  padding: 16px 12px;
  width: 100%;
  min-height: 84px;
  font-weight: 600;
  font-size: calc(var(--main-fz) - 0.2rem);
  cursor: pointer;
  color: #fff;
  background-color: var(--main-color);
  border: solid 2px;
  transition: background-color 0.15s ease;
  text-align: center;
}
.wpcf7-turnstile.cf-turnstile {
  text-align: center;
}
/* single */
/* media query */
@media (max-width: 800px) {
  .navToggle {
    position: fixed;
    right: 0;
    top: 12px;
    display: block grid;
    place-items: center;
    z-index: 100;
    border: none;
  }
  .nav-list {
    display: none;
    gap: 1em;
    &.on {
      position: fixed;
      inset: 0;
      min-height: 100dvh;
      min-width: 100dvw;
      overflow: hidden;
      display: block flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: var(--large-fz);
      background: oklch(1 0 0 / 0.875);
      z-index: 10;
    }
  }
  .menu-list {
    grid-template-columns: 1fr;
  }
}
/* single */
.section.single .inner {
  & img {
    display: block;
    margin-bottom: 1em;
  }
}
/* sct */
.sct-list {
  container: sct / inline-size;
  border-top: 0.5px solid;
  margin-inline: auto;
}
.sct-content {
  display: block grid;
  grid-template-columns: clamp(6.75rem, 5.023rem + 8.64vw, 11.5rem) 1fr;
  align-items: center;
  gap: 1em;
  padding-block: 1em;
  border-bottom: 0.5px solid;
  font-size: var(--small-fz);
  & dd {
    border-left: 4px double var(--main-color);
    padding-left: 1em;
  }
}
/* loading */
.loading {
  position: fixed;
  inset: 0;
  display: block grid;
  place-items: center;
  background: var(--bg-color) var(--grad-2);
  z-index: 9999;
}
.spinner {
  width: 120px;
  aspect-ratio: 1;
  border: 12px solid oklch(from var(--main-color) l c h / 0.15);
  border-top-color: oklch(from var(--main-color) l c h / 0.6);
  border-radius: 100vmax;
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to {
    rotate: 360deg;
  }
}

/* hover */
@media (any-hover: hover) {
  a,
  button,
  input[type='submit'] {
    transition:
      opacity var(--trans-fast),
      color var(--trans-fast);
    &:hover {
      opacity: 0.78;
      transition:
        opacity var(--trans-fast),
        color var(--trans-fast);
    }
  }
  a.btn {
    transition:
      opacity var(--trans-fast),
      scale var(--trans-fast);
    transform-origin: top left;
    &:hover {
      color: #fff;
      scale: 1.02;
      transition:
        opacity var(--trans-slow),
        scale var(--trans-slow);
      &::before {
        opacity: 1;
        transition: opacity var(--trans-slow);
      }
      & > p::after {
        transition: margin var(--trans-slow);
        margin-left: 12px;
      }
    }
  }
  .header a.sitename:hover,
  .nav-content a:hover,
  .link-list a:hover,
  .footer-list a:hover {
    color: var(--main-color);
  }
  .info-list li a:hover,
  .note-list li a:hover {
    opacity: 0.55;
    color: var(--main-color);
  }
}