/* @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: #254678;
  /* 背景色（二層目） */
  --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(36, 70, 118);


  --main-color:rgb(36, 70, 118);
  /* --base-color:rgb(253, 237, 227); */
  --accent-color:rgb(186, 226, 244);
  /* 【フォント】 */
  --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);
  --bg2:rgb(251, 248, 191);

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

/* //基本設定 */
/* h1を70pxとする */
h1{
  font-size: 7rem;
}
/* h2を20pxとする */
h2{
  font-size: 2rem;
}
/* 以下は15pxとする */
p, ul, ol, span, label, input, textarea, summary, div{
  font-size: 1.6rem;
}
/* ////基本設定 */


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-family: noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: 100;
  letter-spacing: .1rem;
}

/* ヘッダーの幾何学模様の背景 */
#header{
  width: 100%;
  aspect-ratio: 1524 / 199;
  padding-top: 32px;

  background-image: url("/wp-content/themes/GoodCycling/images/frame-geometric2.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
}

/* ヘッダーコンテナ（ロゴ、コンバージョン） */
#header-inner{
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin: 0px 40px 0px 88px;
}

/* ヘッダーコンテナ（ロゴ） */
.header-logo{
  width: 184px;
}

/* ロゴテキスト */
.header-logo > p{
  margin-bottom: 4px;

  font-size: 1.4rem;
  text-shadow:
  -2px -2px 0 white,
   2px -2px 0 white,
  -2px  2px 0 white,
   2px  2px 0 white,
  -2px  0   0 white,
   2px  0   0 white,
    0  -2px 0 white,
    0   2px 0 white;
}

/* ロゴ（h1) */
.header-logo > h1{
  font-size: 0px;
}

.header-logo > h1 > a{
  display: block;
}

/* ロゴ(img) */
.header-logo > h1 > a > img{
  width: 100%;
}


/* //コンバージョン */
.conversion{
  display: flex;
  align-items: center;
}

/* フリーテキスト画像(img) */
.conversion > img{
  height: 25px;
  margin-right: 24px;
}

/* DL画像(ulタグ) */
.conversion > ul{
  display: flex;
}

/* DL画像(aタグ) */
.conversion > ul a{
  display: block;
  margin-right: 16px;
}

/* DL画像(img) */
.conversion > ul img{
  height: 40px;
}
/* ////コンバージョン */


/* //メインナビメニュー */
#main-nav{
  width: 100%;
  /* height: 97px; */
}

#main-nav > ul{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  margin-top: 32px;
  margin-bottom: 40px;
}

#main-nav > ul li a{
  /*線と画像の基点とするためrelativeを指定*/
	position: relative;
  
  display: block;
  padding: 32px 32px;

  font-size: 1.6rem;
  color: var(--mainNav-bg-layer1);

  text-shadow:
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white,
    -2px  0   0 white,
     2px  0   0 white,
     0   -2px 0 white,
     0    2px 0 white;
}

/* 線の設定 */
#main-nav > ul li a:after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 50%;

  /* 線の形状 */
  width: 30%;
  height: 1.5px;

  background-color: var(--mainNav-bg-layer1);

  /* アニメーションの指定 */
  transform: translateX(-50%) scale(0, 1);
  transform-origin: center top;
	transition: all .3s;
}

#main-nav > ul li a:hover::after {
	transform: translateX(-50%) scale(1,1);
}


#main-nav img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  height: 45px;
  opacity: .7;
}
/* ////メインナビメニュー */


/* //ドロップダウンメインナビメニュー */
/* //jsで#main-navにdrop-downラスを付与したアクション。 */
#main-nav-hidden {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;

  width: 100%;
  background-image: url("/wp-content/themes/GoodCycling/images/geometlic-H100.svg");
  background-size: cover;

  opacity: 0;
  transform: translateY(-100px);
  transition: all .7s;
}

#main-nav-hidden.is-active{
  opacity: 1;
  transform: translateY(0px);
}

#main-nav-hidden > ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;

  padding-top: 8px;
  padding-bottom: 8px;
}

#main-nav-hidden > ul li a{
  /* 画像の基点とするためrelativeを指定 */
	position: relative;
  
  display: block;
  padding: 32px;

  font-size: 1.6rem;
  color: var(--mainNav-bg-layer1);

  text-shadow:
    -2px -2px 0 white,
     2px -2px 0 white,
    -2px  2px 0 white,
     2px  2px 0 white,
    -2px  0   0 white,
     2px  0   0 white,
     0   -2px 0 white,
     0    2px 0 white;
}

#main-nav-hidden > ul li a:hover {
  text-shadow:
    -2px -2px 0 var(--bg2),
     2px -2px 0 var(--bg2),
    -2px  2px 0 var(--bg2),
     2px  2px 0 var(--bg2),
    -2px  0   0 var(--bg2),
     2px  0   0 var(--bg2),
     0   -2px 0 var(--bg2),
     0    2px 0 var(--bg2);
}

#main-nav-hidden img{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  height: 45px;
  opacity: .3;
}
/* ////ドロップダウンナビメニュー */











/* //ヒーロー画像（PC） */
/* //スライド（３つ画像。左右は見切れ） */
.slider-4 {
  /* ヘッダー背景画像より上面に配置 */
  position: relative;
  z-index: 2;

  width:94%;
  margin:0 auto;
}

.slider-4 img {
  width:auto;
  height:55vh;
  margin-left: 4px;
  margin-right: 4px;
}

.slider-4 .slick-slide {
  transform: scale(0.9);
  transition: all .5s;
  opacity: 1;
}

.slider-4 .slick-slide.slick-center{
  transform: scale(1);
  opacity: 1;
}

