@charset "utf-8";
/* ===================================================
	Home CSS
====================================================== */
/* ---------------------------------------------------
loading
------------------------------------------------------ */
@keyframes upDown {
	0% { top: 0;}
	100% { top: 3px;}
}
@keyframes fadeInOut {
	0% { opacity: 0.5;}
	100% { opacity: 1;}
}

#loading { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #fff;}
#loading div { animation: fadeInOut 1.5s ease-in-out infinite alternate; text-align: center;}
#loading.load_start { opacity: 1; transition: opacity 1s;}
#loading.load_end { opacity: 0; pointer-events: none;}

#loading .img { width: 71px; height: 63px; margin: 0 auto; position: relative;}
#loading .img .load_train { position: relative; animation: upDown .2s steps(2) infinite alternate;}
#loading .img .load_line { position: absolute; bottom: 0; left: 0;}
#loading p { margin: 10px 0 0; color: #d1bb72; font-size: 14px; letter-spacing: .1em; text-align: center;}


/* ---------------------------------------------------
Header
------------------------------------------------------ */
@keyframes fix_nav {
	0% { opacity: 0; transform:translateY(-100%);}
	25% { opacity: 1; }
	100% { transform: translateY(0);}
}
@keyframes close_nav {
	0% { transform: translateY(0);}
	100% { transform: translateY(-100%);}
}

#g_header.fixed { animation: fix_nav 1s both;}
#g_header.close_nav { animation: close_nav .7s both;}


