@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@100;200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Philosopher:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");
/*! destyle.css v1.0.14 | MIT License | https://github.com/nicolas-cusan/destyle.css */
* {
  box-sizing: border-box;
}

::before,
::after {
  box-sizing: inherit;
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
}

main {
  display: block;
}

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  line-height: inherit;
  font-weight: inherit;
  margin: 0;
}

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

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: 0;
  border-top: 1px solid;
  margin: 0;
  clear: both;
  color: inherit;
}

pre {
  font-family: monospace, monospace;
  font-size: inherit;
}

address {
  font-style: inherit;
}

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

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: inherit;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
  vertical-align: bottom;
}

embed,
object,
iframe {
  border: 0;
  vertical-align: bottom;
}

button,
input,
optgroup,
select,
textarea {
  -webkit-appearance: none;
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  outline: 0;
  border-radius: 0;
  text-align: inherit;
}

[type=checkbox] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type=radio] {
  -webkit-appearance: radio;
  appearance: radio;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type=button],
[type=reset],
[type=submit] {
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

button[disabled],
[type=button][disabled],
[type=reset][disabled],
[type=submit][disabled] {
  cursor: default;
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

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

option {
  padding: 0;
}

fieldset {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

[type=search] {
  outline-offset: -2px;
}

[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

label[for] {
  cursor: pointer;
}

details {
  display: block;
}

summary {
  display: list-item;
}

[contenteditable] {
  outline: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: 700;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

:root {
  --base-font: "Poppins", "IBM Plex Sans JP", sans-serif;
  --en-font: "Poppins", sans-serif;
  --font-size12: 1.2rem;
  --font-size14: 1.4rem;
  --font-size16: 1.6rem;
  --font-size18: 1.8rem;
  --font-size20: 2.0rem;
  --font-size24: 2.4rem;
  --font-size28: 2.8rem;
  --font-size32: 3.2rem;
  --font-size36: 3.6rem;
  --font-size40: 4.0rem;
  --font-size48: 4.8rem;
  --font-size56: 5.6rem;
  --font-size64: 6.4rem;
  --font-size96: 9.6rem;
  --font-size120: 12rem;
  --main: #8c720e;
  --main-light: #C779AA;
  --main-dark: #1E2C5B;
  --base-color: #3D3D3D;
  --gray: #D6D6D6;
  --gray-light: #F5F5F5;
  --gray-dark: #717171;
  --gray-black: #444444;
  --white: #FFFFFF;
  --black: #000000;
  --variation3: #D6F19B;
}

.editor-styles-wrapper,
html {
  font-size: 62.5% !important;
  scroll-behavior: smooth !important;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper,
  html {
    font-size: 2.66vw !important;
  }
}

.editor-styles-wrapper,
html :where(.wp-block) {
  max-width: 980px !important;
}

.editor-styles-wrapper,
body {
  font-feature-settings: "palt" !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  text-rendering: optimizeLegibility !important;
  color: var(--base-color) !important;
  font-family: var(--base-font) !important;
  font-size: 1.6rem !important;
  font-style: normal !important;
  font-weight: 400 !important;
  line-height: 2 !important;
  letter-spacing: 0.08em !important;
  overflow-x: hidden !important;
  border: 2px solid var(--main);
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper,
  body {
    -webkit-text-size-adjust: 100% !important;
    overflow-x: hidden !important;
    font-size: 1.5rem !important;
    line-height: 1.8 !important;
  }
}

a {
  transition: all 0.5s;
}

@media screen and (min-width: 799px) {
  a[href*="tel:"] {
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}
.pc {
  display: block;
}
@media screen and (max-width: 800px) {
  .pc {
    display: none;
  }
}

.sp {
  display: none;
}
@media screen and (max-width: 800px) {
  .sp {
    display: block;
  }
}

img {
  vertical-align: middle;
}

::selection {
  background: var(--variation3);
}

section + section {
  margin-top: 12rem;
}
@media screen and (max-width: 800px) {
  section + section {
    margin-top: 6rem;
  }
}

.char {
  display: inline-block;
  overflow: hidden;
}

.js-text {
  display: inline-block;
}

@keyframes ripple-main {
  0% {
    box-shadow: 0 0 0 0 var(--main);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(27, 133, 251, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 133, 251, 0);
  }
}
@keyframes ripple-white {
  0% {
    box-shadow: 0 0 0 0 var(--white);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(27, 133, 251, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(27, 133, 251, 0);
  }
}
.caseSwiper-wrapper {
  position: relative;
  margin: 0 auto;
  padding-bottom: 6.4rem;
}
.caseSwiper-wrapper .caseSwiper {
  position: relative;
  overflow: visible;
  padding: 0 4.8rem 0 0;
}
.caseSwiper-wrapper .swiper-pagination {
  position: absolute !important;
  top: auto !important;
  bottom: -6.4rem !important;
  left: 0 !important;
  width: 100% !important;
  padding: 0 !important;
  z-index: 10;
}
.caseSwiper-wrapper .swiper-pagination-progressbar {
  background: var(--gray) !important;
  height: 0.4rem !important;
}
.caseSwiper-wrapper .swiper-pagination-progressbar-fill {
  background: var(--main) !important;
  height: 0.4rem !important;
  border-radius: 0 !important;
  transition: width 0.5s ease !important;
}

.modal {
  display: none;
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}
.modal__bg {
  background: rgba(0, 0, 0, 0.7);
  width: 100%;
  height: 100vh;
  position: absolute;
}
.modal__content {
  background: var(--white);
  left: 50%;
  padding: 4.8rem 0 4.8rem 4.8rem;
  border-radius: 2.4rem;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90vh;
}
@media screen and (max-width: 800px) {
  .modal__content {
    padding: 1.5rem;
    border-radius: 1.5rem;
    width: 90%;
  }
}
.modal ::-webkit-scrollbar {
  width: 1.2rem;
}
.modal ::-webkit-scrollbar-track {
  background: var(--white);
}
.modal ::-webkit-scrollbar-thumb {
  background: var(--main);
}

.js-text {
  display: inline-block;
  overflow: hidden;
}

.js-text .char {
  display: inline-block;
  transform-origin: bottom;
}

.blur-text {
  filter: blur(0px);
}

@media screen and (max-width: 800px) {
  .hamburger {
    position: fixed;
    top: 1.6rem;
    right: 0.8rem;
    width: 4.8rem;
    height: auto;
    aspect-ratio: 1/1;
    cursor: pointer;
    z-index: 4000;
    transition: all 0.5s;
    border-radius: 50%;
  }
}
@media screen and (min-width: 799px) {
  .hamburger {
    display: none;
  }
}
.hamburger__line {
  position: absolute;
  width: 32px;
  height: 2px;
  left: 50%;
  transform: translate(-50%, 0);
  background-color: var(--main);
  transition: all 0.5s;
}

.hamburger__line--1 {
  top: 1.6rem;
}

.hamburger__line--2 {
  top: 2.4rem;
}

.hamburger__line--3 {
  top: 3.2rem;
}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line {
  background: var(--white);
}

.open .hamburger__line--1 {
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%) rotate(-30deg);
}

.open .hamburger__line--2 {
  opacity: 0;
}

.open .hamburger__line--3 {
  top: 2.4rem;
  left: 50%;
  transform: translateX(-50%) rotate(30deg);
}

.sp-nav {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--main);
  color: var(--white);
  transition: all 0.5s;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0s linear 0.5s;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/*ハンバーガーがクリックされたら右からスライド*/
.open .sp-nav {
  opacity: 1;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

.l-hero {
  width: 100%;
  height: calc(100vh - 12rem);
  position: relative;
  margin-top: 11.8rem;
}
@media screen and (max-width: 800px) {
  .l-hero {
    overflow-x: hidden;
    height: calc(100vh - 8rem);
    margin-top: 7.8rem;
  }
}
.l-hero-imgbox {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: calc(100vh - 8rem);
}
.l-hero-imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.l-hero-txtbox {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 2;
}
.l-hero-txtbox__inner {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en l-hero-txtbox__en ." ". l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja l-hero-txtbox__ja .";
  width: 100%;
  height: 75.6rem;
  line-height: 1.1;
}
@media screen and (max-width: 800px) {
  .l-hero-txtbox__inner {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 2.4rem;
    height: calc(100vh - 8rem);
  }
}
.l-hero-txtbox__en {
  grid-area: l-hero-txtbox__en;
  display: flex;
  align-items: flex-end;
  font-size: 9.6rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  line-height: 1.4;
  color: var(--white);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 800px) {
  .l-hero-txtbox__en {
    font-size: 3.2rem;
  }
}
.l-hero-txtbox__ja {
  grid-area: l-hero-txtbox__ja;
  display: flex;
  justify-content: flex-end;
  font-size: 4.8rem;
  font-weight: 600;
  color: var(--white);
  text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 800px) {
  .l-hero-txtbox__ja {
    font-size: 1.8rem;
  }
}

.l-header {
  width: 100%;
  height: 12rem;
  background: var(--white);
  border: 2px solid var(--main);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4.8rem;
  padding: 0 4.8rem;
  transition: all 0.5s;
}
@media screen and (max-width: 800px) {
  .l-header {
    height: 8rem;
    gap: 0;
    padding: 0 1.6rem;
  }
}
.l-header__logo img {
  width: auto;
  height: 5.6rem;
}
@media screen and (max-width: 800px) {
  .l-header__logo img {
    height: 3.2rem;
  }
}
.l-header__elements {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 0 0.8rem;
}
@media screen and (max-width: 800px) {
  .l-header__elements {
    display: none;
  }
}
.l-header__btns {
  display: flex;
  align-items: center;
  gap: 0 2.4rem;
}
.l-header__phone a {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1.5;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 0.8rem;
  white-space: nowrap;
}
.l-header__globalnav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  position: relative;
  gap: 0 2.4rem;
}
.l-header__globalnav a {
  font-weight: 500;
  font-size: 1.8rem;
}
.l-header__globalnav .insta {
  font-size: 2.4rem;
}

.js-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 100;
  transition: transform 0.3s ease, background 0.3s ease;
  will-change: transform, background;
}

.js-header.is-hide {
  transform: translateY(-110%);
}

.l-footer {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-columns: 1fr;
  gap: 4.8rem;
  grid-auto-flow: row;
  grid-template-areas: "l-footer-nav l-footer-nav l-footer-nav l-footer-nav l-footer-nav l-footer-nav l-footer-nav l-footer-cta l-footer-cta l-footer-cta l-footer-cta l-footer-cta l-footer-cta l-footer-cta" "l-footer-info l-footer-info l-footer-info l-footer-info l-footer-info l-footer-info l-footer-info l-footer-below l-footer-below l-footer-below l-footer-below l-footer-below l-footer-below l-footer-below";
  padding: 4.8rem 0;
  align-items: start;
  margin-top: 12rem;
  border-top: 2px solid var(--main);
  /* ----- l-footer-nav ----- */
  /* ----- l-footer-cta ----- */
  /* ----- l-footer-infro ----- */
  /* ----- l-footer-below ----- */
}
@media screen and (max-width: 800px) {
  .l-footer {
    margin-top: 6.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 4.8rem 0;
    padding: 4.8rem 1.6rem;
  }
}
.l-footer-nav {
  grid-area: l-footer-nav;
  padding: 0 0 0 4.8rem;
  display: flex;
  gap: 0 9.6rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .l-footer-nav {
    width: 100%;
    padding: 0;
    gap: 0;
  }
}
.l-footer-nav ul {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.8rem 0;
  font-family: var(--en-font);
  font-size: 2rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .l-footer-nav ul {
    width: 100%;
  }
}
.l-footer-nav ul > * {
  width: 100%;
}
.l-footer-cta {
  grid-area: l-footer-cta;
  padding: 0 4.8rem 0 0;
  display: flex;
  justify-content: flex-end;
}
@media screen and (max-width: 800px) {
  .l-footer-cta {
    width: 100%;
    padding: 0;
    display: block;
  }
}
.l-footer-cta__list {
  width: 48rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2.4rem;
}
@media screen and (max-width: 800px) {
  .l-footer-cta__list {
    width: 100%;
    gap: 1.6rem;
  }
}
.l-footer-cta__item {
  width: 100%;
}
.l-footer-cta__link {
  width: 100%;
  height: 10rem;
  display: flex;
  align-items: stretch;
  background: linear-gradient(to right, #fff 0%, var(--main) 20%, var(--main) 100%);
  color: var(--white);
  border-radius: 0 2.4rem 0 2.4rem;
  overflow: hidden;
  line-height: 1;
}
@media screen and (max-width: 800px) {
  .l-footer-cta__link {
    height: 8rem;
  }
}
.l-footer-cta__link:hover {
  -webkit-animation: pulse 2s infinite;
  animation: ripple-main 1.5s infinite;
}
.l-footer-cta__imgbox {
  width: 40%;
}
@media screen and (max-width: 800px) {
  .l-footer-cta__imgbox {
    width: 30%;
  }
}
.l-footer-cta__imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 0 2.4rem 0 2.4rem;
}
.l-footer-cta__txtbox {
  width: 60%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
}
@media screen and (max-width: 800px) {
  .l-footer-cta__txtbox {
    width: 70%;
  }
}
.l-footer-cta__txtbox .en {
  font-size: 3.2rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .l-footer-cta__txtbox .en {
    font-size: 2.4rem;
  }
}
@media screen and (max-width: 800px) {
  .l-footer-cta__txtbox .ja {
    font-size: 1.4rem;
  }
}
.l-footer-info {
  grid-area: l-footer-info;
  padding: 0 0 0 4.8rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1.6rem 0;
  height: 100%;
}
@media screen and (max-width: 800px) {
  .l-footer-info {
    width: 100%;
    height: auto;
    padding: 0;
  }
}
.l-footer-info__logo img,
.l-footer-info__logo svg {
  width: auto;
  height: 4.8rem;
  max-width: 20rem;
}
.l-footer-info__meta {
  font-size: 1.4rem;
  color: var(--main);
}
.l-footer-info__sns {
  display: flex;
  align-items: center;
  gap: 0 1.6rem;
  font-size: 2.4rem;
  line-height: 1;
}
.l-footer-below {
  grid-area: l-footer-below;
  padding: 0 4.8rem 0 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 1.2rem;
  height: 100%;
}
@media screen and (max-width: 800px) {
  .l-footer-below {
    width: 100%;
    height: auto;
    padding: 0;
    align-items: center;
    justify-content: center;
  }
}
.l-footer-below__copy {
  font-family: var(--en-font);
  font-size: 1.4rem;
  color: var(--main);
}
.l-footer-below__privacy {
  font-size: 1.4rem;
  display: flex;
  gap: 2.4rem;
}

.l-intro {
  display: flex;
  justify-content: center;
}
.l-intro__title {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1.2rem;
  border-radius: 10rem;
  background: var(--gray-light);
  font-size: 1rem;
}

/* ---------- 1列 ---------- */
.l-main-col1 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 80px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content l-main-col1__content .";
  margin-top: 12rem;
}
.l-main-col1__content {
  grid-area: l-main-col1__content;
}

/* ---------- 1列（狭いver） ---------- */
.l-main-col1-narrow {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 80px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". . . l-main-col1-narrow__content l-main-col1-narrow__content l-main-col1-narrow__content l-main-col1-narrow__content l-main-col1-narrow__content l-main-col1-narrow__content l-main-col1-narrow__content l-main-col1-narrow__content . . .";
  margin-top: 12rem;
}
.l-main-col1-narrow__content {
  grid-area: l-main-col1-narrow__content;
}

/* ---------- 2列 ---------- */
.l-main-col2 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 80px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-main-col2__content l-main-col2__content l-main-col2__content l-main-col2__content l-main-col2__content l-main-col2__content l-main-col2__content l-main-col2__content l-main-col2__aside l-main-col2__aside l-main-col2__aside l-main-col2__aside .";
  margin-top: 12rem;
}
.l-main-col2__aside {
  grid-area: l-main-col2__aside;
}
.l-main-col2__content {
  grid-area: l-main-col2__content;
}

.l-pageheader {
  border-bottom: 2px solid var(--main);
  margin-top: 11.8rem;
  padding: 12rem 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 4.8rem;
  grid-auto-flow: row;
  grid-template-areas: ". l-pageheader__txtbox l-pageheader__txtbox l-pageheader__txtbox l-pageheader__txtbox l-pageheader__imgbox l-pageheader__imgbox l-pageheader__imgbox l-pageheader__imgbox l-pageheader__imgbox l-pageheader__imgbox l-pageheader__imgbox" ". l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread l-pageheader__bread .";
}
@media screen and (max-width: 800px) {
  .l-pageheader {
    margin-top: 8rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 4.8rem 0;
    padding: 2.4rem 0 0 0;
    border-bottom: none;
  }
}
.l-pageheader__imgbox {
  grid-area: l-pageheader__imgbox;
  height: 50vh;
}
@media screen and (max-width: 800px) {
  .l-pageheader__imgbox {
    width: 100%;
    height: auto;
    order: 3;
  }
}
.l-pageheader__imgbox img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 3.2rem 0 0 3.2rem;
}
@media screen and (max-width: 800px) {
  .l-pageheader__imgbox img {
    height: 24rem;
    border-radius: 0;
  }
}
.l-pageheader__txtbox {
  grid-area: l-pageheader__txtbox;
  height: 50vh;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .l-pageheader__txtbox {
    width: 100%;
    height: auto;
    padding: 0 1.6rem;
    justify-content: center;
    text-align: center;
    order: 2;
  }
}
.l-pageheader__bread {
  grid-area: l-pageheader__bread;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  .l-pageheader__bread {
    width: 100%;
    padding: 0 1.6rem;
    order: 1;
    display: flex;
    justify-content: flex-end;
  }
}
.l-pageheader__title {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2.4rem;
  line-height: 1.2;
  color: var(--main);
}
@media screen and (max-width: 800px) {
  .l-pageheader__title {
    gap: 1.6rem;
  }
}
.l-pageheader__title .en {
  font-size: 9.6rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .l-pageheader__title .en {
    font-size: 4.8rem;
  }
}
.l-pageheader__title .ja {
  font-family: var(--sub-font);
  font-size: 2.4rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .l-pageheader__title .ja {
    font-size: 1.8rem;
  }
}

.editor-styles-wrapper :where(.is-layout-flex) {
  gap: 2rem !important;
}

#tabs-1-media {
  display: none !important;
}

.editor-styles-wrapper,
.l-gutenberg {
  width: 100%;
  margin: 0 auto;
}
.editor-styles-wrapper > * + *,
.l-gutenberg > * + * {
  margin-top: 4.8rem;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper > * + *,
  .l-gutenberg > * + * {
    margin-top: 2.4rem;
  }
}
.editor-styles-wrapper img,
.l-gutenberg img {
  width: 100%;
  height: auto;
}
.editor-styles-wrapper .wp-block-group + .wp-block-group,
.l-gutenberg .wp-block-group + .wp-block-group {
  margin-top: 4.8rem;
}
.editor-styles-wrapper .wp-block-group__inner-container > * + *,
.l-gutenberg .wp-block-group__inner-container > * + * {
  margin-top: 2.4rem;
}
.editor-styles-wrapper h2,
.l-gutenberg h2 {
  font-size: var(--font-size24);
  font-weight: 600;
  position: relative;
  padding: 0 0 0 7.2rem;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper h2,
  .l-gutenberg h2 {
    padding: 0 0 0 4.8rem;
  }
}
.editor-styles-wrapper h2::before,
.l-gutenberg h2::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 4.8rem;
  height: 0.1rem;
  background: var(--base-color);
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper h2::before,
  .l-gutenberg h2::before {
    width: 2.4rem;
  }
}
.editor-styles-wrapper h3,
.l-gutenberg h3 {
  font-size: var(--font-size20);
  font-weight: 600;
  position: relative;
  padding: 0 0 0 5.6rem;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper h3,
  .l-gutenberg h3 {
    padding: 0 0 0 4.8rem;
  }
}
.editor-styles-wrapper h3::before,
.l-gutenberg h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 3.2rem;
  height: 0.1rem;
  background: var(--base-color);
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper h3::before,
  .l-gutenberg h3::before {
    width: 2.4rem;
  }
}
.editor-styles-wrapper h4,
.l-gutenberg h4 {
  font-size: var(--font-size18);
  font-weight: 600;
  position: relative;
  padding: 0 0 0 4.8rem;
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper h4,
  .l-gutenberg h4 {
    font-size: 1.5rem;
  }
}
.editor-styles-wrapper h4::before,
.l-gutenberg h4::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 2.4rem;
  height: 0.1rem;
  background: var(--base-color);
}
.editor-styles-wrapper ul,
.editor-styles-wrapper ol,
.l-gutenberg ul,
.l-gutenberg ol {
  padding: 0 0 0 1.5em;
  font-size: var(--font-size15);
}
.editor-styles-wrapper ul,
.l-gutenberg ul {
  list-style-type: disc;
}
.editor-styles-wrapper ol,
.l-gutenberg ol {
  list-style-type: decimal;
}
.editor-styles-wrapper table,
.l-gutenberg table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}
.editor-styles-wrapper table td,
.l-gutenberg table td {
  padding: 1.6rem;
  border: 0.1rem solid var(--base-color);
  font-size: var(--font-size15);
}
@media screen and (max-width: 800px) {
  .editor-styles-wrapper table td,
  .l-gutenberg table td {
    padding: 0.8rem;
  }
}

