@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;
    display: none !important;
}
.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_box .flex {
    align-items: center; /* 左右の要素を中央で揃える */
}

.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 {
    display: flex !important;
    flex-wrap: wrap !important;      /* 要素の折り返しを許可 */
    justify-content: space-between !important;
    width: 48% !important;           /* 1行に2項目並べる設定 */
    margin-bottom: 50px !important;
    align-items: flex-start !important;
}

.news_txt {
       display: contents !important;
}

.news_item ul {
    width: 180px;
}

.news_item ul li {
    width: 100%;
}

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

.news_item h3.subhead02 {
    width: 100% !important;
    order: 1 !important;     
    margin-bottom: 20px !important;
}

.news_item p {
    width: 65% !important; 
    order: 2 !important;
    margin: 0 !important;
    font-size: 1.5rem !important;
}

.news_item ul {
    width: 32% !important; 
    order: 3 !important; 
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}


/*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;
}

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

PC表示の修正

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


@media screen and (min-width: 768px) {
    /* 全体枠を1024pxに固定 */
    .contact_box {
        width: 1024px !important;
        margin: 80px auto !important;
        display: block !important;
    }
    /* 項目を横並びに固定 */
    .form_item {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
　　　　border-bottom: 1px solid #ddd !important;
    }
    .form_item_label {
        width: 23% !important;
    }
    /* 入力欄の幅をすべて統一（住所やお問い合わせ内容と揃える） */
    .Form-Item-Input, 
    .Form-Item-Input02, 
    .Form-Item-Textarea {
        margin-left: 30px !important;
        flex: 1 !important;
        max-width: none !important; /* 410px制限を解除 */
        box-sizing: border-box !important;
    }
    /* 【修正点】リキャプチャを入力欄の右端に合わせて右寄せ */
    .g-recaptcha {
        display: flex !important;
        justify-content: flex-end !important; /* 右寄せにする */
        width: 100% !important;
        margin: 20px 0 !important;
    }

    /* 測定原理：画像を説明文の右側中央に配置 */
    .principle_box .flex {
        display: flex !important;
        flex-direction: row !important; /* 横並びを強制 */
        align-items: center !important;  /* 垂直方向の中央に配置 */
        justify-content: space-between !important;
    }
    .principle_txt {
        width: 660px !important; /* テキスト幅を維持 [2] */
    }
    .principle_img01 {
        width: 470px !important; /* 画像幅を維持 [2] */
        margin: 0 !important;
    }
    /* 製品一覧：サブタイトル（dt）横の短い赤線を消し、メインタイトルの1本のみにする */
    .introduction_list dt:before,
    .prodacts_item dt:before {
        display: none !important;
    }
}

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

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

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

@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; 
        padding: 0 20px;
        margin-bottom: 40px;
    }
    .top_box01 .btn_box {
        margin-bottom: 60px !important; 
    }

    .top_box01 .top_flex, .top_box01 .mb60,
    .top_box02 .top_flex, .top_box02 .mb60 {
        margin-bottom: 0 !important;
    }

    .top_box04 {
        border-bottom: none !important;
    }

    .top_box04 figure {
        margin-bottom: 40px !important; 
    }

    .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; 
        line-height: 1.6 !important;
    }

    /* 製品詳細（下部セクション）の並び順を制御 */
    .prodacts_introduction {
        display: flex !important;
        flex-direction: column !important;
    }

    /* 「説明文＋ボタン」を上に（order: 1）、画像を下に（order: 2） */
    .introduction_txt {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 40px !important;
    }
    .prodacts_introduction figure {
        order: 2 !important;
        width: 100% !important;
    }

    /* 資料PDFボタンをスマホで見やすく調整（中央寄せ・幅制限） */
    .introduction_bottom {
        display: block !important;
        margin-top: 30px !important;
    }
    .btn_item_products02 {
        width: 100% !important;
        max-width: 280px !important;
        margin: 0 auto !important;
    }
    /* スマホでは画面幅いっぱいに広がらないよう最大幅を制限 */
    .prodacts_parts figure,
    .prodacts_introduction figure {
        width: 70% !important; 
        margin: 0 auto !important;
    }
    .prodacts_txt .subhead {
        white-space: nowrap !important; 
        font-size: 4.2vw !important; 
        letter-spacing: -0.03em !important; 
    }

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

