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

/* 変数設定 ======================================================== */

/* 共通のサイズや色を変数で設定 */
:root {
	/* コンテンツの最大幅 */
	--contents-wide: 940px;
	/* flexboxの子要素の間隔 */
	--spacing: 20px;
	/* 文字サイズ */
	--small: 1.2rem;/*75%*/
	--medium: 1.6rem;/*100%*/
	--large: 2rem;/*125%*/
	--x-large: 2.4rem;/*150%*/
	/* 色 */
	--red: #cc0000;
	--blue: #003399;
	--mallcolor: #b60081;
}

/* STYLES ======================================================== */

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

/* bodyのフォントサイズはfont-m（16px=1.6rem）と同じ */
body {
	font-size: var(--medium);
}

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

.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: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
	margin: 0;
	padding: 0;
	background: #007557;
	color: #fff;
	a{
		color: #dbeefd;
	}
}

:is(header, main, footer) {
  margin: 0 auto;
  max-width: var(--contents-wide);

	@media (max-width: 1000px) {
		/* mainのmax-widthよりウィンドウ幅が狭くなった時にコンテンツとウィンドウが接しないように設定
		@mediaのmax-widthと下記paddingはサイトコンテンツのmax-widthに合わせて調整 */
		padding: 10px;
	}
}

header{
	padding-bottom: 0;
}

footer{
	text-align: center;
	font-size: var(--small);
	padding: 1em;
}

article{
	margin-top: 2em;
	
	.flexbox{
		p{
			margin: 0;
			img{
				border-radius: 10px;
			}
		}
	}
}


nav{
	text-align: center;
	margin-top: 2em;
	> a{
		position: relative;
		display: flex inline-block;
		width: fit-content;
		margin: 0 5px;
		padding: 10px 2em;
		background: #fff;
		align-items: center;
		justify-content: center;
		height: 2.6em;
		color: #007557;
		text-align: center;
		font-weight: bold;
		text-decoration: none;
		border-radius: 3px;
		
		@media (max-width: 768px) {
			width: 100%;
			display: flex block;
			margin-bottom: 5px;
		}

		&::after{
			position: absolute;
			right: 10px;
			margin: auto;
			vertical-align: middle;
			font-family: "Font Awesome 6 Free";
			content: "\f0d7";
			font-weight: 900;
		}

		/*マウスオーバーした時*/
		@media (hover: hover) {
			/* hover指定できるPCを想定したスタイル */
			&:hover {
				background-color: #54c077;
				color: #fff;
			}
		}
		@media (hover: none) {
			/* hoverが使えないタッチ端末 */
			&:active {
				background-color: #54c077;
				color: #fff;
			}
		}
	}
}

article > p{
	margin: 1em 10px;
}

h1 {
  position: relative;
	text-align: center;
	width: fit-content;
	margin: 1em auto 0;
	
	&:after {
		content: "";
		position: absolute;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 7px;
		background: -webkit-repeating-linear-gradient(-45deg, #54c077, #54c077 2px, #007557 2px, #007557 4px);
		background: repeating-linear-gradient(-45deg, #54c077, #54c077 2px, #007557 2px, #007557 4px);
	}
}

h2{
	background-color: #54c077;
	margin: 0 calc(50% - 50vw) 1em;
	padding: 10px calc(50vw - 50%);
	font-size: var(--large);
	
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-shadow: 1px 2px 2px rgba(0, 0, 0, 0.4);
}

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

/* Flexbox ────────────────────────────────────────────────────────────
子要素の間隔はgapで指定。
*/

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

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

/* PC・スマホ共に2分割 */
.flexbox.box2 {
	> * {
		width: calc((100% - var(--spacing)) / 2);
	}
}

/* PC2列、スマホ1列 */
.flexbox.box2-1 {
	> * {
		width: 100%;
	}
	@media (min-width: 768px){
	/* PCのみ適用 */
		> * {
			width: calc((100% - var(--spacing)) / 2); 
		}
	}
}

/* PC3列、スマホ1列 */
.flexbox.box3-1 {
	> * {
		width: 100%;
	}
	@media (min-width: 768px){
		> * {
			width: calc((100% - var(--spacing) * 2) / 3); 
		}
	}
}

/* PC3列、スマホ2列 */
.flexbox.box3-2 {
	> * {
		width: calc((100% - var(--spacing)) / 2); 
	}
	@media (min-width: 768px){
		/* PCのみ適用 */
		> * {
			width: calc((100% - var(--spacing) * 2) / 3); 
		}
	}
}

/* PC4列、スマホ2列 */
.flexbox.box4-2 {
	> * {
		width: calc((100% - var(--spacing)) / 2); 
	}
	@media (min-width: 768px){
		/* PCのみ適用 */
		> * {
			width: calc((100% - var(--spacing) * 3) / 4); 
		}
	}
}

/* 子要素のボックスサイズの個別指定
スマホで縦に並べる場合は親要素をclass="flexbox spCancel"とする */
.flexbox {
	.box25 {
		width: calc((100% - var(--spacing)) * 1 / 4);
	}
	.box75 {
		width: calc((100% - var(--spacing)) * 3 / 4);
	}
	
	.box30 {
		width: calc((100% - var(--spacing)) * 3 / 10);
	}
	.box70 {
		width: calc((100% - var(--spacing)) * 7 / 10);
	}
	
	.box40 {
		width: calc((100% - var(--spacing)) * 4 / 10);
	}
	.box60 {
		width: calc((100% - var(--spacing)) * 6 / 10);
	}
	@media (max-width: 768px) {
	/* スマホでは1列に並べる場合 */
		&.spCancel > * {
			width: 100%;
		}
	}
}

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

.top-btn {
	display: block;
	background: #000;
	color: #fff;
	width: 50px;
	height: 50px;
	text-align: center;
	box-shadow: 0 0 0 3px #000;/* ボタンの背景色に合わせる */
	border: 1px solid #fff;
	text-decoration: none;
	
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background: #666;
			box-shadow: 0 0 0 3px #666;/* ボタンの背景色に合わせる */
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末を想定した装飾 */
		&:active {
			background: #666;
			box-shadow: 0 0 0 3px #666;/* ボタンの背景色に合わせる */
		}
	}
	
	i {
		padding-top: 5px;
		font-size: var(--large);
		display: block;
	}
	span {
		display: block;
		font-size: var(--small);
		margin-top: -2px;
	}
}

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

/*スマホだけ改行*/
@media (min-width: 767px) {
  .sp-br {
    display: none;
  }
}