/* Theme Name: Twenty Twenty-One Child Theme URI: https://diviextended.com/ Description: A child theme of Twenty Twenty-One WordPress theme. Author: Elicus Technologies Author URI: https://elicus.com Template: twentytwentyone Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html */ /* 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-primary:#F8951D; --main-secondary: #165FAA; --main-heading: #3A34FF; --main-CourseMain: #C6A700; } a { transition: 0.3s ease-in-out; font-family: 'Noto Sans JP', sans-serif; letter-spacing: 1.5px; } p { letter-spacing: 2px; line-height: 2.3; } a.primaryBtn { background: var(--main-primary); color: #fff; font-weight: 500; padding: 13px 35px 16px; border-radius: 5px; position: relative; box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12); min-width: 200px; display: flex; justify-content: center; overflow: hidden; } a.primaryBtn:after, a.secondaryBtn:after, a.thirdBtn:after { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); opacity: 0.6; } a.thirdBtn { background: #fff; color: #000; font-weight: 500; padding: 13px 35px 16px; border-radius: 5px; position: relative; box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12); min-width: 200px; display: flex; justify-content: center; overflow: hidden; } a.secondaryBtn { background: #000; color: #fff; font-weight: 500; padding: 17px 35px 20px; border-radius: 5px; position: relative; box-shadow: 0px 1px 12px 0px rgba(0, 0, 0, 0.12); min-width: 260px; display: flex; justify-content: center; width: fit-content; font-size: 1.1rem; overflow: hidden; } a.secondaryBtn:hover, a.primaryBtn:hover, a.thirdBtn:hover { opacity: 0.8; } a.outLink { position: relative; } a.outLink:after { content: "\f2d2"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: relative; opacity: 0.6; padding-left: 6px; } /* animetion */ @keyframes fadeHeader { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; } } @keyframes textopa { 0% { font-size: 15rem; text-shadow: 0px 0px 25px rgba(255, 255, 255, 0.45); } 100% { font-size: 14rem; text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.15); } } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: ripple-animation 1s linear; pointer-events: none; } @keyframes ripple-animation { to { transform: scale(4); opacity: 0; } } /* body header */ body.home ul.header__inner--rightText li a, body.home ul.header__inner--rightText li span { color: #fff; } /* header */ header#header { position: fixed; display: block; width: 100%; z-index: 10; transition: 0.3s ease-in-out; top: 0; left: 0; } 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.65); } header#header.resize:before { opacity: 1; } .header__inner { display: flex; justify-content: space-between; align-items: center; padding: 6px 2%; transition: 0.3s ease-in-out; position: relative; } a.header__inner--let { padding: 4px 12px; display: flex; align-items: center; justify-content: center; } a.header__inner--let:hover { opacity: 0.7; } .header__inner a img { width: 100%; min-height: 60px; transition: 0.5s ease-in-out; } .header__inner--right { display: flex; justify-content: flex-end; align-items: center; gap: 25px; } ul.header__inner--rightText { display: flex; align-items: center; justify-content: flex-end; gap: 30px; } ul.header__inner--rightText li { position: relative; display: flex; } ul.header__inner--rightText li:after { content: ""; width: 1px; height: 20px; position: absolute; background: #ddd; top: 44%; transform: rotate3d(1, 1, 1, 45deg) translateY(-50%); right: -11px; } ul.header__inner--rightText li a, ul.header__inner--rightText li span { position: relative; padding: 15px 5px; } ul.header__inner--rightText li span { transition: 0.3s ease-in-out; cursor: pointer; padding-right: 20px; } li.hasChild:hover .hasChild__inner { opacity: 1; pointer-events: auto; } body ul.header__inner--rightText li.hasChild .hasChild__inner a { color: #000; padding-left: 18px; } .hasChild__inner a:before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0px; top: 52%; transform: translateY(-50%); opacity: 0.4; } ul.header__inner--rightText li a:hover { opacity: 0.6; } ul.header__inner--rightText li:last-child:after { content: none; } .header__inner--btn { display: flex; justify-content: flex-end; align-items: center; gap: 20px; } header#header.resize ul.header__inner--rightText li a, header#header.resize ul.header__inner--rightText li span { color: #000; } header#header.resize .header__inner { padding-top: 2px; padding-bottom: 2px; } ul.header__inner--rightText li.hasChild:hover span { color: var(--main-primary); } /* トグル */ .toggle { display: none; transition: 0.2s ease-in-out; } /* MENU */ nav.navLinks a { text-decoration: none; } nav.navLinks .parentMenu { border: none; list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; } .navLinks .parentMenu li { margin: 0; padding: 0; position: relative; } .navLinks .parentMenu li a { padding: 0 15px; line-height: 70px; display: inline-block; color: #313131; position: relative; } /* 親メニューのhover時の下線 */ .navLinks .parentMenu li a:after { content: ''; position: absolute; bottom: 0; left: 0%; width: 100%; height: 3px; background: #f0db40; transition: all .3s; transform: scale(0, 1); transform-origin: center top; } .navLinks .parentMenu li a:hover:after { transform: scale(1, 1); } /* サブメニュー */ nav.navLinks .parentMenu li ul.navSubMenu { display: none; border-radius: 0; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; background: #FFF; transition: 0.3s ease-in-out; list-style: none; } .navLinks .parentMenu li ul.navSubMenu li a { line-height: 1; padding: 20px 25px; border-bottom: solid 1px #eee; } ul.navSubMenu li:last-child a { border: none; } nav.navLinks .parentMenu li:hover ul.navSubMenu { display: flex; flex-direction: column; box-shadow: 0 3px 5px rgb(0 0 0 / 22%); gap: 0; } nav.navLinks .parentMenu li ul.navSubMenu li a:after { content: none; } ul.navSubMenu li a:hover { background: #fafafa; } /* header sub menu */ .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: 0; border-radius: 3px; } li.hasChild span:before { content: "\f107"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 2px; top: 52%; transform: translateY(-50%); opacity: 0.6; } .spNone { display: inline-block; } /* mv */ section#mv { position: relative; } .mv__video { position: fixed; width: 100%; top: 0; left: 0; } .mv__video:before { content: ""; width: 100%; height: 100%; background: rgb(0, 0, 0, 0.2); position: absolute; top: 0; left: 0; z-index: 1; pointer-events: none; } .mv__video video { position: absolute; top: 0; width: 100%; height: 100%; left: 0; pointer-events: none; object-fit: cover; } .mv__inner { position: relative; width: 100%; max-width: 1250px; margin: 0 auto; display: flex; flex-direction: column; justify-content: center; } .mv__video, .mv__inner { height: 900px; } .mv__inner--left { display: flex; flex-direction: column; gap: 30px; } .mv__inner--left h1 { color: #FFF; text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.45); font-family: "Noto Sans JP"; font-size: 5.4rem; font-style: normal; font-weight: 900; line-height: 135%; letter-spacing: 5px; animation: fadeHeader 2s ease 0s 1 normal; } p.mvEng { color: #FFF; text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.45); font-family: Roboto; font-size: 1.8rem; font-style: italic; font-weight: 800; line-height: normal; letter-spacing: 2px; animation: fadeHeader 2s ease 0s 1 normal; } .mv__philosophy { position: absolute; right: 0; z-index: 1; top: 150px; pointer-events: none; } .mv__philosophy p { color: rgba(255, 255, 255, 0.05); text-align: right; text-shadow: 0px 0px 0px rgba(255, 255, 255, 0.15); -webkit-text-stroke-width: 1; -webkit-text-stroke-color: rgba(255, 255, 255, 0.50); font-family: Roboto; font-size: 14rem; font-style: italic; font-weight: 800; line-height: normal; letter-spacing: 2px; animation: textopa 4s ease 0s 1 normal; } .mv__inner--news { position: absolute; right: 30px; bottom: 30px; border: 1px solid var(--main-secondary, #165FAA); background: linear-gradient(90deg, rgba(91, 91, 91, 0.55) 0%, rgba(0, 0, 0, 0.55) 100%); width: 100%; max-width: 700px; } a.newsRow { padding: 20px 50px 18px 30px; display: flex; flex-direction: column; gap: 6px; position: relative; } /* date */ .newsRowdate { color: #fff; display: flex; justify-content: flex-start; align-items: center; gap: 12px; } a.newsRow:hover { opacity: 0.8; } a.newsRow:after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 36px; top: 50%; transform: translateY(-50%); color: #fff; opacity: 0.6; transition: 0.3s ease-in-out; } a.newsRow:hover:after { right: 30px; } p.date { font-family: Roboto; font-size: 1.1rem; font-style: italic; font-weight: 400; } ul.tags { display: flex; justify-content: flex-start; align-items: center; gap: 12px; } ul.tags li { background: var(--main-secondary); font-size: 0.8rem; padding: 2px 12px 3px; border-radius: 3px; line-height: 1.2; } p.title { font-size: 1.2rem; color: #fff; font-weight: 500; } .mv__inner--news .newsRowdate p.date { color: #fff; line-height: 1.1; } .mv__inner--news p.title { line-height: 1.8; } /* mvunder */ section#mvunder { position: relative; } .mvunder__visionText { position: absolute; right: 0; top: 12%; pointer-events: none; } .mvunder__visionText p { font-family: Roboto; font-size: 14rem; font-style: italic; font-weight: 800; line-height: normal; letter-spacing: 2px; z-index: 1; position: relative; opacity: 0.06; } .mvunder__flex { display: flex; justify-content: space-between; } .mvunder__flex--left, .mvunder__flex--right { width: calc((100% - 1250px) / 2); background: #fff; } .mvunder__inner { width: 100%; max-width: 1250px; padding: 240px 0 220px; display: flex; flex-direction: column; position: relative; } .mvunder__inner:before, .mvunder__inner:after { content: ""; width: 100%; height: 220px; position: absolute; left: 0; background: #fff; } .mvunder__inner:before { top: 0; height: 240px; } .mvunder__inner:after { bottom: 0; } .mvunder__inner h2 img { vertical-align: bottom; pointer-events: none; } .mvunder__inner--text { background: #fff; display: flex; flex-direction: column; gap: 16px; padding-top: 26px; } .mvunder__inner--text p { font-size: 1.1rem; line-height: 2.3; } .mvunder__inner--text a.secondaryBtn { margin-top: 15px; } img.mvundertext_pc { display: block; } img.mvundertext_sp { display: none; } /* services */ section#services { position: relative; background: #fff; padding-top: 90px; padding-bottom: 180px; } section#services .mvunder__visionText { top: 0.6%; } section#services .mvunder__visionText p { line-height: 0; color: #f2f2f2; opacity: 1; } .services__inner { width: 100%; max-width: 1250px; margin: 0 auto; background: #f2f2f2; display: flex; flex-direction: column; position: relative; gap: 60px; padding-bottom: 120px; } .services__inner:after { content: ""; width: 50%; height: 100%; background: #f2f2f2; position: absolute; right: 0; top: 0; margin-right: calc(50% - 50vw); pointer-events: none; } .services__inner--topText { display: flex; justify-content: center; width: 100%; padding: 80px 0 60px; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; border-bottom: solid 1px #ddd; } .services__inner--topText p { max-width: 900px; font-size: 1.1rem; } .services__inner--marunage { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 25px; } .services__inner--marunage h2 { text-align: center; font-size: 1.4rem; position: relative; z-index: 1; font-weight: 500; letter-spacing: 2px; } .services__inner--marunageInner { background: var(--main-primary); width: 100%; display: flex; position: relative; z-index: 1; flex-direction: column; border-radius: 5px; padding: 45px 50px; align-items: center; gap: 40px; } .services__inner--marunageInner:before { content: ""; width: 95%; height: 80%; background: url(/wp-content/themes/twenty-twenty-one-child/asset/img/dotmap.svg) no-repeat; position: absolute; top: 50px; background-size: cover; pointer-events: none; } .services__inner--marunageInner img { position: relative; width: 100%; max-width: 500px; } ul.resolution__step { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-bottom: 100px; width: 100%; } ul.resolution__step li { background: #fff; text-align: center; padding: 15px 10px 25px; width: 24%; position: relative; filter: drop-shadow(0px 1px 2px #ddd); } ul.resolution__step li:first-child { z-index: 4; } ul.resolution__step li:nth-child(2) { z-index: 3; } ul.resolution__step li:nth-child(3) { z-index: 2; } ul.resolution__step li:before { content: ""; position: absolute; top: 13%; left: 100%; margin-top: -18px; border: 18px solid transparent; border-left: 18px solid #ffffff; } ul.resolution__step li:last-child:before { content: none; } ul.resolution__step li p { font-size: 1.3rem; color: #f8951d; position: relative; display: inline-block; padding: 0px 15px; border-bottom: dotted 3px; margin-bottom: 5px; } .resolution__step--img { position: relative; margin-bottom: 5px; } .resolution__step--img:after { content: ""; width: 180px; height: 180px; position: absolute; background: #E8F9FF; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 9999px; } .resolution__step--img img { position: relative; z-index: 1; } p.resolution__bottom--Text { text-align: center; font-size: 1.5rem; letter-spacing: 0.05rem; line-height: 2; } ul.resolution__step li h4 { font-size: 1.3rem; font-weight: 500; } a.linkCard { position: relative; width: 100%; max-width: 700px; background: #fff; filter: drop-shadow(-20px 2px 34px rgba(0, 0, 0, 0.06)); z-index: 2; margin: 0 auto; margin-top: -120px; padding: 35px 40px 35px; border-radius: 3px; display: flex; flex-direction: column; gap: 6px; } .linkCard__top { display: flex; flex-direction: column; } .linkCard__top h3 { font-size: 2rem; position: relative; font-weight: 600; letter-spacing: 2px; transition: 0.3s ease-in-out; } a.linkCard:hover .linkCard__top h3 { color: var(--main-primary); } a.linkCard:hover { box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.15), 0 0 5px rgba(0, 0, 0, 0.1); } .linkCard__top h3:after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; opacity: 0.6; transition: 0.3s ease-in-out; font-size: 1.2rem; vertical-align: 3px; padding-left: 12px; } .linkCard__top p { font-size: 1rem; color: #707070; } .linkCard__bottom p { font-size: 1.1rem; color: #222; line-height: 2; } .services__inner--digitrad { display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; gap: 25px; margin-top: 60px; margin-bottom: 40px; } .services__inner--digitrad h2 { text-align: center; font-size: 1.4rem; position: relative; z-index: 1; font-weight: 500; letter-spacing: 2px; } .services__inner--digitrad img { margin-top: -22px; } .services__inner--digitrad p { text-align: center; font-size: 1.1rem; } .services__inner--digitradInner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; } ul.digitradList { display: flex; flex-direction: column; gap: 160px; position: relative; } ul.digitradList li { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; filter: drop-shadow(-20px 2px 34px rgba(0, 0, 0, 0.06)); z-index: 1; } ul.digitradList li img { position: absolute; left: 0; z-index: 3; max-width: 510px; width: 100%; } ul.digitradList li a.linkCard { margin: 0; position: relative; padding-left: 45px; max-width: 640px; } ul.digitradList li.reverse { justify-content: flex-start; } ul.digitradList li.reverse img { left: auto; right: 0; } li.reverse.consultant a.linkCard { padding-right: 85px; } /* top seminar */ section#seminartopHead { position: relative; background: #fff; padding: 200px 0 0; } section#seminartopHead .mvunder__visionText { right: auto; left: 0; top: 0; pointer-events: none; } section#seminartopHead .mvunder__visionText p { opacity: 1; color: var(--main-primary); font-size: 14rem; } .seminartopHead__inner { height: 400px; position: relative; width: 100%; max-width: 1250px; margin: 0 auto; background: var(--main-primary); padding-top: 60px; } .seminartopHead__inner:before { content: ""; width: 50%; height: 100%; background: var(--main-primary); position: absolute; left: 0; top: 0; margin-left: calc(50% - 50vw); pointer-events: none; } .seminartopHead__inner h2 { color: #fff; position: relative; font-size: 1.1rem; font-weight: 500; width: 100%; max-width: 1100px; margin: 0 auto; line-height: 2.3; letter-spacing: 2px; } /* seminar */ section#seminars { position: relative; margin-top: -210px; } section#seminars:after { content: ""; width: 100%; height: calc(100% - 210px); background: #fff; position: absolute; bottom: 0; } .seminars__inner { width: 100%; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; padding-bottom: 160px; gap: 60px; display: flex; flex-direction: column; } ul.seminars__inner--card { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; } ul.seminars__inner--card:after { content: ""; width: calc(100% / 3 - 30px); } ul.seminars__inner--card li { width: calc(100% / 3 - 30px); display: flex; flex-direction: column; position: relative; } li.event a { display: flex; flex-direction: column; border-radius: 5px; 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; overflow: hidden; height: 100%; } li.event 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); } .event-image { position: relative; } .event-image img { vertical-align: bottom; } p.event-type { position: absolute; left: 0; top: 0; font-size: 0.7rem; background: #000; color: #fff; line-height: 1; padding: 6px 12px 7px; letter-spacing: 0; font-weight: 500; } .event-text { flex-grow: 1; padding: 18px 24px 22px; display: flex; flex-direction: column; gap: 8px; } .event-text p.semiarDate { font-size: 1rem; letter-spacing: 1px; } p.nowon { color: var(--main-secondary); font-weight: 500; line-height: 1; font-size: 1rem; } .event-text h3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 1.2rem; font-weight: 500; line-height: 1.65; } .seminars__inner a.secondaryBtn { margin: 0 auto; } ul.detailTen li a { color: #0064BF; font-weight: 500; position: relative; display: inline-block; font-size: 0.9rem; text-decoration: underline; } ul.detailTen li a:after { content: "\f0c1"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; right: 0px; opacity: 0.6; padding-left: 5px; } ul.detailTen li p { line-height: 1.8; } ul.detailTen li a:hover { opacity: 0.6; } /* recruit */ section#recruit { position: relative; background: url(https://standage.co.jp/wp-content/uploads/2024/09/mv01.jpg) no-repeat; background-size: cover; background-position: 0 -100px; } section#recruit:before { content: ""; width: 100%; height: 100%; top: 0; left: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.3) 70.26%, rgba(0, 0, 0, 0.25) 100%); position: absolute; } .recruit__inner { width: 100%; max-width: 1250px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; height: 600px; justify-content: center; position: relative; gap: 45px; } .recruit__inner--heading { padding-top: 20px; } .recruit__inner--heading h2 { color: #fff; font-size: 1.8rem; position: relative; z-index: 1; font-weight: 500; letter-spacing: 2px; z-index: 2; } .recruit__inner--heading h2 span { position: absolute; text-align: center; text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.25); font-family: Roboto; font-size: 12rem; font-style: italic; font-weight: 800; line-height: normal; letter-spacing: 6px; top: 50%; left: 50%; transform: translate(-50%, -56%); background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 23.39%, rgba(0, 0, 0, 0.13) 62.96%, rgba(0, 0, 0, 0.08) 80.73%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; pointer-events: none; z-index: -1; } .recruit__inner--middle p { text-align: center; color: #fff; } .recruit__inner a.thirdBtn { min-width: 260px; padding: 17px 35px 20px; font-size: 1.1rem; } /* footer */ footer#footer { position: relative; background: #000; border-bottom: solid 10px var(--main-primary); } .footer__inner { width: 100%; max-width: 1250px; margin: 0 auto; padding-top: 80px; display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start; gap: 60px; } .footer__inner--left a { display: flex; flex-direction: column; gap: 8px; } .footer__inner--left a img { height: 80px; } .footer__inner--left a p { color: #fff; font-size: 0.8rem; } .footer__inner--left a:hover { opacity: 0.7; } .footer__inner--right { width: 58%; display: flex; flex-direction: column; gap: 70px; } ul.footer__inner--rightTop { display: flex; flex-direction: row; justify-content: flex-start; align-items: center; flex-wrap: wrap; width: 100%; gap: 5px; position: relative; } ul.footer__inner--rightTop:after { content: ""; width: 100%; height: 1px; background: #313131; position: absolute; bottom: -35px; } ul.footer__inner--rightTop li { width: calc(100% / 3 - 40px); } ul.footer__inner--rightTop li a, ul.footerLinks li a { color: #fff; position: relative; display: inline-block; padding: 8px 24px; font-size: 1rem; } ul.footer__inner--rightTop li a:before, ul.footerLinks li a:before { content: "\f0da"; 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__inner--rightTop li a:hover, ul.footerLinks li a:hover, ul.outerLinks li a:hover { opacity: 0.7; } .footer__inner--rightBottom { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; } ul.footerLinks { display: flex; flex-direction: column; width: 46%; } ul.footerLinks li h2 { color: rgb(255, 255, 255, 0.6); font-weight: 400; letter-spacing: 1px; font-size: 0.9rem; margin-bottom: 12px; } .footer__inner--bottom { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 16px 0; } .footer__inner--bottom p { color: #fff; font-size: 0.8rem; } ul.outerLinks { display: flex; justify-content: flex-end; gap: 20px; align-items: center; } ul.outerLinks li a { color: #fff; font-size: 0.8rem; padding: 8px 8px; display: inline-block; position: relative; } a.targetBlank:after { content: "\f2d2"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: relative; opacity: 0.6; padding-left: 5px; } /* about page */ body.page-id-5467 ul.header__inner--rightText li a, body.page-id-5467 ul.header__inner--rightText li span { color: #fff; } section#aboutPage { position: relative; background: #000; } section#aboutPage:before { content: ""; width: 100%; height: 800px; background: url(https://wp.standage.co.jp/wp-content/uploads/2024/07/aboutBg_.jpg) no-repeat; position: absolute; top: 0px; left: 0; background-size: cover; } .aboutPage__inner { position: relative; display: flex; flex-direction: column; padding-top: 200px; padding-bottom: 120px; width: 100%; max-width: 1250px; margin: 0 auto; gap: 140px; } .aboutPage__inner--message { display: flex; flex-direction: column; gap: 5px; } .aboutPage__inner--message h1, .aboutPage__inner--message h2 { color: var(--main-primary); font-family: Roboto; font-size: 1.8rem; font-style: italic; font-weight: 800; letter-spacing: 1px; } .aboutPage__inner--message p { color: #FFF; text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.45); font-size: 3.1rem; line-height: 145%; font-weight: 700; letter-spacing: 4px; animation: fadeHeader 2s ease 0s 1 normal; } .aboutPage__inner--ceo { display: flex; justify-content: space-between; align-items: center; } .aboutPage__inner--ceoImg { width: 380px; } .aboutPage__inner--ceoImg img { width: 100%; vertical-align: bottom; } .aboutPage__inner--ceotext { width: calc(100% - 450px - 60px); display: flex; flex-direction: column; gap: 20px; } .aboutPage__inner--ceotext p { color: #fff; } p.aboutPage__inner--ceotextProfile { text-align: end; display: flex; flex-direction: column; } p.aboutPage__inner--ceotextProfile { text-align: end; display: flex; flex-direction: column; font-size: 1.6rem; font-weight: 600; line-height: 1.2; gap: 8px; margin-top: 20px; } p.aboutPage__inner--ceotextProfile span { font-size: 0.9rem; font-weight: 400; color: #ccc; } /* aboutpage under */ section#aboutUnder { position: relative; background: var(--main-primary); padding: 120px 0; } section#aboutUnder:before { content: ""; width: 100%; height: 720px; background: url(https://wp.standage.co.jp/wp-content/uploads/2024/07/tokyo_.jpg) no-repeat; position: absolute; top: 0; background-size: cover; background-position-y: top; } .aboutUnder__inner { width: 100%; max-width: 1250px; margin: 0 auto; background: #FFF; box-shadow: -20px 2px 34px 0px rgba(0, 0, 0, 0.06); position: relative; padding: 100px 0; } .aboutUnder__inner:before { content: ""; width: 100%; margin-left: calc(50% - 50vw); position: absolute; left: 0; height: 100%; background: #fff; top: 0; pointer-events: none; } .aboutUnder__innerBlock { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 35px; position: relative; } h2.heading { font-size: 2rem; position: relative; font-weight: 600; letter-spacing: 2px; transition: 0.3s ease-in-out; padding-bottom: 30px; } h2.heading:after { content: ""; width: 100px; height: 1px; background: var(--main-primary); position: absolute; bottom: 0; left: 0; } dl.aboutUnder__inner--list { display: flex; flex-direction: column; gap: 45px; } .aboutUnder__inner--listRow { display: flex; justify-content: flex-start; gap: 60px; align-items: center; } .aboutUnder__inner--listRow dt { width: 140px; letter-spacing: 1.5px; font-size: 1.1rem; border-right: solid 1px #ddd; padding: 4px 0; } .aboutUnder__inner--listRow dd { letter-spacing: 1.5px; font-size: 1.1rem; width: calc(100% - 140px - 60px); line-height: 2; } /* member */ section#member { position: relative; } .member__inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 35px; position: relative; padding: 100px 0; } ul.member__inner--list { display: flex; justify-content: space-between; flex-wrap: wrap; position: relative; gap: 45px; } ul.member__inner--list li { width: 240px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; } ul.member__inner--list li { width: 240px; display: flex; flex-direction: column; gap: 7px; cursor: pointer; transition: 0.3s ease-in-out; } ul.member__inner--list li img { transition: 0.3s ease-in-out; } .member__inner--names { padding: 0 10px; display: flex; flex-direction: column; } .member__inner--names h3 { font-size: 1.3rem; letter-spacing: 1px; font-weight: 500; position: relative; transition: 0.3s ease-in-out; } .member__inner--names h3:before { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; opacity: 0.6; transition: 0.3s ease-in-out; font-size: 1.1rem; vertical-align: 1px; padding-right: 7px; } .member__inner--names p { color: #707070; font-size: 0.9rem; } ul.member__inner--list li:hover .member__inner--names h3 { color: var(--main-primary); } ul.member__inner--list li:hover > img { opacity: 0.8; } /* modal */ .modal { display: none; position: fixed; z-index: 8887; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.4); transition: all 1s ease-in-out; } .modal-container .img { background: #f1f1f1; margin-bottom: 15px; } .modal-container p { margin-bottom: 10px; } .modal-container p:last-child { margin-bottom: 0; } .modal-content { background: #FFF; padding: 30px 35px; width: 90%; max-width: 800px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); animation: show 0.6s linear 0s; filter: drop-shadow(0px 2px 6px #777); } .modal-top { display: inline-block; position: absolute; right: 10px; top: 15px; } .modal-close { color: #000; text-decoration: none; font-size: 1.5rem; line-height: 1; padding: 0 6px 2px; border: solid 1px #707070; transition: 0.3s ease-in-out; } span.modal-close:hover { background: rgb(0, 0, 0, 0.1); } .modal-close:hover, .modal-close:focus { text-decoration: none; cursor: pointer; } .modal-container { display: flex; justify-content: space-between; gap: 35px; } .modal-container img { height: fit-content; width: 240px; } .modal__rightText { display: flex; flex-direction: column; gap: 12px; } .modal__rightTextATop h4 { font-size: 1.4rem; letter-spacing: 2px; font-weight: 500; position: relative; transition: 0.3s ease-in-out; } .modal__rightTextATop p { color: #707070; font-size: 0.9rem; } .modal__rightTextAProfile { display: flex; flex-direction: column; gap: 12px; max-height: 300px; overflow-y: scroll; padding: 12px 20px; background: #f9f9f9; } .modal__rightTextAProfile p { line-height: 173%; font-size: 0.9rem; color: #222; margin: 0; } /* スクロールバー */ .modal__rightTextAProfile::-webkit-scrollbar { width: 10px; /* 横幅 */ } .modal__rightTextAProfile::-webkit-scrollbar-track { background: #ccc; /* トラックの背景 */ border-radius: 12px; /* トラックの丸み */ box-shadow: inset 0 0 1px #999; /* トラックの枠 */ } .modal__rightTextAProfile::-webkit-scrollbar-thumb { background: var(--main-primary); /* バーの色 */ border-radius: 12px; /* バーの丸み */ box-shadow: none; /* バーの枠 */ } @keyframes show{ from{ opacity: 0; } to{ opacity: 1; } } /* place */ section#corpPlace { position: relative; } .corpPlace__inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; gap: 35px; position: relative; padding: 40px 0 100px; } ul.corpPlace__inner--list { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; gap: 35px; } ul.corpPlace__inner--list li { width: calc(100% / 3 - 25px); display: flex; flex-direction: column; } ul.corpPlace__inner--list li h3 { padding: 12px 0 12px 25px; border-left: solid 3px var(--main-primary); font-size: 1.2rem; font-weight: 600; letter-spacing: 2px; } .corpPlace__inner--listBottom { padding: 4px 15px 12px 25px; border-left: solid 3px #eee; display: flex; flex-direction: column; gap: 5px; } p.address { line-height: 1.8; color: #222; } .phonefax { display: flex; justify-content: flex-start; align-items: center; gap: 20px; } .phonefax p { font-size: 0.9rem; color: #222; position: relative; } p.phoneNum:before { content: "\f879"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; opacity: 0.6; transition: 0.3s ease-in-out; font-size: 0.9rem; vertical-align: -1px; padding-right: 4px; } p.faxNum:before { content: "\f1ac"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; opacity: 0.6; transition: 0.3s ease-in-out; font-size: 0.9rem; vertical-align: -1px; padding-right: 3px; } a.watchMap { position: relative; background: #000; color: #fff; width: fit-content; padding: 6px 14px 8px; font-size: 0.9rem; letter-spacing: 1px; border-radius: 3px; overflow: hidden; margin-top: 6px; } a.watchMap:after { content: "\f2d2"; font-family: "Font Awesome 5 Free"; font-weight: 100; position: relative; opacity: 0.6; transition: 0.3s ease-in-out; font-size: 0.9rem; padding-left: 5px; } /* cta */ section.cta { background: var(--main-secondary); padding: 60px 0; position: relative; } .cta__inner { width: 100%; max-width: 1100px; margin: 0 auto; background: #FFF; box-shadow: -20px 2px 34px 0px rgba(0, 0, 0, 0.06); border-radius: 3px; position: relative; display: flex; flex-direction: column; align-items: center; padding: 70px 0 75px; gap: 30px; overflow: hidden; } .cta__inner:before { content: ""; width: 100%; height: 100%; background: url(/wp-content/themes/twenty-twenty-one-child/asset/img/bluemap_.svg) no-repeat; position: absolute; top: 0; left: 0; background-size: cover; pointer-events: none; } .cta__inner--text { display: flex; flex-direction: column; gap: 10px; text-align: center; position: relative; } .cta__inner--text h2 { font-size: 2.2rem; position: relative; font-weight: 600; letter-spacing: 3px; } .cta__inner--text p { font-size: 1.1rem; } ul.cta__inner--btn { display: flex; justify-content: center; align-items: center; gap: 100px; } ul.cta__inner--btn li a { padding: 17px 35px 20px; min-width: 260px; font-size: 1.1rem; } /* breadcrumb */ nav#breadcrumb { background: #474747; position: relative; } nav#breadcrumb ul { width: 100%; max-width: 1250px; margin: 0 auto; display: flex; justify-content: flex-start; gap: 40px; } nav#breadcrumb ul li { color: rgb(255, 255, 255, .6); position: relative; font-size: 0.9rem; padding: 10px 0; } span.breadHome:before { content: "\f3c5"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: relative; opacity: 1; transition: 0.3s ease-in-out; font-size: 0.9rem; vertical-align: 0px; padding-right: 4px; } nav#breadcrumb ul li:after { font-size: 1rem; position: absolute; top: 54%; right: -25px; transform: translateY(-50%); opacity: 0.5; content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; } nav#breadcrumb ul li:last-child::after { content: none; } nav#breadcrumb ul li a { color: rgb(255, 255, 255, 0.8); } nav#breadcrumb ul li a:hover { color: rgb(255, 255, 255, 1); } /* service */ body.page-id-194 ul.header__inner--rightText li a, body.page-id-194 ul.header__inner--rightText li span { color: #fff; } section#serviceHead { position: relative; background: #000; } .serviceHead__inner { width: 100%; max-width: 1250px; margin: 0 auto; height: 400px; display: flex; position: relative; flex-direction: column; justify-content: center; } .serviceHead__inner h1 { font-size: 2rem; position: relative; font-weight: 600; letter-spacing: 2px; color: #fff; z-index: 1; animation: fadeHeader 2s ease 0s 1 normal; } .serviceHead__inner p { font-family: Roboto; font-size: 10rem; font-style: italic; font-weight: 800; line-height: normal; letter-spacing: 2px; z-index: 1; opacity: 0.12; color: #fff; position: absolute; left: 0; top: 50%; transform: translateY(-54%); } .serviceBlock__inner { display: flex; flex-direction: column; gap: 60px; padding: 80px 0 120px; background: #f9f9f9; } /* news single */ body.single.single-post { background: #F9F9F9; } section#newsSingleHeader { background: #000; background-size: cover; width: 100%; height: 340px; margin-top: 80px; position: relative; } section#newsPostPage__inner { margin: -240px 0 60px; background: #F9F9F9; } .newsPostPage__inner--block { width: 100%; max-width: 900px; margin: 0 auto; display: flex; position: relative; padding: 35px 45px; flex-direction: column; border: 1px solid #DDD; background: #FFF; border-radius: 3px; } .newsPostPage__inner--block .newsRowdate p { color: var(--main-secondary); font-size: 1.2rem; font-weight: 600; } .newsPostPage__inner--blockHeading { margin-bottom: 28px; padding-bottom: 28px; border-bottom: solid 1px #ddd; } .newsPostPage__inner--blockHeading h2 { line-height: 1.65; font-size: 2rem; position: relative; font-weight: 600; letter-spacing: 2px; } .newsPostPage__inner--blockHeadingImg { width: 100%; height: auto; margin-top: 20px; } .newsPostPage__inner--blockHeadingImg img { width: 100%; vertical-align: bottom; } .newsPostPage__inner--blockHeadingImg img { height: auto; } .newsPostPage__inner--blockInner p { margin-bottom: 20px; word-break: break-all; } .newsPostPage__inner--blockInner p img { vertical-align: bottom; margin: 0 auto; display: block; min-width: 240px; } .newsPostPage__inner--blockInner p:last-child { margin-bottom: 0; } .newsPostPage__inner--blockInner a { color: var(--main-primary); } .newsPostPage__inner--blockInner a:hover { opacity: 0.7; } p.semiarDate span.date { font-size: 1.2rem; } /* navigation */ .navigation { width: 100%; max-width: 900px; margin: 0 auto 60px; position: relative; } .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 { color: var(--main-primary); } 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; } /* news list */ /* newws */ body.page-id-1214 ul.header__inner--rightText li a, body.page-id-1214 ul.header__inner--rightText li span { color: #fff; } section#news { position: relative; padding: 100px 0 30px; } .news__inner { width: 100%; max-width: 900px; margin: 0 auto; background: #fff; display: flex; flex-direction: column; gap: 40px; } ul.news__inner--list { display: flex; flex-direction: column; gap: 0; width: 100%; margin: 0 auto; } ul.news__inner--list li a { padding: 35px 30px; display: flex; flex-direction: column; border-top: solid 1px #ddd; gap: 2px; position: relative; } ul.news__inner--list li:last-child a { border-bottom: solid 1px #ddd; } ul.news__inner--list li a:hover { background: rgb(249,249,249); background: radial-gradient(circle, rgba(249,249,249,1) 0%, rgba(255,255,255,1) 100%); } span.date { font-size: 0.9rem; letter-spacing: 2px; font-weight: 600; font-family: 'SansSerifFLF', sans-serif; color: var(--main-secondary); } ul.news__inner--list li a h2 { letter-spacing: 1.1px; color: #000; font-size: 1.2rem; font-weight: 500; line-height: 2; padding-right: 30px; } ul.news__inner--list li a:after { content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 1.1rem; transition: 0.3s ease-in-out; opacity: 0.4; } ul.news__inner--list li a:hover:after { right: 15px; opacity: 0.7; } .newsRowdate p.date { font-family: Roboto; font-style: italic; color: var(--main-secondary); font-size: 1.2rem; font-weight: 600; } /* 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-primary); color: #fff; } ul.page-numbers li a:hover { background: var(--main-primary); color: #fff; opacity: 0.6; } /* privacy */ section#serviceHead.primary { background: var(--main-primary); margin-top: 80px; } section#serviceHead.primary .serviceHead__inner { height: 300px; } section#content { background: #f9f9f9; padding: 0 0 80px; } .content__inner { width: 100%; max-width: 900px; margin: 0 auto; display: flex; position: relative; padding: 35px 45px; flex-direction: column; border: 1px solid #DDD; background: #FFF; border-radius: 3px; margin-top: -60px; } .content__inner h2 { font-size: 1.5rem; font-weight: 600; margin-top: 35px; margin-bottom: 15px; } /* login */ body.page-id-5512 ul.header__inner--rightText li a, body.page-id-5512 ul.header__inner--rightText li span { color: #fff; } ul.serviceLogin { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; } ul.serviceLogin li { border-radius: 5px; background: #fff; border: solid 1px #ddd; display: flex; align-items: center; flex-direction: column; gap: 15px; width: 500px; padding: 50px 0; } a.primaryBtn.priBlank { padding: 17px 35px 20px; min-width: 260px; font-size: 1.1rem; } a.primaryBtn.priBlank:after { content: "\f2d2"; font-family: "Font Awesome 5 Free"; font-weight: 100; font-size: 1rem; } ul.serviceLogin li h2 { font-size: 1.3rem; font-weight: 600; } /* form */ section#form { padding: 80px 0 100px; } .form__inner { width: 100%; max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-start; } .form__innerleft { width: 40%; } .form__innerleft .case__innerHeading { flex-direction: column; gap: 25px; align-items: baseline; display: flex; } ul.form__innerlist--text { display: flex; flex-direction: column; gap: 22px; background: #f9f9f9; padding: 25px; border-radius: 3px; width: 100%; } .case__innerHeading p { font-size: 1.1rem; } ul.form__innerlist--text li { position: relative; padding-left: 38px; font-size: 1.1rem; } ul.form__innerlist--text li:before { left: 8px; content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 52%; transform: translateY(-50%); color: var(--main-primary); } .form__innerleft--img { max-width: 450px; text-align: center; border: solid 1px #ccc; padding: 35px 40px; width: 100%; border-radius: 3px; background: #f9f9f9; } .form__innerleft--img img { filter: drop-shadow(0px 1px 8px #ddd); } .form__innerright { border-radius: 5px; width: 56%; padding: 35px 45px; position: relative; background: #fff; filter: drop-shadow(-4px 2px 12px rgba(0, 0, 0, 0.06)); } p.form__innerright--text { margin-bottom: 30px; text-align: center; } p.tyuusya { font-size: 0.8rem; color: #707070; letter-spacing: 1px; } /* form size */ .form__innerright--form.contactFormRe iframe { height: 680px; } .form__innerright--form iframe { min-height: 560px; } /* thanks */ section#thanks { position: relative; } .thanks__inner { width: 100%; max-width: 900px; margin: 0 auto; padding: 140px 0 100px; display: flex; flex-direction: column; gap: 18px; text-align: center; } .thanks__inner h1 { font-family: Roboto; font-size: 10rem; font-style: italic; font-weight: 800; line-height: normal; letter-spacing: 2px; z-index: 1; position: relative; margin: 0 auto; color: var(--main-primary); } .thanks__inner a.primaryBtn { padding: 17px 35px 20px; min-width: 260px; font-size: 1.1rem; width: fit-content; margin: 25px auto 0; } /* seminar */ /* main */ main#seminarPostPage { position: relative; display: block; padding-top: 80px; padding-bottom: 80px; margin-top: 80px; } main#seminarPostPage:after { content: ""; width: 100%; height: 280px; background: var(--main-primary); position: absolute; top: 0; left: 0; background-size: cover; pointer-events: none; } .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: 700px; 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: 5px; margin-top: -20px; margin-bottom: -26px; } 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-secondary); line-height: 1.5; font-weight: 600; } 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-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: 10px; } .seminarOverViewText p br { display: block; content: ""; height: 10px; } .seminarHeading h2, .seminar__left--pickup h3 { display: inline-block; letter-spacing: 2px; font-size: 1.5rem; font-weight: 600; position: relative; color: var(--main-primary); padding: 9px 30px 12px; border: solid 2px var(--main-primary); border-radius: 5px; background: rgb(248 149 29 / 14%); width: fit-content; } .seminarOverViewText { display: flex; flex-direction: column; gap: 10px; } .seminarOverViewText p strong { font-weight: 600; color: var(--main-primary); } /* pickup */ .seminar__left--pickup { display: flex; flex-direction: column; gap: 30px; } .pickupList { display: flex; flex-direction: column; gap: 6px; padding: 25px 35px; background: #f9f9f9; border-radius: 8px; } .pickupList p { position: relative; padding-left: 30px; font-weight: 600; letter-spacing: 0.8px; font-size: 1.1rem; } .pickupList p:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--main-primary); } .pickupList.number { counter-reset: li; gap: 16px; } .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: 30px; } 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; flex-wrap: wrap; } ul.speakers li img { border-radius: 8px; width: 200px; height: 200px; object-fit: cover; object-position: center; } .speakers__right { display: flex; flex-direction: column; gap: 15px; width: calc(100% - 200px - 30px); } .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 { font-size: 0.9rem; color: #707070; line-height: 1.87; letter-spacing: 0.8px; } .semiar__left--detail { display: flex; flex-direction: column; gap: 30px; } 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-primary); letter-spacing: 0.8px; font-weight: 600; font-size: 1.1rem; } .detailInner dd { letter-spacing: 0.64px; font-weight: 400; width: calc(100% - 120px); display: block; line-height: 1.8; font-size: 1.1rem; } dl.seminarDetail .detailInner:last-child { border-bottom: solid 1px #ddd; } p.semiarDetailMEMO { font-size: 0.9rem; color: #707070; } .seminarOverViewText ul { display: flex; flex-direction: column; gap: 6px; padding: 25px 35px; background: #f9f9f9; border-radius: 8px; margin: 20px 0 10px; } .seminarOverViewText ul li { position: relative; padding-left: 30px; font-weight: 600; letter-spacing: 0.8px; font-size: 1.1rem; line-height: 2.3; } .seminarOverViewText ul li:before { content: "\f00c"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 0; top: 2px; color: var(--main-primary); } /* sidebar */ aside#sideForm { width: 470px; background: #f9f9f9; z-index: 1; box-shadow: 0px 1px 20px 0px rgba(58, 52, 255, 0.10); border-radius: 5px; position: sticky; top: 40px; overflow: hidden; } .semiar__right { padding: 25px 30px; display: flex; flex-direction: column; gap: 20px; } .semiar__right.archiveVideo { padding: 25px 0px 0; } .semiar__right.archiveVideo .hbspt-form { height: 500px; overflow: scroll; padding: 20px 30px; background: #fff; } .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; } p.seminar__article--hosoku.seminarEnd { min-height: 150px; display: flex; justify-content: center; align-items: center; font-size: 1.3rem; letter-spacing: 2px; font-weight: 600; color: #313131; } .semiar__right p.seminar__article--hosoku.seminarEnd { font-size: 1rem; width: 100%; display: flex; justify-content: center; padding-bottom: 25px; } .seminar__right--heading { display: flex; flex-direction: column; padding: 10px 20px 8px; text-align: center; border-bottom: solid 1px #ddd; } .seminar__right--heading h3 { font-weight: 600; font-size: 1.3rem; } p.seminar__article--hosokuBottom { font-size: 0.7rem; color: #707070; text-align: center; } p.seminar__article--hosokuBottom a { text-decoration: underline; } .iframeInner { max-height: 400px; overflow-y: scroll; padding: 20px 15px; background: #fff; } section#news .seminars__inner { padding-bottom: 80px; } ul.seminars__inner--card .seminarDate { color: var(--main-secondary); font-weight: 600; line-height: 1.2; } /* iframe scrollbar */ /* スクロールバー */ .iframeInner::-webkit-scrollbar { width: 10px; /* 横幅 */ } .iframeInner::-webkit-scrollbar-track { background: #ccc; /* トラックの背景 */ border-radius: 12px; /* トラックの丸み */ box-shadow: inset 0 0 1px #999; /* トラックの枠 */ } .iframeInner::-webkit-scrollbar-thumb { background: var(--main-primary); /* バーの色 */ border-radius: 12px; /* バーの丸み */ box-shadow: none; /* バーの枠 */ } /* 経営 */ ul.member__inner--list.first:after { content: ""; width: 240px; } /* 20240905 */ .newsPostPage__inner--blockInner p b { font-weight: 600; } /* 20240926 */ section#remv { height: 100svh; position: relative; overflow: hidden; max-height: 780px; } .remv__inner--title { position: absolute; width: 100%; max-width: 1200px; margin: 0 auto; z-index: 1; transform: translateX(-50%); left: 50%; height: 740px; display: inline-flex; justify-content: center; flex-direction: column; gap: 20px; } .remv__inner--title p { font-size: 4.1rem; line-height: 1; font-weight: 700; letter-spacing: 0.5rem; color: #fff; width: fit-content; opacity: 0; /* 初期状態では透明 */ transform: translateX(-100px); /* 左に少し移動した状態から開始 */ transition: opacity 1.5s ease-in-out, transform 1.5s ease-in-out; } .remv__inner--title p span { background: var(--main-primary); color: #fff; line-height: 1; padding: 10px 36px 18px; display: inline-block; } p.remv__inner--titleSecond { margin-left: 120px; } p.remv__inner--titleSecond span { padding-right: 0; } .remv__inner--img { position: relative; /* 相対位置 */ margin-top: 10px; /* タイトルとの間隔を調整 */ } .remv__inner--img img { opacity: 0; position: absolute; transition: opacity 2s ease-in-out, transform 6s ease-in-out; transform: scale(1); } .remv__inner--img li { position: relative; } .recruit .recruit-content { margin-top: calc(-120 / 1600* 100vw); } .remv__inner--title p.fade-in-slide-in { opacity: 1; transform: translateX(0); } /* jirei */ main#jireiPost { padding-bottom: 120px; } section#jireiPost__header { width: 100%; margin-top: 80px; position: relative; padding-top: 80px; } section#jireiPost__header:before { content: ""; width: 100%; height: 340px; position: absolute; top: 0; background: linear-gradient(90deg, #F8951D 0%, #DC7800 100%); } .jireiPost__header--img { width: 100%; max-width: 1250px; margin: 0 auto; border-radius: 10px; overflow: hidden; position: relative; } .jireiPost__header--img img { object-fit: cover; object-position: center; height: 500px; width: 100%; vertical-align: bottom; } section#jireiPost__body { position: relative; display: flex; justify-content: space-between; width: 100%; max-width: 1250px; align-items: flex-start; margin: -100px auto 0; gap: 60px; flex-wrap: wrap; } .jireiPost__body--left { width: 800px; background: #fff; padding: 45px 50px; display: flex; flex-direction: column; gap: 30px; border-radius: 6px; border: 1px solid #DDD; } .jireiPost__body--leftTop { display: flex; flex-direction: column; gap: 40px; } .jireiPost__body--leftTop h1 { font-size: 2rem; font-weight: 600; letter-spacing: 1.5px; line-height: 1.63; display: flex; flex-direction: column; gap: 6px; } .jireiPost__body--leftTop h1 span { font-size: 0.9rem; font-weight: 400; color: #aaa; } .jireiPost__body--leftTop p br { content: ""; display: block; height: 16px; } .jireiPost__body--leftMiddle { display: flex; justify-content: space-between; gap: 30px; border-bottom: solid 1px #ddd; padding-bottom: 45px; } .jireiPost__body--leftMiddleBox { border-radius: 6px; border: 1px solid #DDD; background: #fff; overflow: hidden; width: 47%; } .jireiPost__body--leftMiddleBox h2 { background: #707070; text-align: center; font-size: 1.4rem; font-weight: 600; letter-spacing: 1.5px; padding: 10px 0 14px; color: #fff; } ul.textBoxes { display: flex; flex-direction: column; padding: 20px 25px 25px 45px; list-style: disc; gap: 10px; } ul.textBoxes li { font-size: 1rem; line-height: 1.73; color: #222; } .jireiPost__body--leftMiddleBox.after h2 { background: var(--main-primary); } /* content */ .jireiPost__body--leftContentInner { display: flex; flex-direction: column; gap: 10px; } .jireiPost__body--leftContentInner h2 { font-size: 1.8rem; font-weight: 600; margin: 40px 0 10px; color: var(--main-secondary); line-height: 1.63; } .jireiPost__body--leftContentInner h2:first-child { margin-top: 0; } .jireiPost__body--leftContentInner img { margin-top: 15px; border-radius: 6px; } .jireiPost__body--leftTop p, .jireiPost__body--leftContentInner p { letter-spacing: 1.2px; color: #313131; } aside.jireiPost__body--right { width: 100%; max-width: 370px; display: flex; flex-direction: column; padding-top: 120px; position: sticky; top: 0; gap: 20px; } .jireiPost__body--rightLogo { display: flex; flex-direction: column; gap: 8px; align-items: center; } .jireiPost__body--rightLogo h3 { font-size: 0.8rem; letter-spacing: 1px; font-weight: 600; color: #222; } .jireiPost__body--rightLogo h3 span { font-weight: 400; padding-left: 4px; color: #707070; } .jireiPost__body--rightLogo img { width: auto; max-width: 260px; max-height: 90px; } dl.jireiPost__body--rightInfo { display: flex; flex-direction: column; gap: 15px; } .jireiPost__body--rightInfoRaw { display: flex; flex-direction: column; gap: 3px; } .jireiPost__body--rightInfoRaw dt { font-size: 1.3rem; font-weight: 600; letter-spacing: 2px; } .jireiPost__body--rightInfoRaw dd { color: #707070; line-height: 1.83; } ul.purpose-terms, ul.implementation-terms { display: flex; flex-direction: row; gap: 12px; justify-content: flex-start; align-items: center; margin-top: 5px; flex-wrap: wrap; } ul.purpose-terms li a, ul.implementation-terms li a { background: #f9f9f9; font-size: 0.8rem; position: relative; padding: 4px 12px 6px; border-radius: 9999px; box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.12); display: flex; justify-content: center; } ul.purpose-terms li a:before, ul.implementation-terms li a:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.4; padding-right: 4px; position: relative; } ul.implementation-terms li a { background: var(--main-primary); color: #fff; } ul.purpose-terms li a:hover, ul.implementation-terms li a:hover { opacity: 0.6; } /* password */ p.post-password-message { background: #aaa; color: #fff; padding: 5px 20px 8px; border-radius: 3px; position: relative; } p.post-password-message:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -15px; border: 15px solid transparent; border-top: 15px solid #aaa; } form.post-password-form { margin: 25px auto; display: flex; align-items: center; } form.post-password-form label { margin-right: 12px; color: #707070; } form.post-password-form input { background: #f9f9f9; padding: 12px 20px; } form.post-password-form input.post-password-form__submit { background: #000; color: #fff; font-weight: 600; letter-spacing: 1.7px; } /* jirei card */ section#jireiCard { position: relative; padding: 80px 0 80px; } .jireiCard__inner { width: 100%; max-width: 1100px; margin: 0 auto; position: relative; z-index: 1; gap: 60px; display: flex; flex-direction: column; } ul.jireiCardList { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px 30px; } li.jireiCardList__inner { width: calc(100% / 3 - 30px); display: flex; flex-direction: column; position: relative; } li.jireiCardList__inner a { display: flex; flex-direction: column; border-radius: 5px; 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; overflow: hidden; height: 100%; } li.jireiCardList__inner 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); } .jireiCardList__inner--img { position: relative; width: 100%; } .jireiCardList__inner--imgTag { font-size: 0.7rem; padding: 2px 10px 4px; border-radius: 9999px; display: inline-flex; justify-content: center; position: absolute; top: 5px; left: 7px; letter-spacing: 1px; background: var(--main-primary); color: #fff; } .jireiCardList__inner--imgTag:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.6; position: relative; padding-top: 4px; padding-right: 3px; } img.jireiCardEyecatch { width: 100%; height: 190px; object-fit: cover; vertical-align: bottom; } .jireiCardList__inner--imgLogo { position: absolute; top: 165px; right: 0; background: #fff; padding: 8px 10px; width: 120px; display: flex; justify-content: center; align-items: center; } .jireiCardList__inner--imgLogo img { max-height: 35px; } .jireiCardList__inner--corp { display: flex; flex-direction: column; gap: 3px; padding: 15px 22px; flex-grow: 1; } .jireiCardList__inner--corp p { font-size: 0.8rem; color: #707070; line-height: 1.5; } .jireiCardList__inner--corp h3 { font-size: 0.9rem; font-weight: 600; } p.jireiCardList__inner--title { padding: 0 22px 20px; overflow: hidden; display: block; -webkit-box-orient: vertical; -webkit-line-clamp: 3; font-size: 1.2rem; font-weight: 500; line-height: 1.65; flex-grow: 2; } .serviceHead__inner.jireiHead { flex-direction: column-reverse; gap: 5px; } p.jirei_titleBg { font-size: 1.2rem; position: relative; top: auto; transform: none; opacity: 1; } .serviceHead__inner h1 i { opacity: 0.4; } /* jirei top */ /* jirei top */ section#jireiCarousel { margin-top: 80px; background: linear-gradient(90deg, #F8951D 0%, #DC7800 100%); } .jireiSwiper { width: 100%; position: relative; margin-left: auto; margin-right: auto; position: relative; overflow: hidden; list-style: none; z-index: 1; border-radius: 8px; } .jireiCarousel__inner { padding: 60px 0; position: relative; width: 100%; height: 100%; } .jireiCard { overflow: hidden; display: flex; align-items: center; justify-content: space-between; } .jireiCardContent { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; width: 100%; max-width: 1100px; margin: 0 auto; background: #fff; padding: 45px 50px 40px; border-radius: 8px; box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.12), 0 2px 3px 0 rgba(0, 0, 0, 0.22); } .jireiCardContent__left { width: 48%; display: flex; flex-direction: column; gap: 6px; } .jireiCardContent__left h1 { font-size: 1.8rem; font-weight: 600; letter-spacing: 1.5px; line-height: 1.53; margin-bottom: 12px; } .jireiCardContent__left p { display: flex; flex-direction: column; gap: 0px; flex-grow: 1; font-size: 1rem; font-weight: 600; } .jireiCardContent__left p span { color: #707070; font-size: 0.8rem; font-weight: 400; line-height: 1; } .jireiCardContent__left a.primaryBtn { width: fit-content; min-width: 240px; } .jireiCardContent__right { width: 45%; display: flex; flex-direction: column; gap: 12px; } .jireiCardContent__right img { width: 100%; height: 320px; object-fit: cover; border-radius: 8px; vertical-align: bottom; } li.tagItem { background: #f9f9f9; font-size: 0.8rem; position: relative; padding: 4px 12px 6px; border-radius: 9999px; display: flex; justify-content: center; color: #707070; } li.tagItem:before { content: "\f02b"; font-family: "Font Awesome 5 Free"; font-weight: 900; opacity: 0.4; padding-right: 4px; position: relative; display: flex; justify-content: center; align-items: center; transform: translateY(2px); } /* swiper */ .swiper-pagination.jirei { bottom: 17px; } .swiper-button-prev.jirei, .swiper-button-next.jirei { color: var(--main-primary); width: 50px; height: 50px; background: #fff; border-radius: 9999px; } .swiper-button-prev.jirei { left: 25px; } .swiper-button-next.jirei { right: 25px; } .swiper-button-next.jirei:after, .swiper-button-prev.jirei:after { font-size: 1.2rem; } .swiper-button-prev.jirei:after { transform: translateX(-1px); } .swiper-button-next.jirei:after { transform: translateX(2px); } .swiper-pagination.jirei span { width: 16px; height: 16px; transition: 0.3s ease-in-out; } .swiper-pagination.jirei span.swiper-pagination-bullet.swiper-pagination-bullet-active { background: #fff; width: 40px; border-radius: 20px; } .jireiPost__body--leftContentInner figure { width: 100% !important; box-sizing: border-box; } @media screen and (min-width:1600px) { /*　画面サイズが1600px以上はここを読み込む　*/ section#aboutPage:before { background-size: contain; } } /* recaaptha */ .grecaptcha-badge { z-index: 9; } @media only screen and (min-width: 1280px) and (max-width: 1440px) { /* （ここに1280〜1440限定スタイルを記述） */ header#header.resize .header__inner { padding-top: 2px; padding-bottom: 10px; } .header__inner--right { flex-direction: column; gap: 0; align-items: flex-end; } ul.header__inner--rightText li a, ul.header__inner--rightText li span { padding: 8px 5px; padding-right: 20px; } li.hasChild:hover .hasChild__inner { z-index: 1; } } @media screen and (max-width: 1280px) { /* （ここに1280以下スタイルを記述） */ /* header */ .headeroverlay { width: 100%; height: 100vh; position: fixed; left: 0; top: 0; background-color: rgba(0,0,0,.3); z-index: 190; opacity: 0; visibility: hidden; transition: all 200ms ease-in; } nav.navLinks { width: 300px; height: 100vh; background-color: #222; right: -300px; top: 0; position: fixed; padding: 20px 0; transition: all 200ms ease-in-out; z-index: 999; } nav.navLinks .parentMenu { border: none; padding: 0; flex-direction: column; } .toggle { position: absolute; right: 100%; width: 50px; height: 50px; color: #313131; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; top: 15px; } 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); } .navLinks ul li { display: block; list-style: none; margin: 0; padding: 0; width: 100%; padding-left: 20px; } .navLinks .parentMenu li a { padding: 10px 20px; display: block; color: #313131; font-size: 1rem; text-decoration: none; transition: all 200ms ease; line-height: 1; display: block; } .navLinks ul li a:hover { background-color: rgb(255, 255, 255, 0.1); } /* Show Nav */ .show-nav nav.navLinks { right: 0; box-shadow: 0 2px 4px rgba(0,0,0,.6); } .show-nav .headeroverlay { opacity: 1; visibility: visible; } /* SUBMENU */ nav.navLinks .parentMenu li ul.navSubMenu { display: block; position: relative; } /* スクロールで可変 */ div#header.resize .headerInner { height: 35px; } div#header.resize .toggle { height: 35px; } div#header.resize .toggle .toggler, div#header.resize .toggle .toggler:before, div#header.resize .toggle .toggler:after { height: 2px; width: 18px; } div#header.resize span.toggler:before{ bottom: 6px; } div#header.resize span.toggler:after { top: 6px; } div#header.resize span.deleteclass::before { bottom: 0; } div#header.resize span.deleteclass::after { top: 0; } /* header inner */ .header__inner--right { display: flex; flex-direction: column; } ul.header__inner--rightText { flex-direction: column; align-items: flex-start; width: 100%; gap: 0; } ul.header__inner--rightText li a, ul.header__inner--rightText li span { padding: 14px 20px; font-size: 1.1rem; padding-left: 25px; display: block; width: 100%; color: #fff !important; } ul.header__inner--rightText li:after { content: none; } ul.header__inner--rightText li a:before, ul.header__inner--rightText li span:before { content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; left: 5px; top: 52%; transform: translateY(-50%); opacity: 0.4; color: #fff; } .header__inner--btn { flex-direction: column; } .header__inner--btn a { width: 240px; } /* */ header#header.resize ul.header__inner--rightText li a { color: #fff; } /* header accordion */ .hasChild__inner { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } /* アコーディオンメニューが開いている状態 */ .hasChild.open .hasChild__inner { max-height: 1000px; /* 十分に大きな値を設定（必要に応じて調整可能） */ } .hasChild__inner { padding: 0; position: relative; opacity: 1; pointer-events: auto; display: flex; flex-direction: column; background: none; padding-left: 27px; } ul.header__inner--rightText li.hasChild .hasChild__inner a { padding-left: 30px; color: #fff; font-size: 1rem; width: 100%; display: block; } li.hasChild.open span { color: var(--main-primary); } li.hasChild span:after { content: "\f055"; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; right: 20px; top: 49%; transform: translateY(-50%); opacity: 0.8; color: #fff; font-size: 0.9rem; } li.hasChild.open span:after { content: "\f056"; } ul.header__inner--rightText li.hasChild.open span, ul.header__inner--rightText li.hasChild.open span:after { color: var(--main-primary); } .spNone { display: block; } } @media screen and (max-width: 1250px) { /* （ここに1250以下スタイルを記述） */ /* mv */ .mv__inner { padding-left: 4%; padding-right: 4%; } .mvunder__flex--left, .mvunder__flex--right { width: 4%; } .mvunder__inner { width: 92%; } .services__inner { padding-left: 4%; padding-right: 4%; } /* footer */ .footer__inner { padding-left: 4%; padding-right: 4%; } .footer__inner--right { width: 65%; } /* about */ .aboutPage__inner { padding-left: 4%; padding-right: 4%; } .aboutUnder__inner { padding-left: 4%; padding-right: 4%; } /* breadcrumb */ nav#breadcrumb ul { padding-left: 4%; padding-right: 4%; white-space: nowrap; overflow-x: scroll; } /* service */ .serviceHead__inner { padding-left: 4%; padding-right: 4%; } .seminarPostPage__inner { padding-left: 4%; padding-right: 4%; } section.semiar__left { width: 55%; } /* recruit 0925 */ .remv__inner--img img { object-fit: cover; height: 740px; width: 100%; object-position: bottom; } /* jirei */ .jireiPost__header--img { padding-left: 4%; padding-right: 4%; } section#jireiPost__body { padding-left: 4%; padding-right: 4%; } .jireiPost__body--left { width: 62%; } aside.jireiPost__body--right { width: calc(100% - 60px - 62%); } } @media screen and (max-width: 1100px) { /* （ここに1100以下スタイルを記述） */ .mv__inner--left h1 { font-size: 4.4rem; } .mv__philosophy p { font-size: 10rem; } section#services .mvunder__visionText { top: 0.9%; } .mvunder__visionText p { font-size: 12rem; } section#seminartopHead .mvunder__visionText { top: 23px; } section#seminartopHead .mvunder__visionText p { font-size: 12rem; } /* service */ ul.digitradList { gap: 80px; } ul.digitradList li { flex-direction: column; } ul.digitradList li img { position: relative; } ul.digitradList li a.linkCard { margin-top: -15px; } .seminars__inner { padding-left: 4%; padding-right: 4%; } .seminartopHead__inner { padding-left: 4%; padding-right: 4%; } ul.seminars__inner--card li { width: calc(100% / 2 - 30px); } /* footer */ .footer__inner { flex-direction: column; align-items: center; } .footer__inner--left { text-align: center; } .footer__inner--right { width: 100%; } .footer__inner--rightBottom { justify-content: center; } .footer__inner--bottom { flex-direction: column-reverse; gap: 25px; } ul.footer__inner--rightTop { justify-content: center; } /* aboutpage */ .aboutPage__inner--ceotext { width: 55%; } .member__inner { padding-left: 4%; padding-right: 4%; } ul.member__inner--list { gap: 40px; justify-content: center; } .corpPlace__inner { padding-left: 4%; padding-right: 4%; } section.cta { padding-left: 4%; padding-right: 4%; } .serviceBlock__inner { padding-left: 4%; padding-right: 4%; } .resolution__step--img:after { width: 140px; height: 140px; } .seminarPostPage__inner { flex-direction: column; gap: 60px; } section.semiar__left, aside#sideForm { width: 100%; max-width: none; } .iframeInner { max-height: none; overflow: auto; } /* form */ .form__inner { padding-left: 4%; padding-right: 4%; flex-direction: column; gap: 40px; } .form__innerleft, .form__innerright { width: 100%; } .form__innerleft--img { margin: 0 auto; } .seminar__right--heading { background: #000; color: #fff; } /* jirei */ .jireiCard__inner { padding-left: 4%; padding-right: 4%; } .swiper-button-prev.jirei, .swiper-button-next.jirei { display: none; } .jireiCarousel__inner { padding-left: 4%; padding-right: 4%; } } @media screen and (max-width: 900px) { /* （ここに900以下スタイルを記述） */ section#content { padding-left: 4%; padding-right: 4%; } .aboutPage__inner { gap: 100px; } .aboutPage__inner--message p { font-size: 2.7rem; } .aboutPage__inner--ceo { flex-direction: column; gap: 40px; } .aboutPage__inner--ceotext { width: 100%; } .news__inner { padding-left: 4%; padding-right: 4%; } section#newsPostPage__inner { padding-left: 4%; padding-right: 4%; } .nav-link-container { padding-left: 4%; padding-right: 4%; } .footer__inner--rightBottom { flex-direction: column; gap: 40px; } ul.footerLinks { width: fit-content; margin: 0 auto; } ul.footer__inner--rightTop li { text-align: center; } .thanks__inner { padding-left: 4%; padding-right: 4%; } /* jirei */ main#jireiPost { background: #f9f9f9; display: flex; flex-direction: column; gap: 30px; padding-bottom: 60px; } section#jireiPost__body { flex-direction: column-reverse; margin-top: 0px; gap: 30px; } .jireiPost__header--img img { border-radius: 6px; } .jireiPost__body--left, aside.jireiPost__body--right { width: 100%; } aside.jireiPost__body--right { padding: 0; position: relative; margin: 0 auto; max-width: none; background: #fff; padding: 30px 35px; border-radius: 6px; border: 1px solid #DDD; } .jireiPost__body--left { padding: 30px 35px; } li.jireiCardList__inner { width: calc(100% / 2 - 30px); } /* jirei */ .jireiCardContent { padding: 20px 25px; flex-direction: column-reverse; gap: 30px; } .jireiCardContent__left, .jireiCardContent__right { width: 100%; } .jireiCardContent__left a.primaryBtn { margin: 0 auto; } } @media screen and (max-width: 767px) { /* （ここにモバイル用スタイルを記述） */ p { line-height: 2; } .mvunder__inner--text p { font-size: 1rem; line-height: 2; } .mv__video, .mv__inner { height: 800px; } .mv__inner--left { transform: translateY(-60px); gap: 10px; } .mv__inner--left h1 { font-size: 3rem; } .mv__inner--left h1 br { display: none; } p.mvEng { line-height: 1.5; } .mv__philosophy p { font-size: 4rem; } .mv__inner--news { width: 90%; right: 50%; transform: translateX(50%); } a.newsRow { padding: 20px 30px 18px 20px; } a.newsRow:after { right: 20px; } .mv__inner--news p.title { font-size: 1rem; } .mvunder__visionText p { font-size: 6.1rem; } .mvunder__inner { padding: 80px 0; } .mvunder__inner:before { top: 0; height: 80px; } .mvunder__inner:after { height: 80px; } /* step */ ul.resolution__step { gap: 25px; } ul.resolution__step li { width: calc(100% - 4%); margin: 0 auto; } ul.resolution__step li:before { content: ""; position: absolute; bottom: -34px; left: 50%; margin-left: -18px; border: 18px solid transparent; border-top: 18px solid #ffffff; top: auto; } p.resolution__bottom--Text { text-align: left; font-size: 1.3rem; line-height: 1.6; } p.resolution__bottom--Text br { display: none; } .services__inner--marunageInner { padding: 20px 25px; } .services__inner--digitrad p { text-align: left; } .services__inner--digitrad p br { display: none; } section#services { padding-bottom: 80px; } section#seminartopHead { padding-top: 95px; } section#seminartopHead .mvunder__visionText p { font-size: 5rem; } .seminars__inner { gap: 40px; } .seminartopHead__inner h2 br { display: none; } ul.seminars__inner--card li { width: 100%; } section#recruit { background-position: center; } .recruit__inner { padding-left: 4%; padding-right: 4%; } .recruit__inner--middle p { text-align: left; } .recruit__inner--middle p br { display: none; } .recruit__inner--heading h2 span { font-size: 5rem; } /* footer */ .footer__inner { gap: 25px; } ul.footer__inner--rightTop { flex-direction: column; } ul.footer__inner--rightTop li { width: fit-content; } ul.footer__inner--rightTop li a { width: max-content; } ul.outerLinks { flex-direction: column; gap: 10px; } .services__inner--topText p { font-size: 1rem; } .linkCard__bottom p { font-size: 1rem; } .seminartopHead__inner h2 { font-size: 1rem; line-height: 2; } li.reverse.consultant a.linkCard { padding: 30px 35px; } .linkCard__top h3 { font-size: 1.6rem; } img.mvundertext_pc { display: none; } img.mvundertext_sp { display: block; } .services__inner--digitrad p { font-size: 1rem; } /* heading */ .serviceHead__inner p { font-size: 4rem; } /* cta */ .cta__inner { padding-left: 4%; padding-right: 4%; } ul.cta__inner--btn { flex-direction: column; gap: 30px; } .cta__inner--text h2 { font-size: 1.6rem; } /* about page */ .aboutPage__inner { padding-top: 120px; } .aboutPage__inner--message p { font-size: 2rem; } .aboutPage__inner--message p br { display: none; } .aboutPage__inner--ceoImg { width: 100%; } .aboutUnder__inner--listRow { flex-direction: column; gap: 16px; align-items: flex-start; } .aboutUnder__inner--listRow dt { width: 100%; border: none; border-bottom: solid 1px #ddd; padding: 9px 0px 16px; } .aboutUnder__inner--listRow dd { width: 100%; } ul.member__inner--list li { width: 85%; } .member__inner--names h3 { font-size: 1.6rem; } ul.corpPlace__inner--list li { width: 100%; } /* modal */ .modal-content { padding: 20px 25px; } .modal-container { flex-direction: column; align-items: center; gap: 15px; } .modal__rightTextATop { text-align: center; } .modal__rightTextAProfile { max-height: 240px; } /* news seminar */ section#news { padding-top: 50px; } main#seminarPostPage { padding-top: 30px; } main#seminarPostPage:after { height: 110px; } .semiar__left--title h1 { font-size: 1.5rem; } p.semiarDate { font-size: 1rem; } ul.speakers li { padding: 15px 20px; flex-direction: column; } .speaker-image { width: 100%; } ul.speakers li img { width: 100%; height: 280px; object-fit: cover; } .speakers__right { width: 100%; } .detailInner { padding: 25px 0; flex-direction: column; align-items: flex-start; } .detailInner dt, .detailInner dd { width: 100%; } ul.news__inner--list li a { padding: 20px 15px; } ul.news__inner--list li a h2 { line-height: 1.73; } ul.page-numbers { flex-wrap: wrap; } .form__innerright { padding: 20px 15px; } .content__inner { padding: 20px 25px; } /* header toggle */ .toggle { top: 13px; } header#header.resize .toggle { top: 5px; } body.home span.toggler, body.home span.toggler:before, body.home span.toggler:after { background: #fff; } body.home header#header.resize span.toggler, body.home header#header.resize span.toggler:before, body.home header#header.resize span.toggler:after { background: #000; } header#header.resize .header__inner a img { min-height: 45px; } body.home header#header.resize span.deleteclass, body.home header#header span.deleteclass { background: transparent; } /* header onner */ ul.header__inner--rightText li a { font-size: 1rem; } ul.header__inner--rightText li a { font-size: 1rem; padding: 10px 20px; } /* news */ .newsPostPage__inner--block { padding: 20px 25px; } .newsPostPage__inner--blockHeading h2 { font-size: 1.3rem; line-height: 1.5; } .news-archive-link a { white-space: nowrap; } .nav-link-container { padding-top: 50px; } .news-archive-link { position: absolute; top: 0; left: 50%; transform: translateX(-50%); } /* recruit */ .remv__inner--title { align-items: flex-start; justify-content: flex-start; padding-top: 40px; } .remv__inner--title { align-items: flex-start; justify-content: flex-start; padding-top: 100px; gap: 10px; } .remv__inner--title p { font-size: 2.4rem; } .remv__inner--title p span { padding-left: 20px; padding-right: 15px; white-space: nowrap; padding-bottom: 12px; } p.remv__inner--titleSecond { margin-left: 40px; } p.remv__inner--titleSecond span { padding-right: 0; } /* jirei */ main#jireiPost { padding-bottom: 0; } section#jireiPost__header { padding-top: 20px; } section#jireiPost__header:before { height: 200px; } section#jireiPost__body { padding: 0; gap: 0; } .jireiPost__header--img img { height: auto; } aside.jireiPost__body--right { padding: 30px 15px 40px; border: none; border-bottom: solid 1px #ddd; border-radius: 0; } .jireiPost__body--left { padding: 20px 15px 50px; border: none; border-radius: 0; } .jireiPost__body--leftTop h1 { font-size: 1.6rem; line-height: 1.53; } .jireiPost__body--rightInfoRaw dt { font-size: 1.1rem; } .jireiPost__body--leftContentInner h2 { font-size: 1.4rem; line-height: 1.53; margin-top: 20px; } li.jireiCardList__inner { width: 100%; } p.jirei_titleBg { font-size: 1.2rem; } .jireiPost__body--leftMiddle { flex-direction: column; } .jireiPost__body--leftMiddleBox { width: 100%; } /* jirei top */ .jireiCardContent { padding: 0; gap: 18px; } .jireiCardContent__right img { height: 250px; border-radius: 8px 8px 0 0; } .jireiCardContent__right ul.purpose-terms { display: none; } .jireiCardContent__left { padding: 0 22px 25px; } .jireiCardContent__left h1 { font-size: 1.2rem; } }