/*
@import url('https://fonts.googleapis.com/css2?family=Italianno&display=swap&text="ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz@"');
*/
@font-face {
	font-family: "Italianno";
	font-display: swap;
	src:
	url("font/Italianno-Regular.woff2")format("woff2"),
	url("font/Italianno-Regular.woff")format("woff"),
	url("font/Italianno-Regular.eot")format("eot"),
	url("font/Italianno-Regular.ttf")format("truetype")
	;
}

*, *::before, *::after {
	box-sizing: border-box;
}
html{
	overscroll-behavior: none;
}
:where(a), button, summary{
	cursor: pointer;
}
a{
	text-decoration: none;
	color: #038;
}

main h1 small, .italic{
	font-family: 'Italianno', cursive;
	font-weight: 400;
	letter-spacing: 0.05rem;
	font-size:smaller
}
	
body{
	font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, sans-serif;
	font-feature-settings: "palt";
	color:#555;
	background:#ddd;
	margin:0;
	padding-block:10rem;/*jsが動作しない時用*/
	box-sizing: border-box;
}

#band.split, #main, body>img, body>figure, main{
	margin-inline:auto;
	@media (min-width: 761px){
		width: 760px;
	}
}
#band, body>img, body>figure, main{
	margin-block:0;
}
body>img, body>figure, main{
	@media (max-width: 760px){
		width:96%;
	}
}


small, .small, .note{
	font-size:smaller;
}
@media (min-width: 761px){
	.mobile{
		display:none;
	}
}
@media (max-width: 760px){
	.pc{
		display:none;
	}
}

img, svg, a{
	body>&, main>&{
		display:block;
	}
}
img{
	&.wide{
		aspect-ratio: 16 / 9;
		object-fit: cover;
	}
	&.cinema{
		aspect-ratio: 235 / 100;
		object-fit: cover;
	}
}
img, iframe, figure, video{
	figure>&, a>&, .double>&{
		width:100%;
		margin:0;
		vertical-align:bottom;
	}
}
figure.caption{
	position:relative;

	& figcaption{
		position: absolute;
		right: 0.5rem;
		bottom: 0.5rem;
		font-size:0.8rem;
		color:white;
		background-color: rgba(0, 0, 0, 0.3);

		& a{
			color:#ccc;
		}
	}
}

.split{
	display:flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
.double{
	width:100%;

	&>img, &>figure, &>a{
		@media (min-width: 761px){
			display:inline-block;
			width:48%;
			&:nth-child(2){
				margin-inline-start:2%;
			}
			vertical-align:bottom;
		}
		@media (max-width: 760px){
			display:block;
			width:85%;
			margin-inline:auto;
		}
	}
}

header, footer{
	@media (max-width: 760px){
		padding-inline:2%;
	}

	&>#band{
		font-size:0.9rem;
		line-height:1.8rem;

		& .italic{
			font-size:1rem;
		}
		&:not(.light), &:not(.light) a{
			color:#eee;
		}
	}
}
header{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	transition: opacity 1s;
	background: white;
	text-align:center;

	&>#main{
		display:flex;
		flex-wrap: wrap;
		align-items: center;

		&>svg, &>img{
			width:3rem;
		}
		&>h1{
			font-weight: normal;
			color:#333;
			margin-block:0;
			line-height:2rem;
			text-align: left;
			
			&>small{
				display:block;
				font-size:50%;
				line-height:1rem;
			}
		}
	}
	&>nav{
		padding-inline:0;
	}
	& ul{
		margin-block:0;
		padding-inline-start:0;
	}
}

footer{
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 10;
	transition: opacity 1s;
	background: white;
	text-align:center;

	& #band{
		@media (max-width: 760px){
			display:none;
		}
	}

	& address{
		font-style:normal;

		& h1{
			color:#333;
			font-size:1rem;
			@media (min-width: 761px){
				padding-block:0.5rem 0;
			}
			@media (max-width: 760px){
				padding-block:0.5rem 0.4rem;
			}
		}
		& p{
			font-size:0.9rem;
			media (min-width: 761px){
				padding-block:1.5rem 0.5rem;
			}
			@media (max-width: 760px){
				padding-block:0.2rem;
			}
		}
	}
	&>.split{
		align-items: start;
		font-size:0.9rem;
		&>address{
			text-align:left;
		}
		&>p{
			text-align:right;
		}
	}
}

#slide{
	position:relative;
	aspect-ratio: 16 / 9;
	&>img{
		position: absolute;
		top: 0;
		left: 0;
		opacity: 0;
		transition: 2s;
		aspect-ratio: 16 / 9;
		width:100%; /* for safari */
		object-fit: cover;
	}
	&>figcaption{
		opacity: 0;
		transition: 2s;
	}
	&>img.show, &>figcaption.show{
		opacity: 1;
	}
}


