@charset "UTF-8";

.article{
	margin-bottom:30px;
}

.trandpc{opacity:1;}
.trandsp{opacity:0; display:none !important;}

/*　メイン写真*/
article.mainimg{
	background-image:url('/assets/images/top/main-img.jpg');
	background-size:cover;
	background-repeat:no-repeat;
	background-position:center;
	height:900px;
	position:relative;
}

article.mainimg .catch01{
	max-width:670px;
	margin:0 auto;
	padding-top:72px;
}
article.mainimg .catch02{
	max-width:980px;
	margin:0 auto;
	padding-top:320px;
}


/*　トップスライダー*/
.slider-position{
	position:absolute;
	top:100px;
	width:100%;
}
/* スライダーの外枠（はみ出た部分は隠す） */
.slider-container {
  width: 100%;
  height: 136px; /* お好みの高さに調整 */
  overflow: hidden;
  position: relative;
}

/* 画像を横並びにして、アニメーションを適用 */
.slide-track {
  display: flex;
  /* 写真1枚の幅(300px) × 合計枚数(8枚) */
  width: calc(98px *34); 
  /* アニメーション: 20秒かけて一定の速度(linear)で無限(infinite)に繰り返す */
  animation: scroll 50s linear infinite;
}


/* スマホハンバーガー開い他時はストップ */
.slide-track.is-active {
	animation-play-state: paused;
}

/* 画像1枚あたりのサイズ */
.slide {
  width: 98px;
  height: 136px;
  flex-shrink: 0; /* 画像が縮むのを防ぐ */
  margin:0 20px;
}

.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像の縦横比を保ちつつ枠いっぱいに表示 */
}

/* スライドのアニメーション設定 */
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* 1セット分（300px × 4枚 = 1200px）移動させる */
    transform: translateX(calc(-98px * 17));
  }
}

/* おまけ: マウスホバーでスライドを一時停止させる場合
.slider-container:hover .slide-track {
  animation-play-state: paused;
}
 */ 
 
/* アニメーションを適用するクラス */
.fade-up1 {
  /* 初期状態：透明で、元の位置より20px下に配置 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp1 1.5s 1s ease-out forwards;
}
.fade-up2 {
  /* 初期状態：透明で、元の位置より20px下に配置 */
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp2 1.5s 2s ease-out forwards;
}