.l-case {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-auto-columns: 1fr;
  gap: 0px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-case__head l-case__head l-case__head l-case__head l-case__head l-case__head l-case__more l-case__more l-case__more l-case__more l-case__more l-case__more ." ". l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body l-case__body";
  padding: 12.8rem 0;
}
@media screen and (max-width: 800px) {
  .l-case {
    display: flex;
    flex-wrap: wrap;
    padding: 6.4rem 0 6.4rem 1.6rem;
  }
}
.l-case__head {
  grid-area: l-case__head;
}
@media screen and (max-width: 800px) {
  .l-case__head {
    flex: 1;
  }
}
.l-case__more {
  grid-area: l-case__more;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  padding-bottom: 6.4rem;
}
@media screen and (max-width: 800px) {
  .l-case__more {
    flex: 1;
    padding: 0 1.6rem 0 0;
  }
}
.l-case__body {
  grid-area: l-case__body;
  overflow: hidden;
  padding: 0 0 6.4rem 0;
}
@media screen and (max-width: 800px) {
  .l-case__body {
    width: 100%;
    padding: 0;
  }
}

.l-company {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  gap: 0px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-company__txtbox l-company__txtbox l-company__txtbox l-company__txtbox l-company__txtbox l-company__txtbox l-company__imgbox l-company__imgbox l-company__imgbox l-company__imgbox l-company__imgbox l-company__imgbox .";
  background: var(--main);
  color: var(--white);
  width: 100%;
  height: 100vh;
  overflow: hidden;
  /* ----- 動き ----- */
}
@media screen and (max-width: 800px) {
  .l-company {
    display: flex;
    flex-wrap: wrap;
    height: auto;
  }
}
.l-company__txtbox {
  grid-area: l-company__txtbox;
  height: 100vh;
}
@media screen and (max-width: 800px) {
  .l-company__txtbox {
    width: 100%;
    height: auto;
    padding: 6.4rem 1.6rem;
  }
}
.l-company__inner {
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
.l-company__btn {
  margin-top: 6.4rem;
}
@media screen and (max-width: 800px) {
  .l-company__btn {
    margin-top: 4.8rem;
  }
}
.l-company__imgbox {
  grid-area: l-company__imgbox;
}
@media screen and (max-width: 800px) {
  .l-company__imgbox {
    width: 100%;
    height: 50vh;
    overflow: hidden;
  }
}
.l-company .reason-photo-area {
  width: 100%;
  display: flex;
  gap: 2.4rem;
  transform: rotate(8deg);
}
@media screen and (max-width: 800px) {
  .l-company .reason-photo-area {
    transform: rotate(0deg);
  }
}
.l-company .photo-column {
  width: 50%;
  position: relative;
}
.l-company .photo-scroll {
  display: flex;
  flex-direction: column;
  animation: scrollUp 32s linear infinite;
}
.l-company .photo-scroll.reverse {
  animation: scrollDown 32s linear infinite;
}
.l-company .photo-wrap {
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  margin-bottom: 2.4rem;
}
.l-company .photo-scroll img {
  width: 100%;
  height: 48rem;
  object-fit: cover;
}
@media screen and (max-width: 800px) {
  .l-company .photo-scroll img {
    height: 24rem;
  }
}
@keyframes scrollUp {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-50%);
  }
}
@keyframes scrollDown {
  0% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(0);
  }
}

