@charset "UTF-8";
/*
COLORS
================================================ */
:root {
  --light-blue: #4db1ec;
  --blue: #1665cc;
  --purple: #b473bf;
  --pink: #ffb2c1;
  --orange: #ff9f67;
  --yellow: #ffd673;
  --light-green: #a2e29b;
  --green: #00a2af;
  --grey: #333;
  --light-grey: #eee;
  --white: #fff;
  --broun: #403632;
  --present-color: yellow;
  --text: #333;
  --bg: #fff;
  --video-opacity: .5;
  --oswald-font: "Oswald", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text: #ddd;
    --bg: #000;
    --video-opacity: .7;
  }
}
.present {
  color: brown;
}

/*
GENERAL STYLING
================================================ */
html {
  font-size: 100%;
  /* スムーズスクロール */
  scroll-behavior: smooth;
}

body {
  color: var(--grey);
  background: var(--bg);
  font-family: "Bree Serif", sans-serif;
  transition: 0.5s;
}

/*
COMMON
================================================ */
p {
  line-height: 1.7;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 1rem;
  align-items: center;
}

img {
  max-width: 100%;
}

h1 {
  font-size: 2rem;
  color: yellow;
  padding-top: 5rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}

h3 {
  font-size: 1.25rem;
  color: green;
  padding-bottom: 1rem;
}

h4 {
  font-size: 1.1rem;
  color: #cc16c0;
  padding-bottom: 1rem;
}

h1,
h2 {
  text-align: center;
}

header,
h1,
h2,
.hero-date {
  font-family: impact, sans-serif;
}

a:hover {
  color: #0bd;
}

.note {
  font-size: 0.8em;
  vertical-align: top;
}

.indent {
  margin-left: 1rem;
  text-indent: -1rem;
  margin-bottom: 0rem;
}

.sub-title {
  font-size: 2.5rem;
  font-family: "Philosopher", serif;
  padding: 0 8px 8px;
  border-top: 2px #0bd solid;
  font-weight: normal;
  color: orange;
}

.frame {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--text);
}

.frame-law {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid;
  border: thick double;
  border-color: var(--text);
}

.content-nav {
  padding-left: 2rem;
}

.content-nav a {
  text-decoration: none;
  color: var(--text);
}

.content-nav a:hover {
  color: #0bd;
}

.content-list {
  font-size: 1rem;
}

a {
  text-decoration: underline;
  color: var(--text);
}

.submenu h3 {
  margin: 0 0 1em 0;
  font-size: 16px;
  cursor: pointer;
  color: orange;
  padding-bottom: 0rem;
}

.submenu h3:hover {
  color: #b04188;
  text-decoration: underline;
}

.submenu ul {
  margin: 0 0 1em 0;
  list-style-type: none;
}

.hidden {
  display: none;
}

.col_color {
  color: var(--light-blue);
}

/* Layout */
.wrapper {
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/*
.container {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--text);
    margin-bottom: 10px;
}
*/
.container-between {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-bottom: 20px;
}

/*
.container-left {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    color: var(--text);
    margin-bottom: 10px;
}
*/
/* image */
/*
.img-mobile-w {
    width: 400px;
}
.img-mobile-w400 {
    width: 400px;
}
.img-mobile-h {
    height: 400px;
}
*/
/*
.img-note {
    padding-left: 1rem;
    min-width: 100px;
    max-width: 600px;
}
*/
/* grid */
.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.grid3 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 10px;
  margin-bottom: 20px;
}

.grid4 {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 10px;
  margin-bottom: 20px;
}

/* TABLE */
table {
  margin: 1rem 0;
  width: auto;
}

th {
  font-weight: normal;
  background: #f8f6f2;
  vertical-align: middle;
  padding: 0.5rem;
}

td {
  padding: 0.5rem 0.5rem;
}

th,
td {
  display: block;
}

.tbl-item-color {
  color: #cc16c0;
}

/*
td:nth-child(1) {
    background: #f8f6f2;
    color: #cc16c0;
}
td:nth-child(even) th {
    background: #fff;
}
*/
.noborder {
  border: none;
}

.border1 td {
  border: 1px solid;
}

/* list */
.no-point {
  list-style: none;
  padding-left: 0;
}