/* 矢印コンテナ（共通） */
.slider-4 .slick-prev,
.slider-4 .slick-next {
  position: absolute;
  top: 42%;
  cursor: pointer;
  outline: none;
  width: 20px;
  height: 20px;
  z-index: 2;
}

/* 矢印コンテナ（左） */
.slider-4 .slick-prev {
  left: 9.5%;
}

/* 矢印コンテナ（右） */
.slider-4 .slick-next {
  right: 9.5%;
}

/* 矢印背面の円 */
.slider-4 .slick-prev::before,
.slider-4 .slick-next::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: var(--accent-color);
  z-index: -1;
}

/* 矢印（共通） */
.slider-4 .slick-prev::after,
.slider-4 .slick-next::after {
  content: "";
  position: absolute;
  top: 50%;

  width: 10px;
  height: 10px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
}

/* 矢印（左） */
.slider-4 .slick-prev::after {
  left: 57%;
  transform: translate(-50%, -50%) rotate(-135deg);
}

/* 矢印（右） */
.slider-4 .slick-next::after {
  left: 43%;
  transform: translate(-50%, -50%) rotate(45deg);
}

/*ドットナビゲーションの設定*/
.slider-4 .slick-dots {
  text-align: center;
  margin: 24px 0 0 0;
}

.slider-4 .slick-dots li {
  display: inline-block;
  margin: 0 4px;
}

.slider-4 .slick-dots button {
  color: transparent;
  outline: none;
  width: 8px;
  height: 8px;

  /* //追加(真円ではなく楕円になってしまう) */
  padding: 0;           
  border: none;          
  /* ////追加(真円ではなく楕円になってしまう) */

  display: block;
  border-radius: 50%;
  /*ドットボタンの色*/
  background-color: #ccc;
}

.slider-4 .slick-dots .slick-active button{
  /*ドットボタンの現在地表示の色*/
  background-color: #333;
}
/* ////スライド（３つ画像。左右は見切れ） */
/* ////ヒーロー画像（PC） */


/* ////ヒーロー画像（タブレット, SP） */
.slider-5.slick-slider{
  display: none;
}
/* ////ヒーロー画像（タブレット, SP） */



/* ハンバーガーメニューを非表示（PC用は不使用） */
.openbtn{
  display: none;
}

/* サイドナビメニューを非表示（PC用は不使用） */
#side-nav{
  display: none;
}


/* //コンセプト */
#concept{
  padding-top: 200px;
}

/* テキストコンテナ */
.concept-text{
  position: relative;
  left: 20%;

  display: inline-block;
}

/* 擬似クラスで流体シェイプを作成 */
.concept-text::after{
  content: "";
  position: absolute;
  top: 56%;
  left: 45%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 900px;
  height: 360px;
  background-color: var(--accent-color);
  border-radius: 34% 66% 33% 67% / 56% 63% 37% 44%; 
}

/* 小タイトル */
.text-subtitle{
  font-size: 2rem;
  font-weight: bold;
  margin-top: 48px;
}

/* コンセプト文章 */
.text-coment{
  margin-top: 16px;
  line-height: 1.8;
}

/* 街と自転車に乗る女性の画像  */
#concept-bg-img{
  position: relative;
  width: 80%;
  height: 400px;
  margin-left: auto;
  margin-right: auto;
}

/* 街の画像 */
#concept-bg-img::after{
  content: "";
  position: absolute;
  top: -150px;
  left: 50%;
  transform: translateX(-50%);

  width: 100%;
  height: 100%;
  background-image: url("/wp-content/themes/GoodCycling/images/concept_city.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* 自転車に乗る女性の画像 */
#concept-bg-img::before{
  content: "";
  position: absolute;
  top: 27%;
  left: 80%;
  transform: translateX(-50%);
  z-index: 1;

  width: 122px;
  height: 148px;
  background-image: url("/wp-content/themes/GoodCycling/images/concept_cyclist.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  animation: moveLeft 10s linear infinite;
}

@keyframes moveLeft {
  0% {
    /* 右側スタート */
    left: 100%;
  }
  95% {
    left: 5%;
    opacity: 1; 
  }
  100% {
    left: 0%;
    opacity: 0; 
  }
}
/* ////コンセプト */



/* //スクロールフェード */
#main section{
  opacity: 0;
  transition: opacity 1.5s
}

#main section.fadeIn{
  opacity: 1;
}
/* ////スクロールフェード */


/* セクション余白 */
.section-frame{
  margin-top: 296px;
  margin-bottom: 296px;
}

/* セクションタイトル（英語） */
.title-container{
  position: relative;
  height: 110px;
  margin-top: 152px;

  font-family: "myriad-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  text-align: center;

  font-size: 7rem;
  color: var(--main-color);
  text-shadow: 3px 3px 5px rgba(0,0,0,0.3);
}

/* セクションタイトル（日本語） */
.ja-title{
  position: absolute;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);

  font-family: "fot-tsukuardgothic-std", sans-serif;
  font-weight: 700;
  font-style: normal;

  font-size: 2.5rem;

  text-shadow: none;
}


/* //サービスの特徴 */
#service-container{
  position: relative;
  display: flex;
}

#service-container::after{
  content: "";
  position: absolute;
  top: 300px;
  right: -50px;
  z-index: -1;

  width: 610px;
  height: 600px;
  background: url("/wp-content/themes/GoodCycling/images/cycle-shadow1.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .1;
}

/* セクションタイトル */
#service-container > .title-container{
  position: relative;

  display: inline-block;
  width: 50%;
  margin-top: 0px;
}

