@charset "utf-8";
/*
Theme Name: 草加商工会議所テーマ
Description: 草加商工会議所用のオリジナルテーマ
Author: Juri Suzuki
Version: 1.0
*/

.wpcf7 input,.wpcf7 textarea,.wpcf7 select
{
font-family: "NotoSansJP", sans-serif;
font-weight: 500;
}

.youtube-wrap {
  position: relative;
  width: 100%;
  max-width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}
.youtube-wrap iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

#post-content a {
word-wrap: break-word;
overflow-wrap: break-word;
}
.lightbox {
display: none; /* ← 初期は非表示 */
position: fixed;
inset: 0;
background: rgba(0,0,0,0.8);
justify-content: center;
align-items: center;
z-index: 1100;
}
/* 開いたときだけ flex で中央配置 */
.lightbox.is-open {
display: flex;
}
.lightbox img {
width: 90%;
max-width:800px;
height: auto;
box-shadow: 0 0 20px rgba(0,0,0,.5);
border-radius: 4px;
}
.close {
position: absolute;
bottom: 30px;
font-size: 40px;
color: #fff;
background: transparent;
border: 0;
cursor: pointer;
}
.results-frame{
background:var(--color-lgray);
padding:25px 15px;
text-align:center;
}
.results-flex{
gap:1rem;
margin-top:1.5rem;
flex-direction:column;
}
.results-flex div{
background:#fff;
flex:1;
padding:20px 15px;
}
a.results-btn{
display:block;
border-radius:var(--rounded-all);
padding:0.6rem;
font-weight:700;
max-width:280px;
margin-top:1rem
}
a.btn-border{
border:1px solid currentcolor;
background:#fff;
}
.results-flex div h3{
font-size:var(--font-lg);
margin-bottom:0.5rem;
}
.results-page-frame{
background:var(--color-lgray);
padding:25px;
text-align:center;
}
.results-page-frame a{
text-decoration:none!important;
width:100%;
max-width:280px;
}
.results-page-frame a.results-btn{
margin-top:0rem;
}
@media (min-width: 768px) {
.results-flex{
flex-direction:row;
}
}
@media (min-width: 992px) {
.results-frame{
padding:35px;
}
.results-flex{
gap:2rem;
}
.results-flex div{
padding:20px 20px;
}
}
.kentei-panel{
margin-top:20px;
}
.kentei-toggle{
all:unset;
cursor:pointer;
display:flex;
width:100%;
align-items:center;
justify-content: space-between;
}
.kentei-toggle .icon{
width: 1.3rem;
height: 1.3rem;
}
.kentei-accordion.active .icon::after {
transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
opacity: 0;
}
.kentei-accordion .heading-main{
margin-bottom:0;
}
.kentei-accordion:first-of-type .icon {
display: none;
}
@media (min-width: 768px) {
.kentei-panel{
border:1px solid #ccc;
padding:4%;
margin-top:40px;
}
}

/* 投稿部分 */
#post-content p{
line-height:1.7;
}
.post-kentei{
font-size: var(--font-sub);
}
#post-content p + p {
margin-top: 0.8em;
}
#post-content h3{
background:var(--color-lgreen);
font-size:var(--font-md);
padding: 0.3em 1em;
border-radius: 2px;
margin: 1.7rem 0 1rem;
}
#post-content ul,#post-content ol{
padding-left: 1.3rem;
margin:0.7rem 0;
text-align:justify;
}
#post-content ul{
list-style: initial;
}
#post-content ul li + li{
margin-top: 0.5em;
}
#post-content a{
text-decoration: underline;
}

#post-content .page-bg-link a{
text-decoration: none;
}

#post-content h4{
display: flex;
margin: 1.2rem 0 0.6rem;
font-size:var(--font-base);
}
#post-content h4::before {
content: "\25A0";
color: var(--color-green);
margin-right: 0.4em;
display: block;
}

#post-content table {
border-right:1px solid var(--border-color);
border-left:1px solid var(--border-color);
border-bottom:1px solid var(--border-color);
}
#post-content table + p{
margin-top:1rem;
}
#post-content th{
background:var(--color-lgray);
padding-top:0.7em;
padding-bottom:0.7em;
text-align:center;
width:25%;
}
#post-content th{
width:25%;
}
#post-content td{
padding:0.6em 1.5em;
}
@media (max-width: 991.98px) {
#post-content th,#post-content td{
display:block;
width:100%;
}
#post-content th{
padding:0.5em 1rem;
text-align:left;
}
#post-content td{
padding-left: 1rem;
padding-right: 1rem;
}
#post-content .tablestyle2 th,#post-content .tablestyle2 td{
width:100%;
}
}
#post-content th,#post-content  td{
border-top:1px solid var(--border-color);
}
#post-content .tablestyle2 td{
line-height:1.6;
padding-top:0.9em;
padding-bottom:0.9rem;
}
.page-link.disabled{
color:var(--color-gray);
text-decoration:none;
}

#post-content.single-content img{
max-width:700px;
width:100%;
height:auto;
margin:1.5rem auto;
display:block;
}
.pdfemb-viewer{
margin:1.5rem auto!important;
border:1px solid #ccc!important;
}
/* もっとも確実：埋め込み要素そのものを中央寄せ */
iframe.wp-embedded-content,
blockquote.wp-embedded-content {
display: block;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100%;
}
/* p に入れ子になったケースも拾う */
p > iframe.wp-embedded-content,
p > blockquote.wp-embedded-content {
display: block;
margin-left: auto !important;
margin-right: auto !important;
}
.link-type{
color:var(--color-gray);
font-size:var(--font-sub);
}
/* Safari向けフォントの描画調整 */
body {
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: 100%;
}
/* 基本の文字と背景 */
a[href^="tel:"],
a[x-apple-data-detectors] {
color: inherit !important;
text-decoration: none !important;
font-size: inherit !important;
}
html {
font-size: 17px;
scroll-behavior: smooth;
}
body {
font-family: "NotoSansJP", sans-serif;
font-size: 1rem;
color: var(--color-base);
background: var(--color-bg);
line-height: 1.5;
font-weight: 500;
}
a,
button {
text-decoration: none;
color: var(--color-navy);
transition: all 0.3s ease;
}
a img {
transition: all 0.3s ease;
}
a:hover {
color: var(--color-navy-hover);
}
a:hover img {
opacity: 0.8;
}
p {
line-height: 1.8;
}

.icon-img {
position: relative;
bottom: 0.1rem;
}
.img-fluid {
max-width: 100%;
height: auto;
}
hr {
border: none;
border-top: 1px solid var(--border-color);
}
ul.list-dot {
list-style: disc;
padding-left: 1.3rem;
}
ol {
padding-left: 1.5rem;
}
ul.list-dot li,
ol li {
line-height: 1.5;
}
ul.list-dot li + li,
ol li + li {
margin-top: 0.5em;
}

/* 幅 */
.container,
.container-lg {
width: 100%;
margin-inline: auto;
padding-inline: 1rem;
max-width: 500px;
}

#main-page-pd section {
padding-top: 50px;
}

#main-page-pd section:first-child {
padding-top: 0px;
}
#main-page-pd {
margin-top: 40px;
padding-bottom: 70px;
}

