@charset "UTF-8";
/* -----------------------------------------------
 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, tt, var,
b, u, i, center,
dl, dt, dd, 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,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline}
html { line-height: 1}
a { text-decoration: none}
ol, ul { list-style: none}
table {  border-collapse: collapse; border-spacing: 0}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle}
q, blockquote { quotes: none}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none}
a img { border: none}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {display: block}
/* -----------------------------------------------
 BASE
----------------------------------------------- */

@font-face {
	font-family: "Noto Sans JP";
	src: url("../font/NotoSansJP-Regular-min.ttf");
  font-weight: normal;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url("../font/NotoSansJP-Medium-min.ttf");
  font-weight: 500;
  font-display: swap;
}
@font-face {
	font-family: "Noto Sans JP";
	src: url("../font/NotoSansJP-Bold-min.ttf");
  font-weight: bold;
  font-display: swap;
}
*,
*:before,
*:after { box-sizing: border-box}
body * { max-height: 99999em}
img { display: inline-block; max-width: 100%; height: auto;}
input,label,select,button,textarea { margin: 0; border: 0; padding: 0; display: inline-block; vertical-align: middle; white-space: normal; background: none; font: inherit; line-height: 1; -webkit-appearance: none}
input:focus, button:focus, select:focus { outline: 0}
input[type=search] { -webkit-appearance: textfield}
::-webkit-search-decoration { display: none}
textarea { overflow: auto; white-space: pre-line}
button:hover, label:hover { cursor: pointer}
html { font-size: 62.5%;  scroll-behavior: smooth; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch}
body { color: #333; font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; -webkit-text-size-adjust: none; -moz-text-size-adjust: none; -ms-text-size-adjust: none}
p { line-height: 2}
img { max-width: 100%; height: auto}
sup { margin-right: 5px; font-size: 10px;}
/* -----------------------------------------------
 COMMON STYLE
----------------------------------------------- */
.container { min-width: 320px; margin: auto; overflow: hidden;}
.flex-start { display: flex; justify-content: flex-start}
.flex-between { display: flex; justify-content: space-between}
.flex-center { display: flex; justify-content: center}
.flex-between-center { display: flex; justify-content: space-between; align-items: center}
.flex-center-center { display: flex; justify-content: center; align-items: center}
.flex-end-center { display: flex; justify-content: flex-end; align-items: center}
.flex-wrap { flex-wrap: wrap}
.items-center { align-items: center}
.direction-row-reverse { flex-direction: row-reverse}
.highlight01 { background:linear-gradient(transparent 60%, #f8ef1a 60%)}
.highlight02 { padding-bottom: 2px; border-bottom: 2.5px solid #f8ef1a}
.text-highlight01 { color: #1a86d1}
.font-bold { font-weight: bold}
.text-center { text-align: center}
.text-left { text-align: left}
.note { font-size: 1.2rem; line-height: 1.8}
@media screen and (max-width:767px) {
  .sp-hidden { display: none}
  .pc-hidden { display: inline-block}
}
@media screen and (min-width:768px) {
  .sp-hidden { display: inline-block}
  .pc-hidden { display: none}
}
/*--------------------------------------------------------------------------
 PAGETOP
--------------------------------------------------------------------------*/
#pagetop { position: fixed; right: 10px; bottom: 10px; width: 60px; z-index: 2}
@media screen and (min-width:769px) {
 #pagetop { right: 30px; bottom: 30px; width: 70px}
}