@charset "UTF-8";
/* CSS Document */

/* PC
---------------------------------------------------------------------- */
@media (min-width: 1001px) {

  .bg_kaleidoscope {
    width: 100%;
    background: url("../../images/bg_kaleidoscope_left.png") left top repeat-y ,
    url("../../images/bg_kaleidoscope_right.png") right top repeat-y #dedad5;
  }
  .note1em {
    text-indent: -1em;
    padding-left: 1em;
  }
  .ch4_3 {
    text-align: center;
    font-size: 20px;
    font-weight: bold;
    color: #204c82;
    position: relative;
    margin-bottom: 40px;
  }
  .ch4_3::after {
    content: "";
    width: 60px;
    height: 1px;
    background-color: #204c82;
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
  }
  .typeBtn{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 1.81819%;
    justify-content: center;
    margin-bottom: 80px;
  }
  .typeBtn div {
    width: 40.9091%;
  }
  .typeBtnBlue a,
  .typeBtnGray a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 24px;
    font-weight: bold;
    height: 90px;
  }
  .typeBtnBlue a{
    background: #204c82;
  }
  .typeBtnGray a {
    background: #2b2321;
  }
  .typeBtnBlue a::after,
  .typeBtnGray a::after {
    top: 45%;
    right: 20px;
    content: "";
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 11px;
    height: 11px;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(-25%) rotate(45deg);
  }
  .type_ttl{
    line-height: 1.75;
    text-align: left;
  }
  .type_ttl .en{
    color: #988474;
    font-size: 18px;
  }
  .type_ttl .ja{
    color: #2b2321;
    display: inline-block;
    font-size: 36px;
    letter-spacing: 0.5px;
    position: relative;
  }
  .type_ttl .ja::after {
    content: "";
    display: inline-block;
    width: 80px;
    height: 1px;
    background-color: #9d8974;
    position: absolute;
    right: -95px;
    top: 50%;
  }


/* visual
---------------------------------------------------------------------- */
  #pageTitleVox {
    width: 100%;
    height: 400px;
    background: url("../images/pageTitleBg.jpg") no-repeat top center;
    background-size: cover;
    position: relative;
    z-index: 0;
  }
  #pageTitleVox::after {
    top:0;
    left: 0;
    content: "";
    width: 100%;
    height: 400px;
    z-index: 1;
    position: absolute;
    mix-blend-mode: multiply;
    background: linear-gradient(rgba(230, 230, 230, 1), rgba(230, 230, 230, 1));
  }
  #pageTitleVox .inner {
    width: 90%;
    height: 400px;
    margin: 0 auto;
    position: relative;
  }


