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

/****************************************
clearfix
*****************************************/
.cf:before,
.cf:after {
display: table;
content: "";
}
.cf:after {
clear: both;
}
.cf {
zoom: 1;
}
.section .explan .block dl:after,
.section .box:after,
.section .item:after,
.cols:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.section .explan .block dl,
.section .box,
.section .item,
.cols {
zoom: 1;
}
#contents {
font-family: 'Lato','Noto Sans JP', sans-serif;
font-weight: 400;
font-feature-settings: "palt";
-webkit-font-feature-settings: "palt";
letter-spacing: 0.0em;
text-align: center;
}
#pageBody {
background: none;
zoom: 100%;
overflow: hidden;
}
/****************************************
#mainVisual
*****************************************/
#mainVisual {
text-align: center;
}
#mainVisual .vis {
position: relative;
background: url(../img/title_bg.jpg) no-repeat center top;
background-size: 375px 450px;
margin: 0 auto;
width: 375px;
height: 450px;
overflow: hidden;
}
#mainVisual h1 {
padding: 49px 0 0 0;
font-weight: 300;
font-size: 30px;
line-height: 1.5;
text-align: center;
}
#mainVisual h1 span {
background-color: rgba(255,255,255,0.75);
padding: 1px 10px 1px 10px;
}

/****************************************
#itemList
*****************************************/
#itemList {}
#itemList .head {
background: url("../img/lst_bg.png") no-repeat center -27px;
background-size: 375px auto;
padding: 40px 0 30px 0;
}
#itemList .head h2 {
margin-bottom: 13px;
font-weight: 400;
font-size: 30px;
line-height: 1.5;
text-align: center;
color: #553322;
}
#itemList .head p {
margin: 0 auto;
width: 330px;
font-weight: 400;
font-size: 14px;
line-height: 2;
text-align: left;
}
#itemList .block {
position: relative;
box-sizing: border-box;
background-color: #dbeddb;
padding-bottom: 30px;
}
#itemList #BLK-g8064 {
background-color: #f9e7b8;
}
#itemList #BLK-g8057 {
background-color: #ededd5;
}
#itemList #BLK-g8061 {
background-color: #e7e1f3;
}
#itemList #BLK-g8059 {
background-color: #f9dbe7;
}
#itemList #BLK-g8062 {
background-color: #f9e1d0;
}
#itemList #BLK-g8060 {
background-color: #dbefef;
}
#itemList #BLK-g8065 {
background-color: #dbefe6;
}
#itemList .catch {
background-color: #66aa66;
padding: 0 20px;
font-weight: 400;
font-size: 16px;
line-height: 44px;
white-space: nowrap;
text-align: center;
color: #fff;
}
#itemList #BLK-g8064 .catch {
background-color: #ee8800;
}
#itemList #BLK-g8057 .catch {
background-color: #a3a349;
}
#itemList #BLK-g8061 .catch {
background-color: #7766aa;
}
#itemList #BLK-g8059 .catch {
background-color: #ee7799;
}
#itemList #BLK-g8062 .catch {
background-color: #ee7744;
}
#itemList #BLK-g8060 .catch {
background-color: #00bbbb;
}
#itemList #BLK-g8065 .catch {
background-color: #11aa99;
}
#itemList .set {
margin: 0 auto;
padding: 20px 0 0 0;
width: 330px;
}
#itemList .image {
float: left;
padding-top: 9px;
}
#itemList .image img {
width: 89px;
height: auto;
}
#itemList .pack {
margin-left: 115px;
padding: 5px 0 0 0;
text-align: left;
}
#itemList h3 {
margin-bottom: 6px;
font-weight: 500;
font-size: 16px;
}
#itemList p {
font-weight: 400;
font-size: 14px;
line-height: 1.86;
letter-spacing: 0.06em;
}
#itemList p.capacity {
margin-top: 14px;
font-size: 12px;
line-height: 1.67;
}
#itemList p.price {
font-size: 12px;
line-height: 1.67;
}
#itemList div.price {
position: relative;
padding-top: 8px;
}
#itemList div.price .special {
margin-top: -5px;
font-weight: 500;
font-size: 12px;
line-height: 1.3;
color: #ee0000;
}
#itemList div.price .special span {
font-weight: 700;
font-size: 16px;
}
#itemList div.price .normal {
margin-top: 1px;
font-size: 12px;
}
#itemList div.price .off {
position: absolute;
left: 155px;
top: 45px;
}
#itemList .component {
background-color: rgba(255,255,255,0.75);
border-radius: 3px;
margin: 25px auto 0 auto;
padding: 10px 0;
width: 330px;
text-align: center;
}
#itemList .component h4 {
font-weight: 500;
font-size: 14px;
line-height: 1.58;
color: #66aa66;
}
#itemList #BLK-g8064 .component h4 {
color: #ee8800;
}
#itemList #BLK-g8057 .component h4 {
color: #a3a349;
}
#itemList #BLK-g8061 .component h4 {
color: #7766aa;
}
#itemList #BLK-g8059 .component h4 {
color: #ee7799;
}
#itemList #BLK-g8062 .component h4 {
color: #ee7744;
}
#itemList #BLK-g8060 .component h4 {
color: #00bbbb;
}
#itemList #BLK-g8065 .component h4 {
color: #11aa99;
}
#itemList .component p {
line-height: 1.58;
}
#itemList .link {
margin-top: 13px;
font-family: dnp-shuei-mgothic-std, sans-serif;
font-weight: 600;
font-style: normal;
font-size: 13px;
line-height: 30px;
letter-spacing: 0;
text-align: center;
}
#itemList .link a {
box-sizing: border-box;
display: block;
position: relative;
background-color: #ffcc33;
border-radius: 15px;
padding-right: 9px;
width: 140px;
height: 30px;
color: #000;
}
#itemList .link a::after {
transform: translateY(-50%);
content: "\f054";
position: absolute;
right: 10px;
top: 50%;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 10px;
color: #ff6600;
}
#itemList .link a:hover {
background-color: #ff8800;
color: #fff;
text-decoration: none;
}
#itemList .link a:hover::after {
color: #fff;
}
#itemList .number {
display: flex;
background-color: #fff;
border: solid 1px #000;
border-radius: 3px;
width: 105px;
margin: 18px 0 0 0;
line-height: 22px;
text-align: center;
}
#itemList .more.special .number {
position: absolute;
left: 145px;
top: 4px;
margin: 0;
}
#itemList .number dt {
background-color: #000;
width: 60px;
font-size: 12px;
color: #fff;
}
#itemList .number dd {
width: 43px;
font-weight: 700;
font-size: 13px;
}
#itemList .btn img {
width: 100%;
height: auto;
}