main{
	line-height:1.5rem;
	text-align:center;
	background: white;
	box-sizing: border-box;

	@media (min-width: 761px){
		padding:4rem 5rem;
	}
	@media (max-width: 760px){
		padding:4rem 2%;
	}

	&>*{
		margin-inline:auto;
	}
	&>p, &>dl, &>ul, &>ol, &>table, &>a{
		width:fit-content;
	}
	&>dl, &>ul, &>ol, &>table, &>a, &>img, &>figure, &>svg, &>form, &>.double{
		margin-block:1rem;

	}
	@media (max-width: 760px){
		.double{
			margin-block:0;
			>a, >figure{
				margin-block:1rem;
			}
		}
	}
	&>p{
		margin-block:0.5rem;
	}
	&>img, &>svg, &>a{
		display:block;
	}
	&>img, &>figure, &>svg, &>form, &>a{
		&.width70{width:70%;}
		&.width60{width:60%;}
		&.width40{width:40%;}
		&.width30{width:30%;}
		&.width20{width:20%;}
		@media (min-width: 761px){
			width:85%;
			&.width70pc{width:70%;}
			&.width60pc{width:60%;}
			&.width40pc{width:40%;}
			&.width30pc{width:30%;}
			&.width20pc{width:20%;}
		}
		@media (max-width: 760px){
			width:100%;
		}
	}

	& p, & dl, & dd{
		text-align:justify;
	}
	& .left, & li, & td, & dt, table.th-left th, table.td-left td, tr.th-left th, tr.td-left td{
		text-align:left;
	}
	.center, table.th-center th, table.td-center td, tr.th-center th, tr.td-center td{
		text-align:center;
	}
	.right, table.th-right th, table.td-right td, tr.th-right th, tr.td-right td{
		text-align:right;
	}
	>.right{
		margin-inline-end:0;
	}
	.top, table.th-top th, table.td-top td, tr.th-top th, tr.td-top td{
		vertical-align: top;
	}

	& ul, & ol{
		padding-inline-start:1rem;
	}
	&>ul.li-margin li, &>dl.dd-margin dd{
		margin-block-end:0.5rem;
	}
	& figcaption, & caption{
		padding-block:0.5rem;
	}

	& h1{
		font-size:1.2rem;
		color:#333;

		& small{
			display:block;
			margin-block-start:0.2rem;
			font-weight: normal;
		}
		&:not(:first-child){
			padding-block-start:4rem;
		}
	}
}

h2{
	font-size: 1.2rem;
	padding-block-start:2rem;
	color:#333;
}
h3{
	font-size:1.1rem;
	padding-block-start:2rem;
	color:#333;
}
h2, h3{
	&+p, &+ul, &+ol{
		margin-block-start:0;
	}
}

p.note{
	padding-inline-start:1.5rem;
	text-indent:-1.5rem;

	&::before{
		content:'※ ';
	}
}
p.warn{
	padding-inline-start:0.5rem;
	text-indent:-0.5rem;

	&::before{
		display: inline-block;
		content:url('data:image/svg+xml;utf-8,<svg fill="darkred" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500"><path d="M509.08,448.217L274.676,42.218c-8.299-14.376-29.051-14.376-37.352,0L2.922,448.217c-8.301,14.376,2.074,32.347,18.674,32.347h468.806C507.003,480.564,517.378,462.594,509.08,448.217z M277.035,423.636c0,2.68-9.418,4.853-21.033,4.853c-11.619,0-21.037-2.173-21.037-4.853V389.98c0-2.68,9.418-4.853,21.037-4.853 c11.615,0,21.033,2.174,21.033,4.853V423.636zM273.529,345.11c0.008,0.1,0.066,0.195,0.066,0.3c0,4.344-7.879,7.866-17.594,7.866c-9.721,0-17.596-3.522-17.596-7.866c0-0.102,0.056-0.198,0.066-0.3l-10.936-140.5c0-4.344,12.744-7.866,28.465-7.866 s28.463,3.522,28.463,7.866L273.529,345.11z"/></svg>');
		width: 1rem;
		vertical-align: middle;
	}
}
ul.note li{
	list-style-type:'※ ';
}

dd{
	margin-inline-start:0;
	&+dt{
		margin-block-start:0.5rem;
	}
}

