F-light v1.30 → v1.31-TD

Created Diff never expires
153 Entfernungen
Zeilen
Gesamt
Entfernt
Wörter
Gesamt
Entfernt
Um diese Funktion weiterhin zu nutzen, aktualisieren Sie auf
Diffchecker logo
Diffchecker Pro
1147 Zeilen
64 Hinzufügungen
Zeilen
Gesamt
Hinzugefügt
Wörter
Gesamt
Hinzugefügt
Um diese Funktion weiterhin zu nutzen, aktualisieren Sie auf
Diffchecker logo
Diffchecker Pro
1063 Zeilen
<?xml version="1.0" encoding="UTF-8" ?>
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<!DOCTYPE html>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>
<html b:css='false' b:defaultwidgetversion='2' b:js='true' b:layoutsVersion='3' b:responsive='true' expr:dir='data:blog.languageDirection' expr:lang='data:blog.locale' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><b:attr name='xmlns' value=''/><b:attr name='xmlns:b' value=''/><b:attr name='xmlns:expr' value=''/><b:attr name='xmlns:data' value=''/>
<head>
<head>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/>
<meta content='width=device-width,initial-scale=1.0,minimum-scale=1.0' name='viewport'/>
<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<meta expr:content='&quot;text/html; charset=&quot; + data:blog.encoding' http-equiv='Content-Type'/>
<meta content='blogger' name='generator'/>
<meta content='blogger' name='generator'/>
<!-- DNS prefetch -->
<!-- DNS prefetch -->
<link href='//blogger.googleusercontent.com' rel='dns-prefetch'/>
<link href='//blogger.googleusercontent.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//1.bp.blogspot.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//www.blogger.com' rel='dns-prefetch'/>
<link href='//cdn.jsdelivr.net' rel='dns-prefetch'/>
<link href='//cdn.jsdelivr.net' rel='dns-prefetch'/>
<!-- SEO -->
<!-- SEO -->
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isSingleItem'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<title><data:blog.pageName/> | <data:blog.title/></title>
<meta expr:content='resizeImage(data:view.featuredImage, 560, &quot;16:9&quot;)' name='thumbnail'/>
<meta expr:content='resizeImage(data:view.featuredImage, 560, &quot;16:9&quot;)' name='thumbnail'/>
<b:elseif cond='data:view.search.query'/>
<b:elseif cond='data:view.search.query'/>
<title>&#12300;<data:view.search.query/>&#12301;の検索結果 | <data:blog.title/></title>
<title>&#12300;<data:view.search.query/>&#12301;の検索結果 | <data:blog.title/></title>
<b:elseif cond='data:view.isLabelSearch'/>
<b:elseif cond='data:view.isLabelSearch'/>
<title>ラベル: <data:blog.pageName/> | <data:blog.title/></title>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:elseif cond='data:view.archive.month'/>
<b:elseif cond='data:view.archive.month'/>
<title><data:view.archive.year/>年 <data:view.archive.month/>月のアーカイブ | <data:blog.title/></title>
<title><data:view.archive.year/>年 <data:view.archive.month/>月 | <data:blog.title/></title>
<b:elseif cond='data:view.archive.year'/>
<b:elseif cond='data:view.archive.year'/>
<title><data:view.archive.year/>年のアーカイブ | <data:blog.title/></title>
<title><data:view.archive.year/>年 | <data:blog.title/></title>
<b:elseif cond='data:view.isError'/>
<b:elseif cond='data:view.isError'/>
<title>404 Not Found | <data:blog.title/></title>
<title>404 Not Found | <data:blog.title/></title>
<b:else/>
<b:else/>
<title><data:blog.pageTitle/></title>
<title><data:blog.pageTitle/></title>
</b:if>
</b:if>
<meta expr:content='data:view.description.escaped' name='description'/>
<meta expr:content='data:view.description.escaped' name='description'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<link expr:href='data:view.url.canonical' rel='canonical'/>
<!-- Favicon -->
<!-- Favicon -->
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<link expr:href='data:blog.blogspotFaviconUrl' rel='icon' type='image/x-icon'/>
<!-- RSS Feed -->
<!-- RSS Feed -->
<data:blog.feedLinks/>
<data:blog.feedLinks/>
<!-- OGP -->
<!-- OGP -->
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<meta expr:content='data:blog.url.canonical' property='og:url'/>
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isSingleItem'>
<meta expr:content='data:blog.pageName.escaped + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta expr:content='data:blog.pageName.escaped + &quot; | &quot; + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.search.query'/>
<b:elseif cond='data:view.search.query'/>
<meta expr:content=' &quot;「&quot; + data:view.search.query + &quot;」&quot; + &quot;の検索結果&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta expr:content=' &quot;「&quot; + data:view.search.query + &quot;」&quot; + &quot;の検索結果&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.isLabelSearch'/>
<b:elseif cond='data:view.isLabelSearch'/>
<meta expr:content='&quot;ラベル: &quot; + data:blog.pageName.escaped + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta expr:content='&quot;ラベル: &quot; + data:blog.pageName.escaped + &quot; | &quot; + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.archive.month'/>
<b:elseif cond='data:view.archive.month'/>
<meta expr:content='data:view.archive.year + &quot;年 &quot; + data:view.archive.month + &quot;月のアーカイブ&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta expr:content='data:view.archive.year + &quot;年 &quot; + data:view.archive.month + &quot;月のアーカイブ&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.archive.year'/>
<b:elseif cond='data:view.archive.year'/>
<meta expr:content='data:view.archive.year + &quot;年のアーカイブ&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta expr:content='data:view.archive.year + &quot;年のアーカイブ&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<b:elseif cond='data:view.isError'/>
<b:elseif cond='data:view.isError'/>
<meta expr:content='&quot;404 Not Found&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<meta expr:content='&quot;404 Not Found&quot; + &quot; | &quot; + data:blog.title' property='og:title'/>
<b:else/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta expr:content='data:blog.title' property='og:title'/>
</b:if>
</b:if>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<meta expr:content='data:view.description.escaped' property='og:description'/>
<b:if cond='data:view.isSingleItem'>
<b:if cond='data:view.isSingleItem'>
<meta content='article' property='og:type'/>
<meta content='article' property='og:type'/>
<b:else/>
<b:else/>
<meta content='blog' property='og:type'/>
<meta content='blog' property='og:type'/>
</b:if>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:view.featuredImage'>
<b:if cond='data:view.featuredImage'>
<meta expr:content='resizeImage(data:view.featuredImage, 560, &quot;16:9&quot;)' property='og:image'/>
<meta expr:content='resizeImage(data:view.featuredImage, 560, &quot;16:9&quot;)' property='og:image'/>
<b:else/>
<b:else/>
<meta content='【OGP 画像 URL】' property='og:image'/>
<meta content='【OGP 画像 URL】' property='og:image'/>
</b:if>
</b:if>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='summary_large_image' name='twitter:card'/>
<meta content='light' id='twth' name='twitter:widgets:theme'/>
<meta content='light' id='twth' name='twitter:widgets:theme'/>
<b:if cond='false'><b:skin><![CDATA[]]></b:skin></b:if>
<b:if cond='!data:view.isLayoutMode'>
<b:if cond='!data:view.isLayoutMode'>
<style>/*<![CDATA[*/
<b:skin><![CDATA[
/*--------------------------------------------------------------
/*--------------------------------------------------------------
Blogger Template
Blogger Template
Name : F-light
Name : F-light
Version : 1.30
Version : 1.31-TD
Designer: Fujiyan
Designer: Fujiyan
Url : https://f-light-theme.blogspot.com/
Url : https://f-light-theme.blogspot.com/
Lisense : カスタマイズは自由ですが再配布・販売は禁止です
Lisense : カスタマイズは自由ですが再配布・販売は禁止です
----------------------------------------------------------------*/
----------------------------------------------------------------*/

/*==== 初期化 CSS ====*/
/*==== 初期化 CSS ====*/
html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}@media(max-width:1024px){body{font-size:1.6rem}}
html{min-height:100vh}.item-control{display:none}*{margin:0;padding:0;font-size:100%;vertical-align:baseline}*,::after,::before{box-sizing:border-box}html{font-size:62.5%}body{word-wrap:break-word;overflow-wrap:break-word}img{height:auto;max-width:100%;vertical-align:bottom}iframe{max-width:100%;border:none}.post-body ol,.post-body ul{padding-left:1em}.widget-content ul,.widget-content ol{padding-left:1.5em}@media(max-width:1024px){body{font-size:1.6rem}}

/*<Group description="ブランドカラー配色">
<Variable name="brand" description="濃いブランド色" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="brand.font" description="濃いブランド色部分の文字色" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="brand.light" description="薄いブランド色" type="color" default="#1e90ff" value="#1e90ff"/>
<Variable name="brand.light.font" description="薄いブランド色部分の文字色" type="color" default="#ffffff" value="#ffffff"/>
<Variable name="sub.brand" description="サブブランド色" type="color" default="#ff6347" value="#ff6347"/>
<Variable name="sub.brand.font" description="サブブランド色部分の文字色" type="color"
default="#ffffff" value="#ffffff"/>
</Group>
<Group description="背景の色">
<Variable name="darkmode.dark.bg" description="ダークモードの濃い背景色" type="color" default="#171e2d" value="#171e2d"/>
<Variable name="darkmode.light.bg" description="ダークモードの薄い背景色" type="color" default="#1d2638" value="#1d2638"/>
<Variable name="lightmode.dark.bg" description="ライトモードの濃い背景色" type="color" default="#eeeeff" value="#eeeeff"/>
<Variable name="lightmode.light.bg" description="ライトモードの薄い背景色" type="color" default="#fbfbff" value="#fbfbff"/>
<Variable name="darkmode.shadow" description="ダークモードの影" type="color" default="#000000" value="#000000"/>
<Variable name="lightmode.shadow" description="ライトモードの影" type="color" default="#aaaaaa" value="#aaaaaa"/>
</Group>
<Group description="文字の色">
<Variable name="darkmode.dark.font" description="ダークモードの濃い文字色" type="color" default="#eeeeee" value="#eeeeee"/>
<Variable name="darkmode.light.font" description="ダークモードの薄い文字色" type="color" default="#c0c0c0" value="#c0c0c0"/>
<Variable name="lightmode.dark.font" description="ライトモードの濃い文字色" type="color" default="#333333" value="#333333"/>
<Variable name="lightmode.light.font" description="ライトモードの薄い文字色" type="color" default="#666666" value="#666666"/>
<Variable name="darkmode.link" description="ダークモードのリンク色" type="color" default="#00bfff" value="#00bfff"/>
<Variable name="lightmode.link" description="ライトモードのリンク色" type="color" default="#4169e1" value="#4169e1"/>
</Group>*/
/*==== ダークモード用配色 ====*/
/*==== ダークモード用配色 ====*/
:root {
:root {
--dark-bg: rgba(23, 30, 45, 1); /*#171e2d 濃い背景色*/
--dark-bg: $(darkmode.dark.bg); /*濃い背景色*/
--light-bg: rgba(29, 38, 56, 1); /*#1d2638 薄い背景色*/
--light-bg: $(darkmode.light.bg); /*薄い背景色*/
--light-bg-t: rgba(29, 38, 56, .9); /*#1d2638e6 薄い背景色(半透明)*/
--shadow: #000; /*影*/
--shadow: #000; /*影*/
--color: #eee; /*文字色*/
--color: $(darkmode.dark.font); /*文字色*/
--dark-color: #c0c0c0; /*薄い文字色*/
--dark-color: $(darkmode.light.font); /*薄い文字色*/
--dark-color-t: rgba(192, 192, 192, .5); /*薄い文字色(半透明)*/
--red-color: Tomato; /*赤文字*/
--red-color: Tomato; /*赤文字*/
--blue-color: #8cb4ff; /*青文字*/
--blue-color: #8cb4ff; /*青文字*/
--green-color: #00d061; /*緑文字*/
--green-color: #00d061; /*緑文字*/
--link: DeepSkyBlue; /*リンク色*/
--link: $(darkmode.link); /*リンク色*/
--brand: RoyalBlue; /*濃いブランド色*/
--brand: $(brand); /*濃いブランド色*/
--brand-t: rgba(65, 105, 225, .9); /*濃いブランド色(半透明)*/
--brand-light: $(brand.light); /*薄いブランド色*/
--brand-light: DodgerBlue; /*薄いブランド色*/
--brand-font: $(brand.font); /*ブランド色背景用文字色*/
--brand-light-t: rgba(30, 144, 255, .9); /*薄いブランド色(半透明)*/
--sub-brand: $(sub.brand); /*サブブランド色*/
--brand-font: #fff; /*ブランド色背景用文字色*/
--sub-brand-font: $(sub.brand.font) /*サブブランド色背景用文字色*/
--sub-brand: Tomato; /*サブブランド色*/
--sub-brand-font: #fff; /*サブブランド色背景用文字色*/
}
}

/*==== ライトモード用配色 ====*/
/*==== ライトモード用配色 ====*/
:root[data-theme-mode="light"] {
:root[data-theme-mode="light"] {
--dark-bg: rgba(238, 238, 255, 1); /*#eef 濃い背景色*/
--dark-bg: $(lightmode.dark.bg); /*濃い背景色*/
--light-bg: rgba(251, 251, 255, 1); /*#fbfbff 薄い背景色*/
--light-bg: $(lightmode.light.bg); /*薄い背景色*/
--light-bg-t: rgba(251, 251, 255, .9); /*#fbfbffe6 薄い背景色(半透明)*/
--shadow: $(lightmode.shadow); /*影*/
--shadow: #aaa; /*影*/
--color: $(lightmode.dark.font); /*文字色*/
--color: #333; /*文字色*/
--dark-color: $(lightmode.light.font); /*薄い文字色*/
--dark-color: #666; /*薄い文字色*/
--dark-color-t: rgba(102, 102, 102, .5); /*薄い文字色(半透明)*/
--red-color: #d30038; /*赤文字*/
--red-color: #d30038; /*赤文字*/
--blue-color: #592bff; /*青文字*/;
--blue-color: #592bff; /*青文字*/;
--green-color: #007936; /*緑文字*/;
--green-color: #007936; /*緑文字*/;
--link: RoyalBlue; /*リンク色*/
--link: $(lightmode.link); /*リンク色*/
}
}
]]></b:skin>


