@charset "utf-8";
/* 全体の設定  共通****************************************************/

html {
  font-size: 19px; /* 基本のフォントサイズ */
  line-height: 2; /* 読みやすい行間 */
  box-sizing: border-box; /* ボックスサイズの統一 */
}

*, *::before, *::after {
  box-sizing: inherit; /* 子要素にも継承 */
  margin: 0;
  padding: 0;
}
html, body {
  overflow-x: hidden;
}
body {
  font-family: "Noto Sans JP", serif;
  font-weight: 700;
  color: #000; /* 文字色 */
  background-color: #fff; /* 背景色 */
  margin: 0;
  padding: 0;
}

/* 共通要素のスタイル */
h1, h2, h3, h4, h5, h6 {
  margin: 0; /* デフォルトのマージンをリセット */
  padding: 0; /* パディングをリセット */
  font-size: inherit; /* 親要素のフォントサイズを継承 */
  font-weight: inherit; /* 親要素のフォントウェイトを継承 */
  line-height: inherit; /* 親要素の行間を継承 */
}

p {
  margin-bottom: 1em;
}

ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  color: #000;
  transition: color 0.3s;
  text-decoration: none; 
}

a:hover {
  color: #00a4b0;
  text-decoration: none; 
}

button {
  font: inherit;
  cursor: pointer;
}
/* Table リセット */
table {
  border-collapse: collapse; /* セルの間のスペースを削除 */
  border-spacing: 0; /* セル間の余白を完全にリセット */
  width: 100%; /* 必要に応じて全幅設定 */
  max-width: 100%; /* レスポンシブ対応で最大幅を制限 */
}

th, td {
  margin: 0; 
  padding: 0;
  border: 0; 
  text-align: left; 
  vertical-align: center; 
  font-weight: inherit;
}

/*レイアウトの基礎 */
header{
 background-color:#fff;
 width:100%;
 height: 130px;
}
footer{
 background-color:#f0f0f0;
 width:100%;
 height: auto;
}
.container {
  max-width: 1540px;
  margin: 0 auto;
  padding: 0;

}

section{
	margin: 0;
	padding: 0;
}


/* スクロール アニメーション */
.fade-up {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s ease-out;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}


/* ユーティリティクラス */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: 1em; }
.mb-1 { margin-bottom: 1em; }
.pt-1 { padding-top: 1em; }
.pb-1 { padding-bottom: 1em; }
.pb-20 { padding-bottom: 20px; }

/* セクション１　****************************************************/
#top{
   z-index: 10;
	position: relative;
}
.top_image {
   width: 100%;
  display: flex;
  justify-content: center; /* 横方向中央 */
  align-items: center;     /* 縦方向中央 */
  overflow: hidden;
  padding-top:6em;
}

.vertical-text {
  writing-mode: vertical-rl; /* 縦書き：右から左へ */
  font-size: 2.3em;
	font-weight: 900;
  line-height: 2.3em;
}
/* 共通：画像アニメーション */
#top .img1,
#top .img2,
#top .img3 {
  position: absolute;
  opacity: 0;
  transform: translate(100px, 100px) scale(0.5); /* 右下から小さく表示 */
  animation: popIn 0.8s ease-out forwards;
}
#top .img1 {
  top: 25vh;
  left: 25vw;
}
#top .img2 {
  top: 36vh;
  right: 28.5vw;
	animation-delay: 0.2s;
}

#top .img3 {
  top: 70vh;
  left: 35vw;
	animation-delay: 0.4s;
}
/* アニメーション定義 */
@keyframes popIn {
  0% {
    opacity: 0;
    transform: translate(100px, 100px) scale(0.5); /* 右下から小さく */
  }
  60% {
    opacity: 1;
    transform: translate(-10px, -10px) scale(1.1); /* 弾んで少し大きくなる */
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1); /* 最終的に元の位置とサイズに */
  }
}
@media (min-width: 1000px) and (max-width: 1500px) {
#top .img1 {
  top: 25vh;
  left: 18vw;
}
#top .img1 img {
    width: 85%; 
    height: auto; 
  }
#top .img2 {
  top: 36vh;
  right: 20vw;
}
#top .img2 img {
    width: 85%; 
    height: auto; 
  }
#top .img3 {
  top: 70vh;
  left: 30vw;
	animation-delay: 0.4s;
}
#top .img3 img{
    width: 85%; 
    height: auto; 
  }
}
@media (min-width: 769px) and (max-width: 999px) {
#top .img1 {
  top: 25vh;
  left: 18vw;
}
#top .img1 img {
    width: 70%; 
    height: auto; 
  }
