/* メインエリアの高さ固定 */
.hero-showcase {
    position: relative;
    width: 100%;
    height: 100vh; /* ★ここでPC時の高さをガチッと指定 */
    overflow: hidden;
    background-color: #fff;
}
.hero-text {
    letter-spacing: 0.2em;
}

/* 画像を表示エリアの高さに100%合わせる */
.hero-showcase .bg {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

.hero-showcase .bg img {
    height: 100%; 
    
    /* 比率を保ったままエリアを埋め尽くす（これで拡大されます） */
    object-fit: cover; 
    
    /* 画像のどこを中心に置くか（centerで真ん中基準に拡大） */
    object-position: center; 
}

/* 背景の暗幕（文字を読みやすくする） */
.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	background: rgba(0, 0, 0, 0.1) 0%;
    z-index: 1;
}
/* スライダー全体の枠 */
.slider-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 0;
}

/* ★画像全てを重ねて、縦いっぱいに拡大する共通設定 */
.slider-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%; 
    object-fit: cover; 
    object-position: center;
    opacity: 0; /* 最初は全員透明にしておく */
    
/* ★全体の長さを「24秒」に伸ばして、ゆったりループさせます */
    animation: fadeSlider 24s infinite ease-in-out;
}

/* ★3枚の画像が「均等（24秒÷3＝8秒）」にズレるようにディレイを設定 */
.slider-wrapper img:nth-child(1) {
    animation-delay: 0s;
}
.slider-wrapper img:nth-child(2) {
    animation-delay: 8s;  /* ★8秒後に2枚目がスタート */
}
.slider-wrapper img:nth-child(3) {
    animation-delay: 16s; /* ★16秒後に3枚目がスタート */
}

/* ★24秒（3枚用）に最適化した、さらにゆったり切り替わるアニメーション */
@keyframes fadeSlider {
    0% { opacity: 0; transform: scale(1.0); }
    6% { opacity: 1; }                             /* 約1.5秒かけて「じわ〜っ」と優しくフェードイン */
    33% { opacity: 1; }                            /* 33%（約8秒間）までしっかり表示を維持 */
    39% { opacity: 0; transform: scale(1.04); }    /* 次の画像へゆったり消えながら、滑らかにズーム */
    100% { opacity: 0; }                           /* 残りの時間は透明をキープして待機 */
}
/* メッセージの配置調整 */
.hero-showcase .message-box {
    position: absolute;
    top: 65%;
    left: 8%;
    transform: translateY(-50%);
    z-index: 2;
    max-width: 1000px;
  	padding: 10px;
}

.hero-showcase .sub-ttl {
    font-size: 150%;
    letter-spacing: 0.2em;
    color: #008943;
    font-weight: bold;
    display: block;
    margin-bottom: 8px;
	text-shadow: 
		0 0 10px rgba(255, 255, 255, 0.3),
        0 0 20px rgba(255, 255, 255, 0.3),
        0 0 30px rgba(255, 255, 255, 0.3),
        0 2px 5px rgba(255, 255, 255, 0.15); /* 下側へのわずかな沈み込み用の隠し味の影 */
}

.hero-showcase .message-box h2 {
    color: #fff;
    letter-spacing: 0.2em;
    font-size: 3.5rem;
    line-height: 1.5;
    font-weight: 700;
	margin-bottom: 20px;
    text-shadow: 
		0 0 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(0, 0, 0, 0.15); /* 下側へのわずかな沈み込み用の隠し味の影 */
}

.hero-showcase .message-box p {
    color: #fff;
    font-size: 150%;
    line-height: 1.7;
    text-shadow: 
		0 0 10px rgba(0, 0, 0, 0.3),
        0 0 20px rgba(0, 0, 0, 0.3),
        0 0 30px rgba(0, 0, 0, 0.3),
        0 2px 5px rgba(0, 0, 0, 0.15); /* 下側へのわずかな沈み込み用の隠し味の影 */
}
.hero-showcase .short-bar {
    width: 50px;
    border: none;
    border-top: 3px solid #008943;
    margin: 0 0 20px 0;
}


