@charset "Shift_JIS";

/*==============================================
共通 ここから
================================================*/

/* パンくず削除 */
#pankuzu {
    display: none;
}
.header-info-red {
    display: none !important;
}
a {
    display: block;
}

/* br用クラス */
.smp-none {
    display: none;
}

/* フッター余白削除 */
footer {
    margin-top: 0 !important;
}
footer .bottom {
    margin-top: 0 !important;
}

/* 価格プロ リセット */
.buy_price>ol, .buy_price>ul {
    margin: 0;
}
.buy_price>ol .spesicalprice, .buy_price>ul .spesicalprice,.buy_price>ul .intax {
    display: none;
}


main, main#wrapper {
    padding:0;
    max-width: none;
}


/* 変数指定 */
:root {
    /* 共通フォントサイズ(ディスプレイが390px時に14pxとなる) ※.tieup-livero-innerの中の要素のみ */
    --font-size-text: 3.6cqw;

    /* 使用カラー */
    --color-orange: #e31e4b;

    /* アクティブ時のカラー */
    --color-active: #0090ff;

    /* 横の余白 */
    --margin-space-beside: 1em;

    /* 縦の余白 */
    --margin-space-vertical: 1.2em;
}

/*==============================================
共通 ここまで
================================================*/

/*==============================================
.tieup-livero 共通 STR
================================================*/

.tieup-livero {
    font-size: var(--font-size-text);
    background-color: #fefce5;
}
.tieup-livero * {
    box-sizing: border-box;

    /* 要素全てに同じフォントサイズを指定 */
    font-size: var(--font-size-text);
}
.tieup-livero a {
    display: block;
}
.tieup-livero span {
    font-size: 1em;
    line-height: 1;
}
.tieup-livero img {
    width: 100%;
    height: auto;
    display: block;
}
.tieup-livero svg {
    width: 100%;
}


.tieup-livero .tieup-livero-inner {
    width: 100%;
    max-width:800px;
    margin: 0 auto;

    /* コンテナクエリを指定 */
    container-type: inline-size;  /* または size */
}

.tieup-livero .tieup-livero-section {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.tieup-livero .tieup-livero-block {
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* 共通見出し */
.tieup-livero .tieup-livero-section .section-title {
    margin: 0 auto calc(var(--margin-space-vertical) / 2);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #222;
    line-height: 1;
}
.tieup-livero .tieup-livero-section .section-title__text {
    position: relative;
    font-size:1em;
    position: relative;
    z-index: 100;
    color: #fff;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.tieup-livero .tieup-livero-section.feature .section-title__text,
.tieup-livero .tieup-livero-section.list .section-title__text{
    color: #251d1a;
}


/*==============================================
.tieup-livero 共通 END
================================================*/

/*==============================================
.tieup-livero 看板 STR
================================================*/

.tieup-livero .tieup-livero-section.top {
    width: 100%;
    padding: 0;
}
.tieup-livero .tieup-livero-section.top .top-title {
    width: 100%;
    position: relative;
}

/*==============================================
.tieup-livero 看板 END
================================================*/

/*==============================================
.tieup-livero ボタン STR
================================================*/
.tieup-livero-section.app .app-inner{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.tieup-livero-section.app .app-inner p{
    text-align: center;
    font-size: .8em;
    line-height: 1.3em;
    margin-top: 1.3em;
}

.tieup-livero-section.app .app-inner .red{
    color: #e31e4b;
}
.tieup-livero-section.app .app-inner__btn{
    color: #ffef7d;
    font-size: 1.1em;
    background: #e31e4b;
    padding: .6em 0;
    border-radius:100vw;
    width: 90%;
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: .3em;
    box-shadow: 0 5px 0 #b2072e;
    margin: .5em auto 0 auto;
    font-weight: bold;
    animation: yureru-updown 2s infinite;
}
.tieup-livero-section.app .app-inner__btn:hover {
    color: #e31e4b;
    background: #ffef7d;
    box-shadow: 0 5px 0 #e6d02f;
}
.tieup-livero-section.app .app-inner__btn i{
    font-weight: bold;
}

.tieup-livero .tieup-livero-section.app{
    background: #FFF;
    padding: .5em 0 1.5em 0;
}
/*==============================================
.tieup-livero ボタン END
================================================*/


/*==============================================
.tieup-livero その他 STR
================================================*/

/* その他 */
.tieup-livero .tieup-livero-section.list,
.tieup-livero .tieup-livero-section.sale-feature,
.tieup-livero .tieup-livero-section.feature{
    background: #FFF;
    padding: var(--margin-space-vertical) 0;
}

/* 関連特集 */
.tieup-livero .tieup-livero-section.list .list-event,
.tieup-livero .tieup-livero-section.feature .list-event,
.tieup-livero .tieup-livero-section.sale-feature .list-event{
    padding: .5em var(--margin-space-beside) 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    align-items: flex-end;
    padding-top: 0;
}

.tieup-livero .list-event__col_1 {
    width: 100%;
    margin-bottom: .8em;
    border-radius: 5px;
    overflow: hidden;
}

/*==============================================
.tieup-livero その他 END
================================================*/

/*==============================================
.tieup-livero TOPに戻る STR
================================================*/
.tieup-livero .top-scroll {
    position: fixed;
    right: 1em;
    width: 4em;
    height: 4em;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #222222d6;
    color: #FFF;
    z-index: 1001;
    border-radius: 50%;
    font-size: min(3.6vw, 17px);
    flex-direction: column;
}
.tieup-livero .top-scroll:hover {
    color: #FFF !important;
}
.tieup-livero .top-scroll i{
    transform: rotate(180deg);
    font-size: 1.3em;
    flex-direction: column;
}
/*==============================================
.tieup-livero TOPに戻る END
================================================*/