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

#productsListLead{
padding: 0 10px;
}
#productsListLead .box{
padding: 100px 0 120px;
}
#productsListLead figure{
width: 600px;
position: absolute;
top: -90px;
right: 0;
z-index: 1;
}
#productsListLead .txt{
position: relative;
padding-right: 30%;
z-index: 2;
}
#productsListLead h2{
font-size: 187.5%;
color: #1171c8;
font-weight: 700;
line-height: 2;
}
#productsListLead p{
margin-top: 2em;
line-height: 2.25;
}

@media screen and (max-width: 999px){
#productsListLead .box{
padding: 40px 0;
}
#productsListLead figure{
width: 50%;
max-width: 240px;
top: -30px;
}
#productsListLead .txt{
padding-right: 0;
}
#productsListLead h2{
font-size: 171.14%;
}
#productsListLead p{
margin-top: 1.5em;
}
}/*999*/





#productsListMain{
position: relative;
padding: 0 10px 140px;
z-index: 2;
}
#productsListMain ul{
display: flex;
flex-wrap: wrap;
margin: -50px 0 0 -50px;
}
#productsListMain ul li{
width: 50%;
padding-left: 50px;
margin-top: 50px;
}
#productsListMain ul li a{
display: block;
height: 100%;
color: #111111;
background-color: #ffffff;
text-decoration: none;
overflow: hidden;
border-radius: 20px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.10);
box-shadow: 0 0 20px rgba(0,0,0,0.10);
}
#productsListMain ul li figure{
padding-top: 50%;
position: relative;
overflow: hidden;
}
#productsListMain ul li figure img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1;
}
#productsListMain ul li a:hover figure img{
transform: scale(1.1);
}
#productsListMain ul li .txt{
padding: 40px 50px;
}
#productsListMain ul li .txt .title{
font-size: 150%;
color: #1171c8;
font-weight: 700;
line-height: 1.5;
position: relative;
}
#productsListMain ul li .txt .title.cloz{
padding-left: 60px;
}
#productsListMain ul li .txt .title.cloz::before{
content: '';
display: block;
position: absolute;
left: 0;
top: 0.75em;
transform: translate(0, -50%);
width: 50px;
height: 22px;
background-image: url(../images/cloz.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
#productsListMain ul li .txt .excerpt{
margin-top: 1em;
}
#productsListMain ul li .txt .btn{
margin: 30px auto 0;
width: 240px;
}

@media screen and (max-width: 999px){
#productsListMain{
padding: 0 10px 50px;
}
#productsListMain ul{
display: block;
margin: -20px 0 0 0;
}
#productsListMain ul li{
width: auto;
padding-left: 0;
margin-top: 20px;
}
#productsListMain ul li .txt{
padding: 20px;
}
#productsListMain ul li .txt .btn{
margin: 20px auto 0;
}
}/*999*/





#productsDetailArea{
padding: 0 0 140px;
}

@media screen and (max-width: 999px){
#productsDetailArea{
padding: 0 0 50px;
}
}/*999*/





