@charset "utf-8"; 

::after,
::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

ul,
ol {
  list-style: none;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover{ 
	opacity:0.5;
	transition:0.3s;
}

body {
  font-family: "Zen Maru Gothic", sans-serif;
  font-weight: 400;
  padding-top: 51px;
}

img {
  max-width: 100%;
}

/* ---------header--------- */

.header-inner {
  width: 100vw;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 60px;
  padding-right: 60px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 30;
  background-color: rgba(255, 255, 255, 0.8);
  border-bottom: 1px solid rgba(0,0,0,0.3)
}

.toggle-menu-button {
  display: none;
}

.header-logo {
  display: block;
  width: 210px;
}

.site-menu ul {
  display: flex;
}

.site-menu ul li {
  margin-left: 10px;
  margin-right: 10px;
  color: #4d4d4d;
}

/* media
---------------------------- */

@media (max-width: 880px) {
  .site-menu ul {
    display: block;
    text-align: center;
    width:100vw;
    margin: 0;
    padding: 0;
  }

  .site-menu li {
    margin-top: 20px;
    }
 
  .header {
    width:100vw;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background-color: #fff;
    height: 50px;
    position: fixed;
    top: 0px;
    left: 0;
    z-index: 30;
    box-shadow: 0 3px 6px rgba(243, 242, 242, 0.1);
    }

   .header-inner {
      width:100vw;
      padding-left: 10px;
      padding-right: 10px;
      height: 100%;
      position: relative;
    }

    .header-logo {
      width: 180px;
      text-align: left;
    }

    .header-site-menu {
      width:100vw;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      color: #fff;
      background-color: rgba(255, 255, 255, 0.8);
      padding-top: 20px;
      padding-bottom: 20px;
      display: none;
    }

    .header-site-menu.is-show {
      display: block;
    }

    .toggle-menu-button {
      display: block;
      width: 44px;
      height: 34px;
      background-image: url(../img/logo/icon-menu.png);
      background-size: 50%;
      background-position: center;
      background-repeat: no-repeat;
      background-color: transparent;
      opacity: 0.5;
      border: none;
      border-radius: 0;
      outline: none;
    }
  }
/* ---------↑header--------- */

/* ---------↓main--------- */

/* ↓トップ画像アニメーション */
.slider {
	width: 100vw;
	height: 85vh;
  max-width: 1300px;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

.slider div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
	z-index: 10;
	opacity: 0;
	animation-name: slide-fade;
	animation-duration: 44s; /* 秒変更 */
	animation-iteration-count: infinite;
	transform: scale(1.2); /* 最初に画像を大きくしておく */
}

@keyframes slide-fade {
	0% {
    opacity: 1;
  }

  10% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  30% {
    opacity: 1;
  }

  100% { 
    opacity: 1;
		transform: scale(0.8); /* ここで画像サイズを1に戻す */
    z-index: 0;
	}
}
.slider div:nth-of-type(1) {
	background-image: url(../img/slide/takahama.jpeg);
}
.slider div:nth-of-type(2){
	background-image: url(../img/slide/yuhi.png);
	animation-delay: 4s; /* 秒数を変更 */
}
.slider div:nth-of-type(3) {
	background-image: url(../img/slide/toudai.jpeg);
	animation-delay: 8s; /* 秒数を変更 */
}
.slider div:nth-of-type(4) {
	background-image: url(../img/slide/onidaketenmondai.jpeg);
	animation-delay: 12s; /* 秒数を変更 */
}
.slider div:nth-of-type(5) {
	background-image: url(../img/slide/kyokai2.webp);
	animation-delay: 16s; /* 秒数を変更 */
}
.slider div:nth-of-type(6) {
	background-image: url(../img/slide/kouen1.jpg);
	animation-delay: 20s; /* 秒数を変更 */
}
.slider div:nth-of-type(7) {
	background-image: url(../img/slide/cruise.png);
	animation-delay: 24s; /* 秒数を変更 */
}
.slider div:nth-of-type(8) {
	background-image: url(../img/slide/kyokai1.jpeg);
	animation-delay: 28s; /* 秒数を変更 */
}
.slider div:nth-of-type(9) {
	background-image: url(../img/slide/kyokai3.jpeg);
	animation-delay: 32s; /* 秒数を変更 */
}
.slider div:nth-of-type(10) {
	background-image: url(../img/slide/nagatame.webp);
	animation-delay: 36s; /* 秒数を変更 */
}
.slider div:nth-of-type(11) {
	background-image: url(../img/slide/doukutu.jpeg);
	animation-delay: 40s; /* 秒数を変更 */
}


/* media
---------------------------- */

@media (max-width: 880px) {
.slider {
	width: 100vw;
	height: 85vh;
	overflow: hidden;
	position: relative;
	max-width: 100%;
}

}
/* ↑トップ画像アニメーション */

/* ---------------------------------------- */

/* ↓五島列島とは */

.about-area {
  background-image: url(../img/city_map.png);
  background-size: contain;
  background-position: 88% 100%;
  height: 800px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
  width: 100%;
  max-width: 1300px;
  display: block;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  /* max-width: 1300px;
  text-align: center;
  justify-content: center; */
}

#about {
  padding-top: 60px;
  padding-top: -60px; 
  
}

