@charset "utf-8";
/*===============================

	Bace

================================*/
body {
margin:0;
-webkit-appearance:none;
-webkit-text-size-adjust:100%;
}
a {
color:inherit;
text-decoration:none;
}
a:hover {
color:#bcbcbc;
/* transition: 0.5s; */
}

/* 画像　*/

/* .fas {
color:#3C3C3B
} */
/*===============================

	Type

================================*/

h1, h2, h3, h4, h5, h6 {
font-weight:600;
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
}

/*h1.type-B span, h2.type-B span, h3.type-B span, h4.type-B span, h5.type-B span, h6.type-B span {
background:url("../images/icon/circle01.png") no-repeat left 8px;
display:block;
font-weight:bold;
padding:5px 0 5px 20px;
}*/

h1.type-D {
font-family:'Montserrat', sans-serif;
font-size:100%;
font-weight:600;
letter-spacing:-1px;
line-height:1em;
margin-top:5px;
}

ul.type-B {
font-family:'Montserrat', sans-serif;
font-size:18px;
font-weight:600;
letter-spacing: -0.06em;
line-height:1em;
}

ul.type-J {
font-family:"M PLUS Rounded 1c";
}
h1.type-36 {
font-family:'Montserrat', sans-serif;
font-size:24px;          /* 見出しを全ページ24pxに統一（元は220%＝26.4px） */
font-weight:700;
letter-spacing:-1px;
line-height:0.8em;
margin-bottom:0px;
margin-top:0px;
padding:0em;
}

h1.type-46 {
font-family:'Montserrat', sans-serif;
font-size:24px;          /* 見出しを全ページ24pxに統一（元は260%＝31.2px） */
font-weight:700;
letter-spacing:-2px;
line-height:0.8em;
margin-bottom:0px;
margin-left:-0.05em;
margin-top:0px;
padding:0em;
-webkit-appearance:none;
}

h1.type-TTL {
font-family:'Montserrat', sans-serif;
font-size:240%;
font-weight:700;
letter-spacing:-2px;
line-height:0.8em;
margin-bottom:0px;
margin-left:-0.1em;
margin-top:0px;
padding:0em;
-webkit-appearance:none;
}

.type-x {
font-family:'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -0.05em;
text-transform: uppercase;
}
h1.title {
font-family: "M PLUS Rounded 1c";
font-size:12px;
font-weight:300;
line-height:2.0em;
}

.newMark {
font-family:'Montserrat', sans-serif;
font-weight:700;
letter-spacing: -0.05em;
}
.type-30 {
font-size:90%;
}

/*カテゴリのアカウント数*/	
.post-count {
margin-left: 0.2em;	
font-weight:600;
}
/*外部リンクにアイコン*/	
.content a[target=_blank] {
text-decoration:underline;/*下線を引く*/
/*padding-left: 12px;
background: url(../img/link-solid.svg) left center/10px auto no-repeat;画像*/
}
/*カエレバ*/	
.kaerebalink-image{
margin:0 0px 0px 0;
}
.kaerebalink-image img{
width: 85%;
}
.kaerebalink-box a {
font-size:90%;	
}

.searchhighlight{
background:rgba(7, 7, 7, 0.48);
}

.search-highlight {
	border-bottom:solid 2px #bcbcbc;
}