/* information
---------------------------------------------------------------------- */
  .information {
    padding: 60px 0 70px;
    background-color: #e3e2de;
  }
  .information .inner{

  }
  .information .inner p{
    font-size: 24px;
    line-height: 1.8;
    text-align: center;
  }


  /* sightBig
  ---------------------------------------------------------------------- */
  .sightBig {
    position: relative;
    padding: 50px 0;
  }
  .sightBig .inner {
    position: relative;
    display: flex;
    gap: 3rem;
    align-items: center;
  }
  .sightBig .inner .img {
    position: relative;
    width: 50%;
  }
  .sightBig .inner .img img {
    width: 100%;
  }
  .sightBig .inner .txt {
    position: relative;
    width: calc((550 / 1600) * 100%);
  }
  .sightBig .inner .txt .sightBigTitle {
    font-size: 3rem;
    line-height: 1.5;
    padding-bottom: 5px;
    position: relative;
    margin-bottom: 15px;
  }
  .sightBig .inner .txt .sightBigTitle::after {
    content: "";
    display: inline-block;
    width: 50vw;
    height: 1px;
    border-bottom: 1px solid #8f8074;
    position: absolute;
    bottom: 0;
  }
  .sightBig .inner .txt .sightTime {
    font-size: 1.8rem;
    font-weight: bold;
    position: relative;
    padding-left: 50px;
    margin-bottom: 25px;
  }
  .sightBig .inner .txt .sightTime::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 19px;
    background: url('../images/icon_car.svg') center no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 3px;
  }
  .sightBig .inner .txt .sightDec {
    font-size: 2rem;
    line-height: 1.5;
    margin-bottom: 20px;
  }

  .sightBig .inner.toLeft {
    justify-content: flex-start;
  }
  .sightBig .inner.toRight {
    flex-direction:  row-reverse;
    justify-content: flex-start;
  }
  .sightBig .inner.toLeft .txt .sightBigTitle::after {
    left: -3rem;
  }
  .sightBig .inner.toRight .txt .sightBigTitle::after {
    right: -3rem;
  }
  .sightBig .inner .txt a {
    width: 220px;
    height: 50px;
    font-size: 1.8rem;
  }


  /* spot
  ---------------------------------------------------------------------- */
  .spot{
    padding: 90px 0;
    background-color: #e7e6e2;
  }
  .spot .inner{
    margin-bottom: 45px;
  }
  .spot .type_ttl {
    margin-bottom: 30px;
  }
  .spot ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }
  .spot ul li{
    width: 32%;
    background-color: #FFF;
    display: flex;
    flex-direction: column;
  }
  .spot ul li img {
    width: 100%;
  }
  .spot .traffic{
    padding: 8px 0;
    font-size: 1.8rem;
    border-bottom: 1px solid #333;
  }
  .spot .traffic span::before {
    content: "";
    display: inline-block;
    width: 40px;
    height: 19px;
    background: url('../images/icon_car.svg') center no-repeat;
    background-size: contain;
    margin-right: 0.5em;
    position: relative;
    bottom: -3px;
  }
  .spot .spotTxt {
    height: 100%;
    padding: 2.66667% 5.33334%;
    display: flex;
    flex-direction: column;

  }
  .spot .spotTxt .name {
    font-size: 2.2rem;
    text-align: center;
  }
  .spot .txt{
    font-size: 1.8rem;
  }
  .spot .spotLink {
    margin-top: auto;
  }
  .spot .official_btn a,
  .spot .gmap_btn a{
    width: 100%;
    display: block;
    margin: 0 auto;
    text-align: center;
    position: relative;
    padding: 8px 0;
  }
  .spot .official_btn a{
    color: #000;
    background: #cbcbcb;
  }
  .spot .gmap_btn a{
    color: #fff;
    background: #064c80;
  }
  .spot .official_btn a::after,
  .spot .gmap_btn a::after{
    top: 45%;
    right: 20px;
    content: "";
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    width: 8px;
    height: 8px;
    border: 0.1em solid currentColor;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(-25%) rotate(45deg);
  }
  .spot .official_btn a::after{ color: #000;}
  .spot .gmap_btn a::after{ color: #fff;}


} /* End @media (min-width: 1001px) */


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

  .bg_kaleidoscope {
    width: 100%;
    background: /*url("../../images/bg_kaleidoscope_left.png") left top repeat-y ,*/
    url("../../images/bg_kaleidoscope_right.png") right top repeat-y #dedad5;
    background-size: 33.33334vw auto;
  }
  .note1em {
    text-indent: -1em;
    padding-left: 1em;
  }
  .ch4_3 {
    text-align: center;
    font-size: 4vw;
    font-weight: bold;
    color: #204c82;
    position: relative;
    margin-bottom: 6vw;
  }
  .ch4_3::after {
    content: "";
    width: 20vw;
    height: 1px;
    background-color: #204c82;
    position: absolute;
    bottom: -2vw;
    left: 50%;
    transform: translateX(-50%);
  }
  .typeBtn{
    width: 60vw;
    margin: 0 auto 8vw;
  }
  .typeBtnBlue a,
  .typeBtnGray a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    width: 100%;
    text-align: center;
    position: relative;
    font-size: 4vw;
    font-weight: bold;
    height: 12vw;
  }
  .typeBtnBlue {
    margin-bottom: 4vw;
  }
  .typeBtnBlue a {
    background: #204c82;
  }
  .typeBtnGray a {
    background: #606060;
  }
  .typeBtnBlue a::after,
  .typeBtnGray a::after {
    top: 45%;
    right: 1em;
    content: "";
    position: absolute;
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    line-height: 1;
    width: 1.3vw;
    height: 1.3vw;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateX(-25%) rotate(45deg);
  }
  .type_ttl {
    width: 90vw;
    margin: 0 auto;
    line-height: 1.2;
    text-align: left;
  }
  .type_ttl .en {
    color: #988474;
    font-size: 3.2vw;
  }
  .type_ttl .ja {
    color: #2b2321;
    display: inline-block;
    font-size: 5.33334vw;
    letter-spacing: 0.1vw;
    position: relative;
  }
  .type_ttl .ja::after {
    content: "";
    display: inline-block;
    width: 10.66667vw;
    height: 1px;
    background-color: #9d8974;
    position: absolute;
    right: -2.5em;
    top: 50%;
  }
  .ch3_2 span {
    font-size: 5.33334vw;
  }


