@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Opti&family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Oswald:wght@200..700&display=swap');
/*
font-family: "Oswald", sans-serif;
font-family: "Kaisei Opti", serif;
font-family: "Noto Sans JP", sans-serif;
font-family: "Noto Serif JP", serif;
*/
* {
	margin: 0;
	padding: 0;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    border:0;
    outline:0;
    vertical-align:baseline;
    background:transparent;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

input, select {
    vertical-align:middle;
}

html {
	font-size: 62.5%;
} /* 10px */
body {
	margin: 0px;
	padding: 0px;
	font-size: 2.2rem;
	font-size: clamp(18px, 2.4vw, 2.2rem);
	color:#000;
	font-family: 'Noto Sans JP', sans-serif;
	-ms-font-feature-settings: "normal";
	font-feature-settings: "normal";
	background-color:#fff;
	letter-spacing: 0.05em;
	line-height: 1.7;
}
input {
	font-family: 'Noto Sans JP', sans-serif;
}
h1, h2, h3, h4, h5, h6 {
	font-size: 2.2rem;
	font-size: clamp(22px, 2.4vw, 2.2rem);
	color: #130e0a;
}

a {
	outline:none;
}
a:link,
a:visited {
	color:#00578b;
	text-decoration:none;
	
}
a:hover {
	text-decoration:underline
}
.pc-only {
	display:block;
}
img {
	max-width: 100%;
}
img.pc-only {
	margin:0 auto;
	display:inline-block;
}
.sp-only {
	display:none;
}
/*default page setting*/
#wrapper {
	position:relative;
}
header {
	background-image: url(../img/mv.jpg);
	background-size: cover;
	background-position: center;
	margin-bottom: 3.45em;
}
.h-wrap {
	background-color: rgba(0,87,139,0.7);
	padding: 1.3em 0;
}
h1 {
	color: #fff;
	font-family: "Kaisei Opti", serif;
	font-size: 6.1rem;
	font-size: clamp(26px, 6.68vw, 6.1rem);
	font-weight: 400;
	letter-spacing: 0.05em;
	line-height: 1.22;
	max-width: 780px;
	margin: 0 auto;
	text-shadow: 0px 0px 38px rgba(23, 100, 139, 1);
}
h1 span {
	background-color: #bb0000;
	font-size: 2.7rem;
	font-size: clamp(13px, 2.9vw, 2.7rem);
	font-family: "Noto Sans JP", sans-serif;
	border-radius: 0.88em;
	padding: 0.4em 0.68em;
	line-height: 1;
	display: inline-block;
	vertical-align: 0.3em;
	margin-left: 0.6em;
	text-shadow: none;
}
.mainvis {
	padding: 26em 0 2.27em;
}
.mainvis p {
	text-align: center;
	font-size: 4rem;
	font-size: clamp(20px, 4.38vw, 4rem);
	font-weight: 700;
	color: #fff;
}
.mainvis p b {
	font-family: "Oswald", sans-serif;
	font-size: 8.2rem;
	font-size: clamp(34px, 8.99vw, 8.2rem);
	font-weight: 500;
	letter-spacing: 0.07em;
	margin:0 0.15em;
}
.mainvis p span {
	margin-left: 0.5em;
}
.c-block {
	max-width: 1010px;
	margin: 0 auto 6.8em;
}
h2 {
	font-family: "Kaisei Opti", serif;
	font-size: 4rem;
	font-size: clamp(32px, 4.38vw, 4rem);
	line-height: 1;
	position: relative;
	text-align: center;
	padding-bottom: 0.65em;
	margin-bottom: 1.75em;
	letter-spacing: 0.05em;
	font-weight: 500;
}
h2::after {
	content: "";
	display: block;
	position: absolute;
	left: 50%;
	bottom: 0;
	margin-left: -0.4em;
	width: 0.75em;
	height: 4px;
	background-color: #00578b;
}
/*outline*/
#outline dl {
	display: flex;
	flex-wrap: wrap;
	padding: 0 1em;
	line-height: 1.7;
}
#outline dt {
	width: 14%;
}
#outline dd {
	width: 86%;
	position: relative;
	box-sizing: border-box;
	padding-left: 1em;
}
#outline dd::before {
	content: ":";
	position: absolute;
	left: 0;
	top: 0;
}
#outline dd figure {
	position: absolute;
	right: 0;
	top: 0.5em;
	width: 47.83%;
	max-width: 397px;
}
#outline dd figure img {
	width: 100%;
}
/*greeting*/
#greeting .inner {
	display: flex;
	justify-content: space-between;
}
#greeting .inner figure {
	width: 27.72%;
	max-width: 243px;	
	padding: 0.5em 1.5em 1.5em 0;
}
#greeting .txt {
	width: 72.28%;
}
#greeting .txt p {
	line-height: 1.7;
}
#greeting .txt p + p {
	margin-top: 1em;
}
#greeting .txt p.sign {
	text-align: right;
}
#greeting .txt p.sign span {
	font-family: "Noto Serif JP", serif;
	font-size: 3.6rem;
	font-size: clamp(30px, 3.94vw, 3.6rem);
	margin-left: 0.7em;
	font-weight: 600;
}
/*entryfee*/
#entryfee.c-block,
#refmov.c-block {
	max-width: 850px;
}
.fee {
	border: solid 1px #666666;
	text-align: center;
	margin: 0 auto 3.18em;
	box-sizing: border-box;
	padding: 1.8em 0;
}
.fee p {
	font-size: 3.6rem;
	font-size: clamp(34px, 3.94vw, 3.6rem);
	font-family: "Noto Serif JP", serif;
	font-weight: 600;
	line-height: 1.5;
}
.fee p b {
	margin: 0 0.5em;
}
.fee p.note {
	font-size: 2.2rem;
	font-size: clamp(18px, 2.4vw, 2.2rem);
	line-height: 1.5;
	margin-top: 1em;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}
