@charset "UTF-8";

/*==============
PC
===============*/

:root {
  --blue: #0061b1;
  --yellow: #fdd23c;
  --pink:#ec466a;
}


body{
  overflow-x: hidden;
}

#cursor {
  position: fixed;
  width: 40px;
  height: auto;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s linear;
}

#cursor.left {
  transform: scaleX(-1);
}

#cursor.right {
  transform: scaleX(1);
}



header {
  position: relative;
  z-index: 1000; /* ← 最前面に強制 */
}



.top01 .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #fbe2eb 0%, #a5d1f0 100%);
  z-index: 0; /* ← headerより下、テキストより下 */
}

.top01 .text,
.top01 #walker {
  position: relative;
  z-index: 1; /* ← 背景より前に */
}



header .hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    position: fixed;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 1000;
    background: var(--blue);
    border-radius: 50%;
    border: 2px solid #fff;
    gap: 5px; /* spanの間隔 */
}

header .hamburger span {
  width: 50%; /* このままでOK */
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: all 0.3s ease;
  transform-origin: center; /* 回転の軸を中心にするのがキモ！ */
  position: relative;
}




/* アクティブ時の変形 */
header .hamburger.active span:nth-child(1) {
  transform: rotate(38deg);
  top: 7px;
}

header .hamburger.active span:nth-child(2) {
  opacity: 0;
}

header .hamburger.active span:nth-child(3) {
  transform: rotate(-45deg);
  top: -6px;
}

header .drawer-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 300px; /* or 100vw on mobile */
  height: 100vh;
  background: #fff;
  z-index: 999;
  padding: 80px 20px 20px;
  box-sizing: border-box;
  transform: translateX(100%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); /* ← ここポイント！ */
}

header .drawer-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

header .drawer-menu li {
}

header .drawer-menu li a {
  display: block;
  padding: 16px;
  text-decoration: none;
  color: #333;
  font-size: 18px;
}

header .drawer-menu.active {
  transform: translateX(0);
}




/* サブメニュー初期状態：非表示＆透明＆上にちょい隠す */
header .menu ul li {
  position: relative;
}
header .menu ul li a {
  position: relative;   /* ✅ 背景と重なりを制御するため必要 */
  z-index: 1;           /* ✅ 文字を前面に出す */
  display: inline-block;
  padding: 1.5em 1.2em 0.6em 1.2em;
  transition: color 0.3s ease;
  overflow: hidden;
  color: var(--blue);
  font-weight: 600;
  font-size: var(--fs-5); /* ← 変数定義済みならそのままでOK */
  text-align: center;
}


header .menu ul li a::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--yellow);
  z-index: -1; /* ✅ 背面に回す */
  transition: height 0.3s ease;
  border-radius: 0 0 10px 10px;
}

header .menu ul li:hover > a::before {
  height: 100%;
}



header .menu ul .submenu {
  display: block;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  top: 116%;
  left: 0;
  transition: all 0.3s ease;
  transform: translateY(-10px); /* ちょい上から降りてくる */
  z-index: 10;
}

header .menu ul .submenu li a {
  white-space: nowrap;
  display: block;
  padding: 10px 16px;
  text-decoration: none;
  color: #ffffff;
  background: var(--blue);
  border-radius: 10px;
  font-size: var(--fs-3);
  text-align: left;
}

header .menu ul .submenu li a:hover {
  color: var(--blue);
}

/* ホバー時：ふわっと下に出る */
header .menu ul li:hover > .submenu {
  opacity: 1;
  visibility: visible;
}


header {display: flex;justify-content: space-between;}
header a {
}
header a h1 {
}
header a h1 img {
}
header div.menu {
}
header div.menu ul {display: flex;padding: 0 80px 0 0;}
header div.menu ul li {
}

header div.menu ul li ul.submenu {
}
header div.menu ul li ul.submenu li {padding: 0;margin: 0.5em 0;}
header div.menu ul li ul.submenu li a {
}


header div#hamburger.hamburger {
}
header div#hamburger.hamburger span {
}

header div#drawerMenu.drawer-menu {border-left: 6px solid var(--blue);}
header div#drawerMenu.drawer-menu ul {
}
header div#drawerMenu.drawer-menu ul li {
}
header div#drawerMenu.drawer-menu ul li a {color: var(--blue);font-weight: 800;}
header div#drawerMenu.drawer-menu ul li ul {
}
header div#drawerMenu.drawer-menu ul li ul li {
}
header div#drawerMenu.drawer-menu ul li ul li a {color: #474747;font-weight: 400;}



/* SP・タブレット用 表示制御 */
@media screen and (max-width: 1024px) {


  header .drawer-menu {
    width: 100vw;
  }

  header .menu {
    display: none;
    position: absolute;
    top: 60px;
    right: 0;
    background: #fff;
    width: 200px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    z-index: 999;
  }

  header .menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  header .menu li {
    border-bottom: 1px solid #ddd;
  }

  header .menu li a {
    display: block;
    padding: 12px;
    text-decoration: none;
    color: #333;
  }
}

.top01 {
  position: relative; /* ← これが必須！ */
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: 5em 0;
}


div.bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, #fbe2eb 0%, #a5d1f0 100%);
  z-index: 0;
  pointer-events: none;
}

