@charset "UTF-8";
/* CSS Document */

body{
	font-family:"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
	
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size:20px;
	line-height:180%;
	color:#333;
	margin:0;
	padding:0;
	background-color:#fff;
	font-feature-settings: "halt";
	background: url("../img/bg.jpg") fixed 0 0 / cover;
}

a{
	color:#06F;
}
a:visited{
	color:#06C;
}
a:hover{
	color:#3399FF;
}

img{
	vertical-align: bottom;
	border:none;
	max-width: 100%;
	height: auto;
}
figure{
	padding: 0;
	margin: 0;
}
table{
	width:100%;
}
table th,
table td{
	padding:6px;
}

form input,
form textarea{
	padding:10px; 
	font-size:1.3em; 
	color:#aaa;
	border:solid 1px #ccc;
	border-radius: 3px;
}
form input[type="radio"]{
	width:20px;
}
form .form-error,
form .form-error p{
	text-align:center;
}
form .form-error ul{
	padding:0;
	color:#f00;
}
form .form-error ul li{
	display:inline;
}
form .form-error ul li:after{
	content:" / ";
}

.imgtxt{
	text-indent:-9999px;
	overflow:hidden;
}
.img-responsive{
	display: block;
    max-width: 100%;
    height: auto;
}
.clear{
	clear:both;
}
.red{
	color:#f00;
}
.white{
	color:#fff;
}
.no-margin{
	margin:0;
}
.center{
	text-align:center;
}
.right{
	text-align:right;
}
.mawarikomi-l{
	float:left;
	margin:0 12px 12px 0;
}
.mawarikomi-r{
	float:right;
	margin:0 0 12px 12px;
}

.pc{
	display:inherit;
}
.smp{
	display:none;
}
.pc-center{/* PC時のみセンタリング */
	text-align:center;
}
.smp-center{
	text-align:left;
}

.flex{
	overflow:auto;
	margin-bottom:2em;
	display:flex;
	flex-wrap:wrap;
}
.flex .col-2,
.flex .col-3,
.flex .col-4,
.flex .col-5,
.flex .col-6,
.flex .col-7,
.flex .col-8,
.flex .col-9,
.flex .col-10{
	box-sizing:border-box;
	padding:0 0.5em; 
}
.flex .col-12{
	box-sizing:border-box;
	padding:0 0.5em; 
	margin-bottom:2em;
}

.flex .col-2{/*5分割*/
	width:16.6%;
}
.flex .col-3{/*4分割*/
	width:25%;
}
.flex .col-4{/*3分割*/
	width:33%;
}
.flex .col-5{
	width:41%;
}
.flex .col-6{/*2分割*/
	width:49.9%;
}
.flex .col-7{
	width:59%;
}
.flex .col-8{
	width:67%;
}
.flex .col-9{
	width:75%;
}
.flex .col-10{
	width:83%;
}
.flex .col-12{
	margin-bottom:0;
	width:100%;
}

/*img*/

.img-responsive{
	height:auto;
	max-width:100%;
}
.img-full{
	width:100%;
	height:auto;
}

/* 全体レイアウト */

main{
	display:flex;
	justify-content: center;
	margin: 0 auto;
}
#content{
	max-width: 600px;
	min-width: 280px;
	background-color: #fff;
	padding: 1em 1em 0 1em;
	box-sizing: border-box;
}
#header1,
#header2{
	width: 30%;
	display: flex;
	align-items: center;
	flex-direction: column;
}
#header1 .wrapper,
#header2 .wrapper{
	position: fixed;
	padding: 4em 2em;
}
#header1 .wrapper img{
	max-height: 60vh;
	width: auto;
	min-width: 5vw;
}
@media screen and (max-width: 800px){
#header1 .wrapper img{
	max-height: 40vh;
}
}
#header2{
	position: relative;
	height: 100vh;
}
#header2 .wrapper{
	display: flex;
	align-items: center;
	flex-direction: column;
	gap:0;
}
#header2 .wrapper h2{
	margin-bottom: 2em;
}
#header2::before{
	content: url("../img/fig02.png");
	display: inline;
	position: fixed;
	bottom:-1em;
	right: 0;
}
#header2.hideimg::before{
	content: none;
}
.contents{
    max-width: 1400px;
    min-width: 900px;
    margin: 0 auto;
}
.contents{
    max-width: 1400px;
    min-width: 900px;
    margin: 0 auto;
}
.contents-narrow{
    max-width: 1000px;
    min-width: 900px;
    margin: 0 auto;
}
header{
	
}
.block{
	margin-bottom: 4em;
}
h2.min{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 1.8em;
}
h2.box{
	margin-bottom: 1.2em;
}
h2.box span{
	border: 1px solid #000;
	padding: .25em .5em;
}
h2.maintitle img{
	max-width: 75%;
}
h2.maintitle + h2{
	text-align: center;
}
#teacher{
	position: relative;
	padding: 2em 1em;
	background-color: #EFF4E8;
	margin: 0 -1em
}
#teacher::before{
	content: url("../img/fig01.png");
	position: absolute;
	right: -5vw;
	top:-80px;
}
#content #teacher .prof p.furigana{
	font-size: 0.85em;
	letter-spacing: 0.4em;
	margin: 0;
}
#content #teacher .prof p.name{
	font-size: 2.4em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin: 0;
}
#content #teacher .prof p.name span{
	font-size: 1.6rem;
}
#content #teacher .prof p.job{
	margin-top: .5em;
}
#place{
	position: relative;
	padding-top:4em;
}
#place::before{
	content: url("../img/fig03.png");
	position: absolute;
	left: -5vw;
	top:-100px;
}
#content #place .location .place{
	font-size: 2.2em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	margin: 0;
}
#content #booking .dateinfo{
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
	font-size: 2em;
	line-height: 180%;
	text-align: center;
	margin:0;
}
#booking{
	position: relative;
	padding-top: 4em;
	padding: 2em 1em;
	background-color: #EFF4E8;
	margin: 0 -1em
}
#booking::before{
	content: url("../img/fig04.png");
	position: absolute;
	right: -8vw;
	top:-100px;
}
#content #booking .dateinfo span{
	font-size: 1.1rem;
}

