@charset "UTF-8";

* {
	box-sizing: border-box;	/* ボタンなど要素のボーダー線幅をボックス内に収める */
}

/**************************************************************************
	共通系設定
**************************************************************************/
/* 変数定義 */
:root {
	--bgcolor:#fcfffc;
	--f-c-common: #707570;
	--f-c-kyocho: darkcyan;

	--headfoot-color:#e8f0e8;
	--hamberger-btn-color:darkcyan;
	--hamberger-frame-bg-color: #d0f0d0f4;
	--hamberger-menu-color: #206020;
	--btn-color: #30c2ba;
	--waku-color:#d0f0d0;
	--midashi-waku-color: #f0fff0;
	--speak-bgcolor: #e0ffe0;
	--speak-color: var(--hamberger-menu-color);

	--v-headerheight: 80px;
	--v-w-mobile: 90vw;
	--v-w-pc: 768px;
	--v-w-header: 768px;
	--v-w-haba-min-ritsu: 90%;
	--v-h-gyokan: 2.0;
	--v-h-gyokan-link: 1.6;

	--v-h-space-ss: 2px;
	--v-h-space-s: 4px;
	--v-h-space-m: 20px;
	--v-h-space-sectionend: 40px;
	--v-h-space-l: 80px;
}

body {
	margin:0;	/* 初期設定 */
	padding:0;	/* 初期設定 */
	padding-top: var(--v-headerheight);	/* ヘッダーの高さ分、表示開始点を下げる */
	background-color: var(--bgcolor);
	color: var(--f-c-common);
	font-family: "メイリオ", sans-serif;	/* マイクロソフト提唱の美しく読みやすいフォントの１つがメイリオ */
	font-size: clamp(18px, 2vw, 19px);		/* 標準サイズは16px */
}

/* 文字サイズ定義 */
.big3   { font-size: clamp(36px, 2vw, 40px);}
.big2   { font-size: clamp(28px, 2vw, 34px);}
.big    { font-size: clamp(24px, 2vw, 26px);}
.normal { font-size: clamp(18px, 2vw, 19px);}
.normal2{ font-size: clamp(17px, 2vw, 17px);}
.small  { font-size: clamp(12px, 2vw, 14px);}
.small2 { font-size: clamp(10px, 2vw, 11px);}
.headerfontsize {
	font-size: clamp(20px, 2vw, 22px);
	color: var(--hamberger-menu-color);
}
.headerfontsize-small { 
	font-size: clamp(11px, 2vw, 12px);
	color: var(--hamberger-menu-color);
}

/* 文字の背景色を付ける */
.bgc-on {
	background-color: #ffffe0;
}

.font-size-big {
	font-size: clamp(20px, 2vw, 26px);
}

h1, h2, h3, h4, h5, h6, p, figure, ul {
	margin: 0;
	padding: 0;
	list-style:none;
}

p {
	line-height:1.8;
}

a {
	color: inherit;
	text-decoration: none;
}

a:hover {
	filter: brightness(90%) contrast(120%);
}

a.anchor{
    display: block;
    padding-top: 84px;
    margin-top: -84px;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	border-radius: 8px;
}

/* 横幅と左右の余白 */
.w-container {
	width: min(90%, var(--v-w-mobile));
	margin: auto;
	position: relative;
}

/* 見出し用・帯の装飾 */
.midashi {
	/* 見出し帯の上下にわずかなスペースを空ける(margin-top, -bottom) */
	margin: var(--v-h-space-s) 0;

	padding: 1.5em 1em 0.8em 1em;
	text-align: center;	/* センタリング */
	
	color :var(--f-c-kyocho);
	background: var(--midashi-waku-color);
    border-left: solid 6px #60c0c0;
    border-right: solid 6px #60c0c0;
	border-radius: 8px;
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.1);
}