測定原理ページを修正

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

    /* 1. ページ全体のはみ出し（1260px/1200px）を強制解除 */
    #wrapper {
        width: 100% !important;
        min-width: 0 !important; /* ソース[5]の1260pxを解除 */
        overflow: hidden !important;
    }

    main#page_main {
        width: 100% !important; /* ソース[6]の1200pxを解除 */
        max-width: 100% !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    /* 2. 巨大な余白（653px）を消す：横並び(flex)を完全に解除 */
    .flex, .flex_r {
        display: block !important; /* ソース[2]のflexを解除 */
        height: auto !important;
        min-height: 0 !important;
    }

    /* 3. テキストエリアの高さリセット */
    .principle_txt, .principle_txt02 {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin-bottom: 10px !important;
        padding-bottom: 0 !important;
    }

    /* 4. 画像（principle_img01?03）のサイズと余白を適正化 */
    .principle_img01, .principle_img02, .principle_img03, .principle_box figure {
        width: 100% !important; /* ソース[7]の1024px等を解除 */
        height: auto !important; /* 653.05pxという異常な高さを解除 */
        min-height: 0 !important;
        margin: 0 auto 30px !important;
        display: block !important;
    }

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

    /* 5. 動画（MP4）を画面内に収める */
    .movie_box, .movie_item {
        width: 100% !important; /* ソース[7]の1024pxを解除 */
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto 40px !important;
    }

    .movie_item video {
        width: 100% !important; /* 動画自体の幅をスマホに合わせる */
        height: auto !important;
    }

    /* 6. 見出しの調整 */
    h2.headline_principle, h2.headline {
        font-size: 2.0rem !important;
        height: auto !important;
        margin-bottom: 20px !important;
    }

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

ニュースページを修正

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

    /* 1. ニュース全体の並びは縦（本文の下に画像） */
    .news_item {
        display: block !important;
        width: 100% !important;
        margin-bottom: 30px !important;
    }

    /* 2. 本文の余白を詰める */
    .news_item p {
        width: 100% !important;
        margin-bottom: 10px !important; /* 画像との隙間 */
    }

    /* 3. 画像エリア（ul）を横並びに強制変更 */
    .news_item ul {
        display: flex !important;
        flex-direction: row !important;  /* ← [1]のcolumnをこれで上書き */
        justify-content: space-between !important;
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    /* 4. 各画像（li）の幅を48%にして2枚並べる */
    .news_item ul li {
        width: 48% !important;           /* 50%弱で2枚並ぶ */
        margin: 0 !important;            /* 余計な隙間を削除 */
    }

    .news_item ul li img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }

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

採用情報ページを修正

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

    /* 「有能でユニークな人材を〜」のサイズのみを小さく調整 */
    .recruit_sub_tit {
        font-size: 1.4rem !important; /* 2remから1.6remに縮小 */
        line-height: 1.4 !important;
        margin-bottom: 30px !important;
        padding: 0 15px !important;   /* 左右の余白を確保して読みやすく */
        text-align: center !important;
    }

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