/* フェードイン（下から上）のアニメーション設定 */
@keyframes fadeUp1 {
  0% {
    /* 開始時（初期状態と同じ） */
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    /* 終了時：不透明で、元の位置に戻る */
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUp2 {
  0% {
    /* 開始時（初期状態と同じ） */
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    /* 終了時：不透明で、元の位置に戻る */
    opacity: 1;
    transform: translateY(0);
  }
}




/*　トップお知らせ*/
article.info{
	margin-bottom:50px;
	position:relative;
	margin-top: -265px;
	padding: 0 20px;
}
article.info .infoarea{
	display:flex;
	background-color:#FFF;
	padding: 40px 40px 100px;
	border-radius:20px;
	flex-flow: row wrap;
}
article.info .lside{
	width: 187px;
    margin-right: 80px;
}
article.info .rside{
	width:712px;
}
article.info .lside .titles{
	font-size:1rem;
}
article.info .lside .titlel{
	color: #0067cd;
    font-size: 5rem;
    line-height: 1em;
	font-family: "Figtree", sans-serif;
}

article.info .info-line{
	display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 100px 15px 0px;
    border-bottom: 1px solid #dedede;
	font-weight: 500;
}
article.info .info-line .date{
	color:#7d7f85;
	font-size:1em;
}
article.info .info-line .cate{
	font-size: 0.8em;
    text-align: center;
    line-height: 1.3em;
    width: 84px;
    padding: 0 10px;
    margin: 0 auto;
    margin-top: 10px;
}
article.info .info-line .cate.type1{
	background-color:#91d9d8;
}
article.info .info-line .cate.type2{
	background-color:#f4bc97;
}
article.info .info-line .cate.type3{
	background-color:#f2e5c3;
}
article.info .info-line .infotxt{
	font-size:0.9em;
}
article.info .info-line a:hover{
	text-decoration:underline;
}

/*　移動ボタン*/
article.info .infoarea .movebtn1,
article.newtrend .movebtn2{
	position: relative;
    font-size: 0.8em;
    font-weight: bold;
    border: 1px solid #0067cd;
    border-radius: 30px;
    padding: 10px 16px 10px 24px;
    width: 200px;
    display: flex;
    align-items: center; 
}
article.info .infoarea .movebtn1{
	padding-left:20px;
    color: #0067cd;
	position:absolute;
	right: 58px;
    bottom: 30px;
}
article.newtrend  .movebtn2{
	padding-left:20px;
    color: #0067cd;
}
article.info .infoarea .movebtn1:before,
article.newtrend  .movebtn2:before{
	content: url(/assets/images/common/arrow.svg);
    display: inline-block;
    width: 10px;
    height: 10px;
    position: absolute;
    right: 20px;
    top: 24%;
}
article.info .infoarea .movebtn1:hover:before,
article.newtrend .movebtn2:hover:before{
	content: url(/assets/images/common/arrow-w.svg);
}
article.info .infoarea .movebtn1:after,
article.newtrend .movebtn2:after{
    content: "";
    position: absolute;
    top: 6px;
    right: 45px;
    width: 1px;
    height: 30px;
    background-color: #0067cd;
    display: block;
}
article.info .infoarea .movebtn1:hover,
article.newtrend .movebtn2:hover{
	color: #fff;
	background-color:#0067cd;
}
article.info .infoarea .movebtn1:hover:after,
article.newtrend .movebtn2:hover:after{
    background-color: #fff;
}




/*　トレンド*/
article.newtrend{
	margin-bottom: 104px;
    margin-top: 160px;
    display: flex;
    justify-content: space-between;
    background-image: url(/assets/images/top/saitama_map.svg);
    background-repeat: no-repeat;
    background-size: 66%;
    background-position: 0 100px;
    min-height: 707px;
}
article.newtrend .trandephoto{
	padding-left:20px;
}
article.newtrend .comment{
	padding-right:130px;
	position:relative;
}
article.newtrend .trendtl{
	color:#0067cd;
	font-size:1.6em;
	font-weight:bold;
	margin-bottom:20px;
}
article.newtrend .txtblock{
	margin-bottom:40px;
}
article.newtrend .comment .movebtn{
	font-size:0.8em;
	position: absolute;
    left: 0px;
    border: 1px solid #006ce3;
    color: #006ce3;
    border-radius: 30px;
    padding: 10px 38px 10px 25px;
    margin-top: 15px;
}
article.newtrend .comment .movebtn span{
	padding-right:30px;
	border-right:1px solid #006ce3;
}

/*　移動ボタン*/
article.newtrend .movebtn{
	font-size:0.8em;
	position: absolute;
    right: 30px;
    border: 1px solid #006ce3;
    color: #006ce3;
    border-radius: 30px;
    padding: 10px 38px 10px 25px;
    margin-top: 15px;
	position:relative;
	width:250px;
}
article.info .infoarea .movebtn span{
	padding-right:30px;
}


/*　バナーエリア*/
section.topbanner{
	background-color:#e7e7e7;
	padding:56px 0;
}
section.topbanner .bannerarea{
	display:flex;
	flex-flow: row wrap;
	align-items: center; 
	justify-content: space-between;
	gap:20px;
}
section.topbanner .bannerarea img{
	max-width: 228px;
}

.link{
	color:#0067CD;
}

.checkaddress{
	margin-left:20px;
}
.micheck{
	width: 100%;
    margin: 20px 0 0;
	border-collapse: collapse;
	background-color: #f6f6f6;
}
table.micheck th, table.micheck td {
    padding: 10px;
    text-align: left;
    font-weight: normal;
    border: 1px solid #CCC;
}

/*　サイトポリシー*/
.policy a:hover{
	text-decoration:underline;
}
.policy ul {
  list-style: none;
  padding-left: 0;
  margin-top:10px;
}
.policy ul li {
  display: flex;
  align-items: center; /* これでテキストとマークが垂直中央で揃います */
  margin-bottom: 8px;  /* リスト間の隙間 */
}
.policy ul li::before {
  content: "●";   /* ここで好きな大きさにする */
  color: #0067CD;         /* 色 */
  margin-right: 10px;  /* マークとテキストの間の距離 */
  font-size: 0.5em;
  /* 念のため高さの調整 */
  line-height: 1;
}

/* タブレット・PC向けの上書き (例: 1089px以上) */
@media (max-width: 1100px) {
	article.info .infoarea {
		display: flex;
		background-color: #FFF;
		padding: 24px 24px 100px;
	}
	article.info .info-line {
		padding: 15px 0px;
	}
	article.info .rside {
    width: 100%;
	}
}/*@media */

/* ハンバーガーメニュー表示 */
@media (max-width: 1028px) {
.trandpc{opacity:0;}
.trandsp{opacity:1; display:block !important; order: 3;}


article.mainimg .catch01 {
	max-width: 400px !important;
	padding-top: 24px !important;
	padding: 0 15px;
}
article.mainimg .catch02 {
	max-width: 500px !important;
	padding-top: 298px !important;
	padding: 0 15px;
}

article.newtrend{
	flex-direction: column;
	align-items: center;
	margin-top: 0px;
	background-position: center bottom 274px;
	background-size: 100%;
}
article.newtrend .comment {
  order: 1;
}
article.newtrend .trandephoto{
  order: 2;
}
article.newtrend  .movebtn2{
	width: 210px;
	padding-left: 40px;
	margin-top: 48px;
}
article.newtrend .txtblock{
	margin-bottom:24px;
}
article.newtrend {
    margin-bottom: 42px;
}

section.topbanner {
    padding: 40px 0;
}


article.info {
	margin-top: -36.5vh !important;
}

}/*@media */

@media (max-width: 510px) {
	article.info {
		margin-top: -36.5vh !important;
	}
}/*@media */