/*
Theme Name: CTJサイト用テーマ
Theme URL: https://care-tec.jp/family/
Description: テーマの説明
Author: CTJ
Version: ver1.0
Tags: テーマの特徴を表すタグ（カンマ区切り/オプション）
License: テーマのライセンス
License URI: テーマのライセンスのURI
*/


@charset "UTF-8";

/* Base */
html {
	overflow-x: hidden;
	font-size: 62.5% ;  /* 1rem = 10px */
	scroll-behavior: smooth;
}

body,div,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,table,th,td,img {
	margin:0;
	padding:0;}

body{
	font-family:
            "Hiragino Sans", "Noto Sans JP", "Yu Gothic", "Meiryo",  sans-serif;
	font-size:1.7rem ;
	letter-spacing:0 ;
	line-height:1.7 ;
	color:#333;
	width:100%;
}

/* 共通 */
img {
    border:none;
}
li {
    list-style:none;}

table {
    border-collapse:collapse;
    border-spacing:0;}

th {
    text-align:left;
    vertical-align:top;}
 

/*---------------------------------------
text_align
---------------------------------------*/
.alnL{
text-align:left;}

.alnC{
text-align: center;}

.alnR{
text-align: right;}


/*---------------------------------------
link
---------------------------------------*/
a:link{
color:#333;
text-decoration:none;}

a:visited{
color:#333;
text-decoration:none;}

a:hover{
color:#3d228f;
text-decoration:underline;}

div#contents a:hover{
color:#3d228f;
text-decoration:underline;}

a:active{
color:#333;
text-decoration:none;}



/*---------------------------------------
margin & padding
---------------------------------------*/
.mt0{margin-top:0 !important;}
.mt5{margin-top:0.5rem !important;}
.mt10{margin-top:1rem !important;}
.mt15{margin-top:1.5rem !important;}
.mt20{margin-top:2rem !important;}
.mt30{margin-top:3rem !important;}
.mt40{margin-top:4rem !important;}
.mt50{margin-top:5rem !important;}

.mb0{margin-bottom:0 !important;}
.mb5{margin-bottom:0.5rem !important;}
.mb10{margin-bottom:1rem !important;}
.mb15{margin-bottom:1.5rem !important;}
.mb20{margin-bottom:2rem !important;}
.mb30{margin-bottom:3rem !important;}
.mb40{margin-bottom:4rem !important;}
.mb50{margin-bottom:5rem !important;}
.mb60{margin-bottom:6rem !important;}
.mb70{margin-bottom:7rem !important;}
.mb80{margin-bottom:8rem !important;}
.mb90{margin-bottom:9rem !important;}
.mb100{margin-bottom:10rem !important;}

.ml0{margin-left:0 !important;}
.ml5{margin-left:0.5rem !important;}
.ml10{margin-left:1rem !important;}
.ml15{margin-left:1.5rem !important;}
.ml20{margin-left:2rem !important;}
.ml30{margin-left:3rem !important;}
.ml40{margin-left:4rem !important;}
.ml50{margin-left:5rem !important;}

.mr0{margin-right:0 !important;}
.mr5{margin-right:0.5rem !important;}
.mr10{margin-right:1rem !important;}
.mr15{margin-right:1.5rem !important;}
.mr20{margin-right:2rem !important;}
.mr30{margin-right:3rem !important;}
.mr40{margin-right:4rem !important;}
.mr50{margin-right:5rem !important;}

.pt0{padding-top:0 !important;}
.pt5{padding-top:0.5rem !important;}
.pt10{padding-top:1rem !important;}
.pt15{padding-top:1.5rem !important;}
.pt20{padding-top:2rem !important;}
.pt30{padding-top:3rem !important;}
.pt40{padding-top:4rem !important;}
.pt50{padding-top:5rem !important;}

.pb0{padding-bottom:0 !important;}
.pb5{padding-bottom:0.5rem !important;}
.pb10{padding-bottom:1rem !important;}
.pb15{padding-bottom:1.5rem !important;}
.pb20{padding-bottom:2rem !important;}
.pb30{padding-bottom:3rem !important;}
.pb40{padding-bottom:4rem !important;}
.pb50{padding-bottom:5rem !important;}

.pl0{padding-left:0 !important;}
.pl5{padding-left:0.5rem !important;}
.pl10{padding-left:1rem !important;}
.pl15{padding-left:1.5rem !important;}
.pl20{padding-left:2rem !important;}

.pr0{padding-right:0 !important;}
.pr5{padding-right:0.5rem !important;}
.pr10{padding-right:1rem !important;}
.pr15{padding-right:1.5rem !important;}
.pr20{padding-right:2rem !important;}



