@charset "utf-8";
html{
	overflow-x: hidden;
	scroll-behavior: smooth;
}
/* ボディ設定*/
body {
	-webkit-text-size-adjust: none;
	font-family: 'Noto Sans JP', sans-serif;
 	font-size: 16px;
	line-height: 24px;
	color: #1f3a5f;
  	text-align:left;
  	margin: 0;
  	padding: 0;
	background-color: #fff;
}
h1,h2,h3,h4,h5,h6,p,ul,li,dl, dt, dd{
  	margin: 0;
  	padding: 0;
}
li img,dt img,dd img{
	vertical-align:bottom;
}
ol, ul {
	list-style:none;
}
img{
	max-width: 100%;
	height: auto;
	vertical-align:middle;
	border:0px;
	transition: 1.0s ;
}
a:hover img{
  opacity: 0.7;
}
* {
	box-sizing: border-box;
}

/* リンクの色 */
a {
	COLOR: #1a0dab;
	text-decoration: none;
}
a:link {
  color: #ff9901;
}
a:visited {
  color: #ff9901;
}
a:hover {
  color: #ff6201;
}
a:active {
  color: #ff6201;
}

/*Clearfix*/
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
.clearfix {
	zoom: 1;
}
/*インデント*/
.txt-ind{
	padding-left: 1em;
	text-indent: -1em;
}

/*全体の枠
---------------------------------------------------------------------------*/
#wrapper{
	width:100%;
}
/*タイトル明朝*/
h1,h2,h3,h4,h5,h6{
  	font-family: 'Noto Serif JP', serif;
}
/*PC・スマホ切り替え*/
@media screen and (max-width: 576px) {
	.pc-only{display: none;}
}
@media screen and (min-width: 576px){
	.br-sp {display: none; }
	.sp-only{display: none;}
}
/*インナーボックス*/
.sec-box-inner{
	width: 1500px;
	margin: auto;
}
@media screen and (max-width: 1550px) {
	.sec-box-inner{
		width: 1440px;
	}
}
@media screen and (max-width: 1450px) {
	.sec-box-inner{
		width: 1110px;
	}
}
@media all and (max-width:1200px){
	.sec-box-inner{
		width: 930px;
	}
}
@media all and (max-width:992px){
	.sec-box-inner{
		width: 690px;
	}
}
@media all and (max-width:768px){
	.sec-box-inner{
		width: 510px;
	}
}
@media all and (max-width:576px){
	.sec-box-inner{
		width: 92%;
	}
}



/*セクションの色分け*/
.sec-color-w{
	background-color: #fff;
	padding: 80px 0;
}
.sec-color-b{
	background-color: #1c273b;
	padding: 80px 0;
}
.sec-color-g{
	background-color: #f9fafb;
	padding: 80px 0;
}
._text-center{
	text-align: center;
}

