@charset "UTF-8";
/* ==========================================================================
BEM設計手法の基本
==========================================================================
CSSを部品として管理しやすくするための命名規則。
クラス名は「Block」「Element」「Modifier」の3要素で構成します。
【命名規則】
.block // 部品全体 (例: .card)
.block__element // 部品の一部 (例: .card__title)
.block--modifier // 部品の状態や種類 (例: .card--featured)
.block__element--modifier // 部品の一部の状態や種類 (例: .card__title--small)
【具体例】
*/
/* ==========================================================================
タイトル・本文・リンク・ボタン
========================================================================== */
/* --- 見出し --- */
/* : サイトロゴ */
.site-logo {
}
.site-logo img{
max-height:60px;
}
/* : ページタイトル */
.page-hero {
background-color:#000;
color: #fff;
padding: var(--space-30) 0; /* 60px相当 */
text-align: center;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
position:relative;
}
.page-hero--works{ background-image:url(../images/works/pege_ttl_bg.jpg); }
.page-hero--company{ background-image:url(../images/company/pege_ttl_bg.jpg); }
.page-hero--recruit{ background-image:url(../images/recruit/pege_ttl_bg.jpg); }
.page-hero--contact{ background-image:url(../images/contact/pege_ttl_bg.jpg); }
.page-hero--news{ background-image:url(../images/news/pege_ttl_bg.jpg); }
.page-hero:before {
z-index:1;
display:block;
content:"";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.page-hero__title {
font-size: calc(4.5rem * (1 - 0.2));
font-weight: 900;
line-height:1;
position:relative;
text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
z-index:2;
}
.page-hero__title span{
font-family: var(--font-oswald);
font-size: calc(2rem * (1 - 0.2));
display:block;
margin-bottom:0.75em;
}
/* : 大見出し */
.title-lg{
text-align:center;
font-size: calc(4rem * (1 - 0.2));
line-height:1;
font-weight:700;
margin-bottom: var(--space-8);
color:var(--color-primary);
}
.title-lg__en{
font-family: var(--font-oswald);
font-size: calc(2rem * (1 - 0.2));
font-weight:700;
line-height:1;
display:block;
margin-bottom: var(--space-5);
}
.title-lg + p{
font-size:1.5rem;
font-weight:500;
color:#666666;
text-align:left;
}
/*
.title-lg--sec{ font-size:3.5rem; margin-bottom: var(--space-13) !important; }
.title-lg__en--sec{ font-size:1.75rem; margin-bottom: var(--space-4) !important; }
*/
/* : 中見出し */
.title-md{
display:-webkit-box;
display:-ms-flexbox;
display:flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-size: calc(3rem * (1 - 0.2));
font-weight:700;
border-bottom:1px solid #cccccc;
padding-bottom:var(--space-5);
position:relative;
margin-bottom: var(--space-12);
color:var(--color-primary);
}
.title-md span{
font-family: var(--font-oswald);
font-size: calc(1.5rem * (1 - 0.2));
font-weight:500;
margin-left:1em;
}
.title-md:before {
position: absolute;
left: 0;
bottom: -1px;
width: 20%;
height: 1px;
content: '';
background-color:var(--color-primary);
}
/* : 小見出し */
.title-sm {
font-size: calc(2rem * (1 - 0.2));
font-weight: 700;
padding: var(--space-5);
color: #fff;
margin-bottom: var(--space-5);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
background: linear-gradient(135deg, var(--color-primary) 80%,#333 80%);
}
/* : 注釈 */
.title-xs {
font-size: calc(1.8rem * (1 - 0.2));
font-weight: 700;
color:var(--color-primary);
padding: var(--space-4);
margin-bottom: var(--space-4);
background-color:#ddd;
}
/* --- 本文・リンク --- */
p {
}
.text-link {
color: #0000ee;
text-decoration: underline;
}
.text-link:hover {
text-decoration: none;
}
/* --- ボタン --- */
.btn {
position: relative;
overflow: hidden;
border-radius:100px;
text-decoration: none;
display: block;
width:100%;
max-width:300px;
border:1px solid var(--color-primary);
padding: calc(var(--space-unit) * 10) calc(var(--space-unit) * 10);
font-size: 1.6rem;
font-weight: 700;
line-height:1.2em;
text-align: center;
text-decoration: none;
outline: none;
transition: ease .2s;
margin-left:auto;
margin-right:auto;
}
.btn:hover{
opacity: 1;
}
.btn span {
position: relative;
z-index: 3;
color:var(--color-primary);
}
.btn:hover span{
color:#fff;
}
.bgskew::before {
content: '';
position: absolute;
top: 0;
left: -130%;
background:var(--color-primary);
width:120%;
height: 100%;
transform: skewX(-25deg);
}
.bgskew:hover::before {
animation: skewanime .5s forwards;
}
@keyframes skewanime {
100% {
left:-10%;
}
}
.btn img{
display:inline-block;
max-height: 25px;
vertical-align: middle;
}
.btn:hover img {
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.btn--primary {
background-color: var(--color-primary);
color: #fff;
}
.btn--primary:hover {
background-color: var(--color-primary-dark);
}
.btn-wrapper {
text-align: center;
margin-top: calc(var(--space-unit) * 8); /* 32px相当 */
}
/* --- タブレット (768px以上) --- */
@media (min-width: 768px) {
.page-hero__title { font-size: 4.5rem; }
.page-hero__title span{ font-size:2rem; }
.title-lg{ font-size:4rem; }
.title-lg__en{ font-size:2rem;}
.title-lg + p{ font-size:1.6rem; text-align:center; }
.title-md{ font-size:3rem; }
.title-md span{ font-size:1.5rem; }
.title-sm{ font-size: 2rem; }
.title-xs { font-size: 1.8rem; }
.btn { padding: var(--space-5) calc(var(--space-unit) * 6); margin-left:inherit; margin-right:inherit; }
}
/* --- PC (1200px以上) --- */
@media (min-width: 1200px) {
}
/* ==========================================================================
ヘッダーとフッター
========================================================================== */
.site-footer {
border-top:1px solid #ccc;
}
.footer{
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-direction: column;
}
.footer__info{
}
.footer__info__logo{
}
.footer__info__logo img{
max-height:60px;
}
.footer__info__name{
margin-top: var(--space-8);
font-size:1.8rem;
line-height:1.2;
font-weight:700;
}
.footer__info__add{
margin-top: var(--space-5);
font-size:1.5rem;
}
.footer__info__licence{
margin-top: var(--space-5);
list-style: disc;
padding-left: 20px;
}
.footer__info__licence li{
font-size:1.4rem;
color:#666;
}
.footer__sitemap{
margin-top: calc(var(--space-unit) * 10);
}
.footer__sitemap dl{
}
.footer__sitemap dl dt{
margin-bottom:1em;
}
.footer__sitemap dl dt a{
display:block;
border-bottom:1px solid #ddd;
padding-bottom:0.75em;
line-height:1.2;
}
.footer__sitemap dl dd{
display:block;
margin-top:0.25em;
}
.footer__sitemap dl dd a{
display:block;
font-size:1.5rem;
line-height:1.2;
position:relative;
}
.footer__sitemap dl dd a:before{
content:"-";
display:inline-block;
margin-right:0.25em;
}
.copyright {
font-size: 1.5rem;
text-align: center;
background-color: var(--color-primary);
color: #fff;
padding:1em 0;
}
/* --- タブレット (768px以上) --- */
@media (min-width: 768px) {
.footer{
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
flex-direction: row;
}
.footer__info{
width:40%;
}
.footer__sitemap{
width:55%;
margin-top:0;
}
}
/* --- PC (1200px以上) --- */
@media (min-width: 1200px) {
}
/* ==========================================================================
トップページ
========================================================================== */
/* --- 共通 --- */
.info-box {
background-color: #f7f7f7;
}
.info-box h4 {
background-color: var(--color-primary);
color: #fff;
font-weight: 700;
padding: var(--space-3) calc(var(--space-unit) * 10) var(--space-3) var(--space-5);
display: inline-block;
-webkit-clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
clip-path: polygon(0 0, 100% 0, 92% 100%, 0 100%);
font-size: 1.5rem;
}
.info-box ul {
font-size: 1.4rem;
line-height:1.4em;
padding: var(--space-5);
list-style: none;
}
.info-box ul li {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
margin-bottom:0.5em;
}
.info-box ul li .fa-circle-check {
margin-right: 0.5em;
/* アイコンとテキストの間の余白 */
margin-top: 0.2em;
/* アイコンの垂直位置を微調整（任意） */
}
.page-content {
padding-top: calc(var(--space-unit) * 30); /* 48px相当 */
padding-bottom: calc(var(--space-unit) * 30); /* 48px相当 */
}
/* --- メインイメージ --- */
.main-visual {
width: 100%;
background-color:var(--color-primary);
}
.main-visual__movie-wrap {
position: relative;
line-height: 0;
}
.main-visual__movie {
width: 100%;
height: auto;
aspect-ratio: 3 / 2;
object-fit: cover;
}
.main-visual__cont {
background-color:#fff;
width: 90%;
padding: var(--space-15);
margin-left: auto;
margin-right: auto;
transform: translateY(-30px);
}
.main-visual__subcopy {
font-family: var(--font-oswald);
font-weight: 700;
/*font-size: calc(2rem * (1 - 0.15));*/
font-size:1.5rem;
line-height: 1.5;
color:var(--color-primary);
}
.main-visual__maincopy {
font-weight: 900;
/*font-size: calc(6rem * (1 - 0.3));*/
font-size:4rem;
line-height: 1.3;
margin-top: 5px;
color:var(--color-primary);
}
.main-visual__text {
font-size:1.4rem;
font-weight: 500;
margin-top: 20px;
text-align: justify;
/*font-size: calc(1.8rem * (1 - 0.15));*/
color:var(--color-text);
}
.kerning {
letter-spacing: -0.5em;
}
/* --- 768px以上（タブレット・PC表示） --- */
@media (min-width: 768px) {
.main-visual {
height: calc(100vh - 60px);
position: relative;
display: flex;
align-items: flex-end; /* 元のレイアウトに戻す */
background-color: transparent; /* 背景色をリセット */
}
/* 動画ラッパーを絶対配置で背景にする */
.main-visual__movie-wrap {
z-index: 1;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.main-visual__movie {
height: 100%; /* 高さをコンテナに合わせる */
aspect-ratio: auto;
object-fit: cover; /* 画面いっぱいに広がるように設定 */
}
.main-visual__movie-wrap::before {
z-index: 2;
display: block;
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.3) 100%);
}
/* テキストを動画の前面に配置 */
.main-visual__cont {
z-index: 3;
position: relative; /* z-indexを有効化 */
padding: 0; /* スマホ用のpaddingをリセット */
margin-left: 7.8125%;
margin-right:0;
margin-bottom: 150px;
text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5); /* 影を再度適用 */
background-color:transparent;
width:100%;
transform: none;
}
/* フォントサイズなどをPC用に調整 */
.main-visual__subcopy {
font-size: 2rem;
color:#FFF;
}
.main-visual__maincopy {
font-size: 6rem;
margin-top: calc(var(--space-unit) * 6);
color:#FFF;
}
.main-visual__text {
font-size: 1.8rem;
text-align: left;
margin-top: calc(var(--space-unit) * 8);
color:#fff;
}
}
/* --- 1200px以上 --- */
@media (min-width: 1200px) {
.main-visual {
height: calc(100vh - 100px);
}
}
/* スクロールダウン */
.scrollbar {
display:none;
z-index: 3;
position: absolute;
right: 50px;
bottom: 0;
height: 300px;
}
.scrollbar__text {
display: inline-block;
position: absolute;
bottom: 0;
padding: 10px 10px 60px;
color: #fff;
font-size: 12px;
font-family: var(--font-oswald);
line-height: 1;
letter-spacing: 0.2em;
text-transform: uppercase;
writing-mode: vertical-lr;
left: 50%;
transform: translateX(-50%);
}
.scrollbar__boder {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 1px;
}
.scrollbar__boder::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 1px;
height: 50px;
background: #fff;
}
.scrollbar__boder::before {
content: "";
position: absolute;
bottom: 0;
left: -4px;
width: 8px;
height: 8px;
border-radius: 50%;
background: #fff;
animation: circlemove 3s ease-in-out infinite, circlemovehide 3s ease-out infinite;
}
@keyframes circlemove {
0% {
bottom: 45px;
}
100% {
bottom: 0px;
}
}
@keyframes circlemovehide {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
80% {
opacity: 0.9;
}
100% {
opacity: 0;
}
}
@media (min-width: 768px) {
.scrollbar {
display:block;
}
.scrollbar__text {
padding: 10px 10px 110px;
}
.scrollbar__boder::after {
height: 100px;
}
@keyframes circlemove {
0% {
bottom: 95px;
}
100% {
bottom: 0px;
}
}
}
/* JavaScriptによって追加されるspanタグへのスタイル */
.js-typing span, .js-typing br {
opacity: 0; /* 最初は透明にする */
visibility: hidden; /* 表示を隠す */
-webkit-animation: fadeIn 0.8s ease forwards;
animation: fadeIn 0.8s ease forwards; /* アニメーションを適用 */
}
@-webkit-keyframes fadeIn {
to {
opacity: 1;
visibility: visible;
}
}
@keyframes fadeIn {
to {
opacity: 1;
visibility: visible;
}
}
/* --- 私たちの想い --- */
#about {
background: url(../images/about_bg.jpg) no-repeat center center/cover;
position: relative;
overflow: hidden;
}
#about::before {
content: "";
position: absolute;
top: 100px;
display: inline-block;
width: 2620px;
height: 167px;
background: url(../images/about_flowing.png) repeat-x center/contain;
z-index: 1;
animation: marquee-left 100s linear infinite;
}
@keyframes marquee-left {
100% {
transform: translateX(-100%);
}
}
.about {
position: relative;
z-index: 2;
display: flex;
flex-direction: column-reverse;
}
.about__tmb {
position: relative;
}
.about__tmb img{
}
.about__tmb__name {
position: absolute;
bottom: 0;
right: 0;
padding: 0.5em;
background-color: rgba(255, 255, 255, 0.9);
font-size: 2rem;
line-height: 1;
text-align: center;
display: flex;
align-items: center;
color:var(--color-primary);
}
.about__tmb__name span {
display: block;
font-size: 1.2rem;
padding-right: 0.5em;
}
.about__cont {
margin-top: calc(var(--space-unit) * 10); /* Fixed: Added missing semicolon */
}
.about__ttl {
font-family: var(--font-oswald);
font-size: calc(2rem * (1 - 0.2));
font-weight: 700;
vertical-align: middle;
display: flex;
align-items: center;
color:var(--color-primary);
}
.about__ttl span {
display: inline-block;
font-family: var(--font-sans);
font-size: calc(1.4rem * (1 - 0.2));
font-weight: 600;
color: #666;
position: relative;
}
.about__ttl span::before {
content: "";
display: inline-block;
width: 10px;
height: 1px;
background-color: #666;
margin: 0 10px;
vertical-align: middle;
}
.about__copy {
font-family: var(--font-serif);
font-size: calc(3.5rem * (1 - 0.2));
font-weight: 700;
line-height: 1.5;
color:var(--color-primary);
margin-top:10px;
}
.about__txt {
margin-top:10px;
font-size:1.5rem;
line-height: 1.8em;
}
.about .btn {
margin-top:32px;
}
@media (min-width: 768px) {
.about {
flex-direction: row;
justify-content: space-between;
align-items: flex-start;
}
.about__tmb {
width: 40%;
}
.about__tmb__name {
padding: 0.75em 1.5em;
font-size: 2.5rem;
display: block;
}
.about__tmb__name span {
font-size: 1.4rem;
margin-bottom: 0.75em;
padding-right: 0;
}
.about__cont {
width: 55%;
}
.about__ttl {
font-size: 2rem;
}
.about__ttl span {
font-size: 1.4rem;
}
.about__copy {
font-size: 3.5rem;
margin-top: var(--space-5);
}
.about__txt {
font-size:1.6rem;
line-height: 2em;
margin-top: var(--space-5);
}
.about .btn {
margin-top: calc(var(--space-unit) * 10);
}
}
@media (min-width: 1200px) {
.about {
align-items: center;
}
}
/* --- 事業内容 --- */
#works {
background: var(--color-primary) url(../images/works_bg.jpg) no-repeat center center/cover;
overflow: hidden;
}
#works .title-lg,
#works .title-lg + p {
color: #fff;
}
.works {
margin-top: var(--space-15);
}
.works__card {
display: block;
color: #fff;
position: relative;
overflow: hidden;
transition: transform 0.6s ease, box-shadow 0.6s ease;
}
.works__card:hover{
transform: translateY(-10px);
box-shadow: 0 20px 30px rgba(0,0,0,0.3);
background-color: rgba(000,000,000,0.2);
opacity: 1;
}
.works__card__tmb {
overflow:hidden;
}
.works__card__cont {
text-align: center;
padding:20px;
}
.works__card__cont h3 {
font-size: calc(2.2rem * (1 - 0.15));
font-weight: 700;
line-height: 1.2em;
position: relative;
z-index: 2;
}
.works__card__cont p {
font-size: 1.4rem;
text-align: left;
margin-top:10px;
}
.works__card__cont .btn {
display: inline-block;
border: 1px solid #fff;
margin-top:16px;
font-size: 1.4rem;
padding: 10px 10px;
}
.works__card__cont .btn span {
color: #fff;
}
.works__card__cont .btn:hover span {
color: var(--color-primary);
}
.works__card__cont .bgskew::before {
background: #fff;
}
/* ボタンのホバーはカード自体へのホバーで制御 */
.works__card:hover .btn span {
color: var(--color-primary);
}
.works__card:hover .bgskew::before {
animation: skewanime .5s forwards;
}
@media (min-width: 768px) {
.works__card__cont {
padding: var(--space-8) var(--space-8);
}
.works__card__cont h3 {
font-size: 2.2rem;
}
.works__card__cont p {
font-size: 1.5rem;
margin-top: var(--space-5);
}
.works__card__cont .btn {
margin: var(--space-8) auto 0;
padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 10);
}
}
@media (min-width: 1440px) {
.works {
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.works .grid {
max-width: 1440px;
margin: 0 auto;
}
}
/* --- 当社で活躍中の方 --- */
#people {
background: #fff url(../images/people_bg.jpg) no-repeat center bottom/cover;
}
.people__card {
display: block;
background-color: #fff;
position: relative;
transition: transform 0.6s ease;
box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
}
.people__card:hover{
transform: scale(1.05);
z-index: 10;
box-shadow: 0px 10px 30px 0px rgba(0, 0, 0, 0.1);/*[左右のズレ] [上下のズレ] [ぼかし] [広がり] [色]*/
}
.people__card:hover .people__card__cont__ttl {
display:inline;
color:#fff;
background-color: var(--color-primary);
}
.people__card__tmb {
overflow: hidden;
}
.people__card__cont {
padding: 20px;
}
.people__card__cont__ttl {
font-size: calc(2rem * (1 - 0.15));
font-weight: 700;
line-height: 1.5;
color: var(--color-primary);
transition: background-color 0.6s ease;
}
.people__card__cont__ttl br{
display:none;
}
.people__card__cont__data {
margin-top: 10px;
font-size: 1.4rem;
color: #666;
}
.people__card__cont__tag {
margin-top: 10px;
display: flex;
flex-wrap: wrap;
gap: 3px;
}
.people__card__cont__tag li {
background-color: var(--color-primary);
color: #fff;
font-size: 1rem;
font-weight: 500;
line-height: 1;
padding: 0.75em 1em;
}
.people__card__link {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
border: none;
background: none;
padding: 0;
}
@media (min-width: 768px) {
.people__card__cont {
padding: var(--space-8);
}
.people__card__cont__ttl {
font-size: 2rem;
}
.people__card__cont__ttl br{
display:block;
}
.people__card__cont__data {
font-size: 1.5rem;
margin-top: var(--space-3);
}
.people__card__cont__tag {
margin-top: var(--space-5);
}
.people__card__cont__tag li {
font-size: 1.2rem;
}
}
/* --- People Modal --- */
/* 全体 */
.people-modal .modal__container {
border: 3px solid var(--color-primary);
padding: 0;
}
.people-modal .modal__header{ padding: 30px 0;}
.people-modal .modal__content{ padding: 30px 0;}
.people-modal__inner {
width: 90%;
margin-inline: auto;
}
/* ヘッダー: サムネイル + キャッチコピー */
.people-modal .modal__header {
background: #f7f7f7 url(../images/people_grid_bg.jpg);
}
.people-modal__cont {
text-align:center;
}
.people-modal__cont .people__card__cont__ttl {
font-size: calc(2.5rem * (1 - 0.2));
margin-top:20px;
}
.people-modal__cont .people__card__cont__data {
margin-top:10px;
}
.people-modal__cont .people__card__cont__tag {
margin-top:10px;
justify-content: center;
}
/* メインコンテンツ */
.people-modal__inner .people-modal__ttl:first-child {
margin-top: 0;
}
.people-modal__ttl {
margin-top:20px;
font-size: calc(2rem * (1 - 0.15));
font-weight: 700;
color:var(--color-primary);
}
.people-modal__txt {
margin-top:20px;
font-size: 1.5rem;
line-height: 1.6em;
}
.people-modal__txt p{
margin-top: var(--space-2);
}
/* フッター: ボタン */
.people-modal .btn {
cursor: pointer;
}
/* --- レスポンシブ (768px以上) --- */
@media (min-width: 768px) {
/* 全体 */
.people-modal .modal__container {
border: 5px solid var(--color-primary);
}
/* ヘッダー */
.people-modal__flex {
display: flex;
align-items: center;
text-align:center;
}
.people-modal__tmb,
.people-modal__cont {
width: 50%;
}
.people-modal__cont {
}
.people-modal__cont .people__card__cont__ttl {
font-size: 2.5rem;
margin-top:0;
}
.people-modal__cont .people__card__cont__data {
margin-top: var(--space-3);
font-size: 1.8rem;
}
.people-modal__cont .people__card__cont__tag {
margin-top: var(--space-5);
}
.people-modal__cont .people__card__cont__tag li {
font-size: 1.2rem;
}
/* メインコンテンツ */
.people-modal__ttl {
font-size: 2rem;
margin-top: var(--space-5);
}
.people-modal__txt {
font-size: 1.6rem;
margin-top: var(--space-5);
}
}
@media (min-width: 1200px) {
.people-modal .modal__header{ padding: var(--space-10) 0;}
.people-modal .modal__content{ padding: var(--space-10) 0;}
.people-modal__inner {
width: 100%;
max-width: 880px;
}
}
/* --- お知らせ --- */
#news {
background-color: var(--color-bg-light);
}
#news .inner {
padding-block: var(--space-20);
}
.news-wrap__right {
margin-top: 20px;
}
.news-wrap__left {
text-align: center;
}
.news-wrap__left h2 {
font-size: calc(3rem * (1 - 0.2));
font-weight: 700;
line-height: 1;
color: var(--color-primary);
}
.news-wrap__left h2 span {
font-family: var(--font-oswald);
font-size: 1.8rem;
display: block;
margin-bottom: 10px;
}
.news-wrap__left a {
display: inline-block;
position: relative;
text-decoration: none;
font-size: 1.5rem;
font-weight: 500;
line-height: 1;
padding-bottom: 0.5em;
margin-top:15px;
}
.news-wrap__left a::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background-color: #aaa;
/* transformとtransitionの記述を現代化 */
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.news-wrap__left a:hover::after {
transform: scaleX(1);
}
/* --- レスポンシブ (768px以上) --- */
@media (min-width: 768px) {
#news .inner {
padding-block: var(--space-20);
}
.news-wrap {
display: flex;
align-items: center;
}
.news-wrap__left {
width: 30%;
text-align: left;
}
.news-wrap__left h2 {
font-size:3rem;
}
.news-wrap__left h2 span {
margin-bottom: var(--space-3);
}
.news-wrap__left a {
margin-top: var(--space-5);
}
.news-wrap__right {
width: 70%;
margin-top: 0;
}
}
/* --- 人材をお探しの企業担当者様へ --- */
#partner {
background-image: url(../images/partner_bg.jpg);
}
.partner__grid {
display: flex;
flex-direction: column-reverse;
}
.partner__grid__tmb {
margin-top: 20px;
}
.partner__grid__cont h2 {
font-size: calc(3rem * (1 - 0.2));
font-weight: 700;
line-height: 1.2;
border-bottom: 1px solid #ddd;
padding-bottom: 0.5em;
display: flex;
align-items: center;
color: var(--color-primary);
}
.partner__grid__cont h2 img {
width: 50px;
flex-shrink: 0;
margin-right: 20px;
}
.partner__grid__cont p {
margin-top: 20px;
}
.partner__grid__cont .info-box{
margin-top: 20px;
}
.partner__grid__cont a.btn {
margin-top: var(--space-10);
}
/* --- レスポンシブ (768px以上) --- */
@media (min-width: 768px) {
.partner__grid {
flex-direction: row; /* 横並びに変更 */
justify-content: space-between;
align-items: flex-start;
gap: 5%; /* width指定の代わり gapで余白を管理 */
}
.partner__grid__tmb {
flex: 0 0 45%; /* flex-basisで幅を指定 */
margin-top: 0;
}
.partner__grid__cont {
flex: 0 0 50%; /* flex-basisで幅を指定 */
}
.partner__grid__cont h2 {
font-size: 3rem;
}
.partner__grid__cont p {
margin-top: var(--space-7);
}
.partner__grid__cont .info-box{
margin-top: var(--space-7);
}
}
/* --- レスポンシブ (1200px以上) --- */
@media (min-width: 1200px) {
.partner__grid {
align-items: center; /* 不要なベンダープレフィックスを削除 */
}
}
/* --- 採用情報 --- */
.recruit {
display: flex;
background-color: #000;
flex-direction: column-reverse;
}
.recruit__cont {
background: #000 url(../images/recruit_bg.jpg) no-repeat center center/cover;
color: #fff;
display: flex;
align-items: center;
}
.recruit__cont div {
width: 90%;
margin-inline: auto;
padding-block: 50px;
}
.recruit__ttl {
font-family: var(--font-oswald);
font-size: calc(2rem * (1 - 0.2));
font-weight: 700;
vertical-align: middle;
display: flex; /* 不要なベンダープレフィックスを削除 */
align-items: center; /* 不要なベンダープレフィックスを削除 */
}
.recruit__ttl span {
display: inline-block;
font-family: var(--font-sans);
font-size: calc(1.4rem * (1 - 0.2));
font-weight: 600;
position: relative;
}
.recruit__ttl span:before {
content: "";
display: inline-block;
width: 10px;
height: 1px;
background-color: #666;
margin: 0 10px;
vertical-align: middle;
}
.recruit__copy {
font-size: calc(4rem * (1 - 0.2));
font-weight: 700;
line-height: 1.5;
margin-top: 20px;
color: #fff;
}
.recruit__copy br {
display: none;
}
.marked-text {
display: inline-block;
}
.char-with-dot {
position: relative;
display: inline-block;
}
.char-with-dot::before {
content: '';
position: absolute;
top: -4px;
left: 50%;
transform: translateX(-50%);
width: 4px;
height: 4px;
background-color: white;
border-radius: 50%;
}
.recruit__txt {
font-size: 1.5rem;
margin-top: 20px;
}
.recruit ul {
margin-top: 20px;
}
.recruit ul li {
margin-top: 10px;
}
.recruit ul li a {
color: #fff;
border: 1px solid #fff;
border-radius: 5px;
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
position: relative;
overflow: hidden;
z-index: 1;
transition: color 0.4s ease;
}
.recruit ul li a span {
position: relative;
z-index: 2;
}
.recruit ul li a span img{
display:inline-block;
max-height:20px;
vertical-align: sub;
-webkit-filter: brightness(0) invert(1);
filter: brightness(0) invert(1);
}
.recruit ul li a:hover span img{
-webkit-filter: none;
filter: none;
}
.recruit ul li a::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #fff;
z-index: -1;
transform: translateX(-100%);
transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1);
}
.recruit ul li a:hover::before {
transform: translateX(0);
}
.recruit ul li a:hover {
color: var(--color-primary);
}
.recruit ul li a:hover {
animation: jelly-bounce 0.5s;
}
.recruit__tmb {
background: url(../images/recruit_tmb.jpg) no-repeat center center/cover;
aspect-ratio: 960 / 640;
}
/* --- レスポンシブ (768px以上) --- */
@media (min-width: 768px) {
.recruit {
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.recruit__cont {
width: 60%;
}
.recruit__cont div {
padding-block: var(--space-30);
}
.recruit__ttl {
font-size: 2rem;
}
.recruit__ttl span {
font-size: 1.4rem;
}
.recruit__copy {
font-size: 4rem;
margin-top: var(--space-10);
}
.recruit__copy br {
display: block;
}
.char-with-dot::before {
top: -8px;
width: 8px;
height: 8px;
}
.recruit__txt {
font-size: 1.6rem;
margin-top: var(--space-8);
}
.recruit ul {
margin-top: var(--space-8);
}
.recruit ul li {
margin-top: var(--space-2);
}
.recruit__tmb {
width: 40%;
aspect-ratio: auto;
align-self: stretch; /* 高さをコンテナに合わせる */
}
}
@media (min-width: 1200px) {
.recruit__cont {
width: 50%;
}
.recruit__cont div {
max-width: 600px;
}
.recruit__tmb {
width: 50%;
}
}
/* ==========================================================================
下層ページ
========================================================================== */
/* --- 共通 --- */
/* --- 事業内容 --- */
.bg-works {
background: url(../images/works/geometry_bg.jpg) center/cover no-repeat;
}
.works-item {
display: flex;
flex-direction: column-reverse;
gap: var(--space-10);
}
.works-item__ttl {
margin-bottom: var(--space-10);
}
.works-item__catch {
font-size: calc(2.5rem * (1 - 0.2));
line-height: 2;
font-weight: 700;
}
.works-item__catch__obi {
background-color: var(--color-primary);
color: #fff;
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
padding: 0.15em;
}
.works-item__txt {
font-size: 1.5rem;
margin-top: 15px;
}
.works-item__cont .info-box {
background-color: #fff;
margin-top: 15px;
}
/* --- レスポンシブ (768px以上) --- */
@media (min-width: 768px) {
.works-item {
flex-direction: row-reverse;
align-items: start;
justify-content: space-between;
gap: 5%;
}
.works-item--reverse {
flex-direction: row;
}
.works-item__tmb {
flex: 0 0 45%;
}
.works-item__cont {
flex: 0 0 50%;
}
.works-item__catch {
font-size: 2.5rem;
}
.works-item__txt {
font-size: 1.6rem;
margin-top: var(--space-5);
}
.works-item__cont .info-box {
background-color: #fff;
margin-top: var(--space-5);
}
}
/* --- レスポンシブ (1200px以上) --- */
@media (min-width: 1200px) {
.works-item {
align-items: center;
}
}
/* --- 会社概要 --- */
/* 代表メッセージ */
.message-item {
width: 100%;
}
.message-item__tmb img {
display: block;
margin-inline: auto;
}
.message-item__cont {
margin-top: 30px;
}
.message-item__catch {
font-family: var(--font-serif);
font-size: calc(3rem * (1 - 0.2));
line-height: 1.6em;
font-weight: 700;
color:var(--color-primary);
}
.message-item__txt {
font-size: 1.5rem;
line-height: 2em;
text-align: justify;
margin-top:20px;
}
.message-item__name {
margin-top:20px;
font-size: 1.2rem;
font-weight: 700;
display: flex;
align-items: baseline;
gap: 0.5em;
color:var(--color-primary);
}
.message-item__name span {
font-family: var(--font-serif);
font-size: calc(2.5rem * (1 - 0.2));
}
/* --- レスポンシブ (768px以上) --- */
@media (min-width: 768px) {
.message-item {
display: grid;
grid-template-columns: 35fr 60fr;
gap: 5%;
align-items: start;
}
.message-item__cont {
margin-top: 0;
}
.message-item__catch {
font-size: 3rem;
line-height: 1.6em;
}
.message-item__txt {
margin-top: var(--space-5);
font-size: 1.6rem;
}
.message-item__name {
margin-top: var(--space-5);
font-size: 1.4rem;
}
}
/* --- レスポンシブ (1200px以上) --- */
@media (min-width: 1200px) {
}
/* 会社概要 */
.table-stacked--company th {
background-color: var(--color-primary);
color: #fff;
}
/* --- 採用情報 --- */
/* 私たちについて*/
.recruit-point{
width:100%;
border:1px solid #ddd;
}
.recruit-point--reverse{
flex-direction: row-reverse;
}
.recruit-point__tmb{}
.recruit-point__cont{
padding: 20px;
text-align:center;
}
.recruit-point__ttl{
font-size: calc(2.4rem * (1 - 0.2));
line-height: 2;
font-weight:700;
text-align:center;
padding-bottom:0.25em;
color:var(--color-primary);
border-bottom:1px solid var(--color-primary);
display:inline;
box-decoration-break: clone;
-webkit-box-decoration-break: clone;
}
.recruit-point__ttl span{
display:block;
font-family: var(--font-oswald);
font-size:1.2rem;
font-weight:700;
line-height:1;
border:1px solid var(--color-primary);
color:var(--color-primary);
border-radius: 100px;
padding:0.75em 0.5em;
text-align:center;
max-width:100px;
margin:0 auto 8px auto;
}
.recruit-point__txt{
font-size:1.5rem;
margin-top: 20px;
color:#444;
text-align:left;
}
.recruit-point__txt ul{}
.recruit-point__txt ul li{
margin-bottom:10px;
}
.recruit-point__txt ul li span{
color:var(--color-primary);
font-weight:700;
}
@media (min-width: 768px) {
/* 私たちについて*/
.recruit-point{
border:none;
width:100%;
display:flex;
justify-content: space-between;
}
.recruit-point--reverse{
flex-direction: row-reverse;
}
.recruit-point__tmb{
width:40%;
}
.recruit-point__cont{
margin-top: var(--space-5);
padding:0;
width:55%;
text-align:left;
}
.recruit-point__ttl{
font-size:2.4rem;
}
.recruit-point__ttl span{
margin:0 0 var(--space-4) 0;
}
.recruit-point__txt{
font-size:1.5rem;
line-height:1.8;
margin-top: var(--space-6);
}
}
/* 求人情報一覧*/
.accordion--recruit{
border-radius: 0;
}
.accordion--recruit .accordion__title {
font-size: calc(2.2rem * (1 - 0.2));
}
.accordion--recruit .accordion__body .title-sm{
padding: var(--space-4);
font-size:1.8rem;
}
.accordion--recruit .accordion__head {
background-color:#fff;
border:1px solid var(--color-primary);
padding: 20px;
color:var(--color-primary);
}
.accordion--recruit.accordion.is-open .accordion__head {
background-color: var(--color-primary);
}
.accordion--recruit.accordion.is-open .accordion__head .accordion__title {
color:#fff;
}
.accordion--recruit.accordion.is-open .accordion__head::before,
.accordion--recruit.accordion.is-open .accordion__head::after {
background-color: #fff;
}
.accordion--recruit .accordion__body{
font-size:1.5rem;
padding: 20px;
}
.accordion--recruit .title-sm{
background-image:none;
text-shadow: none;
color:var(--color-primary);
border-top:1px solid var(--color-primary);
border-bottom:1px solid var(--color-primary);
}
@media (min-width: 768px) {
.accordion--recruit .accordion__title {
font-size: 2.2rem;
}
}
.job-point div{
background-color:#f7f7f7;
padding:1em;
border-radius: 10px;
}
.job-point div h5{
color: var(--color-primary);
font-size:1.8rem;
text-align:center;
font-weight:700;
}
.job-point p{
font-size:1.5rem;
margin-top:var(--space-1);
}
.list-disc {
}
.list-disc li{
}
.list-disc li:before {
content: "";
width: 5px;
height: 5px;
display: inline-block;
background-color: var(--color-primary);
border-radius: 50%;
vertical-align: middle;
margin-right: 0.5em;
}
/* --- お知らせ --- */
.CMS_box{}
.CMS_info{
display:flex;
align-items: center;
padding:var(--space-5);
background-color:var(--color-bg-light);
}
.CMS_info_time{
font-family: var(--font-oswald);
font-size:1.4rem;
line-height:1;
}
.CMS_info a{
display:inline-block;
margin-left:10px;
}
.CMS_ttl{
margin-top: var(--space-5);
}
.CMS_kiji table{
}
.CMS_kiji td,
.CMS_kiji th{
border-width: revert-layer;
padding: revert-layer;
}
.CMS_kiji ul,
.CMS_kiji ol{
padding: 0 0 0 20px;
}
.CMS_kiji ul {
list-style: disc;
}
.CMS_kiji ol {
list-style: revert;
}
.CMS_kiji img{
text-align:center;
margin-left:auto;
margin-right:auto;
}
@media (min-width: 768px) {
}
/* --- お問合せ --- */
.privacy-box{
margin-top: var(--space-10);
border:1px solid #ddd;
padding:var(--space-5);
height:300px;
overflow-y:scroll;
font-size:1.4rem;
}
.privacy-box__ttl{
background-color:var(--color-bg-light);
color: var(--color-primary);
padding:1em;
font-weight:700;
margin-top: var(--space-5);
margin-bottom: var(--space-5);
}