@charset "UTF-8";

/* ================================================================
   共通・全体設定
   ================================================================ */

/* サブページ共通ヘッダー背景画像 */
.sub-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/plant-map.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.company-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/company-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.used-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/use-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.case-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/case-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.plant-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/plant-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.factory-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/factor-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.recruit-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/recruit-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.works-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/works-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.download-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/download-back001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.contact-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/contact-back001.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.int001-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/int-001.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.int002-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/int-002.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.int003-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/int-003.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.int004-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/int-004.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}

.int005-vew {
    margin-top: 90px;
    max-width: 1920px;
    width: 100%;
    height: 340px;
    background-image: url(../images/int-005.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: cover;
}
/* ================================================================
   recruit.html - 採用情報ページ
   ================================================================ */

.recruit-info {
    width: 100%;
    padding: 30px 60px 30px 0;
    box-sizing: border-box;
    line-height: 1.7;
}

.recruit-info th {
    width: 140px;
    position: relative;
    min-height: 90px;
    padding: 30px 20px;
    box-sizing: border-box;
    background-color: #1E5A8A;
    color: #fff;
    font-weight: 500;
    vertical-align: middle;
}

.recruit-info tr:not(:last-child) th,
.recruit-info tr:not(:last-child) td {
    border-bottom: 1px solid #ccc;
}

.recruit-info th.top-th {
    border-radius: 6px 0 0 0;
    padding-top: 40px;
}

.recruit-info th.bot-th {
    border-radius: 0 0 0 6px;
    padding-bottom: 40px;
}

.recruit-info td {
    padding: 30px 0 30px 60px;
    box-sizing: border-box;
    width: calc(100% - 140px);
}

.recruit-info td a {
    display: inline;
    text-align: left;
    color: #1E5A8A;
    text-decoration: underline;
}

.recruit-info td a:hover {
    text-decoration: none;
}

.recruit-mail-img {
    height: 20px;
}

/* 共通リスト設定 */
ul, ol {
    padding-left: 1.4em;
    line-height: 150%;
}

/* ================================================================
   コンテンツコンテナ（レイアウト）
   ================================================================ */

/* .sub-content - メインコンテンツ（company.htmlなど） */
.sub-content {
    display: flex;
    flex-direction: column;
    gap: 200px;
    max-width: 1200px;
    width: 100%;
    min-height: 300px;
    margin: 180px auto;
    padding: 80px;
    box-sizing: border-box;
    box-shadow: 0px 5px 15px 0px rgba(0, 0, 0, 0.35);
}

/* .sub-content-1 - フレックスコラム（used.htmlなど） */
.sub-content-1 {
    display: flex;
    flex-direction: column;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    min-height: 200px;
    box-sizing: border-box;
    position: relative;
}

/* howto01.html - 最後のセクション */
#used05 {
    padding-bottom: 80px;
}

/* plant.html - 最後のセクション */
#plant06 {
    padding-bottom: 80px;
}

/* .sub-content-2 - 2カラムレイアウト（plant.html, howto01.html） */
.sub-content-2 {
    display: flex;
    justify-content: space-between;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    /* min-height: 200px; */
    box-sizing: border-box;
    position: relative;
}
@media screen and (max-width: 1200px) {
    .sub-content-2 {
        padding: 0 20px;
    }
}
/* ================================================================
   メッセージエリア（テキストコンテンツ）
   ================================================================ */

.sub-about-message {
    position: relative;
    text-align: center;
    line-height: 1.7;
}

.sub-about-message.used {
    max-width: 860px;
    width: 100%;
    margin: 20px auto;
    box-sizing: border-box;
    text-align: center;
}

.sub-about-message001 {
    font-size: 105%;
    line-height: 1.7;
    font-weight: 700;
    text-align: center;
    margin: 60px auto 140px;
}

.sub-about-message001.used {
    font-size: 21.6px;
    margin-bottom: 16px;
}

.sub-about-message.conbot {
    font-size: 105%;
    line-height: 1.7;
    font-weight: 700;
    text-align: center;
    margin: 60px auto;
}

.sub-about-message.text-size-md {
    font-size: 16.8px;
    font-weight: 700;
    margin-bottom: 60px;
}
.sub-about-message.text-size-lg {
    font-size: 23.52px;
    margin: 0 auto 32px;
}
.sub-about-message.rules {
    padding: 0 20px;
    box-sizing: border-box;
}
.rules-br {
    display: none;
}
@media screen and (max-width: 1400px) {
    .rules-br {
        display: block;
    }
}
/* ================================================================
   company.html - 会社概要ページ
   ================================================================ */

.content-title {
    font-size: 24px;
    text-align: center;
    margin: 0 auto 60px;
}