.hero-actions .btn-main {
    display: inline-block;
    padding: 7px 35px;
    background-color: #008943;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px;
    transition: all 0.3s ease;
}
.hero-actions .btn-main:hover {
	opacity: 0.6;

}

/* 📱 スマホ表示のときの高さ指定 */
@media screen and (max-width: 768px) {
    body {
    }
    .hero-showcase {
    }
    .hero-showcase .message-box {
        left: 5%;
        right: 5%;
        top: 75%;
    }
    .hero-showcase .message-box h2 {
        font-size: 250%;
    }
    .hero-showcase .message-box p {
        font-size: 100%;
        line-height: 1.6;
    }
}



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

}

#banner {
	max-height: 670px;
	position: relative;
	z-index: 0;
	background: url(../images/top/mv0.jpg) no-repeat center;

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	margin-bottom:70px;
}
#top1 {
	margin-bottom: 60px;
}
#top1 dt {
	text-align: center;
	font-size: 120%;
	margin-bottom: 15px;
	letter-spacing: 3px;
}
#top1 dt span {
	font-size: 200%;
	font-weight: 600;
	letter-spacing: 6px;
}
#top1 dd {
	width: 820px;
	margin: 0px auto;
	color: #008644;
	font-size: 90%;
}

#top2 {
	margin-bottom: 100px;
}
#top2 dt {
	text-align: center;
	margin-bottom: 20px;
}
#top2 dd {
	width: 300px;
	margin: 0px auto;
	color: #008644;
	border: #008644 1px solid;
	text-align: center;
	line-height: 100%;
	padding:5px 0 7px;
}

#top3 {
	width: 100%;
	background-color: #008943;
	color: #fff;
}
#top3 ul.ex_full {
	display:-webkit-box;
    display:-moz-box;
    display:-ms-flexbox;
    display:-webkit-flex;
    display:-moz-flex;
    display:flex;
    -webkit-box-lines:multiple;
    -moz-box-lines:multiple;
    -webkit-flex-wrap:wrap;
    -moz-flex-wrap:wrap;
    -ms-flex-wrap:wrap;
    flex-wrap:wrap;
	border-right: #4DAD7C 1px solid;
	width: 1000px;
	margin: 0px auto;
}
#top3 li.ex {
	width: 33.33%;
	border-left: #4DAD7C 1px solid;
	padding: 130px 30px 30px;
	position: relative;
}
#top3 li.ex p.txt {
	font-size: 85%;
	color: #CCE7D9;
}
#top3 li.ex p.ttl1 {
	margin: 0;
	position: absolute;
	left: 50%;
	top: -20px;
	margin-left: -66px;
}
#top3 li.ex p.ttl2 {
	font-size: 100%;
	line-height: 150%;
	text-align: center;
	letter-spacing: 2px;
	margin-bottom: 10px;
	color: #fff;
}
#top3 li.ex p.ph {
}
#top3 li.ex ul {
	list-style: outside circle;
	margin-left: 20px;
}
#top3 li.ex ul li {
	color: #fff;
}
#top3 li.ex ul li a {
	color: #fff;
}


/*共通設定*/
.wrap{
	width: 1000px;
	margin: 0 auto;
}
section{
	padding: 50px 0;
    position: relative;
    width: 100%;
    height: 100%;
}

div.ttl {
    transform: rotate(0.01deg);
    letter-spacing: 6px;
    font-weight: 100;
    margin: 5px auto 30px;
}
div.ttl h3{
	font-size: 270%;
    font-weight: 700;
    line-height: 1.2em;
}
div.ttl p{
	margin: 0px auto;
    display: block;
    color: #008741;
    font-size: 100%;
    font-weight: 700;
    line-height: 1em;
    padding: 3px 0 15px;
}

.btn-main {
    display: inline-block;
    padding: 7px 35px;
    background-color: #008943;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    border-radius: 25px;
    transition: all 0.3s ease;
}
.btn-main:hover {
    opacity: 0.6;
}


/*　最新のお知らせ　*/
#topinfo {
	width: 100%;
	padding: 10px 0;
	background-color: #f3f8f6;
}


