@charset "utf-8";

/* ============================================================
   カラー変数（ここを変更すれば全体の色を一括で変更できます）
   Version: 1.1.0  (2026-06-09)
   ============================================================ */
:root {
  /* ベース */
  --c-white:     #fff;      /* 白 */
  --c-black:     #333;      /* 黒 */
  --c-ink:       #111;      /* テキスト用の濃いグレー */

  /* ブランドカラー */
  --c-blue:      #34A7E1;   /* メインの水色 */
  --c-blue02:      #F2FBFF;   /* 水色 */
  --c-green:      #CEDA00;   /* メインの緑 */
  --c-accent:    #c1253b;   /* アクセント（レッド） */

  /* グレー・ライン・背景 */
  --c-gray:      #ccc;      /* グレー（ボーダー等） */
  --c-gray-dark: #9F9F9F;   /* 濃いめグレー */
  --c-gray-pale: #eee;      /* 薄いグレー */
  --c-line:      #dededf;   /* 区切り線 */
  --c-border:    #e5e7eb;   /* ボーダー */
  --c-bg:        #f2f2f2;   /* 背景グレー */
  --c-bg2:       #f9f9f9;   /* 背景グレー（薄） */
  --c-beige:     #ece9e3;   /* ベージュ */
}
/*module
---------------------------------------------*/
@media screen and (max-width: 767px) {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
  }
}
figure {
  margin: 0;
}
body {
  background: var(--c-white);
  color: var(--c-black);
  font-family: "Poppins",'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", sans-serif;
  font-size: 1.6rem;
  line-height: 2;
  -webkit-text-size-adjust: 100%;
  letter-spacing: 0.1em;
}
@media screen and (max-width: 767px) {
  body {
    font-size: 1.4rem;
  }
}
.en {
  font-family: "Poppins", sans-serif;
}
.pankuzu_bg {
  background-color: var(--c-gray-pale);
}
.site_wrapper {
  width: 1200px;
  margin: 0 auto;
  text-align: left;
  position: relative;
}
@media screen and (max-width: 767px) {
  .site_wrapper {
    width: 100%;
    box-sizing: border-box;
  }
}
#wrapper_all {
  text-align: center;
  min-width: 1240px;
  position: relative;
  z-index: 1;
}
@media screen and (max-width: 767px) {
  #wrapper_all {
    min-width: 100%;
  }
}
.bg_gray {
  background-color: var(--c-bg2);
}
.sp_none {}
@media screen and (max-width : 767px) {
  .sp_none {
    display: none;
  }
}
.pc_none {
  display: none;
}
@media screen and (max-width : 767px) {
  .pc_none {
    display: inherit;
  }
}
.indent_content {
  padding: 200px 0;
}
@media screen and (max-width: 767px) {
  .indent_content {
    padding: 80px 20px;
  }
}
.sp_indent20_lr {}
@media screen and (max-width: 767px) {
  .sp_indent20_lr {
    padding: 0 20px;
  }
}

.button a {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  min-width: 0;
  padding: 0;
  color: var(--c-blue);
  font-size: 2rem;
  font-weight: bold;
  letter-spacing: 0.08em;
}
@media screen and (max-width: 767px) {
  .button a {
  font-size:1.6rem;
}
}
.button a:hover{
  opacity: 1;
}
.button .button_arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
}
.button .button_arrow img {
  display: block;
}
@media screen and (max-width: 767px) {
  .button .button_arrow img {
    width: 60px;
  }
}
.button a:hover .button_arrow {
  transform: translateX(5px);
}

