@charset "utf-8";
/*===============================================
 *	ブラウザリセット
===============================================*/
a:hover img {filter: alpha(opacity=85);-moz-opacity: 0.85;opacity: 0.85;}
html {overflow-x: hidden;overflow-y: scroll;-webkit-box-sizing: border-box;box-sizing: border-box;}
body {font-size: 100%;font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;letter-spacing: 0;height: 100%;}
table {font-size: inherit;}
pre, code {font: 115% monospace; *font-size: 100%;}
br {letter-spacing: normal;}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, fieldset, input, textarea, p, blockquote, th, td {margin: 0;padding: 0;font-style: normal;font-weight: normal;}
address, em {font-style: normal;}
strong, th {font-weight: normal;}
table {border-collapse: collapse;border-spacing: 0;border: none;}
th, td {text-align: left;border: none;font-weight: normal;}
hr {display: none;}
h1, h2, h3, h4, h5, h6 {font-size: 100%;}
img, fieldset {border: 0;vertical-align: bottom;}
li {list-style-type: none;}
ul, ol, dl {margin: 0;list-style-position: outside;list-style-type: none;}
li, dt, dd {font-size: 100%;}
dt {font-weight: normal;}
a {text-decoration: underline;outline: none;}
a:hover {text-decoration: none;}
form, input {padding: 0;margin: 0;}
iframe{border:none;}
picture{display: block;}
figure{margin: 0;}
img{display:block;height:auto;width:100%;}
/* --------------このサイトオリジナル設定--------------- */
* {box-sizing: border-box;}
a {color: #fff;outline: none;text-decoration:none;}
/*===============================================

 *	common

===============================================*/
html body {background: #fff;color: #666;font-size: 16px;line-height: 1.6;-webkit-text-size-adjust: 100%;letter-spacing: 0.1em;overflow-wrap: break-word;word-wrap: break-word;word-break: break-word;}
em {font-weight: bold;}
html {
  scroll-behavior: smooth;
}
.sp {display: none;}
.inner {max-width: 1200px;margin: 0 auto;width: 100%;position: relative;}
.txt-small{font-size: 13px;}
.center {text-align: center;}
.right {text-align: right;}
.section_title {
    font-size: 44px;
    font-weight: bold;
    margin-bottom: 1rem;
    letter-spacing: 0.05em;
}
.section_subtitle {
    font-size: 21px;
	margin-bottom: 2rem;
}
.section{
	padding: 80px 0;
}
@media screen and (min-width: 1025px) {
a[href^="tel:"] {pointer-events: none;}
}
@media only screen and (max-width: 1024px) {
.inner {margin: 0 auto;max-width: initial;width: 94%;}
.section{
	padding: 60px 0;
}
}
@media only screen and (max-width: 768px) {
html body {font-size: 16px;}
	.section_title {
		font-size: 35px;
	}
}
@media only screen and (max-width: 568px) {
html {scroll-padding-top: 65px;}
.inner {margin: 0 auto;width: 90%;}
.pc {display: none;}
.sp {display: block;}
	.section_title {
		font-size: 26px;
	}
	.section_subtitle {
		font-size: 18px;
	}
    .section{
        padding: 40px 0;
    }
}

/*===============================================
 *	br
===============================================*/
@media screen and (min-width:1021px){
.br-pc{display:block;}
.br-tb{display:none;}
.br-sp{display:none;}
}
@media screen and (min-width:481px) and (max-width: 1020px) {
.br-pc{display:none;}
.br-tb{display:block;}
.br-sp{display:none;}
}
@media screen and (max-width: 480px) {
.br-pc{display:none;}
.br-tb{display:none;}
.br-sp{display:block;}
}
/*===============================================

 *	Hero Section

===============================================*/
.hero_section {
    position: relative;
    background: url('../img/mv_bg_pc.webp') center no-repeat;
    background-size:cover;
    color: #fff;
    padding: 100px 0;
    min-height: 80vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero_content{
	max-width: 1200px;
}

.hero_title{
    max-width:1166px;
    width:90%;
    margin:0 auto;
}




.hero_buttons {
	margin-top: 2rem;
	display: flex;
	gap: 20px;
	justify-content: center;
}
@media (max-width: 1024px) {
    .hero_section{
        background:url('../img/mv_bg_sp.webp') center no-repeat;
        background-size:cover;
        min-height: 65vh;
    }
}
@media (max-width: 980px) {
    .hero_section {
        min-height: 65vh;
    }

}
/*===============================================

 *	Hero Contents

===============================================*/
.hero_navi_contents{
	background: #f6f6f6;
	padding: 50px 0;
}
.hero_culture_txt{
	max-width: 1170px;
	margin: 0 auto 10px;
}
/************************************************
* route_concept_wrapper
*************************************************/
.route_concept_wrapper {
	background-color: #f6f6f6;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 15px;
	font-size: clamp(20px, 2.5vw, 30px);
	font-weight: bold;
	color: #4a4a4a;
	letter-spacing: 0.1em;
}
.route_navi {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}
.route_navi li {
	display: flex;
	align-items: center;
	font-weight: bold;
}
.route_navi li:not(:last-child)::after {
	content: '\2192';
	margin: 0 15px;
	color: #4a4a4a;
	font-weight: normal;
}
.route_catchphrase {
	color: #b93338;
}
@media (max-width: 960px) {
	.route_concept_wrapper {
		font-size: 22px;
	}
}
@media (max-width: 568px) {
	.route_concept_wrapper {
		font-size: 16px;
		letter-spacing: 0.05em;
		gap: 8px;
	}
	.route_navi li:not(:last-child)::after {
		margin: 0 8px;
	}
}
/************************************************
* Hero Buttons
*************************************************/
.hero_buttons {
	display: flex;
	justify-content: space-between;
}
.hero_buttons li{
	font-size: 30px;
	font-weight: bold;
	max-width: 550px;
	width: 100%;
}
.btn_primary,
.btn_secondary {
	position: relative;
	display: flex;
	align-items: center;
	text-align: left;
	padding: 20px 2em;
	border-radius: 50px;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
	transition: all 0.3s ease;
}
.btn_primary {
	background-color: #a22041;
}
.btn_secondary {
	background-color: #bb5520;
}
.btn_primary::after,
.btn_secondary::after {
	content: '';
	position: absolute;
	right: 25px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	transform: rotate(45deg);
}

.btn_primary:hover,
.btn_secondary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.25);
	opacity: 0.95;
}
@media (max-width: 980px) {
    .hero_buttons li {
        font-size: 28px;
    }
}
@media (max-width: 768px) {
	.hero_buttons {
		flex-direction: column;
		align-items: center;
		gap: 15px;
	}
	.btn_primary,
	.btn_secondary {
		width: 100%;
		max-width: 320px;
        margin:0 auto;
		font-size: 18px;
		padding: 16px 20px;
	}
}
/*===============================================

 *	discover_section

===============================================*/
.discover{
	background: #e1dfda;
}

.discover_catch_img{
}

.discover_txtbox{
    background: #fff;
    padding: 20px;
	margin-bottom: 40px;
}
.discover_txtbox .first{
    font-size: 150%;
    font-weight: bold;
}

.discover_txtbox .pickup{
    font-size: 120%;
    font-weight: bold;
}

.discover_txtbox .italic{
    font-style: italic;
}

.route_title{
	font-size: 30px;
	font-weight: bold;
	padding: 5px 0 15px; 
    position:relative;
	margin-bottom: 30px;
}
.route_title::before{
    content:'';
    background:#ffffff;
    display:block;
    position:absolute;
    bottom:0;
    left:calc(50% - 100px);
    width:200px;
    height:2px;
}
.location_list {
	padding-left: 20px;
}

.location_list li {
	margin-bottom: 15px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.4;
	list-style-type: decimal;
}
.location_list li dl{
    display:flex;
    align-items: center;
    flex-ju
}
.location_list li dt{
    font-weight: bold;
    padding-right:30px;
    position:relative;
}
.location_list li dt:before{
    content:'';
    background:#666666;
    display:block;
    position:absolute;
    top: 50%;
    right:0;
    width:20px;
    height:1px;
}

@media (max-width: 568px) {
    .location_list li dl{
        display:block;
    }
    .location_list li dt{
        padding-right:0;
    }
    .location_list li dt:before{
    content:none;
    }
}


.location_list li dd{
	display: block;
	font-weight: normal;
	font-size: 16px;
	color: #666;
	margin-top: 5px;
	margin-left: 1em;
}

@media (max-width: 568px) {
	.location_list li dd {
		font-size: 14px;
		margin-left: 5px;
	}
}
/*===============================================

 *	exclusive_route_section

===============================================*/
.exclusive_route{
	background: #f9f1f3;
}
.route_place{
	margin-bottom: 50px;
}
.exclusive_txt{
	font-size: 22px;
}
/* =========================================
   Map Section
========================================= */
.map {
    background: #e2e1dc;
    overflow: hidden;
    padding:80px 0 0;
}
.map_title {
  margin-bottom: 30px;
}
.map_subtitle {
  margin-bottom: 30px;
}
.map_graphic {
  max-width: 1400px;
  margin-left: max(0px, calc(50vw - 600px));
}
.fade_in_element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.fade_in_element.is_active {
  opacity: 1;
  transform: translateY(0);
}

/*===============================================

 *	exclusive_route_section

===============================================*/
.itinerary{
    background: #f5f4f3;
}
.itinerary_wrapper {
    margin-top: 50px;
}
.itinerary_block {
    display: flex;
    justify-content: left;
    align-items: flex-start;
    gap: 50px;
    margin-bottom: 80px;
}
.itinerary_block:last-child {
    margin-bottom: 0;
}
.block_reverse {
    flex-direction: row-reverse;
}

.itinerary_text {
}
.itinerary_image01 {
    max-width: 600px;
}
.itinerary_image02 {
    max-width: 420px;
}
.responsive_img {
    object-fit: cover;
}

/* =========================================
   Text & Typography
========================================= */
.itinerary_title {
	font-size: 45px;
	font-weight: bold;
	margin-bottom: 10px;
	letter-spacing: 0.05em;
}

.destination_section {
	margin-bottom: 24px;
}
.destination_title {
	font-size: 30px;
	font-weight: bold;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.day_list li {
    display: flex;
    align-items: baseline;
    margin-bottom: 10px;
    font-size: 22px;
    line-height: 1.6;
}

.day_badge {
    display: inline-block;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 4px;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

@media (max-width: 568px) {
    .day_list li {
            font-size: 20px;
    }
}

/* =========================================
   Theme Colors (画像の色味から抽出)
========================================= */
.color_kyoto { color: #a22041; }
.bg_kyoto { background-color: #a22041; }

.color_takeda { color: #e9546b; }
.bg_takeda { background-color: #e9546b; }

.color_kinosaki { color: #bb5520; }
.bg_kinosaki { background-color: #bb5520; }

@media (max-width: 768px) {
    .itinerary_wrapper {
        margin-top: 30px;
    }

    .itinerary_block,
    .block_reverse {
        flex-direction: column;
        gap: 30px;
        margin-bottom: 60px;
    }

    .itinerary_image,
    .itinerary_image02 {
        width: 100%;
        width: 100%;
        max-width: 420px;
        margin: 0 auto;
    }
}

@media (max-width: 568px) {
    .itinerary_title {
        font-size: 26px;
    }
    .destination_title {
        font-size: 16px;
    }
    .day_list li {
        font-size: 14px;
    }
}

/* =========================================
   Access Section
========================================= */
.access {
    padding: 60px 20px;
    background: url(../img/bg_access.webp) left top no-repeat#f2f2f2;
	background-size: cover;
}
.access_card {
    background-color: #fff;
    border-radius: 12px;
    padding: 40px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.access_card:last-child {
    margin-bottom: 0;
}
.access_text {
    flex: 1;
}
.access_title {
    font-size: 40px;
	font-weight: bold;
    margin-bottom: 15px;
    line-height: 1.3;
}
.access_title span{
    font-size:80%;
}
.access_subtitle {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
}
.access_desc {
    font-size: 23px;
    line-height: 1.8;
    margin-bottom: 15px;
}
.access_notes {
    list-style: none;
    padding: 0;
    margin: 0;
}
.access_notes li {
    font-size: 23px;
    line-height: 1.8;
    margin-bottom: 8px;
}
.access_graphic {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.route_icons {
    margin-bottom: 15px;
    text-align: center;
}
.timetable_box {
    width: 100%;
    max-width: 460px;
    text-align: center;
    font-size: 12px;
}

.timetable_header {
    background-color: #f08300;
    color: #fff;
	font-size: 20px;
    padding: 6px 0;
    font-weight: bold;
    letter-spacing: 0.05em;
}

.timetable_body {
    background-color: #f2f2f2;
	font-size: 16px;
    padding: 12px 15px;
    line-height: 1.8;
}
.timetable_body em{
	font-weight: bold;
}
.outlined_text {
    font-size: 25px;
    font-weight: bold;
    color: #fff;
    text-shadow:
         1px  1px 0 #666,
        -1px  1px 0 #666,
         1px -1px 0 #666,
        -1px -1px 0 #666,
         0px  1px 0 #666,
         0px -1px 0 #666,
        -1px  0px 0 #666,
         1px  0px 0 #666;
}
@media (max-width: 1040px) {
    .access_card {
        flex-direction: column;
        padding: 30px 20px;
        gap: 25px;
    }
.access_title {
    font-size: 30px;
}
    .access_text, 
    .access_graphic {
        width: 100%;
    }
}

@media (max-width: 568px) {
    .access {
        padding: 40px 10px;
    }
    .access_title {
        font-size: 22px;
    }
    .access_desc,
    .access_notes li,
    .access_subtitle {
        font-size: 15px;
    }
}
/* =========================================
   Sister Inns Section
========================================= */
.sister_inns {
    background-color: #dcdbd6;
}

.sister_inns_banner {
    background-color: #ca7209;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 45px;
    letter-spacing: 0.05em;
}

.inns_grid {
	background: rgba(255,255,255, .5);
	padding: 30px;
    display: flex;
    gap: 30px;
    justify-content: center;
}

.inn_card {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.inn_image_wrapper {
    border-radius: 8px;
    overflow: hidden;
}

.inn_image {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.inn_name {
    font-size: 45px;
    font-weight: bold;
    color: #ca7209;
    text-align: center;
    margin-bottom: 15px;
    border-bottom: 2px solid #ca7209;
}
@media (max-width: 1024px) {
    .inn_name {
        font-size: 40px;
    }
}
/* =========================================
   Features (アイコン部分)
========================================= */
.inn_features {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    flex-grow: 1;
}

.inn_features li {
    width: 102px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.inn_features li.feature_item_wide {
    width: 180px;
}
@media (max-width: 1024px) {
    .inn_features li {
        width: 72px;
    }
    .inn_features li.feature_item_wide {
        width: 130px;
    }
}
/* =========================================
   Buttons
========================================= */
.btn_wrapper {
    text-align: center;
}
.btn_book_now {
    display: inline-block;
    background-color: #a22041;
    color: #fff;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    padding: 12px 0;
    border-radius: 50px;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
    max-width: 320px;
		position: relative;
}
.btn_book_now::after {
    content: '';
    position: absolute;
    right: 25px;
		top: 50%;
    width: 10px;
    height: 10px;
    border-top: 3px solid #fff;
    border-right: 3px solid #fff;
    transform: rotate(45deg) translate(-50%);
}
.btn_book_now:hover {
    opacity: 0.85;
    transform: translateY(-2px);
}

@media (max-width: 960px) {
    .inns_grid {
        gap: 15px;
    }
    .inn_name {
        font-size: 22px;
    }
    .feature_item {
        width: 70px;
    }
    .btn_book_now {
        font-size: 18px;
        padding: 12px 20px;
    }
}

@media (max-width: 768px) {
    .inns_grid {
        flex-direction: column;
        gap: 40px;
    }
    .inn_card {
        max-width: 500px;
        margin: 0 auto;
        width: 100%;
    }
    .sister_inns_banner {
        font-size: 24px;
    }
    .feature_item {
        width: 80px;
    }
}

/* =========================================
   FAQ Section
========================================= */
.faq {
    background-color: #e5e4e0;
}

.faq_wrapper {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* =========================================
   FAQ Item (details)
========================================= */
.faq_item {
    background-color: #fff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* =========================================
   Question (summary)
========================================= */
.faq_question {
    display: flex;
    align-items: center;
    background-color: #f2eadb;
    padding: 20px 25px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    position: relative;
    list-style: none;
    transition: background-color 0.2s ease;
}

.faq_question::-webkit-details-marker {
    display: none;
}

/* Qの文字色 */
.faq_q_mark {
    color: #ca7209;
    font-size: 30px;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq_q_text {
    padding-right: 40px; /* 右側の矢印と文字が被らないように余白を取る */
    line-height: 1.4;
}

/* 矢印アイコン（CSSで描画） */
.faq_question::after {
    content: '';
    position: absolute;
    right: 25px;
    top: 50%;
    margin-top: -6px; /* 高さの半分を引いて上下中央に */
    width: 10px;
    height: 10px;
    border-right: 3px solid #777777;
    border-bottom: 3px solid #777777;
    transform: rotate(45deg); /* 下向き（閉まっている状態） */
    transition: transform 0.3s ease; /* くるっと回るアニメーション */
}

/* 開いている時の矢印アイコン（上向き） */
details[open] .faq_question::after {
    transform: rotate(-135deg); /* 上向きに回転 */
    margin-top: -2px; /* 回転後の位置微調整 */
}

/* =========================================
   Answer
========================================= */
.faq_answer {
    display: flex;
    align-items: flex-start;
    padding: 25px;
    background-color: #ffffff;
    font-size: 16px;
    color: #666666;
    line-height: 1.8;
}

/* Aの文字色 */
.faq_a_mark {
    color: #a22041;
    font-size: 30px;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.faq_a_text p {
    margin: 0 0 10px 0;
}

.faq_a_text p:last-child {
    margin-bottom: 0;
}

@media (max-width: 768px) {
	.faq_question {
		padding: 15px;
		font-size: 16px;
	}
	.faq_answer {
		padding: 20px 15px;
		font-size: 15px;
	}
	.faq_q_mark,
	.faq_a_mark {
		font-size: 18px;
		margin-right: 10px;
	}

	.faq_question::after {
		right: 15px;
	}
}
/* =========================================
   Question (summary)
========================================= */
footer{
	background: #6e1318;
	padding: 28px 0;
}
footer small{
	font-size: 24px;
	text-align: center;
	color: #fff;
	display: block;
}
@media (max-width: 568px) {
    footer{
        padding: 15px 0;
    }
    footer small{
        font-size: 16px;
    }
}