@charset "UTF-8";


/***************  service *****************/
.service_page {
  background-image: url(../img/service/sub_main_service.jpg);
  position: relative;
}

.hero_sub::before {
  content: '';
  display: inline-block;
  background: rgba(0,0,0, .2);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 28px;
}
.hero_sub h2 {
  position: relative;
}

/*************** 余白関連 *****************/
@media (max-width: 767px){
.service-page .mt50 {
	margin-top: 30px;
	}
}


/*************** コンテンツ *****************/
/* ナビエリア */
.thumbNav{
    margin: 55px auto;
}
.thumbNav__inner{
  display: flex;
  justify-content: center;
  gap: 34px;
}

/* アイテム */
.thumbNav__item{
  width: 240px;
  text-decoration:none;
  color: inherit;
  display:block;
}

.thumbNav__item:hover{
  opacity: .85;
  transition: .25s;
}

/* 画像ボックス */
.thumbNav__img{
  width: 100%;
  height: 120px;
  border-radius: 6px;
  overflow: hidden;
  background: #8f8f8f;
}

/* 画像をボックスいっぱいに表示 */
.thumbNav__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbNav__imgText{
  color:#fff;
  font-weight:700;
  letter-spacing:.04em;
}

/* キャプション（テキスト＋矢印） */
.thumbNav__cap{
  position: relative;
  margin-top: 10px;
  height: 22px;
}

.thumbNav__label{
  display:block;
  text-align:center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .02em;
}

.thumbNav__arrow{
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  line-height: 1;
}

#service_nav01 ,
#service_nav02 ,
#service_nav03 {
	padding-top: 90px;
	margin-top: -90px;
}

/* 767px以下は1列 */
@media (max-width: 767px){
  .thumbNav__inner{
    align-items: center;
	gap: 15px;
  }
  .thumbNav__item{
    width: min(360px, 100%);
  }
  .thumbNav__arrow{
    right: 2px;
  }
.thumbNav__img {
    height: 64px;
    border-radius: 5px;
	}
.thumbNav__label {
    font-size: 12px;
	}
.thumbNav__arrow{
	font-size: 10px;
	}
#service_nav01 ,
#service_nav02 ,
#service_nav03 {
	padding-top: 65px;
	margin-top: -65px;
	}
}



/* コンテンツエリア */
.service-page .content__inner {
    padding: 25px 18px;
}
/* 行全体（常に横並び） */
.service-page .grid .info{
  margin: 0;
  padding: 14px 0;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  border-bottom: 1px solid #e6eef2;
}

/* 左ラベル列 */
.service-page .grid .info dt{
  margin: 0;
  flex: 0 0 90px;   /* ラベル幅（固定） */
}

/* ラベルデザイン */
.service-page .grid .info dt span{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  background: #3c78a8;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  padding: 6px 10px 8.25px 10px;
  border-radius: 3px;
  line-height: 1.2;
}

/* 右内容列 */
.service-page .grid .info dd{
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;         /* 長文対策（重要） */
  font-size: 15px;
  line-height: 1.6;
  color: #111;
  word-break: break-word;
}

/* ddが複数ある場合（電話番号など） */
.service-page .grid .info dd + dd{
  margin-top: 6px;
}

/* 1カラムバージョン */
.service-page .onecolumn.content__inner {
    padding: 35px 18px 25px;
}
.service-page .onecolumn .grid {
    grid-template-columns: 1fr;
    margin-bottom: 30px;
}
.service-page .onecolumn .grid .image_box {
	max-width: 980px;
    margin: 0 auto;
    text-align: center;
}
.service-page .onecolumn .grid .image_box img {
	width: 100%;
}
.service-page .textblock.center {
	text-align: center;
}

