@charset "UTF-8";
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
   ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@400;500;600;700;800&display=swap");
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
   ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type=button],
[type=reset],
[type=submit] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type=checkbox],
[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type=search] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
   ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

body {
  line-height: 1;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

nav ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
  content: "";
  content: none;
}

a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* change colours to suit your needs */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* change colours to suit your needs */
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

del {
  text-decoration: line-through;
}

abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

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

/* change border colour to suit your needs */
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

input, select {
  vertical-align: middle;
}

/*mediaquery-1*/
:root {
  /* SP（〜767） */
  --fz-base: 1.4rem;
  --fz-1: 2.4rem;
  /* H1 */
  --fz-2: 2rem;
  /* H2 */
  --fz-3: 1.6rem;
  /* H3 */
  --fz-4: 1.5rem;
  /* H4 */
  --fz-5: 1.2rem;
  /* 補足 */
  --heading01: 5rem;
  --heading02: 3.6rem;
  --heading03: 3rem;
}

@media (min-width: 768px) {
  :root {
    /* PC（768〜） */
    --fz-base: clamp(1.4rem, 1.1vw, 1.6rem);
    --fz-1: clamp(2.6rem, 2.2vw, 3.2rem);
    --fz-2: clamp(2rem, 1.8vw, 2.6rem);
    --fz-3: clamp(1.7rem, 1.5vw, 2.2rem);
    --fz-4: clamp(1.5rem, 1.2vw, 1.9rem);
    --fz-5: clamp(1.2rem, 1vw, 1.5rem);
    --heading01: clamp(5rem, 6.5vw, 9rem);
    --heading02: clamp(3.6rem, 5vw, 7.5rem);
    --heading03: clamp(3rem, 3.2vw, 4.6rem);
  }
}
/*
	general style
===================================================*/
*,
*::after,
*::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
  position: relative;
  height: 100%;
}

html,
body {
  margin: 0;
  padding: 0;
  /* 念のため上部の隙間を完全に除去 */
  border: 0;
}

body {
  font-size: 1.6rem;
}
@media screen and (max-width: 768px) {
  body {
    font-size: 1.4rem;
  }
}
body {
  position: relative;
  color: #000;
  font-family: "Shippori Mincho", serif;
  font-weight: bold;
  line-height: 1.6;
}

a {
  background-color: transparent;
  transition: 0.2s;
}
a:hover {
  color: #000;
  opacity: 0.7;
}

img {
  vertical-align: bottom;
}

.wp-block-image img {
  max-width: 100%;
  height: auto;
}

/*
	layout style
===================================================*/
@media screen and (max-width: 640px) {
  br.brpc {
    display: none;
  }
}

br.brmd {
  display: none;
}
@media screen and (max-width: 768px) {
  br.brmd {
    display: block;
  }
}

br.brsp {
  display: none;
}
@media screen and (max-width: 640px) {
  br.brsp {
    display: block;
  }
}

@media screen and (max-width: 768px) {
  .pcblock {
    display: none;
  }
}

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

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

#wraper {
  overflow: hidden;
}
#wraper::after {
  content: "";
  position: fixed;
  top: -2px;
  left: 0;
  width: 100vw;
  height: 100dvh;
  /* 背景画像の指定 */
  background-image: url(../img/body_bg.webp);
  background-repeat: no-repeat;
  background-size: cover;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 99;
  opacity: 1;
}

.inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 30px;
}
@media screen and (max-width: 640px) {
  .inner {
    max-width: 90%;
    width: 90%;
    padding: 0;
  }
}

.mt10 {
  margin-top: 10px;
}

.mb10 {
  margin-bottom: 10px;
}

.mt20 {
  margin-top: 20px;
}

.mb20 {
  margin-bottom: 20px;
}

.mt30 {
  margin-top: 30px;
}

.mb30 {
  margin-bottom: 30px;
}

.mt40 {
  margin-top: 40px;
}

.mb40 {
  margin-bottom: 40px;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
}

.red {
  color: red;
}

/*********************************

CSSアニメーション

*********************************/
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}
/* --- CSS (SCSS) --- */
/* デフォルト非表示（2回目以降） */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background-color: #000;
  background: url(../img/load_bg.webp) no-repeat right bottom #000;
  background-size: cover;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

/* 初回訪問時のみ表示（.is-first-visitor の詳細度が高いので !important 不要） */
.is-first-visitor .loader {
  display: flex;
}

