@charset "UTF-8";
/*--------------------------------------------------

Common

--------------------------------------------------*/
.sp {
  display: inline;
}

.pc {
  display: none;
}

@media print, screen and (min-width: 768px) { /* PC */
  .sp {
    display: none;
  }
  .pc {
    display: inline;
  }
}
p.txt a,
ul.u_list a {
  text-decoration: underline !important;
  color: #13195d;
}

strong {
  font-weight: bold;
}

.font-bold {
  font-weight: bold;
}

.page_ttl_s.company {
  background-image: url(../img/shared/company.png);
}

.page_ttl_s.history {
  background-image: url(../img/shared/page_ttl_s_history.png);
}

.page_ttl_s.product {
  background-image:url(../img/shared/page_ttl_s_product.png);
}

.page_ttl.impregnation_processing {
  background-image: url(../img/shared/pagettl_impregnation_processing.jpg);
}

.page_ttl.technical_information {
  background-image: url(../img/shared/pagettl_technical_information.jpg);
}

.page_ttl.technical_information_sub {
  background-image: url(../img/shared/pagettl_technical_information_sub.jpg);
}

.page_ttl.environment {
  background-image: url(../img/shared/pagettl_environment.jpg);
}

.page_ttl.recruit {
  background-image: url(../img/shared/pagettl_recruit.jpg);
}

.page_ttl_s.inquiry {
  background-image: url(../img/shared/pagettl_inquiry.jpg);
}
.page_ttl_s.template{
	background-image:url(../img/template/products.png);
}
.page_ttl_s.expertise{
  background-image:url(../img/shared/expertise.png);
}
.page_ttl_s.location {
  background-image: url(../img/shared/pagettl_company.jpg);
}
.page_ttl_s.sustain {
  background-image: url(../img/shared/page_ttl_s_sustainability.png);
}
.page_ttl_s.p-detail{
  background-image: url(../img/shared/page_ttl_s_pro.png);
}
.page_ttl_s.topics{
  background-image: url(../img/shared/Firefly\ 20260427132217.png);
}
.page_ttl_s.map{
  background-image: url(../img/index/global.jpg);
}

@media print, screen and (min-width: 768px) { /* PC */
  .ttl_h2,
  .ttl_h3,
  .ttl_h4
  .mail_ttl {
    margin-bottom: 4rem;
    padding: 0 auto;
  }
}
.page_ttl {
  height: 20rem;
  padding: 0;
  position: relative;
}
.page_ttl h1 {
  width: calc(100% - 7rem);
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

@media print, screen and (min-width: 768px) { /* PC */
  .page_ttl h1 {
    width: 110rem;
  }
}
.read p {
  font-weight: bold;
  font-size: 3.2rem !important;
}

@media print, screen and (min-width: 768px) { /* PC */
  .read p {
    font-size: 2.4rem !important;
    line-height: 1.8 !important;
  }
}
.file a[href$=".pdf&disp=inline"]::after {
  background: url(../img/template/icon_pdf.svg) no-repeat 50%/100% auto;
}

.file a[href$=".xlsx&disp=inline"]::after {
  background: url(../img/template/icon_xls.svg) no-repeat 50%/100% auto;
}

.file a[href$=".docx&disp=inline"]::after {
  background: url(../img/template/icon_doc.svg) no-repeat 50%/100% auto;
}

.file a[href$=".pptx&disp=inline"]::after {
  background: url(../img/template/icon_ppt.svg) no-repeat 50%/100% auto;
}

@media print, screen and (min-width: 768px) { /* PC */
  .img.left figure {
    width: calc(33.3333333333% - 2.4rem);
    margin: 0 1.2rem 1.9rem;
  }
  .img.right figure {
    width: calc(33.3333333333% - 2.4rem);
    margin: 0 1.2rem 1.9rem;
  }
}
.box01 {
  background: #f7f9fb;
  padding: 2.6rem;
}

.lr01 .l,
.gap .lr02 .l {
  margin-bottom: 2.6rem;
}

@media print, screen and (min-width: 768px) { /* PC */
  .lr01 {
    display: grid;
    grid-template-columns: 45% 1fr;
  }
  .lr01 .l {
    margin-right: 3.6rem;
    margin-bottom: 0;
  }
  .lr02 {
    display: grid;
    grid-template-columns: 1fr 45%;
  }
  .lr02 .r {
    margin-left: 3.6rem;
    margin-bottom: 0;
  }
  .gap .lr01,
  .gap .lr02 {
    position: relative;
    margin-top: 4.6rem;
  }
  .gap .lr01 {
    margin-left: 2.6rem;
    grid-template-columns: 43% 1fr;
  }
  .gap .lr01 .l {
    position: absolute;
    top: -2.6rem;
    left: -2.6rem;
    width: calc(45% - 2.6rem);
  }
  .gap .lr01 .r {
    grid-row: 1;
    grid-column: 2;
  }
  .gap .lr02 {
    margin-right: 2.6rem;
    grid-template-columns: 1fr 43%;
  }
  .gap .lr02 .r {
    position: absolute;
    top: -2.6rem;
    right: -2.6rem;
    width: calc(45% - 2.6rem);
  }
  .gap .lr02 .l {
    grid-row: 1;
    grid-column: 1;
    margin-left: 0;
  }
}
.next {
  position: relative;
}

.next:after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  color: #20287e;
  line-height: 1;
  width: 2.6em;
  height: 2.6em;
  border: 0.3em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateY(-25%) rotate(135deg);
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
}

.next:last-child:after {
  content: none;
  border: none;
}

@media print, screen and (min-width: 768px) {
  .btn.clm4 li {
    width: calc(25% - 30px);
    margin-left: 15px;
    margin-right: 15px;
  }
}

input::-moz-placeholder {
  color: #ccc;
}

input::placeholder {
  color: #ccc;
}

/*--------------------------------------------------

CKEditor

--------------------------------------------------*/
.editor p {
  font-size: 2.6rem;
  line-height: 5rem;
  margin-bottom: 4.5rem;
}
.editor a[target=_blank]:after {
  content: "";
  display: inline-block;
  width: 1.4rem;
  height: 1.4rem;
  margin-left: 0.4rem;
  margin-right: 0.4rem;
  background: url(../img/shared/icon_external.png) right center no-repeat;
  background-size: 100%;
}
.editor ol {
  margin-bottom: 4.5rem !important;
}
.editor ol li {
  margin-left: 2em;
  font-size: 2.6rem;
  line-height: 5rem;
  list-style-type: decimal;
}
.editor ul {
  margin-bottom: 4.5rem !important;
}
.editor ul li {
  position: relative;
  padding-left: 3.6rem;
  font-size: 2.6rem;
  line-height: 5rem;
}
.editor ul li + li {
  margin-top: 1.5rem;
}
.editor ul li:before, .editor ul li:after {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 2rem;
  height: 2rem;
}
.editor ul li:before {
  background: #cbd8de;
  -webkit-clip-path: polygon(0 0, 100% 0, 0 100%);
          clip-path: polygon(0 0, 100% 0, 0 100%);
}
.editor ul li:after {
  background: #20287e;
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%);
          clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.editor table {
  width: 100%;
  margin-bottom: 5rem;
}
.editor table th {
  color: #fff;
  background: #20287e;
  text-align: center;
}
.editor table tbody th {
  background: #eff4f7;
  color: #0d0d0d;
}
.editor table th, .editor table td {
  padding: 0.75rem 1.1rem;
  line-height: 1.6;
  border: 1px solid #d2d2d2;
  letter-spacing: 0.06em;
}
.editor table .table_in th, .editor table .table_in td {
  border: 0;
}

@media print, screen and (min-width: 768px) { /* PC */
  .editor p {
    font-size: 2rem;
    line-height: 3.4rem;
  }
  .editor ol li {
    font-size: 2rem;
    line-height: 3.4rem;
  }
  .editor ul li {
    padding-left: 2.3rem;
    font-size: 2rem;
    line-height: 3.4rem;
  }
  .editor ul li::before,
  .editor ul li::after {
    top: 1rem;
    width: 1.2rem;
    height: 1.2rem;
  }
}
/*-----------------------------------------------
/* = luminous-basic.min.css
----------------------------------------------- */
/*!
 * Luminous v2.3.5
 * Copyright 2015-2021, Zebrafish Labs
 * Licensed under BSD-2 (https://github.com/imgix/luminous/blob/main/LICENSE.md)
 */
