@charset "utf-8";
/*-----スタイルシート　1910--------------------------------------------*/
/*HTML5 Doctor Reset Stylesheet*/
@import url("rest.css");
/*-------------------------------------------------*/
/*全体設定*/ :root {
--ac1: #f7ad1f;
--ac2: #00AEBB;
--tx1: #1A020B;
--f-not: noto-sans-cjk-jp, sans-serif;
--f-tkb: fot-tsukubrdgothic-std, sans-serif;
--f-min: vdl-v7mincho, sans-serif;
--f-fai: fairwater-script, sans-serif;
}
html {
font-size: 20px;
scroll-behavior: smooth;
scroll-padding-top: 80px;
}
/*-------ローカルに置き換え-----------*/
h1, h2, h3, h4, h5, h6 {
font-weight: normal;
}
/*--------------------*/
.sp_only {
display: none;
}
#wrapper {
width: 100%;
font-family: var(--f-not);
font-size: 20px;
color: var(--tx1);
}
#contents {
width: 100%;
margin: 0 auto;
}
div, section {
justify-content: space-between;
flex-wrap: wrap;
}
p {
line-height: 1.5em;
letter-spacing: 0.06em;
}
/* 481～840px */
@media screen and (min-width: 481px) and (max-width: 840px) {
.example {}
}
/* ～480px */
@media screen and (max-width: 480px) {
.example {}
}
/*-------------------------------------------------*/
/*ヘッダー*/
header {
width: 100%;
min-width: 1100px;
position: absolute;
z-index: 1;
}
header h1 {
text-align: center;
font-size: 0.8rem;
padding: 5px 0 5px;
background: rgba(255,255,255,0.35);
}
/*
.header_nav {}
.header_nav ul {
display: flex;
align-items: top;
margin-top: 15px;
margin-right: 25px;
}
.header_nav ul li {
margin: 8px 2px;
font-size: 19px;
font-weight: 600;
}
.header_nav ul li a {}
.header_nav ul li a:not(.hd_icon) {
padding: 4px 9px 6px;
transition: 0.45s ease-in-out;
}
.header_nav ul li a:not(.hd_icon):hover {
background: rgba(0, 0, 0, 0.5);
}
.header_nav ul li a.hd_icon {
border: 1px #555 solid;
border-radius: 26px;
text-align: center;
font-size: 27px;
padding: 6px 11px 4px;
margin-left: 10px;
transition: 0.35s ease-in-out;
}
.header_nav ul li a.hd_icon:hover {
background: #eee;
}
*/
.pagetop {
position: fixed;
padding: 20px 14px 25px;
right: -80px;
bottom: 90px;
z-index: 101;
background: var(--ac1);
font-size: 18px;
text-align: center;
letter-spacing: 0.00em;
transition: 0.7s;
border-radius: 15px;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
cursor: pointer;
}
.pagetop.act {
right: 10px;
}
.instafix {
position: fixed;
right: 10px;
bottom: 10px;
background: var(--ac1);
background: #DC68BE;
z-index: 800;
padding: 18px;
font-size: 1.8rem;
border-radius: 15px;
color: #fff;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
/*-----フェードアニメーション-----*/
.fade-in {
opacity: 0;
transition-duration: 500ms;
transition-property: opacity, transform;
}
.fade-in-up {
transform: translate(0, 50px);
}
.fade-in-down {
transform: translate(0, -50px);
}
.fade-in-left {
transform: translate(-50px, 0);
}
.fade-in-right {
transform: translate(50px, 0);
}
.scroll-in {
opacity: 1;
transform: translate(0, 0);
}
.delay1 {
transition-delay: 0.4s;
}
.delay2 {
transition-delay: 0.8s;
}
/*-----スクロールアニメーション-----*/
.scr_act {
/*transition: 0.8s ease-in-out;*/
}
/*-------------------------------------------------*/
/*フッター*/
footer {
width: 100%;
min-width: 1100px;
position: relative;
padding: 15px 0 15px;
overflow: hidden;
background: var(--ac2);
}
footer > img {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: calc(10vw + 1240px);
filter: drop-shadow(1px 1px 8px rgba(0, 0, 0, 0.3));
}
footer > div {
z-index: 3;
position: relative;
}
footer > div {
display: flex;
width: 1100px;
margin: 0 auto;
align-items: center;
}
footer > div img {
width: 523px;
}
footer > div ul {
color: #fff;
display: flex;
flex-flow: column;
padding-top: 100px;
padding-bottom: 30px;
gap:6px;
}
footer > div ul li {
padding: 8px;
text-align: right;
font-size: 0.9rem;
}
footer > p {
text-align: right;
font-size: 0.8rem;
opacity: 0.6;
width: 1100px;
margin: 0 auto;
}


/*-------------------------------------------------*/
/*コンテンツ*/
/*◆◆◆◆◆◆◆◆◆*/
/*◆◆　TOP　◆◆*/
/*--////　main_visual　////--*/
#main_visual {
width: 100%;
min-width: 1100px;
height: 90vh;
background: url("../images/main.webp") no-repeat center center;
background-size: cover;
}


