@charset "UTF-8";

/* トピック用CSS */

html[data-browse-mode="P"] [class*="block-topic-page"] .is-sp {
    display: none;
}

.pc { display: inline-block!important; }
.sp { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */

html[data-browse-mode="S"] .pc { display: none !important; 
}
html[data-browse-mode="S"] .sp { display: inline-block !important; }


.block-topic-page h3{
    margin: 0;
    padding: 0;
}
.block-topic-page h3{
    font-size: 18px;
    font-weight: normal;
}


.block-topic-page .block-lead {
    margin-top: 60px; 
}

html[data-browse-mode="S"] .block-topic-page .block-lead {
    margin-top: 40px; 
}

html[data-browse-mode="P"] .block-topic-page .block-lead p {
    font-weight: 500;
}
html[data-browse-mode="P"] .block-topic-page .block-lead-2 p {
    font-weight: 500;
}

.yoyaku {
    margin-top: 20px;
}

.yoyaku h3{
}

.yoyaku .date {
    font-size: 14px;
    font-weight: bold!important;
}

.block-topic-page .block-lead2 {
    margin-top: 60px;
}
html[data-browse-mode="S"] .block-topic-page .block-lead2 {
    margin-top: 30px;
}

.block-topic-page .block-lead2 .huku {
    max-width: 500px
}

html[data-browse-mode="P"] .block-topic-page .happy-txt { 
    font-weight: 500;
}

.block-topic-page .block-lead2 .txt span {
    color: red;
}

.block-topic-page .block-lead2 .header {
    font-size: 14px;
    font-weight: bold;
}

.block-topic-page .block-lead3 .header {
    font-size: 18px;
    font-weight: normal;
    font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
    margin: 0;
    color: red;
    text-align: center;
}

html[data-browse-mode="S"] .block-topic-page .block-lead3 .header {
    font-size: 18px;
    font-weight: normal;
    font-family: "noto serif jp", serif;
    margin: 0;
    color: red;
    text-align: center;
}


.block-topic-page .block-lead3 {
    margin-top: 60px;
}

.block-topic-page .block-lead4 .txt {
    display: block;
    margin: 10px 0;  
    font-size: 14px;
}
html[data-browse-mode="P"] .block-topic-page .block-lead4 .txt{
    font-weight: 500;
}

.topic-block {
    margin-top: 30px; 
}

html[data-browse-mode="S"] .topic-block {
    margin-top: 15px; 
}

html[data-browse-mode="P"] .topic-block .header {
    margin: 0;
    font-size: 24px;
    font-weight: normal;
    color: #a7945f;
    font-family: "Crimson Text", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
html[data-browse-mode="S"] .topic-block .header {
    margin: 0;
    font-size: 18px;
    font-weight: normal;
    color: #a7945f;
    padding: 0;
    background-color: #FFF;
    font-family: "noto serif jp", serif;
}

html[data-browse-mode="P"] .topic-block .txt-block {
    padding: 0 20px; 
    margin-bottom: 20px;
}
html[data-browse-mode="S"] .topic-block .txt-block { 
    margin-bottom: 20px;
}

html[data-browse-mode="P"] .topic-block .picture-block {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: space-between; 
    padding: 0 20px;
}

html[data-browse-mode="S"] .topic-picture {
    margin-bottom: 10px;
}


html[data-browse-mode="P"] .topic-picture {
    width: calc(370/760*100%);
}
html[data-browse-mode="P"] .topic-block .picture-block2 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    justify-content: space-between; 
    padding: 0 20px;
    width: calc(628/800*100%);
    max-width: 628px;
}
html[data-browse-mode="S"] .topic-block .picture-block2 {
    margin-bottom: 20px
}


html[data-browse-mode="P"] .topic-picture2 {
    width: calc(294/588*100%);
    margin-bottom: 20px
}

.block-topic-page--article-body .topic-block .more-btn {
    margin: 60px auto ;
}
.block-topic-page--article-body .topic-block .more-btn a{
    color: #fff;
}

html[data-browse-mode="P"] .topic-block .w-txt {
    display: block;
    padding: 0 20px;
}

.topic-blog-block .blogimg {
    width: 350px;
}
.topic-blog-block p{
    line-height: 2;
}

.block-topic-page .block-lead-2 {
    margin-top: 20px;
}
html[data-browse-mode="S"] .block-topic-page .block-lead-2 {
    margin-top: 10px;
}