.ttl {
  position: absolute;
  top: 9.5rem;
  left: 20rem;
  display: inline-block;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-size: 3rem;
  z-index: 2;
  max-width: 100%;
  justify-content: center;
}

.tubaki {
  position: absolute;
  width: 140px;
  top: 8rem;
  left: 15rem;
  max-width: 100%;
}

.ttl-go {
  font-size: 4rem;
  text-shadow:
  2px 2px 0 #fff,
  -2px 2px 0 #fff,
  2px -2px 0 #fff,
  2px -2px 0 #fff,
  2px 0px 0 #fff,
  0px 2px 0 #fff,
  -2px 0px 0 #fff,
  0px -2px 0 #fff;
}

.txt {
  position: absolute;
  top: 8rem;
  left: auto;
  margin-top: 8rem;
  margin-left: 15rem;
  justify-content: center;
  font-size: 18px;
  width: 800px;
  max-width: 100%;
  font-size: 1rem;
}

/* media
---------------------------- */

@media (max-width: 880px) {

  .about-area {
  max-width: 1300px;
  background-image: url(../img/city_map.png);
  background-size: 60%;
  background-position: 88% 100%;
  height: 700px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
}

.ttl {
  position: relative;
  top: 0.2rem;
  left: 23%;
  display: inline-block;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-size: 2rem;
  z-index: 2;
}

.tubaki {
  position: absolute;
  width: 120px;
  top: 4rem;
  left: 7rem;
}

.ttl-go {
  font-size: 3rem;
}

.txt {
  margin-top: 4rem;
  margin-left: 5rem;
  font-size: 18px;
  width: 450px;
}

}


@media (max-width: 880px) {

  .about-area {
  max-width: 1300px;
  background-image: url(../img/city_map.png);
  background-size: 60%;
  background-position: 88% 100%;
  height: 700px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
}

.ttl {
  position: relative;
  top: 0.2rem;
  left: 23%;
  display: inline-block;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-size: 2rem;
  z-index: 2;
}

.tubaki {
  position: absolute;
  width: 120px;
  top: 4rem;
  left: 7rem;
}

.ttl-go {
  font-size: 3rem;
}

.txt {
  margin-top: 4rem;
  margin-left: 5rem;
  font-size: 18px;
  width: 450px;
}

}


@media (max-width: 750px) {

 .about-area {
  max-width: 750px;
  background-image: url(../img/city_map.png);
  background-size: 60%;
  background-position: 88% 100%;
  height: 700px;
  background-repeat: no-repeat;
  margin: 0;
  padding: 0;
  position: relative;
  margin-left: auto;
}


.ttl {
  width: 100%;
  max-width: 100%;
  position: relative;
  top: 0.2rem;
  margin-left: auto;
  display: inline-block;
  line-height: 1;
  padding: 0;
  margin: 0;
  font-size: 2rem;
  z-index: 2;
  margin-left: auto;
}

.tubaki {
  position: absolute;
  width: 120px;
  top: 4rem;
  left: 5rem;
}

.ttl-go {
  font-size: 3rem;
}

.txt {
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
  font-size: 18px;
  width: 450px;
  /* width: 100%; */
  max-width: 90%;
}

}
/* ↑五島列島とは */
/* --------------------------------------- */

svg {
vertical-align: bottom;
}

/* --------------------------------------- */

/* 観光エリア */
.tourist-spot-area {
  background-color: #f5f0f0;
}

/* 観光スポットタイトル */
#tourist-spot {
  margin: 0;
  padding-top: 60px;
  padding-top: -60px; 
 text-align: center;
 justify-content: center;
}

