/* INTRO */

#intro {
	padding-top: 87px;
	z-index: 1;
	background: #fff;
}
#intro .section-inner{
	background: url(../images/top_intro.jpg) 50% 0 no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
	background-attachment: fixed;
	color: #fff;
	overflow: hidden;
}
#intro .section-inner .leading-intro{
	font-size: 4.4rem;
	opacity: 0;
}
#intro .section-inner .sub-intro{
	font-size: 1.6rem;
	letter-spacing: 2px;
}
#intro .section-inner .leading-intro img{
	width: 60vmax;
}
#intro .section-inner .sub-intro img{
	width: 40vmax;
}
#intro .section-inner .sub-intro .aromate-intro{
	font-size: 13px;
	opacity: 0;
}

#intro .aromate-big{
	opacity: 0;
}
#intro .sub-intro .ruby{
	position: relative;
}
#intro .sub-intro .ruby:before{
	content: "アロマティザン";
	position: absolute;
	bottom: 100%;
	margin-bottom: 0;
	font-size: 13px;
	left: 0;
	right: 0;
	text-align: center;
	display: block;
}

/* ABOUT */
#about{
}
#about .section-inner,
#about .section-inner .section-content{
	position: relative;
}
#about .section-inner:before{
	content: '';
	position: absolute;
	right: 0;
	width: 45%;
	height: 100%;
	background: url(../images/about_section.jpg) left top;
	background-size: auto 100%;
}
#about .section-inner .main-text>span{
	font-size: 14px;
	margin-bottom: -10px;
	margin-left: 40px;
}
#about .btn{
	color: #fff;
	padding: 1.25rem 5rem;
	font-size: .6rem;
}
#about .btn:hover{
	background-color: #dcdcdc;
}

/* PRODUCT */

#product h2>img {
	width: 24vmax;
}

#product .section-inner{
	background: url(../images/product_section2.jpg) 50% 0 no-repeat;
	background-size: cover;
	position: relative;
	overflow: hidden;
}
#product h3 {
	text-align: center;
	font-size: 1.3rem;
	font-weight: bold;
	margin-top: 1rem;
}
#product .bottle{
	content: url(../images/bottle.png);
	position: absolute;
	width: 15%;
	left: 42%;
	top: 105%;
}
#product .item-box{
	position: relative;
}
#product .product-img{
	height: 190px;
}

/**
 *
 * CREATOR
 *
 */

#creator{
	color: #FFF;
}
#creator .section-inner{
	position: relative;
}
#creator .section-inner:before{
	content: '';
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50%;
	height: 100%;
	background: url(../images/profile_section.jpg);
	/*background: url(../images/profile_03.png);*/
	background-size: cover;
	background-repeat: no-repeat;
}
#creator .name-info {
	font-size: 1.6rem
}
#creator .name-info>span{
	font-size: 1rem;
	margin-left: 3rem;
}

/**
 *
 * SCENE
 *
 */

#scene .section-inner{
	background: url(../images/scene_section.jpg) 50% 0 no-repeat;
	background-size: cover;
	position: relative;
}
#scene #play-icon-center{
	position: absolute;
	top: calc(50% - 55px);
	left: calc(50% - 67px);
}
#scene #play-icon-center .play-icon{
	background: none;
	border: none;
	color: #FFF;
	font-weight: bold;
	font-size: .7rem;
	letter-spacing: 1px;
}
#scene #play-icon-center .play-icon > div.icon{
	border: 6px solid #fff;
	border-radius: 100%;
	width: 100px;
	height: 100px;
	margin-bottom: 10px;
	position: relative;
	cursor: pointer;
	transition: all .25s;
}
#scene #play-icon-center .play-icon > div.icon:before{
	content: '';
	position: absolute;
	left: calc(50% - 15px);
	top: calc(50% - 22px);
	width: 0; 
	height: 0; 
	border-top: 22px solid transparent;
	border-bottom: 22px solid transparent;
	border-left: 44px solid #fff;
	transition: all .25s;
}
#scene #play-icon-center .play-icon > div.icon:hover{
	transform: scale(1.1);
}
#vimeo-play{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.85);
	top: 0;
	left: 0;
	z-index: -3;
	opacity: 0;
	transition: all 1s;
}
#vimeo-play.modal-video{
	opacity: 1;
	z-index: 3;

}
#vimeo-play.modal-video .video-wrapper{
	position: relative;
}
#vimeo-play .close-video {
	cursor: pointer;
	transition: opacity 1.25s;
	position: absolute;
	right: 0;
	margin-top: -30px;
	width: 45px;
	height: 45px;
}
#vimeo-play.modal-video .close-video span{
	background-color: #fff;
	width: 2.5rem;
	display: block;
	height: 2px;
	transition: all 1s;
}
#vimeo-play.modal-video .close-video span:first-child{
	transform: rotate(45deg);
}
#vimeo-play.modal-video .close-video span:last-child{
	transform: rotate(-45deg);
	margin-top: -2px;
}