div.top01 .text {
  max-width: 60%;
  pointer-events: auto;
  z-index: 1; /* ← これを追加 */
  position: relative; /* ← これも必要 */
  margin: 0 0 0 7%;
}
div.top01 div.text h2.zenmaru {color: #ec466a;font-size: var(--fs-10);text-shadow: 2px 2px #ffffff;}
div.top01 div.text span.mplus1 {color: #99b0d2;font-size: var(--fs-5);margin: 0.5em 0;display: block;}
div.top01 div.text p {font-size: var(--fs-5);line-height: 2;}


div.top01 img#walker {
  width: 45vw;
  height: auto;
  animation: walk-frames 0.5s steps(4) infinite;
  pointer-events: auto;
  z-index: 1; /* ← これを追加 */
  position: relative; /* ← これも必要 */
}

.fade-glow-shadow {
  position: relative;
  display: inline-block;
  color: #fff; /* 本体は白 */
  text-shadow: 0 2px 6px rgba(0,0,0,0.3);
  z-index: 1;
}

.hero-catch {
  display: inline-block;
  opacity: 0;
  transform: scale(1.1);
  filter: blur(3px);
  text-shadow: 0 3px 8px rgba(0,0,0,0.3);
  animation: zoomFocus 1.6s ease-out forwards;
}

@keyframes zoomFocus {
  0% {
    opacity: 0;
    transform: scale(1.1);
    filter: blur(3px);
  }
  50% {
    opacity: 0.5;
    transform: scale(1.05);
    filter: blur(1.5px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}





.top01,
.top01 .text,
.top01 #walker {
  position: relative;
  z-index: 1;
}


img[src*="top_bg.webp"] {
  display: block;
  width: 100%;
  height: auto;
  position: relative;
  z-index: 1;
}


div.top02 {
  background: #fff url(../images/bg_sakura.webp) no-repeat right bottom;
  padding: 4em 0;
  align-items: center;
  gap: 2em;
  position: relative; /* ← 必須 */
  z-index: 2;          /* ←【追記】背景より前に出す */
  display: flex;
  align-items: flex-start;
  justify-content: space-around;
}



 h2.lined-title {
  font-size: var(--fs-5);
  color: #000;
  line-height: 1.4;
  display: inline-block;
      position: relative;
    z-index: 2;
}

h2.lined-title .crimson-line {
  position: relative;
  display: inline-block;
  font-family: 'Crimson Text', serif;
  font-size: var(--fs-15);
  color: var(--blue);
  padding-left: 2em;
}

 h2.lined-title .crimson-line::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 1.5em;
  height: 1px;
  background: var(--blue);
  transform: translateY(-50%);
}

 h2.lined-title .subtitle {
  display: block;
  font-size: inherit;
  color: inherit;
  padding-left: 8.1em; /* ← Aboutと同じ位置に揃えるポイント */
  margin-top: 0.2em;
  font-weight: 400;
  color: var(--blue);
}



div.top02 div.top02_01 {padding: 0 2em;}
div.top02 div.top02_01 h3 {font-size: var(--fs-10);color: var(--blue);margin: 0 0 0.5em 0;}
div.top02 div.top02_01 p {font-size: var(--fs-4);color: #000;line-height: 2;}
div.top02 div.top02_01 a {
  background: var(--blue);
  color: #fff;
  border-radius: 500px;
  padding: 0.5em 2em;
  display: inline-block;
  margin: 2em 0;
  font-size: var(--fs-5);
  transition: all 0.3s ease;
    border: 1px solid var(--blue);

}

div.top02 div.top02_01 a:hover {
  background: #fff;
  color: var(--blue);
  border: 1px solid var(--blue);
}

div.top02 img.top02_img {width: 40%;border-radius: 10px 0 0 10px;}


.top03{
    position: relative;
    z-index: 2;
    background: url(../images/bg01.webp) no-repeat #fff;
    background-size: 100%;
    padding: 0 10% 5em 10%;
}


div.top03 {
}
div.top03 h3 {padding: 3em 0 0 0;font-size: var(--fs-10);color: var(--pink);}
div.top03 p {font-size: var(--fs-4);line-height: 2;margin: 1em 0 3em 0;}
div.top03 ul {display: flex;justify-content: space-between;align-items: flex-start;}
div.top03 ul li {background: #fff;border-radius: 15px;box-shadow: 1px 1px 10px 0px #000000b3;padding: 4em 3em 2em 3em;position: relative;margin: 0 1%;width: 31%;}
div.top03 ul li span {background: url(../images/top_step_bg.webp) no-repeat;position: absolute;top: -1em;left: -1em;color: #fff;width: 146px;height: 88px;display: flex;justify-content: center;align-items: center;font-size: var(--fs-5);}
div.top03 ul li span b {font-size: var(--fs-6);padding: 0 0 0 0.2em;}
div.top03 ul li img {
}
div.top03 ul li h4 {
  font-size: var(--fs-5);
  color: var(--blue);
  background: linear-gradient(transparent 60%, var(--yellow) 60%);
  display: inline;
}
div.top03 ul li p {margin: 1em 0;}




div.top04{
    position: relative; /* ← 必須 */
  z-index: 2;          /* ←【追記】背景より前に出す */
  background: url(../images/bg02.webp) no-repeat #fff;
  background-size: 100%;

}


div.top04 h2.lined-title {width: 100%;}
div.top04 h2.lined-title span.crimson-line {
}
div.top04 h2.lined-title span.subtitle {
}
/* 【入れ替え】div.top04 a.blog_link の全スタイルを以下に差し替え */
div.top04 a.blog_link {
  position: relative;
  float: right;
  text-align: right;
  color: var(--blue);
  font-size: var(--fs-5);
  font-weight: 600;
  display: inline-block;
  padding-right: 1.5em;
  margin: 0 10% 0 0;
  border-bottom: 2px dashed var(--blue);
  transition: all 0.3s ease;
}

div.top04 a.blog_link::after {
  content: "→";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) translateX(-5px);
  opacity: 0;
  transition: all 0.3s ease;
  color: var(--blue);
}

div.top04 a.blog_link:hover {
  color: #004080;
  border-bottom: 2px solid #004080;
}

div.top04 a.blog_link:hover::after {
  transform: translateY(-50%) translateX(0);
  opacity: 1;
}

div.top04 a.blog_link i.fa-solid.fa-circle-arrow-right {
}
div.top04 ul {justify-content: space-between;display: flex;width: 80%;margin: 5em auto 0 auto;}
div.top04 ul li {width: 32%;}
div.top04 ul li img {border-radius: 10px;}
div.top04 ul li p.date {margin: 1em 0 0 0;}
div.top04 ul li h3 {color: var(--blue);}


div.top05{
    position: relative; /* ← 必須 */
    z-index: 2;          /* ←【追記】背景より前に出す */
    background: #fff url(../images/bg_sakura_re.webp) no-repeat bottom left;
    padding: 10em 0 0 0;
}


div.top05 img.sakura {position: absolute;top: -5em;right: -3em;width: 25%;}
div.top05 h2 {text-align: center;color: var(--blue);font-size: var(--fs-14);line-height: 0.9;}
div.top05 p.h2_sub {text-align: center;color: var(--blue);}
div.top05 ul {width: 90%;margin: 3em auto 0 auto;font-size: var(--fs-4);line-height: 2;}
div.top05 ul li {position: relative;display: flex;justify-content: flex-end;z-index: -1;}
div.top05 ul li dl {width: 55%;display: flex;background: #fff;box-shadow: 4px 3px 9px 0px #4b4b4b8c;border-radius: 20px;padding: 5%;position: absolute;bottom: -2em;left: 2em;justify-content: space-between;align-items: center;}
div.top05 ul li dl dt {width: 60%;}
div.top05 ul li dl dt h3.mplus1 {color: var(--pink);}
div.top05 ul li dl dt h3.mplus1 span {display: inline-block;border-bottom: 1px solid;font-size: var(--fs-5);margin: 0 0.5em 0 0;}
div.top05 ul li dl dt h4 {color: var(--blue);font-size: var(--fs-7);margin: 0.5em 0;}
div.top05 ul li dl dt p {
}
div.top05 ul li dl dd {width: 40%;}
div.top05 ul li dl dd img {
}
div.top05 ul li img.image {width: 55%;border-radius: 20px;}


div.top05 ul li.reverse {justify-content: flex-start;margin: 10em 0 5em 0;}
div.top05 ul li.reverse dl {right: 0;left: auto;bottom: auto;top: -2em;}
div.top05 ul li.reverse dl dt {
}
div.top05 ul li.reverse dl dt h3.mplus1 {
}
div.top05 ul li.reverse dl dt h3.mplus1 span {
}
div.top05 ul li.reverse dl dt h4 {
}
div.top05 ul li.reverse dl dt p {
}
div.top05 ul li.reverse dl dd {
}
div.top05 ul li.reverse dl dd img {
}
div.top05 ul li.reverse img.image {
}

div.top05 div{
  text-align: right;
  padding: 0 5% 0 0;
}

a.tsuyomi_link {
  border: dotted 2px;
  position: relative;
  display: inline-block;
  font-size: var(--fs-5);
  font-weight: 600;
  color: var(--blue);
  padding: 0.5em 1.5em;
  overflow: hidden;
  border-radius: 50px;
  z-index: 1;
  transition: color 0.3s ease;
  margin: 4em 0 3em 0;
}

a.tsuyomi_link::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 120%;
  height: 0%;
  background: var(--blue);
  z-index: -1;
  border-radius: 50px;
  transition: height 0.4s ease, transform 0.4s ease;
  transform: translateX(-50%);
}

a.tsuyomi_link:hover {
  color: #fff;
}

a.tsuyomi_link:hover::before {
  height: 100%;
}


div.top_instagram {
    position: relative; /* ← 必須 */
    z-index: 2;          /* ←【追記】背景より前に出す */
    background: #fff;
    padding: 0 10%;
}
div.top_instagram dl {display: flex;align-items: center;justify-content: space-between;}
div.top_instagram dl dt {text-align: center;padding: 0 5% 0 0;width: 20%;border-right: 1px solid;}
div.top_instagram dl dt i.fa-brands.fa-instagram {font-size: var(--fs-10);color: var(--pink);}
div.top_instagram dl dt h3 {color: var(--pink);}
div.top_instagram dl dt a {background: #7b7b7b;border-radius: 100px;color: #fff;display: inline-block;margin: 0.5em 0 0 0;padding: 0.5em 3em;}



footer {
      position: relative; /* ← 必須 */
      z-index: 2;          /* ←【追記】背景より前に出す */
      background: var(--blue);
      padding: 3em 5%;
}
footer div.wrap {display: flex;color: #fff;}
footer div.wrap div.f01 {
}
footer div.wrap div.f01 img {width: 12vw;}
footer div.wrap div.f01 p { font-size: var(--fs-5); margin: 1em 0 0 0;
}
footer div.wrap div.f01 h3 {font-size: var(--fs-8);
}
footer div.wrap div.f02 {margin: 0 0 0 5em;
}
footer div.wrap div.f02 h4 {font-size: var(--fs-8);
}
footer div.wrap div.f02 a.tel {font-size: var(--fs-10); font-weight: 800;
}
footer div.wrap div.f02 p {
}
footer div.wrap div.f02 a.contact {border: 1px solid;border-radius: 100px;padding: 0.5em 2em;display: inline-block;margin: 1em 0 0 0;}
footer div.wrap div.f02 a.contact:hover {
  background: #fff;
  color: var(--blue);
  border-color: #fff;
  transition: all 0.3s ease;
}
footer div.wrap div.f02 a.contact i.fa-solid.fa-angles-right {
}
footer p.copy {color: #fff;}

/* ベース */
.fadein {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
}

.fadein.active {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延（0.2sごと増加） */
.delay-time01 { transition-delay: 0.2s; }
.delay-time02 { transition-delay: 0.4s; }
.delay-time03 { transition-delay: 0.6s; }
.delay-time04 { transition-delay: 0.8s; }
.delay-time05 { transition-delay: 1.0s; }
/* 必要に応じて増やす */

.pagetop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--pink);
  color: #ffffff;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  text-align: center;
  line-height: 48px;
  font-size: 1.6rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  z-index: 9999;
}

.pagetop.show {
  opacity: 1;
  visibility: visible;
}


div#drawerMenu.drawer-menu {
}
div#drawerMenu.drawer-menu img.logo {width: 80%;margin: 0 0 1em 0;}
div#drawerMenu.drawer-menu ul {
}
div#drawerMenu.drawer-menu ul li {
}
div#drawerMenu.drawer-menu ul li a {
}
div#drawerMenu.drawer-menu ul li ul {
}
div#drawerMenu.drawer-menu ul li ul li {
}
div#drawerMenu.drawer-menu ul li ul li a {
}


