/* 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_a.css");
@import url("linkbtn.css");
@import url("product_c.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-color: #00a1e9;
	
header {
	margin: 0;
	padding: 0;
	
	h1 {
		margin: 0;
		text-align: center;
		background: #00a1e9;
		margin-bottom: 20px;
		
		img{
			max-width: 980px;
		}
	}
}

main {
	margin: 0;
	padding: 0 10px;
	
	section {
		max-width: 980px;
		margin: 0 auto 2em;
	
	}
}

footer{
  margin: 0;
  padding: 10px 0;
  color: #fff;
  text-align: center;
  background-color: #009a44;
}
}
/*画像は基本的に横幅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;
}

/*PC2列、スマホ1列　※flexboxと一緒に設定*/
.box2-1{
  margin-right: -15px;
}
.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;
  }
}

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

/*PC3列、スマホ2列　※flexと一緒に設定*/
.box3-2 > div,
.box3-2 > p{
  width: calc( ( 100% - 10px * 2 ) / 2 );
  margin: 0 10px 10px 0;
}

@media (min-width: 768px){
/*PCのみ適用*/
  .box3-2 > div,
  .box3-2 > p{
    width: calc( ( 100% - 10px * 3 ) / 3 );
  }
}

/*PC横1列・スマホ縦1列　*/

@media (min-width: 768px){
/*PCのみ適用*/
.flexbox2{
  display: flex;
  flex-wrap: nowrap;
}

.box1-2{
  margin-right: -15px;
}

.box1-1 > div,
.box1-1 > p{
  width: 100%;
  margin: 0 15px 15px 0;
}
  .box1-1 > box-left{
    width: 50%;
	text-align: center;
  }
	
}


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

a.topbtn_a{
	display: block;
	background: #a03000;
	color: #fff;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	text-align: center;
	text-decoration: none;
	
	i {
		padding-top: 5px;
		font-size: var(--large);
		display: block;
	}
	span {
		display: block;
		font-size: var(--small);
		margin-top: -2px;
	}
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background: #344791;
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末 */
		&:active {{
			background: #344791;
		}
	}
}
}
/* ▲ページトップスクロールここまで▲ */
/* スマホなど幅が足りなくなったらspanで囲った単位で強制改行
   spanで囲まれている文章は自動改行がされなくなるので要注意*/
.spBr span {
	display: inline-block;
	white-space: nowrap;
}