@charset "utf-8";
/* CSS Document */


/* ##### バナー #####*/
/* トップの2枚バナー：PCは横並び、SPは縦100% */
.top-banner{
  display:flex;
  gap:16px;
  justify-content:center;
  align-items:flex-start;
  max-width:1000px;   /* 2枚で900px程度に揃える（任意） */
  margin:10px auto 20px;
}
.top-banner a{
  flex:1 1 0;        /* 2枚を均等幅に */
  display:block;
}
.top-banner img{
  display:block;
  width:100%;        /* 画像は枠いっぱい */
  height:auto;
  max-width:none;    /* インラインのmax-widthを無効化 */
}

/* スマホ：縦並び＋幅100% */
@media (max-width: 767px){
  .top-banner{
    display:block;   /* 縦積み */
    padding:0px 10px;
  }
  .top-banner a{
    width:100%;
  }
  .top-banner a + a{
    margin-top:12px; /* 2枚の間隔 */
  }
}

/* ##### ビデオ #####*/

	video {
		max-width: 100%;/* はみ出ないように */
	}


.fukui_osirase {
	width: 98%;
	margin-left: auto;
	margin-right: auto;
}

.fukui_setumei {
	width: 95%;
	margin-left: auto;
	margin-right: auto;
}

#more_bar {
	display: block;
}

.fukui_business_main {
	width: 100%;
	position: relative;
	background-image: url("../images/top/B_back.jpg");
	background-repeat:repeat-y;
	background-position: 100%;
	margin-top: 10px;
}

/* ####### ナビゲーション Float要素に高さを付ける #######*/

.fukui_business_main::after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden;
}
/* IE7,MacIE5 */
.fukui_business_main {
  display: inline-block;
}
/* WinIE6 below, Exclude MacIE5 \*/
* html .fukui_business_main {
  height: 1%;
}
.fukui_business_main {
  display: block;
}

/* ####### ナビゲーション Float要素に高さを付ける END #######*/

#business01 {
	display: block;
}

#business02 {
	display: block;
}

#business03 {
	display: block;
}

#business04 {
	display: block;
}

#fukui_top1_img {
	display: block;
	width: 100%;
	margin-top: 10px;
	margin-bottom: 10px;
}

#fukui_top2_img {
	display: block;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 10px;
}

#fukui_top3_img {
	display: block;
	width: 100%;
	margin-top: 5px;
	margin-bottom: 10px;
}


.fukui_link_extra {
	width: 100%;
	margin-bottom: 10px;
}


/* ####### fukui_link_extra要素に高さを付ける #######*/

		.fukui_link_extra::after {
		  content: ".";
		  display: block;
		  clear: both;
		  height: 0;
		  visibility: hidden;
		}
		/* IE7,MacIE5 */
		.fukui_link_extra {
		  display: inline-block;
		}
		/* WinIE6 below, Exclude MacIE5 \*/
		* html .fukui_link_extra {
		  height: 1%;
		}
		.fukui_link_extra {
		  display: block;
		}

/* ####### fukui_link_extra要素に高さを付ける END #######*/


#extra01 {
	display: block;
	float: left;
	width: 33.33%;
	padding-left: 5px;
	padding-right: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}

#extra02 {
	display: block;
	float: left;
	width: 33.33%;
	padding-left: 5px;
	padding-right: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}

#extra03 {
	display: block;
	float: left;
	width: 33.33%;
	padding-left: 5px;
	padding-right: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}


.fukui_link_gaiyou {
	width: 100%;
	margin-bottom: 30px;
}

/* ####### fukui_link_gaiyou要素に高さを付ける #######*/

		.fukui_link_gaiyou::after {
		  content: ".";
		  display: block;
		  clear: both;
		  height: 0;
		  visibility: hidden;
		}
		/* IE7,MacIE5 */
		.fukui_link_gaiyou {
		  display: inline-block;
		}
		/* WinIE6 below, Exclude MacIE5 \*/
		* html .fukui_link_gaiyou {
		  height: 1%;
		}
		.fukui_link_gaiyou {
		  display: block;
		}

