@charset "utf-8";
/*==========================================================
.■tegalog.css

description : A css for tegalog(https://www.nishishi.com/cgi/tegalog/) sitemap mode based on beauter.css(https://beauter.io/) and System UIcon(https://www.systemuicons.com) as initial mode
author : aouma(https://nov.akikaze.net/)
lastupdate : 2024-02-01T05:35:13+09:00
========================================================= */
/*
.★色指定
※カスタマイズする場合、20行目からのカラーコードを変更してください。
basecolor1 - ブログ全体の背景色
basecolor2 - 補助の背景色
accentcolor1 - 決定ボタンなどの補助色
accentcolor2 - トップのメニューバーや日付バー等の補助色
accentcolor3 - リンクオーバーなどの補助色
wordcolor - 指定がない場合の文字色
------------------------------------------------------*/
:root {
    --basecolor1 : #CBF623 ; /* ecru */
    --basecolor2 : #06C9B3 ;/* soft pinkish gray */
    --accentcolor1 : #A41FE3 ; /* ash pink */
    --accentcolor2 : #FD2996 ; /* ash green */
    --accentcolor3 : #FECD01 ; /* grass green */
    --wordcolor : #4d3634 ;
}

html { 
    scroll-behavior: smooth;
}

body {
    background : var(--basecolor1);
    color : var(--wordcolor);
}

a:link, a:visited {
    color : var(--accentcolor1);
    transition: color .3s;
}

a:hover {
    color : var(--accentcolor2) ;
    text-decoration : none ;
}

.url { word-break:break-all;}
/* 自動リンクのはみ出しを防ぐ */

.wrapper {
	margin-top : 60px;
	margin-bottom : 0 ;
	overflow : hidden ;
}
/* -------------------------------------------------------------
.★ 日付境界バー（非表示の場合はてがろぐCGI側で設定してください）
----------------------------------------------------------------*/
.dateseparator {
    font-size: clamp(1.4rem, 2.4rem + 0.5vw, 3.6rem);
    padding: 8px 20px 16px 30vw;
    positon : relative;
    text-align: left;
    border-top : 1px dashed var(--wordcolor);
    color : var(--wordcolor);
    margin : 36px 10% 12px -28vw !important;

}

span.datefunclinks a {
    font-size : 1.2rem ;
    color : var(--wordcolor) ;
    padding : 8px 4px ;
    margin-left : 1.6rem ;
    text-decoration : none ;
    vertical-align: middle ;
    border-radius : 5px ;
}

span.datefunclinks a:hover {
    background-color : var(--accentcolor3);
}

/* ----------------------------------------------------
.★ トップのメニュー（beauter.cssを上書き）
-------------------------------------------------------*/
.topnav {
    background-color : var(--accentcolor2) !important ;
    z-index : 5 !important ;
}

.menuright {
   float : right !important;
}

.loginlink::before {
    content : url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20transform%3D%22translate(4%201)%22%3E%3Cpath%20d%3D%22m2.5%208.5-.00586729-1.99475098c-.00728549-4.00349935%201.32800361-6.00524902%204.00586729-6.00524902s4.0112203%202.00174967%204.0000699%206.00524902v1.99475098m-8.0000699%200h8.0225317c1.0543618%200%201.9181652.81587779%201.9945143%201.8507377l.0054778.1548972-.0169048%206c-.0031058%201.1023652-.8976224%201.9943651-1.999992%201.9943651h-8.005627c-1.1045695%200-2-.8954305-2-2v-6c0-1.1045695.8954305-2%202-2z%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3Ccircle%20cx%3D%226.5%22%20cy%3D%2213.5%22%20fill%3D%22white%22%20r%3D%221.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    vertical-align : text-top;
}

/*-------------------------------------------------------------------------
.★個々の記事(onelog.html用）
---------------------------------------------------------------------------*/

article {
    margin :  8px 4% 2.4rem !important;
    position : relative ;
    box-sizing: border-box;
    word-break: break-all;
    background : #fff ;
}

article.logstatus-draft {
    background : var(--basecolor1);
}

article p img {
    max-width : 100% ;
    padding : 6px ;
    border : 1px solid #c0c0c0 ;
    margin : 1.6rem 0 ;
}

