/* 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; } 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; } .fadeHeader { animation: fadeHeader 1s ease 0s 1 normal; } @keyframes fadeHeader { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; } } /* 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; } } /* 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: 15px; } 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: 1rem; color: var(--main-text); padding: 18.5px 10px; 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: 15px; align-items: center; } .header__inner--bottomRightCta a { width: 180px; padding: 10px 0 13px; font-size: 0.9rem; } .header__inner--bottomRightCta a:after { right: 12px; } .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; } /* 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; } 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: scroll; } 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: 60px 0; } .footer__top--logo { display: flex; flex-direction: column; gap: 15px } .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--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: 12px; 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 { background: #f9f9f9; display: flex; flex-direction: column; gap: 12px; padding: 22px 35px 24px 55px; border-radius: 6px; } 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); } /* 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; } /* 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); } .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: 20px; border-radius: 9999px; transform: translateY(-1px); font-style: normal; } 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; } .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: 24px; gap: 12px; 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: 18px; padding-right: 18px; 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.3rem; font-weight: 600; line-height: 1.63; padding-left: 18px; padding-right: 18px; flex-grow: 1; padding-bottom: 3px; } 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); } /* 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; } } /* 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: 25px; 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; } .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; } .caseArchive__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; padding: 100px 0px 30px; } 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: 250px; 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; } /* news */ section.someTabs { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 60px; margin-top: -107px; } [data-tab-content] { display: none; } [data-tab-content].active { display: block; } nav.tabs__nav { position: relative; display: flex; justify-content: space-between; flex-wrap: wrap; width: 100%; margin-bottom: 1rem; background: #FFF; box-shadow: 0 7px 34px rgb(50 50 93 / 10%), 0 3px 6px rgb(0 0 0 / 8%); border-radius: 3px; } a.tabs__item { flex: 1; text-align: center; padding: 1rem; text-decoration: none; color: #aaa; font-size: 0.9rem; font-weight: 500; border-right: solid 1px #eee; padding-bottom: 20px; letter-spacing: 0.6px; flex-grow: 1; display: flex; justify-content: center; align-items: center; } nav.tabs__nav a.tabs__item:nth-last-child(2) { border: none; } a.tabs__item.active { color: var(--main-heading); background: #f9f9f9; } a.tabs__item:hover { background: #f9f9f9; } .tabs__item:first-child.active ~ .Tabs__presentation-slider { transform: translateX(0) scaleX(0.143); } .tabs__item:nth-child(2).active ~ .Tabs__presentation-slider { transform: translateX(14.28%) scaleX(0.143); } .tabs__item:nth-child(3).active ~ .Tabs__presentation-slider { transform: translateX(calc(14.28% * 2)) scaleX(0.143); } .tabs__item:nth-child(4).active ~ .Tabs__presentation-slider { transform: translateX(calc(14.28% * 3)) scaleX(0.143); } .tabs__item:nth-child(5).active ~ .Tabs__presentation-slider { transform: translateX(calc(14.28% * 4)) scaleX(0.143); } .tabs__item:nth-child(6).active ~ .Tabs__presentation-slider { transform: translateX(calc(14.28% * 5)) scaleX(0.143); } .tabs__item:nth-child(7).active ~ .Tabs__presentation-slider { transform: translateX(calc(14.28% * 6)) scaleX(0.143); } .Tabs__presentation-slider { position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: var(--main-heading); transition: transform 0.25s; transform-origin: 0 0; } a.Tabs__presentation-slider:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -55px; border: 55px solid transparent; border-top: 8px solid #3a34ff; z-index: 1; } .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; } /* 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; } @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; } } @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; } } @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; } } @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; } /* 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; } 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%; } } @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%; } } @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; } /* 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%; } /* 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; } } @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; } /* 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 */ .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 { min-width: 50%; max-width: 50%; border-bottom: solid 1px #eee; } a.Tabs__presentation-slider { display: none; } nav.tabs__nav a.tabs__item:nth-child(even) { border-right: none; } nav.tabs__nav a.tabs__item:nth-child(7) { border-bottom: none; border-right: solid 1px #eee; } /* 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 { padding-left: 12%; padding-right: 4%; } }