/**
 *
 * RECIPE
 *
 */

#recipe .section-inner{
	background: url(../images/recipe_section.jpg) 50% 50% no-repeat;
	background-size: cover;
	position: relative;
}
#recipe .box-left-side{
	background-color: rgba(255,255,255,0.7);
	height: 100%;
}
#recipe .box-left-side .list-decimal li{
	line-height: 2;
	vertical-align: baseline;
}
#recipe .list-before-char li{
	margin-left: 1rem;
	position: relative;
	padding-left: 0.5rem;
}
#recipe .list-before-char li:before{
	content: '注';
	position: absolute;
	left: -36px;
}
#recipe hr{
	display: block;
	width: 100%;
}
#recipe ul{
	height: 100%;
}

/**
 *
 * INFORMATION
 *
 */

#information .section-inner{
	overflow: hidden;
	position: relative;
}
#information .section-inner:after{
	content: '';
	width: 0;
	height: 0;
	border-style: solid;
	border-width: calc(100vh - 2.5rem) 0 0 calc(100vw - 6rem);
	border-color: transparent transparent transparent #ebebeb;
	position: absolute;
	bottom: 0;
	left: 0;
	top: 0;
}
#information .box-information{
	background-color: rgba(255,255,255,0.7);
	position: relative;
	z-index: 1;
	width: 100%;
}
#information h2{
	text-align: center;
	margin-top: -5.6rem;
}
#information .item-box .title{
	margin: 1.5rem 0 2rem;
}
#information .row > div .item-box{
	position: relative;
	height: 100%;
}
#information .row > div .item-box .date{
	font-size: 90%;
}
#information .row > div + div{
	border-left: 1px solid rgba(0,0,0,0.2);
}

/**
 *
 * SHOP
 *
 */

#shop .section-inner{
	background: url(../images/shop_section.jpg) 50% 0 no-repeat;
	background-size: cover;
	position: relative;
}

/**
 *
 * COMPANY
 *
 */

#company .section-inner{
	background: url(../images/company_section.jpg) 50% 0 no-repeat;
	background-size: 100% auto;
}
#company .section-inner .btn{
	padding: .75rem 2.5rem;
}
#company .section-inner .btn:hover{
	background-color: #dcdcdc;
	border:1px solid transparent;
}

/**
 *
 * CONTACT
 *
 */

#contact a:hover,
#contact a:visited{
	text-decoration: none!important;
}
#contact .section-inner > .d-flex{
	position: relative;
}
#contact .animate-name{
	color: #ededed;
	display: block;
	font-size: 10rem;
	font-size: 12vw;
	position: absolute;
	top: 45%;
	right: 55px;
	letter-spacing: 0;
	text-indent: 40px;
	width: 100%;
	font-weight: normal;
	text-align: right;
	line-height: 1;
}
#contact .animate-whisky-glass:after{
	content: '';
	background: url(../images/whisky_glass.png) no-repeat bottom right;
	position: absolute;
	bottom: 18%;
	right: 12%;
	width: 100%;
	height: 60%;
	background-size: auto 100%;
}
#contact.confirm-contact{
	padding-top: 5rem;
}
#contact.confirm-contact form{
	width: auto;
}
#confirm #contact .animate-whisky-glass:after {
	content: '';
	background: url(../images/whisky_glass.png) no-repeat bottom right;
	position: absolute;
	bottom: 20%;
	right: 15%;
	width: 50%;
	height: 65%;
	background-size: auto 100%;
}
#confirm #contact .animate-name {
	color: rgb(237, 237, 237);
	display: block;
	font-size: 10rem;
	font-size: 20vh;
	position: absolute;
	top: 30%;
	right: 55px;
	letter-spacing: 0;
	width: 100%;
	font-weight: normal;
	text-align: right;
	line-height: 1;
}

