/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

@font-face {
  font-family: 'akabara-cinderella';
  src: url('../common/font/akabara-cinderella.ttf') format('truetype');
  font-display: swap;
}

#contents_body {
	padding: 0;
	background: none;
}
#contents_body article {
	text-align: center;
}
.underline {
	border-bottom: solid 2px #333;
}
.vertical {/*縦書き設定*/
	-ms-writing-mode: tb-rl;
	-webkit-writing-mode: vertical-rl;
	writing-mode: vertical-rl;
}
/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/


.topimage {
			animation: fadeIn 1.5s ease 0s 1 normal;
	-webkit-animation: fadeIn 1.5s ease 0s 1 normal;
}
.topimage img {
	height: auto;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

.selectButtonWrap {
	margin: 0 auto;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}
	a.selectButton {
	    flex-basis: calc((100% - 15 * 4px) / 5);/*間のgapの個数分引いて等分*/
	    /* width指定だとwrapしないので、flex-basisで指定した方がいいらしい */
	    height: calc( 1.375*0.8*3.5rem + 20px );/* 半角7文字分（*3.5） */
	    font-family:Arial;
		line-height: 1;
		text-decoration:none;
		color: #fdfdfd;
		display: flex;
	    align-items: center;
	    justify-content: center;
	    gap: 0 10px;
	    padding: 10px 10px;
		cursor:pointer;
		text-shadow:0px -1px 0px #2b665e;
		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		border-radius: 5px;
		border:1px solid #fdfdfd;
		-moz-box-shadow:inset 0px 1px 3px 0px #91b8b3;
		-webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3;
		box-shadow:inset 0px 1px 3px 0px #91b8b3;
		background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #071713), color-stop(1, #6c7c7c));
		background:-moz-linear-gradient(top, #071713 5%, #6c7c7c 100%);
		background:-webkit-linear-gradient(top, #071713 5%, #6c7c7c 100%);
		background:-o-linear-gradient(top, #071713 5%, #6c7c7c 100%);
		background:-ms-linear-gradient(top, #071713 5%, #6c7c7c 100%);
		background:linear-gradient(to bottom, #071713 5%, #6c7c7c 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#071713', endColorstr='#6c7c7c',GradientType=0);
		background-color:#071713;
	}
		a.selectButton.toTop {
			padding: 10px 24.64px;/* ボタン折り返し時、上の5つとwidth揃えたいが、いい案がない */
		}
			a.selectButton.current {
				color: gray;
			}

.catchcopy {
    width: 100%;
    text-align: center;
    line-height: 1.3;
	word-break: keep-all;/* <wbr>用 */
	color: #fdfdfd;
	font-family: 'akabara-cinderella';
	letter-spacing: 0.025em;
	margin: 30px auto;
	text-shadow: 3px 3px 0 black, -3px -3px 0 black,
				 -3px 3px 0 black, 3px -3px 0 black,
				 0px 3px 0 black, 0 -3px 0 black,
				 -3px 0 0 black, 3px 0 0 black;
}

/*!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!*/

article section {
	margin: 0 auto 100px;
	padding: 25px 20px 40px;
	background-color: #fdfdfd;
	border: solid 1px black;
}
.section1 {animation: fadeIn 2s ease 0s 1 normal;-webkit-animation: fadeIn 2s ease 0s 1 normal;}
.section2 {animation: fadeIn 2.33s ease 0s 1 normal;-webkit-animation: fadeIn 2.33s ease 0s 1 normal;}
.section3 {animation: fadeIn 2.66s ease 0s 1 normal;-webkit-animation: fadeIn 2.66s ease 0s 1 normal;}
.section4 {animation: fadeIn 3s ease 0s 1 normal;-webkit-animation: fadeIn 3s ease 0s 1 normal;}
.section5 {animation: fadeIn 3.33s ease 0s 1 normal;-webkit-animation: fadeIn 3.33s ease 0s 1 normal;}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


section h2 {
	font-family: 'akabara-cinderella';
	line-height: 1;
}
p.maxim, p.person {
	font-family: 'Sawarabi Mincho', sans-serif;
}
p.maxim {
	margin: 25px auto 15px;
}
p.person {
	font-style: italic;
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( 各種条件分岐 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	article section {
		width: auto;
	}

@media screen and (orientation: landscape) {

	.topimage img {
		width: 80%;
	}

	.selectButtonWrap {
		padding: 0 10%;
	}
		article section:nth-child(odd) {
			margin-right: 10%;
		}
		article section:nth-child(even) {
			margin-left: 10%;
		}

}

/*----------------------------------------------------------------------------------*/

@media screen and (orientation: portrait) {

	.topimage img {
		width: 100%;
	}

	.selectButtonWrap {
		padding: 0 10%;
	}
		article section:nth-child(odd) {
			margin-right: 10%;
		}
		article section:nth-child(even) {
			margin-left: 10%;
		}

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( Z-INDEX指定 )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓( font-size )↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

a.selectButton {
	font-size: clamp(0.625rem, 5.5vw, 1.375rem);/* 22px */
}

section h2 {/* 数字 */
	font-size: 1.125rem; /* 18px */
}
	p.maxim {
		font-size: 1.25rem;  /* 20px */
	}
		p.person {
			font-size: 1rem;     /* 16px */
		}

.catchcopy {
	font-size: clamp(0.625rem, 14vw, 3.5rem);/* 56px */
}
	.catchcopyTop {
		font-size: clamp(0.625rem, 12vw, 3rem);/* 48px */
	}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↑↑↑（共通スタイル）↑↑↑ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
							/* ↓↓↓特殊３カラム（ノートPC--iPadpro横）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (1280px <= width <= 1366px) and (orientation: landscape) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓２カラム（タブ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (933px <= width < 1280px) and (orientation: landscape),
       screen and (768px <= width < 1280px) and (orientation: portrait) {/* ２カラム共通スタイル */


/*:::::２カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (933px <= width < 1280px) and (orientation: landscape) {


/*:::::２カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (768px <= width < 1280px) and (orientation: portrait) {


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
}							/* ↓↓↓１カラム（スマホ）↓↓↓ */
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

@media screen and (width < 933px) and (orientation: landscape),
       screen and (width < 768px) and (orientation: portrait) {/* １カラム共通スタイル */



/*:::::１カラム横向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 933px) and (orientation: landscape) {

} @media screen and (width < 700px) and (orientation: landscape) {/* iPhoneSE横 */

    .selectButtonWrap {/* ボタン5だけ折り返して不格好なので… */
        padding: 0 0;
    }

/*:::::１カラム縦向き::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
} @media screen and (width < 768px) and (orientation: portrait) {

	.selectButtonWrap {
		padding: 0;
	}
		article section:nth-child(odd) {
			margin-right: 0;
		}
		article section:nth-child(even) {
			margin-left: 0;
		}


} @media screen and (width <= 480px) and (orientation: portrait) {

} @media screen and (width <= 375px) and (orientation: portrait) {/* iPhoneSE縦 */

} @media screen and (width <= 320px) and (orientation: portrait) {

}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/* https://pengi-n.co.jp/blog/hover/ */

/*::::::::::::::::::::::::::::::( ホバー時の挙動 )::::::::::::::::::::::::::::::::::*/

	a.selectButton:active {/* ポチったときに沈む */
		position: relative;
		top: 1px;
	}

@media (hover: hover) {

	a.selectButton:hover {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #071713));
		background: -moz-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: -webkit-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: -o-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: -ms-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: linear-gradient(to bottom, #6c7c7c 5%, #071713 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#071713',GradientType=0);
		background-color: #6c7c7c;
	}
	a.selectButton:visited:hover {
		color: #fdfdfd;
	}

}

/*::::::::::::::::::::::::::::::( ホバーできない機種の挙動 )::::::::::::::::::::::::::::::::::*/

@media (hover: none) {

	a.selectButton:active {
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #071713));
		background: -moz-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: -webkit-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: -o-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: -ms-linear-gradient(top, #6c7c7c 5%, #071713 100%);
		background: linear-gradient(to bottom, #6c7c7c 5%, #071713 100%);
		filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#071713',GradientType=0);
		background-color: #6c7c7c;
	}
	a.selectButton:visited:active {
		color: #fdfdfd;
	}

}