/*
Theme Name:Mangyoukensetsu
Template:lexa-theme
Theme URI: https://lexa.co.jp
Author: Lexa inc.
Author URI: https://lexa.co.jp
Version: 1.0.0
*/
/**********************
- ROOT
- BASE
- GENERAL
  -- FONT
  -- ALIGN
  -- FLEX
  -- LIST
  -- OTHER
- HEADER
- BREADCRUMB
- CONTAINER
- HEADING
- BUTTON
- FOOTER
- ARCHIVE
- SINGLE
- CONTACT
- FRONT
- PAGE PARTS
- LOADING
- COLOR
- MARGIN
- ANIMATION
- RESPONSIVE
***********************/

/**********************
* ブレイクポイント
* 560px/960px
**********************/


/*********************
ROOT
**********************/
:root {
   --base: #F1F1F1;
   --bg-1: #E8F6F9;
   --bg-2: #FFFBBF;
   --text-main: #2B2B2B;
   --text-sub: #E6833A;

   --main-color-1: #2F2E41;
   --main-color-2: #111111;
   --main-color-3: #F1F1F1;
   --sub-color-1: #2B2B2B;
   --sub-color-2: #fff;
   --accent-color-1: #E6833A;
   /* --accent-color-2: #CF1531; */
   --gradient: linear-gradient(70deg, #5DC5F7, #FA966B);

   --font-jp: 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   --font-en: 'Poppins', 'sans-serif','Oswald', 'Noto Sans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic';
   --font-material: 'Material Icons Round';
   --light: 300;
   --normal: 400;
   --bold: 700;

   --container: calc(1920px + 6%);
   --container-side: 3%;
   --container-l: 1200px;
   --container-m: 960px;
   --container-s: 660px;
   --container-ss: 480px;

}


/*********************
BASE
*********************/
html {
   font-size: 62.5%;
}

body {
   background-color: var(--base);
   color: var(--text-main);
   font-family: var(--font-jp);
   font-weight: var(--normal);
   font-size: 1.6rem;
   letter-spacing: .05em;
   line-height: 1.7;
}

section {
   position: relative;
   width: 100%;
}

h1,
h2,
h3 {
   font-weight: var(--normal);
}

p {
   margin: 0 0 1em;
}

a {
   color: var(--main-color-1);
   transition: all 0.3s;
}

a:hover {
   opacity: 0.7;
}

img {
   height: auto;
   border: none;
   line-height: 0;
   vertical-align: bottom;
}

ol,
ul {
	padding: 0;
}

ol li {
   margin: 0 0 1em 1.5em;
}

ul li {
	list-style: none;
}

dl,
dt,
dd {
	margin: 0;
}



@media only screen and (max-width: 560px) {
   body {
      font-size: 1.5rem;
   }

}


/*********************
GENERAL
*********************/

/*FONT*/
.font-en {
   font-family: var(--font-en);
}

.small {
   font-size: .85em;
}

.large {
   font-size: 1.2em;
}

.strong {
   font-weight: var(--bold);
}

.uppercase {
	text-transform: uppercase;
}

.line-heighter,
.line-heighter * {
   line-height: 2.1;
}

.line-heighter p {
   margin: 0 0 2em;
}


/*ALIGN*/
.center {
   text-align: center;
   margin-bottom: 100px;
}

.center > * {
   margin-left: auto;
   margin-right: auto;
}

.left {
   text-align: left;
}

.right {
   text-align: right;
}


/*IMAGE*/
.img-circle {
   border-radius: 50%;
}

.img-radius {
   border-radius: 30px;
}

.img-object {
  padding-top: 66%;
  position: relative;
  overflow: hidden;
}

.img-object>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}


/*FLEX*/
.flex {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.flex-reverse {
   flex-direction: row-reverse;
}

.nowrap {
   flex-wrap: nowrap;
}

.space-around {
   justify-content: space-around;
}

.justify-start {
   justify-content: flex-start;
}

.justify-end {
   justify-content: flex-end;
}

.items-center {
   align-items: center;
}

.cell {
   position: relative;
}

.cell img {
   display: block;
   width: 100%;
}

.cell > *:last-child {
   margin-bottom: 0;
}

.cell--1-2 {
   width: 45%;
}

.cell--1-3 {
   width: 100%;
}

.cell--1-4 {
   width: 23%;
}

.cell--2-3 {
   width: 60%;
}

.cell--3-4 {
   width: 73%;
}


@media only screen and (max-width: 560px) {
   .flex {
      flex-direction: column;
   }

   .cell--1-2,
   .cell--1-3,
   .cell--1-4,
   .cell--2-3,
   .cell--3-4{
      margin-bottom: 1em;
      width: 100%;
   }

   .order0 {
      order: 0;
   }

   .order1 {
      order: 1;
   }
}


/*LIST*/
.list-none {
   list-style: none;
   padding-left: 0;
   margin: 0;
}

.list-dot li {
	list-style: none;
	padding-left: 1em;
	text-indent: -1em;
	margin: 0 0 1em;
}

.list-dot li::before {
   content: '';
   background-color: var(--main-color-2);
   border-radius: 50%;
   display: inline-block;
   width: 9px;
   height: 9px;
   margin-right: .5em;
}


/*OTHER*/
.relative {
   position: relative;
}

.block {
   display: block;
}

.shadow {
   box-shadow: 0 0 1.8rem -1rem rgb(0 0 0 / 27%);
}

.marker {
	background:linear-gradient(transparent 60%, var(--sub-color-2) 60%);
}

.box {
  padding: 30px;
  background-color: #fff;
  border-radius: 15px;
}

.box > *:last-child {
   margin-bottom: 0;
}


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

}

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

}



/*********************
HEADER
*********************/
.header {
   position: sticky;
   top: 0;
   width: 100%;
   z-index: 100;
}
/* 初期状態は透明 */
.header {
   background: transparent;
   transition: background 0.3s ease;
   }

   /* スクロール後に付与するクラス */
   .header.scrolled {
   background: rgba(255, 255, 255, 0.7);
   backdrop-filter: blur(5px); /* ←ガラスっぽさ出したいなら */
}


.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: var(--container);
   padding: 15px var(--container-side);
	margin: 0 auto;
}

.header-title {
	margin: 0;
   width: 40%;
}

#drawer-input {
   display: none;
}

.header-nav-item {
   list-style: none;
}

.header-nav-link {
   color: var(--text-main);
   display: block;
   font-family: var(--font-ja);
   font-size: 1.4rem;
   position: relative;
   text-decoration: none;
}

.header li.btn-contact a {
  background: var(--accent-color-1);   /* アクセントカラー */
   color: #fff !important;
   padding: 8px 16px;
   font-weight: bold;
   transition: 0.3s;
}

.header li.btn-contact a:hover {
  background: #d95120;   /* ホバー時濃くする */
}



@media only screen and (min-width: 961px) {
   .header-nav-list {
      display: flex;
      margin: 0;
      padding: 0;
      align-items: center;
      white-space: nowrap;
   }
	
   .header-nav-item {
		margin: 0 0 0 3.8rem;
   }
}

@media only screen and (max-width: 960px) {
   .header {
      padding: 10px;
   }
	
   #drawer-content {
		background: var(--sub-color-1);
		opacity: 0;
		visibility: hidden;
		overflow: auto;
		position: fixed;
		top: 0;
		left: 0;
		transition: 0.3s ease-in-out;
		height: 100%;
		width: 100%;
		z-index: -1;
   }
	
   #drawer-open {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      position: absolute;
      top: 50%;
      right: 10px;
      height: 25px;
      width: 25px;
      outline: none;
      z-index: 1000;
      transform: translateY(-50%);
   }
	
   #drawer-open span {
      content: '';
      background-color: var(--sub-color-1);
      display: block;
      height: 1px;
      width: 25px;
      position: absolute;
      transition: 0.3s ease-in-out;
      transform-origin: right;
   }
	
   #drawer-open span.top {
      top: 8px;
   }
	
   #drawer-open span.bottom {
      bottom: 8px;
   }
	
   #drawer-input:checked ~ #drawer-open span.top {
      background-color: #fff;
      top: 3px;
      transform: rotate(-45deg);
   }
	
   #drawer-input:checked ~ #drawer-open span.bottom {
      background-color: #fff;
      bottom: 3px;
      transform: rotate(45deg);
   }
	
   #drawer-input:checked ~ #drawer-content {
		opacity: 1;
		visibility: visible;
		z-index: 999;
      height: 100vh;
   }
	
   .header-nav-list {
      margin: 0;
      padding: 74px 0 0;
   }
	
   .header-nav-item {
      border-bottom: solid 1px #CBCBCB;
   }
	
   .header-nav-link {
      color: var(--sub-color-2);
      width: 100%;
      padding: 2rem;
   }

   .header li.btn-contact a {
   background: var(--sub-color-1);
   color: #fff !important;
   padding: 2rem;
}
}






/*********************
BREADCRUMBS
*********************/
#breadcrumb {
	padding: 1.5em 0 2em;
	background-color: #E2E2E2;
}

.breadcrumb-list {
	padding: 0;
	max-width: var(--container-l);
	margin: 0 auto;
}

.breadcrumb-item {
	color: var(--text-main);
	line-height: 1;
	list-style: none;
	display: inline-block;
	margin: 0;
}

