@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 {
color: #fff;
background: linear-gradient(45deg, #1a1a1a 0%, #2c3e50 100%);
padding: var(--space-30) 0;
text-align: center;
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
position:relative;
}
.page-hero__title {
font-size:4rem;
font-weight: 700;
line-height:1.2;
text-shadow: 0px 1px 3px rgba(0,0,0,0.5);
position:relative;
z-index:2;
}
.page-hero__title span{
font-family: var(--font-cinzel);
font-size:2rem;
display:block;
margin-bottom:10px;
}
/* : 大見出し */
.title-lg{
border-top:1px solid var(--color-primary);
border-bottom:1px solid var(--color-primary);
color:var(--color-primary);
font-size:2.5rem;
font-weight:700;
line-height:1.2;
text-align:center;
padding: var(--space-10) 0;
margin-bottom: var(--space-20);
}
/* : 中見出し */
.title-md{
font-size:2rem;
font-weight:700;
line-height:1.2;
border-left:5px solid var(--color-primary);
background-color:var(--color-bg-light);
color:var(--color-primary);
padding: var(--space-10);
margin-bottom: var(--space-10);
}
/* : 小見出し */
.title-sm {
font-size:2rem;
font-weight:700;
line-height:1.2;
background-color:var(--color-bg-light);
padding: var(--space-5);
margin-bottom: var(--space-5);
}
/* : 注釈 */
.title-xs {
font-size:2rem;
font-weight:700;
line-height:1.2;
border-bottom:1px solid var(--color-primary);
padding: var(--space-5);
margin-bottom: var(--space-5);
}
@media (min-width: 768px) {
/* : 大見出し */
.title-lg{
padding: var(--space-8) 0;
margin-bottom: var(--space-12);
}
/* : 中見出し */
.title-md{
padding: var(--space-5);
margin-bottom: var(--space-5);
}
}
@media (min-width: 1200px) {
}
/* 本文・リンク
===========================================================================*/
p {}
.text-link { color: var(--color-primary); text-decoration: underline; }
.text-link:hover { text-decoration: none; }
/* ボタン
===========================================================================*/
.btn {
display: inline-block;
vertical-align: middle;
color:#FFF;
background-color:var(--color-primary);
padding: var(--space-10) var(--space-10);
font-size: 1.8rem;
line-height:1.2em;
text-align: center;
transition: ease .3s;
}
.btn:hover{ opacity: 1; color:#fff; background-color:var(--color-primary-dark); }
.btn--border{ color:var(--color-primary); border:1px solid var(--color-primary); background-color:transparent;}
.btn--border:hover{ background-color:var(--color-primary); }
.btn--white{ color:#fff; border:1px solid #fff; background-color:transparent; }
.btn--white:hover{ color:var(--color-primary); background-color:#fff; }
.btn-wrapper {
text-align: center;
}
@media (min-width: 768px) {
.btn {
padding: var(--space-5) var(--space-10);
}
}
@media (min-width: 1200px) {
}
/*===========================================================================
ヘッダーとフッター (サイト固有の装飾)
===========================================================================*/
/* ヘッダー
===========================================================================*/
.site-header {
position: fixed;
top: 0;
left: 0;
z-index: 100;
width: 100%;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.site-header__inner {
background-color: #fff;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding:0 0 0 2.0833%;
transition: ease .3s;
}
.site-logo {
display:flex;
gap:10px;
align-items: center;
z-index: 130;
/*margin-left: 2.0833%;*/
}
.site-logo img {
max-height: 50px;
transition: ease .3s;
}
.site-logo h1{
color: var(--color-text-gray);
font-size:1.2rem;
}
@media (min-width: 1200px) {
.site-header__inner {
height: 100px;
padding:0 2.0833% 0 2.0833%;
}
.site-logo {
gap:20px;
}
.site-logo img {
max-height: 80px;
}
.site-logo h1{
font-size:1.4rem;
}
.site-header--fixed .site-header__inner {
height: 60px;
}
.site-header--fixed .site-logo img {
max-height: 40px;
}
}
/* フッター
===========================================================================*/
.copyright {
font-size: 1.5rem;
text-align: center;
background-color: #000;
color: #fff;
padding:var(--space-4) 0;
}
/*===========================================================================
共通
===========================================================================*/
/* ユーティリティ
===========================================================================*/
.page-content {
padding-top: var(--space-30); /* 48px相当 */
padding-bottom: var(--space-30); /* 48px相当 */
}
@media (min-width: 768px) {
}
@media (min-width: 1200px) {
}
/*===========================================================================
トップページ
===========================================================================*/
/* 共通
===========================================================================*/
.section-title{
text-align:center;
font-family: var(--font-cinzel);
font-size:3rem;
font-weight:700;
line-height:1;
}
.section-title__sub{
display:block;
font-family: var(--font-sans);
font-size:1.2rem;
font-weight:500;
line-height:1;
color: var(--color-text-gray);
margin-top:10px;
display: flex;
align-items: center;
justify-content: center;
}
.section-title__sub::before {
content: "";
display: inline-block;
width: 10px;
height: 1px;
background-color: var(--color-text-gray);
margin-right: 10px;
}
.section-title__sub::after {
content: "";
display: inline-block;
width: 10px;
height: 1px;
background-color: var(--color-text-gray);
margin-left: 10px;
}
.section-lead{
margin-top:25px;
margin-bottom:25px;
text-align:center;
font-family: var(--font-sans);
line-height:1.8;
font-size:1.5rem;
font-weight:500;
}
@media (min-width: 480px) {
}
@media (min-width: 768px) {
.section-title{
font-size:4rem;
}
.section-title__sub{
font-size:1.5rem;
margin-top:30px;
}
.section-lead{
margin-top:50px;
margin-bottom:50px;
font-size:1.6rem;
}
}
@media (min-width: 1200px) {
}
/* メインイメージ
===========================================================================*/
.main-visual {
display: flex;
flex-direction: column;
width: 100%;
background-color: #f2f2f2;
overflow: hidden;
}
.main-visual__text-area {
background: linear-gradient(45deg, #1a1a1a 0%, #2c3e50 100%);
width: 100%;
padding: 40px 5%;
display: flex;
flex-direction: column;
justify-content: center;
color: #fff;
z-index: 2;
}
.main-visual__title img {
height: auto;
max-width: 60%;
}
.main-visual__desc {
margin-top: 20px;
font-size: 1.6rem;
line-height: 1.6;
}
.main-visual__img-area {
width: 100%;
aspect-ratio: 21 / 9; /* 画像の比率を維持 */
}
.main-visual__img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.main-visual {
flex-direction: row;
position: relative;
aspect-ratio: 1200 / 600;
height: auto;
max-height:800px;
}
.main-visual__text-area {
width: 55%;
height: 100%;
padding: 0 10% 0 5%;
clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
position: relative;
z-index: 2;
}
.main-visual__title img {
width: 30vw;
max-width: 448px;
}
.main-visual__desc {
margin-top: 3vw;
font-size: 1.8vw;
line-height: 1.8;
/*white-space: nowrap;*/
}
.main-visual__img-area {
position: absolute;
top: 0;
right: 0;
width: 60%;
height: 100%;
aspect-ratio: auto;
}
.main-visual__img-area picture{
height:100%;
}
}
@media (min-width: 1200px) {
.main-visual__desc {
font-size: 1.8rem;
}
}
/* お知らせ
===========================================================================*/
#news .section-title__en{
}
#news .section-title{
font-size:3.5rem;
}
.news-header{
display:flex;
align-items: center;
flex-direction:column;
}
.news-header__wrapper{
width:100%;
}
.news-header__link{
color: var(--color-primary);
font-family: var(--font-sans);
font-size:1.4rem;
font-weight:500;
display:block;
margin-top:30px;
text-align:center;
border:1px solid var(--color-primary);
padding:10px;
}
.news-body{
margin-top:20px;
width:100%;
}
@media (min-width: 480px) {
}
@media (min-width: 768px) {
#news .section-title{
text-align:left;
font-size:3.5rem;
}
#news .section-title__sub{
display:block;
font-size:1.4rem;
margin-top:10px;
}
#news .section-title__sub::before,
#news .section-title__sub::after {
display:none;
}
.news-header{
justify-content:space-between;
flex-direction:row;
}
.news-header__wrapper{
width:15%;
}
.news-body{
margin-top:0;
width:75%;
}
.news-header__link{
display:inline-block;
text-align:left;
padding:0;
border:none;
}
}
@media (min-width: 1200px) {
}
/* 対応製品・加工技術
===========================================================================*/
#business{
background-color:#f4f5f7;
background-image:url(../images/business_bg.jpg);
background-position:top center;
background-repeat:no-repeat;
background-size:cover;
position:relative;
}
.business-deco{
position: absolute;
opacity: 0.3;
z-index: 0;
pointer-events: none;
filter: drop-shadow(10px 10px 20px rgba(0, 0, 0, 0.2));
}
.business-deco img{ width: 100px; }
.business-deco--01{ left:5%; top:30px;}
.business-deco--02{ left:10%; top:140px;}
.business-deco--03{ right:10%; top:120px;}
.business-deco--04{ right:5%; top:30px;}
#business .inner{
position:relative;
z-index:1;
}
.business-card{
display:block;
background-color:#FFF;
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}
.business-card__content{
text-align:center;
padding:30px 20px;
}
.business-card__title{
color: var(--color-primary);
font-size:1.8rem;
font-weight:700;
line-height:1.2em;
}
.business-card__text{
margin-top:15px;
font-family: var(--font-sans);
font-size:1.4rem;
font-weight:500;
line-height:1.2em;
}
.business-card__link{
display:block;
padding:0.75em;
margin-top:15px;
border:1px solid #eee;
font-family: var(--font-sans);
font-size:1.4rem;
color: var(--color-primary);
}
.business-card__link:hover{
border:1px solid var(--color-primary);
background-color:var(--color-primary);
color:#fff;
}
@media (min-width: 480px) {
}
@media (min-width: 768px) {
.business-card__content{
padding:40px 30px;
}
.business-card__title{
font-size:2rem;
}
.business-card__text{
font-size:1.5rem;
margin-top:20px;
}
.business-card__link{
margin-top:30px;
}
}
@media (min-width: 1200px) {
.business-deco {
display: block;
opacity: 1;
}
.business-deco img{ width: auto; }
.business-deco--01{ left:50px; top:80px;}
.business-deco--02{ left:200px; top:220px;}
.business-deco--03{ right:180px; top:220px;}
.business-deco--04{ right:50px; top:80px;}
}
/* 対応製品・加工技術
===========================================================================*/
#products{
background: linear-gradient(45deg, #1a1a1a 0%,#3a3a3a 100%);
}
#products .section-title,
#products .section-title__sub,
#products .section-lead{ color:#fff; }
#products .section-title__sub::before,
#products .section-title__sub::after { background-color: #fff; }
.product-card {
position: relative;
}
.product-card__request {
position: absolute;
top: 0px;
right: 0;
z-index: 10;
background-color:var(--color-primary);
color: #ffffff;
font-family: var(--font-sans);
font-size: 1.2rem;
line-height:1;
padding: 10px 10px;
display: flex;
align-items: center;
gap: 5px;
text-decoration: none;
transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.product-card__request:hover {
background-color: var(--color-primary-dark);
transform: translateY(-3px); /* 3px上に浮かす */
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* 影をつけて立体感を出す */
}
.product-card__zoom-body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
transform-origin: center center;
transition: transform 0.3s ease;
}
.product-card:hover .product-card__zoom-body {
}
.product-card__img-wrapper {
width: 100%;
aspect-ratio: 1 / 1;
overflow: hidden;
background-color: #f7f7f7;
background-image:url(../images/products/thumbnail_bg.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.product-card__img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.product-card:hover .product-card__img {
transform: scale(1.1);
}
.product-card__info {
position:absolute;
left:0;
bottom:0;
width:100%;
background-color: rgba(0,0,0,0.5);
padding: 10px 10px;
text-align: center;
flex-grow: 1;
display: flex;
align-items: center;
justify-content: center;
}
.product-card__name {
color: #ffffff;
font-size: 1.2rem;
line-height: 1.4;
font-weight: 500;
}
@media (min-width: 480px) {
}
@media (min-width: 768px) {
.product-card__request {
top: 15px;
}
.product-card__info {
padding: 15px 10px;
}
.product-card__name {
font-size: 1.4rem;
}
}
@media (min-width: 1200px) {
}
/* お問合せ
===========================================================================*/
#contact{
background-image:url(../images/content_bg.png);
background-position:center center;
background-repeat:no-repeat;
background-size:cover;
}
#contact .d-flex{
gap:20px;
flex-direction: column;
}
#contact .d-flex .btn{
}
@media (min-width: 480px) {
}
@media (min-width: 768px) {
#contact .d-flex{
flex-direction:row;
}
}
@media (min-width: 1200px) {
}
/*===========================================================================
商品案内
===========================================================================*/
/* 取り扱い商品
===========================================================================*/
.item-card{
background-color:#fff;
box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
}
.item-card__img-wrapper.thumbnail{
background-image:url(../images/products/thumbnail_bg.png);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
}
.item-card__img{}
.item-card__body{
padding:20px 10px;
}
.item-card__category{
background-color:var(--color-primary);
color:#fff;
font-family: var(--font-sans);
font-size:1.2rem;
line-height:1;
padding:5px 10px
}
.item-card__title{
font-size:1.5rem;
font-weight:600;
line-height:1.2;
margin-top:10px;
}
.item-card__text{
font-size:1.3rem;
line-height:1.4em;
margin-top:10px;
}
.item-card__btn{
border:1px solid var(--color-primary);
color:var(--color-primary);
text-align:center;
display:flex;
align-items:center;
justify-content:center;
gap:5px;
font-family: var(--font-sans);
font-size:1.4rem;
padding:5px 10px;
margin-top:15px;
}
.item-card__btn:hover{
color:#fff;
border:1px solid var(--color-primary-dark);
background-color:var(--color-primary-dark);
}
@media (min-width: 480px) {
}
@media (min-width: 768px) {
.item-card__body{
padding:30px 20px;
}
.item-card__title{
font-size:1.6rem;
margin-top:15px;
}
.item-card__text{
font-size:1.4rem;
margin-top:15px;
}
.item-card__btn{
margin-top:20px;
}
}
@media (min-width: 1200px) {
}
/*===========================================================================
会社案内
===========================================================================*/
/* 対応製品・加工技術
===========================================================================*/
.media-object--busines .media-object__content h5{
color:var(--color-primary);
font-size:1.6rem;
font-weight:600;
}
.media-object--busines .media-object__content p{
font-family: var(--font-sans);
font-size:1.4rem;
margin-top:10px;
}
.media-object--busines .media-object__content p br{
display:none;
}
@media (min-width: 480px) {
.media-object--busines { align-items: center; }
.media-object--busines .media-object__img { flex: 0 0 30%; }
}
@media (min-width: 768px) {
.media-object--busines .media-object__content h5{
font-size:1.8rem;
}
.media-object--busines .media-object__content p{
font-size:1.5rem;
}
.media-object--busines .media-object__content p br{
display:block;
}
}
@media (min-width: 1200px) {
}