@media (min-width: 768px) {
.container,
.container-lg {
max-width: 720px;
}
#main-page-pd section {
padding-top: 80px;
}
#main-page-pd section:first-child {
padding-top: 0px;
}
#main-page-pd {
margin-top: 60px;
padding-bottom: 100px;
background: url(img/footer.svg) center bottom no-repeat;
background-size: contain;
}
}
@media (min-width: 992px) {
.container {
max-width: 934px;
}
.container-lg {
max-width: 1054px;
}
}

/* タイトルまわり */
.heading-main {
font-size: var(--font-xxl);
position: relative;
margin-bottom: 2rem;
padding-bottom: 0.9rem;
z-index: 0;
}
#post-content .heading-main{
font-size: var(--font-xl);
}
.heading-main::before,
.heading-main::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
height: 5px;
border-radius: 2px;
}
.heading-main::after {
width: 100%;
background-color: var(--color-lgreen);
z-index: 1;
}
.heading-main::before {
width: 20%;
background-color: var(--color-green);
z-index: 2;
}
.heading-sub {
background-color: var(--color-lgreen);
border-bottom: 2px solid var(--color-green);
border-radius: 3px 3px 0 0;
padding: 0.5em 1em;
margin-bottom: 1.1em;
font-size: var(--font-lg);
}
.heading-inner {
font-size: var(--font-xl);
margin-bottom: 1.5rem;
}
.heading-inner::after {
content: "";
height: 3px;
width: 100%;
background-color: var(--color-lgreen);
display: block;
border-radius: 2px;
margin-top: 0.4rem;
}
.point-title {
display: flex;
font-size: var(--font-lg);
}
.point-title::before {
content: "\25A0";
color: var(--color-green);
margin-right: 0.4em;
display: block;
}
#page-title {
background: var(--color-green);
color: var(--color-white);
width: 95%;
justify-content: center;
height: 130px;
display: flex;
align-items: center;
border-radius: 0 var(--rounded-base) var(--rounded-base) 0;
font-size: var(--font-3xl);
text-align: center;
}
@media (min-width: 576px) {
#page-title {
height: 160px;
}
}
@media (min-width: 768px) {
#page-title {
height: 200px;
}
}
.page-pd {
margin-top: 0.3rem;
}
.main-pd {
padding-top: 40px;
padding-bottom: 70px;
}
@media (min-width: 768px) {
.heading-main {
margin-bottom: 2.3rem;
padding-bottom: 1.3rem;
}
.main-pd {
padding-top: 60px;
padding-bottom: 100px;
}
}

/* ボタン */
.btn-square {
border-radius: var(--rounded-base);
height: 60px;
display: block;
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
.btn-round {
border-radius: var(--rounded-all);
border: 1px solid currentColor;
background-color: var(--color-white);
font-weight: 700;
padding: 0.8em 0.5em;
display: flex;
align-items: center;
justify-content: center;
}
footer .btn-round {
font-size: var(--font-sm);
max-width: 280px;
margin: 0;
}
.point-link {
display: flex;
align-items: center;
font-weight: 700;
color: var(--color-base);
}
.point-link::before {
content: "";
display: block;
background: url(icon/chevron-r.svg) center no-repeat var(--color-lgreen);
background-size: 0.3rem;
width: 1.3rem;
height: 1.3rem;
border-radius: var(--rounded-all);
margin-right: 0.7rem;
flex-shrink: 0;
}
.point-link:hover {
color: var(--color-base-hover);
}

/* TEL */
.tel .number {
font-weight: 700;
line-height: 1.3;
color: var(--color-dgreen);
font-size: 1.8rem;
}
header .tel .number {
font-size: 1.58rem;
line-height: 0.8;
}

.number::before {
content: "";
background: url("icon/phone.svg") no-repeat center;
width: 0.9em;
height: 0.9em;
background-size: 0.9em;
display: inline-block;
position: relative;
top: 0.1em;
left: -0.2em;
}
.tel span {
font-size: var(--font-sub);
}
header .tel span {
font-size: 0.8rem;
color: #777;
}
@media (min-width: 992px) {
header .tel .number {
font-size: 1.58rem;
}
}
/* 576px超〜992px未満 */
@media (min-width: 576px) and (max-width: 991.98px) {
header .tel .number {
font-size: 1.4rem;
}
}

/* header */
header {
position: relative;
}
.header-top {
display: flex;
padding: 1rem 6rem 1rem 1rem;
gap: 1.2rem;
align-items: center;
}
.logo {
width: 200px;
}
a.btn-access {
background-color: #eeeeee;
color: var(--color-dgreen);
height: 42px;
line-height: 42px;
padding: 0 0.7em;
text-align: center;
border-radius: 3px;
font-size: 0.8rem;
font-weight: 700;
letter-spacing: -0.03em;
}
a.btn-access:hover {
background-color: #e9e9e9;
}
a.btn-access::before {
content: "";
background: url("icon/pin.svg") no-repeat center;
width: 1.1em;
height: 1.1em;
background-size: contain;
display: inline-block;
vertical-align: middle;
margin: 0 0.1em 0.2em 0;
}
.info {
width: 100%;
position: relative;
}
.info > * {
height: 66px;
line-height: 66px;
text-align: center;
font-weight: 700;
}
a.btn-join {
font-size: 0.95rem;
flex: 1;
}
a.btn-join:hover {
background: var(--color-green-hover);
}
a.btn-join::before {
content: "";
background: url(icon/join.svg) no-repeat center;
width: 1.5em;
height: 1.5em;
background-size: contain;
display: inline-block;
vertical-align: middle;
margin: 0 0.5em 0.2em 0;
}

.search-wrap {
position: relative;
z-index: 10;
width: 60px;
}
.btn-search {
width: 100%;
height: 100%;
display: block;
cursor: pointer;
}

.btn-search::after {
content: "";
background: url("icon/search.svg") no-repeat center;
width: 1.3rem;
height: 1.3rem;
background-size: contain;
display: block;
margin: 0 auto;
}
.btn-search[aria-expanded="true"]::before,
.btn-search[aria-expanded="true"]::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 1.3rem;
height: 0;
border-top: 2px solid currentColor;
transform-origin: center;
}
.btn-search[aria-expanded="true"]::before {
transform: translate(-50%, -50%) rotate(45deg);
}
.btn-search[aria-expanded="true"]::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

@media (min-width: 576px) {
.logo {
width: 240px;
}
}
@media (min-width: 768px) {
.header-top {
padding: 0.8rem 0 0.7rem 1rem;
gap: 1rem;
}
.info {
max-width: 280px;
min-width: 220px;
width: 25%;
position: relative;
top: -0.8rem;
}
.info > * {
height: 56px;
line-height: 56px;
}
a.btn-join {
border-bottom-left-radius: 20px;
width: 75%;
}
}
@media (min-width: 992px) {
.header-top {
padding: 0.8rem 0 0.7rem 2rem;
gap: 2rem;
}
.logo {
width: 280px;
}
header .tel .number {
font-size: 1.58rem;
}
}
/* 576px超〜992px未満 */
@media (min-width: 576px) and (max-width: 991.98px) {
header .tel .number {
font-size: 1.4rem;
}
}

