@charset "utf-8";

/*------main_visual------*/

.top_main {
    background-color: #F0F7FC;
    padding-bottom: 160px;
}

.top_main .top_main_con {
    margin-bottom: 160px;
}

.top_main .top_main_left {
    width: 37.8%;
    display: table;
    padding-left: 80px;
}

.top_main .top_main_left_con {
    display: table-cell;
    vertical-align: middle;
    padding-top: 25px;
}

.top_main .top_main_left h1 {
    font-family: Yrsa, serif;
    font-size: 6.6rem;
    line-height: 0.9;
    margin-bottom: 30px;
}

.top_main .top_main_left p {
    margin-bottom: 45px;
}

.top_main .top_main_left .top_main_btn li{
    width: 31%;
    text-align: center;
}

.top_main .top_main_left .top_main_btn a{
    display: block;
    border: 1px solid #333;
    text-decoration: none;
    border-radius: 5px;
    padding: 10px 15px;
    transition: 0.8s;
}

.top_main .top_main_left .top_main_btn a:hover{
    background-color: #666;
    color: #fff;
    transition: 0.8s;
}

.top_main .top_main_right {
    width: 53%;
    padding: 40px 40px 0 40px;
}

.top_main .top_main_right .mainvisual {
    border-radius: 20px;
}

.top_main .top_main_right .mainvisual img{
    width: 100%;
    border-radius: 20px;
}

.main_visual {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    border-radius: 20px;
}

.main_visual .top_text img {
    margin: 0 auto;
}

.slider-item {
    width: 100%;
    padding-bottom: 600px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.slider-item01 {
    background-image: url("../images/mainvisual01.png");
}

.slider-item02 {
    background-image: url("../images/mainvisual02.png");
}

.slider-item03 {
    background-image: url("../images/mainvisual03.png");
}

.main_visual dl {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    text-align: center;
    bottom: 0;
    z-index: 100;
    width: 100%;
    height: 80px;
    display: table;
    font-weight: 600;
}

.main_visual dt {
    width: 135px;
    background-color: #0079C0;
    color: #fff;
    display: table-cell;
    vertical-align: middle;
}

.main_visual dd {
    display: table-cell;
    vertical-align: middle;
    text-align: left;
    background-color: rgba(255, 255, 255, 0.8);
    padding-left: 10px;
    background-image: url("../images/top_info_bg.png");
    background-repeat: no-repeat;
    background-position: center right 20px;
}

.main_visual dd a {
    text-decoration: none;
    display: table;
}

.main_visual dd img {
    border-radius: 5px;
    margin-right: 10px;
}

.main_visual dd span {
    display: table-cell;
    vertical-align: middle;
    font-size: 1.6rem;
}

.main_visual dd span data {
    margin-right: 0.5em;
    font-size: 1.8rem;
}

.top_info_slide .top_info_slide_con {
    width: 100%;
    max-width: 430px;
    background-color: #fff;
    border-radius: 5px;
    margin-left: 25px;
}

.top_info_slide .top_info_slide_con a {
    display: block;
    text-decoration: none;
    transition: 0.8s;
}

.top_info_slide .top_info_slide_con_img {
    border-radius: 5px 5px 0 0;
}

.top_info_slide .top_info_slide_con_img img {
    width: 430px;
    height: 200px;
    object-fit: cover; 
    border-radius: 5px 5px 0px 0px;
}

.top_info_slide .top_info_slide_con_text {
    padding: 20px 20px 10px 20px;
}

.top_info_slide .top_info_slide_con_text h2 {
    font-family: Inter, Arial, sans-serif;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 0.8em;
    line-height: 1.2;
}

.top_info_slide .top_info_slide_con_text p {
    font-size: 1.6rem;
}

.top_info_slide .slide-arrow {
    background-color: #F0F7FC;
    position: absolute;
    border: 1px solid #333333;
    bottom: -60px;
    right: 40px;
    width: 40px;
    height: 40px;
    transition: 0.5s;
    cursor:pointer;
    border-radius: 60px;
}

.top_info_slide .slide-arrow:hover {
    opacity: 0.8;
}

.top_info_slide .slide-arrow {
    width: 46px;
    height: 46px;
    bottom: -70px;
}

.top_info_slide .slide-arrow::after {
    content: "";
    position: absolute;
    left: calc(50% - 5px);
    top: 50%;
    width: 15px;
    height: 15px;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
}

.top_info_slide .prev-arrow {
    right: 140px;
}

.top_info_slide .next-arrow {
    right: 80px;
}


.top_info_slide .prev-arrow::after {
    left: calc(50% + 5px);
    transform: translate(-50%, -50%) rotate(135deg);
}

.top_info_slide .next-arrow::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.top_info_slide .slick-track {
    display: flex;
}

.top_info_slide .slick-slide {
    height: auto !important;
}

.export_services {
    padding-top: 160px;
    padding-bottom: 160px;
}

.export_services .wrapper {
    max-width: 1550px;
    width: 100%;
    margin: 0 auto;
}

.content .export_services h2 {
    margin-bottom: 20px;
}

.export_services_sp {
    display: none;
}

.export_services_left {
    width: 870px;
}

.export_services_left p {
    margin-bottom: 40px;
}

.export_services_left .export_services_list {
    max-width: 870px;
    margin-bottom: 7px;
    padding-bottom: 4px;
    border-bottom: 2px solid #d0d0d0;
}

.export_services_left .export_services_list summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 0.78em 1em 0.78em 0em;
    color: #277bb0;
    font-size: 2.2rem;
    font-weight: 600;
    cursor: pointer;
}

.export_services_left .export_services_list summary::-webkit-details-marker {
    display: none;
}

.export_services_left .export_services_list summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 11.5px;
    height: 11.5px;
    margin-left: 10px;
    border-bottom: 2px solid #0079C0;
    border-right: 2px solid #0079C0;
    content: '';
    transition: transform .3s;
}

.export_services_left .export_services_list[open] summary::after {
    transform: rotate(225deg);
}

.export_services_left .export_services_list summary span::before {
    content: url('../images/export_services_list.png');
    display: inline-block;
    width: 24px;
    height: 27px;
    margin-right: 0.5em;
}

.export_services_left .export_services_list p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: 0 0 0.8em;
    color: #333333;
    transition: transform .5s, opacity .5s;
}

.export_services_left .export_services_list[open] p {
    transform: none;
    opacity: 1;
}

.export_services_left .export_services_btn a{
    display: block;
    width: 246px;
    margin: 60px auto;
    padding: 12px 20px;
    color: #fff;
    background-color: #0079C0;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    transition: 0.8s;
}

.export_services_left .export_services_btn a:hover{
    background-color: #8ac5e7;
}






.fadein {
    animation-name: fade-in;
    animation-duration: 2s;
    /*アニメーション時間*/
    animation-timing-function: ease-out;
    /*アニメーションさせるイージング*/
    animation-delay: .1s;
    /*アニメーション開始させる時間*/
    animation-iteration-count: 1;
    /*繰り返し回数*/
    animation-direction: normal;
    /*往復処理をするかどうか*/
    animation-fill-mode: backwards;
    /*アニメーション後のスタイル*/
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}


