/*--------------------------------------------------------
common - element

----------------------------------------------------------*/
:root{
  --clr-white: #fff; /* 通常の白　特に余計なことはしない */
  --clr-black: #333; /* 通常テキストなどに使用　111や222だとちょっと黒すぎて汚くなる */

  --clr-faint-gray: #fafafa; /* ボックスの背景など広い面積を塗る場合に使用する */
  --clr-light-gray: #f2f2f2; /* codeタグやkbdタグや.hosokuの斜線背景など、狭い範囲を塗る場合に使う */
  --clr-gray: #ddd;          /* 弱めのグレーフォントに使う。またborderやbox-shadowなど細いラインにも使う */
  --clr-dark-gray: #aaa;     /* 明確なグレーフォントに使う。*/


  --clr-red: #FF2D00; /* イメージカラーの赤（オレンジ系）　少し強い色なのでところどころに使う程度にとどめる */
  --clr-orange: #E38312; /* カテゴリーのタブで使用。　赤だと少し強すぎるため */
  --clr-cream: #F5F4CC; /* 記事のh2タグの背景色　それ以外ではくどくなるので使わない */
  --clr-dark-blue: #0B3159; /* タイムラインのタイトル文字で使用。　通常のブラックよりも特別に目立たせたいため */
  --clr-green: #21929C; /* 押しやすい印象のボタンなどに使う。　少しおしゃれな感じのブルーグリーン */

  --font-size-largest: 26px; /* 投稿ページの記事タイトルに使っていたが、記事タイトルに背景色を付けて目立たせたことで大きなサイズが不要になった。 */
  --font-size-larger: 22px;
  --font-size-normal: 17px;
  --font-size-smaller: 15px;
  --font-size-smallest: 14px;

  --dim-tobidashi-normal: 80px; /* 記事タイトルなどを少し横にはみ出して目立たせる距離 */
  --dim-tobidashi-larger: calc(var(--dim-tobidashi-normal) * 1.5); /* 記事タイトルなどを少し横にはみ出して目立たせる距離 */
  --dim-tobidashi-smaller: calc(var(--dim-tobidashi-normal) * 0.5); /* 記事タイトルなどを少し横にはみ出して目立たせる距離 */
}
@media screen and (max-width: 1000px) {
  :root{
    --dim-tobidashi-normal: 10px;
  }
}