/* ハンバーガーアイコン */
.hamburger {
width: 60px;
height: 55px;
background: var(--color-green);
padding: 12px;
border-bottom-left-radius: var(--rounded-base);
z-index: 200;
position: fixed;
right: 0;
top: 0;
z-index: 2000;
}
@media (min-width: 576px) {
.hamburger {
width: 70px;
height: 65px;
padding: 18px;
}
}
.hamburger div {
position: relative;
}
.hamburger span {
background: #fff;
position: absolute;
height: 2px;
width: 100%;
transition: 0.3s;
}
.hamburger span:nth-child(1) {
top: 0;
}
.hamburger span:nth-child(2) {
top: 13px;
}
.hamburger span:nth-child(3) {
top: 26px;
}
/* ハンバーガー開閉時のアニメーション */
.hamburger.active span:nth-child(1) {
transform: rotate(45deg);
top: 13px;
}
.hamburger.active span:nth-child(2) {
opacity: 0;
}
.hamburger.active span:nth-child(3) {
transform: rotate(-45deg);
top: 13px;
}
/* サーチボックス */
.search-wrap {
position: relative;
} /* 絶対配置の基準 */

.search-wrap .search-panel {
position: absolute;
right: 100%;
top: 50%;
display: flex;
align-items: center;
padding: 0 0.5rem;
height: 100%;
background: var(--color-navy);
z-index: 20;
overflow: visible;

transform-origin: right center;
transform: translateY(-50%) scaleX(0);
opacity: 0;
pointer-events: none;

transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease;
will-change: transform, opacity;
backface-visibility: hidden;
}
#nav-menu .search-panel {
display: flex !important;
}

.search-wrap.is-open .search-panel {
transform: translateY(-50%) scaleX(1);
opacity: 1;
pointer-events: auto;
}

.search-panel input {
z-index: 1;
height: 2.3rem;
width: clamp(14rem, 30vw, 20rem);
padding: 0 1rem;
background: #fff;
border: none;
border-radius: 999px;
font-size: 1rem;
}
.visually-hidden {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
}

@media (max-width: 767.98px) {
.search-panel input {
width: calc(100vw - 82px);
font-size: 1.2rem;
}
.search-wrap {
width: 66px;
}
}

/* メニュー */
#nav-menu .nav-inner {
background: var(--color-white);
}
#nav-menu .nav-inner > ul {
padding: 1.5rem 0 0;
}
.nav-menu ul li {
font-weight: 700;
font-size: 1.1rem;
}

.nav-menu ul li a {
display: block;
}

#nav-menu .nav-inner > ul > li > a,
.has-sub summary {
padding: 1.2rem 1rem;
border-bottom: 1px dotted var(--border-color);
text-decoration: none;
}

.has-sub summary {
cursor: pointer;
transition: all 0.3s ease;
}
.has-sub summary:hover {
color: var(--color-base-hover);
}
.has-sub {
position: relative;
z-index:1000;
}
/* details/summary の矢印を消して独自アイコン */
.has-sub summary::-webkit-details-marker {
display: none;
}
.has-sub summary::marker {
content: "";
}
.has-sub summary .caret {
position: absolute;
right: 1rem;
top: 1.5rem;
width: 0.6em;
height: 0.6em;
border-right: 2px solid var(--color-dgreen);
border-bottom: 2px solid var(--color-dgreen);
transform: rotate(45deg);
transform-origin: 50% 50%;
transition: transform 0.28s ease; /* ← Safariでも効きやすい */
z-index: 1;
}
.has-sub details[open] summary .caret {
transform: rotate(-135deg);
top: 1.8rem;
}

/* サブメニュー */
.submenu {
background: var(--color-white);
padding: 0.5rem 1rem;
}
.submenu li a {
padding: 0.6rem 1rem;
text-align: center;
background: var(--color-lgray);
border-radius: var(--rounded-base);
margin: 0.5rem 0;
}
.submenu li:last-child a {
background: var(--color-lgreen);
}

@media (max-width: 767.98px) {
#nav-menu {
display: none;
position: fixed;
top: 0;
width: 100%;
z-index: 1000;
overflow-y: scroll;
height: 100dvh;
-webkit-overflow-scrolling: touch;
transition: top 0.25s ease;
}
#nav-menu.active {
display: block;
}
.sp-menu {
background: var(--color-bg);
}
}
@media (min-width: 768px) {
#nav-menu .nav-inner > ul {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 0.5rem 0 1.5rem;
}

#nav-menu .nav-inner > ul > li > a,
.has-sub summary {
padding: 0 0.95rem;
border-bottom: 0px dotted var(--border-color);
border-right: 1px solid var(--border-color);
}

#nav-menu .nav-inner > ul > li:first-child a {
border-left: 1px solid var(--border-color);
}
.has-sub details > .submenu {
position: absolute;
top: 100%;
padding-top: 30px;
z-index: 0;
width: 300px;
left: 50%;
transform: translateX(-50%);
}
.nav-menu ul li {
font-size: 0.9rem;
}
.has-sub summary .caret {
left: calc(50% - 0.3em);
}
}
@media (min-width: 992px) {
#nav-menu .nav-inner > ul > li > a,
.has-sub summary {
padding: 0 1.8rem;
}
.nav-menu ul li {
font-size: 0.98rem;
}
}
/* メインイメージ */
#mv{
background:var(--color-dgreen);
}
.mv-left{
flex: 1;
}
@media (min-width: 992px) {
.mv-flex {
display: flex;
}
.mv-left{
flex: 1;
}
.mv-container{
width:1100px;
margin:0 auto;
}
}

/* swiper */
#topics-slide{
padding:25px 0 15px;
background:var(--color-dgreen);
}
.swiper-button-prev {
left: -40px;
}
.swiper-button-next {
right:-40px;
}
.swiper-pagination{
position:static;
}
.swiper-pagination.swiper-pagination-bullets {
margin-top:5px;
}
.is-group-slide .group-stack {
display: flex;
flex-direction: column;
gap: 12px;           /* 段間の余白 */
}
.topics-frame a img{
background: #fff;
padding:0.3rem;
border-radius: var(--rounded-base);
}

#topics-slide .topics-frame a:hover img{
opacity:0.95!important;
}

@media (max-width: 767.98px) {
.swiper-button-prev {
left: -20px;
}
.swiper-button-next {
right: -20px;
}
#topics-slide .container-lg{
max-width:350px;
width:85%;
}
}
@media (min-width: 768px) {
.is-group-slide .group-stack {
  display: flex;
  flex-direction: row;
  gap: 20px;           /* 段間の余白 */
}
}
@media (min-width: 992px) {
#mv .is-group-slide .group-stack {
display: flex;
flex-direction: column;
}
#mv #topics-slide .swiper{
height:345px;
}
.topics-frame a img{
padding:0.4rem;
}
#mv #topics-slide .container-lg{
margin:0 2rem 0 2rem;
padding:0;
max-width:330px;
}
}
.swiper-pagination-bullet {
background-color: rgba(255,255,255,0.7);
}
.swiper-pagination-bullet-active {
background-color: rgba(255,255,255,0.9);
}
.swiper-button-next, .swiper-button-prev {
width: 24px;
height: 24px;
color: var(--color-green);
background:rgba(255,255,255,0.7);
border-radius: var(--rounded-all);
}
.swiper-button-next::after,
.swiper-button-prev::after {
display: none;
}
.swiper-button-prev img{
transform: scaleX(-1);
}
.swiper-button-prev:hover,
.swiper-button-next:hover {
background:rgba(255,255,255,1);
}
@media (min-width: 768px) {
.swiper-button-next, .swiper-button-prev {
width: 34px;
height: 34px;
}
}
@media (min-width: 992px) {
#mv #topics-slide .swiper-pagination {
position: absolute;
top: 50%;
right: -25px;
left: auto;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0px;
}
}