/*--////　banner_roll　////--*/
#banner_roll {
padding: 30px 0;
}
#banner_roll h2 {
font-family: var(--f-tkb);
font-size: 1.7rem;
font-weight: 700;
text-align: center;
padding-bottom: 10px;
}
#banner_roll h2 span {
font-family: var(--f-fai);
font-size: 1rem;
display: inline-block;
margin-left: 15px;
color: var(--ac2);
}
#banner {
position: relative;
}
#banner .prev-arrow, #banner .next-arrow {
position: absolute;
background-image: linear-gradient(-90deg, rgba(255, 255, 255, 1)25%, rgba(255, 255, 255, 0));
width: 46px;
height: 100%;
z-index: 10;
top: 0;
opacity: 0.8;
transition: 0.1s;
}
#banner .prev-arrow {
right: 0;
}
#banner .next-arrow {
transform: scale(-1, 1);
left: 0;
}
#banner .prev-arrow::after, #banner .next-arrow::after {
content: "";
position: absolute;
width: 18px;
height: 18px;
border: solid #129;
border-width: 5px 5px 0 0;
right: 8px;
top: 50%;
transform: translateY(-50%) rotate(45deg);
}
#banner .prev-arrow:hover, #banner .next-arrow:hover {
opacity: 1;
}
#banner a {
margin: 13px;
opacity: 1;
transition: 0.15s;
}
#banner a:hover {
opacity: 0.7;
}
#banner a img {
width: 100%;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
#banner a div {
margin-top: 8px;
border: 2px solid var(--ac1);
display: flex;
flex-flow: column;
border-radius: 5px;
font-size: 0.65rem;
text-align: center;
}
#banner a div p {
padding: 3px 0 3px;
background: var(--ac1);
border-radius: 3px 3px 0 0;
color: #fff;
}
#banner a div h3 {
padding: 6px 5px 6px;
}
/*--////　inari　////--*/
#inari {
padding: 70px 0;
}
.midasi {
text-align: center;
font-family: var(--f-tkb);
font-size: 2.1rem;
font-weight: 700;
margin-bottom: 40px;
}
.midasi span {
font-family: var(--f-fai);
font-size: 1.4rem;
display: block;
color: var(--ac2);
margin-top: 19px;
}
#inari > div {
width: 1100px;
margin: 30px auto 0;
display: flex;
}
#inari .inari_L {
width: calc(50vw - 20px);
min-width: 530px;
margin-left: min(0px, calc(550px - 50vw));
padding-left: max(0px, calc(50vw - 550px));
padding-right: 40px;
padding-top: 60px;
padding-bottom: 60px;
background: url("../images/inari_bg.webp");
background-size: cover;
}
#inari .inari_L h3 {
font-family: var(--f-min);
font-size: 1.7rem;
line-height: 1.25em;
margin-bottom: 20px;
}
#inari .inari_L p {
line-height: 1.5em;
}
#inari .inari_L a {
display: block;
margin: 30px auto 0;
background: var(--ac2);
padding: 15px 0;
width: 320px;
text-align: center;
color: #fff;
border-radius: 26px;
}
#inari .inari_R {
width: 530px;
display: flex;
flex-wrap: wrap;
gap: 20px 0;
}
#inari .inari_R img {
height: 165px;
}
#inari .inari_R img:nth-of-type(-n+2) {
height: 260px;
}
/*--////　eventlist　////--*/
#eventlist {
padding: 90px 0;
background: #e5f7f8;
}
.evlst {
width: 1100px;
margin: 0 auto 0;
display: flex;
justify-content: space-between;
gap: 60px 0px;
flex-wrap: wrap;
}
.evlst li {
opacity: 1;
transition: 0.15s;
width: 345px;
}
.evlst li:hover {
opacity: 0.8;
}
.evlst img {
width: 100%;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
.evlst div {
display: flex;
flex-flow: column;
border: 2px var(--ac2) solid;
margin: 18px 0 10px;
border-radius: 10px;
font-family: var(--f-tkb);
text-align: center;
}
.evlst div p {
background: #16a7a8;
color: #fff;
padding: 2px 4px 4px;
border-radius: 8px 8px 0 0;
font-weight: 800;
font-size: 17px;
letter-spacing: -0.01em;
}
.evlst div h4 {
padding: 5px 12px 7px;
font-weight: 800;
}
.evlst h3 {
text-align: center;
font-family: var(--f-tkb);
font-weight: 800;
font-size: 1.2rem;
margin-bottom: 8px;
}
.evlst li a > p {
font-family: var(--f-not) !important;
font-size: 16px;
line-height: 1.2em;
}
/*--////　calender　////--*/
#calender {
padding: 90px 0;
position: relative;
}
#calender > img {
position: absolute;
z-index: -1;
}
#calender > img:nth-of-type(1) {
width: 725px;
top: 0;
left: 0;
}
#calender > img:nth-of-type(2) {
width: 675px;
top: 0;
right: 0;
}
#calender > img:nth-of-type(3) {
width: 420px;
bottom: 0;
left: 0;
}
#calender > img:nth-of-type(4) {
width: 440px;
bottom: 0;
right: 0;
}
.event-calendar {
width: 1100px;
margin: 0 auto;
font-family:
-apple-system, BlinkMacSystemFont, "Helvetica Neue", "Yu Gothic", "YuGothic", "Meiryo", sans-serif;
color: #111;
box-sizing: border-box;
}
.event-calendar *, .event-calendar *::before, .event-calendar *::after {
box-sizing: border-box;
}
/* ========曜日======== */
.weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
border-top: 1px solid #777;
border-left: 1px solid #777;
font-family: var(--f-tkb);
font-size: 1.5rem;
}
.weekdays > div {
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
background: #e4f0da;
font-size: 23px;
font-weight: 700;
}
.weekdays .sun {
background: #f3a1a8;
}
.weekdays .sat {
background: #8fc2ec;
}
/* =======1週間============= */
.week {
position: relative;
display: grid;
grid-template-columns: repeat(7, 1fr);
border-left: 1px solid #777;
}
/* =======1日のマス=========== */
.day {
/*1日のマスの高さ全週固定*/
height: 239px;
padding: 8px 10px 45px;
border-right: 1px solid #777;
border-bottom: 1px solid #777;
background: #fff;
}
/* ========日付============= */
.date {
margin-bottom: 8px;
font-size: 1.1rem;
font-weight: 700;
line-height: 1;
}
/* ======通常イベント========== */
.evt {
display: block;
width: 100%;
margin-bottom: 6px;
padding: 5px 6px 4px;
border-radius: 6px;
color: #111;
text-decoration: none;
font-size: 16px;
font-weight: 600;
line-height: 1.25;
text-align: center;
transition:
opacity .2s ease, transform .2s ease;
}
.evt:hover {
opacity: .75;
}
/* ======イベントごとの色======== */
/* 開戸式・閉戸式 */
.ev-siki {
background: #bd773d;
color: #fff;
border-radius: 0;
}
/* 進雄神社 */
.ev-sinyu {
background: #945f96;
color: #fff;
border-radius: 0;
}
/* マツケン将軍お成り行列 */
.ev-matu {
background: #819a38;
color: #fff;
border-radius: 0;
}
/* 秋の大祭 */
.ev-taisai {
background: #b85c54;
color: #fff;
border-radius: 0;
}
/* 白狐祭 */
.ev-byakko {
background: #376ba5;
color: #fff;
border-radius: 0;
}
/* かわしん */
.ev-kawas {background: #9bd4e8;}
/* 火肉 */
.ev-kaniku {background: #efa39a;}
/* 稲荷寿司 */
.ev-susi {background: #f7dc83;}
/* スイーツ */
.ev-swee {background: #ee9cbd;}
/* 鰻 */
.ev-unagi {background: #91bddc;}
/* サーラ */
.ev-sala {background: #8bd2b4;}
/* 夜市 */
.ev-yoiti {background: #cba0ca;}
/* ヨルモウデ */
.ev-mode {background: #aaa8cc;}
/* 朝市 */
.ev-asa {background: #e9df82;}
/* ヤマサ */
.ev-yamasa {background: #f3c083;}

/* =毎日開催イベント============= */
.week-event {
position: absolute;
left:
calc(((var(--start) - 1) / 7 * 100%) + 10px);
width:
calc((var(--span) / 7 * 100%) - 20px);
bottom: 10px;
min-height: 30px;
display: flex;
align-items: center;
justify-content: center;
gap: 14px;
padding: 5px 10px;
border-radius: 6px;
background: #d8ecd4;
font-size: 16px;
font-weight: 600;
line-height: 1;
}
/* 「毎日開催」はリンクなし */
.week-event-label {
white-space: nowrap;
}
/* お宝逸品・ジャンダラー祭 */
.week-event-link {
color: #111;
text-decoration: none;
white-space: nowrap;
transition: opacity .2s ease;
}
.week-event-link:hover {
opacity: .6;
text-decoration: underline;
}
/* ====最終行============ */
.week:last-child .day {
border-bottom: 1px solid #777;
}
.calendar-scroll {
width: 100%;
}
/*--////　guide　////--*/
#guide {
padding: 90px 0;
overflow: hidden;
position: relative;
}
#guide > img {
position: absolute;
z-index: -1;
}
#guide > img:nth-of-type(1) {
width: 635px;
top: 0;
left: 0;
}
#guide > img:nth-of-type(2) {
width: 315px;
right: 0;
bottom: 0;
}
.guid_dny {
width: 1100px;
margin: 0 auto;
display: flex;
align-items: center;
}
.guid_dny div {
width: 520px;
}
.guid_dny div h3 {
font-size: 1.8rem;
font-weight: 700;
font-family: var(--f-tkb);
margin-bottom: 30px;
}
.guid_dny div p {
}
.guid_dny > img {
width: calc(50vw - 20px);
margin-right: calc(560px - 50vw);
}
.guid_sho {
display: flex;
width: 1100px;
margin: 80px auto 0;
gap:40px;
}
.guid_sho li {
width: 340px;
}
.guid_sho li img {
width: 100%;
}
.guid_sho li h3 {
text-align: center;
font-family: var(--f-tkb);
padding: 15px 0;
margin-bottom: 18px;
font-weight: 700;
font-size: 1.6rem;
}
.guid_sho li:nth-of-type(1) h3 {
background: #f16992;
}
.guid_sho li:nth-of-type(2) h3 {
background: #f8c200;
}
.guid_sho li:nth-of-type(3) h3 {
background: #91c93e;
}
.guid_sho li h4 {
text-align: center;
font-family: var(--f-tkb);
margin-bottom: 15px;
font-weight: 700;
font-size: 1.25rem;
}
.guid_sho li p {
font-size: 0.85rem;
}
/*--////　r-link　////--*/
#r-link {
padding: 80px 0;
background: var(--ac2);
}
#r-link h2 {
margin-bottom: 40px;
}
#r-link h2 span {color: #fff;
}
#r-link div {
width: 1100px;
margin: 0 auto 0;
display: flex;
justify-content: center;
gap:28px 3%;
}
#r-link div a {
width: 22%;
}
#r-link div a img {
width: 100%;
filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}


