@charset "utf-8";
/* CSS Document */

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*コンテナー*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.container_inner {
    margin-top: 6rem;
}
.container_inner_wrapper {
    margin-top: 3rem;
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*テーブル*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
table.gen {
    width: 100%;
    margin: 2rem auto 4rem;
}

table.gen caption {
    margin: 0 0 1.5rem;
    line-height: 1.5em;
}

table.gen thead th {
   border-bottom: 5px double ; /* ヘッダ行の下線 */
}


table.gen th,
table.gen td {
    padding: 0.45em 1em;
    line-height: 1.5em;
}

table.gen tbody td {
    text-align: left;
}

/*pattern_01*/
table.gen caption {
    font-size: 1.125rem;
    font-weight: bold;
    color: #444;
}

table.pattern_01 caption::after {
    content: "";
    width: 6em;
    border-bottom: 1px solid #ccc;
    display: block;
    margin: 1em auto 0;
}

table.pattern_01 th,
table.pattern_01 td {
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
    border-right: 1px solid #999;
    border-left: 1px solid #999;
}

table.pattern_01 thead tr th:first-child {
    background-color: #aaa;
}

table.pattern_01 thead th {
    background-color: #bbb;
}

table.pattern_01 tbody th {
    background-color: #eee;
}

table.pattern_01 tfoot th {
    background-color: #ccc;
}

table.pattern_01 tfoot td {
    background-color: #ddd;
}


/*pattern_02*/
/*(藤井作成) シーラント用テーブル */
table.pattern_02 caption::after {
    content: "";
    width: 6em;
    border-bottom: 1px solid #ccc;
    display: block;
    margin: 1em auto 0;
    border: none;
}

table.pattern_02 th{
    display: inline; 
}
table.pattern_02 td {
    display: inline-block; 
    margin-bottom: 6px;
}


/*テキストのみ*/
table.text_only {
    margin: 1rem;
}

table.text_only td,
table.text_only th {
    padding: 0.3em 1em 0.3em 0;
    text-align: left;
    line-height: 1.6em;
    vertical-align: top;

}

@media screen and (max-width:768px) {
    table.text_only {
        margin: 1rem 0;
    }

    table.text_only td,
    table.text_only th {
        padding: 0;
        display: block;

    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*リスト*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
ul.gen,
ol.gen {
    margin: 2rem auto;
    padding: 0 1rem;
}

ul.gen li,
ol.gen li {
    padding-left: 1.5em;
    padding-right: 1.5em;
    line-height: 1.5em;
    margin: 0.75em auto;
    position: relative;
}

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

    ul.gen,
    ol.gen {
        padding: 0;
    }
}

/*リスト・丸--------------------*/
ul.list_circle li::before {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    background-color: #aaa;
    position: absolute;
    left: 0.3em;
    top: 0.525em;
    border-radius: 50%;
}

/*リスト・小--------------------*/
ul.siz_s,
ol.siz_s {
    margin: 1rem auto;
}

ul.siz_s li,
ol.siz_s li {
    font-size: 0.875rem;
    margin: 0.5em auto;
}

/*リスト・丸・小*/
ul.siz_s.list_circle li::before {
    width: 4px;
    height: 4px;
    left: 0.4em;
    top: 0.575em;
}

/*リスト・ナンバー--------------------*/
ol.list_decimal {
    padding-left: 2rem;
}

ol.list_decimal > li {
    list-style-type: decimal;
    list-style-position: outside;
    padding-left: 0.5em;
}

@media screen and (max-width:768px) {
    ol.list_decimal {
        padding-left: 1.5rem;
    }

}

/*リスト・注意書き--------------------*/
ul.list_ano li::before {
    content: "※";
    display: block;
    position: absolute;
    left: 0em;

}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*テキスト*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
p.gen {
    margin-bottom: 1rem;
}

p.gen_left {
    margin-bottom: 1rem;
    text-align: left
}


div.gen {
    line-height: 1.75em;
    margin: 1rem auto;
    padding: 0 1rem;
}

div.lead_copy {
    font-size: 1.2rem;
    font-weight: bold;
    color: #0075bd;
    line-height: 2em;
    margin: 2rem auto;
}

.text_center {
    text-align: center;
}
.text_right {
    text-align: right;
}


@media screen and (max-width:768px) {
    div.gen {
        padding: 0;
    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*タイトル*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

h2.gen {
    font-size: 2.11rem;
    padding-bottom: 0.4em;
    line-height: 1em;
    position: relative;
    margin: 3rem auto 2rem;
}

h2.gen span small {
    font-size: 0.6em;
}

h2.gen::before {
    content: "";
    width: 3.5rem;
    position: absolute;
    border-bottom: 4px solid #0075BD;
    bottom: 0;
    left: 0;
}

@media screen and (max-width:768px) {
    h2.gen {
        font-size: 1.5rem;
    }

    h2.gen::before {
        border-bottom: 2px solid #0075BD;
    }

}

h3.gen {
    font-size: 1.5rem;
    line-height: 1.5em;
    color: #0075bd;
    padding: 0 1rem 0.4em;
    position: relative;
    margin: 3rem auto 2rem;
}

h3.gen::after,
h3.gen::before {
    display: block;
    content: "";
    position: absolute;
}

h3.gen::before {
    width: 30%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #0075BD;
}

h3.gen::after {
    width: 70%;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #ccc;
}

h3.gen.no_border {
    margin-bottom: 1rem;
    padding-bottom: 0;
}

h3.gen.no_border::before,
h3.gen.no_border::after {
    display: none;
}

@media screen and (max-width:768px) {
    h3.gen {
        font-size: 1.25rem;
        padding: 0 0 0.4em;
    }
}

h4.gen {
    font-size: 1.125rem;
    line-height: 1.5em;
    padding: 0 1rem 0 0.8rem;
    margin: 3rem auto 1rem;
    border-left: 0.2rem solid #0075BD;
}

h5.gen {
    color: #0075BD;
    margin: 2rem auto 1rem;
    padding: 0 1rem;
}

h6.gen {
    padding: 0 1rem;
    margin: 2rem auto 1rem;
}

@media screen and (max-width:768px) {
    .news_area h4.gen {
        margin-bottom: 0px;
    }

    h5.gen,
    h6.gen {
        padding: 0;
    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*タイトル（↑↑HTMLタグに直についてるスタイルをクラスとして再定義）*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.h2_gen {
    font-size: 2.11rem;
    padding-bottom: 0.4em;
    line-height: 1em;
    position: relative;
    margin: 3rem auto 2rem;
}

.h2_gen span small {
    font-size: 0.6em;
}

.h2_gen::before {
    content: "";
    width: 3.5rem;
    position: absolute;
    border-bottom: 4px solid #0075BD;
    bottom: 0;
    left: 0;
}

@media screen and (max-width:768px) {
    .h2_gen {
        font-size: 1.5rem;
    }

    .h2_gen::before {
        border-bottom: 2px solid #0075BD;
    }

}

.h3_gen {
    font-size: 1.5rem;
    line-height: 1.5em;
    color: #0075bd;
    padding: 0 1rem 0.4em;
    position: relative;
    margin: 3rem auto 2rem;
}

.h3_gen::after,
.h3_gen::before {
    display: block;
    content: "";
    position: absolute;
}

.h3_gen::before {
    width: 30%;
    bottom: 0;
    left: 0;
    border-bottom: 1px solid #0075BD;
}

.h3_gen::after {
    width: 70%;
    bottom: 0;
    right: 0;
    border-bottom: 1px solid #ccc;
}

.h3_gen.no_border {
    margin-bottom: 1rem;
    padding-bottom: 0;
}

.h3_gen.no_border::before,
.h3_gen.no_border::after {
    display: none;
}

@media screen and (max-width:768px) {
    .h3_gen {
        font-size: 1.25rem;
        padding: 0 0 0.4em;
    }
}

.h4_gen {
    font-size: 1.125rem;
    line-height: 1.5em;
    padding: 0 1rem 0 0.8rem;
    margin: 3rem auto 1rem;
    border-left: 0.2rem solid #0075BD;
}

.h5_gen {
    color: #0075BD;
    margin: 2rem auto 1rem;
    padding: 0 1rem;
}

.h6_gen {
    padding: 0 1rem;
    margin: 2rem auto 1rem;
}


/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*ページナビ*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

.page_nav_wrap {
    margin: 3rem auto;
}

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

.page_nav li {
    margin: 0 0.5rem;
    flex-grow: 1;
}

.page_nav li a {
    display: block;
    border: 1px solid #0075BD;
    border-radius: 0.2rem;
    text-align: center;
    padding: 0.8em 1em;
    text-decoration: none;
    line-height: 1.5em;
    position: relative;
}

.page_nav li a::after {
    position: absolute;
    top: 0;
    right: 1rem;
    bottom: 0;
    margin: auto;
    display: block;
    width: .35em;
    height: .35em;
    border-top: 2px solid #0075BD;
    border-right: 2px solid #0075BD;
    content: "";
    transform: rotate(135deg);
}

.page_nav li a:hover {
    border: 1px solid #008EE5;
}

.page_nav li a:hover::after {
    border-top: 2px solid #008EE5;
    border-right: 2px solid #008EE5;
}

@media screen and (max-width:768px) {
    .page_nav {
        flex-direction: column;
    }

    .page_nav li {
        margin: 0.25rem 0;
    }
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*ボタン*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
.button_wrap {
    margin: 5rem auto;
}

.button_group { /* 複数のbutton_wrapを囲うためのラッパー */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    margin-top: 60px;
}

.button_group .button_wrap {
    margin: 0;
}

.button_wrap .btn {
    display: table;
}

.button_wrap .btn a {
    display: table-cell;
    position: relative;
    vertical-align: middle;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

.button_wrap .btn a span {
    position: relative;
    display: inline-block;
    line-height: 1.6em;
}

.button_wrap .btn a:hover {
    opacity: 0.8;
}



@media screen and (max-width:768px) {
    .button_wrap {
        margin: 4rem auto;
    }
    .button_group { /* 複数のbutton_wrapを囲うためのラッパー */
        gap: 16px;
    }
}

.btn_recruit {
    width: 400px;
}

.btn_recruit .btn {
    width: 100%;
    min-height: 5rem;
}

.btn_recruit .btn a {
    font-size: 1.25rem;
    background-color: #FF6600;
    color: #fff;
}

.btn_recruit .btn a::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border-left: 0.75rem solid transparent;
    border-top: 0.75rem solid transparent;
    border-right: 0.75rem solid #FFBB00;
    border-bottom: 0.75rem solid #FFBB00;
}

.btn_recruit .btn a span {
    padding-right: 1em;
}

.btn_recruit .btn a span::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: .35em;
    height: .35em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    transform: rotate(45deg);
}


/*ボタン大*/

.button_wrap.btn_l {
    width: 600px;
}

.button_wrap.btn_l .btn {
    width: 100%;
    min-height: 5rem;
}

.button_wrap.btn_l .btn a {
    font-size: 1.5rem;
    background-color: #FF6600;
    color: #fff;
}

.button_wrap.btn_l .btn a::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border-left: 0.75rem solid transparent;
    border-top: 0.75rem solid transparent;
    border-right: 0.75rem solid #FFBB00;
    border-bottom: 0.75rem solid #FFBB00;
}

.button_wrap.btn_l .btn a span {
    padding-right: 1em;
}

.button_wrap.btn_l .btn a span::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: .35em;
    height: .35em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    transform: rotate(45deg);
}

/*ボタン中*/

.button_wrap.btn_m {
    width: 480px;
}

.button_wrap.btn_m .btn {
    width: 100%;
    min-height: 4rem;
}

.button_wrap.btn_m .btn a {
    font-size: 1.25rem;
    border: 1px solid #FF6600;
    color: #FF6600;
}


.button_wrap.btn_m .btn a span {
    padding-right: 1em;
}

.button_wrap.btn_m .btn a span::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: .35em;
    height: .35em;
    border-top: 2px solid #FF6600;
    border-right: 2px solid #FF6600;
    content: "";
    transform: rotate(45deg);
}

/*ボタン中　青ベタ*/
.button_wrap.btn_m_blue_beta {
    width: 280px;
}

.button_wrap.btn_m_blue_beta .btn {
    width: 100%;
    min-height: 60px;
}

.button_wrap.btn_m_blue_beta .btn a {
    font-size: 1rem;
    background-color: #0075bd;
    color: #fff;
}

.button_wrap.btn_m_blue_beta .btn a::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    right: 0;
    bottom: 0;
    border-left: 0.75rem solid transparent;
    border-top: 0.75rem solid transparent;
    border-right: 0.75rem solid #008ee5;
    border-bottom: 0.75rem solid #008ee5;
}

.button_wrap.btn_m_blue_beta .btn a span {
    padding-right: 1em;
}

.button_wrap.btn_m_blue_beta .btn a span::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: .35em;
    height: .35em;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    content: "";
    transform: rotate(45deg);
}

@media screen and (max-width:768px) {
    .button_wrap.btn_m_blue_beta .btn {
        width: 100%;
        min-height: 44px;
    }
}

/*ボタン小*/

.button_wrap.btn_s {
    width: 360px;
    margin: 2rem 0;

}

.button_wrap.btn_s .btn {
    width: 100%;
    min-height: 3rem;
}

.button_wrap.btn_s .btn a {
    font-size: 1rem;
    border: 1px solid #FFBB00;
    color: #FF6600;
}


.button_wrap.btn_s .btn a span {
    padding: 0 0 0 2rem;
}

.button_wrap.btn_s .btn a span::after {}

.button_wrap.btn_s .btn.download a span::before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../images/common/icon_download_orange.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 20px auto;

}