article img:hover {
    background : var(--accentcolor3);
}

a.imagelink:hover {
    background : transparent ;
}

.articleinfo {
    background : var(--accentcolor2);
    color :#fff;
    padding : 4px 8px ;
    position : relative ;
}

.articleinfo a.postdate {
    margin-right : 3.6rem ;
    font-size : 2.8rem ;
}

.articleinfo ul.articleedit {
    display : flex;
    align-items: flex-end;
    justify-content: flex-end;
    list-style-type : none ;
    margin : 8px 4px 0;
    padding : 0 ;
    position : absolute ;
    right : 8px;
    top : 8px;
}

@media all and (max-width:460px) {
    .articleinfo ul.articleedit {
    display : inline-flex;
    align-items: flex-end;
    justify-content: flex-end;
    list-style-type : none ;
    margin : 0 ;
    padding : -6px 8px 2px;
    }
    .articleinfo a.postdate { font-size : 1.2rem;font-weight : bold ;}
    .articleinfo { padding : 4px 8px; }
    span.newest, span.fixed {display : none ;}
}

.articleinfo a:link, .articleinfo a:visited {
    text-decoration : none ;
    color : #fff ;
}

.articleinfo a:hover {
	color : var(--basecolor2);
}

div.commentbody {
    position : static;
}

article footer {
    margin : 4px 16px ;
    text-align : right ;
}

article footer ul li {
    display : inline-block ;
    margin-left : 4px ;
}

article footer a {
    text-decoration : none ;
}
/* ---------------------------------------------------------------------
.★自由記法
----------------------------------------------------------------------*/
/* E:強調(em) */
.decorationE {
    font-weight : bold ;
    font-style : normal ;
    background-color :#ffeb3b ;

}
	/* B:太字(Bold) */
.decorationB {
    font-weight: bold;		/* 太字 */
}
/* D:削除(Delete) */
.decorationD {
    color: #888;	/* 文字色 */
    text-decoration-line: line-through;	/* 取り消し線 */
}
/* I:斜体(Italic) */
.decorationI {
    font-style: italic;/* 斜体 */
}
/* S:小文字(Small) */
.decorationS {
    font-size: 1.4rem;	/* 文字サイズ */
}
/* T:極小文字(Tiny) */
.decorationT {
    font-size: 1.2rem;	/* 文字サイズ */
}
/* U:下線(Underline) */
.decorationU {
    text-decoration-line: underline;	/* 線位置 */
}
/* Q:引用 */
.decorationQ {
    display : block ;
    background : #f0f0f0 ;
    width : 80% ;
    padding : 1.6rem 2.0rem ;
    margin : 1.6rem auto ;
    border-left : 6px solid #2c3e50;
}

.decorationQ::before,
.decorationQ::after {
    content : "";
}

.decorationQ + br {
    display: none;	/* 引用直後の改行を無効化する */
}

.deco-cite {
    display : block ;
    margin: 0 1.6rem 8px 4px ;
    text-align : right ;
    overflow : hidden ;
    font-size : 90% ;
}

.deco-cite::before {
    content : "― " ;
}

/* --------------------------------------------------------------------
.★アバター
----------------------------------------------------------------------*/

figure.avatar {
    display : block ;
    text-align : center ;
    min-width : 100px ;
    float : left ;
    padding-bottom : 0;
}

figure.avatar img {
    display : inline ;
}

figure.avatar figcaption {
    margin : 0 ;
    padding : 0 ;
}

figure.avatar figcaption a {
    text-decoration : none ;
}

.usericon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* --------------------------------------------------------------------
.★固定表示、New表示リボン
※新規投稿をリボンで表示するにはCGI設定で当該項目を「<span class="newest">New!</span>」と設定してください。
-----------------------------------------------------------------------*/

.fixed, .newest {
    display: inline-block;
    padding: 0 0 8px 4px;
    width: 80px;
    height : 32px;
    z-index : 2;
    text-align: center;
    line-height: 32px;
    color: white;
    font-size: 1.3rem;
    background: var(--accentcolor1);
    margin : -4px 12px 8px -16px ;
    box-sizing: border-box;
    position : relative;
    background-image: linear-gradient(-45deg, rgba(227,155,140,.4) 25%, transparent 25%, transparent 50%, rgba(227,155,140,.4) 50%, rgba(227,155,140,.4) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);  transform: rotate(-4deg); 
}