/*--////　sponser　////--*/
#sponser {
padding: 90px 0;
}
#sponser ul {
width: 1100px;
margin: 0 auto 0;
display: flex;
justify-content: center;
flex-wrap: wrap;
}
#sponser .spM {
gap:50px 25px;
margin-bottom: 60px;
}
.spo_M {
width: 350px;
}
#sponser .spS {
gap:45px 23px;
margin-bottom: 50px;
}
.spo_S {
width: 257px;
}
#sponser .spT {
gap:10px 11px;
}
.spo_T {
font-size: 0.85rem;
width: 350px;
padding: 5px 0;
text-align: center;
background:#f0F4Fa;
}

#sponser ul a {
}
#sponser ul li img {
width: 100%;
}
/*--////　what　////--*/
#what {
padding: 90px 0;
background: url("../images/what.webp");
background-size: cover;
}
#what h2 span {
color: #fff;
}
#what p {
width: 650px;
margin: 0 auto;
filter: 
drop-shadow(1px 1px 3px rgba(255,255,255,0.8)) 
drop-shadow(1px 1px 3px rgba(255,255,255,0.8)) 
drop-shadow(-1px -1px 4px rgba(255,255,255,0.7)) 
drop-shadow(-1px -1px 4px rgba(255,255,255,0.7));
}
#what a {
display: block;
margin: 70px auto 0;
background: #DC68BE;
padding: 15px 0;
width: 420px;
text-align: center;
color: #fff;
border-radius: 26px;
}