/* セクションタイトル画像 */
#service-container > .title-container::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 135px;
  height: 135px;
  background-image: url("/wp-content/themes/GoodCycling/images/title-cycle-tire.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .3;
}

#service-container > .text-container{
  width: 50%;
  padding: 0 5% 0 0;
}

/* 小タイトル */
#service-container .text-subtitle{
  margin-top: 0px;
}

/* ポイントコンテナ（大） */
#service-feature-container{
  display: flex;
  justify-content: center;

  margin-top: 48px;
}

/* ポイントコンテナ（中） */
.service-feature{
  width: 18%;
  margin-left: 48px;
  margin-right: 48px;
  text-align: center;

  /* JSでアニメ */
  /* 初期値 */
  opacity: 0;
  transform: rotate(5deg) scale(1.1);
}

/* ポイント画像(img) */
.service-feature-img img:nth-of-type(1){
  display: block;

  width: 70px;
  margin: 0 auto;
}

/* まる抜き画像(img) */
.service-feature-img img:nth-of-type(2){
  display: block;

  width: 100%;
  height: clamp(200px, calc((290 - 200) * (100vw - 1025px) / (1472 - 1025) + 200px), 290px);
  margin: 8px auto;
  object-fit: contain;
}

/* ポイントタイトル */
.service-feature-text p:nth-of-type(1){
  margin-bottom: 8px;
  text-align: center;
  font-weight: 600;
  color: var(--main-color);
}

/* ポイント文章 */
.service-feature-text p:nth-of-type(2){
  line-height: 1.3;
  text-align: center;
}
/* ////サービスの特徴 */



/* //対応地域 */
#supportArea{
  height: 1400px;
}

/* 背景に地図を設ける */
#title-bg-container{
  padding: 72px 0px;

  top: 0px;
  left: 0px;
  z-index: -2;

  width: 100%;
  background-image: 
  linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6)),
  url("/wp-content/themes/GoodCycling/images/map.png");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

}

/* セクションタイトル */
#title-bg-container .title-container{
  position: relative;
  margin-top: 0px;
  margin-bottom: 0px;
}

/* セクションタイトル画像（マップピン） */
#title-bg-container .title-container::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 85px;
  height: 100px;
  background-image: url("/wp-content/themes/GoodCycling/images/title-map-pin.svg");
  background-repeat: no-repeat;
  background-size: contain;
}


/* 画像とテキストのコンテナ */
#supportArea-contents{
  display: flex;

  height: 350px;
  margin-top: 48px;
}


/* ステーションスタンド画像（オーバーフロー） */
.img-overflow{
  position: relative;
  width: 50%;
  overflow: hidden;
}

/* スライドアニメーション（初期値） */
.img-overflow::before{
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;

  background-color: var(--main-color);
  background-color: #246075;

  /* アニメーションの初期値と同じ */
  transform: scaleX(0);
  transform-origin: left;
}

/* スライドアニメーション（実行） */
.img-overflow.is-active::before{
  animation: scale 1s forwards;
}

/* ステーションスタンド画像 */
/* スライドアニメーション（初期値） */
.img-overflow > img{
  position: absolute;
  bottom: 0%;

  display: block;
  width: clamp(630px, calc((820 - 630) * (100vw - 1025px) / (1640 - 1025) + 630px), 820px);
  opacity: 0;

  filter: brightness(1.15);
}

/* スライドアニメーション（実行） */
.img-overflow.is-active > img{
  animation: opa 1s forwards;
  animation-delay: .6s;
}
/* スライドマスク（アニメーション） */
@keyframes scale{
  0% {
      transform-origin: left;
      transform: scaleX(0);
  }
  50% {
      transform-origin: left;
      transform: scaleX(1);
  }
  50.001% {
      transform-origin: right;
      transform: scaleX(1);
  }
  100% {
      transform-origin: right;
      transform: scaleX(0);
  }
}

/* フェード（アニメーション） */
@keyframes opa{
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* テキストコンテナ（大） */
#supportArea-contents > .text-container{
  position: relative;
  width: 50%;
  /* background-color: var(--main-color); */
}

/* 擬似クラス（水玉模様） */
#supportArea-contents > .text-container::after{
content: "";
position: absolute;
top: 95%;
left: 60%;
transform: translate(-50%, -50%);
z-index: 1;

width: 432px;
height: 80px;
background-image: url("/wp-content/themes/GoodCycling/images/geometlic.svg");
background-repeat: no-repeat;
background-size: cover;
opacity: 1;
}

/* テキストコンテナ（中） */
#text-sub-container{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 2;

  width: 105%;
  padding: 64px 5%;
  
  color: var(--white);
  background-color: var(--main-color);
  text-align: center;
}

/* タイトル */
.text-container .text-subtitle{
  display: inline;
  font-weight: normal;
  color: var(--main-color);
  margin-top: 0px;
  padding : 4px 16px;
  background-color: var(--white);
  border-radius: 9999px;
}

/* テキスト、Googleのコンテナ（大） */
#areaMap{
  position: relative;

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

  width: 100%;
  height: 600px;
}

/* マップ背景 */
#areaMap::after{
  content: "";
  position: absolute;
  top: 0;
  z-index: -1;

  width: 100%;
  height: 600px;
  background-image: url("/wp-content/themes/GoodCycling/images/frame_geometric3.png");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: .5;
}

/* テキスト、Googleのコンテナ（小） */
.area{
  width: 85%;
  margin-left: auto;
  margin-right: auto;

  padding-left: 48px;
  padding-right: 48px;
}

/* Google上のテキスト */
.area > p{
  width: 100px;
  padding: 4px;

  background-color: rgb(37, 70, 119);
  color: white;
  text-align: center;
}

