@charset "UTF-8";

/*
!
Theme Name: アイエルテクノロジー株式会社
Description: レーザーボンドテスターは世界初実用化に成功した非破壊・非接触のワイヤボンドテスターです。
Theme URI: http://www.il-tech.jp/
Version: 1.0
License: アイエルテクノロジー株式会社
*/

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&display=swap');

***************************************

リセットCSSここから

****************************************
{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
    /*1rem=10px
    overflow-y: scroll;
    /* 1 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    vertical-align: baseline;
    background: transparent;
}

body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, main {
    display: block;
}

ul,ol {
    list-style: none;
}

blockquote,q {
    quotes: none;
}

blockquote:before,blockquote:after {
    content: '';
    content: none;
}

q:before,q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #080808;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #080808;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    vertical-align: top;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input,select {
    vertical-align: middle;
}


/****************************************

body設定(主に書式)

*****************************************/
body {
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    color: #fff;
    background: #000;
    line-height: 1.7;
}

/****************************************

ページ共通

*****************************************/
#wrapper {
    width: 100%;
    min-width: 1260px;
    min-height: 100%;
    float: none;
    margin: 0 auto;
    overflow: hidden;
}

@media screen and (max-width: 767px) {
    #wrapper {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 100%;
        float: none;
        margin: 0 auto;
        overflow: hidden;
    }
}

/****************************************

フォント指定

*****************************************/
li, tt, tr, dt, dd, p {
    font-size: 1.6rem;
    color: #fff;
}

h1 {
    color: #fff;
    font-size: 2.8rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

h2 {
    color: #fff;
    font-size: 2.6rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    font-weight: normal;
}

h3 {
    color: #fff;
    font-size: 2.4rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    font-weight: normal;
}

h4 {
    font-size: 2rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    color: #fff;
}

h5 {
    font-size: 1.6rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    color: #fff;
}

/****************************************

リンク指定&オンマウス時のアクション

*****************************************/
a {
    position: relative;
}

a:link,a:visited {
    font-weight: normal;
    color: #fff;
    text-decoration-line: none;
}

a:hover,a:active {
    font-weight: normal;
    color: #E50012;
    -webkit-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}


a:hover img.img_opacity {
    opacity: 0.75;
    filter: alpha(opacity=75);
    -webkit-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}

a img.img_opacity {
    -webkit-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}


/****************************************

ヘッダー

*****************************************/


header {
    position: relative;
}

.pc_header_box {
    width: 100%;
    height: 86px;
    background:#F6F6F6;
    border-top: 5px solid #B7010F;
    box-sizing: border-box;
    position: relative;
}

.pc_navi_box {
    width: 1024px;
    height: 81px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    width: 306px;
    position: absolute;
    top: 24px;
    left: 20px;
}

.logo_en {
    width: 140px;
    position: absolute;
    top: 26px;
    right: 20px;
}

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


/****************************************

pc用 横ナビ

*****************************************/

#g_navi {
    width: 720px;
    margin: 0 0 0 auto;
}

#g_navi .menu {
    *zoom: 1;
    list-style-type: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

#g_navi .menu li {
    width: 120px;
    position: relative;
    text-align: center;
    line-height: 0;
}

#g_navi .menu li a {
    position: relative;
    padding: 0 15px;
    height: 60px;
    margin: 0;
    color: #151515;
    font-size: 1.4rem;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

#g_navi .menu li a:hover {
    opacity: 0.7;
}

#g_navi .menu li a span {
    font-size: 1.4rem;
    color: #080808;
    display: block;
}

#g_navi .menu li ul {
    width: 100%;
    list-style: none;
    position: absolute;
    z-index: 9999;
    top: 100%;
    left: 0;
    margin: 0;
    padding: 0;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: 0.3s;
    -o-transition: 0.3s;
    transition: 0.3s;
}

#g_navi .menu li ul li {
    width: 100%;
    height: auto;
}

#g_navi .menu li ul li a {
    width: 100%;
    line-height: 1.4;
    height: auto;
    display: block;
    padding: 15px 5px;
    border-top: 1px solid rgba(255, 255, 255, 06);
    font-size: 1.4rem;
    background: #fff;
    color: #151515;
    text-align: center;
    opacity: 0.95;
    filter: alpha(opacity=95);
}

#g_navi .menu li ul li a:hover {
    background: #C59966;
    color: #fff;
    -webkit-transition: 0.2s linear;
    -o-transition: 0.2s linear;
    transition: 0.2s linear;
}

#g_navi .menu li:hover ul {
    visibility: visible;
    opacity: 0.95;
}

#g_navi .menu li ul li a {
    visibility: hidden;
    opacity: 0;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
}