@keyframes a {
  0% {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes b {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes c {
  0% {
    transform: translate(-50%, -50%) rotate(0);
  }
  50% {
    transform: translate(-50%, -50%) rotate(-180deg);
  }
  to {
    transform: translate(-50%, -50%) rotate(-1turn);
  }
}
@keyframes d {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(6px);
  }
  25% {
    transform: scale(1.3) translateX(8px);
  }
  40% {
    transform: scale(1.2) translateX(6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(6px);
  }
  75% {
    transform: scale(0.7) translateX(8px);
  }
  90% {
    transform: scale(0.8) translateX(6px);
  }
  to {
    transform: scale(1);
  }
}
@keyframes e {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.2) translateX(-6px);
  }
  25% {
    transform: scale(1.3) translateX(-8px);
  }
  40% {
    transform: scale(1.2) translateX(-6px);
  }
  50% {
    transform: scale(1);
  }
  60% {
    transform: scale(0.8) translateX(-6px);
  }
  75% {
    transform: scale(0.7) translateX(-8px);
  }
  90% {
    transform: scale(0.8) translateX(-6px);
  }
  to {
    transform: scale(1);
  }
}
.lum-lightbox {
  background: rgba(0, 0, 0, 0.6);
}

.lum-lightbox-inner {
  bottom: 2.5%;
  left: 2.5%;
  right: 2.5%;
  top: 2.5%;
}

.lum-lightbox-inner img {
  position: relative;
}

.lum-lightbox-inner .lum-lightbox-caption {
  color: #fff;
  margin: 0 auto;
  max-width: 700px;
  text-align: center;
}

.lum-loading .lum-lightbox-loader {
  animation: c 1.8s linear infinite;
  display: block;
  height: 20px;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 66px;
}

.lum-lightbox-loader:after, .lum-lightbox-loader:before {
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: 20px;
  content: "";
  display: block;
  height: 20px;
  margin-top: -10px;
  position: absolute;
  top: 50%;
  width: 20px;
}

.lum-lightbox-loader:before {
  animation: d 1.8s linear infinite;
  left: 0;
}

.lum-lightbox-loader:after {
  animation: e 1.8s linear infinite;
  animation-delay: -0.9s;
  right: 0;
}

.lum-lightbox.lum-opening {
  animation: a 0.18s ease-out;
}

.lum-lightbox.lum-opening .lum-lightbox-inner {
  animation: b 0.18s ease-out;
}

.lum-lightbox.lum-closing {
  animation: a 0.3s ease-in;
  animation-direction: reverse;
}

.lum-lightbox.lum-closing .lum-lightbox-inner {
  animation: b 0.3s ease-in;
  animation-direction: reverse;
}

.lum-img {
  transition: opacity 0.12s ease-out;
}

.lum-loading .lum-img {
  opacity: 0;
}

.lum-gallery-button {
  background: transparent;
  border: 0;
  cursor: pointer;
  height: 100px;
  margin: 0;
  max-height: 100%;
  outline: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  text-indent: 150%;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  width: 60px;
}

.lum-close-button {
  height: 32px;
  opacity: 0.3;
  position: absolute;
  right: 5px;
  top: 5px;
  width: 32px;
}

.lum-close-button:hover {
  opacity: 1;
}

.lum-close-button:after, .lum-close-button:before {
  background-color: #fff;
  content: " ";
  height: 33px;
  left: 15px;
  position: absolute;
  width: 2px;
}

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

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

.lum-previous-button {
  left: 12px;
}

.lum-next-button {
  right: 12px;
}

.lum-gallery-button:after {
  border-top: 4px solid hsla(0, 0%, 100%, 0.8);
  content: "";
  display: block;
  height: 36px;
  position: absolute;
  top: 50%;
  width: 36px;
}

.lum-previous-button:after {
  border-left: 4px solid hsla(0, 0%, 100%, 0.8);
  border-radius: 3px 0 0 0;
  box-shadow: -2px 0 rgba(0, 0, 0, 0.2);
  left: 12%;
  transform: translateY(-50%) rotate(-45deg);
}

.lum-next-button:after {
  border-radius: 0 3px 0 0;
  border-right: 4px solid hsla(0, 0%, 100%, 0.8);
  box-shadow: 2px 0 rgba(0, 0, 0, 0.2);
  right: 12%;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 460px) {
  .lum-lightbox-image-wrapper {
    -webkit-overflow-scrolling: touch;
    display: flex;
    overflow: auto;
  }
  .lum-lightbox-caption {
    bottom: 0;
    position: absolute;
    width: 100%;
  }
  .lum-lightbox-position-helper {
    margin: auto;
  }
  .lum-lightbox-inner img {
    max-height: none;
    max-width: none;
  }
}
.lum-lightbox.lum-open {
  z-index: 9999;
}

@media (max-width: 767px) {
  .lum-lightbox-inner img {
    max-height: 100%;
    max-width: 100%;
  }
}
/* -----------------------------------------------
= news
----------------------------------------------- */
.news {
  padding: 0 5rem;
}

.news ul {
  padding: 1rem 3rem 13rem;
}

.news li {
  border-bottom: 1px dotted #ccc;
}

.news li a {
  display: block;
  position: relative;
  padding: 3rem 6.5rem 3rem 1rem;
  letter-spacing: 0.04em;
}

.news li a::after {
  content: "";
  position: absolute;
  top: calc(50% - 0.95rem);
  right: 0;
  width: 2.6rem;
  height: 1.9rem;
  background: url(../img/shared/icon_arrow.svg) no-repeat 50%/cover;
  filter: invert(86%) sepia(0%) saturate(0%) hue-rotate(20deg) brightness(105%) contrast(88%);
}

.news li a time {
  display: block;
  margin-bottom: 2rem;
  color: #808080;
  font-size: 2.4rem;
}

.news li a p {
  color: #13195d;
  font-size: 2.6rem;
  line-height: 4rem;
}

.news .btn {
  width: 54rem;
  margin-top: -6rem;
  margin-left: auto;
  margin-right: auto;
}

@media print, screen and (min-width: 768px) { /* PC */
  .news {
    padding: 0 0 5rem;
  }
  .news ul {
    max-width: 102rem;
    margin: 0 auto;
    padding: 1rem 4rem 6.5rem;
  }
  .news li a {
    display: flex;
    padding: 2rem 4rem 2rem 1rem;
  }
  .news li a::after {
    top: calc(50% - 0.65rem);
    right: 1rem;
    width: 1.7rem;
    height: 1.3rem;
  }
  .news li a:hover::after {
    filter: invert(24%) sepia(71%) saturate(1615%) hue-rotate(218deg) brightness(91%) contrast(85%);
  }
  .news li a time {
    margin-bottom: 0;
    margin-right: 2rem;
    font-size: 1.4rem;
    line-height: 2.4rem;
  }
  .news li a p {
    flex: 1;
    font-size: 1.6rem;
    line-height: 2.4rem;
    transition: color 0.3s;
  }
  .news li a:hover p {
    color: #434cab;
    text-decoration: underline;
  }
  .news .btn {
    width: 34rem;
    margin-top: -4rem;
  }
  .news .btn a {
    padding-top: 2.6rem;
    padding-bottom: 2.6rem;
  }
}
/* -----------------------------------------------
= topics_sub
----------------------------------------------- */
.topics_sub {
  margin-bottom: 4rem;
}
.topics_sub ul li {
  margin-bottom: 2.6rem;
}
.topics_sub ul li p {
  font-size: 2.6rem;
  line-height: 3rem;
}
.topics_sub ul li a {
  display: grid;
  grid-template-columns: 27rem 1fr;
  gap: 3rem;
}
.topics_sub ul li time {
  font-size: 2.4rem;
  color: #808080;
}
.topics_sub ul li .img {
  text-align: center;
}
.topics_sub ul li img {
  height: 18rem;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.topics_sub ul li .text_area {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.topics_meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 2.4rem;
  line-height: 1;
}

.topics_meta time {
  color: #808080;
}

.topics_meta span {
  font-size: 0.8em; /* pinのサイズ調整 */
}


@media print, screen and (min-width: 768px) { /* PC */
  .topics_sub ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  .topics_sub ul li p {
    font-size: 1.6rem;
    line-height: 2rem;
  }
  .topics_sub ul li a {
    display: block;
  }
  .topics_sub ul li time {
    font-size: 1.4rem;
  }
  .topics_sub ul li .img {
    margin-bottom: 1rem;
  }
  .topics_meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.4rem;
  line-height: 1;
  }

.topics_meta time {
  color: #808080;
  }

.topics_meta span {
  font-size: 0.9em; /* pinのサイズ調整 */
  }

}


/* -----------------------------------------------
= トピックス詳細
----------------------------------------------- */
[class^="topic_img_Count-"] {
  display: grid;
  grid-template-columns: 1fr; /* スマホは1列 */
  gap: 1.6rem;
}

[class^="topic_img_Count-"] figure {
  height: 100%;
  overflow: hidden;
  border-radius: 0.8rem;
}

[class^="topic_img_Count-"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: pointer; /* 指アイコン */
}

/* caption（必要な場合のみ） */
[class^="topic_img_Count-"] figcaption {
  margin-top: 0.5rem;
  font-size: 1.4rem;
  color: #666;
  text-align: center;
}

/* PC */
@media print, screen and (min-width: 768px) {
  .topic_img_Count-1 { grid-template-columns: 1fr; }
  .topic_img_Count-2 { grid-template-columns: repeat(2, 1fr); }
  .topic_img_Count-3 { grid-template-columns: repeat(3, 1fr); }
  .topic_img_Count-4 { grid-template-columns: repeat(4, 1fr); }
}
/*--------------------------------------------------

トピックモーダル表示

--------------------------------------------------*/
/* modal base */
.img-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
}

.img-modal.is-open {
  display: block;
}

/* background */
.img-modal__bg {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.7);
}

