@charset "UTF-8";

@media (min-width: 768px) {

#protectUvCreamAllWrap {
width: 100%;
font-size: 16px;
text-align: center;
color: #595757;
padding-bottom: 120px;
box-sizing: border-box;
line-height: 1.8;
}

#protectUvCreamAllWrap #kvWrap img {
width: 100%;
}

#protectUvCreamAllWrap #mainCopy {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 70px;
text-align: center;
margin: 60px auto;
}

#protectUvCreamAllWrap #mainCopy span {
font-size: 30px;
display: block;
}

#protectUvCreamAllWrap #mainCopyTxt {
text-align: center;
}

#protectUvCreamAllWrap #wrapColor {
background-color: #f5f5f5;
width: 100%;
margin: 120px auto;
padding: 120px 0;
}

#protectUvCreamAllWrap #wrapMain {
background: url("../img/mt_protect_uv_cream/main_bg.webp") no-repeat center;
background-size: contain;
max-width: 1260px;
text-align: left;
margin: 0 auto;
padding: 0 30px;
}

#protectUvCreamAllWrap .subTitle {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 30px;
text-align: center;
margin-bottom: 50px;
}

#protectUvCreamAllWrap #circle655 {
position: relative;
background-color: #fff;
width: 655px;
height: 655px;
display: table;
padding: 0 100px;
margin: 60px auto;
margin-bottom: 30px;
border: 1px solid #707070;
border-radius: 50%;
left: 7%;
}

#protectUvCreamAllWrap #circle655 .inner,
#protectUvCreamAllWrap #circle462-1 .inner,
#protectUvCreamAllWrap #circle462-2 .inner {
position: relative;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
top: -10px;
}

#protectUvCreamAllWrap #circle655 .inner h3,
#protectUvCreamAllWrap #circle462-1 .inner h3,
#protectUvCreamAllWrap #circle462-2 .inner h3 {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 30px;
text-align: center;
margin-bottom: 30px;
line-height: 1.5;
}

#protectUvCreamAllWrap #circle655 .inner #approachFlex {
margin-top: 30px;
display: flex;
justify-content: space-between;
}

#protectUvCreamAllWrap #circle655 .inner #approachFlex .approach {
background-color: #f1f1f1;
width: 140px;
font-size: 15px;
text-align: left;
padding: 15px 17px;
border-radius: 10px;
line-height: 1.6;
letter-spacing: 0;
}

#protectUvCreamAllWrap #circle462Flex {
position: relative;
width: 980px;
margin: 0 auto;
display: flex;
justify-content: space-between;
left: 17%;
}

#protectUvCreamAllWrap #circle462-1 {
position: relative;
background-color: #fff;
width: 462px;
height: 462px;
display: table;
padding: 0 70px;
margin: 0 auto;
border: 1px solid #707070;
border-radius: 50%;
}

#protectUvCreamAllWrap #circle462-2 {
position: relative;
background-color: #fff;
width: 462px;
height: 462px;
display: table;
padding: 0 70px;
margin: 0 auto;
border: 1px solid #707070;
border-radius: 50%;
top: -100px;
}

#protectUvCreamAllWrap .wrap,
#protectUvCreamAllWrap #wrapBottom {
max-width: 1260px;
text-align: left;
margin: 0 auto;
padding: 0 30px;
}

#protectUvCreamAllWrap #img {
width: 780px;
margin: 60px auto;
margin-bottom: 170px;
}

#protectUvCreamAllWrap #uvFlex {
display: flex;
justify-content: space-between;
}

#protectUvCreamAllWrap #uvGel,
#protectUvCreamAllWrap #uvCream {
background-color: #f5f5f5;
width: 50%;
padding: 60px;
}

#protectUvCreamAllWrap #uvGel p {
margin-bottom: 20px;
}

#protectUvCreamAllWrap #uvCream {
background-color: #e9eff3;
}

#protectUvCreamAllWrap .uvBand {
background-color: #fff;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 28px;
text-align: center;
padding: 5px 20px;
border: 1px solid #707070;
border-radius: 100px;
line-height: 1.3;
}

#protectUvCreamAllWrap .uvTitle {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 28px;
text-align: center;
margin: 60px auto;
line-height: 1.5;
}

#protectUvCreamAllWrap .products {
width: 20%;
margin: 80px auto;
}

}

@media (max-width: 767px) {

#protectUvCreamAllWrap {
width: 100%;
font-size: 16px;
text-align: center;
color: #595757;
padding-bottom: 120px;
box-sizing: border-box;
line-height: 1.8;
overflow-x: hidden;
}