#g_navi .menu li:hover ul li a {
    visibility: visible;
    opacity: 1;
}

#g_navi .menu > li a::after {
    position: absolute;
    content: "";
    display: block;
    width: 0;
    transition: width 0.4s;
    /* border or (height & background) etc. */
    border-bottom: 3px solid #080808;
    /* margin: 0 auto; */
    /* left to right -> middle out */
    left: 0;
    bottom: 0;
}

#g_navi .menu > li a:hover::after {
    width: 100%;
}


/****************************************

MV

*****************************************/


#mv {
    width: 1920px;
    height: auto;
    margin-bottom: 40px;
    left: calc(50% - 960px);
}


/* page mv */


#mv_page {
    width: 1920px;
    height: 320px;
    display: flex;
    position: relative;
    margin-bottom: 60px;
    left: calc(50% - 960px);
    background: url(images/page_mv_bg.jpg) no-repeat center top;
    background-size: 100%;
}

/*
@media screen and (max-width: 767px) {
    #mv {
        width: 100% !important;
        height: 320px;
        margin-bottom: 30px;
        left: 0 !important;
    }

    #mv_page {
        width: 100% !important;
        height: 140px;
        left: 0 !important;
        background-size: 190%;
    }
}
*/

/****************************************

content 共通設定

*****************************************/
main#top_main {
    width: 100%;
    margin: 0 auto;
}

main#page_main {
    width: 1200px;
    margin: 0 auto;
}

#contents {
    width: 100%;
    max-width: 1200px
    margin-bottom: 100px;
}


.bold {
    font-weight: bold;
}


.mb60 {
    margin-bottom: 60px;
}