.breadcrumb-item:not(:last-of-type)::after {
	content: '/';
	padding: 0 0.5em;
}

.breadcrumb-item a {
	color: inherit;
	font-weight: var(--normal);
	text-decoration: none;
}



/*********************
CONTAINER
*********************/
.section-wrap {
   padding-top: 100px;
   padding-bottom: 100px;
   position: relative;
}

.container {
   max-width: var(--container);
   padding-right: var(--container-side);
   padding-left:  var(--container-side);
   position: relative;
   margin: 0 auto;
   width: 100%;
}

.container-l {
   max-width: var(--container-l);
   margin: 0 auto;
}

.container-m {
   max-width: var(--container-m);
   margin: 0 auto;
}

.container-s {
   max-width: var(--container-s);
   margin: 0 auto;
}

.container-ss {
   max-width: var(--container-ss);
}

.map-wrap {
   position: relative;
}

.map-wrap::before {
   content: "";
   display: block;
   padding-top: 50%;
}

.map-wrap iframe {
   position: absolute;
   top: 0;
   left: 0;
   height: 100%;
   width: 100%;
}


@media only screen and (max-width: 560px) {
   .section-wrap {
      padding-top: 50px;
      padding-bottom: 50px;
   }

   .container {
      padding-right: 5%;
      padding-left: 5%;
   }

}

/*********************
HEADING
*********************/
.h1-page {
   font-size: 3rem;
   font-weight: var(--bold);
   margin-bottom: 1em;
}

.h2-top {
   font-size: 3rem;
   font-weight: var(--bold);
   /* margin-bottom: 1em; */
}

.h2-page {
   font-size: 1.4rem;
   font-weight: var(--normal);
   position: relative;
   padding-bottom: 90px;
   text-align: center;
}

.h3-page {
   font-size: 2rem;
   font-weight: var(--bold);
   margin-bottom: 1em;
}

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

}


@media only screen and (max-width: 560px) {
  
}



/*********************
BUTTON
*********************/
.btn-wrap {
   margin-top: 1.5em;
   width: 100%;
}

.btn {
   color: var(--text-main);
   display: inline-block;
   font-size: 1em;
   font-weight: normal;
   line-height: 1;
   position: relative;
   transition: all .3s;
   z-index: 1;
}

.btn-main {
   background-color: var(--accent-color-1);
   border: 1px solid var(--accent-color-1);
   border-radius: 30px;
   color: #fff;
   display: block;
   font-size: 1.7rem;
   font-weight: 900;
   padding: 1em 0;
   text-align: center;
   text-decoration: none;
   transition: all .3s;
   width: 30%;
   letter-spacing: .2em;
   margin: 0 auto;
   margin-top: 30px;
}


.btn-sub { 
   color: var(--main-color-1);
   padding-right: 2em;
   position: relative;
   text-decoration: none;
}

.btn-sub::after {
   content: "\e5c8";
   font-family: var(--font-material);
   font-size: 2rem;
   font-weight: 400;
   line-height: 3rem;
   height: 3rem;
   width: 3rem;
   position: absolute;
   top: 50%;
   right: 0;
   transform: translateY(-50%);
   transition: all .3s;
   text-align: center;
}

.btn-cta {

}


@media only screen and (min-width: 961px) {
   .btn-main:hover {
      background-color: #fff;
      color: var(--main-color-1);
   }

   .btn-sub:hover {
      color: var(--main-color-1);
   }

   .btn-sub:hover::after {
      right: -.25em;
   }

   .btn-cta:hover {
      
   }
}

/*********************
FOOTER
*********************/
#footer {
   position: relative;
}

.footer-cta {
	padding: 80px 0 100px;
}

.footer-logo {
	display: block;
	max-width: 463px;
   width: 100%;
}

.footer-main {
   padding: 90px 4% 5px 4%;
   position: relative;
   background-color: #111111;
}

/* 左右2カラム */
   .footer-grid {
   display: flex;
   justify-content: space-between;
   grid-template-columns: 1fr 2fr; /* 左右の比率を調整 */
   /* gap: 40px; */
   align-items: start;
   border-bottom: solid 1px #fff;
   padding-bottom: 48px;
   }

   /* 左カラム */
   .footer-info {
   color: #fff;
   font-size: 1.5rem;
   font-weight: 200;
   }

   .footer-address,
   .footer-tel {
   margin: 12px 0;
   }

   .footer-tel a {
   color: #fff;
   text-decoration: none;
   }

   .footer-tel a:hover {
   text-decoration: underline;
   }

   /* SNSアイコン横並び */
   .footer-sns {
   display: flex;
   gap: 12px;
   margin-top: 16px;
   }

   .footer-sns__link img {
   width: 24px;
   height: 24px;
   display: block;
   }

   /* 右カラム：メニュー2カラム */
   .footer-menu {
   display: flex;
   justify-content: center;
   gap: 80px;
   }

   .footer-foot-list {
   list-style: none;
   margin: 0;
   padding: 0;
   }

   .footer-foot-item {
   margin-bottom: 12px;
   }



   .footer-foot-item::before {
   content: "";
   display: inline-block;  
   width: 10px;
   height: 10px;
   background-color: #fff;
   border-radius: 50%;
   margin-right: 10px;
}

   .footer-foot-link {
   color: #fff;
   text-decoration: none;
   }

   .footer-foot-link:hover {
   text-decoration: underline;
   }

   /* コピーライト */
   .copyright {
   text-align: center;
   margin-top: 32px;
   margin-bottom: 120px;
   font-size: 1.2rem;
}
.copyright a {
   color: #fff;
   text-decoration: none;
   font-weight: 100;
   font-family: var(--font-en);
   }


@media only screen and (max-width:1200px) {
   .footer-logo {
      width: 70%;
   }
}
@media (max-width: 1024px) {
   .footer-foot-item {
      font-size: 1.3rem;
   }
}
@media only screen and (max-width:960px) {
   .footer-foot-list {
      display: block;
   }
}
@media (max-width: 768px) {
  /* 左右を縦並びに */
   .footer-menu {
      display: block;
   }

   .footer-foot-item {
      font-size: 1.4rem;
   }

   .footer-foot-item {
      flex: 0 1 auto; /* アイテム幅は中身に合わせる */
   }
}
@media (max-width:600px) {
   .footer-grid {
   display: block;
   }
   .footer-nav {
      margin-top: 40px;
   }
}

@media only screen and (max-width:560px) {
   .footer-nav {
      margin-top: 40px;
   }
	.footer-cta {
		padding: 45px 0 60px;
	}
	
	.footer-menu-main {
		padding: 40px 0;
	}

	.footer-main-item:not(:last-of-type) {
		margin: 0 0 2em 0;
	}
   
}

/* --- スマホ幅（例: 480px以下）では1列にする --- */
@media (max-width: 480px) {
  .footer-foot-list {
    grid-template-columns: 1fr; /* 1列 */
  }

  .footer-foot-item {
    grid-column: auto; /* 通常の順番で縦並び */
  }
}


/*********************
ARCHIVE
*********************/
/* カテゴリタブ全体 */
.archive__cats-list {
  display: flex;
  gap: 10px;
  list-style: none;
  width: 84%;
  padding: 0;
  margin: 0 auto;
  margin-bottom: 105px;
  flex-wrap: wrap; /* 小さい画面では折り返し */
  justify-content: start; /* 中央寄せ（お好みで） */
}

/* ボタン風 */
.archive__cats-list li a {
  display: inline-block;
  padding: 8px 50px;
  border: 1px solid #3F3D56;
  border-radius: 20px;
  font-size: 1.6rem;
  line-height: 1.4;
  color: #3F3D56;
  text-decoration: none;
  transition: all 0.3s;
  background: #fff; /* デフォルト白背景 */
}

/* ホバー */
.archive__cats-list li a:hover {
  background: #3F3D56;
  color: #fff;
}

/* アクティブ */
.archive__cats-list li a.is-active {
  background: #3F3D56;
  color: #fff;
}

/* --- スマホサイズ調整 --- */
@media (max-width: 768px) {
  .archive__cats-list li a {
    font-size: 12px;
    padding: 5px 12px;
  }
}

.container-archive {
   max-width: 1200px;
   margin: 0 auto;
   margin-bottom: 100px;
}

/*card*/
.archive-wrap {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(360px, 322px));
   gap: 38px;
   justify-content: space-around; /* 余りスペースは左寄せ */
}

.archive-card {
	background-color: #FFFFFF;
	margin-right: 2%;
	margin-bottom: 2em;
}

.archive-card:nth-of-type(3n) {
	margin-right: 0%;
}

.archive-card a {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 5px;
  overflow: hidden;
  text-decoration: none;
}

.archive-card a:hover {
	box-shadow: 0 3px 8px 0 rgba(0,0,0,.1);
	opacity: 1;
}

.image-archive {
  width: 100%;
  padding-top: 50%;
  position: relative;
  overflow: hidden;
}

.image-archive>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  transition: all .3s;
}

.archive-card:hover .image-archive>img {
   transform: scale(1.1);
}

.text-archive {
   color: #000000;
   padding: 1em;
   background-color: #FFFFFF;
}

.text-archive .time-archive {
   color: #777777;
   margin-bottom: 1em;
}

@media (max-width: 600px) {
   .archive-wrap {
   grid-template-columns: repeat(auto-fill, minmax(320px, 280px));
   gap: 20px;
   }
}