#top .img2 {
  top: 36vh;
  right: 10vw;
}
#top .img2 img {
    width: 70%; 
    height: auto; 
  }
#top .img3 {
  top: 70vh;
  left: 30vw;
	animation-delay: 0.4s;
}
#top .img3 img{
    width: 70%; 
    height: auto; 
  }	
}
@media (max-width: 768px) {
	/* スマホ用のスタイル */
.top_image {
  padding-top:1em;
}
.vertical-text {
  font-size: 1.5em;
  font-weight: 900;
  line-height: 2em;
	padding-left:0;
}
#top .img1 {
  top: 15vh;
  left: -2em;
  transform: translate(-50%, -50%);
}
#top .img1 img {
    width: 58%; 
    height: auto; 
  }
#top .img2 {
  top: 26vh;
  right: -4em;
}
#top .img2 img {
    width: 60%; 
    height: auto; 
  }
#top .img3 {
  top: 54vh;
  left: 3em;
}	
#top .img3 img{
    width: 60%; 
    height: auto; 
  }
}

/* セクション2 About　****************************************************/
#about{
	margin-top: -3em; 
	margin-bottom: 6em;
	z-index: 100;
}
#about h3 {
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 3.5em;
  font-weight: 900;
  list-style: none;
  color: #ffaa32;
  display: flex;          /* ← 横並びに */
  align-items: center;    /* ← 上下中央揃えに */
  gap: 0.5em;             /* ← 画像とテキストの間にスペース（任意） */
}

#about h3::before {
  content: "";
  display: inline-block;
  width: 55px;
  height: 53px;
  background-image: url("../image/list01.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0; /* ← 画像が縮まないように固定 */
}
#about .subtitle{
	font-size:.8em;
	 padding-left: 90px; /* アイコン＋gap分 */
	margin-top: -2em;
}
#about .container {
  background-image: url("../image/about-image03.png");
  background-repeat: no-repeat;
  background-position: calc(50% + 4em) calc(50% + 6em);
  background-size: auto;  /* 原寸 */
  box-sizing: border-box;
  display: flex;
}
#about .left ,#about .right{
flex: 1;
}

#about .about-text{
	padding:1em 0 10em 90px;
}
#about .about-company{
	padding-left:90px;
	position: relative;
	width:100%;
}
#about .about-company img{
	width: 80%;
	height: auto;
}
#about .about-company .button{
	position: absolute;
	top:-1.3em;
	left:110px;
}
#about .about-company .button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.3em;
  font-weight: 800;
  background-color: #000;
  color:#fff;
  border-radius: 40px;
  padding: .5em 1.5em .5em 1em;
  transition: opacity 0.5s;
}
#about .about-company .button a::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../image/ico_arrow01.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
#about .about-company .button a:hover{
  background-color: #00a4b0;
}
#about .right{
	text-align: right;
	position: relative;
	padding-top:7em;
}
#about .right img{
	width:100%;
	max-width: 700px;
	height: auto;
}
#about .right .pure{
	position: absolute;
	top:-2.7em;
	left:40%;
}
#about .right .denpa01{
	position: absolute;
	right:-1.5em;
	top:5em;
}
#about .right .denpa02{
	position: absolute;
	right:-2.8em;
	top:3em;
}
/* アニメーションで電波風  */
@keyframes denpa-wave {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

#about .right .denpa01,
#about .right .denpa02,
#product .denpa01,
#product .denpa02,
#product .denpa03,
#product .denpa04
{
  animation-name: denpa-wave;
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
  position: absolute;
}

#about .right .denpa01 ,#product .denpa02 ,#product .denpa03 {
  animation-delay: 0s;
}

#about .right .denpa02 ,#product .denpa01 ,#product .denpa04 {
  animation-delay: 1s; /* ← ここでズレを出す */
}
@media (min-width: 1000px) and (max-width: 1500px) {
#about .right .pure{
	position: absolute;
	top:-1em;
	left:30%;
}	
#about .right .pure img{
    max-width: 80%;
}
	
}
@media (min-width: 769px) and (max-width: 999px) {

#about .left{
	width:100%;
	margin: 0 auto;
}
#about .left img{
    width: 100%;
    height: auto;
  }
#about .about-text{
	padding:1em 0 5em 50px;
	font-size:.8em;
}	
}
@media (max-width: 768px) {
	/* スマホ用のスタイル */
#about{margin-top: 7em; margin-bottom: 6em; }
	
#about .container {
    flex-direction: column-reverse; /* 上下の順番が逆 */
	background-position: calc(50% + 10em) calc(10% + 1.5em);
    background-size: 90%;
}