#itemExplan {}
#itemExplan .list {
margin: 0 auto;
padding: 50px 0 10px 0;
width: 330px;
text-align: left;
}
#itemExplan .list.last {
margin: -10px auto 0 auto;
padding: 0 0 10px 0;
}
#itemExplan .list .block {
margin-bottom: 50px;
}
#itemExplan .list .ctg {
background-color: #eadbbc;
border-radius: 5px;
margin-bottom: 20px;
padding: 15px 0 13px 0;
font-size: 24px;
font-weight: bold;
line-height: 1.37;
text-align: center;
color: #bb8822;
}
#itemExplan .list h3 {
display: flex;
justify-content: center;
align-items: center;
background-color: #664466;
border-radius: 5px;
margin-bottom: 17px;
height: 70px;
font-weight: 700;
font-size: 20px;
line-height: 1.35;
text-align: center;
color: #fff;
}
#itemExplan .list h3 {
background-color: #664466;
}
#itemExplan .list p {
margin-bottom: 24px;
font-size: 14px;
line-height: 2;
}
#itemExplan .list p.note {
margin-top: -17px;
font-size: 12px;
}
#itemExplan .list .photo {
text-align: center;
}
#itemExplan .list ul {
margin: -4px 0 -5px 0;
width: 330px;
}
#itemExplan .list li {
float: left;
width: 110px;
font-size: 13px;
font-weight: bold;
text-align: center;
}
#itemExplan .list li img {
margin: 0 auto 9px auto;
display: block;
}
#itemExplan .list li span {
font-size: 11px;
font-weight: normal;
}
#itemExplan .box {
box-sizing: border-box;
background: url(../img/sct1_blk5_bg.png) no-repeat center top;
background-size: 375px auto;
padding: 104px 0 0 0;
height: 494px;
text-align: left;
}
#itemExplan .box h3 {
margin-bottom: 21px;
font-size: 32px;
font-weight: bold;
line-height: 1.34;
text-align: center;
color: #58aa59;
}
#itemExplan .box ol {
box-sizing: border-box;
margin: 0 auto;
padding-left: 45px;
width: 330px;
}
#itemExplan .box li {
margin-bottom: 20px;
font-size: 14px;
line-height: 2;
}
#itemExplan .box li:last-child {
width: 170px;
}
#EXP_BLK3 p.bln {
position: relative;
box-sizing: border-box;
background-color: #f6ddb2;
margin: 20px 0 0 0;
padding: 15px 20px;
line-height: 2;
color: #553322;
z-index: 1;
}
#EXP_BLK3 p.bln::before {
transform: rotate(20deg);
content: '';
box-sizing: border-box;
display: block;
position: absolute;
left: 14px;
top: -28px;
border-right: 25px solid transparent;
border-bottom: 80px solid #f6ddb2;
border-left: 25px solid transparent;
width: 30px;
height: 80px;
z-index: -1;
}

#contents .banner {
background-color: #eebb66;
text-align: center;
}
#contents .banner a {
display: block;
}