.fadein2 {
    opacity: 0;
    transform: translate(0, 30px);
    transition: all 1.2s;
}

.fadein2.scrollin {
    opacity: 1;
    transform: translate(0, 0);
}

.fadeinup {
    animation-name: fade-inup;
    animation-duration: 1s;
    /*アニメーション時間*/
    animation-timing-function: ease-out;
    /*アニメーションさせるイージング*/
    animation-delay: .1s;
    /*アニメーション開始させる時間*/
    animation-iteration-count: 1;
    /*繰り返し回数*/
    animation-direction: normal;
    /*往復処理をするかどうか*/
    animation-fill-mode: backwards;
    /*アニメーション後のスタイル*/
}

@keyframes fade-inup {
    0% {
        opacity: 0;
        transform: translate(0, 30px);
        transition: all 1.2s;
    }
    100% {
        opacity: 1;
        transform: translate(0, 0);
    }
}

/*======main=====*/

/* TOP top_products */
.top_products {
    padding: 160px 0 90px 0;;
}

.tab-2 {
    display: flex;
    flex-wrap: wrap;
    gap: 0 10px;
    max-width: 100%;
    margin-top: 50px;
    height: 600px;
}

.tab-2 > label {
    order: -1;
    color: #333;
    font-size: .9em;
    text-align: center;
    cursor: pointer;
    margin-right: 40px;
    font-weight: 600;
    font-size: 2.2rem;
}

.tab-2 > label:hover {
    color: #0179C0;
}

.tab-2 > label.all {
    font-size: 3.2rem;
    margin-top: -0.25em;
}

.tab-2 input {
    display: none;
}

.tab-2 > div {
    display: none;
    width: 100%;
    padding: 2.1em 0;
    background-color: #fff;
}

.tab-2 label:has(:checked) {
    color: #0179C0;
}

.tab-2 label:has(:checked) + div {
    display: block;
}

.top_products .products_slider {
    width: 128%;
    margin: 0 auto 10px;
    position: relative;
}

.tab-2 > div {
    display: none;
    width: 100%;
    padding: 1.5em 0 ;
    background-color: #fff;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.tab-2 > div.active {
    display: block;
    opacity: 1;
}

.top_products .products_slider .slick-list {
    padding: 0 10em 0 0 !important;
}

.top_products .products_slider a {
    text-decoration: none;
}

.top_products .products_slider data {
    font-size: 1.6rem;
    display: block;
}

.top_products .products_slider h3 {
    font-family: Inter, Arial, sans-serif;
    font-size: 1.8rem;
    color: #333;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 0.8em;
}

.top_products .products_slider p {
    font-size: 1.6rem;
    margin-bottom: 2em;
}

.top_products .slick-track {
    display: flex;
}

.top_products .slick-slide {
    height: auto !important;
}

.top_products .products_slider .slider_inner {
    margin-right: 20px;
    padding-bottom: 3em;
    background-color: #fff;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    height: auto !important;
    position: relative;
    text-align: center;
    border: 1px solid #D8D8D8;
}

.top_products .products_slider .slider_inner p.btn {
    margin-bottom: 0;
    padding: 0.5em;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    border: 1px solid #333;
    border-radius: 30px;
    width: 145px;
}

.top_products .products_slider.slider_inner .mask {
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
}

.top_products .products_slider .slider_inner img {
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: .3s ease-in-out;
    border-radius: 10px 10px 0 0;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.top_products .products_slider .slider_inner .slider_text {
    padding: 20px;
}

.top_products .products_slider .prev_icon {
    width: 42px !important;
    position: absolute;
    top: -18%;
    left: 72%;
    cursor: pointer;
}

.top_products .products_slider .next_icon {
    width: 42px !important;
    position: absolute;
    top: -18%;
    left: 75%;
    cursor: pointer;
}




/* TOP SAKE blog */
.top_bolg {
    background-color: #F0F7FC;
    padding: 80px 0 100px 0;
    margin-bottom: 70px;
}

.top_system {
    background: #0079C0;
    background: linear-gradient(120deg,rgba(0, 121, 192, 1) 0%, rgba(0, 121, 192, 0.65) 50%, rgba(0, 121, 192, 1) 100%);
    border-radius: 20px;
    padding: 80px;
    color: #fff;
    margin-bottom: 160px;
}

.top_system h2 {
    line-height: 100%;
    margin-top: -15px;
    margin-bottom: 30px;
}

.top_system .top_system_text{
    width: 530px;
    line-height: 160%;
}

.top_system .top_system_text p{
    margin-bottom: 35px;
    line-height: 1.9;
}

.top_system .top_system_text a{
    display: block;
    width: 190px;
    text-align: center;
    border-radius: 30px;
    color: #0079C0;
    text-decoration: none;
    background-color: #fff;
    padding: 10px;
    font-weight: 600;
    transition: 0.8s;
}

.top_system .top_system_text a:hover{
    background-color: #023f63;
    color: #fff;
}

.top_system .top_system_text a:hover{
    background-color: #023f63;
    color: #fff;
}

.sake_bolg .wrapper {
    margin-bottom: 60px;
}

.sake_bolg .blog_slider {
    width: 140%;
    margin: 60px auto 10px;
    position: relative;
}

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


.sake_bolg .slick-list {
    padding: 0 10em 0 0 !important;
}

.sake_bolg .blog_slider a {
    text-decoration: none;
}

.sake_bolg .blog_slider data {
    font-size: 1.6rem;
    display: block;
}

.sake_bolg .blog_slider h3 {
    font-family: Inter, Arial, sans-serif;
    font-size: 1.8rem;
    color: #333;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 0.8em;
}

.sake_bolg .blog_slider p {
    font-size: 1.6rem;
    margin-bottom: 2em;
}

.sake_bolg .slick-track {
    display: flex;
}

.sake_bolg .slick-slide {
    height: auto !important;
}

.sake_bolg .blog_slider .slider_inner {
    margin-left: 10px;
    margin-right: 10px;
    background-color: #fff;
    overflow: hidden;
    display: block;
    border-radius: 10px;
    height: auto !important;
    position: relative;
}

.sake_bolg .blog_slider .slider_inner p.btn {
    margin-bottom: 0;
    padding-right: 1.5em;
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-weight: 600;
    background-image: url("../images/bolg_btn.png");
    background-repeat: no-repeat;
    background-position: center right;
}

.sake_bolg .blog_slider.slider_inner .mask {
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
}

.sake_bolg .blog_slider .slider_inner img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transform: scale(1);
    transition: .3s ease-in-out;
    border-radius: 10px 10px 0 0;
    /*移り変わる速さを変更したい場合はこの数値を変更*/
}

.sake_bolg .blog_slider .slider_inner .slider_text {
    padding: 20px;
}

