@charset"UTF-8"; 
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;900&family=PT+Serif&display=swap');

/* ------------ RESET ------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	/*vertical-align: baseline;*/
}
a, a:link, a:visited, a:active	{ text-decoration: none; }
a:hover	{ font-style: normal; text-decoration: none; }

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
picture, 
img	{ width: 100%; border:none; outline:none; vertical-align: bottom; font-size:0; line-height:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; transform:translate3d(0,0,0); }
a picture,
a img	{ border:none; outline: none; }
a:focus	{ outline:none; }
*	{ -webkit-tap-highlight-color:rgba(0,0,0,0); -webkit-box-shadow:none; box-shadow:none; outline:none; box-sizing:border-box; margin:0; padding:0; }

/* ------------ iOS RESET ------------- */
textarea,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="checkbox"],
input[type="radio"],
input[type="submit"],
input[type="button"]	{ border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; appearance: button; border: none; box-sizing: border-box; cursor: pointer; }

/* ------------ COMMON ------------- */
.clear:after	{ content: ""; display: table; float:none; clear: both; }
html	{ width: 100%; height: 100%; }
body	{ color: #333333; background: #ffffff; width: 100%; height: 100%; line-height: 1.8; font-size: 15px; font-family: "Roboto", sans-serif; font-weight:400; letter-spacing:.08em; font-optical-sizing: auto; font-style: normal; position: relative; }
.fadeIn	{ opacity: 0; transition: 1s cubic-bezier(.24,.155,.275,.945); transition-delay: .2s; transform: translateY(20px); }
.fadeIn.active	{ opacity: 1; transform: translateY(0); }

/* ------------ CONTENTS ------------- */
#contents	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.story	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 80px 30px 60px; background-color: #fff; }
.story .wrapper	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 600px; }
.story .wrapper h2	{ margin: 0 0 40px; font-size: clamp(22px, 32px, 2.8vw); line-height: 1; font-weight: 700; }
.story .wrapper p	{ width: 100%; font-size: clamp(13px, 16px, 1.2vw); line-height: 1.8; padding: 0 0 20px; }
.story .wrapper p.right	{ text-align: right; }
@media (max-width: 767px) { 
	.story	{ padding: 60px 30px 40px }
	.story .wrapper h2	{ margin: 0 0 40px; }
	.story .wrapper p	{ padding: 0 0 10px; }
}
.profile	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 80px 30px 60px; background-color: #f0f0f0; }
.profile .wrapper	{ display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; max-width: 800px; }
.profile .wrapper h2	{ margin: 0 0 40px; font-size: clamp(22px, 32px, 2.8vw); line-height: 1; font-weight: 700; }
.profile dl	{ display: -webkit-flex; display: flex; justify-content: space-between; flex-wrap: wrap; border-top: 0 solid #fff; border-bottom: 0 solid #fff; }
.profile dl > dt,
.profile dl > dd	{ font-size: clamp(12px, 15px, 1vw); line-height: 1.8; padding: 0 0 30px; border-top: 0 solid #fff; border-bottom: 0 solid #fff; }
.profile dl > dt	{ width: 240px; text-align: right; font-weight: 700; }
.profile dl > dd	{ width: calc(100% - 260px); }
.profile dl > dd ul	{ margin: 0 0 0 1.5em;  }
.profile dl > dd p	{ margin: 0 0 5px; }
@media (max-width: 767px) { 
	.profile	{ padding: 60px 30px 40px }
	.profile .wrapper h2	{ margin: 0 0 40px; }
	.profile dl	{ padding-top: 10px; border-top: 1px solid #fff; }
	.profile dl > dt,
	.profile dl > dd	{ width: 100%; }
	.profile dl > dt	{ font-size: 13px; text-align: left; padding: 0 0 5px; }
	.profile dl > dd	{ padding: 0 0 10px; margin: 0 0 10px; border-bottom: 1px solid #fff; }
}

/* ------------ HEADER ------------- */
#header	{ width: 100%; height: 140px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; background-color: #fff; transition: all .5s; }
#header > h1	{ width: 100%; max-width: 280px; padding: 0; margin: 0; }
#header > h1 > a img	{ transition: all .5s; opacity: 1; }
@media (min-width: 768px) {
	#header > h1 > a:hover img	{ opacity: .5!important; }
}
@media (max-width: 767px) { 
	#header	{ height: 90px; }
	#header > h1	{ max-width: 160px; }
}

/* ------------ FOOTER ------------- */
#footer	{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0; background-color: #fff; margin: 0; }
#footer .wrapper	{ width: 100%; max-width: 300px; height: 200px; padding: 0 20px; display: -webkit-flex; display: flex; align-items: center; justify-content: center; }
@media (max-width: 767px) { 
	#footer .wrapper	{ height: 160px; }
}