/* @media (hover: hover) and (pointer: fine){} */
:root{
  /* 【メインナビ】 */
  /* フォント、矢印記号 */
  --mainNav-font: rgb(51, 51, 51);
  /* フォント、矢印記号（hover） */
  --mainNav-font-hover: rgb(255, 255, 255);
  /* ボーダー */
  --mainNav-border: rgb(255, 255, 255);

  /* 背景色（一層目） */
  --mainNav-bg-layer1: rgb(251, 177, 66);
  /* 背景色（二層目） */
  --mainNav-bg-layer2: rgba(245, 236, 214, 0.8);
  /* 背景色（二層目）hover */
  --mainNav-bg-layer2-hover: rgba(151, 151, 151, 0.8);

  /* 【スライドナビ】 */
  /* フォント、矢印記号 */
  --sideNav-font: rgb(51, 51, 51);
  /* ボーダー */
  --sideNav-border: rgb(151, 151, 151);

  /* 背景色全体 */
  --sideNav-bg: rgb(255, 255, 255);
  /* 背景色 */
  --sideNav-bg-layer: rgb(255, 255, 255);
  /* 背景色（hover） */
  --sideNav-bg-layer-hover: rgb(240, 240, 240);


  /* 【ハンバーガー】 */
  --burger-font: rgb(255, 255, 255);
  --burger-bg: rgb(255, 152, 0);


  --main-color:rgb(255, 152, 0);
  --base-color:rgb(253, 237, 227);
  --accent-color:rgb(0, 145, 255);
  /* 【フォント】 */
  --font-L:rgb(0, 0, 0);
  --font-M:rgb(51, 51, 51);
  --font-S:rgb(102, 102, 102);

  --white:rgb(255, 255, 255);
  --gray:rgb(151, 151, 151);
  --black:rgb(0, 0, 0);

  /* faq */
  --bg1:rgba(245, 236, 214, 0.8);

  /* faq */
  --border1:rgb(204, 204, 204);
}


/* //基本設定 */
html{
  /* width:**pxをmarginを含めたものにする */
  box-sizing: border-box;
  font-size: 10px;
  color: var(--font-M);
  /* pc: 16px-18px
  タブレット: 15-17px
  スマホ: 14-16px */
}

html, body{
  /* コンテンツが画面幅をはみ出していた場合でも横スクロールを発生させない */
  overflow-x: hidden;
  /* font */
  font-family: "Noto Sans JP", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  /* end-font */
}

/* h1を70pxとする */
h1{
  font-size: 7rem;
}
/* h2を70pxとする */
h2{
  font-size: 2rem;
}
/* 以下は16pxとする */
p, ul, ol, span, label, input, textarea, summary, div{
  font-size: 1.6rem;
}
a{
  color: var(--font-M)
}
a:visited {
  color: var(--font-M)
}
/* ////基本設定 */



/* //ヘッダーコンテナ */
#header{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  width: 100%;
  height: 120px;
  padding-left: 50px;
  padding-right: 50px;
  margin-top: 25px;
}

/* ロゴ（h1タグ） */
#header > h1{
  margin: 0;
}

/* ロゴ（aタグ） */
#header > h1 > a{
  display: block;
}

/* ロゴ（imgタグ） */
#header > h1 > a > img{
  width: 100px;
}


/* //メインナビメニュー */
/* navタグ */
#main-nav{
  width: 820px;
}

/* ulタグ */
/* 1層目 */
#main-nav > ul{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  text-align: center;
}

/* liタグ */
/* ulの２層目以降のpositionの起点 */
/* has-sub-listクラスを追加したliは「記号」が付く */
#main-nav li.has-sub-list{
  position: relative;
}

/* ulタグ */
/* 2層目 */
/* 「#main-nav li.has-sub-list」の基点から配置する */
#main-nav > ul > li.has-sub-list > ul{
  position: absolute;
  top: 100%;
  left: 0px;
  z-index: 1;

  margin-top: 2px;

  /* ホバーで表示・非表示の切り替え */
  opacity: 0;
  visibility: hidden;
  transition: all 1s;
}

