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

/****************************************
clearfix
*****************************************/
#S1_E1_BLK .pack:after,
#S1_E1_BLK .image:after,
.section .component ul:after,
.section .component dl:after,
.section .component:after,
.section .item:after,
.cols:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#S1_E1_BLK .pack,
#S1_E1_BLK .image,
.section .component ul,
.section .component dl,
.section .component,
.section .item,
.cols {
zoom: 1;
}
.SourceHanSerif-Regular {
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
}
.SourceHanSerif-Medium {
font-family: source-han-serif-japanese, serif;
font-weight: 500;
font-style: normal;
}

#contents {
font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
-webkit-font-smoothing: antialiased;
font-feature-settings: "palt";
letter-spacing: 0.05em;
}
#pageBody {
background: none;
zoom: 100%;
overflow: hidden;
}

/****************************************
#MODAL
*****************************************/
#MODAL {
position: fixed;
left: 0;
top: 0;
width: 100%;
z-index: 100;
}
.modalView #MODAL {
position: relative;
}
#MODAL .cont {
position: relative;
background-color: #fff;
margin: 0 auto;
width: 375px;
display: none;
z-index: 50;
}
#MODAL .close {
position: absolute;
right: 25px;
top: 25px;
width: 25px;
height: 25px;
cursor: pointer;
z-index: 50;
}
#MODAL .close::before {
transform: translateX(-50%) translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
width: 1px;
height: 20px;
}
#MODAL .close::after {
transform: translateX(-50%) translateY(-50%) rotate(-45deg);
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
background-color: #000;
width: 1px;
height: 20px;
}
#MODAL .cart {
margin: 0 auto;
padding: 70px 0 40px 0;
width: 320px;
text-align: left;
display: none;
}
#MODAL .cart .txt {
margin-bottom: 14px;
font-size: 16px;
line-height: 32px;
text-align: center;
}
#MODAL .cart .note {
margin-bottom: 22px;
font-size: 10px;
line-height: 15px;
color: #666;
}
#MODAL .cart .list {
border-bottom: solid 1px #ddd;
margin-bottom: 30px;
}
#MODAL .cart .block {
display: flex;
border-top: solid 1px #ddd;
padding: 25px 0;
align-items: center;
}
#MODAL .cart .block p {
box-sizing: border-box;
position: relative;
padding-left: 45px;
width: 220px;
font-size: 12px;
line-height: 1.5;
}
#MODAL .cart .block img {
transform: translateY(-50%);
position: absolute;
left: 0;
top: 50%;
width: auto;
height: 60px;
}
#MODAL .cart .select {
position: relative;
box-sizing: border-box;
background-color: #fff;
border: solid 1px #ccc;
border-radius: 4px;
width: 100px;
height: 40px;
}
#MODAL .cart .select::after {
transform: translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
right: 14px;
top: 48%;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
width: 7px;
height: 7px;
}
#MODAL .cart select {
box-sizing: border-box;
padding-left: 13px;
width: 100px;
height: 40px;
font-size: 14px;
cursor: pointer;
border: none;
outline: none;
background: transparent;
background-image: none;
box-shadow: none;
-webkit-appearance: none;
appearance: none;
color: #000;
}
#MODAL .cart select::-ms-expand {
display: none;
}
#MODAL .buy a {
display: block;
position: relative;
background-color: #ff7700;
border-radius: 4px;
margin: 0 auto;
width: 100%;
height: 60px;
font-size: 18px;
line-height: 60px;
text-align: center;
color: #fff;
}

