@charset "UTF-8";
body {
	width:100%;
	padding:0;
	margin: 0;
}

@media (max-width: 767px){
 /* スマホの設定 */
	.point_txt001 {
		text-align:center;
		width:90vw;
	}
	.point_txt001 img {
		width:80%;
	}
	.part_full-time {
		width:90vw;
		margin:0 auto;
	}
	.part_full-time div {
		width:80vw;
		margin-bottom:2rem;
		border-radius:10px;
		margin-left: auto;
		margin-right: auto;
	}
	h2 {
		padding: 20px 0 0 0;
		line-height:125%;
	}
	.responsibilities {
		width:90vw;
		margin:0 auto;
	}
	.work-flow {
		width:90vw;
		margin:0 auto;
		line-height: 125%;
		margin:0 auto;
	}
	.work-flow img {
		width:80vw;
		margin:0 auto;
	}
	.work-flow2 {
		width:90vw;
		margin:0 auto;
		line-height: 125%;
	}
	.work-flow2 img {
		width:80vw;
		margin:0 auto;
	}
	.job_guideline {
		width:90vw;
		display: flex;
		flex-direction: column;
		gap:1vw;
		background-color:#ffffb7;
		vertical-align : top;
		padding : 10px;
		ext-align:center;
		margin: 0 auto;
		border-radius: 10px;
	}
	.job_guideline  .guideline-box {
		width:90vw;
		padding:10px;
	}
	table.aboutus {
		border-collapse:collapse;
  		border-spacing: 0;
		padding: 15px;
		font-size:105%;
		width : 90vw;
		margin: 0 auto;
		boder-radius:10px;
	}
	table.aboutus tr td {
		text-align: center;
		padding: 20px 0;
		margin:0;
		border:1px solid #ddd;
	}
	.madobe-onayami_box img {
		margin:0 auto;
	}
	.madobe-onayami_box {
		width:90vw;
		padding:20px;
		margin: 0 auto;
		background-color: #fff;
		text-align: left;
		z-index: auto;
		height:calc(100% - 100px);
	}
	.madobe-onayami-text {
		position: relative;
		top:-50px;
		font-size:18px;
		padding: 15px;
		font-weight: bold;
		line-height: 3vw;
		text-align: left;
	}


	.header-box{
		background-image : url(../bg_header0001L.png);
		background-size:cover;
		background-position: center;
		width:100%;
		height:150px;
	}
	h2.ryouhanten{
		position:relative;
		top: 60px;
		left:0px;
	}

	h2.ryouhanten img{
		width:80vw;
	}

	h2.sitetitle{
		position:relative;
		top:-100px;
		left:0px;
	}
	h2.sitetitle img{
		width:30vw;
	}

	.item_box {
		display: flex;
		gap: 1vw;
		width:90vw;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.items {
		width:90vw;
		padding:10px;
		maign-right:1vw;
		padding:10px;
	}
	.items img {
		width:80vw;
		padding:10px;
	}
	.items h3 {
		text-align:center;
		width:75vw;
		padding:10px;
	}

	.items .items-text {
		text-align:left;
		padding:10px;
		width:75vw;
		font-size:80%;
	}

	.tori_item_box {
		display: flex;
		gap: 1vw;
		width:90vw;
		flex-direction: column;
		flex-wrap: wrap;
	}
	.tori_items {
		width:90vw;
		padding:10px;
		maign-right:1vw;
		padding:10px;
	}
	.tori_items img {
		width:80vw;
		padding:10px;
	}
	.tori_items h3 {
		text-align:center;
		width:75vw;
		padding:10px;
	}

	.tori_items .tori_items-text {
		text-align:left;
		padding:10px;
		width:75vw;
		font-size:80%;
	}
}

@media (min-width: 768px){
 /* PCの設定 */
	.point_txt001{
		width : 90vw;
		text-align:left;
		margin:0 auto;
	}
	.point_txt001 img{
		width:40vw;
		float:right;
		margin-left:20px;
	}
	.part_full-time {
		display:flex;
		gap:1vw;
		width:90vw;
		margin:0 auto;
	}
	.part_full-time div {
		width:44vw;
		border-radius: 10px;
	}
	
	.responsibilities {
		width:90vw;
		margin:0 auto;
	}
	.work-flow {
		width:90vw;
		margin:0 auto;
		line-height: 125%;
		margin:0 auto;
	}
	.work-flow img {
		width:40vw;
		float:left;
		margin-right:20px;
	}
	.work-flow2 {
		width:90vw;
		margin:0 auto;
		line-height: 125%;
	}
	.work-flow2 img {
		width:40vw;
		vertical-align: top;
		float:right;
		margin-leftt:20px;
	}
	.job_guideline {
		width:90vw;
		display: flex;
		flex-direction:row;
		gap:1vw;
		background-color:#ffffb7;
		vertical-align : top;
		padding : 10px;
		ext-align:center;
		margin: 0 auto;
		border-radius: 10px;
	}
	.job_guideline  .guideline-box {
		width:44vw;
		padding:10px;
		text-align: center;
	}
	h2 {
		padding: 2rem 0;
		line-height: 150%;
	}
	table.aboutus {
		border-collapse:collapse;
  		border-spacing: 0;
		padding: 15px;
		font-size:150%;
		margin:0 auto;
	}
	table.aboutus td {
		padding: 20px 0;
		border:2px solid #ddd;
	}
	.madobe-onayami_box img {
		margin:auto;
		width:80vw;
	}
	.madobe-onayami_box {
		width:90vw;
		padding:20px;
		margin: 0 auto;
		background-color: #fff;
		background-position: right top;
		background-repeat: no-repeat;
		background-size:90vw;
		text-align: left;
		z-index: auto;
		height: calc(100% - 200px);
	}
	.madobe-onayami-text {
		position: relative;
		text-align: left;
		top:-80px;
		font-size:24px;
		padding: 15px;
		font-weight: bold;
		line-height: 150%;
	}
	.madobe-onayami_box-yamaguchi img {
		margin:auto;
		width:80vw;
	}
	.madobe-onayami_box-yamaguchi {
		width:90vw;
		padding:20px;
		margin: 0 auto;
		background-color: #fff;
		background-position: right top;
		background-repeat: no-repeat;
		background-size:90vw;
		text-align: left;
		z-index: auto;
		height: calc(100% - 200px);
	}
	.madobe-onayami-text-yamaguchi {
		position: relative;
		text-align: left;
		top:-120px;
		font-size:24px;
		padding: 15px;
		font-weight: bold;
		line-height: 150%;
	}
	
	.header-box{
		text-align:left;
		background-image : url(../bg_header0001L.png);
		background-size:cover;
		background-position: center;
		width:100%;
		height:150px;
		padding-left:20px;
		padding-right:20px;
		margin-bottom:0px;
		padding-bottom:0px;
	}
	h2.ryouhanten{
		position:relative;
		top:30px;
	}

	h2.ryouhanten img{
		width:60vw;
		max-width:500px;
	}
	h2.sitetitle{
		position:relative;
		top:-110px;
		left:80vw;;
	}
	h2.sitetitle img{
		width:30vw;
		max-width:200px;
	}

	.item_box {
		margin: 0 auto;
		display: flex;
		gap: 0.1vw;
		width:90%;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content:center;
	}

	.items {
		width:28vw;
		padding:10px;
		background-color:#ccc;
		border-radius:10px;
		margin:10px;
	}
	.items img {
		width:25vw;
		padding:10px;
	}
	.items h3 {
		text-align:center;
		width:28vw;
		padding:10px;
	}

	.items .items-text {
		text-align:left;
		padding:10px;
		width:25vw;
		overflow:hidden;
		font-size:80%;
	}

	.tori_item-box {
		margin: 0 auto;
		display: flex;
		gap: 0.1vw;
		width:90vw;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content:center;
	}

	.tori_items {
		width:38vw;
		padding:10px;
		border-radius:10px;
		margin:10px;
	}
	.tori_items img {
		width:35vw;
		height:35vw;
		padding:10px;
	}

	.tori_items .tori_items-text {
		text-align:left;
		padding:10px;
		width:35vw;
		overflow:hidden;
		font-size:80%;
	}
}


/* ヘッダー設定 */
/* ナビゲーション */
table.nav{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    background: #f5f1e6;  /* 薄いベージュ */
	margin-top:0px !important;
}

table.nav td{
    height: 40px;
	width:25%;
    text-align: center;
	font-size:0.75rem;
	border:1px solid #efcccc;
}

.nav a{
    display: block;
    text-decoration: none;   /* 下線を消す */
    color: #333;             /* 通常文字色（濃いグレー） */
    line-height: 60px;
    transition: color 0.3s ease;  /* ← 色変化を0.3秒かけてふわっと */
}

.nav a:hover{
   color : #3a7d44;          /* マウスオンで緑に変化 */
   background: none;        /* 背景は変えない */

}



/* カルーセル(TOPページのみ */
.banner-slider{
  overflow: hidden;       /* 枠外を隠す */
  white-space: nowrap;
  background: #fff;       /* 背景色（任意） */
}

.banner-track{
  display: flex;
  animation: scroll 30s linear infinite;
}

.banner-track img{
  height: 480px;          /* バナーの高さを揃える */
}

@keyframes scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* フッター設定 */
.footer{
    background: #f5f1e6;   /* 薄いベージュ */
    text-align: center;
    padding: 20px 10px;
    font-size: 90%;
    color: #333;
    border-top: 1px solid #ccc; /* 上に仕切り線 */
}
.footer a{
    color: #333;              /* リンク色 */
    text-decoration: none;    /* 下線消す */
    margin: 0 10px;
    transition: color 0.3s ease;
}

.footer a:hover{
    color: #3a7d44;           /* ホバーで茶色に */
}

.footer .copy{
    margin-top: 10px;
    font-size: 80%;
    color: #666;
}

.gaiyou a{
    /* 通常時：アンダーラインを非表示にする */
    color: #3a7d44;
    text-decoration: none;
    /* transitionを追加しておくと、アニメーションが滑らかになります */
    transition: text-decoration 0.3s ease;
}

.gaiyou a:hover{
    /* マウスオーバー時：アンダーラインを表示する */
    text-decoration: underline;
}

/* カルーセル(店舗用）*/
/* カルーセル全体の表示エリア */
.carousel-container{
    width: 453px; /* 画像の幅に合わせて調整 */
    height: 403px; /* 画像の高さに合わせて調整 */
    overflow: hidden; /* 枠外の画像を非表示 */
    position: relative; /* ボタン配置のために必要 */
}

/* 画像を横一列に並べるコンテナ */
.slide-list{
    display: flex;
    width: 500%; /* 5枚の画像が並ぶように 100% * 5 = 500% */
    height: 100%;
    /* 初期位置は0。JavaScriptでこの値を操作する */
    transform: translateX(0); 
    /* 切り替わりを滑らかにするアニメーション設定 */
    transition: transform 1s ease-in-out; 
}

/* 各画像の設定 */
.slide-list img{
    /* 500% のうち 1/5 の幅 (100%) が1枚の画像の幅になる */
    width: 20%; 
    height: 100%;
    object-fit: cover;
}

/* 「次へ」ボタンのスタイル */
.next-button{
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    z-index: 10;
    cursor: pointer;
    padding: 10px;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    font-size: 20px;
}
body{
  background-image: url("Img/img-chirashi01-1");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}