/* ベーススタイル */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
    scroll-behavior: smooth; /* スムーズスクロール */
    -webkit-text-size-adjust: 100%; /* iOSのテキストサイズ調整を無効化 */
	overflow-x: hidden;
}

body {
    font-family: "Noto Sans JP", sans-serif;
    line-height: 2.222;
    color: #07090a;
    background-color: #fff;
    font-size: 18px;
	/*overflow-x: clip;*/
	/*font-feature-settings: 'palt';*/
}

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

ul {
    list-style: none;
}

a {
    /*color: #007ed3;*/
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

section{
	overflow: visible;
}

main{
	margin:0 auto!important;
}
/* 1920pxベース用ラッパ */
.site-wrapper {
  /*max-width: 1920px;*/
  margin: 0 auto;
  background-color: #fff;
  min-height: 100vh;
  position: relative;
}


/* アニメーションの定義 */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* 適用したい要素（bodyなど）に指定 */
.fade-in-page {
  animation: fadeIn 1.5s ease-out;
}

/* 時計回りに360度回転させるキーフレーム */
@keyframes rotateSlow {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}




main [id] {
  scroll-margin-top: 160px;
}

.forsp{
	display: none;
}

.SP-h{
	display: none;
}

.SP-image{
	display: none;
}


/* ヘッダー -------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
	height: auto;
  z-index: 1000;
	padding-left: 78px;
	padding-right: 45px;
	transition: 0.3s;
}

.site-header.scrolled{
	background: rgba(0, 0, 0, 0.5);
}



.header-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.header-logo{
	/*width: clamp(60px,7.55vw,145px);*/
	width: 145px;
	height: auto;
	z-index: 999;
}


.nav-wrapper{
	height: 156px;
	display: flex;
	align-items: center;
	gap: 64px;
}


.header-nav{
    width: auto;
    display: flex;
    justify-content: flex-start;
    align-items: center;
}


.header-nav ul {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.header-nav a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  position: relative;
	transition: 0.3s;
}

.header-nav a:hover{
}

.header-nav li{
	position: relative;
}
.header-nav li::after{
	content: '';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	width: 1px;
	height: 17px;
}
.header-nav li:first-child::before{
	content: '';
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	background: #fff;
	width: 1px;
	height: 17px;
}

.header-nav li a{
	display: block;
	width: 100%;
	height: 100%;
	padding: 0 56px;
}
.header-nav li a:hover{
	color: #e72728;
}

.header-tel{
	display: block;
	width: 341px;
	aspect-ratio: 341 / 72;
}

.header-tel a img{
	width: 100%;
	height: 100%;
}


.header-nav li.forSP{
	display: none;
}




/* ハンバーガーボタン（PCでは非表示） */
.header-menu-toggle {
  display: none; /* 1280px以下でdisplay:blockにする */
  background: #e72728;
  border: none;
  padding: 17px;
  cursor: pointer;
    width: 60px;
    aspect-ratio: 1 / 1;
}

.header-menu-toggle span {
  display: block;
  width: 26px;
  height: 4px;
  background-color: #fff;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.header-menu-toggle span + span {
  margin-top: 6px;
}

/* 開いているときの×アイコン風アニメーション */
.site-header.is-open .header-menu-toggle span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}

.site-header.is-open .header-menu-toggle span:nth-child(2) {
  opacity: 0;
}

.site-header.is-open .header-menu-toggle span:nth-child(3) {
  transform: translateY(-9px) rotate(-45deg);
}

/* メニュー展開時の背景オーバーレイ */
.header-overlay {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
  opacity: 0;
  pointer-events: none;
  z-index: 900; /* ヘッダー(1000)より下、コンテンツより上 */
  transition: opacity 0.3s ease;
}

/* メニューオープン時に有効化（JSでbodyにmenu-openクラスを付与） */
body.menu-open .header-overlay {
  opacity: 1;
  pointer-events: auto;
}



/* フッター -------------------------------------------------- */
.site-footer {
  background-color: #07090a;
  color: #fff;
  position: relative;
	width: 100%;
	padding: 118px 0 0;
	margin: 0 auto;
}

.footer-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 45px 45px 100px;
  display: flex;
  flex-direction: column;
}
.footer-inner-upper {
     width: 100%;
    display: flex;
    justify-content: space-between;
	margin-bottom: clamp(20px,9.11vw,175px);
}

.footer-inner-upper .company-name{
	font-size: 30px;
	line-height: 1.333;
	font-weight: bold;
}


.footer-inner-upper .address{
	font-size: 20px;
	line-height: 1.5;
	margin-bottom: 80px;
	font-weight: bold;
}

.footer-logo {
    width: 105px;
    aspect-ratio: 105 / 76;
	margin-left: -26px;
	margin-right: calc(45px + 26px);
	margin-top: 8px;
}


.footer-info{
	display: flex;
}

.tel-and-fax{
	display: flex;
	flex-direction: column;
	gap: 25px;
}
.tel-and-fax img{
	height: 18px;
    align-self: flex-start;
}

.footer-nav{
	width: 100%;
	max-width: 313px;
	display: flex;
	flex-direction: column;
	padding-left: 45px;
}

.footer-nav ul {
	width: 100%;
	display: flex;
	flex-direction: column;
}

.footer-nav ul li{
	width: 100%;
	min-height: 50px;
	position: relative;
    display: flex;
	justify-content: space-between;
	align-items: center;
	
	border-bottom: solid 1px #e72728;
	transition: 0.3s;
}
.footer-nav ul li::after{
	content: '';
	background-image: url("../images/button-after-wh.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 17px;
	height: 17px;
}
.footer-nav ul li:hover::after{
	background-image: url("../images/button-after-hover-wh.svg");
}

.footer-nav a {
  font-size: 16px;
	color: #fff;
  text-decoration: none;
	line-height: 1;
	padding: 10px 15px;
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
}



.footer-copy {
  font-size: 16px;
  color: #fff;
	margin-left: calc(105px + 45px);
}

footer .marquee-container{
	padding: 0;
}

footer .marquee-item img{
	height: 167px;
}



/* TOPへ戻るボタン -------------------------------------------------- */

.pagetop {
    /*position: fixed;*/
	position: absolute;
    bottom: 246px;
    right: 57px;
    width: 142px;
    aspect-ratio: 142 / 102;
    /*opacity: 0;*/
	display: flex;
	justify-content: center;
	align-items: center;
    /*transform: translateY(20px);*/
    z-index: 999;
    /*transition: opacity .3s ease, transform .3s ease, bottom .3s ease;*/
}

/*.pagetop.is-fixed {
    bottom: 246px; 
    opacity: 1;
    transform: translateY(0);
}*/

.pagetop img{
	width: 100%;
	height: 100%;
}


/* 共用パーツ -------------------------------------------------- */

.button{
	width: 100%;
	max-width: 434px;
	height: 117px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: solid 1px #e72728;
	color: #e72728;
	font-size: 20px;
	line-height: 1;
	position: relative;
	padding: 10px 40px;
	transition: 0.3s;
}



.button::after{
	content: '';
	background: url("../images/button-after-or.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 30px;
	aspect-ratio: 1 / 1;
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	display: block;
}

.button:hover::after{
	background: url("../images/button-after-hover-or.svg");
}

.button.button-wh{
	border: solid 1px #fff;
	color: #fff;
}
.button.button-wh::after{
	background: url("../images/button-after-wh.svg");
}

.button.button-wh:hover::after{
	background: url("../images/button-after-hover-wh.svg");
}







.footer-contact{
    width: 100%;
	padding: 195px 45px 135px;
	min-height: 744px;
    background-image: url(../images/back.png);
    background-size: contain;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}



.footer-contact .section-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 90px 0 70px;
	width: 100%;
	max-width: 1110px;
	border-bottom: solid 2px #e22b25;
	border-right: solid 2px #e22b25;
	border-left: solid 2px #e22b25;
	position: relative;
}
/*.footer-contact .section-inner::before{
	content: '';
	display: block;
	width: 225px;
	height: 2px;
	background-color: #e22b25;
	position: absolute;
	top: 0;
	left: 0;
}
.footer-contact .section-inner::after{
	content: '';
	display: block;
	width: 225px;
	height: 2px;
	background-color: #e22b25;
	position: absolute;
	top: 0;
	right: 0;
}*/

.footer-contact .h-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: 65px;
    margin-top: -165px;
	width: 100%;
}

.footer-contact .h-box > img{
	height: 30px;
	aspect-ratio: 216 / 30;
}
.footer-contact .h-box h2{
	height: 62px;
	aspect-ratio: 609 / 62;
	margin-bottom: 60px;
	width: 100%;
    display: flex;
    justify-content: space-between;
	gap: 20px;
}
.footer-contact .h-box h2 span{
    display: block;
    width: 100%;
    height: 2px;
    background: #e22b25;
    margin-top: 25px;
}



.footer-contact .h-box .tugline{
	font-size: 20px;
	font-weight: bold;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	padding: 0 20px;
}
.footer-contact .h-box .tugline .big{
	font-size: 2.05em;
}

.contact-tel-box{
  display: flex;
    justify-content: center;
    align-items: center;
    width: calc(100% - 40px);
    max-width: 800px;
	height: 113px;
	position: relative;
}
.contact-tel-box::before{
	content: '';
	display: block;
	width: 12px;
	height: 113px;
	border-top: solid 1px #e22b25;
	border-bottom: solid 1px #e22b25;
	border-left: solid 1px #e22b25; 
	position: absolute;
	left: 0;
	top: 0;
	bopttom: 0;
}
.contact-tel-box::after{
	content: '';
	display: block;
	width: 12px;
	height: 113px;
	border-top: solid 1px #e22b25;
	border-bottom: solid 1px #e22b25;
	border-right: solid 1px #e22b25; 
	position: absolute;
	right: 0;
	top: 0;
	bopttom: 0;
}

