@charset "utf-8";




/*webfont*/


@import url('https://fonts.googleapis.com/css2?family=Benne&family=Dela+Gothic+One&family=Homenaje&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Noto+Sans+JP:wght@100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Shippori+Mincho&family=Shippori+Mincho+B1&display=swap');

@import url('https://fonts.cdnfonts.com/css/qanoar');

@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&display=swap');

/* style
----------------------*/
.ls-disc{
	list-style: inside disc;
}

/*font
--------------------*/
.fw-400{
	font-weight: 400;
}
.fw-700{
	font-weight: 700;
}


.benne_28{
/* Title-E/H3 */
font-family: Benne;
font-size: 28px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 39.2px */
letter-spacing: 1.4px;
}

.noto_20{
	color: #FBFBFB;
	text-align: center;
	font-family: "Noto Sans JP";
	font-size: 20px;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 32px */
	letter-spacing: 1px;
}

.noto_28{
	font-family: "Noto Sans JP";
	font-size: 1.75rem;/*28px*/
	font-style: normal;
	font-weight: 700;
	line-height: 180%; /* 50.4px */
	letter-spacing: 2.7px;
}


.noto_18{
	color: var(--Text-, #414141);

	/* Text/ノーマル */
	font-family: "Noto Sans JP";
	font-size: 18px;
	font-style: normal;
	font-weight: 300;
	line-height: 180%; /* 32.4px */
	letter-spacing: 1.8px;
}

.noto_18_b{
	color: var(--Text-, #414141);

	/* Text/ノーマル */
	font-family: "Noto Sans JP";
	font-size: 18px;
	font-style: normal;
	font-weight: 700;
	line-height: 180%; /* 32.4px */
	letter-spacing: 1.8px;
}

.hirago_16,
.noto_16{
/* Text/Normal */
font-family: "Noto Sans JP";
font-size: 16px;
font-style: normal;
font-weight: 300;
line-height: 180%; /* 28.8px */
letter-spacing: 1.6px;
}
.noto_16_b{
/* Text/Normal */
font-family: "Noto Sans JP";
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 180%; /* 28.8px */
letter-spacing: 1.6px;
}

.hirago_14,
.noto_14{

/* Text/Sub */
font-family: "Noto Sans JP";
font-size: 14px;
font-style: normal;
font-weight: 300;
line-height: 180%; /* 25.2px */
letter-spacing: 0.7px;
}

.case_slider_btn_3 a:hover{
	color: #fff!important;
}

.hirago_12,
.noto_12{
font-family: "Noto Sans JP";
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: 140%; /* 16.8px */
letter-spacing: 0.6px;
}

.poppines_12{
font-family: "Poppins";
font-size: 12px;
font-style: normal;
font-weight: 300;
line-height: normal;
letter-spacing: 1.2px;
}

.poppines_20{
font-family: "Poppins";
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 140%; /* 28px */
}

.shippori_20{
	font-family: "Shippori Mincho B1";
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 32px */
	letter-spacing: 1px;
}

.shippori_14{
	font-family: "Shippori Mincho B1";
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 22.4px */
	letter-spacing: 0.7px;
}

.shippori__18{
	/* Text/ノーマル */
	font-family: "Shippori Mincho B1";
	font-size: 18px;
	font-style: normal;
	font-weight: 600;
	line-height: 180%; /* 32.4px */
	letter-spacing: 1.8px;
}

.beni_20{
	font-family: "Benne";
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 32px */
	letter-spacing: 1px;
}

.shippori_16{
	font-family: "Shippori Mincho B1";
	font-size: 16px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 25.6px */
	letter-spacing: 0.8px;
}
.shippori_28{
	font-family: "Shippori Mincho B1";
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 44.8px */
	letter-spacing: 0.1rem;
}

.shippori_36{
	/* Title/H2 */
	font-family: "Shippori Mincho B1";
	font-size: 36px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 57.6px */
	letter-spacing: 1.8px;
}

.shippori_16_b{
	font-family: "Shippori Mincho B1";
	font-size: 16px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 25.6px */
	letter-spacing: 0.8px;
}

.shippori_24{
font-family: "Shippori Mincho B1";
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}

.beni_24{
font-family: Benne;
font-size: 24px;
font-style: normal;
font-weight: 400;
line-height: normal;
}

.beni_40{

	font-family: Benne;
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 56px */
	letter-spacing: 2px;
}

.beni_16{
	font-family: Benne;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 35px; /* 218.75% */
	letter-spacing: 0.8px;
}
.inter_14{
	font-family: Inter;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%; /* 25.2px */
	letter-spacing: 1.4px;
}

.inter_16{
	text-align: center;
	font-family: Inter;
	font-size: 16px;
	font-style: normal;
	font-weight: 400;
	line-height: 140%; /* 22.4px */

}



.cardo_28{
	font-family: Cardo;
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 400;
	line-height: 160%; /* 44.8px */
	letter-spacing: 0.175rem;
}

.cardo_34{
	font-family: Cardo;
	font-size: 34px;
	font-style: normal;
	font-weight: 700;
	line-height: normal;
	letter-spacing: 3.4px;
}

.cardo_14{
	font-family: Cardo;
	font-size: 14px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1.4px;
}


.qanoar_20 {
	font-family: Qanoar;
	font-size: 1.25rem;
	font-style: normal;
	font-weight: 400;
	line-height: 200%;
	letter-spacing: 0.25rem;
}


.noto_10 {
	font-family: "Noto Sans JP";
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%; /* 18px */
	letter-spacing: 1px;
}

.inter_10 {
	font-family: Inter;
	font-size: 10px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%; /* 18px */
	letter-spacing: 1px;
}

.Qanoar_40 {
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: Qanoar;
	font-size: 40px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 2px;
}

.Qanoar_28 {
	color: #544B4B;
	font-family: Qanoar;
	font-size: 28px;
	font-style: normal;
	font-weight: 400;
	line-height: 240%; /* 67.2px */
	letter-spacing: 5.6px;
}

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}

li{list-style: none;}

h1,h2,h3,h4,h5,h6{font-size:100%;}

img,abbr,acronym,fieldset{border:0; width: 100%; height: auto;}

body{
	font-size: 16px;
	font-family: 'Noto Sans JP';
	overflow-x: hidden;
	color: #544B4B;
	background: #fff;
	
	font-style: normal;
	font-weight: 300;
	line-height: 180%; /* 28.8px */
	letter-spacing: 1.6px;
}

a{
	color: #414141;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: none;
	/*opacity: 0.5;*/
}

img:hover{
	/*opacity: 0.5;*/
}
a:hover{
	opacity: 0.5;
}

a:active, a:focus,input:active, input:focus{outline:0;}

*{
	box-sizing: border-box;
}


/*共通CSS
=======================*/
/* font-family
--------------------------*/
	.Qanoar_40 {
		text-align: center;
		leading-trim: both;
		text-edge: cap;
		font-family: Qanoar;
		font-size: 40px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: 2px;
	}


/* layout
--------------------------*/
.column_box{
	display: flex;
	flex-direction: column;
}
.row_box{
	display: flex;
	flex-direction: row;
}

div,section{
	display: flex;
	flex-direction: column;
}

section .container{
	padding: 0 11.3%;
}


.row-2{
	flex-direction: row;
	justify-content: center; 
}

.row-2 .left{
	/*width: 50%;*/
}


.sp{display: none;}


/*  btn
----------------------*/
/*詳しく見るボタン
----------------*/
.btn_circle-arrow::before{
	content: url("../img/svg-circle.svg")
}
.btn_circle-arrow::after{
	content: url("../img/svg-arrow.svg")
}
.btn_circle-arrow{
	font-family: Inter;
	display: flex;
	align-items: center;
	gap: 12px;
}
.btn_circle-arrow a{
	border-bottom: 1px solid #544B4B;
}


/*btn circle
----------------*/
.btn_circle::before{
	content: url("../img/svg-circle.svg");
}

.btn_circle{
	font-family: Inter;
	display: flex;
	align-items: center;
	gap: 12px;
}
.btn_circle a{
	border-bottom: 1px solid #544B4B;
}


/* btn_nomal
----------------*/
.btn_nomal_wrp{
	
}
.btn_nomal{
	border: 1px solid #544B4B;
	padding: 10px 20px;
	transition:all  0.5s ease-out;
	background: #fff;
}

.btn_nomal:hover{
	background: #544B4B;
	color: #fff;
}

/* 続きを読む
-----------------------*/
.accordion-content {
    display: none;
    transition: max-height 0.5s ease;
}

.accordion-toggle_wrp{
	display: flex;
  	justify-content: center;
}

button {
    /* Reset default styles */
    all: unset;
    appearance: none;
    border: none;
    background: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* Custom styles */
    color: var(--Text-, #414141); /* Fallback to #414141 if --Text- is not defined */
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 140%; /* 16.8px */
    letter-spacing: 0.6px;
    cursor: pointer; /* Optional: Adds pointer cursor on hover */
}

button:hover {
    /* Optional hover effect */
    opacity: 0.8; /* Adjust if you want a slight effect on hover */
}


/* pager
----------------------------*/
/* ページネーション */
/*pager
---------------------*/
.navigation.pagination {
}
.pagination{
	display: flex;
	height: 64px;
	padding: 1px 0px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	margin-top: 55px;
	flex-direction: row;
	gap: 20px;
	width: 100%;
}
.screen-reader-text{
	display: none;
}
.page-numbers {
  display: flex;
	justify-content: center;
	align-items: center;
	gap: 4px;
	align-self: stretch;
	color: #A7A3A3;
}

.page-numbers.current{
	color: #544B4B;
}

.page-numbers li{
	display: flex;
	width: 40px;
	padding: 10px 0px;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 8px;
	align-self: stretch;
}
.page-numbers li:hover{
}

.pagination-list {
	display: flex;
	flex-direction: row;
	width: 86.85%;
	height: 70px;
	justify-content: center;
	align-items: center;
	flex-shrink: 0;
	border-radius: 70px;
	background:#F9F9F9;
	gap: 20px;
}

.prev-link img,
.next-link img{
	width: 70px;
}




/*google map
---------------------------*/
iframe{
	filter: grayscale(1);
}


/* toggole
-------------------------*/
/* SVGアイコンのトグルアニメーション */
.toggle_item svg {
    transition: transform 0.3s ease;
}

.toggle_item svg.open {
    transform: rotate(180deg);
}

/* トグルコンテンツのスタイル */
.toggle_content,
.toggle_content_menu,
.toggle_content_concern {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
    position: relative;
}

.toggle_content::before,
.toggle_content_menu::before,
.toggle_content_concern::before {
    content: "";
    display: block;
    padding: 0 50px; /* 内側に横方向の余白 */
    transition: padding 0.5s ease;
}

.toggle_content.active,
.toggle_content_menu.active,
.toggle_content_concern.active {
    display: block;
    opacity: 1;
    max-height: 2000px; /* トグルの最大サイズに調整 */
    padding: 50px; /* ここで内側の余白を追加 */
}




/* 下層ページ　hero-section
--------------------------*/
#hero-section {
    width: 100%;
    background-size: cover; /* 背景画像をコンテナ全体に表示 */
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 垂直方向に中央揃え */
	padding: 14.26% 11.03% 2.57%;
	margin-bottom: 100px;
}
#hero-section h1 .en{
	font-family: Qanoar;
	font-size: 1.75rem;
	font-style: normal;
	font-weight: 400;
	line-height: 240%; /* 67.2px */
	letter-spacing: 0.35rem;
}

