@charset "UTF-8";

/*共通部分*/

html{
    font-size: 100%;
    flex-direction: column;
}
body{
font-family: MyYuMinchoM, "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;
font-size: 1rem;
font-display: swap;
background: #F9F9F9;
color:#050505

}
a{
    text-decoration: none;
    color:inherit
}
img{
    max-width: 100%;
    width: 100%;
    height: auto;
}
p{
font-family: "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;;
align-self: stretch;
font-size: 1rem;
font-weight: 400;
letter-spacing:0.02rem;
line-height: 1.6rem;

@media screen and (max-width: 352px) {
    font-size: 0.875rem;
}

}
.h2{
    align-self: stretch;
    font-family: MyYuMinchoM, "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;
    font-size: 2rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.08rem;
    text-align: left;

    @media screen and (max-width: 760px) {
        font-size: 1.5rem;
    }
    
}
.h3{
    font-family: "HiraKakuProN-W3", "ヒラギノ角ゴ Pro W3", "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "メイリオ", sans-serif;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    letter-spacing: 0.06rem;

    @media screen and (max-width: 760px) {
        font-size: 1.25rem;
    }

    }
/*fv*/
.pc { display: block !important; }
.sp { display: none !important; }

@media only screen and (max-width: 750px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}

/*frame1*/
.Frame1{
    display: flex;
    padding: 6.25rem 0rem;
    flex-direction: column;
    align-items: center;
    gap: 5rem;
    max-width: 720px;
    margin: auto;

    @media screen and (max-width: 760px) {
        padding: 3.75rem 2.5rem;
        gap: 3.75rem
    }

    @media screen and (max-width: 430px) {
        padding: 3.75rem 1.25rem;
     }

}
.content{
display: flex;
flex-direction: column;
align-items: center;
gap: 2.5rem;
align-self: stretch;

@media screen and (max-width: 760px) {
    gap: 2.5rem
 }

}
.date{
    font-family: MyYuMinchoM, "游明朝", YuMincho, "Yu Mincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "Noto Serif JP", serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
    align-self: stretch;

    @media screen and (max-width: 430px) {
        font-size: 0.875rem;
     }
}
.title{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
align-self: stretch;
}
.lead-text{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1.25rem;
align-self: stretch;
}
.lead-img{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
width: 33.125rem;
height: auto;

@media screen and (max-width: 610px) {
    width: 100%;
 }


}
.lead-image-yokonarabi{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    align-self: stretch;
}
.frame-img{
    display: flex;
    width: 48%;
    height: auto;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.tyusyaku{
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 300;
    line-height: 160%; /* 1.4rem */
    letter-spacing: 0.035rem;
}
.lead-img-2{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        width: 26.25rem;
        height: auto;

        @media screen and (max-width: 500px) {
            width: 100%;
         }

}
.frame29{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.75rem;
align-self: stretch;
}

/*Frame2*/

.Frame2{
    display: flex;
    padding: 6.25rem 0rem 7.5rem 0rem;
    flex-direction: column;
    align-items: center;
    gap: 3rem;
    align-self: stretch;
background: #F1F1F1;

@media screen and (max-width: 760px) {
    padding: 3.75rem 0rem 3.75rem 0rem;
}

@media screen and (max-width: 430px) {
    padding: 3.75rem 0rem 3.75rem 0rem;
 }

}
.pick-up-item{
    display: flex;
    width: 720px;
flex-direction: column;
align-items: center;
gap: 0.625rem;
margin: auto;

@media screen and (max-width: 760px) {
    padding: 0rem 2.5rem;
    width: 100%;
 }

 @media screen and (max-width: 430px) {
     padding: 0rem 1.25rem;
     width: 100%;
  }

}
.similar-item{
    display: flex;
width: 720px;
flex-direction: column;
align-items: center;
gap: 0.625rem;
margin: auto;

@media screen and (max-width: 760px) {
    padding: 0rem 2.5rem;
    width: 100%;
 }

 @media screen and (max-width: 430px) {
     padding: 0rem 1.25rem;
     width: 100%;
  }

}
.frame16{
    display: flex;
justify-content: space-between;
align-items: center;
align-self: stretch;
}
.frame10{
display: flex;
width: 24.375rem;
flex-direction: column;
align-items: center;
gap: 1.25rem;



 @media screen and (max-width: 470px) {
     width: 100%;
  }

}
.kounyupage{
color: #FFF;
text-align: center;
font-family: "Hiragino Kaku Gothic ProN";
font-size: 1rem;
font-style: normal;
font-weight: 300;
line-height: normal;
}
.button{
    display: flex;
height: 2.75rem;
padding: 0.625rem 2.5rem;
justify-content: center;
align-items: center;
gap: 0.625rem;
align-self: stretch;
background: #1F1F1F;
transition: .3s;
}
a:hover {
    opacity: 0.6;
}
.frame13{
display: flex;
width: 24.375rem;
justify-content: space-between;
align-items: flex-start;

@media screen and (max-width: 470px) {
    width: 100%;
 }

}
.frame10-2{
display: flex;
width: 48%;
flex-direction: column;
align-items: center;
gap: 0.75rem;
flex-shrink: 0;
}
.p-14{
font-size: 0.875rem;
text-align: center;
}
.button-2{
display: flex;
height: 2.75rem;
padding: 0.625rem 0rem;
justify-content: center;
align-items: center;
gap: 0.625rem;
align-self: stretch;
}


/* フッター*/
.jalana-logo{
    width: 5rem;
height: auto;
}
.footer{
    display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
color: #FFF;
}
.footer1{
display: flex;
padding: 3rem 0rem 1.8rem 0rem;
flex-direction: column;
align-items: center;
gap: 1.2rem;
align-self: stretch;
background: #1D1D1D;
}
.footer2{
    display: flex;
    padding: 1rem 0rem;
    justify-content: center;
    align-items: center;
    gap: 0.625rem;
    align-self: stretch;
background: #050505;
}
.footer-social{
    display: flex;
    width: 8rem;
    justify-content: space-between;
    align-items: center;
}
.img-socialicon{
    height: 1rem;
    width: auto;
}
.copyright{
text-align: center;
font-family: "Hiragino Kaku Gothic ProN";
font-size: 0.625rem;
font-style: normal;
font-weight: 200;
line-height: normal;
}