@charset "utf-8";

@media only screen and (max-width: 640px) {

/*============================
#aboutArea
============================*/
#aboutArea { padding-top: 50px; position: relative; }
#aboutArea.temple01::before { width: 100%; height: 200px; position: absolute; margin-left: 0; background: url("../../imageFile/top/bg_pattern01.png") no-repeat center top; background-size: 400px auto; top: 0; }
#aboutArea.temple02::before { width: 100%; height: 200px; position: absolute; margin-left: 0; background: url("../../imageFile/top/bg_pattern02.png") no-repeat center top; background-size: 400px auto; top: 0; }
#aboutArea.temple03::before { width: 100%; height: 200px; position: absolute; margin-left: 0; background: url("../../imageFile/top/bg_pattern03.png") no-repeat center top; background-size: 400px auto; top: 0; }
#aboutArea .title { font-size: 2em; }
#aboutArea .text { margin-top: 15px; font-size: 1.125em; line-height: 1.5; text-align: left; }
#aboutArea .image { margin: 40px -25px 0; }
#aboutArea .image img { width: 100%; height: 160px; object-fit: cover; }

/*============================
#topHighlightsArea
============================*/
#topHighlightsArea { padding: 50px 0; }
#topHighlightsArea .md_container { display: block; }
#topHighlightsArea .title { font-size: 1.75em; width: auto; }
#topHighlightsArea .title::before { width: 30px; }
#topHighlightsArea .data {}
#topHighlightsArea .data .subTitle { margin-top: 15px; font-size: 1.25em; }
#topHighlightsArea .data .subText { margin-top: 15px; font-size: 1em; }
#topHighlightsArea .data .link { margin-top: 20px; font-size: 1.25em; }
#topHighlightsArea .data .link a { right: 30px; }
#topHighlightsArea .data .link a::before {}
#topHighlightsArea .data .link a::after { right: -32px; }
#topHighlightsArea .data .link a:hover { }
#topHighlightsArea .data .link a:hover::before {}
#topHighlightsArea .data .link a:hover::after { right: -35px; }
#topHighlightsArea .exhibition { margin-top: 30px; }
#topHighlightsArea .exhibition .data { padding: 15px; }
#topHighlightsArea .exhibition .data .miniTitle { font-size: 1.5em; }
#topHighlightsArea .exhibition .data .date { margin-top: 10px; font-size: 1.125em; }
#topHighlightsArea .exhibition .data .miniText { margin-top: 15px; text-align: left; font-size: 1em; line-height: 1.25; }
#topHighlightsArea .exhibition .data .miniText table { width: 100%; }
#topHighlightsArea .exhibition .data .miniText table th { width: 100px; padding: 5px; }
#topHighlightsArea .exhibition .data .miniText table td { padding: 5px; }
#topHighlightsArea .exhibition .sub { margin-top: 10px; padding: 0 10px; text-align: left; }

/*============================
#topHistoryArea
============================*/
#topHistoryArea { padding: 50px 0; }
#topHistoryArea::before { height: 30px; }
#topHistoryArea .title { font-size: 1.75em; }
#topHistoryArea .image { margin: -10px -25px 0; }
#topHistoryArea .image img { width: 100%; height: 120px; object-fit: cover; }
#topHistoryArea .data { margin-top: 40px; display: block; }
#topHistoryArea .data .subTitle { width: auto; font-size: 1.25em; }
#topHistoryArea .data .subText { margin-top: 15px; padding-left: 0; font-size: 1em; }
#topHistoryArea .link { margin-top: 20px; font-size: 1.25em; letter-spacing: 0; text-align: right; }
#topHistoryArea .link a { right: 30px; }
#topHistoryArea .link a::before {}
#topHistoryArea .link a::after { right: -32px; }
#topHistoryArea .link a:hover { }
#topHistoryArea .link a:hover::before {}
#topHistoryArea .link a:hover::after { right: -35px; }

/*============================
#topHowtovisitArea
============================*/
#topHowtovisitArea { padding-top: 50px; }
#topHowtovisitArea .md_container { display: block; }
#topHowtovisitArea .title { font-size: 1.75em; width: auto; }
#topHowtovisitArea .title::before { width: 30px; }
#topHowtovisitArea .data {}
#topHowtovisitArea .data .subText { margin-top: 20px; }
#topHowtovisitArea .data .link { margin-top: 20px; font-size: 1.25em; }
#topHowtovisitArea .data .link a { right: 30px; }
#topHowtovisitArea .data .link a::before {}
#topHowtovisitArea .data .link a::after { right: -32px; }
#topHowtovisitArea .data .link a:hover {}
#topHowtovisitArea .data .link a:hover::before {}
#topHowtovisitArea .data .link a:hover::after { right: -35px; }
#topHowtovisitArea .map { margin-top: 60px; }
#topHowtovisitArea .map .subTitle { width: auto; padding: 0 25px; }
#topHowtovisitArea .map .subTitle::after { left: 70px; }
#topHowtovisitArea .map iframe { margin-top: 20px; width: 100%; height: 520px; }
	
/*============================
#historyArea
============================*/
#historyArea { padding: 50px 0; }
#historyArea ul {}
#historyArea ul li { display: block; margin-top: 30px; }
#historyArea ul li:first-child { margin-top: 0; }
#historyArea ul li .image { height: 200px; width: 90%; }
#historyArea ul li .image img { width: 100%; height: 200px; }
#historyArea ul li .image .name { left: inherit; right: -5px; bottom: -30px; font-size: 0.875em; }
#historyArea ul li .data { margin-top: 30px; padding: 0 0 0 25px; margin-bottom: 30px; position: relative; z-index: 1; margin-right: 10%; }
#historyArea ul li .data .subTitle { font-size: 1.25em; }
#historyArea ul li .data .subText { margin-top: 10px; font-size: 1em; }
#historyArea ul li:nth-child(2n) { margin-top: 30px; margin-bottom: 60px; }
#historyArea ul li:nth-child(2n) .image { height: 200px; width: 90%; margin-left: 10%; }
#historyArea ul li:nth-child(2n) .data { margin-right: 0; margin-left: 10%; padding: 0 25px 0 0 ; }
#historyArea ul li:nth-child(2n)::before { left: 0; width: 90%; top: 30px; height: 100%; }
	
/*============================
#highlightsArea
============================*/
#highlightsArea { padding: 50px 0; }
#highlightsArea .highlightBox { margin-top: 30px; }
#highlightsArea .highlightBox.top { margin-top: 0; }
#highlightsArea .highlightBox .image { margin: 0 -25px; }
#highlightsArea .highlightBox .image .highlights {}
#highlightsArea .highlightBox .image .highlights ul {}
#highlightsArea .highlightBox .image .highlights ul li { height: 200px; }
#highlightsArea .highlightBox .image .highlights ul li .name { bottom: -30px; font-size: 0.875em; }
#highlightsArea .highlightBox .image .highlights ul li img { width: 100%; height: 200px; object-fit: cover; }
#highlightsArea .highlightBox .image .highlights .swiper-pagination { margin-top: 10px; }
#highlightsArea .highlightBox .image .highlights .swiper-pagination span {}
#highlightsArea .highlightBox .image .highlights .swiper-pagination span.swiper-pagination-bullet {}
#highlightsArea .highlightBox .image .highlights .swiper-pagination span.swiper-pagination-bullet-active {} 
#highlightsArea .highlightBox .data { margin-top: 15px; display: block; }
#highlightsArea .highlightBox .data .subTitle { width: 100%; font-size: 1.25em; }
#highlightsArea .highlightBox .data .subText { margin-top: 15px; padding-left: 0; font-size: 1em; }
	
/*============================
#howtovisitArea
============================*/
#howtovisitArea { padding: 50px 0; }
#howtovisitArea .information {}
#howtovisitArea .information .title { font-size: 1.5em; }
#howtovisitArea .information .text { margin-top: 10px; font-size: 1em; }
#howtovisitArea .information .exhibition { margin-top: 30px; }
#howtovisitArea .information .exhibition .data { padding: 15px; }
#howtovisitArea .information .exhibition .data .miniTitle { font-size: 1.5em; }
#howtovisitArea .information .exhibition .data .date { margin-top: 10px; font-size: 1.125em; }
#howtovisitArea .information .exhibition .data .miniText { margin-top: 15px; text-align: left; font-size: 1em; line-height: 1.25; }
#howtovisitArea .information .exhibition .data .miniText table { width: 100%; }
#howtovisitArea .information .exhibition .data .miniText table th { width: 100px; padding: 5px; }
#howtovisitArea .information .exhibition .data .miniText table td { padding: 5px; }
#howtovisitArea .information .exhibition .sub { margin-top: 10px; padding: 0 10px; text-align: left; }
#howtovisitArea .information .image { margin-top: 40px; margin-left: -25px; margin-right: -25px; }
#howtovisitArea .information .image ul {}
#howtovisitArea .information .image ul li { width: 33.3333%; margin-right: 0; }
#howtovisitArea .information .image ul li .name { width: 200px; text-align: right; bottom: -30px; font-size: 0.875em; white-space: nowrap; }
#howtovisitArea .information .image ul li:nth-child(3n) { margin: 0; }
#howtovisitArea .information .image ul li img {}
#howtovisitArea .access { margin-top: 50px; }
#howtovisitArea .access .title { font-size: 1.5em; }
#howtovisitArea .access .text { padding-left: 0; margin-top: 10px; font-size: 1em;  }	
#howtovisitArea .access .map { margin-top: 60px; }
#howtovisitArea .access .map .subTitle { width: auto; padding: 0 25px; }
#howtovisitArea .access .map .subTitle::after { left: 70px; }
#howtovisitArea .access .map iframe { margin-top: 20px; width: 100%; height: 520px; }
#howtovisitArea .access .map .address { margin-top: 15px; font-size: 1.125em; }
#howtovisitArea .access .subTitle { margin-top: 30px; font-size: 1.25em; }
#howtovisitArea .access .data { margin-top: 20px; }
#howtovisitArea .access .data dl { padding: 16px 5px; display: block; }
#howtovisitArea .access .data dl:first-child {}
#howtovisitArea .access .data dl dt { width: 100%; font-size: 1.125em; }
#howtovisitArea .access .data dl dd { margin-top: 10px; padding-left: 0; font-size: 1em; line-height: 1.5; }
#howtovisitArea .root { margin-top: 40px; }
#howtovisitArea .root .subTitle { font-size: 1.125em; }
#howtovisitArea .root .map { margin-top: 20px; padding-bottom: 50px; }
#howtovisitArea .root .map img { width: 96%; height: auto; }
#howtovisitArea .root .data { margin-top: 40px; }
#howtovisitArea .root .data dl { padding: 16px 5px; display: block; }
#howtovisitArea .root .data dl:first-child {}
#howtovisitArea .root .data dl dt { width: 100%; font-size: 1.25em; }
#howtovisitArea .root .data dl dt span {}
#howtovisitArea .root .data dl dt .image { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }
#howtovisitArea .root .data dl dt .image img { width: 30px; height: auto; }
#howtovisitArea .root .data dl dd { margin-top: 10px; padding-left: 0; font-size: 1em; }
#howtovisitArea .near { margin-top: 50px; }
#howtovisitArea .near .title { font-size: 1.5em; }
#howtovisitArea .near .list { margin-top: 0; }
#howtovisitArea .near .list ul {}
#howtovisitArea .near .list ul li { float: left; width: 48%; margin-right: 4%; margin-top: 4%; }
#howtovisitArea .near .list ul li:nth-child(2n) { margin-right: 0; }
#howtovisitArea .near .list ul li .image {}
#howtovisitArea .near .list ul li .image img {}
#howtovisitArea .near .list ul li .imageTitle { margin-top: 6px; font-size: 1em; }
	
}