.contact-tel-box a{
	padding: 0 20px;
}

.contact-tel-box img{
	width: 601px;
}













/* ========================================
   マーキー全体
======================================== */

.marquee-container {
  overflow: hidden;
  width: 100%;
  padding: 20px 0;

  display: flex;
  flex-direction: column;
  gap: 20px;
}


/* ========================================
   アニメーション用トラック
======================================== */

.marquee-content {
  /* 調整用 */
  --marquee-duration: 30s;
  --marquee-gap: 40px;

  display: flex;
  width: max-content;

  /* JSで速度計算が終わるまでは停止 */
  animation-name: marquee-left;
  animation-duration: var(--marquee-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-play-state: paused;

  will-change: transform;
  backface-visibility: hidden;
}

/* JSの計算完了後に再生 */
.marquee-content.is-ready {
  animation-play-state: running;
}


/* ========================================
   逆方向
======================================== */

.marquee-content.is-reverse {
  animation-name: marquee-right;
}


/* ========================================
   1セット分のロゴ群
======================================== */

.marquee-item {
  display: flex;
  align-items: center;

  /* 幅が縮まないようにする */
  flex-shrink: 0;

  /*
   * ロゴ同士の間隔
   */
  gap: var(--marquee-gap);

  /*
   * 1セット目の最後と
   * 2セット目の最初の間隔も
   * gapと同じにする
   */
  padding-right: var(--marquee-gap);
}


/* ========================================
   ロゴ画像
======================================== */

.marquee-item img {
  display: block;

  height: 60px;
  width: auto;

  object-fit: contain;
  flex-shrink: 0;

  pointer-events: none;
  user-select: none;

  /*
   * 以前の margin は使用しない
   * 間隔は .marquee-item の gap で管理
   */
  margin: 0;
}


/* ========================================
   アニメーション
======================================== */

/*
 * 右 → 左
 *
 * marquee-item が同一内容で2セットあるため、
 * トラック全体の50% = 1セット分。
 */
@keyframes marquee-left {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}


/*
 * 左 → 右
 */
@keyframes marquee-right {
  from {
    transform: translate3d(-50%, 0, 0);
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}


.marquee-content.is-static { 
	animation: none; 
	transform: translate3d(0, 0, 0); 
	will-change: auto; 
}

/* TOP ---------------------------------- */

#top{
	position: relative;
	width: 100%;
    overflow-x: hidden;
}



/* TOP-ヒーロー -------------------------------------------------- */
#hero {
	width: 100%;
	height: 937px;
	position: relative;
	background-image: url("../images/hero.jpg");
	background-size: cover;
	background-repeat: no-repeat;
}
#hero::before{
	content: '';
	display: block;
	background-image: url("../images/hero-image.svg");
	width: 771px;
	aspect-ratio: 771 / 598;
	position: absolute;
	right: -121px;
	bottom: 133px;
}

#hero .section-inner{
	padding-top: 300px;
	height: 100%;
    position: relative;
}

#hero .tugline-box{
	width: 444px;
	aspect-ratio: 444 / 334;
	margin-left: 78px;
}

#hero .marquee-container{
	position: absolute;
    bottom: 0;
}
#hero .marquee-item img{
	height: 85px;
    margin-right: 70px;
	margin-left: 0;
}

.back{
	width: 100%;
	background-image: url("../images/back.png");
    background-size: contain;
}


#top #section1{
	width: 100%;
}
#top #section1 .section-inner{
	display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 58px;
	padding-bottom: 40px;
}

#top #section1 .marquee-container{
	padding-top: 0;
	padding-bottom: 0;
}

#top #section1 .marquee-item:nth-child(1) img,
#top #section1 .marquee-item:nth-child(2) img{
	height: 166px;
    margin-right: 0;
	margin-left: 0;
}

.material{
	display: flex;
	width: 1110px;
	height: 63px;
	border: solid 2px #e72728;
	margin-top: 85px;
	margin-bottom: 80px;
}
.material-title{
	width: 466px;
	background-color: #e72728;
	display: flex;
	align-items: center;
	padding-left: 18px;
	padding-right: 42px;
	clip-path: polygon(
    0 0,         /* 1: 左上 */
    100% 0,      /* 2: 右上 */
    calc(100% - 10px) 100%, /* 3: 右下 (10px内側へ) */
    0 100%       /* 4: 左下 */
  );
}
.material-title img{
	width: 406px;
	aspect-ratio: 406 / 47;
}

#top #section1 .material .marquee-container{
	width: calc(1110px - 466px);
	display: flex;
    flex-direction: column;
    justify-content: center;
	clip-path: polygon(
    10px 0,       /* 左上 */
    100% 0,       /* 右上 */
    calc(100% - 10px) 100%, /* 右下 */
    0 100%        /* 左下 */
  );
}

#top #section1 .material .marquee-item img{
	height: 41px;
    margin-right: 0;
	margin-left: 0;
}

#top #section1 .h-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	margin-bottom: 65px;
}

#top #section1 .h-box > img{
	height: 30px;
	aspect-ratio: 246 / 30;
}
#top #section1 .h-box h2{
	height: 111px;
	aspect-ratio: 1198 / 111;
}

#top #section1 .flex-box{
	display: flex;
	width: 100%;
	max-width: 1290px;
	padding: 0 30px;
	justify-content: space-between;
}


#top #section1 .flex-box .inner-left{
	width: 600px;
	padding-right: 45px;
}

#top #section1 .flex-box .tugline{
	font-size: 41px;
	font-weight: 800;
	line-height: 1.707;
	margin-bottom: 45px;
}


#top #section1 .flex-box .button .button-text{
	height: 22px;
	aspect-ration: 91 / 22;
}

#top #section1 .flex-box .inner-right{
	max-width: 554px;
}

#top #section1 .flex-box .inner-right .text{
	font-size: 20px;
	line-height: 2;
	font-weight: bold;
}

	
	#top #section1 .button.forSP{
		display: none;
	}

#top #section1 .marquee-item{
	gap: 8px;
	padding-right: 8px;
}


#top #section2{
	width: 100%;
	display: flex;
    flex-direction: column;
    align-items: flex-end;
	padding-top: 235px;
	padding-bottom: 140px;
	position: relative;
}
#top #section2::before{
	content: '';
	display: block;
	background-image: url("../images/top-strength-image-01.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 61.93vw;
	max-width: 1189px;
	aspect-ratio: 1189 / 922;
	position: absolute;
	top: 16.82vw;
	left: -243px;
	z-index: 1;
}
#top #section2::after{
	content: '';
	display: block;
	background-image: url("../images/top-strength-image-02.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 44.32vw;
	max-width: 851px;
	aspect-ratio: 851 / 785;
	position: absolute;
	top: 0;
	left: -64px;
	z-index: 0;
	animation: rotateSlow 20s linear infinite;
	transform-origin: center center;
}



#top #section2 .section-inner{
	width: 100%;
	max-width: 1110px;
	display: flex;
    flex-direction: column;
    align-items: center;
	padding-right: 60px;
	position: relative;
	z-index: 2;
}


#top #section2 .h-box{
	margin-bottom: 68px;
}


#top #section2 .h-box > img{
	height: 30px;
	aspect-ratio: 216 / 30;
	display: block;
	margin-bottom: 14px;
}
#top #section2 .h-box h2{
	height: 69px;
	aspect-ratio: 747 / 69;
	margin-bottom: 40px;
}
#top #section2 .h-box .tugline{
	height: 67px;
	aspect-ratio: 551 / 67;
}

.strength-box{
	width: 100%;
}
.strength-box ul{
	display: flex;
	justify-content: center;
    gap: 10px;
	margin-bottom: 50px;
}
.strength-box ul li{
	width: 359px;
	height: 217px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	padding-bottom: 22px;
}

.strength-box ul li::after {
  content: '';
  position: absolute;
  top: 0;
  left: 18.5px;
  right: 18.5px;
  bottom: 0;
  border: 1px solid #e72728; /* 枠線 */
  transform: skewX(-9.67deg);
}

.strength-box ul li .number{
	height: 41px;
	width: auto;
	position: absolute;
	top: 30px;
	left: -16px;
}


.strength-box ul li .icon{
	position: absolute;
}

.strength-box ul:nth-child(1) li:nth-child(1) .icon{
	width: 85px;
	height: 83px;
	top: 30px;
	left: 147px;
}
.strength-box ul:nth-child(1) li:nth-child(2) .icon{
	width: 84px;
	height: 83px;
	top: 24px;
	left: 139px;
}

.strength-box ul:nth-child(2) li:nth-child(1) .icon{
	width: 94px;
	height: 62px;
	top: 36px;
	left: 139px;
}
.strength-box ul:nth-child(2) li:nth-child(2) .icon{
	width: 84px;
	height: 83px;
	top: 20px;
	left: 143px;
}

.strength-box ul:nth-child(3) li:nth-child(1) .icon{
	width: 86px;
	height: 86px;
	top: 14px;
	left: 142px;
}
.strength-box ul:nth-child(3) li:nth-child(2) .icon{
	width: 86px;
	height: 86px;
	top: 14px;
	left: 146px;
}
.strength-box ul:nth-child(3) li:nth-child(3) .icon{
	width: 81px;
	height: 86px;
	top: 14px;
	left: 158px;
}