#topinfo section#information ul {
	border-top: #ccc 1px dotted;
	margin-bottom: 30px;
}
#topinfo section#information li {
	border-bottom: #ccc 1px dotted;
	padding: 10px 0;
}
#topinfo section#information li time {
	display: inline-block;
	color: #008943;
	width: 150px;
}

#topinfo section#information li span.tag{
	display: inline-block;
	color: #ffffff;
	background-color: #008943;
	width:120px;
	font-size: 80%;
	text-align: center;
	padding: 0px 7px 3px;
	border-radius: 3px;
	margin: 0 15px 0 0;
	vertical-align: middle;
}
#topinfo section#information li span.tag.urgent{
	background-color: #ff002f
	}
#topinfo section#information li span.tag.news{
	background-color: #ffbe00
	}
#topinfo section#information li span.tag.schedule{
	background-color: #008943;
	}

.ico-new {
  display: inline-block;
  background-color: #ff0000; /* 赤色背景 */
  color: #ffffff;
  font-size: 10px;
  font-weight: bold;
  padding: 2px 6px;
  border-radius: 3px;
  margin-right: 8px;
  vertical-align: middle;
}

/* 画面幅が767px以下のデバイス（主にスマートフォン）に適用 */
@media screen and (max-width: 767px) {
  /* クラス「sp-only」を持つ <br> タグを表示に戻す（強制的に改行させる） */
  .sp-only {
    /* <br>タグは通常 inline 要素ですが、ブラウザの解釈に任せるため
       この場合は block や inline-block にする必要はありません。
       重要なのは display: none; を解除することです。 */
    display: inline; 
  }
}

/* --- スマホ表示（基本設定） --- */
#topinfo section#information ul li a,
.news-list li a {
    display: block;          /* 💡スマホではブロック要素にして、強制的に次の行へ落とす */
    width: 100%;             /* 横幅いっぱいに広げる */
    white-space: nowrap;     
    overflow: hidden;        
    text-overflow: ellipsis; /* はみ出た末尾を「…」にする */
    color: #333;
    margin-top: 5px;         /* 💡日付やタグとの間に少し隙間を作る */
}

/* --- PC表示（画面幅768px以上） --- */
@media screen and (min-width: 768px) {
    #topinfo section#information ul li a,
    .news-list li a {
        display: inline-block; /* 💡PCではインラインブロックに戻して横並びにする */
        vertical-align: middle;
        max-width: 60%;        /* PCの時はデザインに合わせて制限 */
        margin-top: 0;         /* 上の隙間をリセット */
    }
}

#topinfo section#information li a:hover {
	color: #008943;
}
#topinfo section#information p.btn {
	width:auto;
    margin: 0 auto;
    text-align: center;
}
#topinfo section#information p.btn a {
}
#topinfo section#information p.btn a:hover {
}
.t_youtube {
  max-width: 730px;
  width: 90%;
  margin: 30px auto 0;
}
.video{
  position:relative;
  width:100%;
  padding-top:56.25%;
}
.video iframe{
  position:absolute;
  top:0;
  right:0;
  width:100%;
  height:100%;
}

#topinfo section#information ul li a,
.news-list li a {
    display: inline-block;
    vertical-align: middle;
    max-width: 65%;          /* 横幅はデザインに合わせて調整 */
    white-space: nowrap;     /* 改行させない */
    overflow: hidden;        /* はみ出た部分は隠す */
    text-overflow: ellipsis; /* はみ出た末尾を「…」にする */
	color: #333;
}

#topinfo section#information li span.tag.urgent { background-color: #ff3366; }    /* 重要 */
#topinfo section#information li span.tag.schedule{ background-color:#008943; }   /* スケジュール */
#topinfo section#information li span.tag.item { background-color: #0066cc; }    /* 商品 */
#topinfo section#information li span.tag.news { background-color: #ffbe00; }    /* ニュース */
#topinfo section#information li span.tag.info { background-color: #ff8800; }    /* お知らせ */


/* 企業情報 */
section p.visual{
    max-width: 100%;
    height: auto;
}