/* パンくずリスト
-------------------------------*/
nav#breadcrumbs {}
nav#breadcrumbs a {}
@media screen and (max-width: 767px) {
  nav#breadcrumbs {
    padding: 5px 20px 0;
  }
}
nav#breadcrumbs ol li {
  display: inline;
  list-style-type: none;
  font-size: 1.2rem;
}
nav#breadcrumbs ol li:before {
  content: "　>　";
}
nav#breadcrumbs ol li:first-child:before {
  content: "";
}
/* 下層タイトル
-------------------------------*/
.bg_ttl {
  background-size: cover !important;
  padding: 200px 0 100px;
  text-align: center;
  width: 100%;
  color: var(--c-white);
  box-sizing: border-box;
}
@media screen and (max-width: 767px) {
  .bg_ttl {
    padding: 100px 20px 40px;
    width: 100%;
  }
}
.ttl_box {
  background: rgba(2, 7, 32, .9);
  margin-left: auto;
  text-align: left;
  padding: 40px 60px;
  box-sizing: border-box;
  width: 65%;
}
@media screen and (max-width: 767px) {
.ttl_box {
  padding: 30px;
  width: 100%;
}
}
/* 日本語タイトル：一覧・固定ページは h1、記事詳細は記事タイトルが h1 なので div */
.ttl_box h1,
.ttl_box .ttl_box_jp {
  font-size: 2.2rem;
  letter-spacing: 0.2em;
}
@media screen and (max-width: 767px) {
  .ttl_box h1,
  .ttl_box .ttl_box_jp {
    font-size: 1.4rem;
  }
}
.ttl_box p {
  font-size: 8rem;
  font-family: "Marcellus", serif;
  line-height: 1.2;
}
@media screen and (max-width: 767px) {
  .ttl_box p {
    font-size: 3rem;
  }
}
.bg_ttl_brand,.bg_ttl_product,.bg_ttl_izzo,.bg_ttl_valchiria,.bg_ttl_pompei {
  background: url("img/brand/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_company {
  background: url("img/company/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_contact, .bg_ttl_confirmation, .bg_ttl_thanks {
  background: url("img/contact/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_faq {
  background: url("img/faq/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_news {
  background: url("img/news/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_blog {
  background: url("img/blog/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_cafemap {
  background: url("img/map/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_privacy {
  background: url("img/privacy/bg_ttl.webp") center top no-repeat;
}
.bg_ttl_workshop {
  background: url("img/workshop/bg_ttl.webp") center top no-repeat;
}
/* header
-------------------------------------------------------------------*/
.header {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 100;
  background:var(--c-white);
}
.header_inner {
  position: relative;
  width: 100%;
  padding: 20px 30px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.header_inner .header_catch {
  font-size: 1.2rem;
  color: var(--c-dark);
  text-align: left;
}
.logo {
  width: 215px;
}
/* 1400px以下（PC幅）はロゴとナビを上下2段に */
@media screen and (min-width: 768px) and (max-width: 1400px) {
  .header_inner {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 15px 30px;
  }
  .header_inner .nav_list {
    justify-content: center;
  }
}
@media screen and (min-width: 768px) {
  /* ナビの文字が折り返さないように */
  .nav_item_row > a,
  .nav_list > li > a {
    white-space: nowrap;
  }
}
@media screen and (max-width: 767px) {
  .header_inner {
    padding: 15px;
    display: block;
  }
  .header_inner .header_catch {
    font-size: 1rem;
  }
  .logo {
    width: 150px;
  }
}
/* メインビジュアル */
.main {
  position: relative;
  height: 100vh;
  background: url("img/top/bg_main.webp") no-repeat;
  background-size: cover;
}
@media screen and (max-width: 767px) {
  .main {
    background-image: url("img/top/sp_bg_main.webp");
  }
}
.main_txt {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 40px;
  width: 1200px;
  margin: 0 auto;
  text-align: left;
}
@media screen and (max-width: 1200px) {
 .main_txt {
 padding: 0 60px;
} 
}
@media screen and (max-width: 767px) {
  .main_txt {
    width: 100%;
    bottom: 0;
    top:110px;
    justify-content: center;
 padding: 0;
  }
}
.main_txt > figure {
  position: absolute;
  bottom: 0;
  right: 0;
}
@media screen and (max-width: 1200px) {
.main_txt > figure {
  right: 5%;
}
}
@media screen and (max-width: 767px) {
  .main_txt > figure {
  width: 90%;
  right: 0;
  left: 0;
  margin: 0 auto;
  }
}
.main_txt_img{}
@media screen and (max-width: 767px) {
.main_txt_img{
  width: 35%;
}
}
.main_lead {
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: clamp(1.5rem, 1.2vw + 0.8rem, 3rem);
  line-height: 2;
  letter-spacing: 0.1em;
}
.main_lead > span {
  background: var(--c-white);
  padding:10px 5px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
@media screen and (max-width: 767px) {
  .pc_only {
    display: none;
  }
}
.f_50 {
  font-size: 5rem;
}
@media screen and (max-width: 767px) {
  .f_50 {
    font-size: 2.4rem;
  }
}
.ls_01 {
  letter-spacing: -0.5em;
}
.ls_02 {
  letter-spacing: -0.3em;
}
@media screen and (max-width: 767px) {
.sp_center{
	text-align: center;
	}
}

/* SP用 */
@media screen and (max-width: 767px) {
  .nav {
    position: fixed;
    right: -320px; /* 右から出てくる */
    top: 0;
    width: 300px; /* スマホに収まるサイズ */
    height: 100vh;
    padding-top: 60px;
    background-color: var(--c-white);
    transition: all .6s;
    z-index: 200;
    overflow-y: auto; /* メニューが多くなったらスクロールできるように */
  }
  .hamburger {
    position: absolute;
    right: 15px;
    top: 15px;
    width: 40px; /* クリックしやすい幅 */
    height: 40px; /* クリックしやすい高さ */
    border: 1px solid #8ED2F4;
    border-radius: 50%;
    cursor: pointer;
    z-index: 300;
  }
  .hamburger_border {
    position: absolute;
    left: 9px;
    width: 20px;
    height: 1px;
    background-color: #8ED2F4;
    transition: all .6s;
  }
  .hamburger_border_top {
    top: 13px;
  }
  .hamburger_border_center {
    top: 19px;
  }
  .hamburger_border_bottom {
    top: 25px;
  }
  .black_bg {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: 100;
    background-color: #333;
    opacity: 0;
    visibility: hidden;
    transition: all .6s;
    cursor: pointer;
  }
  /* 表示された時用のCSS */
  .nav-open .nav {
    right: 0;
  }
  .nav-open .black_bg {
    opacity: .8;
    visibility: visible;
  }
  .nav-open .hamburger_border_top {
    transform: rotate(45deg);
    top: 19px;
  }
  .nav-open .hamburger_border_center {
    width: 0;
    left: 50%;
  }
  .nav-open .hamburger_border_bottom {
    transform: rotate(-45deg);
    top: 19px;
  }
}
.nav_list {
    display: flex;
    gap: 40px;
    align-items: center;
}
.nav_item--has-submenu {
  position: relative;
}
.nav_item_row {
  display: flex;
  align-items: center;
  gap: 4px;
}
.nav_list li a {
  color: var(--c-black);
  font-weight: bold;
}
.nav_list > li:last-child > a {
  display: block;
  background: var(--c-blue);
  color: var(--c-white);
  padding: 5px;
  width: 180px;
  box-sizing: border-box;
  border-radius: 50px;
}
.nav_submenu_toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--c-blue);
  cursor: pointer;
  font: inherit;
  line-height: 1;
}
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nav_submenu_toggle span:first-child {
  position: relative;
  display: block;
  width: 10px;
  height: 10px;
  color: transparent;
  overflow: hidden;
}
.nav_submenu_toggle span:first-child::before,
.nav_submenu_toggle span:first-child::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  background: var(--c-blue);
  transition: transform 0.3s ease;
}
.nav_submenu_toggle span:first-child::after {
  transform: rotate(90deg);
}
.nav_item--has-submenu.is-open .nav_submenu_toggle span:first-child::after {
  transform: rotate(0deg);
}
.nav_submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 10;
  display: block;
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
  min-width: 230px;
  margin: 0;
  padding: 12px 18px;
  list-style: none;
  background: var(--c-white);
  box-shadow: 0 8px 20px rgba(17, 17, 17, 0.12);
}
.nav_submenu > li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: bold;
  text-align: left;
}
.nav_submenu > li::before {
  content: "";
  flex-shrink: 0;
  width: 10px;
  height: 1px;
  background: var(--c-blue);
}
.nav_item--has-submenu.is-open .nav_submenu {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
.nav_submenu li a {
  display: block;
  padding: 3px 0;
  color: var(--c-black);
  font-size: 1.4rem;
  font-weight: 800;
  white-space: nowrap;
}
@media screen and (max-width: 767px) {
  .nav_list {
    display: block;
  }
  .nav_item {
    text-align: left;
    padding: 0 30px;
  }
  .nav_item a {
    display: block;
    padding: 10px 0;
  }
  .nav_item a:hover {
    background-color: var(--c-gray-pale);
  }
  /* PCのボタン装飾を解除 */
  .nav_list > li:last-child > a {
    width: auto;
    padding: 10px 0;
    background: none;
    color: var(--c-dark);
    border-radius: 0;
  }
  .nav_submenu {
    position: static;
    min-width: 0;
    max-height: 0;
    overflow: hidden;
    padding: 0;
    box-shadow: none;
    transform: none;
    transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.3s ease, visibility 0.4s ease;
  }
  .nav_item--has-submenu.is-open .nav_submenu {
    max-height: 500px;
    padding-bottom: 8px;
  }
  .nav_submenu li a {
    padding: 5px 0;
    font-size: 1.3rem;
  }
}

.ttl_01 {
  margin-bottom: 60px;
  align-items: baseline;
  gap: 20px;
  display: flex;
}
@media screen and (max-width: 767px) {
  .ttl_01 {
    margin-bottom: 40px;
  }
}
.ttl_01 > p {
  font-size: 6.2rem;
  font-weight: 500;
  line-height: 1.1;
  text-transform: uppercase;
}
@media screen and (max-width: 767px) {
  .ttl_01 > p {
    font-size: 3rem;
  }
}
.ttl_01 > h2 {
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
  .ttl_01 > h2 {
    font-size: 1.4rem;
  }
}

.ttl_02 {
  gap: 10px;
  margin: 0;
  font-size: 4rem;
  color: #fff;
  writing-mode: vertical-rl;
  text-orientation: mixed;
      line-height: 1.8;
      text-align: left;
}
@media screen and (max-width: 767px) {
.ttl_02 {
  font-size: 2.4rem;
}  
}
.ttl_02 span {
 padding: 10px 5px 10px 0;
  letter-spacing: 0.12em;
  text-indent: 0;
  writing-mode: vertical-rl;
  text-orientation: mixed;
    line-height: 1;

}
.ttl_02 > span:first-child {
  background: #8ED2F4;
}
.ttl_02 > span:last-child {
  background: #CEDA00;
}
@media screen and (max-width: 767px) {

}

.btn_more a {
  display: block;
  border: var(--c-gray-dark) 1px solid;
  padding: 10px 15px;
  text-align: center;
  width: 170px;
  font-size: 1.4rem;
  font-family: "Cinzel", serif;
}
.btn_more.center a {
  margin: 0 auto;
}
/*-----トップページ------*/
#content_01 {
  width:1200px;
  margin: 0 auto;
  padding:100px 0;
}
@media screen and (max-width: 767px) {
  #content_01 {
  width:100%;
  }
}


#content_02 {
  position: relative;
  width: 1200px;
  margin: 0 auto 100px;
}
@media screen and (max-width: 767px) {
  #content_02 {
    position: relative;
    width: 100%;
    padding-left: 20px;
  margin: 0 auto 50px;
  }
}
.content_02_inner{
  display: flex;
  gap:40px;
  text-align: left;
  margin-bottom: 60px;
}
.content_02_inner > div,.content_02_inner > figure{
  width: calc(50% - 25px);
}
@media screen and (max-width: 767px) {
  .content_02_inner {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 30px;
  }
  .content_02_inner > figure {
    order: 1;
    width: 100%;
  }
  .content_02_inner > h3{
    order: 2;
    flex-shrink: 0;
    width: auto;
  }

  .content_02_inner > div {
    order: 3;
    flex: 1;
    min-width: 0;
    width: auto;
    padding-right:2dvb;
  }
}
.bg_blue{
  background: var(--c-blue02);
  position: relative;
}
.bg_blue::before {
  content: "";
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height:1px;
  background: var(--c-blue);
}
@media screen and (max-width: 767px) {
  .bg_blue::before {
  top: 20px;
}
}
/* 左右40pxの位置に縦線 */
.bg_blue::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40px;
  right: 40px;
  border-left: 1px solid var(--c-blue);
  border-right: 1px solid var(--c-blue);
  pointer-events: none;
}
@media screen and (max-width: 767px) {
  .bg_blue::after {
    left: 20px;
    right: 20px;
  }
}
#content_03 {
  padding: 100px 0 60px;
  position: relative;
  width:1200px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  #content_03 {
    padding: 50px 20px;
    width:100%;
  }
}
#content_03 .ttl_01{
  display: block;
}
/* 選ばれる理由スライダー */
.reason_slider {
  position: relative;
  max-width: 1090px;
  margin: 0 auto;
  padding: 0 80px;
}
.reason_swiper .swiper-slide {
  text-align: center;
}
.reason_swiper .swiper-slide img {
  display: block;
  margin: 0 auto;
}
.reason_swiper .swiper-slide > p {
  display: inline-block;
  padding: 2px 12px;
  background: var(--c-blue);
  color: var(--c-white);
  font-size: 1.8rem;
}
.reason_swiper .swiper-slide > h3 {
  font-size: 4rem;
  font-weight: 500;
}
@media screen and (max-width: 767px) {
  .reason_swiper .swiper-slide > p {
    font-size: 1.4rem;
  }
  .reason_swiper .swiper-slide > h3 {
    font-size: 2.4rem;
  }
}
/* 真ん中に来たら文字をふわっと表示 */
.reason_swiper .swiper-slide > p,
.reason_swiper .swiper-slide > h3 {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reason_swiper .swiper-slide-active > p,
.reason_swiper .swiper-slide-active > h3 {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}
@media screen and (min-width: 768px) {
  /* 全スライド450px幅で並べ、左右は縮小（450→200px）して中央側へ寄せる
     表示幅930px = 200 + 40(余白) + 450 + 40 + 200 */
  .reason_swiper {
    max-width: 930px;
  }
  .reason_swiper .swiper-slide {
    width: 450px !important; /* Swiperのインライン幅より優先 */
    transform-origin: 50% calc(100% - 225px); /* 画像の中心を基準に縮小 */
    transition: transform 0.6s ease;
  }
  .reason_swiper .swiper-slide-prev {
    transform: translateX(85px) scale(0.4444);
  }
  .reason_swiper .swiper-slide-next {
    transform: translateX(-85px) scale(0.4444);
  }
}
.reason_prev,
.reason_next {
  position: absolute;
  top: 50%;
  z-index: 10;
  padding: 0;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}
.reason_prev {
  left: 10px;
}
.reason_next{
  right: 10px;
}
.reason_prev img,
.reason_next img {
  display: block;
}
.reason_pagination {
  margin-top: 30px;
  text-align: center;
}
.reason_pagination .swiper-pagination-bullet {
  margin: 0 6px;
  border: 1px solid var(--c-blue);
  background: none;
  opacity: 1;
}
.reason_pagination .swiper-pagination-bullet-active {
  background: var(--c-blue);
}
@media screen and (max-width: 767px) {
  .reason_slider {
    padding: 0 70px; /* 矢印(40px)＋余白10pxぶん内側に */
  }
  .reason_prev img,
  .reason_next img {
    width: 40px;
  }
  .reason_pagination {
    margin-top: 20px;
  }
}
#content_04 {
  padding: 60px 0 0;
  position: relative;
  border-top: var(--c-blue) 1px solid;
}
@media screen and (max-width: 767px) {
  #content_04 {
    padding: 50px 0 0;
    display: block;
  }
}
#content_04 .ttl_01{
  display: block;
}
.voice_box{
  display: flex;
  text-align: left;
}
@media screen and (max-width: 767px) {
.voice_box{
  flex-wrap: wrap;
}
}
.voice_box > div:first-child .voice_case {
  padding-left: 10%;
}
.voice_box > div:last-child .voice_case {
  padding-right: 10%;
}
@media screen and (max-width: 767px) {
  .voice_box > div:first-child .voice_case,
  .voice_box > div:last-child .voice_case {
    padding-left: 30px;
    padding-right: 30px;
  }
}
/* CASE見出し（左：番号／右：タイトル） */
.voice_case {
  display: flex;
  border-top: 1px solid var(--c-blue);
  border-bottom: 1px solid var(--c-blue);
  color: var(--c-blue);
}
.voice_case > p:first-child {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 170px;
  padding: 15px 0;
  border-right: 1px solid var(--c-blue);
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.voice_case > p:first-child > span {
  font-size: 5rem;
  font-style: italic;
  font-weight: bold;
}
.voice_case > p:last-child {
  display: flex;
  align-items: center;
  flex: 1;
  padding: 15px 40px;
  font-size: 2rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .voice_case > p:first-child {
    width: 100px;
    font-size: 1.4rem;
  }
  .voice_case > p:first-child > span {
    font-size: 3.6rem;
  }
  .voice_case > p:last-child {
    padding: 10px 15px;
    font-size: 1.5rem;
    line-height: 1.2;
  }
}
.voice_box > div{
  width:50%;
}
@media screen and (max-width: 767px) {
.voice_box > div{
  width:100%;
}
}
.voice_box > div:first-child .voice_inner{
  padding: 5% 5% 0 10%;
}
.voice_box > div:last-child .voice_inner{
  padding: 5% 10% 0 5%;
}
@media screen and (max-width: 767px) {
  .voice_box > div:first-child .voice_inner,
  .voice_box > div:last-child .voice_inner {
    padding: 20px 30px 0 30px;
  }
}
/* 左：写真・属性／右：本文 */
.voice_body {
  display: flex;
  gap: 30px;
}
.voice_profile {
  flex-shrink: 0;
  width: 180px;
  text-align: center;
}
.voice_body > p {
  flex: 1;
  min-width: 0;
}
@media screen and (max-width: 767px) {
  .voice_body {
    gap: 15px;
  }
  .voice_profile {
    width: 90px;
    font-size: 1.2rem;
  }
}
/* 対応内容：下向き三角の見出し */
.voice_support_ttl {
  width: 500px;
  max-width: 100%;
  margin: 40px auto 20px;
  padding: 12px 0 30px;
  background: #CEDA00;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  color: #fff;
  font-size: 3.2rem;
  text-align: center;
  line-height: 1.4;
}
/* 対応内容：リスト＋スタッフ */
.voice_support {
  position: relative;
  margin-bottom: 100px; /* はみ出したスタッフ画像のぶん */
  padding: 30px 220px 30px 30px;
  border: 3px solid #8ED2F4;
  background: var(--c-white);
}
.voice_support li {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 15px;
  font-size: 2.4rem;
}
.voice_support li:last-child {
  padding-bottom: 0;
}
.voice_support li + li {
  border-top: 1px dotted #8ED2F4;
}
.voice_support li::before {
  content: "";
  flex-shrink: 0;
  width: 35px;
  height: 40px;
  background: url("img/top/denkyu.webp") center / contain no-repeat;
}
.voice_support figure {
  position: absolute;
  right: 30px;
  bottom: -100px;
  width: 160px;
}
.voice_support figure img {
  display: block;
  width: 100%;
  height: auto;
}
@media screen and (max-width: 767px) {
  .voice_support_ttl {
    width: 240px;
    margin: 30px auto 15px;
    padding: 8px 0 22px;
    font-size: 1.6rem;
  }
  .voice_support {
    margin-bottom: 30px;
    padding: 10px 100px 10px 15px;
  }
  .voice_support li {
    gap: 10px;
    padding: 8px 0;
    font-size: 1.4rem;
  }
  .voice_support li::before {
    width: 24px;
    height: 28px;
  }
  .voice_support figure {
    right: 10px;
    bottom: -30px;
    width: 80px;
  }
}
/* カード同士の間に縦線 */
.voice_box > div + div {
  border-left: 1px solid var(--c-blue);
}

#content_05 {
  padding: 100px 0;
  width: 1200px;
  margin: 0 auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  #content_05 {
    width: 100%;
    padding: 50px 20px;
  }
}

