@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;700&display=swap");
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, 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; }

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; }

/* center layout */
*, *:before, *:after { box-sizing: border-box; }

/* img */
body img { line-height: 0 !important; vertical-align: bottom; }

/* @ media screen */
@media only screen and (max-width: 767px) { body > div { min-width: 320px; }
  body > div .pc { display: none !important; } }
@media only screen and (min-width: 768px), print { body > div .sp { display: none !important; } }

/* text */
body { color: #444; }

body * { font-family: 'Poppins', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', 'Meiryo', 'メイリオ', 'Osaka', 'MS PGothic', 'arial', 'helvetica', 'sans-serif' !important; font-feature-settings: "palt"; letter-spacing: 1px; }

/* h2 ~ h4 :ttl */
h2, h3, h4 { color: #444; font-weight: bold; line-height: 1em !important; }

a { color: #0a7fd0; text-decoration: none; }
a:hover, a:active, a:focus { color: rgba(10, 127, 208, 0.8); }

/* size */
@media only screen and (max-width: 767px) { body * { font-size: 16px; font-size: 1rem; line-height: 1.6rem !important; }
  body * h2 { font-size: 24px; font-size: 1.5rem; line-height: 1.6rem !important; }
  body * h3 { font-size: 20px; font-size: 1.25rem; line-height: 1.6rem !important; }
  body * h4 { font-size: 15px; font-size: 0.9375rem; line-height: 1.6rem !important; }
  body * .note { font-size: 14px; font-size: 0.875rem; line-height: 1.6rem !important; display: block; }
  body * .note * { font-size: 14px; font-size: 0.875rem; line-height: 1.6rem !important; } }
@media only screen and (min-width: 768px) and (max-width: 1023px), print { body * { font-size: 14px; font-size: 0.875rem; line-height: 1.6rem !important; }
  body * h2 { font-size: 33px; font-size: 2.0625rem; line-height: 1.6rem !important; }
  body * h3 { font-size: 22px; font-size: 1.375rem; line-height: 1.6rem !important; }
  body * h4 { font-size: 17px; font-size: 1.0625rem; line-height: 1.6rem !important; }
  body * .note { font-size: 12px; font-size: 0.75rem; line-height: 1.6rem !important; display: block; }
  body * .note * { font-size: 12px; font-size: 0.75rem; line-height: 1.6rem !important; } }
@media only screen and (min-width: 1024px) { body * { font-size: 16px; font-size: 1rem; line-height: 1.6rem !important; }
  body * h2 { font-size: 44px; font-size: 2.75rem; line-height: 1.6rem !important; }
  body * h3 { font-size: 24px; font-size: 1.5rem; line-height: 1.6rem !important; }
  body * h4 { font-size: 20px; font-size: 1.25rem; line-height: 1.6rem !important; }
  body * .note { font-size: 13px; font-size: 0.8125rem; line-height: 1.6rem !important; display: block; }
  body * .note * { font-size: 13px; font-size: 0.8125rem; line-height: 1.6rem !important; } }

/* footnote */
.footnote { font-size: 0.7em; position: relative; bottom: 0.55em; }

/* strong{ display: inline-block; box-sizing: border-box; font-weight: bold; line-height: 0em ; border-bottom: 4px #fcc solid; margin-bottom: 0px; text-indent: 0;
} */
.sns { line-height: 1.0em !important; }

.fb_iframe_widget { line-height: 1.0em !important; }

.fb_iframe_widget > span { vertical-align: baseline; }

/* parts: Btn */
a[class$="btn"], p[class$="btn"] { display: block; padding: 0 2em; background: #ff784e; color: #fff !important; }
a[class$="btn"]:hover, p[class$="btn"]:hover { background-color: #f85; }

a.txt { color: #ff784e !important; }
a.txt:hover { color: #f85; }

a[class$="btn"], p[class$="btn"], a.txt { overflow: hidden; text-decoration: none; text-align: center; }
a[class$="btn"] > span, p[class$="btn"] > span, a.txt > span { display: inline-block; }

a.btn, p.btn, a.txt { border-radius: 1.5rem; }
a.btn span, p.btn span, a.txt span { padding: .7em 0; }

a.l_btn, p.l_btn { border-radius: 1.7rem; width: 70%; min-width: 280px; max-width: 480px; }
a.l_btn *, p.l_btn * { padding: 1rem 0; font-size: 1.2rem; }

a.s_btn, p.s_btn { padding: 0 1em; border-radius: 1rem; }
a.s_btn span, p.s_btn span { padding: .2rem 0; }

/*bg-col---------------*/
#present { background-color: #323882; }

#howto { background-color: #0a7fd0; }

#bs-guide { background-color: #f4a355; }

#download { background-color: #ff784e; }

#organizer { background-color: #ddd; }
#organizer h2 { color: #444; }

section em { color: #ff784e; font-weight: bold; white-space: nowrap; }
section em:before { content: "「"; }
section em:after { content: "」"; }
section figure, section picture { display: block; line-height: 0 !important; }

.clm2, .clm3 { display: flex; flex-wrap: wrap; }

@media only screen and (min-width: 768px), print { section .clm2 { justify-content: space-between; }
  section .clm3 { justify-content: left; align-items: stretch; }
  section .clm3 > div { width: 32%; margin-right: 2%; }
  section .clm3 > div:nth-of-type(3n) { margin-right: 0; } }
@media only screen and (max-width: 767px) { section .clm3, section .clm2 { flex-direction: column; align-items: flex-start; }
  section .clm3 > *:nth-of-type(n+2), section .clm2 > *:nth-of-type(n+2) { margin-top: 1rem; } }

header, nav, footer { text-align: left; }

section { padding: 5rem 0; min-width: 320px; }
section > * { display: block; width: 94%; margin-left: auto; margin-right: auto; max-width: 960px; }
section h2 { padding-bottom: 1.5em; color: #fff; font-weight: bold; }
section .box { background-color: #fff; padding: 2rem; }
section .box > * + * { margin-top: 1rem; }
@media only screen and (max-width: 767px) { section .box { padding: 1.6rem 1rem; } }

header { display: none; position: fixed; top: 0; left: 0; height: 64px; width: 100%; padding: 13px 0; background-color: #fff; box-shadow: 0 -4px 2px 4px #666; z-index: 10; }
header div { width: 94%; padding: 0; margin: 0 auto 0; display: flex; justify-content: space-between; align-items: center; }
@media only screen and (max-width: 767px) { header div { padding-right: 3%; } }

.check { display: none; }

#drawer-menu { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; transition: all .5s; display: none; opacity: 0; z-index: 11; overflow-y: scroll; }

#wrap { width: 100%; padding: 0; margin: 0; transition: .5s; transform: none; z-index: 1; }

.check:checked ~ #drawer-menu { display: block; transition: .5s; opacity: 1; z-index: 120; }

#drawer-menu nav { position: relative; }
#drawer-menu nav a, #drawer-menu nav label { color: #323882; }
#drawer-menu nav a:hover, #drawer-menu nav label:hover { color: #323882; }
#drawer-menu .close { position: absolute; }
#drawer-menu .links { text-align: center; }
#drawer-menu .links ul { display: flex; flex-direction: row; flex-wrap: wrap; }
@media only screen and (min-width: 768px), print { #drawer-menu nav { padding-right: 3%; padding-left: 3%; background-color: #fff; }
  #drawer-menu .close { position: absolute; height: 1.6em; top: 0; bottom: 0; right: 3%; margin: auto 0; }
  #drawer-menu .links ul { margin: 0 auto 0; padding-top: 13px; align-items: flex-end; padding-right: 3em; height: 64px; padding-bottom: 1em; }
  #drawer-menu .links li + li { margin-left: 1.4em; }
  #drawer-menu .links * { font-size: small; } }
@media only screen and (max-width: 767px) { #drawer-menu { background: rgba(255, 255, 255, 0.95); }
  #drawer-menu * { font-size: large; }
  #drawer-menu nav { width: 100%; height: 100vh; padding: 0 20%; }
  #drawer-menu .close { position: absolute; top: 1.2rem; right: 6%; }
  #drawer-menu .links ul { height: 100%; flex-direction: column; align-items: stretch; justify-content: center; }
  #drawer-menu .links li { border-bottom: 1px dotted #323882; }
  #drawer-menu .links li img { vertical-align: middle !important; }
  #drawer-menu .links li:last-child { border: none; }
  #drawer-menu .links li a { padding: 1.5rem 0; display: block; } }

footer p { width: 94%; max-width: 960px; margin: 0 auto 0; padding: 24px 0; }
footer p a { color: #444 !important; font-size: small; }
footer p a:hover { color: #666 !important; }