.strength-box ul:nth-child(2){
	margin-left: 45px;
}

.strength-box ul:nth-child(3){
	margin-bottom: 0;
}



.strength-box ul li h3{
	font-size: 30px;
	line-height: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-feature-settings: 'palt';
}
.strength-box ul li h3 span{
	display: inline-block;
	font-size: 0.667em;
	font-feature-settings: normal;
}

.strength-box ul:nth-child(1) li:nth-child(1) h3{
	margin-left: 86px;
}
.strength-box ul:nth-child(1) li:nth-child(2) h3{
	margin-left: 54px;
}

.strength-box ul:nth-child(2) li:nth-child(1) h3{
	margin-left: 75px;
}
.strength-box ul:nth-child(2) li:nth-child(2) h3{
	margin-left: 30px;
}

.strength-box ul:nth-child(3) li:nth-child(1) h3{
	margin-left: 36px;
}
.strength-box ul:nth-child(3) li:nth-child(2) h3{
	margin-left: 55px;
}
.strength-box ul:nth-child(3) li:nth-child(3) h3{
	margin-left: 85px;
}



#top #section2 .button{
	margin-top: 75px;
}

#top #section2 .button .button-text {
    height: 14px;
}







#top #section3{
	width: 100%;
	position: relative;
	background-image: url("../images/top-business-back.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
}

#top #section3 .section-inner{
	width: 100%;
	display: flex;
    flex-direction: column;
    align-items: center;
	padding-top: 120px;
	padding-bottom: 165px;
}


#top #section3 .h-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 75px;
}

#top #section3 .h-box > img{
	display: block;
	height: 30px;
	aspect-ratio: 157 / 30;
	margin-bottom: 20px;
}
#top #section3 .h-box h2{
	height: 83px;
	aspect-ratio: 834 / 83;
	margin-bottom: 85px;
}

#top #section3 .h-box .tugline{
	font-size: 41px;
	line-height: 1.5;
	font-weight: bold;
	text-align: center;
}
#top #section3 .h-box .tugline .big{
	font-size: 1.707em;
}

.marquee-wrapper{
    width: 100%;
    overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: 30px;
	margin-bottom: 85px;
}
#top #section3 .marquee-container{
	padding: 0;
}
#top #section3 .marquee-item img{
	height: 67px;
	margin: 0 10px;
}
.marquee-wrapper .forSP{
	display: none;
}

#top #section3 .button {
    margin-bottom: 180px;
}

#top #section3 .button .button-text {
    height: 14px;
}

.our_works-button{
	width: 89.17%;
	max-width: 1712px;
	height: 187px;
}
.our_works-button a{
	display: flex;
	align-items: center;
	width: 100%;
	height: 100%;
	border-top: solid 1px #fff;
	border-bottom: solid 1px #fff;
	padding: 10px 55px 10px 50px;
	position: relative;
	transition: 0.2s;
}

.our_works-button a::after {
    content: '';
    background: url(../images/button-after-wh.svg);
    background-size: contain;
    background-repeat: no-repeat;
    width: 30px;
    aspect-ratio: 1 / 1;
    position: absolute;
    right: 55px;
    top: 50%;
    transform: translateY(-50%);
    display: block;
}

.our_works-button a .button-title{
	width: 606px;
	filter: invert(100%) sepia(1%) saturate(7497%) hue-rotate(249deg) brightness(100%) contrast(102%);
}
.our_works-button a p{
	color: #fff;
	font-size: 50px;
	font-weight: bold;
	line-height: 1;
	margin-top: -8px;
	/*margin-left: 200px;*/
	margin-left: 12.4%;
}

.our_works-button a:hover{
	background: rgba(255,255,255,0.2);
}
.our_works-button a:hover::after{
	background: url("../images/button-after-hover-or.svg");
}
.our_works-button a:hover p{
	color: #e72728;
}
.our_works-button a:hover .button-title{
	filter: invert(24%) sepia(78%) saturate(7466%) hue-rotate(352deg) brightness(98%) contrast(84%);
}

/* 追従する画像の設定 */
.cursor-hover-img {
  position: fixed; /* 画面上の絶対位置指定 */
  top: 0;
  left: 0;
  pointer-events: none; /* マウスイベントを透過させてリンククリックを妨げない */
  opacity: 0; /* 初期状態は非表示 */
  visibility: hidden;
  
  /* カーソルのすぐ下に配置するためのオフセット設定 */
  /* X軸: 中央揃え（-50%）、Y軸: カーソル位置から下に15px離す */
  transform: translate(10px, 25px);
  
  /* 表示時・非表示時のフェードアニメーション */
  transition: opacity 0.2s ease, visibility 0.2s ease;
  
  /* 画像のスタイル */
  width: clamp(100px,20.57vw,395px);
  height: auto;
  z-index: 9999; /* 最前線に表示 */
}

/* ホバー時に表示 */
.our_works-button .cursor-hover-img.is-active {
  opacity: 1;
  visibility: visible;
}















/* 子ページ共通 -------------------------------------------------- */

.child-header{
	display: flex;
	width: 100%;
	/*height: 31.51vw;*/
	height: 605px;
	background-image: url("../images/header-back-business.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

.child-header .title-box{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	position: relative;
	width: 100%;
}





/* 事業案内 -------------------------------------------------- */

#business{
	overflow-x: hidden;
}

#business .child-header{
	background-image: url("../images/header-back-business.jpg");
}

#business .child-header .title-box > img {
    height: 30px;
	max-width: 157px;
    aspect-ratio: 157 / 30;
    display: block;
    margin-bottom: 14px;
}

#business .child-header .title-box h2 {
    height: 111px;
	max-width: 1120px;
    aspect-ratio: 1120 / 111;
    margin-bottom: 154px;
}



#business #section1{
	width: 100%;
	max-width: 1576px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin: 0 auto 200px;
}
#business #section1 .section-inner{
	width: 100%;
	max-width: 1576px;
	min-height: 508px;
	background-color: #e72728;
	position: relative;
	transform: skewX(-9.67deg);
	margin-top: -90px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
    padding-bottom: 170px;
}


#business #section1::before{
	content: '';
	display: block;
	background-image: url("../images/business-deco-01.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 2117px;
	aspect-ratio: 2117 / 211;
	position: absolute;
	bottom: -110px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
}
#business #section1::after{
	content: '';
	display: block;
	background-image: url("../images/business-deco-02.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 461px;
	aspect-ratio: 461 / 426;
	position: absolute;
	bottom: -340px;
	right: -200px;
	z-index: 2;
	animation: rotateSlow 20s linear infinite;
	transform-origin: center center;
}


#business #section1 .section-inner .inner-box{
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1200px;
	min-height: 250px;
	color: #fff;
	transform: skewX(9.67deg);
}

#business #section1 .section-inner .inner-left{
	width: 100%;
	max-width: 600px;
}
#business #section1 .section-inner .inner-right{
	width: 100%;
	max-width: 600px;
	padding-left: 45px;
}

#business #section1 .tugline{
	font-size: 40px;
	line-height: 1.65;
	font-weight: bold;
}
#business #section1 .text{
	font-size: 16px;
	line-height: 2.5;
	font-weight: bold;
}


#business #section2{
	padding-top: 22px;
	width: 100%;
}
#business #section2 .h-box {
        width: 100%;
        max-width: 1260px;
        padding: 0 30px;
        margin: 0 auto 100px;
    }
#business #section2 .h-box > img {
    height: 30px;
	max-width: 216px;
    aspect-ratio: 216 / 30;
    display: block;
    margin-bottom: 14px;
}
#business #section2 .h-box h3 {
    width: 100%;
	max-width: 747px;
    aspect-ratio: 747 / 69;
    margin-bottom: 40px;
}





/* ========================================
   スライダー全体
======================================== */

.slider-area {
  /* メインスライド */
  --slide-width: 1043px;

  /* 左右のスライド間隔 */
  --gap-left: 210px;
  --gap-right: 155px;

  /* Swiper上では右側155pxを基準値とする */
  --swiper-gap: 155px;

  /*
   * 左右の差
   * 210 - 155 = 55px
   */
  --gap-difference: 55px;

  /*
   * 左右非対称なので、
   * 中央スライドを右へ27.5px移動
   */
  --slider-offset: 27.5px;

  /* 左右に見えるスライド */
  --side-visible: 289px;

  /* 内部 */
  --inner-left-width: 577px;
  --inner-right-width: 574px;
  --inner-overlap: 111px;

  /* ボタン */
  --button-size: 79px;

  /* 中央スライドからボタンまで */
  --button-gap-left: 69px;
  --button-gap-right: 25px;

  /* pagination領域 */
  --pagination-space: 85px;

  width: 100%;

  padding: 0 0 152px;
}


/* ========================================
   表示領域

   289 + 210 + 1043 + 155 + 289
   = 1986px
======================================== */

.slider-viewport {
  position: relative;

  width: min(
    100%,
    calc(
      var(--side-visible)
      + var(--gap-left)
      + var(--slide-width)
      + var(--gap-right)
      + var(--side-visible)
    )
  );

  margin-inline: auto;

  /* 左右のスライドをここで切る */
  overflow: hidden;
}


/* ========================================
   Swiper本体
======================================== */

.js-slider {
  position: relative;

  box-sizing: border-box;

  width: 100%;

  /*
   * 左右の間隔が非対称なので
   * 全体を27.5px右へずらす
   */
  left: var(--slider-offset);

  /*
   * Swiper自身では切らない
   */
  overflow: visible;

  padding-bottom: var(--pagination-space);
}


/* ========================================
   各スライド
======================================== */