/*--////　sub_visual　////--*/
#sub_visual {
width: 100%;
min-width: 1100px;
height: 220px;
background: url("../images/sub_head.webp") no-repeat left top;
background-size: 1400px;
position: absolute;
}
/*--////　sub_ttl　////--*/
#sub_ttl {
padding: 170px 0 0px;
}
/*--////　tmp_area　////--*/
#tmp_area {
width: 1000px;
margin: 0 auto;
padding: 10px 0 80px;
display: flex;
flex-flow: column;
gap:50px;
}
/*--////　calam3　////--*/
.bigbanner {
}
.bigbanner img {
width: 100%;
}
/*--////　calam2　////--*/
.calam2 {
display: flex;
}
.calam2 > div {
width: 47%;
}
.cl2_flimg {
display: flex;
flex-flow: column;
gap:30px;
}
.cl2_flimg img {
width: 100%;
}

.cl2_mtx div:not(.linkbt) {
display: flex;
align-items: center;
flex-flow: column;
border: 1px var(--ac2) solid;
border-radius: 5px;
font-family: var(--f-tkb);
font-weight: 800;
margin: 5px 0 15px;
text-align: center;
}
.cl2_mtx div:not(.linkbt) p {
width: 100%;
background: var(--ac2);
border-radius: 4px 4px 0 0;
color: #fff;
padding: 2px 8px;
}
.cl2_mtx div:not(.linkbt) h4 {
width: 100%;
padding: 5px 8px 9px;
}
.cl2_mtx div.linkbt {
display: flex;
justify-content: center;
gap:10px;
}
.cl2_mtx div.linkbt a {
align-items: center;
border: 2px var(--ac1) solid;
background: var(--ac1);
padding: 14px 18px;
border-radius: 7px;
filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 0.15));
}
.cl2_mtx h3 {
font-family: var(--f-tkb);
font-weight: 800;
font-size: 1.3rem;
margin: 10px 0 18px;
}
.cl2_mtx > p {
margin-bottom: 25px;
}
.dots-style {
margin: 3px 0;
display: flex;
gap:3px;
justify-content: center;
}