.l-service {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  grid-auto-columns: 1fr;
  gap: 0 4.8rem;
  grid-auto-flow: row;
  grid-template-areas: "l-service__imgbox l-service__imgbox l-service__imgbox l-service__imgbox l-service__imgbox l-service__imgbox l-service__imgbox l-service__txtbox l-service__txtbox l-service__txtbox l-service__txtbox l-service__txtbox l-service__txtbox .";
  padding: 12.8rem 0;
  position: relative;
  /* ----- elements ----- */
}
@media screen and (max-width: 800px) {
  .l-service {
    display: flex;
    gap: 0 2.4rem;
    padding: 6.4rem 1.6rem;
  }
}
.l-service__imgbox {
  grid-area: l-service__imgbox;
}
@media screen and (max-width: 800px) {
  .l-service__imgbox {
    display: none;
  }
}
.l-service__txtbox {
  grid-area: l-service__txtbox;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: flex-end;
}
@media screen and (max-width: 800px) {
  .l-service__txtbox {
    width: 100%;
  }
}
.l-service .business-image-area {
  position: relative;
  width: 100%;
  height: calc(100vh - 25.6rem);
  flex-shrink: 0;
}
@media screen and (max-width: 800px) {
  .l-service .business-image-area {
    height: auto;
  }
}
.l-service .business-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
  border-radius: 0 3.2rem 3.2rem 0;
}
.l-service .business-image.show {
  opacity: 1;
  z-index: 2;
}
.l-service .business-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray);
}
.l-service .business-item {
  border-bottom: 1px solid var(--gray);
}
.l-service .business-item a {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  padding: 3.2rem 0;
  font-size: var(--font-size24);
  position: relative;
}
@media screen and (max-width: 800px) {
  .l-service .business-item a {
    padding: 2.4rem 0;
    flex-wrap: wrap;
  }
}
.l-service .business-item a::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: var(--gray);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
  transition: all 0.2s;
}
@media screen and (max-width: 800px) {
  .l-service .business-item a::after {
    content: none;
  }
}
@media screen and (min-width: 799px) {
  .l-service .business-item a:hover {
    padding-left: 3.2rem;
  }
  .l-service .business-item a:hover::after {
    background: var(--main);
    width: 1.2rem;
    height: 1.2rem;
    right: -0.2rem;
  }
}
@media screen and (min-width: 799px) {
  .l-service .business-spimg {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .l-service .business-spimg {
    width: calc((100% - 2.4rem) / 2);
  }
  .l-service .business-spimg img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    aspect-ratio: 1/1;
  }
}
@media screen and (max-width: 800px) {
  .l-service .business-sptxt {
    width: calc((100% - 2.4rem) / 2);
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1.6rem;
    font-size: 1.6rem;
  }
}
.l-service .number {
  font-size: var(--font-size24);
  font-weight: 500;
  color: var(--gray-dark);
}
@media screen and (max-width: 800px) {
  .l-service .number {
    line-height: 1;
  }
}

.l-news {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0 4.8rem;
  grid-auto-flow: row;
  grid-template-areas: ". l-news__head l-news__head l-news__head l-news__body l-news__body l-news__body l-news__body l-news__body l-news__body l-news__body l-news__body l-news__body .";
  padding: 12.8rem 0;
}
@media screen and (max-width: 800px) {
  .l-news {
    display: flex;
    flex-wrap: wrap;
    padding: 6.4rem 1.6rem;
  }
}
.l-news__head {
  grid-area: l-news__head;
}
@media screen and (max-width: 800px) {
  .l-news__head {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
  }
}
.l-news__body {
  grid-area: l-news__body;
}
@media screen and (max-width: 800px) {
  .l-news__body {
    width: 100%;
  }
}

.l-blog {
  align-items: start;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 120px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-blog-grid01 l-blog-grid01 l-blog-grid01 l-blog-grid02 l-blog-grid02 l-blog-grid02 l-blog-grid02 l-blog-grid02 l-blog-grid02 l-blog-grid02 .";
  /* ----- grid01 elements ----- */
  /* ----- grid02 elements ----- */
}
@media screen and (max-width: 800px) {
  .l-blog {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 3.2rem 0;
  }
}
.l-blog-grid01 {
  grid-area: l-blog-grid01;
  position: sticky;
  top: calc((100vh - 23.4rem) / 2);
  left: 0;
  width: 100%;
}
@media screen and (max-width: 800px) {
  .l-blog-grid01 {
    position: static;
  }
}
.l-blog__btn {
  margin-top: 4.8rem;
}
@media screen and (max-width: 800px) {
  .l-blog__btn {
    margin-top: 0;
    width: 100%;
  }
}
@media screen and (min-width: 799px) {
  .l-blog .sp-btn {
    display: none;
  }
}
@media screen and (max-width: 800px) {
  .l-blog .sp-btn {
    display: block;
    width: 100%;
  }
}
.l-blog-grid02 {
  grid-area: l-blog-grid02;
  border-top: 1px solid var(--gray);
}
@media screen and (max-width: 800px) {
  .l-blog-grid02 {
    width: 100%;
  }
}
.l-blog__card {
  border-bottom: 1px solid var(--gray);
  padding: 4.8rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
}
@media screen and (max-width: 800px) {
  .l-blog__card {
    padding: 2.4rem 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.2rem;
  }
}
.l-blog__thumb {
  width: 24rem;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .l-blog__thumb {
    width: 100%;
    aspect-ratio: 2/1;
  }
}
.l-blog__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s;
}
.l-blog__thumb a:hover img {
  transform: scale(1.1);
}
.l-blog__meta {
  width: calc(100% - 26.4rem);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem 0;
}
@media screen and (max-width: 800px) {
  .l-blog__meta {
    width: 100%;
  }
}
.l-blog__meta > * {
  width: 100%;
}
.l-blog__title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (max-width: 800px) {
  .l-blog__title {
    font-size: 2rem;
  }
}
.l-blog__title a:hover {
  color: var(--main);
}