.content-title span {
    display: block;
    font-size: 14px;
    margin-top: 10px;
}

.president-com {
    margin-top: 50px;
    text-align: right;
    margin-bottom: 25px;
}

.content-img {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    padding: 60px 20px;
    box-sizing: border-box;
    border: 1px solid #acacac;
}

.content-img img {
    max-width: 900px;
    width: 100%;
    height: auto;
}

.company-mess {
    width: 100%;
    margin: 0px;
    padding: 0px 60px 60px 60px;
    box-sizing: border-box;
    line-height: 1.7;
}

.company-info {
    width: 100%;
    padding: 30px 60px 30px 0;
    box-sizing: border-box;
    line-height: 1.7;
}

.company-info-img {
    margin-top: 40px;
}

.company-info th {
    width: 140px;
    position: relative;
    min-height: 90px;
    padding: 30px 20px;
    box-sizing: border-box;
    background-color: #2E2D2D;
    color: #fff;
    font-weight: 500;
    vertical-align: middle;
}

.company-info tr:not(:last-child) th,
.company-info tr:not(:last-child) td {
    border-bottom: 1px solid #ccc;
}

th.top-th {
    border-radius: 6px 0 0 0;
    padding-top: 40px;
}

th.bot-th {
    border-radius: 0 0 0 6px;
    padding-bottom: 40px;
}

.company-info td {
    padding: 30px 0 30px 60px;
    box-sizing: border-box;
    width: calc(100% - 140px);
}

/* 役職テーブル */
.officers-table {
    border: none !important;
    width: 100%;
    border-collapse: collapse;
}

.officers-table tr {
    border: none !important;
    padding: 2px 0;
}

.officers-table td {
    max-width: 120px !important;
    border: none !important;
    padding: 2px 0;
}

.officers-table td:first-child {
    padding-right: 20px !important;
    white-space: nowrap;
    width: 140px !important;
    max-width: 140px !important;
}

/* マップ（Google Maps） */
.map {
    position: relative;
    width: 100%;
    padding-top: 42.85%; /* 21:9のアスペクト比 */
    height: 0;
}

.map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* アクセス情報 */
#access {
    padding: 140px 20px 80px;
}

.access-flex {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 60px;
    max-width: 1200px;
    margin: 0 auto;
}

.access-flex-inn {
    flex: 1;
    min-width: 300px;
    padding: 0 20px;
}

.access-title {
    font-size: 42px;
    font-weight: 300;
    margin-bottom: 20px;
    text-align: center;
}

.access-text {
    letter-spacing: 1px;
    font-size: 16px;
    margin-bottom: 20px;
    line-height: 1.6;
}

.access-info {
    color: #333;
    margin-left: 20px;
    font-size: 32px;
    font-weight: 300;
    line-height: 1.4;
}

.access-info p:last-child {
    margin-top: 20px;
    font-size: 16px;
}

.about-btn {
    font-size: 24px;
    width: 240px;
    height: 46px;
    border-radius: 30px;
    background-color: #116e59;
    border: 2px solid #116e59;
    color: #fff;
    font-weight: 500;
    margin: 50px auto 0;
    -webkit-transition: all .3s;
    transition: all .3s;
}

.about-btn a {
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-btn:hover {
    background-color: #fff;
    color: #116e59;
    border: 2px solid #116e59;
}

.other-call ul {
    display: flex;
    margin-bottom: 20px;
    padding: 0;
}

.other-call ul li:first-child {
    width: 60px;
    padding: 8px 60px 8px 0px;
    /* box-sizing: border-box; */
    border-right: 1px solid #ccc;
}

.other-call ul li:last-child {
    padding: 8px 8px 8px 60px;
    padding-left: 14px !important;
    box-sizing: border-box;
}

/* 関連会社情報 */
.related-companies-flex {
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    margin-top: 60px;
    flex-wrap: wrap;
}

.related-company-item {
    display: flex;
    align-items: center;
    justify-content: right;
    gap: 60px;
    width: 100%;
}

.related-info-table {
    padding: 30px 10px;
    box-sizing: border-box;
    margin-left: 0;
    width: 50%;
    width: calc(100% - 460px);
}

.related-company-map {
    position: relative;
    width: 280px;
    height: 220px;
}

.related-company-map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    filter: grayscale(60%) contrast(100%) brightness(100%);
}

.related-info-table th {
    padding: 6px 10px;
    box-sizing: border-box;
}

.related-info-table td {
    padding: 6px 0 6px 30px;
    box-sizing: border-box;
    vertical-align: middle;
}

.related-info-table td.web-link-cell a {
    display: inline;
    width: auto;
    height: auto;
    text-align: left;
}

.related-info-table tbody {
    display: block;
    width: 100%;
}

.related-info-table tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}

