:root { --main-green: #009e60; --dark-green: #006b3f; --light-green: #e6f4ec; } @charset "UTF-8"; /* CSS Document */ /* ----------------------------------------------------- Reset ----------------------------------------------------- */ html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, 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-size: 100%; font: inherit; vertical-align: baseline; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } table { border-collapse: collapse; border-spacing: 0; } * { margin: 0; padding: 0; } img { vertical-align: bottom; } @font-face { font-family: "SourceHanSans"; font-display: auto; src:local('SourceHanSansJP-light'), url('../font/SourceHanSansJP-light.woff') format('woff'); font-weight: 300; } @font-face { font-family: "SourceHanSans"; font-display: auto; src:local('SourceHanSansJP-Normal'), url('../font/SourceHanSansJP-Normal.woff') format('woff'); font-weight: 400; } @font-face { font-family: "SourceHanSans"; font-display: auto; src:local('SourceHanSansJP-Regular'), url('../font/SourceHanSansJP-Regular.woff') format('woff'); font-weight: 500; } @font-face { font-family: "SourceHanSans"; font-display: auto; src:local('SourceHanSansJP-Medium'), url('../font/SourceHanSansJP-Medium.woff') format('woff'); font-weight: 600; } @font-face { font-family: "SourceHanSans"; font-display: auto; src:local('SourceHanSansJP-Bold'), url('../font/SourceHanSansJP-Bold.woff') format('woff'); font-weight: 700; } html { font-size: 100%; } body { color: #000; font-family: 'SourceHanSans', sans-serif; font-weight: 400; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; text-align: justify; text-justify: inter-ideograph; } a { color: #000; text-decoration: none; } #Container { position: relative; overflow: hidden; } /* ----------------------------------------------------- Header ----------------------------------------------------- */ header { background: #006b3f; position: absolute; width: 100%; } header .inner { max-width: 1280px; width: 100%; margin: auto; padding: 0 0 0 35px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: stretch; } header h1 { color: #FFF; font-size: 0.750em; font-size: 400; padding-left: 50px; align-self: center; } header h1 strong { font-size: 1.750rem; font-weight: 600; display: inline-block; margin-top: 7px; } header h1 strong::before { content: ""; display: inline-block; left: 0; width: 40px; height: 19px; background: url(../images/logo.png) no-repeat; background-size: 100% auto; margin-left: -50px; margin-right: 10px; } header ul { display: flex; justify-content: flex-end; align-items: stretch; height: 100%; } header ul li a { color: #FFF; display: block; height: 100%; padding: 15px 20px; box-sizing: border-box; text-align: center; transition: all .2s; } header ul li a svg { fill: #FFF; height: 18px; margin-bottom: 5px; } header ul li a::after { content: ""; display: block; margin-top: 5px; color: var(--main-green); font-size: 0.625em; } header ul li a:hover { background: #004d2e; color: #FFF; transition: all .5s; } header ul li a:hover svg { fill: #000; } header ul li a:hover::after { color: #FFF; } header ul li.home a svg { height: 16px; margin-bottom: 6px; } header ul li.home a::after { content: "HOME"; } header ul li.service a svg { height: 14px; margin-top: 2px; margin-bottom: 7px; } header ul li.service a::after { content: "SERVICE"; } header ul li.company a svg { height: 18px; } header ul li.company a::after { content: "COMPANY"; } header ul li.history a svg { height: 16px; margin-bottom: 7px; } header ul li.history a::after { content: "HISTORY"; } header ul li.access a svg { } header ul li.access a::after { content: "ACCESS"; } header ul li.contact a { background: #009e60; color: #FFF; } header ul li.contact a svg { fill: #000; } header ul li.contact a::after { content: "CONTACT"; color: #FFF; } header ul li.contact a:hover { background: #004d2e; color: #FFF; } header ul li.contact a:hover svg { fill: #FFF; } header ul li.contact a:hover::after { color: #009e60; } header #Menu { display: none; } header #Menu span { display: inline-block; transition: all .4s; box-sizing: border-box; } header #Menu { position: relative; } header #Menu span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; width: 24px; height: 2px; background-color: #000; border-radius: 4px; } header #Menu span:nth-of-type(1) { top: 0; } header #Menu span:nth-of-type(2) { top: 15px; } header #Menu span:nth-of-type(3) { bottom: 15px; } header #Menu span:nth-of-type(1) { transition: all .25s .25s; opacity: 1; } header #Menu span:nth-of-type(2) { animation: menu-bar01 .75s forwards; } header #Menu span:nth-of-type(3) { animation: menu-bar02 .75s forwards; } header.open #Menu span:nth-of-type(1) { opacity: 0; } header.open #Menu span:nth-of-type(2) { animation: active-menu-bar01 .75s forwards; } header.open #Menu span:nth-of-type(3) { animation: active-menu-bar03 .75s forwards; } header.open #Menu { background: #000; } @keyframes menu-bar01 { 0% { top: 0; transform: rotate(45deg); background-color: var(--main-green); } 50% { top: 0; transform: rotate(0); } 100% { top: 15px; transform: rotate(0); } } @keyframes menu-bar02 { 0% { bottom: 0; transform: rotate(-45deg); background-color: var(--main-green); } 50% { bottom: 0; rotate(0); } 100% { bottom: 15px; rotate(0); } } @keyframes active-menu-bar01 { 0% { top: 15px; transform: rotate(0); } 50% { top: 0; transform: rotate(0); } 100% { top: 0; transform: rotate(45deg); background-color: var(--main-green); } } @keyframes active-menu-bar03 { 0% { bottom: 15px; transform: rotate(0); } 50% { bottom: 0; transform: rotate(0); } 100% { bottom: 0; transform: rotate(-45deg); background-color: var(--main-green); } } /* ----------------------------------------------------- Footer ----------------------------------------------------- */ footer { background: url(../images/foot_img.jpg) no-repeat center; background-size: cover; height: 566px; text-align: center; display: flex; flex-direction: column; justify-content: center; color: #FFF; position: relative; } footer > p { font-family : YuMincho,'Yu Mincho',sans-serif;; font-size: 1.125em; opacity: 0; } footer > p strong { font-size: 2.250rem; display: inline-block; margin-bottom: 15px; } footer #Foot-btm { position: absolute; bottom: 20px; left: 0; right: 0; margin: auto; } footer #Foot-btm .name { font-size: 1.438em; font-weight: 600; } footer #Foot-btm .name::before { content: ""; display: inline-block; width: 37px; height: 18px; background: url(../images/logo.png) no-repeat; background-size: 100% auto; margin-right: 5px; vertical-align: -0.05em; } footer #Foot-btm .copy { margin: 40px 0 0 0; font-size: 0.750em; font-weight: 300; } footer > p.anime { animation: text 1.5s 0.5s ease forwards; } /* ----------------------------------------------------- Contents ----------------------------------------------------- */ #Main { width: 100%; height: 100vh; overflow: hidden; display: flex; box-sizing: border-box; } #Main::before { content: ""; width: 100%; height: 100vh; background: url(../images/main_img.jpg) center; background-size: cover; position: absolute; top: 0; left: 0; z-index: -1; } #Main p { transition: ; font-family : YuMincho,'Yu Mincho',sans-serif; color: #FFF; display: block; margin: auto; text-align: center; font-size: 1.563em; opacity: 0; animation: text 1.5s 0.5s ease forwards; } #Main p strong { font-size: 3.125rem; display: inline-block; margin-bottom: 15px; } #Contents { background: #000; } #Contents .inner { max-width: 1000px; width: 95%; margin: auto; padding: 100px 0 170px; } #Contents h2 { text-align: center; color: var(--main-green); font-size: 1.125em; font-weight: 500; width: 100%; } #Contents h2 svg.icon { height: 25px; fill: #FFF; } #Contents h2 svg.ttl,#Access h2 svg.ttl { height: 45px; margin: 15px 0; } #Contents h2 span { opacity: 0; } #Service { background: #FFF; } #Service h2 svg.icon,#Access h2 svg.icon { height: 22px; fill: #000; } #Service ul { display: flex; justify-content: space-between; flex-wrap: wrap; font-size: 1.000em; font-weight: 500; } #Service ul li { margin-top: 85px; text-align: center; max-width: 170px; width: 30%; opacity: 0; } #Service ul li img { max-width: 160px; width: 100%; height: auto; margin-bottom: 15px; } .cls-1 { fill: none; stroke: #000; stroke-linejoin: bevel; stroke-width: 2px; } .cls-2 {fill: none; stroke-miterlimit:10; stroke:var(--main-green); } .nOPLWkRQ_0 {stroke-dasharray:98 100;stroke-dashoffset:99; } .nOPLWkRQ_1 {stroke-dasharray:87 89;stroke-dashoffset:88; } .nOPLWkRQ_2 {stroke-dasharray:19 21;stroke-dashoffset:20; } .nOPLWkRQ_3 {stroke-dasharray:87 89;stroke-dashoffset:88; } .nOPLWkRQ_4 {stroke-dasharray:19 21;stroke-dashoffset:20; } .nOPLWkRQ_5 {stroke-dasharray:103 105;stroke-dashoffset:104; } .nOPLWkRQ_6 {stroke-dasharray:25 27;stroke-dashoffset:26; } .nOPLWkRQ_7 {stroke-dasharray:91 93;stroke-dashoffset:92; } .nOPLWkRQ_8 {stroke-dasharray:44 46;stroke-dashoffset:45; } .nOPLWkRQ_9 {stroke-dasharray:88 90;stroke-dashoffset:89; } h2.anime path { animation:nOPLWkRQ_draw 1200ms ease-in-out 0ms forwards; } h2.anime span { animation: fade .5s ease-in-out 1200ms forwards; } #Service ul.anime li:nth-child(1) { animation: text .5s ease-in-out 0s forwards; } #Service ul.anime li:nth-child(2) { animation: text .5s ease-in-out .15s forwards; } #Service ul.anime li:nth-child(3) { animation: text .5s ease-in-out .3s forwards; } #Service ul.anime li:nth-child(4) { animation: text .5s ease-in-out .45s forwards; } #Service ul.anime li:nth-child(5) { animation: text .5s ease-in-out .6s forwards; } @keyframes text { 0% { opacity: 0; visibility: hidden; transform: translateY(50px); } 100% { opacity: 1; visibility: visible; transform: translateY(0); } } @keyframes nOPLWkRQ_draw{ 100%{ stroke-dashoffset: 0; } } @keyframes nOPLWkRQ_fade{ 0% { stroke-opacity: 1; } 92.5925925925926% { stroke-opacity: 1; } 100% { stroke-opacity: 0; } } @keyframes fade { 0%{ opacity: 0;} 100% { opacity: 1; } } #Company,#History,#Access .inner,#Contact { display: flex; justify-content: space-between; flex-wrap: wrap; } #Company { padding-bottom: 300px; } #Company h2 { max-width: 640px; width: 50%; margin-left: auto; order: -1; box-sizing: border-box; margin: auto; } #Company .topimg { width: 50%; margin-top: -60px; height: 440px; overflow: hidden; opacity: 0; } #Company .cls-1,#History .cls-1,#Contact .cls-1 { stroke: #FFF; } #Company .img { max-width: 640px; width: 50%; margin-top: 80px; box-sizing: border-box; position: relative; align-self: flex-start; } #Company .img::before { content: ""; display: block; background: var(--main-green); width: 70%; height: 51%; transform: skewY(15deg) translateX(100%); position: absolute; right: 0; bottom: -10%; z-index: 0; } #Company .img img,#Company .topimg img,#History .img img { max-width: 100%; width: auto; height: auto; } #Company .img .landscape { max-width: 400px; width: 62.5%; height: auto; position: absolute; bottom: -35%; left: 8.5%; z-index: 0; } #Company .img .portrait { max-width: 290px; width: 45.3125%; height: auto; margin-left: auto; margin-right: 8%; position: relative; z-index: 1; } #Company .txt { width: 50%; } #Company dl { line-height: 1.8em; display: table; margin: auto; box-sizing: border-box; padding-left: 10%; } #Company dl dt { position: relative; } #Company dl dt svg { width: 38px; height: 38px; position: absolute; left: 0; top: 0.5em; } #Company dl .cls-1 { stroke-width: 1px; } #Company dl dt { color: var(--main-green); font-weight: 600; margin-top: 40px; padding-left: 55px; } #Company dl dd { color: #FFF; font-weight: 600; padding-left: 55px; } #Company dl.anime dt:nth-of-type(1) path { animation:pZkWEomK_draw 1200ms ease-in-out 0s forwards; } #Company dl.anime dt:nth-of-type(2) path { animation:pZkWEomK_draw 1200ms ease-in-out .2s forwards; } #Company dl.anime dt:nth-of-type(3) path { animation:pZkWEomK_draw 1200ms ease-in-out .4s forwards; } #Company dl.anime dt:nth-of-type(4) path { animation:pZkWEomK_draw 1200ms ease-in-out .6s forwards; } #Company dl.anime dt:nth-of-type(5) path { animation:pZkWEomK_draw 1200ms ease-in-out .8s forwards; } #Company dl.anime dt:nth-of-type(6) path { animation:pZkWEomK_draw 1200ms ease-in-out 1s forwards; } #Company .topimg.anime { animation: right 1s 1200ms ease forwards; } #Company .img.anime::before { animation: line 1.5s 1700ms ease forwards; } #Company .img.anime .landscape { animation: img01 1.2s 2200ms ease forwards; opacity: 0; } #Company .img.anime .portrait { animation: img02 1.3s 2000ms ease forwards; opacity: 0; } .ZfOXySnp_0{stroke-dasharray:104 106;stroke-dashoffset:105;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_1{stroke-dasharray:88 90;stroke-dashoffset:89;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_2{stroke-dasharray:122 124;stroke-dashoffset:123;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_3{stroke-dasharray:168 170;stroke-dashoffset:169;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_4{stroke-dasharray:93 95;stroke-dashoffset:94;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_5{stroke-dasharray:20 22;stroke-dashoffset:21;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_6{stroke-dasharray:139 141;stroke-dashoffset:140;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_7{stroke-dasharray:58 60;stroke-dashoffset:59;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} .ZfOXySnp_8{stroke-dasharray:19 21;stroke-dashoffset:20;animation:ZfOXySnp_draw 1200ms ease-in-out 0ms forwards;} @keyframes ZfOXySnp_draw{100%{stroke-dashoffset:0;}} @keyframes ZfOXySnp_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}} .pZkWEomK_0{stroke-dasharray:121 123;stroke-dashoffset:122;} .pZkWEomK_1{stroke-dasharray:12 14;stroke-dashoffset:13;} .pZkWEomK_2{stroke-dasharray:60 62;stroke-dashoffset:61;} @keyframes pZkWEomK_draw{100%{stroke-dashoffset:0;}} @keyframes pZkWEomK_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}} @keyframes right { 0% { opacity: 0; transform: translateX(200px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes left { 0% { opacity: 0; transform: translateX(-200px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes line { 0% { transform: skewY(15deg) translateX(100%); } 100% { transform: skewY(15deg) translateX(0); } } @keyframes line02 { 0% { transform: skewY(15deg) translateX(-100%); } 100% { transform: skewY(15deg) translateX(0); } } @keyframes img01 { 0% { opacity: 0; transform: translateY(200px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes img02 { 0% { opacity: 0; transform: translateY(-200px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes history { 0% { opacity: 0; transform: translateX(200px); } 100% { opacity: 1; transform: translateX(0); } } #History { padding: 100px 0; overflow: hidden; } #History > .top { display: none; } #History .img { width: 50%; order: -1; margin-top: -100px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } #History .img .top { height: 440px; overflow: hidden; translateX(-200px); opacity: 0; } #History .btm { position: relative; max-width: 640px; } #History .btm::before { content: ""; display: block; background: var(--main-green); width: 70%; height: 51%; transform: skewY(15deg) translateX(-100%); position: absolute; left: 0; top: -4%; z-index: 0; } #History .btm .landscape { max-width: 400px; width: 62.5%; height: auto; position: absolute; top: -30%; right: 8.5%; z-index: 0; opacity: 0; } #History .btm .portrait { max-width: 290px; width: 45.3125%; height: auto; margin-left: auto; margin-left: 8%; position: relative; z-index: 1; opacity: 0; } #History .txt { max-width: 640px; width: 50%; box-sizing: border-box; margin-right: auto; } #History dl { line-height: 1.8em; display: table; margin: 95px auto 0 auto; } #History dl dt { margin-top: 5px; color: var(--main-green); font-weight: 600; opacity: 0; } #History dl dd { color: #FFF; font-weight: 600; opacity: 0; } #History .anime .top { animation: left 1s 1200ms ease forwards; } #History .anime .btm::before { animation: line02 1.5s 1700ms ease forwards; } #History .btm .landscape { animation: img02 1.2s 2200ms ease forwards; opacity: 0; } #History .btm .portrait { animation: img01 1.2s 2000ms ease forwards; opacity: 0; } #History dl.anime dt:nth-child(1) { animation: history .5s ease-in-out 1200ms forwards; } #History dl.anime dd:nth-child(2) { animation: history .5s ease-in-out 1200ms forwards; } #History dl.anime dt:nth-child(3) { animation: history .5s ease-in-out 1300ms forwards; } #History dl.anime dd:nth-child(4) { animation: history .5s ease-in-out 1300ms forwards; } #History dl.anime dt:nth-child(5) { animation: history .5s ease-in-out 1400ms forwards; } #History dl.anime dd:nth-child(6) { animation: history .5s ease-in-out 1400ms forwards; } #History dl.anime dt:nth-child(7) { animation: history .5s ease-in-out 1500ms forwards; } #History dl.anime dd:nth-child(8) { animation: history .5s ease-in-out 1500ms forwards; } #History dl.anime dt:nth-child(9) { animation: history .5s ease-in-out 1600ms forwards; } #History dl.anime dd:nth-child(10) { animation: history .5s ease-in-out 1600ms forwards; } #History dl.anime dt:nth-child(11) { animation: history .5s ease-in-out 1700ms forwards; } #History dl.anime dd:nth-child(12) { animation: history .5s ease-in-out 1700ms forwards; } #History dl.anime dt:nth-child(13) { animation: history .5s ease-in-out 1800ms forwards; } #History dl.anime dd:nth-child(14) { animation: history .5s ease-in-out 1800ms forwards; } #History dl.anime dt:nth-child(15) { animation: history .5s ease-in-out 1900ms forwards; } #History dl.anime dd:nth-child(16) { animation: history .5s ease-in-out 1900ms forwards; } #History dl.anime dt:nth-child(17) { animation: history .5s ease-in-out 2000ms forwards; } #History dl.anime dd:nth-child(18) { animation: history .5s ease-in-out 2000ms forwards; } #History dl.anime dt:nth-child(19) { animation: history .5s ease-in-out 2100ms forwards; } #History dl.anime dd:nth-child(20) { animation: history .5s ease-in-out 2100ms forwards; } #History dl.anime dt:nth-child(21) { animation: history .5s ease-in-out 2200ms forwards; } #History dl.anime dd:nth-child(22) { animation: history .5s ease-in-out 2200ms forwards; } #History dl.anime dt:nth-child(23) { animation: history .5s ease-in-out 2300ms forwards; } #History dl.anime dd:nth-child(24) { animation: history .5s ease-in-out 2300ms forwards; } #History dl.anime dt:nth-child(25) { animation: history .5s ease-in-out 2400ms forwards; } #History dl.anime dd:nth-child(26) { animation: history .5s ease-in-out 2400ms forwards; } #History dl.anime dt:nth-child(27) { animation: history .5s ease-in-out 2500ms forwards; } #History dl.anime dd:nth-child(28) { animation: history .5s ease-in-out 2500ms forwards; } .kwYGcxcT_0{stroke-dasharray:98 100;stroke-dashoffset:99;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_1{stroke-dasharray:103 105;stroke-dashoffset:104;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_2{stroke-dasharray:25 27;stroke-dashoffset:26;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_3{stroke-dasharray:44 46;stroke-dashoffset:45;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_4{stroke-dasharray:122 124;stroke-dashoffset:123;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_5{stroke-dasharray:58 60;stroke-dashoffset:59;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_6{stroke-dasharray:19 21;stroke-dashoffset:20;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_7{stroke-dasharray:43 45;stroke-dashoffset:44;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_8{stroke-dasharray:31 33;stroke-dashoffset:32;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_9{stroke-dasharray:44 46;stroke-dashoffset:45;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_10{stroke-dasharray:44 46;stroke-dashoffset:45;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} .kwYGcxcT_11{stroke-dasharray:27 29;stroke-dashoffset:28;animation:kwYGcxcT_draw 1200ms ease-in-out 0ms forwards;} @keyframes kwYGcxcT_draw{100%{stroke-dashoffset:0;}} @keyframes kwYGcxcT_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}} #Access { position: relative; } #Access::after { content: ""; display: block; background: var(--main-green); width: 50%; height: 250px; transform: skewY(15deg) translateX(100%); position: absolute; right: 0; bottom: 20%; z-index: 0; } #Access .inner { background: #FFF; padding: 80px 50px!important; box-sizing: border-box; position: relative; z-index: 1; } #Access .column { width: 30%; margin-top: 70px; display: flex; flex-direction: column; justify-content: space-between; } #Access p { font-size: 0.875em; line-height: 1.8em; font-weight: 400; } #Access p strong { font-weight: 700; } #Access .map { margin-top: 15px; position: relative; padding-bottom: 70.25%; padding-top: 30px; height: 0; overflow: hidden; } #Access.anime::after { animation: line 1.5s 1700ms ease forwards; } #Access .map iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .fbJiIVmN_0{stroke-dasharray:98 100;stroke-dashoffset:99;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_1{stroke-dasharray:98 100;stroke-dashoffset:99;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_2{stroke-dasharray:87 89;stroke-dashoffset:88;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_3{stroke-dasharray:19 21;stroke-dashoffset:20;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_4{stroke-dasharray:88 90;stroke-dashoffset:89;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_5{stroke-dasharray:88 90;stroke-dashoffset:89;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_6{stroke-dasharray:93 95;stroke-dashoffset:94;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} .fbJiIVmN_7{stroke-dasharray:20 22;stroke-dashoffset:21;animation:fbJiIVmN_draw 1200ms ease-in-out 0ms forwards;} @keyframes fbJiIVmN_draw{100%{stroke-dashoffset:0;}} @keyframes fbJiIVmN_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}} #Contact { color: #FFF; align-items: center; } #Contact h2 { width: 50%; } #Contact .column { width: 45%; } #Contact ul { display: flex; justify-content: space-around; flex-wrap: wrap; } #Contact ul li { width: 200px; display: flex; flex-direction: column; justify-content: center; text-align: center; align-items: center; height: 200px; font-size: 1.188em; font-weight: 400; box-sizing: border-box; overflow: hidden; box-sizing: border-box; line-height: 1.8em; position: relative; } #Contact ul li::before { content: ""; display: block; position: absolute; height: 1px; width: 0; background: var(--main-green); top: 0; left: 0; } #Contact ul li::after { content: ""; display: block; position: absolute; height: 1px; width: 0; background: var(--main-green); bottom: 0; right: 0; } #Contact ul li small { font-size: 0.875rem; } #Contact ul li strong { font-size: 1.313rem; font-weight: 700; } #Contact ul li a { color: #FFF; } #Contact ul li:nth-child(n + 3) { margin-top: 25px; } #Contact ul li div { position: relative; display: block; color: #FFF; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; } #Contact ul li div::before { content: ""; display: block; position: absolute; height: 0; width: 1px; background: var(--main-green); top: 0; right: 0; } #Contact ul li div::after { content: ""; display: block; position: absolute; height: 0; width: 1px; background: var(--main-green); bottom: 0; left: 0; } #Contact ul.anime li::before { width: 100%; transition: all 0.1s; transition-delay: 0s; } #Contact ul.anime li:nth-child(1)::before { width: 100%; transition: 500ms ease-in 1000ms; } #Contact ul.anime li:nth-child(1) div::before { height: 100%; transition: 500ms ease-in 1500ms; } #Contact ul.anime li:nth-child(1)::after { width: 100%; transition: 500ms ease-in 2000ms; } #Contact ul.anime li:nth-child(1) div::after { height: 100%; transition: 500ms ease-in 2500ms; } #Contact ul.anime li:nth-child(2)::before { width: 100%; transition: 500ms ease-in 2000ms; } #Contact ul.anime li:nth-child(2) div::before { height: 100%; transition: 500ms ease-in 2500ms; } #Contact ul.anime li:nth-child(2)::after { width: 100%; transition: 500ms ease-in 3000ms; } #Contact ul.anime li:nth-child(2) div::after { height: 100%; transition: 500ms ease-in 3500ms; } #Contact ul.anime li:nth-child(3)::before { width: 100%; transition: 500ms ease-in 3000ms; } #Contact ul.anime li:nth-child(3) div::before { height: 100%; transition: 500ms ease-in 3500ms; } #Contact ul.anime li:nth-child(3)::after { width: 100%; transition: 500ms ease-in 4000ms; } #Contact ul.anime li:nth-child(3) div::after { height: 100%; transition: 500ms ease-in 4500ms; } #Contact ul.anime li:nth-child(4)::before { width: 100%; transition: 500ms ease-in 4000ms; } #Contact ul.anime li:nth-child(4) div::before { height: 100%; transition: 500ms ease-in 4500ms; } #Contact ul.anime li:nth-child(4)::after { width: 100%; transition: 500ms ease-in 5000ms; } #Contact ul.anime li:nth-child(4) div::after { height: 100%; transition: 500ms ease-in 5500ms; } #Contact ul.anime li:nth-child(5)::before { width: 100%; transition: 500ms ease-in 5000ms;} #Contact ul.anime li:nth-child(5) div::before { height: 100%; transition: 500ms ease-in 5500ms;} #Contact ul.anime li:nth-child(5)::after { width: 100%; transition: 500ms ease-in 6000ms;} #Contact ul.anime li:nth-child(5) div::after { height: 100%; transition: 500ms ease-in 6500ms;} #Contact p { font-size: 0.875em; text-align: center; margin-top: 30px; } .khBqgXwy_0{stroke-dasharray:88 90;stroke-dashoffset:89;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_1{stroke-dasharray:88 90;stroke-dashoffset:89;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_2{stroke-dasharray:122 124;stroke-dashoffset:123;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_3{stroke-dasharray:93 95;stroke-dashoffset:94;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_4{stroke-dasharray:20 22;stroke-dashoffset:21;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_5{stroke-dasharray:139 141;stroke-dashoffset:140;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_6{stroke-dasharray:43 45;stroke-dashoffset:44;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_7{stroke-dasharray:31 33;stroke-dashoffset:32;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_8{stroke-dasharray:43 45;stroke-dashoffset:44;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} .khBqgXwy_9{stroke-dasharray:31 33;stroke-dashoffset:32;animation:khBqgXwy_draw 1200ms ease-in-out 0ms forwards;} @keyframes khBqgXwy_draw{100%{stroke-dashoffset:0;}} @keyframes khBqgXwy_fade{0%{stroke-opacity:1;}92.5925925925926%{stroke-opacity:1;}100%{stroke-opacity:0;}} @media screen and (max-width:1280px) { #Company .topimg,#History .img .top { height: auto; } #History .txt { padding-right: 0; } } @media screen and (max-width:960px) { /* ----------------------------------------------------- Header ----------------------------------------------------- */ header.open { position: fixed; z-index: 5; width: 100%; height: 100%; overflow: hidden; background: none; } header .inner { height: 50px; background: rgba(0,0,0,1.00); } header h1 { font-size: 0.500rem; padding-left: 30px; } header h1 strong { font-size: 1.250rem; margin-top: 5px; } header h1 strong::before { width: 26px; height: 13px; margin-left: -30px; margin-right: 5px; } header nav { visibility: hidden; position: fixed; width: 100%; left: 0; top: 50px; } header #Menu { display: block; background: var(--main-green); width: 50px; } header.open nav { display: block; background: rgba(0,0,0,0.80); height: 100vh; visibility: visible; transition: 1s; } header nav ul { flex-wrap: wrap; justify-content: center; align-items: center; height: auto; opacity: 0; } header.open ul { transform: translateY(0); transition: 1s; opacity: 1; } header nav ul li { width: 40%; margin-top: 70px; } header ul li a { height: auto; } header ul li a:hover { background: none; color: #FFF; } header ul li a:hover svg { fill: #FFF; } header ul li a:hover::after { color: var(--main-green); } header ul li.home a svg { height: 35px; margin-bottom: 6px; } header ul li.service a svg { height: 30px; } header ul li.company a svg { height: 40px; } header ul li.history a svg { height: 40px; margin-bottom: 7px; } header ul li.access a svg { height: 40px; } header ul li.contact a { background: none; color: #FFF; } header ul li.contact a svg { height: 40px; fill: #FFF; } header ul li.contact a::after { color: var(--main-green); } header ul li.contact a:hover { background: none; color: #FFF; } header ul li.contact a:hover svg { fill: #FFF; } /* ----------------------------------------------------- Contents ----------------------------------------------------- */ #Service ul { justify-content: center; } #Service ul li { max-width: initial; width: 30%; margin-left: 1.5%; margin-right: 1.5%; } #Service ul li img { max-width: initial; width: 100%; } #Company { flex-wrap: wrap; } #Company h2 { max-width: initial; width: 80%; margin-top: 60px; } #Company .topimg { max-width: 680px; width: 80%; margin: -60px auto 0 auto; height: auto; order: -1; } #Company dl { padding-left: 0; margin-left: auto; margin-right: auto; } #Company .img { margin-left: auto; width: 100%; } #Company .txt { width: 80%; margin: 40px auto 0 auto; } #History > .top { display: block; max-width: 680px; width: 80%; margin: -60px auto 0 auto; height: auto; } #History > .top img { max-width: 100%; width: auto; height: auto; } #History .img { margin-top: 200px; order: 5; width: 100%; } #History .img .top { display: none; } #History .btm { position: relative; max-width: 640px; } #History .txt { width: 80%; box-sizing: border-box; margin: 60px auto 0 auto; } #Access .inner { padding: 80px 0px!important; } #Access .column { width: 70%; margin: 80px auto 0 auto; } #Contact { color: #FFF; align-items: center; } #Contact h2 { width: 100%; } #Contact .column { width: 100%; } #Contact ul { justify-content: center; max-width: 500px; margin: auto; } #Contact ul li { margin: 70px 20px 0 20px; } } @media screen and (max-width:600px) { /* ----------------------------------------------------- Header ----------------------------------------------------- */ header nav ul li { width: 45%; margin-top: 40px; } /* ----------------------------------------------------- Footer ----------------------------------------------------- */ footer { height: 450px; background-position: left 35% top; } /* ----------------------------------------------------- Contents ----------------------------------------------------- */ #Main p { font-size: 1.125Rem; } #Main p strong { font-size: 2.250rem; } #Service ul li { max-width: initial; width: 45%; margin-top: 50px; margin-left: 1.5%; margin-right: 1.5%; } #Company { padding-bottom: 150px; } #Company .img { margin-top: 50px; } #Company dl { margin-top: 0; } #Company dl dt { margin-top: 30px; } #History .img { margin-top: 150px; } #History dl { margin-top: 50px; } #Contact { padding: 100px 0 !important;} #Contact ul { width: 100%; max-width: 290px; margin: 40px auto 0;} #Contact ul li { margin-top: 30px; width: 100%; height: auto;} #Contact ul li div { padding: 20px;}