.l-floating {
  width: 100%;
  height: 2px;
  position: fixed;
  bottom: 0;
  left: 0;
  background: var(--main);
}

.l-sitemap {
  display: flex;
  flex-wrap: wrap;
  gap: 4.8rem 0;
  color: var(--white);
  padding: 4.8rem 1.6rem;
  /* ----- l-footer-nav ----- */
  /* ----- l-footer-cta ----- */
}
.l-sitemap-nav {
  width: 100%;
  padding: 0;
  display: flex;
  gap: 0;
  font-weight: 500;
}
.l-sitemap-nav ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 0.8rem 0;
}
.l-sitemap-nav ul > * {
  width: 100%;
}
.l-sitemap-nav ul li {
  display: flex;
  justify-content: center;
  text-align: center;
}
.l-sitemap-nav ul a {
  font-size: 2.4rem;
  color: var(--white);
}
.l-sitemap-cta {
  width: 100%;
  padding: 0;
  display: block;
}
.l-sitemap-cta__box {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.8rem;
  padding: 2.4rem 1.6rem;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.6rem 0;
  line-height: 1;
}
.l-sitemap-cta__phone a {
  font-size: var(--font-size40);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0 1.6rem;
  white-space: nowrap;
}
.l-sitemap-cta__contact {
  line-height: 1.5;
  width: 100%;
}
.l-sitemap-cta__contact a {
  font-size: var(--font-size20);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.6rem;
  white-space: nowrap;
  background: var(--white);
  border-radius: 10rem;
  color: var(--main-dark);
  padding: 1.2rem;
  letter-spacing: 0.04em;
}
.l-sitemap-cta__contact a svg {
  transition: all 0.5s;
}
.l-sitemap-cta__contact a:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple-main 1.5s infinite;
  color: var(--white);
  background: var(--main);
}
.l-sitemap-cta__contact a:hover svg {
  fill: var(--white);
}

.l-contact {
  padding: 12.8rem 0;
  background: var(--white);
  /* ----- elements ----- */
  /* ----- マウスストーカー ----- */
}
@media screen and (max-width: 800px) {
  .l-contact {
    padding: 6.4rem 0;
  }
}
.l-contact .marquee {
  overflow: hidden;
  font-size: var(--font-size160);
  font-weight: 500;
  line-height: 1;
  display: flex;
  align-items: center;
  position: relative;
  color: var(--gray);
  transition: all 0.4s;
}
@media screen and (max-width: 800px) {
  .l-contact .marquee {
    font-size: 8rem;
  }
}
.l-contact .marquee:hover {
  cursor: pointer;
}
.l-contact .marquee__inner {
  display: flex;
  animation: marquee 30s linear infinite;
  animation-play-state: running;
}
.l-contact .marquee:hover .marquee__inner {
  animation-play-state: paused;
}
.l-contact .marquee:hover .marquee-icon {
  height: 1em;
}
.l-contact .marquee-item {
  display: flex;
  align-items: center;
  margin-right: 4rem;
  white-space: nowrap;
}
.l-contact .marquee-item span {
  display: inline-block;
}
.l-contact .marquee-icon {
  height: 0.8em;
  width: auto;
  margin-left: 1.6rem;
  border-radius: 1.6rem;
  transition: all 0.4s;
}
@keyframes marquee {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}
.l-contact .cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 24rem;
  height: 24rem;
  background: var(--main-light);
  mix-blend-mode: difference;
  border-radius: 50%;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--black);
  font-size: var(--font-size32);
  font-weight: 500;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.2s ease, opacity 0.2s ease;
  z-index: 9999;
  opacity: 0;
}
@media screen and (max-width: 800px) {
  .l-contact .cursor {
    display: none;
  }
}
.l-contact .cursor span {
  pointer-events: none;
}
.l-contact .cursor.active {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.l-404 {
  margin-top: 12.8rem;
  width: 100%;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -12.8rem;
}
@media screen and (max-width: 800px) {
  .l-404 {
    margin-top: 8rem;
    margin-bottom: -6.4rem;
  }
}

.l-sidebar__block + .l-sidebar__block {
  margin-top: 4.8rem;
}
.l-sidebar__title {
  background: var(--main);
  color: var(--white);
  padding: 0.8rem 2.4rem;
  margin-bottom: 2.4rem;
  border-radius: 0.8rem;
  text-align: center;
}
.l-sidebar__tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.l-sidebar__tagcloud a {
  border: 1px solid var(--gray);
  border-radius: 10rem;
  padding: 0.4rem 0.8rem;
  letter-spacing: 0;
  line-height: 1;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
.l-sidebar__tagcloud a:hover {
  background: rgb(255, 255, 255);
  color: var(--main);
  border: 1px solid var(--main);
}
.l-sidebar-recent {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem 0;
}
.l-sidebar-recent__item {
  width: 100%;
}
.l-sidebar-recent__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.l-sidebar-recent__link:hover {
  opacity: 0.7;
}
.l-sidebar-recent__thumb {
  width: 12rem;
}
.l-sidebar-recent__meta {
  width: calc(100% - 13.6rem);
}
.l-sidebar-recent__date {
  font-size: 1.4rem;
  font-weight: 600;
}
.l-external {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 120px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". . l-external-grid01 l-external-grid01 l-external-grid01 l-external-grid01 l-external-grid02 l-external-grid02 l-external-grid02 l-external-grid02 . .";
  background: var(--gray-light);
  padding: 12rem 0;
}
@media screen and (max-width: 800px) {
  .l-external {
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem 0;
    padding: 6rem 4.8rem;
  }
}
.l-external-grid01 {
  grid-area: l-external-grid01;
}
.l-external-grid02 {
  grid-area: l-external-grid02;
  padding-top: 6rem;
}
.l-external-cta__link {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  background: linear-gradient(to bottom, #fff 0%, var(--main) 20%, var(--main) 100%);
  border-radius: 0 2.4rem 0 2.4rem;
  overflow: hidden;
  line-height: 1.2;
}
.l-external-cta__link:hover {
  -webkit-animation: pulse 2s infinite;
  animation: ripple-main 1.5s infinite;
}
.l-external-cta__imgbox {
  width: 100%;
}
.l-external-cta__imgbox img {
  width: 100%;
  height: auto;
  aspect-ratio: 48/64;
  object-fit: cover;
  object-position: center;
  border-radius: 0 2.4rem 0 2.4rem;
}
.l-external-cta__txtbox {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  padding: 2.4rem 0;
}
.l-external-cta__txtbox .en {
  font-size: 3.2rem;
  font-weight: 500;
  color: var(--white);
}
.l-external-cta__txtbox .ja {
  color: var(--white);
}

.l-about {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  gap: 60px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 l-about-grid01 ." ". l-about-grid02 l-about-grid02 l-about-grid02 l-about-grid02 l-about-grid02 l-about-grid02 l-about-grid02 l-about-grid03 l-about-grid03 l-about-grid03 l-about-grid03" "l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04 l-about-grid04";
  /* ----- elements ----- */
}
@media screen and (max-width: 800px) {
  .l-about {
    display: flex;
    flex-wrap: wrap;
    gap: 3.2rem 0;
    padding: 0 1.6rem;
  }
}
.l-about-grid01 {
  grid-area: l-about-grid01;
}
@media screen and (max-width: 800px) {
  .l-about-grid01 {
    width: 100%;
    order: 1;
  }
}
.l-about-grid02 {
  grid-area: l-about-grid02;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  .l-about-grid02 {
    width: 100%;
    order: 3;
  }
}
.l-about-grid03 {
  grid-area: l-about-grid03;
}
@media screen and (max-width: 800px) {
  .l-about-grid03 {
    width: 100%;
    order: 2;
  }
}
.l-about-grid03 img {
  width: 100%;
  height: auto;
  border-radius: 2.4rem 0 0 2.4rem;
}
.l-about-grid04 {
  grid-area: l-about-grid04;
}
@media screen and (max-width: 800px) {
  .l-about-grid04 {
    width: calc(100% + 3.2rem);
    margin: 0 -1.6rem;
    order: 4;
    overflow-x: hidden;
  }
}
.l-about__btn {
  margin-top: 4.8rem;
}
@media screen and (max-width: 800px) {
  .l-about__btn {
    margin-top: 3.2rem;
  }
}

.l-concept {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 60px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 l-concept-grid01 ." ". l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 l-concept-grid02 .";
}
@media screen and (max-width: 800px) {
  .l-concept {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 3.2rem 0;
  }
}
.l-concept-grid01 {
  grid-area: l-concept-grid01;
}
@media screen and (max-width: 800px) {
  .l-concept-grid01 {
    width: 100%;
  }
}
.l-concept-grid02 {
  grid-area: l-concept-grid02;
}
@media screen and (max-width: 800px) {
  .l-concept-grid02 {
    width: 100%;
  }
}
.l-concept-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 3.2rem 0;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
}
.l-concept-list li {
  max-width: 80rem;
}
.l-concept-list li:nth-child(1) {
  margin: 0 0 0 0;
}
.l-concept-list li:nth-child(2) {
  margin: 0 -6.4rem 0 6.4rem;
}
@media screen and (max-width: 800px) {
  .l-concept-list li:nth-child(2) {
    margin: 0;
  }
}
.l-concept-list li:nth-child(3) {
  margin: 0 -12.8rem 0 12.8rem;
}
@media screen and (max-width: 800px) {
  .l-concept-list li:nth-child(3) {
    margin: 0;
  }
}
.l-concept-list li:nth-child(4) {
  margin: 0 -6.4rem 0 6.4rem;
}
@media screen and (max-width: 800px) {
  .l-concept-list li:nth-child(4) {
    margin: 0;
  }
}
.l-concept-list li:nth-child(5) {
  margin: 0 -12.8rem 0 12.8rem;
}
@media screen and (max-width: 800px) {
  .l-concept-list li:nth-child(5) {
    margin: 0;
  }
}
.l-concept-list li:nth-child(6) {
  margin: 0 -19.2rem 0 19.2rem;
}
@media screen and (max-width: 800px) {
  .l-concept-list li:nth-child(6) {
    margin: 0;
  }
}

/* ----- c-heading02 ----- */
.c-heading02 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2.4rem;
  line-height: 1.2;
  color: var(--main);
}
@media screen and (max-width: 800px) {
  .c-heading02 {
    gap: 1.2rem;
  }
}
.c-heading02.left {
  align-items: flex-start;
}
@media screen and (max-width: 800px) {
  .c-heading02.left {
    align-items: center;
    text-align: center;
  }
}
.c-heading02.center {
  align-items: center;
  text-align: center;
}
.c-heading02.right {
  align-items: flex-end;
}
.c-heading02__en {
  font-size: 6.4rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .c-heading02__en {
    font-size: 3.2rem;
  }
}
.c-heading02__ja {
  font-weight: 600;
}
@media screen and (max-width: 800px) {
  .c-heading02__ja {
    font-size: 1.8rem;
  }
}

/* ----- c-table ----- */
.c-table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  border-top: 1px solid var(--gray-dark);
}
.c-table th {
  border-bottom: 1px solid var(--gray-dark);
  width: 30%;
  padding: 2.4rem 0 2.4rem 6.4rem;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .c-table th {
    padding: 1.6rem 0;
  }
}
.c-table td {
  border-bottom: 1px solid var(--gray-dark);
  width: 70%;
  padding: 2.4rem 6.4rem;
}
@media screen and (max-width: 800px) {
  .c-table td {
    padding: 1.6rem 0 1.6rem 1.6rem;
  }
}