.mb50 {
    margin-bottom: 50px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb10 {
    margin-bottom: 10px;
}

.mt30 {
    margin-top: 30px;
}

.mt20 {
    margin-top: 20px;
}

.tc {
    text-align: center;
}



/****************************************

contentトップ用

*****************************************/

/* 1カラム目 */

.top_box01 {
    width: 1470px;
    text-align: center;
    margin: 0 auto 80px;
}

.top_flex {
    display: flex;
    justify-content: space-between;
    margin: 0 auto 50px;
}

.top_flex_txt {
    width: 590px;
    text-align: left;
}

.top_flex_img {
    width: 820px;
}

.top_flex_img figure img {
    width: 100%;
}


/* 2カラム目 */

.top_box02 {
    width: 1470px;
    text-align: center;
    margin: 0 auto 80px;
}


/* 3カラム目 */

.top_box03 {
    width: 100%;
    margin: 0 auto 80px;
    position: relative;
    padding: 40px 0;
    background: url(images/concept_bg@2x.jpg) no-repeat;
    background-size: cover;
    box-sizing: border-box;
}

.top_box_inner {
    width: 1470px;
    margin: 0 auto;
    text-align: center;
}
.top_box03_inner {
    width: 1024px;
    margin: 0 auto;
    text-align: center;
}

.top_recruit_box p {
    color: #fff;
}

/* 4カラム目 */

.top_box04 {
    width: 1470px;
    margin: 0 auto 80px;
    padding-bottom: 80px;
    border-bottom: 3px solid #E50012;
    text-align: center;
}

.top_box04 figure {
    width: 100%;
    margin: 0;
}

.top_box04 figure img {
    width: 100%;
}



/****************************************

news トップ用

*****************************************/

.top_news {
    width: 1024px;
    margin: 0 auto 110px;
    text-align: center;
}

.news_list {
    margin: 0 auto 90px;
    border-top: 1px solid #fff;
}

.news_list li {
    display: flex;
    align-items: center;
    padding: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #fff;
}

.news_list li a:hover,.news_list li a:active {
    text-decoration: underline;
}

.date {
    color: #fff;
    padding-right: 40px;
}
.date_page {
    display: block;
    font-size: 1.4rem;
}

.flex_n {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news_db {
    display: block;
    width: 234px;
    margin-left: 20px;
}

.news_nepcon {
    width: 234px;
    margin-top: 10px;
}

@media screen and (max-width: 767px) {
    .top_news {
        width: 100% !important;
        margin: 0 auto 110px;
    }

    .news_list {
        margin: 0 auto 40px;
    }

    .news_list li {
        display: flex;
        align-items: center;
        padding-bottom: 15px;
        margin-bottom: 20px;
    }

    .news_list li a:hover,
    .news_list li a:active {
        text-decoration: underline;
    }

    .date {
        font-size: 1.4rem;
        height: 48px;
        margin-right: 20px;
        padding-right: 20px;
        border-right: none;
    }

    .news_list li p {
        font-size: 1.4rem;
    }
}

/****************************************

content下層用

*****************************************/

/* 全ページ共通　フレックスボックス コンテンツボックス*/
.flex {
    display: flex;
    justify-content: space-between;
}

.flex_r {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
}
.c_black {
    color: #000;
}

/* prodacts */

.prodacts_list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto 60px;
}
.prodacts_item {
    width: 46%;
    box-sizing: border-box;
    margin-bottom: 20px;
}

.prodacts_parts {
    width: 100%;
    margin: 0 auto 30px;
}

.prodacts_txt {
    width: 100%;
    margin: 0 auto 40px;
}
.prodacts_txt p {
    font-size: 1.8rem;
}

.prodacts_parts figure {
    width: 320px;
    margin: 0 auto;
    text-align: center;
}

.prodacts_parts figure img {
    width: 100%;
    margin: 0 auto 20px;
}
.prodacts_parts.figurecaption {
    font-size: 1.6rem;
}

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

.product_list_inner .img_l {
    width: 320px;
    margin: 0;
}
.product_list_inner .img_l img {
    width: 100%;
}
.product_list_inner .img_r figure {
    width: 180px;
    max-height: 240px;
    margin: 0;
    overflow: hidden;
}

.product_list_inner .img_r figure:first-child {
    margin-bottom: 20px;
}

.product_list_inner .img_r figure img {
    width: 100%;
}

.prodacts_box01 {
    width: 100%;
    margin: 0 auto 120px;
}
.prodacts_introduction {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 60px;
}

.prodacts_introduction figure {
    width: 530px;
}

.prodacts_introduction figure img {
    width: 100%;
}


.introduction_txt {
    width: 600px;
    margin: 0 auto;
}

.introduction_txt {
    width: 600px;
    margin: 0 auto;
}

.introduction_list {
    width: 100%;
    margin: 0 auto 30px;
}
.introduction_list dt {
    font-size: 1.8rem;
    margin-bottom: 20px;
    position: relative;
}
.introduction_list dt:before {
    content: '';
    position: absolute;
    width: 40px;
    height: 2px;
    left: 0;
    bottom: -10px;
    background: #E6260F;
}
.introduction_list dd {
    font-size: 1.4rem;
}
.txt_sub_tit {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.introduction_bottom {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.introduction_bottom ul {
    width: 360px;
    display: flex;
    justify-content: space-between;
    margin: 0 0 0 auto;
}

.introduction_bottom ul li {
    width: 170px;
    margin: 0 auto;
}

.specification {
    width: 100%;
    box-sizing: border-box;
    padding: 30px 30px 60px;
}

.specification p {
    width: 1024px;
    margin: 0 auto;
    font-size: 1.4rem;
}

/* principle */

.principle_box {
    width: 100%;
    margin: 0 auto 60px;
}

.principle_txt {
    width: 660px;
}

.principle_txt02 {
    width: 530px;
}

p.txt_black {
    font-size: 1.4rem;
    color: #fff;
}

.principle_img01 {
    width: 470px;
}
.principle_img02 {
    width: 530px;
}
.principle_img03 {
    width: 1024px;
    margin: 0 auto;
}

.movie_box {
    width: 100%;
    margin: 0 auto 60px;
}
.movie_item {
    width: 1024px;
    margin: 0 auto;
}
.movie_item video {
    width: 100%;
}


/* news */

.news_box {
    width: 100%;
    margin: 0 auto 60px;
}

.news_box_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.news_item {
    width: 48%;
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}

.news_txt {
    width: 360px;
}

.news_item ul {
    width: 180px;
}

.news_item ul li {
    width: 100%;
}

.news_item ul li:first-child {
    margin-bottom: 20px;
}


/*company*/
.company_box01 {
    width: 100%;
    margin: 0 auto;
}

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

.company_img li {
    width: 49%;
    margin: 0 auto 60px;
}

.company_img img {
    width: 100%;
}

.map {
    width: 100%;
}


/* Recruit */

.recruit_sub_tit {
    font-size: 2rem;
    text-align: center;
    margin: 0 auto 60px;
}


/*Privacy policy*/
.policy_box {
    width: 100%;
    margin: 0 auto;
}

/*sitemap*/
.sitemap_box {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.sitemap_item {
    width: 30%;
    margin: 0 auto 20px;
    border-bottom: 3px solid #B82411;
    box-sizing: border-box;
    padding: 10px 20px 10px;
}


.sitemap_item a:hover {
    color: #b7010f;
    text-decoration: underline;
}


/*contact*/
.contact_box {
    width: 1024px;
    margin: 80px auto;
}

.form_item {
    border-bottom: 1px solid #ddd;
    padding-top: 24px;
    padding-bottom: 24px;
    width: 100%;
    display: flex;
    align-items: center;
}

.form_item_label {
    width: 23%;
    letter-spacing: 0.05em;
    font-weight: bold;
    font-size: 18px;
}

.form_item_label.isMsg {
    margin-top: 8px;
    margin-bottom: auto;
}

.form_item_label_required {
    border-radius: 6px;
    margin-right: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    width: 48px;
    display: inline-block;
    text-align: center;
    color: #b7010f;
    font-size: 14px;
}

.Form-Item-Input, .error-form {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 30px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    max-width: 410px;
    background: #eaedf2;
    font-size: 18px;
}

.Form-Item-Input02 {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 30px;
    padding-left: 1em;
    padding-right: 1em;
    height: 48px;
    flex: 1;
    width: 100%;
    background: #eaedf2;
    font-size: 18px;
}

.Form-Item-Textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    margin-left: 40px;
    padding-left: 1em;
    padding-right: 1em;
    height: 216px;
    flex: 1;
    width: 100%;
    background: #eaedf2;
    font-size: 18px;
}

.error {
    font-size: 1.4rem;
    margin-left: 20px;
    color: #e50012;
}

.form_txt {
    font-size: 1.8rem;
}



.form_btn {
    margin: 40px auto;
    padding: 1.2rem 1.6rem;
    width: 186px;
    display: block;
    letter-spacing: 0.05em;
    background: #b7010f;
    color: #fff;
    font-weight: bold;
    font-size: 1.6rem;
    box-sizing: border-box;
    border-radius: 30px;
    border: none;
}

.form_btn:hover {
    color: #b7010f;
    background: #fff;
}

.confirm_btn_box {
    width: 26%;
    margin: 60px auto;
    display: flex;
    justify-content: space-between;
}

.btn_back {
    padding: 1.2rem 1.6rem;
    box-sizing: border-box;
}

.btn_send {
    padding: 1.2rem 1.6rem;
    box-sizing: border-box;
}

.thanks_btn {
    margin: 0 auto;
    text-align: center;
}


.contact_text {
    font-size: 1.4rem;
    text-align: left;
}

.contact_text a {
    color: #3289E0;
}

.contact_text a:hover,
.contact_text a:active {
    opacity: 0.6;
    text-decoration: underline;
}





/****************************************

ボタン系

*****************************************/

.btn_box {
    width: 700px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
}
.btn_item {
    width: 290px;
    margin: 0 auto;
    text-align: center;
}
.btn_item_products {
    width: 200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}
.btn_item_products02 {
    width: 200px;
    text-align: center;
    position: relative;
}

.btn01 {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 1.2rem 1.6rem;
    overflow: hidden;
    font-size: 1.4rem;
    color: #fff;
    text-decoration: none;
    border: 1px #fff solid;
    border-radius: 30px;
    box-sizing: border-box;
}

.btn01::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: '';
    background: #B7010F;
    border: 1px #B7010F solid;
    animation: to-right 0.3s forwards;
}

.btn01:hover {
    color: #fff;
    border: 1px #B7010F solid;
}

.btn_item_products .btn02 {
    width: 100%;
    position: relative;
    display: inline-block;
    padding: 1rem 1.4rem;
    overflow: hidden;
    font-size: 1.4rem;
    color: #202123;
    text-decoration: none;
    border: 1px #202123 solid;
    border-radius: 30px;
    box-sizing: border-box;
}

.btn02::before {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    content: '';
    background: #B7010F;
    border: 1px #B7010F solid;
    animation: to-right 0.3s forwards;
}

.btn02:hover {
    color: #fff;
    border: 1px #B7010F solid;
    z-index: 1;
}

.btn01:hover::before,
.btn02:hover::before,
.btn03:hover::before,
.footer_btn:hover::before {
    animation: from-left 0.3s forwards;
}

@keyframes from-left {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(0);
    }
}

@keyframes to-right {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(100%);
    }
}