/* Googleマップ */
.area > iframe{
  display: block;
  width: 100%;
}
/* ////対応地域 */


/* //お客様の声 */
#review{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* セクションタイトル */
#review > .title-container{
  position: relative;
}

/* セクションタイトル画像 */
#review > .title-container::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 193px;
  height: 135px;
  background-image: url("/wp-content/themes/GoodCycling/images/title-voice.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

/* ポストのコンテナ（大） */
#review .postAssy{
  margin-top: 48px
}

/* ポストのコンテナ（中） */
#review .review-img-frame{
  display: flex;
  flex-direction: row;

  padding: 40px 80px;;
  margin-bottom: 48px;
  
  background-color: #cdeef2;
  border-radius: 20px;
}

/* ポストの顔写真 */
#review .review-img{
  width: 100px;
  height: 100%;
  box-shadow: 5px 5px 0px 1px rgba(37, 70, 119);
  border-radius: 5px;
}

/* ポストのテキスト（属性、投稿日） */
#review .post-contents > p{
  margin-left: 32px;
  line-height: 1.5;
}

/* ポストのテキスト（文章） */
#review .post-contents > p:nth-of-type(2){
  margin-left: 32px;
  margin-top: 16px;
}
/* ////お客様の声 */


/* //お知らせ */
#news{
  width: 70%;
  margin-left: auto;
  margin-right: auto;
}

/* セクションタイトル */
#news > .title-container{
  position: relative;
}

/* セクションタイトル画像 */
#news > .title-container::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 201px;
  height: 135px;
  background-image: url("/wp-content/themes/GoodCycling/images/title-megaphone.svg");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: auto;
}

/* ポストのコンテナ（大） */
#news .postAssy{
  margin-top: 48px
}

/* ポストのコンテナ（中） */
#news .review-img-frame{
  display: flex;
  flex-direction: row;
  margin-bottom: 48px;
}

/* ポストの写真 */
#news .news-img{
  width: 300px;
  height: 200px;
  box-shadow: 5px 5px 0px 1px rgb(37, 70, 119);
  border-radius: 5px;
}

/* ポストのテキスト（タイトル、投稿日） */
#news .post-contents > p{
  margin-left: 32px;
  line-height: 1.5;
}

/* ポストのテキスト（タイトル） */
/* タイトルに背景を付与(擬似クラスの起点) */
#news .post-contents > p:first-child {
  position: relative;
  display: inline;
}
/* ポストのテキスト（タイトル） */
/* タイトルに背景を付与(擬似クラス) */
#news .post-contents > p:first-child::after {
  content: "";
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: -1;

  width: 100%;
  height: 90%;
  background-color: var(--accent-color);
}

/* ポストのテキスト（文章） */
#news .post-contents > p:nth-of-type(3){
  margin-left: 32px;
  margin-top: 16px;
}


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

/* ページネイション（aタグ） */
.nav-links .page-numbers{
  display: flex;
  justify-content: center;
  align-items: center;
  /* 円のサイズ（好きに変更OK） */
  /* 正円にするため幅と高さを同じに */
  width: 40px;
  height: 40px;
  padding: 8px;
  border-radius: 50%;
  background-color: #f0f0f0;
}

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

/* ページネイション（spanタグ） */
.nav-links .page-numbers.current{
  background-color: var(--main-color);
  color:var(--white);
}
/* ////ページネイション（一覧ページ用） */
/* ////お知らせ */


/* //よくある質問 */
/* セクションタイトル */
#faq > .title-container{
  position: relative;
}

/* セクションタイトル画像 */
#faq > .title-container::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 77px;
  height: 135px;
  background-image: url("/wp-content/themes/GoodCycling/images/title-question.svg");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: auto;
}

/* faqコンテナ（大） */
.faqAssy{
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 48px;
}

/* faq質問 */
.question{
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 16px 32px 16px 24px;
  margin-bottom: 8px;
  border-radius: 5px;

  background-color: var(--main-color);
  color: white;
  cursor: pointer;
  transition: all 0.2s ease;
}

/* ホバー処理 */
.question:hover{
  background-color: var(--accent-color);
  color: var(--font-M);
}

/* faq答え */
/* 初期は[display: none;]で非表示。 */
/* jsの.slideToggle()で表示の切り替え。 */
.answer{
  display: none;

  margin: 8px auto 24px 24px;
  line-height: 1.5;
}
/* ////よくある質問 */


/* //安全指針 */
/* セクションタイトル */
#precautions > .title-container{
  position: relative;
}
/* セクションタイトル画像 */
#precautions > .title-container::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;

  width: 144px;
  height: 135px;
  background-image: url("/wp-content/themes/GoodCycling/images/title-safety.svg");
  background-repeat: no-repeat;
  background-size: contain;
  aspect-ratio: auto;
}

/* ルールのタイトル */
.rule-title{
  padding: 16px 32px 16px 24px;
  margin-bottom: 8px;
  border-radius: 5px;

  background-color: rgb(37, 70, 119);
  color: white;
}

/* 安全指針のテキスト */
.precautionsList{
  margin: 8px auto 24px 24px;
  line-height: 1.5;
}
/* ////安全指針 */



/* //footer */
/* フッターコンテンツとコピーライト */

#footer{
  width: 100%;
  padding-top: 64px;
  padding-bottom: 8px;
  background-color: var(--accent-color);
}

/* ロゴ、項目、sns */
#footer-sub{
  /* #copyright::afterセレクタより前面に配置するためpositionを配置 */
  position: relative;
  z-index: 1;
}

/* ロゴ */
#footer-1st > img{
  display: block;
  height: 50px;
  margin-left: auto;
  margin-right: auto;
}