/* ページ送り */
.pagination {
  display: flex;
  justify-content: center;
}

.prev,
.next {
  display: inline-block;
  background: #0bd;
  color: #fff;
  margin: 0 1px;
  text-decoration: none;
}

.prev:hover,
.next:hover {
  background: #0090aa;
}

.prev {
  border-radius: 2rem 0 0 2rem;
  padding: 1rem 1rem 1rem 2rem;
  color: blue;
}

.next {
  border-radius: 0 2rem 2rem 0;
  padding: 1rem 2rem 1rem 1rem;
  text-align: right;
  color: blue;
}

.page-num {
  background-color: #0bd;
  width: 80px;
  text-align: center;
}

/* Return */
.return-top {
  background: #0bd;
  padding: 0.5rem 1rem;
  border: 1px solid var(--text);
  color: black;
}

.right-shift {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 2rem;
}

/* slideshow  */
#slideshow {
  position: relative;
}

.leftArrow {
  position: absolute;
  top: 50%;
  left: 50px;
  transform: translateY(-50%);
  color: red;
}

.rightArrow {
  position: absolute;
  top: 50%;
  right: 50px;
  transform: translateY(-50%);
  color: red;
}

#slideshow img {
  max-width: 70%;
  max-height: 600px;
  display: block;
  margin-top: 50px;
  margin-left: auto;
  margin-right: auto;
}

.addClass {
  text-align: center;
  margin-top: 20px;
  color: white;
}

.addClass2 {
  width: 200px;
  display: block;
  border: none;
  margin-top: 20px;
  margin-left: auto;
  margin-right: auto;
  background-color: #9ec34b;
  color: black;
}

/* slideshow2  */
.slide {
  margin: 0 auto;
  border: 1px solid black;
  width: 320px;
  background-color: black;
}

@media (min-width: 600px) {
  .slide {
    margin: 0 auto;
    border: 1px solid black;
    width: 650px;
    background-color: black;
  }
}
.toolbar {
  overflow: hidden;
  text-align: center;
}

.slide_nav {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 16px 0;
}

#slide_prev {
  margin-right: 0.5rem;
  width: 16px;
  height: 16px;
  background: url(../images/arrow-left.svg) no-repeat;
}

#slide_prev_2 {
  margin-right: 0.5rem;
  width: 16px;
  height: 16px;
  background: url(../images/arrow-left_2.svg) no-repeat;
}

#slide_next {
  margin-left: 0.5rem;
  width: 16px;
  height: 16px;
  background: url(../images/arrow-right.svg) no-repeat;
}

#slide_next_2 {
  margin-left: 0.5rem;
  width: 16px;
  height: 16px;
  background: url(../images/arrow-right_2.svg) no-repeat;
}

#page {
  color: white;
}

#page_2 {
  color: white;
}

#play {
  margin-left: 1rem;
  color: #fff;
}

#play_2 {
  margin-left: 1rem;
  color: #fff;
}

#stop {
  margin-left: 1rem;
  color: yellow;
}

#stop_2 {
  margin-left: 1rem;
  color: yellow;
}

.slide_container {
  max-width: 100px;
  margin: 0;
  padding: 16px;
}

@media (min-width: 600px) {
  .slide_container {
    width: 50%;
    margin: 0;
    padding: 0;
  }
}
.image_box {
  max-width: 100%;
}

@media (min-width: 600px) {
  .image_box {
    width: 100%;
  }
}
#first {
  color: #fff;
}

#first_2 {
  color: #fff;
}

#main_cap {
  color: white;
}

#main_cap_2 {
  color: white;
}

/* ボタン */
.button {
  font-size: 1.375rem;
  background: goldenrod;
  color: #fff;
  border-radius: 5px;
  padding: 18px 32px;
}

.button:hover {
  background: #0090aa;
}

/*
LOADING
================================================ */
#loading {
  background-color: var(--light-grey);
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

#loading-screen {
  background-color: var(--light-green);
  position: fixed;
  inset: 0;
  z-index: 9998;
  translate: 0 100vh;
}

#loading p {
  font-size: 2rem;
  font-family: var(--oswald-font);
  color: black;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  /* Common */
  h2 {
    font-size: 3rem;
  }
  a:hover {
    color: var(--blue);
  }
  a:hover,