/* ####### fukui_link_gaiyou要素に高さを付ける END #######*/

#gaiyou01 {
	display: block;
	width: 100%;
}

#massage_img01 {
	display: block;
	width: 100%;
}

.message_main {
	margin-top: 10px;
	margin-bottom: 10px;
}


/*　########## 　900px以上　########　*/
@media (min-width: 900px) {
	
	#osirase_img {
		display: block;
		width: 30%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
	}
	
	#more_bar {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.fukui_setumei_img {
		display: block;
		width: 80%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 30px;
		margin-bottom: 30px;
	}
	
	.fukui_tempo_main {
		width: 100%;
		background-color: #d7d0a4;
		padding: 0;
		margin: 0;
	/*background-image: -webkit-linear-gradient(277deg,rgba(117,117,117,1.00) 0%,rgba(158,158,158,1.00) 24.27%,rgba(232,232,232,1.00) 51.35%,rgba(158,158,158,1.00) 80.33%,rgba(117,117,117,1.00) 100%);
	background-image: -moz-linear-gradient(277deg,rgba(117,117,117,1.00) 0%,rgba(158,158,158,1.00) 24.27%,rgba(232,232,232,1.00) 51.35%,rgba(158,158,158,1.00) 80.33%,rgba(117,117,117,1.00) 100%);
	background-image: -o-linear-gradient(277deg,rgba(117,117,117,1.00) 0%,rgba(158,158,158,1.00) 24.27%,rgba(232,232,232,1.00) 51.35%,rgba(158,158,158,1.00) 80.33%,rgba(117,117,117,1.00) 100%);
	background-image: linear-gradient(173deg,rgba(117,117,117,1.00) 0%,rgba(158,158,158,1.00) 24.27%,rgba(232,232,232,1.00) 51.35%,rgba(158,158,158,1.00) 80.33%,rgba(117,117,117,1.00) 100%);*/
	}

	.fukui_tempo_title h2 {
		font-size: 1.8em;
		color: #fff;
		text-align: center;
		margin: 0;
		padding: 0;

	}

  .tempo_sub01 {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .tempo_sub01::after {
    content: "";
    display: block;
    clear: both;
  }

  /* 1〜4番目は 2列（50%）→ 2・2 行にする */
  #tempo01 {
    float: left;
    width: 50%;
    padding-right: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
  }

  #tempo02 {
    float: left;
    width: 50%;
    padding-right: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
  }

  #tempo03 {
    float: left;
    width: 50%;
    padding-right: 5px;
    padding-bottom: 5px;
    box-sizing: border-box;
  }

  #tempo04 {
    float: left;
    width: 50%;
    padding-right: 5px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }

  /* 5〜7番目は 3列（33.33%）→ 3つ並べる */
  #tempo05 {
    float: left;
    width: 33.33%;
    padding-right: 5px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }

  #tempo06 {
    float: left;
    width: 33.33%;
    padding-right: 5px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }

  #tempo07 {
    float: left;
    width: 33.33%;
    padding-right: 5px;
    padding-bottom: 30px;
    box-sizing: border-box;
  }
	
	
/*
.tempo_sub01 {
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}

.tempo_sub01::after {
	content: "";
	display: block;
	clear: both;
}

#tempo01 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;	
}

#tempo02 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo03 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo04 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo05 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo06 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo07 {
	float: left;
	width: 33.33%;
	padding-right: 5px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
*/
	
	
	.fukui_position01 {
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0px;
	}
	
#business01 {
	float: left;
	width: 25%;
	padding-right: 10px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
#business02 {
	float: left;
	width: 25%;
	padding-right: 10px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
#business03 {
	float: left;
	width: 25%;
	padding-right: 10px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
