/* Imaginary Dynamics — site styles
   Hand-written reproduction of the 2017 design. Values mirror the old theme settings. */

@font-face {
  font-family: "ID Noto Sans";
  src: url("/assets/fonts/notosans-id.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: #6d6d6d;
  font-family: "ID Noto Sans", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 30px;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; vertical-align: middle; }
a { color: #000; text-decoration: none; transition: color .3s, background-color .3s, border-color .3s; }
a:hover { color: #d3d3d3; }
p { margin: 0 0 20px; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 20px 20px; padding: 0; }
[id] { scroll-margin-top: 80px; }

h1, h2, h3, h4, h5, h6 { margin: 0 0 20px; color: #2d2d2d; font-weight: 400; }
h1 { font-size: 40px; line-height: 45px; font-weight: 700; }
h2 { font-size: 25px; line-height: 32px; }
h3 { font-size: 21px; line-height: 30px; }
h4 { font-size: 18px; line-height: 24px; font-weight: 700; }
h5 { font-size: 16px; line-height: 25px; font-weight: 700; color: #999; }
h6 { font-size: 17px; line-height: 24px; text-transform: uppercase; color: #666; }
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: #222; }
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { color: #000; }
blockquote { margin: 0 0 20px; font-size: 20px; line-height: 33px; }
.hidden { display: none; }

/* ---------- layout ---------- */
.container { width: 100%; max-width: 1150px; margin: 0 auto; padding: 0 25px; }
.container--narrow { max-width: 990px; }
.row { display: flex; flex-wrap: wrap; margin: 0 -20px; }
.row > [class^="col-"] { padding: 0 20px; margin-bottom: 40px; min-width: 0; }
.col-3 { width: 25%; }
.col-4 { width: 33.333%; }
.col-6 { width: 50%; }
.col-8 { width: 66.667%; }
.col-12 { width: 100%; }

.sec { position: relative; background: #fff; }
.sec--gray { background: #f9f9f9; }
.sec--pad { padding: 80px 0; }

.gap-10 { height: 10px; } .gap-20 { height: 20px; } .gap-30 { height: 30px; }
.gap-40 { height: 40px; } .gap-50 { height: 50px; } .gap-60 { height: 60px; }
.gap-80 { height: 80px; } .gap-90 { height: 90px; }
.anchor { display: block; height: 0; }

/* ---------- type utilities (from the old page-builder heading settings) ---------- */
.tc { text-align: center; }
.label { font-family: Roboto, sans-serif; font-weight: 700; font-size: 16px; }
.display { font-family: Roboto, sans-serif; font-weight: 900; }
.fs-15 { font-size: 15px; } .fs-16 { font-size: 16px; } .fs-18 { font-size: 18px; }
.fs-24 { font-size: 24px; } .fs-26 { font-size: 26px; } .fs-28 { font-size: 28px; }
.fs-33 { font-size: 33px; } .fs-40 { font-size: 40px; } .fs-86 { font-size: 86px; }
.lh-11 { line-height: 1.1; } .lh-13 { line-height: 1.3; }
.lh-14 { line-height: 1.4; } .lh-15 { line-height: 1.5; }
.c-white { color: #fff; } .c-black { color: #000; } .c-gray { color: #636363; }

.text p { margin-bottom: 20px; }
.text p:last-child { margin-bottom: 0; }
.box { padding: 30px; background: #f9f9f9; }
.box .row > [class^="col-"]:last-child, .box .row > [class^="col-"] { margin-bottom: 0; }
.rule { border: 0; height: 1px; background: #e8e8e8; margin: 2px 0 25px; }
.rule--tight { margin: 10px 0 15px; }
.rule--double { height: 2px; }
.figure { margin: 0; text-align: center; }

/* icon links (replacing the old icon font) */
.link-arrow::before, .link-down::before {
  content: ""; display: inline-block; width: 7px; height: 7px; margin: 0 10px 0 2px;
  border-top: 2px solid currentColor; border-right: 2px solid currentColor;
  transform: rotate(45deg); vertical-align: 2px;
}
.link-down::before { transform: rotate(135deg); vertical-align: 4px; }
.link-ext::before {
  content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -1px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 4v2h2.6L4.3 10.3l1.4 1.4L10 7.4V10h2V4z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 0h12a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2zm4 4v2h2.6L4.3 10.3l1.4 1.4L10 7.4V10h2V4z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.scroll-down { display: inline-block; width: 30px; height: 30px; color: #0a0a0a; position: relative; }
.scroll-down::before {
  content: ""; position: absolute; left: 10px; top: 6px; width: 10px; height: 10px;
  border-right: 3px solid currentColor; border-bottom: 3px solid currentColor; transform: rotate(45deg);
}
.scroll-down:hover { color: #bcbcbc; }
.caret-down {
  display: inline-block; width: 0; height: 0; vertical-align: middle;
  border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 7px solid #0a0a0a;
}

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50; background: #fff;
  transition: box-shadow .15s;
}
.site-header.is-shrunk { box-shadow: 0 1px 3px rgba(0, 0, 0, .11); }
.header-inner { display: flex; align-items: center; justify-content: space-between; height: 100px; transition: height .15s; }
.site-header.is-shrunk .header-inner { height: 65px; }
.logo { display: block; line-height: 0; }
.logo img { width: 246px; max-width: 100%; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; }
.site-nav li { margin-left: 40px; }
.site-nav li:first-child { margin-left: 0; }
.site-nav a {
  font-family: Roboto, sans-serif; font-size: 13px; font-weight: 700; line-height: 1;
  text-transform: uppercase; color: #6d6d6d; padding: 0 1px;
}
.site-nav a:hover { color: #b2b2b2; }
.site-nav a[aria-current="page"] { color: #000; }
.menu-toggle { display: none; }

/* ---------- title bar ---------- */
.titlebar { background: #fff; }
.titlebar-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 15px; padding-bottom: 20px; }
.titlebar--medium .titlebar-inner { min-height: 195px; }
.titlebar--normal .titlebar-inner { min-height: 115px; }
.titlebar-heading { width: 50%; }
.titlebar h1 { margin: 0; color: #454545; font-size: 19px; line-height: 28px; font-weight: 700; }
.titlebar--medium h1 { font-size: 29px; line-height: 40px; }
.titlebar-sub { margin-top: 5px; color: #696969; font-size: 18px; line-height: 28px; }
.breadcrumbs { width: 50%; text-align: right; font-size: 12px; line-height: 18px; color: #999; align-self: flex-start; margin-top: auto; margin-bottom: auto; }
.breadcrumbs span { display: inline-block; padding: 0 2px; }
.breadcrumbs a { color: #666; }
.breadcrumbs a:hover { color: #444; }

/* ---------- hero ---------- */
.hero { background: #fff url("/assets/img/ID-MV3.jpg") center / cover no-repeat; }
.hero h1 { color: #2d2d2d; margin-bottom: 20px; }

/* ---------- CTA band ---------- */
.cta {
  background: linear-gradient(rgba(10, 10, 10, .2), rgba(10, 10, 10, .2)), url("/assets/img/ID-MV2.jpg") center / cover no-repeat;
  color: #fff;
}
.btn {
  display: inline-block; background: #ff675b; color: #fff; font-size: 14px; line-height: 24px;
  padding: 14px 20px; border: 0; border-radius: 0;
}
.btn:hover { background: #ff4334; color: #fff; }

/* ---------- post meta ---------- */
.post-meta { color: #aaa; }
.post-cats, .post-date { display: inline-block; position: relative; line-height: 21px; margin: 0 10px 3px 0; padding-right: 8px; }
.post-cats { font-size: 12px; font-weight: 500; text-transform: uppercase; color: #000; }
.post-cats a { color: #000; }
.post-cats a:hover { color: #333; }
.post-date { font-size: 14px; font-weight: 500; }
.post-meta > span:not(:last-child)::after {
  content: ""; position: absolute; right: -1px; top: 5px; width: 1px; height: 12px; background: #ccc;
}
.post-meta > span:last-child { margin-right: 0; padding-right: 0; }

/* home grid */
.post-grid { list-style: none; margin: 0 -20px; padding: 0; display: flex; flex-wrap: wrap; }
.post-card { width: 33.333%; padding: 25px 20px; margin-bottom: 40px; line-height: 23px; }
.post-card h3 { font-size: 18px; line-height: 25px; margin-bottom: 15px; }
.post-card .excerpt { margin-bottom: 10px; }

/* list pages (IDEAS / categories) */
.post-entry { margin-bottom: 70px; }
.post-entry .post-upper, .post-entry .excerpt, .entry-share { max-width: 940px; margin-left: auto; margin-right: auto; }
.post-upper { margin-bottom: 35px; }
.post-entry .post-upper { margin-bottom: 20px; }
.post-upper h1 { margin: 0 0 20px; }
.entry-share { margin-top: 40px; text-align: center; overflow: hidden; }
.entry-share .share-menu { display: inline-flex; gap: 4px; padding: 0 10px; position: relative; }
.entry-share .share-menu::before, .entry-share .share-menu::after {
  content: ""; position: absolute; top: 50%; width: 500px; height: 1px; background: #e5e5e5;
}
.entry-share .share-menu::before { right: 100%; }
.entry-share .share-menu::after { left: 100%; }
.entry-share .share-menu a {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  border-radius: 50%; border: 1px solid #d8d8d8; background: #fff; color: #696969;
}
.entry-share .share-menu a:hover { background: #555; border-color: #555; color: #fff; }
.share-menu svg { width: 15px; height: 15px; fill: currentColor; }

/* single post */
.post-page { padding: 80px 0 0; }
.post-single .post-upper, .post-single .entry, .post-single .related-posts, .post-single .share-box { max-width: 790px; margin-left: auto; margin-right: auto; }
.entry img { display: block; margin: 0 auto; }
.entry h2 { margin-top: 10px; }
.related-posts { margin-top: 50px; }
.title-underline span { display: inline-block; position: relative; padding-bottom: 15px; }
.title-underline span::after { content: ""; position: absolute; left: 0; bottom: 0; width: 30px; height: 1px; background: #454545; }
.related-posts ul { list-style: none; margin: 0; padding: 0; }
.related-posts li { padding: 7px 0; line-height: 1.4; }
.related-posts li a::before {
  content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 8px; vertical-align: 2px;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg);
}
.related-posts li span { color: #aaa; margin-left: 10px; }
.share-box {
  display: flex; align-items: center; justify-content: space-between; margin-top: 60px;
  padding: 15px 20px; border: 1px solid #e8e8e8; border-radius: 3px;
}
.share-label { font-size: 13px; line-height: 1; color: #2d2d2d; }
.share-box .share-menu { display: flex; }
.share-box .share-menu a { color: #696969; padding: 0 10px; display: inline-flex; }
.share-box .share-menu a:last-child { padding-right: 0; }
.share-box .share-menu a:hover { color: #666; }
.post-nav-sec { padding: 60px 0 80px; }
.post-nav { display: flex; }
.post-nav-prev, .post-nav-next { width: 50%; padding: 0 20px; }
.post-nav-next { text-align: right; }
.post-nav a { display: block; position: relative; color: #999; }
.post-nav-prev a { padding-left: 40px; }
.post-nav-next a { padding-right: 40px; }
.post-nav a::before {
  content: ""; position: absolute; top: 12px; width: 18px; height: 18px;
  border-top: 2px solid currentColor; border-left: 2px solid currentColor;
}
.post-nav-prev a::before { left: 8px; transform: rotate(-45deg); }
.post-nav-next a::before { right: 8px; transform: rotate(135deg); }
.post-nav h4 { margin: 0; color: #777; font-weight: 400; font-size: 18px; }
.post-nav p { margin: 0; font-size: 14px; line-height: 22px; }
.post-nav a:hover, .post-nav a:hover h4 { color: #222; }

/* ---------- contact form ---------- */
.contact-form .field { position: relative; margin-bottom: 40px; }
.contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea {
  display: block; width: 100%; margin: 0; padding: 14px 15px; border: 1px solid #e8e8e8; border-radius: 0;
  background: #fff; color: inherit; font: inherit; font-size: 13px; line-height: normal;
  -webkit-appearance: none; appearance: none; outline: none; transition: border-color .25s;
}
.contact-form textarea { min-height: 100px; resize: vertical; }
.contact-form input:focus, .contact-form textarea:focus { border-color: #696969; }
.contact-form .field--name input, .contact-form .field--email input, .contact-form .field--tel input { padding-left: 45px; }
.field--name::before, .field--email::before, .field--tel::before {
  content: ""; position: absolute; left: 15px; top: 16px; width: 16px; height: 16px; background: #ccc;
  -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat;
}
.field--name { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='4.5' r='3.5'/%3E%3Cpath d='M1 15c0-3.9 3.1-6 7-6s7 2.1 7 6z'/%3E%3C/svg%3E"); }
.field--email { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M0 3h16v10H0zm1.5 1.2v.3L8 9l6.5-4.5v-.3zM1.5 6.3v5.2h13V6.3L8 10.8z' fill-rule='evenodd'/%3E%3C/svg%3E"); }
.field--tel { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 1l2.3 3-1.3 1.8c.9 2 2.6 3.7 4.6 4.6L11 9.1l3 2.3-1.1 2.9c-.2.5-.8.8-1.3.6C6.8 13.5 2.5 9.2.9 4.4c-.2-.5.1-1.1.6-1.3z'/%3E%3C/svg%3E"); }
.btn-submit {
  display: inline-block; margin: 5px 2px; padding: 15px 35px 17px; border: 0; border-radius: 0; cursor: pointer;
  background: #000; color: #fff; font: inherit; font-size: 13px; line-height: 19px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 1px; -webkit-appearance: none; appearance: none;
}
.btn-submit:hover { background: #333; }
.btn-submit[disabled] { opacity: .6; cursor: default; }
.form-alert { margin-bottom: 20px; padding: 20px 30px; text-align: center; color: #fff; }
.form-alert--error { background: #e74c3c; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ---------- footer ---------- */
.footer-main { background: #f9f9f9; padding: 70px 0 40px; color: #515151; line-height: 24px; }
.footer-main > .container { margin-bottom: 40px; }
.footer-links { list-style: none; margin: 0 -20px; padding: 0; display: flex; flex-wrap: wrap; }
.footer-links li { width: 25%; padding: 0 20px; margin-bottom: 40px; text-align: center; font-weight: 700; }
.site-footer a { color: #0a0a0a; }
.site-footer a:hover { color: #7f7f7f; }
.copyright { margin: 0; }
.footer-bar { background: #1b1b1b; height: 60px; }

/* ---------- responsive ---------- */
@media (max-width: 1000px) {
  .hide-md { display: none; }
  .header-inner, .site-header.is-shrunk .header-inner { height: 80px; }
  .menu-toggle {
    display: block; position: relative; width: 28px; height: 28px; padding: 0; border: 0;
    background: transparent; cursor: pointer; color: #454545;
  }
  .menu-toggle span, .menu-toggle span::before, .menu-toggle span::after {
    content: ""; position: absolute; left: 7px; width: 14px; height: 2px; background: currentColor;
  }
  .menu-toggle span { top: 13px; }
  .menu-toggle span::before { top: -5px; left: 0; }
  .menu-toggle span::after { top: 5px; left: 0; }
  .site-nav {
    position: fixed; top: 0; right: 0; bottom: 0; width: 300px; max-width: 85vw; z-index: 60;
    background: #222; padding: 60px 30px 20px; overflow-y: auto;
    transform: translateX(100%); transition: transform .3s; visibility: hidden;
  }
  body.nav-open .site-nav { transform: none; visibility: visible; }
  body.nav-open::after { content: ""; position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, .3); }
  body.nav-open .site-header { z-index: 70; }
  .site-nav ul { display: block; }
  .site-nav li { margin: 0; }
  .site-nav a {
    display: block; height: 40px; line-height: 40px; padding: 0 5px;
    font-size: 12px; font-weight: 700; letter-spacing: 1px; color: #aaa;
  }
  .site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; }
  .nav-close {
    position: absolute; top: 15px; right: 20px; border: 0; background: none; cursor: pointer;
    color: #aaa; font: 700 16px/1 Roboto, sans-serif; padding: 8px;
  }
}
@media (min-width: 1001px) { .nav-close { display: none; } }

@media (max-width: 800px) {
  .container { max-width: 600px; }
  .row, .post-grid, .footer-links { margin-left: 0; margin-right: 0; }
  .row > [class^="col-"], .post-card, .footer-links li { width: 100%; padding-left: 0; padding-right: 0; }
  .row > .col-3:empty { display: none; }
  .titlebar-inner { display: block; }
  .titlebar-heading, .breadcrumbs { width: 100%; text-align: left; }
  .breadcrumbs { margin-top: 10px; }
  .titlebar--medium .titlebar-inner { min-height: 0; padding-top: 40px; padding-bottom: 40px; }
  .titlebar--normal .titlebar-inner { min-height: 0; padding-top: 30px; padding-bottom: 30px; }
  .post-nav { display: block; }
  .post-nav-prev, .post-nav-next { width: 100%; padding: 0; margin-bottom: 30px; }
}

@media (max-width: 500px) {
  .container { padding: 0 16px; }
  .fs-33 { font-size: 26px; }
  .fs-40, h1, .post-upper h1 { font-size: 30px; line-height: 1.4; }
  .fs-86 { font-size: 72px; }
  .titlebar--medium h1 { font-size: 24px; line-height: 34px; }
  .logo img { width: 200px; }
  .box { padding: 20px; }
  .share-box { flex-wrap: wrap; gap: 10px; }
}