Comparing sensitive data, confidential files or internal emails?

Most legal and privacy policies prohibit uploading sensitive data online. Diffchecker Desktop ensures your confidential information never leaves your computer. Work offline and compare documents securely.

F-light v1.36-TD → v1.37-TD

Created Diff never expires
74 removals
1046 lines
74 additions
1045 lines
<?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='!data:view.isLayoutMode'>
<b:if cond='!data:view.isLayoutMode'>
<b:skin><![CDATA[
<b:skin><![CDATA[
/*--------------------------------------------------------------
/*--------------------------------------------------------------
Blogger Template
Blogger Template
Name : F-light
Name : F-light
Version : 1.36-TD
Version : 1.37-TD
Designer: Fujiyan
Designer: Fujiyan
Url : https://f-light-theme.blogspot.com/
Url : https://f-light-theme.blogspot.com/
License : カスタマイズは自由ですが再配布・販売は禁止です
License : カスタマイズは自由ですが再配布・販売は禁止です
----------------------------------------------------------------*/
----------------------------------------------------------------*/
/*==== 初期化 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}.widget-content ul,.widget-content ol{padding-left:1.5em}@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="ブランドカラー配色">
/*<Group description="ブランドカラー配色">
<Variable name="brand" description="濃いブランド色" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="brand" description="濃いブランド色" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="brand.font" description="濃いブランド色部分の文字色" type="color" default="#ffffff" value="#ffffff"/>
<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" description="薄いブランド色" type="color" default="#1e90ff" value="#1e90ff"/>
<Variable name="brand.light.font" description="薄いブランド色部分の文字色" type="color" default="#ffffff" value="#ffffff"/>
<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" description="サブブランド色" type="color" default="#ff6347" value="#ff6347"/>
<Variable name="sub.brand.font" description="サブブランド色部分の文字色" type="color"
<Variable name="sub.brand.font" description="サブブランド色部分の文字色" type="color"
default="#ffffff" value="#ffffff"/>
default="#ffffff" value="#ffffff"/>
</Group>
</Group>
<Group description="背景の色">
<Group description="背景の色">
<Variable name="darkmode.dark.bg" description="ダークモードの濃い背景色" type="color" default="#171e2d" value="#171e2d"/>
<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="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.dark.bg" description="ライトモードの濃い背景色" type="color" default="#eeeeff" value="#eeeeff"/>
<Variable name="lightmode.light.bg" description="ライトモードの薄い背景色" type="color" default="#fbfbff" value="#fbfbff"/>
<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="darkmode.shadow" description="ダークモードの影" type="color" default="#000000" value="#000000"/>
<Variable name="lightmode.shadow" description="ライトモードの影" type="color" default="#aaaaaa" value="#aaaaaa"/>
<Variable name="lightmode.shadow" description="ライトモードの影" type="color" default="#aaaaaa" value="#aaaaaa"/>
</Group>
</Group>
<Group description="文字の色">
<Group description="文字の色">
<Variable name="darkmode.dark.font" description="ダークモードの濃い文字色" type="color" default="#eeeeee" value="#eeeeee"/>
<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="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.dark.font" description="ライトモードの濃い文字色" type="color" default="#333333" value="#333333"/>
<Variable name="lightmode.light.font" description="ライトモードの薄い文字色" type="color" default="#666666" value="#666666"/>
<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="darkmode.link" description="ダークモードのリンク色" type="color" default="#00bfff" value="#00bfff"/>
<Variable name="lightmode.link" description="ライトモードのリンク色" type="color" default="#4169e1" value="#4169e1"/>
<Variable name="lightmode.link" description="ライトモードのリンク色" type="color" default="#4169e1" value="#4169e1"/>
</Group>*/
</Group>*/
/*==== ダークモード用配色 ====*/
/*==== ダークモード用配色 ====*/
:root {
:root {
--dark-bg: $(darkmode.dark.bg); /*濃い背景色*/
--dark-bg: $(darkmode.dark.bg); /*濃い背景色*/
--light-bg: $(darkmode.light.bg); /*薄い背景色*/
--light-bg: $(darkmode.light.bg); /*薄い背景色*/
--shadow: #000; /*影*/
--shadow: #000; /*影*/
--color: $(darkmode.dark.font); /*文字色*/
--color: $(darkmode.dark.font); /*文字色*/
--dark-color: $(darkmode.light.font); /*薄い文字色*/
--dark-color: $(darkmode.light.font); /*薄い文字色*/
--red-color: Tomato; /*赤文字*/
--red-color: Tomato; /*赤文字*/
--blue-color: #8cb4ff; /*青文字*/
--blue-color: #8cb4ff; /*青文字*/
--green-color: #00d061; /*緑文字*/
--green-color: #00d061; /*緑文字*/
--link: $(darkmode.link); /*リンク色*/
--link: $(darkmode.link); /*リンク色*/
--brand: $(brand); /*濃いブランド色*/
--brand: $(brand); /*濃いブランド色*/
--brand-light: $(brand.light); /*薄いブランド色*/
--brand-light: $(brand.light); /*薄いブランド色*/
--brand-font: $(brand.font); /*ブランド色背景用文字色*/
--brand-font: $(brand.font); /*ブランド色背景用文字色*/
--sub-brand: $(sub.brand); /*サブブランド色*/
--sub-brand: $(sub.brand); /*サブブランド色*/
--sub-brand-font: $(sub.brand.font) /*サブブランド色背景用文字色*/
--sub-brand-font: $(sub.brand.font) /*サブブランド色背景用文字色*/
}
}
/*==== ライトモード用配色 ====*/
/*==== ライトモード用配色 ====*/
:root[data-theme-mode="light"] {
:root[data-theme-mode="light"] {
--dark-bg: $(lightmode.dark.bg); /*濃い背景色*/
--dark-bg: $(lightmode.dark.bg); /*濃い背景色*/
--light-bg: $(lightmode.light.bg); /*薄い背景色*/
--light-bg: $(lightmode.light.bg); /*薄い背景色*/
--shadow: $(lightmode.shadow); /*影*/
--shadow: $(lightmode.shadow); /*影*/
--color: $(lightmode.dark.font); /*文字色*/
--color: $(lightmode.dark.font); /*文字色*/
--dark-color: $(lightmode.light.font); /*薄い文字色*/
--dark-color: $(lightmode.light.font); /*薄い文字色*/
--red-color: #d30038; /*赤文字*/
--red-color: #d30038; /*赤文字*/
--blue-color: #592bff; /*青文字*/;
--blue-color: #592bff; /*青文字*/;
--green-color: #007936; /*緑文字*/;
--green-color: #007936; /*緑文字*/;
--link: $(lightmode.link); /*リンク色*/
--link: $(lightmode.link); /*リンク色*/
}
}
]]></b:skin>
]]></b:skin>