/*===============================

	Swiper

================================*/
.swiper-container {
background: #bcbcbc;
margin-left: auto;
margin-right: auto;
position: relative;
overflow: hidden;
margin-bottom: 20px;
margin-top: 10px;
/*border-radius:6px;*/
/*border: solid 2px #575649;/*実線*/
}
.swiper-slide .post__thumb--img {
margin: 0 0 0 0px;
}
.swiper-slide .post__thumb--img a {
padding-top: 75%;
width: 100%;
display: block;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.swiper-pagination{
margin-bottom: 10px;
}
.swiper-container .text-block {
position: absolute;/*絶対配置*/
font-family:'Montserrat', sans-serif;
font-weight:700;
top: 10px;
left: 10px;	
line-height: 1.2em;
}
.swiper-container .text-block a{
font-family: "M PLUS Rounded 1c";
font-weight:500;
}
.post__thumb--img {
/* filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");	 */
filter: grayscale(70%) contrast(92%);/*彩度を落とす（元は95%＝ほぼモノクロ）*/
-webkit-filter: grayscale(70%) contrast(92%);/*彩度を落とす（元は95%＝ほぼモノクロ）*/
}
.post__thumb--img:hover{
filter: none;/*画像をカラーに*/
transition: 1.5s;
-webkit-filter: grayscale(0%);/*画像をカラーに*/
}
.swiper-pagination-bullet {
 background:#292F33!important;
}
.swiper-button-next,
.swiper-button-prev {
	--swiper-navigation-color: #f2f2f2; /*ここに変更する色を指定*/
}

/*===============================

valuecommerceAD

================================*/

ins[style]{
background-color:transparent;
}
/*===============================

GoogleAD

================================*/

.googlead{
margin-top: 15px;
margin-bottom: 15px;
margin-left: 0px;
margin-right: 0px;
}
ins[style]{
background-color:transparent;
}
/*.googlead ins{
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");/*画像をモノクロに*/	
/*filter: grayscale(95%);/*画像をモノクロに*/
/*-webkit-filter: grayscale(95%);
}/*画像をモノクロに*/
/*.googlead ins:hover{
/*filter: none;/*画像をカラーに*/
/*ransition: 1.5s;
-webkit-filter: grayscale(0%);
}/*画像をカラーに*/

/*===============================

	PostNavi single.php

================================*/
.postnavi {
font-family: "M PLUS Rounded 1c";
padding-bottom:20px;
padding-top:10px;
}

.categories {
font-family:'Montserrat', sans-serif;
font-size:110%;
font-weight:700;
margin-top:0px;
line-height: 1.0em;
letter-spacing:-0.5px;
}

/*===============================

	SNSshre

================================*/
.sharebtn {
font-size:220%;
margin-top:0px;
padding-bottom :15px;
padding-top :20px;
}
.sharebtn ul {
margin-left:-10px;
text-align:left;
}
.sharebtn li a {
transition: 0.5s;
}
.sharebtn ul li {
display:inline-block;
margin-left:10px;
letter-spacing:-5px;
}
.twitter a:hover {color:#bcbcbc;} /* X（旧Twitter）。サイトのリンクと同じグレー（元は Twitter の青 #55acee） */
.facebook a:hover {color:#3B5998;}
.line a:hover {color:#1dcd00;}
.pin a:hover {color:#cb2027;}

/*===============================

	TopScroll

================================*/
#page-top {
bottom:90px;
position:fixed;
right:20px;
z-index:50;
margin:0;
}
/* クリックできる範囲（ボールは20pxで小さいので、押しやすいよう44×44pxに） */
#page-top a {
display:flex;
align-items:flex-end;       /* ボールを下寄せ。上の20pxはジャンプする分の空き */
justify-content:center;
width:44px;
height:44px;
}
#page-top .loader {
margin-top:0;               /* 上の空きは a の高さで確保しているので不要 */
}
/* 普段はボールを止めておく */
#page-top .loader::before,
#page-top .loader::after {
animation:none;
}
/* マウスオン（キーボード操作のフォーカス時も）でスライダーのローダーと同じ動き */
#page-top a:hover .loader::before,
#page-top a:focus-visible .loader::before {
animation:loader-shadow 1.1s infinite;
}
#page-top a:hover .loader::after,
#page-top a:focus-visible .loader::after {
animation:loader-jump 1.1s infinite;
}
/* OSで「視差効果を減らす」設定のときは、マウスオンでも動かさない */
@media (prefers-reduced-motion: reduce) {
#page-top a:hover .loader::before,
#page-top a:hover .loader::after,
#page-top a:focus-visible .loader::before,
#page-top a:focus-visible .loader::after {
animation:none;
}
}

/*===============================

	PageHeader

================================*/
.page-header {
/* background:#FCFCFC; */
position:static;
}
.page-header-inner {
margin-bottom:0px;
margin-top:30px;
}

