/* contents============================================== */


#container {
    position: relative;
    width: 100%;
    min-height: 100%;
	background-color: #FFF;
}


/* mainVis============================================== */

#mainVis{
    width: 100%;
    height: calc(100vh - 0px);
    position: relative;
	background-color: #f4d8dc;
	z-index: 0;
}

#mainVis::before {
    background-color: #b8d3cb;
    width: 100%;
    height: 50%;
    /* min-height: 0px; */
    content: '';
    position: absolute;
    z-index: 1;
    right: 0;
}

.logoArea{
	position: absolute;
    left: 1.8%;
    bottom: 5%;
    width: 42%;
    height: auto;
    padding: 2% 0 5% 0;
	z-index: 2;
/*    background-color: #000;*/
}

.logoAreaInner{
	width: 100%;
}

.logoArea h2 {
	position: absolute;
    width: 43.3%;
    height: auto;
    left: 0;
    bottom: 0;
}

.logoArea svg {
	width: 100%;
	height: auto;
	min-height: 60px;
	fill: #FFF;
}

.logoRead{
	position: absolute;
    display: block;
    left: 48%;
    height: auto;
    width: 51%;
    z-index: 0;
}

.logoRead svg {
    width: 100%;
	height: auto;
	min-height: 50px;
	fill: #FFF;
}


/* Movie============================================== */

.mainImage{
	width: 100%;
	padding: 2.08%;	
}

.mainImageInner{
	display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	min-height: 500px;
	
}

.mainItem{
    z-index: 1;
}

.mainItem:nth-of-type(1),
.mainItem:nth-of-type(2){
    width: 31.55%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: calc(100vh - 70px);
    background-image: url(../images/main01.jpg);
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.mainItem:nth-of-type(2){
    background-image: url(../images/main02.jpg);
}

.movie{
	width: 30.55%;
    height: auto;
    position: absolute;
    margin-top: -15.27%;
    top: 50%;
    left: 50%;
    margin-left: -15.27%;
    z-index: 1;
}

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

/* prologueRead============================================== */


#prologueRead{
    padding: 5% 0 10%;
	margin: 0 auto;
	text-align: left;
	color: #333;
	display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
	line-height: 2.6;
}

/* scroll fade */
#prologueRead div{
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: 1200ms;
  transition: 1200ms;
}
#prologueRead div.scroll{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.gridItem img{
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 0;
  -webkit-transition: 1200ms;
  transition: 1200ms;
}
.gridItem img.scroll{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
/* scroll fade */

.mainTxt::before {
    content: '';
    width: 278px;
    height: 1px;
    background-color: #333;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
	position: absolute;
	left: -17em;
}

.mainTxt::after {
    content: '';
	position: absolute;
    width: 278px;
    height: 1px;
    background-color: #333;
    -webkit-align-self: flex-end;
    -ms-flex-item-align: end;
    align-self: flex-end;
	right: -17em;
}


.mainTxt{
	margin-top: 50px;
	position:relative;
}


.subTxt{
	margin-top: 50px;
}

#prologueRead .mainTxt p{
  font-size: 1.16vw;
  letter-spacing: .2em;
  margin: 16% 0 13.5% 0;
}


#prologueRead .subTxt p{
    font-size: .88vw;
    margin-top: 4.6%;
    letter-spacing: .2em;
  
}


/* layoutCommon============================================== */

#gridArea{
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 1600px;
	margin:0 auto;
}

.asv .gridItem{
	position: absolute;
}


.gridItem img{
	width: 100%;
	height: auto;
	margin-bottom: 2%;
}


.itemDetail,
.itemDetail a,
.itemDetail span{
    font-size: .86vw;
    letter-spacing: .02em;
    font-weight: 500;
    color: #666;
	line-height: 1.6;
	text-align:left;
}

.itemDetail.center{
	width: 80%;
	margin: 0 auto;
}

.itemDetail a{
	text-decoration: underline;
	color: #333;
}