.fixed::before,.newest::before {
    position: absolute;
    content: '';
    top: 100%;
    left: 0;
    border: none;
    border-bottom: solid 4px transparent;
    border-right: solid 8px rgb(149, 158, 155);/*折り返し部分*/
}

.newest {
    background-image : url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m7.5%2011.5-5%203%202-5.131-4-3.869h5l2-5%202%205h5l-4%204%202%205z%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22translate(3%203)%22%2F%3E%3C%2Fsvg%3E') ;
    background-repeat : no-repeat ;
    background-position : 8px center ;
}

.fixed {
    background-image : url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22m9.24264069%205.05025253v7.07106777c.17157287%203.7363257-1.24264069%205.6219437-4.24264069%205.6568543-3%20.0349105-4.41421356-1.8507075-4.24264069-5.6568543v-7.07106777c-.11438191-2.82842712.82842713-4.24264068%202.82842713-4.24264068s2.94280904%201.41421356%202.82842712%204.24264068v7.07106777c.07786153%201.4142136-.39354299%202.1213204-1.41421356%202.1213204s-1.49207509-.7071068-1.41421356-2.1213204v-7.07106777%22%20fill%3D%22none%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22matrix(.70710678%20.70710678%20-.70710678%20.70710678%2013.535219%201.393091)%22%2F%3E%3C%2Fsvg%3E');
    background-repeat : no-repeat ;
    background-position : 8px center ;
}


@media all and (max-width:400px) {
    span.newest, span.fixed {display : none ;}
}
/* -------------------------------------------------------------------
.★パスワードフォーム 
---------------------------------------------------------------------*/
.passkeyform {
    background : var(--basecolor2) ;
    margin : 0  ;
    padding : 2.4rem 1rem 1rem;
    display : inline-block ;
    width : 100% ;
}

.passkeyform input[type='text'] {
    width : 24ch ; 
}

@media only screen and (max-width: 550px)
{
    .passkeyform { margin-left : 0 ;}
    .passkeyform input[type='text'],input[type='search'],p.searchbox,ul.searchoptions{ max-width : 80%; }
    
}

.passkeyerror {
    background : var(--accentcolor3);
    display : block ;
    margin-bottom : 1rem ;
    color : #fff;
    font-weight : bold ;
    padding-left : 1ch ;
}

/* ------------------------------------------------------------------------
.★カテゴリ 
--------------------------------------------------------------------------*/

a.categorylink {
    max-width : 100% ;
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight : bold ;
    letter-spacing : 2px;
    color: #555;
    padding : 8px 24px ;
    border-radius: 16px;
    color : var(--wordcolor);
    margin : 8px 4px ;
    display : inline-block ;
    border : 1px solid #dcdcdc;
}

a.categorylink:hover {
	background : var(--accentcolor3);
	color : #fff;
}

.caticon img, span.categoryicon img {
    width : auto !important;
    height : 16px !important;
    margin : 0 ;
    padding : 0 4px 0 0 ;
    background : transparent ;
    border : none ;
    vertical-align : text-top;
    object-fit: cover;
}

.catseparator { display : none ;}

@media screen and (max-width:550px)
{
    footer ul {
      margin : 0 auto ;
    }
    footer ul li {
        display : block !important;
        margin-bottom : 3.6rem ;
    }
    footer ul li a
    {
        display: block;
        text-align : center ;
        margin-bottom : 4px !important;
    }
}
/* ---------------------------------------------------------------------
.★続きを読むボタン
------------------------------------------------------------------------*/
a.readmorebutton {
  display: inline-block;
  padding : 4px 16px ;
  color : #fff;
  background : var(--accentcolor1) ;
  text-decoration : none ;
}

a.readmorebutton:hover  {
  background : var(--accentcolor3);
}

/* ---------------------------------------------------------------------
.★埋め込み画像、動画、コンテンツ
------------------------------------------------------------------------*/

figure.embeddedpictbox {
    display: inline-block;
    position: relative;
    line-height: 1;
    overflow: hidden;
}

img {
    background-repeat : no-repeat ;
    background-size : cover;
    shape-margin : 0.75rem;
    max-width : 100%;
    vertical-align: text-bottom;
}