.column_top {
  border-top: var(--c-gray) 1px solid;
  width: calc(100% - 250px);
  margin-left: auto;
  position: relative;
}
@media screen and (max-width: 767px) {
  .column_top {
    width: 100%;
  }
}
.column_top::before {
  content: "";
  position: absolute;
  background: var(--c-black);
  width: 25px;
  height: 1px;
  left: 0;
  top: -1px;
}
.column_top > li {
  border-bottom: var(--c-gray) 1px solid;
  position: relative;
}
.column_top > li::before {
  content: "";
  position: absolute;
  background: var(--c-black);
  width: 25px;
  height: 1px;
  left: 0;
  bottom: -1px;
}
.column_top > li > a {
  padding: 30px 0;
  display: flex;
  gap: 80px;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .column_top > li > a {
    flex-wrap: wrap;
    gap: 10px;
  }
}
.column_top > li > a > p:nth-child(1) {
  width: 8%;
  font-size: 1.4rem;
}
@media screen and (max-width: 767px) {
  .column_top > li > a > p:nth-child(1) {
    width: 30%;
  }
}
.news_top {
  background: #CEDA00;
}
.news_top_banner {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  color: #fff;
  overflow: hidden;
}
.news_top_label {
  display: flex;
  gap:15px;
  width: 210px;
  padding: 16px 20px;
  border-right: 1px solid rgba(255, 255, 255, 0.7);
  box-sizing: border-box;
  align-items: center;
}
.news_top_kicker {
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.04em;
}
.news_top_sub {
  font-size: 1.2rem;
  opacity: 0.9;
  margin-top: 6px;
}
.news_top_slider {
  position: relative;
  flex: 1;
  height: 96px;
  overflow: hidden;
}
.news_top_slider::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05);
}
.news_top_slider::before {
  content: "";
  position: absolute;
  right: 31px;
  top: 50%;
  width: 8px;
  height: 8px;
  transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid #CEDA00;
  border-right: 2px solid #CEDA00;
  z-index: 1;
}
.news_top_slider .swiper-wrapper {
  height: 100%;
}
.news_top_slider .swiper-slide {
  height: 96px;
}
.news_top_slider .swiper-slide a {
  display: flex;
  align-items: center;
  gap: 25px;
  width: 100%;
  height: 100%;
  padding: 0 56px 0 28px;
  color: #fff;
  text-align: left;
}
.news_top_date {
  min-width: 110px;
  white-space: nowrap;
}
.news_top_title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media screen and (max-width: 1199px) {
  .news_top_banner {
    max-width: none;
  }
}
@media screen and (max-width: 767px) {
  .news_top_banner {
    display: block;
  }
  .news_top_label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  }
  .news_top_kicker {
    font-size: 2.4rem;
  }
  .news_top_slider {
    height: 76px;
  }
  .news_top_slider .swiper-slide {
    height: 76px;
  }
  .news_top_slider .swiper-slide a {
    gap: 12px;
    padding: 0 44px 0 16px;
  }
  .news_top_date {
    min-width: 86px;
    font-size: 1.1rem;
  }
  .news_top_title {
    font-size: 1.2rem;
  }
}
/*.column_top > li > a > p:nth-child(2) {
  background: var(--c-white);
  padding: 5px;
  font-size: 1.4rem;
  width: 15%;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .column_top > li > a > p:nth-child(2) {
    padding: 5px;
    font-size: 1.0rem;
    width: 50%;
  }
}
*/#content_06 {
  padding: 100px 0;
  position: relative;
  width: 1200px;
  margin: 0 auto;
  text-align: left;
}
@media screen and (max-width: 767px) {
  #content_06 {
    padding: 50px 20px;
    width: 100%;
  }
}
.area_box{
  background: var(--c-bg);
  padding: 30px;
}
@media screen and (max-width: 767px) {
.area_box{
  padding: 15px;
}
}
.f_blue{
  color:var(--c-blue);
}
/* 訪問可能地域（アコーディオン） */
.area_ttl {
  position: relative;
  display: block;
  width: 100%;
  padding: 0 40px 0 0;
  background: none;
  border: none;
  font-family: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
/* +/- アイコン */
.area_ttl::before,
.area_ttl::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 16px;
  height: 1px;
  background: var(--c-black);
  transition: transform .3s;
}
.area_ttl::after {
  transform: rotate(90deg);
}
.area_ttl.active::after {
  transform: rotate(0deg);
}
.area_detail {
  display: none; /* 初期状態は閉じる */
  padding-top: 15px;
}
.contact_box {
  padding: 60px;
  position: relative;
  /* 左半分：緑 / 右半分：水色 */
  background: linear-gradient(to right, #CEDA00 50%, #8ED2F4 50%);
}
@media screen and (max-width: 767px) {
.contact_box {
    padding: 40px 20px 20px;
  }
}
.contact_box_fl{
  position: relative;
  z-index: 2; /* 人物画像より前面に */
  background: var(--c-white);
  padding: 60px;
  width: 1200px;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .contact_box_fl{
  padding: 30px 20px;
  width: 100%;
}
}
/* タブレット：固定幅1200pxを画面幅に合わせる */
@media screen and (max-width: 1199px) {
  .site_wrapper,
  .main_txt,
  #content_01,
  #content_02,
  #content_03,
  #content_05,
  #content_06,
  .contact_box_fl {
    width: 100%;
    box-sizing: border-box; /* padding込みで100%に収める */
  }
}
/* タブレットは左右に40pxの余白 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
  #content_01,
  #content_02,
  #content_05,
  #content_06 {
    padding-left: 40px;
    padding-right: 40px;
  }
}
/* お問い合わせ タイトル（左右に人物） */
.contact_ttl .ttl_01 {
  display: block;
  margin-bottom: 40px;
  text-align: center;
  position: relative;
    z-index: 2;
}
/* 人物画像：.contact_box 基準で上に30pxはみ出す */
.contact_ttl img {
  position: absolute;
  top: -30px;
  z-index: 1;
  width: auto;
  height: 250px; /* 足元は .contact_box_fl の裏に隠れる */
}
.contact_ttl img:first-child {
  right: calc(50% + 170px); /* タイトルの左 */
}
.contact_ttl img:last-child {
  left: calc(50% + 170px); /* タイトルの右 */
}
@media screen and (max-width: 767px) {
  .contact_ttl .ttl_01 {
    margin-bottom: 20px;
  }
  .contact_ttl img {
      top: -10px;
    height: 140px;
  }
  .contact_ttl img:first-child {
    right: calc(50% + 80px);
  }
  .contact_ttl img:last-child {
    left: calc(50% + 80px);
  }
}
/* お問い合わせ 2カラム */
.contact_lead {
  text-align: center;
  margin-bottom: 40px;
  font-weight: 500;
  font-size: 2rem;
}
@media screen and (max-width: 767px) {
.contact_lead {
  margin-bottom: 20px;
  font-size: 1.6rem;
}
}
.contact_cols {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 60px;
}
.contact_cols > div {
  width: 510px;
}
/* 電話（左） */
.contact_tel a {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  border: 1px solid var(--c-gray);
  border-radius: 4px;
  box-shadow: 0 4px 0 var(--c-gray-dark);
  color: var(--c-black);
  text-decoration: none;
  line-height: 1.3;
  transition: transform .2s, box-shadow .2s;
}
.contact_tel a:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 var(--c-gray-dark);
}
/* ルビ＋番号：幅を番号に合わせ、ルビを番号の末尾に右揃え */
.contact_tel_main {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.contact_tel_ruby {
  margin-right: -.3em; /* 末尾の字間ぶんを打ち消して番号の端に揃える */
  letter-spacing: .3em;
}
.contact_tel_num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 5rem;
  font-weight: 600;
  letter-spacing: .05em;
}
.contact_tel_time {
  margin-top: 5px;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
.contact_tel_time {
  font-size: 1.4rem;
}
}
/* フォーム（右） */
.contact_mail p {
  text-align: center;
  margin-bottom: 20px;
}
.contact_mail_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 22px 20px;
  border-radius: 4px;
  background: var(--c-blue);
  box-shadow: 0 4px 0 #1f7fb0;
  color: var(--c-white) !important;
  font-size: 1.8rem;
  font-weight: bold;
  text-decoration: none;
  transition: transform .2s, box-shadow .2s;
}
.contact_mail_btn:hover {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #1f7fb0;
}
@media screen and (max-width: 767px) {
  .contact_cols {
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
  }
  .contact_cols > div {
    width: auto;
  }
  .contact_tel_ruby {
    margin-right: -.1em;
    font-size: 1.2rem;
    letter-spacing: .1em;
  }
  .contact_tel_num {
    font-size: 3rem;
  }
  .contact_tel_num img {
    width: 26px;
    height: auto;
  }
  .contact_mail_btn {
    font-size: 1.6rem;
  }
  .contact_mail_btn img {
    width: 26px;
    height: auto;
  }
}