.button_wrap.btn_link .btn a {
    padding: 0.8rem 1.2rem;
    font-size: 1rem;
    border: 1px solid #FFBB00;
    color: #FF6600;
}


@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .button_wrap.btn_s .btn.download a span::before {
        background-image: url(../images/common/icon_download_orange@2x.png);

    }
}

.icon_pdf {
    position: relative;
}
.icon_pdf::after {
    content: "PDF";
    font-size: 14px;
    font-weight: bold;
    font-family: 'Roboto', sans-serif;
    line-height: 14px;
    padding: 4px 8px;
    background-color: #f00;
    color: #fff;
    vertical-align: middle;
}

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

    .button_wrap.btn_l {
        width: 100%;
    }

    .button_wrap.btn_m,
    .button_wrap.btn_s {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
    }

    .button_wrap.btn_l .btn {
        min-height: 4rem;
    }

    .button_wrap.btn_m .btn,
    .button_wrap.btn_s .btn {
        min-height: 3rem;
    }

    .button_wrap.btn_l .btn a {
        font-size: 1.25rem;
    }

    .button_wrap.btn_m .btn a {
        font-size: 1.125rem;
    }

    .button_wrap.btn_s .btn a {
        font-size: 1rem;
    }

    .icon_pdf::after {
        font-size: 12px;
        font-weight: bold;
        line-height: 12px;
        padding: 3px 6px;
    }
}

