.page-title.fine-chemicals {
    width: 100%;
    background: url(/assets/images/_resource/pages/products/fine-chemicals/bg_finechemicals.png) var(--new-green) no-repeat;
    background-size:90%;
    background-position:center center; 
    
}
.page-title.fine-chemicals .page-title-inner{padding-bottom:100px;}
.page-title.fine-chemicals .title-text,
.page-title.fine-chemicals .title-lead{color:#fff;}

.bread_crumble_block + section.sect::before{margin-bottom:40px;}
.in-section{padding-top:10px;}
.in-section + .in-section{margin-top: 60px;}
.in-section + .btn-wrap{margin-top:60px;}

.ba-border{position: relative; display:flex; align-items: center; justify-content: center;}
.ba-border:before,.ba-border:after{content:""; width:30px; height:1px; background:var(--new-green); display:inline-block;}
.ba-border:before{margin-right:10px;}
.ba-border:after{margin-left:10px;}

.section-title.-left{text-align:left; margin-bottom:30px;}
.section-stitle.point{position:relative; margin-bottom:20px; display:flex; gap:12px; align-items: center; font-size:var(--h4);}
.point:before{content:""; display:inline-block; width:16px; height:16px; background:#97c084; border-radius:8px; top:6px;}
.section-title.-left.point.sp-top{padding-top:60px;}

@media (max-width:1080px){
  .page-title.fine-chemicals {background-size:100%;}
  .page-title.fine-chemicals .page-title-inner{padding-bottom:80px;}

  .section-stitle.point{gap:8px; }
  .point:before{width:12px; height:12px;}

  .in-section + .in-section{margin-top: 50px;}
  .in-section + .btn-wrap{margin-top:50px;}
}

@media (max-width:768px){
  .page-title.fine-chemicals {background-size:cover;}
  .page-title.fine-chemicals .page-title-inner{padding-bottom:60px;}

  .section-stitle.point{gap:8px; }
  .point:before{width:8px; height:8px;}

  .in-section + .in-section{margin-top: 40px;}
  .in-section + .btn-wrap{margin-top:40px;}
}

.function-list{border:solid 2px #accd9d; width:100%; max-width:850px; border-radius:20px; margin:60px auto; display:flex; flex-direction: column;}
.function-list h3{border-radius:20px 20px 0 0; background:#eaf5e7; border-bottom:solid 2px #accd9d; align-items: center; padding:25px 0; color:var(--new-green); font-size:var(--h3); width:100%; text-align:center;}
.function-list ul{padding:30px; display:flex; justify-content: center; gap:30px; align-items: center;}
.function-list ul li{font-size:var(--text); position:relative; padding-left:0.5em;}
.function-list ul li:before{content:""; display:inline-block; width:0.2em; height:0.2em; border-radius:0.2em; background:#444; margin-right:0.4em; position:absolute; top:1em;left:0;}

figure.core{width:90%; max-width:640px; margin:50px auto;}

.cosme-block{display:flex; width:100%; max-width:1100px; margin:60px auto 20px; background:#eaf5e7; gap:50px; align-items: center; border-radius:20px; overflow:hidden}
.cosme-block figure{width:30%;}
.cosme-block .cosme-text{width:calc(70% - 50px); padding-right:30px; gap:20px;}
.cosme-block .cosme-text h3{color:var(--new-green); font-size:var(--h4); margin-bottom:18px; position:relative;}
.cosme-block .cosme-text h3:after{content:""; display:inline-block; width:24px; height:20px; margin-left:6px; position:relative; top:3px; background-image:url(/assets/images/_resource/pages/products/common/outer-link-grn.png); background-size:24px 20px;}
.cosme-block .cosme-text p{font-size:var(--text); line-height:1.7;}


@media (max-width:1080px){
  .function-list{margin:60px auto; display:flex; flex-direction: column;}
  .function-list h3{padding:20px 0;}
  .function-list ul{padding:25px; display:flex; justify-content: center; gap:30px; row-gap:15px; align-items: center; flex-wrap: wrap;}
  .function-list ul li{font-size:var(--text); position:relative; padding-left:0.5em;}
  .function-list ul li:before{content:""; display:inline-block; width:0.2em; height:0.2em; border-radius:0.2em; background:#444; margin-right:0.4em; position:absolute; top:1em;left:0;}

  figure.core{width:80%; max-width:640px; margin:50px auto;}

  .cosme-block{margin:60px auto 20px; gap:40px;}
  .cosme-block figure{width:40%;}
  .cosme-block .cosme-text{width:calc(60% - 40px);}


}

@media (max-width:768px){
  .function-list{margin:40px auto; display:flex; flex-direction: column;}

  .btn-wrap{gap:20px;}
  .btn-wrap a{width:240px;}

  .cosme-block{margin:50px auto 20px; gap:30px;}
  .cosme-block figure{width:48%;}
  .cosme-block .cosme-text{width:calc(52% - 30px);}
  .cosme-block .cosme-text h3:after{content:""; width:18px; height:15px; top:2px; background-size:18px 15px;}
}

@media (max-width:640px){
  .cosme-block{margin:60px auto 20px; gap:10px; flex-direction: column;}
  .cosme-block figure{width:100%;}
  .cosme-block .cosme-text{width:100%; padding:20px;}
}


@media (max-width:576px){
  .btn-wrap{gap:14px;}
  .btn-wrap a.wide{width:100%;}
  .btn-wrap a{width:calc(50% - 7px); height:44px; min-height:44px; padding: 2px 20px;}
}


/* function-block */
.function-block{border:var(--border); border-radius:20px; padding:30px 40px; margin-top:40px;}
.function-block .function-title{font-size:var(--h4); margin-bottom:15px;}
.function-block p{font-size:var(--s-text); line-height:1.7;}

.media-block{margin:60px 0 0; display:flex; gap:40px;}
h4 + .media-block{margin:20px 0 0; display:flex; gap:40px;}
.media-block.half-items > .items{width:calc(50% - 20px); display:flex; flex-direction: column; gap:14px;}
.media-block.half-items > figure{width:calc(50% - 20px);}
.media-block.half-items > .items h5{font-size:var(--h5); font-weight:600;}
.media-block.half-items > .items figure{width:90%; display:flex; justify-self: center; margin:10px 0 0;}

.media-block.third-items > .items{width:calc(66% - 20px); display:flex; flex-direction: column; gap:14px;}
.media-block.third-items > figure{width:calc(34% - 20px);}
.media-block.third-items02 > figure.type01{width:calc(26% - 20px);}
.media-block.third-items02 > figure.type02{width:calc(37% - 20px);}

.media-block.bottom-items{align-items: flex-end; margin-top:20px; gap:30px;}
.media-block.bottom-items > figure.type01{width:calc(24% - 20px);}
.media-block.bottom-items > figure.type02{width:calc(38% - 20px);}
.media-block.bottom-items > figure.type03{width:calc(42% - 20px);}
.media-block.bottom-items > figure.type04{width:calc(29% - 20px);}

@media (max-width:1080px){
.function-block{padding:25px 30px; margin-top:30px;}
}

@media (max-width:768px){
  .media-block{margin:50px 0 0; display:flex; gap:40px; flex-direction: column; width:100%;}
  .media-block.half-items > .items{width:100%; gap:14px;}
  .media-block.half-items > figure{width:80%; margin:0 auto;}
  .media-block.half-items > .items figure{width:80%; display:flex; justify-self: center; margin:10px auto 0;}

  .media-block.bottom-items{align-items: flex-end; margin-top:20px; gap:30px; flex-direction: row; flex-wrap:; justify-content: center;}
  .media-block.bottom-items > figure.type01{width:calc(24% - 20px);}
  .media-block.bottom-items > figure.type02{width:calc(38% - 20px);}
  .media-block.bottom-items > figure.type03{width:calc(58% - 20px);}
  .media-block.bottom-items > figure.type04{width:calc(44% - 20px);}
}

@media (max-width:576px){
  .media-block.bottom-items{align-items: flex-end; margin-top:20px; gap:30px; flex-direction: row; flex-wrap:wrap; justify-content: center;}
  .media-block.bottom-items > figure.type01{width:calc(42% - 20px);}
  .media-block.bottom-items > figure.type02{width:calc(64% - 20px);}
  .media-block.bottom-items > figure.type03{width:calc(64% - 20px);}
  .media-block.bottom-items > figure.type04{width:calc(44% - 20px);}
}


/* corporate-block */
.corporate-block{background:#f8f8f8; border:var(--border); border-radius:20px; padding:40px; margin-top:40px;}
.corporate-block .corporate-title{font-size:var(--h3); margin-bottom:30px;}
.corporate-block p{font-size:var(--s-text); line-height:1.7;}

.corporate-block + .btn-wrap{padding-top:50px;}

@media (max-width:1080px){
.corporate-block{padding:30px; margin-top:30px;}
.corporate-block + .btn-wrap{padding-top:30px;}
}
@media (max-width:768px){
.corporate-block{padding:30px; margin-top:30px;}
.corporate-block + .btn-wrap{padding-top:0;}

}



/* in-action */
.in-section{width:100%; max-width:1100px; margin:0 auto;}
.in-action{margin-bottom:60px;}


.map-wrap{
  position:relative;
  border-radius:20px;
  overflow:hidden;
}

.map-wrap img{
  width:100%;
  height:auto;
}

.map-point{
  position:absolute;
  transform:translate(-50%, -50%);
  background:#2E8208;
  color:#fff;
  border:none;
  border-radius:50%;
  padding:10px;
  cursor:pointer;
}

.map-point img{width:36px; height:36px;}
.map-point#p01{top:19.5%; left:15.5%;}
.map-point#p02{top:15%; left:40%;}
.map-point#p03{top:36%; left:20%;}
.map-point#p04{top:50%; left:16%;}
.map-point#p05{top:56%; left:40%;}
.map-point#p06{top:34%; left:60%;}
.map-point#p07{top:65%; left:28%;}
.map-point#p08{top:50%; left:60%;}
.map-point#p09{top:40%; left:70%;}
.map-point#p10{top:66%; left:68%;}
.map-point#p11{top:82%; left:8%;}


.map-point:focus-visible{
  outline:3px solid #000;
}

/* ===== モーダル背景 ===== */
.modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.4);

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

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transition: opacity 0.3s ease;
  will-change: opacity;
}

.modal.is-open{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  z-index:5555;
}


/* ===== 中身 ===== */
.modal-content{
  background:#fff;
  padding:24px;
  width:90%;
  max-width:720px;

  transform:translateY(10px) scale(0.98);
  opacity:0;

  transition:
    transform 0.3s cubic-bezier(.22,1,.36,1),
    opacity 0.3s ease;

  will-change: transform, opacity;
}

.modal.is-open .modal-content{
  transform:translateY(0) scale(1);
  opacity:1;

  border-radius:20px;
  display:flex;
  gap:30px;
  align-items:center;
}


/* ===== 画像（安定化） ===== */
#modal-img{
  width:220px;
  aspect-ratio: 5 / 4;
  object-fit:cover;
  flex-shrink:0;
}


/* ===== テキスト ===== */
.modal-intro{
  width:calc(100% - 220px - 30px);
  display:flex;
  flex-direction:column;
  gap:16px;
}

.modal-intro h3{
  color:var(--new-green);
  font-size:var(--h4);
}

.modal-intro p{
  font-size:var(--text);
  color:#444;
  line-height:1.6;
}


/* ===== 閉じるボタン ===== */
button.close{
  position:absolute;
  width:48px;
  height:48px;
  border-radius:50%;
  border:none;
  background:var(--new-green);
  right:-24px;
  top:-24px;
  cursor:pointer;
}

/* アクセシビリティ */
button.close span{
  position:absolute!important;
  clip:rect(1px,1px,1px,1px);
  width:1px;height:1px;
  overflow:hidden;
}

/* ×マーク */
button.close:before,
button.close:after{
  content:"";
  position:absolute;
  top:14px;
  left:23px;
  width:4px;
  height:22px;
  border-radius:4px;
  background:#fff;
}

button.close:before{
  transform:rotate(-45deg);
}
button.close:after{
  transform:rotate(45deg);
}


/* ===== モーション軽減 ===== */
@media (prefers-reduced-motion: reduce){
  .modal,
  .modal-content{
    transition:none;
  }
}

/* ===== SPデフォルト ===== */

.map-wrap{
  display:none;
}

.action-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
li.is-full {
  grid-column: span 2;
  margin-bottom:20px;
}

.action-list figure{display:flex; flex-direction: column; gap:20px;}
.action-list figure img{border-radius: 24px; border:var(--border);}
.action-list figure figcaption{display:flex; flex-direction: column; gap:14px;}
.action-list figure figcaption h3{font-size:var(--h4); color:var(--new-green); font-weight:700;}
.action-list figure figcaption p{font-size:var(--s-text); color:#444; line-height:1.6; font-weight:600;}

/* ===== PC ===== */

@media (min-width:769px){

  .map-wrap{
    display:block;
    position:relative;
  }

  .action-list{
    display:none;
  }

}