.arrow {
    position: absolute;
    display: inline-block;
    width: 18px;
    height: 1px;
    background: #080808;
    border: #080808;
    right: 0;
}

.arrow::before {
    content: '';
    width: 7px;
    height: 6px;
    border: 0px;
    border-top: solid 1px #080808;
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    position: absolute;
    top: 49%;
    right: 0;
    margin-top: -3px;
}



.btn_text {
    display: inline-block;
    font-size: 1.6rem;
    color: #080808;
}

.btn_text::after {
    content: "";
    display: block;
    width: 0;
    transition: width 0.3s;
    /* border or (height & background) etc. */
    border-bottom: 1px solid #080808;
    /* margin: 0 auto; */
    /* left to right -> middle out */
}

.btn_text:hover::after {
    width: 100%;
}





/****************************************

テーブル

*****************************************/

.table_specification {
    width: 1024px;
    border-collapse: collapse;
    margin:0 auto 20px;
}

.table_specification th {
    width: 30%;
    border: 1px solid #A0A0A0;
    font-weight: normal;
    text-align: left;
    padding: 15px 20px;
}

.table_specification td {
    border: 1px solid #A0A0A0;
    font-weight: normal;
    text-align: left;
    padding: 15px 20px;
}

.table_company {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 90px;
}