/*ボタンテキスト*/
.button_wrap.btn_text {
    margin: 1rem;
}

.button_wrap.btn_text .btn {
    display: inline-block;
}

.button_wrap.btn_text .btn a {
    display: inline-block;
    font-weight: normal;
    text-decoration: none;

}

.button_wrap.btn_text .btn a span {
    position: relative;
    display: inline-block;
    line-height: 1em;
    padding-right: 1em;
}

.button_wrap.btn_text .btn a span::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    display: block;
    width: .35em;
    height: .35em;
    border-top: 2px solid #999;
    border-right: 2px solid #999;
    content: "";
    transform: rotate(45deg);
}

/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/
/*各ページ*/
/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓*/

div.photo_wrap_left {
    float: left;
    margin-right: 2rem;
	width: 312px;
}

div.photo_wrap_left p {
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.75em;
    margin: 1rem auto 2rem;
}

div.photo_wrap_left p span {
    font-size: 1rem;
}

@media screen and (max-width:768px) {
    div.photo_wrap_left {
        float: none;
        margin: 0 auto;
        width: 60%;
    }
}


/*アイテムリスト*/
.item_list_wrap {
    margin: 2rem auto;
}

.item_list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;

}
@media screen and (max-width:768px) {
    .news_area .item_list_wrap {
        margin-top: 10px;
    }
    .news_area .item_wrap {
        padding-top: 0px;
    }
}