/* ローディングテキストも一緒に滲ませる */
.loader-text {
  color: #f6e3be;
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  animation: pulse 1.5s ease-in-out infinite;
  margin-bottom: 1rem;
}
.loader-text img {
  width: 120px;
  opacity: 0.8;
}
@media screen and (max-width: 768px) {
  .loader-text img {
    width: 80px;
  }
}

.loading-5 {
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-5 span {
  color: #f6e3be;
  display: inline-block;
  animation: animation-loading-5 1.2s infinite;
}

.loading-5 span:nth-of-type(2) {
  animation-delay: 0.1s;
}

.loading-5 span:nth-of-type(3) {
  animation-delay: 0.2s;
}

.loading-5 span:nth-of-type(4) {
  animation-delay: 0.3s;
}

.loading-5 span:nth-of-type(5) {
  animation-delay: 0.4s;
}

.loading-5 span:nth-of-type(6) {
  animation-delay: 0.5s;
}

.loading-5 span:nth-of-type(7) {
  animation-delay: 0.6s;
}

.loading-5 span:nth-of-type(8) {
  animation-delay: 0.7s;
}

.loading-5 span:nth-of-type(9) {
  animation-delay: 0.8s;
}

.loading-5 span:nth-of-type(10) {
  animation-delay: 0.9s;
}

@keyframes animation-loading-5 {
  50% {
    transform: translateY(10px);
  }
}
/* ==============================================
  マウスオーバーで「ブルッ」と拡大
============================================== */
.ani-shake-zoom {
  display: inline-block;
  transition: transform 0.2s ease-out;
  cursor: pointer;
}

/* ホバーした時の設定 */
.ani-shake-zoom:hover {
  /* scaleを1.02に抑え、アニメーションの速度を少し速めて「密な振動」に */
  animation: shakeZoomSmall 0.15s linear infinite;
  opacity: 1;
}

@keyframes shakeZoomSmall {
  0% {
    transform: scale(1.02) rotate(0deg);
  }
  25% {
    transform: scale(1.02) rotate(0.5deg);
  }
  50% {
    transform: scale(1.02) rotate(0deg);
  }
  75% {
    transform: scale(1.02) rotate(-0.5deg);
  }
  100% {
    transform: scale(1.02) rotate(0deg);
  }
}
.ani-zoom {
  display: block;
  transition: transform 0.3s ease-out;
}
.ani-zoom:hover {
  transform: scale(1.04);
}
.shake {
  width: 100%;
  height: auto;
  display: block;
  animation: shake-and-pause 0.8s linear infinite;
}

/* ==============================================
  3D回転
============================================== */
/* 逆回転用クラス */
.rotate-box-reverse {
  animation: rotateAnimationReverse 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

@keyframes rotateAnimation {
  from {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}
.rotate-box {
  animation: rotateAnimation 4s ease-in-out infinite; /* 3秒で無限に繰り返し */
  transform-style: preserve-3d; /* 3D回転を有効にする */
}

@keyframes rotateAnimationReverse {
  from {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 0, -360deg);
  }
}
/* ==============================================
  一文字づつ表示
============================================== */
.flow-text .char {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateX(-10px); /* 少し左からスライド */
  will-change: filter, opacity, transform;
}

/*一文字づつ表示*/
.flow-text .char {
  display: inline-block;
  opacity: 0;
  filter: blur(10px);
  transform: translateX(-10px); /* 少し左からスライド */
  will-change: filter, opacity, transform;
}
.flow-text .char span {
  display: inline;
}

/* ==============================================
  ブラー表示
============================================== */
.fade_blur_img {
  opacity: 0;
  filter: blur(15px);
  transform: scale(1.03); /* 最初は少し大きくしておく */
  will-change: filter, opacity, transform;
}

/* ==============================================
滲みフェードインスライド（左から右）
============================================== */
.js-bleeding-fade {
  opacity: 0;
  filter: blur(15px);
  transform: translateX(-30px);
  will-change: opacity, filter, transform;
  /* （左から右）クラスがついている方だけ右側に初期配置 */
}
.js-bleeding-fade.from-right {
  transform: translateX(30px);
}

/* ==============================================
ふわふわ・ゆらゆら
============================================== */
.ani-fuwa-up {
  animation: fuwafuwa-up 2s ease-in-out infinite;
}

.ani-fuwa-down {
  animation: fuwafuwa-down 2s ease-in-out infinite;
}

.ani-yura {
  animation: yurayura 3s ease-in-out infinite;
}

.ani-yura-delay {
  animation: yurayura 5s ease-in-out -1s infinite;
}

@keyframes fuwafuwa-up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
@keyframes fuwafuwa-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(20px);
  }
}
@keyframes yurayura {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  33% {
    transform: rotate(2deg) translateY(-5px);
  }
  66% {
    transform: rotate(-2deg) translateY(5px);
  }
}
/*********************************

TOP
*********************************/
.btm-sec {
  margin-bottom: 1rem;
}
.btm-sec .btm-name img {
  width: 100%;
  height: auto;
}

