@charset "utf-8";

/* reset css */
li {
  list-style: none;
}

/*--------------------全体共通---------------------*/

h1 .big-text {
  font-size: 3rem;
}

/* ---------nav折り返し--------- */
#g-nav-list {
  text-align: left;
}




/* header-nav 改行*/
header p {
  white-space: nowrap;
  display: inline-block;
}

/*--------------------共通---------------------*/

header {
  height: 50vh;
  background-image: url(../images/acti-header2.jpg);
  text-align: center;
}

#logo {
  width: 100px;
  margin: 0 auto;
}

:root {
  /* 緑のboxに入った文字 */
  --green-box-color: #006d1b;
  --course-color: #004e7c;
}

.h2span {
  padding: 0 4%;
}

.sp-wrap {
  display: none;
}

.info-box {
  margin-bottom: 20px;
}

/* -----------table------------ */
table {
  margin: 10px 10px 0 0;
}

th,
td {
  border: solid 2px #000;
  padding: 5px;
  text-align: center;
  line-height: 1.6;
}

th {
  font-weight: normal;
  color: #fff;
  background-color: #143c1a;
}

.course {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 40px;
}

.course:before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border: var(--green-box-color) 3px solid;
  margin-bottom: -2px;
  margin-right: 5px;
  border-radius: 3px;
}

#kayaking .course {
  margin-bottom: 15px;
}

.w1080 {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 4%;
}

.w940 {
  max-width: 940px;
  margin: 0 auto;
  padding: 0 4%;
}

.content {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
}

.content .pic {
  width: 100%;
}

.content .col-left {
  width: 48%;
}

.content .col-right {
  width: 48%;
}

.wrapper-bg {
  height: 100%;
  width: 100vw;
  padding: 60px 30px;
  top: 0;
  left: 0;
  margin-bottom: 40px;
}

header {
  margin-bottom: 100px;
  height: 50vh;
  text-align: center;
}

footer {
  margin-top: 200px;
}

.footerbg {
  min-height: 80vh;
  background-image: url(../images/fuji.jpg);
  background-position: center bottom;
  background-size: cover;
  position: relative;
}

/*-------------------map---------------------*/
.icon-information {
  margin-bottom: 20px;
  padding: 0 4%;
}

.en {
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-weight: 900;
  letter-spacing: 0.1rem;
}

.activity-bg {
  background: url(../images/act-athletic-park1000.jpg) no-repeat center / contain;
  height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
}

.activity-pc {
  background: url(../images/act-map.svg) no-repeat center / contain;
  width: 768px;
  height: 512px;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  position: relative;
}

.activity-inner {
  position: absolute;
  top: 12%;
  left: 12%;
  width: 80%;
  height: 70%;
}

.icon-box {
  position: relative;
  width: 100%;
  height: 100%;
}

.act-icon {
  width: 110px;
  transition: all 0.3s;
  margin-bottom: 0;
}

/* 地図の位置 */
.fish {
  position: absolute;
  bottom: -8%;
  left: 0%;
}

.kaya {
  position: absolute;
  bottom: 33%;
  left: 37%;
}

.sap {
  position: absolute;
  bottom: -5%;
  left: 30%;
}

.boat {
  position: absolute;
  top: 38%;
  left: -5%;
}

/* 文字指定 */
.fish-box,
.kaya-box,
.sap-box,
.boat-box {
  position: relative;
}

.fish-text,
.kaya-text,
.sap-text,
.boat-text,
.zipline-text,
.yoga-text,
.athletic-text,
.hiking-text {
  position: absolute;
  width: 120px;
  height: 120px;
  border-radius: 50%;

  top: -2px;
  left: -5px;
  color: #fff;
  border: #fff 3px solid;
  text-align: center;
  opacity: 0;
  transition: 0.3s;
}

.fish-text,
.kaya-text,
.sap-text,
.boat-text {
  background-color: rgba(0, 72, 131, 0.95);
}

.zipline-text,
.yoga-text,
.athletic-text,
.hiking-text {
  background-color: rgba(2, 123, 28, 0.967);
}

.fish .fish-text .en,
.sap .sap-text .en,
.boat .boat-text .en,
.zipline .zipline-text .en,
.yoga .yoga-text .en,
.athletic .athletic-text .en,
.hiking .hiking-text .en {
  font-size: 24px;
  padding: 5px;
}

.kaya .kaya-text .en {
  font-size: 20px;
}

.fish .fish-text .ja,
.kaya .kaya-text .ja,
.sap .sap-text .ja,
.boat .boat-text .ja,
.zipline .zipline-text .ja,
.yoga .yoga-text .ja,
.athletic .athletic-text .ja,
.hiking .hiking-text .ja {
  font-size: 16px;
  margin-top: -8px;
}

.athletic .athletic-text .ja {
  font-size: 14px;
  line-height: 1.2;
}

.fish:hover .fish-text,
.kaya:hover .kaya-text,
.sap:hover .sap-text,
.boat:hover .boat-text,
.zipline:hover .zipline-text,
.yoga:hover .yoga-text,
.athletic:hover .athletic-text,
.hiking:hover .hiking-text {
  opacity: 1;
  padding-top: 18px;
  transform: scale(1.2);
}

.fish:hover .fish-text,
.yoga:hover .yoga-text {
  padding-top: 24px;
}

.athletic:hover .athletic-text {
  padding-top: 18px;
}