/* ---------------------------------------------------
main_img
------------------------------------------------------ */
#main_img { padding: 0;}
#main_img .slick_main { height: 100vh; min-height: 600px; margin: 0; position: relative; z-index: 0;}
#main_img .slick_main::after {
	content: ''; width: 100%; height: 110px; position: absolute; bottom: 0; left: 0; z-index: 10;
	background: -moz-linear-gradient(top,	rgba(0,0,0,0) 0%, rgba(0,0,0,0.5) 100%);
	background: -webkit-linear-gradient(top,	rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	background: linear-gradient(to bottom,	rgba(0,0,0,0) 0%,rgba(0,0,0,0.5) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#80000000',GradientType=0 );
}
#main_img .slick_main div { vertical-align: bottom; position: relative;}
#main_img .slick_main .ofi { width: 100%; height: 100vh; min-height: 600px;}
#main_img .slick_main p,
#main_img .slick_main h1 { position: absolute; top: 305px; left: 145px; color: #fff; font-size: 30px; letter-spacing: .2em;}
#main_img .slick-dots { display: inline-block; width: auto; position: absolute; bottom: 40px; right: 25px; z-index: 20;}


/* scroll */
@keyframes scroll_anim {
	0% { bottom: 0; top: auto; height: 15px;}
	10% { bottom: 0%; top: auto; height: 0px;}
	10.1% { bottom: auto; top: 0; height: 0px;}
	50% { bottom: auto; top: 0; height: 100%;}
	50.1% { bottom: 0; top: auto; height: 100%;}
	100% { bottom: 0; top: auto; height: 15px;}
}

#main_img .scroll { padding: 5px 0 115px 5px; position: absolute; left: 20px; bottom: 0; z-index: 10; border-left: 1px solid rgba(255,255,255,0.2); color: #fff; font-size: 13px; letter-spacing: 3px; backface-visibility: hidden; -webkit-backface-visibility: hidden; writing-mode: vertical-rl; transition: opacity 0.5s;}
#main_img .scroll::before { content: ''; width: 1px; position: absolute; bottom: 0; left: -1px; background: #fff; animation: scroll_anim 3s cubic-bezier(0.77, 0, 0.175, 1) infinite;}


@media screen and (max-width: 600px) {
	#main_img .slick_main,
	#main_img .slick_main .ofi { min-height: 400px;}
	#main_img .slick_main p,
	#main_img .slick_main h1 { top: 35%; left: 6vw; font-size: 20px;}
	#main_img .slick-dots { bottom: 25px; right: 20px;}

	#main_img .scroll { padding: 5px 0 60px 5px;}
}


/* ---------------------------------------------------
movie&info
------------------------------------------------------ */
#contents_wrap { padding: 60px 0 0;}

#movie { padding: 0 0 40px;}
#movie .movie_play { display: block; height: 370px; position: relative; overflow: hidden;}
#movie .movie_play .ofi { width: 100%; height: 100%; transition: transform .7s, opacity .7s;}
#movie .movie_play p { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: #fff; font-size: 30px; text-align: center;}
#movie .movie_play p img { width: 70px; margin: 0 0 5px;}
#movie .movie_play p span { font-size: 14px;}

#movie .movie_modal { display: none; width:100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 999; text-align: center; background: #000; overflow: hidden;}
#movie #movie_inner { position: static; top: 0; left: 0; width: 100% !important; height: calc(100vh - 120px); margin: 60px 0; overflow: hidden;}
#movie .movie_close { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 30px; height: 30px; position: fixed; top: 20px; right: 30px; z-index: 10;}
#movie .movie_close span { width: 30px; height: 2px; background: #fff;}
#movie .movie_close span:first-child { margin: 0 0 -2px; transform: rotate(45deg);}
#movie .movie_close span:last-child { transform: rotate(-45deg);}

#info { padding: 0 0 80px;}
#info dl { display: flex; align-items: center; padding: 20px 35px; background: #f2f2f2;}
#info dl + dl { margin: 10px 0 0;}
#info dt { flex-shrink: 0; width: 190px; background: #fff; border-radius: 15px / 50%; font-size: 14px; text-align: center;}
#info dd { flex-grow: 1; margin: 0 0 0 40px;}
#info .attention { background: #f9e7e4; color: #cc4d38;}
#info .attention dt { background: #cc4d38; color: #fff;}
#info .attention a { color: #cc4d38;}


@media screen and (hover: hover) {
	#movie .movie_play:hover { opacity: 1;}
	#movie .movie_play:hover .ofi { opacity: 0.7; transform: scale(1.03);}
}
@media screen and (max-width: 600px) {
	#movie { padding-top: 50px;}
	#movie .movie_play { height: 44vw; min-height: 200px;}
	#movie .movie_play p { font-size: 20px;}
	#movie .movie_play p img { width: 40px;}
	#movie .movie_play p span { font-size: 12px;}

	#info { max-width: 100%; padding-bottom: 60px;}
	#info dl { padding: 15px 4%;}
	#info dl + dl { margin-top: 1px;}
	#info dt { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%;}
	#info dt::before { content: '！';}
	#info dd { margin: 0 0 0 20px;}
}


/* ---------------------------------------------------
link_img
------------------------------------------------------ */
.link_img { display: flex; justify-content: space-between; line-height: 1.6;}
.link_img a { display: block; width: 100%; height: 100%; position: relative; background: #000; overflow: hidden;}
.link_img .ofi { width: 100%; height: 100%; transition: transform .7s, opacity .7s;}
.link_img div { display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; position: absolute; top: 0; left: 0; color: #fff;}
.link_img div .sub { font-size: 25px; opacity: .5;}
.link_img div .main { padding: 0 0 0 30px; margin: 0 0 10px; background: url(../img/icon_link_arrow_w.svg) no-repeat left calc((1.6em - 23px) / 2); font-size: 35px;}
.link_img div .sub + .main { margin: 5px 0 0;}
.link_img div .main + p { margin: 10px 0 0;}
.link_img div .main span { font-size: 14px; vertical-align:30%;}

@media screen and (hover: hover) {
	.link_img a:hover { opacity: 1;}
	.link_img a:hover .ofi { opacity: .7; transform: scale(1.03);}
}
@media screen and (max-width: 600px) {
	.link_img { display: block;}
	.link_img li { width: 100% !important; margin: 1px 0 0;}
	.link_img div { justify-content: flex-end;}
	.link_img div .sub { font-size: 13px;}
	.link_img div .main { padding-left: 25px; background-position: left calc((1.6em - 20px) / 2); background-size: 20px; font-size: 22px;}
	.link_img div .sub + .main { margin: 0;}
	.link_img div .main + p { margin: 5px 0 0;}
	.link_img div .main span { vertical-align:10%;}
}



/* ---------------------------------------------------
tit_v
------------------------------------------------------ */
.tit_v { display: flex; flex-direction: column; align-items: center; font-size: 13px;}
.tit_v .main { margin: 0 0 5px; font-size: 40px; writing-mode: vertical-rl;}
.tit_v + p { margin: 20px 0 50px; text-align: center;}

@media screen and (max-width: 600px) {
	.tit_v { font-size: 12px;}
	.tit_v .main { font-size: 24px;}
	.tit_v + p { margin: 15px 0 30px;}
}


/* ---------------------------------------------------
sec01
------------------------------------------------------ */
#sec01 h2 { margin: 0 0 60px;}
#sec01 .link_img { flex-wrap: wrap;}
#sec01 .link_img li { width: calc((100% - 1px) / 3); height: 565px;}
#sec01 .link_img li:first-child { width: 100%; height: 650px; margin: 0 0 1px;}
#sec01 .link_img div { padding: 0 0 0 100px;}

@media screen and (max-width: 600px) {
	#sec01 h2 { margin-bottom: 30px;}
	#sec01 .link_img li { height: 71vw !important; min-height: 250px;}
	#sec01 .link_img li:first-child { margin: 0;}
	#sec01 .link_img div { padding: 0 0 5% 4vw;}
}


/* ---------------------------------------------------
sec02
------------------------------------------------------ */
#sec02 { padding: 70px 0 0; background: #f3ede0;}
#sec02 .tit_v { padding-bottom: 50px; }
#sec02 .link_img li { /*width: calc((100% - 1px) / 2);*/ width: 100%; height: 650px;}
#sec02 .link_img div { padding: 0 0 0 100px;}
#sec02 .link_img div .main { font-size: 30px;}

@media screen and (max-width: 600px) {
	#sec02 { padding-top: 30px;}
	#sec02 .link_img li { height: 71vw; min-height: 450px;}
	#sec02 .link_img div { padding: 0 0 5% 4vw;}
	#sec02 .link_img div .main { font-size: 22px;}
}


/* ---------------------------------------------------
sec03
------------------------------------------------------ */
#sec03 { padding: 70px 0 0;}
#sec03 .link_img { flex-wrap: wrap;}
#sec03 .link_img li { width: calc((100% - 2px) / 3); height: 100%; margin: 1px 0 0;}
#sec03 .link_img div { justify-content: flex-end; padding: 0 0 30px 40px;}
#sec03 .link_img div .main { font-size: 25px; background: url(../img/icon_link_arrow_w.svg) no-repeat left calc((1.4em - 23px) / 2); line-height: 1.4em;}
#sec03 .link_img div .main span { font-size: 16px;}

@media screen and (max-width: 600px) {
	#sec03 { padding-top: 30px;}
	#sec03 .link_img li { height: 63vw; min-height: 230px;}
	#sec03 .link_img li:nth-child(n + 7) .main span { display: inline-block;}
	#sec03 .link_img div { padding: 0 0 5% 4vw;}
	#sec03 .link_img div .main { font-size: 22px;}
	#sec03 .link_img div .main span { display: block; font-size: 14px;}
}


/* ---------------------------------------------------
sec04
------------------------------------------------------ */
#sec04 { padding: 95px 0 85px; background: #f3ede0;}
#sec04 h2 { margin: 0 0 40px;}
#ranking_489ban { display: flex; justify-content: space-between; margin: 0 0 55px;}
#ranking_489ban .PlanView { display: flex; flex-direction: column; width: 375px; max-width: calc((100% - 60px) / 3);}
#ranking_489ban .rank_no { margin: 0 0 20px; color: #977e1e; font-size: 25px; text-align: center;}
#ranking_489ban .main_picture { width: 100%; height: 250px;}
#ranking_489ban .main_picture img { width: 100%; height: 100%; object-fit: cover;}
#ranking_489ban .explan { flex-grow: 1; padding: 20px 30px 40px; background: rgba(255, 255, 255, 0.7);}
#ranking_489ban .PlanView:nth-child(n+4),
#ranking_489ban .comment,
#ranking_489ban .pblist { display: none;}
#sec04 .cmn_btn { width: 600px; margin: 0 auto;}
#sec04 .cmn_btn li + li { margin: 8px 0 0;}
#sec04 .cmn_btn .cmn_btn_y { min-height: 75px; font-size: 18px;}
#sec04 .cmn_btn .cmn_btn_y img { width: 25px; margin: 0 8px 0 0;}
#sec04 .cmn_btn .cmn_btn_g { min-height: 60px;}

@media screen and (max-width: 600px) {
	#sec04 { padding: 50px 0;}
	#sec04 h2 { margin-bottom: 20px;}
	#ranking_489ban { display: block; margin: 0 0 25px;}
	#ranking_489ban .PlanView { width: auto; max-width: none;}
	#ranking_489ban .PlanView + .PlanView { margin: 30px 0 0;}
	#ranking_489ban .rank_no { margin-bottom: 10px; font-size: 22px;}
	#ranking_489ban .main_picture { height: 40vw; min-height: 175px;}
	#ranking_489ban .explan { padding: 15px;}
	#sec04 .cmn_btn { width: 100%;}
	#sec04 .cmn_btn .cmn_btn_y { min-height: 65px; font-size: 16px;}
	#sec04 .cmn_btn .cmn_btn_g { min-height: 50px;}
}


/* ---------------------------------------------------
sec05
------------------------------------------------------ */
#sec05 { padding: 80px 0 0;}
#sec05 h2 { margin: 0 0 45px; color: #93802a; font-size: 18px; text-align: center;}
#sec05 .link_img { flex-wrap: wrap;}
#sec05 .link_img li { width: calc((100% - 2px) / 3); height: 400px; margin: 10px 0 0;}
#sec05 .link_img li:nth-child(-n+2) { width: calc((100% - 10px) / 2); }
#sec05 .link_img div { justify-content: flex-end; padding: 0 0 40px 40px;}
#sec05 .link_img div .main { display: flex; font-size: 25px; background: url(../img/icon_link_arrow_w.svg) no-repeat left calc((1.2em - 23px) / 2); line-height: 1.2em;}
#sec05 .link_img div .main span { font-size: 16px; display: inline-block;}
#sec05 .link_img .dummy a { pointer-events: none;}
#sec05 .link_img .dummy .sub { opacity: 1; font-size: 18px;}
#sec05 .link_img .dummy .sub span { display: inline-block; margin: 0 0 0 5px; font-size: 13px;}
#sec05 .link_btn { padding: 65px 0; background: #f3ede0;}
#sec05 .link_btn ul { display: flex; justify-content: space-between;}
#sec05 .link_btn li { width: calc((100% - 30px) / 4);}
#sec05 .link_btn a { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px 0; background: rgba(255, 255, 255, 0.7); border-radius: 6px; line-height: 1.3; text-align: center;}
#sec05 .link_btn img { width: 42px; margin: 0 0 5px;}
#sec05 .link_btn span { flex-grow: 1; display: flex; align-items: center;}

@media screen and (max-width: 600px) {
	#sec05 { padding-top: 0;}
	#sec05 .link_img li { height: 58vw; min-height: 200px;}
	#sec05 .link_img li:first-child { margin-top: 0;}
	#sec05 .link_img div { padding: 0 0 5% 4vw;}
	#sec05 .link_img div .main { font-size: 22px;}
	#sec05 .link_img div .main span { display: block; font-size: 14px;}
	#sec05 .link_btn { padding: 50px 0;}
	#sec05 .link_btn ul { display: block;}
	#sec05 .link_btn li { width: 100%;}
	#sec05 .link_btn li + li { margin: 8px 0 0;}
	#sec05 .link_btn a { flex-direction: row; height: auto; padding: 15px; text-align: center;}
	#sec05 .link_btn a::after { content: ''; width: 10px; height: 15px; background: url(../img/icon_arrow_b.svg) no-repeat center center; background-size: 100%;}
	#sec05 .link_btn img { width: 30px; margin: 0 5px 0 0;}
}


/* ---------------------------------------------------
sec06
------------------------------------------------------ */
#sec06 { padding: 80px 0 85px;}
#sec06 h2 { margin: 0 0 55px;}
#sec06 .link_img { flex-wrap:wrap; justify-content: center; }
#sec06 .link_img li { height: auto; line-height: 1.4; margin: 1px 0.5px 0; }
#sec06 .link_img div { align-items: flex-end; padding: 0 65px 0 0;}
#sec06 .link_img div .main { padding: 0; background: none; font-size: 30px;}
#sec06 .news { padding: 80px 0 0;}
#sec06 .news h3 { margin: 0 0 45px; color: #93802a; font-size: 18px; text-align: center;}
#sec06 #feed ul { display: flex; flex-wrap: wrap; justify-content: space-between;}
#sec06 #feed ul::after { content: ''; width: 370px; max-width: calc((100% - 40px) / 3);}
#sec06 #feed li { width: 370px; max-width: calc((100% - 40px) / 3); margin: 0 0 40px; font-size: 14px;}
#sec06 #feed a { display: flex;}
#sec06 #feed a .img { flex-shrink: 0; width: 125px; height: 90px; margin: 0 20px 0 0;}
#sec06 #feed a .img .ofi { width: 100%; height: 100%;}
#sec06 #feed a .txt { line-height: 1.6;}
#sec06 #feed a span { display: block; margin: 0 0 5px; color: #977e1e; font-size: 12px;}

#sec06 .news_link { padding: 15px 0 0; text-align: center;}
#sec06 .news_link a { display: inline-block; padding: 0 5px 5px; position: relative; border-bottom: 1px solid #000;}
#sec06 .news_link a::before { content: ''; width: 20px; height: 1px; position: absolute; right: 100%; bottom: -1px; background: #fff;}

@media screen and (hover: hover) {
	#sec06 .news_link a:hover { opacity: 1;}
	#sec06 .news_link a:hover::before { animation: arrow_hover 1s;}
}

@media screen and (max-width: 600px) {
	#sec06 { padding-top: 0;}
    #sec06 h2 { margin-top: 55px }
	#sec06 { max-width: 100%; padding-bottom: 1px;}
	#sec06 .link_img li { height: auto; min-height: 196px;}
	#sec06 .link_img div { justify-content: center; padding-right: 4vw;}
    #sec06 .news { padding-top: 30px;}
	#sec06 #feed ul { display: block;}
	#sec06 #feed ul::after,
	#sec06 #feed li { width: auto; max-width: none;}
	#sec06 #feed li:not(last-child) { margin-bottom: 15px;}
	#sec06 #feed li:nth-child(n+5) { display: none;}
	#sec06 #feed a .img { margin-right: 10px;}
	#sec06 .news_link { padding: 25px 0 50px;}
}


/* ---------------------------------------------------
sec07
------------------------------------------------------ */
#sec07 { padding: 0 0 85px;}
#sec07 .link_img li { width: calc((100% - 1px) / 2); height: 340px; line-height: 1.4;}
#sec07 .link_img div { align-items: flex-end; padding: 0 65px 0 0;}
#sec07 .link_img div .main { padding: 0; background: none; font-size: 30px;}

@media screen and (max-width: 600px) {
	#sec07 { max-width: 100%; padding-bottom: 1px;}
	#sec07 .link_img li { height: 58vw; min-height: 200px;}
	#sec07 .link_img div { justify-content: center; padding-right: 4vw;}
	#sec07 .link_img div .main { font-size: 22px;}
}