::selection {

}
a::selection{
  text-decoration: underline;
}
img{
  user-select: none;
}
strong,
b,
.bold{
  font-weight: bold;
}
del{
  text-decoration: line-through;
}
s{
  text-decoration: line-through;
}
abbr{
  text-decoration: underline dotted;
}
a{
  color: var(--clr-red);
  color: var(--clr-green);
  text-decoration: none;
}
a:hover{
  color: var(--clr-red);
  color: var(--clr-green);
  text-decoration: underline;
}
html{
  /* 10px */
  font-size: 100px;
  margin-top: 0 !important;
  height: 100%;
}
body{
  width: 100%;
  height: 100%;
  padding: 0;
  /*
  【フォントの採用方針について】
   一方で「Meiryo」は文字間隔に適度な余白があるため、一般的な文章では非常に読みやすい。
   だが、文字の上下や左右にやや広めの余白があるためボタンなどのパーツや記事タイトルや見出しなどで使うと
   少し散らばった印象になる。またテーブルなどの小さな表示エリアではスペース効率が悪い。

   「Meiryo UI」は余白や文字間隔が詰まっていてカタマリ感があるため、
   ボタンなどのパーツに使いやすく、また文字サイズの大きい記事タイトルや中見出しでも
   スキマが空きすぎないのでぱっと見のバランスがいい。だが、文字が詰まっているため
   一般的な文章で使用すると窮屈な印象になる。

   以上から、全体的にはbodyで「Meiryo UI」を指定しておき、文章に相当する部分（pタグ）では「Meiryo」を指定することとする。
    */
  font-family: 'Noto Sans JP', 'Meiryo', sans-serif;
  font-size: var(--font-size-normal);
  line-height: 1.7;
  color: var(--clr-black);
  overflow-y: scroll;  /* ページ遷移時横揺れ防止 */
  overflow-x: hidden;

  /* background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23fafafa' points='0,0 100,0 100,100 0,100 0,0'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-repeat: repeat;
  background-position: 0 0; */
}
.wrap{
  margin: 0 auto;
  width: 100%;
  min-height: 100%;
  max-width: calc(760px + var(--dim-tobidashi-normal) * 2 + 3% * 2);
  padding: 0 3%;
  display: flex;
  flex-direction: column;
}
/*--------------------------------------------------------
header
----------------------------------------------------------*/
.header{
  /* 画面の端まで要素を伸ばす */
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
  /* padding: 0 calc(50vw - 50% - 10%); */
	width: 100vw;

  padding-top: 0.2rem;
  box-shadow: 0px 1px 2px var(--clr-gray);
}
.header .upper{
  /* 画面の端まで要素を伸ばす */
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
	width: 100vw;
}
.header .lower{
  margin-top: 10px;
}
.header .logo-img-box{
  display: flex;
  align-items: flex-end;
  margin: 0 auto;
  width: 400px;
  max-width: 95%;
}
.header .logo-img-box a{
  display: block;
}
.header .logo-img-box img{
  display: block;
}
/*--------------------------------------------------------
menu container(normal)
----------------------------------------------------------*/
.menu-container{
  width: 100%;
}
.menu-container .menu-accordion{
  width: 100%;
}
.menu-container .menu-label{
  display: none;
}
.menu-container .menu-checkbox{
  display: none;
  appearance: none;
}
/* ------------------------------------------ */
.globalnav{
  width: 100%;
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
}
.globalnav ul{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.globalnav ul li{
  position: relative;
  margin-left: 0;
  /* margin-bottom: 2px; */
  width: calc((100% - 35px - 10px * 2 - 50px) / 7);
  min-width: 80px;
  line-height: 50px;
  font-size: var(--font-size-smaller);
  font-weight: bold;
  text-align: center;
  border-radius: 1px;
  /* border: solid 2px var(--clr-black); */
  overflow: hidden;
}
.globalnav ul li::before{
  content: '';
  display: block;
  width: 1px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: var(--clr-gray);
}
.globalnav ul li:last-child::after{
  content: '';
  display: block;
  width: 1px;
  height: 20px;
  position: absolute;
  right: 0;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  background-color: var(--clr-gray);
}

.globalnav ul li.current{
  cursor: default;
  user-select:none;
  /* background-color: var(--clr-black); */
  color: var(--clr-red);
}
.globalnav ul li.current::after{
  content: '';
  position: absolute;
  bottom: calc(0px + 0px);
  left: 0;
  display: block;
  width: 100%;
  height: 2px;
  background-color: var(--clr-red);
  /* background-color: var(--clr-black); */
}
.globalnav ul li:first-child{
  margin-left: 0;
}
.globalnav ul li.nav-lr{
  width: calc(30px + 10px * 2);
  min-width: calc(30px + 10px * 2);
  max-width: calc(30px + 10px * 2);
}
.globalnav ul li.nav-lr a{
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 10px;
  flex-direction: column;
  justify-content: center;
}
.globalnav ul li.nav-lr a img{
  display: block;
  margin: 0 auto;
  border-radius: 50px;
}
.globalnav ul li.nav-search{
  width: 50px;
  height: 50px;
  min-width: 50px;
  max-width: 50px;
  min-height: 50px;
  max-height: 50px;
}
.globalnav ul li.nav-search .search-label{
  display: block;
  width: 100%;
  height: 100%;
  background-image: url(../img/icon/loupe.png);
  background-size: 60% 60%;
  background-position: center;
  background-repeat: no-repeat;
}

.globalnav ul li a{
  display: block;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  /* max-width: 150px; */
  color: var(--clr-black);
  transition-duration: 0.1s;
}
.globalnav ul li a:hover{
  position: relative;
  text-decoration: none;
  /* background-color: var(--clr-faint-gray); */
  color: var(--clr-red);
  /* color: var(--clr-green); */
}
.globalnav ul li a::before{
  content: '';
  display: block;
  width: 0;
  height: 2px;
  position: absolute;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  background-color: var(--clr-red);
  /* background-color: var(--clr-green); */

  transition-duration: 0.3s;
}
.globalnav ul li a:hover::before{
  width: 100%;
}

/* ----------------------------------------- */
.search-accordion{
  /* 画面の端まで要素を伸ばす */
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50% + 0.2rem);
  width: 100vw;

  overflow: hidden;
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: var(--clr-green);
  transition-duration: 0.2s;
}
.search-accordion.hide{
  max-height: 0;
  padding-top: 0;
  padding-bottom: 0;
}
.search-form{
  display: flex;
  width: 100%;
  max-width: 500px;
}
.search-form .search-text-box{
  display: block;
  padding: 0 10px;
  width: calc(100% - 40px);
  height: 2.5em;
  line-height: 2.5;
  border-radius: 3px 0 0 3px;
  color: var(--clr-black);
  border: solid 1px var(--clr-gray);
  background-color: var(--clr-white);
  border-right: none;
}
.search-form .search-text-box::placeholder{
  color: var(--clr-dark-gray);
}
.search-form .search-btn{
  display: block;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  border-radius: 0 3px 3px 0;
  border: solid 1px var(--clr-gray);
  border-left: none;
  background-color: var(--clr-light-gray);
  background-image: url(../img/icon/loupe.png);
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}