/* content */
.img-modal__content {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.img-modal__content img {
  max-width: 100%;
  max-height: 90vh;
  object-fit: contain;
  background: #fff;
}

/* close button */
.img-modal__close {
  position: absolute;
  top: 2rem;
  right: 2rem;
  font-size: 3rem;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
}
/*--------------------------------------------------

サイトマップツリー

--------------------------------------------------*/
.sitemap-tree{
  padding: 0 3.5rem;
  font-size: clamp(16px, 1.8vw, 30px);
}

.sitemap-tree p{
  margin-top: 0rem;
  margin-bottom: 3.0rem;
  padding-left: 8.0rem;
}

.sitemap-tree li {
  position: relative;
	padding-left: 3.6rem;
  line-height: 5rem;
}

.sitemap-tree li + li{
	margin-top: 3.0rem;
}

.sitemap-tree li::before,
.sitemap-tree li::after {
	content: '';
	position: absolute;
	top: 1.2rem;
	left: 0;
	width: 2rem;
	height: 2rem;
}

.sitemap-tree li::before{
  background: #cbd8de;
	clip-path: polygon(0 0,100% 0,0 100%);
}

.sitemap-tree li::after{
  background: #20287e;
	clip-path: polygon(100% 0,100% 100%,0 100%);
}

@media print, screen and (min-width: 768px) {/* PC */
.sitemap-tree li {
	padding-left: 3rem;
  padding-bottom: 3rem;
	line-height: 3.4rem;
}
.sitemap-tree li + li {
	margin-top: 3rem;
}
.sitemap-tree li::before,
.sitemap-tree li::after {
	top: 1rem;
	width: 1.2rem;
	height: 1.2rem;
}
.sitemap-tree {
  width: 80%;
	max-width: 1540px;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
  font-size: clamp(16px, 1.8vw, 30px);
}}
/*--------------------------------------------------

沿革

--------------------------------------------------*/
.history .history_in {
  position: relative;
}
.history .history_in:before {
  content: "";
  width: 3.6rem;
  height: 3.6rem;
  line-height: 1;
  border-radius: 50%;
  background: #cfd5ff;
  display: block;
  position: absolute;
  left: 0;
  top: 0rem;
  z-index: 0;
}
.history .history_in h3 {
  margin-left: 5rem;
  font-size: 3.6rem;
  line-height: 1;
  color: #808080;
  font-weight: bold;
  position: relative;
  z-index: 10;
}
.history .history_in ul {
  margin-left: 1.4rem;
  border-left: 1rem solid #eee;
  padding: 3rem 0 3rem 5rem;
}
.history .history_in li {
  line-height: 1.3;
  margin-bottom: 1rem;
}
.history .history_in li span.time {
  font-size: 2.6rem;
  line-height: 5rem;
  display: block;
}
.history .history_in li span.text {
  margin-left: 3rem;
  display: block;
  line-height: 3.6rem;
}
.history .history_in:last-child ul {
  -o-border-image: linear-gradient(to bottom, #eee, #fff) 1;
     border-image: linear-gradient(to bottom, #eee, #fff) 1;
}

@media print, screen and (min-width: 768px) { /* PC */
  .history .history_in:before {
    width: 2.6rem;
    height: 2.6rem;
  }
  .history .history_in h3 {
    margin-left: 4rem;
    font-size: 2.6rem;
  }
  .history .history_in ul {
    margin-left: 1rem;
    border-left: 0.6rem solid #eee;
    padding: 2rem 0 4rem 10rem;
  }
  .history .history_in li {
    display: grid;
    grid-template-columns: 16rem 1fr;
  }
  .history .history_in li span.time {
    font-size: 1.6rem;
    line-height: 3.4rem;
    display: block;
  }
  .history .history_in li span.text {
    margin-left: 3rem;
  }
  .history .history_in:last-child ul {
    -o-border-image: linear-gradient(to bottom, #eee, #fff) 1;
       border-image: linear-gradient(to bottom, #eee, #fff) 1;
  }
}
/*--------------------------------------------------
製品情報 (共通・スマホベース)
--------------------------------------------------*/
.lineup {
  padding: 4.5rem 0 0;
  width: 95%; /* スマホでは端に寄りすぎないよう調整 */
  margin: 0 auto;
}
.lineup .w80 {
  width: 100%; /* スマホでは幅いっぱいに */
  margin: 0 auto;
}
.lineup .btn {
  margin-bottom: 6em;
}
.lineup .btn a {
  padding: 2rem 5rem; /* スマホ用に横パディングを調整 */
  line-height: 1;
  display: block;
  text-align: center;
}
.lineup .font90 {
  font-size: 100%;
}
.lineup h5 a {
  text-decoration: underline;
  color: #20287D;
}

.box table {
  background: #fff;
}

/* レイアウト・ナビ共通 */
.column02 {
  overflow: inherit;
}
  .column02 .column_r {
  height: 100%;
  margin-top: 5rem;
}
.column02 .lnav li a {
  display: block;
  padding: 2rem 2rem 2rem 4rem;
  line-height: 1.5;
}
.column02 .lnav p a {
  padding: 2rem 0.5rem 1.5rem 4rem;
  background: #eff4f7;
  font-size: 2.4rem; /* スマホ向けに微調整 */
  line-height: 1.5;
  color: #20287e;
}
.column02 .lnav p.active a {
  font-weight: bold;
}
.column02 .lnav ul li {
  font-size: 2.2rem;
}
.column02 .lnav ul li.active > a {
  background: #ffffff;
  font-weight: bold;
  position: relative;
}
.column02 .lnav ul li.active > a:before {
  content: "";
  position: absolute;
  top: 3rem;
  left: 4rem;
  width: 2.2rem;
  height: 1.6rem;
  background: url(../img/shared/icon_arrow.svg) no-repeat 50%/contain;
  filter: invert(11%) sepia(52%) saturate(5032%) hue-rotate(234deg) brightness(91%) contrast(94%);
}
.column02 .lnav ul.first > li > a {
  color: #fff;
  background: #20287e;
  font-size: 2.4rem;
}
.column02 .lnav ul.first > li:last-child {
  border-bottom: none;
}
.column02 .lnav ul.second > li a {
  padding: 2rem 1rem 2rem 6rem;
  border-bottom: 1px solid #eee;
}
.column02 .lnav ul.second > li:last-child a {
  padding: 2rem 1rem 2rem 6rem;
  border-bottom: none;
}
@media print, screen and (min-width: 768px) { /* PC */
  .column02 .column_r {
  height: 100%;
  margin-top: 0;
}
}
/* 製品説明 (Products Read) */
.products_read .left {
  margin-bottom: 3rem;
}
.products_read .right .read {
  margin-bottom: 4rem;
  font-size: 2.8rem; /* スマホ向け */
  line-height: 1.8;
}
.products_read .right h4 {
  font-size: 2.4rem;
  background: #20287e;
  color: #fff;
  padding: 1.4rem;
  margin-bottom: 4rem;
  text-align: center;
}
.products_read .right ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* スマホは2列 */
  gap: 2rem;
}
.products_read .right ul li {
  text-align: center;
}
.products_read .right ul .icon {
  display: block;
  border-radius: 50%;
  background: #eff4f7;
  height: 10rem;
  width: 10rem;
  position: relative;
  margin: 0 auto 2rem auto;
}
.products_read .right ul .icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 5rem;
  object-fit: contain;
  filter: invert(11%) sepia(52%) saturate(5032%) hue-rotate(234deg) brightness(91%) contrast(94%);
}
.products_read .right ul .icon:before {
  content: "";
  display: block;
  height: 11rem;
  width: 11rem;
  border: 1px solid #c2cee5;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.products_read .right ul .text {
  font-size: 1.8rem;
  line-height: 1.2;
}

/* アコーディオン (PCのデザインをスマホにも適用) */
.details-parent {
  scroll-margin-top: 100px;
}
.details-parent > summary {
  background-color: #d1d6db;
  padding: 1.5rem 2rem;
  font-size: 2.6rem;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  border: 1px solid #ccc;
}
.details-parent > summary::after {
  content: '▼';
  transition: 0.3s;
  color: #808080;
}
.details-parent[open] > summary::after {
  transform: rotate(180deg);
}
.details-parent > summary::-webkit-details-marker {
    display: none;
}
.details-content {
  padding: 2rem 0;
}
.details-content p {
  font-size: 2rem;
  margin: 0 2rem 2.5rem 2rem;
  line-height: 1.6;
}

.details-child > summary {
  background-color: #f4f4f4;
  padding: 2.5rem 2rem;
  font-size: 2.6rem;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  border: 1px solid #ccc;
}
.details-child > summary::after {
  content: '▼';
  transition: 0.3s;
  color: #cecdcd;
  font-size: 2rem;
}
.details-child[open] > summary::after {
  transform: rotate(180deg);
}

/* 製品グリッド (スマホは1列) fff*/
.product-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 2rem 0;
  list-style: none;
}
.product-card {
  padding-top: 1rem;
  margin: 0 auto;
  width: 100%;
}
.product-card h4 {
  margin: 0 0 2rem 0;
  font-size: 2.2rem;
  text-align: center;
}
.product-card h4::before { content: "・"; }
.product-card h4 a {
  display: inline-block;
  position: relative;
  padding-right: 3.5rem;
  color: inherit;
  text-decoration: none;
  border-bottom: #0d0d0d 1px solid; /* 線をここに移動 */
}
.product-card h4 a::after {
  content: "»";
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  transition: transform 0.3s;
}

/* 設備特徴 (スマホは1列) */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  padding: 2rem 1rem;
}
.feature-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 4px solid #2b367e;
  border-radius: 4px;
  padding: 2rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05);
}
.feature-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid #eee;
}
.feature-icon {
  width: 4.5rem;
  height: 4.5rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.feature-num { font-size: 2.5rem; font-weight: 800; color: #d1d6db; }
.feature-header h4 { font-size: 1.8rem; font-weight: 700; color: #000; margin: 0; }
.feature-body p { font-size: 1.6rem; line-height: 1.6; color: #333; }
.aux-product-grid-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 0 4rem 3rem 4rem;
  list-style: none;
}

/* 一体感を出すための背景ボックス */
.aux-product-grid {
  padding: 3rem;
  margin: 0;
  list-style: none;
}

/* ボックス内のカード設定 */
.aux-product-card {
  padding: 0;
}

/* 既存のh4デザイン（下線など）と完全に合わせる */
.aux-product-card h4 {
  padding-left: 1.2em;      /* 全体を右にずらす（・の幅分） */
  text-indent: -1.2em;     /* 1行目だけ左に戻す */
  text-align: left;        /* 左寄せを確実にする */
  margin: 0 0 2rem 0;
  font-size: 2rem;
  border-bottom: #0d0d0d 1px solid;
}

/* 既存の「・」を継承 */
.aux-product-card h4::before {
  content: "・";
  font-size: 2.5rem;
}

/* リスト内の製品名テキスト（追加する場合用） */
.aux-list-item {
  font-size: 2rem;
  margin-bottom: 1rem;
  padding-left: 3rem;
  position: relative;
  list-style: none;
}

/* 各リスト項目（ここが重要） */
.aux-list-item li {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding-left: 3rem; /* 四角形のスペースを空ける */
  position: relative; /* 四角形の位置を決める基準 */
  color: #333;
}

/* 各項目につく四角形の設定 */
.aux-list-item li::before {
  content: ""; /* 空の要素を作る */
  position: absolute;
  left: 0;
  top: 0.3em; /* 文字の高さに合わせて微調整 */
  width: 10px; /* 四角の幅 */
  height: 10px; /* 四角の高さ */
  background-color: #d1d6db; /* image_4d688eに合わせた薄いグレー */
  display: inline-block;
}
.aux-list-item li a::after
{
  content: "»";          /* もしくは ">" や "→" */
  position: absolute;
  right: 15px;               /* 右端に固定 */
  top: 50%;               /* 縦中央へ */
  transform: translateY(-50%); /* 完璧な中央揃え */
  font-size: 2.2rem;      /* 文字より少し小さくするとオシャレです */
  transition: transform 0.3s; /* 動きをつける準備 */
}
/* 4. マウスを乗せた時の演出（「押せる感」をアップ） */
.aux-list-item li a:hover {
  opacity: 0.7;
}
.aux-list-item li a:hover::after {
  transform: translate(5px, -50%); /* 矢印がちょっと右に動く */
}
/* アイコン共通設定 */
.icon-group { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }
.icon {
  display: block; width: 13rem; height: 13rem; margin: 0 auto 10px;
  background-color: #fff; border: 1px solid #333; border-radius: 50%;
  background-size: 70% 70%; background-position: center; background-repeat: no-repeat;
}
.icon-group {
  display: flex;
  justify-content: center;
  gap: 20px;  
}

.icon-group figure {
  margin: 0;
  text-align: center;
  font-size: 2rem;
}
/* アイコン画像パス (必要に応じて全種類記述) */
.is-iron  { background-image: url('../img/index/gear02_.svg'); }
.is-alu   { background-image: url('../img/index/product_can.svg'); }
.is-resin { background-image: url('../img/index/product_resin.svg'); }
.is-metal { background-image: url('../img/index/product_screw.svg'); }
.is-thermal { background-image: url('../img/index/product_thermal.svg'); }
.is-laminate { background-image: url('../img/index/purpose_icon03.svg'); }
.is-drop { background-image: url('../img/index/sealant_water.svg'); }
.is-brush { background-image: url('../img/index/sealant_brush.svg'); }
.is-spray { background-image: url('../img/index/sealant_spray.svg'); }
.is-putty { background-image: url('../img/index/sealant_putty.svg'); }
.is-dip { background-image: url('../img/index/sealant_dip.svg'); }
/* 他のアイコンクラスも同様に... */

/*impregnation equipment*/
/* 特徴全体のグリッド（PCでは2列、もしくは3列） */
.features-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 3rem 4rem;
}

/* 各カードのスタイル */
.feature-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 4px solid #2b367e; /* image_4c5e1fの濃い紺色をアクセントに */
  border-radius: 4px;
  padding: 3rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* ほんの少し浮かす */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ヘッダー部分（数字とタイトル） */
.feature-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee; /* 薄い区切り線 */
  padding-bottom: 1rem;
}
.feature-icon {
  flex-shrink: 0;        /* テキストに押されて小さくならないように固定 */
  width: 6rem;
  height: 6rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  margin-top: -0.5rem;    
}
.is-flex { background-image: url('../img/index/equipment_flex.svg'); }
.is-auto { background-image: url('../img/index/equipment_auto.svg'); }
.is-quality { background-image: url('../img/index/equipment_quality.svg'); }
.is-option { background-image: url('../img/index/equipment_option.svg'); }
.is-support { background-image: url('../img/index/equipment_support.svg'); }

/* 大きな数字 */
.feature-num {
  font-size: 3rem;
  font-weight: 800;
  color: #d1d6db; /* 主張しすぎないグレー */
  font-family: Arial, sans-serif;
}

/* カード内のタイトル */
.feature-header h4 {
  flex-grow: 1;          /* 残りの幅を占有 */
  font-size: 2.2rem;
  font-weight: 700;
  color: #000000;
  margin: 0;
  line-height: 1.3;      /* 行間を少し詰めると綺麗です */
  padding-right: 0.5rem; /* アイコンとの余白 */
}

/* 説明文 */
.feature-body p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #000000;
  margin: 0;
}
/* 共通パーツ */
sup { vertical-align: top; font-size: 60%; }
.view-more {
  display: block; text-align: right; text-decoration: underline 1px #a8a8a8;
  color: #333; font-size: 1.8rem; margin-top: 10px;
}
.fusion iframe { width: 100%; height: 50vh; display: block; }
@media print, screen and (min-width: 768px) {
  .lineup {
    display: block; 
    /* 1. 全体の最大幅を決める（実数指定） */
    max-width: 1540px; 
    /* 2. 左右に5%の隙間（余白）を確保する */
    padding: 3.5rem 0; 
    /* 3. 中央に寄せる */
    margin: 0 auto;
    /* 4. ボックスサイズ計算を崩さない（重要） */
    box-sizing: border-box;
    width: 80%;
  }
  .lineup .btn {
    margin-bottom: 0;
  }
  .lineup .btn a {
    padding: 1rem 4rem 1rem 2.4rem;
  }
  .lineup .font90 {
    font-size: 90%;
  }
  .column02 .column_r h3 {
    margin-bottom: 2rem;
    font-size: 1.8rem;
    line-height: 1.5;
  }
  .column02 .lnav li a {
    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
    line-height: 1;
    font-size: 1.5rem;
  }
  .column02 .lnav p a {
    font-size: 1.4rem;
    line-height: 1;
    padding: 1.5rem 0.5rem 1.5rem 1.5rem;
  }
  .column02 .lnav ul li.active > a:before {
    top: 1.4rem;
    left: 1rem;
    width: 1.3rem;
  }
  .column02 .lnav ul.first > li > a {
    line-height: 1;
    font-size: 1.6rem;
  }
  .column02 .lnav ul.second > li a {
    padding: 1.5rem 0.5rem 1.5rem 3.6rem;
    font-size: 1.8rem;
  }
  .column02 .lnav ul.second > li:last-child a {
    padding: 1.5rem 0.5rem 1.8rem 3.6rem;
  }
  .column02 {
    display: grid;
    grid-template-columns: 1fr 20rem;
    -moz-column-gap: 3rem;
         column-gap: 3rem;
  }
  .column02 .lnav {
    position: sticky;
    top: 130px;
    max-height: calc(100vh - 130px - 2rem); 
    overflow-y: auto;
    scrollbar-width: thin; 
    cursor: ns-resize;
  }
  .column02 .lnav::-webkit-scrollbar {
    width: 6px;
  }
  .column02 .lnav::-webkit-scrollbar-track {
    background: #fbfbfb; /* レールの色を少し濃くする */
  }
  .column02 .lnav::-webkit-scrollbar-thumb {
    background: #20287e;
    border-radius: 10px;
  }
  .products_read {
    display: grid;
    grid-template-columns: 34rem 1fr;
    gap: 3rem;
  }
  .is-single-column {
    display: block
  }
  .products_read .left {
    margin-bottom: 0;
  }
  .products_read .right .read {
    margin-bottom: 2rem;
    font-size: 2.2rem;
    line-height: 1.5;
  }
  .products_read .right h4 {
    font-size: 1.4rem;
    background: #20287e;
    color: #fff;
    padding: 0.6rem;
    display: inline-block;
    margin-bottom: 2rem;
  }
  .products_read .right ul {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
  }
  .products_read .right ul li {
    text-align: center;
  }
  .products_read .right ul .icon {
    display: block;
    border-radius: 50%;
    background: #eff4f7;
    height: 4.8em;
    width: 4.8rem;
    position: relative;
    margin: 0 auto 0.8rem auto;
    border: none !important;
  }
  .products_read .right ul .icon img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.8rem;
    -o-object-fit: contain;
       object-fit: contain;
    filter: invert(11%) sepia(52%) saturate(5032%) hue-rotate(234deg) brightness(91%) contrast(94%);
  }
  .products_read .right ul .icon:before {
    content: "";
    display: block;
    height: 5.2rem;
    width: 5.2rem;
    border: 1px solid #c2cee5;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .products_read .right ul .text {
    font-size: 1.5rem;
    line-height: 1;
  }
  .editor ul.clm03 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }
  .editor ul.clm03 li + li {
    margin-top: 0;
  }
  body.products_detail .btn.clm4 {
    display: flex;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
  }
  body.products_detail .btn.clm4 li {
    width: calc(25% - 30px);
    margin-left: 10px;
    margin-right: 10px;
  }

  body.products_detail .btn a {
    padding: 2rem 1.5rem 2rem 1.5rem;
    font-size: 1.6rem;
    margin-bottom: 0;
  }
  .fusion iframe {
    width: 94%;
    margin: 0 auto;
    height: 600px;
  }
  .fusion.fusion01 iframe {
    width: 800px;
    height: 600px;
  }
  .fusion.fusion02 iframe {
    width: 640px;
    height: 480px;
  }
 
