/* --- 基本設定 --- */
*{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	letter-spacing:0.03em;
}
[id] {
  scroll-margin-top: 150px;
}
body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, sans-serif;
    color: #333;
    line-height: 1.6;
    background-color: #fff;
}

img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
}

a {
    text-decoration: none;
    cursor: pointer;
}

/* --- ヘッダー (Header) --- */
header {
    background: #121112;
    padding: 20px 30px 40px;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:10000;
	transition: all 0.3s ease 0s;
}
header.scroll {
    padding: 20px 30px 22px;
}
header .description {
    text-align: left;
    font-size: 14px;
    color:#fff;
    margin-bottom: 20px;
	transition: all 0.3s ease 0s;
}
header.scroll .description {
	display:none;
}
.glonavi {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    margin: 0 auto;
    padding: 10px 50px;
    background:#fff;
    border-radius:90px;
}
.glonavi .sp{
	display:none;
}
.sp_glonavi{
	display:none;
	z-index:999;
}
.scroll .glonavi{
	padding:20px 50px;
}
.glonavi h1 img {
    height: 70px;
	transition: all 0.3s ease 0s;
}
.scroll .glonavi h1 img {
    height: 40px;
}

.glonavi ul {
    list-style: none;
    display: flex;
    align-items:center;
    gap: 30px;
    margin: 0;
    padding: 0;
}

.glonavi ul li a {
    font-weight: bold;
    color: #333;
    font-size: 22px;
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220.7%22%20height%3D%2215.9%22%20version%3D%221.1%22%20viewBox%3D%220%200%2020.7%2015.9%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%231e2a72%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M10.2%2C15.2h0c-.5%2C0-.9-.2-1.2-.6L.9%2C3c-.5-.7-.3-1.6.4-2.1.7-.5%2C1.6-.3%2C2.1.4l6.9%2C9.9L17.4%2C1.3c.5-.7%2C1.4-.8%2C2.1-.3.7.5.8%2C1.4.3%2C2.1l-8.4%2C11.6c-.3.4-.7.6-1.2.6Z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat:no-repeat;
    background-position:right center;
    display:inline-block;
    padding-right:35px;
}
.scroll .glonavi ul li a {
    font-size: 15px;
}
/* Official Website Button */
.glonavi ul li:last-child a {
    background-color: #1a3a71;
    color: #fff;
    padding: 10px 80px 10px 20px;
    border-radius: 28px;
    display:inline-block;
    background-size:auto calc(100% - 20px);
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20version%3D%221.1%22%20viewBox%3D%220%200%2042%2042%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20.st1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%231e2a72%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202.9px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2219.3%22%2F%3E%20%3Cg%3E%20%3Cpolyline%20class%3D%22st1%22%20points%3D%2221.4%2026.8%2029.6%2021.1%2021.4%2015.2%22%2F%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2227.2%22%20y1%3D%2221%22%20x2%3D%2212.4%22%20y2%3D%2221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    background-position:right 20px center;
}

/* --- メインコンテンツ (Wrapper) --- */
.wrapper {
    width: 100%;
    padding-top:220px;
}

.headline {
    text-align: left;
    font-weight: bold;
    font-size: 30px;
    padding: 20px 30px 0;
    background-color: #fff;
    max-width:1320px;
    margin:0 auto;
}

/* 共通セクションレイアウト (Flex-data) */
.flex-data {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    margin: 80px auto 80px;
    padding: 0px;

}

.flex-data.reverse {
    flex-direction: row-reverse;
}

.flex-data figure {
    flex: 1;
    margin: 0;
    min-height: 300px;
}
.flex-data figure.one {
	background-size:cover;
	background-image:url(./images/eng/en_1_img.jpg);
	background-position:left center;
}
.flex-data figure.two {
	background-size:cover;
	background-image:url(./images/eng/en_4_img.jpg);
	background-position:right center;
}
.flex-data figure.three {
	background-size:cover;
	background-image:url(./images/eng/en_6_img.jpg);
	background-position:center center;
}
.flex-data .text-box {
    flex: 1;
    padding:0 50px;
}

.area_title {
    font-size: 42px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3;
}

.basic_text {
    font-size: 22px;
    margin-bottom: 20px;
    text-align: justify;
    line-height:2;
    letter-spacing:0.06em;
}

.btn_area {
    display: flex;
    align-items: flex-end;
    justify-content:space-between;
    gap: 60px;
}

/* --- エリア2: 写真ギャラリーセクション --- */
.area_2 {
    background-color: #121112;
    color: #fff;
    padding: 60px 0px;
    text-align: center;
}

.area_2 .catch {
    font-size: 42px;
    font-weight: bold;
    color:#fff;
    text-align:left;
    letter-spacing:0.1em;
    max-width:1320px;
    margin:0 auto 40px;
    padding:0 30px;
}

.flex_img {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0px;
    max-width: 100%;
    margin: 0 auto 50px;
}

.flex_img figure {
    margin: 0;
}

