/* CSS Document */

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td {
    margin: 0;
    padding: 0;
}

body{
		background-color: #fef8f3;
	padding: 0;
	margin: 0;
	
		font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;
}




.p-wrapper{
	    position: relative;
    display: flex;
    align-items: flex-start;
}

.pc-header{
	position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    place-content: center;
    flex: 1;
    height: 100vh;
}

a{
	color: #ec6506;
	text-decoration: underline;
}

.footer{
	position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    flex: 1;
    height: 100vh;
    margin-top: 0;
}




.index_w
{
  animation: fadeinhead 2s ease-out forwards;
	
}

@keyframes fadeinhead {
  0% {
     opacity: 0
  }
  100% {
     opacity: 1
  }
}


.yokologo{
	width: 70%;
	margin: 0 auto;
	padding: 0px 0 30px 0;
}

.cont_wrap2 {
    margin: 0 auto;
    padding: 12% 8% 8% 8%;
    margin-top: 0px;
	background-color: #fdf4ed;
	position: relative;
}

.cont_wrap3{
	margin: 0 auto;
    padding: 12% 8% 8% 8%;
    margin-top: 0px;
	background-color: #ffffff;
	position: relative;
}

.cont_wrap3 h3{
	font-size: 28px;
	margin: 0px auto;
}

.text20 p{
	font-size: 20px;
	text-align: left;
	margin-bottom: 35px;
}

p.text_l{
	text-align: left;
	font-size: 20px;
	line-height: 1.7;
}


.toolarea{
	margin: 30px auto;
	text-align: center;
	width: 85%;
}

.midashi001{
	color: #ec6506;
	font-size:24px;
}

.toolarea img{
}

.leftimg{
	width: 70%;
	margin: 30px auto 0px;
}

#fukii01{
	max-width: 600px;
    height: auto;
    margin: 0 auto;
    background-color: #009fe8;
	padding: 30px 0px 10px 0px;
	text-align: center;
	padding-bottom: 10px;
	background-color: #ffffff;
	box-shadow: 0 5px 60px #9e9c8999;
	position: relative;

}

.leftside{
	width: 70%;
	margin: 0 auto;
}

.index_w{
	max-width: 600px;
    height: auto;
    margin: 0 auto;
	z-index: 2;
	position: relative;
	
	/*background: url( "i/logo.png" ) no-repeat center top ;
	background-size: 80%;*/
	padding: 350px 0 20px 0;
}

.index_w div p{
	text-align: center;
	font-size:20px;
	line-height: 1.8;
}

.index_w div h1{
	text-align: center;
	font-size:28px;
	font-weight: bold;
	margin-top: 10px;
}

.index_w img{
	width: 100%;
	max-width: 100%;
    height: auto;
	vertical-align:top;
}

.index_e{
	max-width: 100%;
    height: auto;
	background-color: #ffff00;
	text-align: center;
	padding: 30px 0;
}

.index_e img{
	width: 90%;
    height: auto;
	vertical-align:top;
}



h3{
	text-align: center;
	color: #ec6506;
    font-size: 36px;
    line-height: 1.6;
	margin: 50px 0 30px 0;
	line-height: 1.4;
}

.kisotext{
	width: 92%;
	height: 500px;
	border: 2px solid #ccc;
	text-align: left;
	padding: 0 4% 4% 4%;
	font-size: 20px;
}

.kisotext h3{
	color: #ec6506;
    font-size: 30px;
}

.kisotext h4{
	text-align: left;
	color: #ec6506;
    font-size: 24px;
	margin-top: 20px;
}


.kisotext h5{
	text-align: left;
	color: #000;
    font-size: 22px;
	margin-top: 35px;
	background-color: #fdf4ed;
	padding: 5px 10px 5px 20px;
	margin-bottom: 15px;
	border-radius: 5px;
}

.honbun{
		text-align: left;
	color: #000;
	

	
	font-size: 28px;
    line-height: 1.6;
	
	margin: 30px 0;
	text-align: justify;
}


.honbuns{
		text-align: left;
	color: #000;
	
	font-family: "fot-tsukuardgothic-std", sans-serif;
font-style: normal;
	
	font-size: 20px;
    line-height: 1.6;
	
	margin: 0 0 15px 0;
}

.cont_wrap{

    margin: 0 auto;

    padding: 0 8% 8% 8%;
	margin-top: 0px;
}



.linetext{
	text-align: center;
	color: #000;
	
	font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;
	
	font-size: 28px;
    line-height: 1.6;
	
	margin-bottom:30px ;
}


@media only screen and (max-width: 700px) {
	#fukii01{
	max-width: 700px;
}
	}

p.ytext{
	text-align: center;
	color: #ffff00;
	
	font-family: "fot-tsukuardgothic-std", sans-serif;
font-weight: 700;
font-style: normal;
	
	font-size: 24px;
    line-height: 1.6;
	
	margin: 30px 0;
}

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

.rightarea{
	width: 80%;
	margin: 0 auto;
	height: auto;
}

video{
	width: 100%;
	height: auto;
}

