@charset "utf-8";
/* CSS Document */

ul, li {margin:0;padding:0; list-style:none;}
body,#wrapper {background:none;}
.pcOnly { display:block;}
.spOnly { display:none !important;}
.b30 {margin-bottom:3s0px;}
main {width: 100%;}
svg {margin: -2px 0;}
.flexBox {display: flex; justify-content: space-between;}
h2 {font-size: 5em; color: #000; margin-bottom: 0.5em;}
h2 span {font-size: 50%;}
h2 i {font-size: 40%; color: #f00; display:block; font-weight: bold; margin-top: 2em;}
h2 em {color: #2aa516;}
h3 {font-size: 2em; color: #000; margin-bottom: 0.75em;}

/*--navi----*/
.cNavi { text-align: center; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc;}
header.local { background: #fff; width: 1180px; margin:0 auto; padding: 1em; display: flex; align-items: center; font-size: 1.1em; line-height:1.2;}
header.local .logo {width: 25%; margin-right: 2em; display: block;}
header.local nav {width: 75%;}
header.local ul {display: flex; justify-content: space-between;}
header.local ul li { text-align:left; margin-right: 2em;}
header.local ul li a {text-decoration: none}
header.local ul li a,header ul li a:visited , a:link{ color: #000;}
header.local nav { position: relative; } /* ← インジケータの基準 */
/* navi underline */
header.local ul li a { text-decoration: none; }
header.local nav { position: relative;}
header.local ul { list-style: none; margin: 0; padding: 0;}
header.local ul li a { display: inline-block; padding: .35em 0 .8em; }
#cNaviIndicator{ position: absolute; left: 0; bottom: 0; height: 4px; width: 0;/* JSで幅が入る */ background: #f00; transform: translateX(0); transition: transform .25s ease, width .25s ease; pointer-events: none; z-index: 5;}
/* navToggle */
header.local nav > .navToggle{ display: none !important;}


section {width: 100%; margin: 0 auto 5em; overflow: hidden;}
section > div {width: 100%;}
section div.contents {width: 1180px; margin: 0 auto;}

/*--figure----*/
figure {margin: 0 0 2em;text-align: center;}
figure img { margin-bottom: 1em;}
figure.border img {border: 0.8em solid #ddd; border-radius: 10px; margin-bottom: 1em;}
p, figcaption {line-height: 1.6; margin-bottom: 1em; text-align:left;}
/*--wave----*/
.waveSection { color: var(--wave-color); /* ← SVGはこれを読む */background:none !important;}
.wave { display: block;/* 余白防止 */}
.waveSection { background: #fff;}
.waveBlue  { color: #08c;background: #08c; }
/*--wave font----*/
.waveSection h2,.waveSection h3, .waveSection p, .waveSection figcaption {color: #fff; }
.waveSection h2 em {color: #fe2;}

/*--btn----*/
ul.btn { list-style: none; padding: 0; margin: 0; padding-bottom: 1em; display: block; text-align: right; color; #fff;}
ul.btn li { display: inline-block;}
ul.btn a { display: inline-flex; align-items: center; background: #00aa00; color: #fff; text-decoration: none; font-size: 18px; padding: 0.25em 0.75em 0.4em; border-radius: 20px; line-height:1;}
ul.btn .icon { display: inline-flex; align-items: center; margin-right: 0.4em;}
ul.btn a:hover { opacity: 0.85;}
.arrow { display: inline-flex; align-items: center;margin-right: 0.35em;}
.arrow svg { width: 0.9em; height: 0.9em; display: block;padding-top: 0.15em;}

.waveBlue ul.btn {color; #0a0;}
.waveBlue ul.btn a {background: #fff; color: #0a0;}


/*--index.html---------------------------------------------*/
#bidHome .cNavi {background: #2aa712; border: none;}
#bidHome header.local { background: #fff; width: 1180px; margin:0 auto; padding: 1em; border-radius:10px; display: flex; align-items: center; font-size: 1.1em; line-height:1.2;}
/*--topImg----*/
.topImg {background-image: url('/jp/chikuwa/img/ckw00003.gif'); background-repeat: no-repeat; background-position: center center; background-size: cover; width: 100%; /*height: 100vh;*/ background-color:#2aa712; width: 100%; position: relative; z-index: -1; padding-bottom: 1em; /*min-height: 748px;*/}

.topImgBg {position: relative; aspect-ratio: 16 / 9;}
h1::after { content: ""; position: absolute; top: 0; left: 0; opacity: 0.2; width: 100%; height: 100%; background-image: url('/jp/chikuwa/img/ckw00001.gif'), url('/jp/chikuwa/img/ckw00002.gif'); background-repeat: no-repeat; background-position: top left, top right; background-size: auto, auto;  z-index: -1;}
.topImg h1 {width: 100%; position:absolute; top:0; text-align:center;inset: 0; object-fit: cover;}
.topImg h1 img{width: auto;}
/*--slider----*/
.slider { overflow: hidden; width: 100vw; /* 1. 親を無視して画面幅(viewport)にする */
  margin-left: calc(50% - 50vw); /* 2. 画面の左端へ戻す計算 */
  margin-right: calc(50% - 50vw);overflow: hidden; padding: 100px 0;}
.slider-track { display: flex; flex-wrap: nowrap; will-change: transform; align-items: center;}
.slider-track li { flex-shrink: 0; margin: 10px 15px; transform: translateY(var(--offset)); will-change: transform;}
.slider-track li img { display: block; width: auto;  height: auto; border-radius:0.8em;}

.recipe {margin-bottom:0;}
.lineup .flexBox div {width: 46%;}
.lineup .flexBox div a {display: block; width: 100%;}
.lineup .flexBox figure { border: 0.8em solid #ddd; border-radius: 10px;}
.lineup .flexBox figure img {border: none; border-radius: 0; margin-bottom: 1em; padding: 1em 0 0;}
.lineup .flexBox figure figcaption {text-align: center;}

/*--ckw01000.html---------------------------------------------*/
.fish {display: grid;
  grid-template-columns: repeat(4, 1fr); /* 固定戸数 */
  gap: 1px;                /* ← これが線 */
  background: #ccc;}
.fish > div { transition: background-color .2s, color .2s;background: #f9f8f3;}
.fish > div a {padding:1.5em; display: block;}
.fish > div a:hover { background: #e7f0ef;transition: 0.3s;}
.fish > div figure {border-radius: 10px; border: 1px solid #ddd;  background: #fff; margin-bottom:0;}
.fish > div figure img {width: 80%; padding: 1.5em 0;}
.fish > div h3 {text-align:center; color: #000; font-size:1.1em; padding: 0.75em; font-weight:bold; text-decoration:underline;}
.fish > div p { color: #000; font-size:1em;  display: -webkit-box; -webkit-box-orient: vertical;  -webkit-line-clamp: 3; /* 行数 */ overflow: hidden;}
.fish > div ul.link {text-align:center;}
.fish > div ul.link li { position: relative; display: inline-flex; align-items: center; gap: 3px;}
.fish > div ul.link li::after {content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor;}
.fish > div a:target { display: block; }
.fish > div a:hover { text-decoration:none;color: #fa0014;transition: 0.5s;}

/* modal */
.modal { position: fixed; inset: 0; z-index: 1000; /* 初期状態 */ opacity: 0; pointer-events: none; transition: opacity .3s ease;}
.modal.is-open { opacity: 1; pointer-events: auto;}
.modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,.75);}
.modal__content { position: relative; max-width: 70%; margin: 20vh auto; padding: 24px; background: #e9e8e3; border-radius: 10px; transform: translateY(20px); opacity: 0; transition: opacity .6s ease, transform .3s ease;}
.modal.is-open .modal__content { transform: translateY(0); opacity: 1;}
.modal__close { position: absolute; top: 12px; right: 16px; font-size: 24px; background: none; border: none; cursor: pointer;z-index: 2;}
.modal__close:hover { color: #fa0014;transition: 0.5s;}
.modal .flexBox {padding: 1em; gap: 24px;}
.modal .flexBox figure {width: 45%; aspect-ratio: 1 / 1; background: #fff;display: flex; align-items: center; justify-content: center;overflow: hidden; border-radius: 10px; margin:0;}
.modal .flexBox figure img { object-fit: contain object-position: center;}
.modal .flexBox div {width: 50%; display: flex; flex-direction: column;}
.modal .flexBox div h3 {color: #1090bf; font-weight: bold; text-decoration: underline;}
.modal .flexBox div h4 {font-size: 1.4em; margin-bottom: 0.25em;}
.modal .flexBox div p {margin-bottom: 1.5em;}

/*--ckw02000.html---------------------------------------------*/
.kamaboko {display: grid;
  grid-template-columns: repeat(4, 1fr); /* 固定戸数 */
  gap: 15px;}
.kamaboko div {border-radius:10px; padding: 1em; background: #f9f8f3;}
.kamaboko div figure {overflow: hidden; margin:0; width: 100%;}
.kamaboko div figure img { background: #fff; padding: 0.75em; border-radius: 10px;}
.kamaboko div figure figcaption {font-weight: bold; color: #000; text-align: center; margin-bottom:0}
.kamaboko div figure figcaption span {display: block; color: #fa0014;}

/*--ckw03000.html---------------------------------------------*/
.processMain, .processThumbs { position: relative; background: #88d7fe; border-radius:10px; margin-bottom: 1em;}
.processThumbs {margin-bottom: 0; padding:0.75em;}
.swiper-slide h3 { display: flex; align-items: center; font-size: 3em; line-height: 2;color: #000;}
.swiper-slide h3 span { display: inline-flex; align-items: center; justify-content: center; width: 8%; min-width: 2.5em;  background: #2b5bff; color: #fff; border-radius: 10px 0 0 0;margin-right: 0.25em;}
.swiper-slide .flexBox {ap:18px; align-items:flex-start; margin: 1.5em;}
.swiper-slide .flexBox figure {width: 45%; margin-bottom: 0;}
.swiper-slide .flexBox figure img {border-radius: 10px;}
.swiper-slide .flexBox div {width: 53%; position: relative;}
.swiper-slide .flexBox div p {color: #000;}

/* ナビを右下に重ねる */
.processNavWrap { position: absolute; right: 3em; bottom: 2em;;     /* ← pの下に来る位置 */ display: flex; gap: 8px; z-index: 10;}
.swiper-slide .flexBox p { padding-bottom: 56px; /* ナビ高さ分 */}
.processNav { width: 44px; height: 44px; border-radius: 50%; background: #2fbb3a; display: flex; align-items: center; justify-content: center; overflow: hidden; position: static; left: auto; right: auto; top: auto; bottom: auto; transform: none;}
.processNav::after { font-size: 20px; line-height: 1; color: #fff; font-weight: bold;}

.processThumbs ul { list-style: none; padding: 0; margin: 0; display: flex; align-items: center; justify-content: center;}
.processThumbSlide {width: 110px; overflow: hidden; border-radius: 10px; cursor: pointer; border: 4px solid #fff;}
.processThumbSlide img { width: 100%; height: 100%; object-fit: cover;  display: block; }
.processThumbSlide img:hover, .processNav:hover { opacity: 0.6; transition: 0.3s;}
.processThumbSlide.swiper-slide-thumb-active { border-color: #ceff94; opacity: 1;}


@media screen and (max-width:1180px){
	#bidHome header.local, section div.contents, header.local {width: 95%;}
}

@media screen and (max-width:767px){
	#wrapper {min-width:100%;}
	#article {margin: 0 3%; width:94%;}
	.pcOnly { display:none;}
	.spOnly { display:block !important;}
	header.local .logo {width: 40%; min-width: 140px;}

	.lineup .flexBox div {width: 100%;}
	
	/*.flexBox {margin-left:-4%;}*/
	figure.itemBox {max-width:160px; max-height:160px; width:46%; margin-left:4%;}
	figure.itemBox a img {margin-top:10px;}
	
	header.highlight { position: relative;text-align: center;margin-bottom: 30px;}
	
	header.highlight:before{background:#c22;position: absolute;left: 0;top: 50%;width: 100%;height: 1px;background: #c22;z-index: 0;content: '';display: block;}
	
	#bidHome #article .highlight h2 {
	/*--reset--*/background-image:none;height:auto;width:auto;text-indent:0;
	/*--pc--*/font-size: 30px;text-align: center;display: inline-block; padding: 0 40px;background: #fff;position: relative;z-index: 1;line-height: 40px;color: #c22;
	/*--sp--*/font-size: 20px;line-height: 1.4;margin-left: 15px;margin-right: 15px;; padding: 0 20px}
	
	
	h1::after {background-size: 50%; }
	h2 {font-size: 2.5em;}
	h3  {font-size: 1.3em;}
	ul.btn a {font-size: 1em;}
	.flexBox {display:block;}
	.flexBox div {width: 98%;}
	.slider-track li {max-width: 50%;}
	
	.flexBox.kamaboko, .flexBox.fish {display: grid; grid-template-columns: repeat(2, 1fr);}
	.flexBox.kamaboko div {width: auto;}
	.flexBox.fish div {width: 100%;}
	.modal__content {max-width: 80%; margin: 5vh auto;}
	.modal .flexBox {padding: 0;}
	.modal .flexBox figure {aspect-ratio: 16 / 9;margin-bottom: 1em;}
	.modal .flexBox figure, .modal .flexBox div {width: 100%;}
	.modal .flexBox div h4 {font-size: 1.2em;}
	.modal__close {top: 0; right: 0;}
	
	.swiper-slide h3 {font-size: 2em;}
	.swiper-slide .flexBox figure, .swiper-slide .flexBox div {width: 100%;}
	
	.processThumbs .swiper-wrapper{ justify-content: space-between; }
	.processThumbSlide{  width: var(--thumbW, 44px); border-width: 1px; border-radius: 0;}
	
	
	/*-- header -------*/
	header.local{ flex-direction: row; align-items: center; gap: 12px; padding: 1em 0.25em; gap: 1.5em;}
	header.local .logo{ margin-right: 0 !important; flex: 0 0 auto; }
	header.local nav#localNav{ flex: 1 1 auto; width: auto !important; position: relative; /* ドロップダウンの基準は維持 */}
	/* メニュー（トグル）を右寄せ */
	#localNav > .navToggle{ justify-content: flex-end !important; gap: 8px; padding: .6em 0; text-align: right; font-size: 0.9em; background: #fff; border: 1px solid #ddd;}
	header.local nav#localNav > #cNaviList{ left: auto;  right: 0; width: 100%; top: 44px; }
	/* インジケータはSPでは非表示 */
	#cNaviIndicator{ display: none !important; }
	/* ul（閉じてる状態） */
	header.local nav#localNav > #cNaviList{ position: absolute;
	top: 34px;  left: 0; right: 0; display: block !important; background: #fff; list-style: none; margin: 0 !important; padding: 0 !important; max-height: 0; overflow: hidden; transition: max-height .6s ease;  z-index: 100; box-shadow: 0 10px 24px rgba(0,0,0,.08); font-size:0.8em}
	/* 開いた状態 */
	header.local nav#localNav.is-open > #cNaviList{ max-height: 60vh; }
	/* 縦並びの行 */
	header.local nav#localNav > #cNaviList > li{ margin: 0 !important; border-top: 1px solid #eee; text-align: left; }
	header.local nav#localNav > #cNaviList > li a{ padding: 0.75em 0.5em; display: block;}
	header.local nav#localNav > #cNaviList > li a:hover {background: #eee;}
	header.local nav#localNav > #cNaviList a br{ display: none; }
	#localNav > .navToggle{ display:flex !important; align-items:center; justify-content: space-between; width:100%; }
	/* ▼を右端に */
	#localNav > .navToggle::after{ content:"▾"; font-size: 1.1em; line-height: 1; margin: 0 0.75em 0 0.25em;}
	/* 開いている時は▲に */
	#localNav.is-open > .navToggle::after{ content:"▴"; }
	#localNav #cNaviList > li.is-current{ background: #f9e7e7; /* 薄い色：お好みで */ }
	#cNaviList > li.is-current{ background: #f9e7e7; }
	#cNaviList > li.is-current a{ pointer-events: none; cursor: default; }