<style>/*<![CDATA[*/
<style>/*<![CDATA[*/
/*==== 共通 ====*/
/*==== 共通 ====*/
body {
body {
font-size: 1.7rem;
font-size: 1.7rem;
font-family: "HiraginoSans-W2", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif;
font-family: "HiraginoSans-W2", "Hiragino Kaku Gothic ProN", Meiryo, "メイリオ", sans-serif;
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%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
}
#sub-content a {
#sub-content a,
#main-content .HTML a {
color: var(--link);
color: var(--link);
}
}
.HTML a:hover {
text-decoration: underline;
}
#sub-content .widget {
#sub-content .widget {
padding: .5em;
padding: .5em;
}
}
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;
}
}
@-moz-document url-prefix() {
@-moz-document url-prefix() {
* {
* {
scrollbar-width: thin;
scrollbar-width: thin;
scrollbar-color: #aaa transparent;
scrollbar-color: #aaa transparent;
}
}
}
}
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 {
input[type="checkbox"]#js_mode_toggle {
display: none;
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), var(--brand), var(--brand-light));
background: linear-gradient(to right, rgb(from var(--brand-light) r g b / 90%), rgb(from var(--brand) r g b / 90%), rgb(from var(--brand-light) r g b / 90%));;
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);
background: rgb(from var(--light-bg) r g b / 90%);
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 {
input[type="checkbox"]#nav-button {
display: none;
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-top: 2px;
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(--color);
background: var(--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;
}
#mobile-home svg {
margin-top: 5px;
}
}
#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:hover,
.search-box-text:hover,
.search-box-text:focus {
.search-box-text:focus {
border-color: var(--brand-font);
border-color: var(--brand-font);
}
}
.search-box-text:focus {
.search-box-text:focus {
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: 4px;
top: 6px;
top: 4px;
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.5em;
width: 1.3em;
width: 1.5em;
}
}
.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);
}
}