.ticket-btn:hover {
    transition: 0.3s;
  }
  .ticket-btn:hover {
    background: var(--blue);
  }
  .wrapper {
    max-width: 1800px;
    min-width: 600px;
    width: 100%;
    margin: 0 auto;
    padding: 0 1rem;
  }
  .content-list {
    position: -webkit-sticky;
    position: sticky;
    top: 1rem;
  }
  th,
td {
    padding: 1.25rem;
    display: table-cell;
  }
  tr:nth-child(odd) {
    background: none;
  }
  tr:nth-child(even) {
    background: none;
  }
  .container {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    color: var(--text);
    padding: 0rem;
    margin-bottom: 10px;
  }
  .container-text {
    width: 74%;
    align: left;
    width: 50vw;
    margin-bottom: 0;
  }
  .container-img {
    max-width: 450px;
    margin-left: 10px;
  }
  /* grid */
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  }
  /* image  */
  .img-w {
    width: 600px;
    height: auto;
  }
  .img-w400 {
    width: 50%;
    height: 50%;
  }
  .img-h {
    width: auto;
    height: 600px;
  }
}
/*
HEADER
================================================ */
header {
  background: var(--grey);
  /*    margin-left: 100rem; */
  /* 固定表示のための記述 */
  padding: 1rem 0;
  position: fixed;
  width: 100%;
  z-index: 1;
}

.page-header {
  display: flex;
  justify-content: space-between;
}

header .wrapper {
  width: 100%;
}

header a {
  color: var(--white);
  font-size: 1.125rem;
}

.logo {
  width: 50px;
}

.btn-menu {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--white);
  padding: 0.5rem 1rem;
}

.main-nav {
  background: var(--grey);
  width: 0;
  position: absolute;
  z-index: 2;
  top: 50px;
  right: 0;
  overflow: hidden;
  transition: 0.5s;
  font-size: 1rem;
  color: var(--text);
}

.main-nav li {
  text-align: center;
  z-index: 3;
  margin: 2rem 0;
}

/*
.menu-size {
    font-size: 1.125rem;
}
*/
.main-nav a {
  display: block;
  font-size: 1.125rem;
}

/* メニューが、Menuクリックで表示し、Closeクリックで非表示 */
.main-nav.open-menu {
  width: 100%;
}

.page-root {
  display: flex;
  padding-top: 0;
  padding-left: 1rem;
  padding-bottom: 2rem;
}

.color-dark {
  color: var(--text);
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  /* Header */
  .btn-menu {
    display: none;
    top: 20px;
    right: 12px;
  }
  .main-nav {
    width: 100%;
    font-size: 1.125rem;
    position: static;
    display: flex;
  }
  .main-nav li {
    margin: 0 0 0 1.5rem;
  }
  /*
  .menu-size {
      font-size: 1.25rem;
  }
  */
  .pre-title {
    font-size: 3.5rem;
  }
  /*
  .page-title {
      font-size: 5rem;
  }
  */
}
/* ------ HERO ------ */
#hero {
  /* ↓ 省略形だとブラウザーによってうまく表示されない
  background: var(--light-blue) url('../images/earthsunrise.jpg') no-repeat center / cover; */
  background-color: var(--light-blue);
  background-image: url("../images/wall.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-blend-mode: screen;
  -webkit-animation: bg-color 24s infinite;
          animation: bg-color 24s infinite;
  height: 100vh;
  display: flex;
  align-items: center;
  /*-webkit-clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);*/
  /*clip-path: polygon(0 0, 100% 0, 100% 90%, 0 100%);*/
}

@-webkit-keyframes bg-color {
  0% {
    background-color: var(--light-blue);
  }
  12.5% {
    background-color: var(--blue);
  }
  25% {
    background-color: var(--purple);
  }
  37.5% {
    background-color: var(--pink);
  }
  50% {
    background-color: var(--orange);
  }
  62.5% {
    background-color: var(--yellow);
  }
  75% {
    background-color: var(--light-green);
  }
  87.5% {
    background-color: var(--green);
  }
  100% {
    background-color: var(--light-blue);
  }
}