/* news */
.news-list > div {
border-bottom: 1px dotted var(--border-color);
padding: 1rem 0;
}

.news-list div:first-child {
padding: 0 0 1rem;
}
.news-grid h3 {
font-size: var(--font-base);
font-weight: 700;
text-align: justify;
margin-top: 0.5rem;
}
.b-red b{
color:var(--color-red)!important;
}
.category-btn {
display: flex;
flex-wrap: wrap;
gap: 0.8rem;
}
.category-btn button,
.category-btn a {
display: block;
background: #eeeeee;
border-radius: var(--rounded-all);
text-align: center;
padding: 0.6em;
font-size: calc(var(--font-sm) * 0.9);
font-weight: 700;
color: var(--color-dgreen);
width: calc(50% - 0.4rem);
cursor: pointer;
}
.category-btn button.active:hover,
.category-btn a.active:hover {
background: var(--color-green-hover);
}
.category-btn button:hover,
.category-btn a:hover {
background: var(--color-green);
color: var(--color-white);
}
.category-btn button.active,
.category-btn a.active {
background: var(--color-green);
color: var(--color-white);
}
.date {
font-size: var(--font-sm);
color: var(--color-gray);
display: inline-block;
margin-right: 1rem;
}
.category {
font-size: var(--font-xs);
color: var(--color-dgreen);
border: 1px solid currentColor;
border-radius: var(--rounded-all);
width: 120px;
text-align: center;
font-weight: 700;
letter-spacing: -0.04em;
display: inline-block;
line-height: 1.7;
}
/* カテゴリごとの色 */
.category.oshirase {
color: var(--color-red);
}

.category.event-seminar {
color: var(--color-dgreen);
}

.category.other {
color: var(--color-navy);
}
.news-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.news-event-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.tabpanel[hidden] {
display: none;
}
.img-responsive {
position: relative;
width: 100%;
padding-top: 85%;
background: var(--color-lgray);
overflow: hidden;
margin-bottom: 1rem;
}
.img-responsive > img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}

@media (min-width: 768px) {
.news-list h3 {
display: flex;
align-items: center;
}
.news-event-grid {
grid-template-columns: repeat(2, 1fr);
gap: 3rem 1.5rem;
}

.category-btn {
flex-direction: row;
}
.category-btn button,
.category-btn a {
width: calc(25% - 0.6rem);
}
}
@media (min-width: 992px) {
.category-btn {
flex-direction: column;
}
.category-btn button,
.category-btn a {
width: auto;
font-size: var(--font-sm);
}
.news-grid {
grid-template-columns: 230px 1fr;
}
}

@media (min-width: 768px){
.news-list h3::after {
content: "";
background: url("icon/chevron-r.svg") center right no-repeat;
width: 2rem;
height: 0.8rem;
display: block;
background-size: contain;
margin-left: auto;
}
}

/* #top-new */
#top-new {
padding-bottom: 60px;
}
.top-new-grid {
gap: 3rem;
}
#new-member .top-new-inner {
height: auto;
}
@media (min-width: 768px) {
#top-new {
padding-bottom: 100px;
}
.top-new-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
}
.top-new-grid > :nth-child(3) {
grid-column: span 2; /* ← 2列ぶち抜きにする！ */
}
.top-new-inner {
height: 430px;
overflow: hidden;
}
}
@media (min-width: 992px) {
.top-new-grid {
grid-template-columns: repeat(3, 1fr);
}
.top-new-grid {
grid-template-columns: repeat(3, 1fr);
}
.top-new-grid > :nth-child(3) {
grid-column: span 1; /* ← 2列ぶち抜きにする！ */
}
}
#top-new .heading-sub {
color: var(--color-dgreen);
}
/* new-member */
#new-member ul li {
padding: 0.7rem;
font-size: var(--font-sm);
border-right: 10px solid #fff;
}
#new-member ul li:nth-child(even) {
background-color: #f5f5f5; /* 任意の色 */
}
#new-member ul li a {
color: currentColor;
text-decoration: underline;
}
#new-member ul li a::after {
content: "";
display: inline-block;
background: url(icon/link.svg) center no-repeat;
background-size: 1em;
width: 1em;
height: 1em;
margin-left: 0.3em;
vertical-align: middle;
}
.scroll-box::-webkit-scrollbar {
width: 3px;
background-color: var(--color-lgreen);
}
.scroll-box::-webkit-scrollbar-thumb {
background-color: var(--color-green);
}

/* ▼ ここから もっと見る/スクロール 切替 */
.morebox {
position: relative;
}
.morebox__check {
display: none;
}
.morebox__content {
max-height: 300px;
overflow: hidden;
position: relative;
}
.morebox__content::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3rem;
background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 60%);
}
.morebox__btn {
display: block;
text-align: center;
margin-top: 0.5em;
padding: 0.5em 1em;
background: var(--color-lgreen);
border-radius: var(--rounded-all);
cursor: pointer;
font-weight: 700;
font-size: 0.9em;
}
.morebox__btn::after {
content: "もっと見る";
}
.morebox__check:checked ~ .morebox__btn::after {
content: "閉じる";
}
.morebox__check:checked ~ .morebox__content {
max-height: none;
}
.morebox__check:checked ~ .morebox__content::after {
display: none;
}

@media (min-width: 768px) {
.morebox__content {
max-height: 390px;
overflow-y: scroll;
}
.morebox__content::after {
display: none;
}
.morebox__btn {
display: none;
}
/* スクロールバーの見た目（PCのみ適用） */
.scroll-box::-webkit-scrollbar {
width: 3px;
background-color: var(--color-lgreen);
}
.scroll-box::-webkit-scrollbar-thumb {
background-color: var(--color-green);
}
}
@media (max-width: 767.98px) {
.top-new-inner.fb-content {
height: 300px;
overflow: hidden;
}
}
@media (min-width: 992px) {
.morebox__content {
min-height: 390px;
}
}

