/* 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");

/* 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: #e50012;
	
header {
	margin: 0;
	padding: 0;
    background: #e50012;
	
	p {
		margin: 0;
		text-align: center;
		background: #fff;
		padding: 10px 0;
		
		img{
			max-width: 250px;
		}
			}
	
	h1 {
		margin: 0;
		text-align: center;
		
		img{
			max-width: 750px;
		}
	}
}

main {
	margin: 0 auto;
	padding: 0 10px;
	width: 95%;
	max-width: 750px;
	
	section {
		max-width: 750px;
		margin: 0 auto;
		padding: 10px 0;
	
	}
	background-image: repeating-linear-gradient(311deg, #fef2f4, #fef2f4 10px, #ffffff 10px, #ffffff 20px);

}

footer{
  margin: 0;
  text-align: center;
  background: #e50012;
	
	p {
		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;
	}

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

p.photo{
	text-align: center;
	margin-bottom: 10px;
}


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

/*PC・スマホ共に2分割　※flexと一緒に設定*/
.box2 > div,
.box2 > p{
  width: calc( ( 100% - 20px ) / 2 );
  margin: 0 10px 10px 0;
}


/*PC2列、スマホ1列　※flexboxと一緒に設定*/
.box2-1{
  margin-right: -10px;
}
.box2-1 > div,
.box2-1 > p{
  width: 100%;
  margin: 0 15px 15px 0;
}
@media (min-width: 768px){
/*PCのみ適用*/
  .box2-1 > div,
  .box2-1 > p{
    width: calc( ( 100% - 15px * 2 ) / 2 );
    margin-right: 15px;
  }
}

/*Flexbox　カテゴリー用 ─────────────────────────────────────────────*/
.flexbox2{
  display: flex;
  flex-wrap: wrap;
  justify-content:space-evenly;
  row-gap:20px;
}
/*PC・スマホ共に※flexと一緒に設定*/
.box3 > div,
.box3 > p{
  width: calc( ( 100% - 10px * 3 ) / 3 );
  margin: 0 5px 5px 0;
}
@media (min-width: 768px){
  .box3 > div,
  .box3 > p{
    width: calc( ( 100% - 30px * 3 ) / 3 );
  	margin: 0 5px 5px 0;
  }
}

/*ボタン（デフォルト）───────────*/
a.btn {
	position: relative;
	display: flex;
	align-items: center;
  justify-content: center;
	width: 14em;
	height: 2.6em;
	margin: 0 auto;
	padding: 10px 2em;
	background: #005dad;
	color: #fff;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	border-radius: 1.3em;
	
	&::after{
		position: absolute;
		right: 10px;
		margin: auto;
		vertical-align: middle;
		font-family: "Font Awesome 6 Free";
		content: "\f054";
		font-weight: 900;
	}
	
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background-color: #465d71;
			color: #fff;
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末 */
		&:active {
			background-color: #465d71;
			color: #fff;
		}
	}
}


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

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

/*見出しGIF*/
.cat_title{
	margin: 0;
	padding:1em 0;
	position: relative;
}

.himawari{
	position: absolute; 
	left: 30px;  
	bottom: -30px;  
	width: 20%;
}
@media (max-width: 750px){
 .himawari{
	position: absolute; 
	left: 10px;  
	bottom: -15px;  
	width: 20%;
}
}

/*クラッカー*/
.cat_title02{
	margin: 0;
	padding:1em 0;
	position: relative;
}
.cracker{
	position: absolute; 
	left: -40px;
	bottom: 610px;
	width: 30%;
}
@media (max-width: 750px){
 .cracker{
	position: absolute; 
	left: -10px;  
	top: 20px;  
	width: 30%;
}
}