.sake_bolg .blog_slider .prev_icon {
    width: 42px !important;
    position: absolute;
    top: -115px;
    left: 66%;
    cursor: pointer;
}

.sake_bolg .blog_slider .next_icon {
    width: 42px !important;
    position: absolute;
    top: -115px;
    left: 68.5%;
    cursor: pointer;
}

.sake_bolg_btn a {
    display: block;
    width: 150px;
    margin: 60px auto 0 auto;
    border-radius: 5px;
    padding: 10px 5px;
    border: 1px solid #333;
    text-align: center;
    text-decoration: none;
    margin-left: 50%;
    transition: 0.8s;
    font-weight: 600;
}

.sake_bolg_btn a:hover {
    background-color: #333;
    color: #fff;
}

/* TOP top_news */
.top_news_con {
    background-color: #F9F0E7;
    border-radius: 20px;
    padding: 90px 0;
    margin-bottom: 60px;
}

.top_news_con .top_news_title a {
    color: #0079C0;
    font-weight: 600;
    margin-top: 1em;
    display: block;
}

.top_news_con .top_news_title a::after {
    content: ">";
    color: #0079C0;
    margin-left: 10px;
    font-weight: 300;
}

.top_news_con .top_news_title a:hover {
    color: #5ca1c9;
}

.top_news_con a {
    text-decoration: none;
}

.top_news_con ul{
    border-top: 1px solid #333333;
}

.top_news_con li{
    border-bottom: 1px solid #333333;
    font-weight: 600;
}

.top_news_con li data{
    font-size: 1.6rem;
    color: #666;
    margin-right: 40px;
}

.top_news_con li a{
    display: block;
    padding: 32px 0;
    transition: 0.8s;
}

.top_news_con li a:hover{
    opacity: 0.5;
}

.top_news_con li a {
    width: 100%;
    position: relative;
    display: inline-block;
    vertical-align: middle;
    text-decoration: none;
}

