/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Sep 05 2025 | 09:16:26 */
.nonpc{display: none;}
.pc {display: block !important;}
@media (max-width: 821px) {
	.nonpc{display:block;}
	.pc {display: none !important;}
}
.has-link-color{color:#2c5530;}

/* hタグfont */
body {
  font-family: font-family: "Noto Sans JP", "ヒラギノ角ゴ W3", メイリオ, Meiryo, sans-serif;
  font-weight:400;
  font-optical-sizing: auto;
  font-style: normal;
  letter-spacing:1px;
　color:#333333;
}
h2{font-size:2rem;font-weight:inherit;}
h3{font-size:1.5rem;font-weight:inherit;}
h4{font-size:1.3rem;font-weight:inherit;}
h5{font-size:1rem;font-weight:inherit;}
p{line-height:180%;}
@media (max-width: 821px) {
  h2{font-size:1.5rem;}
  h3{font-size:1.2rem;}
  h4{font-size:1.1rem;}
  h5{font-size:1rem;}
}

/* mn */
.global-nav-list>li .global-nav-name
 {
    font-size: 13px;
	 font-weight:400;

}
.none{float:both; clear:both; margin:0px; padding:0px;}
.font-sm{
  font-weight:inherit;
  font-style: normal;}
.site-header{box-shadow:none;}
.page-header {background-color: #705f34;}
.title_sp{min-height:350px;
margin: 0px calc(50% - 50vw);
	background-attachment:fixed;
	background-size:100%;
}


.labo-title{color:#333;}
@media (max-width: 541px) {.labo-title{color:#fff;}}

/* コメント非表示 */
#comments{display:none;}

/* 投稿記事 */
.entry-meta-item-updated{display:none;}
.entry-meta-item-author{display:none;}

/* 横100％表示 */
.w100{
	position: relative;
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}

/* ホームメニュー */
/* ベースコンテナ */
.hover-overlay-box {
  position: relative;
  display: inline-block;
  width: 100%;
  overflow: hidden;
  border-radius:10px;
}


/* 画像 */
.hover-overlay-box img {
  display: block;
  width: 100%;
  height: auto;

  transition: transform 1s ease-out; 
}

/* hover時に画像を拡大 */
.hover-overlay-box:hover img {
  transform: scale(1.05);

}

/* 黒のオーバーレイ 
.hover-overlay-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;

  opacity: 0;
  z-index: 1;
  transition: opacity 0.3s ease;
}
*/
/* タイトル（常に表示） */
.hover-overlay-box h3 {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 1.5rem;
  z-index: 3;
  opacity: 1;
  transition: opacity 0.3s ease;
  text-align: center;
}

/* ボタン（初期は非表示） */
.hover-overlay-box .wp-block-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.6s ease 1s;;
}

/* hover時にタイトルを非表示、ボタンを表示 */
.hover-overlay-box:hover h3 {
  opacity: 0;
}
.hover-overlay-box:hover .wp-block-button {
  opacity: 1;
}

/* オーバーレイ表示 */
.hover-overlay-box:hover::before {
  opacity: 1;
}

/* 液体波紋 + スパークル効果 */
        .ripple-sparkle-banner {
            background: linear-gradient(45deg, #e8d4c2, #d4c2b0, #c9a188);
            position: relative;
        }

        /* ホバー時の暗くするオーバーレイ */
        .ripple-sparkle-banner::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0);
            transition: background 0.6s ease;
            z-index: 1;
        }

        .ripple-sparkle-banner:hover::after {
            background: rgba(0, 0, 0, 0.3);
        }

.ripple-sparkle-banner .ripple1,
.ripple-sparkle-banner .ripple2 {
    content: '';
    position: absolute;
    border-radius: 50%;
    border: 3px solid rgba(212, 175, 154, 0.7);
    background: transparent;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0);
    transition: all 1.5s ease-out;
    z-index: 2;
    top: 50%;
    left: 50%;
}

.ripple-sparkle-banner .ripple1 {
    width: 120px;
    height: 120px;
}

.ripple-sparkle-banner .ripple2 {
    width: 220px;
    height: 220px;
    transition-delay: 0.3s;
    border-color: rgba(212, 175, 154, 0.5);
}

.ripple-sparkle-banner:hover .ripple1 {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.ripple-sparkle-banner:hover .ripple2 {
    opacity: 0.7;
    transform: translate(-50%, -50%) scale(1);
}

        /* スパークル効果 */
        .sparkle {
            position: absolute;
            width: 8px;
            height: 8px;
            background: radial-gradient(circle, #fff 0%, rgba(255,255,255,0.8) 50%, transparent 100%);
            border-radius: 50%;
            opacity: 0;
            animation: none;
            box-shadow: 0 0 10px rgba(255,255,255,0.8);
            z-index: 3;
        }

        .ripple-sparkle-banner:hover .sparkle {
            animation: sparkleShine 2s ease-in-out infinite;
        }

        @keyframes sparkleShine {
            0%, 100% { 
                opacity: 0; 
                transform: scale(0) rotate(0deg); 
            }
            50% { 
                opacity: 1; 
                transform: scale(1) rotate(180deg); 
            }
        }

/* ニュース　カテゴリ設定 */
.news-category a{color:#2c5530; border:1px solid #2c5530; padding:2px 5px; border-radius:3px; text-decoration:none;}

.element:hover {
  transform: scale(1.05);
  transition: transform 0.3s ease;
}

/* フッター設定 */
.site-footer a{color:#2c5530;}
@media (max-width: 768px) {.footer-cta-text{font-size:13px; text-align:center;}}
.site-footer-copyright{border-top:3px solid #006f36; color:#2c5530;}

/* パンくず設定 */
.breadcrumb { border-bottom:none;}

/* 固定ページタイトル設定 */

.title_bg{ background:#000;
	background:url(https://jupon2.mercrius.biz/design/wp-content/uploads/title_bg_01.png) no-repeat top center,
                url(https://jupon2.mercrius.biz/design/wp-content/uploads/title_bg_02.png) no-repeat bottom center;
            background-size: 100% auto,100% auto;
            z-index: 100;
	
}
.z-bg{z-index:-1;margin-top:-30px;}
/* リスト設定 */
ul.list-half{margin-top:0px; padding-top:0px;}
.list-half li{float:left; width:50%;}
.list-bg li{background:#f8fdf8; padding:20px 0px;}
@media (max-width: 768px) {.list-half li{float:both; width:100%;}}
.work-list {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            list-style: none;
        }
        
        .work-list li {
            background: #faf9f7;
            padding: 20px;
			margin:0px;
            border-radius: 2px;
            border-left: 3px solid #b29d72;
            color: #5a6c57;
			font-size: 0.9rem;
			font-weight:400;
            
            
        }

/* 会社概要 */
.company_table th{width: 12%;}
@media (max-width: 821px) {.company_table th{width: 14%;}}
@media (max-width: 767px) {.company_table th{width: 22%;}}
.company_table td{padding:2%;}

.table-pd td{padding:2%;}

/*スマホのみリンク*/
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}


/* お問い合わせ */
.contact_form{
	width:75%;
	margin:0px auto;
	padding:1%;
	font-size:1rem;
	
	border-radius:10px;
}
.contact_form p{padding:0px;margin:0px;}
.contact_table{border:none; margin:2% 0px;}
.contact_table th{ width:30%; padding:2%; border-top:#ececec 1px solid; border-bottom:#ececec 1px solid; border-left:none; border-right:none;}
.contact_table td{ width:65%; padding:2%; border-top:#ececec 1px solid; border-bottom:#ececec 1px solid; border-left:none; border-right:none;}


.hs{
	background:#ff0000;
	color:#fff;
	border-radius:5px;
	font-size:0.9rem;
	height:0;
	padding:1px 5px 3px;
	margin-left:10px;
}
input[type="text"] {
	padding: 8px 0px 8px 8px;
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
	height:50px;
}
input[type="tel"] {
	padding: 8px 0px 8px 8px;
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
	height:50px;
}
input[type="email"] {
	padding: 8px 0px 8px 8px;
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
	height:50px;
}
textarea {
	border: none;
	background:#f2f6fa;
	border-radius:5px;
	width:90%;
}
@media (max-width: 820px) {
	.contact_form{width:95%;}
	
	.contact_table th{width:95%; padding-left:3%; display:block; text-align:left;border-bottom:none;}
	.contact_table td{width:95%; padding-left:3%; display:block; border-top:none;}
	input[type="text"] {
	  padding: 10px 0px 10px 10px;
	  width:95%;
	}
	input[type="tel"] {
	  padding: 10px 0px 10px 10px;
	  width:95%;
	}
	input[type="email"] {
	  padding: 10px 0px 10px 10px;
	  width:95%;
	}
	textarea {width:95%;}
}

/* OEM / ODM のご案内 */
.section-title {
  font-size: 2.2rem;
  font-weight: 300;
  color: #2c5530;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  letter-spacing: 1px;
}
.section-title::after {
  content: '';
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #66bb6a, #a5d6a7);
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
}
@media (max-width: 768px) {
  .section-title {font-size: 1.8rem;}
}
.difference-card{align-items: stretch;}
.difference-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #66bb6a, #a5d6a7);
}  
.cta-section {font-weight: 300;}
.flow-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 30px;
  align-items: stretch;
}
.flow-step {
  position: relative;
  border-radius: 5px;
  box-shadow: 0 2px 15px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}
.step-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #66bb6a, #a5d6a7);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 300;
  margin: 0 auto 20px;
}
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  align-items: stretch;
}
.product-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #66bb6a, #a5d6a7);
}
.products-grid h4{font-weight: 400;}       
.product-category {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  position: relative;
}
.aftercare-intro h4{font-weight: 400;} 
.support-item{border-radius: 2px;
            box-shadow: 0 2px 15px rgba(0,0,0,0.06);}


.factories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 40px;
  align-items: stretch;
}
.factories-grid h4{font-weight: 400;} 
.factories-category::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #66bb6a, #a5d6a7);
}
.factories-category {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  border-radius: 2px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);

}
@media (max-width: 768px) {.factories-list td{width: 100%; display:block;}}