/*===============================

	Footer

================================*/
.footer{
padding-bottom: 100px;
padding-top: 0px;
}
.footer-inner{
border-top: 0px solid rgb(153, 153, 153);
margin: auto;
margin-top: 50px;
padding-bottom: 60px;
padding-top: 0px;
}
/*  Copyright */ 
.copyright{
float: left;
font-family: 'Montserrat', sans-serif;
font-size: 90%;
font-weight: 700;
letter-spacing: 0px;
line-height: 1.2em;
padding-top: 0px;
text-transform: uppercase;
}
.copyright a{
}
.copyright a:hover{
color: #bdc3c7;
}

/*===============================

	Search

================================
.searchform02{
margin-top: 10px;
margin-bottom: 10px;
}
form#searchform input[type="text"]{
border: none;
border-bottom: 1px solid #000;
padding: 0px 0px;
}
form#searchform input[type="submit"]{
background: #ffffff;
border: none;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
font-weight: 700;
}
form#searchform input[type="submit"]:hover{
background: #ffffff;
color: #bdc3c7;
}*/
.searchform{
margin-top: 10px;
margin-bottom: 10px;
}
.search_container{
box-sizing: border-box;
}
.search_container input[type="text"]{
border: none;
border-bottom: 1px solid #000;
padding: 0px 0px;
overflow: hidden;
background-color: #FCFCFC;
}
.search_container input[type="text"]:focus {
outline: 0;
}
.search_container input[type="submit"]{
cursor: pointer;
font-family: FontAwesome;
font-size: 1.3em;
border: none;
background: none;
color: #2b2b2b;
outline : none;
display: inline-block;
vertical-align: middle;
}
input:-webkit-autofill {
box-shadow: 0 0 0 1000px #FCFCFC inset;
}

/*	Container 左右
================================*/
 .container03,
.page-header,
.footer {
padding-left: 20px;
padding-right: 20px;
}

/*	Container 上下
================================*/
.container03{
padding-bottom: 20px;
}
.container03-1{
padding-bottom: 20px;
}

.container03{
padding-top: 0px;
}

/*===============================

	News

================================*/

.news .content{
font-family: "M PLUS Rounded 1c";
padding-bottom: 10px;
padding-top: 30px;
}
.content p{
margin-top: 5px;
margin-bottom: 15px;
}
.news img{
margin-bottom: 10px;
}
.news img{
height: auto;
max-width: 100%;
vertical-align: bottom;
}

/*===============================
	
 PLUGIN WP-Page Navi　角丸
 
*=============================== */
.navigation{
clear: both;
font-size: 80%;
line-height: 20px;
padding: 15px 0;
}
.wp-pagenavi{
clear: both;
font-size: 80%;
font-family:'Montserrat', sans-serif;
}
 .wp-pagenavi span {/*全体の指定*/
color: #2b2b2b;
background-color: #FCFCFC;
border: solid 1px #c4c4c4;/*ボーダ色*/
padding: 5px 5px;
margin: 0 2px;
white-space: nowrap;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: 0.2s ease-in-out;
-moz-transition: 0.2s ease-in-out;
-o-transition: 0.2s ease-in-out;
transition: 0.2s ease-in-out;
text-align: center;
text-decoration:none;
}

/*===============================

	Newsinfor Navi　角丸

================================
.catall_pagenavi{
clear: both;
line-height: 20px;
margin-top: 30px;
padding: 15px 0;
}
.catall_pagenavi .current{
background-color: #333;
border-radius: 3px;
color: #FCFCFC;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
-moz-border-radius: 3px;
padding: 3px 4px;
-webkit-border-radius: 3px;
}
.catall_pagenavi a, .catall_pagenavi span{
border: 1px solid #bfbfbf;
font-family: 'Montserrat', sans-serif;
font-size: 100%;
margin: 0px;
-moz-border-radius: 3px;
padding: 3px 4px;
text-decoration: none;
-webkit-appearance: none;
-webkit-border-radius: 3px;
}
.catall_pagenavi a:hover, .catall_pagenavi span.current{
border-color: #000;
-webkit-appearance: none;
}
.catall_pagenavi span.current{
font-weight: bold;
-webkit-appearance: none;
}*/

/*===============================

	ContactForm7-2

================================*/
.wpcf7{width: 100%;}

