@import url('https://fonts.googleapis.com/css2?family=Sorts+Mill+Goudy&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');


:root {
    --ff-serif: 'Noto Serif JP', serif;
    --ff-sansserif: 'Noto Sans Japanese', sans-serif;
    --ff-en: 'Sorts Mill Goudy', serif;
    --color-blue: #08587B;
}




/*2022aw Topysここから*/
/*2022aw Topysここから*/
#aw22 {
    max-width: 1920px;
    margin: 0 auto;
    color: #454545;
    letter-spacing: .14em;
    margin-top: 180px;
    font-family: var(--ff-serif);
}

#ss22 img {
    width: 100%;
}

.loading {
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
    background-color: #fff;
}

.loading img {
    padding-top: 156px;
    width: 200px !important;
}

.fadeIn {
    opacity: 0;
    animation: fadein 2s ease forwards;
}


@keyframes fadeIn {

    /*animetion-nameで設定した値を書く*/
    0% {
        opacity: 0;
    }

    /*アニメーション開始時は不透明度0%*/
    100% {
        opacity: 1;
    }

    /*アニメーション終了時は不透明度100%*/
}

.l-container {
    max-width: 1024px;
    box-sizing: border-box;
    margin: 0 auto;
}

.animation-wrap {
    position: relative;
}

.animation-text1 {
    position: absolute;
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-size: 32px;
    line-height: 0.82;
    color: #000;
    top: 70%;
    left: 34px;
    ;
}

.animation-text2 {
    position: absolute;
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-size: 66px;
    line-height: 1.2;
    color: #000;
    top: 75%;
    left: 34px;
}

.animation-text3 {
    position: absolute;
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-size: 66px;
    line-height: 1.2;
    color: #000;
    top: 88%;
    left: 250px;
}

.fade2 {
    opacity: 0;
    animation: fadeIn 1.8s ease 2.3s 1 forwards;
}

.fade3 {
    opacity: 0;
    animation: fadeRight 1s ease 4s 1 forwards;
}

.animation-text_box {
    text-align: center;
    /*    position: absolute;*/
    top: 36%;
    right: 3.5%;
}

@keyframes fadeRight {

    0% {
        opacity: 0;
        transform: translateX(20px);
    }

    100% {
        opacity: 1;
        transform: translateX(0);
    }
}


.ss22mv__img {
    position: relative;
    top: 83px;
}

.ss22lead {
    margin: 90px auto 120px;
}

.ss22lead__container {
    width: 1024px;
}

.ss22lead__title {
    font-size: 22px;
    font-family: var(--ff-serif);
    letter-spacing: 0.2em;
    color: #151D71;
    text-align: left;
    padding-top: 120px;
    line-height: 1.4;
}

.hr_top {
    border: 4px solid #151D71;
    width: 102px;
    margin-top: 40px;
    margin-bottom: 40px;
}

.ss22lead__text {
    margin-top: 30px;
}

.ss22__text {
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
}

.ss22__text__wh {
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
}


.ss22_main__title {
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin: 0 auto 29px;
    font-size: 55px;
    letter-spacing: 0.02em;
    text-align: center;
}

.line_y {
    width: 2px;
    height: 88px;
    margin: 45px auto 70px;
    background-color: #707070;
}

/*ss22_main  */
.ss22_main {
    background-color: #F7F7F8;
    max-width: 77%;
    height: 830px;
}

.ss22_main-1 {
    background-color: #FDFBF0;
    max-width: 77%;
    height: 830px;
}

.ss22_main_content {
    max-width: 940px;
    margin: 0 auto;
    padding: 0 40px;
}

.ss22lead_second {
    color: #151D71;
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
    line-height: 1.2;
    padding-top: 70px;
}

.ss22lead_second__wh {
    color: #45260A;
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 45px;
    line-height: 1.2;
    padding-top: 70px;
}

.ss22lead_second_sub {
    font-family: var(--ff-serif);
    font-size: 18px;
    line-height: 2.2;
    color: #151D71;
}

.ss22lead_second_sub__wh {
    font-family: var(--ff-serif);
    font-size: 18px;
    line-height: 2.2;
    color: #45260A;
}

.hr_wh {
    border: 4px solid #45260A;
    width: 102px;
    margin: 20px 0 40px;
}

.hr {
    border: 4px solid #151D71;
    width: 102px;
    margin: 20px 0 40px;
}

.ss22_pile_text {
    max-width: 676px;
    margin-right: 40px;
}

.ss22_pile_img {
    margin-top: -440px;
}

.pile_img {
    max-width: 873px;
    margin: 0 auto;
}

.ss22_mid_text {
    margin-top: 60px;
    margin-left: auto;
    max-width: 676px;
}