.area_2 .basic_text {
    max-width:1320px;
    margin: 0 auto 50px;
    font-size: 18px;
    line-height:2;
    letter-spacing:0.06em;
    color:#fff;
    padding:0 30px;
}

.text-center {
    text-align: center;
    padding:0 30px;
}

/* お土産セクション下のギャラリー (5列) */
.reverse + .flex_img {
    grid-template-columns: repeat(5, 1fr);
    padding: 20px 0;
    background-color: #fff;
}

/* --- アクセス (Access) --- */
.access {
    background-color: #eeece0;
    padding: 60px 20px;
    text-align: center;
}

.access .inner p {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 60px;
}

.map {
    max-width: 900px;
    margin: 0 auto;
    height: auto;
}
.text-right{
	text-align:right;
}
/* --- 公共交通機関 (Transportation) --- */
.transportation {
    background-color: #eeece0;
    color: #fff;
    padding: 0px 0px 100px;
    text-align: center;
}

.transportation p {
    font-size: 40px;
    margin-bottom: 60px;
    background:#231815;
    padding:50px;
    text-align:center;
    color:#fff;
}

.transportation .inner {
    max-width: 1000px;
    margin: 0 auto;
    padding:0 30px;
}

/* --- ページトップボタン --- */
.page_top_link {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 50px;
    height: 50px;
    z-index: 100;
}

/* 1. スライダー全体の設定 */
.main .swiper {
  width: 100%;
  padding: 50px 0;
  /* ★重要：これがないと左右のスライドが消えて（隠れて）しまいます */
  overflow: hidden; 
}
.main .swiper-wrapper{
	height:auto;
}
/* 2. スライド1枚の横幅（ここでチラ見せ具合を調整） */
.main .swiper-slide {
  width: 70%; /* ★画面に対して70%の幅にする（残り30%が左右のチラ見せ分） */
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  transition: transform 0.3s, opacity 0.3s;
  
  /* 中央にいない時は少し小さく、薄くする（写真のような立体感） */
  transform: scale(0.9);
  opacity: 0.6;
}

/* 3. 中央のスライドだけ100%の大きさと濃さにする */
.main .swiper-slide-active {
  transform: scale(1);
  opacity: 1;
}

