@charset "UTF-8";

/* ----------------------------------------------------------------
    当社の技術ページ用CSS
---------------------------------------------------------------- */

/* ========================================
    当社の技術セクション
========================================= */
.ourTechnologySection { 
    padding: var(--space-size-32) 0 var(--space-size-56);
}

@media print, screen and (min-width: 768px) {
    .ourTechnologySection {
        padding: var(--space-size-64) 0 var(--space-size-104);
    }
}

/* ========================================
    見出しの余白
========================================= */
.el_heading3 {
    margin-top: var(--space-size-40);
}

@media print, screen and (min-width: 768px) {
    .el_heading3 {
        margin-top: var(--space-size-80);
    }
}

.el_heading3 + p {
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .el_heading3 + p {
        margin-top: var(--space-size-32);
    }
}

.el_heading4 {
    margin-top: var(--space-size-32);
}

@media print, screen and (min-width: 768px) {
    .el_heading4 {
        margin-top: var(--space-size-64);
    }
}

.el_heading4 + p {
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .el_heading4 + p {
        margin-top: var(--space-size-32);
    }
}

/* ========================================
    フォトレジストセクション
========================================= */
/* フォトレジスト説明エリア */
.photoresistSection_description {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-32);
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .photoresistSection_description {
        flex-direction: row;
        gap: 32px;
        margin-top: var(--space-size-48);
    }
}

.photoresistSection_text {
    flex: 1;
}

.photoresistSection_list {
    padding-left: 20px;
}

.photoresistSection_list li {
    list-style: disc;
}

.photoresistSection_diagram {
    width: 100%;
}

@media print, screen and (min-width: 768px) {
    .photoresistSection_diagram {
        width: 596px;
        flex-shrink: 0;
    }
}

.photoresistSection_diagram img {
    width: 100%;
    height: auto;
    display: block;
}

/* 樹脂構成図とリンクエリア */
.photoresistSection_composition {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-16);
    align-items: center;
    margin-top: var(--space-size-32);
}

@media print, screen and (min-width: 768px) {
    .photoresistSection_composition {
        flex-direction: row;
        justify-content: center;
        gap: var(--space-size-24);
        margin-top: var(--space-size-48);
    }
}

.composition_diagram {
    width: 64.7%;
    max-width: 308.818px;
}

.composition_diagram img {
    width: 100%;
    height: auto;
    display: block;
}

.composition_links {
    display: flex;
    gap: 9px;
    width: 100%;
}

@media print, screen and (min-width: 768px) {
    .composition_links {
        flex-direction: column;
        gap: var(--space-size-24);
        width: 668px;
        flex-shrink: 0;
    }
}

.composition_link {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: calc(100% - 19px / 2);
}

@media print, screen and (min-width: 768px) {
    .composition_link {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
}

.composition_link_header {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-8);
    align-items: center;
}

@media print, screen and (min-width: 768px) {
    .composition_link_header {
        flex-direction: row;
        gap: var(--space-size-16);
    }
}

.composition_link_arrow {
    width: 30px;
    height: 43px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='44' viewBox='0 0 30 44' fill='none'%3E%3Cpath d='M15 43.499L-1.21722e-06 27.8467L6.75098 27.8467L6.75098 -1.01625e-06L23.251 -2.95009e-07L23.251 27.8467L30 27.8467L15 43.499Z' fill='%230062B1'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

@media print, screen and (min-width: 768px) {
    .composition_link_arrow {
        width: 58px;
        height: 40px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='58' height='40' viewBox='0 0 58 40' fill='none'%3E%3Cpath d='M58 20.001L37.1309 40.001V31H0V9H37.1309V0L58 20.001Z' fill='%230062B1'/%3E%3C/svg%3E");
    }
}
.composition_link_title {
    display: flex;
    flex-direction: column;
    min-height: 96px;
}

@media print, screen and (min-width: 768px) {
    .composition_link_title {
        min-height: auto;
    }
}

.composition_link_name {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
}

@media print, screen and (min-width: 768px) {
    .composition_link_name {
        font-size: var(--font-size-20);
    }
}

.composition_link_desc {
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-160);
}

@media print, screen and (min-width: 768px) {
    .composition_link_desc {
        font-size: var(--font-size-16);
    }
}

