@charset "UTF-8";
/* リキッドレイアウト対応 */
body {
font-family: "Noto Sans JP", sans-serif;
color: #333;
animation: fadein 3s forwards;
}
@keyframes fadein {
0% {opacity: 0}
100% {opacity: 1}
}
.u-desktop {
display: none;
}
@media screen and (min-width: 768px) {
.u-desktop {
display: block;
}
}
@media screen and (min-width: 768px) {
.u-mobile {
display: none;
}
}
html {
font-size: 16px;
}
@media (max-width: 375px) {
html {
font-size: 4.2666666667vw;
}
}
@media screen and (min-width: 768px) {
html {
font-size: 1.3050570962vw;
}
}
@media (min-width: 1226px) {
html {
font-size: 16px;
}
}
/* pcの電話番号発信対応 */
@media screen and (min-width: 768px) {
a[href^="tel:"] {
pointer-events: none;
}
}
/* ホバー */
a {
text-decoration: none;
color: inherit;
-webkit-transition: opacity 0.3s;
transition: opacity 0.3s;
}
@media screen and (min-width: 768px) {
a:hover {
opacity: 0.8;
}
}
*,
*::before,
*::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* Remove default padding */
ul,
ol {
padding: 0;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote,
dl,
dd {
margin: 0;
}
/* Set core root defaults */
html {
scroll-behavior: smooth;
}
/* Set core body defaults */
body {
min-height: 100vh;
text-rendering: optimizeSpeed;
line-height: 1.5;
}
/* Remove list styles on ul, ol elements with a class attribute */
ul,
ol {
list-style: none;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
img {
image-rendering: -webkit-optimize-contrast;
}
}
img {
max-width: 100%;
display: block;
width: 100%;
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: brightness(1.05);
filter: brightness(1.05);
}
/* Natural flow and rhythm in articles by default */
article > * + * {
margin-top: 1em;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
font: inherit;
}
/* Blur images when they have no alt attribute */
img:not([alt]) {
filter: url('data:image/svg+xml;charset=utf-8,#filter');
-webkit-filter: blur(10px);
filter: blur(10px);
}
/* フォームリセット */
input,
button,
select,
textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: transparent;
border: none;
border-radius: 0;
font: inherit;
outline: none;
}
textarea {
resize: vertical;
}
input[type=checkbox],
input[type=radio] {
display: none;
}
input[type=submit],
input[type=button],
label,
button,
select {
cursor: pointer;
}
select::-ms-expand {
display: none;
}
.button {
display: inline-block;
padding: 24px;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #fff;
font-weight: 400;
background-color: #1C2C43;
text-align: center;
text-decoration: none;
border-radius: 0;
-webkit-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
width: 100%;
max-width: 400px;
border: 1px solid #1C2C43;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media screen and (min-width: 768px) {
.button {
font-size: 16px;
padding: 16px 24px;
}
}
.button:hover {
background-color: #fff;
color: #1C2C43;
}
body.active {
height: 100%;
overflow: hidden;
}
.footer {
background-color: #ffffff;
border-top: 1px solid #e6e6e6;
}
.footer__inner {
padding-top: 60px;
padding-bottom: 24px;
}
@media screen and (min-width: 768px) {
.footer__inner {
padding-block: 62px 40px;
}
}
.footer__top {
display: grid;
gap: 28px;
padding-bottom: 35px;
border-bottom: 1px solid #e6e6e6;
}
@media screen and (min-width: 1025px) {
.footer__top {
grid-template-columns: 360px 1fr;
gap: 80px;
}
}
@media screen and (min-width: 1440px) {
.footer__top {
gap: 140px;
}
}
.footer__logo {
display: block;
height: auto;
}
.footer__brand {
text-align: center;
}
@media screen and (min-width: 1025px) {
.footer__brand {
text-align: left;
}
}
.footer__company {
margin-top: 12px;
font-size: 14px;
/* letter-spacing: 0.04em; */
line-height: 1.5;
}
.footer-navigation {
display: flex;
align-items: center;
display: none;
}
@media screen and (min-width: 1025px) {
.footer-navigation {
display: flex;
align-items: center;
}
}
.footer-navigation__list {
/* display: -webkit-box; */
display: -ms-flexbox;
display: flex;
/* -webkit-box-orient: vertical; */
/* -webkit-box-direction: normal; */
-ms-flex-direction: column;
/* flex-direction: column; */
/* row-gap: 3px; */
/* row-gap: 3px; */
/* font-size: 13px; */
font-size: 13px;
justify-content: space-between;
width: 100%;
}
.footer-navigation__link {
text-decoration: none;
font-size: 14px;
}
@media screen and (min-width: 768px) {
.footer-navigation__link {
font-size: 16px;
}
}
.footer-navigation__link:hover {
text-decoration: underline;
}
.footer__bottom {
padding-top: 30px;
text-align: center;
}
.footer__policy {
display: inline-block;
margin-bottom: 8px;
font-size: 14px;
text-decoration: none;
}
@media screen and (min-width: 768px) {
.footer__policy {
font-size: 16px;
margin-bottom: 0;
}
}
.footer__copyright {
display: block;
font-weight: 300;
font-size: 12px;
font-family: "Oswald", sans-serif;
letter-spacing: 0.06em;
}
.header {
height: 56px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.header {
height: 100px;
}
}
@media screen and (min-width: 768px) {
.header.is-change {
background-color: rgba(255, 255, 255, .8);
height: 100px;
}
}
.header__inner {
padding-left: 15px;
height: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
@media screen and (min-width: 768px) {
.header__inner {
padding-inline: 25px 0;
}
}
.header__logo {
max-width: 175px;
width: 100%;
height: inherit;
}
@media screen and (min-width: 768px) {
.header__logo {
max-width: 258px;
}
}
.header__logo a {
height: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__logo svg {
display: block;
width: 100%;
height: auto;
}
.header__logo img {
width: 100%;
height: 100%;
-o-object-fit: contain;
object-fit: contain;
}
.header__nav {
display: none;
height: inherit;
}
@media screen and (min-width: 1025px) {
.header__nav {
display: block;
}
}
.header__nav-list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: inherit;
}
.header__nav-item {
height: inherit;
position: relative;
}
.header__nav-item--has-sub:hover .header__sub-list {
opacity: 1;
visibility: visible;
}
.header__sub-list {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
background-color: #fff;
-webkit-box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 0.2s ease, visibility 0.2s ease;
transition: opacity 0.2s ease, visibility 0.2s ease;
z-index: 100;
}
.header__sub-list .header__sub-item a {
display: block;
padding: 7px 19px;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
color: #333000;
text-transform: none;
-webkit-transition: background-color 0.2s ease, color 0.2s ease;
transition: background-color 0.2s ease, color 0.2s ease;
}
.header__sub-item a:hover {
background-color: rgba(45, 187, 178, .08);
color: #2DBBB2;
}
.header__nav-item.header__nav-item--contact {
margin-left: 32px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.header__nav-item a {
padding: 0 19px;
height: inherit;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: 13px;
font-weight: 500;
line-height: 1;
/*color: #333000;*/
text-transform: uppercase;
font-weight: 600;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media screen and (min-width: 768px) {
.header__nav-item a {
font-size: 16px;
}
}
.header__nav-item a:hover {
color: #2DBBB2;
}
.header__nav-item.header__nav-item--contact a {
padding: 10px 30px;
position: relative;
height: inherit;
color: #fff;
background-color: #2DBBB2;
font-size: 19px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.header__nav-item.header__nav-item--contact a:hover {
background-color: #fff;
color: #2DBBB2;
}
.header__hamburger {
margin: 0;
padding: 0;
outline: none;
border: none;
position: relative;
z-index: 999;
width: 56px;
height: inherit;
background-color: #2DBBB2;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
@media screen and (min-width: 1025px) {
.header__hamburger {
display: none;
}
}
@media screen and (min-width: 767px) {
.header__hamburger {
margin: 0;
padding: 0;
outline: none;
border: none;
position: relative;
z-index: 999;
width: 100px;
height: inherit;
background-color: #2DBBB2;
cursor: pointer;
-webkit-transition: 0.3s;
transition: 0.3s;
}
}
.header__hamburger.is-open {
background-color: #fff;
}
.header__hamburger span {
position: relative;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
display: block;
width: 15px;
height: 1px;
background-color: #fff;
-webkit-transition: 0.5s;
transition: 0.5s;
}
.header__hamburger span:nth-of-type(1) {
top: -4px;
}
.header__hamburger span:nth-of-type(2) {
top: 0;
}
.header__hamburger span:nth-of-type(3) {
top: 4px;
}
.header__hamburger.is-open span:nth-of-type(1) {
top: 0;
-webkit-transform: translateX(-50%) rotate(45deg);
transform: translateX(-50%) rotate(45deg);
background-color: #2DBBB2;
}
.header__hamburger.is-open span:nth-of-type(2) {
opacity: 0;
}
.header__hamburger.is-open span:nth-of-type(3) {
top: -2px;
-webkit-transform: translateX(-50%) rotate(-45deg);
transform: translateX(-50%) rotate(-45deg);
background-color: #2DBBB2;
}
.header__drawer {
padding: 52px 0 80px;
margin-top: 56px;
display: none;
position: absolute;
z-index: 900;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(45, 187, 178, .95);
overflow-y: scroll;
scrollbar-width: none;
}
@media screen and (min-width: 767px) {
.header__drawer {
padding: 52px 0 80px;
margin-top: 100px;
display: none;
position: absolute;
z-index: 900;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(45, 187, 178, .95);
overflow-y: scroll;
scrollbar-width: none;
}
}
.header__drawer::-webkit-scrollbar {
display: none;
}
.header__drawer-item a {
padding-block: 15px 3px;
display: block;
font-size: 16px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.05em;
color: #fff;
text-align: center;
text-transform: uppercase;
width: -webkit-max-content;
width: -moz-max-content;
width: max-content;
margin-inline: auto;
border-bottom: 1px solid;
margin-bottom: 16px;
}
.header__drawer-item.header__drawer-item--contact {
margin-top: 32px;
}
.header__drawer-item.header__drawer-item--contact a {
border-bottom: none;
background-color: #fff;
color: #2DBBB2;
width: 300px;
padding-block: 15px;
margin-inline: auto;
}
.header__drawer-sub {
margin-top: 6px;
width: 150px;
margin-inline: auto;
-webkit-transform: translateX(38px);
transform: translateX(38px);
}
.header__drawer-item .header__drawer-sub a {
border: none;
font-weight: 400;
width: 100%;
text-align: left;
}
.header__drawer-subItem a {
font-size: 12px;
padding-block: 5px;
}
.inner {
width: 100%;
padding-right: 20px;
padding-left: 20px;
margin-right: auto;
margin-left: auto;
}
@media screen and (min-width: 768px) {
.inner {
max-width: 1276px;
padding-right: 25px;
padding-left: 25px;
}
}
.layout-header {
position: fixed;
z-index: 900;
top: 0;
right: 0;
left: 0;
}
main {
padding-top: 54px;
}
@media screen and (min-width: 768px) {
main {
padding-top: 100px;
}
}
.scroll {
position: absolute;
left: 9px;
bottom: 267px;
-webkit-writing-mode: vertical-rl;
-ms-writing-mode: tb-rl;
writing-mode: vertical-rl;
text-transform: uppercase;
font-size: 10px;
font-family: "Oswald", sans-serif;
letter-spacing: 0.06em;
}
@media screen and (min-width: 768px) {
.scroll {
left: 28px;
bottom: 303px;
font-size: 16px;
}
}
/* 線のアニメーション部分 */
.scroll::before {
-webkit-animation: scroll 2s infinite;
animation: scroll 2s infinite;
background-color: #333000;
bottom: -64px;
content: "";
height: 54px;
left: 0;
margin: auto;
position: absolute;
right: 0;
width: 1px;
font-size: 10px;
}
@media screen and (min-width: 768px) {
.scroll::before {
height: 95px;
bottom: -103px;
}
}
/* 線のアニメーション */
@-webkit-keyframes scroll {
0% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
51% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
100% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
}
@keyframes scroll {
0% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
50% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
51% {
-webkit-transform: scale(1, 1);
transform: scale(1, 1);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
100% {
-webkit-transform: scale(1, 0);
transform: scale(1, 0);
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
}
.section-title {
margin-bottom: 20px;
color: #2dbbb2;
}
@media screen and (min-width: 768px) {
.section-title {
margin-bottom: 24px;
}
}
.section-title__en {
display: block;
font-size: 12px;
font-weight: 500;
font-family: "Oswald", sans-serif;
}
@media screen and (min-width: 768px) {
.section-title__en {
font-size: 16px;
}
}
.section-title__jp {
display: block;
font-size: 24px;
line-height: 1.5;
}
@media screen and (min-width: 768px) {
.section-title__jp {
font-size: 40px;
letter-spacing: 0.05em;
}
}
.section-title--accent .section-title__en,
.section-title--accent .section-title__jp {
color: #2DBBB2;
}
.section-title--white .section-title__en,
.section-title--white .section-title__jp {
color: #fff;
}
.fv {
position: relative;
}
.fv:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
background-color: #2DBBB2;
height: 200px;
width: 100%;
z-index: -1;
}
.fv,
.fv__inner,
.fv__img,
.fv__img img {
height: 100vh;
}
@media screen and (min-width: 768px) {
.fv,
.fv__inner,
.fv__img,
.fv__img img {
height: 100vh;
max-height: 897px;
}
}
.fv__inner {
margin-left: 40px;
position: relative;
}
@media screen and (min-width: 768px) {
.fv__inner {
height: 100vh;
max-height: 897px;
margin-left: 80px;
}
}
.fv__title {
width: 224px;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.fv__title {
width: 62%;
margin-inline: 0;
}
}
.fv__img img {
-o-object-fit: cover;
object-fit: cover;
}
.fv__content {
position: absolute;
top: 37%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 100%;
}
@media screen and (min-width: 768px) {
.fv__content {
/* width: 67%; */
/* top: 43%; */
/* left: 55%; */
width: 67%;
top: 64%;
left: 34%;
}
}
.fv__catch {
font-size: 28px;
font-weight: 700;
line-height: 1.75;
letter-spacing: 0.06em;
color: #2DBBB2;
text-align: center;
}
@media screen and (min-width: 768px) {
.fv__catch {
font-size: 110px;
line-height: 1.75;
text-align: left;
}
}
.fv__lead {
font-size: 16px;
font-weight: 700;
line-height: 2.15;
letter-spacing: 0.06em;
color: #2DBBB2;
text-align: center;
overflow: hidden;
margin-top: 30px;
max-width: 500px;
margin-inline: auto;
}
@media screen and (min-width: 768px) {
.fv__lead {
/* font-size: 44px; */
font-size: clamp(16px, 3vw, 44px);
text-align: left;
margin-top: 11px;
max-width: none;
margin-left: 16px;
}
}
.fv__lead span {
display: inline-block;
background-color: #fff;
padding-inline: 16px;
line-height: 1.8;
}
@media screen and (min-width: 768px) {
.fv__lead span {
padding-inline: 20px 8px;
}
}
.fv__en {
font-family: "Oswald", sans-serif;
font-style: italic;
font-size: 36px;
font-weight: 300;
line-height: 1.5;
letter-spacing: 0.06em;
color: #fff;
first-letter: uppercase;
position: absolute;
bottom: 40px;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
text-align: center;
width: 100%;
}
@media screen and (min-width: 768px) {
.fv__en {
top: 74%;
font-size: clamp(3.75rem, -0.3333333333rem + 8.5069444444vw, 9.875rem);
bottom: auto;
}
}
.fv__bg {
position: absolute;
inset: 0;
z-index: 0;
}
.fv__bg img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.services {
padding-block: 60px;
background-color: #2DBBB2;
}
.services_lower {
background-color: #fff;
}
@media screen and (min-width: 768px) {
.services {
padding-block: 80px;
}
}
.services .section-title__en,
.services .section-title__jp {
color: #fff;
}
.services .lower,
.services .lower{
color: #2DBBB2;
}
.services__lead {
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #fff;
margin-bottom: 40px;
}
.services__lead_lower {
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #000;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.services__lead {
margin-bottom: 24px;
font-size: 16px;
}
.services__lead_lower {
margin-bottom: 24px;
font-size: 16px;
}
}
.services__list {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
gap: 20px;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
@media screen and (min-width: 768px) {
.services__list {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
gap: 2%;
}
}
.services__item {
background-color: #fff;
padding: 20px;
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}
@media screen and (min-width: 768px) {
.services__item {
padding: 24px;
width: 32%;
}
}
.services__img {
overflow: hidden;
aspect-ratio: 323/179;
}
.services__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
}
.services__title {
font-size: 18px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.06em;
margin-top: 18px;
}
@media screen and (min-width: 768px) {
.services__title {
font-size: 20px;
margin-top: 24px;
}
}
.services__text {
font-size: 14px;
margin-top: 16px;
}
@media screen and (min-width: 768px) {
.services__text {
font-size: 16px;
margin-top: 16px;
letter-spacing: 0.06em;
}
}
.services__list-text {
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.06em;
margin-top: 16px;
}
@media screen and (min-width: 768px) {
.services__list-text {
font-size: 16px;
margin-top: 22px;
}
}
.cases {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.cases {
padding-block: 80px;
}
}
.cases__lead {
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #333000;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.cases__lead {
margin-bottom: 40px;
font-size: 16px;
}
}
.cases__list {
display: grid;
gap: 32px;
list-style: none;
margin-bottom: 32px;
padding: 0;
}
@media screen and (min-width: 768px) {
.cases__list {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
row-gap: 24px;
margin-bottom: 44px;
}
}
.cases__item {
border: 1px solid #CCCCCC;
background-color: #fff;
}
.cases__item:hover .cases__img img {
-webkit-transform: scale(1.05);
transform: scale(1.05);
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.cases__item-link {
display: block;
text-decoration: none;
color: inherit;
height: 100%;
}
.cases__item-link:hover {
opacity: 0.95;
}
.cases__img {
overflow: hidden;
aspect-ratio: 390/209;
border-bottom: 1px solid #CCCCCC;
}
.cases__img img {
width: 100%;
height: 100%;
-o-object-fit: cover;
object-fit: cover;
-webkit-transition: -webkit-transform 0.3s ease;
transition: -webkit-transform 0.3s ease;
transition: transform 0.3s ease;
transition: transform 0.3s ease, -webkit-transform 0.3s ease;
}
.cases__img .cases__img-noimg {
-o-object-fit: contain;
object-fit: contain;
padding: 16px;
}
.cases__content {
padding: 20px;
}
@media screen and (min-width: 768px) {
.cases__content {
padding: 24px;
}
}
.cases__label {
display: inline-block;
font-size: 13px;
line-height: 1.64;
letter-spacing: 0.06em;
color: #fff;
background-color: #2DBBB2;
padding: 2px 8px;
margin-right: 6px;
}
@media screen and (min-width: 768px) {
.cases__label {
font-size: 14px;
}
}
.cases__year {
font-size: 11px;
line-height: 1.64;
letter-spacing: 0.06em;
color: #666666;
}
@media screen and (min-width: 768px) {
.cases__year {
font-size: 13px;
}
}
.cases__title {
font-size: 16px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.12em;
margin-top: 16px;
}
@media screen and (min-width: 768px) {
.cases__title {
font-size: 19px;
margin-top: 22px;
line-height: 1.4;
}
}
.cases__text {
font-size: 13px;
margin-top: 15px;
line-height: 1.5;
letter-spacing: 0.06em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
@media screen and (min-width: 768px) {
.cases__text {
font-size: 16px;
margin-top: 18px;
}
}
.cases__btn-wrap {
text-align: center;
}
@media (any-hover: hover) {
.cases__btn:hover {
opacity: 0.85;
}
}
.company-cta {
padding: 60px 0;
background-image: url(../images/common/bg_company.jpg);
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 768px) {
.company-cta {
padding-block: 86px 100px;
}
}
.company-cta__lead {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #fff;
margin-bottom: 40px;
}
@media screen and (min-width: 768px) {
.company-cta__lead {
margin-bottom: 40px;
font-size: 16px;
}
}
.company-cta__btn {
display: inline-block;
min-width: 233px;
}
@media screen and (min-width: 768px) {
.company-cta__btn {
/* max-width: 233px; */
}
}
}
@media (any-hover: hover) {
.company-cta__btn:hover {
opacity: 0.85;
}
}
/*======================================
news
=======================================*/
.news {
background-color: #f5f7fa;
}
.news__inner {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.news__inner {
padding-block: 80px;
}
}
.news__header {
text-align: center;
margin-bottom: 40px;
}
.news__label {
display: inline-block;
font-size: 14px;
letter-spacing: 0.1em;
color: #00a99d;
margin-bottom: 8px;
}
.news__title {
font-size: 32px;
font-weight: 700;
}
.news-list {
list-style: none;
padding: 0;
margin: 0;
}
.news-list__item {
padding-top: 20px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.news-list__item a {
display: grid;
grid-template-columns: 88px 1fr;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 24px;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.news-list__item a:hover {
color: #2DBBB2;
}
.news-list__date {
color: #2DBBB2;
font-family: "Oswald", sans-serif;
letter-spacing: 0.07em;
font-weight: 500;
}
.news-list__title {
font-weight: 400;
font-size: 16px;
}
.news__button {
margin-top: 40px;
text-align: center;
}
/*======================================
contact
=======================================*/
.contact {
background-color: #2DBBB2;
background-image: url(../images/common/bg_contanct.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.contact__inner {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.contact__inner {
padding-block: 80px;
}
}
.contact__title {
text-align: center;
margin-bottom: 23px;
}
.contact__lead {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #fff;
margin-bottom: 40px;
text-align: center;
}
.contact__box {
background-color: #fff;
padding: 44px 20px;
text-align: center;
}
@media screen and (min-width: 768px) {
.contact__box {
max-width: 905px;
margin-inline: auto;
padding: 44px 48px;
}
}
.contact__form-block {
margin-bottom: 29px;
padding-bottom: 40px;
border-bottom: 1px solid #CCCCCC;
}
.contact__form-label {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.06em;
margin-bottom: 24px;
}
.contact__form-btn {
font-weight: 600;
}
@media screen and (min-width: 768px) {
.contact__form-btn {
min-width: 340px;
font-size: 20px;
}
}
@media (any-hover: hover) {
.contact__form-btn:hover {
opacity: 0.85;
}
}
.contact__tel-label {
font-size: 12px;
line-height: 1.5;
}
.contact__tel {
display: block;
font-family: "Oswald", sans-serif;
font-size: 28px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.06em;
color: #2DBBB2;
text-decoration: none;
letter-spacing: 0.09em;
}
@media screen and (min-width: 768px) {
.contact__tel {
font-size: 44px;
}
}
.contact__tel-time {
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.06em;
color: #333000;
}
/*# sourceMappingURL=styles.css.map */
/*========================================================================================================================================================
Company Page
=========================================================================================================================================================*/
/*--------------------------------------
Page Hero
--------------------------------------*/
.p-page-hero {
padding-block: 40px 60px;
background-color: #a1cdca;
}
.p-page-hero__title .section-title__jp {
font-size: 13px;
}
.p-page-hero__title .section-title__en {
display: block;
font-size: clamp(3.75rem, -0.3333333333rem + 8.5069444444vw, 5.875rem);
letter-spacing: 0;
/* letter-spacing: 0.06em;*/
/* font-style: italic; */
font-weight: 300;
}
h1.p-page-hero__title {
font-family: "Oswald", sans-serif;
line-height: 1.5;
color: #fff;
text-align: left;
}
@media screen and (min-width: 768px) {
.p-page-hero {
padding-block: 40px 80px;
}
.p-page-hero__title .section-title__jp {
font-size: 19.6px;
}
}
.p-page-hero__title .section-title__en,
.p-page-hero__title .section-title__jp {
display: block;
}
/*======================================
Company Page — Overview Table
お問い合わせフォームの table と同仕様
=======================================*/
section.p-company-overview {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
section.p-company-overview {
padding-block: 80px;
}
}
/*--------------------------------------
Table
--------------------------------------*/
.p-company-overview__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin-bottom: 48px;
}
/* th: 35% / td: 65% */
.p-company-overview__col-th {
width: 35%;
}
.p-company-overview__col-td {
width: 65%;
}
/*--------------------------------------
Row
--------------------------------------*/
.p-company-overview__tr {
border: 1px solid #e6e6e6;
border-top: none;
}
.p-company-overview__tr:first-child {
border-top: 1px solid #e6e6e6;
}
/*--------------------------------------
th
--------------------------------------*/
.p-company-overview__th {
width: 35%;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
background-color: #f5f7fa;
padding: 16px;
vertical-align: middle;
text-align: left;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.p-company-overview__th {
font-size: 16px;
padding: 24px;
}
}
/*--------------------------------------
td
--------------------------------------*/
.p-company-overview__td {
width: 65%;
padding: 16px;
vertical-align: middle;
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
color: #333;
}
@media screen and (min-width: 768px) {
.p-company-overview__td {
padding: 24px;
font-size: 16px;
}
}
/* モバイルでは th を上段・td を下段に積む */
@media screen and (max-width: 767px) {
.p-company-overview__table,
.p-company-overview__table tbody,
.p-company-overview__tr,
.p-company-overview__th,
.p-company-overview__td {
display: block;
width: 100%;
}
.p-company-overview__th {
/* border: 1px solid #e6e6e6; */
padding: 16px;
}
.p-company-overview__td {
padding: 16px;
}
}
/*--------------------------------------
Services List（事業内容）
--------------------------------------*/
.p-company-overview__services {
margin: 0;
padding: 0;
list-style: none;
}
.p-company-overview__services li {
position: relative;
padding-left: 1em;
font-size: 14px;
line-height: 1.8;
}
@media screen and (min-width: 768px) {
.p-company-overview__services li {
font-size: 16px;
}
}
.p-company-overview__services li::before {
content: "・";
position: absolute;
left: 0;
color: #2DBBB2;
}
/*======================================
Company Page — History Table
会社概要テーブルと同仕様
=======================================*/
/*--------------------------------------
Table
--------------------------------------*/
.p-company-history__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin-bottom: 48px;
}
/* th: 35% / td: 65% */
.p-company-history__col-th {
width: 35%;
}
.p-company-history__col-td {
width: 65%;
}
/*--------------------------------------
Row
--------------------------------------*/
.p-company-history__tr {
border: 1px solid #e6e6e6;
border-top: none;
}
.p-company-history__tr:first-child {
border-top: 1px solid #e6e6e6;
}
/*--------------------------------------
th
--------------------------------------*/
.p-company-history__th {
width: 35%;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
background-color: #f5f7fa;
padding: 16px;
vertical-align: middle;
text-align: left;
line-height: 1.6;
white-space: nowrap;
}
@media screen and (min-width: 768px) {
.p-company-history__th {
font-size: 16px;
padding: 24px;
}
}
/*--------------------------------------
td
--------------------------------------*/
.p-company-history__td {
width: 65%;
padding: 16px;
vertical-align: middle;
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
color: #333;
}
@media screen and (min-width: 768px) {
.p-company-history__td {
padding: 24px;
font-size: 16px;
}
}
/* モバイルでは th を上段・td を下段に積む */
@media screen and (max-width: 767px) {
.p-company-history__table,
.p-company-history__table tbody,
.p-company-history__tr,
.p-company-history__th,
.p-company-history__td {
display: block;
width: 100%;
}
}
.p-company-overview__figure {
margin: 0;
}
.p-company-overview__images .p-company-overview__figure img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
@media screen and (min-width: 768px) {
.p-company-overview__images .p-company-overview__figure {
width: 310px;
}
}
.p-company-overview__images {
display: flex;
justify-content: center;
gap: 24px;
flex-direction: column;
}
.p-company-overview__figure {
flex: 50%;
max-width: 100%;
}
@media screen and (min-width: 768px) {
.p-company-overview__images {
flex-direction: unset;
}
.p-company-overview__figure {
margin: 0;
flex: 20%;
max-width: 100%;
}
}
/*--------------------------------------
Access
--------------------------------------*/
.p-company-access {
padding-block: 60px;
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-company-access {
padding-block: 80px;
}
}
.p-company-access__guide {
list-style: none;
padding: 0;
margin: 0 0 24px;
line-height: 1.8;
}
.p-company-access__map {
position: relative;
width: 100%;
padding-top: 56.25%; /* 16:9 Aspect Ratio */
margin-bottom: 8px;
}
.p-company-access__map iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.p-company-access__map-link {
text-align: right;
font-size: 14px;
}
@media screen and (min-width: 768px) {
.p-company-access__map-link {
font-size: 16px;
}
}
.p-company-access__map-link a {
text-decoration: underline;
color: #2DBBB2;
}
.p-company-access__map-link a:hover {
text-decoration: none;
}
/*--------------------------------------
History
--------------------------------------*/
.p-company-history {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-company-history {
padding-block: 80px;
}
}
.p-company-history__list {
border-top: 1px solid #e6e6e6;
margin-bottom: 40px;
}
.p-company-history__row {
display: flex;
flex-direction: column;
padding-block: 20px;
border: 1px solid #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-company-history__row {
flex-direction: row;
padding-block: 24px;
}
}
.p-company-history__term {
font-weight: 700;
margin-bottom: 8px;
}
@media screen and (min-width: 768px) {
.p-company-history__term {
width: 200px;
flex-shrink: 0;
margin-bottom: 0;
}
}
.p-company-history__desc {
flex-grow: 1;
line-height: 1.6;
}
.p-company-history__diplomas {
display: flex;
flex-wrap: wrap;
gap: 16px;
list-style: none;
padding: 0;
margin: 0;
justify-content: center;
}
@media screen and (min-width: 768px) {
.p-company-history__diplomas {
gap: 24px;
justify-content: center;
}
}
.p-company-history__diploma-item {
width: calc(100% - 0px);
/* max-width: 180px; */
}
@media screen and (min-width: 768px) {
.p-company-history__diploma-item {
width: 22%;
}
}
.p-company-history__diploma-item img {
border: 1px solid #e6e6e6;
height: auto;
}
/* ============================================================
会社情報ページ 追加セクション用CSS (page-company.php)
styles.css の設計ルール・カラー・命名規則に準拠
ブランドカラー : #2DBBB2
テキスト濃色 : #1C2C43
テキスト中色 : #666
ボーダー : #e6e6e6
背景グレー : #f5f7fa
ブレイクポイント: 768px
============================================================ */
/* ============================================================
セクション 1 : 社長挨拶 (.p-company-greeting)
============================================================ */
.p-company-greeting {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-company-greeting {
padding-block: 80px;
}
}
.p-company-greeting__body {
display: flex;
flex-direction: column;
gap: 32px;
}
@media screen and (min-width: 768px) {
.p-company-greeting__body {
flex-direction: row;
align-items: flex-start;
gap: 48px;
}
}
/* 写真エリア */
.p-company-greeting__photo {
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-company-greeting__photo {
width: 30%;
height: 100%;
}
}
.p-company-greeting__figure {
margin: 0;
text-align: center;
width: 100%;
height: 100%;
}
.p-company-greeting__figure img {
width: 100%;
height: 100%;
max-width: 100%;
/* height: auto; */
display: block;
margin: 0 auto;
object-fit: cover;
}
.p-company-greeting__caption {
margin-top: 12px;
font-size: 14px;
color: #666;
text-align: center;
line-height: 1.6;
}
/* テキストエリア */
.p-company-greeting__text {
flex: 1;
font-size: 16px;
line-height: 2;
color: #333;
}
.p-company-greeting__text p {
margin: 0 0 20px;
}
.p-company-greeting__text p:last-child {
margin-bottom: 0;
}
.ceo_name_area {
overflow: hidden;
}
span.ceo_com_name {
font-size: 24px;
}
.ceo_name_area p.float_r {
float: right;
}
span.ceo_img {
display: flex;
align-items: center;
}
span.ceo_title {
flex: none;
margin-right: 10px;
}
span.ceo_img img {
flex: 225px;
max-width: 225px;
}
/* ============================================================
セクション 2 : 経営理念／ビジョン／方針 (.p-company-philosophy)
============================================================ */
.p-company-philosophy {
padding-block: 60px;
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-company-philosophy {
padding-block: 80px;
}
}
.p-company-philosophy__list {
display: flex;
flex-direction: column;
gap: 0;
}
@media screen and (min-width: 768px) {
.p-company-philosophy__list {
flex-direction: row;
gap: 24px;
}
}
.p-company-philosophy__item {
flex: 1;
padding: 20px;
background-color: #fff;
border-top: 4px solid #2DBBB2;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.p-company-philosophy__item {
margin-bottom: 0;
padding: 24px;
}
}
.p-company-philosophy__heading {
display: flex;
flex-direction: column;
gap: 4px;
margin: 0 0 20px;
}
.p-company-philosophy__heading-en {
display: block;
font-size: 13px;
font-family: "Oswald", sans-serif;
font-weight: 500;
letter-spacing: 0.1em;
color: #2DBBB2;
line-height: 1;
}
.p-company-philosophy__heading-jp {
display: block;
font-size: 20px;
font-weight: 700;
color: #1C2C43;
line-height: 1.3;
}
.p-company-philosophy__text {
margin: 0;
font-size: 16px;
line-height: 2;
color: #333;
}
.p-company-philosophy__policy-list {
list-style: none;
padding: 0;
margin: 0;
}
.p-company-philosophy__policy-list li {
position: relative;
padding-left: 1.2em;
font-size: 16px;
line-height: 1.85;
color: #333;
margin-bottom: 10px;
}
.p-company-philosophy__policy-list li::before {
content: "―";
position: absolute;
left: 0;
top: 0;
color: #2DBBB2;
font-size: 0.8em;
line-height: 1.85;
}
.p-company-philosophy__figure {
margin-bottom: 20px;
}
.p-company-philosophy__figure img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
/* ============================================================
セクション 3 : 品質について（仮文） (.p-company-quality)
============================================================ */
.p-company-quality {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-company-quality {
padding-block: 80px;
}
}
.p-company-quality__lead {
font-size: 16px;
line-height: 1.9;
color: #333;
margin: 0;
}
/* ============================================================
セクション 7 : ISO9001 (.p-company-iso)
============================================================ */
.p-company-iso {
padding-block: 60px;
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-company-iso {
padding-block: 80px;
}
}
.p-company-iso__lead {
font-size: 16px;
line-height: 2;
color: #333;
margin: 0 0 36px;
}
@media screen and (min-width: 768px) {
.p-company-iso__lead {
margin-bottom: 40px;
}
}
.p-company-iso__btn-wrap {
display: flex;
justify-content: flex-start;
}
/* ============================================================
セクション 8 : プライバシーポリシー (.p-company-privacy)
============================================================ */
.p-company-privacy {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-company-privacy {
padding-block: 80px;
}
}
.p-company-privacy__lead {
font-size: 16px;
line-height: 1.9;
color: #333;
margin: 0 0 36px;
}
@media screen and (min-width: 768px) {
.p-company-privacy__lead {
margin-bottom: 40px;
}
}
.p-company-privacy__btn-wrap {
display: flex;
justify-content: flex-start;
}
/*======================================
Mechanism Page
=======================================*/
/*--------------------------------------
Section Base
--------------------------------------*/
.p-mechanism-section {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-mechanism-section {
padding-block: 80px;
}
}
.p-mechanism-section--alt {
background-color: #f5f7fa;
}
.p-mechanism-section__figure {
margin: 0 0 40px;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-mechanism-section__figure {
margin-bottom: 48px;
}
}
.p-mechanism-section__figure img {
max-width: 100%;
height: auto;
margin-inline: auto;
}
.p-mechanism-section__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}
.p-mechanism-method__content .p-mechanism-section__list:first-of-type {
margin-bottom: 10px;
}
@media screen and (min-width: 768px) {
.p-mechanism-section__list {
gap: 8px;
}
.p-mechanism-method__content .p-mechanism-section__list:first-of-type {
margin-bottom: 40px;
}
}
.p-mechanism-section__list li {
padding-left: 1.25em;
position: relative;
line-height: 1.8;
font-size: 16px;
margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
.p-mechanism-section__list li {
/* font-size: 16px; */
/* margin-bottom: 0; */
}
}
.p-mechanism-section__list li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
color: #000;
}
/*--------------------------------------
Method Block
--------------------------------------*/
.p-mechanism-method {
/*border: 1px solid #e6e6e6;*/
padding: 24px 20px;
margin-bottom: 40px;
background-color: #fff;
border-top: 4px solid #2DBBB2;
}
@media screen and (min-width: 768px) {
.p-mechanism-method {
padding: 40px;
margin-bottom: 48px;
background-color: #fff;
border-top: 4px solid #2DBBB2;
}
}
.p-mechanism-method:last-child {
margin-bottom: 0;
}
.p-mechanism-method__heading {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
padding-bottom: 12px;
border-bottom: 2px solid #2DBBB2;
margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
.p-mechanism-method__heading {
font-size: 20px;
margin-bottom: 40px;
}
.p-mechanism-method .p-mechanism-section__list li {
font-size: 16px;
margin-bottom: 0;
}
}
.p-mechanism-method__body {
display: flex;
flex-direction: column;
gap: 20px;
}
@media screen and (min-width: 768px) {
.p-mechanism-method__body {
flex-direction: row;
align-items: flex-start;
gap: 50px;
}
}
.p-mechanism-method__content {
flex: 1;
}
.p-mechanism-method__figure {
margin: 0;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-mechanism-method__figure {
width: 35%;
}
}
@media screen and (min-width: 1024px) {
.p-mechanism-method__figure {
width: 25%;
}
}
.p-mechanism-method__figure img {
width: 100%;
height: auto;
}
.p-mechanism-method__subheading {
font-size: 18px;
font-weight: 700;
margin-bottom: 12px;
color: #1C2C43;
}
@media screen and (min-width: 768px) {
.p-mechanism-method__subheading {
font-size: 18px;
margin-bottom: 16px;
}
}
section#mechanism-03 h4.p-mechanism-fund__label {
color: #2dbbb2;
padding: 8px;
text-align: center;
background-color: #fff;
}
/*--------------------------------------
Fund Block
--------------------------------------*/
.p-mechanism-fund {
/*border: 1px solid #e6e6e6;*/
padding: 24px 20px;
margin-top: 40px;
background-color: #fff;
border-top: 4px solid #2DBBB2;
}
@media screen and (min-width: 768px) {
.p-mechanism-fund {
padding: 40px;
margin-top: 0;
background-color: #fff;
border-top: 4px solid #2DBBB2;
}
}
.p-mechanism-fund__heading {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
padding-bottom: 12px;
border-bottom: 2px solid #2DBBB2;
margin-bottom: 24px;
}
@media screen and (min-width: 768px) {
.p-mechanism-fund__heading {
font-size: 20px;
margin-bottom: 32px;
}
}
.p-mechanism-fund__body {
display: flex;
flex-direction: column;
gap: 15px;
}
@media screen and (min-width: 768px) {
.p-mechanism-fund__body {
flex-direction: row;
gap: 20px;
}
}
.p-mechanism-fund__col {
flex: 1;
background-color: #f3f3f3;
padding: 24px;
}
.p-mechanism-fund__label {
font-size: 16px;
font-weight: 700;
margin-bottom: 12px;
color: #1C2C43;
}
@media screen and (min-width: 768px) {
.p-mechanism-fund__label {
font-size: 18px;
margin-bottom: 16px;
}
}
.p-mechanism-fund__arrow {
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
transform: rotate(-90deg);
}
.p-mechanism-fund__body .p-mechanism-section__list li {
margin-bottom: 0;
}
@media screen and (min-width: 768px) {
.p-mechanism-fund__arrow {
transform: rotate(0deg);
font-size: 25px;
}
.p-mechanism-fund__body .p-mechanism-section__list li {
/* font-size: 16px; */
margin-bottom: 0;
}
}
section#mechanism-03 .p-mechanism-section__list li {
color: #000;
font-weight: bold;
}
/*======================================
FAQ Page
=======================================*/
.p-faq {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-faq {
padding-block: 80px;
}
}
.p-faq__list {
list-style: none;
padding: 0;
margin: 0;
border-top: 1px solid #e6e6e6;
}
/*--------------------------------------
FAQ Item
--------------------------------------*/
.p-faq__item {
border-bottom: 1px solid #e6e6e6;
}
/*--------------------------------------
Question Button
--------------------------------------*/
.p-faq__question {
width: 100%;
text-align: left;
background: none;
border: none;
padding: 16px 48px 16px 0;
font-size: 16px;
font-weight: 700;
line-height: 1.6;
letter-spacing: 0.04em;
cursor: pointer;
position: relative;
transition: color 0.2s ease;
display: flex;
}
@media screen and (min-width: 768px) {
.p-faq__question {
padding: 24px 41px 24px 0;
font-size: 16px;
}
}
.p-faq__question:hover {
color: #2DBBB2;
}
/* Q ラベル */
.p-faq__question::before {
content: "Q";
display: inline-block;
font-family: "Oswald", sans-serif;
font-size: 18px;
font-weight: 700;
color: #2DBBB2;
margin-right: 12px;
flex-shrink: 0;
}
/* 開閉アイコン */
.p-faq__question::after {
content: "";
position: absolute;
right: 20px;
top: 50%;
width: 12px;
height: 12px;
border-right: 2px solid #2DBBB2;
border-bottom: 2px solid #2DBBB2;
transform: translateY(-70%) rotate(45deg);
transition: transform 0.3s ease;
}
@media screen and (min-width: 768px) {
.p-faq__question::after {
right: 24px;
}
}
.p-faq__question[aria-expanded="true"]::after {
transform: translateY(-30%) rotate(-135deg);
}
/*--------------------------------------
Answer Panel
--------------------------------------*/
.p-faq__answer {
overflow: hidden;
max-height: 0;
transition: max-height 0.4s ease;
}
/* hidden 属性が外れたとき（JS で制御） */
.p-faq__answer:not([hidden]) {
max-height: 2000px;
}
/* hidden のままでも display:none を上書きしないよう明示 */
.p-faq__answer[hidden] {
display: block;
max-height: 0;
}
.p-faq__answer-inner {
padding: 0 0 24px 0;
display: flex;
flex-direction: column;
gap: 12px;
}
@media screen and (min-width: 768px) {
.p-faq__answer-inner {
padding: 0 0 28px 0;
gap: 16px;
}
}
/* A ラベル */
.p-faq__answer-inner::before {
content: "A";
display: block;
font-family: "Oswald", sans-serif;
font-size: 18px;
font-weight: 700;
color: #1C2C43;
margin-bottom: -4px;
}
.p-faq__answer-inner p {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-faq__answer-inner p {
font-size: 16px;
}
}
/*--------------------------------------
FAQ Ordered List
--------------------------------------*/
.p-faq__ol {
padding-left: 1.5em;
margin: 8px 0 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.p-faq__ol li {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
list-style: disc;
}
@media screen and (min-width: 768px) {
.p-faq__ol li {
font-size: 16px;
}
}
/*======================================
ISO Page
=======================================*/
/*--------------------------------------
Section Base
--------------------------------------*/
.p-iso-section {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-iso-section {
padding-block: 80px;
}
}
.p-iso-section--alt {
background-color: #f5f7fa;
}
/*--------------------------------------
Intro Block
--------------------------------------*/
.p-iso-intro {
display: flex;
flex-direction: column;
gap: 32px;
}
@media screen and (min-width: 768px) {
.p-iso-intro {
flex-direction: row;
align-items: flex-start;
gap: 48px;
}
}
.p-iso-intro__figure {
margin: 0;
flex-shrink: 0;
border:1px solid #dddddd;
}
@media screen and (min-width: 768px) {
.p-iso-intro__figure {
width: 300px;
border:1px solid #dddddd;
}
}
.p-iso-intro__figure img {
width: 100%;
height: auto;
display: block;
}
.p-iso-intro__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.p-iso-intro__content p {
font-size: 16px;
line-height: 2;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-iso-intro__content p {
font-size: 16px;
}
}
/*--------------------------------------
Certification Table (dl)
--------------------------------------*/
.p-iso-table {
margin: 0 0 40px;
border: 1px solid #e6e6e6;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-iso-table {
margin-bottom: 48px;
}
}
.p-iso-table__row {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-iso-table__row {
flex-direction: row;
align-items: stretch;
}
}
.p-iso-table__row:last-child {
border-bottom: none;
}
.p-iso-table__term {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
padding: 16px;
background-color: #f5f7fa;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-iso-table__term {
width: 180px;
padding: 24px;
font-size: 16px;
border-right: 1px solid #e6e6e6;
display: flex;
align-items: center;
}
}
.p-iso-table__desc {
font-size: 14px;
line-height: 2;
letter-spacing: 0.04em;
padding: 16px;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-iso-table__desc {
padding: 24px;
font-size: 16px;
flex: 1;
}
}
/*--------------------------------------
Cert Images
--------------------------------------*/
.p-iso-cert-images {
display: flex;
flex-wrap: wrap;
gap: 24px;
justify-content: center;
}
@media screen and (min-width: 768px) {
.p-iso-cert-images {
gap: 32px;
}
}
.p-iso-cert-images__item {
margin: 0;
text-align: center;
width: calc(50% - 12px);
max-width: 240px;
}
@media screen and (min-width: 768px) {
.p-iso-cert-images__item {
width: 220px;
}
}
.p-iso-cert-images__item img {
width: 100%;
height: auto;
display: block;
border: 1px solid #e6e6e6;
}
.p-iso-cert-images__caption {
font-size: 13px;
color: #666;
margin-top: 8px;
letter-spacing: 0.04em;
}
/*--------------------------------------
Quality Policy
--------------------------------------*/
.p-iso-policy {
border: 1px solid #e6e6e6;
background-color: #fff;
padding: 24px 20px;
}
@media screen and (min-width: 768px) {
.p-iso-policy {
padding: 40px;
}
}
.p-iso-policy__lead {
font-size: 16px;
line-height: 1.8;
letter-spacing: 0.04em;
margin: 0 0 28px;
padding-bottom: 24px;
border-bottom: 1px solid #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-iso-policy__lead {
font-size: 16px;
margin-bottom: 32px;
padding-bottom: 32px;
}
}
.p-iso-policy__list {
list-style: none;
padding: 0;
margin: 0;
counter-reset: policy-counter;
display: flex;
flex-direction: column;
gap: 24px;
}
@media screen and (min-width: 768px) {
.p-iso-policy__list {
gap: 32px;
}
}
.p-iso-policy__item {
counter-increment: policy-counter;
padding-left: 48px;
position: relative;
}
@media screen and (min-width: 768px) {
.p-iso-policy__item {
padding-left: 56px;
}
}
.p-iso-policy__item::before {
content: counter(policy-counter, decimal-leading-zero);
position: absolute;
left: 0;
top: 0;
font-family: "Oswald", sans-serif;
font-size: 24px;
font-weight: 700;
color: #2DBBB2;
line-height: 1;
}
.p-iso-policy__item-title {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
margin: 0 0 8px;
color: #1C2C43;
}
@media screen and (min-width: 768px) {
.p-iso-policy__item-title {
font-size: 18px;
margin-bottom: 8px;
}
}
.p-iso-policy__item-text {
font-size: 14px;
line-height: 2;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-iso-policy__item-text {
font-size: 16px;
}
}
/*--------------------------------------
Activities List
--------------------------------------*/
.p-iso-activities {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 32px;
}
@media screen and (min-width: 768px) {
.p-iso-activities {
gap: 40px;
}
}
.p-iso-activities__item {
display: flex;
flex-direction: column;
gap: 20px;
border: 1px solid #e6e6e6;
background-color: #fff;
padding: 24px 20px;
}
@media screen and (min-width: 768px) {
.p-iso-activities__item {
flex-direction: row;
align-items: flex-start;
gap: 32px;
padding: 32px 40px;
}
}
.p-iso-activities__figure {
margin: 0;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-iso-activities__figure {
width: 200px;
}
}
.p-iso-activities__figure img {
width: 100%;
height: auto;
display: block;
}
.p-iso-activities__content {
flex: 1;
}
.p-iso-activities__title {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
padding-bottom: 10px;
border-bottom: 2px solid #2DBBB2;
margin: 0 0 16px;
}
@media screen and (min-width: 768px) {
.p-iso-activities__title {
font-size: 20px;
margin-bottom: 20px;
}
}
.p-iso-activities__text {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-iso-activities__text {
font-size: 16px;
}
}
/*======================================
Privacy Policy Page
=======================================*/
/*--------------------------------------
Section Base
--------------------------------------*/
.p-privacy {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-privacy {
padding-block: 80px;
}
}
/*--------------------------------------
Body Wrapper
--------------------------------------*/
.p-privacy__body {
/* max-width: 800px; */
margin-inline: auto;
}
/*--------------------------------------
Lead Text
--------------------------------------*/
.p-privacy__lead {
font-size: 16px;
line-height: 1.9;
letter-spacing: 0.04em;
margin: 0 0 48px;
padding: 16px;
background-color: #f5f7fa;
border-left: 4px solid #2DBBB2;
}
@media screen and (min-width: 768px) {
.p-privacy__lead {
font-size: 16px;
padding: 24px;
margin-bottom: 56px;
}
}
/*--------------------------------------
Section Article
--------------------------------------*/
.p-privacy__section {
margin-bottom: 40px;
padding-bottom: 40px;
border-bottom: 1px solid #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-privacy__section {
margin-bottom: 48px;
padding-bottom: 48px;
}
}
.p-privacy__section:last-of-type {
border-bottom: none;
}
/*--------------------------------------
Section Heading
--------------------------------------*/
.p-privacy__heading {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
color: #1C2C43;
margin: 0 0 20px;
display: flex;
align-items: center;
gap: 12px;
}
@media screen and (min-width: 768px) {
.p-privacy__heading {
font-size: 20px;
gap: 16px;
margin-bottom: 24px;
}
}
.p-privacy__heading-num {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background-color: #1C2C43;
color: #fff;
font-family: "Oswald", sans-serif;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
flex-shrink: 0;
border-radius: 2px;
}
@media screen and (min-width: 768px) {
.p-privacy__heading-num {
width: 40px;
height: 40px;
font-size: 16px;
}
}
/*--------------------------------------
Content Text
--------------------------------------*/
.p-privacy__content p {
font-size: 14px;
line-height: 2;
letter-spacing: 0.04em;
margin: 0 0 16px;
}
@media screen and (min-width: 768px) {
.p-privacy__content p {
font-size: 16px;
}
}
.p-privacy__content p:last-child {
margin-bottom: 0;
}
/*--------------------------------------
List
--------------------------------------*/
.p-privacy__list {
list-style: none;
padding: 0;
margin: 16px 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.p-privacy__list li {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
padding-left: 1.25em;
position: relative;
}
@media screen and (min-width: 768px) {
.p-privacy__list li {
font-size: 16px;
}
}
.p-privacy__list li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
color: #2DBBB2;
}
/*--------------------------------------
Address Block
--------------------------------------*/
.p-privacy__address {
font-style: normal;
margin-top: 20px;
}
.p-privacy__address-table {
margin: 0;
border: 1px solid #e6e6e6;
background-color: #fff;
}
.p-privacy__address-row {
display: flex;
flex-direction: column;
border-bottom: 1px solid #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-privacy__address-row {
flex-direction: row;
align-items: stretch;
}
}
.p-privacy__address-row:last-child {
border-bottom: none;
}
.p-privacy__address-term {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
padding: 12px 16px 4px;
background-color: #f5f7fa;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-privacy__address-term {
width: 200px;
padding: 16px;
font-size: 16px;
border-right: 1px solid #e6e6e6;
display: flex;
align-items: center;
}
}
.p-privacy__address-desc {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
padding: 4px 16px 12px;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-privacy__address-desc {
padding: 16px;
font-size: 16px;
flex: 1;
display: flex;
align-items: center;
}
}
.p-privacy__address-desc a {
color: #2DBBB2;
text-decoration: underline;
}
.p-privacy__address-desc a:hover {
text-decoration: none;
}
/*--------------------------------------
Date
--------------------------------------*/
.p-privacy__date {
font-size: 13px;
color: #888;
letter-spacing: 0.04em;
line-height: 1.8;
text-align: right;
margin: 40px 0 0;
}
@media screen and (min-width: 768px) {
.p-privacy__date {
margin-top: 48px;
}
}
/*======================================
News Archive Page
=======================================*/
/*--------------------------------------
Section Base
--------------------------------------*/
.p-news-archive {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-news-archive {
padding-block: 80px;
}
}
/*--------------------------------------
List
※ 既存 .news-list / .news-list__item /
.news-list__date / .news-list__title を継承
--------------------------------------*/
.p-news-archive__list {
margin-bottom: 48px;
}
@media screen and (min-width: 768px) {
.p-news-archive__list {
margin-bottom: 64px;
}
}
/*--------------------------------------
Item Link
--------------------------------------*/
.p-news-archive__link {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 16px;
padding: 20px 0;
border-bottom: 1px solid #e6e6e6;
text-decoration: none;
color: inherit;
transition: opacity 0.2s ease;
}
.p-news-archive__list .p-news-archive__item:first-child .p-news-archive__link {
border-top: 1px solid #e6e6e6;
}
.p-news-archive__link:hover {
opacity: 0.65;
}
@media screen and (min-width: 768px) {
.p-news-archive__link {
flex-wrap: nowrap;
gap: 0 20px;
padding: 24px 0;
}
}
/*--------------------------------------
Category Badge
--------------------------------------*/
.p-news-archive__cat {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
color: #fff;
background-color: #2DBBB2;
padding: 3px 10px;
white-space: nowrap;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-news-archive__cat {
font-size: 12px;
padding: 4px 12px;
}
}
/*--------------------------------------
Title
--------------------------------------*/
.p-news-archive__title {
font-size: 14px;
font-weight: 400;
letter-spacing: 0.04em;
line-height: 1.6;
margin: 0;
flex: 1;
width: 100%;
}
@media screen and (min-width: 768px) {
.p-news-archive__title {
font-size: 16px;
width: auto;
}
}
/*--------------------------------------
Empty State
--------------------------------------*/
.p-news-archive__empty {
font-size: 16px;
text-align: center;
color: #666;
padding: 60px 20px;
border: 1px solid #e6e6e6;
margin: 0;
}
/*--------------------------------------
Pagination
※ WordPress core の .page-numbers を拡張
--------------------------------------*/
.p-news-archive__pagination {
display: flex;
justify-content: center;
}
.p-news-archive__pagination .nav-links {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
justify-content: center;
}
.p-news-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 8px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
border: 1px solid #e6e6e6;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.p-news-archive__pagination .page-numbers:hover,
.p-news-archive__pagination .page-numbers.current {
background-color: #1C2C43;
color: #fff;
border-color: #1C2C43;
}
.p-news-archive__pagination .page-numbers.dots {
border: none;
pointer-events: none;
background: transparent;
color: #888;
}
/*======================================
Inquiry Page
=======================================*/
/*--------------------------------------
Section Base
--------------------------------------*/
.p-inquiry {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-inquiry {
padding-block: 80px;
}
}
/*--------------------------------------
Lead Text
--------------------------------------*/
.p-inquiry__lead {
font-size: 14px;
line-height: 1.9;
letter-spacing: 0.04em;
margin: 0 0 40px;
}
@media screen and (min-width: 768px) {
.p-inquiry__lead {
font-size: 16px;
margin-bottom: 48px;
}
}
.p-inquiry__required-note {
display: block;
margin-top: 8px;
font-size: 13px;
color: #555;
}
.p-inquiry__required-mark {
color: #c0392b;
font-weight: 700;
margin-right: 2px;
}
/*======================================
Form Layout
=======================================*/
/*--------------------------------------
Form Wrapper
--------------------------------------*/
.p-inquiry-form {
/*max-width: 860px;*/
margin-inline: auto;
}
/*--------------------------------------
Table
--------------------------------------*/
.p-inquiry-form__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
}
/* th: 35% / td: 65% */
.p-inquiry-form__col-th {
width: 35%;
}
.p-inquiry-form__col-td {
width: 65%;
}
/*--------------------------------------
Row
--------------------------------------*/
.p-inquiry-form__tr {
border: 1px solid #e6e6e6;
border-top: none;
}
.p-inquiry-form__tr:first-child {
border-top: 1px solid #e6e6e6;
}
/*--------------------------------------
th
--------------------------------------*/
.p-inquiry-form__th {
width: 35%;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
background-color: #f5f7fa;
padding: 16px;
vertical-align: middle;
text-align: left;
line-height: 1.6;
}
@media screen and (min-width: 768px) {
.p-inquiry-form__th {
font-size: 16px;
padding: 24px;
}
}
/* モバイルでは th を上段・td を下段に積む */
@media screen and (max-width: 767px) {
.p-inquiry-form__table,
.p-inquiry-form__table tbody,
.p-inquiry-form__tr,
.p-inquiry-form__th {
display: block;
width: 100%;
}
.p-inquiry-form__th {
border-right: none;
border-bottom: 1px solid #e6e6e6;
padding: 14px 16px;
}
.p-inquiry-form__td {
padding: 14px 16px;
}
}
.p-inquiry-form__td {
width: 65%;
padding: 16px;
vertical-align: middle;
font-size: 14px;
line-height: 1.7;
}
@media screen and (min-width: 768px) {
.p-inquiry-form__td {
padding: 24px;
font-size: 16px;
}
}
.p-inquiry-form__td > * + * {
margin-top: 8px;
}
/*--------------------------------------
Required Badge
--------------------------------------*/
.p-inquiry-form__required {
display: inline-block;
font-size: 11px;
font-weight: 700;
color: #fff;
background-color: #c0392b;
padding: 1px 6px;
margin-left: 6px;
vertical-align: middle;
line-height: 1.6;
}
/*--------------------------------------
Input / Textarea / Select
--------------------------------------*/
.p-inquiry-form__input,
.p-inquiry-form__textarea,
.p-inquiry-form__select {
font-size: 16px;
font-family: inherit;
letter-spacing: 0.04em;
color: #333;
background-color: #fff;
border: 1px solid #ccc;
border-radius: 2px;
padding: 10px 12px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
appearance: none;
-webkit-appearance: none;
}
.p-inquiry-form__input:focus,
.p-inquiry-form__textarea:focus,
.p-inquiry-form__select:focus {
outline: none;
border-color: #2DBBB2;
box-shadow: 0 0 0 3px rgba(45, 187, 178, 0.15);
}
.p-inquiry-form__input {
width: 35%;
/* max-width: 320px; */
}
.p-inquiry-form__input--full {
max-width: 100%;
width: 100%;
}
.p-inquiry-form__input--zip {
width: 80px;
max-width: 80px;
text-align: center;
}
.p-inquiry-form__input--tel {
width: 80px;
max-width: 80px;
text-align: center;
}
.p-inquiry-form__select {
width: 100%;
max-width: 200px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='https://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%231C2C43' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 12px center;
padding-right: 36px;
}
.p-inquiry-form__textarea {
width: 100%;
min-height: 180px;
resize: vertical;
line-height: 1.7;
}
/*--------------------------------------
Name Group
--------------------------------------*/
.p-inquiry-form__name-group {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
.p-inquiry-form__name-prefix {
font-size: 14px;
color: #555;
flex-shrink: 0;
}
/*--------------------------------------
ZIP Group
--------------------------------------*/
.p-inquiry-form__zip-group {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 8px;
}
.p-inquiry-form__zip-prefix {
font-size: 14px;
color: #555;
flex-shrink: 0;
}
.p-inquiry-form__zip-sep {
font-size: 14px;
color: #555;
}
/*--------------------------------------
TEL Group
--------------------------------------*/
.p-inquiry-form__tel-group {
display: flex;
align-items: center;
gap: 4px;
}
.p-inquiry-form__tel-sep {
font-size: 14px;
color: #555;
}
/*--------------------------------------
Note
--------------------------------------*/
.p-inquiry-form__note {
font-size: 12px;
color: #888;
margin: 4px 0 0;
letter-spacing: 0.04em;
}
/*--------------------------------------
Validation Error
※ MW WP FORM が出力するエラーメッセージ
--------------------------------------*/
.p-inquiry-form__td .mwform-error,
.p-inquiry-form__td .error {
display: block;
font-size: 13px;
color: #c0392b;
margin: 4px 0 0;
}
/*--------------------------------------
Button Area
--------------------------------------*/
.p-inquiry-form__btn-area {
display: flex;
justify-content: center;
margin-top: 40px;
}
@media screen and (min-width: 768px) {
.p-inquiry-form__btn-area {
margin-top: 48px;
}
}
.p-inquiry-form__btn-area--confirm {
gap: 16px;
}
/*--------------------------------------
Submit / Back Button
※ 既存 .button クラスを継承し拡張
--------------------------------------*/
.p-inquiry-form__submit {
min-width: 200px;
cursor: pointer;
border: 1px solid;
font-size: 16px;
font-family: inherit;
}
.p-inquiry-form__back {
min-width: 120px;
cursor: pointer;
font-size: 16px;
font-family: inherit;
}
/*--------------------------------------
Confirm Page
--------------------------------------*/
.p-inquiry-form--confirm .p-inquiry-form__td {
font-size: 16px;
line-height: 1.8;
}
/*======================================
Complete Page
=======================================*/
.p-inquiry-complete {
max-width: 640px;
margin-inline: auto;
text-align: center;
padding: 60px 20px;
}
.p-inquiry-complete__text {
font-size: 16px;
line-height: 2;
letter-spacing: 0.04em;
margin: 0 0 40px;
}
.p-inquiry-complete__btn-area {
display: flex;
justify-content: center;
}
.page-id-102 .p-inquiry__lead {
display: none;
}
/*======================================
Recruit Page — 採用情報
=======================================*/
/* ======================================
採用メッセージ
====================================== */
.p-recruit-message {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-recruit-message {
padding-block: 80px;
}
}
.p-recruit-message__body {
display: flex;
flex-direction: column;
gap: 32px;
}
@media screen and (min-width: 768px) {
.p-recruit-message__body {
flex-direction: row;
align-items: flex-start;
gap: 48px;
}
}
.p-recruit-message__figure {
margin: 0;
flex-shrink: 0;
}
@media screen and (min-width: 768px) {
.p-recruit-message__figure {
width: 280px;
}
}
.p-recruit-message__figure img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
}
.p-recruit-message__content {
flex: 1;
display: flex;
flex-direction: column;
gap: 16px;
}
.p-recruit-message__content p {
font-size: 16px;
line-height: 2;
letter-spacing: 0.04em;
color: #333;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-recruit-message__content p {
font-size: 16px;
}
}
/* ======================================
採用カテゴリーナビ（リンクボタン）
====================================== */
.p-recruit-nav {
padding-block: 60px;
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-recruit-nav {
padding-block: 80px;
}
}
.p-recruit-nav__list {
display: flex;
flex-direction: column;
gap: 16px;
list-style: none;
margin: 0;
padding: 0;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__list {
flex-direction: row;
gap: 24px;
justify-content: center;
}
}
/* ------ カード1枚 ------ */
.p-recruit-nav__item {
width: 100%;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__item {
/* flex: 1; */
/* max-width: 320px; */
}
}
.p-recruit-nav__link {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 24px 20px;
background-color: #fff;
border: 1px solid #ffffff;
border-left: 4px solid #2DBBB2;
text-decoration: none;
color: #1C2C43;
}
.p-recruit-nav__link:hover,
.p-recruit-nav__link:focus-visible {
text-decoration: none;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__link {
flex-direction: column;
align-items: center;
gap: 14px;
padding: 40px 24px 36px;
border-left: 1px solid #ffffff;
border-bottom: 4px solid #2DBBB2;
}
}
/* ------ アイコン ------ */
.p-recruit-nav__icon {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 56px;
height: 56px;
background-color: #f0faf9;
border-radius: 50%;
}
.p-recruit-nav__icon img {
width: 34px;
height: 34px;
object-fit: contain;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__icon {
width: 80px;
height: 80px;
}
.p-recruit-nav__icon img {
width: 48px;
height: 48px;
}
}
/* ------ テキストブロック ------ */
.p-recruit-nav__text {
display: flex;
flex-direction: column;
gap: 4px;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__text {
align-items: center;
gap: 6px;
}
}
/* ------ 英字見出し ------ */
.p-recruit-nav__en {
display: block;
font-size: 20px;
font-weight: 500;
font-size: 12px;
color: #2DBBB2;
line-height: 1;
font-family: "Oswald", sans-serif;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__en {
font-size: 16px;
}
}
/* ------ 日本語見出し ------ */
.p-recruit-nav__jp {
display: block;
font-size: 18px;
font-weight: 700;
letter-spacing: 0.08em;
color: #1C2C43;
line-height: 1;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__jp {
font-size: 20px;
margin-top: 8px;
}
}
/* ------ 矢印（PC のみ表示） ------ */
.p-recruit-nav__arrow {
display: none;
}
@media screen and (min-width: 768px) {
.p-recruit-nav__arrow {
display: block;
width: 32px;
height: 2px;
background-color: #2DBBB2;
position: relative;
margin-top: 4px;
}
.p-recruit-nav__arrow::after {
content: "";
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%) rotate(45deg);
width: 8px;
height: 8px;
border-top: 2px solid #2DBBB2;
border-right: 2px solid #2DBBB2;
}
}
/* ------ タブレット（768px〜1024px） ------ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
.p-recruit-nav__list {
gap: 16px;
}
.p-recruit-nav__link {
padding: 32px 16px 28px;
}
}
/*======================================
Fresh Page — 新卒採用
=======================================*/
/* ======================================
募集要項 ブロック
====================================== */
.p-recruit-job {
border: 1px solid #e6e6e6;
background-color: #fff;
}
.p-recruit-job__title {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.04em;
padding: 16px;
background-color: #1C2C43;
color: #fff;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-recruit-job__title {
font-size: 20px;
padding: 24px;
}
}
/* ======================================
募集要項 テーブル（th:35% / td:65%）
====================================== */
.p-recruit-job__table {
width: 100%;
border-collapse: collapse;
table-layout: fixed;
margin: 0;
}
/* 列幅 */
.p-recruit-job__col-th {
width: 35%;
}
.p-recruit-job__col-td {
width: 65%;
}
/* 行 */
.p-recruit-job__tr {
border-bottom: 1px solid #e6e6e6;
}
.p-recruit-job__tr:last-child {
border-bottom: none;
}
/* th（項目名） */
.p-recruit-job__th {
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
background-color: #f5f7fa;
padding: 16px;
vertical-align: top;
text-align: left;
word-break: keep-all;
}
@media screen and (min-width: 768px) {
.p-recruit-job__th {
font-size: 16px;
padding: 24px;
vertical-align: middle;
}
}
/* td（内容） */
.p-recruit-job__td {
font-size: 14px;
line-height: 1.8;
letter-spacing: 0.04em;
color: #333;
padding: 16px;
vertical-align: top;
word-break: break-all;
}
@media screen and (min-width: 768px) {
.p-recruit-job__td {
font-size: 16px;
padding: 24px;
}
}
/* モバイル：th/tdを縦積みに */
@media screen and (max-width: 767px) {
.p-recruit-job__table,
.p-recruit-job__table tbody,
.p-recruit-job__table tr,
.p-recruit-job__table th,
.p-recruit-job__table td {
display: block;
width: 100%;
}
.p-recruit-job__col-th,
.p-recruit-job__col-td {
display: none; /* colgroup は非表示 */
}
.p-recruit-job__th {
border-right: none;
border-bottom: 1px solid #e6e6e6;
padding: 16px;
word-break: break-all;
}
.p-recruit-job__td {
padding: 16px;
}
.p-recruit-job__tr:last-child .p-recruit-job__td {
border-bottom: none;
}
}
/* リスト（td内のul） */
.p-recruit-job__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.p-recruit-job__list li {
padding-left: 1.25em;
position: relative;
}
.p-recruit-job__list li::before {
content: "・";
position: absolute;
left: 0;
top: 0;
color: #2DBBB2;
}
/* ======================================
パンくずナビ（採用情報トップへ戻る）
====================================== */
.p-recruit-breadcrumb {
padding: 16px 0;
background-color: #f5f7fa;
border-bottom: 1px solid #e6e6e6;
}
.p-recruit-breadcrumb__link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
color: #1C2C43;
text-decoration: none;
letter-spacing: 0.04em;
}
.p-recruit-breadcrumb__link:hover,
.p-recruit-breadcrumb__link:focus-visible {
text-decoration: underline;
color: #2DBBB2;
}
/* 左矢印 */
.p-recruit-breadcrumb__arrow {
display: inline-block;
width: 8px;
height: 8px;
border-left: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
/* ======================================
募集要項セクション
====================================== */
.p-recruit-jobs {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-recruit-jobs {
padding-block: 80px;
}
}
/*======================================
Voice Archive — 先輩の声一覧
=======================================*/
/* ======================================
一覧セクション
====================================== */
.p-voice-archive {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-voice-archive {
padding-block: 80px;
}
}
/* 投稿なし */
.p-voice-archive__empty {
font-size: 16px;
color: #666;
text-align: center;
padding: 40px 0;
}
/* ======================================
カードリスト
====================================== */
.p-voice-archive__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
/* flex-direction: column; */
/* gap: 32px; */
justify-content: space-between;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.p-voice-archive__list {
gap: 40px;
}
}
/* ======================================
カード（1件）
====================================== */
.p-voice-archive__item {
border: 1px solid #e6e6e6;
background-color: #fff;
border-radius: 2px;
flex: 100%;
max-width: 100%;
margin-bottom: 24px;
}
.p-voice-card {
padding: 28px 24px;
}
@media screen and (min-width: 768px) {
.p-voice-card {
padding: 36px 40px;
}
.p-voice-archive__item {
flex: 48%;
max-width: 48%;
}
}
/* ======================================
カードヘッダー（名前・役職）
====================================== */
.p-voice-card__header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 16px;
padding-bottom: 16px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.p-voice-card__header {
padding-bottom: 18px;
margin-bottom: 24px;
}
}
/* 名前 */
.p-voice-card__name {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
color: #1C2C43;
margin: 0;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-voice-card__name {
font-size: 20px;
}
}
/* 役職 */
.p-voice-card__role {
font-size: 13px;
letter-spacing: 0.04em;
color: #2DBBB2;
font-weight: 700;
margin: 0;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-voice-card__role {
font-size: 14px;
}
}
/* ======================================
一言メッセージ
====================================== */
.p-voice-card__message {
margin: 0 0 20px;
padding: 0;
border: none;
}
.p-voice-card__message p {
font-size: 14px;
letter-spacing: 0.04em;
color: #333;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-voice-card__message p {
font-size: 16px;
}
}
/* ======================================
フッター（詳細リンク）
====================================== */
.p-voice-card__footer {
text-align: right;
padding-top: 16px;
border-top: 1px solid #e6e6e6;
}
.p-voice-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #2DBBB2;
text-decoration: none;
}
.p-voice-card__link:hover,
.p-voice-card__link:focus-visible {
text-decoration: underline;
}
/* 右矢印アイコン */
.p-voice-card__arrow {
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
/* ======================================
ページネーション
====================================== */
.p-voice-archive__pagination {
margin-top: 48px;
display: flex;
justify-content: center;
}
.p-voice-archive__pagination .nav-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.p-voice-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
border: 1px solid #e6e6e6;
background-color: #fff;
text-decoration: none;
border-radius: 2px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.p-voice-archive__pagination .page-numbers:hover,
.p-voice-archive__pagination .page-numbers:focus-visible {
background-color: #2DBBB2;
color: #fff;
border-color: #2DBBB2;
}
.p-voice-archive__pagination .page-numbers.current {
background-color: #1C2C43;
color: #fff;
border-color: #1C2C43;
pointer-events: none;
}
.p-voice-archive__pagination .page-numbers.dots {
border: none;
background: none;
pointer-events: none;
color: #999;
}
/*======================================
Voice Single — 先輩の声 詳細
=======================================*/
/* ======================================
パンくずナビ
====================================== */
.p-voice-breadcrumb {
background-color: #f5f7fa;
padding-block: 12px;
font-size: 12px;
}
.p-voice-breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.p-voice-breadcrumb__item {
display: flex;
align-items: center;
color: #666;
}
.p-voice-breadcrumb__item + .p-voice-breadcrumb__item::before {
content: "›";
margin-right: 4px;
color: #999;
}
.p-voice-breadcrumb__item a {
color: #2DBBB2;
text-decoration: none;
}
.p-voice-breadcrumb__item a:hover,
.p-voice-breadcrumb__item a:focus-visible {
text-decoration: underline;
}
.p-voice-breadcrumb__item--current {
color: #1C2C43;
font-weight: 700;
}
/* ======================================
プロフィールヘッダー
====================================== */
.p-voice-profile {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-voice-profile {
padding-block: 80px;
}
}
.p-voice-profile__body {
display: flex;
flex-direction: column;
gap: 32px;
}
@media screen and (min-width: 768px) {
.p-voice-profile__body {
flex-direction: row;
align-items: flex-start;
gap: 48px;
}
}
.p-voice-profile__info {
flex: 1;
}
/* 名前 */
.p-voice-profile__name {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.06em;
color: #1C2C43;
margin: 0 0 20px;
line-height: 1.4;
padding-bottom: 16px;
border-bottom: 2px solid #2DBBB2;
}
@media screen and (min-width: 768px) {
.p-voice-profile__name {
font-size: 28px;
}
}
/* プロフィール dl */
.p-voice-profile__dl {
margin: 0 0 24px;
}
.p-voice-profile__row {
display: flex;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid #e6e6e6;
}
.p-voice-profile__dt {
flex-shrink: 0;
width: 120px;
font-size: 14px;
font-weight: 700;
color: #1C2C43;
letter-spacing: 0.04em;
}
.p-voice-profile__dd {
font-size: 14px;
color: #333;
line-height: 1.5;
margin: 0;
}
/* キャッチコピー */
.p-voice-profile__catch {
margin: 0;
padding: 24px;
background-color: #f0faf9;
border-left: 4px solid #2DBBB2;
border-radius: 0 2px 2px 0;
}
.p-voice-profile__catch p {
font-size: 16px;
font-weight: 700;
line-height: 1.8;
color: #1C2C43;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-voice-profile__catch p {
font-size: 18px;
}
.p-voice-profile__dd {
font-size: 16px;
color: #333;
line-height: 2;
margin: 0;
}
.p-voice-profile__dt {
width: 20%;
font-size: 16px;
}
}
/* ======================================
インタビュー Q&A
====================================== */
.p-voice-interview {
padding-block: 60px;
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-voice-interview {
padding-block: 80px;
}
}
.p-voice-interview__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 40px;
counter-reset: qa-counter;
}
.p-voice-interview__item {
display: flex;
flex-direction: column;
gap: 16px;
}
/* Q行・A行 共通 */
.p-voice-interview__q,
.p-voice-interview__a {
display: flex;
align-items: flex-start;
gap: 16px;
}
/* Q/A ラベル */
.p-voice-interview__label {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
font-size: 18px;
font-weight: 700;
letter-spacing: 0;
line-height: 1;
}
.p-voice-interview__label--q {
background-color: #1C2C43;
color: #fff;
}
.p-voice-interview__label--a {
background-color: #2DBBB2;
color: #fff;
}
/* テキスト */
.p-voice-interview__q .p-voice-interview__text {
font-size: 16px;
font-weight: 700;
color: #1C2C43;
line-height: 2;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-voice-interview__q .p-voice-interview__text {
font-size: 18px;
}
}
.p-voice-interview__a .p-voice-interview__text {
font-size: 14px;
color: #333;
line-height: 2;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-voice-interview__a .p-voice-interview__text {
font-size: 16px;
}
}
/* ======================================
1日のスケジュール
====================================== */
.p-voice-schedule {
padding-block: 60px;
background-color: #fff;
}
.p-voice-schedule--alt {
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-voice-schedule,
.p-voice-schedule--alt {
padding-block: 80px;
}
}
.p-voice-schedule__list {
list-style: none;
padding: 0;
margin: 0;
position: relative;
}
/* タイムライン縦線 */
.p-voice-schedule__list::before {
content: "";
position: absolute;
left: 5px;
top: 0;
bottom: 0;
width: 2px;
background-color: #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-voice-schedule__list::before {
left: 10px;
}
}
.p-voice-schedule__item {
display: flex;
align-items: baseline;
gap: 24px;
padding: 16px 0 16px 0;
position: relative;
}
/* タイムライン ドット */
.p-voice-schedule__item::before {
content: "";
position: absolute;
left: 0;
top: 27px;
width: 12px;
height: 12px;
border-radius: 50%;
background-color: #2DBBB2;
border: 2px solid #fff;
box-shadow: 0 0 0 2px #2DBBB2;
}
@media screen and (min-width: 768px) {
.p-voice-schedule__item::before {
left: 5px;
}
}
.p-voice-schedule__time {
flex-shrink: 0;
width: 48px;
font-size: 13px;
font-weight: 700;
color: #2DBBB2;
letter-spacing: 0.04em;
text-align: right;
}
@media screen and (min-width: 768px) {
.p-voice-schedule__time {
width: 60px;
}
}
.p-voice-schedule__text {
font-size: 14px;
color: #333;
line-height: 2;
letter-spacing: 0.04em;
padding-left: 28px;
}
@media screen and (min-width: 768px) {
.p-voice-schedule__text {
font-size: 16px;
}
}
/* ======================================
今後の目標・メッセージ
====================================== */
.p-voice-future {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-voice-future {
padding-block: 80px;
}
}
.p-voice-future__body {
/* max-width: 800px; */
margin-inline: auto;
padding: 32px 28px;
background-color: #f0faf9;
border-radius: 4px;
position: relative;
}
.p-voice-future__body::before {
content: "\201C";
position: absolute;
top: 8px;
left: 16px;
font-size: 60px;
line-height: 1;
color: #2DBBB2;
opacity: 0.3;
font-family: Georgia, serif;
}
.p-voice-future__text {
font-size: 14px;
line-height: 2;
color: #333;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-voice-future__text {
font-size: 16px;
}
}
/* ======================================
前後ナビゲーション
====================================== */
.p-voice-post-nav {
padding-block: 40px;
background-color: #f5f7fa;
border-top: 1px solid #e6e6e6;
}
.p-voice-post-nav__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 16px;
}
@media screen and (max-width: 767px) {
.p-voice-post-nav__inner {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
text-align: center;
}
.p-voice-post-nav__prev {
order: 2;
}
.p-voice-post-nav__back {
order: 1;
}
.p-voice-post-nav__next {
order: 3;
}
}
/* 前後リンク */
.p-voice-post-nav__link {
display: flex;
align-items: center;
gap: 8px;
text-decoration: none;
color: #1C2C43;
}
.p-voice-post-nav__link:hover,
.p-voice-post-nav__link:focus-visible {
color: #2DBBB2;
}
.p-voice-post-nav__link--prev {
justify-content: flex-start;
}
.p-voice-post-nav__link--next {
justify-content: flex-end;
}
@media screen and (max-width: 767px) {
.p-voice-post-nav__link--prev,
.p-voice-post-nav__link--next {
justify-content: center;
}
}
.p-voice-post-nav__label {
font-size: 11px;
letter-spacing: 0.06em;
color: #999;
display: block;
}
.p-voice-post-nav__title {
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1.5;
}
/* 矢印 */
.p-voice-post-nav__arrow {
display: inline-block;
flex-shrink: 0;
width: 8px;
height: 8px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
}
.p-voice-post-nav__arrow--prev {
transform: rotate(-135deg);
}
.p-voice-post-nav__arrow--next {
transform: rotate(45deg);
}
/* 一覧に戻るボタン */
.p-voice-post-nav__back-link {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.06em;
color: #fff;
background-color: #1C2C43;
border-radius: 2px;
text-decoration: none;
white-space: nowrap;
}
.p-voice-post-nav__back-link:hover,
.p-voice-post-nav__back-link:focus-visible {
background-color: #2DBBB2;
}
/* ============================================================
ニュース詳細ページ (single.php)
styles.css の設計ルール・カラー・命名規則に準拠
ブランドカラー : #2DBBB2
テキスト濃色 : #1C2C43
テキスト中色 : #666
ボーダー : #e6e6e6
背景グレー : #f5f7fa
フォント : "Noto Sans JP", sans-serif（本文）
"Oswald", sans-serif（英字見出し）
ブレイクポイント: 768px
============================================================ */
/* ============================================================
記事本文エリア (.p-news-single)
============================================================ */
.p-news-single {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-news-single {
padding-block: 80px;
}
}
/* ------------------------------------------------------------
ヘッダー（日付 + タイトル）
------------------------------------------------------------ */
.p-news-single__header {
margin-bottom: 40px;
padding-bottom: 24px;
border-bottom: 2px solid #e6e6e6;
}
@media screen and (min-width: 768px) {
.p-news-single__header {
margin-bottom: 56px;
padding-bottom: 32px;
}
}
.p-news-single__date {
display: block;
font-size: 13px;
font-family: "Oswald", sans-serif;
font-weight: 400;
letter-spacing: 0.06em;
color: #2DBBB2;
margin-bottom: 12px;
}
@media screen and (min-width: 768px) {
.p-news-single__date {
font-size: 16px;
margin-bottom: 16px;
}
}
.p-news-single__title {
font-size: 22px;
font-weight: 700;
line-height: 1.6;
color: #1C2C43;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-news-single__title {
font-size: 28px;
line-height: 1.5;
}
}
/* ------------------------------------------------------------
本文エリア (.p-news-single__body)
the_content() 内の標準要素すべてに対応
------------------------------------------------------------ */
.p-news-single__body {
font-size: 16px;
line-height: 1.9;
color: #333;
word-break: break-word;
overflow-wrap: break-word;
}
/* 見出し h2 */
.p-news-single__body h2 {
font-size: 22px;
font-weight: 700;
color: #1C2C43;
margin: 48px 0 20px;
padding-left: 14px;
border-left: 4px solid #2DBBB2;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-news-single__body h2 {
font-size: 24px;
margin-top: 64px;
}
}
/* 見出し h3 */
.p-news-single__body h3 {
font-size: 18px;
font-weight: 700;
color: #1C2C43;
margin: 40px 0 16px;
padding-bottom: 8px;
border-bottom: 1px solid #e6e6e6;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-news-single__body h3 {
font-size: 20px;
}
}
/* 見出し h4 */
.p-news-single__body h4 {
font-size: 16px;
font-weight: 700;
color: #1C2C43;
margin: 32px 0 12px;
line-height: 1.4;
}
/* 段落 */
.p-news-single__body p {
margin: 0 0 24px;
}
/* リンク */
.p-news-single__body a {
color: #2DBBB2;
text-decoration: underline;
}
@media screen and (min-width: 768px) {
.p-news-single__body a:hover {
opacity: 0.8;
text-decoration: none;
}
}
/* リスト */
.p-news-single__body ul,
.p-news-single__body ol {
margin: 0 0 24px;
padding-left: 1.5em;
}
.p-news-single__body ul li,
.p-news-single__body ol li {
margin-bottom: 8px;
line-height: 1.8;
}
/* 引用 */
.p-news-single__body blockquote {
margin: 32px 0;
padding: 24px;
background-color: #f5f7fa;
border-left: 4px solid #2DBBB2;
color: #666;
font-size: 16px;
line-height: 1.8;
}
/* 画像 */
.p-news-single__body img {
max-width: 100%;
height: auto;
display: block;
margin: 24px auto;
}
/* テーブル */
.p-news-single__body table {
width: 100%;
border-collapse: collapse;
margin: 32px 0;
font-size: 14px;
}
.p-news-single__body table th,
.p-news-single__body table td {
padding: 12px 16px;
border: 1px solid #e6e6e6;
text-align: left;
vertical-align: top;
line-height: 1.6;
}
.p-news-single__body table th {
background-color: #f5f7fa;
font-weight: 700;
color: #1C2C43;
}
/* figure / figcaption */
.p-news-single__body figure {
margin: 24px 0;
text-align: center;
}
.p-news-single__body figcaption {
margin-top: 8px;
font-size: 13px;
color: #999;
}
/* 水平線 */
.p-news-single__body hr {
margin: 40px 0;
border: none;
border-top: 1px solid #e6e6e6;
}
/* ------------------------------------------------------------
一覧へ戻るリンク
------------------------------------------------------------ */
.p-news-single__back {
margin-top: 56px;
text-align: center;
}
@media screen and (min-width: 768px) {
.p-news-single__back {
margin-top: 72px;
}
}
.p-news-single__back-link {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 14px;
font-weight: 500;
color: #1C2C43;
text-decoration: none;
padding: 12px 32px;
border: 1px solid #1C2C43;
transition: background-color 0.2s ease, color 0.2s ease;
}
/* 矢印（::before） */
.p-news-single__back-link::before {
content: "←";
font-size: 1em;
line-height: 1;
}
@media screen and (min-width: 768px) {
.p-news-single__back-link:hover {
background-color: #1C2C43;
color: #fff;
opacity: 1;
}
}
/* ============================================================
レスポンシブ（スマートフォン 480px以下）
============================================================ */
@media screen and (max-width: 480px) {
.p-news-single {
padding-block: 40px 60px;
}
.p-news-single__title {
font-size: 19.2px;
}
.p-news-single__body {
font-size: 16px;
line-height: 1.8;
}
.p-news-single__body h2 {
font-size: 19.2px;
margin-top: 36px;
}
.p-news-single__body h3 {
font-size: 17.6px;
}
/* テーブルをスクロール対応に */
.p-news-single__body table {
display: block;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
}
.p-mechanism-fund_wrap{
overflow:hidden;
}
.p-mechanism-fund_left{
float:left;
width:43%;
}
.p-mechanism-fund_right{
float:right;
width:55%;
}
@media screen and (max-width: 768px) {
.p-mechanism-fund_left{
float:none;
width:100%;
}
.p-mechanism-fund_right{
float:none;
width:100%;
}
}
::placeholder {
color: #d9d9d9;
}
.footer__copyright {
margin-top: 15px;
}
#autozip{
display:none!important;
}
/*======================================
cases Archive — 先輩の声一覧
=======================================*/
/* ======================================
パンくずナビ
====================================== */
.p-cases-breadcrumb {
background-color: #f5f7fa;
padding-block: 12px;
font-size: 12px;
}
.p-cases-breadcrumb__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px;
}
.p-cases-breadcrumb__item {
display: flex;
align-items: center;
color: #666;
}
.p-cases-breadcrumb__item + .p-cases-breadcrumb__item::before {
content: "›";
margin-right: 4px;
color: #999;
}
.p-cases-breadcrumb__item a {
color: #2DBBB2;
text-decoration: none;
}
.p-cases-breadcrumb__item a:hover,
.p-cases-breadcrumb__item a:focus-visible {
text-decoration: underline;
}
.p-cases-breadcrumb__item--current {
color: #1C2C43;
font-weight: 700;
}
/* ======================================
一覧セクション
====================================== */
.p-cases-archive {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-cases-archive {
padding-block: 80px;
}
}
/* 投稿なし */
.p-cases-archive__empty {
font-size: 16px;
color: #666;
text-align: center;
padding: 40px 0;
}
/* ======================================
カードリスト
====================================== */
.p-cases-archive__list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
/* flex-direction: column; */
/* gap: 32px; */
justify-content: space-between;
flex-wrap: wrap;
}
@media screen and (min-width: 768px) {
.p-cases-archive__list {
gap: 40px;
}
}
/* ======================================
カード（1件）
====================================== */
.p-cases-archive__item {
border: 1px solid #e6e6e6;
background-color: #fff;
border-radius: 2px;
flex: 100%;
max-width: 100%;
margin-bottom: 24px;
}
.p-cases-card {
padding: 28px 24px;
}
@media screen and (min-width: 768px) {
.p-cases-card {
padding: 36px 40px;
}
.p-cases-archive__item {
flex: 48%;
max-width: 48%;
}
}
/* ======================================
カードヘッダー（名前・役職）
====================================== */
.p-cases-card__header {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: 8px 16px;
padding-bottom: 16px;
border-bottom: 1px solid #e6e6e6;
margin-bottom: 20px;
}
@media screen and (min-width: 768px) {
.p-cases-card__header {
padding-bottom: 18px;
margin-bottom: 24px;
}
}
/* 名前 */
.p-cases-card__name {
font-size: 18px;
font-weight: 700;
letter-spacing: 0.06em;
color: #1C2C43;
margin: 0;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-cases-card__name {
font-size: 20px;
}
}
/* 役職 */
.p-cases-card__role {
font-size: 13px;
letter-spacing: 0.04em;
color: #2DBBB2;
font-weight: 700;
margin: 0;
line-height: 1.4;
}
@media screen and (min-width: 768px) {
.p-cases-card__role {
font-size: 14px;
}
}
/* ======================================
一言メッセージ
====================================== */
.p-cases-card__message {
margin: 0 0 20px;
padding: 0;
border: none;
}
.p-cases-card__message p {
font-size: 14px;
letter-spacing: 0.04em;
color: #333;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-cases-card__message p {
font-size: 16px;
}
}
/* ======================================
フッター（詳細リンク）
====================================== */
.p-cases-card__footer {
text-align: right;
padding-top: 16px;
border-top: 1px solid #e6e6e6;
}
.p-cases-card__link {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
font-weight: 700;
letter-spacing: 0.04em;
color: #2DBBB2;
text-decoration: none;
}
.p-cases-card__link:hover,
.p-cases-card__link:focus-visible {
text-decoration: underline;
}
/* 右矢印アイコン */
.p-cases-card__arrow {
display: inline-block;
width: 6px;
height: 6px;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
flex-shrink: 0;
}
/* ======================================
ページネーション
====================================== */
.p-cases-archive__pagination {
margin-top: 48px;
display: flex;
justify-content: center;
}
.p-cases-archive__pagination .nav-links {
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
justify-content: center;
}
.p-cases-archive__pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
color: #1C2C43;
border: 1px solid #e6e6e6;
background-color: #fff;
text-decoration: none;
border-radius: 2px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.p-cases-archive__pagination .page-numbers:hover,
.p-cases-archive__pagination .page-numbers:focus-visible {
background-color: #2DBBB2;
color: #fff;
border-color: #2DBBB2;
}
.p-cases-archive__pagination .page-numbers.current {
background-color: #1C2C43;
color: #fff;
border-color: #1C2C43;
pointer-events: none;
}
.p-cases-archive__pagination .page-numbers.dots {
border: none;
background: none;
pointer-events: none;
color: #999;
}
/* ======================================
プロフィールヘッダー
====================================== */
.p-cases-profile {
padding-block: 60px;
background-color: #fff;
}
@media screen and (min-width: 768px) {
.p-cases-profile {
padding-block: 80px;
}
}
.p-cases-profile__body {
/* display: flex; */
flex-direction: column;
gap: 32px;
}
@media screen and (min-width: 768px) {
.p-cases-profile__body {
flex-direction: row;
align-items: flex-start;
gap: 48px;
}
}
.p-cases-profile__info {
flex: 1;
}
/* 名前 */
.p-cases-profile__name {
font-size: 24px;
font-weight: 700;
letter-spacing: 0.06em;
color: #1C2C43;
margin: 0 0 20px;
line-height: 1.4;
padding-bottom: 16px;
border-bottom: 2px solid #2DBBB2;
}
@media screen and (min-width: 768px) {
.p-cases-profile__name {
font-size: 28px;
}
}
.p-cases-profile__bfaf {
display: flex;
gap: 24px;
justify-content: space-between;
}
.p-cases-profile__bfaf_img img {
aspect-ratio: 16 / 9;
object-fit: cover;
margin-bottom: 16px;
}
.p-cases-profile__bfaf_img {
flex: 50%;
max-width: 50%;
}
.img_ttl {
font-weight: bold;
color: #2dbbb2;
}
/* プロフィール dl */
.p-cases-profile__dl {
margin: 0 0 24px;
}
.p-cases-profile__row {
display: flex;
align-items: baseline;
gap: 16px;
padding: 10px 0;
border-bottom: 1px solid #e6e6e6;
}
.p-cases-profile__dt {
flex-shrink: 0;
width: 120px;
font-size: 14px;
font-weight: 700;
color: #1C2C43;
letter-spacing: 0.04em;
}
.p-cases-profile__dd {
font-size: 14px;
color: #333;
line-height: 1.5;
margin: 0;
}
/* キャッチコピー */
.p-cases-profile__catch {
margin: 0;
padding: 24px;
background-color: #f0faf9;
border-left: 4px solid #2DBBB2;
border-radius: 0 2px 2px 0;
}
.p-cases-profile__catch p {
font-size: 16px;
font-weight: 700;
line-height: 1.8;
color: #1C2C43;
letter-spacing: 0.04em;
margin: 0;
}
@media screen and (min-width: 768px) {
.p-cases-profile__catch p {
font-size: 18px;
}
.p-cases-profile__dd {
font-size: 16px;
color: #333;
line-height: 2;
margin: 0;
}
.p-cases-profile__dt {
width: 20%;
font-size: 16px;
}
}
.p-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
padding: 30px;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.35s ease, visibility 0.35s ease;
}
.p-modal.is-show {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.p-modal__overlay {
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.78);
}
.p-modal__content {
position: relative;
z-index: 1;
max-width: min(900px, 92vw);
max-height: 86vh;
opacity: 0;
transform: translateY(20px) scale(0.98);
transition: opacity 0.35s ease, transform 0.35s ease;
}
.p-modal.is-show .p-modal__content {
opacity: 1;
transform: translateY(0) scale(1);
}
.p-modal__content img {
display: block;
max-width: 100%;
max-height: 86vh;
width: auto;
height: auto;
}
.p-modal__close {
position: absolute;
top: -18px;
right: -18px;
width: 42px;
height: 42px;
border: none;
border-radius: 50%;
background: #fff;
color: #111;
font-size: 30px;
line-height: 1;
cursor: pointer;
z-index: 2;
}
@media screen and (max-width: 767px) {
.p-modal {
padding: 20px;
}
.p-modal__close {
top: -14px;
right: -14px;
width: 38px;
height: 38px;
font-size: 28px;
}
}
.p-gallery {
display: flex;
flex-wrap: wrap;
gap: 24px 2%;
}
.p-gallery .p-gallery__item {
flex: 32%;
max-width: 32%;
}
.p-gallery .p-gallery__item img {
aspect-ratio: 16 / 9;
object-fit: cover;
}
.p-cases-gallery {
padding-block: 60px;
background-color: #f5f7fa;
}
@media screen and (min-width: 768px) {
.p-cases-gallery {
padding-block: 80px;
}
}
.p-cases-overview {
padding-block: 60px;
}
@media screen and (min-width: 768px) {
.p-cases-gallery {
padding-block: 80px;
}
}
.overview_list__area table.p-cases-detail {
width: 100%;
}
.overview_list__area table.p-cases-detail th.p-cases-detail__ttl {
width: 30%;
text-align: left;
border-bottom: 1px solid #ccc;
padding-block: 24px;
}
.overview_list__area table.p-cases-detail td.p-cases-detail__content{
width: 70%;
text-align: left;
border-bottom: 1px solid #ccc;
padding-block: 24px;
}
@media screen and (max-width: 767px) {
.overview_list__area table.p-cases-detail th.p-cases-detail__ttl {
display: block;
width: 100%;
border-bottom: none;
padding-bottom: 8px;
}
.overview_list__area table.p-cases-detail td.p-cases-detail__content {
display: block;
width: 100%;
padding-top: 0;
}
.p-gallery .p-gallery__item {
flex: 49%;
max-width: 49%;
}
.p-cases-profile__bfaf {
flex-direction: column;
}
.p-cases-profile__bfaf_img {
flex: 100%;
max-width: 100%;
}
.p-cases-profile__bfaf_img img {
}
.img_ttl {
margin-bottom: 24px;
margin-top: 8px;
}
.p-cases-profile__bfaf .p-cases-profile__bfaf_img:nth-of-type(2) .img_ttl{
margin-bottom: 0;
}
}
input.p-inquiry-form__submit.button:hover {
color: #2dbbb2;
border: 1px solid;
box-sizing: border-box;
}
/*過去の実績*/
.past-cases {
padding: 80px 0;
}
.past-cases .inner {
max-width: 1226px;
padding-left:0;
padding-right:0;
margin-bottom: 50px;
}
.page-header {
margin-bottom: 40px;
text-align: center;
}
.page-header h1 {
font-size: 32px;
font-weight: 700;
}
.table-wrap {
overflow-x: auto;
}
.past-cases-table {
width: 100%;
border-collapse: collapse;
background: #fff;
min-width: 900px;
}
.past-cases-table th,
.past-cases-table td {
border: 1px solid #d8d3c8;
padding: 15px;
font-size: 15px;
line-height: 1.7;
vertical-align: middle;
text-align: center;
width: 33.33333%;
}
.past-cases-table th {
background: #ece8de;
font-weight: 700;
text-align: center;
white-space: nowrap;
}
.past-cases-table td {
background: #fff;
}
/*
.past-cases-table td:nth-child(1) {
width: 120px;
text-align: center;
}
.past-cases-table td:nth-child(2) {
width: 220px;
text-align: center;
}
.past-cases-table td:nth-child(3) {
width: 120px;
text-align: center;
}
.past-cases-table td:nth-child(4) {
width: auto;
text-align: center;
}
.past-cases-table td:nth-child(5) {
width: 120px;
text-align: center;
}
*/
/* hover */
.past-cases-table tbody tr:hover {
background: #f8f8f8;
}
/* SP */
@media screen and (max-width: 767px){
.past-cases {
padding: 50px 0;
}
.page-header h1 {
font-size: 24px;
}
.past-cases-table th,
.past-cases-table td {
font-size: 13px;
padding: 10px;
}
}
.kakokako{
overflow-y:scroll;
height:300px;
}
.pastpac{
padding-bottom:80px;
}
.achievement-buttons{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:40px;
}
.achievement-btn{
display:flex;
align-items:center;
justify-content:center;
padding:20px;
background:#1d304d;
color:#fff;
text-decoration:none;
text-align:center;
transition:.3s;
font-size:13px;
border:1px solid #1C2C43;
}
.achievement-btn:hover{
background-color: #fff;
color: #1C2C43;
}
/* タブレット */
@media (max-width:1024px){
.achievement-buttons{
grid-template-columns:repeat(2,1fr);
}
}
/* スマホ */
@media (max-width:767px){
.achievement-buttons{
grid-template-columns:1fr;
gap:12px;
}
}
.table-wrap table.past-cases-table tr th:nth-child(4),
.table-wrap table.past-cases-table tr td:nth-child(4) {
display: none;
}