#SPmode.company-info.related-info-table td ul {
    padding: 6px;
    border-bottom: 1px solid #ccc;
}

#SPmode.company-info.related-info-table td ul li:first-child {
    color: #333;
}

#SPmode.company-info.related-info-table td ul li:last-child {
    padding-left: 14px !important;
}

/* ================================================================
   plant.html - プラントページ
   ================================================================ */
   
.sub-content-2_002 {
    position: relative;
    left: 80px;
    width: 100%;
    max-width: 600px;
    height: auto;
}
@media screen and (max-width: 1400px) {
    .sub-content-2_002 {
        left: 0;
    }
}
@media screen and (max-width: 1200px) {
    .plant01.sub-content-2 {
        flex-direction: column-reverse;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
    }
}
/* プラントポイントマップ */
.plant-map {
    position: relative;
    width: 1200px;
    height: 364.5px;
    background-image: url(../images/plant-map.jpg);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    margin: 80px auto;
}
.point-1 {
    position: absolute;
    width: 70px;
    bottom: 2%;
    left: 16%;
}
.point-2 {
    position: absolute;
    width: 70px;
    bottom: 18%;
    left: 38%;
}
.point-3 {
    position: absolute;
    width: 70px;
    top: 38%;
    right: 40%;
}
.point-4 {
    position: absolute;
    width: 70px;
    top: 24%;
    right: 18%;
}
.point-5 {
    position: absolute;
    width: 70px;
    bottom: 8%;
    right: 20%;
}
.plant-height-01 {
    height: 80px;
}
@media screen and (max-width: 1200px) {
    .plant-map {
        position: relative;
        max-width: 1000px;
        width: 100%;
        height: auto;
        aspect-ratio: 1200 / 364.5;
    }
    .point-1 {
        width: 50px;
    }
    .point-2 {
        width: 50px;
        bottom: 12%;
    }
    .point-3 {
        width: 50px;
    }
    .point-4 {
        width: 50px;
    }
    .point-5 {
        width: 50px;
        bottom: 4%;
    }
}
/* プラントコンテンツ共通 */
.plant-cont001,
.plant-cont002,
.plant-cont003,
.plant-cont004 {
    width: 100%;
    margin-bottom: 40px;
    /* margin-right: 60px; */
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.plant-cont002 {
    margin-bottom: 80px;
}
.plant-cont002_001,
.plant-cont003_001 {
    margin-left: 20px;
}

/* プラント画像 */
.plant-p {
    max-width: 500px;
    width: 100%;
    height: auto;
    overflow: hidden;
}
.plant-p img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.plant-cont001_001 {
    margin-right: 80px;
}
.plant-cont004_001 {
    margin-right: 80px;
}
.plant-p-L {
    max-width: 500px;
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-right: 60px;
}
.plant-p-L img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.plant-pp {
    max-width: 400px;
    width: 100%;
    height: auto;
}
.plant-pp img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* プラントテキスト */
.plant-t1,
.plant-t1-L {
    margin: 40px auto;
    font-size: 1.6em;
    font-weight: bold;
}

.plant-t2 {
    font-size: 1.0em;
    line-height: 160%;
    margin-left: 20px;
}

.plant-t3,
.plant-t3-L {
    font-size: 1.0em;
    line-height: 160%;
}
@media screen and (max-width: 1200px) {
    .sub-content-2_002 {
        left: inherit;
    }
    .plant-cont001,
    .plant-cont002,
    .plant-cont003,
    .plant-cont004 {
        align-items: center;
        margin-bottom: 60px;
    }
    .plant-cont001_001 {
        margin-right: inherit;
    }
    .plant-cont004_001 {
        margin-right: inherit;
    }
    .plant-p-L {
        margin-right: inherit;
    }
}
/* ================================================================
   used.html - 利用例ページ
   ================================================================ */

.used01 {
    width: 100%;
    padding: 20px;
    margin: auto;
    box-sizing: border-box;
}

.used-make {
    display: flex;
    justify-content: space-between;
}

.used-car {
    display: flex;
    gap: 100px;
    /* justify-content: space-between; */
}
.used-car-img {
    max-width: 500px;
    width: 100%;
    height: auto;
}

.about-message.used {
    margin-top: 60px;
}

.about-message001-02.used {
    font-weight: 500 !important;
    font-size: 90% !important;
}

.about-message001-02.conbot {
    margin-top: 16px;
    font-size: 16.8px !important;
}

.used-sozai-flex {
    position: relative;
    display: flex;
    gap: 8px;
}

.used-sozai-img {
    position: relative;
    width: 600px;
    height: 200px;
    left: 60px;
}
@media screen and (max-width: 1480px) {
    .used-sozai-flex {
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 40px;
    }
    .used-sozai-img {
        left: 0px;
    }
    .used-car {
        margin: 0 auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        flex-direction: column-reverse;
        gap: 20px;
    }
}
.map-gif {
    position: relative;
    max-width: 1000px;
    width: 100%;
    height: auto;
    aspect-ratio: 1200 / 594;
    object-fit: cover;
    background-image: url(../images/map.gif);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
    margin: 0 auto 80px !important;
}
.map-gif-text {
    position: absolute;
    width: 100%;
    max-width: 400px;
    top: 72%; /* 1000pxの時340px → 340/1000*100 = 34% */
    left: 50%;
    transform: translateX(-50%);
    color: #116e59;
    font-size: 16px;
    text-shadow:
        2px 2px 0 #fff,
        -2px 2px 0 #fff,
        2px -2px 0 #fff,
        -2px -2px 0 #fff,
        2px 0 0 #fff,
        -2px 0 0 #fff,
        0 2px 0 #fff,
        0 -2px 0 #fff;
}

/* ミキサー車関連 */

.car-t1 {
    text-align: center;
    font-size: 1.6em;
    font-weight: bold;
    color: #C30F47;
    margin: 30px auto;
}

.car-t2 {
    font-size: 1.0em;
    line-height: 1.6;
}

/* 骨材関連 */
.used-sozai-text {
    width: 100%;
    max-width: 560px;
}
.sozai-t1 {
    width: 100%;
    max-width: 560px;
    font-size: 1.1em;
    margin: 30px 0 40px;
    font-weight: bold;
}
.sozai-t2 {
    width: 100%;
    max-width: 560px;
    font-size: 1.0em;
    margin-left: 30px;
}

/* ================================================================
   interview-01.html - インタビューページ
   ================================================================ */
.int.know-list {
    width: 100%;
    max-width: 1200px;
    height: auto;
    display: flex;
    gap: 16px;
    justify-content: center;
    margin: 180px auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}
.intv01 {
	margin: 0px;
    padding-bottom: 180px;
}
.back-color001 {
    background-color: #B4F5B5;
}
.back-color002 {
    background-color: #FFD4B8;
}
.back-color003 {
    background-color: #D4B8FF;
}
.back-color004 {
    background-color: #B8E4FF;
}
.back-color005 {
    background-color: #FFF5B8;
}

.intv01 .sub-content-int {
    margin-bottom: 0;
}

.sub-content-int {
    display: flex;
    flex-direction: column;
    gap: 200px;
    max-width: 1200px;
    width: 100%;
    min-height: 200px;
    margin: 80px auto;
    box-sizing: border-box;
    position: relative;
}

.sub-content-int-flex {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: end;
}
#INTLmode {
    display: block;
}
#INTMmode {
  display: none;
}
.sub-content-int-img {
    position: relative;
    right: -80px;
}
.sub-content-int-text {
    width: 370px;
    font-size: 1.1em;
    line-height: 160%;
    margin-left: 50px;
}
.sub-content-int-text.sub-content-int-text--w420 {
    width: 420px;
}
.int-txt {
    margin-bottom: 80px;
    
}
.int-txt h2 {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}

