@charset "UTF-8";

.maker-slider {
    padding: 0 0 clamp(40px, 6vw, 75px);
}

.ec-sliderRole.maker-slider__inner {
max-width: 1400px;
    margin: clamp(24px, 3vw, 42px) auto 0;
    padding: 0 clamp(22px, 2.6vw, 32px);
    box-sizing: border-box;
    display: block;
}

.maker_visual {
    margin: 0 -15px;
    position: relative;
}

.maker_visual .item {
    padding: 0 15px;
    box-sizing: border-box;
}

.maker-slider__card {
    display: block;
    max-width: 590px;
    margin: 0 auto;
    color: inherit;
    text-decoration: none;
    background: #ffffff;
    transition: transform 0.28s ease, box-shadow 0.28s ease;
}

.maker-slider__card:hover,
.maker-slider__card:focus-visible {
    box-shadow: 0 0px 20px rgba(7, 80, 175, 0.13);
}

.maker-slider__imageWrap {
    background: #f5f5f5;
}

.maker-slider__imageWrap img {
    display: block;
    width: 100%;
    height: auto;
}

.maker-slider__cta {
display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 14px 20px 12px;
    background: linear-gradient(90deg, #14568f 0 0) left top / 0 100% no-repeat, #07152f;
    color: #ffffff;
    font-size: clamp(15px, 1.6vw, 18px);
    font-weight: 500;
    line-height: 1;
    transition: background-size 0.32s ease;
}

.maker-slider__card:hover .maker-slider__cta,
.maker-slider__card:focus-visible .maker-slider__cta {
    background-size: 100% 100%, auto;
}

.maker-slider__cta::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 21px;
    width: 18px;
    height: 18px;
    background: url("../img/common/icon_y2.png") center center / contain no-repeat;
    transform: translateY(-50%);
}

.maker-slider .slick-list {
    overflow: hidden;
}

.maker-slider .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin: 38px 0 0;
}

.maker-slider .slick-dots li {
    width: 22px;
    height: 22px;
    margin: 0;
}

.maker-slider .slick-dots li button {
    width: 22px;
    height: 22px;
    padding: 0;
}

.maker-slider .slick-dots li button::before {
    top: 50%;
    left: 50%;
    width: 14px;
    height: 14px;
    opacity: 1;
    background: #ffffff;
    border: 1px solid #c5cfdf;
    border-radius: 0;
    transform: translate(-50%, -50%);
}

.maker-slider .slick-dots li.slick-active button::before {
    background: #07368d;
    border-color: #07368d;
}

.maker-slider .maker-slider__arrow {
    position: absolute;
    z-index: 2;
    width: 38px;
    height: 38px;
    padding: 0;
top: auto;
bottom: -8px;
    /* border: 1px solid #d5ddeb; */
    background: #ffffff url("../img/common/slide_icon.jpg") center center /contain no-repeat;
    color: transparent;
    cursor: pointer;
}

.maker-slider .maker-slider__arrow::before {
    content: none;
}

.maker-slider .maker-slider__arrow--prev {
    left: calc(50% - 132px);
    transform: rotate(360deg);
}

.maker-slider .maker-slider__arrow--next {
    right: calc(50% - 132px);
    transform: rotate(180deg);
}

@media screen and (max-width: 1024px) {
    .maker-slider__inner {
        padding: 0 20px;
    }

    .maker-slider .maker-slider__arrow--prev {
        left: calc(50% - 118px);
    }

    .maker-slider .maker-slider__arrow--next {
        right: calc(50% - 118px);
    }
}

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

    .maker-slider__inner {
        margin-top: 32px;
        padding: 0 16px;
    }

    .maker_visual {
        margin: 0 -8px;
    }

    .maker_visual .item {
        padding: 0 8px;
    }


    .maker-slider .slick-dots {
        gap: 12px;
        margin-top: 28px;
    }

    .maker-slider .maker-slider__arrow {
        width: 34px;
        height: 34px;
    }







}
/* ------------------------------------------------
   2026-09-25 取り扱いメーカー：途切れず流れ続ける表示（動きは index.twig のJS）
   元のスライダー（矢印・ドット付き）に戻すときは、ここから「ここまで」をコメントアウトし、
   index.twig のスライダー設定のコメントアウトを外す
------------------------------------------------ */
.maker-slider__inner {
    overflow: hidden;
}

.maker_visual {
    display: flex;
    width: max-content;
    will-change: transform;
}

.maker_visual .item.slick-slide {
    display: block;
    float: none;
    flex: 0 0 auto;
    width: min(30vw, 460px);
    height: auto;
}

/* 下の矢印とドット（JSで追加）。見た目・左右の位置は上の .maker-slider .slick-dots / .maker-slider__arrow の指定をそのまま使う
   外枠(.maker-slider__inner)で横のはみ出しを隠しているため、矢印が下で切れないよう 8px 余白をとって下端に置く */
