/* IMPORT RESET ================================================== */
@import url("sanitize.css");

/* WEB FONT ====================================================== */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");

/* LAYOUT ======================================================== */
/*実際に適用するレイアウトパターンを直下のcssディレクトリにコピーして読むこむ*/
@import url("category.css");
@import url("animate.css");
@import url("event_a.css");
@import url("btn.css");
@import url("btn.css");

/* STYLES ======================================================== */
/*共通のサイズや色を変数で設定*/ :root {
	/*文字サイズ*/
	--x-small: 0.8rem; /*50%*/
	--small: 1.2rem; /*75%*/
	--medium: 1.6rem; /*100%*/
	--large: 2rem; /*125%*/
	--x-large: 2.4rem; /*150%*/
	/*色*/
	--red: #c00;
	--blue: #039;
	--mallcolor: #b60081;
}

/* ルートのフォントサイズを10pxに設定（1rem=10px）*/
html {
	font-size: 62.5%;
}

/* bodyのフォントサイズを16pxに設定 */
body {
	font-size: var(--medium);
}

/* MEMO ++++++++++++++++++++++++++++++++
  フォントサイズはremで指定すること
  例）10pxは1rem、12pxは1.2rem
+++++++++++++++++++++++++++++++++++++ */

.font-xs {
	font-size: var(--x-small);
}
.font-s {
	font-size: var(--small);
}
.font-m {
	font-size: var(--medium);
}
.font-l {
	font-size: var(--large);
}
.font-xl {
	font-size: var(--x-large);
}

/*文字色*/
.font-red {
	color: var(--red);
}
.font-blue {
	color: var(--blue);
}
.font-mcolor {
	color: var(--mallcolor);
}

* {
	box-sizing: border-box;
}

body {
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0;
	padding: 0;
	background: #00b7e7;
	
header {
	margin: 0;
	padding: 0;
    background: #00b7e7;
	
	p {
		margin: 0;
		text-align: center;
		background: #fff;
		padding: 10px 0;
		
		img{
			max-width: 250px;
		}
			}
	
	h1 {
		margin: 0;
		text-align: center;
		
		img{
			width: 100%;
			height: auto;
			max-width: 750px;
		}
	}
}

main {
	margin: 0 auto;
	padding: 0 10px;
	width: 100%;
	max-width: 750px;

	section {
		max-width: 750px;
		margin: 0 auto;
		padding: 10px 0;
		
		h2 {
			margin: 2em 0 10px;
			text-align: center;
			
			img{
				max-width: 600px;
			}
		}
		p.link {
			max-width: 400px;
			margin: 30px auto 20px;
			}
		p.comment {
			color: #333333;
		}
		div {
			margin: 10px auto;
			}
	}
}
	
article.day{
	background-color: #00b7e7;
	background-size: 100% 100px;
	padding-bottom: 30px;
}

	
article.evening {
  position: relative;
  left: 50%;
  margin-top: 0;
  margin-left: -50vw;
  padding: 10px 0;
  width: 100vw;
  background: linear-gradient(
    180deg,
    #febc4c 0%,
    #febc4c 10%,
    #fd8a53 22%,
    #e36f81 50%,
    #3838a8 100%
  );
  overflow: hidden;
}	
	
/*画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
  小さい画像を使用する際は個別にmax-widthを設定する*/
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast; /*Chromeで画像がぼやけるのを防止*/
}
	
p.photo{
	text-align: center;
	margin:0 20px 10px;
}
	
/* Flexbox ────────────────────────────────────────────────────────────
子要素の間隔はgapで指定。
*/

.flexbox {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--spacing);
	gap: var(--spacing);
	margin: 0 10px;
}

/* 子要素のボックスを等分配置 */

/* PC・スマホ共に2分割 */
.box2 {
	--spacing: 10px; /*子要素の間隔*/
	> * {
		width: calc((100% - var(--spacing)) / 2);
		margin: 0 auto;
		padding: 0;
	}
}

/*3列　※flexboxと一緒に設定*/
.box3{
	--spacing: 10px; /*子要素の間隔*/
	margin: 0 auto;
	padding: 0;
	
	gap: var(--spacing);
	
	div,
	p{
  	width: calc( ( 100% - var(--spacing) * 2 ) / 3 ); 
		text-align: center;
		
		img{
			max-width: 250px;
		}
	}
}
	
/* ──────────────────────────────────────────────────*/
p.sns {
	text-align: center;
	img{
		max-width:90px;
		width: 20%;
		height: auto;
		margin: 2em 1em 0 1em;
	}
}
footer{
	  margin: 0;
	text-align: center;
	background: #00b7e7;
	
	div {
		margin: 0;
		text-align: center;
		
		img{
			max-width: 750px;
		}
			}
	
	}
  p.homeBtn a{
  display: block;
  margin: 0 auto;
  padding: 15px 0;
  font-weight: bold;
  font-size: large;
  background: #9e0017;
  color: #fff;
  text-decoration: none;
  max-width: 750px;
	}

  p.copyright{
	  display: block;
	  margin: 0 auto;
	  padding: 0;
	  color: #4c5aa5;
	  background: #fff;
	  font-size: small;
	}

}
	
/*ページトップスクロール ──────────────────────────────────────────────────*/
#page-top {
	position: fixed;
	right: 10px;
	bottom: 50px;
	z-index: 10;
}

/* ▲ページトップスクロールここまで▲ */
/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意*/
.spBr span {
	display: inline-block;
	white-space: nowrap;
}

/*画像ループ ──────────────────────────────────────────────────*/
section#loop {
    padding: 10px 0;
    background: #08003c;
}
.responsive-loop-band {
  width: 100vw;
  max-width: 100vw;
  height: 4vw;        /* 画面幅で連動、高さ大きくしたい場合：8vwなど */
  min-height: 20px;
  max-height: 64px;   /* 上限値（スマホで帯が太くなりすぎ防止） */
  overflow: hidden;
  background: #1b1464;
  position: relative;
}
.track {
  width: 400%;    /* 画像4枚分（2枚x2セット）＝親div（100%）の4倍幅 */
  height: 100%;
  display: flex;
  animation: loopband 30s linear infinite;
}
.track img {
  width: 25%;     /* 画像4枚＝各25%でぴったり */
  height: 100%;
  object-fit: cover;
  display: block;
  user-drag: none;
  user-select: none;
  pointer-events: none;
}
@keyframes loopband {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* 画像2枚分でちょうどループ */
}
/* 帯が細すぎる時: */
@media (max-width: 800px) {
  .responsive-loop-band { min-height: 12px; }
}