@charset "UTF-8";

/* 全体で常に使用するスタイル(*) */
:root {
animation-duration: 1s;
animation-delay: 1s;
}
* {
margin: 0;
padding: 0;
max-width: 100%;
}
body{
background-color: #F0F0F0;
}
body *{
box-sizing: border-box;
}
body::after{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
z-index: -100;
background: linear-gradient(#ffffff, #ffffff);
opacity: 0.4;
}

/* デフォルトでは非表示（PC用） */
br.sp {
display: none;
}
img.sp {
display: none;
}



.inline{
display: inline-block;
}
.inner{
max-width: 100%;
margin: 0 auto 0;
}
.mb_1em {
margin-bottom: 1em;
}
.mb_2em {
margin-bottom: 2em;
}
.mb_3em {
margin-bottom: 3em;
}
header{
position: fixed;
content: '';
top: 0;
left: 0;
width: 100%;
z-index: 10000;
background-color: #F0F0F0;
border-bottom: 0.1px solid #a1a1a1;
box-shadow: 0 0 5px 0 rgba(211, 197, 197, 0.5);
}
/*  ヘッダーのスタイル（header-inner） */
/* 共通 */
.header_container {
display: flex;
align-items: center;
max-width: 1200px;
padding: 0 30px 0;
margin: 0 auto 0;
}


.header-inner a{
text-decoration: none;
color: #000000;
}

.arrow-label {
  position: relative;
  display: inline-block;
  padding: 40px 30px;
  background: #3498db;
  color: white;
  font-weight: bold;
  font-size: 40px;
  border: 10px solid white; /* 外枠1 */
  box-shadow:
    0 0 0 8px #f39c12,     /* 外枠2（オレンジ） */
    0 0 0 12px white;       /* 外枠3（白） */
  clip-path: polygon(
    0% 0%, 85% 0%, 97% 50%, 85% 100%, 0% 100%
  ); /* 矢印形状 */
}

.arrow-label .text {
  position: relative;
  z-index: 1;
}

/* サブメニューのスタイル（nav） */
/* 共通 */
.header_nav{
width: 600px;
text-align: center;
padding: 0 25px 0;
}
.header_list{
display: flex;
justify-content: center;
position: relative;
}
.header_item{
position: relative;
list-style: none;
display: inline-block;
width: 24%;
padding: 5px 10px 0;
transition: background-color .3s;
}
.header_item:hover{
background-color: #f5edd1;
cursor: pointer;
}
/* ホバーで表示 */
.header_item:hover .megaMenu{
display: block;
}
.header_item a {
text-decoration: none;
color: #000;
font-size: 18px;
font-weight: bold;
font-family: Austin News,georgia,times,serif;
display: block;
}
.header_item a .ja {
display: none;
}
.header_item a .en {
font-family: Austin News,georgia,times,serif;
}
.header_item a:hover .en {
display: none;
}
.header_item a:hover .ja {
display: inline;
}
.header_nav ul li ul li{
background-color: #F0F0F0;
height: 40px;
transition: all .5s;
position: relative;
width: 100%;
list-style: none;
}

.opacity{
opacity: 0.4;
}
.fadeInDown {
animation-name: fadeInDown;
animation-duration: 3s;
animation-fill-mode: forwards;
} 
@keyframes fadeInDown{
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: translate(0);
}
} 
.updown {
transform: translateY(-50px);
} 
.fadeLeftSlide {
animation-name: fadeLeftSlide;
animation-duration: 3s;
animation-fill-mode: forwards;
} 
@keyframes fadeLeftSlide{
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: translate(0);
}
} 
.fadeLeftSlide {
transform: translateX(-50px);
} 
.fadeRightSlide {
animation-name: fadeRightSlide;
animation-duration: 3s;
animation-fill-mode: forwards;
} 
@keyframes fadeRightSlide{
0% {
opacity: 0;
}
100% {
opacity: 1;
transform: translate(0);
}
} 
.fadeRightSlide {
transform: translateX(50px); ;
} 
.city_item_info ul{
list-style: none;
margin-left: 1em;
box-sizing: border-box;
margin-bottom: 3em;
}
.city_box_image{
margin: 10px 20px 20px 10px;
} 
.city_box_image img{
object-fit: cover;
} 
.city_item_info .image_caption h4,h5{
font-size: 50px;
font-weight: bold;
letter-spacing: 2px;
}
.image_caption span:nth-child(1){
font-size: 50px;
margin-right: 0.5em;
}
.image_caption a{
text-decoration: none;
}
.image_caption a h5 .en {
display: inline;
text-decoration: none;
color: #000000;
}
.image_caption a h5 .ja {
display: none;
}
.image_caption a h5:hover .en {
display: none;
text-decoration: none;
}
.image_caption a h5:hover .ja {
display: inline;
text-decoration: none;
color: #000000;
}
#back_top a{
padding: 7px;
color:#C8102E;
transition: 1s;
}
#back_top a:hover{
opacity: 0.75;
}
#back_top .fa-solid{
font-size: 35px;
}
.fa-chevron-up::before{
content: \f077;
}
/* マーカーの色（色相環の回転、青色を頂点として何度回転したかを示す） */
/* 共通 */
.icon-red{
filter: hue-rotate(150deg);
}
.icon-green{
filter: hue-rotate(250deg);
}
.icon-orange{
filter: hue-rotate(100deg);
}

