@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP&family=Shippori+Mincho+B1:wght@600&display=swap");
/* ===================================
基本設定
=================================== */
html{ overflow-y:scroll;
font-size: 62.5%;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
}
li { list-style: none; }
/* ===================================
共通
=================================== */
/* フォント */
body {
font-family: var(--fontfamily_base);
}
select,input,button,textarea {
font-family: var(--fontfamily_base);
}
/* ===================================
画面全体のレイアウト
=================================== */
/* 画面全体の表示設定 */
body {
background:#fff;
text-align:left;
}
/* フォームエリア全体の設定 */
div.container {
width:100%; /* 画面の横幅 */
background:white; /* 背景色 */
border:none; /* 外枠のラインの色と太さ */
font-size:14px; /* フォントの初期サイズ */
color: rgb(var(--color-secondary-500)); /* フォントの初期カラー */
margin:0 auto; /* 画面の中央に表示 */
text-align:left; /* 左寄せ */
overflow: hidden;
}
/* ===================================
設問エリアのレイアウト
=================================== */
/* 設問エリア全体の設定 */
div.wrapper {
width:100%; /* 画面の横幅 */
margin:0 auto; /* 中央に表示 */
background:white;
}
/* 設問の表 */
/* 設問の行 */
/*設問名のセルのデザイン */
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
background:White;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
font-size:12px;
padding-left:10px;
color:DarkSlateGray;
border-bottom:GhostWhite 1px solid;
background:White;
}
/* 入力セルの「氏」「名」の文字のデザイン */
span.label_name {
padding-right:5px;
font-size:85%;
font-weight:bold;
color:DarkSlateGray;
}
/* 入力確認画面、完了画面の入力された文字のデザイン */
p.value {
font-size:110%;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width:940px;
margin:10px auto 10px auto; /* 中央に表示、上下に10pxの余白 */
background:GhostWhite;
padding:10px 0 10px 0; /* ボタンとの上下の隙間のサイズ */
text-align:center; /* 中央にボタンを表示 */
}
/* 入力エラーメッセージのデザイン */
div.message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size:14px;
font-weight:bold;
color:OrangeRed;
background:LightYellow;
}
/* 公開終了メッセージのデザイン */
div.finished-message {
padding:5px 10px 5px 10px; /* メッセージテキストと背景色の隙間のサイズ */
margin:10px 13px 10px 13px; /* 上 右 下 左 の隙間のサイズ */
font-size:14px;
font-weight:bold;
color:Crimson;
background:MistyRose;
}
/* ===================================
入力コントロールのデザイン
=================================== */
/* 確認／送信／戻る／登録ボタン */
input[type=button] {
font-size:18px;
background:SteelBlue; /* ボタンの色 */
padding:5px 10px 2px 10px; /* ボタンの文字の 上 右 下 左 の隙間のサイズ */
margin:0px 10px 0px 10px; /* 確認画面に表示される2つのボタンの左右の余白サイズ */
border:none; /* ボタンに枠線をつけたい場合は、ここを設定してください */
color:white; /* 文字の色 */
font-weight:bold;
}
input[type=button]:hover { cursor: pointer; }
/* 入力中のフィールドの背景色 */
/* それぞれの入力フィールドにカーソルが移動したときに背景の色が変わります。不要な場合は削除してください。 */
input[type="text"]:focus { background-color:LightYellow; } /* テキストボックス */
select:focus { background-color:LightYellow; } /* プルダウン */
textarea:focus { background-color:LightYellow; } /* テキストエリア */
/* ===================================
必須項目のマークおよびメッセージなど
=================================== */
/* 必須項目のマーク */
span.required {
float:right;
margin-right:4px;
font-size:60%;
font-weight:bold;
color:OrangeRed;
}
span.required:after {
/* ここを編集することで表示されるマークを変更できます */
content:"※必須";
}
/* 必須項目についての説明文 */
p.required_msg {
text-align:right;
margin-right:4px;
font-size:80%;
font-weight:bold;
color:OrangeRed;
}
p.required_msg:after {
/* ここを編集することで表示されるマークを変更できます */
content:"「※必須」となっている項目は必ず入力してください。";
}
/* メールアドレスの再入力メッセージ */
p.label_mail {
margin:5px 0 1px 0;
font-size:85%;
font-weight:bold;
color:DarkSlateGray;
}
p.label_mail:after {
/* ここを編集することで表示されるメッセージを変更できます */
content:"確認のため、もう一度メールアドレスを入力してください";
}
/* ===================================
スマートフォン表示用のレイアウト
=================================== */
/* スマートフォンとして認識する画面の横幅のサイズ */
@media screen and ( max-width:479px ) {
/* フォームエリア全体の設定 */
div.container {
width: 100%;
}
/* 設問エリア全体の設定 */
div.wrapper {
width: 100%;
}
/* 設問の表 */
table.items {
width: 100%;
}
/*設問名のセルのデザイン */
td.label {
float: left;
width: 95%;
height: 25px;
padding-top:10px;
}
/* 必須項目のマーク */
span.required {
float:initial;
}
/* 設問の入力セルおよび表示セルのデザイン */
td.value {
float: left;
width: 95%; /* 入力コントロールの幅に合わせて調整してください */
padding-bottom: 0px;
}
/* 設問の入力例/説明セルのデザイン */
td.comment {
float: left;
width: 95%;
padding: 0px 2px 10px 2px;
}
/* 設問の入力例/テキストボックス */
input[type="text"]{
font-size: 120%;
width: 95% !important;
}
/* 設問の入力例/テキストエリア */
textarea {
width: 95%;
height: 100px;
}
/* ボタンの表示エリアの設定 */
div.button_area {
width: 95%;
}
}
:root {
--color-secondary-100: 174,177,197;
--color-secondary-300: 109,109,109;
--color-secondary-400: 51,89,120;
--color-secondary-500: 8,13,45;
--color-accent-500: 175,160,63;
--color-surface-500: 255,255,255;
--color-grayscale-100: 244,244,244;
--color-grayscale-500: 204,204,204;
--color-grayscale-800: 136,136,136;
--fontfamily_base: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
--font_color_base: rgb(var(--color-secondary-500));
--font_size_base: 1.4rem;
--line-height_base: 2;
--line-height_snug: 1.6;
--letter-spacing_base: .08em;
--fontfamily_serif: "Shippori Mincho B1", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
--font_weight_serif: 600;
--fontfamily_en: "Cormorant Garamond", serif;
--font_weight_en: 500;
--line-height_en: 1.1;
--letter-spacing_en: 0em;
--contents_width: 1100px;
--contents_wide_width: 1490px;
--body_padding_side: 20px;
--contents_width_with_padding: 1260px;
--contents_mid_width_with_padding: 1420px;
--contents_wide_width_with_padding: 1650px;
--sidebar_width: 270px;
--header_height: 90px;
--ease_underline: cubic-bezier(0.45, 0.12, 0.04, 0.96);
}
@media (min-width: 768px) {
:root {
--body_padding_side: 80px;
--header_height: 180px;
--font_size_base: 1.6rem;
}
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, a, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, menu, nav, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
}
html {
font-size: 62.5%;
word-break: break-all;
}
body {
-webkit-text-size-adjust: 100%;
}
article, aside, details, figcaption, figure,
main, footer, header, menu, nav, section {
display: block;
}
h1, h2, h3, h4, h5, h6 {
word-break: break-word;
line-break: strict;
overflow-wrap: break-word;
word-wrap: break-word;
}
ul:not([class]),
ol:not([class]) {
padding-left: 1.25em;
}
ul[class],
ol[class] {
list-style: none;
}
span {
font-weight: inherit;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
content: none;
}
a {
color: inherit;
}
@media (hover: hover) and (pointer: fine) {
a:hover {
text-decoration: none;
}
}
a[class] {
text-decoration: none;
}
ins {
background-color: #ff9;
text-decoration: none;
}
mark {
background-color: #ff9;
font-weight: bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom: 1px dotted;
cursor: help;
}
address {
font-style: normal;
}
sup {
vertical-align: text-top;
font-size: 0.75em;
}
sub {
vertical-align: text-bottom;
font-size: 0.75em;
}
table {
width: 100%;
table-layout: fixed;
border-collapse: collapse;
border-spacing: 0;
}
hr {
display: block;
height: 1px;
border: 0;
border-top: 1px solid rgb(var(rgba(var(--color-grayscale-900), 0.6)));
margin: 1em 0;
padding: 0;
}
img {
max-width: 100%;
height: auto;
vertical-align: bottom;
}
iframe {
max-width: 100%;
}
/* form
================================================== */
input[type=text], input[type=email], input[type=tel], textarea, button, select, option {
display: block;
width: 100%;
max-width: 100%;
font-family: inherit;
outline: none;
border: 1px solid;
border-radius: 0;
background: none;
}
@media (max-width: 767px) {
input[type=text], input[type=email], input[type=tel], textarea, button, select, option {
font-size: 1.6rem;
}
}
input[type=text], input[type=email], input[type=tel], textarea, button {
-webkit-appearance: none;
appearance: none;
}
input[type=radio], input[type=checkbox] {
margin: 0;
padding: 0;
vertical-align: middle;
}
select {
color: inherit;
}
textarea {
resize: vertical;
}
button {
color: inherit;
font-weight: normal;
cursor: pointer;
text-align: left;
font: inherit;
}
/* 02_base
================================================ */
html {
scroll-behavior: smooth;
scroll-padding-top: var(--header_height);
}
body {
min-width: 320px;
font-family: var(--fontfamily_base);
color: var(--font_color_base);
font-size: var(--font_size_base);
line-height: var(--line-height_base);
letter-spacing: var(--letter-spacing_base);
-webkit-text-size-adjust: 100%;
}
@media (min-width: 768px) {
body {
min-width: var(--contents_width_with_padding);
}
}
@media (min-width: 768px) and (hover: none) {
body {
-webkit-text-size-adjust: none;
}
}
.l-wrapper {
position: relative;
}
@media (min-width: 768px) {
.l-container.is-col2 {
display: grid;
grid-template-columns: auto var(--sidebar_width);
gap: 0 80px;
width: var(--contents_width);
margin: 0 auto;
}
.l-container.is-col2 .l-contents {
grid-area: 1/1/2/2;
}
.l-container.is-col2 .l-sidebar {
grid-area: 1/2/2/3;
}
}
/* sp <--> tb <--> pc
-------------------------------------- */
.u-media-query {
display: none;
font-family: "sp";
}
@media (min-width: 768px) {
.u-media-query {
font-family: "tb";
}
}
@media (min-width: 1261px) {
.u-media-query {
font-family: "pc";
}
}
@media (max-width: 1259px) {
.u-view-pc {
display: none !important;
}
}
@media (max-width: 767px) {
.u-view-tb {
display: none !important;
}
}
@media (min-width: 1261px) {
.u-view-tb {
display: none !important;
}
}
@media (min-width: 768px) {
.u-view-sp {
display: none !important;
}
}
@media (min-width: 1261px) {
.u-view-under-tb {
display: none !important;
}
}
@media (max-width: 767px) {
.u-view-upper-tb {
display: none !important;
}
}
/* overflow
-------------------------------------- */
.u-overflow-wrap {
overflow: auto;
}
.u-overflow-wrap .u-overflow-sec {
overflow: hidden;
}
@media (min-width: 768px) {
.u-overflow-wrap .u-overflow-sec {
min-width: var(--contents_width_with_padding);
}
}
/* font
-------------------------------------- */
.u-font-en {
font-family: var(--fontfamily_en);
font-weight: var(--font_weight_en);
line-height: var(--line-height_en);
letter-spacing: var(--letter-spacing_en);
}
.u-font-serif {
font-family: var(--fontfamily_serif);
font-weight: var(--font_weight_serif);
}
/* text
-------------------------------------- */
.u-uppercase {
text-transform: uppercase;
}
.u-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
/* link
-------------------------------------- */
a.u-alpha {
display: block;
text-decoration: none;
}
@media (hover: hover) and (pointer: fine) {
a.u-alpha {
transition: all 0.3s ease;
}
a.u-alpha:hover {
opacity: 0.7;
}
}
a.u-zoom {
display: block;
text-decoration: none;
}
a.u-zoom .u-zoom__img {
display: block;
}
a.u-zoom .u-zoom__img-wrap {
display: block;
overflow: hidden;
}
@media (min-width: 768px) {
a.u-zoom .u-zoom__img {
transition: all 0.3s ease;
}
}
@media (hover: hover) and (pointer: fine) {
a.u-zoom:hover .u-zoom__img {
transform: scale(1.1);
}
}
a[class].u-text-underline {
text-decoration: underline;
}
@media (hover: hover) and (pointer: fine) {
a[class].u-text-underline:hover {
text-decoration: none;
}
}
.u-anim-underline {
position: relative;
}
.u-anim-underline::after {
content: "";
border-top: 1px solid;
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
transform: scaleX(0);
transform-origin: 100% 0;
transition: transform 0.3s var(--ease_underline);
}
@media (hover: hover) and (pointer: fine) {
.u-anim-underline:hover::after {
transform: scaleX(1);
transform-origin: 0 0;
}
}
/* layout
-------------------------------------- */
.u-iframe {
position: relative;
aspect-ratio: 16/9;
}
.u-iframe iframe, .u-iframe video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
}
/* layout
-------------------------------------- */
.u-inner {
box-sizing: border-box;
padding-left: var(--body_padding_side);
padding-right: var(--body_padding_side);
}
@media (min-width: 768px) {
.u-inner {
width: 100%;
max-width: var(--contents_width_with_padding);
margin-right: auto;
margin-left: auto;
}
}
.u-mid-inner {
box-sizing: border-box;
padding-left: var(--body_padding_side);
padding-right: var(--body_padding_side);
}
@media (min-width: 768px) {
.u-mid-inner {
width: 100%;
max-width: var(--contents_mid_width_with_padding);
margin-right: auto;
margin-left: auto;
}
}
.u-wide-inner {
box-sizing: border-box;
padding-left: var(--body_padding_side);
padding-right: var(--body_padding_side);
}
@media (min-width: 768px) {
.u-wide-inner {
width: 100%;
max-width: var(--contents_wide_width_with_padding);
margin-right: auto;
margin-left: auto;
}
}
@media (max-width: 767px) {
.u-sp-inner {
box-sizing: border-box;
padding-left: var(--body_padding_side);
padding-right: var(--body_padding_side);
}
}
/* padding・margin
-------------------------------------- */
.u-mt-xl {
margin-top: 80px !important;
}
@media (min-width: 768px) {
.u-mt-xl {
margin-top: 180px !important;
}
}
.u-mb-xl {
margin-bottom: 80px !important;
}
@media (min-width: 768px) {
.u-mb-xl {
margin-bottom: 180px !important;
}
}
.u-pt-xl {
padding-top: 80px !important;
}
@media (min-width: 768px) {
.u-pt-xl {
padding-top: 180px !important;
}
}
.u-pb-xl {
padding-bottom: 80px !important;
}
@media (min-width: 768px) {
.u-pb-xl {
padding-bottom: 180px !important;
}
}
@media (min-width: 768px) {
.u-pb-xl-pc {
padding-bottom: 180px !important;
}
}
/* .l-footer
================================================ */
.l-footer {
font-family: var(--fontfamily_base);
background: url(https://data4cs.co.jp/list-finder/img/bg_footer01_sp.jpg) no-repeat center bottom/100% auto;
color: rgb(var(--color-secondary-500));
position: relative;
z-index: 1;
margin-top: -100px;
padding: 128px 0 50px;
}
.l-footer.is-form01 {
position: relative;
background: none;
}
.l-footer.is-form01::before {
content: "";
position: absolute;
z-index: -1;
bottom: 0;
left: 0;
right: 0;
aspect-ratio: 750/1302;
background: url(https://data4cs.co.jp/list-finder/img/bg_footer01_sp.jpg) no-repeat center bottom/100% auto;
}
.l-footer__cr {
color: rgb(var(--color-surface-500));
font-size: 1rem;
text-align: center;
}
@media (min-width: 768px) {
.l-footer {
background-image: url(https://data4cs.co.jp/list-finder/img/bg_footer01_pc.jpg);
margin-top: 0px;
padding: 140px 0 60px;
}
.l-footer.is-form01::before {
aspect-ratio: 1920/1849;
background: url(https://data4cs.co.jp/list-finder/img/bg_footer01_pc.jpg) no-repeat center bottom/100% auto;
}
.l-footer__cr {
font-size: 1.2rem;
}
}
/* .l-footer-nav
================================================== */
@media (min-width: 768px) {
.l-footer-nav__inner {
padding-top: 150px;
padding-bottom: 208px;
}
.l-footer-nav-list__wrap {
display: flex;
justify-content: center;
}
.l-footer-nav-list {
min-width: 240px;
}
.l-footer-nav-list + .l-footer-nav-list {
margin: 0 0 0 100px;
}
.l-footer-nav-list__item + .l-footer-nav-list__item {
margin-top: 60px;
}
.l-footer-nav-list__item-head {
display: block;
text-align: center;
}
.l-footer-nav-list__item-head-en {
display: block;
font-size: 3rem;
letter-spacing: var(--letter-spacing_base);
}
.l-footer-nav-list__item-head-txt {
display: block;
font-size: 1.1rem;
margin-top: 4px;
line-height: 1.8;
letter-spacing: var(--letter-spacing_base);
}
.l-footer-nav-child {
margin-top: 30px;
}
.l-footer-nav-child__item {
text-align: center;
}
.l-footer-nav-child__item + .l-footer-nav-child__item {
margin-top: 18px;
}
.l-footer-nav-child__item-link {
color: rgb(var(--color-secondary-500));
display: inline-block;
font-size: 1.4rem;
line-height: var(--line-height_snug);
letter-spacing: var(--letter-spacing_base);
}
}
@media (hover: hover) and (pointer: fine) {
.l-footer-nav-list__item-head:is(a) {
transition: color 0.3s ease;
}
.l-footer-nav-list__item-head:is(a):hover {
color: rgb(var(--color-accent-500));
}
.l-footer-nav-child__item-link {
transition: color 0.3s ease;
}
.l-footer-nav-child__item-link:hover {
color: rgb(var(--color-accent-500));
}
}
/* .l-footer-info
================================================== */
.l-footer-info__inner {
padding-top: 90px;
padding-bottom: 90px;
}
.l-footer-info__logo {
margin: 0 auto 22px;
width: 95px;
}
.l-footer-info__logo svg {
display: block;
}
.l-footer-info__txt {
text-align: center;
font-size: 1.3rem;
line-height: 1.5;
letter-spacing: var(--letter-spacing_base);
}
.l-footer-info__txt + .l-footer-info__txt {
margin-top: 10px;
}
.l-footer-info__link {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 10px;
margin-top: 32px;
}
.l-footer-info__link-item {
font-size: 1.3rem;
line-height: 1.8;
letter-spacing: var(--letter-spacing_base);
}
@media (min-width: 768px) {
.l-footer-info__inner {
padding-top: 178px;
padding-bottom: 178px;
}
.l-footer-info__logo {
margin-bottom: 24px;
width: 125px;
}
.l-footer-info__txt {
font-size: 1.5rem;
}
.l-footer-info__txt + .l-footer-info__txt {
margin-top: 8px;
}
.l-footer-info__link {
gap: 40px;
margin-top: 40px;
}
.l-footer-info__link-item {
font-size: 1.4rem;
}
}
/* .l-header
================================================ */
.l-header {
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 320px;
z-index: 2000;
transition: opacity 0.6s ease;
}
.l-header:not(.is-animated) {
opacity: 0;
}
@media (min-width: 768px) {
.l-header {
display: flex;
justify-content: space-between;
align-items: center;
min-width: var(--contents_width_with_padding);
}
}
@media (min-width: 768px) and (hover: none) {
.l-header {
left: 0 !important;
}
}
@media (min-width: 768px) {
.l-header.is-nav-open .l-header-menu {
display: none;
}
}
.l-header-bg.is-shown + .l-header .l-header-info {
padding-top: 15px;
}
@media (min-width: 768px) {
.l-header-bg.is-shown + .l-header .l-header-info {
padding-top: 30px;
}
}
/* .l-header-bg
================================================== */
.l-header-bg {
background: linear-gradient(180deg, rgba(var(--color-secondary-500), 0.8) 0%, rgba(173, 176, 199, 0.5) 62%, rgba(255, 255, 255, 0) 100%);
mix-blend-mode: multiply;
height: var(--header_height);
pointer-events: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 320px;
z-index: 2000;
transition: opacity 0.3s ease;
}
.l-header-bg:not(.is-shown) {
opacity: 0;
}
@media (min-width: 768px) {
.l-header-bg {
min-width: var(--contents_width_with_padding);
}
}
/* .l-header-info
================================================== */
.l-header-info {
box-sizing: border-box;
height: var(--header_height);
padding: 20px 20px 30px;
pointer-events: none;
position: relative;
width: 100%;
z-index: 3;
}
.l-header-info__inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.l-header-info__logo {
pointer-events: auto;
padding: 2px 0 0 0;
width: 128px;
}
.l-header-info__logo svg {
display: block;
}
@media (min-width: 768px) {
.l-header-info {
height: var(--header_height);
padding: 50px 80px 40px;
}
.l-header-info__inner {
align-items: flex-start;
}
.l-header-info__logo {
width: 90px;
}
}
/* .l-header-menu
================================================== */
@media (min-width: 768px) {
.l-header-menu {
color: rgb(var(--color-surface-500));
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 30px;
pointer-events: auto;
margin-inline: auto;
}
.l-header-menu__item {
position: relative;
}
.l-header-menu__item:is(button)::before, .l-header-menu__item:is(button)::after {
content: "";
position: absolute;
top: 50%;
right: 0;
transform: translate(0, -50%);
width: 10px;
height: 0;
border-top: 1px solid rgb(var(--color-grayscale-900));
transition: all 0.3s ease;
}
.l-header-menu__item:is(button)::after {
transform: translate(0, -50%) rotate(90deg);
}
.l-header-menu__item:is(button).is-active::after {
transform: translate(0, -50%) rotate(0);
}
.l-header-menu__item-link {
cursor: pointer;
border: 0;
display: block;
font-size: 1.6rem;
line-height: 1.8;
padding: 0 20px 8px;
position: relative;
transition: color 0.3s ease;
}
.l-header-menu__child-wrap {
box-sizing: border-box;
background: rgb(var(--color-surface-500));
border: 1px solid rgb(var(--color-grayscale-500));
color: rgb(var(--color-secondary-500));
position: fixed;
top: 140px;
left: 0;
right: 0;
margin: 0 auto;
padding: 50px 80px;
height: auto;
width: var(--contents_width);
min-width: var(--contents_width);
transition: visibility 0s linear, all 0.3s ease;
}
.l-header-menu__child-wrap:not(.is-active) {
opacity: 0;
pointer-events: none;
visibility: hidden;
}
.l-header-menu__child-head {
display: flex;
align-items: center;
margin-bottom: 30px;
}
.l-header-menu__child-head-en {
font-size: 3.2rem;
line-height: 1.8;
}
.l-header-menu__child-head-txt {
font-size: 1.1rem;
line-height: 1.8;
margin-left: 15px;
}
.l-header-menu__child {
display: grid;
gap: 28px 20px;
grid-template-columns: repeat(3, 1fr);
}
.l-header-menu__child.is-col2 {
grid-template-columns: repeat(2, 1fr);
}
.l-header-menu__child-item-link {
box-sizing: border-box;
border-bottom: 1px solid rgb(var(--color-grayscale-500));
display: flex;
align-items: center;
font-size: 1.4rem;
line-height: var(--line-height_snug);
letter-spacing: var(--letter-spacing_base);
min-height: 56px;
padding: 6px 42px;
position: relative;
}
.l-header-menu__child-item-link::before {
content: "";
display: inline-block;
width: 13px;
height: 9px;
background-color: currentColor;
color: rgb(var(--color-secondary-100));
-webkit-mask-image: url('data:image/svg+xml;utf8,
');
mask-image: url('data:image/svg+xml;utf8,
');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: all 0.3s ease;
position: absolute;
top: 50%;
left: 20px;
transform: translateY(-50%);
}
}
@media (min-width: 1421px) {
.l-header-menu {
gap: 60px;
}
.l-header-menu__item-link {
font-size: 2rem;
}
}
@media (hover: hover) and (pointer: fine) {
.l-header-menu__item-link:hover {
color: rgb(var(--color-accent-500));
}
.l-header-menu__child-head:is(a) {
transition: color 0.3s ease;
}
.l-header-menu__child-head:is(a):hover {
color: rgb(var(--color-accent-500));
}
.l-header-menu__child-item-link {
transition: all 0.3s ease;
}
.l-header-menu__child-item-link:hover {
color: rgb(var(--color-accent-500));
}
.l-header-menu__child-item-link:hover::before {
color: rgb(var(--color-accent-500));
}
}
/* .l-nav-btn
================================================== */
.l-nav-btn {
background: none;
border: none;
pointer-events: auto;
position: relative;
width: 40px;
height: 40px;
cursor: pointer;
}
.l-nav-btn__line {
content: "";
position: absolute;
left: 1px;
width: 38px;
height: 1px;
background: rgb(var(--color-surface-500));
transition: all 0.3s ease;
}
.l-nav-btn__line:nth-child(1) {
top: 10px;
}
.l-nav-btn__line:nth-child(2) {
top: 19px;
}
.l-nav-btn__line:nth-child(3) {
top: 28px;
}
.l-nav-btn.is-open .l-nav-btn__line {
top: 19px;
}
.l-nav-btn.is-open .l-nav-btn__line:nth-child(1) {
transform: rotate(-30deg);
}
.l-nav-btn.is-open .l-nav-btn__line:nth-child(2) {
opacity: 0;
}
.l-nav-btn.is-open .l-nav-btn__line:nth-child(3) {
transform: rotate(30deg);
}
.l-nav-btn__txt {
position: absolute;
left: 0;
bottom: 3px;
width: 100%;
font-size: 1rem;
line-height: 1.2;
text-align: center;
}
@media (min-width: 768px) {
.l-nav-btn {
width: 60px;
left: 0;
}
.l-nav-btn__line {
width: 60px;
}
}
/* .l-nav
================================================ */
.l-nav {
box-sizing: border-box;
background: url(https://data4cs.co.jp/list-finder/img/bg_nav01_sp.png) no-repeat center/cover rgb(var(--color-secondary-500));
color: rgb(var(--color-surface-500));
position: absolute;
top: 0;
left: 0;
z-index: 2;
height: 100vh;
width: 100%;
min-width: 320px;
overscroll-behavior-y: none;
-webkit-overflow-scrolling: touch;
overflow: auto;
opacity: 0;
pointer-events: none;
transform: translateX(120%);
transition: opacity 0.3s ease;
}
.l-nav::-webkit-scrollbar {
display: none;
}
.l-nav.is-open {
opacity: 1;
transform: translateX(0);
pointer-events: auto;
}
.l-nav__inner {
box-sizing: border-box;
padding: 117px 40px 80px;
}
@media (min-width: 768px) {
.l-nav {
display: flex;
flex-direction: column;
justify-content: center;
padding: 180px 0;
min-width: auto;
}
}
/* .l-nav-list
================================================== */
.l-nav-list + .l-nav-list {
margin-top: 35px;
}
.l-nav-list__item + .l-nav-list__item {
margin-top: 35px;
}
.l-nav-list__item-link {
display: block;
position: relative;
border: 0;
padding: 0 40px 0 20px;
}
.l-nav-list__item-link:is(a)::before {
content: "";
display: inline-block;
width: 10px;
height: 7px;
background-color: currentColor;
color: rgb(var(--color-secondary-100));
-webkit-mask-image: url('data:image/svg+xml;utf8,
');
mask-image: url('data:image/svg+xml;utf8,
');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: all 0.3s ease;
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
}
.l-nav-list__item-link:is(button)::before, .l-nav-list__item-link:is(button)::after {
content: "";
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
width: 10px;
height: 0;
border-top: 1px solid rgb(var(--color-secondary-100));
transition: all 0.3s ease;
}
.l-nav-list__item-link:is(button)::after {
transform: translate(0, -50%) rotate(90deg);
}
.l-nav-list__item-link:is(button).is-active::after {
transform: translate(0, -50%) rotate(0);
}
.l-nav-list__item-en {
display: block;
font-size: 2.2rem;
letter-spacing: var(--letter-spacing_base);
}
.l-nav-list__item-ja {
display: block;
font-size: 1.1rem;
margin-top: 4px;
line-height: 1.8;
letter-spacing: var(--letter-spacing_base);
}
.l-nav-list__child-wrap {
display: none;
box-sizing: border-box;
}
.l-nav-list__child-item {
color: rgb(var(--color-secondary-100));
font-size: 1.4rem;
line-height: 1.5;
letter-spacing: var(--letter-spacing_base);
margin-top: 20px;
padding: 0 40px;
position: relative;
}
.l-nav-list__child-item::before {
content: "";
display: inline-block;
width: 10px;
height: 7px;
background-color: currentColor;
color: rgb(var(--color-secondary-100));
-webkit-mask-image: url('data:image/svg+xml;utf8,
');
mask-image: url('data:image/svg+xml;utf8,
');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: all 0.3s ease;
position: absolute;
top: 50%;
right: 20px;
transform: translate(0, -50%);
}
@media (min-width: 768px) {
.l-nav-list {
min-width: 240px;
}
.l-nav-list + .l-nav-list {
margin: 0 0 0 100px;
}
.l-nav-list__wrap {
display: flex;
justify-content: center;
}
.l-nav-list__item + .l-nav-list__item {
margin-top: 50px;
}
.l-nav-list__item-link {
padding: 0;
text-align: center;
}
.l-nav-list__item-link:is(a)::before {
content: none;
}
.l-nav-list__item-link:is(button) {
pointer-events: none;
}
.l-nav-list__item-link:is(button)::before, .l-nav-list__item-link:is(button)::after {
content: none;
}
.l-nav-list__item-en {
font-size: 3rem;
}
.l-nav-list__child {
margin-top: 30px;
}
.l-nav-list__child-wrap {
display: block !important;
}
.l-nav-list__child-item {
font-size: 1.4rem;
margin-top: 18px;
padding: 0;
text-align: center;
}
.l-nav-list__child-item::before {
content: none;
}
}
@media (hover: hover) and (pointer: fine) {
.l-nav-list__item-link:is(a) {
transition: color 0.3s ease;
}
.l-nav-list__item-link:is(a):hover {
color: rgb(var(--color-accent-500));
}
.l-nav-list__child-item-link {
transition: color 0.3s ease;
}
.l-nav-list__child-item-link:hover {
color: rgb(var(--color-accent-500));
}
}
.l-nav-cv {
margin-top: 80px;
}
.l-nav-cv__btn {
margin: 0 auto;
max-width: 295px;
}
.l-nav-cv__btn-link {
box-sizing: border-box;
border-bottom: 1px solid rgb(var(--color-grayscale-500));
display: flex;
align-items: center;
justify-content: space-between;
font-size: 2.4rem;
text-align: center;
padding: 0 20px 20px;
position: relative;
}
.l-nav-cv__btn-link::before {
content: "";
display: inline-block;
width: 13px;
height: 11px;
background-color: currentColor;
color: currentColor;
-webkit-mask-image: url('data:image/svg+xml;utf8,
');
mask-image: url('data:image/svg+xml;utf8,
');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: all 0.3s ease;
}
.l-nav-cv__btn-link::after {
content: "";
display: inline-block;
width: 10px;
height: 7px;
background-color: currentColor;
color: rgb(var(--color-secondary-100));
-webkit-mask-image: url('data:image/svg+xml;utf8,
');
mask-image: url('data:image/svg+xml;utf8,
');
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: all 0.3s ease;
}
/* .l-nav-overlay
================================================ */
.l-nav-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(var(--color-secondary-500), 0.4);
z-index: 1000;
}
/* .l-sub-img
================================================ */
.l-sub-img {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding-top: 30.6666666667vw;
background: url(https://data4cs.co.jp/list-finder/img/bg_star02_sp.jpg) no-repeat center/cover;
}
.l-sub-img.has-no-mb {
margin-bottom: 0;
}
.l-sub-img__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
padding: 0 20px;
text-align: center;
}
.l-sub-img__en {
margin-bottom: 12px;
background: linear-gradient(176deg, rgba(255, 255, 255, 0.4) 3.57%, rgba(255, 255, 255, 0) 96.52%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
white-space: nowrap;
font-size: 5rem;
}
.l-sub-img__head {
box-sizing: border-box;
margin-bottom: 5px;
color: #fff;
font-weight: 500;
font-size: 2rem;
}
.l-sub-img__mv {
text-align: center;
}
@media (min-width: 768px) {
.l-sub-img {
position: relative;
z-index: 5;
justify-content: space-between;
flex-direction: row;
padding-top: 140px;
background-image: url(https://data4cs.co.jp/list-finder/img/bg_star02_pc.jpg);
}
.l-sub-img__inner {
position: relative;
z-index: 1;
width: 100%;
min-height: clamp(460px, 34.375vw, 660px);
margin-right: -67.7083333333%;
padding-bottom: 112px;
padding-left: clamp(20px, 13.0208333333vw, 250px);
align-items: flex-start;
text-align: left;
}
.l-sub-img__en {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 3.57%, rgba(255, 255, 255, 0) 96.52%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: clamp(70px, 5.15625vw, 99px);
font-size: clamp(14rem, 8.634rem + 4.878vw, 18rem);
line-height: 0.9;
}
.l-sub-img__head {
width: 100%;
font-size: clamp(3.2rem, 3.2rem + 0vw, 3.2rem);
}
.l-sub-img__mv {
width: 67.7083333333%;
max-width: 1300px;
margin: 60px 0 10px;
}
}
@media (min-width: 1921px) {
.l-sub-img__mv {
position: relative;
right: calc(50% - 960px);
}
}
/* .l-sub2-img
================================================ */
.l-sub2-img {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-end;
overflow: hidden;
padding-top: 34.6666666667vw;
}
.l-sub2-img__inner {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-bottom: -3px;
}
.l-sub2-img__en {
margin: 0 -20px -30px;
background: linear-gradient(122deg, rgba(192, 183, 127, 0.4) 30.27%, rgba(255, 255, 255, 0) 100.6%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
font-size: 8rem;
}
.l-sub2-img__head {
box-sizing: border-box;
padding: 0 20px;
color: #fff;
text-align: center;
font-weight: 500;
font-size: 2rem;
}
.l-sub2-img__mv {
text-align: center;
}
@media (min-width: 768px) {
.l-sub2-img {
position: relative;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding-top: 330px;
}
.l-sub2-img__inner {
position: relative;
z-index: 1;
width: 100%;
padding: 0 0 70px;
margin-bottom: 0;
}
.l-sub2-img__en {
margin: 0 -20px -60px;
font-size: clamp(14rem, 8.634rem + 4.878vw, 18rem);
}
.l-sub2-img__head {
margin-bottom: 0;
margin: 0 auto;
padding: 0 80px;
width: 100%;
max-width: 1560px;
text-align: center;
font-size: clamp(3.2rem, 3.2rem + 0vw, 3.2rem);
}
.l-sub2-img__mv {
margin: 100px auto 30px;
padding-left: 3%;
width: 72.9166666667%;
max-width: 1400px;
}
}
@media (min-width: 1921px) {
.l-sub2-img__mv {
position: relative;
right: calc(50% - 960px);
}
}
body {
background: #fff !important;
}
/* .contact-step
================================================== */
.contact-step {
color: rgb(var(--color-secondary-500));
margin-bottom: 50px;
}
.contact-step-list {
position: relative;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
max-width: 295px;
margin-inline: auto;
text-align: center;
font-family: var(--fontfamily_serif);
font-weight: 600;
}
.contact-step-list::before {
content: "";
position: absolute;
z-index: 1;
bottom: 15px;
left: 50%;
transform: translateX(-50%);
width: 200px;
height: 1px;
background: rgb(var(--color-secondary-500));
}
.contact-step-list__item {
position: relative;
z-index: 2;
}
.contact-step-list__item::after {
content: "";
display: block;
width: 32px;
height: 32px;
background: url(https://data4cs.co.jp/list-finder/img/ico_step02.png) no-repeat center/contain;
margin-top: 10px;
margin-inline: auto;
}
.contact-step-list__item.is-current {
color: rgb(var(--color-accent-500));
}
.contact-step-list__item.is-current::after {
background: url(https://data4cs.co.jp/list-finder/img/ico_step01.png) no-repeat center/contain;
}
@media (min-width: 768px) {
.contact-step {
margin-bottom: 100px;
}
.contact-step-list {
font-size: 2rem;
max-width: 608px;
}
.contact-step-list::before {
bottom: 19px;
width: 365px;
}
.contact-step-list__item::after {
width: 40px;
height: 40px;
margin-top: 18px;
}
.contact-step-list__item.is-current::before {
bottom: -8px;
width: 38px;
height: 38px;
}
}
/* contact-form
================================================== */
.contact-form {
position: relative;
z-index: 3;
}
.contact-form__box {
background: #fff;
padding: 60px 20px 50px;
}
.contact-form table.items {
border: none;
}
.contact-form table td {
display: block;
}
.contact-form td.label {
width: 100%;
background: #fff;
padding: 10px 0 0;
font-size: 1.8rem;
text-align: left;
font-family: var(--fontfamily_serif);
font-weight: var(--font_weight_serif);
}
.contact-form td.value {
width: 100%;
margin-top: 10px;
padding-bottom: 10px;
}
.contact-form td.value:has(input[type=radio]), .contact-form td.value:has(input[type=checkbox]) {
line-height: 2.5;
}
.contact-form td.comment {
padding-bottom: 20px;
border-bottom: 1px solid rgb(var(--color-grayscale-500));
}
.contact-form span.required {
position: relative;
top: -3px;
display: inline-block;
margin-left: 10px;
background: rgb(var(--color-secondary-500));
padding: 0 4px;
color: #fff;
font-size: 1.2rem;
line-height: 1.6;
}
.contact-form input[type=text], .contact-form textarea {
width: 100% !important;
border: none;
background: rgb(var(--color-grayscale-100));
padding: 0.8em;
font-family: var(--fontfamily_base);
}
.contact-form input[type=radio] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 1px solid rgb(var(--color-grayscale-500));
border-radius: 50%;
background: #fff;
margin-top: -2px;
margin-right: 8px;
}
.contact-form input[type=radio]:checked {
position: relative;
}
.contact-form input[type=radio]:checked::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: block;
width: 10px;
height: 10px;
background: rgb(var(--color-secondary-500));
border-radius: 50%;
}
.contact-form input[type=checkbox] {
-webkit-appearance: none;
appearance: none;
width: 20px;
height: 20px;
border: 1px solid rgb(var(--color-grayscale-500));
background: #fff;
margin-top: -2px;
margin-right: 8px;
}
.contact-form input[type=checkbox]:checked {
position: relative;
}
.contact-form input[type=checkbox]:checked::after {
content: "";
position: absolute;
top: 48%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
display: block;
width: 5px;
height: 10px;
border-bottom: 2px solid;
border-right: 2px solid;
}
.contact-form select {
position: relative;
-webkit-appearance: none;
appearance: none;
border-color: rgb(var(--color-grayscale-500));
padding: 0.8em;
background: #fff url(https://data4cs.co.jp/list-finder/img/ico_arw01.svg) no-repeat right 16px center/10px 13px;
font-family: var(--fontfamily_base);
}
.contact-form select:focus {
background: #fff url(https://data4cs.co.jp/list-finder/img/ico_arw01.svg) no-repeat right 16px center/10px 13px;
}
.contact-form div.button_area {
background: #fff;
width: 100%;
margin-top: 20px;
padding: 0;
}
.contact-form input[type=button] {
box-sizing: border-box;
width: 240px;
padding: 14px;
background: #fff;
border: 1px solid rgb(var(--color-secondary-500));
color: rgb(var(--color-secondary-500));
font-family: var(--fontfamily_serif);
font-size: 1.6rem;
letter-spacing: 0.08em;
background: #fff url(https://data4cs.co.jp/list-finder/img/ico_arw02.svg) no-repeat right 16px center/15px 21px;
transition: all 0.3s ease;
}
.contact-form input[type=button]#button_confirm_back {
background: #fff url(https://data4cs.co.jp/list-finder/img/ico_arw03.svg) no-repeat left 16px center/15px 21px;
margin-bottom: 15px;
}
.contact-form ::placeholder {
font-family: var(--fontfamily_base);
color: #6d6d6d;
}
@media (min-width: 768px) {
.contact-form__box {
padding: 180px 0 115px;
}
.contact-form table.items {
max-width: 1100px;
width: calc(100% - 60px);
margin-inline: auto;
}
.contact-form table td {
display: block;
}
.contact-form td.label {
padding: 40px 0 0;
font-size: 2rem;
}
.contact-form td.value {
margin-top: 20px;
font-size: 1.6rem;
}
.contact-form td.comment {
padding-bottom: 40px;
}
.contact-form span.required {
float: none;
margin-left: 20px;
padding: 0 8px;
font-size: 1.4rem;
}
.contact-form input[type=text], .contact-form textarea {
padding: 18px;
font-size: 1.6rem;
}
.contact-form textarea[name$=other] {
margin-top: 10px;
}
.contact-form input[type=radio] {
width: 30px;
height: 30px;
margin-top: -2px;
margin-right: 12px;
}
.contact-form input[type=radio]:checked::after {
width: 15px;
height: 15px;
}
.contact-form input[type=checkbox] {
width: 30px;
height: 30px;
margin-top: -2px;
margin-right: 12px;
}
.contact-form input[type=checkbox]:checked::after {
top: 45%;
width: 8px;
height: 16px;
}
.contact-form select {
padding: 18px;
max-width: 820px;
background-position: right 28px center;
}
.contact-form select:focus {
background-position: right 28px center;
}
.contact-form div.button_area {
margin-top: 50px;
}
.contact-form input[type=button] {
width: -moz-fit-content;
width: fit-content;
min-width: 354px;
padding: 28px;
font-size: 1.8rem;
background-position: right 20px center;
}
.contact-form input[type=button]#button_confirm_back {
background-image: url(https://data4cs.co.jp/list-finder/img/ico_arw03.svg);
margin-bottom: 20px;
}
}
@media (hover: hover) and (pointer: fine) {
.contact-form input[type=button]:hover {
background-color: rgb(var(--color-secondary-500));
background-image: url(https://data4cs.co.jp/list-finder/img/ico_arw02_white.svg);
color: #fff;
}
.contact-form input[type=button]#button_confirm_back:hover {
background-color: rgb(var(--color-secondary-500));
background-image: url(https://data4cs.co.jp/list-finder/img/ico_arw03_white.svg);
color: #fff;
}
}