<style>/*<![CDATA[*/
/*==== 共通 ====*/
/*==== 共通 ====*/
body {
body {
font-size: 1.7rem;
font-size: 1.7rem;
color: var(--color);
color: var(--color);
background: var(--light-bg);
background: var(--light-bg);
text-underline-offset: .2em;
text-underline-offset: .2em;
text-decoration-skip-ink: none;
text-decoration-skip-ink: none;
-webkit-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
#sub-content a {
#sub-content a {
color: var(--link);
color: var(--link);
}
}
#sub-content .widget {
#sub-content .widget {
padding: .5em;
padding: .5em;
}
}
* {
* {
font-family: "HiraginoSans-W2", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif;
font-family: "HiraginoSans-W2", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif;
}
}
a {
a {
text-decoration: none;
text-decoration: none;
color: inherit;
color: inherit;
transition: .3s;
transition: .3s;
}
}
.blogger-clickTrap {
.blogger-clickTrap {
display: none;
display: none;
}
}
button:hover {
button:hover {
cursor: pointer;
cursor: pointer;
}
}
select {
select {
outline: none;
outline: none;
}
}
::selection {
::selection {
background: #00e5ff;
background: #00e5ff;
color: #000;
color: #000;
}
}
::-webkit-scrollbar {
::-webkit-scrollbar {
width: 6px;
width: 6px;
height: 6px;
height: 6px;
}
}
::-webkit-scrollbar-track {
::-webkit-scrollbar-track {
background: var(--light-bg);
background: var(--light-bg);
border-radius: 10px;
border-radius: 10px;
}
}
::-webkit-scrollbar-thumb {
::-webkit-scrollbar-thumb {
background: #aaa;
background: #aaa;
border-radius: 10px;
border-radius: 10px;
}
}
::-webkit-scrollbar-thumb:hover {
::-webkit-scrollbar-thumb:hover {
background: #bbb;
background: #bbb;
}
}
* {
* {
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #aaa transparent;
scrollbar-color: #aaa transparent;
}
}
input[type="checkbox"] {
display: none;
}
summary {
summary {
display: block;
display: block;
list-style: none;
list-style: none;
}
}
summary::-webkit-details-marker {
summary::-webkit-details-marker {
display: none;
display: none;
}
}
#MAIN .widget {
#MAIN .widget {
margin-bottom: 3em;
margin-bottom: 3em;
}
}
rt {
rt {
font-size: 50%;
font-size: 50%;
}
}


