@charset "utf-8";


@import url("inview.css");


@keyframes animation1 {
	0% {
		right: -200px;
	}

	100% {
		right: 0px;
	}
}


@keyframes opa1 {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}


body * {
	box-sizing: border-box;
}

html {
	font-size: clamp(12px, 0.585vw + 9.80px, 18px);
	/*画面幅375px〜1400pxの間で、12px〜18pxに可変。下でrem管理しているものも連動*/
	overflow-x: visible;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--base-font);
	-webkit-text-size-adjust: none;
	background: var(--bg-color);
	color: var(--bg-inverse-color);
	line-height: 2;
	overflow-x: hidden;
}

h2 {
	color: #e63312;
}

main h2.title6-parts,
main h3.title6-parts,
main h4.title6-parts {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

main h2.title6-parts {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
	border-radius: 5px;
	padding: 0.5rem 1rem;
	font-size: 1.3rem;
}


main h3.title6-parts {
	border-bottom: 2px solid var(--primary-color);
	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-colorを読み込み*/
	padding-inline: 1rem;
	font-size: 1.2rem;
}

main h4.title6-parts {
	padding-inline: 1rem;
	font-size: 1.0rem;
}

main h2.title6-parts span.small-parts,
main h3.title6-parts span.small-parts {
	font-size: 0.8rem;
	font-weight: normal;
	opacity: 0.5;
}

main p {
	padding-inline: 1rem;
}

/*bg1-primary-parts内で使用した場合*/
main .bg1-primary-parts h2.title6-parts {
	background: var(--primary-inverse-color);
	color: var(--primary-color);
}

main .bg1-primary-parts h3.title6-parts {
	border-bottom: 2px solid var(--primary-inverse-color);
	/*下線の幅、線種、var以降は色の指定でtheme.cssのprimary-inverse-colorを読み込み*/
}

/*bg1-accent-parts内で使用した場合*/
main .bg1-accent-parts h2.title6-parts {
	background: var(--accent-inverse-color);
	color: var(--accent-color);
}

main .bg1-accent-parts h3.title6-parts {
	border-bottom: 2px solid var(--accent-inverse-color);
	/*下線の幅、線種、var以降は色の指定でtheme.cssのaccent-inverse-colorを読み込み*/
}

/*リセット*/
figure {
	margin: 0;
}

dd {
	margin: 0;
}

nav,
ul,
li,
ol {
	margin: 0;
	padding: 0;
}

nav ul {
	list-style: none;
}

/*table全般*/
table {
	border-collapse: collapse;
}

/*画像全般*/
img {
	border: none;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

video {
	max-width: 100%;
}

iframe {
	width: 100%;
}

input {
	font-size: 1rem;
}


section {
	padding: 0 var(--content-space-l);
	/*上下、左右へのsection内の余白。左右については、theme.cssの--content-space-lを読み込み。*/
	margin: var(--content-space-l) 0;
	/*上下、左右へのsectionの外側にとるマージン。上下については、theme.cssの--content-space-lを読み込み。*/
	margin-bottom: 35px;
}

/*section間のマージンを消したい場合用。1つ目のsectionにだけclass="mb0"を追加*/
section.mb0 {
	margin-bottom: 0;
}

section.mb0+section {
	margin-top: 0;
}


a {
	color: var(--accent-color);
	transition: 0.3s;
	/*hoverまでにかける時間。0.3秒*/
	text-decoration: none;
}

/*マウスオン時*/
a:hover {
	filter: brightness(1.1);
	/*少しだけ明るく*/
	text-decoration: none;
}

.menu a {
	color: var(--primary-inverse-color);
	transition: 0.3s;
	/*hoverまでにかける時間。0.3秒*/
	text-decoration: none;
}

.sns1-parts a {
	color: var(--primary-inverse-color);
	transition: 0.3s;
	/*hoverまでにかける時間。0.3秒*/
	text-decoration: none;
}

#container {
	animation: opa1 0.2s 0.2s both;
	/*0.2(2つ目の数字)秒待機後、0.2(1つ目の数字)秒かけてフェードイン*/
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}


#contents {
	flex: 1;
	min-height: 0;
}


