@charset "UTF-8";
/*-----------------------------------------------------------------------------
初期化
-------------------------------------------------------------------------------*/
* {
  box-sizing: border-box;
}

ul, ol, li {
  list-style: none;
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  transition: all 0.3s ease-in;
}

img {
  vertical-align: bottom;
}

h1, h2, h3, figure, p, dl, dt, dd {
  padding: 0;
  margin: 0;
}

.none {
  display: none;
}

.img-center {
  display: block;
  margin: 0 auto;
}

/*-----------------------------------------------------------------------------
break point
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
smooth scroll
-------------------------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
}

/*-----------------------------------------------------------------------------
スライドイン
-------------------------------------------------------------------------------*/
.scroll_up {
  transition: 0.8s ease-in-out;
  transform: translateY(80px);
  opacity: 0;
}

.scroll_up.on {
  transform: translateY(0);
  opacity: 1;
}

/*-----------------------------------------------------------------------------
PC/SP
-------------------------------------------------------------------------------*/
@media screen and (min-width: 768px) {
  .pc-only {
    display: block !important;
  }
  .sp-only {
    display: none !important;
  }
}
@media screen and (max-width: 767px) {
  .pc-only {
    display: none !important;
  }
  .sp-only {
    display: block !important;
  }
}
/*-----------------------------------------------------------------------------
colors
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
font
-------------------------------------------------------------------------------*/
html, body {
  width: 100%;
  padding: 0;
  margin: 0;
}

body {
  font-optical-sizing: auto;
  font-family: "M PLUS Rounded 1c", sans-serif;
  font-weight: 800;
  font-style: normal;
  color: #482B12;
  font-size: 1rem;
  line-height: 1.4;
  width: 100%;
  overflow-x: hidden;
}
@media screen and (max-width: 767px) {
  body {
    height: 100%;
    font-size: 0.875rem;
    line-height: 1.4;
    width: 100%;
  }
}

.txt-center {
  text-align: center;
}

.txt-right {
  text-align: right;
}

.txt-black {
  color: #121212;
}

/*-----------------------------------------------------------------------------
wrapper
-------------------------------------------------------------------------------*/
.wrapper {
  position: relative;
  overflow: hidden;
}

/*-----------------------------------------------------------------------------
bg-color
-------------------------------------------------------------------------------*/
.bg-lightyellow {
  background-color: #fffebb;
}

.bg-white {
  background-color: #fff;
}

/*-----------------------------------------------------------------------------
button
-------------------------------------------------------------------------------*/
.btn a {
  display: block;
  text-align: center;
  font-size: 1.3125rem;
  letter-spacing: 0.105rem;
}
@media screen and (max-width: 767px) {
  .btn a {
    font-size: 1.125rem;
    letter-spacing: 0.09rem;
  }
}

.btn-yellow a {
  color: #482B12;
  background-color: #FFFC37;
  border: 0.1875rem solid #482B12;
}
@media screen and (max-width: 767px) {
  .btn-yellow a {
    border-width: 0.125rem;
  }
}
.btn-yellow a:hover {
  background-color: #482B12;
  color: #FFFC37;
}

/*-----------------------------------------------------------------------------
link
-------------------------------------------------------------------------------*/
/*-----------------------------------------------------------------------------
display
-------------------------------------------------------------------------------*/
.dflex {
  display: flex;
}

.dflex-column {
  flex-direction: column;
}

/*-----------------------------------------------------------------------------
共通
-------------------------------------------------------------------------------*/
.sec {
  padding: 10.375rem 1.25rem 6.25rem;
}
@media screen and (max-width: 767px) {
  .sec {
    padding: 6.25rem 1.875rem 9.375rem;
  }
}
.sec .sec_ttl {
  text-align: center;
  font-size: 2rem;
  position: relative;
  margin-bottom: 5.875rem;
  letter-spacing: 0.16rem;
}
@media screen and (max-width: 767px) {
  .sec .sec_ttl {
    font-size: 1.5625rem;
    line-height: 2.1;
    margin-bottom: 3.625rem;
    letter-spacing: 0.125rem;
  }
}
.sec .sec_ttl:before {
  width: 3.75rem;
  height: 2.875rem;
  content: "";
  display: block;
  background: url("../img/icon_hirokuma_for_ttl.svg") no-repeat center;
  background-size: contain;
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  top: -4.375rem;
}
@media screen and (max-width: 767px) {
  .sec .sec_ttl:before {
    width: 3.25rem;
    height: 2.5rem;
    top: -2.75rem;
  }
}
@media screen and (min-width: 768px) {
  .sec .sec_ttl span {
    padding-bottom: 0.5rem;
    background: url("../img/line_dotted.png") repeat-x bottom 0 left 3px;
    background-size: 26px auto;
  }
}

