@charset "UTF-8";

/* -------------------------------------------
	top_title
---------------------------------------------- */
.top_title { position: relative; height: 740px; }
.top_title .container { position: relative; padding-left: 180px; padding-right: 180px; max-width: 1240px; }
.top_title_main > picture { position: absolute; top: 0; left: 80px; width: calc(100% - 80px); height: 100%; }
.top_title_main > picture > img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.top_title_main .container { display: flex; align-items: center; height: 740px; }
.top_title_main .container > div{ width: 100%; }
.top_title_heading { font-size: 0; line-height: 0; width: 52%; max-width: 626px; }
.top_title_heading img { width: 100%; max-width: 100%; }
.top_title_lead { font-size: 100%; font-weight: 500; line-height: calc(30 / 18); margin-top: 20px; width: 55%; max-width: 540px; }
.top_title_recope { background-color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 0; line-height: 0; position: absolute; top: 0px; left: 0; width: 80px; height: 100%; z-index: +1; }
.top_title_recope img { width: 15px; }
.top_title_scroll { font-size: 0; line-height: 0; overflow: hidden; position: absolute; bottom: -40px; left: -50px; width: 100%; }
.top_title_scroll-text { position: relative; padding-bottom: 90px; }
.top_title_scroll-text span { display: block; overflow: hidden; position: absolute; bottom: 0px; left: 0px; width: 100%; height: 40px; }
.top_title_scroll-text span:nth-of-type(1) { bottom: 40px; }
.top_title_scroll-text span:nth-of-type(1)::after { background-color: #000; content: ""; position: absolute; bottom: 40px; left: 0px; width: 1px; height: 80px; }
.top_title_scroll-text span:nth-of-type(2)::after { background-color: #000; content: ""; position: absolute; bottom: 80px; left: 0px; width: 1px; height: 80px; }

/* animation */
.top_title_main {transition: opacity 1.5s 0.7s ease-out; opacity: 0;}
.top_title.is-active .top_title_main{opacity: 1;}
.top_title_recope img { transition: opacity 1s 1.5s ease-out; opacity: 0; }
.top_title.is-active .top_title_recope img { opacity: 1; }
.top_title_scroll { transition: opacity 1s 1.5s ease-out; opacity: 0; }
.top_title.is-active .top_title_scroll { opacity: 1; }
.top_title_scroll-text span:nth-of-type(1)::after { animation: scrollWhite 2s cubic-bezier(.65,.01,.31,.99) infinite; }
.top_title_scroll-text span:nth-of-type(2)::after { animation: scrollBlack 2s cubic-bezier(.65,.01,.31,.99) infinite; }
@media only screen and (min-width: 768px) and (max-width: 1620px) {
.top_title .container { padding-left: calc(((170 / 1620) * 100%) + 10px); padding-right: calc(((170 / 1620) * 100%) + 10px); }
.top_title_scroll { left: calc(((30 / 1600) * -100%) + 20px); }
}
@media only screen and (max-width: 767px) {
.top_title { height: 350px; }
.top_title .container { padding-left: 25px; padding-right: 25px; }
.top_title_main > picture { left: 25px; width: calc(100% - 25px); }
.top_title_main .container { box-sizing: border-box; align-items: flex-start; justify-content: center; padding-top: 25px; height: 350px; }
.top_title_main .container > div{ padding-left: 25px; width: auto; }
.top_title_recope  { width: 25px; }
.top_title_recope  img { width: 10px; }
.top_title_heading { width: auto; max-width: none; }
.top_title_heading img { width: 313px; }
.top_title_lead { font-size: calc((11 / 14) * 100%); line-height: calc(32 / 22); text-align: center; margin-top: 10px; width: auto; max-width: none; }
.top_title_scroll { bottom: -20px; left: 15px; }
.top_title_scroll img { width: 7px; }
.top_title_scroll-text { padding-bottom: 45px; }
.top_title_scroll-text span { height: 20px; }
.top_title_scroll-text span:nth-of-type(1) { bottom: 20px; }
.top_title_scroll-text span:nth-of-type(1)::after { bottom: 20px; height: 40px; }
.top_title_scroll-text span:nth-of-type(2)::after { bottom: 40px; height: 40px; }
}
@keyframes scrollWhite {
	0% { bottom: 100%; }
	50% { bottom: -300%; }
	100% { bottom: -300%; }
}
@keyframes scrollBlack {
	0% { bottom: 200%; }
	50% { bottom: -200%; }
	100% { bottom: -200%; }
}


/* -------------------------------------------
	top_links
---------------------------------------------- */
.top_links { overflow: hidden; position: relative; padding: 100px 0; }
.top_links .container { padding-left: 80px; padding-right: 80px; max-width: 1320px; }
.top_links_column { display: flex; align-items: flex-start; flex-wrap: wrap; margin: 0 calc((20 / 1320) * -100%); }
.top_links_column > a { display: block; margin: 0 calc((20 / 1360) * 100%); width: calc(25% - ((40 / 1360) * 100%)); box-shadow: 6px 6px 26px 0 rgba(0,0,0,.2); }
.top_links_column > a:hover { text-decoration: none; }
.top_links_column > a figure { font-size: 0; line-height: 0; position: relative; }
.top_links_column > a figure::before { box-sizing: border-box; border: 4px solid #e16d36; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; }
.top_links_column > a figure img { width: 100%; image-rendering: -webkit-optimize-contrast; }
.top_links_column > a figure figcaption { position: absolute; top: calc((16 / 300) * -100%); left: 0; width: calc((80 / 300) * 100%); z-index: +1; }
@media (min-width: 768px) {
.top_links_column > a:nth-of-type(n+5) { margin-top: calc((105 / 1360) * 100%); }
.top_links_column > a:nth-of-type(1),
.top_links_column > a:nth-of-type(3) { margin-top: calc((50 / 1360) * 100%); }
.top_links_column > a:nth-of-type(6),
.top_links_column > a:nth-of-type(8),
.top_links_column > a:nth-of-type(10),
.top_links_column > a:nth-of-type(12) { margin-top: calc((55 / 1360) * 100%); }
}
@media (hover: hover) {
	.top_links_column > a figure::before { transition: opacity .5s ease; }
	.top_links_column > a:hover figure::before { opacity: 1; }
}
@media only screen and (max-width: 767px) {
.top_links { padding: 50px 0 60px 0; }
.top_links .container { padding-left: 25px; padding-right: 25px; max-width: none; }
.top_links_column { margin: 0 calc((26 / 750) * -100vw); }
.top_links_column > a { margin: 0 calc((26 / 750) * 100vw); width: calc(50% - ((52 / 750) * 100vw)); }
.top_links_column > a:nth-of-type(even) { margin-top: calc((60 / 750) * 100vw); }
}