@media screen and (max-width: 800px) {
  .c-btn01 {
    width: 100%;
  }
}
.c-btn01 a {
  min-width: 24rem;
  height: 6.4rem;
  border-radius: 0 1.6rem 0 1.6rem;
  background: var(--main);
  color: var(--white);
  padding: 0 4.8rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  letter-spacing: 0.1em;
  display: inline-flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 800px) {
  .c-btn01 a {
    height: 5.6rem;
    padding: 0 1.2rem;
    display: flex;
    width: 100%;
    min-width: auto;
  }
}
.c-btn01 a:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple-main 1.5s infinite;
}

.c-link {
  /* ----- c-link-underline ----- */
  /* ----- c-link-white ----- */
  /* ----- c-link-main ----- */
  /* ----- c-link-black ----- */
  /* ----- c-link-alpha ----- */
  /* ----- c-link-3d ----- */
}
.c-link-underline--main {
  position: relative;
  display: inline-block;
  color: var(--main);
  padding-bottom: 0;
}
.c-link-underline--main::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: var(--main);
  z-index: 1;
}
.c-link-underline--main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--white);
  z-index: 2;
  transition: width 0.3s ease-in-out;
}
.c-link-underline--main span {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--main);
  z-index: 3;
  transition: width 0.3s ease-in-out;
  transition-delay: 0.3s;
  pointer-events: none;
}
@media screen and (min-width: 799px) {
  .c-link-underline--main:hover::after {
    width: 100%;
  }
  .c-link-underline--main:hover span {
    width: 100%;
  }
}
.c-link-underline--black {
  position: relative;
  display: inline-block;
  color: var(--base-color);
  padding-bottom: 0;
}
.c-link-underline--black::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: var(--base-color);
  z-index: 1;
}
.c-link-underline--black::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--white);
  z-index: 2;
  transition: width 0.3s ease-in-out;
}
.c-link-underline--black span {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--base-color);
  z-index: 3;
  transition: width 0.3s ease-in-out;
  transition-delay: 0.3s;
  pointer-events: none;
}
@media screen and (min-width: 799px) {
  .c-link-underline--black:hover::after {
    width: 100%;
  }
  .c-link-underline--black:hover span {
    width: 100%;
  }
}
.c-link-underline--gray-dark {
  position: relative;
  display: inline-block;
  color: var(--gray-dark);
  padding-bottom: 0;
}
.c-link-underline--gray-dark::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: var(--gray-dark);
  z-index: 1;
}
.c-link-underline--gray-dark::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--white);
  z-index: 2;
  transition: width 0.3s ease-in-out;
}
.c-link-underline--gray-dark span {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--gray-dark);
  z-index: 3;
  transition: width 0.3s ease-in-out;
  transition-delay: 0.3s;
  pointer-events: none;
}
@media screen and (min-width: 799px) {
  .c-link-underline--gray-dark:hover::after {
    width: 100%;
  }
  .c-link-underline--gray-dark:hover span {
    width: 100%;
  }
}
.c-link-underline--white {
  position: relative;
  display: inline-block;
  color: var(--white);
  padding-bottom: 0;
}
.c-link-underline--white::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 100%;
  height: 1px;
  background-color: var(--white);
  z-index: 1;
}
.c-link-underline--white::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--white);
  z-index: 2;
  transition: width 0.3s ease-in-out;
}
.c-link-underline--white span {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--base-color);
  z-index: 3;
  transition: width 0.3s ease-in-out;
  transition-delay: 0.3s;
  pointer-events: none;
}
@media screen and (min-width: 799px) {
  .c-link-underline--white:hover::after {
    width: 100%;
  }
  .c-link-underline--white:hover span {
    width: 100%;
  }
}
.c-link-white {
  position: relative;
  display: inline-block;
  color: var(--white);
  padding-bottom: 0;
}
.c-link-white::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--white);
  transition: width 0.3s ease-in-out;
}
@media screen and (min-width: 799px) {
  .c-link-white:hover::after {
    width: 100%;
  }
}
.c-link-white.block {
  display: block;
}
.c-link-main {
  position: relative;
  display: inline-block;
  color: var(--main);
  padding-bottom: 0;
}
.c-link-main::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--main);
  transition: width 0.3s ease-in-out;
}
@media screen and (min-width: 799px) {
  .c-link-main:hover::after {
    width: 100%;
  }
}
.c-link-main.block {
  display: block;
}
.c-link-black {
  position: relative;
  display: inline-block;
  color: var(--base-color);
  padding-bottom: 0;
}
.c-link-black::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--base-color);
  transition: width 0.3s ease-in-out;
}
@media screen and (min-width: 799px) {
  .c-link-black:hover::after {
    width: 100%;
  }
}
.c-link-black.block {
  display: block;
}
.c-link-alpha {
  color: var(--main);
}
.c-link-alpha:hover {
  opacity: 0.7;
}
.c-link-3d {
  -webkit-animation: icon3d 200ms 10;
  animation: icon3d 200ms 10;
  z-index: 9999;
  color: var(--main);
}
.c-link-3d:hover {
  -webkit-animation: icon3d 200ms infinite;
  animation: icon3d 200ms infinite;
}
@keyframes icon3d {
  0% {
    text-shadow: 0.5rem 0.4rem pink, -0.5rem -0.6rem skyblue;
  }
  25% {
    text-shadow: -0.5rem -0.6rem pink, 0.5rem 0.4rem skyblue;
  }
  50% {
    text-shadow: 0.5rem -0.4rem pink, -0.8rem 0.4rem skyblue;
  }
  75% {
    text-shadow: -0.8rem -0.4rem pink, -0.5rem -0.4rem skyblue;
  }
  100% {
    text-shadow: -0.5rem 0 pink, 0.5rem -0.4rem skyblue;
  }
}

