/* 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("event_b.css");

/* LinkBtn ======================================================== */
/*使用するボタンのスタイルをコピーしてstyle.cssに貼り付け
　※その際、下記の読み込みは削除*/
@import url("linkbtn.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;
	/*カテゴリごとのボタン／枠の背景色*/
	--cat01:#68a93b;
	--cat02:#ebbd40;
	--cat03:#2089d1;
	--cat04:#e34a2a;
	--cat05:var(--gradient);
	/* グラデーションをrootに定義する */
    --gradient: linear-gradient(to right, var(--cat01), var(--cat02), var(--cat03));
}
/* 3色のグラデーションをボタン背景に設定 */
.cat05 {
  background: var(--gradient); /* rootで設定したグラデーションを使用 */
  border-radius: 5px;
}


/* ルートのフォントサイズを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;
}



header {
	margin: 0;
	padding: 0;
	
	h1 {
		margin: 0 auto;
		width: 60%;
	}
}

main {
	margin: 0;
	padding: 0 10px;
	
	section {
		margin: 0 0 2em 0;
		padding: 5px 15px;
		border-radius: 5px;
		
		h2 {
			color: #fff;
			font-size: var(--large);
		}
	}
}

footer {
	margin: 0;
	padding: 10px 0;
	text-align: center;
}

section#category01 {
	background-color: var(--cat01);
}

section#category02 {
	background-color: var(--cat02);
}

section#category03 {
	background-color: var(--cat03);
}

section#category04 {
	background-color: var(--cat04);
}

section#category05 {
	background: var(--gradient);
}

/*画像は基本的に横幅100%表示、高さは横幅に合わせて自動調整
  小さい画像を使用する際は個別にmax-widthを設定する*/
img {
	width: 100%;
	height: auto;
	vertical-align: bottom;
	image-rendering: -webkit-optimize-contrast; /*Chromeで画像がぼやけるのを防止*/
}

/*ナビゲーション部分*/
/*========= 途中からハンバーガーメニューに変化するのためのCSS ===============*/
/*========= ボタンのためのCSS ===============*/

/*ボタン全体の形状*/
.openbtn {
	/*はじめは非表示に*/
	display: none;
	/*ボタンの位置*/
	position: fixed;
	top: 10px;
	right: 10px;
	z-index: 999;
	/*ボタンの形状*/
	background: #000;
	cursor: pointer;
	width: 50px;
	height: 50px;
	border-radius: 5px;
	
	/*ボタンのアイコン設定*/
	span {
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background-color: #fff;
		width: 45%;
	}
	span:nth-of-type(1) {
		top: 15px;
	}
	span:nth-of-type(2) {
		top: 23px;
	}
	span:nth-of-type(3) {
		top: 31px;
	}
}


/*activeクラスが付与された後のボタンのアイコン設定*/
.openbtn.active{
	span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}
	span:nth-of-type(2) {
		opacity: 0;
	}
	span:nth-of-type(3) {
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}	
} 

/*fadeDownクラスが付与された後のボタンの出現アニメーション設定*/
.fadeDown {
    animation-name: fadeDownAnime;
    animation-duration: 0.5s;
    animation-fill-mode: forwards;
    opacity: 0;
    display: block;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
	transform: translateY(-100px);
  }

  to {
    opacity: 1;
	transform: translateY(0);
  }
}

/*========= ヘッダーナビゲーションのためのCSS ===============*/
/*==ヘッダーの形状*/
#menu {
	width: 100%;
	display: grid;
	place-items: center;
	text-align: center;
	padding: 20px;
}

/*.doneクラスがついたヘッダー*/
#menu.dnone {
	opacity: 0; /*透過0にして非表示に*/
	
	/*.doneクラスがついたヘッダーのテキストナビゲーションの形状*/
	nav#g-navi {
		/*固定位置にして最背面に*/
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		/*高さと幅*/
		width: 100%;
		height: 100vh;
		/*天地中央＆テキスト中央揃え*/
		display: grid;
		place-items: center;
		/*はじめは透過0に*/
		opacity: 0;
		transition: all 0.4s;
	}
}

/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
#menu.dnone.panelactive {
	opacity: 1; /*不透明にして出現*/
	
	/*panelactiveクラスがついたナビゲーションの形状*/
	nav#g-navi {
		opacity: 1; /*不透明に*/
		z-index: 3; /*最前面に*/
		background: #eee;
	}
}

section {
	position: relative;
	z-index: 1;
}

/*ナビゲーション用ボタン*/
nav#g-navi {
	width: 100%;
	
	p a {
		display: block;
		padding: 5px 20px;
		border-radius: 5px;
		color: #fff;
		text-decoration: none;
		text-align: center;
	}
	
	p.cat01 a {
		background-color: var(--cat01);
	}
	
	p.cat02 a {
		background-color: var(--cat02);
	}
	
	p.cat03 a {
		background-color: var(--cat03);
	}

	p.cat04 a {
		background-color: var(--cat04);
	}

	p.cat05 a {
		background-color: var(--cat05);
	}
}

