@charset "UTF-8";
#jr-awbag {  color: #4B4440;}

/* animation */
@keyframes BottomIn {0%   { opacity: 0; transform: translateY(40px);} 100% { opacity: 1; transform: translateY(0);}}
@keyframes LeftIn { 0%   { opacity: 0; transform: translateX(-80px);} 100% { opacity: 1; transform: translateX(0);}}
@keyframes RightIn {0% { opacity: 0; transform: translateX(80px);}100% { opacity: 1; transform: translateX(0);}}
@keyframes FadeIn {0%   { opacity: 0;}100% { opacity: 100%;}}
#jr-awbag .bottomIn {opacity: 0;transform: translateY(40px);}
#jr-awbag .animation-start.bottomIn {animation-duration: 1.2s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-name: BottomIn;}
#jr-awbag .leftIn {opacity: 0;transform: translateX(-80px);}
#jr-awbag .animation-start.leftIn {animation-duration: 1s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-name: LeftIn;}
#jr-awbag .rightIn {opacity: 0;transform: translateX(80px);}
#jr-awbag .animation-start.rightIn {animation-duration: 1s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-name: RightIn;}
#jr-awbag .fadeIn {opacity: 0;}
#jr-awbag .animation-start.fadeIn {animation-duration: 1.5s;animation-fill-mode: forwards;animation-timing-function: ease-in-out;animation-name: FadeIn;}

.bg01 {background: #E1DACA;}
.bg02 {background: #C7C2AA;}
.bg03 {background: #95908B;}
.bg04 {background: #BFA99A;}
.bg05 {background: #E1DACA;}
.bg06 {background: #C7C2AA;}
.bg07 {background: #94908B;}

/* ==========================
   PC
========================== */
html[data-browse-mode="P"] .pane-left-menu { display: none;}
html[data-browse-mode="P"] .pane-contents .container { width: 100%;}
html[data-browse-mode="P"] .pane-main { margin-top: 0;}
html[data-browse-mode="P"] #jr-awbag .sp { display: none;}
html[data-browse-mode="P"] #jr-awbag h1 { margin: 0;}
html[data-browse-mode="P"] #jr-awbag h1 img { width: 100%;}
html[data-browse-mode="P"] #jr-awbag .item {position: relative; padding: 55px 0px 90px 0px ;}
html[data-browse-mode="P"] #jr-awbag .item .inner { width: 1200px; margin: 0 auto; display: flex; justify-content: space-between;}
html[data-browse-mode="P"] #jr-awbag .item:nth-child(even) .inner { flex-direction: row-reverse;}
html[data-browse-mode="P"] #jr-awbag .item .img { width: 613px; position: relative; z-index: 1;}
html[data-browse-mode="P"] #jr-awbag .item .img > img { width: 600px;}
html[data-browse-mode="P"] #jr-awbag .item .detail {
background-color:#FFF;
position: relative;
top: 60px;
left:-100px;
max-width: 640px;
height: 392px;
box-sizing: border-box;
z-index: 2; 
padding: 50px;
}
html[
data-browse-mode="P"] #jr-awbag .item:nth-child(even) .detail {
background-color:#FFF;
position: relative;
top: 165px;
left:100px;
max-width: 640px;
height: 392px;
box-sizing: border-box;
z-index: 2; 
padding: 50px;
}
html[
data-browse-mode="P"] #jr-awbag .item h2 { margin: 0 0 25px;
font-family: "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ 明朝", serif;
font-size:36px;
border-bottom:#313131 solid 1px;
}
html[data-browse-mode="P"] #jr-awbag .item h2 a {text-decoration:none;}
html[data-browse-mode="P"] #jr-awbag .item h2 span,
html[data-browse-mode="P"] #jr-awbag .item h2 em{
display: block;
font-family: "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", sans-serif;
font-size:14px;
}
html[data-browse-mode="P"] #jr-awbag .item h2 em{
padding-top:10px;
padding-bottom:10px;
color:#A1A1A1;
}
html[data-browse-mode="P"] #jr-awbag .item h3 { margin: 0 0 15px; font-size: 20px;font-weight:bold;}
html[data-browse-mode="P"] #jr-awbag .item .comment {width:100%;min-height: 120px;margin: 0 0 20px;font-size: 16px;line-height: 1.9;}
html[data-browse-mode="P"] #jr-awbag a:hover { opacity: .8;}
html[data-browse-mode="P"] #jr-awbag .item .btn_store a {
position: relative;
top: 70px;
left:185px;
display: inline-block;
text-align:center;
background-color:#584738;
font-family: "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ 明朝", serif;
color:#E1DACA;
font-size:18px;
font-weight:bold;
text-decoration:none;
padding:5px;
border-radius:50px;
width:146px;
}
@media only screen and (min-width: 769px) {
.block-event-page--goods {
width: 1200px;
margin: 0 auto;
}
.block-goods-detail-j--items li {
width: 16%;
}
}

/* ==========================
   SP
========================== */
html[data-browse-mode="S"] #jr-awbag .pc {display: none;}
html[data-browse-mode="S"] #jr-awbag {overflow-x: hidden;}
html[data-browse-mode="S"] #jr-awbag h1 { padding: 0;}
html[data-browse-mode="S"] #jr-awbag .item {padding-top:60px;padding-bottom:120px;}
html[data-browse-mode="S"] #jr-awbag .item .inner { 
position: relative;
}

