@charset "UTF-8";

/* reset */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.6;  /* ベースの行間を自分で決める */
}

ul {
  padding-left: 0;
}

li {
  list-style: none;
}

img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}

a {
  display: block;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* *********************************************** */
/* common css                                     */
/* ********************************************* */

/* color */
:root {
  --color-main: #46c5e8; /* メインカラー */
  --color-sub: #cbee88; /* サブカラー */
  --color-accent-yl: #e3ca43; /* アクセント 黄色 */
  --color-accent-or: #d74322; /* アクセント オレンジ */
  --color-accent-gr: #1d9ba8; /*こっちがメインというけれど・・・多分違う*/
  --color-accent-gr2: #4db3d2; /*hamburger内のblogの背景*/
  --color-text-def: #14162f; /* テキスト */
  --color-text-heading: #3399cc; /*見出し*/
  --color-text-sub: #777989; /*キャプション*/
  --color-white: #fff;
  --color-bg: #e5e5e5; /* 背景色 */
  --color-border: #565555; /*ボーダー*/
  --color-border-gr: #4194a2; /*ボーダー 青緑*/
  --color-shadow: rgba(20, 22, 47, 0.2); /*シャドウ*/
  --color-overlay: rgba(0, 0, 0, 0.8); /*オーバーレイ*/
}

/* font */
:root {
  --font-main: "Noto Sans JP", sans-serif;
  --font-title: "Hina Mincho", serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-main);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.1em;
  color: var(--color-text-def);
  background-color: var(--color-white);
  background-size: cover;
  background-position: top center;
  background-attachment:fixed;
}

body.no-scroll {
  overflow: hidden;
}

@media screen and (min-width: 992px) {
  body.no-scroll {
  overflow: scroll;
}
}

h1, h2, h3, h4 {
  font-family: var(--font-title);
  font-weight: 400;
  font-style: normal;
}

p {
  font-size: clamp(0.875rem, 0.792rem + 0.42vw, 1.125rem); /*14-18/210-1280*/
  line-height: 1.8;
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  transition: all 0.3s ease;
}

a {
  color: var(--color-text-def);
}

a:hover {
  opacity: 0.8;
}

/* 明朝 */
.mincho {
  font-family: var(--font-title);
}

/* header セクション ****************************************** */
/* 言語選択 */
.lang-list-wrap {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-bottom: 0.5rem;
}
.current {
  border-bottom: 1px solid var(--color-text-def);
  font-weight: bold;
  margin-bottom: -1px !important ;
}

/* header */
.header {
  width: 100%;
  position: fixed;
  z-index: 99;
  top: 8px;
}

.header .header-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* PCナビゲーション */
.header-nav-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  margin-bottom: 0;
  /* padding: 16px; */
  height: 60px;
  padding: 0 1rem 0 1rem;
  border: 1px solid var(--color-text-def);
  background-color: rgba(255, 255, 255, .8);
  border-radius: 20px;
}

.header_logo {
  display: block;
  /*width: clamp(6.25rem, 2.841rem + 17.05vw, 15.625rem); */ /*100-250/320-1200*/
  margin-bottom: 0;
  height: clamp(4.375rem, 4.148rem + 1.14vw, 5rem); /*70-80/320-1200*/
}

.header_logo a {
  height: 100%;
}

.header_logo a img {
  height: 100%;
}

.header-nav-wrap li a {
  letter-spacing: 0.075em;
}

.header-nav_sub {
  position: relative;
  overflow: visible;
}

.sub_menu {
  display: none;
  position: absolute;
  top: 3.5rem;
  left: -1rem;
  width: fit-content;
  padding: 1rem 1rem .5rem 1rem;
  border-radius: 20px;
  border: 1px solid var(--color-text-def);
  background-color: rgba(255, 255, 255, .8);
  box-shadow: 1px 1px 10px var(--color-shadow);
  min-width: fit-content;
  white-space: nowrap; /* ← 折り返し禁止 */
}

.sub_menu dd {
  line-height: 1;
}

@media screen and (min-width: 1200px) {
  .header-nav-wrap {
    height: 70px;
    padding: 0 1rem 0 2rem;
  }
}


/* ハンバーガーメニュー */
.header_hamburger {
  height: 100%;
  display: flex;
  align-items: center;
}

.hamburger {
  position: relative;
  width: 30px;
  height: 28px;
  cursor: pointer;
}
.hamburger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-text-def);
  border-radius: 2px;
}
.hamburger, .hamburger span {
  display: inline-block;
  transition: all .5s;
  box-sizing: border-box;
}
.hamburger span:nth-of-type(1) {
  top: 0;
}
.hamburger span:nth-of-type(2) {
  top: 13px;
}
.hamburger span:nth-of-type(3) {
  bottom: 0;
}

/* hamburger内 nav */
#common_nav {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  /* top: 38px; */ /* sp時は全画面表示 */
  top: 0;
  right: 0;
  z-index: 100;
  width: 100%;
  height: auto;
  transition: all .5s;
  overflow: auto;
  -ms-overflow-style: none; /*edge*/
}
#common_nav::-webkit-scrollbar{ /*chrome*/
  display: none;
}
#common_nav::-webkit-scrollbar{ /*safari*/
  display: none;
}

.common_nav_wrap {
  align-items: center;
  overflow: auto;
  padding: 1.5rem 2rem;
  background-color: var(--color-text-def);
  border-radius: 10px;
  height: 100vh;
  -ms-overflow-style: none; /*edge*/
}
.common_nav_wrap::-webkit-scrollbar{ /*chrome*/
  display: none;
}
.common_nav_wrap::-webkit-scrollbar{ /*safari*/
  display: none;
}

#common_nav.active {
  visibility: visible;
  opacity: 1;
}

#common_nav .hamburger {
  display: block;
  width: 45px;
  height: 45px;
  position: absolute;
  right: 16px;
  top: 1.5rem;
}

#common_nav .hamburger span {
  background-color: var(--color-white);
  border-radius: 2px;
}

#common_nav .hamburger span:nth-of-type(1) {
  -webkit-transform: translateY(20px) rotate(45deg);
  transform: translateY(12px) rotate(45deg);
}
#common_nav .hamburger span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

#common_nav .nav_upper p {
  color: var(--color-text-sub);
  margin-bottom: clamp(1rem, 0.762rem + 1.19vw, 1.5rem); /*16-24/320-991*/
  line-height: 1.25;
}

#common_nav .nav_logo {
  margin-top: 2rem;
}

#common_nav .nav_logo a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  color: var(--color-white);
  font-size: 1.5rem;
  letter-spacing: .2em;
}

#common_nav .nav_logo a img {
  width: 120px;
}

.nav_sns {
  display: none; /*一旦非表示*/
  margin-bottom: 1rem;
  gap: 2rem;
}

.nav_sns li {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
}

.nav_middle {
  padding: 1rem 0;
  border-top: 1px dashed var(--color-white);
}

.nav_middle h4 {
  color: var(--color-white);
}

.nav_middle a {
  color: var(--color-white);
  display: inline-block;
}

.nav_sub {
  color: var(--color-text-sub);
  font-size: 1rem;
  font-family: var(--font-main);
}

.nav_bottom ul {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
}

.nav_contact_link, .news_link, .blog_link {
  color: var(--color-text-def);
  padding: 2rem 0;
  font-family: var(--font-title);
  font-size: 2rem;
  line-height: .7;
  border-radius: 25px;
  text-align: center;
}