.linearea{
	background-color: #fff;
	max-width: 84%;
	margin: 0 auto;
	color: #fff;
	border-radius: 4px;
	padding:8% 4%;
}

.mb20{
	margin-bottom: 30px;
}

.mt40{
	margin-top: 50px
}

.koteiwrap{
	max-width: 600px;
margin: 0 auto;
	
}

.kotei{
	max-width: 100%;
    height: auto;
	position: fixed;
	z-index: 999;
	bottom: 0;
	background-color: #ec6506;
	padding: 10px 15px 7px 15px;
}

.kotei img{
	max-width: 100%!important;
	height: auto;
	vertical-align:top;
}

.sp_only{
		display: none;
}


@media only screen and (max-width: 1200px) {
	.leftside,
	.rightarea{
		display: none;
	}
}


.handanime{
	max-width: 75%;
	height:auto;
	margin: 0 auto;
	position: absolute;
top: 50px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	width: 100%;
	height: auto;
}


@media only screen and (max-width: 700px) {
	
	
	.handanime{
top: 30px;

}
	
	
	
		.pc_only{
		display: none;
	}
	.sp_only{
		display: block;
	}
	
	
	h3{
		font-size: 26px;
}
	
	.honbun {
    font-size: 20px;
		margin: 10px 0 30px 0;
}
	
	.linetext{
    font-size: 22px;
}
	
	.cont_wrap h4 {
    font-size: 22px;
}
	
	.bookicon{
		width: 25%;
		height: auto;
	}
	
	h3{
		    margin: 40px 0 15px 0;
	}
	
	#fukii01{
	padding: 40px 0px 40px 0px;
		overflow-x: hidden;
}
	
	
.index_w {
    padding: 190px 0 0px 0;
	padding-top: 50%;
	z-index: 2;
	position: relative;
}
	
	
	.index_w div h1{
		line-height: 1.5;
	}
	
	.kisotext h3 {
    color: #ec6506;
    font-size: 20px;
}
	
	.cont_wrap h4 {
    font-size: 18px;
}
	
	.kisotext {
    font-size: 16px;
}
	
	.kisotext h5 {
		font-size: 18px;}
	
	
	p.text_l {
    font-size: 16px;
		text-align: justify;
}
	
	.text20 p {
    font-size: 18px;
}
	
	.cont_wrap3 h3 {
    font-size: 16px;
}
	
	.crtext{
		font-size: 12px;
	}
	
	.kisotext {
    overflow-y: scroll;
		height: 400px;
		scrollbar-color:#e76506 #f8efe8;
		border-radius: 5px;
		border:2px solid #e76506;
		width: 100%;
		padding: 0px;
}
	
	.spsc{
		width: 94%;
		height: 100%;
		margin: 0 auto;
		line-height: 1.7;
		padding-bottom: 20px;
	}
	
	}


.varea{
	    border: 2px solid #000;
	margin: 0 0 40px 0;
}



/***************************************************
 * Generated by SVG Artista on 2/26/2024, 2:00:39 PM
 * MIT license (https://opensource.org/licenses/MIT)
 * W. https://svgartista.net
 **************************************************/

@-webkit-keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1326.4962158203125px;
    stroke-dasharray: 1326.4962158203125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1326.4962158203125px;
  }
}

@keyframes animate-svg-stroke-1 {
  0% {
    stroke-dashoffset: 1326.4962158203125px;
    stroke-dasharray: 1326.4962158203125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 1326.4962158203125px;
  }
}

@-webkit-keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(248, 234, 223);
  }
}

@keyframes animate-svg-fill-1 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(248, 234, 223);
  }
}

.svg-elem-1 {
  -webkit-animation: animate-svg-stroke-1 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
                       animate-svg-fill-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
          animation: animate-svg-stroke-1 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both,
               animate-svg-fill-1 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.8s both;
}

@-webkit-keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 152.62081909179688px;
    stroke-dasharray: 152.62081909179688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 152.62081909179688px;
  }
}

@keyframes animate-svg-stroke-2 {
  0% {
    stroke-dashoffset: 152.62081909179688px;
    stroke-dasharray: 152.62081909179688px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 152.62081909179688px;
  }
}

@-webkit-keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

@keyframes animate-svg-fill-2 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(255, 255, 255);
  }
}

.svg-elem-2 {
  -webkit-animation: animate-svg-stroke-2 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
                       animate-svg-fill-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
          animation: animate-svg-stroke-2 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.12s both,
               animate-svg-fill-2 1s cubic-bezier(0.47, 0, 0.745, 0.715) 0.9s both;
}

@-webkit-keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 352.8232727050781px;
    stroke-dasharray: 352.8232727050781px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 352.8232727050781px;
  }
}

@keyframes animate-svg-stroke-3 {
  0% {
    stroke-dashoffset: 352.8232727050781px;
    stroke-dasharray: 352.8232727050781px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 352.8232727050781px;
  }
}