#entryfee h3 {
	margin-bottom: 2em;
}
#entryfee > p {
	line-height: 1.7;
}
#entryfee > p + p {
	margin-top: 1.5em;
}
#entryfee > p.note {
	font-size: 1.6rem;
	font-size: clamp(15px, 1.75vw, 1.6rem);
	margin-top: 2.5em;
	line-height: 1.5;
}
/*refmov*/

.movouter {
	width: 84.15%;
	margin: 3.18em auto 0;
}
.movwrap {
	width: 100%;
	height: 0;
	padding-top: 56.25%;
	position: relative;
	margin-bottom: 0.8em;
}
.movwrap iframe {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
/*faq*/
#faq dl {
	max-width: 960px;
	margin: 0 auto;
}
#faq dt {
	border: solid 1px #666666;
	line-height: 1.5;
	padding: 1em 1.3em 1em 4.5em;
	background-image: url(../img/qicon.png);
	background-size: 2.18em auto;
	background-repeat: no-repeat;
	background-position: left 1em center;
}
#faq dd {
	padding: 1.36em 1.45em 3.63em;
}

/*inq*/
#inq h2 + p {
	text-align: center;
	margin-bottom: 4em;
}
#inq dl {
	max-width: 95%;
	margin: 0 auto 3.5em;
	display: flex;
	flex-wrap: wrap;
	line-height: 2;
}
#inq dt {
	width: 40%;
	box-sizing:border-box;
	padding:0.5em 0 0.5em 2em;
	position: relative;
}
#inq dt .require {
	font-size: 1.4rem;
	font-size: clamp(12px, 1.53vw, 1.4rem);
	color: #fff;
	background-color: #bb0000;
	border-radius: 0.78em;
	padding: 0 0.5em;
	line-height: 1.5;
	position: absolute;
	left: -0.5em;
	top: 1.8em;
}
#inq dd {
	width: 60%;
	padding: 0.5em 0;
}
#inq dd input,
#inq dd textarea {
	line-height: 2;
	font-size: 2.2rem;
	font-size: clamp(18px, 2.4vw, 2.2rem);
	border: solid 1px #666;
}
#inq dl + p {
	text-align: center;
}
#inq input[type=email],
#inq input#instrument {
	width: 18em;
}
#inq input#time {
	width: 8em;
}
#inq #msg {
	width: 18em;
	min-height: 6em;
}