/* インタビュー画像エリア */
.int01s {
    width: 760px;
    height: 1065px;
    position: relative;
    background-image: url(../images/int01s.png);
    background-repeat: no-repeat;
    background-position: center bottom;
    background-size: contain;
}
.int01c-1 {
    width: 280px;
    position: absolute;
    top: 0px;
    right: 10px;
}
.int01c-2 {
    width: 280px;
    position: absolute;
    top: 450px;
    right: 470px;
}
.int01c-3 {
    width: 400px;
    position: absolute;
    top: 680px;
    right: 280px;
}
.int01c-4 {
    width: 200px;
    position: absolute;
    top: 640px;
    right: -20px;
}
@media screen and (max-width: 1400px) {
    #INTLmode {
      display: none;
    }
    #INTMmode {
        display: block;
    }
    .sub-content-int-flex {
        width: 100%;
        flex-direction: column;
    }
    .sub-content-int {
        max-width: 1000px;
        width: 100%;
        margin: 80px auto;
        padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        overflow: hidden;
    }
    .sub-content-int-text {
        width: 100%;
        margin: 0 auto;
    }
    .SPint01s {
        position: relative;
        max-width: 500px;
        width: 100%;
        height: auto;
        aspect-ratio: 900 / 550;
        object-fit: cover;
        background-image: url(../images/SPint01s.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
        /* overflow: hidden; */
    }
    .int-txt {
        margin: 32px auto;
        box-sizing: border-box;
    }
    .int-txt-cont {
        padding: 0 20px;
        box-sizing: border-box;
    }
    .int01c-1 {
        width: 46%;
        position: absolute;
        top: 0;
        bottom: inherit;
        right: -10%;
        left: inherit;
    }
    .SPint02s {
        position: relative;
        max-width: 500px;
        width: 100%;
        height: auto;
        margin-top: 80px;
        margin-right: 0;
        margin-left: auto;
        aspect-ratio: 1000 / 700;
        object-fit: cover;
        background-image: url(../images/SPint02s.png);
        background-repeat: no-repeat;
        background-position: center bottom;
        background-size: contain;
    }
    .int01c-2 {
        width: 46%;
        position: absolute;
        top: -16%; /* 親要素の高さ基準 (550pxのとき-60px: -60/550*100) */
        bottom: inherit;
        right: inherit;
        left: -6%;
    }
    .int01c-3 {
        width: 66%;
        position: absolute;
        top: 28%; /* 親要素の高さ基準 (550pxのとき80px: 80/550*100) */
        bottom: inherit;
        right: inherit;
        left: 8%;
    }
    .int01c-4 {
        width: 35.62%;
        position: absolute;
        top: 13%; /* 親要素の高さ基準 (550pxのとき40px: 40/550*100) */
        bottom: inherit;
        right: -5%;
        left: initial;
    }
}
@media screen and (max-width: 768px) {
    .sub-content-int.inner {
        padding: 0 ;
    }
}
@media screen and (max-width: 540px) {
    .SPint02s {
        margin-top: 11.5vw;
    }
}
/* ================================================================
   interview-02.html - インタビューページ
   ================================================================ */