/*==== 上下ジャンプボタン ====*/
#scroll-button svg {
transition: .5s;
fill: currentColor;
}
#pagetop,
#pagebottom {
display: none;
position: fixed;
right: 0;
z-index: 1;
color: rgb(from var(--dark-color) r g b / 50%);
}
#pagetop:hover,
#pagebottom:hover {
color: var(--dark-color);
}
#pagetop {
bottom: 70px;
margin-bottom: .5em;
}
#pagetop svg {
transform: rotate(180deg);
}
#pagebottom {
bottom: 20px;
margin-top: .5em;
}
#pagetop svg,
#pagebottom svg {
height: 40px;
width: 50px;
}
#scroll-button svg:hover {
cursor: pointer;
}
@media (max-width: 1024px) {
#scroll-button {
display: none;
}
}

/*==== アーカイブウィジェット ====*/
/*==== アーカイブウィジェット ====*/
.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;
}
}
.profile-name {
margin: .3em 0;
}
.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;
}
}
img.profile-img {
vertical-align: top;
}
.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";
}
}
.default-avatar {
.default-avatar {
display: inline-block;
display: inline-block;
margin-bottom: .5em;
margin-bottom: .5em;
}
}
.avatar-icon {
.avatar-icon {
font-size: 70px;
font-size: 70px;
color: var(--dark-color);
color: var(--dark-color);
border: 1px solid var(--dark-color);
border: 1px solid var(--dark-color);
border-radius: 50%;
border-radius: 50%;
}
}


/*複数プロフィール用*/
/*複数プロフィール用*/
.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";
}
}


/*==== 検索ウィジェット ====*/
/*==== 検索ウィジェット ====*/
.widget-content form {
.widget-content form {
position: relative;
position: relative;
max-width: 600px;
max-width: 600px;
margin: 0 auto;
margin: 0 auto;
}
}
.search-input input {
.search-input input {
box-sizing: border-box;
box-sizing: border-box;
background: var(--dark-bg);
background: var(--dark-bg);
color: var(--color);
color: var(--color);
border-top-left-radius: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-bottom-left-radius: 5px;
border: none;
border: none;
width: calc(100% - 70px);
width: calc(100% - 70px);
height: 40px;
height: 40px;
padding: 0 .5em;
padding: 0 .5em;
}
}
.search-input input:focus {
.search-input input:focus {
outline: none;
outline: none;
border: 1px solid var(--brand);
border: 1px solid var(--brand);
padding: 0 calc(.5em - 1px);
padding: 0 calc(.5em - 1px);
}
}
.search-input input::placeholder {
.search-input input::placeholder {
color: var(--dark-color);
color: var(--dark-color);
}
}
.search-action {
.search-action {
position: absolute;
position: absolute;
background: var(--brand);
background: var(--brand);
color: var(--brand-font);
color: var(--brand-font);
border: none;
border: none;
border-top-right-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-right-radius: 5px;
top: 0;
top: 0;
right: 0;
right: 0;
width: 70px;
width: 70px;
height: 40px;
height: 40px;
}
}
.search-action:hover {
.search-action:hover {
cursor: pointer;
cursor: pointer;
opacity: .8;
opacity: .8;
}
}