.radioItem {
  display: inline-flex;
  align-items: center;
  column-gap: 0.6em;
  line-height: 1;
  letter-spacing: 0.05em;
  cursor: pointer;
}
.radioItem:not(:last-of-type) {
  margin-right: 2.18em;
}
.radioButton {
  appearance: none;
  position: relative;
  width: 1.27em;
  height: 1.27em;
  border: 1px solid #666666;
  border-radius: 50%;
  cursor: pointer;
}
.radioButton:checked::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 0.81em;
  height: 0.81em;
  margin: auto;
  border-radius: 50%;
  background-color: #00578b;
}
.formbtn {
	border: none;
	background-color: #00578b;
	color: #fff;
	font-size: 3rem;
	font-size: clamp(22px, 3.28vw, 3rem);
	text-align: center;
	line-height: 1;
	padding: 1em;
	min-width: 10em;
	box-shadow: 5px 5px 0px #7fabc5;
	cursor: pointer;
}
#inq input[type=button] {
	margin-right: 2em;
}
p.error {
	color: #bb0000;
}
/*footer*/
footer {
	background-color: #130e0a;
	color: #fff;
	text-align: center;
	line-height: 2;
	font-size: 1.8rem;
	padding: 1.6em 0;
}
footer a:link,
footer a:visited {
	color: #fff;
	text-decoration: underline;
}
@media (hover: hover) {
	.formbtn:hover {
		opacity: 0.7;
	}
	footer a:hover {
		text-decoration: none;
	}
}
@media screen and (max-width:1100px)  {
	.c-block {
		width: 90%;
	}
	#outline dl {
		padding: 0;
	}
	#outline dd figure {
		box-sizing: border-box;
		padding-left: 1.5em;
	}
}

@media screen and (max-width: 910px) {
	h1 {
		width: auto;
		display: table;
		margin: 0 auto;
	}
}

@media screen and (max-width: 767px) {
	.pc-only {
		display: none;
	}
	.sp-only {
		display: block;
	}
	h1 {
		text-shadow: 0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1),0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1),0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1),0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1), 0px 0px 10px rgba(23, 100, 139, 1);
	}
	h1 span {
		border-radius: 0.6em;
		padding: 0.35em 0.68em;
	}
	header {
		background-color: #907561;
		background-repeat: no-repeat;
		background-size: 162%;
		background-position: 50% bottom;
	}
	.mainvis {
		padding: 63% 0 3%;
	}
	.mainvis p {
		line-height: 1.2;
	}
	.mainvis p span {
		margin-left: 0;
	}
	h2 {
		margin-bottom: 1em;
	}
	.c-block {
		margin-bottom: 4.5em;
	}
	#outline dd figure {
		position: inherit;
		left: inherit;
		top: inherit;
		padding-left: 0;
		width: 100%;
		margin-top: 1em;
	}	
	#outline dt {
		width: 25%;
	}
	#outline dd {
		width: 75%;
	}
	.movouter {
		width: 100%;
		margin: 2em auto 0;
	}
	#inq h2 + p {
		margin-bottom: 2em;
	}
	#inq dl {
		display: block;
		width: 95%;
		margin-bottom: 2.5em;
	}
	#inq dt {
		padding-left: 0;
	}
	#inq dt,
	#inq dd {
		width: 100%;
	}
	#inq input[type=email],
	#inq input#instrument,
	#inq #msg {
		width: 100%;
	}
	#inq dt .require {
		position: inherit;
		left: 0;
		top: 0;
		vertical-align: 0.2em;
		margin-right: 0.5em;
	}
	.formbtn {
		min-width: 6em;
	}

}
@media screen and (max-width: 430px) {
	#greeting .inner {
		display: block;
	}
	#greeting .inner figure {
		width: 50%;
		margin: 0 auto;
	}
	#greeting .txt {
		width: 100%;
	}
}

@media print {
	body {
		width: 210mm;
		height: 296mm;
	}
}