header {
	position: relative;
}

#logo img {
	display: block;
}

#logo {
	width: 200px;
	margin: 1.5rem auto;
}

body.home #logo {
	margin: 0;
	position: absolute;
	z-index: 1;
	top: 48%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25vw;
}


.mainimg-movie1-parts * {
	margin: 0;
	padding: 0;
}

.mainimg-movie1-parts {
	width: 100%;
	position: relative;
}

.mainimg-movie1-parts video {
	display: block;
	width: 100%;
}


/*メニューブロック全体の設定*/
#menubar2 {
	font-family: var(--accent-font), var(--base-font);
	font-weight: 400;
	font-size: 1.1rem;
	position: relative;
	z-index: 2;
}

#menubar2>nav>ul {
	display: flex;
}

/*トップページのメニューブロック全体の設定*/
body.home #menubar2 {
	position: absolute;
	left: 0px;
	bottom: 0px;
	width: 100%;
}

@media screen and (max-width:930px) {

	#menubar2 {
		display: none;
	}

}

/*メニュー１個あたりの設定*/
#menubar2>nav>ul>li {
	flex: 1;
	text-align: center;
	position: relative;
	letter-spacing: 0.05em;
}

#menubar2 li a {
	display: block;
	text-decoration: none;
	background: rgba(230, 51, 18);
	color: #fff;
	padding: 0.5rem;
}

/*マウスオン時*/
#menubar2 li a:hover {
	background: rgba(230, 51, 18, 0.8);
}

/*小文字*/
#menubar2 span {
	display: block;
	font-weight: normal;
	opacity: 0.7;
	/*色を70%だけ出す。*/
	font-size: 0.6em;
	/*文字サイズを親要素の60%*/
}


/*小さな端末で見たメニュー（開閉メニュー）*/
.small-screen #menubar .logo {
	max-width: 300px;
	margin: 0 auto 3rem;
}

/*メニューブロック共通*/
.small-screen #menubar {
	animation: animation1 0.2s both;
	position: fixed;
	overflow: auto;
	z-index: 100;
	right: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	padding: 80px var(--content-space-l) 50px;
	/*上に80px、左右にthtme.cssのcontent-space-lで指定しているサイズ、下に50pxの余白*/
	background: rgba(0, 0, 0, 0.8);
	color: #fff;
	font-weight: 500;
	font-size: 1.1rem;
}

.small-screen #menubar {
	display: none;
}

/*メニュー１個あたり*/
.small-screen #menubar a {
	display: block;
	text-decoration: none;
	background: var(--bg-color);
	color: var(--bg-inverse-color);
	margin-bottom: 1rem;
	padding: 1rem 2rem;
	border-radius: 5px;
}

/*小文字*/
.small-screen #menubar span {
	display: block;
	font-weight: normal;
	opacity: 0.7;
	/*色を70%だけ出す。*/
	font-size: 0.6em;
	/*文字サイズを親要素の60%*/
}


/*３本バー（ハンバーガー）アイコン設定*/
#menubar_hdr {
	display: none;
	/* デフォルトは非表示 */
	animation: opa1 0s 0.2s both;
	cursor: pointer;
	position: fixed;
	z-index: 101;
	right: 0px;
	top: 0px;
	width: 60px;
	height: 60px;
	background: var(--bg-inverse-color);
	border-bottom-left-radius: 1rem;
	background-color: #e63312;
}

/*ハンバーガーアイコンの線*/
#menubar_hdr span {
	display: block;
	transition: 0.3s;
	position: absolute;
	left: 14px;
	width: 35px;
	height: 2px;
	background: var(--bg-color);
}

