@charset "utf-8";
@import url("default.css");

* {-webkit-text-size-adjust:100%;}
a:link {text-decoration:none; color:#1d1d1d;}
a:visited{text-decoration:none; color:#1d1d1d;}
a:hover{text-decoration:none; color:#1d1d1d;}
a:active{text-decoration:none; color:#1d1d1d;}
a:link {-webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out;}
a:hover img { opacity: 0.7; filter: alpha(opacity=70); }
a:hover img.opa100 { opacity: 1.0; filter: alpha(opacity=100); }
img { max-width: 100%; height: auto; vertical-align: bottom; backface-visibility: hidden; -webkit-backface-visibility: hidden; }

.grecaptcha-badge { opacity: 0; pointer-events: none; }
.full-width { margin-left: calc(-50vw + 50%); margin-right: calc(-50vw + 50%); }
.allWrapper { overflow: hidden; position: relative; }
.container-fluid { max-width: 104rem; }
/* 既存サイト（Bootstrap3）のコンテンツ幅に合わせる */
.container { max-width: 100%; }
.al-c { text-align: center; }
.m20-b { margin-bottom: 2rem!important; }
.m30-b { margin-bottom: 3rem!important; }
.m40-b { margin-bottom: 4rem!important; }
.m50-b { margin-bottom: 5rem!important; }
.section { padding-top: 10rem; padding-bottom: 10rem; }
.section_t { padding-top: 10rem; }
.section_b { padding-bottom: 10rem; }
@media print,screen and (min-width: 769px) {
	.sp_view { display: none!important; }
}

html { font-size: 62.5%; overflow-x: hidden; }
html, body,
input, textarea, select, button { font-family: "Zen Maru Gothic", sans-serif; }
body { font-size: 1.8em; line-height: 1.428571429; color: #000; background-color: #fff; font-family: "Zen Maru Gothic", sans-serif; font-style: normal; font-weight: 500; }
body.is-fixed { overflow: hidden; }
main p { line-height: 1.7; }

/*基本ボタン1*/
a.bt_base { background: #fff; color: #EA5504; border: 2px solid #EA5504; font-size: 2.0rem; padding: 0.7em 2em; line-height: 1; display: inline-block; position: relative; text-align: center; font-weight: 600; border-radius: 5rem; }
a.bt_base:hover { background: #EA5504; color: #fff; }
/*基本ボタン2*/
a.bt_base02 { background: #EA5504; color: #fff; border: 2px solid #EA5504; font-size: 2.0rem; padding: 0.7em 2em; line-height: 1; display: inline-block; position: relative; text-align: center; font-weight: 600; border-radius: 5rem; }
a.bt_base02:hover { background: #fff; color: #EA5504; }

/*-------------------------------------*/
/*	ヘッダー関連	*/
/*-------------------------------------*/
/*h1はデザイン上は非表示だが、検索エンジン・支援技術が読めるよう視覚的非表示にする（display:noneは読まれないため使わない）*/
header h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/*ハンバーガーメニュー*/
.menu { position: fixed; right: 0; top: 0; width: 9rem; height: 9rem; z-index: 100; cursor: pointer; display: block; transition: .5s; background-color: #006A2C; border-radius: 0 0 0 4rem; }
.menu__line { display: block; height: 0.2rem; position: absolute; transition: transform .3s; width: 4rem; left: 50%; margin-left: -25%; background: #fff; }
.menu__line--top { top: 2.5rem; }
.menu__line--center { top: 3.5rem; }
.menu__line--bottom { top: 4.5rem; }
.menu__line--top.open { top: 3.5rem; transform: rotate(45deg); }
.menu__line--center.open { transform: scaleX(0); }
.menu__line--bottom.open { top: 3.5rem; transform: rotate(135deg); }
.menu_ttl { color: #fff; font-size: 1.2rem; text-align: center; width: 9rem; position: absolute; bottom: 2rem; }
/*gnav*/
/*ドロワー表示中はパネル左の余白もクリックで閉じられるよう、背面全面を覆う（z-index:-1でパネルより後ろ・ページより前）*/
.gnav::before { content: ""; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; }
.gnav { background-color: #006A2C; display: none; height: 100%; position: fixed; width: 80%; max-width: 55rem; z-index: 98; top: 0; right: 0; }
.gnav__wrap { display: block; height: 100%; width: 100%; padding-top: 10rem; padding-bottom: 7rem; overflow-y: scroll; }
.gnav__inner { width: 80%; max-width: 45rem; margin: 0 auto; }
.gnav__inner ul.main_menu { margin-bottom: 4rem; width: 100%; }
.gnav__inner ul.main_menu > li { border-bottom: 2px dotted #919191; }
.gnav__inner ul.main_menu > li:first-child { border-top: 2px dotted #919191; }
.gnav__inner ul.main_menu > li > a { display: block; padding: 1em 0; position: relative; font-size: 1.8rem; font-weight: 500; color: #fff; text-align: center; }
.gnav__inner ul.sns_list > li > a > img { width: 2.9rem; } /* 2026版アイコンは77.5pxのため、既存サイトの表示サイズ（29.233px）に合わせる */

/*-------------------------------------*/
/*	予約ボタン	*/
/*-------------------------------------*/
/* bt_yoyaku.svgは右8pxがclipPathで空のため right:-8px で見える帯の右端を画面右端に合わせる（見た目の帯幅63px＝既存サイトと同値） */
#bt_side { position: fixed; top: 50%; right: -0.8rem; z-index: 90; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: transform 0.3s ease-out; }
#bt_side:hover { transform: translateY(-50%) translateX(0.3rem); -webkit-transform: translateY(-50%) translateX(0.3rem); }
#bt_side img { width: 10.6rem; max-width: none; }

/*-------------------------------------*/
/*	メインビジュアル	*/
/*-------------------------------------*/
.main_img { width: 100%; background-image: url("../images/bg_main.png"); background-repeat: no-repeat; background-position: center center; background-size: cover; position: relative; padding: 4rem 2rem 16rem 2rem; }
.main_img::after { content: ""; width: 100%; height: 16rem; background-image: url("../images/bg_wave_main.svg"); background-position: center bottom; background-repeat: repeat-x; position: absolute; left: 0; bottom: 0; }
.main_img h2 { text-align: center; }

/*-------------------------------------*/
/*	SNS・フッター関連	*/
/*-------------------------------------*/
.sns_area { padding: 6.5rem 0 3rem; }
footer { text-align: center; padding-bottom: 6rem; }
footer .footer_logo { margin-top: -5.5rem; }
footer h2 { margin-top: 2.5rem; margin-bottom: 0.5rem; color: #5ED114; font-family: "平成丸ゴシック Std", "Zen Maru Gothic", sans-serif; font-size: 2.0rem; line-height: 2.8rem; font-weight: 800; letter-spacing: .1em; }
footer .footer_info { font-size: 1.4rem; line-height: 3.2rem; letter-spacing: .1em; }
footer .footer_iehime_logo { margin-top: 4rem; }
footer .footer_iehime_logo img { width: 20rem; }
/*ページトップ（既存サイトの #pagetop 表示制御を流用）*/
#pagetop { position: fixed; right: 2rem; bottom: 2.3rem; z-index: 90; transition: transform 0.3s ease-out; }
#pagetop:hover { transform: translateY(-0.5rem); -webkit-transform: translateY(-0.5rem); }
#pagetop img { width: 10rem; }

/*-------------------------------------*/
/*	スライダー	*/
/*-------------------------------------*/
.slick-dots { bottom: -1rem; }
.slick-dots li { width: 2.4rem; height: 0.4rem; margin: 0 0.4rem; }
.slick-dots li button { width: 2.4rem; height: 0.4rem; padding: 0; }
.slick-dots li button:before { content: ""; width: 2.4rem; height: 0.4rem; line-height: 0.4rem; border-radius: 0.2rem; background-color: #EA5504; opacity: .35; }
.slick-dots li.slick-active button:before { background-color: #EA5504; opacity: 1; }

/*-------------------------------------*/
/*	カラムレイアウト	*/
/*-------------------------------------*/
.col-2_list { display: flex; flex-wrap: wrap; gap: 2rem 2rem; }
.col-2_list .col_box { width: calc((100% - 2rem) / 2); }
.col-3_list { display: flex; flex-wrap: wrap; gap: 2rem 2rem; }
.col-4_list { display: flex; flex-wrap: wrap; gap: 2rem 2rem; }
.col-4_list .col_box { width: calc((100% - 6rem) / 4); }
.col-3_list .col_box { width: calc((100% - 4rem) / 3); }

/*見出し1（title_bg.svg のピル＋左右の緑ドットライン）*/
/*ドットラインはコンテンツ幅内、ピルは中央配置*/
.ttl { display: flex; align-items: center; justify-content: center; gap: 0; margin-bottom: 4rem; text-align: center; line-height: 1; }
.ttl::before,
.ttl::after { content: ""; flex: 1; height: 0.8rem; background-image: radial-gradient(circle, #6FD418 0.4rem, transparent 0.4rem); background-size: 2rem 0.8rem; background-repeat: repeat-x; }
.ttl::before { background-position: left center; }
.ttl::after { background-position: right center; }
/*title_bg.svgは黄色部分がy0〜80px・下6.67pxが緑の影のため、line-heightを80pxにして黄色内で上下中央に見せる。padding-leftはletter-spacing分の左寄りを補正*/
.ttl span { flex: none; display: block; width: 39.3rem; height: 8.7rem; padding: 1.55rem 0 0 .1em; line-height: 4.9rem; background: url("../images/title_bg.svg") no-repeat center center; background-size: contain; color: #006A2C; font-size: 2.8rem; font-weight: 800; letter-spacing: .1em; }

/*見出し2*/
.ttl02 { font-size: 4rem; line-height: 1.5; margin-bottom: 4rem; text-align: center; letter-spacing: 0.05em; font-weight: 700; position: relative; color: #F15A24; }

/*----------------------------------------
	about　マイホームフェスタとは
-----------------------------------------*/
/*2026年版はセクション間の波装飾が無いため下余白は .sec01_box02_list の60pxのみとし、overflowでmarginの相殺を防ぐ*/
#about { background-color: #FFFCE4; position: relative; overflow: hidden; margin-top: -2px; padding-bottom: 0; }
/*2行目43文字を1026px内に収めるため字間をわずかに詰める（カンプ実測はほぼ0）*/
#about .sec01_lead { max-width: 102.6rem; margin: 0 auto 4rem auto; font-size: 2.4rem; letter-spacing: -.01em; }
.sec01_box02_list { margin-bottom: 6rem; }
#about .sec01_box02 { position: relative; }
/*カンプに合わせて画像下のテキストだけ左右に余白をつける（画像は全幅のまま）*/
#about .sec01_box02 h3,
#about .sec01_box02 p:not(.al-c) { padding-left: 1.2rem; padding-right: 1.2rem; }
#about .ttl02 { font-size: 4.8rem; line-height: 6.3rem; font-weight: 800; letter-spacing: normal; margin-bottom: 3rem; }
#about .sec01_box02 h3 { color: #F15A24; font-size: 2.8rem; line-height: 4.3rem; font-weight: 900; letter-spacing: 0; margin-bottom: 1rem; }
#about .sec01_box02 p { font-size: 2.0rem; line-height: 3.5rem; font-weight: 500; letter-spacing: -0.025em; }

/*----------------------------------------
	sec02　来場特典
-----------------------------------------*/
#sec02 { background-color: #FFFCE4; position: relative; margin-top: -2px; }
#sec02 .tokuten_note { max-width: 104.6rem; margin: 1.5rem auto 0 auto; }
#sec02 .tokuten_note h3 { color: #F15A24; font-size: 3.825rem; line-height: 4.17rem; font-weight: 900; letter-spacing: 0; margin-bottom: 1.5rem; }
#sec02 .tokuten_note p { font-size: 2.0rem; line-height: 3.3rem; font-weight: 700; letter-spacing: 0; }
#sec02 .tokuten_note .attention { color: #F15A24; }
#sec02 .tokuten_bt { display: flex; flex-wrap: wrap; gap: 2rem 3.3rem; justify-content: center; }
#sec02 .tokuten_bt li { width: calc((100% - 3.3rem) / 2); }
#sec02 .tokuten_bt a { display: block; width: 100%; padding: 2.95rem 2rem; border: 2px solid #F15A24; border-radius: 1.3rem; font-size: 2.4rem; line-height: 3.3rem; font-weight: 700; letter-spacing: 0; text-align: center; transition: all 0.3s ease-out; }
#sec02 .tokuten_bt .bt_login { background-color: #F15A24; color: #fff; }
#sec02 .tokuten_bt .bt_login:hover { background-color: #fff; color: #F15A24; }
#sec02 .tokuten_bt .bt_password { background-color: #fff; color: #F15A24; }
#sec02 .tokuten_bt .bt_password:hover { background-color: #F15A24; color: #fff; }

/*----------------------------------------
	sec03　イベント概要
-----------------------------------------*/
#sec03 { background-color: #FFFCE4; position: relative; margin-top: -2px; padding-top: 1.5rem; }
#sec03 .ttl { margin-bottom: 4.5rem; }
/*iehime cafe紹介（画像 左／テキスト 右）*/
.cafe_intro { max-width: 104.6rem; margin: 0 auto 5rem auto; background-color: #fff; border-radius: 3rem; padding: 4rem; box-shadow: 0 1rem 3rem rgba(0,0,0,.06); text-align: left; }
.cafe_intro_top { display: flex; align-items: flex-start; gap: 1rem; }
.cafe_intro_img { flex: 0 0 32rem; border-radius: 2rem; overflow: hidden; }
.cafe_intro_img img { display: block; width: 100%; height: auto; object-fit: cover; }
.cafe_intro_txt { flex: 1; min-width: 0; }
.cafe_intro_txt h3 { color: #F15A24; font-family: "平成丸ゴシック Std", "Zen Maru Gothic", sans-serif; font-size: 3.0rem; line-height: 1.5; font-weight: 800; letter-spacing: .05em; margin-bottom: 2rem; }
.cafe_intro_lead { color: #006A2C; font-size: 1.9rem; font-weight: 700; line-height: 1.8; margin-bottom: 2rem; }
.cafe_intro_txt p { font-size: 1.65rem; line-height: 1.9; letter-spacing: 0; margin-bottom: 1.6rem; }
.cafe_intro_txt .note { font-size: 1.3rem; color: #888; }
.cafe_intro_photo { margin-top: 3rem; }
.cafe_intro_photo img { display: block; width: 100%; height: auto; border-radius: 2rem; }
.cafe_intro_sns { margin-top: 2rem; margin-bottom: 0!important; }
.cafe_intro_sns a { display: inline-flex; align-items: center; gap: 1rem; background-color: #F15A24; border: 2px solid #F15A24; color: #fff; font-size: 1.6rem; font-weight: 700; letter-spacing: .05em; padding: .7em 2em; border-radius: 5rem; transition: all .3s ease-out; }
.cafe_intro_sns a:hover { background-color: #C8420E; border-color: #C8420E; color: #fff; }
.cafe_intro_sns img { width: 2.6rem; height: 2.6rem; }
#sec03 .gaiyo_box { max-width: 104.6rem; margin: 0 auto 4rem auto; }
#sec03 .gaiyo_box dl { display: block; }
/*下線はラベルと詳細をまたぐ1本にするため行ラッパーに指定*/
#sec03 .gaiyo_box .gaiyo_row { display: flex; flex-wrap: wrap; }
#sec03 .gaiyo_box .gaiyo_row:not(:last-child) { border-bottom: 2px solid #6FD418; }
#sec03 .gaiyo_box dl dt { width: 27%; align-self: flex-start; padding: 1.7rem 0 1.7rem 6.4rem; position: relative; font-size: 2.6rem; line-height: 3.4rem; font-weight: 500; letter-spacing: .1em; }
/*緑丸はラベル1行目の文字中心に合わせる（dtはalign-self:flex-startで自身の高さ＝17+34+17px）*/
#sec03 .gaiyo_box dl dt::before { content: ""; position: absolute; left: 3.3rem; top: 50%; transform: translateY(-50%); width: 2.3rem; height: 2.3rem; border-radius: 50%; background-color: #6FD418; }
#sec03 .gaiyo_box dl dt span { display: inline-block; width: 5.5em; text-align: justify; text-align-last: justify; }
#sec03 .gaiyo_box dl dd { width: 73%; padding: 1.7rem 0; font-size: 2.6rem; line-height: 3.4rem; font-weight: 500; letter-spacing: .1em; }
#sec03 .map_list { margin-bottom: 4rem; }
/*iframeと地図画像を同じ縦横比・同じ枠線にして高さを揃える*/
#sec03 .map_list .col_box { aspect-ratio: 1112 / 803; overflow: hidden; }
#sec03 .map_list .col_box.map { border: 1px solid #006A2C; }
#sec03 .map_list .col_box iframe,
#sec03 .map_list .col_box img { display: block; width: 100%; height: 100%; border: 0; object-fit: cover; }
#sec03 .qr_box { background-color: #fff; border: 3px solid #F15A24; border-radius: 2.6rem; padding: 4rem 6.4rem 3rem; display: flex; justify-content: space-between; align-items: center; }
#sec03 .qr_box dt { flex: none; max-width: 23rem; text-align: center; }
#sec03 .qr_box dt img { width: 23rem; }
#sec03 .qr_box dd { width: 100%; padding-left: 4rem; }
#sec03 .qr_box dd h3 { color: #F15A24; font-family: "平成丸ゴシック Std", "Zen Maru Gothic", sans-serif; font-size: 4.8rem; line-height: 6.3rem; font-weight: 800; letter-spacing: .1em; margin-bottom: 1rem; }
#sec03 .qr_box dd p { font-size: 2.0rem; line-height: 3.5rem; font-weight: 500; letter-spacing: -.025em; }

/*----------------------------------------
	sec04　同時開催イベント
-----------------------------------------*/
#sec04 { background-color: #FFFCE4; position: relative; margin-top: -2px; padding-top: 2.5rem; }
#sec04 .ttl { margin-bottom: 3.5rem; }
#sec04 .ttl02 { color: #6FD418; font-family: "平成丸ゴシック Std", "Zen Maru Gothic", sans-serif; font-size: 5.0rem; line-height: 6.3rem; font-weight: 800; letter-spacing: .1em; }
/*カードは背景・余白なし。画像の背面に同じ角丸23pxの黄緑矩形を右下6pxずらしで敷く（box-shadowはぼかし・広がりなしのため角丸そのままの矩形になる）*/
#sec04 .event_box img { width: 100%; border-radius: 2.5rem; box-shadow: 0.6rem 0.6rem 0 0 #6FD418; }
#sec04 .event_box h4 { padding: 2rem 1.6rem 0; color: #6FD418; font-size: 2.592rem; line-height: 3.489rem; font-weight: 900; letter-spacing: 0; }
#sec04 .event_box h4 span { display: block; }
#sec04 .event_box p { padding: 1rem 1.6rem 0; font-size: 1.794rem; line-height: 2.99rem; font-weight: 500; letter-spacing: 0; }
#sec04 .event_box p.al-c { padding: 1.5rem 0 0; }
#sec04 .event_box .note { color: #006A2C; font-size: 1.8rem; line-height: 2.99rem; letter-spacing: 0; }
/*btn_entry.svgと同じグラデーション・角丸をCSSで再現（文字を載せるため画像は使わない）*/
#sec04 .bt_entry { display: block; padding: 1.5rem 1rem; border-radius: 3rem; background: linear-gradient(90deg, #00E224 0%, #008E3E 100%); color: #fff; font-size: 2.2rem; line-height: 3rem; font-weight: 700; text-align: center; transition: .3s; }
#sec04 .bt_entry:hover { opacity: .8; }
/*同時開催イベントのdotsだけ黄緑にする（サイズ・位置・opacityは共通指定を継承）*/
#sec04 .slick-dots li button:before,
#sec04 .slick-dots li.slick-active button:before { background-color: #6FD418; }

/*----------------------------------------
	sec05　わくわくKIDSカーニバル
-----------------------------------------*/
#sec05 { background-color: #FFFCE4; position: relative; margin-top: -2px; }

/*----------------------------------------
	sec06　フェスタ会場マップ
-----------------------------------------*/
#sec06 { background-color: #FFFCE4; position: relative; margin-top: -2px; }

/*----------------------------------------
	sec07　出展企業
-----------------------------------------*/
#sec07 { background-color: #FFFCE4; position: relative; margin-top: -2px; padding-bottom: 14.5rem; }
#sec07 .ttl { margin-bottom: 0.8rem; }
#sec07 .company_note { margin-bottom: 2.5rem; color: #006A2C; font-size: 1.8rem; line-height: 3.489rem; font-weight: 700; letter-spacing: 0; }
#sec07 .company_list { row-gap: 4.5rem; }
/*ロゴ枠（既存サイト .item_box を流用。高さを揃えてロゴを上下左右中央に置く）*/
.item_box { border-radius: 1rem; background-color: #fff; border: 1px solid #CECCCC; padding: 2rem; position: relative; }
#sec07 .item_box { display: flex; align-items: center; justify-content: center; height: 18.8rem; padding: 0; }
#sec07 .item_box img { width: 70%; height: auto; max-height: 100%; object-fit: contain; }
#sec07 .company_box h3 { padding-top: 0.5rem; color: #004714; font-size: 1.8rem; line-height: 3.489rem; font-weight: 700; letter-spacing: 0; text-align: center; }
#sec07 .bt_soudan { display: block; max-width: 22.1rem; margin: 0.5rem auto 0; padding: 1.1rem 1rem; border-radius: 3rem; background: linear-gradient(90deg, #00E224 0%, #008E3E 100%); color: #fff; font-size: 1.6rem; line-height: 2.725rem; font-weight: 700; letter-spacing: 0; text-align: center; transition: .3s; }
#sec07 .bt_soudan:hover { opacity: .8; }

/*メニューのSP寸法（769px以上は1600px基準の比例縮小に任せる）*/
@media screen and (max-width: 768px) {
	.menu { width: 70px; height: 70px; border-radius: 0 0 0 20px; }
	.menu__line { width: 30px; }
	.menu__line--top { top: 20px; }
	.menu__line--center { top: 30px; }
	.menu__line--bottom { top: 40px; }
	.menu__line--top.open { top: 30px; transform: rotate(45deg); }
	.menu__line--bottom.open { top: 30px; transform: rotate(135deg); }
	.menu_ttl { width: 70px; bottom: 10px; }
	.gnav__wrap { padding-top: 70px; }
}

@media screen and (max-width: 768px) {
	.pc_view { display: none!important; }
	body { font-size: 1.6em; }
	.section { padding-top: 40px; padding-bottom: 40px; }
	.sns_area { padding: 60px 0 40px; }
	footer h2 { margin-top: 24px; font-size: 1.7rem; }
	/*来場予約タブはSPで一回り小さく（SVG右端8pxの透明余白も同率で調整）*/
	#bt_side { right: -6px; }
	#bt_side img { width: 80px; }
	#pagetop { right: 12px; bottom: 12px; }
	#pagetop img { width: 70px; }
	.section_t { padding-top: 40px; }
	.section_b { padding-bottom: 40px; }
	.ttl span { width: 240px; height: 53px; padding-top: 0; line-height: 49px; font-size: 2.0rem; }
	.ttl02 { font-size: 2.4rem; }
	.col_box { margin: 0 auto; }
	.col-2_list { gap: 10px 10px; flex-direction: column; }
	.col-2_list .col_box { width: 100%; max-width: 400px; }
	.col-3_list { gap: 10px 10px; flex-direction: column; }
	.col-3_list .col_box { width: 100%; max-width: 400px; }
	/*SPはスライダー表示領域だけページ幅いっぱいに広げる*/
	.sec01_box02_list { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
	/*Slickのdots表示時は下余白を広げて次の見出しと干渉させない*/
	.sec01_box02_list.slick-dotted.slick-slider { margin-bottom: 60px; }
	/*SPはSlickの横スライドに切り替えるためflexを解除*/
	.col-3_list.slick-initialized { display: block; }
	.col-3_list.slick-initialized .col_box { max-width: none; margin-bottom: 0; }
	.col-3_list.slick-initialized .slick-slide { padding: 0 10px; }
	#about .sec01_lead { font-size: 1.6rem; }
	#about .col_box.sec01_box02 { margin-bottom: 40px; }
	#about .ttl02 { font-size: 2.4rem; line-height: 1.5; }
	/*SPは幅が狭く改行位置が変わるため左右余白は付けない（従来どおり）*/
	#about .sec01_box02 h3,
	#about .sec01_box02 p:not(.al-c) { padding-left: 0; padding-right: 0; }
	#about .sec01_box02 h3 { font-size: 2.2rem; line-height: 1.5; }
	#about .sec01_box02 p { font-size: 1.4rem; line-height: 1.7; }
	/*--- SPタイポ・余白調整 ---*/
	.ttl { margin-bottom: 4rem; }
	/*見出し左右のドットは径・間隔とも小さくする（PC:径8px/間隔12px → SP:径6px/間隔8px）*/
	.ttl::before,
	.ttl::after { height: 0.6rem; background-image: radial-gradient(circle, #6FD418 0.3rem, transparent 0.3rem); background-size: 1.4rem 0.6rem; }
	.slick-dots { bottom: -.5rem; }
	#sec03 .ttl { margin-bottom: 4rem; }
	.cafe_intro { padding: 20px; border-radius: 20px; margin-bottom: 30px; }
	.cafe_intro_top { flex-direction: column; gap: 0; }
	.cafe_intro_img { flex: none; width: 70%; max-width: 260px; margin: 0 auto 20px auto; }
	.cafe_intro_img img { aspect-ratio: auto; }
	.cafe_intro_txt h3 { font-size: 2.2rem; margin-bottom: 16px; }
	.cafe_intro_lead { font-size: 1.5rem; margin-bottom: 16px; }
	.cafe_intro_txt p { font-size: 1.4rem; line-height: 1.8; margin-bottom: 14px; }
	.cafe_intro_sns a { font-size: 1.4rem; padding: .7em 1.8em; }
	.cafe_intro_sns img { width: 22px; height: 22px; }
	.cafe_intro_photo { margin-top: 20px; }
	.cafe_intro_photo img { border-radius: 12px; }
	#sec03 .m50-b { margin-bottom: 2rem!important; }
	#sec03 .gaiyo_box { margin: 0 auto 2rem auto; }
	#sec03 .qr_box { border-radius: 2rem; }
	/*スライダーのmargin-bottomが外に抜けて白い余白になるのを防ぐ*/
	#sec04 { overflow: hidden; }
	#sec03 { padding-top: 2rem; }
	/*ドットはスライダー下のマージン内に置く*/
	#sec04 .slick-dots { bottom: -5rem; }
	#sec05 { padding-top: 60px; padding-bottom: 60px; }
	#sec06 { padding-bottom: 60px; }
	footer .footer_info { line-height: 2.5rem; }
	/*出展企業は4列→2列*/
	.col-4_list { gap: 20px 10px; }
	.col-4_list .col_box { width: calc((100% - 10px) / 2); }
	#sec07 { padding-bottom: 60px; }
	#sec07 .company_note { margin-bottom: 24px; font-size: 1.4rem; line-height: 1.5; }
	#sec07 .company_list { row-gap: 30px; }
	#sec07 .item_box { height: 12.8rem; }
	#sec07 .company_box h3 { padding-top: 10px; font-size: 1.5rem; line-height: 1.5; }
	#sec07 .bt_soudan { margin-top: 10px; padding: 9px 8px; font-size: 1.3rem; line-height: 14px; }
	#sec04 .ttl02 { font-size: 2.6rem; line-height: 1.4; }
	#sec04 .event_box h4 { padding: 12px 12px 0; font-size: 2.0rem; line-height: 1.4; }
	#sec04 .event_box p { padding: 6px 12px 0; font-size: 1.6rem; line-height: 1.7; }
	#sec04 .event_box .note { font-size: 1.6rem; line-height: 1.7; }
	#sec04 .event_box p.al-c { padding: 14px 0 0; }
	#sec04 .bt_entry { padding: 12px 10px; font-size: 1.8rem; line-height: 1.5; }
	/*SPはスライダー表示領域だけページ幅いっぱいに広げる*/
	#sec04 .event_list { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
	/*Slickのdots表示時は下余白を広げて次の要素と干渉させない*/
	#sec04 .event_list.slick-dotted.slick-slider { margin-bottom: 60px; }
	#sec04 .event_list:not(.slick-initialized) { row-gap: 30px; }
	#sec03 .gaiyo_box dl dt { width: 100%; padding: 14px 0 0 20px; font-size: 1.6rem; line-height: 1.5; }
	#sec03 .gaiyo_box dl dt::before { left: 0; top: 26px; width: 14px; height: 14px; } /*padding-top14px + 行高24px/2*/
	#sec03 .gaiyo_box dl dt span { width: auto; text-align-last: auto; }
	#sec03 .gaiyo_box dl dd { width: 100%; padding: 2px 0 14px 20px; font-size: 1.6rem; line-height: 1.5; }
	#sec03 .qr_box { padding: 20px; flex-direction: column; }
	#sec03 .qr_box dt { max-width: 150px; margin-bottom: 10px; }
	#sec03 .qr_box dt img { width: 100%; }
	#sec03 .qr_box dd { padding-left: 0; }
	#sec03 .qr_box dd h3 { font-size: 2rem; line-height: 1.4; }
	#sec03 .qr_box dd p { font-size: 1.4rem; line-height: 1.7; }
	#sec02 .tokuten_bt { gap: 15px; flex-direction: column; align-items: center; }
	#sec02 .tokuten_bt li { width: 100%; max-width: 400px; }
	#sec02 .tokuten_note h3 { font-size: 2rem; line-height: 1.5; margin-bottom: 1.3rem; }
	#sec02 .tokuten_note p { font-size: 1.4rem; line-height: 1.7; }
	#sec02 .tokuten_bt a { padding: 12px 15px; border-radius: 13px; font-size: 1.8rem; line-height: 1.4; }
	a.bt_base,
	a.bt_base02 { font-size: 1.8rem; }
	.main_img { padding: 40px 15px 100px 15px; }
	.main_img::after { height: 80px; background-size: auto 80px; }
}

@media screen and (max-width: 550px) {
	.gnav { width: 100%; max-width: 550px; }
}

@media screen and (min-width: 768px) {
	.container { max-width: 75rem; }
}

@media screen and (min-width: 992px) {
	.container { max-width: 97rem; }
}

@media screen and (min-width: 1200px) {
	/*左右padding15pxを除いた実コンテンツ幅が1200pxになる外枠幅*/
	.container { max-width: 123rem; }
}

@media screen and (min-width: 769px) {
	#sec04 .col-3_list { gap: 5rem 2.6rem; }
	#sec04 .col-3_list .col_box { width: calc((100% - 5.2rem) / 3); }
}

/*----------------------------------------
	タブレット（769px〜1599px）
	1600pxのPCデザインを基準に、ルートフォントサイズを画面幅比で縮小し、
	rem指定の全要素（文字・行間・余白・カード・見出し・固定要素）を比例縮小する
	※transform:scale / zoom は使用しない
-----------------------------------------*/
@media screen and (min-width: 769px) and (max-width: 1599.98px) {
	/*1600px時に 100vw/160 = 10px（=62.5%）となりPCデザインと一致する*/
	html { font-size: calc(100vw / 160); }
	/*実コンテンツ幅1200px（外枠1230px）も1600px基準の比率で縮小*/
	.container { max-width: 123rem; padding-left: 1.5rem; padding-right: 1.5rem; }
	/*固有幅で表示している画像はrem指定に置き換えて比率を保つ*/
	.main_img h2 img { width: 122.492rem; }
	.main_img::after { background-size: auto 16.2rem; }
	.sns_area img { width: 76.7rem; }
	footer .container > p.al-c:first-child img { width: 119.364rem; }
	footer .footer_logo img { width: 61.248rem; }
}

/*----------------------------------------
	スクロール表示アニメーション
	既存の jquery.inview + common.js（.mv_base が画面内に入ったら .mv を付与し、以降は外さない）をそのまま使用する。
	今後のセクションも、対象要素に .mv_base を付けるだけで同じ動きになる。
	FV・ヘッダー・ドロワー・来場予約タブ・Slickのdotsには付けない。
-----------------------------------------*/
.mv_base { opacity: 0; transform: translateY(3rem); transition: opacity .6s ease-out, transform .6s ease-out; }
.mv_base.mv { opacity: 1; transform: translateY(0); }

@media print,screen and (min-width: 769px) {
	/*PCはカード単位で表示するため、親のリスト自体はアニメーションさせない*/
	.sec01_box02_list.mv_base,
	#sec04 .event_list.mv_base { opacity: 1; transform: none; transition: none; }
	/*カードは左から順に少し時間差をつける（各行の1・2・3列目）*/
	.sec01_box02_list .col_box.mv_base:nth-child(3n+2),
	#sec04 .event_list .col_box.mv_base:nth-child(3n+2) { transition-delay: .15s; }
	.sec01_box02_list .col_box.mv_base:nth-child(3n+3),
	#sec04 .event_list .col_box.mv_base:nth-child(3n+3) { transition-delay: .3s; }
	/*出展企業は4列のため4枚ごとに時間差をつける*/
	#sec07 .company_list .col_box.mv_base:nth-child(4n+2) { transition-delay: .1s; }
	#sec07 .company_list .col_box.mv_base:nth-child(4n+3) { transition-delay: .2s; }
	#sec07 .company_list .col_box.mv_base:nth-child(4n+4) { transition-delay: .3s; }
}

@media screen and (max-width: 768px) {
	/*SPはSlickの初期化・スワイプ・複製スライドと競合しないよう、カードは常時表示にしてリスト単位で表示する*/
	.sec01_box02_list .col_box.mv_base,
	#sec04 .event_list .col_box.mv_base { opacity: 1; transform: none; transition: none; }
}

@media (prefers-reduced-motion: reduce) {
	.mv_base,
	.mv_base.mv { opacity: 1; transform: none; transition: none; }
}