/* 観光スポット内 */
.spot-list {
  display: grid;
  background-color: #fff;
  grid-template-columns: repeat(auto-fit,350px);
  justify-content: center;
  column-gap: 30px;
  margin-top: 20px;
}

figure img {
 width: 100%;
 height: 200px;
 border-radius: 10px;
}

figure {
  margin: 0;
  padding: 0;
}

figcaption {
  font-size: 0.6rem;
  text-align: center;
  padding: 0;
  margin: 0;
}

.kami-h3 {
  text-align: center;
  margin-bottom: 5px;
  padding: 0;
  background: -webkit-repeating-linear-gradient(-45deg, #dffafc, #dffafc 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #dffafc, #dffafc 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    color: #000;/*文字色*/
}

.simo-h3 {
  text-align: center;
  margin-bottom: 5px;
  padding: 0;
  background: repeating-linear-gradient(-45deg, #fceffa, #fceffa 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
  color: #000;/*文字色*/
}

/* 観光スポット内観光地説明文 */
.spot-area-item p {
  text-wrap:wrap;
  width: auto;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50px;
}

/* ↓上五島*/
.kamigotou-about {
  justify-content: center;
  padding: 1em 1.5em;
    margin-top: 0;
    margin-bottom: 2rem;
    background: -webkit-repeating-linear-gradient(-45deg, #dffafc, #dffafc 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #dffafc, #dffafc 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    color: #000;/*文字色*/
}

/* ↓下五島 */
.simogotou-about {
  max-width: 100%;
  justify-content: center;
  padding: 1em 1.5em;
    margin-top: 0;
    margin-bottom: 2rem;
    background: -webkit-repeating-linear-gradient(-45deg, #fceffa, #fceffa 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    background: repeating-linear-gradient(-45deg, #fceffa, #fceffa 5px, #ffffff 5px, #ffffff 10px);/*ストライプ*/
    color: #000;/*文字色*/
}


.namishita {
    background-color: #f5f0f0;
  height: 1rem;
}

.namiue {
  background-color: #f5f0f0;
  height: 70px;
}


/* media
---------------------------- */

@media (max-width: 880px) {

/* 各観光スポット箱 */
.spot-list {
  display: grid;
  background-color: #fff;
  grid-template-columns: repeat(auto-fit,350px);
  justify-content: center;
  column-gap: 20px;
  margin-top: 20px;
}

}
/* ↑観光スポット */

/* --------------------------------------- */

/* ご当地グルメ */
#food {
  max-width: 100%;
  text-align: center;
  padding-top: 60px;
  padding-top: -60px;
  margin-top: 0;
   text-align: center;
 justify-content: center;
}


/* ご当地グルメ全体のレイアウト */
.localFoods {
  background-color: #fff;
} 

.localFoods-List {
  display: flex;
  overflow-x: scroll;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-top: 40px;
  padding-bottom: 3rem;
  padding-left: 60px;
  padding-right: 60px;
  column-gap: 20px;
}

.localFoods-item-Polaroid {
  position: relative;
  display: block;
  width: 80%;
  margin-inline:auto;
  line-height: 0;
  background: white;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 0;
}

.masking-tape1 {
  position: absolute;
  top: -1.2em;
  left: 30%;
  width:60px;
  height:20px;
  background-image: linear-gradient(-45deg, rgba(210, 230, 28, 0.589) 25%, transparent 25%, transparent 50%, rgba(210, 230, 28, 0.589) 50%, rgba(210, 230, 28, 0.589) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(4deg); 
}
.masking-tape2 {
  position: absolute;
  top: -1.2em;
  left: 30%;
  width:60px;
  height:20px;
  background-image: linear-gradient(-45deg, rgba(98, 233, 222, 0.589) 25%, transparent 25%, transparent 50%, rgba(98, 233, 222, 0.589) 50%, rgba(98, 233, 222, 0.589) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(-4deg); 
}
.masking-tape3 {
  position: absolute;
  top: -1.2em;
  left: 30%;
  width:60px;
  height:20px;
  background-image: linear-gradient(-45deg, rgba(227, 140, 226, 0.727) 25%, transparent 25%, transparent 50%, rgba(227, 140, 226, 0.727) 50%, rgba(227, 140, 226, 0.727) 75%, transparent 75%, transparent 100%);
  background-size: 20px 20px;
  border-left:2px dotted rgba(0,0,0,.1);
  border-right:2px dotted rgba(0,0,0,.1);
  box-shadow:0 0 5px rgba(0,0,0,.2);
  padding: 0.25em 2em;
  color: #65513f;
  transform: rotate(0deg); 
}

.localFoods-item-Polaroid figcaption {
  margin-top: 10px;
}

.localFoods-item {
  flex-basis: 350px;
  flex-shrink: 0;
}

.localFoods-List img{
  flex-shrink: 0;
}


.localFoods-List h3 {
  font-weight: bold;
  font-size: 1rem;
  line-height: 20px;
  margin-top: 20px;
  margin-bottom: 10px;
}


.localFoods-p {
  text-align: left;
  text-wrap:wrap;
 
  width:92%;
  margin:0 auto;padding:1px calc(1em / 2) 0 calc(1em / 2);border:0;
  box-sizing:border-box;
  background-color:rgb(254,254,254);
  background-image:linear-gradient(90deg, transparent 0%, transparent 50%, rgb(254,254,254) 50%, rgb(254,254,254) 100%), linear-gradient(180deg, transparent calc(1em * 2 - 1px), rgb(199,199,199) calc(1em * 2 - 1px), rgb(199,199,199) calc(1em * 2));
  background-position:left top;
  background-size:calc(1em / 2) auto, auto calc(1em * 2);
  overflow-wrap:break-word;word-wrap:break-word;word-break:break-all;
  font-size:0.9em;
  line-height:calc(1em * 2);
}

.localFoods-List::-webkit-scrollbar {
  height: 14px; /* スクロールバーの高さ */
}
 
.localFoods-List::-webkit-scrollbar-thumb {
  background: #d2b48c; /* ツマミの色 */
  border-radius: 7px; /* ツマミ両端の丸み */
}
 
.localFoods-List::-webkit-scrollbar-track {
  background: #f5deb3; /* トラックの色 */
  border-radius: 7px; /* トラック両端の丸み */
}

/* --------------------------------------- */
/* media */
@media (max-width: 880px) {

#food {
  width: 100%;
  max-width: 100;
  padding-top: 60px;
  padding-top: -60px;
  padding-bottom: 20px;
  margin-top: 0;
  font-size: 1.5rem;
}

.localFoods-List {
  padding-left: 0;
  margin-left: 0;
  padding-right: 20px;
}

.localFoods-item {
  width: 220px;
}

}
/* --------------------------------------- */
/* ツアー */

#tour {
  width: 100%;
  margin-top: 10rem;
}


.tour-box {
  width: 100%;
  max-width: 1400px;
  min-width: 0;
  margin-bottom: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, 400px);
  grid-template-rows: 500px 500px;
  column-gap: 1rem;
  row-gap: 10px;
  justify-content: center;
}

.tour-title-list {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.tour-title {
  margin: 0 ;
  padding-top: 60px;
  padding-top: -60px; 
  text-align: center;
}

.tour-title-p{
  border: 5px solid #eee;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
	z-index: 0;
  text-align: center;
}

.tour-title-p:before {
	border-top: 5px solid #f0b8bf;	/* 一部だけ異なる線の太さ・種類・色 */
	border-left: 5px solid #f0b8bf;	/* 一部だけ異なる線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	z-index: 1;
}

.tour-list-item1 {
  grid-row-start: 1;
  grid-row-end: 3;
  margin-top: 5rem;
  margin-left: auto;
  margin-right: auto;
}

.tour-list-item1 p {
  margin-top: 5rem;
  font-size: 1.2rem;
}

.tour-list-item2 {
 width: 100%;
 margin-left: 20px;
}

.tour-list-item3 { 
  width: 100%; 
  margin-top: 20%;
  margin-left: 10px;
}
.tour-list-item4 { 
  width: 100%; 
  margin-left: 20px;
}

.tour-list-item5 {
  margin-top: 20%;
}

/*親要素をrelativeに*/
.tour-list {
  position: relative;
  top: 5%;
  left: 10%;
  bottom: 0;
}

/*3つともabsoluteに*/
.one, .two1, .two2, .two3, .two4, .three1, .three2, .three3, .three4 {
  position: absolute;
}

.one {
  max-width: 100%;
  width: 330px;
  height: 450px;
  left: 0;
  top: 0;
  border: 1px solid #65513f;
}

.two1 {
  max-width: 100%;
  width: 330px;
  height: 450px;
  left: 20px;
  top: 20px;
  object-fit:cover;
}

.two2 {
  max-width: 100%;
  width: 330px;
  height: 450px;
  left: 20px;
  top: 20px;
  object-fit:cover;
  object-position: 70% 100%
}

.two3 {
  max-width: 100%;
  width: 330px;
  height: 450px;
  left: 20px;
  top: 20px;
  object-fit:cover;
  object-position: 30% 50%
}

.two4 {
  max-width: 100%;
  width: 330px;
  height: 450px;
  left: 20px;
  top: 20px;
  object-fit:cover;
  object-position: 70% 100%
}

.three1 {
  left: 13rem;
  top: 40px;
  background-color: #fff;
  border: 1px solid #65513f;
  padding: 7px;
  text-align: center;
  flex-shrink: 0;
}

.three2 {
  left: 13rem;
  top: 40px;
  background-color: #fff;
  border: 1px solid #65513f;
  padding: 7px;
  text-align: center;
  flex-shrink: 0;
}

.three3 {
  left: 15rem;
  top: 40px;
  background-color: #fff;
  border: 1px solid #65513f;
  padding: 7px;
  text-align: center;
  flex-shrink: 0;
}

.three4 {
  left: 13rem;
  top: 40px;
  background-color: #fff;
  border: 1px solid #65513f;
  padding: 7px;
  text-align: center;
  flex-shrink: 0;
}

.tour-list a:hover{ 
	opacity:0.8;
	transition:0.3s;
}
/*色付けなどは省略*/

/*--------- media---------- */
@media (max-width: 1300px) {

#tour {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
  
}


.tour-box {
  width: 1200px;
  max-width: 100%;
  margin-bottom: 1rem;
  display: grid;
grid-template-columns: repeat(auto-fit, 400px);
grid-template-rows: repeat(3, 500px) ;
justify-content: center;
}

.tour-title-list {
  width: 100%;
  max-width: 100%;
  justify-content: center;
}

.tour-title {
  margin: 0 ;
  padding-top: 60px;
  padding-top: -60px; 
  text-align: center;
}

.tour-title-p{
  border: 5px solid #eee;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
	z-index: 0;
  text-align: center;
}

.tour-title-p:before {
	border-top: 5px solid #f0b8bf;	/* 一部だけ異なる線の太さ・種類・色 */
	border-left: 5px solid #f0b8bf;	/* 一部だけ異なる線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	z-index: 1;
}

.tour-list-item1 {
  grid-row-start: 1;
  grid-row-end: 2;
  margin-left: auto;
  margin-right: auto;
}

.tour-list-item1 p {
  margin-top: 5rem;
  font-size: 1.2rem;
}

.tour-list-item2 {
 width: 500px;
 height: auto;
 margin: 0 ;

}

.tour-list-item3 { 
 width: 500px;
margin: 0;
}
.tour-list-item4 { 
 width: 500px;
 margin: 0;
}

.tour-list-item5 {
  width: 500px;
 margin: 0;
}

}

@media (max-width: 880px) {

  
#tour {
  width: 100%;
  max-width: 100%;
  margin-top: 0;
}

.tour-box {
  width: 800px;
  max-width: 100%;
  margin-bottom: 1rem;
  display: grid;
grid-template-columns: repeat(auto-fit, 370px);
grid-template-rows:  repeat(3, 500px);
justify-content: center;
}

.tour-title-list {
  width: 100%;
  max-width: 100%;

}

.tour-title {
  margin: 0 ;
  padding-top: 60px;
  padding-top: -60px; 
  text-align: center;
}

.tour-title-p{
  border: 5px solid #eee;	/* 線の太さ・種類・色 */
	margin: 10px; /* 外側の余白 */
	padding: 10px; /* 内側の余白 */
	position: relative;
	z-index: 0;
  text-align: center;
}

.tour-title-p:before {
	border-top: 5px solid #f0b8bf;	/* 一部だけ異なる線の太さ・種類・色 */
	border-left: 5px solid #f0b8bf;	/* 一部だけ異なる線の太さ・種類・色 */
	content: '';
	display: block;
	position: absolute;
	top: -5px;
	left: -5px;
	width: 20px;
	height: 20px;
	z-index: 1;
}

.tour-list-item1 {
  grid-row-start: 1;
  grid-row-end: 2;
  margin-left: auto;
  margin-right: auto;
}

.tour-list-item1 p {
  margin-top: 5rem;
  font-size: 1.2rem;
}

.tour-list-item2 {
 width: 300px;
 height: auto;
 margin: 0 ;
justify-content: left;
}

.tour-list-item3 { 
 width: 300px;
margin: 0;
}
.tour-list-item4 { 
 width: 300px;
 margin: 0;
 text-align: left;
}

.tour-list-item5 {
  width: 300px;
 margin: 0;
}

}

@media (max-width: 770px) {

.tour-box {
  width: 800px;
  max-width: 100%;
  margin-bottom: 1rem;
  display: grid;
grid-template-columns: repeat(auto-fit, 370px);
grid-template-rows: repeat(5, 500px);
justify-content: center;
}

}
/* -----------アクセス----------- */

.access-header {
  width: 100%;
  height: 100%;
  background-image: url(../img/ACCESS/23758004.jpg);
  background-repeat: no-repeat;
  background-size: cover;
}


.access-area {
  width: 100%;
  max-width: 100%;
  background-color: #fff;
 /* background-color: #f5f0f0; */
 max-width: 100%;
}

#access {
  padding-top: 60px;
  padding-top: -60px;
  text-align: center;
   margin-top: 10rem;
  margin-bottom: 5rem;}