.nav_bottom .nav_contact_link {
  width: 100%;
  background-image: url(../images/bg/contact_bg.jpg);
  background-size: cover;
  background-position: center;
}

.con_sub {
  font-size: 50%;
  font-family: var(--font-main);
}

.news_link {
  width: calc(50% - .5rem);
  background-color: var(--color-sub);
}

.blog_link {
  width: calc(50% - .5rem);
  background-color: var(--color-accent-gr2);
}

.nav_small {
  padding: 1rem 0;
  border-top: 1px dashed var(--color-white);
}

.nav_policy a {
  color: var(--color-white);
}
.nav_copy {
  color: var(--color-text-sub);
}

@media screen and (min-width: 992px) {
  #common_nav {
    width: 30%;
    min-width: 560px;
    max-width: 785px;
    right: .5rem;
    top: 38px;
  }
}

/* コンタクト セクション ****************************************** */
.contact {
  border-radius: clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem) clamp(3.125rem, 1.989rem + 5.68vw, 6.25rem) 0 0;
  padding-top: clamp(1.5rem, 0.682rem + 4.09vw, 3.75rem); /*24-60/320/1280*/
  padding-bottom: clamp(1.5rem, 0.682rem + 4.09vw, 3.75rem); /*24-60/320/1280*/
  color: var(--color-white);
  text-align: center;
  overflow: hidden;
  position: relative;
}

.contact:hover {
  opacity: 1;
}

.contact-bg {
  width: 100%;
  background-image: url(../images/bg/contact_bg.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100%;
  transition: transform .6s ease;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}


.contact:hover .contact-bg {
  transform: scale(1.1);
}


.contact h3 {
  color: var(--color-white);
  font-size: clamp(1.5rem, 0.75rem + 3.75vw, 3.75rem); /*24-60/320-1280*/
  margin-bottom: 1.5rem;
  text-align: center;
  line-height: 1.2;
}

.contact h3 .sub {
  color: var(--color-white);
}

.contact_text {
  font-size: clamp(0.875rem, 0.792rem + 0.42vw, 1.125rem); /*14-18/320-1280*/
  letter-spacing: 0.057em;
}

.contact_link_wrap {
  display: flex;
  justify-content: center;
  align-items: center;
}
.contact_link img {
  width: 52px;
}

@media screen and (min-width: 992px) {
  .contact {
    text-align: left;
    background-position: center;
  }

  .contact h3 {
    margin-bottom: 0;
  }


  .contact_text {
    margin-bottom: 0;
  }
}

/* footer セクション ****************************************** */
/* #footer {
  margin-top: -10px;
} */

.footer_inner {
  padding-top: 2rem;
  background-color: var(--color-text-def);
}

.footer_inner p {
  color: var(--color-text-sub);
  font-size: 14px;
  letter-spacing: 0.02em;
  max-width: 323px;
}

.footer_left {
  position: relative;
  border-bottom: 1px dashed var(--color-white);
  padding-left: 2rem;
}

.footer_logo a {
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 1rem;
  color: var(--color-white);
  font-size: 26px;
  letter-spacing: .2em;
}

.footer_logo a img {
  width: 120px;
}

.ft_sns {
  display: none; /*一旦非表示*/
  margin-bottom: 1rem;
  gap: 2rem;
}

.ft_sns li {
  width: 24px;
}

.footer_nav {
  position: relative;
  padding: 0;
  color: var(--color-white);
}

.footer_nav h4 {
  line-height: 1
}

.ft_sub {
  color: var(--color-text-sub);
  font-size: clamp(0.875rem, 0.83rem + 0.23vw, 1rem);/*14-16/320-1200*/
  font-family: var(--font-main);
}

.footer_nav ul {
  border-bottom: 1px dashed var(--color-white);
  margin-bottom: 0;
  padding-top: 1rem;
  padding-bottom: 1rem;
  padding-left: 2rem;
}

.footer_nav li a {
  color: var(--color-white);
  display: inline-block;
}

.footer_bottom {
  background-color: var(--color-text-def);
  padding-top: 16px;
  padding-bottom: 16px;
}

.footer_bottom small {
  color: var(--color-text-sub);
  text-align: center;
  display: block;
}

@media screen and (min-width: 992px) {
  .footer_inner {
    padding-top: 5rem;
    border-bottom: 1px dashed var(--color-white);
  }

  .footer_left {
    border-bottom: none;
  }

  .ft_sns {
    position: absolute;
    bottom: 0;
  }

  .footer_nav {
    padding: inherit;
  }

  .footer_nav ul {
    padding-left: 0;
    padding-top: 0;
    margin-bottom: 0;
    border-bottom: none;
  }

  .footer_nav ul.sp_line {
    padding-bottom: 0;
  }

  .ft_policy {
  margin-bottom: 1rem;
  position: absolute;
  bottom: 0;
}

  .footer_bottom small {
    text-align: right;
  }
}

/* 固定ページ 共通　****************************************** */

/* section {
  background: var(--color-white);
} */

/* ページタイトルセクション */
.common_pagetop {
  position: relative;
  overflow: hidden;
  height: clamp(21.875rem, 13.92rem + 39.77vw, 43.75rem); /*350-700/320-1200*/
  margin-bottom: 0;
  background: transparent;
}

.common_pagetop::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--color-shadow);
  background-blend-mode: overlay;
  z-index: 0;
}

/* パララックス */
.parallax-wrap {
  position: relative;
  overflow: hidden;
}

.parallax-img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120%;     /* ←少し大きめにしておく（ヌル動き用） */
  object-fit: cover;
  object-position: top;
  z-index: -1;
  will-change: transform;
  /* transform-origin: center top;
  transform: scaleY(1); */
}


.catch_wrap_top {
  position: absolute;
  top: 30%;
  z-index: 1;
}

.catch_wrap_top h2 {
  color: var(--color-white);
  font-size: clamp(2.25rem, 1.591rem + 3.3vw, 4.063rem);/*36-65/320-1200*/
  letter-spacing: .08em;
  text-align: right;
}

.catch_wrap_top h2 .catch_en {
  font-size: 75%;
}

.catch_wrap_top h2 .catch_sm {
  font-size: 50%;
}

.catch_wrap_top h2 .catch_md {
  font-size: 80%;
}


/* 白いお山 */
.parallax-content{
  will-change: transform;
  position: relative;
  margin-top: -20vw;   /* お山がヒーローに食い込む量 */
  height: 24vw;        /* 食い込み量より大きめに（隙間対策） */
  overflow: visible;
  background-image: url(../images/bg/main_head.svg);
  background-size: cover;
  background-repeat: no-repeat;
  /* transform: translateY(8px); */
}

/* ページタイトル */
#title {
  position: relative;
}

.title_wrap {
  margin-top: -10vw; /*お山の分上げる*/
  margin-bottom: clamp(2rem, 1.273rem + 3.64vw, 4rem); /*32-64/320-1200*/
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.title_wrap h1 {
  color: var(--color-text-heading);
  font-size: clamp(2.5rem, 1.773rem + 3.64vw, 4.5rem); /*48-72/320-1200*/
  line-height: 1.2;
  margin-bottom: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem) /*20-40/320-1200*/
}

.sub {
  color: var(--color-text-def);
  font-size: clamp(1rem, 0.682rem + 1.59vw, 1.875rem); /*16-30/320-1200*/
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-size: 40%;
  display: block;
}

/* セクション見出し */
h3.section-title {
  color: var(--color-text-heading);
  font-weight: 500;
  font-size: clamp(2rem, 1.636rem + 1.82vw, 3rem); /*32-48/320-1200*/
  line-height: 1.2;
  margin-bottom: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem); /*20-40/320-1200*/
}