.top_news_con li a::after {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 20px;
    margin: auto;
    content: "";
    vertical-align: middle;
    width: 0.6em;   /* arrow size */
    height: 0.6em;  /* arrow size */
    border-top: 1px solid #0079C0;  /* thickness, color */
    border-right: 1px solid #0079C0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* TOP contact_con  */
.top_contact_con {
    background-color: #F7F7F7;
    border-radius: 20px;
    padding: 120px 0;
    margin-bottom: 60px;
}


.content .top_contact_con h2 {
    margin-bottom: 40px;
}

.top_contact_con .top_contact_con01 {
    border-bottom: 1px solid #333;
    padding-bottom: 70px;
    margin-bottom: 70px;
}

.top_contact_con .top_contact_con01 h2::before {
    content: url(../images/top_contact_con02_01.png);
    display: inline-block;
    margin-right: 0.15em;
}

.top_contact_con .top_contact_con01 .top_contact_con01_left {
    width: 560px;
    margin-right: 150px;
}

.top_contact_con .top_contact_con01 ul {
    font-weight: 600;
    font-size: 2.2rem;
    margin-top: 1em;
}

.top_contact_con .top_contact_con01 ul a{
    text-decoration: none;
    display: inline;
}

.top_contact_con .top_contact_con01 ul a:hover{
   color: #a3a3a3;
}

.top_contact_con .top_contact_con01 ul li::after {
    content: ">";
    margin-left: 10px;
    font-weight: 300;
}

.top_contact_con .top_contact_con01 ul li:first-child {
    margin-right: 125px;
}

.top_contact_con .top_contact_con02 h2::before {
    content: url(../images/top_contact_con02_02.png);
    display: inline-block;
    margin-right: 0.15em;
}

.top_contact_con .top_contact_con02 .top_contact_con02_left {
    width: 560px;
    margin-right: 150px;
}

.top_contact_con .top_contact_con02 .top_contact_con02_left p:first-child {
    margin-bottom: 2em;
}

.top_contact_con .top_contact_con02 form{
    margin-top: 3em;
}

.top_contact_con .top_contact_con02 input.text_email {
    width: 300px;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 2.0rem;
}

.top_contact_con .top_contact_con02 input.btn_email {
    padding: 16px 23px;
    border-radius: 5px;
    border: 1px solid #000;
    color: #fff;
    background-color: #000;
    font-size: 1.6rem;
    cursor:pointer;
    transition: 0.8s;
}

.top_contact_con .top_contact_con02 input.btn_email:hover {
    background-color: #666;
    border: 1px solid #666;
}


@media screen and (max-width: 1600px) {
    .sake_bolg .blog_slider{
        margin-left: 0;
    }
}

@media screen and (max-width: 1600px) {
    .top_main .top_main_left .top_main_btn a{
        font-size: 1.4rem;
    }

    .export_services .wrapper {
        width: 96%;
        margin: 0 auto;
    }    

    .export_services_left {
        width: 55%;
    }

    .export_services_right {
        width: 40%;
    }

    .export_services_right img {
        width: 100%;
    }

    .top_system .top_system_text {
        width: 45%;
        margin-right: 5%;
    }

    .top_system {
        padding: 2em;
    }

    .top_system_img {
        width: 50%;
    }

    .top_system_img img {
        width: 100%;
    }

    .sake_bolg .blog_slider {
        width: 130%;
    }

    .sake_bolg .blog_slider .prev_icon {
        top: -55px;
        left: 72%;
    }

    .sake_bolg .blog_slider .next_icon {
        top: -55px;
        left: 75%;
    }
    
}

@media screen and (max-width: 1300px) {
    .top_main_btn.fl{
        display: block;
    }

    .top_main .top_main_left .top_main_btn a{
        font-size: 1.8rem;
    }

    .top_main .top_main_left .top_main_btn li {
        width: 100%;
        margin-bottom: 0.5em;
    }

    .top_products .products_slider {
        margin-left: 2%;
    }

    .tab-2 > div {
        padding: 1.5em 1em 1.5em 0;
    }

    .top_products .products_slider .next_icon {
        left: 74%;
    }

    .top_products .products_slider .prev_icon {
        left: 70%;
    }

    .top_contact_con .top_contact_con01 .top_contact_con01_left {
        width: 50%;
        margin-right: 5%;
    }

    .top_contact_con .top_contact_con01 ul li:first-child {
        margin-right: 2em;
    }

    .top_contact_con .top_contact_con02 .top_contact_con02_left {
        width: 50%;
        margin-right: 5%;
    }

    .top_contact_con .top_contact_con02 input.text_email {
        width: 68%;
    }
    
    .top_contact_con .top_contact_con02 input.btn_email {
        width: 25%;
        padding: 16px 1em;
    }

    .sake_bolg .blog_slider .next_icon {
        left: 74%;
    }

    .sake_bolg .blog_slider .prev_icon {
        left: 70%;
    }
        
}

@media screen and (max-width: 1000px) {
    .top_main .top_main_con.fl {
        display: block;
    }

    .top_main .top_main_left {
        width: 94%;
        display: block;
        padding-left: 0;
        margin: 0 auto;
    }

    .top_main .top_main_left h1 {
        margin-top: 0.5em;
    }

    .top_main .top_main_right {
        width: 94%;
        padding: 0;
        margin: 3em auto 0 auto;
    }

    .main_visual {
        height: 600px;
    }

    .top_main .top_main_con {
        margin-bottom: 4em;
    }

    .export_services_left .export_services_list summary span{
        display: flex;
    }

    .top_products .products_slider .next_icon {
        top: initial;
        bottom: -80px;
    }

    .top_products .products_slider .prev_icon {
        top: initial;
        bottom: -80px;
        left: 68%;
    }

    .top_system.fl {
        display: block;
    }

    .tab-2 {
        height: 500px;
    }

    .tab-2 > label.all {
        margin-top: -0.15em;
        font-size: 2.4rem;
    }

    .tab-2 > label {
        margin-right: 1em;
        font-size: 2.0rem;
    }

    .top_system .top_system_text {
        width: 100%;
        margin-right: 0;
    }

    .sake_bolg .blog_slider .prev_icon {
        left: 64%;
    }

    .sake_bolg .blog_slider .next_icon {
        left: 71.5%;
    }

    .sake_bolg_btn a {
        margin-left: auto;
    }
    
    .top_system img {
        width: 100%;
        margin-bottom: 2em;
    }

    .top_system .top_system_text a {
        display: block;
        margin: 0 auto;
    }

    .top_system {
        margin-bottom: 6em;
    }

    .top_contact_con .fl {
        display: block;
    }

    .top_contact_con .top_contact_con01 .top_contact_con01_left {
        width: 100%;
        margin-right: 0;
    }

    .top_contact_con .top_contact_con01 ul li:first-child {
        margin-right: 0;
    }

    .top_contact_con .top_contact_con02 .top_contact_con02_left {
        width: 100%;
        margin-right: 0;
    }
}

@media screen and (max-width: 768px) {
    .top_main {
        padding-bottom: 8em;
    }

    .main_visual dt {
        width: 100px;
    }

    .main_visual dd {
        background-image: none;
    }

    .main_visual dd span data {
        display: block;
    }

    .top_info_slide .slide-arrow {
        width: 26px;
        height: 26px;
        bottom: -60px;
    }

    .top_info_slide .prev-arrow {
        right: 120px;
    }

    .top_info_slide .slide-arrow::after {
        width: 8px;
        height: 8px;
    }

    .top_info_slide .prev-arrow::after {
        left: calc(40% + 5px);
    }

    .top_info_slide .next-arrow::after {
        transform: translate(-30%, -50%) rotate(-45deg);
    }

    .export_services .wrapper {
        width: 92%;
        margin: 0 auto;
        padding-left: 3%;
    }   

    .export_services_sp {
        display: block;
        margin-bottom: 3em;
    }

    .export_services_sp img {
        width: 100%;
        border-radius: 10px;
    }   

    .export_services_left {
        width: 100%;
    }

    .export_services_right {
        display: none;
    }

    .export_services_left p {
        margin-bottom: 2em;
    }

    .tab-2 {
        height: auto;
    }

    
}

@media screen and (max-width: 560px) {
    .top_main .top_main_left {
        width: 88%;
    }

    .top_main .top_main_left h1 {
        margin-top: 0.5em;
    }

    .top_main .top_main_right {
        width: 88%;
    }

    .main_visual {
        height: 400px;
    }

    .top_main {
        padding-bottom: 5em;
    }

    .top_main .top_main_left h1 {
        font-size: 4rem;
        margin-top: 0.5em;
        line-height: 1.0;
    }

    .main_visual dt {
        width: 80px;
    }

    .main_visual dd span data {
        font-size: 1.4rem;
    }

    .main_visual dd span {
        font-size: 1.4rem;
        line-height: 1.2;
    }

    .top_info_slide button {
        display: none !important;
    }

    .export_services {
        padding-top: 5em;
        padding-bottom: 5em;
    }

    .export_services .wrapper {
        width: 90%;
        padding-left: 0;
    }

    .export_services_left .export_services_list {
        max-width: 100%;
    }

    .export_services_left .export_services_list summary {
        font-size: 2rem;
    }

    .export_services_left .export_services_btn a {
        margin-top: 2em;
        margin-bottom: 0;
    }

    .top_products {
        padding: 5em 0;
    }

    .tab-2 .products_slider {
        height:30vh;
    }

    .tab-2 > label.all {
        margin-top: -0.15em;
        font-size: 2rem;
    }

    .tab-2 > label {
        margin-right: 0.5em;
        font-size: 1.8rem;
    }

    .top_products .products_slider {
        width: 100%;
        margin-left: 0;
    }

    .top_products .products_slider .next_icon {
        display: none !important;
    }

    .top_products .products_slider .prev_icon {
        display: none !important;
    }

    .top_products .products_slider .slick-list {
        padding: 0 3em 0 0 !important;
    }

    .top_products .products_slider button {
        display: none !important;
    }

    .top_products .products_slider button {
        display: none !important;
    }

    .top_info_slide .top_info_slide_con {
        width: 100%;
        max-width: 280px;
    }

    .top_info_slide .top_info_slide_con_img img {
        width: 100%;
        height: auto;
    }

    .sake_bolg .blog_slider .prev_icon {
        display: none !important;
    }

    .sake_bolg .blog_slider .next_icon {
        display: none !important;
    }

    .sake_bolg .blog_slider {
        margin: 30px auto 10px;
    }

    .sake_bolg .blog_slider {
        width: 100%;
    }

    .sake_bolg .slick-list {
        padding: 0 3em 0 0 !important;
    }

    .top_news_con {
        padding: 2em 0;
        margin-bottom: 60px;
    }

    .top_contact_con {
        padding: 2em 0;
        margin-bottom: 60px;
    }

    .top_contact_con .top_contact_con02 .top_contact_con02_left p:first-child {
        margin-bottom: 1em;
    }

    .top_contact_con .top_contact_con01 {
        padding-bottom: 3em;
        margin-bottom: 3em;
    }

    .top_contact_con .top_contact_con01 ul {
        font-size: 2rem;
    }

    .top_contact_con .top_contact_con02 form {
        margin-top: 1em;
    }

    .top_contact_con .top_contact_con02 input.text_email {
        padding: 8px;
        font-size: 1.6rem;
    }
    
    .top_contact_con .top_contact_con02 input.btn_email {
        padding: 8px;
        font-size: 1.4rem;
    }

    .top_news_con li data {
        display: block;
    }

}

@media screen and (max-width: 480px) {
    .tab-2 .products_slider {
        height:48vh;
    }
}


.voice {
    background-color: #FFF6EF;
    padding: 160px 0;
}

/* Flexboxレイアウトのためのスタイル */
.voice .accordion_area {
    display: flex;
    align-items: flex-start; /* 上端揃え */
    gap: 15px; /* accordion_one間のスペース */
    padding-bottom: 10px; /* スクロールバーのための余白 */
}

.voice .accordion_one {
    display: flex; /* headerとinnerを横並びにする */
    align-items: flex-start;
    flex-shrink: 0; /* accordion_one自体は縮まないようにする */
}

.voice .accordion_one .accordion_header {
    /* float: left; を削除 */
    /* width: 21%; を削除 (またはflex-basisで指定) */
    flex-shrink: 0; /* ヘッダーが縮まないように */
    text-align: left;
    position: relative;
    z-index: 1;
    cursor: pointer;
    transition: opacity 0.2s ease-in-out;
    /* margin-right: 20px; を削除 (gapで対応) */
    border-radius: 10px;
    /* ヘッダーの最小幅を設定して、内容が少なくても形を保つ */
    min-width: 320px; /* 必要に応じて調整 */
}

.voice .accordion_one .accordion_header .header_inner {
    width: 100%;
    max-width: 320px;
}

.voice .accordion_one .accordion_header .header_inner img {
   border-radius: 8px;
}

.voice .accordion_one .accordion_header span {
    color: #0079C0;
    font-weight: 600;
    font-size: 2.0rem;
    margin-bottom: 5px;
}

.voice .accordion_one .accordion_header span.number {
    font-size: 3.2rem;
}

.voice .accordion_one .accordion_header p {
    font-weight: 500;
    margin-top: 5px;
    line-height: 1.4;
}

.voice .accordion_one .accordion_header:hover {
    opacity: .8;
}

.voice .accordion_one .accordion_inner {
    /* float: left; を削除 */
    /* width: 0; を削除 */
    overflow: hidden;
    opacity: 0;
    max-width: 0;
    height: 0; /* ← これを追加 */
    padding: 0; /* 初期状態ではパディングなし */
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-left: 0; /* 初期状態ではマージンなし */
    transition: opacity 0.4s ease-in-out, max-width 0.4s ease-in-out, padding 0.4s ease-in-out, margin-left 0.4s ease-in-out;
}

.voice .accordion_one .accordion_inner.active {
    opacity: 1;
    height: auto; /* ← 表示時に高さを戻す */
    max-width: 560px; /* 表示時の最大幅 (調整可能) */
    /* padding: 2% 1.5%; 元の指定。必要に応じて調整 */
    padding: 20px; /* 固定パディングに変更 */
    margin-left: 15px; /* ヘッダーとの間にスペース */
}


.voice .accordion_one .accordion_inner .voice_title {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 20px; /* Tailwind mb-5相当 */
    color: #333;
}

.voice .accordion_one .accordion_inner p {
    margin-bottom: 15px; /* Tailwind mb-4相当 */
    line-height: 1.7; /* 行間調整 */
    color: #444;
}

.voice .accordion_one .accordion_inner p.name {
    text-align: right;
    font-weight: 500;
    margin-bottom: 0;
}





@media screen and (max-width: 1600px) {
    .voice .accordion_one .accordion_header .header_inner img {
        width: 100%;
    }

    .voice .accordion_one .accordion_header {
      flex: 0 0 32%; /* 固定幅ベースで30% */
      min-width: 260px; /* 必要なら調整 */
      max-width: 360px;
    }

    .voice .accordion_one .accordion_inner.active {
        opacity: 1;
        height: auto;
        width: 60%;
        max-width: 380px;
        padding: 20px;
        margin-left: -0.5em;
    }

    .voice .accordion_one .accordion_header .header_inner {
        width: 100%;
        max-width: 240px;
    }
  }


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

    .header_inner {
        width: 100%;
        max-width: 140px;
    }

    .voice .accordion_one .accordion_header {
        flex: 0 0 2%;
        min-width: 180px;
        max-width: 180px;
    }

    .voice .accordion_one .accordion_inner.active {
        opacity: 1;
        height: auto;
        width: 65%;
        max-width: 420px;
        padding: 20px;
        margin-left: 0;
    }

    .voice .accordion_one .accordion_inner.active {
        opacity: 1;
        height: auto;
        width: 60%;
        max-width: 380px;
        padding: 20px;
        margin-left: 1em
    }

    .voice .accordion_one .accordion_header .header_inner {
        width: 100%;
        max-width: 240px;
    }
  }