.top-sec {
  display: flex;
  justify-content: space-between;
  gap: 2%;
  margin-bottom: 1rem;
}
.top-sec .top-date {
  font-size: var(--fz-3);
}
.top-sec .top-name {
  width: 20%;
}
.top-sec .top-name img {
  width: 100%;
  height: auto;
}
.top-sec .top-tel {
  font-size: var(--fz-3);
}
.top-sec .top-tel a {
  display: inline-block;
  border-radius: 100vw;
  background-color: #000;
  color: #fff;
  text-decoration: none;
  line-height: 1;
  padding: 0.4em 1em;
  letter-spacing: 0.1em;
}

#top-page {
  padding: 2%;
}
#top-page .brush-border-container {
  /* 枠線の太さ*/
  border: 10px solid transparent;
  border-image-source: url("../img/brush-frame.png");
  border-image-slice: 10; /* 画像サイズに合わせて調整（例：画像が300pxなら100で3等分） */
  border-image-repeat: round;
  padding: 10px;
}
#top-page img {
  width: 100%;
  height: auto;
}
#top-page {
  /* 墨の画像本体 */
}
#top-page .js-sumi-splash {
  opacity: 0; /* ★ここが重要！最初は隠す */
  filter: url(#bleeding-filter-sumi);
  transform-origin: center center;
  height: auto;
}
#top-page {
  /* ++++++++++++
  fv
  ++++++++++++ */
}
#top-page .fv-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  /*FV墨*/
}
#top-page .fv-container .fv-sumi-lt {
  position: absolute;
  width: 30%;
  top: 15%;
  left: -5%;
  z-index: 101;
  mix-blend-mode: multiply;
}
#top-page .fv-container .fv-sumi-rt {
  position: absolute;
  bottom: -8%;
  right: -8%;
  z-index: 101;
  width: 30%;
  mix-blend-mode: multiply;
}
#top-page .fv-container .fv-inner {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
}
#top-page .fv-container .fv-inner .fv-frame {
  width: 100%;
  height: auto;
}
#top-page .fv-container .fv-inner .fv-text {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: auto;
}
#top-page .fv-container .fv-inner .fv-lt {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 30%;
  z-index: 1;
}
@media screen and (max-width: 768px) {
  #top-page .fv-container .fv-inner .fv-lt {
    width: 30%;
    left: -15%;
  }
}
#top-page .fv-container .fv-inner .fv-lt img {
  width: 100%;
  height: auto;
}
#top-page .fv-container .fv-inner .fv-rt {
  position: absolute;
  z-index: 1;
  width: 25%;
  top: 40%;
  z-index: 1;
  right: -10%;
}
@media screen and (max-width: 768px) {
  #top-page .fv-container .fv-inner .fv-rt {
    width: 30%;
    right: -15%;
  }
}
#top-page .fv-container .fv-inner .fv-rt img {
  width: 100%;
  height: auto;
}
#top-page .fv-container .fv-inner .fv-card01 {
  position: absolute;
  top: 73%;
  right: 29%;
  width: 10%;
  z-index: 1;
}
#top-page .fv-container .fv-inner .fv-card01 img {
  width: 100%;
  height: auto;
}
#top-page .fv-container .fv-inner .fv-card02 {
  position: absolute;
  bottom: 16%;
  right: 22%;
  width: 9%;
  z-index: 1;
}
#top-page .fv-container .fv-inner .fv-card02 img {
  width: 100%;
  height: auto;
}
#top-page {
  /* ++++++++++++
  sec01
  ++++++++++++ */
}
#top-page .sec01 {
  position: relative;
  padding: 0 0 2%;
}
#top-page .sec01 img {
  width: 100%;
  height: auto;
  display: block;
}
#top-page .sec01 img.heading01 {
  width: 90%;
  margin: 2% auto;
}
@media screen and (max-width: 768px) {
  #top-page .sec01 img.heading01 {
    width: 100%;
  }
}
#top-page .sec01 img.heading02 {
  width: 60%;
  margin: 2% auto;
}
#top-page .sec01 .solve-hr {
  border: none;
  height: 1.5px;
  background-color: #000;
  margin: 10px 0;
  width: 100%;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