.details-parent {
  scroll-margin-top: 100px;
}
.details-parent > summary {
  background-color: #d1d6db; /* 濃いめのグレー */
  padding: 2rem 4rem;
  font-size: 3rem;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
  height: 4rem;
  border: 1px solid #ccc;
}

.details-parent > summary::after {
  content: '▼';
  transition: 0.3s;
  color: #808080;
}

.details-parent[open] > summary::after {
  transform: rotate(180deg);
}

.details-content {
  padding: 3rem 0;
}
.details-content p {
  font-size: 2rem;
  margin: 0 4rem 3rem 4rem;
  letter-spacing: 0.1rem;
  line-height: 1.6;
}

.description {
  line-height: 1.6;
  margin-bottom: 30px;
  /* 画像のように青い枠線が必要な場合は border: 1px solid #00aaff; を追加 */
}

/* --- Child Accordion (中見出し) --- */
.details-child[open] {
  margin-bottom: 2rem;
}

.details-child > summary {
  background-color: #f4f4f4; /* 薄いグレー */
  padding: 1rem 4rem;
  font-size: 2.5rem;
  list-style: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 4rem;
  font-weight: 600;
  border: 1px solid #ccc;
}
/* --- Child Accordion (中見出し) の矢印設定 --- */

.details-child > summary::after {
  content: '▼';
  transition: 0.3s;
  color: #cecdcd; /* 親より少し薄めのグレーに設定 */
  font-size: 3rem; /* 親（3rem）より少し小さくして階層を表現 */
}