#confirm .sub .scrollable-content{
	height: 100%;
	padding-bottom: 6rem;
}

#confirm .content{
	font-size: .8rem;
}
#confirm .content .btn {
	padding: 1rem 4rem;
	font-size: .8rem;
}
#confirm .content h3{
	border-bottom: 1px solid;
	display: block;
	width: 60%;
}
#confirm .content h3>span {
	display: inline-block;
	background-color: rgb(255, 255, 255);
	position: relative;
	top: 20px;
	padding: 0 1rem;
}

/**
 *
 * FORM
 *
 */

.req{
	color: #cc0000;
}
form > div > label{
	width: 200px;
	margin-bottom: 0;
}
form > div > .input-wrap{
	width: calc(100% - 200px)
}
form > div > .input-wrap.input-two-column > .input > input{
	width: calc(100% - 45px);
}
form > div + div{
	margin-top: 1rem
}
form .input > input {
	padding: 10px 15px;
	border: 0;
}
form .input > input.input-error,
form .input > textarea.input-error{
	background-color: #ecd3d3;
}
form .input > span {
	width: 45px;
	display: inline-block;
}
form .input > textarea {
	padding: 10px 15px;
	border: 0;
	resize: none;
	height: 100px
}
form .btn.btn-submit{
	font-size: .8rem;
	padding: .75rem 3rem;
	font-weight: normal;
}

/**
 *
 * @Media min-width
 *
 */

@media (min-width: 769px){
	#aboutVis,
	#sceneVis,
	#companyVis{
		z-index: -10;
	}
	#about,
	#scene,
	#company{
		position: fixed;
		left:0;
		top:0;
		width: 100%;
		height: 100%;
	}
	#about{
		z-index: -1
	}
	#scene{
		z-index: -2
	}
	#company{
		z-index: -3
	}
	#information .box-information .btn-add-more .btn{
		padding: 1.45rem 6rem;
	}
	#about .desc{
		width: 52%;
	}
	#recipe,#product,#information{
		height: auto;
	}
	#information .section-inner{
		padding-top: 5rem!important;
		padding-bottom: 5rem!important;
	}

}

@media (min-width: 993px){
	#contact form{
		width: 65%;
	}
}

@media (min-width: 1200px){
	#product .row>div{
		padding-left: 2.5rem!important;
		padding-right: 2.5rem!important;
	}
	#information .box-information .btn-add-more{
		margin-bottom: -4.5rem;
	}
}

@media (min-width: 1441px){
	#intro .section-inner{
		background-size: 100% auto;
	}
	#product .item-box{
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	#information .section-inner{
		padding-top: 6rem!important;
	}
	#confirm #footer {
		position: absolute;
		width: 100%;
		left: 0;
		bottom: 0;
	}
}

@media (min-width: 1600px){
	#intro .section-inner .leading-intro img,
	#intro .section-inner .sub-intro img{
		width: auto;
	}
	#intro .section-inner .sub-intro .aromate-intro{
		font-size: 16px;
	}
	#about .section-inner h2>img,
	#about .section-inner .main-text>img {
		width: auto;
	}
	#about .btn{
		font-size: 14px;
	}
	#product h2>img{
		width: auto;
	}
	#confirm .sub #footer {
		position: absolute;
		width: 100%;
		bottom: 0;
	}
}

/**
 *
 * @Media max-width
 *
 */