/* .form-width { max-width: 100%;} */
.wpcf7 form input[type="text"],
.wpcf7 form textarea{
width: 400px; 
/* background-color: #ffcfba; */
border: none;
border: 0px solid #6e6e6e;
color: #666;
padding: 10px 0px;
background-color: #F2f2f2;
/* background-color: #FCFCFC; */
height: 15px;
border-radius:5px;
}
.wpcf7 form p {
text-transform: uppercase;
border-bottom: 0px solid #000;
color: #666;
padding-bottom: 0;
}
.wpcf7 form input[type="email"]{
border: none;
border: 0px solid #6e6e6e;
color: #666;
font-size: 100%;
padding: 10px 0px;
vertical-align: text-bottom;
background-color: #F2f2f2;
width: 400px;
height: 15px;
border-radius:5px;
}
.wpcf7{
font-size: 100%;
font-weight: 600;
font-family: 'Montserrat', sans-serif;
}
.wpcf7 form textarea{

line-height: 180%;
height: 15px;
}
.wpcf7 form input[type="submit"]{
background: #FCFCFC;
border: none;
color: #333;
cursor: pointer;
font-size: 16px;
font-weight: 700;
height: 40px;
letter-spacing: -1px;
margin-top: 20px;
-moz-transition: background-color 0.2s linear;
-o-transition: background-color 0.2s linear;
-webkit-transition: background-color 0.2s linear;
}
.wpcf7 form input[type="submit"]:hover{
color: #bdc3c7;
}
.wpcf7 .noline{
border-bottom: 0px solid #000;
}
.wpcf7-response-output {
width: 400px;
font-weight: normal;	
background: #FCFCFC;
border-radius: 15px;
border: 0px;
line-height: 25px;
text-align: center;
}
span.wpcf7-not-valid-tip {
color: #f00;
font-size: 1em;
font-weight: normal;
display: block;
position: absolute;
top: 0;
width: 400px;
text-align:right;
}
.div .wpcf7-mail-sent-ok {
border: 0px solid #398f14;
}

/*===============================
	
  Blog Card
  
================================*/

/*===============================
	
  Post List
  
================================*/

/*===============================
	
  Post List02
  
================================*/
.postlist02 {
font-family: "M PLUS Rounded 1c"; 
/* background: #FCFCFC; */
border-top:dashed 0px #292F33;/*点線*/
border-bottom:dashed 0px #292F33;/*点線*/
word-wrap:break-word;
max-width:100%;
border-radius:0px;
margin-top: 10px;
margin-bottom: 15px;
padding-left: 0px;
padding-right: 0px;
padding-top: 10px;
padding-bottom: 0px;
/* sp用 ※4 */
}

.postlist02 a {
text-decoration: none;
}
.postlist02-title {
display: block;
}

.postlist02-content {
line-height:120%;
}
.postlist02-title {
font-size:100%;
line-height: 1.5em;
}
.postlist02-excerpt {
color:#333;
line-height: 1.5em;
}
.postlist02 .clear {
clear: both;
}

/*===============================

Post List03

================================*/

/*===============================
	
  Post List04
  
================================*/

/*===============================

	Comments

================================*/
/*===============================

	Comments

================================*/

/*===============================
  ===============================
	RESPONSIVE 設定
  ===============================
================================*/

/*===============================

	Less than 767

================================*/
@media (max-width: 767px) {

/*トリミング.thumbnail01 img {
height: 300px;
object-fit: cover; 
}*/
h1.type-46{
font-size: 24px;         /* スマホも24px（元は260%） */
}
h1.type-36{
font-size: 24px;         /* スマホも24px（元は200%） */
}

h1.type-TTL {
font-size:330%;
}
.container03{
padding-top: 0px;
}
.container03-1{
margin-top: 30px;
}

/*.googlead {
margin-left: 1em;
margin-right: 1em;	
}*/

.page-header-inner{
margin-top: 30px;
padding-bottom: 10px;
}

.wpcf7-response-output {
width: 100%;
}
.wpcf7 form input[type="email"]{
width: 100%;
}
.wpcf7{width: 100%;}
.wpcf7 form textarea{
width: 100%;
}
.wpcf7 form input[type="text"]{
width: 100%;
}

}

