@charset "UTF-8";

:root {font-size:16px;}
@media (max-width:1068px) {:root {font-size:15px;}}
@media (max-width:734px) {:root {font-size:14px;}}

/* PC版ヘッダーの高さ = トップバーの高さ+ナビゲーションバーの高さ */
:root {--header-pc-height:calc(var(--header-topbar-height) + var(--header-navi-height));}
/* モバイル版ヘッダーの高さ */
:root {--header-mobile-height:50px;}
/* ロゴの高さ */
:root {--header-logo-height:40px;}
/* トップバーの高さ */
:root {--header-topbar-height:50px;}
/* ナビゲーションバーの高さ */
:root {--header-navi-height:0px;}

/* h2の下線の色 */
:root {--h2-line-color:linear-gradient(to right, #185a9d, #43cea2);}

/* 明朝体フォント */
:root {--serif:'Noto Serif JP', serif;}
/* テキストカラー */
:root {--text-color:#222;}
:root {--text-color-white:#FFF;}
:root {--text-link-color:#0070c9;}

/* フッター背景画像 */
:root {--footer-image:url(images/bg-photo-contact.jpg) center center;}
/* フッターの背景色 */
:root {--footer-bg-color:var(--black-color-dark);}


/* メインカラー */
:root {--main-color-light:	#94c7e4 } /* 大洗の空の色 */
:root {--main-color:		#0096e0 }
:root {--main-color-dark:	#005fab }


/* サブカラー */
:root {--sub-color-light:	#DEF5FC }
:root {--sub-color:			#1eb9ee }
:root {--sub-color-dark:	#116988 }

/* アクセントカラー */
:root {--accent-color-light:#FFEEE4 }
:root {--accent-color:		#FFBE98}
:root {--accent-color-dark:	#DC5C19 }

/* エキストラカラー */
:root {--extra-color-light:	#DFF4F2 }
:root {--extra-color:		#1eb9ee }
:root {--extra-color-dark:	#20B2AA }


/* スマホ ドロワーカラー */
:root {--drawer-bg-color:var(--grey-color-light);}
:root {--drawer-text-color:var(--white-color-light);}
:root {--hamburger-color:var(--main-color);}
:root {--hamburger-line-color:var(--white-color-light);}

/* トップバー */
:root {--topbar-color:var(--black-color-dark);}
:root {--topbar-text-color:var(--text-color-white);}


/* 枠線 */
:root {--border-color-light:var(--white-color-light);}
:root {--border-color:#d8d8d8;}
:root {--border-color-dark:#3c4858;}

/* 影 */
:root {--box-shadow-light:0 1px 4px 0 rgba(0,0,0,.2)}
:root {--box-shadow:6px 6px 16px 0px rgba(0,0,0,0.2)}

/* 黒 */
:root {--black-color-light:#d8d8d8;}
:root {--black-color:#3c4858;}
:root {--black-color-dark:#333;}

/* 白 */
:root {--white-color-light:#fff;}
:root {--white-color:#fdfdfd;}
:root {--white-color-dark:#f7f7f7;}

/* グレー */
:root {--grey-color-light:#f5f5f7;} /*  */
:root {--grey-color:#dcdcde;}
:root {--grey-color-dark:#c4c4c5;}
:root {--gray-color-light:#f5f5f7;} /*  */
:root {--gray-color:#dcdcde;}
:root {--gray-color-dark:#c4c4c5;}

/* ベージュ */
:root {--beige-color-light:#fbf5f0;}
:root {--beige-color:#f8eee5;}
:root {--beige-color-dark:#dcd0c4;}

/* ボタン標準hollow */
:root {--button-line-color:var(--black-color-dark);}
:root {--button-text-color:var(--black-color-dark);}
:root {--button-hover-bg-color:var(--main-color-light);}
:root {--button-hover-text-color:var(--black-color-dark);}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* BODY, テキスト基本設定 */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
body {font-size:1rem;color:var(--text-color);}
body, h1, h2, h3, h4, h5, h6 {
  font-family: var(--serif);
  font-weight: 400;
  -webkit-text-size-adjust: 100%;	-moz-osx-font-smoothing: grayscale;	-webkit-font-smoothing: antialiased;-webkit-tap-highlight-color: transparent;tap-highlight-color:transparent}
p,ul,ol,dl,th,td,body {	line-height:1.9;
            @media (width < 1068px)	{line-height:1.9;}
            @media (width < 734px)	{line-height:1.8;}
          }
p, ul, ol, table {margin-bottom:1rem;}
i {margin-right:5px;}
dl, ol, ul {list-style-position: inside;}
.text-white {color:var(--text-color-white);}
.serif {font-family: var(--serif);}
.navbar-nav {list-style-position: outside;}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* section・レイアウト基本設定 */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
* {	margin:0;padding:0;box-sizing: border-box}
.grid-container {max-width:75rem;} /* 1200px */
section {overflow:hidden;}
section, section.space-both  {padding-top:3rem;padding-bottom:3rem;}
section.space-top {padding-top:3rem;padding-bottom:0;}
section.space-bottom  {padding-top:0;padding-bottom:3rem;}
section.space-none {padding-top:0;padding-bottom:0;}
/* Hタグの上余白削除 */
.top-zero {margin-top:0 !important;} 
/* ULタグの下余白削除 */
.bottom-zero {margin-bottom:0 !important;}

@media (width < 640px) {
  .grid-container {padding-left:1.25rem;padding-right:1.25rem;}
}

.narrow {width:100%;max-width:calc( 48rem + 1.875rem);padding-left:.9375rem;padding-right:.9375rem;margin-left:auto;margin-right:auto;}
@media (max-width: 640px) {.narrow {width:100%;padding-left:1.25rem;padding-right:1.25rem;margin-left:auto;margin-right:auto;}}
.grid-container .narrow,.narrow .narrow {max-width:48rem;padding-left:0;padding-right:0;}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* 見出しタグ */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
h1 {font-size:1rem;margin:0;line-height:1;
  &.site-title {color:#fff;font-weight: bold;}
  &.title-logo img {max-height:calc(var(--header-topbar-height) * 0.5);}				
}
h2 {font-size:1.5rem;font-weight: bold;
  #main-content & {display: inline-block;background-image: var(--h2-line-color);background-repeat: no-repeat;background-size: 100% 2px;background-position: bottom;padding-bottom:.5rem;}
  #frontpage & {background-image: none;padding:.5rem;border-radius:0;position: relative;margin-top:2rem;margin-bottom: 3rem;font-family:var(--serif);text-align: center;border-bottom:none;line-height: 1.6;}
  #frontpage & span { font-size: .75rem;color:#555; display: block; background:transparent; -webkit-background-clip: none;}
  #frontpage &:after {content: '';position: absolute;bottom: -5px;display: inline-block;width: 60px;height: 5px;left: 50%;-webkit-transform: translateX(-50%);transform: translateX(-50%);background: linear-gradient(to right, var(--accent-color-dark), var(--accent-color-dark));border-radius: 2px;
  }
}	
h3 {font-size:1.5rem;font-weight: 600;text-align: left;margin-top:4rem;margin-bottom: 2rem;}
h4 {font-size:1.25rem;font-weight: 600;margin-top:0;margin-bottom: 1.5rem;}
h5 {font-size:1.0625rem;font-weight: bold;}
h6 {font-size:.875rem;font-weight: bold;margin-top:1rem;margin-bottom: .25rem;}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* UL OL LI*/
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */

ul {margin-left: 0;
  &.yoko {display: flex;flex-wrap: wrap;gap:0 2rem;}
  #event-calendar & {margin-bottom: 0;}
}
ol {margin-left:2rem;}
li {padding-left: 1em;	text-indent: -.9em;
  &::marker {color: var(--sub-color-dark);}
  .no-bullet & {padding-left:0;text-indent: 0;}
  .no-bullet &:before {content:none;margin-right: 0;}
  .menu & {paddiing-left:0;text-indent:0;}
  .menu &:before {content:none;}
}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* リンクテキスト */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
a {	outline:none; color:var(--text-color);
  #topbar & { color:var(--topbar-text-color);}
  #topbar .contact & { color:var(--text-color);}
  &:focus, &:hover {color:var(--accent-color); outline:none;}
  }
p a:hover, li a:hover {text-decoration: underline;}
a img:hover {opacity:.8;}
  
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* リンクボタン */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
.button {transition:all .2s;background: transparent;border-color:var(--button-line-color);color:var(--button-text-color);box-shadow:none;}
.button:hover {background:var(--button-hover-bg-color);color:var(--button-hover-text-color);}
.button.fill {background:var(--button-fill-bg-color);color:var(--button-fill-text-color);border:none;box-shadow:0 6px 3px -3px rgba(0, 0, 0, 0.3);margin-bottom: 2px;}
.button.fill:hover {background:var(--button-hover-fill-bg-color);color:var(--button-hover-fill-text-color);box-shadow: none;margin-top:2px;margin-bottom:0;}
.button.plate {width:90%;max-width:320px;}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* 印刷 */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
@media print {a[href]:after,abbr[title]:after {content: "" !important;} body {width: 1000px !important;height: auto;margin: 0px auto;padding: 20px;clear: both;overflow: auto;display:table;} .swiper-container {width: 1000px !important;overflow: hidden;} p {font-size:small !important;}}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* ヘッダー */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* PCヘッダー */
header .right-block {display: flex;gap:1rem;align-items: center;height:100%;justify-content: flex-end;}
@media (max-width: 640px) {header .right-block {display:none;}}
header .right-block .button {border:none !important;}
/* PCヘッダー(ナビゲーションバー除く) */
/* トップバー左寄せ */
#topbar {height:var(--header-topbar-height);display: flex;flex-wrap:wrap;justify-content: space-between;align-items: center;gap:.5rem;padding:0 .5rem;position:relative;background:var(--topbar-color);}
#topbar .left-zone, #topbar .right-zone {display:flex;align-items: center;margin:0;}
/* PCでハンバーガーボタン表示の場合 */ #topbar .right-zone {margin-right:4rem;}
/* スマホでロゴ中央にする場合 */ @media (max-width: 640px) {#topbar {justify-content: center;}#topbar .right-zone {display: none;}}
/* モバイルヘッダー */
#header_mobile_drawer, #header_mobile_fade {position:fixed;top:0;z-index:99;padding:0 10px;height:var(--header-mobile-height);display: flex;flex-wrap:wrap;align-items: center;justify-content: flex-start;text-align: center;}
/* タイトルロゴ */
.logo {height:2rem;width:auto;}
.site-title {display:flex;align-items: center;gap:.25rem;}
@media (max-width: 640px) {h1 {max-width:40px;}.site-title-text {display: none;}}

/* shy-header2 */
#header {position: sticky;height:var(--header-pc-height);top:0;z-index: 90;width:100%;background: var(--navigation-color);box-shadow: 0px 6px 10px -5px rgba(0, 0, 0, 0.5);}
#header.UpMove{ animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{ from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(-100px);}}
#header.DownMove{ animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{ from { opacity: 0; transform: translateY(-100px);} to { opacity: 1; transform: translateY(0);}}
#scroll-point {position: absolute;top:200px;width:auto;}


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* メニューバー */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* nav内のul(メニュー) */
nav > ul {display:flex;margin: 0;padding: 0;list-style-type:none;}
nav > ul > li {margin-bottom: 0;}
nav > ul.navbar-nav > li > a {font-weight:bold;display:flex;align-items:center;transition: all 0.6s ease;}
/* グローバルナビゲーションバー */
/* トップバーで高さと色を指定済、liでflex stretch、aでgridセンタリング */
.global-menu {background:transparent;
        @media (width < 800px) {display:none;}
}
.global-menu > ul {display: flex;width:100%;}
.global-menu > ul > li {padding: 0;margin: 0;text-indent:0;flex:auto; display:flex;align-items: stretch;position:relative;text-align: center;height:var(--header-topbar-height);}
.global-menu > ul > li > a {width: 100%;justify-content: center; line-height:1.3;font-weight: bold;
            display: grid; place-items: center;padding:0 clamp(.5rem, 1.25vw ,1rem);font-size: clamp(.5rem, 1.25vw ,1rem)}
/* @media (width < 1100px) {.global-menu ul li a {padding:0 .5rem;}} */
.global-menu > ul > li.current::after {content:"";width:100%;border-bottom:6px solid var(--sub-color); position:absolute;bottom:0;z-index:2;}
.global-menu > ul > li:hover::after {content:"";width:100%;border-bottom:6px solid var(--sub-color-light); position:absolute;bottom:0;z-index:2;}
.global-menu > ul > li a:hover {background:var(--main-color-dark);text-decoration: none;}


/* メインメニュー幅指定なし */
.global-menu > ul.navbar-nav > li {flex:auto; display:flex;align-items: stretch;height:var(--header-topbar-height);text-align: center;position: relative;}
/* メインメニュークリックエリア指定 */
.global-menu > ul > li > a {display: grid;place-items: center;padding:0 clamp(.5rem, 1.25vw ,1rem);font-size: clamp(.5rem, 1.25vw ,1rem);line-height: 1.4;}
.global-menu > ul > li.mega > a {grid-template-columns: auto 1rem;height: 100%;column-gap:.25rem;}

.right-menu {margin-left: auto;}
.right-menu .contact a {display: flex;align-items: center;background:#fff;color:#111;padding:0 1.5rem;font-weight:bold;height:var(--header-topbar-height);line-height:1.3;transition: all 0.6s ease;}
.right-menu .contact a:hover {background:#F8BBD0;}
.right-menu .contact a::before {content:"\f0e0";font-family:"Font Awesome 6 Pro";font-weight:600;margin-right:.5rem;color:var(--sub-color-dark);}
@media (width < 1000px) {
  .right-menu .contact a span {display: none;}
  .right-menu .contact a::before {margin-right:0;}
}



/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* ボワ(全画面ドロワー) */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
#bowa{	position:fixed;	z-index: -1;opacity: 0;top:0;width:100%;height: 100vh;transition: all 0.3s;
    background:var(--drawer-bg-color);}
/* modal下のスクロール防止 */
body.fixed {overflow:hidden;}
/*アクティブクラスがついたら透過なしにして最前面へ*/
#bowa.panelactive{ opacity: 1;z-index:100; position: fixed; z-index: 999; width: 100%;height: 100vh;overflow: auto;-webkit-overflow-scrolling: touch;	padding: 5rem 0;}

/* ハンバーガー全画面用 標準サイズ */
.openbtn{position:fixed;z-index: 9999;top:0;right: 10px;cursor: pointer;width: 50px;height:50px;background: var(--hamburger-color);}
.openbtn span{display: inline-block;transition: all .4s;position: absolute;	left: 14px;	height: 3px;border-radius: 2px;	background-color: var(--hamburger-line-color); width: 45%;}
.openbtn span:nth-of-type(1) {top:15px;}
.openbtn span:nth-of-type(2) {top:23px;}
.openbtn span:nth-of-type(3) {top:31px;}
.openbtn.active span:nth-of-type(1) {top: 18px;	left: 18px;	transform: translateY(6px) rotate(-45deg);width: 30%;}
.openbtn.active span:nth-of-type(2) {opacity: 0;}
.openbtn.active span:nth-of-type(3){top: 30px;left: 18px;transform: translateY(-6px) rotate(45deg);	width: 30%;} */

/* スマホ用のシンプルなリスト */
#bowa ul.simple-menu {display: none;position: absolute;z-index: 99;top:50%;left:50%;transform: translate(-50%,-50%);}
#bowa.panelactive .simple-menu {display: block;margin-bottom:4rem;}
#bowa .simple-menu li{list-style: none;text-align: center;}
#bowa .simple-menu li a{color:var(--text-color);font-size:1.25rem;text-decoration: none;padding:10px;display: block;font-weight: bold;}


.swiper-slide { height: auto !important; }

/* navigation */
#swiper-control {margin:1rem auto;display: flex;flex-direction: row-reverse;justify-content: space-between;align-items: center;}
#swiper-control .swiper-pagination {display:flex;gap:.5rem;position: static;width:auto !important;
 }
#swiper-control .swiper-pagination-bullets {text-align: center;}
#swiper-control .swiper-pagination-bullet {width:1rem; height:1rem;transition: all 0.4s ease; background: #333;}
#swiper-control .swiper-pagination-bullet:hover {opacity:.5;}
#swiper-arrows {display:flex;gap:.5rem;align-items: center;height:3rem;}
#swiper-arrows .swiper-button-prev, #swiper-arrows .swiper-button-next {position: static;width:3rem;height:auto;background:#fff;padding:1rem;border-radius:50%;box-shadow: rgba(0, 0, 0, 0.14) 0px 4px 8px 3px, rgba(0, 0, 0, 0.22) 0px 1px 3px 0px;margin:0 !important;transition: all 0.4s ease;color:#333; }
#swiper-arrows .swiper-button-prev:hover, #swiper-arrows .swiper-button-next:hover {background: var(--main-color-light);}
#swiper-arrows .swiper-button-prev:after , #swiper-arrows .swiper-button-next:after {font-size:1rem;}

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
/* フッター */
/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * */
footer { padding:2rem 1rem 1rem; background: var(--footer-bg-color);color:var(--white-color-light);}
.footer-contact + footer {padding-top:14vw;}
footer a, .footer-credit, .footer-sitemap {color:var(--white-color-light);}
.footer-credit {display:flex;gap:2rem;justify-content: center;align-items: flex-start;}
@media (max-width: 640px) {.footer-credit {margin:1rem 0;flex-direction: column;gap:0;justify-content: flex-start;}}
.footer-credit > * {margin:0;padding:0;font-size: 1rem;line-height: 1.5;}
@media (min-width: 641px) {.footer-credit > * {margin: 0 0 2rem;}}



/* レスポンシブカード */
/* カードの基本形(背景色・角丸・影・下マージン) */
.responsive-card {
  background:var(--white-color);border-radius:1rem;box-shadow:var(--box-shadow);display: grid;grid-template-columns:1fr;grid-template-rows: auto 1fr;color:var(--text-color) !important;transition: all 0.3s ease;border-radius:1rem;overflow: hidden;height:100%;
}
/* ホバー時 背景色変更 */
a .responsive-card:hover {background: var(--sub-color-light);} 
a .responsive-card:hover img{opacity: .8;}
/* イメージボックス 縦配置 */
.responsive-card.tate-only {grid-template-columns: 1fr;grid-template-rows: auto 1fr;}
.responsive-card .image-box,
.responsive-card.tate-only .image-box {grid-column: 1/-1;grid-row: 1/2;}
/* 画像アスペクト比 縦配置 */
.responsive-card .image-box img,
.responsive-card.tate-only .image-box img {aspect-ratio: 16/9;width:100%;object-fit: cover;overflow: hidden;border-radius:1rem 1rem 0 0;}
/* テキストボックス 縦配置 */
.responsive-card .text-box,
.responsive-card.tate-only .text-box {grid-column: 1/-1;grid-row: 2/-1;padding:2rem;display: flex;justify-content: flex-start;height:100%;}


@media (min-width: 600px) { /* 切り替え幅吟味すべし */
/* grid指定 横配置 */	
.responsive-card {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}
/* イメージボックス 横配置 */
.responsive-card .image-box {grid-column: 1/2;grid-row: 1/-1;overflow: hidden;}
/* 画像アスペクト比 横配置 */
.responsive-card .image-box img {height:100%;aspect-ratio: 3/2;object-fit:cover;object-position:center;border-radius:1rem 0 0 1rem;}
/* テキストボックス 横配置 */
.responsive-card .text-box {grid-column: 2/-1;grid-row: 1/-1;align-self: center;}
}

/* yoko-only */
/* grid指定 横配置 */	
.responsive-card.yoko-only {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}
/* イメージボックス 横配置 */
.responsive-card.yoko-only .image-box {grid-column: 1/2;grid-row: 1/-1;overflow: hidden;}
/* 画像アスペクト比 横配置 */
.responsive-card.yoko-only .image-box img {height:100%;aspect-ratio: 3/2;object-fit:cover;object-position:center;border-radius:1rem 0 0 1rem;}
/* テキストボックス 横配置 */
.responsive-card.yoko-only .text-box  {grid-column: 2/-1;grid-row: 1/-1;align-self: center;}


/* レスポンシブカード逆パターン(スマホ横PC縦) */
.responsive-card.reverse {grid-template-columns: 1fr 1fr;grid-template-rows: 1fr;}
.responsive-card.reverse .image-box {grid-column: 1/2;grid-row: 1/-1;overflow: hidden;}
.responsive-card.reverse .image-box img {height:100%;aspect-ratio: 3/2;object-fit:cover;object-position:center;border-radius:1rem 0 0 1rem;}
.responsive-card.reverse .text-box  {grid-column: 2/-1;grid-row: 1/-1;align-self: center;}
@media (min-width: 600px) {
.responsive-card.reverse {grid-template-columns: 1fr;grid-template-rows:auto 1fr;}
.responsive-card.reverse .image-box {grid-column: 1/-1;grid-row: 1/2;}
.responsive-card.reverse .image-box img {aspect-ratio: 16/9;width:100%;object-fit: cover;overflow: hidden;border-radius:1rem 1rem 0 0;}
.responsive-card.reverse .text-box {grid-column: 1/-1;grid-row: 2/-1;padding:2rem;}
}


/* レスポンシブカード 角丸なし */
.responsive-card.no-radius,
.responsive-card.no-radius .image-box img {border-radius:0 !important;}
/* テキストボックス 上下margin解除&gap設定 */
.responsive-card .text-box {display: flex;flex-direction: column;gap:.75rem;justify-content: center;}
.responsive-card .text-box > * {margin-top:0;margin-bottom:0;}



/* stretch-panel */
.stretch-panel .cell {
  background:var(--white-color);border-radius:5px;margin-bottom:1rem;box-shadow:var(--box-shadow-light);transition: all 0.3s ease;
  border:1px solid var(--border-color);}
@media (min-width: 641px) {
  .stretch-panel .cell {min-height:5rem;margin-bottom:2rem;}
  .stretch-panel.large-up-1 .cell {margin-bottom:1rem;}
}
.stretch-panel .cell:hover {background:#fffde7;}
.stretch-panel .cell a {padding:1rem;color:inherit;}


/* カード */
.card {border-radius:15px;box-shadow:var(--box-shadow);margin-bottom: 3rem;}
.card .image-section {width: 100%;aspect-ratio: 16/9;object-fit: cover;border-radius:15px 15px 0 0;z-index: 1;overflow: hidden;}
.card-section {padding:2rem;color:var(--text-color);}
a:hover .card-section {text-decoration: none;}

.card.yoko {flex-direction: row;margin-bottom: 2rem;}
.card.yoko .image-section {flex:40%;border-radius:15px 0 0 15px;}
.card.yoko img {height:100%;object-fit: cover;}
.card.yoko .card-section {flex:60%;}

.shadow,
.shadow .card,
.shadow .news-item {box-shadow:var(--box-shadow);}
.no-shadow,
.no-shadow .card,
.no-shadow .news-item {box-shadow:none;}
.border,
.border.card,
.border .news-item {border:1px solid var(--border-color);}
.no-border,
.no-border.card,
.no-border .news-item {border:none;}


/* grid-margin-x 無しの時は上下もくっつける */
.grid-x:not(.grid-margin-x) .cell {margin-bottom: 0 !important;}

[class*="small-up-"] > .cell {margin-bottom: 2rem;}

.aligncenter {display: block;margin-left: auto;margin-right: auto;}

/* レスカードの文字数制限撤廃 */
.responsive-card .text-box p {display: block;}

.single-page-section {padding:3rem 0;}


/* ループスライダー */
.loop02 {
	padding:0;
	display: flex;
	overflow: hidden;
}
.loop02__box {
	display: flex;
	animation: loop-list 50s linear infinite;
	list-style-type: none;
    margin-bottom: 0;
}
.loop02__box li {padding-left:0;}
.loop02__item a {
	width: calc(100vw / 4);
	display: block;
}
.loop02__item img {
	width: 100%;
}


@keyframes loop-list {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-100%);
	}
}



#hero {background: var(--main-color-light);background-image: url("images/green-dust-and-scratches.png");padding:0;}
#oarai {background: var(--main-color-light);background-image: url("images/green-dust-and-scratches.png");}
#products {background: var(--beige-color-light);background-image: url("images/green-dust-and-scratches.png");}
#products h4 {margin-top:4rem;}
#projects {background:var(--sub-color-light);;background-image: url("images/green-dust-and-scratches.png");}
#banner-area {background: var(-white-color-light);background-image: url("images/green-dust-and-scratches.png");}
#banner-area .banners img {border:1px solid #ccc;}
#banner-area .guide {margin-bottom:3rem;}
#banner-area .guide a {text-decoration: underline;font-weight:bold;color:#01579B;}
#bottom {padding:0;}

.tategaki {text-align: center;}

@media (min-width: 641px) {
.tategaki {
  text-align:left;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  width:100%;
  gap:3rem;
  margin:1rem;
}

.tategaki p {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size:1.25rem;
  line-height: 2.5;
}
}

#hero-images {
  display: grid;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  padding:0;
}
.mentai {grid-row:1/2;grid-column:1/2;}
.sake {grid-row:1/2;grid-column:2/3;}
.hoshiimo {grid-row:1/2;grid-column:3/4;}
.anko {grid-row:1/2;grid-column:4/5;}
.kani {grid-row:2/3;grid-column:1/2;}
.hokke {grid-row:3/4;grid-column:1/2;}
.center-logo {grid-row:2/4;grid-column:2/4;}
.kome {grid-row:2/3;grid-column:4/5;}
.korokke {grid-row:3/4;grid-column:4/5;}
.hamaguri {grid-row:4/5;grid-column:1/2;}
.satsumaimo {grid-row:4/5;grid-column:2/3;}
.shimeji {grid-row:4/5;grid-column:3/4;}
.shirasu {grid-row:4/5;grid-column:4/5;z-index:1}
.araippe1 {grid-row:4/5;grid-column:4/5;z-index:2;align-self:end;text-align: right;}
.araippe1 img {width:100px;max-width:12vw}

/* フェードイン(初期値) */
.js-fadeUp1,.js-fadeUp2,.js-fadeUp3,.js-fadeUp4,.js-fadeUp5,.js-fadeUp6,.js-fadeUp7,.js-fadeUp8,.js-fadeUp9,.js-fadeUp10,.js-fadeUp11,.js-fadeUp12 {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(0); /* 下に30pxの位置から */
  transition: opacity 1s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
.js-fadeUp13 {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(2rem); /* 下に30pxの位置から */
  transition: opacity 1s, transform .8s; /* 透過率と縦方向の移動を0.8秒 */
}
.js-fadeUp14 {
  opacity: 0; /* 最初は非表示 */
  transform: translateY(-3rem); /* 下に30pxの位置から */
  transition: opacity 1s, transform .4s; /* 透過率と縦方向の移動を0.8秒 */
}
/* フェードイン(スクロールした後) */
.js-fadeUp1.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .1s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp2.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .4s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp3.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .6s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp4.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: .8s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp5.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp6.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1.2s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp7.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1.3s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp8.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1.5s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp9.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1.7s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp10.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 1.9s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp11.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 2s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp12.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 2.2s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp13.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 2.6s; /* フェード開始を0.5秒遅らせる */
}

.js-fadeUp14.is-inview {
  opacity: 1; /* 表示領域に入ったら表示 */
  transform: translateY(0); /* 30px上に移動する */
  transition-delay: 3.3s; /* フェード開始を0.5秒遅らせる */
}

/* 回転するアニメーション */
@keyframes fuwafuwa {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20px);
  }
}
.araippe-anko {
  animation: 3s fuwafuwa infinite;
}
@media (max-width: 640px) {
  .araippe-anko {
  width:50vw;
  margin:2rem auto;
}
}

.town-link{text-align: center;}
.town-link img {width:100%;max-width:240px;}
@media (min-width: 641px) {
  .town-link{text-align: right;}
}


#swiper-kanko .responsive-card {}
@media (min-width: 641px) {
#swiper-seafood {}
#swiper-items {}
#swiper-project {}
}
.responsive-card .text-box {gap:1rem;}
.responsive-card .text-box p {font-size:1rem;}
.responsive-card ul {font-size:1rem;}