/* visual
---------------------------------------------------------------------- */
  #pageTitleVox {
    width: 100%;
    height: 80vw;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)), url(../images/pageTitleBg_sp.jpg) no-repeat top center;
    background-size: cover;
    position: relative;
  }
  #pageTitleVox .inner {
    width: 90vw;
    height: 80vw;
    margin: 0 auto;
    position: relative;
  }



/* information
---------------------------------------------------------------------- */
  .information {
    padding: 8vw 0 ;
    background-color: #e3e2de;
  }
  .information .inner{

  }
  .information .inner p {
    font-size: 4vw;
    line-height: 1.8;
    text-align: center;
  }



  /* sightBig
  ---------------------------------------------------------------------- */
  .sightBig {
    position: relative;
    padding: 10vw 0;
  }
  .sightBig .inner {
    position: relative;
  }
  .sightBig .inner .img {
    position: relative;
    margin-bottom: 4vw;
  }
  .sightBig .inner .img img {
  }
  .sightBig .inner .txt {
    position: relative;
    width: 88vw;
    margin: 0 auto;
  }
  .sightBig .inner .txt .sightBigTitle {
    font-size: 5vw;
    line-height: 1.5;
    padding-bottom: 1vw;
    position: relative;
    margin-bottom: 2vw;
    border-bottom: 1px solid #8f8074;
  }
/*   .sightBig .inner .txt .sightBigTitle::after {
    content: "";
    display: inline-block;
    width: 50vw;
    height: 1px;
    border-bottom: 1px solid #8f8074;
    position: absolute;
    bottom: 0;
  } */
  .sightBig .inner .txt .sightTime {
    font-size: 3.6vw;
    font-weight: bold;
    position: relative;
    padding-left: 8vw;
    margin-bottom: 4vw;
  }
  .sightBig .inner .txt .sightTime::before {
    content: "";
    display: inline-block;
    width: 7vw;
    height: 4vw;
    background: url('../images/icon_car.svg') center no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
    top: 1.5vw;
  }
  .sightBig .inner .txt .sightDec {
    font-size: 4vw;
    line-height: 1.5;
    margin-bottom: 4vw;
  }
/*
  .sightBig .inner.toLeft {
    justify-content: flex-start;
  }
  .sightBig .inner.toRight {
    flex-direction:  row-reverse;
    justify-content: flex-start;
  }
  .sightBig .inner.toLeft .txt .sightBigTitle::after {
    left: -3rem;
  }
  .sightBig .inner.toRight .txt .sightBigTitle::after {
    right: -3rem;
  }
  .sightBig .inner .txt a {
    width: 220px;
    height: 50px;
    font-size: 1.8rem;
  } */


  /* spot
  ---------------------------------------------------------------------- */
.spot{
  padding: 10vw 0;
}
  .spot .inner{
    margin-bottom: 6vw;
  }
  .spot .type_ttl {
    margin-bottom: 4vw;
  }
.spot ul li{
  margin-bottom: 8vw;
}
.spot .traffic{
  padding: 0 0 0.4em 0;
  font-size: 4vw;
  border-bottom: 1px solid #333;
  margin-bottom: 4vw;
}
  .spot .traffic span::before {
    content: "";
    display: inline-block;
    width: 7vw;
    height: 4vw;
    background: url('../images/icon_car.svg') center no-repeat;
    background-size: contain;
    margin-right: 0.5em;
    position: relative;
    top: 0.8vw;
  }
  .spot .spotTxt {
    height: 100%;
    padding: 2.66667% 5.33334%;
  }
  .spot .spotTxt .name {
    font-size: 5vw;
    text-align: center;
  }
.spot .txt{
  font-size: 4vw;
}
.spot .official_btn a,
.spot .gmap_btn a{
  width: 80vw;
  display: block;
  margin: 0 auto;
  text-align: center;
  position: relative;
  padding: 0.6em 0;
}
.spot .official_btn a{
  color: #000;
  background: #cbcbcb;
}
.spot .gmap_btn a{
  color: #fff;
  background: #064c80;
}
.spot .official_btn a::after,
.spot .gmap_btn a::after{
  top: 45%;
  right: 2em;
  content: "";
  position: absolute;
  display: inline-block;
  vertical-align: middle;
  line-height: 1;
  width: 8px;
  height: 8px;
  border: 0.1em solid currentColor;
  border-left: 0;
  border-bottom: 0;
  box-sizing: border-box;
  transform: translateX(-25%) rotate(45deg);
}
.spot .official_btn a::after{ color: #000;}
.spot .gmap_btn a::after{ color: #fff;}

}












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