/*---------------------------------------
font color
---------------------------------------*/
.cl-rd {color: #e60012;}   /* Red */
.cl-ny {color: #1d2088;}   /* navy */
.cl-wh {color: #fff;}      /* white */
.cl-gr {color: #999;}      /* gray */



/*---------------------------------------
fontsize
---------------------------------------*/
.font-ss {font-size:70%;}
.font-s {font-size:90%;}
.font-l {font-size:120%;}


.bold {font-weight:700;}
.no_bold {font-weight:400;}



/*---------------------------------------
header
---------------------------------------*/
.top-menu {
  margin: 10px 0;
}
.top-menu-inner {
	align-items: center;
  justify-content: space-between;
  width: 100%;
	padding-right: 80px;
}
.top-logo img {
	width: 100%;
	height: auto;
  min-width: 8rem;
  max-width: 20rem; 
  text-decoration: none;
}
.top-list {
  	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
.top-list-menu {
	display: flex;
  	justify-content: space-between;
}

.t-list-item,
.t-list-item1,
.t-list-item2 {
  box-sizing: border-box;
  display: flex;
  margin: 0;
	padding: 1rem 2rem;
	white-space: nowrap;
	position: relative;
}
/* pull-down menu */
.t-list-item1 ul,
.t-list-item2 ul {
		position: absolute;
		width: 25rem;
		background: #fff;
		top: 5rem;
		left: 0rem;
		opacity: 0;
		visibility: hidden;
		transition: 0.5s;
	  z-index: 50;
		border-radius: 1rem;
		font-size: 90%;
		border: 1px solid #999;
    padding: 1rem;
}
.t-list-item1 ul::before,
.t-list-item2 ul::before {
		content: "";
		position: absolute;
		top: -8px; 
		left: 2rem;
		border-width: 0 8px 8px 8px; 
		border-style: solid;
		border-color: transparent transparent #fff transparent; /* 背景色（白） */
		z-index: 2; /* 枠線の影より前面にする */
}
.t-list-item1 ul::after,
.t-list-item2 ul::after {
		content: "";
		position: absolute;
		top: -9px; 
		left: 2rem; 
		border-width: 0 8px 8px 8px;
		border-style: solid;
		border-color: transparent transparent #999 transparent; 
		z-index: 1;
}

.t-list-item1 ul a,
.t-list-item2 ul a {
		padding: 0.5rem 1rem;
		display: block;
}
.t-list-item1 ul a:hover,
.t-list-item2 ul a:hover {
		background: #e8edf7;
		border-radius: 1rem;
}
.t-list-item1:hover ul,
.t-list-item2:hover ul {
  opacity: 1;
  visibility: visible;
}

.t-list-item1:hover,
.t-list-item2:hover {
}

.s-area {
	padding-bottom: 3rem;
}
.top-search {
	flex-shrink: 1; 
    margin-left: 1rem;
}
/* ヘッダのお問い合わせボタン非表示にしたため未使用 
.top-mail {
  	display: flex;
  	width: 60px;
  	height: 60px;
  	background-color: #78c0ef;
  	border-radius: 20%;
  	text-align: center;
  	justify-content: center;
  	align-items: center;
		margin-left: 2rem;
		flex-shrink: 0;
}
.top-mail a {
		display: flex;         /* aタグをFlexboxにする
    justify-content: center; /* 左右中央
    align-items: center;     /* 上下中央
    width: 100%;           /* 親(.top-mail)と同じ幅にする
    height: 100%;
}
.top-mail img {
  	width: 50%;
  	height: auto;
  	text-decoration: none;
}
*/

/**************************
/*ハンバーガーボタン     */
/**************************/
/*チェックボックスは非表示　*/
.menu-toggle {
  	display: none;
}
/* ハンバーガーボタン表示 */
.top-ham {
  	position: fixed;
		top: 1rem;
		right: 1.5rem;
  	z-index: 999;
}
/* ログイン時（WordPress管理バーがある時）の追従位置調整 */
.admin-bar .top-ham {
  top: calc(1rem + 32px); /* 管理バーの高さ(32px)分だけ下にずらす */
}
.hamburger {
  	cursor: pointer;
  	display: flex;
		flex-direction: column; 
  	width: 60px;
  	height: 60px;
  	background-color: #1d2088;
  	border-radius: 20%;
  	text-align: center;
  	justify-content: center;
  	align-items: center;
		padding-top: 0.4rem;
		gap: 0.5rem;
  	z-index: 105;
}
.hamburger span {
	  display: block;
  	width: 3rem;    
  	height: 0.3rem;
  	background: #fff;
  	transition: 0.3s;
}
.hamburger::after {
    content: "MENU"; 
    font-size: 12px;
		color: #fff;
}
.hamburger:hover {
		background-color: #4e51bb;
}
#menutoggle:checked + .hamburger span:nth-of-type(1) {
    	transform: translateY(0.4rem) rotate(30deg);
}
#menutoggle:checked + .hamburger span:nth-of-type(2) {
    	transform: translateY(-0.4rem) rotate(-30deg);
}
#menutoggle:checked + .hamburger::after {
    	content: "close"; 
}


/*  検索窓デザイン  (class:top-search)*/
.gentle-search-in {
  position: relative;
  width: 25rem;
	display: flex;
  align-items: center;
}
.gentle-search-in .search-field {
  width: 100%;
  padding: 1rem 4.2rem 1rem 1.6rem;
  border: 1px solid #dcdcdc;
  border-radius: 999px;
  font-size: 1.6rem;
  outline: none;
  background: #fff;
  box-sizing: border-box;
}
.gentle-search-in .search-submit {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  appearance: none;
    -webkit-appearance: none;
  cursor: pointer;
  width: 20px;   /* アイコンの幅に合わせて調整 */
  height: 20px;  /* アイコンの高さに合わせて調整 */
  display: flex;
  align-items: center;
  justify-content: center; 
  line-height: 1;
}
.gentle-search-in .search-submit img {
  width: 100%;
  height: auto;
  display: block;
}
.gentle-search-in .search-submit:hover {
  opacity: 0.7;
}

/* 検索結果デザイン */
.s-meta {
  border: 1px solid #999;
  border-radius: 0.5rem;
  padding: 1rem;
  margin: 0 2rem 5rem;
}

/* 全画面メニュー（最初は非表示）*/
.op-menu {
  	position: fixed;
  	top: 0;
    left: 0;
    width: 100vw;
    height: 100dvh;
  	background-color: #e2f2fa;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch; /* スマホでの操作感をスムーズに */
	padding: 8rem 2rem 4rem;
	visibility: hidden;
    transform: translateX(200%);
  	transition: 0.5s;
  	z-index: 100;
}
.top-ham:has(.menu-toggle:checked) + .op-menu {
    transform: translateX(0%);
  	visibility: visible;
  	transition: 0.5s;
}
.op-menu .item,
.op-menu li,
#sitemap .item,
#sitemap li {
  position: relative;
  padding-left: 1.2em;
  margin: 0 0 1rem;
}
.op-menu li,
#sitemap li {
  margin-left: 2rem;
}
.op-menu .item::before,
.op-menu li::before,
#sitemap .item::before,
#sitemap li::before {
  content: '';
  position: absolute;
  left: 0.2em;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #3d44b8;
  border-right: 2px solid #3d44b8;
  transform: translateY(-50%) rotate(45deg); /* 中央寄せ ＋ 45度回転 */
}