/*==== ヘッダー ====*/
/*==== ヘッダー ====*/
header {
header {
background: var(--light-bg);
background: var(--light-bg);
}
}
#header-title {
#header-title {
font-size: 2.5rem;
font-size: 2.5rem;
padding: .5em;
padding: .5em;
text-align: center;
text-align: center;
}
}
#header-title a {
#header-title a {
font-weight: bold;
font-weight: bold;
}
}
#header-title a:hover {
#header-title a:hover {
color: var(--link);
color: var(--link);
}
}
#header-desc {
#header-desc {
font-size: 1.2rem;
font-size: 1.2rem;
line-height: 1.3;
line-height: 1.3;
color: var(--dark-color);
color: var(--dark-color);
text-align: center;
text-align: center;
padding: 0 1em 1em;
padding: 0 1em 1em;
}
}
.header-img {
.header-img {
background-position: center;
background-position: center;
background-repeat: no-repeat;
background-repeat: no-repeat;
text-align: center;
text-align: center;
}
}


/*==== モード切替 ====*/
/*==== モード切替 ====*/
#mode-switch {
#mode-switch {
position: absolute;
position: absolute;
top: 5px;
top: 5px;
right: 1em;
right: 1em;
}
}
#mode-switch label {
#mode-switch label {
cursor: pointer;
cursor: pointer;
}
}
#mode-switch svg {
#mode-switch svg {
height: 24px;
height: 24px;
width: 24px;
width: 24px;
color: var(--brand-font);
color: var(--brand-font);
}
}
#switch-mode-dark svg {
#switch-mode-dark svg {
transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
@media (max-width: 1024px) {
@media (max-width: 1024px) {
#mode-switch {
#mode-switch {
right: 45px;
right: 45px;
}
}
}
}
#switch-mode-dark {
#switch-mode-dark {
display: none;
display: none;
}
}
input[type="checkbox"]#js_mode_toggle {
display: none;
}
#js_mode_toggle:checked ~ label #switch-mode-dark {
#js_mode_toggle:checked ~ label #switch-mode-dark {
display: initial;
display: initial;
}
}
#js_mode_toggle:checked ~ label #switch-mode-light {
#js_mode_toggle:checked ~ label #switch-mode-light {
display: none;
display: none;
}
}
#nav-button:checked ~ #mode-switch {
#nav-button:checked ~ #mode-switch {
display: none;
display: none;
}
}