.kaya:hover .kaya-text {
  padding-top: 28px;
}

.zipline {
  position: absolute;
  top: 10%;
  left: 10%;
}

.hiking {
  position: absolute;
  top: 40%;
  right: -5%;
}

.yoga {
  position: absolute;
  bottom: 0%;
  right: 15%;
}

.athletic {
  position: absolute;
  top: 20%;
  right: 20%;
}

.activity-sp {
  display: none;
}

/*--------------------athletic---------------------*/

/* 各sectionのcol-rightの文字間隔の調整 */
#athletic .col-right p,
#hiking .content:nth-of-type(2) .col-right,
#hiking .col-right p,
#yoga p:first-child,
#zipline .col-right p,
#fishing .col-right p,
#kayaking .col-right p,
#boat .col-right p,
#sap .col-right p {
  margin-bottom: 40px;
}

/*--------------------hiking---------------------*/
#hiking .content:first-child {
  margin-bottom: 40px;
}

/*--------------------yoga---------------------*/
/* tab非表示 */
.pc-none {
  display: none;
}

/*--------------------table---------------------*/
/* df使ってる時のtableとの間隔 無いとくっつく*/
.content table {
  width: 100%;
  margin: 0 20px 40px auto;
}

td {
  background-color: #fff;
}

th,
td {
  vertical-align: middle;
}

caption {
  margin-bottom: 15px;
}

/*--------------------tab---------------------*/
#yoga .wrapper-bg {
  background: url(../images/act-yoga-bg1000.jpg) no-repeat center / cover;
}

.bg {
  width: 100vw;
  height: 100vh;
}

/* ----------------------- green-box------------------------ */
.green-box {
  display: inline-block;
  width: 100px;
  padding: 10px 15px;
  letter-spacing: 0.1em;
  background-color: var(--green-box-color);

  color: #fff;
  margin-bottom: 10px;
  text-align: center;
}

#kayaking .green-box,
#sap .green-box {
  width: 160px;
  padding: 5px;
}

.time,
.place {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.place p {
  margin-bottom: 40px;
}

/* ----------------------- green-box end----------------------- */

/* -----------------------zipline----------------------- */
#zipline table:nth-of-type(1) {
  margin-bottom: 40px;
}

/* -----------------------kayaing----------------------- */
#kayaking .wrapper-bg {
  background: url(../images/act-kaya-bg.jpg) no-repeat center / cover;
}

#kayaking .white-bg,
#sap .white-bg {
  background-color: #ffffffd1;
  box-shadow: #636363 3px 3px 6px;
  padding: 30px 20px;
}

#kayaking .tabContent:nth-of-type(2) .content {
  margin-bottom: 20px;
}

/* -----------------------sap----------------------- */
#sap .wrapper-bg {
  background: url(../images/act-sap-bg.jpg) no-repeat center / cover;
}

@media (max-width: 768px) {
  /* 共通  */

  /* header-nav service 改行*/
  .wrap-nav {
    margin: 0.4rem 0 0 2rem;
    display: inline-block;
  }

  #g-nav-list p {
    margin: 0rem 0 0 2rem;
  }

  .activity-sp {
    display: block;
  }

  /* spの時改行 */
  .sp-wrap {
    display: block;
  }

  .content {
    flex-direction: column;
  }

  .content table {
    width: 100%;
    margin: 0 auto;
  }

  #boat .content table {
    margin-bottom: 40px;
  }

  .content .pic {
    margin: 0px;
    width: 100%;
  }

  .content .col-left,
  .content .col-right {
    width: 100%;
  }

  /* yoga.kayaking.sap-bg*/
  .wrapper-bg {
    padding: 30px 4%;
  }

  /* -----------------------map----------------------- */
  /* map非表示 */
  .activity-bg {
    display: none;
  }

  .act-icon {
    width: 120px;
    padding-bottom: 5px;
  }

  .en {
    font-size: 24px;
  }

  /*--------------------map sp！！！！！---------------------*/

  .activity-sp {
    background-color: #004110;
    padding: 60px 30px;
    color: #fff;
  }

  .activity-sp ul {
    display: flex;
    justify-content: center;
    /* justify-content: flex-start;だとicon左揃え */
    flex-wrap: wrap;
    gap: 40px;
    max-width: 500px;
    margin: 0 auto;
  }

  .activity-sp ul li {
    text-align: center;
    transition: all 0.3s;
  }

  .activity-sp ul li:hover {
    transform: scale(1.2);
    opacity: 0.5;
  }

  /*--------------------athletic sp---------------------*/
  #athletic .content .col-right {
    display: flex;
    flex-direction: column-reverse;
  }

  #athletic .content .col-left p {
    margin-bottom: 40px;
  }

  /*--------------------hiking sp---------------------*/
  #hiking .content .col-left {
    display: flex;
    flex-direction: column-reverse;
  }

  /*--------------------yoga sp---------------------*/

  .tabGroup {
    display: none;
  }

  .pc-none {
    display: block;
  }

  .pc-none li {
    margin-bottom: 40px;
  }

  #yoga .pc-none li p:first-child {
    font-size: 18 px;
    font-weight: 700;
    margin-bottom: 15px;
  }

  /* footer */
  .leftbox {
    font-size: 1.2em;
  }
}

@media (max-width: 400px) {
  .content table {
    width: 100%;
  }
}