/*footer
-----------------------------------------*/
.footer {
  padding: 60px 0;
}
.ft_logo {
  margin-bottom: 60px;
  text-align: center;
}
.ft_logo img {
  width: 300px;
  height: auto;
}
.ft_nav {
  display: flex;
  justify-content: center;
  gap: 150px;
}
.ft_nav > ul {
  width: 300px;
}
.ft_nav > ul > li {
  padding: 20px 0 25px;
  border-bottom: 1px solid var(--c-line);
  text-align: left;
}
.ft_nav > ul > li:first-child {
  padding-top: 0;
}
.ft_nav > ul > li > a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--c-black);
  font-weight: bold;
  line-height: 1.5;
  font-size: 2rem;
}
/* 見出し前の水色リング */
.ft_nav > ul > li > a::before {
  content: "";
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  border: 5px solid var(--c-blue);
  border-radius: 50%;
  box-sizing: border-box;
}
.ft_nav_sub {
  margin-top: 8px;
  padding-left: 36px;
}
.ft_nav_sub li {
  font-size: 1.6rem;
  line-height: 1.9;
}
.ft_nav_sub li a {
  color: var(--c-black);
}
.ft_nav_sub li a::before {
  content: "- ";
}
.ft_nav a:hover {
  color: var(--c-blue);
}
.ft_copy {
  padding: 5px 20px;
  background: var(--c-green);
  color: var(--c-white);
  font-size: 1.2rem;
  font-weight: normal;
  text-align: center;
}
@media screen and (max-width: 767px) {
  .footer {
    padding: 50px 20px 40px;
  }
  .ft_logo {
    margin-bottom: 30px;
  }
  .ft_logo img {
    width: 220px;
  }
  .ft_nav {
    display: block;
  }
  .ft_nav > ul {
    width: 100%;
  }
  .ft_nav > ul > li,
  .ft_nav > ul > li:first-child {
    padding: 15px 0;
  }
  .ft_nav > ul > li > a {
  font-size: 1.6rem;
}
.ft_nav_sub li {
  font-size: 1.4rem;
}
  .ft_nav_sub {
    padding-left: 30px;
  }
  .ft_copy {
    font-size: 1rem;
  }
}




/*ggmap
--------------------------------*/
.ggmap {
  position: relative;
  padding-bottom: 46.3%;
  /*	padding-top: 30px;*/
  height: 0;
  overflow: hidden;
}
.ggmap iframe, .ggmap object, .ggmap embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .ggmap {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }
  .ggmap iframe, .ggmap object, .ggmap embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
}
/* アクセスのリード画像 */
@media screen and (max-width: 767px) {
  .access_lead img {
    width: 80%;
    height: auto;
  }
}
/* アクセス（オフィス）スライダー */
.office_slider {
  position: relative;
  padding: 0 90px; /* 矢印(60px)＋余白30pxぶん内側に */
}
.office_swiper {
  padding-top: 40px; /* はみ出すオフィス名（top:-40px）が切れないように */
}
.office_prev,
.office_next {
  position: absolute;
  top: 50%;
  z-index: 10;
  padding: 0;
  border: 0;
  background: none;
  transform: translateY(-50%);
  cursor: pointer;
}
.office_prev {
  left: 0;
}
.office_next {
  right: 0;
}
.office_prev img,
.office_next img {
  display: block;
}
@media screen and (max-width: 767px) {
  .office_slider {
    padding: 0 40px; /* 矢印(30px)＋余白10px */
  }
  .office_prev img,
  .office_next img {
    width: 30px;
  }
  /* スマホはマップを正方形に */
  .office_swiper .ggmap {
    padding-top: 0;
    padding-bottom: 100%;
  }
}
/* 地図上のオフィス名（縦書き） */
.ggmap_wrap {
  position: relative;
}
.ggmap_wrap .office_label {
  position: absolute;
  top: -40px;
  right: 5%;
  z-index: 1;
  margin: 0;
  padding: 10px 10px 10px 5px;
  writing-mode: vertical-rl;
  font-size: 4rem;
  line-height: 1;
  letter-spacing: .05em;
  color: #fff;
  background: #CEDA00;
}
.ggmap_wrap .office_label--blue {
  background: var(--c-blue);
}
@media screen and (max-width: 767px) {
  .ggmap_wrap .office_label {
    font-size: 2rem;
    padding:8px 8px 8px 4px;
  }
}
/* アクセスのキャッチ（左右に斜め線） */
.access_catch {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px; /* 斜め線がスライド外にはみ出して切れないように */
  margin-bottom: 10px;
  font-size: 2.2rem;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
 .access_catch {
  font-size: 1.6rem;
  justify-content: center;
  display: flex;
  text-align: center;
  line-height: 1.2;
} 
}
.access_catch::before,
.access_catch::after {
  content: "";
  width: 1px;
  height: 1.2em;
  background: currentColor;
}
@media screen and (max-width: 767px) {
.access_catch::before,
.access_catch::after {
  height: 2.2em;
}}
.access_catch::before {
  transform: rotate(-25deg);
}
.access_catch::after {
  transform: rotate(25deg);
}
/* アクセスの住所 */
.access_address {
  margin-bottom: 10px;
  font-size: 1.6rem;
}
@media screen and (max-width: 767px) {
  .access_address {
    font-size: 1.4rem;
  }
}
/* アクセスの TEL / FAX */
.access_tel {
  display: flex;
  flex-wrap: wrap;
  gap: 0 30px;
  margin-bottom: 10px;
  font-size: 1.8rem;
}
@media screen and (max-width: 767px) {
  .access_tel {
    font-size: 1.6rem;
  }
}
.access_tel p {
  margin: 0;
}
.access_tel p > span {
  font-weight: bold;
  margin-right: .5em;
}
.access_tel a {
  color: inherit;
  text-decoration: none;
}
/*　下層共通
-----------------------------------------*/
.main_contents {
  padding: 150px 0 0;
}
@media screen and (max-width: 767px) {
  .main_contents {
    padding: 80px 0;
  }
}
.main_contents02 {
  padding: 150px 0;
}
@media screen and (max-width: 767px) {
  .main_contents02 {
    padding: 80px 0;
  }
}
/*　商品紹介
-----------------------------------------*/
.brand_01 {
  display: flex;
  justify-content: space-between;
  width: 95%;
  margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
.brand_01 {
flex-wrap: wrap;
  width: 100%;
  margin-bottom: 80px;
	padding: 0 20px;
	box-sizing: border-box;
}
}
.brand_01 > div:first-child {
  width: 50%;
  height: 100vh;
  position: sticky;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px) {
.brand_01 > div:first-child {
  width: 100%;
  height: auto;
  position: static;
	margin-bottom: 20px;
}
}
.brand_01 > div:first-child > img {
  height: 100vh;
  width: 100%;
  object-fit: cover
}
@media screen and (max-width: 767px) {
.brand_01 > div:first-child > img {
  height: 40vh;
}
}
.brand_01 > div:last-child {
  width: 45%;
  text-align: left;
}
@media screen and (max-width: 767px) {
.brand_01 > div:last-child {
  width: 100%;
}
}
.brand_01 > div:last-child > ul > li {
  border-bottom: var(--c-gray) 1px solid;
  padding-bottom: 60px;
  margin-bottom: 60px;
}
@media screen and (max-width: 767px) {
.brand_01 > div:last-child > ul > li {
  padding-bottom: 30px;
  margin-bottom: 30px;
}
}
.brand_01 > div:last-child > ul > li > h3 {
  font-size: 2.8rem;
  margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.brand_01 > div:last-child > ul > li > h3 {
  font-size: 2.0rem;
  margin-bottom: 20px;
}
}
.brand_01 > div:last-child > ul > li > ul > li {
  text-indent: -1em;
  padding-left: 1em;
}
.brand_02 {
  padding: 350px 0 0;
  position: relative;
  display: flex;
	margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
.brand_02 {
  padding: 150px 10px 0;
flex-wrap: wrap;
	margin-bottom: 80px;
}
}
.brand_02::after {
  content: "";
  height: 80%;
  width: 100%;
  background: url("img/brand/bg_01.webp") top right no-repeat;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  background-size: cover;
}
@media screen and (max-width: 767px) {
.brand_02::after {
  height: 30%;
}	
}
.brand_02 > div:first-child {
  background: var(--c-white);
  width: 65%;
  padding: 80px 80px 0;
  box-sizing: border-box;
  text-align: left;
}
@media screen and (max-width: 767px) {
.brand_02 > div:first-child {
  width: 100%;
  padding: 20px;
}
}
.brand_02 > div:first-child > ul {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
max-width: 615px;
	width: 100%;
}
@media screen and (max-width: 767px) {
.brand_02 > div:first-child > ul {
  gap: 5px;
}
}
.brand_02 > div:first-child > ul > li {
  width: calc(50% - 7.5px);
  max-width: 300px;
}
@media screen and (max-width: 767px) {
.brand_02 > div:first-child > ul > li {
  width: calc(50% - 2.5px);
}
}
.brand_02 > div:last-child {
  width: 35%;
  position: relative;
}
@media screen and (max-width: 767px) {
.brand_02 > div:last-child {
  width: 100%;
}
}
.brand_02 > div:last-child > .button {
  position: absolute;
  bottom: 15%;
  left: 0;
}
@media screen and (max-width: 767px) {
.brand_02 > div:last-child > .button {
  position: static;
}
}
.brand_03{
	margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
.brand_03{
	margin-bottom: 80px;
}
}

/* ========== ここからgimmick ========== */
  .about__list {
    position: relative;
    border-top: 1px solid rgba(31, 42, 57, 0.2);
	  margin-bottom: 80px;
  }
@media screen and (max-width: 767px) {
  .about__list {
	  margin-bottom: 40px;
  }
}
  /* [A] 画像エリア
        list の中で「ここに表示する」と決めた1ヶ所に絶対配置。
        この位置は固定で動かない。 */
  .about__pic-stack {
    position: absolute;
    left: 5%;
    top: 150px;
	width: 30%;
    max-width: 670px;
    aspect-ratio: 3 / 2;
    z-index: 5;
    pointer-events: none;
  }
@media screen and (max-width: 767px) {
  .about__pic-stack {
   display: none;
	}	
}
  /* [B] 画像エリアの中で3枚を重ねて配置。
        全部同じ inset:0 = 同じ位置。 */
  .about__pic {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
  }
  .about__pic.is-current {
    opacity: 1;
  }
  .about__pic img {
    width: 100%;
    height: 870px;
    object-fit: cover;
    display: block;
  }

  /* [C] アイテム本体 */
  .about-item {
    border-bottom: 1px solid rgba(31, 42, 57, 0.2);
  }
  .about-item__link {
    display: block;
    position: relative;
    color: inherit;
    text-decoration: none;
    transition: color 0.4s ease-in-out;
  }
  .about-item__link:hover {
    color: var(--c-white);
    opacity: 1 !important;
  }

  /* ホバーで背景色だけフェード */
  .about-item__bg {
    position: absolute;
    inset: 0;
    background-color: var(--c-dark);
    opacity: 0;
    pointer-events: none;
    transition:  0.4s ease-in-out;
  }
  .about-item__link:hover .about-item__bg {
    opacity: 1;
  }
  /* 左に画像分の余白を空ける */
  .about-item__wrap {
    position: relative;
    padding: 50px 50px 50px 45%;
	  text-align: left;
}
@media screen and (max-width: 767px) {
  .about-item__wrap {
    padding: 20px;
}
}
  .about-item__title {
    font-size: 2.8rem;
	font-family: "Noto Serif JP", serif;
	  line-height: 1;
	  margin-bottom: 50px;
	  font-weight: bold;
	     border-bottom: var(--c-ink) 1px solid;
    display: inline-block;
    padding-bottom: 15px; 
    transition:  0.4s ease-in-out;
}
@media screen and (max-width: 767px) {
  .about-item__title {
    font-size: 2.0rem;
	  margin-bottom: 30px;
    padding-bottom: 10px; 
}
}
  .about-item__link:hover .about-item__title {
	     border-bottom: var(--c-white) 1px solid;
}
  .about-item__title span {
    font-size: 8rem;
	  font-weight: normal;
	  padding-right: 10px;
	  font-family: "Tenor Sans", sans-serif;
  }