/* #mainVisual */
#mainVisual {
text-align: center;
}
#mainVisual .vis {
position: relative;
background: url(../img/title.jpg) no-repeat center top;
background-size: 375px auto;
margin: 0 auto;
width: 375px;
height: 842px;
overflow: hidden;
}
#mainVisual h1 {
position: absolute;
left: 0;
top: 40px;
width: 100%;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 30px;
line-height: 1.42;
letter-spacing: 0.025em;
text-align: center;
}
#mainVisual .vis ul {
margin: 0 auto;
padding-top: 512px;
width: 330px;
}
#mainVisual ul li {
margin-top: 10px;
width: 330px;
height: 65px;
}
#mainVisual ul li a {
display: block;
box-sizing: border-box;
position: relative;
background-color: rgba(255,255,255,0.75);
border-radius: 12px;
padding-top: 11px;
width: 330px;
height: 65px;
text-align: center;
line-height: 1.3;
letter-spacing: 0.025em;
color: #000;
text-decoration: none;
}
#mainVisual ul li a::before {
transform: translateY(-50%);
content: '';
display: block;
position: absolute;
right: 15px;
top: 50%;
width: 25px;
height: 25px;
background-color: #ee8800;
border-radius: 50%;
z-index: 1;
}
#mainVisual ul li a::after {
transform: translateY(-50%);
content: "\f078";
position: absolute;
right: 21px;
top: 52%;
font-family: "Font Awesome 5 Free";
font-weight: 900;
font-size: 13;
color: #fff;
z-index: 1;
}
#mainVisual ul li a span {
display: inline-block;
padding-bottom: 1px;
font-size: 15px;
font-weight: normal;
color: #ee8800;
}
#mainVisual ul li a strong {
font-size: 18px;
font-weight: bold;
}
#mainVisual .btn {
background-color: #ee8800;
}

/* #mainCatch */
#mainCatch {
text-align: left;
}
#mainCatch .head {
position: relative;
margin: 0 auto;
padding: 66px 0 51px 0;
width: 375px;
text-align: center;
}
#mainCatch .head::before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
background: url(../img/cth_dec1.jpg) no-repeat -63px -47px;
background-size: 554px auto;
width: 554px;
height: 556px;
z-index: -1;
}
#mainCatch .head::after {
content: '';
display: block;
position: absolute;
left: -27px;
bottom: -52px;
background: url(../img/cth_dec2.png) no-repeat 0 0;
background-size: 106px auto;
width: 106px;
height: 98px;
z-index: 1;
}
#mainCatch .head h2 {
box-sizing: border-box;
margin-bottom: 24px;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 28px;
line-height: 1.5;
letter-spacing: 0.025em;
}
#mainCatch .head p {
box-sizing: border-box;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
line-height: 2.14;
letter-spacing: 0;
}
#mainCatch .cont {
position: relative;
margin: 0 auto;
width: 375px;
}
#C_BOX1 {
background-color: #ffe6cc;
padding: 45px 0 30px 0;
}
#C_BOX1 h3 {
margin-bottom: 27px;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
line-height: 1.33;
text-align: center;
color: #ee8800;
}
#C_BOX1 .block {
position: relative;
margin: 0 auto 30px auto;
width: 255px;
}
#C_BOX1 .pack {
position: absolute;
left: 0;
bottom: 10px;
width: 100%;
text-align: center;
color: #fff;
}
#C_BOX1 img {
width: 100%;
height: auto;
}
#C_BOX1 h4 {
font-size: 18px;
}
#C_BOX1 p {
font-size: 14px;
line-height: 1.64;
}
#C_BOX2 {
position: relative;
background-color: #fff;
padding: 52px 0 7px 0;
}
#C_BOX2 .block {
margin: 0 auto 60px auto;
width: 330px;
}
#C_BOX2 h3 {
margin-bottom: 30px;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
line-height: 1.47;
text-align: center;
}
#C_BOX2 .block:first-child h3 {
margin-bottom: 15px;
}
#C_BOX2 .image {
margin-bottom: 28px;
font-size: 14px;
font-weight: bold;
line-height: 1.59;
text-align: center;
}
#C_BOX2 .image img {
display: block;
margin: 0 auto;
}
#C_BOX2 .image span {
display: block;
margin: 2px 0 -8px 0;
}
#C_BOX2 p {
font-size: 14px;
line-height: 2;
}

