/*
Theme Name: life_tpl_2025
Theme URI:
Template: lightning
Description:Lifecommunication Theme
Author:Lifecommunication Co., Ltd
Tags:
Version: 0.5.1
*/
/*--------------------------コモン---------------------------*/
/*--ブラウザの標準に設定されている、htmlタグの設定をクリア--*/
BODY, H1, H2, H3, H4, H5, H6, P, TH, TD, OL, UL, LI, DL, DT, DD, FORM, PRE {
/*--Netscape6 は が未対応なので、全てのタグを記述して指定--*/
margin: 0;
padding: 0;
list-style: none;
}
body {
font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
font-size: 100%;
background-color: #fff;
color: #3B4043;
}
html,body {/*iphoneにて、table内の文字サイズが自動調整されてしまうのを回避*/
text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
html {
/*サイト内リンク位置を調整*/
scroll-snap-type: y proximity;
scroll-padding-top: 100px;
/*スムーススクロール*/
scroll-behavior: smooth;/*他の動きが問題なければ実装*/
}
/*見出し*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: bold;
}
h3{margin-bottom: 15px;}
.bold{
font-weight:bold;
}
@media screen and (max-width:450px) {
h2 {
font-size: 1.4rem;
}
h3 {
font-size: 1.2rem;
}
}
/*本文*/
p,
td,
th,
li,
dt,
dd,
input,
textarea,
.entryBody,
.entryMore {
font-size: 16px;
font-weight: normal;
}
p{
font-size: 17.6px;
}
a {
text-decoration: none !important;
}
a:hover {
opacity: 0.9;
}
/*フォント*/
.noto-sans-jp {
font-family: Noto Sans JP, serif;
font-optical-sizing: auto;
font-weight: 500;
font-style: normal;
}
/*全幅設定*/
.full-width {
margin: 0 calc(50% - 50vw);
padding: 5em calc(50vw - 50%);
}
.widget{
margin-bottom:0;
}
.text-link{
text-decoration: underline!important;
color: #0088cc;
}
/*スペーシング*/
.mt10 {
margin-top: 10px;
}
.mt-100 {
margin-top: 100px;
}
.mb-100 {
margin-bottom: 100px;
}
/*画像*/
img{
object-fit: cover;
vertical-align: middle;
width:100%;
}
.wp-block-image img:not([style*=object-fit]){
height:100%!important;
}
figure{
overflow: hidden;
text-align:center;
}
/*表*/
.wp-block-table :is(table,thead,tbody,tfoot,th,td){
border:none;
}
.wp-block-table td{
border-top:1px solid black;
border-bottom:1px solid black;
}
td:first-child{
background: #f3f8fd;
width:290px;
}
@media screen and (max-width: 768px) {
.wp-block-table tr{
display:flex;
flex-direction: column;
}
td:first-child{
width:100%;
}
.wp-block-table td{
border-top:none;
}
p {
font-size: 15.6px;
}
}
/*表示・非表示*/
/* 769pxより大きい画面（タブレット・PC） */
@media only screen and (min-width: 992px) {
.w-991_row{
display: none !important;
}
.w-991_heigh{
display: block;
}
}
@media only screen and (max-width: 991px) {
.w-991_heigh{
display: none !important;
}
.w-991_row{
display: block;
}
}
@media only screen and (min-width: 769px) {
.sp {
display: none !important;
}
.pc {
display: block;
}
}
/* 768px→425より小さい画面（スマホ）*/
@media only screen and (max-width: 768px) {
.sp {
display: block;
}
.pc {
display: none !important;
}
}
/*見出し*/
h2.title01{
color:#3d79d5;
font-size:32px;
text-align: center;
margin-bottom:2em;
}
h1.title02{
border-bottom: 1px solid hsla(0,0%,78%,.5);
font-size:24px;
margin-bottom: 4em;
}
h1.title02 span{
border-bottom: 1px solid #0088cc;
transform: translate(0, 1px);
display: block;
width: fit-content;
}
.title03{
color:#3d79d5;
font-size:32px;
margin-bottom:1em;
}
.title04,.title04-blue{
text-align: center;
z-index: 0;
position: relative;
background: white;
margin: 3em 0 1em;
}
.title04 span,.title04-blue span{
background: white;
padding: 0 30px;
display: block;
width: fit-content;
margin: 0 auto;
display: flex;
justify-content: center;
text-align: left;
}
.title04:before,.title04-blue:before {
content: "";
width: 100%;
border: 1px solid black;
height: 1px;
position: absolute;
top: 50%;
left:0;
z-index: -1;
}
.title04-blue span{
color:#3d79d5;
}
.title04-blue:before {
border: 1px solid #3d79d5;
}
.title05{
border-left: 2px solid #3d79d5;
padding-left: 10px;
margin-bottom: 1em;
}
@media screen and (max-width: 768px) {
h2.title01{
font-size:24px;
}
.title03{
font-size:24px;
}
}
@media screen and (max-width: 500px) {
.title04 span, .title04-blue span{
font-size:20px;
padding: 0 10px;
text-align: left;
width: 100%;
line-height: 1.4;
}
.title04:before, .title04-blue:before{
content:none;
}
h1.title02{
margin-bottom:2em;
}
}
/*ボタン*/
.btn01{
width:fit-content;
margin:0 auto;
}
.btn01 a{
color:white;
display:block;
background: linear-gradient(100deg,#338df4 0%,#35eaff 100%);
width:100%;
padding:10.8px 21.6px;
display:flex;
align-items: center;
gap:10px;
border-radius:50px;
font-size:14.4px;
font-weight:bold;
box-shadow: 0 2px 2px rgba(0,0,0,.1),0 4px 8px -4px rgba(0,0,0,.2);
justify-content: center;
}
.btn01 a svg{
fill: currentcolor;
}
.btn02 a {
background: #337ab7;
color: white;
text-align: center;
display: block;
width: 100%;
padding: 10px 30px;
border-radius: 5px;
}
/*アニメーション*/
/* fadeUp */
.fadeUp{
animation-name:fadeUpAnime;
animation-delay: 0.2s;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(100px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定 */
.fadeUpTrigger {
opacity: 0;
transform: translateY(30px);
transition: all 0.8s ease;
}
.fadeUpTrigger.fadeUp {
opacity: 1;
transform: translateY(0);
}
/*メニュー*/
.home .site-header {
box-shadow: none;
position: absolute;
}
.home .header_scrolled .site-header{
position: fixed;
}
.header_scrolled.admin-bar .site-header{
position: fixed;
}
.home .site-header-logo a {
color:white;
}
.home .site-header .site-header-logo a span{
color:white;
}
.home.device-pc .global-nav-list>li>a,
.home.device-mobile .global-nav-list>li>a{
font-size:14px;
color:white;
}
.device-pc .global-nav-list>li>a,
.device-mobile .global-nav-list>li>a{
font-size:14px;
}
.device-pc .global-nav-list>li .global-nav-name,
.device-mobile .global-nav-list>li .global-nav-name{
font-size:14px!important;
}
.header_scrolled .global-nav-list>li>a .global-nav-name,
.header_scrolled .global-nav-list>li>a .global-nav-name,
.header_scrolled .global-nav-list>li>a .global-nav-name,
.header_scrolled .global-nav-list>li>a .global-nav-name{
color:black;
}
.home.device-pc .header_scrolled .global-nav-list>li>a,
.home.device-mobile .header_scrolled .global-nav-list>li>a{
color:black;
}
.device-pc .global-nav-list>li>a,
.device-mobile .global-nav-list>li>a{
padding-bottom: 5px;
position: relative;
}
.device-pc .global-nav-list>li>a::before,
.device-mobile .global-nav-list>li>a::before {
background: #0088cc;
content: '';
width: 100%;
height: 2px;
position: absolute;
left: 0;
bottom: 0;
transform-origin: center top;
transform: scale(0, 1);
transition: transform .3s;
}
.device-pc .global-nav-list>li.current_page_item>a::before,
.device-mobile .global-nav-list>li.current_page_item>a::before,
.device-pc .global-nav-list>li.current-menu-ancestor>a::before,
.device-mobile .global-nav-list>li.current-menu-ancestor>a::before{
height:0;
}
.home.device-pc .global-nav-list>li>a::before,
.home.device-mobile .global-nav-list>li>a::before {
background: white;
}
.home.header_scrolled.device-pc .global-nav-list>li>a::before,
.home.header_scrolled.device-mobile .global-nav-list>li>a::before {
background: #0088cc;
}
.device-pc .global-nav-list>li>a:hover::before,
.device-mobile .global-nav-list>li>a:hover::before{
transform-origin: center top;
transform: scale(1, 1);
}
.vk-menu-acc ul.sub-menu li a:before{
content:"";
width: 15px;
height: 20px;
display: inline-block;
position: absolute;
left: 5px;
top: 30%;
background-image:url("images/arrow-submenu.png");
background-repeat: no-repeat;
background-position: center;
background-size:contain ;
}
.vk-menu-acc ul.sub-menu li a{
padding-left: 2em;
background: #2e83d3;
}
.sub-menu.acc-child-close{
margin-top:1em;
}
.device-pc .global-nav-list>li .global-nav-name,
.device-mobile .global-nav-list>li .global-nav-name{
font-weight:300;
font-size:16px;
}
.current_page_item a,
.current-menu-ancestor a{
border-bottom:3px solid #0088cc;
}
.header_scrolled .site-header-logo{
display:block;
}
.home.header_scrolled .site-header-logo a span{
color:black;
}
@media (max-width: 1224px) {
.device-mobile .global-nav-list>li{
padding:14px 1em;
}
}
/*モバイルメニュー*/
body.device-mobile .vk-mobile-nav-menu-btn{
display:block;
}
@media (min-width: 1025px) {
body.device-mobile .vk-mobile-nav-menu-btn{
display:none;
}
}
@media (max-width: 1024px) {
.global-nav {
display: none!important;
}
}
li#menu-item-2650 a,li#menu-item-2651 a{
padding-left:1em;
}
div#vk-mobile-nav {
width: 90vw;
margin-left: 10vw;
}
.vk-mobile-nav{
background-color:rgba(0, 0, 0, 0.8);
}
.vk-mobile-nav nav>ul{
border-top-color:rgba(255,255,255,0.7);
}
.vk-mobile-nav nav ul li a{
color:#fff;
border-bottom-color:rgba(255,255,255,0.7);
font-size:13.5px;
padding: .75em 1em .75em 1.5em;
}
.vk-mobile-nav nav ul li a:before{
color: inherit;
content: "";
display: inline-block;
left: 2px;
position: absolute;
top: 40%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
vertical-align: middle;
width: 8px;
height: 8px;
border-top: 2px solid white;
border-right: 2px solid white;
transform: rotate(45deg);
}
li#menu-item-2650 a, li#menu-item-2651 a{
padding-left: 2em;
}
li#menu-item-2650 a:before,
li#menu-item-2651 a:before{
left: 1em;
}
.vk-mobile-nav p{
background:#0088cc;
border-radius:5px;
padding:5px 10px;
color:white;
margin-bottom:1em;
}
/*モバイルメニュー*/
/*フッター*/
.site-footer{
background: #0088cc;
color:white;
}
.footer-nav li{
width:100%;
padding:0;
}
.footer-nav li a{
color:white;
padding: 1em 1em 1em 1.5em;
font-size:16px;
color:white;
width:100%;
border-bottom:solid 1px hsla(0, 0%, 78%, .5);
display:block;
position:relative;
transition: padding .25s;
}
.footer-nav li a:before{
color: inherit;
content: "";
width:8px;
height:8px;
border-top:1.5px solid white;
border-right:1.5px solid white;
transform: rotate(45deg);
display: inline-block;
margin-right: 10px;
vertical-align: middle;
position: absolute;
left: 0px;
bottom: 42%;
}
.footer-nav li a:hover{
background:rgba(3,2,2,.05);
padding: 1em 1em 1em 2em;
}
.wp-block-latest-posts li>a{
color:white;
font-size: 14px;
font-weight:600;
}
.site-footer h2{
font-size:16px;
border-bottom:solid 1px currentcolor;
}
.container.site-footer-copyright p:nth-child(2){
display:none;
}
.wp-block-latest-posts.wp-block-latest-posts__list{
display:flex;
flex-wrap:wrap;
}
.wp-block-latest-posts.wp-block-latest-posts__list li{
width:50%;
border:none;
}
.wp-block-latest-posts__featured-image a{
min-width:100%;
}
.wp-block-latest-posts.wp-block-latest-posts__list li img{
border-radius:15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 4px -4px rgba(0, 0, 0, .1);
margin-bottom: .3em;
min-width:100%;
}
.wp-block-latest-posts.wp-block-latest-posts__list{
gap:10px;
}
.wp-block-latest-posts.wp-block-latest-posts__list li{
width:calc((100% - 10px) / 2);
}
.site-footer .row{
gap:20px 0;
}
.site-footer .widget ul{
padding:0;
}
.site-footer .widget ul li{
margin-top:0;
}
/*ローディング画面*/
.logo_fadein{
background: #fff;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 999999;
}
.logo_fadein p {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
display: none;
z-index: 9999999;
width: 300px;
}
.logo_fadein .block {
width: 40px;
display: flex;
justify-content: space-between;
margin-top: 250px;
}
.logo_fadein .circle {
width: 10px;
height: 10px;
background-color: #ccc;
border-radius: 50%;
}
.logo_fadein .container {
display: flex;
height: 100vh;
justify-content: space-around;
align-items: center;
}
.circle {
animation: loading 1s infinite;
}
.circle:nth-child(2){
animation-delay: 0.1s;
}
.circle:nth-child(3){
animation-delay: 0.2s;
}
@keyframes loading {
0% {
transform: scale(0.1);
}
100% {
transform: scale(1);
}
}
/*ローディング画面*/
/*メインビジュアル*/
.mini-content-container-1 .btn,
.mini-content-container-2 .btn,
.mini-content-container-3 .btn,
.mini-content-container-4 .btn{
background: #2e83d3!important;
border:none;
box-shadow: none!important;
}
.swaiper-slide{
width:80%;
padding:0 20px ;
}
.ltg-slide picture img{
min-height:50vh;
max-height:100vh;
}
.ltg-slide picture img:after{
background-color: rgba(0, 0, 0, .1);
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFAQMAAAC3obSmAAAABGdBTUEAALGPC/xhBQAAAAFzUkdCAK7OHOkAAAAGUExURUdwTAAAAJ8qhFEAAAABdFJOUwBA5thmAAAAEklEQVQI12MwYDBgYGBoYGAAAASKAOH8MS30AAAAAElFTkSuQmCC);
background-size: 2px;
content: "";
opacity: .5;
}
h3.ltg-slide-text-title{
margin-bottom: .5em;
}
.ltg-slide-text-title+.ltg-slide-text-caption{
line-height:2em;
}
.mini-content-container-1 .btn,
.mini-content-container-2 .btn,
.mini-content-container-3 .btn,
.mini-content-container-4 .btn{
padding:1em 2em;
margin:1em 0;
}
/* ドット */
.swiper-pagination-bullet {
width: 30px;
height: 6px;
border-radius: 0;
background: #666;
opacity: 1;
transition: all 0.3s ease;
border:1px solid rgba(255, 255, 255, 0.5);
}
/* 矢印 */
.swiper-button-next, .swiper-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-rtl .swiper-button-next{
background:rgba(0,0,0,.5);
}
.swiper-pagination-bullet-active {
background: white;
}
.ltg-slide .swiper-button-next:after,
.ltg-slide .swiper-button-prev:after{
color: #007aff;
}
@media screen and (max-width: 991px) {
.swiper-button-next, .swiper-rtl .swiper-button-prev,
.swiper-button-prev, .swiper-rtl .swiper-button-next{
top:90%;
}
}
.ltg-slide-button-next.swiper-button-next.swiper-button-white:after,
.ltg-slide-button-prev.swiper-button-prev.swiper-button-white:after{
display:block;
}
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{
content: 'next'!important;
font-family: swiper-icons;
font-size: 44px;
text-transform: none !important;
letter-spacing: 0;
font-variant: initial;
line-height: 1;
}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after {
content: 'prev'!important;
}
/* スクロール */
svg:not([fill]) {
fill: currentcolor;
}
.p-mainVisual__scrollArrow {
-webkit-animation: FloatVertical 3s ease-in-out infinite alternate;
animation: FloatVertical 3s ease-in-out infinite alternate;
display: block;
height: 20px;
margin: 0 auto;
width: 20px;
}
.p-mainVisual__scrollLabel {
display: block;
font-size: 12px;
letter-spacing: var(--swl-letter_spacing, 1px);
line-height: 1;
padding-top: 4px;
}
.p-mainVisual__scroll {
top:-250px;
color: #fff;
left: 50%;
opacity: .75;
position: absolute;
text-align: center;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
transition: opacity .25s;
z-index: 9;
border: none;
background: none;
}
.p-mainVisual__scrollArrow {
width: 30px;
height: auto;
display: block;
margin: 0 auto;
animation: float 2s ease-in-out infinite;
}
@keyframes float {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(10px);
}
}
@media screen and (max-width: 991px) {
.p-mainVisual__scroll{
top:-200px;
}
}
/*トップページ*/
.TopAboutus h2{
margin-bottom:3em;
line-height: 2em;
}
.TopAboutus .Cntents01,.TopAboutus .Cntents02{
display:flex;
align-items: center;
margin-bottom:96px;
}
.TopAboutus .Cntents01 h3{
font-size:32px;
width:50%;
text-align: center;
}
.TopAboutus .Cntents01 p{
width:50%;
}
.TopAboutus .Cntents02 .block{
display:flex;
align-items: center;
flex-direction: column;
justify-content: center;
width:50%;
}
.TopAboutus .Cntents02 figure{
width:304px;
height:304px;
border-radius:50%;
overflow:hidden;
}
.TopAboutus .Cntents02 figure img{
width:100%;
height:100%;
object-fit: cover;
}
@media screen and (max-width: 998px) {
.TopAboutus .Cntents01{
width:100%;
flex-direction:column;
gap:20px 0;
}
.TopAboutus .Cntents01 h3{
width:100%;
}
.TopAboutus .Cntents01 p{
width:100%;
}
}
@media screen and (max-width: 768px) {
.TopAboutus .Cntents01,.TopAboutus .Cntents02{
margin-bottom:50px;
}
.TopAboutus .Cntents01 h3{
font-size: 20px;
}
.TopAboutus .Cntents01 p,
.TopSNS .Contents01 p,
.TopSNS .Contents02 p{
font-size:16px;
}
.TopAboutus .Cntents02{
flex-direction:column;
gap:1.5em 0;
}
}
.TopSNS{
background: hsla(0, 0%, 78%, .15);;
}
.TopSNS h2{
margin-bottom:2em;
}
.TopSNS .Contents01,.TopSNS .Contents02{
display:flex;
justify-content: space-between;
margin-bottom:48px;
align-items: center;
gap:30px;
}
.TopSNS .Contents01 figure,
.TopSNS .Contents02 figure{
width:50%;
height: 265px;
flex-shrink: 0;
}
.TopSNS .Contents01 figure img,
.TopSNS .Contents02 figure img{
object-position: center;
}
.TopSNS .Contents02{
flex-direction: row-reverse;
}
.TopSNS .Contents01 h3,.TopSNS .Contents02 h3{
font-size:32px;
margin-bottom:1em;
text-align: center;
}
.TopSNS .Contents01 p,.TopSNS .Contents02 p{
border-left: 2px solid;
padding-left: 10px;
margin-bottom:1em;
}
@media screen and (max-width: 998px) {
.TopSNS .Contents01, .TopSNS .Contents02{
flex-direction:column;
gap:10px;
}
.TopSNS .Contents01 figure,
.TopSNS .Contents02 figure{
width:100%;
height:auto;
}
.TopAboutus .Cntents02 .block{
width:100%;
}
}
.TopNews{
margin:6em 0;
}
.TopNews ul{
display:flex;
flex-wrap:wrap;
gap:20px 0;
}
.TopNews ul li{
width:calc(100% / 3);
padding:0 8px;
}
.TopNews .TopNews_thumbnail{
position:relative;
width:100%;
}
.TopNews .TopNews_thumbnail figure{
margin-bottom:0;
border-radius:15px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 4px -4px rgba(0, 0, 0, .1);
}
.TopNews .TopNews_thumbnail .TopNews_CatLabel{
border-radius: 16px;
margin: .5em;
padding: 0 8px;
background-color: #0088cc;
color: #fff;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 6px, transparent 6px, transparent 12px);
width: fit-content;
display: block;
font-size: 11px;
position: absolute;
right: 5px;
top:0;
display: flex;
align-items: center;
gap: 3px;
padding: 3px 8px;
}
.TopNews .TopNews_thumbnail .TopNews_CatLabel:before{
content: "";
display: inline-block;
width: 20px;
height: 15px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.TopNews .TopNews_info-title{
font-size:16px;
font-weight:bold;
margin-top:1em;
color:#333333;
}
.TopNews .TopNews_info-excerpt p{
font-size:13px;
font-weight:bold;
color:#333333;
}
.TopNews .TopNews_info-date{
font-size:11px;
color:#333333;
}
.TopNews a:hover{
color:#666666;
}
.TopNews .TopNews_info-date::before {
font-family: "Font Awesome 6 Free";
font-weight: 400;
content: "\f017"; /* 時計アイコン（fa-clock） */
margin-right: 5px;
display: inline-block;
}
@media screen and (max-width: 998px) {
.TopNews ul li{
width:calc(100% / 2);
}
}
@media screen and (max-width: 768px) {
.TopNews ul li{
width:100%;
}
}
.TopSNS .Contents01 h3, .TopSNS .Contents02 h3{
color:black;
}
.TopRecruit{
background: rgba(11, 210, 250, 0.05);
margin-bottom:6em;
}
.TopRecruit h2{
font-size:22.4px;
margin-bottom:2em;
}
.TopRecruit p{
margin-bottom:2em;
line-height:2em;
text-align: center;
}
.TopRecruit .btn01{
width:480px;
max-width:100%;
}
.TopRecruit .btn01 a{
justify-content: center;
}
.TopRecruit .btn01 a svg{
width:20px;
height:20px;
}
.TopLocation{
background:#f3f8fd;
margin-bottom:6em;
}
.TopLocation h2{
font-size:32px;
margin-bottom:2em;
}
.TopLocation p{
text-align: center;
margin-bottom:2em;
color:black;
}
.TopLocation p a{
color:black;
text-decoration: underline!important;
white-space: nowrap;
}
.TopMap figure{
margin:0 auto;
width:fit-content;
max-width:100%;
}
@media screen and (max-width: 991px) {
.TopRecruit h2{
text-align: left;
}
.TopRecruit p{
text-align: left;
}
}
@media screen and (max-width: 768px) {
.TopSNS .Contents01 h3, .TopSNS .Contents02 h3{
font-size:20px;
}
.TopRecruit p{
font-size:16px;
line-height: 1.5em;
}
.TopLocation h2{
margin-bottom:1em;
}
.TopLocation p:nth-child(3){
width:fit-content;
margin:0 auto;
text-align: left;
}
}
@media screen and (max-width: 600px) {
.TopMap{
margin: 0 calc(50% - 50vw);
}
}
.SNSlink{
display:block;
justify-content: center;
gap:20px;
}
.snsLinkBox {
width: 100%;
text-align: center;
}
.SNSlink .insta svg:not([fill]){
fill:rgba(240,0,117,1);
}
.SNSlink .youtube svg:not([fill]){
fill:red;
}
.SNSlink .facebook svg:not([fill]){
fill:rgba(8,102,255,1);
}
/*下層ページ共通*/
.page-header{
display:none;
}
.breadcrumb{
box-shadow: inset 0 -1px 8px rgba(0, 0, 0, .06);
background: #f7f7f7;
}
ol.breadcrumb-list li{
font-size: 14px;
}
/*会社情報*/
.company01 figure{
width:320px;
height: 442.5px;
}
.company01 figure img{
height: 100% !important;
width:100%!important;
object-fit:cover;
}
.company01.d-flex{
gap:30px;
}
.company01 .Greetings-txt{
flex:1;
}
.company02 a{
color:#0000EE;
text-decoration: underline!important;
}
.company03 .d-flex{
gap:30px;
}
@media screen and (max-width: 998px) {
.company01.d-flex{
flex-direction:column;
}
}
@media screen and (max-width: 768px) {
.company03 .d-flex{
flex-direction:column;
}
.company03 .w-50{
width:100%!important;
}
}
/*畜産関連の当社の取組について・小動物関連の当社の取組について*/
div#farmer-products01{
color:white;
position:relative;
z-index:0;
margin-bottom: 4em;
margin-top: 4em;
padding:10em 0;
}
div#farmer-products01 h3{
font-size:32px;
}
div#farmer-products02,
div#farmer-products03,
div#farmer-products04{
color:black;
position:relative;
z-index:0;
margin-bottom: 4em;
margin-top: 4em;
}
div#farmer-products02 h3,
div#farmer-products03 h3,
div#farmer-products04 h3{
font-size:25px;
font-weight:600;
}
div#farmer-products01:before,
div#farmer-products02:before,
div#farmer-products03:before,
div#farmer-products04:before{
content:"";
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
background-image: url(images/farmer-products01.png);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index:-2;
}
div#farmer-products02:before{
background-image: url(images/farmer-products02.png);
}
div#farmer-products03:before{
background-image: url(images/farmer-products03.png);
}
div#farmer-products04:before{
background-image: url(images/farmer-products04.png);
}
div#farmer-products01:after,
div#farmer-products02:after,
div#farmer-products03:after,
div#farmer-products04:after{
content:"";
display:block;
width:100%;
height:100%;
position:absolute;
top:0;
left:0;
z-index:-1;
background-color: rgba(0, 0, 0, .4);
}
div#farmer-products02:after,
div#farmer-products03:after,
div#farmer-products04:after{
background-color: rgba(255, 255, 255, 0.5);
}
.page-id-131 p{
line-height:3em;
}
ul.farmer-products_list{
padding-left: 1.5em;
padding-bottom: 2em;
}
ul.farmer-products_list li{
list-style:disc;
margin:2px 0;
}
.page-id-131 h4{
padding-left:1em;
border-left:2px solid #0088cc;
font-size:19.2px;
}
@media screen and (max-width: 768px) {
.farmer-products01 p,
.farmer-products02 p,
.farmer-products03 p,
.vets-products01 p,
.vets-products02 p,
.vets-products03 p{
text-align: left;
line-height:2em!important;
}
}
/*製品情報一覧ページ*/
.post-type-archive-products h1.title02 {
margin-bottom: 30px;
}
.post-type-archive-products .main-section h2:first-of-type{
margin-top: 30px;
}
.PopularItems .slide-imgPC img{
/*max-height:600px;*/
max-height:500px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 4px -4px rgba(0, 0, 0, .1);
object-fit: contain;
}
.PopularItems .slide-wrap p{
text-align: center;
/*margin:30px 30px 60px;*/
margin:30px 30px 35px;
font-size: 1.2em;
font-weight:600;
border: 1px solid #337ab7;
border-radius: 5px;
background: linear-gradient(-45deg, transparent 25%, hsla(0, 0%, 78%, .15) 25%, hsla(0, 0%, 78%, .15) 50%, transparent 50%, transparent 75%, hsla(0, 0%, 78%, .15) 75%, hsla(0, 0%, 78%, .15));
background-clip: padding-box;
background-size: 6px 6px;
padding:.5em 0;
}
.PopularItems .slick-dots li button {
width: 50px;
height: 1px;
border-radius: 0;
background: rgba(0,0,0,0.1);
border:1px solid gray;
transition: all 0.3s ease;
padding:3px;
}
.PopularItems .slick-dots li button:before,.PopularItems .slick-dots li{
width:50px;
}
.PopularItems .slick-dots li.slick-active button {
background: #666;
border: 1px solid rgba(255, 255, 255, 0.5);
}
.PopularItems .slick-dots{
bottom:0px;
}
.PopularItems .slick-dots li button:before{
font-size:0px!important;
}
.PopularItems .slide-arrow {
margin: auto;
position: absolute;
top: 35%;
width: 40px;
margin-right: 10px;
margin-left: 10px;
padding: 10px 0;
background:rgba(0,0,0,.5);
padding: 10px 0px 10px 10px;
}
.PopularItems img.slide-arrow.prev-arrow.slick-arrow{
left:0;
z-index: 100;
}
.PopularItems img.slide-arrow.next-arrow.slick-arrow{
right:0;
transform:rotate(180deg);
}
details{
margin-bottom:10px;
}
details p{
padding: 0 1em;
}
summary{
font-weight: 400;
justify-content: space-between;
padding: 1em;
position: relative;
background: hsla(0,0%,78%,.15);
align-items: center;
cursor: pointer;
display: flex
}
summary span {
display: inline-block; /* これ重要 */
background: linear-gradient(transparent 64%, #b7e3ff 0%);
font-size: 20px;
font-weight: bold;
-webkit-box-decoration-break: clone; /* Chrome, Safari用 */
box-decoration-break: clone; /* Firefox用 */
}
summary::after {
content: "";
display: inline-block;
width: 0;
height: 0;
margin-right: 10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #333;
transition: transform 0.3s ease;
transform: rotate(180deg);
}
/* 開いている状態の三角形を変形 */
details[open] summary::after {
transform: rotate(0deg); /* 上向きの三角に変更 */
}
ul.products_list{
display:flex;
margin: 1em 0 5em;margin: 2em 0 5em;
flex-wrap:wrap;
}
ul.products_list li.products_list_item{
width:calc(100% / 3);
margin-bottom: 2.5em;
margin-top: 0;
padding: 0 .5em;
}
ul.products_list li.products_list_item img{
height: 100%;
}
ul.products_list li.products_list_item figure{
border-radius:10px;
box-shadow: 0 2px 2px rgba(0, 0, 0, .1), 0 4px 8px -4px rgba(0, 0, 0, .2);
aspect-ratio: 16 / 9;aspect-ratio: 16 / 11;
display: flex;
align-items: center;
justify-content: center;
}
ul.products_list li.products_list_item a .products_title{
font-size:16px;
font-weight: bold;
color:#333333;
}
.PopularItemsSlider .slick-next{
right:0;
}
.PopularItemsSlider .slick-next{
right:0;
}
.PopularItemsSlider .slick-prev{
left:0;
z-index: 2;
}
@media screen and (max-width: 450px) {
details p{
padding: 0;
}
ul.products_list {
margin: 2em 0 2em;
}
summary span {
font-size: 1.2rem;
}
ul.products_list li.products_list_item a .products_title {
font-size: 1rem;
}
}
.tab-nav {
display: flex;
margin-bottom: 20px;
gap: 10px;
}
.tab-nav button {
background: #eee;
border: 1px solid #ccc;
padding: 10px 20px;
cursor: pointer;
transition: 0.2s ease;
}
.tab-nav button.active {
background: #333;
color: #fff;
border-color: #333;
}
/* 各タブのフォーム */
.tab-content {
display: none;
}
.tab-content.active {
display: block;
}
ul.tab-menu{
display:flex;
}
.tab-content form{
display:flex;
gap:30px;gap: 0px;
}
.tab-content form select{
margin-bottom:0;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.tab-content button{
width:100px;
pointer-events: none;
border: 1px solid var(--vk-color-border-form);
border-right: none;
border-radius: 4px 0 0 4px;
}
.radio-animal{
background: #fff;
width: 100%;
padding: 20px;
}
.radio-animal label{
margin-right: 20px;
}
.tab-area{
border:1px solid #0088cc;
background: rgba(0, 170, 255, 0.05 );
padding:20px 50px;
}
.tab-area .tab-menu{
margin-bottom:2em;
}
.tab-area .tab-menu li{
width:calc(100% / 3);
text-align: center;
color:#666666;
padding-bottom: 10px;
border-bottom: 1px solid #666666;
cursor: pointer;
}
.tab-area .tab-menu li.active{
color:#0088cc;
border-bottom: 2px solid #0088cc;
font-weight:bold;
}
@media screen and (max-width: 768px) {
ul.products_list li.products_list_item{
width: calc(100% / 2);
}
.PopularItems .slide-arrow{
width:20px;
padding:10px 0 10px 5px;
margin-right: 5px;
margin-left: 5px;
}
.PopularItems .slick-dots{
bottom:0;
}
.PopularItems .slide-wrap p{
font-size:1.2em;
margin:10px 0px 40px;
}
}
@media screen and (max-width: 450px) {
summary{
padding:1em .5em;
}
}
@media screen and (max-width: 425px) {
.PopularItems .slide-wrap p{
font-size:1em;
}
/*ul.products_list li.products_list_item{
width: 100%;
}*/
.tab-area{
padding:20px 5px;
}
summary span{
font-size:1.05rem;
}
}
/*検索結果ページ*/
.LinkBack {
margin-bottom: 40px !important;
text-align: right;
}
/*製品情報詳細ページ*/
.buhner{
max-width: 600px;
margin: auto;
display: block;
}
/*タブレットパル*/
.tabret,
.tabret-features{
display:flex;
gap:5%;
}
.tabret #seihin_l{
width:50%;
}
.tabret #seihin_r{
width:45%;
}
.tabret #seihin_r #seihin_r_in_products p{
text-align: right;
}
.tabret #seihin_r img{
width:200px;
margin-top:40px;
/*margin-left: calc(100% - 200px);*/
max-width: 50%;
}
.tabret-features_l{
/*width: calc(100% - 134px);*/
}
.tabret-features_l ul li{
margin-bottom:10px;
line-height:1.4;
text-indent: -1em;
padding-left: 1em;
}
.tabret-features_r{
min-width:134px;
}
@media screen and (max-width:768px) {
.tabret,
.tabret-features{
margin-top:30px;
}
.tabret #seihin_r img {
margin-top: 10px;
}
}
@media screen and (max-width:500px) {
.tabret,
.tabret-features{
flex-direction:column;
gap: 20px;
}
.tabret #seihin_l,
.tabret #seihin_r{
width:100%;
}
.tabret #seihin_r img {
max-width: 130px;
margin: 20px auto 0 !important;
display: block;
}
.tabret-features_r {
width: 200px;
margin: auto;
}
}
/*カセットバスケット*/
/*KRUUSEカフ付きシリコン気管内チューブ*/
#casset,
#kruuse,
.kruuse-kanren{
display:flex;
gap:8%;
}
#casset{
align-items: center;
}
.kruuse-kanren{
gap:5%;
margin: 30px 0 70px;
}
#casset_l{
width:43%;
}
#casset_r{
width:55%;
}
#kruuse_l,
#kruuse_r{
width:46%;
}
#kruuse_r ul{
margin-top: 20px;
}
#kruuse_r ul li{
margin-bottom:5px;
line-height:1.4;
text-indent: -1em;
padding-left: 1em;
}
.pspec4__table.kruuse__table{
}
.pspec4__table.kruuse__table td:first-child {
background: transparent !important;
}
.pspec4__table.kruuse__table th {
background: #f3f8fd !important;
}
.kruuse-kanren_l{
width:200px;
margin-top: 10px;
}
.kruuse-kanren_r{
width:calc(100% - 200px);
margin-top: 10px;
}
.kruuse-kanren_l img{
width:100%;
}
@media screen and (max-width:768px) {
#kruuse,
.kruuse-kanren{
flex-direction:column;
gap: 20px;
margin-top: 30px;
}
#kruuse_l,
#kruuse_r,
.kruuse-kanren_l,
.kruuse-kanren_r{
width:100%;
}
.kruuse-kanren_l img{
max-width: 200px;
margin: auto;
display: block;
}
.kruuse-kanren01 .kruuse-kanren_r{
display: flex;
justify-content: center;
}
.kruuse-h3{
text-align:center;
}
}
@media screen and (max-width:500px) {
#casset{
flex-direction:column;
gap: 20px;
}
#casset_l,
#casset_r{
width:100%;
}
#casset_l {
max-width: 220px;
}
}
@media screen and (max-width:375px) {
.kruuse-h3{
text-align:left;
}
}
/*連続注射器の洗浄方法の一例*/
.cleaning-method{
border:3px solid #006be5;
padding:30px;
text-align:center;
}
.cleaning-method-image{
max-width: 411px;
margin: 30px auto;
display: block;
}
.cleaning-method-h3 span{
font-size: 1.1rem;
margin-right: 10px;
}
@media screen and (max-width:600px) {
.cleaning-method-h3 span{
display:block;
margin-right:0;
}
.cleaning-method {
padding: 30px 6%;
}
.cleaning-method-image {
margin: 10px auto;
}
}
/*豚用無血脱肛治療 PFチューブについて*/
.tokucyou{
display:flex;
justify-content:space-between;
max-width: 796px;
margin: auto;
}
.tokucyou_l{
width: 60%;
}
.tokucyou_r_in{
width: 30%;
}
.tokucyou_l p{margin-bottom:30px;}
@media screen and (max-width: 767px) {
.tokucyou{
flex-direction:column;
}
.tokucyou_l,
.tokucyou_r_in{
width: 100%;
}
.tokucyou_r_in{
max-width: 200px;
margin: auto;
}
}
.products_info{
display:none;
}
.mt20{margin-top:20px;}
.kcfl-media-right-tit{
margin-bottom: 15px;
}
.products_info,
.products_Contents,
.products_Contents2,
.products_Contents3,
.products_Contents4
{
margin-bottom:50px;
}
.products_info .d-flex{
align-items: center;
margin-bottom:1em;
flex-wrap:wrap;
}
.products_info .products_ItemTitle{
font-size: 24px;
font-weight:bold;
}
.products_ItemTitle.title04{
margin: 0 auto 3rem;
}
.products_Contents h2{
margin-bottom:1em;
}
.products_info .post-date-box {
text-align: center;
display: inline-block;
border-right: 1px solid hsla(0, 0%, 78%, .5);
font-weight: 400;
line-height: 1;
margin-right: .75em;
padding: .5em .75em .5em 0;
text-align: center;
}
.products_info .post-date-box .post-year {
font-size: 14px;
line-height: 1.2;
}
.products_info .post-date-box .post-month-day {
font-size: 24px;
color: #666;
}
.products_info .productscat-category,
.products_Contents4 .productscat-category{
display:flex;
align-items: center;
gap: 10px;
flex-wrap:wrap;
}
.products_info .productscat-category span,
.products_Contents4 .productscat-category span{
font-size:11px;
background: #f7f7f7;
color: #333;
}
.products_info .productscat-category:before,
.products_Contents4 .productscat-category:before{
content: "";
display: inline-block;
width: 20px;
height: 15px;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
.products_Contents figure.products-img{
/*max-width: 595px;*/
max-width: 700px;
/*max-height: 230px;*/
max-height: 330px;
margin:0 auto 30px;
display: flex;
justify-content: center;
}
.products_Contents figure.products-img img{
object-fit: contain;
width:100%;
}
.products_Contents .Features_block {
/*max-width: 350px;*/
width: 100%;
padding: 0 20px;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}
.products_Contents .products_Features_content {
background-color: #f7f7f7;
padding: 2rem;
text-align: left;
/*margin-top: 3rem;*/
margin-top: 2rem;
}
.products_Contents .Features_block ul {
background-color: #fff;
padding: 1rem .5rem;
flex-grow: 1;
}
.products_Features_content h2 {
text-align: center;
background: linear-gradient(transparent 64%, #b7e3ff 0%);
display: inline-block;
margin: 0 auto 1rem;
}
.products_details_heading span {
text-align: center;
background: linear-gradient(transparent 64%, #b7e3ff 0%);
display: inline-block;
margin: 0 auto;
}
.line-sytle span {
/*text-align: center;
background: linear-gradient(transparent 64%, #b7e3ff 0%);
display: inline-block;
margin: 0 auto 1rem;*/
background: var(--thead-color--bg);
padding: .55em 1em;
color: #fff;
position: relative;
margin-bottom: 20px;
display:block;
}
.line-sytle span:before {
position: absolute;
display: block;
pointer-events: none;
content: "";
top: -4px;
left: 0;
width: 100%;
height: calc(100% + 4px);
box-sizing: content-box;
border-top: solid 2px var(--thead-color--bg);
border-bottom: solid 2px var(--thead-color--bg);
}
.products_Contents .Features_title
{
text-align: center;
font-size: 20.8px;
font-weight: bold;
position: relative;
margin-bottom: .5em;
background: #0088cc;
color: #fff;
padding: .5rem 1rem;
}
.haccp{
font-size: 1.5rem;
font-weight: bold;
line-height:1.4;
color: var(--thead-color--bg);
margin-bottom: 20px;
}
/* .products_Contents .Features_title:before{
content: "";
width: 100%;
height: 2px;
background: repeating-linear-gradient(90deg, #0088cc 0%, #0088cc 29.3%, rgba(0, 170, 255, 0.2) 29.3%, rgba(0, 170, 255, 0.2) 100%);
bottom: 0;
display: block;
left: 0;
position: absolute;
z-index: 0;
} */
.products_Contents .Features_block ul li{
margin-left:2em;
position:relative;
text-align: left;
}
.products_Contents .Features_block ul li+li{
margin-top:.5rem;
}
.products_Contents .Features_block ul li:before{
content:"✓";
color:#cf2e2e;
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: -1.5em;
top: 4px;
}
.products_Contents .Features_block ul li:after{
content: "";
color: #cf2e2e;
position: absolute;
left: -1.8rem;
top: 0px;
width: 1.5rem;
height: 1.5rem;
border-radius: 50%;
border: solid 1px #cf2e2e;
}
.products_Contents .d-flex{
justify-content: center;
}
.products_Contents2 summary span{
background: -webkit-linear-gradient(transparent 64%, #b7e3ff 0%);
background: linear-gradient(transparent 64%, #b7e3ff 0%);
font-size:25.6px;
font-weight:bold;
}
.products_Contents2 .products_detail_block ul{
display:flex;
flex-direction: column;
justify-content: space-around;
}
.products_Contents2 .products_detail_block ul li{
margin-left:2em;
position:relative;
}
.products_Contents2 .products_detail_block ul li:before{
content:"✓";
color:#0088cc;
font-family: "Font Awesome 5 Free";
font-weight: 900;
position: absolute;
left: -1.5em;
top: 4px;
}
.products_Contents2 .products_detail_block{
margin: 2em 1em;
gap:30px;
}
.products_Contents2 .products_detail_block .products_detail_title{
max-width: 350px;
width: 100%;
text-align: center;
border:1px solid #337ab7;
border-radius:5px;
background: linear-gradient(-45deg, transparent 25%, hsla(0,0%,78%,.15) 25%, hsla(0,0%,78%,.15) 50%, transparent 50%, transparent 75%, hsla(0,0%,78%,.15) 75%, hsla(0,0%,78%,.15));
background-clip: padding-box;
background-size: 6px 6px;
display: flex;
align-items: center;
justify-content: center;
padding:1.5em;
}
.products_Contents2 .products_detail_block .products_detail_title strong{
padding: 0 4px 3px;
border-bottom: 1px dashed #bbb;
font-size:17.6px;
}
.products_Contents2 .products_detail_block div{
display:flex;
flex-direction: column;
justify-content: center;
}
.products_Contents3 .btn01{
margin:2em auto;
width: 100%;
max-width:400px;
}
.products_Contents3 .btn01 a{
background: #2e83d3;
display:flex;
justify-content: center;
font-size:16px;
}
.products_details_heading {
text-align: left;
margin-bottom: 1rem;
}
.products_Contents4{
border-top: 1px dashed hsla(0, 0%, 78%, .5);
margin: 2em 0;
padding-top: 2em;
}
/*微調整*/
.hd-x-series{
max-width: 650px;
margin: 0px auto;
display: block;
}
.hd-x-series01{
max-width: 650px;
margin: 20px auto;
display: block;
}
.postid-2942 .products_Contents2 .products_detail_block ul li:last-child:before{
display:none;
}
.postid-2942 .products_Contents2 .products_detail_block ul li:last-child{
margin-left: 0;
color: rgb(0, 136, 204);
font-size:1.1rem;
margin-top: 15px;
}
.PF-tube{
max-width: 796px;
margin: auto;
display: block;
}
.postid-2948 .step-caption{
text-align:left;
}
.postid-2949 .info-flex{
margin-bottom: 20px;
}
.SurgeBondRe{
max-width: 694px;
margin: auto;
display: block;
}
.SurgeBond dt:has(b){
margin-bottom:10px;
font-size: 1.3rem;
margin-top: 30px;
color: #0088cc;
}
.SurgeBondRe-image{
max-width:300px;
}
.mt30{
margin-top:30px;
}
@media screen and (max-width: 998px) {
.products_Contents .d-flex{
flex-direction:column;
gap: 20px;
}
.products_Contents2 .products_detail_block{
flex-direction: column;
gap: 10px;
}
.products_Contents2 .products_detail_block .products_detail_title{
width:100%;
min-width:100%;
}
}
@media screen and (max-width: 991px) {
.products_ItemTitle.title04{
margin: 0 auto 1rem;
}
.products_Contents .Features_block ul li:before {
left: -1.7em;
font-size: 0.85rem;
}
}
@media screen and (max-width: 767px) {
.products_Contents h2,
.products_Contents .Features_title{
font-size:18px;
}
.products_Contents2 summary span{
font-size:18px;
}
.haccp{
font-size: 1.2rem;
}
}
/*動画紹介ページ*/
.movie01 ul{
padding-left:1em;
}
.movie01 ul li{
list-style: inside;
}
div#shop_list01{
color: white;
position: relative;
z-index: 0;
margin-bottom: 4em;
margin-top: 4em;
padding: 10em 0;
}
div#shop_list01:before {
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-image: url(images/shop-list_header.jpg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
z-index: -2;
}
div#shop_list01:after{
content: "";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: rgba(0, 0, 0, .4);
}
.MovieContents,
.MovieContents02{
display: flex;
flex-wrap: wrap;
flex-direction: row;
gap: 0px 30px;
}
.MovieContents div {
width: 48%;
}
.MovieContents02{
gap: 4%;
}
.MovieContents02 div.movie00 {
width: 48%;
margin-left: 0 !important;
margin-right: 0 !important;
}
.MovieContents02 div.movie00 .title04 span{
align-items: center;
height: 78px;
}
.MovieContents02 div.movie00 .title04{
margin-block-end: 10px;
}
.mb-70 {
margin-bottom: 70px !important;
}
@media screen and (max-width: 767px) {
.MovieContents div,
.MovieContents02 div.movie00{
width: 100%;
}
.mb-70 {
margin-bottom: 30px !important;
}
.MovieContents02 div.movie00 .title04 span{
height: auto;
}
}
/*取扱い企業ページ*/
.TermName{
background:#0088cc;
padding: .75em 1em;
color: #fff;
font-size:1.4em;
position:relative;
margin:2em 0;
}
.TermName:before{
position: absolute;
display: block;
pointer-events: none;
content: "";
top: -4px;
left: 0;
width: 100%;
height: calc(100% + 4px);
box-sizing: content-box;
border-top: solid 2px #0088cc;
border-bottom: solid 2px #0088cc;
}
.shop-list_CategoryBlock .container {
overflow-x: auto; /* tableタグのはみ出た要素を隠す */
white-space: nowrap; /* テキストの折り返しなし */
padding:0;
}
table.js-scrollable {
border-collapse: collapse;
}
/*お知らせページ*/
.news_list{
display:flex;
gap:15px;
flex-wrap:wrap;
}
.news_list article{
width:calc((100% - 30px) / 3);
}
.news_thum-box{
position:relative;
}
.news_date{
font-size:11px;
}
.news_CatLabel{
border-radius: 16px;
margin: .5em;
padding: 0 8px;
background-color: #0088cc;
color: #fff;
background-image: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .1) 6px, transparent 6px, transparent 12px);
width: fit-content;
display: block;
font-size: 11px;
position: absolute;
right: 5px;
}
.news_list article figure{
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .1), 0 4px 4px -4px rgba(0, 0, 0, .1);
}
.news_title{
font-size: 16px;
font-weight:bold;
}
.news_excerpt p{
font-size: 13px;
}
.entry-meta-item.entry-meta-item-updated,
.entry-meta-item.entry-meta-item-updated,
.fn
{
display:none;
}
@media screen and (max-width: 767px) {
.news_list article{
width: calc((100% - 15px) / 2);
}
.products_Contents .products_Features_content {
padding: 1rem;
}
}
@media screen and (max-width: 500px) {
.news_list article{
width: 100%;
}
}
/*お問い合わせページ*/
label{
font-weight:bold;
}
.wpcf7-list-item .wpcf7-list-item-label{
font-weight:300;
}
.Required{
color:white;
background: red;
padding:2px 5px;
border-radius:5px;
padding-left:5px;
margin-left:5px;
}
.any{
color:white;
background: #0465b2;
padding:2px 5px;
border-radius:5px;
padding-left:5px;
margin-left:5px;
}
.CF7_table th,
.CF7_table input[type=text]{
background: #F9F9F9;;
}
.CF7_table th p{
text-align:left;
font-weight: bold;
font-size:16px;
}
p.CF7_btn{
margin: 30px auto 0;
display: block;
width: fit-content;
padding-left:72px;
}
@media screen and (max-width: 768px) {
.CF7_table tr {
display: flex;
flex-direction: column;
}
}
/* 追加固定ページ */
.mastitis-wrap {
color: #333;
font-size: 16px;
line-height: 1.8;
margin: 24px 0 40px;
}
/* 見出し */
.mastitis-title {
margin: 30px 0 30px;
font-size: 1.2rem;
font-weight: 700;
}
.mastitis-sub {
margin: 0 0 .8em;
color: #666;
font-size: .98rem;
}
/* 本文 */
.mastitis-body p {
margin: 0 0 1em;
}
/* 図（タイムライン） */
.mastitis-figure {
text-align: center;
width: 60%;
margin: 0 auto;
}
.mastitis-figure img {
max-width: 100%;
height: auto;
display: inline-block;
border-radius: 6px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
.mastitis-figcap {
margin-top: 6px;
font-size: .9rem;
color: #777;
}
/* 箇条書き（＊付き） */
.mastitis-list {
list-style: none;
margin: 12px 0 0;
padding-left: 0;
}
.mastitis-list li {
position: relative;
padding-left: 1.2em;
margin: .35em 0;
}
.mastitis-list li::before {
content: "＊";
position: absolute;
left: 0;
top: 0;
color: #0088cc;
font-weight: 700;
}
/* 注意ボックス（aside→divに変更） */
.mastitis-box {
margin: 18px 0 0;
padding: 12px 14px;
border: 1px solid #e0e0e0;
border-radius: 6px;
background: #fafafa;
color: #555;
font-size: .96rem;
}
/* ラッパー */
.okkit-wrap{
color:#333;
font-size:16px;
line-height:1.8;
margin:24px 0 36px;
}
/* 見出し */
.okkit-title{
margin:0 0 .4em;
font-size:1.2rem;
font-weight:700;
}
.okkit-desc{
margin:0 0 1.2em;
}
.okkit-subtitle{
margin:.2em 0 .6em;
font-size:1.05rem;
font-weight:700;
}
/* 点線リーダー付きリスト */
.okkit-list{
list-style:none;
margin:0 0 .5em;
padding:0;
}
.okkit-list li{
display:flex;
align-items:flex-start;
gap:.5em;
margin:.25em 0;
}
.okkit-num{
flex:0 0 auto;
min-width:2ch; /* 1）2）を揃える */
}
.okkit-text{
flex:0 1 auto;
}
.okkit-dot{
flex:1 1 auto;
border-bottom:1px dotted #cfcfcf; /* 点線リーダー */
align-self:center;
margin:0 .4em;
transform:translateY(-2px); /* ベースライン調整 */
}
.okkit-qty{
flex:0 0 auto;
white-space:nowrap;
padding-left:.2em;
color:#444;
}
/* ページトップリンク（右寄せ） */
.okkit-toplink{
text-align:right;
margin:.8em 0 0;
}
.okkit-link{
position:relative;
display:inline-flex;
align-items:center;
gap:.4em;
text-decoration:none;
color:#1b6f2f;
font-weight:700;
}
.okkit-link::before{
content:"";
width:14px; height:14px;
border-radius:50%;
background:#1b6f2f;
display:inline-block;
}
/* 型番列（2列目）と包装単位列（3列目）の幅を調整 */
.swl-product-table th:nth-child(1),
.swl-product-table td:nth-child(1) {
width: 20%;
white-space: nowrap;
}
.swl-product-table th:nth-child(2),
.swl-product-table td:nth-child(2) {
width: 15%;
white-space: nowrap;
}
.swl-product-table th:nth-child(3),
.swl-product-table td:nth-child(3) {
width: 15%;
white-space: nowrap;
}
/* スマホ対応 */
@media (max-width: 600px) {
.mastitis-wrap { font-size: 15px; }
.mastitis-figure img { border-radius: 5px; }
.mastitis-box { padding: 10px 12px; }
.okkit-wrap{ font-size:15px; }
.okkit-list li{ gap:.4em; }
.okkit-dot{ margin:0 .35em; }
}
/*ページトップ*/
.page_top_btn{
align-items: center;
background: #fff;
border: 2px solid #0088cc;
border-radius: 50%;
box-shadow: 0 2px 4px rgba(0, 0, 0, .05), 0 4px 4px -4px rgba(0, 0, 0, .1);
color: #0088cc;
cursor: pointer;
display: flex;
flex-direction: column;
justify-content: center;
letter-spacing: normal;
line-height: 1;
overflow: hidden;
text-align: center;
transition: all .25s;
width: 52px;
height: 52px;
font-size: 0px;
}
.scrolled .page_top_btn{
display:flex;
}
.page_top_btn:after{
content:"TOP";
display:block;
color:#0088cc;
font-size: 14px;
font-weight:600;
}
.page_top_btn:before{
content:"";
display:block;
width: 10px;
height: 10px;
border-right:2px solid #0088cc;
border-top:2px solid #0088cc;
transform: rotate(-45deg);
}
/* 既存ページ移植 */
/* スキンステープラー*/
:root {
/* メインカラー */
--color_main: #047426;
--thead-color--bg:#0088cc;
/* メインカラーを薄めたバージョン（背景用） */
--color_main_thin: color-mix(in srgb, var(--color_main) 10%, white);
/* 白文字 */
--swl-text_color--white: #ffffff;
/* テキストカラー標準（黒系） */
--swl-text_color--black: #222;
/* グレー線・背景用 */
--swl-border_color: #ddd;
--swl-bg_light: #f9f9f9;
}
.table-scroll {
overflow-x: auto;
}
.has-fixed-layout.swl-product-table {
width: 100%;
min-width: 600px;
border-collapse: separate;
border-spacing: 0;
table-layout: fixed;
background: #fff;
border: 1px solid #ddd;
font-size: 16px;
line-height: 1.6;
}
.swl-product-table thead th {
color: var(--thead-color--txt, #fff);
text-align: center;
padding: 10px 12px;
font-weight: 700;
border-right: 1px solid rgba(255,255,255,0.5);
background: var(--thead-color--bg);
}
.swl-product-table thead th:last-child { border-right: none; }
.swl-product-table td {
padding: 12px;
border-top: 1px solid #e6e6e6;
border-right: 1px solid #eee;
vertical-align: middle;
text-align: center;
word-break: break-word;
}
.swl-product-table td:last-child { border-right: none;}
/* うすい帯背景（参照仕様：swl-main-thin） */
.swl-product-table [data-has-cell-bg="1"] {
position: relative;
overflow: hidden;
}
.swl-product-table .swl-cell-bg.has-swl-main-thin-background-color {
position: absolute;
inset: 0;
background: color-mix(in srgb, var(--color_main, #999) 10%, transparent);
pointer-events: none;
}
/* サイズセル内の図＋ラベル */
.swl-product-table .size-cell figure {
margin: 0;
display: grid;
justify-items: center;
gap: 6px;
padding: 6px 0;
}
.swl-product-table .size-cell img {
max-width: 160px;
height: auto;
display: block;
}
.swl-product-table .size-cell figcaption {
font-weight: 700;
}
.swl-product-table .spec-cell {
white-space: normal;
}
h2.postContentTit {
background: var(--thead-color--bg);
padding: .55em 1em;
color: #fff;
position: relative;
/*margin-bottom: 40px;*/
margin-bottom: 30px;
}
h2.postContentTit::before {
position: absolute;
display: block;
pointer-events: none;
content: "";
top: -4px;
left: 0;
width: 100%;
height: calc(100% + 4px);
box-sizing: content-box;border-top: solid 2px var(--thead-color--bg);border-bottom: solid 2px var(--thead-color--bg);
}
/* レスポンシブ：狭い幅で文字サイズ微調整 */
@media (max-width: 768px) {
.swl-product-table { font-size: 15px; }
.swl-product-table .size-cell img { max-width: 120px; }
}
@media (max-width: 480px) {
.swl-product-table { font-size: 14px; }
.swl-product-table td, .swl-product-table th { padding: 10px 8px; }
.swl-product-table .size-cell img { max-width: 100px; }
}
.feature-flex {
display: flex;
align-items: flex-start;
gap: 24px;
margin-top: 70px;
}
@media (max-width: 767px) {
.feature-flex {
margin-top: 40px;
}
}
/* 左側の画像 */
.feature-flex-left {
flex: 0 0 clamp(240px, 40%, 420px);
max-width: 100%;
margin: 0;
}
.feature-flex.vertical {
flex-direction: column;
justify-content: center;
align-items: center;
}
.feature-flex-left img {
width: 100%;
height: auto;
display: block;
background: #fff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
object-fit: cover;
}
/* 右側のテキスト */
.feature-flex-right {
flex: 1 1 auto;
min-width: 0;
}
.commonLayout.drape .feature-flex-right {
width:100%;
}
.feature-list {
margin: 0;
line-height: 1.8;
}
.feature-list li {
margin: 0.3em 0;
}
.feature-list li::marker {
color: #047426;
}
/* 横並びレイアウト */
.info-flex {
display: flex;
align-items: flex-start;
gap: 28px;
}
.info-left {
flex: 1 1 56%;
min-width: 0;
}
.commonLayout.drape ul.info-list p + p{
margin-top:15px;
}
.info-left p{
font-size:16px;
}
.info-right {
width: 20%;
display: grid;
gap: 16px;
}
/* テキスト部分 */
.info-left h3 {
margin: 0 0 .5em;
font-size: 1.125rem;
}
.info-list {
margin: 0 0 1.25rem;
line-height: 1.9;
}
.info-list li {
margin: .2em 0;
}
.info-list li::marker {
color: #047426; /* マーカー色（緑） */
}
.info-left .info-ref {
color: #555;
font-size: 16px;
line-height: 1.8;
margin-top: 30px;
}
.steps-section {
padding: 30px 30px;
max-width: 900px;
width: 100%;
margin: 0 auto;
box-sizing: border-box;
}
/* 画像部分 */
.info-fig {
margin: 0;
}
.info-fig img {
width: 100%;
height: auto;
display: block;
background: #fff;
border-radius: 6px;
object-fit: contain;
max-width: 272px;
margin: auto;
}
/* ブロック全体 */
.steps-block {
margin: 24px 0 32px;
color: #333;
font-size: 16px;
line-height: 1.75;
}
/* セクション見出し */
.steps-title {
margin: 0 0 10px;
font-size: 18px;
font-weight: 700;
}
/* 3カラムのグリッド（画像＋説明） */
.steps-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 18px 24px; /* row / column */
margin-bottom: 28px;
}
/* 各ステップカード */
.step {
margin: 0;
grid-template-columns: subgrid;
gap: 10px;
}
.step img {
width: 100%;
height: auto;
display: block;
background: #fff;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,0.06);
object-fit: cover;
aspect-ratio: auto;
border: 2px solid #878787;
}
/* キャプション */
.step-caption {
margin: 0;
font-size: 15px;
color: #444;
margin-top: 10px;
}
.step-num {
font-weight: 700;
margin-right: .25em;
}
/* 見出しの左アイコン（緑四角） */
.table-heading.startkit{
position: relative;
padding-left: 1.2em;
font-weight: 700;
}
.table-heading.startkit::before{
content: "";
position: absolute;
left: 0;
top: .25em;
width: .8em;
height: .8em;
background: #0088cc;
border-radius: 2px;
}
/* 小さなカラー四角 */
.color-dot{
display:inline-block;
width:14px;
height:14px;
border-radius:2px;
border:1px solid rgba(0,0,0,.15);
vertical-align:middle;
}
.commonLayout.drape p.note {
margin-top:50px;
margin-bottom:30px;
}
/* --- ユーロクリップ --- */
.feature-image figcaption {
margin-top: 8px;
line-height: 1.6;
color: #333;
text-align: right;
}
.feature-image .caption-title {
font-weight: bold;
font-size: 1.6rem;
margin-bottom: 4px;
}
.feature-block {
display: flex;
flex-direction: column;
gap: 36px;
margin: 24px 0 0px;
font-size: 16px;
line-height: 1.8;
}
/* 横並び行 */
.feature-row {
display: flex;
flex-wrap: wrap;
gap: 60px;
justify-content: space-between;
}
/* 各項目 */
.feature-item {
flex: 1 1 45%;
min-width: 300px;
}
/* タイトル（左の緑四角） */
.feature-title {
position: relative;
padding-left: 1.1em;
margin: 0 0 0.5em;
font-size: 26px;
font-weight: 700;
}
.feature-title::before {
content: "";
position: absolute;
left: 0;
top: .25em;
width: .8em;
height: .8em;
background: #0088cc;
border-radius: 2px;
}
/* 画像 */
.feature-image {
margin: 0 0 0.5em;
text-align: center;
}
.feature-image img {
max-width: 100%;
height: auto;
display: inline-block;
border-radius: 4px;
background: #fff;
}
/* 箇条書き */
.commonLayout.euro .feature-list {
padding-left: 20px;
width: calc(100% - 150px);
}
.commonLayout.euro .feature-list.feature-euro_04{
width: 100%;
padding-left:0px;
}
.commonLayout.euro .flex.euro-feature-box .feature-list {
padding-left: 10px;
}
.swl-product-table.euro-table th:nth-child(1), .swl-product-table.euro-table td:nth-child(1) {
width: 5%;
white-space: nowrap;
}
.commonLayout.euro h4.youtube-tit {
margin-bottom: 10px;
font-size: 18px;
}
.commonLayout.euro .info-right {
width: 30%;
}
.commonLayout.euro .info-flex {
margin: 40px 0 0;
}
.feature-list li {
margin: 0.3em 0;
text-indent: -1em;
padding-left: 1em;
}
.feature-list li::marker {
color: #047426;
}
/* ギャラリー（結紮アクション画像群） */
.feature-gallery {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.feature-gallery figure {
flex: 1 1 30%;
margin: 0;
}
.feature-gallery img {
width: 100%;
height: auto;
border-radius: 4px;
border: 1px solid #ddd;
background: #fff;
}
.flex {
display: flex;
}
.flex figure.feature-image {
width:50%;width: 150px;
height:auto;
margin: 0 auto;
}
.youtube {
width: 100%;
aspect-ratio: 16 / 9;
margin-top:50px;
}
.youtube iframe {
width: 100%;
height: 100%!important;
}
.youtube h2 {
font-size: 22px;
font-weight: bold;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.commonLayout.euro .feature-list {
padding-left: 0px;
width: 100%;
}
.commonLayout.euro .flex.euro-feature-box .feature-list {
padding-left: 0px;
}
}
/* テラセル */
.nipplecare{
margin: 24px 0 0px;
color: #333;
font-size: 16px;
line-height: 1.8;
}
/* ====== 上段：左右レイアウト ====== */
.nipplecare-row{
display: flex;
align-items: flex-start;
gap: 28px;
margin-bottom: 20px;
}
.nipplecare-text{
flex: 1 1 60%;
min-width: 0;
}
.nipplecare-title{
margin: 0 0 .6em;
font-size: 1.125rem;
font-weight: 700;
}
/* 箇条書き */
.nipplecare-list,
.nipplecare-bullets{
margin: 0 0 1rem;
}
.nipplecare-list li,
.nipplecare-bullets li{
margin: .25em 0;
}
.nipplecare-list li::marker,
.nipplecare-bullets li::marker{
color: #047426; /* 強調色 */
}
/* 右の縦長図 */
.nipplecare-figure-vert{
flex: 0 0 280px;
margin: 0;
text-align: center;
}
.nipplecare-figure-vert img{
width: 100%;
height: auto;
display: inline-block;
border-radius: 6px;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
object-fit: contain;
}
/* ====== 中段：フロー図 ====== */
.nipplecare-flow{
margin: 8px 0 20px;
}
.nipplecare-subtitle{
margin: 0 0 8px;
font-size: 1.05rem;
font-weight: 700;
}
.nipplecare-note{
font-weight: 400;
font-size: .95rem;
color: #666;
}
.nipplecare-flow-fig{
margin: 0;
width: 50%;
}
.nipplecare-flow-fig img{
width: 100%;
height: auto;
display: block;
}
/* ====== 下段：図解カード 4枚 ====== */
.nipplecare-cards{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
padding: 10px;
border: 3px solid #e3e3e3;
border-radius: 6px;
}
.nipplecare-card {
margin: 0;
display: grid;
gap: 6px;
grid-auto-flow: column;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nipplecare-card img{
width: 100%;
height: auto;
display: block;
background: #fff;
}
.nipplecare-card figcaption{
font-size: 14px;
color: #444;
line-height: 1.7;
text-align: left;
}
/* ========== ベース ========== */
.milkduct {
color: #333;
font-size: 16px;
line-height: 1.8;
margin: 24px 0 0px;
}
.inner {
padding: 0 20px;
position: relative;
}
/* ========== 上段（本文＋右図） ========== */
.milkduct-row {
display: flex;
align-items: flex-start;
gap: 28px;
margin-bottom: 24px;
}
.milkduct-text {
flex: 1 1 60%;
min-width: 0;
}
.milkduct-text p {
margin: 0 0 1em;
}
.milkduct-diagram {
flex: 0 0 320px;
margin: 0;
text-align: center;
}
.milkduct-diagram img {
width: 100%;
height: auto;
display: inline-block;
border-radius: 4px;
border: 1px solid #ddd;
background: #fff;
box-shadow: 0 2px 8px rgba(0,0,0,.08);
object-fit: contain;
}
/* ========== ギャラリー5枚 ========== */
.milkduct-gallery {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.milkduct-item {
margin: 0;
gap: 8px;
}
.milkduct-item img {
width: 100%;
height: auto;
display: block;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
object-fit: cover;
}
.milkduct-item figcaption {
font-size: 14px;
color: #444;
line-height: 1.6;
text-align: left;
margin-top: 10px;
}
/* テーブル全体 */
.milk-loss-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
border: 1px solid #ddd;
table-layout: fixed;
font-size: 16px;
line-height: 1.6;
margin-top: 30px;
}
/* ヘッダーのみ色付き */
.milk-loss-table thead th {
background: #0088cc;
color: #333;
font-weight: 700;
text-align: center;
padding: 10px 12px;
border-right: 1px solid #fff;
color:#fff;
}
.milk-loss-table thead th:last-child {
border-right: none;
}
/* 本文セル */
.milk-loss-table td {
text-align: center;
padding: 12px;
border-top: 1px solid #e6e6e6;
border-right: 1px solid #eee;
}
.milk-loss-table td:first-child {
background: none;
}
.milk-loss-table td:last-child {
border-right: none;
}
.milk-loss-box{
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 20px;
}
/* 備考文 */
.milk-loss-note {
font-size: 14px;
color: #555;
margin: 8px 0 16px;
}
/* ボタン */
.milk-loss-button {
text-align: right;
}
.milk-loss-btn {
display: inline-block;
background: #0088cc;
color: #fff;
font-weight: 700;
font-size: 15px;
text-decoration: none;
padding: 10px 20px;
border-radius: 4px;
transition: opacity 0.2s;
}
.milk-loss-button:hover {
background:#fff;
color:#cc8800;
}
.milk-loss-button:hover a{
color:#fff;
}
.product-flex {
display: flex;
flex-wrap: wrap;
gap: 20px;
align-items: flex-start;
}
.product-left {
flex: 1 1 40%;
}
.product-right {
flex: 1 1 55%;
}
.product-left img {
max-width: 100%;
height: auto;
display: block;
margin-bottom: 12px;
}
.product-flex{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start;}
.product-left{flex:1 1 40%;}
.product-right{flex:1 1 55%;}
.product-left img{max-width:100%;height:auto;display:block;margin-bottom:12px;}
.product-note{font-size:14px;color:#555;margin:.6em 0 0;}
.okkit-bullets{margin:.3em 0 0;line-height:1.9;}
.okkit-bullets li{margin:.15em 0;}
/* P-セル（乳頭損傷治療用留置カテーテル） */
.psel-guide {
margin: 2em 0;
font-size: 16px;
line-height: 1.7;
color: #333;
}
/* フローチャート部分 */
.psel-flowchart {
position: relative;
text-align: center;
margin-bottom: 6em;
display: flex;
justify-content: center;
align-items: center;
gap: 40px;
}
/*----- 三角の矢印 */
.arrow {
width: 0;
height: 0;
border-style: solid;
}
/* 右向き */
.arrow.-right{
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #cc8800;
border-right: 0;
}
.psel-step + .psel-step::before {
content: "";
position: absolute;
top: 50%;
left: -30px;
transform: translateY(-50%);
width: 0;
height: 0;
border-style: solid;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 20px solid #0088cc;
border-right: none;
background: transparent;
}
.psel-box {
display: inline-block;
padding: 6px 16px;
border-radius: 4px;
font-weight: 700;
}
/* 分岐ライン */
.psel-flow-bottom {
display: flex;
justify-content: center;
gap: 80px;
margin-top: 1em;
}
.psel-arrow {
margin-bottom: 4px;
}
.psel-image-right img {
width: 100%;
height: auto;
}
/* ステップ画像 */
.psel-step-images {
display: flex;
justify-content: space-between;
gap: 16px;
margin-top: 2em;
position: relative;
}
.psel-step {
width: calc(100% / 3);
text-align: center;
position: relative;
}
.psel-step p {
font-size: 16px;
text-align:left;
}
.psel-step img {
max-width: 100%;
height: 100%;
width: unset;
margin:0 auto 15px;
display: block;
}
/* 下の注記ボックス */
.psel-note {
border: 3px solid #ddd;
background: #f8f8f8;
padding: 1em;
margin-top: 2em;
text-align: center;
}
.psel-note p{
font-weight:600;
}
.psel-link {
color: #0088cc;
text-decoration: underline;
}
@media (max-width: 768px) {
.products_info, .products_Contents, .products_Contents2, .products_Contents3, .products_Contents4 {
margin-bottom: 25px;
}
.inner {
padding: 0;
}
h2.postContentTit {
margin-top: 30px;
font-size: 20px;
margin-bottom: 10px;
}
.feature-flex-right {
margin-top: 20px;
}
.steps-section {
padding: 15px 15px;
}
.has-fixed-layout.swl-product-table {
margin-top: 0px;
}
.table-heading.startkit {
margin: 25px 0 0;
}
.feature-flex {
gap: 16px;
display: block;
margin: 20px 0;
}
.feature-flex-left {
flex-basis: auto;
}
.info-flex {
flex-direction: column;
gap: 18px;
}
.info-right {
width: 100%;
flex: none;
grid-template-columns: 1fr;
}
.steps-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px 18px;
}
.feature-row {
flex-direction: column;
gap: 28px;
}
.flex {
flex-direction: column;
}
.feature-item {
flex: 1 1 100%;
}
.feature-title
{
font-size: 18px;
}
.commonLayout.euro .info-right {
width: 100%;
}
.youtube h2 {
font-size: 16px;
}
.nipplecare-row{
flex-direction: column;
gap: 18px;
}
.nipplecare-figure-vert{
flex: none;
width: 100%;
max-width: 420px;
}
.nipplecare-cards{
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.milkduct-row {
flex-direction: column;
gap: 18px;
}
.milkduct-diagram {
flex: none;
width: 100%;
max-width: 420px;
margin: 0 auto;
}
.milkduct-gallery {
grid-template-columns: repeat(3, 1fr);
}
.milk-loss-table {
font-size: 15px;
}
.milk-loss-btn {
font-size: 14px;
padding: 8px 16px;
}
.milk-loss-box {
flex-direction: column;
}
.nipplecare-flow-fig {
width: 100%;
}
.product-flex {
flex-direction: column;
}
.product-flex{flex-direction:column;}
/* P-セル（乳頭損傷治療用留置カテーテル）
*/
.psel-flow-bottom {
flex-direction: column;
gap: 20px;
}
.psel-image-right {
position: static;
width: 100%;
text-align: center;
margin-top: 1em;
}
.psel-step-images {
flex-direction: column;
}
.psel-step {
padding-top: 20px;
width: 100%;
}
.commonLayout.euro .info-flex {
margin: 20px 0 0;
}
.psel-step + .psel-step::before {
top: 0%;
left: 50%;
transform: translateX(-50%);
transform: rotate(90deg);
}
.psel-flowchart {
margin-bottom: 0em;
}
}
@media (max-width: 480px) {
.feature-flex {
gap: 12px;
}
.feature-list {
line-height: 1.7;
}
.info-flex {
gap: 14px;
}
.info-list {
line-height: 1.8;
}
.steps-grid {
grid-template-columns: 1fr;
gap: 14px;
}
.steps-block {
font-size: 15px;
}
.feature-block {
font-size: 15px;
gap: 28px;
}
.feature-gallery {
gap: 6px;
}
.nipplecare{
font-size: 15px;
}
.nipplecare-cards{
grid-template-columns: 1fr;
}
.milkduct {
font-size: 15px;
}
.milkduct-gallery {
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
}
/*合成吸収糸モノシンセ */
.kc-spec * { box-sizing: border-box; }
/* Accordion */
.kc-spec__acc {
border-radius: 6px;
background: #fff;
/* 初期は閉じた状態（HTML側で open 属性を付けない） */
}
.kc-spec__summary {
list-style: none;
cursor: pointer;
padding: 18px 48px 18px 18px;
position: relative;
border-bottom: 1px solid #eef3f6;
display: flex;
align-items: center; /* 中央ズレ防止 */
}
.kc-spec__summary::-webkit-details-marker { display: none; }
.kc-spec__title {
font-weight: 700;
font-size: 1.75rem;
letter-spacing: .02em;
text-align: left;
margin: 3rem 0 1rem;
}}
/* caret：く字の矢印（閉：下向き / 開：上向き） */
.kc-spec__summary::after {
content: "";
position: absolute;
right: 16px;
top: 50%;
width: 10px;
height: 10px;
border: 2px solid #333;
border-left: 0;
border-top: 0; /* ↘ をベースにする */
transform: translateY(-50%) rotate(45deg); /* 下向きに見える */
transition: transform .2s ease;
}
.kc-spec__acc[open] .kc-spec__summary::after {
transform: translateY(-50%) rotate(-135deg); /* 上向きに見える */
}
/* キーボード操作時の視認性 */
.kc-spec__summary:focus-visible {
outline: 3px solid rgba(42, 141, 191, .35);
outline-offset: 3px;
}
/* Body */
.kc-spec__body { padding: 22px 18px 24px; }
/* Spec list */
.kc-spec__list { margin: 0; }
.kc-spec__row {
display: grid;
grid-template-columns: 280px 1fr;
align-items: flex-start;
gap: 24px;
padding: 16px 0;
}
.kc-spec__row:last-child { border-bottom: none; }
.kc-spec__term {
margin: 0;
position: relative;
font-weight: 700;
font-size: 18px;
line-height: 1.3;
border-bottom: solid 1px #7ac1e5;
}
.kc-spec__term > span { display: inline-block; padding-bottom: 8px; }
.kc-spec__term::after {
content: "";
position: absolute;
left: 0;
bottom: -2px;
width: 110px;
height: 3px;
background: #0088cc;
}
.kc-spec__desc {
margin: 0;
color: #111;
line-height: 1.9;
font-size: 16px;
}
/* Buttons */
.kc-spec__actions {
display: flex
;
flex-wrap: wrap;
gap: 16px;
margin-top: 28px;
justify-content: space-around;
}
.kc-spec__btn {
padding: 12px 20px;
border-radius: 999px;
border: 2px solid #0088cc;
background: #fff;
color:#0088cc;
text-decoration: none;
font-weight: 700;
line-height: 1.2;
text-align: center;
min-width: 180px;
display: flex;
justify-content: center;
align-items: center;
transition: box-shadow .15s ease, transform .15s ease, background .15s ease;
}
.commonLayout .wp-block-columns {
align-items: center!important;
gap: 20px;
}
.kc-spec__btn:hover {
box-shadow: 0 4px 16px rgba(0,0,0,.06);
transform: translateY(-1px);
background: #f9fdff;
}
.kc-spec__br { display: none; }
.ms-catalog__grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
}
/* ==== カード ==== */
.ms-card{
background:#fff;
border:2px solid #0088cc;
overflow:hidden;
display:flex;
flex-direction:column;
min-height: 100%;
}
.ms-card__head {
padding: 10px 16px;
background-color: #0088cc;
color: #fff;
}
.ms-card__title{
margin:0;
font-size: 18px;
font-weight:700;
letter-spacing:.02em;
text-align:center;
}
.ms-card__body{
padding: 18px 20px 22px;
}
/* 画像 */
.ms-card__figure{
margin: 8px auto 14px;
max-width: 150px;max-width: 300px;
text-align:center;
}
.ms-card__figure img{
width: 100%;
height: auto;
display:block;
border:1px solid #e5eef4;
border-radius: 6px;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
}
/* チェック付きリスト */
.ms-list{
margin: 0;
padding: 0;
list-style: none;
}
.ms-list__item{
position: relative;
padding-left: 28px;
margin: 10px 0;
line-height: 1.9;
font-size: 15.5px;
}
.ms-list__item::before{
content: '';
display: block;
position: absolute;
top: .5em;
left: 6px;
width: 18px;
height: 8px;
border-left: 2px solid #0088cc;
border-bottom: 2px solid #0088cc;
transform: rotate(-45deg);
/* 斜めチェック風（小さく主張しすぎない） */
}
/* Responsive */
@media (max-width: 960px) {
.kc-spec__row { grid-template-columns: 150px 1fr; }
.kc-spec__term::after { width: 130px; }
.ms-catalog__grid{ gap: 20px; }
.ms-card__figure{ max-width: 220px; }
}
@media (max-width: 768px) {
.kc-spec__summary { padding: 16px 44px 16px 14px; }
.kc-spec__title { font-size: 18px; }
.kc-spec__row {
grid-template-columns: 1fr;
gap: 10px;
padding: 14px 0;
}
.kc-spec__term::after { width: 120px; }
.kc-spec__desc { font-size: 15px; }
.kc-spec__actions { gap: 12px; }
.kc-spec__btn {
min-width: unset;
width: 100%;
padding: 12px 16px;
}
.kc-spec__br { display: inline; }
.ms-catalog__grid{
grid-template-columns: 1fr;
}
.ms-card__figure{ max-width: 100%; }
}
/* 非吸収縫合糸 */
.kcfl-sr{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.kcfl-inner{display:flex;align-items:center;gap: 40px;justify-content: space-around;}
table.has-fixed-layout.swl-product-table.usp-table tr.usp-table-header th
{
background: #f3f8fd;
color: #3B4043;
font-weight: normal;
}
.kcfl-media{
width: 50%;width: 40%;
margin: 0 auto;
text-align: center;
display: flex;
justify-content: end;
}
figure.kcfl-media.kc-spec-img {
margin-bottom: 30px;
}
.kcfl-media img{display:block;max-width:500px;width:100%;height:auto}
.commonLayout .wp-block-column .has-text-align-center {
margin-bottom: 10px;
}
figure.kcfl-media.kc-spec-img {
display: flex
;
justify-content: center;
}
.kcfl-list{margin:0;padding:0;list-style:none;display:grid;row-gap:10px;width: 50%;}
.kcfl-item{position:relative;padding-left:32px;line-height:1.8}
section.kcsut {
margin-top: 70px;
}
.kcfl-item::before{
content:"";
position:absolute;left:0;top:0.55em;
width:18px;height:18px;
position: absolute;
top: .5em;
left: 6px;
width: 18px;
height: 8px;
border-left: 2px solid #0088cc;
border-bottom: 2px solid #0088cc;
transform: rotate(-45deg);
}
.kcsut-name span {
display: inline;
font-weight: bold;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
line-height: 1.6;
padding: 0 2px;
}
.kcsut-attn-box{
border: 2px solid #c43b3b;
border-radius: 10px;
padding: 18px 20px;
background: #fff;
line-height: 1.9;
margin-top: 3rem;
}
.kcsut-attn-title{
margin: 0 0 8px;
font-weight: 700;
font-size: 1.25rem;
color: #c43b3b;
}
.kcsut-attn-list{
list-style: none;
margin: 0 0 10px;
padding: 0;
color: #2c6fb8;
}
.kcsut-attn-list li{
position: relative;
padding-left: 1.6em;
margin: 0.2em 0;
}
.kcsut-attn-list li::before{
content: "◎";
position: absolute;
left: 0;
top: 0;
line-height: 1;
transform: translateY(0.2em);
font-weight: 700;
}
.kcsut-attn-note{
margin: 8px 0 0;
font-size: 0.9rem;
color: #567aa8;
}
.syringe-pdf-btn {
display: block;
text-align: center;
margin: 2em auto;
width: 100%;
max-width: 400px;
}
.syringe-pdf-btn a {
color: #0088cc;
display: flex;
justify-content: center;
align-items: center;
}
.syringe-pdf-btn .kcbtn{
display:inline-flex;
align-items:center;
gap:.5em;
width: 100%;
text-decoration:none;
color:#333;
background:#fff;
border:1px solid #0088cc;
border-radius: 50px;
padding:.6em .9em;
transition:background-color .2s, color .2s, border-color .2s;
}
.syringe-pdf-btn .kcbtn.syringe02{
margin-top:20px;
height: 54px;
}
@media (max-width: 767px) {
.syringe-pdf-btn .kcbtn.syringe02 {
height: 48px;
}
}
@media (max-width: 300px) {
.syringe-pdf-btn .kcbtn.syringe02 {
font-size: 0.9rem;
}
}
.syringe-pdf-btn svg.__icon {
width: 2rem;
height: 100%;
}
.syringe-pdf-btn .kcbtn:hover {
color: #fff;
background-color: #0088cc;
}
.syringe-pdf-btn .kcbtn span{
color: #0088cc;
font-weight: bold;
}
section#HD-X h2.postContentTit {
margin-top:1rem;
}
.syringe-pdf-btn .kcbtn .__icon path{
fill:#0088cc; /* 初期 */
transition:fill .2s;
}
/* ホバー／フォーカス時の指定 */
.syringe-pdf-btn .kcbtn:hover,
.syringe-pdf-btn .kcbtn:focus-visible{
background:#0088cc;
color:#fff; /* テキスト白 */
border-color:#0088cc;
}
.syringe-pdf-btn .kcbtn:hover .__icon path,
.syringe-pdf-btn .kcbtn:focus-visible .__icon path{
fill:#fff;
color:#fff;
}
.syringe-pdf-btn .kcbtn:hover span{
color:#fff;
}
/* タイトル装飾 */
.kcsut-title {
text-align: center;
font-size: 22px;
font-weight: 700;
letter-spacing: 0.08em;
margin: 22px 0 18px;
position: relative;
}
.kcsut-title::before,
.kcsut-title::after {
content: "";
position: absolute;
top: 50%;
width: 28%;
height: 2px;
background: #cfd9e2;
}
.btn01 {
display: block;
text-align: center;
margin: 2em auto;
width: 100%;
max-width: 400px;
}
.btn01-link {
display: inline-flex;
align-items: center;
gap: 0.5em;
padding: 0.8em 1.4em;
background: #0088cc;
color: #fff;
border-radius: 4px;
text-decoration: none;
position: relative;
overflow: hidden;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn01-link .__icon path {
fill: #fff;
}
/* 光の筋エフェクト */
.btn01-link::before {
content: "";
position: absolute;
top: 0;
left: -75%;
width: 50%;
height: 100%;
background: linear-gradient(
120deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.5) 50%,
rgba(255, 255, 255, 0) 100%
);
transform: skewX(-25deg);
animation: shine 3s linear infinite;
}
/* 光の動き */
@keyframes shine {
0% {
left: -60%;
opacity: 0;
}
5% {
opacity: 1;
}
20% {
left: 180%; /* 通過スピード */
opacity: 1;
}
25% {
opacity: 0;
}
100% {
left: 120%;
opacity: 0;
}
}
/* 少し浮く効果を追加（任意） */
.btn01-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 136, 204, 0.3);
}
.kcsut-title::before {
left: 0;
transform: translateY(-50%);
}
.kcsut-title::after {
right: 0;
transform: translateY(-50%);
}
.sasyfide_content+.sasyfide_content{
margin-top:1rem;
}
.easyfixde {
--gap: 28px;
--accent: #9ec6dc;
display: grid;
grid-template-columns: 1fr 1.5fr;
gap: var(--gap);
align-items: start;
}
/* タイトル */
.easyfixde__title {
margin: 0 0 12px;
font-weight: 700;
font-size: clamp(18px, 2vw, 24px);
color: #333;
position: relative;
line-height: 1.3;
}
.easyfixde__title::after {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100%;
height: 2px;
background: linear-gradient(90deg, var(--accent) 0 100%, transparent 100%);
z-index:1;
}
.easyfixde__title::before {
content: "";
position: absolute;
left: 0;
bottom: -4px;
width: 100px;
height: 2px;
background: #0088cc;
z-index:2;
}
/* 画像 */
.easyfixde__figure {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 動画と同じ比率に */
display: flex;
align-items: center;
justify-content: center;
}
.easyfixde__figure img {
width: 100%;
height: 100%;
object-fit: contain; /* 縦横比を維持して中に収める */
}
/* 動画（レスポンシブ） */
.easyfixde__video {
position: relative;
width: 100%;
aspect-ratio: 16 / 9; /* 動画比率 */
background: #000;
overflow: hidden;
}
.easyfixde__video iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
/* スマホ対応 */
@media (max-width: 960px) {
.easyfixde {
grid-template-columns: 1fr;
gap: 20px;
}
}
/* スクロールエリア */
.kcsut-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
box-shadow: inset 8px 0 6px -6px rgba(0, 0, 0, 0.1),
inset -8px 0 6px -6px rgba(0, 0, 0, 0.1);
}
/* テーブル本体 */
.kcsut-table {
width: 100%;
min-width: 860px;
border-collapse: separate;
border-spacing: 0;
/* border: 1px solid #cfd9e2; */
border-radius: 6px;
overflow: hidden;
}
/* ヘッダー */
.kcsut-table thead th {
background: #167ecb;
color: #ffffff;
font-weight: 700;
text-align: center;
padding: 12px 14px;
border-right: 1px solid #0e66a7;
white-space: nowrap;
}
.kcsut-table thead th:first-child {
text-align: left;
}
/* セル共通 */
.kcsut-table td,
.kcsut-table tbody th {
padding: 12px 14px;
border-top: 1px solid #cfd9e2;
border-right: 1px solid #cfd9e2;
vertical-align: middle;
line-height: 1.6;
background: #fff;
text-align: center;
}
.kcsut-table.vomel-table td,.kcsut-table.vomel-table tbody th{
text-align: left;
}
.kcsut-table.vomel-table th.kcsut-name {
width: 20%; /* 好きな幅に調整 */
min-width: 120px; /* 必要に応じて固定幅も設定 */
text-align: left; /* 左寄せなど調整可能 */
white-space: nowrap; /* 折り返し防止（必要なら） */
}
/* 商品名列 */
.kcsut-table tbody th.kcsut-name {
font-weight: 600;
text-align: left;
background: #f2f7fc;
}
.kcsut-table.vomel-table .kcsut-left p{
font-size:16px;
}
.kcsut-table.vomel-table .kcsut-left p + p {
margin-top:10px;
}
/* リンク装飾 */
.kcsut-table .kcsut-name a {
color: #167ecb;
text-decoration: underline;
text-underline-offset: 3px;
}
/* 中央寄せ */
.kcsut-center {
text-align: center;
}
/* 左寄せ */
.kcsut-left {
text-align: left;
}
.kcfl-media-right {
max-width: 500px;
width: 100%;
}
/* 最後の列右線を削除 */
.kcsut-table thead th:last-child,
.kcsut-table td:last-child {
border-right: none;
}
/* 余白調整（画像が小さい場合の整列） */
@media (max-width: 767px){
.kcfl-inner{display: block;}
.kcsut-title {
font-size: 18px;
margin: 14px 0;
}
.kcfl-list {
width: 100%;
}
.kcsut-title::before, .kcsut-title::after {
width: 18%;
}
.kcsut-table td,
.kcsut-table tbody th {
padding: 10px 12px;
}
section.kcsut {
margin-top: 25px;
}
}
/* カットグットと合成吸収糸の比較*/
/* 全体ラッパー */
.threadcmp-wrap {
font-size: 16px;
line-height: 1.9;
color: #333;
margin: 20px 0 0px;
}
/* 定義リスト */
.threadcmp-list {
margin: 0;
padding: 0;
}
/* 各項目 */
.threadcmp-item {
display: flex;
flex-wrap: wrap;
border-bottom: 1px solid #eee;
padding: 10px 0;
}
.threadcmp-item:last-child {
border-bottom: none;
}
/* 項目タイトル（dt） */
.threadcmp-term {
flex: 0 0 250px;
margin: 0;
}
/* 説明部分（dd） */
.threadcmp-desc {
flex: 1;
margin: 0;
text-align: justify;
text-justify: inter-ideograph;
}
.threadcmp-desc p{
font-size:16px;
}
.threadcmp-desc p + p{
margin-top:20px;
}
.swl-product-table.cutgood-table th:nth-child(1), .swl-product-table.cutgood-table td:nth-child(1) {
width: 7%;
white-space: nowrap;
}
.swl-product-table.cutgood-table tr.usp-table-header th{
background: #f3f8fd;
color: #3B4043;
font-weight:100;
}
/* スマホ対応 */
@media (max-width: 600px) {
.threadcmp-item {
flex-direction: column;
}
.threadcmp-term {
flex: none;
margin-bottom: 4px;
}
}
/* 縫合糸の性質 */
.guideline .content_area {
width: 100%;
max-width: 1240px;
margin: 0 auto;
padding: 30px 20px;
}
.guideline .tab-container {
display: flex;
flex-wrap: wrap;
}
.guideline .tab-container {
margin: 0 0 30px;
border: 1px solid #0088cc;
border-bottom: 4px solid #0088cc;
}
.tab-container .tab:last-child {
border-right: none; /* 最後のタブだけ線なし */
}
.guideline .tab {
font-weight: 500;
text-align: center;
width: calc(100% / 4);
padding: 10px;
cursor: pointer;
border-right: 1px solid #0088cc;
display: flex;
justify-content: center;
align-items: center;
text-align: left;
}
.guideline .tab.active {
background-color:var(--thead-color--bg);
color: #fff;
}
.guideline .content {
display: none;
}
.guideline .content.show {
display: block;
}
.guideline-tit p:first-child{
margin-bottom:10px;
}
.suture-graph-section img {
width: 50%;
margin-top:20px;
}
.kcsut-hx-h1frame{
position: relative;
margin: 16px 0 18px;
padding: 14px 18px 14px 56px; /* 左はバー分広め */
border: 1px solid #0088cc;/* 太い薄グレー枠 */
border-radius: 3px;
background: #fff;
color: #33414d; /* 落ち着いた濃グレー文字 */
font-weight: 700;
font-size: clamp(1.25rem, 2.6vw, 1.6rem);
line-height: 1.55;
box-shadow: 0 1px 0 rgba(0,0,0,.03); /* うっすら陰影でH2帯と差別化 */
}
/* 左の緑バー（角丸） */
.kcsut-hx-h1frame::before{
content: "";
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
width: 10px;
height: 28px;
background: #0088cc;
border-radius: 2px;
}
.kcsut-feat-list{
list-style: none;
margin: 0;
padding: 0;
color: #666;
line-height: 1.9;
font-size: 15px;
}
.kcsut-feat-list > li{
position: relative;
padding-left: 1.8em;
}
.kcsut-feat-list > li::before{
content: "◎";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
color: #8a8a8a;
line-height: 1;
}
ul.kcsut-feat-list {
margin-top: 1rem;
}
.kcsut-feat-note {
font-size: 1rem;
}
/* スマホ対応 */
@media (max-width: 767px) {
.suture-graph-section img {
width: 100%;
}
.guideline .tab {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.tab-container .tab:nth-child(1),
.tab-container .tab:nth-child(2) {
border-bottom: 1px solid #0088cc; /* 任意の太さと色に変更 */
}
}
/* USPサイズ早見表 */
.swl-product-table.usp-table th:nth-child(2), .swl-product-table.usp-table td:nth-child(2) {
width: 15%;
white-space: wrap;
}
.swl-product-table.usp-table th:nth-child(3), .swl-product-table.usp-table td:nth-child(3) {
width: 15%;
white-space: wrap;
}
p.usp-txt {
font-size: 16px;
margin-top: 10px;
}
p.usp-txt span{
font-weight:600;
}
/* VOMEL カセット製品 */
.cassette-table {
width: 100%;
border-collapse: collapse;
table-layout: fixed; /* 各列の幅指定を有効化 */
border: 1px solid #ccc;
}
.cassette-table th,
.cassette-table td {
border: 1px solid #ccc;
padding: 0.5rem;
text-align: center;
vertical-align: middle;
word-break: break-word;
background: #fff;
}
/* 列幅指定（必要に応じて調整） */
.cassette-table th:nth-child(1),
.cassette-table td:nth-child(1) {
width: 9.2%; /* 材料 */
}
.cassette-table th:nth-child(2),
.cassette-table td:nth-child(2) {
width: 10%; /* モノシンセ */
}
.cassette-table th:nth-child(3),
.cassette-table td:nth-child(3) {
width: 10%; /* シンセソーブ */
}
.cassette-table th:nth-child(4),
.cassette-table td:nth-child(4) {
width: 10%; /* サブライロン1 */
}
.cassette-table th:nth-child(5),
.cassette-table td:nth-child(5) {
width: 10%; /* サブライロン2 */
}
.cassette-table th:nth-child(6),
.cassette-table td:nth-child(6) {
width: 12%; /* ナイロン */
}
.cassette-table th:nth-child(7),
.cassette-table td:nth-child(7) {
width: 12%; /* シルク1 */
}
.cassette-table thead tr th,.cassette-table tbody tr th,.cassette-table thead tr td {
background: #f2f7fc;
font-weight: 700;
text-align: center;
padding: 12px 14px;
white-space: nowrap;
}
.cassette-table thead tr th {
background: #167ecb;
font-weight: 700;
color:#fff;
text-align: center;
padding: 12px 14px;
white-space: nowrap;
}
.cassette-table .table-dividertr td {
background: #167ecb;
font-weight: 700;
color:#fff;
text-align: center;
padding: 12px 14px;
white-space: nowrap;
}
.cassette-table tr.table-divider th,.cassette-table tr.table-divider td{
background: #f2f7fc;
}
/* スクロール対応（スマホ時） */
@media screen and (max-width: 768px) {
.cassette-table {
display: block;
overflow-x: auto;
white-space: nowrap;
}
.cassette-table th,
.cassette-table td {
min-width: 140px; /* スマホ時の最小幅 */
}
}
.pspec4-table,.cassette-table{
width: 100%;
min-width: 860px;
border-collapse: separate;
}
.cassette-brake {
margin: 2rem auto;
max-width: 700px;
line-height: 1.8;
font-size: 1rem;
}
.cassette-brake__title {
font-weight: 700;
font-size: 1.2rem;
margin-bottom: 1rem;
}
.cassette-brake__illustration {
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
margin: 1.5rem 0;
flex-wrap: wrap;
}
.cassette-brake__illustration img {
max-width: 450px;
width: 100%;
height: auto;
}
.cassette-brake__arrow {
font-size: 1.5rem;
font-weight: bold;
color: #009688;
}
.cassette-brake__text {
margin: 1rem 0;
}
.cassette-brake__text small {
display: block;
margin-top: 0.5rem;
font-size: 0.85rem;
color: #555;
}
.pspec4-table th, .pspec4-table td {
border: 1px solid #ccc;
padding: 0.5rem;
text-align: center;
vertical-align: middle;
word-break: break-word;
background: #fff;
}
.pspec4-table tr th{
border: 1px solid #ccc;
padding: 0.5rem;
text-align: center;
vertical-align: middle;
word-break: break-word;
background: #f2f7fc;;
}
#pspec4 .pspec4__table tr th{
padding: 0.5rem;
text-align: center;
vertical-align: middle;
word-break: break-word;
background: #f2f7fc!important;
}
#pspec4 .pspec4__table td:first-of-type th{
padding: 0.5rem;
text-align: center;
vertical-align: middle;
word-break: break-word;
background: #f2f7fc!important;
}
table.pspec4__table tr td {
text-align: center;
}
.hd02-note{margin-top:10px;}
/* 針付き製品 */
.suture {
--bd: #d9e1ea;
--tx: #2b3a45;
--hl: #f5f9ff;
}
/* タイトル */
.suture__title {
margin: 0.5rem 0 0.75rem;
font-size: 1.2rem;
color: var(--tx);
}
/* テーブル全体 */
.table-wrap {
overflow: auto;
border: 1px solid var(--bd);
border-radius: 8px;
background: #fff;
}
.table {
width: 100%;
min-width: 760px;
border-collapse: separate;
border-spacing: 0;
font-size: 0.95rem;
color: var(--tx);
}
.table th,
.table td {
border-right: 1px solid var(--bd);
border-bottom: 1px solid var(--bd);
padding: 0.55rem 0.7rem;
text-align: center;
background: #fff;
vertical-align: middle;
}
.table thead th {
background: var(--hl);
font-weight: 700;
}
.table th:first-child,
.table td:first-child {
border-left: 1px solid var(--bd);
}
/* 商品コード列 */
.code {
white-space: nowrap;
font-weight: 700;
}
/* 画像セル */
.img-cell {
text-align: center;
}
.img-cell img {
display: inline-block;
width: 140px;
height: 90px;
object-fit: contain;
border: 1px solid var(--bd);
border-radius: 6px;
background: #fff;
padding: 0.2rem;
}
/* ラップ */
.suture-head{
color:#2b3a45;
font-size:16px;
line-height:1.7;
}
/* タイトル行 */
.suture-head__title{
margin:0 0 .25rem;
font-size:1.4rem; /* h3を少し大きめに */
font-weight:700;
display:flex;
flex-wrap:wrap;
gap:.4rem .75rem;
align-items:flex-end;
}
.sutureBox table.suture__table thead tr th{
background: #167ecb;
color: #ffffff;
font-weight: 700;
text-align: center;
padding: 12px 14px;
border-right: 1px solid #0e66a7;
white-space: nowrap;
}
.sutureBox table.suture__table th,
.sutureBox table.suture__table td {
text-align: center; /* 横方向中央 */
vertical-align: middle; /* 縦方向中央 */
}
/* 1列目（針型式（画像））の幅を広げる */
.sutureBox table.suture__table th:nth-child(1),
.sutureBox table.suture__table td:nth-child(1) {width: 150px; /* ←お好みの幅に調整（例：260px） */
min-width: 150px;
}
/* 2列目（針型式（画像））の幅を広げる */
.sutureBox table.suture__table th:nth-child(2),
.sutureBox table.suture__table td:nth-child(2) {width: 150px; /* ←お好みの幅に調整（例：260px） */
min-width: 150px;
}
/* （合成吸収糸 単糸 PDO）を強調（オレンジ寄り） */
.title-note{
font-size:1rem;
color:#f39a1f;
margin-right: 1em;
}
.title-note em{
font-style:normal;
}
.title-note strong{
font-weight:800;
}
/* 糸色～のメタは薄めのグレー */
.title-meta{
font-size:1rem;
}
.suture-head__desc {
margin: 0rem 0 0rem;
color: #6c7a89;
font-size: 1.1rem;
}
.suture-note-txt {
display: flex;
justify-content: flex-end;
font-size: 1rem;
margin-top: .5rem;
}
.suture-head__info{
display:flex;
flex-wrap:wrap;
gap:1.25rem;
font-size:1rem;
}
.suture-head__info .info-item{
color:#2a59a8; /* 見本の青に近い */
}
.sutureBox {
display: flex;
gap: 16px;
align-items: stretch; /* ←高さをそろえる */
margin-top: 1rem;
}
/* 左の画像グループ */
.sutrebox_img {
flex: 0 0 13.5rem; /* 幅調整 */
display: flex;
flex-direction: column;
justify-content: space-between; /* 上下に画像を配置 */
gap: 1rem;
}
p.suture-note {
margin-top: 1rem;
}
/* 右のテーブルを全高に広げる */
.table-scroll {
flex: 1;
display: flex;
flex-direction: column;
}
.suture__table {
width: 100%;
height: 100%;
border-collapse: collapse;
}
/* 高さを強制的に揃える補助 */
.sutureBox__imgGroup,
.table-scroll {
height: 100%;
}
/* 表側：横並び時に縮まず、はみ出し対策 */
.table-scroll {
flex: 1 1 auto;
min-width: 0; /* flex子のオーバーフロー防止 */
overflow: auto;
}
/* テーブル幅の制御（max-width 820pxを確実に適用） */
.sutureBox table.suture__table {
width: 100%;
max-width: 820px;
table-layout: fixed;
/* もし以前のCSSで min-width が付いていたら打ち消す */
min-width: unset;
border-spacing: 0;
border: 1px solid #cfd9e2;
border-radius: 6px;
}
.sutureContentBox + .sutureContentBox{
margin-top:5rem;
}
figure.cassetteImg {
max-width: 600px;
margin: 20px auto 0;
}
table.pspec4__table {
width: 100%;
border-collapse: collapse;
white-space: nowrap;
}
.vomel-note {
margin-top: 1rem;
}
.xd-content-box+.xd-content-box{
margin-top:5rem;
}
.hd02 p+p {
margin-top:1rem;
}
.table-scroll+.table-scroll{
margin-top:2rem;
}
.xd-content-box .postContentTit {
margin-top: 1rem;
}
h3.LUNA-tit {
margin-bottom: 3rem;
}
.sasyfide_content {
margin-top: 1rem;
}
.kcsut-hx-h1-Link{
border: 6px solid #e0e0e0;
text-align: center;
}
.kcsut-hx-h1-Link img {
position: relative;
max-width: 650px;
}
.linkHd {
width: 12rem;
height: 3rem;
position: absolute;
content: "";
}
a.linkHd.link01 {
top: 18rem;
right: 7rem;
}
a.linkHd.link02 {
top: 27rem;
right: 12rem;
}
a.linkHd.link03 {
bottom: 8rem;
left: 12rem;
}
a.linkHd.link04 {
bottom: 8rem;
left: 32rem;
}
.mgt-30{
margin-top:3rem;
}
/* スマホ対応 */
@media (max-width: 991px) {
.sutureBox {
flex-direction: column;
gap: 1rem;
}
.sutureBox table.suture__table {
table-layout: auto;
}
.sutrebox_img {
width: 50%;width: 100%;
max-width: 250px;
margin: auto;
}
.table {
min-width: 700px;
}
.img-cell img {
width: 120px;
height: 80px;
}
.suture-head__title{font-size:1.25rem}
.title-note,.title-meta{font-size:.95rem}
.suture-head__desc{font-size:.9rem}
.mgt-30{
margin-top:1.5rem;
}
.kcsut-hx-h1-Link{
border: 4px solid #e0e0e0;
}
.sutureContentBox + .sutureContentBox{
margin-top:2rem;
}
.xd-content-box+.xd-content-box{
margin-top:3rem;
}
}
@media (min-width: 992px) {
.kcsut-table {
min-width:initial;
}
}