/* #menu-item */
#menu-item {
padding: 35px 0;
}
.menu-item-flex {
max-width: 500px;
margin: 0 auto;
gap: 0.85rem;
align-items: center;
justify-content: center;
}
.menu-item-flex a {
width: calc(33% - 1rem);
background: #fff;
border-radius: var(--rounded-base);
text-align: center;
font-weight: 700;
font-size: var(--font-lg);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 4px 4px 0px 0px var(--color-dgreen);
aspect-ratio: 10 / 11;
}
.menu-item-flex a img {
display: block;
margin-bottom: 0.5em;
max-height: 40px;
width: auto;
max-width: 100%;
}
.menu-item-flex a:hover {
box-shadow: 2px 2px 0px 0px var(--color-dgreen);
}
.menu-item-flex a:hover {
opacity: 0.95;
}
@media (min-width: 500px) {
.menu-item-flex a {
aspect-ratio: 10 / 10;
}
.menu-item-flex {
gap: 1rem;
}
.menu-item-flex a img {
margin-bottom: 1rem;
max-height: 55px;
}
}
@media (min-width: 768px) {
#menu-item {
padding: 50px 0;
}
.menu-item-flex {
max-width: 900px;
}
.menu-item-flex a {
width: calc(20% - 1rem);
}
#menu-item {
padding-right: 1rem;
padding-left: 1rem;
}
}

/* #top-topics */
.top-topics-grid {
gap: 2rem;
}
.top-topics-grid a img {
box-shadow: 4px 4px 0px 0px #ddd;
max-width: 380px;
width: 90%;
display: block;
margin: 0 auto;
height:auto;
}
.topics-frame a:hover img {
box-shadow: 2px 2px 0px 0px #d0d0d0;
}
@media (min-width: 768px) {
.top-topics-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
.top-topics-grid a img {
width: 100%;
}
}
@media (min-width: 992px) {
.top-topics-grid {
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
}
}

/* #site-item */
#site-item {
padding-top: 35px;
padding-bottom: 50px;
}
.site-item-flex a {
display: block;
font-weight: 700;
text-align: center;
}
.site-item-flex div img {
width: auto;
height: 60px;
display: block;
margin: auto;
}
@media (min-width: 768px) {
#site-item {
padding-top: 50px;
padding-bottom: 70px;
}
}
@media (max-width: 991.98px) {
.site-item-flex a {
background: var(--color-white);
border: 1px solid var(--color-green);
border-radius: var(--rounded-base);
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
width: calc(50% - 1rem);
}
.site-item-flex a div {
width: 28%;
}
.site-item-flex {
gap: 1rem;
}
}
@media (max-width: 767.98px) {
.site-item-flex a {
width: 100%;
}
.site-item-flex {
gap: 0.75rem;
}
}
@media (min-width: 992px) {
.site-item-flex {
gap: 1.5rem;
flex-direction: row;
}
.site-item-flex div::before {
content: "";
position: absolute;
display: block;
height: 100%;
top: 0;
z-index: -1;
background: var(--color-white);
border: 1px solid var(--color-green);
border-radius: var(--rounded-base);
width: 100%;
}
.site-item-flex div {
z-index: 1;
position: relative;
flex: 1;
padding: 1.5rem 0;
margin-bottom: 0.7rem;
}
.site-item-flex a {
flex: 1;
font-size: var(--font-sm);
}
.site-item-flex div img {
height: 80px;
}
}
.line-item-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.line-item-grid a {
display: block;
background: var(--color-white);
display: grid;
justify-items: center;
align-items: center;
height: 80px;
}
.line-item-grid a img {
max-height: 60px;
max-width: 90%;
margin:0 auto;
display: block;
}
@media (min-width: 992px) {
.line-item-grid {
grid-template-columns: repeat(4, 1fr);
}
}

/* おじゃま */
#backnamber table tr:nth-child(even) {
background-color: var(--color-lgray);
}
#backnamber table td a {
color: var(--color-dgreen);
font-weight: bold;
}
#backnamber table td a:hover {
color: var(--color-dgreen-hover);
}
#backnamber table td a::before {
content: "";
background: url("icon/chevron-r.svg") center left no-repeat;
width: 1em;
height: 1em;
display: inline-block;
background-size: 0.4em;
vertical-align: middle;
}

/* table */
table {
table-layout: fixed;
width: 100%;
}
table td {
line-height: 1.7;
padding-top: 1.1em;
padding-bottom: 1.1em;
}
table th {
text-align: left;
}
.table-base {
border-right: 1px solid var(--border-color);
border-left: 1px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.table-base th {
background: var(--color-lgreen);
padding-top: 0.7em;
padding-bottom: 0.7em;
}
.table-base.table-row th {
text-align: center;
}
.table-base th,
.table-base td {
padding-right: 1.5em;
padding-left: 1.5em;
}
.table-row th {
width: 28%;
padding-top: 1em;
}

.table-base th,
.table-base td {
border-top: 1px solid var(--border-color);
}
.td-small td {
font-size: var(--font-sub);
}
.table-sub th {
vertical-align: top;
font-size: var(--font-md);
}

.table-sub th,
.table-sub td {
border-bottom: 1px dotted var(--border-color);
}

.table-sub th::before {
content: "\25A0";
color: var(--color-green);
margin-right: 0.4em;
display: inline-block;
}
#kaigi-price .table-list thead {
background-color: var(--color-lgray);
}
.table-list th,
.table-list td {
padding-top: 0.5em;
padding-bottom: 0.5em;
border: 1px solid var(--border-color);
}
#backnamber .table-list th,
#backnamber .table-list td {
padding: 0.5em 1.3em;
}
#backnamber .table-list th {
width: 11%;
text-align: right;
font-weight: normal;
}
#backnamber table tr td:nth-child(2) {
width: 52%;
}
#kaigi-price .table-list th,
#kaigi-price .table-list td {
text-align: center;
}
#kaigi-price .table-list td span {
color: var(--color-gray);
font-size: var(--font-sm);
}
.table-sdgs {
table-layout: auto;
border: 1px solid var(--border-color);
}
.table-sdgs tr > * {
padding-right: 1em;
padding-left: 1em;
vertical-align: top;
}
.table-sdgs th {
padding-top: 0.5em;
padding-bottom: 0.5em;
background: var(--color-lgreen);
border-bottom: 1px solid var(--border-color);
border-top: 1px solid var(--border-color);
}
.table-sdgs th a {
color: var(--color-base);
text-decoration: underline;
}
.table-sdgs th a:hover {
color: var(--color-base-hover);
}
.table-sdgs th a::after {
content: "";
display: inline-block;
background: url(icon/link.svg) center no-repeat;
background-size: 1em;
width: 1em;
height: 1em;
margin-left: 0.3em;
vertical-align: middle;
}
.table-sdgs tr td:nth-child(1) {
border-right: 1px solid var(--border-color);
width: 240px;
}
.table-sdgs tr td.sdgs-icon {
display: flex;
flex-wrap: wrap;
gap: 0.3rem;
}
.table-sdgs td.sdgs-icon img {
width: calc(11.2% - 0.3rem);
height: auto;
}