#about .left,
#about .right {
    width: 95%;
	box-sizing: border-box;
	padding: 1em 1em 4em 1em;
	margin: 0 auto;

}
#about .right img{
    max-width: 100%;
    height: auto;
  }	
#about .right .pure{
	position: absolute;
	top:-5em;
	left:13%;
}
#about .right .pure img{
    max-width: 60%;
}
#about .right .denpa01 img ,#about .right .denpa02 img{
    max-width: 60%;
}
#about .right .denpa01{
	right:0em;
	top:0em;
}
#about .right .denpa02{
	right:1em;
	top:1em;
}
#about h3 {
  font-size: 1.8em;
  font-weight: 900;
  gap: 0.3em;             /* ← 画像とテキストの間にスペース */
}

#about h3::before {
  width: 40px;
  height: 38px;
}
#about .subtitle{
	font-size:.7em;
	 padding-left: 50px; /* アイコン＋gap分 */
	margin-top: -1em;
}
#about .about-text{
	padding:1em 0 6em 50px;
	font-size:.8em;
}	
#about .left{
	width:90%;
	margin: 0 auto;
}
#about .left img{
    width: 100%;
    height: auto;
  }
#about .about-company{
	padding-left:0;
}
#about .about-company .button{
	left:2.3em;
}
#about .about-company .button a{
  font-size: 1em;
}

}
/* セクション3 Product　****************************************************/
#product .pure {
  position: absolute;
  left: 60%;
  top: 5em; /* ← にょき前の一時待機位置（画面外 or 下め） */
  opacity: 0;
  transform: rotate(0deg);
  transition: top 1s ease-out, opacity 1s ease-out;
}

#product .pure.animate {
  top: -10em; /* ← 本来の定位置 */
  opacity: 1;
  animation: lookDown 1s ease-in-out 1s forwards; /* 1秒後に首かしげ */
}

/* 首をかしげるアニメーション */
@keyframes lookDown {
  0%   { transform: rotate(0deg); }
  30%  { transform: rotate(10deg); }
  60%  { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}

.container_product {
  background: url("../image/product_bg.png") no-repeat center center;
  background-size: 1680px auto; /* 横だけ小さくする、縦は自動で比率維持 */
  position: relative;
  max-width: 1680px;
  margin: 0 auto 6em;
  padding: 6em 4em 3em 6em;

}
#product .denpa01{
	position: absolute;
	left:-1em;
	top:-2em;
}
#product .denpa02{
	position: absolute;
	left:0;
	top:-.8em;
}
#product .denpa03{
	position: absolute;
	right:.5em;
	bottom:-1.5em;
}
#product .denpa04{
	position: absolute;
	right:-.8em;
	bottom:-2.6em;
}
.prodact-content01 ,.prodact-content02{
	display: flex;
	gap:4em;
}
.prodact-content01 .left ,.prodact-content01 .right ,.prodact-content02 .left ,.prodact-content02 .right{
flex: 1;
}
.prodact-content01 .left{
	width:100%;
	max-width: 673px;
}
.prodact-content01 .left img{
	width: 100%;
	height: auto;
}
.prodact-content01 h3 {
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 3.5em;
  font-weight: 900;
  list-style: none;
  color: #00a4b0;
  display: flex;          /* ← 横並びに */
  align-items: center;    /* ← 上下中央揃えに */
  gap: 0.5em;             /* ← 画像とテキストの間にスペース（任意） */
}

