@charset "utf-8";

@media screen and (max-width:640px){
/*============================
common
============================*/
.md_pankuzuArea ul li:nth-child(2) { display: inline-block; }
.md_container { background-color: #fff; }

/*============================
#journalTop
============================*/
.top_md_panelArea { width: 100%; margin: 0 auto; }
.top_md_panelArea .panel { background-size: cover; padding: 100px 20px 30px; background-position-y: inherit; }
.top_md_panelArea .panel .md_pageTitle  { font-size: 2em; }
.top_md_panelArea .panel .md_pageSubTitle { margin-top: 5px; font-size: 1em; }

#journalTopArea {}
#journalTopArea .md_container {}
#journalTopArea .md_container .journalTop { padding: 15px 0 50px; }
#journalTopArea .md_container .journalTop .journalTopCard { flex-direction: column; gap: 15px; padding: 40px 0 25px; }
#journalTopArea .md_container .journalTop .journalTopCard:last-child {}
#journalTopArea .md_container .journalTop .journalTopCard .journalTopImg { width: 100%; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopImg img { width: 100%; height: auto;   min-width: 240px; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText { width: 100%; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopCategory { margin-top: 15px; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopHeader { margin-top: 10px; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopHeader .journalTopTitle { font-size: 1.875em; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopHeader .journalTopSubtitle { margin-top: 0; font-size: 1.25em; }
#journalTopArea .md_container .journalTop .journalTopCard .journalTopText .journalTopFooter { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 15px; }
#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; }
#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: 100%; }
#journalArticle .harfCircle {}
#journalArticle .titleArea { padding: 20px 15px 30px }
#journalArticle .titleArea .md_pageCategory { font-size: 1.125em; gap: 0.5em; }
#journalArticle .titleArea .md_pageCategoryName {}
#journalArticle .titleArea .deco {}
#journalArticle .titleArea .deco img {}
#journalArticle .titleArea .md_pageTitle { font-size: 2.25em; }
#journalArticle .titleArea .md_pageTitle em {}
#journalArticle .titleArea .md_pageSubTitle { margin-top: 10px; font-size: 0.75em; }
#journalArticle .titleArea .decoLine {}
#journalArticle .titleArea .decoLine .decoParts {}
#journalArticle .titleArea .decoLine::before, #journalArticle .titleArea .decoLine::after {}
#journalArticle .titleArea .updateDate {}
#journalArticle .md_panelArea {}
#journalArticle .md_panelArea .panel {}
#journalArticle .topArea { padding: 55px 15px 25px; }
#journalArticle .topArea span { display: block; height: 30px; }
#journalArticle .article { padding: 0 15px 20px; }
#journalArticle .article .part { margin-top: 30px; }
#journalArticle .article .part h2 {}
#journalArticle .article .part .content { margin-top: 25px; }
#journalArticle .article .part .content .text {}
#journalArticle .article .part .content h3 {}
#journalArticle .article .part .content .img { width: 100%; }
#journalArticle .article .part .content .cardImg { width: 350px; }
#journalArticle .article .part .content .cardMedia {}
#journalArticle .article .part .content .cardHalf { flex-direction: column; gap: 5px; }
#journalArticle .article .part .content .cardFigure img { width: 100%; }
#journalArticle .article .part .content .cardGallery { flex-direction: column; }
#journalArticle .article .part .content .cardGallery .leftGroup .cardMedia { width: 100%; }
#journalArticle .article .part .content .cardGallery .rightGroup .cardMedia { width: 100%; }
#journalArticle .contentLine { margin-top: 55px; }
#journalArticle .travelGuide { padding: 0 15px 0; }
#journalArticle .travelGuide h2 { margin-top: 40px;  }
#journalArticle .travelGuide h2::before {}
#journalArticle .travelGuide .content {}
#journalArticle .travelGuide .content .text {}
#journalArticle .travelGuide .beforeYouGo .contentTable { overflow-x: auto; }
#journalArticle .travelGuide .beforeYouGo .contentTable table {  min-width: 850px; }
#journalArticle .travelGuide .beforeYouGo .contentTable table tr th {}
#journalArticle .travelGuide .beforeYouGo .contentTable table tr td {}
#journalArticle .travelGuide .beforeYouGo .contentTable table tbody tr th {}
#journalArticle .travelGuide .beforeYouGo .cautionText {}
#journalArticle .travelGuide .workshopList .content { flex-direction: column;}
#journalArticle .travelGuide .workshopList .content ul li {}
#journalArticle .travelGuide .workshopList .content ul li:first-child {}
#journalArticle .travelGuide .workshopList .content ul li::before {}
#journalArticle .travelGuide .workshopList .map img { width: 100%; }
#journalArticle .travelGuide .modelRoute .content .text { margin-top: 15px; }
#journalArticle .travelGuide .modelRoute .route .routeStep {margin-top: 20px;}
#journalArticle .travelGuide .modelRoute .route .routeStep .routeTop { flex-direction: column; gap: 5px; }
#journalArticle .travelGuide .modelRoute .route .routeStep .routeTop .label {}
#journalArticle .travelGuide .modelRoute .route .routeStep .routeTop .time {}
#journalArticle .travelGuide .modelRoute .route .routeStep .text { margin-top: 10px; }
#journalArticle .backButton { margin-top: 40px; }
#journalArticle .backButton .md_btn_lineBlack { min-width: 240px; }
#journalArticle .backButton .md_btn_lineBlack:hover { border-radius: 10px; border: solid 1px #222; }

/*============================
#tourListArea
============================*/
#tourListArea { margin: 40px 10px 0; }
#tourListArea .md_container { box-shadow: none; padding: 0; width: 100%; }
#tourListArea .content { margin-top: 20px; }
#tourListArea .content .title { text-align: center; font-size: 1.5em; font-weight: bold; }
#tourListArea .content ul { text-align: center; }
#tourListArea .content ul li { float: left; width: 47%; height: inherit; margin: 20px 1.5% 0; }
#tourListArea .content ul li a { width: 100%; height: inherit; }
#tourListArea .content ul li a::after { right: 0; bottom: 0; }
#tourListArea .content ul li a:hover {}
#tourListArea .content ul li a:hover::after {}
#tourListArea .content ul li a .image { position: inherit; left: inherit; top: inherit; width: 100%; height: 100%; z-index: 0; aspect-ratio: 3 / 4; overflow: hidden; }
#tourListArea .content ul li a .image::before { display: none; }
#tourListArea .content ul li a .image::after { background: linear-gradient(rgba(255,255,255,0),rgba(255,255,255,0) 30%, rgba(255,255,255,0.9) 60%, rgba(255,255,255,1)); }
#tourListArea .content ul li a .image img { width: 100%; height: auto; }
#tourListArea .content ul li a:hover .image img {}
#tourListArea .content ul li a:hover .image::before { left: 0; top: 0; width: 100%; opacity: 0; }
#tourListArea .content ul li a .data { height: inherit; padding: 10px; position: inherit; left: 0; top: 0; }
#tourListArea .content ul li a .data .title { font-size: 1em; line-height: 1.125; }
#tourListArea .content ul li a .data .number { margin-top: 5px; font-size: 0.9125em; }
#tourListArea .content ul li a .data .number .hours { margin-right: 0; }
#tourListArea .content ul li a .data .number .price { display: block; margin-left: 0; }
#tourListArea .content ul li a .icon { position: absolute; left: 10px; top: 10px; margin-right: 40px; }
#tourListArea .content ul li a .icon .pickup {}
#tourListArea .content ul li a .icon .pickup_2 {}
#tourListArea .content ul li a .ranking { position: absolute; right: 0; top: -15px;}
#tourListArea .content ul li a .ranking .pickup_no1 { width: 40px; height: 34px; background: url("../../imageFile/global/icon_no1.svg") no-repeat center; background-size: 40px auto; }
#tourListArea .content ul li a .ranking .pickup_no2 { width: 40px; height: 34px; background: url("../../imageFile/global/icon_no2.svg") no-repeat center; background-size: 40px auto; }
#tourListArea .content ul li a .ranking .pickup_no3 { width: 40px; height: 34px; background: url("../../imageFile/global/icon_no3.svg") no-repeat center; background-size: 40px auto; }
#tourListArea .backButton { margin-top: 40px; }
#tourListArea .backButton .md_btn_lineBlack { min-width: 240px;}
#tourListArea .backButton .md_btn_lineBlack:hover { border-radius: 10px; border: solid 1px #222; }
	
/*============================
#backButtonArea
============================*/
#backButtonArea { margin: 40px 20px 0; padding-top: 20px; padding-bottom: 80px; }
#backButtonArea .button {}
}