#business04 {
	float: left;
	width: 25%;
	padding-right: 10px;
	padding-bottom: 30px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
	
	
}


/*　########## 　890px以下　########　*/
@media (max-width: 890px){
	
	.fukui_osirase {
		width: 100%;
	}

	.fukui_setumei {
		width: 100%;
	}
	
	#osirase_img {
		display: block;
		width: 50%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
	}
	
	#more_bar {
		width: 98%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.fukui_setumei_img {
		display: block;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 10px;
		margin-bottom: 20px;
	}
	
	.fukui_tempo_main {
		width: 100%;
		background-color: #d7d0a4;
		padding: 0;
		margin: 0;
		/*background-image: -webkit-linear-gradient(277deg,rgba(27,6,5,1.00) 10%,rgba(188,85,65,1.00) 40%,rgba(27,6,5,1.00) 100%);
		background-image: -moz-linear-gradient(277deg,rgba(27,6,5,1.00) 10%,rgba(188,85,65,1.00) 40%,rgba(27,6,5,1.00) 100%);
		background-image: -o-linear-gradient(277deg,rgba(27,6,5,1.00) 10%,rgba(188,85,65,1.00) 40%,rgba(27,6,5,1.00) 100%);
		background-image: linear-gradient(173deg,rgba(27,6,5,1.00) 10%,rgba(188,85,65,1.00) 40%,rgba(27,6,5,1.00) 100%);*/
	}

	.fukui_tempo_title h2 {
		font-size: 1.2em;
		color: #fff;
		text-align: center;
		margin: 0;
		padding: 0;

	}

	.tempo_sub01 {
		width: 95%;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 30px;
	}

	.tempo_sub01::after {
		content: "";
		display: block;
		clear: both;
	}

	#tempo01 {
		float: left;
		width: 50%;
		padding-right: 5px;
		padding-bottom: 5px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;	
	}

	#tempo02 {
		float: left;
		width: 50%;
		padding-right: 5px;
		padding-bottom: 5px;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

#tempo03 {
	float: left;
	width: 50%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo04 {
	float: left;
	width: 50%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo05 {
	float: left;
	width: 50%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo06 {
	float: left;
	width: 50%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

#tempo07 {
	float: left;
	width: 50%;
	padding-right: 5px;
	padding-bottom: 5px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

	.fukui_position01 {
		width: 90%;
		margin-top: 0px;
		margin-left: auto;
		margin-right: auto;
		padding-top: 0px;
	}
	
#business01 {
	float: left;
	width: 50%;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
#business02 {
	float: left;
	width: 50%;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
#business03 {
	float: left;
	width: 50%;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
#business04 {
	float: left;
	width: 50%;
	padding-right: 10px;
	padding-top: 5px;
	padding-bottom: 10px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	
}
	
			
		
	
}


/*　########## 　769px以下　########　*/
@media (max-width: 769px){
	
	
	
}


/*　########## 　400px以下　########　*/
@media (max-width: 400px){
	
	
		
	
}





/* ===============================
   TOP メインイメージ スライダー（PC〜スマホ共通）
   （横移動なし・フェード切り替え）
   =============================== */

/* VTRの外枠 */
#VTRA {
  width: 100%;
}

/* スライダー全体コンテナ */
.ft-main-slider {
  width: 100%;
  max-width: 1000px;           /* 旧動画の width=1000 に合わせる */
  margin: 0 auto;
  overflow: hidden;
  position: relative;
  aspect-ratio: 1000 / 560;    /* 画像サイズに合わせた比率 */
  background: #000;
}

/* スライドを重ねるための土台 */
.ft-slides {
  width: 100%;
  height: 100%;
  position: relative;
}

/* 各スライド（全て同じ位置に重ねてフェード） */
.ft-slide {
  position: absolute;
  inset: 0;                    /* top:0; right:0; bottom:0; left:0; と同じ */
  opacity: 0;
  /*animation: ftFade 25s infinite;*/
}