/* 縦の余白　縦方向の間の調整用 */
.h-space-ss {
	height: var(--v-h-space-ss);
}
.h-space-s {
	height: var(--v-h-space-s);
}
.h-space-m {
	height: var(--v-h-space-m);
}
.h-space-sectionend {
	height: var(--v-h-space-sectionend);
}
.h-space-l {
	height: var(--v-h-space-l);
}

/* 文字の強調 */
.kyocho {
	color:var(--f-c-kyocho);
	font-weight: bold;
}

/* ボタン */
.btn {
	display: block;
	width: 260px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 4px;
	background-color: #e8b368;
	color: #ffffff;
	font-size: 18px;
	text-align: center;
	text-shadow: 0 0 6px #00000052;
}

.gyokan_m {
	line-height: 1.8;
}

/* 見えないH1（画面に見えないH1でSEO対策） */
.seo_h1 {
	position:absolute;
	left:-9999px;
}

.h-container-space {
	line-height: var(--v-h-gyokan);
	padding: 1.5em 0.8em 1.5em 0.8em;

}

.h-container-space2 {
	line-height: var(--v-h-gyokan-link);
	padding: 1.5em 0.8em 1.5em 0.8em;
}

/* 上へ戻るボタンで戻る時に、中途半端に送らず、最上位まで送る指定 */
#top{
	scroll-margin-top:80px;
}

/* 動画枠設定 */
.video-wrapper {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9の比率 */
}
.video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 枠　共通 */
.waku-common {
	/* 線 */
	border: solid 2px var(--waku-color);
	/* 角の丸み */
	border-radius: 8px;
    box-shadow: 0px 1px 4px 2px rgba(0, 0, 0, 0.1);
}



/**************************************************************************
	ヘッダー
**************************************************************************/
/* ヘッダー */
.header {
	position: fixed;	/* 固定 */
	top: 0;
	left: 0;
	width: 100%;
	height: var(--v-headerheight);
	z-index: 1000;		/* 後ろに隠れないようにする */
	background-color: var(--headfoot-color);
}

/* ヘッダーの並び設定 */
.header-container {
	display: flex;
	justify-content:space-between;
	align-items:center;
	height: 100%;
}

/* ヘッダーに置くロゴ画像（Camp Tenhira の文字画像）のサイズ指定 */
.header-logo-string-size {
	/* ヘッダーに置く画像なので小さめの固定サイズにする（元サイズは 1575px×244px） */
	width: 200px;
	height: 31px;
}

/* ヘッダーボタンの装飾 */
.header-btn {
    padding: 0em 0em 0em 0em;
	width: 100px;
	height: 30px;
	align-content: center;
	text-align: center;
	font-size: clamp(16px, 2vw, 18px);
}

.header p {
	line-height: 1.2;
}



/**************************************************************************
	ナビボタン　ハンバーガーメニュー
**************************************************************************/
.navbtn {
	padding: 0;
	outline:none;
	border:none;
	background:transparent;
	cursor:pointer;	/* カーソル形状・ポインター形状（指でさす形状） */
	color:var(--hamberger-btn-color);
	/* font-size:30px; */
	font-size: clamp(24px, 2vw, 26px);
}
.open .navbtn {
	z-index: 110;
	color: #ffffff;
}
.navbtn .fa-bars {
	display: revert;
}
.open .navbtn .fa-bars {
	display: none;
}
.navbtn .fa-times {
	display: none;
}
.open .navbtn .fa-times {
	display: revert;
}



/**************************************************************************
	上に戻るボタン　設定用
**************************************************************************/
/* HTMLの表示指定・スムーズ 上に戻るボタンの表示の為にここで指定 */
html {
	scroll-behavior: smooth;
}

.back-to-top {
	position: fixed;
	right: 20px;
	bottom: calc(20px + env(safe-area-inset-bottom));
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: rgba(240,255,240,0.3);
	color: lightblue;
	text-decoration: none;
	font-size: 22px;
	font-weight: bold;

	display: flex;
	align-items: center;
	justify-content: center;

	box-shadow: 0 2px 6px rgba(128,128,128,0.3);

	/* 初期は非表示 */
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s ease;

	z-index: 9999;	/* 最上位階層にボタンを置く */
}