@keyframes bg-color {
  0% {
    background-color: var(--light-blue);
  }
  12.5% {
    background-color: var(--blue);
  }
  25% {
    background-color: var(--purple);
  }
  37.5% {
    background-color: var(--pink);
  }
  50% {
    background-color: var(--orange);
  }
  62.5% {
    background-color: var(--yellow);
  }
  75% {
    background-color: var(--light-green);
  }
  87.5% {
    background-color: var(--green);
  }
  100% {
    background-color: var(--light-blue);
  }
}
#hero h1 {
  font-size: 3.5rem;
  margin-bottom: 1.5rem;
}

/* ------ NEWS ------ */
#news {
  background-image: linear-gradient(var(--light-green), var(--green));
  padding: 1rem 1rem;
  /*-webkit-clip-path: polygon(0 0, 100% 5%, 100% 95%, 0 100%);*/
  /*clip-path: polygon(0 0, 100% 10%, 100% 90%, 0 100%);*/
}

#news h2 {
  background: linear-gradient(var(--light-blue), var(--blue));
  color: var(--blue);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* table */
.news-table {
  /* color: var(--white); */
  width: 100%;
}

.news-table tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.news-table td {
  line-height: 1.5;
}

.news-date {
  font-size: 0.875rem;
  padding-top: 1rem;
  width: 180px;
}

.news-content {
  padding-bottom: 1rem;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  /* Hero */
  #hero h1 {
    font-size: 6rem;
  }
  #hero p {
    text-align: center;
  }
  .hero-date {
    font-size: 3rem;
  }
  /* News */
  .news-table td {
    display: table-cell;
  }
  .news-date {
    padding: 1.125rem 0 1rem 1rem;
  }
  .news-content {
    padding: 1rem 1rem 1rem 0;
  }
}
/*
GALLERY
================================================ */
#gallery {
  position: relative;
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  /*
  background-image: url('../images/wall.jpg');
  background-position: center;
  background-size: cover;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;
  */
}

.gallery-title {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*    z-index: 2; */
  text-align: center;
}

.gallery-title,
#gallery video {
  width: 100vw;
  height: 90vh;
}

/*
.gallery-title-pattern {
    position: absolute;
    z-index: 1;
    background-size: auto auto;
    background-image: repeating-linear-gradient(0deg, transparent, transparent 2px, var(--bg) 2px, var(--bg) 4px );
}
.gallery-title-pattern {
    width: 100vw;
    height: 90vw;
}
*/
#gallery video {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: var(video-opacity);
}

#gallery p {
  font-size: 1.5rem;
  color: yellow;
  margin-bottom: 1rem;
  align-items: center;
}

.gallery-note {
  background-color: #a2e29b;
  padding: 1rem 2rem;
  margin-top: 0;
  margin-bottom: 1rem;
}

.gallery-note p {
  line-height: 1.7;
  color: black;
}

/*
GALLERY2
================================================ */
.gallery {
  display: flex;
  flex-direction: column-reverse;
}

.gallery-image {
  width: min(100%, 36rem);
  margin: auto;
  position: relative;
}

.gallery-image::after {
  display: block;
  content: "";
  width: calc(100% - 2rem);
  height: calc(100% - 2.5rem);
  z-index: 3;
  border: 3px solid var(--white);
  top: 1rem;
  left: 1rem;
  position: absolute;
}

.gallery-image img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

.gallery-thumbnails {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  margin: 1rem 0;
}

.gallery-thumbnails img {
  aspect-ratio: 4/3;
  -o-object-fit: cover;
     object-fit: cover;
  cursor: pointer;
}

/*
GRID
================================================ */
.gallery-grid {
  width: 94vw;
  margin: 0 auto 3vw;
  display: grid;
  gap: 2vw;
  grid-template-columns: repeat(2, 46vw); /* (94 - 2) / 2 */
  grid-template-rows: repeat(8, 46vw);
}

.grid-item {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
  filter: grayscale(100%);
}

.grid-big-top {
  grid-column: 1/3;
  grid-row: 2/3;
}

.grid-big-bottom {
  grid-column: 1/3;
  grid-row: 6/7;
}

/*
LIGHTBOX LUMINOUS
================================================ */
.lum-lightbox.lum-open {
  z-index: 4;
}