#protectUvCreamAllWrap #kvWrap img {
width: 100%;
}

#protectUvCreamAllWrap #mainCopy {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 55px;
text-align: left;
margin: 60px auto;
line-height: 1.3;
}

#protectUvCreamAllWrap #mainCopy span {
font-size: 25px;
display: block;
margin-top: 15px;
line-height: 1.7;
}

#protectUvCreamAllWrap #mainCopyTxt {
}

#protectUvCreamAllWrap #wrapColor {
background-color: #f5f5f5;
width: 100%;
margin: 60px auto;
padding: 60px 0 130px;
}

#protectUvCreamAllWrap #wrapMain {
width: 100%;
text-align: left;
margin: 0 auto;
}

#protectUvCreamAllWrap #wrapMain p {
width: 88%;
margin: 0 auto;
margin-bottom: 40px;
}

#protectUvCreamAllWrap .subTitle {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 25px;
text-align: center;
margin-bottom: 50px;
line-height: 1.6;
}

#protectUvCreamAllWrap #circle655 {
position: relative;
width: 100%;
margin: 30px auto;
}

#protectUvCreamAllWrap #circle655::after {
position: absolute;
background-color: #fff;
width: 800px;
height: 800px;
content: "";
margin: auto;
border: 1px solid #707070;
border-radius: 50%;
z-index: 0;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#protectUvCreamAllWrap #circle655 .inner,
#protectUvCreamAllWrap #circle462-1 .inner,
#protectUvCreamAllWrap #circle462-2 .inner {
position: relative;
margin: 0 auto;
display: table-cell;
vertical-align: middle;
z-index: 1;
}

#protectUvCreamAllWrap #circle655 .inner h3,
#protectUvCreamAllWrap #circle462-1 .inner h3,
#protectUvCreamAllWrap #circle462-2 .inner h3 {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 25px;
text-align: center;
margin-bottom: 30px;
line-height: 1.5;
}

#protectUvCreamAllWrap #circle655 .inner #approachFlex {
margin-top: 30px;
}

#protectUvCreamAllWrap #circle655 .inner #approachFlex .approach {
background-color: #f1f1f1;
width: 88%;
font-size: 15px;
text-align: left;
margin: 0 auto;
margin-bottom: 10px;
padding: 10px 17px;
border-radius: 10px;
line-height: 1.6;
letter-spacing: 0;
}

#protectUvCreamAllWrap #circle462Flex {
position: relative;
width: 100%;
margin: 0 auto;
}

#protectUvCreamAllWrap #circle462-1 {
position: relative;
background-color: #fff;
width: 100%;
margin: 30px auto;
}

#protectUvCreamAllWrap #circle462-1::after {
position: absolute;
background-color: #fff;
width: 450px;
height: 450px;
content: "";
margin: auto;
border: 1px solid #707070;
border-radius: 50%;
z-index: 0;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#protectUvCreamAllWrap #circle462-2 {
position: relative;
background-color: #fff;
width: 100%;
margin: 80px auto;
}

#protectUvCreamAllWrap #circle462-2::after {
position: absolute;
background-color: #fff;
width: 450px;
height: 450px;
content: "";
margin: auto;
border: 1px solid #707070;
border-radius: 50%;
z-index: 0;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
}

#protectUvCreamAllWrap .wrap {
width: 88%;
text-align: left;
margin: 0 auto;
}

#protectUvCreamAllWrap #img {
width: 100%;
margin: 60px auto;
margin-bottom: 60px;
}

#protectUvCreamAllWrap #wrapBottom {
width: 100%;
text-align: left;
}

#protectUvCreamAllWrap #uvFlex {
}

#protectUvCreamAllWrap #uvGel,
#protectUvCreamAllWrap #uvCream {
background-color: #f5f5f5;
width: 100%;
padding: 60px 0;
}

#protectUvCreamAllWrap #uvGel p,
#protectUvCreamAllWrap #uvCream p {
margin-bottom: 20px;
padding: 0 30px;
}

#protectUvCreamAllWrap #uvCream {
background-color: #e9eff3;
}

#protectUvCreamAllWrap .uvBand {
background-color: #fff;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 24px;
text-align: center;
padding: 5px 0;
border-top: 1px solid #707070;
border-bottom: 1px solid #707070;
line-height: 1.3;
}

#protectUvCreamAllWrap .uvTitle {
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
font-size: 24px;
text-align: center;
margin: 30px auto;
line-height: 1.5;
}

#protectUvCreamAllWrap .products {
width: 30%;
margin: 30px auto;
}

}