*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg*, symbol*)) {
all: unset;
display: revert;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
a,
button {
cursor: revert;
}
ol,
ul,
menu,
summary {
list-style: none;
}
img {
max-block-size: 100%;
max-inline-size: 100%;
}
table {
border-collapse: collapse;
}
input,
textarea {
-webkit-user-select: auto;
}
textarea {
white-space: revert;
}
meter {
-webkit-appearance: revert;
-moz-appearance: revert;
appearance: revert;
}
:where(pre) {
all: revert;
box-sizing: border-box;
}
::-moz-placeholder {
color: unset;
}
::placeholder {
color: unset;
}
:where([hidden]) {
display: none;
}
:where([contenteditable]:not([contenteditable='false'])) {
-webkit-line-break: after-white-space;
overflow-wrap: break-word;
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
-webkit-user-select: auto;
}
:where([draggable='true']) {
-webkit-user-drag: element;
}
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
fieldset {
border: none;
}
/*
LP（page-lp.php）のスタイル
画面幅に応じて変わる値は campus-map と同じ計算式で書く。
- 画面幅で値を切り替える: calc((SPの値 * var(--comp-sp) + PCの値 * var(--comp-wide)) * var(--fluid-ratio))
- タブレットとPCで値を分ける: calc((SP * var(--comp-sp) + TAB * var(--comp-tab) + PC * var(--comp-pc)) * var(--fluid-ratio))
- どの画面幅でも同じ値: calc(値 * var(--comp-static))
値は、画面幅1280pxのデザイン上のpx数（SPは375px）を単位なしで書く。
*/
/* --fluid-ratio: 基準の画面幅で1pxになり、画面幅に合わせて伸縮する長さ */
@property --fluid-ratio {
inherits: true;
initial-value: 1px;
syntax: '';
}
:root {
/* 画面幅ごとのスイッチ。該当する幅だけ1になる（SP=767px未満、TAB=767px以上、PC=1024px以上） */
--comp-sp: 1;
--comp-tab: 0;
--comp-pc: 0;
/* 767px以上（TAB + PC）で同じ値を使う場合のスイッチ */
--comp-wide: calc(var(--comp-tab) + var(--comp-pc));
/* どの画面幅でも同じ数値を使う場合の単位 */
--comp-static: calc((var(--comp-sp) + var(--comp-wide)) * var(--fluid-ratio));
/* 374px未満: 画面幅にほぼ比例して縮める */
--fluid-ratio: calc((0.0625rem + (1vw - 0.01px) * 3.7618) / 16);
}
/* SP（374px以上767px未満）: 375pxで1px、767pxで1.2px */
@media (width >= 374px) {
:root {
--fluid-ratio: calc((1rem + (1vw - 3.75px) * 0.8163) / 16);
}
}
/* TAB（767px以上1024px未満） */
@media (width >= 767px) {
:root {
--comp-sp: 0;
--comp-tab: 1;
--comp-pc: 0;
--fluid-ratio: calc((1rem + (1vw - 16px) * 0.5495) / 16);
}
}
/* PC（1024px以上1280px未満） */
@media (width >= 1024px) {
:root {
--comp-sp: 0;
--comp-tab: 0;
--comp-pc: 1;
--fluid-ratio: calc((1rem + (1vw - 16px) * 0.4363) / 16);
}
}
/* 1280px以上は伸縮させない */
@media (width >= 1280px) {
:root {
--fluid-ratio: 1px;
}
}
:root {
--base-width-xxs: 680px;
--base-width-xs: 960px;
--base-width-s: 1120px;
--base-width-m: 1280px;
--base-inner-padding: 5%;
--base-gap-slick-s: 10px;
--base-gap-slick-m: 20px;
--base-gap-slick-l: 25px;
--global-inner-xxs: clamp(
var(--base-inner-padding),
100vw,
calc((100% - var(--base-width-xxs)) / 2)
);
--global-inner-xs: clamp(
var(--base-inner-padding),
100vw,
calc((100% - var(--base-width-xs)) / 2)
);
--global-inner-s: clamp(var(--base-inner-padding), 100vw, calc((100% - var(--base-width-s)) / 2));
--global-inner-m: clamp(var(--base-inner-padding), 100vw, calc((100% - var(--base-width-m)) / 2));
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
:root {
--global-inner-xs: clamp(15%, 100vw, calc((100% - var(--base-width-xs)) / 2));
}
}
html {
min-height: 0;
min-height: 100vh;
overflow-x: hidden;
overflow-y: scroll;
}
* {
margin: 0;
padding: 0;
}
img {
vertical-align: bottom;
}
picture {
display: block;
}
button {
background: rgba(0, 0, 0, 0);
border: none;
}
@font-face {
font-display: swap;
font-family: 'Cochin';
font-style: normal;
font-weight: normal;
src:
url('/wp-content/themes/concord/assets/font/Cochin.woff2') format('woff2'),
url('/wp-content/themes/concord/assets/font/Cochin.woff') format('woff');
}
@font-face {
font-display: swap;
font-family: 'Cochin-Italic';
font-style: normal;
font-weight: normal;
src:
url('/wp-content/themes/concord/assets/font/Cochin-Italic.woff2') format('woff2'),
url('/wp-content/themes/concord/assets/font/Cochin-Italic.woff') format('woff');
}
.m-wysiwyg .fwb,
.m-wysiwyg :is(dt, h2, h3, h4, h5, h6),
.m-title_title,
.button,
#wpcf7cpcnf:not(:root) .wpcf7cp-btns input:is([type='button'], [type='submit']),
#wpcf7cpcnf:not(:root) .wpcf7cp-btns button,
#wpcf7cpcnf:not(:root) table th,
:is(.wpcf7-radio, .wpcf7-checkbox) label,
.c-form-select,
.c-label-optional,
.c-label-required,
.c-label-name,
.c-heading-form--ja,
.p-form__consent,
.p-form__text,
.c-button-sticky__text,
.c-button-sticky__label,
.c-button-sticky__wrap,
.c-button-form__text,
.c-button-form__label,
.c-button-form__link,
.p-company__title,
.p-closing__title,
.p-flow__label,
.p-flow__title,
.p-faq__title,
.p-consultant__position,
.p-consultant__name,
.p-voice__title,
.p-job-tab__button,
.p-publish-logo__title,
.p-publish-book__title,
.p-support__title,
.p-service__title,
.p-type-setting,
.c-heading--ja,
.c-button-submit,
.c-button-confirm,
.c-button-back {
font-family: hiragino-mincho-pron, sans-serif;
font-style: normal;
}
.m-wysiwyg :is(ul, ol) li::marker,
.m-title_title span,
.c-heading-form--en,
.p-faq__body .p-faq__text:first-child::before,
.p-faq__title::before,
.p-type-setting__math,
.c-heading--en {
font-family: 'Cochin';
font-style: normal;
font-weight: normal;
}
.p-flow__title::before,
.p-voice__secondary::after,
.p-voice__secondary::before,
.c-heading--math {
font-family: 'Cochin-Italic';
font-style: normal;
font-weight: normal;
}
.p-closing__image,
.p-voice__image,
.p-publish-media__image,
.p-support__image,
.p-service__image,
.p-main-visual-icon__image,
.p-main-visual__image {
height: 100%;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.p-flow__button,
.p-faq__button,
.p-consultant__button,
.p-voice__button,
.p-job__button,
.p-futures__button,
.p-support__button,
.p-service__button {
margin-inline: var(--base-inner-padding);
@media (width >= 767px) {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
}
}
.c-form-input {
background-color: var(--color-white);
border: 1px solid var(--color-gray-primary);
border-radius: var(--global-radius);
color: var(--color-black-primary);
font-size: var(--font-size-input);
height: var(--height-input);
padding: 0 calc(10 * var(--comp-static));
position: relative;
width: 100%;
}
.c-button-submit,
.c-button-confirm,
.c-button-back {
border-radius: var(--global-radius);
cursor: pointer;
font-feature-settings: 'palt' 1;
font-size: calc(22 * var(--comp-static));
font-weight: bold;
letter-spacing: 0.05em;
padding: calc(16 * var(--comp-static));
position: relative;
text-align: center;
width: 100%;
@media (width >= 767px) {
font-size: calc(24 * var(--comp-static));
}
}
html {
--color-black-primary: #222;
--color-black-primary-alpha: rgba(1, 1, 1, 0.7);
--color-black-secondary: #333;
--color-white: #fff;
--color-gray-primary: #ccc;
--color-gray-secondary: #efefef;
--color-gold-primary: #a98434;
--color-gold-secondary: #efe7cf;
--color-gold-tertiary: #b79242;
--color-brown-primary: #815b0a;
--color-blue-primary: #001539;
--color-blue-secondary: #e5e7eb;
--color-blue-tertiary: #000817;
--color-red-validation: #dc3545;
--color-form-required: #f6f5e3;
--color-blue-confirm: #071b49;
--color-gray-placeholder: #aaa;
--gutter-section: calc((32 * var(--comp-sp) + 64 * var(--comp-wide)) * var(--fluid-ratio));
--gutter-section-top-bottom: calc(
(40 * var(--comp-sp) + 80 * var(--comp-wide)) * var(--fluid-ratio)
);
--gutter-button-top: calc((36 * var(--comp-sp) + 80 * var(--comp-wide)) * var(--fluid-ratio));
}
html {
--global-radius: 4px;
--leading-trim: calc((1em - 1lh) / 2);
--base-line-height: 1.85;
scrollbar-gutter: stable;
}
html:has(dialog[open]) {
overflow: hidden;
}
html {
--height-input: calc(36 * var(--comp-static));
--font-size-input: calc((16 * var(--comp-sp) + 14 * var(--comp-wide)) * var(--fluid-ratio));
}
body {
color: var(--color-black-primary);
font-family:
'Helvetica Neue', Arial, 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
font-size: calc(16 * var(--comp-static));
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
letter-spacing: 0.05em;
line-height: 1.6;
}
.u-br--pc {
display: none;
@media (width >= 767px) {
display: inline;
}
}
.u-br--sp {
display: inline;
@media (width >= 767px) {
display: none;
}
}
.u-br--wbr {
overflow-wrap: anywhere;
word-break: keep-all;
}
.u-hidden--sp {
display: none;
@media (width >= 767px) {
display: block;
}
}
.u-kerning {
margin-left: -0.375em;
}
.u-maker--yellow {
background-color: #f8ebc9;
}
.p-heading {
display: grid;
grid-column-gap: 0px;
grid-row-gap: calc(48 * var(--comp-static));
grid-template-columns: 1fr calc(20 * var(--comp-static));
grid-template-rows: repeat(2, 1fr);
@media (width >= 767px) {
gap: calc(12 * var(--comp-static));
grid-template-columns: auto;
grid-template-rows: none;
}
}
.c-heading--math {
color: var(--color-gold-primary);
font-size: calc(48 * var(--comp-static));
grid-area: 1/1/2/2;
height: -moz-fit-content;
height: fit-content;
margin-block: var(--leading-trim);
position: relative;
text-align: center;
width: calc(64 * var(--comp-static));
}
.c-heading--math::before {
background-color: var(--color-gold-primary);
bottom: 0;
content: '';
height: 2px;
left: 0;
position: absolute;
width: calc(64 * var(--comp-static));
}
.c-heading--math {
@media (width >= 767px) {
display: none;
grid-area: auto;
}
}
.c-heading--ja {
font-size: calc((28 * var(--comp-sp) + 40 * var(--comp-wide)) * var(--fluid-ratio));
font-weight: 600;
grid-area: 2/1/3/2;
height: -moz-fit-content;
height: fit-content;
letter-spacing: 0.05em;
text-align: left;
@media (width >= 767px) {
grid-area: auto;
text-align: center;
}
}
.c-heading--en {
color: var(--color-gold-primary);
font-size: calc(20 * var(--comp-static));
grid-area: 1/2/3/3;
margin-block: var(--leading-trim);
position: relative;
right: 0;
text-align: center;
top: calc(32 * var(--comp-static));
transform: rotate(90deg);
transform-origin: top right;
white-space: nowrap;
@media (width >= 767px) {
grid-area: auto;
position: unset;
transform: none;
transform-origin: unset;
}
}
.c-heading--lines {
margin-top: calc(-20 * var(--comp-static));
@media (width >= 767px) {
margin-top: 0;
}
}
.l-header {
display: none;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
@media (width >= 767px) {
display: block;
}
}
.l-header__inner {
align-items: center;
display: flex;
padding: calc(20 * var(--comp-static)) var(--base-inner-padding);
@media (width >= 767px) {
padding: calc(32 * var(--comp-static)) var(--global-inner-m);
}
}
.l-header__image {
filter: invert(1);
width: calc((220 * var(--comp-sp) + 320 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
left: calc(2 * var(--comp-static));
position: relative;
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
left: calc(24 * var(--comp-static));
position: relative;
width: calc(200 * var(--comp-static));
}
}
.p-main-visual {
max-height: calc(640 * var(--comp-static));
overflow: hidden;
position: relative;
@media (width >= 767px) {
max-height: none;
}
}
.p-main-visual__thumbnail {
@media (width >= 767px) {
height: 100%;
left: 0;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
z-index: -1;
}
}
[data-if-display] .p-main-visual__thumbnail {
z-index: 0;
}
.p-main-visual__image {
@media (width >= 767px) {
-o-object-position: 45% 50%;
object-position: 45% 50%;
}
}
.p-main-visual__inner {
background-color: var(--color-black-primary-alpha);
bottom: 0;
padding-block: calc(32 * var(--comp-static));
position: absolute;
width: 100%;
z-index: 1;
@media (width >= 767px) {
background: none;
padding: calc(80 * var(--comp-static)) var(--global-inner-m);
position: relative;
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
padding: calc(24 * var(--comp-static)) var(--global-inner-m);
}
}
[data-if-display] .p-main-visual__inner {
display: none;
@media (width >= 767px) {
display: grid;
padding: calc(120 * var(--comp-static)) var(--global-inner-m) calc(80 * var(--comp-static));
place-items: center;
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
padding: calc(24 * var(--comp-static)) var(--global-inner-m);
}
}
.p-main-visual__wrap {
display: grid;
gap: calc((20 * var(--comp-sp) + 32 * var(--comp-wide)) * var(--fluid-ratio));
position: relative;
@media (width >= 767px) {
width: -moz-fit-content;
width: fit-content;
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
left: calc(-26 * var(--comp-static));
position: relative;
transform: scale(0.8);
}
}
[data-if-display] .p-main-visual__wrap {
@media (width >= 767px) {
display: grid;
place-items: center;
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
left: 0;
}
}
.p-main-visual__wrap::before {
@media (width >= 767px) {
background: #000 0% 0% no-repeat padding-box;
content: '';
display: block;
filter: blur(60px);
height: 113.5%;
left: 0;
opacity: 0.75;
position: absolute;
top: 0;
width: 113.5%;
z-index: -1;
}
@media (width >= 1024px) {
opacity: 0.35;
}
}
[data-if-display] .p-main-visual__wrap::before {
@media (width >= 767px) {
background: var(--color-black-primary-alpha);
filter: none;
left: calc(-32 * var(--comp-static));
top: calc(-28 * var(--comp-static));
}
@media (width >= 1024px) {
opacity: 1;
}
}
.p-main-visual__list {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-self: center;
transform: scale(0.925);
@media (width >= 767px) {
justify-self: flex-start;
left: calc(-14 * var(--comp-static));
position: relative;
transform: none;
}
}
[data-if-display] .p-main-visual__list {
@media (width >= 767px) {
left: 0;
place-items: center;
}
}
.p-main-visual__item {
display: grid;
gap: calc((12 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-main-visual__text {
color: var(--color-white);
font-size: calc((11 * var(--comp-sp) + 14.5 * var(--comp-wide)) * var(--fluid-ratio));
margin-block: var(--leading-trim);
text-align: center;
white-space: nowrap;
}
.p-main-visual__button {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
@media (width >= 767px) {
left: calc(-28 * var(--comp-static));
margin: 0;
transform: scale(0.85);
}
}
[data-if-display] .p-main-visual__button {
@media (width >= 767px) {
left: 0;
}
}
.p-type-setting {
color: var(--color-white);
display: grid;
gap: calc((12 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
text-align: center;
@media (width >= 767px) {
font-size: calc(55 * var(--comp-static));
text-align: left;
}
}
[data-if-display] .p-type-setting {
@media (width >= 767px) {
text-align: center;
}
}
.p-type-setting__head {
border: 1px solid var(--color-gray-primary);
font-size: calc(18 * var(--comp-static));
font-weight: 300;
height: -moz-fit-content;
height: fit-content;
line-height: 1;
margin-block: var(--leading-trim);
margin-inline: auto;
margin-bottom: calc(-2 * var(--comp-static));
padding: calc(6 * var(--comp-static)) calc(8 * var(--comp-static));
position: relative;
width: -moz-fit-content;
width: fit-content;
@media (width >= 767px) {
font-size: 0.45em;
letter-spacing: 0.06em;
margin-left: 0.2em;
padding: calc(8 * var(--comp-static));
white-space: nowrap;
}
}
[data-if-display] .p-type-setting__head {
@media (width >= 767px) {
margin: 0 auto;
}
}
.p-type-setting__body {
font-size: calc(34 * var(--comp-static));
line-height: 0.8;
margin-top: calc(-2 * var(--comp-static));
transform: scale(0.95);
@media (width >= 767px) {
font-size: 1.05em;
left: calc(-4 * var(--comp-static));
letter-spacing: 0.05em;
line-height: normal;
margin-block: var(--leading-trim);
position: relative;
transform: none;
white-space: nowrap;
}
}
.p-type-setting__math {
color: var(--color-gold-primary);
font-size: calc(44 * var(--comp-static));
line-height: 1;
margin-block: var(--leading-trim);
margin-inline: calc(-9 * var(--comp-static)) calc(-14 * var(--comp-static));
position: relative;
top: calc(3 * var(--comp-static));
@media (width >= 767px) {
font-size: 1.35em;
margin-inline: -0.2em -0.3em;
top: 0.07em;
}
}
.p-type-setting__text {
font-size: calc(32 * var(--comp-static));
font-weight: 300;
position: relative;
top: calc((3 * var(--comp-sp) + 6 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
font-size: 0.515em;
letter-spacing: 0.15em;
}
}
.p-type-setting__foot {
font-size: calc(34 * var(--comp-static));
line-height: 1;
transform: scale(0.95);
@media (width >= 767px) {
font-size: 1.05em;
transform: none;
white-space: nowrap;
}
}
.p-type-setting__job {
color: var(--color-gold-primary);
margin-right: calc((-10 * var(--comp-sp) + -16 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-main-visual-icon {
margin-inline: auto;
width: calc((80 * var(--comp-sp) + 100 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
position: relative;
}
}
.p-service {
background-color: var(--color-blue-primary);
}
.p-service__inner {
container-name: p-service-inner;
container-type: inline-size;
display: grid;
gap: var(--gutter-section);
padding-block: var(--gutter-section-top-bottom);
@media (width >= 767px) {
padding: calc(80 * var(--comp-static)) var(--global-inner-m);
}
}
.p-service__heading {
margin: 0 var(--base-inner-padding);
}
.p-service__heading > *:not(.c-heading--en) {
color: var(--color-white);
}
.p-service__heading > *:not(.c-heading--en)::before {
background-color: var(--color-white);
}
.p-service__heading {
@media (width >= 767px) {
padding-inline: 0;
}
}
.p-service__heading--ja {
font-weight: 300;
-webkit-text-stroke: 0.5px currentColor;
}
.p-service__list {
container-name: p-service-list;
container-type: inline-size;
@media (width >= 767px) {
display: grid;
gap: calc(56 * var(--comp-static)) 4.375%;
grid-auto-rows: min-content;
grid-template-columns: repeat(2, 1fr);
}
@media (width >= 1024px) {
gap: calc(32 * var(--comp-static)) calc(24 * var(--comp-static));
grid-template-columns: repeat(auto-fill, minmax(calc(360 * var(--comp-static)), 1fr));
}
@media (width >= 1280px) {
gap: calc(40 * var(--comp-static)) 3.125%;
grid-template-columns: repeat(3, 1fr);
}
}
.p-service__item {
@media (width >= 767px) {
border-radius: var(--global-radius);
display: grid;
gap: 0;
grid-row: span 2;
grid-template-rows: subgrid;
overflow: hidden;
position: relative;
}
}
.p-service__thumbnail {
aspect-ratio: 2/1;
overflow: hidden;
position: relative;
}
.p-service__item:nth-child(odd) .p-service__thumbnail {
border-radius: 0 var(--global-radius) var(--global-radius) 0;
padding-right: var(--base-inner-padding);
}
.p-service__item:nth-child(even) .p-service__thumbnail {
border-radius: var(--global-radius) 0 0 var(--global-radius);
padding-left: var(--base-inner-padding);
}
.p-service__item .p-service__thumbnail:not(:root) {
@media (width >= 767px) {
border-radius: 0;
padding: 0;
}
}
.p-service__image {
border-radius: inherit;
display: block;
}
.p-service__wrap {
display: grid;
gap: calc(32 * var(--comp-static));
padding: calc(32 * var(--comp-static)) var(--base-inner-padding) calc(48 * var(--comp-static));
}
.p-service__item:last-of-type .p-service__wrap {
padding-bottom: calc(10 * var(--comp-static));
@media (width >= 767px) {
padding: calc(32 * var(--comp-static))
calc((40 * var(--comp-tab) + 16 * var(--comp-pc)) * var(--fluid-ratio))
calc(36 * var(--comp-static));
}
}
.p-service__wrap {
@media (width >= 767px) {
background-color: var(--color-blue-tertiary);
display: flex;
flex-direction: column;
padding: calc(32 * var(--comp-static)) calc(40 * var(--comp-static))
calc(36 * var(--comp-static));
}
@media (width >= 1024px) {
padding: calc(32 * var(--comp-static)) calc(16 * var(--comp-static))
calc(36 * var(--comp-static));
}
}
.p-service__title {
color: var(--color-white);
font-size: calc(22 * var(--comp-static));
line-height: 1.85;
margin-block: var(--leading-trim);
@media (width >= 767px) {
text-align: center;
}
}
.p-service__text {
color: var(--color-white);
font-size: calc(16 * var(--comp-static));
line-height: 2;
margin-block: var(--leading-trim);
@media (width >= 767px) {
font-size: calc(16 * var(--comp-static));
text-align: center;
}
@media (width >= 1025px) and (1.1dppx <= resolution <= 2dppx) {
font-size: calc(15 * var(--comp-static));
}
}
.p-service__button {
margin-top: calc(-32 * var(--comp-static));
@media (width >= 767px) {
margin-top: 0;
}
}
.p-support__inner {
display: grid;
gap: var(--gutter-section);
padding: var(--gutter-section-top-bottom) var(--global-inner-m);
}
.p-support__list {
display: grid;
gap: calc((32 * var(--comp-sp) + 80 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-support__item {
display: grid;
gap: calc((20 * var(--comp-sp) + 64 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
grid-template-columns: 47.5% 1fr;
}
}
.p-support__thumbnail {
aspect-ratio: 16/9;
border-radius: var(--global-radius);
overflow: hidden;
position: relative;
}
.p-support__movie {
aspect-ratio: 16/9;
border-radius: var(--global-radius);
height: -moz-fit-content;
height: fit-content;
max-width: 100%;
overflow: hidden;
pointer-events: none;
position: relative;
width: 100%;
}
.p-support__overlay {
aspect-ratio: 16/9;
border-radius: var(--global-radius);
overflow: hidden;
position: relative;
}
.p-support__overlay::before {
background: url(/wp-content/themes/concord/assets/img/lp/logo_overlay.webp) no-repeat center
center;
background-size: cover;
border: 1px solid var(--color-gray-primary);
content: '';
height: 100%;
left: 50%;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 1s;
width: 100%;
z-index: 1;
}
.p-support__overlay:has(.p-support__movie[data-youtube-start='false'])::before {
opacity: 1;
}
.p-support__wrap {
display: grid;
gap: calc((12 * var(--comp-sp) + 20 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
align-content: center;
align-items: center;
padding-right: calc(32 * var(--comp-static));
}
}
.p-support__title {
font-size: calc(22 * var(--comp-static));
font-weight: normal;
line-height: var(--base-line-height);
@media (width >= 767px) {
font-size: calc(28 * var(--comp-static));
}
}
.p-support__text {
color: var(--color-black-secondary);
font-size: calc(16 * var(--comp-static));
line-height: var(--base-line-height);
}
.p-futures__inner {
display: grid;
gap: var(--gutter-section);
@media (width >= 767px) {
gap: calc(64 * var(--comp-static));
padding: var(--gutter-section-top-bottom) var(--global-inner-m) 0;
}
}
.p-futures__heading {
margin: var(--gutter-section) var(--base-inner-padding) 0;
@media (width >= 767px) {
margin: 0;
}
}
.p-futures__button {
margin-block: 0 var(--gutter-section-top-bottom);
@media (width >= 767px) {
margin-block: var(--gutter-button-top) var(--gutter-section-top-bottom);
}
}
.p-publish-book {
background-color: var(--color-gray-secondary);
display: grid;
gap: calc(32 * var(--comp-static));
padding: calc(32 * var(--comp-static)) var(--base-inner-padding) calc(32 * var(--comp-static));
@media (width >= 767px) {
align-items: center;
container-name: p-publish-book;
container-type: inline-size;
display: grid;
grid-auto-columns: 50% 1fr;
grid-auto-flow: column;
padding: calc(32 * var(--comp-static)) calc(40 * var(--comp-static))
calc(24 * var(--comp-static));
}
@media (width >= 1024px) {
padding: calc(24 * var(--comp-static)) calc(40 * var(--comp-static))
calc(18 * var(--comp-static));
}
}
.p-publish-book__primary {
display: flex;
flex-direction: column;
gap: calc(16 * var(--comp-static));
order: 2;
@media (width >= 767px) {
order: unset;
position: relative;
}
}
.p-publish-book__image {
height: auto;
width: 100%;
}
.p-publish-book__secondary {
display: contents;
@media (width >= 767px) {
display: grid;
gap: calc(32 * var(--comp-static));
}
@media (width >= 1024px) {
position: relative;
top: calc(-2 * var(--comp-static));
}
}
.p-publish-book__title {
border-bottom: 1px solid var(--color-gold-primary);
font-size: calc(19 * var(--comp-static));
line-height: var(--base-line-height);
margin-block: var(--leading-trim);
order: -1;
padding-bottom: calc((10 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
text-align: left;
@media (width >= 767px) {
border: none;
border-bottom: 1px solid;
-o-border-image: linear-gradient(to right, var(--color-gold-primary), rgba(169, 132, 52, 0)) 1;
border-image: linear-gradient(to right, var(--color-gold-primary), rgba(169, 132, 52, 0)) 1;
font-size: calc(24 * var(--comp-static));
letter-spacing: 0.1em;
line-height: 1.8;
margin-bottom: calc(-4 * var(--comp-static));
position: relative;
white-space: nowrap;
width: 100%;
}
}
@container p-publish-book (600px <= width <= 700px) {
.p-publish-book__title {
font-size: calc(22 * var(--comp-static));
}
}
.p-publish-book__title {
@media (width >= 1024px) {
font-size: calc(24 * var(--comp-static));
}
}
.p-publish-book__list {
display: grid;
font-size: calc((14.5 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
gap: calc((16 * var(--comp-sp) + 18 * var(--comp-wide)) * var(--fluid-ratio));
letter-spacing: 0em;
margin-left: calc(-6 * var(--comp-static));
@media (width >= 767px) {
letter-spacing: 0.05em;
margin-left: 0;
}
}
.p-publish-book__item {
align-items: center;
color: var(--color-black-primary);
display: flex;
flex-wrap: wrap;
gap: calc(4 * var(--comp-static)) 0px;
margin-block: var(--leading-trim);
}
.p-publish-book__publisher {
color: var(--color-black-secondary);
font-size: calc(10 * var(--comp-static));
font-weight: normal;
margin-left: calc(4 * var(--comp-static));
@media (width >= 767px) {
display: block;
font-size: calc(14 * var(--comp-static));
margin-left: 0;
}
}
.p-publish-media {
border-bottom: 1px solid var(--color-gold-primary);
margin-inline: var(--base-inner-padding);
margin-top: calc(-8 * var(--comp-static));
padding-bottom: calc(8 * var(--comp-static));
@media (width >= 767px) {
border: none;
display: flex;
gap: calc(48 * var(--comp-static));
margin: 0;
padding: 0;
}
}
.p-publish-media__item {
align-self: baseline;
display: grid;
gap: calc(14 * var(--comp-static));
grid-auto-flow: column;
grid-template-columns: calc(124 * var(--comp-static)) 1fr;
padding-block: calc(16 * var(--comp-static));
}
.p-publish-media .p-publish-media__item:first-child {
padding-top: 0;
}
.p-publish-media .p-publish-media__item:not(:last-child) {
border-bottom: 1px solid var(--color-gray-primary);
@media (width >= 767px) {
border: none;
}
}
.p-publish-media__item {
@media (width >= 767px) {
grid-auto-flow: row;
grid-template-columns: auto;
padding: 0;
}
}
.p-publish-media__thumbnail {
aspect-ratio: 1.618/1;
border: 1px solid var(--color-gray-primary);
border-radius: var(--global-radius);
overflow: hidden;
position: relative;
@media (width >= 767px) {
aspect-ratio: 2/1;
}
}
.p-publish-media__title {
align-self: center;
font-size: calc(14.5 * var(--comp-static));
font-weight: normal;
line-height: 1.8;
@media (width >= 767px) {
font-size: calc(16 * var(--comp-static));
}
}
.p-publish-logo {
margin-bottom: calc((-16 * var(--comp-sp) + -24 * var(--comp-wide)) * var(--fluid-ratio));
overflow: hidden;
}
.p-publish-logo__title {
display: none;
@media (width >= 767px) {
align-items: center;
display: grid;
font-size: calc(20 * var(--comp-static));
gap: calc(24 * var(--comp-static));
grid-template-columns: 1fr auto 1fr;
justify-content: center;
}
}
.p-publish-logo__title::before,
.p-publish-logo__title::after {
@media (width >= 767px) {
background-color: var(--color-gold-primary);
block-size: 1px;
content: '';
}
}
.p-publish-logo__head {
margin-top: calc((28 * var(--comp-sp) + 32 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__foot {
margin-top: calc((16 * var(--comp-sp) + 40 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__list {
display: grid;
grid-auto-flow: column;
}
.p-publish-logo__item {
align-items: center;
display: flex !important;
justify-content: center;
width: -moz-fit-content;
width: fit-content;
}
.p-publish-logo__image {
max-height: calc((60 * var(--comp-sp) + 120 * var(--comp-wide)) * var(--fluid-ratio));
max-width: calc((140 * var(--comp-sp) + 240 * var(--comp-wide)) * var(--fluid-ratio));
-o-object-fit: contain;
object-fit: contain;
width: 100%;
@media (width >= 767px) {
height: -moz-fit-content;
height: fit-content;
}
}
.p-publish-logo__image[src*='php'] {
width: calc((80 * var(--comp-sp) + 120 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__image[src*='toudai'] {
width: calc((90 * var(--comp-sp) + 140 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__image[src*='diamond_online'],
.p-publish-logo__image[src*='hbr'],
.p-publish-logo__image[src*='hitotsubashi'] {
width: calc((110 * var(--comp-sp) + 160 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__image[src*='tetsuryoku'] {
width: calc((100 * var(--comp-sp) + 180 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__image[src*='business'] {
width: calc((110 * var(--comp-sp) + 200 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-publish-logo__image[src*='touyou'] {
width: calc((140 * var(--comp-sp) + 220 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-job {
background-color: var(--color-blue-secondary);
}
.p-job__inner {
display: grid;
gap: var(--gutter-section);
padding: var(--gutter-section-top-bottom) var(--global-inner-m);
}
.p-job__list {
display: grid;
gap: calc((12 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
grid-template-columns: repeat(1, 1fr);
margin-top: calc((-8 * var(--comp-sp) + -24 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
grid-template-columns: repeat(2, 1fr);
}
}
.p-job__item {
background-color: var(--color-white);
border-radius: var(--global-radius);
display: grid;
gap: calc((4 * var(--comp-sp) + 8 * var(--comp-wide)) * var(--fluid-ratio));
overflow: hidden;
padding: calc((16 * var(--comp-sp) + 20 * var(--comp-wide)) * var(--fluid-ratio))
calc(16 * var(--comp-static))
calc((16 * var(--comp-sp) + 20 * var(--comp-wide)) * var(--fluid-ratio))
calc(32 * var(--comp-static));
position: relative;
@media (width >= 767px) {
display: flex;
flex-direction: column;
}
}
.p-job__title {
color: var(--color-black-primary);
position: relative;
@media (width >= 767px) {
font-size: calc(18 * var(--comp-static));
}
}
.p-job__title::before {
background: url(/wp-content/themes/concord/assets/img/lp/arrow.svg) no-repeat;
background-size: contain;
content: '';
display: block;
height: calc((16 * var(--comp-sp) + 14 * var(--comp-wide)) * var(--fluid-ratio));
left: calc(-18 * var(--comp-static));
position: absolute;
top: calc(5 * var(--comp-static));
width: calc((16 * var(--comp-sp) + 14 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
top: calc(6 * var(--comp-static));
}
}
.p-job__yearly {
color: var(--color-black-secondary);
font-size: calc((15 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
margin-top: auto;
}
}
.p-job__button {
margin-inline: 0;
@media (width >= 767px) {
margin-inline: auto;
}
}
.p-job-tab {
display: grid;
gap: 2px;
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
}
.p-job-tab__button {
background-color: #f7f7f7;
color: var(--color-black-primary);
font-size: calc(16 * var(--comp-static));
font-weight: bold;
line-height: 1.45;
padding: calc(10 * var(--comp-static)) calc(4 * var(--comp-static));
text-align: center;
width: 100%;
@media (width >= 374px) {
font-size: calc(14 * var(--comp-static));
}
@media (width >= 767px) {
align-items: center;
display: flex;
font-size: calc(22 * var(--comp-static));
justify-content: center;
padding: calc(20 * var(--comp-static));
}
}
.p-job-tab__button.js-current {
background-color: var(--color-blue-primary);
color: var(--color-white);
position: relative;
}
.p-job-tab__button.js-current::before {
aspect-ratio: 1/0.8660254038;
background-color: var(--color-blue-primary);
bottom: calc(-12 * var(--comp-static));
clip-path: polygon(0 0, 100% 0, 50% 100%);
content: '';
left: 50%;
position: absolute;
transform: translateX(-50%);
width: calc(16 * var(--comp-static));
}
.p-job-tab__button:hover {
@media (width >= 767px) {
cursor: pointer;
}
}
.p-voice {
@media (width >= 767px) {
background-color: #fffdf7;
}
}
.p-voice__inner {
display: grid;
gap: var(--gutter-section);
padding: var(--gutter-section-top-bottom) var(--global-inner-xxs);
@media (width >= 767px) {
padding: var(--gutter-section-top-bottom) 10%;
}
@media (width >= 1280px) {
padding: var(--gutter-section-top-bottom) var(--global-inner-xs);
}
}
.p-voice__list {
display: grid;
gap: calc((24 * var(--comp-sp) + 36 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
counter-reset: voice-counter;
}
}
.p-voice__item {
background-color: var(--color-white);
border: 1px solid var(--color-gray-primary);
border-radius: var(--global-radius);
display: flex;
flex-direction: column-reverse;
overflow: hidden;
position: relative;
@media (width >= 767px) {
border: none;
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12),
0 1px 5px 0 rgba(0, 0, 0, 0.2);
flex-direction: row-reverse;
min-height: calc(460 * var(--comp-static));
}
@media (width >= 1280px) {
min-height: auto;
}
}
.p-voice__primary {
@media (width >= 767px) {
align-self: center;
background-color: var(--color-white);
display: grid;
gap: calc(24 * var(--comp-static));
padding: calc(36 * var(--comp-static));
}
}
.p-voice__head {
background-color: var(--color-gold-secondary);
display: grid;
gap: calc(14 * var(--comp-static));
padding: calc(4 * var(--comp-static)) calc(16 * var(--comp-static)) calc(20 * var(--comp-static));
@media (width >= 767px) {
background-color: var(--color-white);
padding: 0;
}
}
.p-voice__title {
border-top: 1px solid #d5c8ab;
margin-block: var(--leading-trim);
margin-top: calc(8 * var(--comp-static));
padding-top: calc(12 * var(--comp-static));
@media (width >= 767px) {
border-bottom: 1px solid;
-o-border-image: linear-gradient(to right, var(--color-gold-primary), rgba(169, 132, 52, 0)) 1;
border-image: linear-gradient(to right, var(--color-gold-primary), rgba(169, 132, 52, 0)) 1;
border-top: none;
font-size: calc(24 * var(--comp-static));
margin-top: 0;
padding-bottom: calc(12 * var(--comp-static));
padding-top: 0;
width: 100%;
}
}
.p-voice__body {
background-color: var(--color-white);
display: grid;
gap: calc(12 * var(--comp-static));
padding: calc(16 * var(--comp-static));
@media (width >= 767px) {
padding: 0;
}
}
.p-voice__text {
font-size: calc(15 * var(--comp-static));
line-height: var(--base-line-height);
@media (width >= 767px) {
font-size: calc(16 * var(--comp-static));
}
}
.p-voice__secondary {
align-items: center;
background-color: var(--color-gold-secondary);
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: calc((12 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
justify-content: flex-start;
padding: calc(16 * var(--comp-static)) calc(16 * var(--comp-static)) 0;
@media (width >= 767px) {
align-items: baseline;
background-color: var(--color-gold-tertiary);
counter-increment: voice-counter;
flex-direction: column;
justify-content: flex-start;
padding: calc(36 * var(--comp-static)) calc(36 * var(--comp-static))
calc(64 * var(--comp-static));
position: relative;
}
@media (width >= 1024px) {
padding: calc(36 * var(--comp-static)) calc(36 * var(--comp-static))
calc(124 * var(--comp-static));
}
}
.p-voice__secondary::before {
bottom: calc(64 * var(--comp-static));
color: var(--color-white);
content: 'voice';
font-size: calc(26 * var(--comp-static));
left: calc(24 * var(--comp-static));
opacity: 0.5;
position: absolute;
text-align: center;
}
.p-voice__secondary::after {
bottom: calc(16 * var(--comp-static));
color: var(--color-white);
content: counter(voice-counter, decimal-leading-zero);
font-size: calc(56 * var(--comp-static));
left: calc(18 * var(--comp-static));
line-height: 1;
opacity: 0.5;
position: absolute;
text-align: center;
}
.p-voice__thumbnail {
aspect-ratio: 1/1;
border-radius: 100%;
overflow: hidden;
width: calc((32 * var(--comp-sp) + 164 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
border-radius: var(--global-radius);
}
}
.p-voice__name {
font-size: calc((14 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
margin-block: var(--leading-trim);
@media (width >= 767px) {
color: var(--color-white);
}
}
.p-voice__company {
font-size: calc((15 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
color: var(--color-white);
line-height: var(--base-line-height);
margin-block: var(--leading-trim);
}
}
.p-voice__offer {
background-color: #d8be85;
padding: calc(2 * var(--comp-static)) calc(4 * var(--comp-static));
@media (width >= 767px) {
background-color: var(--color-brown-primary);
color: var(--color-white);
font-size: calc(18 * var(--comp-static));
}
}
.p-voice__button {
margin-inline: 0;
@media (width >= 767px) {
margin-inline: auto;
}
}
.p-consultant__inner {
display: grid;
gap: var(--gutter-section);
padding: var(--gutter-section-top-bottom) var(--global-inner-m);
}
.p-consultant__list {
display: grid;
gap: calc((24 * var(--comp-sp) + 40 * var(--comp-wide)) * var(--fluid-ratio))
calc((16 * var(--comp-sp) + 32 * var(--comp-wide)) * var(--fluid-ratio));
grid-template-columns: repeat(2, 1fr);
@media (width >= 767px) {
grid-template-columns: repeat(4, 1fr);
}
}
.p-consultant__item {
align-items: start;
container-type: inline-size;
display: grid;
gap: calc((16 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
grid-row: span 3;
grid-template-rows: subgrid;
grid-template-rows: auto auto 1fr;
}
.p-consultant__thumbnail {
align-items: center;
aspect-ratio: 156/110;
background: url(/wp-content/themes/concord/assets/img/lp/bg_consultant.webp) center center/cover
no-repeat;
display: flex;
grid-row: 1;
justify-content: center;
position: relative;
width: 100%;
}
.p-consultant__image {
height: 100%;
width: -moz-fit-content;
width: fit-content;
}
.p-consultant__data {
display: grid;
gap: calc((10 * var(--comp-sp) + 12 * var(--comp-wide)) * var(--fluid-ratio));
grid-row: 2;
}
.p-consultant__name {
font-size: calc(17 * var(--comp-static));
font-weight: 600;
margin-block: var(--leading-trim);
text-align: center;
@media (width >= 767px) {
font-size: calc(24 * var(--comp-static));
}
}
.p-consultant__position {
color: var(--color-gold-primary);
font-size: calc(10 * var(--comp-static));
font-weight: 600;
letter-spacing: 0;
margin-block: var(--leading-trim);
text-align: center;
@media (width >= 767px) {
font-size: calc(14 * var(--comp-static));
letter-spacing: inherit;
white-space: nowrap;
}
}
.p-consultant__text {
color: var(--color-black-secondary);
font-size: calc(13.5 * var(--comp-static));
grid-row: 3;
line-height: 1.8;
margin-block: var(--leading-trim);
overflow-wrap: break-word;
word-break: break-all;
@media (width >= 767px) {
font-size: calc(16 * var(--comp-static));
line-height: var(--base-line-height);
}
}
.p-consultant__button {
margin-inline: 0;
@media (width >= 767px) {
margin-inline: auto;
}
}
.p-faq__inner {
background-color: var(--color-gray-secondary);
display: grid;
gap: var(--gutter-section);
padding-block: var(--gutter-section-top-bottom) 0;
@media (width >= 767px) {
padding: var(--gutter-section-top-bottom) 10%;
}
@media (width >= 1280px) {
padding: var(--gutter-section-top-bottom) var(--global-inner-xs);
}
}
.p-faq__heading {
padding-inline: var(--base-inner-padding);
@media (width >= 767px) {
padding-inline: 0;
}
}
.p-faq__list {
@media (width >= 767px) {
display: grid;
gap: calc(32 * var(--comp-static));
}
}
.p-faq__item {
display: grid;
}
.p-faq__head {
background-color: var(--color-white);
border-bottom: 1px solid var(--color-gray-primary);
border-top: 1px solid var(--color-gray-primary);
padding: calc(16 * var(--comp-static)) calc(var(--base-inner-padding) * 2.5)
calc(16 * var(--comp-static)) calc(var(--base-inner-padding) * 2.5);
@media (width >= 767px) {
background-color: var(--color-blue-primary);
border: none;
padding: calc(20 * var(--comp-static)) calc(44 * var(--comp-static))
calc(20 * var(--comp-static)) calc(88 * var(--comp-static));
}
}
.p-faq__title {
color: var(--color-black-primary);
font-size: calc((18 * var(--comp-sp) + 22 * var(--comp-wide)) * var(--fluid-ratio));
position: relative;
text-align: left;
@media (width >= 767px) {
color: var(--color-white);
}
}
.p-faq__title::before {
color: var(--color-blue-primary);
content: 'Q';
font-size: calc((20 * var(--comp-sp) + 36 * var(--comp-wide)) * var(--fluid-ratio));
left: calc(-2 * var(--base-inner-padding));
position: absolute;
top: 0;
@media (width >= 767px) {
color: var(--color-gold-primary);
left: calc(-54 * var(--comp-static));
top: calc(-8 * var(--comp-static));
}
}
.p-faq__title::after {
background: url(/wp-content/themes/concord/assets/img/lp/arrow.svg) no-repeat;
background-size: contain;
content: '';
display: block;
height: calc(16 * var(--comp-static));
margin-top: calc(-1 * var(--comp-static));
position: absolute;
right: calc(-1.5 * var(--base-inner-padding));
top: 50%;
transform: translateY(-50%) rotate(90deg);
transition: transform 0.3s ease;
width: calc(16 * var(--comp-static));
@media (width >= 767px) {
content: none;
}
}
.p-faq__head.js-open .p-faq__title::after {
transform: translateY(-50%) rotate(-90deg);
}
.p-faq__body {
display: none;
}
.p-faq__body.js-open {
display: block;
}
.p-faq__wrap {
display: grid;
gap: calc((20 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
padding: calc(20 * var(--comp-static)) var(--base-inner-padding) calc(20 * var(--comp-static))
calc(var(--base-inner-padding) * 2.5);
@media (width >= 767px) {
background-color: var(--color-white);
padding: calc(20 * var(--comp-static)) calc(44 * var(--comp-static))
calc(20 * var(--comp-static)) calc(88 * var(--comp-static));
}
}
.p-faq__text {
line-height: var(--base-line-height);
position: relative;
@media (width >= 1024px) {
font-size: calc(18 * var(--comp-static));
line-height: var(--base-line-height);
}
}
.p-faq__body .p-faq__text:first-child::before {
color: var(--color-gold-primary);
content: 'A';
font-size: calc((24 * var(--comp-sp) + 36 * var(--comp-wide)) * var(--fluid-ratio));
left: calc(-1.85 * var(--base-inner-padding));
position: absolute;
top: calc(-8 * var(--comp-static));
@media (width >= 767px) {
left: calc(-51 * var(--comp-static));
top: calc(-8 * var(--comp-static));
}
}
.p-faq__text--small {
align-items: flex-start;
color: var(--color-black-secondary);
display: flex;
font-size: calc(15 * var(--comp-static));
gap: calc(8 * var(--comp-static));
line-height: 1.7;
}
.p-faq__text--small::before {
content: '※';
position: relative;
top: calc(-2 * var(--comp-static));
}
.p-flow__inner {
display: grid;
gap: var(--gutter-section);
padding-block: var(--gutter-section-top-bottom);
}
.p-flow__heading {
padding: 0 var(--base-inner-padding);
}
.p-flow__list {
counter-reset: flow-step;
@media (width >= 767px) {
display: grid;
gap: calc(48 * var(--comp-static));
overflow: hidden;
padding: 0 var(--global-inner-xs) var(--gutter-section-top-bottom);
position: relative;
}
}
.p-flow__list::before {
@media (width >= 767px) {
background-color: var(--color-gray-primary);
content: '';
display: block;
height: 90%;
left: calc(var(--global-inner-xs) + var(--thumbnail-width) * 0.5);
position: absolute;
top: calc(24 * var(--comp-static));
transform: translateX(-50%);
width: calc(1 * var(--comp-static));
z-index: -1;
}
}
.p-flow__item {
counter-increment: flow-step;
@media (width >= 767px) {
display: grid;
gap: calc(32 * var(--comp-static));
grid-template-columns: 35% 1fr;
}
}
.p-flow__thumbnail {
background: rgba(0, 0, 0, 0) radial-gradient(closest-side at 50% 50%, #efe7cf 0%, #e6dbb9 100%) 0%
0% no-repeat padding-box;
height: calc(120 * var(--comp-static));
position: relative;
@media (width >= 767px) {
aspect-ratio: 2/1;
border-radius: var(--global-radius);
height: -moz-fit-content;
height: fit-content;
margin-top: calc(22 * var(--comp-static));
width: 100%;
}
}
.p-flow__thumbnail--high {
background: rgba(0, 0, 0, 0) radial-gradient(closest-side at 50% 50%, #efe7cf 0%, #e6dbb9 100%) 0%
0% no-repeat padding-box;
height: calc(140 * var(--comp-static));
position: relative;
@media (width >= 767px) {
aspect-ratio: 2/1;
border-radius: var(--global-radius);
height: -moz-fit-content;
height: fit-content;
margin-top: calc(22 * var(--comp-static));
width: 100%;
}
}
.p-flow__image {
height: 90%;
opacity: 0.3;
position: absolute;
right: calc(12 * var(--comp-static));
top: 50%;
transform: translateY(-50%);
width: auto;
@media (width >= 767px) {
height: 100%;
inset: 0;
margin: auto;
-o-object-fit: cover;
object-fit: cover;
opacity: 0.5;
transform: none;
width: 70%;
}
}
.p-flow__wrap {
display: grid;
gap: calc((56 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
margin-top: calc(-104 * var(--comp-static));
padding: calc(24 * var(--comp-static)) 0 calc(24 * var(--comp-static)) var(--global-inner-xs);
position: relative;
@media (width >= 767px) {
border-top: 1px solid var(--color-gray-primary);
margin-top: 0;
padding: 0;
}
}
.p-flow__wrap::before {
background-color: var(--color-gray-primary);
content: '';
display: block;
height: 100%;
left: calc(24 * var(--comp-static));
position: absolute;
top: 0;
width: 1px;
z-index: -1;
@media (width >= 767px) {
content: none;
}
}
.p-flow__wrap::after {
@media (width >= 767px) {
background-color: var(--color-gold-primary);
content: '';
display: block;
height: 1px;
left: 0;
position: absolute;
top: -1px;
width: calc(160 * var(--comp-static));
z-index: 1;
}
}
.p-flow__thumbnail--high + .p-flow__wrap {
gap: calc((44 * var(--comp-sp) + 32 * var(--comp-wide)) * var(--fluid-ratio));
margin-top: calc(-128 * var(--comp-static));
@media (width >= 767px) {
margin-top: 0;
}
}
.p-flow__title {
display: grid;
font-size: calc(22 * var(--comp-static));
gap: calc((4 * var(--comp-sp) + 6 * var(--comp-wide)) * var(--fluid-ratio));
line-height: 1.4;
margin-block: var(--leading-trim);
padding-right: calc(120 * var(--comp-static));
position: relative;
z-index: 1;
@media (width >= 767px) {
font-size: calc(24 * var(--comp-static));
padding-right: 0;
padding-top: calc(24 * var(--comp-static));
}
}
.p-flow__title::before {
color: var(--color-gold-primary);
content: 'Step ' counter(flow-step);
font-size: calc((20 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
margin-block: var(--leading-trim);
margin-inline-start: 2px;
@media (width >= 767px) {
margin-inline-start: -1px;
}
}
.p-flow__br {
width: calc(100% - calc(160 * var(--comp-static)));
}
.p-flow__wrap-text {
display: grid;
gap: calc(20 * var(--comp-static));
padding-inline: calc(24 * var(--comp-static));
@media (width >= 767px) {
padding: 0;
}
}
.p-flow__label {
background-color: var(--color-gold-secondary);
border-radius: var(--global-radius);
font-size: calc(17 * var(--comp-static));
line-height: 1;
margin-block: var(--leading-trim);
margin-bottom: calc(-8 * var(--comp-static));
padding: calc(8 * var(--comp-static));
width: -moz-fit-content;
width: fit-content;
}
.p-flow__text {
font-size: calc(16 * var(--comp-static));
line-height: var(--base-line-height);
}
.p-flow__button {
@media (width >= 767px) {
margin-top: calc(-1 * var(--gutter-section));
}
}
.p-closing {
position: relative;
}
.p-closing__thumbnail {
aspect-ratio: 2/1;
width: 100%;
@media (width >= 767px) {
max-height: calc(588 * var(--comp-static));
}
}
.p-closing__inner {
background: url(/wp-content/themes/concord/assets/img/lp/bg_paper.webp) center center/cover
no-repeat;
margin: 0 var(--base-inner-padding) var(--gutter-section-top-bottom);
margin-top: calc(-48 * var(--comp-static));
padding: calc(20 * var(--comp-static)) var(--global-inner-xs) calc(24 * var(--comp-static));
position: relative;
@media (width >= 767px) {
margin: calc(-138 * var(--comp-static)) 10% var(--gutter-section-top-bottom);
padding: calc(24 * var(--comp-static)) calc(88 * var(--comp-static)) var(--gutter-section);
}
@media (width >= 1280px) {
margin: calc(-138 * var(--comp-static)) var(--global-inner-xs) var(--gutter-section-top-bottom);
padding: calc(24 * var(--comp-static)) calc(88 * var(--comp-static)) var(--gutter-section);
}
}
.p-closing__heading {
color: var(--color-gold-primary);
font-family: 'Cochin';
font-size: calc(26 * var(--comp-static));
font-weight: normal;
padding-bottom: calc(16 * var(--comp-static));
position: relative;
text-align: center;
}
.p-closing__heading::before {
background-image: linear-gradient(
to right,
transparent,
var(--color-gold-primary) 25%,
var(--color-gold-primary) 75%,
transparent
);
background-position: center;
background-repeat: no-repeat;
bottom: 0;
content: '';
height: 1px;
left: 0;
position: absolute;
right: 0;
width: 100%;
}
.p-closing__heading {
@media (width >= 767px) {
font-size: calc(48 * var(--comp-static));
padding-bottom: calc(24 * var(--comp-static));
}
}
.p-closing__title {
color: var(--color-black-primary);
font-size: calc(22 * var(--comp-static));
font-weight: 300;
line-height: 1.85;
margin-top: calc((20 * var(--comp-sp) + 32 * var(--comp-wide)) * var(--fluid-ratio));
padding-bottom: calc(20 * var(--comp-static));
text-align: center;
@media (width >= 767px) {
font-size: calc(30 * var(--comp-static));
}
}
.p-closing__text {
color: var(--color-black-secondary);
font-size: calc(16 * var(--comp-static));
line-height: var(--base-line-height);
margin-top: calc(16 * var(--comp-static));
padding-inline: calc(8 * var(--comp-static));
@media (width >= 767px) {
font-size: calc(18 * var(--comp-static));
line-height: 2;
padding-inline: 0;
text-align: center;
}
}
.p-closing__title + .p-closing__text {
margin-top: 0;
}
.p-closing__button {
margin-top: calc((16 * var(--comp-sp) + 40 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
}
}
.p-company {
margin-top: calc(-1 * var(--gutter-section-top-bottom));
}
.p-company__inner {
display: grid;
gap: var(--gutter-section);
padding: var(--gutter-section-top-bottom) var(--global-inner-xxs);
}
.p-company__title {
text-align: center;
@media (width >= 767px) {
font-size: calc(32 * var(--comp-static));
}
}
.p-company__data {
@media (width >= 767px) {
margin-inline: auto;
margin-top: calc(-1 * var(--gutter-section) / 2);
width: -moz-fit-content;
width: fit-content;
}
}
.p-company__wrap {
border-top: 1px solid var(--color-gray-primary);
display: grid;
gap: calc(8 * var(--comp-static));
grid-auto-flow: column;
grid-template-columns:
calc((80 * var(--comp-sp) + 160 * var(--comp-wide)) * var(--fluid-ratio))
1fr;
padding: calc(16 * var(--comp-static)) 0;
@media (width >= 767px) {
gap: 0;
padding: 0;
}
}
.p-company__wrap:last-child {
border-bottom: 1px solid var(--color-gray-primary);
}
.p-company__label {
color: var(--color-gold-primary);
font-weight: bold;
@media (width >= 767px) {
background-color: var(--color-gray-secondary);
padding: calc(16 * var(--comp-static));
text-align: center;
}
}
.p-company__text {
color: var(--color-black-secondary);
line-height: var(--base-line-height);
@media (width >= 767px) {
padding: calc(16 * var(--comp-static)) calc(32 * var(--comp-static));
}
}
.p-company__button {
@media (width >= 767px) {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
}
}
.l-footer {
background-color: var(--color-black-primary);
}
.l-footer__inner {
align-items: center;
display: flex;
flex-direction: column;
gap: calc(14 * var(--comp-static));
justify-content: center;
padding: calc(24 * var(--comp-static)) var(--base-inner-padding);
@media (width >= 767px) {
flex-direction: row;
justify-content: space-between;
padding: calc(32 * var(--comp-static)) var(--global-inner-m);
}
}
body:has(.c-button-sticky[data-sticky-button='true']) .l-footer__inner {
padding: calc(24 * var(--comp-static)) var(--base-inner-padding) calc(80 * var(--comp-static));
@media (width >= 767px) {
padding: calc(32 * var(--comp-static)) var(--global-inner-m);
}
}
.l-footer__logo {
@media (width >= 767px) {
height: auto;
width: calc(240 * var(--comp-static));
}
}
.l-footer__copyright {
color: #bababa;
font-family: 'Cochin';
font-size: calc(10 * var(--comp-static));
@media (width >= 767px) {
font-size: calc(14 * var(--comp-static));
}
}
.c-button-form {
background: rgba(0, 0, 0, 0) linear-gradient(180deg, #fcac00 0%, #c36900 100%) 0% 0% no-repeat
padding-box;
border-radius: var(--global-radius);
display: none;
overflow: hidden;
position: relative;
@media (width >= 767px) {
background: rgba(0, 0, 0, 0) linear-gradient(180deg, #fcac00 0%, #c36900 100%) 0% 0% no-repeat
padding-box;
border-radius: var(--global-radius);
display: block;
overflow: hidden;
position: relative;
}
}
.c-button-form__link {
align-items: center;
display: flex;
font-weight: 300;
font-weight: normal;
gap: calc((12 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
margin-inline: auto;
padding: calc(12 * var(--comp-static));
text-decoration: none;
width: -moz-fit-content;
width: fit-content;
@media (width >= 767px) {
padding: calc(18 * var(--comp-static)) calc(20 * var(--comp-static))
calc(18 * var(--comp-static)) calc(22 * var(--comp-static));
}
}
.c-button-form__label {
background-color: var(--color-white);
border-radius: var(--global-radius);
color: var(--color-gold-primary);
font-size: calc(18 * var(--comp-static));
font-weight: 600;
letter-spacing: 0.18em;
padding: calc((2 * var(--comp-sp) + 1 * var(--comp-wide)) * var(--fluid-ratio))
calc((6 * var(--comp-sp) + 9 * var(--comp-wide)) * var(--fluid-ratio))
calc((2 * var(--comp-sp) + 1 * var(--comp-wide)) * var(--fluid-ratio))
calc((8 * var(--comp-sp) + 13 * var(--comp-wide)) * var(--fluid-ratio));
white-space: nowrap;
@media (width >= 767px) {
font-size: calc(24 * var(--comp-static));
letter-spacing: 0.15em;
}
}
.p-closing__button .c-button-form__label {
font-size: calc((17 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
}
.c-button-form__text {
color: var(--color-white);
flex: 1;
font-size: calc(22 * var(--comp-static));
font-weight: 600;
letter-spacing: 0.1em;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32);
white-space: nowrap;
@media (width >= 767px) {
font-size: calc(26 * var(--comp-static));
letter-spacing: 0.1em;
}
}
.p-closing__button .c-button-form__text {
font-size: calc((19 * var(--comp-sp) + 26 * var(--comp-wide)) * var(--fluid-ratio));
}
.c-button-sticky {
background: rgba(0, 0, 0, 0) linear-gradient(180deg, #fcac00 0%, #c36900 100%) 0% 0% no-repeat
padding-box;
bottom: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
position: fixed;
transition: opacity 0.3s;
width: 100%;
z-index: 2;
}
.c-button-sticky[data-sticky-button='true'] {
opacity: 1;
pointer-events: all;
transition: opacity 0.3s;
}
.c-button-sticky {
@media (width >= 767px) {
display: none;
}
}
.c-button-sticky__link {
text-decoration: none;
}
.c-button-sticky__wrap {
align-items: center;
display: flex;
font-weight: 300;
font-weight: normal;
gap: calc(12 * var(--comp-static));
margin-inline: auto;
padding: calc(14 * var(--comp-static)) calc(12 * var(--comp-static));
text-decoration: none;
width: -moz-fit-content;
width: fit-content;
}
.c-button-sticky__label {
background-color: var(--color-white);
border-radius: var(--global-radius);
color: var(--color-gold-primary);
font-size: calc(20 * var(--comp-static));
font-weight: 600;
letter-spacing: 0.18em;
padding: calc(2 * var(--comp-static)) calc(6 * var(--comp-static)) calc(2 * var(--comp-static))
calc(8 * var(--comp-static));
white-space: nowrap;
}
.c-button-sticky__text {
color: var(--color-white);
flex: 1;
font-size: calc(22 * var(--comp-static));
font-weight: 600;
letter-spacing: 0.15em;
text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.32);
white-space: nowrap;
}
.c-button-back {
background-color: var(--color-white);
border: 1px solid var(--color-blue-primary);
color: var(--color-blue-primary);
font-weight: normal;
}
.c-button-confirm {
background-color: var(--color-blue-primary);
border: none;
color: var(--color-white);
}
.c-button-submit {
background-color: var(--color-blue-primary);
border: none;
color: var(--color-white);
}
#joblen_box,
#joblen_box_mb {
display: none;
}
.p-media-logo {
display: grid;
gap: calc(32 * var(--comp-static));
max-width: 100vw;
overflow-x: hidden;
}
.p-media-logo__scroll {
display: flex;
max-width: 100vw;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
position: relative;
width: 100%;
}
.p-media-logo__scroll:first-child {
margin-top: calc(24 * var(--comp-static));
}
.p-media-logo__scroll:last-child {
margin-bottom: var(--gutter-section-top-bottom);
@media (width >= 767px) {
margin-bottom: 0;
}
}
.p-media-logo__list {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-shrink: 0;
gap: calc((32 * var(--comp-sp) + 64 * var(--comp-wide)) * var(--fluid-ratio));
padding-right: calc((32 * var(--comp-sp) + 64 * var(--comp-wide)) * var(--fluid-ratio));
will-change: transform;
}
.p-media-logo__item {
align-items: center;
display: flex;
flex-shrink: 0;
height: auto;
justify-content: center;
width: -moz-fit-content;
width: fit-content;
}
.p-media-logo__image {
max-height: calc((60 * var(--comp-sp) + 120 * var(--comp-wide)) * var(--fluid-ratio));
max-width: calc((140 * var(--comp-sp) + 240 * var(--comp-wide)) * var(--fluid-ratio));
-o-object-fit: contain;
object-fit: contain;
width: 100%;
@media (width >= 767px) {
height: -moz-fit-content;
height: fit-content;
}
}
.p-media-logo__image[src*='php'] {
width: calc((80 * var(--comp-sp) + 120 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-media-logo__image[src*='toudai'] {
width: calc((90 * var(--comp-sp) + 140 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-media-logo__image[src*='diamond_online'],
.p-media-logo__image[src*='hbr'],
.p-media-logo__image[src*='hitotsubashi'] {
width: calc((110 * var(--comp-sp) + 160 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-media-logo__image[src*='tetsuryoku'] {
width: calc((100 * var(--comp-sp) + 180 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-media-logo__image[src*='business'] {
width: calc((110 * var(--comp-sp) + 200 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-media-logo__image[src*='touyou'] {
width: calc((140 * var(--comp-sp) + 220 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-media-logo__scroll[data-direction='left'] .p-media-logo__list:first-child {
animation: scroll-left 160s -80s linear infinite;
}
.p-media-logo__scroll[data-direction='left'] .p-media-logo__list:last-child {
animation: scroll-left2 160s linear infinite;
}
.p-media-logo__scroll[data-direction='right'] .p-media-logo__list:first-child {
animation: scroll-right 160s -80s linear infinite;
}
.p-media-logo__scroll[data-direction='right'] .p-media-logo__list:last-child {
animation: scroll-right2 160s linear infinite;
}
@keyframes scroll-left {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes scroll-left2 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
@keyframes scroll-right {
0% {
transform: translateX(-100%);
}
to {
transform: translateX(100%);
}
}
@keyframes scroll-right2 {
0% {
transform: translateX(-200%);
}
to {
transform: translateX(0);
}
}
.p-seminar-logo {
display: grid;
gap: calc(32 * var(--comp-static));
max-width: 100vw;
overflow-x: hidden;
}
.p-seminar-logo__scroll {
display: flex;
margin-block: calc((16 * var(--comp-sp) + 24 * var(--comp-wide)) * var(--fluid-ratio));
max-width: 100vw;
overflow: hidden;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
position: relative;
width: 100%;
}
.p-seminar-logo__list {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
display: flex;
flex-shrink: 0;
gap: calc((32 * var(--comp-sp) + 48 * var(--comp-wide)) * var(--fluid-ratio));
padding-right: calc((32 * var(--comp-sp) + 48 * var(--comp-wide)) * var(--fluid-ratio));
will-change: transform;
}
.p-seminar-logo__item {
align-items: center;
display: flex;
flex-shrink: 0;
height: auto;
justify-content: center;
width: -moz-fit-content;
width: fit-content;
}
.p-seminar-logo__image {
height: -moz-fit-content;
height: fit-content;
max-height: calc((46 * var(--comp-sp) + 64 * var(--comp-wide)) * var(--fluid-ratio));
max-width: calc((160 * var(--comp-sp) + 240 * var(--comp-wide)) * var(--fluid-ratio));
-o-object-fit: contain;
object-fit: contain;
@media (width >= 767px) {
height: -moz-fit-content;
height: fit-content;
}
}
.p-seminar-logo__image[src*='bcg'] {
height: -moz-fit-content;
height: fit-content;
width: calc((60 * var(--comp-sp) + 80 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-seminar-logo__image[src*='deloitte'] {
height: -moz-fit-content;
height: fit-content;
width: calc((100 * var(--comp-sp) + 120 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-seminar-logo__image[src*='accenture'] {
height: -moz-fit-content;
height: fit-content;
width: calc((110 * var(--comp-sp) + 140 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-seminar-logo__image[src*='kpmg'] {
height: -moz-fit-content;
height: fit-content;
width: calc((90 * var(--comp-sp) + 120 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-seminar-logo__image[src*='ey'] {
height: -moz-fit-content;
height: fit-content;
@media (width >= 767px) {
width: calc(120 * var(--comp-static));
}
}
.p-seminar-logo__scroll[data-direction='left'] .p-seminar-logo__list:first-child {
animation: scroll-left3 160s -80s linear infinite;
}
.p-seminar-logo__scroll[data-direction='left'] .p-seminar-logo__list:last-child {
animation: scroll-left4 160s linear infinite;
}
@keyframes scroll-left3 {
0% {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}
@keyframes scroll-left4 {
0% {
transform: translateX(0);
}
to {
transform: translateX(-200%);
}
}
.wpcf7 {
display: contents;
}
.wpcf7-form {
display: contents;
}
.wpcf7-form-control-wrap {
display: contents;
}
.wpcf7-not-valid-tip:not(:root) {
color: var(--color-red-validation);
display: block;
font-size: calc(13 * var(--comp-static));
}
.wpcf7-validates-as-required {
background-color: var(--color-form-required);
}
.wpcf7-validation-errors:not(:root),
.wpcf7-acceptance-missing:not(:root) {
display: none !important;
}
.wpcf7-mail-sent-ok:not(:root) {
display: none !important;
}
.wpcf7-spam-blocked:not(:root) {
display: none !important;
}
.wpcf7c-conf {
display: none !important;
}
.wpcf7c-conf-hidden {
display: none !important;
}
.wpcf7 .ajax-loader {
display: none !important;
}
.p-form {
@media (width >= 767px) {
background: url(/wp-content/themes/concord/assets/img/lp/bg_paper.webp) center center/cover
no-repeat;
filter: sepia(0.1);
padding: var(--gutter-section-top-bottom) 10%;
}
@media (width >= 1024px) {
padding: var(--gutter-section-top-bottom)
calc(var(--global-inner-xxs) - calc(48 * var(--comp-static)));
}
}
.p-form__inner {
display: grid;
gap: var(--gutter-section);
padding: var(--gutter-section-top-bottom) var(--global-inner-xxs);
position: relative;
}
.p-form__inner::before {
background: url(/wp-content/themes/concord/assets/img/lp/bg_paper.webp) center center/cover
no-repeat;
content: '';
filter: opacity(0.5);
height: 100%;
position: absolute;
width: 100%;
z-index: -1;
}
.p-form__inner {
@media (width >= 767px) {
background: var(--color-white);
border-radius: var(--global-radius);
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.12),
0 1px 5px 0 rgba(0, 0, 0, 0.2);
font-size: calc(16 * var(--comp-static));
gap: calc(32 * var(--comp-static));
overflow: hidden;
padding: calc(64 * var(--comp-static)) calc(48 * var(--comp-static));
position: relative;
}
}
.p-form__heading {
display: grid;
gap: calc(6 * var(--comp-static));
}
.p-form__heading::after {
background-image: linear-gradient(
to right,
transparent,
var(--color-gold-primary) 50%,
transparent
);
background-position: center;
background-repeat: no-repeat;
content: '';
display: block;
height: 1px;
position: relative;
top: calc(14 * var(--comp-static));
width: 100%;
}
.p-form__body {
display: grid;
gap: calc((20 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
margin-top: calc(16 * var(--comp-static));
@media (width >= 767px) {
margin-inline: auto;
width: -moz-fit-content;
width: fit-content;
}
}
.p-form__field {
display: grid;
gap: calc((12 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
@media (width >= 767px) {
align-items: baseline;
grid-template-columns: calc(210 * var(--comp-static)) 1fr;
min-height: 24px;
}
}
.p-form__field:has(.p-form__button) {
@media (width >= 767px) {
grid-template-columns: none;
justify-content: center;
margin-top: calc(32 * var(--comp-static));
}
}
.wpcf7-form.invalid > .p-form__field:nth-child(6 of .p-form__field) .wpcf7-not-valid-tip {
margin-top: calc(-12 * var(--comp-static));
}
.wpcf7-form.failed .p-form__field:has(.p-form__confirm:empty) {
@media (width >= 767px) {
align-items: center;
}
}
.p-form__wrap {
align-items: start;
display: grid;
gap: calc(8 * var(--comp-static));
}
.p-form__wrap[data-column='1'] {
grid-template-columns: repeat(1, 1fr);
}
.p-form__wrap[data-column='2'] {
grid-template-columns: repeat(2, 1fr);
}
.p-form__wrap[data-column='3'] {
grid-template-columns: repeat(3, 1fr);
}
.p-form__wrap[data-column='4'] {
grid-template-columns: repeat(4, 1fr);
}
.p-form__wrap[data-column='2'],
.p-form__wrap[data-column='3'] {
gap: 0 calc(15 * var(--comp-static));
}
.p-form__wrap {
@media (width >= 767px) {
gap: calc(16 * var(--comp-static));
}
}
.p-form__wrap:has(.wpcf7c-conf) {
grid-template-columns: auto 1fr !important;
justify-content: start;
}
.p-form__wrap:has(.js-family-name) .wpcf7-not-valid-tip {
display: none;
}
.p-form__wrap:has(.js-family-name):has(.wpcf7-not-valid-tip)::after {
color: var(--color-red-validation);
content: '必須項目です。入力してください.';
display: block;
font-size: calc(14 * var(--comp-static));
grid-column: 1/-1;
line-height: 1.5;
margin-top: calc(3 * var(--comp-static));
width: 100%;
}
.p-form__wrap:has(.js-family-kana) .wpcf7-not-valid-tip {
display: none;
}
.p-form__wrap:has(.js-family-kana):has(.wpcf7-not-valid-tip)::after {
color: var(--color-red-validation);
content: '必須項目です。入力してください.';
display: block;
font-size: calc(14 * var(--comp-static));
grid-column: 1/-1;
line-height: 1.5;
margin-top: calc(3 * var(--comp-static));
width: 100%;
}
.p-form__wrap:has(.js-birth-year) .wpcf7-not-valid-tip {
display: none;
}
.p-form__wrap:has(.js-birth-year):has(.wpcf7-not-valid-tip)::after {
color: var(--color-red-validation);
content: '必須項目です。入力してください.';
display: block;
font-size: calc(14 * var(--comp-static));
grid-column: 1/-1;
line-height: 1.5;
margin-top: calc(3 * var(--comp-static));
width: 100%;
}
.p-form__wrap[data-column='1'] .wpcf7-not-valid-tip {
margin-top: calc(-12 * var(--comp-static));
}
.wpcf7-form.invalid .p-form__wrap[data-column='1'] .wpcf7-not-valid-tip {
margin-top: 0;
}
.p-form__wrap[data-column='labeling'] {
grid-template-columns: calc(64 * var(--comp-static)) 1fr;
@media (width >= 767px) {
gap: calc(8 * var(--comp-static));
}
}
.p-form__wrap[data-column='labeling-column'] {
grid-template-columns: calc(64 * var(--comp-static)) 1fr;
grid-template-rows: repeat(2, 1fr);
@media (width >= 767px) {
gap: calc(8 * var(--comp-static));
grid-template-columns: calc(64 * var(--comp-static)) repeat(2, 1fr);
grid-template-rows: 1fr;
}
}
.p-form__wrap[data-column='labeling-column'] > *:nth-child(1) {
grid-area: 1/1/3/2;
@media (width >= 767px) {
grid-area: 1/1/2/2;
}
}
.p-form__wrap[data-column='labeling-column'] > *:nth-child(2) {
grid-area: 1/2/2/3;
@media (width >= 767px) {
grid-area: 1/2/2/3;
}
}
.p-form__wrap[data-column='labeling-column'] > *:nth-child(3) {
grid-area: 2/2/3/3;
@media (width >= 767px) {
grid-area: 1/3/2/4;
}
}
.wpcf7-form.failed .p-form__wrap[data-column^='labeling'] {
display: none;
}
.p-form__label {
align-items: baseline;
display: flex;
gap: calc(2 * var(--comp-static));
margin-block: var(--leading-trim);
@media (width >= 767px) {
flex-direction: row-reverse;
justify-content: flex-end;
}
}
.wpcf7-form.failed .p-form__label {
@media (width >= 767px) {
padding-top: 0;
}
}
.p-form__birth {
align-items: center;
display: grid;
gap: calc(8 * var(--comp-static));
grid-auto-flow: column;
grid-template-columns: 1fr calc(20 * var(--comp-static));
}
.wpcf7-form.failed .p-form__birth {
display: none;
}
.p-form__text {
color: var(--color-black-primary);
font-size: calc((14 * var(--comp-sp) + 16 * var(--comp-wide)) * var(--fluid-ratio));
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
white-space: nowrap;
}
.p-form__confirm {
color: var(--color-black-primary);
font-size: calc(16 * var(--comp-static));
grid-column: 1/-1;
word-break: break-all;
word-wrap: break-word;
}
.p-form__confirm:empty {
display: none;
}
.p-form__error {
grid-column: 1/-1;
margin-block: var(--leading-trim);
}
.p-form__error:empty {
display: none;
}
.p-form__error[data-error-group='name'],
.p-form__error[data-error-group='kana'],
.p-form__error[data-error-group='birth'] {
display: none;
}
.p-form__error {
@media (width >= 767px) {
margin-top: calc(-12 * var(--comp-static));
}
}
.p-form__consent {
display: flex;
font-size: calc(14 * var(--comp-static));
justify-content: center;
text-align: center;
}
.wpcf7-form.failed .p-form__consent {
display: none;
}
.p-form__button {
align-items: center;
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap;
gap: calc(20 * var(--comp-static));
justify-content: center;
position: relative;
}
.p-form__button .wpcf7-spinner {
left: 50%;
margin: 0 0 0 calc(180 * var(--comp-static));
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.p-form__button {
@media (width >= 767px) {
flex-direction: inherit;
flex-wrap: nowrap;
}
}
.p-form__button > * {
@media (width >= 767px) {
flex: 1 0 calc(320 * var(--comp-static));
}
}
.p-form select.c-form-input:not(:root) {
color: var(--color-black-secondary);
opacity: 1;
-webkit-text-fill-color: var(--color-black-secondary);
}
.p-form select.c-form-input:not(:root) option {
color: var(--color-black-secondary);
font-weight: 400;
opacity: 1;
-webkit-text-fill-color: var(--color-black-secondary);
}
.p-form select.c-form-input:not(:root) option:first-child {
color: var(--color-gray-placeholder);
-webkit-text-fill-color: var(--color-gray-placeholder);
}
.c-heading-form--ja {
font-size: calc((24 * var(--comp-sp) + 32 * var(--comp-wide)) * var(--fluid-ratio));
text-align: center;
}
.c-heading-form--en {
color: var(--color-gold-primary);
font-size: calc((16 * var(--comp-sp) + 18 * var(--comp-wide)) * var(--fluid-ratio));
text-align: center;
}
input::-moz-placeholder,
textarea::-moz-placeholder {
color: #acacac;
font-feature-settings: 'palt' 1;
font-size: calc(14 * var(--comp-static));
letter-spacing: 0.05em;
}
input::placeholder,
textarea::placeholder,
select:invalid {
color: #acacac;
font-feature-settings: 'palt' 1;
font-size: calc(14 * var(--comp-static));
letter-spacing: 0.05em;
}
input::-moz-placeholder:focus,
textarea::-moz-placeholder:focus {
font-size: calc(14 * var(--comp-static));
}
input::placeholder:focus,
textarea::placeholder:focus,
select:invalid:focus {
font-size: calc(14 * var(--comp-static));
}
.c-label-name {
font-size: calc((14 * var(--comp-sp) + 15 * var(--comp-wide)) * var(--fluid-ratio));
}
.p-form__wrap[data-column='labeling'] .c-label-name {
text-align: justify;
-moz-text-align-last: justify;
text-align-last: justify;
}
.wpcf7-form .p-form__wrap[data-column^='labeling'] .c-label-name {
padding-top: calc(6 * var(--comp-static));
}
.wpcf7-form.failed .p-form__wrap[data-column^='labeling'] .c-label-name {
display: none;
}
.c-label-required {
color: var(--color-red-validation);
font-size: calc(12 * var(--comp-static));
font-weight: normal;
line-height: 1;
@media (width >= 767px) {
margin-block: var(--leading-trim);
}
}
.c-label-optional {
color: var(--color-black-primary);
font-size: calc(12 * var(--comp-static));
font-weight: normal;
line-height: 1;
}
.c-form-input:required {
background-color: var(--color-form-required);
}
.c-form-input:valid:-webkit-autofill {
background-color: var(--color-form-required);
box-shadow: 0 0 1000px var(--color-form-required) inset;
font-size: var(--font-size-input);
}
.c-form-input:focus {
border-color: var(--color-gold-primary);
box-shadow: 0 0 0 0px var(--color-gold-primary);
font-size: var(--font-size-input);
font-size: var(--font-size-input);
outline: none;
}
.c-form-select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
position: relative;
}
.c-form-select::after {
background: url(/wp-content/themes/concord/assets/img/lp/arrow.svg) no-repeat;
background-size: contain;
content: '';
display: block;
height: calc(12 * var(--comp-static));
margin-top: calc(4 * var(--comp-static));
pointer-events: none;
position: absolute;
right: calc(8 * var(--comp-static));
top: 50%;
transform: translateY(-50%) rotate(90deg);
width: calc(12 * var(--comp-static));
z-index: 1;
}
.c-form-select:focus {
border-color: var(--color-gold-primary);
box-shadow: 0 0 0 0px var(--color-gold-primary);
font-size: var(--font-size-input);
outline: none;
}
.c-form-select select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
}
.c-form-textarea {
border: 1px solid var(--color-gray-primary);
border-radius: var(--global-radius);
font-family: inherit;
font-size: var(--font-size-input);
height: 3lh;
line-height: 1.4;
max-height: 10lh;
padding: calc(10 * var(--comp-static));
resize: vertical;
width: 100%;
}
.c-form-textarea:focus {
border-color: var(--color-gold-primary);
box-shadow: 0 0 0 0px var(--color-gold-primary);
font-size: var(--font-size-input);
outline: none;
}
.c-form-textarea::-moz-placeholder {
color: var(--color-gray-primary);
font-feature-settings: 'palt' 1;
letter-spacing: 0.05em;
}
.c-form-textarea::placeholder {
color: var(--color-gray-primary);
font-feature-settings: 'palt' 1;
letter-spacing: 0.05em;
}
.wpcf7-radio,
.wpcf7-checkbox {
display: grid;
gap: calc(8 * var(--comp-static));
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
.wpcf7-form.failed :is(.wpcf7-radio, .wpcf7-checkbox) {
display: none;
}
:is(.wpcf7-radio, .wpcf7-checkbox) .wpcf7-list-item {
margin: 0;
}
:is(.wpcf7-radio, .wpcf7-checkbox) label {
align-items: center;
background-color: var(--color-white);
border: 1px solid var(--color-gray-primary);
border-radius: var(--global-radius);
cursor: pointer;
display: grid;
font-size: var(--font-size-input);
gap: calc(8 * var(--comp-static));
grid-auto-flow: column;
grid-template-columns: calc(12 * var(--comp-static)) 1fr;
height: var(--height-input);
justify-content: flex-start;
margin: 0;
padding: 0 calc(10 * var(--comp-static));
}
:is(.wpcf7-radio, .wpcf7-checkbox).wpcf7-validates-as-required {
background-color: rgba(0, 0, 0, 0);
}
:is(.wpcf7-radio, .wpcf7-checkbox):is(.wpcf7-validates-as-required, .js-gender) label {
background-color: var(--color-form-required);
}
.wpcf7cp-form-hide:not(:root) {
display: none;
}
#wpcf7cpcnf:not(:root) {
margin-top: calc(40 * var(--comp-static));
padding: 0;
position: relative;
z-index: 1;
}
#wpcf7cpcnf:not(:root),
#wpcf7cpcnf:not(:root) * {
box-sizing: border-box;
}
#wpcf7cpcnf:not(:root) table {
border-collapse: separate;
border-spacing: 0 calc(24 * var(--comp-static));
display: block;
table-layout: fixed;
width: 100%;
@media (width >= 767px) {
display: table;
}
}
#wpcf7cpcnf:not(:root) table tbody {
display: block;
width: 100%;
@media (width >= 767px) {
display: table-row-group;
}
}
#wpcf7cpcnf:not(:root) table tr {
display: block;
margin-bottom: calc(20 * var(--comp-static));
width: 100%;
@media (width >= 767px) {
display: table-row;
margin-bottom: 0;
}
}
#wpcf7cpcnf:not(:root) table th,
#wpcf7cpcnf:not(:root) table td {
background: rgba(0, 0, 0, 0);
border: none;
display: block;
padding: 0;
text-align: left;
vertical-align: top;
width: 100%;
@media (width >= 767px) {
display: table-cell;
}
}
#wpcf7cpcnf:not(:root) table th {
color: var(--color-black-primary);
font-size: calc(15 * var(--comp-static));
font-weight: normal;
line-height: 1.8;
margin-bottom: calc(6 * var(--comp-static));
padding-right: 0;
@media (width >= 767px) {
margin-bottom: 0;
padding-right: calc(20 * var(--comp-static));
width: calc(220 * var(--comp-static));
}
}
#wpcf7cpcnf:not(:root) table th .c-label-required,
#wpcf7cpcnf:not(:root) table th .required {
color: var(--color-red-validation);
font-weight: 700;
margin-right: calc(8 * var(--comp-static));
}
#wpcf7cpcnf:not(:root) table th .c-label-optional,
#wpcf7cpcnf:not(:root) table th .optional {
color: var(--color-black-primary);
font-weight: 400;
margin-right: calc(8 * var(--comp-static));
}
#wpcf7cpcnf:not(:root) table td {
color: var(--color-black-primary);
font-size: calc(15 * var(--comp-static));
line-height: 1.8;
word-break: break-word;
}
#wpcf7cpcnf:not(:root) table td br {
display: none;
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns {
align-items: center;
display: flex;
flex-direction: column;
flex-wrap: wrap;
gap: calc((12 * var(--comp-sp) + 20 * var(--comp-wide)) * var(--fluid-ratio));
justify-content: center;
margin-top: calc(40 * var(--comp-static));
@media (width >= 767px) {
flex-direction: row;
}
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns input:is([type='button'], [type='submit']),
#wpcf7cpcnf:not(:root) .wpcf7cp-btns button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border-radius: calc(4 * var(--comp-static));
cursor: pointer;
font-size: calc(24 * var(--comp-static));
font-weight: 700;
height: calc(70 * var(--comp-static));
line-height: 1;
min-width: 100%;
padding: 0 calc(24 * var(--comp-static));
transition: 0.2s;
width: 100%;
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns input[type='button'],
#wpcf7cpcnf:not(:root) .wpcf7cp-btns input[type='submit'],
#wpcf7cpcnf:not(:root) .wpcf7cp-btns button {
@media (width >= 767px) {
min-width: calc(320 * var(--comp-static));
width: auto;
}
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns input[type='button'],
#wpcf7cpcnf:not(:root) .wpcf7cp-btns button[type='button'] {
background-color: var(--color-white);
border: 1px solid var(--color-blue-confirm);
color: var(--color-blue-confirm);
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns input[type='button']:hover,
#wpcf7cpcnf:not(:root) .wpcf7cp-btns button[type='button']:hover {
opacity: 0.85;
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns .wpcf7-submit {
background-color: var(--color-blue-confirm);
border: 1px solid var(--color-blue-confirm);
color: var(--color-white);
order: 1;
@media (width >= 767px) {
order: initial;
}
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns .wpcf7-submit:hover {
opacity: 0.85;
}
#wpcf7cpcnf:not(:root) .wpcf7cp-btns .wpcf7cp-cfm-edit-btn {
order: 2;
@media (width >= 767px) {
order: initial;
}
}
@property --color-darkest {
inherits: false;
initial-value: #3a3a3a;
syntax: '';
}
@property --color-lightest {
inherits: false;
initial-value: #fcfcfc;
syntax: '';
}
@property --duration-default {
inherits: false;
initial-value: 0.3s;
syntax: '