.itemDetail span {
	padding: 0 2% 0;
}
.itemDetail a:hover {
    -webkit-animation: flashing 0.18s 2;
    -moz-animation: flashing 0.18s 2;
    -o-animation: flashing 0.18s 2;
    animation: flashing 0.18s 2;
    cursor: pointer;
	color: #000;
  }


@keyframes flashing {
  0% {
    opacity: 1;
  }
  10% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}






/* layout01============================================== */

.layout01{
	width: 73.88%;
	margin: 0 auto;
	position: relative;
	padding: 0 0 69% 0;
}

.layout01 .gridItem:nth-of-type(1){
	left: 0px;
	width: 50.75%;
}

.layout01 .gridItem:nth-of-type(2){
	right: 1.2%;
	width: 32.89%;
}


/* layout02============================================== */

.layout02{
	width: 73.88%;
	margin: 0 auto;
	position: relative;
	padding: 0% 0 54% 0;
}

.layout02 .gridItem:nth-of-type(1){
	left: 8.5%;
	width: 32.89%;
}

.layout02 .gridItem:nth-of-type(2){
	width: 50.75%;
	right: -8%;
    top: -36.6%;
}


/* layout03============================================== */

.layout03{
	width: 100%;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	padding-top: 2%;
}

.layout03 .gridItem{
   width: calc(100% / 3);
}


/* layout04============================================== */
/* layout19============================================== */



.layout04,
.layout19{
	width: 66.80%;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	padding-top: 12%;
	position: relative;
}

.layout04{
	margin-bottom: 16%;
}

.layout04 .itemDetail, 
.layout04 .itemDetail a,
.layout04 .itemDetail span,
.layout19 .itemDetail, 
.layout19 .itemDetail a,
.layout19 .itemDetail span {
	text-align: center;
}

.layout19{
	padding-top: 0%;
}

.layout19 .gridItem img {
    width: 101%;
}

.layout04 .gridItem,
.layout19 .gridItem{
   width: calc(100% / 2);
}

.layout04 .itemTxt,
.layout19 .itemTxt{
	width: 100%;
    margin: 0 auto;
    height: auto;
    position: absolute;
    text-align: center;
    bottom: -13%;
}


/* layout05============================================== */

.layout05{
	width: 100%;
	margin: 0 auto;
	padding: 0% 0 12% 0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	position: relative;
}

.layout05 .gridItem{
   width: 42.5%;
}

.layout05 .gridItem img {
    margin-bottom: 0%;
}

.layout05 .itemTxt{
    width: 57.5%;
    padding: 22% 5%;
    position: absolute;
    background-color: #eeeeee;
    right: 0;
    top: 50%;
    margin-top: -28%;
}

.layout05 .itemTxtInner{
    height: auto;
    padding: 8% 8% 5% 8%;
    text-align: center;
    background-color: #FFF;
    position: absolute;
    top: 20%;
    width: 83%;
}

.layout05 .itemTxt .itemDetail, 
.layout05 .itemTxt .itemDetail span {
    font-size: 1vw;
    margin-bottom: 0%;
    text-align: left;
}
.mg{
	padding-top: 3%;
}

/* layout06============================================== */

.layout06{
	width: 64.58%;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	position: relative;
}

.layout06 .gridItem:nth-of-type(1){
	left: -2.7%;
    width: 40.86%;
	margin-top: -1.9%;
}

.layout06 .gridItem:nth-of-type(2){
	right: 2.4%;
	width: 51.61%;
	margin-top: -18%;
}


/* layout07============================================== */
/* layout04============================================== */

