@charset "UTF-8";
@import "reset5.css";
@import "animate.css";

/* !Links */
a { cursor: pointer }
a:link { color: #171717; text-decoration: none; }
a:visited { color: #171717; text-decoration: none }
a:hover { color: #a7a7a7; text-decoration: none; }
a:active { color: #000; text-decoration: none }
a.nb:link { border-bottom: none }

.contents { color:#171717; line-height:1; padding: 0; position: relative; text-align: center; font-family: neue-haas-grotesk-text, "Helvetica Neue", Helvetica, Arial, noto-sans-cjk-jp, "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif !important; font-size: 15px; letter-spacing: 0.08em; line-height: 1; font-weight: 400; -webkit-font-smoothing: antialiased;
padding: 5.8vw 5.8vw 11.6vw; z-index: 0 }
.contents .contents-inner { position: relative; margin: 95px auto 0; max-width: 1180px }
.contents .contents-inner2 { position: relative; margin: 0 auto; max-width: 1180px }

#pickup {}
#pickup .contents .gra { position: absolute; left: 0; top: 125px; z-index: 0 }
#pickup .contents .btit { font-size: 42px; line-height: 1em; padding-bottom: 0.5em; }
#pickup .contents .btit span.ja { font-size: 16px; display: block; color: #f9452d }
#pickup .contents .cate_nav { font-size:0.75rem; margin-top: 2em; padding: 0 20px; display: flex; justify-content: space-between; }
#pickup .contents .cate_nav h3 { font-size: 1.125rem; }
#pickup .contents .cate_nav a { background: url(/ja/images/icon_ora_off.svg) top left / 15px no-repeat; padding: 0 20px 20px 20px; color: #444; line-height: 1rem; }
#pickup .contents .cate_nav a:hover, #pickup .contents .cate_nav a.current { background: url(/ja/images/icon_ora.svg) top left / 15px no-repeat; color: #ff8500; font-weight: 600; }
#pickup .contents .puWrap { margin-top: 2em; }
#pickup .contents .puWrap ul { list-style: none; }
#pickup .contents .puWrap li { float: left; width: 33.33%; text-align: left }
#pickup .contents .puWrap li a { display: block; padding: 20px }
#pickup .contents .puWrap li a .thumb { border-radius: 16px; overflow: hidden; box-shadow: 1px 1px 3px 1px rgb(0 0 0 / 10%); margin-bottom: 1em; }
#pickup .contents .puWrap li a h4 { padding-top: 0.5em; line-height: 1.5 }

/* add icons */
a .icon-brands, a .icon-category { line-height: 1rem; padding: 0 5px !important; display: inline-block !important; color: #fff; font-size: 0.625rem; margin-right: 5px; }
a .icon-news2 { background-color: #f9452e; border: 0.5px #fff solid; }
a .icon-event { background-color: #1bbcfe; }
a .icon-bell, a .icon-none, a .icon-bbc, a .icon-bms, a .icon-cell, a .icon-pocke, a .icon-soleil, a .icon-bim, a .icon-ctcfc, a .icon-tbnc, a .icon-horizonone { background: #999; }

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

	.contents { font-size: 13px; letter-spacing: 0.08em; padding: 5.8vw 5.8vw 11.6vw; }
	.contents .contents-inner { position: relative; margin: 50px auto 0; max-width: inherit }

	#pickup .contents .gra { position: absolute; left: 0; top: 60px; width: 75%; z-index: 0 }
	#pickup .contents .btit { font-size: 32px; line-height: 1em; padding-bottom: 0.25em; }
	#pickup .contents .btit span.ja { font-size: 12px; display: block; color: #fff }
	#pickup .contents p { line-height: 2em; text-align: left; }
	#pickup .contents .cate_nav { padding: 0 10px; flex-direction: column-reverse; margin-top: 0; }
	#pickup .contents .cate_nav h3 { }
	#pickup .contents .cate_nav span { line-height: 2rem; text-align: center; margin-bottom: 1.5rem; }
	#pickup .contents .puWrap { margin-top: 2em }
	#pickup .contents .puWrap ul {  }
	#pickup .contents .puWrap li { float: none; width: 100%; text-align: left }
	#pickup .contents .puWrap li a { display: block; padding: 10px }
	#pickup .contents .puWrap li a .thumb { border-radius: 16px; overflow: hidden; margin-bottom: 1em; }
	#pickup .contents .puWrap li a h4 { padding-top: 0.5em; line-height: 1.5 }

}

.action-top {}
.action-top .sec-inner { padding: 0 }
.action-top .sec-inner .act-head { position: relative; min-height: 300px; overflow: hidden }
.action-top .sec-inner .act-head .gra { position: absolute; left: 0; top: 0 }
.action-top .sec-inner .btit { padding-top: 5.8vw }
.action-top .sec-inner .btit span.ja { color: #7c61ff }
.action-top .sec-inner .read { font-size: 16px; font-weight: 500; letter-spacing: 0.36em }
.action-top .sec-inner .act-body {}
.action-top .sec-inner .act-body .action { float: left; width: 100% }
.action-top .sec-inner .act-body .action .act-inner { padding: 10px 20px 8.7vw; }
.action-top .sec-inner .act-body .action .act-inner h3 { margin-bottom: 1em }
.action-top .sec-inner .act-body .action .act-inner li { float: left; width: 33.3%; text-align: left; line-height: 1.0; margin-bottom: 1.5rem; }
.action-top .sec-inner .act-body .action .act-inner li .act { padding: 20px 20px 0 }
.action-top .sec-inner .act-body .action .act-inner li .act a { display: block; border-radius: 16px; overflow: hidden; background: #f7f7f7; box-shadow: 1px 2px 7px 1px rgb(0 0 0 / 10%) }
.action-top .sec-inner .act-body .action .act-inner li .act .thumb { position: relative }
.action-top .sec-inner .act-body .action .act-inner li .act .thumb2 { position: relative; width: 100%; height: 226px; }
.action-top .sec-inner .act-body .action .act-inner li .act .thumb2 img { height: 226px; object-fit: cover; }
.action-top .sec-inner .act-body .action .act-inner li .act .thumb .cat { position: absolute; left: 16px; top: 0; }
.action-top .sec-inner .act-body .action .act-inner li .act .thumb2 .cat { position: absolute; left: 16px; top: 0; }
.cat1 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #00b48c }
.cat2 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #FFCC00 }
.cat3 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #00c676 }
.cat4 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #FF800E }
.cat5 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #f70f3b }
.cat6 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #004d8a }
.cat7 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #d8063b }
.cat8 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #3cb371 }
.cat9 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #f66f96 }
.cat0 { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #55b9ec }
.area { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff;background: #000; margin-left: 4px }
.action-top .sec-inner .act-body .action .act-inner li .act a h4 { padding: 16px; min-height: 67px; }
.action-top .sec-inner .act-body .action .act-inner .top-btn { width: 50%; margin: 0 auto; }
.action-top .sec-inner .act-body .action .act-inner .top-btn a { background: #f7f7f7 }
.s_date { font-size: 0.75rem; margin-bottom: 0.5rem; }
.flex_clm { display: flex; flex-wrap: wrap; max-height: 1200px; margin-bottom: 3rem; }
.top-btn a { position: relative; display: block; padding: 1em; background: #fff; border-radius: 20px; box-shadow: 1px 1px 1px 1px #efefef; }
.lead_p { margin-bottom: 3rem; }

span[class^="jt_cat_"] { padding: 0.4em; font-weight: 500; font-size: 10px; letter-spacing: 0; color: #fff; }
.jt_cat_Spot { background: #00c676; }
.jt_cat_Gourmet { background: #ff800e; }
.jt_cat_Naka-no-hito { background: #004d8a; }
.jt_cat_Bell24 { background: #d8063b; }
.jt_cat_Kosodate { background: #f66f96; }
.jt_cat_Work-Style { background: #3cb371; }
.jt_cat_special { background: #ffcc00; }

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

	.action-top { margin-bottom: 4rem; }
	.action-top .sec-inner { padding: 0 }
	.action-top .sec-inner .act-head { position: relative; min-height: 180px; }
	.action-top .sec-inner .act-head .gra { position: absolute; left: 0; top: 0; width: auto; height: 140px }
	.action-top .sec-inner .read { position: relative; font-size: 14px; font-weight: 500; letter-spacing: 0.2em }
	.action-top .sec-inner .act-body .action { float: none; width: 100% }
	.action-top .sec-inner .act-body .action .act-inner { padding: 0; border-right: none }
	.action-top .sec-inner .act-body .action .act-inner:last-child { border-left: none; border-top: none; }
	.action-top .sec-inner .act-body .action .act-inner h3 { margin-bottom: 1em }
	.action-top .sec-inner .act-body .action .act-inner ul { margin: 0 -10px }
	.action-top .sec-inner .act-body .action .act-inner li { float: none; width: 100%; text-align: left }
	.action-top .sec-inner .act-body .action .act-inner li .act { padding: 10px 10px 0 }
	.action-top .sec-inner .act-body .action .act-inner li .act a { border-radius: 12px; }
	.action-top .sec-inner .act-body .action .act-inner li .act .thumb .cat { position: absolute; left: 12px; top: 0; }
	.action-top .sec-inner .act-body .action .act-inner .top-btn { width: 100% }
	.action-top .sec-inner .act-body .action .act-inner .top-btn.nw { width: 66.66% }
	.action-top .sec-inner .act-body .action .act-inner li .act a h4 { padding: 16px; min-height: auto; }
	.flex_clm { flex-direction: column; flex-wrap: nowrap; max-height: initial; }
}