p.photo {
	text-align: center;
	
	img {
		max-width: 640px;
		height: auto;
	}
}


/*Flexbox ────────────────────────────────────────────────────────────
　左寄せ。
　子要素の右に10pxのマージン。右端にくる分は親要素のmargin-right: -10pxで相殺
  均等配置にしたい場合は上記設定を削除し、flex-boxにjustify-content: space-betweenを設定し
　子要素のwidthの計算式で100%から引く数値を10px減らす
*/

.flexbox{
  display: flex;
  flex-wrap: wrap;
	
	/*子要素に枠線。デザイン的に不要なら削除*/
	div{
	  border: 1px solid #ccc;
		padding: 5px;
	}
}

/*PC・スマホ共に2分割　※flexboxと一緒に設定*/
.box2{
	--spacing: 20px; /*子要素の間隔*/
	
	gap: var(--spacing);
	
	div,
	p{
		width: calc( ( 100% - var(--spacing) ) / 2 ); 
	}
}

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

/* ▲ページトップスクロールここまで▲ */

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


/*----------------画像モーダル----------------*/
/* Modaal 画像を完全に画面いっぱいにフィットさせる */

.modaal-container {
  padding: 0 !important;
  overflow: hidden; 
}

.modaal-container img {
  max-width: 100% !important;
  max-height: 100vh !important;
  width: 100% !important;
  height: 100vh !important;
  object-fit: contain !important; /* トリミングなしで全体表示 */
  display: block;
  margin: 0 auto;
}

/* モーダル表示中のスクロール無効化 */
html.modaal-noscroll, 
body.modaal-noscroll {
  height: 100%;
  overflow: hidden;
}

/*PCで左右分割
　スクロールすると画面分割した右側が動く*/

/*左と右を囲う全体のエリア*/
#wrapper {
	position: relative; /*position stickyの基点にするため relativeをかける*/
	display: flex; /*左エリア、右エリア横並び指定*/
	flex-wrap: wrap; /*ボックスの折り返し可*/
}
@media (min-width: 768px) {
	/*PCのみ適用*/
	#wrapper {
		min-width: 980px;
		margin: 0 auto;
	}
}

/*左エリア*/
#fixed-area {
  position: sticky;
  top: 0;
  width: 50%;
  height: 100vh;
  background: linear-gradient(135deg, #b5d3e7 0%, #dbe68a 50%, #f7e293 100%);
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#fixed-area header {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#fixed-area h1 {
  width: auto;
 
}

#fixed-area h1 img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100vh; /* トリミングなしで収まる */
  display: block;
}

/*右エリア*/
#container {
	/*横半分50%にする*/
	width: 50%;
}

.lead-text.compact {
  background: #d9edde;
  border-left: 7px solid #2c663a;
  padding: 10px 20px;
  margin: 20px auto 25px;
  border-radius: 6px;
  line-height: 1.4;
  color: #333;
  font-size: 1.3rem;
  max-width: 90%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.lead-text.compact h2{
	font-size: 1.3em;
}

.lead-text.compact p {
  margin: 0.4em 0;
}

.menu-box{
	margin-top: -30px;
}

@media (max-width: 768px) {
  .lead-text.compact {
    padding: 10px 15px;
    font-size: 1.2rem;
    margin: 15px auto 20px;
  }
}


/* ==== タブレット・スマホ対応 ==== */

@media (max-width: 1024px) {
  #wrapper {
		display: block; /*display:flex;を解除*/
	}

  #container {
    flex-direction: column;
    width: 100%;
    overflow-x: hidden; /* ← 横スクロールを防止 */
  }

  /* 固定エリアを通常のブロックに戻す */
  #fixed-area {
    position: relative !important;
    width: 100%;
    height: auto;
    display: block; /* flex解除して自然に縦積み */
    padding: 0; /* 余白をなくす */
    background: none; /* 背景グラデーション削除 */
  }

  /* タイトル（h1）ブロック */
  #fixed-area h1 {
    width: 100%;
    max-width: none;
    margin: 0;
  }

  /* 画像：横幅100%、縦は自動（トリミングなし） */
  #fixed-area h1 img {
    width: 100%;
    height: auto;
    display: block;
    max-width: none;
    max-height: none;
    object-fit: contain; /* トリミングせず収める */
  }


  #scroll-area {
    width: 100% !important; /* ← これが重要 */
    height: auto;
    overflow: visible; /* ← 内部スクロール解除で自然に伸びる */
  }
}

/* ===========================
   タブレット専用（768px〜1024px）
   =========================== */
@media (min-width: 768px) and (max-width: 1024px) {
    #fixed-area{
		background: linear-gradient(135deg, #b5d3e7 0%, #dbe68a 50%, #f7e293 100%);
	}

	#fixed-area h1 img {
		width: 100%;
		max-height: 100vh;
	}
}

.txt-space{
	margin-left: 0.5em;
}