/*===============================

	Over 768px

================================*/
@media (min-width: 768px) {

.page-header-inner{
width: 100%;
}

.container03:after{
clear: both;
content: "";
display: block;
}
.container03-1{
box-sizing: border-box;
float: left;
margin-top: 90px;
-moz-box-sizing: border-box;
padding-right: 80px;
-webkit-box-sizing: border-box;
width: 75%;
}

}

/*===============================

	Over 960px

================================*/
@media (min-width: 960px) {
/*  PageHeader */ 
.page-header-inner{
height: 60px;
margin-bottom: 0px;
margin-top: 30px;
} 
/*  Container */ 
 .container03,
.page-header,
.footer {
margin-left: auto;
margin-right: auto;
width: 960px;
}

/*  Type */ 

}

/*===============================

	HIDE ADS FOR ADMIN

================================*/
/* ログイン中に広告の代わりに出る「HIDE ADS FOR ADMIN」（アイコンも含む）を薄いグレーに
   ・.type-x はリンク（MORE など）でも使っているので、🚫アイコン（.fa-ban）を含む p だけを対象にする
   ・:has() は Safari 15.4 / Chrome 105 / Firefox 121 以降で有効（ログイン中の管理者にしか表示されないので問題なし） */
p.type-x:has(> .fa-ban) {
color: #bcbcbc;
}

/*===============================

	右メニュー：PCで中身を右へ寄せる（試し）
	・枠（.container03-2 の幅20%）はそのまま。枠ごとコンテナの右端へ寄せる
	・中身を「一番長い行の幅」でひとまとめにして枠の右端へ。文字は左詰めのまま
	・件数が増えて一番長い行が伸びると、その分だけ全体が左に戻る
	・元に戻すときは、このブロックを丸ごと削除

================================*/

/*===============================

	大見出し＋小見出しを1行に（例：GOODS_CATEGORIES）
	・大見出し（h1.type-46）のすぐ後ろに小見出し（h1.type-36）がある場合だけ
	  （カテゴリ・タグ・年別・記事・検索のページ）
	・間はアンダーバーですき間なし。小見出しのアイコンは非表示（PHPには残している）
	・:has() は Safari 15.4 / Chrome 105 / Firefox 121 以降。古いブラウザでは今までどおり2行

================================*/
/* 大見出しを左に回り込ませ、小見出しをそのすぐ右に置く（h1 の間の改行がすき間にならないように float を使う） */
h1.type-46:has(+ h1.type-36) {
float: left;
}
h1.type-46 + h1.type-36 {
display: flow-root;       /* 大見出しの右に並ぶ */
}
h1.type-46 + h1.type-36::before {
content: "_";             /* アンダーバーでつなぐ（例：GOODS_CATEGORIES）。すき間なし */
}
h1.type-46 + h1.type-36 i {
display: none;            /* アイコンを非表示 */
}
/* 見出しの次の要素は、回り込みを解除して下の行から始める */

/*===============================

	Font Awesome 7 の調整
	・7 からはアイコンが全部同じ幅（1.25em）になるので、6 までと同じ「形に合わせた幅」に戻す

================================*/
:root {
--fa-width: auto;
}
/* LINE のアイコンは 7 で他の四角いSNSアイコンより一回り大きい（描画 27×28px、他は 24×24px）ので、
   0.875倍にして X・Facebook・Pinterest と同じ大きさ（24×24px）にそろえる */

/* ---- ロゴ（NOTHING TO LOSE）の下のコピーライト（header.php。footer.php から移動） ----
   書式はフッターの .copyright と同じ（float だけなし）
   ※ 前はここにキャッチコピー「BUY FIRST, REGRET LATER」（.site-tagline・Montserrat 13.2px / 400）を置いていた */
.header-copyright {
  font-family: 'Montserrat', sans-serif;
  font-size: 90%;
  font-weight: 400;          /* 少し細く（フッターの .copyright は700）。字間（letter-spacing: 0）は変えない */
  letter-spacing: 0px;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 4px 0 0;           /* ロゴとの間 */
}

/* コピーライトの横のテーマ名（THEMES/○○）。間隔を空けて同じ行に */
.header-copyright__theme {
  margin-left: 1.2em;
}