@media (max-width: 991.98px) {
.table-row th,
.table-row td {
display: block;
width: 100%;
}
table th {
padding-top: 0.6em;
padding-bottom: 0.6em;
}
.table-row th {
padding-top: 0.6em;
}
table td {
padding-top: 1.2em;
padding-bottom: 1.2em;
}
.table-base th {
padding-right: 1em;
padding-left: 1em;
}
.table-base td {
padding-right: 0em;
padding-left: 0em;
}
.table-base {
border: 0px solid var(--border-color);
border-left: 0px solid var(--border-color);
border-bottom: 1px solid var(--border-color);
}
.table-sub td {
border-bottom: 0px dotted var(--border-color);
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.table-sub th {
padding-top: 1em;
}
.table-base.table-row th {
text-align: left;
}
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.table-sdgs {
width: 860px;
}
.table-list {
width: 760px;
}
#kaigi-price .table-list th.sticky-col {
width: 100px;
}
.table-scroll::before {
content: "→ 横にスクロールできます";
display: block;
margin-bottom: 0.5rem;
font-size: var(--font-sub);
color: var(--color-gray);
}
.sticky-col {
position: sticky;
left: 0;
border-left: 2px solid #ccc;
z-index: 1;
background: var(--color-white);
}
thead th.sticky-col {
background: var(--color-lgray);
}

.sticky-col::before,
.sticky-col::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 1px;
background: var(--border-color);
}
.sticky-col::before {
left: -1px;
}
.sticky-col::after {
right: -1px;
}
#backnamber .table-list th,
#backnamber .table-list td {
padding: 0.5em 0.8em;
}
}

/* ページ */
.aioseo-breadcrumbs {
font-size: 0.8rem;
padding-top: 0.5rem;
}
.aioseo-breadcrumbs br { display: none; }
.aioseo-breadcrumb-separator {
color: var(--color-dgreen);
font-size: 1rem;
padding: 0 0.3rem;
}
.aioseo-breadcrumb a {
color: #999;
}
.aioseo-breadcrumb a:hover {
color: var(--color-base);
}
.aioseo-breadcrumbs {
overflow-x: auto; /* 横スクロール有効化 */
white-space: nowrap; /* 折り返し禁止 */
-webkit-overflow-scrolling: touch; /* スマホでスムーズスクロール */
}
.aioseo-breadcrumbs::-webkit-scrollbar {
display: none;
}

.page-bg-link {
background: var(--color-lgray);
padding: 2.5rem 1rem;
text-align: center;
}
.page-bg-link .btn-round {
width: 100%;
max-width: 450px;
margin: 0 auto;
}
.page-bg-link .btn-square {
width: 100%;
max-width: 600px;
margin-right: auto;
margin-left: auto;
}
.page-bg-link a::before {
content: "";
display: block;
width: 1.2rem;
height: 1.2rem;
border-radius: var(--rounded-all);
margin-right: 0.5rem;
flex-shrink: 0;
}
.page-bg-link .btn-round::before {
background: url(icon/chevron-r_white.svg) center no-repeat currentColor;
background-size: 0.3rem;
}
.page-bg-link .btn-square::before {
background: url(icon/chevron-r.svg) center no-repeat currentColor;
background-size: 0.3rem;
}
.page-link {
text-decoration: underline;
display: block;
}
.page-link::before {
content: "";
display: inline-block;
background: url(icon/chevron-r_white.svg) center no-repeat currentColor;
background-size: 0.3rem;
width: 1.2em;
height: 1.2em;
border-radius: var(--rounded-all);
margin-right: 0.5em;
vertical-align: middle;
}
.a-under {
text-decoration: underline;
}
.link::after {
content: "";
display: inline-block;
background: url(icon/link.svg) center no-repeat;
background-size: 1em;
width: 1em;
height: 1em;
margin-left: 0.3em;
vertical-align: middle;
}

.img-link::after {
content: "";
background: url(icon/link.svg) center no-repeat;
background-size: 1em;
width: 1em;
height: 1em;
display: inline-block;
margin-left: 0.3em;
margin-bottom: 0.3em;
vertical-align: middle;
}

.point-ul {
font-weight: 700;
}
.point-ul li {
padding: 0.4em 0;
font-size: var(--font-md);
display: flex;
}
.point-ul li:last-child,
.point-ul.point-ul-p li:last-child {
padding-bottom: 0;
}
.point-ul.point-ul-p li {
font-weight: 400;
font-size: var(--font-base);
line-height: 1.7;
padding: 0.5em 0;
}
.point-ul li::before {
content: "\25A0";
color: var(--color-green);
margin-right: 0.4em;
display: block;
}

#page-contact,#kentei-info{
padding-top: 60px;
}
.page-contact-grid {
grid-template-columns: 1fr;
border: 4px solid var(--color-lgreen);
border-radius: var(--rounded-base);
align-items: center;
gap: 1.5rem;
padding-bottom: 1.5rem;
}

.page-contact-grid > :first-child {
background: var(--color-lgreen);
color: var(--color-dgreen);
font-size: var(--font-lg);
padding: 15px 0;
}
.page-contact-grid .btn-square {
width: 90%;
max-width: 320px;
margin: 0 auto;
}
.bg-content {
background-color: var(--color-lgray);
padding: 5% 5%;
}
.bg-content-h {
background-color: var(--color-lgray);
padding: 10% 5%;
}
.border-frame {
padding: 5%;
border: 1px solid var(--border-color);
}

@media (min-width: 768px) {
.bg-content,
.bg-content-h {
padding: 5%;
}
#page-contact,#kentei-info{
padding-top: 80px;
}
.aioseo-breadcrumbs {
padding-top: 1rem;
}
}
@media (min-width: 992px) {
.page-contact-grid {
grid-template-columns: repeat(3, 1fr);
padding-bottom: 0rem;
}
.page-contact-grid > :first-child {
padding: 60px 0;
}
.page-contact-grid .btn-square {
margin: 0;
}
}

/* 経営相談 */
.keiei-grid {
grid-template-columns: 1fr;
gap: 1rem;
}
.keiei-grid a {
font-size: var(--font-lg);
}
.keiei-grid > * {
padding-bottom: 1rem;
border-bottom: 1px dotted #ccc;
}
.soudan-table span {
display: block;
color: var(--color-gray);
margin-top: var(--space-xs);
display: flex;
align-items: center;
}
.soudan-table span::before {
content: "";
display: block;
background: url(icon/calendar.svg) center center no-repeat;
width: 1rem;
height: 1rem;
background-size: contain;
margin-right: 0.5em;
}
@media (min-width: 768px) {
.keiei-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem;
}
}

/* 商工会議所のご紹介 */
.about-grid {
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
place-items: center;
margin: 0 auto;
padding: 5%;
}

.about-grid a {
background-color: var(--color-white);
width: 100%;
border-radius: var(--rounded-base);
display: flex;
flex-direction: row;
align-items: center;
box-shadow: 4px 4px 0px 0px #ddd;
}

.about-grid a:hover {
box-shadow: 2px 2px 0px 0px #d0d0d0;
}
.about-grid .point-link {
color: currentColor !important;
}

.about-grid a img {
display: block;
height: 70px;
max-width: 50px;
margin: 1rem;
}
@media (min-width: 768px) {
.about-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem;
padding: 10%;
}
.about-grid a {
aspect-ratio: 10 / 10;
flex-direction: column;
justify-content: center;
}
.about-grid a img {
height: 100px;
max-width: 100%;
margin: 0 0 1.5rem;
}
}

@media (min-width: 992px) {
.about-grid {
grid-template-columns: repeat(3, 1fr);
padding: 7%;
}
}

/* イベント */
.event-grid {
grid-template-columns: repeat(1, 1fr);
gap: 1rem;
}
@media (min-width: 768px) {
.event-grid {
grid-template-columns: 45% 1fr;
gap: 2rem;
}
}