img.embeddedimage {
	border : 1px solid #dcdcdc;
	padding : 6px;
	margin : 0 auto ;
}

figure.embeddedpictbox figcaption {
    padding: 1em 1em;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    line-height: 1.5;
    background-color: #000;
    text-align: center;
    opacity: 0.8;
    color : #fff;
}

a.imagelink{
    display: inline-block;
    line-height: 1;
    vertical-align: bottom;
    margin: 5px 0;
    position : relative;
}

.embeddedmovie {
    width: 100%;
    aspect-ratio: 16 / 9;
}
.embeddedmovie iframe {
    width: 100%;
    height: 100%;
}

@media not all and (min-width: 550px) {
    figure.embeddedpictbox figcaption { 
        display : block;
        position : static; }
}

img.nsfw {
    filter: blur(4px);
    opacity : 0.4;
    overflow: hidden ;
}
a.nsfw::before{
    content: 'Not Safe For Work の画像を見る';
    font-size: 1.2rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index : 3;
    padding: 1em 1em 1em 24px ;
    display : block;
    background-color : #333;
    background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22white%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22translate(7%206)%22%3E%3Cpath%20d%3D%22m.5%208.5%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m4.5%208.5%204-4-4-4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat : no-repeat ;
    background-position : left center;
    color : #f0f0f0;
    font-weight : 700;
}

.instagram-media {
   min-width: initial !important;
   max-width: 320px !important;
}

.twetter-tweet {
   min-width: initial !important;
   width: 100% !important;
}

/* ---------------------------------------------------------------------
.★ページャー
------------------------------------------------------------------------*/

nav.prevnext {
  text-align : center ;
  margin-top : 4.8rem ;
}

nav.prevnext a {
    padding: 6px 10px;
    font-size : 2.4rem ;
    font-weight : bold ;
    text-decoration : none ;
    padding : 8px 16px ;
}

nav.pager {
    text-align : center ;
}

nav.pager p {
    line-height : 1.8 ;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pager a {
    display: flex;
    justify-content: center;
    align-items: center;
    background : var(--basecolor2) ;
    flex-wrap: wrap;
    width: 35px;
    height: 35px;
    font-size: 20px;
    font-weight: bold;
    transition: all 0.15s linear;
    text-decoration : none ;
}
.pager a.isActive {
    pointer-events: none;
    background: #111;
    color: #fff;
}

nav.pager p a.pagenumhere {
    background : var(--accentcolor2) !important;
    color : #fff ;
}

nav.pager p a:hover {
    background : var(--accentcolor3) !important;
    color : #fff ;
}
/* ---------------------------------------------------------------------
.★ナビゲーションのリンク集
------------------------------------------------------------------------*/
div.utilitylinks {
    margin : 40px auto ;
    width : 80% ;
    background : var(--basecolor2) ;
    padding : 40px 20px ;
    position : relative ;
    border-radius : 5px ;
}

div.utilitylinks::after {
    content : "Navigation";
    color : #fff ;
    font-size : clamp(1rem, 0.455rem + 2.73vw, 2.5rem);
    position : absolute ;
    top : 0 ;
    right : 4px ;
    letter-spacing : .4rem ;
    border-radius : 5px ;
}

div.utilitylinks ul {
    margin-top : 1.6rem ;
}

/* ---------------------------------------------------------------------
.★投稿フォーム関連 
-------------------------------------------------------------------------*/

#formarea {
    padding : 4% ;
}

#formarea p {
    padding ; 0 ;
    margin ; 0.4rem 0 ;
}

input[type='email']:focus,
input[type='number']:focus,
input[type='search']:focus,
input[type='text']:focus,
input[type='tel']:focus,
input[type='url']:focus,
input[type='password']:focus,
textarea:focus,
select:focus
{
    border-color : var(--accentcolor1);
}

input[type='submit']
{
    background : var(--accentcolor1);
    color : #fff ;
}

.postform {
    background : var(--basecolor2);
    padding : 24px 1.6rem 12px ;
}

textarea.tegalogpost {
    width : 100% ;
    font-size: 1.6rem;
    padding: 0.24rem 0.24rem 0.16rem 0.24rem;
    margin-bottom : 0 ;
    resize: vertical;
}