/*-----------------------------------------------------------------------------
kv
-------------------------------------------------------------------------------*/
.kv {
  position: relative;
  padding-bottom: 12vw;
}
@media screen and (max-width: 767px) {
  .kv {
    padding-bottom: 15vw;
  }
}
@media screen and (min-width: 768px) {
  .kv .swiper-wrapper {
    transition-timing-function: linear;
  }
}
.kv .kv_main {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
  bottom: 0;
  width: 100%;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  .kv .kv_main {
    border-bottom: 0.125rem solid #482B12;
  }
}
.kv .kv_main .txt-center {
  font-size: 2.25vw;
  position: relative;
  top: 5.5vw;
}
@media screen and (max-width: 767px) {
  .kv .kv_main .txt-center {
    font-size: 4.4vw;
    top: 17vw;
  }
}
.kv img {
  width: 100%;
}
.kv .ttl {
  writing-mode: vertical-rl;
  position: absolute;
  top: 1.3125rem;
  right: 1.3125rem;
  z-index: 10;
  font-size: 2.5rem;
}
@media screen and (min-width: 768px) and (max-width: 1091px) {
  .kv .ttl img {
    width: 10vw;
  }
}
@media screen and (max-width: 767px) {
  .kv .ttl {
    top: 1.125rem;
    right: 1.125rem;
    font-size: 1.875rem;
  }
}
.kv .ttl span {
  display: block;
  background-color: #fff;
  padding: 0.5rem 0 0;
}
.kv .ttl span:first-of-type {
  height: 18.125rem;
}
@media screen and (max-width: 767px) {
  .kv .ttl span:first-of-type {
    height: 13.625rem;
  }
}
.kv .ttl span:last-of-type {
  margin-right: 0.625rem;
}