/*--------------------------------------------------------
menu container (narrow)
----------------------------------------------------------*/
@media screen and (max-width: 550px) {
  .menu-container{
    display: block;
  }
  .menu-container .menu-accordion{
    display: block;
    max-height: 0;
    background-color: var(--clr-faint-gray);
    overflow: hidden;
    transition-duration: 0.3s;
  }
  .menu-container .menu-label{
    position: relative;
    display: block;
    margin-right: 0;
    margin-left: auto;
    width: 40px;
    height: 40px;
    border-radius: 5px;
  }
  .menu-container .menu-label span,
  .menu-container .menu-label span::before,
  .menu-container .menu-label span::after{
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    top: calc(50% - 1px);
    background-color: var(--clr-black);
    border-radius: 2px;
  }
  .menu-container .menu-label span::before{
    content: '';
    top: auto;
    top: calc(-0.2rem);
    transition-duration: 0.3s;
  }
  .menu-container .menu-label span::after{
    content: '';
    top: auto;
    bottom: calc(-0.2rem);
    transition-duration: 0.3s;
  }
  .menu-container .menu-checkbox:checked ~ .menu-accordion{
    max-height: 200vh;
  }
  .menu-container .menu-checkbox:checked + .menu-label span{
    /* 三本線の真ん中のラインを見えないように透明にする */
    background-color: transparent;
  }
  .menu-container .menu-checkbox:checked + .menu-label span::before{
    top: 0;
    transform: rotate(45deg);
    transform: rotate(405deg);
  }
  .menu-container .menu-checkbox:checked + .menu-label span::after{
    bottom: 0;
    transform: rotate(-45deg);
    transform: rotate(-405deg);
  }

  .globalnav ul{
    display: block;
  }
  .globalnav ul li{
    margin: 0;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
    line-height: 50px;
    border: none;
    border-bottom: solid 1px var(--clr-gray);
  }
  .globalnav ul li::before{
    content: none;
  }
  .globalnav ul li.nav-lr{
    width: 100%;
    max-width: 100%;
    border: none;
    border-bottom: solid 1px var(--clr-gray);
  }
  .globalnav ul li.nav-lr a{
    margin: 0 auto;
    padding: 5px 10px ;
  }
  .globalnav ul li.nav-lr a img{
    max-width: 30px;
  }
  .globalnav ul li.nav-search{
    display: none;
  }
  .globalnav ul li.current{
    background-color: var(--clr-black);
    color: var(--clr-white);
  }
  .globalnav ul li.current::after{
    content: none;
  }
  .globalnav ul li a{
    max-width: 100%;
  }
  .globalnav ul li a::before{
    content: none;
  }
  .search-accordion.hide{
    max-height: none;
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
    background-color: var(--clr-faint-gray);
  }
}
/*--------------------------------------------------------
mainbody
----------------------------------------------------------*/
.mainbody{
  margin-top: 0.6rem;
  width: 100%;
  padding: 0 var(--dim-tobidashi-normal);
  flex: 1;
}
/*--------------------------------------------------------
maincol - home
----------------------------------------------------------*/
.home{
  font-size: var(--font-size-larger);
  /* font-weight: bold; */
}
.home .fuki{
}
.home .fuki p{
  margin-top: 0.2rem;
  margin-top: 0.1rem;
  text-align: center;
}
.home .fuki p:first-child{
  margin-top: 0;
}
.home .fuki .left{
  text-align: left;
}
.home .fuki .right{
  text-align: right;
}
.home .lr-box{
  /* 画面の端まで要素を伸ばす */
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 60%);
	width: 100vw;
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-between;
}
.home .lr-box .lucy-face,
.home .lr-box .ruby-face{
  width: 35%;
  max-width: 200px;
}
.home .lr-box .lucy-face img,
.home .lr-box .ruby-face img{
  width: 100%;
}

/*--------------------------------------------------------
maincol - post
----------------------------------------------------------*/
.post{
  width: 100%;
}
.post .post-header{
  margin: 0 calc( -1 * var(--dim-tobidashi-normal));
  padding: 0.2rem;
  border-radius: 0px;

  background-image: linear-gradient(-45deg,transparent 25%,var(--clr-cream) 25%,var(--clr-cream) 50%,transparent 50%,transparent 75%,var(--clr-cream) 75%,var(--clr-cream));
  background-image: linear-gradient(-45deg,transparent 25%,var(--clr-light-gray) 25%,var(--clr-light-gray) 50%,transparent 50%,transparent 75%,var(--clr-light-gray) 75%,var(--clr-light-gray));
  background-size: 6px 6px;
}

.post .post-header .inner{
  padding: 0.2rem 0.3rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23333' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E");

  background-size: 0.15rem 0.15rem, 0.12rem 0.12rem;
  background-repeat: no-repeat;
  background-position: 0 0, 0.15rem 0.15rem;
}
.post h1{
  margin-top: 10px;
  padding: 0;
  position: relative;
  font-size: var(--font-size-largest);
  font-weight: bold;
  /* text-align: center; */
}
.post .post-header .meta{
  display: flex;
  flex-wrap: wrap;
  margin-top: 10px;
  padding: 0;
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
  font-size: var(--font-size-smallest);
  /* font-weight: bold; */
}
.post .post-header .meta:first-child{
  /* margin-top: 0; */
}
.post .post-header .meta.right{
  justify-content: flex-end;
}
.post .post-header .meta.center{
  justify-content:center;
}