footer{
	background-color: #0090d2;
	padding: 1em;
	margin: 0 -1em;
	color: #fff;
}
footer h3{
	font-size: 1em;
	font-weight: normal;
}
footer h3 span{
	border: 1px solid #fff;
	padding: .25em .5em;
}
footer ul{
	list-style-type: none;
	padding: 0;
	display: flex;
	gap:1em;
}

.fadetxt span{
    opacity: 0;
    display: inline-block;
        transform: translateY(2em);
    animation-name: fadeInb2ttxt;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 500ms;
    animation-direction: normal;
}
.fadetxt span:nth-child(1){
    animation-delay: 50ms;
}
.fadetxt span:nth-child(2){
    animation-delay: 150ms;
}
.fadetxt span:nth-child(3){
    animation-delay: 250ms;
}
.fadetxt span:nth-child(4){
    animation-delay: 350ms;
}
.fadetxt span:nth-child(5){
    animation-delay: 450ms;
}
.fadetxt span:nth-child(6){
    animation-delay: 550ms;
}
.fadetxt span:nth-child(7){
    animation-delay: 650ms;
}
.fadetxt span:nth-child(8){
    animation-delay: 750ms;
}
.fadetxt span:nth-child(9){
    animation-delay: 850ms;
}
.fadetxt span:nth-child(10){
    animation-delay: 950ms;
}
.fadetxt span:nth-child(11){
    animation-delay: 1050ms;
}
.fadetxt span:nth-child(12){
    animation-delay: 1150ms;
}
.fadetxt span:nth-child(13){
    animation-delay: 1250ms;
}
.fadetxt span:nth-child(14){
    animation-delay: 1350ms;
}
.fadetxt span:nth-child(15){
    animation-delay: 1450ms;
}
.fadetxt span:nth-child(16){
    animation-delay: 1550ms;
}


/*  ドロワーメニュー */

.btn {
    background:transparent url(../img/smpbtn.gif) no-repeat 0 0;
	text-indent:-9999px;
    display: block;
    width:35px;
    height: 35px;
    position: absolute;
    top:20px;
    right:20px;
    cursor: pointer;
    z-index: 200;
}
.close {
    background-position: -35px 0;
}

/* 参加申込モーダル */
body.modal-open {
	overflow: hidden;
}
.application-modal[hidden] {
	display: none;
}
.application-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1em;
	box-sizing: border-box;
}
.application-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .65);
}
.application-modal__content {
	position: relative;
	max-width: 680px;
	max-height: 90vh;
	overflow-y: auto;
	box-sizing: border-box;
	padding: 1.5em 2em;
	background: #fff;
	border-top: 8px solid #0090d2;
	box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
	font-size: .85em;
	line-height: 1.8;
}
.application-modal__content h2 {
	margin: 0 1.5em .8em 0;
	color: #0090d2;
	font-size: 1.6em;
	line-height: 1.4;
}
.application-modal__section + .application-modal__section {
	margin-top: 1.5em;
	padding-top: 1.2em;
	border-top: 1px solid #ccc;
}
.application-modal__section.border {
	border-top: 1px dashed #ccc;
}
.application-modal__section h3 {
	margin: 0 0 .5em;
	font-size: 1.15em;
	line-height: 1.5;
}
.application-modal__section p {
	margin: .6em 0;
}
.application-modal__close {
	position: absolute;
	top: .35em;
	right: .55em;
	width: 1.5em;
	height: 1.5em;
	padding: 0;
	border: 0;
	background: transparent;
	color: #333;
	cursor: pointer;
	font-size: 2em;
	line-height: 1;
}
.application-modal__close:hover,
.application-modal__close:focus {
	color: #0090d2;
}

@media screen and (max-width: 600px) {
	.application-modal {
		padding: .6em;
	}
	.application-modal__content {
		max-height: 94vh;
		padding: 1.2em 1em;
		font-size: .8em;
	}
}