/*-----------------------------------------------------------------------------
「ひろスマート旅」とは？事前予約のすゝめ
-------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .sec-points .sec_ttl {
    background: url("../img/line_dotted_01.svg") no-repeat bottom center;
  }
}
@media screen and (max-width: 767px) {
  .sec-points .list {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
  }
}
.sec-points .list .list_item:not(:last-of-type) {
  margin-bottom: 3.0625rem;
}
.sec-points .list .ttl {
  background: url("../img/bg_points_ribbon.svg") no-repeat top center;
  line-height: 3.5rem;
  font-size: 1.75rem;
  letter-spacing: 0.14rem;
  margin-bottom: 1.1875rem;
}
@media screen and (max-width: 767px) {
  .sec-points .list .ttl {
    background: url("../img/bg_points_ribbon_sp.svg") no-repeat left center;
    background-size: contain;
    font-size: 1.375rem;
    padding-left: 1.875rem;
    text-align: left;
    line-height: 2.875rem;
  }
}
.sec-points .list .txt {
  font-size: 1rem;
  line-height: 2.4;
  letter-spacing: 0.08rem;
}
@media screen and (max-width: 767px) {
  .sec-points .list .txt {
    padding: 0 1.875rem;
    text-align: left;
    font-size: 0.875rem;
    line-height: 2.2;
    letter-spacing: 0.07rem;
  }
}

/*-----------------------------------------------------------------------------
ひろしまの体験一覧
-------------------------------------------------------------------------------*/
.sec-recomend {
  position: relative;
}
@media screen and (max-width: 767px) {
  .sec-recomend {
    padding-bottom: 7.5rem;
  }
  .sec-recomend .sec_ttl {
    background: url("../img/line_dotted_02.svg") no-repeat bottom center;
  }
}
.sec-recomend .hirokumaicon {
  position: absolute;
  top: -6.25rem;
  right: 7.5rem;
}
@media screen and (min-width: 768px) and (max-width: 1091px) {
  .sec-recomend .hirokumaicon {
    right: 1.25rem;
  }
  .sec-recomend .hirokumaicon img {
    width: 11.25rem;
  }
}
@media screen and (max-width: 767px) {
  .sec-recomend .hirokumaicon {
    right: 1.875rem;
  }
}
.sec-recomend .inner {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
}
@media screen and (max-width: 767px) {
  .sec-recomend .inner {
    max-width: unset;
  }
}
.sec-recomend .inner > .dflex {
  gap: 3.75rem;
  flex-wrap: wrap;
}
@media screen and (min-width: 781px) and (max-width: 854px) {
  .sec-recomend .inner > .dflex {
    gap: 2vw;
    justify-content: center;
  }
}
@media screen and (max-width: 767px) {
  .sec-recomend .inner > .dflex {
    gap: 1.875rem;
  }
}
.sec-recomend .card {
  width: 100%;
  max-width: 23.125rem;
  border: 0.1875rem solid #482B12;
  border-radius: 2.25rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .sec-recomend .card {
    margin: 0 auto;
  }
}
.sec-recomend .card figure img {
  width: 100%;
}
.sec-recomend .card .container {
  padding: 1.875rem;
  display: flex;
  flex-direction: column;
  min-height: 21.4375rem;
}
@media screen and (max-width: 767px) {
  .sec-recomend .card .container {
    padding: 1.875rem 1.25rem 1.25rem;
    min-height: unset;
  }
}
.sec-recomend .card .container .ttl {
  font-size: 1.5rem;
  letter-spacing: 0.12rem;
  line-height: 1;
  margin-bottom: 0.9375rem;
}
@media screen and (max-width: 767px) {
  .sec-recomend .card .container .ttl {
    font-size: 1.375rem;
    letter-spacing: 0.11rem;
  }
}
.sec-recomend .card .container .txt {
  font-size: 1rem;
  letter-spacing: 0.03125rem;
  line-height: 2;
  margin-bottom: 1.875rem;
}
@media screen and (max-width: 767px) {
  .sec-recomend .card .container .txt {
    font-size: 0.875rem;
    line-height: 1.6;
    letter-spacing: 0.07rem;
  }
}
.sec-recomend .card .container .btn {
  margin-top: auto;
}
.sec-recomend .card .container .btn a {
  line-height: 3.5rem;
  border-radius: 1.875rem;
}
@media screen and (max-width: 767px) {
  .sec-recomend .card .container .btn a {
    line-height: 2.6875rem;
    border-radius: 1.5rem;
  }
}