/* 画像は枠いっぱいに表示 */
.ft-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;           /* 余白なしで表示（1000x560ならほぼトリミング無し） */
  display: block;
}

/* ---- 1枚目 ---- */
.ft-slide:nth-child(1) {
  animation: ftFade1 25s infinite;
}
/* ---- 2枚目 ---- */
.ft-slide:nth-child(2) {
  animation: ftFade2 25s infinite;
}
/* ---- 3枚目 ---- */
.ft-slide:nth-child(3) {
  animation: ftFade3 25s infinite;
}
/* ---- 4枚目 ---- */
.ft-slide:nth-child(4) {
  animation: ftFade4 25s infinite;
}
/* ---- 5枚目 ---- */
.ft-slide:nth-child(5) {
  animation: ftFade5 25s infinite;
}

/* ========== フェード用キーフレーム ========== */
/* 各アニメは 0〜100% を 5分割して、自分の担当ゾーンだけ表示 */

/* 1枚目：0〜24% 担当（2枚目と少し重ねる） */
@keyframes ftFade1 {
  0%   { opacity: 1; }
  4%   { opacity: 1; }   /* フェードイン */
  20%  { opacity: 1; }   /* 表示キープ */
  24%  { opacity: 0; }   /* フェードアウト（2枚目とクロス） */
  100% { opacity: 0; }
}

/* 2枚目：20〜44% 担当（1枚目と重なりつつ3枚目とクロス） */
@keyframes ftFade2 {
  0%   { opacity: 0; }
  20%  { opacity: 0; }   /* ここから徐々にフェードイン開始 */
  24%  { opacity: 1; }
  40%  { opacity: 1; }
  44%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 3枚目：40〜64% 担当 */
@keyframes ftFade3 {
  0%   { opacity: 0; }
  40%  { opacity: 0; }
  44%  { opacity: 1; }
  60%  { opacity: 1; }
  64%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 4枚目：60〜84% 担当 */
@keyframes ftFade4 {
  0%   { opacity: 0; }
  60%  { opacity: 0; }
  64%  { opacity: 1; }
  80%  { opacity: 1; }
  84%  { opacity: 0; }
  100% { opacity: 0; }
}

/* 5枚目：80〜100% 担当（1枚目とのループ境界もカバー） */
@keyframes ftFade5 {
  0%   { opacity: 0; }  /* 2週目の頭（0〜4%）も5枚目がフェードアウトしながら残る */
  4%   { opacity: 0; }  /* ここで完全に消える → この後は1枚目が本格的に登場 */
  80%  { opacity: 0; }
  84%  { opacity: 1; }  /* フェードイン開始 */
  96%  { opacity: 1; }  /* 表示キープ */
  100% { opacity: 1; }  /* ループ末端でも表示したまま → 次の0%に自然につながる */
}


/* PCでホバー中は一時停止（SPにはほぼ影響なし） */
.ft-main-slider:hover .ft-slide {
  animation-play-state: paused;
}

/* ===============================
   スライダーのレスポンシブ対応（SPでも必ず表示させる）
   =============================== */

/* PC/スマホ共通：念のため明示しておく */
#VTRA {
  /*display: block;*/
}

/* スマホ用（890px以下） */
@media (max-width: 890px) {

  /* style.css 側で #VTRA を非表示にしている可能性があるので強制表示 */
  #VTRA {
    /*display: block !important;*/
  }

  /* 幅は画面いっぱい、高さは画面幅から計算（1000×560ベースで 0.56倍） */
  .ft-main-slider {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    height: 56vw;       /* 画面幅 × 0.56 ≒ 1000×560 と同じ比率 */
    aspect-ratio: auto; /* モバイルでは明示的なheightを優先 */
  }

  .ft-slides,
  .ft-slide {
    height: 100%;
  }

  .ft-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}