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

/* ========================================
   共通スタイル
   ======================================== */
:root{
  --bk: #333;
  --blue: #102e9e;
  --blue02: #1558d6;
  --gray: #9d9d9d;
  --bd-color: #d3d3d3;

  --bd-radius: 3px;
  --content-width: 1120;
  --content-width-large: 1400;

  --shadow-hover: 0 5px 20px 0 rgba(4, 0, 0, 0.1);

  --size16: clamp(14px, calc(16 / var(--content-width-large) * 100vw), 16px);
  --size32: clamp(24px, calc(32 / var(--content-width-large) * 100vw), 32px);
}

@media screen and (max-width: 374px){
  :root{
    --size16: calc(clamp(14px, calc(16 / 375 * 100vw), 16px) * 0.95);
  }
}

@media screen and (min-width: 551px) and (max-width: 1023px){
  :root{
    --size16: calc(clamp(14px, calc(16 / 1024 * 100vw), 16px) * 1.15);
    --size32: calc(clamp(24px, calc(32 / var(--content-width-large) * 100vw), 32px) * 1.15);
  }
}

body{
  background: #f6f6f6;
  font-size: var(--size16);
  font-family: "Inter", "Noto Sans JP", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, verdana, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  line-height: 1.25;
  letter-spacing: 0;
  color: var(--bk);
}

.container{
  max-width: calc(var(--content-width) * 1px);
  width: 95%;
  margin-inline: auto;
}

h1,h2,h3,h4,h5,h6{
  font-weight: 700;
  line-height: 1.25;
}

main a{
  display: block;
  text-decoration: none;
  transition: all .3s ease-in-out;
}

.section{
  position: relative;
}

.link-btn{
  max-width: 360px;
  margin-inline: auto;
}

.link-btn a{
  padding: clamp(16px, calc(18 / var(--content-width-large) * 100vw), 18px);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  border: solid 1px var(--bk);
  border-radius: 100vmax;
  transition: all .2s ease-in-out;
}

.link-btn a .icon{
  position: relative;
}

.link-btn a .icon::before{
  font-family: 'Font Awesome 6 Pro';
  font-weight: 700;
  margin-right: 0.5em;
}

.link-btn a .icon--mail::before{
  content: '\f0e0';
}
.link-btn a .icon--tel::before{
  content: '\f095';
}


.img--anime{
  overflow: hidden;
}

a .img--anime img{
  /* transition: scale .3s ease-in-out; */
}

#overlay{
  position: fixed;
  z-index: 99;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: rgba(0,0,0,.75);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;
}

#overlay.active{
  opacity: 1;
  visibility: visible;
}


@media (hover: hover){
  .link-btn a:hover{
    color: #fff;
    background: var(--bk);
  }

  a.shadow--anime:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }

  a:hover .img--anime img{
    /* scale: 1.07; */
  }
}

@media (hover: none){
  .link-btn a:active{
    color: #fff;
    background: var(--bk);
  }

  a.shadow--anime:active{
    transform: translateY(-3px);
    box-shadow: var(--shadow-hover);
  }

  a:active .img--anime img{
    /* scale: 1.07; */
  }
}

/* ============================================================
  ブレークポイント
  .show-pc     : 1024px以上で表示（PCのみ表示）
  .show-tab    : 551px以上1023以下で表示（タブレットのみ表示）
  .show-sp     : 550px以下で表示（スマホのみ表示）
  .show-pc-tab : 551px以上で表示（スマホ非表示）
  .show-tab-sp : 1023px以下で表示（PC非表示）
============================================================ */

@media screen and (max-width: 767px){
  html{
    font-size: var(--size16);
  }

  .container{
    width: 100%;
    padding: 0 clamp(15px, calc(20 / 768 * 100vw), 20px);
  }
}

@media screen and (max-width: 550px){
  .show-pc,
  .show-tab,
  .show-pc-tab{
    display: none;
  }
}

@media screen and (max-width: 374px){
  .container{
    padding: 0 10px;
  }
}

@media screen and (min-width: 551px) and (max-width: 1023px){
  .show-pc,
  .show-sp,
  .show-pc-sp{
    display: none;
  }
}

@media screen and (min-width: 768px){
  a[href*="tel:"]{
    pointer-events: none;
    cursor: default;
    text-decoration: none;
  }
}

@media screen and (min-width: 1024px){
  .show-tab,
  .show-sp,
  .show-tab-sp{
    display: none;
  }
}

@media screen and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) {
  img{
    image-rendering: -webkit-optimize-contrast;
  }
}


/* ========================================
  アニメーション
======================================== */
.js-fadein{
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), transform 1s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.js-fadein.active{
  opacity: 1;
  transform: translateY(0);
}