/*-----------------------------------------------------------------------------
ひろしま観光アプリ「KINSAI」
-------------------------------------------------------------------------------*/
@media screen and (max-width: 767px) {
  .sec-kinsai {
    padding-bottom: 9.75rem;
  }
}
.sec-kinsai .tls {
  letter-spacing: 0.0625rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .tls {
    letter-spacing: -0.0625rem;
  }
}
@media screen and (max-width: 767px) {
  .sec-kinsai .sp-tls {
    letter-spacing: 0.0625rem !important;
  }
}
.sec-kinsai .tls2 {
  letter-spacing: 0.1125rem;
}
.sec-kinsai .sec_ttl {
  line-height: 2.5;
  margin-bottom: 3.75rem;
}
@media screen and (min-width: 768px) {
  .sec-kinsai .sec_ttl {
    background: url("../img/line_dotted_03_pc.svg") no-repeat bottom 0.375rem center;
  }
  .sec-kinsai .sec_ttl span {
    background: unset;
  }
}
.sec-kinsai .sec_ttl .txt-black {
  background: unset !important;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .sec_ttl {
    line-height: 2.2;
    margin-bottom: 2.875rem;
    background: url("../img/line_dotted_03.svg") no-repeat bottom center;
    width: 100vw;
    margin: 0 calc(50% - 50vw) 2.875rem;
  }
}
.sec-kinsai .sec_ttl:before {
  background: url("../img/icon_kinsai_for_ttl.svg") no-repeat top center;
  top: -2.9375rem;
  background-size: contain;
}
.sec-kinsai .lead {
  letter-spacing: 0.08rem;
  line-height: 2.6;
  font-size: 1rem;
  margin-bottom: 5.375rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .lead {
    font-size: 0.875rem;
    text-align: left;
    line-height: 2.2;
    letter-spacing: 0.07rem;
  }
}
.sec-kinsai .linkarea {
  position: relative;
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
}
.sec-kinsai .linkarea .icon {
  position: absolute;
  top: -4.875rem;
  right: 1.875rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .linkarea .icon {
    right: 0.875rem;
    top: -4.1875rem;
  }
  .sec-kinsai .linkarea .icon img {
    width: 8.125rem;
  }
}
.sec-kinsai .linkarea a {
  border: 0.1875rem solid #121212;
  display: block;
  border-radius: 1.875rem;
  position: relative;
  width: 100%;
  height: 9.0625rem;
  overflow: hidden;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .linkarea a {
    height: unset;
    border-width: 0.125rem;
  }
}
.sec-kinsai .linkarea a:hover .txtarea {
  background: #4678FF url("../img/icon_arrow_right_white.svg") no-repeat bottom 1.875rem right 10.625rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .linkarea a:hover .txtarea {
    background-position: right 1.625rem center;
    background-size: 1.25rem auto;
  }
}
.sec-kinsai .linkarea a .dflex {
  flex-direction: row-reverse;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .linkarea a .dflex {
    flex-direction: column-reverse;
  }
}
.sec-kinsai .linkarea a .icon {
  position: absolute;
  top: -1.875rem;
  right: 0;
}
.sec-kinsai .linkarea a figure {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .linkarea a figure {
    width: 100%;
    padding: 2rem 1.875rem 1.875rem;
  }
  .sec-kinsai .linkarea a figure img {
    width: 15.9375rem;
  }
}
.sec-kinsai .linkarea a .txtarea {
  padding: 2.1875rem 2.375rem 0rem 1.3125rem;
  background: #FF4414 url("../img/icon_arrow_right_white.svg") no-repeat bottom 1.875rem center;
  color: #fff;
  transition: all 0.3s ease-in;
  width: 50%;
  text-align: center;
  font-size: 1.75rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .linkarea a .txtarea {
    width: 100%;
    font-size: 1.125rem;
    line-height: 1;
    letter-spacing: 0.09rem;
    padding: 1.25rem 0 1.25rem 1.25rem;
    text-align: left;
    background: #FF4414 url("../img/icon_arrow_right_white.svg") no-repeat right 2.25rem center;
    background-size: 1.25rem auto;
  }
}
.sec-kinsai .stamp {
  margin-top: 5.375rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .stamp {
    margin-top: 3.125rem;
  }
}
.sec-kinsai .stamp img {
  width: 28.5625rem;
}
@media screen and (max-width: 767px) {
  .sec-kinsai .stamp img {
    width: 100%;
  }
}

/*-----------------------------------------------------------------------------
header
-------------------------------------------------------------------------------*/
.header {
  width: 100%;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem;
}
@media screen and (max-width: 767px) {
  .header {
    padding: 0.4375rem;
  }
}
.header img {
  width: 9.8125rem;
}
@media screen and (max-width: 767px) {
  .header img {
    width: 7.125rem;
  }
}

