/* ---------------リセット--------------- */
*,
*::before,
*::after {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
/* body */
body {
  font-family: "メイリオ", "Hiragino Kaku Gothic Pro", sans-serif;
  color: var(--c01);
  margin: 0 8px 100px 8px;
}
/* a */
a {
  color: var(--c01);
  text-decoration: none;
}
a:hover {
  color: var(--c01);
}
/* ul */
ul {
  list-style: none;
}
/* i */
i {
  margin-right: 5px;
}
img {
  max-width: 100%;
  margin: auto;
}

/* ---------------文字色--------------- */
:root {
  --c01: #3b3b3be0;
}
/* NAV */
:root {
  --c02: #376ea48c;
}
/* NAVホバー */
:root {
  --c07: #5b93cb59;
}
/* 灰色ライン用、フォントオーサム */
:root {
  --c03: #a8a8a8;
}
/* 灰色塗りつぶし */
:root {
  --c04: #eeeeee;
}
/* 灰色ホバー */
:root {
  --c05: #f3f3f3;
}
/* 強調エリア */
:root {
  /* --c06: #ebf3ff62; */
  --c06: #edf3fd;
}
/* NAV_plants */
:root {
  --c08: #77a2afa0;
}
/* NAV_plantsホバー */
:root {
  --c09: #859db531;
}

/* ---------------ナビゲーション--------------- */
nav {
  background-color: var(--c08);
  margin-left: -6px;
  margin-right: -6px;
}
nav li a {
  display: block;
  color: #ffffff;
  padding: 15px 10px 15px 10px;
  font-size: 16px;
}
nav li a:hover {
  color: #ffffff;
  background-color: var(--c09);
}
nav ul:after {
  content: "";
  display: block;
  clear: both;
}
nav ul {
  padding-left: 20px;
}
nav li {
  float: left;
  width: auto;
}
/* ---------------サブリスト--------------- */
ul.menu ul {
  display: none;
  position: absolute;
  background-color: #8caed1;
  padding-left: 10px;
  padding-right: 10px;
}
ul.menu li:hover ul {
  display: block;
}
ul.menu ul a {
  font-size: 14px;
}
ul.menu ul li {
  float: none;
  text-decoration: underline;
  text-decoration-color: #ffffff;
}

/* ---------------トップ写真--------------- */
.topimg {
  display: block;
}

/* ---------------article--------------- */
article h1 {
  font-size: 18px;
  border: solid 1px var(--c03);
  border-radius: 0.4em;
  padding: 12px 5px 12px 10px;
  margin: 0px 5px 16px 3px;
}
.top h1 {
  border: none;
  /* line-height: 27px; */
  line-height: 45px;
  text-align: center;
  /* font-size: 17px; */
  font-size: 19px;
  margin-top: -20px;
  margin-bottom: 0px;
  color: #6f6f6f;
}

article h2 {
  padding-left: 4px;
  padding-bottom: 4px;
  margin-top: 55px;
  border-left: solid 22px var(--c02);
  border-bottom: solid 1px var(--c03);
  font-size: 18px;
  line-height: 1.5;
}
.h2mt {
  margin-top: 40px;
}
article h3 {
  padding-left: 7px;
  padding-top: 1px;
  margin-top: 45px;
  margin-left: 4px;
  border-left: solid 7px var(--c02);
  font-weight: normal;
  font-size: 17px;
  line-height: 1;
  /* text-decoration: underline 1px rgb(156, 156, 156); */
  font-weight: bold;
  color: #484848b0;
}
article p {
  margin-top: 1em;
  letter-spacing: 1px;
  line-height: 32px;
  text-align: justify;
}

article a {
  text-decoration: underline;
  text-decoration-color: #464646;
}

article a:hover {
  text-decoration: none;
}
article ul {
  list-style: disc;
  margin: 15px 0px 10px -10px;
  letter-spacing: 1px;
  line-height: 29px;
}
article li {
  padding-top: 3px;
  padding-bottom: 3px;
}
/* フォントオーサム基本色 */
.gr {
  color: var(--c03);
  margin-right: 4px;
}

/* ---------------indexのサイズ調整--------------- */
.ind {
  margin-bottom: 47px;
}

/* ---------------aside--------------- */
aside {
  padding: 13px 0 30px 0;
}
aside h3 {
  padding: 0;
  margin: 0 10px 12px 0;
  border-bottom: dotted 2px var(--c03);
  font-size: 14px;
  border-left: 0px;
}
aside ul {
  margin: 0;
  padding-left: 1px;
  margin-bottom: 35px;
  list-style: none;
  color: var(--c03);
}
aside li {
  margin: 0;
  letter-spacing: 1.3px;
  list-style: disc;
  margin-left: 20px;
}
aside li a {
  display: block;
  padding: 5px;
  font-size: 13px;
  text-decoration: none;
  color: var(--c01);
  margin-left: -8px;
}
aside li a:hover {
  background-color: var(--c04);
}
.tre {
  color: var(--c03);
  margin-right: 4px;
}

aside .gr {
  font-size: 13px;
}

/* ---------------footer--------------- */
footer {
  border-top: solid 1px var(--c03);
  text-align: center;
  padding: 15px 0px 10px 0px;
  margin-top: 70px;
  font-size: 14px;
}

/* ---------------logo--------------- */
.logo {
  padding: 20px 0px 0px 5px;
  margin-bottom: -21px;
  /*　SNSボタンのための調整（ネガティブmargin） */
}

/* ---------------sns--------------- */
.sns {
  text-align: right;
  margin: 2px 3px 0px 0px;
  font-size: 13px;
}
.sns a {
  margin-right: 5px;
  text-decoration: none;
  color: var(--c01);
  display: inline-flex;
  align-items: center;
  gap: 1px; /* アイコンとテキストの間隔 */
}
.sns a:hover {
  background-color: var(--c04);
}

/* ---------------table--------------- */
table {
  border-collapse: collapse;
  width: 100%;
  margin-top: 15px;
  margin-bottom: 25px;
}
th {
  border: 1px solid var(--c03);
  padding: 8px 10px 8px 15px;
  text-align: left;
  font-weight: normal;
  font-size: 14px;
}
td {
  border: 1px solid var(--c03);
  padding: 8px 10px;
  line-height: 25px;
  letter-spacing: 2px;
  font-size: 14px;
}
/* 富士山装備表の列幅 */
.tdf30 {
  width: 30%;
}
/* 富士山食事表の見出し */
caption {
  caption-side: top;
  margin-left: 5px;
  color: #000000b4;
  font-size: 14px;
}

/* ---------------ボタン--------------- */
.btn {
  display: flex;
  flex-direction: column;
  width: 250px;
  margin-top: -15px;
}
.btn a {
  border-radius: 5px;
  background-color: #c6c6c628;
  border-style: none;
  font-size: 15px;
  text-align: center;
  padding: 8px 10px 8px 0px;
  margin-bottom: 5px;
  margin-left: -12px;
  color: #3f3f3f;
  text-decoration: none;
}
.btn a:hover {
  background-color: var(--c05);
  color: #7e7e7e;
  text-decoration: underline;
}

/* ---------------sub-nav--------------- */
.sub-nav {
  margin: 0 0 0px 8px;
}
.sub-nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-nav li {
  float: left;
  width: auto;
}
.sub-nav a {
  display: block;
  padding: 2px 7px 2px 7px;
  margin: -2px 2px 1px 0;
  border-radius: 18px;
  background-color: var(--c04);
  border-style: none;
  text-decoration: none;
  font-size: 14px;
}
.sub-nav li a:hover {
  background-color: var(--c05);
  color: #7e7e7e;
}
.sub-nav ul:after {
  content: "";
  display: block;
  clear: both;
}
.mb {
  margin-bottom: 35px;
}

/* ---------------パンくず--------------- */
.breadcrumb {
  padding-left: 10px;
  margin: 12px 0;
  font-size: 13px;
}
.breadcrumb-item.active {
  color: var(--c01);
}
.breadcrumb a {
  color: var(--c01);
  text-decoration: underline;
  text-decoration-color: var(--c03);
}

/* ---------------強調エリア--------------- */
.empha {
  padding: 5px 10px 10px 10px;
  margin: 5px 5px 15px 2px;
  border-radius: 5px;
  background-color: var(--c06);
  color: #474747;
}
.empha h2 {
  padding: 15px 0px 0px 5px;
  border-left: 0px;
  margin-top: 1px;
  font-size: 15px;
}

.empha h3 {
  margin-top: 20px;
}

.empha h3.ach {
  padding: 15px 0px 5px 5px;
  border-left: 0px;
  margin-top: 1px;
  font-size: 15px;
  border-bottom: solid 1px var(--c03);
  font-weight: normal;
  color: #000;
}

.empha p {
  margin: 15px 5px 10px 5px;
  letter-spacing: 1px;
  line-height: 29px;
  font-size: 13px;
}
.empha ul {
  list-style: disc;
  margin: 15px 5px 10px 5px;
  letter-spacing: 1px;
  line-height: 29px;
  font-size: 13px;
}

/* ---------------蛍光ペン--------------- */
.marker {
  background: linear-gradient(transparent 0%, #d8f5c275 0%);
  color: #000000;
}
.marker2 {
  background: linear-gradient(transparent 0%, #ff206a15 0%);
  color: #000000;
}

/* ---------------必須装備※印--------------- */
.must {
  color: #df713ebd;
}

/* ------------富士山こだわり------------ */
.com {
  list-style: decimal;
  margin-left: 5px;
  margin-top: 30px;
  border-radius: 5px;
  background-color: var(--c06);
}

/* ------------富士山アクセスアコーディオン------------ */
details {
  padding: 20px 0px 0px 10px;
  margin: 0px 10px 0px 0;
  font-weight: normal;
}
summary {
  font-size: 17px;
  margin-bottom: 10px;
  text-decoration: underline;
}
details[open] summary {
  text-decoration: none;
}

/* ----------植物トレッキングスケジュール---------- */
.cats ul {
  margin: 2px 0 5px 0;
  padding-left: 3px;
}
.cats li {
  display: inline-block;
  border-radius: 6px;
  color: #ffffff;
  padding: 2px 5px 1px 5px;
  margin: 4px 5px 8px -5px;
  font-size: 12px;
  line-height: 15px;
}
.plants a {
  font-size: 18px;
  text-decoration: underline;
  letter-spacing: 2px;
}
.plants a:hover {
  color: var(--c03);
}
.plants p {
  margin: 12px 0 12px 1px;
  letter-spacing: 1.7px;
  line-height: 25px;
  text-indent: 0;
}
.plants tr td:nth-of-type(1) {
  padding: 8px 10px;
}
summary {
  margin-left: 5px;
}

/* ----------カテゴリーカラー---------- */
.green {
  background-color: rgba(115, 186, 108, 0.751);
}
.moss {
  background-color: rgba(94, 190, 85, 0.849);
}
.gray {
  background-color: #969696;
}
.viola {
  background-color: rgba(144, 91, 230, 0.479);
}
.orange {
  background-color: rgba(214, 146, 67, 0.61);
}
.blue {
  background-color: rgba(46, 122, 198, 0.52);
}
.mtfj {
  background-color: rgba(33, 120, 206, 0.5);
}
.pvg {
  background-color: rgba(219, 99, 99, 0.5);
}
.acer {
  background-color: rgba(207, 57, 19, 0.514);
}
.pop {
  background-color: rgb(224, 194, 21);
}
.poy {
  background-color: rgb(245, 205, 26);
}
.pop2 {
  background-color: rgba(182, 154, 64, 0.74);
}
.night {
  background-color: #376da4;
}

/* ---------------植物トレッキング個別ページ--------------- */
.tdw {
  width: 80px;
}
/* リンクマーク */
.gr2 {
  color: var(--c03);
  margin-left: 6px;
}
/* リストマーク消 */
.step li {
  list-style: none;
}

/* ---------------X過去ツアー埋め込み--------------- */
.twitter-tweet {
  max-width: 400px !important;
  width: 85% !important;
  margin: 35px auto !important;
}

/* ---------------photo-grid--------------- */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0 5px;
  font-size: 15px;
}
.photo-item {
  text-align: center;
}
.photo-item img {
  width: 100%;
  height: auto;
  border-radius: 2%;
  margin-bottom: 2px;
}
.photo-item a {
  display: block;
  text-decoration: none;
  color: var(--color01);
  margin-top: 5px;
}
.photo-item a:hover {
  text-decoration: underline;
  filter: opacity(70%);
}

/* ---------------ガイド紹介--------------- */
.name {
  font-size: 20px;
  line-height: 24px;
  margin-left: 7px;
  margin-bottom: 5px;
}
.info {
  font-size: 14px;
  list-style: none;
  line-height: 16px;
  margin-left: -23px;
  margin-top: 14px;
}

/* ---------------TEL--------------- */
.tel {
  margin-top: 30px;
}

/* ---------------レスポンシブ--------------- */
@media (max-width: 749px) {
  /* main {
    background-color: #376da47e;
  } */
  aside:after {
    content: "";
    display: block;
    clear: both;
  }
  .box1 {
    float: left;
    width: 50%;
  }
  .box2 {
    float: left;
    width: 50%;
  }
  article {
    margin-bottom: 120px;
  }
  aside {
    margin: 0 10px;
    color: #000000;
  }
  aside .gr {
    color: var(--c03);
    margin-right: 3px;
    font-size: 12px;
  }
  aside h3 {
    font-size: 13px;
  }
  /* スマホ向けNAV */
  nav ul {
    padding: 5px 6px 5px 6px;
  }
  nav li a {
    padding: 4px 5px 4px 5px;
    font-size: 17px;
  }
  /* スマホ向け文字サイズ */
  article p,
  article ul,
  .empha p,
  .empha ul {
    font-size: 16px;
    letter-spacing: 0.2px;
  }
  article h2 {
    font-size: 19px;
  }
  /* スマホ向け文字色 */
  :root {
    --c01: #000000e0;
  }
  /* H1調整 */
  .top {
    margin-top: -35px;
  }
}
@media (min-width: 750px) {
  /* main {
    background-color: #3ba43736;
  } */
  article p,
  article ul {
    font-size: 13px;
  }
  main:after {
    content: "";
    display: block;
    clear: both;
  }
  article {
    float: left;
    width: 70%;
    padding-right: 25px;
  }
  aside {
    float: left;
    width: 30%;
  }
  nav,
  main,
  footer,
  .logo,
  .sns,
  .breadcrumb {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
  }
}