#top-page .sec01 .sec01-name {
  width: 20%;
  display: block;
  margin-right: 0;
  margin-left: auto;
  padding-right: 5%;
}
#top-page .sec01 .sec01-scroll {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
@media screen and (max-width: 768px) {
  #top-page .sec01 .sec01-scroll {
    margin-top: 0;
  }
}
#top-page .sec01 .sec01-scroll img {
  width: 8%;
  height: auto;
  animation: scroll-move 2s ease-in-out infinite;
}
@media screen and (max-width: 768px) {
  #top-page .sec01 .sec01-scroll img {
    width: 20%;
  }
}
#top-page .sec01 {
  /* スクロールアニメーションの定義 */
}
@keyframes scroll-move {
  0% {
    transform: translateY(-10px);
    opacity: 0;
  }
  30% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(10px);
    opacity: 1;
  }
  100% {
    transform: translateY(20px);
    opacity: 0;
  }
}
#top-page .sec01 {
  /*sec01墨*/
}
#top-page .sec01 .sec01-sumi01 {
  position: absolute;
  width: 35%;
  bottom: -15%;
  left: -15%;
  z-index: 10;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
#top-page .sec01 .sec01-sumi02 {
  position: absolute;
  width: 30%;
  bottom: -8%;
  right: -18%;
  z-index: 10;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