.dots-style li {
width: 60px;
height: 5px;
background: #ddd;
cursor: pointer;
}
.dots-style li.slick-active {
background: var(--ac2);
}
.dots-style li:hover {
background: var(--ac2);
opacity: 0.6;
}
.dots-style li button {
display: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
outline: none;
padding: 0;
border: none;
background-color: transparent;
}

/*--////　calam3　////--*/
.calam3 {
display: flex;
}
.calam3 img {
width: 31.5%;
}
/*--////　table　////--*/
.table {
}
.table table {
border-collapse: collapse;
width: 100%;
font-family: var(--f-tkb);
}
.table table tr {
}
.table table th,
.table table td {
border: 1px solid #aaa;
padding: 12px 12px 12px;
line-height: 1.22em;
}
.table table th {
width: 280px;
text-align: center;
background: #e5f7f8;
}
.table table td {
}
.table table td a {
background: var(--ac2);
color: #fff;
padding: 3px 15px 7px;
font-size: 0.85rem;
display: inline-block;
vertical-align: middle;
border-radius: 11px;
margin: 3px 4px 8px;
}

/*--////　totop　////--*/
.totop {
display: block;
width: 280px;
padding: 15px 0;
background: var(--ac2);
text-align: center;
margin: 0 auto 80px;
color: #fff;
border-radius: 5px;
}
/*--////　店舗リスト　////--*/
#md_shop_list {
margin: 0 auto 40px;
background: rgba(22,167,168,0.08);
padding: 90px 0;
}
#md_shop_list ul {
width: 1000px;
margin: 0 auto;
display: flex;
justify-content: space-between;
gap:30px 0;
flex-wrap: wrap;
}
#md_shop_list li {
width: 485px;
padding: 25px 30px;
background: #fff;
/*filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.20));*/
border-radius: 4px;
display: flex;
align-items: center;
justify-content: space-between;
}
#md_shop_list li h3 span {
font-size: 0.8rem;
display: inline-block;
margin: 0 4px;
}
#md_shop_list li p {
padding: 4px 20px;
background: var(--ac1);
cursor: pointer;
border-radius: 5px;
font-size: 0.85rem;
}
/* モーダル外 */
.modal_w {
position: fixed;
inset: 0;
z-index: 9999;
background: rgba(0, 0, 0, 0.45);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity 0.3s ease, visibility 0.3s ease;
}
/* 開いた状態 */
.modal_w.is_open {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* モーダル本体 */
.modal_box {
width: 960px;
margin: 80px auto;
padding: 40px;
background: #fff;
position: relative;
border-radius: 8px;
transform: translateY(10px);
transition: transform 0.3s ease;
display: flex;
}
.modal_w.is_open .modal_box {
transform: translateY(0);
}
.modal_close {
position: absolute;
right: 0;
top: 0;
padding: 8px 16px;
border: none;
background: #ccc;
cursor: pointer;
border-radius: 0 6px 0 6px;
}
.mdb-L {
width: 550px;
font-family: var(--f-tkb);
position: relative;
letter-spacing: 0em;
}
.mdb-L h3 {
font-weight: 800;
font-size: 1.3rem;
display: flex;
align-items: center;
gap:6px;
margin-bottom: 8px;
}
.mdb-L h3 span {
font-size: 0.9rem;
}
.mdb-L h4 {
font-size: 0.9rem;
}
.mdb-L a {
position: absolute;
right: 0;top: 0;
background: var(--ac1);
padding: 15px 0 20px;
width: 56px;
text-align: center;
font-size: 0.8rem;
font-weight: 700;
}
.mdb-L .jouken {
margin: 22px 0;
padding: 15px;
background: #EC6D81;
font-size: 0.9rem;
color: #fff;
}
.mdb-L .jouken span {
font-size: 0.70rem;
display: inline-block;
margin: 0 3px;
}
.mdb-L .shouhin {
font-weight: 700;
font-size: 0.9rem;
margin-bottom: 15px;
padding-bottom: 15px;
border-bottom: 2px solid #EC6D81;
}
.mdb-L .shouhin span {
font-size: 0.70rem;
display: inline-block;
margin: 0 3px;
}
.mdb-L .setsumei {
font-size: 0.85rem;
}
.mdb-R {
width: 280px;
}
.mdb-R img {
width: 100%;
}