/*==== ナビバー ====*/
/*==== ナビバー ====*/
nav {
nav {
background: linear-gradient(to right, var(--brand-light-t), var(--brand-t), var(--brand-light-t));
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
opacity: .9;
box-shadow: 0 3px 6px -4px var(--shadow);
box-shadow: 0 3px 6px -4px var(--shadow);
position: -webkit-sticky;
position: -webkit-sticky;
position: sticky;
position: sticky;
top: 0;
top: 0;
z-index: 10;
z-index: 10;
min-height: 2em;
min-height: 2em;
margin-top: -1px;
margin-top: -1px;
}
}
#nav {
#nav {
position: relative;
position: relative;
margin: auto;
margin: auto;
width: 100%;
width: 100%;
max-width: 1160px;
max-width: 1160px;
min-width: 960px;
min-width: 960px;
}
}
#nav-button,
#nav-button,
#nav-label {
#nav-label {
display: none;
display: none;
}
}
#nav-content ul {
#nav-content ul {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
max-width: 640px;
max-width: 640px;
}
}
#nav-content li {
#nav-content li {
line-height: 1.5;
line-height: 1.5;
list-style: none;
list-style: none;
transition: .3s;
transition: .3s;
}
}
#nav-content li a {
#nav-content li a {
display: block;
display: block;
font-size: 1.4rem;
font-size: 1.4rem;
padding: .5em 10px;
padding: .5em 10px;
color: var(--brand-font);
color: var(--brand-font);
}
}
#nav-content li a:hover {
#nav-content li a:hover {
background: #eef;
background: #eef;
color: #333!important;
color: #333!important;
}
}
@media (max-width: 1024px ) {
@media (max-width: 1024px ) {
nav {
nav {
height: 2em;
height: 2em;
}
}
#nav {
#nav {
box-shadow: 0 3px 6px -4px var(--shadow);
box-shadow: 0 3px 6px -4px var(--shadow);
background: var(--light-bg-t);
background: var(--light-bg);
padding-left: 8px;
padding-left: 8px;
min-width: 0;
min-width: 0;
}
}
#nav-content {
#nav-content {
max-height: 0;
max-height: 0;
overflow: hidden;
overflow: hidden;
transition: .2s;
transition: .2s;
}
}
input[type="checkbox"]#nav-button {
display: none;
}
#nav-button:checked ~ #nav-content {
#nav-button:checked ~ #nav-content {
max-height: 500px;
max-height: 500px;
transition: 1s;
transition: 1s;
}
}
#nav-content ul {
#nav-content ul {
margin-top: 30px;
margin-top: 30px;
max-width: 100%;
max-width: 100%;
}
}
#nav-content li {
#nav-content li {
width: 200px;
width: 200px;
margin-bottom: 5px;
margin-bottom: 5px;
margin-right: 8px;
margin-right: 8px;
}
}
#nav-content li a {
#nav-content li a {
width: 100%;
width: 100%;
display: block;
display: block;
color: var(--brand-font);
color: var(--brand-font);
text-align: center;
text-align: center;
background: var(--brand);
background: var(--brand);
border-radius: 3px;
border-radius: 3px;
}
}
#nav-label {
#nav-label {
float: right;
float: right;
position: relative;
position: relative;
display: flex;
display: flex;
height: 30px;
height: 30px;
width: 30px;
width: 30px;
align-items: center;
align-items: center;
margin-left: 5px;
margin-left: 5px;
cursor: pointer;
cursor: pointer;
z-index: 1;
z-index: 1;
}
}
#nav-label span,
#nav-label span,
#nav-label span::before,
#nav-label span::before,
#nav-label span::after {
#nav-label span::after {
position: absolute;
position: absolute;
content: "";
content: "";
display: block;
display: block;
height: 2px;
height: 2px;
width: 24px;
width: 24px;
border-radius: 2px;
border-radius: 2px;
background: var(--brand-font);
background: var(--brand-font);
transition: .3s;
transition: .3s;
}
}
#nav-label span::before {
#nav-label span::before {
bottom: 8px;
bottom: 8px;
}
}
#nav-label span::after {
#nav-label span::after {
top: 8px;
top: 8px;
}
}
#nav-button:checked ~ #nav-label span {
#nav-button:checked ~ #nav-label span {
background: transparent;
background: transparent;
}
}
#nav-button:checked ~ #nav-label span::before {
#nav-button:checked ~ #nav-label span::before {
bottom: 0;
bottom: 0;
transform: rotate(45deg);
transform: rotate(45deg);
background: var(--color);
background: var(--color);
}
}
#nav-button:checked ~ #nav-label span::after {
#nav-button:checked ~ #nav-label span::after {
top: 0;
top: 0;
transform: rotate(-45deg);
transform: rotate(-45deg);
background: var(--dark-color);
background: var(--dark-color);
}
}
}
}
#mobile-home {
#mobile-home {
display: none;
display: none;
color: var(--brand-font);
color: var(--brand-font);
position: absolute;
position: absolute;
font-size: 2.2rem;
font-size: 2.2rem;
top: 3px;
top: 3px;
}
}
#mobile-jump {
#mobile-jump {
display: none;
display: none;
color: var(--brand-font);
color: var(--brand-font);
position: absolute;
position: absolute;
}
}
#mobile-jump span {
#mobile-jump span {
display: inline-block;
display: inline-block;
margin: 0 5px;
margin: 0 5px;
height: 34px;
height: 34px;
cursor: pointer;
cursor: pointer;
}
}
#mobile-jump svg {
#mobile-jump svg {
margin-top: 5px;
margin-top: 5px;
}
}
#nav-button:checked ~ #mobile-home,
#nav-button:checked ~ #mobile-home,
#nav-button:checked ~ #mobile-jump,#nav-button:checked ~ .item-control a:not(.comment-delete) {
#nav-button:checked ~ #mobile-jump,#nav-button:checked ~ .item-control a:not(.comment-delete) {
display: none;
display: none;
}
}
@media (max-width: 1024px) {
@media (max-width: 1024px) {
#mobile-home,
#mobile-home,
#mobile-jump {
#mobile-jump {
display: initial;
display: initial;
}
}
}
}