.maker-slider__nav {
    position: relative;
    padding-bottom: 8px;
}

.maker-slider .maker-slider__nav .maker-slider__arrow {
    bottom: 0;
}

@media screen and (max-width: 767px) {
    .maker_visual .item.slick-slide {
        width: 72vw;
    }
}
/* 取り扱いメーカー：途切れず流れ続ける表示 ここまで
------------------------------------------------ */

.recomendo {
    padding: 0 0 clamp(40px, 6vw, 75px);
}

.recomendo .main_wrap {
    padding: 0 32px;
    box-sizing: border-box;
}

.recomendo__layout {
    display: flex;
    align-items: center;
    gap: clamp(20px, 2.4vw, 28px);
    margin-top: 48px;
}

.recomendo__main {
    flex: 0 0 43.5%;
}

.recomendo__mainLink,
.recomendo__link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.recomendo__mainLink:hover,
.recomendo__mainLink:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(14, 51, 99, 0.28);
}
.recomendo__link:hover,
.recomendo__link:focus-visible {
    transform: translateY(-6px);
    /* box-shadow: 0 18px 34px rgba(12, 50, 100, 0.28); */
}


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

/* 2026-09-28 左の大きい画像：背景固定のスライドショー（切替は index.twig のJS） */
.recomendo__stage {
    position: relative;
}

.recomendo__slides {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recomendo__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.2s ease;
}

.recomendo__slide.is-active {
    opacity: 1;
}

/* 2026-09-29 商品画像は大きさ・縦横比が自由。背景の中央の枠（横60%×縦62%）に縦横比を保って収める
   商品の見た目の大きさを変えるときは width・height と、中央に置くための top・left をそろえて変える */
.recomendo__slides .recomendo__slide img {
    position: absolute;
    top: 19%;
    left: 20%;
    width: 60%;
    height: 62%;
    object-fit: contain;
}

@media (prefers-reduced-motion: reduce) {
    .recomendo__slide {
        transition: none;
    }
}

.recomendo__list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 56px 28px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.recomendo__item {
    text-align: center;
}

.recomendo__item img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    margin: 0 auto;
}

.recomendo__item p {
    margin: 18px 0 0;
    line-height: 1.35;
}

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

    .recomendo .main_wrap {
        padding: 0 20px;
    }

    .recomendo__layout {
        display: block;
        margin-top: 32px;
    }

    .recomendo__main {
        max-width: 520px;
        margin: 0 auto 28px;
    }

    .recomendo__list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
    }

    .recomendo__item img {
        max-width: 150px;
    }

    .recomendo__item p {
        margin-top: 12px;
    }
}

/* 元々デフォルトで付いてるsliderのCSS */

        .slick-slider {
            margin-bottom: 30px;
        }

        .slick-dots {
            position: absolute;
            bottom: -45px;
            display: block;
            width: 100%;
            padding: 0;
            list-style: none;
            text-align: center;
        }

        .slick-dots li {
            position: relative;
            display: inline-block;
            width: 20px;
            height: 20px;
            margin: 0 5px;
            padding: 0;

            cursor: pointer;
        }

        .slick-dots li button {
            font-size: 0;
            line-height: 0;
            display: block;
            width: 20px;
            height: 20px;
            padding: 5px;
            cursor: pointer;
            color: transparent;
            border: 0;
            outline: none;
            background: transparent;
        }

        .slick-dots li button:hover,
        .slick-dots li button:focus {
            outline: none;
        }

        .slick-dots li button:hover:before,
        .slick-dots li button:focus:before {
            opacity: 1;
        }

        .slick-dots li button:before {
            content: " ";
            line-height: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 12px;
            height: 12px;
            text-align: center;
            opacity: .25;
            background-color: black;
            border-radius: 50%;

        }

        .slick-dots li.slick-active button:before {
            opacity: .75;
            background-color: black;
        }

        .slick-dots li button.thumbnail img {
            width: 0;
            height: 0;
        }

/* 追加記述 */
.ec-sliderRole{
    max-width: 100%;
        padding: 0;
}


/*################################################
    分析測定機器の種別  */


.type {
    padding:  0 0 clamp(40px, 6vw, 75px);
}

.type .main_wrap {
    box-sizing: border-box;
}

.type__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(15px, 2.7vw, 34px);
    margin: 30px auto 0;
    padding: 0;
    list-style: none;
        max-width: 900px;
}

.type__item {
    min-width: 0;
}

.type__link {
    display: block;
    text-decoration: none;
}

.type__imageWrap {
    display: block;
    position: relative;
    overflow: hidden;
}

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

.type__image--desktop {
    display: none;
}

.type__image--hover {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.35s ease;
}

