@charset "UTF-8";

/* ------------------------------------------- initialize */
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, dialog, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

article, aside, dialog, figure, footer, header, hgroup, nav, section { display: block; }

ul li { list-style: none; }

input, select { vertical-align: middle; }

img { height: auto; width: 100%; }

/* ===============================================
# SNS顏色
=============================================== */
* { box-sizing: border-box; }

a { color: #000000; text-decoration: none; }

a:hover { opacity: .8; }

body { 
  font-size: 16px;
  line-height: 1.6em;
  font-weight: normal;
  color: #0a0a0a;
  font-family: 'Saira', 'Barlow', 'Noto Sans JP', sans-serif;
  position: relative;
  background: #fff;
}

:lang(en).saira-text {
  font-family: 'Saira', sans-serif;
}

:lang(en).barlow-text {
  font-family: 'Barlow', sans-serif;
}

:lang(zh-tw) {
  font-family: 'Saira', 'GenYoGothicTW','Noto Sans JP', sans-serif;
}

body .body-inner { overflow-x: hidden; }

/* ===============================================
# module
=============================================== */
.sp_only { display: none; }

@media screen and (max-width: 750px) { .sp_only { display: block; } }

.pc_only { display: block; }

@media screen and (max-width: 750px) { .pc_only { display: none; } }

.section-wrap { max-width: 1200px; width: 92%; margin: 50px auto; }

.section-wrap:not(:last-of-type) { margin-bottom: 10px; }

.sec-inner { max-width: 1160px; margin: 0 auto; width: 92%; }

.flex-box { display: flex; flex-wrap: wrap; }

.bold { font-weight: bold; }

.text-center { text-align: center; }

.text-left { text-align: left; }

.text-right { text-align: right; }

.txt { font-size: 20px; line-height: 1.6em; }

.txt_s { font-size: .8em; line-height: 1.6em; }

@media screen and (max-width: 768px) { .section-wrap:not(:last-of-type) { margin-bottom: 10px; } }

.header { position: fixed; background: transparent; width: 100%; z-index: 1000; }

@media screen and (max-width: 768px) { .header { background: none; top: 0; pointer-events: none; } }

.header__inner { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 101px; padding: 20px; background: #fff;}

.header__title { font-size: 20px; }

@media screen and (max-width: 768px) { .header__title { position: absolute; top: 20px; left: 20px; } }

.nav { margin-right: 2%; display: flex; align-items: center; float: inline-end; }

.nav__lists { display: flex; }

.nav__list { padding: 16px min(16px,0.8vw) 16px min(16px,0.8vw); }

.nav__list a { font-size: min(14px,1vw); font-weight: bold; letter-spacing: .7px; }

.nav__bg { display: none; transition: .2s all; }

.nav__trigger { display: none; transition: .2s all; pointer-events: all; }

@media screen and (max-width: 768px) {
  .nav__trigger { display: block; position: absolute; width: 43px; border-radius: 30px; padding: 7px 9px 10px; top: 20px; right: 20px; background: #fff; box-shadow: 0px 0px 10px #AB7BF733; }
  .nav__trigger span { display: inline-block; vertical-align: middle; position: relative; width: 100%; height: 2px; }
  .nav__trigger span::before { content: ""; display: block; width: 100%; height: 2px; position: absolute; transition: all 0.3s; margin-top: -8px; }
  .nav__trigger span::after { content: ""; display: block; width: 100%; height: 2px; position: absolute; transition: all 0.3s; margin-top: 8px; }

  .nav { margin-left: inherit; width: 100%; transform: translateY(-150%); pointer-events: all; }
  .nav__lists { display: block; width: 100%; margin-bottom: 30px; }
  .nav__list { text-align: center; }
  .nav__list a { font-size: 16px; }
  .nav__bg { display: block; opacity: 0; }
  .nav__active .nav { transform: translateY(40%); flex-direction: column-reverse; }
  .nav__active .nav__trigger span { background: none; }
  .nav__active .nav__trigger span::before { content: ""; display: block; width: 100%; height: 2px; position: absolute; transition: all 0.3s; margin-top: 0; transform: rotate(45deg); }
  .nav__active .nav__trigger span::after { content: ""; display: block; width: 100%; height: 2px; position: absolute; transition: all 0.3s; margin-top: 0; transform: rotate(-45deg); }
  .nav__active .nav__bg { width: 100%; height: 100vh; background: #fff; opacity: 1; position: absolute; top: 0; z-index: -1; } }

@media screen and (max-width: 1024px) {
  .header__inner { display: block; }
  .header__title { margin-bottom: 10px; } }

.footer { text-align: center; padding: 30px 0 100px; color: #fff; }