@charset "UTF-8";
/* ==========================================================================
   メイン
   ========================================================================== */
.p-mv 
{
  height: auto;
  width: 100%;
  background: url('../img/home_main_bg.jpg') no-repeat center center / cover;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}
.p-mv__container
{
  width: 100%;
  max-width: 1200px;
  height: 100%;
  position: relative;
  z-index: 1;
}
.p-mv__content
{
  position: static;
  padding: 50px 5% 100px;
  text-align: left;
}
.p-mv__lead
{
  font-size: calc(2.4rem * 0.7);
  font-weight: bold;
  margin-bottom: 20px;
}
.p-mv__copy
{
  font-size: calc(4.8rem * 0.6);
  font-size: clamp(2.8rem, 0.506rem + 3.33vw, 4.8rem);
  font-weight: 800;
  line-height: 1.4;
  margin-bottom: 30px;
}
.p-mv__copy-deco {
  font-size: clamp(2.4rem, 0.506rem + 3.33vw, 4rem);
}
.p-mv__desc
{
  font-size: calc(1.8rem * 0.7);
  line-height: 1.8;
}
/* スマホ用 */
@media screen and (max-width: 768px) {
    br 
{
  /*display: none;*/
}
}
@media screen and (min-width: 768px) {
.p-mv 
{
  margin-top: 80px;
  z-index: 10;
}
.p-mv__content
{
  padding: 50px 5% 50x;
}

.p-mv__lead
{
  font-size: calc(2.4rem * 0.8);
}
/*
.p-mv__copy
{
  font-size: calc(4.8rem * 0.8);
}*/
.p-mv__desc
{
  font-size: calc(1.8rem * 0.8);
}

}

@media screen and (min-width: 1200px) {
.p-mv 
{
  height: 710px;
  margin-top: 80px;
}
    .p-mv__content
{
  padding: 150px 5% 0;
}
    .p-mv__lead
{
  font-size: 2.4rem;
}
.p-mv__copy
{
  font-size: 4.8rem;
}
.p-mv__copy-deco {
  font-size: 4rem;
}
.p-mv__desc
{
  font-size: 1.8rem;
}

}



/* ==========================================================================
   診断ボタンエリア
   ========================================================================== */
.p-diagnosis {
  position: relative;
  padding: 30px 30px;
  background: #fff;
  border-radius: 20px;
  max-width: 1200px;
  margin: -30px auto 20px;
  z-index: 20;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
}
.p-diagnosis__title {
  text-align: center;
  font-size: clamp(2.1rem, 0.506rem + 3.33vw, 3rem);
  color: #0167b9;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em; /* 文字と記号の間の距離 */
  position: relative;
   z-index: 2;
}