.layout07,
.layout14{
	width: 81.25%;
	margin: 0 auto;
	padding: 54% 0 0% 0;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.layout14{
	padding: 70% 0 0% 0;
}

.layout07 .gridItem:nth-of-type(1),
.layout07 .gridItem:nth-of-type(2),
.layout14 .gridItem:nth-of-type(1),
.layout14 .gridItem:nth-of-type(2){
    width: 47%;
}


/* layout08============================================== */

.layout08{
	width: 71.52%;
	margin: 0 auto;
	padding: 8% 0 0% 0;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.layout08 .gridItem:nth-of-type(1),
.layout08 .gridItem:nth-of-type(2){
    width: 39.80%;
}

/* layout09============================================== */

.layout09{
	width: 100%;
	margin: 0 auto;
	padding: 10% 0 0 0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
}

.layout09 .gridItem{
   width: 59.37%;
   margin-left: auto;
}

.layout09 .gridItem img {
    margin-bottom: 0%;
}

.layout09 .itemTxt{
	width: 40.62%;
    height: auto;
    padding: 5% 3%;
    text-align: center;
    background-color: #e2e8e7;
	position: relative;
}

.layout09 .itemTxtInner{
	width: 83%;
    height: auto;
    padding: 16% 24%;
    background-color: #FFF;
    position: absolute;
    line-height: 2.4;
    top: 31%;
}

.layout09 .itemDetail a {
    display: block;
}

.layout09 .itemDetail{
	text-align: left;
}

.layout09 .itemDetail span{
	padding-left: 0;
}


/* layout10============================================== */

.layout10{
	width: 71.52%;
	margin: 0 0% 0 11.6%;
	padding: 11% 0 0% 0;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.layout10 .gridItem{
   width: 48.54%;
   margin-left: auto;
}

.layout10 .itemTxt{
	width: 40.62%;
    height: auto;
    text-align: center;
	-webkit-align-items: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
}

.layout10 .itemTxtInner{
	width: 100%;
    height: auto;
}


/* layout11============================================== */

.layout11{
	width: 71.25%;
	margin: 0 auto;
	padding: 0% 0 8% 0;
	position: relative;
}

.layout11 .gridItem{
    width: 48.54%;
	top: -125%;
	left: -7.2%;
}


/* layout12============================================== */

.layout12{
	width: 71.25%;
	margin: 0 auto;
	padding: 0% 0 8% 0;
	position: relative;
}

.layout12 .gridItem{
    width: 33%;
    top: 423%;
    left: 35%;
}


/* layout13============================================== */

.layout13{
	width: 71.25%;
	margin: 0 auto;
	padding: 0% 0 8% 0;
	position: relative;
}

.layout13 .gridItem{
    width: 33%;
	top: 104%;
	right: -7.4%;
}

/* layout15============================================== */

.layout15{
	width: 83.33%;
	margin: 0 auto;
	padding: 10% 0 18% 0;
	display: flex;
	justify-content: space-between;
    flex-wrap: wrap;
}

.layout15 .gridItem{
   width: 27.66%;
}


.layout15 .gridItem:nth-of-type(2){
    left:36%;
}


.layout15 .itemTxt{
	width: 30%;
    height: auto;
    text-align: left;
    -webkit-align-items: center;
    -ms-flex-align: center;
    -ms-flex-pack: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
	padding-top: 11%;
    line-height: 2.4;
}


.layout15 .itemTxtInner{
	width: 100%;
    height: auto;
    background-color: #FFF;
}


/* layout16============================================== */

.layout16{
	width: 73.19%;
	margin: 0 auto;
	position: relative;
	padding: 0% 0 3% 0;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}

.layout16 .gridItem:nth-of-type(1){
	width: 36.05%;
	margin-top: 8%;
	margin-left: 11.2%;
}

.layout16 .gridItem:nth-of-type(2){
	width: 47.43%;	
	margin-right: -7.3%;
}


/* layout17============================================== */

.layout17{
	width: 73.19%;
	margin: 0 auto;
	position: relative;
	padding: 0% 0 14% 0;
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
	}

.layout17 .gridItem:nth-of-type(1){
	width: 47.43%;	
}

.layout17 .gridItem:nth-of-type(2){
	width: 36.05%;
	margin-top: 8%;
	margin-right: 4%;
}

/* layout08============================================== */

.layout18{
	width: 100%;
	margin: 0 auto;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	position: relative;
}

.layout18 .gridItem{
   width: 42.5%;
   margin-left: auto;
}

.layout18 .gridItem img {
    margin-bottom: 0%;
}

.layout18 .itemTxt{
    width: 57.6%;
    padding: 22% 5% 25% 5%;
    position: absolute;
    background-color: #eeeeee;
    left: 0px;
    top: 50%;
    margin-top: -24%;
}

.layout18 .itemTxtInner{
    height: auto;
    padding: 8% 8% 5% 8%;
    text-align: center;
    background-color: #FFF;
    position: absolute;
    top: 20%;
    width: 83%;
}

.layout18 .itemTxt .itemDetail, 
.layout18 .itemTxt .itemDetail span {
    font-size: 1vw;
    margin-bottom: 5%;
    text-align: left;
}



/* INFORMATION============================================== */

#infoArea{
	width : 66.80%;
	margin: 16% auto 7%;
	background-color: #eee;
}

.infoInner{
	padding: 5%;
	font-style: italic;
}

.infoInner h3{
	font-size: 1.6vw;
	font-weight: bold;
}

.infoInner span{
	font-size: 1.2vw;
    display: block;
    padding-top: 5px;
}

.infoInner p{
	font-size: 1vw;
	line-height:2;
	margin-top: 3%;
	color: #333;
	text-align: left;
}


/* CREDIT============================================== */


.creditArea{
    width: 79.16%;
    margin: 0 auto 6%;
    font-style: italic;
}

.credit{
    font-size: 1vw;
    text-align: right;
    color: #333;
    line-height: 2;
    right: 0;
}



@media screen and (max-width: 1300px) {

.mainItem:nth-of-type(1),
.mainItem:nth-of-type(2){
    width: 30.55%;
}

.movie{
	width: 30.55%;
    margin-top: -15.27%;
    margin-left: -15.27%;
}

}


@media screen and (max-width: 768px) {
	
	
	
	
/* scroll fade */
#prologueRead div{
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 1;
  -webkit-transition: 1200ms;
  transition: 1200ms;
}
#prologueRead div.scroll{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.gridItem img{
  -webkit-transform: translateY(30px);
  transform: translateY(30px);
  opacity: 1;
  -webkit-transition: 1200ms;
  transition: 1200ms;
}
.gridItem img.scroll{
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
/* scroll fade */	
	
	
.movie {
    width: 90%;
    margin-top: -45%;
    margin-left: -45%;
}
	
.mainImageInner{
	display: none;
}

.logoArea {
    left: 5%;
    bottom: 1%;
    width: 72%;
}

.logoRead {
    left: 46%;
    bottom: 9px;
}
	
.mainTxt::before {
    width: 71%;
}

.mainTxt::after {
    width: 51%;
    right: -12.2em;
}


#prologueRead .mainTxt p {
    font-size: 13px;
    margin: 60px 0 52px 0;
}	

#prologueRead .subTxt p {
    font-size: 11px;
    margin-top: 30px;
}

