/* 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("product_d.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:#196545;
	--cat02:#d23e3e;
	--cat03:#dda943;
	--cat04:#9b6a58;
}

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

/*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: -webkit-sticky; /*Safari用*/
	position: sticky;
	top: 0;
	/*横半分50%　縦を100vhにする*/
	width: 50%;
	height: 100vh;
	background-color: #d13d3d;
	display: flex;
	justify-content: center;
	align-items: center;
}

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

/*＝＝＝＝＝＝＝＝＝＝＝768px以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/
@media screen and (max-width:768px) {
	#wrapper {
		display: block; /*display:flex;を解除*/
	}
	#fixed-area {
		position: relative !important; /*position stickyを解除*/
		width: 100%; /*横幅を100%にして1列に見せる*/
		height: 50vh; /*縦幅を100vh⇒40vh　※任意の高さに設定可能*/
	}

	#container {
		width: 100%; /*横幅を100%にして1列に見せる*/
	}
}

header {
	margin: 0;
	padding: 0;
	
	h1 {
		margin: -15% auto 0 auto;
		width: 70%;
	}
}

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);
}

/*画像は基本的に横幅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: #8ab397;
	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.photo {
	text-align: center;
	
	img {
		max-width: 640px;
		height: auto;
	}
}

/*ラッピング*/
.fa-gift.paid {
	color: #ff6699;
	margin-right: 5px;
}
.fa-gift.free {
	color: #0099ff;
	margin-right: 5px;
}

/*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;
}

/* ================================
タイトル画像を画面いっぱいにぴったり収める
================================ */

/* PC*/
#fixed-area {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

#fixed-area h1 {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  text-align: center;
}

#fixed-area h1 img.pc {
  display: block;
  height: 100vh;
  width: auto;
  margin:0 auto ;
  object-fit: contain;
}

#fixed-area h1 img.sp {
  display: none;
}

/* SP */
@media screen and (max-width: 768px) {
  #fixed-area {
    height: auto;
    display: block;
  }

  #fixed-area h1 {
    height: auto;
  }

  #fixed-area h1 img.pc {
    display: none;
  }

  #fixed-area h1 img.sp {
    display: block;
    width: 100%;  /* 横幅いっぱいに */
    height: auto; /* 縦は自動調整 */
    margin: 0;
  }
}

/*装飾CSS ──────────────────────────────────────────────────*/

.softshadow{
	text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 0 6px rgba(0, 0, 0, 0.15);
}