@charset "UTF-8";
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, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

body { line-height: 1; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

nav ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

a { margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

/* change colours to suit your needs */
ins { background-color: #ff9; color: #000; text-decoration: none; }

/* change colours to suit your needs */
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold; }

del { text-decoration: line-through; }

abbr[title], dfn[title] { border-bottom: 1px dotted; cursor: help; }

table { border-collapse: collapse; border-spacing: 0; }

/* change border colour to suit your needs */
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0; }

input, button, textarea, select { margin: 0; padding: 0; background: none; border: none; border-radius: 0; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; }

/* --------------------------------------------------
Common
-------------------------------------------------- */
html { height: 100%; font-size: 10px; }

body { -webkit-text-size-adjust: none; -webkit-font-smoothing: antialiased; height: 100%; font-family: "ヒラギノ明朝 ProN", "Hiragino Mincho ProN", "YuMincho", "Yu Mincho", "游明朝体", serif; }

input, button, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; position: relative; }

select::-ms-expand { display: none; }

img, video { vertical-align: bottom; max-width: 100%; height: auto; }

img[src$=".svg"] { width: 100%; }

li { list-style: none; }

a { color: inherit; text-decoration: none; }

main { display: block; }

h1, h2, h3, h4, h5 { font-weight: normal; }