/*バツ印が出ている時のボタン色*/
#menubar_hdr.ham {
	background: rgba(230, 51, 18);
}

#menubar_hdr.ham span {
	background: var(--bg-color);
}

#menubar_hdr span:nth-of-type(1) {
	top: 19px;
}

#menubar_hdr span:nth-of-type(2) {
	top: 29px;
}

#menubar_hdr span:nth-of-type(3) {
	top: 39px;
}

#menubar_hdr.ham span:nth-of-type(1) {
	transform: translateY(10px) rotate(-45deg);
}

#menubar_hdr.ham span:nth-of-type(2) {
	opacity: 0;
}

#menubar_hdr.ham span:nth-of-type(3) {
	transform: translateY(-10px) rotate(45deg);
}

/*小さな画面での設定*/
.small-screen #menubar_hdr {
	display: flex;
}

/*ボタン共通*/
.btn5-parts a {
	display: block;
	text-decoration: none;
	text-align: center;
	border-radius: 100px;
	position: relative;
	overflow: hidden;
	/*display: inline-block;*/
	padding: 0.5rem 2rem;
	background: var(--accent-color);
	color: var(--bg-color);
	margin-top: 20px;
}

.btn5-parts a span {
	position: relative;
	z-index: 1;
}

.btn5-parts a:hover {
	background: rgba(230, 51, 18, 0.5);
}

main {
	container-type: inline-size;
}

/*main内で使用するul,ol*/
main ul,
main ol {
	margin-right: 2rem;
}

/*PAGE TOP設定*/
.pagetop-show {
	display: block;
}

/*ボタンの設定*/
.pagetop a {
	display: block;
	text-decoration: none;
	text-align: center;
	z-index: 99;
	animation: opa1 1s 0.4s both;
	position: fixed;
	/*スクロールに追従しない(固定で表示)為の設定*/
	right: 20px;
	bottom: 20px;
	color: #fff;
	font-size: 1.5rem;
	background: rgba(0, 0, 0, 0.2);
	width: 60px;
	line-height: 60px;
	border-radius: 50%;
	/*円形に*/
}


.bg1-parts {
	background: var(--bg-inverse-color);
	color: var(--bg-color);
}

.bg1-primary-parts {
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

.bg1-light-parts {
	background: var(--light-color);
	color: var(--light-inverse-color);
}


.bg1-accent-parts {
	background: var(--accent-color);
	color: var(--accent-inverse-color);
}


/*bg-parts（bg1-primary-parts、bg1-light-parts、bg1-accent-partsとセット）*/
.bg-parts {
	padding-top: var(--content-space-l);
	padding-bottom: var(--content-space-l);
}

/*背景色が続く場合隙間を空けない*/
.bg-parts+.bg-parts {
	margin-top: calc(-1 * var(--content-space-l)) !important;
}


/*section内で画面両サイドいっぱいまで広げる場合*/
.bleed-x-parts {
	--bleed-x: var(--content-space-l);
	/*エイリアスに*/
	width: calc(100% + (var(--bleed-x) * 2));
	/*section内容の幅＋両サイドpadding（対象要素の幅）*/
	margin-left: calc(var(--bleed-x) * -1);
	margin-right: calc(var(--bleed-x) * -1);
	max-width: none;
}

/*左右によせる*/
.bleed-left-parts {
	width: calc(100% + var(--content-space-l));
	margin-left: calc(-1 * var(--content-space-l));
}

.bleed-right-parts {
	width: calc(100% + var(--content-space-l));
	margin-right: calc(-1 * var(--content-space-l));
}


/*左右に余白*/
.space-x-parts {
	width: calc(100% - var(--content-space-l) * 2) !important;
	margin-inline: auto !important;
}

/*news*/
dl.news3-parts * {
	margin: 0;
	padding: 0;
}

/*日付*/
dl.news3-parts dt {
	display: flex;
	padding: 1rem 1rem 0 1rem;
}

/*テキストブロック*/
dl.news3-parts dd {
	padding: 0 1rem 1rem 1rem;
}

/*奇数行目を背景色を少し濃く*/
dl.news3-parts dt:nth-of-type(odd),
dl.news3-parts dd:nth-of-type(odd) {
	background: rgba(230, 51, 18, 0.2);
	color: var(--light-inverse-color);
}

@media (min-width: 900px) {

	dl.news3-parts {
		display: grid;
		grid-template-columns: max-content minmax(0, 1fr);
		/*日付幅は最大の文字数幅に自動調整し、右側テキストは残り一杯使用*/
		align-items: start;
	}

	/*日付*/
	dl.news3-parts dt {
		align-self: stretch;
		padding: 0.5rem 1rem;
	}

	/*テキストブロック*/
	dl.news3-parts dd {
		padding: 0.5rem 1rem;
	}

}


/*list-kadomaru1-parts*/
.list-kadomaru1-parts * {
	margin: 0;
	padding: 0;
}

/*ボックス全体*/
.list-kadomaru1-parts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	/*3列*/
	gap: 3rem;
	/*ボックス同士の間に空けるスペース*/
	font-size: 0.9rem;
}

