/* ================================================================
section
================================================================= */
section {
    width: 100%;
}
section:nth-child(4) {
    width: 100%;
    margin-top: 50px;
    background: linear-gradient(120deg, rgba(221, 94, 137, 1), rgba(247, 187, 151, 1));
    z-index: -1;
}
.recommendedArticle {
    width: 100%;
    max-width: 680px;
    margin: 80px auto;
    padding: 0 20px;
}

/* ================================================================
article
================================================================= */
article {
    width: 100%;
    max-width: 680px;
    margin: 30px auto;
    padding: 0 20px;
}
article figure img {
    width: 100%;
    aspect-ratio: 16 / 9; /* アスペクト比を固定（例：16:9） */
    object-fit: cover; /* 画像の収まり方を指定 */
    object-position: center; /* 画像の中心を基準に切り抜く */
}
.annotation {
    font-size: 1.4rem;
    text-align: right;
    letter-spacing: 0;
    margin: 5px 0 0 0;
}
article h1 {
    margin: 50px 0 10px 0;
    font-size: 3.2rem;
    line-height: 1.4;
}
article h2 {
    margin: 50px 0 20px 0;
    font-size: 3.0rem;
    line-height: 1.4;
}
article h3 {
    margin: 40px 0 10px 0;
    font-size: 2.4rem;
    line-height: 1.4;
}
article h4 {
    margin: 20px 0 10px 0;
    font-size: 2.0rem;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 5px;
    line-height: 1.4;
}
article h5 {
    margin: 20px 0 10px 0;
    font-size: 1.8rem;
    line-height: 1.4;
}
.pstDate {
    color: #838383;
    letter-spacing: 0;
}
.excursion {
    position: relative;
    margin: 40px 0;
    z-index: 1;
}
.excursion figcaption {
    position: absolute;
    background-color: #fff;
    border-radius: 50px;
    padding: 2px 15px;
    border: 1px solid #000;
    font-size: 1.2rem;
    font-weight: bold;
    letter-spacing: 0;
    line-height: 2;
    top: -15px;
    left: 20px;
    z-index: 2;
}
.excursion a {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 30px 20px 20px 20px;
    border: 1px solid #eaeaea;
    border-radius: 10px;
}
.excursion a:hover {
    color: #ec7790;
    transition: .2s;
    opacity: 1;
    border: 1px solid #ec7790;
}
.excursion a figure {
    width: 182px;
    margin: 0;
}
.excursion a p {
    font-size: 1.6rem;
    font-weight: bold;
    line-height: 1.65;
    margin: 0 0 0 15px;
    width: 400px;
}
.excursion a:hover + figcaption {
    background-color: #ec7790;
    border-color: #ec7790;
    color: #fff;
    transition: .2s;
}

/* ================================================================
article area
================================================================= */
.article-body {
    margin: 50px 0;
}
.article-body figure {
    margin: 20px 0;
}
.article-body p {
    font-size: 1.6rem;
    line-height: 1.95;
}
.article-body ul {
    padding: 0 20px;
    margin: 10px 0;
    font-size: 1.6rem;
}
.article-body ul ul {
    padding: 0 0 0 20px;
    margin: 0 0 5px 0;
}
.article-body .reference {
    font-size: 1.4rem;
    margin: 5px 0 20px 0;
    line-height: 1.4;
}
.article-body .reference a {
    color: #ec7790;
    text-decoration: underline;
    letter-spacing: 0;
}
.table-of-contents {
    background-color: #fff8f9;
    border-radius: 15px;
    margin: 50px 0;
}
.table-of-contents p {
    border-radius: 15px 15px 0 0;
    background-color: #feecf0;
    padding: 15px 20px;
    font-weight: 500;
    font-size: 1.8rem;
}
.table-of-contents ul {
    margin: 0;
    padding: 25px 40px;
    font-size: 1.4rem;
}
.table-of-contents ul ul {
    margin: 10px 0 15px 0;
}
.table-of-contents ul ul li {
    margin: 0 0 8px 0;
}
.table-of-contents ul li {
    margin: 0 0 12px 0;
}
.table-of-contents ul li a {
    color: #ec7790;
    text-decoration: underline;
    letter-spacing: 0;
}
.table-of-contents ul li:last-child {
    margin: 0;
}
.article-body table {
    border-spacing: 0px;
    width: 100%;
    margin: 20px 0 0 0;
}
.article-body table tr:first-child th {
    border-top: 1px solid #ccc;
    border-radius: 10px 0 0 0;
}
.article-body table th {
    padding: 10px 15px;
    background-color: #f6f6f6;
    text-align: left;
    border: 1px solid #ccc;
    border-top: 0;
    width: 110px;
}
.article-body table tr:first-child td {
    border-top: 1px solid #ccc;
    border-radius: 0 10px 0 0;
}
.article-body table td {
    padding: 10px 15px;
    border-right: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    word-break: break-all;
}
.article-body table tr:last-child th {
    border-radius: 0 0 0 10px;
}
.article-body table tr:last-child td {
    border-radius: 0 0 10px 0;
}