/* ulタグ */
/* 2層目 */
/* ホバーで表示・非表示の切り替え */
@media (hover: hover) and (pointer: fine) {
 #main-nav > ul > li.has-sub-list:hover > ul{
  opacity: 1;
  visibility: visible;
}
}

/* aタグ */
/* 1層目 */
#main-nav > ul > li > a{
  /* 擬似クラスのposition */
  position: relative;

  display: flex;
  flex-direction: column;

  padding: 15px 25px;

  color: var(--mainNav-font);
  white-space: nowrap;
}

/* aタグ */
/* 1層目 */
/* 擬似クラスで背景色等を設定（width:0%, opacity:0） */
/* ホバー処理で（width:100%, opacity:1）にして背景色を表示する */
#main-nav > ul > li > a::after{
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;

  width: 0%;
  height: 100%;

  background-color: var(--mainNav-bg-layer1);
  opacity: 0;
}

/* aタグ */
/* 1層目 */
/* 擬似クラスで背景色を設定（width:100%, opacity:1） */
/* li.current要素は「Home」のこと */
#main-nav > ul > li.current > a::after{
  width: 100%;
  opacity: 1;
  animation: bgappear 0.5s forwards;
}

/* aタグ */
/* 1層目 */
/* ホバー処理 */
/* 擬似クラスで背景色を設定（width:100%, opacity:1） */
@media (hover: hover) and (pointer: fine) {
#main-nav > ul > li > a:hover::after{
  width: 100%;
  opacity: 1;
  animation: bgappear 0.5s forwards;
}
}

@keyframes bgappear{
  0%{
    width: 0%;
    height: 1px;
  }
  50%{
    width: 100%;
    height: 1px;
  }
  100%{
    width: 100%;
    height: 100%;
    background-color: var(--mainNav-bg-layer1);
  }
}

/* aタグ */
/* 1層目 */
/* ホバーでフォントカラーを白にする */
/* li.current要素は「Home」のこと */
#main-nav > ul > li.current > a{
  color: var(--mainNav-font-hover);
  z-index: 1;
}

/* aタグ */
/* 1層目 */
/* ホバーでフォントカラーを白にする */
@media (hover: hover) and (pointer: fine){
#main-nav > ul > li > a:hover{
  color: var(--mainNav-font-hover);
  z-index: 1;
}
}

/* aタグ */
/* 1層目 */
/* 擬似クラスで矢印記号の設定 */
#main-nav > ul > li.has-sub-list > a::before{
  content:'';
  position: absolute;
  left: 50%;
  top: 85%;

  width: 6px;
  height: 6px;
  border-top: 2px solid var(--mainNav-font);
  border-right: 2px solid var(--mainNav-font);
  transform: translate(-50%, -50%) rotate(135deg);
}

/* aタグ */
/* 1層目 */
/* ホバーで擬似クラスの矢印記号を白にする */
#main-nav > ul > li.has-sub-list > a:hover::before {
  border-top: 2px solid var(--mainNav-font-hover);
  border-right: 2px solid var(--mainNav-font-hover);
}


/* aタグ */
/* 2層目 */
#main-nav > ul > li > ul > li> a{
  /* 擬似クラスのposition */
  position: relative;

  display: flex;
  flex-direction: column;
  
  padding: 10px 25px;
  border-bottom: 1px solid var(--mainNav-border);

  color: var(--mainNav-font);
  background-color: var(--mainNav-bg-layer2);

  white-space: nowrap;
}

/* aタグ */
/* 2層目 */
/* ホバーでフォントカラーを白にする */
#main-nav > ul > li > ul > li > a:hover{
  color: var(--mainNav-font-hover);
  background-color: var(--mainNav-bg-layer2-hover);
}

/* aタグ */
/* 2層目 */
/* 最下の項目の下線を非表示 */
#main-nav > ul > li > ul > li:last-child > a{
  border-bottom: none;
}


/* <a href="">の場合の処理 */
#main-nav a[href=""]:hover {
  cursor: default;
}

