@charset "UTF-8";
/*
 * pages/about.css : とーんと♡日本橋とは？(page 18)専用CSS
 *   旧 swell_meta_css(11.4KB)からの移管(P4・2026-07-26)。SWELL専用セレクタ
 *   (.l-mainContent__inner/.l-content/.c-pageTitle)は除去・置換済み。
 *   本文の c-article-item/FirstView/tate 系は本文HTML(page 18)が持つ既存クラス。
 */
.entry-header {
	display: none; /* 旧 .c-pageTitle 非表示の踏襲(タイトルは本文ヒーローが担う) */
}



.tate{
-webkit-text-orientation: upright;
text-orientation:upright!important;
  writing-mode: vertical-rl;
  text-align: center;

}

.tatekakomi{
  -webkit-text-combine: horizontal;
  -ms-text-combine-horizontal: all;
  text-combine-upright: all;
}

.back10{
background-image: url(/wp-content/uploads/2023/05/back-ground.jpg);

margin-top:50px;
}


/* 旧テーマ(toneto-theme)の page-about.php が持っていた <section id="about"> 用の
   装飾(#about / #about:before + bg-about.svg)は、本テーマでは対象要素そのものが
   存在しない(本文はDB=固定ページ18で、#about ラッパーを持たない)ため削除した。
   参照していた ../images/about/bg-about*.svg も本テーマには存在せず404だった
   (実体は非有効の toneto-theme 側にのみ残存)。2026-07-27 */

.FirstView__Banner img{width: 100%;}

/* reset.css の svg{display:block} は、文章の中に埋め込まれたアイコンSVGまで
   ブロック化してしまい、♡が行から外れて単独行の左端に孤立する。
   この段落内のSVGだけ文字として扱う。2026-07-27 */
.FirstView__sign p svg{
    display: inline-block;
    vertical-align: middle;
}

.FirstView__top{position:relative}

@media screen and (max-width:767px){
    .FirstView__absolute{
        width:fit-content;
        position: absolute;
        bottom: -41px;
        left: 50%;
        transform: translateX(-50%);
    }
    .FirstView__absolute img{
        height:248.43px;
    }

    .FirstView__sign.pc{display:none!important}

    .c-blog-section{padding-bottom: 9px;}
}

@media screen and (min-width:768px) {
    .FirstView__absolute{
        position: absolute;
        bottom: -68px;
        left: 50%;
        transform: translateX(-50%);
    }
    .c-blog-section{padding-bottom: 13px}

    .FirstView__sign.sp{display:none!important}

    .FirstView__sign{
        display:flex;
        justify-content: center;
        margin-top: 112px;
        margin-bottom: 100px;
    }

    .FirstView__sign-left,
    .FirstView__sign-right{display:flex;width:fit-content}

    .FirstView__sign-right{margin-left: 47px;margin-right: 47px}

    .FirstView__sign .FirstView__sign-left p{
        writing-mode: tb-rl;
        font-family: "Noto Sans JP",sans-serif;
        font-size: 18px;
        line-height: 20px;
        font-weight:500;
        padding-left:8.5px;
        padding-right:8.5px;
        color:#000000
    }

    .FirstView__sign .FirstView__sign-left p .num {
        writing-mode: rl-tb;
    }

    .FirstView__sign .FirstView__sign-right p{
        writing-mode: tb-rl;
        font-family: fot-tsukubrdgothic-std,sans-serif;
        font-size: 36px;
        line-height: 41px;
        font-weight:700;
        padding-left:7px;
        padding-right:7px;
        color:#000000
    }
    .FirstView__sign .FirstView__sign-right span{
        font-family: fot-tsukubrdgothic-std,sans-serif;
        font-size: 36px;
        line-height: 41px;
        font-weight:700;
        color:#CB3A1C
    }
}

