@charset "utf-8";
main h2 {
	font-size: 1.125rem;
	line-height: 2;
	letter-spacing: 0.2em;
	padding-left: 0.6em;
	margin-top: 30px;
	margin-bottom: 20px;
	max-width:966px;
	text-align: center;
	border-top: 1px solid #111;
	border-bottom: 1px solid #111;
	margin: 20px 0;
}
dl {
	display: grid;
	grid-template-columns: 1fr; /* 1列レイアウト */
	gap: 5px;
  }
  dt {
	font-weight: bold;
  }
.flex-container {
    display: flex;
    gap: 38px; /* 各ペアの間隔 */
	/* flex-container のスタイル */
    flex-grow: 1; /* 横に並べる要素が余分なスペースを占める */
}
.item {
    display: flex;
    flex-direction: column; /* dtとddを縦に並べる */
    text-align: center;
}

#info dl dt a img {
	background: #fff;
	padding: 2px;
	border: 1px solid #111;
}
#info dl dt a:hover img {
	border-color: #0d59ca;
}
#info dl dd{
	background: #fff;
	padding-top: 40px;
	padding-right: 4px;
	border: 1px solid #111;
	width: 294px;
	height: 150px;
	text-align: center;
	margin-top: -1px;;
	}
/* section#info 内での配置を変更 */
#info {
    display: flex;
    flex-wrap: wrap; /* 画面幅に応じて折り返しができるように */
    justify-content: space-between; /* 要素間にスペースを作る */
}
#info .flex-container {
    flex: 1; /* 横に並べるエリアを広げる */
}

#banners {
    display: flex;
    flex-direction: column; /* 縦並びにする */
	float: right;
    gap: 20px; /* アイテム間の間隔 */
    width: 250px; /* 横幅を調整 */
    }
.scroll-infinity {
    margin-top: 60px;
}

@keyframes infinity-scroll-left {
    from {
      transform: translateX(0);
    }
      to {
      transform: translateX(-100%);
    }
    }
    .scroll-infinity__wrap {
      display: flex;
      overflow: hidden;
    }
    .scroll-infinity__list {
      display: flex;
      list-style: none;
      padding: 0
    }
    .scroll-infinity__list--left {
      animation: infinity-scroll-left 80s infinite linear 0.5s both;
    }
    .scroll-infinity__item {
      width: calc(100vw / 6);
    }
    .scroll-infinity__item>img {
      width: 100%;
    }

/* レスポンシブ対応 */
@media screen and (max-width: 966px) {
    .logo {
    width: 80%;
    max-width: 300px;
    height: auto;
    margin: 0 auto 20px auto;
    justify-content: center;
    align-items: center;
  }
    #info {
        flex-direction: column; /* 縦並び */
        align-items: center; /* 中央揃え */
        margin: 0 auto; /* ←これだけで中央揃えになる！ */    
  }

    .flex-container {
        flex-direction: column; /* 縦並び */
        gap: 10px; /* 各アイテムの間隔 */
        align-items: center; /* 画像とテキストを中央揃え */
    }
    #info dl dd {
       /*width: 100%; /* 幅を100%にして可変 
        height: auto;*/
        margin-bottom: 10px;
    }

    #banners {
        width: 100%; /* 幅を100%にして縦並びに */
        margin-left: 1cqw;
    }
	.flower{
        align-items: center; /* 中央揃え */
	    	margin-left: 6px;
	}
  main video {
    width: 100%;
    height: auto;
    max-width: 100%;
    display: block;
    margin: 0 auto;
}
}