/*==== 検索ボックス ====*/
/*==== 検索ボックス ====*/
#search-wrap {
#search-wrap {
position: absolute;
position: absolute;
right: 0;
right: 0;
}
}
.search-box-form {
.search-box-form {
position: relative;
position: relative;
width: 300px;
width: 300px;
margin-right: 90px;
margin-right: 90px;
background: transparent;
background: transparent;
z-index: 2;
z-index: 2;
}
}
.search-box-text {
.search-box-text {
width: 100%;
width: 100%;
height: 1.9em;
height: 1.9em;
margin-top: 2px;
margin-top: 2px;
border: 2px solid transparent;
border: 2px solid transparent;
border-radius: 5px;
border-radius: 5px;
outline: none;
outline: none;
background: transparent;
background: transparent;
color: var(--brand-font);
color: var(--brand-font);
font-size: 1.6rem;
font-size: 1.6rem;
padding: 2px 5px 0 28px;
padding: 2px 5px 0 28px;
transition: .2s;
transition: .2s;
}
}
.search-box-text:focus {
.search-box-text:focus {
border-color: var(--brand-font);
border-color: var(--brand-font);
background: var(--brand);
background: var(--brand);
}
}
.search-box-text::placeholder {
.search-box-text::placeholder {
color: var(--brand-font);
color: var(--brand-font);
}
}
.search-box-submit {
.search-box-submit {
color: var(--brand-font);
color: var(--brand-font);
position: absolute;
position: absolute;
left: 2px;
left: 2px;
top: 6px;
top: 6px;
border: none;
border: none;
background: transparent;
background: transparent;
outline: 0;
outline: 0;
padding: 0;
padding: 0;
transition: .3s;
transition: .3s;
}
}
.search-box-submit svg {
.search-box-submit svg {
height: 1.3em;
height: 1.3em;
width: 1.3em;
width: 1.3em;
}
}
.search-box-submit:hover {
.search-box-submit:hover {
transform: scale(1.2);
transform: scale(1.2);
}
}
::-webkit-search-cancel-button {
::-webkit-search-cancel-button {
height: 1.1em;
height: 1.1em;
width: 1.1em;
width: 1.1em;
-webkit-appearance: none;
-webkit-appearance: none;
cursor: pointer;
cursor: pointer;
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff"/></svg>');
background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" fill="%23fff"/></svg>');
}
}
input[type="search"]::-webkit-search-decoration {
input[type="search"]::-webkit-search-decoration {
display: none;
display: none;
}
}
@media (max-width: 600px ) {
@media (max-width: 600px ) {
#search-wrap {
#search-wrap {
right: 30px;
right: 30px;
}
}
.search-box-form {
.search-box-form {
width: 150px;
width: 150px;
margin-left: 5px;
margin-left: 5px;
margin-right: 55px;
margin-right: 55px;
}
}
.search-box-text:focus {
.search-box-text:focus {
width: 230px;
width: 230px;
}
}
}
}
#nav-button:checked ~ #search-wrap {
#nav-button:checked ~ #search-wrap {
display: none;
display: none;
}
}
.search-box-text::-moz-placeholder {
.search-box-text::-moz-placeholder {
opacity: 1;
opacity: 1;
color: var(--brand-font);
color: var(--brand-font);
}
}


/*==== アーカイブウィジェット ====*/
/*==== アーカイブウィジェット ====*/
.archive-list {
.archive-list {
margin: 0 auto 1em;
margin: 0 auto 1em;
max-width: 500px;
max-width: 500px;
}
}
.archive-list ul {
.archive-list ul {
box-shadow: 2px 2px 6px var(--shadow);
box-shadow: 2px 2px 6px var(--shadow);
border-top: none;
border-top: none;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
color: var(--color);
color: var(--color);
max-height: 16em;
max-height: 16em;
overflow: auto;
overflow: auto;
margin: 0 1px 0!important;
margin: 0 1px 0!important;
padding-left: 0!important;
padding-left: 0!important;
}
}
.archive-list ul li {
.archive-list ul li {
font-size: 1.5rem;
font-size: 1.5rem;
line-height: 1.8;
line-height: 1.8;
margin: 0!important;
margin: 0!important;
padding: 0!important;
padding: 0!important;
list-style: none;
list-style: none;
}
}
.archive-list summary {
.archive-list summary {
position: relative;
position: relative;
padding: 5px 0 5px 8px;
padding: 5px 0 5px 8px;
height: 2em;
height: 2em;
line-height: 1.5;
line-height: 1.5;
background: var(--brand);
background: var(--brand);
color: var(--brand-font);
color: var(--brand-font);
font-size: 1.5rem;
font-size: 1.5rem;
border-radius: 5px;
border-radius: 5px;
transition: .3s;
transition: .3s;
}
}
.archive-list summary:hover,
.archive-list summary:hover,
details[open].archive-list summary:hover {
details[open].archive-list summary:hover {
background: var(--brand-light);
background: var(--brand-light);
cursor: pointer;
cursor: pointer;
}
}
.archive-list a {
.archive-list a {
display: block;
display: block;
padding-left: .5em;
padding-left: .5em;
color: var(--color)!important;
color: var(--color)!important;
text-decoration: none!important;
text-decoration: none!important;
}
}
.archive-list a:hover {
.archive-list a:hover {
background: dodgerblue;
background: dodgerblue;
color: #fff!important;
color: #fff!important;
}
}
.archive-list .svg-icon-24 {
.archive-list .svg-icon-24 {
position: absolute;
position: absolute;
right: 3px;
right: 3px;
top: 0;
top: 0;
font-size: 2.5rem;
font-size: 2.5rem;
color: var(--darkfcolor);
color: var(--darkfcolor);
transition: .2s;
transition: .2s;
}
}
details[open].archive-list .svg-icon-24 {
details[open].archive-list .svg-icon-24 {
transform: rotate(180deg);
transform: rotate(180deg);
}
}
details[open].archive-list summary {
details[open].archive-list summary {
color: var(--brand-font);
color: var(--brand-font);
background: var(--brand-light);
background: var(--brand-light);
box-shadow: 0 4px 4px -4px var(--shadow);
box-shadow: 0 4px 4px -4px var(--shadow);
border-bottom-left-radius: 0;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
border-bottom-right-radius: 0;
}
}
.archive-list ul::-webkit-scrollbar-track {
.archive-list ul::-webkit-scrollbar-track {
background: var(--light-bg);
background: var(--light-bg);
}
}