.prodact-content01 h3::before {
  content: "";
  display: inline-block;
  width: 90px;
  height: 77px;
  background-image: url("../image/list02.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0; /* ← 画像が縮まないように固定 */
}
.prodact-content01 .subtitle{
	font-size:.8em;
	 padding-left: 125px; /* アイコン＋gap分 */
	 margin-top: -2em;
}
.prodact-content01 .prodact-text{
	padding-left: 125px;
	margin-top: 1em;
}
.prodact-content01 .button{
	margin: 4em 0 3em 110px;
}
.prodact-content01 .button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.3em;
  font-weight: 800;
  background-color: #000;
  color:#fff;
  border-radius: 40px;
  padding: .5em 1.5em .5em 1em;
  transition: opacity 0.5s;
}
.prodact-content01 .button a::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../image/ico_arrow01.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
.prodact-content01 .button a:hover{
  background-color: #00a4b0;
}
.prodact-content02 li{
	width:90%;
	color:#00a4b0;
	font-size:1.2em;
	font-weight: 900;
	display: flex;
	align-items: center;
	gap:2em;
	background-color:#fff;
	border-radius: 90px;
	margin:2em auto 3em;
	padding: .5em 2.5em;
}
.container_product .product-image{
	position: absolute;
	bottom:-8em;
	right: 7em;
}
.container_product .product-image img{
	width:100%;
	max-width: 526px;
	height: auto;
}
@media (min-width: 1100px) and (max-width: 1500px) {
.container_product {
  margin: 0 auto 6em;
  padding: 6em 2em 3em 2em;

}	
.prodact-content02{
	display: flex;
	gap:1em;
}
#product .pure {
  left: 60%;
   top: 1em; /* ← にょき前の一時待機位置（画面外 or 下め） */
  width:50%;
  max-width:300px; 
}
#product .pure.animate {
  top: -5em; /* ← 本来の定位置 */
}	
#product .pure img{
  width:100%;
  height: auto;
}	
.prodact-content02 li{
	gap:1em;
	margin:2em auto 3em;
	padding: .5em 1em;
}
}
@media (min-width: 769px) and (max-width: 1099px) {
.container_product {
  padding: 6em .5em 3em .5em;

}
#product .pure {
  left: 60%;
   top: 1em; /* ← にょき前の一時待機位置（画面外 or 下め） */
  width:50%;
  max-width:250px; 
}
#product .pure.animate {
  top: -2em; /* ← 本来の定位置 */
}	
#product .pure img{
  width:100%;
  height: auto;
}	
.prodact-content02{
	display: flex;
	gap:1em;
}
.prodact-content02 li{
	gap:1em;
	margin:2em auto 3em;
	padding: .5em 1em;
}
}
@media (max-width: 768px) {
	/* スマホ用のスタイル */

.container_product {
  background: url("../image/product_bg_sp.png") no-repeat center center;
    background-size: cover;  /* 画面幅いっぱいに表示 */
    background-position: center top; /* 必要に応じて調整 */
    max-width: 90%;  
    padding: 1em; 
 }
#product .pure {
  left: 45%;
  width:50%;

}
#product .pure.animate {
  top: -5em; /* ← 本来の定位置 */
}	
#product .pure img{
  width:100%;
  height: auto;
}
#product .denpa01{
	left:-1.5em;
	top:-1.5em;
}
#product .denpa02{
	left:-.5em;
	top:-.3em;
}
#product .denpa03{
	right:-1em;
	bottom:-1.5em;
}
#product .denpa04{

	right:-1.5em;
	bottom:-2.6em;
}
.prodact-content01 {
	flex-direction: column-reverse; /* 上下の順番が逆 */
	gap:2em;
}	
.prodact-content01 .left ,.prodact-content01 .right {
    width: 100%;
	box-sizing: border-box;
	padding: 1em;
}
.prodact-content01 h3 {
  font-size: 1.8em;
  gap: 0.3em;
  padding-left:1em;
}
.prodact-content01 h3::before {
  width: 60px;
  height: 47px;
  }
.prodact-content01 .subtitle{
	font-size:.7em;
	 padding-left: 105px; /* アイコン＋gap分 */
	 margin-top: -1em;
}
.prodact-content01 .prodact-text{
	padding-left: 0;
	font-size:.8em;
}
.prodact-content01 .button{
	margin: 2em auto 1em;
	text-align: center;
}
.prodact-content01 .button a{
  font-size: 1em;
}
.prodact-content01 .left{
	text-align: center;
}
.prodact-content01 .left img{
	width:100%;
	height: auto;

}
.prodact-content02 {
	flex-direction: column; 
	gap:0;
	margin-bottom: 8em;
	
}

.prodact-content02 li{
	width:100%;
	font-size:.9em;
	gap:1em;
	margin:1em auto 1.3em;
	padding: .5em 1em;
	line-height: 1.5em;
}
.prodact-content02 li img{
	width:85px;
	height: auto;
	flex-shrink: 0;
}
.container_product .product-image{
	width:80%;
	bottom:-1em;
	right: 1.3em;
}
.container_product .product-image img{
	width:100%;
	height: auto;
}
}


/* セクション3 News　****************************************************/
#news h3 {
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 3.5em;
  font-weight: 900;
  list-style: none;
  color: #f0a0b4;
  display: flex;          /* ← 横並びに */
  align-items: center;    /* ← 上下中央揃えに */
  gap: 0.5em;             /* ← 画像とテキストの間 */
}

#news h3::before {
  content: "";
  display: inline-block;
  width: 82px;
  height: 78px;
  background-image: url("../image/list03.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0; /* ← 画像が縮まないように固定 */
	margin-top: .3em;
}
#news .subtitle{
	font-size:.8em;
	 padding-left: 118px; /* アイコン＋gap分 */
	margin-top: -2em;
}
#news .news-text{
	padding-left: 117px;
	margin-top: 1em;
}
#news .container{
	display: flex;
}
#news .container .left{
	flex: 2;
}
#news .container .right{
	flex: 3;
	padding-top:8.5em;
}
#news .right dl {
  margin: 0;
  padding: 0;
}