#hero-section h1 .jp{
	font-family: Shippori Mincho B1;
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 32px */
	letter-spacing: 1px;
}

.breadcrumb {
    display: inline-flex;
    list-style: none;
	font-family: Inter;
    padding: 0;
    margin: 0 0 0 0;
    color: rgba(255, 255, 255, 0.8);
	gap: 3px;
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 180%; /* 21.6px */
	letter-spacing: 1.2px;
	margin-top: 7px;
}

.breadcrumb li {
    color: rgba(255, 255, 255, 0.8);
}

.breadcrumb li + li::before {
	 content: '';
	  display: inline-block;
	  margin: 0 10px;
	  width: 24px;
	  border-bottom: 1px solid #fff;
	  top: -4px;
	  position: relative;
}

.breadcrumb li a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
}

.hero-title {
    text-align: center;
    color: white;
}

.hero-title h1 {
    display: flex;
    flex-direction: column; /* Flexboxで縦並び */
    align-items: flex-start;
    font-size: 48px;
    line-height: 1.2;
    font-weight: 300;
	gap: 10px;
}

.hero-title h1 span {
    display: block;
}





/*  header
-----------------------------------*/
/* Header Styling */
.header {
  background-color: white;
  /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 45px 0;
  /*max-width: 1200px;*/
  margin: 0 auto;
	flex-direction: row;
}