/*ヘッダー　グローバルナビ
---------------------------------------------------------------------------*/
body{
	padding-top: 136px; /* ヘッダー高さと合わせる */
}
@media (max-width: 1024px) {
	body{
		padding-top: 80px; /* ヘッダー高さと合わせる */
	}
}
/* ===============================
   header-top + nav固定
=============================== */
.header-top {
  background: #fff;
  height: 80px;
  width: 100%;
  display: flex;
  align-items: center;
  position: fixed;  /* 固定 */
  top: 0;
  left: 0;
  z-index: 9999;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.header-inner {
  width: 1500px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-logo img {
  max-width: 300px;
}

.header-buttons {
  display: flex;
  gap: 22px;
}

.header-btn {
  width: 146px;
  height: 45px;
  background: #ff9900;
  color: #fff !important;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 16px;
  text-decoration: none;
  transition: all .3s ease;
}

.header-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* ===============================
   nav（グレー背景）固定
=============================== */
.header-nav {
  background: #f9fafb;
  height: 56px;
  display: flex;
  align-items: center;
  position: fixed;   /* 固定 */
  top: 80px;         /* 白ヘッダーの下に配置 */
  left: 0;
  width: 100%;
  z-index: 9998;
  transition: height .4s ease;
}

.header-menu {
  width: 1500px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  gap: 100px;
  list-style: none;
}

.header-menu > li {
  position: relative;
	padding: 10px 0;
}

.header-menu a {
  color: #000;
  text-decoration: none;
  font-size: 16px;
}

/* ▼ アイコン */
.header-arrow {
  margin-left: 8px;
  font-size: 14px;
  transition: transform .3s ease;
  position: relative;
  top: -1px;
}

/* PC hoverで矢印回転 */
.has-dropdown:hover .header-arrow {
  transform: rotate(180deg);
}
/* ===============================
   dropdown
=============================== */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all .3s ease;
  box-shadow: 0 15px 35px rgba(0,0,0,.12);
  border-radius: 6px;
  overflow: hidden;
  pointer-events: none;
}

@media (min-width: 1025px) {
  .has-dropdown:hover .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

}

.dropdown li {
  list-style: none;
}

.dropdown a {
  display: block;
  padding: 14px;
  transition: .3s;
  pointer-events: auto;
  z-index: 10000; /* 親オーバーレイより上 */
}

.dropdown a:hover {
  background: #ff9900;
  color: #fff;
}


/* ===============================
   hamburger
=============================== */
.header-hamburger {
  position: relative;
  width: 30px;
  height: 24px;
  display: none;
  cursor: pointer;
  z-index: 9999;
	margin-right: 20px;
}

.header-hamburger span {
  position: absolute;
  width: 100%;
  height: 3px;
  background: #ff9900;
  left: 0;
  transition: .4s ease;
}

.header-hamburger span:nth-child(1) { top: 0; }
.header-hamburger span:nth-child(2) { top: 10px; }
.header-hamburger span:nth-child(3) { bottom: 0; }

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

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

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

/* ===============================
   overlay
=============================== */
body.menu-open::before {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  z-index: 9997;
}
/* ===============================
   Responsive
=============================== */
@media (max-width: 1024px) {
	
	.header-menu > li {
		padding: 0;
	}
	.header-logo img {
	  max-width: 280px;
		margin-left: 10px;
	}

  /* ===============================
     表示切替
  =============================== */
  .header-buttons { 
    display: none; 
  }

  .header-hamburger { 
    display: flex; 
  }

  /* ===============================
     ハンバーガーメニュー全体
  =============================== */
  .header-nav {
    position: fixed;
    top: 80px; /* ヘッダー下 */
    left: 0;
    width: 100%;
    height: 0;
    background: #f9fafb;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transition: height .4s ease;
    z-index: 9998;
  }

  .header-nav.open {
    height: calc(100vh - 80px);
  }

  /* ===============================
     メニュー本体（上揃え）
  =============================== */
  .header-menu {
    flex-direction: column;
    gap: 30px;
    padding: 10px 30px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    justify-content: flex-start;
    align-items: stretch; /* 横幅いっぱいに */
  }

  .header-menu > li {
    width: 100%;
  }

  /* ===============================
     ドロップダウン
  =============================== */
  .dropdown {
    position: static;
    display: none;
    width: 100%;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    max-height: 80vh;
    overflow-y: auto;
	  margin-top: 10px;
  }

  .dropdown li {
    width: 100%;
  }

  .dropdown a {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .has-dropdown.active .dropdown {
    display: block;
  }

  /* ===============================
     SPでは矢印回転しない
  =============================== */
  .has-dropdown:hover .header-arrow,
  .has-dropdown.active .header-arrow {
    transform: rotate(0deg) !important;
  }
	
	.dropdown li {
	  border-bottom: 1px solid #e0e0e0;
	}
	.dropdown li:last-child {
	  border-bottom: none;
	}
	
/*調整*/
	.header-menu-plaus-last{
		padding-bottom: 100px;
	}
	.header-menu > li > a {
		display: block;
		width: 100%;
		padding: 0 0 15px;
		border-bottom: 1px solid #e0e0e0;
	}
  .header-menu > li:first-child > a {
    padding-top: 15px;
  }
}
/*スマホメニューのみ表示*/
@media (min-width: 1024px) {
	.header-menu-plaus{
		display: none;
	}
}


/*メイン画像
---------------------------------------------------------------------------*/
  :root{
    --hero-height: 700px; /* デスクトップの高さ（必要ならレスポンシブで上書き） */
  }

  /* ヘッダー（例） */
  header.site-header{
    width:100%;
    height:72px;            /* ヘッダー高さの例 */
    background:#222;
    color:#fff;
    display:flex;
    align-items:center;
    padding:0 20px;
    box-sizing:border-box;
  }

  /* 動画コンテナ */
  .hero {
    position:relative;
    width:100%;
    height:var(--hero-height);
    overflow:hidden;       /* はみ出し分をカットする */
    background:#000;       /* 動画読み込み時の背景色 */
  }

  /* video 要素はコンテナいっぱいにして中央を切り出す */
  .hero video {
    position:absolute;
    top:50%;
    left:50%;
    width:100%;
    height:100%;
    min-width:100%;
    min-height:100%;
    transform:translate(-50%,-50%);
    object-fit:cover;      /* 中央を保ったまま切り出す */
    object-position:center;
  }

  /* 波画像：動画の上に重ねて下端に合わせる */
  .hero .wave {
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;              /* 動画コンテナの下端に合わせる */
    width:100%;
    height:auto;
    pointer-events:none;   /* クリックを邪魔しない */
    z-index:2;             /* 動画より上に */
    display:block;
  }

  /* 必要なら動画上のテキストを置く例（波の上に来るようにz-indexは1） */
  .hero .hero-inner{
    position:relative;
    z-index:1;
    color:#fff;
    padding:30px;
  }

  /* ヘッダーが fixed（固定）な場合：動画をヘッダー下に隠さないようにする */
  .site-header.fixed + .hero {
    margin-top:72px; /* ヘッダー高さ分の余白（固定ヘッダー使用時）*/
  }

  /* レスポンシブ例：小さい画面では高さを短く */
  @media (max-width:900px){
    :root{ --hero-height: 420px; }
  }
  @media (max-width:480px){
    :root{ --hero-height: 320px; }
  }

/*ページトップ
---------------------------------------------------------------------------*/
#scrollToTopBtn {
    position: fixed;
    bottom: 55px;
    right: 20px;
    display: none; /* 初期状態では非表示 */
    border: none;
    padding: 0px;
    border-radius: 30px;
    cursor: pointer;
    font-size: 18px;
    z-index: 1010;
  transition: all .3s ease;
}
#scrollToTopBtn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/*CTA
---------------------------------------------------------------------------*/
.cta-container {
    display: none;
}
/*690以下 510*/
@media all and (max-width:768px){
    .cta-container {
        display: flex;
        justify-content: space-around;
        text-align: center;
        padding: 1px;
        background-color: #f9f9f9;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
		z-index: 1000;
    }
    .cta-container a{
        color: #fff;
    }
    .cta-button {
        background-color: #ff7900;
        color: white;
        border: none;
        padding: 10px 10px;
        margin: 5px;
        font-size: 16px;
        cursor: pointer;
        border-radius: 5px;
        width: 92%;
        max-width: 300px;
    }
    .cta-button:hover {
        background-color: #ff7900;
    }
}
/*510以下 92%*/
@media all and (max-width:576px){
}

/*パンくず
---------------------------------------------------------------------------*/
.pankuzu-line{
	width: 100%;
	margin:0 auto;
}
.pankuzu{
	padding: 15px;
	text-align: left;
	margin: 0px auto;
	font-size: 13px;
}
.breadcrumb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: normal;/*太字*/
}