section .message {
    display: flex;
    justify-content: space-between;
    
    /* 上のラインを揃える設定（これで合っています！） */
    align-items: flex-start; 
    
    width: 100%;
}

/* ★画像側のブロック */
section .message .visual {
    width: 45%;
    
    /* ➔【ここが最重要！】 */
    /* ブラウザが勝手につける上の余白を「0」にして、画像を強制的に上まで引っ張り上げます */
    margin-top: 0; 
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
section .message .visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* ★テキスト側のブロック */
section .message .actions {
    width: 50%;
}

/* ★テキストの最初の1行（Company）の上の余白も合わせてゼロにします */
section .message .actions .ttl p {
    margin-top: 0;
}

/* 📱 スマホのときは縦並びにする */
@media screen and (max-width: 768px) {
    #topinfo section#information ul li a,
    .news-list li a {
        max-width: 100%;          /* 横幅はデザインに合わせて調整 */
    }
    .wrap{
        width: 100%;
        margin: 0 auto;
    }
    
    section .message {
        max-width: 100%;
        flex-direction: column;
    }
    
    section .message .visual,
    section .message .visual img,
    section .message .actions {
        width: 100%;
    }
    
    section .message .visual {
        margin-bottom: 20px; /* 縦並びの時は下に隙間を作る */
    }
}


/* 取扱メーカー */
section#manufacturer ul {
    display: flex;
    /* ★ここがポイント：横幅がいっぱいになったら下に折り返す設定 */
    flex-wrap: wrap; 
    
    /* ★左詰めで並べる（2段目の5枚目が左側に配置されます） */
    justify-content: flex-start; 
    align-items: center; 
    
    list-style: none;
    width: 100%;
}

/* 各ロゴの枠（li タグ） */
section#manufacturer ul li {
    /* ★1枠を約22%にします（4枚並ぶと22%×4＝88%になり、残りが隙間になります） */
    width: 22%; 
    
    /* ★4枚並びの時の、右側と下側のすき間（隙間の計算が面倒な時はこれが一番ラクです） */
    margin-right: 4%;  /* 右側のすき間 */
    margin-bottom: 20px; /* 2段目との上下のすき間 */
    
    text-align: center;
    box-sizing: border-box;
	border: 1px solid #f1f1f1;
	padding: 15px ;
}

/* ★右端（4番目、8番目...）のロゴだけは、右マージンをゼロにして端にピタッと合わせる */
section#manufacturer ul li:nth-child(4n) {
    margin-right: 0;
}

/* 画像が入っているpタグの余白リセット */
section#manufacturer ul li p.visual {
    margin: 0;
    padding: 0;
    text-align: center;
}

/* ロゴ画像そのものの設定 */
section#manufacturer ul li p.visual img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* 📱 スマホの時は、画面が狭いので2列（2枚並び）にする */
@media screen and (max-width: 768px) {
    section#manufacturer ul li {
        width: 46%; /* スマホは2枚並び（46%×2＝92%） */
        margin-right: 8%;
    }
    /* スマホの時は偶数番目（2枚目、4枚目...）の右マージンをゼロにする */
    section#manufacturer ul li:nth-child(2n) {
        margin-right: 0;
    }
    /* PC用の4つ目の設定をスマホでは打ち消す */
    section#manufacturer ul li:nth-child(4n) {
        margin-right: 8%;
    }
    section#manufacturer ul li:nth-child(4n), ul li:nth-child(2n) {
        /* 2の倍数でかつ4の倍数でもあるものはきっちり右端へ */
        margin-right: 0;
    }
}


#ContactArea{
	background-color: #f3f8f6;
}
#ContactArea .ttl p,
#ContactArea .ttl h3{
	text-align: center;
}

/* 親要素を横並びのコンテナにする */
.buttons {
    display: flex;
    /* ★2つのボタンを横並びにする */
    flex-direction: row;
    /* 2つのボタンを中央に寄せる */
    justify-content: center;
    /* ボタンとボタンの間のすき間（お好みで調整してください） */
    gap: 20px;
    
    margin: 30px auto;
    width: 100%;
}