/* ========================================
  パンくずリスト
======================================== */
.breadcrumb{
  background: var(--bg-color);
  padding: clamp(6px, calc(10 / 1390 * 100vw), 10px);
}
.breadcrumb-list{
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--size16);
}

.breadcrumb__item:last-child {
  font-weight: 700;
}

.breadcrumb__item + .breadcrumb__item::before {
  content: "＞";
  padding: 0 1em;
  color: var(--gray);
  font-weight: 400;
}

.breadcrumb__item span{
  color: var(--blue);
}

.breadcrumb__item a,
.breadcrumb__item a span {
  display: inline;
  color: var(--gray);
}

@media screen and (max-width: 767px){
  .breadcrumb__item + .breadcrumb__item::before {
    padding: 0 0.5em;
  }
}

/* ========================================
  製品特集
======================================== */
.visually-hidden{
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.feature{
  margin: clamp(32px, calc(43 / var(--content-width-large) * 100vw), 43px) 0;
}

.feature__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, calc(20 /var(--content-width-large) * 100vw), 20px);
  border-bottom: solid 1px var(--bd-color);
  margin-top: clamp(36px, calc(50 / var(--content-width-large) * 100vw), 50px);
  padding-bottom: clamp(36px, calc(50 / var(--content-width-large) * 100vw), 50px);
}

.feature-item{
  height: 100%;
}

.feature-item a{
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: solid 1px var(--bd-color);
  border-radius: var(--bd-radius);
  overflow: hidden;
}

.feature-item__body{
  padding: clamp(16px, calc(28 / var(--content-width) * 100vw), 28px) clamp(14px, calc(20 / var(--content-width) * 100vw), 20px) clamp(18px, calc(32 / var(--content-width) * 100vw), 32px);
}

.feature-item__title{
  font-size: var(--size16);
}

.feature-item__title + .feature-item__desc{
  margin-top: 0.5em;
}


@media (hover: hover){
  .feature-item a:hover .feature-item__title{
    color: var(--blue02);
  }
}

@media (hover: none){
  .feature-item a:active .feature-item__title{
    color: var(--blue02);
  }
}

@media screen and (max-width: 680px){
  .feature__list{
    grid-template-columns: 1fr;
  }
}


/* ========================================
  製品情報
======================================== */
.products{
  margin: clamp(32px, calc(43 / var(--content-width-large) * 100vw), 43px) 0 clamp(48px, calc(95 / var(--content-width-large) * 100vw), 95px);
}

.feature__title,
.products__title{
  font-size: var(--size32);
  text-align: center;
}

.products__unit{
  padding-top: clamp(36px, calc(50 / var(--content-width-large) * 100vw), 50px);
}

.products__unit + .products__unit{
  border-top: solid 1px var(--bd-color);
  margin-top: clamp(36px, calc(50 / var(--content-width-large) * 100vw), 50px);
}

.products__bnr{
  max-width: 550px;
  width: 90%;
  margin: 0 auto clamp(24px, calc(40 / var(--content-width-large) * 100vw), 40px);
}

.products__list{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(14px, calc(20 /var(--content-width-large) * 100vw), 20px);
}

.products-card a{
  display: grid;
  grid-template-columns: 1fr 1.75fr;
  align-items: center;
  background: #fff;
  border: solid 1px var(--bd-color);
  border-radius: var(--bd-radius);
  overflow: hidden;
}

.products-card__thumb img{
  aspect-ratio: 1 / 1;
}

.products-card__body{
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(10px, calc(20 / var(--content-width) * 100vw), 20px) clamp(14px, calc(20 / var(--content-width) * 100vw), 20px);
}

.products-card__name{
  font-size: var(--size16);
}

.products-card__name + .products-card__desc{
  margin-top: 0.5em;
}

.link-etc{
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: clamp(56px, calc(95 / var(--content-width-large) * 100vw), 95px);
}

.link-etc__list{
  padding: clamp(29px, calc(45 / var(--content-width-large) * 100vw), 45px) 0 clamp(29px, calc(35 / var(--content-width-large) * 100vw), 35px);
}

.link-etc__list:first-of-type{
  padding-right: clamp(7px, calc(10 /var(--content-width-large) * 100vw), 10px);
}

.link-etc__list:last-of-type{
  padding-left: clamp(7px, calc(10 /var(--content-width-large) * 100vw), 10px);
}

.link-etc__list + .link-etc__list{
  border-left: solid 1px var(--bd-color);
}

.link-etc__item + .link-etc__item{
  margin-top: clamp(20px, calc(22 / var(--content-width-large) * 100vw), 22px);
}

.link-etc__item a{
  font-weight: 700;
  text-decoration: underline;
  color: var(--blue02);
}

