/* 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: 750px;
	/* 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;
	--maincolor: #f23b5e;
}

/* 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-color: #024A96;
}

:is(header, main, footer) {
  margin: 0 auto;
  max-width: var(--contents-wide);
	background-color: #fff;
	border-bottom: 1px solid #fff;
}

footer{
	padding: 1em;
	text-align: center;
}

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

h1{
	text-align: center;
	padding: 10px;
	img{
		width: 30%;
		max-width: 397px;
		height: auto;
	}
}

/*リンクボタン*/
a.btn {
	display: flex;
	align-items: center;
	width: 14em;
	height: 2.6em;
	margin: 0 auto;
	padding: 5px 2em;
	background: #3359af;
	text-decoration: none;
	border-radius: 9999px;
	
	.btn-text {
		display: block;
		color: #fff;
		font-weight: bold;
		text-align: center;
		position: relative;
		margin: 0 auto;
		padding-left: 1.5em;
	}
	.btn-text::before {
		position: absolute;
		left: 0;
		margin: 1px auto 0;
		vertical-align: middle;
		font-family: "Font Awesome 6 Free";
		content: "\f279";
		font-weight: 900;
	}
	
	/*マウスオーバーした時*/
	@media (hover: hover) {
		/* hover指定できるPCを想定したスタイル */
		&:hover {
			background-color: var(--maincolor);
			color: #fff;
		}
	}
	@media (hover: none) {
		/* hoverが使えないタッチ端末 */
		&:active {
			background-color: var(--maincolor);
			color: #fff;
		}
	}
}

/* ページトップスクロール ────────────────────────────────────────────────── */
#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;
	}
}

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

/*タブ表示切替*/
.tab_area {
  display: none;
  opacity: 0;
	
	&.is-active {
		/* 表示中のタブエリア */
		display: block;
		animation-name: displayAnime;
		animation-duration: 1.0s;
		animation-fill-mode: forwards;
	}
}

/* フェードインアニメーション */
@keyframes displayAnime {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

nav{
	margin: 0;
}

ul.tab {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  list-style: none;
  margin: 0 auto;
  padding: 0;
	
	li{
		
		width: calc( 100% / 3 );
		padding: 0 5px;
		
		a {
			position: relative;
			display: block;
			padding: 10px 5px;
			text-decoration: none;
			color: #ccc;
			transition: 0.3s;
			text-align: center;
			white-space: nowrap;
			
			&::after {
				content: "";
				position: absolute;
				bottom: 0;
				left: 0;
				transform: scaleX(0);
				transform-origin: left;
				width: 100%;
				height: 3px;
				background-color: var(--maincolor);
				transition: transform 0.4s ease;
				z-index: 9;
			}

			&:hover {
				color: var(--maincolor);
				
				&::after{
					opacity: 1;
					transform: scaleX(1);
				}
			}
		}
		
		&.active a {
			color: var(--maincolor);
			font-weight: bold;
			
			 &::after {
				 opacity: 1;
				 transform: scaleX(1);
			}
		}
	}
}

section.info{
	margin: 0;
	padding: 1em;
	background-color: #ffe725;
	color: var(--maincolor);
	text-align: center;
	
	p{
		margin: 0;
		padding: 0;

		&:first-child{
			margin-bottom: 1em;
		}
	}
}

section.notes{
	padding: 1em;
	
	h2{
		text-align: center;
	}
	
	hr{
		border: none;
    border-top: 2px dotted #999;
	}
	
	ul{
		list-style: none;
		margin: 0;
		padding: 0;
		
		li{
			padding-left: 2em;
			text-indent: -0.6em;
		}
		
		li::before{
			content: "*";
			margin-right: 0.2em;
		}
	}
}

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