@charset "UTF-8";

/*---------------
ローディング画面
---------------*/
.loading {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
z-index: 100001;
background-color: #e60012;
display: flex;
align-items: center;
justify-content: center;
animation: fadeOut 1.5s 2.5s forwards;
}
@keyframes fadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
visibility: hidden;
}
}
.loading_logo {
opacity: 0;
animation: logo_fade 3s 0.5s forwards;
width: 20%;
max-width: 130px;
}
@keyframes logo_fade {
0% {
opacity: 0;
transform: translateY(20px);
}
60% {
opacity: 1;
transform: translateY(0);
}
100% {
opacity: 0;
}
}
/*---------------
#hero
---------------*/
#hero{
position: relative;
}
#hero .copy{
display: block;
position: absolute;
top: 55%;
left: 51%;
transform: translate(-50%,-50%);
margin: 0 auto;
}
/*---------------
#concept
---------------*/
#concept{
position: relative;
padding-bottom: 0;
}
#concept:after{
position: absolute;
left: 0;
display: block;
content: " ";
background-color: #f4f4f4;
z-index: -100;
}
#concept .box .img{
position: relative;
}
#concept .box .img:after{
position: absolute;
display: block;
content: " ";
width: 100%;
height: 100%;
border: solid 1px #333;
}
/*---------------
#lineup
---------------*/
#lineup .lineup-slider li{
position: relative;
}
#lineup .lineup-slider li div img{
display: block;
border: solid 1px #333;
}
#lineup .lineup-slider li div span{
position: absolute;
top: 0;
left: 0;
transform: rotate(90deg);
transform-origin: 0 0;
font-weight: 500;
padding-top: 5px;
}
#lineup .lineup-slider li div h3{
font-weight: 500;
}
#lineup .btn{
margin-left: auto;
}
/*---------------
#howto
---------------*/
#howto{
position: relative;
}
#howto:after{
position: absolute;
top: 0;
left: 0;
display: block;
content: " ";
width: 100%;
background-color: #f4f4f4;
z-index: -100;
}
#howto p{
text-align: center;
line-height: 1.8em;
}
#howto ul li{
position: relative;
}
#howto ul li:nth-child(-n+2):after{
position: absolute;
content: '';
display: block;
background-image: url("../images/arrow.png");
background-size: contain;
background-repeat: no-repeat;
vertical-align: middle;
}
#howto ul li p{
text-align: center;
}
/*---------------
#giftbox
---------------*/
#giftbox{
padding-top: 0;
background-color: #f4f4f4;
}
#giftbox .box ul.inner > li{
background-color: #fff;
}
#giftbox .box ul.inner > li:last-of-type{
margin-bottom: 0;
}
#giftbox .box ul.inner > li h3{
text-align: center;
font-weight: 500;
}
#giftbox .box ul.inner ul li{
font-weight: 500;
}
/*---------------
#store
---------------*/
#store ul.store > li:last-of-type{
margin-bottom: 0;
}
#store ul.store li .detail h3{
font-weight: 500;
}
#store ul.store li .detail p{
line-height: 1.5em;
}
#store ul.store li .detail ul li{
font-weight: 500;
line-height: 1.5em;
}
#store ul.store li .detail span{
display: block;
font-weight: 500;
}
#store ul.shop li{
position: relative;
background-color: #f4f4f4;
}
#store ul.shop li:after{
position: absolute;
top: 5px;
left: 5px;
display: block;
content: " ";
width: 100%;
height: 100%;
border: solid 1px #333;
}
#store ul.shop li a{
position: relative;
font-weight: 500;
display: flex;
justify-content: space-between;
z-index: 1;
}
#store ul.shop li a:after{
display: inline-block;
content: "\f054";
font-family: "Font Awesome 5 Free";
font-weight: 600;
transition: .6s;
}
#store ul.shop li a:hover:after{
transform: translateX(10px);
transition: .6s;
}
/*---------------
#children
---------------*/
#children{
position: relative;
}
#children:after{
position: absolute;
top: 0;
left: 0;
display: block;
content: " ";
width: 100%;
background-color: #f4f4f4;
z-index: -100;
}
#children p{
text-align: center;
line-height: 1.8em;
}
#children ul li img{
display: block;
}
#children ul li .btn{
margin: 0 auto;
}
/*---------------
#news
---------------*/
#news{
background-color: #f4f4f4;	
}
#news ul li{
background-color: #fff;
}
#news ul li a img{
object-fit: cover;
}
#news ul li a h3{
font-weight: 500;
line-height: 1.5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#news ul li a p{
font-weight: 500;
line-height: 1.5em;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
}
#news .btn{
margin-left: auto;
}

