#baguetteBox-overlay{display:none;opacity:0;position:fixed;overflow:hidden;top:0;left:0;width:100%;height:100%;z-index:1000000;background-color:#222;background-color:rgba(0,0,0,.8);-webkit-transition:opacity .5s ease;transition:opacity .5s ease}#baguetteBox-overlay.visible{opacity:1}#baguetteBox-overlay .full-image{display:inline-block;position:relative;width:100%;height:100%;text-align:center}#baguetteBox-overlay .full-image figure{display:inline;margin:0;height:100%}#baguetteBox-overlay .full-image img{display:inline-block;width:auto;height:auto;max-height:100%;max-width:100%;vertical-align:middle;-webkit-box-shadow:0 0 8px rgba(0,0,0,.6);-moz-box-shadow:0 0 8px rgba(0,0,0,.6);box-shadow:0 0 8px rgba(0,0,0,.6)}#baguetteBox-overlay .full-image figcaption{display:block;position:absolute;bottom:0;width:100%;text-align:center;line-height:1.8;white-space:normal;color:#ccc;background-color:#000;background-color:rgba(0,0,0,.6);font-family:sans-serif}#baguetteBox-overlay .full-image:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}#baguetteBox-slider{position:absolute;left:0;top:0;height:100%;width:100%;white-space:nowrap;-webkit-transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,-webkit-transform .4s ease;transition:left .4s ease,transform .4s ease;transition:left .4s ease,transform .4s ease,-webkit-transform .4s ease,-moz-transform .4s ease}#baguetteBox-slider.bounce-from-right{-webkit-animation:bounceFromRight .4s ease-out;animation:bounceFromRight .4s ease-out}#baguetteBox-slider.bounce-from-left{-webkit-animation:bounceFromLeft .4s ease-out;animation:bounceFromLeft .4s ease-out}@-webkit-keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@keyframes bounceFromRight{0%,100%{margin-left:0}50%{margin-left:-30px}}@-webkit-keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}@keyframes bounceFromLeft{0%,100%{margin-left:0}50%{margin-left:30px}}.baguetteBox-button#next-button,.baguetteBox-button#previous-button{top:50%;top:calc(50% - 30px);width:44px;height:60px}.baguetteBox-button{position:absolute;cursor:pointer;outline:0;padding:0;margin:0;border:0;-moz-border-radius:15%;border-radius:15%;background-color:#323232;background-color:rgba(50,50,50,.5);color:#ddd;font:1.6em sans-serif;-webkit-transition:background-color .4s ease;transition:background-color .4s ease}.baguetteBox-button:focus,.baguetteBox-button:hover{background-color:rgba(50,50,50,.9)}.baguetteBox-button#next-button{right:2%}.baguetteBox-button#previous-button{left:2%}.baguetteBox-button#close-button{top:20px;right:2%;right:calc(2% + 6px);width:30px;height:30px}.baguetteBox-button svg{position:absolute;left:0;top:0}.baguetteBox-spinner{width:40px;height:40px;display:inline-block;position:absolute;top:50%;left:50%;margin-top:-20px;margin-left:-20px}.baguetteBox-double-bounce1,.baguetteBox-double-bounce2{width:100%;height:100%;-moz-border-radius:50%;border-radius:50%;background-color:#fff;opacity:.6;position:absolute;top:0;left:0;-webkit-animation:bounce 2s infinite ease-in-out;animation:bounce 2s infinite ease-in-out}.baguetteBox-double-bounce2{-webkit-animation-delay:-1s;animation-delay:-1s}@-webkit-keyframes bounce{0%,100%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce{0%,100%{-webkit-transform:scale(0);-moz-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1);-moz-transform:scale(1);transform:scale(1)}}.tn-article-design {
--tn-article-accent: #506f61;
--tn-article-paper: #f7f3e9;
--tn-article-paper-deep: #eee8da;
--tn-article-surface: #fffdf8;
--tn-article-ink: #24352f;
--tn-article-muted: #5f6e67;
--tn-article-accent-dark: #39584c;
--tn-article-accent-soft: #edf4ef;
--tn-article-secondary: #79556f;
--tn-article-highlight: #a45132;
--tn-article-highlight-soft: #fae8dc;
--tn-article-rule: rgba(36, 53, 47, 0.24);
--tn-article-radius: 16px;
--tn-article-display-font: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
background-color: var(--tn-article-paper);
background-image:
linear-gradient(rgba(80, 111, 97, 0.032) 1px, transparent 1px),
radial-gradient(circle at 7% 3%, var(--tn-article-highlight-soft), transparent 23rem),
radial-gradient(circle at 95% 18%, var(--tn-article-accent-soft), transparent 26rem);
background-size: 100% 30px, auto, auto;
color: var(--tn-article-ink);
}
.tn-article-design.tn-corners-square { --tn-article-radius: 3px; }
.tn-article-design.tn-corners-round { --tn-article-radius: 25px; }
.tn-article-design.tn-font-mincho {
--tn-article-display-font: "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", Georgia, serif;
}
.tn-article-design.tn-font-mincho .article {
font-family: "Yu Mincho", "Hiragino Mincho ProN", "BIZ UDPMincho", Georgia, serif;
}
.tn-article-design.tn-font-gothic {
--tn-article-display-font: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
}
.tn-article-design.tn-font-gothic .article {
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
} .tn-article-design #header {
position: relative;
display: grid;
min-height: 190px;
place-items: center;
padding: 22px;
background-color: var(--tn-article-paper-deep);
background-image: var(--tn-article-site-header-image);
background-position: center;
background-size: cover;
}
.tn-article-design #header-in {
display: flex;
width: min(1120px, 100%);
min-height: 0;
align-items: flex-start;
justify-content: flex-end;
flex-direction: column;
gap: 8px;
padding: 24px clamp(28px, 6vw, 74px) 28px;
}
.tn-article-design #header .tagline {
margin: 0;
color: #fff;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-shadow: 0 1px 2px rgba(25, 31, 29, 0.94), 0 2px 8px rgba(25, 31, 29, 0.72);
}
.tn-article-design #header .logo-header {
width: auto;
max-width: min(720px, 76vw);
margin: 0;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
text-align: left;
}
.tn-article-design #header .logo-header::after {
content: "";
display: block;
width: 64px;
height: 2px;
margin-top: 11px;
background: rgba(255, 255, 255, 0.86);
}
.tn-article-design #header .site-name-text-link {
display: block;
color: #fff;
text-decoration: none;
}
.tn-article-design #header .site-name-text {
color: inherit;
font-family: var(--tn-article-display-font);
font-size: clamp(27px, 3.1vw, 38px);
font-weight: 750;
letter-spacing: 0.025em;
line-height: 1.28;
-webkit-text-stroke: 0.2px rgba(25, 31, 29, 0.62);
text-shadow:
0 1px 2px rgba(25, 31, 29, 0.82),
0 3px 12px rgba(25, 31, 29, 0.46);
text-wrap: balance;
}
.tn-article-design.tn-article-site-header-plain #header {
min-height: 130px;
background-image:
radial-gradient(circle at 16% 32%, var(--tn-article-highlight-soft), transparent 17rem),
linear-gradient(115deg, var(--tn-article-accent-soft), var(--tn-article-paper-deep));
}
.tn-article-design.tn-article-site-header-plain #header .tagline,
.tn-article-design.tn-article-site-header-plain #header .site-name-text-link {
color: var(--tn-article-ink);
}
.tn-article-design.tn-article-site-header-plain #header .site-name-text {
-webkit-text-stroke: 0;
text-shadow: none;
}
.tn-article-design.tn-article-site-header-plain #header .logo-header::after { background: var(--tn-article-accent); }
.tn-article-design.tn-article-site-header-hidden #header { display: none; }
.tn-article-design #navi {
border-bottom: 1px solid var(--tn-article-rule);
background: var(--tn-article-surface);
}
.tn-article-design #content {
position: relative;
z-index: 2;
}
.tn-article-design .content-in {
align-items: flex-start;
gap: clamp(24px, 4vw, 44px);
padding-inline: clamp(12px, 2vw, 24px);
}
.tn-article-design .main,
.tn-article-design .sidebar,
.tn-article-design .article,
.tn-article-design .widget { box-sizing: border-box; }
.tn-article-design .main {
margin-top: -42px;
margin-bottom: 42px;
padding: clamp(22px, 4.8vw, 58px);
overflow: visible;
border: 1px solid var(--tn-article-rule);
border-left: 5px solid var(--tn-article-accent);
border-radius: 6px calc(var(--tn-article-radius) + 10px) calc(var(--tn-article-radius) + 10px) calc(var(--tn-article-radius) + 10px);
background: var(--tn-article-surface);
box-shadow: 0 24px 64px rgba(36, 53, 47, 0.14);
}
.tn-article-design .article-header {
position: relative;
margin: calc(clamp(22px, 4.8vw, 58px) * -1) calc(clamp(22px, 4.8vw, 58px) * -1) 44px;
padding: clamp(34px, 5vw, 54px) clamp(22px, 5vw, 62px) clamp(26px, 4vw, 38px);
overflow: hidden;
border-radius: 2px calc(var(--tn-article-radius) + 9px) 0 0;
border-bottom: 1px solid var(--tn-article-rule);
background:
linear-gradient(115deg, var(--tn-article-accent-soft), transparent 70%),
var(--tn-article-surface);
}
.tn-article-design .article-header::before {
content: "STORY & NOTE";
display: inline-flex;
min-height: 28px;
align-items: center;
margin-bottom: 16px;
padding: 2px 11px;
border: 1px solid var(--tn-article-accent);
border-radius: 999px;
color: var(--tn-article-accent-dark);
font-family: system-ui, sans-serif;
font-size: 11px;
font-weight: 800;
letter-spacing: 0.16em;
}
.tn-article-design .article-header::after {
content: "";
position: absolute;
top: -72px;
right: -36px;
width: 210px;
aspect-ratio: 1;
transform: rotate(13deg);
border: 1px solid var(--tn-article-rule);
background: repeating-linear-gradient(0deg, transparent 0 18px, var(--tn-article-rule) 19px 20px);
opacity: 0.24;
pointer-events: none;
}
.tn-article-design .entry-title {
position: relative;
z-index: 1;
max-width: 820px;
margin: 0;
padding: 0;
border: 0;
background: none;
color: var(--tn-article-ink);
font-family: var(--tn-article-display-font);
font-size: clamp(28px, 4vw, 44px);
font-weight: 750;
letter-spacing: 0.02em;
line-height: 1.42;
text-wrap: pretty;
}
.tn-article-design .date-tags,
.tn-article-design .post-date,
.tn-article-design .post-update,
.tn-article-design .entry-category,
.tn-article-design .entry-categories-tags {
position: relative;
z-index: 1;
color: var(--tn-article-muted);
font-size: 13px;
}
.tn-article-design .eye-catch-wrap {
margin: 0 0 clamp(34px, 5vw, 56px);
padding: 9px;
transform: rotate(-0.35deg);
border: 1px solid var(--tn-article-rule);
border-radius: calc(var(--tn-article-radius) + 2px) calc(var(--tn-article-radius) + 2px) 6px calc(var(--tn-article-radius) + 2px);
background: #fff;
box-shadow: 0 16px 34px rgba(36, 53, 47, 0.1);
}
.tn-article-design .eye-catch-wrap img {
display: block;
width: 100%;
border-radius: max(2px, calc(var(--tn-article-radius) - 4px));
}
.tn-article-design .entry-content {
max-width: 760px;
margin-inline: auto;
color: var(--tn-article-ink);
font-size: clamp(16px, 1.3vw, 18px);
line-height: 2;
overflow-wrap: anywhere;
}
.tn-article-design .entry-content > * + * { margin-top: 1.45em; }
.tn-article-design .entry-content h2 {
position: relative;
margin-top: clamp(58px, 8vw, 88px);
padding: 20px 22px 18px 25px;
border: 0;
border-left: 7px solid var(--tn-article-accent);
border-radius: 3px var(--tn-article-radius) var(--tn-article-radius) 3px;
background: var(--tn-article-accent-soft);
color: var(--tn-article-ink);
font-size: clamp(23px, 3vw, 31px);
line-height: 1.55;
}
.tn-article-design .entry-content h2::after {
content: "";
position: absolute;
right: 18px;
bottom: -7px;
width: 72px;
height: 14px;
transform: rotate(-2deg);
background: var(--tn-article-highlight-soft);
opacity: 0.9;
}
.tn-article-design .entry-content h3 {
margin-top: 2.5em;
padding: 8px 4px 10px 17px;
border: 0;
border-left: 4px solid var(--tn-article-secondary);
border-bottom: 1px dashed var(--tn-article-rule);
background: transparent;
color: var(--tn-article-ink);
font-size: clamp(20px, 2.5vw, 25px);
}
.tn-article-design .entry-content h4 {
margin-top: 2.2em;
padding-bottom: 7px;
border: 0;
border-bottom: 3px double var(--tn-article-rule);
color: var(--tn-article-accent-dark);
}
.tn-article-design .entry-content a {
color: var(--tn-article-accent-dark);
text-decoration-color: var(--tn-article-highlight);
text-decoration-thickness: 1px;
text-underline-offset: 0.22em;
}
.tn-article-design .entry-content a:hover { color: var(--tn-article-highlight); }
.tn-article-design .entry-content .tn-cta a,
.tn-article-design .entry-content .tn-cta .wp-block-button__link {
color: #fff;
text-decoration: none;
}
.tn-article-design .entry-content .tn-cta a:hover,
.tn-article-design .entry-content .tn-cta .wp-block-button__link:hover {
color: #fff;
}
.tn-article-design :focus-visible {
outline: 3px solid var(--tn-article-secondary);
outline-offset: 4px;
}
.tn-article-design .entry-content blockquote {
position: relative;
margin: 2em 0;
padding: 26px 28px 22px 56px;
border: 1px solid var(--tn-article-rule);
border-radius: var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius) 5px;
background: var(--tn-article-paper);
color: var(--tn-article-muted);
}
.tn-article-design .entry-content blockquote::before {
content: "“";
position: absolute;
top: 3px;
left: 18px;
color: var(--tn-article-accent);
font-family: Georgia, serif;
font-size: 54px;
line-height: 1;
}
.tn-article-design .entry-content > ul:not([class]),
.tn-article-design .entry-content > ol:not([class]) {
padding: 24px 28px 24px 48px;
border: 1px solid #dce3df;
border-radius: min(8px, var(--tn-article-radius));
background: #fff;
box-shadow: 0 4px 14px rgba(36, 53, 47, 0.035);
}
.tn-article-design .entry-content > ul:not([class]) > li::marker,
.tn-article-design .entry-content > ol:not([class]) > li::marker {
color: var(--tn-inner-accent, var(--tn-article-accent, #506f61));
}
.tn-article-design .entry-content li + li { margin-top: 0.65em; }
.tn-article-design .toc {
position: relative;
max-width: 680px;
margin: clamp(36px, 5vw, 54px) auto;
padding: 28px clamp(20px, 4vw, 36px);
transform: rotate(-0.18deg);
border: 1px solid var(--tn-article-rule);
border-radius: 4px var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius);
background: repeating-linear-gradient(0deg, transparent 0 29px, rgba(80, 111, 97, 0.09) 30px), var(--tn-article-surface);
box-shadow: 8px 10px 0 var(--tn-article-paper-deep);
}
.tn-article-design .toc::before {
content: "INDEX";
position: absolute;
top: -14px;
right: 22px;
padding: 4px 13px;
transform: rotate(2deg);
background: var(--tn-article-highlight-soft);
color: var(--tn-article-highlight);
font-size: 11px;
font-weight: 800;
letter-spacing: 0.15em;
}
.tn-article-design .toc-title {
color: var(--tn-article-ink);
font-size: 18px;
font-weight: 800;
letter-spacing: 0.08em;
}
.tn-article-design .entry-content table {
border-collapse: separate;
border-spacing: 0;
border: 1px solid var(--tn-article-rule);
border-radius: 12px;
background: var(--tn-article-surface);
}
.tn-article-design .entry-content th {
background: var(--tn-article-accent-soft);
color: var(--tn-article-accent-dark);
}
.tn-article-design .entry-content th,
.tn-article-design .entry-content td {
padding: 13px 15px;
border-color: var(--tn-article-rule);
}
.tn-article-design .information-box,
.tn-article-design .question-box,
.tn-article-design .alert-box,
.tn-article-design .memo-box,
.tn-article-design .comment-box,
.tn-article-design .common-icon-box,
.tn-article-design .blank-box,
.tn-article-design .caption-box {
border-width: 1px;
border-radius: var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius) 5px;
box-shadow: none;
}
.tn-article-design .sns-share,
.tn-article-design .sns-follow,
.tn-article-design .related-entry-heading,
.tn-article-design .author-box {
max-width: 760px;
margin-right: auto;
margin-left: auto;
}
.tn-article-design .sns-share {
margin-top: 58px;
padding-top: 28px;
border-top: 1px dashed var(--tn-article-rule);
}
.tn-article-design .article-header > .sns-share {
margin-top: 34px;
padding-top: 22px;
}
.tn-article-design .sns-share-message,
.tn-article-design .sns-follow-message {
color: var(--tn-article-muted);
font-size: 13px;
font-weight: 800;
letter-spacing: 0.08em;
}
.tn-article-design .sns-buttons {
display: flex;
flex-wrap: wrap;
gap: 9px;
}
.tn-article-design .sns-buttons a,
.tn-article-design .sns-share-buttons a,
.tn-article-design .sns-follow-buttons a {
min-width: 46px;
min-height: 46px;
border: 1px solid var(--tn-article-rule);
border-radius: 999px;
box-shadow: none;
filter: saturate(0.68);
transition: transform 160ms ease, filter 160ms ease;
}
.tn-article-design .sns-buttons a:hover,
.tn-article-design .sns-share-buttons a:hover,
.tn-article-design .sns-follow-buttons a:hover {
transform: translateY(-2px);
filter: saturate(0.95);
}
.tn-article-design .author-box {
padding: clamp(22px, 4vw, 34px);
border: 1px solid var(--tn-article-rule);
border-radius: var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius) 5px;
background: linear-gradient(135deg, var(--tn-article-accent-soft), var(--tn-article-surface));
box-shadow: 8px 9px 0 var(--tn-article-paper-deep);
}
.tn-article-design .author-thumb img { border: 4px solid var(--tn-article-surface); }
.tn-article-design .related-entry-heading,
.tn-article-design .comment-title {
padding: 12px 0;
border: 0;
border-bottom: 3px double var(--tn-article-rule);
background: none;
color: var(--tn-article-ink);
}
.tn-article-design .related-entry-card-wrap { border-bottom: 1px dashed var(--tn-article-rule); }
.tn-article-design .related-entry-card {
padding: 15px;
border-radius: 12px;
transition: background-color 160ms ease, transform 160ms ease;
}
.tn-article-design .related-entry-card:hover {
transform: translateX(3px);
background: var(--tn-article-accent-soft);
}
.tn-article-design .sidebar .widget {
padding: 22px;
border: 1px solid var(--tn-article-rule);
border-radius: 4px var(--tn-article-radius) var(--tn-article-radius) var(--tn-article-radius);
background: var(--tn-article-surface);
box-shadow: 0 12px 34px rgba(36, 53, 47, 0.07);
}
.tn-article-design .sidebar .widget-title {
padding: 0 0 10px;
border: 0;
border-bottom: 2px solid var(--tn-article-accent);
background: none;
color: var(--tn-article-ink);
font-size: 17px;
letter-spacing: 0.06em;
}
.tn-article-design .breadcrumb {
color: var(--tn-article-muted);
font-size: 12px;
}
@media (max-width: 1023px) {
.tn-article-design .content-in { display: block; }
.tn-article-design .sidebar { margin-top: 34px; }
}
@media (max-width: 640px) {
.tn-article-design #header {
min-height: 118px;
padding: 0;
}
.tn-article-design #header-in {
width: 100%;
padding: 18px 22px 20px;
}
.tn-article-design #header .logo-header {
max-width: calc(100vw - 34px);
}
.tn-article-design #header .site-name-text {
font-size: clamp(21px, 6.2vw, 26px);
letter-spacing: 0.02em;
}
.tn-article-design.tn-article-site-header-plain #header { min-height: 96px; }
.tn-article-design .main {
margin-top: -18px;
margin-bottom: 18px;
padding: 20px 17px 30px;
border-right: 0;
border-left: 0;
border-radius: 0;
box-shadow: none;
}
.tn-article-design .article-header {
margin: -20px -17px 30px;
padding: 32px 19px 24px;
border-radius: 0;
}
.tn-article-design .article-header::after { width: 116px; opacity: 0.2; }
.tn-article-design .entry-title { font-size: clamp(25px, 8vw, 34px); }
.tn-article-design .article-header > .sns-share { margin-top: 28px; padding-top: 20px; }
.tn-article-design .eye-catch-wrap {
margin-inline: -5px;
padding: 6px;
}
.tn-article-design .entry-content { font-size: 16px; line-height: 1.9; }
.tn-article-design .entry-content h2 {
margin-top: 52px;
padding: 17px 15px 15px 17px;
font-size: 23px;
}
.tn-article-design .entry-content h3 { font-size: 20px; }
.tn-article-design .entry-content blockquote { padding: 22px 18px 18px 43px; }
.tn-article-design .entry-content > ul:not([class]),
.tn-article-design .entry-content > ol:not([class]) { padding: 20px 18px 20px 40px; }
.tn-article-design .toc {
margin-right: 5px;
margin-left: 0;
padding: 24px 18px;
}
.tn-article-design .sns-buttons a,
.tn-article-design .sns-share-buttons a,
.tn-article-design .sns-follow-buttons a {
min-width: 44px;
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.tn-article-design .sns-buttons a,
.tn-article-design .sns-share-buttons a,
.tn-article-design .sns-follow-buttons a,
.tn-article-design .related-entry-card { transition: none; }
}