@media (max-width: 767px){
.service-page {
	font-size: 14px;
	}
.service-page .onecolumn .grid {
    margin-bottom: 10px;
	}
.service-page .grid .info dt {
    flex: 0 0 75px;
	}
.service-page .grid .info dt span {
    font-size: 13px;
    padding: 6px 8px 8.25px 8px;
	}
.service-page .onecolumn.content__inner {
	padding: 20px 10px 1px;
	margin-bottom: -25px;
	}
.service-page .textblock.center {
	text-align: left;
	}
}



/* ===== GoogleMapリンク（分かりやすいデザイン） ===== */

.service-page .grid .info dd a[target="_blank"]{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 3px 12px;
  border: 1px solid #b8d2e6;
  background: #f2f8fd;
  border-radius: 999px;
  font-weight: 700;
  color: #1d5f95;
  text-decoration: none;
}

/* 外部リンク風アイコン */
.service-page .grid .info dd a[target="_blank"]::after{
  content: "→";
  font-size: 14px;
  line-height: 1;
  opacity: .9;
}

.service-page .grid .info dd a[target="_blank"]:hover{
  filter: brightness(.97);
  opacity: .95;
  transition: .2s;
}

/* ===== telリンク ===== */

.service-page .grid .info a[href^="tel:"]{
  color: #111;
  text-underline-offset: 3px;
}
@media (max-width: 767px){
.service-page .grid {
    margin-bottom: 5px;
	}
.service-page .content__inner {
    padding: 15px 10px;
	}
}