.js-slider .swiper-slide {
  width: var(--slide-width);
}


/*
 * SwiperのspaceBetweenは155px。
 *
 * 左隣だけさらに55px左へ移動させ、
 *
 * 155 + 55 = 210px
 *
 * にする。
 */
.js-slider .swiper-slide-prev {
  transform: translateX(
    calc(var(--gap-difference) * -1)
  );
}


/* ========================================
   スライド内部
======================================== */

.slide-content {
  display: flex;
  align-items: stretch;

  /*
   * 577 + 574 - 111
   * = 1040px
   */
  width: calc(
    var(--inner-left-width)
    + var(--inner-right-width)
    - var(--inner-overlap)
  );

  /*
   * スライド1043pxに対して
   * 中身は1040pxなので中央配置
   */
  margin-inline: auto;
}


/* ========================================
   左：写真
   前面
======================================== */

.slide-content .inner-left {
  position: relative;

  z-index: 2;

  flex: 0 0 var(--inner-left-width);

  width: var(--inner-left-width);
}


/* ========================================
   右：情報SVG
   写真の背面
======================================== */

.slide-content .inner-right {
  position: relative;

  z-index: 1;

  flex: 0 0 var(--inner-right-width);

  width: var(--inner-right-width);

  /*
   * 左へ111px重ねる
   */
  margin-left: calc(
    var(--inner-overlap) * -1
  );
}


/* ========================================
   画像
======================================== */

.slide-content .inner-left img,
.slide-content .inner-right img {
  display: block;

  width: 100%;
  height: auto;
}


/* ========================================
   ナビゲーションボタン
======================================== */

.slider-button {
  position: absolute;

  z-index: 20;

  /*
   * pagination領域を除いた
   * スライド部分の中央
   */
  top: calc(
    (100% - var(--pagination-space)) / 2
  );

  width: var(--button-size);
  height: var(--button-size);

  padding: 0;

  border: 0;

  background: transparent;

  cursor: pointer;

  transform: translateY(-50%);
}


/* ボタン画像 */
.slider-button img {
  display: block;

  width: 100%;
  height: 100%;
}


/* ========================================
   左ボタン

   中央スライド左端
   ↓
   69px空ける
   ↓
   79pxボタン
======================================== */

.slider-button-prev {
  left: calc(
    50%
    - var(--slide-width) / 2
    - var(--button-gap-left)
    - var(--button-size)
  );
}


/* ========================================
   右ボタン

   中央スライド右端
   ↓
   25px空ける
   ↓
   79pxボタン
======================================== */

.slider-button-next {
  left: calc(
    50%
    + var(--slide-width) / 2
    + var(--button-gap-right)
  );
}


/* ========================================
   同じSVGを左右で使用
======================================== */

.slider-button-next img {
  transform: rotate(180deg);
}


/* ========================================
   ページネーション
======================================== */

.slider-pagination {
  position: absolute;

  z-index: 20;

  /*
   * Swiper本体を27.5px右にずらしているため、
   * paginationだけ元の中央へ戻す
   */
  left: calc(
    var(--slider-offset) * -1
  );

  bottom: 0;

  display: flex;
  justify-content: center;
  align-items: center;

  width: 100%;
}


/* bullet */
.slider-pagination .swiper-pagination-bullet {
  width: 19px;
  height: 19px;
  border: solid 2px #e72728;
  margin: 0 5px !important;
  border-radius: 0;
  background-color: transparent;
  opacity: 1;
}


/* active */
.slider-pagination .swiper-pagination-bullet-active {
  background-color: #e72728;
}
/* =========================================================
   1400px以下
   横型 → 縦型スライドへ変更
========================================================= */

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

  .slider-area {
    /*
     * 縦並びでは大きい方の577pxを
     * スライド基準幅にする
     */
    --slide-width: min(577px, 70vw);

    /*
     * PCカンプの左右非対称配置は解除。
     * タブレットでは左右対称にする。
     */
    --swiper-gap: 100px;

    /*
     * ナビゲーションボタン 79×79pxは維持
     */
    --button-size: 79px;

    /*
     * ボタンと中央スライドとの距離
     */
    --button-gap-responsive: 20px;

    /*
     * ページネーション：
     * スライド下から75px
     * bullet 10pxを加えて85px
     */
    --pagination-space: 85px;
  }


  /* -----------------------------------------------------
     表示領域
  ----------------------------------------------------- */

  .slider-viewport {
    /*
     * PC時の1986px基準は不要。
     * ブラウザ幅いっぱいを使う。
     */
    width: 100%;
  }


  /* -----------------------------------------------------
     Swiper
  ----------------------------------------------------- */

  .js-slider {
    /*
     * PC時に右へ27.5pxずらしていたものを解除
     */
    left: 0;

    padding-bottom: var(--pagination-space);
  }


  /* -----------------------------------------------------
     スライド
  ----------------------------------------------------- */

  .js-slider .swiper-slide {
    width: var(--slide-width);
  }


  /*
   * PCでは左スライドだけ55pxずらして
   * 左210 / 右155を再現していたが、
   * レスポンシブでは左右対称に戻す
   */
  .js-slider .swiper-slide-prev {
    transform: none;
  }


  /* -----------------------------------------------------
     slide-content
     横並び → 縦並び
  ----------------------------------------------------- */

  .slide-content {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;

    width: 100%;

    margin-inline: auto;
  }


  /* -----------------------------------------------------
     左：写真
  ----------------------------------------------------- */

  .slide-content .inner-left {
    position: relative;
    z-index: 2;
    flex: 0 1 auto;
    width: 577px;
    max-width: 100%;
	  margin-top: -50px;
  }


  /* -----------------------------------------------------
     右：情報
  ----------------------------------------------------- */

  .slide-content .inner-right {
    position: relative;
    z-index: 1;

    flex: 0 1 auto;

    width: 574px;
    max-width: 100%;

    /*
     * 横型時の111px重なりを解除
     */
    margin-left: 0;
  }


  /* -----------------------------------------------------
     画像
  ----------------------------------------------------- */

  .slide-content .inner-left img,
  .slide-content .inner-right img {
    display: block;

    width: 100%;
    height: auto;
  }


  /* -----------------------------------------------------
     ナビゲーションボタン

     中央スライドの左右に配置
  ----------------------------------------------------- */

  .slider-button {
    top: calc(
      (100% - var(--pagination-space)) / 2
    );

    width: var(--button-size);
    height: var(--button-size);

    transform: translateY(-50%);
  }


  /*
   * 左ボタン
   */
  .slider-button-prev {
    left: calc(
      50%
      - var(--slide-width) / 2
      - var(--button-gap-responsive)
      - var(--button-size)
    );
  }


  /*
   * 右ボタン
   */
  .slider-button-next {
    left: auto;

    right: calc(
      50%
      - var(--slide-width) / 2
      - var(--button-gap-responsive)
      - var(--button-size)
    );
  }


  /* -----------------------------------------------------
     ページネーション

     PC時の-27.5px補正も解除
  ----------------------------------------------------- */

  .slider-pagination {
    left: 0;

    width: 100%;
  }
}
/* =========================================================
   スマートフォン
========================================================= */

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

  .slider-area {
    /*
     * 画面左右に少し隣のスライドを見せる
     */
    --slide-width: 82vw;

    /*
     * スマホではボタンを少し小さく
     * 79pxを維持したい場合は削除してください
     */
    --button-size: 50px;

    --pagination-space: 85px;
  }


  /*
   * スマホではボタンをスライドの外に置くと
   * 画面からはみ出すため、
   * スライド端の内側に重ねる
   */

  .slider-button-prev {
    left: calc(
      50%
      - var(--slide-width) / 2
      + 0px
    );
    top: unset;
    bottom: -20px;
    z-index: 90;
  }


  .slider-button-next {
    left: auto;
    right: calc(
      50%
      - var(--slide-width) / 2
      + 0px
    );
    top: unset;
    bottom: -20px;
    z-index: 90;
  }
	.slider-pagination{
		padding-bottom: 14px;
	}
	
	.slider-pagination .swiper-pagination-bullet{
		width: 16px;
        height: 16px;
		margin: 0 4px !important;
	}

}










#business #section3{
	width: 100%;
	max-width: 1562px;
	margin: 0 auto;
	padding: 120px 30px 75px;
	background: #07090a;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
}

#business #section3::after{
	content: '';
	display: block;
	width: 129px;
	aspect-ratio: 129 / 1531;
	background-image: url("../images/business-deco-03.svg");
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
    top: 34px;
    right: -54px;
    z-index: 2;
}


#business #section3 .section-inner{
	width: 100%;
	max-width: 1200px;
}



#business #section3 .h-box {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto 100px;
    }
#business #section3 .h-box > img {
    height: 30px;
	max-width: 157px;
    aspect-ratio: 157 / 30;
    display: block;
    margin-bottom: 14px;
}
#business #section3 .h-box h3 {
    /*height: 69px;*/
	width: 100%;
	max-width: 819px;
    aspect-ratio: 819 / 69;
    margin-bottom: 80px;
}

#business #section3 ul{
	display: flex;
	flex-direction: column;
	gap: 92px;
	margin-bottom: 95px;
}

#business #section3 ul li{
	width: 100%;
	display: flex;
	color: #fff;
}

#business #section3 ul li .inner-left{
	width: 50%;
}

#business #section3 ul li .inner-right{
	width: 50%;
}