/*ボックス１個あたり*/
.list-kadomaru1-parts .list-parts {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/*画像*/
.list-kadomaru1-parts .list-parts figure {
	border-radius: 20px;
	/*角を丸く*/
	overflow: hidden;
}

/*テキストボックス*/
.list-kadomaru1-parts .list-parts .text-parts {
	flex: 1;
}

.oranka_know {
	line-height: 1.2;
	font-size: 1.2rem;
}

/*h4見出し*/
.list-kadomaru1-parts h4 {
	text-align: center;
	font-size: 1.1rem;
}

/*説明だけ小さめに*/
.list-kadomaru1-parts .list-parts p {
	line-height: 1.5;
}

@media screen and (max-width: 600px) {
	.list-kadomaru1-parts {
		grid-template-columns: 1fr;
		/* 1列に変更 */
		gap: 2rem;
		/* 縦並びの時は少し隙間を詰める*/
	}
}

/*list-yoko4-float-parts*/
.list-yoko4-float-parts * {
	margin: 0;
	padding: 0;
}

/*ボックス全体を囲むブロック*/
.list-yoko4-float-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	/*ボックス同士の間に空けるスペース*/
}

/*画像（左に回り込み用）*/
.list-yoko4-float-parts .list-parts figure {
	width: 40%;
	float: left;
	margin-left: 0;
	margin-right: 2rem;
	margin-bottom: 1rem;
}

/*画像（右に回り込み用）*/
.list-yoko4-float-parts .list-parts.reverse figure {
	float: right;
	margin-right: 0;
	margin-left: 2rem;
}

/*段落（p）*/
.list-yoko4-float-parts .list-parts .text-parts p {
	font-size: 0.95rem;
	line-height: 1.5;
}

.popsample {
	margin-top: 0.5rem;
}

@media screen and (max-width: 930px) {

	/* 画像の回り込みを解除し、幅を100%に*/
	.list-yoko4-float-parts .list-parts figure,
	.list-yoko4-float-parts .list-parts.reverse figure {
		float: none;
		/* 回り込み解除 */
		width: 100%;
		/* 幅をいっぱいに*/
		margin-left: 0;
		margin-right: 0;
		margin-top: 1.5rem;
		margin-bottom: 0.5rem;
	}

	/* 画像自体の幅も100%にフィットさせる */
	.list-yoko4-float-parts .list-parts figure img {
		width: 100%;
		height: auto;
	}

	/* テキスト部分の調整 */
	.list-yoko4-float-parts .list-parts .text-parts {
		clear: both;
		/* 念のための回り込み解除 */
	}
}

/*list-yoko3-border-parts（カラムブロック）*/
.list-yoko3-border-parts * {
	margin: 0;
	padding: 0;
}