@media (max-width: 1000px) { /* モバイル */
    .voice .accordion_one .accordion_header {
        flex: 0 0 0;
        min-width: 100%;
        max-width: 100%;
    }

    .voice .accordion_area {
        flex-direction: column; /* 縦積み */
        gap: 15px;
        overflow-x: visible; /* 縦積みなので不要 */
        padding-bottom: 0;
        width: 70%;
        margin: 0 auto;
    }
    .voice .accordion_one {
        flex-direction: column; /* ヘッダーとコンテンツを縦積み */
        width: 100%;
    }

    .voice .accordion_one .accordion_inner.active {
        width: 100%;
        max-width: 100%;
    }

    .voice .accordion_one .accordion_header .header_inner {
        max-width: 100%;
    }

    .voice .accordion_one .accordion_header {
        width: 100%; /* ヘッダーは全幅 */
        margin-bottom: 0; /* .activeなinnerとの間にマージンは不要 */
    }
    .voice .accordion_one .accordion_inner.active {
        max-width: 100%; /* コンテンツは全幅 */
        margin-left: 0; /* 縦積みなので左マージン不要 */
        margin-top: 1em; /* ヘッダーとの間にスペース */
        margin-bottom: 2em;
    }


    .voice .accordion_one .accordion_header .header_inner {
       margin-top: 2em;
    }

    .voice .accordion_one .accordion_header .header_inner img {
        margin-bottom: 0.5em;
    }
}

@media (max-width: 560px) { /* モバイル */
    .voice .accordion_area {
        width: 100%;
    }

    .voice {
        padding: 5em 0;
    }
}


/* ---------------- こからサブページ ------------------*/

.sub-wrapper {
    width: 92%;
    max-width: 1200px;
    margin: 0 auto;
}

.sub-wrapper h1{
    font-size: 7rem;
    font-family: Yrsa, serif;
    font-weight: 400;
    margin-top: 60px;
}

.sub-box {
    padding-top: 160px;
    padding-bottom: 160px;
}