@media(max-width: 1199px){
	#scene .section-inner,
	#recipe .section-inner{
		background-size: cover;
	}
	#intro .section-inner .leading-intro{
		font-size: 6.4vw;
	}
	#intro .section-inner .sub-intro{
		font-size: 3vw;
	}
	#intro .section-inner{
		background-attachment: scroll;
	}
	#information.h100vh{
		height: auto
	}
	#information h2{
		margin-top: 0;
		text-align: center;
		position: absolute;
		top: -4vw;
		width: 100%;
		left: 0;
	}
	#information .btn-add-more {
		margin-bottom: -30px;
	}
	#company .section-inner {
		background-size: cover;
		background-position: center bottom;
		background-repeat: no-repeat;
	}
	#contact .animate-name{
		top: 42%
	}
}
@media(min-width: 769px) and (max-width: 1199px){
	#scene #play-icon-center{
		left: 14vw;
	}
	#information .section-inner {
		padding-top: 5rem!important;
	}
}

@media(max-width: 992px){
	#product.h100vh{
		height: auto;
	}
	#product .section-inner{
		padding-bottom: 3rem;
	}
	#product .item-box {
		width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
	#product .bottle {
		width: 30%;
		left: 35%;
		top: 55%;
	}
	#information .section-inner:after{
		display: none;
	}
	#information .row > div + div{
		border-left: 0;
		border-top: 1px solid rgba(0,0,0,0.2);
		padding-top: 2rem;
		margin-top: 2rem;
	}
	iframe {
		width: 100%;
		height: 1040px;
	}
}

@media(max-width: 768px){
	#aboutVis,
	#sceneVis,
	#companyVis{
		height: 1px!important;
		padding-bottom: 0!important;
	}
	#intro .section-inner .leading-intro{
		margin-bottom: 20px;
	}
	#intro .section-inner .sub-intro .aromate-intro {
		font-size: 80%;
	}
	#intro .section-inner .sub-intro img {
		width: 50vmax;
	}
	#about .section-inner .main-text>span{
		font-size: 12px;
		margin-left: 2em;
	}
	#about .section-inner:before{
		width: 60%;
	}
	#about .btn {
		padding: 1.25rem 4rem;
		margin-bottom: 1.5rem;
	}
	#product .section-inner {
		padding-left: 3rem!important;
		padding-right: 3rem!important;
		padding-bottom: 3rem;
		background: url(../images/product_section_mobile.jpg) repeat-y;
		background-size: 100% auto;
	}
	#product .bottle {
		width: 30%;
		left: 35%;
		top: 55%;
	}
	#creator .section-inner:before{
		width: 65%;
	}
	#scene #play-icon-center{
		display: none!important;
	}
	#scene p{
		background: rgba(0,0,0,0.4);
		padding: 0.5em;
	}
	#information h2{
		top: 0vw;
	}
	#information .section-inner:after{
		display: none;
	}
	#information .box-information{
		padding-bottom: 2rem!important;
	}
	#information .btn-add-more {
		margin-bottom: 0;
		position: relative;
		bottom: -10px;
		left: 0;
		width: 100%;
	}
}

@media (min-width: 668px) and (orientation: portrait){
	#scene{
		padding: 3rem 0;
	}
}

@media (min-width: 481px) and (max-width: 768px){
	#creator .name-info>span{
		margin-left: 0;
		display: block;
	}
}

@media (max-width: 667px){
	#intro.section,
	#contact.section{
		padding-bottom: 0rem !important;
	}
	.section {
		padding-left: 0rem !important;
		padding-right: 0rem !important;
		padding-bottom: 1.5rem !important;
	}
	#about,
	#scene,
	#company{
		z-index: 0!important;
	}
}

@media (max-height: 667px){
	#about.h100vh,
	#product.h100vh,
	#creator.h100vh,
	#scene.h100vh,
	#recipe.h100vh,
	#shop.h100vh{
		height: auto;
	}
}

@media (max-width: 667px) and (orientation: landscape){
	#nav-menu ul li a {
		padding: 2px 3rem;
	}
	#about.h100vh,
	#product.h100vh,
	#creator.h100vh,
	#scene.h100vh,
	#recipe.h100vh,
	#shop.h100vh{
		height: auto;
	}
	#product .bottle {
		width: 24vh;
		left: calc(50% - 14vh);
		top: 45vh;
	}
	iframe {
		width: 100%;
		height: 960px;
	}
}