/* 画像をクリックしたときのポップアップ表示 */
/* 共通 */
.flex_images{
float: left;
position: relative;
}

.flex_images >a {
text-decoration: none;
}

.flex_images figcaption img{
position: relative;
}
figcaption >.theme{
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: flex-end;
background-image: -webkit-linear-gradient(bottom rgba(0, 0, 0, 0.8) 0%, transparent 100%);
background-image: -webkit-linear-gradient(90deg, #14b9d5 2%, rgba(239, 208, 60, 0) 40%);
}
figcaption >.theme >p{
color: #fff !important;
display: block !important;
float: left;
text-align: left;
font-weight: 400;
text-shadow: none !important;
font-size: 25px;
font-family: Austin News, georgia, times, serif;
}
figcaption >.euk_th{
display: inline-block;
padding: 5px 10px;
color: #fff !important;
position: absolute;
top: 38%;
bottom: 0;
left: 0;
right: 0;
text-align: center;
z-index: 1;
border-radius: 2px;
}
.flex_images p{
font-family: "Austin News", georgia, times, serif;
font-size: 1em;
}

.caption h4 .en,
.caption h4 .ja {
  display: inline-block;
  width: 100px; /* 英語・日本語どちらでも収まる幅 */
  text-align: left; /* 左寄せ */
}

.flex_images h4 .ja{
display: none;
}
.flex_images h4:hover .en{
display: none;
text-decoration: none;
}
.flex_images h4:hover .ja{
display: inline;
text-decoration: none;
}

.uk_item_info_1 {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
margin-bottom: 2em;
}
.uk_item_info_2 {
display: flex;
flex-flow: row-reverse wrap;
justify-content: space-between;
align-items: center;
}
.Top_image .swiper-slide img{
width: 100%;
height: auto;
position: relative;
overflow: hidden;
display: block;
margin-top: 50px;
}
/* フッター（footer) */
/* 共通 */
footer{
font-family: Austin News, georgia, times, serif;
width: 100%;
}

footer .footer_upper{
padding: 30px 0 30px;
background-color: #000;
}
footer .footer_upper > div{
max-width: 1000px;
margin: 0 auto 0;
color: #fff;
width: 90%;
}
footer .footer_upper .footer_menu{
width: 250px;
color: #fff;
}
footer .footer_upper .footer_menu h3 {
margin-bottom: 20px;
font-size: 1.35em;
color: #fff;
}

footer .footer_upper .footer_menu h3 a {
margin-bottom: 20px;
font-size: 18px;
color: #fff;
text-decoration: none;
}
.accordion_body ul{
line-height: 1.7;
margin-bottom: 25px;
}
.accordion_body ul li{
list-style: none;
}
.accordion_body ul li a{
color: #fff;
text-decoration: none;
font-size: 18px;
font-weight: normal;
}
.footer_flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
}
footer .footer_copy{
background-color: #534242;
}
.footer_copy{
padding: 33px 0;
}
footer .footer_logo h2{
margin-bottom: 35px;
font-size: 1.5em;
}
.genre_flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
align-content: space-between;
padding: 10px;
}
.country_tag_info{
display: flex;
flex-flow: row wrap;
gap: 20px;
}
.country_items > .tag_title{
font-size: 1.2em;
margin-bottom: 10px;
font-weight: bold;
}