/*-----------------------------------------------------------------------------
footer
-------------------------------------------------------------------------------*/
.footer {
  padding-top: 6.25rem;
  position: relative;
  border-top: 0.1875rem solid #482B12;
}
@media screen and (min-width: 768px) {
  .footer {
    background: url("../img/bg_footer.png") repeat top center;
  }
}
@media screen and (max-width: 767px) {
  .footer {
    border-width: 0.125rem;
    background-color: #FFFC37;
    padding: 3.875rem 1.875rem 0;
  }
}
.footer .sec {
  padding-bottom: 6.25rem;
}
@media screen and (max-width: 767px) {
  .footer .sec {
    padding-bottom: 3.625rem;
    padding-top: 2.5rem !important;
  }
}
.footer .copyright {
  position: absolute;
  left: 0.625rem;
  top: -1.625rem;
  font-size: 0.75rem;
  letter-spacing: 0.09rem;
}
.footer > a {
  width: 100%;
  max-width: 50rem;
  margin: 0 auto;
  display: block;
}
.footer > a:hover {
  opacity: 0.7;
}
.footer > a img {
  width: 100%;
}
.footer .sec-footer {
  padding-top: 4.8125rem;
}
@media screen and (max-width: 767px) {
  .footer .sec-footer .sec_ttl {
    background: url("../img/line_dotted_04.svg") no-repeat bottom center;
  }
}
.footer .sec-footer ul.dflex {
  justify-content: center;
  gap: 1.5rem;
}
@media screen and (max-width: 767px) {
  .footer .sec-footer ul.dflex {
    gap: 1rem;
  }
}
@media screen and (max-width: 767px) {
  .footer .sec-footer ul.dflex li img {
    width: 3.125rem;
  }
}
.footer .sec-footer ul.dflex li a:hover {
  opacity: 0.7;
}
.footer .sec-footer .sec_ttl {
  margin-bottom: 2.75rem;
}
@media screen and (max-width: 767px) {
  .footer .sec-footer .sec_ttl {
    margin-bottom: 2rem;
  }
}
.footer .sec-footer .sec_ttl:before {
  display: none;
}
.footer small {
  display: block;
  text-align: center;
  background-color: #482B12;
  color: #fff;
  line-height: 4.3125rem;
  font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
  .footer small {
    width: 100vw;
    margin: 0 calc(50% - 50vw);
    line-height: 2.9375rem;
    font-size: 0.625rem;
  }
}

/*-----------------------------------------------------------------------------
パンくずリスト
-------------------------------------------------------------------------------*/
.breadlist {
  width: 100vw;
  color: #ccc;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}
@media screen and (max-width: 767px) {
  .breadlist {
    padding: 0.125rem 0.375rem !important;
  }
}
.breadlist .list {
  width: 100%;
  margin: 0 auto;
  padding: 0.4375rem 0.625rem 0.0625rem;
}
@media screen and (max-width: 767px) {
  .breadlist .list {
    padding: 0;
    flex-wrap: wrap;
    gap: 4px 0;
  }
}
.breadlist .list .item {
  font-size: 0.75rem;
}
@media screen and (max-width: 767px) {
  .breadlist .list .item {
    font-size: 0.625rem;
  }
}
.breadlist .list .item:not(:last-of-type):after {
  content: ">";
  display: inline-block;
  width: 0.625rem;
  vertical-align: 0px;
  margin-left: 4px;
  height: 20px;
  background-size: contain;
}
@media screen and (max-width: 767px) {
  .breadlist .list .item:not(:last-of-type):after {
    vertical-align: -1px;
    width: 10px;
    height: 10px;
  }
}
.breadlist .list .item a {
  font-weight: 400;
  font-size: 0.75rem;
  font-weight: normal;
  color: #ccc;
}
@media screen and (max-width: 767px) {
  .breadlist .list .item a {
    font-size: 10px;
  }
}
.breadlist .list .item a:hover {
  text-decoration: underline;
}

/*-----------------------------------------------------------------------------
TOPへ戻るボタン
-------------------------------------------------------------------------------*/
#page-top {
  position: fixed;
  right: 1.875rem;
  z-index: 10;
}
@media screen and (max-width: 767px) {
  #page-top {
    bottom: 1.25rem;
    right: 1.25rem;
  }
  #page-top img {
    width: 5rem;
  }
}

#page-top a:hover {
  opacity: 0.7;
}

/*-----------------------------------------------------------------------------
スクロールし続けると画像が上に移動し続ける
-------------------------------------------------------------------------------*/
.scroll-image {
  opacity: 1; /* 常に表示 */
  transition: transform 0.1s linear; /* スムーズに動かす */
  transform: translateY(0); /* 初期位置を少し下げる */
}/*# sourceMappingURL=style.css.map */