/*---------------------------------------
footer
---------------------------------------*/
.re-botan {
  margin-top: 5rem;
}
.back-to-top {
  /* ボタン */
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5rem;
  height: 5rem;
  background-color: #3498db;
  border-radius: 50%;
  text-decoration: none;
	margin: 0 auto;
  transition: opacity 0.3s;
}

/* 中央の矢印 */
.back-to-top::after {
  content: "";
  width: 1.2rem;
  height: 1.2rem;
  border-top: 0.3rem solid #fff;
  border-left: 0.3rem solid #fff;
  transform: rotate(45deg); /* 45度回転させて「^」にする */
  margin-top: 0.6rem;          /* 位置の微調整 */
}

/* ホバー時の演出 */
.back-to-top:hover {
  background-color: #78c0ef;
  opacity: 0.8;
}

.footer-area {
  background-color: #78c0ef;
	position: relative;
  margin-top: 153px;
}
.footer-area::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 0;
  width: 100%;
  height: 30px;      /* 画像の高さ */
  background-image: url("img/footer03.png");
  background-repeat: repeat-x;
  background-position: center;  /* 中央寄せ */
  z-index: 2;
}
.footer-area::after {
  content: "";
  position: absolute;
  top: -153px;
  left: 0;
  width: 100%;
  height: 153px;      /* 画像の高さ*/
  background-image: url("img/footer02.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.footer-area a {
  color: #fff;
}
.footer-area a:hover {
text-decoration:underline;
}


/*---------------------------------------
top-page
---------------------------------------*/
/* top-img（スライダー） */
#top-img {
	position: relative;
	padding-bottom: 33%; /* アスペクト比 2000:580+80(ボタン表示分)の場合の縦幅 PC用画像 */
	height: 0;
	overflow: hidden;
}
.slider {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.sl-out {
	position: relative;
}
.sl-out input {
	display: none;
}
.sl-item {
	display: flex;
	justify-content: center;
}

/* --- ボタン（dots）のスタイル --- */
.sl-item label span {
	display: block;
	width: 10px;
	height: 10px;
	margin: 30px 10px;
	border-radius: 100%;
	cursor: pointer;
	position: relative;
	z-index: 2;
}
.sl-item label span::before {
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background: #8e8f99;
	opacity: 0.5;
	animation: slidebutton 22s infinite;
}

.sl-out input:nth-of-type(1):checked ~ .sl-item label:nth-of-type(1) span::before,
.sl-out input:nth-of-type(2):checked ~ .sl-item label:nth-of-type(2) span::before,
.sl-out input:nth-of-type(3):checked ~ .sl-item label:nth-of-type(3) span::before,
.sl-out input:nth-of-type(4):checked ~ .sl-item label:nth-of-type(4) span::before {
	background: #1d2088;
	opacity: 1;
}

/* --- 画像・pictureタグのスタイル --- */
.sl-out picture img {
	display: block;
	width: 100%;
	height: auto;
}

/* アニメーション本体を picture タグに指定 */
.sl-item picture {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	opacity: 0;
	transition: .5s;
	z-index: 0;
	animation: slide 22s infinite;
}

/* 中のimgタグは位置・アニメーションをリセット */
.sl-item picture img {
	position: static;
	opacity: 1;
	animation: none;
}

/* --- アニメーションディレイ (2-4枚目) --- */
.sl-item label:nth-of-type(2) span::before,
.sl-item label:nth-of-type(2) picture {
	animation-delay: 5.5s;
}
.sl-item label:nth-of-type(3) span::before,
.sl-item label:nth-of-type(3) picture {
	animation-delay: 11s;
}
.sl-item label:nth-of-type(4) span::before,
.sl-item label:nth-of-type(4) picture {
	animation-delay: 16.5s;
}

/* --- 手動チェック時の表示切り替え --- */
.sl-out input:nth-of-type(1):checked ~ .sl-item label:nth-of-type(1) picture,
.sl-out input:nth-of-type(2):checked ~ .sl-item label:nth-of-type(2) picture,
.sl-out input:nth-of-type(3):checked ~ .sl-item label:nth-of-type(3) picture,
.sl-out input:nth-of-type(4):checked ~ .sl-item label:nth-of-type(4) picture {
	opacity: 1;
	z-index: 1;
}

/* 手動操作時・ホバー時のアニメーション制御 */
.sl-out input:checked ~ .sl-item picture,
.sl-out input:checked ~ .sl-item span::before {
	animation: none;
}
.sl-item:hover picture,
.sl-item:hover span::before {
	animation-play-state: paused;
}

/* --- キーフレーム設定 --- */
@keyframes slidebutton {
	0% { opacity: 0.5; background: #8e8f99; }
	2.27% { opacity: 1; background: #1d2088; }
	25% { opacity: 1; background: #1d2088; }
	27.27% { opacity: 0.5; background: #8e8f99; }
}

@keyframes slide {
	0% { opacity: 0; z-index: 0; }
	2.27% { opacity: 1; z-index: 1; }
	25% { opacity: 1; }
	27.27% { opacity: 0; z-index: 0; }
}

/* --- スマホ用レスポンシブ設定 --- */
@media (max-width: 767px) {
	#top-img {
		/* 1000:580 + ボタン表示分80px の縦横比 */
		padding-bottom: 66%; 
	}
}


/* top all（共通）　*/
section {
	padding-top: 8rem;
}
#toppage h2,
#company h2 /*企業情報ページ */ {
	font-size: 120%;
	margin-bottom: 3rem;
	text-align: center;
	line-height: 1.5;
}
#toppage h2::after,
#company h2::after  {
  content: "";
  width: 5rem;
  display: block;
  border-bottom: 2px solid #e60012;
  margin: 1rem auto;
}

/*-- 紺丸リンクアイコン --*/
#top-product .pro-title,
#top-shop li>span,
#top-company .com-box span,
#pro-shop li>span {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-right: 3rem;
	text-decoration: none;
}
#top-product .pro-title:before,
#top-shop li>span:before,
#top-company .com-box span:before,
#pro-shop li>span:before {
	content: "";
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2rem;
	background-color: #1d2088;
	border-radius: 50%;
	transition: opacity 0.3s;
}
#top-product .pro-title:after,
#top-shop li>span:after,
#top-company .com-box span:after,
#pro-shop li>span:after {
	content: "";
	position: absolute;
	right: 7px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	transform: translateY(-50%) rotate(135deg);
}
#top-product .pro-title:hover:before,
#top-shop li>span:hover:before,
#top-company .com-box span:hover:before,
#pro-shop li>span:hover:before {
    opacity: 0.7;
}
/*------- ここまで(紺丸リンクアイコン) --------*/

