@charset "utf-8";

/******************************************************************** 
*/

@media screen and (min-width: 500px){
	.introView .bottomImage img { width: 100%;}
	.movieView img { width: 100%;}

	.inner { padding-left: 10px; padding-right: 10px;}
	.ondemandView dt img,
	.ondemandView dd img,
	.ondemandView p img { width: auto;}

	.movieView .inner { padding-left: 0; padding-right: 0;}

	.experienceView .buttonWrap img { width: auto;}

	.storyBox .pTitle { font-size: 42px;}
	.storyBox p { font-size: 16px;}

	.introView .specialPrice { width: 80vw; max-width: 400px;}

	.introView dt img,
	.introView dd img { width: auto;}
	.introView .inner { padding-left: 0; padding-right: 0;}

	.prieresView .campaign dt img,
	.prieresView .campaign dd img,
	.prieresView .present img,
	.prieresView .buttonWrap img { width: auto;}

	.prieresView .message dd { font-size: 12px;}

	.conceptView h2 img,
	.conceptView .message img,
	.conceptView .collection img { width: auto;}

	.productView .inner { padding-left: 0; padding-right: 0;}
	.productView h2 img,
	.productView dl.subTitle img { width: auto;}

	.productView .image img { width: 100%;}

	.productView .buttonWrap { padding-left: 15px; padding-right: 15px;}
	.productView .buttonWrap img { width: auto;}

	.productView p { font-size: 14px;}

	.productView dt { font-size: 20px;}
	.productView dd { font-size: 12px;}
	.productView .present { width: 180px;}
	.productView .story { padding: 0 20px 20px;}
	.productView dl.subTitle { padding-bottom: 27vw;}
}

@media screen and (min-width: 800px){
	#header { min-height: unset; background: none;}
	#header dt { width: 363px; top: 40px;}
	#header h1 { top: 270px;}
	#header dd { width: 354px; left: calc(50% + 20px);}
	#header .inner { min-height: 1000px; background: url(../img/header_bg_wide.jpg) no-repeat 50% 50%; background-size: cover;}

	#footer ul { font-size: 14px;}

	.introView .specialPrice { max-width: 573px; top: -450px;}

	.storyBox .pTitle { font-size: 60px;}
	.storyBox { max-width: 550px; margin-left: auto; margin-right: auto;}
	.storyBox p { font-size: 20px;}

	.ondemandView dl { padding: 70px 0;}
	.ondemandView p { padding-bottom: 70px;}

	.experienceView { padding: 70px 0;}
	.experienceView .product img { height: 402px;}
	
	.prieresView { padding: 70px 0;}
	.prieresView .bgWrap { padding-top: 20px;}
	.prieresView .message dd { font-size: 22px; padding: 5px 10px; text-align: center;}

	.conceptView { padding: 70px 0;}
	.conceptView .collection { padding-bottom: 0;}

	.productView { padding: 35px 0;}
	.productView dl.subTitle { padding-bottom: 150px;}
	.productView dl.subTitle dd { bottom: -60px;}
	.productView h3 img { width: auto;}
	.productView p { font-size: 18px; margin-bottom: 30px;}
	.productView .story { max-width: 700px; margin-left: auto; margin-right: auto; padding-bottom: 50px;}
	.productView dt { font-size: 24px;}
	.productView dd { font-size: 18px;}
	.productView .present { width: 250px;}
	.productView .presentLast img { width: auto;}

	.movieBannerView img { width: auto;}
	.movieBannerView p { padding: 70px 0;}

	.formView { padding: 70px 0;}
	.formView .buttonWrap img { width: auto;}
	.formView dl { font-size: 16px;}
	.formView dt { font-size: 16px; width: 180px; padding-top: 5px;}
	.formView dd { padding-left: 200px;}
	.formView input[type="text"],
	.formView input[type="tel"] { padding: 5px;}
	.formView select { padding: 6px 20px 6px 5px;}
	.formView label { font-size: 20px;}
	.formView dd span.attention { font-size: 12px;}
	.formView dd.name input[type="text"] { width: calc(50% - 40px);}
	.formView dd.paddingTop { padding-top: 5px;}

	.formView .error { font-size: 14px;}

	.formView select { height: 2.4em;}
}