/* 項目コンテナ */
#footer-1st > ul{
  display: flex;
  justify-content: center;
}

/* 項目（aタグ） */
#footer-1st > ul a{
  display: block;
  padding: 0 42px;
  margin: 32px auto;

  text-align: center;
  border-right: 1px solid var(--border2);
}

/* 項目の最後（aタグ） */
#footer-1st > ul li:last-child a{
  border-right: none;
}

/* 項目英語(spanタグ) */
#footer-1st span{
  display: block;
}

/* 項目日本語(spanタグ) */
#footer-1st span:nth-child(2){
  margin-top: 8px;

  font-size: 1.2rem;
}

/* テキスト（FOLLOW US!） */
#footer-2nd > p{
  font-family: "Londrina Shadow", sans-serif;
  font-weight: 900;
  font-style: normal;

  margin-top: 48px;
  margin-bottom: 33px;
  font-size: 4rem;
  color: var(--main-color);
  text-align: center;
}

/* snsコンテナ */
/* #footer-sns{ */
#footer-2nd > ul{
  display: flex;
  justify-content: center;

  margin-top: 8px;
}

/* sns(aタグ) */
#footer-2nd > ul a{
  display: block;
  margin-left: 16px;
  margin-right: 16px;
}


/* フォントオーサム */
#footer-2nd > ul i{
  display: flex;
  justify-content: center;
  align-items: center;

  width: 50px;
  height: 50px;


  border: 1px solid var(--main-color);
  border-radius: 50%;

  font-size: 2.5rem;
  color: var(--main-color);
  transition: transform 0.3s ease;
}

@media (hover: hover) and (pointer: fine){
  #footer-2nd > ul i:hover{
    transform: scale(1.1);
  }
}


/* コピーライトコンテナ */
#copyright{
  position: relative;

  width: 100%;
  height: 300px;
}

/* 街の画像 */
#copyright::after{
  content: "";
  position: absolute;
  bottom: 0;
  /* #footer-subセレクタより背面に配置するためz-indexを配置 */
  z-index: 0;

  width: 100vw;
  height: 400px;
  background-image: url("/wp-content/themes/GoodCycling/images/footer-town.png");
  background-size: cover;
  background-repeat: no-repeat;
}

/* コピーライト */
#copyright > p{
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);

  white-space: nowrap;
}
/* ////footer */


/* //ページトップボタン（上から下にスクロール） */
/* 非表示(初期設定) */
.js-scroll {
	position: fixed;
	right: 30px;
  bottom: 80px;
  z-index: 8888;

	opacity: 0;
	visibility: hidden; 
	/* opacity: 1;
	visibility: visible; */
  /* それぞれに0.5秒の変化のアニメーション */
	transition: opacity .5s, visibility .5s;

	/* 縦書き */
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	/* 改行禁止 */
  white-space: nowrap;

	/* 矢印の動き */
	animation: arrowmove 1s ease-in-out infinite;
}
/* フワフワ動く */
@keyframes arrowmove{
  0%{
    bottom: 80px;
  }
  50%{
    bottom: 85px;
  }
  100%{
    bottom: 80px;
  }
 }

/* jsでクラスを付与 */
/* 上から下へ */
/* 表示させる */
.js-scroll.scroll-view {
	opacity: 1;
	visibility: visible;
  /* opacity: 0;
	visibility: hidden;  */
}

/* ページトップボタン（aタグ） */
.js-scroll a {
  position: relative;

  display: inline-block;
  font-size: 1.5rem;
	color: #666;
  text-align: center;

  /* 大文字に指定 */
	text-transform: uppercase;
  /* 文字を回転させる */
  transform: rotate(180deg);
}