.lum-lightbox-inner img {
  max-width: 120vw;
  max-height: 80vh;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  /* gallery */
  #gallery h1 {
    font-size: 3.5rem;
  }
  #gallery p {
    font-size: 2rem;
  }
  /* GALLERY2 */
  .gallery {
    flex-direction: row;
  }
  .gallery-image {
    width: 50vw;
    margin: 0;
  }
  .gallery-image img {
    height: 100vh;
  }
  .gallery-content {
    width: 30vw;
  }
  .gallery-thumbnails {
    gap: 2vw;
    grid-template-columns: repeat(3, 1fr);
  }
  .gallery-thumbnails img:hover {
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
    transition: 0.4s;
  }
  /* gallery grid */
  .gallery-grid {
    width: 80vw;
    gap: 1vw;
    grid-template-columns: repeat(3, 26vw); /* (80 - 2) / 3 */
    grid-template-rows: repeat(5, 26vw);
  }
  .grid-big-bottom {
    grid-column: 2/4;
    grid-row: 4/5;
  }
  .grid-item {
    transition: 0.3s;
  }
  .grid-item:hover {
    filter: grayscale(0);
    box-shadow: 0 0 2rem rgba(0, 0, 0, 0.5);
    transform: scale(1.1);
    z-index: 3;
    position: relative;
  }
}
#seasons {
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  background-image: url("../images/wintersheep.jpg");
  background-position: center;
  background-size: cover;
  height: 40vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/*
DESKTOP SIZE
================================================ */
#information {
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  background-image: url("../images/bookshelf.jpg");
  background-position: center;
  background-size: cover;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  /*margin-bottom: 20px;*/
}

.inform-content {
  width: auto;
}

.inform-main {
  min-width: 300px;
}

.info-p {
  color: #000;
}

/* table */
.info-table td:nth-child(1) {
  background: #f8f6f2;
  color: #cc16c0;
}

.info-table td:nth-child(even) th {
  background: #fff;
}

/* camera */
.example-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 20px;
}

.camera-example-img {
  min-width: 300px;
  text-align: center;
}

.camera-example-txt {
  width: auto;
  text-align: left;
}

/* end of camera */
/*
.inform-contents p {*/
/*    font-size: 1.125rem; */
/*    margin: 10px 0 0;*/
/*    }*/
/* journal */
.info-mix-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin-bottom: 20px;
}

.info-mix-img {
  min-width: 300px;
}

.info-mix-txt {
  width: auto;
  min-width: 300px;
  padding: 0 0.5rem;
}

/* end of jounal */
#information table {
  border: 1;
}

.inform-class1 {
  width: 100%;
  max-width: 500px;
  min-width: 300px;
  height: auto;
}

/* CALEN
------------------------------- */
.calen-content {
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
}

.input-area {
  margin-bottom: 100px;
}

input[type=text] {
  background: #0bd;
  width: 100px;
  height: 30px;
  color: var(--text);
  padding: 1em;
}

select {
  background: #0bd;
  width: 100px;
  height: 30px;
  color: #000;
  padding-left: 1em;
}

.calen-era {
  width: auto;
  margin-left: 40px;
  color: var(--text);
  border-collapse: collapse;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  /* information */
  h1 {
    font-size: 3.5rem;
  }
  h2 {
    font-size: 2rem;
  }
  p {
    font-size: 1rem;
  }
  .inform-content {
    width: 20%;
  }
  .inform-main {
    width: 75%;
  }
  /*
  .example-container {
      justify-content: flex-start;
      margin-bottom: 20px;
  }  */
  .camera-example-img {
    width: 600px;
  }
  .camera-example-txt {
    max-width: 600px;
    min-width: 300px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }
}
#trip {
  position: relative;
}

.trip-title {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.trip-title {
  width: 100vw;
  height: 90vh;
}

#trip video {
  width: 100vw;
  height: 90vh;
}

#trip h1 {
  color: #cc16c0;
}

.trip-text0 {
  padding-top: 10rem;
  padding-left: 1rem;
}

.trip-p {
  color: #000;
}

#trip video {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: var(--video-opacity);
}

.trip-text {
  margin-left: 0rem;
}

