@charset "UTF-8";

@font-face {
font-family: 'NotoSansRegular';
src: url("/products/special/wbr/fonts/NotoSansJP-Regular.eot") format("eot"), url("/products/special/wbr/fonts/NotoSansJP-Regular.woff") format("woff"), url("/products/special/wbr/fonts/NotoSansJP-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'NotoSansMedium';
src: url("/products/special/wbr/fonts/NotoSansJP-Medium.eot") format("eot"), url("/products/special/wbr/fonts/NotoSansJP-Medium.woff") format("woff"), url("/products/special/wbr/fonts/NotoSansJP-Medium.ttf") format("truetype");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'NotoSansBold';
src: url("/products/special/wbr/fonts/NotoSansJP-Bold.eot") format("eot"), url("/products/special/wbr/fonts/NotoSansJP-Bold.woff") format("woff"), url("/products/special/wbr/fonts/NotoSansJP-Bold.ttf") format("truetype");
font-weight: bold;
font-style: normal;
font-display: swap;
}

.mainContents{
padding: 0;
margin: 0;
font-size: 100%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents{
font-size: calc(100vw / 1399 * 16);
}
}
@media screen and (max-width: 768px) {
.mainContents main {
font-size: calc(100vw / 750 * 32);
}
}

.mainContents ul {
padding-inline-start: 0;
}

.mainContents li {
list-style-type: none;
}

.mainContents h2,
.mainContents h3,
.mainContents p {
margin: 0;
}

.mainContents img {
width: 100%;
vertical-align: bottom;
}
@media screen and (max-width: 768px) {
.mainContents img {
width: 100%;
height: auto;
}
}

.mainContents a:hover {
opacity: 0.7;
}

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

/* fadeの設定 */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}