.intv02.sub-content-int {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 1200px;
    width: 100%;
    min-height: 200px;
    margin: 80px auto;
    box-sizing: border-box;
    position: relative;
}
.intv02 .sub-content-int-text002 {
    width: 100%;
    font-size: 1.1em;
    line-height: 160%;
    margin-left: 0px;
}
.sub-content-int-img002 {
    position: relative;
    width: 100%;
    height: auto;
}
.int02c-1-con {
    position: relative;
    max-width: 1000px;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 307;
    margin: 0 auto 120px;
}
.int02c-1 {
    position: absolute;
        max-width: 1000px;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.int02c-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin-top: 60px;
    margin-left: 20px;
}
.int02c-2 .fadeUp {
    animation-delay: 0.4s;
}
.int02c-3 {
    position: relative;
    width: 100%;
    max-width: 980px;
    height: auto;
    aspect-ratio: 977 / 293;
    margin: 0 auto 80px;
    box-sizing: border-box;
}
@media screen and (max-width: 1400px) {
    .sub-content-int-img002 {
        position: relative;
        width: 100vw;
        height: auto;
        margin: 0 calc(50% - 50vw);
    }
    .int02c-3 {
        position: relative;
        width: 100vw;
        max-width: none;
        height: auto;
        aspect-ratio: 1000 / 307;
        margin: 0 calc(50% - 50vw);
    }
}
@media screen and (max-width: 768px) {
    .int02c-1-con {
        margin: 0 auto 60px;
    }
    .int02c-2 {
        width: 40%;
        margin-top: 30px;
        margin-left: 10px;
    }
}
/* ================================================================
   interview-03.html - インタビューページ
   ================================================================ */
.sub-content-int-text002 {
    width: 100%;
    font-size: 1.1em;
    line-height: 160%;
    margin-left: 50px;
}
.int03c-1-con {
    position: relative;
    max-width: 1000px;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 830;
    margin: 0 auto 120px;
}
.int03c-1 {
    position: absolute;
        max-width: 1000px;
    width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
.int03c-2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 1000px;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 830;
}
@media screen and (max-width: 1400px) {
    .sub-content-int-text.sub-content-int-text--w420 {
        width: 100%;
    }
}
@media screen and (max-width: 768px) {
    .int03c-1-con {
        margin: 0 auto 40px;
    }
}
.int03c-2 .fadeUp {
    animation-delay: 0.4s;
}
/* ================================================================
   interview-04.html - インタビューページ
   ================================================================ */
