@charset "UTF-8";
/* =====================
Custom Property
===================== */
:root {
/* debug */
--debug: false;
/* color */
--black: #111;
--color-text-primary: #111;
--primary: #0e41a4;
--navy: #010336;
--green: #274827;
--gray100: #f8f8f8;
--gray200: #f3f3f3;
--gray300: #929292;
--gray400: #3f3f3f;
--lightblue: #e6f0fa;
--lightgreen: #ecf4f2;
--gradation-green: linear-gradient(99deg, #274827 15.76%, #aad59a 97.34%);
--bg-grid: linear-gradient(0deg, transparent calc(100% - 1px), #f1f1f1 calc(100% - 1px)), linear-gradient(90deg, transparent calc(100% - 1px), #f1f1f1 calc(100% - 1px));
/* font */
--yumin: 'Yu Mincho Demibold', 'YuMincho Demibold', '游明朝', 'Yu Mincho Regular', 'Yu Mincho', 'YuMincho Medium', serif;
--yugo: '游ゴシック', 'Yu Gothic', yugothic, 'Hiragino Kaku Gothic ProN', 'Hiragino Kaku Gothic Pro', 'メイリオ', meiryo, 'ＭＳ ゴシック', sans-serif;
--sanserif: 'Noto Sans JP', sans-serif;
--title: 'League Spartan', sans-serif;
--jp: 'Zen Kaku Gothic New', sans-serif; /* 500,700 */
/* icon */
--icon-arrow: url('data:image/svg+xml,');
--icon-download: url('data:image/svg+xml,');
--icon-arrow-circle: url('data:image/svg+xml,');
--icon-breadcrumb: url('data:image/svg+xml,');
--icon-home: url('data:image/svg+xml,');
--icon-earth: url('data:image/svg+xml,');
--icon-blank: url('data:image/svg+xml,');
/* ease */
--slideInBezier: cubic-bezier(0.16, 0.5, 0.43, 1);
--easeOutQuart: cubic-bezier(0.25, 1, 0.5, 1);
--easeOutExpo: cubic-bezier(0.87, 0, 0.13, 1);
--easeOutBack: cubic-bezier(0.34, 1.56, 0.64, 1);
--easeOutQuint: cubic-bezier(0.22, 1, 0.36, 1);
--easeInCirc: cubic-bezier(0.55, 0, 1, 0.45);
--easeInOutBack: cubic-bezier(0.68, -0.6, 0.32, 1.6);
--easeOutSine: cubic-bezier(0.61, 1, 0.88, 1);
--easeOutBounce: cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
/* =====================
container context
===================== */
@container style(--debug:true) {
* {
outline: 1px solid tomato;
&::before,
&::after {
outline: 1px solid tomato;
}
&:focus {
outline: 2px solid var(--blue);
outline-offset: 2px;
}
}
}
/* =====================
animation
===================== */
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
@keyframes scrollable {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-25%);
}
}
@layer style {
/* =====================
common
===================== */
html,
body {
font-family: var(--sanserif);
font-size: 16px;
line-height: 1.8;
color: var(--color-text-primary);
@media (width <= 768px) {
font-size: calc((100 / 390) * 14 * 1vw);
}
}
body {
@media (width > 768px) {
min-inline-size: 1440px;
}
}
@media (width > 768px) {
.sp {
display: none;
}
}
@media (width <= 768px) {
.pc {
display: none;
}
}
/* p */
:where(p, li, dt, dd, th, td) {
line-height: 1.8;
}
/* =====================
header
===================== */
.header {
--_padding-block: 24px;
position: fixed;
inset-block-start: 0;
inset-inline: auto;
z-index: 40;
display: block grid;
grid-template-columns: minmax(303px, 1fr) auto;
align-items: center;
justify-content: center;
inline-size: 100%;
padding-inline: 40px;
margin-inline: auto;
pointer-events: none;
transition: background 250ms ease 0s;
will-change: background;
@media (width <= 768px) {
--_padding-block: calc((100 / 390) * 20.41 * 1vw);
grid-template-columns: minmax(calc((100 / 390) * 240 * 1vw), 1fr) auto;
padding-inline: calc((100 / 390) * 16 * 1vw);
}
/* ==== logo ==== */
.logo {
display: block;
inline-size: fit-content;
}
& hgroup {
display: block grid;
gap: 8px;
justify-content: center;
padding-block: var(--_padding-block);
pointer-events: auto;
@media (width <= 768px) {
gap: calc((100 / 390) * 4 * 1vw);
& img {
max-inline-size: calc((100 / 390) * 215 * 1vw);
vertical-align: top;
}
}
& h1 {
margin-block: calc((1em - 1lh) / 2);
font-family: var(--jp);
font-size: 12px;
font-weight: 500;
text-align: center;
letter-spacing: 1.68px;
@media (width <= 768px) {
font-size: calc((100 / 390) * 10 * 1vw);
letter-spacing: calc((100 / 390) * 1.4 * 1vw);
}
}
}
/* ==== nav ==== */
.nav {
block-size: 100%;
padding-inline-end: 40px;
pointer-events: auto;
@media (width <= 768px) {
display: none;
}
& ul {
display: block grid;
grid-auto-flow: column;
gap: 40px;
align-items: center;
justify-content: flex-start;
block-size: inherit;
& li {
display: block flex;
align-items: center;
block-size: inherit;
}
& a {
position: relative;
display: block flex;
align-items: center;
block-size: inherit;
}
}
/* ==== contact ==== */
.contact {
display: block flex;
gap: 8px;
&::before {
display: inline-block;
flex-shrink: 0;
inline-size: 18px;
block-size: 14px;
content: '';
background-image: url('../img/_common/mail.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
}
}
.header-color .header {
background-color: white;
}
.menu-on .header {
background-color: white;
}
/* =====================
aside
===================== */
.aside {
padding-block: 80px 71px;
color: white;
background: var(--gradation-green);
@media (width <= 768px) {
padding-block: calc((100 / 390) * 55 * 1vw) calc((100 / 390) * 56 * 1vw);
}
/* ==== inner ==== */
.inner {
display: block grid;
gap: 31px 55px;
max-inline-size: 1200px;
margin-inline: auto;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
gap: calc((100 / 390) * 24 * 1vw);
padding-inline: calc((100 / 390) * 32 * 1vw);
}
/* ==== head ==== */
.u-head {
grid-area: 1 / 1 / 2 / 2;
& span[lang='en'] {
color: white;
}
.title {
color: white;
}
}
/* ==== body ==== */
.body {
grid-area: 2 / 1 / 3 / 2;
line-height: 2;
& span {
display: block flow;
}
}
/* ==== tel ==== */
.tel {
position: relative;
display: block grid;
grid-area: 1 / 2 / 3 / 3;
grid-template-columns: 1fr auto;
gap: 20px;
align-items: center;
justify-content: left;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
gap: 17.6vw;
margin-block-start: calc((100 / 390) * 23 * 1vw);
}
&::before {
position: absolute;
inset-block: auto;
inset-inline-start: 50%;
inline-size: 1px;
block-size: 46%;
content: '';
background-color: white;
translate: 0 -5px;
}
@media (width <= 768px) {
&::before {
inset-block-start: 39%;
inset-inline-start: auto;
inline-size: 80%;
block-size: calc((100 / 390) * 1 * 1vw);
translate: 0 0;
}
}
/* ==== link ==== */
& a[href^='tel:'] {
display: block flex;
gap: 9px;
align-items: center;
font-family: var(--title);
font-size: 38px;
font-weight: 500;
line-height: 1;
letter-spacing: 1.52px;
@media (width <= 768px) {
gap: calc((100 / 390) * 9 * 1vw);
font-size: calc((100 / 390) * 36 * 1vw);
}
&::before {
font-size: 26px;
content: 'Tel';
}
@media (width <= 768px) {
&::before {
font-size: calc((100 / 390) * 24 * 1vw);
}
}
}
/* ==== anchor ==== */
.u-anchor {
border-color: var(--gray100);
translate: 0 -5px;
@media (width <= 768px) {
translate: 0 0;
}
}
}
}
}
/* =====================
footer
===================== */
.footer {
display: block flow;
/* ==== inner ==== */
.inner {
position: relative;
display: block grid;
gap: 39px 0;
max-inline-size: 1280px;
padding-block: 80px 71px;
margin-inline: auto;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
gap: calc((100 / 390) * 0 * 1vw);
padding-block: calc((100 / 390) * 31 * 1vw) 71px;
padding-inline: calc((100 / 390) * 32 * 1vw);
}
/* ==== nav ==== */
.nav {
grid-area: 1 / 2 / 5 / 3;
& ul {
display: grid;
grid-template-rows: repeat(4, 1fr);
grid-auto-flow: column;
gap: 0 89px;
align-items: flex-start;
justify-content: flex-start;
max-inline-size: fit-content;
margin-inline: auto 184px;
translate: 0 -20px;
@media (width <= 768px) {
display: block flex;
flex-direction: column;
gap: 0;
justify-content: flex-start;
max-inline-size: 100%;
margin-inline: 0;
translate: 0 0;
}
& li {
inline-size: 100%;
& a {
display: block grid;
inline-size: 100%;
padding-block: 10px;
@media (width <= 768px) {
padding-block: calc((100 / 390) * 8.5 * 1vw);
}
}
}
}
}
/* ==== logo ==== */
.logo {
grid-area: 1 / 1 / 2 / 2;
inline-size: fit-content;
@media (width <= 768px) {
display: block flow;
margin-block-start: calc((100 / 390) * 40 * 1vw);
}
& img {
inline-size: 292px;
block-size: auto;
@media (width <= 768px) {
inline-size: calc((100 / 390) * 279 * 1vw);
}
}
}
/* ==== address ==== */
.address {
display: block grid;
grid-area: 2 / 1 / 3 / 2;
gap: 20px;
font-size: 14px;
@media (width <= 768px) {
gap: calc((100 / 390) * 13 * 1vw);
margin-block-start: calc((100 / 390) * 21 * 1vw);
font-size: calc((100 / 390) * 13 * 1vw);
}
& section {
display: block grid;
gap: 4px;
@media (width <= 768px) {
gap: calc((100 / 390) * 1 * 1vw);
}
}
& h2 {
font-weight: 500;
color: var(--green);
&::before {
content: '[';
}
&::after {
content: ']';
}
}
& address {
display: grid;
gap: 0;
margin-block-start: 0.1vw;
.unit {
display: block flex;
flex-wrap: wrap;
gap: 14px;
@media (width <= 768px) {
gap: calc((100 / 390) * 13.7 * 1vw);
font-size: calc((100 / 390) * 13 * 1vw);
a[href^='tel:'] {
color: var(--green);
text-decoration: underline;
}
}
&:nth-child(2) {
gap: 4px;
@media (width <= 768px) {
gap: calc((100 / 390) * 4 * 1vw);
}
}
&:nth-child(2) span:last-child::before {
content: '/';
}
& span:last-child {
display: block flex;
gap: 2px;
@media (width <= 768px) {
gap: calc((100 / 390) * 2 * 1vw);
}
}
}
}
}
/* ==== sub-nav ==== */
.sub-nav {
grid-area: 3 / 1 / 4 / 2;
font-size: 14px;
color: var(--gray400);
@media (width <= 768px) {
margin-block-start: calc((100 / 390) * 36 * 1vw);
font-size: calc((100 / 390) * 13 * 1vw);
}
& ul {
display: block flex;
gap: 24px;
margin-block: calc((1em - 1lh) / 2);
translate: 0 5px;
@media (width <= 768px) {
gap: calc((100 / 390) * 24 * 1vw);
translate: 0 0;
}
& li {
margin-block: calc((1em - 1lh) / 2);
& a {
line-height: 1;
}
}
}
}
/* ==== copyright ==== */
.copyright {
grid-area: 4 / 1 / 5 / 2;
margin-block: calc((1em - 1lh) / 2);
font-family: var(--title);
font-size: 14px;
color: var(--gray400);
@media (width <= 768px) {
margin-block-start: calc((100 / 390) * 30 * 1vw);
font-size: calc((100 / 390) * 14 * 1vw);
}
}
}
}
/* =====================
to-top
===================== */
.to-top {
position: absolute;
inset-block-end: 20px;
inset-inline-end: 0;
display: block grid;
gap: 8px;
place-content: center;
inline-size: 60px;
block-size: 60px;
aspect-ratio: 1 / 1;
font-family: var(--title);
font-weight: 400;
line-height: 1;
color: white;
cursor: pointer;
background-image: linear-gradient(99deg, #274827 15.79%, #aad59a 90.99%);
background-size: 100% 100%;
border-radius: 6px;
transition: background-size 300ms ease 0s;
will-change: background-size;
@media (any-hover: hover) {
&:hover {
background-size: 200% 100%;
}
}
@media (width <= 768px) {
inset-block-end: calc((100 / 390) * 55 * 1vw);
inset-inline-end: calc((100 / 390) * 16 * 1vw);
gap: calc((100 / 390) * 14 * 1vw);
inline-size: calc((100 / 390) * 60 * 1vw);
block-size: calc((100 / 390) * 60 * 1vw);
border-radius: calc((100 / 390) * 6 * 1vw);
}
&::before {
display: block flow;
inline-size: 14px;
aspect-ratio: 14 / 10;
margin-inline: auto;
content: '';
background-color: currentcolor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
rotate: 0 0 1 -90deg;
}
@media (width <= 768px) {
&::before {
inline-size: calc((100 / 390) * 18 * 1vw);
translate: 0 6px;
}
}
}
/* =====================
sp-menu
===================== */
.sp-menu {
position: fixed;
inset-block-start: calc((100 / 390) * 16 * 1vw);
inset-inline-end: calc((100 / 390) * 16 * 1vw);
z-index: 41;
display: block grid;
gap: calc((100 / 390) * 8 * 1vw);
place-content: center;
inline-size: calc((100 / 390) * 48 * 1vw);
block-size: calc((100 / 390) * 48 * 1vw);
aspect-ratio: 1 / 1;
cursor: pointer;
background: var(--gradation-green);
border-radius: calc((100 / 390) * 6 * 1vw);
&::before,
&::after {
inline-size: calc((100 / 390) * 20 * 1vw);
block-size: 1px;
content: '';
background: white;
transform-origin: 0 0;
transition: all 250ms ease 0s;
}
@media (width > 768px) {
display: none;
}
}
.menu-on .sp-menu {
&::before {
rotate: 0 0 1 27deg;
}
&::after {
rotate: 0 0 1 -27deg;
}
}
/* =====================
sp-nav
===================== */
.sp-nav {
position: fixed;
inset-block-start: calc((100 / 390) * 80 * 1vw);
inset-inline: auto;
z-index: 41;
display: block grid;
gap: 0;
inline-size: 100%;
block-size: 100%;
color: white;
pointer-events: none;
background: var(--gradation-green);
opacity: 0;
translate: 100% 0;
transition: translate 250ms ease 0s;
@media (width > 768px) {
display: none;
}
.inner {
block-size: calc(100svh - (100 / 390) * 80 * 1vw);
padding-block: calc((100 / 390) * 38 * 1vw) calc((100 / 390) * 90 * 1vw);
padding-inline: calc((100 / 390) * 32 * 1vw);
overflow-y: scroll;
}
/* ==== nav ==== */
.nav {
font-size: calc((100 / 390) * 16 * 1vw);
font-weight: 500;
& li {
border-block-end: 1px solid white;
& a {
display: block grid;
grid-template-columns: 1fr auto;
align-items: center;
padding-block: calc((100 / 390) * 25 * 1vw);
&::after {
inline-size: calc((100 / 390) * 21 * 1vw);
aspect-ratio: 21 / 10;
content: '';
background-color: currentcolor;
mask-image: var(--icon-arrow);
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
}
}
}
}
/* ==== sub-nav ==== */
.sub-nav {
margin-block: calc((1em - 1lh) / 2);
margin-block-start: calc((100 / 390) * 56 * 1vw);
& ul {
display: block flex;
flex-wrap: wrap;
gap: calc((100 / 390) * 24 * 1vw);
font-size: calc((100 / 390) * 13 * 1vw);
& li {
margin-block: calc((1em - 1lh) / 2);
}
}
}
}
/* Menu on */
.menu-on .sp-nav {
pointer-events: auto;
opacity: 1;
translate: 0 0;
}
.header ul li {
position: relative;
}
.header ul li::after {
position: absolute;
inset-block-end: 2px;
inset-inline: auto;
inline-size: 0;
block-size: 2px;
margin-inline: auto;
content: '';
background: var(--gradation-green);
transition: inline-size 250ms ease 0s;
}
@media (any-hover: hover) {
.header ul li {
&:hover {
&::after {
inline-size: 100%;
}
}
}
}
body[data-page='company'] .header ul li:has([href='/company/']),
body[data-page='products'] .header ul li:has([href='/products/']),
body[data-page='manufacturers'] .header ul li:has([href='/manufacturers/']),
body[data-page='research'] .header ul li:has([href='/research/']),
body[data-page='recruit'] .header ul li:has([href='/recruit/']),
body[data-page='sdgs'] .header ul li:has([href='/sdgs/']),
body[data-page='detail'] .header ul li:has([href='/products/']),
body[data-page='contact'] .header ul li:has([href='/contact/']) {
color: var(--green);
pointer-events: none;
&::after {
inline-size: 100%;
}
}
body:not([data-page='top'], [data-page='contact'], [data-page='entry'])::after {
position: fixed;
top: 0;
left: 0;
z-index: 900;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100dvh;
pointer-events: none;
content: '';
background: #fff;
opacity: 1;
transition: all 600ms ease-in-out 100ms;
}
.pageshow body::before {
opacity: 0;
}
.pageshow body::after {
opacity: 0;
}
@media (width <= 768px) {
.header {
transition: inset 250ms ease 0s;
}
.scrollDown .header {
inset: calc((100 / 390) * 80 * -1 * 1vw) auto auto 0;
}
.scrollUp .header {
inset: 0 auto auto 0;
}
body:not(.scrolled) .header {
inset: 0 auto auto 0;
}
.menu-on .header {
inset: 0 auto auto 0;
}
}
@media (768px < width < 1250px) {
.header {
position: sticky;
}
main {
translate: 0 -97px;
}
}
}
/* =====================
google custom search
===================== */
.g-search {
position: fixed;
top: 80px;
right: 80px;
inline-size: 320px;
pointer-events: auto;
@media only screen and (width <= 768px) {
display: none;
}
@media only screen and (width <= 768px) {
top: 20vw;
right: 4vw;
inline-size: 50vw;
}
.gsc-control-cse {
@media (width <= 768px) {
border: none;
}
background: transparent !important;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
@media (width <= 768px) {
font-size: calc((100 / 390) * 16 * 1vw);
}
}
.gsc-search-button-v2 {
@media (width <= 768px) {
border-radius: 0 !important;
}
}
.gsc-input-box {
@media (width <= 768px) {
padding-block: 0 !important;
border-radius: 0 !important;
}
}
& svg {
display: block;
inline-size: 23px;
max-inline-size: 20px;
block-size: 24px;
@media only screen and (width <= 768px) {
display: block;
inline-size: 13vw;
max-inline-size: 3.8vw;
block-size: 3.4vw;
}
}
}
/* =====================
google custom search
===================== */
.g-search-sp {
margin-block-start: 14vw;
background: transparent !important;
border: none;
.gsc-search-box {
width: fit-content;
}
.gsc-search-box-tools .gsc-search-box .gsc-input {
padding-block: 0 !important;
padding-right: 0 !important;
font-size: calc((100 / 390) * 16 * 1vw);
}
.gsc-search-button-v2 {
border-radius: 0 !important;
}
.gsib_a {
padding-block: calc((100 / 390) * 12 * 1vw);
}
.gsc-input-box {
inline-size: 40vw;
padding-block: 0 !important;
border-radius: 0 !important;
}
.gsc-search-button {
block-size: 9vw !important;
margin-left: calc((100 / 390) * 16 * 1vw) !important;
& svg {
display: block;
inline-size: 13vw;
max-inline-size: 3.8vw;
block-size: 3.4vw;
}
}
}
.gsc-control-cse {
padding: 0;
}
.gsc-selected-option-container {
max-width: 100% !important;
}
.gsc-control-cse {
padding: 0 !important;
}