.itemDetail,
.itemDetail a,
.itemDetail span {
    font-size: 11px;
}

.layout11 .gridItem .itemDetail {
	width: 80%;
}

.layout03 {
    padding-top: 80px;
}

.layout04 .itemTxt,
.layout19 .itemTxt {
    bottom: -90px;
}

.layout05 {
    padding: 80px 0 160px 0;
}

.layout05 .itemTxtInner {
    padding: 28px 36px 16px 36px;
    top: 30px;
	width: 87%;
}

.layout05 .itemTxt {
padding: 160px 30px 160px 20px;
}

.layout07{
    padding: 520px 0 0% 0;
}

.layout09 .itemTxtInner {
    padding: 30px;
}

.layout14 {
    padding: 650px 0 0% 0;
}

.layout15 .gridItem:nth-of-type(2) {
    left: 52%;
}

.layout15 .gridItem {
    width: 39%;
}

.layout15 .itemTxt {
    width: 48%;
    display: block;
    padding-top: 71.2%;
    line-height: 1.8;
}

.layout15 {
    padding: 10% 0 10% 0;
}

.layout16 .gridItem:nth-of-type(2) {
    margin-right: -1.3%;
}

.layout17 .gridItem:nth-of-type(2) {
    margin-right: 10%;
}

.layout18 .itemTxtInner {
    padding: 28px 36px 16px 36px;
    top: 30px;
	width: 87%;
}