.sub-content-int-text004 {
    width: 100%;
    font-size: 1.1em;
    line-height: 160%;
}
.int-txt002 h2 {
    font-size: 1.2em;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 10px;
}
.sub-content-int-flex004 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: end;
    margin: 60px auto;
    gap: 40px;
}
.sub-content-int-flex.con004 {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: end;
    gap: 40px;
}
.sub-content-int-flex004 .int-txt {
    margin-bottom: 0;
        font-size: 1.1em;
    line-height: 160%;
}
.sub-content-int-text004  .int-txt {
    margin-bottom: 32px;
}
.int-txt002.bottom0 {
    margin-bottom: 0;
}
.int-txt002 {
    margin-bottom: 24px;
}
.int04c-1 {
    max-width: 460px;
    width: 100%;
    height: auto;
    aspect-ratio: 426 / 386;
    /* margin-left: 20px; */
}
.int04c-2 {
    max-width: 280px;
    width: 100%;
    height: auto;
    aspect-ratio: 280 / 300;
    margin-right: 20px;
}
.int04c-3 {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: auto;
    aspect-ratio: 1000 / 213;
    margin: 32px auto;
}
@media screen and (max-width: 1400px) {
    .sub-content-int-flex004 {
        flex-direction: column;
        margin: 20px auto;
    }
    .int04c-1 {
        max-width: 300px;
        min-width: 200px;
        margin: 20px 0 0 auto;
    }
    .int04c-2 {
        min-width: 200px;
        margin: 20px 0 0 auto;
    }
    .int-txt002 {
        margin: 0 auto;
        box-sizing: border-box;
    }
}
@media screen and (max-width: 768px) {
    .int04c-1 {
        width: 50%;
    }
    .int04c-2 {
        width: 50%;
    }
    /* .int04c-3 {
        position: relative;
        width: 100vw;
        height: auto;
        margin: 32px calc(50% - 50vw);
    } */
}
/* ================================================================
   interview-05.html - インタビューページ
   ================================================================ */
.sub-content-int-flex005 {
    width: 100%;
    display: flex;
    gap: 10px;
    justify-content: space-around;
}
.sub-content-int-flex005 .int-txt002 {
    width: calc( 100% / 3 );
    font-size: 1.1em;
    line-height: 160%;
}
.sub-content-int-text005 {
    width: 100%;
    max-width: 460px;
    font-size: 1.1em;
    line-height: 160%;
}
.int05c-1 {
    position: relative;
    max-width: 1200px;
    width: 100%;
    height: auto;
    /* aspect-ratio: 1200 / 240; */
    margin: 32px auto;
}
.sub-content-int-flex005-01 {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 120px auto 32px;
}
.int05c-2 {
    position: relative;
    max-width: 540px;
    width: 100%;
    height: auto;
    aspect-ratio: 540 / 300;
}
@media screen and (max-width: 1400px) {
    .int05c-2 {
        margin: 40px 0;
    }
    .sub-content-int-flex005-01 {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin: 0 auto;
    }
    .sub-content-int-text005 {
        width: 100%;
        max-width: 1400px;
    }
}
@media screen and (max-width: 1000px) {
    .sub-content-int-flex005 {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin-bottom: 32px;
    }
    .sub-content-int-flex005 .int-txt002 {
        width: 100%;
        margin: 0 auto 16px;
    }
    .sub-content-int-flex005-01 {
        flex-direction: column;
        gap: 10px;
        margin: 0 auto;
    }
    .sub-content-int-text005 {
        width: 100%;
        max-width: 1000px;
    }
}
/* ================================================================
   ユーティリティクラス（共通）
   ================================================================ */
.spacer-md {
    height: 80px !important;
}

/* テキストサイズ調整 */

.text-size-md {
    font-size: 105% !important;
}

.text-size-lg {
    font-size: 140% !important;
}

/* フッター共通 */
footer {
    height: 400px !important;
}

/* ================================================================
   レスポンシブ対応（メディアクエリ）
   ================================================================ */

@media (max-width: 1000px) {
    .related-company-item {
        width: 100%;
        flex-direction: column-reverse;
        align-items: center;
    }

    .related-info-table {
        width: 100%;
        max-width: 560px;
    }
}

/* ================================================================
   works.html - 納入実績ページ
   ================================================================ */

.works-content {
    display: flex;
    flex-direction: column;
    gap: 80px;
    max-width: 1200px;
    width: 100%;
    min-height: 300px;
    margin: 60px auto;
    padding: 80px;
    box-sizing: border-box;
}

.works-section-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    padding-left: 10px;
    border-left: 4px solid #1E5A8A;
}

.works-subsection-title {
    font-size: 16px;
    font-weight: 700;
    margin: 30px 0 12px;
    padding: 8px 12px;
    background-color: #f5f5f5;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.works-subsection-title:first-of-type {
    margin-top: 0;
}

.works-subsection-title span {
    font-size: 14px;
    font-weight: 400;
    color: #666;
}

.works-info {
    width: 100%;
    box-sizing: border-box;
    line-height: 1.6;
    border-collapse: collapse;
}

.works-info th {
    width: 220px;
    padding: 12px 16px;
    box-sizing: border-box;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
    background-color: transparent;
    border-bottom: 1px solid #ddd;
}

.works-info td {
    padding: 12px 16px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}

.works-info tr:last-child th,
.works-info tr:last-child td {
    border-bottom: none;
}