/* 左側の「/」を反転させた記号 */
.p-diagnosis__title::before {
  content: "/";
  display: inline-block;
  font-size: 2em;      /* 文字より少し大きく */
  transform: scaleX(-1); /* 左右反転で逆ハの字にする */
  font-weight: normal;
}
/* 右側の「/」記号 */
.p-diagnosis__title::after {
  content: "/";
  display: inline-block;
  font-size: 2em;      /* 文字より少し大きく */
  font-weight: normal;
}
.p-diagnosis__text {
  font-weight: bold;
  font-size: 1.8rem;
  text-align: center;
  position: relative;
  z-index: 2;
}
@media (min-width: 600px) {
    .p-diagnosis {
  margin: -70px auto 70px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
    .p-diagnosis__title {
  margin: 0 0 0 clamp(calc(100px * 0.6), 20vw, 100px);
}
.p-diagnosis__text {
  margin: 0 0 0 clamp(calc(100px * 0.6), 20vw, 100px);
}
}
@media (min-width: 768px) {
.p-diagnosis {
  margin: -10px auto 100px;
  padding: 60px 50px;
}

}
@media (min-width: 1200px) {
.p-diagnosis {
  margin: -130px auto 100px;
  padding: 60px 160px;
}
.p-diagnosis__title {
  margin: 0 auto;
}
.p-diagnosis__text {
  margin: 0 auto;
}
}
/* メイン導線（上下に重なる） */
.p-diagnosis__action-area {
  position: relative;
  margin-top: 30px;
  text-align: center
}
.p-diagnosis__sub-text {
  position: relative;     
  z-index: 2;
  display: inline-block;           
  font-weight: bold;
  font-size: 1.8rem;
  color: #ff7f00;
  margin: 0;
  text-align: center;
  border-radius: 999px;
  padding: 0.3em 1em;
  border: 2px solid #ff7f00;
  background-color: #fff;
}
.p-diagnosis__button-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px; /* アイコンとテキストの間隔 */
  position: relative;
  z-index: 1;
  margin-top: -12px;
  width: 100%;
  background-color: #ff7f00;
  color: #FFF;
  /*font-size: calc(3rem * 0.7);*/
  font-size: clamp(2.1rem, 0.506rem + 3.33vw, 3rem);
  font-weight: bold;
  padding: .5em;
  text-decoration: none;
  border-radius: 10px;
  border-bottom: 4px solid #ce5600;
}
/* ボタン左上の装飾画像 */
.p-diagnosis__button-deco {
  position: absolute;  
  /* ボタンの左上角（0, 0）を起点にする */
  top: 0;
  left: 0;  
  /* 起点からどれくらい「外」にはみ出させる */
  transform: translate(-20%, -100%);   
  width: clamp(calc(184px * 0.6), 20vw, 184px);
  height: auto;
  aspect-ratio: 184 / 162; /* 比率を保ちたい場合 */
  background: url(../img/home_diagnosis_bg.png) no-repeat center / contain;  
  z-index: 0; 
  pointer-events: none;
}