@media screen and (min-width: 992px) {
  .title_wrap {
  margin-top: -15vw;
  }
}

/* 投稿（BLOG・NEWS） ページ **********************************************  */
.blog-item {
  margin-bottom: clamp(2rem, 1.273rem + 3.64vw, 4rem); /*32-64/320-1200*/
}

.blog-item_thumbnail {
  border-radius: clamp(1.25rem, 0.909rem + 1.7vw, 2.188rem);/*20-50/320-1200*/
  overflow: hidden;
  width: 100%;
  aspect-ratio: 4 / 3;
}

.blog-item_thumbnail img {
  transition: all 0.8s ease;
  object-fit: cover;
  height: 100%;
}

.blog-item_thumbnail img:hover {
  transform: scale(1.1);
  transition: all 0.8s ease;
}

.blog-item_category {
  display: inline-block;
  font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); /*12-14/320-1200*/
  padding: .025rem 1rem;
  background-color: var(--color-bg);
  border-radius: 5px;
  font-weight: bold;
}

.blog-item_category.cat_blog {
  background-color: var(--color-sub);
}
.blog-item_category.cat_news{
  background-color: var(--color-accent-yl);
}

.blog-item_date {
  display: inline-block;
  font-size: clamp(0.75rem, 0.705rem + 0.23vw, 0.875rem); /*12-14/320-1200*/
}

.blog-latest-title {
  font-family: var(--font-main);
  padding-bottom: 1rem;
  margin-bottom: clamp(1.25rem, 0.795rem + 2.27vw, 2.5rem); /*20-40/320-1200*/
  font-weight: bold;
  border-bottom: 1px solid var(--color-text-heading);
  text-align: center;

}

.blog-latest {
  padding: 2.5rem 2rem;
  background-color: var(--color-bg);
  border-radius: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem);/*20-50/320-1200*/
  margin-bottom: clamp(2rem, 1.273rem + 3.64vw, 4rem); /*32-64/320-1200*/
  height: fit-content;
}

.blog-latest-item .blog-item_thumbnail {
  width: 100%;
  margin-bottom: 1rem;
}


@media screen and (min-width: 992px) {
  #blog-list {
  padding-right: 2rem;
  }

  .blog-latest-title {
  text-align: left;
  }

  .blog-latest-item .blog-item_thumbnail {
  width: 80%;
  }
}

/* ブログ ページネーション */
.pagination_wrap {
  margin: 2rem  0 clamp(3rem, 2.636rem + 1.82vw, 4rem) 0; /*48-64/320-1200*/;
}

.pagination {
  display: flex;
  justify-content: space-between;
}

.pagination li {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-text-def);
  border-radius: 50px;
}

.pagination li a {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}

.pagination li.next {
  margin-left: auto;
}

.icon-arrow-prev {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 10px 8px 0;
  border-color: transparent var(--color-text-def) transparent transparent;
}

.icon-arrow-next {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 0 8px 10px;
  border-color: transparent transparent transparent var(--color-text-def);
}

/* ブログ記事 */
#blog-article article {
  margin-bottom: 2rem;
}

#blog-article .blog-item_title {
  margin-bottom: .5rem;
}

#blog-article .blog-item_category {
  margin-bottom: 1rem;
}

#blog-article .blog-item_thumbnail {
  margin-bottom: 1.5rem;
}

#blog-article .blog-item_thumbnail img:hover {
  transform: none;
}

/* #blog-article .blog-item_image {
  margin-bottom: 2rem;
  border-radius: 20px;
  overflow: hidden;
} */

/* 投稿記事内の写真をそのまま表示する用 */
#blog-article img {
  width: auto;
  max-width: 100%;
  height: auto;
}

#blog-article .blog-item_thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (min-width: 992px) {
  #blog-article {
  padding-right: 2rem;
  }
}


/*MESSAGEE ページ **********************************************  */
#message {
  position: relative;
}

.message_wrap {
  background-color: var(--color-bg);
  border-radius: 50px;
  position: relative;
  padding-top: 12rem;
  padding-bottom: 2rem;
  margin-top: -10rem;
  z-index: -1;
}

.msg_president_wrap {
  background: var(--color-white);
  background: radial-gradient(circle, rgba(255, 255, 255, 1) 0%, rgba(196, 196, 200, 1) 25%);
  border-radius: 50px;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  aspect-ratio: 2 / 3;
  width: 100%;
}

.msg_president_img {
  width: 95%;
  /* height: 100%; */
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  object-fit: contain;
}

.msg_president_name_wrap {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  padding: .5rem 2.5rem 1rem;
  background-color: rgba(255, 255, 255, .8);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.msg_president_name_wrap .mincho {
  margin-bottom: 4px;
  font-size: clamp(0.688rem, 0.619rem + 0.34vw, 0.875rem);
  line-height: 1;
}

.msg_intr {
  font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem); /*24-48/320-1200*/
  margin-bottom: 3rem;
}

/* 文字のアニメーション */
#message .change-ttl {
  font-size: 24px;
  font-weight: 500;
  opacity: 0.1;
}


@media screen and (min-width: 768px) {
  /* 全面写真var */
  .message_wrap {
  border-radius: 50px;
  padding-bottom: 4rem;
  margin-top: -8rem;
  }

  .msg_president_wrap {
    border-radius: 50px;
    text-align: left;
    padding: 1rem;
    text-align: left;
    aspect-ratio: 4 / 2;

  }

  .msg_president_img {
    width: 50%;
    height: 100%;
    left: 0;
    transform: translateY(0);
  }

  .msg_president_name_wrap {
    top: 50%;
    left: inherit;
    right: 10%;
    bottom: inherit;
    transform: translateY(-50%);
    width: 45%;
    padding: 1rem 2rem 1rem 5rem;
    border-radius: 0 25px 25px 0;
    background: none;
  }

}



/* COMPANY ページ **********************************************  */
/* 会社概要 */
#outline {
  margin-bottom: clamp(5rem, 3.182rem + 9.09vw, 10rem); /*80-160/320-1200*/
}

#outline h3 {
  position: sticky;
  top: 50%;
  will-change: transform, opacity;
}

#outline dl {
  border-bottom: 1px dashed var(--color-text-heading);
  margin-bottom: 0;
  padding: .5rem 1rem;
}

#outline dt {
  font-weight: 500;
}

#outline dl dd {
  margin-bottom: 0;
}

#outline dl dd .loca {
  padding: 1rem 0;
  border-bottom: 1px dashed var(--color-text-heading);
  width: 95%;
  margin: 0 0 0 auto;
}

#outline dl dd .loca:last-child {
  border-bottom: none;
}

@media screen and (min-width: 992px) {
  #outline dl {
  display: flex;
  gap: 16px;
  }

  #outline dl dt {
  width: 20%;
  }

  #outline dl dd {
    width: 80%;
  }

  #outline dl dd .loca {
  width: 100%;
  margin: inherit;
  }
}

/* 流れるスライド*/
.slide-wrap {
  overflow: hidden;
  margin-bottom: clamp(5rem, 3.182rem + 9.09vw, 10rem); /*80-160/320-1200*/
}

.slick-slide {
  text-align:center;
  margin: 0 8px;
}

.flows .flow_con {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--color-text-sub);
  border-radius: 5%;
  overflow: hidden;
}

