@charset "utf-8";

/******************************************************************** structure
*/

#header,
#container,
#footer { text-align: left;}

#wrapper { width: 100%; overflow: hidden;}

.inner { max-width: 1000px; margin: 0 auto;}
.inner:after { content: ""; clear: both; display: block;}

#header { background: url(../img/header_bg.jpg) no-repeat 50% 50%; background-size: cover; min-height: 640px;}
#header .inner { position: relative;}
#header h1 { margin: 0; padding: 0; position: absolute; width: 237px; left: 20px; top: 170px;}
#header dl { margin: 0; padding: 0;}
#header dt { width: 242px; position: absolute; left: 20px; top: 20px;}
#header dd { width: 177px; position: absolute; left: calc(50% - 30px); top: 250px;}

#footer { background: #000; color: #fff; padding-top: 30px;}
#footer .top { text-align: center; margin-bottom: 10px;}
#footer .top img { width: 70px;}
#footer ul { list-style: none; margin: 0 0 10px; padding: 0; text-align: center; font-size: 12px;}
#footer ul li { display: inline-block;}
#footer ul li:after { content: '｜'; margin-left: 0.5em;}
#footer ul li:first-child:before { content: '｜'; margin-right: 0.5em;}
#footer ul a { text-decoration: none; color: #fff;}
#footer .copy { font-size: 11px; text-align: center;}

.colorRed { color: red;}

.storyBox { padding-left: 20px; padding-right: 20px;}
.storyBox .pTitle { text-align: center; font-size: 38px; line-height: 1.4; margin: 0 0 10px; padding: 0;}
.storyBox p { font-size: 12px; margin: 0 0 10px; padding: 0; line-height: 2;}

.introView { background: url(../img/intro_bg.jpg) no-repeat 50% 50%; background-size: cover; position: relative; padding-top: 160px;}
.introView dl { margin: 0; padding: 0; text-align: center;}
.introView dt { margin-bottom: 16px;}
.introView dt img { width: 199px;}
.introView dd img { width: 254px;}
.introView dd { margin-bottom: 36px;}
.introView .bottomImage { padding: 0; width: 100%;}
.introView .specialPrice { position: absolute; top: -230px; left: 50%; transform: translateX(-50%); width: 382px; padding: 0;}

.movieView p { margin: 0; padding: 0;}

.ondemandView { background: url(../img/ondemand_bg.jpg) no-repeat 50% 50%; background-size: cover;}
.ondemandView dl { margin: 0; padding: 30px 0; text-align: center;}
.ondemandView dt { margin-bottom: 30px;}
.ondemandView dt img { width: 237px;}
.ondemandView dd img { width: 240px;}
.ondemandView p { margin: 0; padding: 0 0 30px; text-align: center;}
.ondemandView p img { width: 288px;}

.experienceView { background: url(../img/experience_bg.jpg) no-repeat 50% 50%; background-size: cover; padding: 30px 0;}
.experienceView .buttonWrap { margin: 0 0 30px; padding: 0; text-align: center;}
.experienceView .buttonWrap img { width: 285px;}

.experienceView .product { margin: 0; padding: 0; text-align: center;}
.experienceView .product img { height: 268px;width:auto;}

.prieresView { padding: 30px 0;}
.prieresView .bgWrap { background: url(../img/prieres_bg.png) no-repeat 0 0; background-size: contain;}
.prieresView dl { margin: 0; padding: 0;}

.prieresView .present { text-align: center; margin: 0 0 20px; padding: 0;}
.prieresView .present img { width: 340px;}

.prieresView .campaign { text-align: center; padding: 30px 0;}
.prieresView .campaign dt { margin-bottom: 20px;}
.prieresView .campaign dt img { width: 118px;}
.prieresView .campaign dd img { width: 240px;}

