@charset "utf-8";

/* CSS Document */

/* ボタン */
.btn02 {
  /*アニメーションの起点とするためrelativeを指定*/
  position: relative;
  overflow: hidden;
  /*ボタンの形状*/
  text-decoration: none;
  display: inline-block;
  color: #ffffff;
  background-color: #BEA976;
  border: 1px solid #BEA976;
  /* ボーダーの色と太さ */
  padding: 12px 40px 12px 30px;
  text-align: center;
  outline: none;
  /*アニメーションの指定*/
  transition: ease .2s;
}

/*ボタン内spanの形状*/
.btn02 span {
  position: relative;
  z-index: 2;
  /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  color: #ffffff;
}

.btn02::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #ffffff;
  border-right: 1px solid #ffffff;
  transform: translateY(-50%) rotate(45deg);
  position: absolute;
  right: 24px;
  top: 50%;
}

@media screen and (min-width:1024px) {

  /*　画面サイズが1024pxからはここを読み込む　*/
  .btn02:hover span {
    color: #BEA976;
  }

  .btn02:hover::after {
    border-top: 1px solid #BEA976;
    border-right: 1px solid #BEA976;
    z-index: 2;
  }

  /*== 背景が流れる（左から右） */
  .bgleft02:before {
    content: '';
    /*絶対配置で位置を指定*/
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    /*色や形状*/
    background: #FCFAF1;
    /*背景色*/
    width: 100%;
    height: 100%;
    /*アニメーション*/
    transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    transform: scale(0, 1);
    transform-origin: right top;
  }

  /*hoverした際の形状*/
  .bgleft02:hover:before {
    transform-origin: left top;
    transform: scale(1, 1);
  }
}


/* ------------------------train.css------------------------ */

.kv__wrap-img {
  background-image: url(../img/kv_train.jpg);
}

.container {
  width: 87%;
  margin: 0 auto;
}

/* アンカーメニュー */
.anchor-menu__wrap {
  padding: 4.0rem 0;
}
.anchor-menu__item:not(:last-child){
  border-bottom: 1px solid #E8E8E8;
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
}
.anchor-menu__item a {
  width: 90%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.anchor-menu__item a::after {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #BEA976;
  border-right: 2px solid #BEA976;
  transform: translateY(-50%) rotate(135deg);
  position: absolute;
  right: -20px;
  top: 50%;
}
.anchor-menu__logo {
  width: 100px;
  flex-shrink: 0;
}
.anchor-menu__name {
  width: calc(100% - 116px);
  font-size: 1.5rem;
  font-weight: bold;
}
@media screen and (min-width:480px) {
  /*　画面サイズが480pxからはここを読み込む　*/
}
@media screen and (min-width:768px) {
  /*　画面サイズが768pxからはここを読み込む　*/
  .anchor-menu__wrap {
    padding: 5.6rem;
  }

  .anchor-menu__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 3.2rem;
}
  .anchor-menu__item:not(:last-child){
    border-bottom: none;
    margin-bottom: 3.2rem;
  }
  .anchor-menu__item{
    width: 40%;
    padding-bottom: 1.6rem;
    margin-bottom: 3.2rem;
  }
  .anchor-menu__item a {
    width: 100%;
    flex-direction: column;
    text-align: center;
  }
  .anchor-menu__item a::after {
    transform: translateX(50%) rotate(135deg);
    right: 50%;
    top: initial;
    bottom: -16px;
  }
  .anchor-menu__logo {
    width: 200px;
  }
  .anchor-menu__name {
    width: 100%;
  }
}
@media screen and (min-width:1024px) {
  /*　画面サイズが1024pxからはここを読み込む　*/
  .anchor-menu__wrap {
    padding: 9.6rem;
  }
  .anchor-menu__item:not(:last-child){
    margin-bottom: 4.0rem;
  }
  .anchor-menu__item{
    margin-bottom: 4.0rem;
  }
  .anchor-menu__name {
    font-size: 1.6rem;
  }
  .anchor-menu__item a:hover::after{
    bottom: -26px;
    transition: all 0.5s;
  }
  .anchor-menu__item a:hover .anchor-menu__name{
    color: #BEA976;
    transition: all 0.5s;
  }
  .anchor-menu__item a:hover .anchor-menu__logo{
    opacity: 0.5;
    transition: all 0.5s;
  }
}



/* -----列車----- */
.train__wrap {
  padding: 4.0rem 0;
  border-top: 1px solid #E8E8E8;
}

.train-top__block {
  margin-bottom: 3.2rem;
  text-align: center;
}