/****************************************
#SCT1-
*****************************************/
.section {
position: relative;
margin: 0 auto;
width: 375px;
overflow: hidden;
}
.section .itm .note,
.section .item .note {
padding-top: 20px;
font-size: 12px;
line-height: 1.45;
}
.section .item {
padding-top: 36px;
}
.section .item .list {
padding-bottom: 19px;
}
.section .itm .block,
.section .item .block {
margin: 0 auto;
padding-bottom: 16px;
width: 330px;
}
.section .itm .block:last-child,
.section .item .block:last-child {
padding-bottom: 11px;
}
.section .itm .image,
.section .item .image {
position: absolute;
left: 0;
top: 0;
width: 59px;
text-align: center;
}
.section .itm .set,
.section .item .set {
margin-bottom: 20px;
}
.section .itm h4,
.section .item h4 {
margin-bottom: 2px;
font-size: 15px;
font-weight: bold;
line-height: 1.44;
}
.section .itm h4 span,
.section .item h4 span {
font-size: 12px;
font-weight: normal;
}
.section .itm .cnt,
.section .item .cnt {
font-size: 12px;
line-height: 1.68;
}
.section .itm p.price,
.section .item p.price {
padding-top: 3px;
padding-bottom: 3px;
font-size: 14px;
line-height: 1.35;
font-weight: bold;
}
.section .itm div.price,
.section .item div.price {
padding-top: 6px;
padding-bottom: 10px;
}
.section .itm div.price .special,
.section .item div.price .special {
font-size: 14px;
line-height: 1.2;
font-weight: bold;
color: #cc0000;
}
.section .itm div.price strong,
.section .item div.price strong {
font-size: 30px;
font-weight: bold;
}
.section .itm div.price span,
.section .item div.price span {
font-size: 16px;
font-weight: bold;
}
.section .itm div.price .regular,
.section .item div.price .regular {
padding-top: 6px;
font-size: 12px;
line-height: 1.35;
}
.section .itm .num,
.section .item .num {
box-sizing: border-box;
display: inline-block;
border: solid 1px #000;
border-radius: 3px;
padding-right: 6px;
font-size: 12px;
line-height: 22px;
}
.section .itm .num span,
.section .item .num span {
display: inline-block;
background-color: #000;
margin-right: 6px;
padding: 0 6px;
font-size: 12px;
color: #fff;
}
.section .itm .num strong,
.section .item .num strong {
display: inline-block;
font-family: 'Lato', sans-serif;
font-weight: 700; /*Bold*/
}
.section .itm .cart,
.section .item .cart {
margin-top: 20px;
}
.section .itm .cart a,
.section .item .cart a {
display: block;
position: relative;
background-color: #ffcc00;
border-radius: 4px;
margin: 0 auto;
width: 100%;
height: 60px;
font-size: 18px;
font-weight: bold;
line-height: 60px;
text-align: center;
color: #000;
}
.section .itm .cart a,
.section .item .cart a::after {
transform: translateY(-50%) rotate(45deg);
content: '';
display: block;
position: absolute;
right: 20px;
top: 50%;
border-top: 1px solid #000;
border-right: 1px solid #000;
width: 7px;
height: 7px;
}
.section .itm .off,
.section .item .off {
position: absolute;
left: 245px;
top: 11px;
}
.section .item .btn {
box-sizing: border-box;
background-color: #f9d4c7;
border-radius: 12px;
margin: 0 auto 0 auto;
padding: 20px 15px 18px 15px;
width: 330px;
text-align: center;
}
.section .item .btn a {
display: block;
background-color: #fff588;
border-radius: 8px;
margin-top: 15px;
font-size: 24px;
font-weight: bold;
line-height: 60px;
color: #664444;
}
.section .item .component {
padding-top: 13px;
padding-bottom: 19px;
}
.section .item .component li {
border: solid 1px #000;
border-radius: 4px;
margin: 0 5px 5px 0;
padding: 0 11px;
font-size: 12px;
font-weight: bold;
letter-spacing: 0;
line-height: 26px;
float: left;
}
.section .item .attention {
box-sizing: border-box;
background-color: #fff;
border: solid 2px #d00;
margin-top: 30px;
margin-bottom: 12px;
padding: 6px 9px 6px 9px;
font-size: 12px;
line-height: 1.5;
color: #dd0000;
}