.composition_link_button {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 220px;
    background-color: var(--color-neutral-white);
    border: 1px solid var(--color-brand-kayakublue);
    padding: var(--space-size-8);
    gap: var(--space-size-8);
    text-decoration: none;
    transition: opacity 0.3s;
    margin: 0 auto;
}

.composition_link_button:hover {
    opacity: 0.8;
}

@media print, screen and (min-width: 768px) {
    .composition_link_button {
        flex-shrink: 0;
        padding: var(--space-size-16);
        margin: 0;
    }
}

.composition_link_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-size-8) var(--space-size-16) 0;
}

.composition_link_logo img {
    max-height: 34px;
}

@media print, screen and (min-width: 768px) {
    .composition_link_logo img {
        max-height: 48px;
    }
}

.composition_link_divider {
    width: 100%;
    height: 1px;
    background-color: var(--color-brand-kayakublue);
}

.composition_link_text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-size-8);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-500);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublue);
}
.composition_link_text::after {
    display: inline-block;  
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: "\f054";
    font-family: var(--font-family-fontawesome);
    font-weight: 400;
}

.composition_divider {
    width: 1px;
    background-color: var(--color-brand-kayakugray);
}

@media print, screen and (min-width: 768px) {
    .composition_divider {
        width: 100%;
        height: 1px;
    }
}

/* 最終説明文 */
.photoresistSection_footer {
    margin-top: var(--space-size-32);
}

@media print, screen and (min-width: 768px) {
    .photoresistSection_footer {
        margin-top: var(--space-size-48);
    }
}

/* ========================================
    DFRセクション
========================================= */
.dfrSection {
    margin-top: var(--space-size-56);
}

@media print, screen and (min-width: 768px) {
    .dfrSection {
        margin-top: var(--space-size-104);
    }
}

/* DFR説明文 */
.dfrSection_description {
    line-height: var(--line-height-160);
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_description {
        margin-top: var(--space-size-56);
    }
}

/* 製品カード */
.dfrSection .bl_productCards {
    margin-top: var(--space-size-32);
}

@media print, screen and (min-width: 768px) {
    .dfrSection .bl_productCards {
        margin-top: var(--space-size-56);
    }
}


/* フィルム構造図 */
.dfrSection_filmStructure {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: var(--space-size-24);
}

.dfrSection_filmStructure img {
    width: 100%;
    max-width: 515px;
    height: auto;
}
@media print, screen and (min-width: 768px) {
    .dfrSection_filmStructure {
        margin-top: var(--space-size-32);
    }
}

/* メリット項目 */
.dfrSection_meritItems {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-32);
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritItems {
        flex-direction: row;
        gap: 50px;
        margin-top: var(--space-size-32);
    }
}

.dfrSection_meritItem {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-size-16);
    align-items: center;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritItem {
        max-width: 300px;
        gap: var(--space-size-32);
    }
}

/* メリットヘッダー */
.dfrSection_meritHeader {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.dfrSection_meritNumber {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritNumber {
        font-size: var(--font-size-20);
    }
}

.dfrSection_meritNumber__pink {
    color: #db75a3;
}

.dfrSection_meritNumber__orange {
    color: #f09743;
}

.dfrSection_meritNumber__teal {
    color: #49a2a6;
}

.dfrSection_meritTitle {
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-size-16) var(--space-size-20);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-140);
    color: var(--color-neutral-white);
    text-align: center;
    padding: 0 var(--space-size-16);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritTitle {
        height: 100px;
        font-size: var(--font-size-20);
    }
}

.dfrSection_meritTitle__pink {
    background-color: #db75a3;
}

.dfrSection_meritTitle__orange {
    background-color: #f09743;
}

.dfrSection_meritTitle__teal {
    background-color: #49a2a6;
}

/* メリット画像 */
.dfrSection_meritImage {
    width: 88.23%;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritImage {
        width: 300px;
    }
}

.dfrSection_meritImage__w200 {
    width: 58.82%;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritImage__w200 {
        width: 200px;
    }
}

.dfrSection_meritImage img {
    width: 100%;
    height: auto;
}

/* メリットリスト */
.dfrSection_meritList {
    width: 100%;
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublack);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_meritList {
        max-width: 300px;
    }
}