@media screen and (max-width:767px) {
    .FirstView__sign{
        text-align: center;
        margin-top: 60px;
        margin-bottom: 44px;
    }
    .FirstView__sign .FirstView__sign-right p{
        font-family: fot-tsukubrdgothic-std,sans-serif;
        font-size: 24px;
        line-height: 31px;
        font-weight:700;
        color:#000000
    }
    .FirstView__sign .FirstView__sign-right span{
        font-family: fot-tsukubrdgothic-std,sans-serif;
        font-size: 24px;
        line-height: 34px;
        font-weight:700;
        color:#CB3A1C
    }
    .FirstView__sign .FirstView__sign-left{
        margin-top: 14px;
    }
    .FirstView__sign .FirstView__sign-left p{
        font-family: 'Noto Sans',serif;
        font-size: 14px;
        line-height: 27px;
        font-weight:500;
        color:#000000
    }
}

@media screen and (max-width:767px){

    .c-article-item{flex-wrap: wrap;display:flex;margin-bottom:30px}

    .c-article-item__content{
        width: 100%!important;
        order: 2;
        padding: 32px 30px 34px 30px;
        position: relative;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
        background-color:#fff
    }
    .c-article-item__banner{
        width: 100%;
        display: block;
        order: 1;
        background-color: #E5E5E5;
        border-top-right-radius: 20px;
        border-top-left-radius: 20px;
        position: relative
    }
    .c-article-item__map{
        right: 15px;
        bottom: 15px;
        width: 82px;
        position:absolute
    }

    .c-article-item__content .c-article-item__title{
        font-family: "Noto Sans JP",sans-serif;
        font-weight: 800;
        font-size:14px;
        line-height: 22px;
        color:#222222
    }

    .c-article-item__content .c-article-item__des{
        font-family: "Noto Sans JP",sans-serif;
        font-weight: 500;
        font-size:12px;
        letter-spacing: 0px;
        line-height: 24px;
        margin-top:13px;
        color:#222222
    }

    .c-article-item__content .c-article-item__link{
        font-family: "Noto Sans JP",sans-serif;
        font-size:12px;
        letter-spacing: 0px;
        line-height: 30px;
        margin-top:29px;
        text-decoration: underline;
    }

    .c-article-item__content .c-article-item__label {
        position: absolute;
        top: -13px;
        left: 71px;
        transform: translate(-50%, -50%);
        z-index: 1;
    }
    .c-article-item__content .c-article-item__label svg{width:119px}

    .c-article-item__content .c-article-item__label .c-article-item__label-box p{
        position: absolute;
        top: 45%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-family: "Noto Sans JP",sans-serif;
        font-size:11px;
        letter-spacing: 0px;
        line-height: 15px;
        font-weight: bold;
        color:#fff;
        text-align: center;
        width:100%
    }

    .c-article-item__banner{overflow:hidden}
}

.c-article-item__main-banner{height:100%; object-fit: cover;width:100%}

@media screen and (min-width:768px){

    .c-article-item {
        display:flex;
        margin-bottom:80px;
        border-radius: 20px;
    }

    .c-article-item__banner{
        background-color:#E5E5E5;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        position:relative;
        overflow: hidden;
    }

    .c-article-item__content,
    .c-article-item__banner{width:50%}

    .c-article-item__content{
        padding:110px 60px 110px 70px;
        position:relative;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        background-color:#fff
    }

    .c-article-item__content .c-article-item__label{
        position:absolute;
        top: 25px;
        left: 55px;
        transform: translate(-50%, -50%);
    }
    .c-article-item__content .c-article-item__label .c-article-item__label-box p{
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-family: "Noto Sans JP",sans-serif;
        font-size:15px;
        letter-spacing: 0px;
        line-height: 22px;
        font-weight: bold;
        color:#fff;
        text-align: center;
        width:100%
    }

    .c-article-item__content .c-article-item__title{
        font-family: "Noto Sans JP",sans-serif;
        font-weight: 800;
        font-size:22px;
        letter-spacing: 1.1px;
        line-height: 34px;
        color:#222222
    }

    .c-article-item__content .c-article-item__des{
        font-family: "Noto Sans JP",sans-serif;
        font-weight: 500;
        font-size:14px;
        letter-spacing: 0px;
        line-height: 30px;
        margin-top:17px;
        color:#222222
    }

    .c-article-item__content .c-article-item__link{
        font-family: "Noto Sans JP",sans-serif;
        font-size:14px;
        letter-spacing: 0px;
        line-height: 30px;
        margin-top:44px;
        text-decoration: underline;
    }

    .c-article-item__banner .c-article-item__map{
        position: absolute;
        bottom:26.1px;
        right:24.6px;
    }
}
.c-article-item__content .c-article-item__label .c-article-item__label-box{
    position: relative;
    overflow: hidden;
}