/* ページトップボタンの画像 */
.js-scroll a::after{
	content:"";
	position: absolute;
  top: -25px;
	right: -65px;
  transform: rotate(180deg);
  z-index: 10;

  width: 60px;
  height: 100px;
  background-image: url("/wp-content/themes/GoodCycling/images/cycle.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}


/* ////ページトップボタン（上から下にスクロール） */


/* //ページトップボタン（下から上にスクロール） */
/* 非表示(初期設定) */
.js-pagetop {
	position: fixed;
	right: 110px;
  bottom: 63px;
  z-index: 8888;

	/* はじめは非表示 */
	opacity: 0;
	visibility: hidden; 
  /* それぞれに0.5秒の変化のアニメーション */
	transition: opacity .5s, visibility .5s;

	/* 縦書き */
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
	/* 改行禁止 */
  white-space: nowrap;

	/* 矢印の動き */
	animation: arrowmove 1s ease-in-out infinite;
}

/* jsでクラスを付与 */
/* 下から上へ */
/* 表示させる */
.js-pagetop.scroll-view {
	opacity: 1;
	visibility: visible;
}

/* ページトップボタン（aタグ） */
.js-pagetop a {
  position: relative;

  display: inline-block;
  font-size: 1.5rem;
	color: #666;
  text-align: center;

  /* 大文字に指定 */
	text-transform: uppercase;
  /* 文字を回転させる */
  transform: rotate(0deg);
}

/* ページトップボタンの画像 */
.js-pagetop a::after{
	content:"";
	position: absolute;
  top: -25px;
	right: -65px;
  transform: rotate(180deg);
  z-index: 10;

  width: 60px;
  height: 100px;
  background-image: url("/wp-content/themes/GoodCycling/images/cycle.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}
/* ////ページトップボタン（下から上にスクロール） */

/*Edge IE11 hack*/
/* _:-ms-lang(x), .js-scroll a::before{
	right:-11px;
} */

/*Edge IE11 hack*/
/* _:-ms-lang(x), .js-pagetop a::before{
	right:0;
} */
/* ////ページトップボタン */





/* SP用ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー */
@media screen and (max-width: 1024px){
  /* pc: 16px-18px
  タブレット: 15-17px
  スマホ: 14-16px */

  /* //基本設定 */
  /* h1を70pxとする */
  h1{
    font-size: 7rem;
  }
  /* h2を20pxとする */
  h2{
    font-size: 2rem;
  }
  /* 以下は15pxとする */
  p, ul, ol, span, label, input, textarea, summary, div{
    font-size: 1.4rem;
  }
  /* ////基本設定 */


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

    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;

    width: 50px;
    height: 50px;
    background-color: var(--burger-bg);
    border-radius: 5px;
    cursor: pointer;
  }

  .openbtn span{
    display: inline-block;

    position: absolute;
    left: 14px;
    height: 2px;

    width: 45%;
    background-color: var(--burger-font);
    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: 6px;
    left: 50%;
    transform: translateX(-50%);
    
    color: var(--white);
    font-size: 10px;
    text-transform: uppercase;
  }

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

    top: 14px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
  }

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

  .openbtn.active span:nth-of-type(3){
    width: 30%;

    top: 26px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
  }

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

    top: 9px;
    left: 4px;
    transform: translateY(0) rotate(-45deg);
  }
  /* ////ハンバーガーメニュー */


  /* //サイドスライドナビゲーション */
  #side-nav{
    display: block;

    position: fixed;
    top: 0;
    right: 0;
    z-index: 9000;

    width: 70vw;
    height: 100vh;
    background-color: var(--sideNav-bg);
    border-left: 1px solid rgba(151, 151, 151, 0.3);
    
    /* jsで表示・非表示の切り替え */
    opacity: 0;
    visibility: hidden;
    transition: all .3s;
  }

  /* jsで表示・非表示の切り替え */
  #side-nav.open{
    opacity: 1;
    visibility: visible;
  }


  /* ulタグ */
  #side-nav > ul{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);

    width: 90%;
  }


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

    display: block;

    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 32px;

    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 > a:hover{
    background-color: var(--sideNav-bg-layer-hover);
  }

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

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


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

    display: block;
    
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 48px;

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

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

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

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

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


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

    display: block;
    
    padding-top: 16px;
    padding-bottom: 16px;
    padding-left: 64px;

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

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

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

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

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

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

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

  /* span要素の基本設定 */
  #side-nav .sub-title{
    font-size: 12px;
    margin-top: 4px;
  }

  /* ////サイドスライドナビゲーション */



  /* ヘッダーコンテナ（ロゴ、コンバージョン） */
  #header-inner{
    display: block;
    margin: 0px;
  }

   /* ヘッダーコンテナ（ロゴ） */
  .header-logo{
    width: clamp(140px, calc((180 - 140) * (100vw - 375px) / (1030 - 375) + 140px), 180px);
    margin-top: 8px;
    margin-left: 24px;
  }

  /* ロゴテキスト */
  .header-logo > p{
    font-size: clamp(10px, calc((11 - 10) * (100vw - 375px) / (1024 - 375) + 10px), 11px);
  }

  /* 隠れメインナビ */
  #main-nav-hidden{
    display: none;
  }

  /* //コンバージョン */
  .conversion{
    position: fixed;
    bottom: 0px;
    z-index: 9999;

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

    width: 100vw;
    height: 80px;
    background: url("/wp-content/themes/GoodCycling/images/conversion-bg.svg");
    background-repeat: no-repeat;
    background-size: cover;
  }

  /* フリーテキスト画像(img) */
  .conversion > img{
    display: none;
  }

  /* DL画像(aタグ) */
  .conversion > ul a{
    margin-left: 8px;
    margin-right: 8px;
  }
  /* ////コンバージョン */


  /* //メインナビメニュー */
  #main-nav{
    display: none;
  }
  /* ////メインナビメニュー */


  /* ヒーロー画像（PC）を非表示 */
  .slider-4.slick-slider{
    display: none;
  }

  
  /* ヒーロー画像（タブレット, SP）を表示 */
  .slider-5.slick-slider {
    display: block;
    /* ヘッダー背景画像より上面に配置 */
    position: relative;
    z-index: 2;

    width:100%;
    margin: 0;
  }

  .slider-5 img {
    width: clamp(250px, calc((610 - 250) * (100vw - 370px) / (1024 - 370) + 250px), 610px);
    height: auto;
    margin-top: 42px;
    margin-left: clamp(5px, calc((50 - 5) * (100vw - 370px) / (1024 - 370) + 5px), 50px);
    margin-right: clamp(5px, calc((50 - 5) * (100vw - 370px) / (1024 - 370) + 5px), 50px);
  }

  .slider-5 .slick-slide {
    transform: scale(0.9);
    transition: all .5s;
    opacity: 1;
  }

  .slider-5 .slick-slide.slick-center{
    transform: scale(1);
    opacity: 1;
  }

  /* 矢印コンテナ（共通） */
  .slider-5 .slick-prev,
  .slider-5 .slick-next {
    position: absolute;
    top: 42%;
    cursor: pointer;
    outline: none;
    width: 20px;
    height: 20px;
    z-index: 2;
  }

  /* 矢印コンテナ（左） */
  .slider-5 .slick-prev {
    left: 9.5%;
  }

  /* 矢印コンテナ（右） */
  .slider-5 .slick-next {
    right: 9.5%;
  }

  /* 矢印背面の円 */
  .slider-5 .slick-prev::before,
  .slider-5 .slick-next::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background-color: var(--accent-color);
    z-index: -1;
  }

  /* 矢印（共通） */
  .slider-5 .slick-prev::after,
  .slider-5 .slick-next::after {
    content: "";
    position: absolute;
    top: 50%;

    width: 10px;
    height: 10px;
    border-top: 2px solid var(--white);
    border-right: 2px solid var(--white);
  }

  /* 矢印（左） */
  .slider-5 .slick-prev::after {
    left: 57%;
    transform: translate(-50%, -50%) rotate(-135deg);
  }

  /* 矢印（右） */
  .slider-5 .slick-next::after {
    left: 43%;
    transform: translate(-50%, -50%) rotate(45deg);
  }

  /*ドットナビゲーションの設定*/
  .slider-5 .slick-dots {
    text-align: center;
    margin: 24px 0 0 0;
  }

  .slider-5 .slick-dots li {
    display: inline-block;
    margin: 0 4px;
  }

  .slider-5 .slick-dots button {
    color: transparent;
    outline: none;
    width: 8px;
    height: 8px;

    /* //追加(真円ではなく楕円になってしまう) */
    padding: 0;           
    border: none;          
    /* ////追加(真円ではなく楕円になってしまう) */

    display: block;
    border-radius: 50%;
    /*ドットボタンの色*/
    background-color: #ccc;
  }

  .slider-5 .slick-dots .slick-active button{
    /*ドットボタンの現在地表示の色*/
    background-color: #333;
  }
  /* ////スライド（３つ画像。左右は見切れ） */
  /* ////ヒーロー画像（タブレット, SP） */




  /* //コンセプト */
  #concept{
    height: clamp(600px, calc((700 - 600) * (100vw - 370px) / (1024 - 370) + 600px), 700px);
    padding-top: clamp(100px, calc((200 - 100) * (100vw - 370px) / (1024 - 370) + 100px), 200px);
  }

  /* テキストコンテナ */
  .concept-text{
    position: relative;
    left: 50%;
    transform: translate(-50%);

    width: 90%;
  }

  /* 擬似クラスで流体シェイプを作成 */
  .concept-text::after{
    content: "";
    position: absolute;
    top: 56%;
    left: 34%;
    transform: translate(-50%, -50%);
    z-index: -1;

    width: clamp(730px, calc((730 - 850) * (100vw - 375px) / (1030 - 375) + 850px), 850px);
    height: clamp(290px, calc((290 - 303) * (100vw - 375px) / (1030 - 375) + 303px), 303px);
    border-radius: 34% 66% 68% 32% / 36% 40% 60% 64%;
  }

  /* 小タイトル */
  .text-subtitle{
    font-size: 1.7rem;
  }

  /* 自転車に乗る女性の画像 */
  #concept-bg-img::before{
    top: clamp(48px, calc((135 - 48) * (100vw - 370px) / (1024 - 370) + 48px), 135px);
    left: 80%;

    width: 100px;
    height: 100px;

    animation: moveLeft 8s linear infinite;
  }
  /* ////コンセプト */



  /* セクション余白 */
  .section-frame{
    margin-top: 96px;
    margin-bottom: 192px;
  }

  /* セクションタイトル（英語） */
  .title-container{
    height: 70px;
    margin-bottom: 80px;;
    font-size: 4rem;
  }

  /* セクションタイトル（日本語） */
  .ja-title{
    font-size: 2rem;
  }




  
  /* //サービスの特徴 */
  #service-container{
    display: block;

    width: 90%;
    margin: 0 auto;
  }

  /* セクションタイトル */
  #service-container > .title-container{
    width: 100%;
  }

  #service-container > .text-container{
    width: 90%;
    margin: 0 auto;
    padding: 0;
  }

  /* ポイントコンテナ（大） */
  #service-feature-container{
    display: block;
  }

  /* ポイントコンテナ（中）NoReverse */
  .service-feature{
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 90%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 42px;
  }

  /* ポイントコンテナ（中）Reverse */
  .service-feature.service-feature-reverse{
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-start;
    align-items: center;
  }

  /* ポイントコンテナ（小）画像 */
  .service-feature-img{
    margin-right: 16px;
    margin-left: 16px;
    width: 40%;
  }

  /* まる抜き画像(img) */
  .service-feature-img img:nth-of-type(2){
    height: clamp(100px, calc((300 - 100) * (100vw - 375px) / (1024 - 375) + 100px), 300px);
  }

  /* ポイントタイトル */
  .service-feature-text p:nth-of-type(1){
    text-align: left;
  }

  /* ポイント文章 */
  .service-feature-text p:nth-of-type(2){
    text-align: left;
  }
  /* ////サービスの特徴 */


  /* //対応地域 */
  #supportArea{
    height: 1900px;
  }

  /* 背景に地図を設ける */
  #title-bg-container{
    padding-bottom: 0;
  }
  /* 画像とテキストのコンテナ */
  #supportArea-contents{
    display: flex;
    flex-direction: column-reverse;
    height: auto;
  }

  /* ステーションスタンド画像（オーバーフロー） */
  .img-overflow{
    position: relative;
    width: 100%;
    height: 300px;
    overflow: hidden;
  }

  /* ステーションスタンド画像 */
  .img-overflow > img{
    position: absolute;
    bottom: 0%;
    transform: translateY(30%);

    display: block;
    width: clamp(982px, calc((1332 - 982) * (100vw - 375px) / (1024 - 375) + 982px), 1332px);
  }

  /* テキストコンテナ（大） */
  #supportArea-contents > .text-container{
    position: relative;
    width: 100%;
    height: 300px;
    background-color: var(--main-color);
  }

  /* 擬似クラス（水玉模様） */
  #supportArea-contents > .text-container::after{
  content: "";
  position: absolute;
  top: 195%;
  left: 75%;
  transform: translate(-50%, -50%);
  z-index: 1;

  width: 432px;
  height: 80px;
  background-image: url("/wp-content/themes/GoodCycling/images/geometlic.svg");
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 1;
  }

  /* テキストコンテナ（中） */
  #text-sub-container{
    width: 100%;
  }

  /* テキスト、Googleのコンテナ（大） */
  #areaMap{
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: normal;

    height: 1100px;
  }

  /* マップ背景 */
  #areaMap::after{
    content: "";
    position: absolute;
    top: 0;
    z-index: -1;

    width: 100%;
    height: 1100px;
    background-image: url("/wp-content/themes/GoodCycling/images/frame_geometric3.png");
    background-repeat: no-repeat;
    background-size: cover;
    opacity: .8;
  }

  /* テキスト、Googleのコンテナ（小） */
  .area{
    width: 90%;
    padding-left: 0px;
    padding-right: 0px;
    margin-top: 48px;
  }
  /* ////対応地域 */


  /* //お客様の声 */
  #review{
    width: 90%;
  }

  /* ポストのコンテナ（中） */
  #review .review-img-frame{
    display: flex;
    flex-direction: column;
    padding: 40px 24px;;
    
    border-radius: 8px;
  }

  /* ポストの顔写真 */
  #review .review-img{
    width: 100px;
    height: 100%;
    margin-bottom: 8px;
    box-shadow: 5px 5px 0px 1px rgba(37, 70, 119);
    border-radius: 5px;
  }

  /* ポストのテキスト（属性、投稿日） */
  #review .post-contents > p{
    margin-left: 0px;
  }

  /* ポストのテキスト（文章） */
  #review .post-contents > p:nth-of-type(2){
    margin-left: 0px;
  }
  /* ////お客様の声 */


  /* //お知らせ */
  #news{
    width: 90%;
  }


  #news .postAssy > .review-img-frame:first-child{
    border-top: 1px solid var(--gray) ;

  }

  /* ポストのコンテナ（中） */
  #news .review-img-frame{
    display: flex;
    flex-direction: column-reverse;
    padding-top: 48px;
    padding-bottom: 48px;
    margin-bottom: 0px;
    border-bottom: 1px solid var(--gray) ;
  }

  /* ポストの写真 */
  #news .news-img{
    display: block;
    width: 70%;
    height: auto;
    margin-top: 8px;
  }


  /* ポストのテキスト（タイトル、投稿日） */
  #news .post-contents > p {
    margin: 0;
  }


  /* ポストのテキスト（文章） */
  #news .post-contents > p:nth-of-type(3){
    margin-left: 0px;
    margin-bottom: 24px;
  }
  /* ////お知らせ */


  /* //よくある質問 */
  /* faqコンテナ（大） */
  .faqAssy{
    width: 90%;
  }

  /* faq質問 */
  .question{
    padding: 16px 8px;
  }

  /* faq質問(pタグ) */
  .question p{
    line-height: 1.5;
  }

  /* faq答え */
  .answer{
    width: 90%;
    margin: 8px auto 24px auto;
  }
  /* ////よくある質問 */


  /* //安全指針 */
  /* ルールのタイトル */
  .rule-title{
    padding: 18px 8px;
  }

  /* 安全指針のテキスト */
  .precautionsList{
    width: 90%;
    margin: 8px auto 24px auto;
  }
  /* ////安全指針 */



  /* //footer */
  /* コンバージョンを下部に設けるための余白 */
  #footer{
    padding-bottom: 100px;
  }

  /* 項目コンテナ */
  #footer-1st > ul{
    display: flex;
    flex-direction: column;

    width: 90%;
    margin: 48px auto 0px auto;
  }

  /* 項目（aタグ） */
  #footer-1st > ul a{
    width: 70%;
    padding: 8px 0px;
    margin: 0 auto;

    border-right: none;
    border-top: 1px solid var(--border2);
  }

  /* 項目の最後（aタグ） */
  #footer-1st > ul li:last-child a{
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border2);
  }

  /* コピーライトコンテナ */
  #copyright{
    position: relative;

    height: 100px;
  }

  /* 街の画像 */
  #copyright::after{
    content: "";
    position: absolute;
    bottom: 15px;
    height: 100px;
  }

  /* コピーライト */
  #copyright > p{
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%, -50%);

    font-size: 1.2rem;
  }
  /* ////footer */







  /* //ページトップボタン（上から下にスクロール） */
  /* 非表示(初期設定) */
  .js-scroll {
    position: fixed;
    right: 10px;
    bottom: 80px;
    z-index: 8888;
  }

  /* フワフワ動く */
  @keyframes arrowmove{
    0%{
      bottom: 105px;
    }
    50%{
      bottom: 110px;
    }
    100%{
      bottom: 105px;
    }
  }

  /* ページトップボタン（aタグ） */
  .js-scroll a {
    font-size: 1.2rem;
  }
  /* ページトップボタンの画像 */
  .js-scroll a::after{
    top: -10px;
    right: -47px;

    width: 45px;
    height: 75px;
  }
  /* ////ページトップボタン（上から下にスクロール） */


  /* //ページトップボタン（下から上にスクロール） */
  /* 非表示(初期設定) */
  .js-pagetop {
    position: fixed;
    right: 60px;
    bottom: 66px;
    z-index: 8888;
  }

  /* ページトップボタン（aタグ） */
  .js-pagetop a {
    font-size: 1.2rem;
  }

  /* ページトップボタンの画像 */
  .js-pagetop a::after{
    top: -10px;
    right: -47px;

    width: 45px;
    height: 75px;
  }
  /* ////ページトップボタン（下から上にスクロール） */
}