/* span要素の基本設定 */
#main-nav .sub-title{
  font-size: 12px;
  margin-top: 10px;
}
/* ////メインナビメニュー */
/* ////ヘッダーコンテナ */



/* //サイドナビメニュー */
#side-nav{
  position: fixed;
  top: 0;
  right: -30vw;
  z-index: 7000;

  width: 30vw;
  height: 100vh;
  background-color: var(--sideNav-bg);
  
  opacity: 0;
  visibility: hidden;

  transition: all 1.0s;
}

#side-nav.open{
  right: 0vw;

  opacity: 1;
  visibility: visible;
}

/* ulタグ */
/* 1層目 */
#side-nav > ul{
  position: absolute;
  top: 150px;
  left: 50%;
  transform: translateX(-50%);

  width: 90%;
}

/* ulタグ */
/* 2層目 */
#side-nav > ul > li > ul{
  display: none;
}

/* ulタグ */
/* 3層目 */
#side-nav > ul > li > ul > li > ul{
  display: none;
}

/* aタグ */
/* 1層目 */
#side-nav > ul > li > a{
  /* 擬似クラスのposition */
  position: relative;

  display: block;

  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 35px;

  color: var(--sideNav-font);
  background-color: var(--sideNav-bg-layer);

  white-space: nowrap;

  border-bottom: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 1層目 */
/* 線を付ける */
#side-nav > ul > li:first-child > a{
  border-top: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 1層目 */
/* ホバーで背景色を変更 */
#side-nav > ul > li > a:hover{
  background-color: var(--sideNav-bg-layer-hover);
}

/* aタグ */
/* 1層目 */
/* 子ulを持っているliのaタグが対象 */
/* 擬似クラスで矢印記号の設定 */
#side-nav > ul > li.has-sub-list > a::before{
  content:'';
  position: absolute;
  left: 20px;
  top: 50%;

  width: 6px;
  height: 6px;
  border-top: 2px solid var(--sideNav-font);
  border-right: 2px solid var(--sideNav-font);
  transform: translate(-50%, -50%) rotate(135deg);
}

/* aタグ */
/* 1層目 */
/* 子ulを持っているliのaタグが対象 */
/* 擬似クラスで記号の設定 */
/* jsでrotationクラスを付与して、記号を回転させる */
#side-nav > ul > li.has-sub-list > a.rotation::before{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* aタグ */
/* 2層目 */
#side-nav > ul > li > ul > li > a{
  /* 擬似クラスのposition */
  position: relative;

  display: block;
  
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 50px;

  color: var(--sideNav-font);
  background-color: var(--sideNav-bg-layer);
  
  white-space: nowrap;

  border-bottom: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 2層目 */
/* ホバーで背景色を変更*/
@media (hover: hover) and (pointer: fine){
#side-nav > ul > li > ul > li > a:hover{
  background-color: var(--sideNav-bg-layer-hover);
}
}

/* aタグ */
/* 2層目 */
/* 子ulを持っているliのaタグが対象 */
/* 擬似クラスで記号の設定 */
#side-nav > ul > li.has-sub-list > ul > li.has-sub-list > a::before{
  content:'';
  position: absolute;
  left: 20px;
  top: 50%;

  width: 6px;
  height: 6px;
  border-top: 2px solid var(--sideNav-font);
  border-right: 2px solid var(--sideNav-font);
  transform: translate(-50%, -50%) rotate(135deg);
}

/* aタグ */
/* 2層目 */
/* 子ulを持っているliのaタグが対象 */
/* 擬似クラスで記号の設定 */
/* jsでrotationクラスを付与して、記号を回転させる */
#side-nav > ul > li.has-sub-list > ul > li.has-sub-list > a.rotation::before{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* aタグ */
/* 3層目 */
#side-nav > ul > li > ul > li > ul > li > a{
  /* 擬似クラスのposition */
  position: relative;

  display: block;
  
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 65px;

  color: var(--sideNav-font);
  background-color: var(--sideNav-bg-layer);
  
  white-space: nowrap;

  border-bottom: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 3層目 */