.c-article-item__banner .c-article-item__map img{display:block}

.c-article-item-1 .c-article-item__content .c-article-item__link{
    color:#F89208;
}
.c-article-item-2 .c-article-item__content .c-article-item__link{
    color:#0CAC8D;
}
.c-article-item-3 .c-article-item__content .c-article-item__link{
    color:#BF42A7
}
.c-article-item-4 .c-article-item__content .c-article-item__link{
    color:#009DD6
}

.c-article-item-1 .c-article-item__content .c-article-item__label path{
    fill:#F89208
}
.c-article-item-2 .c-article-item__content .c-article-item__label path{
    fill:#0CAC8D;
}
.c-article-item-3 .c-article-item__content .c-article-item__label path{
    fill:#BF42A7
}
.c-article-item-4 .c-article-item__content .c-article-item__label path{
    fill:#009DD6
}

.c-article-item-1 .c-article-item__banner .c-article-item__map{
    background-color:#F89208;
    box-shadow: 0px 0px 0px 5px #f89208;
    border-radius: 50%;
}
.c-article-item-2 .c-article-item__banner .c-article-item__map{
    background-color:#0CAC8D;
    box-shadow: 0px 0px 0px 5px #0CAC8D;
    border-radius: 50%;
}
.c-article-item-3 .c-article-item__banner .c-article-item__map{
    background-color:#BF42A7;
    box-shadow: 0px 0px 0px 5px #BF42A7;
    border-radius: 50%;
}
.c-article-item-4 .c-article-item__banner .c-article-item__map{
    background-color:#009DD6;
    box-shadow: 0px 0px 0px 5px #009DD6;
    border-radius: 50%;
}

@media screen and (min-width:768px) {
    .is-switch .c-article-item__content{
        order:2;
        padding: 111px 54.7px 108px 75.3px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        border-top-left-radius:unset!important;
        border-bottom-left-radius:unset!important
    }
    .is-switch .c-article-item__content .c-article-item__label{
        left: unset!important;
        right: -30px;
        transform: translateY(-50%);
    }
    .is-switch .c-article-item__banner{
        order:1;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        border-top-right-radius:unset!important;
        border-bottom-right-radius:unset!important
    }
    .is-switch .c-article-item__banner .c-article-item__map {
        left: 24.6px;
        right:unset!important
    }
}

@media (min-width:769px){
    .FirstView__Banner img{height: 492px;object-fit: cover;}
    .FirstView__absolute-left{position:absolute;top: 0;left: 0;}
    .FirstView__absolute-right{position:absolute;top: 0;right: 0;}

    .FirstView__absolute-left img{max-height:532px}
    .FirstView__absolute-right img{max-height:568px}
}

@media (max-width:768px){
    .FirstView__Banner img{height: 245px;object-fit: cover;}
    .FirstView__absolute-left{position:absolute;top: 0;left: 0;}
    .FirstView__absolute-right{position:absolute;bottom: 0;right: 0;}

    .FirstView__absolute-left img{max-height:159px}
    .FirstView__absolute-right img{max-height:144px}
}

/* 旧fullWide(contentSize指定なし=内側はサイト幅に制約)の再現。
   帯(back10)は全幅のまま、中身を1200pxへ収めてラベルのはみ出しを防ぐ(P6実測+30px対策) */
.entry-content .back10 > .tn-band__inner {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: 20px;
	box-sizing: border-box;
}

/* エリアラベル(扇形)はカードの外側へ約30px張り出す設計のため、帯が画面端に
   接する幅(768〜1239px)では先端が画面外へ出て切れる。この帯域だけ左右余白を
   広げて逃がす。1240px以上は帯が中央寄せで余白が足りているので現状を変えない。
   2026-07-27 実測: 左は-11px・右は+10px はみ出していた */
@media screen and (min-width:768px) and (max-width:1239px){
	.entry-content .back10 > .tn-band__inner { padding-inline: 40px; }
}