/* 表示状態　ふわっとボタンを表示させる */
.back-to-top.show {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}



/*****************************************
	hero	ヒーロー
*****************************************/
.hero {
	/* vh - 従来の高さ取得ブラウザ用 */
	height: calc(100vh - var(--v-headerheight));
	/* svh - 最小高さでの高さ取得可能なブラウザ用（スマホ用ブラウザ対策）（上書き指定） */
	height: calc(100svh - var(--v-headerheight));
	background-image: url(img/hero.jpg);
	background-position: center;
	background-size: cover;

	position: relative;
	overflow: hidden;

	margin-bottom: var(--v-h-space-sectionend);
}
/* 背景レイヤー（下レイヤー）の、ヒーロー画像だけ明暗変化させるよう指示 10秒間隔 */
.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url(img/hero.jpg) center / cover no-repeat;
	/* animation: brightnessFade 10s ease-in-out infinite alternate; */
	animation: brightnessFade 1.0s ease-out forwards;
	z-index: 0;
}
/* タイトル画像（上レイヤー）タイトル「CampTenohira」画像は明暗変化させない */
.hero-title {
	position: relative;
	z-index: 1;
}
/* 背景レイヤー（下レイヤー）を指定の明るさの範囲で変化実行 */
@keyframes brightnessFade {
	from { filter: brightness(90%) blur(0px); }
	to   { filter: brightness(120%) blur(0px); }
}

.hero-container {
	display: grid;
	justify-items:center;
	align-content: center;
	height: 100%;
}

/* ヒーロー画像の上レイヤーに置いている、画像（Camp Tenhira の文字画像）のサイズ指定 */
.hero-camptenohira-string-size {
	width: 100%;
}