/*==== ページリスト / リンクリスト ====*/
/*==== ページリスト / リンクリスト ====*/
.list-widget li {
.list-widget li {
list-style-type: none;
list-style-type: none;
line-height: 1.5;
line-height: 1.5;
padding-bottom: 5px;
padding-bottom: 5px;
}
}
.list-widget a {
.list-widget a {
color: var(--color)!important;
color: var(--color)!important;
font-size: 1.3rem;
font-size: 1.3rem;
font-weight: bold;
font-weight: bold;
padding: 5px 8px 3px;
padding: 5px 8px 3px;
text-indent: -5px;
text-indent: -5px;
border-radius: 2px;
border-radius: 2px;
width: 100%;
width: 100%;
display: block;
display: block;
}
}
.list-widget a::after {
.list-widget a::after {
content: "\00BB";
content: "\00BB";
margin-left: 2px;
margin-left: 2px;
}
}
.list-widget a:hover {
.list-widget a:hover {
background: var(--brand);
background: var(--brand);
color: var(--brand-font)!important;
color: var(--brand-font)!important;
}
}
.list-widget li a::before {
.list-widget li a::before {
content: "\25cf";
content: "\25cf";
padding-right: 2px;
padding-right: 2px;
color: var(--brand);
color: var(--brand);
}
}
.list-widget li a:hover::before {
.list-widget li a:hover::before {
color: var(--brand-font);
color: var(--brand-font);
}
}
.current-page {
.current-page {
font-size: 1.3rem;
font-size: 1.3rem;
padding: 5px 8px 3px;
padding: 5px 8px 3px;
text-indent: -5px;
text-indent: -5px;
display: block;
display: block;
}
}
.current-page::before {
.current-page::before {
content: "\25cf";
content: "\25cf";
padding-right: 2px;
padding-right: 2px;
}
}


/*==== ラベルウィジェット ====*/
/*==== ラベルウィジェット ====*/
.category-label {
.category-label {
display: inline-block;
display: inline-block;
border-radius: 5px;
border-radius: 5px;
margin-bottom: .5em;
margin-bottom: .5em;
background: var(--brand);
background: var(--brand);
color: var(--brand-font)!important;
color: var(--brand-font)!important;
transition: .3s;
transition: .3s;
line-height: 1;
line-height: 1;
padding: 6px;
padding: 6px;
font-size: 1.2rem;
font-size: 1.2rem;
}
}
.category-label:hover {
.category-label:hover {
background: var(--brand-light);
background: var(--brand-light);
}
}
.hashtag-label {
.hashtag-label {
display: inline-block;
display: inline-block;
margin-bottom: .5em;
margin-bottom: .5em;
color: var(--color)!important;
color: var(--color)!important;
border: solid var(--dark-color) 1px;
border: solid var(--dark-color) 1px;
border-radius: 3px;
border-radius: 3px;
line-height: 1;
line-height: 1;
transition: .2s;
transition: .2s;
font-size: 1.4rem;
font-size: 1.4rem;
padding: 4px 5px 3px;
padding: 4px 5px 3px;
}
}
.list-label-widget-content {
.list-label-widget-content {
text-align: center;
text-align: center;
}
}
.hashtag-label:hover {
.hashtag-label:hover {
border-color: var(--sub-brand);
border-color: var(--sub-brand);
background: var(--sub-brand);
background: var(--sub-brand);
color: var(--sub-brand-font)!important;
color: var(--sub-brand-font)!important;
}
}
.label-count {
.label-count {
font-size: 1.1rem;
font-size: 1.1rem;
margin-left: 3px;
margin-left: 3px;
}
}
.cloud-label-widget-content {
.cloud-label-widget-content {
text-align: center;
text-align: center;
}
}


/*== プロフィール ==*/
/*== プロフィール ==*/
.Profile {
.Profile {
min-height: 140px;
min-height: 140px;
text-align: center;
text-align: center;
}
}
.g-profile {
.g-profile {
font-size: 1.9rem;
font-size: 1.9rem;
line-height: 1.5;
line-height: 1.5;
}
}
.location {
.location {
font-size: 1.5rem;
font-size: 1.5rem;
}
}
.profile-info a {
.profile-info a {
font-weight: bold;
font-weight: bold;
color: var(--color)!important;
color: var(--color)!important;
}
}
.profile-info a:hover {
.profile-info a:hover {
color: var(--link)!important;
color: var(--link)!important;
text-decoration: underline;
text-decoration: underline;
}
}
.profile-textblock {
.profile-textblock {
font-size: 1.3rem;
font-size: 1.3rem;
line-height: 1.3;
line-height: 1.3;
margin-top: .5em;
margin-top: .5em;
margin-bottom: .5em;
margin-bottom: .5em;
color: var(--dark-color);
color: var(--dark-color);
}
}
.profile-textblock a {
.profile-textblock a {
color: var(--link)!important;
color: var(--link)!important;
}
}
.profile-textblock a:hover {
.profile-textblock a:hover {
text-decoration: underline;
text-decoration: underline;
color: var(--dark-color)!important;
color: var(--dark-color)!important;
}
}
.profile-img {
.profile-img {
width: 90px;
width: 90px;
height: 90px;
height: 90px;
object-fit: contain;
object-fit: contain;
border-radius: 50%;
border-radius: 50%;
transition: .3s;
transition: .3s;
margin-bottom: .5em;
margin-bottom: .5em;
}
}
.profile-img:hover {
.profile-img:hover {
opacity: .8;
opacity: .8;
}
}
.profile-info>.profile-link {
.profile-info>.profile-link {
font-size: 1.6rem;
font-size: 1.6rem;
}
}
.profile-info>.profile-link::after {
.profile-info>.profile-link::after {
content: "\00BB";
content: "\00BB";
}
}