/* Logo Section */
.header-logo {
  	display: flex;
	flex-direction: row;
  	align-items: center;
}


.header-logo-img {
  width: 134px;
}

.header-logo-text {
  font-size: 24px;
  font-weight: bold;
  margin-left: 10px;
}

/* Navigation Menu */
.header-nav {
  display: flex;
  gap: 20px;
}

.header-nav a {
  text-decoration: none;
  color: #555;
  font-size: 16px;
  transition: color 0.3s;
}

.header-nav a:hover {
  color: #000;
}

/* Icons Section */
.header-icons {
  display: flex;
  gap: 15px;
}

.header-icons img {
  transition: transform 0.3s;
}

.header-icons img:hover {
  transform: scale(1.1);
}

/* Mobile Menu Button */
.header-mobile-menu {
  display: none; /* Hidden by default on larger screens */
}

.header-menu-btn {
  background: none;
  border: none;
  cursor: pointer;
}

.header-menu-icon {
  height: 24px;
  width: 24px;
}


/* Header Icons Styling */
.header-icons{
	display: flex;
	flex-direction: column;
}
.header-icons ul {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.header-icons li {
  display: inline-block;
}

.header-icons img {
  /*height: 24px;*/
  transition: transform 0.3s;
	width: 40px;
}

.header-icons img:hover {
  transform: scale(1.1);
}


/* スマホナビ
	----------------------------*/
	.nav-sp {
	  position: fixed;
	  top: 0;
	  right: -100%; 
	  width: 80%;
	  min-width: 250px;
	  height: 100vh;
	  background-color: white!important;
	  z-index: 1000;
	  overflow-y: auto;
	  padding: 20px;
	  box-sizing: border-box;
	  transition: right 0.5s ease-in-out, opacity 0.5s ease-in-out;
	  visibility: hidden; /* 初期状態では隠す */
	  opacity: 0; /* 初期状態では透明 */
	}

	.nav-sp.show {
	  right: 0;
	  visibility: visible; /* 表示時に可視化 */
	  opacity: 1; /* 表示時に透明度を戻す */
	}

	.header_sp .hamburger {
	  cursor: pointer;
	}

	.header_sp .btn_close {
	  cursor: pointer;
	}

	.header_sp img {
	  width: 120px;
	  height: auto;
	}

	.header-mobile-menu {
	  display: none; /* PC表示では隠す */
	}

	/*追加の記述*/
	
	/*nav-sp
	-----------------------*/

	.nav-sp {
		display: block;
	}
	.nav-sp .nav_container {
		/*width: 240px;*/
		box-sizing: content-box;
		padding: 42px 29px;
	}
	.nav-sp .nav_container .nav-sp_top {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	.nav_container .nav-sp_top h2 {
		color: var(--Text-, #414141);
		leading-trim: both;
		text-edge: cap;
		font-family: Benne;
		font-size: 32px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
	}
	.nav_container .nav-sp_top .btn_close {
	}

	.nav-sp .nav_container .menu{
		display: flex;
		flex-direction: column;
		/*align-items: flex-start;*/
		gap: 16px;
	}

	.nav-sp .nav_container .menu,
	.nav-sp .nav_container .other{
		color: var(--Text-, var(--Text-, #414141));
		/*font-family: "Hiragino Kaku Gothic Pro";*/
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: 180%; /* 25.2px */
		letter-spacing: 1.4px;
	}
	.nav_container .menu ul {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.nav_container .menu div {
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.nav-sp .nav_container .btn {
		display: flex;
		height: 70px;
		padding: 10px;
		justify-content: center;
		align-items: center;
		gap: 10px;
		align-self: stretch;

		border-radius: 4px;
		background: #3095A3;
		flex-direction: row;

		margin: 28px 0;
		}
	.nav_container .btn span:nth-child(1) {

	}
	.nav_container .btn span:nth-child(2) {
	}
	.nav-sp .nav_container .sns {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		align-self: stretch;

		border-top: 1px solid #C8C8C8;
		border-bottom: 1px solid #C8C8C8;
		padding: 28px 0;
		flex-direction: row;
	}
	.nav_container .sns .l {
	}
	.nav_container .sns .r {
		display: flex;
		width: 92px;
		flex-direction: column;
		align-items: flex-start;
		gap: 26px;
	}
	.nav-sp .nav_container .other {
		margin-top: 28px;
	}
	.nav_container .other ul {
		display: flex;
	width: 197px;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	}


	/*accordion*/
	.accordion {
	  /*margin: 2em 0;*/

		transition: all 0.5s 0s ease;
	}
	.accordion__summary {
	  display: block;
	  position: relative;
	  list-style: none; /* 矢印を消す */
	  cursor: pointer;
	  /*padding: 10px 38px 10px 10px;*/
	}
	.accordion__summary::-webkit-details-marker {
	  display: none;
	}
	.accordion__summary::after {
	  content: url("common/img/arrow_2.svg");
	  font-size: 1.4em; /* 記号のサイズ */
	  position: absolute;
	  right: 85px;
	  top: 40%;
	  transform: translateY(-50%);
	}
	.accordion[open] .accordion__summary::after {
	  content: url("common/img/arrow_1.svg");
	}
	.accordion__detail {
	  padding: 4px 10px;
	  margin: 10px 0;
	}
	.accordion__text {
	  margin: 0;
	}
	.accordion[open] {
	}
	

  /*
---------------------------------------*/
/* オーバーレイのスタイル */
/* オーバーレイのスタイル */

#blur-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backdrop-filter: blur(10px); /* ぼかしの強さ */
    pointer-events: none; /* オーバーレイがクリックをブロックしないように */
    z-index: 5; /* 背景よりは高く、コンテンツよりは低く */
    opacity: 0;
    transition: opacity 0.3s ease;
	background: rgba(255,255,255,0.5);
}

/* ナビゲーションメニューのスタイル */
.header-nav {
    position: relative;
    z-index: 1000; /* ナビゲーションをオーバーレイより前面に表示 */
}

.header-nav ul {
    list-style: none;
    display: flex;
	gap: 30px;
}

.header-nav ul li {
    /*position: relative;*/
}

.header-nav ul li a {
    display: block;
    color: #000;
    text-decoration: none;
	font-size: 14px;
}

.header-nav ul li:hover > a {
    background-color: #f0f0f0;
}

/* サブメニューのスタイル */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    background-color:#fff;
    border: 1px solid #ccc;
    z-index: 1001; /* サブメニューをナビゲーションより前面に表示 */
}

.submenu li a {
    padding: 10px 15px;
    color: #000;
}

.has-submenu:hover .submenu {
    display: block;
}

/* サブメニューの初期状態を非表示に設定 */
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* その他のスタイル */
}
/* サブメニューを初期状態で非表示 */
.sub-menu {
  visibility: hidden; /* 初期状態で非表示 */
  opacity: 0;
  position: absolute;
  background-color: white;
  padding: 10px;
  list-style-type: none;
  transition: visibility 0s, opacity 0.3s ease; /* opacityのアニメーション追加 */
}

/* サブメニュー表示時 */
.sub-menu.show {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease; /* アニメーションで表示 */
}

.submenu {
    display: none !important;
}
.has-submenu:hover .submenu {
  display: flex !important;
	flex-direction: column;
}





/*  footer
______________________________________*/

/*reseve
-----------------------------*/
/* Footer Reserve Buttons Styling */
.footer-reserve-buttons ul {
  display: flex;
  justify-content: center;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-reserve-buttons li {
  display: inline-block;
	background: #fff;
}

.footer-reserve-btn {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #000;
  color: #fff;
  padding: 15px 20px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.footer-reserve-btn img {
  width: 40px;
  height: 40px;
  margin-bottom: 10px;
}

.footer-reserve-btn span {
  font-size: 16px;
}

.footer-reserve-btn:hover {
  background-color: #333;
}



/* Footer Styling */
.footer {
  background-color: #383838;
  color: #fff;
  text-align: center;
}

/* Reserve Section */
.footer-reserve {
	background: url("../img/footer_reserve.webp")  50% / cover no-repeat;
	padding: 122px 0 100px;
	margin-top:150px;
	color: #463D3D;
	gap: 40px;
}

.footer-reserve-title {
	text-align: center;
	leading-trim: both;
	text-edge: cap;
	font-family: Cardo;
	font-size: 66px;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 3.3px;
}

.footer-reserve-description {
}

.footer-reserve-text {
}

.footer-reserve-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.footer-reserve-btn {
  background-color: #000;
  color: #fff;
  padding: 15px 20px;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-reserve-btn img {
  width: 50px;
  height: 50px;
}

/* Footer Links Section
---------------------------------*/
.footer-links {
  display: flex;
  justify-content: space-between;
	padding: 92px 7.7%;
	background: #535353;
	flex-direction: row;
}

.footer-links-column {
  text-align: left;
}
.footer-links-column:nth-child(2) {
  margin-top: 26px;
}

.footer-links-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.footer-links ul {
  list-style: none;
  padding: 0;
	display: flex;
	flex-direction: column;
	gap:16px;
}

.footer-links ul li {
 
}

/* Footer Menu */
.footer-menu {
  display: flex;
  gap: 15px;
  justify-content: center;
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.footer-menu li::after {
/*  content: "|";
  margin-left: 10px;
  color: #bbb;*/
}

.footer-menu li:last-child::after {
  content: ""; /* 最後の要素の後には | を表示しない */
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.footer-menu a:hover {
  text-decoration: underline;
}

/* Footer Info */
.footer-info {
  display: flex;
  gap: 10px;
  justify-content: center;
  list-style: none;
  padding: 0;
  font-size: 12px;
  margin-top: 10px;
}

.footer-info li::after {
  content: "|";
  margin-left: 10px;
  color: #bbb;
}

.footer-info li:last-child::after {
  content: ""; /* 最後の要素の後には | を表示しない */
}

.footer-info a {
  color: #fff;
  text-decoration: none;
}

.footer-info a:hover {
  text-decoration: none;
}

/* Footer Social */
.footer-social {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}

.footer-social img {
  width: 24px;
  height: 24px;
}

.footer-social span {
  margin-right: 10px;
}


.footer-logo img{
	width: 233px;
}



/* Footer Bottom Styling */
.footer-bottom {
  padding: 92px 6.47% 25px;
	position: relative;
}
.page-top {
  width: 32px;
  height: 122px;
	position: absolute;
	right: 6.47%;
	cursor:pointer;
}

/* Footer Top: Logo and Menu */
.footer-top {
  	display: flex;
  	justify-content: space-between;
  	align-items: center;
  	margin-bottom: 20px;
	margin-right: 109px;
	flex-direction: row;
}

.footer-logo img {
  
}

.footer-top-menu-wrp {
  flex-direction: row;
	gap: 25px;
}

.footer-links-column ul {
  width: 255px;
}


.footer-menu {
	display: flex;
	gap: 60px;
	list-style: none;
	padding: 0;
	margin: 0;
	flex-direction: row;
}

.footer-menu-list {
  flex-direction: column;
  display: flex;
	text-align: left;
}

.footer-menu li {
  display: inline-block;
}

.footer-menu a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}

.footer-menu a:hover {
  text-decoration: none;
}

/* Footer Bottom Content: Info and Social */
.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
	margin-bottom: 40px;
	border-top: 1px solid var(--Text-, #FFF);
	flex-direction: row;
}

.footer-info {
  display: flex;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 12px;
}

.footer-info li::after {
  content: "|";
  margin-left: 10px;
  color: #bbb;
}

.footer-info li:last-child::after {
  content: ""; /* 最後の要素の後には | を表示しない */
}

.footer-info a {
  color: #fff;
  text-decoration: none;
}

.footer-info a:hover {
  text-decoration: none;
}

/* Footer Social */
.footer-social {
  	display: flex;
  	align-items: center;
  	gap: 10px;
	flex-direction: row;
}

.footer-social img {
  width: 100%;
	height: 32px;
}

.footer-social span {
  margin-right: 10px;
}

.sns-list {
  display: flex;
  gap: 26px;
}

.copy{
	color: #D1C5C5;
	font-family: "Helvetica Neue";
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 22.75px; /* 189.583% */
	letter-spacing: 1px;
	text-align: left;
}








































@media (max-width: 1300px) {
		/* スマホナビ
	----------------------------*/
	  .header-mobile-menu {
		display: block; /* SP表示で表示 */
	  }

	  .header-nav {
		display: none; /* SP表示では通常メニューは隠す */
	  }
	
	.header-icons{
		display: none;
	}
}






/* Responsive Design for Mobile */
@media (max-width: 768px) {
	section .container {
  		padding: 0 6.41%;
	}
	
	/* sp-font
	---------------------------*/
	body{
		font-size: 14px;
		font-style: normal;
		font-weight: 300;
		line-height: 180%; /* 25.2px */
		letter-spacing: 1.4px;
	}
	
	.Qanoar_40 {
	font-size: 20px;
	font-weight: 400;
	line-height: normal;
	letter-spacing: 1px;
	}
	
	.shippori_36{
	font-size: 20px;
	font-style: normal;
	font-weight: 800;
	line-height: 160%; /* 32px */
	letter-spacing: 2px;
	}
	
	.noto_28{
		font-size: 20px;
		letter-spacing: 2px;
	}
	
	.shippori_20{
		font-size: 18px;
		font-style: normal;
		font-weight: 800;
		line-height: 200%; /* 36px */
		letter-spacing: 0.9px;
	}
	
	.shippori__18{
		font-size: 14px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		letter-spacing: 1.4px;
	}
	
	.cardo_14{
		font-size: 9.783px;
		font-style: normal;
		font-weight: 400;
		line-height: normal;
		letter-spacing: 0.978px;
	}
	
	.cardo_34{
		font-size: 23.759px;
		font-style: normal;
		font-weight: 700;
		line-height: normal;
		letter-spacing: 2.376px;
	}
	
	

	/*  layout
	---------------------------*/
	.sp{display: block;}
	.pc{display: none;}
	
	.br{display: block;}
	
	
	
	
	/* btn
	--------------------------*/
	/*btn circle
	----------------*/
	.btn_circle-arrow::before {
	  content: '';
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  background: url("../img/svg-circle.svg") no-repeat center center;
	  background-size: contain; /* 画像を要素のサイズに収める */
	}
	
	.btn_circle-arrow::after{
	  content: '';
	  display: inline-block;
	  width: 30px;
	  height: 30px;
	  background: url("../img/svg-arrow.svg") no-repeat center center;
	  background-size: contain; /* 画像を要素のサイズに収める */
	}
	
	.btn_circle-arrow a {
	  border-bottom: 1px solid #544B4B;
	  font-size: 12px;
	}
	
	
	/*  pagenation
	------------------------*/
	.pagination{
		gap:10px;
	}

	.prev-link img, .next-link img{
		width: 60px;
	}

	.pagination-list{
		width: 62.85%;
	}

	.pagination-list{
		height: 60px;
	}
	
	
	/*  hero-section
	---------------------------*/
	#hero-section {
	  margin-bottom: 80px;
	}
	
	
	/* 下層ページ　hero-section
	--------------------------*/
	#hero-section {
		width: 100%;
		background-size: cover;
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 108px 25px 22px;
		/*padding: 14.26% 11.03% 22px;*/
		margin-bottom: 100px;
	}
	#hero-section h1 .en{
		font-size: 20px;
		font-style: normal;
		font-weight: 400;
		line-height: 240%; /* 48px */
		letter-spacing: 4px;
	}

	#hero-section h1 .jp{
		font-size: 14px;
		font-style: normal;
		font-weight: 800;
		line-height: 160%; /* 22.4px */
		letter-spacing: 0.7px;
	}
	.breadcrumb-wrapper {
  		display: none;
	}
	
	


	
	
	/*  header
	---------------------------*/
	
		.header-nav {
		display: none; /* Hide nav menu on mobile */
	  }

	  .header-mobile-menu {
		display: block; /* Show menu button on mobile */
	  }
	
	
	/* スマホナビ
	----------------------------*/


	  .header-mobile-menu {
		display: block; /* SP表示で表示 */
	  }

	  .header-nav {
		display: none; /* SP表示では通常メニューは隠す */
	  }
	
	.header-icons{
		display: none;
	}


	
	

	/*  footer
	-------------------------*/
	.footer-reserve{
		margin-top: 0;
	}
	.footer-logo img {
		width: 122px;
	}
	
	 .footer-links {
		flex-direction: column;
		text-align: center;
	  }
	
	.footer-reserve{
		padding: 60px 0px;
		gap: 20px;
	}
	.footer-reserve-title{
		font-family: Qanoar;
		font-size: 28px;
		font-style: normal;
		font-weight: 400;
		line-height: 240%; /* 67.2px */
		letter-spacing: 5.6px;
	} 

	  .footer-reserve-buttons {
		flex-direction: column;
	  }

	  .footer-bottom {
		flex-direction: column;
		text-align: center;
	  }
	
	.footer-reserve-buttons ul{
		flex-direction: column;
		align-items: center;
	}
	
	.footer-reserve-btn{
		flex-direction: row;
  justify-content: center;
	}
	
	.footer-reserve-buttons li{
		display: flex;
	}
	
	.footer-reserve-description{
		font-size: 16px;
		font-style: normal;
		font-weight: 800;
		line-height: 160%; /* 25.6px */
		letter-spacing: 0.8px;
	}

	  .footer-menu, .footer-info {
		flex-direction: column;
	  }

	  .footer-menu li::after, .footer-info li::after {
		display: none;
	  }
	
	.footer-top {
		flex-direction: column;
		align-items: center;
	  }

	  .footer-menu {
		justify-content: center;
		flex-wrap: wrap;
		text-align: center;
	  }

	  .footer-bottom-content {
		flex-direction: column;
		text-align: center;
	  }

	  .footer-info {
		justify-content: center;
	  }
	
	  .footer-top {
		flex-direction: column;
		align-items: flex-start;
	  }

	  .footer-menu {
		justify-content: center;
		flex-wrap: wrap;
		text-align: left;
	  }

	  .footer-bottom-content {
		flex-direction: column-reverse;
		text-align: left;
	  }

	  .footer-info {
		justify-content: center;
	  }
	
	.footer-menu{
		gap:0;
		margin-top: 60px;
	}
	
	.footer-social{
		align-items: self-start;
  		flex-direction: column;
	}
	
	.sns-list {
  		flex-direction: row;
	}
	
	.footer-social{
		border-bottom: 1px solid var(--Text-, #FFF);
		width: 100%;
		padding-bottom: 26px;
		margin-bottom: 26px;
	}
	
	.footer-menu-list {
  		gap: 7px;
	}
	
	.footer-top{
		margin-bottom: 26px;
	}




	
	}/*/* Responsive Design for Mobile */











