@charset "UTF-8";

body * :where(h1, h2, h3, h4, p, span, strong, address, a, dt, dd, summary, input, figcaption, time, tr, td, th, br){
	line-height: 1.5 !important;
	font-size: 4vw !important;
}

/* 改行 */
.sp{
	display: block;
}

/* inner, sidebar の最大表示幅を100vwに変更　左右の余白は1vwずつ */
.inner{
	min-width: 100vw;
}

/* ヘッダー上部の文字サイズ調整 */
header > .inner > p{
	font-size: 1.5vw !important;
	padding: 2%;
}

/*  ヘッダー下部メニュー */
.menu > a{
	width: fit-content !important;
	height: fit-content;
	font-size: 2.2vw !important;
	padding: 0.5em !important;
}

header > .inner > .menu > a > img{
	width: 2.2vw;
	height: 2.2vw;
	margin-right: 6px;
}

/* 神崎農園の紹介を縦並びに変更 */
#info > .inner{
	flex-direction: column;
	height: fit-content;
	padding: 2%;
}

#info > .inner > img{
	min-width: 100%;
}

#info > .inner > div > h2 > img{
	width: 36vw;
	height: fit-content;
	aspect-raito: 185 / 21;
}

/* サイドバーをコンテンツの下に変更 */
main{
	flex-direction: column-reverse;
}

/* トップページの種無し・皮ごと… */
main#index > #container{
	min-width: 100%;
	padding: 2%;
}

main#index > #container > div{
	flex-direction: column;
}

main#index > #container > div > div{
	width: 100%;
	display: flex;
	justify-content: space-between;
}

main#index > #container > div > div > figure{
	width: 50vw;
	aspect-raito: 192 / 259;
}

main#index > #container > div > div > figure > img{
	min-width: 100%;
	height: auto;
	asapect-raito: 192 / 259;
}

main#index > #container > div > div > figcaption{
	width: 40vw;
}

/* サイドバー */
.sidebar{
	min-width: 100vw;
	padding: 2%;
}

.youtube{
	display: block;
	width: 90vw;
	margin: 0 auto;
}

.sidebar > .address{
	width: 90vw;
	margin: 0 auto;
}

.sidebar > .address > h1 > a::before{
	width: 90vw;
}

/* 直売所周辺マップ、インスタ */
a.insta{
	justify-content: flex-start;
}

a.insta::after{
	width: 12vw;
	height: 12vw;
	margin-left: 5vw;
}

/* インフォメーション・営業日カレンダー・階層ページのh2タイトルなど */
.sidebar > .container > .infomation > h3,
.sidebar > .container > .calendar > h3,
.sidebar > .container > .infomation > dl> dt,
.sidebar > .container > .infomation > dl> dd,
.sidebar > .container > .infomation > p,
#news > h2,
#kodawari > #container > h2,
#seisan > #container > h2,
#photo > #container > h2,
#kodawari > #container > h2,
#shukka > #container > h2{
	font-size: 6vw;
	line-height: 1.3;
	height: fit-content;
}

#news h3,
#news p{
	font-size: 4vw;
	line-height: 1.3;
}

.sidebar > .container > .infomation > dl > dt{
	width: 5em;
}

.calendar *:not(h3),
.xo-month > caption,
.introduce *{
	font-size: 4vw;
	line-height: 1.3 !important;
}

/* 営業日カレンダーの休み凡例項目の前月、翌月への◀▶ */
button.month-prev > span,
button.month-next > span{
	font-size: 0 !important;
}

/* 農園主の紹介 */
.introduce > h3 > img{
	width: 32vw;
	height: fit-content;
}

/* footer */
footer > .inner > .menu{
	display: flex;
	justify-content: center;
}

footer > .inner > .menu > a{
	text-align: center;
	padding: 0.5em 0 0.5em 0 !important;
	font-size: 2.25vw !important;
}

footer > .inner > address{
	text-align: center;
	font-size: 5vw;
	margin-top: 10vw;
}

footer >.inner > .copyright{
	text-align: center;
	font-size: 2.2vw !important;
	margin-top: 3vw !important;
}

/* 階層ページ */
#index > div > #container,
#kodawari > #container,
#seisan > #container,
#photo > #container{
	width: 100%;
	padding: 2%;
}

/* フォトギャラリー */
#photo > #container > div > a{
	width: 47vw !important;
}

#photo > #container > div > a > figure > img{
	width: calc(47vw - 8px) !important;
	height: calc((47vw - 8px) / 4 * 3) !important;
	aspect-raito: 4 /3;
}

#photo > #container > div > a > figcaption{
	width: 100% !important;
	font-size: 4vw !important;
	line-height: 1.3 !important;
}

/* アクセスマップ */
#map > div{
	flex-direction: column;
}


/* 主な生産品種 */
main#seisan > #container > div{
	flex-direction: column;
}

main#seisan > #container > div > figure > img{
	width: 100%;
}

/* 農園主のこだわり */
main#kodawari > #container > div > div:has(h3){
	flex-direction: column;
}

main#kodawari > #container > div > div:has(h3) > p > br{
	display: none;
}

main#kodawari > #container > div > .contents{
	height: fit-content;
	flex-direction: column;
}

.tab_btn_area > .tab_btn{
	width: 100% !important;
	color: inherit;
	font-size: 4vw !important;
}

.tab_btn_area > .tab_btn > span{
	font-size: 10vw !important;
}

.tab_content_area{
	margin-top: 10px;
}

.tab_content{
	width: 100% !important;
}

.tab_content > h4{
	align-items: center;
	font-size: 6vw !important;
}

.tab_content.active::after{
	display: none;
}