div.second {
}
div.second div.h2 {position: relative;padding: 3em 10%;display: flex;align-items: center;}
div.second div.h2 h2 {color: var(--pink);font-size: var(--fs-8);margin: 0 1em 0 0;}
div.second div.h2 span.montserrat {color: #b7b7b7;}
div.second img {
}

section div.office01 {
}
section div.office01 h2.lined-title.fadein {
}
section div.office01 h2.lined-title.fadein span.crimson-line {
}
section div.office01 h2.lined-title.fadein span.subtitle {
}


section{
  background: #fff;
  position: relative;
  z-index: 1;
}

div.office01 { background: url(../images/bg01.webp) center no-repeat;
}
div.office01 h2.lined-title.fadein {
}
div.office01 h2.lined-title.fadein span.crimson-line {
}
div.office01 h2.lined-title.fadein span.subtitle {
}
div.office01 div.intro {width: 80%;margin: 0 auto;}
div.office01 div.intro h3 {font-size: var(--fs-8);color: var(--blue);margin: 1em 0;}
div.office01 div.intro p {width: 60%;line-height: 2;font-size: var(--fs-4);}
div.office01 ul {width: 80%;display: flex;flex-wrap: wrap;justify-content: space-between;margin: 0 auto;padding: 2em 0;}
div.office01 ul li {width: 32%;position: relative;}
div.office01 ul li img {
}
div.office01 ul li span {
  background: var(--blue);
  color: #fff;
  text-align: center;
  font-size: var(--fs-6);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  width: 3em; /* 任意でサイズ指定 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto -1.2em auto;
  font-weight: 800;
}div.office01 ul li h4 {background: var(--blue);border-radius: 200px;color: #fff;text-align: center;font-size: var(--fs-6);padding: 0.3em;}
div.office01 ul li p {font-size: var(--fs-4);padding: 1em;color: var(--blue);font-weight: 700;}

div.office02 {margin: 5em 0 ; background: url(../images/bg02.webp) no-repeat;}
div.office02 h2.lined-title.fadein {
}
div.office02 h2.lined-title.fadein span.crimson-line {
}
div.office02 h2.lined-title.fadein span.subtitle {
}
div.office02 ul {width: 80%;margin: 3em auto;display: flex;justify-content: space-between;}
div.office02 ul li.fadein {width: 32%;}
div.office02 ul li.fadein img {
}
div.office02 ul li.fadein.delay-time02 {
}
div.office02 ul li.fadein.delay-time02 img {
}
div.office02 ul li.fadein.delay-time04 {
}
div.office02 ul li.fadein.delay-time04 img {
}
/* 【追記】div.gallery div.main-image に position 指定 */
div.gallery div.main-image {
  width: 50%;
  position: relative; /* ←これがないと絶対出ません */
}

/* 【追記】バー本体 */
div.gallery div.main-image .progress-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  background: var(--blue);
  width: 0%;
  animation: progressBarAnim 9s linear forwards;
  z-index: 2;
}

@keyframes progressBarAnim {
  from { width: 0%; }
  to { width: 100%; }
}


/* 【再確認・入れ替え】main image に transition を入れる */
div.gallery div.main-image img {
  border-radius: 10px;
  width: 100%;
  height: auto;
  transition: opacity 0.3s ease; /* ←これがないとフェードしない */
  opacity: 1;
}

div.office03 {background: url(../images/bg01.webp) no-repeat top;background-size: 100%;padding: 0 0 5em 0;}
div.office03 h2.lined-title.fadein {
}
div.office03 h2.lined-title.fadein span.crimson-line {
}
div.office03 h2.lined-title.fadein span.subtitle {
}
div.office03 div.gallery {
  display: flex;
  flex-wrap: nowrap;
  gap: 2%;
  align-items: flex-start;
  width: 80%;
  margin: 2em auto;
}
div.office03 div.gallery div.main-image {}


div.office03 div.gallery div.main-image img#mainImg {
}