/* 役員紹介 */
.yakuin-grid {
gap: 1rem;
}
.yakuin-grid .bg-content {
padding: 10%;
}
.yakuin-grid-inner {
gap: 1rem;
justify-content: center;
align-items: center;
text-align: center;
}
.yakuin-grid-inner h3 {
font-size: 1.3rem;
letter-spacing: 0.3em;
}
.yakuin-grid-inner h3::after {
content: "";
display: block;
width: 100px;
background: var(--color-lgreen);
height: 3px;
border-radius: 2px;
margin: 0.5em auto;
}
.yakuin-grid-inner img {
width: 210px;
aspect-ratio: 10 / 13;
object-fit: cover;
margin: 0 auto;
}
@media (min-width: 576px) {
.yakuin-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
}
@media (min-width: 768px) {
.yakuin-grid-inner {
grid-template-columns: repeat(1, 1fr);
text-align: center;
}
}
@media (min-width: 992px) {
.yakuin-grid .bg-content {
padding: 5%;
}
.yakuin-grid-inner {
grid-template-columns: repeat(2, 1fr);
text-align: left;
gap: 1.5rem;
}
.yakuin-grid-inner img {
margin: 0 0 0 auto;
}
.yakuin-grid-inner h3::after {
margin: 0.5em auto 0.5em 0;
}
}

/* 施設利用 */
.ks-img{
width:700px;
max-height:430px;
object-fit:cover;
margin:0 auto;
max-width:100%;
height:auto;
display:block;
}
.ks-grid{
grid-template-columns: repeat(1, 1fr);
gap: 2rem;
}
.ks-grid ul li{
padding-top:1rem;
padding-bottom:1rem!important;
border-bottom:1px dotted var(--border-color);
display:flex;
}
.ks-grid  ul li span{
font-weight:normal;
display:block;
margin-left:auto;
}
@media (min-width: 576px) {
.ks-grid{
grid-template-columns: repeat(2, 1fr);
}
}
.kaigi-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
max-width: 740px;
margin: 0 auto;
}
.kaigi-grid div {
background: var(--color-white);
text-align: center;
}
.kaigi-grid div h3 {
font-size: var(--font-lg);
margin-bottom: 0.3rem;
}
.bg-content.wide-bg-content {
margin-right: -1rem;
margin-left: -1rem;
}
.kaigi-grid-inner {
padding: 1rem 0rem;
}
#kaigi-price .point-title:nth-of-type(even)::before {
color: var(--color-red);
}
.kaigi-plus{
padding-top:0.2rem;
}

@media (min-width: 576px) {
.bg-content.wide-bg-content {
margin-right: 0rem;
margin-left: 0rem;
}
}
@media (min-width: 768px) {
.kaigi-grid {
gap: 2rem;
}
.kaigi-grid div h3 {
display: inline-block;
margin-right: 0.5rem;
}
.kaigi-plus{
float:right;
padding-top:0.3rem;
}
}

/* CCi */
.cci-mag {
padding: 3%;
}
.cci-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1.5rem 0.7rem;
}
.cci-grid h3 {
margin-top: var(--space-xs);
}
.df-popup-thumb .df-book-title{
display:none!important;
}
.df-popup-thumb:hover * {
transform: none !important;
}

.df-popup-thumb .df-book-page1, .df-popup-thumb .df-book-page2{
display:none!important;
}
.cci-mag .df-popup-thumb {
margin: 0 !important;
width: 100%!important;
height: auto!important;
vertical-align:middle!important;
}

.cci-mag .df-book-wrapper {
display: block !important;
}

.cci-mag .df-popup-thumb img{
border:1px solid var(--color-lgreen)!important;
position: relative;
display: block;
}

.cci-mag .df-popup-thumb *{
box-shadow: none !important;
filter: none !important;      /* drop-shadow対策 */
text-shadow: none !important;
}

.df-popup-thumb img.df-lazy {
transform: scale(1) !important;
opacity: 1 !important;
}
.cci-mag .df-popup-thumb{
font-size:15px;
}
.cci-mag .df-popup-thumb::after{
content:"";
height:2.5em;
width:2.5em;
background: url("icon/search.svg") var(--color-green) center center no-repeat;
background-size: 50%;
border-radius: var(--rounded-all);
display:block;
position:absolute;
right:1rem;
bottom:1rem;
transition: transform .3s ease;
pointer-events:none;
transition: all 0.3s ease;
}
.cci-mag .df-popup-thumb:hover::after{
height:2.9em;
width:2.9em;
}
.cci-mag-archive a::after {
display: block;
content: "";
background: url(icon/chevron-r.svg) center no-repeat;
width: 1em;
height: 1em;
background-size: 0.5rem;
}
.cci-mag-archive {
background: var(--color-lgray);
padding: 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem;
}
.cci-mag-archive a {
width: 100%;
display: flex;
justify-content: space-between;
background: var(--color-white);
padding: 0 1rem;
}
.dflip-hidden-trigger {
  position: absolute !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  white-space: nowrap !important;
}
@media (min-width: 768px) {
.cci-grid {
grid-template-columns: repeat(3, 1fr);
gap: 3rem 1.5rem;
}
.cci-mag-archive {
flex-direction: row;
padding: 2rem;
gap: 1rem;
}
.cci-mag-archive a {
width: calc(50% - 1rem);
}
}
@media (min-width: 992px) {
.cci-mag {
padding: 8%;
}
.cci-mag .df-popup-thumb{
font-size:17px;
}
}

@media (max-width: 991.98px) {
.cci-mag .df-popup-thumb {
max-width: 250px!important;
height: auto;
}
}

/* ビジネスモール */
#bm-flow {
font-size: var(--font-sub);
}
.bm-flex {
gap: 2rem 1.8rem;
flex-direction: column;
}

.bm-step {
background: var(--color-lgreen);
font-size: var(--font-lg);
font-weight: 700;
color: var(--color-dgreen);
padding: 0.1em 0.8em;
border-radius: 3px;
}
#bm-flow img {
max-width: 330px;
width: 100%;
height: auto;
margin: var(--space-sm) auto;
}

@media (min-width: 992px) {
.bm-flex {
flex-direction: row;
}
#bm-flow .d-flex:first-child > div {
flex: 1 1 calc(100% / 3);
}

#bm-flow .d-flex:last-child > div {
flex: 1 1 50%;
}
#bm-flow .d-flex:last-child > div img {
max-width: 280px;
}
}

/* 検定 */
.accordion {
border-bottom: 1px dotted var(--border-color);
}
.accordion button {
width: 100%;
text-align: left;
padding: 1rem 0rem;
font-size: 1rem;
border: none;
background: none;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
color: var(--color-base);
font-weight: 700;
}
.accordion:first-of-type button {
padding: 0 0 1rem;
}

.accordion button:focus {
outline: none;
}
.accordion .panel {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
}

/* アイコンをCSSで描く */
.icon {
position: relative;
width: 1rem;
height: 1rem;
flex: 0 0 auto;
color: var(--color-dgreen);
}