p.line-control {
    border-top : 1px dotted #fff ;
    padding : 16px 0 ;
}

#formarea span.submitcover {
    display : block ;
}

.changelink {
    margin : 0 0.4rem ;
}

#formarea input[type="file"] {
    font-size: 0.8rem;
    padding: 0.5rem 1rem;
    height: 36px;
}

#formarea span > input[type="button"] {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 0 1.6rem;
    margin: 0.4rem 0.8rem 0.8rem 0;
    height: 24px;
}

#formarea span input:hover {
	background : var(--accentcolor3) !important;
	color : var(--wordcolor) ;
}

#formarea span select {
    height: 2.4rem;
    padding: 0 0.4rem;
    margin: 0.25rem 0.25rem 0.25rem 0;
}

#formarea span label input[type="checkbox"]
{
    background : #fff;
    margin-right : 4px;
    font-size : 1.2rem ;
}

#formarea span > label {
    margin : 0 0.3rem 0;
    display : inline ;
}

#formarea span label:hover {
    border-bottom : 2px solid var(--accentcolor1) !important;
}

/* 強調 */
#formarea input.decoBtnE { -webkit-text-emphasis: inherit; text-emphasis: inherit; color : var(--accentcolor1);}

/* 太字 */
#formarea input.decoBtnB { font-weight: 700; }

/* 斜体 */
#formarea input.decoBtnI { font-style: italic; }

/* 下線 */
#formarea input.decoBtnU { text-decoration: underline; }

/* 取り消し線 */
#formarea input.decoBtnD { text-decoration: line-through; }

/* -----------------------------------------------------------------------
.★サイドバー
-------------------------------------------------------------------------*/

#sidebar {
    margin : 16px 0 0;
    font-size : 1.6rem ;
}
#sidebar ul {
    list-style-type : none ;
    word-break : break-all;
}

/* ▽日付リスト(年単位) */
.datelimitlist {
    margin: 10px 0;		/* 外側の余白量 */
    padding: 0 0 0 1rem;	/* 内側の余白量 */
    padding: 4px 8px ;		/* 内側の余白量 */
}

/* ▽日付リスト(月単位) */
.datelimitsublist {
    margin: 4px 0;				/* 外側の余白量 */
    padding: 0 0 0 5px;		/* 内側の余白量 */
    list-style-type: none;	/* リストの先頭記号(なし) */
    font-size: 1.4rem;		/* 文字サイズ */
}
/* ――――――――――――――――――――――――― */
/* ▽年表記が単独で存在する場合に、月表示を横に並べる */	/* 縦に並べたい場合は、この区画を削除して下さい。 */
/* ――――――――――――――――――――――――― */
.datelimitlist .datelimitsublist .datelimit-month {
    display: inline-block;
    margin-right: 0.9em;
}

.datelimitlist .datelimitsublist .year {
    display: none;
}

/* ▽日付リスト内の該当件数 */
.datelimitlist .num , .hashtaglist .num{
    font-size: 0.85em;		/* 文字サイズ */
    margin-left: 0.3em;		/* 外側左の余白量 */
}
/* ▽ハッシュタグリスト */
.hashtaglist, .cattree {
    list-style-type: none;	/* リストの先頭記号(なし) */
    margin: 0.5em 0;		/* 外側の余白量 */
    padding: 0.75em;		/* 内側の余白量 */
    line-height: 1.5;		/* 行の高さ */
}

/* ▽ハッシュタグリストの1項目 */
.hashtaglist li {
    display: inline-block;
    margin: 0 .1em .6em 0;
    padding: .6em;
    line-height: 1;
    border : 1px solid #dcdcdc;
    font-size : 1.4rem ;
}

/* ハッシュタグリスト */
.hashtaglist li a {
    text-decoration: none ;
}

/* 検索ボックス */

.searchbox {
    display : flex ;
}

.searchbox input.queryinput {
    box-sizing : border-box ;
    height: 45px;
    width : calc(280px - 50px);
    padding: 2px 15px 2px 30px;
    border-radius: 3px 0px 0px 3px;
    background-image : url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22black%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%228.5%22%20cy%3D%228.5%22%20r%3D%225%22%2F%3E%3Cpath%20d%3D%22m17.571%2017.5-5.571-5.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat : no-repeat ;
    background-position : 6px ;
    border : 1px solid #dcdcdc;
}

