/* Theme Name: DigiRise Theme URI: https://digirise.ai/ Author: 株式会社デジライズ Author URI: https://digirise.ai/ Description: 最先端AIツールをIT導入補助金を活用して、お客様の負担を軽減しつつ、DX化を実現。 導入研修やカスタマーサポートを通じて定着化も目指します。 Version: 2024.10 Requires at least: 5.2 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v3 or Later License URI: https://www.gnu.org/licenses/gpl.html Text Domain: DigiRise */ /* reset.css */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; font-family: 'Noto Sans JP', sans-serif; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write;3 overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* common */ html {scroll-behavior: smooth;} :root { --main-heading: #3A34FF; --main-text: #222; --main-Gradient: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); --main-palePurple: #C3C1FF; --main-lightblue: #00DBFF; --main-breadcrumb: #1A15BB; --palebg-blue: #EBF5FA; --main-CourseMain: #C6A700; } p {line-height: 2.2; letter-spacing: 1.8px; color: var(--main-text); word-wrap: break-word; font-size: 1.1rem;} a {transition: 0.3s ease-in-out;} ::placeholder { color: #ccc; } /* common */ a.primaryBtn { background: var(--main-Gradient); color: #fff; font-size: 1rem; display: flex; width: 260px; padding: 13px 0 16px; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; font-weight: 500; letter-spacing: 1px; } a.primaryBtn:after, a.secondaryBtn:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 21px; top: 49%; color: #fff; transform: translateY(-50%); opacity: 0.7; } a.secondaryBtn { background: #fff; color: var(--main-heading); font-size: 1rem; display: flex; width: 260px; padding: 13px 0 16px; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; font-weight: 500; letter-spacing: 1px; } a.secondaryBtn:after { color: var(--main-heading); } a.primaryBtn:hover, a.secondaryBtn:hover { opacity: 0.8; } a.secondaryBtn.subtext { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.4px; font-weight: 600; width: 280px; } a.secondaryBtn.subtext span { font-size: 0.7rem; font-weight: 400; } br.sp__br { display: none; } a.thirdBtn { background: var(--main-heading); color: #fff; font-size: 1rem; display: flex; width: 260px; padding: 13px 0 16px; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; font-weight: 500; letter-spacing: 1px; align-items: center; gap: 10px; overflow: hidden; transition: 0.3s ease-in-out; z-index: 0; } a.thirdBtn:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 21px; top: 49%; color: #fff; transform: translateY(-50%); opacity: 0.7; } a.thirdBtn:before { content: ""; position: absolute; top: 0; bottom: 0; width: 0; display: block; background: #0600eb; transition: .3s; left: 0; pointer-events: none; } a.thirdBtn:hover:before { width: 100%; z-index: -1; } a.thirdBtn span { position: relative; } /* re Btn */ a.re_primaryBtn, button.re_primaryBtn { background: var(--main-Gradient); color: #fff; font-size: 1rem; display: flex; width: 260px; padding: 13px 0 16px; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; font-weight: 500; letter-spacing: 1px; overflow: hidden; } a.re_primaryBtn:after, a.re_secondaryBtn:after, button.re_primaryBtn:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 21px; top: 49%; color: #fff; transform: translateY(-50%); opacity: 0.7; } a.re_secondaryBtn { background: #fff; color: var(--main-heading); font-size: 1rem; display: flex; width: 260px; padding: 9px 0 10px; justify-content: center; border-radius: 9999px; cursor: pointer; position: relative; font-weight: 500; letter-spacing: 1px; align-items: center; gap: 11px; overflow: hidden; } a.re_secondaryBtn:after { color: var(--main-heading); } a.re_primaryBtn span, a.re_secondaryBtn span, button.re_primaryBtn span { position: relative; z-index: 2; } a.re_primaryBtn:before, button.re_primaryBtn:before { content: ""; position: absolute; top: 0; bottom: 0; width: 0; display: block; background: #580afe; transition: .3s; left: 0; pointer-events: none; } a.re_secondaryBtn:before { content: ""; position: absolute; top: 0; bottom: 0; width: 0; display: block; background: var(--main-heading); transition: .3s; left: 0; pointer-events: none; } a.re_primaryBtn:hover:before, a.re_secondaryBtn:hover:before, button.re_primaryBtn:hover:before { width: 100%; z-index: 0; } a.re_secondaryBtn:hover span, a.re_secondaryBtn:hover:after, button.re_primaryBtn:hover:after { color: #fff; } .fadeHeader { animation: fadeHeader 1s ease 0s 1 normal; } @keyframes fadeHeader { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; } } /* blur */ .blurAnime.visible { animation: blurAnime 1.2s ease 0s 1 normal; } @keyframes blurAnime { 0% { filter: blur(10px); } 100% { filter: blur(0); } } /* bounce ball */ #page-loading { position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 999; background-color: #FFF; pointer-events: none; animation : fadeinBounce 2.0s; animation-fill-mode: both; } .three-balls { margin: 0 auto; width: 70px; text-align: center; position: absolute; left: 0; right: 0; top: 50%; } .three-balls .ball { position: relative; width: 15px; height: 15px; border-radius: 50%; display: inline-block; -webkit-animation: bouncedelay 3.5s infinite cubic-bezier(.62, .28, .23, .99) both; animation: bouncedelay 3.5s infinite cubic-bezier(.62, .28, .23, .99) both; } .three-balls .ball1 { -webkit-animation-delay: -.16s; animation-delay: -.16s; } .three-balls .ball2 { -webkit-animation-delay: -.08s; animation-delay: -.08s; } @keyframes bouncedelay { 0% { bottom: 0; background-color: #03A9F4; } 16.66% { bottom: 40px; background-color: #FB6542; } 33.33% { bottom: 0px; background-color: #FB6542; } 50% { bottom: 40px; background-color: #FFBB00; } 66.66% { bottom: 0px; background-color: #FFBB00; } 83.33% { bottom: 40px; background-color: #03A9F4; } 100% { bottom: 0; background-color: #03A9F4; } } @-webkit-keyframes bouncedelay { 0% { bottom: 0; background-color: #03A9F4; } 16.66% { bottom: 40px; background-color: #FB6542; } 33.33% { bottom: 0px; background-color: #FB6542; } 50% { bottom: 40px; background-color: #FFBB00; } 66.66% { bottom: 0px; background-color: #FFBB00; } 83.33% { bottom: 40px; background-color: #03A9F4; } 100% { bottom: 0; background-color: #03A9F4; } } .fadeout { animation : fadeOut 1s; animation-fill-mode: both; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeinBounce { 0% { opacity: 1; } 100% { opacity: 0; } } /* タイプライター */ /* 次の p を非表示 */ .hiddenParagraph { opacity: 0; } /* タイプライターカーソル */ .typeWriter span.cursor { border-right: 2px solid; animation: caret 1s steps(1) infinite; } @keyframes caret { 50% { border-color: transparent; } } .rereAbout__inner--leftDesc { position: relative; overflow: hidden; } /* seminar component */ p.semiarDate { font-family: 'Roboto', sans-serif; display: flex; justify-content: flex-start; align-items: center; font-size: 1.3rem; gap: 10px; color: var(--main-heading); font-style: italic; } /* common heading */ .heading { display: flex; flex-direction: column; gap: 24px; } p.heading__top { display: flex; flex-direction: column; color: #fff; position: relative; line-height: 1.3; padding-bottom: 28px; gap: 6px; margin-bottom: -5px; } p.heading__top span, h3.heading__top span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 2rem; color: #fff; opacity: 0.4; letter-spacing: 1.8px; } p.heading__top:after, h3.heading__top:after { content: ""; width: 50px; height: 8px; background: url(/wp-content/uploads/2024/10/white_heading.svg) no-repeat; background-size: contain; bottom: 0; position: absolute; } .heading h2 { font-weight: 600; color: #fff; font-size: 2.8rem; line-height: 1.43; letter-spacing: 2px; } p.heading__desc { color: #fff; letter-spacing: 1.8px; } .news__inner .heading.colored { text-align: center; } .heading.colored p.heading__top, .heading.colored h3.heading__top { color: var(--main-text); font-weight: 500; position: relative; } .heading.colored p.heading__top span, .heading.colored h3.heading__top span { color: var(--main-palePurple); } .heading.colored p.heading__top:after, .heading.colored h3.heading__top:after { background: url(/wp-content/uploads/2024/10/colorBottom.svg) no-repeat; } .news__inner .heading.colored p.heading__top:after { left: 50%; transform: translateX(-50%); } /* loading */ section#loading .shape { z-index: 1200; } .overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; /* アニメーションで動かすために背景のサイズを調整 */ animation: gradientMove 5s infinite ease-in-out; /* 5秒間のアニメーションを無限ループ */ display: flex; justify-content: center; align-items: center; transition: opacity 3s ease; opacity: 1; z-index: 1000; } .overlay.fade-out { opacity: 0; transition: opacity 3s ease; /* トランジション時間を3秒に延長 */ } #overlay img.logo { width: 100%; max-width: 500px; transition: transform 2s ease; } /* seminar btn */ .outerLink { margin: 0 auto 30px; } .outerLink a.primaryBtn:after { content: "\f35d"; } @keyframes gradientMove { 0% { background-position: 0% 50%; /* 初期の位置 */ } 50% { background-position: 100% 50%; /* 中間で色が変わる */ } 100% { background-position: 0% 50%; /* 元の位置に戻る */ } } /* スクロールCSS */ .fade-in { opacity: 0; transition-duration: 500ms; transition-property: opacity, transform; } .fade-in-up { transform: translate(0, 50px); } .fade-in-down { transform: translate(0, -50px); } .fade-in-left { transform: translate(-50px, 0); } .fade-in-right { transform: translate(50px, 0); } .scroll-in { opacity: 1; transform: translate(0, 0); } /* header */ header#header { display: block; position: fixed; top: 0; width: 100%; z-index: 99; } header#header:before { content: ""; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; opacity: 0; pointer-events: none; transition: 0.3s ease-in-out; -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); background-color: rgba(255, 255, 255, 0.35); } header#header.resize:before { opacity: 1; } .header__inner { display: flex; flex-direction: column; gap: 0; padding: 8px 2%; position: relative; } .header__inner--top { display: flex; justify-content: flex-end; opacity: 1; height: auto; padding: 5px 0; transition: opacity 0.5s ease, height 0.5s ease, padding 0.5s ease; /* 高さとパディングのトランジション */ } .header__inner--top.fade-out { opacity: 0; height: 0; padding: 0; } ul.header__inner--topOuter { display: flex; flex-direction: row; gap: 15px; justify-content: flex-end; } ul.header__inner--topOuter li a { font-size: 0.9rem; letter-spacing: 1.2px; color: #222; position: relative; padding: 3px 8px; } ul.header__inner--topOuter li a:after { content: "\f2d2"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: relative; opacity: 0.6; padding-left: 5px; } ul.header__inner--topOuter li a:hover { opacity: 0.7; } .header__inner--bottom { display: flex; justify-content: space-between; align-items: center; } .header__inner--bottom h1 { max-width: 240px; transition: 0.3s ease-in-out; } .header__inner--bottom h1 img { width: 100%; } .header__inner--bottom h1 a { display: flex; justify-content: center; } .header__inner--bottom h1 a:hover { opacity: 0.7; } .header__inner--bottomRight { display: flex; justify-content: end; align-items: center; gap: 25px; } ul.header__inner--bottomRightLink { display: flex; flex-direction: row; gap: 12px; } ul.header__inner--bottomRightLink li { display: flex; box-sizing: border-box; position: relative; } .hasChild__inner { opacity: 0; position: absolute; top: 100%; background: #fff; left: 0; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); padding: 7px 20px 12px; display: flex; flex-direction: column; width: max-content; pointer-events: none; transition: 0.2s ease-in-out; gap: 6px; border-radius: 3px; } li.hasChild:hover .hasChild__inner { opacity: 1; pointer-events: auto; z-index: 1; } ul.header__inner--bottomRightLink li .hasChild__inner a { position: relative; padding-top: 12px; padding-bottom: 12px; padding-left: 20px; } .hasChild__inner a:before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 5px; top: 52%; transform: translateY(-50%); opacity: 0.4; } ul.header__inner--bottomRightLink li a, ul.header__inner--bottomRightLink li span { letter-spacing: 0.5px; font-size: 0.95rem; color: var(--main-text); padding: 18.5px 2px; font-weight: 500; position: relative; } ul.header__inner--bottomRightLink li span { transition: 0.2s ease-in-out; } a.headerOuterLink:after { content: "\f2d2"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: relative; opacity: 0.3; padding-left: 5px; } ul.header__inner--bottomRightLink li a:hover { opacity: 0.7; } ul.header__inner--bottomRightLink li span { padding-right: 20px; cursor: pointer; } li.hasChild span:after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2px; top: 52%; transform: translateY(-50%); opacity: 0.6; transition: 0.2s ease-in-out; } li.hasChild:hover span { color: var(--main-heading); } .header__inner--bottomRightCta { display: flex; justify-content: flex-end; gap: 10px; align-items: center; } .header__inner--bottomRightCta a { width: 160px; padding: 10px 0 13px; font-size: 0.9rem; } .header__inner--bottomRightCta a:after { right: 10px; } .header__inner--bottomRight.sp { display: none; } /* header language */ .trp-language-switcher:hover .trp-ls-shortcode-language, .trp-language-switcher > div { padding: 0; } .trp-language-switcher { width: auto; height: auto; } header:not(:has(.fade-out)) ul.header__inner--topOuter li a.trp-ls-shortcode-disabled-language { color: #313131; font-size: 0.8rem; display: flex; justify-content: flex-start; align-items: center; gap: 8px; padding: 3px 10px 5px; } header:not(:has(.fade-out)) ul.header__inner--topOuter li .trp-ls-shortcode-language a { padding: 3px 10px 5px; color: #707070; font-size: 0.8rem; display: flex; justify-content: flex-start; align-items: center; gap: 8px; } header:not(:has(.fade-out)) ul.header__inner--topOuter li a.trp-ls-shortcode-disabled-language:after, header:not(:has(.fade-out)) ul.header__inner--topOuter li .trp-ls-shortcode-language a:after { content: none; } .trp-language-switcher > div { background-position: calc(100% - 10px) calc(1em + -6px), calc(100% - 3px) calc(1em + 0px); border-radius: 3px; border: none; background-color: rgb(255, 255, 255, 0.6); } /* mv */ section#mv { background: url(https://corp.dubdesign.net/wp-content/uploads/2024/10/bg_mvs-1.jpg) no-repeat; background-size: contain; height: 100svh; background-position: center right; min-height: 800px; background-color: #e9f5f3; } .mv__inner { display: flex; width: 100%; max-width: 1250px; margin: 0 auto; flex-direction: column; justify-content: center; height: 100%; gap: 160px; position: relative; padding-top: 80px; } .mv__inner:before { content: ""; border-radius: 9999px; background: radial-gradient(50% 50% at 50% 50%, #E5F0F0 0%, rgba(229, 240, 240, 0.64) 67%, rgba(229, 240, 240, 0.00) 100%); width: 700px; height: 700px; position: absolute; left: 0; top: 50%; pointer-events: none; transform: translateY(-50%); } .mv__inner--top { display: flex; flex-direction: column; gap: 18px; position: relative; } .mv__inner--top h2 { font-size: 2.6rem; background: var(--main-Gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.4; letter-spacing: 4px; font-weight: 600; display: inline-block; width: fit-content; } .mv__inner--top h2 span { font-size: 4.2rem; line-height: 1; vertical-align: 5px; font-weight: 700; } .mv__inner--top h2 span:first-child { font-size: 5.2rem; vertical-align: -3px; } .mv__inner--bottom { display: flex; flex-direction: column; gap: 25px; position: relative; } ul.mv__inner--bottomLeaf { display: flex; justify-content: flex-start; gap: 20px; align-items: flex-start; } ul.mv__inner--bottomLeaf li { display: flex; flex-direction: column; align-items: center; gap: 5px; position: relative; padding: 0; width: 300px; } ul.mv__inner--bottomLeaf li:before { content: ''; display: inline-block; background-image: url(/wp-content/uploads/2024/10/leafleft.svg); background-repeat: no-repeat; background-size: contain; width: 44px; height: 97px; position: absolute; left: 0; top: 10px; } ul.mv__inner--bottomLeaf li:after { content: ''; display: inline-block; background-image: url(/wp-content/uploads/2024/10/leafright.svg); background-repeat: no-repeat; background-size: contain; width: 44px; height: 97px; position: absolute; right: 0; top: 10px; } p.leafTop { font-size: 0.9rem; font-weight: 500; } p.leafBottom { position: relative; font-size: 0.6rem; color: #707070; } .mv__inner--bottomLink { display: flex; justify-content: flex-start; gap: 35px; align-items: center; } /* renew MV */ section#renewMV { position: relative; } .mv__bgVideo { position: absolute; top: 0; width: 100%; height: 100%; } video#mvvideos { width: 100%; height: 100%; object-fit: cover; object-position: bottom; } .mv__bgVideo:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2025/12/dots.png) no-repeat; position: absolute; top: 0; background-size: cover; z-index: 2; } .mv__bgVideo:after { content: ""; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0, 25, 186, 0.90) 5.5%, rgba(0, 25, 186, 0.60) 54.11%, #0019BA 93.42%); position: absolute; top: 0; background-size: cover; z-index: 1; } .renewMV__inner { position: relative; width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; padding: 140px 0 200px; z-index: 3; align-items: center; } .renewMV__inner--left { display: flex; flex-direction: column; gap: 30px; position: relative; z-index: 2; } .renewMV__inner--right { position: absolute; bottom: 0; right: 0; } .renewMV__inner--leftCatch { display: flex; flex-direction: column; gap: 4px; } .renewMV__inner--leftCatch p { font-size: 4rem; letter-spacing: 0.3px; font-weight: 900; color: #fff; line-height: 1.2; } .renewMV__inner--leftCatch h2 { font-size: 4rem; letter-spacing: 0.3px; font-weight: 900; color: #fff; line-height: 1; text-indent: -10px; } .renewMV__inner--leftCatch h2 span { font-size: 12rem; margin-right: 7px; vertical-align: 12px; } p.renewMV__inner--leftBody { color: #fff; } .renewMV__inner--leftBtns { position: relative; display: flex; gap: 30px; margin-top: 12px; } .renewMV__inner--right { position: absolute; bottom: 0; right: 0; } .renewMV__inner--right img { vertical-align: bottom; width: 100%; max-width: 670px; position: relative; z-index: 1; filter: drop-shadow(0px 0px 23px rgb(255, 255, 255, 0.1)); } .renewMV__inner--right:after { content: ""; width: 100%; height: 700px; border-radius: 9999px; background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.21) 0%, rgba(255, 255, 255, 0.00) 100%); position: absolute; top: 0; right: 0; } .topNumberOne { position: absolute; right: 0; top: 60%; transform: translateY(-50%); z-index: 1; width: fit-content; display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; align-items: center; } p.topNnumberOne__desc { text-align: center; display: inline-block; position: relative; font-size: 1rem; color: #EEBE47; font-weight: 600; line-height: 1.7; } img.topNumberOneBadge { width: 100%; max-width: 200px; object-fit: contain; } p.topNnumberOne__desc:before, p.topNnumberOne__desc:after { display: inline-block; position: absolute; top: 55%; width: 50px; height: 2px; border-radius: 3px; background-color: #EEBE47; content: ""; } p.topNnumberOne__desc:before { left: -40px; -webkit-transform: rotate(60deg); transform: rotate(60deg); } p.topNnumberOne__desc:after { right: -40px; -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } p.numberOneHosoku { color: #fff; line-height: 1.93; font-size: 0.6rem; width: 100%; max-width: 280px; } .reTopMV__inner--rightBtn { position: relative; display: flex; flex-direction: column; gap: 15px; } .reTopMV__inner--rightBtn p { position: relative; width: fit-content; font-size: 0.7rem; text-align: center; margin: 0 auto; color: var(--main-heading); background: #ffff00; padding: 0 18px; border-radius: 9999px; letter-spacing: 0.4px; font-weight: 500; animation: floating-y 1.8s ease-in-out infinite alternate-reverse; } .reTopMV__inner--rightBtn p:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -8px; border: 8px solid transparent; border-top: 8px solid #FFFF00; } /* アニメーション */ @keyframes floating-y { 0% { transform: translateY(-10%); } 100% { transform: translateY(10%); } } .reTopMV__inner--rightBtn a { min-width: 270px; border: solid 1px #fff; } .reTopMV__inner--rightBtn a.secondaryBtn { padding-top: 9px; padding-bottom: 10px; background: #fff; color: var(--main-heading); gap: 8px; align-items: center; } .reTopMV__inner--rightBtn a img { transform: translateY(1px); max-width: 60px; } /* 2026mv */ section#renewMV.bgnerVis { background: #E1E9EC; } .mv__bgVideo.dotnone { background: #E1E9EC; width: 60%; height: 100%; right: 0; max-width: 1200px; } .mv__bgVideo.dotnone:before, .mv__bgVideo.dotnone:after { content: none; } .mv__bgVideo.dotnone:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2026/08/Group-181.svg) no-repeat; position: absolute; left: 0; z-index: 1; background-size: cover; top: 0; } section#renewMV.bgnerVis:after { content: ""; width: 100%; height: 100%; background: rgb(255 255 255 / 15%); position: absolute; top: 0; left: 0; z-index: 2; } /* main copy */ .renewMV__inner--left.newvisCopy .renewMV__inner--leftCatch p { color: var(--main-heading); } .renewMV__inner--left.newvisCopy .renewMV__inner--leftCatch h2 { color: var(--main-heading); } .renewMV__inner--left.newvisCopy p.renewMV__inner--leftBody { color: var(--main-text); } /* パーティクルネットワークキャンバス（背景動画の上に重ねて表示） */ #network-canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 2; display: block; pointer-events: none; } /* cout custom */ p.bottomCopys { position: absolute; bottom: 16px; font-size: 0.5rem; line-height: 1.53; text-align: right; letter-spacing: 0; right: 23px; } p.mvmidashi.sizeminis { font-size: 0.7rem; line-height: 1.53; margin-top: -6px; } li.reTopMVunder__inner--list h3 span.bignumberOne { line-height: 1; font-size: 5.4rem; } /* top mv under */ section#reTopMVunder { position: relative; margin-top: -85px; z-index: 3; } section#reTopMVunder:before { content: ""; width: 100%; height: calc(100% - 85px); background: #EBF5FA; position: absolute; top: 85px; z-index: 0; } .reTopMVunder__inner { border-radius: 7px; border: 1px solid #DDD; background: #FFF; width: 100%; max-width: 950px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 30px 35px; position: relative; } .reTopMVunder__inner--chara { position: absolute; top: -280px; display: flex; justify-content: center; align-items: flex-end; right: 200px; gap: 7px; } .reTopMVunder__inner--chara img { width: 100%; height: 300px; object-fit: contain; filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.35)); vertical-align: bottom; } .reTopMVunder__inner--chara p { display: flex; flex-direction: column; color: #fff; font-size: 0.5rem; line-height: 1.5; gap: 6px; padding-bottom: 50px; margin-left: -25px; } .reTopMVunder__inner--chara p span { font-size: 1rem; font-weight: 500; } p.reTopMVunder__inner--text { font-size: 1.4rem; color: var(--main-CourseMain); line-height: 1.93; } ul.reTopMVunder__inner--lists { display: flex; justify-content: flex-end; gap: 40px; padding-bottom: 3px; } li.reTopMVunder__inner--list { display: flex; flex-direction: column; text-align: center; padding: 0 20px; min-width: 260px; position: relative; } li.reTopMVunder__inner--list:before { content: ''; display: inline-block; background-image: url(/wp-content/uploads/2024/10/leafleft.svg); background-repeat: no-repeat; background-size: contain; width: 44px; height: 97px; position: absolute; left: -10px; top: 10px; } li.reTopMVunder__inner--list:after { content: ''; display: inline-block; background-image: url(/wp-content/uploads/2024/10/leafright.svg); background-repeat: no-repeat; background-size: contain; width: 44px; height: 97px; position: absolute; right: -10px; top: 10px; } p.mvmidashi { line-height: 1.2; font-size: 0.9rem; } li.reTopMVunder__inner--list h3 { color: var(--main-CourseMain); font-weight: 600; font-size: 1.1rem; letter-spacing: 2.6px; } li.reTopMVunder__inner--list h3 span { font-family: "Roboto", sans-serif; font-size: 4.3rem; letter-spacing: -1px; } p.mvhosokus { font-size: 0.5rem; color: #707070; text-align: center; margin-top: -6px; } /* services */ section#renewService { position: relative; background: #EBF5FA; } .renewService__inner #shape1 { opacity: 0.4; } .renewService__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; padding: 120px 0 100px; } .renewService__inner #shape4 { background-color: #fff; opacity: 0.32; } .renewService__inner--top { display: flex; justify-content: space-between; position: relative; align-items: center; } .renewService__inner--topLeft { display: flex; flex-direction: column; gap: 40px; position: relative; z-index: 2; } .renewTitle { position: relative; display: flex; justify-content: space-between; align-items: center; } .renewTitle span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 4.3rem; color: var(--main-heading); opacity: 0.12; letter-spacing: 1.8px; position: absolute; left: 40px; } .renewTitle p { font-family: "Roboto", sans-serif; font-style: italic; font-size: 1.4rem; color: var(--main-heading); letter-spacing: 0.8px; line-height: 1; position: relative; z-index: 1; } .renewHeading { display: flex; flex-direction: column; gap: 5px; } .renewService__inner--topLeft .renewHeading { margin-top: 15px; } .renewHeading h2 { font-size: 3.5rem; letter-spacing: 2.3px; font-weight: 900; color: #222; line-height: 1.3; position: relative; z-index: 1; } span.textsBig { font-size: 6.0rem; } .renewService__inner--topLeft .renewHeading h2 { font-size: 2.9rem; letter-spacing: 0.4px; line-height: 1.3; } .renewService__inner--topLeft span.textsBig { font-size: 4rem; vertical-align: 3px; margin: 0 5px; letter-spacing: 0; } .renewService__inner--topRight { display: flex; justify-content: center; position: relative; height: fit-content; } .renewService__inner--topRight img { border-radius: 9999px; vertical-align: bottom; width: 560px; object-fit: cover; height: 550px; position: relative; z-index: 4; } .renewService__inner--topRight #shape1 { background: #00FFFF; opacity: 1; right: 180px; left: auto; z-index: 3; } .renewService__inner--topRight #shape1.scrolled { height: 420px; } .renewService__inner--topRight #shape2 { opacity: 1; right: 160px; top: -40px; width: 80px; background: var(--main-Gradient); } .renewService__inner--topRight #shape2.scrolled { height: 420px; } .renewService__inner--topRight img { border-radius: 9999px; vertical-align: bottom; width: 560px; object-fit: cover; height: 550px; position: relative; z-index: 4; } .screenDot { width: 60px; height: 60px; position: absolute; left: 40px; bottom: 50px; background: #ff3301; border-radius: 9999px; z-index: 5; } /* =============================================================== Intro Loader v2 — リッチ版 =============================================================== */ html.has-reIntro, html.has-reIntro body { overflow: hidden; } html.reIntro-skip #reIntro { display: none !important; } #reIntro { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; overflow: hidden; background: radial-gradient(120% 120% at 50% 38%, #182a52 0%, #0b1226 52%, #04060d 100%); clip-path: circle(150% at 50% 50%); transition: clip-path 1.05s cubic-bezier(.65, 0, .35, 1); } #reIntro.reIntro--wipe { clip-path: circle(0% at 50% 50%); } /* アンビエント粒子（ダスト）フィールド */ .reIntro__field { position: absolute; inset: 0; z-index: 0; opacity: .9; transition: opacity .6s ease; } #reIntro.reIntro--wipe .reIntro__field { opacity: 0; } /* ロゴ・halo・ring をまとめるステージ */ .reIntro__stage { position: relative; z-index: 1; width: min(60vw, 560px); height: min(60vw, 560px); display: flex; align-items: center; justify-content: center; } /* 背後の淡いグロー */ .reIntro__halo { position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(circle, rgba(90,160,255,.55) 0%, rgba(90,160,255,.15) 45%, transparent 72%); filter: blur(4px); opacity: 0; transform: scale(.6); transition: opacity .9s ease, transform 1.3s cubic-bezier(.2, .8, .2, 1); animation: reIntroBreathe 3.2s ease-in-out infinite; animation-play-state: paused; } .reIntro__halo--show { opacity: .85; transform: scale(1); animation-play-state: running; } #reIntro.reIntro--wipe .reIntro__halo { opacity: 0; transform: scale(.7); } @keyframes reIntroBreathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } } /* 回転するリングのスキャンライン */ .reIntro__ring { position: absolute; inset: 10%; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0deg, rgba(150, 200, 255, .9) 55deg, transparent 130deg, transparent 230deg, rgba(150, 200, 255, .55) 300deg, transparent 360deg); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2.5px), #000 calc(100% - 2.5px)); opacity: 0; animation: reIntroSpin 2.6s linear infinite; transition: opacity .5s ease; } .reIntro__ring--show { opacity: 1; } .reIntro__ring--hide, #reIntro.reIntro--wipe .reIntro__ring { opacity: 0; } @keyframes reIntroSpin { to { transform: rotate(360deg); } } /* 発色完了時の白い光のフラッシュ */ .reIntro__flash { position: absolute; inset: -30%; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 70%); opacity: 0; pointer-events: none; } .reIntro__flash--pulse { animation: reIntroFlash .6s ease-out; } @keyframes reIntroFlash { 0% { opacity: 0; } 35% { opacity: .55; } 100% { opacity: 0; } } /* ロゴ本体 */ .reIntro__logo { position: relative; z-index: 2; width: 82%; opacity: 0; transform: scale(.92); transition: opacity .5s ease, transform .7s cubic-bezier(.2, .8, .2, 1); } .reIntro__logo--show { opacity: 1; transform: scale(1); } .reIntro__logo--pop { animation: reIntroPop .5s cubic-bezier(.3, 1.4, .5, 1); } @keyframes reIntroPop { 0% { transform: scale(1); } 40% { transform: scale(1.07); } 100% { transform: scale(1); } } .reIntro__logo--out { transition: opacity .8s ease, transform .9s cubic-bezier(.5, 0, .5, 1); opacity: 0; transform: scale(.8) translateY(-2%); } .reIntro__logo svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 0 22px rgba(110, 175, 255, .5)); } @media (prefers-reduced-motion: reduce) { #reIntro, .reIntro__field, .reIntro__halo, .reIntro__ring, .reIntro__logo { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* dev */ .renewService__inner--dev { display: flex; justify-content: space-between; align-items: center; gap: 60px; margin-top: 40px; margin-bottom: 15px; } .renewService__inner--devLeft { width: 58%; max-width: 580px; } .renewService__inner--devLeft img { vertical-align: bottom; width: 100%; } .renewService__inner--devRight { display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 2; width: calc(100% - 54%); } .renewService__inner--devRight .renewHeading h2 { font-size: 2.6rem; } .renewService__inner--devRight .renewHeading h2 span.textsBig { font-size: 4.5rem; vertical-align: 4px; margin-right: 4px; } /* bottom */ .renewService__inner--middle { display: flex; justify-content: flex-start; align-items: center; gap: 30px; } ul.renewService__inner--middleLists { position: relative; z-index: 1; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; max-width: none; gap: 6px; } li.renewService__inner--middleList { position: relative; } li.renewService__inner--middleList a { font-size: 0.9rem; text-decoration: underline; padding: 3px 16px; position: relative; transition: 0.3s; } li.renewService__inner--middleList a:after { content: "/"; position: absolute; right: -7px; top: 2px; color: #999 !important; } li.renewService__inner--middleList:last-child a:after { content: none; } li.renewService__inner--middleList a:hover { color: var(--main-heading); } /* renew bottom */ ul.renewService__inner--bottom { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 20px 30px; margin-top: 30px; } li.renewService__inner--bottomBox { width: calc(100% / 6 - 25px); background: #fff; position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; padding: 10px 20px; height: 85px; border-radius: 3px; } li.renewService__inner--bottomBox.widevertical { padding-left: 3px; padding-right: 3px; } li.renewService__inner--bottomBox img { width: auto; height: initial; max-height: 75px; } /* recorp */ .renewServiceLogoSlider { display: flex; flex-direction: column; gap: 24px; overflow: hidden; margin-left: calc(50% - 50vw); margin-right: calc(50.7% - 50vw); } .renewServiceLogoSlider__swiper { width: 100%; overflow: hidden; } .renewServiceLogoSlider__wrapper { align-items: center; transition-timing-function: linear !important; } .renewServiceLogoSlider .renewService__inner--bottomBox { width: 180px; height: 90px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .renewServiceLogoSlider .renewService__inner--bottomBox img { max-width: 100%; max-height: 100%; object-fit: contain; } /* re future */ section#inFuture { position: relative; overflow: hidden; } section#inFuture:before { content: ""; width: 380px; height: 400px; background: url(/wp-content/uploads/2025/12/leftimgs.png) no-repeat; background-size: cover; position: absolute; left: -110px; top: 0; } section#inFuture:after { content: ""; width: 320px; height: 410px; background: url(/wp-content/uploads/2025/12/rightimgs-1.png) no-repeat; background-size: cover; position: absolute; right: -70px; top: 0; } .inFuture__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; text-align: center; align-items: center; gap: 20px; padding: 100px 0 90px; position: relative; z-index: 2; } .inFuture__inner h3 { color: var(--main-heading); font-weight: 900; font-size: 2.9rem; letter-spacing: 2px; } .inFuture__inner p { letter-spacing: 0.4px; } .inFuture__inner a.re_primaryBtn { margin-top: 16px; } /* ctas */ section#reTopCTA { position: relative; } .reTopCTA__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 80px 0; display: flex; flex-direction: column; gap: 60px; } .reTopCTA__inners { display: flex; justify-content: space-between; align-items: center; padding: 0 60px; position: relative; background: #fff; height: 350px; box-shadow: 0 2px 40px 0 rgba(58, 52, 255, 0.07); border-radius: 5px; } .reTopCTA__inners.top { background: var(--main-Gradient); } .reTopCTA__inners.top:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2024/10/topwhite_obj.svg) no-repeat; position: absolute; background-size: cover; opacity: 0.1; left: 0; top: 0; pointer-events: none; background-position: bottom; } .reTopCTA__inners--left { width: 100%; display: flex; flex-direction: column; gap: 15px; } .reTopCTA__inners--left h2 { font-size: 2.2rem; font-weight: 600; letter-spacing: 2px; color: #fff; } .reTopCTA__inners--left p { color: #fff; margin-bottom: 8px; } .reTopCTA__inners--left a.thirdBtn { border: solid 1px rgb(255, 255, 255, 0.5); } .reTopCTA__inners--right { width: 45%; display: flex; justify-content: flex-end; position: absolute; right: 50px; } .reTopCTA__inners.bottom { background: #FFF; border: solid 1px #eee; overflow: hidden; } .reTopCTA__inners.bottom:before { content: ""; width: 80%; height: 100%; position: absolute; right: 0; top: 0; background: url(https://digirise.ai/wp-content/uploads/2025/08/mockbooks2.png) no-repeat; background-size: cover; } .reTopCTA__inners.bottom .reTopCTA__inners--left h2, .reTopCTA__inners.bottom .reTopCTA__inners--left p { color: var(--main-text); } .reTopCTA__inners.bottom a { padding: 13px 0 16px; border: solid 1px #eee; } /* renew about us */ section#rereAbout { position: relative; overflow: hidden; } section#rereAbout #shape1 { background: #3a34ff; bottom: 30%; } section#rereAbout #shape1.scrolled { opacity: 0.04; } .rereAbout__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; gap: 0; padding: 140px 0 40px; align-items: center; justify-content: space-between; } .rereAbout__inner--left { display: flex; flex-direction: column; gap: 40px; } .rereAbout__inner--left .renewHeading { margin-top: 15px; } .rereAbout__inner--left span.textsBig { font-size: 8rem; } .rereAbout__inner--leftDesc { display: flex; flex-direction: column; gap: 10px; } .rereAbout__inner--right { display: flex; justify-content: center; position: relative; } .rereAbout__inner--right:after { content: ""; width: 540px; height: 480px; position: absolute; background: url(https://digirise.ai/wp-content/uploads/2025/12/xukei.svg) no-repeat; right: -200px; background-size: cover; top: -130px; } .rereAbout__inner--right img { border-radius: 9999px; vertical-align: bottom; width: 560px; object-fit: cover; height: 530px; position: relative; z-index: 4; object-position: bottom; } .longDot { width: 120px; height: 50px; position: absolute; left: 45px; bottom: 30px; background: #00D8FF; border-radius: 9999px; z-index: 5; transform: rotate(135deg); } /* scene */ section#reTopScene { position: relative; background: #EBF5FA; overflow: hidden; } .reTopScene__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; padding: 120px 0 120px; } /* scene top */ .reTopScene__inner--tops { display: flex; justify-content: space-between; position: relative; padding-bottom: 20px; padding-top: 10px; } .reTopScene__inner--topsLeft { display: flex; flex-direction: column; gap: 40px; position: relative; z-index: 5; } .reTopScene__inner--topsLeft .renewHeading { margin-top: 15px; } .reTopScene__inner--topsRight { display: flex; justify-content: center; position: absolute; right: 0; top: -30px; } .reTopScene__inner--topsRight:after { content: ""; width: 580px; height: 590px; background: url(/wp-content/uploads/2025/12/curveobj.svg) no-repeat; background-size: cover; position: absolute; right: -270px; top: 30px; } .reTopScene__inner--topsRight img { border-radius: 9999px; vertical-align: bottom; width: 560px; object-fit: cover; height: 550px; position: relative; z-index: 4; object-position: bottom; } .reTopScene__inner--topsRight #shape1 { background: #5800ff; opacity: 1; right: 130px; left: auto; z-index: 3; } .reTopScene__inner--topsRight #shape1.scrolled { height: 280px; } ul.reTopScene__inner--lists { display: flex; justify-content: space-between; } li.reTopScene__inner--list { width: 23%; display: flex; flex-direction: column; border: solid 1px var(--main-heading); border-radius: 5px; position: relative; } .reTopScene__inner--listHeading { background: var(--main-heading); display: flex; flex-direction: column; align-items: center; padding: 6px 0 13px; gap: 8px; } li.reTopScene__inner--list h3 { text-align: center; color: #fff; font-weight: 600; } ul.sceneList { list-style: disc; padding: 15px 20px 20px 40px; display: flex; flex-direction: column; gap: 10px; background: #fff; height: 100%; border-radius: 5px; } ul.sceneList li { color: #555; font-size: 0.9rem; line-height: 1.63; } .reTopScene__inner--cases { display: flex; flex-direction: column; gap: 25px; } .miniHeading { display: flex; justify-content: space-between; align-items: center; } .miniHeading h3 { display: flex; justify-content: flex-start; align-items: center; gap: 14px; font-size: 0.9rem; text-transform: uppercase; } .miniHeading h3 span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 2.6rem; color: var(--main-text); } .miniHeading a { position: relative; padding-right: 16px; transition: 0.3s ease; } .miniHeading a:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0px; top: 52%; transform: translateY(-50%); opacity: 0.7; } .miniHeading a:hover { color: var(--main-heading); } .reTopScene__inner--heading { position: relative; display: flex; justify-content: center; } .reTopScene__inner--heading:before { content: ""; width: 100%; height: 1px; background: var(--main-heading); position: absolute; top: 50%; } .reTopScene__inner--heading h2 { color: var(--main-heading); font-size: 1.6rem; font-weight: 600; letter-spacing: 1.4px; position: relative; background: #fff; padding: 0 25px; } .reTopScene__inner--cases a.secondaryBtn { border: solid 1px #eee; box-shadow: 0 2px 40px 0 rgba(58, 52, 255, 0.07); margin: -15px auto 0; } .reTopScene__inner--cases a.secondaryBtn:hover { box-shadow: 0 2px 12px 0 rgba(58, 52, 255, 0.07); } /* strength */ section#reTopStrength { position: relative; background: #F6FCFF; } .reTopStrengthNumber { position: absolute; top: -80px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 160px; } .reTopStrength__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 40px; padding: 120px 0 40px; } .heading.colored.retops p.heading__desc { color: var(--main-text); text-align: center; letter-spacing: 0.9px; } ul.reTopStrength__inner--strengthLists { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 70px 40px; margin-top: 50px; } li.reTopStrength__inner--strengthList { width: 47%; position: relative; border-radius: 8px; background: #FFF; box-shadow: 0 2px 40px 0 rgba(58, 52, 255, 0.07); padding: 45px 35px 25px; } .strengthListNumber { position: absolute; top: -40px; display: flex; flex-direction: column; text-align: center; } .strengthListNumber span { color: var(--main-heading); font-size: 0.6rem; } .strengthListNumber p { color: var(--main-heading); font-size: 4rem; font-weight: 600; line-height: 1; font-family: "Roboto", sans-serif; letter-spacing: 0; } .strengthListText { display: flex; flex-direction: column; gap: 12px; } .strengthListText__heading { display: flex; justify-content: flex-start; gap: 20px; align-items: center; border-bottom: solid 1px #ddd; padding-bottom: 20px; } .strengthListText__headingIcon { display: flex; justify-content: center; align-items: center; background: #E3EFEE; padding: 0; width: 90px; height: 90px; border-radius: 9999px; } .strengthListText__headingIcon img { width: 100%; transform: translateY(-2px); } .strengthListText__heading h3 { font-weight: 600; font-size: 1.3rem; letter-spacing: 1px; width: calc(100% - 90px - 20px); } span.strengthBig { font-size: 2.4rem; background: var(--main-Gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; margin-right: 5px; } .strengthListText__desc p { font-size: 1rem; line-height: 1.93; } li.reTopStrength__inner--strengthList:last-child { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 55px 45px 50px; } li.reTopStrength__inner--strengthList:last-child .strengthListText { width: 45%; } .strengthListImg { margin-top: -5px; width: 46%; } .reTopStrength__inner--links { display: flex; justify-content: center; gap: 40px; margin: 40px 0; } .reTopStrength__inner--links a { border: solid 1px #eee; box-shadow: 0 2px 40px 0 rgba(58, 52, 255, 0.07); } .reTopStrength__inner--links a:hover { box-shadow: 0 2px 12px 0 rgba(58, 52, 255, 0.07); } a.secondaryBtn.outerBtnLink:after { content: "\f2d2"; font-weight: 100; } h2.heading__top.reTopT span.fivestrong { position: relative; left: auto; top: auto; transform: none; display: contents; font-size: 3.2rem; font-family: 'Noto Sans JP', sans-serif; font-style: normal; } .reTopStrength__inner h2.heading__top.reTopT span { top: -80px; } /* insights */ section#reInsights { position: relative; background: linear-gradient(134deg, #3A34FF 10.51%, #1A15BB 86.6%); } .reInsights__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 80px; padding: 120px 0 120px; } .reInsights__inner--top { display: flex; flex-direction: column; gap: 30px; position: relative; } .reInsights__inner--top .renewTitle span, .reInsights__inner--top .renewTitle p { color: #fff; } .reInsights__inner--top .renewHeading { margin-top: 15px; } .reInsights__inner--top h2 { color: #fff; } p.reInsights__inner--topDesc { color: #fff; } .reInsights__inner--seminar { display: flex; gap: 15px; flex-direction: column; } .reInsights__inner--seminarList { background: rgb(255, 255, 255, 0.1); border-radius: 5px; } .reInsights__inner .miniHeading h3, .reInsights__inner .miniHeading h3 span { color: #fff; } .reInsights__inner .miniHeading a { color: #fff; } .reInsights__inner .miniHeading a:hover { opacity: 0.7; } a.miniHeadingOuter { padding-right: 25px; } a.miniHeadingOuter:after { content: "\f2d2"; font-weight: 100; font-size: 0.9rem; } /* mmedia list */ .reInsights__inner--mediaList { background: rgb(255, 255, 255, 0.1); border-radius: 5px; display: flex; padding: 40px 45px; gap: 40px; justify-content: space-between; align-items: flex-start; } ul.reInsights__inner--mediaListLeft, ul.reInsights__inner--mediaListRight { width: calc(100% / 2 - 20px); display: flex; flex-direction: column; gap: 25px; } li.mediaCard a { display: flex; flex-direction: column; gap: 16px; } .mediaCard__img { position: relative; overflow: hidden; border-radius: 5px; } .mediaCard__img img { vertical-align: bottom; transition: 0.3s ease-in-out; } li.mediaCard a:hover .mediaCard__img img { transform: scale(1.035); } .mediaCard__text { display: flex; flex-direction: column; gap: 6px; } p.mediaCard__text--date { font-family: 'Roboto', sans-serif; display: flex; justify-content: flex-start; align-items: center; font-size: 0.8rem; color: #fff; font-style: italic; padding-left: 17px; line-height: 1.2; position: relative; } p.mediaCard__text--date:before { content: "\f017"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0px; opacity: 0.4; font-style: normal; top: 1px; font-size: 0.7rem; } .mediaCard__text h4 { color: #fff; font-weight: 500; line-height: 1.63; font-size: 1.3rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } p.mediaCard__text--link { color: #fff; font-size: 0.8rem; padding-left: 12px; position: relative; line-height: 1.4; } p.mediaCard__text--link:before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0px; top: 1px; opacity: 0.7; } li.mediaCard a:hover { opacity: 0.8; } li.mediaCard.mimini a { flex-direction: row; align-items: center; } li.mediaCard.mimini .mediaCard__img { width: 45%; max-width: 250px; } li.mediaCard.mimini .mediaCard__text { gap: 3px; width: 55%; } li.mediaCard.mimini .mediaCard__text h4 { font-size: 1rem; } section#reInsights #shape3.scrolled { opacity: 0.04; } /* re news */ section#reNews { position: relative; background: #EBF5FA; } .reNews__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 100px 0 60px; } .reNews__inner--columns { display: flex; justify-content: space-between; gap: 80px; } .reNews__inner--column { display: flex; flex-direction: column; width: calc(100% / 2 - 40px); } h3.reNews__inner--columnHead { font-weight: 500; font-size: 1.2rem; border-bottom: solid 1px #aaa; padding-bottom: 8px; } .reNews__inner--column ul.news-content--inner li a { padding: 25px 35px 25px 25px; min-height: 100px; gap: 0; } .reNews__inner--column ul.news-content--inner li a p.semiarDate { line-height: 1.5; } .reNews__inner--column ul.news-content--inner li a h4 { letter-spacing: 0.72px; font-size: 1.1rem; font-weight: 600; line-height: 1.88; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .reNews__inner--column ul.news-content--inner li a:hover { background: #e9f8ff; } /* block cta */ .innerCta { display: flex; border-radius: 5px; border-radius: 5px; position: relative; } .innerCta .reTopStrengthNumber { position: absolute; top: -110px; left: 50%; transform: translateX(-50%); width: 100%; max-width: 160px; z-index: 2; } .innerCtaContainer { padding: 140px 0 40px; } .innerCta--block { display: flex; flex-direction: column; text-align: center; align-items: center; gap: 15px; position: relative; width: 50%; padding: 70px 35px 55px; background: #fff; } p.innerCta--blockText { letter-spacing: 0.1px; flex-grow: 1; display: flex; align-items: center; } .innerCta--blockTop { position: relative; display: flex; justify-content: center; } .innerCta--blockTop span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 4rem; color: var(--main-heading); position: absolute; left: 50%; transform: translateX(-50%); top: -48px; opacity: 0.12; } .innerCta--blockTop h2 { font-size: 1.4rem; letter-spacing: 1px; font-weight: 600; position: relative; z-index: 1; } .innerCta--block.right { background: var(--main-heading); } .innerCta--block.right .innerCta--blockTop h2, .innerCta--block.right .innerCta--blockTop span { color: #fff; } .innerCta--block.right p.innerCta--blockText { color: #fff; } .innerCta--block.right a.re_primaryBtn { border: solid 1px rgb(255, 255, 255, .7); } .innerCta--block a { margin-top: 9px; } .lastbLinks { display: flex; justify-content: space-between; gap: 60px; } a.lastbLink { display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 1.1rem; font-weight: 500; background: #fff; border: solid 1px #ddd; width: calc(100% / 3 - 30px); padding: 15px 20px; border-radius: 3px; } a.lastbLink:hover { background: #f9f9f9; } /* features */ .reTopFeatures__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; padding: 100px 0 60px; } .heading.colored.retops { gap: 40px; } h2.heading__top.reTopT { display: flex; flex-direction: column; color: #fff; position: relative; line-height: 1.3; padding-bottom: 40px; gap: 6px; margin-bottom: -5px; color: var(--main-text); text-align: center; font-size: 2rem; } h2.heading__top.reTopT span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 6rem; letter-spacing: 1.8px; color: var(--main-heading); position: absolute; left: 50%; transform: translateX(-50%); top: -80px; opacity: 0.08; } h2.heading__top.reTopT:after { content: ""; width: 50px; height: 8px; background-size: contain; bottom: 0; position: absolute; background: url(/wp-content/uploads/2024/10/colorBottom.svg) no-repeat; left: 50%; transform: translateX(-50%); } .reTopFeatures__inner p.heading__desc { text-align: center; color: var(--main-text); } ul.reTopFeatures__inner--fourlists { display: flex; flex-direction: column; gap: 80px; } li.reTopFeatures__inner--fourlist { position: relative; display: flex; justify-content: flex-end; } .reTopFeatures__inner--fourlistText { position: absolute; left: 0; top: 50%; transform: translateY(-50%); border-radius: 8px; background: #FFF; box-shadow: 0 2px 40px 0 rgba(58, 52, 255, 0.07); width: 48%; display: flex; flex-direction: column; gap: 10px; padding: 30px 35px; z-index: 2; } .reTopFeatures__inner--fourlistText h3 { font-size: 2.2rem; font-weight: 600; letter-spacing: 1px; color: var(--main-heading); font-weight: 700; } p.fourlistTextSub { font-weight: 600; font-size: 1.5rem; } .reTopFeatures__inner--fourlistImg { width: 60%; height: 420px; border-radius: 8px; display: flex; align-items: center; background: #e3efee; justify-content: center; position: relative; } .reTopFeatures__inner--fourlistImg:after { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2024/10/topwhite_obj.svg) no-repeat; position: absolute; background-size: cover; opacity: 0.4; left: 0; top: 0; pointer-events: none; } .reTopFeatures__inner--fourlistImg img { height: 100%; vertical-align: bottom; transform: scale(1.1) translateX(30px); position: relative; z-index: 1; } li.reTopFeatures__inner--fourlist:nth-child(even) { justify-content: flex-start; } li.reTopFeatures__inner--fourlist:nth-child(even) .reTopFeatures__inner--fourlistImg img { transform: scale(1.1) translateX(-30px); } li.reTopFeatures__inner--fourlist:nth-child(even) .reTopFeatures__inner--fourlistText { left: auto; right: 0; } .reTopFeatures__inner--links { display: flex; justify-content: center; gap: 40px; margin: 20px 0; } .reTopFeatures__inner--links a { border: solid 1px #eee; box-shadow: 0 2px 40px 0 rgba(58, 52, 255, 0.07); } .reTopFeatures__inner--links a:hover { box-shadow: 0 2px 12px 0 rgba(58, 52, 255, 0.07); } /* scroll */ section#jirei { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 0 0; } .scroll_infinity { } @keyframes slide1 { from { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes slide2 { 0% { transform: translateX(0); } to { transform: translateX(-200%); } } .scroll_infinity_wrap { display: flex; position: relative; flex-flow: row nowrap; width: 100%; overflow: hidden; } .scroll_infinity_list:first-of-type { animation: slide1 60s -30s linear infinite; } .scroll_infinity_list:last-of-type { animation: slide2 60s linear infinite; } .scroll_infinity_list { display: flex; align-items: center; gap: 50px; width: 100%; flex-wrap: nowrap; } .scroll_infinity_list li { /* width: calc(100vw / 9); */ width: 200px; height: auto; list-style: none; text-align: center; display: flex; align-items: center; justify-content: center; height: auto; } .scroll_infinity_list li > img { width: auto; height: auto; } /* what */ section#what { position: relative; display: block; padding: 60px 0 100px; } .what__inner { width: 100%; max-width: 1100px; margin: 0 auto; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; /* 背景を大きくしてアニメーション範囲を確保 */ animation: gradientMove 12s infinite ease-in-out; border-radius: 8px; position: relative; display: flex; padding: 70px 60px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .what__inner:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2024/10/topwhite_obj.svg) no-repeat; position: absolute; background-size: cover; opacity: 0.1; left: 0; top: 0; pointer-events: none; } .what__inner--left { width: 52%; } .what__inner--left p.heading__top { padding-bottom: 0; } .what__inner--left p.heading__top:after { content: none; } .what__inner--left a.secondaryBtn.subtext { margin-top: 12px; } .what__inner--right { width: 48%; position: relative; } .what__inner--right img { transform: scale(1.5) translateX(-15px) translateY(15px); } /* shape */ .shape { background-color: #fff; border-radius: 50%; transition: all 2s ease; transform: rotate(45deg); position: absolute; opacity: 0.08; transform-origin: left bottom; } #shape1 { width: 100px; height: 100px; bottom: 80%; left: -60px; } #shape2 { width: 150px; height: 150px; right: 0; top: 50%; transform-origin: right top; background-color: #FFFF00; } #shape3 { width: 120px; height: 120px; bottom: 80px; left: -60px; } #shape4 { width: 140px; height: 140px; bottom: 10%; left: 30%; background-color: #0020ff; } #shape5 { width: 120px; height: 120px; bottom: 80px; left: -60px; } .shape.scrolled { border-radius: 9999px; opacity: 0.15; } #shape1.scrolled { height: 250px; } #shape2.scrolled { height: 400px; } #shape3.scrolled { height: 600px; } #shape4.scrolled { height: 550px; } #shape5.scrolled { height: 350px; opacity: 0.1; } /* business */ section#business { position: relative; background: #296EC6; padding: 160px 0; } .business__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; } .business__inner--left { width: 42%; position: sticky; top: 120px; } ul.business__inner--right { width: 50%; position: relative; display: flex; flex-direction: column; gap: 160px; } ul.business__inner--right li a { display: flex; flex-direction: column; gap: 15px; } .business__inner--rightImg { position: relative; overflow: hidden; border: solid 4px #FFF; border-radius: 14px; filter: drop-shadow(7px 9px 26px rgba(0, 0, 0, 0.28)); margin-bottom: 8px; } .business__inner--rightImg img { position: relative; vertical-align: bottom; width: 100%; } .business__inner--rightImg:before { content: ''; display: block; position: absolute; width: 100%; height: 100%; top: 0; left: -100%; background-image: linear-gradient(130deg, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 55%); -webkit-transition: 0.5s; transition: 0.8s; z-index: 1; } ul.business__inner--right li a:hover .business__inner--rightImg:before { left: 100%; } .business__inner--rightImg:after { position: absolute; top: 50%; right: 20px; transition: 0.2s ease-in-out; content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; transform: translateY(-50%); } .business__inner--rightImgIcon { position: absolute; right: 20px; bottom: 20px; background: #fff; width: 50px; height: 50px; display: flex; justify-content: center; align-items: center; border-radius: 9999px; transition: 0.3s ease-in-out; opacity: 0; pointer-events: none; } ul.business__inner--right li a:hover .business__inner--rightImgIcon { opacity: 1; } .business__inner--rightHeading { display: flex; flex-direction: column; gap: 10px; padding: 0 25px; transition: 0.3s ease-in-out; } .business__inner--rightHeading p { font-size: 1.05rem; font-weight: 600; color: #fff; } p.business__inner--rightDesc { color: #fff; font-size: 1rem; padding: 0 25px; line-height: 2; } ul.business__inner--right li a:hover .business__inner--rightHeading { opacity: 0.8; } .business__inner--rightHeading { text-align: center; } .business__inner--rightHeading h3 img { max-height: 90px; width: auto; } .business__inner--rightHeading h3.textTitle { font-size: 3rem; letter-spacing: 1.5px; font-weight: 600; color: #ffff00; } /* top seminar */ section#topSeminar { position: relative; background: #E3EFEE; } section#topSeminar .shape { background: #fff; opacity: 0.3; pointer-events: none; } .topSeminar__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 140px 0; gap: 60px; position: relative; } .topSeminar__inner--top .heading h2 { color: var(--main-heading); } .topSeminar__inner--top .heading p { color: var(--main-text); } .topSeminar__inner--bottom a.primaryBtn { margin: 0 auto; } .topSeminar__inner--bottom { display: flex; flex-direction: column; gap: 30px; margin: 0 auto; width: 100%; padding: 49px; border: solid 1px #ddd; background: rgb(255, 255, 255, 0.6); border-radius: 8px; } /* news */ section#news { position: relative; background: #e1e0ff; padding: 160px 0 120px; } section#news:after { content: ""; width: 100%; height: 300px; background: url(https://corp.dubdesign.net/wp-content/uploads/2024/10/newsBG.jpg) no-repeat; position: absolute; top: 0; background-size: cover; left: 0; } .news__inner { border-radius: 5px; background: #fff; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); width: 100%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; padding: 65px 45px; align-items: center; position: relative; z-index: 1; } .news__inner a.secondaryBtn { border: solid 1px #ddd; } /* cta */ section#cta { display: block; position: relative; padding-top: 100px; } video#mvvideos { position: absolute; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: bottom; } section#cta:before { content: ""; width: 1000px; height: 500px; border-radius: 9999px; background: radial-gradient(50% 50% at 50% 50%, #FFF 0%, rgba(255, 255, 255, 0.57) 66%, rgba(255, 255, 255, 0.00) 100%); position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 1; } .cta__inner { position: relative; display: flex; flex-direction: column; width: 100%; max-width: 1100px; margin: 0 auto; gap: 100px; z-index: 2; } .cta__inner--top { display: flex; flex-direction: column; text-align: center; gap: 25px; } .cta__inner--top h2 { font-size: 2.8rem; line-height: 1.43; letter-spacing: 1.3px; font-weight: 600; } ul.cta__inner--bottomBtn { background: #fff; border-radius: 5px; box-shadow: 0px 1px 17px 0px rgba(0, 0, 0, 0.08); display: flex; align-items: center; flex-wrap: wrap; } ul.cta__inner--bottomBtn li { width: 50%; } ul.cta__inner--bottomBtn li:first-child { border-right: solid 1px #ddd; } a.cta__inner--bottomBtnInner { display: flex; flex-direction: column; align-items: center; gap: 15px; padding: 40px 60px 40px; height: 100%; } a.cta__inner--bottomBtnInner h3 { font-weight: 600; letter-spacing: 1.8px; font-size: 1.8rem; transition: 0.3s ease-in-out; } a.cta__inner--bottomBtnInner p { transition: 0.3s ease-in-out; font-size: 1rem; flex-grow: 1; } a.cta__inner--bottomBtnInner span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 2rem; color: var(--main-heading); position: relative; letter-spacing: 1.8px; transition: 0.3s ease-in-out; } a.cta__inner--bottomBtnInner span:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -22px; top: 49%; transform: translateY(-50%); font-style: normal; font-size: 1rem; } a.cta__inner--bottomBtnInner:hover { background: #f9f9f9 } a.cta__inner--bottomBtnInner:hover h3 { color: var(--main-heading); } /* recruit B */ section#recruitB { position: relative; background: url(/wp-content/uploads/2025/01/rec___bg.jpg) no-repeat; background-size: cover; background-position: center; z-index: 1; margin-top: -120px; } .recruitB__inner { width: 100%; max-width: 1100px; margin: 0 auto; padding: 200px 0 100px; position: relative; display: flex; flex-direction: column; text-align: center; align-items: center; gap: 35px; } .recruitB__inner h2 { color: #ffff00; font-size: 3.2rem; line-height: 1.5; letter-spacing: 2.5px; font-weight: 700; } .recruitB__inner p { color: #fff; } /* news single */ body.single-news { background: #E3EFEE; } main#newsPostPage { display: flex; flex-direction: column; gap: 100px; padding-bottom: 100px; } main#newsPostPage section#pageHeader { height: 320px; } main#newsPostPage .newsPostPage__inner { margin-top: -280px; } .newsPostPage__inner { width: 100%; max-width: 900px; margin: 0 auto; display: flex; padding-bottom: 80px; position: relative; border-radius: 6px; background: #fff; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); padding: 35px 45px; flex-direction: column; } .newsPostPage__inner--blockHeading { margin-bottom: 28px; padding-bottom: 28px; border-bottom: solid 1px #ddd; } .newsPostPage__inner--blockHeadingDates { display: flex; justify-content: flex-start; align-items: center; gap: 15px; flex-wrap: wrap; } p.newsCategory { line-height: 1; color: var(--main-heading); font-size: 0.8rem; padding: 7px 12px 7px; letter-spacing: 1px; font-weight: 500; border-radius: 4px; transform: translateY(-2px); background: #FAFBFE; } .newsPostPage__inner--blockHeading h2 { font-size: 1.5rem; line-height: 1.65; font-weight: 600; letter-spacing: 0.96px; } .newsPostPage__inner--blockHeadingImg { margin-top: 25px; width: 100%; height: auto; } .newsPostPage__inner--blockHeadingImg img { height: auto; width: 100%; } .newsPostPage__inner--blockInner p { margin-bottom: 20px; } .newsPostPage__inner--blockInner p:last-child { margin-bottom: 0; } .newsPostPage__inner--blockInner a { color: var(--main-heading); } .newsPostPage__inner--blockInner a:hover { opacity: 0.7; } /* news post design */ main#newsPostPage h3 { font-size: 1.6rem; font-weight: 600; margin: 30px 0 18px; } main#newsPostPage hr { margin-bottom: 25px; } main#newsPostPage h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 18px; margin-top: 24px; } main#newsPostPage ul, main#newsPostPage ol { display: flex; flex-direction: column; gap: 12px; padding: 30px 40px; background: #f9f9f9; border-radius: 8px; margin-bottom: 20px; } main#newsPostPage ul li, main#newsPostPage ol li { position: relative; padding-left: 30px; color: var(--main-text); font-weight: 400; letter-spacing: 0.8px; } main#newsPostPage ul li:before, main#newsPostPage ol li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; color: var(--main-heading); } main#newsPostPage figure { position: relative; margin: 15px 0; } main#newsPostPage figure img { width: auto; margin: 0 auto; display: block; } /* navigation */ .navigation { width: 100%; max-width: 900px; margin: 0 auto; } .nav-link-container { display: flex; justify-content: space-between; align-items: center; } .news-archive-link a { border-radius: 3px; background: #fff; box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.15); padding: 12px 25px 15px; color: #707070; letter-spacing: 0.8px; } .news-archive-link a:hover { background: #f9f9f9; } .prev-post, .next-post { display: block; } .prev-post { display: flex; justify-content: flex-start; width: 180px; } .next-post { display: flex; justify-content: flex-end; width: 180px; } a.prevNews, a.nextNews { padding: 12px 25px 15px; color: #707070; letter-spacing: 0.8px; position: relative; } a.prevNews:hover, a.nextNews:hover { opacity: 0.7; } a.prevNews:before { content: "\f104"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 18px; font-size: 0.9rem; opacity: 0.7; } a.nextNews:after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 0; top: 18px; font-size: 0.9rem; opacity: 0.7; } /* archive */ main#ArchivePage { position: relative; display: flex; padding-bottom: 20px; flex-direction: column; } .ArchivePage__header { width: 100%; height: 380px; position: relative; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; animation: gradientMove 12s infinite ease-in-out; } .ArchivePage__header:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2024/10/topwhite_obj.svg) no-repeat; position: absolute; background-size: cover; opacity: 0.1; left: 0; top: 0; pointer-events: none; } .ArchivePage__header--inner { width: 100%; height: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } h2.entry-title { display: flex; flex-direction: column; font-size: 2rem; color: #fff; font-weight: 600; letter-spacing: 1.8px; gap: 6px; } h2.entry-title span { font-family: 'Roboto', sans-serif; color: var(--main-palePurple); text-transform: capitalize; font-style:italic; } .news-content { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; } ul.news-content--inner { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; } ul.news-content--inner li a { display: flex; flex-direction: column; padding: 12px 55px 18px 45px; border-top: solid 1px #ddd; position: relative; min-height: 140px; justify-content: center; } ul.news-content--inner li:last-child a { border-bottom: solid 1px #ddd; } ul.news-content--inner li a:after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 15px; top: 50%; font-size: 1rem; opacity: 0.4; transform: translateY(-50%); } ul.news-content--inner li a:hover { background: #f9f9f9; } ul.news-content--inner li a p.semiarDate { font-size: 1rem; } ul.news-content--inner li a h3 { letter-spacing: 0.72px; font-size: 1.1rem; font-weight: 600; line-height: 1.88; } .archive__information { display: block; margin: -10px 0; } .archive__information--block { display: flex; flex-direction: column; padding: 25px 35px; background: var(--palebg-blue); gap: 6px; border-radius: 8px; } .archive__information--block h2 { color: var(--main-lightblue); font-size: 1.5rem; letter-spacing: 1.2px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .archive__information--block h2 span { font-weight: 400; color: var(--main-lightblue); font-size: 1rem; border: solid 1px var(--main-lightblue); padding: 3px 15px 5px; border-radius: 3px; line-height: 1; } /* page nation */ .pageNation { padding: 40px 0 0; display: block; position: relative; } ul.page-numbers { display: flex; justify-content: center; align-items: center; gap: 15px; flex-wrap: wrap; } ul.page-numbers li span, ul.page-numbers li a { font-family: 'Roboto', sans-serif; width: 40px; height: 40px; background: #f9f9f9; display: flex; justify-content: center; align-items: center; border-radius: 9999px; color: #cdcdcd; transition: 0.2s ease-in-out; font-style:italic; } span.page-numbers.current { background: var(--main-lightblue); color: #fff; } ul.page-numbers li a:hover { background: var(--main-lightblue); color: #fff; opacity: 0.6; } /* bread crumb */ nav#breadcrumb { background: var(--main-breadcrumb); } nav#breadcrumb ul { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: flex-start; gap: 32px; padding: 12px 0px 14px; white-space: pre; overflow-x: auto; container-type: inline-size; } nav#breadcrumb ul li a, nav#breadcrumb ul li { color: #fff; letter-spacing: 0.04rem; font-size: 0.9rem; position: relative; font-weight: 300; } nav#breadcrumb ul li a { font-weight: 500; } nav#breadcrumb ul li a:hover { opacity: 0.6; } nav#breadcrumb ul li a:after { content: "\f0da"; font-size: 0.9rem; position: absolute; top: 53%; right: -19px; transform: translateY(-50%); font-family: "Font Awesome 5 Free"; color: #FFF; font-weight: 900; opacity: 0.6; } /* footer */ .footer__inner { display: block; background: #111; position: relative; } .footer__inner.top:before { background: url(/wp-content/uploads/2024/10/bk_abstract.png)no-repeat; position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; pointer-events: none; opacity: 0.2; } .footer__top { display: flex; justify-content: space-between; width: 100%; max-width: 1200px; margin: 0 auto; align-items: center; position: relative; z-index: 1; padding: 65px 0; } .footer__top--logo { display: flex; flex-direction: column; gap: 5px } .footer__top--logo a { display: block; } .footer__top--logo a:hover { opacity: 0.8; } .footer__top--logo p { color: #fff; font-size: 0.9rem; letter-spacing: 0.9px; } p.corpAddress { color: #aaa; font-size: 0.8rem; line-height: 1.8; } .footer__top--marks { display: flex; justify-content: flex-start; gap: 20px; margin: 16px 0 22px; } .footer__top--mark { display: flex; padding: 22px 25px; align-items: center; border: solid 1px #707070; width: fit-content; border-radius: 3px; background: rgb(255, 255, 255, 1); gap: 12px; } .footer__top--mark img { width: 100%; max-width: 130px; height: auto; max-height: 100px; } .footer__top--link { display: flex; align-items: flex-end; width: 58%; flex-direction: column; gap: 50px; } ul.footer__top--linkTop { display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; width: 100%; gap: 10px 5px; position: relative; } ul.footer__top--linkTop:after { content: ""; width: 100%; height: 1px; background: #707070; position: absolute; bottom: -22px; } ul.footer__top--linkTop li { width: calc(100% / 3 - 20px); } ul.footer__top--linkTop li a { color: #fff; position: relative; display: inline-block; padding: 8px 24px; font-size: 1rem; width: auto; } ul.footer__top--linkTop li a:before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 6px; top: 52%; transform: translateY(-50%); opacity: 0.4; color: #fff; } ul.footer__top--linkTop li a:hover { opacity: 0.7; } .footer__top--linkBottom { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; flex-wrap: wrap; } .footer__top--linkBottom h2 { width: 100%; color: #FFF; font-weight: 500; letter-spacing: 1px; } .footer__top--linkBottom { display: flex; flex-direction: row; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 12px 0; } ul.footer__top--linkBottomService { width: 50%; display: flex; flex-direction: column; gap: 5px; } ul.footer__top--linkBottomService li a { color: #fff; position: relative; display: inline-block; padding: 8px 24px; font-size: 0.9rem; } ul.footer__top--linkBottomService li a:before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 6px; top: 52%; transform: translateY(-50%); opacity: 0.4; color: #fff; } ul.footer__top--linkBottomService li a:hover { opacity: 0.7; } .footer__bottom { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 30px 0; } ul.footerLink { display: flex; justify-content: flex-start; align-items: center; gap: 20px; } ul.footerLink li a { color: #fff; font-size: 0.9rem; padding: 5px 10px 5px 16px; position: relative; } ul.footerLink li a:hover { opacity: 0.7; } ul.footerLink li a:before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; color: #fff; font-size: 0.8rem; opacity: 0.6; } .footer__bottom p { font-size: 0.8rem; color: #aaa; } .footer__top--logo .trp-language-switcher > div { background-position: calc(100% - 10px) calc(1em + 0px), calc(100% - 3px) calc(1em + 0px); } /* terms */ section#pageHeader { width: 100%; height: 380px; position: relative; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; animation: gradientMove 12s infinite ease-in-out; } section#pageHeader:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2024/10/topwhite_obj.svg) no-repeat; position: absolute; background-size: cover; opacity: 0.1; left: 0; top: 0; pointer-events: none; } .pageHeader__inner { width: 100%; height: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; } h2.pageHeader__top { display: flex; flex-direction: column; font-size: 2rem; color: #fff; font-weight: 600; letter-spacing: 1.8px; gap: 6px; position: relative; } h2.pageHeader__top span { font-family: 'Roboto', sans-serif; color: var(--main-palePurple); text-transform: capitalize; font-style: italic; } section#termsContent { margin-top: -80px; margin-bottom: 120px; } section#termsContent h3 { font-size: 1.6rem; font-weight: 600; margin: 30px 0 18px; } section#termsContent h4 { font-size: 1.3rem; font-weight: 600; margin-bottom: 18px; margin-top: 24px; } section#termsContent h3:first-child { margin-top: 0; } section#termsContent ul.wp-block-list, section#termsContent ol.wp-block-list { background: #f9f9f9; display: flex; flex-direction: column; gap: 12px; padding: 22px 35px 24px 55px; border-radius: 6px; margin-bottom: 30px; margin-top: -12px; } section#termsContent ol.wp-block-list { list-style: auto; margin-top: 24px; } section#termsContent ol.wp-block-list li { line-height: 1.83; position: relative; color: #555; padding-left: 8px; } section#termsContent ul.wp-block-list li { line-height: 1.83; position: relative; color: #555; } section#termsContent ul.wp-block-list li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: -26px; top: 2px; color: var(--main-heading); } section#termsContent ul.wp-block-list li ul.wp-block-list { margin-bottom: 0px; padding-bottom: 0; padding-left: 32px; padding-top: 22px; gap: 8px; padding-right: 0; } section#termsContent ul.wp-block-list li ul.wp-block-list li:before { content: "\f0da"; opacity: 0.7; color: #222; } /* thanks */ .thanks__inner { display: flex; flex-direction: column; width: 100%; max-width: 700px; margin: 0 auto; padding: 180px 0 100px; gap: 40px; align-items: center; } .thanks__inner--text { display: flex; flex-direction: column; gap: 25px; text-align: center; } /* 404 */ img.notfoundPage { height: 200px; width: 100%; } /* anchor */ section#anchor { display: block; margin-top: -40px; position: sticky; top: 80px; z-index: 9; } .anchor__inner { display: flex; justify-content: center; width: 100%; max-width: 900px; margin: 0 auto; align-items: center; position: relative; border-radius: 8px; background: #fff; box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.15); height: 80px; overflow: hidden; } .anchor__inner a { width: calc(100% / 2); display: flex; justify-content: center; align-items: center; position: relative; border-right: solid 1px #ddd; height: 100%; font-size: 1.1rem; letter-spacing: 0.9px; color: #aaa; } .anchor__inner a:last-child { border-right: none; } .anchor__inner a:hover { background: #F7FBFF; color: var(--main-heading); } .anchor__inner a:after { content: "\f0ab"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-left: 5px; transform: translateY(1px); opacity: 0.5; } .anchor__inner a.viewing { background: var(--main-heading); color: #fff; } /* service */ section#service { display: block; padding: 80px 0; } .service__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 65px; } ul.whitepaper { display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; position: relative; gap: 50px 0; } ul.whitepaper:after, ul.seminar:after { content: ""; width: 365px; } ul.whitepaper li { width: 365px; } ul.whitepaper li a { display: flex; flex-direction: column; border: solid 1px #ddd; border-radius: 8px; padding-bottom: 25px; height: 100%; } .whitepaper__img { background: #f9f9f9; height: 280px; display: flex; justify-content: center; align-items: center; position: relative; border-radius: 8px 8px 0 0; transition: 0.3s ease-in-out; } .whitepaper__img--inner { position: relative; filter: drop-shadow(4px 8px 8px #ccc); max-width: 280px; max-height: 280px; box-sizing: border-box; } .whitepaper__img--inner:after { content: ""; height: calc(100% - 5px); left: 0; position: absolute; width: 100%; border-radius: 5px; background: linear-gradient(-90deg, #fff0, #ffffff1a 80%, #ffffff4d 95%, #fff6 96.5%, #cbcbcb14 98%, #6a6a6a1a); border-radius: 3px; top: 0; transition: 0.3s ease-in-out; } .whitepaper__img--inner img { max-height: 250px; width: 100%; transition: 0.3s ease-in-out; } ul.whitepaper li a:hover img, ul.whitepaper li a:hover .whitepaper__img--inner:after { transform: scale(1.05); } ul.whitepaper li a h4 { text-align: center; padding: 20px 25px; color: var(--main-text); font-size: 1.1rem; font-weight: 600; letter-spacing: 0.8px; flex-grow: 1; display: flex; align-items: center; justify-content: center; line-height: 1.83; } ul.whitepaper li a button { width: 240px; background: #fff; border: solid 1px #ddd; border-radius: 9999px; display: flex; justify-content: center; align-items: center; height: 50px; position: relative; margin: 0 auto; } ul.whitepaper li a button { width: 240px; background: #fff; border: solid 1px #ddd; border-radius: 9999px; display: flex; justify-content: center; align-items: center; height: 50px; position: relative; margin: 0 auto; font-size: 0.9rem; padding-bottom: 3px; cursor: pointer; transition: 0.3s ease-in-out; } ul.whitepaper li a button:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; padding-left: 5px; transform: translateY(1px); opacity: 0.5; position: absolute; right: 15px; } ul.whitepaper li a:hover, section#useful ul.whitepaper li a:hover { background: #ffff00; } ul.whitepaper li a:hover .whitepaper__img { background: var(--palebg-blue); } ul.whitepaper li a:hover button { background: var(--main-Gradient); color: #fff; } .heading.colored h3.heading__top { display: flex; flex-direction: column; text-align: center; align-items: center; font-size: 1.4rem; gap: 5px; font-weight: 600; padding-bottom: 28px; } /* useful */ section#useful { display: block; padding: 80px 0; background: #F7FBFF; } section#useful ul.whitepaper li a { background: #fff; } .nopaper { display: flex; justify-content: center; align-items: center; } .nopaper p { border: solid 1px #ddd; padding: 12px 25px 15px; border-radius: 5px; text-align: center; font-size: 0.9rem; color: #707070; } /* download single */ .contact-content { padding: 120px 0; width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; } .contact-content--left { width: 460px; display: flex; flex-direction: column; gap: 20px; } aside#sideForm.contactSide { width: 560px; position: relative; top: 0; height: fit-content; } .contact-content--right { padding: 25px 30px; display: flex; flex-direction: column; background: #fff; z-index: 1; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); border-radius: 8px; } .contact-content--left.semiar__right { padding: 0; } aside#sideForm form p label span:last-child textarea { background: #fff; width: 100%; padding: 5px 18px; height: 220px; } .downloadBook { display: flex; justify-content: center; border: solid 1px #ddd; border-radius: 8px; background: #f9f9f9; padding: 30px; } .downloadBookInner { position: relative; filter: drop-shadow(4px 8px 8px #ccc); max-width: 300px; box-sizing: border-box; } .downloadBookInner:before { content: ""; height: calc(100% - 5px); left: 0; position: absolute; width: 100%; border-radius: 5px; background: linear-gradient(-90deg, #fff0, #ffffff1a 80%, #ffffff4d 95%, #fff6 96.5%, #cbcbcb14 98%, #6a6a6a1a); border-radius: 3px; top: 0; transition: 0.3s ease-in-out; } .downloadHeading h2 { font-size: 2rem; font-weight: 600; position: relative; letter-spacing: 0.83px; color: var(--main-text); line-height: 1.63; padding-bottom: 30px; } .downloadHeading h2::after { left: 0; content: ""; width: 50px; height: 8px; background: url(/wp-content/uploads/2024/10/colorBottom.svg) no-repeat; background-size: contain; bottom: 0; position: absolute; } ul.pickupList { display: flex; flex-direction: column; gap: 12px; padding: 30px 40px; background: #f9f9f9; border-radius: 8px; } ul.pickupList li { position: relative; padding-left: 30px; color: var(--main-text); font-weight: 600; letter-spacing: 0.8px; } ul.pickupList li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; color: var(--main-heading); } ul.pickupList.number { counter-reset: li; gap: 16px; } /* post style */ p.wp-block-paragraph strong { font-weight: 600; } .contact-content--left.semiar__right.downloadPost ul.wp-block-list { display: flex; flex-direction: column; gap: 12px; padding: 30px 40px; background: #f9f9f9; border-radius: 8px; } .contact-content--left.semiar__right.downloadPost ul.wp-block-list li { position: relative; padding-left: 30px; color: var(--main-text); font-weight: 600; letter-spacing: 0.8px; } .contact-content--left.semiar__right.downloadPost ul.wp-block-list li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; color: var(--main-heading); } p.bikoutext.has-small-font-size.wp-block-paragraph { color: #707070; margin-top: -15px; } p.footlastText { letter-spacing: 0.5px; line-height: 1.8; color: #707070; font-size: 0.9rem; } /* about */ .aboutThree__inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; padding: 140px 0; } ul.rightleft { display: flex; flex-direction: column; gap: 160px; } ul.rightleft li { display: flex; justify-content: flex-start; flex-wrap: wrap; position: relative; } .rightleft__text { background: #FAFBFE; width: 600px; padding: 50px 60px; display: flex; flex-direction: column; border-radius: 5px; position: relative; z-index: 1; } .rightleft__text h3.heading__top { display: flex; flex-direction: column; font-size: 2rem; color: var(--main-text); font-weight: 600; letter-spacing: 1.8px; gap: 6px; position: relative; padding-bottom: 36px; } .rightleft__text h3.heading__top span { color: var(--main-palePurple); opacity: 1; } .rightleft__text h3.heading__top:after { background: url(/wp-content/uploads/2024/10/colorBottom.svg) no-repeat; } .rightleft__text p.heading__desc { color: var(--main-text); } .rightleft__img { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 550px; height: 500px; border-radius: 5px; overflow: hidden; } .rightleft__img img { width: 100%; } .rightleft__img.vimeoList { height: 580px; } .rightleft__img video { width: 100%; object-fit: cover; height: 580px; object-position: center; } ul.rightleft li.reverse { justify-content: flex-end; } li.reverse .rightleft__img { right: auto; left: 0; } /* phillosophy */ .philosophy__inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; padding: 80px 0 40px; gap: 80px; } ul.philosophy__inner--content { background: #FAFBFE; display: flex; flex-direction: column; gap: 80px; padding: 80px 80px; position: relative; overflow: hidden; border-radius: 8px; } ul.philosophy__inner--content .heading.colored h3.heading__top { font-size: 2rem; line-height: 1.7; gap: 0px; padding-bottom: 35px; } ul.philosophy__inner--content .heading.colored h3.heading__top span { color: var(--main-heading); opacity: 1; font-size: 3rem; } ul.philosophy__inner--content p.heading__desc { text-align: center; color: var(--main-text); } ul.philosophy__inner--content .shape { opacity: 0.03; background: #3a34ff !important; } /* about link */ section#aboutLink { position: relative; padding: 40px 0 80px; } ul.aboutLink__inner { width: 100%; max-width: 900px; margin: 0 auto; display: flex; justify-content: center; align-items: center; border-radius: 5px; background: #fff; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); overflow: hidden; } ul.aboutLink__inner li { width: calc(100% / 3); } ul.aboutLink__inner li a { padding: 35px 50px 40px; display: flex; flex-direction: column; align-items: center; gap: 15px; border-right: solid 1px #ddd; } ul.aboutLink__inner li:last-child a { border: none; } ul.aboutLink__inner li a h4 { font-weight: 600; letter-spacing: 1.8px; font-size: 1.5rem; transition: 0.3s ease-in-out; } ul.aboutLink__inner li a span { font-family: "Roboto", sans-serif; font-style: italic; font-size: 2rem; color: var(--main-heading); position: relative; letter-spacing: 1.8px; transition: 0.3s ease-in-out; } ul.aboutLink__inner li a span:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: -22px; top: 49%; transform: translateY(-50%); font-style: normal; font-size: 1rem; } ul.aboutLink__inner li a:hover { background: #f9f9f9; } ul.aboutLink__inner li a:hover h4 { color: var(--main-heading); } ul.aboutLink__inner li a.anchor { background: var(--main-heading); pointer-events: none; } ul.aboutLink__inner li a.anchor h4, ul.aboutLink__inner li a.anchor span { color: #fff; } ul.aboutLink__inner li a.anchor span { opacity: 0.3; } /* message */ section#messagePage { position: relative; } section#messagePage .shape { opacity: 0.02; background: #3a34ff !important; } .messagePage__inner { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; padding: 100px 0 40px; gap: 80px; position: relative; } .messagePage__inner .heading.colored h3.heading__top { display: flex; flex-direction: column; font-size: 2.8rem; color: var(--main-text); font-weight: 600; letter-spacing: 1.8px; gap: 6px; position: relative; padding-bottom: 36px; text-align: left; align-items: flex-start; line-height: 1.6; } .messagePage__inner p.heading__desc { color: var(--main-text); } .messagePage__inner--bottom { display: flex; justify-content: end; margin-top: -45px; } .messagePage__inner--bottom p { display: flex; flex-direction: column; align-items: flex-end; font-size: 2rem; font-weight: 600; line-height: 1.5; color: var(--main-heading); } .messagePage__inner--bottom p span { font-size: 0.9rem; font-weight: 400; color: #707070; } /* profile */ section#ceoProfile { position: relative; padding: 80px 0 40px; } .ceoProfile__inner { background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; animation: gradientMove 12s infinite ease-in-out; width: 100%; max-width: 1100px; margin: 0 auto; display: block; padding: 40px 0; border-radius: 8px; } .ceoProfile__inner--inner { background: #fff; filter: drop-shadow(0px 1px 12px rgba(0, 0, 0, 0.15)); width: 100%; max-width: 1000px; margin: 0 auto; border-radius: 8px; display: flex; padding: 35px 40px; gap: 35px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .ceoProfile__inner--innerLeft { height: 360px; width: 40%; border-radius: 8px; overflow: hidden; } .ceoProfile__inner--innerLeft img { object-fit: cover; height: 100%; width: 100%; } .ceoProfile__inner--innerRight { display: flex; flex-direction: column; gap: 12px; width: 54%; } .ceoProfile__inner--innerRight h3 { display: flex; flex-direction: column; font-size: 2.6rem; letter-spacing: 2px; font-weight: 600; background: var(--main-Gradient); -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; } .ceoProfile__inner--innerRight h3 span { font-size: 0.9rem; font-weight: 400; } .ceoProfile__inner--innerRight p { font-size: 1.3rem; line-height: 1.73; font-weight: 600; } .ceoProfile__inner--innerRight dl { display: flex; flex-direction: column; gap: 15px; } .profileLine { display: flex; flex-direction: column; gap: 5px; } .profileLine dt { font-size: 0.9rem; font-weight: 600; color: var(--main-heading); } /* company */ section#companyOverview { display: block; position: relative; } .companyOverview__inner { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; padding: 100px 0 100px; gap: 80px; position: relative; } .companyOverview__inner dl { display: flex; flex-direction: column; gap: 25px; } .companyOverview__inner--row { display: flex; flex-direction: row; justify-content: flex-start; position: relative; border-bottom: solid 1px #ddd; } .companyOverview__inner--row dt { width: 180px; letter-spacing: 2.5px; font-weight: 600; color: var(--main-text); position: relative; font-size: 1.1rem; padding: 22px 0; } .companyOverview__inner--row dt:after { content: ""; width: 100%; height: 1px; position: absolute; background: var(--main-heading); bottom: -1px; left: 0; } .companyOverview__inner--row dd { display: flex; padding: 18px 0; line-height: 1.83; font-size: 1.1rem; color: #313131; width: calc(100% - 180px); flex-direction: column; } .companyOverview__inner--row dd ul { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; } .companyOverview__inner--row dd ul { display: flex; flex-direction: column; gap: 5px; margin-bottom: 12px; list-style: disc; padding-left: 22px; } .companyOverview__inner--row dd p { font-size: 0.9rem; line-height: 1.73; color: #707070; } .companyOverview__inner--map { width: 100%; height: 500px; } .companyOverview__inner--map iframe { width: 100%; height: 100%; } section#identity { background: #FAFBFE; } .identity__inner { width: 100%; max-width: 900px; margin: 0 auto; display: flex; flex-direction: row; padding: 100px 0 80px; gap: 40px; position: relative; flex-wrap: wrap; } .identity__inner--left { width: 30%; } .identity__inner--left .heading h3.heading__top { justify-content: flex-start; align-items: baseline; } .identity__inner--left .heading h3.heading__top span { color: var(--main-heading); opacity: 1; } .identity__inner--right { width: 60%; display: flex; flex-direction: column; gap: 25px; } .identity__inner--rightImg { background: #fff; display: flex; justify-content: center; align-items: center; padding: 140px 0; border-radius: 5px; } .identity__inner--rightImg img { width: 100%; max-height: 60px; } .identity__inner--right h4 { font-size: 2rem; font-weight: 600; letter-spacing: 2px; color: var(--main-text); } body.page.page-id-97 section#aboutLink { padding-top: 80px; } /* =============================================== # スライド横スクロール =============================================== */ section#servicePage { background: #296EC6; position: relative; } section#servicePage:before { content: ""; width: 100%; height: 80px; position: absolute; top: -80px; left: 0; background: #296EC6; } .slide { width: 100%; margin-top: 80px; overflow: hidden; position: relative; } .slide:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/uploads/2024/10/objects.svg) no-repeat; position: absolute; background-size: cover; opacity: 0.1; left: 0; top: 0; pointer-events: none; } .slide__wrapper { width: 100%; max-width: 1100px; height: 100vh; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 0 10%; position: relative; } .slide__list { height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; } .slide__item { width: 80vw; height: 80%; position: relative; -ms-flex-negative: 0; flex-shrink: 0; overflow: hidden; border: solid 4px #FFF; border-radius: 14px; filter: drop-shadow(2px 0px 7px rgba(0, 0, 0, 0.28)); margin-bottom: 8px; } .slide__item:before { content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; } .slide__item + .slide__item { margin-left: 20px; } .slide__container { position: absolute; left: 50%; top: 50px; color: white; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; width: 700px; z-index: 2; } .slide__title { font-size: 3rem; font-weight: bold; line-height: 1; letter-spacing: 2px; } .slide__subTitle { display: inline-block; font-size: 1.2rem; font-weight: 500; letter-spacing: 2px; } .slide__text { font-size: 1.1rem; font-weight: 400; color: #fff; } .slide__item img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1.03); } h3.slide__title.lineheigh { line-height: 1.33; } /* seminar */ /* main */ main#seminarPostPage { position: relative; display: block; padding-top: 140px; padding-bottom: 80px; } main#seminarPostPage:after { content: ""; width: 100%; height: 280px; background: url(https://seminar.dubdesign.net/wp-content/uploads/2023/12/abstract.jpg) no-repeat; position: absolute; top: 0; left: 0; background-size: cover; } .seminarPostPage__inner { width: 100%; max-width: 1250px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; padding-bottom: 80px; } /* seminar left */ section.semiar__left { display: flex; position: relative; z-index: 1; flex-direction: column; max-width: 750px; gap: 60px; } .semiar__left--eyecatch { display: flex; flex-direction: column; gap: 30px; } .semiar__left--eyecatch img { border-radius: 6px; width: 100%; } .semiar__left--title { display: flex; flex-direction: column; gap: 15px; } p.semiarDate { font-family: 'Roboto', sans-serif; display: flex; justify-content: flex-start; align-items: center; font-size: 1.3rem; gap: 10px; color: var(--main-heading); font-style:italic; } p.semiarMEMO { margin-top: -12px; color: var(--main-heading); font-size: 0.9rem; border: solid 1px; width: fit-content; padding: 4px 25px; border-radius: 5px; background: #f9f9f9; } p.semiarDate.archiveCat { color: var(--main-lightblue); } p.semiarDate span.innerdate { background: var(--main-heading); color: #fff; width: 22px; height: 22px; font-size: 0.8rem; display: flex; justify-content: center; line-height: 18px; border-radius: 9999px; transform: translateY(-1px); font-style: normal; letter-spacing: -1px; } p.semiarDate.archiveCat span.innerdate { background: var(--main-lightblue); } span.movieover { font-family: 'Noto Sans JP', sans-serif; font-size: 1rem; transform: translateY(-2px); font-weight: 600; } .semiar__left--title h1 { font-size: 2rem; line-height: 1.61; letter-spacing: 1.28px; font-weight: 700; color: var(--main-text); margin-bottom: 12px; margin-top: -4px; display: flex; flex-direction: column; } .semiar__left--title h1 span.subtitleHeading { font-size: 1.3rem; font-weight: 400; line-height: 1.61; color: #707070; } .semiar__left--title h1 span.subtitleBottom { font-size: 1.3rem; line-height: 1.61; color: #3a34ff; margin-top: 6px; font-weight: 600; text-decoration: underline; text-underline-offset: -0.2em; text-decoration-thickness: 0.5em; text-decoration-color: rgba(255, 255, 0, 1); text-decoration-skip-ink: none; } /* seminar tag */ ul.semiarTag { display: flex; justify-content: flex-start; flex-wrap: wrap; align-items: center; gap: 20px; } ul.semiarTag li { display: block; position: relative; background: var(--main-Gradient); color: #fff; font-size: 0.9rem; border-radius: 9999px; padding: 2px 15px 4px 30px; } ul.semiarTag li:before { content: "#"; position: absolute; left: 15px; font-size: 1.1rem; top: 0px; } /* seminar overview */ .semiar__left--overview { display: flex; flex-direction: column; gap: 20px; } .seminarOverViewText p br { display: block; content: ""; height: 10px; } .seminarHeading h2 { display: flex; flex-direction: column; gap: 10px; color: var(--main-text); letter-spacing: 1.2px; font-size: 1.5rem; font-weight: 600; position: relative; padding-bottom: 30px; } .seminarHeading h2 span { font-family: 'Roboto', sans-serif; color: var(--main-palePurple); letter-spacing: 0.32px; font-size: 1.8rem; font-style:italic; } .seminarHeading h2:after { content: ""; height: 10px; width: 40px; max-width: 100%; position: absolute; bottom: 0; background: url(https://seminar.dubdesign.net/wp-content/uploads/2023/12/asset.webp) no-repeat; background-size: contain; } .seminarOverViewText { display: flex; flex-direction: column; gap: 15px; } /* pickup */ .seminar__left--pickup { display: flex; flex-direction: column; gap: 20px; } .seminar__left--pickup h3 { font-size: 1.2rem; font-weight: 600; } ul.pickupList { display: flex; flex-direction: column; gap: 12px; padding: 30px 40px; background: #f9f9f9; border-radius: 8px; } ul.pickupList li { position: relative; padding-left: 30px; color: var(--main-text); font-weight: 600; letter-spacing: 0.8px; } ul.pickupList li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 6px; color: var(--main-heading); } ul.pickupList.number { counter-reset: li; gap: 16px; } ul.pickupList.number > li:before { counter-increment: li; content: counter(li); width: 23px; line-height: 23px; font-family: 'Avenir Next', 'Helvetica Neue', Arial, 'Meiryo','Yu Gothic', san-serif; font-weight: 400; text-align: center; color: #fff; position: absolute; top: 1px; left: -7px; background: var(--main-heading); border-radius: 9999px; font-size: 0.9rem; } /* seminar speaker */ .semiar__left--speaker { display: flex; flex-direction: column; gap: 20px; } ul.speakers { display: flex; flex-direction: column; gap: 40px; } ul.speakers li { background: #f9f9f9; padding: 25px 30px; border-radius: 8px; display: flex; justify-content: flex-start; gap: 30px; align-items: flex-start; } ul.speakers li img { border-radius: 8px; width: 180px; height: 180px; object-fit: cover; object-position: center; } .speakers__right { display: flex; flex-direction: column; gap: 15px; width: calc(100% - 180px - 50px); } .speakersName { display: flex; flex-direction: column; padding-bottom: 15px; position: relative; gap: 5px; } .speakersName:after { content: ""; width: 100%; background: #ddd; height: 1px; position: absolute; bottom: 0; } .speakersName p { font-size: 0.8rem; color: #707070; } .speakersName h3 { display: inline-block; font-size: 2.1rem; font-weight: 600; letter-spacing: 1px; color: var(--main-heading); width: fit-content; } .speakersName h3 ruby, .speakersName h3 span.name_uji { color: var(--main-heading); } .speakersName h3 ruby rt { font-size: 0.8rem; display: block; } .speakersName h3 span.name_uji { font-size: 1.2rem; vertical-align: -1px; padding-left: 5px; } .speakersProfile p { color: var(--main-text); font-size: 1rem; line-height: 1.87; letter-spacing: 0.8px; } .semiar__left--detail { display: flex; flex-direction: column; gap: 50px; } ul.detailTen { list-style: disc; padding-left: 25px; } dl.seminarDetail { display: flex; flex-direction: column; } .detailInner { display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; padding: 35px 25px; border-top: solid 1px #ddd; } .detailInner dt { width: 115px; color: var(--main-heading); letter-spacing: 0.8px; font-weight: 600; } .detailInner dd { letter-spacing: 0.64px; color: var(--main-text); font-weight: 400; width: calc(100% - 120px); display: block; line-height: 1.8; } dl.seminarDetail .detailInner:last-child { border-bottom: solid 1px #ddd; } p.semiarDetailMEMO { font-size: 0.9rem; color: #707070; } /* sidebar */ aside#sideForm { width: 430px; background: #f9f9f9; z-index: 1; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); border-radius: 8px; position: sticky; top: 80px; } .semiar__right { padding: 25px 30px; display: flex; flex-direction: column; gap: 20px; } .contact-content--right.semiar__right iframe { min-height: 1400px; } .semiar__right.archiveVideo { padding: 25px 0 0; } .semiar__right.archiveVideo .hbspt-form, .semiar__right.archiveVideo iframe { height: 500px; overflow: scroll; padding: 20px 30px; background: #fff; border-radius: 0 0 10px 10px; } .semiar__right--heading { display: flex; flex-direction: column; align-items: center; gap: 0; } .semiar__right--heading h3 { display: inline-block; font-size: 1.6rem; font-weight: 600; letter-spacing: 1px; background: var(--main-Gradient); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; width: fit-content; } p.seminar__article--hosoku { font-size: 0.7rem; color: #707070; } .semiar__right p.seminar__article--hosoku.seminarEnd { font-size: 1rem; width: 100%; display: flex; justify-content: center; padding-bottom: 25px; } /* form */ aside#sideForm form { display: flex; flex-direction: column; gap: 15px; } form.wpcf7-form.init p { position: relative; } aside#sideForm form p label { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } aside#sideForm form p br { display: none; } aside#sideForm form p label span.formName { width: 80px; font-size: 0.9rem; line-height: 1.3; } aside#sideForm form p label span.wpcf7-form-control-wrap { width: calc(100% - 100px); position: relative; } aside#sideForm form p label span:last-child input, aside#sideForm form p label span:last-child select { background: #fff; height: 40px; width: 100%; padding: 3px 14px 4px; } input.wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required.wpcf7-not-valid, select.wpcf7-form-control.wpcf7-select.wpcf7-validates-as-required.wpcf7-not-valid, textarea.wpcf7-form-control.wpcf7-textarea.wpcf7-validates-as-required.wpcf7-not-valid { border: solid 2px #ff0000; } span.wpcf7-not-valid-tip { font-size: 0.5rem; position: absolute; bottom: -15px; } .wpcf7-response-output { display: none; } /* seminar archive */ /* archive */ main#ArchivePage { position: relative; display: flex; padding-bottom: 80px; flex-direction: column; } h2.entry-title { display: flex; flex-direction: column; font-size: 2rem; color: #fff; font-weight: 600; letter-spacing: 1.8px; } h2.entry-title span { font-family: 'Roboto', sans-serif; color: var(--main-palePurple); text-transform: capitalize; font-style:italic; } .news-content { padding: 80px 0; display: flex; flex-direction: column; gap: 40px; } ul.news-content--inner { width: 100%; max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; } ul.news-content--inner li a { display: flex; flex-direction: column; padding: 20px 55px 25px 45px; border-top: solid 1px #ddd; position: relative; gap: 3px; } .newsDateTerm { display: flex; justify-content: flex-start; gap: 12px; align-items: center; flex-wrap: wrap; } .newsDateTerm p.newsCategory { padding: 5px 10px 6px; font-size: 0.7rem; transform: none; } p.newsCategory.companyTag { color: var(--main-lightblue); } p.newsCategory.campaignTag { color: #f53405; } ul.news-content--inner li:last-child a { border-bottom: solid 1px #ddd; } ul.news-content--inner li a:after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 15px; top: 50%; font-size: 1rem; opacity: 0.4; transform: translateY(-50%); } ul.news-content--inner li a:hover { background: #f9f9f9; } ul.news-content--inner li a p.semiarDate { font-size: 1rem; } ul.news-content--inner li a h3 { letter-spacing: 0.72px; font-size: 1.1rem; font-weight: 600; line-height: 1.88; } .archive__information { display: block; margin: -10px 0; } .archive__information--block { display: flex; flex-direction: column; padding: 25px 35px; background: var(--palebg-blue); gap: 6px; border-radius: 8px; } .archive__information--block h2 { color: var(--main-lightblue); font-size: 1.5rem; letter-spacing: 1.2px; font-weight: 600; display: flex; align-items: center; gap: 10px; } .archive__information--block h2 span { font-weight: 400; color: var(--main-lightblue); font-size: 1rem; border: solid 1px var(--main-lightblue); padding: 3px 15px 5px; border-radius: 3px; line-height: 1; } /* seminar list */ .ArchivePage__content { padding: 80px 0 0; } ul.cardList { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 40px; position: relative; } ul.cardList:after { content: ""; width: 340px; } ul.cardList li { width: 340px; } ul.cardList li a { background: #fff; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22); cursor: pointer; transition: 0.2s ease-in-out; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; padding-bottom: 15px; gap: 8px; height: 100%; } ul.cardList li a:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } .cardList__img { position: relative; width: 100%; height: 190px; margin-bottom: 8px; } .cardList__img img { width: 100%; height: 190px; object-fit: cover; } .cardList__img span { font-family: 'Roboto', sans-serif; position: absolute; top: 0; left: 0; background: var(--main-Gradient); color: #fff; padding: 4px 14px; letter-spacing: 0.63px; font-style:italic; } ul.cardList li a p.semiarDate { font-size: 1rem; padding-left: 21px; padding-right: 21px; line-height: 1; } ul.cardList li a p.semiarDate span.innerdate { width: 20px; height: 20px; } ul.cardList li a h2, ul.cardList li a h3 { font-size: 1.2rem; font-weight: 500; line-height: 1.63; padding-left: 20px; padding-right: 20px; flex-grow: 1; padding-bottom: 3px; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--main-text); } ul.cardList li a ul.semiarTag { padding-left: 18px; padding-right: 18px; gap: 10px; } ul.cardList li a ul.semiarTag li { display: inline-flex; width: fit-content; justify-content: center; padding: 0px 15px 2px 30px; } ul.cardList li a ul.semiarTag li:before { top: -2px; } .cardList__img span.archiveCatAbso { background: var(--main-lightblue); } /* archive seminar */ .ArchivePage__content { width: 100%; max-width: 1200px; margin: 0 auto; } /* fixed bottom */ #footerBtn { display: flex; justify-content: center; position: fixed; bottom: 0; width: 100%; z-index: 100; background: rgb(0,0,0,0.3); padding: 10px 0 10px; } #footerBtn.seminarEnded { padding-left: 2%; padding-right: 2%; background: rgb(0,0,0,0.7); } #footerBtn.seminarEnded p { display: flex; justify-content: center; color: #fff; padding: 8px 25px; border: solid 1px #fff; width: 100%; } /* case single */ body.single-case { background: #E3EFEE; } main#casePost { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 1250px; margin: 0 auto; padding: 100px 0; } article#case { background: #fff; border-radius: 8px; display: flex; flex-direction: column; gap: 0; padding: 40px 45px 50px; width: 100%; max-width: 820px; } .case__header { display: flex; flex-direction: column; gap: 5px; padding-bottom: 40px; } .case__header h1 { font-weight: 600; color: #222; font-size: 2.2rem; line-height: 1.43; letter-spacing: 2px; } .case__header p { color: var(--main-heading); font-weight: 600; font-size: 1.2rem; } .case__img { margin-left: -45px; margin-right: -45px; } .case__img img { vertical-align: bottom; width: 100%; } .case__beforeafter { display: flex; justify-content: space-between; flex-wrap: wrap; padding: 40px 0; } .case__beforeafter--inner { display: flex; flex-direction: column; gap: 0; position: relative; width: 48%; } p.caseHeading { background: #be4335; color: #fff; text-align: center; font-size: 1.2rem; font-weight: 600; letter-spacing: 1px; padding-bottom: 2px; border-radius: 6px 6px 0 0; } .case__beforeafter--inner ul { display: flex; flex-direction: column; gap: 10px; padding: 26px 22px; background: #faf2f2; flex-grow: 1; border-radius: 0 0 6px 6px; } .case__beforeafter--inner ul li { font-size: 1.1rem; line-height: 1.7; position: relative; padding-left: 30px; color: #222; flex-grow: 1; letter-spacing: 1.2px; } .case__beforeafter--inner ul li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 2px; top: 2px; color: #be4335; } .case__beforeafter--inner.afterBlue p.caseHeading { background: #3289cc; } .case__beforeafter--inner.afterBlue ul { background: #f8fbfe; } .case__beforeafter--inner.afterBlue ul li:before { color: #3289cc; } .case__beforeafter--inner:after { content: ""; position: absolute; top: 50%; left: 100%; margin-top: -15px; border: 15px solid transparent; border-left: 15px solid #faf2f2; } .case__beforeafter--inner.afterBlue:after { content: none; } /* article */ .article__inner { display: flex; flex-direction: column; gap: 20px; } .article__inner h2 { color: var(--main-heading); font-weight: 600; font-size: 1.6rem; letter-spacing: 1.8px; margin: 20px 0 0px; padding-top: 30px; border-top: solid 1px #ddd; } .article__inner h2:first-child { margin: 0; } .article__inner p { letter-spacing: 1px; } /* toc */ section#articleToc { display: block; position: relative; } .accordionToc { border-top: solid 5px var(--main-heading); background: #fefefe; margin: 0 auto 40px; padding: 25px 32px; box-shadow: 0 1.5px 2.4px rgb(0 0 0 / 15%); } .accordionToc p, button.accordion-header { display: inline-block; margin: 0; width: auto; } .accordionToc p { margin-right: 20px; font-size: 1.4rem; font-weight: 600; position: relative; } .accordionToc p:before { background: var(--main-heading); border-radius: 9999px; width: 50px; height: 50px; display: inline-block; vertical-align: middle; line-height: 50px; margin-right: 8px; color: #FFF; content: "\f0ca"; font-family: "Font Awesome 5 Free" !important; font-weight: 900; text-align: center; font-size: 1.3rem; } .accordion-header { cursor: pointer; line-height: 1.35; margin: 0; padding: 4px 16px; text-decoration: none; transition: all 0.2s ease 0s; position: relative; border-radius: 5px; background: #cbcbcb; color: #fff; border: none; font-size: 0.8rem; vertical-align: 2px; } button.accordion-header:before { content: "[ 表示 ]"; } button.accordion-header.active:before { content: "[ 非表示 ]"; } #tocBlock { background-color: #fff; display: none; overflow: hidden; border: none; animation: fadeIn 0.7s ease 0s 1 normal; list-style: none; padding: 20px 0 0; margin: 20px 0 0; border-top: 1px solid rgba(0,0,0,.1); } #tocBlock.show { display: block; } li.h2, li.h3 { margin: 0; font-size: 1rem; line-height: 1; padding: 0; position: relative; } ul#tocBlock li:before { content: "\f00c"; background: none; font-family: "Font Awesome 5 Free" !important; font-weight: 900; color: var(--main-heading); top: 13px; left: 0; position: absolute; font-size: 1.2rem; } ul#tocBlock li.h3 { margin-left: 7px; } ul#tocBlock li.h3:before { content: '\f105'; font-size: 1.3rem; left: 23px; } ul#tocBlock li a { line-height: 1.3; margin: 10px 0 4px 28px; display: inline-block; color: #313131; position: relative; padding-bottom: 8px; font-size: 1.1rem; } ul#tocBlock li.h3 a { margin-left: 43px; font-weight: 400; } ul#tocBlock li.h3:after { content: ""; width: 2px; height: 100%; background: #fff4a2; position: absolute; left: 0; } ul#tocBlock li a:after { content: ""; width: 0; height: 2px; background: var(--main-heading); bottom: 3px; left: 0; position: absolute; transition: all .3s ease; } ul#tocBlock li a:hover:after { width: 100%; } @keyframes fadeIn { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; } } /* article style */ main#casePost .article__inner h3 { font-size: 1.4rem; font-weight: 600; } .case__img img.blankimg { margin-bottom: 40px; } main#casePost .article__inner hr.wp-block-separator.has-alpha-channel-opacity { border: solid 0.6px #ddd; } /* aside */ aside#caseSide { width: 380px; border-radius: 8px; overflow: hidden; position: sticky; top: 100px; display: flex; flex-direction: column; gap: 30px; } .caseSide__inner { display: flex; flex-direction: column; gap: 15px; padding-bottom: 8px; background: #fff; border-radius: 8px; padding-top: 20px; } .caseSide__img img { vertical-align: bottom; height: 180px; object-fit: cover; width: 100%; } dl.caseSide__list { display: flex; flex-direction: column; gap: 8px; padding: 0 25px; } .caseSide__list--row { display: flex; justify-content: flex-start; align-items: flex-start; gap: 15px; } .caseSide__list--row dt { width: 80px; display: flex; justify-content: center; background: #707070; color: #fff; font-size: 0.8rem; padding: 2px 0 4px; } .caseSide__list--row dd { width: calc(100% - 80px - 15px); } .taxonomy-terms ul { display: flex; flex-direction: row; gap: 5px 8px; padding: 0 25px; flex-wrap: wrap; } .taxonomy-terms ul li a, .taxonomy-terms ul li span { background: #EBF5FA; border-radius: 9999px; position: relative; padding: 3px 15px 5px; font-size: 0.7rem; display: inline-block; color: #0097F9; letter-spacing: 1px; font-weight: 500; } .taxonomy-terms ul li a:before, .taxonomy-terms ul li span:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; color: #3289cc; opacity: 0.4; transition: 0.3s ease-in-out; } .taxonomy-terms ul li a:hover { background: #0097F9; color: #fff; } .taxonomy-terms ul li a:hover:before { color: #fff; opacity: 0.8; transition: 0.3s ease-in-out; } .taxonomy-terms ul:has(li) { padding-bottom: 12px; } .casemanga { display: flex; flex-direction: column; align-items: center; gap: 15px; padding-bottom: 30px; position: relative; } .casemanga:after { content: ""; width: 100%; height: 80%; position: absolute; bottom: 0; background: #fff; border-radius: 6px; } .casemanga__img { width: 100%; padding-left: 25px; padding-right: 25px; position: relative; } .casemanga__img img { width: 100%; position: relative; z-index: 1; filter: drop-shadow(0px 2px 4px #ddd); } .casemanga a.primaryBtn { position: relative; z-index: 1; } /* case archive */ section#caseArchive { position: relative; background: #EBF5FA; } .caseArchive__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; padding: 60px 0px 80px; } ul.caseCard { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; gap: 30px; } ul.caseCard:after { content: ""; width: 370px; } ul.caseCard li { width: 370px; } ul.caseCard li a { background: #fff; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22); cursor: pointer; transition: 0.2s ease-in-out; display: flex; flex-direction: column; border-radius: 6px; overflow: hidden; gap: 0; height: 100%; } ul.caseCard li a:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); transform: translateY(-4px); } .caseCard__img img { width: 100%; vertical-align: bottom; height: 230px; object-fit: cover; } .caseCard__text { display: flex; flex-direction: column; gap: 10px; padding: 16px 22px 22px; } .caseCard__text h3 { font-size: 1.4rem; font-weight: 600; line-height: 1.53; letter-spacing: 0.6px; } p.caseCard__text--corp { line-height: 1; color: var(--main-heading); font-weight: 600; font-size: 0.9rem; } .caseCard__text .taxonomy-terms ul { flex-direction: row; padding: 0; } .caseCard__text .taxonomy-terms ul li { width: fit-content; } .caseCard__text .taxonomy-terms ul { flex-direction: row; padding: 6px 0 0; } /* newcase header */ section#caseHeader { width: 100%; height: 300px; position: relative; animation: 12s ease-in-out 0s infinite normal none running gradientMove; } .caseHeader__inner { width: 100%; height: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: center; align-items: center; text-align: center; } .caseHeader__inner h2.pageHeader__top { color: #111; padding-top: 100px; } .caseHeader__inner h2.pageHeader__top span { color: #111; opacity: 0.6; } /* new case */ .caseFilter { background: #fff; border-radius: 4px; box-shadow: 0 8px 30px rgba(68, 68, 255, 0.08); padding: 24px 40px 0; } .caseFilter__head { position: relative; } .caseFilter__accordionButton { width: 100%; display: flex; align-items: center; gap: 36px; appearance: none; background: transparent; border: 0; padding: 0 48px 28px 0; cursor: pointer; text-align: left; position: relative; } .caseFilter__title { font-size: 22px; font-weight: 700; color: #111; letter-spacing: 0.04em; } .caseFilter__lead { font-size: 15px; font-weight: 500; color: #222; letter-spacing: 0.04em; } .caseFilter__icon { position: absolute; right: 0; top: 8px; width: 20px; height: 20px; background: #3d35ff; border-radius: 50%; } .caseFilter__icon::before, .caseFilter__icon::after { content: ""; position: absolute; background: #fff; border-radius: 999px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .caseFilter__icon::before { width: 10px; height: 2px; } .caseFilter__icon::after { width: 2px; height: 10px; } .caseFilter.is-open .caseFilter__icon::after { display: none; } .caseFilter__body { padding-top: 25px; position: relative; } .caseFilter__table { border: 1px solid #ddd; border-radius: 6px; overflow: hidden; } .caseFilter__row { display: grid; grid-template-columns: 170px 1fr; border-bottom: 1px solid #e5e5e5; } .caseFilter__row:last-child { border-bottom: 0; } .caseFilter__rowTitle { padding: 20px 24px; font-size: 16px; font-weight: 700; color: #111; background: #fff; } .caseFilter__terms { display: flex; flex-wrap: wrap; gap: 9px 12px; padding: 16px 18px; } .caseFilter__term { appearance: none; border: 1px solid #ddd; background: #fff; color: #222; border-radius: 999px; padding: 5px 14px 6px; font-size: 13px; font-weight: 500; line-height: 1.4; cursor: pointer; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .caseFilter__term:hover { background: #eee; } .caseFilter__term.is-active { background: #3d35ff; border-color: #3d35ff; color: #fff; } button.caseFilter__term.is-active:hover { opacity: 0.8; } .caseFilter__actions { display: flex; justify-content: center; align-items: center; gap: 28px; margin: 34px 0 44px; position: sticky; bottom: 0; padding: 20px 0; background: rgb(0, 0, 0, .3); } .caseFilter__submit, .caseFilter__clear { appearance: none; min-width: 260px; min-height: 58px; border-radius: 999px; font-size: 1.1rem; font-weight: 600; letter-spacing: 0.06em; cursor: pointer; transition: opacity 0.2s ease; display: flex; justify-content: center; align-items: center; position: relative; } .caseFilter__submit:hover, .caseFilter__clear:hover { opacity: 0.9; } .caseFilter__submit { background: #3d35ff; border: 1px solid #3d35ff; color: #fff; box-shadow: 0 10px 24px rgba(61, 53, 255, 0.22); } .caseFilter__clear { background: #fff; border: 1px solid #dcdcdc; color: #555; } .caseFilter__submitIcon, .caseFilter__clearIcon { display: inline-block; position: absolute; right: 20px; } .caseFilter__loading, .caseArchive__loading, .caseArchive__empty { text-align: center; margin-top: 24px; font-size: 0.9rem; font-weight: 500; } .caseArchive__empty { color: #555; } .caseFilter__loading { text-align: center; font-size: 0.9rem; font-weight: 400; position: absolute; bottom: -38px; left: 50%; transform: translateX(-50%); color: #707070; } .caseFilter__body[hidden], .caseFilter__loading[hidden], .caseArchive__loading[hidden], .caseArchive__empty[hidden] { display: none !important; } /* case pickup */ /* ========================================================= * case pickup carousel * ========================================================= */ .casePickupCarousel { overflow: hidden; margin: 0 0 80px; } .casePickupCarousel__inner { position: relative; padding-top: 20px; } .casePickupCarouselSwiper { overflow: visible; } .casePickupCarousel__slide { height: auto; } .casePickupCarousel__slide .caseCard__item, .casePickupCarousel__slide > li, .casePickupCarousel__slide article { height: 100%; } .casePickupCarousel__slide > li a:hover { opacity: 0.8; } .casePickupCarousel__inner .caseCard__img img { height: 460px; border-radius: 5px; } .casePickupCarousel__inner .caseCard__text { padding-left: 0; padding-right: 0; } .casePickupCarousel__prev, .casePickupCarousel__next { position: absolute; top: 34%; z-index: 5; width: 58px; height: 58px; background: #3d35ff; border-radius: 50%; cursor: pointer; } .casePickupCarousel__prev { left: calc(50% - 470px); } .casePickupCarousel__next { right: calc(50% - 470px); } .casePickupCarousel__prev::before, .casePickupCarousel__next::before { content: ""; position: absolute; top: 50%; width: 14px; height: 14px; border-top: 4px solid #fff; border-right: 4px solid #fff; } .casePickupCarousel__prev::before { left: 54%; transform: translate(-50%, -50%) rotate(-135deg); } .casePickupCarousel__next::before { left: 46%; transform: translate(-50%, -50%) rotate(45deg); } .casePickupCarousel__pagination { display: flex; justify-content: center; gap: 18px; margin-top: 15px; } .casePickupCarousel__pagination .swiper-pagination-bullet { width: 22px; height: 22px; margin: 0 !important; background: #d9d5ff; opacity: 1; } .casePickupCarousel__pagination .swiper-pagination-bullet-active { background: #3d35ff; } /* news */ section.someTabs { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: row; gap: 60px; align-items: flex-start; } [data-tab-content] { display: none; } [data-tab-content].active { display: block; } nav.tabs__nav { position: relative; display: flex; flex-direction: column; width: 220px; margin-bottom: 1rem; background: #FFF; position: sticky; top: 80px; gap: 0; } a.tabs__item { flex: 1; padding: 1.3rem 1rem; text-decoration: none; color: #aaa; font-size: 1rem; font-weight: 500; letter-spacing: 0.6px; flex-grow: 1; display: flex; align-items: center; padding-left: 2rem; position: relative; } a.tabs__item.active { color: var(--main-heading); background: #f9f9f9; } a.tabs__item:hover { background: #f9f9f9; } a.tabs__item.active:before { content: "\f111"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 17px; top: 30px; font-size: 0.5rem; } .tabs__content.active { animation: fadeIn 0.7s ease 0s 1 normal; } p.noNews { text-align: center; font-size: 0.9rem; color: #707070; } /* SNS SHARE */ .share-buttons { display: flex; justify-content: start; align-items: center; gap: 10px; margin-top: 15px; } .share-button { width: 32px; height: 32px; display: flex; justify-content: center; align-items: center; border-radius: 9999px; transition: 0.3s ease-in-out; cursor: pointer; position: relative; } a.share-button i { font-size: 34px; } a.share-button.facebook-share i { color: #4267B2; } button.share-button { background: var(--main-breadcrumb); color: #fff; } button.share-button i { font-size: 20px; transform: translateY(-1px); } a.share-button.twitter-share img { border-radius: 9999px; } .share-button:hover { opacity: 0.7; } /* news cta */ section#newsCTAs { position: relative; background: #EBF5FA; } body.single-news section#newsCTAs { position: relative; background: #e2efee; } .newsCTAs__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; padding: 0px 0 80px; } /* tooltip */ .share-button::after { content: ''; /* 初期は非表示 */ opacity: 0; pointer-events: none; transition: opacity 0.2s ease-in-out; } .share-button:hover::after { content: attr(data-tooltip); position: absolute; top: -35px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.9); color: #fff; padding: 3px 10px 5px; border-radius: 3px; font-size: 0.8rem; white-space: nowrap; z-index: 10; opacity: 1; transition: opacity 0.2s ease-in-out; } /* news cta */ section#welcomeContact { position: relative; } .welcomeContact__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 0; } .welcomeContact__inner--chara { display: flex; flex-direction: column; gap: 20px; align-items: center; } .welcomeContact__inner--chara h2 { text-align: center; color: var(--main-heading); letter-spacing: 1.7px; font-weight: 600; font-size: 1.4rem; } .welcomeContact__inner--chara p { text-align: center; } ul.welcomeContact__inner--list { display: flex; justify-content: center; padding-top: 60px; padding-bottom: 60px; position: relative; } ul.welcomeContact__inner--list:after { content: ""; width: 100vw; height: 100%; position: absolute; background: #fff; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); left: 0; top: 0; } ul.welcomeContact__inner--list li { width: 28%; position: relative; z-index: 1; } ul.welcomeContact__inner--list li a { display: flex; flex-direction: column; align-items: center; gap: 16px; } ul.welcomeContact__inner--list li a h3 { color: var(--main-heading); font-weight: 600; font-size: 1.2rem; letter-spacing: 1.5px; transition: 0.3s ease-in-out; } ul.welcomeContact__inner--list li a img { transition: 0.3s ease-in-out; } ul.welcomeContact__inner--list li a p { font-size: 0.9rem; text-align: center; } ul.welcomeContact__inner--list li a:hover img, ul.welcomeContact__inner--list li a:hover h3 { opacity: 0.6; } /* about new */ .businessAbout__inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: 100px 0; } ul.businessAbout__inner--list { display: flex; flex-direction: column; gap: 100px; width: 100%; } ul.businessAbout__inner--list li { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; position: relative; } .businessAbout__inner--listText { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 53%; background: #FAFBFE; display: flex; flex-direction: column; gap: 25px; padding: 40px 50px; border-radius: 5px; z-index: 1; border: solid 1px #eee; } .businessAbout__inner--listImg { max-width: 600px; position: relative; border-radius: 8px; overflow: hidden; } .businessAbout__inner--listImg:before { content: ""; width: 100%; height: 100%; background: rgb(0, 0, 0, 0.1); position: absolute; } .businessAbout__inner--listImg img { width: 100%; object-fit: cover; height: 560px; vertical-align: bottom; } .businessAbout__inner--listText .heading.colored h3.heading__top { align-items: flex-start; gap: 15px; font-size: 1.8rem; } .businessAbout__inner--listText .heading.colored h3.heading__top span { opacity: 0.8; } .businessAbout__inner--listText .heading.colored h3.heading__top:after { bottom: -8px; } ul.businessAbout__inner--list li.reverseColumn { flex-direction: column-reverse; align-items: flex-start; } ul.businessAbout__inner--list li.reverseColumn .businessAbout__inner--listText { left: auto; right: 0; } .businessAbout__inner--listText .heading.colored h3.heading__top img { max-height: 70px; } .businessAbout__inner--listText .heading.colored h3.heading__top img.rakujobReigai { max-height: 90px; } /* cookie承認 */ #pi_tracking_opt_in_div { position: fixed !important; background: rgb(0, 0, 0, 0.7) !important; color: #fff !important; font-size: 0.75rem !important; display: flex; top: auto !important; bottom: 0 !important; padding: 12px 0pt !important; justify-content: center; gap: 10px; align-items: center; } #pi_tracking_opt_in_yes, #pi_tracking_opt_in_no { font-size: 1.1rem !important; } #pi_tracking_opt_in_yes:hover, #pi_tracking_opt_in_no:hover { opacity: 0.6; } /* privacy */ p.has-text-align-left.contactCenter { margin: 0 auto; width: fit-content; } body.page.page-id-59 .newsPostPage__inner hr.wp-block-separator.has-alpha-channel-opacity { color: #ddd; border-block-width: 1px; } /* archive seminar page */ section.seminar-listing__hero { background: var(--main-Gradient); width: 100%; position: relative; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; animation: gradientMove 12s infinite ease-in-out; } .seminar-listing { --seminar-purple: #5216f3; --seminar-blue: #3578f6; --seminar-cyan: #44dce4; --seminar-ink: #20242c; --seminar-muted: #6e7480; color: var(--seminar-ink); font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif; background: #fff; } .seminar-listing *, .seminar-listing *::before, .seminar-listing *::after { box-sizing: border-box; } .seminar-listing__container { width: min(1100px, calc(100% - 40px)); margin-inline: auto; } .seminar-listing__hero-inner { display: flex; height: 420px; max-width: 1200px; margin-inline: auto; width: 100%; } .seminar-listing__hero-copy { display: flex; flex-direction: column; justify-content: center; padding-top: 40px; } .seminar-listing__hero-en { margin: 0 0 12px; font-size: 18px; font-style: italic; font-weight: 700; } .seminar-listing__hero-title { margin: 0; color: inherit; font-size: clamp(32px, 4vw, 48px); line-height: 1.3; letter-spacing: .04em; } .seminar-listing__hero-text { max-width: 540px; margin: 22px 0 0; font-size: 16px; font-weight: 500; line-height: 2; color: #fff;} .seminar-listing__hero-visual { position: relative; overflow: hidden; width: 75%; height: stretch; margin-right: calc(50% - 50vw); clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 24% 0%); } .seminar-listing__hero-visual img { width: 100vw; height: auto; object-fit: cover; vertical-align: bottom; } .seminar-listing__hero-orb { position: absolute; display: block; border-radius: 50%; background: linear-gradient(145deg, rgba(83, 22, 243, .88), rgba(68, 220, 228, .9)); box-shadow: 0 30px 80px rgba(29, 44, 74, .18); } .seminar-listing__hero-orb--large { width: 270px; height: 270px; right: 18%; top: 45px; } .seminar-listing__hero-orb--small { width: 105px; height: 105px; right: 9%; bottom: 28px; background: linear-gradient(145deg, #ff8a34, #ffe05e); } .seminar-listing__hero-mark { position: absolute; z-index: 1; top: 50%; left: 50%; color: #fff; font-size: 110px; font-weight: 900; letter-spacing: -.08em; transform: translate(-50%, -50%) rotate(-7deg); text-shadow: 0 10px 30px rgba(21, 23, 50, .2); } .seminar-listing__featured { padding: 62px 0 72px; } .seminar-listing__section-title { margin: 0 0 22px; color: var(--seminar-ink); font-size: 22px; line-height: 1.5; } h2#seminar-past-title i { opacity: 0.4; margin-right: 6px; } .seminar-listing__section-title--accent { color: var(--seminar-purple); } .seminar-listing__featured-card { display: grid; grid-template-columns: minmax(0, 46%) 1fr; overflow: hidden; color: inherit; text-decoration: none; background: #fff; border: 1px solid #e4e7ec; border-radius: 5px; box-shadow: 0 7px 20px rgba(28, 37, 54, .14); transition: transform .2s ease, box-shadow .2s ease; } .seminar-listing__featured-card:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(28, 37, 54, .18); } .seminar-listing__featured-card:focus-visible, .seminar-listing__card-link:focus-visible, .seminar-listing__tab:focus-visible, .seminar-listing__more-wrap a.re_primaryBtn:focus-visible, .seminar-listing__sort:focus-visible { outline: 3px solid var(--seminar-cyan); outline-offset: 3px; } .seminar-listing__featured-image-wrap, .seminar-listing__card-image-wrap { position: relative; overflow: hidden; background: #e9edf4; } .seminar-listing__featured-image-wrap { min-height: 260px; } .seminar-listing__featured-image, .seminar-listing__card-image { display: block; width: 100%; height: 100%; object-fit: contain; } .seminar-listing__featured-body { align-self: center; padding: 26px 30px; } .seminar-listing__labels, .seminar-listing__tags { display: flex; flex-wrap: wrap; gap: 7px; } .seminar-listing__label { padding: 4px 11px 5px; color: #5f6670; font-size: .8rem; font-weight: 500; line-height: 1.2; border: 1px solid #d9dde5; border-radius: 3px; } .seminar-listing__featured-title { display: -webkit-box; overflow: hidden; margin: 12px 0; font-size: 1.3rem; font-weight: 600; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .seminar-listing__featured-text { display: -webkit-box; overflow: hidden; margin: 0 0 12px; color: var(--seminar-muted); font-size: .9rem; line-height: 1.8; letter-spacing: .3px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .seminar-listing__featured-meta { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 2px; margin: 7px 0 0; color: #626975; font-size: .9rem; line-height: 1.6; letter-spacing: .3px; } .seminar-listing__featured-meta i { margin-top: 6px; color: #8b929d; text-align: center; } .seminar-listing__upcoming { padding: 40px 0 78px; background: #eef8fd; } .seminar-listing__controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: -1px 0 32px; } .seminar-listing__tabs { display: flex; flex-wrap: wrap; gap: 10px; } .seminar-listing__tab { min-height: 38px; padding: 8px 19px; color: #6a707a; font: inherit; font-size: 13px; font-weight: 700; background: #fff; border: 0; border-radius: 999px; cursor: pointer; } .seminar-listing__tab.is-active { color: #fff; background: linear-gradient(90deg, var(--seminar-purple), var(--seminar-blue)); } .seminar-listing__sort-label { display: flex; align-items: center; gap: 10px; color: #535965; font-size: 12px; font-weight: 700; } .seminar-listing__sort { display: flex; align-items: center; min-height: 40px; padding: 7px 38px 7px 14px; color: #535965; font-size: .9rem; font-weight: 400; line-height: 1; background: #fff; border: 1px solid #dce2e8; border-radius: 3px; } .seminar-listing__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 38px 38px; } .seminar-listing__card { min-width: 0; background: #fff; border-radius: 5px; box-shadow: 0 6px 16px rgba(33, 45, 63, .12); transition: transform .2s ease, box-shadow .2s ease; } .seminar-listing__card:hover { transform: translateY(-4px); box-shadow: 0 12px 26px rgba(33, 45, 63, .17); } .seminar-listing__card-link { display: flex; height: 100%; color: inherit; text-decoration: none; flex-direction: column; } .seminar-listing__card-image-wrap { aspect-ratio: 16 / 9; } .seminar-listing__card-placeholder { display: grid; width: 100%; height: 100%; min-height: 180px; place-items: center; color: #fff; font-size: 24px; font-weight: 800; background: linear-gradient(135deg, var(--seminar-purple), var(--seminar-cyan)); } .seminar-listing__status { position: absolute; top: 0; left: 0; padding: 5px 12px; color: #fff; font-size: 11px; font-weight: 500; } .seminar-listing__status--upcoming { background: #ff4b1f; } .seminar-listing__status--replay { background: #1475d1; } .seminar-listing__status--exhibition { background: #ff4b1f; } .seminar-listing__status--past { background: #727984; } .seminar-listing__card-body { display: flex; flex: 1; justify-content: space-between; padding: 17px 18px 20px; flex-direction: column; gap: 24px; } .seminar-listing__card-content { min-width: 0; } .seminar-listing__card-title { display: -webkit-box; overflow: hidden; min-height: 4.9em; margin: 14px 0 9px; font-size: 1.2rem; font-weight: 600; line-height: 1.65; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .seminar-listing__tag { padding: 5px 11px 7px; color: #fff; font-size: .6rem; font-weight: 500; background: linear-gradient(90deg, var(--seminar-purple), var(--seminar-blue)); border-radius: 999px; } .seminar-listing__overview { display: -webkit-box; overflow: hidden; min-height: 3.5em; margin: 12px 0 0; color: #747b86; font-size: .9rem; line-height: 1.75; letter-spacing: .2px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .seminar-listing__meta { display: flex; margin: 12px 0 0; color: #5e6570; font-size: 10px; flex-direction: column; gap: 6px; } .seminar-listing__meta-row { display: grid; grid-template-columns: 18px minmax(0, 1fr); line-height: 1.55; gap: 5px; } .seminar-listing__meta-row dt, .seminar-listing__meta-row dd { margin: 0; font-size: .8rem; } .seminar-listing__meta-row dt { color: #8b929d; text-align: center; } .seminar-listing__external-button { display: grid; grid-template-columns: minmax(0, 1fr) 18px; align-items: center; gap: 8px; padding: 12px 14px; color: #3c424b; font-size: .82rem; text-align: center; border: 1px solid #d8dde3; border-radius: 3px; transition: 0.3s;} .seminar-listing__external-button i { color: #c3c8ce; font-size: 1rem; } .seminar-listing__external-button--featured { max-width: 360px; margin-top: 22px; } .seminar-listing__card--exhibition .seminar-listing__card-body { min-height: 300px; } .seminar-listing__card--exhibition .seminar-listing__card-title { min-height: auto; -webkit-line-clamp: 2; } .seminar-listing__card--exhibition .seminar-listing__meta { margin-top: 12px; } .seminar-listing__past { padding: 70px 0 88px; } .seminar-listing__past-item { min-width: 0; } .seminar-listing__past-item .seminar-listing__card { height: 100%; } .seminar-listing__past-item.is-collapsed { display: none; } .seminar-listing__more-wrap { display: flex; justify-content: center; margin-top: 50px; text-align: center; } .seminar-listing__more-wrap a.re_primaryBtn { position: relative; width: 300px; } .seminar-listing__empty { grid-column: 1 / -1; padding: 60px 20px; text-align: center; } .seminar-listing [hidden] { display: none !important; } /* トップページの補足 */ .reInsights__inner--seminarList.seminar-listing { background: rgb(255, 255, 255, 0.1); } .reInsights__inner--seminarList.seminar-listing .seminar-listing__grid { padding: 40px 40px 40px; } /* セミナーのセレクタ */ .seminar-listing__sort { appearance: none; -webkit-appearance: none; padding-right: 48px; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%236e7480' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; background-size: 12px 8px; cursor: pointer; } .seminar-listing__sort:focus-visible { outline: 2px solid #5216f3; outline-offset: 2px; } .seminar-listing__card:hover span.seminar-listing__external-button { background: #eee; } /* header color変更 */ @media screen and (min-width:1100px) { /* ========================= 白ヘッダーモード（ACF ON時のみ有効） ========================= */ /* 最上部表示時のみ白文字 */ header#header.header-white-nav-enabled.header-white-nav-on:not(.mega-open) ul.header__inner--bottomRightLink > li > a, header#header.header-white-nav-enabled.header-white-nav-on:not(.mega-open) ul.header__inner--bottomRightLink > li > span, header#header.header-white-nav-enabled.header-white-nav-on:not(.mega-open) ul.header__inner--bottomRightLink > li > button.hasChild__trigger { color: #fff; } /* ドロップダウン矢印 */ header#header.header-white-nav-enabled.header-white-nav-on:not(.mega-open) .hasChild__trigger::after { color: #fff; opacity: 0.85; } /* ========================= メガメニュー展開時は必ず通常色 ========================= */ header#header.header-white-nav-enabled.mega-open ul.header__inner--bottomRightLink > li > a, header#header.header-white-nav-enabled.mega-open ul.header__inner--bottomRightLink > li > span, header#header.header-white-nav-enabled.mega-open ul.header__inner--bottomRightLink > li > button.hasChild__trigger { color: var(--main-text); } header#header.header-white-nav-enabled.mega-open .hasChild__trigger::after { color: var(--main-text); opacity: 0.6; } /* ========================= スクロール後（resize）も通常色 ========================= */ header#header.header-white-nav-enabled.header-white-nav-off ul.header__inner--bottomRightLink > li > a, header#header.header-white-nav-enabled.header-white-nav-off ul.header__inner--bottomRightLink > li > span, header#header.header-white-nav-enabled.header-white-nav-off ul.header__inner--bottomRightLink > li > button.hasChild__trigger { color: var(--main-text); } header#header.header-white-nav-enabled.header-white-nav-off .hasChild__trigger::after { color: var(--main-text); opacity: 0.6; } /* ========================= メガメニュー内部リンクは常に黒 ========================= */ header#header.header-white-nav-enabled .pcMegaMenu__links a, header#header.header-white-nav-enabled .hasChild__inner a { color: #222; } } @media only screen and (min-width: 1100px) and (max-width: 1300px) { /* （ここに1100〜1300pxのスタイルを記述） */ .header__inner--bottomRight.pc { flex-direction: column; align-items: end; gap: 0; } ul.header__inner--bottomRightLink li a, ul.header__inner--bottomRightLink li span { padding: 10.5px 10px; } li.hasChild span:after { right: -8px; } ul.header__inner--bottomRightLink li { align-items: center; } } @media screen and (max-width: 1250px) { /* （ここに1250以下のスタイルを記述） */ .mv__inner { padding-left: 4%; padding-right: 4%; } .business__inner { padding-left: 4%; padding-right: 4%; } .footer__inner { padding-left: 4%; padding-right: 4%; } nav#breadcrumb ul { padding-left: 4%; padding-right: 4%; } /* seminar */ .seminarPostPage__inner { padding-left: 4%; padding-right: 4%; gap: 60px; } section.semiar__left { max-width: 600px; } /* case */ main#casePost { padding-left: 4%; padding-right: 4%; } article#case { width: calc(100% - 380px - 4%); } ul.header__inner--bottomRightLink { gap: 8px; } .header__inner--bottomRight { gap: 15px; } /* nre no1 */ .topNumberOne { right: 30px; } } @media screen and (max-width: 1200px) { /* （ここに1200以下のスタイルを記述） */ .service__inner { padding-left: 4%; padding-right: 4%; } ul.whitepaper li { width: 31%; } .topSeminar__inner { padding-left: 4%; padding-right: 4%; } .caseArchive__inner { padding-left: 4%; padding-right: 4%; } ul.caseCard { justify-content: center; } .header__inner--bottomRightCta a { width: 180px; } .header__inner--bottom h1 { max-width: 200px; } /* new top */ .renewMV__inner { padding-left: 4%; padding-right: 4%; } .renewService__inner { padding-left: 4%; padding-right: 4%; } /* dev */ .renewService__inner--dev { gap: 30px; } .renewService__inner--devRight .renewHeading h2 br { display: none; } .rereAbout__inner { padding-left: 4%; padding-right: 4%; } .reTopCTA__inner { padding-left: 4%; padding-right: 4%; } .reInsights__inner { padding-left: 4%; padding-right: 4%; } .reInsights__inner--seminarList ul.cardList { justify-content: center; } .reNews__inner { padding-left: 4%; padding-right: 4%; } .reTopFeatures__inner { padding-left: 4%; padding-right: 4%; } .reTopScene__inner { padding-left: 4%; padding-right: 4%; } .reTopStrength__inner { padding-left: 4%; padding-right: 4%; } /* news */ .newsCTAs__inner { padding-left: 4%; padding-right: 4%; } .mv__bgVideo.dotnone { width: 80%; } /* new strength */ li.reTopStrength__inner--strengthList:last-child { flex-direction: column; } li.reTopStrength__inner--strengthList:last-child { flex-direction: column; gap: 30px; } /* archive seminar */ .ArchivePage__content { padding-left: 4%; padding-right: 4%; } /* 1200px以下ここまで */ } @media screen and (max-width: 1100px) { /* （ここに1100以下のスタイルを記述） */ section#mv { max-height: 600px; } /* header */ ul.header__inner--bottomRightLink { gap: 5px; } .header__inner--bottomRightCta a { width: 170px; } /* top page */ .what__inner { padding-left: 4%; padding-right: 4%; border-radius: 0; } .what__inner--right img { transform: scale(1.4) translateX(-63.9px) translateY(15px); } .heading h2 br { display: none; } /* dev */ .renewService__inner--dev { flex-direction: column; gap: 40px; margin-top: 20px; margin-bottom: 0; } .renewService__inner--devLeft { width: 100%; } .renewService__inner--devRight { width: 100%; align-items: center; } .renewService__inner--devRight .renewHeading h2 br { display: block; } /* cta */ ul.cta__inner--bottomBtn { align-items: normal; } .cta__inner--bottom { padding-left: 4%; padding-right: 4%; } /* footer */ ul.footer__top--linkTop li { width: calc(100% / 3 - 10px); } .footer__top--link { width: 65%; } .pageHeader__inner { padding-left: 4%; padding-right: 4%; } /* about */ .aboutThree__inner { padding-left: 4%; padding-right: 4%; } .rightleft__text { width: 54%; padding: 35px 45px; } /* philosophy */ .philosophy__inner { padding-left: 4%; padding-right: 4%; } .ceoProfile__inner { border-radius: 0; } /* contact */ .contact-content { padding-left: 4%; padding-right: 4%; } .contact-content--left { width: 45%; } aside#sideForm.contactSide { width: 52%; } .ceoProfile__inner { border-radius: 0; padding: 4%; padding-right: 4%; } /* contact */ .contact-content { padding-left: 4%; padding-right: 4%; } .contact-content--left { width: 45%; } aside#sideForm.contactSide { width: 52%; } /* archive */ .ArchivePage__header--inner { padding-left: 4%; padding-right: 4%; } /* header */ /* Drawer */ .header__inner--bottom h1 { max-width: 150px; } .header__inner--bottomRight.pc, .header__inner--top { display: none; } .header__inner--bottomRight.sp { display: block; } /* setting */ .headOverlay { width: 100%; height: 100vh; position: fixed; right: 0; top: 0; background-color: rgba(0,0,0,.3); z-index: 190; opacity: 0; visibility: hidden; transition: all 200ms ease-in; } nav.nav { width: 300px; height: 100vh; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-size: 200% 200%; animation: gradientMove 12s infinite ease-in-out; right: -300px; top: 0; position: fixed; padding: 0; transition: all 200ms ease-in-out; z-index: 199; } nav.nav ul { border: none; padding: 0; } .toggle { position: absolute; right: 100%; width: 50px; height: 50px; color: #313131; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; } span.toggler, span.toggler:before, span.toggler:after { content: ''; display: block; height: 3px; width: 25px; border-radius: 3px; background-color: #313131; position: absolute; pointer-events: none; } span.toggler:before{ bottom: 9px; } span.toggler:after { top: 9px; } span.deleteclass { background-color: transparent; } span.deleteclass::before { bottom: 0; transform: rotate(45deg); } span.deleteclass::after { top: 0; transform: rotate(-45deg); } .logo { text-align: center; margin-bottom: 30px; } .logo a{ text-decoration: none; color: #888; font-size: 2rem; } .nav ul li { display: block; list-style: none; margin: 0; padding: 0; } .nav ul li a, .nav ul li span { padding: 10px 20px 12px 35px; display: block; color: #fff; font-size: 1rem; text-decoration: none; transition: all 200ms ease; position: relative; } .nav ul li a:hover { background-color: rgb(255, 255, 255, 0.2); } /* Show Nav */ .show-nav .nav { right: 0; box-shadow: 0 2px 4px rgba(0,0,0,.6); } .show-nav .headOverlay { opacity: 1; visibility: visible; backdrop-filter: blur(10px); } /* header custom */ .drawer__inner { display: flex; flex-direction: column; gap: 25px; height: 100%; } nav.nav .drawer__inner h1 { width: 100%; max-width: 100%; } .drawer__inner h1 .logo { margin: 0; } .drawer__inner h1 a { padding: 20px 0; margin-bottom: -20px; } .drawer__inner ul.header__inner--bottomRightLink { flex-direction: column; } .drawer__inner ul.header__inner--bottomRightLink li a:before, .drawer__inner ul.header__inner--bottomRightLink li span:before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 16px; top: 52%; transform: translateY(-50%); opacity: 0.4; color: #fff; } .drawer__inner .header__inner--bottomRightCta { flex-direction: column; padding: 0 30px; } .drawer__inner .header__inner--bottomRightCta a { width: 100%; } /* cta */ section#cta:before { width: 100%; } /* seminar */ ul.cardList { padding-left: 4%; padding-right: 4%; justify-content: center; } .seminarPostPage__inner { flex-direction: column; gap: 60px; max-width: 800px; } section.semiar__left, aside#sideForm { width: 100%; } .semiar__right.archiveVideo .hbspt-form { height: auto; overflow: auto; } /* news */ body.post-type-archive-news .news-content { padding-left: 2%; padding-right: 2%; } /* header accordion */ .spHasChild__inner { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } /* アコーディオンメニューが開いている状態 */ .spHasChild.open .spHasChild__inner { max-height: 1000px; /* 十分に大きな値を設定（必要に応じて調整可能） */ } .spHasChild__inner { padding-left: 24px; } .drawer__inner ul.header__inner--bottomRightLink li.spHasChild span:after { content: "\f055"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 22px; top: 49%; transform: translateY(-50%); opacity: 0.8; color: #fff; } .drawer__inner ul.header__inner--bottomRightLink li.spHasChild.open span:after { content: "\f056"; } .nav ul.header__inner--bottomRightLink li .spHasChild__inner a { font-weight: 400; opacity: 0.8; } /* header siwtch */ ul.header__inner--bottomRightSwitch li { display: flex; justify-content: center; } .trp-language-switcher > div { background-position: calc(100% - 10px) calc(1em + 4px), calc(100% - 3px) calc(1em + 0px); } /* business NEW */ .businessAbout__inner { padding-left: 4%; padding-right: 4%; } /* new top */ .renewMV__inner { flex-direction: column; align-items: center; gap: 30px; padding-bottom: 0; padding-top: 80px; } .renewMV__inner--left { width: 100%; align-items: center; } .renewMV__inner--right { position: relative; bottom: auto; right: auto; } .renewService__inner--top { flex-direction: column; gap: 60px; align-items: center; } .renewService__inner--topRight { width: fit-content; margin: 0 auto; } .renewService__inner--topLeft .renewHeading h2 { font-size: 1.7rem; } .renewService__inner--topLeft span.textsBig { font-size: 2.2rem; vertical-align: 1px; } .renewService__inner--middle { justify-content: center; } ul.renewService__inner--bottom { justify-content: center; } li.renewService__inner--bottomBox { width: 200px; } .rereAbout__inner { flex-direction: column; gap: 90px; align-items: center; } .reTopScene__inner--tops { flex-direction: column; align-items: center; gap: 60px; } .reTopScene__inner--topsRight { top: auto; position: relative; right: auto; } /* new no1 */ .topNumberOne { right: auto; left: 0; top: auto; transform: none; bottom: 100px; } section#renewMV { height: 100svh; min-height: 800px; } .mv__bgVideo.dotnone { width: 100%; bottom: 0; } /* ここまで1100px以下 */ } @media screen and (max-width: 1000px) { /* （ここに1000以下スタイルを記述） */ main#casePost { flex-direction: column; gap: 40px; } article#case { width: 100%; max-width: 800px; margin: 0 auto; } aside#caseSide { margin: 0 auto; position: relative; top: 0; } /* news cta */ ul.welcomeContact__inner--list li a p br { display: none; } ul.welcomeContact__inner--list { flex-wrap: wrap; justify-content: center; gap: 45px; padding-left: 4%; padding-right: 4%; } ul.welcomeContact__inner--list li { width: 45%; } /* new top */ ul.reTopScene__inner--lists { flex-wrap: wrap; gap: 50px; justify-content: center; } li.reTopScene__inner--list { width: 46%; } .reInsights__inner--mediaList { flex-direction: column; gap: 25px; } ul.reInsights__inner--mediaListLeft { width: 100%; } ul.reInsights__inner--mediaListRight { width: 100%; } li.mediaCard.big a { flex-direction: row; align-items: center; } li.mediaCard.mimini .mediaCard__img, li.mediaCard.big .mediaCard__img { width: 300px; max-width: none; } .mediaCard__text { width: calc(100% - 300px - 16px); } .mediaCard__text h4 { font-size: 1rem; } .reNews__inner--columns { flex-direction: column; gap: 50px; } .reNews__inner--column { width: 100%; } .reNews__inner--column ul.news-content--inner { max-width: none; } .lastbLinks { gap: 20px; } a.lastbLink { width: calc(100% / 3 - 10px); } .hiddenParagraph { opacity: 1; } /* list */ li.reTopFeatures__inner--fourlist { flex-direction: column-reverse; align-items: center; } .reTopFeatures__inner--fourlistImg { width: 100%; height: 480px; } .reTopFeatures__inner--fourlistText { width: 90%; position: relative; top: auto; left: auto; transform: none; margin-top: -50px; } .reTopFeatures__inner--fourlistImg img, li.reTopFeatures__inner--fourlist:nth-child(even) .reTopFeatures__inner--fourlistImg img { transform: scale(1.2); } /* news */ section.someTabs { flex-direction: column; } nav.tabs__nav { position: relative; top: 0; flex-direction: row; width: 100%; flex-wrap: wrap; gap: 0; border: solid 1px #ddd; border-bottom: none; border-right: none; } a.tabs__item { width: calc(100% / 3); flex: none; border-right: solid 1px #ddd; border-bottom: solid 1px #ddd; } /* ここまで 1000px以下 */ } @media screen and (max-width: 900px) { /* （ここに900以下スタイルを記述） */ /* top */ section#what { padding-bottom: 0; } .what__inner { flex-direction: column-reverse; padding-top: 0; } .what__inner--right { width: 100%; } .what__inner--right img { transform: scale(0.9) translateX(0) translateY(-65px); } .what__inner--left { width: 100%; margin-top: -60px; } /* mv under */ section#reTopMV:before { background-position: top; } .reTopMVunder__inner { flex-direction: column; gap: 25px; width: 92%; } p.reTopMVunder__inner--text br { display: none; } /* business */ section#business { padding: 80px 0; } .business__inner { flex-direction: column; gap: 60px; } .business__inner--left { width: 100%; position: relative; top: 0; } ul.business__inner--right { width: 100%; padding-left: 40px; padding-right: 40px; gap: 80px; } /* news */ section#news { padding-left: 4%; padding-right: 4%; } /* cta */ a.cta__inner--bottomBtnInner { padding: 25px 30px; } /* footer */ .footer__top { flex-direction: column; } .footer__top { flex-direction: column; gap: 30px; } .footer__top--link { width: 100%; } .footer__top--mark { margin-left: auto; margin-right: auto; } /* about */ section#aboutLink { padding-left: 4%; padding-right: 4%; } .messagePage__inner { padding-left: 4%; padding-right: 4%; } .companyOverview__inner { padding-left: 4%; padding-right: 4%; } .identity__inner { padding-left: 4%; padding-right: 4%; } /* news */ .newsPostPage__inner { width: 92%; padding: 20px 25px; } .nav-link-container { padding-left: 4%; padding-right: 4%; } /* download */ section#anchor { padding-left: 4%; padding-right: 4%; } ul.whitepaper li { width: 47%; } /* business new */ ul.businessAbout__inner--list li { flex-direction: column-reverse; } .businessAbout__inner--listText { position: relative; top: auto; transform: none; width: 90%; padding: 20px 25px 35px; margin: -100px auto 0; align-items: center; } .businessAbout__inner--listText .heading.colored h3.heading__top span { margin: 0 auto; } .businessAbout__inner--listText .heading.colored h3.heading__top:after { left: 50%; transform: translateX(-50%); } .businessAbout__inner--listImg { width: 100%; max-width: none; } .businessAbout__inner--listImg img { height: 360px; } .businessAbout__inner--listText { margin-top: -25px; } /* new top 900px */ .innerCta { flex-direction: column; } .innerCta--block { width: 100%; padding-top: 60px; padding-bottom: 40px; gap: 8px; } .lastbLinks { flex-wrap: wrap; justify-content: center; } a.lastbLink { width: 42%; } /* new top bottom */ p.bottomCopys { position: relative; right: auto; bottom: auto; font-size: 0.7rem; text-align: left; line-height: 2.03; } /* cta */ .reTopCTA__inners { flex-direction: column-reverse; align-items: center; height: auto; padding: 30px 35px; } .reTopCTA__inners--left { text-align: center; align-items: center; } .reTopCTA__inners--right { width: 100%; position: relative; right: auto; } .reTopCTA__inners.bottom { padding-bottom: 200px; } .reTopCTA__inners.bottom:before { width: 100%; } /* about */ section#inFuture:before { width: 250px; height: 260px; } section#inFuture:after { width: 240px; height: 300px; } .inFuture__inner { padding-left: 4%; padding-right: 4%; } /* strength */ .reTopCTA__inners--left { position: relative; z-index: 1; } ul.reTopScene__inner--lists { flex-wrap: wrap; justify-content: center; gap: 30px; } li.reTopScene__inner--list { width: 45%; } .strengthListText__heading { flex-direction: column; gap: 6px; } .strengthListText__heading h3 br { display: none; } /* new strength */ .strengthListText__heading h3 { width: 100%; } span.strengthBig { font-size: inherit; } li.reTopStrength__inner--strengthList:last-child .strengthListText { width: 100%; align-items: center; } .strengthListImg { width: 100%; } .strengthListImg ul.reTopMVunder__inner--lists { justify-content: center; } .seminar-listing__hero { background: linear-gradient(112deg, #4d00f5, #554af5 62%, #587af5); } .seminar-listing__hero-inner { grid-template-columns: 1fr; } .seminar-listing__hero-copy { width: min(100% - 40px, 680px); margin-inline: auto; padding-right: 0; } .seminar-listing__hero-visual { display: none; } .seminar-listing__featured-card { grid-template-columns: 1fr; } .seminar-listing__featured-image-wrap { min-height: auto; aspect-ratio: 16 / 9; } .seminar-listing__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; } .seminar-listing__controls { align-items: flex-start; flex-direction: column; } /* ここまでが900px以下 */ } @media screen and (max-width: 767px) { /* （ここにモバイル用スタイルを記述） */ p { line-height: 1.9; } .drawer__inner h1 .logo { width: 75%; } /* shape */ .shape { max-height: 300px; } #shape4.scrolled { height: 200px; } /* mv */ section#mv { min-height: 860px; } .mv__inner { gap: 20px; padding-top: 0; } .mv__inner:before { width: 100%; height: 100%; } .mv__inner--top h2 { font-size: 1.9rem; display: block; text-align: center; } .mv__inner--top h2 span { font-size: 2.9rem; line-height: 1.2; vertical-align: 1px; font-weight: 700; display: inline-block; } .mv__inner--top h2 span:first-child { font-size: 3.3rem; vertical-align: 0px; } .mv__inner--top p { line-height: 1.83; } .mv__inner--top p br { display: none; } ul.mv__inner--bottomLeaf li { width: 245px; } ul.mv__inner--bottomLeaf li img { height: 100%; max-height: 50px; } ul.mv__inner--bottomLeaf li:before, ul.mv__inner--bottomLeaf li:after { width: 40px; height: 80px; } ul.mv__inner--bottomLeaf { flex-direction: column; align-items: center; gap: 10px; } .mv__inner--bottomLink { flex-direction: column; gap: 20px; } ul.scroll_infinity_list { width: auto; } section#what { padding-top: 40px; } ul.business__inner--right { padding-left: 2%; padding-right: 2%; } .news__inner { padding: 30px 25px; gap: 35px; } ul.news-content--inner li a { padding-left: 20px; padding-right: 35px; } ul.news-content--inner li a h3 { line-height: 1.53; } .what__inner--left a.secondaryBtn.subtext { margin: 0 auto; } .business__inner--left a.secondaryBtn { margin: 0 auto; } /* top uneder */ .reTopMVunder__inner { padding-left: 4%; padding-right: 4%; text-align: center; } ul.reTopMVunder__inner--lists { flex-direction: column; gap: 20px; } p.reTopMVunder__inner--text br { display: block; } /* cta */ section#cta { padding-top: 60px; } section#cta:before { width: 100%; height: 100%; } .cta__inner { padding-left: 4%; padding-right: 4%; gap: 40px; } .cta__inner--top h2 { font-size: 1.90rem; } .cta__inner--top p { text-align: left; } .cta__inner--top p br { display: none; } ul.cta__inner--bottomBtn { flex-direction: column; } ul.cta__inner--bottomBtn li { width: 100%; border: none; } ul.cta__inner--bottomBtn li:first-child { border-bottom: solid 1px #ddd; } a.cta__inner--bottomBtnInner { gap: 10px; } .scroll_infinity_list { gap: 30px; } .heading h2 { font-size: 1.9rem; } .recruitB__inner h2 { font-size: 2.1rem; transform: translateX(10px); } .recruitB__inner { padding-left: 4%; padding-right: 4%; } .recruitB__inner p { text-align: left; } .recruitB__inner p br { display: none; } ul.footer__top--linkTop li { width: calc(100% / 2 - 10px); } ul.footer__top--linkBottomService { gap: 15px; } .footer__top { padding: 35px 0; } .footer__bottom { flex-direction: column-reverse; padding: 20px 0 10px; } ul.footerLink { flex-direction: column; gap: 20px; } .footer__bottom { flex-direction: column-reverse; padding: 20px 0 10px; gap: 15px; } /* business */ .slide__container { width: 100%; padding: 0 25px; gap: 10px; } .slide__text { line-height: 1.63; text-align: left; font-size: 1rem; } .slide__text br { display: none; } h3.slide__title.lineheigh { line-height: 1.53; font-size: 1.5rem; } /* about */ .aboutThree__inner { padding-top: 60px; padding-bottom: 40px; } ul.rightleft li { flex-direction: column-reverse; gap: 0; } .rightleft__text { width: 92%; padding: 25px 30px; margin: -50px auto 0; } .rightleft__img { position: relative; width: 100%; height: 100%; top: auto; right: auto; transform: none; } .heading { gap: 15px; } .rightleft__text h3.heading__top { font-size: 1.9rem; padding-bottom: 25px; } p.heading__desc { line-height: 1.83; } .rightleft__img.vimeoList { height: 350px; } .rightleft__img video { height: 350px; } ul.rightleft { gap: 60px; } .philosophy__inner--header p br { display: none; } ul.philosophy__inner--content { gap: 45px; padding: 25px 35px; } h3.heading__top br { display: none; } p.heading__desc br { display: none; } ul.aboutLink__inner { flex-direction: column; } ul.aboutLink__inner li { width: 100%; } ul.aboutLink__inner li a { padding: 20px; border: none; border-bottom: solid 1px #ddd; } ul.aboutLink__inner li:last-child a { border: none; } .messagePage__inner .heading.colored h3.heading__top { font-size: 1.9rem; } .ceoProfile__inner--inner { padding: 25px 30px; } .ceoProfile__inner--innerLeft { width: 100%; } .ceoProfile__inner--innerRight { width: 100%; } .companyOverview__inner dl { gap: 0px; } .companyOverview__inner--row { flex-direction: column; border: none; } .companyOverview__inner--row dt { width: fit-content; } .identity__inner--left { width: 100%; } .identity__inner--right { width: 100%; } .news-content { padding: 40px 4%; } .nav-link-container { padding-top: 50px; position: relative; } .news-archive-link { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } .contact-content { display: flex; flex-direction: column; gap: 40px; } .contact-content--left.semiar__right { width: 100%; } .semiar__right { padding: 15px 20px; } .contact-content--right.semiar__right iframe { min-height: 1500px; } aside#sideForm.contactSide { width: 100%; } ul.whitepaper li { width: 100%; } aside#sideForm .semiar__right iframe { min-height: 1160px; } /* overlay */ #overlay img.logo { width: auto; height: 70px; padding-left: 4%; padding-right: 4%; } section#loading #shape1 { bottom: 0; } /* seminar */ /* card */ ul.cardList { padding-left: 6%; padding-right: 6%; } ul.cardList li { width: 100%; } .cardList__img { height: auto; } .cardList__img img { height: auto; } /* seminar page */ /* seminar main */ main#seminarPostPage { padding-top: 60px; overflow: hidden; } main#seminarPostPage:after { height: 140px; } ul.semiarTag { gap: 15px 20px; } ul.pickupList { padding: 15px 20px; } ul.speakers li { flex-direction: column; gap: 10px; } ul.speakers li img { width: 100%; height: 300px; } .speakersName { align-items: center; } .speakers__right { width: 100%; } .detailInner { flex-direction: column; padding: 20px 20px; align-items: flex-start; gap: 5px; } .detailInner dt, .detailInner dd { width: 100%; } .topSeminar__inner--bottom { padding: 0; border: none; background: none; } .topSeminar__inner--bottom ul.cardList { padding-left: 2%; padding-right: 2%; } /* case */ main#casePost { padding-top: 60px; padding-left: 0; padding-right: 0; } article#case { padding: 20px 4% 40px; border-radius: 0; } .case__header h1 { font-size: 1.8rem; } .case__img { margin-left: -4%; margin-right: -4%; } .case__header { padding-bottom: 20px; } .case__beforeafter { flex-direction: column; gap: 40px; } .case__beforeafter--inner { width: 100%; } .case__beforeafter--inner:after { margin-top: 0; border-left: none; content: ""; position: absolute; top: 100%; left: 50%; margin-left: -20px; border: 20px solid transparent; border-top: 20px solid #faf2f2; } aside#caseSide { width: 100%; padding-left: 4%; padding-right: 4%; } ul.caseCard li { width: 100%; } .caseCard__img img { height: 220px; } /* header */ section#pageHeader, .ArchivePage__header { height: 320px; } /* news */ section.someTabs { margin-top: -80px; gap: 30px; } .newsPostPage__inner { width: 100%; border-radius: 0; padding-left: 4%; padding-right: 4%; } /* news tab */ nav.tabs__nav { flex-wrap: wrap; gap: 0; } a.tabs__item { width: 100%; } a.Tabs__presentation-slider { display: none; } /* news */ button.share-button { display: none; } .welcomeContact__inner--chara { padding-left: 4%; padding-right: 4%; } .welcomeContact__inner--chara p { text-align: left; } ul.welcomeContact__inner--list { flex-direction: column; gap: 45px; padding-left: 4%; padding-right: 4%; } ul.welcomeContact__inner--list li { width: 100%; } /* footer siwtch */ .footer__top--logo .trp_language_switcher_shortcode { display: flex; justify-content: center; } /* company */ .companyOverview__inner--row dd { width: 100%; } .outerLink a.primaryBtn { width: 100%; display: flex; justify-content: center; padding-left: 30px; padding-right: 45px; } /* terms */ section#termsContent ul.wp-block-list, section#termsContent ol.wp-block-list { padding-left: 12%; padding-right: 4%; padding-top: 10px; padding-bottom: 14px; } /* new top */ /* mv */ section#renewMV { overflow: hidden; } .renewMV__inner--leftCatch { transform: translateX(18px); } .renewMV__inner--leftCatch p, .renewMV__inner--leftCatch h2 { font-size: 2.6rem; } .renewMV__inner--leftCatch h2 span { font-size: 6rem; margin-right: 4px; vertical-align: 4px; } .renewMV__inner--leftBtns { flex-direction: column; } .renewMV__inner--right img { transform: scale(1.2); } p.renewMV__inner--leftBody br { display: none; } /* fv under */ section#reTopMVunder { margin-top: -35px; } section#reTopMVunder:before { height: calc(100% - 35px); top: 35px; } .reTopMVunder__inner--chara { top: -155px; } .reTopMVunder__inner--chara img { width: 100%; height: 170px; } .reTopMVunder__inner--chara p { padding-bottom: 30px; } /* heading */ .renewHeading { align-items: center; } .renewHeading h2 { font-size: 2.5rem; } span.textsBig { font-size: 3.8rem; } /* about us */ .rereAbout__inner { padding-top: 80px; } /* service */ .renewService__inner { gap: 40px; padding-bottom: 60px; } .renewService__inner--topLeft .renewHeading { transform: translateX(12px); } p.renewService__inner--topLeftDesc { letter-spacing: 0.3px; } p.renewService__inner--topLeftDesc br { display: none; } .renewService__inner--topRight img { width: 320px; height: 320px; } .renewService__inner--topRight #shape1.scrolled { height: 200px; } .renewService__inner--topRight #shape2.scrolled { height: 200px; } .screenDot { bottom: 30px; } .renewService__inner--middle { flex-direction: column-reverse; gap: 20px; } ul.renewService__inner--middleLists { justify-content: center; gap: 10px 15px; } li.renewService__inner--bottomBox { width: 140px; height: 75px; } /* dev */ .renewService__inner--devRight .renewHeading h2 { font-size: 1.7rem; line-height: 1.53; letter-spacing: 0.2px; } .renewService__inner--devRight .renewHeading h2 span.textsBig { font-size: 3rem; vertical-align: 4px; margin-right: 3px; line-height: 1; } .renewService__inner--devRight .renewHeading h2 br { display: none; } /* about us */ .rereAbout__inner--left span.textsBig { font-size: 5rem; } p.rereAbout__inner--leftDescs br { display: none; } .rereAbout__inner--right img { width: 320px; height: 320px; } .rereAbout__inner--right:after { width: 340px; height: 320px; right: -40px; top: -80px; } .longDot { width: 80px; height: 40px; left: 5px; bottom: 10px; } /* future */ .inFuture__inner { padding: 40px 4% 0px; } section#inFuture:before { width: 120px; height: 125px; left: -30px; top: 40%; opacity: 0.2; } section#inFuture:after { width: 120px; height: 150px; right: -10px; top: 50%; opacity: 0.2; } .inFuture__inner h3 { transform: translateX(18px); } /* ccta */ .reTopCTA__inners.top { padding-top: 0; } .reTopCTA__inners--right { margin-top: -45px; } .reTopCTA__inners--left p { letter-spacing: 0.2px; } /* scene */ .reTopScene__inner--topsLeft .renewHeading { align-items: center; transform: translateX(12px); } .reTopScene__inner--topsLeft span.textsBig { font-size: 3.1rem; } .reTopScene__inner--topsRight img { width: 320px; height: 320px; } .reTopScene__inner--topsRight #shape1.scrolled { height: 200px; } .reTopScene__inner { padding-top: 60px; padding-bottom: 120px; gap: 30px; } .reTopScene__inner--cases { gap: 15px; } /* strength */ li.reTopStrength__inner--strengthList { width: 100%; flex-direction: column; padding-left: 4%; padding-right: 4%; } /* insights */ .reInsights__inner { padding-top: 100px; padding-bottom: 60px; } .reInsights__inner--mediaList { padding: 9px 15px; } li.mediaCard a, li.mediaCard.big a { flex-direction: column; gap: 8px; padding-bottom: 25px; border-bottom: solid 1px rgb(255, 255, 255, 0.3); } li.mediaCard.mimini a { flex-direction: column; gap: 12px; } .mediaCard__img { width: 100%; } .mediaCard__text { width: 100%; } li.mediaCard.mimini .mediaCard__text { width: 100%; } .reInsights__inner--mediaList { gap: 30px; } li.mediaCard.mimini:last-child a { border-bottom: none; } li.mediaCard.mimini .mediaCard__img, li.mediaCard.big .mediaCard__img { width: 100%; } /* mini head */ .miniHeading { flex-direction: column; gap: 5px; align-items: center; } /* top news */ .reNews__inner--column ul.news-content--inner li a { padding-left: 20px; padding-right: 35px; } .innerCtaContainer { padding: 140px 0 20px; } a.lastbLink { width: 100%; } /* renew title */ .renewTitle { justify-content: center; } /* inner cta*/ .innerCta--blockTop span { font-size: 3rem; top: -28px; } /* features */ h2.heading__top.reTopT span { font-size: 4rem; top: -48px; } .reTopFeatures__inner { padding-top: 60px; gap: 40px; padding-bottom: 40px; overflow: hidden; } .reTopFeatures__inner--fourlistText { padding: 25px 20px; width: 94%; } .reTopFeatures__inner--links { flex-direction: column; gap: 20px; align-items: center; margin: 0; } .reTopFeatures__inner--fourlistText h3 { font-size: 1.8rem; } .reTopFeatures__inner--fourlistText h3 br { display: none; } p.fourlistTextSub { font-size: 1.2rem; line-height: 1.5; } /* scene */ .reTopScene__inner { padding-top: 60px; padding-bottom: 120px; } li.reTopScene__inner--list { width: 100%; } /* strength */ li.reTopStrength__inner--strengthList { width: 100%; flex-direction: column; padding-left: 4%; padding-right: 4%; } li.reTopStrength__inner--strengthList:last-child { padding-left: 4%; padding-right: 4%; } li.reTopStrength__inner--strengthList:last-child .strengthListText { width: 100%; align-items: stretch; } .strengthListImg li.reTopMVunder__inner--list { width: fit-content; margin: 0 auto; } .strengthListText__heading h3 { text-align: center; } .strengthListImg { margin-top: 15px; width: 100%; } .strengthListNumber { left: 49%; transform: translateX(-50%); } .reTopStrength__inner--links { flex-direction: column; gap: 20px; align-items: center; margin: 0; } /* new no1 */ .renewMV__inner--right { padding-top: 440px; } img.topNumberOneBadge { transform: none; } .topNumberOne { left: 50%; transform: translateX(-50%); top: 0; bottom: auto; width: 100%; max-width: 300px; } p.topNnumberOne__desc { white-space: nowrap; } p.numberOneHosoku { max-width: none; } /* new case */ .caseFilter { padding: 24px 18px 0; margin-bottom: 0; } .caseFilter__accordionButton { display: block; padding: 0 36px 22px 0; } .caseFilter__title { display: block; font-size: 1.3rem; margin-bottom: 4px; } .caseFilter__icon { top: 16px; } .caseFilter__lead { display: block; font-size: 13px; } .caseFilter__row { display: block; } .caseFilter__rowTitle { padding: 16px 16px 4px; font-size: 15px; } .caseFilter__terms { padding: 12px 16px 18px; gap: 10px; } .caseFilter__term { font-size: 12px; padding: 6px 14px; } .caseFilter__actions { flex-direction: column; gap: 14px; margin-top: 26px; padding-left: 4%; padding-right: 4%; padding-top: 15px; padding-bottom: 15px; } .caseFilter__submit, .caseFilter__clear { width: 100%; min-width: 0; min-height: 56px; font-size: 16px; } /* case pickup */ .casePickupCarousel { margin-bottom: 56px; } .casePickupCarousel__prev, .casePickupCarousel__next { width: 46px; height: 46px; top: 30%; } .casePickupCarousel__prev { left: 8px; } .casePickupCarousel__next { right: 8px; } .casePickupCarousel__pagination { gap: 12px; margin-top: 24px; } .casePickupCarousel__pagination .swiper-pagination-bullet { width: 16px; height: 16px; } .casePickupCarousel__inner .caseCard__img img { height: 300px; } .caseHeader__inner h2.pageHeader__top { padding-top: 40px; } /* new mv */ section#renewMV { min-height: 900px; } video#mvvideos { transform: translateY(300px); } p.bottomCopys { font-size: 0.6rem; line-height: 1.73; } /* archive seminar */ .seminar-listing__container { width: min(100% - 30px, 1120px); } .seminar-listing__hero-inner { min-height: 300px; } .seminar-listing__hero-copy { width: calc(100% - 30px); padding-block: 45px; } .seminar-listing__hero-text { font-size: 14px; line-height: 1.85; } .seminar-listing__featured { padding: 44px 0 52px; } .seminar-listing__featured-body { padding: 24px 20px; } .seminar-listing__featured-title { font-size: 18px; } .seminar-listing__upcoming { padding-bottom: 56px; } .seminar-listing__tabs { gap: 8px; } .seminar-listing__tab { padding-inline: 14px; font-size: 12px; } .seminar-listing__sort-label { width: 100%; justify-content: flex-end; } .seminar-listing__grid { grid-template-columns: 1fr; } .seminar-listing__past { padding: 52px 0 64px; } .reInsights__inner--seminarList.seminar-listing .seminar-listing__grid { padding: 20px 20px 20px; } /* モバイル用ここまで */ } /* ========================= PC Mega Menu 旧UI維持・位置制御だけ刷新 ========================= */ @media screen and (min-width: 768px) { header#header.mega-open { background: #fff; } .header__inner--bottom { position: relative; } .header__inner--bottomRight.pc { position: relative; z-index: 30; } ul.header__inner--bottomRightLink li.hasChild { position: relative; } .hasChild__trigger { letter-spacing: 0.5px; font-size: 0.95rem; color: var(--main-text); padding: 18.5px 20px 18.5px 2px; font-weight: 500; position: relative; cursor: pointer; transition: 0.2s ease-in-out; line-height: 1; display: inline-flex; align-items: center; } .hasChild__trigger:hover { color: var(--main-heading); } .hasChild__trigger::after { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2px; top: 50%; transform: translateY(-50%); opacity: 0.6; transition: transform 0.2s ease-in-out, color 0.2s ease-in-out; } li.hasChild.is-open .hasChild__trigger { color: var(--main-heading); } li.hasChild.is-open .hasChild__trigger::after { transform: translateY(-50%) rotate(180deg); } /* hover開閉を無効化 */ li.hasChild:hover .hasChild__inner { opacity: 0; pointer-events: none; z-index: -1; } /* 旧構造の個別パネルは使わない */ .hasChild__inner { display: none !important; } /* 共通メガメニュー本体 */ .pcMegaMenu { position: absolute; top: 113%; left: 0; width: 100vw; background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 8px 10px rgba(0, 5, 0, 0.12); padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; z-index: 90; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); border-top: 1px solid rgba(0, 0, 0, 0.06); } .pcMegaMenu.is-open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .pcMegaMenu__inner { width: min(1200px, 92%); margin: 0 auto; padding: 2.8rem 0 3rem; } .pcMegaMenu__panel { display: none; grid-template-columns: 240px 1fr; gap: 36px; align-items: start; } .pcMegaMenu__panel.is-active { display: grid; } .pcMegaMenu__heading { padding-top: 14px; } .pcMegaMenu__title { font-size: 1.45rem; font-weight: 700; line-height: 1.4; letter-spacing: 0.04em; color: var(--main-text); } .pcMegaMenu__links { display: grid; gap: 14px 18px; } .pcMegaMenu__links.cols-3 { grid-template-columns: repeat(3, minmax(180px, 1fr)); } .pcMegaMenu__links.cols-2 { grid-template-columns: repeat(2, minmax(220px, 320px)); } .pcMegaMenu__links.cols-1 { grid-template-columns: minmax(220px, 320px); } .pcMegaMenu__links a { display: flex; align-items: center; min-height: 56px; padding: 16px 10px 18px 40px; border: 1px solid #e8e8ee; border-radius: 8px; background: #fff; position: relative; font-size: 0.95rem; line-height: 1.6; transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease; } .pcMegaMenu__links a::before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 18px; top: 50%; transform: translateY(-50%); opacity: 0.45; } .pcMegaMenu__links a:hover { color: var(--main-heading); border-color: rgba(58, 52, 255, 0.25); box-shadow: 0 8px 24px rgba(58, 52, 255, 0.08); transform: translateY(-2px); opacity: 1 !important; } /* 開いている間だけヘッダー背景を安定表示 */ header#header.mega-open::before { opacity: 1; } /* オーバーレイ */ .megaMenuOverlay { position: fixed; inset: 0; background: rgba(34, 34, 34, 0.25); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.25s ease, visibility 0.25s ease; z-index: 80; } .megaMenuOverlay.is-active { opacity: 1; visibility: visible; pointer-events: auto; } header#header { z-index: 99; } .header__inner, .header__inner--bottom { position: relative; z-index: 90; } /* モバイル対象外（PCのみ）はここまで */ } @media screen and (max-width: 767px) { .pcMegaMenu, .megaMenuOverlay { display: none !important; } } @media (prefers-reduced-motion: reduce) { .seminar-listing__featured-card, .seminar-listing__card { transition: none; } }