/*list*/
.archive-list {
	padding: 0 0.6em 1.8em;
	border-bottom: dotted 1px #D2DAE6;
	margin-bottom: 1.5em;
	transition: all 0.4s;
}

.archive-list:last-of-type {
  margin-bottom: 0;
}

.archive-list a {
	display: block;
  text-decoration: none;
}

.archive-list .time-archive {
	width: 15%;
	color: var(--main-color-1);
}
.archive-list .title-archive {
	width: 80%;
	color: var(--text-main);
	font-weight: var(--normal);
	margin: 0;
}


/*PAGENATION*/

/* リンクの枠 */
.navigation.pagination {
	margin-top: 4em;
}

/* ページネーション全体 */
.pagination .page-numbers {
   display: flex;
   justify-content: center;
   gap: 8px;
   list-style: none;
   padding: 0;
   margin: 40px 0;
}
.page-numbers li:empty {
   display: none;
}


/* 共通デザイン（丸枠） */
.pagination .page-numbers li a,
.pagination .page-numbers li span {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 32px;         /* 丸の大きさ */
   height: 32px;
   border-radius: 50%;
   border: 1px solid #3F3D56;
   font-size: 14px;
   font-family: var(--font-en, sans-serif);
   color: #3F3D56;
   text-decoration: none;
   transition: all 0.3s;
}

/* ホバー時 */
.pagination .page-numbers li a:hover {
  background-color: #3F3D56;
  color: #fff;
}

/* 現在のページ */
.pagination .page-numbers li .current {
  background-color: #3F3D56;
  color: #fff;
  border: 1px solid #3F3D56;
}


.pagination .page-numbers li:first-of-type {
	margin-left: 0;
}

.pagination .page-numbers li:last-of-type {
	margin-right: 0;
}

.pagination .page-numbers a {
	text-decoration: none;
}

/* 前へ、次へボタン */
.pagination .nav-links .prev,
.pagination .nav-links .next {
   width: 1em;
   height: 1em;
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center center;
}

.pagination .nav-links .prev {
	background-image: url(../../uploads/arrow-left.svg);
}

.pagination .nav-links .next {
	background-image: url(../../uploads/arrow-right.svg);
}

/* ドット */
.pagination .nav-links .dots {

}

/* 現在のページ */
.pagination .nav-links .current {
	text-decoration: underline;
}


@media only screen and (max-width: 560px) {
   .archive-list:last-child {
      margin-bottom: 1.5em;
   }

   .archive-list .time-archive {
      margin-right: 0;
      margin-bottom: .5em;
   }

   .archive-list .time-archive,
   .archive-list .title-archive {
      width: 100%;
   }
}



/*********************
SINGLE
*********************/
.header-single {
   position: relative;
   padding-top: 120px;
}

.time-single {
   display: inline-block;
   margin-bottom: .5em;
}

.title-single {
   font-size: 2.2rem;
   font-weight: 400;
   margin-bottom: 70px;
}

.main-single-post h2 {
	font-size: 1.8em;
}

.main-single-post h3 {
	font-size: 1.5em;
}

.main-single-post h4 {
	font-size: 1.2em;
}

.main-single-post h2,
.main-single-post h3,
.main-single-post h4 {
	margin: 1em 0;
}

.main-single-post p+h2,
.main-single-post img+h2,
.main-single-post figure+h2,
.main-single-post table+h2 {
	margin-top: 3em;
}

.main-single-post p+h3,
.main-single-post img+h3,
.main-single-post figure+h3,
.main-single-post table+h3 {
	margin-top: 2em;
}

.main-single-post ul,
.main-single-post ol {
	margin: 2em 0;
}

.main-single-post figure,
.main-single-post img {
	display: block;
	max-width: 100%;
	margin: auto;
}

.main-single-post figure {
	margin-bottom: 2em;
}

.main-single-post figcaption {
	font-size: .8em;
	line-height: 1.7;
	margin-top: .5em;
}

.main-single-post table{
	border: solid 1px #DDD;
	border-collapse: collapse;
}

.main-single-post tr{
    border-bottom: solid 1px #DDD;
}

.main-single-post th,
.main-single-post td{
	padding: 1em;
	border-right: solid 1px #DDD;
}


@media only screen and (max-width: 560px) {
   .title-news {
      font-size: 1.9rem;
   }
}




/*********************
CONTACT
*********************/
input[type=email],
input[type=text],
input[type=tel],
input[type=file],
input[type=url],
input[type=number],
input[type=date],
select,
textarea {
	color: inherit;
	font-size: 1.6rem;
	display: inline-block;
	width:100%;
}

input[type=email],
input[type=text],
input[type=tel],
input[type=url],
input[type=number],
input[type=date],
select,
textarea {
	border: 1px solid #DBDBDB;
	border-radius: 5px;
  background-color: #FFF;
	line-height: 1.7;
	padding: 1rem .9rem;
}

input[type=number] {
   margin-right: .5rem;
   padding: .5rem 1rem;
   width: calc(4em + 2rem);
}

input[type=checkbox],
input[type=radio],
.wpcf7-list-item-label {
   vertical-align: middle;
}

input[type=submit] {
	background-color: var(--accent-color-1);
	border: 1px solid var(--accent-color-1);
	border-radius: 50px;
	color: #fff;
	display: inline-block;
	font-size: 2rem;
	font-weight: 900;
	padding: 1em 0;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
	width: 272px;
	letter-spacing: .2em;
}

input[type=submit]:hover{
   color: #fff;
}

.number-month,
.number-date {
   margin-left: 1em;
}

.wpcf7-list-item {
	margin: 0 1em 0 0;
}

.wpcf7-list-item:last-child {
   margin: 0;
}

.heading-form-contact {
  font-size: 1em;
  font-weight: var(--bold);
}

.detail-form-contact {
   padding-top: 8px;
   padding-bottom: 30px;
}

.contact-label {
   background-color: var(--main-color-1);
   border-radius: 2px;
   color: #fff;
   display: inline-block;
   font-size: 12px;
   font-weight: 600;
   margin-left: 10px;
   padding: 5px 12px;
   line-height: 1;
   vertical-align: text-bottom;
}

::placeholder {
   color: #ddd;
   font-size: 1.6rem;
   letter-spacing: .15rem;
   line-height: 1.5;
}

.wpcf7-checkbox .wpcf7-list-item {
   display: block;
   margin-bottom: .5em;
}

.wpcf7-acceptance .wpcf7-list-item {
   margin: 0;
}

/*送信完了メッセージ*/
.wpcf7 form.sent .wpcf7-response-output {
   background-color: #fff;
   border-color: #4a84af;
   margin-top: 3em;
   padding: 2em; 
}

/*Google reCAPCHA*/
.reCAPTCHA {
	font-size: 10px;
   text-align: center;
}


@media only screen and (max-width: 560px) {
  input[type=submit] {
    width: 100%;
  }
  
	.heading-form-contact {
	  font-size: 1.4rem;
	  padding: 10px 0 0;
	}

	.detail-form-contact {
	  padding: 10px 0 30px;
	}

	.contact-label {
	  font-size: 1.1rem;
	}

	::placeholder {
	  font-size: 1em;
	}

	.wpcf7-list-item-label {
	  font-size: 1.3rem;
	}

	.wpcf7-text,
	.wpcf7-textarea {
		font-size: 1.6rem;
	}
}

/*********************
FRONT
*********************/
.fv {
   background-color: #000;
   height: 100vh;
}

@media only screen and (max-width: 768px) {
   .fv {
      height: 100vh;
   }
}


@media only screen and (max-width:375px) {
  
}


/*********************
PAGE PARTS
*********************/


/*privacy*/
.main-privacy h2 {
  font-size: 1.5em;
  margin: 2em 0 .5em;
}

/*********************
LOADING
*********************/
#loading,
#loading_logo {
   display: none;
}

.home #loading {
	background-color: #fff;
	display: block;
	position: fixed;
	left: 0;
	text-align:center;
	width: 100%;
	height: 100%;
	z-index: 999;
}

.home #loading_logo {
   display: block;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate3d(-50%, -50%, 0);
}

#loading_logo img {
   width:210px;
}


/*********************
COLOR
**********************/
.bg-base {
   background-color: var(--base);
}

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

.bg-accent-color-1 {
   background-color: var(--accent-color-1);
}

.color-base {
   color: var(--base);
}

.color-main-1 {
   color: var(--main-color-1);
}

.color-accent-1 {
   color: var(--accent-color-1);
}

/*********************
MARGIN
*********************/
.margin-1 {
   margin-bottom: 180px;
}
.margin-2 {
   margin-bottom: 160px;
}
.margin-3 {
   margin-bottom: 100px;
}
.margin-4 {
   margin-bottom: 60px;
}
.margin-5 {
   margin-bottom: 40px;
}

@media only screen and (max-width: 560px) {
   .margin-1{
      margin-bottom: 150px;
   }
   .margin-2 {
      margin-bottom: 90px;
   }
   .margin-3{
      margin-bottom: 80px;
   }
   .margin-4{
      margin-bottom: 50px;
   }
   .margin-5{
      margin-bottom: 30px;
   }
}