#business #section3 ul li .sub{
	display: block;
	height: 12px;
    width: fit-content;
	margin-left: 16px;
	margin-bottom: 16px;
}
#business #section3 ul li h4{
	font-size: 40px;
	line-height: 1;
	margin-left: 16px;
	margin-bottom: 55px;
}
#business #section3 ul li .text{
	font-size: 16px;
	line-height: 1.875;
}


#business #section3 ul li:nth-child(1) .inner-right{
	padding-top: 33px;
	padding-left: 45px;
}

#business #section3 ul li:nth-child(1) .text{
	max-width: 383px;
}

.equipment-image-box{
	width: 390px;
	max-width: fit-content;
	aspect-ratio: 390 / 269;
}
.equipment-name{
	height: 12px!important;
	max-width: fit-content;
	margin-top: 20px;
}

#business #section3 ul li  .inner-left > .equipment-image-box{
	margin-left: 158px;
	margin-bottom: 30px;
	position: relative;
}
#business #section3 ul li  .inner-left > .equipment-image-box::before{
	content: '';
	display: block;
	position: absolute;
	background-image: url("../images/line-01.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 534px;
	aspect-ratio: 534 / 37;
	top: 94px;
	right: -510px;
	z-index: 2;
}
#business #section3 ul li:nth-child(1)  .inner-left::after{
	content: '';
	display: block;
	position: absolute;
	background-image: url("../images/line-02.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 208px;
	aspect-ratio: 208 / 307;
	top: 157px;
	left: -25px;
	z-index: 2;
}


#business #section3 ul li  .inner-left{
	position: relative;
}

#business #section3 ul li  .inner-left .flex-box{
	display: flex;
	width: 774px;
}
#business #section3 ul li  .inner-left .flex-box .equipment-image-box:nth-child(2){
	margin-left: -6px;
	position: relative;
}
#business #section3 ul li  .inner-left .flex-box .equipment-image-box:nth-child(2)::before{
	content: '';
	display: block;
	position: absolute;
	background-image: url("../images/line-03.svg");
	background-size: contain;
	background-repeat: no-repeat;
    width: 54px;
    aspect-ratio: 54 / 14;
    top: 169px;
    left: -32px;
	z-index: 2;
}

#business #section3 ul li:nth-child(2){
	padding-right: 64px;
	display: flex;
	justify-content: flex-end;
	gap: 90px;
}
#business #section3 ul li:nth-child(2) .text{
	max-width: 381px;
}
#business #section3 ul li:nth-child(2) .inner-left{
	width: fit-content;
	padding-top: 18px;
}
#business #section3 ul li:nth-child(2) .inner-right{
	max-width: 510px;
	position: relative;
}
#business #section3 ul li:nth-child(2) .inner-right::before{
	content: '';
	display: block;
	position: absolute;
	background-image: url("../images/line-04.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 528px;
	aspect-ratio: 528 / 37;
	top: 80px;
	left: -488px;
	z-index: 2;
}



#business #section3 ul li:nth-child(3){
	display: flex;
	justify-content: flex-start;
	margin-left: 45px;
	gap: 90px;
}
#business #section3 ul li:nth-child(3) .text{
	max-width: 380px;
}
#business #section3 ul li:nth-child(3) .inner-right{
	width: fit-content;
	padding-top: 18px;
}
#business #section3 ul li:nth-child(3) .inner-left{
	max-width: 510px;
	position: relative;
}
#business #section3 ul li:nth-child(3) .inner-left::before{
	content: '';
	display: block;
	position: absolute;
	background-image: url("../images/line-05.svg");
	background-size: contain;
	background-repeat: no-repeat;
	width: 528px;
	aspect-ratio: 528 / 37;
	top: 80px;
	right: -506px;
	z-index: 2;
}


#business #section3 .h-box2 {
        width: 100%;
        max-width: 1200px;
        padding: 0 45px;
        margin: 0 auto 30px;
    }
#business #section3 .h-box2 > img {
    height: 12px;
	max-width: 193px;
    aspect-ratio: 193 / 12;
    display: block;
    margin-bottom: 18px;
}
#business #section3 .h-box2 h4 {
    color: #fff;
	font-size: 40px;
    line-height: 1;
}

.table-container {
    max-width: 1200px;
    padding: 0 45px;
  /* 横スクロールを許可 */
  overflow-x: auto;
  /* スマホでの慣性スクロールを有効化 */
  -webkit-overflow-scrolling: touch;
  /* 親要素の幅いっぱいに広げる */
  width: 100%;
}

table {
  /* テーブルの最小幅を指定してつぶれを防ぐ */
  min-width: 600px;
  /* 枠線の重なりを調整 */
  border-collapse: collapse;
  width: 100%;
	color: #fff;
}

th, td {
  border: 1px solid #e72728;
  padding: 10px 16px;
  /* 改行を防ぎたい場合は以下を指定 */
  white-space: nowrap;
}
th{
	background: #e72728;
	text-align: left;
	font-size: 18px;
	line-height: 1;
	height: 49.5px;
	position: relative;
}
td{
	font-size: 16px;
	line-height: 1;
	height: 40px;
}
th::after{
	content: '';
	width: 1px;
	height: 40px;
	background: #fff;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 0;
}
th:last-of-type::after{
	display: none;
}

th:nth-of-type(1){
	width: 252px;
}
th:nth-of-type(2){
	width: 202px;
}
th:nth-of-type(3){
	width: 202px;
}
th:nth-of-type(4){
	width: 202px;
}





/* 製品・技術紹介 -------------------------------------------------- */

#products_and_technology .child-header{
	background-image: url("../images/header-back-products_and_technology.jpg");
}

#products_and_technology .child-header .title-box > img {
    height: 30px;
	max-width: 246px;
    aspect-ratio: 246 / 30;
    display: block;
    margin-bottom: 14px;
}

#products_and_technology .child-header .title-box h2 {
    /*height: 231px;*/
	height: 12.03vw;
	max-height: 231px;
	max-width: 1728px;
    aspect-ratio: 1728 / 231;
    margin-bottom: 36px;
}



#products_and_technology #section0{
	width: 100%;
	max-width: 1260px;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin: 0 auto 100px;
	padding: 135px 30px 0;
}

#products_and_technology #section0::before{
	content: '';
	display: block;
	background-image: url("../images/products_and_technology-deco-01.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 461px;
	aspect-ratio: 461 / 426;
	position: absolute;
	top: 70px;
	left: -282px;
	z-index: 3;
	animation: rotateSlow 20s linear infinite;
	transform-origin: center center;
}


#products_and_technology #section0 .section-inner{
	width: 100%;
	position: relative;
	display: flex;
	z-index: 3;
}

#products_and_technology #section0 .section-inner .inner-left,
#products_and_technology #section0 .section-inner .inner-right{
	width: 50%;
	display: flex;
	justify-content: flex-end;
}
#products_and_technology #section0 .section-inner .inner-left{
	padding-right: 45px;
}
#products_and_technology #section0 .section-inner .inner-right{
	padding-left: 45px;
}

#products_and_technology #section0 .section-inner .inner-left .tugline{
	font-size: 40px;
    line-height: 1.65;
    font-weight: bold;
	text-align: right;
}
#products_and_technology #section0 .section-inner .inner-right .text{
	font-size: 16px;
    line-height: 2.5;
    font-weight: bold;
}

#products_and_technology .p-and-t-list{
	width: 100%;
	padding-top: 87px;
	display: flex;
	flex-direction: column;
	align-items: center;
}
#products_and_technology .p-and-t-list .section-inner{
	width: 100%;
	max-width: 1200px;
	padding: 0 45px 83px;
	border-bottom: solid 1px #e72728;
	position: relative;
}

#products_and_technology .section-inner .inner-upper{
	margin-bottom: 130px;
}


#products_and_technology .p-and-t-list .h-box {
        width: 100%;
        max-width: 1200px;
    }
#products_and_technology .p-and-t-list .h-box > img {
    display: block;
    margin-bottom: 50px;
}
#products_and_technology .p-and-t-list .h-box h3{
	font-size: 35px;
    line-height: 1.371;
    font-weight: bold;
}

#products_and_technology #section1.p-and-t-list .h-box > img {
    height: 62px;
	max-width: 304px;
    aspect-ratio: 304 / 62;
}
#products_and_technology #section2.p-and-t-list .h-box > img {
    height: 62px;
	max-width: 346px;
    aspect-ratio: 346 / 62;
	margin-left: -22px;
}
#products_and_technology #section3.p-and-t-list .h-box > img {
    height: 62px;
	max-width: 345px;
    aspect-ratio: 345 / 62;
	margin-left: -22px;
}
#products_and_technology #section4.p-and-t-list .h-box > img {
    height: 71px;
	max-width: 347px;
    aspect-ratio: 347 / 71;
	margin-left: -22px;
}
#products_and_technology #section5.p-and-t-list .h-box > img {
    height: 62px;
	max-width: 345px;
    aspect-ratio: 345 / 62;
	margin-left: -22px;
}
#products_and_technology #section6.p-and-t-list .h-box > img {
    height: 62px;
	max-width: 348px;
    aspect-ratio: 348 / 62;
	margin-left: -22px;
}

.image-wrapper{
	width: 100%;
}



.point-list{
	display: flex;
    gap: 80px 18px;
	flex-wrap: wrap;
	padding-left: 30px;
}
.point-list > li{
	width: 200.52px;
	height: 173px;
	border: solid 2px #e72728;
	position: relative;
	transform: skewX(-9.67deg);
	/*display: flex;
	justify-content: center;*/
	padding: 16px 22px;
	transform-origin: top left;
}
.point-list > li::before{
	content: '';
	display: block;
	background-size: contain;
	background-repeat: no-repeat;
	width: 71px;
	height: 64px;
	position: absolute;
	top: -52px;
	left: -22px;
	transform: skewX(9.67deg);
}