@media (hover: hover){
  .products-card a:hover .products-card__name{
    color: var(--blue02);
  }
}

@media (hover: none){
  .products-card a:active .products-card__name{
    color: var(--blue02);
  }
}

@media screen and (max-width: 1023px){
  .products__list{
    grid-template-columns: 1fr;
  }

  .products__list a{
    grid-template-columns: 1fr 1.9fr;
  }

}

@media screen and (max-width: 767px){
  #result .products__list{
    grid-template-columns: repeat(3, 1fr);
  }

  .link-etc{
    display: block;
  }

  .link-etc__list + .link-etc__list{
    border-top: solid 1px var(--bd-color);
    border-left: none;
  }

  .link-etc__list:first-of-type{
    padding-right: 0;
    padding-top: 0;
  }

  .link-etc__list:last-of-type{
    padding-left: 0;
    padding-bottom: 0;
  }
}


/* ========================================
  インフォメーションセンター
======================================== */
.info__title{
  font-size: clamp(17px, calc(18 / var(--content-width-large) * 100vw), 18px);
  font-weight: 600;
  text-align: center;
  color: #fff;
  background: var(--blue);
  padding: clamp(8px, calc(12 / var(--content-width-large) * 100vw), 12px);
  border-top-left-radius: var(--bd-radius);
  border-top-right-radius: var(--bd-radius);
}

.info__body{
  padding: 32px 0 clamp(38px, calc(40 / var(--content-width-large) * 100vw), 40px);
  background: #fff;
  border-bottom-left-radius: var(--bd-radius);
  border-bottom-right-radius: var(--bd-radius);
}

.info__inner{
  width: 82%;
  min-width: 650px;
  margin-inline: auto;
  text-align: center;
  font-weight: 600;
}

.info__inner .link-btn{
  margin-top: clamp(26px, calc(28 / var(--content-width-large) * 100vw), 28px);
}

.info-item + .info-item{
  border-top: solid 1px var(--bd-color);
  margin-top: clamp(26px, calc(28 / var(--content-width-large) * 100vw), 28px);
  padding-top: clamp(26px, calc(28 / var(--content-width-large) * 100vw), 28px);
}

.info-item__text{
  line-height: 2;
}

.info-tel__wrapper{
  margin: clamp(28px, calc(32 / var(--content-width-large) * 100vw), 32px) auto 0;
  max-width: 650px;
  display: flex;
}

.info-tel__item{
  display: flex;
  align-items: flex-start;
  justify-content: center;
  column-gap: 1rem;
}

.info-tel__item small{
  font-size: 18px;
  line-height: 1;
  margin-top: 0.25rem;
}

.info-tel__item a{
  display: inline-block;
  font-size: 32px;
  line-height: 1;
}

@media screen and (max-width: 767px){
  .info .container{
    max-width: unset;
    padding: 0;
  }

  .info__body{
    padding-left: clamp(15px, calc(20 / 768 * 100vw), 20px);
    padding-right: clamp(15px, calc(20 / 768 * 100vw), 20px);
  }

  .info__inner{
    width: 100%;
    min-width: unset;
  }

  .info-tel__wrapper{
    flex-direction: column;
    row-gap: clamp(16px, calc(24 / var(--content-width-large) * 100vw), 24px);
  }
}

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

  .info__body{
    padding-left: 10px;
    padding-right: 10px;
  }
}

@media screen and (min-width: 551px) and (max-width: 1023px){
  .info__title{
    font-size: calc(clamp(17px, calc(18 / 1024 * 100vw), 18px) * 1.15);
  }
}

@media screen and (min-width: 768px){
  .info{
    margin-bottom: 50px;
  }

  .info-tel__wrapper{
    justify-content: center;
    column-gap: clamp(32px, calc(100 / var(--content-width-large) * 100vw), 100px);
  }
}


/* 最近チェックした製品 */
#result{
  display: none;
}

#result.js--show{
  display: block;
}

#result .products__list{
  border-bottom: solid 1px var(--bd-color);
  padding-bottom: clamp(36px, calc(50 / var(--content-width-large) * 100vw), 50px);
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(10px, calc(20 /var(--content-width-large) * 100vw), 20px);
}

#result .products__list a{
  display: block
}

#result .recent-products-title{
  font-size: clamp(18px, calc(22 / var(--content-width-large) * 100vw), 22px);
  font-weight: 700;
  text-align: center;
  margin: clamp(36px, calc(50 / var(--content-width-large) * 100vw), 50px) 0 1em;
}

#result .recent-products-title::before{
  content: '\f00c';
  font-family: 'Font Awesome 6 Pro';
  font-weight: 700;
  margin-right: 0.5em;
  color: #009944;
}