.breadcrumb li:after {/* >を表示*/
  content: '＞';
  padding: 0 0.2em;
  color: #666666;
}
.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #666666;/*色*/
}

.breadcrumb li a:hover {
  text-decoration: underline;
}
.breadcrumb li a:hover {
  text-decoration: underline;
}
.pankuzu-home{
	margin-left: 5px;
}
@media screen and (max-width: 768px) {
	.pankuzu{
		padding: 3px 15px;
		font-size: 12px;
	}
}


/*トップページ
---------------------------------------------------------------------------*/
.sec-box-inner h2 {
  font-size: 48px;
  line-height: 1.5em;
  color: #1f3a5f;
  text-align: center;
  padding-bottom: 22px;
  margin-bottom: 20px;
  position: relative; /* 疑似要素用 */
  border-bottom: none; /* 元の線を消す */
}

/* 下線（64px幅） */
.sec-box-inner h2::after {
  content: "";
  display: block;
  width: 64px;           /* 下線の長さ */
  height: 4px;           /* 線の太さ */
  background: #ff9901;   /* 線の色 */
  margin: 12px auto 0;   /* 上下位置・中央寄せ */
}
.sec-box-inner h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5em;
  color: #ff9901;
  text-align: center;
  margin-bottom: 5px;
  letter-spacing: 2px; /* 文字間 */
}
.sec-box-inner p {
  max-width: 800px;
  width: 100%;
  margin: 0 auto 50px;
}
@media (max-width: 1024px) {
  .sec-box-inner h2 {
    font-size: 36px;
  }
}
@media (max-width: 768px) {
  .sec-box-inner h2 {
    font-size: 28px;
  }
	.sec-box-inner h6 {
	  letter-spacing: 0px; /* 文字間 */
	}
}
/* -------------------------------
   三段ボックス 全体
---------------------------------*/
.sandan-box {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* ボックス間の隙間 */
  width: 100%;
  justify-content: center;
  margin: 0 auto;
  box-sizing: border-box;
}
.sandan-item {
  flex: 1 1 calc(33.333% - 20px); /* 3列表示、隙間考慮 */
  max-width: 487px;               /* 任意で最大幅 */
  background: #fff;
  border-radius: 12px;
  box-shadow: 5px 5px 8px rgba(0,0,0,0.2);/*box-shadow: 水平方向のズレ 垂直方向のズレ ぼかしの半径 影の広がり 色;*/
  overflow: hidden;
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}
.sandan-item img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-top-left-radius: 12px;   /* 上角丸 */
  border-top-right-radius: 12px;
}
.sandan-content {
  padding: 28px 24px 28px 24px; /* 上28px・左右24px・下28px */
  display: flex;
  flex-direction: column;
}

.sandan-content h4 {
  font-size: 20px;
  color: #000;
  margin: 0 0 20px 0; /* 下20px空ける */
}

.sandan-content p {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
}
.sandan-content span{
	font-size: 0.8em;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .sandan-item {
    flex: 1 1 calc(50% - 20px); /* 2列に */
  }
}

@media (max-width: 768px) {
  .sandan-item {
    flex: 1 1 100%; /* 1列に */
  }
}

/* -------------------------------
   new-box
---------------------------------*/
.new-box {
  background: #fff;
  border-radius: 10px;
  padding: 30px 50px;
  box-sizing: border-box;
  margin: 0 auto 50px auto;
  max-width: 1200px;
}
.new-box ul {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #b2b2b2;
}

.new-box ul:last-child {
  border-bottom: none;
}
.news-date {
  font-size: 14px;
  margin: 0 30px 0 0; /* 右30px空ける */
  line-height: 1.5;
}

.news-kate{
  display:flex;
  align-items:center;
  justify-content:center;

  width:120px;
  height:20px;

  background:#ee8100;
  color:#fff;
  font-size:13px;
  font-weight:bold;
  text-align:center;

  margin-right:30px;

  border-radius:9999px; /* ★ 半丸 */
  transition:all .3s ease;
}

.news-kate a{
  color: #fff!important;
}

.news-title{
  font-size:18px;
  font-weight:500;
  font-family:'Noto Serif JP', serif;
  color:#000;
  line-height:1.6;
  flex:1;

  text-rendering:optimizeLegibility;
}
.news-title a{
  color: #000!important;
}
.new-box ul li {
  padding: 18px;
  box-sizing: border-box;
}

.news-kate:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  transform: translateY(-3px);
}

.btn-wrap {
  text-align: center;
  margin-bottom: 50px;
}

.btn-01 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 54px;
  background: #2c3e50;
  color: #fff!important;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  transition: all .3s ease;
}
.btn-01:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transform: translateY(-3px);
}

/* -------------------------------
   レスポンシブ
---------------------------------*/
@media (max-width: 1024px) {
  .new-box {
    padding: 20px 30px;
  }

  .new-box ul {
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid #b2b2b2;
    padding: 10px 0;
  }

  .new-box ul li {
    padding: 5px 0;
    margin-right: 0;
  }

  .news-kate {
    margin-bottom: 0px;
  }

  .news-title {
    font-size: 16px;
  }

  .btn-01 {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .new-box {
    padding: 15px 20px;
  }
  .news-title {
    font-size: 16px;
  }
  .news-kate {
    font-size: 12px;
    height: 24px;
  }
}

/* -------------------------------
   contents-box 2段組み
---------------------------------*/
.contents-box {
  display: flex;
  flex-wrap: wrap;
  gap: 48px; /* 左右間隔 */
  width: 100%;
  margin: 50px auto 100px;
  align-items: flex-start;
  box-sizing: border-box;
}
.contents-box-aki {
  margin: 50px auto 0px;
}

/* テキスト部分*/
.contents-text {
  flex: 1 1 400px; /* 最小幅400pxで伸縮 */
  max-width: 726px; /* 横幅最大 */
  display: flex;
  flex-direction: column;
}

.contents-text h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5em;
  color: #ff9901;
  text-align: left;
  margin-bottom: 5px;
  letter-spacing: 2px;
}

