@charset "utf-8"; /*============================ #aboutArea ============================*/ #aboutArea { padding-top: 80px; position: relative; } #aboutArea.temple01::before { content: ""; width: 800px; height: 400px; position: absolute; left: 50%; top: -45px; transform: translateX(-50%); margin-left: 60px; background: url("../../imageFile/top/bg_pattern01.png") no-repeat center top; } #aboutArea.temple02::before { content: ""; width: 800px; height: 400px; position: absolute; left: 50%; top: -107px; transform: translateX(-50%); margin-left: -90px; background: url("../../imageFile/top/bg_pattern02.png") no-repeat center top; } #aboutArea.temple03::before { content: ""; width: 800px; height: 400px; position: absolute; left: 50%; top: -115px; transform: translateX(-50%); margin-left: 60px; background: url("../../imageFile/top/bg_pattern03.png") no-repeat center top; } #aboutArea .title { font-size: 3.5em; text-align: center; position: relative; z-index: 1; font-weight: 500; } #aboutArea .text { margin-top: 40px; font-size: 1.25em; line-height: 1.75; font-weight: 500; text-align: center; } #aboutArea .text span { font-size: 0.875em; } #aboutArea .image { margin-top: 80px; text-align: center; } #aboutArea .image img { width: 100%; height: auto; } /*============================ #topHighlightsArea ============================*/ #topHighlightsArea { padding: 60px 0; } #topHighlightsArea .md_container { display: flex; align-items: flex-start; } #topHighlightsArea .title { padding-top: 30px; font-size: 3em; font-weight: 500; width: 370px; position: relative; } #topHighlightsArea .title::before { content: ""; position: absolute; left: 0; top: 0; width: 50px; height: 1px; background: #aa9c74; } #topHighlightsArea .data { flex: 1; } #topHighlightsArea .data .subTitle { font-size: 1.6125em; font-weight: 700; line-height: 1.25; } #topHighlightsArea .data .subText { margin-top: 30px; line-height: 1.5; font-size: 1.1125em; } #topHighlightsArea .data .link { margin-top: 30px; font-size: 1.5em; letter-spacing: 0; text-align: right; } #topHighlightsArea .data .link a { display: inline-block; padding-bottom: 8px; border-bottom: solid 1px #bbbab8; position: relative; right: 45px; } #topHighlightsArea .data .link a::before { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); display: block; width: 30px; height: 30px; background: #c6ab59; border-radius: 30px; text-align: center; transition: all 250ms ease-out; } #topHighlightsArea .data .link a::after { content: "→"; position: absolute; right: -35px; top: 50%; margin-top: 1px; transform: translateY(-50%); color: #fff; font-size: 0.75em; text-align: center; font-weight: 200; transition: all 250ms ease-out; } #topHighlightsArea .data .link a:hover { } #topHighlightsArea .data .link a:hover::before { right: -43px; } #topHighlightsArea .data .link a:hover::after { right: -38px; } #topHighlightsArea .exhibition { width: 100%; margin-top: 80px; background: #f4f2ef; padding: 8px; } #topHighlightsArea .exhibition .data { border: solid 1px #e4e2df; width: 100%; padding: 30px; } #topHighlightsArea .exhibition .data .miniTitle { font-size: 2em; text-align: center; font-weight: 500; } #topHighlightsArea .exhibition .data .date { margin-top: 20px; text-align: center; line-height: 1.5; font-size: 1.25em; font-weight: 500; } #topHighlightsArea .exhibition .data .miniText { margin-top: 20px; text-align: center; line-height: 1.5; font-size: 1.1125em; } #topHighlightsArea .exhibition .data .miniText table { width: 680px; margin: 0 auto; } #topHighlightsArea .exhibition .data .miniText table th { width: 150px; text-align: left; padding: 8px; border: solid 1px #d4d2cf; } #topHighlightsArea .exhibition .data .miniText table td { text-align: left; padding: 8px; border: solid 1px #d4d2cf; } #topHighlightsArea .exhibition .sub { margin-top: 8px; text-align: center; color: #555; } /*============================ #topHistoryArea ============================*/ #topHistoryArea { padding: 100px 0 80px; background: #efedea; position: relative; } #topHistoryArea::before { content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%); width: 2px; height: 50px; border-left: solid 1px #aa9c74; } #topHistoryArea .title { font-size: 3em; font-weight: 500; text-align: center; position: relative; z-index: 2; } #topHistoryArea .image { margin-top: -15px; position: relative; z-index: 1; } #topHistoryArea .image img {} #topHistoryArea .data { margin-top: 60px; display: flex; align-items: flex-start; } #topHistoryArea .data .subTitle { width: 370px; line-height: 1.5; font-size: 1.25em; font-weight: 500; } #topHistoryArea .data .subText { padding-left: 60px; flex: 1; line-height: 1.5; font-size: 1.1125em; } #topHistoryArea .link { margin-top: 20px; font-size: 1.5em; letter-spacing: 0; text-align: right; } #topHistoryArea .link a { display: inline-block; padding-bottom: 8px; border-bottom: solid 1px #bbbab8; position: relative; right: 45px; } #topHistoryArea .link a::before { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); display: block; width: 30px; height: 30px; background: #c6ab59; border-radius: 30px; text-align: center; transition: all 250ms ease-out; } #topHistoryArea .link a::after { content: "→"; position: absolute; right: -35px; top: 50%; margin-top: 1px; transform: translateY(-50%); color: #fff; font-size: 0.75em; text-align: center; font-weight: 200; transition: all 250ms ease-out; } #topHistoryArea .link a:hover { } #topHistoryArea .link a:hover::before { right: -43px; } #topHistoryArea .link a:hover::after { right: -38px; } /*============================ #topHowtovisitArea ============================*/ #topHowtovisitArea { padding-top: 100px; } #topHowtovisitArea .md_container { display: flex; align-items: flex-start; } #topHowtovisitArea .title { padding-top: 30px; font-size: 3em; font-weight: 500; width: 370px; position: relative; } #topHowtovisitArea .title::before { content: ""; position: absolute; left: 0; top: 0; width: 50px; height: 1px; background: #aa9c74; } #topHowtovisitArea .data { flex: 1; } #topHowtovisitArea .data .subText { margin-top: 30px; line-height: 1.5; font-size: 1.125em; } #topHowtovisitArea .data .link { margin-top: 20px; font-size: 1.5em; letter-spacing: 0; text-align: right; } #topHowtovisitArea .data .link a { display: inline-block; padding-bottom: 8px; border-bottom: solid 1px #bbbab8; position: relative; right: 45px; } #topHowtovisitArea .data .link a::before { content: ""; position: absolute; right: -40px; top: 50%; transform: translateY(-50%); display: block; width: 30px; height: 30px; background: #c6ab59; border-radius: 30px; text-align: center; transition: all 250ms ease-out; } #topHowtovisitArea .data .link a::after { content: "→"; position: absolute; right: -35px; top: 50%; margin-top: 1px; transform: translateY(-50%); color: #fff; font-size: 0.75em; text-align: center; font-weight: 200; transition: all 250ms ease-out; } #topHowtovisitArea .data .link a:hover { } #topHowtovisitArea .data .link a:hover::before { right: -43px; } #topHowtovisitArea .data .link a:hover::after { right: -38px; } #topHowtovisitArea .map { margin-top: 60px; } #topHowtovisitArea .map .subTitle { width: 1240px; padding: 0 20px; font-size: 1.25em; position: relative; margin: 0 auto; } #topHowtovisitArea .map .subTitle::after { content:""; position: absolute; left: 70px; top: 50%; transform: translateY(-50%); height: 2px; width: calc(100% - 70px); border-bottom: solid 1px #ddd; } #topHowtovisitArea .map iframe { margin-top: 20px; width: 100%; height: 460px; filter: grayscale(15%); } /*============================ #historyArea ============================*/ #historyArea { padding: 100px 0; } #historyArea ul {} #historyArea ul li { display: flex; align-items: center; align-items: flex-end; margin-top: 100px; } #historyArea ul li:first-child { margin-top: 0; } #historyArea ul li .image { height: 390px; width: 46%; position: relative; z-index: 1; } #historyArea ul li .image img { width: 100%; height: 390px; object-fit: cover; } #historyArea ul li .image .name { position: absolute; left: 0; bottom: -35px; color: #555; padding: 10px; } #historyArea ul li .data { flex: 1; padding: 0 40px; margin-bottom: 30px; position: relative; z-index: 1; margin-right: 10%; } #historyArea ul li .data .subTitle { line-height: 1.25; font-size: 1.6125em; font-weight: 700; } #historyArea ul li .data .subText { margin-top: 20px; font-size: 1.1125em; line-height: 1.5; } #historyArea ul li:nth-child(2n) { flex-direction: row-reverse; position: relative; margin-top: 60px; margin-bottom: 20px; } #historyArea ul li:nth-child(2n) .data { margin-right: 0; margin-left: 10%; } #historyArea ul li:nth-child(2n)::before { content: ""; position: absolute; left: 8%; top: 60px; height: 380px; width: 70%; background: #fff; z-index: 0; } #historyArea ul li:nth-child(2n) .image .name { left: inherit; right: 0; } /*============================ #highlightsArea ============================*/ #highlightsArea { padding: 100px 0; } #highlightsArea .highlightBox { margin-top: 100px; } #highlightsArea .highlightBox.top { margin-top: 0; } #highlightsArea .highlightBox .image { position: relative; } #highlightsArea .highlightBox .image .highlights {} #highlightsArea .highlightBox .image .highlights ul {} #highlightsArea .highlightBox .image .highlights ul li { position: relative; } #highlightsArea .highlightBox .image .highlights ul li .name { position: absolute; right: 0; bottom: -35px; color: #555; padding: 10px; } #highlightsArea .highlightBox .image .highlights ul li img {} #highlightsArea .highlightBox .image .highlights .swiper-pagination { margin-top: 15px; position: relative !important; bottom: 0; left: 50%; transform: translateX(-50%); } #highlightsArea .highlightBox .image .highlights .swiper-pagination span { margin: 0 5px; display: inline-block; width: 8px; height: 8px; border-radius: 8px; } #highlightsArea .highlightBox .image .highlights .swiper-pagination span.swiper-pagination-bullet { background: #a0a099; } #highlightsArea .highlightBox .image .highlights .swiper-pagination span.swiper-pagination-bullet-active { background: #b0b0a9; } #highlightsArea .highlightBox .data { margin-top: 40px; display: flex; align-items: flex-start; } #highlightsArea .highlightBox .data .subTitle { width: 370px; line-height: 1.25; font-size: 1.6125em; font-weight: 700; } #highlightsArea .highlightBox .data .subText { flex: 1; padding-left: 40px; font-size: 1.1125em; line-height: 1.5; } /*============================ #howtovisitArea ============================*/ #howtovisitArea { padding: 100px 0; } #howtovisitArea .information {} #howtovisitArea .information .title { font-size: 2.75em; font-weight: 500; } #howtovisitArea .information .text { margin-top: 20px; font-size: 1.125em; line-height: 1.5; } #howtovisitArea .information .exhibition { margin-top: 30px; } #howtovisitArea .information .exhibition { width: 100%; margin-top: 80px; background: #f4f2ef; padding: 8px; } #howtovisitArea .information .exhibition .data { border: solid 1px #e4e2df; width: 100%; padding: 30px; } #howtovisitArea .information .exhibition .data .miniTitle { font-size: 2em; text-align: center; font-weight: 500; } #howtovisitArea .information .exhibition .data .date { margin-top: 20px; text-align: center; line-height: 1.5; font-size: 1.25em; font-weight: 500; } #howtovisitArea .information .exhibition .data .miniText { margin-top: 30px; text-align: center; line-height: 1.5; font-size: 1.1125em; } #howtovisitArea .information .exhibition .data .miniText table { width: 680px; margin: 0 auto; } #howtovisitArea .information .exhibition .data .miniText table th { width: 150px; text-align: left; padding: 8px; border: solid 1px #d4d2cf; } #howtovisitArea .information .exhibition .data .miniText table td { text-align: left; padding: 8px; border: solid 1px #d4d2cf; } #howtovisitArea .information .exhibition .sub { margin-top: 8px; text-align: center; color: #555; } #howtovisitArea .information .image { margin-top: 80px; } #howtovisitArea .information .image ul {} #howtovisitArea .information .image ul li { float: left; width: 30.6666%; margin-right: 4%; position: relative; } #howtovisitArea .information .image ul li .name { position: absolute; right: 0; bottom: -35px; color: #555; padding: 10px; } #howtovisitArea .information .image ul li:nth-child(3n) { margin: 0; } #howtovisitArea .information .image ul li img { width: 100%; height: auto; } #howtovisitArea .access { margin-top: 100px; } #howtovisitArea .access .title { font-size: 2.75em; font-weight: 500; } #howtovisitArea .access .text { padding-left: 350px; margin-top: -50px; font-size: 1.125em; line-height: 1.5; } #howtovisitArea .access .map { margin-top: 60px; } #howtovisitArea .access .map .subTitle { width: 1240px; padding: 0 20px; font-size: 1.25em; position: relative; margin: 0 auto; } #howtovisitArea .access .map .subTitle::after { content:""; position: absolute; left: 70px; top: 50%; transform: translateY(-50%); height: 2px; width: calc(100% - 70px); border-bottom: solid 1px #ddd; } #howtovisitArea .access .map iframe { margin-top: 20px; width: 100%; height: 460px; filter: grayscale(15%); } #howtovisitArea .access .map .address { margin-top: 20px; text-align: center; font-size: 1.25em; } #howtovisitArea .access .subTitle { margin-top: 60px; font-size: 1.75em; font-weight: 500; } #howtovisitArea .access .data { margin-top: 30px; } #howtovisitArea .access .data dl { border-bottom: solid 1px #dbdad8; padding: 25px 20px; display: flex; width: 100%; } #howtovisitArea .access .data dl:first-child { border-top: solid 1px #dbdad8; } #howtovisitArea .access .data dl dt { width: 300px; font-size: 1.25em; font-weight: 700; line-height: 1.5; } #howtovisitArea .access .data dl dd { flex: 1; padding-left: 20px; line-height: 1.75; font-size: 1.125em; } #howtovisitArea .root { margin-top: 80px; } #howtovisitArea .root .subTitle { font-size: 1.75em; font-weight: 700; text-align: center; } #howtovisitArea .root .map { margin-top: 40px; background: url("../../imageFile/temple/bg_howtovisitJapan.png") no-repeat center; background-size: cover; text-align: center; padding-bottom: 100px; background-attachment: fixed; } #howtovisitArea .root .map img {} #howtovisitArea .root .data { margin-top: 80px; } #howtovisitArea .root .data dl { border-bottom: solid 1px #dbdad8; padding: 25px 20px; display: flex; width: 100%; } #howtovisitArea .root .data dl:first-child { border-top: solid 1px #dbdad8; } #howtovisitArea .root .data dl dt { width: 400px; font-size: 1.375em; font-weight: 700; line-height: 1.25; position: relative; } #howtovisitArea .root .data dl dt span { font-size: 0.75em; } #howtovisitArea .root .data dl dt .image { position: absolute; right: 0; top: 50%; transform: translateY(-50%); } #howtovisitArea .root .data dl dt .image img {} #howtovisitArea .root .data dl dd { flex: 1; padding-left: 20px; line-height: 1.75; font-size: 1.125em; } #howtovisitArea .near { margin-top: 100px; } #howtovisitArea .near .title { font-size: 2.75em; font-weight: 500; } #howtovisitArea .near .list { margin-top: 30px; } #howtovisitArea .near .list ul {} #howtovisitArea .near .list ul li { float: left; width: 22%; margin-right: 4%; } #howtovisitArea .near .list ul li:nth-child(4n) { margin-right: 0; } #howtovisitArea .near .list ul li .image {} #howtovisitArea .near .list ul li .image img { width: 100%; height: auto; } #howtovisitArea .near .list ul li .imageTitle { margin-top: 10px; font-weight: 500; font-size: 1.125em; line-height: 1.5; }