#top-page .sec01 .sec01-sumi03 {
  position: absolute;
  width: 40%;
  top: 5%;
  left: -3%;
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 101;
}
#top-page .sec01 .sec01-hasu {
  position: absolute;
  width: 28%;
  top: 45%;
  left: -5%;
  z-index: 10;
  pointer-events: none;
}
#top-page .sec01 .sec01-arowana {
  position: absolute;
  width: 45%;
  bottom: 0;
  left: -2%;
  z-index: 10;
  pointer-events: none;
}
#top-page .sec01 .sec01contents .sec01contents-inner {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 2%;
}
@media screen and (max-width: 768px) {
  #top-page .sec01 .sec01contents .sec01contents-inner {
    max-width: 100%;
  }
}
#top-page .sec01 .sec01contents .rt {
  flex: 0 0 17%;
  margin-left: -20%;
}
#top-page .sec01 .sec01contents .rt img {
  width: 100%;
  height: auto;
}
#top-page .sec01 .sec01contents .lt {
  flex: 1;
}
#top-page .sec01 .sec01contents .solve-banners {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  padding: 0 2% 2rem 10%;
}
@media screen and (max-width: 768px) {
  #top-page .sec01 .sec01contents .solve-banners {
    padding-left: 0;
  }
}
#top-page .sec01 .sec01contents .solve-banners img {
  width: 100%;
  height: auto;
}
#top-page .sec01 .sec01contents .sec01contents-read {
  width: 90%;
  margin-right: 0;
  margin-left: auto;
  padding-right: 20%;
}
#top-page .sec01 .sec01contents .sec01contents-read .read-upper img,
#top-page .sec01 .sec01contents .sec01contents-read .read-lower img {
  width: 100%;
  height: auto;
  /* Safari用のレンダリング最適化 */
  will-change: opacity, filter;
  backface-visibility: hidden;
}
#top-page {
  /* ++++++++++++
  sec02
  ++++++++++++ */
}
#top-page .sec02 {
  padding: 2rem 0;
  position: relative;
}
#top-page .sec02 .sec02-bg {
  position: absolute;
  width: 100%;
  top: 14%;
  left: -5%;
}
#top-page .sec02 img {
  width: 100%;
  height: auto;
  display: block;
}
#top-page .sec02 img.heading03 {
  width: 60%;
}
#top-page .sec02 {
  /*sec02墨*/
}
#top-page .sec02 .sec02-sumi01 {
  position: absolute;
  width: 20%;
  bottom: 30%;
  right: -10%;
  z-index: 10;
  mix-blend-mode: multiply;
}
#top-page .sec02 .sec02contents {
  padding: 2rem 0;
  position: relative;
}
#top-page .sec02 .sec02contents .sec02contents-inner {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2%;
}
#top-page .sec02 .sec02contents .sec02contents-inner .rt {
  flex: 0 0 40%;
}
#top-page .sec02 .sec02contents .sec02contents-inner .lt {
  flex: 1;
}
#top-page .sec02 .sec02contents .sec02-dog {
  position: absolute;
  z-index: 10;
  width: 55%;
  left: 0;
  bottom: -40%;
}
#top-page .sec02 .heading04 {
  width: 70%;
  margin-left: auto;
  margin-right: 0;
}
#top-page .sec02 .sec02contents__main-ttl {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  direction: rtl;
}
#top-page .sec02 .sec02-banners {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}
#top-page {
  /* ++++++++++++
  sec03
  ++++++++++++ */
}
#top-page .sec03 {
  position: relative;
}
#top-page .sec03 img {
  width: 100%;
  height: auto;
  display: block;
}
#top-page .sec03 .heading02 {
  position: relative;
  z-index: 101;
}
#top-page .sec03 {
  /*sec03墨1*/
}
#top-page .sec03 .sec03-sumi01 {
  position: absolute;
  width: 60%;
  top: -5%;
  left: 25%;
  z-index: 1;
  mix-blend-mode: multiply;
}
#top-page .sec03 {
  /*sec03墨2*/
}
#top-page .sec03 .sec03-sumi02 {
  position: absolute;
  width: 30%;
  bottom: 5%;
  left: -15%;
  z-index: 1;
  mix-blend-mode: multiply;
}
#top-page .sec03 {
  /*sec03花*/
}
#top-page .sec03 .sec03-hasu {
  position: absolute;
  width: 25%;
  bottom: 20%;
  right: -5%;
  z-index: 1;
}
#top-page .sec03 {
  /*sec03車GIF*/
}
#top-page .sec03 .sec03-car {
  position: absolute;
  width: 108%;
  top: 0;
  right: -4%;
  z-index: 1;
}
#top-page .sec03 .sec03contents {
  padding: 2% 0;
  position: relative;
}
#top-page .sec03 .sec03contents .sec03contents-inner {
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2%;
}
#top-page .sec03 .sec03contents .sec03contents-inner .rt {
  flex: 0 0 50%;
}
#top-page .sec03 .sec03contents .sec03contents-inner .lt {
  flex: 1;
}
#top-page .sec03 .txt-layout {
  width: 100%;
}
#top-page .sec03 .txt-layout .col2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
#top-page .sec03 {
  /* 各パーツを割り当て */
}
#top-page .sec03 .item1 {
  grid-area: area1;
}
#top-page .sec03 .item2 {
  grid-area: area2;
}
#top-page .sec03 {
  /* 中段左（縦長） */
}
#top-page .sec03 .item3 {
  grid-area: area3;
}
#top-page .sec03 {
  /* 中段右1 */
}
#top-page .sec03 .item4 {
  grid-area: area4;
}
#top-page .sec03 {
  /* 中段右2 */
}
#top-page .sec03 .item5 {
  grid-area: area5;
}
#top-page .sec03 .item6 {
  grid-area: area6;
}
#top-page .sec03 {
  /* 画像の設定 */
}
#top-page .sec03 .js-font-item {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  opacity: 0;
  opacity: 0;
}
#top-page {
  /* ++++++++++++
  sec04
  ++++++++++++ */
}
#top-page .sec04 {
  /* 「ブルブル → 一時停止」のアニメーション定義 */
}
@keyframes shake-and-pause {
  /* 0%から50%の間は完全に静止（ピタッとしている時間） */
  0%, 50% {
    transform: translate(0, 0) rotate(0deg);
  }
  /* 50%から100%の間で激しく動く（ブルブルしている時間） */
  55% {
    transform: translate(-2px, 1px) rotate(-0.5deg);
  }
  60% {
    transform: translate(2px, -1px) rotate(0.5deg);
  }
  65% {
    transform: translate(-1px, -2px) rotate(-0.3deg);
  }
  70% {
    transform: translate(1px, 2px) rotate(0.3deg);
  }
  75% {
    transform: translate(-2px, 1px) rotate(-0.5deg);
  }
  80% {
    transform: translate(2px, -1px) rotate(0.5deg);
  }
  85% {
    transform: translate(-1px, -2px) rotate(-0.3deg);
  }
  90% {
    transform: translate(1px, 2px) rotate(0.3deg);
  }
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
}
#top-page .sec04 .sec04-photo img {
  width: 100%;
  height: auto;
  display: block;
  /* 0.8秒周期で繰り返す（ここを長くすると停止時間がもっと伸びます） */
  animation: shake-and-pause 0.8s linear infinite;
}
#top-page .sec04 {
  position: relative;
}
#top-page .sec04 img {
  width: 100%;
  height: auto;
  display: block;
}
#top-page .sec04 .heading01 {
  width: 25%;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .heading01 {
    width: 50%;
  }
}
#top-page .sec04 .heading02 {
  width: 60%;
  margin: auto;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .heading02 {
    width: 50%;
  }
}
#top-page .sec04 .sec04-bg {
  position: absolute;
  right: -15%;
  width: 80%;
  top: -2%;
  z-index: -1;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04-bg {
    right: -30%;
    width: 100%;
    top: 12%;
  }
}
#top-page .sec04 {
  /*sec04墨1*/
}
#top-page .sec04 .sec04-sumi01 {
  position: absolute;
  left: -15%;
  width: 42%;
  top: 20%;
  z-index: -1;
}
#top-page .sec04 {
  /*sec04墨2*/
}
#top-page .sec04 .sec04-sumi02 {
  position: absolute;
  right: -30%;
  width: 50%;
  top: 35%;
  z-index: -1;
}
#top-page .sec04 .sec04contents .company-ol {
  width: 90%;
  margin: auto;
  position: relative;
  padding-bottom: 30%;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04contents .company-ol {
    width: 100%;
  }
}
#top-page .sec04 .sec04contents .company-ol {
  /*sec04-photo*/
}
#top-page .sec04 .sec04contents .company-ol .sec04-photo {
  position: absolute;
  right: -8%;
  width: 55%;
  bottom: 20%;
  z-index: 101;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04contents .company-ol .sec04-photo {
    top: 2%;
    bottom: auto;
  }
}
#top-page .sec04 .sec04contents .company-ol .sec04-photo video {
  width: 100%;
  height: auto;
  display: block;
  transform-origin: top left;
  animation: shake-slow 10.4s linear infinite;
}
@keyframes shake-slow {
  0%, 96.2% {
    transform: rotate(5deg) translate(0, 0);
  }
  96.7% {
    transform: rotate(4.5deg) translate(-2px, 1px);
  }
  97.2% {
    transform: rotate(5.5deg) translate(2px, -1px);
  }
  97.6% {
    transform: rotate(4.7deg) translate(-1px, -2px);
  }
  98.1% {
    transform: rotate(5.3deg) translate(1px, 2px);
  }
  98.6% {
    transform: rotate(4.5deg) translate(-2px, 1px);
  }
  99.0% {
    transform: rotate(5.5deg) translate(2px, -1px);
  }
  99.5% {
    transform: rotate(4.7deg) translate(-1px, -2px);
  }
  100% {
    transform: rotate(5deg) translate(0, 0);
  }
}
#top-page .sec04 .sec04contents .company-ol__dtl {
  width: 100%;
  font-size: 1dvw;
  position: relative;
  z-index: 102;
}
@media screen and (max-width: 1240px) {
  #top-page .sec04 .sec04contents .company-ol__dtl {
    font-size: clamp(1.3rem, 1.1vw, 1.8rem);
  }
}
#top-page .sec04 .sec04contents .company-ol__dtl tr.last th {
  padding-top: 40px;
}
#top-page .sec04 .sec04contents .company-ol__dtl tr th {
  text-align: left;
  width: 10%;
  min-width: 8em;
  padding: 2px 0;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04contents .company-ol__dtl tr th {
    width: 30%;
  }
}
@media screen and (max-width: 640px) {
  #top-page .sec04 .sec04contents .company-ol__dtl tr th {
    width: 100%;
    display: block;
  }
}
#top-page .sec04 .sec04contents .company-ol__dtl tr th span {
  display: inline-block;
  background-color: #000;
  color: #fff;
  padding: 8px;
  line-height: 1;
}
#top-page .sec04 .sec04contents .company-ol__dtl tr td {
  padding: 5px;
  font-weight: bold;
}
@media screen and (max-width: 480px) {
  #top-page .sec04 .sec04contents .company-ol__dtl tr td {
    width: 100%;
    display: block;
  }
}
#top-page .sec04 .sec04contents .company-greeting {
  padding: 5% 0;
  position: relative;
}
#top-page .sec04 .sec04contents .company-greeting .greeting-bg {
  position: absolute;
  width: 100%;
  bottom: -20%;
  right: -10%;
  z-index: 1;
}
#top-page .sec04 .sec04contents .company-greeting__ttl {
  text-align: center;
}
#top-page .sec04 .sec04contents .company-greeting__read {
  padding: 10% 0;
  line-height: 2;
  margin-top: 30%;
  font-size: 1dvw;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04contents .company-greeting__read {
    margin-top: 0;
    font-size: 13px;
    line-height: 1.6;
  }
}
#top-page .sec04 .sec04contents .company-greeting .frame-container {
  position: relative;
  margin: 0 auto;
  /* 煙のラッパー（配置を決める） */
}
#top-page .sec04 .sec04contents .company-greeting .frame-container .smoke-vibration.pos-yakiniku {
  position: absolute;
  bottom: 52%;
  left: 25%;
  transform: translateX(-50%);
  width: 75%;
  z-index: 101;
  pointer-events: none;
  mix-blend-mode: multiply;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04contents .company-greeting .frame-container .smoke-vibration.pos-yakiniku {
    width: 50%;
  }
}
#top-page .sec04 .sec04contents .company-greeting .frame-container {
  /* 煙の画像本体（アニメーションを適用する） */
}
#top-page .sec04 .sec04contents .company-greeting .frame-container .smoke-img {
  width: 100%;
  height: auto;
  transform-origin: bottom center; /* ★【重要】煙の「根元」を支点に動かす */
  /* ★アニメーションを指定（13秒かけて、ゆっくり、滑らかに） */
  animation: smoke-drift-gentle 13s ease-in-out infinite;
  opacity: 0; /* 最初は隠す */
}
#top-page .sec04 .sec04contents .company-greeting .frame-container {
  /* ★1枚で魅せる「静かなゆらゆら」アニメーション定義 */
}
@keyframes smoke-drift-gentle {
  0%, 100% {
    transform: translateY(0) scaleY(1) rotate(0deg);
    opacity: 0.9;
    filter: blur(0px); /* 根元はパキッと */
  }
  /* ゆっくり上昇し、わずかに右に揺れる */
  25% {
    transform: translateY(-10px) scaleY(1.02) rotate(1deg);
    opacity: 0.6;
  }
  /* 最上部で形が歪み、ぼかしが強くなる（空気に溶ける瞬間） */
  50% {
    transform: translateY(-20px) scaleY(1.05) rotate(-1.5deg);
    opacity: 0.3; /* 消えそうになる */
    filter: blur(2px); /* 強くぼかす */
  }
  /* 根元に戻りながら、最後の揺らぎ */
  75% {
    transform: translateY(-8px) scaleY(1.02) rotate(1deg);
    opacity: 0.4;
    filter: blur(0.5px);
  }
}
#top-page .sec04 .sec04contents .company-greeting {
  /* 額縁画像 */
}
#top-page .sec04 .sec04contents .company-greeting .frame-over {
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
}
#top-page .sec04 .sec04contents .company-greeting {
  /* 動画のコンテナ */
}
#top-page .sec04 .sec04contents .company-greeting .video-inner {
  position: absolute;
  top: 12%;
  left: 14%;
  width: 72%;
  height: 78%;
  z-index: 1;
  overflow: hidden;
  -o-object-fit: cover;
     object-fit: cover;
}
#top-page .sec04 .sec04contents .company-greeting .video-inner video {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
#top-page .sec04 .sec04contents .sec04contents-inner {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: 2%;
  margin-top: -30%;
}
@media screen and (max-width: 768px) {
  #top-page .sec04 .sec04contents .sec04contents-inner {
    width: 100%;
    flex-direction: column;
  }
}
#top-page .sec04 .sec04contents .sec04contents-inner .rt {
  flex: 0 0 50%;
}
#top-page .sec04 .sec04contents .sec04contents-inner .lt {
  flex: 1;
}
#top-page {
  /* ++++++++++++
  sec05
  ++++++++++++ */
}
#top-page .sec05 {
  position: relative;
  padding-top: 8%;
}
#top-page .sec05 img {
  width: 100%;
  height: auto;
  display: block;
}
#top-page .sec05 .sec05-bg {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: -5%;
  z-index: 3;
  pointer-events: none;
}
#top-page .sec05 .sec05-bg02 {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 30%;
  z-index: 3;
  pointer-events: none;
}
#top-page .sec05 {
  /*sec03花*/
}
#top-page .sec05 .sec05-hasu {
  position: absolute;
  width: 120%;
  top: -1%;
  right: -10%;
  z-index: -1;
}
#top-page .sec05 {
  /*sec05墨1*/
}
#top-page .sec05 .sec05-sumi01 {
  position: absolute;
  left: -15%;
  width: 40%;
  top: 15%;
  opacity: 0.3;
  z-index: 1;
}
#top-page .sec05 {
  /*sec05墨2*/
}
#top-page .sec05 .sec05-sumi02 {
  position: absolute;
  right: -8%;
  width: 40%;
  top: 40%;
  z-index: 1;
  mix-blend-mode: multiply;
  opacity: 0.7;
}
#top-page .sec05 {
  /*sec05墨3*/
}
#top-page .sec05 .sec05-sumi03 {
  position: absolute;
  left: -10%;
  width: 25%;
  bottom: -10%;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#top-page .sec05 {
  /*sec05墨3*/
}
#top-page .sec05 .sec05-sumi04 {
  position: absolute;
  right: -15%;
  width: 30%;
  bottom: -15%;
  z-index: 1;
  mix-blend-mode: multiply;
  pointer-events: none;
}
#top-page .sec05 .sec05contents {
  position: relative;
  z-index: 2;
}
#top-page .sec05 .sec05contents .sec05contents-link {
  width: 95%;
  margin: auto;
  display: flex;
  align-items: end;
  list-style: none;
  padding: 3% 0 5%;
  justify-content: space-between;
}
#top-page .sec05 .sec05contents .sec05contents-link li {
  width: 20%;
}
#top-page .sec05 .sec05contents .sec05contents-link li a {
  display: block;
  width: 100%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link01 {
  margin-bottom: -16%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 {
  width: 30%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap {
  display: block !important;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  position: relative;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap video {
  width: 100%;
  height: auto;
  display: block;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-sound-btn {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-sound-btn svg {
  width: 18px;
  height: 18px;
  fill: #fff;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-sound-btn .icon-sound {
  display: none;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-sound-btn.is-unmuted .icon-mute {
  display: none;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-sound-btn.is-unmuted .icon-sound {
  display: block;
}
@media screen and (max-width: 768px) {
  #top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-sound-btn {
    right: 4px;
  }
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-link-threads,
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-link-instagram {
  position: absolute;
  top: 0;
  height: 100%;
  width: 33.33%;
  display: block;
  z-index: 1;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-link-threads {
  left: 0;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link02 .sec05-video-wrap .video-link-instagram {
  left: 33.33%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link03 {
  width: 15%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link03 a {
  margin-bottom: -15%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link04 {
  width: 15%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link04 a {
  display: block;
  width: 110%;
  margin-bottom: -10%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link05 {
  width: 30%;
}
#top-page .sec05 .sec05contents .sec05contents-link li.link05 a {
  margin-bottom: -18%;
}
#top-page {
  /* --- アニメーション定義 --- */
  /* 1. 上下にふわふわ（交互に動かすため、開始位置をずらして2種類） */
}
@keyframes fuwafuwa-up {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-15px);
  }
}
@keyframes fuwafuwa-down {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(15px);
  }
}

/* 2. わずかな回転と揺れ（ゆらゆら） */
@keyframes yurayura {
  0%, 100% {
    transform: rotate(0deg) translateY(0);
  }
  25% {
    transform: rotate(1deg) translateY(-3px);
  }
  75% {
    transform: rotate(-1deg) translateY(3px);
  }
}
/*********************************

sub-page

*********************************/
#sub-page {
  background: #fff;
  padding: 10% 0;
}
#sub-page h1.sub-page__ttl {
  font-size: 4rem;
  text-align: center;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #000;
}
@media screen and (max-width: 768px) {
  #sub-page h1.sub-page__ttl {
    font-size: 2rem;
  }
}/*# sourceMappingURL=style.css.map */