.contents-text h2 {
  font-size: 48px;
  line-height: 1.5em;
  color: #1f3a5f;
  text-align: left;
  padding-bottom: 22px;
  margin-bottom: 20px;
  position: relative;
  border-bottom: none;
}

.contents-text h2::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  background: #ff9901;
  margin: 12px 0 0 0;
}

.contents-text p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 28px;
  max-width: 100%;
}

.contents-text .btn-01 {
  width: 100%;
  max-width: 300px;
}

/* 写真部分*/
.contents-photo {
  flex: 1 1 300px;
  max-width: 726px;
}

.contents-photo img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
  object-fit: cover;
}

  .contents-box.reverse {
    flex-direction: column; /* 写真左、テキスト右 */
  }
@media (min-width: 1024px) {
  /* reverseクラスがある場合は左右反転 */
  .contents-box.reverse {
    flex-direction: row-reverse; /* テキスト左、写真右 */
  }
}
/* -------------------------------
   レスポンシブ
---------------------------------*/
@media (max-width: 1024px) {
  .contents-box {
    flex-direction: column;
    gap: 30px;
  }
  .contents-text,
  .contents-photo {
    max-width: 100%;
    flex: 1 1 100%;
  }
  .contents-text h2 {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .contents-text h2 {
    font-size: 28px;
  }
	.contents-text h6 {
	  letter-spacing: 0px; /* 文字間 */
	}
  .contents-text p {
    font-size: 16px;
  }
  .contents-text .btn-01 {
    display: flex;                  /* フレックス化 */
    justify-content: center;        /* 横中央 */
    align-items: center;            /* 縦中央 */
    width: 100%;                    /* 幅100% */
    max-width: 300px;               /* 最大幅 */
    margin: 20px auto 0;            /* 上20px、左右中央 */
    text-align: center;             /* 念のため中央揃え */
    height: 54px;                   /* 高さを固定すると縦中央が確実 */
  }
}

/*　フッター
---------------------------------------------------------------------------*/
.sec-box-inner-border {
  border-bottom: 1px solid #fff; /* 線の色・太さ */
}

/* -------------------------------
   採用情報
---------------------------------*/
.top-recruit-box p{
	font-size: 18px;
	line-height: 1.8;
	text-align: center;
}

/* -------------------------------
   top-contact-box お問い合わせ
---------------------------------*/
.top-contact-box {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto 20px;       /* 下30px余白 */
  padding: 40px 30px 5px;        /* 上下60px・左右30px */
  background: #fff;
  border-radius: 10px;
  text-align: center;         /* 中身中央寄せ */
  box-sizing: border-box;
}

.top-contact-box h2 {
  font-size: 30px;
  color: #1f3a5f;
	line-height: 1;
  margin-bottom: 0px;
}
.top-contact-box h2::after {
  content: none; /* 下線を消す */
}

.top-contact-box p {
  font-size: 18px;
  margin-bottom: 30px;
  line-height: 1.6;
}

/* ボタン */
.top-contact-box .btn-02 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;           /* 採用情報ボタンと同じ */
  height: 54px;
  background: #ff9900;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.top-contact-box .btn-02:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);
  transform: translateY(-3px);
}

/* 営業時間 */
.contact-hours {
  text-align: center;
  margin-bottom: 30px;      /* ボックス下30px */
}

.contact-hours p {
  color: #fff;
	font-size: 18px;
	line-height: 1.8;
}