/* ホバーで背景色を変更 */
@media (hover: hover) and (pointer: fine){
#side-nav > ul > li > ul > li > ul > li > a:hover{
  background-color: var(--sideNav-bg-layer-hover);
}
}

/* aタグ */
/* 3層目 */
/* 子ulを持っているliのaタグが対象 */
/* 擬似クラスで記号の設定 */
#side-nav > ul > li.has-sub-list > ul > li.has-sub-list > ul > li.has-sub-list > a::before{
  content:'';
  position: absolute;
  left: 20px;
  top: 50%;

  width: 6px;
  height: 6px;
  border-top: 2px solid var(--sideNav-font);
  border-right: 2px solid var(--sideNav-font);
  transform: translate(-50%, -50%) rotate(135deg);
}

/* aタグ */
/* 3層目 */
/* 子ulを持っているliのaタグが対象 */
/* 擬似クラスで記号の設定 */
/* jsでrotationクラスを付与して、記号を回転させる */
#side-nav > ul > li.has-sub-list > ul > li.has-sub-list > ul > li.has-sub-list > a.rotation::before{
  transform: translate(-50%, -50%) rotate(-45deg);
}


/* span要素の基本設定 */
#side-nav .main-title{
  margin-right: 8px;
}

/* span要素の基本設定 */
#side-nav .sub-title{
  font-size: 12px;
  margin-top: 4px;
}
/* ////サイドナビメニュー */

/* //フッターコンテナ */
/* 最背面の背景色 */
#footer-contaier{
  background-color: var(--white);
}

/* 背景に画像を設定 */
/* clip-pathで曲線の切り抜きを行う */
#footer{
  position: relative;

  width: 100%;
  padding-top: 120px;

  background: linear-gradient(
    rgba(255, 255, 255, 0.3), 
    rgba(255, 255, 255, 0.3)),
    url("/wp-content/themes/virtuality-FitnessGym_WP/images/footer.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;

  -webkit-clip-path: ellipse(120% 100% at 50% 100%);
  clip-path: ellipse(120% 100% at 50% 100%);
}

/* 「#sub-footer__left」と「#sub-footer__right」を横並びにする */
#sub-footer{
  display: flex;
  justify-content: center;
}

/* ロゴとsnsアイコンの親要素 */
#sub-footer__left{
  width: 50%;
  text-align: center;
}

/* ロゴ */
#footer-logo img{
  width: 180px;
}

/* アイコン */
#footer-sns{
  display: flex;
  justify-content: center;

  margin-top:15px;
}

/* アイコン（aタグ） */
.footer-sns__link{
  margin-left: 15px;
  margin-right: 15px;

  font-size: 27px;

  transition: all .3s ease;
}

/* アイコン（aタグ）ホバー時の処理 */
@media (hover: hover) and (pointer: fine){
.footer-sns__link:hover{
  color: var(--main-color);

  transform: scale(1.3);
}
}

#sub-footer__right{
  width: 50%;
}


/* //フッターナビメニュー */
/* navタグ */
#footer-nav{
  width: 60%;
}

/* aタグ */
/* 1層目 */
#footer-nav > ul > li > a{
	/* 擬似クラスのposition */
	position: relative;

	display: block;
  
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 35px;

	color: var(--sideNav-font);

	white-space: nowrap;

	border-bottom: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 1層目 */
/* 線を付ける */
#footer-nav > ul > li:first-child > a{
  border-top: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 1層目 */
/* 擬似クラスで矢印記号の設定 */
#footer-nav > ul > li > a::before{
	content:'';
	position: absolute;
	left: 20px;
	top: 50%;

	width: 5px;
	height: 5px;
	border-top: 2px solid var(--font-M);
	border-right: 2px solid var(--font-M);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* aタグ */
/* 2層目 */
#footer-nav > ul > li > ul > li > a{
	/* 擬似クラスのposition */
	position: relative;

	display: block;
	
	padding-top: 15px;
	padding-bottom: 15px;
	padding-left: 50px;

	color: var(--sideNav-font);
	
	white-space: nowrap;

	border-bottom: 1px solid var(--sideNav-border);
}

