/* zeusで使う共通CSS */
html {
    font-size: 62.5%!important;
}


#app-webview-toppage-2508 {
    width: 90%;
    margin-inline: auto;
}

@media screen and (min-width: 500px) and (max-width: 700px) {
    #app-webview-toppage-2508 {
        width: clamp(300px, 90%, 600px);
        margin-inline: auto;
    }
}
@media screen and (min-width: 701px) {
    #app-webview-toppage-2508 {
        max-width: 700px;
        margin-inline: auto;
    }
}
img {
    display: block;
    width: 100%;
    height: auto;
}

a img {
    opacity: 1 !important;
    transition: none !important;
}
a:active img {
    opacity: 1 !important; /* 押しても透けない */
}

/*====================== 見出し ======================*/
.simple-title {
    margin-block: 6rem 2rem;
}
.simple-title h2 {
    font-weight: 600;
    font-size: 1.5rem;
    letter-spacing: .2rem;
}
.simple-title p {
    font-size: 1.1rem;
    font-weight: 500;
    text-align: justify;
    word-break: break-all;
    letter-spacing: .1rem;
    margin-top: .3rem;
}
@media screen and (min-width: 701px) {
    .simple-title h2 {
        font-size: 2.5rem;
    }
    .simple-title p {
        font-size: 1.8rem;
    }
}
/*====================== パーソナルコーディネート ======================*/

.comment-by-stylist p::before {
    content: "AUENスタイリスト";
}
/*コーデコメント*/
.comment-text {
    font-size: 1.1rem;
    margin-block: 1rem 2.5rem;
    line-height: 1.6;
    text-align: justify;
    word-break: break-all;
}
/*スタイリスト*/
.comment-by-stylist img {
    width: 15%;
    border-radius: 100px;
}
/*コーデタイトル*/
.comment-by-stylist {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-top: 1.5rem;
}
.coord-titile h3 {
    font-size: 1.3rem;
    font-weight: 600;
    letter-spacing: .1rem;
}
.coord-titile p {
    font-size: 1rem;
    margin-top: .5rem;
    font-weight: 500;
}
/*コーデ画像*/
.recommend-coord-img {
    margin-inline: calc(50% - 50vw);
}

/*アイテムリンク*/
.used-product-link {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    position: relative;
    border-block: solid 1px;
    padding-block: 1.5rem;
}
.used-product-link::before {
    content: "使用アイテム";
    position: absolute;
    top: -1rem;
    background: #fff;
    padding-right: .5rem;
    font-size: .1.1rem;
}
.used-product-link a {
    display: block;
    width: 100%;
    height: auto;
}
.used-product-link a:nth-child(n+5) {
    display: none;
}
/*最近買ったアイテムを使ったコーデ　アイテムリンク*/
.product-link-list:nth-child(n+2) {
    display: none;
}
@media screen and (min-width: 701px) {
    .recommend-coord-img {
        margin-inline: unset;
    }
    .comment-by-stylist {
        margin-top: 2rem;
    }
    .coord-titile h3 {
        font-size: 2.2rem;
    }
    .coord-titile p {
        font-size: 1.5rem;
    }
    .comment-by-stylist img {
        width: 12%;
    }
    .comment-text {
        font-size: 1.8rem;
    }
    .used-product-link::before {
        font-size: 1.8rem;
        padding-right: 1rem;
        top: -1.5rem;
    }
    .used-product-link {
        gap: 2rem;
        padding-block: 4rem;
        margin-top: 4rem;
    }

}


/*====================== 最上部アプリ限定コンテンツ ======================*/

.app-only-content-article .pagination {
    display: none;
}
.app-only-content-article {
    margin-inline: calc(50% - 50vw);
}

#app-webview-toppage-2508 .dc-container, 
.app-only-content-article .dc-layout-3-2 .dc-col, 
.dc-article-tile__image {
    all: unset;
}
.app-only-content-article .dc-layout-3-2 {
    margin: 0;
}
.app-only-content-article .dc-article-tile__imagelink {
    position: relative;
}
.app-only-content-article .dc-article-tile__imagelink figcaption {
    position: absolute;
    bottom: 1.5rem;
    left: 1.5rem;
}
.app-only-content-article .dc-article-tile__imagelink figcaption .dc-article-tile__body {
    display: flex;
    flex-direction: column-reverse;
    text-shadow: 0 0 10px #444;
}
.app-only-content-article .dc-article-tile__date {
    font-size: 1.5rem;
    letter-spacing: .1rem;
    color: #fff;
}
.app-only-content-article .dc-article-tile__imagelink figcaption .dc-article-tile__caption {
    font-size: 1.6rem;
    width: 80%;
    font-weight: 500;
    color: #fff;
    margin: 0;
    text-shadow: 0px 0px 5px #2b2b2b;
}
.app-only-content-article .dc-row.article-contents {
    margin-inline: unset;
}

/*記事共通*/
.dc-article-tile__imagelink:hover img {
    transform: unset !important;
    opacity: unset !important;
}
.dc-main-head {
    display: none;
}
/*1つめの記事しか出さない*/
.app-only-content-article .dc-col:not(:nth-child(-n+1)) {
    display: none;
}
@media screen and (min-width: 701px) {
    .app-only-content-article {
        margin-inline: unset;
    }
    .app-only-content-article .dc-article-tile__imagelink figcaption .dc-article-tile__caption {
        font-size: 2.5rem;
    }
    .app-only-content-article .dc-article-tile__imagelink figcaption {
        bottom: 3rem;
        left: 3rem;
    }
}

/*====================== もっと見る　赤ボタン ======================*/
.moreLink {
    border: solid 1px #cb333b;
    display: block;
    text-align: center;
    border-radius: 100px;
    padding-block: 1rem;
    color: #cb333b;
    font-weight: 600;
    font-size: 1.3rem;
    letter-spacing: .1rem;
    margin-block: 2rem;
}
.moreLink p {
    margin: 0;
}
@media screen and (min-width: 701px) {
    .moreLink {
        font-size: 2rem;
        padding-block: 2rem;
        border-width: 2px;
    }
}

/*====================== パーソナル設定前 ======================*/
.personal-coordinate-proposal.unregistered {
    margin-inline: calc(50% - 50vw);
}
@media screen and (min-width: 701px) {
    .personal-coordinate-proposal.unregistered {
        margin-inline: unset;
    }
}