@media (max-width: 768px) { 
    .sub-box {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .sub-wrapper h1{
        font-size: 6rem;
    }
}

@media (max-width: 560px) { 
    .sub-wrapper h1{
        font-size: 4rem;
        line-height: 1.2;
    }
}


/* ---------------- パンクズ ------------------*/
.breadcrumb {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 100%;
    padding-top: 10px;
}

.breadcrumb a {
    text-decoration: none;
}

/* ---------------- ページ送り ------------------*/
.wp-pagenavi {
    width: 100%;
    text-align: center;
    margin: 5em 0 0 0;
    overflow: auto;
    padding: 0.8em;
    box-sizing: border-box;
}

.wp-pagenavi a {
    padding: 0.8em 0.7em 0.8em 0.9em;
    color: #000;
    text-decoration: none;
    margin-left: 0.4em;
    border: 1px solid #ccc;
    border-radius: 5px;
    display: inline;
}

.wp-pagenavi span.current {
    padding: 0.8em 1.1em;
    color: #000;
    background: #E6E3E3;
    border: 1px solid #ccc;
    margin-left: 0.4em;
    box-sizing: border-box;
    border-radius: 5px;
}

.wp-pagenavi a.nextpostslink {
    padding: 0.8em 1.1em;
}

.wp-pagenavi span.extend {
    margin-left: 0.4em;
}

@media screen and (max-width: 560px) {
    .wp-pagenavi {
        margin: 2em 0 0 0;
    }

    .wp-pagenavi a {
        padding: 0.4em 0.8em;
    }

    .wp-pagenavi span.current {
        padding: 0.4em 0.8em;
    }

    .wp-pagenavi a.nextpostslink {
        padding: 0.4em 0.8em;
    }
}

/* ---------------- パーツ01 ------------------*/
.parts01 {
    padding-bottom: 60px;
    background-image: linear-gradient(90deg, #ffffff, #f0f6f7);
}


@media screen and (max-width: 1000px) {
    .parts01 {
        padding-bottom: 5em;
    }

    .parts01 .sub__btn a::after {
        font-size: 1.8rem;
    }
}

@media screen and (max-width: 560px) {
    .parts01 {
        padding-top: 1em;
        padding-bottom: 3em;
    }

}
  
/* ---------------- 4つ並びBOX ブログ一覧 ------------------*/
.blog-bg{
    background-image: url(../images//bolg-bg.png);
    background-size: cover;
}

.box4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
    grid-gap: 45px 26px;
}

.box4 .box4_con {
    width: 100%;
    max-width: 280px;
    border-radius: 5px;
}

.box4 .box4_con a {
  display: block;
  text-decoration: none;
  transition: 0.8s;
}

.box4 .box4_con_img {
  border-radius: 5px 5px 0 0;
}

.box4 .box4_con_img img {
  width: 280px;
  height: 165px;
  border-radius: 5px 5px 0px 0px;
}

.box4 .box4_con_text {
  padding: 15px 0 10px 0;
}

.box4 .box4_con_text data {
    font-size: 1.6rem;
    display: block;
}

.box4 .box4_con_text h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.7em;
  line-height: 1.2;
  color: #333;
}

.box4 .box4_con_text p {
  font-size: 1.6rem;
  line-height: 1.4;
}

@media (max-width: 1320px) { 
    .box4 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
        justify-content: center;
        grid-gap: 45px 3%;
    }

    .box4 .box4_con_img img {
        width: 100%;
        height: auto;
      }
}

@media (max-width: 1000px) { 
    .box4 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(46%, 1fr));
        justify-content: center;
        grid-gap: 45px 4%;
    }

    .box4 .box4_con {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 560px) { 
    .box4 {
        grid-gap: 35px 3%;
    }

    .box4 .box4_con_text h3 {
        font-size: 1.6rem;
    }
}


/* ---------------- ブログ詳細 ------------------*/
.blog_box {
    margin-top: 60px;
    line-height: 2;
}

.blog_box .sns-button-wrap {
    margin-bottom: 10px;
}

.blog_box .sns-button-wrap a {
    text-decoration: none;
}

.blog_box p {
    margin-bottom: 1.85em;
}

.blog_box .blog_title data {
    font-size: 1.4rem;
}

.blog_box .blog_title ul {
    display: flex;
    margin-bottom: 2em;
}

.blog_box .blog_title ul li {
    display: flex;
}

.blog_box .blog_title ul li a {
    background-image: url("../images/path.png");
    background-repeat: no-repeat;
    background-position: left 0 top 0.6em;
    background-size: 1em;
    padding: 0.2em 0.8em 0.2em 1.5em;
    display: inline-block;
    text-decoration: none;
}

.blog_box .blog_title h2 {
    font-size:6.0rem;
    margin-bottom: 20px;
}

.blog_box .blog_con h2 {
    font-size:4.6rem;
    margin-top: 1.5em;
    margin-bottom: 10px;
}

.blog_box .blog_con h3 {
    font-size:4.0rem;
    color: #333;
    margin-top: 50px;
    margin-bottom: 15px;
}

.blog_box .blog_con h4 {
    font-size:3.6rem;
    margin-top: 40px;
    margin-bottom: 15px;
}

.blog_box .blog_con h5 {
    font-size:3.2rem;
    margin-top: 40px;
    margin-bottom: 15px;
}

.blog_box .blog_con h6 {
    font-size:2.8rem;
    margin-top: 40px;
    margin-bottom: 15px;
}

.blog_box .blog_con a {
    text-decoration: underline;
}

.blog_box .blog_con ul {
    margin: 0.5em 0;
}

.blog_box .blog_con ul li{
    padding-left: 1.5em;
    position: relative;
    font-weight: 600;
    margin-bottom: 5px;
}

.blog_box .blog_con ul li::before{
    content: "●";
    padding: 0px 3px;
    font-size: 3.2rem;
    top: -0.5em;
    position: absolute;
    margin-left: -1em;
}

.blog_box .blog_con ol {
    margin: 0.5em 0;
    list-style-type: decimal;
    padding-left: 1.8em;
    margin-left: -0.5em;
}

.blog_box .blog_con ol li {
    position: relative;
    font-weight: 600;
    }

.blog_box .blog_con img {
    margin: 2em auto 4em auto;
    max-width: 100%;
}

.blog_box .blog_con table {
    width: 100%;
    margin-bottom: 1em;
    border-top: 1px solid #E3E4E4;
}

.blog_box .blog_con table tr{
    border-bottom: 1px solid #E3E4E4;
}

.blog_box .blog_con table th {
    width: 275px;
    text-align: left;
    padding: 27px;
    font-weight: 700;
    background-color: #F4F4F3;
}

.blog_box .blog_con table td {
    padding: 27px;
    background-color: #fff;
}

.blog_box .blog_con .btn {
    margin: 3em auto 0 auto;
}

.blog_box .blog_con .btn a {
    text-decoration: none;
    display: block;
    width: 200px;
    border: 1px solid #ccc;
    text-align: center;
    margin: 0 auto;
    padding: 15px;
    font-weight: 600;
    transition: 0.8s;
    border-radius: 5px;
}

.blog_box .blog_con .btn a:hover {
    background-color: #e7e7e7;
}

.blog_box .blog_con .blog-staff {
    background-color: #F0F7FC;
    border: 1px solid #B5DEFC;
    display: flex;
    padding: 30px 30px 25px 30px;
    line-height: 1.45;
}

.blog_box .blog_con .blog-staff .blog-staff-img {
    width: 140px;
    margin-right: 30px;
}

.blog_box .blog_con .blog-staff .blog-staff-img img {
    margin: 0;
}

.blog_box .blog_con .blog-staff .blog-staff-text {
    width: 950px;
}