.train-top__logo {
  width: 200px;
  margin: 0 auto 0.4rem;
}

.train-top__block h3 {
  font-size: 2.2rem;
  font-weight: bold;
  line-height: 1.5;
}

.train-top__block h3 span {
  color: #BEA976;
  font-weight: bold;
  display: block;
  font-size: 1.4rem;
  margin-top: 0.8rem;
}

.train-intro__block {
  margin-bottom: 4.8rem;
}

.train-intro__block img {
  margin-bottom: 3.2rem;
}

.train-history__block {
  background-color: #FCFAF1;
  border: 1px solid #BEA976;
  padding: 2.4rem 1.6rem;
  margin-bottom: 4.8rem;
}

.train-history__ttl {
  color: #BEA976;
  font-weight: bold;
  font-size: 1.6rem;
  margin-bottom: 1.6rem;
}

.train-map__block {
  margin-bottom: 3.2rem;
}

.train-map__block h4 {
  font-size: 2.0rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 3.2rem;
}

.train-map__img {
  margin-bottom: 1.6rem;
}

.train-map__info div:not(:last-child) {
  margin-bottom: 1.6rem;
  border-bottom: 1px solid #E8E8E8;
  padding-bottom: 1.6rem;
}

.train-map__info dt {
  color: #BEA976;
  font-size: 1.6rem;
  margin-bottom: 0.8rem;
  font-weight: bold;
}

.train-map__info dd {
  margin-bottom: 0.8rem;
}

.train-map__info dd span {
  font-size: 1.2rem;
}

.train-map__img_r{
  width: 70%;
  margin: 0 auto 1.6rem;
}

.train-info__block h5{
  font-size: 2.0rem;
  margin-bottom: 2.4rem;
  line-height: 1.5;
  font-weight: bold;
}
.train-info__content:not(:last-child) {
  margin-bottom: 3.2rem;
}

.train-info__head {
  font-weight: bold;
  margin-bottom: 0.6rem;
}

.train-info__head span {
  font-weight: normal;
}

.train-info__list {
  margin-bottom: 1.2rem;
}

.train-info__list li {
  margin-bottom: 0.4rem;
}

.train-info__notice {
  font-size: 1.2rem;
}

.indent-3{
  padding-left: 3em;
  text-indent: -3em;
}
.btn__block{
  text-align: center;
  padding: 2.4rem 0 0;
}
@media screen and (min-width:480px) {
  /*　画面サイズが480pxからはここを読み込む　*/
}

@media screen and (min-width:768px) {

  /*　画面サイズが768pxからはここを読み込む　*/
  .train-top__block h3 {
    font-size: 2.4rem;
  }

  .train-intro__block p {
    text-align: center;
    line-height: 2;
  }

  .train-history__block {
    padding: 2.4rem;
  }

  .train-history__ttl {
    text-align: center;
  }

  .train-map__block h4 {
    font-size: 2.2rem;
  }

  .train-map__img {
    width: 532px;
  }
  .train-map__img_r{
    width: 284px;
    margin: 0;
  }
  .train-info__block h5{
    text-align: center;
    font-size: 2.2rem;
    padding-top: 3.2rem;
    margin-bottom: 4.0rem;
  }

  .train-map__info dd span {
    margin-left: 1.6rem;
  }
  .btn__block{
    padding: 4.8rem 0 0;
  }

}

@media screen and (min-width:1024px) {

  /*　画面サイズが1024pxからはここを読み込む　*/
  .container {
    width: 960px;
  }

  .train__wrap {
    padding: 9.6rem 0;
  }

  .train-top__block {
    margin-bottom: 6.4rem;
  }

  .train-top__logo {
    width: 360px;
    margin: 0 auto 0.8rem;
  }

  .train-top__block h3 {
    font-size: 2.8rem;
  }

  .train-top__block h3 span {
    font-size: 2.0rem;
    margin-top: 1.6rem;
  }

  .train-intro__block {
    margin-bottom: 6.4rem;
  }

  .train-intro__block img {
    margin-bottom: 6.4rem;
  }

  .train-history__block {
    padding: 4.8rem;
    margin-bottom: 9.6rem;
  }
  .train-map__block{
    width: 832px;
    margin: 0 auto 3.2rem;
  }

  .train-map__block h4 {
    font-size: 2.4rem;
    margin-bottom: 4.4rem;
  }

  .train-map__content {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .train-map__info {
    width: 270px;
  }
  .train-info__block{
    width: 832px;
    margin: 0 auto;
  }

  .train-info__block h5{
    font-size: 2.4rem;
    padding-top: 4.0rem;
    margin-bottom: 4.0rem;
  }
}