.searchbox input.queryinput:focus {
    border: 1px solid var(--accentcolor1);
    outline : none ;
}

.searchbox span.submitcover input.submitbutton{
    box-sizing : border-box ;
    flex-shrink : 0 ;
    width: 50px;
    height: 45px;
    border-radius : 0 3px 3px 0 ;
    background-color: var(--accentcolor1);
    color : #fff ;
    cursor: pointer;
    text-align : center;
    padding : 0 ;
    margin : 0 ;
}

ul.searchoptions {
    margin : 0;
    list-style-type : none;
}

ul.searchoptions li {
    margin : 4px 0 ;
    padding : 0;
}

/* ハッシュタグのセレクタを使う場合 */
form.hashtagpullbox {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    overflow: hidden;
    border-radius: 4px;
    overflow : hidden ;
}

form.hashtagpullbox select.hashtagpull
{
    min-width : calc(260px - 50px) ;
    height: 45px;
    padding: 5px 15px 5px 30px;

    border-radius: 3px 0px 0px 3px;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
    background-image : url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m13.5%205.5-2%2010%22%2F%3E%3Cpath%20d%3D%22m9.5%205.5-2%2010%22%2F%3E%3Cpath%20d%3D%22m6.5%208.5h9%22%2F%3E%3Cpath%20d%3D%22m5.5%2012.5h9%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    background-repeat : no-repeat ;
    background-position : 6px ;
}
form.hashtagpullbox .submitcover input.hashtagpullsubmit {
    height: 45px;
    width : 50px ;
    border-radius : 0 3px 3px 0 ;
    background-color: var(--accentcolor2);
    color : #fff ;
    cursor: pointer;
}
select.select-tag {
    max-width: 260px;
}
/* -------------------- */
/* ▼検索語のハイライト */
/* -------------------- */
.searchword {
    font-weight: bold;
    background: linear-gradient(transparent 60%, #aaf0aa 60%);
}

.situation {
    font-weight : bold ;
    margin :  0 0 1.6rem ;
    padding: 2px 4px;
}

.note {
    border-left :6px solid var(--basecolor2) !important;
}

/* ---------------------------------------------------------------------
.★メニュータブ(beauter.css and JS)
------------------------------------------------------------------------*/

div.tab {
    font-size : 2.4rem ;
}

div.tab {
    background : transparent ;
}

@media only screen and (max-width: 900px)
{
    div.tab,.tabcontent h3 { font-size : 2.0rem; }
    .tabcontent input, .tabcontent select { max-width : 90%; }
}

div.tab ul,div.tab ul li  {
    margin : 0 ;
    padding : 4px 8px :
    vertical-align : bottom;
}
div.tab li {
    border-bottom : 1px dashed #ddd ;
}
div.tab li:last-child {
    border-bottom : none ;
}

div.tab ul li a {
    display : block ;
    padding : 8px 10px 8px 16px;
    color : #fff;
    background-color : var(--accentcolor2) ;
}

div.tab ul li a:hover {
    background : var(--accentcolor3);
}

div.tab ul li a svg {
    vertical-align : middle;
}

.tabcontent {
    background : var(--basecolor1) ;
}

.tabcontent h3 {
    vertical-align : middle ;
}

ul.searchoptions {
    margin : 0 ;padding : 0 ;font-size : 1.2rem ;
}

/*---------------------------------------------------------
.★カレンダー（※SVGは再配布にあたるため表示なし）
----------------------------------------------------------*/
div.calendararea {
    margin-top : 2.4rem ;
    padding: 16px ;
    background : #fefefe;
    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2)
}

table.calendar {
    box-sizing: border-box;
    border-collapse: collapse;
    text-align: center;
    font-size: 12px ;
    line-height: 2.5 ;
    margin : 4px auto;
    max-width : 350px ;
    min-width : 280px ;
}

table.calendar thead {
    background :#f0f0f0;
}

table.calendar th, table.calendar td {
    padding : 0 ;
    text-align : center ;
}