@media screen and (max-width: 767px) {
  .about-item__title span {
    font-size: 4rem;
  }
}
  .about-item__desc {
    font-size: 1.8rem;
    line-height: 2;
  }
@media screen and (max-width: 767px) {
  .about-item__desc {
    font-size: 1.4rem;
  }
}
/* ========== ここまでgimmick ========== */

.brand_04{
	background: url("img/brand/bg_02.webp") center top no-repeat;
	padding: 250px 0;
	margin-bottom: 1px;
	color: var(--c-white);
	overflow: hidden;
	
}
@media screen and (max-width: 767px) {
.brand_04{
	padding: 80px 20px;
}
}
/* ---------- Timeline ---------- */
  .timeline {
    position: relative;
    margin: 0 auto;
    padding: 80px 0;
  }

  .axis {
    position: relative;
    height: 1px;
    background:var(--c-white);
    margin: 60px 0;
  }

  .events {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    position: relative;
  }

  /* Each dot sits on the axis */
  .dot {
    position: absolute;
    top: -7px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background:var(--c-accent);
    transform: translateX(-50%);
    z-index: 2;
  }

  /* Each event card */
  .event {
    position: absolute;
    width:max-content;
    text-align: center;
  }

  .event.above {
    bottom: calc(50% + 107px);
  }
  .event.below {
    top: calc(50% + 107px);
  }

  .year {
    font-weight: 500;
    font-size: 4rem;
    line-height: 1;
	  font-family: "Tenor Sans", sans-serif;
    margin-bottom: 20px;
  }

  .heading {
    font-weight: 600;
    font-size: 2.4rem;
    margin-bottom: 10px;
	 font-family: "Noto Serif JP", serif; 
  }

  .desc {
  }

  /* Dotted connector line — 95px, starts 5px away from the dot */
  .event::before {
    content: "";
    position: absolute;
    left: 50%;
    width: 1px;
    height: 95px;
    border-left: 1px dotted rgba(230, 232, 240, 0.45);
    transform: translateX(-50%);
  }
  .event.above::before { bottom: -95px; }
  .event.below::before { top: -95px; }
/* 4つのドットを軸上に均等配置 */
.dot:nth-of-type(1) { left: 12.5%; }
.dot:nth-of-type(2) { left: 37.5%; }
.dot:nth-of-type(3) { left: 62.5%; }
.dot:nth-of-type(4) { left: 87.5%; }
/* 4つのイベントカードも同じ位置に */
.event:nth-of-type(1) { left: 12.5%; }
.event:nth-of-type(2) { left: 37.5%; }
.event:nth-of-type(3) { left: 62.5%; }
.event:nth-of-type(4) { left: 87.5%; }
	  
  /* Header micro-label (optional flourish, kept very subtle) */
  .label {
    position: absolute;
    top: 48px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--serif);
    font-style: italic;
    font-size: 0.85rem;
    letter-spacing: 0.4em;
    color: var(--text-faint);
    text-transform: uppercase;
  }

  /* Subtle entrance */
  .dot, .event {
    opacity: 0;
    animation: fade 1s ease forwards;
  }
  .dot { animation-delay: 0.1s; }
  .event { animation-delay: 0.35s; }
  @keyframes fade {
    to { opacity: 1; transform: translateX(-50%) translateY(0); }
  }
  .event.above { transform: translate(-50%, 10px); }
  .event.below { transform: translate(-50%, -10px); }
  .event.above { animation-name: fadeUp; }
  .event.below { animation-name: fadeDown; }
  @keyframes fadeUp   { to { opacity: 1; transform: translate(-50%, 0); } }
  @keyframes fadeDown { to { opacity: 1; transform: translate(-50%, 0); } }

  @media screen and (max-width: 767px) {

    .timeline {
      padding: 24px 0;
      max-width: none;
    }

    /* Axis becomes a vertical flex stack */
    .axis {
      height: auto;
      background: none;
      margin: 0;
      display: flex;
      flex-direction: column;
      gap: 56px;
      position: relative;
      padding-left:35px;
    }

    /* Vertical 1px line on the left */
    .axis::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom:0;
      width: 1px;
      background: var(--c-white);
    }

    /* Hide horizontally-positioned dots, redraw per-event */
    .dot { display: none; }

    /* Events stack normally */
    .event {
      position: relative;
      left: auto !important;
      top: auto !important;
      bottom: auto !important;
      transform: none !important;
      width: 100%;
      max-width: none;
      text-align: left;
      animation: none !important;
      opacity: 1 !important;
    }

	
    /* Horizontal dotted connector — aligned with year text, 5px gap from dot */
    .event::before,
    .event.above::before,
    .event.below::before {
      content: "";
      left: -25px;
      top: 15px;
      bottom: auto;
      width: 14px;
      height: 1px;
      border-left: none;
      border-top: 1px dotted rgba(230, 232, 240, 0.45);
      transform: none;
    }

    /* Recreate dot — vertically aligned with year text center */
    .event::after {
      content: "";
      position: absolute;
      left: -40px;
      top: 9px;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background:var(--c-accent);
    }

  
    .year { font-size: 1.9rem; margin-bottom: 10px; }
    .heading { margin-bottom: 8px;
	  font-size: 1.8rem;}
    .desc br { display: none; }
  }

/* product
-----------------------------------------------------*/
.product_01{
	display:flex;
	gap:100px;
	flex-direction: row-reverse;
}
@media screen and (max-width: 767px) {
.product_01{
flex-wrap: wrap;
	gap:0;
	padding: 0 20px;
	  }
}
.product_01 > div:last-child{
width: calc(40% - 100px);
	text-align: left;
	padding: 120px 0;
}
@media screen and (max-width: 767px) {
.product_01 > div:last-child{
width: 100%;
padding: 20px 0 80px;
}
}
.product_01 > div:first-child{
width: 50%;
background: var(--c-beige);
position: relative;
}
@media screen and (max-width: 767px) {
.product_01 > div:first-child{
width: 100%;
}
}

.product_01 > div:last-child > h3{
	font-size:5rem ;
	color: var(--c-accent);
	font-weight: bold;
	margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
.product_01 > div:last-child > h3{
	font-size:2.4rem ;
	margin-bottom: 20px;
}
}
.product_01 > div:last-child > h3 > span{
	font-size: 1.6rem;
	font-weight: normal
}
@media screen and (max-width: 767px) {
.product_01 > div:last-child > h3 > span{
	font-size: 1.4rem;
	font-weight: normal
}
}
.product_01 > div:first-child > img{
width: 80%;
position: absolute;
   top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}
@media screen and (max-width: 767px) {
.product_01 > div:first-child > img{
width: 90%;
position: static;
transform: none;
}
}
.product_01.pompei{
	flex-direction:row;
}
.product_01.pompei > div:first-child{
background: var(--c-bg);
}
.product_01.pompei > div:first-child > img{
width: 60%;
}

.product_01.valchiria > div:first-child{
background: #F8F8F8;
}
.product_01.valchiria > div:first-child > img{
width: 80%;
}
@media screen and (max-width: 767px) {
.product_01.valchiria > div:last-child{
padding: 20px 0 0;
}
}



.osusume{
	display: flex;
	padding: 20px;
	background: #F0F0F0;
	gap:20px;
}
@media screen and (max-width: 767px) {
.osusume{
align-items: center;
	}
}

.osusume > p:first-child{
	background:var(--c-dark);
	color: var(--c-white);
	padding: 15px;
	margin-left: -30px;
}
@media screen and (max-width: 767px) {
.osusume > p:first-child{
	padding:5px;
	text-align: center;
	line-height: 1.4;
}
}
.f_40{
	font-size: 4rem;
}
@media screen and (max-width: 767px) {
.f_40{
	font-size:2.4rem;
}
}
.mb150{
	margin-bottom: 150px;
}
@media screen and (max-width: 767px) {
.mb150{
	margin-bottom: 80px;
}
}

/*商品詳細
--------------------------------------------*/
.bg_product{
	position:relative;
	color: var(--c-white);
	padding:0 10% 150px;
}
@media screen and (max-width: 767px) {
.bg_product{
	padding:0 20px 60px;
}
}
.bg_product::after{
	content: "";
	background: var(--c-dark);
	width: 100%;
	height: 85%;
	position:absolute;
	bottom: 0;
	left: 0;
	z-index: -1;
	
}
@media screen and (max-width: 767px) {
.bg_product::after{
	height: 88%;	
}
}
.izzo_img{
	width:60%;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
.izzo_img{
	width:90%;
	margin: 0 auto;
}
}
.pompei_img{
	width:40%;
	margin: 20px auto 0;
}
@media screen and (max-width: 767px) {
.pompei_img{
	width:60%;
}
}
.valchiria_img{
	width:50%;
	margin: 0 auto;
}
@media screen and (max-width: 767px) {
.valchiria_img{
	width:70%;
}
}
.ttl_product{
	color:var(--c-accent);
}
.ttl_product > h2{
font-size: 6rem;
font-weight: bold;
	line-height: 1.2;
}
@media screen and (max-width: 767px) {
.ttl_product > h2{
font-size: 4rem;
}
}
.bg_product > h3{
	font-size: 4.2rem;
	position: relative;
	padding: 35px 0;
	margin: 20px 0 60px
}
@media screen and (max-width: 767px) {
.bg_product > h3{
	font-size: 2.4rem;
	padding: 0;
	margin: 20px 0 60px
}
}
.bg_product > h3::after{
    position: absolute;
	content: "";
    left: 0;
	top: 0;
	background-image:url("img/izzo/txt.webp");
	width:100%;
	height:100%;
    background-size: 100%;
    background-repeat: no-repeat;	
}