.details-child[open] > summary::after {
  transform: rotate(180deg);
}

/* --- Product Grid (2列) --- */
.product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC用：きっちり2列 */
  gap: 5rem 3rem; /* 縦の隙間を広めにして見やすく */
  padding: 3rem 0;
  list-style: none;
}

.product-card {
  padding-top: 1rem;
  margin: 0 auto;
}

.product-card h4 {
  margin: 0 0 4rem 0;
  font-size: 2.5rem;
  text-align: center; 
}
.product-card h4::before {
  content:"・";
  font-size: 2.5rem;
}
.product-card h4 a {
  display: inline-block; /* 幅と高さを持たせる */
  position: relative;    /* 矢印(::after)の基準にする */
  padding-right: 4rem;   /* 矢印が入るスペースを確保 */
  color: inherit;
  text-decoration: none;
  line-height: 1.2;      /* 縦位置がズレる場合は調整 */
}
/* 3. 新しく追加する after (＞) */
.product-card h4 a::after {
  content: "»";          /* もしくは ">" や "→" */
  position: absolute;
  right: 0;               /* 右端に固定 */
  top: 50%;               /* 縦中央へ */
  transform: translateY(-50%); /* 完璧な中央揃え */
  font-size: 2.2rem;      /* 文字より少し小さくするとオシャレです */
  transition: transform 0.3s; /* 動きをつける準備 */
}

/* 4. マウスを乗せた時の演出（「押せる感」をアップ） */
.product-card h4 a:hover {
  opacity: 0.7;
}
.product-card h4 a:hover::after {
  transform: translate(5px, -50%); /* 矢印がちょっと右に動く */
}
.product-info{
  margin: 0 auto;
  max-width: 1540px;
  width: 80%;
}
/* --- Auxiliary Materials 専用設定（既存デザインを継承） --- */

/* 2つのリストを横並びにする（product-gridと同じ設定） */
.aux-product-grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr; /* PC：2列 */
  gap: 3rem;
  padding: 0 4rem 3rem 4rem;
  list-style: none;
}

/* 一体感を出すための背景ボックス */
.aux-product-grid {
  padding: 3rem;
  margin: 0;
  list-style: none;
}

/* ボックス内のカード設定 */
.aux-product-card {
  padding: 0;
}

/* 既存のh4デザイン（下線など）と完全に合わせる */
.aux-product-card h4 {
  padding-left: 1.2em;      /* 全体を右にずらす（・の幅分） */
  text-indent: -1.2em;     /* 1行目だけ左に戻す */
  text-align: left;        /* 左寄せを確実にする */
  margin: 0 0 2rem 0;
  font-size: 2.5rem;
  border-bottom: #0d0d0d 1px solid;
}

/* 既存の「・」を継承 */
.aux-product-card h4::before {
  content: "・";
  font-size: 2.5rem;
}

/* リスト内の製品名テキスト（追加する場合用） */
.aux-list-item {
  font-size: 2rem;
  margin-bottom: 1rem;
  padding-left: 3rem;
  position: relative;
  list-style: none;
}

/* 各リスト項目（ここが重要） */
.aux-list-item li {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  padding-left: 3rem; /* 四角形のスペースを空ける */
  position: relative; /* 四角形の位置を決める基準 */
  color: #333;
}

/* 各項目につく四角形の設定 */
.aux-list-item li::before {
  content: ""; /* 空の要素を作る */
  position: absolute;
  left: 0;
  top: 0.6em; /* 文字の高さに合わせて微調整 */
  width: 10px; /* 四角の幅 */
  height: 10px; /* 四角の高さ */
  background-color: #d1d6db; /* image_4d688eに合わせた薄いグレー */
  display: inline-block;
}
.aux-list-item li a::after
{
  content: "»";          /* もしくは ">" や "→" */
  position: absolute;
  right: 15px;               /* 右端に固定 */
  top: 50%;               /* 縦中央へ */
  transform: translateY(-50%); /* 完璧な中央揃え */
  font-size: 2.2rem;      /* 文字より少し小さくするとオシャレです */
  transition: transform 0.3s; /* 動きをつける準備 */
}
/* 4. マウスを乗せた時の演出（「押せる感」をアップ） */
.aux-list-item li a:hover {
  opacity: 0.7;
}
.aux-list-item li a:hover::after {
  transform: translate(5px, -50%); /* 矢印がちょっと右に動く */
}
/* --- Icons --- */
.icon-group {
  display: flex;
  justify-content: center;
  gap: 20px;  
}

.icon-group figure {
  margin: 0;
  text-align: center;
  font-size: 2rem;
}

.icon {
  display: block;
  width: 70px;          /* 少し大きめにすると視認性が上がります */
  height: 70px;
  margin: 0 auto 10px;
  
  /* --- ○ の設定 --- */
  background-color: #fff;     /* 背景を白に */
  border: 1px solid #333;    /* 黒またはグレーの細い線 */
  border-radius: 50%;        /* これで完全な円になります */
  
  /* --- 中のピクトグラムの設定 --- */
  background-size: 70% 70%;  /* 中の画像を少し小さくして余白を作る */
  background-position: center; /* 画像を中央に配置 */
  background-repeat: no-repeat;
}


/* アイコン画像パスの指定 */
.is-iron  { background-image: url('../img/index/gear02_.svg'); }
.is-alu   { background-image: url('../img/index/product_can.svg'); }
.is-resin { background-image: url('../img/index/product_resin.svg'); }
.is-metal { background-image: url('../img/index/product_screw.svg'); }
.is-thermal { background-image: url('../img/index/product_thermal.svg'); }
.is-laminate { background-image: url('../img/index/purpose_icon03.svg'); }
.is-drop { background-image: url('../img/index/sealant_water.svg'); }
.is-brush { background-image: url('../img/index/sealant_brush.svg'); }
.is-spray { background-image: url('../img/index/sealant_spray.svg'); }
.is-putty { background-image: url('../img/index/sealant_putty.svg'); }
.is-dip { background-image: url('../img/index/sealant_dip.svg'); }

/*impregnation equipment*/
/* 特徴全体のグリッド（PCでは2列、もしくは3列） */
.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2列並び */
  gap: 3rem;
  padding: 3rem 4rem;
}

/* 各カードのスタイル */
.feature-item {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-top: 4px solid #2b367e; /* image_4c5e1fの濃い紺色をアクセントに */
  border-radius: 4px;
  padding: 3rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* ほんの少し浮かす */
  display: flex;
  flex-direction: column;
  position: relative;
}