/* slickの画像はここで設定 */
.flows div.slide01 {
  background-image: url(../images/company/slide/slide01.jpg);
}
.flows div.slide02 {
  background-image: url(../images/company/slide/slide02.jpg);
}
.flows div.slide03 {
  background-image: url(../images/company/slide/slide03.jpg);
}
.flows div.slide04 {
  background-image: url(../images/company/slide/slide04.jpg);
}
.flows div.slide05 {
  background-image: url(../images/company/slide/slide05.jpg);
}
.flows div.slide06 {
  background-image: url(../images/company/slide/slide06.jpg);
}


/* 横スクロール共通】 *******************************************/
.scroll_wrap {
  width: 100%;
  background: var(--color-bg);
  border-radius: 50px;
  padding: 3rem 1rem;
  overflow: auto;
  will-change: transform;
}

.scroll_contents {
  display: block;
  }

@media screen and (min-width: 768px) {
  .scroll_wrap {
    padding: 5rem 3rem;
  }
}

@media screen and (min-width: 992px) {
  .scroll_wrap {
      padding: 6rem 3rem;
  }

  .scroll_viewport{
    overflow: hidden;
    width: 100%;
  }

  .scroll_contents {
    display: flex;
    padding-top: 20px;
    gap: 0;
  }
}

/* 【横スクロール共通】インジケーター一式 */
.scroll_indicator {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  z-index: 5;
  pointer-events: none;
}

@media (max-width: 991.98px) {
  .scroll_indicator {
    display: none;
  }
}

.scroll_indicator__rail {
  position:relative;
  height: 2px;
  background-color: var(--color-text-sub);
  /* border-radius:999px; */
}

.scroll_indicator__thumb {
  position: absolute;
  top: -1px;
  left: 0;
  height: 4px;
  background:#14162f;
  width: 24px;  /* 初期表示用。JSで上書きされる */
  min-width: 24px;  /* 初期表示用。JSで上書きされる */
  will-change: transform, width;
}
/* 【横スクロール共通】end*******************************************/

/* 会社沿革 横スクロール */
  #history .scroll_wrap {
    padding-left: 0;
    padding-right: 0;
  }

  /* 右寄せ（偶数） */
  #history .scroll_item {
    width: 50%;
    position: relative;
    border-right: solid 1px var(--color-text-def);
    text-align: right;
  }

  #history .scroll_item::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: var(--color-accent-yl);
    position: absolute;
    top: 0;
    right: -10px;
  }

 /* 右寄せ（奇数） */
  #history .scroll_item:nth-child(odd) {
    margin-left: 50%;
    border-right: none;
    border-left: solid 1px var(--color-text-def);
    text-align: left;
  }

  #history .scroll_item:nth-child(odd)::before {
    left: -10px;
  }

  .his_card {
    padding: 0 1rem 1rem 1rem;
  }

  .his_year {
    color: var(--cloro-text-def);
    font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem); /*24-36/320-1200*/
    line-height: .8;
  }
  .his_year .his_manth {
    font-size: clamp(0.875rem, 0.784rem + 0.45vw, 1.125rem); /*14-18/320-1200*/
    font-family: var(--font-main);
  }

  .his_text {
    line-height: 1.3;
    margin-bottom: .5rem;
  }

  .his_img {
    height: auto;
    aspect-ratio: 3 / 2;
    border: 2px solid var(--color-text-sub);
    border-radius: 5%;
    overflow: hidden;
  }

  .his_img img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    transition: all 0.5s ease;
  }


@media screen and (min-width: 768px) {
  .his_card {
    padding: 0 2rem 1rem 2rem;
  }
}

@media screen and (min-width: 992px) {
  #history .scroll_wrap {
    padding-left: 3rem;
    padding-right: 3rem;
  }

  #history .scroll_item {
    width: 420px;
    position: relative;
    border-top: solid 1px var(--color-text-def);
    border-right: none;
    flex: 0 0 420px;
    text-align: left;
  }

  #history .scroll_item::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: var(--color-accent-yl);
    position: absolute;
    top: -10px;
    left: 0;
  }

  .his_text {
    height: 100px;
  }

   /* 右寄せ（奇数） */
  #history .scroll_item:nth-child(odd) {
    margin-left: inherit;
    border-right: none;
    border-left: none;
  }

  #history .scroll_item:nth-child(odd)::before {
  left: 0;
}

  .his_card {
    padding: 1.5rem 5rem 1.5rem 0;
  }
}

/*fiber ページ **********************************************  */
/* 繊維のおはなし 横スクロール */
#fiber .scroll_item {
  position: relative;
  border-left: solid 1px var(--color-text-def);
}

#fiber .scroll_item::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: var(--color-accent-yl);
  position: absolute;
  top: 0;
  left: -10px;
}

.fiber_card {
  padding: 0 1rem 3rem 1rem;
}

.fiber_title {
  color: var(--cloro-text-def);
  font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem); /*24-36/320-1200*/
  margin-bottom: 1rem;
}

.fiber_img  {
  width: 55%;
  height: auto;
  aspect-ratio: 3 / 2;
  /* border: 2px solid var(--color-text-sub); */
  border-radius: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem); /*20-50-320-1200*/
  overflow: hidden;
}

.fiber_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.fiber_subtitle {
  font-size: clamp(1rem, 0.909rem + 0.45vw, 1.25rem); /*16-20/320-1200*/
  margin-bottom: 1.5rem;
}

.fiber_text {
  line-height: 1.3;
}


@media screen and (min-width: 768px) {
  .fiber_card {
    padding: 0 2rem 5rem 2rem;
  }
}

@media screen and (min-width: 992px) {
  #fiber .scroll_wrap {
    padding: 3rem 3rem 5rem 3rem;
  }

  #fiber .scroll_item {
    width: 600px;
    position: relative;
    border-top: solid 1px var(--color-text-def);
    border-left: none;
    flex: 0 0 600px;
    text-align: left;
  }

  #fiber .scroll_item::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: var(--color-accent-yl);
    position: absolute;
    top: -10px;
    left: 0;
  }

  .fiber_card {
    padding: 1.5rem 8rem 1.5rem 0;
  }
  .fiber_img  {
  width: 60%;
  }

  .en_fiber .fiber_img {
    width: 50%;
    border-radius: 30px;
  }
}

/* business ページ **********************************************  */
/* business 横スクロール */
#dpartment .scroll_item {
  position: relative;
  border-left: solid 1px var(--color-text-def);
}

#dpartment .scroll_item::before {
  content: '';
  width: 20px;
  height: 20px;
  border-radius: 50px;
  background-color: var(--color-accent-yl);
  position: absolute;
  top: 0;
  left: -10px;
}

.dpartment_card {
  padding: 0 1rem 3rem 1rem;
}

.dpartment_title {
  color: var(--cloro-text-def);
  font-size: clamp(1.5rem, 1.227rem + 1.36vw, 2.25rem); /*24-36/320-1200*/
  margin-bottom: 1rem;
}

.dpartment_text {
  height: 120px;
}

.dpartment_img  {
  width: 80%;
  height: auto;
  aspect-ratio: 3 / 2;
  border: 2px solid var(--color-text-sub);
  border-radius: 5%;
  overflow: hidden;
}

.dpartment_img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}