table{
	&.border {
		border:1px solid #ccc;
	}
	tr{
		width:100%;
	}
}
th, td{
	@media (min-width: 761px){
		padding:0.5rem 1rem;
	}
	@media (max-width: 760px){
		padding:0.25rem 0.5rem;
	}
	.oneline &{
		line-height:1rem;
		padding-block:0.5rem;
	}
}
th{
	white-space:nowrap;
	
	table.th-normal &{
		font-weight:normal;
	}
}

.twotone{
	border-collapse: collapse;

	& th{
		color:#eee;
		background:#333;
		border: solid 1px white;
	}
	& td{
		border: solid 1px #ddd;
	}
}

button{
	header &{
		border:0;
		background:transparent;
	}
	form &, main>&, main>p>&{
		color:#eee;
		border:0;
		font-size:1rem;
		margin-block:0.5rem;
		padding:0.5rem 1rem ;
		border-radius: 100vh;
	}
}

details {
	margin-block-end:0.7rem;

	&[open] {
		margin-block-end:2rem;
		& summary {
			color:#811;
		}
	}
	& b{
		font-weight:normal;
	}
}

summary{
	color:#333;

	& small{
		color:#555;
	}
}

.phone {
	display:block;
	text-align:center;
	font-size: 1.5rem;
	line-height: 2rem;

	&:before{
		content: "\0260e\0a0";/*phpのため2つ*/
		color:orange;
	}
}


#main{
	@media (min-width: 761px){
		margin-block:2rem;
		justify-content: space-between;

		& nav{
			margin-inline:auto 0;/*navだけ右寄せ*/
		}
	}
	@media (max-width: 760px){
		margin-block:1rem 2rem;
		justify-content: center;
	}
}

@media (min-width: 761px){
header{
	& li{
		display:inline-block;

		& a{
			display:block;
			line-height:1.5rem;
			padding-block-start:0.5rem;
			margin-block-end:0.5rem;
			color: #333;

			&:hover, .indicate &{
				border-block-end: solid 1px chocolate;
			}
		}
		&:not(:first-child){
			margin-inline-start:0.5rem;
		}
	}
}
}

@media (max-width: 760px){
header{
	& nav{
		position: fixed;
		left: 0;
		right: 0;
		transition: opacity 1s;
	}
	& ul{
		margin-inline:5%;
		display: flex;
		justify-content: space-between;
		align-items: end;
	}
	& li{
		width:14%;
		list-style:none;
		text-align:center;

		& button{
			color:#333;
			padding-inline:0;
		}
		& svg{
			width:1.5rem;
			height:1.5rem;
			fill: currentColor;
			color:#333;
		}
		&.indicate svg{
			color:maroon;
		}
		& p{
			font-size:0.6rem;
			text-align:center;
			margin-block:0.1rem;
		}
	}
}
footer{
	padding-block-start:4.5rem;/*navの配置スペース*/
}
}body{
	background:tan;
	/*background:url(//om-lab.org/snow.png)*/
}
h2, b, dt{
	color:firebrick;
}
button, input[type=submit], input[type=button], table.twotone th/*, .hidden-checkbox+label,.hidden-checkbox+label+div>label*/{
	background:rgb(73,104,142);
}

header{
	background:linear-gradient(rgb(73,104,142) 0%,rgb(73,104,142) 1.8rem,white 1.8rem,white 100%);
	border-block-end:1px solid tan;

	&>#main{
		&>svg{
			width:2.6rem;
			height:2.6rem;
			margin-block-end:0.2rem;
			margin-inline-end:0.2rem;
		}
		&>h1{
			font-size: 1.6rem;
			letter-spacing: 0.02rem;
		}
	}
}

footer{
	border-block-start:1px solid tan;

	@media (min-width: 761px){
		background:linear-gradient(to top,rgb(73,104,142) 0%,rgb(73,104,142) 1.8rem,white 1.8rem,white 100%);
	}
	@media (max-width: 760px){
		background:white;
		border-block-end:2px solid rgb(73,104,142);
	}
}

pre,code{
	text-align:left;
	white-space: pre-wrap;
	word-wrap: break-word;
}
pre>code{
	width:100%;
}
canvas, #canvas{
	width:100%;
	max-width:450px;
}

/*
.hidden-checkbox+label+div>label{
	display:block;
	color:#eee;
	padding:0.5rem 0;
}
.hidden-checkbox{
    display: none;
}
.hidden-checkbox + label{
    color: #fff;
    display: block;
    padding: 0.5rem 0;
}
.hidden-checkbox + label + pre, .hidden-checkbox + label + div{
    height: 0;
    opacity: 0;
    transition: .5s;
    visibility: hidden;
	overflow:hidden;
}
.hidden-checkbox:checked + label + pre,.hidden-checkbox:checked + label + div{
    height: auto;
    opacity: 1;
     visibility: visible;
}
*/