/* top product（製品紹介）　*/
#top-product .pro-img img {
	width: 98%;
	height: auto;
}
#top-product .pro-text-l, #top-product .pro-text-r {
	position: relative;
  z-index: 20;
	width: 50%;
	margin-top: -5rem;
	padding: 2rem;
	background-color: rgba(217, 215, 215, 0.7);
}
#top-product .pro-text-l {
	margin-left: 2rem;

}#top-product .pro-text-r {
	margin-left: 50%;
}

#top-product .pro-title {
	font-size: 120%;
	font-weight: 700;
}


/* top support（お客様サポート）*/
#top-support .top-sup-bt {
	width: 100%;
	display: flex;
}
#top-support .top-sup-bt li{
	flex: 1;
  background: #f0f0f1;
}
#top-support .top-sup-bt li:first-child {
	border-radius: 10px 0 0 10px;
}
#top-support .top-sup-bt li:last-child {
	border-radius: 0 10px 10px 0;
}
#top-support .top-sup-bt .en {
	font-size: 90%;
	margin-top: -0.3rem;
	margin-right: 2rem;
	letter-spacing: 0.1em;
}
#top-support input[type="radio"] {
  display: none;
}
#top-support .top-sup-bt li label {
	position: relative;
  display: flex;
	width: 100%;
	align-items: center;
	justify-content: center;
	padding: 2rem 0;
  background: #f0f0f1;
  cursor: pointer;
  transition: 0.3s;
}
#top-support .top-sup-bt li:first-child label {
	border-radius: 10px 0 0 10px;
}
#top-support .top-sup-bt li:last-child label {
	border-radius: 0 10px 10px 0;
}
.top-sup-bt label::after {
  content: "";
  position: absolute;
  bottom: -10px; /* ボタンの下端から少し出す */
  left: 50%;
  transform: translateX(-50%);
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid currentColor; /* 文字色と同じ色にする */
  display: none; /* 通常は隠す */
}
.sup-content > div {
  display: none; /* 最初は全部隠す */
  margin-top: 20px;
  text-align: center;
  animation: fadeIn 0.5s; /* ふわっと出す演出（任意） */
}

/* 1番目アクティブ */
#sup1:checked ~ .top-sup-bt li:first-child label {
  background: #bacaef;
}
#sup1:checked ~ .top-sup-bt li:first-child label::after {
  display: block;
  border-top-color: #bacaef;
}
/*
#sup1:checked ~ .top-sup-bt li:last-child label {
  background: #f0f0f1; /* 1番目が選ばれた時の2番目の色 
}
#sup1:checked ~ .top-sup-bt li:last-child label::after {
  display: none;
}*/
#sup1:checked ~ .sup-content .sup-s {
  display: block;
}

/* 2番目アクティブ */
#sup2:checked ~ .top-sup-bt li:last-child label {
  background: #bacaef;
}
#sup2:checked ~ .top-sup-bt li:last-child label::after {
  display: block;
  border-top-color: #bacaef; /* ボタンの背景色に合わせる */
}
/*
#sup2:checked ~ .top-sup-bt li:first-child label {
  background: #f0f0f1; /* 2番目が選ばれた時の1番目の色
}
#sup2:checked ~ .top-sup-bt li:first-child label::after {
  display: none;
} */
#sup2:checked ~ .sup-content .sup-u {
  display: block;
}
#top-support .sup-content {
	padding-top: 3rem;
}