#news .right dt {
  font-family: "M PLUS Rounded 1c", serif;
  font-weight: 900;
  padding-top:1em;
  border-top:1px solid #000;
}

#news .right dd {
  margin-left: 0; /* 左インデント消す */
  padding-bottom: 2em;
  margin-top: .5em;
}
#news .right dd:last-child{
  border-bottom:1px solid #000;
}

@media (max-width: 768px) {
	/* スマホ用のスタイル */
#news .container{
	flex-direction: column;
}
#news .container .left ,#news .container .right{
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}
#news .container .right{
	padding-top:2em;
	width:90%;
	margin: 0 auto;
	text-align: left;
    font-size: .8em;
}
#news h3 {
  font-size: 1.8em;
  gap: 0.3em;
  padding-left:3em;
}

#news h3::before {
  width: 50px;
  height: 48px;
}
#news .subtitle{
	font-size:.7em;
	 padding-left: 7px; /* アイコン＋gap分 */
	 margin-top: -1em;
}
#news .news-text{
	width:95%;
	padding-left: 0;
	margin: 1em auto;
	font-size:.8em;
	text-align: center;
}	
	
}

/* セクション4 Recruit　****************************************************/

#recruit{
	background-color:#00a4b0;
	margin-top:6em;
	padding:5em 0;
	position: relative;
}
#recruit h3 {
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 3.5em;
  font-weight: 900;
  list-style: none;
  color: #fff;
  display: flex;          /* ← 横並びに */
  align-items: center;    /* ← 上下中央揃えに */
  gap: 0.5em;             /* ← 画像とテキストの間にスペース（任意） */
}

#recruit h3::before {
  content: "";
  display: inline-block;
  width: 95px;
  height: 86px;
  background-image: url("../image/list04.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0; /* ← 画像が縮まないように固定 */
}
#recruit .subtitle{
	font-size:.8em;
	 padding-left: 135px; /* アイコン＋gap分 */
	margin-top: -2em;
	color:#fff;
}
#recruit .container {
   display: flex;
	gap:2em;
}
#recruit .left ,#recruit .right{
flex: 1;
}
#recruit .left img{
	width:100%;
	max-width: 700px;
	height: auto;
}
#recruit .recruit-text{
	padding:1em 0 8em 135px;
	color:#fff;
}
#recruit .button{
	 margin-left: 135px; /* アイコン＋gap分 */
}
#recruit .button a{
  font-family: "M PLUS Rounded 1c", serif;
  font-size: 1.3em;
  font-weight: 800;
  background-color: #000;
  color:#fff;
  border-radius: 40px;
  padding: .5em 1.5em .5em 1em;
  transition: opacity 0.5s;
}
#recruit .button a::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url("../image/ico_arrow01.png") no-repeat;
  background-size: contain;
  margin-left: 1em;
  margin-bottom: 5px;
  vertical-align: middle;
}
#recruit .button a:hover{
  background-color: #fff;
  color:#00a4b0;
}
#recruit .button a:hover::after {
  background-image: url("../image/ico_arrow01_o.png");
}
#recruit .container .pure{
	position: absolute;
	bottom:-1em;
	right:4em;
}
@media (max-width: 768px) {
	/* スマホ用のスタイル */
#recruit{
	margin-top:4em;
	padding:2em 0 6.5em;
}
#recruit .container {
   flex-direction: column-reverse; /* 上下の順番が逆 */
	gap:2em;
}
#recruit .left ,#recruit .right{
	width:100%;
}
#recruit h3 {
  font-size: 1.8em;
  gap: 0.3em;
  padding-left:1em;
}

#recruit h3::before {
  width: 60px;
  height: 47px;
}
#recruit .subtitle{
	font-size:.7em;
	 padding-left: 105px; /* アイコン＋gap分 */
	 margin-top: -1em;
}	
#recruit .recruit-text{
	padding:1em 1.3em 0 105px;
	font-size:.8em;
}
#recruit .left{
	width:80%;
	text-align: center;
	margin: 0 auto;
}
#recruit .left img{
	width:100%;
	height: auto;
}
#recruit .button{
	margin: 2em auto 1em;
	text-align: center;
}
#recruit .button a{
  font-size: 1em;
}
#recruit .container .pure{
	bottom:-.8em;
	right:-3em;
}
#recruit .container .pure img{
	width:60%;
	height:auto;
}
}