/*理念*/
.item_list.rinen li {
    width: 46%;
    margin: 2%;
    text-align: center;
    padding: 2rem 1rem;
    background: #eaf5f9;
    background: -moz-linear-gradient(top, #eaf5f9 0%, #bfe8f9 50%, #a1d4ea 100%);
    background: -webkit-linear-gradient(top, #eaf5f9 0%, #bfe8f9 50%, #a1d4ea 100%);
    background: linear-gradient(to bottom, #eaf5f9 0%, #bfe8f9 50%, #a1d4ea 100%);
    border-radius: 0.5rem;

}

.item_list.rinen li h6 {
    font-size: 2rem;
    font-weight: normal;
    margin-bottom: 1rem;
}

.item_list.rinen li p {
    line-height: 2em;
}

@media screen and (max-width:768px) {
    .item_list.rinen li {
        width: 100%;
        padding: 1.5rem 1rem;
    }

}

/*製品*/

.item_list.seihin li {
    width: 30%;
    margin: 0 1.5% 2rem;
}

.item_list.seihin li.item_wrap .item a {
    display: block;
    height: 210px;
    overflow: hidden;
}

.item_list.seihin li.item_wrap .item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item_list.seihin li h5 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #0075bd;
    position: relative;
    padding-bottom: 0.6rem;
}

.item_list.seihin li h5::before {
    content: "";
    width: 2rem;
    position: absolute;
    border-bottom: 4px solid #0075BD;
    bottom: 0;
    left: 0;
}

@media screen and (max-width:768px) {
    .item_list.seihin li {
        width: 47%;
        margin: 0 1.5% 1.5rem;
    }

    .item_list.seihin li h5 {
        font-size: 1rem;
        margin-bottom: 1rem;
        color: #0075bd;
        position: relative;
        padding-bottom: 0.6rem;
    }

    .item_list.seihin li h5::before {

        width: 1.5rem;

        border-bottom: 2px solid #0075BD;

    }

    .item_list.seihin li.item_wrap .item a {
        display: block;
        height: 120px;
        overflow: hidden;
    }


}
/*ニュース*/

.item_list.news li {
    width: 30%;
    margin: 0;
}

.item_list.news li.item_wrap .item a {
    display: block;
    height: 210px;
    overflow: hidden;
}

.item_list.news li.item_wrap .item a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.item_list.news li h5 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    color: #0075bd;
    position: relative;
    padding-bottom: 0.6rem;
}

@media screen and (max-width:768px) {
    .item_list.news li {
        width: 47%;
        margin: 0;
    }

    .item_list.news li h5 {
        font-size: 1rem;
        margin-bottom: 1rem;
        color: #0075bd;
        position: relative;
        padding-bottom: 0.6rem;
    }

    .item_list.news li h5::before {

        width: 1.5rem;

        border-bottom: 2px solid #0075BD;

    }

    .item_list.news li.item_wrap .item a {
        display: block;
        height: 120px;
        overflow: hidden;
    }


}

/*google map*/

.googlemap_wrap iframe {}


/*イメージ関連*/

.box-img,
.box-text{
  display: inline-block;
  vertical-align: top;
}

.img_flex_wrap {
    display: flex;
    justify-content: space-between;
    margin: 2rem auto;
}

.img_flex_wrap .img_wrap {
    margin-left: 2rem;
    min-width: 280px;
}

@media screen and (max-width:768px) {
    .img_flex_wrap {
        flex-direction: column;
    }

    .img_flex_wrap .img_wrap {
        max-width: 80%;
        margin: 2rem auto 0;
    }
}


/* 画像ホバー処理 */
img.twitter_button:hover{
 
	/* 透明度を上げることで、画像の色を薄く見せる。*/
	opacity:0.5;
 
	/* リンクをホバーしたときのカーソルにする。*/
	cursor: pointer;
}
 
/* 画像をクリックした瞬間 */
img.twitter_button:active{
 
	/* 要素を若干下に下げることで、押した感じを出す。*/
 
	/* 今いる位置から相対的に3px下に配置する。*/
	position: relative;
	top: 3px;
 
}

/*採用*/

.tab_wrap {
    width: 100%;
}

.tab_wrap ~ .tab_wrap {
    margin-top: 120px;
}

.tab_wrap input {
    display: none;
}

.tab_wrap label.tab {
    display: inline-block;
    width: 23%;
    margin: 0%;
    padding: 1rem;
    border-radius: 0.4rem 0.4rem 0 0;
    background-color: #a1d4ea;
    text-align: center;
    color: #0075bd;
    cursor: pointer;
    box-sizing: border-box;
    font-size: 15px;
}

input.tab_item:checked + label.tab {
    background-color: #0075bd;
    color: #fff;
}

.tab_area label:hover {
    opacity: 0.7;

}



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

    .tab_wrap label.tab {
        display: block;
        width: 100%;
        margin: 4% 0;
        padding: 1rem;
        border-radius: 0.4rem;
        color: #0075bd;
        font-size: initial;
    }

}