/* aタグ */
/* 2層目 */
/* 擬似クラスで矢印記号の設定 */
#footer-nav > ul > li > ul > li > a::before{
	content:'';
	position: absolute;
	left: 35px;
	top: 50%;

	width: 5px;
	height: 5px;
	border-top: 2px solid var(--font-M);
	border-right: 2px solid var(--font-M);
	transform: translate(-50%, -50%) rotate(45deg);
}

/* <a href="">の場合の処理 */
@media (hover: hover) and (pointer: fine){
#footer-nav a[href=""]:hover {
  cursor: default;
}
}

/* span要素の基本設定 */
#footer-nav .main-title{
	margin-right: 8px;
}

/* span要素の基本設定 */
#footer-nav .sub-title{
  font-size: 12px;
	margin-top: 4px;
}
/* ////フッターナビメニュー */


/* コピーライト */
.copyright{
  padding-top: 40px;
  padding-bottom: 20px;

  text-align: center;
}
/* ////フッターコンテナ */


/* //ブログページ */
#main{
  position: relative;

  margin-bottom: 200px;
}

/* //ヘッダーバンド */
#headband{
  position: absolute;
  top: -10px;

  width: 100%;
  height: 300px;

  display: flex;
  justify-content: center;
  align-items: center;

  text-align: center;
}
#headband::after{
  content: "";
  position: absolute;
  inset: 0;

  /* background: linear-gradient( 
    rgba(80, 80, 80, 0.1)),
    url("/wp-content/themes/virtuality-FitnessGym_WP/images/another_weight.jpg"); */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  z-index: -1;
}


/* スタッフブログの背景画像 */
.bg-blog::after{
  background: linear-gradient( 
    rgba(80, 80, 80, 0.1)),
    url("/wp-content/themes/virtuality-FitnessGym_WP/images/another_weight.jpg");
}

/* イベントの背景画像 */
.bg-event::after {
  background: linear-gradient(
  rgba(80, 80, 80, 0.1)),
  url("/wp-content/themes/virtuality-FitnessGym_WP/images/another_balloon.jpg");
}

/* それ以外の背景画像 */
.bg-default::after {
  background: linear-gradient(
  rgba(80, 80, 80, 0.1)),
  url("/wp-content/themes/virtuality-FitnessGym_WP/images/another_luis-reyes-mTorQ9gFfOg-unsplash.jpg");
}

.page-articles::after {
  background: linear-gradient(
  rgba(80, 80, 80, 0.1)),
  url("/wp-content/themes/virtuality-FitnessGym_WP/images/another_luis-reyes-mTorQ9gFfOg-unsplash.jpg");
  filter: blur(2px);
}



#headband__sub-title-en{
  font-size: 6rem;
  color: var(--white);
  text-shadow: 0px 0px 15px rgb(170, 170, 170);
}

#headband__sub-title-jp{
  font-size: 2.5rem;
  margin-top: 20px;
  color: var(--white);
  text-shadow: 0px 0px 15px rgb(170, 170, 170);
}
/* ////ヘッダーバンド */


/* //ブログページ */
#wrapper{
  display: flex;
  justify-content: center;
  width: 90%;
  margin: 0 auto;
  padding-top: 340px;
}

#blog-container{
  width: calc(70% - 50px);
  margin-right: 50px;
}

.blog > h2 {
  position: relative;
  padding: 0px 14px 10px 14px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--main-color);
  color: var(--font-M);
}

.blog > h2::before,
.blog > h2::after {
  content: '';
  position: absolute;
  left: 30px;
  bottom: -15px;

  width: 30px;
  height: 15px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.blog > h2::before {
  background-color: var(--main-color);
}

.blog > h2::after {
  bottom: -12px;
  background-color: var(--white);
}

.blog > p:nth-child(2){
  padding: 2.5px 20px;
}

.blog > p:nth-child(3){
  padding: 2.5px 20px;
}
.blog > p:nth-last-of-type(1){
  margin-top: 50px;
  margin-bottom: 20px;
  padding: 2.5px 20px;

  font-size: 1.7rem
}
.blob-img{
  display: inline-block;
  width: 85%;
  padding: 2.5px 20px;
}

/* //ページネイション（個別ページ） */
#pagination-single{
  display: flex;
  justify-content: space-between;

  margin-top: 30px;
  padding-top: 30px;
  border-top: solid 1px var(--gray);
}