.blog_box .blog_con .blog-staff .blog-staff-text p {
    margin-top: 15px;
    margin-bottom: 0;
}

.blog_box .blog_con .blog-staff .blog-staff-text span {
    font-weight: 600;
}

#ez-toc-container {
    max-width: 600px;
    margin: 2em auto 0 auto;
}

#ez-toc-container nav {
    margin-top: 2em;
}

#ez-toc-container.ez-toc-container-direction {
    width: 100%;
    padding: 3em;
}

.ez-toc-title-container {
    text-align: center;
}
  
  
@media screen and (max-width: 1260px) {
    .blog_box .blog_con img {
        max-width: 100%;
        width: auto;
        height: auto;
    }
}
  
@media screen and (max-width: 768px) {
    .blog_box {
        width: 100%;
    }

    .blog_side {
        display: none;
    }

    .blog_box .blog_con table th {
        width: auto;
        display: block;
        padding: 1em;
    }

    .blog_box .blog_con table td {
        width: auto;
        display: block;
        padding: 1em;
    }
}
  
@media screen and (max-width: 560px) {
    .blog_box .sns-button-wrap img {
        height: 26px;
        width: 24px;
    }

    .blog_box {
        line-height: 1.8;
    }

    .blog_box .blog_title h2 {
        font-size: 3.2rem;
    }

    .blog_box .blog_con h2 {
        font-size:3.0rem;
    }

    .blog_box .blog_con h3 {
        font-size:2.8rem;
    }

    .blog_box .blog_con h4 {
        font-size:2.6rem;
    }

    .blog_box .blog_con h5 {
        font-size:2.4rem;
    }

    .blog_box .blog_con h6 {
        font-size: 2.2rem;
    }

    .blog_box .blog_con ul li::before {
        padding: 0px 3px;
        font-size: 2.6rem;
        top: -0.4em;
        margin-left: -1em;
    }

    .blog_box .blog_con .blog-staff .blog-staff-img {
        width: 25%;
        margin-right: 5%;
    }

    .blog_box .blog_con .blog-staff .blog-staff-text {
        width: 70%;
    }

    .blog_box .blog_con .blog-staff {
        display: block; /* flex解除 */
      }
    
      .blog_box .blog_con .blog-staff .blog-staff-img {
        float: left;
        width: 120px; /* 少し縮めると回り込みが自然 */
        margin: 0 15px 10px 0;
      }
    
      .blog_box .blog_con .blog-staff .blog-staff-text {
        width: auto; /* 固定幅を解除して可変に */
      }
} 


/* ---------------- 商品一覧 ------------------*/
.sub-box-map {
    margin: 70px 0;
}

.sub-box-map .sub-box-map-box {
    display: flex;
    justify-content: space-between;
}

.sub-box-map .map-list {
    width: 560px;
    font-size: 1.8rem;
}

.sub-box-map .map-list h3 {
    color: #ff8800;
    font-weight: 700;
}

.sub-box-map .map-list table {
    margin-top: 10px;
}

.sub-box-map .map-list th {
    color: #0079C0;
    font-weight: 600;
    font-size: 1.8rem;
    text-align: right;
    padding: 10px;
    white-space: nowrap;
    vertical-align: top;
}

.sub-box-map .map-list td {
    vertical-align: top;
    padding: 10px 0;
}

.sub-box-map .map {
    width: 600px;
}

.product-bg {
    background-image: url("../images/product-bg.png");
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
}

.product-list.box4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center;
    grid-gap: 85px 26px;
}

.product-list.box4 .box4_con {
    width: 100%;
    max-width: 280px;
    border-radius:0;
    background-color: #fff;
    border: 1px solid #EBEAEA;
    position: relative;
}

.product-list.box4 .box4_con a {
  display: block;
  text-decoration: none;
  transition: 0.8s;
}

.product-list.box4 .box4_con_img {
  border-radius: 0;
}

.product-list.box4 .box4_con_img img {
  width: 280px;
  height: 280px;
  border-radius: 0;
}

.product-list.box4 a:hover img {
    opacity: 1;
}

.product-list.box4 .box4_con_text {
  padding: 15px;
}

.product-list.box4 .box4_con_text data {
    font-size: 1.6rem;
    display: block;
}

.product-list.box4 .box4_con_text h3 {
  font-family: Inter, Arial, sans-serif;
  font-size: 1.8rem;
  font-weight: 600;
  margin-bottom: 0.7em;
  line-height: 1.2;
  color: #333;
  position: relative;
  display: inline-block;
  transition: color 0.8s;
}
  
.product-list.box4 .box4_con_text p {
    font-size: 1.4rem;
}

.product-list.box4 span {
    font-size: 1.4rem;
    color: #fff;
    background-color: #0079c0;
    padding: 3px 10px 3px 3px;
    margin-top: -15px;
    display: table;
    position: absolute;
    background-image: url('../images/product-list-ca.png');
    background-repeat: no-repeat;
    background-position: right -1px top;
}

.product-list.box4 .box4_con:hover {
    box-shadow: 3px 3px 3px #ccc;
    transition: 0.8s;
}

.product-list.box4 .box4_con_text h3::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px; /* 文字下に線を置く */
    width: 0;
    height: 2px;
    background-color: #0079c0;
    transition: width 0.3s;
}

.product-list.box4 .box4_con:hover h3 {
    color: #0079c0;
}

.product-list.box4 .box4_con:hover h3::after {
    width: 100%;
}

@media (max-width: 1320px) { 
    .sub-box-map .map-list {
        width: 50%;
    }
    
    .sub-box-map .map {
        width: 45%;
    }

    .sub-box-map .map img {
        width: 100%;
        height: auto;
    }
    
    .product-list.box4  {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
        justify-content: center;
        grid-gap: 65px 3%;
    }

    .product-list.box4 .box4_con_img img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1000px) {   
    .product-list.box4 {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(46%, 1fr));
        justify-content: center;
        grid-gap: 45px 4%;
    }

    .product-list.box4 .box4_con {
        width: 100%;
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .sub-box-map .sub-box-map-box {
        display: block;
    }

    .sub-box-map .map-list {
        width: 100%;
    }
    
    .sub-box-map .map {
        width: 100%;
    }

    .product-list.box4 .box4_con_text h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 560px) {
    .sub-box-map .map-list {
        font-size: 1.6rem;
    }
}


/* ============ 検索フォーム ============ */
.search {
    display: flex;
    margin-bottom: 80px;
}

.search select {
   width: 220px;
   height: 35px;
   border-radius: 5px;
   border: 1px solid #ccc;
   color: #6b6b6b;
}


#feas-searchform-0 {
    /*display: flex;
    flex-wrap: wrap;*/
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    box-sizing: border-box;
}

.feas_archive_freeword {
    flex: 1;
    min-width: 310px;
    padding: 8px;
    font-size: 1.6rem;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box;
    outline: none;
}

.feas-submit-button {
    padding: 8px 38px;
    font-size: 1.6rem;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color .3s;
    background-color: #000;
    position: relative;
}