/* -------------------------------
   レスポンシブ
---------------------------------*/
@media (max-width: 1024px) {
  .top-contact-box {
    padding: 40px 20px;
  }
  .top-contact-box h2 {
    font-size: 26px;
  }
  .top-contact-box p {
    font-size: 16px;
    margin-bottom: 30px;
  }
  .top-contact-box .btn-02 {
    width: 100%;
    max-width: 300px;
  }
  .contact-hours p {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .top-contact-box {
    padding: 30px 15px;
  }
  .top-contact-box h2 {
    font-size: 22px;
  }
  .top-contact-box p,
  .contact-hours p {
    font-size: 14px;
  }
}

/* -------------------------------
   バナー
---------------------------------*/
.bnr-box {
  display: flex;
  justify-content: center; /* PCでも中央寄せ */
  flex-wrap: wrap;         /* 折り返し可能 */
  max-width: 1500px;       /* コンテナ幅制限 */
  margin: 0 auto;          /* ページ中央配置 */
  gap: 20px;               /* 画像間の隙間 */
}

.bnr-box img {
  width: 230px;  /* 固定横幅 */
  height: auto;
  display: block;
	margin: 0 30px;
}

@media all and (max-width: 1024px) {
  .bnr-box img {
    margin: 0 auto;    /* 左右中央に */
    margin-bottom: 20px;
  }
}

@media all and (max-width: 480px) {
  .bnr-box img {
    margin: 0 auto;    /* 左右中央 */
    margin-bottom: 20px;
  }
}

/* -------------------------------
   バナー
---------------------------------*/
.tomeshi-box{
	margin-bottom: 40px;
	width: 100%;
	text-align: center;
}

/* -------------------------------
   フッター
---------------------------------*/
.fooder_box {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  color: #fff;
  box-sizing: border-box;
  width: 100%;
  max-width: 1500px;
  margin: 0 auto;
  gap: 30px;
}

/* 左側（ロゴ＋住所） */
.footer-company {
  flex: 0 0 29%;
  display: flex;
  flex-direction: column;
	margin-bottom: 50px;
}

.footer-company img {
  width: 100%;
  max-width: 300px; /* ロゴ最大幅 */
  height: auto;
	margin-bottom: 35px;
}

.footer-company p {
	margin: 0;
	padding: 0;
  text-align: left;
	line-height: 1.8em;
}

/* 右側メニュー */
.footer-menu {
  flex: 0 0 68%;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-menu > div {
  flex: 1 1 22%; /* 4列均等 */
  display: flex;
  flex-direction: column;
}

.footer-menu h5 {
  color: #ff9900;
  font-size: 20px;
  margin-bottom: 18px;
  font-weight: bold;
}

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

.footer-menu ul li {
  margin-bottom: 8px;
}

.footer-menu ul li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.5;
}

/* -------------------------------
   レスポンシブ
---------------------------------*/
@media all and (max-width: 1200px) {
  .fooder_box {
    flex-direction: column;
    padding: 40px 20px;
    gap: 40px;
  }

  .footer-company {
    flex: 1 1 100%;
    align-items: flex-start;
  }

  .footer-menu {
    flex: 1 1 100%;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
  }

  .footer-menu > div {
    flex: 1 1 45%; /* 2列表示 */
    margin-bottom: 20px;
	  border-top: 1px solid #fff;
	  padding-top: 30px;
  }
}

@media all and (max-width: 576px) {
  .footer-menu > div {
    flex: 1 1 100%; /* 1列表示 */
	  border-top: 1px solid #fff;
	  padding-top: 30px;
  }
}

/* -------------------------------
   コピーライト
---------------------------------*/
.copy_right_box{
	width: 100%;
	text-align: center;
	color: #ffffff;
	background-color: #1c273b;
	padding: 35px 0 100px;
	font-size: 14px;
}



/*　サブタイトル
---------------------------------------------------------------------------*/
.sub-title{
  position:relative;
  width:100%;
  height:clamp(180px,28vw,380px);
  overflow:hidden;
}

/* ======================
   背景画像
====================== */
.sub-title-photo {
  position: absolute;
  top: 50%;
  left: 50%;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transform: translate(-50%, -50%);
}

/* ======================
   黒50%オーバーレイ
====================== */
.sub-title::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 1;
}

/* ======================
   タイトル文字
====================== */
.sub-title-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  color: #fff;
  font-size: 48px;
  font-weight: bold;
  text-align: center;

  z-index: 2;
  width:90%;
}

@media (max-width: 768px) {
  .sub-title-text {
    font-size: 28px;
  }
}

/*　会社案内　社長あいさつ
---------------------------------------------------------------------------*/

/* ======================
   挨拶文章
====================== */
.contents-text h5{
	color: #000;
	font-size: 28px;
	line-height: 1.5;
	margin-bottom: 40px;
}
.content-name{
	width: 100%;
	font-size: 20px;
	text-align: right;
}
.content-name span{
	font-size: 0.8em;
}


/* ======================
   youtube
====================== */
.youtube-box {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.youtube-box iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  display: block;
}

/* ======================
   環境
====================== */
.company-kankyo-box{
	text-align: center;
}
/* ======================
   会社案内ボタン
====================== */
.company-menu-box ul li a {
  display: inline-flex;              /* 横並び・中央揃え */
  align-items: center;
  justify-content: center;

  width: 243px;                      /* 横幅 */
  height: 52px;                       /* 高さ */
  
  background-color: #2c3e50;         /* ボタン色 */
  color: #fff !important;            /* 文字色 */
  font-size: 18px;
  font-weight: bold;
  border-radius: 10px;               /* 角丸 */
  text-decoration: none;
  
  transition: all 0.3s ease;         /* ホバーアニメーション */
}

/* ホバー時の挙動 */
.company-menu-box ul li a:hover {
  box-shadow: 0 6px 16px rgba(0,0,0,0.2);  /* 影 */
  transform: translateY(-3px);             /* 軽く浮く */
}

/* 横並び設定 */
.company-menu-box ul {
  display: flex;
  justify-content: center;
  gap: 30px;            /* ボタン間隔 */
  flex-wrap: wrap;       /* 画面幅が狭いと折り返す */
  padding: 0;
  margin: 0;
  list-style: none;
}

/* レスポンシブ（スマホ縦並び＆幅調整） */
@media (max-width: 768px) {
  .company-menu-box ul {
    flex-direction: column;
    align-items: center;
  }
}



/*　会社案内　会社概要
---------------------------------------------------------------------------*/

/* ===============================
   会社概要
=============================== */
.about-box{
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}

.about-table{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  background: #fff;
  border-top: 1px solid #ddd;
}

/* 行 */
.about-table tr{
  border-bottom: 1px solid #ddd;
}

/* 見出し */
.about-table th{
  width: 260px;
  background: #1f3a5f;
  text-align: left;
  padding: 18px 20px;
  font-weight: bold;
  vertical-align: top;
	color: #fff;
}

/* 内容 */
.about-table td{
  padding: 18px 20px;
  line-height: 1.8;
}

/* URL折返し対策 */
.about-table td,
.about-table th{
  word-break: break-word;
}

@media (max-width: 768px){

  .about-table,
  .about-table tbody,
  .about-table tr,
  .about-table th,
  .about-table td{
    display: block;
    width: 100%;
  }

  .about-table tr{
    margin-bottom: 20px;
    border: 1px solid #ddd;
  }

  .about-table th{
    width: 100%;
    background: #2c3e50;
    color: #fff;
    padding: 12px 15px;
  }

  .about-table td{
    padding: 15px;
  }
}

/*　会社案内　組織図
---------------------------------------------------------------------------*/
.organization-box{
	width: 100%;
	text-align: center;
}