.point-list > li:nth-of-type(1)::before{
	background-image: url("../images/point-01.svg");
}
.point-list > li:nth-of-type(2)::before{
	background-image: url("../images/point-02.svg");
}
.point-list > li:nth-of-type(3)::before{
	background-image: url("../images/point-03.svg");
}
.point-list > li:nth-of-type(4)::before{
	background-image: url("../images/point-04.svg");
}
.point-list > li:nth-of-type(5)::before{
	background-image: url("../images/point-05.svg");
}
.point-list > li:nth-of-type(6)::before{
	background-image: url("../images/point-06.svg");
}

.point-list > li p{
	/*transform: skewX(9.67deg);*/
	font-size: 16px;
	line-height: 1.7;
	font-weight: bold;
	/*max-width: 165px;*/
}

.point-list > li .red{
	color: #e72728;
	font-size: 18px;
	text-align: center;
	line-height: 1.5;
}

#products_and_technology #section3 .point-list > li{
	width: 593.45px;
	height: 238px;
	padding: 18px 24px;
}

.point-list > li .inner-box{
	transform: skewX(9.67deg);
	position: relative;

  width: calc(100% + 29.5px);
  height: 173px;
  left: -29.5px;
  transform-origin: top left;

  box-sizing: border-box;
}

/* 左側：上で29.5px、下で0px */
.shape-left {
  float: left;

  width: 29.5px;
  height: 173px;

  shape-outside: polygon(
    0 0,
    100% 0,
    0 100%
  );
}

/* 右側：上で0px、下で29.5px */
.shape-right {
  float: right;

  width: 29.5px;
  height: 173px;

  shape-outside: polygon(
    100% 0,
    100% 100%,
    0 100%
  );
}

#products_and_technology #section1.p-and-t-list .point-list > li:nth-of-type(1),
#products_and_technology #section4.p-and-t-list .point-list > li:nth-of-type(1){
	padding-right: 32px
}
#products_and_technology #section2.p-and-t-list .point-list > li:nth-of-type(1){
	padding-right: 26px
}

#products_and_technology #section5.p-and-t-list .point-list > li:nth-of-type(1){
	padding-right: 31px
}

#products_and_technology #section3.p-and-t-list .section-inner .inner-upper{
	margin-bottom: 90px;
}
#products_and_technology #section3.p-and-t-list > li .inner-box,
#products_and_technology #section3.p-and-t-list .shape-left,
#products_and_technology #section3.p-and-t-list .shape-right{
	height: 238px;
	width: 40.55px;
}

#products_and_technology #section6.p-and-t-list .section-inner .inner-upper{
	margin-bottom: 115px;
}


#products_and_technology #section3 .point-list > li .red{
	font-size: 20px;
}

.point-list > li .inner-box > ul{
    margin-top: 6px;
}

.point-list > li .inner-box > ul li{
	font-size: 16px;
	line-height: 1.75;
	font-weight: bold;
	margin-bottom: 0.8em;
	position: relative;
}

.point-list > li .inner-box > ul li::before{
	content: '';
	display: block;
	background: #e72728;
	border-radius: 50%;
	width: 6px;
	aspect-ratio: 1 / 1;
	position: absolute;
	left: 15px;
    top: 13px;
}
.point-list > li .inner-box > ul li:nth-child(2)::before{
	left: 0px;
    top: 12px;
}

.image-box{
	position: absolute;
	top: 0;
	right: 0;
}

.image-box p{
	font-size: 16px;
	line-height: 1.2;
	margin-top: 8px;
	font-weight: 500;
}

#products_and_technology #section1 .image-box:nth-child(1){
	position: absolute;
	top: -48px;
	right: 262px;
}
#products_and_technology #section1 .image-box:nth-child(2){
	position: absolute;
	top: 59px;
	right: -97px;
}

#products_and_technology #section2 .image-box:nth-child(1){
	position: absolute;
	top: -20px;
	right: 262px;
}
#products_and_technology #section2 .image-box:nth-child(2){
	position: absolute;
	top: 59px;
	right: -97px;
}

#products_and_technology #section3 .image-box:nth-child(1){
	position: absolute;
	top: -20px;
	right: 262px;
}
#products_and_technology #section3 .image-box:nth-child(2){
	position: absolute;
	top: 291px;
	right: 131px;
}

#products_and_technology #section4 .image-box:nth-child(1){
	position: absolute;
	top: 7px;
	right: 262px;
}
#products_and_technology #section4 .image-box:nth-child(2){
	position: absolute;
	top: 59px;
	right: -97px;
}


#products_and_technology #section5 .image-box:nth-child(1){
	position: absolute;
	top: -20px;
	right: 176px;
}
#products_and_technology #section5 .image-box:nth-child(2){
	position: absolute;
	top: 262px;
	right: 45px;
}

#products_and_technology #section6 .image-box{
	position: absolute;
	top: 30px;
	right: 45px;
}

/* 会社案内 -------------------------------------------------- */

#company .child-header{
	background-image: url("../images/header-back-company.jpg");
	position: relative;
	min-height: 1352px;
	padding-top: 287px;
	padding-bottom: clamp(40px,11.46vw,220px);
	display: flex;
	flex-direction: column;
	align-items: center;
    overflow: hidden;
}

#company .child-header .title-box > img {
    height: 30px;
	max-width: 157px;
    aspect-ratio: 157 / 30;
    display: block;
    margin-bottom: 14px;
}

#company .child-header .title-box h2 {
    height: 111px;
	max-width: 1180px;
    aspect-ratio: 1180 / 111;
    margin-bottom: 222px;
}


#company .child-header .read-wrapper{
	color: #fff;
	display: flex;
    flex-direction: column;
    align-items: center;
	position: relative;
	z-index: 4;
}
#company .child-header .tugline{
	text-align: center;
	margin-bottom: 40px;
	font-weight: bold;
	font-size: clamp(32px, 5.34vw, 40px);
	line-height: 1.65;
}
#company .child-header .text{
	text-align: center;
	margin-bottom: 55px;
	font-weight: 600;
}
#company .child-header .name{
	font-weight: bold;
}
#company .child-header .name .name{
	font-size: 0.8em;
}




#company .child-header::before{
	content: '';
	display: block;
	background-image: url("../images/company-deco-01.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 26.82vw;
	max-width: 515px;
	aspect-ratio: 515 / 595;
	position: absolute;
	top: 657px;
	/*bottom: clamp(20px,4.84vw,93px);*/
	left: clamp(-10px,-4.53vw,-87px);
	z-index: 2;
}

#company .child-header::after{
	content: '';
	display: block;
	background-image: url("../images/company-deco-02.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 21.77vw;
	max-width: 418px;
	aspect-ratio: 418 / 723;
	position: absolute;
	top: 545px;
	/*bottom: clamp(20px,4.22vw,81px);*/
	right: clamp(-10px,-1.04vw,-20px);
	z-index: 2;
}


#company #section1{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin: 0 auto 245px;
	    overflow-x: hidden;
}
#company #section1 .section-inner{
	width: 100%;
	max-width: 1260px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 108px;
	padding-right: 30px;
	padding-left: 30px;
}


#company #section1::before{
	content: '';
	display: block;
	background-image: url("../images/company-deco-03.svg");
	background-repeat: no-repeat;
	background-size: contain;
	width: 688px;
	aspect-ratio: 688 / 635;
	position: absolute;
	top: 114px;
	right: -60px;
	z-index: 0;
	animation: rotateSlow 20s linear infinite;
	transform-origin: center center;
}

#company #section1 .h-box {
        width: 100%;
        margin: 0 0 55px;
	padding-bottom: 50px;
        border-bottom: 1px solid #e72728;
    }
#company #section1 .h-box > img {
    height: 30px;
	max-width: 157px;
    aspect-ratio: 157 / 30;
    display: block;
    margin: 0 0 25px 20px;
}
#company #section1 .h-box h3 {
    height: 75px;
	max-width: 348px;
    aspect-ratio: 348 / 75;
}






#company .company-history,
#company .company-profile{
	width: 100%;
	margin: 0 auto;
}

#company .profile-row {
  display: flex;
  margin: 0 0 50px;
}
#company dl .profile-row:last-of-type{
	margin-bottom: 0;
}

#company .profile-row dt {
  width: 172px;
  color: #e72728;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
	font-size: 18px;
	font-weight: bold;
	padding-right: 77px;
	text-align:justify;
text-align-last:justify;
}

#company .profile-row dt.justify{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

#company .profile-row dd {
  flex: 1;  
	display: flex;
  flex-direction: column;
  justify-content: center;
	font-weight: 600;
}

#company .profile-row dd.dd-inner-list{
	display: flex;
    flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
}
#company .profile-row dd.dd-inner-list .red{
	color: #e72728;
}


#company #section2{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin: 0 auto 200px;
}
#company #section2 .section-inner{
	width: 100%;
	max-width: 1260px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 30px;
}


#company #section2 .h-box {
        width: 100%;
        margin: 0 0 55px;
	padding-bottom: 50px;
        border-bottom: 1px solid #e72728;
    }
#company #section2 .h-box > img {
    height: 30px;
	max-width: 157px;
    aspect-ratio: 157 / 30;
    display: block;
    margin: 0 0 25px 20px;
}
#company #section2 .h-box h3 {
    height: 35px;
	max-width: 315px;
    aspect-ratio: 315 / 35;
}

#company .company-history .profile-row dt{
	padding-right: 55px;
}