/* 横棒 */
.icon::before,
.icon::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 100%;
height: 2px;
background: currentColor;
transform: translate(-50%, -50%);
transition: transform 0.2s ease, opacity 0.2s ease;
}
.icon::after {
transform: translate(-50%, -50%) rotate(90deg);
}
.accordion.active .icon::after {
transform: translate(-50%, -50%) rotate(90deg) scaleX(0);
opacity: 0;
}

.kentei-contact {
align-items: center;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.kentei-contact > * {
width: 300px;
max-width: 100%;
display: block;
background: var(--color-white);
height: 85px;
border-radius: var(--rounded-base);
display: flex;
align-items: center;
justify-content: center;
}
.kentei-footer a {
color: var(--color-base);
}
.kentei-footer .page-link::before {
background: url(icon/chevron-r_white.svg) center no-repeat var(--color-navy);
background-size: 0.3rem;
}

@media (min-width: 992px) {
.kentei-contact > * {
width: 330px;
}
}

/* 安全マニュアル */
.manual-grid {
grid-template-columns: repeat(1, 1fr);
gap: 2rem 0;
}
.manual-grid h3 {
line-height: 1.3;
}
.manual-grid .cci-mag {
padding: 5% 18%;
}
.manual-grid .cci-mag img {
border: 0;
}
@media (min-width: 768px) {
.manual-grid {
grid-template-columns: repeat(2, 1fr);
gap: 2rem 1rem;
}
}
@media (min-width: 992px) {
.manual-grid {
gap: 3rem;
}
}

/* アクセス */
.access-photo {
width: 100%;
aspect-ratio: 10 / 6;
object-fit: cover;
}
/* お問い合わせ */
#contact-tel .tel {
width: 100%;
max-width: 600px;
}
.mail-address {
font-size: 1.3rem;
}
.form-group {
margin-bottom: 1.6rem;
}

label {
display: block;
margin-bottom: 0.4rem;
font-weight: 700;
}

input[type="text"],
input[type="email"],
textarea {
width: 100%;
padding: 0.6rem 0.8rem;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 1rem;
transition: border-color 0.2s ease;
}

input:focus,
textarea:focus {
border-color: var(--color-navy);
outline: none;
}

.required {
color: var(--color-red);
font-size: var(--font-sm);
margin-left: 0.6rem;
font-weight: normal;
}

.btn-submit {
width: 100%;
padding: 0.8rem;
background: var(--color-navy);
color: #fff;
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background 0.3s ease;
}

.btn-submit:hover {
background: var(--color-navy-hover);
}

/* 個人情報保護 */
.privacy-inner,
.privacy-inner_kentei {
text-align: justify;
}
.privacy-inner h3 {
counter-increment: title-counter;
margin: 1.3rem 0 0.6rem;
}
.privacy-inner h3::before {
content: counter(title-counter) ". ";
}
.privacy-inner ul,
.privacy-inner ol {
padding-left: 0;
}
.privacy-inner *:not(h3) {
font-size: var(--font-sub);
margin-left: 1rem;
}
.privacy-inner ol ul {
margin-left: 0rem;
}
.privacy-inner_kentei h3 {
border-bottom: 1px dotted var(--border-color);
padding-bottom: 0.3rem;
margin-bottom: 0.5rem;
margin-top: 2rem;
}
.privacy-inner_kentei *:not(h3) {
font-size: var(--font-sub);
}
.privacy-inner_kentei ul ul {
list-style-type: circle;
}

@media (min-width: 768px) {
.privacy-inner *:not(h3) {
margin-left: 1.5rem;
}
}

/* ページ送り */
.pagination {
display: flex;
justify-content: center;
margin-top: 3rem;
}
.pagination .nav-links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}

.pagination .page-numbers {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.25rem;
height: 2.25rem;
padding: 0 0.6rem;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
text-decoration: none;
color: var(--color-base);
font-weight: 600;
line-height: 1;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.pagination .page-numbers:hover {
background: #f7f7f7;
border-color: #bbb;
}
.pagination .page-numbers:focus {
outline: 2px solid var(--color-green);
outline-offset: 2px;
}

.pagination .page-numbers.current,
.pagination .page-numbers[aria-current="page"] {
background: var(--color-green);
border-color: var(--color-green);
color: #fff;
cursor: default;
}

.pagination .page-numbers.dots {
border: none;
background: transparent;
color: var(--color-green);
min-width: auto;
padding: 0 0.2rem;
}

.pagination .prev.page-numbers,
.pagination .next.page-numbers {
min-width: 2.25rem;
}

@media (max-width: 480px) {
.pagination .nav-links {
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-bottom: 0.2rem;
}
}

/* フッター */
footer {
background: linear-gradient(
to bottom,
var(--color-dgreen) 0%,
var(--color-dgreen) 40%,
var(--color-lgray) 40%,
var(--color-lgray) 100%
);
padding: 10px 0 30px;
}
.footer-logo {
max-width: 240px;
}
footer.top-footer {
padding: 60px 0 30px;
}
.h1-relative {
position: relative;
}
h1 {
position: absolute;
bottom: 4.5rem;
font-size: var(--font-xs);
text-align: center;
width: 100%;
}
footer table th {
vertical-align: top;
text-align: left;
width: 80px;
padding: 0.5rem 0;
}
footer table td {
padding: 0.5rem 0;
}
.footer-info-grid {
grid-template-columns: 1fr;
background: var(--color-white);
border-radius: var(--rounded-base);
align-items: stretch;
gap: 2rem;
padding: 1.5rem 1rem;
}
.footer-info-grid div:last-child img {
width: 100%;
height: 100%;
object-fit: cover; /* 縦横を揃えてトリミング */
display: block;
}
.footer-tel {
margin-bottom: 1.5rem;
}
.footer-tel span {
color: var(--color-dgreen);
font-size: 1.4rem;
}
footer ul {
display: flex;
flex-direction: column;
}
footer ul li a {
font-size: var(--font-sm);
display: block;
border-bottom: 1px dotted var(--border-color);
padding: 0.8em 0;
display: flex;
align-items: center;
}
footer ul li a::after {
content: "";
background: url("icon/chevron-r.svg") center right no-repeat;
width: 1em;
height: 0.7em;
display: block;
background-size: contain;
margin-left: auto;
}
.copy {
font-size: var(--font-xs);
text-align: center;
margin-top: 3rem;
}
@media (min-width: 576px) {
h1 {
bottom: 3rem;
}
}
@media (min-width: 768px) {
footer.top-footer {
padding: 60px 0 30px;
}
footer ul {
flex-direction: row;
flex-wrap: wrap;
max-width: 700px;
justify-content: center;
margin: 0 auto;
}
footer ul li a {
border-bottom: 0px dotted var(--border-color);
border-right: 1px solid currentColor;
margin-right: -1px;
margin-top: 1em;
padding: 0em 0.8em;
}
footer ul li:nth-of-type(5) a,
footer ul li:nth-of-type(8) a {
border-right: 0px solid currentColor;
}
footer ul li a::after {
display: none;
}
.footer-info-grid {
padding: 2.5rem;
}
}
@media (min-width: 992px) {
.footer-info-grid {
grid-template-columns: 1fr 1fr;
}
}
@media (max-width: 767.98px) {
footer table th,
footer table td {
display: block;
width: 100%;
padding: 0.3rem 0;
}
}