/* ---- ヘッダーメニュー（header.php・コピーライトの下） ----
   ・書式はコピーライト・フッターと同じ：Montserrat・10.8px・700・大文字（記事以外は太め、記事の中身は細め のルール）
   ・横1行に並べて、項目の間はすき間だけ（「 / 」はなし）
   ・リンクの色は普通の文字と同じ（ホバーで初めて分かる。コピーライトのリンクと同じ #bdc3c7） */
.header-menu__list {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 10px 0 0;          /* コピーライトとの間（4px・20px・30px も試した） */
  padding: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 90%;            /* コピーライト・フッター（PRIVACY POLICY / PROFILE）と同じ 10.8px。13.2px・12px も試した */
  font-weight: 700;          /* 記事以外（サイトの枠）は太め。400 も試した */
  letter-spacing: 0px;
  line-height: 1.2em;
  text-transform: uppercase;
  gap: 0 1.2em;              /* 項目の間 */
}
.header-menu__list li {
  margin: 0;
  padding: 0;
}
.header-menu__list a {
  color: inherit;
  text-decoration: none;
}
.header-menu__list a:hover {
  color: #bdc3c7;
}

/* ---- パンくずリスト（header.php・メニューの下。footer.php から移動） ----
   書式はコピーライト（.header-copyright）と同じ：Montserrat・10.8px・400・大文字 */
.header-breadcrumb {
  font-family: 'Montserrat', sans-serif;
  font-size: 90%;
  font-weight: 400;
  letter-spacing: 0px;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 4px 0 0;           /* メニューとの間（ロゴとコピーライトの間と同じ。前は10px） */
}
.header-breadcrumb a:hover {
  color: #bdc3c7;
}

/* ---- パンくずの最初（ホーム「NOTHING TO LOSE」）を家のアイコンにする ----
   ・Breadcrumb NavXT の出力は <a class="home"><span>NOTHING TO LOSE</span></a>
   ・文字は画面から隠す（読み上げソフトには「NOTHING TO LOSE」と伝わるよう、消さずに見えなくする）
   ・アイコンは Font Awesome 7 の house（fa-house・\f015）を CSS で出す。プラグインの設定は変えない */
.header-breadcrumb a.home {
  position: relative;
}
.header-breadcrumb a.home > span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.header-breadcrumb a.home::before {
  content: "\f015";
  font-family: "Font Awesome 7 Free";
  font-weight: 900;          /* 900 ＝ 塗りつぶし（solid）の家 */
  font-style: normal;
}

/* ---- フッターの PRIVACY POLICY と PROFILE（footer.php・検索欄の下） ----
   ・「 / 」はやめて、すき間だけ（ヘッダーメニューの項目の間と同じ 1.2em） */

/* ---- サブのリンク PRIVACY POLICY・PROFILE（header.php・メニューの下。footer.php から移動） ----
   ・メインのメニューではないので控えめに：コピーライトと同じ Montserrat・10.8px・400・大文字
   ・項目の間はメニューと同じ 1.2em */
.header-sublinks {
  font-family: 'Montserrat', sans-serif;
  font-size: 90%;
  font-weight: 700;          /* メニューと同じ太さに揃えた（前は 400。メニューと1行に並べたため） */
  letter-spacing: 0px;
  line-height: 1.2em;
  text-transform: uppercase;
  margin: 4px 0 0;           /* メニューとの間（ロゴとコピーライトの間と同じ） */
}
.header-sublinks a {
  color: inherit;
  text-decoration: none;
}
.header-sublinks a + a {
  margin-left: 1.2em;
}
.header-sublinks a:hover {
  color: #bdc3c7;
}

/* ---- スマホ（幅639px以下）のヘッダー ----
   ・ロゴ（NOTHING TO LOSE）を1行に収める：画面の幅に合わせて文字の大きさを変える（最大は今までと同じ 39.6px）
     幅390px（iPhone）で約38.6px・幅375px（iPhone SE）で約37px。前は 39.6px 固定で「LOSE」だけ2行目に落ちていた
   ・コピーライトの行：テーマ名（THEMES/○○）を2行目に送る（「LOSE」だけ落ちる中途半端な折り返しをなくす） */
@media (max-width: 639px) {
  .page-header h1.type-TTL {
    font-size: min(39.6px, calc((100vw - 10px) * 0.1015));
  }
  .header-copyright__theme {
    display: block;
    margin-left: 0;
  }
}