.c-cards {
  /* ----- c-cards-news ----- */
  /* ----- c-cards-blog ----- */
  /* ----- c-cards-case ----- */
}
.c-cards-news {
  border-top: 1px solid var(--gray);
}
.c-cards-news__item {
  border-bottom: 1px solid var(--gray);
  position: relative;
  padding: 4.8rem 10.4rem 4.8rem 4.8rem;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem 0;
  font-weight: 500;
  transition: all 0.4s;
}
@media screen and (max-width: 800px) {
  .c-cards-news__item {
    padding: 2.4rem 0;
  }
}
.c-cards-news__item > * {
  width: 100%;
}
.c-cards-news__item::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: var(--gray);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 4.8rem;
  transform: translate(0, -50%);
  transition: all 0.2s;
}
@media screen and (max-width: 800px) {
  .c-cards-news__item::after {
    content: none;
  }
}
@media screen and (min-width: 799px) {
  .c-cards-news__item:hover {
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    border-color: transparent;
  }
  .c-cards-news__item:hover::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--white);
  }
  .c-cards-news__item:hover::after {
    background: var(--main);
    width: 1.2rem;
    height: 1.2rem;
    right: 4.6rem;
  }
}
.c-cards-news__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.c-cards-blog {
  border-top: 1px solid var(--gray);
}
.c-cards-blog__item {
  border-bottom: 1px solid var(--gray);
  position: relative;
  padding: 4.8rem 10.4rem 4.8rem 4.8rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4.8rem;
  font-weight: 500;
  transition: all 0.4s;
}
@media screen and (max-width: 800px) {
  .c-cards-blog__item {
    padding: 2.4rem 0;
    gap: 1.6rem 0;
  }
}
.c-cards-blog__item::after {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  background: var(--gray);
  border-radius: 50%;
  position: absolute;
  top: 50%;
  right: 4.8rem;
  transform: translate(0, -50%);
  transition: all 0.2s;
}
@media screen and (max-width: 800px) {
  .c-cards-blog__item::after {
    content: none;
  }
}
@media screen and (min-width: 799px) {
  .c-cards-blog__item:hover {
    background: var(--white);
    box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
    border-color: transparent;
  }
  .c-cards-blog__item:hover::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--white);
  }
  .c-cards-blog__item:hover::after {
    background: var(--main);
    width: 1.2rem;
    height: 1.2rem;
    right: 4.6rem;
  }
  .c-cards-blog__item:hover .c-cards-blog__imgbox img {
    transform: scale(1.2);
  }
}
.c-cards-blog__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.c-cards-blog__imgbox {
  width: 20rem;
  border-radius: 0.8rem;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .c-cards-blog__imgbox {
    width: 100%;
  }
}
.c-cards-blog__imgbox img {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  object-fit: cover;
  object-position: center center;
  transition: all 0.4s;
}
.c-cards-blog__imgbox .noimage {
  width: 100%;
  height: auto;
  aspect-ratio: 3/2;
  transition: all 0.4s;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--main-light);
}
.c-cards-blog__imgbox .noimage__img {
  max-width: 12rem;
  width: 100%;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center center;
  transition: all 0.4s;
}
.c-cards-blog__txtbox {
  width: calc(100% - 24.8rem);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem 0;
}
@media screen and (max-width: 800px) {
  .c-cards-blog__txtbox {
    width: 100%;
  }
}
.c-cards-blog__txtbox > * {
  width: 100%;
}
.c-cards-case {
  display: flex;
  flex-wrap: wrap;
  gap: 9.6rem 4.8rem;
}
@media screen and (max-width: 800px) {
  .c-cards-case {
    gap: 4.8rem 0;
  }
}
.c-cards-case__item {
  width: calc((100% - 9.6rem) / 3);
  position: relative;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 4.8rem 0;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .c-cards-case__item {
    width: 100%;
    gap: 1.6rem 0;
  }
}
.c-cards-case__item.front {
  max-width: 48rem;
  width: 100%;
}
.c-cards-case__item:hover .rayer01 {
  transform: translate(-50%, -50%) scale(1.2);
}
.c-cards-case__link {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.c-cards-case__imgbox {
  width: 100%;
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  background: var(--main-dark);
}
.c-cards-case__imgbox .rayer00 {
  width: 100%;
  height: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center center;
  filter: blur(1.2rem);
  transform: scale(1.6);
  opacity: 0.8;
}
.c-cards-case__imgbox .rayer01 {
  width: 102%;
  height: 50%;
  object-fit: cover;
  object-position: center center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  transition: transform 0.4s ease;
}
.c-cards-case__txtbox {
  width: 100%;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem 0;
}
.c-cards-case__txtbox > * {
  width: 100%;
}
.c-cards-case__txtbox a {
  position: relative;
  z-index: 11;
}

.c-icon {
  /* ----- c-icon-size ----- */
  /* ----- c-icon-color ----- */
}
.c-icon-size24 {
  width: 2.4rem;
  height: auto;
  aspect-ratio: 1/1;
}
.c-icon-white {
  fill: var(--white);
  vertical-align: middle;
}
.c-icon-main {
  fill: var(--main);
  vertical-align: middle;
}

.c-flex {
  /* ----- c-flex-gap8 ----- */
  /* ----- c-flex-gap16 ----- */
  /* ----- c-flex-gap24 ----- */
  /* ----- c-flex-gap32 ----- */
  /* ----- c-flex-gap40 ----- */
  /* ----- c-flex-gap48 ----- */
  /* ----- c-flex-gap56 ----- */
  /* ----- c-flex-gap64 ----- */
}
.c-flex-gap8 {
  display: inline-flex;
  align-items: center;
  gap: 0 0.8rem;
}
.c-flex-gap16 {
  display: inline-flex;
  align-items: center;
  gap: 0 1.6rem;
}
.c-flex-gap24 {
  display: inline-flex;
  align-items: center;
  gap: 0 2.4rem;
}
.c-flex-gap32 {
  display: inline-flex;
  align-items: center;
  gap: 0 3.2rem;
}
.c-flex-gap40 {
  display: inline-flex;
  align-items: center;
  gap: 0 4rem;
}
.c-flex-gap48 {
  display: inline-flex;
  align-items: center;
  gap: 0 4.8rem;
}
.c-flex-gap56 {
  display: inline-flex;
  align-items: center;
  gap: 0 5.6rem;
}
.c-flex-gap64 {
  display: inline-flex;
  align-items: center;
  gap: 0 6.4rem;
}

.c-catlist ul {
  margin: 0 0 0 2.4rem;
}
.c-catlist a {
  color: var(--gray-dark);
}
.c-catlist a.active {
  color: var(--base-color);
  font-weight: 500;
}
.c-catlist a:hover {
  color: var(--base-color);
}

.c-taglist {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  position: relative;
  z-index: 11;
}
.c-taglist.right {
  justify-content: flex-end;
}
.c-taglist li {
  line-height: 1;
}
.c-taglist a {
  font-size: 1.4rem;
  border: 1px solid var(--gray);
  border-radius: 10rem;
  padding: 0.4rem 0.8rem;
  letter-spacing: 0;
  line-height: 1;
  display: block;
}
.c-taglist a:hover {
  background: rgb(255, 255, 255);
  color: var(--main);
  border: 1px solid var(--main);
}

.c-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 1.6rem;
  line-height: 1.6;
  font-weight: 500;
  position: relative;
  z-index: 11;
}
@media screen and (max-width: 800px) {
  .c-meta {
    gap: 0.8rem;
    font-size: 1.4rem;
  }
}
.c-meta > span:nth-child(1) {
  font-size: 1.4rem;
}
@media screen and (max-width: 800px) {
  .c-meta > span:nth-child(1) {
    width: 100%;
  }
}
.c-meta > span:nth-child(2) {
  transform: rotate(-45deg);
  font-size: 2.4rem;
  line-height: 1;
}
@media screen and (max-width: 800px) {
  .c-meta > span:nth-child(2) {
    display: none;
  }
}
.c-meta > span:nth-child(3) {
  font-size: 1.4rem !important;
}
.c-meta > span:nth-child(3):hover {
  opacity: 0.7;
}

.c-bread {
  font-size: var(--font-size14);
  font-weight: 500;
  position: relative;
  /*
  &::before {
      content: "";
      width: 0.8rem;
      height: 0.8rem;
      background: var(--main);
      border-radius: 0.4rem;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translate(0, -0.4rem);

      @include sp {
          top: 0.8rem;
          transform: translate(0, 0);
      }
  }
  */
}
@media screen and (max-width: 800px) {
  .c-bread {
    font-size: 1.2rem;
  }
}
.c-bread a {
  position: relative;
  display: inline-block;
}
.c-bread a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background-color: var(--base-color);
  transition: width 0.3s ease-in-out;
}
.c-bread a:hover::after {
  width: 100%;
}
.c-bread .current-item {
  white-space: normal;
}

.c-pagenavi {
  text-align: center;
  margin-top: 9.6rem;
}
@media screen and (max-width: 800px) {
  .c-pagenavi {
    margin-top: 6.4rem;
  }
}
.c-pagenavi .nav-links a {
  border: 0.1rem solid var(--gray);
  color: var(--main);
  display: inline-block;
  padding: 0 0.6rem;
  transition: all 0.5s;
}
.c-pagenavi .nav-links a:hover {
  border: 0.1rem solid var(--main);
  background: var(--main);
  color: var(--white);
}
.c-pagenavi .nav-links span {
  border: 0.1rem solid var(--main-light);
  display: inline-block;
  padding: 0 0.6rem;
  background: var(--main-light);
}

.wp-pagenavi {
  font-size: 1.6rem !important;
  font-weight: 500 !important;
}
.wp-pagenavi .pages {
  border: 0.1rem solid var(--gray) !important;
  background: var(--white) !important;
  color: var(--main) !important;
  padding: 0 1rem !important;
  line-height: 4rem !important;
  margin: 0 0.5rem !important;
  display: inline-block;
}
.wp-pagenavi a {
  border: 0.1rem solid var(--gray) !important;
  line-height: 4rem !important;
  padding: 0 1rem !important;
  display: inline-block !important;
  color: var(--main) !important;
  background: var(--white) !important;
  text-decoration: none !important;
  position: relative !important;
  margin: 0 0.5rem !important;
  transition: 0.3s !important;
  min-width: 4rem !important;
}
.wp-pagenavi a:hover {
  border: 0.1rem solid var(--main) !important;
  text-decoration: none !important;
  position: relative !important;
  background: var(--main) !important;
  color: var(--white) !important;
}
.wp-pagenavi a.nextpostslink {
  border: 0.1rem solid var(--gray) !important;
  line-height: 4rem !important;
  padding: 0 1rem !important;
  display: inline-block !important;
  color: var(--main) !important;
  text-decoration: none !important;
  position: relative !important;
  margin: 0 0.5rem !important;
  transition: 0.3s !important;
}
.wp-pagenavi a.nextpostslink:hover {
  background: var(--main) !important;
  color: var(--white) !important;
}
.wp-pagenavi a.previouspostslink {
  border: 0.1rem solid var(--gray) !important;
  line-height: 4rem !important;
  padding: 0 1rem !important;
  display: inline-block !important;
  color: var(--main) !important;
  text-decoration: none !important;
  position: relative !important;
  margin: 0 0.5rem !important;
  transition: 0.3s !important;
  background: var(--white);
}
.wp-pagenavi a.previouspostslink:hover {
  background: var(--main) !important;
  color: var(--white) !important;
}
.wp-pagenavi .current {
  border: 0.1rem solid var(--main) !important;
  line-height: 4rem !important;
  padding: 0 1rem !important;
  display: inline-block !important;
  color: var(--white) !important;
  text-decoration: none !important;
  position: relative !important;
  margin: 0 0.5rem !important;
  background: var(--main) !important;
  min-width: 4rem !important;
}