/*複数プロフィール用*/
/*複数プロフィール用*/

.Profile li {
.Profile li {
margin: 1em;
margin: 1em;
padding-bottom: 1em;
padding-bottom: 1em;
list-style: none;
list-style: none;
}
}
.Profile li {
.Profile li {
border-bottom: dotted var(--dark-color) 2px;
border-bottom: dotted var(--dark-color) 2px;
}
}
.Profile li:last-child {
.Profile li:last-child {
border: none;
border: none;
}
}
.profile-name {
.profile-name {
font-size: 1.9rem;
font-size: 1.9rem;
line-height: 1.5;
line-height: 1.5;
}
}
a .profile-name {
a .profile-name {
font-weight: bold;
font-weight: bold;
color: var(--color) !important;
color: var(--color) !important;
}
}
a .profile-name:hover {
a .profile-name:hover {
color: var(--link) !important;
color: var(--link) !important;
text-decoration: underline;
text-decoration: underline;
}
}
a.profile-link:nth-of-type(2) {
a.profile-link:nth-of-type(2) {
font-size: 1.6rem;
font-size: 1.6rem;
font-weight: bold;
font-weight: bold;
color: var(--color) !important;
color: var(--color) !important;
}
}
a.profile-link:nth-of-type(2):hover {
a.profile-link:nth-of-type(2):hover {
color: var(--link) !important;
color: var(--link) !important;
text-decoration: underline!important;
text-decoration: underline!important;
}
}
.profile-link:nth-of-type(2)::after {
.profile-link:nth-of-type(2)::after {
content: "\00BB";
content: "\00BB";
}
}
.default-avatar {
.default-avatar {
font-size: 80px;
font-size: 80px;
color: var(--dark-color);
color: var(--dark-color);
}
}


/*==== フッター ====*/
/*==== フッター ====*/
#FOOTER .widget:not(#HTML0) {
#FOOTER .widget:not(#HTML0) {
margin: 0 .5em 2em;
margin: 0 .5em 2em;
}
}
#footer-attribution {
#footer-attribution {
background: var(--dark-bg);
background: var(--dark-bg);
color: var(--color);
color: var(--color);
font-size: 1.5rem;
font-size: 1.5rem;
padding: .5em;
padding: .5em;
display: flex;
display: flex;
justify-content: center;
justify-content: center;
}
}
#footer-attribution a {
#footer-attribution a {
font-weight: normal;
font-weight: normal;
}
}
#footer-attribution a:hover {
#footer-attribution a:hover {
color: var(--link);
color: var(--link);
text-decoration: underline;
text-decoration: underline;
}
}
#footer-attribution span:not(#presentyear)::after {
#footer-attribution span:not(#presentyear)::after {
content: "\FF5C";
content: "\FF5C";
margin-right: 3px;
margin-right: 3px;
}
}
#footer-attribution span:last-child::after {
#footer-attribution span:last-child::after {
display: none;
display: none;
}
}
@media (max-width: 950px ) {
@media (max-width: 950px ) {
#footer-attribution {
#footer-attribution {
align-items: center;
align-items: center;
flex-direction: column;
flex-direction: column;
}
}
#footer-attribution span::after {
#footer-attribution span::after {
display: none;
display: none;
}
}
}
}


/*==== SVG ====*/
/*==== SVG ====*/
.hatebusvg {
.hatebusvg {
height: 24px;
height: 24px;
width: 24px;
width: 24px;
margin-top: -1px;
margin-top: -1px;
}
}
.linesvg {
.linesvg {
height: 28px;
height: 28px;
width: 28px;
width: 28px;
padding-bottom: 3px;
padding-bottom: 3px;
margin-left: 2px;
margin-left: 2px;
}
}
.verified {
.verified {
height: 16px;
height: 16px;
width: 16px;
width: 16px;
vertical-align: -5%;
vertical-align: -5%;
margin-left: 3px;
margin-left: 3px;
}
}
.moon.svg {
.moon.svg {
transform: scale(-1, 1);
transform: scale(-1, 1);
}
}
.svg-icon-24 {
.svg-icon-24 {
fill: currentColor;
fill: currentColor;
height: 1.2em;
height: 1.2em;
width: 1.2em;
width: 1.2em;
vertical-align: -15%;
vertical-align: -15%;
}
}


/*==== Font Awesome ====*/
/*==== Font Awesome ====*/
.svg {
.svg {
fill: currentColor;
fill: currentColor;
height: 1em;
height: 1em;
width: 1em;
width: 1em;
margin-left: 2px;
margin-left: 2px;
margin-right: 2px;
margin-right: 2px;
vertical-align: -8%;
vertical-align: -8%;
}
}


/*==== ウィジェットタイトル ====*/
/*==== ウィジェットタイトル ====*/
.title {
.title {
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
background: linear-gradient(to right, var(--brand-light), var(--brand), var(--brand-light));
font-size: 1.8rem;
font-size: 1.8rem;
font-weight: bold;
font-weight: bold;
line-height: 1.2;
line-height: 1.2;
margin-bottom: .5em;
margin-bottom: .5em;
padding: 3px;
padding: 3px;
color: var(--brand-font);
color: var(--brand-font);
border-radius: 3px;
border-radius: 3px;
text-align: center;
text-align: center;
}
}