/* 英語ページ */
.en-content .dpartment_card {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.en-content .dpartment_title {
  line-height: .9;
  font-size: clamp(1.125rem, 0.989rem + 0.68vw, 1.5rem); /*18-24/320-1200*/
}

.en-content .dpartment_text {
  line-height: 1;
  height: auto;
}


@media screen and (min-width: 768px) {
  .dpartment_card {
    padding: 0 2rem 2rem 2rem;
  }
}

@media screen and (min-width: 992px) {
  #dpartment .scroll_item {
    width: 430px;
    position: relative;
    border-top: solid 1px var(--color-text-def);
    border-left: none;
    flex: 0 0 430px;
    text-align: left;
  }

  #dpartment .scroll_item::before {
    content: '';
    width: 20px;
    height: 20px;
    border-radius: 50px;
    background-color: var(--color-accent-yl);
    position: absolute;
    top: -10px;
    left: 0;
  }

  .dpartment_card {
    padding: 1.5rem 5rem 1.5rem 0;
  }
}

#mission {
  padding: 5rem 0;
}

#mission p {
  font-size: clamp(0.875rem, 0.648rem + 1.14vw, 1.5rem); /*14-24/320-1200*/
  font-weight: 400;
  text-align: center;
  line-height: clamp(1.875rem, 1.193rem + 3.41vw, 3.75rem); /*30-60/320-1200*/
}


#service .section-title-wrap {
  padding: 1rem 0 4rem 0;
}

#service .service_point {
  padding: 2rem 1rem;
  border-radius: 20px;
  margin-bottom: 2.25rem;
  position: relative;
}

.service_point h4 {
  color: var(--color-accent-yl);
  font-size: 40px;
  position: absolute;
  top: -40px;
  left: 0;
  line-height: .9;
  width: 100%;
  padding: 0 1rem;
}

.service_point h4 span {
  font-size: 60px;
}

.service_point h5 {
  font-family: var(--font-title);
  font-size: clamp(1.125rem, 0.898rem + 1.14vw, 1.75rem); /*18-28/320-1200*/
  /* font-weight: bold; */
}

.service_point p {
  margin-bottom: 0;
  font-weight: 300;
}

.service_point.bg-green {
  background-color: var(--color-sub);
}

.service_point.bg-blue {
  background-color: var(--color-main);
}

.service_link {
  padding: .5rem .5rem;
  border-radius: 3px;
  background-color: var(--color-text-def);
  font-size: 14px;
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 50%;
  transition: all .5s ease;
}

.service_link span {
  background-color: var(--color-white);
  font-size: 8px;
  padding-left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.service_link span::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 3.5px;
  border-color: transparent transparent transparent var(--color-text-def);
  position: absolute;
  top: 0;
  left: 6px;
  bottom: 0;
  margin: auto;
}

.service_link:hover {
  background-color: var(--color-white);
  color: var(--color-text-def);
  opacity: 1;
  transition: all .5s ease;
}

.service_link:hover span {
  background-color: var(--color-text-def);
}

.service_link:hover span::before  {
  border-color: transparent transparent transparent var(--color-white);
}

@media screen and (min-width: 992px) {
  #service .service_point.bg-green {
  position: relative;
  padding: 4rem 1rem 2rem 1rem;
  height: calc(100% - 2.25rem);
  }

  #service .service_point.bg-1 > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 4rem 1rem 2rem 1rem;
  }

  .service_point.bg-1 h4 {
    text-align: right;
    top: -20px;
  }

  .service_point.bg-2 h4 {
    top: -50px;
    left: inherit;
    text-align: right;
    position: relative;
    width: fit-content;
  }

  #service .service_point.bg-2 {
    display: flex;
    position: relative;
    padding: 2rem 1rem 2rem 1rem;
  }

  #service .service_point.bg-2 > div {
    padding: 0 1rem;
  }

  #service .service_point.bg-2 .service_link {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30%;
  }
}

#onayami {
  position: relative;
  padding-bottom: 8rem;
  overflow-x: clip;
}

#lineIconsWrap {
  position: absolute;
  top: 30rem;
  left: -4rem;
  width: 124%;
  z-index: -1;
}

.onayami_top_img {
  width: 593px;
  max-width: 90%;
  margin: 2rem auto 0 auto;
}

#onayami h5, #onayami p {
  font-family: var(--font-title);
}

.onayami_text-head {
  text-align: center;
  padding: 2rem 0;
}

.onayami_text-head h4 {
  font-size: clamp(1.5rem, 1.136rem + 1.82vw, 2.5rem); /*24-40/320-1200*/
  margin-bottom: 1rem;
  /* font-weight: bold; */
}

.onayami_text-head p {
  font-size: clamp(0.75rem, 0.341rem + 2.05vw, 1.875rem); /*12-30/320-1200*/
  /* font-weight: bold; */
  letter-spacing: 0.05em;
}

.onayami_text-bottom h4 {
  font-size: clamp(1.375rem, 1.193rem + 0.91vw, 1.875rem); /*22-40/320-1200*/
  text-align: center;
  margin-bottom: 1rem;
  font-weight: bold;
}

.onayami_text-bottom {
  background-color: rgba(255,255,255,0.8);
}

.onayami_text-bottom p {
  text-align: right;
  margin-bottom: 1rem;
  font-size: clamp(0.875rem, 0.511rem + 1.82vw, 1.875rem); /*14-30/320-1200*/
  padding-bottom: 1rem;
}

@media screen and (min-width: 768px) {
  #lineIconsWrap {
    top: 42rem;
    left: -2rem;
    width: 105%;
  }
}

@media screen and (min-width: 992px) {
  #onayami {
    padding-bottom: 24rem;
  }

  .onayami_top_img {
    width: 48%;
    margin: 2rem auto 0 4rem;
  }

  .onayami_text-head {
    text-align: right;
    padding: 2rem 0;
  }

  .onayami_text-bottom {
    margin-top: 3rem;
    background-color: transparent;
  }

  .onayami_text-bottom h4 {
    text-align: right;
  }

  #lineIconsWrap {
    top: 21rem;
    left: -16rem;
    width: 130%;
  }
}

/* アイコンなしライン */
#qA  {
  position: relative;
  overflow-x: clip;
  padding-bottom: 5rem;
}

#lineNoIconsQaWrap {
  position: absolute;
  top: 10rem;
  left: -19rem;
  z-index: -1;
  width: 290%;
}

#qA .qa_img {
  border-radius: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem); /*20-50/320-1200*/
  overflow: hidden;
  margin-top: 1rem;;
}

#qA .qa_content {
  border-radius: clamp(1.25rem, 0.568rem + 3.41vw, 3.125rem); /*20-50/320-1200*/
  border: 1px solid var(--color-sub);
  padding: clamp(1rem, 0.636rem + 1.82vw, 2rem); /*16-32/320-1200*/
  background-color: var(--color-white);
}

#qA .qa_content h4 {
  font-size: clamp(2rem, 1.364rem + 3.18vw, 3.75rem);
  color: var(--color-sub);
}

#qA .qa_content h5 {
  font-family: var(--font-title);
  font-weight: bold;
  letter-spacing: .025em;
}

#qA .qa_content p {
  font-weight: 300;
  letter-spacing: 0.05em;
}

@media screen and (min-width: 768px) {
  #qA  {
    padding-top: 10rem;
  }

  #lineNoIconsQaWrap {
    top: 24rem;
    left: -12rem;
    z-index: -1;
    width: 200%;
  }
}

@media screen and (min-width: 992px) {
  #qA  {
    padding-top: 5rem;
  }

  .mt--5 {
    margin-top: -5rem;;
  }

  .mt--10 {
    margin-top: -10rem;;
  }

  .mt-10 {
    margin-top: 10rem;
  }

  .ml--8 {
    margin-left: -8rem;;
  }

  #lineNoIconsQaWrap {
    top: 24rem;
    left: -10rem;
    width: 130%;
  }
}

