@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;600;700&family=Noto+Serif+JP:wght@300;400;500;600;700;900&display=swap');

/* -------------------------------------------------------------------------
	BASE
========================================================================= */

:root {
    --def-font-color: #000;
    --accent-color: #AA1B1B;
	--accent-sub-color: #1C1C1C;
	--bg-color: #EEEEEE;
	--font-size-xsmall: 1.0rem;
	--font-size-small: 1.2rem;
	--font-size-medium: 1.4rem;
	--font-size-large: 1.6rem;
	--font-size-xlarge: 1.8rem;
	--font-family-sans: 'Noto Sans JP', sans-serif;
	--font-family-serif: 'Noto Serif JP', serif;
}

* {
	margin: 0px;
	padding: 0px;
	}
html {
	font-size: 62.5%;
	-webkit-text-size-adjust: 100%;
	-webkit-backface-visibility:hidden;
	}
body {
	width: 100%;
	margin: 0px;
	color: var(--def-font-color);
	line-height: 160%;
	font-size: 14px;
	font-size: var(--font-size-medium);
	font-family: 'Noto Serif JP', -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
	background-color: #FFF;
	-webkit-backface-visibility:hidden;
	}
/* IE11 */
_:lang(x)::-ms-backdrop, body { font-family: "Segoe UI", Meiryo, sans-serif; }
h1, h2, h3, h4, h5, h6, p { margin: 0px; }
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display: block; }
address { font-style: normal; }
ul {
	list-style: none;
	padding: 0px;
	}
li { padding: 0px; }
input, select { vertical-align: middle; }
a {
	color: #000000;
	text-decoration: none;
	}
a { -webkit-tap-highlight-color:transparent; }
a:visited { color: #000000; }
a:hover {
	filter: alpha(opacity=70);
	opacity: 0.7;
	}
a:active { color: #e71f19; }
img {
	width: 100%;
    height: auto;
	border: none;
	vertical-align: top;
	}
.fxsmall { font-size: var(--font-size-xsmall); } 
.fsmall { font-size: var(--font-size-small); } 
.fmedium { font-size: var(--font-size-medium); } 
.flage { font-size: var(--font-size-lage); } 
.fxlage { font-size: var(--font-size-xlage); } 
.fAccent { color: var(--accent-color); }
.bgAccent { background: var(--accent-color); }
.bgAccentSub { background: var(--accent-sub-color); }

#top {}

.hide { display: none; }
.show { display: inline; }

.container {
	width: 90%;
	/*width: 100%;
	max-width: 1170px;*/
	margin: 0px auto;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 1300px) {
/*.container { width: 90%; }*/
}
@media screen and (max-width: 768px) {
.hide { display: inline; }
.show { display: none; }
.container { max-width: 690px; }
}



/* -------------------------------------------------------------------------
	HEADER
========================================================================= */
#head {}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
}


/* -------------------------------------------------------------------------
	FOOTER
========================================================================= */
#foot {
	padding: 50px 0;
	position: relative;
	z-index: 0;
	text-align: center;
	background: var(--accent-sub-color);
	color: #FFF;
	}
#foot .sns {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	}
#foot .sns > li { width: 50px; }
#foot .sns > li:first-of-type { width: 48px; }
#foot .sponsored {
	padding: 50px 0 40px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30px;
	}
#foot .sponsored > dl { position: relative; }
#foot .sponsored > dl dt {
	padding: 0 5px 0 8px;
	display: inline-block;
	z-index: 10;
	font-size: 1.6rem;
	letter-spacing: 0.5rem;
	background: var(--accent-sub-color);
	}
#foot .sponsored > dl dt::before {
	content: "";
	width: 100%;
	height: 1px;
	display: block;
	position: absolute;
	top: 10px;
	left: 0;
	z-index: -1;
	background: rgba(255,255,255,1);
	}
#foot .sponsored > dl dd {
	width: 206px;
	padding-top: 10px;
	}
#foot .sponsored > dl dd:nth-of-type(2) {
	padding-top: 28px;
	font-size: 2rem;
	font-family: var(--font-family-serif);
	}
#foot .copyright {
	font-size: 1rem;
	font-weight: 200;
	letter-spacing: 0.2rem;
	}

/* SMARTPHONE ONLY */
@media screen and (max-width: 768px) {
#foot { padding: 40px 0; }
#foot .sns { gap: 25px; }
#foot .sns > li { width: 40px; }
#foot .sns > li:first-of-type { width: 38px; }
#foot .sponsored {
	padding: 40px 0 30px;
	/*flex-direction: column;
	align-items: center;
	gap: 30px;*/
	}
#foot .sponsored > dl dt { font-size: 1.4rem; }
#foot .sponsored > dl dd { width: 150px; }
#foot .sponsored > dl dd:nth-of-type(2) {
	padding-top: 20px;
	font-size: 1.6rem;
	}
}



/* -------------------------------------------------------------------------
	MAIN
========================================================================= */

/* SMARTPHONE ONLY */
@media screen and (max-width: 1000px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 410px) {}


/*  ---------------------------------------------------------*/
#mainText {
	padding: 70px 0 90px;
	font-size: var(--font-size-xlarge);
	line-height: 200%;
	text-align: center;
	}
#mainText .container {
	width: 80%;
	display: flex;
	flex-direction: column;
	gap: 1em;
	}
#mainText .container > p > strong {
	color: var(--accent-color);
	font-size: 2em;
	font-weight: 600;
	}

@media screen and (max-width: 768px) {
#mainText {
	padding: 30px 0 60px;
	font-size: var(--font-size-large);
	text-align: left;
	}
}


/*  ---------------------------------------------------------*/
#data {
	padding: 75px 0 90px;
	background: var(--bg-color);
	font-size: var(--font-size-large);
	}
