@charset "UTF-8";/* CSS Document */

:root {scroll-behavior: auto !important;}
body{margin:0px;background-color:#fff;font-family: 'Noto Sans JP', sans-serif;color:#333;height:100%; line-height:1.5;}
html{height:100%;}


.global-inner{width:90%; max-width:1200px; margin:0 auto;}

h2{font-family: 'Smokum', serif; color:#5A6E49; font-size:60px; text-align:center; margin-bottom:40px; position: relative;}
h2 img{display:block; width:100px; height:auto;margin: 0 auto;}
h2 span{display:block; font-size:15px; font-weight:bold;font-family: 'Noto Sans JP', sans-serif;}



@media screen and (max-width:768px){
h2{font-size:40px; }
}
/*==============================
キービジュアル
==============================*/
.kv-wrap{overflow:hidden; height:100%;}
.kv{ min-height: 100vh;background-repeat: no-repeat;background-size: cover;background-position: left 0px bottom;background-image: url(/images/kv.jpg);display:flex; transform-origin:bottom;}
.kv .right{width:50%; margin-left:auto;margin-right: 60px;}
.kv .cast-name{padding-top:70px; margin-bottom:20px; margin-right:20px;}
.kv .cast-name ul{display:flex;justify-content: center;}
.kv .cast-name ul li{margin-right:60px;}
.kv .cast-name ul li img{width:auto; height:70px;}
.kv .sns{ }
.kv .sns ul{display:flex;justify-content: center; }
.kv .sns ul li{ margin-left:10px; margin-right:10px;}
.kv .sns ul li i{font-size:40px; transition:0.5s all;}
.kv .sns ul li i:hover{ transform:scale(1.2,1.2);transition:0.2s all; color:#b94100;}
.kv .title{ text-align:center; margin-bottom:10px;}
.kv .title img{width:40%; height:auto; display:block; margin-left:auto; margin-right:auto; margin-bottom:20px;min-width: 500px;}
.kv .title img.small{width:40%; height:auto;min-width: 300px;}
.kv .title img:last-child{margin-bottom:0px;}
.kv .title h1{margin-bottom:20px;}

.kv-wrap .copy-area{display:flex;justify-content: space-between;position:absolute; bottom:10px;width:95%; left:2.5%; }
.kv-wrap .copy{background:#c2ad90; padding:10px 0px; text-align:center;width:42%;display:flex;justify-content: center;align-items: center;　}
.kv-wrap .copy img{width:95%;}

/*.kv-wrap .copy.ticket{width:14%; background-color:transparent; padding:0px;}*/
.kv-wrap .copy.ticket img{width:100%;}

.kv-wrap .copy{background:#c2ad90; padding:10px 0px; text-align:center;width:37%;display:flex;justify-content: center;align-items: center;　}
.kv-wrap .copy.ticket{width:12%; background-color:transparent; padding:0px;}



.kv-wrap .copy2{background:#FFF; padding:10px 0px; text-align:center;width:48%;display:flex;justify-content: center;align-items: center;　}
.kv-wrap .copy2 img{width:75%;}
.kv .copyright{ padding-top:10px;}
.kv .copyright img{width:30%; display:block; margin-left:auto; margin-right:auto; margin-bottom:5px; }
.kv .copyright img.small{}



@media screen and (max-height:800px){
.kv .title img{width:280px;min-width:400px; }

}
@media screen and (max-height:720px){
.kv .title img{width:260px;min-width:300px; }
}
@media screen and (max-height:620px){
.kv .title img{width:240px;min-width:200px; }
}

@media screen and (max-width:1400px){
.kv .right{width:55%; margin-left:auto;margin-right: 0px;}
}
@media screen and (max-width:910px){
.kv .title img{width:400px;min-width:400px; }
}





@media screen and (max-width:768px){
.kv{min-height:-webkit-fill-available;background-color:#000;background-image: url(/images/kv-sp.jpg);background-position:bottom; display:block;overflow:hidden;}
.kv .right{width:41%; position:relative; margin-right:20px; }
.kv .cast-name{width:100%; padding-top:65px; margin-bottom:20px;}
.kv .cast-name ul{justify-content: space-between; padding-left:20px; padding-right:20px;}
.kv .cast-name ul li{width:100%; margin-right:0px; text-align:center;}
.kv .cast-name ul li img{ width:100%; height:auto;}
.kv .title{ margin-bottom:5px; }
.kv .title img{width:100%; height:auto; min-width: auto;margin-bottom:10px;min-width: auto;}
.kv .title img.small{min-width: auto; width:100%;}

.kv .sns{bottom:90px;right:20px;}
.kv .sns ul{ }
.kv .sns ul li{ margin-left:5px; margin-right:5px;}

.kv .sns ul li i{ font-size:30px;}
.kv-wrap .copy-area{display:block;}
.kv-wrap .copy{bottom:80px;width:100%; display:block;/*background-color:transparent; padding:0px;*/}
.kv-wrap .copy img{/*width:100%;*/}
.kv-wrap .copy.ticket{width:100%; text-align:right; margin-bottom:10px;}
.kv-wrap .copy.ticket img{width:30%;}

.kv .copyright{}
.kv .copyright img{width:90%;}
}




@media screen and (min-width: 769px) {
header{height:50px;background: #201e1e ;position: fixed;width: 100%; z-index:2;background:#3f1d01;}
header #navArea{}
header #navArea .inner{width:100%;}
nav{display:flex;justify-content: space-between; padding-left:20px; padding-right:40px;}
nav ul{display:flex;}
nav ul.sns{align-items: center; padding-left:0px; padding-right:0px;}
nav ul.sns li{ color:#FFF; font-weight:500; white-space:nowrap;}
nav ul.sns li a{padding:0px 5px; color:#FFF;border-radius: 50%; height:36px; width:34px; padding: 18px;background-color: #FFF; margin-left:10px;display: flex;align-items: center;transition:0.5s all;justify-content: center;}
nav ul.sns i{font-size:24px; color:#222;transition:0.5s all;}

nav ul.sns li a:hover{ background-color:#b94100;transform: scale(1.2,1.2);}
nav ul.sns li a:hover i{transition:0.1s all; color:#FFF;}

nav ul.menu{justify-content: center; padding-left:0px; padding-right:0px;}
nav ul.menu li{font-size:18px;font-weight: 900; margin-left:30px;}
nav ul.menu li a{color:#FFF; display:block;display:flex;align-items: center; justify-content: center;height:50px; text-decoration:none;transition:0.5s all; }
nav ul.menu li:nth-child(1) a{width:60px;}
nav ul.menu li:nth-child(2) a{width:150px;}
nav ul.menu li:nth-child(3) a{width:80px;}
nav ul.menu li:nth-child(4) a{width:130px;}
nav ul.menu li:nth-child(5) a{width:70px;}
nav ul.menu li:nth-child(6) a{width:150px;}
nav ul.menu li:nth-child(7) a{width:80px;}
nav ul.menu li:nth-child(8) a{width:100px;}
nav ul.menu li:nth-child(9) a{width:70px;}



nav ul.menu li a:hover{ color:#b94100;transition:0.1s all;}
nav ul.menu li:last-child{border-right:none;}
nav ul.menu li a{position: relative;overflow: hidden;}
nav ul.menu li span{position: absolute;left: 50%;top:14px;transition: all .3s;transform: translate(-50%, 0);display: block;opacity:1;white-space: nowrap;}

nav ul.menu li span:nth-child(2){opacity:0;transform: translate(-50%,100%);}
nav ul.menu li:hover span:nth-child(1){opacity:0;transform: translate(-50%,-100%);}
nav ul.menu li:hover span:nth-child(2){opacity:1;transform: translate(-50%, 0);}
}

@media screen and (max-width: 1200px) {
nav{padding-left:20px; padding-right:20px;}
nav ul.menu li{font-size:16px;margin-left:10px;}
nav ul.sns i{font-size:18px; }
nav ul.sns li a{height:32px; width:32px; padding: 10px;margin-left: 5px;}
nav ul.menu li span{top:16px;}

}

@media screen and (max-width: 1300px) {
nav{padding-left:10px; padding-right:10px;}
nav ul.menu li{margin-left:15px;font-size:16px;}
nav ul.sns i{font-size:18px; }
nav ul.menu li:nth-child(1) a{width:50px;}
nav ul.menu li:nth-child(2) a{width:130px;}
nav ul.menu li:nth-child(3) a{width:70px;}
nav ul.menu li:nth-child(4) a{width:130px;}
nav ul.menu li:nth-child(5) a{width:70px;}
nav ul.menu li:nth-child(6) a{width:130px;}
nav ul.menu li:nth-child(7) a{width:70px;}
nav ul.menu li:nth-child(8) a{width:85px;}
nav ul.menu li:nth-child(9) a{width:70px;}
}



@media screen and (max-width: 1050px) {
nav{padding-left:10px; padding-right:10px;}
nav ul.menu li{margin-left:0px;font-size:14px;}
nav ul.sns i{font-size:18px; }
nav ul.menu li:nth-child(1) a{width:50px;}
nav ul.menu li:nth-child(2) a{width:120px;}
nav ul.menu li:nth-child(3) a{width:60px;}
nav ul.menu li:nth-child(4) a{width:120px;}
nav ul.menu li:nth-child(5) a{width:60px;}
nav ul.menu li:nth-child(6) a{width:130px;}
nav ul.menu li:nth-child(7) a{width:60px;}
nav ul.menu li:nth-child(8) a{width:90px;}
nav ul.menu li:nth-child(9) a{width:60px;}
}



/*====================
ハンバーガーメニュー
=====================*/
@media screen and (max-width: 768px) {
header{height:50px; background-color:#201e1e; position:fixed;width:100%; z-index:2;background:#3f1d01;}
nav {display: block;position: fixed;top: 0;right: -300px;bottom: 0;width: 300px;background-color:rgba(0,0,0,1.0);-webkit-overflow-scrolling: touch;transition: all 0.5s;z-index: 102;opacity: 0;}
.open nav {right: 0;opacity: 1;top:0px;width:50%;box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.08);}

nav ul{margin-bottom:20px;}
nav ul li a{ display:block; color:#b94100; }


.open nav{width:100%; padding-top:60px;}
nav {right: -220px;width: 220px;}

nav ul{padding-bottom:0px; margin-bottom:0px;}
nav ul li a{padding-top:5px; padding-bottom:5px;}

header ul.sns{display:flex;align-items: center; padding-left:10px; padding-right:0px; padding-top:5px;z-index: 104;position: fixed;}
header ul.sns li{ color:#FFF; font-weight:500; white-space:nowrap; line-height:1.2;}
header ul.sns li a{padding:0px 5px; color:#FFF;border-radius: 50%; height:32px; width:32px; padding: 10px;background-color: #FFF; margin-left:5px;display: flex;align-items: center;transition:0.5s all;justify-content: center;}
header ul.sns i{font-size:20px; color:#222;transition:0.5s all;}
header ul.sns li a:hover{ background-color:#b94100;transform: scale(1.2,1.2);}
header ul.sns li a:hover i{transition:0.1s all; color:#FFF;}
header nav .photo{width: 70%;max-width: 270px;margin-top: 0;margin-right: auto;margin-bottom: 20px;margin-left: auto;}
header nav img{width:100%; height:auto;}


nav ul.menu{padding-left:0px; padding-right:0px;}
nav ul.menu li{font-size:22px;font-weight: 900; text-align:center;}
nav ul.menu li a{color:#b94100;text-decoration:none; }

nav ul.menu li span:nth-child(2){ display:none;}
nav ul.menu li:nth-child(1) a{width:100%;}
nav ul.menu li:nth-child(2) a{width:100%;}
nav ul.menu li:nth-child(3) a{width:100%;}
nav ul.menu li:nth-child(4) a{width:100%;}
nav ul.menu li:nth-child(5) a{width:100%;}
nav ul.menu li:nth-child(6) a{width:100%;}
nav ul.menu li:nth-child(7) a{width:100%;}
nav ul.menu li:nth-child(8) a{width:100%;}
nav ul.menu li:nth-child(9) a{width:100%;}

/*============
ハンバーガーメニューのトグル
=============*/
.toggle_btn {display: block;position: fixed;top:10px; right:18px;width: 30px;height: 30px;transition: all .5s;cursor: pointer;z-index: 103;}
.toggle_btn p{font-size:12px;}
.toggle_btn span {display: block;position: absolute;left: 0;width: 30px;height: 2px;background-color: #FFF;border-radius: 4px;transition: all .5s;}
.toggle_btn span:nth-child(1) {top: 4px;}
.toggle_btn span:nth-child(2) {top: 14px;}
.toggle_btn span:nth-child(3) {bottom: 4px;}
.open .toggle_btn span {background-color: #b94100;}
.open .toggle_btn span:nth-child(1) {transform: translateY(10px) rotate(-315deg);}
.open .toggle_btn span:nth-child(2) {opacity: 0;}
.open .toggle_btn span:nth-child(3) {transform: translateY(-10px) rotate(315deg);}

/*============
ハンバーガーメニューのマスク
=============*/
#mask {display: none;transition: all .5s;}
.open #mask {display: block;position: fixed;top: 0;right: 0;width: 100%;height: 100%;opacity: .8;z-index: 101; }
}

/*====================
イントロダクション
=====================*/
.introduction{ background:#e4d6bb; line-height:1.7;padding-top:80px; padding-bottom:0px; overflow:hidden;position: relative;}
.introduction h2 img{width:100%;}
.introduction .copy{
	width: 90%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
}
.introduction .copy img{width:100%; height:auto;}

.introduction .photo{ margin-bottom:40px;}
.introduction .photo img{width:100%; height:auto;}
.introduction .text{text-align: center;font-size: 26px;font-weight: 900;color:#3d1e0b;width: 90%;min-width: 1000px;margin-right: auto;margin-left: auto;margin-bottom:20px;}
.introduction .text.big{font-size:40px; }
.introduction .text.small{font-size:20px; }
.introduction .text span{color:#B94100;}
.introduction .text img{width:70%;}
.introduction h2{text-align:center; margin-bottom:40px;}
.introduction .note{font-size:15px; color:#FFF; margin-top:40px;}
.introduction .foot{margin-top:60px;}
.introduction .foot ul{display:flex;}
.introduction .foot ul li{ width:25%; position:relative;}
.introduction .foot ul li .name{position:absolute;    bottom: 0px;
    color: #FFF;
    width: 100%;
    text-align: center;
   
    
}
.introduction .foot ul li .name span{ display:block;margin-left:20px; margin-right:20px; margin-bottom:10px;background: rgba(0, 0, 0, .7);padding: 5px; font-size:13px; font-weight:bold;}
.introduction .foot img{ width:100%; height:auto;}



@media screen and (max-width: 900px) {
.introduction .foot ul li .name span{font-size:11px;}
}



@media screen and (max-width: 768px) {
.introduction{padding-top:60px;}
.introduction h2{margin-bottom:20px; }
.introduction h2 img{ width:100%;}
.introduction .text{min-width: inherit; font-size:18px; width:100%; text-align:left;}
.introduction .text img{ width:100%; height:auto;}
.introduction .text.small{font-size:15px;}
.introduction .foot ul{flex-wrap: wrap;}
.introduction .foot ul li{ width:50%;}
.introduction .note{font-size:12px;line-height: 1.4;}
}

/*====================
ストーリー
=====================*/
.story{line-height:1.4;padding-top:80px; padding-bottom:0px; background-image:url(/images/story.jpg); background-repeat:no-repeat; background-size:cover; position:relative;background-attachment: fixed; overflow:hidden;}
.story:before{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%; background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, .1));}
.story .main-copy{font-family: 'Noto Serif JP', serif;color: #B94100; text-align:center; font-weight:900; font-size:40px; margin-bottom:40px;position: relative;}
.story .box{display:flex;justify-content: space-between; position:relative; z-index:1;}
.story .box.reverse{flex-direction: row-reverse;}
.story .box .item{ width:50%;}
.story .box .item .photo{height:100%;}
.story .box .item .photo img{width:100%; height:100%; object-fit:cover;}
.story .box .item .text{ padding:40px; background:#E7DFCB; font-weight:bold;}
.story .box .item .text span{color:#B94100;}
.story .box .item .text .note{font-size:12px; margin-top:20px; font-weight:normal;}
.story .box .item h3{margin-bottom:20px;}
.story .box .item h3 img{width:100%;}
.story .box .item h4{font-weight:900; color:#b94100; font-size:18px;margin-bottom:20px;}
.story .alert{background: #E7DFCB; color:#B94100;font-size:20px; padding:10px; text-align:center; font-weight:bold; margin-top:40px; border-radius:0px;    position: relative;}

@media screen and (max-width: 768px) {
.story{padding-top:60px; padding-bottom:0px; }
.story .main-copy{font-size:20px; margin-bottom:20px;}
.story .box{flex-wrap: wrap; margin-bottom:20px;}
.story .box.reverse{flex-direction: inherit;}
.story .box .item{ width:100%;}
.story .box .item .text{padding:20px;}
.story .alert{font-size:15px;}
}

/*====================
キャスト
=====================*/
.cast{ padding-top:80px; padding-bottom:80px;overflow: hidden;}
.cast .main-copy{font-family: 'Noto Serif JP', serif;color: #B94100; text-align:center; font-weight:900; font-size:40px; margin-bottom:40px;}
.cast .box{display:flex;}
.cast .box .item{width:33.333%; position: relative; border-right:solid 1px #FFF;}
.cast .box .item .photo{position:relative;}

.cast .box .item .photo img{width:100%; height:450px; object-fit:cover;object-position: top;}
.cast .box .item .text{ padding:20px;border-right:solid 1px #ccc;}
.cast .box .item .text .note{font-size:12px; margin-top:20px; font-weight:normal;}

.cast .box .item h3{font-size:20px; font-weight:bold; position: absolute; bottom: 0px; color:#FFF; width:100%; text-align:center; background:rgba(0, 0, 0, .8); padding:20px 0px; }
.cast .box .item h3 span{font-size:16px; margin-right:10px;}
.cast .box .item h3 span:nth-child(2){font-size:14px; margin-left:10px;}
.cast .box .item .copy{font-size:24px; font-weight:bold; position: absolute; left:0px; bottom: 0px; color:#FFF; background:rgba(185, 65, 0, .8); padding:20px; height:100%;writing-mode: vertical-rl; }

@media screen and (max-width: 768px) {
.cast{ padding-top:60px; padding-bottom:0px;}
.cast .main-copy{font-size:20px; margin-bottom:20px;}
.cast .box{flex-wrap: wrap; }
.cast .box .item{width:100%; border-right:none; }
.cast .box .item .copy{padding-top: 22px;padding-right: 10px;padding-bottom: 10px;padding-left: 10px;}
.cast .box .item h3{padding:15px 0px;}
.cast .box .item .text{background-color: #F1F1F1;}
.cast .box .item .photo img{height:300px;}
}

/*====================
コメント
=====================*/
.comment{ padding-top:80px; padding-bottom:40px;overflow: hidden; background:#e7dfcb;}
.comment .main-copy{font-family: 'Noto Serif JP', serif;color: #B94100; text-align:center; font-weight:900; font-size:40px; margin-bottom:80px;}
.comment .box{
	max-width: 1000px;
	margin-top: 80px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
}
.comment .box .item{position: relative;display: flex;background-color: #FAF8F3;padding:20px;margin-bottom:100px;}
.comment .box .item .photo{position:relative; width:200px;}

.comment .box .item .photo img{width:200px; height:200px; object-fit:cover;margin-top: -40px;margin-left: -40px;}
.comment .box .item .text{ }

.comment .box .item h3{color: #000;position: absolute;top: -25px;left: -25px;clip-path: polygon(0% 100%, 33px 0%, 100% 0%, 100% 100%);font-size: 24px;background: #b94100;color:#FFF;
height: 50px;line-height: 50px;text-align: center;z-index:1; font-weight:bold;padding: 0 45px;}
.comment .box .item h3 span{font-size:17px; margin-left:10px;}

.comment .box .item .title{font-size: 24px;font-weight: bold;padding-top: 0px;padding-bottom: 20px;}
.comment .box .item .content{
	padding-top: 40px;
	padding-right: 40px;
	padding-bottom: 20px;
	padding-left: 40px;
}
@media screen and (max-width: 768px) {
.comment .box{ width:90%;}
.comment .main-copy{font-size:20px; margin-bottom:60px;}

.comment .box .item{display: block;margin-bottom:60px;}
.comment .box .item h3{font-size:18px;height: auto;left:0px; display:block;clip-path: unset; line-height:1.5; padding:15px; position:static;}
.comment .box .item h3 span{font-size:13px; display:block;margin-left:0px;}
.comment .box .item .photo{width: 150px;margin-top: 40px;margin-right: auto;margin-bottom: 20px;margin-left: auto;}
.comment .box .item .photo img{margin-top: 0px;margin-left: 0px; height:150px; width:150px;}
.comment .box .item .content{    padding:10px 0px;}
}

/*====================
海外評
=====================*/
.review{ padding-top:40px; padding-bottom:40px;overflow: hidden; 	
	margin-right: 40px;
	margin-left: 40px;
}
.review h3{margin-bottom:20px; text-align:center;}
.review h3 img{width:300px;}
.review .box{display:flex;flex-wrap: wrap;justify-content: center; margin-bottom:40px;}
.review .box .item{padding:10px; width:320px;margin-right:10px; margin-bottom:20px;}
.review .box .item .text {
    position: relative;
    padding: 0.5rem;
    background-color: #e7dfcb;
    box-shadow: 0 0 0 10px #e7dfcb;
    border-left: 10px dotted white;
	
	line-height: 2.3;

}

.review .box .item .text::before {
    position: absolute;
    top: 2.5rem;
    left: 0.5rem;
    width: calc(100% - 1rem);
    height: calc(100% - 2rem);
    background-image: repeating-linear-gradient(#bcbcbc 0 1px, transparent 1px 37px);
    content: '';
}

.review .box .item .text::after {
position: absolute;
    bottom: 0.5rem;
    right: 0;
    width: 50%;
    height: 20%;
    box-shadow: 0 15px 15px #333;
    transform: rotate(4deg);
    content: '';
    z-index: -1;
}
.review .box .item .text h4{font-weight:bold; font-size:14px;background: #b94100;    color: #FFF; text-align:center;}

@media screen and (max-width: 768px) {
.review{margin-left:10px; margin-right:10px;}
.review .box{display:block;}
.review .box .item{width:100%;margin-right:0px; margin-bottom:20px;}
}



/*====================
通販
=====================*/
.shopping{line-height:1.4;padding-top:80px; padding-bottom:0px; background-image:url(/images/story-photo06.jpg); background-repeat:no-repeat; background-size:cover; position:relative;background-attachment: fixed; overflow:hidden;}
.shopping:before{content: ""; position: absolute;top: 0;left: 0;width: 100%;height: 100%; background: linear-gradient(rgba(255, 255, 255, 1),rgba(255, 255, 255, .3));}
.shopping .main-copy{font-family: 'Noto Serif JP', serif;color: #B94100; text-align:center; font-weight:900; font-size:40px; margin-bottom:40px;position: relative;}
.shopping .box{
	display: flex;
	justify-content: space-between;
	position: relative;
	z-index: 1;
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
}
.shopping .box .item{ width:49%;}
.shopping .box .item .photo img{width:100%; }
.shopping .box .item .text{ padding:20px; background:#E7DFCB; font-weight:bold;}
.shopping .box .item .text span{color:#B94100;}
.shopping .box .item .text .note{font-size:12px; margin-top:20px; font-weight:normal;}
.shopping .box .item h3{margin-bottom:20px;}
.shopping .box .item h3 img{width:100%;}
.shopping .box .item h4{font-weight:900; color:#b94100; font-size:18px;margin-bottom:20px;}

.shopping .btn{position:relative;z-index: 0;}
.shopping .btn a{ display:block; background:#b94100; width:300px; margin:0 auto;position:relative; color:#FFF; padding:10px 20px; text-align:center; font-size:20px; }
.shopping .btn a i{margin-left:20px;}
/*ボタン内spanの形状*/
.btn-animation span {
  position: relative;
  z-index: 3;/*z-indexの数値をあげて文字を背景よりも手前に表示*/
}

.btn-animation:hover span{
  color:#fff !important;
}



/*== 背景が流れる（左から右） */
.bgleft:before {
  content: '';
    /*絶対配置で位置を指定*/
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
    /*色や形状*/
  background:#3f1d01;/*背景色*/
  width: 100%;
  height: 100%;
    /*アニメーション*/
  transition: transform .1s cubic-bezier(0.8, 0, 0.2, 1) 0s;
  transform: scale(0, 1);
  transform-origin: left top;
}

/*hoverした際の形状*/
.bgleft:hover:before{
  transform-origin:left top;
  transform:scale(1, 1);
  transition: transform .3s cubic-bezier(0.8, 0, 0.2, 1) 0s;
}



@media screen and (max-width: 768px) {
.shopping{padding-top:60px; padding-bottom:0px; }
.shopping .main-copy{font-size:20px; margin-bottom:20px;}
.shopping .box{ display:block; width:100%; }
.shopping .box .item{ width:100%;margin-bottom:20px;}
.shopping .box .item .text{padding:20px;}
}





/*==============================
場面写真集
==============================*/

.foot-photo{margin-top:60px; overflow:hidden;}
.foot-photo ul{display:flex;flex-wrap: wrap;}
.foot-photo ul li{ width:20%;}
.foot-photo img{ width:100%; width: 100%;
    height: 100%;
    object-fit: cover;}

.foot-photo h3 {
	font-weight: 900;
	color: #fff;
	position: relative;
	z-index: 0;
	width: 400px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 10px;
	font-size: 30px;
	padding-top: 10px;
	padding-right: 0px;
	padding-bottom: 10px;
	padding-left: 110px;  
}
.foot-photo h3::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #B94100;
  transform: skew(-20deg);
  z-index: -1;
}
.foot-photo h3::after {
  content: '';
  position: absolute;
  border-left: 20px double #fff;
  height: 100%;
  top: 0;
  right: 50px;
  transform: skew(-20deg);
}



@media screen and (max-width: 768px) {
.foot-photo ul{flex-wrap: wrap;}
.foot-photo ul li{ width:33.3%;}
.foot-photo h3{font-size:22px;width: 300px;padding-left: 80px;  }
}

/*==============================
プレゼント
==============================*/

#postit_box .postit {
    position: absolute;
    margin:0; padding:15px;
transform: rotate(0deg);
    background-color:#faf7e0;
    color:#3d1e0b;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.25);
    box-sizing:border-box;
	top:13%;
	left:23%;
    min-width:220px;
	width:220px;
	text-align:left;
}
/* クリップ */
#postit_box .postit::after {
    content: url(/images/tape.png);
    position: absolute;
    top:-18px; left: 27%;
}
/* 下線 */
#postit_box .postit span {
    display:block;
    border-bottom:1px dotted #908a60;
	font-size:13px;
}
#postit_box img{width:60%; margin-top:20px; margin-left:auto; margin-right:auto;}






#postit_box2 .postit {
    position: absolute;
    margin:0; padding:15px;
transform: rotate(0deg);
    background-color:#faf7e0;
    color:#3d1e0b;
    box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.25);
    box-sizing:border-box;
	top:23%;
	left:40%;
    min-width:230px;
	width:230px;
	text-align:left;
}
/* クリップ */
#postit_box2 .postit::after {
    content: url(/images/tape.png);
    position: absolute;
    top:-18px; left: 27%;
}
/* 下線 */
#postit_box2 .postit span {
    display:block;
    border-bottom:1px dotted #908a60;
		font-size:13px;

}
#postit_box2 img{width:50%; margin-top:20px;}



@media screen and (max-width: 768px) {
#postit_box{background:	#e4d6bb; padding-top:20px;}
#postit_box .postit{
	width: 90%;
	min-width: auto;
	position: static;
	transform: rotate(0deg);
	margin-top: 00px;
	margin-right: auto;
	margin-bottom: 00px;
	margin-left: auto;
}
#postit_box2{background:	#e4d6bb; padding-top:20px;}
#postit_box2 .postit{
	width: 90%;
	min-width: auto;
	position: static;
	transform: rotate(0deg);
	margin-top: 00px;
	margin-right: auto;
	margin-bottom: 00px;
	margin-left: auto;
}

}
/*==============================
フッター
==============================*/
footer{ padding:60px 0px;}
footer .logo{
	width: 200px;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 40px;
	margin-left: auto;
}
footer .logo img{width:100%; height:auto;}
footer .sns-gadget{display:flex; width:255px; margin-left:auto; margin-right:auto; margin-bottom:20px;justify-content: space-between; line-height:1;}
footer .roadshow{width:1000px;	margin-top: 40px;	margin-right: auto;	margin-bottom: 40px;	margin-left: auto;}
footer .roadshow img{width:100%; height:auto;}

@media screen and (max-width: 768px) {
footer .roadshow{width:90%;	}
}
/*==============================
コピーライト
==============================*/
.copyright{
	text-align: center;
	font-size: 12px;
	padding-top: 40px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
}


/*==============================
ローディング
==============================*/
body::before,body::after{position: fixed;z-index: 1;top: -15%;display: block;visibility: hidden;width: 50%;height: 130%;content: '';background-color: #222;}
body::before{left: 0;}
body::after{right: 0; }

@keyframes curtain_l{
0%{visibility: visible;}
20%{transform: rotate(0deg) translateX(0%); background-color: #222;}
80%{opacity: 1;}
100%{transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@keyframes curtain_r{
0%{ visibility: visible;}
20%{transform: rotate(0deg) translateX(0%); background-color: #222;}
80%{opacity: 1;}
100%{transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}

.scroll-zoom {
  transform-origin: center center;
  transform: scale(1);
}

.mincho{ font-family: 'Zen Old Mincho', serif;}
.text-left{text-align:left !important;}


/*==============================
ページトップ
==============================*/
#page_top {position: fixed;bottom: 30px;left: calc(100vw - 100px); display:none; z-index:2;}
#page_top a {background-color: #999;color: #fff;text-align: center;text-decoration: none;font-size: 24px;padding-top: 6px;padding-right: 15px;padding-bottom: 10px;padding-left: 15px;}
#page_top a:hover {background-color: #666;text-decoration: none;}

@media screen and (max-width: 768px) {
#page_top {bottom: 15px;left:auto; right:15px; }
#page_top a{font-size: 20px;padding-top: 3px;padding-right: 8px;padding-bottom: 5px;padding-left: 8px;}
}




/*infoエリアをはじめは非表示*/
#trailer{display: none;}
.youtube {width: 100%;aspect-ratio: 16 / 9;}
.youtube iframe {width: 100%;height: 100%;}

@media only screen and ( max-width: 768px ) {
iframe {width: 100%;}
}



.modaal-container{width: 800px; background-color:transparent;}
.modaal-content-container{padding:0px;}
.modaal-close:after, 
.modaal-close:before{background:#ccc;
}

.modaal-close:focus:after,
.modaal-close:focus:before,
.modaal-close:hover:after,
.modaal-close:hover:before{background:#666;}


@media only screen and ( max-width: 768px ) {
.modaal-container{width: 100%;}
}

.text-brown{color:#3d1e0b !important;}

@media screen and (max-width: 768px) {
.pc{display:none !important;}
}

@media screen and (min-width: 769px) {
.sp{display:none !important;} 
}