@charset "UTF-8";
@import url("grid.css");

/* 画像とリンクの基本設定 */
img {
    max-width: 100%;
    height: auto;
}
a {
    display: block;
    color: #333;
    text-decoration: none;
}
a:hover {
    color: #999;
}
a img:hover {
    opacity: 0.8;
}

/* 共通スタイル */
.blueback {
    background-color: #00296b;
    color: #fff;
    padding: 1rem;
    font-size: 20px;
}
h2.blueback {
    text-align: center;
}

.center-text {
  text-align: center; /* 中央揃え */
  margin: 20px 0;     /* 上下の余白 */
}

.boarderleft {
    padding-left: 7px;
    border-left: 10px solid #191970;
}

/* 共通のスタイル */
.boarderleft2,
.boarderleft3,
.boarderleft4 {
    display: block;           /* ブロック要素 */
    text-align: center;       /* 中央揃え */
    margin: 10px auto;        /* 上下マージンを少なくして中央配置 */
    font-size: 2.5rem;        /* 文字サイズ */
    color: black;             /* フォント色 */
    border-bottom: 3px solid #003366;  /* 下線 */
    padding-bottom: 5px;      /* 下線と文字の間に余白 */
    max-width: 65%;           /* 幅を親要素に合わせる */
    box-sizing: border-box;   /* パディングを含む幅の計算 */
}

/* boarderleft3のスタイル */
.boarderleft3 {
    display: inline-block;    /* インラインブロックで中央揃え */
    border-left: 5px solid #000; /* 左ボーダー */
    padding-left: 10px;       /* ボーダーと文字の間の余白 */
}

/* boarderleft4のスタイル */
.boarderleft4 {
    margin: 40px auto;        /* 上部に余白を追加し、左右の自動マージンで中央配置 */
}

.indent {
    text-indent: 2rem;
}
.underline {
    border-bottom: 3px solid #003399;
    padding-bottom: 0.5rem;
}
.center {
    text-align: center;
}

/* マップコンテナ */
.map-container {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
}

/* ヘッダー */
.head {
    display: flex;
    padding-top: 1rem;
}
.head h1, .telbox {
    padding-top: 1rem;
}
.small {
    font-size: 14px;
}
.telbox {
    margin-left: auto;
    font-size: 25px;
    text-align: center;
}

/* メニュー */
.menu {
    background-color: #00296b;
}
nav ul {
    display: flex;
    justify-content: space-around;
    list-style: none;
    margin: 0;
}
nav li {
    flex: 1;
}
nav li a {
    position: relative;
    color: #fff;
    padding: 1rem;
    text-align: center;
}
nav a:hover {
    background-color: #0066CC;
}
nav li a::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s, left 0.3s;
}
nav li a:hover::before {
    width: 100%;
    left: 0;
}
.nav-translation {
    display: block;
    font-size: 12px;
    color: #a9a9a9;
    text-align: center;
}

/* メイン画像 */
.mainimg {
    position: relative;
}
.mainimg img {
    width: 100vw;
    display: block;
}
.mainimg h1 {
    position: absolute;
    top: 45%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 3rem;
    background-color: rgba(0, 0, 70, 0.7);
    padding: 1.5rem;
}

/* メインコンテンツ */
main {
    margin: 5rem 0;
}
#wrapper {
    width: 80%;
    margin: 0 auto;
}


/* 会社概要のスタイル */
#company-profile .profile-container {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}
#company-profile table {
    width: 50%;
    border-collapse: collapse;
    background-color: #fafafa;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}
#company-profile th, #company-profile td {
    padding: 12px 16px;
    border-bottom: 1px solid #C0C0C0;
}
#company-profile th {
    background-color: #00296b;
    color: white;
    text-align: left;
}
#company-profile td {
    color: #333;
}
#company-profile .profile-image img {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* 製品セクション */
.product-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3列の均等幅 */
    gap: 20px; /* 各アイテム間のスペース */
    padding: 5px;
    max-width: 65%; /* 横幅を全体の70%に制限 */
    margin: 0 auto; /* 中央に配置 */
    margin-top: 10px; /* 上の余白を小さく調整 */
    box-sizing: border-box; /* パディングを含む幅の計算 */
}

.product-item {
    border: 1px solid #ccc;
    padding: 15px;
    background-color: #f9f9f9;
    text-align: center;
}

.product-image {
    width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.product-description h3 {
    margin: 10px 0;
    font-size: 1.2rem;
    color: #333;
}

.product-description p {
    font-size: 0.9rem;
    line-height: 1.5;
}

.product-description h3 {
    margin: 10px 0;
    font-size: 1.5rem; /* 見出しのフォントサイズを拡大 */
    color: #2c3e50; /* 濃い目の色で目立たせる */
    font-weight: bold; /* 太字にする */
    text-transform: none; /* すべて大文字に変換 */
    letter-spacing: 1px; /* 文字間隔を広げる */
    border-bottom: 2px solid #3498db; /* 下線を追加して強調 */
    padding-bottom: 5px; /* 下線との間に余白を追加 */
}

.product-description p {
    font-size: 1.1rem; /* 文章のフォントサイズを拡大 */
    line-height: 1.8; /* 行間を広げて読みやすくする */
    color: #34495e; 
     margin-bottom: 0px/* 落ち着いた色で視認性向上 */
}

.center-text {
    text-align: center; /* 中央寄せ */
    margin-bottom: 20px; /* 下部余白の調整（お好みで調整可能） */
}

/* フッター */
footer {
    background-color: #00296b;
    padding: 2rem 0;
    color: #fff;
}
footer h5 {
    border-bottom: 2px solid #fff;
}

/* コピーライト */
.copyright {
    text-align: center;
    background-color: #fff;
    padding: 1rem 0;
}

/* ページトップボタン */
#pagetop {
    position: fixed;
    bottom: 15px;
    right: 15px;
}
#pagetop a {
    background: #003399;
    color: #fff;
    width: 50px;
    padding: 10px 5px;
    text-align: center;
}
#pagetop a:hover {
    background: #3366FF;
}

/* メディアクエリ */
@media screen and (min-width: 768px) {
    #open, #close {
        display: none !important;
    }
    #navi {
        display: block !important;
    }
}
@media screen and (max-width: 768px) {
    .head {
        flex-direction: column;
        margin-bottom: 20px;
    }
    .telbox {
        margin-left: 0;
    }
    nav ul {
        flex-direction: column;
    }
    nav li {
        border-bottom: 1px solid #ccc;
    }
}