@media screen and (max-width: 767px) { .pc { display: none !important; } }
@media screen and (min-width: 768px) { .sp { display: none !important; } }
/* --------------------------------------------------
Contents
-------------------------------------------------- */
body #wrapper { height: 100%; }
body #wrapper header { position: fixed; top: 0; left: 0; right: 0; padding: 12px 17px; display: flex; justify-content: space-between; align-items: center; z-index: 9; }
body #wrapper header h1 { width: 112px; }
body #wrapper header #menu-open { width: 24px; }
body #wrapper header nav { position: fixed; top: 0; right: 0; text-align: right; z-index: 9; pointer-events: none; }
body #wrapper header nav ul li { font-size: 2.6rem; margin: 0 0 2px; transform: translate(101%, 0); transition: transform .5s ease 0s; }
body #wrapper header nav ul li a { display: inline-block; padding: 12px; background: #000; color: #fff; }
body #wrapper header nav ul li#menu-close img { width: 26px; }
body #wrapper header nav ul li:nth-child(2) { transition-delay: .2s; }
body #wrapper header nav ul li:nth-child(3) { transition-delay: .4s; }
body #wrapper header nav ul li:nth-child(4) { transition-delay: .6s; }
body #wrapper header nav ul li:nth-child(5) { transition-delay: .8s; }
body #wrapper header nav ul li:nth-child(6) { transition-delay: 1s; }
body #wrapper #top { height: 100%; display: flex; justify-content: center; align-items: center; }
body #wrapper #top #top_svg { width: 43.87%; }
body #wrapper #top #top_svg .svg_wrapper { position: relative; padding: 143.77% 0 0; }
body #wrapper #top #top_svg .svg_wrapper svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body #wrapper #what_we_do { padding: 50px 20px 0; margin: 0 0 110px; }
body #wrapper #what_we_do > section h2 { position: relative; overflow: hidden; }
body #wrapper #what_we_do > section h2::before, body #wrapper #what_we_do > section h2::after { display: block; content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: #fff; }
body #wrapper #what_we_do > section h2::after { top: 50%; }
body #wrapper #what_we_do > section p { font-size: 1.4rem; line-height: 2.21; font-weight: 600; width: calc(100% + 22px); overflow: hidden; }
body #wrapper #what_we_do > section p span { display: block; position: relative; }
body #wrapper #what_we_do > section p span::after { display: block; content: ""; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #fff; }
body #wrapper #what_we_do > section .imagearea { opacity: 0; }
body #wrapper #what_we_do > section .imagearea .svg_wrapper { position: relative; }
body #wrapper #what_we_do > section .imagearea .svg_wrapper svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body #wrapper #what_we_do > section.is-show .imagearea { opacity: 1; }
body #wrapper #what_we_do > section.is-show h2::before, body #wrapper #what_we_do > section.is-show h2::after { transform: translate(101%, 0); transition: transform .4s linear .5s; }
body #wrapper #what_we_do > section.is-show h2::after { transition-delay: .7s; }
body #wrapper #what_we_do > section.is-show p span::after { transform: translate(101%, 0); transition: transform .4s linear 1s; }
body #wrapper #what_we_do > section.is-show p span:nth-child(2)::after { transition-delay: 1.2s; }
body #wrapper #what_we_do > section.is-show p span:nth-child(3)::after { transition-delay: 1.4s; }
body #wrapper #what_we_do > section.is-show p span:nth-child(4)::after { transition-delay: 1.6s; }
body #wrapper #what_we_do > section.is-show p span:nth-child(5)::after { transition-delay: 1.8s; }
body #wrapper #what_we_do > section.is-show p span:nth-child(6)::after { transition-delay: 2s; }
body #wrapper #what_we_do > section.is-show p span:nth-child(7)::after { transition-delay: 2.2s; }
body #wrapper #what_we_do > section#we_hear { margin: 0 0 85px; }
body #wrapper #what_we_do > section#we_hear .imagearea { width: 116px; margin: 0 auto 50px; }
body #wrapper #what_we_do > section#we_hear .imagearea .svg_wrapper { padding: 171.12% 0 0; }
body #wrapper #what_we_do > section#we_hear h2 { width: 177px; margin: 0 0 20px; }
body #wrapper #what_we_do > section#we_see { margin: 0 0 100px; }
body #wrapper #what_we_do > section#we_see .imagearea { width: 261px; margin: 0 auto 70px; }
body #wrapper #what_we_do > section#we_see .imagearea .svg_wrapper { padding: 47.44% 0 0; }
body #wrapper #what_we_do > section#we_see h2 { width: 125px; margin: 0 0 20px; }
body #wrapper #what_we_do > section#we_do h2 { margin: 0 0 90px; opacity: 0; }
body #wrapper #what_we_do > section#we_do h2 .svg_wrapper { position: relative; padding: 24.63% 0 0; }
body #wrapper #what_we_do > section#we_do h2 .svg_wrapper svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
body #wrapper #what_we_do > section#we_do h2::before, body #wrapper #what_we_do > section#we_do h2::after { display: none; }
body #wrapper #what_we_do > section#we_do.is-show h2 { opacity: 1; }
body #wrapper #works, body #wrapper #member, body #wrapper #contact { margin: 0 0 140px; padding: 50px 0 0; }
body #wrapper #works h2, body #wrapper #member h2, body #wrapper #contact h2 { font-size: 1.8rem; margin: 0 0 50px; text-align: center; opacity: 0; }
body #wrapper #works h2.is-show, body #wrapper #member h2.is-show, body #wrapper #contact h2.is-show { opacity: 1; transition: opacity 1s ease 0s; }
body #wrapper #works .post_wrapper .post_single .imagearea { margin: 0 0 20px; opacity: 0; transform: translate(0, 20px); }
body #wrapper #works .post_wrapper .post_single .imagearea img { width: 100%; }
body #wrapper #works .post_wrapper .post_single .textarea { padding: 0 30px; opacity: 0; }
body #wrapper #works .post_wrapper .post_single .textarea h3 { font-size: 1.5rem; line-height: 1.6; font-weight: bold; }
body #wrapper #works .post_wrapper .post_single .textarea .job { font-size: 1.5rem; line-height: 1.6; }
body #wrapper #works .post_wrapper .post_single + .post_single { margin: 80px 0 0; }
body #wrapper #works .post_wrapper .post_single.is-show .imagearea { opacity: 1; transform: none; transition: all 1s ease 0s; }
body #wrapper #works .post_wrapper .post_single.is-show .textarea { opacity: 1; transition: opacity 1s ease .2s; }
body #wrapper #member .profile_wrapper .profile_single .imagearea { margin: 0 0 40px; opacity: 0; transform: translate(0, 20px); }
body #wrapper #member .profile_wrapper .profile_single .imagearea img { width: 100%; }
body #wrapper #member .profile_wrapper .profile_single .textarea { width: 270px; margin: 0 auto; opacity: 0; }
body #wrapper #member .profile_wrapper .profile_single .textarea h3 { font-size: 4rem; margin: 0 0 20px; }
body #wrapper #member .profile_wrapper .profile_single .textarea .name_en { font-size: 1.5rem; letter-spacing: .02em; margin: 0 0 15px; }
body #wrapper #member .profile_wrapper .profile_single .textarea .history { font-size: 1.4rem; line-height: 1.93; }
body #wrapper #member .profile_wrapper .profile_single + .profile_single { margin: 60px 0 0; }
body #wrapper #member .profile_wrapper .profile_single.is-show .imagearea { opacity: 1; transform: none; transition: all 1s ease 0s; }
body #wrapper #member .profile_wrapper .profile_single.is-show .textarea { opacity: 1; transition: opacity 1s ease .2s; }
body #wrapper #contact { margin: 0; }
body #wrapper #contact dl { width: 250px; margin: 0 auto; font-size: 1.5rem; line-height: 2; display: flex; flex-wrap: wrap; margin: 0 auto 30px; opacity: 0; }
body #wrapper #contact dl dt { width: 75px; }
body #wrapper #contact dl dd { width: 175px; }
body #wrapper #contact .map_wrapper { opacity: 0; }
body #wrapper #contact .map_wrapper #googlemap { padding: 48% 0 0; position: relative; }
body #wrapper #contact .map_wrapper #googlemap > div { position: absolute; top: 0; left: 0; width: 100% !important; height: 100% !important; }
body #wrapper #contact .mail { padding: 40px 0; text-align: center; font-size: 1.5rem; opacity: 0; }
body #wrapper #contact .mail i { display: inline-block; width: 21px; margin: 0 10px 0 0; }
body #wrapper #contact.is-show dl { opacity: 1; transition: opacity 1s ease 0s; }
body #wrapper #contact.is-show .map_wrapper { opacity: 1; transition: opacity 1s ease .2s; }
body #wrapper #contact.is-show .mail { opacity: 1; transition: opacity 1s ease .4s; }
body #wrapper footer { text-align: center; font-size: .9rem; padding: 0 0 10px; }
body #wrapper.menu-open header nav { pointer-events: auto; }
body #wrapper.menu-open header nav ul li { transform: none; }
body:not(.is-loaded) * { transition: none; }
body.is-loaded { opacity: 1 !important; transition: opacity .5s ease 0s; }