@media (max-width: 575px){
	body{
		font-size: 13px;
	}
	h2{
		font-size: 10vw;
	}
	header .side-toggle-menu,
	header .right-side{
		width: 2rem
	}
	#creator.h100vh,
	#recipe.h100vh{
		height: auto;
	}
	.main-text {
		font-size: 4.4vw;
	}
	#intro {
		padding-top: 60px!important;
	}
	#intro .section-inner .leading-intro {
		font-size: 8vw;
		margin-bottom: 6vmin;
	}
	#intro .section-inner .sub-intro {
		font-size: 3.6vw;
	}
	#intro .section-inner .sub-intro .ruby:before{
		font-size: 10px;
	}
	#about.section{
		overflow: auto;
		height: auto;
	}
	#about .section-inner{
		padding-top: 10%;
	}
	#about .section-inner:before{
		width: 100%;
		background-size: 100% auto;
		background-repeat: no-repeat;
		opacity: 1;
		position: relative;
		padding-top: 113%;
		height: auto;
	}
	#about .btn {
		padding: .75rem 1.5rem;
	}
	#about .section-inner .main-text>span {
		font-size: 11px;
		margin-left: 1.5em;
	}
	#product .section-inner {
		padding-left: 0rem!important; 
		padding-right: 0rem!important; 
		padding-bottom: 0rem; 
	}
	#product h3{
		font-size: 1.1rem;
	}
	#product .item-box{
		width: 240px;
	}
	#product .section-inner {
		background-size: 170% auto;
		background-position: center top;
	}
	#product .bottle {
		top: 25%;
	}
	#creator .section-inner{
		padding-top: 118%!important;
	}
	#creator .section-inner:before {
		width: 100%;
		background-size: 100% auto;
		background-repeat: no-repeat;
		opacity: 1;
		padding-top: 113%;
		height: auto;
	}
	#creator .section-inner h2{
		font-size: 8vmin;
	}
	#creator .name-info {
		font-size: 1.1rem;
	}
	#creator .name-info>span {
		margin-left: 1em;
		display: inline-block;
		font-size: 70%
	}
	#scene .section-inner p > br{
		display: none;
	}
	#recipe h2{
		font-size: 8vmin;
		margin-top: 35%;
	}
	#recipe .section-inner{
		background-position: center top;
		background-size: 150% auto;
	}
	#recipe .section-inner:before{
		display: block;
		position: absolute;
		content: "";
		top: 0;
		left: 0;
		right: 50%;
		height: 84.5vmin;
		background-color: rgba(255,255,255,0.7);
	}
	#recipe .box-left-side{
		background: none;
		position: relative;
	}
	#recipe .main-text {
		font-size: 4.2vmin;
		width: 42%;
	}
	#recipe .main-text + .list-decimal{
		margin-top: 45%;
	}
	#information .item-box .title {
		margin: 1rem 0;
	}
	#information h2 + .row{
		margin-top: 2rem;
	}
	#information .row > div + div .item-box{
		border-top: 1px solid rgba(0,0,0,0.2);
		padding-top: 1rem;
		margin-top: 1rem;
	}
	#information .row > div + div {
		padding-top: 0;
		margin-top: 0;
		border: 0;
	}
	#contact .animate-whisky-glass:after{
		display: none;
	}
	#contact .animate-name:before,
	#contact .animate-name:after{
		display: none;
	}
	iframe {
		width: 100%;
		height: 1040px;
	}
	form > div > label{
		margin-bottom: .5rem;
	}
	form > div > label,
	form > div > .input-wrap{
		width: 100%;
	}
	form .input > input {
		padding: 5px 8px;
		border: 0;
	}
	form .row-submit{
		text-align: center;
	}
	form .row-submit label{
		display: none;
	}
	form .btn.btn-submit{
		padding: .5rem 2rem;
	}
}

@media (max-width: 575px) and (orientation: portrait){
	#product .bottle {
		top: 40%;
		width: 120px;
	}
}

@media (max-width: 575px) and (orientation: landscape){
	#intro {
		padding-top: 60px!important;
	}
	#product .bottle {
		top: -5%;
	}
}

@media (max-width: 320px) and (orientation: portrait){
	#product .bottle {
		top: 35%;
		width: 120px;
		left: calc(50% - 60px);
	}
}

@media (max-width: 320px){
	#product .item-box {
		width: 100%;
	}
}