/* ヘッダー部分（数字とタイトル） */
.feature-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #eee; /* 薄い区切り線 */
  padding-bottom: 1rem;
}
.feature-icon {
  flex-shrink: 0;        /* テキストに押されて小さくならないように固定 */
  width: 6rem;
  height: 6rem;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  margin-top: -0.5rem;    
}
.is-flex { background-image: url('../img/index/equipment_flex.svg'); }
.is-auto { background-image: url('../img/index/equipment_auto.svg'); }
.is-quality { background-image: url('../img/index/equipment_quality.svg'); }
.is-option { background-image: url('../img/index/equipment_option.svg'); }
.is-support { background-image: url('../img/index/equipment_support.svg'); }

/* 大きな数字 */
.feature-num {
  font-size: 3rem;
  font-weight: 800;
  color: #d1d6db; /* 主張しすぎないグレー */
  font-family: Arial, sans-serif;
}

/* カード内のタイトル */
.feature-header h4 {
  flex-grow: 1;          /* 残りの幅を占有 */
  font-size: 2.2rem;
  font-weight: 700;
  color: #000000;
  margin: 0;
  line-height: 1.3;      /* 行間を少し詰めると綺麗です */
  padding-right: 0.5rem; /* アイコンとの余白 */
}

/* 説明文 */
.feature-body p {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #000000;
  margin: 0;
}
}
/* -----------------------------------------------
= productページ追加（Kato）
----------------------------------------------- */
/* アンカー用 span を invisible でヘッダー分ずらす */
.anchor {
    display: block;
    position: relative;
    top: -12rem; /* スマホ時 */
    visibility: hidden;
}

@media screen and (min-width: 768px) {
    .anchor {
        top: -8rem; /* PC時 */
    }
}
/*-----------------------------------------------
/* = MailformPro
----------------------------------------------- */
#mfp_overlay_inner {
  width: 70% !important;
  padding: 2rem !important;
  min-width: 700px;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important;
  font-style: normal;
  font-weight: 300;
}
#mfp_overlay_inner h4 {
  margin-bottom: 20px !important;
  font-size: 1.6rem;
}
#mfp_overlay_inner table#mfp_confirm_table tr th,
#mfp_overlay_inner table#mfp_confirm_table tr td {
  font-size: 1.6rem !important;
  padding: 0.8rem;
  vertical-align: middle;
}
#mfp_overlay_inner .mfp_buttons .mfp_element_button {
  border-radius: 30px;
  background: #81b701;
  padding: 1rem 2rem;
  color: #fff;
  font-weight: bold;
  border: none;
  text-shadow: none;
}
#mfp_overlay_inner .mfp_buttons #mfp_button_cancel {
  background: #ccc;
}

.mfp_element_text, .mfp_element_number, .mfp_element_select-one, .mfp_element_email, .mfp_element_tel, .mfp_element_textarea, .mfp_element_date, .mfp_element_password {
  box-shadow: none;
  margin: inherit;
}

.mfp_element_submit {
  text-shadow: none;
}

.mfp_element_submit:hover {
  box-shadow: none;
}

@media print, screen and (min-width: 768px) {
  .form .item .textarea {
    width: 120rem !important;
    height: 22rem !important;
    font-size: 1.8rem;
  }
}
@media (max-width: 767px) {
  table#mfp_confirm_table tr th,
  table#mfp_confirm_table tr td {
    font-size: 2.6rem !important;
    padding: 1.8rem;
  }
}
@media print, screen and (min-width: 768px) {
  table.tiny td, table.tiny th {
    font-size: 1.5rem;
    line-height: 1.4;
    padding: 0.75rem 0.8rem;
  }
}/*# sourceMappingURL=add.css.map */

/*技術情報(technical info)*/
  .content_expertise {
    padding: 4.5rem 5%;
    width: 92%;
}
.about_layout {
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px; /* テキストと画像の間の隙間 */
  margin-bottom: 4rem;
}
.about_text {
  flex: 1; /* 残りのスペースをすべて使う */
  max-width: 700px;
}

.about_text h4 {
  font-size: 2.6rem;
  font-weight: bold;
  margin-bottom: 2rem;
}