/* ボタンの外枠（pタグ）の余計なマージンを消す */
.buttons p.button {
    margin: 0;
    padding: 0;
}

.buttons p.button .btn-main:hover {
    opacity: 0.6;
}

/* ※HTMLで class="btn-greenbtn-main" とくっついてしまっているので、そのまま指定するか、HTML側を「btn-green btn-main」に半角スペースで区切ると綺麗です */
.buttons p.button .btn-greenbtn-main {
    background-color: #008943; 
}

.buttons p.button .btn-red {
    background-color: #ff002f;
}

/* 📱 スマホのときは押しやすいように縦並びにする */
@media screen and (max-width: 768px) {
    .buttons {
        flex-direction: column; /* 縦並びに変更 */
        align-items: center;    /* 中央寄せ */
        gap: 15px;              /* ボタン同士の上下のすき間 */
    }
    .buttons p.button,
    .buttons p.button .btn-main {
        width: 100%;            /* スマホ画面いっぱいのボタンにする */
        max-width: 340px;       /* ただし広がりすぎないようにストッパーをかける */
        text-align: center;
    }
    #ContactArea section{
    width: 90%;
    margin: 0 auto;
}

}



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


@media screen and (max-width: 680px) {
	#top1 {
		width: 90%;
		margin: 0px auto 50px;
	}
	#top1 dt {
		font-size: 120%;
	}
	#top1 dt span {
		font-size: 180%;
	}
	#top1 dd {
		width: 100%;
	}
	
	#top3 ul.ex_full {
		width: 100%;
		margin: 0px auto;
	}
	#top3 li.ex {
		width: 33.33%;
		border-left: #4DAD7C 1px solid;
		padding: 90px 20px 20px;
		position: relative;
	}
	#top3 li.ex p.txt {
		display: none;
	}
	#top3 li.ex p.ttl1 {
		width: 80px;
		top: -20px;
		margin-left: -40px;
	}
	#top3 li.ex p.ttl2 {
		font-size: 120%;
		margin-bottom: 10px;
	}
	
	#topinfo dl,
	#topinfo dt,
	#topinfo dd {
		display: block;
	}
	#topinfo dl {
		width: 90%;
		margin: 0px auto;
	}
	#topinfo dt {
		width: 200px;
		margin: 0px auto 20px;
		line-height: 170%;
		text-align: center;
	}
	#topinfo dt span {
		text-align: center;
		font-size: 160%;
	}
	#topinfo dd {
	}
	#topinfo dd ul {
		margin-bottom: 0;
	}
	#topinfo dd p.btn {
		bottom: -30px;
		width: 200px;
	}
	#topinfo dd p.btn a {
		padding: 7px 0 10px;
	}
}

@media screen and (max-width: 480px) {
	#banner {
		max-height: 350px;
		margin-bottom:30px;
	}
	#top1 dt {
		font-size: 100%;
	}
	#top1 dt span {
		font-size: 150%;
	}
	#top2 {
		margin-bottom: 60px;
	}
	#top3 li.ex {
		width: 100%;
		border-left: none;
		border-bottom: #4DAD7C 1px solid;
		padding: 50px 30px 30px;
	}
	#top3 li.ex p.ttl1 {
		width: 50px;
		top: -25px;
		margin-left: -25px;
	}
	#top3 li.ex p.ph {
		width: 50%;
		margin: 0px auto 15px;
	}
	#top3 li.ex ul {
		list-style: none;
		margin-left: 0;
		border-top: #4DAD7C 1px dashed;
	}
	#top3 li.ex ul li {
		color: #fff;
		border-bottom: #4DAD7C 1px dashed;
		padding-bottom: 4px;
		padding-left: 25px;
		background: url(../images/common/point04.png) no-repeat 10px center;
		background-size: 4px auto;
		background-color: #007634
	}
	#top3 li.ex ul li a {
		color: #fff;
	}
	#topinfo dd li {
		padding: 10px 0;
		line-height: 150%;
	}
	#topinfo dd li span {
		display: block;
		font-size: 70%;
		width: auto;
	}
	#topinfo dd p.btn {
		right: auto;
		left: 50%;
		margin-left: -100px;
	}
}