#pagination-single > .sub-pagination > a{
  padding-left: 5px;
  padding-right: 5px;
}
/* ////ページネイション（個別ページ用） */
/* ////ブログページ */


/* //サイドバー */
#sidebar{
  position: relative;

  width: 30%;

  overflow: hidden;
}

#sidebar::after{
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
    rgba(255, 255, 255, 80%), 
    rgba(255, 255, 255, 80%)),
    url("/wp-content/themes/virtuality-FitnessGym_WP/images/another_dumbbell.png");

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  
  z-index: -1;
}

.sidebar-title{
  font-size: 2rem;
  margin-bottom: 10px;
}

.sidebar-sub{
  width: 90%;
  margin: 20px auto 60px auto;
}

.sidebar__listitem > li > a{
  display: block;

  width: 70%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;

  border-bottom: solid 1px var(--gray);
}
/* ////サイドバー */



/* //ブログアーカイブページ */
#wrapper.archive #blog-container{
  width: calc(70% - 50px);
  margin-right: 50px;
}

/* ブログアーカイブ個別 */
#wrapper.archive .blog{
  display: flex;
  flex-direction: row;
  gap: 20px;

  width: 100%;
  padding: 20px;

  border-top: 1px solid var(--gray);
  background-color:#f8f3ef;
}

#wrapper.archive #blog-container .blog:last-of-type{
  border-bottom: 1px solid var(--gray);
}

#wrapper.archive .blog > img{
  width: 250px;
  height: 150px;
  object-fit: cover;
  border-radius: 5px;
}

#wrapper.archive .blog-info{
  color: var(--stdtext);
}


/* 投稿日 */
#wrapper.archive #date{
  margin-bottom: 5px;

  font-size: 1.5rem;
}

/* カテゴリー */
#wrapper.archive #category{
  margin-bottom: 20px;

  font-size: 1.5rem;
}

/* タイトル */
#wrapper.archive #title{
  position: relative;

  padding: 0px 0px 10px 10px;
  margin-bottom: 30px;
  border-bottom: 2px solid var(--main-color);

  font-weight: 500;
  font-size: 1.8rem;
  color: var(--font-M);
}
/* 擬似クラス（三角のクリップパス） */
#wrapper.archive #title::before,
#wrapper.archive #title::after{
  content: "";
  position: absolute;
  left: 30px;
  bottom: -10px;

  width: 20px;
  height: 10px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

/* 擬似クラス（三角のクリップパス）ラインと同じ色にする */
#wrapper.archive #title::before {
  background-color: var(--main-color);
}

/* 擬似クラス（三角のクリップパス）背景と同じ色にする */
#wrapper.archive #title::after {
  bottom: -7px;
  background-color: #F8F3EF;
}


/* 記事 */
#wrapper.archive #contents{
  margin-bottom: 35px;

}


#wrapper.archive .blog-button > a {
  position: relative;  
      
  display: inline-block;
  width: 150px;
  padding: 10px 25px;
  background-color: #99d4ffff;

  font-size: 1.3rem;
  color: var(--font-M);
  border-radius: 3px;
  border: none;

  cursor: pointer;
  transition:all 0.3s;
}

#wrapper.archive .blog-button > a::after {
    content: '';  
    position: absolute;
    top: 48%;
    left: 98px;
    transform: translateY(-50%);
    transform-origin: left;
    width: 22px;
    height: 8px;
    background-color: var(--font-M);
    clip-path: polygon(0 100%, 100% 100%, 60% 40%, 60% 88%, 0 88%);
    
    transition: transform .3s;
}