/*タブ表示*/
.tab_panel {
    display: none;
    border-top: 4px solid #0075bd;
}

#tab1:checked ~ #panel1,
#tab2:checked ~ #panel2,
#tab3:checked ~ #panel3,
#tab4:checked ~ #panel4 {
    display: block;
}

/*Q & A*/
h3.saiyo {
    font-size: 1.5rem;
    color: #0075bd;
    margin: 3rem 0 1.25rem;
    line-height: 1.5em
}

h4.saiyo {
    font-size: 1.25rem;
    margin: 1rem 0;
    padding: 0 1rem;
    line-height: 1.5em
}

@media screen and (max-width:768px) {
    h3.saiyo {
        font-size: 1.25rem;
    }

    h4.saiyo {
        font-size: 1.125rem;
        padding: 0;
    }
}

/*電話での問い合わせ*/

.phone_list_wrap {
    display: flex;
    justify-content: space-between;
    padding: 0 1rem;
}

.phone_list_wrap .phone_item {
    width: 45%;
}

.phone_item h5 {
    font-size: 1.125rem;
    padding-bottom: 0.75rem;
    text-align: center;
    border-bottom: 3px solid #0075bd;
    margin-bottom: 1rem;
}

.phone_item .tel_nomber {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0075bd;
    text-align: center;

    margin: 1rem 0;
}