/*****************************************
	Banner	参加募集バナー
*****************************************/
.banner {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.banner-container {
	/* ↓↓↓　ボックス外にボーダーの線がはみ出すので、ボーダー線の幅までボックス内に収める様に box-sizing を使用。 全体に指定するのでグローバル指定で使う。よくわかるHTML＆CSSコーディング-P91参照 */
	/* box-sizing: border-box; */
	display: grid;
	/* ↓↓↓　aタグ「チケット購入ボタン」のボタンが<br>タグまでしか広がらないので、使わない */
	/* justify-content: center; */
	justify-items: center;
	align-content: center;
	width: 100%;
}

.banner p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.banner .box-p {
	line-height: var(--v-h-gyokan-link);
}

.banner-btn {
	width: min(90%, var(--v-w-mobile));
	margin: 2em auto;
	padding: 0.8em 0.8em;

	color: white;
    background: var(--btn-color);
	border: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	border-radius: 20px; 
	text-align: center;
}

.banner-btn a {
	display: block;
}

.banner-img {
	/* ボックスの影を指定（[左右][上下][ぼかし][広がり][影の色]） */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
				0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 8px;
	text-align: center;
}

/* チケット画像のサイズ指定 */
.banner-img-size {
	/* PC＝横並び、スマホ＝横並びしない、なので、画像幅を画面幅いっぱい～300pxにする（元サイズは 400px × 400px） */
	width: 100%;
	max-width: 300px;
	margin: 0 auto; /* 左右の中央寄せ */
}

.banner .btn-text-center {
	text-align: center;
}



/*****************************************
	event	開催日
*****************************************/
.event {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.event-container {
	/* 上にくる「帯」とのわずかなスペースを確保 */
	margin-top: var(--v-h-space-s);
	display: grid;
	justify-items:center;
	align-content: center;
	height: 100%;
	width: 100%;
	padding: 1em 1em;
}

/* ロゴ画像（Camp Tenhira の文字画像）のサイズ指定 */
.event-logo-string-size {
	/* 画面幅程度のサイズで表示させる（元サイズは 1575px×244px） */
	width: 100%;
}

.event h1 {
	font-family: "メイリオ", sans-serif;
	font-size: clamp(28px, 2vw, 34px);
	margin-bottom:16px;
	min-height: 0vw;
	font-weight: 400;
	line-height: 2.0;
	text-align: center;	/* センタリング */
	letter-spacing: normal;
}

.event .kaisai_color {
	color:var(--f-c-kyocho);
}

.event p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	margin-bottom:32px;
	min-height: 0vw;
	line-height: 1.3;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.event .soeji {
	display:inline;
	font-family: "メイリオ", sans-serif;
	font-size: clamp(18px, 2vw, 20px);
	min-height: 0vw;
	line-height: 1.3;
	text-align: center;	/* 中央よせ */
	letter-spacing: normal;
	color: var(--f-c-kyocho);
	margin-bottom: 20px;
}

/* 画像をセンターに配置 */
.event .box-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 40px;
}



/*****************************************
	news	新着情報
*****************************************/
.news {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.news-container {
	display: grid;
	justify-items: left;
	align-content: center;
	height: 100%;
}

.news p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	line-height: 1.3;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.news .box-p {
	line-height: var(--v-h-gyokan);
}

.news a {
	color: blue;
}

.news ul {
	list-style: none;
	padding-left: 0;
	line-height: var(--v-h-gyokan);
	font-size: 90%;
}

.news ul time {
	border-radius: 10px;
	background-color: var(--headfoot-color);
	color: var(--btn-color);
}

/*****************************************
	Concept	コンセプト
*****************************************/
.concept {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.concept-container {
	display: grid;
	justify-items:center;
	align-content: center;
	height: 100%;
}

/* ヒーロー画像の上レイヤーに置いている、画像（Camp Tenhira の文字画像）のサイズ指定 */
.concept-logo-string-size {
	width: clamp(200px, 2vw, var(--v-w-mobile));
}

.concept h1 {
	font-family: "メイリオ", sans-serif;
	font-size: clamp(28px, 2vw, 30px);
	margin-bottom:16px;
	min-height: 0vw;
	font-weight: 400;
	line-height: 2.0;
	text-align: center;	/* センタリング */
	letter-spacing: normal;
}

.concept p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

/* 画像をセンターに配置 */
.concept .box-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
}

.concept .box-p {
	line-height: var(--v-h-gyokan);
}



/*****************************************
	Program	進行プログラム
*****************************************/
.program {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.program-container {
	display: grid;
	justify-items:center;
	align-content: center;
	height: 100%;
}

.program p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.program .box-p {
	line-height: var(--v-h-gyokan);
}

.program a {
	color: blue;
}



/*****************************************
	want	ワント（募集）
*****************************************/
.want {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.want-container {
	display: grid;
	justify-items:center;
	align-content: center;
	height: 100%;
	padding: 1.5em 1em 0em 1em;
}

.want-waku {
	padding: 0.5em 0.5em;
	border: solid 2px var(--waku-color);	/* 線 */
	border-radius: 8px;						/* 角の丸み */
	line-height: var(--v-h-gyokan);
}

.want-center {
	text-align: center;
	width: 100%;
}

.want-left {
	text-align: left;
	width: 100%;
}

.want p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.want .box-p {
	line-height: var(--v-h-gyokan);
}




/*****************************************
	Artist	出演者
*****************************************/
.artist {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.artist-container {
	display: grid;
	justify-content: center;
	align-content: center;
	height: 100%;
}

.artist p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	margin-bottom:32px;
	min-height: 0vw;
	line-height: 1.3;
	text-align: center;	/* 中央寄せ */
	letter-spacing: normal;
}

.artist-img {
	position: relative;
}

/* artist（出演者）画像のサイズ指定 */
.artist-img-size {
	/* PC＝横並び、スマホ＝横並びしない、なので、画像幅を画面幅いっぱい～300pxにする（元サイズは 337px × 600px） */
	width: 100%;
	max-width: 300px;
	margin: 0 auto; /* 左右の中央寄せ */
}

.artist-name {
	position: absolute;
	background: rgba(200, 200, 200, 0.3);
	padding: 4px 0;
	top: 8px;
	left: 0;
	width: 100%;
	text-align: center;
	color: white;
	font-weight: bold;
	text-shadow: 0 0 6px black;
}



/*****************************************
	Ticket	チケット
*****************************************/
.ticket {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.ticket-container {
	/* ↓↓↓　ボックス外にボーダーの線がはみ出すので、ボーダー線の幅までボックス内に収める様に box-sizing を使用。 全体に指定するのでグローバル指定で使う。よくわかるHTML＆CSSコーディング-P91参照 */
	/* box-sizing: border-box; */
	display: grid;
	/* ↓↓↓　aタグ「チケット購入ボタン」のボタンが<br>タグまでしか広がらないので、使わない */
	/* justify-content: center; */
	justify-items: center;
	align-content: center;
	width: 100%;
}

.ticket-caution-container {
	width: min(90%, var(--v-w-mobile));
	margin: auto;
	position: relative;
}

.ticket p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.ticket .box-p {
	line-height: var(--v-h-gyokan-link);
}

.ticket-btn {
	width: min(90%, var(--v-w-mobile));
	margin: 2em auto;
	padding: 0.8em 0.8em;

	color: white;
    background: var(--btn-color);
	border: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	border-radius: 20px; 
	text-align: center;
}

.ticket-btn a {
	display: block;
}

.ticket-img {
	/* ボックスの影を指定（[左右][上下][ぼかし][広がり][影の色]） */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
				0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 8px;
	text-align: center;
}

/* チケット画像のサイズ指定 */
.ticket-img-size {
	/* PC＝横並び、スマホ＝横並びしない、なので、画像幅を画面幅いっぱい～300pxにする（元サイズは 400px × 400px） */
	width: 100%;
	max-width: 300px;
	margin: 0 auto; /* 左右の中央寄せ */
}

.ticket .btn-text-center {
	text-align: center;
}

.moji-img-1retsu {
	display: flex;
	align-items: left;
	justify-content:center;
	gap: 4px;
}


/*****************************************
	Area Map	エリア・マップ
*****************************************/
.areamap {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.areamap-container {
	display: grid;
	justify-items:center;
	align-content: center;
	height: 100%;
	padding: 0.1em 0.1em;
}

.areamap p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	margin-bottom:32px;
	min-height: 0vw;
	line-height: 1.3;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}



/*****************************************
	Access	交通案内
*****************************************/
.access {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.access-container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

/* Access 交通案内（Google Map） */
.access-traffic-container {
	width: 100%;
	max-width: 330px;
	position: relative;
	gap: 20px;
}

/* Access 交通案内（文字情報） */
.access-traffic-container_moji {
	width: 100%;
	max-width: 330px;
	position: relative;

	padding: 0.7em 0.6em 0.7em 0.6em;
	/* 線 */
	/* border: solid 2px var(--waku-color); */
	/* 角の丸み */
	border-radius: 8px;
}

.access p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	margin-bottom:32px;
	min-height: 0vw;
	line-height: 1.3;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.access .box-p {
	line-height: var(--v-h-gyokan-link);
}

/* Google Map スマホ画面幅にスクロールバーが表示された時の、画面幅あふれを防ぐ */
.access-map {
	margin: 0 auto; /* 左右の中央寄せ */
}

/* Google Map 画面幅あふれを防ぐ  max-width: 100% */
iframe {
	display: block;
	max-width: 100%;
	max-height: 100%;
}



/*****************************************
	Contact	お問合せ
*****************************************/
.contact {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.contact-container {
	/* ↓↓↓　ボックス外にボーダーの線がはみ出すので、ボーダー線の幅までボックス内に収める様に box-sizing を使用。 全体に指定するのでグローバル指定で使う。よくわかるHTML＆CSSコーディング-P91参照 */
	/* box-sizing: border-box; */
	display: grid;
	/* ↓↓↓　aタグ「お問い合わせはこちら」のボタンが<br>タグまでしか広がらないので、使わない */
	/* justify-content: center; */
	justify-items: center;
	align-content: center;
	padding: 1.5em 1em 0em 1em;
	width: 100%;
}

.contact p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.contact .box-p {
	line-height: var(--v-h-gyokan-link);
}

.contact-btn {
	width: min(90%, var(--v-w-mobile));
	padding: 0.8em 0.8em;

	color: white;
    background: var(--btn-color);
	border: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	border-radius: 20px; 
	text-align: center;
	line-height: var(--v-h-gyokan-link);
}

.contact .btn-text-center {
	text-align: center;
}

.contact a {
	display: block;
	width: 100%;
}

form {
	display:block;
	width: 100%;
	font-size: clamp(18px, 2vw, 20px);
	text-align: center;
}

form p {
	display:inline-block;
	min-height: 0vw;
	line-height: 1.3;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

form label {
	display:block;
	min-height: 0vw;
	line-height: 1.3;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

form input {
	width: min(96%, var(--v-w-mobile));
	min-height: 30px;
	font-size: clamp(18px, 2vw, 20px);
	border-style: solid;
	border-color: var(--btn-color);
	border-radius: 4px;
	border-width: 1px;
}

form textarea {
	width: min(96%, var(--v-w-mobile));
	min-height: 200px;
	font-size: clamp(18px, 2vw, 20px);
	border-style: solid;
	border-color: var(--btn-color);
	border-radius: 4px;
	border-width: 1px;
}

form select {
	width: min(96%, var(--v-w-mobile));
	min-height: 30px;
	font-size: clamp(18px, 2vw, 20px);
	border-style: solid;
	border-color: var(--btn-color);
	border-radius: 4px;
	border-width: 1px;
	color: var(--f-c-kyocho);
}

form button {
	width: min(90%, var(--v-w-mobile));
	height: 60px;
	background: var(--btn-color);
	border: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);

	padding: 0.8em 0.5em;
	border-radius: 20px; 
	text-align: center;

	color: white;
	font-size: clamp(18px, 2vw, 20px);
}



/*****************************************
	speak	参加呼びかけ
*****************************************/
.speak {
	background-position: center;
	margin-bottom: var(--v-h-space-sectionend);
}

.speak-container {
	display: grid;
	justify-items: left;
	align-content: center;
	height: 100%;
	background-color: var(--speak-bgcolor);
	color: var(--speak-color);
}

.speak p {
	display:inline;
	font-family: "メイリオ", sans-serif;
	min-height: 0vw;
	text-align: left;	/* 左寄せ */
	letter-spacing: normal;
}

.speak .box-p {
	line-height: var(--v-h-gyokan-link);
}

.speak-btn {
	width: min(90%, var(--v-w-mobile));
	margin: 2em auto;
	padding: 0.8em 0.8em;

	color: white;
    background: var(--btn-color);
	border: none;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
	border-radius: 20px; 
	text-align: center;
}

.speak-btn a {
	display: block;
}

.speak-img {
	/* ボックスの影を指定（[左右][上下][ぼかし][広がり][影の色]） */
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 
				0 6px 20px 0 rgba(0, 0, 0, 0.19);
	border-radius: 8px;
	text-align: center;
}

/* チケット画像のサイズ指定 */
.speak-img-size {
	/* PC＝横並び、スマホ＝横並びしない、なので、画像幅を画面幅いっぱい～300pxにする（元サイズは 400px × 400px） */
	width: 100%;
	max-width: 300px;
	margin: 0 auto; /* 左右の中央寄せ */
}

.speak .btn-text-center {
	text-align: center;
}



/*****************************************
	Footer	フッター
*****************************************/
/* フッター */
.footer {
	padding:70px 0;
	background-color:var(--headfoot-color);
	color: #707070;
	font-size: 13px;
}

.footer-container {
	display:grid;
	gap:30px;
	justify-items:center;
}

/* フッター：ＳＮＳメニュー */
.footer-sns {
	display: flex;
	gap: 24px;
	font-size: 24px;
}

.footer-sns a {
	display: grid;
	place-items: center;
	width: 36px;
	aspect-ratio: 1 / 1;
	background-color:#cccccc;
	color: #ffffff;
	clip-path:circle(50%);
}

@supports not (aspect-ratio: 1 / 1) {
	.footer-sns a {
		height: 36px;
	}
}

/* フッター：テキストメニュー */
.footer-menu {
	display: flex;
	flex-wrap:wrap;
	justify-content: center;
	gap: 20px;
}






/***************************************************************************
	ＰＣ画面用の設定・スタート
***************************************************************************/
@media (min-width:768px) {

	/* 横幅と左右の余白 */
	.w-container {
		width: min(90%, var(--v-w-pc));
		margin: auto;
		position: relative;
	}



	.want-waku {
		width: min(50vw, 65%);	/* 外測で６５％を指定 */
		margin: 0 auto;
		padding: 1.3em 1em 1.3em 1em;
	}

	.want button {
		width: min(40%, var(--v-w-mobile));
	}


	
	/* Artist */
	.artist-container {
		justify-content: center;
		align-content: center;
		height: 100%;

		/* 横幅が広ければ、横並びに画像を並べる　display:flex ＋ flex-wrap:wrap */
		display: flex;
		flex-wrap: wrap;

		gap: 20px;
	}



	/* Ticket */
	.ticket-container {
		justify-content: center;
		align-content: center;
		height: 100%;

		/* 横幅が広ければ、横並びに画像を並べる　display:flex ＋ flex-wrap:wrap */
		display: flex;
		flex-wrap: wrap;

		gap: 20px;
	}

	.ticket-caution-container {
		max-width: 60%;
		margin: auto;
		position: relative;
	}

	.ticket-btn {
		width: min(40%, var(--v-w-mobile));
	}



	.areamap-img-size {
		width: min(90%, var(--v-w-pc));		
	}



	/* Access */
	.access-container {
		flex-direction: row;
	}



	/* contact */
	.contact-btn {
		width: min(40%, var(--v-w-mobile));
	}

	.contact button {
		width: min(40%, var(--v-w-mobile));
	}



	/* フッター */
	.footer-container {
		grid-template-columns: auto auto;
		grid-template-rows: auto auto auto;
	}

	.footer-container > .footer-site {
		margin-bottom: 20px;
	}

	.footer-container > *:not(.footer-sns) {
		justify-self: start;
	}
	
	.footer-container > .footer-sns {
		grid-column: 2;
		grid-row: 1 / 4;
		justify-self: end;
		align-self: center;
	}

}
/***************************************************************************
	ＰＣ画面用の設定・エンド
***************************************************************************/



/***************************************************************************
	ナビボタン用	画面幅 767px 以下でナビボタン表示
***************************************************************************/
@media (max-width: 767px) {
	.nav {
		position: fixed;
		/* inset: -100% -100% 100% 100%; */

		/* 初期位置は 画面枠の右側に置く 
			上枠0（上枠の枠上）、右枠-100（右枠の右側）、
			下枠0（下枠の枠上）、左枠 100（左枠の右側）*/
		inset: 0 -100% 0 100%;
		z-index: 100;
		/* background-color: #4e483ae6; */
		background-color: var(--hamberger-frame-bg-color);
		transition: transform 0.3s;
	}
	.open .nav {
		/* transform: translate(-100%, 100%); */
		transform: translate(-100%, 0);
	}
	.open body {
		position: fixed;
		overflow: hidden;
	}
	.nav ul {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		height: 100%;
		gap: 40px;
	}
}

/*****************************************
	画面幅 768px 以上は ナビボタン非表示
*****************************************/
@media (min-width: 768px) {
	.navbtn {
		display: none;
	}
	.nav ul {
		display: flex;
		/* gap: 40px; */
		gap: 16px;
		color: #707070;
	}
}