/* スマホだけ表示（例：幅768px以下） */
@media (max-width: 768px) {
br.pc {
display: none;
}
br.sp {
display: block;
}
img.pc{
display: none;
}
img.sp {
display: block;
}
}

/* パソコンPC専用 */
@media screen and (min-width: 768px) {
.info_left_item {
width: 45%;
position: relative;
margin-bottom: 1em;
}
.info_right_item {
width: 52%;
}
}

/* スマホSP専用 768px以下 */
@media screen and (max-width: 768px) {
nav.globalMenuSp {
position: fixed;
z-index : 1999998;
top: 106px;
right: 0;
height: 100vh;
width: min(85vw, 1100px);
max-width: 400px;
color: #fff;
background:#F0F0F0;
transform: translateX(100%);
transition: all 0.6s;
overflow: visible;
font-family: Austin News, georgia, times, serif;
line-height: 1.6;
}
.flex {
gap: 10px;
display: grid;
grid-template-columns: repeat(1, 4fr);
padding: 10px;
}
.header-inner {
padding: 10px;
display: flex;
justify-content: center;
}
.Top_image .title{
position: absolute;
bottom: 40%;
left: 0;
z-index: 9999;
padding: 30px 20px;
}
.city_item_info .image_caption {
width: 90%;
position: relative;
margin: 0 auto 2em;
overflow: hidden;
}
.flex_images_category{
position: relative;
max-width: 100%;
margin: 0 auto 30px;
}
.info_left_item {
width: 90%;
margin: 0 auto 25px;
position: relative;
}
.info_right_item {
width: 90%;
margin: 0 auto 0;
}
#back_top{
display: none;
}
}
/* スマホ専用（768px） */
@media screen and (max-width: 768px) {
.hamburger {
display : block;
position: fixed;
right : 25px;
width : 50px;
height: 40px;
cursor: pointer;
text-align: center;
}
.pagebody .container{
max-width: 100%;
margin: 0 auto;
padding: 0 30px 0;
}
.country_left_item {
width: 95%;
margin: 0 auto 3em;
position: relative;
}
.country_right_item {
width: 70%;
margin: 0 auto 3em;
position: relative;
}
}


/* PCだけ表示（例：幅768px以上） */
@media (min-width: 768px) {
br.sp {
display: none;
}
br.pc {
display: block;
}
img.pc{
display: block;
}
img.sp {
display: none;
}
}