.phone_item .tel_nomber span {
    position: relative;
    display: inline-block;
    padding-left: 0.8em;
}

.phone_item .tel_nomber span::before {
    content: "";
    display: block;
    width: 0.8em;
    height: 0.8em;
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background-image: url(../images/common/icon_phone.png);
    background-repeat: no-repeat;
    background-size: contain;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
    .phone_item .tel_nomber span::before {
        background-image: url(../images/common/icon_phone@2x.png);
    }
}

.phone_item p {
    text-align: center;
    margin: 0.2rem 0;
    line-height: 1.5rem;
}

.phone_item p.address {
    font-size: 0.75rem;
}

@media screen and (max-width:768px) {
    .phone_list_wrap {
        flex-direction: column;
        padding: 0;
        margin: 1rem 0;
    }

    .phone_list_wrap .phone_item {
        width: 100%;
        margin: 1rem 0;
    }

    .phone_item h5 {
        border-bottom: none;
        padding-bottom: 0;
        margin-bottom: 1rem;
    }

}

/*電話ボタン*/
@media screen and (max-width:768px) {
    .phone_item .tel_nomber {
        width: 280px;
        margin: 0 auto 1rem;
        ;
    }

    .tel_nomber a {
        display: block;
        position: relative;
        width: 100%;
        min-height: 44px;
        line-height: 44px;
    }

    .tel_nomber a {
        font-size: 1.5rem;
        background-color: #0075bd;
        color: #fff;
    }

    .tel_nomber a::after {
        content: "";
        width: 0;
        height: 0;
        position: absolute;
        right: 0;
        bottom: 0;
        border-left: 0.75rem solid transparent;
        border-top: 0.75rem solid transparent;
        border-right: 0.75rem solid #008ee5;
        border-bottom: 0.75rem solid #008ee5;
    }

    .phone_item .tel_nomber span::before {
        background-image: url(../images/common/icon_phone_white.png);
    }

    @media only screen and (-webkit-min-device-pixel-ratio: 1.5) {
        .phone_item .tel_nomber span::before {
            background-image: url(../images/common/icon_phone_white@2x.png);
        }
    }

}