/*　会社案内　沿革
---------------------------------------------------------------------------*/
.history-box{
  width:100%;
  padding:0px;
  box-sizing:border-box;
}

.history-list{
  max-width:1200px;
  margin:0 auto;
  list-style:none;
  padding:0;
}

/* ===============================
   li
=============================== */
.history-list li{
  position:relative;
  padding:10px 0px;
}
/* PCのみhover */
@media (hover:hover){
  .history-list li{
    transition:.4s;
  }

  .history-list li:hover{
    transform:translateY(-4px);
    box-shadow:0 10px 30px rgba(0,0,0,.08);
  }
}
/* ===== 中央線（各liで生成）===== */
.history-list li::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:4px;
  background:#e0e0e0;
  transform:translateX(-50%);
  z-index:5;
}

/* 最初と最後調整 */
.history-list li:first-child::after{
  top:40px;
}

.history-list li:last-child::after{
  bottom:40px;
}

/* ===== 丸 ===== */
.history-list li::before{
  content:"";
  position:absolute;
  top:40px;
  left:50%;
  width:30px;
  height:30px;
  background:#ff9901;
  border-radius:50%;
  transform:translate(-50%,-50%);
  border:6px solid #fff;
  z-index:10;
}

/* ===============================
   コンテンツ
=============================== */
.history-content{
  width:50%;
  padding:20px 0 1px;
  background:#fff;
  position:relative;
  z-index:3;
}
.history-content p{
}
/* 背景交互 */
.history-list li:nth-child(odd) .history-content{
  margin-left:auto;
  padding-left:60px;
  background:#f9fafb;
}

.history-list li:nth-child(even) .history-content{
  padding-right:60px;
  text-align:right;
  background:#fcfcfc;
}

/* ===============================
   年号
=============================== */
.history-year{
  display:flex;
  align-items:flex-end;
  gap:6px;
}

.history-list li:nth-child(even) .history-year{
  justify-content:flex-end;
}

.history-year h4{
  font-size:48px;
  font-weight:bold;
  line-height:1;
}

.history-year h5{
  font-size:26px;
  font-weight:bold;
}

.history-content p{
  margin-top:18px;
  line-height:1.8;
}

/* ===============================
   SP
=============================== */
@media (max-width:768px){

  .history-list li::after{
    left:20px;
    transform:none;
  }

  .history-list li::before{
    left:2px;
    transform:translateY(-50%);
  }

  .history-content{
    width:100%;
    margin-left:0;
    padding-left:60px;
    text-align:left;
  }

  .history-year{
    justify-content:flex-start!important;
  }
	.history-list li:nth-child(even) .history-content{
	  text-align:left;
	}
}

/*　会社案内　アクセス
---------------------------------------------------------------------------*/
.access-box{
	margin-bottom: 30px;
}
.access-box-text{
	width: 100%;
	text-align: center;
}
.access-box-text span{
	font-weight: bold;
	font-size: 1.1em;
	line-height: 2;
}
.access-box-okoshi{
	margin-top: 120px;
	text-align: center;
}
.access-box-okoshi h3{
	font-size: 36px;
	margin-bottom: 40px;
}

@media (max-width: 1024px) {
  .access-box-okoshi h3 {
    font-size: 36px;
  }
}
@media (max-width: 768px) {
  .access-box-okoshi h3 {
    font-size: 28px;
  }
}

/*　サイトマップ
---------------------------------------------------------------------------*/
.sitemap-box{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:30px;
  justify-content:center;
}

/* group box */
.sitemap-group-box{
  width:276px;
  border:1px solid #1f3a5f;
	background-color: #fff;
  border-radius:10px;
  padding:23px;
  box-sizing:border-box;
  text-align:left;
}

/* 英語見出し */
.sitemap-group-box h6{
	text-align: left;
  font-size:14px;
  color:#ff9901;
  margin-bottom:10px;
  letter-spacing:0.05em;
}

/* 日本語見出し */
.sitemap-group-box h5{
  font-size:26px;
  color:#1f3a5f;
  position:relative;
  padding-bottom:20px;
  margin-bottom:30px;
}

/* 下線 */
.sitemap-group-box h5::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:64px;
  height:3px;
  background:#ff9901;
}

/* link list*/
.sitemap-group-box ul{
  list-style:none;
  padding:0;
  margin:0;
}

.sitemap-group-box li{
  margin-bottom:10px;
}

.sitemap-group-box a{
  color:#1f3a5f;
  text-decoration:none;
  transition:0.3s;
}

.sitemap-group-box a:hover{
  color:#ff9901;
}
/* Tablet */
@media (max-width:1024px){

  .sitemap-box{
    justify-content:center;
  }

  .sitemap-group-box{
    width:calc(50% - 15px);
  }

}

/* Smartphone */
@media (max-width:640px){

  .sitemap-group-box{
    width:100%;
  }

}



/*　プライバシーポリシー
---------------------------------------------------------------------------*/
.privacy-box{
  max-width:1000px;
  margin:0 auto;
  text-align:left;
}

/* 本文段落 */
.privacy-box p{
  margin-bottom:30px;
	max-width:1000px!important;
}
.privacy-box span{
	font-weight: bold;
}

/* 親リスト（番号付き） */
.privacy-box > ul{
  list-style:none;
  padding:0;
  margin:0;
  counter-reset: privacy-number;
}

.privacy-box > ul > li{
  position:relative;
  padding-left:2.2em;
  margin-bottom:28px;
}

/* 数字表示 */
.privacy-box > ul > li::before{
  counter-increment: privacy-number;
  content: counter(privacy-number) ".";
  position:absolute;
  left:0;
  top:0;
  font-weight:bold;
  color:#1f3a5f;
}

/* リスト */
.privacy-box-ten{
  list-style:none;
  padding-left:1em;
  margin-top:10px;
}