/*********************
ANIMATION
*********************/
.fadein {
   opacity: 0;
   transform: translateY(30px);
   transition-property: transform, opacity;
   transition-duration: 1.5s;
   transition-delay: 0s;
}

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

.delay--2 {
   transition-delay: .3s;
}

.delay--3 {
   transition-delay: .6s;
}

.delay--4 {
   transition-delay: .9s;
}


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

}

/*********************
RESPONSIVE
*********************/
@media only screen and (min-width: 961px) {
   .tb_only { display: none !important; }
   .sp_only { display: none !important; }
   .sp_tb { display: none !important; }
}

@media only screen and (min-width: 561px) and (max-width: 960px) {
   .pc_only { display: none !important; }
   .sp_only { display: none !important; }
   .sp_pc { display: none !important; }
}

@media only screen and (max-width: 560px) {
   .pc_only { display: none !important; }
   .tb_only { display: none !important; }
   .tb_pc { display:none!important; }
}

@media only screen and (max-width: 320px) {
   html { font-size: .58em; }
}

/* =====================
TOP page
===================== */
   .fv {
   position: relative;
   width: 100%;
   height: 100vh; /* 画面いっぱい */
   overflow: hidden;
   }

   .fv-video {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100vh;
   object-fit: cover;
   }

   /* --- テキスト部分 --- */
.fv__content {
  position: absolute;
  z-index: 2;
  color: #fff;
}

/* PC：左下寄せ */
@media (min-width: 769px) {
  .fv__content {
    bottom: 80px;  /* 余白調整 */
    left: 60px;
    text-align: left;
  }
}

@media (max-width: 768px) {
  .fv__content {
    bottom: 35px;
    left: 5%;
    /* transform: translateX(-50%); */
    width: 90%;
  }
}

.fv__title {
  font-size: 4.5vw;
  font-weight: 700;
  letter-spacing: 0.4em;
  line-height: 1.4;
}

.fv__content .fv-title-sub {
   font-size: 2.7vw;
   font-weight: 400;
   letter-spacing: 0.6em;
   display: block;
   margin-top: 3%;
}

@media (max-width: 600px) {
   .fv__content {
      left: 10%;
   }
   .fv__title {
   font-size: 8.5vw;
   }
   .fv__content .fv-title-sub {
   font-size: 4.7vw;

}
}

/* --- 読みやすくするための暗めオーバーレイ（任意） --- */
.fv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.2);
  z-index: 1;
}

   
   /* =========================
   About section
   ========================= */
      .top__about {
   display: flex;
   align-items: center;
   }

   /* 左の画像 */
   .top__about-image-box {
   flex: 0 0 55%;   /* 左側を55%に固定 */
   }

   .top__about-image-box img {
   width: 100%;
   height: auto;
   display: block;
   object-fit: cover;
   }

   /* 右のテキスト */
   .top__about-text-box {
   flex: 0 0 45%;   /* 右側を45%に固定 */
   display: flex;   /* 中身をさらに調整するため */
   justify-content: flex-start;
   padding: 0 40px;
   box-sizing: border-box;
   }

   .top__about-text-inner {
   max-width: 90%;   /* テキスト幅の最大値を制御 */
   }

   /* ---------------------------
      レスポンシブ対応
   --------------------------- */
   @media (min-width: 1441px) {
      .top__about-text-inner {
         max-width: 75%;   /* テキスト幅の最大値を制御 */
   }

   }
   @media (max-width: 1024px) {
   .top__about {
      display: block; /* 縦並び */
   }

   .top__about-image-box {
      flex: none;
      width: 100%;
      margin-bottom: 24px;
   }

   .top__about-text-box {
      flex: none;
      width: 100%;
      padding: 0 40px;
   }

   .top__about-text-inner {
      max-width: 100%; /* スマホでは制約解除 */
   }
   }



   /* button */
   .sub__btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   text-decoration: none;
   font-family: var(--font-jp);
   font-weight: var(--normal);
   padding: 15px 85px;
   border-radius: 999px;
   border: 1px solid var(--main-color-2);
   /* background: var(--sub-color-2); */
   color: var(--main-color-2);
   transition: background .2s ease, color .2s ease, transform .2s ease;
   }

   /* マテリアルアイコンで矢印を出す場合（→をHTMLに書かなくてもOK） */
   .sub__btn::after {
   font-family: var(--font-material);
   content: "\e5c8"; /* chevron_right */
   font-weight: normal;
   line-height: 1;
   }

   .sub__btn:hover {
   background: var(--accent-color-1);
	border: none;
   color: #fff;                     /* 文字と矢印を白に */
   transform: translateY(-1px);
   }

   .btn__orange {
      border: solid 1px var(--accent-color-1);
      color: var(--accent-color-1);
   }

   .btn__orange:hover {
      background-color: var(--accent-color-1);
      color: var(--sub-color-2);
   }

   /* タブレットでの余白微調整 */
   @media (max-width: 1024px) {
   .section-wrap > .container { gap: 40px; }
   }

   /* SP：縦積み＆幅いっぱい、比率375:323 */
   @media (max-width: 960px) {
   .section-wrap > .container {
      flex-direction: column;
      align-items: stretch;
   }

   .top__about-text-box,
   .top__about-image-box {
      flex: none;
      max-width: 100%;
      margin-left: 0;
   }

   .top__about-image-box {
    transform: none;        /* 解除 */
      flex: none;
      max-width: 100%;
      margin-left: 0;
   }

   .top__about_text-box {
      padding: 0 5%;
   }
   
   .section-wrap .top__about-image-box{ 
      transform:none; 
      max-width: 100%;
   }
   

   .top__about-image-box img {
      width: 100%;
      aspect-ratio: 375 / 323;    /* 指定どおりSP比率 */
   }
}

@media (max-width: 600px) {
   .sub__btn {
      display: block;
      text-align: center;
      width: 100%;
      padding: 15px 0;
   }
   .sub__btn::after {
      display: none;
   }
}


   /* =========================
   works section
========================= */
   .section-works {
   width: 100%;
   max-width: 1440px;
   margin: 0 auto;
   }

   .works__inner {
   display: flex;
   min-height: 600px; /* 必要なら調整 */
   }

   .works__text-box {
   flex: 0 0 39%;              /* 左カラムを38%くらいに調整 */
   background: var(--main-color-1);
   color: var(--sub-color-2);
   padding: clamp(40px, 6vw, 80px);
   align-items: start;
   padding-top: 80px;
   overflow: hidden;   /* 相殺を防ぐ */
   }

   .works__text-box h2,
   .works__text-box .heading-en,
   .works__text-box h3,
   .works__text-box p,
   .white {
   color: #fff;
   }

   .white {
      border: solid 1px var(--sub-color-2);
   }

   .white:hover {
   background: #fff; 
   color: var(--sub-color-1);                     /* 文字と矢印を白に */
   transform: translateY(-1px);
   }

   .top__h3 {
         font-size: 2.6rem;
         font-weight: bold;
         margin-bottom: 10px;
         line-height: 3rem;
   }

   .works__image-box {
   flex: 1 1 auto;             /* 右側は残り全部 */
   position: relative;
   }

   .works__image-box img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   }

   /* =========================
   Responsive
   ========================= */
   @media (max-width: 1024px) {
      .works__text-box {
         padding: clamp(40px, 4vw, 80px);
         padding-top: 60px;
         padding-bottom: 60px;
   }
   }
   @media (max-width: 960px) {
   .works__inner {
      flex-direction: column;
   }
   .works__text-box {
      flex: none;
      width: 100%;
   }
   .works__image-box {
      flex: none;
      width: 100%;
      height: auto;
   }
   .works__image-box img {
      aspect-ratio: 16 / 9;  /* スマホは画面幅いっぱい */
   }
   }

   /* =========================
  Recruit section
========================= */
.section-recruit {
  position: relative;
  background: var(--base);
  overflow: hidden;
  padding: clamp(48px, 8vw, 96px) 0;
}

/* インナーに背景ロゴを持たせる */
.recruit__inner {
  max-width: var(--container-l);           /* 例: 1200px */
  margin: 0 auto;
  padding: 0 var(--container-side);
  position: relative;                      /* ←基準にする */
  z-index: 1;                              /* テキストを前面に */
}

/* ロゴ擬似要素（PC：右中央、インナーに追従） */
.recruit__inner::after{
  content:"";
  position:absolute;
  inset: 0;                                /* インナー内で制御 */
  background-image:url("./images/top-recruit-logo.png");
  background-repeat:no-repeat;
  background-position: right min(6vw, 20px) center; /* 右中央（箱の中で） */
  background-size: min(42%, 720px) auto;   /* インナー幅基準で可変 */
  opacity:.6;
  pointer-events:none;
  z-index: 0;                              /* テキストの背面に */
}

.recruit__text {
  max-width: 700px;
  padding: 5% 0;
}

.recruit__title {
  margin: 0 0 16px;
  font-family: var(--font-jp);
  font-weight: var(--bold);
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.5;
  color: var(--accent-color-1);
}

.section-recruit p {
  margin: 0 0 24px;
  color: var(--text-main);
  font-family: var(--font-jp);
  font-weight: var(--normal);
  font-size: clamp(14px, 1.1vw, 16px);
  line-height: 2;
}

/* ボタン */
.section-recruit .sub__btn {
  margin-top: 12px;
}