/* factory.html用 - セル幅50%ずつ */
.factory01 .works-info th,
.factory01 .works-info td {
    width: 50%;
}

.factory01 .works-info th .sub-text {
    display: block;
    font-size: 14px;
    font-weight: 400;
    color: #666;
    margin-top: 4px;
}

/* 原材料注意書き */
.material-note {
    font-size: 14px;
    color: #666;
    margin-top: 12px;
    padding-left: 16px;
}

/* ================================================================
   download.html - 認証書式ダウンロードページ
   ================================================================ */

.download-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.download-item {
    display: flex;
    flex-direction: column;
    max-width: 420px;
    width: calc(50% - 15px);
    padding: 24px;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fff;
}

.download-item-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.download-thumb {
    width: 100%;
    max-width: 280px;
    aspect-ratio: 1 / 1;
    height: auto;
    box-sizing: border-box;
}

.download-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    /* Keep display size, but improve downscaling clarity for thumbnail text edges */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: auto;
    -ms-interpolation-mode: bicubic;
    backface-visibility: hidden;
    transform: translateZ(0);
    border: 1px solid #ddd;
    border-radius: 4px;
}
.download-name {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}

.download-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

.download-pages {
    font-size: 12px;
    color: #999;
    margin-top: 8px;
}

.download-item > a {
    display: block;
    text-decoration: none;
}

.download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
    padding: 8px 16px;
    background-color: #1E5A8A;
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    border-radius: 4px;
    box-sizing: border-box;
    transition: background-color 0.3s;
}

.download-item > a:hover .download-btn {
    background-color: #164a73;
}

@media screen and (max-width: 999px) {
    .download-list {
        flex-direction: column;
        align-items: center;
    }
    .download-item {
        width: 100%;
    }
}

/* ================================================================
   contact.html - お問い合わせページ
   ================================================================ */

.contact01.sub-content {
    gap: 0;
}

.contact-intro {
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.8;
}

.contact-intro p {
    margin-bottom: 4px;
}

.contact-note {
    font-size: 14px;
    color: #666;
}

.contact-form {
    max-width: 800px;
    margin: 0 auto;
}

.contact-table {
    width: 100%;
    border-collapse: collapse;
    line-height: 1.7;
}

.contact-table th {
    width: 220px;
    padding: 20px;
    box-sizing: border-box;
    background-color: #f5f5f5;
    font-weight: 500;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid #ddd;
    white-space: nowrap;
}

.contact-table td {
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #ddd;
}

.contact-table .required {
    display: inline-block;
    background-color: #c30f47;
    color: #fff;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: 3px;
    margin-right: 8px;
}

.contact-table input[type="text"],
.contact-table input[type="email"],
.contact-table input[type="tel"] {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    transition: border-color 0.3s;
}

.contact-table input[type="text"]:focus,
.contact-table input[type="email"]:focus,
.contact-table input[type="tel"]:focus,
.contact-table textarea:focus {
    outline: none;
    border-color: #1E5A8A;
}

.contact-table textarea {
    width: 100%;
    padding: 12px 16px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    resize: vertical;
    font-family: inherit;
    transition: border-color 0.3s;
}

/* テキストエリアを含む行のラベルは上揃え */
.contact-table tr:has(textarea) th {
    vertical-align: top;
    padding-top: 32px;
}

.thanks-message {
    text-align: center;
    padding: 60px 20px;
}

.thanks-message p {
    margin-bottom: 20px;
}

.thanks-message .thanks-lead {
    font-size: 1.2em;
    margin-bottom: 30px;
}

.thanks-message .thanks-note {
    margin-bottom: 40px;
}

.thanks-back-wrap {
    margin-top: 60px;
}

.thanks-back-button {
    display: inline-block;
    max-width: 360px;
    padding: 16px 48px;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.3s;
}

.thanks-back-button:hover {
    background-color: #5e5e5e;
}

.radio-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.radio-group label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.radio-group input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: #333;
}

/* プライバシーポリシー */
.privacy-policy {
    margin-top: 40px;
    padding: 30px;
    background-color: #f9f9f9;
    border-radius: 6px;
}

.privacy-policy h3 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.privacy-content {
    max-height: 200px;
    overflow-y: auto;
    padding: 20px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.8;
}

.privacy-content p {
    margin-bottom: 16px;
}

.privacy-content ol {
    padding-left: 1.5em;
}

.privacy-content ol li {
    margin-bottom: 12px;
}

/* 確認チェックボックス */
.form-confirm {
    margin-top: 30px;
    text-align: center;
}

.confirm-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 15px;
}

.confirm-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: #333;
}

/* 送信ボタン */
.form-submit {
    margin-top: 40px;
    text-align: center;
}