@media screen and (min-width: 1400px) {
  #qA  {
    padding-top: 15rem;
  }

  #lineNoIconsQaWrap {
    top: 30rem;
    left: -1rem;
    width: 105%;
  }
}

/* CONTACT ページ **********************************************  */
#contact {
  padding-bottom: 5rem;
}

.ast {
  font-weight: bold;
  color: red;
}

.contact_tel_wrap  {
  padding: 2rem 1rem;
  border: 2px solid var(--color-sub);
  border-radius: 20px;
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.contact_tel_wrap a {
  font-size: clamp(2.25rem, 1.893rem + 1.79vw, 3rem); /*36-48/320-992*/
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.5rem;
  width: 100%;
}

.contact_tel_wrap a .tel_head {
  font-size: 24px;
  margin-right: 1rem;
}

.contact_tel_wrap a .tel_time {
  font-size: 18px;
}

@media screen and (min-width: 992px) {
  .contact_tel_wrap  a {
    font-size: clamp(2.25rem, 0.426rem + 2.94vw, 3rem); /*36-48/992-1400*/
    width: fit-content;
  }
}

/* お問い合わせ入力エリア */
#contact .must {
  font-weight: bold;
  color: red;
}

#contact .entry_area  dl, #contact #confirm_area dl{
  padding: 1rem;
  border-bottom: 1px dashed var(--color-accent-gr);
  margin: 0;
}

#contact .entry_area dd, #contact #confirm_area dd {
  margin: 0;
}

#contact .entry_area dt {
  margin-bottom: .25rem;
}

.wpcf7-list-item.first {
  margin-left: 0 !important;
}

.wpcf7-text, .wpcf7-textarea {
  border: none;
  background-color: var(--color-bg);
  border-radius: 8px;
  padding: .5rem;
  width: 100%;
}

.wpcf7-text.zipcode {
  width: 200px;
  margin-bottom: .5rem;
}

.wpcf7-list-item-label {
  letter-spacing: 0.02em;
}

.to_privacy_policy {
  text-align: center;
  color: red;
  text-decoration:underline;
}

#confirm_area h3 {
  color: var(--color-accent-gr);
}

/* 確認するボタン */
.confirm_button, .back_button, .send_button {
  border-radius: 8px;
  padding: .5rem 2rem;
}

/* 送信ボタン */
.send_button {
  background-color: var(--color-text-def);
  color: var(--color-white);
}

.button-wrap {
  display: flex;
  justify-content: space-between;
  margin-top: 3rem;
}

/* 送信完了画面 */
.thanks_head {
  color: var(--color-accent-gr);
}

/* リキャプチャバッジ非表示 */
.grecaptcha-badge { visibility: hidden; }

.recaptcha {
  opacity: 0.7;
}

.recaptcha p {
  font-size: 80%;
  line-height: 1.2;
}

.recaptcha a {
  display: inline-block;
}


/* common コンテンツ内 キャッチフレーズ ******************************　**/
#catch {
  position: relative;
  padding: clamp(6.25rem, 4.886rem + 6.82vw, 10rem) 0; /*100-160/320-991*/
  overflow: hidden;
}

#heroLines {
  position: absolute;
  inset: 0;
  width: 50%;
  height: 160%;
  z-index: 0;
  pointer-events: none;
}

/* キャッチフレーズ（中央揃え） */
.catch_wrap_center h2 {
  font-size: clamp(2.5rem, 1.667rem + 4.17vw, 5rem);/*40-60/320-1280*/
  letter-spacing: .08em;
  text-align: center;
  margin-bottom: 0;
  position: relative;
  z-index: 1;
}

.catch_wrap_center h2 .catch_en {
  font-size: 75%;
}

.catch_wrap_center h2 .catch_sm {
  font-size: 50%;
}

.catch_wrap_center h2 .catch_md {
  font-size: 80%;
}

@media screen and (min-width: 992px) {
  #catch {
  padding: 12rem 0;
  }

  #heroLines {
  position: absolute;
  inset: 0;
  width: 40%;
  /* height: 120%; */
  z-index: 0;
  pointer-events: none;
}
}

@media screen and (min-width: 1400px) {
  #heroLines {
  position: absolute;
  inset: 0;
  width: 30%;
  height: 200%;
  z-index: 0;
  pointer-events: none;
  }
}

/* カスタム投稿（colorbook） ページ **********************************************  */
#colorBookTabs {
  padding-top: 120px;
}

/* タブ */
.colorbook_tab {
  background-color: var(--color-text-def);
  border-radius: 10px 10px 0 0;
}
.colorbook_tab a {
  color: var(--color-white);
  padding: .5rem clamp(1rem, 0.818rem + 0.91vw, 1.5rem); /*16-24/320-1200*/
}

.colorbook_tab.active {
  background-color: var(--color-main);
  color: var(--color-white);
}

/* タブコンテンツ */
.gradient_bg_top {
  padding-top: 5rem;
  background: #46C5E8;
  background: linear-gradient(180deg,rgba(70, 197, 232, 1) 0%, rgba(255, 255, 255, 1) 100%);
}
.gradient_bg_bottom {
  padding-bottom: 5rem;
  background: #46C5E8;
  background: linear-gradient(0deg,rgba(70, 197, 232, 1) 0%, rgba(255, 255, 255, 1) 100%);
}

.colorbook_contents_wrap {
  height: fit-content;
  padding: 3rem 0;
}

.colorbook_content {
  display: none;
}
.colorbook_content.show {
  display: block;
}

/* カタログコンテント */
.colorbook_item {
  padding: clamp(0.25rem, -0.023rem + 1.36vw, 1rem); /*4-16/320-1200*/
}

.img_wrap {
  display: flex;
  align-items:end;
  gap: 1rem;
}

.colorbook_img {
  width: 50%;
  aspect-ratio: 1 / 1.414; /*A4の比率で*/
  margin-bottom: 0;
  cursor: pointer;
}

.colorbook_img img {
  height: 100%;
  width: 100%;
  object-fit: cover;
}

.pdf_warp {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
}

.pdf_icon {
  width: 30%;
  margin-bottom: .5rem;
}

.pdf_size {
  font-size: 10px;
  margin-bottom: .5rem;
}