.section .recommend {
box-sizing: border-box;
position: relative;
border: solid 2px #ee8800;
margin: 20px auto 50px auto;
padding: 25px 18px 10px 18px;
width: 330px;
}
.section .recommend h4 {
position: absolute;
left: 65px;
right: 65px;
top: -18px;
background-color: #fff;
font-family: source-han-serif-japanese, serif;
font-weight: 500;
font-style: normal;
font-size: 20px;
color: #ee8800;
text-align: center;
}
.section .recommend li {
margin-bottom: 8px;
padding-left: 20px;
text-indent: -20px;
font-size: 15px;
font-weight: bold;
line-height: 1.5;
}
.section .recommend li::before {
content: '';
display: inline-block;
position: relative;
top: 1px;
background-color: #ee8800;
border-radius: 50%;
margin-right: 5px;
width: 14px;
height: 14px;
}

#SCT1 .head {
position: relative;
background: url("../img/sct1_bg.jpg") no-repeat center top;
background-size: 375px auto;
margin-bottom: -20px;
height: 610px;
}
#SCT2 .head {
background: url("../img/sct2_bg.jpg") no-repeat center top;
background-size: 375px auto;
height: 570px;
}
#SCT3 .head {
background: url("../img/sct3_bg.jpg") no-repeat center top;
background-size: 375px auto;
height: 530px;
}
.section .head h2 {
padding-top: 46px;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 28px;
line-height: 1.44;
text-align: center;
}

.section .explan {
background-color: #ffe6cc;
padding-top: 44px;
}
.section .explan .block {
margin: 0 auto 44px auto;
width: 330px;
}
.section .explan .block:last-child {
margin: 0 auto 0 auto;
}
.section .explan h2 {
position: relative;
margin-bottom: 17px;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
line-height: 1.47;
}
#SCT1 .explan h2 {
padding-left: 65px;
}
#S2_E2_BLK h2,
#S2_E1_BLK h2 {
line-height: 70px;
}
#SCT1 .explan h2::before {
content: '1';
display: block;
position: absolute;
left: 0;
top: 6px;
background-color: #ee8800;
width: 50px;
height: 60px;
font-family: source-han-serif-japanese, serif;
font-weight: 400;
font-style: normal;
font-size: 36px;
line-height: 60px;
text-align: center;
color: #fff;
}
#SCT1 .explan .block:nth-of-type(1) h2::before {
content: '1';
}
#SCT1 .explan .block:nth-of-type(2) h2::before {
content: '2';
}
#SCT1 .explan .block:nth-of-type(3) h2::before {
content: '3';
}
.section .explan p {
font-size: 14px;
line-height: 2;
}
.section .explan .component {
margin: 0 auto;
padding-bottom: 6px;
width: 330px;
}
.section .explan .component dl {
display: flex;
flex-wrap: wrap;
position: relative;
border-top: solid 1px #000;
padding-top: 26px;
padding-bottom: 24px;
}
.section .explan .component dt {
transform: translateX(-50%);
display: inline-block;
position: absolute;
left: 50%;
top: -14px;
background-color: #ffe6cc;
padding: 0 17px;
font-size: 16px;
font-weight: bold;
white-space: nowrap;
}
.section .explan .component dd {
position: relative;
margin-right: 20px;
padding-bottom: 16px;
width: 155px;
font-size: 12px;
line-height: 1.5;
text-align: center;
float: left;
}
.section .explan .component li:nth-of-type(8),
.section .explan .component li:nth-of-type(6),
.section .explan .component li:nth-of-type(4),
.section .explan .component li:nth-of-type(2),
.section .explan .component dd:nth-of-type(8),
.section .explan .component dd:nth-of-type(6),
.section .explan .component dd:nth-of-type(4),
.section .explan .component dd:nth-of-type(2) {
margin-right: 0;
}
.section .explan .component ul {
padding-top: 14px;
padding-bottom: 24px;
}
.section .explan .component li {
position: relative;
margin-right: 20px;
padding-bottom: 16px;
width: 155px;
font-size: 12px;
line-height: 1.5;
text-align: center;
white-space: nowrap;
float: left;
}
.section .explan .component li img,
.section .explan .component dd img {
margin-bottom: 12px;
}
.section .explan .component li img.icn,
.section .explan .component dd img.icn {
position: absolute;
right: 4px;
top: 78px;
}
.section .explan .component li strong,
.section .explan .component dd strong {
display: block;
margin-top: 1px;
font-size: 13px;
font-weight: bold;
line-height: 1.4;
}
.section .explan .component li span,
.section .explan .component dd span {
font-size: 10px;
}
.section .explan .component .note {
margin: -23px 0 27px 0 !important;
font-size: 10px;
text-align: right;
}