/*ボックス全体を囲むブロック*/
.list-yoko3-border-parts {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

/*ボックス１個あたり*/
.list-yoko3-border-parts .list-parts {
	display: flex;
	align-items: center;
	gap: 5rem;
	border: 1px solid var(--border-color);
	padding: 2rem;
}

/*画像の幅*/
.list-yoko3-border-parts .list-parts figure {
	flex: 0 0 300px;
	max-width: 30%;
}

/*テキストを囲むブロック*/
.list-yoko3-border-parts .list-parts .text-parts {
	flex: 1;
}

/*p*/
.list-yoko3-border-parts .list-parts .text-parts p {
	font-size: 0.9rem;
	line-height: 1.5;
}

.list-yoko3-border-parts .list-parts .text-parts p+p {
	margin-top: 0.5rem;
}

@media screen and (max-width: 930px) {
	.list-yoko3-border-parts .list-parts {
		gap: 1.5rem;
		padding: 1rem;
	}

	.list-yoko3-border-parts .list-parts figure {
		flex: 0 0 35%;
		/* スマホ時は少し大きめに */
	}
}

/*フッター*/
#footer1-parts ul {
	list-style: none;
}

#footer1-parts p {
	margin: 0;
}

/*フッターボックス全体*/
#footer1-parts {
	text-decoration: none;
	font-size: 0.8rem;
	padding: var(--content-space-s);
	background: var(--primary-color);
	color: var(--primary-inverse-color);
}

/*フッター直下のdiv*/
#footer1-parts>div {
	display: flex;
	/*横並びに*/
	flex-direction: column;
	gap: 1rem;
}

/*2つ目ブロック*/
#footer1-parts .menu {
	display: flex;
	/*横並びに*/
	gap: 2rem;
	align-items: flex-start;
}


@media (min-width: 900px) {

	/*フッターボックス全体*/
	#footer1-parts {
		display: flex;
		/*横並びに*/
		justify-content: space-between;
		gap: 2rem;
	}

	/*1つ目（左側）ブロック*/
	#footer1-parts>div:nth-of-type(1) {
		flex: 0 0 30%;
	}
}

@media (max-width: 899px) {
	#footer1-parts .menu {
		padding-inline: 1rem;
	}
}



/*SNSアイコン*/
.sns1-parts {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	padding-inline: 1rem;
}

.sns1-parts i {
	font-size: 30px;
	/*アイコンサイズ*/
}


/*その他*/
.color-check,
.color-check a {
	color: #ff0000 !important;
}

.bg1-accent-parts .color-check,
.color-check a {
	color: #fef500 !important;
}

.l {
	text-align: left !important;
}

.c {
	text-align: center !important;
}

.r {
	text-align: right !important;
}

.ws {
	width: 100%;
	display: block;
}

.wl {
	width: 100%;
	display: block;
}

.padding-x-parts {
	padding: 0 var(--content-space-l);
}

.mt0 {
	margin-top: 0px !important;
}

.mt1rem {
	margin-top: 1rem !important;
}

.mt3rem {
	margin-top: 3rem !important;
}

.mb0 {
	margin-bottom: 0px !important;
}

.mb1rem {
	margin-bottom: 1rem !important;
}

.mb3rem {
	margin-bottom: 3rem !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.look {
	display: inline-block;
	padding: 0px 10px;
	background: #eee;
	border: 1px solid #ccc;
	color: #888;
	border-radius: 3px;
	margin: 5px 0;
	word-break: break-all;
}

.small {
	font-size: 0.75em;
}

.large {
	font-size: 2em;
	letter-spacing: 0.1em;
}

.pc {
	display: none;
}

.dn {
	display: none !important;
}

.block {
	display: block !important;
}

.is-clip {
	overflow: hidden;
}

/*大きな画面の場合*/
.large-screen .ws {
	width: 50%;
}

.large-screen .sh {
	display: none;
}

.large-screen .pc {
	display: block;
}