.p-diagnosis__button-primary::before {
  content: "";
  display: inline-block;
  width: 37px;
  height: 37px;
  background: url(../img/home_diagnosis_btn_primary_bg.png) no-repeat center / contain;
  flex-shrink: 0; /* 画像が潰れないように固定 */
}
.p-diagnosis__button-primary:hover {
  background-color: #ff9900; 
}
@media (min-width: 768px) {
    .p-diagnosis__action-area::before {
  top: -110px;   /* ボタンよりさらに上に突き抜けさせる */
  left: -20px;  /* ボタンの左端より少し外側へ */  
  /*width: 178px;
  height: 159px; */

}
    .p-diagnosis__sub-text {
  font-size: 1.8rem;
  padding: 0.5em 3em;
}
    .p-diagnosis__button-primary {
  padding: 1em;
}
}
.p-diagnosis__button-arrow {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  width: 23px;
  height: 19px;
}
/* 子要素の指定も合わせる */
.p-diagnosis__button-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 23px;
  height: 3px;
  background-color: #fff;
}
.p-diagnosis__button-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  box-sizing: border-box;
}
/* はみ出すボタンの設定 */
.p-diagnosis__button-tel {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(-40%, -70%);
  width: calc(200px * 0.5);
  height: calc(200px * 0.5); 
  border-radius: 50%;
  background: 
    linear-gradient(to bottom, #fdab01, #fd7308) padding-box, 
    linear-gradient(to bottom, #fdf1b7, #fd7308) border-box;
  border: 4px solid transparent;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 10px 5px 10px;
  text-decoration: none;
  text-align: center;
  color: #fff;
  line-height: 1.1;
  z-index: 10;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  font-size: calc(2.2rem * 0.6);
  font-weight: bold;
}
.p-diagnosis__button-tel:hover {
  filter: brightness(1.2);
}
/* 下半分に表示するアイコン画像 */
.p-diagnosis__button-tel::after {
  content: "";
  position: absolute;
  z-index: 11;
  bottom: 0px; 
  left: 50%;
  transform: translateX(-50%); /* 左右中央揃え */
  width: calc(53px * 0.5);
  height: calc(55px * 0.5);
  background: url(../img/btn_tel_bg.png) no-repeat center / contain;
}
.p-diagnosis__badge {
  display: inline-block;
  color: #fff;
  font-size: calc(3rem * 0.6);
  margin-bottom: 5px;
  line-height: 1;
}
@media screen and (min-width: 768px) {
.p-diagnosis__button-tel {
  width: calc(200px * 0.7);
  height: calc(200px * 0.7);
  padding: 20px 5px 10px;
  font-size: calc(2.2rem * 0.8);
  transform: translate(-35%, -60%);
}
.p-diagnosis__button-tel::after {
  width: calc(53px * 0.6);
  height: calc(56px * 0.6);
  bottom: 5px; 
}
.p-diagnosis__badge {
  font-size: calc(3rem * 0.8);
  margin-bottom: 10px;
}

}
@media screen and (min-width: 1200px) {
.p-diagnosis__button-tel {
  width: 200px;
  height: 200px;
  padding: 40px 5px 10px;
  font-size: 2.2rem;
}
.p-diagnosis__button-tel::after {
  width: 53px;
  height: 55px;
  bottom: 25px; 
}
.p-diagnosis__badge {
  font-size: 3rem;
  margin-bottom: 10px;
}
}
@media screen and (min-width: 1400px) {
.p-diagnosis__button-tel {
  transform: translate(50%, -50%);
}

}
/* ==========================================================================
   課題解決
   ========================================================================== */
.p-pickup-purpose {
  position: relative;
  max-width: 1200px;
  margin: 50px auto 50px;

}
.p-pickup-purpose__header {
  margin-bottom: 40px;
}
.p-pickup-purpose__title {
  /*font-size: calc(4.4rem * 0.6);*/
  font-size: clamp(2.6rem, 0.506rem + 3.33vw, 4.4rem);
  text-align: center;
  color: #0069b9;
  margin-bottom: 0.5em;
}
.p-pickup-purpose__title-en {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 0.5em;
}
.p-pickup-purpose__lead {
  text-align: center;
}
.p-pickup-purpose__grid {
  display: grid;
  gap: 40px 40px;
  grid-template-columns: 1fr; /* スマホは1列 */
}
@media (min-width: 768px) {
  .p-pickup-purpose {
  margin: 100px auto 100px;
}
  .p-pickup-purpose__grid {
    gap: 80px 40px;
    grid-template-columns: 1fr 1fr;
  }
}
.p-pickup-purpose__card {
  display: grid;
  /* 左側を数字の幅（auto）、右側を残り全部（1fr）に分ける */
  grid-template-columns: auto 1fr;
  /* 1行目(数字/タイトル)と2行目(リスト)は中身に合わせ、
     3行目(ボタン)に残りの全スペースを割り当てる */
  grid-template-rows: auto auto 1fr;
  column-gap: 20px; /* 数字とテキストの左右間隔 */
  padding: 30px 30px 0;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

/* 巨大な数字 */
.p-pickup-purpose__card-number {
  grid-column: 1;
  grid-row: 1; /* タイトルと同じ行に配置 */
  font-size: clamp(6rem, 0.506rem + 3.33vw, 10rem);
  font-style: oblique;
  line-height: 1;
  font-weight: bold;
  color: #0167b2;
  margin-top: -10px;
}

/* テキストエリア全体 */
.p-pickup-purpose__card-body {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.p-pickup-purpose__card-summary {
  min-height: 0;
}
@media (min-width: 768px) {
  .p-pickup-purpose__card { 
    align-items: start;
    column-gap: 20px;
    padding: 40px 40px 0;
  }
  .p-pickup-purpose__card-number {
  /*font-size: 10rem;*/
  margin-top: -10px;
}
  /* card-bodyの高さを揃えるための設定 */
  .p-pickup-purpose__card-body {
    min-height: 3em; 
  }
  .p-pickup-purpose__card-summary {
  min-height: 3em;
}
}
@media screen and (min-width: 1200px) {
  .p-pickup-purpose__card-summary {
  min-height: 0;
}
}
.p-pickup-purpose__card-title {
  font-size: clamp(2.1rem, 0.506rem + 3.33vw, 3rem);
  margin-bottom: 5px;
  line-height: 1.3;
  color: #0167b2;
}
.p-pickup-purpose__card-summary {
  font-size: 1.6rem;
}
.p-pickup-purpose__card-list {
  grid-column: 1 / 3; /* これで数字の下を通り越して左端 */
  grid-row: 2;        /* 2行目に配置 */
  margin-top: 10px;
  padding-left: 0.5em;
  padding-right: 50px;
  list-style: none;
  background-repeat: no-repeat;
  background-position: right center;
  /*background-size: auto 60%;*/
  border-top: 1px solid #d3d3d3;
  padding-top: 20px;
}
@media (min-width: 768px) {
    .p-pickup-purpose__card-title {
  /*font-size: 3rem;*/
}
.p-pickup-purpose__card-list {
  margin-top: 10px;
  padding-left: 0;
  padding-right: 120px;
  background-position: right 30px center; /* 右端の中央 */
  /*background-size: auto 80%;*/
}
}
/* 1番目のカードのリスト */
.p-pickup-purpose__card:nth-child(1) .p-pickup-purpose__card-list {
  background-image: url('../img/home_pickup_purpose_card_bg01.png');
  background-size: auto clamp(calc(123px * 0.6), 10vw, calc(123px * 0.7));
}

/* 2番目のカードのリスト */
.p-pickup-purpose__card:nth-child(2) .p-pickup-purpose__card-list {
  background-image: url('../img/home_pickup_purpose_card_bg02.png');
  background-size: auto clamp(calc(137px * 0.6), 10vw, calc(137px * 0.7));
}

/* 3番目のカードのリスト */
.p-pickup-purpose__card:nth-child(3) .p-pickup-purpose__card-list {
  background-image: url('../img/home_pickup_purpose_card_bg03.png');
  background-size: auto clamp(calc(133px * 0.6), 10vw, calc(133px * 0.7));
}

/* 4番目のカードのリスト */
.p-pickup-purpose__card:nth-child(4) .p-pickup-purpose__card-list {
  background-image: url('../img/home_pickup_purpose_card_bg04.png');
  background-size: auto clamp(calc(132px * 0.6), 10vw, calc(132px * 0.7));
}
/* 各リスト項目の設定 */
.p-pickup-purpose__card-list li {
  position: relative;
  padding-left: 1.8em;
  margin-bottom: 8px;
  line-height: 1.5;
  font-size: 1.5rem;
}

/* 「レ点」 */
.p-pickup-purpose__card-list li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.4em; 
  width: 10px;
  height: 6px;
  border-left: 2px solid #0061b2;
  border-bottom: 2px solid #0061b2;
  transform: rotate(-45deg);
}
.p-pickup-purpose__card-link {
  grid-column: 1 / 3;
  grid-row: 3;        /* 3行目に配置 */
  margin: 20px -40px 0;
  align-self: end;
}

/* ボタン本体 */
.p-pickup-purpose__card-link a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #0061b2;
  color: #fff;
  text-decoration: none;
  padding: 18px 20px;
  font-weight: bold;
  font-size: 1.6rem;
  position: relative;
  transition: background-color 0.3s;
}
.p-pickup-purpose__card-link a:hover {
  filter: brightness(1.2);
}

/* 矢印の「棒線」部分 */
.p-pickup-purpose__card-link a::before {
  content: "";
  position: absolute;
  right: 25px;         /* 右端からの位置 */
  width: 15px;        /* 棒線の長さ */
  height: 2px;        /* 棒線の太さ */
  background-color: #fff;
}

/* 矢印の「先端（>）」部分 */
.p-pickup-purpose__card-link a::after {
  content: "";
  position: absolute;
  right: 25px;         /* 棒線の先端に合わせる */
  width: 10px;         /* 先端のサイズ */
  height: 10px;        /* 先端のサイズ */
  border-top: 2px solid #fff;   /* 先端の太さ（棒線と合わせる） */
  border-right: 2px solid #fff; /* 先端の太さ（棒線と合わせる） */
  transform: rotate(45deg);    /* 45度回転 */
}
/* ==========================================================================
   取扱機材一覧
   ========================================================================== */
.p-products {
  background-color: #0168b7;
  margin: 50px auto 0;
  padding-top: 20px;
  padding-bottom: 50px;
  border-radius: 30px 30px 0 0;
}
.p-products__container {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
}
.p-products__header {
  margin-bottom: 40px;
  color: #fff;
}
.p-products__title {
  font-size: clamp(2.6rem, 0.506rem + 3.33vw, 4.4rem);
  text-align: center;
  margin-bottom: 0.5em;
}
.p-products__title-en {
  font-size: 1.4rem;
  display: block;
  margin-bottom: 0.5em;
}
.p-products__lead {
  text-align: center;
}  
  .p-products__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px 10px;
    justify-items: center;
    list-style: none;
    padding: 0;
    margin: 0;
  } 
@media screen and (min-width: 600px) {
      .p-products__grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 70px 20px; 

  }
}
@media screen and (min-width: 768px) {
    .p-products {
  margin: 100px auto 0;
  padding-top: 50px;
  padding-bottom: 100px;
  border-radius: 50px 50px 0 0;
}
    .p-products__title {
 /* font-size: 4.4rem;*/
}
  .p-products__grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 70px 20px; 

  }
  .p-products__link {
    margin-top: 40px;
    text-align: center;
  }
}
@media screen and (min-width: 1050px) {
  .p-products__grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 70px 20px; 
  }
}