/*
.trip-img {
    width: 400px;
    padding-left: 1rem;
}
*/
#trip .item1 {
  background: gray;
  padding-left: 7px;
  padding-top: 7px;
  padding-right: 7px;
}

.trip-contents p {
  font-size: 1rem;
  margin: 10px 0 0 10px;
  margin-bottom: 20px;
}

/*
.trip-text{
    width: 500px;
    margin-left: 20px;
}
*/
/*
joumon
================================================ */
#joumon {
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  background-image: url("../images/wall.jpg");
  background-position: center;
  background-size: cover;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/*
koheji
================================================ */
#koheji {
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  background-image: url("../images/wall.jpg");
  background-position: center;
  background-size: cover;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/* trip image 
-------------------- */
.img-class-1 {
  width: 100%;
}

.img-class-2 {
  width: 100%;
}

.img-class-w {
  width: 100%;
}

.class1 {
  width: 630px;
  height: 450px;
}

.class2 {
  width: 100%;
}

.trip-img {
  width: 100%;
  max-width: 630px;
  height: auto;
}

.trip-img1 {
  width: 100%;
  max-width: 900px;
  height: auto;
}

.class4 {
  height: 100%;
  max-height: 630px;
  width: auto;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  .trip-text {
    width: 50%;
    margin-left: 1rem;
    text-align: left;
  }
  /* trip image 
  -------------------- */
  .class3 {
    width: 100%;
    max-width: 630px;
    height: auto;
  }
  .img-class-1 {
    width: 50%;
  }
  .img-class-2 {
    width: 35%;
  }
  .img-class-w {
    width: 100%;
  }
  .img-class-h {
    width: 100%;
  }
}
#topics-1 {
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  background-image: url("../images/wall.jpg");
  background-position: center;
  background-size: cover;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

#topics {
  position: relative;
}

.topics-title {
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.topics-title {
  width: 100vw;
  height: 90vh;
}

#topics h1 {
  color: #cc16c0;
}

.topocs-text0 {
  padding-top: 10rem;
  padding-left: 1rem;
}

.topics-p {
  color: #000;
}

#topics video {
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center top;
     object-position: center top;
  opacity: var(--video-opacity);
}

/*
DESKTOP SIZE
================================================ */
#contact {
  /*
      background-color: #000000;
      height: 23vh;
      margin-bottom: 20px;
  */
  /* ↓ 省略形だとブラウザーによってうまく表示されない */
  background-image: url("../images/wall.jpg");
  background-position: center;
  background-size: cover;
  height: 80vh;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

/*
.contact-content {
    display: flex;
    justify-content: space-between;
    margin-bottom: 40px;
}
*/
.input-area {
  margin-bottom: 20px;
}

input[type=text], select {
  width: 300px;
  height: 30px;
  background-color: #9ec34b;
}

input[type=email] {
  width: 600px;
  height: 30px;
  background-color: #9ec34b;
}

textarea {
  width: 600px;
  background-color: #9ec34b;
}

/*
input[type="text"] {
    color: black;
}
*/
/*
.contact-content p {
    font-size: 1.125rem;
    margin: 10px 0 0;
    margin-bottom: 20px;
}
*/
.frame-1 {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--text);
  width: 300px;
}

.frame-2 {
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid var(--text);
  width: 350px;
}

/*
DESKTOP SIZE
================================================ */
@media (min-width: 600px) {
  /* confirm */
  .frame-2 {
    width: 700px;
  }
}
/* ------ フッター ------- */
footer {
  background: #432;
  text-align: center;
  padding: 26px 0;
}

footer ul {
  display: flex;
  justify-content: center;
  margin-bottom: 2rem;
}

footer li {
  margin: 0 12px;
  color: #fff;
}

footer a {
  color: yellow;
}

footer a:hover {
  color: #c7c3ba;
}

footer p {
  color: #fff;
  font-size: 0.875rem;
}

/*
general
=============================================== */
/* 
HOME
================================================ */
/*
seasons
================================================ */
/*
information
================================================ */
/*
trip
================================================ */
/*
topics
================================================ */
/* CONTACT
================================================ */
/* ------ フッター ------- */
/*
DESKTOP SIZE
================================================ */
/*
@media (min-width: 600px) {

}
*/
/*# sourceMappingURL=style.css.map */