#wrap { position: relative; z-index: 1; }

/* section */
section { padding: 5vw 0; }
section>* { z-index: 3; }
section .title_box font { text-transform: uppercase; line-height: 130%; letter-spacing: 8px; font-weight: 400; font-size: 39px; }
section .title_box font:last-child { margin-left: 15px; }
section .title_box .page_title { font-weight: 300; font-size: 23px; }
section.bg_box { background: no-repeat 50% / cover; background-attachment: fixed; }
section.bg_box:before, section.bg_box:after { position: absolute; width: 100%; height: 100%; background: var(--white); top: 0; left: 0; z-index: 1; content: ""; }

.btn1 a, .btn2 a { position: relative; display: flex; max-width: 190px; font-size: 16px; font-weight: 500; letter-spacing: 4px; color: #fff; background-color: #daac70; padding: 12px 21px 12px 27px; justify-content: flex-start; margin-top: 30px; }
.btn1 { width: 100%; text-align: -webkit-right; }
.btn2 { width: 100%; text-align: -webkit-left; }
.btn1 a::before, .btn2 a::before { content: ""; position: absolute; top: calc(50% + 3px); right: 21px; width: 30px; height: 1px; background-color: #fff; -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn1 a::after, .btn2 a::after { content: ""; position: absolute; top: calc(50% - 3px); right: 21px; border-style: solid; border-width: 0 0px 8px 6px; border-color: transparent transparent transparent #fff; -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: all 0.3s; transition: all 0.3s; }
.btn1 a:hover, .btn2 a:hover { opacity: 0.8; }
.btn1 a:hover::before, .btn1 a:hover::after, .btn2 a:hover::before, .btn2 a:hover::after { right: 13px; }

/* about_area */
#about_area { background: url(/images/39/img-ab-bg.jpg); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; padding: 10vw 0; }
#about_area .img_item { margin-bottom: 30px; order: 1; }
#about_area .img_item:before { position: absolute; width: 90%; height: 100%; border: 1px rgba(var(--info-rgb), .1) solid; display: block; top: 30px; right: 30px; content: ""; }
#about_area .img_item img { width: 90%; }
#about_area .img_item a { padding: 20px 35px; letter-spacing: 5px; text-transform: uppercase; font-size: 13px; right: 30px; bottom: -30px; z-index: 3; }
#about_area .info_item article { margin-bottom: 30px; width: 90%; line-height: 210%; letter-spacing: 2px; font-weight: 100; }
#about_area .about_top { display: flex; flex-direction: row; justify-content: center; }
#about_area .about_top .title_hatta { font-size: 72px; color: #594b40; font-weight: 600; line-height: 115%; position: relative; }
#about_area .about_top .title_hatta:before { content: ''; position: absolute; top: -100px; left: -230px; width: 130px; aspect-ratio: 1/1; background-image: url(/images/39/img-ab-sun.png); background-size: contain; background-repeat: no-repeat; animation-name: planet; animation-direction: alternate; animation-iteration-count: infinite; animation-timing-function: ease-in-out; animation-duration: 2s; z-index: 0; }

#about_area .about_top .text_about { width: 75%; margin-left: 100px; }
#about_area .about_top .text_about h3 { font-size: 28px; color: #d7a562; padding: 10px 0; border-top: 2px #d7a562 solid; border-bottom: 2px #d7a562 solid; width: 200px; }
#about_area .about_top .text_about p { font-size: 20px; color: #757575; letter-spacing: 2.5px; text-align: justify; margin-top: 20px; }

/* list_box */
.list_box .info_box h3 { height: 30px; font-weight: 400; font-size: 18px; }

/* news_area */
#news_area { padding: 5vw 0; }
#news_area .row { margin: 0; }
#news_area .newsbox { display: flex; flex-direction: row; justify-content: flex-start; }
#news_area .bg_box { background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; }
#news_area .news_boxleft { width: 650px; margin: auto 0; }
#news_area .news_boxleft .btn2 { margin-top: 50px; }
#news_area .title_box { font-size: 32px; color: #d7a562; writing-mode: vertical-lr; letter-spacing: 5px; text-align: left; position: relative; margin-right: 60px; }
#news_area .title_box:before { content: ''; width: 2px; height: 146px; background: #d7a562; display: block; }
#news_area .title_box:after { content: ''; width: 2px; height: 146px; background: #d7a562; display: block; }
#news_area .title_box * { color: #fff; text-align: left; }
#news_area .workframe { width: min(90%, var(--width-xxl)); }
#news_area ul {}
#news_area li:after { content: ''; width: 100%; height: 1px; display: block; margin: 20px 0; background: #d7a562; background-repeat: repeat-x; background-size: 4px 1px; background-position: 50% 50%; opacity: .5; }
#news_area li .info_box { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
#news_area li .time { font-weight: 400; font-size: 14px; color: #d7a562; }
#news_area li h3 { height: auto; line-height: 150%; font-size: 18px; -webkit-line-clamp: 1; color: #594b40; font-weight: 400; width: 100%; letter-spacing: 2px; margin: 0; }
#news_area li .info_box b { width: 35px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; background: #d7a562; border-radius: 50px; }
#news_area li:hover .info_box b { margin-right: 15px; }

#news_area li .info_box b svg { width: 12px; height: 12px; }

/* product_area */
#product_area img { height: 100%; }
#product_area .row .info_box>div { margin: auto; width: calc(100% - 100px); }
#product_area .row .info_box h3 { margin: 10px 0; }
#product_area .row .info_box .line { margin: 10px 0 30px; width: 50px; height: 1px; background: var(--primary); opacity: .7; }
#product_area .row .info_box article { height: 75px; font-weight: 300; font-size: 15px; -webkit-line-clamp: 3; }
#product_area .row .info_box .price { margin-top: 15px; min-height: 30px; }
#product_area .row .info_box .price font { margin-left: 20px; font-weight: 300; }

/* book_area */
#book_area .row img { height: 400px; }
#book_area .row .info_box { padding: 100px 15px 60px; width: calc(100% - 30px); background: -webkit-linear-gradient(top, transparent 0, rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); background: linear-gradient(to bottom, transparent 0, rgba(var(--black-rgb), .01) 2%, rgba(var(--black-rgb), .8) 90%); bottom: -20px; left: 0; }

/* header */
header .wrap { width: calc(100% - 40px); margin: 0 auto; padding-left: 20px; padding-right: 20px; display: flex; align-items: center; justify-content: space-between; flex-direction: row; height: 40px; display: flex; flex-flow: row nowrap; align-items: center; position: relative; border-bottom: 1px solid #fff; }
header #menubtn { display: flex; position: relative; }
header #webmenu { position: absolute; top: 0; transform: translateY(0%); right: 95px; }
header #cis { position: relative; left: 0; top: 0; }
header #webmenu { width: 350px; height: calc(100vh - -70px); background: rgb(0 0 0 / 90%); box-shadow: 0 20px 30px rgba(var(--black-rgb), .2); right: calc(-1 * var(--width-xs)); z-index: 998; bottom: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
header #webmenu nav { overflow-y: scroll; padding: 80px 0px 0px 0px; height: auto; width: 100%; }
header #webmenu #topicon { padding-right: 0; }
header #webmenu #topicon a svg { fill: #ffffff; }
header #webmenu #topicon a span { color: #434343; }
header #webmenu nav::-webkit-scrollbar { width: 0; }
header #webmenu nav>ul { margin-bottom: 30px; margin-top: 10px; }
header #webmenu li .menu_body, header #webmenu li .menu_body .subOption li ul { position: relative; display: none; -webkit-transition: none; -moz-transition: none; -ms-transition: none; -o-transition: none; transition: none; }
header #webmenu li .menu_body ul { padding: 0; display: flex; flex-wrap: wrap; flex-direction: column; }
header #webmenu li .menu_body .subOption .bo { position: relative; }
header #webmenu li .menu_body .sub2Option a { font-weight: 300; color: var(--primary); }
header #webmenu li .menu_body .sub3Option a { color: var(--complement); }
header.scroll #webmenu { height: calc(100vh - -100px); }
header #webmenu nav>ul>li>p a { color: #ffffff; text-align: center; display: flex; flex-direction: column; align-items: center; border-bottom: 1px solid #0000001a; width: 100%; padding: 10px 0; height: 40px; }
header #webmenu nav>ul>li>p a span.cn { color: #ffffff; }
header #webmenu nav>ul>li>p a span.en { color: #ffffff; font-family: 'Quantico', sans-serif; font-size: 14px; }
.webBox header #webmenu li.action .menu_body { -webkit-transform: translate(0, 0); opacity: 1; }
header #webmenu nav>ul>li { margin-left: 0px; width: 100%; position: relative; margin-bottom: 0; }
header.scroll:before { background: rgb(255 255 255 / 0%); transform: translate(0, 0%) !important; }
header #webmenu nav>ul>li .subOption li>div a { color: var(--white); text-align: center; }
header #webmenu nav>ul>li .subOption li { position: relative; width: 100%; background-color: #000; }
header #webmenu nav>ul>li .subOption li .sub2Title { display: inline-block; font-size: 14px; font-weight: 400; }
header #webmenu nav ul li b { display: block; }
header #webmenu li .menu_body, header #webmenu li .menu_body .subOption li ul { width: 100%; left: calc(0% - 0px); z-index: 1; }
.section-side { width: 100px; height: 100vh; position: absolute; top: 0; right: 0; z-index: 10; border-left: 1px solid #fff; transition: all 0.8s; }
.side-top-span, .side-bottom-span { width: 4px; height: 4px; display: block; border-left: 1px solid #aaaaaa; position: absolute; right: 96px; }
.side-top-span { border-bottom: 1px solid #aaaaaa; top: 76px; }
.side-bottom-span { border-top: 1px solid #aaaaaa; bottom: 96px; }
header #jpbtn {position: absolute; right: 140px;}
header #jpbtn a {color: white;}

/* pc-menu */
#pc-menu { position: absolute; top: 50%; transform: translateY(-50%); right: 96px; }
#pc-menu ul li b { display: none; }
#pc-menu ul li { position: relative; padding: 7px 25px; }
#pc-menu ul li:hover { overflow: visible; }
#pc-menu>ul>li>p a { padding: 0 15px 23px 15px; color: #fff; display: flex; flex-direction: column; align-items: center; }
#pc-menu>ul>li>p a span { color: #fff; font-weight: 400; }
header.scroll #pc-menu>ul>li>p a span { color: #2c2c2c; }
#pc-menu>ul>li>p a { position: relative; display: block; padding: 0; font-size: 18px; font-weight: 300; width: 200px; height: 30px; text-align: justify; margin-bottom: 10px; }
#pc-menu>ul>li>p a span { position: absolute; left: 0; right: 0px; margin: auto; text-align: end; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out; transition: all .3s ease-out; font-size: 18px; }
#pc-menu>ul>li>p a:hover span.cn { font-size: 19px; }
#pc-menu>ul>li:hover>p a { color: #ffffff; text-shadow: 1px 1px 5px #ffffff78; }
#pc-menu li .menu_body, #pc-menu li .menu_body .subOption li ul { width: 100px; left: calc(100% - 0px); z-index: 1; opacity: 0; top: -10px; }
#pc-menu li .menu_body ul { text-align: left; }
#pc-menu li .menu_body .subOption li ul { position: absolute; top: 0; left: -170px; }
#pc-menu li .menu_body .subOption li>div a { display: block; padding: 10px 10px; font-size: 14px; color: #ffffff; word-wrap: break-word; }
#pc-menu li .menu_body .subOption li>div a:hover { color: #ffffff; background-color: #daac70; }
#pc-menu li:hover .menu_body, #pc-menu li .menu_body .subOption li:hover>ul { z-index: 10; opacity: 1; }
#pc-menu ul li::after { content: ''; position: absolute; width: 8px; height: 8px; top: 24px; right: -3px; border-radius: 50%; transform: translate(-50%, -50%); background: #fff; }
#pc-menu ul li::before { content: ""; position: absolute; width: 20px; height: 20px; border: 1px solid rgb(255 255 255 / 47%); border-radius: 50%; -webkit-transition: all 0.4s ease; transition: all 0.4s ease; -webkit-transform: scale(0); transform: scale(0); top: 13px; right: -6px; }
#pc-menu ul li:hover::before { -webkit-transition-delay: 0.4s; transition-delay: 0.4s; -webkit-transform: scale(1); transform: scale(1); }
#pc-menu ul li:hover::after { width: 8px; height: 8px; background: #fff; transition: all 0.8s; right: -3px; }
#pc-menu li .menu_body .subOption li:after, #pc-menu li .menu_body .subOption li::before { display: none; }
#pc-menu li .menu_body .subOption li { padding: 0; }

/*#map_area*/
#map_area .workframe { align-items: stretch; }
#map_area .Txttrack { bottom: auto; top: 0px; }
#map_area { background-image: url(/images/39/img-park-bg.jpg); background-repeat: no-repeat; background-size: cover; padding: 8vw 0 13vw; position: relative; }
#map_area:before { content: ''; position: absolute; bottom: 0; right: 0; width: 350px; height: 500px; background-image: url(/images/39/img-park-circle.png); background-size: contain; background-repeat: no-repeat; z-index: 0; }
#map_area .right_box:before { content: ''; position: absolute; width: 195px; height: 155px; top: -10px; left: -300px; z-index: 11; background-image: url(/images/39/img_map_icon.png); background-repeat: no-repeat; display: none; }
#map_area .left_box iframe { width: 100%; height: 100%; }
#g-map { position: relative; margin: 0; width: 44%; }
#map_area .left_box iframe { position: relative; width: 100%; aspect-ratio: 1/1; z-index: 1; }
#map_area .left_box:hover iframe { -webkit-filter: grayscale(0%); }
#map_area .right_box { margin-left: 4%; width: 1%; flex: 1 auto; position: relative; padding: 0 0 60px; }
#map_area .right_box .info_item { display: flex; align-items: flex-end; }
#map_area .track { right: 0; left: auto; top: -60px; }
#map_area #map_tabs ul { margin: 30px 0; }
#map_area #map_tabs li { margin: .5em 2em .5em 0; width: calc((100% / 3) - 1em); align-items: center; }
#map_area #map_tabs li.active a { background: #efe7d0; color: var(--white); border-radius: 50px; padding: 10px; z-index: 0; position: absolute; top: -18%; left: -5%; }
#map_area #map_tabs li .num { margin-right: .5em; width: 55px; aspect-ratio: 1/1; line-height: 160%; background: #d7a562; border-radius: 50%; justify-content: center; align-items: center; font-weight: 300; font-size: 26px; color: #f8edd7; font-family: 'Marcellus', serif; z-index: 1; }
#map_area #map_tabs li .num svg { fill: #fff; width: 35px; aspect-ratio: 1/1; object-fit: contain; }
#map_area #map_tabs li p { line-height: 1.2; color: #594b40; font-size: 20px; letter-spacing: 2px; font-weight: 500; z-index: 1; }
#map_area #map_tabs li p span { letter-spacing: 7px; }
#map_area #map_tabs li a { width: 100%; height: 100%; top: 0; left: 0; }
#map_area #tabs_container .tab_content p { color: #daac70; font-size: 18px; letter-spacing: 2px; line-height: 160%; font-weight: 500; margin-top: 20px; margin-bottom: 5px; }
#map_area #tabs_container .tab_content a.map_a { color: inherit;text-decoration: none;font: inherit;}
#map_area #tabs_container .tab_content article { font-size: 16px; letter-spacing: 2px; line-height: 160%; font-weight: 400; color: #594b40; }
#map_area #tabs_container .tab_content { height: 240px; }
#map_area .right_box .info_item .title_hatta { font-size: 72px; color: #594b40; font-weight: 600; line-height: 115%; position: relative; }
#map_area .right_box .info_item h3 { font-size: 28px; color: #d7a562; padding: 10px 0; border-top: 2px #d7a562 solid; border-bottom: 2px #d7a562 solid; margin-left: 80px; }

/* picture_wall */
#about_area .picture_wall { display: flex; }
#about_area .picture_wall .picture_wrapper { display: flex; -webkit-animation: picture_scroll 80s linear infinite; animation: picture_scroll 80s linear infinite; }
#about_area .picture_wall .picture_wrapper>div { margin: 1.5em 1em; padding: 1em; min-width: 25vw; aspect-ratio: 4/3; display: inline-flex; justify-content: center; align-items: center; }

@keyframes picture_scroll { from { transform: translateX(0%); } to { transform: translateX(-200%); } }
@-webkit-keyframes picture_scroll { from { -webkit-transform: translateX(0%); } to { -webkit-transform: translateX(-200%); } }

@media screen and (max-width: 1440px) {
	#about_area .about_top .title_hatta:before { left: -160px; }
}

@media screen and (min-width: 1281px) {
	#about_area .d_flex { align-items: center; }
	#news_area .list_box .row:hover .info_box { bottom: 30px; }
	#product_area .row:hover .info_box .line { width: 100%; }
	#book_area .row:hover .info_box { bottom: 0; }
}
@media screen and (max-width: 1280px) {
	#about_area .img_item:before, #about_area .img_item img { width: 100%; }
	#about_area .img_item img { height: 100%; }
	#product_area .row .info_box { background: rgba(var(--secondary-rgb), .5); }
	#product_area .row .img_box { opacity: .1; }
	#map_area:before { display: none; }
}
@media screen and (min-width: 1025px) {
	#news_area .bg_box { background-attachment: fixed; }
}
@media screen and (max-width: 1180px) {
	.section-side { display: none; }
	#about_area .img_item { width: 59vw; margin: 0 0 0 auto; order: inherit; }
	#about_area .img_item:before { border: 0; background: rgba(var(--secondary-rgb), .6); top: 0; right: 0; z-index: 2; }
	#about_area .info_item { margin-top: -80px; z-index: 4; }
	#about_area .about_top { display: flex; flex-direction: column; align-items: center; }
	#about_area .about_top .text_about { display: flex; flex-direction: column; align-items: center; width: 100%; margin-left: 0; }
	#about_area .about_top .title_hatta, #map_area .right_box .info_item .title_hatta { margin-bottom: 40px; font-size: 48px; }
	.btn1 { text-align: -webkit-center; }
	#news_area .newsbox { display: flex; flex-direction: column; align-items: center; }
	#map_area .right_box:before { display: none; }
	#map_area .workframe { display: flex; flex-direction: column; }
	#map_area .left_box { width: 100%; margin: auto; margin-bottom: 50px; }
	#map_area .right_box { width: 80%; margin: auto; }
	#map_area .track { right: 0; left: auto; top: -100px; }
	#map_area { padding-bottom: 20vw; }
	#map_area .right_box .info_item { display: flex; flex-direction: column; align-items: center; }
	#map_area .right_box .info_item h3 { margin: 0 0 20px 0; }
	#map_area #map_tabs li { width: calc((100% / 2) - 10em); }
	#map_area #map_tabs ul { display: flex; justify-content: center; }
	#map_area #map_tabs #tabs_container { display: flex; margin: 0 auto; width: 70%; }
	#news_area .title_box { margin-right: 0; margin-bottom: 40px; }
	#about_area .picture_wall .picture_wrapper>div { padding: 0; min-width: 33vw; }
}
@media screen and (max-width: 768px) {
	.webBox #about_area * { transition: all 0s ease-in-out; -webkit-transition: all 0s ease-in-out; -moz-transition: all 0s ease-in-out; -o-transition: all 0s ease-in-out; -ms-transition: all 0s ease-in-out; }
	#news_area { padding: 10vw 0; }
	#about_area .about_top .title_hatta:before { display: none; }
	#map_area #map_tabs li { width: calc((100% / 2) - 5em); }
	#map_area { padding-bottom: 30vw; }
	#news_area .news_boxleft { width: 100%; }
}
@media screen and (max-width: 640px) {
	#about_area .img_item { width: 100%; height: 60vw; }
	#about_area .img_item:before { background: rgba(var(--secondary-rgb), 0); }
	#about_area .info_item { margin-top: 40px; }
	#map_area #map_tabs #tabs_container { width: 100%; }
	#map_area .right_box { width: 100%; }
	#map_area #map_tabs li { width: calc((100% / 2)); margin: 0 .5em; }
	#map_area #map_tabs li .num svg { width: 25px; }
	#map_area #map_tabs li p span { letter-spacing: 0px; }
	#map_area #map_tabs li .num { margin-right: 0.2em; }
	#map_area { padding-bottom: 80vw; }
	header #webmenu { width: 100%; }
	#about_area .picture_wall .picture_wrapper>div { min-width: 50vw; }
}
@media screen and (max-width: 500px) {
	#product_area .list_box { width: 100%; }
	#about_area .about_top .title_hatta { font-size: 48px; margin-bottom: 30px; }
	#about_area .about_top .text_about p { font-size: 16px; }
	#map_area #map_tabs li p { font-size: 16px; }
}