.p-products__card {
  display: flex;
  flex-direction: column;
  height: 100%; /* カード自体の高さを揃える */
  color: #fff;
}

.p-products__card-name {
  /* 2行分の高さを確保して揃える例 */
  display: flex;
  align-items: center; /* 上下中央寄せ（お好みで） */
  min-height: 3em;     /* 1.5行×2 = 3em（文字2個分強の高さ） */
  line-height: 1.5;
  margin-bottom: 8px;  /* 商品コードとの余白 */
  font-size: 14px;     /* 実際のサイズに合わせて調整 */
}
/* ボタン本体（aタグ） */
.p-products__link {
  margin: 20px auto 0;
  width: 100%;
}
@media screen and (min-width: 768px) {
    .p-products__link {
  margin: 20px auto 0;
}
}
.p-products__link a {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
  color: #0066ba;
  text-decoration: none;
  padding: 18px 20px;
  font-weight: bold;
  font-size: 1.6rem;
  position: relative;
  transition: background-color 0.3s;
  border-radius: 5px;
  transition: filter 0.3s;
}
.p-products__link a:hover {
  filter: brightness(0.9);
}
/* 矢印の「棒線」部分 */
.p-products__link a::before {
  content: "";
  position: absolute;
  right: 20px;         /* 右端からの位置 */
  width: 15px;        /* 棒線の長さ */
  height: 1px;        /* 棒線の太さ */
  background-color: #0066ba;
}

