/* Header */
.header {
  height: 50px;
  background-color: #FFF;
  margin: 0 auto;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  z-index: 999;
}

.header h1{
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-size: 2.4rem;
  line-height: 3.0rem;
}

/* Top */
.top__image-left {
  background: url(../images/carp1.jpg) no-repeat center center/cover;
  width: 50%;
  height: auto;
}

.top__image-right {
  background: url(../images/dome.jpg) no-repeat center center/cover;
  width: 50%;
  height: auto;
}

.top__image {
  display: flex;
  height: 90vh;
}

.top {
  position: relative;
}

.top-title {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  width: 76vw;
}

.top-title img {
  max-width: 100%;
  height: auto;
  filter: drop-shadow(2px 2px 2px #000);
}

/* IEで表示させるため */
.top-title img[src$=".svg"] {
  width: 100%;
}

/* Scroll */
/*スクロールダウン全体の場所*/
.scrolldown2{
  /*描画位置※位置は適宜調整してください*/
  position:absolute;
  bottom:50px;
  right:50px;
}

/*Scrollテキストの描写*/
.scrolldown2 span{
  /*描画位置*/
  position: absolute;
  left:10px;
  bottom:0px;
  /*テキストの形状*/
  color: #eee;
  font-size: 3rem;
  letter-spacing: 0.05em;
  font-weight: bold;
  /*縦書き設定*/
  -ms-writing-mode: tb-rl;
  -webkit-writing-mode: vertical-rl;
  writing-mode: vertical-rl;
}

/* 丸の描写 */
.scrolldown2:before {
  content: "";
  /*描画位置*/
  position: absolute;
  bottom:0;
  left:-4px;
  /*丸の形状*/
  width:10px;
  height:10px;
  border-radius: 50%;
  background:#eee;
  /*丸の動き1.6秒かけて透過し、永遠にループ*/
  animation:
  circlemove 1.6s ease-in-out infinite,
  cirlemovehide 1.6s ease-out infinite;
}

/*下からの距離が変化して丸の全体が上から下に動く*/
@keyframes circlemove{
  0%{bottom:45px;}
  100%{bottom:-5px;}
}

/*上から下にかけて丸が透過→不透明→透過する*/
@keyframes cirlemovehide{
  0%{opacity:0}
  50%{opacity:1;}
  80%{opacity:0.9;}
  100%{opacity:0;}
}

/* 線の描写 */
.scrolldown2:after{
content:"";
  /*描画位置*/
position: absolute;
bottom:0;
left:0;
  /*線の形状*/
width:2px;
height: 70px;
background:#eee;
}

@media (max-width:1024px) {
  .top-title {
    width: 95vw;
    height: auto;
  }
}

@media (max-width:599px) {
  .top__image-left {
    width: 100%;
    height: 45vh;
  }

  .top__image-right {
    width: 100%;
    height: 45vh;
  }

  .top__image {
    display: block;
  }

  .top-title {
    transform: translate(-50%, -10%);
  }

  .scrolldown2 span {
    font-size: 2rem;
  }

  .scrolldown2:after {
    height: 50px;
  }
}

/* Nav */
.navbar {
  display: flex;
  justify-content: space-between;
  width: 66%;
  max-width: 1024px;
  margin: 0 auto;
}

.nav-container {
  margin: 0 auto;
  background-color: #f6e1e1;
  width: 100vw;
  position: fixed;
  bottom: 0;
  opacity: 0.95;
  z-index: 999;
  padding-bottom: 3vh;
}

.nav-container:before {
  content: "";
  background: url(../images/wave-lightpink-long@2x.png) no-repeat center center/cover;
  width: 100%;
  height: 10vh;
  display: block;
  transform: translateY(-34%);
  overflow: hidden;
}

.mobile-menu__icon {
  position: fixed;
  top: 50px;
  right: 16px;
  z-index: 999;
  display: none;
}

.mobile-menu__icon img {
  width: 9vw;
}

/* Textが変わる */
.textchange {
  transition: all .2s;
  position: relative;
}

.textchange span {
  position: absolute;
	left: 50%;
	top:50%;
  transform:translate(-50%,-50%);
  /*アニメーションの指定*/
  transition: all .5s;
  /*ブロック要素にしてテキスト折り返しなし*/  
  display: block;
  white-space: nowrap;
}

/*差し替わるテキストの設定*/
.textchange span:nth-child(1){
	opacity:0;/*透過0に*/
}

/*hoverするとテキストが入れ替わる設定*/
.textchange:hover span:nth-child(2){
	opacity:0;/*透過0に*/
}

.textchange:hover span:nth-child(1){
	opacity:1;/*不透明に*/
}

@media (max-width:1024px) {
  .mobile-menu__icon {
    display: block;
  }

  .nav-container {
    display: none;
    height: 100vh;
    width: 100vw;
    opacity: 1.0;
  }

  .navbar {
    height: 50vh;
    flex-flow: column;
    justify-content: space-between;
    padding-top: 50px;
  }

  nav li a {
    width: 80vw;
    height: 10vh;
    margin-bottom: 10px;
    padding: 10px;
    color:#e3002c;
    text-align:center;
    display:block;
    background:#FFF;
    border-radius: 5px;
    border: solid #e3002c 1px;
  }

  .textchange-top::before {
    content: "トップへ戻る";
    font-size: 1.6rem;
    color: #444141;
  }

  .textchange-history::before {
    content: "カープの誕生秘話";
    font-size: 1.6rem;
    color: #444141;
  }

  .textchange-trip::before {
    content: "観光情報一覧";
    font-size: 1.6rem;
    color: #444141;
  }

  .textchange-tips::before {
    content: "観光情報番外編";
    font-size: 1.6rem;
    color: #444141;
  }

  .textchange-web::before {
    content: "もっと知りたい人へ";
    font-size: 1.6rem;
    color: #444141;
  }
}

@media (max-width:320px) {
  .textchange-top::before,
  .textchange-history::before,
  .textchange-trip::before,
  .textchange-tips::before,
  .textchange-web::before {
    opacity: 0.5;
  }
}

/* History */
.section-history .container {
  position: relative;
}

.section-history__carpicon {
  position: absolute;
  right: 0;
  top: -7vh;
  width: 21.241vw;
  height: auto;
}

.bubble1 {
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  right: 15vw;
  top: 13vw;
  width: 20px;
	height: 20px;
}

.bubble2 {
  border-radius: 50%;
  background: #FFFFFF;
  position: absolute;
  right: 20vw;
  top: 18vw;
  width: 50px;
	height: 50px;
}

.section-history:before {
  content: "";
  background: url(../images/wave-red-long@2x.png) no-repeat center center/cover;
  width: 100%;
  height: 10vh;
  display: block;
  transform: translateY(-36%);
  overflow: hidden;
}

.section-history:after {
  content: "";
  background: url(../images/wave-red-long@2x.png) no-repeat center center/cover;
  width: 100%;
  height: 10vh;
  display: block;
  transform: translateY(60%);
  overflow: hidden;
}

.section-history__description {
  line-height: 4.0rem;
}

.section-history__content-birth {
  display: flex;
  justify-content: space-between;
  padding: 40px 30px;
  cursor: pointer;
}

.section-history__content-birth--current {
  display: flex;
  justify-content: space-between;
}

.section-history__content-birth__title {
  border: 2px solid #e3002c;
  border-radius: 50px;
  padding: 10px 20px;
  width: 25%;
}

.section-history__content-birth__description {
  width: 62%;
}

.section-history__current {
  display: flex;
}

.section-history__current img {
  width: 50%;
  height: auto;
  object-fit: cover;
  border-radius: 10px 0 0 10px;
  /* IEで表示させるため */
  flex-shrink: 0
}

.section-history__content--peacenighter {
  padding: 40px 30px;
}

.section-history__content--peacenighter h3 {
  border: 2px solid #e3002c;
  border-radius: 50px;
  padding: 10px 20px;
  font-weight: normal;
}

@media (max-width:1024px) {
  .bubble1 {
    top: 5vw;
  }

  .bubble2 {
    top: 10vw;
  }

  .section-history__content-birth__title {
    width: 23%;
  }

  .section-history__content-birth__description {
    width: 55%;
  }

  .section-history__carpicon {
    top: -12vh;
  }
}

@media (max-width:599px) {
  .section-history h2 {
    font-size: 2.5rem;
  }

  .section-history h2 span {
    font-size: 2.3rem;
  }

  .section-history__description p {
    font-size: 1.7rem;
  }

  .section-history__carpicon {
    width: 35vw;
  }

  .section-history__content-birth {
    display: block;
  }

  .section-history__content-birth__title {
    width: 80%;
  }

  .section-history__content-birth__description {
    width: 100%;
    margin-top: 20px;
    line-height: 3.0rem;
  }

  .section-history__content-birth i {
    margin-top: 20px;
  }

  .section-history__current {
    display: block;
  }

  .section-history__current img {
    width: 100%;
    border-radius: 10px 10px 0 0;
  }

  .bubble1 {
    top: 1vw;
    width: 10px;
    height: 10px;
  }

  .bubble2 {
    top: 10vw;
    width: 20px;
    height: 20px;
  }
}


/* Trip */
.section-trip {
  position: relative;
}

.section-trip__carpicon {
  position: absolute;
  right: 0;
  top: 7vh;
  width: 21.241vw;
  height: auto;
}

.section-trip__trip {
  display: flex;
  justify-content: space-between;
}

.section-trip__trip--list img {
  width: 8.578vw;
  height: auto;
  object-fit: cover;
}

.section-trip__button {
  display: flex;
  justify-content: space-between;
}

#trip #section-trip__button li a p {
  width: 20vw;
  max-width: 240px;
  color:#e3002c;
  text-align:center;
  display:block;
  background:#FFF;
  border-radius: 5px;
  border: solid #e3002c 1px;
}