/* ここからitems */
.ss22_item_bg {
    background-color: #F7F7F8;
    padding-top: 80px;
    padding-bottom: 100px;
    margin-left: 20%;
    margin-top: 144px;
    max-width: 1470px;
    margin-bottom: 50px;
}

.ss22_item_bg-1 {
    background-color: #FDFBF0;
    padding-top: 80px;
    padding-bottom: 100px;
    margin-left: 20%;
    margin-top: 144px;
    max-width: 1470px;
}

.ss22__items {
    max-width: 940px;
    margin: 0 auto;
}

.ss22__item {
    display: flex;
    justify-content: space-between;
    margin: auto 40px;
}

.ss22__item:not(:first-of-type) {
    margin-top: 80px;
}

.ss22__item:nth-of-type(2),
.ss22__item:nth-of-type(4) {
    flex-direction: row-reverse;
}

.ss22__itemimg {
    width: 220px;
}

.ss22__itemcontent {
    width: 593px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.ss22__itemtext {
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    margin-left: 30px;
}

.ss22__itemtext__wh {
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    margin-left: 30px;
    color: #ffffff;
}

.ss22__itemtext-1 {
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    margin-right: 30px;
}

.ss22__itemtext-1__wh {
    font-size: 18px;
    line-height: 1.8;
    text-align: left;
    vertical-align: top;
    margin-right: 30px;
    color: #ffffff;
}


.ss22__linkbox.right {
    margin-left: auto;
    /*    saleアンコメント*/
    /*    width: 350px;*/

    /*    saleコメントアウト*/
    text-align: right;
}

.ss22__link__wh {
    font-size: 14px;
    color: #45260A !important;
    text-decoration: underline #45260A !important;
    font-family: var(--ff-sansserif);
}

.ss22__link {
    font-size: 14px;
    color: #151D71 !important;
    text-decoration: underline #151D71 !important;
    font-family: var(--ff-sansserif);
}

.not_stock {
    font-size: 14px;
    color: #9D001A !important;
    font-family: var(--ff-sansserif);
}

.ss22_wide_bg {
    width: 100%;
    opacity: 0.5;
}

/* ここからss22pick */
.ss22pick {
    padding-top: 80px;
    padding-bottom: 100px;
}

.ss22pick__title {
    font-family: "minerva-modern", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 50px;
    line-height: 1.2;
    letter-spacing: 0;
    position: relative;
    text-align: center;
}

.ss22pick__items {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 938px;
    margin: 80px auto 0 auto;
}

.ss22pick__item {
    width: 248px;
}

.ss22pick__item:nth-of-type(n + 4) {
    margin-top: 60px;
}

.ss22pick__text_gre {
    color: #151D71;
    font-size: 14px;
    width: 255px;
    letter-spacing: 0.14em;
    margin-top: 34px;
    margin-bottom: 30px;
}

.ss22pick__img {
    width: 100%;
}

.ss22pick__text {
    font-size: 14px;
    color: var(--color-blue);
    margin-top: 20px;
    line-height: 2.2;
}

.ss22pick__name {
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
    line-height: 130%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: normal;
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    color: #555;
}


.ss22pick__price {
    font-size: 16px;
    font-weight: bold;
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    line-height: 24px;
    letter-spacing: normal;
    color: #333;
}

.ss22pick__price--fix {
    font-size: 14px;
    font-weight: bold;
    font-family: var(--ff-sansserif);
}



.ss22-item__price--box {
    border: #c7000a 1px solid;
    font-weight: normal;
    color: #c7000a;
    padding: 0 2px;
    letter-spacing: normal;
}

.ss22-item__price--box__wh {
    border: #ffffff 1px solid;
    font-weight: normal;
    color: #ffffff;
    padding: 0 2px;
    letter-spacing: normal;
}

.ss22-item__price--tax {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 11px;
    font-weight: normal;
    text-align: right;
}

.ss22-item__price--red {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    color: rgb(199, 0, 10);
    letter-spacing: normal;
}

.ss22-item__price--wh {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    font-size: 16px;
    line-height: 24px;
    font-weight: bold;
    color: #ffffff;
    letter-spacing: normal;
}


.ss22-item__priceContainer {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    display: flex;
    justify-content: flex-end;
}

.ss22-item__priceContainer__left {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    display: flex;
    justify-content: flex-start;
}

.ss22-item__priceContainer_between {
    font-family: "Noto Sans Japanese", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", sans-serif;
    display: flex;
    justify-content: space-between;
}



/* .colorchange {
    color: var(--color-blue) !important;
} */

/*2022AW Topysここまで*/
/*2022AW Topysここまで*/