.product_list_01{
	display: flex;
	gap:40px 80px;
	position: relative;
	flex-wrap: wrap;
	margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
.product_list_01{
flex-wrap: wrap;
gap:20px;
margin-bottom: 60px;
}
}
.product_list_01::before{
content: "";
background: var(--c-white);
width: 1px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 50%;
}
@media screen and (max-width: 767px) {
.product_list_01::before{
content: none;
}	
}
.product_list_01 > li{
	width: calc(50% - 40px);
	border-bottom: var(--c-white) 1px solid;
	padding-bottom: 40px;
	display: flex;
	gap:30px;
	align-items: center;
}
@media screen and (max-width: 767px) {
.product_list_01 > li{
	width:100%;
	border-bottom: var(--c-white) 1px solid;
	padding-bottom: 20px;
	gap:15px;
}
}
.product_list_01 > li > figure{
	width: 100px;
}
@media screen and (max-width: 767px) {
.product_list_01 > li > figure{
	width: 50px;
}	
}
.product_list_01 > li > div{
	width: calc(100% - 130px);
	text-align: left;
}
@media screen and (max-width: 767px) {
.product_list_01 > li > div{
	width: calc(100% - 65px);
}
}
.product_list_01 > li > div > h4{
	font-size: 2.4rem;
	font-weight: bold;
}
@media screen and (max-width: 767px) {
.product_list_01 > li > div > h4{
	font-size: 1.8rem;
	line-height: 1.4;
	margin-bottom: 10px;
}
}
.product_list_01 > li > div > h4 > span{
	font-size: 1.6rem;
	font-weight: normal;
}
@media screen and (max-width: 767px) {
.product_list_01 > li > div > h4 > span{
	font-size: 1.2rem;
}
}

.product_spec{
	padding: 150px 10%;
}
@media screen and (max-width: 767px) {
.product_spec{
	padding: 60px 20px;
}
}
.figure_box{
	display:flex;
	gap:30px;
}
@media screen and (max-width: 767px) {
.figure_box{
	gap:2%;
}
}
.figure_box > figure{
width: calc(50 - 15px);
}

.product_list_02{
	display: flex;
	gap:30px;
	margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
.product_list_02{
flex-wrap: wrap;
gap:15px;
margin-bottom: 60px;
}
}
.product_list_02 > li{
	width: calc(33.333% - 20px);
	text-align: center;
}
@media screen and (max-width: 767px) {
.product_list_02 > li{
	width:100%;
}
}
.product_list_02 > li > p:nth-child(1){
	color: var(--c-accent);
	font-weight: bold;
	font-size:4rem;
	line-height: 1.6;
}
@media screen and (max-width: 767px) {
.product_list_02 > li > p:nth-child(1){
	font-size:2.4rem;
}
}
.product_list_02 > li > p:nth-child(2){
	font-size:2rem;
	margin-bottom: 30px;
}
@media screen and (max-width: 767px) {
.product_list_02 > li > p:nth-child(2){
	font-size:1.6rem;
	margin-bottom:15px;
}
}

.spec_box{
	display:flex;
	gap:40px;
}
@media screen and (max-width: 767px) {
.spec_box{
flex-wrap: wrap;
gap:20px;
}
}
.spec_box > div{
width: calc(50% - 20px);
}
@media screen and (max-width: 767px) {
.spec_box > div{
width:100%;
}
}
.spec_box h4{
	background: #EDEEEF;
	padding: 15px;
	font-size: 2.4rem;
	font-weight: bold;
}
@media screen and (max-width: 767px) {
.spec_box h4{
	font-size: 2.0rem;
}	
}

.spec_box h4 > span{
	font-size: 1.6rem;
	font-weight: normal;
	margin-left: 10px;
	color: #888888;
}
@media screen and (max-width: 767px) {
.spec_box h4 > span{
	font-size: 1.4rem;
}
}

.spec_box ul > li{
	text-indent: -1em;
	padding-left: 1em;
}

.spec_box dl{
	border-bottom: var(--c-gray) 1px solid;
	display: flex;
}
.spec_box dl > dt{
	width: 30%;
	padding: 15px;
	box-sizing: border-box;
	border-right: var(--c-gray) 1px solid;
}
.spec_box dl > dd{
	width: 70%;
	padding: 15px;
	box-sizing: border-box;
}
.spec_box dl > dd.color{
	display: flex;
	gap:10px;
}
.spec_box dl > dd.color > div{
	width: 80px;
	font-size: 1.4rem;
	text-align: center;
}
.spec_box dl > dd.color > div > p{
	margin-top: -10px;
}

.product_spec{
	padding: 150px 10%;
}
@media screen and (max-width: 767px) {
.product_spec{
	padding: 60px 20px;
}
}
.product_step{
	position: relative;
	padding: 150px 0;
  	background: var(--c-bg);
}
@media screen and (max-width: 767px) {
.product_step{
	padding: 60px 20px 0;
}
}
/*
.product_step::after{
	content: "";
	position: absolute;
	background: var(--c-bg);
	width: 100%;
	height: 80%;
	z-index: -1;
	top: 0;
	left:0;
}
@media screen and (max-width: 767px) {
.product_step::after{
	height: 98%;
}
}*/
.product_step ul{
	display: flex;
	gap:20px;
	margin-bottom: 100px;
}
@media screen and (max-width: 767px) {
.product_step ul{
flex-wrap: wrap;
gap:10px;
margin-bottom: 60px;
}
}

.product_step ul > li{
	width: calc(25% - 15px);
	background: var(--c-white);
	padding: 20px;
	box-sizing: border-box;
	position: relative;
	text-align: center;
}
@media screen and (max-width: 767px) {
.product_step ul > li{
	width: 100%;
	padding: 15px;
}
}
.product_step ul > li > p:nth-child(1){
	background: var(--c-dark);
	width: 50px;
	height: 50px;
	text-align: center;
	color: var(--c-white);
	font-size: 2.2rem;
	position: absolute;
	top: 0;
	left: 0;
	padding: 15px 0;
	line-height: 1;
}
@media screen and (max-width: 767px) {
.product_step ul > li > p:nth-child(1){
	width: 40px;
	height: 40px;
	font-size: 1.8rem;
	padding: 10px 0;
}	
}
.product_step ul > li > figure{
	width: 160px;
	margin: 0 auto 20px;
}
@media screen and (max-width: 767px) {
.product_step ul > li > figure{
	width: 120px;
	margin: 0 auto 20px;
}
}

.product_step ul > li > h4{
font-size: 2rem;
	margin-bottom: 15px;
	line-height: 1.4;
min-height: 2.6em;  /* 2行分くらい */
	display: flex;            /* 追加 */
	align-items: center;      /* 追加：上下中央 */
	justify-content: center;  /* 追加：左右中央（テキスト中央寄せ維持用）*/
}
@media screen and (max-width: 767px) {
.product_step ul > li > h4{
font-size: 1.8rem;
margin-bottom: 10px;
min-height: auto;
}	
}
.product_step ul > li > p:last-child{
	font-size: 1.4rem;
}
.product_step p > a{
	background:var(--c-dark);
	padding: 20px;
	color: var(--c-white);
	width: 100%;
	box-sizing: border-box;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	display: block;
	position: relative;
}
@media screen and (max-width: 767px) {
.product_step p > a{
	font-size: 1.6rem;
	padding: 15px;}	
}
.product_step p > a:hover{
	opacity: 1;
}
/* 黒い正方形アイコン */
.product_step p > a .icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 30px;
  background: var(--c-white);
	position: absolute;
	top: 25px;
	right: 40px;
}
@media screen and (max-width: 767px) {
.product_step p > a .icon {
 	top: 15px;
	right: 15px;
  width: 40px;
}	
}

/* 画像矢印のラッパー */
.product_step p > a .svgWrapper {
  position: relative;
  width: 16px;
  height: 13px;
  overflow: hidden;
}
/* img も svg と同じように扱う */
.product_step p > a .svgWrapper .svg, .product_step p > a .svgWrapper .svg-hover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain; /* 画像の縦横比をキープ */
  transition: transform 0.4s cubic-bezier(0.65, 0, 0.35, 1);
}
/* 水平方向のスライド */
.product_step p > a .svg {
  transform: translateX(0);
}
.product_step p > a .svg-hover {
  transform: translateX(-110%);
}
.product_step p > a:hover .svg {
  transform: translateX(110%);
}
.product_step p > a:hover .svg-hover {
  transform: translateX(0);
}
/*FAQ
-----------------------------------------------------*/

.faq-item {
    border-bottom: 1px solid var(--c-border);
  }

  .faq-item:first-child {
    border-top: 1px solid var(--c-border);
  }

  /* 質問エリア（クリック可能なヘッダー） */
  .faq-question {
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 15px;
    font-family: inherit;
    text-align: left;
    transition: 0.25s ease;
  }
@media screen and (max-width: 767px) {
  .faq-question {
    padding: 20px 0;
    gap: 10px;
  }	
}

  /* Qアイコン（左の丸い円） */
  .q-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--c-navy);
    color: var(--c-white);
    display: flex;
    align-items: center;
    justify-content: center;
font-family: "Marcellus", serif;
    font-size: 3rem;
    font-weight: 500;
}
@media screen and (max-width: 767px) {
  .q-icon {
    width: 30px;
    height: 30px;
    font-size: 1.6rem;
}	
}

  /* 質問テキスト */
  .question-text {
    flex: 1;
    font-size: 2rem;
	  color: var(--c-black);
  }
@media screen and (max-width: 767px) {
  .question-text {
    font-size: 1.6rem;
  }
}
  /* +/- アイコン */
  .toggle-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    position: relative;
  }
@media screen and (max-width: 767px) {
  /* +/- アイコン */
  .toggle-icon {
    width: 14px;
    height: 14px;
  }
}
  /* 横棒（常に表示） */
  .toggle-icon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--c-navy);
    transform: translateY(-50%);
  }

  /* 縦棒（閉じている時のみ表示） */
  .toggle-icon::after {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    background: var(--c-navy);
    transform-origin: center;
    transform: translateX(-50%) rotate(0deg);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* 開いている時：縦棒を回転させてフェードアウト */
  .faq-item.is-open .toggle-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
  }

  /* 答えのエリア（高さをアニメーション） */
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .faq-answer-inner {
    padding: 0 20px 20px 100px;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.35s ease 0.05s,
                transform 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.05s;
  }
@media screen and (max-width: 767px) {
 .faq-answer-inner {
    padding: 0 20px 20px 40px;
  }
}
  /* 開いた時：中身をフェードイン＆少し下にスライド */
  .faq-item.is-open .faq-answer-inner {
    opacity: 1;
    transform: translateY(0);
  }

/* トップページ用 FAQ */
.top_faq {
  margin-bottom:60px;
}