お問い合わせページを修正

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

    /* 1. お問い合わせボックス自体の幅を100%にする（はみ出し防止の最重要設定） */
    .contact_box {
        width: 100% !important;    /* PC版の1024pxを解除 [3] */
        margin: 40px auto !important;
        padding: 0 20px !important; /* 左右に少し余白を作る */
        box-sizing: border-box !important;
    }

    /* 2. 各項目の縦並び設定 */
    .form_item {
        flex-direction: column !important; /* 縦並びにする [4] */
        align-items: flex-start !important;
        padding: 20px 0 !important;
    }

    /* 3. ラベルの調整 */
    .form_item_label {
        width: 100% !important;      /* 幅をいっぱいにする [4] */
        margin-bottom: 10px !important;
    }

    /* 4. 入力欄（白枠）がはみ出さないように調整 */
    .Form-Item-Input, 
    .Form-Item-Input02, 
    .Form-Item-Textarea {
        width: 100% !important;
        margin-left: 0 !important; /* PC版の余白 [1], [5] を消す */
        max-width: none !important;
        box-sizing: border-box !important;
    }

    /* 5. 各ボタンのスマホ最適化（完了画面・確認画面共通） */
    .thanks_btn, 
    .confirm_btn_box {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        gap: 10px;
    }

    .btn_send, .btn_back, .form_btn {
        width: 100% !important;
        max-width: 300px !important;
        margin: 0 auto !important;
    }

    /* 1. 最後の項目の下線を消して、リキャプチャとの重なりを防止 */
    .form_item:last-of-type {
        border-bottom: none !important;
    }

    /* 2. リキャプチャ自体の上下に適切な余白を作る */
    .g-recaptcha {
        margin-top: 20px !important;    /* 上の項目との距離 */
        margin-bottom: 20px !important; /* 下のボタンとの距離 */
        display: flex !important;
        justify-content: center !important; /* 中央寄せにする場合 */
    }

    /* 1. 確認画面のボタンエリアを画面幅いっぱいに広げる */
    .confirm_btn_box {
        width: 100% !important;   /* PC版の26%設定を解除 [3] */
        margin: 40px auto !important;
        display: flex !important;
        justify-content: space-between !important;
        padding: 0 20px !important;
        box-sizing: border-box !important;
    }

    /* 2. 「内容を修正する」と「送信する」ボタンを横並びで押しやすく調整 */
    .btn_back, .btn_send {
        width: 48% !important;    /* 2つ並べるために50%弱に設定 */
        font-size: 1.5rem !important;
        padding: 15px 5px !important;
        border-radius: 30px !important;
        text-align: center !important;
        display: block !important;
    }

    /* 3. 確認画面の項目表示も縦並びにする */
    .form_item p.form_txt, 
    .form_item p {
        width: 100% !important;
        margin-left: 0 !important;
        font-size: 1.6rem !important;
        color: #fff !important;
        padding-top: 5px !important; /* ラベルとの隙間 */
    }

    /* 1. 項目全体の枠組みを縦並びに変更 */
    .form_item {
        flex-direction: column !important; /* 横並びを解除 */
        align-items: flex-start !important;
        padding: 20px 0 !important;
    }

    /* 2. ラベル（お名前、会社名など）の幅を100%に */
    .form_item_label {
        width: 100% !important;
        margin-bottom: 8px !important;
    }

    /* 3. 確認画面で表示される入力内容（pタグ）を縦並びに適応させる */
    .form_item p, 
    .form_item .form_txt {
        width: 100% !important;
        margin-left: 0 !important; /* PC版の左余白を解除 */
        padding-top: 5px !important;
        font-size: 1.6rem !important;
        color: #fff !important;
    }

    /* 4. 「内容を修正する」「送信する」ボタンのエリアを広げる */
    .confirm_btn_box {
        width: 100% !important;   /* PC版の26%設定 [2] を解除 */
        display: flex !important;
        justify-content: space-between !important;
        margin: 40px auto !important;
        padding: 0 10px !important;
    }

    /* 1. 全体の枠組みをスマホの横幅いっぱいに広げる */
    .contact_box {
        width: 100% !important;     /* PC版の1024px設定 [1] を解除 */
        padding: 0 20px !important;  /* 左右に余白を作る */
        box-sizing: border-box !important;
        margin: 40px auto !important;
        display: block !important;    /* 確実に縦並びのブロック要素にする */
    }

    /* 2. 完了メッセージの文字サイズと余白を調整 */
    .contact_box h2.tc {
        font-size: 2.0rem !important;
        margin-bottom: 20px !important;
    }

    .contact_box p.tc {
        font-size: 1.6rem !important;
        line-height: 1.7 !important;
        text-align: center !important; /* 中央寄せを維持 */
        margin-bottom: 30px !important;
    }

    /* 3. ボタンエリアを縦に配置 */
    .thanks_btn {
        width: 100% !important;
        display: block !important;
        text-align: center !important;
    }

    /* 4. 「お問い合わせに戻る」ボタンを押しやすく大きくする */
    .thanks_btn .btn_send {
        width: 100% !important;       /* ボタンを横幅いっぱいにする */
        max-width: 280px !important;   /* 広がりすぎないよう制限 */
        padding: 15px 0 !important;    /* 高さを出してタップしやすく */
        font-size: 1.6rem !important;
        display: inline-block !important;
        border-radius: 30px !important;
        margin: 0 auto !important;
    }

}