/*==== 人気の投稿 ====*/
/*==== 人気の投稿 ====*/
.PopularPosts .article {
.PopularPosts .article {
height: 90px;
height: 90px;
position: relative;
position: relative;
margin-bottom: 20px;
margin-bottom: 20px;
transition: .3s;
transition: .3s;
border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 2px var(--shadow);
box-shadow: 1px 1px 2px var(--shadow);
}
}
.article > a {
.article > a {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
width: 100%;
width: 100%;
height: 100%;
height: 100%;
}
}
.article:hover {
.article:hover {
box-shadow: 8px 8px 10px var(--shadow);
box-shadow: 8px 8px 10px var(--shadow);
}
}
.article-header {
.article-header {
color: var(--dark-color);
color: var(--dark-color);
font-size: 1.4rem;
font-size: 1.4rem;
line-height: 1.5;
line-height: 1.5;
bottom: 0;
bottom: 0;
right: 5px;
right: 5px;
position: absolute;
position: absolute;
margin-top: 5px;
margin-top: 5px;
}
}
.PopularPosts ul {
.PopularPosts ul {
max-width: 600px;
max-width: 600px;
margin-right: auto;
margin-right: auto;
margin-left: auto;
margin-left: auto;
}
}
.pop-img img {
.pop-img img {
position: absolute;
position: absolute;
object-fit: cover;
object-fit: cover;
width: 40%;
width: 40%;
height: 100%;
height: 100%;
border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
}
.pop-title {
.pop-title {
display: flex;
display: flex;
font-weight: normal;
font-weight: normal;
margin-bottom: 5px;
margin-bottom: 5px;
overflow: hidden;
overflow: hidden;
line-height: 1.4;
line-height: 1.4;
position: relative;
position: relative;
font-size: 1.6rem;
font-size: 1.6rem;
height: 4.4em;
height: 4.4em;
left: 41%;
left: 41%;
width: 56%;
width: 54%;
}
}
.pop-title::before {
.pop-title::before {
content: "\25CF";
content: "\25CF";
padding-right: 2px;
padding-right: 2px;
color: var(--brand);
color: var(--brand);
transition: .3s;
transition: .3s;
}
}
.article:hover .pop-title::before {
.article:hover .pop-title::before {
color: var(--sub-brand);
color: var(--sub-brand);
}
}
.pop-snippet {
.pop-snippet {
display: none;
display: none;
}
}
@media (max-width: 1024px ) {
@media (max-width: 1024px ) {
#PopularPosts1 article {
#PopularPosts1 article {
height: 130px;
height: 130px;
}
}
.pop-title {
.pop-title {
padding-top: .5em;
padding-top: .5em;
left: 46%;
left: 46%;
}
}
.pop-img img {
.pop-img img {
width: 45%;
width: 45%;
}
}
}
}
.ranked-li {
.ranked-li {
position: relative;
position: relative;
}
}
.PopularPosts li {
.PopularPosts li {
list-style-type: none;
list-style-type: none;
}
}
.post-rank {
.post-rank {
display: inline-block;
display: inline-block;
position: absolute;
position: absolute;
z-index: 1;
z-index: 1;
top: 0;
top: 0;
left: 0;
left: 0;
width: 1.5em;
width: 1.5em;
height: 1.2em;
height: 1.2em;
line-height: 1.3;
line-height: 1.3;
text-align: center;
text-align: center;
font-weight: bold;
font-weight: bold;
color: var(--sub-brand-font);
color: var(--sub-brand-font);
border-top-left-radius: 5px;
border-top-left-radius: 5px;
background: var(--sub-brand);
background: var(--sub-brand);
}
}


/*==== 注目の投稿 ====*/
/*==== 注目の投稿 ====*/
.article {
.article {
height: 174px;
height: 174px;
position: relative;
position: relative;
transition: .3s;
transition: .3s;
border-radius: 5px;
border-radius: 5px;
box-shadow: 1px 1px 2px var(--shadow);
box-shadow: 1px 1px 2px var(--shadow);
}
}
.article-category {
.article-category {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
z-index: 1;
z-index: 1;
max-width: 40%;
max-width: 40%;
max-height: 150px;
max-height: 150px;
overflow: hidden;
overflow: hidden;
opacity: 0;
opacity: 0;
transition: .3s;
transition: .3s;
}
}
.article-category-label {
.article-category-label {
line-height: 1.7;
line-height: 1.7;
margin-bottom: 5px;
margin-bottom: 5px;
display: inline-block;
display: inline-block;
background: #22222288;
background: #22222288;
transition: .3s;
transition: .3s;
}
}
.article-category-label:first-child {
.article-category-label:first-child {
border-top-left-radius: 5px;
border-top-left-radius: 5px;
}
}
.article-category-label a {
.article-category-label a {
display: block;
display: block;
color: var(--brand-font)!important;
color: var(--brand-font)!important;
font-weight: normal;
font-weight: normal;
font-size: 1.4rem;
font-size: 1.4rem;
padding: 3px 5px 1px 4px;
padding: 3px 5px 1px 4px;
}
}
.article-category-label:hover {
.article-category-label:hover {
background: var(--brand-light);
background: var(--brand-light);
}
}
.article:hover .article-category {
.article:hover .article-category {
opacity: 1;
opacity: 1;
}
}
#feat-name {
#feat-name {
position: absolute;
position: absolute;
top: 0;
top: 0;
left: 0;
left: 0;
font-weight: bold;
font-weight: bold;
line-height: 1;
line-height: 1;
color: #000;
color: #000;
border-top-left-radius: 5px;
border-top-left-radius: 5px;
background: gold;
background: gold;
padding: 6px;
padding: 6px;
}
}
.feat-img {
.feat-img {
transition: .3s;
transition: .3s;
}
}
.feat-img img {
.feat-img img {
position: absolute;
position: absolute;
object-fit: cover;
object-fit: cover;
width: 40%;
width: 40%;
height: 100%;
height: 100%;
border-radius: 5px 0 0 5px;
border-radius: 5px 0 0 5px;
}
}
.feat-title {
.feat-title {
display: flex;
display: flex;
font-size: 1.82rem;
font-size: 1.82rem;
font-weight: normal;
font-weight: normal;
margin-bottom: 5px;
margin-bottom: 5px;
overflow: hidden;
overflow: hidden;
height: 3.45em;
height: 3.45em;
line-height: 1.4;
line-height: 1.4;
padding-top: .5em;
padding-top: .5em;
left: 41%;
left: 41%;
width: 58%;
width: 58%;
position: relative;
position: relative;
}
}
.feat-title::before {
.feat-title::before {
content: "\2605";
content: "\2605";
padding-right: 2px;
padding-right: 2px;
color: var(--brand);
color: var(--brand);
transition: .3s;
transition: .3s;
}
}
.article:hover .feat-title::before {
.article:hover .feat-title::before {
color: gold;
color: gold;
}
}
.article:hover #feat-name {
.article:hover #feat-name {
display: none;
display: none;
}
}
.article:hover .feat-img {
.article:hover .feat-img {
opacity: .7;
opacity: .7;
}
}
.feat-snippet {
.feat-snippet {