#productsLead,
.productsLeadCommon{
position: relative;
padding: 0 10px;
}
#productsLead figure,
.productsLeadCommon figure{
transform: translate(0, -70px);
}
#productsLead figure img,
.productsLeadCommon figure img{
width: 100%;
height: auto;
}
#productsLead .txt{
margin-top: -70px;
}
.productsLeadCommon .txt{
margin-top: 200px;
}
#productsLead .flex,
.productsLeadCommon .flex{
display: flex;
justify-content: space-between;
margin-top: 1em;
}
#productsLead .flex>div,
.productsLeadCommon .flex>div{
width: calc(50% - 20px);
}
#productsLead h2,
.productsLeadCommon h2{
font-size: 187.5%;
color: #1171c8;
font-weight: 700;
line-height: 1.5;
margin-top: 2em;
position: relative;
}
.productsLeadCommon h2{
margin-top: 0;
}
#productsLead h2.cloz,
.productsLeadCommon h2.cloz{
padding-left: 110px;
}
#productsLead h2.cloz::before,
.productsLeadCommon h2.cloz::before{
content: '';
display: block;
position: absolute;
left: 0;
top: 0.75em;
transform: translate(0, -50%);
width: 100px;
height: 44px;
background-image: url(../images/cloz.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
#productsLead p.lead,
.productsLeadCommon p.lead{
font-size: 125%;
font-weight: 900;
margin-top: 1em;
}
#productsLead .flex p.lead,
.productsLeadCommon .flex p.lead{
margin-top: 0;
}
#productsLead p.excerpt,
.productsLeadCommon p.excerpt{
margin-top: 2em;
}
#productsLead p.btn,
.productsLeadCommon p.btn{
max-width: 300px;
margin: 40px auto 0;
}
#productsLead p.btn a,
.productsLeadCommon p.btn a{
padding: 20px 10px;
}
#productsLead p.btn.blank a::before,
.productsLeadCommon p.btn.blank a::before{
width: 24px;
height: 24px;
background-image: url(../images/shopping.png);
}
#productsLead p.btn.blank.catalog a::before,
.productsLeadCommon p.btn.blank.catalog a::before{
background-image: url(../images/book.png);
}
#productsLead .btnList,
.productsLeadCommon .btnList{
display: flex;
justify-content: center;
margin: 40px auto 0;
}
#productsLead .btnList p.btn,
.productsLeadCommon .btnList p.btn{
margin: 0 10px;
width: 300px;
}
#productsLead .flexMovie>div,
.productsLeadCommon .flexMovie>div{
position: relative;
width: 100%;
padding-top: 56.25%;
}
#productsLead .flexMovie iframe,
.productsLeadCommon .flexMovie iframe{
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
}

@media screen and (max-width: 999px){
#productsLead figure,
.productsLeadCommon figure{
transform: translate(0, -30px);
}
#productsLead .txt,
.productsLeadCommon .txt{
margin-top: -30px;
}
.productsLeadCommon .txt{
margin-top: 100px;
}
#productsLead .flex,
.productsLeadCommon .flex{
display: block;
margin-top: 0;
}
#productsLead .flex>div,
.productsLeadCommon .flex>div{
width: auto;
}
#productsLead h2,
.productsLeadCommon h2{
font-size: 171.14%;
margin-top: 1.5em;
}
.productsLeadCommon h2{
margin-top: 0;
}
#productsLead h2.cloz,
.productsLeadCommon h2.cloz{
padding-left: 0;
}
#productsLead h2.cloz::before,
.productsLeadCommon h2.cloz::before{
position: relative;
left: auto;
top: auto;
transform: none;
width: 70px;
height: 31px;
margin-bottom: 5px;
}
#productsLead .flex p.lead,
.productsLeadCommon .flex p.lead{
margin-top: 1em;
}
#productsLead p.btn,
.productsLeadCommon p.btn{
margin: 30px auto 0;
}
#productsLead .btnList,
.productsLeadCommon .btnList{
display: block;
margin: 30px auto 0;
}
#productsLead .btnList p.btn,
.productsLeadCommon .btnList p.btn{
margin: 0 auto;
width: auto;
}
#productsLead .btnList p.btn+p.btn,
.productsLeadCommon .btnList p.btn+p.btn{
margin-top: 10px;
}
#productsLead .flexMovie,
.productsLeadCommon .flexMovie{
margin-top: 20px;
}
}/*999*/





#productsGallery,
.productsGalleryCommon{
margin-top: 100px;
padding: 0 10px;
}
#productsGallery h2,
.productsGalleryCommon h2{
font-size: 187.5%;
color: #1171c8;
font-weight: 700;
line-height: 1.5;
}
#productsGallery ul.gallery,
.productsGalleryCommon ul.gallery{
display: flex;
flex-wrap: wrap;
margin: 0 0 0 -40px;
}
#productsGallery ul.gallery li,
.productsGalleryCommon ul.gallery li{
width: 25%;
padding-left: 40px;
margin-top: 40px;
}
#productsGallery ul.gallery li a,
.productsGalleryCommon ul.gallery li a{
display: block;
padding-top: 100%;
overflow: hidden;
position: relative;
border-radius: 20px;
-webkit-box-shadow: 0 0 20px rgba(0,0,0,0.10);
box-shadow: 0 0 20px rgba(0,0,0,0.10);
}
#productsGallery ul.gallery li a::before,
.productsGalleryCommon ul.gallery li a::before{
content: '';
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #1171c8;
opacity: 0;
transition: opacity 200ms ease;
z-index: 2;
}
#productsGallery ul.gallery li a::after,
.productsGalleryCommon ul.gallery li a::after{
content: '';
display: block;
position: absolute;
right: 10px;
bottom: 10px;
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #1171c8;
background-image: url(../images/zoom.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 14px auto;
transition: transform 200ms ease;
z-index: 3;
}
#productsGallery ul.gallery li a:hover::before,
.productsGalleryCommon ul.gallery li a:hover::before{
opacity: 0.2;
}
#productsGallery ul.gallery li a:hover::after,
.productsGalleryCommon ul.gallery li a:hover::after{
transform: scale(1.3);
}
#productsGallery ul.gallery li a img,
.productsGalleryCommon ul.gallery li a img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
font-family: 'object-fit: cover;';
transition: transform 1000ms cubic-bezier(0.22, 1, 0.36, 1);
z-index: 1;
}
#productsGallery ul.gallery li a:hover img,
.productsGalleryCommon ul.gallery li a:hover img{
transform: scale(1.1);
}

@media screen and (max-width: 999px){
#productsGallery,
.productsGalleryCommon{
margin-top: 50px;
}
#productsGallery h2,
.productsGalleryCommon h2{
font-size: 171.14%;
margin-bottom: 0.5em;
}
#productsGallery ul.gallery,
.productsGalleryCommon ul.gallery{
margin: 0 0 0 -15px;
}
#productsGallery ul.gallery li,
.productsGalleryCommon ul.gallery li{
width: 50%;
padding-left: 15px;
margin-top: 15px;
}
}/*999*/





.shopBtn{
position: fixed;
left: 10px;
bottom: 10px;
z-index: 2;
}
.shopBtn a{
display: flex;
justify-content: center;
align-items: center;
width: 60px;
height: 60px;
position: relative;
text-align: center;
color: #ffffff;
background-color: #1171c8;
border-radius: 100em;
text-decoration: none;
overflow: hidden;
transition: all 200ms ease;
}
.shopBtn a:hover{
width: 100%;
padding: 0 60px;
/*background-color: #70aade;*/
transition: all 300ms cubic-bezier(0.34, 1.56, 0.64, 1);
}
.shopBtn a::before{
content: '';
display: block;
width: 24px;
height: 24px;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
background-image: url(../images/shopping.png);
background-repeat: no-repeat;
background-position: center center;
background-size: 100% auto;
}
.shopBtn a:hover::before{
right: 20px;
transform: translate(0, -50%);
}
.shopBtn a span{
display: block;
position: relative;
opacity: 0;
visibility: hidden;
transition: none;
white-space: nowrap;
}
.shopBtn a:hover span{
opacity: 1;
visibility: visible;
transition: all 500ms ease;
}

@media screen and (max-width: 999px){
.shopBtn{
left: 50%;
width: 300px;
transform: translate(-50%, 0);
}
.shopBtn a{
width: 100%;
height: 50px;
padding: 0 60px;
}
.shopBtn a:hover{
width: 100%;
padding: 0 60px;
}
.shopBtn a::before{
right: 20px;
transform: translate(0, -50%);
}
.shopBtn a span{
opacity: 1;
visibility: visible;
}
}/*999*/





.imageContent{
display: none;
position: relative;
}
.imageContent p.shopBtn{
position: absolute;
left: 10px;
bottom: 10px;
}
.imageContent p.btn{
max-width: 300px;
margin: 20px auto 0;
}
.imageContent p.btn a{
padding: 20px 10px;
}
.imageContent p.btn.blank a::before{
width: 24px;
height: 24px;
background-image: url(../images/shopping.png);
}

@media screen and (max-width: 999px){
.imageContent p.btn{

}
}/*999*/





.fancybox-content{
padding: 20px;
}
.fancybox-slide--html{
padding-left: 0;
padding-right: 0;
}

@media screen and (max-width: 999px){
.fancybox-content{
}
}/*999*/