/* =========================
  Responsive
========================= */
/* スマホ：右下配置＆少し大きめ */
@media (max-width: 960px){
  .recruit__inner::after{
    background-position: right bottom;
    background-size: 55% auto;
  }
}

@media (max-width: 600px) {
   .recruit__inner {
  padding: 0 8%;
}
}

/* =====================
   interview
======================*/
.recruit__interview {
  max-width: var(--container-l);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 64px) var(--container-side) 0;
}

/* 見出し */
.recruit__interview-head .h2-top {
  margin: 0 0 6px;
}
.recruit__interview-head .heading-en {
  margin: 0 0 20px;
}

/* === Interview grid === */
.interview__grid {
  display: grid;
  gap: clamp(16px, 2.2vw, 28px);
  grid-template-columns: 1fr; /* SP初期は1列 */
}

/* カード本体 */
.interview__card {
  display: flex;              /* 高さ100%にするためのラッパー */
}

.interview__figure {
  display: flex;
  flex-direction: column;
  background: var(--sub-color-2);
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  width: 100%;
  height: 100%;
}

/* 画像は端末問わず 4:3 を維持 */
.interview__figure img {
  width: 100%;
  aspect-ratio: 322 / 293;
  object-fit: cover;
  display: block;
}

/* キャプション帯 */
.interview__caption {
  background: var(--main-color-1);
  color: var(--sub-color-2);
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;                    /* 画像の残りを埋める */
}


.section-recruit .interview__title {
   color: var(--sub-color-2);
   margin: 0;
   font-family: var(--font-jp);
   font-weight: var(--bold);
   font-size: 2.4rem
   
  /* letter-spacing: .02em; */
}

.section-recruit .interview__text {
  margin: 0;
  font-family: var(--font-jp);
  font-weight: var(--normal);
  font-size: clamp(13px, 1vw, 15px);
  line-height: 1.9;
  opacity: .92;
  color: var(--sub-color-2);
}

/* ふわっとホバー（PCのみ効けばOK） */
@media (hover: hover) {
  .interview__figure { transition: transform .2s ease, box-shadow .2s ease; }
  .interview__figure:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(0,0,0,.10);
  }
}

/* CTAボタンを中央に */
.interview__cta {
  margin-top: clamp(20px, 5vw, 36px);
  display: flex;
  justify-content: center;
}
.interview__cta .sub__btn { padding: 12px 28px; }

/* —— Tablet（2列） —— */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .interview__grid {
    grid-template-columns: repeat(2, minmax(300px, 1fr));
  }
}

/* —— PC（3列・カード基準322×560px） —— */
@media (min-width: 1200px) {
  .interview__grid {
    grid-template-columns: repeat(3, 322px); /* 幅322px×3列を固定 */
    justify-content: space-between;          /* コンテナ内で等間隔配置 */
  }
  .interview__card { height: 560px; }        /* 高さを基準値に固定 */
  .interview__figure { height: 100%; }
}

/* sp版 */
   @media (max-width: 600px) {
      .interview__figure {
      width: 100%;
      /* height: 50%; */
   }
   }
   @media (max-width: 425px) {
      .interview__grid {
         gap: 40px;
      }
   }

   /* ---- recruit CTA ---- */
   .recruit {
   position: relative;
   width: 100%;
   height: 80vh; /* PCでの高さ調整 */
   background: url('./images/top-recruit-bg.jpg') no-repeat center center;
   background-size: cover;
   color: #fff;
   overflow: hidden;
   margin-top: 120px;
   }

   .recruit__box {
   position: absolute;
   bottom: -92px;
   left: 10px;
   display: flex;
   align-items: center;
   gap: 8%; /* RECRUIT と CTA の間隔 */
   width: 100%;
   }

   .recruit__title-big {
   font-size: 16vw;
   font-weight: bold;
   margin: 0;
   color: var(--sub-color-2);
   }

   .recruit__cta {
   display: flex;
   flex-direction: column; /* 縦並び */
   gap: 10px;
   align-items: center;
   }

   .recruit__cta .recruit__subtitle {
   font-size: 2.8rem;
   font-weight: bold;
   color: var(--sub-color-2);
   margin: 0;
   letter-spacing: 1rem;
   }

   .recruit__btn {
   display: inline-block;
   padding: 13px 0;
   width: 140%;
   text-align: center;
   background: var(--accent-color-1);
   color: #fff;
   border-radius: 50px;
   border: solid 1px var(--accent-color-1);
   text-decoration: none;
   font-size: 2rem;
   transition: 0.3s;
   }

   .recruit__btn:hover {
   opacity: 0.8;
   }

   @media (max-width: 1200px) {
      .recruit__box {
         bottom: -74px;
         left: 10px;
         gap: 6%; /* RECRUIT と CTA の間隔 */
      }
   }

   @media (max-width: 960px) {
      .recruit {
         overflow: visible; /* ← これで子要素がはみ出しても見える */
         margin-bottom: 230px;
      }
      .recruit__box {
         bottom: -238px;
         left: 2px;
         display: block;
         align-items: center;
         gap: 8%; /* RECRUIT と CTA の間隔 */
         width: 100%;
      }
      /* .recruit__title-big {
         font-size: 23vw;
         color: var(--text-main);
      } */
      .recruit__title-big {
         font-size: clamp(5rem, 20vw, 20rem);
         font-weight: bold;
         margin: 0;
         color: var(--text-main);
         text-align: center;
         line-height: 1.1;
         letter-spacing: 0.07em;
         overflow-wrap: normal;
      }

      @supports (-webkit-touch-callout: none) {
      /* iPhone / iOSブラウザ専用 微調整 */
      .recruit__title-big {
         font-size: 18vw;
      }
   }
      .recruit__btn {
         width: 40%;
      }
      .recruit__cta .recruit__subtitle {
         color: var(--text-main);
      }
   }


   @media (max-width: 768px) {
      .recruit__box {
         bottom: -227px;
      }
   }


   @media (max-width: 600px) {
      .recruit__box {
         bottom: -183px;
      }
      .recruit__btn {
         width: 90%;
      }
}

@media (max-width: 425px) {
      .recruit__box {
         bottom: -183px;
      }
}



/* ====================
news
==================== */
.section-news {
  background: #f5f5f5; /* 任意 */
  padding: 80px 20px;
}

.section-news__head {
  text-align: left;
  margin-bottom: 40px;
}