/* お客様サポートページでも使用（#w-support) */
#top-support .sup-content img {
	width: 100%;
	height: auto;
}
#top-support .sup-title,
#w-support .sup-title,
#m-care .sup-title {
	background-color: #e8edf7;
	padding: 0.5rem;
	margin-bottom: 1rem;
    text-align: center;
}
#top-support .sup-bk,
#w-support .sup-bk {
	background-color: #e2f2fa;
	font-size: 120%;
	padding: 5rem 0;
}
#top-support .sup-text1-bk,
#w-support .sup-text1-bk {
	background-color: #b5e3fa;
	padding: 2.5rem 0;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	border-radius: 10px;
}
#top-support .sup-text1-bk a,
#w-support .sup-text1-bk a {
	text-decoration: none;
}
#top-support .sup-bk img,
#w-support .sup-bk img {
	height: 8rem;
}
#top-support .sup-bk ul,
#w-support .sup-bk ul {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin: 0 auto;
}
#top-support .sup-bk ul li,
#w-support .sup-bk ul li {
	display:flex;
	padding: 0 1rem;
}
#top-support .sup-text2-bk,
#w-support .sup-text2-bk  {
	background-color: #fff;
	padding: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2rem;
	border-radius: 10px;
}
#top-support .men-botan {
	color: #fff;
	padding: 0.5rem 1rem;
	background-color: #1d2088;
	border-radius: 50px;
}
#top-contact .contact-bk {
	background-image: url('img/top/con-bk.jpg');
  background-size: cover;
  background-position: top center;
	position: relative;
	height: 50rem;
	z-index; 10;
}
#top-contact .con-box {
	position: absolute;
	top: 8rem;
	left: 10rem;
	width: 40%;
	height: 20rem;
	padding: 3rem;
	background-color: rgba(255, 255, 255, 0.6);
}
#top-contact .con-botan {
	position: absolute;
	top: 30rem;
	left: 10rem;
	width: 40%;
	margin-top: 1rem;
	color: #fff;
	text-align: center;
	padding: 0.5rem 1rem;
	background-color: #1d2088;
	border-radius: 10px;
}


/* top shop（正規販売店）*/
#top-shop img {
	height: 10rem;
	width: auto;
}
#top-shop ul {
    display: inline-block;
    text-align: center;
}
#top-shop .shop-botan {
	max-width: 70rem;
	margin: 0 auto;
}


/* top company（企業情報）*/
#top-company .company-bk {
  position: relative;
  width: 100%;
}

/* 画像を枠いっぱいに広げてレスポンシブ化（上下は絶対に切れない） */
#top-company .com-img-wrap {
  width: 100%;
}
#top-company .com-img {
  width: 100%;
  height: auto; /* アスペクト比を維持して上下を切らない */
  display: block;
}
#top-company .com-box-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 上下中央寄せ */
    display: flex;
    align-items: center; 
  }

  #top-company .com-box {
		width: 55%;
    margin-left: 5%; /* 左からの位置指定 */
    padding: 3rem;
    background-color: rgba(255, 255, 255, 0.85);
    box-sizing: border-box;
  }

/*----------------------------*/
/*  NEWS（お知らせ）          */
/*----------------------------*/

#top-news {
 /*	
	max-width: 100rem;
	margin: 0 auto;
	*/
}
/* top-page(news)でも使用 */
.news1  {
	margin: 0 0.2rem;
	padding: 1.3rem 2rem;
	border-bottom: 1px solid #999;
}
.news1:first-of-type {
	border-top: 1px solid #999;
}
.cate {
	padding: 0 4rem 0 0;
}
.cate-label {
	text-align: center;
	color: #fff;
	padding: 0.5rem 2rem;
	border-radius: 0.5rem;
}
.cate-notice {
	background-color: #78c0ef;
}
.cate-product_info {
	background-color: #78a2ef;
}
.news-more {
	background-color: #1d2088;
	border-radius: 0.5rem;
	display: inline-block;
	padding: 0.3rem 3rem;
}

/* NEWS pagination */
.pagination{
    clear:both;
    padding:20px 0;
    font-size:14px;
    line-height:14px;
    text-align:center;
}
.pagination-box{
    display:inline-block;
}
.pagination span, .pagination a{
    display:block;
    float:left;
    margin:2px 2px 2px 0;
    padding:10px 15px 10px 15px;
    text-decoration:none;
    width:auto;
    color:#666666;
    background:#f0f0f3;
}
.pagination a:hover{
    color:#ff8227;
    background:#f0f0f3;
}
.pagination .current{
    padding:10px 15px 10px 15px;
    color:#f0f0f3;
    background:#666666;
}

/* NEWS 1件表示 */
.news-txt p {
    margin-bottom: 2rem;	
}