.type__link:hover .type__image--hover,
.type__link:focus-visible .type__image--hover {
    opacity: 1;
}

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

    .type__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: clamp(16px, 1.7vw, 20px);
    }
}

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

    .type__image--mobile {
        display: none;
    }

    .type__image--desktop {
        display: block;
    }
}


/*
    分析測定機器の種別 END
################################################*/



/*################################################
    製品検索 search_block */

.search_block .main_title,
.search_block .title_txt{
  color: #fff;
}
.search_block .title_txt{
 font-size: clamp(15px, 1.8vw, 20px);
}

.search_block .ec-contactRole{
    max-width: 1200px;
    padding: 0 4%;  
  }
.searchform{
background: #fff;
margin-top: 2rem;
    padding: clamp(10px, 2vw, 32px) clamp(10px, 2vw, 32px) clamp(15px, 4vw, 70px);
}

.search_block{
  padding: clamp(20px, 3vw, 42px) 0;
background: #052A5B;
    background: linear-gradient(90deg, rgba(5, 42, 91, 1) 0%, #07142a 100%);
}


@media only screen and (min-width: 768px) and (min-width: 768px) {
    .search_block .ec-off1Grid .ec-off1Grid__cell {
        /* width: auto; */
    }
}
@media only screen and (min-width: 768px) {
    .search_block .ec-off1Grid .ec-off1Grid__cell {
        /* position: relative;
        min-height: 1px;
        margin-left: 0; */
    }
}

.ec-borderedDefs dl{
  padding: 0;
  border-bottom: 1px dotted #adadca;
}
.ec-borderedDefs dt{
          padding: 1rem;
  background: #efeff0;
  font-size: clamp(15px, 1.6vw, 18px);
  font-weight: 700;
}

.ec-borderedDefs dd{
      padding: clamp(14px, 1.4vw, 16px) clamp(14px, 1.4vw, 16px) clamp(12px, 1.2vw, 14px);
      margin: 0;
}
.search_block .ec-input input{
      margin: 0;
}

.datepicker-days th.dow:first-child,
.datepicker-days td:first-child {
    color: #f00;
}
.datepicker-days th.dow:last-child,
.datepicker-days td:last-child {
    color: #00f;
}
.ec-searchDetailRole select {
    width: 100%;
}
.ec-inputRange input + span,
.ec-inputRange input {
    display: inline-block;
    margin-left: 2%;
}
.ec-inputRange input:first-child {
    margin-left: 0;
}
.ec-inputRange input {
    width: 45%;
}
.ec-checkbox-item {
    display: inline-block;
    margin-right: 2%;
}
.ec-layoutRole__left dl,
.ec-layoutRole__right dl,
.ec-layoutRole__left dt,
.ec-layoutRole__right dt,
.ec-layoutRole__left dd,
.ec-layoutRole__right dd {
    display: block;
    width: 100%;
}
.ec-layoutRole__left .ec-inputRange input,
.ec-layoutRole__right .ec-inputRange input {
    width: 85%;
    margin-left: 0;
}
.ec-searchDetail__toggleArea,
.ec-layoutRole__left .ec-searchDetai__togglelBtn,
.ec-layoutRole__right .ec-searchDetai__togglelBtn {
    display: none;
}
.ec-layoutRole__left .ec-searchDetail__toggleArea,
.ec-layoutRole__right .ec-searchDetail__toggleArea {
    display: block;
}
.ec-searchDetai__togglelBtn {
    text-align: center;
    margin: 20px 0;
}
.ec-searchDetai__togglelBtn span {
    cursor: pointer;
}
.ec-searchDetailClose {
    display: inline-block;
}
.ec-searchDetailCloseBtn {
    display: inline-block;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    color: #fff;
    text-align: center;
    background: #000;
}
.ec-searchDetai__togglelBtn:hover i {
    color: #fff;
}
.is_active + .ec-searchDetai__togglelBtn i {
    transform: rotate(180deg) translateY(1px);
}
.ec-borderedDefs dd {
	line-height: 1.6;
}
.ec-checkbox hr {
  border-top: 1px dotted #8C8B8B;
  background: #fff;
}

.ec-borderedDefs{
 margin-bottom: clamp(20px, 2.7vw, 34px);
}


@media only screen and (min-width: 768px) {
    .ec-borderedDefs dd {
		line-height: 1.6;
    }
}
.ec-contactRole .ec-searchDetail__toggleArea {
  display: block !important;
}
.ec-contactRole .ec-searchDetai__togglelBtn {
  display: none !important;
}
.search_block .ec-contactRole{
  font-size: clamp(14px, 1.4vw, 16px);
}
/* 2026-09-25 製品検索のチェックボックスの文字を読みやすく（太さ400→500、16px→最大18px） */
.search_block .ec-checkbox span{
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 500;
}
.ec-checkbox-groupTitle {
display: block;
    width: 100%;
    margin: 5px 0 5px;
    font-weight: 800;
    font-size: clamp(15px, 1.6vw, 18px);
    color: #07368d;
}
.ec-off1Grid__cell h2,.ec-off1Grid__cell p{
  text-align:center;
}
.search_block .ec-blockBtn--cancel{
    background-color: #07368d;
    border-color: #07368d;
}



    /*
    製品検索 END
################################################*/



/*################################################
    Company企業情報  */

.company {
    padding: clamp(40px, 6vw, 75px) 0 clamp(40px, 6vw, 75px);
}

.company .s-lead{
text-align: center;
    margin-top: clamp(20px, 2.2vw, 24px);
}

.company__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 34px;
    margin: clamp(24px, 3vw, 42px) 0 0;
    padding: 0;
    list-style: none;
}