.news__grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.news__card {
  background: #fff;
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  border-radius: 4px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.news__card a {
  color: inherit;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.news__thumb img {
   width: 100%;
   aspect-ratio: 16/9;
   object-fit: cover;
   display: block;
}

.news__body {
   flex: 1;
   padding: 16px;
   display: flex;
   flex-direction: column;
   gap: 8px;
}

.news__cat {
   display: inline-block;
   background: #2b2b2b;
   color: #fff;
   font-size: 12px;
   padding: 2px 8px;
   border-radius: 2px;
   width: 35%;
   text-align: center;
}
/* ブログ → デフォルトの濃い紫 */
.news__cat.blog {
   background: #2b2b2b; /* 例: ダークグレー／紫系 */
}

/* お知らせ → アクセントカラーのオレンジ */
.news__cat.news {
   background: var(--accent-color-1); /* アクセントカラー */
}

.news__title {
   font-size: 16px;
   font-weight: 600;
   line-height: 1.5;
}

.news__date {
   font-size: 14px;
   color: #666;
   margin-top: auto;
}

.news__arrow {
   display: block;
   text-align: right;
   padding: 0 16px 16px;
   font-size: 18px;
   color: #2b2b2b;
}

.news__cta {
   margin-top: 40px;
   text-align: center;
}


   /* =========================
   Instagram section
   ========================= */
   .section-instagram {
   background: var(--base);
   padding: clamp(48px, 8vw, 96px) 0;
   }
   .sns__inner {
   max-width: var(--container-l);
   margin: 0 auto;
   padding: 0 var(--container-side);
   }
   .insta__head .h2-top { margin: 0 0 6px; }
   .insta__head .heading-en { margin: 0 0 20px; }

   /* プラグイン側のグリッドはそのまま使う。少しだけ角丸や影を足したい時の例（Smash Balloon想定） */
   .section-instagram .sbi_item,            /* 画像枠 */
   .section-instagram .sbi_photo_wrap {
   /* border-radius: 12px; */
   overflow: hidden;
   }

   .sns__head .sns-top {
      font-size: 6.4rem;
      font-family: var(--font-en);
      font-weight: bold;
      text-align: center;
   }
   
   .sns__head .sns-top-ja {
      text-align: center;

   }
   .section-instagram .sbi_item a img {
   display: block;
   }
   .sns__cta {
   margin-top: clamp(20px, 5vw, 36px);
   display: flex;
   justify-content: center;
   }
   .sns__cta .sub__btn { padding: 12px 28px; }


/* ===========================
   page Hero
=========================== */
   .page-hero {
   padding: 80px 0 148px;
   }

   .page-hero-archive {
      padding: 80px 0 50px;
   }

   .page-hero__text {
   text-align: left;
   margin-bottom: 100px;
   padding: 0 8%;
   }

   .page-hero .page-hero__heading {
   font-size: 8vw;
   font-weight: bold; 
   line-height: 1.1;
   margin-bottom: 3%;
   }

   .page-hero .page-hero__heading__orange {
   color: var(--text-sub);
   }

   .pc-none {
         display: none;
      }

   .page-hero .lead {
   font-size: 2vw;
   color: #333;
   }

   .page-hero__img {
   text-align: right; 
   }

   .page-hero__img img {
      max-width: 100%;
      width: 92%;
      height: auto;
      margin-left: auto;
}

/* ---------------------------
   Responsive
--------------------------- */
   @media (max-width: 1024px) {
   .page-hero {
      padding: 60px 0 80px;
      }
   }
   @media (max-width: 768px) {
   .page-hero {
      padding: 60px 0 40px;
      }
   
   .page-hero__text {
      margin-bottom: 70px;
      }
      .page-hero .lead {
         font-size: 3vw;
      }
   }
   @media (max-width: 600px) {
      .page-hero .page-hero__heading {
         font-size: 13vw;
      }
      .pc-none {
         display: block;
      }
      .page-hero .lead {
         font-size: 3.5vw;
      }

   }

   /* ====================
   about page
   ==================== */
   .about__wrap {
   background: var(--base);
   padding: clamp(48px, 8vw, 96px) 0;
   }
   .about-wrap > .container {
      flex-direction: column;
      align-items: stretch;
      }
   .about__box {
      display: flex;
      justify-content: center;
   }
   
   .about-image-box {
      width: 43.5%;
      margin-left: 3%;
   }
   .about-text-box {
      width: 50%;
      padding: 5%;
      align-items: center;
   }
   @media (max-width:1024px) {
      .about-image-box {
         margin-left: 5%;
   }
   }
   @media (max-width: 960px) {
   .about__wrap {
      width: 80%;
      margin: 0 auto;
   }
   .about__wrap .container {
      flex-direction: inherit;
   }
   .about-text-box,
   .about-image-box {
      flex: none;
      max-width: 100%;
      margin-left: 0;
   }

   .about-image-box {
    transform: none;        /* 解除 */
      flex: none;
      max-width: 100%;
      margin-left: 0;
   }

   .about_text-box {
      padding: 0 5%;
   }
   
   .section-wrap .about-image-box{ 
      transform:none; 
      max-width: 100%;
   }
   

   .about-image-box img {
      width: 100%;
      /* aspect-ratio: 375 / 323;     */
   }
}

@media (max-width: 768px) {
   .about__wrap .container {
      flex-direction: column;
   }
   .section-wrap .about-image-box{ 
      transform:none; 
      max-width: 100%;
      width: 100%;
      margin: 0 auto;
   }
   .about-text-box {
      width: 100%;
      margin: 0 auto;
      padding: 5% 0
}
}

   /* .container-l {
      max-width: 80%;

   } */
   .card-wrap {
      text-align: center;
   }
   .card__box-text {
      font-size: 2.8rem;
   }
   .text-orange {
      color: var(--accent-color-1);
   }
   .card__title {
      font-size: 3.2rem;
      font-weight: bold;
      margin-bottom: 2rem;
   }
   /* カードリスト */
   .card-list__items {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 20px;
   list-style: none;
   padding: 0;
   margin: 0;
   }

   .card__img {
   position: relative;
   overflow: hidden;
   border-radius: 10px;
   }

   .card__img img {
   width: 100%;
   height: auto;
   display: block;
   }

   .card__overlay {
   position: absolute;
   inset: 0; /* top, right, bottom, left: 0 と同じ */
   background: rgba(0, 0, 0, 0.4); /* 黒透過 */
   }

   .card__text {
   position: absolute;
   bottom: 12px;
   left: 50%;
   transform: translateX(-50%);
   color: #fff;
   font-size: 1.6vw;
   font-weight: 600;
   text-align: center;
   width: 68%;
   }

   /* スマホ対応 */
   @media (max-width: 1024px) {
      .card-wrap {
         width: 80%;
      }
   .card-list__items {
      grid-template-columns: repeat(2, 1fr);
   }
   .card__text {
      font-size: 3vw;
      width: 73%;
   }
   }
   @media (max-width: 600px) {
   .card-list__items {
      grid-template-columns: 1fr;
   }
   .card__text {
      font-size: 6vw;
   }


   }


   /* 会社概要 */
   .section__wrap {
      margin-top: 120px;
      max-width: 1440px;
      width: 80%;
   }
   .section__wrap img {
      width: 100%;
      margin: 0 auto;
   }
   .company__box .about-text-box {
      margin: 0 auto;
      text-align: center;
   }
   .company-profile__list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;
   }
   .company-profile__list dl {
      min-width: 0; /* ← これ重要！はみ出し防止 */
   }

   .company-profile__item {
   display: flex;
   border-bottom: 1px solid #ccc;
   padding: 8px 0;
   }

   .company-profile__item dt {
   flex: 0 0 145px;  /* ラベル幅固定 */
   font-weight: 600;
   }

   .company-profile__item dd {
      flex: 1;
      margin: 0;
      min-width: 0; /* ← これがないと中身がはみ出す！ */
      word-break: break-all; /* ← 長いURLも強制的に折り返す */
      overflow-wrap: anywhere; /* ← Safari対策での折り返し補助 */
   }

   
   @media (max-width: 1280px) {
      .section__wrap {
      max-width: 1440px;
      width: 80%;
   }
   }
   @media (max-width: 768px) {
      .section__margin {
         margin-top: 80px;
      }
   .company-profile__list {
      grid-template-columns: 1fr;
      gap: 0;
   }
}
   @media (max-width: 600px) {
   .section__wrap {
      width: 100%;
   }
   .company__box {
      width: 80%;
      margin: 0 auto;
   }
}

/* 沿革 */
/* 全体2カラム */
.history__wrap {
  display: flex;
  gap: 40px;
  align-items: flex-end;
}

/* 左カラム：年表 */
.history__list {
  flex: 0 0 45%; /* 左の幅 */
  position: relative;
  /* padding-left: 120px; */
}

/* 縦線を年表全体に1本 */
.history__items {
  position: relative;
}
.history__items::before {
  content: "";
  position: absolute;
  top: 27px;
  bottom: 30px;
  left: 179px; /* 西暦の右横に線 */
  width: 2px;
  background: #fff;
}

/* 各アイテム */
.history__item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
  gap: 80px;
}

/* 西暦 */
.history__year {
  flex: 0 0 80px;
  font-size: 3.2rem;
  font-weight: bold;
  color: #e6731c;
  text-align: right;
  padding-right: 20px;
  box-sizing: border-box;
}

/* ドット（縦線上） */
.history__dot {
  position: relative;
  left: -6px;
  top: 20px;
  width: 12px;
  height: 19px;
  border-radius: 50%;
  background: #e6731c;
  z-index: 1;
  flex: 0 0 20px;
}

/* 内容（和暦＋出来事） */
.history__content {
  flex: 1;
  font-size: 1.8rem;
}

.history__date {
  font-size: 1.4rem;
  color: var(--accent-color-1);
  margin-bottom: 4px;
}

/* 右カラム：1枚画像 */
.history__images {
   flex: 0 0 55%; /* 右の幅 */
   margin-right: calc(-1 * (100vw - 100%) / 2); /* 画面右端まで広げる */
   max-width: 600px;
   width: 100%;
}

.history__images img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}



/* SP時は縦並び */
@media (max-width: 1024px) {
   .history__wrap {
      display: block;
   }

   .history__list {
      flex: none;
      width: 100%;
      /* padding-left: 80px;  */
   }

   .history__images {
      flex: none;
      width: 100%;
      margin: 24px 0 0;
      margin-left: auto;
      display: flex;
      justify-content: flex-end; /* 右寄せ維持 */
      }
      
      .history__images img {
         max-width: 90%; /* スマホでは端に寄せつつ少し余白 */
      }
}

@media (max-width: 600px) {
   .history__list {
      width: 80%;
      margin: 0 auto;
   }
}

@media (max-width: 425px) {
   .history__items::before {
      left: 117px; /* 西暦の右横に線 */
      top: 21px;
      bottom: 49px;
   }

   .history__items {
      width: 90%;
      margin: 0 auto;
   }
   .history__item {
      gap: 18px;
}
}

/* スライダー */
   .about__slider {
   margin-top: 120px;
   overflow: hidden; /* 横スクロール防止 */
   }

   .c-loop__image__wrap {
   display: flex;
   animation: loop-list 50s linear infinite;
   will-change: transform;
   }

   /* 1枚あたりの幅は常に3分の1（3枚表示） */
   .c-loop__image {
   width: 33.3333%;
   flex-shrink: 0;
   object-fit: cover;
   min-height: 220px;
   max-height: 340px;
   }

   @keyframes loop-list {
   from {
      transform: translateX(0);
   }
   to {
      transform: translateX(-100%); /* 2セット分の半分を流す */
   }
   }


   @media screen and (max-width: 768px) {
      .about__slider {
         margin-top: 80px;
      }
      .c-loop__image {
         min-height: 150px;
      }
   }
   @media screen and (max-width: 600px) {
      .c-loop__image__wrap {
         animation: loop-list 30s linear infinite;
      }
      .c-loop__image {
         width: 80%;
      }
   }
   @media screen and (max-width: 420px) {
   .c-loop__image {
      min-height: 100px;
   }
}

   /* ====================
   works page
   ==================== */