.access-map {
  width: 100%;
  display: block;
  margin: 0 auto; 
  max-width: 100%;
  height: auto;
  background-color: #fff;
}

.access-map-img {
  border: 10px solid #eae2dd;
  outline: 3px solid #e8854a;
  padding: 5px;
}


.access-p {
  margin-top: 5rem;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 2rem;
}

.access-route-list h2 {
  font-size: 1.2rem;
}

.access-link {
  display: grid;
  grid-template-columns: repeat(auto-fit,400px);
  justify-content: center;
  column-gap: 1rem;
 margin-left: 1rem;
padding-left: 10px;
margin-top: 3rem;

padding-bottom: 4rem;
}

.box-001,
.box-002,
.box-003,
.box-004,
.box-005,
.box-006 {
    display: flex;
    grid-gap: 0 .7em;
    margin: 0 auto;
    padding: 1em;
    border-radius: 5px;
    background-color: #fff9e5;
    color: #333333;
    width: 300px;
    margin-bottom: 10px;
}

.box-001::before,
.box-002::before,
.box-003::before,
.box-004::before,
.box-005::before,
.box-006::before {
  width: 24px;
    height: 24px;
    content: '';
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.8995 6.85453L17.1421 11.0972L7.24264 20.9967H3V16.754L12.8995 6.85453ZM14.3137 5.44032L16.435 3.319C16.8256 2.92848 17.4587 2.92848 17.8492 3.319L20.6777 6.14743C21.0682 6.53795 21.0682 7.17112 20.6777 7.56164L18.5563 9.68296L14.3137 5.44032Z' fill='%23ffb36b'%3E%3C/path%3E%3C/svg%3E");
     flex-shrink: 0;
}