.dfrSection_meritList li {
    position: relative;
    padding-left: 16px;
    margin-bottom: var(--space-size-8);
}

.dfrSection_meritList li:last-child {
    margin-bottom: 0;
}

.dfrSection_meritList li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-brand-kayakublue);
}

/* 樹脂説明エリア */
.dfrSection_resinContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-24);
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_resinContent {
        flex-direction: row;
        gap: var(--space-size-40);
        margin-top: var(--space-size-32);
    }
}

.dfrSection_resinText {
    flex: 1;
    line-height: var(--line-height-160);
}

.dfrSection_resinImage {
    width: 88.23%;
    margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_resinImage {
        width: 300px;
        flex-shrink: 0;
        margin: 0;
    }
}

.dfrSection_resinImage img {
    width: 100%;
    height: auto;
}

/* 貼り合わせ技術エリア */
.dfrSection_laminationContent {
    display: flex;
    flex-direction: column;
    gap: var(--space-size-24);
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_laminationContent {
        flex-direction: row;
        gap: var(--space-size-40);
        margin-top: var(--space-size-32);
    }
}

.dfrSection_laminationList {
    line-height: var(--line-height-160);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_laminationList {
        width: 660px;
    }
}

.dfrSection_laminationList li {
    position: relative;
    padding-left: 16px;
    margin-bottom: var(--space-size-8);
}

.dfrSection_laminationList li:last-child {
    margin-bottom: 0;
}

.dfrSection_laminationList li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-brand-kayakublue);
}

.dfrSection_laminationImage {
    width: 88.23%;
    margin: 0 auto;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_laminationImage {
        width: 300px;
        flex-shrink: 0;
        margin: 0;
    }
}

.dfrSection_laminationImage img {
    width: 100%;
    height: auto;
}

/* 特許技術ハイライトテキスト */
.dfrSection_patentHighlight {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-700);
    line-height: var(--line-height-160);
    color: var(--color-brand-kayakublue);
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_patentHighlight {
        font-size: var(--font-size-24);
        text-align: center;
        margin-top: var(--space-size-48);
    }
}

/* 特許技術プロセス図 */
.dfrSection_patentProcess {
    margin-top: var(--space-size-16);
}

.dfrSection_patentProcess img {
    width: 100%;
    height: auto;
}
@media print, screen and (min-width: 768px) {
    .dfrSection_patentProcess {
        margin-top: var(--space-size-32);
    }
}

/* Digital Bumper Technologiesリスト */
.dfrSection_bumperList {
    line-height: var(--line-height-160);
    list-style: none;
    padding: 0;
    margin: 12px 0;
}

@media print, screen and (min-width: 768px) {
    .dfrSection_bumperList {
        margin: var(--space-size-24) 0;
    }
}

.dfrSection_bumperList li {
    position: relative;
    padding-left: 16px;
    margin-bottom: var(--space-size-8);
}

.dfrSection_bumperList li:last-child {
    margin-bottom: 0;
}

.dfrSection_bumperList li::before {
    content: "●";
    position: absolute;
    left: 0;
    color: var(--color-brand-kayakublue);
}

.dfrSection_bumperComparison {
    text-align: center;
    margin-top: var(--space-size-24);
}

@media print, screen and (min-width: 768px) {
    .dfrSection_bumperComparison {
        margin-top: var(--space-size-32);
    }
}

.dfrSection_bumperComparison img {
    width: 100%;
    max-width: 859px;
    height: auto;
}


/* ========================================
    液状レジストセクション
========================================= */
.liquidResistSection {
    margin-top: var(--space-size-56);
}

@media print, screen and (min-width: 768px) {
    .liquidResistSection {
        margin-top: var(--space-size-104);
    }
}

.liquidResistSection_description {
    line-height: var(--line-height-160);
    margin-top: var(--space-size-16);
}

@media print, screen and (min-width: 768px) {
    .liquidResistSection_description {
        margin-top: var(--space-size-48);
    }
}

/* ========================================
    カンパニーリンクエリア
========================================= */
.ourTechnologyLinkArea {
    display: flex;
    justify-content: center;
    margin-top: var(--space-size-40);
}

@media print, screen and (min-width: 768px) {
    .ourTechnologyLinkArea {
        margin-top: var(--space-size-80);
    }
}