@charset "utf-8"; /* Theme Name: dik-eng Text Domain: dik-eng */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&display=swap'); /*reset*/ /*******************************************************************/ html{box-sizing:border-box;overflow-y:scroll;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{width:auto;max-width:100%;height:auto;border-style:none;vertical-align:middle}i{vertical-align:middle}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none}i{font-style:normal} a { color: #222; text-decoration: none;} @media only screen and (min-width: 769px){ a { transition: all .2s ease-out;} a:hover { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=60); opacity: 0.6;}} *:focus { outline: none;} /*LAYOUT*/ /*******************************************************************/ html { font-size: 62.5%;} body { -webkit-text-size-adjust: 100%; touch-action: manipulation; height: 100%; font-family: YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif"; font-size: 1.5rem; line-height: 1.4; color: #222;} #container { width: 100%; overflow-x: clip;} i { font-family: 'Montserrat', sans-serif;} /*HEADER*/ /*******************************************************************/ #header { position: absolute; top: 0; left: 0; width: 100%; padding: 0 2vw; z-index: 100;} #header::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: background .2s ease-out;} #header:hover::before { background: #000;} #headercontent { display: flex; justify-content: space-between; align-items: center; width: 100%; margin: 0;} #logo { position: relative; flex: 0 0 auto; width: min(24vw, 300px);} #logo img { display: block; width: 100%;} #header.is-fixed { position: fixed; -webkit-transform: translateY(-96px); transform: translateY(-96px);} #header.is-fixed.is-active { -webkit-transition-duration: 0.6s; transition-duration: 0.6s; -webkit-transition-delay: 0s; transition-delay: 0s; -webkit-transition-timing-function: cubic-bezier(0.68, 0, 0, 1); transition-timing-function: cubic-bezier(0.68, 0, 0, 1); -webkit-transform: translateY(0); transform: translateY(0); background: #000;} @media only screen and (min-width: 1025px){ #headercontent { height: 93px;} #nav { display: flex; align-items: center; justify-content: flex-end; margin-left: auto;} #nav ul { display: flex;} #nav > ul > li { position: relative; margin-right: 2vw;} #nav > ul > li:last-child { margin-right: 0;} #nav > ul > li > a { position: relative; display: flex; align-items: center; height: 93px; font-weight: 700; color: #FFF;} #nav > ul > li > a:hover { opacity: 1;} #nav > ul > li > a::before { content: ''; position: absolute; right: 0; bottom: 2px; display: block; width: 100%; height: 3px; background: #191970; transform: scale(0, 1); transform-origin: right top; transition: transform .3s;} #nav > ul > li:hover > a::before { transform-origin: left top; transform: scale(1, 1);} /* お問い合わせ：ボタン化 */ #nav > ul > li.nav-cta { display: flex; align-items: center;} #nav > ul > li.nav-cta > a { height: auto; padding: 9px 20px; gap: 8px; background: #191970; border: none; border-radius: 0; box-shadow: 0 0 0 1px #FFF; color: #FFF; transition: background .2s ease-out, color .2s ease-out;} #nav > ul > li.nav-cta > a::before { content: none;} #nav > ul > li.nav-cta > a:hover { background: #2F5BD3; color: #FFF; opacity: 1;} /* ドロップダウン：影で浮かせるモダン版（①線なし影／②非対称余白と幅／③仕切り線撤廃／④上からヌルッ） */ #nav .dropdown { position: absolute; top: 93px; left: -40px; min-width: 300px; padding-top: 10px; background: transparent; opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);} #nav > ul > li:hover > .dropdown { opacity: 1; transform: translateY(0); pointer-events: auto;} #nav .dropdown ul { display: block; padding: 18px 20px; background: rgba(0,0,0,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: none; box-shadow: 0 6px 12px -4px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.55);} #nav .dropdown li { width: auto;} #nav .dropdown li + li { margin-top: 6px;} #nav .dropdown li a { display: block; padding: 11px 20px; font-size: 1.5rem; font-weight: bold; white-space: nowrap; color: #FFF; text-indent: 0; transition: background .25s ease, text-indent .25s ease;} #nav .dropdown li a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,.08); text-indent: 6px;} /* JSが動かない特殊な404応答でも、直下サブメニューが素で展開されないようにする */ #nav > ul > li > ul { position: absolute; top: 93px; left: -40px; display: block; min-width: 300px; padding: 18px 20px; background: rgba(0,0,0,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 12px -4px rgba(0,0,0,.35), 0 18px 40px -12px rgba(0,0,0,.55); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);} #nav > ul > li:hover > ul { opacity: 1; transform: translateY(0); pointer-events: auto;} #nav > ul > li > ul li + li { margin-top: 6px;} #nav > ul > li > ul li a { display: block; padding: 11px 20px; font-size: 1.5rem; font-weight: bold; white-space: nowrap; color: #FFF; text-indent: 0; transition: background .25s ease, text-indent .25s ease;} #nav > ul > li > ul li a:hover { opacity: 1; text-decoration: none; background: rgba(255,255,255,.08); text-indent: 6px;} /* 親メニュー（子あり）だけに下向きシェブロン：ホバーでくるっと回転 */ #nav > ul > li > a.has::after { content: ''; display: inline-block; width: 11px; height: 11px; margin-left: 7px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23ffffff' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E") no-repeat center / contain; transition: transform .35s cubic-bezier(.16,1,.3,1);} #nav > ul > li:hover > a.has::after { transform: rotate(180deg);} #open { display: none;} } .nav-label-sp { display: none;} /*FOOTER*/ /*******************************************************************/ #pagetop { display: none; position: fixed; right: 2.4vw; bottom: 2.4vw; z-index: 100;} #pagetop a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 64px; height: 64px; padding-left: .08em; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: #191970; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; color: #FFF; letter-spacing: .08em; transition: background .25s ease, border-color .25s ease;} #pagetop a::before { content: ""; width: 9px; height: 9px; border-top: 2px solid #FFF; border-left: 2px solid #FFF; transform: rotate(45deg);} #pagetop a:hover { opacity: 1; filter: none; border-color: #8FB2FF; background: linear-gradient(135deg, rgba(47,91,211,.95), rgba(9,167,232,.72));} #footer { position: relative; padding: 64px 5.6vw; background: #222; color: #FFF;} #footer a { color: #FFF;} #footercontent { max-width: 1200px; margin: 0 auto;} #contact dt { margin-bottom: 16px; font-size: 2rem; font-weight: bold;} #contact a[href*="tel:"] { display: flex; align-items: flex-start; justify-content: center; gap: 18px; text-align: left; font-family: 'Montserrat', sans-serif; font-size: 6rem; font-weight: 700; line-height: 1; white-space: nowrap;} #contact a[href*="tel:"] i { flex: 0 0 auto; margin-top: .12em; font-size: .75em;} #contact a[href*="tel:"] .tel-wrap, #contact a[href*="tel:"] .tel-number, #contact a[href*="tel:"] .tel-hours { display: block;} #contact a[href*="tel:"] .tel-hours { margin: 8px 0 0; font-size: 1.5rem; line-height: 1.6; text-align: center;} #contact .dt-hours-sp { display: none;} #contact .btn { margin-top: 0;} #contact .btn a { max-width: initial; box-shadow: 0 0 0 1px #FFF;} #contact .btn a i { margin-right: 10px;} #sitemap { margin: 56px 0;} #sitemap > ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 36px;} .lang-en #sitemap > ul { grid-template-columns: repeat(4, minmax(0, 1fr));} @media only screen and (min-width: 769px){ body:not(.lang-en) #sitemap > ul { grid-template-columns: 1fr 1fr 1fr .82fr 1.18fr;} .lang-en #sitemap > ul > li:first-child { padding-left: clamp(16px, 2vw, 28px);} #sitemap .sitemap-recruit .recruit-copy span { display: block;} } #sitemap > ul > li > a { font-weight: bold;} #sitemap > ul > li ul { margin: 12px 0 0 16px;} #sitemap > ul > li ul li + li { margin-top: 8px;} #sitemap > ul > li ul a { position: relative; display: inline-block; padding-left: 0; color: #A2A2A2; line-height: 1.65; transition: padding-left .28s ease, color .28s ease, opacity .28s ease;} #sitemap > ul > li ul a::before { content: ""; position: absolute; left: 0; top: 50%; width: 8px; height: 1px; background: #FFF; transform: translateY(-50%) scaleX(0); transform-origin: left center; transition: transform .28s ease;} #sitemap > ul > li ul a:hover { opacity: 1; color: #FFF; padding-left: 12px;} #sitemap > ul > li ul a:hover::before { transform: translateY(-50%) scaleX(1);} #sitemap .sitemap-recruit > a { position: relative; display: flex; flex-direction: column; justify-content: center; aspect-ratio: 2 / 1; overflow: hidden; padding: 18px 42px 18px 20px; border: 1px solid rgba(47,91,211,.75); background-color: #191970; line-height: 1.5; transition: border-color .25s ease;} #sitemap .sitemap-recruit > a::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(25,25,112,.82) 0%, rgba(47,91,211,.42) 42%, rgba(47,91,211,0) 77%), url('img/common/recruit-footer.webp'); background-position: center; background-size: cover; background-repeat: no-repeat; transform: scale(1); transition: transform .4s ease;} #sitemap .sitemap-recruit .recruit-title { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 10px; font-weight: bold; transition: transform .3s ease;} #sitemap .sitemap-recruit .recruit-title span:last-child { font-family: 'Montserrat', sans-serif; font-size: 1.1rem; color: #FFF; letter-spacing: .08em;} #sitemap .sitemap-recruit .recruit-copy { position: relative; z-index: 1; display: block; margin-top: 6px; color: #FFF; font-size: 1.2rem; line-height: 1.6; transition: transform .3s ease;} #sitemap .sitemap-recruit > a:after { content: ""; position: absolute; z-index: 1; right: 18px; top: 50%; width: 8px; height: 8px; border-top: 2px solid #FFF; border-right: 2px solid #FFF; transform: translateY(-50%) rotate(45deg);} #sitemap .sitemap-recruit > a:hover { opacity: 1; filter: none; border-color: #8FB2FF;} #sitemap .sitemap-recruit > a:hover::before { transform: scale(1.06);} #sitemap .sitemap-recruit > a:hover .recruit-title, #sitemap .sitemap-recruit > a:hover .recruit-copy { transform: translateX(6px);} #sitemap .sitemap-recruit > a:hover .recruit-title span:last-child, #sitemap .sitemap-recruit > a:hover .recruit-copy { color: #FFF;} #info { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;} #info dl { display: flex; align-items: center; margin: 8px 0;} #info dt { width: 240px; margin-right: 16px;} #info dd { font-size: 1.2rem; font-weight: bold;} #link { display: flex; align-items: center; margin: 8px 0; font-size: 1rem;} #link ul { display: flex; align-items: center; margin-right: 24px;} #link li a { color: #838383;} #footer address { font-style: normal; color: #838383;} /*CONTENTS*/ /*******************************************************************/ article { position: relative; padding: 80px 5.6vw; background: #FFF;} article header { position: relative; max-width: 1200px; margin: 0 auto -94px; text-align: center; z-index: 10;} article header i { font-size: 3.6rem; font-weight: 700;} article header h2 { font-size: 1.7rem;} article header::after { content: ''; display: block; width: 3px; height: 70px; margin: 24px auto 44px; background: #191970;} section { position: relative; width: 100%; max-width: 1200px; margin: 0 auto;} section.narrow { max-width: 930px;} section.full { max-width: initial;} section + section { margin-top: 80px;} #industrial-furnaces > section + section, #plant-engineering > section + section, #business > section + section, #profile > section + section, #global-works > section + section, #technology-documents > section + section, #products > section + section, .product-detail > section + section { margin-top: 120px;} #d-space > section + section { margin-top: 110px;} #d-space > section + section + section { margin-top: 150px;} section p, section dl, section table { line-height: 2;} section p:not(:last-child) { margin-bottom: 32px;} section p a { color: #09A7E8;} figure { position: relative;} figure img { width: 100%; max-width: initial;} .center { text-align: center;} .right { text-align: right;} .row { position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 -12px -24px;} .row > * { margin: 0 12px 24px;} .w25 { width: calc(25% - 24px);} .w50 { width: calc(50% - 24px);} .three { width: calc(100% / 3 - 24px);} .reverse { flex-direction: row-reverse;} .ul , .ol { margin: 0 0 32px 32px; line-height: 2;} .ul > li { padding-left: 16px; list-style: disc;} .ol > li { padding-left: 16px; list-style: decimal;} .ol2 { margin: 16px 0; line-height: 2; counter-reset: item;} .ol2 > li:before { counter-increment: item; content: '('counter(item)')'; padding-right: 8px;} .fs11 { font-size: 1.1rem!important;} .fs12 { font-size: 1.2rem!important;} .fs20 { font-size: 2rem!important;} .fs24 { font-size: 2.4rem!important;} @media only screen and (min-width: 769px){ .pcfs17 { font-size: 1.7rem!important;} .vertical { display: inline-block; white-space: nowrap; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl;} } .arrow { display: inline-block; padding-left: 24px; background: url("img/common/arr.svg") left center no-repeat;} .btn { text-align: center;} section .btn { margin-top: 80px;} .btn a { position: relative; display: inline-block; width: 100%; max-width: 334px; padding: 16px 48px 16px 32px; text-align: center; background: #191970; font-size: 1.9rem; font-weight: bold; color: #FFF;} .btn a span { position: relative; display: inline-block;} .btn a:hover { opacity: 1;} .btn a::after { content: ''; display: inline-block; position: absolute; top: 50%; right: 24px; transform: translateY(-50%); width: 19px; height: 19px; margin-left: 16px; background: url("img/common/arr_w.svg") center no-repeat;} .btn a:hover::after { animation-name: hoverArrowToRight; animation-duration: 1.2s; animation-iteration-count: infinite;} .btn a::before { content: ""; width: 100%; height: 100%; position: absolute; left: 0; top: 0; transform: scaleX(0);} .btn a:hover::before { background-color: #2F5BD3; animation-name: hoverLineOff; animation-duration: 0.6s; animation-timing-function: cubic-bezier(0.68, 0, 0, 1); animation-iteration-count: 1;} @keyframes hoverLineOff { 0% { transform-origin: left; transform: scaleX(0);} 60% { transform-origin: left; transform: scaleX(1);} 61% { transform-origin: right; transform: scaleX(1);} 100% { transform-origin: right; transform: scaleX(0);}} .sp { display: none;} .fit { width: 100%; height: 100%; object-fit: cover; object-position: center; font-family: 'object-fit: cover; object-position: center;';} .fadeInUp{ -webkit-animation-name: fadeInUp; animation-name: fadeInUp;} @-webkit-keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0);} to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} } @keyframes fadeInUp { from { opacity: 0; -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0);} to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);} } .animated { opacity: 0; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both;} .animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite} .animated.delay1{-webkit-animation-delay:0.2s;animation-delay:0.2s} .animated.delay2{-webkit-animation-delay:0.4s;animation-delay:0.4s} .animated.delay3{-webkit-animation-delay:0.6s;animation-delay:0.6s} .animated.delay4{-webkit-animation-delay:0.8s;animation-delay:0.8s} .animated.delay5{-webkit-animation-delay:1s;animation-delay:1s} .animated.fast{-webkit-animation-duration:.8s;animation-duration:.8s} .animated.faster{-webkit-animation-duration:.5s;animation-duration:.5s} .animated.slow{-webkit-animation-duration:2s;animation-duration:2s} .animated.slower{-webkit-animation-duration:3s;animation-duration:3s} .char-fade .char-parts { display: inline-block; min-width: .25em; opacity: 0; -webkit-transform: translate3d(-1.5em, 0.75em, 0) scale(0.8); transform: translate3d(-1.5em, 0.75em, 0) scale(0.8); -webkit-transform-origin: left; transform-origin: left; -webkit-transition: opacity 2s linear, -webkit-transform 2s cubic-bezier(0, .6, .2, 1); transition: opacity 2s linear, transform 2s cubic-bezier(0, .6, .2, 1);} /* 縦書き(日本語)は読み方向に合わせて右上から出す */ .lang-ja .char-fade .char-parts { -webkit-transform: translate3d(0.75em, -1.5em, 0) scale(0.8); transform: translate3d(0.75em, -1.5em, 0) scale(0.8); -webkit-transform-origin: top; transform-origin: top;} body.start .char-fade .char-parts { opacity: 1; -webkit-transform: translateZ(0) scale(1); transform: translateZ(0) scale(1);} .char-fade .char-parts:nth-of-type(1) { transition-delay: 180ms;} .char-fade .char-parts:nth-of-type(2) { transition-delay: 225ms;} .char-fade .char-parts:nth-of-type(3) { transition-delay: 270ms;} .char-fade .char-parts:nth-of-type(4) { transition-delay: 315ms;} .char-fade .char-parts:nth-of-type(5) { transition-delay: 360ms;} .char-fade .char-parts:nth-of-type(6) { transition-delay: 405ms;} .char-fade .char-parts:nth-of-type(7) { transition-delay: 450ms;} .char-fade .char-parts:nth-of-type(8) { transition-delay: 495ms;} .char-fade .char-parts:nth-of-type(9) { transition-delay: 540ms;} .char-fade .char-parts:nth-of-type(10) { transition-delay: 585ms;} .char-fade .char-parts:nth-of-type(11) { transition-delay: 630ms;} .char-fade .char-parts:nth-of-type(12) { transition-delay: 675ms;} .char-fade .char-parts:nth-of-type(13) { transition-delay: 720ms;} .char-fade .char-parts:nth-of-type(14) { transition-delay: 765ms;} .char-fade .char-parts:nth-of-type(15) { transition-delay: 810ms;} .char-fade .char-parts:nth-of-type(16) { transition-delay: 855ms;} .char-fade .char-parts:nth-of-type(17) { transition-delay: 900ms;} .char-fade .char-parts:nth-of-type(18) { transition-delay: 945ms;} .char-fade .char-parts:nth-of-type(19) { transition-delay: 990ms;} .char-fade .char-parts:nth-of-type(20) { transition-delay: 1035ms;} .char-fade .char-parts:nth-of-type(21) { transition-delay: 1080ms;} .char-fade .char-parts:nth-of-type(22) { transition-delay: 1125ms;} .char-fade .char-parts:nth-of-type(23) { transition-delay: 1170ms;} .char-fade .char-parts:nth-of-type(24) { transition-delay: 1215ms;} .char-fade .char-parts:nth-of-type(25) { transition-delay: 1260ms;} .char-fade .char-parts:nth-of-type(26) { transition-delay: 1305ms;} .char-fade .char-parts:nth-of-type(27) { transition-delay: 1350ms;} .char-fade .char-parts:nth-of-type(28) { transition-delay: 1395ms;} .char-fade .char-parts:nth-of-type(29) { transition-delay: 1440ms;} .char-fade .char-parts:nth-of-type(30) { transition-delay: 1485ms;} .char-fade .char-parts:nth-of-type(31) { transition-delay: 1530ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(1) { transition-delay: 360ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(2) { transition-delay: 405ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(3) { transition-delay: 450ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(4) { transition-delay: 495ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(5) { transition-delay: 540ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(6) { transition-delay: 585ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(7) { transition-delay: 630ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(8) { transition-delay: 675ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(9) { transition-delay: 720ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(10) { transition-delay: 765ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(11) { transition-delay: 810ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(12) { transition-delay: 855ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(13) { transition-delay: 900ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(14) { transition-delay: 945ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(15) { transition-delay: 990ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(16) { transition-delay: 1035ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(17) { transition-delay: 1080ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(18) { transition-delay: 1125ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(19) { transition-delay: 1170ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(20) { transition-delay: 1215ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(21) { transition-delay: 1260ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(22) { transition-delay: 1305ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(23) { transition-delay: 1350ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(24) { transition-delay: 1395ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(25) { transition-delay: 1440ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(26) { transition-delay: 1485ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(27) { transition-delay: 1530ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(28) { transition-delay: 1575ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(29) { transition-delay: 1620ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(30) { transition-delay: 1665ms;} #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(31) { transition-delay: 1710ms;} /* 日本語縦書きは右列(〜630ms)が出終わってから左列を表示する */ .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(1) { transition-delay: 675ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(2) { transition-delay: 720ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(3) { transition-delay: 765ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(4) { transition-delay: 810ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(5) { transition-delay: 855ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(6) { transition-delay: 900ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(7) { transition-delay: 945ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(8) { transition-delay: 990ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(9) { transition-delay: 1035ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(10) { transition-delay: 1080ms;} .lang-ja #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(11) { transition-delay: 1125ms;} /*TOP*/ #mv { height: 100vh; padding: 0; background: #111; z-index: 0;} #mv .swiper-container { width: 100%; height: 100vh;} #mv .swiper-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: #222; overflow: hidden;} @keyframes zoomUp { 0% { transform: scale(1);} 100% { transform: scale(1.1);}} #mv .swiper-slide-active .slide-img, #mv .swiper-slide-duplicate-active .slide-img, #mv .swiper-slide-prev .slide-img { height: 100vh; animation: zoomUp 6s linear 0s 1 normal both;} #catch { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; max-width: 100%; height: 100vh; text-align: center; color: #FFF; z-index: 10;} #catch h1 { margin: 10% 0 5%; white-space: nowrap; -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: calc(4.8vh - 2px); font-weight: 500; line-height: 1.8; letter-spacing: 0.16em; z-index: 10; display: flex; flex-direction: column; align-items: flex-start; } #catch h1 .catch-line { display: block;} /* #catch p { max-width: calc(570px + 11.2vw); padding: 0 5.6vw; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: bold;} */ /* 202301 */ @media only screen and (min-width: 744px){ #catch p { max-width: calc(1000px + 11.2vw); padding: 0 5.6vw; font-size: 28px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: bold;} } @media only screen and (max-width: 743px){ #catch p { max-width: calc(570px + 11.2vw); padding: 0 5.6vw; font-size: 14px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-weight: bold;} .lang-ja #catch h1 { font-size: calc(4.4vh - 2px);} } /* 202301 */ #scroll { position: absolute; right: calc(50vw - 1200px / 2); bottom: 0; z-index: 100;} /* #catch はセクション全体のfadeInUp対象外のため、Scrollインジケータは文字アニメ開始後にフェードイン */ #catch #scroll { opacity: 0; transition: opacity 1s linear 1.2s;} body.start #catch #scroll { opacity: 1;} #scroll a { display: block; width: 50px;} #scroll i { position: absolute; top: 0; right: 0; transform-origin: left bottom; transform: rotate(90deg); display: block; font-size: 1.2rem; font-weight: bold; line-height: 1; color: #FFF;} #scroll span { position: relative; display: block; width: 1px; height: 120px; background: rgba(255,255,255,.18); overflow: hidden;} #scroll span::before { content: ''; width: 1px; height: 12px; background: #191970; position: absolute; left: 0; top: 0; -webkit-animation: scroll 2s 1s infinite cubic-bezier(0.67, 0.15, 0.35, 0.72); animation: scroll 2s 1s infinite cubic-bezier(0.67, 0.15, 0.35, 0.72);} @-webkit-keyframes scroll { 0% { top: 0;} 100% { top: 100%;}} @keyframes scroll { 0% { top: 0;} 100% { top: 100%;}} #gallery { padding-top: 96px; padding-bottom: 96px; background: #FFF;} #gallery header { margin-bottom: -55px;} #gallery section { display: flex; align-items: flex-start; max-width: 1440px; min-height: 0; margin: 0 auto;} #gallery section::before { content: ''; position: absolute; top: -24px; left: calc(50% - 50vw + 3.2vw); width: max(78%, 50vw); height: max(615px, calc(100% - 57px)); background: #FAFAFA; z-index: 0;} #gallery .gallery-body { position: relative; align-self: flex-start; width: 43%; padding: clamp(56px, 5.2vw, 84px) clamp(40px, 4.6vw, 72px) clamp(56px, 5.2vw, 84px) clamp(24px, 2.8vw, 40px); z-index: 1;} #gallery .gallery-body p { margin-bottom: 0; padding: 0 0 24px;} #gallery .gallery-body ul { position: relative; margin: 0 clamp(-64px, -3.6vw, -40px) 0 0; padding: 0 clamp(40px, 3.6vw, 64px) 0 0;} #gallery .gallery-body li:not(:first-child) { border-top: 1px solid #D8D8D8;} #gallery .gallery-body li a { display: flex; justify-content: space-between; align-items: center; padding: 5% 0; font-weight: bold; overflow: hidden;} #gallery .gallery-body li a i { display: block; font-size: 1.3rem; font-weight: 600; white-space: nowrap;} #gallery .gallery-body li a i::after { content: ''; display: inline-block; width: 19px; height: 19px; margin-left: 16px; background: url("img/common/arr.svg") center no-repeat; vertical-align: middle;} #gallery .gallery-body li a:hover i::after { animation-name: hoverArrowToRight; animation-duration: 1.2s; animation-iteration-count: infinite;} #gallery .gallery-slider { align-self: flex-start; width: 52vw; margin-top: clamp(72px, 5vw, 96px); margin-left: auto; margin-right: calc(-50vw + 50%); z-index: 2;} #gallery .swiper-container { width: 100%; aspect-ratio: 1.618 / 1; background: #F1F3F5;} #gallery .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} #gallery .slide-pagination { position: absolute; bottom: 32px; left: 32px; display: flex; gap: 8px; z-index: 1;} #gallery .swiper-pagination-bullet { width: auto; height: auto; margin: 0; padding: 3px 12px; background: rgba(255, 255, 255, 0.88); border: 1px solid #FFF; border-radius: 0; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 700; color: #191970; opacity: 1;} #gallery .swiper-pagination-bullet-active { background: #191970; border-color: #191970; color: #FFF;} /*@keyframes hoverArrowToRight { 0% { transform-origin: right; transform: translateX(0px);} 25% { transform-origin: right; transform: translateX(19px);} 26% { transform-origin: left; transform: translateX(-12px);} 48% { transform-origin: left; transform: translateX(0px);} 100% { transform-origin: left; transform: translateX(0px);}}*/ @keyframes hoverArrowToRight { 0% { background-position: 0 0;} 25% { background-position: 19px 0;} 26% { background-position: -19px 0;} 48% { background-position: 0 0;} 100% { background-position: 0 0;}} #service header { margin-bottom: -79px;} #service section { padding-top: 10vw;} #service section::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: calc(100vw - 5.6vw); height: 100%; background: #191970 url("img/top/home-our-service.webp") center / cover no-repeat; z-index: 0;} #service ul { position: relative; bottom: -96px;} #service .three { position: relative;} #service .three figure { aspect-ratio: 16 / 10; margin: 0; overflow: hidden; background: #191970;} #service .three figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} #service li > div { padding: 32px; background: #FFF; box-shadow: 0 0 10px rgba(0,0,0,.06);} /* Our Service：日本語＝縦書き見出し（画像上端からはみ出して重なる） */ #service .service-head { position: absolute; z-index: 3; top: -72px; left: 20px; display: flex; align-items: stretch; gap: 10px; padding: 0; background: none; box-shadow: none; color: #FFF; pointer-events: none; transition: transform .35s cubic-bezier(.16, 1, .3, 1);} #service .service-img { display: block; position: relative;} #service .service-img::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); opacity: 0; transition: opacity .35s ease; z-index: 2; pointer-events: none;} #service .service-img:hover { opacity: 1;} #service .service-img:hover::after { opacity: 1;} #service .service-img:hover ~ .service-head { transform: translateY(8px);} #service .service-head .service-line { flex: 0 0 auto; width: 1px; background: #FFF;} #service .service-head i { writing-mode: vertical-rl; align-self: flex-start; font-size: 1.1rem; font-weight: 600; letter-spacing: .26em; text-shadow: 0 2px 10px rgba(0,0,0,.3);} #service .service-head h3 { writing-mode: vertical-rl; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3rem; font-weight: 700; line-height: 1.1; letter-spacing: .12em; text-shadow: 0 2px 10px rgba(0,0,0,.3);} /* Our Service：英語＝画像下・本文上の横書き見出し */ #service .service-title { margin-bottom: 12px; font-size: 2rem; font-weight: 700; line-height: 1.3; color: #191970;} .more a { display: flex; justify-content: space-between; padding-top: 24px; border-top: 1px solid #EBEBEB;} .more a:hover { opacity: 1;} .more a i { display: block; font-size: 1.3rem; font-weight: 600;} .more a::before { content: ''; display: inline-block; width: 19px; height: 19px; background: url("img/common/arr.svg") center no-repeat;} .more a:hover::before { animation-name: hoverArrowToRight; animation-duration: 1.2s; animation-iteration-count: infinite;} .card-image-link { display: block; position: relative; overflow: hidden;} .card-image-link::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, .1); opacity: 0; transition: opacity .35s ease; pointer-events: none;} .card-image-link:hover { opacity: 1;} .card-image-link:hover::after { opacity: 1;} #news header { margin-bottom: -79px;} #news section { padding-bottom: 80px;} #news section::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FAFAFA; z-index: 0;} #news ul { position: relative; padding-top: 80px;} #news li { display: flex;} .date { display: block; margin: 8px 0; font-size: 1.1rem; font-weight: 600; color: #BABABA;} #news li a { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; padding: 32px 64px 32px 32px; background: #FFF;} #news li a::after { content: ''; display: inline-block; position: absolute; top: 50%; right: 32px; transform: translateY(-50%); width: 19px; height: 19px; margin-left: 16px; background: url("img/common/arr.svg") center no-repeat;} #news li a:hover::after { animation-name: hoverArrowToRight; animation-duration: 1.2s; animation-iteration-count: infinite;} #news .btn a span { font-family: 'Montserrat', sans-serif;} #blog { padding-top: 0;} #blog header { margin-bottom: -79px;} #blog ul { position: relative; padding-top: 80px;} #blog li a { display: block;} #blog li figure { margin-bottom: 24px; aspect-ratio: 560 / 372; overflow: hidden; background: #F1F3F5;} #blog li figure img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease;} #blog li a:hover figure img { transform: scale(1.05);} #blog li h3 { font-size: 1.7rem; font-weight: bold; line-height: 1.6; color: #191970;} @media only screen and (min-width: 769px){ #blog ul { padding-top: 12px;} } /*PAGE*/ #title { padding: 0;} #title .mv { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; height: 665px; color: #FFF;} #title .mv::before, #title .mv::after { content: ''; position: absolute; left: 50%; transform: translateX(-50%); width: 3px; height: 35px; z-index: 1;} #title .mv::before { bottom: 0; background: #FFF;} #title .mv::after { bottom: -35px; background: #191970;} #title .mv figure { position: fixed; top: 0; left: 0; width: 100%; height: 665px;} #title .mv figure::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.1); pointer-events: none;} #title .mv figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} #title .mv figure.mv-marquee-wrap { overflow: hidden;} #title .mv figure.mv-marquee-wrap .mv-marquee { display: flex; align-items: center; width: max-content; height: 100%; animation: mvMarquee 90s linear infinite; will-change: transform;} #title .mv figure.mv-marquee-wrap .mv-marquee-item { flex: 0 0 auto; width: auto; height: 100%; margin-right: 0;} @keyframes mvMarquee { from { transform: translateX(0);} to { transform: translateX(-50%);}} @media (prefers-reduced-motion: reduce){ #title .mv figure.mv-marquee-wrap .mv-marquee { animation: none;}} #title.no-mv .mv { background: #191970;} #title h1 { margin-bottom: 0; white-space: nowrap; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3.5rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.3em; z-index: 10;} #title h1.notfound-title-en { font-family: 'Montserrat', sans-serif; line-height: 1.25; letter-spacing: 0.04em;} #title i { position: absolute; left: 50%; bottom: 48px; display: inline-block; transform: translateX(-50%); font-size: 1.1rem; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; z-index: 1;} #bread { position: relative; padding: 24px 5.6vw; background: #FFF;} #bread ul { display: flex; justify-content: flex-end; max-width: 1200px; margin: 0 auto; font-size: 1.2rem; font-weight: bold; z-index: 100;} #title li:not(:first-child)::before { content: ''; display: inline-block; width: 12px; height: 2px; margin: 0 16px; background: #191970; vertical-align: middle;} @media only screen and (max-width: 1280px){ body.single-news #bread li:not(:last-child), body.single-blog #bread li:not(:last-child) { flex-shrink: 0; white-space: nowrap;} body.single-news #bread li:last-child, body.single-blog #bread li:last-child { max-width: calc(10em + 44px); min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;} } @media only screen and (min-width: 769px){ #title h1 { -webkit-writing-mode: vertical-rl; -moz-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; display: flex; flex-direction: row; align-items: center; } #title h1.title-break { display: block; text-align: start;} #title h1.notfound-title-en { -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; display: block; text-align: center;} #title i { transform: translateX(-50%);} #title .mv.side { flex-direction: row-reverse;} #title .mv.side h1 { margin-bottom: 0; margin-right: 78px;} } .tab { position: sticky; top: 93px; scroll-margin-top: 93px; z-index: 90; background: #FFF; box-shadow: 0 2px 6px rgba(0,0,0,.06);} .tab ul { display: flex; flex-wrap: wrap; justify-content: center; max-width: 1200px; margin: 0 auto;} .tab li { position: relative; width: calc(25% - 12px); margin: 0 6px; padding: 24px 0; text-align: center; color: #3B4043; cursor: pointer;} .tab li::before, .tab li::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #D3D3D3;} .tab li::after { background: #191970; transform: scale(0, 1); transform-origin: right top; transition: transform .3s; z-index: 0;} .tab li:hover::after, .tab li.on::after { transform-origin: left top; transform: scale(1, 1);} .tab li.on { font-weight: bold;} .tab.tab-col6 li { width: calc(16.666% - 12px);} /* リンク遷移式のタブ型ページナビ（製品詳細6ページ、product-tabs.php）。 li のクリック領域スタイルを a へ移譲し、見た目はJS切替タブと同一にする */ .tab.tab-links li { padding: 0;} .tab.tab-links li a { display: block; padding: 24px 0; color: inherit; text-decoration: none;} #tabcontents { position: relative; background: #FFF;} /* ページ間 View Transitions（対応ブラウザのみ有効・非対応ブラウザは通常遷移）。 製品タブ型ナビのページ遷移をJSタブ切替と同等のクロスフェードに見せる。 ヘッダーとタブナビは名前を付けて遷移中も静止させ、本文だけをフェードする */ @view-transition { navigation: auto;} #header { view-transition-name: site-header;} .tab-links { view-transition-name: product-tabs;} #message section > div, #vision section > div, #recruit section.full > div { flex-wrap: nowrap; align-items: center; max-width: 1040px; margin: -280px auto 0; padding: 64px 5.6vw; background: #FFF;} #message section > div, #vision section > div { padding: 80px clamp(40px, 4.8vw, 64px);} #vision section > div h3, #recruit section.full > div h3 { margin-left: 5.6vw; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3.5vh; font-weight: 500; line-height: 1.8; letter-spacing: 0.16em; z-index: 10;} #message .message-content, #vision .vision-content { position: relative;} #vision .vision-content h3 { max-width: 760px; margin: 0 auto 40px; font-size: clamp(2.4rem, 2.6vw, 3.2rem); line-height: 1.6; letter-spacing: .08em; white-space: normal; writing-mode: horizontal-tb;} #message figure img, #vision figure img, #recruit section.full figure img { width: 100%; height: 500px; object-fit: cover; font-family: 'object-fit: cover;';} #vision figure.noimg, #recruit figure.noimg { background: #191970; height: 500px;} .topline { max-width: 760px; margin-top: 0; padding-top: 80px; border-top: 1px solid #DEDEDE;} .quality { max-width: calc(760px + 11.2vw); margin-top: 0; padding: 80px 5.6vw 0;} .message-body, .vision-body, #recruit section.full > div .recruit-lead { flex: 1 1 0; max-width: 760px;} #message .message-content .message-body, #vision .vision-content .vision-body { margin: 0 auto;} #message .message-body > p, #vision .vision-body > p { line-height: 2.1;} .value-block { position: relative; margin-top: 72px; padding: 56px 48px 48px; border: 3px solid #eeeeee;} .value-heading { position: absolute; top: 0; left: 50%; display: flex; align-items: baseline; justify-content: center; gap: 14px; width: max-content; max-width: calc(100% - 64px); padding: 0 18px; transform: translate(-50%, -50%); background: #FFF; white-space: nowrap;} .value-heading i { display: block; margin: 0; color: #191970; font-family: 'Montserrat', sans-serif; font-size: 2.8rem; font-weight: 700; line-height: 1;} .value-heading h4 { min-width: 0; margin: 0; font-size: 1.6rem;} .value-list { margin: 0; padding: 0; list-style: none; counter-reset: value;} .value-list > li { position: relative; margin-bottom: 20px; padding: 0 0 20px 2.8em; border-bottom: 2px dotted #eeeeee; line-height: 1.8;} .value-list > li:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0;} .value-list > li::before { counter-increment: value; content: counter(value); display: inline-block; width: 1.8em; margin-left: -2.8em; margin-right: 1em; font-family: 'Montserrat', sans-serif; color: #191970; font-weight: 700; text-align: center;} #profile section { padding-top: 64px;} #profile h3 { position: relative; margin-bottom: 24px; padding-left: 42px; font-size: 1.7rem;} #profile h3::before { content: ''; position: absolute; top: calc(50% - 2px); left: 0; width: 14px; height: 3px; background: #191970;} .linetable { width: 100%; border-collapse: separate; border-spacing: 0 10px; font-size: 1.6rem;} .linetable tr { background: #FAFAFA;} .linetable th { width: 20%; padding: 16px 24px; vertical-align: top; text-align: left; white-space: nowrap;} .linetable td { padding: 16px 24px; vertical-align: top;} .profile-group-link { display: inline-flex; align-items: center; gap: 10px;} .profile-group-link::before { content: ''; flex: 0 0 auto; width: 19px; height: 19px; background: url("img/common/arr.svg") center no-repeat;} .profile-group-link:hover { opacity: 1;} .profile-group-link:hover::before { animation-name: hoverArrowToRight; animation-duration: 1.2s; animation-iteration-count: infinite;} .mapbtn { margin-top: 32px; text-align: center;} .mapbtn a { display: inline-block; padding: 8px 48px 8px 32px; background: url("img/company/pin.svg") right 16px center no-repeat; border: 2px solid #191970; border-radius: 32px; font-size: 1.4rem; font-weight: bold; color: #191970;} #history section { padding-top: 64px;} #history section > div { position: absolute; width: 32%; text-align: center;} #history .history1 { top: 90px; right: 15vw;} #history .history2 { top: 450px; right: 5vw;} #history .history3 { top: 840px; right: 10vw;} #history .history4 { top: 1190px; right: 3vw;} #history table { width: 100%; border-collapse: separate; border-spacing: 0 10px;} #history th { width: 112px; padding: 32px 0; font-size: 1.9rem; white-space: nowrap;} #history th i { vertical-align: baseline; font-size: 2.7rem;} #history td { padding: 32px; background: #FAFAFA; font-weight: bold;} #global-works > header, .company-group .tabcontent > header { margin-bottom: -55px;} .company-group-tabs li { width: calc(50% - 12px); max-width: 360px;} .company-group .tabcontent { padding-bottom: 80px;} .group-company { display: grid; grid-template-columns: minmax(280px, 40%) 1fr; gap: 48px; align-items: stretch; padding: 40px; background: #FAFAFA;} .group-company + .group-company { margin-top: 32px;} /* 会社カード内の支店・センター等（名称は本文と同サイズ） */ .group-company-sub { margin-top: 20px;} .group-company-sub h4 { font-size: 1.5rem; color: #191970;} .group-company-sub .group-company-meta { margin-top: 8px;} /* 写真は黄金比（1:1.618）固定。元画像のサイズ差は object-fit: cover で吸収する */ .group-company-photo { align-self: center; width: 100%; aspect-ratio: 1.618 / 1; margin: 0; background: #191970; overflow: hidden;} .group-company-photo img { display: block; width: 100%; height: 100%; object-fit: cover;} .group-company-body { display: flex; flex-direction: column; justify-content: center;} .group-company-heading { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; margin-bottom: 24px;} .group-company-title { flex: 1 1 380px; min-width: 0;} .group-company h3 { margin-bottom: 12px; font-size: 2.4rem; line-height: 1.45;} .group-company-heading .group-company-en { margin-bottom: 0 !important;} .group-company-en { margin-bottom: 24px !important; font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700; line-height: 1.6; color: #191970;} .group-company-en::before { content: ''; display: block; width: 100%; height: 1px; margin-bottom: 12px; background: #191970;} .group-company-note { font-family: inherit; color: #B3261E;} .group-company-website { position: relative; flex: 0 0 auto; margin-left: auto; padding: 8px 38px 8px 18px; border: 2px solid #191970; border-radius: 999px; font-size: 1.4rem; font-weight: 700; line-height: 1.4; color: #191970; white-space: nowrap;} .group-company-website::after { content: '↗'; position: absolute; top: 50%; right: 14px; transform: translateY(-52%); font-size: 1.5rem; line-height: 1;} .group-company-website:hover { opacity: 1; background: #191970; color: #FFF;} .group-company-body > p:not(.group-company-en) { margin-bottom: 0;} .group-company-meta { display: grid; grid-template-columns: 6em 1fr; gap: 10px 18px; margin-top: 24px; line-height: 1.7;} .group-company-meta dt { font-weight: 700; color: #191970;} .group-company-meta dd { margin: 0;} #global-works .works-lead { display: grid; grid-template-columns: minmax(240px, 32%) 1fr; gap: 48px; align-items: center; padding: 48px; background: #FAFAFA;} .works-total { text-align: center; color: #191970;} .works-total span { display: block; margin-bottom: 12px; font-size: 1.4rem; font-weight: 700;} .works-total strong { font-family: 'Montserrat', sans-serif; font-size: clamp(5.4rem, 8vw, 9rem); font-variant-numeric: tabular-nums; line-height: .9;} .works-total i { display: inline-block; margin-left: 8px; font-size: 2.4rem; font-weight: 700;} .works-lead-text p:last-child { margin-bottom: 0;} #global-works .works-more { margin-top: 4px; text-align: right;} #global-works .works-more a { display: flex; justify-content: flex-end; align-items: center; padding: 12px 0; font-weight: bold; overflow: hidden;} #global-works .works-more a i { display: block; font-size: 1.3rem; font-weight: 600; white-space: nowrap;} #global-works .works-more a i::after { content: ''; display: inline-block; width: 19px; height: 19px; margin-left: 16px; background: url("img/common/arr.svg") center no-repeat; vertical-align: middle;} #global-works .works-more a:hover i::after { animation-name: hoverArrowToRight; animation-duration: 1.2s; animation-iteration-count: infinite;} #global-works > header { margin-bottom: -70px;} #global-works { padding-bottom: 40px;} .home #global-works { margin-top: 80px;} .works-chart-section h3, .major-clients-section h3 { margin-bottom: 32px; font-size: 2.6rem;} .works-chart-section h3::after, .major-clients-section h3::after { content: ''; display: block; width: 40px; height: 3px; margin-top: 16px; background: #191970;} .works-chart { display: grid; gap: 18px; padding: 0 20px;} .works-chart li { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: center;} .works-chart-head { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; align-items: baseline;} .works-area { display: inline-flex; align-items: center; gap: 8px; font-weight: 700;} .works-flag { width: 24px; height: 18px; flex-shrink: 0; border: 1px solid rgba(0, 0, 0, .1); object-fit: cover;} .works-number { justify-self: end; text-align: right; font-family: 'Montserrat', sans-serif; font-size: 2rem; font-weight: 700; color: #191970;} .works-percent { min-width: 4.4em; text-align: right; color: #666;} .works-bar { position: relative; height: 18px; overflow: hidden; background: #EEF0F4;} .works-bar-fill { display: block; width: var(--bar-width); height: 100%; background: linear-gradient(90deg, #191970 0%, #09A7E8 100%); transform: scaleX(0); transform-origin: left center; transition: transform 2.2s cubic-bezier(.16, 1, .3, 1); transition-delay: var(--bar-delay);} .works-chart-section.fadeInUp .works-bar-fill { transform: scaleX(1);} .major-client-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;} .major-client-card { padding: 32px; background: #FAFAFA;} .major-client-card h4 { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 2px solid #191970; font-size: 2rem;} .major-client-card li { position: relative; padding-left: 1em; font-size: 1.4rem; line-height: 1.7;} .major-client-card li::before { content: ''; position: absolute; top: .8em; left: 0; width: 4px; height: 4px; background: #191970;} .major-client-card li + li { margin-top: 8px;} #privacy section { max-width: 700px;} #privacy h2 { margin-bottom: 24px; font-size: 2rem;} #privacy h3 { margin-bottom: 24px; font-size: 1.7rem;} .wpcf7-form { margin-top: -120px; padding-top: 120px;} .form dt { text-align: left; font-weight: bold; line-height: 1.2;} .form dd { padding: 16px 0 32px; font-weight: bold;} .form .row { margin-bottom: 0;} .form .row > * { width: calc(50% - 24px);} .form .wpcf7-list-item { margin: 0 16px 8px 0;} .form dl > dd:last-of-type { padding-bottom: 0;} .form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="url"], .form input[type="date"], .form input[type="number"] { display: inline-block; width: 100%; padding: 8px 16px; background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: 3px; vertical-align: middle; font-size: 1.6rem;} .form select { width: 100%; padding: 8px 16px; background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: 3px; font-size: 1.6rem;} .form textarea { width: 100%; min-height: 320px; padding: 8px 16px; background: #F7F7F7; border: 1px solid #E0E0E0; border-radius: 3px; font-size: 1.6rem;} .form label { display: flex; margin: 8px 32px 8px 0; align-items: center;} .form label input { margin-right: 8px;} .form input[type="checkbox"] { display: none;} .form input[type="checkbox"] ~ span { position: relative; display: block; padding: 4px 0 4px 32px; font-weight: bold; line-height: 1;} .form input[type="checkbox"] ~ span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 20px; height: 20px; background: url("img/common/check.svg") center no-repeat;} .form input[type="checkbox"]:checked ~ span::before { background: url("img/common/checked.svg");} .form input[type="radio"] { display: none;} .form input[type="radio"] ~ span { position: relative; display: block; padding: 4px 0 4px 24px; line-height: 1;} .form input[type="radio"] ~ span::before { content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 16px; height: 16px; background: #FFF; border: 1px solid #CCC; border-radius: 50%;} .form input[type="radio"]:checked ~ span::before { background: #191970;} .submit { margin: 40px 0; text-align: center;} .submit input[type="submit"] { display: inline-block; margin: 0 16px; padding: 24px 120px; background: #191970 url("img/common/arr_w.svg") right 16px center no-repeat; font-size: 1.9rem; font-weight: bold; color: #FFF;} .submit input[type="submit"].disabled { background: #999;} .submit input[type="submit"]:not(.disabled):hover { opacity: 0.7;} .submit input[type="button"] { display: inline-block; margin: 0 16px; padding: 24px 80px; background: #999; font-weight: bold; color: #FFF;} .must { display: inline-block; margin-left: 16px; padding: 2px 4px; vertical-align: baseline; border: 1px solid #191970; font-size: 1.1rem; font-weight: bold; color: #191970;} .form ::-webkit-input-placeholder { font-weight: bold; color: #BABABA;} .form ::-moz-placeholder { font-weight: bold; color: #BABABA;} .form :-ms-input-placeholder { font-weight: bold; color: #BABABA;} .form input[readonly], .form select[readonly], .form textarea[readonly] { padding: 8px 0; background: none!important; border: none; border-bottom: 1px solid #CCC;} .thanks section { padding-top: 80px; text-align: center;} /* 送信ボタンセンター（スピナーをブロック要素に変更） */ .wpcf7-spinner { display: block; } /* Contact Form 7 */ .form { padding: 56px 64px; background: #FAFAFA; border-top: 4px solid #191970; box-shadow: 0 18px 50px rgba(25, 25, 112, .08); } .form .wpcf7-form > p:first-of-type { margin-bottom: 40px; padding: 18px 22px; background: #FFF; border-left: 4px solid #999; font-weight: 600; } .form dt label { gap: 8px; margin: 0; } .form .must, .form .optional { display: inline-block; order: -1; flex: 0 0 auto; margin: 0; padding: 3px 7px; border: 1px solid; border-radius: 2px; font-size: 1.1rem; font-weight: bold; line-height: 1.4; letter-spacing: .05em; color: #FFF; } .form .must { background: #191970; border-color: #191970; } .form .optional { background: #777; border-color: #777; } .lang-en .form .must, .lang-en .form .optional { min-width: 72px; text-align: center; } .form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="url"], .form input[type="date"], .form input[type="number"], .form select, .form textarea { padding: 14px 16px; background-color: #FFF; border-color: #D8DBE5; border-radius: 2px; font-weight: 500; transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease; } .form select { padding-right: 48px; background-image: linear-gradient(45deg, transparent 50%, #191970 50%), linear-gradient(135deg, #191970 50%, transparent 50%); background-position: calc(100% - 20px) calc(50% - 2px), calc(100% - 14px) calc(50% - 2px); background-repeat: no-repeat; background-size: 6px 6px; } .form textarea { min-height: 240px; } .form input[type="text"]:focus, .form input[type="tel"]:focus, .form input[type="email"]:focus, .form input[type="url"]:focus, .form input[type="date"]:focus, .form input[type="number"]:focus, .form select:focus, .form textarea:focus { background-color: #FFF; border-color: #191970; box-shadow: 0 0 0 3px rgba(25, 25, 112, .1); outline: none; } .form .wpcf7-not-valid { border-color: #C53333; } .form .wpcf7-not-valid-tip { display: block; margin-top: 8px; font-size: 1.3rem; font-weight: 500; line-height: 1.6; } .form .wpcf7-response-output { margin: 32px 0 0!important; padding: 16px 20px!important; background: #FFF; line-height: 1.8; } .privacy-agreement { margin-top: 40px; padding: 24px 28px; background: #FFF; border: 1px solid #D8DBE5; text-align: center; } .form .privacy-agreement .wpcf7-list-item { margin: 0; } .form .privacy-agreement label { justify-content: center; margin: 0; } .privacy-agreement a { color: #191970; text-decoration: underline; text-underline-offset: 3px; } .form input[type="checkbox"] { position: absolute; display: block; width: 1px; height: 1px; margin: 0; overflow: hidden; clip-path: inset(50%); opacity: 0; } .form input[type="checkbox"]:focus-visible ~ span::before { outline: 3px solid rgba(25, 25, 112, .25); outline-offset: 3px; } .submit input[type="submit"] { border-radius: 2px; box-shadow: 0 10px 24px rgba(25, 25, 112, .2); transition: opacity .2s ease, box-shadow .2s ease; } .postal-lookup-status { display: block; margin-top: 8px; font-size: 1.25rem; font-weight: 500; line-height: 1.6; color: #666; } .postal-lookup-status.is-success { color: #176B45; } .postal-lookup-status.is-error { color: #C53333; } .product li { position: relative; display: flex; justify-content: space-between; width: 46%; padding: 60px 0;} .product li:nth-child(4n+3)::before { content: ''; position: absolute; top: 0; left: -5.6vw; width: 100vw; height: 100%; background: #FAFAFA; z-index: -1;} .product li figure { width: 40%;} .product li > div { width: 56%;} .product h3 { font-size: 2.5rem;} .product i { display: block; margin: 4px 0 16px; font-size: 1.1rem; font-weight: 600; color: #191970;} .news { margin: 0 auto;} header + .news { margin-top: 100px;} #contents { width: 70%;} .news-single-column #contents { width: 100%;} .newslist li { display: flex; justify-content: space-between; margin-bottom: 64px;} .newslist li > figure { width: 30%;} .newslist li > div { width: calc(70% - 40px);} .newslist li .date { margin-bottom: 4px; font-size: 1.4rem; font-weight: bold; color: #222;} .newslist li h3 { margin-bottom: 8px; padding-bottom: 8px; border-bottom: 2px solid #222222; font-size: 2rem;} .newslist li p { margin-bottom: 16px;} .product li figure, .newslist li > figure { aspect-ratio: 4 / 3; overflow: hidden;} .newslist li > figure a { display: block; width: 100%; height: 100%;} .product li figure img, .newslist li > figure img { display: block; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .viewmore { text-align: right;} .viewmore a { display: inline-block; padding: 8px 24px; background: #191970; border-radius: 32px; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; color: #FFF;} #body h2 { position: relative; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid #D0D0D0; font-size: 3rem; font-weight: 700;} #body h2::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 150px; height: 2px; background: #191970;} #body h3, #voice h3 { position: relative; margin-bottom: 32px; padding-bottom: 16px; border-bottom: 2px solid #D0D0D0; font-size: 2.2rem; font-weight: 700;} #body h3::before, #voice h3::before { content: ''; display: inline-block; width: 13px; height: 5px; margin-right: 16px; vertical-align: middle; background: #191970;} #body h4 { position: relative; margin-bottom: 32px; padding-bottom: 16px;border-bottom: 1px solid #D0D0D0; font-size: 1.8rem; font-weight: 700;} #body h4::before { content: ''; display: inline-block; width: 13px; height: 2px; margin-right: 16px; vertical-align: middle; background: #191970;} #body h5 { margin-bottom: 24px; font-size: 1.8rem; font-weight: 700;} #body * + h3, #body * + h4, #body * + h5, #body * + ul, #body * + table { margin-top: 64px;} #body .date { margin: 24px 0; font-size: 1.4rem; font-weight: 700; color: #191970;} #body ul li { padding-left: 24px; background: url("img/common/checked.svg") 0 center no-repeat; font-weight: 700;} #body ul li:not(:first-child) { margin-top: 8px;} #body ol { margin-left: 2em; margin-bottom: 48px; list-style: decimal;} #body table { width: calc(100% + 32px); border-collapse: separate; border-spacing: 16px; margin-left: -16px; margin-right: -16px;} #body th, #body td{ padding: 16px 0;} #body th { width: 25%; text-align: left; vertical-align: top; border-bottom: 2px solid #191970; font-weight: 700;} #body td { border-bottom: 2px solid #D1D1D1;} #body p:not(:last-child) { padding-bottom: 0;} .alignright { float: right; margin-left: 3em; margin-bottom: 2em;} .alignleft { float: left; margin-right: 3em; margin-bottom: 2em;} .aligncenter { display: block; margin-left: auto; margin-right: auto; text-align: center;} .size-thumbnail { max-width: 250px;} .paging { display: flex; justify-content: center; align-items: center; margin-top: 63px; font-weight: bold;} .nav-numbers { padding: 16px;} .pagination a { display: inline-block; margin: 2px; padding: 0 14px;} .pagination a:not(.prev):not(.next):not(.top) { padding: 8px 14px; border: 1px solid #333333;} .pagination a strong { display: inline-block; width: 21px; height: 21px; text-align: center; background: #191970; border-radius: 50%; color: #FFF;} .pagination a.top { border-left: 1px solid #333; border-right: 1px solid #333;} .pagination span { display: inline-block; margin: 2px; padding: 8px 14px;} .pagination span.current { background-color: #222; color: #FFF;} #aside { width: calc(30% - 80px);} #aside h4 { padding-bottom: 16px; border-bottom: 2px solid #222; font-size: 2.1rem; font-weight: 700;} #aside .box { margin-bottom: 80px;} #aside li a, .archive-list a, .archive-list span { display: block; padding: 16px 32px 16px 0; background: url("img/common/arr.svg") right center no-repeat; border-bottom: 1px solid #222222; cursor: pointer;} .archive-list > li:not(.on) > ul { display: none;} .month-archive-list > li { text-indent: 2em;} .month-archive-list > li a { background-image: url("img/common/arr_w.svg");} .diecast { margin: 96px 0 200px;} .diecast::after { content: ''; position: absolute; bottom: -88px; left: 0; width: 100%; height: 100%; background: #FAFAFA; z-index: -1;} .diecast > div { align-items: flex-start;} .diecast > div:not(.movie) { width: 47%; margin: 0; padding: 160px 5.6vw 0;} .diecast > div { flex-wrap: nowrap;} .diecast > div h2 { position: relative; top: -260px; margin-left: 4vw; margin-bottom: -260px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3.5vh; font-weight: 500; line-height: 1.8; letter-spacing: 0.16em; z-index: 10;} .diecast > div h2::after { content: ''; position: absolute; top: 120px; left: -126px; width: 108px; height: 108px; background: url("img/diecasting/slush.svg") left center no-repeat;} .diecast figure, .diecast .movie { width: 52vw; margin: 0; margin-right: calc(-50vw + 50%);} .diecast .movie video { width: 100%;} .diecast.reverse > figure { margin-right: 0; margin-left: calc(-50vw + 50%);} #flow { padding-left: 0; padding-right: 0;} #flow li { position: relative; margin-bottom: 50px; padding: 96px 5.6vw; background-position: center; background-repeat: no-repeat; background-size: cover;} #flow li::before { content: ''; position: absolute; bottom: 0; left: 4vw; width: 70px; height: calc(100% + 50px); background: #191970;} #flow li::after { content: ''; position: absolute; bottom: -50px; left: 4vw; width: 0; height: 0; border-style: solid; border-width: 50px 35px 0 35px; border-color: #c7121e transparent transparent transparent;} #flow li:nth-child(1) { background-image: url("img/feature/flow1.jpg"); z-index: 4;} #flow li:nth-child(2) { background-image: url("img/feature/flow2.jpg"); z-index: 3;} #flow li:nth-child(3) { background-image: url("img/feature/flow3.jpg"); z-index: 2;} #flow li:nth-child(4) { background-image: url("img/feature/flow4.jpg"); z-index: 1;} #flow li:nth-child(even)::before { background: #961D24;} #flow li:nth-child(even)::after { border-color: #961D24 transparent transparent transparent;} #flow li:nth-child(1)::before { height: calc(100% - 50px);} #flow li:nth-child(4)::before { bottom: 100px;} #flow li:nth-child(4)::after { bottom: 50px;} #flow .row { align-items: center; max-width: 1200px; margin: 0 auto;} #flow .row > div:nth-child(1) { position: relative; color: #FFF; z-index: 5;} #flow .row > div:nth-child(2) { position: relative; padding: 24px; background: #FFF; z-index: 5;} #flow .row i { font-size: 1.1rem;} #flow .row h3 { font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 3.5rem; font-weight: 500; line-height: 1.8; letter-spacing: 0.16em;} .subtitle { margin-bottom: 24px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 2.4rem; font-weight: 500; line-height: 1.6; letter-spacing: 0.06em;} #facility .row { margin: 0 auto;} #facility .row > div { width: 46%;} #facility table { width: 100%; border-collapse: collapse; text-align: center; font-size: 1.7rem; font-weight: bold;} #facility th { padding: 8px; background: #191970; border: 1px solid #CBCBCB; color: #FFF;} #facility td { padding: 8px; border: 1px solid #CBCBCB;} #facility td.total { text-align: center; background: #EDEDED;} #strength header { margin-bottom: 64px;} #voice li { position: relative; padding: 96px 0;} #voice li:first-child { padding-top: 0;} #voice li:nth-child(even)::before { content: ''; position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 100%; background: #FAFAFA;} #voice li > figure { width: 25%; text-align: center;} #voice li > figure img { width: auto; max-width: 100%;} #voice li figcaption { display: block; margin: 16px 0 32px; font-size: 1.3rem; font-weight: bold;} #voice li > div { width: 68%;} @media only screen and (max-width: 1380px){ .diecast { display: block;} .diecast > div:not(.movie) { width: auto; padding-bottom: 0;} .diecast figure, .diecast .movie { width: auto; margin: 0!important; padding: 0;} .diecast > div h2 { top: 0; bottom: 30px;} .diecast > div h2::after { top: auto; bottom: 0;} #gallery section::before { width: max(84%, 62vw); height: calc(100% + 24px);} } @media only screen and (max-width: 1024px){ #headercontent { height: 56px;} .tab { top: 56px; scroll-margin-top: 56px;} body.drawer-open { overflow: hidden;} #nav { pointer-events: none; opacity: 0; position: fixed; right: -40px; top: 0; width: 100%; height: 100vh; height: 100dvh; padding-top: 40px; background: rgba(34,34,34,.96);; color: #FFF; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; z-index: 200; transition: .8s cubic-bezier(.19,1,.22,1);} #nav > ul { padding: 24px 24px 24px 32px;} #nav > ul > li { margin-bottom: 22px;} #nav > ul > li > a { font-size: 1.7rem; font-weight: bold; color: #FFF;} #nav > ul > li ul { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 16px; margin-left: 18px;} #nav > ul > li ul li { width: calc((100% - 16px) / 2); margin-top: 14px;} #nav > ul > li ul li a { font-size: 1.4rem; color: #FFF;} #nav > ul > li.nav-cta > a i { display: none;} .nav-label-pc { display: none;} .nav-label-sp { display: inline;} #open { display: block; width: 50px; height: 50px; text-align: center; z-index: 300; cursor: pointer;} #open div { position: relative; display: block; width: 26px; height: 26px; margin: 6px 12px; transition: .2s linear;} #open span { position: absolute; left: 0; display: block; width: 26px; height: 2px; background: #FFF; transition: .2s linear;} #open span:nth-child(1) { top: 8px;} #open span:nth-child(2) { top: 16px;} #open span:nth-child(3) { top: 24px;} .open #open span:nth-child(1) { top: 16px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg);} .open #open span:nth-child(2) { width: 0; left: -24px;} .open #open span:nth-child(3) { top: 16px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg);} .open #nav { pointer-events: auto; opacity: 1; right: 0;} .open #nav li { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);} #message section > div, #vision section > div, #recruit section.full > div { margin: 0;} #message figure img, #vision figure img, #recruit section.full figure img { height: auto;} #vision figure.noimg, #recruit figure.noimg { height: 240px;} #history section > div { position: relative; top: 0!important; right: 0!important; width: auto; margin-bottom: 8px;} .group-company { grid-template-columns: 1fr; gap: 24px;} #global-works .works-lead { grid-template-columns: 1fr; gap: 24px;} .works-chart li { grid-template-columns: 1fr;} .major-client-grid { grid-template-columns: 1fr;} #voice li { display: block;} #voice li > figure { width: auto;} #voice li > div { width: auto;} #gallery section::before { width: max(84%, 62vw); height: calc(100% + 24px);} #gallery .gallery-body { width: 43%; padding-right: clamp(48px, 6vw, 72px);} #gallery .gallery-slider { width: 52vw; margin-top: 72px;} } #business .lead { max-width: 900px; margin: 0 auto 48px; text-align: center;} .biz-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto;} .biz-col { background: #FAFAFA;} .biz-col figure { aspect-ratio: 16 / 10; overflow: hidden;} .biz-col figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .biz-col figure.noimg { background: #191970;} .biz-body { padding: 32px;} .biz-body > i { display: inline-block; margin-bottom: 10px; color: #191970; font-size: 1.2rem; font-weight: 700;} .biz-body h2 { margin-bottom: 18px; font-size: 2.4rem; line-height: 1.5;} .biz-body .more { margin-top: 24px;} #business header, #products header, #industrial-furnaces header, #plant-engineering header, #cases header, #technology-documents header { margin-bottom: 0;} .industrial-section-title { margin: 0 0 36px; text-align: center; font-size: 2.6rem; font-weight: 700; line-height: 1.5;} .industrial-section-title::after { content: ''; display: block; width: 44px; height: 3px; margin: 16px auto 0; background: #191970;} .industrial-section-title .title-sub { display: block; margin-top: 4px; font-size: 1.6rem; letter-spacing: .05em;} .lineup-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 32px;} .lineup-grid li { display: flex; align-items: center; gap: 24px; padding: 20px; background: #FAFAFA;} .lineup-grid figure { flex: 0 0 180px; aspect-ratio: 16 / 10; margin: 0; background: #191970;} .lineup-grid figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .lineup-grid figure.noimg-gray, .related-product-card figure.noimg-gray { background: #6f6f6f;} .lineup-year { display: block; margin-bottom: 6px; color: #191970; font-family: 'Montserrat', sans-serif; font-size: 1.3rem; font-weight: 700;} .lineup-grid .lineup-name { margin: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.6;} .topic-feature { padding: 32px; background: #FAFAFA;} .topic-feature h4, .topic-card h4 { margin-bottom: 16px; color: #191970; font-size: 2rem; font-weight: 700; line-height: 1.5;} .topic-feature p { margin-bottom: 0;} .topic-feature .more { margin-top: 24px;} .topic-movie { display: flex; justify-content: center; align-items: center; width: 100%; margin-top: 28px; padding: 32px; border: 1px solid #E6E6E6; background: #FFF;} .topic-movie-inner { position: relative; width: 80%; aspect-ratio: 16 / 9; overflow: hidden; background: #000;} .topic-movie iframe { position: absolute; inset: 0; width: 100%; height: 100%;} .topic-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px;} .topic-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid #E6E6E6; background: #FFF;} .topic-card ul { flex: 1; margin: 0; line-height: 2;} .topic-card li { position: relative; padding-left: 18px;} .topic-card li::before { content: ''; position: absolute; top: .9em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: #191970;} .topic-card .more { margin-top: auto; padding-top: 24px;} .dspace-intro { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); align-items: stretch; overflow: hidden; border: 1px solid #E1E5EF; background: #F0F2F8;} .dspace-intro-body { min-width: 0; padding: clamp(40px, 5vw, 64px);} .dspace-intro-title { position: relative; margin: 0 0 28px; padding: 0 0 18px; border-bottom: 2px solid #191970; color: #191970; font-size: clamp(2.2rem, 2.6vw, 3rem); font-weight: 700; line-height: 1.55;} .dspace-intro-title::after { content: ''; position: absolute; bottom: -8px; left: 32px; width: 14px; height: 14px; border-right: 2px solid #191970; border-bottom: 2px solid #191970; background: #F0F2F8; transform: rotate(45deg);} .dspace-intro-body > p:not(:last-child) { margin-bottom: 22px;} .dspace-intro-lead { color: #191970; font-size: 1.8rem; font-weight: 700; line-height: 1.8;} .dspace-intro-summary { margin-top: 40px; padding-top: 32px; border-top: 1px solid #C9D0E5;} .dspace-intro-subtitle { margin: 0 0 24px; color: #191970; font-size: 2.2rem; font-weight: 700; line-height: 1.5;} .dspace-intro-detail h4 { margin: 0 0 16px; padding-left: 16px; border-left: 3px solid #191970; color: #191970; font-size: 1.8rem; font-weight: 700; line-height: 1.5;} .dspace-intro-detail p { margin: 0; line-height: 2;} .dspace-intro-image { align-self: stretch; width: 100%; margin: 0; background: #F0F2F8;} .dspace-intro-image img { display: block; width: 100%; height: auto;} @media only screen and (min-width: 769px){ #product-d-space > .dspace-system-section { padding-bottom: 36px;} } .dspace-system-grid { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px;} .dspace-system-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 0 32px 32px; border: 1px solid #E1E5EF; background: #FFF;} .dspace-system-step { display: flex; justify-content: center; align-items: center; min-height: 144px; margin: 0 -32px 30px; background: #F0F2F8;} .dspace-system-step span { display: flex; justify-content: center; align-items: center; width: 80px; height: 80px; border: 1px solid #D5DBEC; border-radius: 50%; background: #FFF; color: #191970; font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1;} .dspace-system-card h4 { margin-bottom: 18px; color: #191970; font-size: 2rem; font-weight: 700; line-height: 1.5;} .dspace-system-card > p { margin: 0; line-height: 2;} .dspace-system-card + .dspace-system-card::before { content: ''; position: absolute; top: 72px; left: -24px; width: 24px; height: 24px; transform: translateY(-50%); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23191970' stroke-width='2.5'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E") center / 14px no-repeat;} .dspace-system-loopback { position: absolute; top: 100%; left: calc((100% - 48px) / 6); right: calc((100% - 48px) / 6); height: 26px; border: 2px solid #191970; border-top: 0; border-radius: 0 0 13px 13px; pointer-events: none;} .dspace-system-loopback::before { content: ''; position: absolute; top: -1px; left: -6px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #191970;} .dspace-system-loopback span { display: inline-flex; align-items: center; gap: 8px; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%); padding: 0 14px; background: #FFF; color: #191970; font-size: 1.3rem; font-weight: 700; line-height: 1.6; letter-spacing: .04em; white-space: nowrap;} .dspace-system-loopback span::before { content: ''; width: 15px; height: 15px; flex: 0 0 auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23191970' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7'/%3E%3Cpolyline points='3 4 3 8 7 8'/%3E%3C/svg%3E") center / contain no-repeat;} .dspace-effect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 24px; counter-reset: dspace-effect;} .dspace-effect-card { position: relative; display: flex; flex-direction: column; overflow: hidden; padding: 30px 28px 28px; border: 1px solid #E6E6E6; background: #FFF; counter-increment: dspace-effect;} .dspace-effect-card::before { content: counter(dspace-effect, decimal-leading-zero); position: absolute; top: -.08em; right: -.06em; z-index: 0; color: rgba(25, 25, 112, .07); pointer-events: none; font-family: 'Montserrat', sans-serif; font-size: 7.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: .8;} .dspace-effect-card h4 { position: relative; z-index: 1; margin-bottom: 20px; padding-bottom: 16px; padding-left: 30px; border-bottom: 1px solid #D8DDF0; color: #191970; font-size: 2rem; font-weight: 700; line-height: 1.5;} .dspace-effect-card p { position: relative; z-index: 1; flex: 1; margin: 0; line-height: 2;} .plant-major-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px;} .plant-major-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; padding: 0 32px 32px; border: 1px solid #E1E5EF; background: #FFF;} .plant-major-icon { position: relative; display: flex; justify-content: center; align-items: center; min-height: 144px; margin: 0 -32px 30px; background: #F0F2F8; background-size: cover; background-position: center; background-repeat: no-repeat;} .plant-major-icon::before { content: ""; position: absolute; inset: 0; background: rgba(25, 25, 112, .38);} .plant-major-icon svg { position: relative; z-index: 1; width: 80px; height: 80px; padding: 18px; border: 1px solid #D5DBEC; border-radius: 50%; background: #FFF; color: #191970;} .plant-major-icon--dross { background-image: url(img/business/alumi_dross.webp);} .plant-major-icon--scrap { background-image: url(img/business/alumi_scrap.webp);} .plant-major-icon--alloy { background-image: url(img/business/alumi_alloy.webp);} .plant-major-card h4 { min-height: 3em; margin-bottom: 18px; color: #191970; font-size: 2rem; font-weight: 700; line-height: 1.5;} .plant-major-card > p { margin: 0 0 26px; line-height: 2;} .plant-major-scope { margin-top: auto; padding-top: 20px; border-top: 1px solid #D8DDF0;} .plant-major-scope .plant-major-scope-label { margin: 0 0 12px; color: #191970; font-size: 1.2rem; font-weight: 700; letter-spacing: .08em; line-height: 1.5;} .plant-major-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; margin: 0;} .plant-major-list li { display: flex; align-items: center; padding: 6px 10px; background: #F0F2F8; color: #333; font-size: 1.3rem; line-height: 1.5;} .plant-strength-list { display: grid; gap: 32px;} .plant-strength-item { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 340px; overflow: hidden; background: #FAFAFA;} .plant-strength-image { width: 100%; height: 100%; min-height: 340px; margin: 0; background: #191970;} .plant-strength-image.plant-strength-photo, .plant-strength-image.plant-strength-movie { align-self: center; height: auto; min-height: 0; aspect-ratio: 1000 / 667;} .plant-strength-image > img { display: block; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .plant-strength-movie { position: relative; overflow: hidden; background: #000;} .plant-strength-movie iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0;} .plant-strength-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: clamp(36px, 4vw, 56px);} .plant-strength-label { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; color: #191970; font-family: 'Montserrat', sans-serif; font-weight: 700; line-height: 1;} .plant-strength-label::after { content: ''; flex: 1; height: 1px; background: #C9D0E5;} .plant-strength-label span { font-size: 1.3rem; letter-spacing: .12em;} .plant-strength-label strong { font-size: 4.8rem; font-variant-numeric: tabular-nums; letter-spacing: -.04em;} .plant-strength-body h4 { margin-bottom: 18px; color: #191970; font-size: 2.4rem; font-weight: 700; line-height: 1.5;} .plant-strength-body > p:last-child, .plant-strength-body > .plant-strength-text { margin: 0; line-height: 2;} .plant-strength-body .plant-strength-link { margin-top: 40px; text-align: left;} .plant-strength-link a { max-width: 240px; padding: 12px 40px 12px 20px; font-size: 1.4rem;} .plant-strength-item:nth-child(odd) .plant-strength-body { padding-right: 0;} .plant-strength-item:nth-child(even) .plant-strength-image { order: 2;} .plant-strength-item:nth-child(even) .plant-strength-body { order: 1; padding-left: 0;} .project-case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 24px;} .project-case-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid #E1E5EF; border-top: 4px solid #191970; background: #FFF;} .project-case-card .project-case-label { margin-bottom: 6px; color: #191970; font-size: 1.2rem; font-weight: 700; line-height: 1.5;} .project-case-card h4 { margin-bottom: 20px; padding-bottom: 16px; border-bottom: 1px solid #D8DDF0; color: #191970; font-family: 'Montserrat', sans-serif; font-size: 2.4rem; font-weight: 700; line-height: 1.3;} .project-case-meta { display: grid; gap: 12px; margin: 0;} .project-case-meta > div { display: grid; grid-template-columns: 6em 1fr; gap: 12px; align-items: center;} .project-case-meta dt { color: #191970; font-size: 1.3rem; font-weight: 700; line-height: 1.6;} .project-case-meta dd { margin: 0; line-height: 1.7;} .project-case-region { display: inline-flex; align-items: center; gap: 8px;} .cases-lead { text-align: center;} .cases-lead p { margin-bottom: 0;} .case-study-list { display: grid; gap: 48px; counter-reset: case-study;} .case-study-card { overflow: hidden; border: 1px solid #D8DDF0; background: #FFF; counter-increment: case-study;} .case-study-heading { padding: clamp(28px, 4vw, 48px); background: #F0F2F8;} .case-study-label { margin-bottom: 12px; color: #191970; font-family: 'Montserrat', sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: .12em; line-height: 1.5; text-transform: uppercase;} .case-study-label::after { content: ' ' counter(case-study, decimal-leading-zero);} .case-study-heading h3 { margin: 0; color: #191970; font-size: clamp(2.2rem, 3vw, 3.2rem); font-weight: 700; line-height: 1.5;} .case-study-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding: 32px 32px 0;} .case-study-gallery figure { aspect-ratio: 3 / 2; margin: 0; overflow: hidden; background: #EDEDED;} .case-study-gallery figure img { display: block; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .case-study-body { padding: 28px 32px 36px;} .case-study-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0;} .case-study-meta > div { min-width: 0; padding: 0 24px; border-left: 1px solid #D8DDF0;} .case-study-meta > div:first-child { padding-left: 0; border-left: 0;} .case-study-meta > div:last-child { padding-right: 0;} .case-study-meta dt { margin-bottom: 6px; color: #191970; font-size: 1.3rem; font-weight: 700; line-height: 1.6;} .case-study-meta dd { margin: 0; line-height: 1.7;} .document-lead { text-align: center;} .document-lead p { margin-bottom: 0;} .document-section-title { margin: 0 0 36px; text-align: center; font-size: 2.6rem; font-weight: 700; line-height: 1.5;} .document-section-title::after { content: ''; display: block; width: 44px; height: 3px; margin: 16px auto 0; background: #191970;} .document-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;} .document-grid-patent { grid-template-columns: minmax(0, 1fr); max-width: 588px;} .document-card { min-height: 208px; background: #FAFAFA;} .document-card-type { display: inline-block; margin-bottom: 12px; color: #191970; font-family: 'Montserrat', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;} .document-card h4 { flex: 1; margin-bottom: 24px;} .product-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; max-width: 1200px; margin: 0 auto;} .product-col { display: flex; flex-direction: column; background: #FAFAFA;} .product-col figure { aspect-ratio: 16 / 10; overflow: hidden;} .product-col figure img { width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .product-col figure.noimg { background: #191970;} .product-body { display: flex; flex-direction: column; flex: 1; padding: 28px;} .product-body > i { display: inline-block; margin-bottom: 8px; color: #191970; font-size: 1.2rem; font-weight: 700;} .product-body h3 { margin-bottom: 14px; font-size: 1.8rem; line-height: 1.5;} .product-body > p:not(.more) { flex: 1;} .product-body .more { margin-top: 20px;} .related-products-head { margin-bottom: 36px; text-align: center;} .related-products-head i { display: block; font-family: 'Montserrat', sans-serif; font-size: 3rem; font-weight: 700; line-height: 1.3;} .related-products-head h3 { margin: 4px 0 0; font-size: 1.7rem; line-height: 1.5;} .related-products-head::after { content: ''; display: block; width: 44px; height: 3px; margin: 16px auto 0; background: #191970;} .related-products-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px;} .related-product-card { display: grid; grid-template-columns: 225px minmax(0, 1fr); gap: 20px; align-items: center; padding: 20px; border: 1px solid #D8DDF0; background: #FAFAFA;} .related-product-card figure { aspect-ratio: 16 / 10; margin: 0; overflow: hidden; background: #EDEDED;} .related-product-card figure img { display: block; width: 100%; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .related-product-body { min-width: 0;} .related-product-body h4 { margin: 0; font-size: 1.7rem; line-height: 1.5;} .related-product-body > i { display: block; margin-top: 6px; color: #191970; font-size: 1.2rem; font-weight: 700;} .related-product-body .more { margin-top: 16px;} /* 製品詳細（各炉ページ）。写真・図面・カタログPDFは旧サイトURLを仮参照中 */ .product-detail header { margin-bottom: 0;} /* 見出し直下の製品写真。上マージン-68pxはheader::afterの下マージン44pxと相殺され、青縦線の下端が写真に24px重なる */ .product-hero { max-width: 720px; margin: -68px auto 64px;} .product-hero-slider { position: relative;} .product-hero-slides { position: relative; overflow: hidden;} .product-hero-slide { display: block; width: 100%; opacity: 0; transition: opacity 1s ease;} .product-hero-slide:first-child { position: relative;} .product-hero-slide:not(:first-child) { position: absolute; inset: 0; height: 100%; object-fit: cover; font-family: 'object-fit: cover;';} .product-hero-slide.is-active { opacity: 1;} .product-hero-pagination { position: absolute; bottom: 32px; left: 32px; z-index: 2; display: flex; gap: 8px;} .product-hero-page { width: auto; height: auto; margin: 0; padding: 3px 12px; border: 1px solid #FFF; border-radius: 0; background: rgba(255, 255, 255, .88); color: #191970; cursor: pointer; font-family: 'Montserrat', sans-serif; font-size: 1.4rem; font-weight: 700; line-height: 1.5;} .product-hero-page.is-active { border-color: #191970; background: #191970; color: #FFF;} .product-hero-page:focus-visible { outline: 3px solid #FFF; outline-offset: 2px;} /* 英語版製品ラインナップ：製品写真下に正式英語名称のキャプション（日本語版は figcaption なしのため影響なし） */ .product-hero figcaption { margin-top: 14px; color: #191970; text-align: center; font-size: 1.5rem; font-weight: 700; letter-spacing: .04em; line-height: 1.6;} .product-detail .topic-grid { counter-reset: product-feature;} .product-detail .topic-card { position: relative; overflow: hidden; padding-top: 30px; counter-increment: product-feature;} .product-detail .topic-card::before { content: counter(product-feature, decimal-leading-zero); position: absolute; top: -.08em; right: -.06em; z-index: 0; color: rgba(25, 25, 112, .07); pointer-events: none; font-family: 'Montserrat', sans-serif; font-size: 7.2rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: .8;} .product-detail .topic-card h4 { position: relative; z-index: 1; margin-bottom: 20px; padding-bottom: 16px; padding-left: 30px; border-bottom: 1px solid #D8DDF0;} .product-detail .topic-card h4::before, .product-detail .topic-card h4::after, .dspace-effect-card h4::before, .dspace-effect-card h4::after { content: ''; position: absolute; top: calc(.75em - 10px); left: 0; width: 20px; height: 20px; background: url("img/common/check.svg") center / contain no-repeat;} .product-detail .topic-card h4::after, .dspace-effect-card h4::after { background-image: url("img/common/checked.svg"); opacity: 0; transition: opacity .3s;} .product-detail .topic-card:hover h4::after, .dspace-effect-card:hover h4::after { opacity: 1;} .product-detail .topic-card p { position: relative; z-index: 1; flex: 1; margin: 0; line-height: 2;} .seh-overview { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); overflow: hidden; border: 1px solid #E1E5EF; background: #F0F2F8;} .seh-overview-image { display: flex; justify-content: center; align-items: center; min-height: 360px; margin: 0; padding: 40px; background: #E7EAF3;} .seh-overview-image img { display: block; width: auto; max-width: 100%; height: auto;} .seh-overview-body { min-width: 0; padding: clamp(36px, 4vw, 56px);} .seh-overview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0;} .seh-overview-stats > div { min-width: 0; padding: 20px 16px; border: 1px solid #D8DDF0; background: #FFF; text-align: center;} .seh-overview-stats dt { margin-bottom: 8px; color: #191970; font-size: 1.3rem; font-weight: 700; letter-spacing: .04em; line-height: 1.5;} .seh-overview-stats dd { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 8px; margin: 0; color: #191970; line-height: 1.4;} .seh-overview-stats dd strong { font-family: 'Montserrat', sans-serif; font-size: clamp(2rem, 2vw, 2.6rem); font-weight: 700; letter-spacing: -.03em;} .seh-overview-stats dd span { font-size: 1.3rem; font-weight: 700;} .seh-overview-stats .seh-overview-stat-text { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.6;} @media only screen and (min-width: 1025px){ .seh-overview-stats > div:nth-child(-n+2) { display: flex; flex-direction: column; justify-content: center;} } .seh-recommended { margin-top: 24px; padding: 24px; border: 1px solid #D8DDF0; background: #FFF;} .seh-recommended h4 { position: relative; margin: 0 0 18px; padding-left: 30px; color: #191970; font-size: 1.8rem; font-weight: 700; line-height: 1.5;} .seh-recommended h4::before { content: ''; position: absolute; top: calc(.75em - 10px); left: 0; width: 20px; height: 20px; background: url("img/common/check.svg") center / contain no-repeat;} .seh-recommended ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0;} .seh-recommended li { position: relative; display: flex; align-items: center; min-height: 52px; padding: 10px 12px 10px 34px; background: #F0F2F8; line-height: 1.6;} .seh-recommended li::before { content: ''; position: absolute; top: 50%; left: 13px; width: 10px; height: 10px; border: 3px solid #191970; border-radius: 50%; transform: translateY(-50%);} .seh-detail-list { display: grid; gap: 24px;} .seh-detail-item { display: grid; grid-template-columns: 260px minmax(0, 1fr); overflow: hidden; border: 1px solid #E1E5EF; background: #FAFAFA;} .seh-detail-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) 260px;} .seh-detail-image { display: flex; justify-content: center; align-items: center; min-height: 230px; margin: 0; padding: 30px; background: #F0F2F8;} .seh-detail-image img { display: block; width: auto; max-width: 100%; height: auto;} .seh-detail-body { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 36px 44px;} .seh-detail-body h4 { margin: 0 0 18px; padding-left: 18px; border-left: 3px solid #191970; color: #191970; font-size: 2rem; font-weight: 700; line-height: 1.5;} .seh-detail-body > p { margin: 0; line-height: 2;} .seh-detail-body > p:not(:last-child) { margin-bottom: 0;} .seh-detail-body > p + p, .seh-detail-body > .seh-performance-list + p { margin-top: 16px;} .seh-detail-body > .seh-detail-note { align-self: flex-start; margin-top: 14px; padding: 4px 12px; background: #E7EAF3; color: #191970; font-size: 1.3rem; font-weight: 700; line-height: 1.6;} .seh-detail-item:nth-child(even) .seh-detail-image { order: 2;} .seh-detail-item:nth-child(even) .seh-detail-body { order: 1;} .seh-performance-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 20px 0;} .seh-performance-list li { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid #D8DDF0; background: #FFF;} .seh-performance-list span { color: #191970; font-size: 1.2rem; font-weight: 700; line-height: 1.5;} .seh-performance-list strong { font-family: 'Montserrat', sans-serif; font-size: 1.6rem; line-height: 1.5;} .product-photo, .product-drawing { max-width: 560px; margin: 40px auto 0;} .product-drawing { margin: 0 auto 40px;} .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;} .table-scroll .spec-table { min-width: 720px;} .spec-table { width: 100%; border-collapse: collapse; text-align: center; font-size: 1.5rem;} .spec-table th, .spec-table td { padding: 10px 8px; border: 1px solid #CBCBCB; line-height: 1.6;} .spec-table thead th { background: #191970; color: #FFF; font-weight: bold; white-space: nowrap;} .spec-table tbody th { background: #EDEDED; font-weight: bold; white-space: nowrap;} .spec-note { margin-top: 16px; font-size: 1.3rem; line-height: 2;} @media only screen and (max-width: 1024px){ .seh-overview { grid-template-columns: 240px minmax(0, 1fr);} .seh-overview-image { padding: 28px;} .seh-overview-body { padding: 32px;} .seh-overview-stats { grid-template-columns: repeat(2, minmax(0, 1fr));} .seh-overview-stats > div:last-child { grid-column: 1 / -1;} .seh-recommended ul { grid-template-columns: 1fr;} .seh-detail-item { grid-template-columns: 230px minmax(0, 1fr);} .seh-detail-item:nth-child(even) { grid-template-columns: minmax(0, 1fr) 230px;} .seh-detail-image { padding: 15px;} .seh-detail-body { padding: 32px;} .product-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px;} .plant-major-grid { grid-template-columns: repeat(2, minmax(0, 1fr));} .project-case-grid { grid-template-columns: repeat(2, minmax(0, 1fr));} } @media only screen and (max-width: 768px){ .tab.tab-col6 li { width: calc(33.333% - 8px); margin: 0 4px; padding: 16px 0;} .tab.tab-col6.tab-links li { padding: 0;} .tab.tab-col6.tab-links li a { padding: 16px 0;} .biz-cols { grid-template-columns: 1fr; gap: 24px;} .biz-body { padding: 24px;} .product-cols { grid-template-columns: 1fr;} .product-body { padding: 24px;} .related-products-head { margin-bottom: 28px;} .related-products-head i { font-size: 2.6rem;} .related-products-grid { grid-template-columns: 1fr; gap: 16px;} .related-product-card { grid-template-columns: 1fr; gap: 16px; padding: 16px;} .related-product-body { padding: 0 4px 4px;} .related-product-body h4 { font-size: 1.6rem;} .lineup-grid { grid-template-columns: 1fr; gap: 16px;} .lineup-grid li { gap: 16px; padding: 16px;} .lineup-grid figure { flex: 0 0 120px;} .lineup-grid .lineup-name { font-size: 1.5rem;} .industrial-section-title { margin-bottom: 28px; font-size: 2.2rem;} .topic-feature { padding: 24px;} .topic-movie { padding: 16px;} .topic-movie-inner { width: 100%;} .topic-grid { grid-template-columns: 1fr; gap: 16px;} .topic-card { padding: 24px;} .dspace-intro { grid-template-columns: 1fr;} .dspace-intro-body { padding: 32px 24px;} .dspace-intro-title { margin-bottom: 24px; padding: 0 0 15px; font-size: 2.2rem;} .dspace-intro-title::after { bottom: -7px; left: 24px; width: 12px; height: 12px;} .dspace-intro-lead { font-size: 1.6rem;} .dspace-intro-summary { margin-top: 32px; padding-top: 28px;} .dspace-intro-subtitle { margin-bottom: 20px; font-size: 1.9rem;} .dspace-intro-detail h4 { font-size: 1.7rem;} .dspace-intro-image { max-width: none; margin: 0; border-top: 1px solid #E1E5EF;} .dspace-system-grid, .dspace-effect-grid { grid-template-columns: 1fr; gap: 16px;} .dspace-system-card { padding: 0 24px 24px;} .dspace-system-step { min-height: 120px; margin: 0 -24px 24px;} .dspace-system-step span { width: 72px; height: 72px; font-size: 2.2rem;} .dspace-system-card h4 { font-size: 1.8rem;} .dspace-system-card + .dspace-system-card::before { top: -16px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(90deg); background-size: 12px;} .dspace-system-loopback { position: static; display: flex; justify-content: center; height: auto; border: 0; border-radius: 0;} .dspace-system-loopback::before { display: none;} .dspace-system-loopback span { position: static; transform: none; padding: 8px 20px; border: 2px solid #191970; border-radius: 999px; white-space: normal;} .dspace-effect-card { padding: 24px;} .dspace-effect-card::before { font-size: 6.2rem;} .dspace-effect-card h4 { margin-bottom: 18px; padding-bottom: 14px; font-size: 1.8rem;} .plant-major-grid { grid-template-columns: 1fr; gap: 16px;} .plant-major-card { padding: 0 24px 24px;} .plant-major-icon { min-height: 120px; margin: 0 -24px 24px;} .plant-major-icon svg { width: 72px; height: 72px; padding: 16px;} .plant-major-card h4 { min-height: 0; font-size: 1.8rem;} .plant-strength-list { gap: 20px;} .plant-strength-item { grid-template-columns: 1fr; min-height: 0;} .plant-strength-image { min-height: 0; aspect-ratio: 16 / 10;} .plant-strength-movie { aspect-ratio: 16 / 9;} .plant-strength-body { padding: 28px 18px 32px;} .plant-strength-label { margin-bottom: 16px;} .plant-strength-label span { font-size: 1.2rem;} .plant-strength-label strong { font-size: 3.8rem;} .plant-strength-body h4 { margin-bottom: 14px; font-size: 2rem;} .plant-strength-item:nth-child(odd) .plant-strength-body { padding-right: 18px;} .plant-strength-item:nth-child(even) .plant-strength-body { padding-left: 18px;} .plant-strength-item:nth-child(even) .plant-strength-image, .plant-strength-item:nth-child(even) .plant-strength-body { order: initial;} .project-case-grid { grid-template-columns: 1fr; gap: 16px;} .project-case-card { padding: 24px;} .project-case-card h4 { font-size: 2.1rem;} .project-case-meta > div { grid-template-columns: 5.5em 1fr; gap: 10px;} .topic-feature h4, .topic-card h4 { font-size: 1.8rem;} .cases-lead { text-align: left;} .case-study-list { gap: 32px;} .case-study-heading { padding: 28px 20px;} .case-study-gallery { grid-template-columns: 1fr; gap: 12px; padding: 20px 20px 0;} .case-study-body { padding: 24px 20px 28px;} .case-study-meta { grid-template-columns: 1fr;} .case-study-meta > div, .case-study-meta > div:first-child, .case-study-meta > div:last-child { padding: 16px 0; border-top: 1px solid #D8DDF0; border-left: 0;} .case-study-meta > div:first-child { padding-top: 0; border-top: 0;} .case-study-meta > div:last-child { padding-bottom: 0;} .document-lead { text-align: left;} .document-section-title { margin-bottom: 28px; font-size: 2.2rem;} .document-grid, .document-grid-patent { grid-template-columns: 1fr;} .document-card { min-height: 0;} .spec-table { font-size: 1.3rem;} .spec-table th, .spec-table td { padding: 8px 6px;} .product-hero { margin-bottom: 48px;} .product-hero-pagination { bottom: 20px; left: 20px;} .product-hero figcaption { margin-top: 12px; font-size: 1.4rem;} .product-detail .topic-card { padding-top: 24px;} .product-detail .topic-card::before { font-size: 6.2rem;} .product-detail .topic-card h4 { margin-bottom: 18px; padding-bottom: 14px;} .seh-overview { grid-template-columns: 1fr;} .seh-overview-image { min-height: 0; padding: 32px 24px; border-bottom: 1px solid #D8DDF0;} .seh-overview-body { padding: 28px 20px;} .seh-overview-stats { grid-template-columns: 1fr;} .seh-overview-stats > div:last-child { grid-column: auto;} .seh-overview-stats > div { padding: 18px 14px;} .seh-recommended { padding: 20px;} .seh-recommended h4 { font-size: 1.7rem;} .seh-detail-list { gap: 16px;} .seh-detail-item { grid-template-columns: 1fr;} .seh-detail-item:nth-child(even) { grid-template-columns: 1fr;} .seh-detail-item:nth-child(even) .seh-detail-image, .seh-detail-item:nth-child(even) .seh-detail-body { order: initial;} .seh-detail-image { min-height: 0; padding: 24px; border-bottom: 1px solid #D8DDF0;} .seh-detail-body { padding: 26px 22px;} .seh-detail-body h4 { margin-bottom: 16px; font-size: 1.8rem;} .seh-performance-list { grid-template-columns: 1fr; margin: 18px 0;} .product-photo, .product-drawing { margin-top: 32px;} .product-drawing { margin: 0 auto 32px;} #logo { width: auto; max-width: none;} #logo img { width: auto; height: 40px;} #pagetop { bottom: 24px;} #pagetop a { width: 52px; height: 52px; gap: 3px; font-size: 1rem;} #pagetop a::before { width: 8px; height: 8px;} #contact dt { font-size: 1.6rem;} #contact a[href*="tel:"] { justify-content: flex-start; gap: 10px; font-size: 3rem;} #contact a[href*="tel:"] .tel-hours { text-align: left;} .lang-en #contact .dt-hours-sp { display: inline;} .lang-en #contact a[href*="tel:"] .tel-hours { display: none;} #contact .btn a { display: block; width: auto;} #sitemap > ul, .lang-en #sitemap > ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 20px;} #sitemap .sitemap-recruit { grid-column: 1 / -1;} #info { display: block; text-align: center; margin-bottom: 40px;} #info dl { display: block; margin: 0 0 24px;} #info dt { width: 240px; margin: 0 auto 16px;} #link { display: block;} #link ul { justify-content: center; margin: 0 0 24px;} article { position: relative; padding: 56px 5.6vw;} article header i { font-size: 2.8rem;} section { position: relative;} section + section { margin-top: 48px;} #industrial-furnaces > section + section, #plant-engineering > section + section, #business > section + section, #profile > section + section, #global-works > section + section, #technology-documents > section + section, #products > section + section, .product-detail > section + section { margin-top: 72px;} #d-space > section + section, #d-space > section + section + section { margin-top: 64px;} .row { display: block; margin: 0;} .row > * { width: 100%!important; margin: 0 0 24px!important;} .sp { display: block;} .pc { display: none;} #scroll { position: absolute; right: 4vw;} #scroll span { height: 60px;} #gallery { padding-top: 72px; padding-bottom: 72px;} #gallery header { margin-bottom: -60px;} #global-works > header, .company-group .tabcontent > header { margin-bottom: 40px;} #gallery section { display: flex; flex-direction: column-reverse; min-height: 0; margin-right: auto; margin-left: auto;} #gallery section::before { top: auto; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: calc(100% - 32px);} #gallery .gallery-body { width: auto; margin: 8px 0 0; padding: 40px 0 0; z-index: 2;} #gallery .gallery-body::before { content: none;} #gallery .gallery-body p { padding: 0 0 24px;} #gallery .gallery-body ul { margin: 0; padding: 0 0 32px;} #gallery .gallery-body li a { padding: 5% 0;} #gallery .gallery-slider { align-self: stretch; width: auto; max-width: none; margin: 0 -5.6vw;} #gallery .swiper-container { width: 100%; max-width: 100%; height: auto; min-height: 0; aspect-ratio: 3 / 2; overflow: hidden;} #gallery .slide-pagination { bottom: 20px; left: 20px;} #gallery .swiper-pagination-bullet { font-size: 1.4rem;} #service section { padding-top: 0;} #service section::before { width: 100vw;} #service .service-head { top: -52px; left: 16px;} #service .service-head h3 { font-size: 2.4rem;} .lang-ja #service .row > li + li { margin-top: 80px !important;} #title .mv { height: 300px;} #title .mv figure { height: 300px;} #title h1 { font-size: 2.6rem;} #bread { padding: 48px 0 0;} #bread ul { justify-content: center;} body.single-news #bread, body.single-blog #bread { padding-right: 5.6vw; padding-left: 5.6vw;} #message, #vision { margin: 0 -5.6vw;} #recruit section.full { width: auto; margin-right: -5.6vw; margin-left: -5.6vw;} #message section > div, #vision section > div, #recruit section.full > div { padding: 56px 5.6vw;} #message section > div, #vision section > div { padding: 64px 24px;} #vision .vision-content h3 { margin: 0 auto 32px;} .value-block { margin-top: 64px; padding: 48px 24px 32px;} .value-heading { gap: 8px; max-width: calc(100% - 32px); padding: 0 10px; white-space: normal;} .value-heading i { font-size: 2.4rem;} .value-heading h4 { font-size: 1.4rem; text-align: center;} .value-list > li { margin-bottom: 16px; padding-bottom: 16px;} .linetable th { display: block; width: auto; padding: 16px 16px 0; text-align: left; white-space: normal;} .linetable td { display: block; padding: 16px;} #history th { display: block; width: auto; padding: 24px 0 0; text-align: left;} #history td { display: block; padding: 16px;} .company-group-tabs li { width: calc(50% - 12px);} .company-group .tabcontent { padding-bottom: 48px;} .group-company { padding: 24px;} .group-company-heading { gap: 12px 16px;} .group-company-title { flex-basis: 100%;} .group-company h3 { font-size: 2rem;} .group-company-meta { display: block; margin-top: 12px;} .group-company-meta dt { margin-top: 10px;} .group-company-meta dt:first-child { margin-top: 0;} #global-works .works-lead { padding: 32px 24px;} .works-chart-section h3, .major-clients-section h3 { font-size: 2.2rem;} .works-chart-head { grid-template-columns: 1fr auto; gap: 8px 12px;} .works-percent { grid-column: 2; min-width: 0;} .works-bar { height: 14px;} .major-client-card { padding: 24px;} .form dt { float: none; width: auto;} .form dd { display: block;} .form .row > * { width: 100%;} .form { padding: 36px 24px;} .form .wpcf7-form > p:first-of-type { margin-bottom: 32px; padding: 16px;} .form textarea { min-height: 200px;} .privacy-agreement { padding: 20px 16px; text-align: left;} .form .privacy-agreement label { justify-content: flex-start; align-items: flex-start;} .submit input[type="submit"] { display: block; width: calc(100% - 32px); max-width: 320px; margin: 8px auto; padding: 24px;} .submit input[type="button"] { display: block; width: calc(100% - 32px); max-width: 320px; margin: 8px auto; padding: 24px;} .product li { display: block; padding: 24px 0;} .product li:nth-child(4n+3)::before { display: none;} .product li:nth-child(even)::before { content: ''; position: absolute; top: 0; left: -5.6vw; width: 100vw; height: 100%; background: #FAFAFA; z-index: -1;} .product li figure { width: auto; margin-bottom: 16px;} .product li > div { width: auto;} .product h3 { font-size: 2rem;} .newslist li { display: block;} .newslist li > figure { width: auto; margin-bottom: 16px;} .newslist li > div { width: auto;} .newslist li h3 { font-size: 1.8rem;} #body h2, .st { font-size: 2.2rem;} #body h3, #voice h3 { font-size: 2rem;} #body h4 { font-size: 1.8rem;} #body h5 { font-size: 1.6rem;} #body * + h3, #body * + h4, #body * + h5, #body * + ul, #body * + table { margin-top: 48px;} #body th, #body td { display: block;} #body th { width: 100%; padding-bottom: 0; border-bottom: none; font-weight: 700;} .alignright { float: none; margin: 0 auto;} .alignleft { float: none; margin: 0 auto;} .size-thumbnail { max-width: 100%;} .paging { display: block; text-align: center;} #aside { width: auto; padding-top: 64px;} #aside h4 { font-size: 1.8rem;} #aside .box { margin-bottom: 48px;} .diecast > div h2 { margin-left: 0; top: 0; font-size: 2rem;} .diecast > div h2::after { display: none;} .diecast > div:not(.movie) { padding-top: 24px;} #flow .row h3 { font-size: 3.2rem;} .subtitle { font-size: 2rem;} #facility section { padding-top: 64px;} #facility table { font-size: 1.4rem;} #facility td { padding: 4px;} #strength { padding-left: 0; padding-right: 0;} #strength header { margin-bottom: 0;} #strength header::after { margin-bottom: 0;} #strength .diecast::after { display: none;} #voice li { position: relative; padding: 48px 0;} } @media print { #container { width: 1024px;} } #mv { height: 100vh; overflow: hidden; position: relative; width: 100%; } #mv::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .20); pointer-events: none; z-index: 2; } #mv video { background: #111; display: block; height: 100%; inset: 0; object-fit: cover; object-position: center center; position: absolute; width: 100%; z-index: 1; } /* ===== 言語スイッチャー ===== */ #lang-switch { position: relative; z-index: 101; flex: 0 0 auto; margin-left: 2vw;} /* 現在言語＝トリガー（地球儀＋下線） */ #lang-switch .lang-current { display: flex; align-items: center; gap: 6px; padding: 4px 2px; border: 0; border-bottom: 1px solid #FFF; background: transparent; font-size: 1.3rem; font-weight: 700; color: #FFF; white-space: nowrap; cursor: pointer; transition: border-bottom-color .2s ease-out;} #lang-switch .lang-current:hover { border-bottom-color: #2F5BD3;} #lang-switch .lang-globe { display: block; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.6 2.6 2.6 15.4 0 18M12 3c-2.6 2.6-2.6 15.4 0 18'/%3E%3C/svg%3E") center / contain no-repeat;} /* ドロップダウン（他言語） */ #lang-switch .lang-dropdown { position: absolute; top: calc(100% + 8px); left: 0; right: auto; min-width: 0; margin: 0; padding: 4px 5px; list-style: none; background: rgba(245,245,245,.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: none; box-shadow: 0 4px 12px -6px rgba(0,0,0,.3); opacity: 0; transform: translateY(-10px); pointer-events: none; transition: opacity .45s cubic-bezier(.16,1,.3,1), transform .45s cubic-bezier(.16,1,.3,1);} #lang-switch .lang-dropdown li { margin: 0; line-height: 1;} #lang-switch .lang-dropdown li + li { margin-top: 4px;} #lang-switch .lang-dropdown a { display: block; padding: 6px 10px; font-size: 1.3rem; font-weight: 700; color: #222; white-space: nowrap; text-align: left; text-indent: 0; transition: background .25s ease, color .25s ease;} #lang-switch .lang-dropdown a:hover { opacity: 1; text-decoration: none; background: #191970; color: #FFF;} /* 開閉：クリックで .is-open をトグル → nav と同じく上からヌルッ */ #lang-switch.is-open .lang-dropdown { opacity: 1; transform: translateY(0); pointer-events: auto;} @media only screen and (max-width: 1024px){ #lang-switch { top: -4px; margin-left: auto; margin-right: 12px; z-index: 301;} } /* ===== 英語版タイポグラフィ ===== */ /* 本文（ナビ・フッター含む）を Inter に。数字などの Montserrat は継続 */ body.lang-en { font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-weight: 400;} .lang-en #catch { width: 100%; box-sizing: border-box;} .lang-en #catch h1 { -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; font-family: 'Montserrat', sans-serif; font-size: clamp(22px, 3.6vw, 50px); line-height: 1.28; letter-spacing: 0; align-items: center;} .lang-en #catch h1 .en-sp-break { display: none;} .lang-en #title h1 { -webkit-writing-mode: horizontal-tb; -moz-writing-mode: horizontal-tb; -ms-writing-mode: lr-tb; writing-mode: horizontal-tb; display: block; white-space: normal; text-align: center; font-family: 'Montserrat', sans-serif; line-height: 1.25; letter-spacing: 0.04em;} @media only screen and (max-width: 743px){ .lang-en #catch { align-items: flex-start; padding: 0 6vw; text-align: left;} .lang-en #catch h1 { align-items: flex-start; max-width: 88vw; white-space: normal; text-align: left; font-size: 26px;} .lang-en #catch h1 .catch-line { white-space: nowrap;} .lang-en #catch h1 .catch-line + .catch-line { margin-top: 0.35em;} .lang-en #catch h1 .en-sp-break { display: block;} /* スマホ4行表示では2行目を1行目(〜1350ms)の後に続けて表示する */ .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(1) { transition-delay: 1395ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(2) { transition-delay: 1440ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(3) { transition-delay: 1485ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(4) { transition-delay: 1530ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(5) { transition-delay: 1575ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(6) { transition-delay: 1620ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(7) { transition-delay: 1665ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(8) { transition-delay: 1710ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(9) { transition-delay: 1755ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(10) { transition-delay: 1800ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(11) { transition-delay: 1845ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(12) { transition-delay: 1890ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(13) { transition-delay: 1935ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(14) { transition-delay: 1980ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(15) { transition-delay: 2025ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(16) { transition-delay: 2070ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(17) { transition-delay: 2115ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(18) { transition-delay: 2160ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(19) { transition-delay: 2205ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(20) { transition-delay: 2250ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(21) { transition-delay: 2295ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(22) { transition-delay: 2340ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(23) { transition-delay: 2385ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(24) { transition-delay: 2430ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(25) { transition-delay: 2475ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(26) { transition-delay: 2520ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(27) { transition-delay: 2565ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(28) { transition-delay: 2610ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(29) { transition-delay: 2655ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(30) { transition-delay: 2700ms;} .lang-en #catch h1 .catch-line:nth-of-type(2) .char-parts:nth-of-type(31) { transition-delay: 2745ms;} } /* 明朝だった見出しを Montserrat へ（h1 は当面そのまま） */ .lang-en #catch p, .lang-en #vision section > div h3, .lang-en .diecast > div h2, .lang-en #flow .row h3, .lang-en .subtitle { font-family: 'Montserrat', sans-serif;} /* 英語版 Vision は縦書き2カラムをやめて1カラム。position: relative がないと figure { position: relative } が手前に描画され、カード上部（-280px の割り込み部分）が隠れる */ .lang-en #vision section > div { position: relative;} .lang-en #vision section > div h3 { max-width: 760px; margin: 0 auto 32px; line-height: 1.5; letter-spacing: 0.04em;} .lang-en #vision .vision-body { margin: 0 auto;} /* 英語版グループ会社：日本語版の青ラインは英語社名行（.group-company-en::before）とセットのため、 英語社名行がない英語版は h3 に線だけ付ける。仮社名注記の線は二重になるので消す */ .lang-en .group-company h3 { margin-bottom: 0;} .lang-en .group-company h3::after { content: ''; display: block; width: 100%; height: 1px; margin-top: 12px; background: #191970;} .lang-en .group-company-note::before { display: none;}