.post .post-header .meta li{
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.post .post-header .meta li:not(:first-child){
  margin-left: 10px;
}
.post .post-header .meta li::before{
  content: none;
}
.post .post-header .meta .released,
.post .post-header .meta .updated{
  padding-left: 1.3em;
  background-image:url(../img/icon/released_333.png);
  background-size: 1.3em 1.3em;
  background-position: left;
  background-repeat: no-repeat;
}
.post .post-header .meta .released{
  background-image:url(../img/icon/released_333.png);
}
.post .post-header .meta .updated{
  background-image:url(../img/icon/updated_333.png);
}


.post .post-header .meta .cat-tab a{
  padding: 2px 8px;
  text-decoration: none;
  color: var(--clr-green);
  border: solid 2px var(--clr-green);
  font-weight: bold;
  transition-duration: 0.1s;
}
.post .post-header .meta .cat-tab a:hover{
  color: var(--clr-white);
  background-color: var(--clr-green);
  text-decoration: none;
}
.post .post-header .meta .tag-tab{
  transform: skewX(-5deg);
}

.post .post-header .meta .tag-tab a{
  padding: 2px 5px;
  text-decoration: none;
  color: var(--clr-green);
  border-bottom: solid 2px var(--clr-green);
  font-weight: bold;
  transition-duration: 0.1s;
}
.post .post-header .meta .tag-tab a:hover{
  color: var(--clr-white);
  background-color: var(--clr-green);
  text-decoration: none;


}





.post .post-body{
  margin-top: 0.6rem;
}
.post h2{
  position: relative;
  margin-top: 1.0rem;
  margin-left: calc(-1 * var(--dim-tobidashi-smaller));
  margin-right: 0;

  padding: 0.25rem 0.2rem 0.10rem 0.2rem;
  font-size: var(--font-size-larger);
  font-weight: bold;

  /* border-bottom: solid 2px var(--clr-black); */

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E");

  background-size: 0.05rem 0.05rem, 0.05rem 0.05rem, 0.05rem 0.05rem, 0.05rem 0.05rem;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-position: 0 0, 0 100%,  100% 0,  100% 100%;

  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23333' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E");

  background-size: 0.1rem 0.1rem, 0.08rem 0.08rem;
  background-repeat: no-repeat;
  background-position: 0 0, 0.1rem 0.1rem;
}
  .post h2::after{
    content: '';
    display: block;
    position: absolute;
    bottom: -3px;
    left: 20px;
    width: calc(100% - 20px);
    height: 10px;

    /* border-bottom: solid 1px var(--clr-black); */
    /* border-bottom: dotted 1px var(--clr-black); */
    /* border-bottom: solid 1px var(--clr-red); */





    background-image: linear-gradient(-45deg,transparent 25%,var(--clr-cream) 25%,var(--clr-cream) 50%,transparent 50%,transparent 75%,var(--clr-cream) 75%,var(--clr-cream));
    background-image: linear-gradient(-45deg,transparent 25%,var(--clr-light-gray) 25%,var(--clr-light-gray) 50%,transparent 50%,transparent 75%,var(--clr-light-gray) 75%,var(--clr-light-gray));
    background-size: 6px 6px;
    background-repeat: repeat;

  }

.post h3,
.post h4,
.post h5,
.post h6{
  margin-top: 0.6rem;
  font-weight: bold;
}
.post h3{
  position: relative;
  padding-left: calc(4px + 8px);
}
.post h3::before{
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  display: block;
  width: 4px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--clr-black);
}
.post p,
.post .img-box + p{
  margin-top: 0.4rem;
}
.post p + p{
  /* margin-top: 0.2rem; */
}
.post .abst{
  border-radius: 0.2rem;
}
.post img{
  /* display: block; */
  /* margin: 0 auto; */
  width: auto;
  max-width: 100%;
  border: solid 1px var(--clr-gray);
}
.post a img{
  transition-duration: 0.1s;
}
.post a img:hover{
  border: solid 1px var(--clr-green);
  opacity: 0.9;
}
.post .img-box{
  margin-top: 0.4rem;
  width: 100%;
}
.post .img-box a.zoom{
  cursor: pointer;
  /* display: block; */
  transition-duration: 0.1s;
}
.post .img-box a.zoom img{
  transition-duration: 0.3s;
}
.post .img-box a.zoom img:hover{
  opacity: 0.9;
  box-shadow: 0px 1px 15px 8px var(--clr-gray);
}
.post .img-box.youtube{
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.youtube iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}
.post table{
  margin-top: 0.4rem;
  width: 100%;
  font-size: var(--font-size-smaller);
  background-color: var(--clr-white);
}
.post th,
.post td{
  padding: 0.1rem;
  border: solid 1px var(--clr-gray);
  /* border: solid 1px var(--clr-light-gray); */
}
.post th{
  text-align: center;
  font-weight: bold;
  background-color: var(--clr-faint-gray);
  /* background-color: var(--clr-light-gray); */
}
/* kokkiは通貨コードの記事で使用している */
.post td.kokki{
  text-align: center;
  vertical-align: middle;
}
.post td.kokki > img{
  display: inline;
  vertical-align: middle;
}
.post kbd{
  margin: 0 2px;
  padding: 1px 5px;
  font-size: var(--font-size-smaller);
	font-family:  'Consolas', 'Lucida Console', 'ＭＳ ゴシック', monospace;
  border-radius: 2px;
  border: solid 1px var(--clr-black);
}
.post code{
  margin: 0 2px;
  padding: 2px 4px;
  font-size: var(--font-size-smaller);
	font-family:  'Consolas', 'Lucida Console', 'ＭＳ ゴシック', monospace;
  background-color: var(--clr-light-gray);
  color: var(--clr-red);
}
.post pre{
  position: relative;
  margin-top: 0.4rem;
  width: 100%;
  padding: 0.2rem;
  overflow: auto;
  border: solid 1px var(--clr-red);
  border: dotted 1px var(--clr-red);
  border: dotted 1px var(--clr-black);
  border: dotted 1px var(--clr-green);
  border: solid 1px var(--clr-dark-gray);
  /* border: solid 1px var(--clr-gray); */
  background-color: var(--clr-faint-gray);
}
.post pre.html,
.post pre.css,
.post pre.javascript,
.post pre.js,
.post pre.php,
.post pre.kotlin{
  padding-top: calc(0.2rem + 1.2em);
  padding-top: calc(0.2rem + 0.6em);
}