/* パソコンPC専用 */
@media screen and (min-width: 1101px) {
.flex_images h4{
font-family: "Austin News", georgia, times, serif;
font-size: 23px;
color: black;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.pagebody {
width: 100%;
margin: 0 auto;
text-align: left;
}
.pagebody .container{
max-width: 80%;
padding: 0 30px 0;
margin: 0 auto;
}
.editorcss h2::before{
content: '';
height: 100%;
width: 6px;
}
.hamburger{
display: none;
position: relative;
}
.globalMenuSp{
display: none;
}
.Read_area{
max-width: 90%;
margin: 0 auto 3em;
padding-top: 1em;
}
.Read{
font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
font-size: 25px;
text-align: center;
}
.text_side{
margin: 0 auto 2em;
}
.country_items{
background: linear-gradient(to right, #c2e9fb, #a1c4fd);
color: #1c1c1c;
padding: 20px;
font-family: 'Georgia', serif;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 47%;
margin-bottom: 1em;
}
.Top_image .swiper-slide img{
width: 100%;
height: auto;
position: relative;
overflow: hidden;
display: block;
margin-top: 50px;
}
.tops{
width: 33.3%;
}
.city_item_info{
max-width: 100%;
display: flex;
flex-wrap: wrap;
margin: 0 auto 3em;
}
.city_item_info .image_caption{
width: 33.3%;
position: relative;
margin-bottom: 2em;
overflow: hidden;
}
.image_caption:hover .mouse{
display: inline;
}
.flex_images{
float: left;
position: relative;
margin-bottom: 30px;
}
.flex_images_category{
float: left;
position: relative;
width: 32%;
margin-bottom: 30px;
}
#back_top{
position: fixed;
right: 7%;
bottom: 13%;
display: block;
}

.country_left_item{
width: 40%;
position: relative;
margin-bottom: 1em;
}
.country_right_item{
width: 55.5%;
position: relative;
margin-bottom: 1em;
}
.copy_light{
font-size: 0.9em;
text-align: center;
}
.megaMenu{
display: none;
position: absolute;
top: 100%;
left: 0;
padding: 30px 0 10px 0;
background-color: rgb(240, 240, 240);
margin: 0 0 0 -30px;
z-index: 10000;
min-width: 200px;
}

.megaMenu a{
white-space: nowrap;
display: block;
text-decoration: none;
overflow: hidden;
color:#000;
font-size: 20px;
font-weight: bold;
font-family: Austin News,georgia,times,serif;
}

.megaMenu_list{
transition: all .3s;
}

.megaMenu_item{
position: relative;
display: block;
}

@keyframes fadeIn{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
}

/* スマホSP専用（1）1099px以下 */
@media screen and (max-width: 1100px) {
.flex_images{
float: left;
position: relative;
margin-bottom: 30px;
}
.flex_images h4{
font-family: "Austin News", georgia, times, serif;
font-size: 21px;
color: black;
margin-bottom: 0.5em;
}
.country_items{
background: linear-gradient(to right, #c2e9fb, #a1c4fd);
color: #1c1c1c;
padding: 20px;
font-family: 'Georgia', serif;
border-radius: 12px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
width: 250px;
margin-bottom: 1em;
}
.header_container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 100%;
}
.pagebody {
z-index: 50;
}
body .container  {
padding: 0 15px;
}
.pagebody .container{
max-width: 100%;
margin: 0 auto;
padding: 0 20px 0;
}
.container {
width: 100%;
margin: 0;
}

.tops{
width: 33.3%;
}
.header_nav{
display: none;
}
.hamburger span {
display : block;
position: absolute;
width   : 50px;
height  : 2px;
background : #0a0a0a;
-webkit-transition: 0.3s ease-in-out;
-moz-transition   : 0.3s ease-in-out;
transition        : 0.3s ease-in-out;
}
.hamburger span:nth-child(1) {
top: 0px;
}
.hamburger span:nth-child(2) {
top: 20px;
}
.hamburger span:nth-child(3) {
top: 40px;
}
/* スマホメニューを開いてる時のボタン */
.hamburger.active span:nth-child(1) {
top : 16px;
left: 0px;
-webkit-transform: rotate(-45deg);
-moz-transform   : rotate(-45deg);
transform        : rotate(-45deg);
}

.hamburger.active span:nth-child(2),
.hamburger.active span:nth-child(3) {
top: 16px;
-webkit-transform: rotate(45deg);
-moz-transform   : rotate(45deg);
transform        : rotate(45deg);
}


/* メニュー背景　*/


/* クリックでjQueryで追加・削除 */
nav.globalMenuSp.active {
transform: translateX(0%);
}


nav.globalMenuSp .megaMenu_list {
  list-style: none;
  margin: 0;
  padding: 1.5rem;
}

nav.globalMenuSp .megaMenu_item {
  position: relative;          /* ← サブメニューの座標基準 */
}



nav.globalMenuSp .megaMenu_item > a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    font-size: clamp(30px, 5vw, 30px);
    font-weight: 700;
    color: #000;
    text-decoration: none;
  }

  
/* 左へフライアウトするサブメニュー */

/* サブメニューを親の下に展開 */
nav.globalMenuSp .megaMenu_item > .megaMenu {
  position: static;           /* ← absoluteをやめる */
  width: 100%;                /* 親と同じ幅 */
  margin: 0;
  padding: 10px 0;
  list-style: none;
  display: none;              /* 初期は非表示 */
  box-sizing: border-box;
  cursor: pointer;
}
  
/* 画面全体のオーバーレイ（任意） */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    z-index: 900;
    display: none;
  }
  .menu-overlay.show { 
    display: block; 
  }



nav.globalMenuSp a {
  font-size: clamp(18px, 4.5vw, 22px); /* 大きめ文字 */
  font-weight: 600; /* 太字で視認性UP */
  padding: 14px 16px; /* タップ領域を広げる */
  display: block;
}


nav.globalMenuSp .megaMenu_item > .megaMenu >li >a {
  font-size: clamp(18px, 4vw, 24px);
  text-decoration: none;
  color: #000;
  line-height: 2;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(100, 100, 100, 0.0);
}


.megaMenu_item:last-child {
padding-bottom: 0;
}
.megaMenu_item:hover{
background :#ddd;
}

.common_main h2::before{
content: '';
height: 100%;
width: 6px;
}

.city_item_info .image_caption h4,h5{
font-size: 50px;
font-weight: bold;
letter-spacing: 2px;
}
#back_top{
position: fixed;
right: 7px;
bottom: 100px;
display: block;
}
.copy_light{
font-size: 18px;
text-align: center;
}
}