.layout18 .itemTxt {
    padding: 165px 30px;
    margin-top: -167px;
}

.layout19 .itemTxt {
    bottom: -75px;
}

	
}



@media screen and (max-width: 420px) {


#mainVis {
    height: 570px;
}

.logoRead {
    left: 47%;
    bottom: 4px;
    width: 78%;
}

#prologueRead{
	width: 84%;
}

#prologueRead .mainTxt p {
    font-size: 13px;
    letter-spacing: 1px;
	margin: 42px 0 32px 0;
}

.mainTxt::before {
    width: 72%;
}

.mainTxt::after {
    width: 36%;
    right: -51px;
}


.subTxt {
    margin-top: 20px;
}

#prologueRead .subTxt p {
    font-size: 12px;
    margin-top: 30px;
	letter-spacing: .1em;
    line-height: 2.2;
}

#prologueRead .subTxt p br {
	display: none;
}

#gridArea {
    width: 100%;
    max-width: 100%;
}

#gridArea p br {
	display: none;
}

.layout01 {
    width: 100%;
    padding: 0px 8% 1160px 8%;
}

.layout01 .gridItem:nth-of-type(1) {
    left: 8%;
    width: 84%;
}

.layout01 .gridItem:nth-of-type(2) {
    right: 8%;
    width: 70%;
    top: 610px;
}

.layout02 {
    width: 100%;
    padding: 0% 0 1200px 0;
}

.layout02 .gridItem .itemDetail,
.layout07 .gridItem:nth-of-type(1) .itemDetail,
.layout07 .gridItem:nth-of-type(2) .itemDetail,
.layout13 .gridItem .itemDetail {
	width: 84%;
	margin:0 auto;
}

.layout06 .gridItem:nth-of-type(1) .itemDetail {
	width: 84%;
}

.layout06 .gridItem:nth-of-type(2) .itemDetail,
.layout14 .gridItem:nth-of-type(1) .itemDetail,
.layout16 .gridItem:nth-of-type(1) .itemDetail {
	width: 84%;
	margin-left: 8%;
}

.layout17 .gridItem:nth-of-type(1) .itemDetail {
	width: 84%;
}

.layout02 .gridItem:nth-of-type(1) {
    left: 8%;
    width: 70%;
}

.layout02 .gridItem:nth-of-type(2) {
    width: 100%;
    right: 0;
    top: 570px;
}

.layout03 {
    padding: 150px 8% 0 8%;
	display: block;
}

.layout03 .gridItem {
    width: 100%;
	margin-bottom: 40px;
}

.itemDetail.center {
    width: 100%;
}

.layout04, .layout19 {
    width: 100%;
	padding-top:50px;
}

.layout04 .itemTxt,
.layout19 .itemTxt {
    bottom: -92px;
    padding: 0 8% 0 8%;
}

.layout05 {
    padding: 100px 8% 410px 8%;
}

.layout05 .gridItem {
    width: 100%;
}

.layout05 .itemTxt .itemDetail, 
.layout05 .itemTxt .itemDetail span,
.layout18 .itemTxt .itemDetail,
.layout18 .itemTxt .itemDetail span {
    font-size: 12px;
}

.layout05 .itemTxt {
    padding: 140px 30px 185px 30px;
    margin-top: 141px;
    width: 100%;
}

.layout06 {
    width: 100%;
	display: block;
	padding-bottom: 1340px;
}

.layout06 .gridItem:nth-of-type(1) {
    left: initial;
    width: 76%;
    margin-top: 0px;
    right: 0;
}