#trip #section-trip__button li a p:hover {
  width: 20vw;
  max-width: 240px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  background:#e3002c;
  border-radius: 5px;
  border: solid #e3002c 1px;
}

#trip #section-trip__button li.active a p {
  width: 20vw;
  max-width: 240px;
  color:#FFFFFF;
  text-align:center;
  display:block;
  background:#e3002c;
  border-radius: 5px;
  border: solid #e3002c 1px;
}

#trip #section-trip__button li.active a:after {
  display: block;
  text-align: center;
  font-family: FontAwesome;
  content: "\f0d7";
  font-size: 4.0rem;
  color: #e3002c;
  transform: translateY(-10px);
}

.area {
  display: none;
}

.area.is-active {
  display: block;/*表示*/
  animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
  animation-duration: 2s;
  animation-fill-mode: forwards;
}

@keyframes displayAnime{
from {
  opacity: 0;
}
to {
  opacity: 1;
}
}

.section-trip__content {
  position: relative;
  transition:1s all;
}

.section-trip__content:hover {
  transform:scale(1.1,1.1);
}

.section-trip__content img {
  padding: 10px;
}

.section-trip__number {
  border-radius: 50%;
  height: auto;
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 2;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

.section-trip__map-container {
  background: url(../images/map@2x.png) no-repeat center left/contain;
  width: 40vw;
  height: auto;
  position: relative;
}

.section-trip__map-number {
  border-radius: 50%;
  position: absolute;
  z-index: 2;
  /* transform: scale(0.9); */
  cursor: pointer;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
}

.family-trip__map-number1 {
  top: 63%;
  left: 20%;
}

.family-trip__map-number2 {
  top: 39%;
  left: 48%;
}

.family-trip__map-number3 {
  top: 42%;
  left: 78%;
}

.learning__map-number1 {
  top: 45%;
  left: 48%;
}

.learning__map-number2 {
  top: 43%;
  left: 42%;
}

.learning__map-number3 {
  top: 46%;
  left: 41%;
}

.learning__map-number4 {
  top: 45%;
  left: 36%;
}

.learning__map-number5 {
  top: 50%;
  left: 41%;
}

.learning__map-number6 {
  top: 46%;
  left: 78%;
}

.adult__map-number1 {
  top: 43%;
  left: 47%;
}

.adult__map-number2 {
  top: 38%;
  left: 42%;
}

.adult__map-number3 {
  top: 43%;
  left: 38%;
}

.adult__map-number4 {
  top: 42%;
  left: 43%;
}

.adult__map-number5 {
  top: 46%;
  left: 78%;
}

.relaxing__map-number1 {
  top: 50%;
  left: 60%;
}

.relaxing__map-number2 {
  top: 43%;
  left: 47%;
}

.relaxing__map-number3 {
  top: 46%;
  left: 78%;
}

.section-trip__content {
  display: flex;
}

@media (max-width:1024px) {
  .section-trip__map-number {
    transform: scale(0.8);
  }

  .adult__map-number4 {
    top: 50%;
  }

  .family-trip__map-number1 {
    left: 15%;
  }
}

@media (max-width:599px) {
  #trip #section-trip__button li.active a:after {
    display: none;
  }

  .section-trip h2 {
    font-size: 2.5rem;
  }

  .section-trip h2 span {
    font-size: 2.3rem;
  }

  .section-trip__carpicon {
    width: 45vw;
  }

  .section-trip__button {
    flex-wrap: wrap; 
  }

  #trip #section-trip__button li a p,
  #trip #section-trip__button li a p:hover,
  #trip #section-trip__button li.active a p {
    width: 41vw;
    margin-bottom: 10px;
  }

  .section-trip__trip {
    display: block;
  }

  .section-trip__trip--list img {
    width: 30vw;
  }

  .section-trip__map-container {
    width: 100%;
    height: 30vh;
    margin-top: 60px;
  }

  .learning__map-number2 {
    top: 35%;
  }

  .learning__map-number5 {
    top: 55%;
  }
}