.top_faq .faq-item:first-child {
  border-top: none;
}
.top_faq .faq-question {
  padding: 30px 0;
  gap: 20px;
}
.top_faq .q-icon,
.top_faq .a-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  color: var(--c-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
}
.top_faq .q-icon {
  background: var(--c-green);
}
.top_faq .a-icon {
  background: var(--c-blue);
  opacity: .6;
}
.top_faq .question-text {
  font-size: 2rem;
  letter-spacing: .1em;
  text-align: left;
}
@media screen and (max-width: 767px) {
.top_faq .question-text {
  font-size: 1.6rem;
}
}
/* +/- ボタン（四角） */
.top_faq .toggle-icon {
  width: 30px;
  height: 30px;
  background: #F5F7B3;
  transition: background .3s;
}
.top_faq .toggle-icon::before,
.top_faq .toggle-icon::after {
  background: var(--c-black);
}
.top_faq .toggle-icon::before {
  left: 50%;
  width: 14px;
  transform: translate(-50%, -50%);
}
.top_faq .toggle-icon::after {
  top: 50%;
  height: 14px;
  transform: translate(-50%, -50%) rotate(0deg);
}
.top_faq .faq-item.is-open .toggle-icon {
  background: var(--c-gray-pale);
}
.top_faq .faq-item.is-open .toggle-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
/* 回答 */
.top_faq .faq-answer-inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 0 50px 30px 0;
}
.top_faq .answer-text {
  flex: 1;
  line-height: 1.8;
  letter-spacing: .1em;
  color: var(--c-black);
  padding-top: 2px;
  text-align: left;
}
@media screen and (max-width: 767px) {
  .top_faq .answer-text {
    font-size: 1.4rem;
  }
}
.top_faq .answer-text p {
  margin: 0;
}
@media screen and (max-width: 767px) {
  .top_faq .faq-question {
    padding: 20px 0;
    gap: 10px;
  }
  .top_faq .q-icon,
  .top_faq .a-icon {
    width: 26px;
    height: 26px;
    font-size: 1.2rem;
  }
  .top_faq .question-text {
    font-size: 1.4rem;
  }
  .top_faq .toggle-icon {
    width: 24px;
    height: 24px;
  }
  .top_faq .toggle-icon::before {
    width: 10px;
  }
  .top_faq .toggle-icon::after {
    height: 10px;
  }
  .top_faq .faq-answer-inner {
    gap: 10px;
    padding: 0 0 20px 0;
  }
}

/* 会社概要
---------------------------------------------------------*/
.ttl_en{
	font-size: 6rem !important;
	line-height: 1;
	font-family: "Marcellus", serif
}
@media screen and (max-width: 767px) {
.ttl_en{
	font-size: 3.2rem !important;
}
}
.company_01{
	background: url("img/company/bg_01.webp") center top no-repeat;
	padding: 150px 0 250px;
	margin-top: -182px;
	background-size: cover !important;
}
@media screen and (max-width: 767px) {
.company_01{
	background: url("img/company/sp_bg_01.webp") center top no-repeat;
	padding: 100px 20px 100px;
	margin-top: -115px;
}
}
.company_01 > div{
	display:flex;
	gap:60px;
	align-items: flex-start;
	font-size: 2rem;
}
@media screen and (max-width: 767px) {
.company_01 > div{
	gap:30px;
	font-size: 1.6rem;
}
}
.company_01 > div > h3{
	width: 40px;
	background: var(--c-white);
	font-size: 2rem;
	text-align: center;
	 writing-mode: vertical-rl;
	padding: 10px 0;
	box-sizing: border-box;
	letter-spacing: 5px;
}
@media screen and (max-width: 767px) {
.company_01 > div > h3{
	width: 25px;
	font-size: 1.4rem;
}
}
.company_01 > div > p{
	font-size: 2rem;
}

.company_01 > div > div{
	width: 55%;
	position: relative;
}
@media screen and (max-width: 767px) {
.company_01 > div > div{
	width: calc(100% - 55px);
	position: relative;
}
}
.company_01 > div > div > .name{
	position: absolute;
	bottom: -40px;
	right: 0;
}
@media screen and (max-width: 767px) {
.company_01 > div > div > .name{
	width: 130px;
	bottom: -60px;
	right: 0;
}
}
.company_02{
	display: flex;
	padding: 200px 10%;
	justify-content: space-between;
	background:var(--c-dark);
	align-items: flex-start;
}
@media screen and (max-width: 767px) {
.company_02{
flex-wrap: wrap;
padding: 60px 20px;
	gap:20px;
}
}
.company_02 > div:nth-child(1){
	width: 40%;
	position: relative;
	margin-top: -250px;
}
@media screen and (max-width: 767px) {
.company_02 > div:nth-child(1){
	width: 100%;
	margin-top: 0;
}
}
.company_02 > div:nth-child(1) > img{
	height: 980px;
	width: 100%;
	object-fit: cover;
}
@media screen and (max-width: 767px) {
.company_02 > div:nth-child(1) > img{
	height: 370px;
}
}
.company_02 > div:nth-child(2){
	width: 50%;
	text-align: left;
	background: var(--c-white);
	padding: 80px;
	box-sizing: border-box;
	position: relative;
}
@media screen and (max-width: 767px) {
.company_02 > div:nth-child(2){
	width: 100%;
	padding: 40px 20px 40px 40px;
}
}
.company_02 > div:nth-child(2) > h3{
	width: 40px;
	background: var(--c-white);
	font-size: 2rem;
	text-align: center;
	 writing-mode: vertical-rl;
	padding: 10px 0;
	box-sizing: border-box;
	border: var(--c-dark) 1px solid;
	position: absolute;
	top: 80px;
	left: -20px;
	letter-spacing: 5px;
}
@media screen and (max-width: 767px) {
.company_02 > div:nth-child(2) > h3{
	width: 25px;
	font-size: 1.4rem;
	top: 40px;
	left: -10px;
}	
}
.company_02 > div:nth-child(2) > p{
	font-size: 2rem;
}
@media screen and (max-width: 767px) {
.company_02 > div:nth-child(2) > p{
	font-size: 1.6rem;
}
}

.company_03{
	padding: 150px 0;
}
@media screen and (max-width: 767px) {
.company_03{
	padding: 60px 20px;
}
}
.dl_box{
	position: relative;
	border-top: var(--c-gray) 1px solid;
}
.dl_box::before{
	content: "";
	background:var(--c-black);
	width: 25px;
	height: 1px;
	top: -1px;
	left: 0;
	position: absolute;
}
.dl_box dl{
	display:flex;
	border-bottom: var(--c-gray) 1px solid;
	position: relative;
}
@media screen and (max-width: 767px) {
.dl_box dl{
flex-wrap: wrap;
}
	
}
.dl_box dl::before{
	content: "";
	background:var(--c-black);
	width: 25px;
	height: 1px;
	bottom: -1px;
	left: 0;
	position: absolute;
}
.dl_box dl > dt{
width: 30%;
	padding: 30px 0;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.dl_box dl > dt{
width: 100%;
	padding: 20px 0 10px;
	font-weight: 600;
}
}
.dl_box dl > dd{
width: 70%;
	padding: 30px 0;
	box-sizing: border-box;
}
@media screen and (max-width: 767px) {
.dl_box dl > dd{
width: 100%;
	padding: 0 0 20px;
}
}

.company_04{
	background:var(--c-bg);
	padding: 100px 0;
	display: flex;
	gap:100px;
}
@media screen and (max-width: 767px) {
.company_04{
	padding: 60px 20px;
flex-wrap: wrap;
gap:30px;
}
}
.company_04 > div:nth-child(1){
	width: 50%;
}
@media screen and (max-width: 767px) {
.company_04 > div:nth-child(1){
	width: 100%;
}
}
.company_04 > div:nth-child(1) img{
	width: 100%;
	height: 750px;
	object-fit: cover;
}
@media screen and (max-width: 767px) {
.company_04 > div:nth-child(1) img{
	height: 380px;
}
}

.company_04 > div:nth-child(2){
	width: 500px;
text-align: left;
	font-size: 2rem;
}
@media screen and (max-width: 767px) {
.company_04 > div:nth-child(2){
	width:100%;
	font-size: 1.6rem;
}
}
.company_05{
	background: var(--c-bg);
	position: relative;
	padding: 100px 0;
	color: var(--c-white);
}
@media screen and (max-width: 767px) {
.company_05{
	padding: 60px 20px;
}
}
.company_05::after{
	content: "" / "珈琲講座";
	background-image:url("img/company/bg_02.webp");
	width: 100%;
	height: 70%;
	position: absolute;
	top: 0;
	left: 0;
	background-size: cover;
}
@media screen and (max-width: 767px) {
.company_05::after{
	background-image:url("img/company/sp_bg_02.webp");
}
}
.company_05 > div{
	position: relative;
	z-index: 1;
}
.company_05 > div > ul{
	background: var(--c-white);
	padding: 60px;display: flex;
	flex-wrap: wrap;
	gap:5px;
}
@media screen and (max-width: 767px) {
.company_05 > div > ul{
	padding: 30px;
	flex-wrap: wrap;
	gap:5px;
}
}

.company_05 > div > ul > li{
	color: var(--c-black);
	width:calc(50% - 2.5px);
}
@media screen and (max-width: 767px) {
.company_05 > div > ul > li{
	width:100%;
}
}
/*cafemap
-----------------------------------------------------*/
.cafe_list{
	display: flex;
	gap:100px 30px;
	flex-wrap: wrap;
}
@media screen and (max-width: 767px) {
.cafe_list{
	gap:40px;
}	
}
.cafe_list > li{
	width: calc(50% - 15px);
}
@media screen and (max-width: 767px) {
.cafe_list > li{
	width:100%;
border-bottom: var(--c-dark) 1px dotted;
padding-bottom: 40px;
}
}

.cafe_list > li > div > dl{
	display: flex;
	border-bottom: var(--c-gray) 1px solid;
}
.cafe_list > li > div > dl > dt{
	width: 25%;
	padding: 20px 0;
}
.cafe_list > li > div > dl > dd{
	width: 75%;
	padding: 20px 0;
}

.cafe_list > li iframe {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}





.blog_img {
  text-align: center;
	margin-bottom: 60px;
}
@media screen and (max-width : 767px) {
.blog_img {
	margin-bottom: 30px;
}
}
#toc_container{
	background: var(--c-bg2);
	border: var(--c-line) 1px solid;
	padding: 40px;
	margin-bottom: 60px;
}
@media screen and (max-width : 767px) {
#toc_container{
	padding: 20px;
	margin-bottom: 30px;
}
}
.toc_title{
	text-align: center;
	font-weight: 500;
	margin-bottom: 20px !important;
	font-size: 1.8rem;
}
@media screen and (max-width : 767px) {
.toc_title{
	font-size: 1.6rem;
}
}

.toc_list > li{
	font-size:1.4rem;
	margin-bottom: 10px;
}
.toc_list > li:last-child{
	margin-bottom: 0;
}
.toc_list > li > ul{
	padding-left: 1em;
}
.wp-pagenavi {
  clear: none;
  display: flex;
  justify-content: center;
  gap: 20px;
}
.wp-pagenavi a:hover{
	font-weight: bold;
}
.wp-pagenavi span.current {
  border: none;
  color: var(--c-white);background: var(--c-dark);
	width: 45px;
	height: 45px;
	text-align: center;
	border-radius: 50%;
padding: 8px 5px;
}
.wp-pagenavi a, .wp-pagenavi span {
  border: none !important;
}

/*　お問い合わせ
---------------------------------*/