.slider__container {
   margin-top: 120px;
   padding: 124px 0 124px 106px;
   width: 100%;
   background-color: var(--main-color-1);
   border-radius: 20px 0 0 0;
}
.slider__container .h2-top, .slider__container .heading-en{
   color: var(--sub-color-2);
   text-align: center;
}
.slider__container .heading-en {
   margin-bottom: 80px;
}
.slider__container .slick-prev,
.slider__container .slick-next {
   position: absolute;
   bottom: 0;  /* スライダーの下に出す */
   top: auto;
   transform: none;
   }
   .slider__container .slick-prev:before,
   .slider__container .slick-next:before {
      font-size: 30px;   /* ←ここで大きさを変える */
      color: #fff;       /* 色も自由に */
      opacity: 1;        /* 透明度 */
   }

   .slider__container .slick-prev {
      left: 91%;
      width: 30px;
      height: 30px;
      z-index: 1000;
   }

   .slider__container .slick-next {
      right: 2%;
      width: 30px;
      height: 30px;
   }
   .slider__container .regular_2 .slick-slide {
      padding: 0 13.5px; /* 左右で合計27pxの隙間になる */
      box-sizing: border-box;
   }
   .slider__container .regular_2 img {
      width: 100%;
      aspect-ratio: 4 / 3;   /* 4:3 の比率で統一 */
      object-fit: cover;     /* はみ出してもいいからトリミング */
      display: block;
   }

   .works_label {
      font-size: 2rem;
      color: var(--sub-color-2);
   }

   @media (max-width: 1024px) {
      .slider__container .slick-prev {
      left: 87%;
   }
   }

   @media (max-width: 768px) {
      .slider__container {
         margin-top: 50px;
         padding: 85px 0 85px 20px;
      }
      .slider__container .slick-prev {
         left: 85%;
   }
   }

   @media (max-width: 600px) {
      .slider__container .slick-prev {
      left: 78%;
   }
   }



/* ====================
recruit page
==================== */
.container-m {
   width: var(--container-m);
}
.recruit__about-container {
   width: 100%;
}
.recruit__about-top, .recruit__about-sec {
   display: flex;
   gap: 20px;
}
.recruit__about-right-down {
   display: flex;
   gap: 20px;

}

.recruit__about-top img, .recruit__about-sec img{
   box-shadow: 2px 2px 6px 0px rgba(76, 76, 76, 0.4);
   margin-bottom: 20px;
}
.recruit__big-image {
   flex: 0 0 calc(50% - 10px); /* gap分を引く */
   max-width: calc(50% - 10px);
   width: 100%;
   height: auto;
}
/* 右側のブロック全体を50%に */
   .recruit__about-right {
   flex: 0 0 calc(50% - 10px);
   max-width: calc(50% - 10px);
   }

   /* 中サイズは親の50% */
   .recruit__middle-image {
   width: 100%;
   /* height: 50%; */
   }

   /* 小サイズは右カラム内で 50% ずつ */
   .recruit__about-right-down {
   display: flex;
   gap: 20px;
   }
   .recruit__about-right-down .recruit__small-image {
   flex: 0 0 calc(50% - 10px);
   max-width: calc(50% - 10px);
   }
   .recruit__about-sec {
   display: flex;
   gap: 20px;
   }

   /* 平均残業時間 → 左半分ぜんぶ */
   .recruit__about-sec .recruit__middle-image {
   flex: 0 0 calc(50% - 10px);  /* gapを考慮 */
   max-width: calc(50% - 10px);
   }

   /* 休日数 → 右半分のさらに半分サイズ */
   .recruit__about-sec .recruit__small-image {
   flex: 0 0 calc(25% - 15px);  /* gapを考慮して25% */
   max-width: calc(25% - 15px);
   }
   
   .recruit__about-sec .recruit__middle-image {
      height: 50%;
   }


@media (max-width: 960px) {
   .container-m {
      width: 85%;
   }
}

@media (max-width: 600px) {
   .recruit__about-container, .recruit__about-sec {
      display: block;
      width: 100%;
   }
   .recruit__about-top, .recruit__about-sec {
      display: block;
      gap: 10px;
   }
   .recruit__about-right-down {
      display: flex;
      gap: 10px;
   }
   .recruit__about-top img, .recruit__about-sec img{
      margin-bottom: 10px;
   }

   .recruit__big-image,
   .recruit__middle-image,
   .recruit__about-right {
         max-width: 100%;
   }

  /* 平均年齢と勤続年数はそのまま2列 */
  .recruit__about-right-down .recruit__small-image {
    grid-column: auto; /* デフォルトでOK */
  }

  /* 平均残業時間は2列ぶち抜き */
  .recruit__about-sec .recruit__middle-image {
      max-width: 100%;
  }

  /* 休日数だけ左寄せ（右は空白） */
  .recruit__about-sec .recruit__small-image {
      max-width: calc(50% - 10px);
  }
     .recruit__about-right-down .recruit__small-image {
   flex: 0 0 calc(50% - 5px);
   max-width: calc(50% - 5px);
   }
}

/* ----- 業務内容 ----- */
.big__container {
   margin: 0 auto;
   margin-top: 120px;
}
.recruit__content-box {
   display: flex;
   gap: 40px;
   margin-bottom: 40px;
}
.recruit__content-box img {
   max-width: 497px;
   width: 41.4%;
}
.recruit__content-text {
   max-width: 666px;
   width: 55.5%;
}
.recruit__content-text h3 {
   font-size: 2.7rem;
   font-weight: bold;
   color: var(--accent-color-1);
   margin-bottom: 22px;
}

@media (max-width: 1024px) {
   .recruit__content-box {
   display: block;
   margin-bottom: 40px;
}
.recruit__content-box img {
   max-width: 660px;
   width: 100%;
   margin-bottom: 20px;
}
.recruit__content-text {
   max-width: 666px;
   width: 100%;
   margin: 0 auto;
}
.recruit__content-text h3 {
   margin-bottom: 9px;
}
}

@media (max-width: 600px) {
   .big__container {
      margin-top: 85px;
      width: 90%;
}
   .recruit__content-text h3 {
      font-size: 5vw;
   }
}


/* ----- 1日の流れ ----- */
/* 縦線を年表全体に1本 */
   .flow__box {
      display: flex;
      gap: 20px;
   }
   .flow__items {
   position: relative;
   width: 67%;
   }
   .flow__items::before {
   content: "";
   position: absolute;
   top: 27px;
   bottom: 30px;
   left: 15px; 
   width: 2px;
   background: #CBCBCB;
   }

   /* 各アイテム */
   .flow__item {
   display: flex;
   align-items: flex-start;
   margin-bottom: 32px;
   gap: 80px;
   }

   /* 時間 */
   .flow__time {
   flex: 0 0 150px;  /* 一番長い時間に合わせる */
   min-width: 150px;
   font-size: 2.8rem;
   font-weight: bold;
   color: #e6731c;
   text-align: left;
   padding-right: 20px;
   box-sizing: border-box;
   white-space: nowrap; /* 改行禁止 */
   }


   /* ドット（縦線上） */
   .flow__dot {
   position: relative;
   left: -6px;
   top: 5px;
   width: 47px;
   height: 47px;
   border-radius: 50%;
   background: #e6731c;
   z-index: 1;
   flex: 0 0 45px;
   }

   /* 内容（見出し＋内容） */
   .flow__content {
   flex: 1;
   /* font-size: 1.8rem; */
   }

   .flow__title {
   font-size: 2.6rem;
   margin-bottom: 4px;
   }

   .flow__text {
      font-size: 1.6rem;
   }

   @media (max-width: 1134px) {
      .flow__items::before {
         bottom: 85px;
      }
   }

   @media (max-width: 1024px) {
      .flow__items::before {
         left: 19px; 
      }
      .flow__item {
         flex-wrap: wrap;       /* 折り返しOKにする */
         gap: 0 12px;        /* 縦横の間隔 */
      }

      .flow__dot {
         flex: 0 0 40px;        /* ドットの幅 */
         height: 40px;
         left: 0;
      }

      .flow__time {
         flex: 1;               /* ドットの横に時間を広げる */
         min-width: 0;          /* 折り返し抑制 */
         text-align: left;
         padding-right: 0;
      }

      .flow__content {
         flex: 1 1 100%;        /* 1行全体を占有して下に回り込む */
         margin-left: 40px;     /* ドットの位置に揃えるなら調整 */
      }
      }

   .flow__images {
      max-width: 345px;
      width: 100%;
      height: auto;
   }
   .flow__images img {
      margin-bottom: 52px;
      
   }
   @media (max-width: 768px) {
      .flow__box {
      display: block;
      gap: 20px;
   }
   .flow__items {
      width: 100%;
   }
   .flow__images {
         max-width: 614px;
      }
}

/* ---- Youtube ---- */
.recruit__movie {
   background-color: #3F3D56;
   padding: 76px 0;
   margin-top: 120px;
}
.recruit__h2 {
   text-align: center;
   font-size: 3.4rem;
   font-weight: bold;
   color: var(--sub-color-2);
   margin-bottom: 20px;
}
.recruit__movie iframe {
  display: block;        /* 中央寄せ可能にする */
  margin: 0 auto;        /* 中央寄せ */
  width: 560px;          /* PC用の固定幅 */
  height: 315px;         /* アスペクト比16:9 */
  max-width: 100%;       /* 念のためはみ出し防止 */
}