/* PDFダウンロードボタン */
.pdf_link {
  padding: .25rem .5rem;
  border-radius: 3px;
  background-color: var(--color-accent-or);
  font-size: 10px;
  color: var(--color-white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.pdf_link span {
  background-color: var(--color-white);
  font-size: 8px;
  padding-left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pdf_link span::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 3px 0 3px 6px;
  border-color: transparent transparent transparent var(--color-text-def);
  position: absolute;
  top: 0;
  left: 4px;
  bottom: 0;
  margin: auto;
}

.pdf_link:hover {
  background-color: var(--color-text-def);
  /* color: var(--color-accent-or); */
  opacity: 1;
}

.colorbook_title {
  padding: .5rem;
  border-left: 5px solid var(--color-text-def);
  margin-top: .5rem;
  word-wrap: break-word;
}


@media screen and (max-width: 576px) {
  .img_wrap {
    flex-wrap: wrap;
  }

  .colorbook_img {
  width: 100%;
  }

  .pdf_warp {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  }
}

/* モーダル */
.catalog-modal-overlay {
  display: flex;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--color-overlay);
  justify-content: center;
  align-items: center;
  z-index: 9999;
}


.catalog-modal-overlay.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.catalog-modal-content {
  /* background-color: var(--color-overlay); */
  padding: 1rem 1.5rem;
  max-width: 800px;
  width: min(90vw, 800px);
  height: auto;
  max-height: 95vh;
  box-sizing: border-box;
  position: relative;
  /* overflow-y: auto; */
}

.catalog-modal-close {
  position: absolute;
  top: 10px;
  right: 0;
  font-size: 48px;
  font-size: clamp(2.5rem, 2.128rem + 1.86vw, 3rem);
  color: var(--color-bg);
  background: none;
  border: none;
  cursor: pointer;
}

/* モーダル内カタログタイトル */
.catalog-modal-title {
  margin-bottom: 2rem;
  color: var(--color-white);
  border-left: 5px solid var(--color-bg);
}

/* スライド全体 */
.catalog-slide {
  margin-top: 0.5rem;
}

/* slick 内のスライドを中央寄せ */
.catalog-slide_main .slick-slide {
  display: flex !important;
  justify-content: center;
  align-items: center;
}

/* メイン画像：縦優先で必ず全部見えるようにする */
.catalog-slide_main .slick-slide img {
  display: block;
  max-height: calc(90vh - 260px); /* 画面高さから、モーダルのpadding・タイトル・サムネ分をざっくり引いた値 */
  aspect-ratio: 1 / 1.414; /*A4の比率*/
  height: auto;                   /* 比率を維持して縮小 */
  width: auto;                    /* 横は縦に合わせて自動決定（100%固定にしない） */
  max-width: 100%;                /* モーダルから横にはみ出さない */
}

/* 矢印 */
.slick-prev, .slick-next {
  width: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem); /*30-50/320-1200*/
  height: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem); /*30-50/320-1200*/
  top: 50%;
}

.slick-next {
  right : -30px;
}

.slick-prev {
  left : -30px;
}

.slick-prev:before, .slick-next:before {
  font-size: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem); /*30-50/320-1200*/
}

/* サムネイルスライド */
.catalog-slide_thumb {
  display: flex;
  flex-wrap: wrap;          /* 枚数が多いときは折り返し */
  justify-content: center;  /* 全体を中央寄せ */
  gap: .25rem;
  margin: clamp(0.5rem, -0.045rem + 2.73vw, 2rem) auto 0; /*8-32/320-1200*/
}

/* 各サムネ（スライダーは辞めて、ドットのように機能する） */
.catalog-thumb-item {
  width: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem); /*30-50/320-1200*/;
  height: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem); /*30-50/320-1200*/
  overflow: hidden;
  cursor: pointer;
  opacity: 0.7;
  border: 2px solid transparent;
  box-sizing: border-box;
}

/* サムネ画像 */
.catalog-thumb-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* アクティブなサムネ（どのページか分かるように） */
.catalog-thumb-item.is-active {
  opacity: 1;
  border-color: var(--color-white);       /* お好みで brand color に */
}

/*****************************************************/
/* フロント */
/*****************************************************/
#frontContentsWrap {
  overflow-x: clip;
  position: relative;
}

/* フロント ヒーローセクション */
#FrontHeroLine {
  position: absolute;
  top: -1rem;
  left: -8rem;
  z-index: 1;
  width: 210%;
  opacity: 0;
}

#frontHero {
  height: 90vh;
  position: relative;
  overflow-x: clip;
}

#frontHero .catch_wrap_top {
  position: absolute;
  top: 50%;
  left: 0;
}

#frontHero .catch_wrap_top h2 {
  color: var(--cloro-text-def);
  font-size: clamp(3rem, 1.909rem + 5.45vw, 6rem); /*48-96/320-1200*/
}

@media screen and (min-width: 768px) {
  #FrontHeroLine {
    left: -5rem;
    width: 120%;
  }
}

@media screen and (min-width: 992px) {
  #FrontHeroLine {
    left: 0;
    width: 94%;
  }

  #frontHero {
    height: 100vh;
  }

  #frontHero .catch_wrap_top {
    top: 30%;
    left: 0;
  }
}

/* スクロールダウンの位置 */
.scroll {
  position: absolute;
  right: 2.5rem;
  bottom: 12%;
  color: var(--color-text-heading);
  writing-mode: vertical-rl;
  z-index: 3;
}

.scroll span {
  text-shadow: 1px 1px 2px var(--color-white);
}

/* 線のアニメーション部分 */
.scroll::before {
  animation: scroll 2s infinite;
  background-color: var(--color-text-heading);
  bottom: -115px;
  content: "";
  height: 100px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 1px;
  filter: drop-shadow(0 0 0.75rem var(--color-white));
}
/* 線のアニメーション */
@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }
  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }
  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }
  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}


/* フロント セクションタイトル */
.front_section {
  position: relative;
  z-index: 10;
  max-width: 1800px;
  margin: 0 auto;
}


.front_section .section-title-wrap {
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

.front_section .section-title-wrap > .section-title {
  font-size: clamp(3rem, 2.273rem + 3.64vw, 5rem); /*48-80/320-1200*/
  color: var(--cloro-text-def);
  letter-spacing: 0em;
  margin-bottom: 0;
}

/* フロント セクション導入文 */
.section-text {
    padding: 0 0 2rem 0;
  }

.section-text h5 {
  margin-bottom: 2rem;
  text-align: center;
}

@media screen and (min-width: 992px) {
  .section-text {
    padding: 2rem 0;
  }
  .section-text h5 {
    margin-bottom: inherit;
    text-align: left;
  }
}


/* フロント リンクボタン */
.front_section .service_link {
  width: 200px;
  min-width: 124px;
  max-width: 300px;
}


/* フロント COMPANYセクション */
#frontCompany {
  padding: clamp(1rem, -0.091rem + 5.45vw, 4rem); /*16-64/320-1200*/
  padding-bottom: 4rem;
  background: var(--color-sub);
  position: relative;
  margin-bottom: 3rem;
  border-radius: 50px;
}

.front_company_item_wrap  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.front_company_item_wrap .front_company_item {
    border-radius: clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem); /*25-50/320-1200*/
    background-color: var(--color-white);
    transition: all .5s ease-in;
    border: none;
    width: 100%;
    gap: 1rem;
    overflow: hidden;
  }

  .front_company_item a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .3s ease-in;
    display: flex;
    /* flex-wrap: nowrap; */
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
  }

.front_company_item .front_cam_item_img {
    border-radius: clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem); /*25-50/320-1200*/
    overflow: hidden;
    width: 50%;
    transition: all .3s ease-in;
    margin-bottom: 0;
    aspect-ratio: 1 / .8;
}

.front_company_item .front_cam_item_img img {
  height: 100%;
  object-fit: cover;
}

  .front_cam_item_text {
    text-align: center;
    width: 50%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }

.front_cam_item_text h4 {
  color: var(--color-accent-gr);
  font-size: clamp(1.5rem, 0.955rem + 2.73vw, 3rem); /*24-48/320-1200*/
  line-height: 1;
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.front_cam_item_text p {
  transition: all .5s ease-in;
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.front_company_item .front_cam_item_img img {
  transition: all .3s ease;
}

.front_company_item a:hover {
  opacity: 1;
  transition: all .3s ease-in;
}

.front_company_item:hover {
  background-color: var(--color-text-def);
  transition: all .3s ease;
}

.front_company_item:hover .front_cam_item_text p {
  color: var(--color-white);
  transition: all .3s ease-in;
}

.front_company_item:hover .front_cam_item_img img {
  transform: scale(1.1);
  transition: all .3s ease-in;
}

@media screen and (min-width: 992px) {
  .front_section .section-title-wrap {
    top: -3rem;
  }
  .front_company_item_wrap .front_company_item {
    width: 28%;

  }

  .front_company_item a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .front_company_item .front_cam_item_img {
    width: 100%;

  }

  .front_cam_item_text {
    width: 100%;
    padding: 2rem 0;
  }
}

/* フロントメッセージ セクション */
#frontMessage {
  padding: clamp(1rem, -0.091rem + 5.45vw, 4rem);
  margin-bottom: 3rem;
  position: relative;
}

.front_msessage_head {
  font-size: clamp(1.75rem, 1.295rem + 2.27vw, 3rem); /*28-48/320-1200*/
  margin-bottom: 3rem;
}

#frontMessage .front_msessage_text {
  margin-bottom: 3rem;
}