#wrapper.archive .blog-button > a:hover::after {
    transform: translateY(-50%) translateX(7px);
}
/* ////ブログアーカイブ */


/* //ページネイション（一覧ページ用） */
/* ページネイションコンテナ */
.nav-links{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0 8px;
  margin-top: 30px;
}

/* ページネイション（aタグ） */
.nav-links > .page-numbers{
  display: flex;
  justify-content: center;
  align-items: center;

  height: 30px;
  padding: 0 10px;
  border-bottom: 2px solid #dedede;
}

/* ページネイション（aタグ） */
.nav-links > .page-numbers.prev,
.nav-links > .page-numbers.next {
  width: auto;
}

/* ページネイション（spanタグ） */
.nav-links > .page-numbers.current{
  border-bottom: 2px solid var(--main-color);
}
/* ////ページネイション（一覧ページ用） */


/* コンバージョンリスト */
/* コンバージョンリスト(ulタグ) */
/* 初期値を隠し状態に設定 */
#conversion {
  position: fixed;
  right: 0px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 500;
  background-image: linear-gradient( 109.2deg,  rgba(0,145,255,1) 13.7%, rgba(213,231,252,1) 93.7% );
}

#conversion li{
  text-align: center;
}

#conversion a{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  width: 80px;
  height: 80px;

  border-bottom: 1px white solid;
}

@media (hover: hover) and (pointer: fine){
#conversion a:hover{
  background-color: #7A87A8;
  color: #ffffff;
}
}

#conversion li:last-child a{
  border-bottom: none;
}

#conversion i{
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;

  font-size: 22px;
}
#conversion span{
  display: block;
  padding-top: 5px;
  padding-bottom: 5px;

  font-size: 12px;
}
/* //コンバージョンリスト */


/* ハンバーガーメニュー */
.openbtn{
  display: none;

  position: fixed;
  top: 15px;
  right: 20px;
  z-index: 8000;

  width: 50px;
  height: 50px;

  background-color: var(--burger-bg);
  border-radius: 5px;

  cursor: pointer;
}

/*ボタン内側*/
.openbtn span{
  display: inline-block;

  position: absolute;
  left: 14px;

  width: 45%;
  height: 2px;

  background-color: rgb(255, 255, 255);
  border-radius: 5px;
 
  transition: all .4s;
}

.openbtn span:nth-of-type(1) {
  top:13px; 
}

.openbtn span:nth-of-type(2) {
  top:19px;
}

.openbtn span:nth-of-type(3) {
  top:25px;
}

.openbtn span:nth-of-type(3)::after {
  content:"Menu";
  position: absolute;
  top:5px;
  left:-1px;

  font-size: 0.9rem;
  color: rgb(255, 255, 255);
  text-transform: uppercase;
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn.active span:nth-of-type(1) {
  top: 14px;
  left: 18px;

  width: 30%;

  transform: translateY(6px) rotate(-45deg);
}

.openbtn.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn.active span:nth-of-type(3){
  top: 26px;
  left: 18px;
  
  width: 30%;

  transform: translateY(-6px) rotate(45deg);
}

.openbtn.active span:nth-of-type(3)::after {
  content:"Close";

  top: 5px;
  left: 4px;

  transform: translateY(0) rotate(-45deg);
}

/* PC用ハンバーガーメニューのアニメーション */
.fadeDown {
  display: block;
  opacity: 0;

  animation-name: fadeDownAnime;
  animation-duration: 0.5s;
  animation-fill-mode: forwards;
}
@keyframes fadeDownAnime{
  from {
    opacity: 0;
    transform: translateY(-100px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* //ハンバーガーメニュー */

/* タブレット横ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media screen and (min-width: 769px) and (max-width: 1024px){

#main-nav{
 display: none;
}

.openbtn{
  display: block;
}

#side-nav{
  right: -70vw;
  width: 70vw;
}


/* ロゴ（imgタグ） */
#header > h1{
  position: absolute;
  top: 15px;
  left: 20px;
}

/* ロゴ（imgタグ） */
#header > h1 > a > img{
  width: 100px;
  margin: 0px;

  border: none;
}

/* //ブログページ */
#wrapper{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;

  width: 90%;
  margin: 0 auto;
  padding-top: 340px;

}

#blog-container{
  width: 100%;
  margin-right: 0px;
}
/* ////ブログページ */



