@charset "UTF-8";
/* ------------------
Sub Page
------------------*/
/* Color Palette */
/* Padding */
/* Header Space */
/* Wrap */
/* Padding */
/*-----------
Root
-------------*/
:root {
  --large: 8rem;
  --medium: 5rem;
  --small: 2rem;
  --section-padding: 8rem 0;
  --transition: all 0.3s ease;
  --gutter: calc((100vw - 90vw) / 2); }

@media screen and (max-width: 1412px) {
  :root {
    --large: 6rem;
    --medium: 4rem;
    --small: 1.5rem;
    --section-padding: 6rem 0; } }
@media screen and (max-width: 880px) {
  :root {
    --large: 5rem;
    --medium: 3rem;
    --small: 1.5rem;
    --section-padding: 5rem 0; } }
@media screen and (max-width: 640px) {
  :root {
    --large: 3rem;
    --medium: 2rem;
    --small: 1rem;
    --section-padding: 3rem 0; } }
/* ------------------
Sub Page MAIN VISUAL
------------------*/
.mv_wrapper {
  margin: 90px 0 0;
  display: grid;
  grid-template-columns: 1fr auto 7% 4%;
  /* 左画像 / 右画像(正方形) / バー2本 */
  max-height: 648px;
  height: 40vw;
  max-width: 100%;
  overflow: hidden;
  /* ===== SP用 Swiper ===== */ }
  @media (max-width: 1200px) {
    .mv_wrapper {
      max-height: none; } }
  @media (max-width: 640px) {
    .mv_wrapper {
      margin: 52px 0 0;
      display: flex;
      flex-wrap: wrap;
      max-height: none;
      height: auto; } }
  .mv_wrapper .mv_pc {
    display: contents; }
    @media (max-width: 640px) {
      .mv_wrapper .mv_pc {
        display: none; } }
  .mv_wrapper .mv_01, .mv_wrapper .mv_02 {
    position: relative;
    height: 100%;
    overflow: hidden; }
    @media (max-width: 640px) {
      .mv_wrapper .mv_01, .mv_wrapper .mv_02 {
        flex: 0 0 100%;
        aspect-ratio: 1 / 1;
        /* 正方形 */
        overflow: hidden; } }
    .mv_wrapper .mv_01 img, .mv_wrapper .mv_02 img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block; }
  .mv_wrapper .mv_02 {
    aspect-ratio: 1 / 1; }
  .mv_wrapper .mv_sp {
    display: none; }
    @media (max-width: 640px) {
      .mv_wrapper .mv_sp {
        display: block;
        width: 100%;
        aspect-ratio: 1 / 1;
        overflow: hidden; } }
    .mv_wrapper .mv_sp .swiper-slide img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      display: block; }
  @media (max-width: 640px) {
    .mv_wrapper .bar_01, .mv_wrapper .bar_02 {
      height: 60px; } }
  .mv_wrapper .bar_01.color_famous-places {
    background: #695fe6; }
  .mv_wrapper .bar_01.color_museums {
    background: #276ef1; }
  .mv_wrapper .bar_01.color_shopping {
    background: #d7aaaa; }
  .mv_wrapper .bar_01.color_transportation {
    background: #5ad28c; }
  @media (max-width: 640px) {
    .mv_wrapper .bar_01 {
      flex: 0 0 66%;
      /* 2/3 */ } }
  .mv_wrapper .bar_02.color_famous-places {
    background: #695fe6;
    opacity: 0.6; }
  .mv_wrapper .bar_02.color_museums {
    background: #276ef1;
    opacity: 0.6; }
  .mv_wrapper .bar_02.color_shopping {
    background: #d7aaaa;
    opacity: 0.6; }
  .mv_wrapper .bar_02.color_transportation {
    background: #5ad28c;
    opacity: 0.6; }
  @media (max-width: 640px) {
    .mv_wrapper .bar_02 {
      flex: 0 0 34%;
      /* 2/3 */ } }

/* ------------------
Sub Page Intro
------------------*/
.page-intro {
  background: #051464;
  color: #ffffff;
  padding: var(--medium) 0; }
  .page-intro h1 {
    font-size: min(4vw, 42px);
    font-weight: 400; }
    @media (max-width: 640px) {
      .page-intro h1 {
        text-align: left;
        font-size: max(4vw, 28px); } }
  .page-intro p {
    text-align: center;
    font-size: min(4vw, 32px);
    margin-bottom: 1rem; }
    @media (max-width: 640px) {
      .page-intro p {
        text-align: left;
        font-size: max(3vw, 21px); } }

/* ------------------
Content Block
------------------*/
.content-block {
  padding: 5rem 0 0; }
  @media (max-width: 640px) {
    .content-block {
      padding: 4rem 0 0; } }

.content_image {
  width: 95%;
  max-width: 1200px;
  margin: 0 auto; }

.layout_base {
  margin-top: 10px; }

.band {
  width: 100%; }
  .band__inner {
    width: 95%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; }
    @media (max-width: 640px) {
      .band__inner {
        width: 100%;
        max-width: none; } }

.band_top.category_famous-places {
  /* 左：青、右：紫 の分割帯を横いっぱい */
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #695fe6 40%, #695fe6 100%); }
.band_top.category_museums {
  /* 左：青、右：紫 の分割帯を横いっぱい */
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #276ef1 40%, #276ef1 100%); }
.band_top.category_shopping {
  /* 左：青、右：紫 の分割帯を横いっぱい */
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #d7aaaa 40%, #d7aaaa 100%); }
.band_top.category_transportation {
  /* 左：青、右：紫 の分割帯を横いっぱい */
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #5ad28c 40%, #5ad28c 100%); }

.band_top .band__inner {
  display: grid;
  grid-template-columns: 40% 60%; }

.content_name {
  max-width: 500px;
  color: #ffffff;
  padding: 2rem 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }
  @media (max-width: 640px) {
    .content_name {
      max-width: none;
      background: #1414d2;
      padding: 1rem 2.5%; } }
  .content_name h2 {
    font-size: min(2.5vw, 30px);
    font-weight: 600;
    line-height: 1.5; }
    @media (max-width: 640px) {
      .content_name h2 {
        font-size: max(2vw, 24px); } }
  .content_name p {
    text-align: left;
    font-size: min(2vw, 24px); }
    @media (max-width: 640px) {
      .content_name p {
        font-size: max(1.8vw, 20px); } }

.content_headline {
  color: #ffffff;
  padding: 2rem 0 2rem 2rem;
  display: flex;
  align-items: center;
  display: flex;
  align-items: center; }
  @media (max-width: 640px) {
    .content_headline {
      padding: 1rem 2.5%; } }
  .content_headline.category_shopping {
    color: #000000; }
  .content_headline.category_transportation {
    color: #000000; }
  .content_headline h3 {
    font-size: min(2.8vw, 30px);
    font-weight: 500;
    line-height: 1.5; }
    @media (max-width: 640px) {
      .content_headline h3 {
        font-size: max(2vw, 18px); } }

/* info無し：本文自体がライトグレー（右いっぱい） */
.band_body.no-info {
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #f7f4f2 40%, #f7f4f2 100%); }
  @media (max-width: 640px) {
    .band_body.no-info {
      background: #f7f4f2; } }

/* infoあり：本文は白（右いっぱい）、infoがグレー */
.band_body.with-info {
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #ffffff 40%, #ffffff 100%); }
  @media (max-width: 640px) {
    .band_body.with-info {
      background: #ffffff; } }

.band_info {
  background: linear-gradient(to right, #1414d2 0 40%, #1414d2 40%, #f7f4f2 40%, #f7f4f2 100%); }
  @media (max-width: 640px) {
    .band_info {
      background: #f7f4f2; } }

/* 下段の中身配置 */
.band_body .band__inner,
.band_info .band__inner {
  display: grid;
  grid-template-columns: 40% 60%; }

/* 左側は空（地名の幅と揃えるためのダミー） */
.band_body .band__inner::before,
.band_info .band__inner::before {
  content: ''; }
  @media (max-width: 640px) {
    .band_body .band__inner::before,
    .band_info .band__inner::before {
      display: none; } }

.content_body, .content_info {
  padding: 2rem 0 2rem 2rem; }
  @media (max-width: 640px) {
    .content_body, .content_info {
      padding: 2rem 2.5%; } }

.content_body > img {
  margin: 1.5rem 0; }

.content_info table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0; }
.content_info td {
  vertical-align: top;
  white-space: normal; }
  .content_info td > p span {
    opacity: 0.7; }
  @media (max-width: 880px) {
    .content_info td .note {
      font-size: 70%; } }
.content_info td.label {
  width: 20%;
  white-space: nowrap;
  border-right: 1px solid rgba(0, 0, 0, 0.25);
  padding-top: 1rem; }
  @media (max-width: 880px) {
    .content_info td.label {
      width: 27%; } }
.content_info td.details {
  width: 80%;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  padding: 1rem 0 0 2rem; }
  @media (max-width: 880px) {
    .content_info td.details {
      width: 73%; } }
  @media (max-width: 640px) {
    .content_info td.details {
      padding: 1rem 0 0 1rem; } }
.content_info table tr:first-child td.label {
  padding-top: 0; }
.content_info table tr:first-child td.details {
  padding: 0 0 0 2rem; }
  @media (max-width: 640px) {
    .content_info table tr:first-child td.details {
      padding: 0 0 0 1rem; } }

@media (max-width: 640px) {
  .band_top .band__inner, .band_body .band__inner, .band_info .band__inner {
    display: block; }

  .band_top.category_famous-places {
    background: #1414d2; }

  .band_top.category_museums {
    background: #276ef1; }

  .band_top.category_shopping {
    background: #d7aaaa; }

  .band_top.category_transportation {
    background: #5ad28c; }

  .content_headline.category_famous-places {
    background: #695fe6; }

  .content_headline.category_museums {
    background: #276ef1; }

  .content_headline.category_shopping {
    background: #d7aaaa; }

  .content_headline.category_transportation {
    background: #5ad28c; } }
/* ------------------
Sub page section
------------------*/
.bg-light-tonal-gray {
  position: relative;
  z-index: 0; }

.standard-section {
  position: relative;
  padding: 6rem 0;
  z-index: 1; }
  .standard-section:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: #ffffff;
    width: 100%;
    height: 300px;
    z-index: -1; }
    @media (max-width: 640px) {
      .standard-section:before {
        height: 160px; } }
  @media (max-width: 640px) {
    .standard-section {
      padding: 2rem 0; } }
  .standard-section .number {
    position: relative; }
    .standard-section .number p {
      position: absolute;
      left: 2rem;
      bottom: 3rem;
      font-size: min(12vw, 11rem);
      line-height: 1;
      color: #ffdc8c;
      font-weight: 700; }
      @media (max-width: 640px) {
        .standard-section .number p {
          left: 1rem;
          top: -5rem;
          bottom: auto;
          background: #051464;
          padding: 1rem; } }
  @media (max-width: 640px) {
    .standard-section:nth-child(even) .number p {
      left: auto;
      right: 1rem; } }
  .standard-section .pic {
    margin: 0 0 2rem; }
    @media (max-width: 640px) {
      .standard-section .pic {
        margin: 0 0 1rem; } }
  .standard-section figure .pic {
    margin: 0 0 1rem; }
  .standard-section figure figcaption {
    line-height: 1.4;
    font-size: 70%;
    margin: 0 0 2rem;
    font-feature-settings: 'palt'; }
    @media (max-width: 640px) {
      .standard-section figure figcaption {
        margin: 0 0 1rem; } }
  .standard-section__txt {
    display: flex; }
    @media (max-width: 640px) {
      .standard-section__txt {
        display: block; } }
    .standard-section__txt-ttl {
      padding: 0 2rem 0 0;
      color: #051464;
      width: 34%;
      box-sizing: border-box; }
      .standard-section__txt-ttl.purple {
        color: #551e5f; }
    .standard-section__txt .border-right {
      border-right: solid 2px #051464; }
      @media (max-width: 640px) {
        .standard-section__txt .border-right {
          border-right: none; } }
    .standard-section__txt .border-right.purple {
      border-right: solid 2px #551e5f; }
      @media (max-width: 640px) {
        .standard-section__txt .border-right.purple {
          border-right: none; } }
    .standard-section__txt-body {
      width: 66%;
      padding: 0 0 0 2rem;
      box-sizing: border-box; }
      .standard-section__txt-body p {
        margin: 1rem 0; }
        .standard-section__txt-body p:last-child {
          margin: 1rem 0 0; }
      .standard-section__txt-body .pic {
        margin: 1rem 0; }
      .standard-section__txt-body-info {
        background: #ffffff;
        font-size: 1.4rem;
        padding: 2rem; }
        @media (max-width: 640px) {
          .standard-section__txt-body-info {
            padding: 1rem;
            font-size: 1.2rem; } }
        .standard-section__txt-body-info p:first-child, .standard-section__txt-body-info p.bold {
          margin: 0 0 1rem;
          font-weight: 600;
          border-bottom: solid 1px rgba(5, 20, 100, 0.1); }
        .standard-section__txt-body-info p.bold {
          margin: 1rem 0; }
        .standard-section__txt-body-info dl {
          display: flex;
          line-height: 1.5;
          padding: .25rem 0; }
          .standard-section__txt-body-info dl:first-child {
            padding: 0 0 .25rem; }
          .standard-section__txt-body-info dl:last-child {
            padding: .25rem 0 0; }
          .standard-section__txt-body-info dl dt {
            width: 100px; }
            @media (max-width: 640px) {
              .standard-section__txt-body-info dl dt {
                width: 80px; } }
          .standard-section__txt-body-info dl dd {
            width: calc(100% - 100px); }
            @media (max-width: 640px) {
              .standard-section__txt-body-info dl dd {
                width: calc(100% - 80px); } }
            .standard-section__txt-body-info dl dd span {
              color: #6C6C6C;
              font-size: 90%; }
    @media (max-width: 640px) {
      .standard-section__txt-ttl, .standard-section__txt-body {
        width: 100%;
        padding: 0; } }
  .standard-section.sub-layoutA {
    background: #ffffff;
    padding: 3rem 0; }
    .standard-section.sub-layoutA h2 {
      font-size: 3.4rem;
      border-bottom: solid 3px #051464;
      display: inline-block;
      line-height: 1.1;
      font-weight: 700;
      padding: 0 0 .5rem; }
      @media (max-width: 640px) {
        .standard-section.sub-layoutA h2 {
          margin: 0 0 .5rem;
          font-size: 2.4rem; } }
    .standard-section.sub-layoutA.sub-ttlA .pic {
      position: relative;
      z-index: 1; }
    .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl {
      position: relative; }
      @media (max-width: 640px) {
        .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl {
          margin: 0 0 3rem; } }
      .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl h2, .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl p {
        border: none;
        color: #ffffff;
        position: relative; }
      @media (max-width: 640px) {
        .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl h2 {
          margin: 0; } }
      .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl:before {
        content: '';
        position: absolute;
        top: -10rem;
        left: -4rem;
        background: #276ef1;
        width: 100%;
        height: 200px; }
        @media (max-width: 640px) {
          .standard-section.sub-layoutA.sub-ttlA .standard-section__txt-ttl:before {
            top: -13.5rem; } }
    .standard-section.sub-layoutA h3 {
      padding: 0;
      line-height: 1.5; }
    .standard-section.sub-layoutA .standard-section__txt-body-info {
      background: #f7f4f2; }
    @media (max-width: 640px) {
      .standard-section.sub-layoutA.padding-top {
        padding: 6rem 0; } }
  .standard-section.sub-layoutB h2 {
    text-align: center;
    margin: 0 0 2rem;
    font-feature-settings: 'palt';
    font-size: clamp(16px, 4.6vw, 30px); }
    @media (max-width: 640px) {
      .standard-section.sub-layoutB h2 {
        margin: 1rem 0; } }
  .standard-section.sub-layoutB:before {
    height: 100%; }
  .standard-section.sub-layoutB .wrap {
    padding: 6rem;
    border: solid 1px #ccc;
    background: #fff;
    border-radius: .5rem;
    box-sizing: border-box; }
    @media (max-width: 640px) {
      .standard-section.sub-layoutB .wrap {
        padding: 1rem; } }
  .standard-section.sub-layoutB .standard-section__txt-body {
    width: 100%;
    padding: 0; }
    .standard-section.sub-layoutB .standard-section__txt-body-info {
      background: #FBFBFB; }

.logo-bnr {
  padding: 6rem 0;
  text-align: center; }
  .logo-bnr h2 {
    margin: 0 0 2rem; }
  @media (max-width: 640px) {
    .logo-bnr {
      padding: 2rem 0; } }
  .logo-bnr a {
    background: #fff;
    border: solid 1px #ccc;
    display: block;
    border-radius: .5rem;
    padding: 2rem; }
    .logo-bnr a img {
      width: 70%;
      max-width: 300px; }

.standard-section.top {
  padding: 3rem 0 6rem; }
  @media (max-width: 640px) {
    .standard-section.top {
      padding: 1rem 0 3rem; } }

@media (max-width: 640px) {
  #ttl_en_transportation {
    height: 12vw;
    max-height: 80px; } }