#FrontMessageLineWrap {
  position: absolute;
  top: 45%;
  left: -1rem;
  width: 40%;
  z-index: -1;
  height: 80vh;
}

#FrontMessageLineWrap svg {
  height: 100%;
}

#frontMessage iframe {
  margin: 0 auto 3rem auto;
  display: block;
  max-width: 100%;
  aspect-ratio: 3 / 2;
}

@media screen and (min-width: 768px) {
  #FrontMessageLineWrap {
    top: 35%;
    height: 75vh;
  }
}

@media screen and (min-width: 992px) {
  #FrontMessageLineWrap {
    top: 25%;
    left: -1rem;
    width: 40%;
    height: 130vh;
  }


    #frontMessage  .front_msessage_text {
    text-align: center;
  }
}

/* フロントビジネス セクション */
#frontBusiness{
  padding: clamp(1rem, -0.091rem + 5.45vw, 4rem);
  padding-bottom: 4rem;
  margin-bottom: 3rem;
  background-color: rgba(229,229,229, .8);
  border-radius: 50px;
}

#frontBusiness.opaque {
  background-color: rgba(229,229,229, 1);
  margin-bottom: 0;
}


.front_business_item_wrap  {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.front_business_item_wrap .front_business_item {
    transition: all .5s ease-in;
    border: none;
    width: 100%;
    gap: 1rem;
  }

  .front_business_item a {
    display: block;
    width: 100%;
    height: 100%;
    transition: all .5s ease-in;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }

.front_business_item .front_bus_item_img {
    border-radius: clamp(1.563rem, 0.994rem + 2.84vw, 3.125rem); /*25-50/320-1200*/
    overflow: hidden;
    width: 100%;
    transition: all .3s ease-in;
    aspect-ratio: 1 / .8;
}

.front_business_item .front_bus_item_img img {
  height: 100%;
  object-fit: cover;
  transition: all .3s ease-in;
}

  .front_bus_item_text {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    text-align: left;
    justify-content: start;
  }

.front_bus_item_text h4 {
  color: var(--color-accent-gr);
  font-size: clamp(1.5rem, 1.318rem + 0.91vw, 2rem); /*24-48/320-1200*/
  line-height: 1;
  letter-spacing: 0;
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.front_bus_item_text p {
  transition: all .5s ease-in;
  display: block;
  width: 100%;
  margin-bottom: 0;
}

.front_bus_item_text object {
  width: 200px;
  min-width: 124px;
  max-width: 300px;
}

.front_bus_item_text object a {
  margin-top: .5rem;
  transition: all .3s ease-in;
}

.front_business_item a:hover {
  opacity: 1;
}

.front_business_item:hover .front_bus_item_img img {
  transform: scale(1.1);
  transition: all .3s ease-in;
}

.front_bus_item_text object a:hover {
  background-color: var(--color-white);
  color: var(--color-text-def);
}

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

  .front_business_item_wrap .front_business_item {
    width: 28%;
  }


  .front_bus_item_text {
    width: 100%;
    /* padding: 2rem 0; */
    text-align: center;
    justify-content: center;
  }
}

/* フロント News セクション */
#frontNewsWrap {
  padding: 10rem 0 13rem 0;
  position: relative;
}

#FrontNewsLineWrap01 {
  position: absolute;
  top: 5%;
  left: 0;
  width: 120%;
  z-index: -1;
}

#FrontNewsLineWrap02 {
  position: absolute;
  bottom: 15%;
  left: 0;
  width: 125%;
  z-index: -1;
}

#frontNews {
  background:rgba(227,202,67,0.7);
  border-radius: 50px;
  width: 100%;
  position: relative;
  padding: clamp(1rem, -0.091rem + 5.45vw, 4rem);
  padding-bottom: 4rem;
  min-height: 450px;
}

#frontNews .section-title {
  font-size: clamp(1.5rem, 2.273rem + 3.64vw, 3rem);
  color: var(--cloro-text-def);
  letter-spacing: 0em;
  margin-bottom: 0;
  text-align: center;
  position: absolute;
  top: -2rem;
  left: 50%;
  transform: translateX(-50%);
}

#frontNewsList .blog-item {
  display: flex;
  align-items: start;
  gap: 1rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px dashed var(--color-main);
  margin-bottom: 1rem;
}
#frontNewsList .blog-item dd {
  margin-bottom: 0;
}

#frontNewsList .blog-item dt {
  font-weight: 400;
}

@media screen and (min-width: 768px) {
  #FrontNewsLineWrap01 {
    top: -5%;
    left: 0;
    width: 120%;
    z-index: -1;
  }

  #FrontNewsLineWrap02 {
    bottom: 5%;
    left: 0;
    width: 120%;
    z-index: -1;
  }
}

@media screen and (min-width: 992px) {
  #frontNews {
  width: 50%;
  border-radius: 0 50px 50px 0;
  min-height: 550px;
  }

  #frontNewsWrap {
    padding: 12rem 0  15rem 0;
  }
}

@media screen and (min-width: 1400px) {
  #FrontNewsLineWrap01 {
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
}

  #FrontNewsLineWrap02 {
    bottom: 0;
    width: 100%;
    z-index: -1;
  }
}

@media screen and (min-width: 1800px) {
  #frontNews {
  border-radius: 50px;
  }
}

#NewsSide {
  width: 50%;
}

#NewsSide .catch_wrap_side h2 {
  color: var(--cloro-text-def);
  font-size: 4rem;
  text-align: right;
}

.catch_wrap_side h2 .catch_en {
    font-size: 75%;
}

.catch_wrap_side h2 .catch_sm {
  font-size: 50%;
}

.catch_wrap_side h2 .catch_md  {
  font-size: 80%;
}

/* フロント ブログセクション */

#frontBlogList .scroll_wrap {
  overflow: visible;
  border-radius: 50px;
}

#frontBlogList .scroll_contents {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#frontBlogList .scroll_item {
    width: 48%;
    text-align: left;
  }

.front_blog_card {
  background-color: var(--color-white);
  border-radius: 25px;
}

#frontBlogList .blog-item_thumbnail {
  border-radius: 25px;
  overflow: hidden;
  width: 100%;
  aspect-ratio: 2 / 1.6;
}

#frontBlogList .blog-item_thumbnail img {
  height: 100%;
}

.front_blog_card .blog-item_date {
  display: block;
  margin-bottom: 0;
}

#frontBlogList dt.blog-item_title {
  font-weight: 400;
}



@media screen and (min-width: 992px) {
  #frontBlogList .scroll_contents {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
  }

  #frontBlogList .scroll_item {
    width: 300px;
    flex: 0 0 300px;
    text-align: left;
  }

  .front_blog_card {
    margin-right: 3rem;
    border-radius: 50px;
  }

  #frontBlogList .blog-item_thumbnail {
  border-radius: 50px;
}

}