/* //サイドバー */
#sidebar{
  width: 100%;
  margin-top: 40px;
}


.sidebar__listitem > li > a{
  display: block;

  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;

  border-bottom: solid 1px var(--gray);
}

/* ////サイドバー */


#wrapper.archive .blog{
  display: flex;
  flex-direction: column;
}

/* //ブログアーカイブページ */
#wrapper.archive #blog-container{
  width: 100%;
  margin: 0 auto;
}

}
/* タブレット縦、SPーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media screen and (max-width: 768px){

/* 基本設定 */
h1{
  font-size: 4.5rem;
}

h2{
  font-size: 1.75rem;
}

p, ul, ol, span, label, input, textarea, summary, div{
  font-size: 1.4rem;
}
/* //基本設定 */


#main-nav{
 display: none;
}

.openbtn{
  display: block;
}

#side-nav{
  right: -70vw;
  width: 70vw;
}


/* ロゴ（imgタグ） */
#header > h1{
  position: absolute;
  top: 15px;
  left: 20px;
}

/* ロゴ（imgタグ） */
#header > h1 > a > img{
  width: 100px;
  margin: 0px;

  border: none;
}

/* //ブログページ */
#wrapper{
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: center;

  width: 90%;
  margin: 0 auto;
  padding-top: 340px;

}

#blog-container{
  width: 100%;
  margin-right: 0px;
}
/* ////ブログページ */



/* //サイドバー */
#sidebar{
  width: 100%;
  margin-top: 40px;
}


.sidebar__listitem > li > a{
  display: block;

  width: 100%;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 10px;

  border-bottom: solid 1px var(--gray);
}
/* ////サイドバー */


#wrapper.archive .blog{
  display: flex;
  flex-direction: column;
}

/* //ブログアーカイブページ */
#wrapper.archive #blog-container{
  width: 100%;
  margin: 0 auto;
}



/* //フッター */
#footer-contaier{
  padding-bottom: 50px;
}
#footer{
  padding-top: 100px;

  -webkit-clip-path: none;
  clip-path: none;
}

#sub-footer{
  display: flex;
  flex-direction:  column-reverse;
  align-items: center;
}

/* ロゴとsnsアイコンの親要素 */
#sub-footer__left{
  width: 100%;
  margin-top: 30px;
  margin-right: 0;
}

/* ロゴ */
#footer-logo img{
  width: 125px;
}

#sub-footer__right{
  width: 100%;
}

/* ナビ（ulタグ） */
#footer-nav{
  width: 60%;
  margin-left: auto;
  margin-right: auto;
}

/* コピーライト */
.copyright{
  padding-top: 100px;
  padding-bottom: 25px;
  text-align: center;
}
/* ////フッター */






/* //コンバージョンリスト */
/* コンバージョンリスト(ulタグ) */
/* 初期値を隠し状態に設定 */
#conversion {
  position: fixed;
  left: 0px;
  right: 0px;
  top: auto;
  bottom: 0px;
  transform: translateY(0%);

  display: flex;
  height: 55px;
  /* background-image: linear-gradient( 109.2deg,  rgba(0,145,255,1) 13.7%, rgba(213,231,252,1) 93.7% ); */
  opacity: .9;
  /* padding-bottom: env(safe-area-inset-bottom); */
}

#conversion li{
  text-align: center;
}

#conversion a{
  width: calc(100vw / 4);
  height: 55px;

  border-bottom: none;
  border-right: 1px white solid;
}

#conversion li:last-child a{
  border-right: none;
}

#conversion i{
  padding-top: 0px;
  padding-bottom: 0px;

  font-size: 1.8rem;
}

#conversion span{
  padding-top: 0px;
  padding-bottom: 0px;

  font-size: 1rem;
} 
/* ////コンバージョンリスト */




}