.contact_content{
	background: var(--c-bg);
	padding: 0 0 150px;
}
@media screen and (max-width: 767px) {
.contact_content{
	padding: 0 20px 60px;
}	
}
.contact_form dl{
	margin-bottom: 30px;
}
.contact_form dl > dt{
	display: flex;
	gap:50px;
	align-items: center;
	margin-bottom: 10px;
}
@media screen and (max-width: 767px) {
.contact_form dl > dt{
	gap:5px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
}
.contact_form dl > dt > p:nth-child(1){
	font-size: 1.8rem;
	font-weight: 500;
}
@media screen and (max-width: 767px) {
.contact_form dl > dt > p:nth-child(1){
	font-size: 1.6rem;
}
}
.contact_form dl > dt > p:nth-child(1) > span{
	font-size: 1.4rem;
	color: var(--c-accent);
}
.contact_form dl > dt > p:nth-child(2){
	font-size: 1.4rem;
	font-weight:normal;
}
@media screen and (max-width: 767px) {
.contact_form dl > dt > p:nth-child(2){
	font-size: 1.2rem;
}	
}
.contact_form .check .wpcf7-form-control{
	display: flex;
	gap:30px;
}
@media screen and (max-width: 767px) {
.contact_form .check .wpcf7-form-control{
flex-wrap: wrap;gap:10px;
}
	
}
.contact_form .wpcf7-list-item{
	margin: 0;
}
@media screen and (max-width: 767px) {
.contact_form .wpcf7-list-item{
width: 100%;}
}

.contact_form input, .contact_form textarea {
  box-sizing: border-box;
  padding: 20px;
	border-radius: 5px;
	border: var(--c-gray) 1px solid;
}
@media screen and (max-width: 767px) {
.contact_form input, .contact_form textarea {
  padding: 15px;
}
}
.contact_form input[type=text], .contact_form input[type=email], .contact_form input[type=tel] {
  width: 100%;
}
.contact_form textarea {
  width: 100%;
  height: 250px;
}
@media screen and (max-width: 767px) {
  .contact_form textarea {
    height: 150px;
  }
}

.contact_form select option {
  line-height: 2 !important;
  font-size: 1.6rem;
}
.acceptance{
	text-align: center;
}
.acceptance a{
	color:var(--c-accent);
	text-decoration: underline;
}
.btn_send input {
  background: var(--c-dark);
  display: block;
  color: var(--c-white);
  border: var(--c-dark) 1px solid;
  padding: 15px;
	box-sizing: border-box;
  text-align: center;
  font-size: 2rem;
  letter-spacing: 0.1em;
  margin: 0 auto;
  width: 450px;
	border-radius: 0;
}
@media screen and (max-width: 767px) {
.btn_send input {
  font-size: 1.6rem;
  width: 100%;
}
}
.btn_send input:hover {
  cursor: pointer;
}
/* news
------------------------------------*/

.content_area {
  display: flex;
  gap: 80px;
}
@media screen and (max-width : 767px) {
  .content_area {
    flex-wrap: wrap;
    gap: 40px;
  }
}
.content_area > div:first-child {
  width: 65%;
}
.content_area > div:last-child {
  width: calc(35% - 80px);
}
@media screen and (max-width : 767px) {
  .content_area > div:first-child, .content_area > div:last-child {
    width: 100%;
  }
}/*
.news_area {
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
@media screen and (max-width : 767px) {
  .news_area {
    gap: 0px;
  }
}
.news_area > li {
  width: calc(50% - 30px);
  padding-bottom: 15px;
  margin-bottom: 20px;
  border-bottom: var(--c-gray) 1px solid;
}
@media screen and (max-width : 767px) {
  .news_area > li {
    width: 100%;
  }
}
.news_area > li > a {
  display: flex;
  gap: 30px;

}
@media screen and (max-width : 767px) {
  .news_area > li > a {
    gap: 15px;
  }
}
.news_area > li > a > figure {
  width: 200px;
}
@media screen and (max-width : 767px) {
  .news_area > li > a > figure {
    width: 140px;
  }
}
.news_area > li > a > div {
  width: calc(100% - 230px);
}
@media screen and (max-width : 767px) {
  .news_area > li > a > div {
    width: calc(100% - 140px);
  }
}*/
.news_list > li > a{
  display: flex;
  gap: 40px;
  line-height: 1.6;
  border-bottom: var(--c-gray) 1px solid;
padding-bottom: 30px;
margin-bottom: 30px;
}

@media screen and (max-width : 767px) {
  .news_list > li > a {
    gap: 20px;
	  flex-wrap: wrap;
  }
}
.news_list > li > a > figure{
	width: calc(30% - 40px);
}
@media screen and (max-width : 767px) {
.news_list > li > a > figure{
	width: 100%;
}
}
.news_list > li > a > figure > img{
	height: 200px;
	width: 100%;
	object-fit: cover;
}
@media screen and (max-width : 767px) {
.news_list > li > a > figure > img{
	height: 180px;
}
}
.news_list > li > a > div{
	width: 70%;
	
}
@media screen and (max-width : 767px) {
.news_list > li > a > div{
	width: 100%;
}
}
.news_list > li > a > div > p:nth-child(1){
color: var(--c-accent);
margin-bottom: 30px;
}
@media screen and (max-width : 767px) {
.news_list > li > a > div > p:nth-child(1){
margin-bottom: 15px;
}
	
}
.news_list > li > a > div > p:nth-child(2){
	font-size: 1.8rem;
	font-weight: 500;
	margin-bottom: 20px;
}
@media screen and (max-width : 767px) {
.news_list > li > a > div > p:nth-child(2){
	font-size: 1.6rem;
	margin-bottom: 10px;
}
}

.blog_list > li > a{
  display: flex;
  gap: 40px;
  line-height: 1.4;
  border-bottom: var(--c-gray) 1px solid;
padding-bottom: 30px;
margin-bottom: 30px;
}

@media screen and (max-width : 767px) {
  .blog_list > li > a {
    gap: 20px;
	  flex-wrap: wrap;
  }
}
.blog_list > li > a > figure{
	width: calc(40% - 40px);
}
@media screen and (max-width : 767px) {
.blog_list > li > a > figure{
	width: 100%;
}
}
.blog_list > li > a > figure > img{
	height: 160px;
	width: 100%;
	object-fit: cover;
}
@media screen and (max-width : 767px) {
.blog_list > li > a > figure > img{
	height: 180px;
}
}
.blog_list > li > a > div{
	width: 60%;
	
}
@media screen and (max-width : 767px) {
.blog_list > li > a > div{
	width: 100%;
}
}
.blog_list > li > a > div > p:nth-child(1){
color: var(--c-accent);
margin-bottom: 20px;
}
.blog_list > li > a > div > p:nth-child(2){
	background: var(--c-line);
	font-size: 1.4rem;
	line-height: 1;
	margin-bottom: 10px;
	padding: 8px;
	display: inline-block;
}
.blog_list > li > a > div > p:nth-child(3){
	font-size: 1.8rem;
	font-weight: 500;
}
.side_ttl {
  background: var(--c-dark);
	text-align: center;
	font-size: 1.8rem;
  padding: 10px;
  color: var(--c-white);
}
.cate > li{
	border-bottom: var(--c-dark) 1px solid;
	padding-bottom: 15px;
	margin-bottom: 15px;
}
.day{
	color: var(--c-accent);
	margin-bottom: 10px;
}
.category{
	background:var(--c-line);
	font-size: 1.4rem;
	line-height: 1;
	padding: 10px;
	display: inline-block;
	margin-bottom: 15px;
}
#wysi h1 {
  font-size: 3rem;
  font-weight: bold;
  border-bottom: var(--c-dark) 1px solid;
  padding-bottom: 15px;
  margin-bottom: 15px;
  line-height: 1.4;
  margin-top: 60px;
}
@media screen and (max-width : 767px) {
#wysi h1 {
  font-size: 2.4rem;
   margin-top: 40px;
}	
}
#wysi h2 {
  font-size: 2.4rem;
  font-weight: bold;
  border-bottom: var(--c-dark) 1px solid;
  margin-top: 60px;
	padding-bottom: 15px;
  margin-bottom: 15px;
  line-height: 1.4;
}
@media screen and (max-width : 767px) {
#wysi h2 {
  font-size: 2rem;
  margin-top: 40px;
}
}
#wysi h3 {
  font-size: 2rem;
  font-weight: bold;
  border-left: var(--c-dark) 4px solid;
  padding-left: 20px;
  margin-top: 40px;
  margin-bottom: 15px;
  line-height: 1.4;
}
@media screen and (max-width : 767px) {
#wysi h3 {
  font-size: 1.8rem;
  padding-left: 15px;
  margin-top: 30px;
}
}
#wysi h4 {
  font-size: 1.8rem;
  font-weight: bold;
  margin-top: 40px;
  line-height: 1.4;
  margin-bottom: 15px;
}
@media screen and (max-width : 767px) {
#wysi h4 {
  font-size: 1.6rem;
  margin-top: 30px;
}
	
}
#wysi h5 {
  font-weight: bold;
  line-height: 1.4;
  margin-bottom: 15px;
  margin-top: 30px;
}
#wysi p {
  margin-bottom: 10px;
}

#wysi dl{margin-bottom: 15px;}
#wysi dl > dt{font-weight: bold;text-indent: -2.5em;padding-left: 2.5em;}
#wysi dl > dd{margin-left: 2.5em;}
#wysi ul > li{list-style: disc;margin-left: 2.5em;}
#wysi ul.toc_list > li{list-style: none;margin-left: 0;}
/* ニュース記事ページネーション */
.news-pagination {
	width: 100%;
    max-width: 800px;
	margin: 100px auto 0;
}
@media screen and (max-width: 767px) {
.news-pagination {
	margin: 60px auto 0;
}
}
 
.news-pagination__inner {
    display: flex;
}
.news-pagination__link {
	width: 50%;
    display: flex;
    align-items: center;
    padding: 40px 20px;
    box-sizing: border-box;
	border: var(--c-dark) 1px solid;
}
 
.news-pagination__link:hover {
    background-color: var(--c-dark);
	color: var(--c-white);
	opacity: 1 !important;
}
 
/* 前の記事（左側） */
.news-pagination__link--prev {
    justify-content: flex-start;
}
 
.news-pagination:not(.news-pagination--single) .news-pagination__link--prev {
    margin-right: -1px;
}
 
.news-pagination__link--prev .news-pagination__arrow {
    margin-right: 16px;
}
 
/* 次の記事（右側） */
.news-pagination__link--next {
    justify-content: flex-end;
    text-align: right;
}
 
.news-pagination__link--next .news-pagination__arrow {
    margin-left: 16px;
}
 
/* タイトルの省略 */
.news-pagination__title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: calc(100% - 30px);
}
 
/* スマホ対応 */
@media screen and (max-width : 767px) {
    .news-pagination__link {
        font-size: 1.2rem;
        padding:20px 10px;
    }
}
.btn_01 a {
  display: block;
  width: 300px;
  margin: 0 auto;
  box-sizing: border-box;
  background: var(--c-gray-dark);
  border: var(--c-gray-dark) 1px solid;
  padding: 10px 15px;
  text-align: center;
  color: var(--c-white);
}

/* リキャプチャ非表示　フォーム下にテキストで注釈表記する事 */
.grecaptcha-badge { visibility: hidden; }
.recaptcha_chu{margin: 30px 0;font-size: 1.2rem;}
.recaptcha_chu a{border-bottom: 1px solid #000;}