.company__link {
    display: block;
    width: 100%;
    max-width: 665px;
    margin: 0 auto;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.company__link:hover,
.company__link:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 18px 34px rgba(14, 51, 99, 0.28);
}

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

@media screen and (max-width: 767px) {
    .company__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}


    /*
    Company企業情報 END
################################################*/




/*################################################
    NEWS 新着情報  .news */

.news{
  padding: 0 0 clamp(40px, 6vw, 75px);
}

.ec-newsRole .ec-newsRole__news {
    max-height: 150px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ec-newsRole .ec-newsRole__newsCloseBtn{
      /* width: 25px;
    height: 25px; */
    font-size: 16px;
    background: #07368d;
        margin-top: 6px;
}

.ec-newsRole__newsItem.is_active .ec-newsRole__newsDescription{
  padding-left: clamp(10px, 1.0vw, 16px);
}


@media only screen and (min-width: 768px) {
    .ec-newsRole .ec-newsRole__news {
        border: 16px solid #ffffff;
        padding: 20px 30px;
        overflow-y: auto;
    max-height: 250px;
        overscroll-behavior: contain;
        scrollbar-gutter: stable;
    }
    .ec-newsRole {
        padding: 0px 0 0;
    }
        .ec-newsRole .ec-newsRole__newsHeading {
        display: flex;
        align-items: center;
    }
}
.ec-newsRole {
    padding: 10px 0 0;
}

/* ↓2026-10-14 新着情報の画像（プラグイン newsimage202610）。元の大きさで表示し、枠より大きい場合だけ縮める */
.ec-newsRole__newsImage {
    margin: 10px 0;
}
.ec-newsRole__newsImage img {
    display: block;
    width: auto; /* style.css の .ec-role img { width: 100%; } を打ち消す */
    max-width: 100%;
    height: auto;
}
/* ↑2026-10-14 ここまで */

/* ↓2026-10-15 新着情報の「詳しくはこちら」ボタン（フッターのお問い合わせボタンと同じ色。文字16px・角丸は利用者指定） */
.ec-newsRole__newsMore {
    margin: 10px 0 4px;
}
.ec-newsRole .ec-newsRole__newsDescription a.ec-newsRole__newsMoreBtn {
    display: inline-block;
    padding: 8px 24px 7px;
    border-radius: 4px;
    background: #07368d;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    text-decoration: none;
    transition: opacity .25s ease;
}
.ec-newsRole .ec-newsRole__newsDescription a.ec-newsRole__newsMoreBtn::after {
    content: "\203A"; /* › */
    margin-left: 8px;
}
.ec-newsRole .ec-newsRole__newsDescription a.ec-newsRole__newsMoreBtn:hover {
    opacity: .85;
}
/* ↑2026-10-15 ここまで */




    /*
    NEWS 新着情報  END
################################################*/

/*################################################
    交通・アクセス access */


.access {
    /* padding: 0 0 clamp(90px, 13.5vw, 165px); */
}

.access__layout {
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
    gap: clamp(20px, 2.4vw, 28px);
    align-items: start;
    margin-top: clamp(24px, 3vw, 42px);
}

.access__map {
    position: relative;
    overflow: hidden;
    min-height: 370px;
}

.access__map iframe {
    display: block;
    width: 100%;
    min-height: 370px;
}

.access__body {
    padding-top: 10px;
    font-size: clamp(20px, 2.2vw, 24px);
}

.access__company {
    margin: 0;
    font-weight: 500;
    line-height: 1.55;
}

.access__info {
    margin-top: 42px;
}

.access__info p {
    margin: 0;
    line-height: 1.75;
}

@media screen and (max-width: 767px) {
    .access {
        padding-bottom: 56px;
    }

    .access__layout {
        grid-template-columns: 1fr;
        margin-top: 32px;
    }

    .access__map,
    .access__map iframe {
        min-height: 220px;
    }

    .access__body {
        padding-top: 0;
    }

    .access__info {
        margin-top: 26px;
    }
}



    /*
    交通・アクセス END
################################################*/