/* Info */
.info__title {
  display: flex;
}

.info__images--small {
  display: flex;
  flex-flow:column;
  justify-content:space-between;
  width: 30.666%;
  height: auto;
}

.info__images--small img {
  width: 100%;
  height: auto;
  object-fit: cover;
  /* IEで表示させるため */
  flex-shrink: 0
}

.info__images {
  display: flex;
}

.info__images--big {
  width: 66.666%;
  height: auto;
  object-fit: cover;
  /* IEで表示させるため */
  flex-shrink: 0
}

.content__details {
  display: flex;
}

.info ul {
  display: flex;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}

.info__title-detail {
  height: 75px;
}

.content-box {
  display: flex;
  justify-content: space-around;
}

/* Slick */
.content__img {
  width: 300px;
  margin-bottom: 30px;
  overflow: hidden;
}

.content__img img {
  display: block;
  width: 300px !important;
}

.content__img-thumbnail {
  width: 300px;
  display: block;
}

.content__img-thumbnail img {
  display: block;
  width: 50px !important;
}

.content__img-thumbnail .slick-current{
  opacity: 0.3;
}

.content__sentences {
  width: 40%;
}

.content__info {
  border: #e3002c 2px solid;
}

.content__info-detail-box {
  display: flex;
}

.content__info-detail {
  display: flex;
}