caption {
    background-size : 32px 32px ;
    background-repeat : no-repeat ;
    background-position : left top ;
}
/*
table.month12 caption{
  background-image :url(./december.svg);
}

table.month11 caption{
  background-image :url(./november.svg);
}

table.month10 caption{
  background-image :url(./october.svg);
}

table.month09 caption{
  background-image :url(./september.svg);
}

table.month08 caption{
  background-image :url(./august.svg);
}

table.month07 caption{
  background-image :url(./july.svg);
}

table.month06 caption{
  background-image :url(./june.svg);
}

table.month05 caption{
  background-image :url(./may.svg);
}

table.month04 caption{
  background-image :url(./april.svg);
}

table.month03 caption{
  background-image :url(./sakura.svg);
}

table.month02 caption{
  background-image :url(./february.svg);
}

table.month01 caption{
  background-image :url(./january.svg);
}
*/
.calendar caption {
    text-align: center;
    letter-spacing: 2px;
    font-weight: bold;
    font-size: 1.4em;
}

/* 投稿日 */
.calendar a {
    position: relative;
    display: inline-block;
    width: 100%;
    text-decoration: none;
    font-weight: bold;
}

.calendar a {
    font-weight: bold;
    display: block;
    text-align : center ;
}

.calendernav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 1.4rem;
    font-weight: bold;
    list-style-type : none ;
    margin : 16px auto 4px;
    max-width : 350px ;
    min-width: 280px;
    padding : 0 ;
}

.calendernav li:nth-child(2) {
    text-align: right;
}

/*---------------------------------------------------------
.★新着画像リスト
----------------------------------------------------------*/
.imagelist{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.imagelist h2 {
    background : var(--accentcolor2);
    color : #fff;
    font-size : 2.4rem ;
    margin : 0 ;
    padding : 4px ;
    aspect-ratio: 1 / 1;
}

.imagelist h2 > small {
    display : block ;
    color : #fcfcfc;
    font-size : 1.4rem ;
    line-height : 1.5 ;
}

.imagelist .count {
    padding : 5px ;
    border-radius : 100%;
    background : #ffeb3b ;
    color : #000 ;
}

.imagelistitem a {
    background-color: var(--accetntcolor1);
    display: block;
    overflow: hidden;
}

.imagelistitem a:hover {
    opacity:0.5;
    transition:0.3s;
}

img {
    background-repeat : no-repeat ;
    background-size : cover;
    max-width : 100%;
    vertical-align: text-bottom;
    box-sizing: border-box;
}

.imagelistitem a img {
    object-fit: cover;
    aspect-ratio: 1 / 1;
    display : inline ;
    height : auto ;
    border : 2px solid var(--accentcolor2);
}

.imagelistitem a img:hover {
    border : 2px solid var(--accentcolor1);
}

p.toGallery {
    text-align : right ;
}

p.toGallery > a::before {
    content: url('data:image/svg+xml;charset=utf8,%3Csvg%20height%3D%2221%22%20viewBox%3D%220%200%2021%2021%22%20width%3D%2221%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20fill%3D%22none%22%20fill-rule%3D%22evenodd%22%20stroke%3D%22currentColor%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20transform%3D%22translate(7%206)%22%3E%3Cpath%20d%3D%22m.5%208.5%204-4-4-4%22%2F%3E%3Cpath%20d%3D%22m4.5%208.5%204-4-4-4%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
    vertical-align : middle ;
}

/* ---------------------------------------------------------------------
.★ページトップに戻るボタン
------------------------------------------------------------------------*/

.pagetop {
    position: fixed;
    right: 16px;
    bottom: 0px;
    opacity : 0.8;
}

.pagetop a {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  width: 48px;
  height: 48px;
  background-color: var(--accentcolor2);
  color : #fff !important;
  transition: 0.3s;
}

.pagetop a::after {
    content: '';
    width: 7px;
    height: 7px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg);
    transition: 0.3s;
}

.pagetop span {
    width: 0px;
    height: 0px;
    visibility: hidden;
}

.pagetop a:hover {
    background : var(--accentcolor3) ;
}

.pagetop a:hover::after {
    border-top: 3px solid #f2f2f2;
    border-left: 3px solid #f2f2f2;
    transform: translateY(-5px) rotate(45deg);
}
/* End Of File */