.box-001 p,
.box-002 p,
.box-003 p,
.box-004 p,
.box-005 p,
.box-006 p {
    margin: 0;
    padding: 0 0 0 .7em;
    border-left: 1px solid #ffb36b;
}

.access-route {
 background-color: #fff;
 text-align: center;
}

.access-route-list {
 display: grid;
  grid-template-columns: repeat(auto-fit,350px);
justify-content: center;
 background-color: #f5f0f0;
  column-gap: 1rem;
 margin-left: auto;
 margin-right: auto;
padding-left: 10px;
}


.access-route-list dl {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.access-route-list dt {
  padding-top: 0.5rem;
}








/* ---------↑main--------- */















/* ---------↓footer--------- */

.footer {
  border-top: 2px solid #b1ababe7;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tabisaki_contents {
  display: flex;
  margin-top: 50px;
}

.tabisaki-list ul li {
  border-right: 1.8px solid #04aa73e3;
  padding-left: 10px;
  padding-right: 10px;
}

.tabisaki-p {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 10px;
}

.tabisaki-p::before {
  content: url(../img/map-pin.png);
  position: absolute;
  right: 305px;
}

.footer-logo {
  display: block;
  width: 280px;
  margin-top: 10px;
}

.copyright {
  font-size: 1.2rem;
  margin-top: 0;
  margin-bottom: 20px;
}



/* ---------footer--------- */