.about_text p {
  font-size: 2rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.about_image img {
  width: 100%;
  height: auto;
  display: block;
}
.about_image figcaption {
  font-size: 2rem;
  margin-top: 10px;
  text-align: center;
}
.process_full_image {
  width: 100%;
  margin: 5rem 0; /* 上下のセクションとしっかり距離をあける */
  text-align: center;
}
@media print, screen and (min-width: 768px) { /* PC */
 .content_expertise {
  max-width: 1540px;
  width: 80%;
  padding: 4.5rem 5%;
  margin: 0 auto;
 }
/* 横並びのレイアウト設定 */
.about_layout {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px; /* テキストと画像の間の隙間 */
  margin-top: 30px;
  margin-bottom: 7rem;
}

/* テキスト部分（左側） */
.about_text {
  flex: 1; /* 残りのスペースをすべて使う */
  max-width: 700px;
}

.about_text h4 {
  font-size: 2.5rem;
  font-weight: bold;
  margin-bottom: 40px;
}

.about_text p {
  font-size: 2rem;
  line-height: 1.6;
}

/* 画像部分（右側） */
.about_image {
  flex-basis: 40%; /* 全体の45%の幅を確保 */
  max-width: 500px;
}

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

.about_image figcaption {
  font-size: 2rem;
  margin-top: 10px;
  text-align: center;
}
.about_layout:nth-of-type(even) {
  flex-direction: row-reverse;
}
.process_full_image {
  width: 100%;
  margin: 8rem 0; /* 上下のセクションとしっかり距離をあける */
  text-align: center;
}

.process_full_image img {
  width: 100%;
  max-width: 1100px; /* content_expertise の幅に合わせる */
  height: auto;
  display: block;
  margin: 0 auto;
}
}
/*about us*/
.hero_section {
  background: url('image_a8dfef.png') no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}
.hero_title {
  font-size: 2rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0d0d0d;
  padding: 5rem 0;
}
.panel_grid {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  width: 100%;
}

.panel_grid .panel_item:nth-child(2) { 
  order: 1; 
}

.panel_grid .panel_item:nth-child(1) { 
  order: 2; 
}

.panel_grid .panel_item:nth-child(3) { 
  order: 3; 
}

.panel_grid .panel_item:nth-child(4) { 
  order: 4; 
}
.panel_inner {
  padding: 10%;
  color: #fff;
}
.panel_inner h2 {
  font-size: 3.5rem;
}
.panel_inner p {
  font-size: 2rem;
  margin-top: 2rem;
  line-height: 1.5;
}
.bg_navy { background-color: #2b468a; } /* History */
.bg_blue { background-color: #005a96; } /* Location */

.img_panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.president {
  padding: 2rem 0;
  max-width: 1540px;
  margin: 0 auto;
  width: 90%;
}

.message_flex {
  align-items: center;
  gap: 80px;
  margin-bottom: 2rem;
}
.message_flex.reverse {
  flex-direction: row-reverse;
}

.serif_h2 {
  font-size: 4rem;
  color: #13195d;
  margin-bottom: 2rem;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}

.message_visual {
  flex: 1;
  position: relative;
}

.message_visual img {
  width: 100%;
  position: relative;
  z-index: 2;
}
.message_text {
  flex: 1.2;
}

.message_text p {
  font-size: 2rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 2rem;
}

/* 画像部分の基本設定 */
.message_visual {
  flex: 1;
  position: relative;
  z-index: 1;
}

/* 画像自体の調整 */
.message_visual img {
  width: 100%;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 軽く影をつけるとより浮き立ちます */
}
.company_overview {
  padding: 15rem 5%;
  background-color: #fff;
}

.company_inner {
  max-width: 1540px;
  width: 90%;
  margin: 0 auto;
}


.company_lead p {
  font-size: 2rem;
  line-height: 1.8;
  margin-bottom: 3rem;
  color: #333;
  display: inline;
}

/* テーブルのモダンなスタイリング */
.company_table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8rem;
  padding: 0 5%;
  margin-bottom: 5rem;
}

.company_table th {
  width: 30%;
  background-color: #f8f8f8;
  padding: 2rem 4rem;
  text-align: left;
  font-size: 2.5rem;
  border-bottom: 1px solid #ddd;
  color: #13195d;
}

.company_table td {
  width: 70%;
  padding: 1rem 4rem;
  font-size: 2rem;
  border-bottom: 1px solid #ddd;
  line-height: 1.6;
}

@media print, screen and (min-width: 768px) { /* PC */
 .main_container {
  width: 100%;
  overflow-x: hidden;
}

/* --- 1. HERO SECTION --- */
.hero_section {
  width: 100%;
  background: url('image_a8dfef.png') no-repeat center/cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #ffffff;
}

.hero_title {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 700;
  color: #0d0d0d;
  padding: 5rem 0;
}

/* --- 2. GRID PANELS --- */
.panel_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
}

.panel_item {
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.panel_inner {
  padding: 15%;
  color: #fff;
}
.panel_inner h2 {
  font-size: 4rem;
}
.panel_inner p {
  font-size: 2rem;
  margin-top: 40px;
  line-height: 1.5;
}
.bg_navy { background-color: #2b468a; } /* History */
.bg_blue { background-color: #005a96; } /* Location */

.img_panel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.panel_grid .panel_item:nth-child(1) { 
  order: 1; 
}

.panel_grid .panel_item:nth-child(2) { 
  order: 2; 
}

.panel_grid .panel_item:nth-child(3) { 
  order: 3; 
}

.panel_grid .panel_item:nth-child(4) { 
  order: 4; 
}
/* --- 3. PRESIDENT SECTION --- */
.president {
  padding: 120px 5% 0 5%;
  max-width: 1540px;
  margin: 0 auto;
  width: 80%;
}

.message_flex {
  display: flex;
  align-items: center;
  gap: 80px;
  margin-bottom: 20rem;
}
.message_flex.reverse {
  flex-direction: row-reverse;
}

.serif_h2 {
  font-size: 4rem;
  color: #13195d;
  margin-bottom: 30px;
  font-weight: 500;
  text-align: center;
  line-height: 1.6;
}

.message_visual {
  flex: 1;
  position: relative;
}

.message_visual img {
  width: 100%;
  position: relative;
  z-index: 2;
}

/* 単調さを消す背景のあしらい */
.accent_box {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 90%;
  height: 100%;
  background-color: #f5f5f5; /* 薄いグレー */
  z-index: 1;
}
.message_text {
  flex: 1.2;
}

.message_text p {
  font-size: 2rem;
  line-height: 1.8;
  color: #333;
}

/* 画像部分の基本設定 */
.message_visual {
  flex: 1;
  position: relative;
  z-index: 1;
}

/* グレーの箱（標準：右上へずらす） */
.accent_box {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  z-index: -1; /* 画像の背面に */
}

/* 2つ目のブロック用の箱（左下へずらす） */
.accent_box.left {
  top: 50px;
  left: -50px;
  right: auto;
}

/* 画像自体の調整 */
.message_visual img {
  width: 100%;
  display: block;
  box-shadow: 0 10px 30px rgba(0,0,0,0.05); /* 軽く影をつけるとより浮き立ちます */
}
/* --- 4. COMPANY OVERVIEW --- */
.company_overview {
  padding: 15rem 5%;
  background-color: #fff;
}

.company_inner {
  max-width: 1540px;
  width: 80%;
  margin: 0 auto;
}

/* リード文の青い下線（画像b86405.pngを再現） */
.company_lead p {
  font-size: 2.2rem;
  line-height: 2.2;
  margin-bottom: 3rem;
  color: #333;
  display: inline;
}

/* テーブルのモダンなスタイリング */
.company_table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 8rem;
  padding: 0 5%;
  margin-bottom: 5rem;
}

.company_table th {
  width: 30%;
  background-color: #f8f8f8;
  padding: 2rem 4rem;
  text-align: left;
  font-size: 2.5rem;
  border-bottom: 1px solid #ddd;
  color: #13195d;
}

.company_table td {
  width: 70%;
  padding: 1rem 4rem;
  font-size: 2rem;
  border-bottom: 1px solid #ddd;
  line-height: 1.6;
}
}
/* --- History Section --- */
.history_section {
  padding: 60px 0; /* スマホは少し狭く */
  background-color: #f9f9f9;
}

.history_intro {
  text-align: center;
  margin-bottom: 30px;
  padding: 0 5%;
}

.history_intro h2 {
  font-size: 3.6rem; /* スマホ用に調整 */
}

.history_slider_container {
  width: 100%;
  overflow: hidden;
}

.history_track {
  display: flex;
  gap: 0;
  padding-left: 5%; /* 左端の余白を少し見せる */
  padding-right: 5%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; /* iOSでのスクロールを滑らかに */
  scrollbar-width: none;
}

.history_track::-webkit-scrollbar {
  display: none;
}

.history_card {
  flex: 0 0 85%;
  background: #fff;
  border-left: 1px solid #ddd;
  padding: 25px;
  display: flex;
  flex-direction: column;
  /* 下記を追加して、中身の要素を等間隔、または上詰めに制御する */
  justify-content: flex-start; 
}

.year {
  font-size: 3.5rem;
  font-weight: bold;
}
.card_text {
  /* テキストエリアの最小高さを指定するか、
     余白を一定にするために下記のような指定にする */
  margin-bottom: 20px; 
}
.card_text p {
  font-size: 2.6rem;
  line-height: 1.6;
  margin-bottom: 20px;
  margin-top: 20px;
}
.card_img {
  width: 100%;
  aspect-ratio: 4 / 3; /* 横4:縦3の比率で「枠」を固定 */
  overflow: hidden;    /* 枠からはみ出た分を隠す */
  margin-top: auto;    /* テキスト量に関わらず画像を下に配置したい場合 */
}
.card_img img {
  width: 100%;
  height: 100%;       /* 任意の固定高さ（PCなら300px、スマホなら200pxなど） */
  object-fit: cover;   /* これが重要！画像を切り抜いて枠いっぱいに広げます */
  object-position: center; /* 画像の中央を基準に切り抜き */
  display: block;
}

/* コントロール（ボタンとバー） */
.slider_controls {
  display: flex;
  flex-direction: column; /* 基本はスマホ用の縦並び */
  gap: 20px;
  padding: 0 5%;
  margin-top: 30px;
}

.slider_nav {
  display: none;
}

/* レール部分（影で表現） */
.history_scrollbar_container {
  flex-grow: 1;
  height: 4px; /* 少し太くして存在感を出す */
  background: rgba(0, 0, 0, 0.05); /* 薄い影のような色 */
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); /* 内側に影をつけて凹みを表現 */
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

/* 丸いハンドル（現在地） */
.history_scrollbar_handle {
  background: #333;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  cursor: grab;
  /* スマホ用の丸い形 */
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.history_scrollbar_handle:active {
  cursor: grabbing;
  transform: translateY(-50%) scale(1.2); /* 掴んでいる間は少し大きく */
}
@media print, screen and (min-width: 768px) {
  .history_section {
    padding: 100px 0;
    background-color: #f9f9f9;
  }

  .history_intro {
    text-align: center;
    margin-bottom: 60px;
  }

  .history_slider_container {
    width: 100%;
    overflow: hidden; /* container自体は隠す */
  }

  .history_track {
    display: flex;
    gap: 0;
    padding-left: 10%;
    padding-right: 10%;
    overflow-x: auto; /* ここでスクロールさせる */
    -ms-overflow-style: none;
    scrollbar-width: none;
    align-items: stretch;
  }

  .history_track::-webkit-scrollbar {
    display: none;
  }

  .history_card {
    flex: 0 0 400px;
    background: #fff;
    border-left: 1px solid #ddd;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  .history_card:last-child {
    border-right: 1px solid #ddd;
  }

  .year {
    font-size: 3rem;
    font-weight: bold;
    display: block;
    margin-bottom: 20px;
  }
  .card_text {
  flex-grow: 1;    /* 余ったスペースをこのエリアがすべて埋める */
  display: flex;
  flex-direction: column;
}
  .card_text p {
    font-size: 2rem;
    line-height: 1.6;
    margin-bottom: 40px;
  }

  .card_img {
    width: 100%;
    aspect-ratio: 4 / 3; 
    overflow: hidden;
    margin-top: auto; 
  }

  /* ★変更：imgの指定を修正 */
  .card_img img {
    width: 100%;
    height: 100%; /* 親の4:3の枠いっぱいに広げる */
    object-fit: cover; /* 枠に合わせてトリミング */
    object-position: center;
    display: block; /* 謎の隙間ができるのを防ぐ */
  }

  /* ナビゲーションとシークバーの横並び */
  .slider_controls {
    flex-direction: row; /* 横並びに強制上書き */
    justify-content: flex-start;
    align-items: center;
    gap: 40px;
    padding: 0 10%;
    margin-top: 50px;
  }

  .slider_nav {
    display: flex;
    gap: 10px;
    flex-shrink: 0; /* ボタンの幅が潰れないように固定 */
  }

  .nav_btn {
    width: 60px;
    height: 35px;
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 20px;
    cursor: pointer;
  }

  /* シークバー（スクロールバー） */
  .history_scrollbar_container {
    flex-grow: 1;
    height: 2px;
    background: #ddd;
    box-shadow: none;
  }

  .history_scrollbar_handle {
    width: 100px;  /* 丸から横長に変更 */
    height: 6px;   /* 厚みを調整 */
    border-radius: 3px; /* 角丸を横長用に調整 */
    background: #666; /* 色もPC用に調整 */
  }
}
/*location*/
.location-grid {  
  display: grid;
  padding: 0 2rem;
}
.location-item {
  display: grid;
  min-height: 15rem;
}
.location-item h3 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.location-item p {
  font-size: 2rem;
  line-height: 2;
}
.location-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  color: #fff;
}
.bg-blue1 { background-color: #1e3a8a; }
.bg-blue2 { background-color: #2fbccf; }
.bg-blue3 { background-color: #32a497; }
.bg-blue4 { background-color: #3a608c; }
.bg-blue5 { background-color: #046e8c; }
.bg-blue6 { background-color: #AEB732; }
@media print, screen and (min-width: 768px) { /* PC */
  /* 基本のグリッド設定 */
.location-grid {
  padding: 5rem 0;
  max-width: 1540px;
  width: 80%;
  margin: 0 auto;
}
.location-item {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 左右50%ずつ */
  min-height: 300px;
}
.location-item h3 {
  font-size: 3rem;
  margin-bottom: 1rem;
}
.location-item p {
  font-size: 2rem;
  line-height: 2;
}

/* 画像を枠いっぱいに広げる */
.location-img img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 枠に合わせてトリミング */
  display: block;
}

/* テキストエリアの装飾 */
.location-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 40px;
  color: #fff;
}

/* ★ここがポイント：2番目、4番目...のアイテムを反転させる */
.location-item:nth-child(even) .location-img {
  order: 2; /* 画像を右に */
}
.location-item:nth-child(even) .location-info {
  order: 1; /* テキストを左に */
}

/* 各背景色の設定 */
.bg-blue1 { background-color: #1e3a8a; }
.bg-blue2 { background-color: #2fbccf; }
.bg-blue3 { background-color: #32a497; }
.bg-blue4 { background-color: #3a608c; }
.bg-blue5 { background-color: #046e8c; }
.bg-blue6 { background-color: #AEB732; }
}

/*sustainability*/
/* --- スマホ版（767px以下）の設定 --- */
.policy-card .icon {
    /* 他のスタイルを打ち消す */
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    
    /* アイコン自体のサイズと余白を整える */
    width: 8rem;
    height: auto;
    display: block;
    margin: 0 auto 15px; /* 中央寄せ */
}

/* もし画像が枠いっぱいに広がってしまう場合はこれも追加 */
.policy-card .icon img {
    width: 100%;
    height: auto;
    vertical-align: top;
}
/* 1. 上部の4枚カード（ここはスマホでは1列にする） */
main.main.environment {
    background-color: #f5f5f5;
}
.policy-cards {
    display: grid;
    grid-template-columns: 1fr; 
    width: 80%;
    margin: 5rem auto;
    gap: 3rem;
}
.policy-card {
    background: #fff;
    padding: 2rem 2rem 5rem;
    text-align: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: auto;
}
.policy-link {
  display: block;
  font-weight: bold;
  color: #233b82;
  text-decoration: underline;
  margin: 2rem 0;
  font-size: 3rem;
}
.policy-card p {
  font-size: 2rem;
  text-align: left;
}
/* 2. 下部の詳細カード（こちらもスマホで1列） */
  /* 1. コンテナ：確実に2列に並べる */
  .policy-detail-container {
    display: grid !important;
    /* repeat(2, 520px)だと画面幅によって溢れることがあるため、1frで調整 */
    grid-template-columns: minmax(0, 1fr); 
    gap: 5rem; 
    justify-content: center;
    width: 80%;
    margin: 0 auto;
    padding-bottom: 5rem;
  }

  /* 2. カード本体：高さを揃える */
  .policy-detail-card {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* グリッド内で高さを統一 */
    scroll-margin-top: 100px;
  }

  /* 3. ヘッダー：アイコンの巨大化を強制阻止 */
  .detail-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 2rem;
    padding: 3rem 4rem;
    text-align: left;
  }

  /* ここが重要：以前の .icon スタイルを強制上書き */
  .policy-detail-card img.detail-icon {
    width: 7rem !important;  /* サイズを固定 */
    height: 7rem !important; /* 高さを固定 */
    margin: 0 !important;    /* 中央寄せを解除 */
    display: inline-block !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  .detail-card-title {
    font-size: 3rem;
    font-weight: bold;
    color: #000000;
    margin: 0 !important; /* 既存の余白をリセット */
    line-height: 1.2;
  }

  /* 4. 本文エリア */
  .detail-card-body {
    padding: 2rem;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .detail-content-item {
    margin-bottom: 3rem;
  }

  .detail-content-item h3 {
    font-size: 3rem;
    font-weight: bold;
    color: #000000;
    margin: 0 0 1rem 0;
  }

  .detail-content-item p {
    font-size: 2rem;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 5px;
    text-align: left;
  }

  /* 5. 自動番号振り */
  .auto-number {
    list-style: none !important;
    counter-reset: my-count;
    padding-left: 0 !important;
    margin: 0;
  }

  .auto-number li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 8px;
    font-size: 2rem;
    line-height: 1.6;
    color: #000000;
    list-style: none !important;
  }

  .auto-number li::before {
    counter-increment: my-count;
    content: counter(my-count) ". ";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #333;
  }

  /* 6. ダウンロードリンク */
  .detail-download {
    margin-top: auto; 
    font-size: 2.5rem;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    padding-top: 10px;
  }

  .detail-download:hover {
    text-decoration: underline;
  }
  /* ECO STAGE専用の横並び設定 */
  .eco-flex {
  display: row !important;
  align-items: center; /* 上下の真ん中で揃える */
  gap: 30px;
  flex-direction: row; /* 横並びを強制 */
}

  .eco-text {
  flex: 1; /* 文章が左側のスペースを埋める */
}

  .eco-logo-img {
  width: 15rem;      /* ロゴのサイズ（適宜調整してください） */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;    /* 画面が狭くなっても画像が潰れないようにする */
}
@media print, screen and (min-width: 768px) { /* PC */
  /* カードレイアウト */
.policy-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr); 
    gap: 50px; 
    justify-content: center; 
    margin: 80px auto;
    width: 80%;
    max-width: 1540px;
}

.policy-card {
    background: #fff;
    padding: 10px 40px 40px;
    text-align: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    height: auto;
}

.policy-link {
  display: block;
  font-weight: bold;
  color: #233b82;
  text-decoration: underline;
  margin: 15px 0;
  font-size: 3rem;
}
.policy-card p {
  font-size: 2rem;
  text-align: left;
}

/* 下部詳細セクションの見出し装飾 */
.detail-header {
  display: flex;
  align-items: center;
  gap: 15px;
  border-bottom: 1px solid #ccc; /* 横線 */
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.detail-title {
  font-size: 2rem;
  font-weight: bold;
}

.detail-body h3 {
  font-size: 1.5rem;
  margin: 30px 0 15px;
}
/* PC/スマホ共通（メディアクエリの外でもOK） */
.policy-card .icon {
    /* 他のスタイルを打ち消す */
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    box-shadow: none !important;
    
    /* アイコン自体のサイズと余白を整える */
    width: 60px;
    height: auto;
    display: block;
    margin: 0 auto 15px; /* 中央寄せ */
}

/* もし画像が枠いっぱいに広がってしまう場合はこれも追加 */
.policy-card .icon img {
    width: 100%;
    height: auto;
    vertical-align: top;
} 
main.main.environment {
    background-color: #f5f5f5;
}
.main.main.environment .breadcrumb {
  background-color: #FFF !important;

}
  /* 1. コンテナ：確実に2列に並べる */
  .policy-detail-container {
    display: grid !important;
    /* repeat(2, 520px)だと画面幅によって溢れることがあるため、1frで調整 */
    grid-template-columns: 1fr; 
    gap: 40px; 
    justify-content: center;
    max-width: 1540px; /* 520px * 2 + gap分 */
    width: 80%;
    margin: 0 auto;
    padding-bottom: 80px;
  }

  /* 2. カード本体：高さを揃える */
  .policy-detail-card {
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%; /* グリッド内で高さを統一 */
    scroll-margin-top: 100px;
  }

  /* 3. ヘッダー：アイコンの巨大化を強制阻止 */
  .detail-card-header {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
    padding: 20px 30px;
    text-align: left;
  }

  /* ここが重要：以前の .icon スタイルを強制上書き */
  .policy-detail-card img.detail-icon {
    width: 60px !important;  /* サイズを固定 */
    height: 60px !important; /* 高さを固定 */
    margin: 0 !important;    /* 中央寄せを解除 */
    display: inline-block !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  .detail-card-title {
    font-size: 4rem;
    font-weight: bold;
    color: #000000;
    margin: 0 !important; /* 既存の余白をリセット */
    line-height: 1.2;
  }

  /* 4. 本文エリア */
  .detail-card-body {
    padding: 30px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
  }

  .detail-content-item {
    margin-bottom: 25px;
  }

  .detail-content-item h3 {
    font-size: 3rem;
    font-weight: bold;
    color: #000000;
    margin: 0 0 10px 0;
  }

  .detail-content-item p {
    font-size: 2rem;
    line-height: 1.6;
    color: #000000;
    margin-bottom: 5px;
    text-align: left;
  }

  /* 5. 自動番号振り */
  .auto-number {
    list-style: none !important;
    counter-reset: my-count;
    padding-left: 0 !important;
    margin: 0;
  }

  .auto-number li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 8px;
    font-size: 2rem;
    line-height: 1.6;
    color: #000000;
    list-style: none !important;
  }

  .auto-number li::before {
    counter-increment: my-count;
    content: counter(my-count) ". ";
    position: absolute;
    left: 0;
    font-weight: bold;
    color: #333;
  }

  /* 6. ダウンロードリンク */
  .detail-download {
    margin-top: auto; 
    font-size: 2.5rem;
    color: #000000;
    text-decoration: none;
    font-weight: 500;
    padding-top: 10px;
  }

  .detail-download:hover {
    text-decoration: underline;
  }
  /* ECO STAGE専用の横並び設定 */
  .eco-flex {
  display: flex !important;
  align-items: center; /* 上下の真ん中で揃える */
  gap: 30px;
  flex-direction: row; /* 横並びを強制 */
}

  .eco-text {
  flex: 1; /* 文章が左側のスペースを埋める */
}

  .eco-logo-img {
  width: 200px;      /* ロゴのサイズ（適宜調整してください） */
  height: auto;
  object-fit: contain;
  flex-shrink: 0;    /* 画面が狭くなっても画像が潰れないようにする */
}
}
summary::-webkit-details-marker {
  display: none !important;
}
summary {
  list-style: none !important;
}