@media screen and (min-width: 769px) {
	
	/*---------------------------------------
	 * MainVisual
	---------------------------------------*/ 
	
	.mainvisual {
		width: 100%;
		margin: 0 0 100px;
	}
	.mainvisual .inner{
		width: 100%;
		height: 500px;
		position: relative;
	}
	.mainvisual .img{
		position: absolute;
		top:0;
		right:0;
		width: calc(100% - 280px);
		height: 500px;
		background: url(../img/story_main_pc.jpg) 0 0 no-repeat;
		background-size: cover;
	}
	.mainvisual .box{
		position: absolute;
		bottom:0;
		left:88px;
		z-index: 1;
		width: 238px;
		padding: 60px 76px 0;
		background: #FFFFFF;
	}
	.mainvisual .box .title{
		width: 238px;
		margin: 0 auto 10px;	
	}
	.mainvisual .box .read{
		line-height: 1.8;
	    font-size: 1.2rem;
	    text-align: justify;
	    margin: 0 0 15px;
	}
	.mainvisual .box .icon span{
		display: inline-block;
	}
	.mainvisual .box .icon .youtube{
		width: 20px;
		margin-right: 10px;	
	}
	.mainvisual .box .icon .insta{
		width: 14px;
	}
	
	

	/*---------------------------------------
	 * Movie Contents
	---------------------------------------*/ 
	
	.movie{
		width: 100%;
		background: #F2F4F4;
		padding: 0 0 100px;
	}
	.movie .inner{
		width: calc(100% - 40px);
		max-width: 1020px;
		margin: 0 auto ;
	}
	.movie .inner .box{
		position: relative;
		top:-20px;

	}
	.movie .inner .title{
		width: 280px;
		margin: 0 auto 25px;
	}	
	.movie .inner .sub-title{
		text-align: center;
		letter-spacing: 3px;
		color: #B4994C;
		font-weight: 200;
		margin-bottom: 50px;
	}
	.movie .inner .sub-title span{
		display: inline-block;
		width: 20px;
		margin-right: 10px;
	}
	
	
	/* Movie Grid
	---------------------------------------*/ 
	
	.movie .inner .movie-list{
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}
	.movie .inner .more-content{
		display: none;
	}
	.movie .inner .movie-list li{
		width: 48%;
		margin: 80px 1% 0;
	}
	
	
	/* MoviewItem
	---------------------------------------*/ 
	
	.movie .inner .movie-list li a{
		display: block;
	}
	.movie .inner .movie-list li .thumbnail{
		position: relative;
		background: #000000;
		height: 200.88px;
		overflow: hidden;
	}
	.movie .inner .movie-list li .thumbnail .img{
		transition: all 2s;
	}
	.movie .inner .movie-list li .thumbnail:hover .img {
		opacity: .3;
	}
	.movie .inner .movie-list li .thumbnail .play{
		width: 32px;
		height: 32px;
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin: auto;
	}
	.movie .inner .movie-list .caption{
		color: #B4994C;
		margin: -35px 0 0;
		position: relative;
		z-index: 1;
	}
	.movie .inner .movie-list .caption .num{
		font-size: 5.6rem;
		text-align: center;
		margin: 0 0 20px;
		font-family: 'Frank Ruhl Libre', serif;
	}
	.movie .inner .movie-list .caption .title{
		font-size: 1.2rem;
		text-align: center;
		letter-spacing: 3px;
		line-height: 1.8;
	}
	
	/* MoreBtn
	---------------------------------------*/ 
	
	.movie .inner .more{
		font-size: 1.2rem;
		font-weight: 200;
		letter-spacing: 2px;
		color: #B4994C;
		padding: 10px 0;
		width: 175px;
		border-radius: 50px;
		border: 2px solid #B4994C;
		text-align: center;
		margin: 30px auto 0;
		transition: background .3s;
		cursor: pointer;
	}
	.movie .inner .more:hover{
		background: #B4994C;
		color:#FFFFFF;
	}

.storyTel {
		ont-family: 'Montserrat', sans-serif;
		text-align: center;
		font-weight: bold;
		color: #1C9888;
	    
}
	
	/*---------------------------------------
	 * BrideHappiness
	---------------------------------------*/ 
	
	.happiness{
		width: 100%;
		background: #FFFFFF;
	}
	.happiness .inner{
		
		margin: 0 auto ;
	}
	.happiness .inner .box{
		position: relative;
		top:-20px;
		margin: 0 0 50px;

	}
	.happiness .inner .title{
		width: 280px;
		margin: 0 auto 25px;
	}	
	.happiness .inner .sub-title{
		text-align: center;
		letter-spacing: 3px;
		color: #B4994C;
		font-weight: 200;
		margin: 0 0 20px;
	}
	.happiness .inner .sub-title span{
		display: inline-block;
		width: 14px;
		margin-right: 10px;
	}
.inner .read{
		font-size: 1.2rem;
		line-height: 2;
		text-align: center;
	}
	
	/* Anchor
	---------------------------------------*/ 
	
	.happiness .inner .anchor-list{
		display: flex;
		justify-content: center;
		margin: 0 0 80px;
	}
	.happiness .inner .anchor-list li{
		margin: 0 30px;
	}
	.happiness .inner .anchor-list li a{
		display: block;
		
	}
	.happiness .inner .anchor-list li a:hover .category-name{
		color: #B4994C;
		border-bottom: 1px solid #B4994C;
	}
	
	.happiness .inner .anchor-list li .category-name{
		width: 180px;
		color: #B4994C;
		text-align: center;
		font-size: 2.1rem;
		letter-spacing: 2px;
		border-bottom: 1px solid #B4994C;
		margin: 0 0 15px;
		padding: 0 0 15px;
	}
	.happiness .inner .anchor-list li a:hover .category-name{
		color: #1C9888;
		border-bottom: 1px solid #1C9888;
	}
	.happiness .inner .anchor-list li .icon{
		width: 15px;
		height: 15px;
		background: url(../img/downarrow_on.svg) 50% no-repeat;
		background-size: 100%;
		margin: 0 auto;
		position: relative;
		top:0;
		transition: top .3s;
	}
	.happiness .inner .anchor-list li a:hover .icon{
		top:10px;
	}
	.happiness .inner .anchor-list li a .icon img{
		transition: opacity .3s top 1s;
		
	}
	.happiness .inner .anchor-list li a:hover .icon img{
		opacity: 0;
	}
	
	
	/* Detail
	---------------------------------------*/ 
	
	.happiness .inner .detail .insta-list li{
		width: 100%;
		position: relative;
		background: #F2F4F4;
		padding-bottom: 80px;
	}
	.happiness .inner .detail .insta-list li:last-child{
		padding-bottom: 100px;
	}
	.happiness .inner .detail .insta-list li:nth-child(even){
		background: #FFFFFF;
	}
	.happiness .inner .detail .insta-list li .wrap{
		width: calc(100% - 40px);
		 max-width: 1000px;
		 margin: 0 auto;
		 position: relative;
	}
	.happiness .inner .detail .insta-list li .wrap .category-name{
		font-size: 2.7rem;
		color: #B4994C;
		letter-spacing: 2px;
		text-align: center;
		position: relative;
		top:-15px;
		margin: 0 0 60px;
	}
	
	.happiness .inner .detail .insta-list li .wrap iframe{
		width: 100%;
	}
	.happiness .inner .detail .insta-list li .wrap .letro-logo{
		width: 118px;
		position: absolute;
		bottom:0;
		right:0;

	}
	
	

}