#company #section3{
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin: 0 auto;
	overflow-x: hidden;
}
#company #section3 .section-inner{
    width: 100%;
    max-width: 1660px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 63px;
    padding-left: 30px;
    padding-right: 30px;
}


#company #section3 .h-box {
        width: 100%;
	max-width: 1200px;
        margin: 0 0 50px;
    }
#company #section3 .h-box > img {
    height: 30px;
	max-width: 157px;
    aspect-ratio: 157 / 30;
    display: block;
    margin: 0 0 25px 20px;
}
#company #section3 .h-box h3 {
    height: 34px;
	max-width: 290px;
    aspect-ratio: 290 / 34;
}

#company #section3 .map-wrapper{
	width: 100%;
	height: 580px;
	position: relative;
	z-index: 2;
}
#company #section3 .map-wrapper::after{
	content: '';
	display: block;
	background-color: #e72728;
	width: 100%;
	max-width: 1687px;
	height: 573px;
	position: absolute;
	top: 70px;
	right: -160px;
	z-index: -1;
}



/* 404 ---------------------------------- */
#not_found #section1 .section-inner{
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: clamp(240px,30vw,400px);
	padding-bottom: 200px;
	padding-right: 30px;
	padding-left: 30px;
}
#not_found #section1 .section-inner .button{
	margin: 80px auto 0;
}




/* レスポンシブ ---------------------------------- */
@media (min-width: 1921px) {
}

@media (max-width: 1919px) {
}

@media (max-width: 1720px) {
}


@media (max-width: 1660px) {
	#company #section3 .map-wrapper::after{
		    height: 95%;
	}
}


@media (max-width: 1680px) {
	.header-nav li a{
        padding: 0 30px;
	}
}





@media (max-width: 1500px) {
	
	.our_works-button{
		width: calc(100% - 60px);
        max-width: 1712px;
        height: auto;
	}
	
	.our_works-button a{
		flex-direction: column;
		padding: 40px 50px;
		gap: 30px;
	}
	.our_works-button a p{
		margin-left: 0;
	}
}



@media (max-width: 1400px) {
  
	.site-header,
	.site-header.scrolled{
		padding: 0;
        height: 0;
        background: none;
	}
	
	.header-inner{
        height: 100%;
	}
	
	.header-inner {
    padding: 10px 16px;
  }

  /* 通常ナビを隠してハンバーガーに */
  .header-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    pointer-events: none;

    transition:
      max-height 0.3s ease,
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .header-nav ul {
    flex-direction: column;
    align-items: center;
    gap: 16px;
	  padding-top: 100px;
        padding-bottom: 40px;
  }

  /* メニューオープン時に下方向へスルッと展開 */
  .site-header.is-open .header-nav {
    max-width: unset;
    height: auto;
    max-height: 90vh; /* メニューの高さより少し大きく */
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    align-items: center;
    padding-left: 0;
  }

  /* ハンバーガーボタン表示 */
  .header-menu-toggle {
        display: flex;
        flex-direction: column;
        justify-content: center;
        z-index: 90;
  }
	
	
	.nav-wrapper{
		height: 108px;
	}

	
	.header-nav li{
		padding: 0;
	}
	.header-nav li a{
		padding: 0;
	}
	
	.header-nav li:first-child::before,
	.header-nav li::after{
		display: none;
	}

	
	.header-tel{
		display: none;
	}
	
    .header-nav li.forSP{
        display: block;
		width: 70%;
		max-width: 341px;
        aspect-ratio: 341 / 72;
    }
	
	.header-nav li a.header-tel{
		width: 100%;
		height: auto;
	}
	
	#hero .marquee-item img{
        height: 8vw;
        margin-right: 6vw;
	}
	
    #top #section1 .marquee-item:nth-child(1) img {
        height: 10vw;
    }
	#top #section1 .material .marquee-item img{
		height: clamp(20px,4vw,41px);
	}
	#top #section2::after,
	#top #section2::before{
		display: none;
	}
	#top #section2 .section-inner{
		padding-right: 0;
	}
	#top #section2{
        align-items: center;
		padding: 140px 30px 140px;
	}
	#top #section2 .h-box {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
	#top #section2 .h-box h2{
		width: 100%;
    height: auto;
	}
	
	#top #section3 .h-box{
		width: calc(100% - 60px);
	}
	
	#top #section3 .h-box h2 {
		width: 100%;
    height: auto;
}
	
	
	#business .child-header .title-box h2{
		height: 7.93vw;
	}
	
	#business #section1 .section-inner{
		padding-top: 100px;
        padding-left: 10vw;
        padding-right: 10vw;
        padding-bottom: 12.14vw;
	}
	
	#business #section1 .section-inner .inner-box{
		flex-direction: column;
	}
	#business #section1 .section-inner .inner-left{
		max-width: unset;
	}
	#business #section1 .tugline{
		margin-bottom: 50px;
	}
	#business #section1 .tugline br{
		display: none;
	}
	#business #section1 .section-inner .inner-right{
		padding-left: 0;
		max-width: unset;
	}
	
	#business #section1::before{
		width: 110.26vw;
		bottom: -7.86vw;
	}
	#business #section1::after{
		width: 32.93vw;
        bottom: -24.29vw;
        right: -14.29vw;
	}
	
	#business #section3 ul li{
        flex-direction: column-reverse;
        gap: 40px;
	}
	#business #section3 ul li:nth-child(2){
		flex-direction: column;
        padding-right: 0;
	}
	
	#business #section3 ul li .inner-right {
    width: 100%;
    }
	#business #section3 ul li .inner-left {
    width: 100%;
    display: flex;
    }
	#business #section3 ul li:nth-child(2) .inner-left {
    width: fit-content;
    padding-top: 18px;
    flex-direction: column;
    }
	
	.equipment-image-box{
		width: auto;
		max-width: 390px;
        aspect-ratio: unset;
	}
	#business #section3 ul{
        position: relative;
        z-index: 3;
	}
	
	#business #section3 ul li:nth-child(3) .inner-left::before,
	#business #section3 ul li:nth-child(2) .inner-right::before,
	#business #section3 ul li .inner-left .flex-box .equipment-image-box:nth-child(2)::before,
	#business #section3 ul li:nth-child(1) .inner-left::after,
	#business #section3 ul li .inner-left > .equipment-image-box::before{
		display: none;
	}
	
	#business #section3 ul li .inner-left > .equipment-image-box{
		margin-left: 0;
	}
	#business #section3 ul li .inner-left .flex-box {
            flex-direction: row;
    width: auto;
}
	#business #section3 ul li:nth-child(3) .text,
	#business #section3 ul li:nth-child(2) .inner-right,
	#business #section3 ul li:nth-child(2) .text,
	#business #section3 ul li:nth-child(1) .text {
    max-width: unset;
}
	#business #section3 ul li:nth-child(3){
		margin-left: 0;
	}
	#business #section3 .h-box2{
		padding: 0;
	}
	.table-container{
		padding: 0;
	}
	
	#products_and_technology #section0 .section-inner{
		flex-direction: column;
		padding-left: 16%;
	}
	#products_and_technology #section0 .section-inner .inner-left {
    padding-right: 0;
    justify-content: flex-start;
    width: 100%;
    position: relative;
    z-index: 4;
    margin-bottom: 40px;
}
	#products_and_technology #section0 .section-inner .inner-left .tugline{
		text-align: left;
	}
	#products_and_technology #section0 .section-inner .inner-right {
    padding-left: 0;
    width: 100%;
    position: relative;
    z-index: 4;
}
	
	#products_and_technology .p-and-t-list .h-box{
		margin-bottom: 60px;
	}
	
	#products_and_technology .p-and-t-list .h-box h3 br{
		display: none;
	}
	
	#products_and_technology #section0 .section-inner .inner-right .text span{
		display: inline-block;
	}
	
	.image-wrapper{
		display: flex;
		flex-wrap: wrap;
		gap: 40px 20px;
	}
	
	
	#products_and_technology #section1 .image-box:nth-child(1),
	#products_and_technology #section1 .image-box:nth-child(2),
	#products_and_technology #section2 .image-box:nth-child(1),
	#products_and_technology #section2 .image-box:nth-child(2),
	#products_and_technology #section3 .image-box:nth-child(1),
	#products_and_technology #section3 .image-box:nth-child(2),
	#products_and_technology #section4 .image-box:nth-child(1),
	#products_and_technology #section4 .image-box:nth-child(2),
	#products_and_technology #section5 .image-box:nth-child(1),
	#products_and_technology #section5 .image-box:nth-child(2),
	#products_and_technology #section6 .image-box{
		position: relative;
		top: unset;
		right: unset;
		left: unset;
		bottom: unset;
	}
	.point-list{
		margin-left: 40px;
		padding-left: 0;
	}
	#company .child-header .title-box h2{
		height: 5.78vw;
	}
	
	
	
	

}