@media screen and (max-width: 800px) {
  .c-pagenavi {
    text-align: center;
  }
  .c-pagenavi__inner {
    display: block;
    padding: 1rem 0.5rem;
  }
  .c-pagenavi__scroll {
    overflow-x: auto;
    white-space: nowrap;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
  }
}
.c-figure {
  margin-bottom: 4.8rem;
}
@media screen and (max-width: 800px) {
  .c-figure {
    margin-bottom: 2.4rem;
  }
}
.c-figure img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: center;
  aspect-ratio: 2/1;
  border-radius: 1.6rem;
}
.c-box01 {
  border-left: 2px solid var(--main);
  padding: 4.8rem 0 4.8rem 4.8rem;
}
@media screen and (max-width: 800px) {
  .c-box01 {
    padding: 2.4rem 0;
    border-left: none;
  }
}
.c-box01.noborder {
  border-left: none;
  padding: 0;
}
.c-box01 h3 {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 2.4rem;
}
@media screen and (max-width: 800px) {
  .c-box01 h3 {
    font-size: 2rem;
    margin-bottom: 1.6rem;
  }
}
.c-box01 p + p {
  margin-top: 1.6rem;
}

@keyframes slideLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@keyframes slideLoopSP {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.c-pho-list {
  display: flex;
  gap: 0.6rem;
  width: max-content;
  animation: slideLoop 60s linear infinite;
}
@media screen and (max-width: 800px) {
  .c-pho-list {
    animation: slideLoopSP 60s linear infinite;
  }
}
.c-pho-list li {
  width: 32rem;
  flex-shrink: 0;
}

.p-privacy {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  padding: 0.8rem 4.8rem 0.8rem 0;
}
@media screen and (max-width: 800px) {
  .p-privacy {
    padding: 0.8rem 0.8rem 0.8rem 0;
  }
  .p-privacy p {
    text-align: left;
  }
}
.p-privacy > * {
  white-space: normal;
}
.p-privacy > * + * {
  margin-top: 3.2rem;
}
.p-privacy h2 {
  border-bottom: 1px solid var(--gray);
  padding-bottom: 2.4rem;
  text-align: center;
  font-size: 2.4rem;
  font-weight: 600;
}
@media screen and (max-width: 800px) {
  .p-privacy h2 {
    font-size: 2rem;
  }
}
.p-privacy h3 {
  font-size: 1.8rem;
  font-weight: 600;
  position: relative;
  padding-left: 3.6rem;
}
@media screen and (max-width: 800px) {
  .p-privacy h3 {
    font-size: 1.6rem;
  }
}
.p-privacy h3::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  background: var(--gray);
  width: 2.4rem;
  height: 1px;
}
.p-privacy ul li {
  list-style: disc;
  margin-left: 1.5em;
}
.p-privacy .close {
  display: flex;
  justify-content: flex-end;
}

.p-about {
  margin-top: 12rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto auto auto;
  gap: 120px 48px;
  grid-auto-flow: row;
  grid-template-areas: "p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04 p-about-grid04" ". p-about-grid01 p-about-grid01 p-about-grid01 p-about-grid01 p-about-grid01 p-about-grid01 p-about-grid01 . . . ." ". . . . p-about-grid02 p-about-grid02 p-about-grid02 p-about-grid02 p-about-grid02 p-about-grid02 p-about-grid02 ." ". p-about-grid03 p-about-grid03 p-about-grid03 p-about-grid03 p-about-grid03 p-about-grid03 p-about-grid03 . . . .";
  /* ----- elements ----- */
}
@media screen and (max-width: 800px) {
  .p-about {
    margin-top: 6.4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 6.4rem 0;
  }
}
.p-about-grid01 {
  grid-area: p-about-grid01;
}
@media screen and (max-width: 800px) {
  .p-about-grid01 {
    width: 100%;
  }
}
.p-about-grid02 {
  grid-area: p-about-grid02;
}
@media screen and (max-width: 800px) {
  .p-about-grid02 {
    width: 100%;
  }
}
.p-about-grid03 {
  grid-area: p-about-grid03;
}
@media screen and (max-width: 800px) {
  .p-about-grid03 {
    width: 100%;
  }
}
.p-about-grid04 {
  grid-area: p-about-grid04;
  display: flex;
  justify-content: center;
}
@media screen and (max-width: 800px) {
  .p-about-grid04 {
    width: 100%;
  }
}
.p-about-supbox {
  border: 1px solid var(--gray);
  border-radius: 1.6rem;
  padding: 7.2rem 2.4rem 2.4rem 2.4rem;
  margin-top: 4.8rem;
  position: relative;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .p-about-supbox {
    margin-top: 2.4rem;
  }
}
.p-about-supbox__label {
  position: absolute;
  top: 0;
  left: 0;
  background: var(--base-color);
  color: var(--white);
  padding: 0.8rem 2.4rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  height: 4.8rem;
  border-radius: 0 0 1.6rem 0;
}
.p-about-supbox__graph {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  margin-bottom: 2.4rem;
  gap: 6px;
}
.p-about-supbox__graph li {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 10.4rem;
  text-align: center;
  font-size: 1.4rem;
  background: var(--gray-light);
  color: var(--main);
  border-radius: 0.8rem;
}
@media screen and (max-width: 800px) {
  .p-about-supbox__graph li {
    height: 8rem;
    font-size: 1.2rem;
  }
}
.p-about-supbox__graph li.w25 {
  width: calc((100% - 18px) / 4);
}
@media screen and (max-width: 800px) {
  .p-about-supbox__graph li.w25 {
    width: calc(50% - 3px);
  }
}
.p-about-supbox__graph li.w33 {
  width: calc((100% - 12px) / 3);
}
@media screen and (max-width: 800px) {
  .p-about-supbox__graph li.w33 {
    width: calc(50% - 3px);
  }
}
.p-about-supbox__graph li span {
  font-size: 2.4rem;
  display: block;
  line-height: 1.2;
}
@media screen and (max-width: 800px) {
  .p-about-supbox__graph li span {
    font-size: 1.8rem;
  }
}
.p-about-supbox__list li {
  list-style-type: disc;
  margin-left: 1.5em;
}
.p-about-supbox__list + p {
  margin-top: 2.4rem;
}
.p-about-attention {
  margin-top: 4.8rem;
  display: flex;
  align-items: center;
  gap: 2.4rem;
}
@media screen and (max-width: 800px) {
  .p-about-attention {
    flex-wrap: wrap;
    flex-direction: column;
  }
}
.p-about-attention p {
  font-size: 1.4rem;
}