.privacy-box-ten li{
  position:relative;
  padding-left:1em;
  margin-bottom:6px;
}

.privacy-box-ten li::before{
  content:"・";
  position:absolute;
  left:0;
}
@media (max-width:768px){

  .privacy-box{
    padding:0 20px;
    font-size:15px;
    line-height:1.8;
  }

  .privacy-box > ul > li{
    padding-left:2em;
  }

}

/*　採用情報
---------------------------------------------------------------------------*/
/*小さいタイトル*/
.sub-small-title h2 {
  font-size: 36px;
  line-height: 1.5em;
  color: #1f3a5f;
  text-align: left;
  padding-bottom: 22px;
  margin-bottom: 20px;
  position: relative; /* 疑似要素用 */
  border-bottom: none; /* 元の線を消す */
}

/* 下線（64px幅） */
.sub-small-title h2::after {
  content: "";
  display: block;
  width: 64px;           /* 下線の長さ */
  height: 4px;           /* 線の太さ */
  background: #ff9901;   /* 線の色 */
  margin: 12px 0 0;   /* 上下位置・中央寄せ */
}
.sub-small-title h6 {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: normal;
  font-size: 14px;
  line-height: 1.5em;
  color: #ff9901;
  text-align: left;
  margin-bottom: 5px;
  letter-spacing: 2px; /* 文字間 */
}
@media (max-width: 1024px) {
  .sub-small-title h2 {
    font-size: 30px;
  }
}
@media (max-width: 768px) {
	.sub-small-title h2 {
		font-size: 24px;
		text-align: center;
	}
	.sub-small-title h6 {
		letter-spacing: 0px; /* 文字間 */
		text-align: center;
	}
	.sub-small-title h2::after {
	  margin: 12px auto 0;   /* 上下位置・中央寄せ */
	}
}


.recruit-text-box{
	text-align: center;
	font-size: 32px;
	line-height: 1.5;
}

@media (max-width: 1024px) {
	.recruit-text-box{
		font-size: 24px;
	}
}
@media (max-width:768px){
	.recruit-text-box{
		font-size: 18px;
	}
}


/*　リクルート
---------------------------------------------------------------------------*/
/*内部リンクの上をあける*/
#voice{
  scroll-margin-top:120px;
}

/* 全体 */
.recruit-box{
  width:100%;
  display:flex;
  justify-content:flex-start;
  gap:60px;
  box-sizing:border-box;
}

/* 2カラム */
.recruit-box-dan{
  width:50%;
}
.recruit-box-dan h3{
  font-size:28px;
  line-height:2;
  margin-bottom:40px;
}

@media (max-width: 1024px) {
	.recruit-box-dan h3{
		font-size: 24px;
	}
}
@media (max-width:768px){
	.recruit-box-dan h3{
		text-align: center;
		font-size: 18px;
	}
}

/* 画像 */
.recruit-box-dan img{
  width:100%;
  border-radius:8px;
  margin-top:20px;
}

.recruit-box table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
	border-top:1px solid #e5e5e5;
}

.recruit-box th,
.recruit-box td{
  padding:18px;
  border-bottom:1px solid #e5e5e5;
  vertical-align:top;
}

.recruit-box th{
  width:180px;
  background:#f7f7f7;
  font-weight:600;
  text-align:left;
}

/* ホバーで高級感 */
.recruit-box tr{
  transition:.3s;
}

.recruit-box tr:hover{
  background:#fafafa;
}

/* -------------------------
   SP
--------------------------*/
@media (max-width:1024px){

  .recruit-box{
    flex-direction:column;
    gap:60px;
    padding:60px 5%;
  }

  .recruit-box-dan{
    width:100%;
  }

}

/* -------------------------
   SP TABLE
--------------------------*/
@media (max-width:768px){

  .recruit-box table,
  .recruit-box tbody,
  .recruit-box tr,
  .recruit-box th,
  .recruit-box td{
    display:block;
    width:100%;
  }

  .recruit-box th{
    background:#1f3a5f;
    color:#fff;
    margin-top:20px;
  }

  .recruit-box td{
    padding:15px 10px 25px;
  }
	.recruit-box table{
		border-top:none;
	}
}

/* 環境・品質方針
---------------------------------------------------------------------------*/
/*内部リンクの上をあける*/
#iso14001, #iso9001{
  scroll-margin-top:120px;
}
.environment-box{
  width:100%;
  display:flex;
  justify-content:center; /* 横中央 */
}

.environment-box{
  display:grid;
  grid-template-columns:repeat(2, auto);
  gap:50px;
  justify-content:center;
  margin:80px auto;
}

/* ボタン幅安定 */
.environment-box .btn-01{
  min-width:260px;
  text-align:center;
}
.iso-box .img-hover img {
    display: block;           /* 余白や下の隙間を防ぐ */
    width: 100%;              /* 親要素に合わせる場合 */
    border: 1px solid rgba(0,0,0,0.2);  /* 黒20%の実線1px */
    box-sizing: border-box;   /* 枠が画像サイズに収まる */
}

/* =====================
   SP
===================== */
@media (max-width:768px){

  .environment-box{
    grid-template-columns:1fr;
    gap:25px;
  }

  .environment-box .btn-01{
    width:100%;
    max-width:320px;
    margin:0 auto;
  }

}

/* =====================================
   ISO BOX
===================================== */

.iso-box{
  width:100%;
  display:flex;
  gap:60px;
  padding:70px 50px;
  border:1px solid #2c3e50;
  box-sizing:border-box;
}

/* -------------------
   左：画像
--------------------*/
.iso-box > div:first-child{
  width:50%;
}

.iso-box img{
  width:100%;
  height:auto;
  display:block;
}

/* -------------------
   右：文章
--------------------*/
.iso-box > div:last-child{
  width:50%;
}