.layout06 .gridItem:nth-of-type(2) {
    right: initial;
    width: 92%;
    margin-top: 610px;
    left: 0;
}

.layout07 {
    padding: 20px 0 0% 0;
	width: 100%;
}

.layout07 .gridItem:nth-of-type(1),
.layout14 .gridItem:nth-of-type(1),
.layout14 .gridItem:nth-of-type(2) {
    width: 92%;
    /* right: 0; */
    margin-left: auto;
}

.layout07 .gridItem:nth-of-type(2){
	width: 100%;
	padding-top: 60px;
}

.layout08 {
    width: 100%;
    padding: 90px 0 0% 0;
    display: block;
}

.layout08 .gridItem:nth-of-type(1),
.layout08 .gridItem:nth-of-type(2) {
    width: 70%;
    margin: 0 auto 50px;
}

.layout09 {
    display: flex;
    flex-direction: column;
}

.layout09 .gridItem {
    width: 100%;
    margin-left: auto;
    order: 1;
}

.layout09 .itemTxt {
    width: 100%;
    order: 2;
    padding: 6% 8% 35% 8%;
}

.layout09 .itemTxtInner {
    padding: 30px 70px 30px 70px;
	 width: 84%;
	 top: initial;
}

.layout10 {
    width: 100%;
    margin: 0 0% 0 0%;
    padding: 80px 8% 0% 0%;
	display: flex;
    flex-direction: column;
}

.layout10 .gridItem {
    width: 100%;
	order: 1;
}

.layout10 .itemTxt {
    width: 100%;
    padding-left: 8%;
	order: 2;
}

.layout11 {
    width: 100%;
    padding: 0% 0 200px 0;
}

.layout11 .gridItem {
    width: 100%;
    top: 50px;
    left: 0;
	padding-left:16%;
}

.layout12 {
    width: 100%;
}

.layout12 .gridItem {
    width: 70%;
    top: 460px;
    left: 8%;
}

.layout13 {
    width: 100%;
}

.layout13 .gridItem {
    width: 100%;
    top: 1020px;
    right: 0;
}

.layout14 {
    padding: 1700px 0 0% 0;
	width: 100%;
}

.layout14 .gridItem:nth-of-type(1){
margin-left: initial;
margin-bottom: 70px;
}

.layout15 {
    padding: 60px 0 60px 0;
	width: 100%;
}

.layout15 .gridItem {
    width: 70%;
    margin: 0 auto 70px;
	position: initial;
}

.layout15 .gridItem:nth-of-type(2) {
    left: 0;
	margin-bottom: 0;
}

.layout15 .itemTxt {
    width: 100%;
    display: block;
    padding: 0 16% 0 16%;
    line-height: 1.8;
}

.layout16 {
    width: 100%;
    position: initial;
    padding: 0% 0 3% 0;
    display: block;
}

.layout16 .gridItem:nth-of-type(1) {
    width: 70%;
    margin-top: 0%;
    margin-left: 0;
}

.layout16 .gridItem:nth-of-type(2) {
    margin-right: 0%;
    width: 100%;
    padding: 50px 8% 0 8%;
}

.layout17 {
    width: 100%;
    position: initial;
    padding: 0% 0 14% 0;
    display: block;
}

.layout17 .gridItem:nth-of-type(1) {
    width: 70%;
    margin-left: auto;
    margin-top: 50px;
}

.layout17 .gridItem:nth-of-type(2) {
    margin-right: 0;
    width: 100%;
    padding: 0 8% 0 8%;
}

.layout18 {
    display: flex;
    flex-direction: column;
	position: initial;
}

.layout18 .gridItem {
    width: 100%;
    margin-left: auto;
    order: 1;
}

.layout18 .itemTxtInner {
    padding: 28px 36px 16px 36px;
    width: 84%;
    margin: 0 auto;
	position: initial;
}

.layout18 .itemTxt {
    width: 100%;
    order: 2;
	padding: 30px 0px;
    position: initial;
	margin-top: 0px;
}