.p-menu {
  margin-top: 12rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 120px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". . p-menu-grid01 p-menu-grid01 p-menu-grid01 p-menu-grid01 p-menu-grid01 p-menu-grid01 p-menu-grid01 p-menu-grid01 . ." ". p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 p-menu-grid02 .";
  /* ----- elements ----- */
}
@media screen and (max-width: 800px) {
  .p-menu {
    margin-top: 6.4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 6.4rem 0;
  }
}
.p-menu-grid01 {
  grid-area: p-menu-grid01;
}
@media screen and (max-width: 800px) {
  .p-menu-grid01 {
    width: 100%;
  }
}
.p-menu-grid02 {
  grid-area: p-menu-grid02;
}
@media screen and (max-width: 800px) {
  .p-menu-grid02 {
    width: 100%;
  }
}
.p-menu-genre {
  margin-top: 2.4rem;
}
.p-menu-genre h4 {
  font-weight: 600;
  color: var(--main);
}
.p-menu-genre ul {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
@media screen and (max-width: 800px) {
  .p-menu-genre ul {
    flex-wrap: wrap;
  }
}
.p-menu-genre ul li {
  border: 1px solid var(--main);
  border-radius: 0.8rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: var(--main);
  padding: 0.8rem 1.6rem;
}
.p-menu-genre ul li:last-child {
  border: none;
  border-radius: 0;
  color: var(--base-color);
  padding: 0;
}
.p-menu-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 4.8rem;
}
@media screen and (max-width: 800px) {
  .p-menu-cards {
    gap: 2.4rem;
  }
}
.p-menu-cards__item {
  width: calc((100% - 4.8rem) / 2);
  height: 100%;
  background: var(--gray-light);
  border-radius: 1.6rem;
}
@media screen and (max-width: 800px) {
  .p-menu-cards__item {
    width: 100%;
  }
}
.p-menu-sup {
  margin-top: 7.2rem;
  display: flex;
  justify-content: center;
  color: var(--main);
  text-align: center;
  /*
  span {
      display: inline-block;
      position: relative;
      font-size: 2.4rem;

      @include sp {
          font-size: 1.6rem;
          padding: 0 2.4rem;
          text-align: center;
      }

      &::before {
          content: "＼";
          margin-right: 1.2rem;
          color: var(--main);

          @include sp {
              position: absolute;
              bottom: 0;
              left: 0;
          }
      }

      &::after {
          content: "／";
          margin-left: 1.2rem;
          color: var(--main);

          @include sp {
              position: absolute;
              bottom: 0;
              right: 0;
          }
      }
  }
  */
}
.p-menu-tbl + .p-menu-tbl {
  margin-top: 4.8rem;
}
.p-menu-tbl {
  display: flex;
  flex-wrap: wrap;
}
.p-menu-tbl__block01 {
  width: 100%;
  color: var(--main);
  padding: 4.8rem 2.4rem 0 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  text-align: center;
}
.p-menu-tbl__block02 {
  width: 100%;
  padding: 2.4rem 2.4rem 4.8rem 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--gray);
  color: var(--main);
  line-height: 1.2;
}
@media screen and (max-width: 800px) {
  .p-menu-tbl__block02 {
    text-align: center;
  }
}
.p-menu-tbl__block03 {
  width: 100%;
  padding: 4.8rem 2.4rem;
}
.p-menu-tbl__price {
  font-size: 4rem;
  font-weight: 600;
}
@media screen and (max-width: 800px) {
  .p-menu-tbl__price {
    display: block;
    text-align: center;
  }
}
.p-menu-tbl__strong {
  font-size: 2.4rem;
  font-weight: 600;
  margin-bottom: 2.4rem;
}
.p-menu-tbl__sup {
  margin-top: 2.4rem;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 1.6rem;
  padding: 2.4rem;
  font-size: 1.4rem;
}
.p-menu-tbl__pen {
  background: linear-gradient(transparent 94%, #fff 6%);
}

/*
background: var(--gray-light);
border-radius: 1.6rem;
*/
.p-contact {
  margin-top: 12rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 48px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". . . p-contact-grid01 p-contact-grid01 p-contact-grid01 p-contact-grid01 p-contact-grid01 p-contact-grid01 . . .";
  /* ----- form elements ----- */
}
@media screen and (max-width: 800px) {
  .p-contact {
    margin-top: 6.4rem;
    display: block;
    padding: 0 1.6rem;
  }
}
.p-contact-grid01 {
  grid-area: p-contact-grid01;
}
.p-contact__form {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 2.4rem 0;
}
.p-contact__form > * {
  width: 100%;
}
.p-contact__form input[type=text],
.p-contact__form input[type=email],
.p-contact__form textarea {
  color: var(--main);
  width: 100%;
  border-radius: 0.8rem;
  border: 1px solid var(--gray);
  padding: 0.8rem 1.6rem;
  transition: 0.5s;
}
@media screen and (max-width: 800px) {
  .p-contact__form input[type=text],
  .p-contact__form input[type=email],
  .p-contact__form textarea {
    font-size: 1.6rem;
  }
}
.p-contact__form textarea {
  color: var(--main);
  height: 24rem;
}
.p-contact__form input[type=submit] {
  width: 50%;
  margin: 0 auto;
  border-radius: 0 1.6rem 0 1.6rem;
  background: var(--main);
  color: var(--white);
  padding: 1.2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: all 0.5s;
  letter-spacing: 0.1em;
}
.p-contact__form input[type=submit]:hover {
  background-position: right center;
  background-size: 200% auto;
  -webkit-animation: pulse 2s infinite;
  animation: ripple-main 1.5s infinite;
}
.p-contact__form input[type=text]:focus,
.p-contact__form input[type=email]:focus,
.p-contact__form input[type=submit]:focus,
.p-contact__form select:focus,
.p-contact__form textarea:focus {
  outline: none;
}
.p-contact__form .mwform-radio-field {
  margin-top: 1rem;
}
.p-contact__form ::placeholder {
  color: var(--gray);
}
.p-contact__form .must {
  color: #ee0000;
}
.p-contact__privacy {
  text-align: center;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.p-single {
  margin-top: 12rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". p-single-grid01 p-single-grid01 p-single-grid01 p-single-grid01 p-single-grid01 p-single-grid01 p-single-grid01 p-single-grid02 p-single-grid02 p-single-grid02 .";
}
@media screen and (max-width: 800px) {
  .p-single {
    margin-top: 6.4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 6.4rem 0;
  }
}
.p-single-grid01 {
  grid-area: p-single-grid01;
}
@media screen and (max-width: 800px) {
  .p-single-grid01 {
    width: 100%;
  }
}
.p-single-grid02 {
  grid-area: p-single-grid02;
}
@media screen and (max-width: 800px) {
  .p-single-grid02 {
    width: 100%;
  }
}
.p-single__title {
  border-top: 1px solid var(--gray);
  border-bottom: 1px solid var(--gray);
  padding: 4.8rem 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem;
  margin-bottom: 4.8rem;
}
@media screen and (max-width: 800px) {
  .p-single__title {
    padding: 2.4rem 0;
    margin-bottom: 2.4rem;
  }
}
.p-single__title h1 {
  font-size: 3.2rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (max-width: 800px) {
  .p-single__title h1 {
    font-size: 2.4rem;
  }
}
.p-single__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  margin-top: 9.6rem;
}
@media screen and (max-width: 800px) {
  .p-single__pager {
    margin-top: 6.4rem;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1.2rem;
  }
}
.p-single__pager p a {
  border-radius: 10rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1.6rem;
  transition: all 0.5s;
  background: var(--white);
  color: var(--main);
  font-size: 1.4rem;
}
.p-single__pager p a:hover {
  opacity: 0.7;
}

.p-archive {
  margin-top: 12rem;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". p-archive-grid01 p-archive-grid01 p-archive-grid01 p-archive-grid01 p-archive-grid01 p-archive-grid01 p-archive-grid01 p-archive-grid02 p-archive-grid02 p-archive-grid02 .";
}
@media screen and (max-width: 800px) {
  .p-archive {
    margin-top: 6.4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 6.4rem 0;
  }
}
.p-archive-grid01 {
  grid-area: p-archive-grid01;
  border-top: 1px solid var(--gray);
}
@media screen and (max-width: 800px) {
  .p-archive-grid01 {
    width: 100%;
  }
}
.p-archive-grid02 {
  grid-area: p-archive-grid02;
}
@media screen and (max-width: 800px) {
  .p-archive-grid02 {
    width: 100%;
  }
}
.p-archive__card {
  border-bottom: 1px solid var(--gray);
  padding: 4.8rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2.4rem;
}
@media screen and (max-width: 800px) {
  .p-archive__card {
    padding: 2.4rem 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1.2rem;
  }
}
.p-archive__thumb {
  width: 24rem;
  height: auto;
  aspect-ratio: 1/1;
  overflow: hidden;
}
@media screen and (max-width: 800px) {
  .p-archive__thumb {
    width: 100%;
    aspect-ratio: 2/1;
  }
}
.p-archive__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: all 0.5s;
}
.p-archive__thumb a:hover img {
  transform: scale(1.1);
}
.p-archive__meta {
  width: calc(100% - 26.4rem);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  gap: 1.6rem 0;
}
@media screen and (max-width: 800px) {
  .p-archive__meta {
    width: 100%;
  }
}
.p-archive__meta > * {
  width: 100%;
}
.p-archive__title {
  font-size: 2.4rem;
  font-weight: 600;
  line-height: 1.5;
}
@media screen and (max-width: 800px) {
  .p-archive__title {
    font-size: 2rem;
  }
}
.p-archive__title a:hover {
  color: var(--main);
}
.p-archive__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
  margin-top: 9.6rem;
}
@media screen and (max-width: 800px) {
  .p-archive__pager {
    margin-top: 6.4rem;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 1.2rem;
  }
}
.p-archive__pager p a {
  border-radius: 10rem;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0.4rem 1.6rem;
  transition: all 0.5s;
  background: var(--white);
  color: var(--main);
  font-size: 1.4rem;
}
.p-archive__pager p a:hover {
  opacity: 0.7;
}

.p-empty {
  width: 100%;
  height: 50vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.p-item {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: auto;
  gap: 0px 48px;
  grid-auto-flow: row;
  grid-template-areas: ". p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 p-item-grid01 .";
}
@media screen and (max-width: 800px) {
  .p-item {
    margin-top: 6.4rem;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    padding: 0 1.6rem;
    gap: 6.4rem 0;
  }
}
.p-item .p-item-grid01 {
  grid-area: p-item-grid01;
}
@media screen and (max-width: 800px) {
  .p-item .p-item-grid01 {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    gap: 6.4rem 0;
  }
}
.p-item .p-item-grid01 h2 {
  padding: 12rem 0 4.8rem 0;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1.2rem;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--main);
}
@media screen and (max-width: 800px) {
  .p-item .p-item-grid01 h2 {
    padding: 0;
    font-size: 1.8rem;
  }
}
.p-item-cards {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 2px;
}
@media screen and (max-width: 800px) {
  .p-item-cards {
    gap: 1.6rem;
  }
}
.p-item-cards__card {
  width: calc((100% - 6px) / 4);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  border-radius: 1.6rem;
  background: var(--gray-light);
  padding: 2.4rem;
}
@media screen and (max-width: 800px) {
  .p-item-cards__card {
    width: 100%;
    padding: 1.6rem;
  }
}
.p-item-cards__card > * {
  width: 100%;
}
.p-item-cards__imgbox {
  width: 100%;
}
.p-item-cards__txtbox {
  width: 100%;
}
.p-item-cards__thumb {
  width: 100%;
  display: flex;
  justify-content: center;
}
.p-item-cards__thumb img {
  width: 16rem;
  height: auto;
  aspect-ratio: 1/1;
  object-fit: cover;
  object-position: center;
  border-radius: 0.8rem;
  -webkit-mask-image: radial-gradient(ellipse at center, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: radial-gradient(ellipse at center, rgb(0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
.p-item-cards__name {
  font-size: 2.4rem;
  font-weight: 500;
  margin: 1.6rem 0;
  text-align: center;
}
@media screen and (max-width: 800px) {
  .p-item-cards__name {
    font-size: 1.8rem;
  }
}
.p-item-cards__name span {
  font-size: 1.6rem;
  display: block;
  font-weight: 500;
}
@media screen and (max-width: 800px) {
  .p-item-cards__name span {
    font-size: 1.5rem;
  }
}
.u-center {
  text-align: center;
}

.u-pt128 {
  padding-top: 12.8rem;
}
@media screen and (max-width: 800px) {
  .u-pt128 {
    padding-top: 6.4rem;
  }
}

@media screen and (max-width: 800px) {
  .u-mb24 {
    margin-bottom: 2.4rem;
  }
}
/*# sourceMappingURL=style.css.map */