html[data-browse-mode="S"] #jr-awbag .item .img {
width:80%;
position: relative;
top: 0;
}
html[data-browse-mode="S"] #jr-awbag .item:nth-child(odd)  .img {
margin-left: auto;
margin-right: 20%

}
html[data-browse-mode="S"] #jr-awbag .item:nth-child(even)  .img {
margin-left: 20%;
margin-right: auto;
}
html[data-browse-mode="S"] #jr-awbag .item .detail {
background-color:#FFF;
position: relative;
top: -20px;
left:5%;
max-width: 95%;
box-sizing: border-box;
z-index: 2; 
padding: 28px;
}

html[data-browse-mode="S"] #jr-awbag .item:nth-child(even) .detail {
left: auto; 
right:0%;
}

html[data-browse-mode="S"] #jr-awbag .item h2 { 
margin: 0 0 25px;
font-family: "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ 明朝", serif;
font-size:28px;
border-bottom:#313131 solid 1px;
}
html[data-browse-mode="S"] #jr-awbag .item h2 a {text-decoration:none;}
html[data-browse-mode="S"] #jr-awbag .item h2 span,
html[data-browse-mode="S"] #jr-awbag .item h2 em{
display: block;
font-family: "Yu Gothic", "游ゴシック体", "YuGothic", "メイリオ", sans-serif;
font-size:12px;
font-weight:normal;
}
html[data-browse-mode="S"] #jr-awbag .item h2 em{
font-style: normal;
padding-top:10px;
padding-bottom:10px;
color:#A1A1A1;
}
html[data-browse-mode="S"] #jr-awbag .item h3 { padding: 0; margin: 0 0 5px; font-size: 16px; font-weight: bold;padding-bottom:10px;}
html[data-browse-mode="S"] #jr-awbag .item .comment {font-size: 14px;line-height: 2;}

html[data-browse-mode="S"] #jr-awbag .item .btn_store {
position:relative;
height:1px;
top:62px;
text-align: center;
}
html[data-browse-mode="S"] #jr-awbag .item .btn_store a {text-align:center;background-color:#584738;font-family: "Yu Mincho", "游明朝体", "YuMincho", "ＭＳ 明朝", serif;color:#E1DACA;font-size:18px;font-weight:bold;text-decoration:none;border-radius:50px;padding: 8px 30px 5px;}