.prieresView .message { padding: 0 20px; margin-bottom: 20px;}
.prieresView .message dt,
.prieresView .message dd { background: #000; color: #fff; line-height: 1; margin-bottom: 10px; padding: 2px 2px;}
.prieresView .message dt { text-align: center; font-weight: bold; font-size: 28px;}
.prieresView .message dd { font-size: 10px;}

.prieresView .buttonWrap { text-align: center; margin: 0 0 20px; padding: 0;}
.prieresView .buttonWrap img { width: 285px;}

.conceptView { background: url(../img/concept_bg.jpg) no-repeat 50% 50%; background-size: cover; padding: 30px 0; margin-bottom: 30px;}
.conceptView h2 { text-align: center; margin: 0 0 10px; padding: 0;}
.conceptView h2 img { width: 64px;}
.conceptView .message { padding: 20px 0; margin: 0; text-align: center;}
.conceptView .message img { width: 252px;}
.conceptView .collection { padding: 20px 0; margin: 0; text-align: center;}
.conceptView .collection img { width: 247px;}

.productView { padding: 20px 0;}
.productView p { margin: 0; padding: 0;}
.productView h2 { text-align: center; margin-bottom: 20px;}
.productView h2 img { width: 300px;}
.productView dl.subTitle { text-align: center; margin: 0; padding: 0 0 70px; position: relative;}
.productView dl.subTitle img { width: 300px;}
.productView dl.subTitle dd { position: absolute; left: 0; bottom: -28px; width: 100%;}

.productView .story { padding: 0 35px 20px; position: relative;}
.productView h3 { text-align: center; margin-bottom: 20px;}
.productView h3 img { width: 59px;}
.productView p { font-size: 10px; margin-bottom: 15px;}
.productView dl { margin: 0; padding: 0; text-align: left;}
.productView dt { font-size: 14px;}
.productView dd { font-size: 8px;}

.productView .present { position: absolute; bottom: 5px; right: 35px; width: 120px;}

.productView .buttonWrap { text-align: center;}
.productView .buttonWrap img { width: 300px;}

.productView .presentLast { text-align: center; margin: 30px 0; padding: 0;}
.productView .presentLast img {	width: 340px;}

.formView { background: #E8E4E2; padding: 30px 0;}
.formView select { background-color: #fff; font-size: inherit; padding: 0 20px 0 5px; border-radius: 0; height: 1.8em;}
.formView select.fullSize { width: 100%;}
.formView input[type=text],
.formView input[type=tel],
.formView input[type=email] { padding: 0 5px; border-radius: 0;}
.formView h2 { font-size: 18px; font-weight: normal; text-align: center; border-bottom: 1px solid #B5B5B6; padding-bottom: 10px; margin-bottom: 30px;}
.formView dl { border-bottom: 1px dashed #B5B5B6;}
.formView dt { float: left; width: 100px; text-align: right; font-size: 12px;}
.formView dt strong { background: #E9546B; color: #fff; font-weight: normal; padding: 0 0.3em; margin-left: 5px;}
.formView dd { padding-left: 110px; padding-right: 10px; padding-bottom: 8px;}
.formView dd input[type=text],
.formView dd input[type=tel] { width: calc(100% - 12px);}
.formView dd span.attention { font-size: 8.5px;}
.formView dd.birthday select { width: calc(33.33% - 5px);}
.formView dd.name input[type=text] { width: calc(50% - 35px); margin-left: 5px;}
.formView dd.splitBox { display: flex;}
.formView dd.splitBox .box { width: calc(50% - 5px);}
.formView dd.splitBox .box:first-child { margin-right: 10px;}
.formView dd.splitBox select { width: 100%;}
.formView dd.zipcode input[type=tel] { width: 6em;}
.formView dd.product select.productSelect { width: calc(70% - 10px);}
.formView dd.product select.quantitySelect { width: calc(30% - 10px);}
.formView label { font-size: 12px;}

.formView .buttonWrap { text-align: center; margin: 0 0 20px; padding: 20px 0 0;}
.formView .buttonWrap img { width: 285px;}
.formView .error { padding: 0; color: red; font-size: 12px;}

.movieBannerView { text-align: center;}
.movieBannerView p { padding: 30px 0;}
.movieBannerView img { width: 280px;}

#payjp_checkout_box { position: fixed; top: -999px;}