@media (max-width: 560px){
/*---------------
#hero
---------------*/
#hero{
margin-top: 60px;
}
#hero .copy{
width: 65%;
}
/*---------------
#concept
---------------*/
#concept{
padding-top: 60px;
}
#concept:after{
top: 120px;
width: 80%;
height: 20vh;
}
#concept .box .img{
display: none;
}
#concept .box .img:after{
top: 5px;
left: 5px;
}
#concept .box .text img{
width: 80%;
margin-left: 5px;
padding-bottom: 25px;	
}
#concept .box .text p{
line-height: 2.5em;
padding-left: 10px;
}
/*---------------
#lineup
---------------*/
#lineup .lineup-slider{
padding-bottom: 40px;
}
#lineup .lineup-slider li{
position: relative;
margin: 0 35px;
}
#lineup .lineup-slider li div{
transition: .3s;
}
#lineup .lineup-slider li div:hover{
opacity: 0.7;
transition: .3s;
}
#lineup .lineup-slider li div img{
padding: 10px;
margin-bottom: 10px;
}
#lineup .btn{
width: 145px;
}
/*---------------
#howto
---------------*/
#howto:after{
height: 60vh;
}
#howto .box > p{
padding-bottom: 40px;
}
#howto ul li{
padding-bottom: 60px;
}
#howto ul li:last-of-type{
padding-bottom: 0;
}
#howto ul li:nth-child(-n+2):after{
bottom: 20px;
right: 50%;
transform: translateX(50%) rotate(180deg);
width: 20px;
height: 20px;
}
#howto ul li img{
display: block;
width: 40%;
margin: 0 auto;
}
#howto ul li p{
font-size: 1.6rem;
}
/*---------------
#giftbox
---------------*/
#giftbox .box{
padding-top: 60px;
}
#giftbox .box ul.inner > li{
padding:  30px 5%;
margin-bottom: 40px;
}
#giftbox .box ul.inner > li h3{
font-size: 2.0rem;
padding-bottom: 20px;
}
#giftbox .box ul.inner > li .slider{
margin-bottom: 20px;
}
#giftbox .box ul.inner ul li{
padding-bottom: 7px;
}
/*---------------
#store
---------------*/
#store ul.store{
padding-bottom: 60px;
}
#store ul.store > li{
margin-bottom: 60px;
}
#store ul.store li .g-map{
width: 100%;
height: 25vh;
margin-bottom: 20px;
}
#store ul.store li .detail h3{
font-size: 2.0rem;
padding-bottom: 10px;
}
#store ul.store li .detail p{
padding-bottom: 7px;
}
#store ul.store li .detail span{
font-size: 1.3rem;
padding-top: 10px;
}
#store ul.store li .detail .btn{
margin: 30px 0 0 auto;
width: 160px;
}
#store ul.shop li{
width: calc(100% - 7px) ;
margin-bottom: 20px;
}
#store ul.shop li:last-of-type{
margin-bottom: 0;
}
#store ul.shop li a{
padding: 30px 30px 20px 20px;
}
/*---------------
#children
---------------*/
#children:after{
height: 60vh;
}
#children p{
padding-bottom: 30px;
}
#children ul li{
margin-bottom: 40px;
}
#children ul li:last-of-type{
margin-bottom: 0;
}
#children ul li img{
width: 60%;
margin: 0 auto 30px;
}
#children ul li .btn{
width: 155px;
}
#children ul li .btn a{
width: 75px;
}
/*---------------
#news
---------------*/
#news ul{
margin-bottom: 40px;
}
#news ul li{
margin-bottom: 20px;
padding: 20px 5%;
}
#news ul li a{
display: flex;
justify-content: space-between;
}
#news ul li a img{
aspect-ratio: 1.2 / 1;
width: 30%;
}
#news ul li a div{
width: 65%;
}
#news ul li a div h3{
font-size: 1.6rem;
margin-bottom: 5px;
-webkit-line-clamp: 1;
}
#news ul li a div p{
font-size: 1.4rem;
-webkit-line-clamp: 2;
}
#news .btn{
width: 145px;
}
#news .btn a{
width: 65px;
}	
}