@media screen and (min-width: 768px) { body #wrapper a { transition: opacity .4s ease 0s; }
  body #wrapper a:hover { opacity: .5; }
  body #wrapper header { padding: 60px 71px; display: block; }
  body #wrapper header h1 { width: 159px; margin: 0 0 20px auto; }
  body #wrapper header #menu-open { width: 34px; margin: 0 0 0 auto; }
  body #wrapper header nav { position: absolute; top: 89px; right: 71px; overflow: hidden; }
  body #wrapper header nav ul li#menu-close a:hover { opacity: 1; }
  body #wrapper #top #top_svg { width: 18.91%; }
  body #wrapper #what_we_do { padding: 71px 0 0; width: 701px; max-width: 96%; margin: 0 auto 306px; }
  body #wrapper #what_we_do > section p { font-size: 1.4rem; line-height: 2.25; width: 100%; }
  body #wrapper #what_we_do > section#we_hear { margin: 0; }
  body #wrapper #what_we_do > section#we_hear .imagearea { width: 129px; margin: 0 auto 0 203px; }
  body #wrapper #what_we_do > section#we_hear h2 { width: 182px; margin: -72px 0 18px; }
  body #wrapper #what_we_do > section#we_see { margin: -189px 0 85px auto; text-align: right; }
  body #wrapper #what_we_do > section#we_see .inner { display: inline-block; text-align: left; }
  body #wrapper #what_we_do > section#we_see .imagearea { width: 292px; margin: 0 0 0 auto; }
  body #wrapper #what_we_do > section#we_see .imagearea .svg_wrapper { top: -20px; right: -10px; }
  body #wrapper #what_we_do > section#we_see h2 { width: 129px; margin: -18px 0 18px; }
  body #wrapper #what_we_do > section#we_do { width: 526px; margin: 0 auto; position: relative; padding: 0 0 0 210px; }
  body #wrapper #what_we_do > section#we_do h2 { margin: 0; width: 173px; position: absolute; top: -136px; left: 0; }
  body #wrapper #what_we_do > section#we_do h2 .svg_wrapper { padding: 121.28% 0 0; }
  body #wrapper #works, body #wrapper #member, body #wrapper #contact { margin: 0 0 306px; padding: 71px 0 0; }
  body #wrapper #works h2, body #wrapper #member h2, body #wrapper #contact h2 { font-size: 3.6rem; margin: 0 0 128px; }
  body #wrapper #works .post_wrapper { width: 868px; max-width: 96%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
  body #wrapper #works .post_wrapper .post_single { width: 45.9%; margin: 0 0 142px; }
  body #wrapper #works .post_wrapper .post_single .imagearea { margin: 0 0 7px; }
  body #wrapper #works .post_wrapper .post_single .textarea { padding: 0; }
  body #wrapper #works .post_wrapper .post_single .textarea h3 { font-size: 1.7rem; line-height: 1.5; }
  body #wrapper #works .post_wrapper .post_single .textarea .job { font-size: 1.7rem; line-height: 1.5; }
  body #wrapper #works .post_wrapper .post_single + .post_single { margin: 0; }
  body #wrapper #works .post_wrapper .post_single:nth-child(3), body #wrapper #works .post_wrapper .post_single:nth-child(4) { margin: 0; }
  body #wrapper #member .profile_wrapper { width: 868px; max-width: 96%; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; }
  body #wrapper #member .profile_wrapper .profile_single { width: 45.9%; }
  body #wrapper #member .profile_wrapper .profile_single .imagearea { margin: 0 0 25px; }
  body #wrapper #member .profile_wrapper .profile_single .textarea { width: 100%; }
  body #wrapper #member .profile_wrapper .profile_single .textarea h3 { font-size: 3.3rem; letter-spacing: .02em; margin: 0 0 28px; }
  body #wrapper #member .profile_wrapper .profile_single .textarea .name_en { font-size: 2.1rem; margin: 0 0 25px; }
  body #wrapper #member .profile_wrapper .profile_single .textarea .history { font-size: 1.4rem; line-height: 2; }
  body #wrapper #member .profile_wrapper .profile_single + .profile_single { margin: 0; }
  body #wrapper #contact { width: 854px; max-width: 96%; margin: 0 auto; }
  body #wrapper #contact .flex { display: flex; justify-content: space-between; flex-wrap: wrap; }
  body #wrapper #contact dl { width: 320px; margin: 0; font-size: 1.7rem; line-height: 2.33; margin: 0; }
  body #wrapper #contact dl dt { width: 100px; }
  body #wrapper #contact dl dd { width: 210px; }
  body #wrapper #contact .map_wrapper { flex: 1; max-width: 396px; }
  body #wrapper #contact .map_wrapper #googlemap { padding: 0; height: 274px; }
  body #wrapper #contact .mail { width: 100%; padding: 92px 0 185px; font-size: 2.1rem; }
  body #wrapper #contact .mail i { width: 39px; margin: 0 18px 0 0; }
  body #wrapper footer { font-size: 1.3rem; padding: 0 0 36px; } }