.submit-btn {
    display: inline-block;
    min-width: 240px;
    padding: 16px 48px;
    background-color: #333;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.submit-btn:hover {
    background-color: #5e5e5e;
}

/* ================================================================
   バナーエリア（関連企業・加入組合）
   ================================================================ */
.content-title-sub {
    position: relative;
    display: inline-block;
    width: 100%;
    text-align: center;
    font-size: 20px;
}

.content-title-sub::after {
    content: "";
    position: absolute;
    width: 12px;
    height: 12px;
    margin-left: 6px;
    top: 50%;
    transform: translateY(-50%);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3Cpolyline points='15 3 21 3 21 9'/%3E%3Cline x1='10' y1='14' x2='21' y2='3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}
.company04.sub-content {
    margin-top: 0;
    gap: 60px;
}

ul.banner-area {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 24px;
    padding: 0;
    list-style: none;
}

ul.banner-area li {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 280px;
    width: 100%;
    border: #333 1px solid;
}

ul.banner-area li a {
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.3s;
    padding: 4px;
    box-sizing: border-box;
}

ul.banner-area li a:hover {
    opacity: 0.7;
}

ul.banner-area li a img {
    display: block;
    max-width: 100%;
    height: auto;
}

@media screen and (max-width: 768px) {
    ul.banner-area {
        flex-direction: column;
        align-items: center;
    }
}

/* ================================================================
   サブページ用 how-list セクション（縮小版）
   ================================================================ */
.sub-how-section {
    padding: 60px 20px;
    background-color: #f5f5f5;
}

.sub-how-section ul {
    padding-left: 0;
    line-height: normal;
}

.sub-how-section .how-list {
    gap: 30px;
    margin-bottom: 0;
}

.sub-how-section .how-list li {
    max-width: 320px;
    height: 370px;
    position: relative;
}

.sub-how-section .how-list li:nth-child(1) {
    z-index: 3;
}

.sub-how-section .how-list li:nth-child(2) {
    margin-top: 110px;
    z-index: 2;
}

.sub-how-section .how-list li:nth-child(3) {
    margin-top: 35px;
    z-index: 1;
}

.sub-how-section .how-list-title {
    font-size: 24px;
}

.sub-how-section .how-list-001 .how-list-title001 {
    left: 55px;
    padding: 3px 14px;
}

.sub-how-section .how-list-002 .how-list-title {
    right: 35px;
}

.sub-how-section .how-list-002 .how-list-title001,
.sub-how-section .how-list-002 .how-list-title002 {
    padding: 3px 14px;
}

.sub-how-section .how-list-003 .how-list-title {
    left: 70px;
}

.sub-how-section .how-list-003 .how-list-title001,
.sub-how-section .how-list-003 .how-list-title002 {
    padding: 3px 14px;
}

.sub-how-section .how-list-btn-img {
    width: calc(100% - 28px);
}

.sub-how-section .how-list-002-img {
    width: 120px;
    bottom: 55px;
    right: -14px;
}

.sub-how-section .how-list-btn {
    width: 150px;
    height: 34px;
    font-size: 14px;
}

@media screen and (max-width: 1400px) {
    .sub-how-section .how-list {
        flex-direction: column;
        align-items: center;
    }
    .sub-how-section .how-list li {
        display: flex;
        max-width: 600px;
        width: 100%;
        height: auto;
    }
    .sub-how-section .how-list li:nth-child(2),
    .sub-how-section .how-list li:nth-child(3) {
        margin-top: 0;
    }
    .sub-how-section .how-list-title {
        position: absolute;
        font-size: 20px;
    }
    .sub-how-section .how-list-btn-style {
        position: inherit;
        bottom: inherit;
        left: inherit;
        transform: inherit;
        margin: auto auto 10px;
    }
    .sub-how-section .how-list-btn-img {
        width: auto;
        height: 100%;
        aspect-ratio: 2 / 1;
        position: inherit;
    }
    .sub-how-section .how-list-002-img {
        display: none;
    }
    .sub-how-section .how-list-001 .how-list-title {
        position: absolute;
        top: 35px;
        right: 90px;
        left: auto;
    }
    .sub-how-section .how-list-001 .how-list-title001 {
        left: auto;
    }
    .sub-how-section .how-list-002 .how-list-title {
        position: absolute;
        top: 30px;
        right: 150px;
    }
    .sub-how-section .how-list-002 .how-list-title002 {
        position: relative;
        left: 45px;
    }
    .sub-how-section .how-list-003 .how-list-title {
        position: absolute;
        top: 30px;
        right: 90px;
        left: auto;
    }
    .sub-how-section .how-list-003 .how-list-title002 {
        position: relative;
        left: 45px;
    }
}

/* インタビューページ know-list */
.intv01 .know {
    padding: 0;
}