/* ================================================================
SNS Share
================================================================= */
.snsArea {
    border: 2px solid #e2e8e9;
    border-radius: 10px;
    padding: 20px;
    font-weight: bold;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
}
.snsArea p {
    font-size: 1.6rem;
}
.snsArea .facebookIcon {background-color: #0766ff;}
.snsArea .facebookIcon::before {
    width: 31px;
    height: 30px;
    margin-top: -2px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%230766ff' d='M24 5A19 19 0 1 0 24 43A19 19 0 1 0 24 5Z'/%3E%3Cpath fill='%23fff' d='M26.572,29.036h4.917l0.772-4.995h-5.69v-2.73c0-2.075,0.678-3.915,2.619-3.915h3.119v-4.359c-0.548-0.074-1.707-0.236-3.897-0.236c-4.573,0-7.254,2.415-7.254,7.917v3.323h-4.701v4.995h4.701v13.729C22.089,42.905,23.032,43,24,43c0.875,0,1.729-0.08,2.572-0.194V29.036z'/%3E%3C/svg%3E");
}
.snsArea .xIcon {background-color: #000;}
.snsArea .xIcon::before {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0,0,256,256'%3E%3Cg fill='%23ffffff' fill-rule='nonzero' stroke='none' stroke-width='1' stroke-linecap='butt' stroke-linejoin='miter' stroke-miterlimit='10' stroke-dasharray='' stroke-dashoffset='0' font-family='none' font-weight='none' font-size='none' text-anchor='none' style='mix-blend-mode: normal'%3E%3Cg transform='scale(5.12,5.12)'%3E%3Cpath d='M5.91992,6l14.66211,21.375l-14.35156,16.625h3.17969l12.57617,-14.57812l10,14.57813h12.01367l-15.31836,-22.33008l13.51758,-15.66992h-3.16992l-11.75391,13.61719l-9.3418,-13.61719zM9.7168,8h7.16406l23.32227,34h-7.16406z'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.snsArea .bookmarkIcon {background-color: #03a4de;}
.snsArea .bookmarkIcon::before {
    width: 30px;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0 0 50 50'%3E  %3Cpath d='M 9 4 C 6.24 4 4 6.24 4 9 L 4 41 C 4 43.76 6.24 46 9 46 L 41 46 C 43.76 46 46 43.76 46 41 L 46 9 C 46 6.24 43.76 4 41 4 L 9 4 z' fill='%2303a4de'/%3E  %3Cpath d='M 14.939453 16 L 23.470703 16 C 26.070703 16 28.169922 17.890469 28.169922 20.230469 C 28.169922 22.130469 26.759844 23.72 24.839844 24.25 C 27.199844 24.65 29 26.659844 29 29.089844 C 29 31.799844 26.750469 34 23.980469 34 L 14.939453 34 L 14.939453 16 z M 30.939453 16 L 35 16 L 35 28 L 30.939453 28 L 30.939453 16 z M 19.210938 19.949219 L 19.210938 23.599609 L 21.619141 23.599609 C 22.659141 23.599609 23.509766 22.779766 23.509766 21.759766 C 23.509766 20.819766 22.770312 20.049219 21.820312 19.949219 L 19.210938 19.949219 z M 19.210938 26.800781 L 19.210938 30.810547 L 22.210938 30.810547 C 23.350938 30.810547 24.269531 29.910547 24.269531 28.810547 C 24.269531 27.700547 23.350938 26.800781 22.210938 26.800781 L 19.210938 26.800781 z M 32.970703 30 C 34.090703 30 35 30.9 35 32 C 35 33.1 34.090703 34 32.970703 34 C 31.850703 34 30.939453 33.1 30.939453 32 C 30.939453 30.9 31.850703 30 32.970703 30 z' fill='white'/%3E%3C/svg%3E");
}
.snsArea .lineIcon {background-color: #03c301;}
.snsArea .lineIcon::before {
    width: 34px;
    height: 34px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' width='100' height='100' viewBox='0 0 48 48'%3E%3Cpath fill='%2300c300' d='M12.5,42h23c3.59,0,6.5-2.91,6.5-6.5v-23C42,8.91,39.09,6,35.5,6h-23C8.91,6,6,8.91,6,12.5v23C6,39.09,8.91,42,12.5,42z'%3E%3C/path%3E%3Cpath fill='%23fff' d='M37.113,22.417c0-5.865-5.88-10.637-13.107-10.637s-13.108,4.772-13.108,10.637c0,5.258,4.663,9.662,10.962,10.495c0.427,0.092,1.008,0.282,1.155,0.646c0.132,0.331,0.086,0.85,0.042,1.185c0,0-0.153,0.925-0.187,1.122c-0.057,0.331-0.263,1.296,1.135,0.707c1.399-0.589,7.548-4.445,10.298-7.611h-0.001C36.203,26.879,37.113,24.764,37.113,22.417z M18.875,25.907h-2.604c-0.379,0-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687c0.379,0,0.687,0.308,0.687,0.687v4.521h1.917c0.379,0,0.687,0.308,0.687,0.687C19.562,25.598,19.254,25.907,18.875,25.907z M21.568,25.219c0,0.379-0.308,0.688-0.687,0.688s-0.687-0.308-0.687-0.688V20.01c0-0.379,0.308-0.687,0.687-0.687s0.687,0.308,0.687,0.687V25.219z M27.838,25.219c0,0.297-0.188,0.559-0.47,0.652c-0.071,0.024-0.145,0.036-0.218,0.036c-0.215,0-0.42-0.103-0.549-0.275l-2.669-3.635v3.222c0,0.379-0.308,0.688-0.688,0.688c-0.379,0-0.688-0.308-0.688-0.688V20.01c0-0.296,0.189-0.558,0.47-0.652c0.071-0.024,0.144-0.035,0.218-0.035c0.214,0,0.42,0.103,0.549,0.275l2.67,3.635V20.01c0-0.379,0.309-0.687,0.688-0.687c0.379,0,0.687,0.308,0.687,0.687V25.219z M32.052,21.927c0.379,0,0.688,0.308,0.688,0.688c0,0.379-0.308,0.687-0.688,0.687h-1.917v1.23h1.917c0.379,0,0.688,0.308,0.688,0.687c0,0.379-0.309,0.688-0.688,0.688h-2.604c-0.378,0-0.687-0.308-0.687-0.688v-2.603c0-0.001,0-0.001,0-0.001c0,0,0-0.001,0-0.001v-2.601c0-0.001,0-0.001,0-0.002c0-0.379,0.308-0.687,0.687-0.687h2.604c0.379,0,0.688,0.308,0.688,0.687s-0.308,0.687-0.688,0.687h-1.917v1.23H32.052z'%3E%3C/path%3E%3C/svg%3E");
}
.snsArea .facebookIcon::before,
.snsArea .xIcon::before,
.snsArea .bookmarkIcon::before,
.snsArea .lineIcon::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
.shareBtn {
    border-radius: 50%;
    margin: 0 5px;
    text-align: center;
    width: 33px;
    height: 33px;
    position: relative;
}
.shareBtn:first-of-type {
    margin: 0 5px 0 10px;
}

/* ================================================================
recommended Article
================================================================= */
.recommendedArticle-container {
    width: 100%;
    margin: 30px 0 0 0;
}
.recommendedArticle-content {
    width: 100%;
    height: auto;
    text-align: left;
    z-index: 1;
    position: relative;
    transition: color 0.2s;
    margin: 10px 0;
    padding: 0;
}
.recommendedArticle-content:first-child {
    margin: 0 0 10px 0;
}
.recommendedArticle-content a {
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    -webkit-box-align: center;
    align-items: center;
    opacity: 100;
}
.recommendedArticle-content figure {
    width: 100%;
    position: relative;
    margin: 0 15px 0 0;
    max-width: 242px;
}
.recommendedArticle-content .heading3 {
    margin: 0;
}



@media screen and (max-width: 767px) {
/* ================================================================
SP
================================================================= */
article h1 {
    font-size: 2.8rem;
    margin: 30px 0 10px 0;
}

/* ================================================================
SP - article area
================================================================= */
.article-body {
    margin: 30px 0 50px 0;
}
.article-body .reference {
    margin: 10px 0 20px 0;
}
.excursion a p {
    font-size: 1.4rem;
    letter-spacing: 0;
    line-height: 1.4;
}
.article-body table th {
    width: 100px;
    padding: 10px;
}
.article-body table td {
    padding: 10px;
    flex-direction: column;
}

/* ================================================================
SP - SNS Share
================================================================= */
.snsArea p {
    font-size: 1.4rem;
    letter-spacing: 0;
}

}