.table_company th {
    width: 16%;
    border-bottom: 1px solid #D9D9D9;
    font-weight: normal;
    text-align: left;
    padding: 20px 0;
}

.table_company td {
    border-bottom: 1px solid #D9D9D9;
    font-weight: normal;
    text-align: left;
    padding: 20px 0 20px 40px;
}

/****************************************

P

*****************************************/
/* 改行 */
p.line_break,
span.line_break {
    padding-top: 20px;
}

/* 改行 */
p.line_break02 {
    padding-top: 30px;
}


/****************************************

タイトル

*****************************************/

h1.page_title {
    position: absolute;
    z-index: 2;
    font-size: 4.4rem;
    color: #fff;
    text-align: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

h2.top_headline {
    margin: 0 auto 70px;
    text-align: center;
    font-size: 3rem;
    height: auto !important;
    white-space: nowrap; 
}

/* 単語の塊を定義 */
    headline_block {
    display: inline-block;
}

/* スマホ用改行をPCでは隠す */
    sp_only {
    display: none;
}

h3.top_subhead {
    font-size: 1.8rem;
    color: #fff;
    margin: 0 auto 30px;
}

h4.top_subhead {
    font-size: 3rem;
    color: #fff;
    margin: 0 auto 30px;
    padding-bottom: 20px;
    border-bottom: 2px solid #E50012;
}
h4.top_subhead_concept {
    font-size: 2.4rem;
    color: #fff;
    margin: 0 auto 30px;
}
span.mv_sub_tit {
    display: block;
    font-size: 1.8rem;
    margin: 0 auto ;
}

span.sub_tit {
    display: block;
    font-size: 1.4rem;
    margin: 0 auto;
}
span.sub_tit_products {
    display: block;
    font-size: 1.4rem;
    margin: 0 auto;
}


h2.headline {
    margin: 0 auto 50px;
    text-align: center;
    font-size: 2.6rem;
    height: 60px;   
}

h2.headline_principle {
    color: #fff;
    font-size: 2.4rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #B71E0B;
}

h2.subhead {
    font-size: 2.4rem;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #B71E0B;
}

h2.subhead02 {
    font-size: 3rem;
    color: #fff;
    padding-bottom: 10px;
    margin-bottom: 30px;
    border-bottom: 3px solid #E50012;
}
h2.subhead_border {
    font-size: 2.4rem;
    color: #fff;
    margin-bottom: 50px;
    position: relative;
    text-align: center;
}

h2.subhead_border:before {
    content: '';
    position: absolute;
    width: 44px;
    height: 2px;
    left: 48%;
    bottom: -10px;
    background: #B71E0B;
}

h3.subhead {
    font-size: 2.8rem;
    font-weight: bold;
    margin:0 auto 30px;
    text-align: center;
}

h3.subhead_border {
    font-size: 2.8rem;
    color: #fff;
    margin-bottom: 50px;
    position: relative;
    text-align: center;
}

h3.subhead_border:before {
    content: '';
    position: absolute;
    width: 44px;
    height: 2px;
    left: 48%;
    bottom: -10px;
    background: #B71E0B;
}


h3.subhead02 {
    font-size: 1.8rem;
    padding-bottom: 10px;
    border-bottom: 2px solid #B71E0B;
    margin-bottom: 10px;
}

h3.subhead03 {
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
    font-size: 1.8rem;
    margin-bottom: 30px;
}


/****************************************

pc_footer

*****************************************/


.footer_inner {
    width: 100%;
    margin-top: 120px;
    color: #fff;
}

.footer_contact {
    width: 100%;
    background: #0F1271;
    padding: 25px 0;
    margin: 0 auto;
}

.footer_contact_inner {
    width: 1024px;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    box-sizing: border-box;
}
.footer_tel, .footer_mail {
    width: 48%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.tel_text, .mail_text {
    font-size: 1.4rem;
}
.tel_no {
    font-size: 4rem;
}
.mail_btn {
    width: 284px;
}

.footer_contents {
    width: 1024px;
    margin: 40px auto;
    box-sizing: border-box;
    padding: 0 40px;
}

.footer_navi {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding-bottom: 20px;
    border-bottom: 1px solid #B1B1B1;
    margin: 0 auto 20px;
}

.footer_navi_tit {
    font-size: 1.8rem;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

.footer_navi_list {
    width: 800px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 0 auto;
}
.footer_navi_list li {
    font-size: 1.4rem;
    font-weight: bold;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

.footer_sub_menu {
    display: flex;
    justify-content: space-around;
    width: 200px;
    margin: 0 0 0 auto;
    
}

.footer_sub_menu li {
    font-size: 1.2rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

.footer_sub_menu li a {
    color: #B1B1B1;
}
.footer_sub_menu li a:hover {
    color: #E50012;
}

.footer_info {
    width: 100%;
    margin: 30px auto 0;
    text-align: center;
}

.footer_logo {
    width: 460px;
    margin: 0 auto 30px;
}

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

.footer_info p {
    color: #fff;
    font-size: 1.6rem;
    font-family: 'Noto Serif JP', serif, "Noto Sans JP", "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
}

.copyright {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    background: #B7010F;
}

.copyright p {
    font-size: 1.2rem;
    color: #DCB4B7;
}
.pagetop {
    position: fixed;
    right: 25px;
    bottom: 50px;
}

.pagetop a {
    width: 50px;
}



/****************************************

clearfix

*****************************************/
.clearfix {
    display: inline-block;
}

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

/* Hides from IE Mac */
* html .clearfix {
    height: 1%;
}

.clearfix {
    display: block;
}

/* End Hack */
/****************************************

追加

*****************************************/
.dn {
    display: none;
}

.red {
    color: #E6260F;
}

.lum-lightbox-inner img {
    max-width: 530px;
    max-height: 670px;
}

/****************************************

スマホ対応レスポンシブ化

*****************************************/

@media screen and (max-width: 767px) {

    .pc_navi_box {
        width: 100%; /* 1024pxから変更 */
        padding: 0 10px;
    }
    .logo {
        position: static !important; /* 絶対配置を解除して中央寄せなどに調整 */
        margin: 10px auto;
        width: 200px;
    }
    #g_navi {
        display: none; /* スマホ用メニューを作るまでは一旦非表示にするのが安全です */
    }
    #mv, #mv_page {
        width: 100% !important; /* 1920pxから変更 */
        left: 0 !important;
        height: 180px !important;
        background-size: cover; !important;
        margin-bottom: 30px !important;
    }

    .top_box01, .top_box02, .top_box04, .top_box_inner, .top_news {
        width: 100% !important; /* !importantを付けることで、後の1470px指定を上書きします */
        padding: 0 20px;
        margin-bottom: 40px;
    }

    .top_flex {
        display: block !important; /* 横並びを強制的に解除 */
    }

    .top_flex_txt, .top_flex_img {
        width: 100% !important;
        margin-bottom: 20px;
    }

    .footer_contact_inner, .footer_contents {
        width: 100%;
        padding: 0 20px;
        flex-direction: column; /* 電話とメールを縦に並べる */
    }
    .footer_tel, .footer_mail {
        width: 100%;
        margin-bottom: 20px;
    }
    .footer_navi_list {
        display: none; /* 複雑なメニューはスマホでは隠すのが一般的です */
    }
    .footer_logo {
        width: 80%; /* ロゴを画面に合わせて縮小 */
    }

    .form_item {
        flex-direction: column; /* 縦に並べる */
        align-items: flex-start !important;
        padding: 15px 0;
    }
    .form_item_label {
        width: 100% !important; /* ラベルを全幅に */
        margin-bottom: 10px;
    }
    .Form-Item-Input, .Form-Item-Input02, .Form-Item-Textarea {
        margin-left: 0 !important; /* PC用の余白を消す */
        width: 100% !important;
        max-width: none !important;
    }

    /* Googleマップの枠 */
    .map iframe {
        width: 100% !important; /* 1200pxから100%へ */
        height: 300px !important; /* 高さをスマホ用に少し縮める */
    }

    .prodacts_item {
        width: 100% !important; /* 1枚ずつ縦に並べる */
        margin-bottom: 30px;
    }

    /* 1470px系のボックスをすべて100%に */
    .top_box01, .top_box02, .top_box04, .top_box_inner, .top_news, main#page_main {
        width: 100% !important;
    }

    /* 1920pxのメインビジュアルを100%にし、位置をリセット */
    #mv, #mv_page {
        width: 100% !important;
        left: 0 !important; /* PC版の calc(50% - 960px) を打ち消す */
        background-size: cover;
    }
    img {
        max-width: 100%; /* 親要素の幅を超えないようにする */
        height: auto;
    }

    /* テーブルおよびニュースリストをスクロール可能なブロックに変更 */
    .table_specification, .table_company, .news_list {
        display: block !important;       /* ブロック要素に変更 */
        width: 100% !important;         /* 画面幅いっぱいに設定 */
        overflow-x: auto !important;    /* 横方向のはみ出しをスクロール可能に */
        white-space: nowrap;            /* 内容が自動改行されて潰れるのを防ぐ */
        -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかにする */
    }

    /* テーブル内の各セル、およびニュース項目の最小幅を確保 */
    .table_specification th, .table_specification td,
    .table_company th, .table_company td,
    .news_list li {
        min-width: 120px;               /* 各項目の最小幅 */
    }

    /* ニュースリスト全体の幅を固定（スクロールを発生させるために必要） */
    .news_list li {
        width: 800px !important;        /* スマホの画面幅より広い幅を強制してスクロールを発生させる */
        display: flex !important;       /* 日付とタイトルを横並びのまま維持 */
        align-items: center;
        box-sizing: border-box;
    }
    /* 英語ロゴを完全に非表示にする */
    .logo_en {
        display: none !important; 
    }

    /* 日本語ロゴを左端に配置し、サイズを調整する */
    .logo {
        position: absolute !important; /* 絶対配置を維持 [2] */
        top: 20px !important;         /* 上端からの位置を調整 */
        left: 15px !important;        /* 左端に寄せる [2] */
        width: 75% !important;        /* 横幅を広げて大きく表示（PC版は306px [2]） */
        max-width: 320px !important;  /* 画面からはみ出さない最大幅の制限 */
    }

    /* ロゴを大きくした分、ヘッダーの箱の高さを調整 */
    .pc_header_box {
        height: 100px !important;     /* PC版の86pxから少し高くする [2] */
    }

    /* 1. 外側のコンテナを縦並びに変更 */
    .footer_contact_inner {
        width: 100% !important;
        flex-direction: column !important; /* 左右並びを上下並びに変更 */
        padding: 0 20px !important;
    }

    /* 2. 「電話番号」ブロックを1行（全幅）にする */
    .footer_tel {
        width: 100% !important;
        margin-bottom: 25px !important; /* 下のメールボタンとの間に余白を作る */
        display: flex !important;
        justify-content: center !important; /* ラベルと番号を両端に配置 */
        gap: 15px;
        align-items: center !important;
    }

    /* 3. 電話番号のサイズを1行に収まるよう調整 */
    .tel_no {
        font-size: 2.2rem !important; /* PC版の4rem(40px)からスマホ用に縮小 */
    }

    /* 4. 「メール」ブロックを1行（全幅）にする */
    .footer_mail {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 15px; 
        align-items: center !important;
    }

    /* 5. メールボタンの幅をスマホ用に調整 */
    .mail_btn {
        width: 150px !important; /* PC版の284pxから縮小して収まりを良くする */
    }
 
    h2.top_headline {
        white-space: normal !important; 
        
        /* 2行になるため、フォントサイズを少し大きくしても収まります */
        font-size: 2.4rem; 
        height: auto;
        line-height: 1.4; /* 行間を調整して読みやすくします */
   }

    /* 1. 全ての大きな固定幅コンテナを画面幅100%に強制変更 */
    .top_box01, .top_box02, .top_box04, .top_box_inner, .top_box03_inner, 
    .top_news, .contact_box, main#page_main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important; /* 左右に適切な余白を追加 */
        margin: 0 auto !important;
        box-sizing: border-box !important;
    }
     
    /* 2. 横並び（Flex）の要素を縦並びに変更 */
    .top_flex, .news_box_list, .prodacts_list, .form_item {
        flex-direction: column !important;
        display: flex !important;
　　}

    /* 3. 横並びだった各パーツの幅を100%にする */
    .top_flex_txt, .top_flex_img, .news_item, .prodacts_item, 
    .form_item_label, .Form-Item-Input, .Form-Item-Textarea {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 30px 0 !important; /* 下に余白をあけて縦に並べる */
    }

    /* 4. 画像がはみ出ないように調整 */
    img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* 「subhead」というクラスが付いた全ての見出しを一括で小さく設定 */
    h3.top_subhead,
    h4.top_subhead,
    h4.top_subhead_concept,
    h2.subhead,
    h2.subhead02,
    h2.subhead_border,
    h2.headline_principle,
    h2.subhead_border,
    h3.subhead,
    h3.subhead_border,
    h3.subhead02,
    h3.subhead_border,
    h3.subhead03 {
        font-size: 1.8rem !important; /* スマホサイズ（18px相当）に統一 */
        padding-bottom: 10px !important; /* 下線との距離を詰める */
        line-height: 1.4 !important;
        height: auto !important;      /* 固定高さ指定を解除 */
        margin-bottom: 20px !important;
    }

    /* ページタイトルの縮小 */
    h1.page_title {
        font-size: 2.4rem !important;   /* 4.4rem [2] からスマホサイズに縮小 */
        width: 90% !important;          /* 文字が画面端に寄らないよう制限 */
        line-height: 1.3 !important;
        /* 中央配置の設定（transform [2]）は維持されます */
    }

    /*  タイトル内の日本語（副題）の調整 */
    h1.page_title span.mv_sub_tit, 
    h1.page_title span.sub_tit {
        display: block;                 /* 日本語部分を確実に改行させる [3] */
        font-size: 1.4rem !important;   /* 1.8rem [3] から縮小 */
        margin-top: 5px !important;
    }

/****************************************

製品一覧ページを修正

*****************************************/

    /* 製品一覧の各製品説明テキストを小さくする */
    .prodacts_txt p {
        font-size: 1.4rem !important; /* 1.8remから1.4rem（14px相当）に縮小 */
        line-height: 1.6 !important;  /* 行間を整えて読みやすくする */
        margin-bottom: 15px !important;
    }

    /* 「詳細を見る」ボタンなどが入る要素の調整 */
    .prodacts_parts {
        width: 100% !important;
        margin-bottom: 40px !important; /* 各製品間の距離を確保 */
    }

    /* 1. 製品詳細エリアを縦並びに変更し、横幅を100%にする */
    .prodacts_introduction {
        flex-direction: column !important; /* 画像と説明文を縦に並べる */
        width: 100% !important;
        margin-bottom: 40px !important;
    }

    /* 2. 画像とテキストエリアの固定幅（530px/600px）を解除 */
    .prodacts_introduction figure,
    .introduction_txt {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px 0 !important;
    }

    /* 3. 「アルミ太径仕様」などの見出し（dt）を小さくする */
    .introduction_list dt {
        font-size: 1.6rem !important;   /* 1.8remから縮小 */
        margin-bottom: 15px !important;
        line-height: 1.4 !important;
    }

    /* 4. 説明文（dd）が画面内に入り、かつ読みやすくなるように調整 */
    .introduction_list dd {
        font-size: 1.4rem !important;   /* サイズを維持、または微調整 */
        line-height: 1.6 !important;
        width: 100% !important;
        word-break: break-all;          /* テキストのはみ出しを防止 */
    }

    /* 資料PDFボタンが入るコンテナを中央揃えに変更 */
    .introduction_bottom {
        display: flex !important;
        flex-direction: column !important; /* 縦並びに変更 */
        align-items: center !important;    /* 中央に配置 */
        justify-content: center !important;
        width: 100% !important;
    }

    /* ボタン自体の外枠を中央に寄せる */
    .btn_item_products02 {
        margin: 0 auto 20px !important; /* 左右をautoにして中央へ */
        width: 200px !important;       /* ボタンの幅を固定 */
        text-align: center !important;
    }

    /* 隣にある空のリスト等が邪魔をしないように調整 */
    .introduction_bottom ul {
        width: 100% !important;
        margin: 0 auto !important;
        display: none; /* スマホで画像リストが空なら非表示にして中央寄せを優先 */
　　｝

/****************************************

測定原理ページを修正

*****************************************/

    /* 1. 測定原理ページ：回り込みを解除して縦並びにする */
    .principle_box .flex {
        display: block !important;      /* 横並びを解除 */
        width: 100% !important;
    }

    .principle_txt, 
    .principle_txt02 {
        width: 100% !important;
        float: none !important;         /* スクリーンショットの原因(回り込み)を解除 */
        margin-bottom: 20px !important;
    }

    .principle_img01, 
    .principle_img02,
    .principle_box figure {
        width: 100% !important;
        float: none !important;         /* 右寄せを解除 */
        display: block !important;
        margin: 0 auto 40px !important;
        text-align: center !important;
    }

    .principle_img01 img, 
    .principle_img02 img {
        width: 100% !important;
        height: auto !important;
    }

    /* 2. 各ページのサブ見出しを小さくする */
    h3.top_subhead, h4.top_subhead, h2.subhead, h2.subhead02, h2.subhead_border,
    h3.subhead, h3.subhead_border, h2.headline_principle {
        font-size: 1.8rem !important;
        padding-bottom: 10px !important;
        line-height: 1.4 !important;
        height: auto !important;
    }

    /* 3. コンテナの右切れ防止と中央寄せ */
    .top_box01, .top_box02, .top_box04, .top_box_inner, .top_box03_inner, 
    .top_news, .contact_box, main#page_main {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 20px !important;
        margin-left: auto !important;
        margin-right: auto !important;
        box-sizing: border-box !important;
    }
}