@media (min-width: 561px){
/*---------------
#hero
---------------*/
#hero .copy{
width: 50%;
max-width: 500px;
}
/*---------------
#concept
---------------*/
#concept:after{
top: 200px;
width: 80%;
height: 30vh;
}
#concept .box{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
#concept .box .img{
width: 45%;
}
#concept .box .img:after{
top: 10px;
left: 10px;
}
#concept .box .text{
width: 45%;
}
#concept .box .text img{
padding-bottom: 30px;	
}
#concept .box .text p{
line-height: 2.5em;
}
/*---------------
#lineup
---------------*/
#lineup .lineup-slider{
padding-bottom: 60px;
}
#lineup .lineup-slider li{
position: relative;
margin: 0 35px;
}
#lineup .lineup-slider li div img{
padding: 10px;
margin-bottom: 10px;
}
#lineup .btn{
width: 175px;
}
/*---------------
#howto
---------------*/
#howto:after{
height: 60vh;
}
#howto p{
padding-bottom: 40px;
}
#howto ul{
display: flex;
justify-content: space-between;
align-content: center;
}
#howto ul li{
width: 27%;
}
#howto ul li:nth-child(-n+2):after{
top: 30%;
right: -25%;
transform: translateY(50%) rotate(90deg);
width: 30px;
height: 30px;
}
#howto ul li img{
padding-bottom: 20px;
}
#howto ul li p{
font-size: 1.6rem;
}
/*---------------
#giftbox
---------------*/
#giftbox .box{
padding-top: 120px;
}
#giftbox .box ul.inner > li h3{
font-size: 2.8rem;
padding-bottom: 40px;
}
#giftbox .box ul.inner > li .slider{
margin-bottom: 30px;
}
#giftbox .box ul.inner ul li{
padding-bottom: 10px;
}
/*---------------
#store
---------------*/
#store ul.store{
padding-bottom: 80px;
}
#store ul.store > li{
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 40px;
}
#store ul.store li .g-map{
width: 48%;
}
#store ul.store li .detail{
width: 48%;
}
#store ul.store li .detail h3{
font-size: 2.4rem;
padding-bottom: 20px;
}
#store ul.store li .detail p{
padding-bottom: 10px;
}
#store ul.store li .detail span{
font-size: 1.3rem;
padding-top: 10px;
}
#store ul.store li .detail .btn{
margin: 50px 0 0 auto;
width: 190px;
}
#store ul.shop{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
#store ul.shop li{
width: 48%;
margin-bottom: 30px;
}
#store ul.shop li:nth-last-child(-n+2){
margin-bottom: 0;
}
#store ul.shop li a{
padding: 35px 40px 30px 30px;
}
#store ul.shop li a:hover:after{
transform: translateX(10px);
transition: .6s;
}
/*---------------
#children
---------------*/
#children:after{
height: 60vh;
}
#children p{
padding-bottom: 40px;
}
#children ul{
display: flex;
justify-content: space-between;
align-content: flex-start;
}
#children ul li{
width: 30%;
}
#children ul li img{
width: 90%;
margin: 0 auto 30px;
}
#children ul li .btn{
padding-right: 15%;
}
#children ul li .btn a{
width: 90px;
}
/*---------------
#news
---------------*/
#news ul{
display: flex;
justify-content: space-between;
margin-bottom: 60px;
}
#news ul li{
width: calc(31% - 40px) ;
padding: 20px;
}
#news ul li a{
transition: .6s;
}
#news ul li a:hover{
opacity: 0.7;
transition: .6s;
}
#news ul li a img{
margin-bottom: 15px;
aspect-ratio: 5 / 3.5;
}
#news ul li a h3{
font-size: 1.6rem;
margin-bottom: 10px;
-webkit-line-clamp: 2;
}
#news ul li a p{
font-size: 1.4rem;
-webkit-line-clamp: 3;
}
#news .btn a{
width: 80px;
}
}

@media (min-width: 561px) and (max-width: 1024px){
/*---------------
#hero
---------------*/
#hero img:first-of-type{
padding-top: 80px;
}
/*---------------
#concept
---------------*/
#concept{
padding-top: 100px;
}
/*---------------
#lineup
---------------*/
#lineup .lineup-slider li div h3{
font-size: 1.4rem;
}
#lineup .lineup-slider li div span{
font-size: 1.2rem;
}
/*---------------
#giftbox
---------------*/
#giftbox .box ul.inner > li{
padding:  60px 10%;
margin-bottom: 70px;
}
/*---------------
#store
---------------*/
#store ul.store li .g-map{
height: 20vh;
}
}

@media screen and (min-width: 1025px){
/*---------------
#concept
---------------*/
#concept{
padding-top: 150px;
}
/*---------------
#giftbox
---------------*/
#giftbox .box ul.inner > li{
padding:  60px 15%;
margin-bottom: 100px;
}
/*---------------
#store
---------------*/
#store ul.store li .g-map{
height: 30vh;
}
}