/* スマホ用にレスポンシブ化 */
@media (max-width: 768px) {
   .recruit__h2 {
   font-size: 5vw;
   }
   .recruit__movie iframe {
      width: 90%;          /* 画面幅の90% */
      height: auto;        /* 高さは比率で維持 */
      aspect-ratio: 16/9;  /* CSSでアスペクト比を維持 */
   }
}

/* ---- インタビュー ---- */
.interview {
   background-image: url("./images/recruit-bg.png");
   background-size: cover;      /* 全体に広げる */
   background-position: center; /* 中央寄せ */
   padding-top: 120px;
   padding-bottom: 135px;
}

.interview__inner {
   padding-top: 120px;
   background-color: #fff;
   border-radius: 10px;
   max-width: 1200px;
   width: 100%;
   padding: 60px 5%;
   margin: 0 auto;
   margin-top: 65px;
   position: relative;
}
.interview__intro {
   display: flex;
   gap: 68px;
}
.interview__img {
   width: 43.5%;
}
.interview-sp-none {
   display: block;
}
.interview-pc-none {
   display: none;
}
.interview__text-box {
   width: 59%;
}
.interview__catch {
   position: relative;
   font-size: 3.2rem;
   font-weight: 400;
   line-height: 1.8;
   text-align: start;      
   max-width: 700px;        /* 幅制限（必要なら） */
   margin: 0 auto 40px;     /* セクション内で中央配置 */
   padding: 0 40px 0 50px;         /* 擬似要素分の余白 */
   }

   .interview__catch::before,
   .interview__catch::after {
   content: "「";             /* ← beforeは左鉤括弧 */
   position: absolute;
   color: #e6731c;            /* オレンジ色 */
   font-size: 3rem;           /* 大きさ調整 */
   line-height: 1;
   }

   .interview__catch::before {
   content: "「";
   top: 0;
   left: 0;
   }

   .interview__catch::after {
   content: "」";
   bottom: 0;
   right: 0;
   }
   .interview__name {
      font-size: 2.4rem;
      font-weight: bold;
      text-align: right;
   }
   .interview__question {
      font-size: 2.4rem;
      font-weight: 500;
      color: var(--accent-color-1);
      margin-bottom: 38px;
   }
   .interview__answer {
      line-height: 2.9rem;
   }
   .interview__toggle {
   display: inline-flex;
   align-items: center;
   gap: 8px; /* テキストと＋の間隔 */
   font-size: 1.6rem;
   color: #333;
   cursor: pointer;
   position: absolute;
   bottom: 20px;
   right: 20px;
   }

   .toggle-icon {
   display: inline-flex;
   justify-content: center;
   align-items: center;
   width: 60px;
   height: 60px;
   border-radius: 50%;
   background: #e6731c;
   color: #fff;
   font-size: 33px;
   line-height: 1;
   }


.interview__more {
   overflow: hidden;             /* 中身がはみ出さないように */
   max-height: 0;                /* 初期状態は高さゼロ */
   transition: max-height 0.5s ease; /* 開閉のアニメーション */
   max-width: 690px;
   width: 100%;
   margin: 0 auto;
}
.interview__block {
   margin-top: 68px;

}

@media (max-width: 1024px) {
   .interview__catch {
   font-size: 2.8rem;
   font-weight: 400;
   line-height: 1.6;    
   }
}

@media (max-width: 960px) {
   .interview {
      padding-top: 80px;
      padding-bottom: 80px;
}
   .interview__intro {
   display: block;
   gap: 68px;
}
   .interview__img {
      width: 70%;
      margin: 0 auto;
}
   .interview-sp-none {
      display: none;
}
   .interview-pc-none {
      display: block;
   }
   .interview__text-box {
      width: 73%;
      margin: 0 auto;
      margin-top: 30px;
      min-height: 650px;
      height: auto;
   }
   
}
@media (max-width: 600px) {
   .interview__text-box {
      width: 100%;
      margin: 0 auto;
      margin-top: 30px;
      min-height: 400px;
      height: auto;
      padding-bottom: 40px;
   }
   .interview__catch {
      font-size: 2rem;
      padding: 0 24px 0 40px;
   }
   .interview__name {
      font-size: 1.8rem;
   }
   .interview__question {
      font-size: 1.8rem;
      margin-bottom: 10px;
      margin-top: 30px;
   }
   .interview__block {
      margin-top: 50px;
   }
   .interview__block:first-of-type {
   margin-top: 0;
   }
   .interview__more .interview__block:first-child .interview__question {
   margin-top: 0;
   }

   .interview__toggle {
   bottom: 10px;
   right: 20px;
   }
   .toggle-icon {
      width: 44px;
      height: 44px;
      font-size: 30px;
   }
}

/* ---- 募集要項 ----*/
.recruit-info {
   max-width: 1200px;
   width: 80%;
   margin: 0 auto;
   margin-top: 120px;
   background: #fff;
   border-radius: 8px;
   padding: 80px 24px;
}
.recruit-info .h2-top,
.recruit-info .heading-en {
   text-align: center;
}
.recruit-info-topic {
   text-align: center;
   background-color: #FDF6DD;
   width: 50%;
   margin: 0 auto;
   margin-bottom: 30px;
   padding: 20px;
   border-radius: 10px;
}
.recruit-hope {
   font-size: 2.8rem;
   font-weight: bold;
}
.recruit-hope .text_orange {
   color: var(--accent-color-1);
}
.recruit-info__table {
   width: 80%;
   border-collapse: collapse;
   margin: 0 auto;
   
   }

   .recruit-info__table th,
   .recruit-info__table td {
   border-bottom: 1px solid #ddd;
   padding: 12px;
   text-align: left;
   }

   .recruit-info__table th {
   width: 20%;
   font-weight: bold;
   color: #333;
}

@media (max-width: 1024px) {
   .recruit-info {
      width: 95%;
   }
}

@media (max-width: 960px) {
   .recruit-info-topic {
      width: 80%;
   }
   .recruit-hope {
      font-size: 2.4rem;
   }
}

@media (max-width: 600px) {
   .recruit-info-topic {
      width: 90%;
   }
   .recruit-hope {
      font-size: 2.2rem;
   }
   .recruit-info__table {
   width: 90%;
   }
   .recruit-info__table th {
      width: 29%;
   }
   .btn-main {
      width: 100%;
   }
   .recruit-info__table,
   .recruit-info__table tbody,
   .recruit-info__table tr,
   .recruit-info__table th,
   .recruit-info__table td {
      display: block;
      width: 100%;
   }

   .recruit-info__table tr {
      margin-bottom: 1.5em; /* 各行の間隔 */
   }

   .recruit-info__table th {
      background: #f5f5f5;
      padding: 8px 10px;
      border: none;
   }

   .recruit-info__table td {
      padding: 8px 10px;
      border: none;
   }
   }

   .sns_container {
      max-width: 1200px;
      width: 80%;
      margin: 0 auto;
      text-align: center;
      padding: 50px 0;
   }
   .btn-instagram {
   display: inline-flex;
   align-items: center;
   gap: 8px; /* アイコンと文字の間 */
   padding: 12px 24px;
   border: 2px solid #e6731c;
   border-radius: 8px;
   font-size: 2rem;
   font-weight: bold;
   text-decoration: none;
   transition: all 0.3s ease;
   background: #fff;
   }

   .btn-instagram:hover {
   background: #e6731c;
   color: #fff;
   }

   .btn-instagram__icon {
   width: 20px;
   height: 20px;
   filter: grayscale(100%); /* モノクロ */
   transition: all 0.3s ease;
   }
   .btn-instagram:hover .btn-instagram__icon {
   content: url('./images/icon-instagram-white.svg'); /* 白に差し替え */
   }












   /* ===================
   contact page
   =================== */
   .site-content .contact-phone {
      margin-top: 96px;
      margin-bottom: 74px;
   }
   .contact__phone-box {
      background-color: #E2E6EF;
      border-radius: 10px;
      padding:4.6% 9.6%;
   }
   .contact__phone .contact-title,.contact__mail .contact-title {
      text-align: center;
   }
   .contact__phone .heading-en {
      margin-bottom: 2em;

   }
   .number-box {
      background-color: #fff;
      border-radius: 10px;
      padding: 3%;
   }
   .number {
      display: flex;
      justify-content: center; /* 横方向の中央寄せ */
      align-items: center;     /* 縦方向の中央寄せ */
      gap: 17px; 
      margin: 33px 0;
   }
   .number img {
      max-width: 83px;
      width: 100%;
   }
   .number-text {
      font-size: 3.6rem;
      font-family: var(--font-en);
      font-weight: 700;
      color: #2F2E41;
      margin: 0;
      text-decoration: none;
   }
   .open-time {
      text-align: center;
      font-size: 2rem;
      
   }

   .contact__mail {
      margin: 74px 0;
   }

   .contact__mail-box {
      background-color: #fff;
      border-radius: 10px;
      padding:4.6% 9.6%;
   }

   @media (max-width: 600px) {
      .contact__phone .contact-title, .contact__mail .contact-title {
         font-size: 4.5vw;
      }
      .number img {
         max-width: 60px;
      }
      .number-text {
         font-size: 5vw;
      }
      .open-time {
         font-size: 1.8rem;
      }
      .center {
         margin-bottom: 60px;
      }
   }