.iso-box p{
  line-height:1.8;
  margin:0;
}

/* =====================
   TABLET
===================== */
@media (max-width:1024px){

  .iso-box{
    gap:40px;
    padding:60px 40px;
  }

}

/* =====================
   SP
===================== */
@media (max-width:768px){

  .iso-box{
    flex-direction:column;
    gap:40px;
    padding:50px 25px;
  }

  .iso-box > div:first-child,
  .iso-box > div:last-child{
    width:100%;
  }

}

/* 機械設備
---------------------------------------------------------------------------*/
.mechanical-box{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:50px;
  padding: 0;
  box-sizing:border-box;
  flex-direction:row-reverse;/*左右反転*/
}

.mechanical-info{
  flex:1;
  text-align:left;
}

/* 説明文 */
.mechanical-info p{
  text-align:left;
  line-height:2;
}

/* ---- TABLE ---- */
.mechanical-table{
  margin-top:0px;
}

.mechanical-table table{
  width:100%;
  border-collapse:collapse;
}

.mechanical-table th,
.mechanical-table td{
  border:1px solid #cccccc;
  padding:14px 18px;
}

/* th */
.mechanical-table th{
  background:#1f3a5f;
  color:#fff;
  font-weight:bold;
  width:20%;
  text-align:left;
}

/* td */
.mechanical-table td{
  background:#ffffff;
}

.mechanical-photo{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:50px;
}

/* 写真 */
.mechanical-photo-box{
  width:100%;
  overflow:hidden;
  border-radius:10px;
}

.mechanical-photo-box img{
  width:100%;
  height:auto;
  display:block;
  border-radius:10px;
}

@media (max-width:1024px){
  .mechanical-box{
    gap:40px;
  }
}

@media (max-width:768px){
  .mechanical-box{
    flex-direction:column;
    gap:50px;
  }
  .mechanical-info,
  .mechanical-photo{
    width:100%;
    flex:none;
  }
  /* SPは info → photo */
  .mechanical-info{
    order:1;
  }
  .mechanical-photo{
    order:2;
  }
  .mechanical-table th,
  .mechanical-table td{
    padding:12px;
  }
}
.mechanical-table h4{
	font-size: 28px;
	margin: 0 0 20px;
}
@media (max-width: 1024px) {
	.mechanical-table h4{
		font-size: 24px;
	}
}
@media (max-width:768px){
	.mechanical-table h4{
		font-size: 22px;
	}
}
.mechanical-top-aki{
	padding-top: 60px;
}

/* ===============================
   SP テーブル横スクロール
================================*/
@media (max-width:768px){
	.mechanical-table{
	  overflow-x:auto;
	  -webkit-overflow-scrolling:touch;
	}
	/* テーブルを広げる */
	.mechanical-table table{
	  min-width:350px;
	  width:100%;
	}
	.mechanical-table th{
	  width:35%;
	}
	
	/* 横スクロールの時の幅を大きく */
	.mechanical-table-wide {
	  min-width:800px!important;
	  width:100%;
	}
	.mechanical-table-wide th{
	  width:20%!important;
	}
	/* スクロールヒント */
	.mechanical-table-wide::after{
	  content:"⇠ Swipe ⇢";
	  display:block;
	  font-size:12px;
	  color:#666;
	  margin-top:8px;
	  text-align:right;
	  letter-spacing:0.05em;
}
}

/* お問い合わせ
---------------------------------------------------------------------------*/
.pt05-soushin-bo .btn-01{
    display: flex;                  /* フレックス化 */
    justify-content: center;        /* 横中央 */
    align-items: center;            /* 縦中央 */
    width: 100%;                    /* 幅100% */
    max-width: 300px;               /* 最大幅 */
    margin: 20px auto 0;            /* 上20px、左右中央 */
    text-align: center;             /* 念のため中央揃え */
    height: 54px;                   /* 高さを固定すると縦中央が確実 */
}
.hissu-txt{
	color: #bf0039;
}
.contact-tel h4{
	font-size: 52px;
}
.contact-tel span{
	font-size: 34px;
}

@media (max-width: 1200px) {
	.contact-tel h4{
		font-size: 30px;
	}
	.contact-tel span{
		font-size: 20px;
	}
}
@media (max-width:768px){
	.contact-tel h4{
		font-size: 34px;
	}
	.contact-tel span{
		font-size: 22px;
	}
}

.contact-eigyo{
	margin-top: 40px;
}
.sec-box-inner .contact-box .contact-tel .contact-eigyo p{
	padding: 0;
	margin: 0 0 10px;
}
.contact-eigyo span{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  color:#fff;
  background:#1f3a5f;

  padding:4px 12px;
  min-width:80px;

  font-size:14px;
  font-weight:700;
  line-height:1;

  box-sizing:border-box;
	margin-right: 10px;
}

/* --- 全体2カラム --- */
.contact-box{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:stretch;
  gap:50px;
  box-sizing:border-box;
}
.contact-tel{
  flex:1;
  border:1px solid #cccccc;
  border-radius:10px;
  padding:50px;
  text-align:left;
  box-sizing:border-box;
}
.contact-mail{
  flex:1;
  border:1px solid #cccccc;
  border-radius:10px;
  padding:50px;
  text-align:left;
  box-sizing:border-box;
}
.contact-tel img{
  width:100%;
  height:auto;
  border-radius:10px;
  margin-top:30px;
  display:block;
}
@media (max-width:1400px){
	.contact-box{
	  gap:40px;
	}
	.contact-tel,
	.contact-mail{
	  padding:40px;
	}
}
/* ======================
   SP
====================== */
@media (max-width:1200px){
	.contact-box{
	  flex-direction:column;
	  gap:30px;
	}
	.contact-tel,
	.contact-mail{
	  width:100%;
	  padding:30px 25px;
	}
}