@-webkit-keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-3 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-3 {
  -webkit-animation: animate-svg-stroke-3 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
                       animate-svg-fill-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
          animation: animate-svg-stroke-3 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.24s both,
               animate-svg-fill-3 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1s both;
}

@-webkit-keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 301.1932373046875px;
    stroke-dasharray: 301.1932373046875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.1932373046875px;
  }
}

@keyframes animate-svg-stroke-4 {
  0% {
    stroke-dashoffset: 301.1932373046875px;
    stroke-dasharray: 301.1932373046875px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.1932373046875px;
  }
}

@-webkit-keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-4 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-4 {
  -webkit-animation: animate-svg-stroke-4 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
                       animate-svg-fill-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
          animation: animate-svg-stroke-4 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.36s both,
               animate-svg-fill-4 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.1s both;
}

@-webkit-keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 352.80352783203125px;
    stroke-dasharray: 352.80352783203125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 352.80352783203125px;
  }
}

@keyframes animate-svg-stroke-5 {
  0% {
    stroke-dashoffset: 352.80352783203125px;
    stroke-dasharray: 352.80352783203125px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 352.80352783203125px;
  }
}

@-webkit-keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-5 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-5 {
  -webkit-animation: animate-svg-stroke-5 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
                       animate-svg-fill-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
          animation: animate-svg-stroke-5 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.48s both,
               animate-svg-fill-5 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.2000000000000002s both;
}

@-webkit-keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 227.42196655273438px;
    stroke-dasharray: 227.42196655273438px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 227.42196655273438px;
  }
}

@keyframes animate-svg-stroke-6 {
  0% {
    stroke-dashoffset: 227.42196655273438px;
    stroke-dasharray: 227.42196655273438px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 227.42196655273438px;
  }
}

@-webkit-keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-6 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-6 {
  -webkit-animation: animate-svg-stroke-6 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
                       animate-svg-fill-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
          animation: animate-svg-stroke-6 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.6s both,
               animate-svg-fill-6 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.3s both;
}

@-webkit-keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 320.8097839355469px;
    stroke-dasharray: 320.8097839355469px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 320.8097839355469px;
  }
}

@keyframes animate-svg-stroke-7 {
  0% {
    stroke-dashoffset: 320.8097839355469px;
    stroke-dasharray: 320.8097839355469px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 320.8097839355469px;
  }
}

@-webkit-keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-7 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-7 {
  -webkit-animation: animate-svg-stroke-7 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
                       animate-svg-fill-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
          animation: animate-svg-stroke-7 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.72s both,
               animate-svg-fill-7 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.4000000000000001s both;
}

@-webkit-keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 301.1607666015625px;
    stroke-dasharray: 301.1607666015625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.1607666015625px;
  }
}

@keyframes animate-svg-stroke-8 {
  0% {
    stroke-dashoffset: 301.1607666015625px;
    stroke-dasharray: 301.1607666015625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 301.1607666015625px;
  }
}

@-webkit-keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-8 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-8 {
  -webkit-animation: animate-svg-stroke-8 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
                       animate-svg-fill-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
          animation: animate-svg-stroke-8 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.84s both,
               animate-svg-fill-8 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.5s both;
}

@-webkit-keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 399.77349853515625px;
    stroke-dasharray: 399.77349853515625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 399.77349853515625px;
  }
}

@keyframes animate-svg-stroke-9 {
  0% {
    stroke-dashoffset: 399.77349853515625px;
    stroke-dasharray: 399.77349853515625px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 399.77349853515625px;
  }
}

@-webkit-keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-9 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-9 {
  -webkit-animation: animate-svg-stroke-9 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
                       animate-svg-fill-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
          animation: animate-svg-stroke-9 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 0.96s both,
               animate-svg-fill-9 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.6s both;
}

@-webkit-keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 345.0763244628906px;
    stroke-dasharray: 345.0763244628906px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 345.0763244628906px;
  }
}

@keyframes animate-svg-stroke-10 {
  0% {
    stroke-dashoffset: 345.0763244628906px;
    stroke-dasharray: 345.0763244628906px;
  }

  100% {
    stroke-dashoffset: 0;
    stroke-dasharray: 345.0763244628906px;
  }
}

@-webkit-keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

@keyframes animate-svg-fill-10 {
  0% {
    fill: transparent;
  }

  100% {
    fill: rgb(231, 101, 6);
  }
}

.svg-elem-10 {
  -webkit-animation: animate-svg-stroke-10 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
                       animate-svg-fill-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
          animation: animate-svg-stroke-10 1.5s cubic-bezier(0.47, 0, 0.745, 0.715) 1.08s both,
               animate-svg-fill-10 1s cubic-bezier(0.47, 0, 0.745, 0.715) 1.7000000000000002s both;
}


.movie-wrap {
     position: relative;
     /*padding-bottom: 56.25%;*/ /*アスペクト比 16:9の場合の縦幅*/
	padding-bottom: 50%;
     height: 0;
     overflow: hidden;
	margin-bottom: 30px;
	border: 2px solid #000;
}
 
.movie-wrap iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
}