/* 矢印の「先端（>）」部分 */
.p-products__link a::after {
  content: "";
  position: absolute;
  right: 20px;         /* 棒線の先端に合わせる */
  width: 10px;         /* 先端のサイズ */
  height: 10px;        /* 先端のサイズ */
  border-top: 1px solid #0066ba;   /* 先端の太さ（棒線と合わせる） */
  border-right: 1px solid #0066ba; /* 先端の太さ（棒線と合わせる） */
  transform: rotate(45deg);    /* 45度回転 */
}   
   
   
   

/* ==========================================================================
   swiper
   ========================================================================== */
   /* Swiperコンテナ自体の下に余白を作る（ドットがはみ出るスペースを確保） */
.p-products .swiper {
  padding-bottom: 40px; /* ここを大きくするとドットを置くスペースが広がる */
}
/* ページネーションの位置を上書き */
.p-products .swiper-pagination {
  bottom: 0 !important; /* 一番下へ。もっと下げたい場合はマイナス値（例: -10px）も可 */
}




/* =================================================
  タブレット・PC用スタイル (768px以上)
================================================= */
@media screen and (min-width: 768px) {
/* iPad 縦持ち以上のデバイス向け */
}

/* =================================================
  大型PC用スタイル (1025px または 1200px以上)
================================================= */
@media screen and (min-width: 1200px) {
/* デスクトップPC向け。max-width: 1200pxのコンテナなどを制御 */
}