.post pre.html::before,
.post pre.css::before,
.post pre.javascript::before,
.post pre.js::before,
.post pre.php::before,
.post pre.kotlin::before{
  content: none;
  position: absolute;
  z-index: 100;
  top: 0px;
  left: 0px;

  display: inline-block;
	font-family:  'Consolas', 'Lucida Console', 'ＭＳ ゴシック', monospace;
  padding: 0 5px;
  line-height: 1.2em;
  font-size: var(--font-size-smallest);
  background-color: var(--clr-dark-gray);
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.post pre.html::before{
  content: 'HTML';
}
.post pre.css::before{
  content: 'CSS';
}
.post pre.javascript::before,
.post pre.js::before{
  content: 'JavaScript';
}
.post pre.php::before{
  content: 'PHP';
}
.post pre.kotlin::before{
  content: 'Kotlin';
}

.post pre code{
  margin: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  white-space: pre;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.4;
  font-size: var(--font-size-smallest);
  color: var(--clr-black);
}
.post ul{
  margin-top: 0.4rem;
  list-style-type: none;
}
.post ul li{
  position: relative;
  margin-top: 0.1rem;
  padding-left:calc(1em + 0.2em * 2);
  list-style: none;
}
.post ul li:first-child{
  margin-top: 0;
}
.post ul li::before{
  position: absolute;
  top:0;
  left: 0;
  content: '・';
  padding: 0 0.2em;
  font-weight: bold;
}
.post ol{
  counter-reset: number;
  margin-top: 0.4rem;
  list-style-type: none;
}
.post ol li{
  position: relative;
  margin-top: 0.1rem;
  padding-left:calc(1em + 0.2em * 2);
  list-style: none;
}
.post ol li:first-child{
  margin-top: 0;
}
.post ol li::before{
  position: absolute;
  top:0;
  left: 0;
  counter-increment: number;
  content: counter(number);
  padding: 0 0.2em;
  font-weight: bold;
}
.post blockquote{
  position: relative;
  margin-top: 0.4rem;
  padding: 0.6rem 0.4rem;
  font-size: var(--font-size-smaller);
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath fill='rgba(0,0,0,0.1)' d='M14.017 21v-7.391c0-5.704 3.731-9.57 8.983-10.609l.995 2.151c-2.432.917-3.995 3.638-3.995 5.849h4v10h-9.983zm-14.017 0v-7.391c0-5.704 3.748-9.57 9-10.609l.996 2.151c-2.433.917-3.996 3.638-3.996 5.849h3.983v10h-9.983z'/%3E%3C/svg%3E"),
  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' preserveAspectRatio='none'%3E%3Cpath fill='rgba(0,0,0,0.1)' d='M9.983 3v7.391c0 5.704-3.731 9.57-8.983 10.609l-.995-2.151c2.432-.917 3.995-3.638 3.995-5.849h-4v-10h9.983zm14.017 0v7.391c0 5.704-3.748 9.571-9 10.609l-.996-2.151c2.433-.917 3.996-3.638 3.996-5.849h-3.983v-10h9.983z'/%3E%3C/svg%3E");
  background-position: 10px 10px, calc(100% - 10px) calc(100% - 10px);
  background-repeat: no-repeat;
  background-size: calc(10px + 0.2rem) calc(10px + 0.2rem);
  border-radius: 2px;
}
.post blockquote cite{
  margin-top: 0.1rem;
  display: block;
  text-align: right;
}
.post .hosoku{
  margin-top: 0.4rem;
  padding: 0.2rem;
  font-size: var(--font-size-smaller);
  border-radius: 2px;
  /* border: solid 1px var(--clr-gray); */

  background: linear-gradient(-45deg,transparent 25%,var(--clr-faint-gray) 25%,var(--clr-faint-gray) 50%,transparent 50%,transparent 75%,var(--clr-faint-gray) 75%,var(--clr-faint-gray));
  background: linear-gradient(-45deg,transparent 25%,var(--clr-light-gray) 25%,var(--clr-light-gray) 50%,transparent 50%,transparent 75%,var(--clr-light-gray) 75%,var(--clr-light-gray));
  background-size: 6px 6px;
}

.post .hosoku .img-box{
  padding:0rem 0.2rem;
  background-color: transparent;
  border: none;
}
.post .hosoku .title{
  font-weight: bold;
}
/* ------timeline------------ */
.post .tl{
  counter-reset: tl-num;
  margin-top: 0.4rem;
  margin-left: 0.1rem;
  font-size: var(--font-size-smaller);
  border-left: dashed 2px var(--clr-black);
  border-left: dashed 2px var(--clr-dark-blue);
}
.post .tl-item{
  counter-increment: tl-num;
  padding-left: 0.3rem;
}
.post .tl-item:first-child{
  padding-top: 0.2rem;
}
.post .tl-item:last-child{
  padding-bottom: 0.2rem;
}
.post .tl-item + .tl-item::before{
  content: '';
  display: block;
  width: 100%;
	height: 1.0rem;
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='358.402,195.5 358.402,0 153.598,0 153.598,195.5 18.616,195.5 255.991,512 493.384,195.5'/%3E%3C/svg%3E");
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23333' points='358.402,195.5 358.402,0 153.598,0 153.598,195.5 18.616,195.5 255.991,512 493.384,195.5'/%3E%3C/svg%3E");

  background-size: 0.4rem 0.4rem;
  background-repeat: no-repeat;
  background-position: center center;
  background-color: transparent;
}
.post .tl h1,
.post .tl h2,
.post .tl h3,
.post .tl h4,
.post .tl h5,
.post .tl h6{
  position: relative;
  margin: 0;
  padding: 0;
  padding-left: calc(1.5em + 5px);
  font-size: var(--font-size-normal);
  line-height: 1.5;
  color: var(--clr-dark-blue);
  border: none;
  background-color: transparent;
  background-image: none;
}
.post .tl h1 + *,
.post .tl h2 + *,
.post .tl h3 + *,
.post .tl h4 + *,
.post .tl h5 + *,
.post .tl h6 + *{
  margin-top: 0.2rem;
}
.post .tl h1::before,
.post .tl h2::before,
.post .tl h3::before,
.post .tl h4::before,
.post .tl h5::before,
.post .tl h6::before{
  content: counter(tl-num);
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 1.5em;
  height: 1.5em;
  line-height: 1.5;
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
  text-align: center;
  color: var(--clr-white);
  border-radius: 3px;
  background-color: var(--clr-black);
  background-color: var(--clr-dark-blue);
  transform: translateY(0); /* .post h3 タグのtranslateY(-50%)を打ち消すため */
}
/*--------------------------------------------------------
post - 条件付き上書き
メインcssの後に上書きするため記載位置を変えないこと。
----------------------------------------------------------*/
.post h2 + *{
  margin-top: 0.4rem;
}
.post h3 + *,
.post h4 + *,
.post h5 + *,
.post h6 + *,
.post h3 + .img-box,
.post h4 + .img-box,
.post h5 + .img-box,
.post h6 + .img-box{
  /* .img-boxを追加しないとすり抜ける */
  margin-top: 0.2rem;
}
.post li > *:first-child{
  margin-top: 0;
}
.post blockquote > *:first-child{
  margin-top: 0;
}
.post .abst > *:first-child{
  margin-top: 0;
}
.post .hosoku > *:first-child{
  margin-top: 0;
}
.post .hosoku .title + *{
  margin-top: 0.1rem;
}
.post .tl-item > *:first-child{
  margin-top: 0;
}
.post .tl-item > p + p{
  margin-top: 0.2rem;
}
/*--------------------------------------------------------
maincol - post-footer
----------------------------------------------------------*/
.post-footer{
  margin-top: 0.4rem;
}
.post-footer .post-id{
  margin-top: 0.1rem;
  text-align: right;
  font-size: var(--font-size-smallest);
}
.post-footer .post-end-info a{
  padding: 5px;
}
/*--------------------------------------------------------
maincol - comment-area
----------------------------------------------------------*/
.cmt-area{
  margin-top: 0.8rem;
}
.cmt-area .label{
  font-size: var(--font-size-larger);
  font-weight: bold;
  line-height: 1.4;
}
.cmt-area .cmt-list{
  margin-top: 0.1rem;
  font-size: var(--font-size-smaller);
}
.cmt-list .cmt-single{
  margin-top: 0.2rem;
  padding: 0.2rem;
  border-radius: 3px;
  background-color: var(--clr-faint-gray);
}
.cmt-list .cmt-single:first-child{
  margin-top: 0;
}
.cmt-list .cmt-single .cmt-header{
}
.cmt-list .cmt-single .cmt-header i{
  margin-right: 2px;
}
.cmt-list .cmt-single .cmt-header .author{
  margin-right: 10px;
  font-weight: bold;
}
.cmt-list .cmt-single .cmt-header .date{
  font-size: var(--font-size-smallest);
  /* font-weight: bold; */
}
.cmt-list .cmt-single .cmt-text{
  margin-top: 0.1rem;
}
/*--------------------------------------------------------
maincol - comment-area - comment-respond
----------------------------------------------------------*/
.comment-respond{
  font-size: var(--font-size-smaller);
  margin-top: 0.2rem;
}
.comment-respond p{
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
}
.comment-respond label{
  margin-top: 10px;
  display: block;
}
.comment-respond textarea,
.comment-respond input[type="text"]{
  display: block;
  width: 100%;
  height: 100px;
  padding: 8px;
  border-radius: 3px;
  border: solid 1px var(--clr-gray);
  background-color: var(-clr-white);
}
.comment-respond input[type="text"]{
  height: 40px;
}
.comment-respond textarea:focus,
.comment-respond input[type="text"]:focus{
  border: solid 1px var(--clr-black);
}
.comment-respond input[type="submit"]{
  margin-top: 0.2rem;
  padding: 0.2em 1em;
	border-radius: 3px;
  transition-duration: 0.1s;
  border: solid 1px var(--clr-gray);
  color: var(--clr-black);
}
.comment-respond input[type="submit"]:hover{
  color: var(--clr-white);
  border: solid 1px var(--clr-red);
  background-color: var(--clr-red);
  border: solid 1px var(--clr-green);
  background-color: var(--clr-green);
}
/*--------------------------------------------------------
404 Not Found
----------------------------------------------------------*/
.not-found-404{
  width: 100%;
  padding: 100px 0;
}
.not-found-404 .title{
  font-weight: bold;
}
.not-found-404 p{
  margin-top: 0.2rem;
}
/*--------------------------------------------------------
maincol - posts
----------------------------------------------------------*/
.list-page{
  margin:0 calc(-1 * var(--dim-tobidashi-smaller));
}
.list-page .main-label{
  /* margin-top: 10px; */
  font-size: var(--font-size-larger);
  font-size: var(--font-size-largest);
  font-weight: bold;
  /* text-align: center; */
}
.list-page .tag-selector{
  margin-top: 0.1rem;
  padding: 0.1rem 0.05rem;
  padding-bottom: 0.1rem;
  display: flex;
  /* justify-content: flex-end; */
  /* justify-content: center; */
  flex-wrap: wrap;
  border-top: solid 1px var(--clr-black);
  border-top: solid 1px var(--clr-gray);
  border-top: solid 1px var(--clr-red);
  border-top: solid 2px var(--clr-red);
  border-top: solid 2px var(--clr-black);
  /* background-color: var(--clr-faint-gray); */

}
.list-page .tag-selector li{
  margin-right: 7px;
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
  font-size: var(--font-size-smallest);
  text-align: center;
  /* font-weight: bold; */
  user-select: none;
  transform: skewX(-5deg);
}
.list-page .tag-selector li:first-child{
  font-weight: bold;
  transform: skewX(-5deg);
}
.list-page .tag-selector li:last-child{
  margin-right: 0;
}
.list-page .tag-selector li a{
  padding: 2px 3px;
  border-bottom: solid 1px var(--clr-green);
  transition-duration: 0s;
}
.list-page .tag-selector li a:hover{
  text-decoration: none;
  color: var(--clr-white);
  background-color: var(--clr-green);
}
.list-page .tag-selector .tag-selector-item a:hover{
  background-color:
}
.list-page .tag-selector li:first-child{
  border: none;
}
.list-page .posts{
  counter-reset: number;
  margin-top: 0.1rem;
}
.list-page .posts .posts-single{
  transition-duration: 0.1s;
}
.list-page .posts .posts-single.hide{
  max-height: 0;
  border: none;
}
.list-page .posts .posts-single a{
  color: var(--clr-black);
  text-decoration: none;
}
.list-page .posts .posts-single .inner{
  display: flex;
  /* ↓サムネイルが縦に伸びるのを防止 */
  align-items: flex-start;
  
  padding: 0.25rem;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23333' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E"),
                    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E%3Cpolygon fill='%23FF2D00' points='0,0 512,0 512,512, 0,512'/%3E%3C/svg%3E");
  background-size: 0.08rem 0.08rem, 0.064rem 0.064rem;
  background-repeat: no-repeat;
  background-position: 0 0, 0.08rem 0.08rem;
}
.list-page .posts .posts-single:hover{
  background-color: var(--clr-faint-gray);
}
.list-page .posts-single:hover img{
  opacity: 0.9;
}
.list-page .posts .posts-single .img-wrap{
  width: 30%;
  max-width: 80px;
  margin-right: 0.15rem;
  text-align: center;
}
.list-page .posts .posts-single .img-wrap img{
  background-color: var(--clr-white);
  border: solid 1px var(--clr-gray);
  transition-duration: 0.1s;
}
.list-page .posts .posts-single:hover .img-wrap img{
    border: solid 1px var(--clr-green);
}
.list-page .posts .posts-single .text-wrap{
  width: 100%;
}
.list-page .posts .posts-single .text-wrap > *:first-child{
  margin-top: 0;
}
.list-page .posts .posts-single .title{
  position: relative;
  margin-top: 0.05rem;
  font-weight: bold;
  transition-duration: 0.1s;
}
.list-page .posts .posts-single .inner::before{
  counter-increment: number;
  content: none;
  /* content: counter(number); */
  display: inline-block;
  margin-right: 5px;
  padding: 0 0.4em 0 0.4em;
  font-size: var(--font-size-smallest);
  font-weight: bold;
  color: var(--clr-white);
  background-color: var(--clr-green);
  background-color: var(--clr-black);
  border-radius: 3px;
  transition-duration: 0.1s;
}
.list-page .posts .posts-single:hover .inner::before{
  background-color: var(--clr-green);
}
.list-page .posts .posts-single:hover .title{
  color: var(--clr-green);
}
.list-page .posts .posts-single .meta{
  display: flex;
  margin-top: 5px;
  font-size: var(--font-size-smallest);
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
}
.list-page .posts .posts-single .meta.right{
  justify-content: flex-end;
}
.list-page .posts .posts-single .meta.between{
  justify-content: space-between;
}
.list-page .posts .posts-single .meta .released{
  padding-left: 1.3em;
  background-image:url(../img/icon/released_333.png);
  background-size: 1.3em 1.3em;
  background-position: left;
  background-repeat: no-repeat;
}
.list-page .posts .posts-single .meta li:not(:first-child){
  margin-left: 0.1rem;
}



.list-page .posts-checkbox{
  display: none;
  appearance: none;
}
.list-page .posts-label{
  display: block;
  margin-left: auto;
  margin-right: 0;
  width: 0.3rem;
  height: 0.3rem;
  background-color: var(--clr-gray);
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E %3Cpolygon fill='%23fff' points='71,71 430,71 430,143 71,143'/%3E    %3Cpolygon fill='%23fff' points='71,215 430,215 430,286 71,286'/%3E     %3Cpolygon fill='%23fff' points='71,358 430,358 430,430 71,430'/%3E      %3C/svg%3E");
  background-size: 80% 80%;
  background-repeat: no-repeat;
  background-position: center center;
}
.list-page .posts-checkbox:checked + .posts-label{
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' preserveAspectRatio='none'%3E %3Cpolygon fill='%23fff' points='51,51 230,51 230,230 51,230'/%3E    %3Cpolygon fill='%23fff' points='281,51 460,51 460,230 281,230'/%3E      %3Cpolygon fill='%23fff' points='281,281 460,281 460,460 281,460'/%3E    %3Cpolygon fill='%23fff' points='51,281 230,281 230,460 51,460'/%3E    %3C/svg%3E");
}
.list-page .posts-checkbox:checked ~ .posts .posts-single{
  border-bottom: solid 1px var(--clr-light-gray);
  border-bottom: solid 1px var(--clr-gray);
  border-bottom: dotted 1px var(--clr-gray);
  border-bottom: dotted 1px var(--clr-dark-gray);
  /* border-bottom: dotted 1px var(--clr-black); */
}
.list-page .posts-checkbox:checked ~ .posts .posts-single:first-child{
  border-top: solid 1px var(--clr-light-gray);
  border-top: solid 1px var(--clr-gray);
  border-top: dotted 1px var(--clr-gray);
  border-top: dotted 1px var(--clr-dark-gray);
  /* border-top: dotted 1px var(--clr-black); */
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .inner{
  /* display: block; */
  padding: 0.05rem;
  background-image: none;
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .img-wrap{
  /* display: none; */
  font-size: var(--font-size-smallest);
  width: calc(1em * 1.7);
  max-width: calc(1em * 1.7);
  margin-right: 0.05rem;
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .text-wrap{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .title{
  font-size: var(--font-size-smallest);
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .inner::before{
  content: counter(number);
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .meta{
  margin-top: 0;
}
.list-page .posts-checkbox:checked ~ .posts .posts-single .meta .released{
  padding-left: 0;
  background-image: none;
}









@media screen and (max-width: 550px) {
  .list-page .posts{
    /* 画面の端まで要素を伸ばす */
    margin: 0 calc(50% - 50vw);
    padding: 0 calc(50vw - 50%);
    padding: 0;

    margin-top: 0.2rem;
  }
}




/*--------------------------------------------------------
maincol - pagenation
----------------------------------------------------------*/
.pagenation {
  margin-top: 0.4rem;
}
.pagenation ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

}
.pagenation li {
  margin-right: 0.1rem;
  margin-bottom: 0.1rem;
  line-height: 2.2em;
  font-weight: bold;
  text-align: center;
  user-select:none;
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
}
.pagenation li.active {
  padding: 0 0.8em;
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.pagenation li a {
  display: block;
  padding: 0 0.8em;
  /* width: 100%; */
  /* height: 100%; */
  color: var(--clr-green);
  border: solid 2px var(--clr-green);
  transition-duration: 0.1s;
}
.pagenation li a:hover {
  text-decoration: none;
  color: var(--clr-white);
  background-color: var(--clr-green);
}
/*--------------------------------------------------------
footer
----------------------------------------------------------*/
.footer{
  margin-top: 1.0rem;
}
.footer .upper{
  /* 画面の端まで要素を伸ばす */
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
	width: 100vw;

  display: flex;
  justify-content: center;
  justify-content: space-around;
  align-items: center;
}
.footer .upper .to-all,
.footer .upper .to-back.left,
.footer .upper .to-back.right{
  width: 20%;
  text-align: center;
  font-size: var(--font-size-smaller);
  line-height: 2.5em;
}
.footer .upper .to-all{
  margin: 0 0.1rem;
}
.footer .upper .to-back a,
.footer .upper .to-all a{
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 1px;
  font-weight: bold;
  color: var(--clr-white);
  background-color: var(--clr-green);
  border: solid 2px var(--clr-green);
  transition-duration: 0.1s;
}
.footer .upper .to-back a{
  color: var(--clr-green);
  background-color: transparent;
}
.footer .upper .to-all a{
  box-shadow: 0px 0px 4px var(--clr-gray);
}
.footer .upper .to-all a:hover,
.footer .upper .to-back a:hover{
  text-decoration: none;
  color: var(--clr-white);
  background-color: var(--clr-green);
  opacity: 0.9;
}
.footer .lower{
  /* 画面の端まで要素を伸ばす */
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
	width: 100vw;
  margin-top: 1.0rem;
  position: relative;
  padding-top: 50px;
  padding-bottom: 5px;
  background-color: var(--clr-faint-gray);
  border-top-left-radius: 50% 40%;
  border-top-right-radius: 50% 40%;
}


.footer .logo-img-box{
  width: 200px;
  max-width: 80%;
  height: auto;
}
.footer .totop{
  position: absolute;
  top: calc(-40px);
  left: calc(50% - 80px / 2);
  display: inline-block;
  width: 80px;
  height: 80px;
  transition-duration: 0.1s;
  user-select: none;
  border-radius: 50%;
  background-color: var(--clr-white);
}
.footer .totop svg{
  border-radius: 50%;
  fill: var(--clr-light-gray);
  box-shadow: 0px 1px 2px var(--clr-gray);
  transition-duration: 0.1s;
}
.footer .totop svg:hover{
  fill: var(--clr-red);
  fill: var(--clr-green);
}
.footer .footer-link{
  margin-top: 10px;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  font-size: var(--font-size-smaller);
}
.footer .footer-link a{
  color: var(--clr-black);
}
.footer .footer-link li:not(:last-child){
  margin-right: 10px;
}
.footer .copyright{
  margin-top: 30px;
  text-align: left;
  font-size: var(--font-size-smallest);
}

/*--------------------------------------------------------
Contact Form 7用
----------------------------------------------------------*/
.wpcf7{
  margin: 0 auto;
  margin-top: 0.6rem;
  width: 100%;
}
.wpcf7 p{
  font-family: 'Noto Sans JP', 'Meiryo UI', sans-serif;  /*  Meiryoだと微妙に上にずれるのでMeiryo UIとする */
  margin-top: 0.2rem;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea{
	width: 100%;
	padding: 0.1rem;
	border-radius: 3px;
	border: solid 1px var(--clr-gray);
	background-color: var(-clr-white);
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 textarea:focus{
	border: solid 1px var(--clr-black);
}
.wpcf7 input[type="submit"]{
  padding: 0.2em 2em;
	border-radius: 3px;
  border: solid 1px var(--clr-black);
  transition-duration: 0.1s;
}
.wpcf7 input[type="submit"]:hover{
  color: var(--clr-white);
  border: solid 1px var(--clr-red);
  background-color: var(--clr-red);
}
span.wpcf7-list-item {
  display: block;
}
/*--------------------------------------------------------
Luminous Gallery用
----------------------------------------------------------*/
.lum-lightbox{
  z-index: 2;
}
.lum-gallery-button {
  display: none !important;
}
@media screen and (max-width: 460px) {
  .lum-lightbox-inner img {
    max-width: 160vw !important;  /* スワイプ一回で動かせる適量 */
    max-height: 85vh !important;  /* 90vhでもいいかもしれない */
  }
}
/*--------------------------------------------------------
mediaquery
----------------------------------------------------------*/
@media screen and (max-width: 550px) {
  :root{
    --font-size-largest: 18px;
    --font-size-larger: 17px;
    --font-size-normal: 16px;
    --font-size-smaller: 14px;
    --font-size-smallest: 14px;
  }
  html{
    font-size: 50px;
  }
  .header{
    box-shadow: none;
  }
}