/*==== 連絡フォームウィジェット ====*/
/*==== 連絡フォームウィジェット ====*/
.contact-form-email,
.contact-form-email,
.contact-form-email-message,
.contact-form-email-message,
.contact-form-name {
.contact-form-name {
max-width:100%;
max-width:100%;
min-width:100%;
min-width:100%;
color: var(--color);
color: var(--color);
padding: .5em;
padding: .5em;
outline: none;
outline: none;
border-radius: 3px;
border-radius: 3px;
background: var(--dark-bg);
background: var(--dark-bg);
transition: .2s;
transition: .2s;
border: 1px solid transparent;
border: 1px solid transparent;
}
}
.contact-form-email:focus,
.contact-form-email:focus,
.contact-form-email-message:focus,
.contact-form-email-message:focus,
.contact-form-name:focus {
.contact-form-name:focus {
box-shadow: 0 0 6px var(--link);
box-shadow: 0 0 6px var(--link);
border: 1px solid var(--link);
border: 1px solid var(--link);
}
}
.contact-form-email-message {
.contact-form-email-message {
min-height: 200px;
min-height: 200px;
}
}
.contact-form-email,
.contact-form-email,
.contact-form-name {
.contact-form-name {
height:40px;
height:40px;
}
}
.contact-form-button-submit {
.contact-form-button-submit {
border-radius : 3px;
border-radius : 3px;
line-height: .1;
line-height: .1;
margin: 2em 0;
margin: 2em 0;
cursor: pointer;
cursor: pointer;
padding: 1em 2em;
padding: 1em 2em;
background: var(--brand);
background: var(--brand);
color: var(--brand-font);
color: var(--brand-font);
transition: .3s;
transition: .3s;
border: none;
border: none;
outline: none;
outline: none;
}
}
.contact-form-button-submit:hover {
.contact-form-button-submit:hover {
transform: scale(1.1);
transform: scale(1.1);
}
}
.contact-form-button-submit:active {
.contact-form-button-submit:active {
transform: none;
transform: none;
}
}
.contact-form-error-message-with-border,
.contact-form-error-message-with-border,
.contact-form-success-message-with-border {
.contact-form-success-message-with-border {
color: var(--color);
color: var(--color);
font-weight: bold!important;
font-weight: bold!important;
}
}
.contact-form-cross {
.contact-form-cross {
width: .9em;
width: .9em;
height: .9em;
height: .9em;
vertical-align: -5%;
vertical-align: -5%;
margin:0 5px;
margin:0 5px;
}
}
.contact-form-cross:hover {
.contact-form-cross:hover {
cursor:pointer;
cursor:pointer;
}
}


/*==== フッター ====*/
/*==== フッター ====*/
#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 {
content: "\FF5C";
line-height: 1.2;
margin-right: 3px;
padding: 0 8px;
}
}
#footer-attribution span:last-child::after {
#footer-attribution span:not(:last-child):not(#presentyear) {
display: none;
border-right: 1px solid var(--dark-color);
}
}
@media (max-width: 950px ) {
@media (max-width: 950px ) {
#footer-attribution {
#footer-attribution {
align-items: center;
align-items: center;
flex-direction: column;
flex-direction: column;
text-align: center;
}
}
#footer-attribution span::after {
#footer-attribution span {
display: none;
border: none!important;
margin-bottom: 5px;
}
}
}
}


/*==== 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-righ
margin-left: auto;
}
.pop-img img {
position: absolute;
object-fit: cover;
width: 40%;
height: 100%;
border-radius: 5px 0 0 5px;
}
.pop-title {
display: flex;
font-weight: normal;
margin-bottom: 5px;
overflow: hidden;
line-height: 1.4;
position: relative;
font-size: 1.6rem;
height: 4.4em;
left: 41%;
width: 54%;
}
.pop-title::before {
content: "\25CF";
padding-right: 2px;
color: var(--brand);
transition: .3s;
}
.article:hover .pop-title::before {
color: var(--sub-brand);
}
.pop-snippet {
display: none;
}
@media (max-width: 1024px ) {
#PopularPosts1 article {
height: 130px;
}
.pop-title {
padding-top: .5em;
left: 46%;
}
.pop-img img {
width: 45%;
}
}
.ranked-li {
position: relative;
}
.PopularPosts li {
list-style-type: none;
}
.post-rank {
display: inline-block;
position: absolut