/* コンテンツ ミニ画像エリア */
.svcMini__inner{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.svcMini__item{
  border-radius: 10px;
  overflow: hidden;
  background:#8f8f8f;
}
.svcMini__img{
  width:100%;
  height: 140px;          /* 画像枠の高さ（デザインに合わせて微調整OK） */
  display:block;
  object-fit: cover;
}

/* 767px以下：2列 */
@media (max-width: 767px){
  .svcMini__inner{
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  .svcMini{
	padding: 15px 0px;
  }
  .svcMini__img{
    height: 92px;
  }
}




/* ===== 製造受託案内 対応形状 ===== */

/* accordion item */
/* 2026.04.15 ボーダー非表示
.svcAcc{
  border-bottom: 1px solid var(--line, #d9e2ea);
}
*/
/* head */
.svcAcc__head{
  width:100%;
  border:0;
  background:transparent;
  padding:18px 8px;
  margin-bottom: 12px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  transition:opacity .25s ease;
  background-color: #dff0f4;
}

.svcAcc__head:hover{
  opacity:.65;
}

.svcAcc__head:focus-visible{
  outline:3px solid rgba(15,102,166,.25);
  outline-offset:2px;
}

/* left side */
.svcAcc__lead{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
}

.svcAcc__thumb{
  width:80px;
  height:80px;
  flex:0 0 auto;
  background:url("../img/service/service_shape_01.jpg") no-repeat center;
  background-size:cover;
  border-radius:100%;
}
.item2 .svcAcc__thumb{
  background:url("../img/service/service_shape_02.jpg") no-repeat center;
  background-size:cover;
}
.item3 .svcAcc__thumb{
  background:url("../img/service/service_shape_03.jpg") no-repeat center;
  background-size:cover;
}

.svcAcc__title{
  font-weight:700;
  font-size:16px;
  letter-spacing:.02em;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.svcAcc__sub{
  font-weight:600;
  font-size:14px;
  color:var(--text, #111827);
}

/* ＋ / － アイコン */
.svcAcc__toggle{
  width:32px;
  height:32px;
  position:relative;
  flex:0 0 auto;
}

/* 横線（－） */
.svcAcc__toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:20px;
  height:3px;
  background:var(--accent, #0f66a6);
  transform:translate(-50%,-50%);
  border-radius:2px;
}

/* 縦線（＋の縦） */
.svcAcc__toggle::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:20px;
  background:var(--accent, #0f66a6);
  transform:translate(-50%,-50%);
  border-radius:2px;
}

/* open = minus */
.svcAcc.is-open .svcAcc__toggle::after{
  display:none;
}

.svcAcc__body {
    padding: 10px 0 18px;
    max-width: 1000px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* spec rows */
.svcSpec{
  border-top:1px solid transparent;
}

.svcSpec__row{
  display:flex;
  gap:0;
  padding:18px 18px;
}

.svcSpec__row.is-fill{
  background:var(--soft, #f8f7ee);
}

.svcSpec__th{
  width:100px;
  flex:0 0 auto;
  font-weight:700;
  font-size:14px;
  color:var(--text, #111827);
  padding-right:18px;
}

.svcSpec__td{
  flex:1 1 auto;
  font-size:14px;
  line-height:1.9;
}

.svcSpec__list{
  margin:0;
  padding-left:18px;
}
.svcSpec__td .indent {
	margin-top: 0;
}
.svcSpec__list li{
  margin:0;
  list-style-type: none;
}

/* responsive */
@media (max-width: 767px){
  .svcAcc__title{
	font-size:14px; 
	white-space: normal;
	text-align: left;
  }
  .svcAcc__sub{ font-size:13px; }
  .svcAcc__thumb{ width:56px; height:56px; }

  .svcSpec__row{
    padding:14px 14px;
    flex-direction:column;
    gap:8px;
  }
  .svcSpec__th{
    width:auto;
    padding-right:0;
  }
}



/* flow.css（製造フロー */
.mfArea{
  padding: 10px 0 8px;
}

.mfArea__inner{
  max-width: 980px;
  margin: 0 auto;
  padding: 0 18px;

  display: grid;
  grid-template-columns: 1fr 1fr; /* 2列固定 */
  gap: 56px;
}

.mfCol {
    padding: 18px 0 25px;
    background-color: #f2f9fb;
    border-radius: 12px;
}
.mfCol:last-child {
    background-color: #fbf8f2;
}

/* column title */
.mfCol__ttl{
  margin: 0 0 16px;
  padding: 14px 16px 14px 18px;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.35;
  color: #0f2a3d;
  text-align: center;
}
.mfCol__ttl span{
  position: relative;
}

/* SP調整 */
@media (max-width: 767px){
.mfCol__ttl {
    font-size: 14px;
    padding: 12px 0;
    border-radius: 10px;
	}
}

/* steps stack */
.mfSteps{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* step bar */
.mfStep{
  width: 100%;
  max-width: 340px;
  height: 46px;
  border-radius: 6px;
  position: relative;

  display:flex;
  align-items:center;
  justify-content:center;

  color: var(--mf-white);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;

  background: linear-gradient(90deg, var(--mf-blue1), var(--mf-blue2));
  box-shadow: 0 10px 18px rgba(0,0,0,.10);
  overflow: hidden;
}

/* icon itself (stroke white) */
.mfStep::after{
  content:"";
  position:absolute;
  left:20px;
  top:50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity: .95;
}

/* text */
.mfStep__txt{
  position: relative;
  z-index: 1;
  padding: 0 12px 0 30px; /* アイコン分左を空ける */
  width: 100%;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #fff;
}

/* arrow between steps (double chevron like ref) */
.mfArrow{
  width: 26px;
  height: 20px;
  position: relative;
}

.mfArrow::before{
  content:"";
  position:absolute;
  left:50%;
  width: 14px;
  height: 14px;
    border-right: 3px solid rgb(41 118 177);
    border-bottom: 3px solid rgb(41 118 177);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

.mfArrow::before{ top: -1px; }

/* ===== icon variations (SVG data URI) ===== */
.is-weigh::after{
  content: "";
  display: block;
  width: 28px;   /* 必要に応じて調整 */
  height: 28px;
}

.is-weigh::after {
    background: url("../img/service/flow_weigh.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-mix::after{
    background: url("../img/service/flow_mix.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-filter::after{
    background: url("../img/service/flow_filter.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-fill::after{
    background: url("../img/service/flow_fill.png");
    background-size: cover;
	background-repeat: no-repeat;
}

.is-label::after{
    background: url("../img/service/flow_label.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-checkpack::after{
    background: url("../img/service/flow_checkpack.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-sterilize::after{
    background: url("../img/service/flow_sterilize.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-pack::after{
    background: url("../img/service/flow_pack.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-final::after{
    background: url("../img/service/flow_final.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-test::after{
    background: url("../img/service/flow_test.png");
    background-size: cover;
	background-repeat: no-repeat;
}
.is-ship::after{
    background: url("../img/service/flow_ship.png");
    background-size: cover;
	background-repeat: no-repeat;
}

.mfStep.is-weigh{
  background:
    linear-gradient(
      rgba(255,255,255,.15),
      rgba(255,255,255,0)
    ),
    linear-gradient(
      90deg,
      #1c5fa6 0%,
      #1e86b9 45%,
      #19c2c8 100%
    );
}
.mfStep{
  background:
    linear-gradient(
      rgba(255,255,255,.15),
      rgba(255,255,255,0)
    ),
    linear-gradient(
      90deg,
      #1c5fa6 0%,
      #1e86b9 45%,
      #19c2c8 100%
    );
}
.mfStep{
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,0)),
    linear-gradient(90deg,#1c5fa6 0%,#1e86b9 45%,#19c2c8 100%);
  box-shadow:
    0 8px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
}

.mfCol:last-child .mfStep {
  border-radius: 8px;
  background:
    linear-gradient(rgba(255,255,255,.15), rgba(255,255,255,0)),
	linear-gradient(90deg,#b85a00 0%,#e07a1f 45%,#ffb347 100%);
  box-shadow:
    0 8px 18px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.35);
}

/* 2列固定のままスマホ調整 */
@media (max-width: 767px){
.mfCol {
    padding: 18px 10px 25px;
    border-radius: 8px;
	}
.mfArea {
    padding: 0px 0 10px;
	}
.mfArea__inner {
    gap: 12px;
    padding: 0;
	}
  .mfCol__ttl{
    font-size: 11.5px;
    margin-bottom: 10px;
  }
  .mfStep{
    height: 40px;
    border-radius: 6px;
    font-size: 12px;
    max-width: 100%;
  }
  .mfStep::before{
    width: 34px;
    height: 28px;
    left: 8px;
  }
  .mfStep::after{
    left: 17px;
    width: 16px;
    height: 16px;
  }
  .mfStep__txt{
	padding-left: 35px;
  }
}



/*************** 製造受託案内エリア *****************/
.strengths{
  padding: 0 16px 10px;
/*  background: url("../img/service/service_strength.png") center / cover no-repeat; */
}

/* ===== GRID（崩れない配置） ===== */

.strengths__grid{
  position: relative;
  isolation: isolate; /* 擬似要素を背面に固定 */

  max-width: 980px;
  margin: 0 auto;

  min-height: 620px;
  padding: 14px 10px;

  display: grid;
  grid-template-columns: 1fr 280px 1fr;
  grid-template-rows: auto auto auto;
  gap: 22px 26px;
  align-items: center;
  justify-items: center;
}

/* 薄いグラデーションリング（中央） */
.strengths__grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;

  width: 560px;
  height: 560px;

  transform: translate(-50%, -50%);
  border-radius: 50%;

  /* ★ 5色の円形グラデーション */
/*
  background: conic-gradient(
    #0f66a6,
    #6b4b8a,
    #b79a3c,
    #9b4a43,
    #9b4a43,
    #2f7d9b
  );
*/
  /* ★ 薄く表示 */
  opacity: .5;
  opacity: 1;

  /* ★ 中央をくり抜いてリング化 */
/*
  -webkit-mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 12px),
    #000 calc(100% - 12px)
  );
  mask: radial-gradient(
    farthest-side,
    transparent calc(100% - 12px),
    #000 calc(100% - 12px)
  );
*/
  pointer-events:none;
  z-index: 0;
    
  /* 中の白 */
  border: solid 12px #fff;

  /* 外青 + 内青 */
  box-shadow:
    0 0 0 5px #00a0e9,   /* 外側 */
    inset 0 0 0 5px #00a0e9; /* 内側 */
}

/* 前面要素をリングより上に */
.strengthCard,
.strengthCenter{
  position: relative;
  z-index: 1;
}


@keyframes bubbleFloat{
  0%{
    transform: translate(-50%, -50%) translateX(-10px) translateY(-2px) scale(0.96);
    opacity: .90;
    filter: blur(0px);
  }

  25%{
    transform: translate(-50%, -50%) translateX(6px) translateY(2px) scale(1.02);
    opacity: .55;
    filter: blur(0.4px);
  }

  50%{
    transform: translate(-50%, -50%) translateX(12px) translateY(3px) scale(1.05);
    opacity: .18;          /* ★消えかけ */
    filter: blur(0.8px);   /* ★泡っぽい */
  }

  75%{
    transform: translate(-50%, -50%) translateX(2px) translateY(1px) scale(1.01);
    opacity: .60;
    filter: blur(0.4px);
  }

  100%{
    transform: translate(-50%, -50%) translateX(-10px) translateY(-2px) scale(0.96);
    opacity: .90;
    filter: blur(0px);
  }
}





/* 追加：カードや中央円を画像より手前に */
.strengthCard,
.strengthCenter{
  position: relative;
  z-index: 1;
}
/* スライド 画像2枚 */
/* ===== Center ===== */
.strengthCenter{
  grid-column: 2;
  grid-row: 2;
  width: 305px;
  height: 305px;
  border-radius: 50%;
  background: rgba(255,255,255,.95);
  box-shadow: 0 12px 28px rgba(0,0,0,.15);
  display: flex;
  align-items: center;
  justify-content: center;
}

.strengthCenter__media{
  width: calc(100% - 18px);
  height: calc(100% - 18px);
  border-radius: 50%;
  overflow: hidden;
  position: relative;
}

/* フェード用 */
.strengthCenter__media--fade img{
  position: absolute;
  inset: 0; /* ← top/leftまとめ */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity 4s ease;
  z-index: 1;
}

/* 表示中 */
.strengthCenter__media--fade img.is-show{
  opacity: 1;
  z-index: 2;
}






/* ===== Cards ===== */

.strengthCard{
  width: 100%;
  max-width: 320px;
  background:#fff;
  border-radius: 6px;
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
  overflow:hidden;
  border: 8px solid #559e34;
}

.strengthCard__head{
  position: relative;
/*  background: var(--accent); */
  background: #94d39b;
/*  color:#fff; */
  color:#000;
  font-weight:700;
  font-size:16px;
  padding:12px 14px;
  text-align:center;
  line-height:1.3;
  overflow: hidden;

/* ★ 3色グラデーションを重ねる */
/*
.strengthCard__head::before{
  content:"";
  position:absolute;
  inset:0;

  background: linear-gradient(
    135deg,
    rgba(0,0,0,.18),
    rgba(0,0,0,0),
    rgba(0,0,0,.28)
  );
*/
  pointer-events:none;
}
.strengthCard:nth-child(2) {
  border: 8px solid #eb6da5;
}
.strengthCard:nth-child(2) .strengthCard__head {
  background: #f5b6d2;
}
.strengthCard:nth-child(4) {
  border: 8px solid #00a0e9;
}
.strengthCard:nth-child(4) .strengthCard__head {
  background: #7fcdf2;
}
.strengthCard:nth-child(5) {
  border: 8px solid #f39800;
}
.strengthCard:nth-child(5) .strengthCard__head {
  background: #f9cb7f;
}
.strengthCard:nth-child(6) {
  border: 8px solid #fbef09;
}
.strengthCard:nth-child(6) .strengthCard__head {
  background: #fbf688;
}

.strengthCard__body{
  padding: 12px 15px 14px;
  font-size: 13.5px;
  line-height:1.7;
  color:#4b5563;
  font-weight: 500;
}

/* ===== Grid Placement ===== */

.is-top{ grid-column: 2; grid-row: 1; }

.is-left{ grid-column: 1; grid-row: 2; justify-self:end; }

.is-right{ grid-column: 3; grid-row: 2; justify-self:start; }

.is-bottomLeft{ grid-column: 1; grid-row: 3; justify-self:end; }

.is-bottomRight{ grid-column: 3; grid-row: 3; justify-self:start; }

/* ===== Tablet ===== */

@media (max-width: 980px){

  .strengths__grid{
    grid-template-columns: 1fr 240px 1fr;
    gap: 18px;
  }

  .strengthCenter{
    width:240px;
    height:240px;
  }

}

/* ===== Mobile ===== */
@media (max-width: 768px){
.strengths {
    margin-top: 0;
    padding: 0;
	}
  .strengths__grid{
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .strengths__grid::before{
	content:none;
  }
  .strengthCenter{
    grid-column: auto;
    grid-row: auto;
    margin-bottom: 8px;
  }

  .strengthCard{
    max-width: 560px;
  }

  .is-top,
  .is-left,
  .is-right,
  .is-bottomLeft,
  .is-bottomRight{
    grid-column: auto;
    grid-row: auto;
    justify-self: center;
  }

}




/* ===== 安定供給体制 ===== */

.supply{
  margin-top:60px;
}

.supply__hero{
  text-align:center;
  margin-bottom:35px;
}

.supply__image {
    max-width: 850px;
    width: 100%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    background-color: #f4fbfd;
    padding: 28px;
    border-radius: 15px;
}

.supply__maintitle{
  font-size:32px;
  font-weight:700;
  margin-bottom:20px;
  color: #14878d;
}

.supply__lead{
  max-width:880px;
  margin:0 auto;
  line-height:1.9;
  font-size:15px;
  color:#4b5563;
}

/* セクション */
.supply__section {
    margin-bottom: 25px;
    padding: 35px;
    background-color: #dfecf4;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 20px;
}

.supply__sectiontitle{
  font-size:22px;
  font-weight:700;
  margin-bottom:24px;
  border-left:6px solid #1f4e79;
  padding-left:14px;
}

/* ブロック */
.supply__block{
  max-width:900px;
}

.supply__blocktitle{
  font-size:20px;
  font-weight:700;
  margin-bottom:16px;
  padding-left:70px;
  position:relative;
  min-height:60px;
  display:flex;
  align-items:center;
}

/* 丸アイコン共通 */
.supply__blocktitle::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:54px;
  height:54px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 一段目アイコン */
.supply__blocktitle.is-first::before{
  background-image:url("../img/service/service_supply01.png");
}

/* 二段目アイコン */
.supply__blocktitle.is-second::before{
  background-image:url("../img/service/service_supply02.png");
}

.supply__block p{
  line-height:1.65;
  margin-bottom:18px;
  color:#4b5563;
}

.supply__list {
    padding-left: 20px;
    padding: 25px 35px 10px;
    background-color: #fff;
    border-radius: 10px;
}

.supply__list li{
  margin-bottom:10px;
  line-height:1.65;
}

/* ===== レスポンシブ ===== */

@media (max-width:768px){
  .supply {
    margin-top: 15px;
  }
  .supply__lead {
    line-height: 1.6;
    font-size: 14.15px;
    text-align: left;
  }

  .supply__maintitle{
    font-size:19px;
  }

  .supply__sectiontitle{
    font-size:18px;
    margin-bottom: 15px;
  }

  .supply__blocktitle{
    font-size:16px;
    padding-left:60px;
    margin-bottom: 10px;
  }

  .supply__blocktitle::before{
    width:44px;
    height:44px;
  }

.supply__hero {
    margin-bottom: 15px;
	}
.supply__image {
    margin-bottom: 15px;
    padding: 5px;
	}
.supply__section {
    margin-bottom: 15px;
    padding: 20px 15px;
	padding: 20px 15px 5px;
    border-radius: 15px;
	}
.supply__list {
    padding: 15px 10px 5px 25px;
	}
}