@media (max-width: 1280px) {
	
	
	.material{
		flex-direction: column;
		height: auto;
		max-width: 1110px;
        width: calc(100% - 60px);
		    margin-top: 40px;
	}
	.material-title {
		width: 100%;
		clip-path: none;
		justify-content: center;
        padding: 10px 20px;
	}
	#top #section1 .material .marquee-container{
		width: 100%;
        clip-path: none;
		padding: 10px 0;
	}
	.material-title img{
		width: clamp(220px,35vw,406px);
	}
	#top #section1 .h-box{
		width: 100%;
		padding: 0 30px;
	}
	
	#top #section1 .h-box h2{
		height: auto;
		width: 100%;
	}
	#top #section1 .flex-box .tugline > br{
		display: none;
	}
	#top #section1 .flex-box{
		flex-direction: column;
	}
	#top #section1 .flex-box .inner-left {
    width: 100%;
    padding-right: 0;
		display: flex;
    flex-direction: column;
    align-items: center;
    }
	#top #section1 .flex-box .inner-right {
    max-width: 100%;
}
	#top #section1 .button.forPC{
		display: none;
	}
	
	#top #section1 .button.forSP {
        display: flex;
        margin: 60px auto 0;
    }
	#top #section1 .section-inner{
		    padding-bottom: 0;
	}
	#top #section1 .flex-box .inner-right .text br{
		display: none;
	}
	
	#top #section2 .h-box .tugline{
        width: clamp(340px, 43.05vw, 551px);
	}
	.strength-box ul{
		gap: 50px 10px;
    margin-bottom: 50px;
    flex-wrap: wrap;
	}
	.strength-box ul:nth-child(2) {
    margin-left: 0;
}
	
	
	
}


@media (max-width: 1140px) {
	
	main [id] {
      scroll-margin-top: 100px;
    }
	.header-logo{
		width: 100px;
	}

	
}


@media (max-width: 1080px) {
	
	#business #section3 ul li .inner-left{
		flex-direction: column;
	}
	#business #section3 ul li .inner-left .flex-box {
        flex-direction: column;
		gap: 60px;
    }
	#business #section3 ul li .equipment-image-box{
		width: 100%;
		max-width: unset;
	}
	#business #section3 ul li .equipment-image-box img{
		width: 100%;
	}
	#business #section3 ul li .inner-left > .equipment-image-box{
		margin-bottom: 60px;
	}
	#business #section3 ul li:nth-child(1) .inner-right {
    padding-left: 0;
    }
	#business #section3 ul li h4{
		margin-left: 0;
		font-size: clamp(26px, 5.34vw, 41px);
		margin-bottom: clamp(26px, 5.34vw, 41px);
	}
	#business #section3 ul li:nth-child(3) .inner-left{
		max-width: unset;
	}
	
	#business #section3 ul li:nth-child(2) .inner-right img{
		width: 100%;
	}	
	
	#business #section3 .h-box{
		margin-bottom: 20px;
	}
	#business #section3 .h-box h3{
		margin-bottom: 0;
	}
	#business #section3 .h-box2 h4{
		font-size: clamp(26px, 5.34vw, 41px);
	}

	#products_and_technology #section0 .section-inner{
		padding-left: 0;
	}
	#products_and_technology #section0::before{
		display: none;
	}
	#products_and_technology #section0{
		margin-bottom: 60px;
	}
	
}





@media (max-width: 960px) {

	.our_works-button a .button-title{
		width: 63.13vw;
		max-width: 606px;
	}
	.our_works-button a p{
		font-size: clamp(20px, 5.21vw, 50px);
	}
	.our_works-button a::after{
		    right: 10px;
	}
	
	.site-footer{
		padding-top: 50px;
	}
	.footer-inner{
		padding: 45px 45px 160px;
	}
	
	.footer-inner-upper{
		flex-direction: column;
	}
	.footer-info {
        flex-direction: column;
        gap: 20px;
    }
	.footer-logo{
        margin-left: 0;
        margin-right: 0;
	}
	.footer-inner-upper .address{
        margin-bottom: 40px;
	}
	.tel-and-fax{
        align-items: flex-start;
	}
	.footer-nav{
		padding-left: 0;
        max-width: unset;
        margin-top: 60px;
	}
	.footer-copy{
		margin-left: 0;
	}
	.pagetop{
		width: 80px;
        bottom: 24.4vw;
        right: 5.94vw;
	}
	footer .marquee-item img {
    height: 17.4vw;
}
	.child-header{
        height: 50vw;
        min-height: 400px;
	}
	
	#products_and_technology .child-header{
		min-height: 330px;
	}
	
	.company-history .profile-row{
        flex-direction: column;
	}
	
	#company .child-header::before,
	#company .child-header::after{
		display: none;
	}
	#company .child-header{
		padding-right: 30px;
		padding-left: 30px;
	}
	
	#company .child-header .title-box h2 {
        height: auto;
        width: 100%;
		margin-bottom: 22.92vw;
	}
	
}


@media (max-width: 768px) {
	
	#hero .section-inner{
		padding-top: clamp(232px,39.06vw,300px);
	}
	
	#hero::before{
    width: 86vw;
	}
	#hero .tugline-box {
    width: 80vw;
    max-width: 444px;
    margin-left: 30px;
    }
	
	#top #section1 .flex-box .tugline{
		font-size: clamp(26px, 5.34vw, 41px);
	}
	
	
	#top #section3 .h-box .tugline{
		font-size: clamp(20px,5.34vw,41px);
	}
	#top #section3 .marquee-item img{
		height: 15vw;
    max-height: 67px;
	}
	
	#top #section3 .button{
		width: calc(100% - 60px);
	}
	.footer-contact{
		padding-right: 20px;
		padding-left: 20px;
	}
	.footer-contact .h-box h2{
		margin-bottom: 7.81vw;
	}
	
	
	.footer-contact .h-box h2 img{
		width: 80%;
	}
	
	
	.footer-contact .h-box .tugline{
		font-size: 16px;
		line-height: 1.5;
	}
	.contact-tel-box{
		height: auto;
	}
	.contact-tel-box::before,
	.contact-tel-box::after{
		height: 100%;
		width: 6px;
	}
	#business #section1 .section-inner .inner-box,
	#business #section1 .section-inner{
		transform: none;
	}
	#business #section1 .section-inner{
        padding-right: 30px;
        padding-left: 30px;
	}
	.text br{
		display: none;
	}
	
	#products_and_technology .p-and-t-list .h-box h3{
		font-size: clamp(26px, 4.56vw, 35px);
	}
	
	.image-wrapper{
		justify-content: center;
	}
	
	#products_and_technology .section-inner .inner-upper {
    margin-bottom: 90px!important;
}
	
	.point-list{
		margin-left: 0;
	}
	
	.point-list > li::before,
	.point-list > li .inner-box,
	.point-list > li{
		transform: none;
	}
	.shape{
		display: none;
	}
	.point-list > li{
		width: 100%;
        height: auto;
	}
	.point-list > li .inner-box{
		width: 100%;
        height: auto;
        left: unset;
	}
	
	.point-list > li .red{
		text-align: left;
	}
	
	#products_and_technology #section1.p-and-t-list .point-list > li:nth-of-type(1),
	#products_and_technology #section4.p-and-t-list .point-list > li:nth-of-type(1) {
    padding-right: 22px;
}
	
	#products_and_technology #section3 .point-list > li{
        height: auto;
        width: 100%;
	}
	#products_and_technology #section3 .point-list > li .inner-box{
		height: 100%;
	}
	.point-list > li .inner-box > ul{
		padding-left: 1em;
		list-style: disc;
	}
	.point-list > li .inner-box > ul li::before{
		display: none;
	}
	.point-list > li .inner-box > ul li::marker{
		color: #e72728;
	}
	
	#products_and_technology #section0 .section-inner .inner-left .tugline{
		font-size: clamp(30px, 5.34vw, 40px);
	}
	#products_and_technology #section0{
		padding-top: 60px;
	}
	.company-profile .profile-row{
        flex-direction: column;
	}
	#company .profile-row dt{
        text-align: unset;
        text-align-last: unset;
	}
	#company .profile-row dt.justify{
        justify-content: flex-start;
	}
	
	#company .child-header .text{
		text-align: left;
	}
	
	#company .child-header{
        min-height: 1160px;
	}
	
	#business #section1 .tugline{
        font-size: clamp(28px, 5.34vw, 40px);
	}
	
	
}


@media (max-width: 580px) {

	.button{
		padding: 10px 25px;
	}
	.button::after{
		right: 20px;
	}
	.our_works-button a::after{
		display: none;
	}
	
	.footer-contact .h-box .tugline .big {
            font-size: clamp(21px, 5vw, 34px);
}
	
}



@media (max-width: 440px) {
	
.strength-box ul:nth-child(1) li:nth-child(1) .icon{
	left: 40.95%;
}
.strength-box ul:nth-child(1) li:nth-child(2) .icon{
	left: 38.72%;
}
	
.strength-box ul:nth-child(2) li:nth-child(1) .icon{
	left: 38.72%;
}
.strength-box ul:nth-child(2) li:nth-child(2) .icon{
	left: 39.83%;
}

.strength-box ul:nth-child(3) li:nth-child(1) .icon{
	left: 39.55%;
}
.strength-box ul:nth-child(3) li:nth-child(2) .icon{
	left: 40.67%;
}
.strength-box ul:nth-child(3) li:nth-child(3) .icon{
	left: 44.01%;
}
	
.strength-box ul li h3{
		font-size: 6.9vw;
	}
	
	.strength-box ul:nth-child(1) li:nth-child(1) h3{
	margin-left: 23.96%;
}
.strength-box ul:nth-child(1) li:nth-child(2) h3{
	margin-left: 15.04%;
}

.strength-box ul:nth-child(2) li:nth-child(1) h3{
	margin-left: 20.89%;
}
.strength-box ul:nth-child(2) li:nth-child(2) h3{
	margin-left: 8.36%;
}

.strength-box ul:nth-child(3) li:nth-child(1) h3{
	margin-left: 10.03%;
}
.strength-box ul:nth-child(3) li:nth-child(2) h3{
	margin-left: 15.32%;
}
.strength-box ul:nth-child(3) li:nth-child(3) h3{
	margin-left: 23.68%;
}



}