.layout19 {
    padding-top: 0%;
    display: block;
}

.layout19 .gridItem {
    width: 100%;
	padding: 0 8% 8% 8%;
}

.layout19 .itemTxt {
    bottom: -43px;
    padding: 0 8% 0 8%;
}

#infoArea {
    width: 100%;
    margin: 90px auto 50px;
    padding: 0 8% 0 8%;
}

.infoInner {
    padding: 8% 0 8% 0;
}

.infoInner h3 {
    font-size: 15px;
}

.infoInner span {
    font-size: 12px;
}

.infoInner p {
    font-size: 13px;
}

.creditArea {
    width: 100%;
	position: initial;
    text-align: center;
	padding: 0px 0px 27px;

}

.credit {
    font-size: 12px;
	position: initial;
	display: inline-block;
	text-align: left;

}

}

@media screen and (max-width: 375px) {

#mainVis {
    height: 540px;
}	
.mainTxt {
    margin-top: 0px;
    position: relative;
}

#prologueRead {
    width: 90%;
	padding: 60px 0 40px 0;
}

#prologueRead .mainTxt p {
    font-size: 12px;
    letter-spacing: 0px;
}

.mainTxt::before {
    width: 80%;
}

.mainTxt::after {
   right: -68px;
    width: 35%;
}

.layout01 .gridItem:nth-of-type(2) {
    top: 570px;
}

.layout01 {
    padding: 0px 8% 1070px 8%;
}

.layout02 .gridItem:nth-of-type(2) {
    top: 540px;
}

.layout02 {
    padding: 0% 0 960px 0;
}

.layout03 {
    padding: 310px 8% 0 8%;
}

.layout04 .itemTxt, .layout19 .itemTxt {
    bottom: -92px;
}

.layout05 .itemTxt {
   margin-top: 86px;
    padding: 140px 30px 224px 30px;
}

.layout05 {
        padding: 120px 8% 420px 8%;
}

.layout06 {
    width: 100%;
    display: block;
    padding-bottom: 1300px;
}


.layout07 .gridItem:nth-of-type(1) .itemDetail {
	margin:0 auto;
	width: 100%;
}

.layout08 {
    width: 100%;
    padding: 50px 0 0% 0;
    display: block;
}

.layout09 {
    padding: 0;
}
.layout14 {
    padding: 1680px 0 0% 0;
}

.layout19 .itemTxt {
    bottom: -44px;
}

#infoArea {
    margin: 130px auto 50px;
}





}

@media screen and (max-width: 360px) {
	
#prologueRead .subTxt p {
   letter-spacing: 1px;
    text-align: left;
}
	
.mainTxt::after {
    right: -49px;
}

.layout04 .itemTxt,
.layout19 .itemTxt {
    bottom: -108px;
}

.layout05 .itemTxt {
    margin-top: 77px;
}

}

@media screen and (max-width: 320px) {

.layout05 .itemTxt {
    padding: 30px 30px 30px 30px;
    margin-top: 50px;
    width: 100%;
}

.layout05 .itemTxtInner {
    width: 100%;
    position: initial;
    padding: 8% 8% 5% 8%;
}

.mainTxt::before {
    width: 85%;
}

.mainTxt::after {
    right: -30px;
}
.layout01 .gridItem:nth-of-type(2) {
    top: 510px;
}

.layout01 {
    padding: 0px 8% 980px 8%;
}

.layout02 .gridItem:nth-of-type(2) {
    top: 500px;
}

.layout03 {
    padding: 220px 8% 0 8%;
}

.layout04 .itemTxt {
    bottom: -113px;
}

.layout19 .itemTxt {
    bottom: -63px;
}

.layout06 .gridItem:nth-of-type(1) {
    margin-top: 10px;
}

.layout09 .itemTxt {
    padding: 6% 8% 48% 8%;
}

.layout06 {
    padding-bottom: 1210px;
}

.layout14 {
    padding: 1620px 0 0% 0;
}

}