/* 画像の見た目調整 */
.main .swiper-slide img {
  width: 100%;
  height: auto;
  object-fit: cover;
  display: block;
}
.main .swiper-button-next svg,
.main .swiper-button-prev svg{
	display:none;
}
.main .swiper-button-next{
    background-size:auto calc(100%);
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20data-name%3D%22%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20version%3D%221.1%22%20viewBox%3D%220%200%2042%2042%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20.st1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%231e2a72%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202.9px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2221%22%20cy%3D%2221%22%20r%3D%2219.3%22%2F%3E%20%3Cg%3E%20%3Cpolyline%20class%3D%22st1%22%20points%3D%2221.4%2026.8%2029.6%2021.1%2021.4%2015.2%22%2F%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2227.2%22%20y1%3D%2221%22%20x2%3D%2212.4%22%20y2%3D%2221%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    right:30px !important;
    width:30px;
    height:30px;
}
.main .swiper-button-prev{
    background-size:auto calc(100%);
    background-image: url('data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2242%22%20height%3D%2242%22%20version%3D%221.1%22%20viewBox%3D%220%200%2042%2042%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23fff%3B%20%7D%20.st1%20%7B%20fill%3A%20none%3B%20stroke%3A%20%231e2a72%3B%20stroke-linecap%3A%20round%3B%20stroke-linejoin%3A%20round%3B%20stroke-width%3A%202.9px%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Ccircle%20class%3D%22st0%22%20cx%3D%2220.9%22%20cy%3D%2221.1%22%20r%3D%2219.3%22%2F%3E%20%3Cg%3E%20%3Cpolyline%20class%3D%22st1%22%20points%3D%2220.5%2015.3%2012.3%2021%2020.5%2026.9%22%2F%3E%20%3Cline%20class%3D%22st1%22%20x1%3D%2214.7%22%20y1%3D%2221.1%22%20x2%3D%2229.5%22%20y2%3D%2221.1%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E');
    left:30px !important;
    width:30px;
    height:30px;
}
footer .footer_top{
	background:#ffe880;
}
footer .footer_top .inner{
	padding:100px 30px 70px;
	width:1420px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-wrap:wrap;
}
footer .footer_top .inner a{
	text-align:center;
	margin-bottom:30px;
	width:calc((100% - 80px) / 4);
}
footer .footer_top .inner a img{
	max-width:100%;
	width:259px;
}
footer .footer_bottom{
	background:#231815;
	padding:70px 30px 70px;
}
footer .footer_bottom h2{
	margin-bottom:30px;
}
footer .footer_bottom h2 img{
	width:260px;
	height:auto;
}
footer .footer_bottom .address{
	text-align:center;
	font-weight:bold;
	font-size:12px;
	color:#fff;
	line-height:2.5;
	letter-spacing:0.2em;
	margin-bottom:20px;
}
footer .footer_bottom .red_under{
	font-size:12px;
	letter-spacing:0.2em;
	margin-bottom:30px;
	color:#e93e32;
	text-align:center;
	display:inline-block;
}
footer .footer_bottom .copy{
	text-align:center;
	font-size:10px;
	color:#ffe880;
	letter-spacing:0.2em;
}
footer .footer_bottom .yellow_arrow{
	width:230px;
	margin:0 auto 30px;
}
footer .foot_info{
	display:flex;
	align-items:center;
	justify-content:center;
	height:325px;
	margin-bottom:100px;
	background-image:url(./images/common/footer_bg.jpg);
	background-repeat:no-repeat;
	background-size:auto 325px;
	background-position:center center;
}
footer .foot_info > div{
	text-align:center;
}
footer .foot_info .flex{
	justify-content:center;
}
footer .foot_info .flex a{
	display:inline-block;
	padding:0 15px;
}
footer .foot_info .flex a *{
	color:#fff;
	font-size:30px;
}
.map iframe {
    width: 100%;
    height: 470px;
    margin-bottom: 20px;
}
.map a.map_text {
    text-decoration: underline;
    color: #e93e32;
    font-size: 16px;
    letter-spacing: .04em;
}
@media (max-width: 1400px) {
.glonavi ul li a {
    font-size: 15px;
}
}
@media (max-width: 1300px) {
.flex-data figure.one ,
.flex-data figure.two ,
.flex-data figure.three {
	background-size:contain;
	background-repeat:no-repeat;
	background-position:left top;
}
.area_title{
	font-size:25px;
}
.basic_text{
	font-size:16px;
}
.btn_area > img{
	width:80px;
}
.headline{
    font-size: 25px;
}
.area_2 .catch {
	font-size:30px;
    text-align:center;
}
.access .inner p,
.transportation p{
	font-size:30px;
}
}
@media (max-width: 1150px) {
.glonavi ul li:last-child a{
	padding:10px 55px 10px 20px;
}
.glonavi ul{
	display:none;
}
.glonavi .sp{
	display:block;
	font-size:30px;
}
.sp_glonavi{
	display:flex;
	align-items:center;
	justify-content:center;
	width:100%;
	height:100%;
	position:fixed;
	top:-100%;
	left:0;
	transition: all 0.3s ease 0s;
	background:#fff;
}
.sp_glonavi a{
	font-size:25px;
	margin-bottom:20px;
}
.sp_glonavi.on{
	top:0%;
}
}
/* --- レスポンシブ (Mobile) --- */
@media (max-width: 850px) {
    .flex-data, .flex-data.reverse {
        flex-direction: column;
    }

    .flex_img {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .reverse + .flex_img {
        grid-template-columns: repeat(2, 1fr);
    }
.flex-data{
	flex-wrap:wrap;
}
.flex-data .text-box{
	padding:50px 50px 0px;
	order:2;
}
.reverse + .flex_img img{
	width:100%;
}
.flex-data figure.one, .flex-data figure.two, .flex-data figure.three{
	order:1;
	width:100%;
	aspect-ratio: 900 / 624;
}
.btn_area a img{
	height:80px;
}
.sp_glonavi li{
	margin-bottom:20px;
}
}
@media (max-width: 450px) {
header{
	padding:10px 15px 15px;
}
header.scroll{
	padding:10px 15px 15px;
}
header .description{
	font-size:10px;
}
.main .swiper-slide{
	width:100%;
	border-radius:0;
}
.scroll .glonavi,
.glonavi{
	padding:10px 20px 10px 14px;
}
.scroll .glonavi h1 img{
	height:50px;
}
.glonavi h1 img{
	height:50px;
}
.wrapper {
    padding-top:163px;
}
.area_title,
.headline{
	font-size:18px;
}
.flex-data{
	margin:50px auto;
}
.basic_text{
	font-size:14px;
	text-align:left;
}
.btn_area {
	gap:0;
	flex-wrap:wrap;
	justify-content:center;
}
.btn_area a{
	height:auto;
	display:block;
	width:100%;
}
.btn_area a img{
	width:100%;
}
.btn_area > img{
	margin-top:30px;
}
.area_2 .catch{
	font-size:20px;
}
.area_2 .basic_text{
	font-size:14px;
}
.access .inner p, .transportation p{
	font-size:25px;
}
.main .swiper{
	padding:0 0;
}
.main .swiper-button-next{
	display:none;
}
.main .swiper-button-prev{
	display:none;
}
.yellow_black figure:nth-child(1){
	order:1;
}
.yellow_black figure:nth-child(2){
	order:2;
}
.yellow_black figure:nth-child(3){
	order:4;
}
.yellow_black figure:nth-child(4){
	order:3;
}
.yellow_black figure:nth-child(5){
	order:5;
}
.yellow_black figure:nth-child(6){
	order:6;
}
.yellow_black figure:nth-child(7){
	order:8;
}
.yellow_black figure:nth-child(8){
	order:7;
}
.yellow_black figure:nth-child(9){
	order:9;
}
.yellow_black figure:nth-child(10){
	order:10;
}
}