@charset "utf-8";

/*============================
common
============================*/
.md_pankuzuArea ul li:nth-child(2) { display: inline-block; }
.md_container { background-color: #fff; }

/*============================
#journalTop
============================*/
.top_md_panelArea { text-align: left; position: relative; width: 1240px; padding: 0; margin: 0 auto; background-color: inherit; }
.top_md_panelArea .panel { background-image: url("../../imageFile/journal/top/bg_mainPanel.jpg"); background-size: cover; padding: 250px 130px 70px; background-position-y:-180px ; }
.top_md_panelArea .panel .md_pageTitle { color: #fff; font-size: 5em; font-family: "Bell MT", serif; }
.top_md_panelArea .panel .md_pageSubTitle { margin-top: 15px; color: #fff; font-size: 1.875em; font-weight: 400; letter-spacing: 0.03em; }

#journalTopArea {}
#journalTopArea .md_container { background-color: #fff; box-shadow: 5px 0px 15px 0px rgba(0, 0, 0, 0.1); }
#journalTopArea .md_container .journalTop { padding: 60px 130px 90px; }
#journalTopArea .md_container .journalTop .journalTopCard { display: flex; gap: 40px; align-items: center; padding: 50px 0; border-bottom: #ddd solid 1px; transition: transform 0.3s ease, border-color 0.3s ease; }
#journalTopArea .md_container .journalTop .journalTopCard:hover { border-bottom: #C9832E solid 1px; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopImg { width: 340px; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopImg img { width: 100%; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText { width: 500px; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopCategory { font-size: 1em; color: #C9832E; font-weight: 600; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopHeader { color: #222; margin-top: 15px; }
#journalTopArea .md_container .journalTop .journalTopCard:hover .journalTopText .journalTopHeader { color: #000; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopHeader .journalTopTitle { font-family: "Bell MT", serif; font-size: 2.5em; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopHeader .journalTopSubtitle { font-family: "Bell MT", serif; font-size: 1.5em; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopFooter { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 30px;  }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopDate { color: #BDBDBD; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopDate .journalTopDateLabel {}
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopDate .journalDateValue {}
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .arrow { position: relative; display: inline-block; width: 60px; height: 1px; margin-top: 7.1px; border-radius: 9999px; background-color: #d0d0d0; transition: transform 0.3s ease; }
#journalTopArea .md_container .journalTop .journalTopCard:hover .journalTopText .arrow { transform: translateX(10px); }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .arrow::before { content: ""; position: absolute; top: calc(50% - 1px); right: 0; width: 9px; height: 1px; border-radius: 9999px; background-color: #d0d0d0; transform: rotate(45deg); transform-origin: calc(100% - 1px) 50%; }


/*============================
#journalArticle
============================*/
#journalArticle {}
#journalArticle .md_container { width: 1070px; padding: 0; }
#journalArticle .harfCircle { width: 50px;  height: 25px; background-color: #c9832e; border-radius: 0 0 150px 150px; margin: 0 auto; }
#journalArticle .titleArea { padding: 15px 80px 30px }
#journalArticle .titleArea .md_pageCategory { display: flex; justify-content: center; align-items: center; gap: 1em; }
#journalArticle .titleArea .md_pageCategoryName { text-align: center; color: #c9832e; font-size: 1.125em; font-weight: 600; }
#journalArticle .titleArea .deco { width: 4em; }
#journalArticle .titleArea .deco img { width: 100%; }
#journalArticle .titleArea .md_pageTitle { font-size: 3em; font-weight: 500; font-family: "Bell MT", serif; text-align: center; margin-top: 10px; line-height: 1; }
#journalArticle .titleArea .md_pageTitle em { font-size: 1.5em;  font-weight: 500;}
#journalArticle .titleArea .md_pageSubTitle { margin-top: 20px; display: block; font-size: 0.675em; font-weight: 400; letter-spacing: 0.03em; text-align: center; line-height: 1; }
#journalArticle .titleArea .decoLine { display: flex;  gap: 0.5em; justify-content: center; align-items: center; margin-top: 25px; }
#journalArticle .titleArea .decoLine .decoParts { font-size: 0.7em; color: #b1b0b0; }
#journalArticle .titleArea .decoLine::before, #journalArticle .titleArea .decoLine::after { content: ""; width: 55px; height: 1px; background-color: #b1b0b0; }
#journalArticle .titleArea .updateDate { margin-top: 15px; text-align: center; color: #b1b0b0; }
#journalArticle .md_panelArea { text-align: left; position: relative; width: 100%; padding: 0; margin: 0 auto; background-color: inherit; }
#journalArticle .md_panelArea .panelKintsugi { background-image: url("../../imageFile/journal/kintsugi/bg_mainPanel.jpg"); background-size: cover; aspect-ratio: 16/9; }
#journalArticle .md_panelArea .panelNishijin { background-image: url("../../imageFile/journal/nishijin/bg_mainPanel.jpg"); background-size: cover; aspect-ratio: 16/9; background-position: center; background-repeat: no-repeat; }
#journalArticle .md_panelArea .panelGoshuin { background-image: url("../../imageFile/journal/goshuin/bg_mainPanel.jpg"); background-size: cover; aspect-ratio: 16/9; }
#journalArticle .topArea { padding: 55px 80px 25px; font-size: 1em; line-height: 1.75em; font-weight: 400; }
#journalArticle .topArea span { display: block; height: 30px; }
#journalArticle .article { padding: 0 80px 20px; }
#journalArticle .article .part { margin-top: 50px; }
#journalArticle .article .part h2 { color: #222; font-size: 1.25em; background-color: #f2f1f0; padding: 10px 15px 9px; font-weight: 400; letter-spacing: 0.05em; }
#journalArticle .article .part .content { margin-top: 30px; }
#journalArticle .article .part .content .text { margin-top: 20px; font-size: 1em; font-weight: 300; line-height: 1.75; }
#journalArticle .article .part .content h3 { margin-top: 25px; font-size: 1.2em; font-weight: 500; }
#journalArticle .article .part .content .img { margin-top: 20px; }
#journalArticle .article .part .content .cardImg { width: 350px; }
#journalArticle .article .part .content .cardMedia { width: 800px; }
#journalArticle .article .part .content img { width: 100%; }
#journalArticle .article .part .content .cardHalf { display: flex; gap: 50px;}
#journalArticle .article .part .content .cardGallery { display: flex; justify-content: space-between; gap: 10px;}
#journalArticle .contentLine { margin-top: 80px; height: 2px; border-bottom: solid 1px #ddd; }
#journalArticle .travelGuide { padding: 0 80px 0; }
#journalArticle .travelGuide h2 { margin-top: 50px; font-size: 1.5em; line-height: 1.25; font-weight: 600;padding-left: 30px; position: relative; }
#journalArticle .travelGuide h2::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 3px; background: #c9832e; }
#journalArticle .travelGuide .content { margin-top: 20px; }
#journalArticle .travelGuide .content .text { font-size: 1em; font-weight: 300; line-height: 1.75; }
#journalArticle .travelGuide .beforeYouGo .contentTable { margin-top: 30px; }
#journalArticle .travelGuide .beforeYouGo .contentTable table { width: 100%; padding-bottom: 30px;}
#journalArticle .travelGuide .beforeYouGo .contentTable table tr th { width: 250px; background: #f5f5f5; font-weight: normal; padding: 10px 18px; vertical-align: middle; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; }
#journalArticle .travelGuide .beforeYouGo .contentTable table tr td { vertical-align: middle; padding: 15px 18px; line-height: 1.5; border-top: solid 1px #ddd; border-bottom: solid 1px #ddd; font-size: 0.9125em; }
#journalArticle .travelGuide .beforeYouGo .contentTable table tbody tr th { background: #f9f9f9; }
#journalArticle .travelGuide .beforeYouGo .cautionText { margin-top: 20px; }
#journalArticle .travelGuide .workshopList .content {}
#journalArticle .travelGuide .workshopList .content ul li { position: relative; border-bottom: 1px solid #ccc; font-size: 1.15em; padding: 15px 20px; }
#journalArticle .travelGuide .workshopList .content ul li:first-child { border-top: 1px solid #ccc; }
#journalArticle .travelGuide .workshopList .content ul li::before { content: "▸"; position: absolute; left: 0; top: 16px; color: #c9832e; font-size: 0.9em; transition: transform 0.2s ease, left 0.2s ease }
#journalArticle .travelGuide .workshopList .content ul li:hover::before { transform: translateX(4px); }
#journalArticle .travelGuide .modelRoute .content .text { margin-top: 15px; }
#journalArticle .travelGuide .modelRoute .route .routeStep {margin-top: 20px;}
#journalArticle .travelGuide .modelRoute .route .routeStep .routeTop { display: flex; gap: 20px; align-items: baseline; }
#journalArticle .travelGuide .modelRoute .route .routeStep .routeTop .label { font-weight: 600; font-size: 1.25em; line-height: 1.35; }
#journalArticle .travelGuide .modelRoute .route .routeStep .routeTop .time { font-size: 0.875em; }
#journalArticle .travelGuide .modelRoute .route .routeStep .text { margin-top: 5px; }
#journalArticle .backButton { margin-top: 60px; text-align: center;}
#journalArticle .backButton .md_btn_lineBlack { position: relative; display: inline-block; min-width: 280px; padding: 18px 0 16px; color: #222; font-size: 1em; text-align: center; letter-spacing: 0.05em; border-radius: 50px; border: solid 1px #aaa; font-family: "century-gothic", sans-serif; font-weight: 400; font-style: normal; transition: all 250ms ease-out;}
#journalArticle .backButton .md_btn_lineBlack:hover { border-radius: 10px; border: solid 1px #222; }

/*============================
#tourListArea
============================*/
#tourListArea { margin-top: 80px; }
#tourListArea .md_container { box-shadow: none; padding: 0; width: 100%; }
#tourListArea .content { margin-top: 20px; }
#tourListArea .content .title { text-align: center; font-size: 2em; font-weight: bold; }
#tourListArea .content ul { text-align: center; }
#tourListArea .content ul li { display: inline-block; width: 300px; height: 548px; position: relative; margin: 30px 15px 0; transition: all 250ms ease-out; }
#tourListArea .content ul li a { display: block; width: 300px; height: 548px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.15); transition: all 250ms ease-out; }
#tourListArea .content ul li a::after { content: ""; position: absolute; right: 5px; bottom: 5px; border-bottom: 20px solid #333; border-left: 20px solid transparent; transition: all 200ms ease-out; z-index: 1; }
#tourListArea .content ul li a:hover { box-shadow: 0 20px 10px -10px rgba(0, 0, 0, 0.1); }
#tourListArea .content ul li a:hover::after { right: 0; bottom: 0; border-bottom: 20px solid #633; border-left: 20px solid transparent; }
#tourListArea .content ul li a .image { position: absolute; left: 0; top: 0; width: 300px; height: 400px; z-index: 0; overflow: hidden; }
#tourListArea .content ul li a .image::before { content: ""; display: block; position: absolute; left: 10px; top: 10px; width: 280px; height: 380px; border: 1px solid #fff; z-index: 2; opacity: 0.5; transition: all 200ms ease-out; }
/*#tourListArea .content ul li a .image::after { content: ""; display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0) 40%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,1)); z-index: 1; }*/
#tourListArea .content ul li a .image img { transition: all 200ms ease-out; width: 100%; height: 100%; object-fit: cover; }
#tourListArea .content ul li a:hover .image img { transform: scale(1.1,1.1); }
#tourListArea .content ul li a:hover .image::before { left: 0; top: 0; width: 300px; height: 400px; opacity: 0; }
#tourListArea .content ul li a .data { height: 148px; position: absolute; left: 0; bottom: 0; width: 100%; padding: 15px 20px; z-index: 1; text-align: left; background: #fff; }
#tourListArea .content ul li a .data .title { font-size: 1.375em; font-weight: 400; max-height: 88px; text-align: left; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
#tourListArea .content ul li a .data .number { margin-top: 10px; color: #888; font-weight: 500; display: flex; }
#tourListArea .content ul li a .data .number .hours { display: inline-block; margin-right: 5px; white-space: nowrap; }
#tourListArea .content ul li a .data .number .price { display: inline-block; margin-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#tourListArea .content ul li a .icon { position: absolute; left: 20px; top: 20px; text-align: left; }
#tourListArea .content ul li a .icon .pickup { display: inline-block; margin-right: 5px;  text-align: center; background: #fff; color: #222; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; }
#tourListArea .content ul li a .icon .pickup_2 { display: inline-block; text-align: center; background: #c33; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; }
#tourListArea .content ul li a .ranking { position: absolute; right: 10px; top: -31px;}
#tourListArea .content ul li a .ranking .pickup_no1 { display: inline-block; width: 50px; height: 42px; text-align: center; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; background: url("../../imageFile/global/icon_no1.svg") no-repeat center; background-size: 50px auto; }
#tourListArea .content ul li a .ranking .pickup_no2 { margin-left: 5px; display: inline-block; width: 50px; height: 42px; text-align: center; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; background: url("../../imageFile/global/icon_no2.svg") no-repeat center; background-size: 50px auto; }
#tourListArea .content ul li a .ranking .pickup_no3 { margin-left: 5px; display: inline-block; width: 50px; height: 42px; text-align: center; color: #fff; font-size: 0.875em; padding: 4px 6px 3px; line-height: 1; border-radius: 2px; background: url("../../imageFile/global/icon_no3.svg") no-repeat center; background-size: 50px auto; }
#tourListArea .backButton { margin-top: 60px; text-align: center;}
#tourListArea .backButton .md_btn_lineBlack { position: relative; display: inline-block; min-width: 280px; padding: 18px 0 16px; color: #222; font-size: 1em; text-align: center; letter-spacing: 0.05em; border-radius: 50px; border: solid 1px #aaa; font-family: "century-gothic", sans-serif; font-weight: 400; font-style: normal; transition: all 250ms ease-out;}
#tourListArea .backButton .md_btn_lineBlack:hover { border-radius: 10px; border: solid 1px #222; }

/*============================
#backButtonArea
============================*/
#backButtonArea { margin: 80px 80px 0; padding-top: 40px; padding-bottom: 120px; border-top: solid 1px #ddd; }
#backButtonArea .button { text-align: left; }