#S1_E1_BLK .image {
padding-top: 17px;
padding-bottom: 30px;
}
#S1_E1_BLK .image img {
margin-left: 10px;
display: block;
}
#S1_E1_BLK dl {
margin-top: 15px;
margin-right: 22px;
width: 135px;
float: left;
}
#S1_E1_BLK dl:last-child {
margin-right: 0;
}
#S1_E1_BLK dt {
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
text-align: center;
}
#S1_E1_BLK dd {
font-size: 12px;
line-height: 1.68;
}
#S1_E1_BLK .pack {
background-color: #fff;
border: solid 1px #ee8800;
border-radius: 5px;
padding: 12px 14px 12px 14px;
}
#S1_E1_BLK .box:first-child {
width: 145px;
float: left;
}
#S1_E1_BLK .box:last-child {
box-sizing: border-box;
border-left: dashed 1px #ee8800;
padding-left: 15px;
width: 150px;
float: right;
}
#S1_E1_BLK .box h4 {
margin-bottom: 2px;
font-size: 14px;
font-weight: bold;
letter-spacing: 0;
color: #ee8800;
}
#S1_E1_BLK .box h4 span {
font-size: 12px;
color: #000;
}
#S1_E1_BLK .box p {
font-size: 12px;
line-height: 1.68;
}
#S1_E1_BLK .box p span {
display: inline-block;
padding-top: 3px;
font-size: 10px;
}
#S1_E2_BLK {
overflow: hidden;
}
#S1_E2_BLK ul {
padding-top: 27px;
width: 340px;
}
#S1_E2_BLK li {
box-sizing: border-box;
background-color: #fff;
border: solid 1px #ee8800;
border-radius: 5px;
margin: 0 10px 5px 0;
padding: 17px 0 0 0;
width: 160px;
height: 50px;
font-size: 14px;
font-weight: bold;
line-height: 1.25;
color: #ee8800;
text-align: center;
float: left;
}
#S1_E2_BLK li:nth-child(6),
#S1_E2_BLK li:nth-child(5),
#S1_E2_BLK li:nth-child(4) {
padding: 8px 0 14px 0;
}
#S1_E2_BLK li span {
font-size: 14px;
}
#S1_E3_BLK p {
margin-bottom: 40px;
}
#S3_E1_BLK .image {
padding-top: 27px;
}
#S3_E1_BLK .image img {
margin-bottom: 12px;
}
#S3_E1_BLK li {
width: 140px;
text-align: center;
font-size: 12px;
line-height: 1.5;
float: left;
}
#S3_E1_BLK li:last-child {
float: right;
}
#S3_E2_BLK p {
margin-bottom: 13px;
}

#SCT1 .ldk {
position: relative;
background: #ffebe7 url("../img/ldk_bg.png") no-repeat center top;
background-size: 375px auto;
padding-bottom: 52px;
}
#SCT1 .ldk .pack {
padding: 220px 20px 0 20px;
}
#SCT1 .ldk .pack h2 {
margin-bottom: 25px;
font-size: 36px;
font-weight: bold;
text-align: center;
}
#SCT1 .ldk .image {
padding: 47px 0 50px 0;
text-align: center;
}
#SCT1 .ldk .evaluation {
padding: 0 20px;
text-align: center;
}
#SCT1 .ldk .evaluation h3 {
margin: 26px 0 4px 0;
font-size: 16px;
font-weight: bold;
text-align: left;
}
#SCT1 .ldk .evaluation h4 {
display: inline-block;
position: relative;
background-color: #fff;
border-radius: 15px;
padding: 0 18px;
font-size: 14px;
font-weight: bold;
line-height: 30px;
color: #a94f25;
text-align: left;
}
#SCT1 .ldk .evaluation h4::before {
transform: rotate(150deg);
content: '';
position: absolute;
left: 35px;
bottom: -11px;
display: block;
border-right: 5px solid transparent;
border-bottom: 15px solid #fff;
border-left: 5px solid transparent; 
}
#SCT1 .ldk p {
font-size: 14px;
line-height: 2;
text-align: left;
}

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