/*------------------------------------------------------*/
/* news（お知らせ）                                     */ 
/* products（製品情報）& w-spec（仕様一覧）&            */
/*    w-movie（動画一覧）& w-support（サポートページ）  */
/*------------------------------------------------------*/
#products .title {
}
#products h1,
#w-spec h1,
#w-movie h1,
#w-manual h1,
.sup-m h1 {
  font-size: 3rem;
  font-weight: 400;
}
#products h1 span,
#w-spec h1 span,
#w-movie h1 span,
#w-manual h1 span,
.sup-m h1 span {
  color: #e60012;
  font-size: 80%;
}
#news-s h1,
#products h2,
#w-spec h2,
#w-movie h2,
#w-manual h2,
#w-support h2,
#contact h2,
.sup h2,
.sup-m h2 {
  font-weight: 400;
	text-align: left;
	margin-bottom: 3rem;
  border-bottom: 2px solid #e6e3e3;
  position: relative;
}
#news-s h1::after,
#products h2::after,
#w-spec h2::after,
#w-movie h2::after,
#w-manual h2::after,
#w-support h2::after,
#contact h2::after,
.sup h2::after,
.sup-m h2::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 8rem; 
    height: 2px;
    background-color: #e60012;
}
#products .sub-text,
#w-movie .sub-text,
#w-manual .sub-text,
.sup-m .sub-text {
	margin-bottom: 2rem;
}
#products .pro-series {
	margin-bottom: 5rem;
}
#products .p-box {
  border: 1px solid #999;
  border-radius: 1rem;
  text-align: center;
	margin-bottom: 2rem;
}
#products .p-img {
	padding: 1rem;
}

#products .p-img img {
	width: 100%;
	height: auto;
}
#products .bk-ny {
  background: #1d2088;
	color: #fff;
}
#products .bk-gr {
  background: #f3f3f3;
	color: #333;
	border-radius: 1rem;
	padding-bottom: 1rem;	
}
#products .type-j, #products .type-k,
#products .type-h, #products .type-c {
	border-radius: 50px;
	color: #fff;
	padding: 0 3rem;
  display: inline-block;
	text-decoration: none;
}
#products .type-j {
  background: #4fb5f9;
}
#products .type-k {
  background: #fabd05;
}
#products .type-h {
  background: #aa6f3c;
}
#products .type-c {
  background: #219805;
}




/*----------------------------*/
/*  products item（商品）     */
/*----------------------------*/
.pro-item .top {
	position: relative;
	height: 65rem;
	overflow: hidden;
 	background-repeat: no-repeat;
  background-position: top right;
	background-size: cover;
}
.pro-item .top-text1 {
	position: absolute;
	top: 10rem;
	left: 10rem;
	font-family: "Noto Serif JP", "Yu Mincho", "MS PMincho", serif;
  color: #333;
	font-size: 3vw;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* 文字をより滑らかに（Mac/iOS向け） */
	z-index:10;
}
.pro-item h1 {
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
	font-size: 2.5vw;
  font-weight: 500;
}
.pro-item .item-caption {
  font-weight: 400;
	font-size: 2.3vw;
  letter-spacing: 0.12em;
  display: block;
  margin-top: 2rem;
}
.pro-item .item-caption br {
	display: none;
}
.pro-item h2 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-size: 3rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	-webkit-font-smoothing: antialiased; /* 文字をより滑らかに（Mac/iOS向け） */
  text-align: center;
  margin-bottom: 2rem;
}
.pro-item h2::after {
	border-bottom: none;
}
.pro-item .fea {
	background-color: #dfdee2;
	padding: 5rem 0 ;
}
.pro-item .fea .col-md-3,
.pro-item .fea .col-md-4 {
	display: flex;
	flex-direction: column;
}
.pro-item .fea img {
	width: 100%;
	height: auto;
	display: flex;
	border-radius: 10px 10px 0 0;
}
.pro-item .fea-con {
	flex: 1;
	display: flex;
	flex-direction: column;
	background-color: #fff;
	padding: 1.5rem 1.5rem 3rem;
	border-radius: 0 0 10px 10px;
}
.pro-item .fea-con h3 {
	font-size: 100%;
	font-weight: 500;
	color: #065fd4;
	border-bottom: 2px solid #78a2ef;
	margin-left: -0.5rem;
	padding-left: 0.5rem;
}
.pro-item .fea-con p {
	font-size: 90%;
	flex-grow: 1;
}
.pro-item .mov {
	width: 80%;
	border: 1px solid #999;
  margin: 0 auto;
}
.pro-item iframe {
  width: 100%;
	aspect-ratio: 560 / 315;
  height: auto;
}
.pro-item .color-va h2 .cl-c {
 color: #031363;
}
.pro-item .color-va h2 .cl-o {
 color: #fc8383;
}
.pro-item .color-va h2 .cl-l {
 color: #4f7ff9;
}
.pro-item .color-va h2 .cl-o2 {
 color: #faa552;
}
.pro-item .color-va h2 .cl-r {
 color: #ab1e3d;
}
/*
/* ラジオボタン本体は物理的に画面外へ飛ばす（display:noneより安全） */
input[type="radio"].cl-input {
	position: fixed;   /* 画面のレイアウトから完全に切り離す */
  top: -100px;       /* 画面の外へ */
  width: 0;
  height: 0;
  opacity: 0;
  pointer-events: none;
}
 /* 外枠（窓） */