#data .container > h2 {
	padding-bottom: 32px;
	font-size: 2.3rem;
	text-align: center;
	line-height: 160%;
	}
#data .container > h2 > strong {
	font-size: 1.5em;
	line-height: 160%;
	}
#data .container > dl {
	max-width: 900px;
	margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	background: #FFF;
	}
#data .container > dl dt {
	width: calc(30% - 1em - 2px);
	padding-left: 1em;
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 2px solid var(--bg-color);
	font-weight: 700;
	letter-spacing: 1em;
	}
#data .container > dl dd {
	width: calc(70% - 3.6em);
	padding: 1.2em 1.8em;
	}
#data .container > dl dt,
#data .container > dl dd { border-bottom: 5px solid var(--bg-color); }
#data .container > dl dd > ul,
#data .container > dl dd > ul li { display: flex; }
#data .container > dl dd > ul {
	display: flex;
	flex-direction: column;
	gap: 0.8em;
	}
#data .container > dl dd > ul li { gap: 0.3em; }
#data .container > dl dd > ul li::before {
	content: "●";
	padding-top: 0.1em;
	font-size: 0.6em;
	opacity: 0.4;
	}
#data .container > dl dt:first-of-type { font-size: 2.3rem; }
#data .container > dl dd:first-of-type {
	font-size: var(--font-size-xlarge);
	font-weight: 600;
	}
#data .container > dl dd span { font-size: 1.5em; }

.mail {
	width: auto;
	height: 18px;
	vertical-align: bottom;
	}
.formButton {
	padding-top: 60px;
	display: flex;
	justify-content: center;
	}
.formButton > a {
	margin: 0 auto;
	padding: 1em 2.5em;
	display: block;
	border-radius: 10px;
	background: var(--accent-color);
	box-shadow: 0 0.5em 0.5em -0.4em rgba(0,0,0,0.6);
	transition: all 0.15s ease;
	color: #FFF;
	font-size: 3.5rem;
	font-weight: 600;
	line-height: 120%;
	animation: pop 6s infinite;
	}
.formButton > a:hover {
	opacity: 0.9;
	box-shadow: 0 0.5em 0.5em -0.4em rgba(0,0,0,0);
	transform: translateY(0.1em);
	animation: none;
	}
@keyframes pop {
  0%   { transform: translate(0%, 0%); }
  2%  { transform: translate(0%, 5%); }
  4%  { transform: translate(0%, 2%); }
  6%  { transform: translate(0%, 5%); }
  8%  { transform: translate(0%, 0%); }
  100% { transform: translate(0%, 0%); }
}

@media screen and (max-width: 768px) {
#data {
	padding: 50px 0 70px;
	font-size: var(--font-size-medium);
	}
#data .container > h2 {
	padding-bottom: 20px;
	font-size: 1.7rem;
	}
#data .container > dl dt {
	width: calc(25% - 0.5em - 2px);
	padding-left: 0.5em;
	letter-spacing: 0.5em;
	}
#data .container > dl dd {
	width: calc(75% - 3em);
	padding: 1.2em 1.5em;
	}
#data .container > dl dt:first-of-type { font-size: var(--font-size-xlarge); }
#data .container > dl dd:first-of-type {
	font-size: var(--font-size-medium);
	font-weight: 600;
	}
#data .container > dl dd > ul { gap: 0.4em; }
.mail {
	height: 14px;
	vertical-align: middle;
	}
.formButton {
	padding-top: 40px;
	display: flex;
	justify-content: center;
	}
.formButton > a {
	padding: 0.8em 1.5em;
	font-size: 2.3rem;
	}
}


/*  ---------------------------------------------------------*/
#profile {}
#profile.container {
	max-width: 620px;
	padding: 80px 0;
	}
#profile > h3 {
	padding-bottom: 20px;
	font-size: 2rem;
	text-align: center;
	}
#profile .profileWrapper {
	padding-bottom: 10px;
	position: relative;
	display: flex;
    justify-content: center;
	/*display: flex;
	justify-content: space-between;
	gap: 100px;*/
	}
/*#profile .profileWrapper::before {
	content: "";
	position: absolute;
	width: 2px;
	height: 100%;
	margin: auto;
	top: 0;
	left: 0;
	right: 0;
	background: var(--bg-color);
	}*/
#profile .profileWrapper > dl {
	width: calc(100% - 100px / 2);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
	}
#profile .profileWrapper > dl dd:last-of-type {
	order: -1;
	max-width: 280px;
	margin-bottom: 5px;
	}
#profile .profileWrapper > dl dt {
	color: var(--accent-color);
	font-size: 2.8rem;
	font-weight: 700;
	}
#profile .profileWrapper > dl dt > span {
	padding-right: 0.5em;
	font-size: 0.8em;
	}
#profile .profileWrapper > dl dd { line-height: 180%; }
#profile .profileWrapper > dl dd td { vertical-align: top; }

@media screen and (max-width: 768px) {
#profile.container { padding: 60px 0; }
#profile > h3 {
	padding-bottom: 30px;
	font-size: var(--font-size-xlarge);
	}
#profile .profileWrapper {
	flex-direction: column;
	align-items: center;
	gap: 40px;
	}
#profile .profileWrapper::before { display: none; }
#profile .profileWrapper > dl {
	width: 90%;
	gap: 10px;
	}
#profile .profileWrapper > dl dd:last-of-type { max-width: 180px; }
/*#profile .profileWrapper > dl:first-of-type {
	padding-bottom: 40px;
	border-bottom: 2px solid var(--bg-color);
	}*/
#profile .profileWrapper > dl dt { font-size: 2.3rem; }
}