.content__info-detail dt {
  width: 30%;
}

.content__info-detail dd {
  width: 80%;
}

.slick-prev:before,
.slick-next:before {
  color: #e3002c;
}

@media (max-width:1024px) {
  .content__info-detail dt {
    width: 40%;
  }
}

@media (max-width:599px) {
  .content-box {
    display: block;
  }

  .content__sentences {
    width: 100%;
  }

  .content__sentences h4 {
    padding-top: 30px;
  }

  .content__img-thumbnail {
    width: 250px;
    margin: 0 auto;
  }
}

@media (max-width:320px) {
  .modaal-content-container {
    padding: 5px;
  }
}

/* Tips */
.section-tips {
  position: relative;
}

/* @media (max-width:320px) {
  .section-tips {
    width: 84%;
  }
} */

.section-tips__crane {
  position: absolute;
  right: 1vw;
  top: 1vw;
  width: 13vw;
  height: auto;
}

.section-tips ul li img,
.section-web  ul li img {
  width: 100%;
  height: auto;
}

.section-tips ul,
.section-web ul {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
}

.section-tips h2 {
  padding: 0 30px 40px 30px;
}

@media (max-width:599px) {
  .section-tips h2 {
    font-size: 2.5rem;
    padding: 0 10px 100px;
  }

  .section-tips h2 span {
    font-size: 2.3rem;
  }

  .section-tips__crane {
    right: 1vw;
    top: 30vw;
    width: 35vw;
  }
}

@media (max-width:320px) {
  .section-tips__crane {
    top: 40vw;
  }
}

/* Web */
.section-web:before {
  content: "";
  background: url(../images/wave-red-long@2x.png) no-repeat center center/cover;
  width: 100%;
  height: 10vh;
  display: block;
  transform: translateY(-36%);
  overflow: hidden;
}

.section-web {
  position: relative;
}

.section-web__carpicon {
  position: absolute;
  right: 20vw;
  top: 30px;
  width: 21.241vw;
  height: auto;
}

@media (max-width:599px) {
  .section-web h2 {
    font-size: 2.5rem;
  }

  .section-web h2 span {
    font-size: 2.3rem;
  }

  .section-web__carpicon {
    right: 10px;
    top: 10px;
    width: 60vw;
  }
}

/* footer */
.footer {
  background-color: #f7f7f7;
}

.footer small {
  color: #7e7e7e;
}

.footer__icon {
  display: flex;
  justify-content: space-between;
  width: 120px;
  margin: 0 auto;
}

.footer__icon img {
  width: 50px;
  height: auto;
}

@media (max-width:599px) {
  .footer {
    padding-bottom: 60px;
  }
}

@media (max-width:320px) {
  .footer small {
    font-size: 1.0rem;
  }
}

/*IE11表示用のCSS*/
_:-ms-fullscreen, :root .section-history__content-birth__title,
.section-history__content--peacenighter h3,
.section-trip__number,
.section-trip__map-number {
  /* font-family: Meiryo, sans-serif; */
  font-family: 'ＭＳ ゴシック',sans-serif;
}