@charset "UTF-8";
:root {
--color-primary-100: 24, 71, 175;
--color-accent-500: 255,0,0;
--color-surface-500: 245, 237, 222;
--color-grayscale-100: 255, 255, 255;
--color-grayscale-200: 237, 237, 237;
--color-grayscale-300: 234, 234, 234;
--color-grayscale-900: 0,0,0;
--fontfamily_base: "Noto Sans JP", "ヒラギノ角ゴ ProN W3", Meiryo, sans-serif;
--font_color_base: rgb(var(--color-grayscale-900));
--font_size_base: 1.4rem;
--line-height_base: 1.7;
--letter-spacing_base: .05em;
--font_weight_base: 500;
--fontfamily_serif: "Noto Serif JP", serif;
--fontfamily_en: "";
--font_weight_en: 500;
--line-height_en: 1.8;
--letter-spacing_en: .06em;
--contents_width: 1000px;
--contents_wide_width: 1400px;
--body_padding_side: 20px;
--contents_width_with_padding: 1060px;
--contents_wide_width_with_padding: 1460px;
--sidebar_width: 250px;
--header_height: 60px;
--fixedcv_height: 70px;
}
@media (min-width: 768px) {
:root {
--body_padding_side: 30px;
--header_height: 85px;
--font_size_base: 1.4rem;
}
}
/*@mixin arrow03($color: currentColor, $width: 22, $height: 11) {
content: '';
display: inline-block;
width: $width + px;
height: $height + px;
background-color: currentColor;
color: $color;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
@include trans;
}*/
/*@mixin blank02($color: currentColor, $size: 14) {
content: '';
display: inline-block;
width: $size + px;
height: $size + px;
background-color: currentColor;
color: $color;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
@include trans;
}*/
/*@mixin search01($color: currentColor, $width: 19, $height: 19) {
content: '';
display: inline-block;
width: $width + px;
height: $height + px;
background-color: currentColor;
color: $color;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
@include trans;
}*/
/*@mixin mail01($color: currentColor, $width: 17, $height: 13) {
content: '';
display: inline-block;
width: $width + px;
height: $height + px;
background-color: currentColor;
color: $color;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
@include trans;
}*/
/*@mixin tel01($color: currentColor, $width: 24, $height: 24) {
content: '';
display: inline-block;
width: $width + px;
height: $height + px;
background-color: currentColor;
color: $color;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
@include trans;
}*/
/*@mixin map01($color: currentColor, $width: 12, $height: 16) {
content: '';
display: inline-block;
width: $width + px;
height: $height + px;
background-color: currentColor;
color: $color;
mask-image: url('data:image/svg+xml;utf8,');
mask-repeat: no-repeat;
mask-position: center;
@include trans;
}*/
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%;
}
summary {
display: block;
list-style: none;
cursor: pointer;
}
summary::-webkit-details-marker {
display: none;
}
/* 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 {
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:not([class=is-no-smoothscroll]) {
scroll-behavior: smooth;
scroll-padding-top: var(--header_height);
}
body {
min-width: 320px;
padding-top: var(--header_height);
font-family: var(--fontfamily_base);
color: var(--font_color_base);
font-weight: var(--font_weight_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 (max-width: 767px) {
body {
padding-bottom: calc(var(--fixedcv_height) - 1px);
}
}
@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: var(--sidebar_width) auto;
gap: 0 20px;
width: var(--contents_width);
margin: 0 auto;
}
.l-container.is-col2 .l-contents {
flex: 1;
}
.l-container.is-col2 .l-sidebar {
order: -1;
flex-basis: var(--sidebar_width);
}
}
/* sp <--> tb <--> pc
-------------------------------------- */
.u-media-query {
display: none;
font-family: "sp";
}
@media (min-width: 768px) {
.u-media-query {
font-family: "tb";
}
}
@media (min-width: 1060px) {
.u-media-query {
font-family: "pc";
}
}
@media (max-width: 1059px) {
.u-view-pc {
display: none !important;
}
}
@media (max-width: 767px) {
.u-view-tb {
display: none !important;
}
}
@media (min-width: 1060px) {
.u-view-tb {
display: none !important;
}
}
@media (min-width: 768px) {
.u-view-sp {
display: none !important;
}
}
@media (min-width: 1060px) {
.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-serif {
font-family: var(--fontfamily_serif);
}
.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);
}
/* 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;
}
}
/* 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-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;
}
}
/* .c-archive01
================================================== */
.c-archive01__item + .c-archive01__item {
border-top: 1px dashed #646464;
}
.c-archive01__item-in {
display: block;
padding: 20px 0;
position: relative;
}
.c-archive01__item-meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 7px;
}
.c-archive01__item-new {
color: #f00;
}
.c-archive01__item-head {
overflow: hidden;
display: -webkit-box;
max-height: 1.8em;
line-height: 1.8;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
text-overflow: ellipsis;
}
.c-archive01__item-txt {
margin-top: 2px;
}
.c-archive01__item-more {
width: 60px;
height: 22px;
margin: 5px 0 0 auto;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border: 1px solid rgb(var(--color-primary-100));
background: rgb(var(--color-grayscale-100));
border-radius: 100px;
color: rgb(var(--color-primary-100));
font-size: 1.2rem;
}
.c-archive01__item-more::after {
content: "";
display: block;
width: 5px;
height: 7px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
background: currentColor;
}
@media (min-width: 768px) {
.c-archive01__item-in {
display: grid;
grid-template-columns: 180px 1fr;
align-items: start;
grid-column-gap: 10px;
padding: 30px 0;
}
.c-archive01__item-meta {
margin: 0;
}
.c-archive01__item-content {
width: calc(100% - 100px);
}
.c-archive01__item-head {
max-height: 3.6em;
-webkit-line-clamp: 2;
}
.c-archive01__item-more {
width: 88px;
height: 32px;
font-size: 1.5rem;
position: absolute;
right: 0;
bottom: 20px;
}
.c-archive01__item-more::after {
width: 7px;
height: 8px;
}
}
@media (hover: hover) and (pointer: fine) {
.c-archive01__item-in:hover {
text-decoration: underline;
}
.c-archive01__item-in:hover .c-archive01__item-more {
background: rgb(var(--color-primary-100));
color: rgb(var(--color-grayscale-100));
}
.c-archive01__item-more {
transition: all 0.3s ease;
}
}
/* .c-color-black
================================================== */
.c-color-black {
color: var(--font_color_base) !important;
}
/* .c-cv01
================================================== */
.c-cv01 {
opacity: 0;
visibility: hidden;
transition: 0.3s;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 999;
height: 120px;
background: rgb(var(--color-primary-100));
}
.c-cv01.is-active {
opacity: 1;
visibility: visible;
transition-delay: 0.1s;
}
.c-cv01__inner {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
padding-top: 30px;
padding-bottom: 30px;
}
.c-cv01__btn {
width: 220px;
height: 60px;
border-radius: 100px;
color: rgb(var(--color-primary-100));
font-weight: 400;
font-size: 2.2rem;
letter-spacing: 0.2em;
}
.c-cv01__btn-in {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: inherit;
height: 100%;
background: linear-gradient(to bottom, #fff 50%, #f0f0f0 50%);
}
.c-cv01__btn-ico {
margin-right: -15px;
}
@media (hover: hover) and (pointer: fine) {
.c-cv01__btn-in {
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.c-cv01__btn-in::before {
content: "";
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: rgba(181, 215, 237, 0.5);
border-radius: inherit;
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: all 0.3s ease;
opacity: 0;
}
.c-cv01__btn-in:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.c-cv01__btn-in:hover::before {
opacity: 1;
}
.c-cv01__btn-in:hover .c-cv01__btn-ico {
transform: translateX(5px);
}
.c-cv01__btn-ico {
transition: all 0.3s ease;
}
}
/* ナビ
================================================== */
.mw_wp_form_input .naviDiv.is-confirm {
display: none;
}
.mw_wp_form_confirm .naviDiv.is-input {
display: none;
}
.mw_wp_form_confirm .columnLabel {
display: none;
}
.naviDiv {
margin: 2em 0em 50px;
text-align: center;
}
.naviN,
.navi {
padding: 0.5em 1em;
margin: 0em 0.5em;
background: #ddd;
border-radius: 5px;
color: #fff;
font-size: 1.3rem;
}
.naviN {
background: #ff8f00;
}
@media all and (min-width: 737px) {
.naviDiv {
margin-bottom: 30px;
}
.naviN,
.navi {
padding: 0.5em 3em;
}
}
/* .c-form
================================================== */
.tableWrap p {
margin: 0;
}
.tableWrap input[type=text],
.tableWrap input[type=email],
.tableWrap input[type=tel],
.tableWrap textarea,
.tableWrap button,
.tableWrap select,
.tableWrap option {
display: inline-block;
color: inherit;
font: inherit;
}
@media (max-width: 767px) {
.tableWrap table {
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 30px;
}
.tableWrap table,
.tableWrap thead,
.tableWrap tbody,
.tableWrap tr,
.tableWrap th,
.tableWrap td {
display: block;
}
.tableWrap td {
border-bottom: 1px solid #ddd;
}
}
@media (min-width: 768px) {
.tableWrap {
max-width: 902px;
border: 1px solid #999;
padding: 45px 70px;
box-sizing: border-box;
margin: auto;
}
}
.formTable span.label {
color: #c00;
}
.formTable td {
border-bottom: 1px solid #ddd;
}
.formTable input {
box-sizing: border-box;
}
.formTable th span.is-th {
font-weight: normal;
}
.formTable .caution {
display: block;
width: 95%;
color: #5f5f5f;
font-size: 1.2rem;
font-weight: normal;
text-align: left;
padding: 10px 0 0 0;
line-height: 1.2;
}
.formTable th {
border-style: solid;
border-width: 0;
padding: 20px 10px 15px;
text-align: left;
color: #333;
font-weight: bold;
font-size: 1.4rem;
background: transparent;
}
.formTable td {
padding: 0 10px 20px;
font-size: 1.3rem;
color: #5f5f5f;
border: 0;
border-bottom: 1px solid #ddd;
}
.formTable td input[type=checkbox],
.formTable td input[type=radio] {
box-shadow: none;
}
.formTable td input[type=number].no-spin::-webkit-inner-spin-button,
.formTable td input[type=number].no-spin::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
-moz-appearance: textfield;
}
.formTable td input,
.formTable td textarea {
margin: 0 5px 4px 0;
max-width: 262px;
padding: 2px 5px;
color: #333;
border: 1px solid #999;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
font-size: 108%;
text-align: left;
box-sizing: border-box;
}
.formTable td select {
margin-bottom: 8px;
font-size: 1.3rem;
width: 180px;
background: #fff;
padding: 5px 0;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
}
.formTable textarea {
height: 192px;
}
.formTable textarea.is-small {
height: 120px;
}
.formTable textarea.is-wide {
max-width: 100%;
width: 100%;
}
.formTable .otherCheck {
display: block;
clear: both;
}
.formTable .otherCheck .vertical-item {
float: left;
margin-right: 10px;
margin-top: 5px;
}
.formTable .error {
font-size: 1.3rem;
font-weight: bold;
}
.formTable .columnLabel,
.formTable .formLabel {
font-weight: bold;
}
.formTable .formLabel.is-margin-top {
display: block;
margin-top: 25px;
}
.formTable .formLabel.is-check-txt {
display: block;
margin-top: 0.5em;
margin-bottom: 2px;
}
.formTable .formData select {
width: 52px;
}
.formTable select.formDataYear {
width: 65px;
}
.formTable select.formDataTime {
margin-left: 15px;
}
.formTable .formNotes {
margin-top: 10px;
padding: 10px 15px;
box-sizing: border-box;
border: 1px solid #c00;
background: #fff;
color: #c00;
}
.formTable .companyCode__tit {
border-bottom: none;
}
.formTable .companyCode__input {
border-bottom: none;
padding-bottom: 0;
}
.formTable .companyName__tit {
padding-top: 13px;
padding-bottom: 5px;
}
.formTable .companyName__input input {
border: none;
box-shadow: none;
padding: 0;
}
@media (min-width: 768px) {
.formTable .is-block-pc table,
.formTable .is-block-pc tbody,
.formTable .is-block-pc tr,
.formTable .is-block-pc th,
.formTable .is-block-pc td {
display: block;
}
.formTable .is-block-pc th {
width: 100%;
padding-top: 20px;
padding-bottom: 0;
border: 0;
}
.formTable .is-block-pc th + td {
padding-top: 12px;
}
.formTable th {
padding: 32px 35px 25px 0;
vertical-align: top;
width: 280px;
box-sizing: border-box;
border-bottom: 1px solid #ddd;
}
.formTable td {
padding: 32px 0 25px;
}
.formTable td input,
.formTable td textarea {
max-width: 432px;
}
.formTable .formColumn.is-pc {
display: flex;
}
.formTable .formColumn.is-pc .columnItem {
display: flex;
align-items: center;
}
.formTable .formColumn.is-pc.is-checkbox .mwform-checkbox-field {
margin-right: 1em;
}
.formTable .formColumn.is-pc.is-checkbox {
align-items: center;
margin-bottom: 3px;
}
.formTable .formColumn.is-pc input {
margin-bottom: 0;
}
.formTable .formName .columnLabel {
width: 30px;
text-align: right;
margin-right: 3px;
}
.formTable .formName .columnLabel + .formTable .formName .columnLabel {
margin-left: 10px;
}
.formTable .companyName__input {
padding-top: 12px;
}
}
.formTenpolabel {
display: inline-block;
width: 80px;
}
.mw_wp_form_confirm .formTenpolabel.pref {
width: 85px;
}
.formName input {
width: 152px !important;
}
.formPrivacy {
margin-top: 45px;
margin-bottom: 45px;
padding: 15px;
background: #eee;
font-size: 1.3rem;
}
.formPrivacy a {
color: #2753b4;
}
@media (min-width: 768px) {
.formPrivacy {
max-width: 902px;
margin-right: auto;
margin-left: auto;
text-align: center;
box-sizing: border-box;
}
.formPrivacy.is-left {
text-align: left;
}
.formPrivacy p {
margin: 0;
}
}
.form .submitArea {
margin-top: 30px;
text-align: center;
}
.form .submitArea input[type=submit] {
width: 150px;
height: 42px;
margin: 0;
border: hidden;
border-radius: 3px 3px 3px 3px;
background: #303030;
background: linear-gradient(to bottom, #606060 0%, #303030 100%);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);
color: #ffffff;
font-size: 2rem;
font-weight: normal;
text-align: center;
cursor: pointer;
}
@media (min-width: 768px) {
.form .submitArea {
margin-top: 40px;
}
.form .submitArea input[type=submit] {
width: 270px;
}
.form .submitArea input[type=submit]:hover {
opacity: 0.7;
}
}
/* 20220705 追記
================================================ */
.bnr-notes-box {
padding: 20px;
background: #f8f8f8;
box-sizing: border-box;
margin: auto;
font-size: 13px;
}
.bnr-notes-box.is-margin {
margin: 10px;
}
.bnr-notes__set + .bnr-notes__set {
margin-top: 20px;
}
.bnr-notes-box .bnr-notes__txtArea {
margin: 0 0 10px;
}
.bnr-notes-box .bnr-notes__txt {
padding-left: 10px;
margin: 0;
}
.bnr-notes-box .bnr-notes-list {
margin-top: 5px;
padding-left: 25px;
}
.bnr-notes-box .bnr-notes-list.is-asterisk {
list-style: none;
}
.bnr-notes-box .bnr-notes-list.is-asterisk .bnr-notes-list__item {
position: relative;
}
.bnr-notes-box .bnr-notes-list.is-asterisk .bnr-notes-list__item::before {
content: "※";
position: absolute;
left: -20px;
top: 0;
color: #333;
}
@media (min-width: 768px) {
.bnr-notes-box {
max-width: 902px;
padding: 30px;
}
.bnr-notes-box.is-margin {
margin: 10px 20px;
}
.bnr-notes-box .bnr-notes__txt {
padding-left: 25px;
}
.bnr-notes-box .bnr-notes-list {
padding-left: 40px;
}
.form .ymtbanner.is-w899 {
max-width: 899px;
margin: auto;
}
}
.contact-form .visitContent .visit-form__box {
margin: 10px 10px 0;
}
.contact-form .visitContent {
background: #ccebff;
margin-top: 30px;
}
.contact-form .visitContentIn {
padding: 0 20px 10px 20px;
}
.contact-form .visitContentIn th,
.contact-form .visitContentIn td {
border-bottom: none;
}
@media (min-width: 768px) {
.contact-form .visitContent .visit-form__box {
margin: 20px 20px 0;
}
}
/* 20220608 追記
================================================ */
/* 当社のことをどのようにしてお知りになりましたか？のチェックボックスエリア */
.formMediaArea {
position: relative;
margin-bottom: 35px;
}
.formMediaArea .error {
position: absolute;
bottom: -51px;
}
.formMediaArea .mwform-checkbox-field:nth-of-type(6),
.formMediaArea .mwform-checkbox-field:nth-of-type(17) {
margin-bottom: 3em;
}
.formMediaInput {
position: absolute;
left: 0;
}
.formMediaInput.is-portal {
top: 29%;
}
.formMediaInput.is-trader {
top: 89%;
}
.formMediaInput.is-other {
top: 100%;
}
.formMediaHead {
display: none;
}
/* 確認画面
================================================ */
.mw_wp_form_confirm .formMediaInput {
position: static !important;
margin-top: 10px;
}
.mw_wp_form_confirm .formMediaInput + .formMediaInput {
margin-top: 5px;
}
.mw_wp_form_confirm .formMediaHead {
display: inline-block !important;
}
@media (min-width: 768px) {
.mw_wp_form .formMediaArea .vertical-item + .vertical-item {
margin-top: 7px;
}
.formMediaArea .mwform-checkbox-field:nth-of-type(6),
.formMediaArea .mwform-checkbox-field:nth-of-type(17) {
margin-bottom: 0;
}
.formMediaInput.is-portal {
top: 28%;
left: 180px;
}
.formMediaInput.is-trader {
top: 89%;
left: 87px;
}
.formMediaInput.is-other {
top: 95%;
left: 71px;
}
}
/* お客様アンケート＞当社のことをどのようにしてお知りになりましたか？（複数選択可）のスタイル */
.formMediaArea.is-questionnaire .formFlex .mwform-checkbox-field:nth-of-type(17) {
margin-bottom: 0;
}
.formMediaArea.is-questionnaire .formFlex .mwform-checkbox-field:nth-of-type(18) {
margin-bottom: 3em;
}
.formMediaArea.is-questionnaire .formMediaInput.is-other {
top: 42.3em;
}
@media (min-width: 768px) {
.mw_wp_form .formMediaArea.is-questionnaire .vertical-item + .vertical-item {
margin-top: 0;
}
.formMediaArea.is-questionnaire .formFlex .mwform-checkbox-field:nth-of-type(6),
.formMediaArea.is-questionnaire .formFlex .mwform-checkbox-field:nth-of-type(16),
.formMediaArea.is-questionnaire .formFlex .mwform-checkbox-field:nth-of-type(18) {
margin-bottom: 3.5em;
}
.formMediaArea.is-questionnaire .formMediaInput.is-portal {
top: 4.2em;
left: 66%;
}
.formMediaArea.is-questionnaire .formMediaInput.is-trader {
top: 16.8em;
left: 0;
}
.formMediaArea.is-questionnaire .formMediaInput.is-other {
top: 16.8em;
left: 66%;
}
}
.mw_wp_form_input .formReadonly.formShowConfirm {
max-width: 10px;
}
.mw_wp_form_input .formShowConfirm {
opacity: 0;
visibility: hidden;
}
.mw_wp_form_confirm .formNotes {
display: none;
opacity: 0;
visibility: hidden;
}
/* ご希望の商品カタログはございますか？のチェックボックスエリア */
.formCatalogArea {
position: relative;
}
.formCatalogArea .mwform-checkbox-field:nth-of-type(1),
.formCatalogArea .mwform-checkbox-field:nth-of-type(7) {
margin-bottom: 2.5em;
}
.formCatalogHead {
position: absolute;
left: 0;
}
.formCatalogHead.is-eneju {
top: 4.5%;
}
.formCatalogHead.is-kurashi {
top: 38%;
}
@media all and (min-width: 737px) {
.formCatalogArea .mwform-checkbox-field:nth-of-type(1),
.formCatalogArea .mwform-checkbox-field:nth-of-type(7) {
margin-bottom: 2em;
}
.formCatalogHead.is-eneju {
top: 3.7%;
}
.formCatalogHead.is-kurashi {
top: 37%;
}
}
/* 確認画面
================================================ */
.mw_wp_form_confirm .formCatalogHead {
display: none !important;
}
/* アンケート系フォームの「その他」があるチェックボックスパターン ベーススタイル */
.formOtherArea {
position: relative;
}
.formOtherInput {
position: absolute;
left: 0;
}
.formOtherHead {
display: none;
}
.formThanks {
border: 1px solid #999;
margin: 0 10px;
padding: 20px 15px;
font-size: 16px;
}
.formBack .link {
width: 150px;
padding: 5px 0;
margin: 20px auto 40px;
display: block;
border: hidden;
border-radius: 3px 3px 3px 3px;
background: #303030;
background: linear-gradient(to bottom, #606060 0%, #303030 100%);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: normal;
text-align: center;
cursor: pointer;
font-size: 20px;
text-decoration: none;
}
.formClose input {
display: block;
width: 150px;
height: 42px;
margin: 20px auto 40px;
border: hidden;
border-radius: 3px 3px 3px 3px;
background: #303030;
background: linear-gradient(to bottom, #606060 0%, #303030 100%);
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.4);
color: #fff;
font-weight: normal;
text-align: center;
cursor: pointer;
font-size: 20px;
}
@media all and (min-width: 737px) {
.formThanks {
max-width: 902px;
margin: auto;
padding: 60px;
box-sizing: border-box;
}
.formBack .link {
width: 270px;
margin: 40px auto;
}
.formClose input {
width: 270px;
margin: 40px auto;
}
}
/* .js-selectbox 検索機能付きのselectbox
================================================ */
.js-selectbox {
position: relative;
display: inline-block;
width: 262px;
}
.js-selectbox__hidden input {
display: none !important;
cursor: not-allowed;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
}
.js-selectbox__input {
border: 1px solid #999;
padding: 2px 5px;
min-height: 1.7em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2) inset;
border-radius: 3px;
}
.js-selectbox__set {
position: absolute;
display: none;
z-index: 1;
background-color: #fff;
border: 1px solid #999;
border-top: 0;
padding: 5px;
}
.js-selectbox__select {
width: 100%;
max-height: 300px;
overflow: auto;
position: relative;
}
.js-selectbox__select-option {
padding: 5px;
cursor: pointer;
}
.js-selectbox__select-option.is-highlight {
color: #fff;
background-color: #5897fb;
}
.js-selectbox__select-option.is-notfound {
cursor: not-allowed;
pointer-events: none;
-webkit-user-select: none;
user-select: none;
display: none;
color: var(--color-grayscale-300);
}
.mw_wp_form_confirm .js-selectbox__input {
display: none !important;
}
.mw_wp_form_confirm .js-selectbox__set {
display: none !important;
}
/* .c-head01
================================================== */
.c-head01 {
margin-bottom: 20px;
font-weight: var(--font_weight_base);
color: rgb(var(--color-primary-100));
font-size: 2rem;
text-align: center;
}
@media (min-width: 768px) {
.c-head01 {
margin-bottom: 30px;
font-size: 2.7rem;
}
}
/* .c-head02
================================================== */
.c-head02 {
margin-bottom: 20px;
padding-bottom: 10px;
font-weight: var(--font_weight_base);
color: rgb(var(--color-primary-100));
font-size: 2.4rem;
text-align: center;
position: relative;
}
.c-head02::after {
content: "";
display: block;
width: 80px;
height: 1px;
background: currentColor;
position: absolute;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
@media (min-width: 768px) {
.c-head02 {
margin-bottom: 30px;
font-size: 4.2rem;
}
.c-head02::after {
width: 100px;
}
}
/* .c-head03
================================================== */
.c-head03 {
position: relative;
z-index: 2;
padding: 12px var(--body_padding_side);
font-weight: var(--font_weight_base);
font-size: 2rem;
color: rgb(var(--color-grayscale-100));
letter-spacing: 0.1em;
line-height: 1.4;
}
@media (max-width: 767px) {
.c-head03 {
width: -moz-fit-content;
width: fit-content;
background: rgb(var(--color-primary-100));
}
}
@media (min-width: 768px) {
.c-head03 {
padding: 15px 0;
font-size: 3.2rem;
}
.c-head03::after {
content: "";
display: block;
width: calc(100% + 170px);
height: 100%;
background: rgb(var(--color-primary-100));
position: absolute;
top: 0;
right: -70px;
z-index: -1;
pointer-events: none;
}
}
/* .c-ico
================================================== */
.c-ico {
display: inline-block;
vertical-align: baseline;
}
.c-ico svg {
transition: all 0.3s ease;
}
/* .c-ico.is-arw01
================================================== */
.c-ico.is-arw01 {
height: -moz-fit-content;
height: fit-content;
display: flex;
align-items: center;
}
.c-ico.is-arw01::after {
content: "";
display: inline-block;
width: 16px;
height: 12px;
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;
}
/* .c-ico.is-arw02
================================================== */
.c-ico.is-arw02::after {
content: "";
display: inline-block;
width: 43px;
height: 18px;
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;
}
/* .c-ico.is-arw03
================================================== */
/*.c-ico.is-arw03 {
margin-left: 5px;
&::after {
@include mixin.arrow03;
background: linear-gradient(to right, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
}*/
/* .c-ico.is-blank01
================================================== */
.c-ico.is-blank01 {
color: red;
margin-left: 5px;
}
.c-ico.is-blank01::after {
content: "";
display: inline-block;
width: 10px;
height: 9px;
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;
}
/* .c-ico.is-blank02
================================================== */
/*.c-ico.is-blank02 {
color: green;
margin-left: 5px;
&::after {
@include mixin.blank02;
}
}*/
/* .c-ico.is-blank03
================================================== */
/*.c-ico.is-blank03 {
margin-left: 5px;
&::after {
// @include mixin.blank03;
background: linear-gradient(to right, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%);
}
}*/
/* .c-ico.is-mail01
================================================== */
/*.c-ico.is-mail01 {
color: skyblue;
margin-right: 5px;
&::after {
@include mixin.mail01;
}
}*/
/* .c-ico.is-map01
================================================== */
/*.c-ico.is-map01 {
color: violet;
margin-right: 5px;
&::after {
@include mixin.map01;
}
}*/
/* .c-ico.is-search01
================================================== */
/*.c-ico.is-search01 {
color: red;
margin-right: 5px;
&::after {
@include mixin.search01;
}
}*/
/* .c-ico.is-tel01
================================================== */
/*.c-ico.is-tel01 {
color: pink;
margin-right: 5px;
&::after {
@include mixin.tel01;
}
}*/
.c-list-decimal01 {
counter-reset: num;
}
.c-list-decimal01__item {
counter-increment: num;
position: relative;
display: flex;
align-items: flex-start;
box-sizing: border-box;
flex: 1;
}
.c-list-decimal01__item::before {
content: counter(num, decimal-leading-zero) ".";
display: inline-block;
padding-right: 0.5em;
white-space: nowrap;
color: rgb(var(--main));
}
/* .c-list01
================================================== */
.c-list01 {
list-style: none;
}
.c-list01__item {
position: relative;
padding-left: 1em;
box-sizing: border-box;
}
.c-list01__item::before {
content: "";
position: absolute;
top: calc(1em - 3px);
left: 0;
width: 4px;
height: 4px;
border-radius: 50%;
background: rgba(var(--color-primary-100));
}
@media (min-width: 768px) {
.c-list01.is-column2-upper-tb {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
}
/* .c-list02
================================================== */
.c-list02 {
list-style: none;
counter-reset: number 0;
}
.c-list02__item {
position: relative;
padding-left: 1.5em;
box-sizing: border-box;
}
.c-list02__item::before {
counter-increment: number 1;
content: counter(number) ". ";
position: absolute;
top: 0;
left: 0;
border-radius: 50%;
color: rgba(var(--color-primary-100));
}
/* .c-list03
================================================== */
.c-list03 {
list-style: none;
}
.c-list03__item {
position: relative;
padding-left: 1.2em;
box-sizing: border-box;
}
.c-list03__item::before {
content: "※";
position: absolute;
top: 0;
left: 0;
}
/* .c-pager01
===================================*/
.c-pager01 {
overflow: hidden;
display: flex;
justify-content: center;
flex-wrap: wrap;
text-align: center;
margin: 30px -5px -10px;
}
.c-pager01 li {
margin: 0 5px 10px;
}
.c-pager01 li a, .c-pager01 li span {
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 30px;
height: 30px;
line-height: 1;
border: 1px solid rgb(var(--color-grayscale-900));
text-decoration: none;
}
.c-pager01 li.pages span {
width: auto;
border: 0;
}
.c-pager01 li.current span {
color: #fff;
background: rgb(var(--color-grayscale-900));
}
.c-pager01 li.first, .c-pager01 li.previous {
margin-right: 15px;
}
.c-pager01 li.first a, .c-pager01 li.last a {
width: auto;
border-color: transparent;
padding-right: 15px;
padding-left: 15px;
}
.c-pager01 li.next, .c-pager01 li.last {
margin-left: 15px;
}
.c-pager01 li.extend span {
border: 0;
}
@media (hover: hover) and (pointer: fine) {
.c-pager01 li a:hover {
text-decoration: none;
border: 1px solid rgb(var(--color-grayscale-900));
background-color: rgb(var(--color-grayscale-900));
color: #fff;
}
}
/* .c-pager02
================================================== */
.c-pager02 {
position: relative;
overflow: hidden;
margin-top: 30px;
line-height: 1;
}
.c-pager02 a {
box-sizing: border-box;
position: relative;
display: flex;
align-items: center;
flex-wrap: wrap;
height: 50px;
padding: 15px;
border: 1px solid;
text-decoration: none;
}
.c-pager02__previous, .c-pager02__next {
width: calc(50% - 10px);
}
.c-pager02__previous {
float: left;
}
.c-pager02__previous a {
justify-content: flex-start;
padding-left: 30px;
}
.c-pager02__next {
float: right;
}
.c-pager02__next a {
justify-content: flex-end;
padding-right: 30px;
}
.c-pager02__all {
width: 100%;
clear: both;
padding-top: 20px;
}
.c-pager02__all a {
justify-content: center;
}
@media (hover: hover) and (pointer: fine) {
.c-pager02 a {
transition: all 0.3s ease;
}
.c-pager02 a:hover {
background: rgb(var(--color-grayscale-900));
color: #fff;
border-color: rgb(var(--color-grayscale-900));
}
}
/* .c-set01
================================================== */
.c-set01 {
display: flex;
flex-direction: column;
}
.c-set01 + .c-set01 {
margin-top: 60px;
}
.c-set01__head {
order: 1;
margin-bottom: -30px;
}
.c-set01__txt-small {
font-size: 0.8em;
}
.c-set01__area-img {
margin-bottom: 15px;
}
.c-set01__area-img img {
width: 100%;
}
@media (max-width: 767px) {
.c-set01__area-txt {
display: contents;
}
.c-set01__txt, .c-set01__area-img {
margin-left: 60px;
}
.c-set01__txt {
margin-right: var(--body_padding_side);
}
.c-set01__area-img {
order: 2;
}
.c-set01__txt {
order: 3;
}
.c-set01.is-rev .c-set01__head {
margin-right: 0;
margin-left: auto;
}
.c-set01.is-rev .c-set01__txt {
margin-right: 60px;
margin-left: var(--body_padding_side);
}
.c-set01.is-rev .c-set01__area-img {
margin-right: 60px;
margin-left: 0;
}
}
@media (min-width: 768px) {
.c-set01 {
width: min(100%, 1200px);
display: grid;
grid-template-columns: 40% 1fr;
grid-column-gap: 30px;
margin: 0 auto;
}
.c-set01 + .c-set01 {
margin-top: 130px;
}
.c-set01__area-txt {
width: min(100%, 380px);
margin: 0 0 0 auto;
position: relative;
z-index: 2;
}
.c-set01__head {
margin-bottom: 20px;
}
.c-set01__area-img {
width: min(100%, 580px);
margin: 30px auto 0 0;
}
.c-set01__area-img img {
max-width: -moz-fit-content;
max-width: fit-content;
}
.c-set01.is-rev {
grid-template-columns: 1fr 40%;
}
.c-set01.is-rev .c-set01__area-txt {
margin-right: auto;
margin-left: 0;
}
.c-set01.is-rev .c-set01__head::after {
right: auto;
left: -70px;
}
.c-set01.is-rev .c-set01__area-img {
order: -1;
margin-right: 0;
margin-left: auto;
text-align: right;
}
}
/* c-single01
------------------------------------- */
.c-single01__head {
padding-bottom: 10px;
margin-bottom: 10px;
border-bottom: 1px solid var(rgba(var(--color-grayscale-900), 0.6));
}
.c-single01__head-meta {
display: flex;
flex-wrap: wrap;
margin-bottom: 5px;
}
.c-single01__head h1 {
font-size: 2rem;
font-weight: 600;
}
.c-single01__date {
margin-right: 1em;
}
.c-single01__cat {
display: flex;
flex-wrap: wrap;
flex: 1;
}
.c-single01__cat-label {
display: flex;
align-items: center;
justify-content: center;
min-width: 90px;
background: rgb(var(--color-grayscale-900));
margin: 0 0 5px 5px;
color: #fff;
}
/* .c-single-content
================================================== */
.c-single-content *:first-child {
margin-top: 0;
}
.c-single-content *:last-child {
margin-bottom: 0;
}
.c-single-content p {
margin: 1em 0;
}
.c-single-content h2 {
font-size: 2em;
}
.c-single-content h3 {
font-size: 1.5em;
}
.c-single-content h4 {
font-size: 1.25em;
}
.c-single-content strong {
color: rgb(var(--red));
}
.c-single-content a[target=_blank]::after {
margin-left: 5px;
content: "";
display: inline-block;
width: 10px;
height: 9px;
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;
}
.c-single-content ul {
margin: 1em 0;
padding-left: 1.25em;
}
.c-single-content ul li {
box-sizing: border-box;
}
.c-single-content ul li::marker {
content: "・";
color: blue;
}
.c-single-content ol {
margin: 1em 0;
padding-left: 0;
counter-reset: num;
}
.c-single-content ol li {
counter-increment: num;
position: relative;
display: flex;
align-items: flex-start;
box-sizing: border-box;
flex: 1;
}
.c-single-content ol li::before {
content: counter(num, decimal-leading-zero) ".";
display: inline-block;
padding-right: 0.5em;
white-space: nowrap;
color: rgb(var(--main));
}
.c-single-content blockquote {
position: relative;
line-height: 1.6;
margin: 1.5em 0;
padding: 0 0 0 1em;
clear: both;
}
.c-single-content blockquote:before {
content: "";
position: absolute;
top: 0.25em;
left: 0;
height: calc(100% - 0.5em);
width: 2px;
background: var(rgba(var(--color-grayscale-900), 0.6));
}
@media (min-width: 768px) {
.c-single-content {
display: flow-root;
}
.c-single-content .alignleft {
float: left;
margin: 0 1em 1em 0;
clear: right;
}
.c-single-content .alignleft + .alignleft {
clear: left;
}
.c-single-content .alignright {
float: right;
margin: 0 0 1em 1em;
}
.c-single-content .aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
clear: both;
}
}
@media (hover: hover) and (pointer: fine) {
.c-single-content a:hover {
text-decoration: none;
}
}
/* .c-table01.is-block-sp
================================================== */
@media (max-width: 767px) {
.c-table01.is-block-sp table, .c-table01.is-block-sp thead, .c-table01.is-block-sp tbody, .c-table01.is-block-sp tr, .c-table01.is-block-sp th, .c-table01.is-block-sp td {
display: block;
}
.c-table01.is-block-sp th {
border-bottom: 0;
}
.c-table01.is-block-sp tr + tr th {
border-top: 0;
}
}
/* .c-table01
================================================== */
.c-table01 table {
border-top: 1px solid;
}
.c-table01 tr {
border-bottom: 1px solid;
}
.c-table01 th, .c-table01 td {
font-weight: 400;
text-align: left;
padding: 10px;
box-sizing: border-box;
}
.c-table01 th {
width: 80px;
background: rgb(var(--color-grayscale-300));
color: rgb(var(--color-primary-100));
vertical-align: middle;
}
.c-table01 td {
vertical-align: top;
}
@media (max-width: 767px) {
.c-table01 th, .c-table01 td {
font-size: 1.2rem;
}
}
@media (min-width: 768px) {
.c-table01 th {
width: 200px;
padding: 15px 30px;
font-size: 1.6rem;
text-align: justify;
text-align-last: justify;
}
.c-table01 td {
padding: 15px 30px;
}
}
/* .c-lead01
================================================== */
.c-lead01 {
max-width: calc(100vw - var(--body_padding_side) * 2);
margin: 0 auto 40px;
color: rgb(var(--color-primary-100));
text-align: center;
}
@media (min-width: 768px) {
.c-lead01 {
max-width: var(--contents_width);
margin: 0 auto 70px;
}
}
/* .l-breadcrumb
================================================ */
.l-breadcrumb-list {
display: flex;
flex-wrap: wrap;
padding-top: 20px;
padding-bottom: 20px;
}
.l-breadcrumb-list__item {
display: inline-block;
vertical-align: top;
}
.l-breadcrumb-list__item + .l-breadcrumb-list__item {
margin-left: 5px;
}
.l-breadcrumb-list__item + .l-breadcrumb-list__item:before {
content: ">";
margin-right: 5px;
}
@media (max-width: 767px) {
.l-breadcrumb-list {
white-space: nowrap;
flex-wrap: nowrap;
-webkit-overflow-scrolling: touch;
overflow: auto;
}
.l-breadcrumb-list::-webkit-scrollbar {
display: none;
}
}
/* .l-footer
================================================ */
.l-footer {
position: relative;
padding: 50px 0 20px;
background: rgb(var(--color-primary-100));
color: rgb(var(--color-grayscale-100));
}
.l-footer__logo {
margin-bottom: 10px;
}
.l-footer__logo svg {
width: 160px;
}
.l-footer__cr {
font-weight: 400;
font-size: 1rem;
}
@media (min-width: 768px) {
.l-footer {
padding: 40px 0;
}
.l-footer__inner {
display: grid;
grid-template-columns: auto auto;
justify-content: space-between;
grid-column-gap: 30px;
}
.l-footer-nav {
grid-area: 1/1/2/2;
margin-bottom: 50px;
}
.l-footer-nav__item {
font-weight: 400;
font-size: 1.6rem;
letter-spacing: 0.2em;
}
.l-footer-nav__item-link {
display: block;
padding: 5px 0;
}
.l-footer__logo {
margin-bottom: 0;
}
.l-footer__logo-txt {
display: block;
margin-bottom: 10px;
font-size: 1.3rem;
}
.l-footer__cr {
align-self: end;
font-size: 1.2rem;
text-align: right;
}
}
@media (hover: hover) and (pointer: fine) {
.l-footer-nav__item-link:hover {
text-decoration: underline;
}
}
.l-footer-cv {
display: flex;
align-items: center;
}
.l-footer-cv__btn {
flex: 1;
max-width: 150px;
border-radius: 100px;
color: rgb(var(--color-primary-100));
font-weight: 400;
font-size: 1.5rem;
text-align: center;
letter-spacing: 0.2em;
}
.l-footer-cv__btn-in {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: inherit;
height: 100%;
background: linear-gradient(to bottom, #fff 50%, #f0f0f0 50%);
}
.l-footer-cv__btn-ico {
margin-right: -10px;
}
@media (max-width: 767px) {
.l-footer-cv {
justify-content: center;
gap: 20px;
width: 100%;
padding: 0 var(--body_padding_side);
height: var(--fixedcv_height);
position: fixed;
left: 0;
bottom: 0;
z-index: 9000;
background: rgb(var(--color-primary-100));
box-sizing: border-box;
}
.l-footer-cv__btn {
height: calc(100% - 25px);
}
.l-footer-cv__btn-ico::after {
width: 14px !important;
height: 10px !important;
}
}
@media (min-width: 768px) {
.l-footer-cv {
grid-area: 1/2/2/3;
align-self: start;
justify-content: flex-end;
gap: 20px;
}
.l-footer-cv__btn {
max-width: none;
width: 200px;
height: 54px;
font-size: 2rem;
}
}
@media (hover: hover) and (pointer: fine) {
.l-footer-cv__btn-in {
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.l-footer-cv__btn-in::before {
content: "";
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: rgba(181, 215, 237, 0.5);
border-radius: inherit;
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: all 0.3s ease;
opacity: 0;
}
.l-footer-cv__btn-in:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.l-footer-cv__btn-in:hover::before {
opacity: 1;
}
.l-footer-cv__btn-in:hover .l-footer-cv__btn-ico {
transform: translateX(5px);
}
.l-footer-cv__btn-ico {
transition: all 0.3s ease;
}
}
/* .l-header
================================================ */
.l-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
min-width: 320px;
z-index: 2000;
border-bottom: 1px solid #bdd1dd;
box-sizing: border-box;
}
@media (min-width: 768px) {
.l-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
min-width: var(--contents_width_with_padding);
height: var(--header_height);
padding: 0 100px 20px;
background: #fff;
}
}
@media (min-width: 768px) and (hover: none) {
.l-header {
left: 0 !important;
}
}
/* .l-header-info
================================================== */
.l-header-info {
position: relative;
z-index: 3;
box-sizing: border-box;
height: var(--header_height);
padding: 0 0 0 15px;
background: #fff;
}
.l-header-info__inner {
height: 100%;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
.l-header-info__logo-link {
display: flex !important;
align-items: center;
gap: 10px;
}
.l-header-info__logo svg {
width: 100px;
}
.l-header-info__logo-txt {
padding: 1px 5px;
background: rgb(var(--color-grayscale-300));
color: rgb(var(--color-primary-100));
font-size: 1rem;
letter-spacing: var(--letter-spacing_base);
}
@media (min-width: 768px) {
.l-header-info {
position: static;
height: auto;
padding: 0;
}
.l-header-info__logo {
flex-shrink: 0;
}
.l-header-info__logo-link {
gap: 20px;
}
.l-header-info__logo svg {
width: 150px;
}
.l-header-info__logo-txt {
padding: 1px 9px;
font-size: 1.6rem;
}
}
/* .l-nav-btn
================================================== */
.l-nav-btn {
position: relative;
width: 60px;
height: 60px;
border: none;
cursor: pointer;
}
.l-nav-btn__line {
position: absolute;
left: 0;
right: 0;
margin: auto;
width: 30px;
height: 2px;
content: "";
background: rgb(var(--color-primary-100));
transition: all 0.3s ease;
}
.l-nav-btn__line:nth-child(1) {
top: 20px;
}
.l-nav-btn__line:nth-child(2) {
top: 26px;
}
.l-nav-btn__line:nth-child(3) {
top: 32px;
}
.l-nav-btn.is-open .l-nav-btn__line {
top: 26px;
}
.l-nav-btn.is-open .l-nav-btn__line:nth-child(1) {
transform: rotate(-20deg);
}
.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(20deg);
}
.l-nav-btn__txt {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
font-size: 1rem;
line-height: 1.2;
text-align: center;
}
/* .l-nav
================================================ */
.l-nav {
position: absolute;
top: var(--header_height);
left: 0;
z-index: 2;
width: 100%;
max-height: calc(100vh - var(--header_height));
min-width: 320px;
padding: 50px var(--body_padding_side) calc(var(--fixedcv_height) + 30px);
background: #fff;
box-sizing: border-box;
overscroll-behavior-y: none;
-webkit-overflow-scrolling: touch;
}
@media (max-width: 767px) {
.l-nav {
overflow: auto;
transform: translateX(120%);
transition: all 0.3s ease;
}
.l-nav::-webkit-scrollbar {
display: none;
}
.l-nav.is-open {
transform: translateX(0);
}
}
@media (min-width: 768px) {
.l-nav {
flex: 1;
position: static;
min-width: auto;
margin: 0 0 0 30px;
padding: 0;
}
}
/* .l-nav-list
================================================== */
.l-nav-list__item {
color: rgb(var(--color-primary-100));
}
.l-nav-list__item-link {
display: block;
}
@media (max-width: 767px) {
.l-nav-list__item {
border-bottom: 1px solid;
}
.l-nav-list__item-link {
position: relative;
border: 0;
padding: 15px 30px 15px 0;
}
.l-nav-list__item-ico {
position: absolute;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
}
@media (min-width: 768px) {
.l-nav-list {
display: flex;
justify-content: flex-end;
flex-wrap: wrap;
}
.l-nav-list__item {
position: relative;
letter-spacing: 0.2em;
}
.l-nav-list__item::after, .l-nav-list__item:first-of-type::before {
content: "";
display: block;
width: 1px;
height: 1em;
background: currentColor;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.l-nav-list__item::after {
right: 0;
}
.l-nav-list__item:first-of-type::before {
left: 0;
}
.l-nav-list__item-link {
padding: 3px 20px;
position: relative;
}
.l-nav-list__item-link::after {
content: "";
display: block;
width: 1px;
height: 1px;
background: currentColor;
position: absolute;
right: 0;
bottom: 0;
left: 0;
margin: auto;
opacity: 0;
transition: all 0.3s ease;
}
}
@media (hover: hover) and (pointer: fine) {
.l-nav-list__item-link:hover::after {
width: 80%;
opacity: 1;
}
}
/* .l-nav-overlay
================================================ */
.l-nav-overlay {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25);
z-index: 1000;
}
/* .l-main-img HOME
================================================ */
.l-main-img {
position: relative;
width: 100%;
padding: 0 0 50px;
}
.l-main-img .swiper-slide {
overflow: hidden;
}
.l-main-img__inner {
position: relative;
z-index: 2;
padding: 0 15px 0 30px;
}
.l-main-img__txt01 {
margin: 0 0 max(85px, 25vw) auto;
writing-mode: vertical-rl;
white-space: nowrap;
font-size: max(2.2rem, 6.4vw);
line-height: 1;
}
.l-main-img__txt01-in {
width: 1em;
padding: max(5px, 1.5vw);
height: -moz-fit-content;
height: fit-content;
display: block;
background: rgba(255, 255, 255, 0.7);
}
.l-main-img__txt02 {
padding: max(10px, 3vw) max(2px, 1vw);
background: rgba(255, 255, 255, 0.7);
font-size: max(1.1rem, 3.2vw);
line-height: max(205%, 6.6vw);
writing-mode: vertical-rl;
}
.l-main-img__img {
width: 100%;
position: absolute;
top: 70px;
right: 0;
}
.l-main-img__img img {
width: 100%;
}
.l-main-img__arrow {
position: absolute;
right: 0;
bottom: 15px;
left: 0;
margin: auto;
color: rgb(var(--color-primary-100));
text-align: center;
}
.l-main-img__arrow::after {
content: "";
display: inline-block;
width: 43px;
height: 18px;
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;
}
@media (max-width: 767px) {
.l-main-img__txt01-in:last-of-type {
padding-top: 1em;
}
}
@media (min-width: 768px) {
.l-main-img {
min-height: 750px;
padding: 0;
}
.l-main-img__inner {
display: flex;
flex-direction: row-reverse;
align-items: flex-start;
padding-top: 45px;
}
.l-main-img__txt01 {
margin: -10px 30px 0 0;
font-size: 3.8rem;
line-height: 1.5;
}
.l-main-img__txt01-in {
display: inline-block;
width: auto;
height: auto;
padding: 0;
background: none;
}
.l-main-img__txt02 {
margin: 0 0 0 auto;
padding: 20px 10px;
line-height: 2.3;
font-size: 1.8rem;
letter-spacing: 0;
}
.l-main-img__img {
width: min(50% + 220px, 817px);
height: 100%;
top: 0;
right: calc(50% - 220px);
}
.l-main-img__img img {
width: 100%;
height: 100%;
object-fit: cover;
}
.l-main-img__arrow {
bottom: 0;
color: rgb(var(--color-grayscale-100));
}
.l-main-img__arrow::after {
width: 86px;
height: 35px;
}
}
/* fadein */
.l-main-img__txt01, .l-main-img__txt02 {
opacity: 0;
transform: translateY(20px);
animation: fadeIn01 1.5s ease-in-out forwards;
}
.l-main-img__txt01 {
animation-delay: 0.5s;
}
.l-main-img__txt02 {
animation-delay: 0.8s;
}
.l-main-img__img {
opacity: 0;
animation: fadeIn02 1s ease-in-out forwards;
}
@keyframes fadeIn01 {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes fadeIn02 {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
/* .l-sub-img
================================================ */
.l-sub-img {
padding: 40px 0;
color: rgb(var(--color-primary-100));
text-align: center;
}
.l-sub-img__head {
margin-bottom: 5px;
font-weight: var(--font_weight_base);
font-size: 2.8rem;
letter-spacing: 0.2em;
}
.l-sub-img__en {
font-size: 1rem;
letter-spacing: 0.1em;
}
.l-sub-img__copy {
margin-top: 15px;
font-size: 1.2rem;
}
@media (min-width: 768px) {
.l-sub-img {
padding: 80px 0;
}
.l-sub-img__head {
font-size: 5rem;
}
.l-sub-img__en {
font-size: 1.4rem;
}
.l-sub-img__copy {
margin-top: 40px;
font-size: 1.4rem;
}
}
.l-sub-img.is-type01 {
color: var(--font_color_base);
}
.l-sub-img.is-type02 {
background: linear-gradient(150deg, #14329f 0, #8498Cf 100%);
color: rgb(var(--color-grayscale-100));
}
.l-sub-img.is-type02 .l-sub-img__head {
font-size: 3.2rem;
}
@media (min-width: 768px) {
.l-sub-img.is-type02 {
padding-bottom: 100px;
}
.l-sub-img.is-type02 .l-sub-img__head {
margin-bottom: 0;
font-size: 6rem;
}
}
/* .l-sidebar
================================================== */
.js-c-anime-elem[data-anime=fadein-up] {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.js-c-anime-elem[data-anime=fadein-up].is-animated {
opacity: 1;
transform: translateY(0);
}
.js-c-anime-elem[data-anime=fadein-left] {
opacity: 0;
transform: translateX(-30px);
transition: all 0.6s ease;
}
.js-c-anime-elem[data-anime=fadein-left].is-animated {
opacity: 1;
transform: translateX(0);
}
.js-c-anime-elem[data-anime=fadein-right] {
opacity: 0;
transform: translateX(30px);
transition: all 0.6s ease;
}
.js-c-anime-elem[data-anime=fadein-right].is-animated {
opacity: 1;
transform: translateX(0);
}
.js-c-anime-elem[data-anime-delay="0.1"] {
transition-delay: 0.1s;
}
.js-c-anime-elem[data-anime-delay="0.2"] {
transition-delay: 0.2s;
}
.js-c-anime-elem[data-anime-delay="0.3"] {
transition-delay: 0.3s;
}
.js-c-anime-elem[data-anime-delay="0.4"] {
transition-delay: 0.4s;
}
.js-c-anime-elem[data-anime-delay="0.5"] {
transition-delay: 0.5s;
}
.js-c-anime-elem[data-anime-delay="0.6"] {
transition-delay: 0.6s;
}
.js-c-anime-elem[data-anime-delay="0.7"] {
transition-delay: 0.7s;
}
.js-c-anime-elem[data-anime-delay="0.8"] {
transition-delay: 0.8s;
}
.js-c-anime-elem[data-anime-delay="0.9"] {
transition-delay: 0.9s;
}
.js-c-anime-elem[data-anime-delay="1"] {
transition-delay: 1s;
}
.js-c-anime-elem[data-anime-delay="1.1"] {
transition-delay: 1.1s;
}
.js-c-anime-elem[data-anime-delay="1.2"] {
transition-delay: 1.2s;
}
.js-c-anime-elem[data-anime-delay="1.3"] {
transition-delay: 1.3s;
}
.js-c-anime-elem[data-anime-delay="1.4"] {
transition-delay: 1.4s;
}
.js-c-anime-elem[data-anime-delay="1.5"] {
transition-delay: 1.5s;
}
.js-c-anime-elem[data-anime-delay="1.6"] {
transition-delay: 1.6s;
}
.js-c-anime-elem[data-anime-delay="1.7"] {
transition-delay: 1.7s;
}
.js-c-anime-elem[data-anime-delay="1.8"] {
transition-delay: 1.8s;
}
.js-c-anime-elem[data-anime-delay="1.9"] {
transition-delay: 1.9s;
}
.js-c-anime-elem[data-anime-delay="2"] {
transition-delay: 2s;
}
.js-c-switch-tab {
cursor: pointer;
}
.js-c-switch-content {
display: none;
}
.js-c-switch-content.is-active {
display: block;
}
.js-c-toggle-trigger {
cursor: pointer;
}
.js-c-toggle-content {
display: none;
}
/* .company-info
================================================ */
.company-info__inner {
padding-top: 30px;
padding-bottom: 60px;
}
@media (min-width: 768px) {
.company-info__inner {
padding-bottom: 180px;
}
.company-info-data {
width: min(100%, 800px);
margin: 0 auto;
}
}
/* .error-page404
================================================ */
.error-page404__inner {
padding-top: 50px;
padding-bottom: 50px;
}
@media (min-width: 768px) {
.error-page404__inner {
padding-top: 100px;
padding-bottom: 100px;
}
}
/* .home-special
================================================ */
.home-special {
background: rgb(var(--color-surface-500));
position: relative;
}
.home-special::after {
position: absolute;
right: 0;
bottom: 15px;
left: 0;
margin: auto;
content: "";
display: inline-block;
width: 43px;
height: 18px;
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;
color: rgb(var(--color-primary-100));
}
.home-special__inner {
padding-top: 50px;
padding-bottom: 60px;
}
.home-special__head {
margin-bottom: 20px;
font-weight: var(--font_weight_base);
color: rgb(var(--color-primary-100));
font-size: 2.6rem;
letter-spacing: 0.1em;
text-align: center;
}
.home-special__lead {
margin-bottom: 30px;
}
.home-special__txt {
text-align: center;
}
@media (min-width: 768px) {
.home-special {
margin-top: 40px;
}
.home-special::after {
width: 86px;
height: 35px;
bottom: 40px;
}
.home-special__inner {
padding-top: 50px;
padding-bottom: 130px;
}
.home-special__head {
margin-bottom: 15px;
font-size: 3.6rem;
}
.home-special__lead {
width: min(100%, 800px);
margin: 0 auto 50px;
font-size: 1.6rem;
text-align: center;
}
.home-special__txt {
font-size: 1.6rem;
}
}
.home-special-box {
margin-bottom: 30px;
padding: 30px var(--body_padding_side) 40px;
background: rgb(var(--color-grayscale-100));
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
.home-special-box__head {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 30px;
padding: 0 10px 5px;
border-bottom: 1px solid;
font-weight: var(--font_weight_base);
font-size: 2rem;
text-align: center;
}
.home-special-box-list {
margin-bottom: 20px;
padding-bottom: 40px;
border-bottom: 1px solid #959595;
}
.home-special-box-list__num {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 10px;
padding: 0 3px 5px;
border-bottom: 1px solid;
font-size: 1.6rem;
line-height: 1.1;
}
.home-special-box-list__num-big {
margin-left: 5px;
font-size: 1.8em;
vertical-align: -3px;
}
.home-special-box-list__head {
margin-bottom: 15px;
color: rgb(var(--color-primary-100));
font-weight: var(--font_weight_base);
font-size: 1.8rem;
text-align: center;
}
.home-special-box-list__head-small {
font-size: 1.2rem;
}
.home-special-box-list__txt-small {
font-size: 1.2rem;
}
.home-special-box__note {
font-size: 1.2rem;
}
@media (max-width: 767px) {
.home-special-box-list__item + .home-special-box-list__item {
margin-top: 30px;
padding-top: 30px;
position: relative;
}
.home-special-box-list__item + .home-special-box-list__item::after {
content: "";
display: block;
width: 14px;
height: 12px;
clip-path: polygon(0 0, 100% 0, 50% 100%);
background: rgb(var(--color-primary-100));
position: absolute;
top: 0;
right: 0;
left: 0;
margin: auto;
}
}
@media (min-width: 768px) {
.home-special-box {
width: min(100%, 860px);
margin: 0 auto 40px;
padding: 40px 100px 60px;
box-sizing: border-box;
}
.home-special-box__head {
padding: 0 5px 3px;
font-size: 2.4rem;
letter-spacing: 0.1em;
}
.home-special-box-list {
margin-bottom: 20px;
padding-bottom: 0;
}
.home-special-box-list__item {
display: grid;
grid-template-columns: 85px 1fr;
align-items: center;
grid-column-gap: 10px;
padding: 15px 0;
}
.home-special-box-list__item + .home-special-box-list__item {
border-top: 1px solid #959595;
}
.home-special-box-list__num {
grid-area: 1/1/3/2;
padding: 0;
margin: 0;
border: none;
font-size: 2.4rem;
}
.home-special-box-list__num-big {
font-size: 3.6rem;
}
.home-special-box-list__head {
margin-bottom: 5px;
text-align: left;
}
.home-special-box-list__head-small {
font-size: 1.4rem;
}
.home-special-box-list__txt-small {
font-size: 1.4rem;
}
}
/* .home-cv
================================================ */
.home-cv {
margin-bottom: 60px;
background: #b5d7ed;
}
.home-cv__inner {
padding-top: 30px;
padding-bottom: 30px;
}
.home-cv__txt01 {
width: -moz-fit-content;
width: fit-content;
margin: 0 auto 5px;
padding: 0 10px;
font-size: 1.4rem;
text-align: center;
position: relative;
}
.home-cv__txt01::before, .home-cv__txt01::after {
content: "";
display: block;
width: 1px;
height: 80%;
background: currentColor;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
.home-cv__txt01::before {
left: 0;
transform: rotate(-30deg);
}
.home-cv__txt01::after {
right: 0;
transform: rotate(30deg);
}
.home-cv__txt02 {
margin-bottom: 20px;
color: rgb(var(--color-primary-100));
text-align: center;
font-size: 2rem;
line-height: 1.3;
}
.home-cv__txt02-middle {
font-size: 0.9em;
font-weight: bold;
}
.home-cv__txt02-big {
font-size: 1.3em;
font-weight: bold;
}
.home-cv__txt02-small {
font-size: 0.7em;
}
.home-cv__btn {
width: min(100%, 240px);
height: 54px;
margin: 0 auto;
border-radius: 100px;
color: rgb(var(--color-primary-100));
font-weight: 400;
font-size: 2rem;
letter-spacing: 0.2em;
}
.home-cv__btn-in {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
border-radius: inherit;
height: 100%;
background: linear-gradient(to bottom, #fff 50%, #f0f0f0 50%);
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
}
.home-cv__btn-ico {
margin-right: -15px;
}
@media (min-width: 768px) {
.home-cv {
margin-bottom: 100px;
}
.home-cv__inner {
padding-top: 35px;
padding-bottom: 50px;
}
.home-cv__txt01 {
padding: 0 20px;
font-size: 2.2rem;
letter-spacing: 0.2em;
}
.home-cv__txt01::before, .home-cv__txt01::after {
height: 85%;
}
.home-cv__txt02 {
margin-bottom: 30px;
font-size: 3.4rem;
}
.home-cv__btn {
width: 320px;
height: 74px;
font-size: 2.8rem;
}
.home-cv__btn-in {
gap: 10px;
}
.home-cv__btn-ico::after {
width: 22px !important;
height: 18px !important;
}
}
@media (hover: hover) and (pointer: fine) {
.home-cv__btn-in {
overflow: hidden;
position: relative;
z-index: 1;
transition: all 0.3s ease;
}
.home-cv__btn-in::before {
content: "";
display: block;
width: calc(100% - 4px);
height: calc(100% - 4px);
background: rgba(var(--color-primary-100), 0.2);
border-radius: inherit;
position: absolute;
z-index: -1;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
transition: all 0.3s ease;
opacity: 0;
}
.home-cv__btn-in:hover {
box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}
.home-cv__btn-in:hover::before {
opacity: 1;
}
.home-cv__btn-in:hover .home-cv__btn-ico {
transform: translateX(5px);
}
.home-cv__btn-ico {
transition: all 0.3s ease;
}
}
/* .home-news
================================================ */
.home-news {
margin-bottom: 60px;
}
.home-news-box {
padding: 0 var(--body_padding_side);
background: rgb(var(--color-grayscale-200));
}
@media (max-width: 767px) {
.home-news__inner {
padding-left: 0;
padding-right: 0;
}
}
@media (min-width: 768px) {
.home-news {
margin-bottom: 90px;
}
.home-news-box {
padding: 10px 80px;
}
}
/* .home-about
================================================ */
.home-about__inner {
padding-bottom: 60px;
}
.home-about-list {
width: 100%;
margin: 0 auto;
}
.home-about-list__item + .home-about-list__item {
margin-top: 25px;
}
.home-about-list__in {
position: relative;
}
.home-about-list__txt {
position: absolute;
z-index: 2;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
height: -moz-fit-content;
height: fit-content;
width: 100%;
color: rgb(var(--color-grayscale-100));
font-weight: 400;
font-size: 2.2rem;
letter-spacing: 0.2em;
text-align: center;
}
.home-about-list__img img {
width: 100%;
}
.home-about-list__more {
position: absolute;
z-index: 2;
right: 10px;
bottom: 10px;
width: 60px;
height: 22px;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
background: rgb(var(--color-grayscale-100));
border-radius: 100px;
color: rgb(var(--color-primary-100));
font-size: 1.2rem;
}
.home-about-list__more::after {
content: "";
display: block;
width: 5px;
height: 7px;
clip-path: polygon(0 0, 100% 50%, 0 100%);
background: currentColor;
}
@media (min-width: 768px) {
.home-about__inner {
padding-bottom: 160px;
}
.home-about-list {
width: 100%;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 20px;
}
.home-about-list__item + .home-about-list__item {
margin-top: 0;
}
.home-about-list__txt {
font-size: 3.6rem;
}
.home-about-list__more {
width: 88px;
height: 32px;
right: 15px;
bottom: 15px;
font-size: 1.5rem;
}
.home-about-list__more::after {
width: 7px;
height: 8px;
}
}
@media (hover: hover) and (pointer: fine) {
.home-about-list__in:hover .home-about-list__more {
background: rgb(var(--color-primary-100));
color: rgb(var(--color-grayscale-100));
}
.home-about-list__more {
transition: all 0.3s ease;
}
}
/* .interview-info
================================================ */
.interview-info {
margin-bottom: 60px;
}
.interview-info:first-child {
border-bottom: 1px dotted #ccc;
padding-bottom: 30px;
margin-bottom: 30px;
}
.interview-info-top {
margin-bottom: 60px;
position: relative;
}
.interview-info-top::after {
content: "";
display: block;
width: calc(100% - 50px);
height: 70%;
background: rgb(var(--color-surface-500));
position: absolute;
top: 25px;
right: 0;
z-index: -1;
}
.interview-info-top__area-txt {
margin: 0 var(--body_padding_side) 0 auto;
writing-mode: vertical-rl;
text-orientation: upright;
position: relative;
z-index: 2;
}
.interview-info-top-heading {
display: flex;
flex-direction: row;
align-items: center;
margin-left: 5px;
}
.interview-info-top-heading__head {
font-weight: var(--font_weight_base);
font-size: 2.4rem;
line-height: 1.5;
letter-spacing: 0.1em;
}
.interview-info-top-heading__num {
order: -1;
width: 50px;
margin-bottom: 10px;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.4rem;
aspect-ratio: 1/1;
border-radius: 50%;
border: 1px solid;
background: rgb(var(--color-grayscale-100));
writing-mode: horizontal-tb;
}
.interview-info-top__prof {
margin: 65px 0 0 20px;
font-size: 1.6rem;
}
.interview-info-top__prof-small {
font-size: 0.8em;
}
.interview-info-top__txt {
margin: 90px 0 0 auto;
}
.interview-info-top__area-img {
width: calc(100% - 50px);
margin: -220px auto 0 0;
}
.interview-info-top__area-img img {
width: 100%;
}
.interview-info-box01 {
margin-bottom: 60px;
padding: 0 var(--body_padding_side);
}
.interview-info-box01__txt {
width: calc(100% - var(--body_padding_side) * 2);
margin: 0 auto;
position: relative;
}
.interview-info-box01__area-img {
margin: -50px calc(var(--body_padding_side) * -1) 0 0;
}
.interview-info-box01__area-img img {
width: 100%;
}
.interview-info-box02 {
width: min(100% - 80px, 300px);
margin: 0 auto 60px;
}
.interview-info-box02__item + .interview-info-box02__item {
margin-top: 40px;
}
.interview-info-box02__area-img {
margin-bottom: 15px;
}
.interview-info-box02__area-img img {
width: 100%;
}
@media (max-width: 767px) {
.interview-info-top__inner {
padding: 0;
}
.interview-info-top__area-txt {
white-space: nowrap;
}
.interview-info-box01__txt.is-small {
width: 245px;
margin: 0 0 0 20px;
}
}
@media (min-width: 768px) {
.interview-info {
margin-bottom: 260px;
}
.interview-info:first-child {
padding-bottom: 130px;
margin-bottom: 130px;
}
.interview-info-top {
margin-bottom: 50px;
}
.interview-info-top::after {
width: calc(50% + 45px);
height: 70%;
top: 0;
}
.interview-info-top__inner {
display: grid;
grid-template-columns: min(55%, 548px) 1fr;
align-items: start;
grid-column-gap: 60px;
padding-top: 45px;
}
.interview-info-top__area-txt {
margin: 0 auto 0 0;
}
.interview-info-top-heading {
margin-left: 10px;
}
.interview-info-top-heading__head {
font-size: 4rem;
}
.interview-info-top-heading__num {
width: 100px;
font-size: 2.2rem;
}
.interview-info-top__prof {
margin: 115px 0 0 25px;
font-size: 1.8rem;
}
.interview-info-top__txt {
margin-top: 115px;
line-height: 2.2;
}
.interview-info-top__area-img {
order: -1;
width: 100%;
margin: 40px 0 0;
}
.interview-info-box01 {
width: min(100%, var(--contents_width));
margin: 0 auto 100px;
position: relative;
}
.interview-info-box01__txt {
width: auto;
position: absolute;
z-index: 2;
top: 70px;
left: 140px;
line-height: 2;
}
.interview-info-box01__area-img {
margin: 0 0 0 auto;
width: min(50% + 180px, 680px);
}
.interview-info-box02 {
width: min(100%, 860px);
margin-bottom: 130px;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 60px;
}
.interview-info-box02__item + .interview-info-box02__item {
margin-top: 0;
}
}
.interview-info-voice {
margin-bottom: 60px;
padding: 0 0 30px;
background: rgb(var(--color-surface-500));
}
.interview-info-voice__head {
margin: 0 auto 10px;
color: #595959;
font-weight: var(--font_weight_base);
font-size: 2.4rem;
text-align: right;
letter-spacing: 0.2em;
line-height: 1.1;
transform: translateY(-0.5em);
}
.interview-info-voice__area-img {
width: calc(100% - var(--body_padding_side) * 2);
margin: 0 auto 20px;
}
.interview-info-voice__area-img img {
width: 100%;
}
@media (min-width: 768px) {
.interview-info-voice {
margin-bottom: 70px;
padding-bottom: 65px;
}
.interview-info-voice__inner {
max-width: 910px;
display: grid;
grid-template-columns: min(48%, 400px) 1fr;
grid-column-gap: 20px;
}
.interview-info-voice__head {
width: min(100%, 820px);
margin-bottom: 30px;
grid-area: 1/1/2/3;
font-size: 2.6rem;
transform: translateY(-0.7em);
}
.interview-info-voice__area-img {
order: -1;
width: 100%;
margin: 0;
}
.interview-info-voice__area-txt {
display: flex;
justify-content: flex-end;
max-height: 270px;
}
.interview-info-voice__txt {
writing-mode: vertical-rl;
text-orientation: upright;
line-height: 2.2;
}
}
.interview-info-case__inner {
display: grid;
grid-template-columns: min(40%, 130px) 1fr;
grid-column-gap: 15px;
}
.interview-info-case__head {
margin-bottom: 5px;
padding-bottom: 5px;
font-size: 1.4rem;
position: relative;
}
.interview-info-case__head::after {
content: "";
display: block;
width: calc(100% + 15px);
height: 1px;
background: currentColor;
position: absolute;
bottom: 0;
right: 0;
}
.interview-info-case__txt {
margin-bottom: 5px;
font-size: 1.1rem;
}
.interview-info-case-detail {
display: grid;
grid-template-columns: auto 1fr;
font-size: 1rem;
}
.interview-info-case-detail__head {
grid-column: 1/2;
text-align: right;
}
.interview-info-case-detail__txt {
grid-column: 2/3;
}
.interview-info-case__area-img {
order: -1;
}
.interview-info-case__area-img img {
width: 100%;
}
@media (min-width: 768px) {
.interview-info-case__inner {
max-width: 760px;
grid-template-columns: 325px 1fr;
grid-column-gap: 40px;
}
.interview-info-case__area-txt {
margin-top: 30px;
}
.interview-info-case__head {
margin-bottom: 10px;
padding-bottom: 10px;
}
.interview-info-case__head::after {
width: calc(100% + 40px);
}
.interview-info-case__txt {
font-size: 1.2rem;
}
.interview-info-case-detail {
font-size: 1.2rem;
}
}
#vol02.interview-info .interview-info-voice__head {
text-align: left;
}
@media (max-width: 767px) {
#vol02.interview-info .interview-info-box01 {
display: grid;
grid-template-columns: 1fr;
}
#vol02.interview-info .interview-info-box01__area-img {
order: -1;
margin-top: 0;
margin-bottom: -20px;
}
}
@media (min-width: 768px) {
#vol02.interview-info {
padding-bottom: 130px;
}
#vol02.interview-info .interview-info-top .interview-info-top__area-img {
width: 680px;
margin-top: 160px;
}
}
/* mv
================================================ */
#life-style .l-sub-img {
margin-bottom: 60px;
}
@media (min-width: 768px) {
#life-style .l-sub-img {
margin-bottom: 100px;
}
}
/* .life-style-info
================================================ */
#info02.life-style-info {
margin-top: 100px;
padding-bottom: 100px;
}
@media (min-width: 768px) {
#info02.life-style-info {
margin-top: 250px;
padding-bottom: 340px;
}
}
/* mv
================================================ */
#performance .l-sub-img {
margin-bottom: 60px;
}
@media (min-width: 768px) {
#performance .l-sub-img {
margin-bottom: 100px;
}
}
/* .performance-info
================================================ */
.performance-info {
padding-bottom: 60px;
}
@media (min-width: 768px) {
.performance-info {
padding-bottom: 120px;
}
}
/* .c-set01 - custom layout */
@media (max-width: 767px) {
.performance-info-box.is-custom01 .performance-info-box__area-img {
margin-left: 100px;
}
}
@media (min-width: 768px) {
.performance-info-box.is-custom01 {
padding-top: 35px;
}
.performance-info-box.is-custom01 .performance-info-box__area-img {
margin-top: -35px;
}
}
/* .performance-awards
================================================ */
.performance-awards {
margin-bottom: 60px;
background: linear-gradient(45deg, #ad8e4e 0, #dbbc5b 40%, #f4e3a3 70%, #ccac4e 93%, #ccac4e 100%);
}
.performance-awards__inner {
padding-top: 60px;
padding-bottom: 60px;
}
.performance-awards__head {
margin-bottom: 20px;
font-weight: var(--font_weight_base);
font-size: 2.8rem;
text-align: center;
}
.performance-awards-box {
padding: 40px var(--body_padding_side);
background: rgb(var(--color-grayscale-100));
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.4);
text-align: center;
}
.performance-awards-box-sub + .performance-awards-box-sub {
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid #aeaeae;
}
@media (max-width: 767px) {
.performance-awards-box {
font-size: 1.2rem;
}
}
@media (min-width: 768px) {
.performance-awards {
margin-bottom: 180px;
}
.performance-awards__inner {
padding-top: 50px;
padding-bottom: 50px;
}
.performance-awards__head {
font-size: 6rem;
}
.performance-awards-box {
padding: 60px;
}
.performance-awards-box-sub + .performance-awards-box-sub {
margin-top: 40px;
padding-top: 40px;
}
}
.performance-awards-box-sub01__head {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
margin-bottom: 15px;
font-size: 1.1rem;
line-height: 1.1;
gap: 10px;
}
.performance-awards-box-sub01__head-big {
font-size: 2.4rem;
}
@media (max-width: 767px) {
.performance-awards-box-sub01__head-logo01 {
width: 80px;
}
.performance-awards-box-sub01__head-logo02 {
width: 40px;
}
}
@media (min-width: 768px) {
.performance-awards-box-sub01__head {
display: block;
font-size: 2.3rem;
}
.performance-awards-box-sub01__head-logo01 {
margin-bottom: 10px;
}
.performance-awards-box-sub01__head-logo02 {
vertical-align: -10px;
margin-left: 10px;
}
}
.performance-awards-box-sub02__head {
margin-bottom: 15px;
font-size: 1.4rem;
}
.performance-awards-box-sub02-list {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-gap: 15px;
text-align: left;
}
.performance-awards-box-sub02-list__item {
display: grid;
grid-template-columns: 1fr 35px;
align-items: center;
grid-column-gap: 5px;
padding-left: 1.2em;
position: relative;
}
.performance-awards-box-sub02-list__item::after {
content: "";
display: block;
width: 0.9em;
height: 0.9em;
border-radius: 50%;
background: #006636;
position: absolute;
top: 5px;
left: 0;
}
.performance-awards-box-sub02-list.is-center {
display: flex;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
@media (max-width: 767px) {
.performance-awards-box-sub02-list__item {
font-size: 0.9rem;
}
.performance-awards-box-sub02-list__item-logo {
width: 100%;
}
.performance-awards-box-sub02-list.is-center .performance-awards-box-sub02-list__item {
width: calc(50% - 7.5px);
box-sizing: border-box;
}
.performance-awards-box-sub02-list.is-center .performance-awards-box-sub02-list__item.is-wide {
width: 60%;
}
}
@media (min-width: 768px) {
.performance-awards-box-sub02__head {
margin-bottom: 30px;
font-size: 2.3rem;
}
.performance-awards-box-sub02-list {
grid-gap: 15px;
}
.performance-awards-box-sub02-list__item {
display: flex;
align-items: center;
gap: 15px;
}
.performance-awards-box-sub02-list__item::after {
top: 0;
bottom: 0;
margin: auto;
}
.performance-awards-box-sub02-list__item-logo {
flex-shrink: 0;
}
.performance-awards-box-sub02-list.is-center {
gap: 15px 30px;
}
}
.performance-awards-box-sub03 {
display: flex;
justify-content: center;
align-items: center;
gap: 0;
text-align: left;
}
.performance-awards-box-sub03__area-txt {
text-align: center;
}
.performance-awards-box-sub03__head {
line-height: 1.5;
margin-bottom: 5px;
}
.performance-awards-box-sub03__head-small {
font-size: 0.8em;
}
@media (max-width: 767px) {
.performance-awards-box-sub03__area-logo {
width: 50px;
}
.performance-awards-box-sub03__area-logo img {
width: 100%;
}
.performance-awards-box-sub03__txt {
font-size: 1rem;
}
}
@media (min-width: 768px) {
.performance-awards-box-sub03__head {
font-size: 2.3rem;
}
}
.performance-awards-box-sub04 {
display: flex;
justify-content: center;
align-items: center;
gap: 10px;
text-align: left;
}
@media (max-width: 767px) {
.performance-awards-box-sub04__area-logo {
width: 60px;
}
.performance-awards-box-sub04__area-logo img {
width: 100%;
}
}
@media (min-width: 768px) {
.performance-awards-box-sub04 {
gap: 20px;
}
.performance-awards-box-sub04__head {
font-size: 1.6rem;
}
}
.performance-awards-box-sub05 {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
text-align: left;
padding-left: 10px;
padding-right: 10px;
}
.performance-awards-box-sub05__area-logo {
display: flex;
align-items: center;
gap: 5px;
}
@media (max-width: 767px) {
.performance-awards-box-sub05__area-logo img {
width: 40px;
}
}
@media (min-width: 768px) {
.performance-awards-box-sub05 {
gap: 20px;
padding-left: 0;
padding-right: 0;
}
.performance-awards-box-sub05__head {
font-size: 2rem;
}
.performance-awards-box-sub05__area-logo {
gap: 15px;
}
}
.performance-awards-box-sub07 {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
text-align: left;
}
@media (max-width: 767px) {
.performance-awards-box-sub07__area-logo {
width: 80px;
}
.performance-awards-box-sub07__area-logo img {
width: 100%;
}
}
@media (min-width: 768px) {
.performance-awards-box-sub07 {
gap: 20px;
}
.performance-awards-box-sub07__head {
font-size: 1.6rem;
}
}
/* .performance-about
================================================ */
.performance-about {
padding-bottom: 60px;
}
@media (min-width: 768px) {
.performance-about {
padding-bottom: 180px;
}
}
/* .c-set01 - custom layout */
@media (max-width: 767px) {
.performance-about-box.is-custom01 .performance-about-box__area-img img:nth-of-type(2) {
display: block;
width: 75%;
margin: -20px -40px 0 auto;
}
.performance-about-box.is-custom01 .performance-about-box__txt {
margin-right: var(--body_padding_side);
}
}
@media (min-width: 768px) {
.performance-about-box.is-custom01 {
padding-bottom: 270px;
position: relative;
}
.performance-about-box.is-custom01 .performance-about-box__area-img img:nth-of-type(1) {
position: relative;
z-index: 1;
}
.performance-about-box.is-custom01 .performance-about-box__area-img img:nth-of-type(2) {
position: absolute;
bottom: 0;
right: 190px;
}
}
@media (max-width: 767px) {
.performance-about-box.is-custom02 {
display: grid;
grid-template-columns: 60px 25% 1fr;
}
.performance-about-box.is-custom02 .performance-about-box__head {
grid-column: 1/4;
}
.performance-about-box.is-custom02 .performance-about-box__area-img {
display: contents;
}
.performance-about-box.is-custom02 .performance-about-box__area-img img:nth-of-type(1) {
grid-area: 2/2/3/4;
}
.performance-about-box.is-custom02 .performance-about-box__area-img img:nth-of-type(2) {
grid-area: 3/1/4/3;
margin-top: -15%;
}
.performance-about-box.is-custom02 .performance-about-box__txt {
width: calc(100% - 30px);
margin: 15px auto 0;
grid-area: 3/3/4/4;
}
}
@media (min-width: 768px) {
.performance-about-box.is-custom02 {
position: relative;
padding-bottom: 150px;
}
.performance-about-box.is-custom02 .performance-about-box__area-img img:nth-of-type(2) {
position: absolute;
bottom: 0;
left: calc(50% - 385px);
}
}
/* .performance-trust
================================================ */
.performance-trust {
padding-bottom: 60px;
}
@media (min-width: 768px) {
.performance-trust {
padding-bottom: 300px;
}
}
/* .visit-form
================================================ */
.visit-form__inner {
padding-top: 50px;
padding-bottom: 50px;
}
.visit-form__img {
max-width: 500px;
margin: 0 auto;
text-align: center;
}
.visit-form__box {
padding: 20px;
background: #f8f8f8;
box-sizing: border-box;
margin: 15px auto 0;
font-size: 13px;
}
.visit-form__txtArea {
padding-left: 1em;
}
.visit-form__list {
margin-top: 5px;
}
.visit-form__set + .visit-form__set {
margin-top: 20px;
}
@media (min-width: 768px) {
.visit-form__inner {
padding-top: 100px;
padding-bottom: 100px;
}
.visit-form__img {
max-width: 900px;
margin: 0 auto;
}
.visit-form__box {
margin-top: 20px;
max-width: 902px;
padding: 30px;
}
.visit-form__box.is-starter {
margin: 10px 20px;
}
}