.selectbox-2 {
    position: relative;
    margin-right: 15px;
}

.selectbox-2::before,
.selectbox-2::after {
    position: absolute;
    content: '';
    pointer-events: none;
}

.selectbox-2::before {
    right: 5px;
    display: inline-block;
    width: 35px;
    height: 35px;
    border-radius: 0 5px 5px 0;
    background-color: #141414;
    content: '';
}

.selectbox-2::after {
    position: absolute;
    top: 48%;
    right: 1.3em;
    transform: translate(50%, -50%) rotate(45deg);
    width: 6px;
    height: 6px;
    border-bottom: 2px solid #fff;
    border-right: 2px solid #fff;
    content: '';
}

.selectbox-2 select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-width: 230px;
    height: 35px;
    padding: .4em 3.6em .4em .8em;
    border: 1px solid #545454;
    border-radius: 5px;
    color: #707070;
    cursor: pointer;
    font-size: 1.6rem;
}

.selectbox-2 select:focus {
    outline: 1px solid #545454;
}


.search-form-3 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border: 1px solid #777777;
    border-radius: 5px;
}

.search-form-3 input {
    width: 250px;
    height: 33px;
    padding: 1px 15px;
    border: none;
    box-sizing: border-box;
    font-size: 1.6rem;
    outline: none;
}

.search-form-3 input::placeholder{
    color: #777777;
}

.search-form-3 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 33px;
    border: none;
    background-color: transparent;
    cursor: pointer;
}

.search-form-3 button::after {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23777777'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}

@media (max-width: 900px) {
    .search {
        display: block;
    }

    .selectbox-2 {
        margin-right:0;
    }

    .selectbox-2:first-child {
        margin-right:2%;
    }

    .selectbox-2 select {
        margin-bottom: 1em;
        width: 45%;
        min-width: auto;
    }
    
}

@media screen and (max-width: 560px) {
    .feas_archive_freeword {
        padding: 14px;
        height: 50px;
    }

    .feas-submit-button {
        padding: 12px 20px;
        font-size: 1.6rem;
        height: 50px;
    }

    .selectbox-2 select {
        width: 43%;
    }
    
}


/* ---------------- 商品詳細 ------------------*/
.product-con {
    margin: 80px 0;
    display: flex;
    justify-content: space-between;
}

.product-con .product-con_img {
    width: 500px;
    text-align: center;
}

.product-con .product-con_text {
    width: 600px;
}

.product-con .product-con_text h3 {
    font-size: 3.0rem;
    font-family: Inter, Arial, sans-serif;
    color: #333;
    font-weight: 500;
    margin-bottom: 35px;
    line-height: 1.2;
}

.product-con .product-con_text table {
    width: 100%;
    margin-bottom: 55px;
}

.product-con .product-con_text th {
    font-weight: 500;
    text-align: left;
    border-bottom: 1px solid #DFDFDF;
    padding: 15px 0;
    width: 200px;
}

.product-con .product-con_text td {
    border-bottom: 1px solid #DFDFDF;
    padding: 15px 0;
}

.product-con .product-con_text .btn a{
    display: block;
    width: 140px;
    margin: 50px auto 0 auto;
    padding: 8px 20px;
    color: #fff;
    background-color: #0079C0;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    transition: 0.8s;
    font-size: 1.6rem;
    background-image: url(../images/h_btn.png) ;
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.product-con .product-con_text .btn a:hover{
    background-color: #8ac5e7;
}

.product-con-list {
    border-top:1px solid #DEDEDE;
    padding-top:160px;
    margin-top: 160px;
    margin-bottom: 160px;
}

.product-con-list .box4 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
    justify-content: center;
    grid-gap: 85px 20px;
}

.product-con-list .box4 .box4_con {
    margin-right: 20px;
    padding-bottom: 3em;
    background-color: #fff;
    overflow: hidden;
    display: block;
    height: auto !important;
    position: relative;
    text-align: center;
    border-radius: 0;
}

.product-con-list .box4 .box4_con p.btn {
    margin-bottom: 0;
    padding: 0.5em;
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 600;
    border: 1px solid #333;
    border-radius: 30px;
    width: 145px;
}

.product-con-list .box4 .box4_con:hover p.btn {
    background-color: #0079c0; /* 背景色 */
    color: #fff;               /* 文字色 */
    border-color: #0079c0;     /* 枠線も同じ色に */
    transition: all 0.8s ease; /* スッと変化 */
}

.product-con-list .box4 .box4_con .mask {
    display: block;
    line-height: 0;
    /*行の高さを0にする*/
    overflow: hidden;
    /*拡大してはみ出る要素を隠す*/
}

.product-con-list .box4 .box4_con img {
    transform: scale(1);
    transition: .3s ease-in-out;
}

.product-con-list .box4 .box4_con .slider_text {
    padding: 30px 20px 30px 20px;
}

.product-con-list .box4 .box4_con h3 {
    font-family: Inter, Arial, sans-serif;
    font-size: 1.8rem;
    color: #333;
    font-weight: 600;
    line-height: 120%;
    margin-bottom: 0.8em;
}

.product-con-list .btn a{
    display: block;
    width: 240px;
    margin: 60px auto;
    padding: 12px 20px;
    color: #fff;
    background-color: #0079C0;
    text-decoration: none;
    text-align: center;
    border-radius: 5px;
    transition: 0.8s;
    font-size: 1.6rem;
    background-image: url(../images/h_btn.png) ;
    background-repeat: no-repeat;
    background-position: right 15px center;
}

.product-con-list .btn a:hover{
    background-color: #8ac5e7;
}


@media (max-width: 1320px) {   
    .product-con-list .box4 {
        grid-template-columns: repeat(auto-fit, minmax(22%, 1fr));
        grid-gap: 85px 3%;
    }

    .product-con-list .box4 .box4_con img {
        width: 100%;
        height: auto;
    }
}

@media (max-width: 1000px) {   
    .product-con .product-con_text h3 {
        font-size: 2.6rem;
    }

    .product-con .product-con_img {
        width: 40%;
    }

    .product-con .product-con_img img {
        width: 100%;
    }
    
    .product-con .product-con_text {
        width: 50%;
    }

    .product-con-list .box4 {
        grid-template-columns: repeat(auto-fit, minmax(46%, 1fr));
        grid-gap: 45px 4%;
    }
}

@media (max-width: 768px) { 
    .product-con .product-con_text h3 {
        font-size: 2.4rem;
    }

    .product-con {
        display: block;
    }

    .product-con .product-con_img {
        width: 100%;
        margin-bottom: 2em;
    }
    
    .product-con .product-con_text {
        width: 100%;
    }

    .product-con-list {
        padding-top:80px;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    
}


.top03 a.btn {
    display: block;
    margin: 2em auto 4em auto;
    width: auto;
    background-color: #0079C0;
    padding: 0.5em;
    width: 320px;
    color: #fff;
    text-align: center;
    font-weight: bold;
}