/*メールフォーム*/
.enter_check_button {
    width: 480px;
    margin: 5rem auto 8rem;
}

.enter_check_button label {
    display: block;
    padding: 1.5rem;
    color: #0075bd;
    border: 1px solid #0075bd;
    cursor: pointer;
    text-align: center;
}

.enter_check_button label:hover {
    opacity: 0.7;
}

@media screen and (max-width:768px) {
    .enter_check_button {
        width: 100%;
        margin: 3rem auto 6rem;
    }

    .enter_check_button label {
        padding: 1rem;
    }
}

/*フロー図*/
.flow {
    margin: 2rem 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.flow li {
    line-height: 2rem;
    position: relative;
    font-weight: bold;
    color: #999;
}

.flow li.flow_active {
    color: #000;
}

.flow li span {
    display: inline-block;
    height: 2rem;
    background-color: #ccc;
    color: #fff;
    width: 2rem;
    margin-right: 0.5rem;
    text-align: center;
    border-radius: 1rem;

}

.flow li.flow_active span {
    background-color: #ff6600;
}

.flow li.arrow {
    width: 2rem;
    height: 2rem;
    position: relative;
    margin: 0 1rem;
}

.flow li.arrow::after {

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    display: block;
    width: .5rem;
    height: .5rem;
    border-top: 4px solid #999;
    border-right: 4px solid #999;
    content: "";
    transform: rotate(45deg);
}

@media screen and (max-width:768px) {
    .flow li {
        line-height: 1.25em;
        position: relative;
        font-weight: bold;
        font-size: 0.75rem;
        color: #999;
        text-align: center;
    }

    .flow li span {
        display: block;
        height: 2rem;
        background-color: #ccc;
        color: #fff;
        width: 2rem;
        text-align: center;
        border-radius: 1rem;
        font-size: 1rem;
        line-height: 2rem;
        margin: 0 auto 0.5rem;

    }
}

/*フォーム*/

table.form td,
table.form th {
    padding: 0.75rem 1rem;
}

table.form th {
    text-align: right;
    font-size: 0.875rem;

}

table.form td {
    padding-left: 4rem;
    position: relative;
}

table.form td ul li {
    margin: 0.5rem 0;
}

table.form td ul li span {
    display: inline-block;
    width: 8em;
}

table.form td input[type="text"],
table.form td input[type="email"],
table.form td input[type="tel"] {
    padding: 0.3rem;
    font-size: 1rem;
    width: 100%;
}

table.form textarea {
    width: 100%;
}

table.form td.hissu::before {
    position: absolute;
    content: "必須";
    height: 1.5rem;
    padding: 0rem 0.5rem;
    border-radius: 0.2rem;
    font-size: 0.75rem;
    font-weight: bold;
    background-color: #f60;
    color: #fff;
    top: 0;
    bottom: 0;
    left: 0.75rem;
    margin: auto;

}

@media screen and (max-width:768px) {
    table.form {
        width: 100%;
    }

    table.form td,
    table.form th {
        display: block;
    }

    table.form th {
        text-align: center;
    }

    table.form td {
        padding-left: 4rem;
        position: relative;
    }

    table.form td ul li span {
        display: block;
        width: 100%;
    }

    table.form td.form_padding_riset_sp {
        padding-left: 0.75rem;
    }
}

.submit_wrap {
    display: flex;
    justify-content: center;

}

.submit_wrap input {
    border: none;
    background-color: transparent;
    -webkit-appearance: none;
}

.submit_wrap input {
    width: 280px;
    min-height: 4rem;
    font-size: 1.25rem;
    background-color: #FF6600;
    color: #fff;
    font-weight: bold;
    border-top-left-radius: 0.4rem;
}

.submit_wrap div {

    margin: 0 2rem;
}

@media screen and (max-width:768px) {
    .submit_wrap {
        flex-direction: column;

    }

    .submit_wrap input {
        width: 280px;
        min-height: 4rem;
        font-size: 1.25rem;
        background-color: #FF6600;
        color: #fff;
        font-weight: bold;
    }

    .submit_wrap div {

        margin: 1rem auto;
    }
}

/*写真整形*/

.seihin_img_set_wrap {
    display: flex;
    justify-content: space-between;

}

.seihin_img_set_wrap h2,
.seihin_img_set_wrap .h2_gen {
    margin-top: 0;
}

.seihin_img_set_wrap.flex-direction-column {
    flex-direction: column;
}

.img_wrap.seihin_img {
    width: 480px;
    height: 360px;
    margin: 0;
}

.img_wrap.seihin_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img_wrap.seihin_img2 img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


@media screen and (max-width:768px) {
    .seihin_img_set_wrap {
        flex-direction: column;

    }

    .img_wrap.seihin_img {
        width: 100%;
        height: 74vw;
        margin: 0;
    }
}


/*　用途分類ボタン*/
.img_menu{
  width: 200px;
  height: 200px;
  margin: 0 auto;
  overflow: hidden;
}
.img_menu img{
  width: 100%;
  cursor: pointer;
  border-radius: 50%;
  transition-duration: 0.3s;
}
.img_menu img:hover{
  border-radius: 0;
  transition-duration: 0.3s;

}

@media screen and (max-width:768px) {
.img_menu{
        width: calc((100vw - 2rem) / 2 - 3vw);
        height: calc((100vw - 2rem) / 2 - 5vw);
        margin-bottom: 2vw;
  margin: 0 auto;
  overflow: hidden;
}
.img_menu img{
  width: 100%;
  cursor: pointer;
  border-radius: 50%;
  transition-duration: 0.3s;
}
.img_menu img:hover{
  border-radius: 0;
  transition-duration: 0.3s;

}
}