/* ---- スマホの折りたたみメニュー（header.php の .header-menu-toggle・.header-nav） ----
   ・PC（幅640px以上）：ボタンは出さず、メニューは今まで通り2段の横並び
   ・スマホ（幅639px以下）：「MENU」の文字だけ出し、押すと6項目が縦に開く（開くと「CLOSE」）
   ・書式はメニューと同じ：Montserrat・10.8px・700（サブの PRIVACY POLICY・PROFILE は 400 のまま）
   ・押せる高さは1項目 約35px（文字の上下に 11px ずつ余白） */
.header-menu-toggle {
  display: none;
}
@media (max-width: 639px) {
  .header-menu-toggle {
    display: block;
    margin: -2px 0 0;            /* 上の余白 12px と合わせて、コピーライト 〜 MENU の文字 ＝ 前のメニューと同じくらい */
    padding: 12px 0;             /* 押せる高さ（約37px） */
    border: 0;
    background: transparent;
    color: inherit;
    font-family: 'Montserrat', sans-serif;
    font-size: 10.8px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.2em;
    text-transform: uppercase;
    cursor: pointer;
  }
  .header-menu-toggle:hover {
    color: #bdc3c7;
  }
  /* 開け閉めは「にゅるっと」：高さ（max-height）を 0 ⇔ 260px で 0.4秒かけて変える
     ・260px は6項目（35px × 6 ＝ 210px）より少し大きめ。項目を増やすときはここも増やす
     ・閉じているときは visibility: hidden で、見えないリンクにタブキーで移動しないようにする（閉じ終わってから隠す） */
  .header-nav {
    max-height: 0;
    overflow: hidden;
    visibility: hidden;
    transition: max-height 0.4s ease, visibility 0s linear 0.4s;
  }
  .header-nav.is-open {
    max-height: 260px;
    visibility: visible;
    transition: max-height 0.4s ease, visibility 0s;
  }
  /* 縦に1項目ずつ */
  .header-nav .header-menu__list {
    display: block;
    margin: 0;
  }
  
  .header-nav .header-menu__list a {
    display: block;
    padding: 11px 0;
  }
  
}

/* ---- PC（幅640px以上）：メニューとサブのリンク（PRIVACY POLICY・PROFILE）を1行に並べる ----
   ・前は2段（メニュー／サブのリンク）
   ・間隔はメニューの項目の間と同じ 1.2em。太さはそのまま（メニュー 700・サブ 400） */
@media (min-width: 640px) {
  .header-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 1.2em;
    margin-top: 12px;          /* V15.1：ロゴ 〜 メニュー ＝ 約6px（前は 16px で約10px。コピーライトをフッターに戻したため） */
  }
  .header-nav .header-menu__list {
    margin-top: 0;
    margin-bottom: 0;
  }
}

/* 商品リンクの箱（[itembox]・ITEM ブロック）の書式は css/itembox.css に移した（記事の編集画面でも同じ見た目にするため） */

/* テスト：ショップのリンク（YAHOO AMAZON RAKUTEN）の頭に外部リンクのアイコン
   ・Font Awesome 7 の arrow-up-right-from-square（\f08e）。REFERENCE と同じ形
   ・商品一覧（ITEMS）。自作の箱 [itembox] の分は css/itembox.css */
.items-shops a::before {
  content: "\f0c1";         /* 鎖（カード・SHARE と同じ。前は外部リンク \f08e） */
  font-family: "Font Awesome 7 Free";
  font-weight: 900;
  font-size: 0.85em;
  margin-right: 0.2em;
  letter-spacing: 0;
}

/* ---- スクロールバーの場所をどのページでもいつも空けておく（V15.1） ----
   ・前は loader-walker.css（トップと記事ページだけ読み込み）にだけあった
   ・ほかのページ（短いページ・フェードイン中のページ）はスクロールバーがない → ページが約7.5px 右にずれる
     → トップへ戻ったときにロゴが一瞬動いて見えた（トップ ⇔ 記事ページは両方に指定があるのでずれない）
   ・全ページで空けておけば、スクロールバーがあってもなくても、ロゴの位置は変わらない */
html {
  scrollbar-gutter: stable;
}