@media screen and (min-width: 769px) and (max-width: 1100px){
	

	
	
}

@media screen and (max-width: 768px) {
	
	/*---------------------------------------
	 * MainVisual
	---------------------------------------*/ 
	
	.mainvisual {
		width: 100%;
		margin: 0 0 16vw;
	}
	.mainvisual .inner{
		width: 100%;
		position: relative;
	}
	.mainvisual .img{
		
		height: 100vw;
		background: url(../img/story_main_sp.jpg) 0 0 no-repeat;
		background-size: cover;
	}
	.mainvisual .box{
		width: calc(100% - 10.667vw);
		padding: 16vw 10.667vw 5.333vw 5.333vw;
		margin: -21.333vw 0 0;
		background: #FFFFFF;
		box-sizing: border-box;
	}
	.mainvisual .box .title{
		width: 63.467vw;
		margin: 0 auto 2.667vw;	
	}
	.mainvisual .box .read{
		line-height: 1.8;
	    font-size: 3.2vw;
	    text-align: justify;
	    margin: 0 0 4vw;
	}
	.mainvisual .box .icon span{
		display: inline-block;
	}
	.mainvisual .box .icon .youtube{
		width: 5.333vw;
		padding-left: 20px;
	}
	.mainvisual .box .icon .insta{
		width: 3.733vw;
	}


	/*---------------------------------------
	 * Movie Contents
	---------------------------------------*/ 
	
	.movie{
		width: 100%;
		background: #F2F4F4;
		padding: 0 0 21.333vw;
	}
	.movie .inner{
		width: calc(100% - 21.333vw);
		margin: 0 auto ;
	}
	.movie .inner .box{
		position: relative;
		top:-5.333vw;
		margin: 0 0 10.667vw;

	}
	.movie .inner .title{
		width: 62.933vw;
		margin: 0 auto 4vw;
	}	
	.movie .inner .sub-title{
		text-align: center;
		letter-spacing: 0.8vw;
		color: #B4994C;
		font-weight: 200;
		    margin-bottom: 10%;
	}
	.movie .inner .sub-title span{
		display: inline-block;
		width: 5.333vw;
		margin-right: 2.667vw;
	}
	
	
	/* Movie Grid
	---------------------------------------*/ 
	
	.movie .inner .movie-list{
		
		
	}
	.movie .inner .more-content{
		display: none;
	}
	.movie .inner .movie-list li{
		width: 100%;
		padding: 8vw 0 0;
	}
	
	
	/* MoviewItem
	---------------------------------------*/ 
	
	.movie .inner .movie-list li a{
		display: block;
	}
	.movie .inner .movie-list li .thumbnail{
		position: relative;
		background: #000000;
		width: 100%;
	}
	.movie .inner .movie-list li .thumbnail .img{
		overflow: hidden;
		
	}
	/*
	.movie .inner .movie-list li .thumbnail:hover .img {
		opacity: .3;
	}
	*/
	.movie .inner .movie-list li .thumbnail .play{
		width: 8.533vw;
		height: 8.533vw;
		position: absolute;
		top:0;
		left:0;
		right:0;
		bottom:0;
		margin: auto;
	}
	.movie .inner .movie-list .caption{
		color: #B4994C;
		margin: -9.333vw 0 0;
		position: relative;
		z-index: 1;
	}
	.movie .inner .movie-list .caption .num{
		font-size: 14.933vw;
		text-align: center;
		margin: 0 0 2.667vw;
	}
	.movie .inner .movie-list .caption .title{
		font-size: 3.2vw;
		text-align: center;
		letter-spacing: 0.8vw;
		line-height: 1.8;
	}
	
	/* MoreBtn
	---------------------------------------*/ 
	
	.movie .inner .more{
		font-size: 3.2vw;
		font-weight: 200;
		letter-spacing: 0.533vw;
		color: #B4994C;
		padding: 2.667vw 0;
		width: 46.667vw;
		border-radius: 13.333vw;
		border: 0.533vw solid #B4994C;
		text-align: center;
		margin: 8vw auto 0;
		transition: background .3s;
	}
	/*
	.movie .inner .more:hover{
		background: #B4994C;
		color:#FFFFFF;
	}
	*/
	
	
	/*---------------------------------------
	 * BrideHappiness
	---------------------------------------*/ 
	
	.happiness{
		width: 100%;
		background: #FFFFFF;
	}
	.happiness .inner{
		
		margin: 0 auto ;
	}
	.happiness .inner .box{
		position: relative;
		top:-5.333vw;
		margin: 0 0 5.333vw;

	}
	.happiness .inner .title{
		width: 68.267vw;
		margin: 0 auto 4vw;
	}	
	.happiness .inner .sub-title{
		text-align: center;
		letter-spacing: 0.8vw;
		color: #B4994C;
		font-weight: 200;
		margin: 0 0 5.333vw;
	}
	.happiness .inner .sub-title span{
		display: inline-block;
		width: 3.733vw;
		margin-right: 2.667vw;
	}
	.inner .read{
		padding: 0 5.333vw;
		font-size: 3.2vw;
		line-height: 2;
		text-align: center;
	}
	
	/* Anchor
	---------------------------------------*/ 
	
	.happiness .inner .anchor-list{
		width: calc(100% - 10.667vw);
		display: flex;
		justify-content: space-between;
		margin: 0 auto 16vw;
	}
	.happiness .inner .anchor-list li{
		width: 31%;	
	}
	.happiness .inner .anchor-list li a{
		display: block;
		
	}
	.happiness .inner .anchor-list li a:hover .category-name{
		color: #B4994C;
		border-bottom: 1px solid #B4994C;
	}
	
	.happiness .inner .anchor-list li .category-name{
		
		color: #B4994C;
		text-align: center;
		font-size: 3.733vw;
		letter-spacing: 0.267vw;
		border-bottom: 1px solid #B4994C;
		margin: 0 0 2.667vw;
		padding: 0 0 2.667vw;
	}
	/*
	.happiness .inner .anchor-list li a:hover .category-name{
		color: #1C9888;
		border-bottom: 1px solid #1C9888;
	}
	*/
	.happiness .inner .anchor-list li .icon{
		width: 4vw;
		height: 4vw;
		background: url(../img/downarrow_on.svg) 50% no-repeat;
		background-size: 100%;
		margin: 0 auto;
		position: relative;
		top:0;
		transition: top .3s;
	}
	/*
	.happiness .inner .anchor-list li a:hover .icon{
		top:2.667vw;
	}
	.happiness .inner .anchor-list li a .icon img{
		transition: opacity .3s top 1s;
		
	}
	.happiness .inner .anchor-list li a:hover .icon img{
		opacity: 0;
	}
	*/
	
	/* Detail
	---------------------------------------*/ 
	
	.happiness .inner .detail .insta-list li{
		width: 100%;
		position: relative;
		background: #F2F4F4;
		padding-bottom: 21.333vw;
	}
	.happiness .inner .detail .insta-list li:last-child{
		padding-bottom: 26.667vw;
	}
	.happiness .inner .detail .insta-list li:nth-child(even){
		background: #FFFFFF;
	}
	.happiness .inner .detail .insta-list li .wrap{
		width: calc(100% - 10.667vw);
		 max-width: 266.667vw;
		 margin: 0 auto;
		 position: relative;
	}
	.happiness .inner .detail .insta-list li .wrap .category-name{
		font-size: 7.2vw;
		color: #B4994C;
		letter-spacing: 0.533vw;
		text-align: center;
		position: relative;
		top:-4vw;
		margin: 0 0 16vw;
	}
	.happiness .inner .detail .insta-list li .wrap iframe{
		width: 100%;
	}
	.happiness .inner .detail .insta-list li .wrap .letro-logo{
		width: 31.467vw;
		position: absolute;
		bottom:0;
		right:0;
	}
	
	p.storyTel {
    text-align: center;
    color: #1C9888;
}	
}