div.office03 div.gallery div.main-image div#progressBar.progress-bar {
}
div.office03 div.gallery div.thumbs {
}
div.office03 div.gallery div.thumbs img.thumb.active {
}
div.office03 div.gallery div.thumbs img.thumb {
}
/* 【入れ替え】左：メイン画像 */
div.gallery div.main-image {
  width: 50%;
  position: relative;
}

/* 【入れ替え】右：サムネイル全体 */
div.gallery div.thumbs {
  width: 48%;
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
  align-content: flex-start;
}
div.gallery div.thumbs img.thumb {
  width: 24%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 0.2s;
  margin-bottom: 1%;
  border-radius: 10px;
}


div.gallery div.thumbs img.thumb.active {
  opacity: 1;
}



div.office04 {margin: 5em 0;}
div.office04 h2.lined-title.fadein {
}
div.office04 h2.lined-title.fadein span.crimson-line {
}
div.office04 h2.lined-title.fadein span.subtitle {
}
div.office04 ul {width: 80%;margin: 2em auto;display: flex;justify-content: space-between;gap: 2em;}
div.office04 ul li.fadein {text-align: center;}
div.office04 ul li.fadein img {margin: 0 0 1em 0;}
div.office04 ul li.fadein span {color: var(--blue);}
div.office04 ul li.fadein p {color: var(--blue);font-size: var(--fs-6);font-weight: 600;}
div.office05 {
}
div.office05 h2.lined-title.fadein {
}
div.office05 h2.lined-title.fadein span.crimson-line {
}
div.office05 h2.lined-title.fadein span.subtitle {
}
div.office05 div.wrap {
}
div.office05 div.wrap dl {width: 80%;margin: 0 auto;padding: 2em 0;display: flex;justify-content: space-between;gap: 2em;}
div.office05 div.wrap dl dt {
}
div.office05 div.wrap dl dt iframe {border-radius: 15px;border: 5px solid var(--blue) !important;}
div.office05 div.wrap dl dd {color: var(--blue);}
div.office05 div.wrap dl dd p.add {font-size: var(--fs-7);font-weight: 600;}
div.office05 div.wrap dl dd a {font-size: var(--fs-10);font-weight: 800;}
div.office05 div.wrap dl dd p.time {font-size: var(--fs-5);}
div.office05 div.wrap dl dd ul {display: flex;justify-content: flex-start;margin: 1em 0;}
div.office05 div.wrap dl dd ul li {color: #fff;background: var(--blue);border-radius: 30px;padding: 0.5em 1em;margin: 0 0.5em 0 0;}
div.office05 div.wrap dl dd p.memo {font-weight: 700;font-size: var(--fs-4);}
div.office01 img.sakura{position: absolute; top: 0; right: 0;}






div.about01 {
    position: relative;
}
div.about01 dl {padding: 0 0 0 10%;display: flex;gap: 2em;justify-content: space-between;}
div.about01 dl dt {width: 50%;padding: 3em 0;}
div.about01 dl dt h3.mnc {font-size: var(--fs-10);color: #eb7388;}
div.about01 dl dt p {
}
div.about01 dl dt h4.mnc {font-size: var(--fs-8);margin: 1em 0;}
div.about01 dl dt img {
}
div.about01 dl dd {
    width: 40%;
}
div.about01 dl dd img {
    width: 100%;
}
div.about01 dl dt p {font-size: var(--fs-5);line-height: 2;}
div.about01 img.sakura {position: absolute;top: 0;right: 30vw;z-index: -1;}
div.about02 {
    background: url(../images/bg01.webp) top no-repeat;
    display: flex;
    justify-content: start;
    gap: 10em;
    padding: 10em 0 10em 0;
}
div.about02 h2.lined-title.fadein {
}
div.about02 h2.lined-title.fadein span.crimson-line {
}
div.about02 h2.lined-title.fadein span.subtitle {
}
div.about02 div.flow {width: 60%;text-align: center;color: #fff;}
div.about02 div.flow div.blue {background: var(--blue);border-radius: 10px;position: relative;padding: 5em;}
div.about02 div.flow div.blue h3.zenmaru {color: yellow;font-size: var(--fs-8);}
div.about02 div.flow div.blue p {font-size: var(--fs-5);margin: 1em 0 0 0;}
div.about02 div.flow div.blue img.ill01 {position: absolute;top: -8em;right: -2em;}
div.about02 div.flow i.fa-solid.fa-angle-down {color: var(--blue);font-size: var(--fs-15);margin: 0.2em 0;}
div.about02 div.flow div.blue img.ill02 {position: absolute;bottom: 0;left: -2em;}
div.about02 div.flow div.blue img.ill03 {position: absolute;top: -9em;right: 0;}
div.about02 div.flow div.blue img.ill04 {position: absolute;bottom: 0;left: -2em;}

.Company01 {
  display: flex;
  gap: 2em; /* Office と 表の間の余白 */
  align-items: flex-start; /* 上揃え */
  margin: 0 0 5em 0;
}

.Company01-left {
  flex: 0 0 auto;
}

.Company01-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin: 2em 5% 0 5%;
}

.Company01-right .row {
  display: flex;
  align-items: stretch;
}

.Company01-right .row:nth-of-type(odd) {
  background: #fbe2eb;
}

.Company01-right .row:nth-of-type(even) {
  background: #fff;
}

.Company01-right .cell {
  box-sizing: border-box;
  padding: 1em;
  background: transparent;
}

.Company01-right .cell.th {
  width: 25%;
  font-weight: bold;
}

.Company01-right .cell.td {
  width: 75%;
}



div.Company01 h2.lined-title.fadein {
}
div.Company01 h2.lined-title.fadein span.crimson-line {
}
div.Company01 h2.lined-title.fadein span.subtitle {
}
div.Company01 dl {
}
div.Company01 dl dt {
}
div.Company01 dl dd {
}
div.Company02 {background: url(../images/bg01.webp) no-repeat;display: flex;}
div.Company02 h2.lined-title.fadein {
}
div.Company02 h2.lined-title.fadein span.crimson-line {
}
div.Company02 h2.lined-title.fadein span.subtitle {
}
div.Company02 div.inner {margin: 3em 5% 5em 5%;}
div.Company02 div.inner div.message {margin: 0 0 3em 0;}
div.Company02 div.inner div.message img {width: 30%;height: 24vw;object-fit: cover;}
div.Company02 div.inner div.message h3.mnc {margin: 1em 0 0.5em 0;color: var(--blue);font-size: var(--fs-9);}
div.Company02 div.inner div.message p {line-height: 2;}
div.Company02 div.inner div.message p.name.mnc {text-align: right;font-size: var(--fs-6);font-weight: 600;}
div.Company02 div.inner div.message h4{
    margin: 2em 0 0.5em 0;
}



section div.strength01 { background: url(../images/bg01.webp) no-repeat;
}
section div.strength01 dl {display: flex;justify-content: space-between;align-items: end;}
section div.strength01 dl dt {
    padding: 0 0 5em 10%;
}
section div.strength01 dl dt h3 {border-radius: 15px;background: #fff;display: initial;font-size: var(--fs-10);color: var(--blue);}
section div.strength01 dt {width: 50%;}
section div.strength01 dd {
    width: 45%;
}
section div.strength01 dd img {border-radius: 20px 0 0 20px;}
section div.strength01 div.inner {display: flex;justify-content: space-between;margin: 5em 0;}
section div.strength01 div.inner h2.lined-title.fadein {
}
section div.strength01 div.inner h2.lined-title.fadein span.crimson-line {
}
section div.strength01 div.inner h2.lined-title.fadein span.subtitle {
}
section div.strength01 div.inner div {width: 56%;margin: 0 10% 0 0;}
section div.strength01 div.inner div img {width: 100%;}
section div.strength01 div.inner div img.sp {display: none;}
section div.strength01 div.inner div h3.zenmaru {margin: 1em 0 0.2em 0;font-size: var(--fs-9);color: var(--blue);}
section div.strength01 div.inner div p {font-size: var(--fs-5);line-height: 2;}
section div.strength02 {display: flex;justify-content: space-between;}
section div.strength02 h2.lined-title.fadein {
}
section div.strength02 h2.lined-title.fadein span.crimson-line {
}
section div.strength02 h2.lined-title.fadein span.subtitle {
}
section div.voice {margin: 0 10% 0 0;width: 57%;}
section div.voice dl {background: #fff;box-shadow: 1px 1px 7px gray;border-radius: 20px;padding: 2em 3em;display: flex;justify-content: space-between;gap: 3em;margin-bottom: 2em;}
section div.voice dl dt {
}
section div.voice dl dt h3.zenmaru {font-size: var(--fs-8);}
section div.voice dl dt p {font-size: var(--fs-5);line-height: 2;margin: 1em 0;}
section div.voice dl dt span {
}
section div.voice dl dd {width: 24%;}
section div.voice dl dd img {
}

/* 【追記】.blog_wrap 全体の横並びレイアウト */
.blog_wrap {
    display: flex;
    gap: 2em;
    max-width: 1500px;
    margin: 0 auto;
    padding: 2em 1em;
}

/* 【追記】.blog_wrap > .main */
.blog_wrap > .main {
    flex: 3;
}

.blog_wrap > .main ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em;
    list-style: none;
    padding: 0;
    margin: 0;
}

.blog_wrap > .main ul li {
    width: calc(33.333% - 1em);
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    transition: transform 0.3s ease;
}

.blog_wrap > .main ul li:hover {
    transform: translateY(-5px);
}

.blog_wrap > .main ul li a {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 1em;
    position: relative;
}

.blog_wrap > .main ul li img {
    width: 100%;
    height: 12vw;
    display: block;
    margin-bottom: 0.5em;
    object-fit: cover;
}

.blog_wrap > .main ul li .tag {
    display: inline-block;
    background: #f5a623;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 0 0 4px 4px;
    font-size: var(--fs-2);
    margin-bottom: 0.5em;
    position: absolute;
    background: #fff;
    left: 2em;
    color: var(
    --blue);
    font-weight: 700;
}

.blog_wrap > .main ul li h3 {
    font-size: 1em;
    margin: 0.5em 0;
}

.blog_wrap > .main ul li .date {
    font-size: 0.8em;
    color: #888;
}

/* 【追記】.blog_wrap > .sub */
.blog_wrap > .sub {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

/* 【追記】.blog_wrap .sub01 */
.blog_wrap .sub01 {
    background: #f9f9f9;
    padding: 1em;
    border-radius: 8px;
    /* border: 1px solid #ddd; */
}

.blog_wrap .sub01 h3 {
    font-size: var(--fs-6);
    margin-bottom: 1em;
    border-left: 4px solid var(
    --blue);
    padding-left: 0.5em;
    color: var(
    --blue);
}

/* 【追記】.blog_wrap .sub01 ul */
.blog_wrap .sub01 ul {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

.blog_wrap .sub01 ul li {
    margin-bottom: 0.5em;
}

.blog_wrap .sub01 ul li a {
    align-items: center;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    transition: color 0.3s ease;
}

.blog_wrap .sub01 ul li a:hover {
    color: #f5a623;
}

.blog_wrap .sub01 ul li a i {
    margin-right: 0.5em;
}

/* 【追記】.blog_wrap .sub01 ul li dl */
.blog_wrap .sub01 ul li dl {
    display: flex;
    gap: 0.8em;
    align-items: flex-start;
}

.blog_wrap .sub01 ul li dl dt img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
}

.blog_wrap .sub01 ul li dl dd {
    margin: 0;
    flex: 1;
}

.blog_wrap .sub01 ul li dl dd .date {
    font-size: 0.75em;
    color: #888;
    margin-bottom: 0.3em;
    display: block;
}

.blog_wrap .sub01 ul li dl dd h4 {
    font-size: 0.9em;
    margin: 0;
    line-height: 1.4;
    font-size: var(--fs-3);
}

/* 【追記】.blog_wrap .sub04 div（キーワード検索） */
.blog_wrap .sub04 div {
    border: 1px solid #ddd;
    height: 40px;
    background: #fff;
    border-radius: 4px;
}


div.blog_wrap {
}
div.blog_wrap div.main {
}
div.blog_wrap div.main ul {
}
div.blog_wrap div.main ul li {
}
div.blog_wrap div.main ul li a {
}
div.blog_wrap div.main ul li a span.tag.zenmaru {
}
div.blog_wrap div.main ul li a img {}
div.blog_wrap div.main ul li a h3 {
}
div.blog_wrap div.main ul li a p.date.montserrat {
}
div.blog_wrap div.sub {
}
div.blog_wrap div.sub div.sub01 {
}
div.blog_wrap div.sub div.sub01 h3.zenmaru {
}
div.blog_wrap div.sub div.sub01 ul {
}
div.blog_wrap div.sub div.sub01 ul li {
}
div.blog_wrap div.sub div.sub01 ul li a {
}
div.blog_wrap div.sub div.sub01 ul li a dl {
}
div.blog_wrap div.sub div.sub01 ul li a dl dt {
}
div.blog_wrap div.sub div.sub01 ul li a dl dt img {
}
div.blog_wrap div.sub div.sub01 ul li a dl dd {
}
div.blog_wrap div.sub div.sub01 ul li a dl dd span.date {
}
div.blog_wrap div.sub div.sub01 ul li a dl dd h4 {
}
div.blog_wrap div.sub div.sub01.sub02 {
}
div.blog_wrap div.sub div.sub01.sub02 h3.zenmaru {
}
div.blog_wrap div.sub div.sub01.sub02 ul {
}
div.blog_wrap div.sub div.sub01.sub02 ul li {
}
div.blog_wrap div.sub div.sub01.sub02 ul li a {font-size: var(--fs-4);}
div.blog_wrap div.sub div.sub01.sub02 ul li a i.fa-solid.fa-caret-right {
}
div.blog_wrap div.sub div.sub01.sub03 {
}
div.blog_wrap div.sub div.sub01.sub03 h3.zenmaru {
}
div.blog_wrap div.sub div.sub01.sub03 ul {display: flex;}
div.blog_wrap div.sub div.sub01.sub03 ul li {
}
div.blog_wrap div.sub div.sub01.sub03 ul li a {border: 1px solid #bbbbbb;border-radius: 200px;display: block;padding: 0.2em 1em;margin: 0 0.3em;}
div.blog_wrap div.sub div.sub01.sub04 {
}
div.blog_wrap div.sub div.sub01.sub04 h3.zenmaru {
}
div.blog_wrap div.sub div.sub01.sub04 div {
}


/* 【追記】.blog_wrap .pager */
.blog_wrap .pager {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5em;
    margin: 2em 0;
    flex-wrap: wrap;
}

.blog_wrap .pager a {
    display: inline-block;
    padding: 0.5em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    transition: background 0.3s ease, color 0.3s ease;
}

.blog_wrap .pager a:hover {
    background: #f5a623;
    color: #fff;
}

.blog_wrap .pager a.current {
    background: #f5a623;
    color: #fff;
    pointer-events: none;
    border-color: #f5a623;
}

.blog_wrap .pager a.prev,
.blog_wrap .pager a.next {
    font-weight: bold;
}

/* 【追記】.blog_wrap.blog_detail .article */
.blog_wrap.blog_detail .article {
    background: #fff;
    padding: 2em;
    border-radius: 8px;
    border: 1px solid #ddd;
    margin-bottom: 2em;
    font-size: 1em;
    line-height: 1.8;
    color: #333;
}

.blog_wrap.blog_detail .article dl {
    display: flex;
    gap: 1em;
    align-items: center;
    margin-bottom: 1em;
}

.blog_wrap.blog_detail .article dl dt.tag {
    background: #f5a623;
    color: #fff;
    padding: 0.2em 0.6em;
    border-radius: 4px;
    font-size: 0.8em;
}

.blog_wrap.blog_detail .article dl dd {
    font-size: 0.8em;
    color: #888;
}

.blog_wrap.blog_detail .article h3 {
    font-size: 1.4em;
    margin: 1em 0;
}

.blog_wrap.blog_detail .article p {
    margin-bottom: 1.5em;
}

.blog_wrap.blog_detail .article img {
    display: block;
    height: auto;
    margin: 1.5em 0;
    max-width: 70%;
}

/* 【追記】.blog_wrap.blog_detail .pager_detail */
.blog_wrap.blog_detail .pager_detail {
    display: flex;
    justify-content: space-between;
    gap: 1em;
    list-style: none;
    padding: 0;
    margin: 2em 0;
}

.blog_wrap.blog_detail .pager_detail li {
    flex: 1;
    border: none;
}

.blog_wrap.blog_detail .pager_detail li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.8em 1em;
    border: 1px solid #ddd;
    border-radius: 4px;
    text-decoration: none;
    color: #333;
    font-size: 0.9em;
    background: #f9f9f9;
    transition: background 0.3s ease, color 0.3s ease;
}

.blog_wrap.blog_detail .pager_detail li a:hover {
    background: #f5a623;
    color: #fff;
}

.blog_wrap.blog_detail .pager_detail li:first-child a {
    justify-content: flex-start;
    border-radius: 200px;
    padding: 2em;
    font-size: var(--fs-4);
}

.blog_wrap.blog_detail .pager_detail li:last-child a {
    justify-content: flex-end;
    border-radius: 200px;
    padding: 2em;
    font-size: var(--fs-4);
}



/* 個人情報保護方針セクション */
.privacy-policy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2em 1em;
  font-family: "游ゴシック体", "Yu Gothic", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", sans-serif;
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  /* background-color: #fafafa; */
  border-radius: 8px;
}

/* 見出し */
.privacy-policy h2 {
  font-size: 1.4rem;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  border-left: 10px solid #eb4d70;
  padding-left: 0.75em;
  color: #222;
}

/* 段落 */
.privacy-policy p {
  margin-bottom: 1em;
}

/* 利用目的リスト */
.privacy-policy ul {
  margin: 0 0 1em 1.2em;
  padding: 0;
}

.privacy-policy ul li {
  margin-bottom: 0.5em;
  list-style-type: disc;
  color: #444;
}

/* お問い合わせ欄の最後の補足 */
.privacy-policy p:last-child {
  font-size: 0.9rem;
  color: #666;
}


/* 【追記】div.contact-page にスタイル追加 */
div.contact-page {
  max-width: 800px;
  margin: 0em auto;
  padding: 2em;
  /* background: #e9e9e9; */
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-4);
}

/* 【追記】div.contact-page h2 */
div.contact-page h2 {
  margin-bottom: 1em;
  color: var(--blue);
  text-align: center;
}

/* 【追記】div.contact-page p */
div.contact-page p {
  text-align: center;
  /* margin-bottom: 2em; */
}

/* 【追記】div.contact-page form */
div.contact-page form {
  display: flex;
  flex-direction: column;
  gap: 1.5em;
}

/* 【追記】div.contact-page form.contact-form div.form-group */
div.contact-page form div.form-group {
  display: flex;
  flex-direction: column;
}

/* 【追記】div.contact-page form.contact-form label */
div.contact-page form label {
  margin-bottom: 0.5em;
  font-weight: 600;
  width: 100%;
  text-align: left;
  display: block;
}

/* 【追記】div.contact-page form input,
            div.contact-page form textarea */
div.contact-page form input,
div.contact-page form textarea {
  padding: 0.75em;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-family: inherit;
  font-size: var(--fs-3);
  background:#fff;
  width: 100%;
}

/* 【追記】div.contact-page form button.submit-button */
div.contact-page form input.submit {
  background: var(--blue);
  color: #fff;
  border: none;
  padding: 1em 2em;
  border-radius: 5px;
  font-size: var(--fs-4);
  cursor: pointer;
  transition: background 0.3s ease;
}

/* 【追記】div.contact-page form button.submit-button:hover */
div.contact-page form input.submit:hover {
  background: var(--yellow);
  color: var(--blue);
}
/* 【追記】div.contact-page form label span.required */
div.contact-page form label span.required {
  color: var(--pink);
  font-size: var(--fs-2);
  margin-left: 0.5em;
}

/* 【追記】div.contact-page form label span.optional */
div.contact-page form label span.optional {
  color: #888;
  font-size: var(--fs-2);
  margin-left: 0.5em;
}


div.contact-thanks {
  max-width: 800px;
  margin: 0em auto;
  padding: 2em;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-4);
}

/* 【追記】div.contact-thanks h2 */
div.contact-thanks h2 {
  margin-bottom: 1em;
  color: var(--blue);
}

/* 【追記】div.contact-thanks p */
div.contact-thanks p {
  margin-bottom: 2em;
  line-height: 1.8;
}

/* 【追記】div.contact-thanks div.back-home a */
div.contact-thanks div.back-home a {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
  border-radius: 5px;
  font-size: var(--fs-4);
  transition: background 0.3s ease;
}

/* 【追記】div.contact-thanks div.back-home a:hover */
div.contact-thanks div.back-home a:hover {
  background: var(--yellow);
  color: var(--blue);
}

/* 【追記】div.page-404 にスタイル追加 */
div.page-404 {
  max-width: 800px;
  margin: 0 auto;
  padding: 2em;
  background: #f9f9f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  font-family: "Zen Maru Gothic", sans-serif;
  font-size: var(--fs-4);
}

/* 【追記】div.page-404 h2 */
div.page-404 h2 {
  margin-bottom: 1em;
  color: var(--pink);
}

/* 【追記】div.page-404 p */
div.page-404 p {
  margin-bottom: 2em;
  line-height: 1.8;
}

/* 【追記】div.page-404 div.back-home a */
div.page-404 div.back-home a {
  display: inline-block;
  background: var(--blue);
  color: #fff;
  text-decoration: none;
  padding: 1em 2em;
  border-radius: 5px;
  font-size: var(--fs-4);
  transition: background 0.3s ease;
}

/* 【追記】div.page-404 div.back-home a:hover */
div.page-404 div.back-home a:hover {
  background: var(--yellow);
  color: var(--blue);
}
.wpcf7 form .wpcf7-response-output {
    margin: 0em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #00a0d2;
}
.wpcf7-not-valid-tip {
    color: #dc3232;
    font-size: 1em;
    font-weight: normal;
    display: block;
    text-align: left;
}
.wpcf7-spinner{display:none;}


div.top_instagram {
}
div.top_instagram dl {
}
div.top_instagram dl dt {
}
div.top_instagram dl dt i.fa-brands.fa-instagram {
}
div.top_instagram dl dt h3 {
}
div.top_instagram dl dt a {
}
div.top_instagram dl dd {width: 80%;padding: 0 0 0 5%;}

.blog_wrap.blog_detail .article p a{
  color: var(--pink);
  font-weight: bolder;
  text-decoration: underline;
}