/* パソコンPC専用 */
@media screen and (min-width: 768px) {
.header-inner {
width: 500px;
padding: 30px 15px 30px 0;
display: flex;
justify-content: center;
}
.Top_image .title{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
max-width: 80%;
z-index: 9999;
}
}

/* スマホ一部 */
@media (min-width: 768px) and (max-width: 1100px) {
nav.globalMenuSp {
position: fixed;
z-index : 1999998;
top: 88.6px;
right: 0;
height: 100vh;
width: min(85vw, 1100px);
max-width: 400px;
color: #fff;
background:#F0F0F0;
transform: translateX(100%);
transition: all 0.6s;
overflow: visible;
font-family: Austin News, georgia, times, serif;
line-height: 1.6;
}
.hamburger {
display : block;
position: fixed;
right : 40px;
width : 50px;
height: 40px;
cursor: pointer;
text-align: center;
}
.city_item_info{
width: 90%;
margin: 0 auto 3em;
display: flex;
flex-wrap: wrap;
}
.city_item_info .image_caption{
width: 50%;
position: relative;
margin-bottom: 2em;
overflow: hidden;
}
.editorcss h5 {
font-size: 1.2em;
}
.country_left_item {
width: 95%;
margin: 0 auto 3em;
position: relative;
}
.country_right_item {
width: 70%;
margin: 0 auto 3em;
position: relative;
}
.flex_images_category{
position: relative;
max-width: 80%;
margin: 0 auto 30px;
}
}
/* スマホ一部 */
@media (min-width: 768px) and (max-width: 1250px) {
.flex {
gap: 30px;
display: grid;
grid-template-columns: repeat(2, 4fr);
padding: 20px;
}
}
/* パソコンPC専用 */
@media screen and (min-width: 1250px) {
.flex {
gap: 30px;
display: grid;
grid-template-columns: repeat(3, 4fr);
padding: 20px;
margin: 0 auto 0;
}
}