/*-----------------------------------------------
 title
-----------------------------------------------*/
#title{
	position: relative;
	z-index: 10;
	height: 274px;
	margin-bottom: 42px;
	background:rgba(171,238,94,0.8);
}
#title .inner{
	position: relative;
	width: 1200px;
	margin: 0 auto;
}
#title .inner h1{
	overflow: hidden;
	text-align: center;
}
@media only screen and (max-width: 640px) {
	#title{
		height: auto;
		margin-bottom: 7.031vw;
		background: none;
	}
	#title .inner{
		width: auto;
	}
	#title .inner h1{
		position: static;
		background: none;
		padding-top: 0;
	}
	#title .inner h1 img{
		width: 100%;
	}
}
/*-----------------------------------------------
 content
-----------------------------------------------*/
#content{
	width: 1200px;
	margin: 0 auto;
}
#content h2 {
 text-align: center;
 margin: 40px auto 30px;
}
#content .movie-area h2 {
	margin-top: 0;
}
#content p {
	font-weight: 400;
}
#content .read {
    width: 900px;
    margin: 0 auto 40px;
    font-size: 18px;
    line-height: 1.44;
}
@media only screen and (max-width: 640px) {
	#content{
		width: 94%;
		padding: 0;
	}
	#content h2 {
	 margin: 8vw auto 3vw;
	}
	#content img {
		width: 100%;
	}
	#content .read {
    width: auto;
    margin: 0 0 5.469vw;
    font-size: 3.438vw;
    line-height: 1.27;
}
}


/*-----------------------------------------------
 .gallery
-----------------------------------------------*/
.gallery {
  width: 1000px;
  margin: 0 auto 27px; }

/*-----------------------------------------------
 .gallery-area
-----------------------------------------------*/
.gallery-area {
  display: none;
  width: 992px;
  margin: 0 auto 80px; }

.gallery-area.show {
  display: block; }

.gallery .box {
	background-image: url(../img/gallery/dot_gallery.png),url(../img/gallery/dot_gallery.png);
	background-position:top left,right bottom;
	background-repeat: no-repeat,no-repeat;
	background-size: 8px 8px,8px 8px;
	background-color:#f7feee;
  width: 1000px;
  margin: 0 auto 20px;
	padding: 37px 50px 40px;
	border:solid 2px #94d900;
	position:relative;
	box-sizing:border-box;
	text-align:center;
}
.gallery .box::after {
		content: '';
    width: calc(100% - 18px);
    height: calc(100% - 18px);
    position: absolute;
    top: 8px;
    left: 8px;
		border:solid 1px #94d900;
}
.gallery .box .title,.illust-area .title {
    background: url(../img/gallery/dot_title.png) no-repeat center left,#94d900;
    font-family: YuMincho,'Yu Mincho', serif;
    color: #fff;
    font-size: 24px;
    display: inline-block;
    padding: 10px 22px;
    line-height: 1.5em;
		text-align:center;
}
.gallery .box .subtitle {
	color:#94d900;
	font-size:16px;
  font-family: YuMincho,'Yu Mincho', serif;
	margin:9px 0 14px;
}
.gallery .box .movie {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.gallery .box .movie iframe {
  width: 100%;
  height: 100%;
}
.gallery .illust-area {
	padding: 20px 0 0;
  text-align: center;
  font-size: 0;
}
.gallery .illust-area li {
	margin:0 10px 10px 0;
  display: inline-block;
  width: calc( 100% / 5 - 20px );
}
.gallery .illust-area li a {
	cursor:pointer;
	position:relative;
	z-index:1;
}
.gallery .illust-area li a img{
  width: 100%;
}

/*-----------------------------------------------
 modal
-------------------------------------------------*/
.modal {
  display: none;
  z-index: 110;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100vh; }

.modal-bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background:#abee5e; }

.modal-content {
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  -ms-overflow-style: none;
  scrollbar-width: none;
  position: absolute;
  overflow-y: scroll; }


.modal-content.modal-txt {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: left;
  margin: 0; }

.modal-content::-webkit-scrollbar {
  display: none; }

.modal-content .js-modal-close {
  width: 100%;
	max-width: 1000px;
  margin: 20px auto 10px;
  text-align: right;
  cursor: pointer; }

.modal-content .js-modal-close img {
  width: 24px; }

body.fixed {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%; }
	
	
	

@media screen and (max-width: 640px) {
  /*-----------------------------------------------
   main
  -----------------------------------------------*/
  /*-----------------------------------------------
   gallery
  -----------------------------------------------*/
  .gallery {
    width: 100%; 
		margin-bottom:1.563vw;}

  /*-----------------------------------------------
   .gallery-area
  -----------------------------------------------*/
  .gallery-area {
    width: 100%;
    margin: -1.875vw auto 13.28125vw; }


			#content .gallery .box {
				padding: 6.094vw 6.094vw 6.25vw;
				margin-bottom:2.969vw;
				width:auto;
			}
			#content .gallery .box .title,#content .illust-area .title{
				background: url(../img/gallery/dot_title.png) no-repeat center left,#94d900;
				background-size:1.719vw 4.219vw;
				font-size: 3.75vw;
				padding: 1.5vw 2vw;
		}
		#content .gallery .box .subtitle {
			font-size:2.5vw;
			margin:1.406vw 0 2.188vw;
		}
		.gallery .illust-area {
			padding: 3vw 0 0;
		}
		.gallery .illust-area li {
			margin: 0 2% 2.344vw 0;
			width: 32%;
		}
		.gallery .illust-area li:nth-child(3n) {
			margin-right:0;
		}

		

/*-----------------------------------------------
 modal
-------------------------------------------------*/	.modal-content {
    width: 85.9375vw;
    top: 10.9375vw; }

  .illust-text {
    font-size: 3.125vw;
    margin: 3.125vw 0 7.8125vw; }

  .modal-content img {
    width: 100%; }

  .modal-content .js-modal-close {
    margin: 3.125vw 0 1.5625vw 0; }

  .modal-content .js-modal-close img {
    width: 3.438vw; }

	}