.pro-item .cl-window {
	width: 90%;
	/*  aspect-ratio: 16 / 9;  */
	overflow: hidden;
	display: flex;
	align-items: center;
	position: relative;
	margin: 0 auto;
}
/* 横に並ぶコンテナ */
.pro-item .cl-inner {
	display: flex;
	width: 100%;
	align-items: center;
	/* 中央に持ってくるための初期位置 */
	transform: translateX(200px);
  /* 0.6秒かけて動きをなめらかに */
	transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
/* 各画像カード */
.pro-item .cl-card {
	flex: 0 0 33.333%; /* 常に親の1/3の幅をキープ */
	display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s ease;
  opacity: 0.6;
  transform: scale(0.9);
}
.pro-item .cl-card .cl-box {
	width: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.pro-item .cl-card .cl-box img {
	width: 100%;
	height: auto;
}
/* 2色の場合の左空白（スマイル） */
.pro-item .c0 {
	width: 16.6665%;
}
/* ボタンエリア */
.pro-item .cl-controls {
	margin-top: 5rem;
	display: flex;
	justify-content: center;
    align-items: center;
	gap: 2rem;
}
/* ボタン（ラベル）の見た目 - 確実に表示されるようにスタイルを強化 */
.pro-item .cl-controls label {
	width: 10rem;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	cursor: pointer;
	border-radius: 10px;
	transition: all 0.2s;
}
.pro-item .cl-controls .clv-bl {
	background: #2D5FC7;
}
.pro-item .cl-controls .clv-og {
	background: #FE7B34;
}
.pro-item .cl-controls .clv-wi {
	background: #a52e44;
}
.pro-item .cl-controls .clv-br {
	background: #674034;
}
.pro-item .cl-controls .clv-ny {
	background: #334863;
}
.pro-item .cl-controls .clv-rd {
	background: #F43F35;
}
.pro-item .cl-controls .clv-gy {
	background: #747572;
}
.pro-item .cl-controls .clv-lg {
	background: #62c110;
}
.pro-item .cl-controls .clv-cbu {
	background: #409ade;
}
.pro-item .cl-controls .clv-gic {
	background: #3b5789;
}
.pro-item .cl-controls .clv-tac {
	background: #d62d26;
}
.pro-item .cl-controls .clv-bk {
	background: #333;
}
.pro-item .cl-controls .clv-stc {
	background: #6a798b;
}
.pro-item .cl-controls .clv-crd {
	background: #d62d26;
}
.pro-item .cl-controls label:hover {
  opacity: 0.6;
}
/* --- 切り替えのロジック --- */
/* 中央へ移動させる計算 */
#cl-nav1:checked ~ .cl-window .cl-inner { transform: translateX(0px); }
#cl-nav2:checked ~ .cl-window .cl-inner { transform: translateX(0px); }
#cl-nav3:checked ~ .cl-window .cl-inner { transform: translateX(-33.333%); }
#cl-nav4:checked ~ .cl-window .cl-inner { transform: translateX(-66.666%); }
#cl-nav5:checked ~ .cl-window .cl-inner { transform: translateX(-100%); }
#cl-nav6:checked ~ .cl-window .cl-inner { transform: translateX(-133.333%); }
#cl-nav7:checked ~ .cl-window .cl-inner { transform: translateX(-166.666%); }
#cl-nav8:checked ~ .cl-window .cl-inner { transform: translateX(-200%); }

/* 選択中のカードを強調 */
#cl-nav1:checked ~ .cl-window .c1,
#cl-nav2:checked ~ .cl-window .c2,
#cl-nav3:checked ~ .cl-window .c3,
#cl-nav4:checked ~ .cl-window .c4,
#cl-nav5:checked ~ .cl-window .c5,
#cl-nav6:checked ~ .cl-window .c6,
#cl-nav7:checked ~ .cl-window .c7,
#cl-nav8:checked ~ .cl-window .c8 {
	opacity: 1;
	transform: scale(1.0);
}
/* 選択中のボタン */
#cl-nav1:checked ~ .cl-controls label[for="cl-nav1"],
#cl-nav2:checked ~ .cl-controls label[for="cl-nav2"],
#cl-nav3:checked ~ .cl-controls label[for="cl-nav3"],
#cl-nav4:checked ~ .cl-controls label[for="cl-nav4"],
#cl-nav5:checked ~ .cl-controls label[for="cl-nav5"],
#cl-nav6:checked ~ .cl-controls label[for="cl-nav6"],
#cl-nav7:checked ~ .cl-controls label[for="cl-nav7"],
#cl-nav8:checked ~ .cl-controls label[for="cl-nav8"] {
  font-weight: 700;
	transform: scale(1.1);
}

.pro-item .option img {
	width: 90%;
	height: auto;
}
.pro-item .op-text {
	background: #dfdee2;
	padding: 2rem;
	text-align: left;
	border-radius: 10px;
	margin-bottom: 2rem;
}
.pro-item .op-img {
	display: flex;
	justify-content: center;
	align-items: center;
}

.pro-item .spec img,
.pro-item .spec-c img {
	width: 90%;
	height: auto;
}
.pro-item .spec table,
.pro-item .spec-c table {
	width: 100%;
	text-align: left;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
}
.pro-item .spec table th,
.pro-item .spec-c table th {
	width: 20%;
	background: #f0f0f3;
	font-weight: 400;
}
.pro-item .spec table td {
	width: 30%;
}
.pro-item .spec-c table td {
	width: 80%;
}
.pro-item .spec table th, 
.pro-item .spec table td,
.pro-item .spec-c table th, 
.pro-item .spec-c table td {
	padding: 0.5rem 1rem;
	border-right: 1px solid #999;
	border-bottom: 1px solid #999;
}
.pro-item .spec .tbl-title,
.pro-item .spec-c .tbl-title {
	border-top: 4px double #cfcfcf;
	border-bottom: 4px double #cfcfcf;
	background: #f0f0f3;
}
.pro-item .spec ul {
	display: flex;
	flex-wrap: wrap;    /* 入りきらない場合に折り返す */
	gap: 15px 10px;     /* 縦の間隔 10px、横の間隔 10px（お好みで調整） */
	padding: 0;
	font-size: 70%;
	justify-content: flex-start; /* 左寄せ（中央寄せなら center） */
}
.pro-item .spec ul li {
	width: 100px;         /* 画像のサイズに合わせる */
	text-align: center;  /* テキストを中央に */
	line-height: 1.4;    /* 行間を少し広げると読みやすい */
}
.pro-item .spec ul li img {
	display: block;      /* 下の隙間を消す */
	margin-bottom: 5px;  /* 画像と文字の間隔 */
}