/* parts */
.mainContents .wrap1240{
width: 1240px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .wrap1240{
width: 92%;
overflow: hidden;
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap1240{
width: 92%;
overflow: hidden;
}
}

.mainContents .wrap1140{
width: 1140px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .wrap1140{
width: calc(100vw / 1399 * 1140);
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap1140{
width: 100%;
overflow: hidden;
}
}

.mainContents .wrap840{
width: 840px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .wrap840{
width: calc(100vw / 1399 * 840);
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap840{
width: 84%;
overflow: hidden;
}
}

.mainContents .p_re{
position: relative;
}

/* clearFix */
.mainContents .cf:after{
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden;
}

/* ===========================================
* fadeの設定
* ======================================== */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade2 {
opacity: 0;
transform: translateY(80px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade2.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade_r {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_r.active {
opacity: 1;
transform: translateX(0px);
}

.mainContents .fade_l {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_l.active {
opacity: 1;
transform: translateX(0px);
}




/* ===========================================
* sec_kv
* ======================================== */

.mainContents .sec_kv{
width: 100%;
overflow: hidden;
background: linear-gradient(90deg, #811814, #811814 50%, #000000 50% 100%);
animation: kv_fade4 1s 0s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv{
background: none;
}
}

.mainContents .sec_kv .kv_wrap{
max-width: 1400px;
margin: 0 auto;
text-align: center;
position: relative;
}
@media screen and (max-width: 1399px) {
.mainContents .sec_kv .kv_wrap{
width: 100%;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_wrap{
width: 100%;
}
}

.mainContents .sec_kv .kv_img1{
position: absolute;
width: 37%;
bottom: 0;
left:40px;
opacity: 0;
animation: kv_fade1 0.8s 1s ease-in-out forwards;
}
@media screen and (max-width: 1399px) {
.mainContents .sec_kv .kv_img1{
bottom: 0;
left:calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img1{
width: 72%;
bottom: 0;
left:calc(100vw / 750 * -70);
}
}

.mainContents .sec_kv .kv_img2{
position: absolute;
width: 50%;
top: 35px;
right:250px;
opacity: 0;
animation: kv_fade2 0.6s 2s ease-in-out forwards;
}
@media screen and (max-width: 1399px) {
.mainContents .sec_kv .kv_img2{
top: calc(100vw / 1399 * 44);
right:calc(100vw / 1399 * 220);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img2{
width: 88%;
top: calc(100vw / 750 * 10);
right: calc(100vw / 750 * 40);
}
}

.mainContents .sec_kv .kv_img3{
position: absolute;
width: 34%;
top: 190px;
right:320px;
opacity: 0;
animation: kv_fade2 0.6s 2.5s ease-in-out forwards;
}
@media screen and (max-width: 1399px) {
.mainContents .sec_kv .kv_img3{
top: calc(100vw / 1399 * 190);
right:calc(100vw / 1399 * 320);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img3{
width: 53%;
top: calc(100vw / 750 * 300);
right: calc(100vw / 750 * 50);
}
}

.mainContents .sec_kv .kv_img4{
position: absolute;
width: 70%;
bottom: 0;
right:140px;
opacity: 0;
z-index: 10;
animation: kv_fade3 0.6s 3.25s ease-in-out forwards;
}
@media screen and (max-width: 1399px) {
.mainContents .sec_kv .kv_img4{
bottom: 0;
right:calc(100vw / 1399 * 140);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img4{
width: 93%;
bottom: calc(100vw / 750 * 10);
left:0;
right:0;
margin: 0 auto;
}
}

.mainContents .sec_kv .kv_img5{
position: absolute;
width: 20%;
top: 125px;
right:115px;
opacity: 0;
z-index: 9;
mix-blend-mode:screen;
animation: kv_fade4 0.6s 4s ease-in-out forwards;
}
@media screen and (max-width: 1399px) {
.mainContents .sec_kv .kv_img5{
top: calc(100vw / 1399 * 125);
right:calc(100vw / 1399 * 115);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img5{
position: absolute;
width: 46%;
top: calc(100vw / 750 * 420);
right:calc(100vw / 750 * -60);
}
}

@keyframes kv_fade1 {
0% {transform: translateX(-100%); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}
}
@keyframes kv_fade2 {
0% {transform: translateX(100%); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}
}
@keyframes kv_fade3 {
0% {transform:scale(0); opacity: 0;}
80% {transform:scale(1.2); opacity: 1;}
100% {transform: scale(1); opacity: 1;}
}
@keyframes kv_fade4 {
0% {opacity: 0;}
100% {opacity: 1;}
}




/* ===========================================
* sec_lead
* ======================================== */

.mainContents .sec_lead{
width: 100%;
background: linear-gradient(0deg, #000000 33%, #ffffe8 33%, #ffffe8 66%, #d35028 66%);
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead{
background: linear-gradient(#d35028, #d35028 16%, #ffffe8 16% 32%, #000000 32% 50%, #d35028 50% 66%, #ffffe8 66% 82%, #000000 82% 100%);
}
}

.mainContents .sec_lead .inner{
background: #ffffff;
}

.mainContents .sec_lead h3{
width: 54%;
padding: 70px 0;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_lead h3{
padding: calc(100vw / 1399 * 70) 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead h3{
width: 100%;
padding: calc(100vw / 750 * 70) 0 calc(100vw / 750 * 260);
}
}

.mainContents .sec_lead .movie_wrap{
width: 52%;
padding: 0;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .movie_wrap{
width: 92%;
}
}

.mainContents .sec_lead .movie_wrap video.mov_main {
width: 100%;
border-radius: 10px 10px 0 0;
margin: 0 auto;
padding: 0;
cursor:pointer;
}

.mainContents .sec_lead .movie_wrap .p_ab1{
width:100%;
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: 0 auto;
}

.mainContents .sec_lead .movie_wrap .p_ab2{
width:27%;
position: absolute;
top: 75px;
left: -195px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_lead .movie_wrap .p_ab2{
top: calc(100vw / 1399 * 75);
left: calc(100vw / 1399 * -195);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .movie_wrap .p_ab2{
width:33%;
position: absolute;
top:calc(100vw / 750 * -140);
left:calc(100vw / 750 * 70);
}
}

.mainContents .sec_lead h4{
width: 67%;
padding: 25px 0 70px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_lead h4{
padding: calc(100vw / 1399 * 25) 0 calc(100vw / 1399 * 70);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead h4{
width: 100%;
padding: calc(100vw / 750 * 80) 0 calc(100vw / 750 * 110);
}
}

.mainContents .sec_lead .concept_wrap{
width: 88%;
padding: 0;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .concept_wrap{
width: 100%;
}
}

.mainContents .sec_lead h5{
width: 35%;
padding: 0 0 0 35px;
margin: 0;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_lead h5{
padding: 0 0 0 calc(100vw / 1399 * 35);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead h5{
width: 84%;
padding: 0 0 0 calc(100vw / 750 * 25);
}
}

.mainContents .sec_lead .concept_wrap ul{
width: 60%;
padding: 0 0 60px;
margin: 0;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_lead .concept_wrap ul{
padding: 0 0 calc(100vw / 1399 * 60);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .concept_wrap ul{
width: 100%;
padding: 0;
}
}

.mainContents .sec_lead .concept_wrap li:nth-child(1){ margin-top: -95px; text-align: right;}
.mainContents .sec_lead .concept_wrap li:nth-child(2){ margin-top: -70px; text-align: left;}
.mainContents .sec_lead .concept_wrap li:nth-child(3){ margin-top: -10px; text-align: center;}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_lead .concept_wrap li:nth-child(1){ margin-top: calc(100vw / 1399 * -95); text-align: right;}
.mainContents .sec_lead .concept_wrap li:nth-child(2){ margin-top: calc(100vw / 1399 * -70); text-align: left;}
.mainContents .sec_lead .concept_wrap li:nth-child(3){ margin-top: calc(100vw / 1399 * -10); text-align: center;}
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .concept_wrap li:nth-child(1){ margin-top: calc(100vw / 750 * -75); text-align: center;}
.mainContents .sec_lead .concept_wrap li:nth-child(2){ margin-top: calc(100vw / 750 * 10); text-align: center;}
.mainContents .sec_lead .concept_wrap li:nth-child(3){ margin-top: calc(100vw / 750 * 10); text-align: center;}
}

.mainContents .sec_lead .concept_wrap li:nth-child(1) img{ width: 73%;}
.mainContents .sec_lead .concept_wrap li:nth-child(2) img{ width: 81%;}
.mainContents .sec_lead .concept_wrap li:nth-child(3) img{ width: 82%;}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .concept_wrap li:nth-child(1) img{ width: 100%;}
.mainContents .sec_lead .concept_wrap li:nth-child(2) img{ width: 100%;}
.mainContents .sec_lead .concept_wrap li:nth-child(3) img{ width: 100%;}
}

.mainContents .sec_lead .concept_wrap .p_ab1{
position: absolute;
bottom: 0;
right:0;
width: 44%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_lead .concept_wrap .p_ab1{
position: static;
width: 100%;
padding: calc(100vw / 750 * 85) 0 0;
}
}


/* ===========================================
* sec_menu
* ======================================== */

.mainContents .sec_menu{
width: 100%;
margin: 0 auto;
text-align: center;
background: #f2f2f2;
padding: 35px 0;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_menu{
padding: calc(100vw / 1399 * 35) 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_menu{
padding: calc(100vw / 750 * 70) 0 calc(100vw / 750 * 80);
}
}

.mainContents .sec_menu h3{
width: 7%;
margin: 0 auto;
text-align: center;
}
@media screen and (max-width: 768px) {
.mainContents .sec_menu h3{
width: 15%;
}
}

.mainContents .sec_menu ul {
display: flex;
list-style: none;
padding: 30px 25px 0;
margin: 0 auto;
text-align: center;
flex-wrap : wrap;
justify-content: space-between;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_menu ul {
padding: calc(100vw / 1399 * 30) calc(100vw / 1399 * 25) 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_menu ul {
padding: 0 calc(100vw / 750 * 70) 0;
}
}

.mainContents .sec_menu ul li {
width: 17%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_menu ul li {
width: 47%;
padding: calc(100vw / 750 * 45) 0 0;
}
}


/* ===========================================
* sec_about1(red)
* ======================================== */
.mainContents .sec_about_r{
width: 100%;
background: url(/products/special/wbr/images/about_r_curry.png)center left/300px no-repeat, linear-gradient(#d34928 50%, #bc3829);
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r{
background: url(/products/special/wbr/images/about_r_curry.png)center left/calc(100vw / 1399 * 200) no-repeat, linear-gradient(#d34928 50%, #bc3829);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r{
background: linear-gradient(#d34928 50%, #bc3829);
}
}

.mainContents .sec_about_r h3{
display: block;
float: left;
width: 30%;
padding: 60px 0 0;
margin: 0;
text-align: right;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r h3{
padding: calc(100vw / 1399 * 60) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r h3{
float: none;
width: 100%;
padding: calc(100vw / 750 * 35) 0 0;
text-align: center;
}
}

.mainContents .sec_about_r h3 img{
width: 76%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r h3 img{
width: 100%;
}
}

.mainContents .sec_about_r .inner{
float: left;
width: 60%;
margin: 0;
padding: 60px 0 0 30px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner{
padding: calc(100vw / 1399 * 60) 0 0 calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner{
float: none;
width: 84%;
margin: calc(100vw / 750 * -130) auto 0;
text-align: center;
padding: 0;
}
}

.mainContents .sec_about_r h4{
padding: 0 0 10px;
margin: 0;
width: 85%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r h4{
padding: 0 0 calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r h4{
padding: 0 0 calc(100vw / 750 * 60);
width: 65%;
}
}

.mainContents .sec_about_r .inner p{
font-size: 120%;
letter-spacing: 0.12em;
line-height: 1.75;
color: #ffffff;
margin: 0;
padding: 0 0 100px 10px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner p{
padding: 0 0 calc(100vw / 1399 * 100) calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner p{
font-size: calc(100vw / 750 * 32);
letter-spacing: 0;
padding: 0 0 calc(100vw / 750 * 110);
text-align: left;
}
}

.mainContents .sec_about_r .inner .point_wrap{
width: 96%;
border: 3px solid #ffffff;
box-shadow: 0 0 8px #e8906d, 0 0 8px #e8906d inset;
border-radius: 20px;
background: #cd771c;
margin: 0 0 0 -40px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner .point_wrap{
margin: 0 0 0 calc(100vw / 1399 * -40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner .point_wrap{
width: 94%;
margin: 0 auto;
}
}

.mainContents .sec_about_r .inner .point_wrap h5{
width: 52%;
margin: -50px auto 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner .point_wrap h5{
margin: calc(100vw / 1399 * -50) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner .point_wrap h5{
width: 82%;
margin: calc(100vw / 750 * -70) auto 0;
text-align: center;
}
}

.mainContents .sec_about_r .inner dl{
display: flex;
align-items:center;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner dl{
align-items:flex-start;
}
.mainContents .sec_about_r .inner dl:nth-of-type(1){margin: calc(100vw / 750 * 20) 0 0;}
.mainContents .sec_about_r .inner dl:nth-of-type(2){margin: calc(100vw / 750 * 110) 0 0;}
.mainContents .sec_about_r .inner dl:nth-of-type(3){margin: calc(100vw / 750 * 40) 0 0;}
}

.mainContents .sec_about_r .inner dt{
margin: 0 0 0 5px;
padding: 0;
text-align: left;
width: 15%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner dt{
margin: 0 0 0 calc(100vw / 1399 * 5);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner dt{
margin: 0;
width: 22.5%;
}
}

.mainContents .sec_about_r .inner dd{
font-size: 110%;
letter-spacing: 0.12em;
line-height: 1.5;
color: #ffffff;
margin: 0;
padding: 0;
text-align: left;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner dd{
font-size: calc(100vw / 750 * 30);
letter-spacing: 0;
line-height: 1.4;
}
}

.mainContents .sec_about_r .inner .point_wrap .note{
font-size: 80%;
letter-spacing: 0.12em;
color: #ffffff;
padding: 0 0 10px 280px;
margin: 0;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner .point_wrap .note{
padding: 0 0 calc(100vw / 1399 * 10) calc(100vw / 1399 * 280);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner .point_wrap .note{
font-size: calc(100vw / 750 * 24);
padding: calc(100vw / 750 * 105) 0 calc(100vw / 750 * 20);
text-align: right;
}
}

.mainContents .sec_about_r .inner .note{
font-size: 80%;
letter-spacing: 0.12em;
color: #ffffff;
padding: 50px 0 30px;
margin: 0 0 0 -260px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .inner .note{
padding: calc(100vw / 1399 * 50) 0 calc(100vw / 1399 * 30);
margin: 0 0 0 calc(100vw / 1399 * -260);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .inner .p_ab_note{
font-size: calc(100vw / 750 * 24);
padding: 0;
margin: 0;
text-align: left;
position: absolute;
top: calc(100vw / 750 * 495);
left: calc(100vw / 750 * 55);
}
}

.mainContents .sec_about_r .wrap1140 .p_ab1{
width: 15%;
position: absolute;
z-index:12;
top:260px;
right:66px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .wrap1140 .p_ab1{
top:calc(100vw / 1399 * 260);
right:calc(100vw / 1399 * 66);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .wrap1140 .p_ab1{
width: 28%;
top:calc(100vw / 750 * 730);
right:calc(100vw / 750 * 50);
}
}

.mainContents .sec_about_r .wrap1140 .p_ab2{
width: 30%;
position: absolute;
z-index:11;
bottom:0px;
right:-50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .wrap1140 .p_ab2{
right: calc(100vw / 1399 * -40);
width: 26%;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .wrap1140 .p_ab2{
width: 88%;
position: static;
margin: calc(100vw / 750 * 20) auto 0;
text-align: center;
}
}

.mainContents .sec_about_r .wrap1140 .p_ab3{
width: 28%;
position: absolute;
z-index:10;
top:60px;
right:45px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_r .wrap1140 .p_ab3{
top:calc(100vw / 1399 * 60);
right:calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .wrap1140 .p_ab3{
width: 72%;
top:calc(100vw / 750 * 300);
right:calc(100vw / 750 * 50);
}
}

.mainContents .sec_about_r .wrap1140 .p_ab4{
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_r .wrap1140 .p_ab4{
width: 55%;
position: absolute;
z-index:10;
bottom:calc(100vw / 750 * 75);
right:calc(100vw / 750 * 180);
}
}


/* ===========================================
* sec_about1(white)
* ======================================== */
.mainContents .sec_about_w{
width: 100%;
background: url(/products/special/wbr/images/about_w_curry.png)center right/300px no-repeat, linear-gradient(135deg, #fffff8, #ffffff 45%, #ffffed);
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w{
background: url(/products/special/wbr/images/about_w_curry.png)center right/calc(100vw / 1399 * 200) no-repeat, linear-gradient(135deg, #fffff8, #ffffff 45%, #ffffed);
}
}

@media screen and (max-width: 768px) {
.mainContents .sec_about_w{
background: linear-gradient(135deg, #fffff8, #ffffff 45%, #ffffed);
}
}

.mainContents .sec_about_w h3{
display: block;
float: right;
width: 30%;
padding: 90px 0 0;
margin: 0;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w h3{
padding: calc(100vw / 1399 * 90) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w h3{
float: none;
width: 100%;
padding: calc(100vw / 750 * 40) 0 0;
text-align: center;
}
}

.mainContents .sec_about_w h3 img{
width: 78%;
margin: 0 0 0 -15px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w h3 img{
width: 78%;
margin: 0 0 0 calc(100vw / 1399 * -15);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w h3 img{
width: 100%;
margin: 0;
}
}

.mainContents .sec_about_w .inner{
float: left;
width: 69.5%;
margin: 0;
padding: 110px 0 0 0;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner{
padding: calc(100vw / 1399 * 110) 0 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner{
float: none;
width: 84%;
margin: calc(100vw / 750 * -130) auto 0;
text-align: center;
padding: 0;
}
}

.mainContents .sec_about_w h4{
padding: 0 0 40px 25px;
margin: 0;
width: 88%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w h4{
padding: 0 0 calc(100vw / 1399 * 40) calc(100vw / 1399 * 25);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w h4{
padding: 0 0 calc(100vw / 750 * 60);
width: 68%;
margin: 0 0 0 calc(100vw / 750 * 200);
}
}

.mainContents .sec_about_w .inner p{
font-size: 120%;
letter-spacing: 0.12em;
line-height: 1.75;
color: #000000;
margin: 0 0 0 185px;
padding: 0 0 75px 10px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner p{
margin: 0 0 0 calc(100vw / 1399 * 185);
padding: 0 0 calc(100vw / 1399 * 75) calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner p{
font-size: calc(100vw / 750 * 32);
letter-spacing: 0;
text-align: left;
}
.mainContents .sec_about_w .inner p.text1{
padding: 0 0 0 calc(100vw / 750 * 210);
margin: 0;
}
.mainContents .sec_about_w .inner p.text2{
padding: 0 0 calc(100vw / 750 * 110);
margin: 0;
}
}

.mainContents .sec_about_w .inner .point_wrap{
width: 82%;
border: 3px solid #a38c46;
box-shadow: 0 0 8px #f3f4ea, 0 0 8px #f3f4ea inset;
border-radius: 20px;
background: url(/products/special/wbr/images/about_w_point_bg.webp)repeat-x;
background-size:cover;
margin: 0 0 0 130px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner .point_wrap{
margin: 0 0 0 calc(100vw / 1399 * 130);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner .point_wrap{
width: 94%;
margin: 0 auto;
}
}

.mainContents .sec_about_w .inner .point_wrap h5{
width: 55%;
margin: -50px auto 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner .point_wrap h5{
margin: calc(100vw / 1399 * -50) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner .point_wrap h5{
width: 82%;
margin: calc(100vw / 750 * -70) auto 0;
text-align: center;
}
}

.mainContents .sec_about_w .inner dl{
display: flex;
align-items:center;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner dl{
align-items:flex-start;
}
.mainContents .sec_about_w .inner dl:nth-of-type(1){margin: calc(100vw / 750 * 30) 0 0;}
.mainContents .sec_about_w .inner dl:nth-of-type(2){margin: calc(100vw / 750 * 195) 0 0;}
.mainContents .sec_about_w .inner dl:nth-of-type(3){margin: calc(100vw / 750 * 100) 0 0;}
}

.mainContents .sec_about_w .inner dt{
margin: 0 0 0 30px;
padding: 0;
text-align: left;
width: 15%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner dt{
margin: 0 0 0 calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner dt{
width: 22.5%;
margin: 0;
}
}

.mainContents .sec_about_w .inner dd{
font-size: 110%;
letter-spacing: 0.12em;
line-height: 1.5;
color: #a38c46;
margin: 0;
padding: 0;
text-align: left;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner dd{
font-size: calc(100vw / 750 * 30);
letter-spacing: 0;
line-height: 1.4;
}
}

.mainContents .sec_about_w .inner .point_wrap .note{
font-size: 80%;
letter-spacing: 0.12em;
color: #a38c46;
padding: 0 40px 10px 0;
margin: -20px 0 0;
text-align: right;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner .point_wrap .note{
padding: 0 calc(100vw / 1399 * 40) calc(100vw / 1399 * 10) 0;
margin: calc(100vw / 1399 * -20) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner .point_wrap .note{
font-size: calc(100vw / 750 * 24);
padding: calc(100vw / 750 * 60) 0 calc(100vw / 750 * 20);
text-align: right;
}
}

.mainContents .sec_about_w .inner .note{
font-size: 80%;
letter-spacing: 0.12em;
color: #000000;
padding: 70px 0 30px;
margin: 0 -260px 0 0;
text-align: right;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .inner .note{
padding: calc(100vw / 1399 * 80) 0 calc(100vw / 1399 * 30);
margin: 0 calc(100vw / 1399 * -260) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .inner .p_ab_note{
font-size: calc(100vw / 750 * 24);
padding: 0;
margin: 0;
text-align: left;
position: absolute;
top: calc(100vw / 750 * 495);
right: calc(100vw / 750 * 35);
}
}

.mainContents .sec_about_w .wrap1140 .p_ab1{
width: 15%;
position: absolute;
z-index:12;
top:290px;
left:0px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .wrap1140 .p_ab1{
top:calc(100vw / 1399 * 290);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .wrap1140 .p_ab1{
width: 28%;
top:calc(100vw / 750 * 775);
left:calc(100vw / 750 * 35);
}
}

.mainContents .sec_about_w .wrap1140 .p_ab2{
width: 22%;
position: absolute;
z-index:11;
bottom:0px;
left:-50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .wrap1140 .p_ab2{
left: calc(100vw / 1399 * -20);
width: 20%;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .wrap1140 .p_ab2{
width: 64%;
position: static;
margin: calc(100vw / 750 * 20) auto 0;
text-align: center;
}
}

.mainContents .sec_about_w .wrap1140 .p_ab3{
width: 36%;
position: absolute;
z-index:10;
top:60px;
right:20px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_w .wrap1140 .p_ab3{
top:calc(100vw / 1399 * 60);
right:calc(100vw / 1399 * 20);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .wrap1140 .p_ab3{
width: 47%;
top:calc(100vw / 750 * 230);
right:calc(100vw / 750 * 130);
}
}

.mainContents .sec_about_w .wrap1140 .p_ab4{
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_w .wrap1140 .p_ab4{
width: 32%;
position: absolute;
z-index:10;
bottom:calc(100vw / 750 * 275);
right:calc(100vw / 750 * 160);
}
}


/* ===========================================
* sec_about1(black)
* ======================================== */
.mainContents .sec_about_b{
width: 100%;
background: url(/products/special/wbr/images/about_b_curry.png)center left/300px no-repeat, url(/products/special/wbr/images/about_b_bg.webp)top center/cover no-repeat;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b{
background: url(/products/special/wbr/images/about_b_curry.png)center left/calc(100vw / 1399 * 200) no-repeat, url(/products/special/wbr/images/about_b_bg.webp)top center/cover no-repeat;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b{
background: url(/products/special/wbr/images/about_b_bg_sp.webp)top center/cover no-repeat;
}
}

.mainContents .sec_about_b h3{
display: block;
float: left;
width: 30%;
padding: 60px 0 0;
margin: 0;
text-align: right;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b h3{
padding: calc(100vw / 1399 * 60) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b h3{
float: none;
width: 100%;
padding: calc(100vw / 750 * 40) 0 0;
text-align: center;
}
}

.mainContents .sec_about_b h3 img{
width: 68%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b h3 img{
width: 100%;
}
}

.mainContents .sec_about_b .inner{
float: left;
width: 66%;
margin: 0;
padding: 95px 0 0 30px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner{
padding: calc(100vw / 1399 * 95) 0 0 calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner{
float: none;
width: 84%;
margin: calc(100vw / 750 * -230) auto 0;
text-align: center;
padding: 0;
}
}

.mainContents .sec_about_b h4{
padding: 0 0 30px;
margin: 0;
width: 100%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b h4{
padding: 0 0 calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b h4{
padding: 0 0 calc(100vw / 750 * 60);
width: 72%;
}
}

.mainContents .sec_about_b .inner p{
font-size: 120%;
letter-spacing: 0.12em;
line-height: 1.75;
color: #ffffff;
margin: 0;
padding: 0 0 65px 10px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner p{
padding: 0 0 calc(100vw / 1399 * 65) calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner p{
font-size: calc(100vw / 750 * 32);
letter-spacing: 0;
padding: 0 0 calc(100vw / 750 * 110);
text-align: left;
}
}

.mainContents .sec_about_b .inner .point_wrap{
width: 90.5%;
border: 3px solid #a38c46;
box-shadow: 0 0 8px #a5ad68, 0 0 8px #a5ad68 inset;
border-radius: 20px;
background: url(/products/special/wbr/images/about_b_point_bg.webp)repeat-x;
background-size:cover;
margin: 0 0 0 -50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner .point_wrap{
margin: 0 0 0 calc(100vw / 1399 * -50);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner .point_wrap{
width: 94%;
margin: 0 auto;
}
}

.mainContents .sec_about_b .inner .point_wrap h5{
width: 52%;
margin: -50px auto 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner .point_wrap h5{
margin: calc(100vw / 1399 * -50) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner .point_wrap h5{
width: 82%;
margin: calc(100vw / 750 * -70) auto 0;
text-align: center;
}
}

.mainContents .sec_about_b .inner dl{
display: flex;
align-items:center;
margin: 0;
padding: 0;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner dl{
align-items:flex-start;
}
.mainContents .sec_about_b .inner dl:nth-of-type(1){margin: calc(100vw / 750 * 30) 0 0;}
.mainContents .sec_about_b .inner dl:nth-of-type(2){margin: calc(100vw / 750 * 150) 0 0;}
.mainContents .sec_about_b .inner dl:nth-of-type(3){margin: calc(100vw / 750 * 45) 0 0;}
}

.mainContents .sec_about_b .inner dt{
margin: 0 0 0 5px;
padding: 0;
text-align: left;
width: 14.5%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner dt{
margin: 0 0 0 calc(100vw / 1399 * 5);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner dt{
width: 22.5%;
margin: 0;
}
}

.mainContents .sec_about_b .inner dd{
font-size: 110%;
letter-spacing: 0.12em;
line-height: 1.5;
color: #a38c46;
margin: 0;
padding: 0;
text-align: left;
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner dd{
font-size: calc(100vw / 750 * 30);
letter-spacing: 0;
line-height: 1.4;
}
}

.mainContents .sec_about_b .inner .point_wrap .note{
font-size: 80%;
letter-spacing: 0.12em;
color: #a38c46;
padding: 0 0 10px 360px;
margin: -10px 0 0;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner .point_wrap .note{
padding: 0 0 calc(100vw / 1399 * 20) calc(100vw / 1399 * 360);
margin: calc(100vw / 1399 * -10) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner .point_wrap .note{
font-size: calc(100vw / 750 * 24);
padding: calc(100vw / 750 * 35) 0 calc(100vw / 750 * 20);
text-align: right;
}
}

.mainContents .sec_about_b .inner .note{
font-size: 80%;
letter-spacing: 0.12em;
color: #ffffff;
padding: 80px 0 30px;
margin: 0 0 0 -260px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .inner .note{
padding: calc(100vw / 1399 * 70) 0 calc(100vw / 1399 * 30);
margin: 0 0 0 calc(100vw / 1399 * -260);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .inner .p_ab_note{
font-size: calc(100vw / 750 * 24);
padding: 0;
margin: 0;
text-align: left;
position: absolute;
top: calc(100vw / 750 * 470);
left: calc(100vw / 750 * 55);
}
}

.mainContents .sec_about_b .wrap1140 .p_ab1{
width: 15%;
position: absolute;
z-index:12;
top:285px;
right:35px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .wrap1140 .p_ab1{
top:calc(100vw / 1399 * 285);
right:calc(100vw / 1399 * 35);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .wrap1140 .p_ab1{
width: 28%;
top:calc(100vw / 750 * 750);
right:calc(100vw / 750 * 130);
}
}

.mainContents .sec_about_b .wrap1140 .p_ab2{
width: 41%;
position: absolute;
z-index:11;
bottom:0px;
right:-65px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .wrap1140 .p_ab2{
right:calc(100vw / 1399 * -50);
width: 38%;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .wrap1140 .p_ab2{
width: 87%;
position: static;
margin: calc(100vw / 750 * 30) auto 0;
text-align: center;
}
}

.mainContents .sec_about_b .wrap1140 .p_ab3{
width: 28%;
position: absolute;
z-index:10;
top:50px;
right:20px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_about_b .wrap1140 .p_ab3{
top: calc(100vw / 1399 * 50);
right: calc(100vw / 1399 * 20);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .wrap1140 .p_ab3{
width: 43%;
top:calc(100vw / 750 * 270);
right:calc(100vw / 750 * 155);
}
}

.mainContents .sec_about_b .wrap1140 .p_ab4{
}
@media screen and (max-width: 768px) {
.mainContents .sec_about_b .wrap1140 .p_ab4{
width: 22%;
position: absolute;
z-index:10;
bottom:calc(100vw / 750 * 185);
right:calc(100vw / 750 * 45);
}
}


/* ===========================================
* sec_howto
* ======================================== */

.mainContents .sec_howto{
margin: 0 auto;
padding: 0 0 70px;
background:url(/products/special/wbr/images/howto_bg01.png)top left/450px auto no-repeat, url(/products/special/wbr/images/howto_bg02.png)bottom right/255px auto no-repeat;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto{
background:url(/products/special/wbr/images/howto_bg01.png)top left/32% auto no-repeat, url(/products/special/wbr/images/howto_bg02.png)bottom right/18.2% auto no-repeat;
padding: 0 0 calc(100vw / 1399 * 70);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto{
padding: 0 0 calc(100vw / 750 * 70);
width: 100%;
background:url(/products/special/wbr/images/howto_bg01_sp.png)top left/66% auto no-repeat, url(/products/special/wbr/images/howto_bg02_sp.png)bottom right/66% auto no-repeat;
}
}

.mainContents .sec_howto h3{
width: 45%;
margin: 0 auto;
text-align: center;
padding: 100px 0 50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto h3{
padding: calc(100vw / 1399 * 100) 0 calc(100vw / 1399 * 50);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto h3{
width: 68%;
margin: 0 auto;
text-align: center;
padding: calc(100vw / 750 * 100) 0 calc(100vw / 750 * 40);
}
}

.mainContents .sec_howto .photo1{
width: 58%;
margin: 0 auto;
text-align: center;
padding: 0 0 35px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto .photo1{
padding: 0 0 calc(100vw / 1399 * 35);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .photo1{
width: 80%;
margin: 0 auto;
text-align: center;
padding: 0 0 calc(100vw / 750 * 70);
}
}

.mainContents .sec_howto .photo2{
width: 24%;
position: absolute;
right: 25px;
top:70px;
/*z-index: -1;*/
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto .photo2{
right: calc(100vw / 1399 * 25);
top:calc(100vw / 1399 * 70);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .photo2{
width: 41%;
right: calc(100vw / 750 * 30);
top: calc(100vw / 750 * 395);
/*z-index: -1;*/
}
}

.mainContents .sec_howto h4{
padding: 0;
margin: 0 auto;
text-align: center;
font-size: 175%;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto h4{
margin: 0 0 0 calc(100vw / 750 * 50);
text-align: left;
font-size: calc(100vw / 750 * 37);
}
}

/* アコーディオン① */
.mainContents .acc-item1 {
padding: 0;
width: 100%;
max-width: 960px;
margin: 50px auto 0;
z-index: 10;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item1 {
width: 100%;
max-width: calc(100vw / 1399 * 960);
margin: calc(100vw / 1399 * 50) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item1 {
padding: 0;
width: 92%;
max-width: 92%;
margin: calc(100vw / 750 * 100) auto 0;
}
}

.mainContents .acc-item__ttl1 {
margin: 0;
cursor: pointer;
position: relative;
background: #d35028;
}

.mainContents .acc-item__ttl1 img {
width: 82%;
padding: 25px 0 35px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item__ttl1 img {
padding: calc(100vw / 1399 * 25) 0 calc(100vw / 1399 * 35);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item__ttl1 img {
width: 74%;
padding: calc(100vw / 750 * 35) 0 calc(100vw / 750 * 55);
margin: 0 auto;
text-align: center;
}
}

.mainContents .acc-item__ttl1::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: -1px;
margin: 0 auto;
transition: all 0.2s ease-in-out;
display: block;
width: 78px;
height: 30px;
background-image: url(/products/special/wbr/images/howto_ac1_open.png);
background-size: cover;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item__ttl1::after {
width: calc(100vw / 1399 * 78);
height: calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item__ttl1::after {
width: calc(100vw / 750 * 78);
height: calc(100vw / 750 * 30);
bottom: 0;
}
}

.mainContents .acc-item__content1 {
max-height: 0;
overflow: hidden;
transition: .3s;
margin: -1px auto 0;
text-align: center;
background: #ffffff;
}
@media screen and (max-width: 768px) {
.mainContents .acc-item__content1 {
margin: 0 auto 0;
}
}

.mainContents .acc-item1.is-open .acc-item__content1 {
max-height: max-content;
box-shadow: 0px 5px 10px -5px #777777;
padding: 40px 0 40px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item1.is-open .acc-item__content1 {
padding: calc(100vw / 1399 * 40) 0 calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item1.is-open .acc-item__content1 {
padding: calc(100vw / 750 * 40) 0;
}
}

.mainContents .acc-item__content1 .forPC img{
width: 90%;
}

.mainContents .acc-item1.is-open .acc-item__ttl1::after {
background-image: url(/products/special/wbr/images/howto_ac1_close.png);
background-size: cover;
}

/* アコーディオン② */
.mainContents .acc-item2 {
padding: 0;
width: 100%;
max-width: 960px;
margin: 60px auto 20px;
z-index: 10;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item2 {
max-width: calc(100vw / 1399 * 960);
margin: calc(100vw / 1399 * 60) auto calc(100vw / 1399 * 20);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item2 {
padding: 0;
width: 92%;
max-width: 92%;
margin: calc(100vw / 750 * 50) auto calc(100vw / 750 * 20);
}
}

.mainContents .acc-item__ttl2 {
margin: 0;
cursor: pointer;
position: relative;
background: #000000;
}

.mainContents .acc-item__ttl2 img {
width: 82%;
padding: 25px 0 35px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item__ttl2 img {
padding: calc(100vw / 1399 * 25) 0 calc(100vw / 1399 * 35);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item__ttl2 img {
width: 73%;
padding: calc(100vw / 750 * 35) 0 calc(100vw / 750 * 55);
}
}

.mainContents .acc-item__ttl2::after {
content: "";
position: absolute;
right: 0;
left: 0;
bottom: -1px;
margin: 0 auto;
transition: all 0.2s ease-in-out;
display: block;
width: 78px;
height: 30px;
background-image: url(/products/special/wbr/images/howto_ac2_open.png);
background-size: cover;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item__ttl2::after {
width: calc(100vw / 1399 * 78);
height: calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item__ttl2::after {
width: calc(100vw / 750 * 78);
height: calc(100vw / 750 * 30);
bottom: 0;
}
}

.mainContents .acc-item__content2 {
max-height: 0;
overflow: hidden;
transition: .3s;
margin: -1px auto 0;
text-align: center;
background: #ffffff;
}
@media screen and (max-width: 768px) {
.mainContents .acc-item__content2 {
margin: 0 auto 0;
}
}

.mainContents .acc-item2.is-open .acc-item__content2 {
max-height: max-content;
box-shadow: 0px 5px 10px -5px #777777;
padding: 40px 0 40px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .acc-item2.is-open .acc-item__content2 {
padding: calc(100vw / 1399 * 40) 0 calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .acc-item2.is-open .acc-item__content2 {
padding: calc(100vw / 750 * 40) 0 calc(100vw / 750 * 40);
}
}

.mainContents .acc-item__content2 .forPC img{
width: 90%;
}

.mainContents .acc-item2.is-open .acc-item__ttl2::after {
background-image: url(/products/special/wbr/images/howto_ac2_close.png);
background-size: cover;
}


/* ===========================================
* advice_area
* ======================================== */

.mainContents .sec_advice{
margin: 0 auto;
width: 100%;
background: #FFFFED;
}

.mainContents .sec_advice .advice_wrap{
margin: 0 auto; 
/*padding: 80px 30px 70px;*/
width: 100%;
background:url(/products/special/wbr/images/advice_bg.png)top 17px center/100% auto repeat-x, url(/products/special/wbr/images/advice_bg.png)bottom 17px center/100% auto repeat-x;
box-sizing: border-box;
}
@media screen and (max-width: 768px) {
.mainContents .sec_advice .advice_wrap{
/*padding: 11vw 4vw 10vw;*/
padding: 0;
background: url(/products/special/wbr/images/advice_bg_sp.png)top 0.8vw center/100% auto no-repeat, url(/products/special/wbr/images/advice_bg_sp.png)bottom 0.8vw center/100% auto no-repeat;
}
}

.mainContents .sec_advice .advice_img1{
position: absolute;
top: 45px;
left: 120px;
width: 29%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_advice .advice_img1{
top: calc(100vw / 1399 * 45);
left: calc(100vw / 1399 * 120);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_advice .advice_img1{
top: calc(100vw / 750 * 50);
left: calc(100vw / 750 * 75);
width: 58%;
}
}

.mainContents .sec_advice .advice_img2{
margin: 0 auto;
width: 100%;
padding: 75px 0 60px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_advice .advice_img2{
padding: calc(100vw / 1399 * 75) 0 calc(100vw / 1399 * 60);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_advice .advice_img2{
padding: calc(100vw / 750 * 315) 0 calc(100vw / 750 * 400);
width: 100%;
}
}

.mainContents .sec_advice .advice_img3{
position: absolute;
bottom: 37px;
left: 55px;
width: 32%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_advice .advice_img3{
bottom: calc(100vw / 1399 * 37);
left: calc(100vw / 1399 * 55);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_advice .advice_img3{
bottom: 0;
left: calc(100vw / 750 * 60);
width: 65%;
}
}

.mainContents .sec_advice .advice_img4{
position: absolute;
top: 55px;
right: 50px;
width: 10%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_advice .advice_img4{
top: calc(100vw / 750 * 135);
right: calc(100vw / 750 * 85);
width: 17%;
}
}

.mainContents .sec_advice .advice_img5{
position: absolute;
bottom: 50px;
right: 35px;
width: 10%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_advice .advice_img5{
bottom: calc(100vw / 750 * 400);
right: calc(100vw / 750 * 35);
width: 17%;
}
}


/* ===========================================
* recipe
* ======================================== */
.mainContents .sec_recipe{
width: 100%;
margin: 0 auto;
text-align: center;
padding: 60px 0;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe{
width: 100%;
margin: 0 auto;
text-align: center;
padding: calc(100vw / 1399 * 60) 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe{
padding: calc(100vw / 750 * 120) 0;
}
}

.mainContents .sec_recipe h3{
margin: 0 auto 60px;
text-align: center;
width: 58%;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe h3{
margin: 0 auto calc(100vw / 1399 * 60);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe h3{
margin: 0 auto calc(100vw / 750 * 60);
text-align: center;
width: 88%;
}
}

.mainContents .sec_recipe h4{
padding: 0;
margin: 0 auto;
text-align: center;
font-size: 175%;
font-weight: bold;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe h4{
font-size: calc(100vw / 750 * 32);
}
}

/* basic
======================================== */
.mainContents .sec_recipe .basic{
width: 100%;
padding: 40px 0;
margin: 150px auto 40px;
text-align: center;
background: url(/products/special/wbr/images/recipe_basic_bg.gif) repeat;
border-radius: 20px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .basic{
padding: calc(100vw / 1399 * 40) 0;
margin: calc(100vw / 1399 * 150) auto calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic{
padding: calc(100vw / 750 * 45) 0;
margin: calc(100vw / 750 * 130) auto calc(100vw / 750 * 35);
border-radius: 0;
z-index: 0;
}
}

.mainContents .sec_recipe .basic .p_ab1{
width: 34%;
position: absolute;
top:-90px;
right: 0;
left: 0;
margin: 0 auto;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .basic .p_ab1{
top:calc(100vw / 1399 * -90);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic .p_ab1{
width: 52%;
top: calc(100vw / 750 * -85);
right: 0;
left: calc(100vw / 750 * 30);
margin: 0;
z-index: -1;
}
}

.mainContents .sec_recipe .basic ul {
width: 94%;
display: flex;
flex-wrap:wrap;
list-style: none;
margin: 0 auto;
text-align: center;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic ul {
width: 92%;
}
}

.mainContents .sec_recipe .basic ul:nth-child(1) {}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic ul:nth-child(1) {
justify-content: flex-end;
}
}

.mainContents .sec_recipe .basic ul:nth-child(2) {
padding: 60px 0 0;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .basic ul:nth-child(2) {
padding: calc(100vw / 1399 * 60) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic ul:nth-child(2) {
padding: 0;
}
}

.mainContents .sec_recipe .basic ul li {
width: 340px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .basic ul li {
width: calc(100vw / 1399 * 340);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic ul li {
width: 49%;
}
.mainContents .sec_recipe .basic ul:nth-child(2) li{
padding: calc(100vw / 750 * 60) 0 0;
}
}

/* moon
======================================== */
.mainContents .sec_recipe .moon{
width: 88.5%;
padding: 60px 0 50px;
margin: 45px 0 40px;
background: url(/products/special/wbr/images/recipe_moon_bg.gif) repeat;
border-radius: 20px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon{
padding: calc(100vw / 1399 * 60) 0 calc(100vw / 1399 * 50);
margin: calc(100vw / 1399 * 45) 0 calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon{
width: 100%;
padding: calc(100vw / 750 * 145) 0 calc(100vw / 750 * 45);
margin: calc(100vw / 750 * 45) auto calc(100vw / 750 * 35);
border-radius: 0;
text-align: center;
z-index: 0;
}
}

.mainContents .sec_recipe .moon .p_ab1{
width: 31%;
position: absolute;
top:-25px;
left:-15px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon .p_ab1{
top:calc(100vw / 1399 * -25);
left:calc(100vw / 1399 * -15);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon .p_ab1{
width: 43%;
top: calc(100vw / 750 * 20);
left: calc(100vw / 750 * 30);
}
}

.mainContents .sec_recipe .moon .p_ab2{
width: 36%;
position: absolute;
bottom:-22px;
right:-140px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon .p_ab2{
width: 36%;
bottom:calc(100vw / 1399 * -22);
right:calc(100vw / 1399 * -140);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon .p_ab2{
width: 42%;
top: calc(100vw / 750 * 10);
right: calc(100vw / 750 * 25);
z-index: -1;
}
}

.mainContents .sec_recipe .moon .illust1{
width: 19%;
position: absolute;
top:110px;
right: 160px;
z-index: 20;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon .illust1{
top:calc(100vw / 1399 * 110);
right: calc(100vw / 1399 * 160);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon .illust1{
width: 16%;
top:calc(100vw / 750 * 50);
right: calc(100vw / 750 * 275);
}
}

.mainContents .sec_recipe .moon .illust2{
width: 13%;
position: absolute;
top:210px;
left: 75px;
z-index: 20;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon .illust2{
top:calc(100vw / 1399 * 210);
left: calc(100vw / 1399 * 75);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon .illust2{
width: 13%;
top: calc(100vw / 750 * 370);
left: calc(100vw / 750 * 610);
}
}

.mainContents .sec_recipe .moon ul {
width: 71%;
display: flex;
flex-wrap:wrap;
list-style: none;
margin: 0 auto;
text-align: center;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon ul {
width: 92%;
}
}

.mainContents .sec_recipe .moon ul:nth-child(1) {
padding: 0;
margin: 0 0 0 275px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon ul:nth-child(1) {
padding: 0;
margin: 0 0 0 calc(100vw / 1399 * 275);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon ul:nth-child(1) {
padding: 0;
margin: 0 auto;
}
}

.mainContents .sec_recipe .moon ul:nth-child(2) {
padding: 0;
margin: 30px 0 0 55px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon ul:nth-child(2) {
padding: 0;
margin: calc(100vw / 1399 * 30) 0 0 calc(100vw / 1399 * 55);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon ul:nth-child(2) {
padding: 0;
margin: calc(100vw / 750 * 60) auto 0;
}
}

.mainContents .sec_recipe .moon ul li {
width: 340px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .moon ul li {
width: calc(100vw / 1399 * 340);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .moon ul li {
width: 49%;
}
}

/* halloween
======================================== */
.mainContents .sec_recipe .halloween{
width: 88.5%;
padding: 60px 0 50px;
margin: 70px 0 40px 130px;
background: url(/products/special/wbr/images/recipe_halloween_bg.gif) repeat;
border-radius: 20px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween{
padding: calc(100vw / 1399 * 60) 0 calc(100vw / 1399 * 50);
margin: calc(100vw / 1399 * 70) 0 calc(100vw / 1399 * 40) calc(100vw / 1399 * 130);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween{
width: 100%;
padding: calc(100vw / 750 * 145) 0 calc(100vw / 750 * 45);
margin: calc(100vw / 750 * 45) auto calc(100vw / 750 * 35);
border-radius: 0;
text-align: center;
z-index: 0;
}
}

.mainContents .sec_recipe .halloween .p_ab1{
width: 31%;
position: absolute;
top:-50px;
right:-15px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween .p_ab1{
top:calc(100vw / 1399 * -50);
right:calc(100vw / 1399 * -15);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween .p_ab1{
width: 43%;
top: calc(100vw / 750 * 20);
right: calc(100vw / 750 * 30);
}
}

.mainContents .sec_recipe .halloween .p_ab2{
width: 39%;
position: absolute;
bottom:0;
left:-125px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween .p_ab2{
left:calc(100vw / 1399 * -125);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween .p_ab2{
width: 49%;
top: calc(100vw / 750 * 40);
left: calc(100vw / 750 * 10);
z-index: -1;
}
}

.mainContents .sec_recipe .halloween .illust1{
width: 32%;
position: absolute;
top:100px;
left: 45px;
z-index: 20;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween .illust1{
top:calc(100vw / 1399 * 100);
left: calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween .illust1{
width: 11%;
top:calc(100vw / 750 * 90);
left: calc(100vw / 750 * 30);
}
}

.mainContents .sec_recipe .halloween .illust2{
width: 14%;
position: absolute;
top:160px;
right: 55px;
z-index: 20;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween .illust2{
top:calc(100vw / 1399 * 160);
right: calc(100vw / 1399 * 55);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween .illust2{
width: 9%;
top:calc(100vw / 750 * 385);
right: calc(100vw / 750 * 375);
}
}

.mainContents .sec_recipe .halloween ul {
width: 71%;
display: flex;
flex-wrap:wrap;
list-style: none;
margin: 0 auto;
text-align: center;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween ul {
width: 92%;
}
}

.mainContents .sec_recipe .halloween ul:nth-child(1) {
padding: 0;
margin: 0 0 0 410px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween ul:nth-child(1) {
margin: 0 0 0 calc(100vw / 1399 * 410);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween ul:nth-child(1) {
padding: 0;
margin: 0 auto;
justify-content: flex-end;
}
}

.mainContents .sec_recipe .halloween ul:nth-child(2) {
padding: 0;
margin: 30px 0 0 260px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween ul:nth-child(2) {
margin: calc(100vw / 1399 * 30) 0 0 calc(100vw / 1399 * 260);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween ul:nth-child(2) {
padding: 0;
margin: calc(100vw / 750 * 60) auto 0;
}
}

.mainContents .sec_recipe .halloween ul li {
width: 340px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_recipe .halloween ul li {
width: calc(100vw / 1399 * 340);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .halloween ul li {
width: 49%;
}
}

.mainContents .sec_recipe .basic li .btn,
.mainContents .sec_recipe .moon li .btn,
.mainContents .sec_recipe .halloween li .btn{
margin: 10px auto 0;
}
@media screen and (max-width: 768px) {
.mainContents .sec_recipe .basic li .btn,
.mainContents .sec_recipe .moon li .btn,
.mainContents .sec_recipe .halloween li .btn{
margin: calc(100vw / 750 * 10) auto 0;
}
}

/* text loop
======================================== */
.mainContents .loop-container {
overflow: hidden;
background: #fff;
height: 38px; /* 高さを固定 */
}
@media screen and (max-width: 768px) {
.mainContents .loop-container {
height: calc(100vw / 750 * 38); 
}
}

.mainContents .loop-track {
display: flex;
width: max-content;
animation: scroll-left 20s linear infinite;
}

.mainContents .loop-item {
flex: none;
}

.mainContents .loop-item img {
height: 38px; /* 高さ固定 */
width: auto; /* アスペクト比維持 */
display: block;
}
@media screen and (max-width: 768px) {
.mainContents .loop-item img {
height: calc(100vw / 750 * 38);
}
}

@keyframes scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}


/* ===========================================
* sns
* ======================================== */
.mainContents .sns_area {
width: 100%;
margin: 0 auto;
text-align: center;
}

.mainContents .sns_area ul{
display: flex;
justify-content: center;
margin-top: 0;
}

.mainContents .sns_area li{
width: 6%;
}

.mainContents .sns_area li:not(:first-child) {
margin-left: 49px;
}
@media screen and (max-width: 768px) {
.mainContents .sns_area li {
width: 15.47%;
}
.mainContents .sns_area li:not(:first-child) {
margin-left: 10.7%;
}
}

/* ===========================================
* slider
* ======================================== */
.mainContents .slider-box{
display: block;
margin: 0 auto;
width: 72.5%;
position: relative;
}

.mainContents .slider-box ul{
width: 100%;
}

.mainContents .swiper{
width: 100%;
}

/* スライダーの設定 ① */
.mainContents .slider .slick-prev{
left: -8.25vw;
background: url(/products/special/wbr/images/howto_ac1_sd_prev.png)top center/contain no-repeat;
}

.mainContents .slider .slick-next{
right: -8.25vw;
background: url(/products/special/wbr/images/howto_ac1_sd_next.png)top center/contain no-repeat;
}

.mainContents .slider .slick-prev,
.mainContents .slider .slick-next{
width: 7.14vw;
height: 7.14vw;
z-index: 100;
}

.mainContents .slider .slick-prev::before,
.mainContents .slider .slick-next::before {
content: "";
color: #000; 
}

.mainContents .slider .slick-disabled{
display: none!important;
}

.mainContents .slider .slick-dots li{
margin: 0 2px;
bottom: calc(100vw / 750 * -30)!important;
}

.mainContents .slider .slick-dots li button::before{
content: "";
width: 1.6vw;
height: 1.6vw;
border-radius: 10px;
background: #e9a793;
}
.mainContents .slider .slick-dots li.slick-active button::before{
background: #d35028;
}

/* スライダーの設定 ② */
.mainContents .slider2 .slick-prev{
left: -8.25vw;
background: url(/products/special/wbr/images/howto_ac2_sd_prev.png)top center/contain no-repeat;
}

.mainContents .slider2 .slick-next{
right: -8.25vw;
background: url(/products/special/wbr/images/howto_ac2_sd_next.png)top center/contain no-repeat;
}

.mainContents .slider2 .slick-prev,
.mainContents .slider2 .slick-next{
width: 7.14vw;
height: 7.14vw;
z-index: 100;
}

.mainContents .slider2 .slick-prev::before,
.mainContents .slider2 .slick-next::before {
content: "";
color: #000; 
}

.mainContents .slider2 .slick-disabled{
display: none!important;
}

.mainContents .slider2 .slick-dots li{
margin: 0 2px;
bottom: calc(100vw / 750 * -30)!important;
}

.mainContents .slider2 .slick-dots li button::before{
content: "";
width: 1.6vw;
height: 1.6vw;
border-radius: 10px;
background: #b2b2b2;
}
.mainContents .slider2 .slick-dots li.slick-active button::before{
background: #000000;
}