/* page-pro.php（商品ページ下 正規販売店）*/
#pro-shop {
	background: #eef1fa;
	padding: 2rem 1rem 5rem;
	margin-bottom: 8rem;
}
#pro-shop .s-link {
	display: inline-block;
	text-align: left;
}
#pro-shop .s-link span {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-left: 3rem;
	text-decoration: none;
}
#pro-shop .s-link span:before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	justify-content: center;
	align-items: center;
	width: 2rem;
	height: 2rem;
	background-color: #1d2088;
	border-radius: 5px;
	transition: opacity 0.3s;
}
#pro-shop .s-link span:after {
	content: "";
	position: absolute;
	left: 4.5px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 3px solid #fff;
	border-left: 3px solid #fff;
	transform: translateY(-50%) rotate(135deg);
}
#pro-shop .s-link span:hover:before {
    opacity: 0.7;
}





/*------------------------------------*/
/*  support（お客様サポート）         */
/*------------------------------------*/
.sup section {
  padding: 0 0 8rem;
}
.sup .page-top {
  background-color: #f4f1f9;
  height: 40rem;
}
.sup .p-top-l {
  max-height: 40rem;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
}
.sup .p-top-l img {
  width: auto;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  max-height: 40rem;
}
.sup .p-top-r {
  padding: 5rem;
}
.sup h1{
  font-size: 2.5rem;
  font-weight: 400;
  margin-bottom: 3rem;
}
.sup h1 span {
  color: #e60012;
  font-size: 80%;
}
.sup .p-top-box {
  display: flex;
  align-items: center;
  min-height: 200px;
  position: relative;
  flex-wrap: wrap;
  z-index: 0;
}
.sup .p-top-box::before {
  content: "";
  position: absolute;
  top: 1rem;
  right: 3rem;
  bottom: 1rem;
  left: 3rem;
  border-top: 1px solid #999;
  border-bottom: 1px solid #999;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: -1;
}
.sup .p-top-box::after {
  content: "";
  position: absolute;
  top: -1rem;
  right: 5rem;
  bottom: -1rem;
  left: 5rem;
  border-right: 1px solid #999;
  border-left: 1px solid #999;
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
  z-index: -1;
}
.sup .p-top-text {
  padding: 3rem 8rem;
}
/*
.sup h2 {
  font-size: 2.5rem;
  font-weight: 400;
  text-align: center;
  margin-bottom: 3rem;
}
*/
.sup h3 {
  display: inline-block;
  font-size: 2.3rem;
  font-weight: 400;
  color:#3d44b8;
  line-height:1.5;
  padding: 1rem 0;
  border-left: 3px solid #3d44b8;
  padding: 0 1rem 0;
}
.sup h3 span {
  font-size: 1.7rem;
}
.sup .item-img img {
  width: 100%;
  height: auto;
}
.sup .item-text1, .item-text2 {
  padding: 3rem;
  background-color: #f0f5fa;
}
.sup .item-text1 {
    margin: 3rem 0 0 -3rem;
    border-radius: 0 0.5rem 0.5rem 0.5rem;
}
.sup .item-text2 {
    margin: 3rem -3rem 0 0;
    border-radius: 0.5rem 0 0.5rem 0.5rem;
}
.sup .item-botan,
.sup-m .item-botan {
  margin: 2rem auto;
  display: inline-block;
  padding: 1rem 2rem;
  background-color: #fff;
  color: #576a8e;
  border: 1px solid #576a8e;;
}
.sup .item-botan:hover,
.sup-m .item-botan:hover {
  background-color: #576a8e;
  color: #fff;
}
/* サイズ、利用前チェック、クッション */
.sup .bk-gy-text {
  background-color: #eef1fa;
  padding: 2rem;
  font-size: 110%;
  margin-bottom: 3rem;
}

/*  メンテナンス  */
.sup-m .ment-step {
  text-align: center;
  padding-right: 0;
}
.sup-m .ment-step img {
  width: 100%;
  height: auto;
}

.sup-m .step-no {
  color: #78a2ef;
  font-size: 5rem;
  font-weight: 700;
}
.sup-m .ment-text1 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 3rem;
}
.sup-m .ment-text1 span {
  text-decoration: underline wavy #78a2ef; 
  text-underline-offset: 0.3em;
}
.sup-m .ment-img {
  padding: 2rem;
  /*   padding: 8rem 2rem 0;  */
}
.sup-m .ment-img img {
  width: 100%;
  height: auto;
}
.sup-m .ment-text-bk {
  background-color: #eef1fa;
  padding: 2rem;
}
.sup-m .ment-link {
  display: inline-block;
  background-color: #78a2ef;
  color: #fff;
  padding: 0.5rem 2rem;
  border-radius: 50px;
  font-weight: 700;
  margin-bottom: 5rem;
}
.sup-m .ment-link:hover {
  background-color: #78c0ef;
}