@charset "UTF-8";



/* common
-----------------------------------------------*/


/* topics_tab
-----------------------------------------------*/
ul#topics_tab{
	max-width:calc(1280px - 2em - 2px);
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin:0 auto 30px;
	padding:0;
	text-align:center;
}
ul#topics_tab li{
	width:calc(20% - 5px);
	display: flex;
	align-items: stretch;
	justify-content: center;
	margin:0 2px;
}
ul#topics_tab li:nth-child(-n+5){
	margin-bottom:10px;
}
ul#topics_tab li.nav10 {display;none;}
ul#topics_tab li a{
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	transition:all 0.3s ease-out;
}


/* school_detail_page */

ul#topics_tab li a{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	padding:10px 0;
	text-align:center;
}
ul#topics_tab li a:hover{
	color:#fff;
	background-color:#ff6400;
}
@media screen and (max-width:820px){
	ul#topics_tab li{
		width:calc(33.33% - 5px);
	}
	ul#topics_tab li:nth-child(-n+4){
		width:calc(25% - 5px);
	}
	ul#topics_tab li:nth-child(-n+7){
		margin-bottom:10px;
	}
}
@media screen and (max-width:640px){
	ul#topics_tab {
		padding:0;
		border-radius: 20px;
		-webkit-border-radius: 20px;
		-moz-border-radius: 20px;
		-ms-border-radius: 20px;
	}
}
@media screen and (max-width:540px){
	ul#topics_tab li:nth-child(-n+4){
		width:calc(33.33% - 5px);
	}
	ul#topics_tab li:nth-child(-n+9){
		margin-bottom:10px;
	}
}
@media screen and (max-width:480px){
	ul#topics_tab li {
		font-size:14px;
	}
}
@media screen and (max-width:420px){
	ul#topics_tab li {
		font-size:12px;
	}
}


/* topics_list
-----------------------------------------------*/
dl.topics_list{
	max-width:1280px;
	display:none;
	margin:-10px auto 60px;
}
dl.topics_list.show{
	display:block;
}
dl.topics_list dt,
dl.topics_list dd{
	margin-top:10px;
	padding-top:10px;
	border-top:1px #ccc solid;
}
dl.topics_list dt{
	width:22em;
	position:relative;
	padding-right:1em;
	background-color:transparent!important;
}
dl.topics_list dd{width:calc(100% - 23em);}

dl.list04 dt:after,
dl.topics_list dt:after,
body#topics.category_support_edu div#pickup_link_list ul.list_thumb li span.photo:after,
body#topics.category_support_job div#pickup_link_list ul.list_thumb li span.photo:after{
	width:10em;
	position:absolute;
	top:10px;
	right:1em;
	display:block;
	
	color:#fff;
	text-align:center;
	border-radius:3px;
}
dt.cate_mirai_club:after{content:"未来クラブ";background-color:#43a0da;}
dt.cate_matching:after  {content:"出会いサポート";background-color:#ff7882;}
dt.cate_marriage:after  {content:"結婚応援カード";background-color:#ff8200;}
dt.cate_family_support:after    {content:"子育て家族応援";background-color:#30ac9c;}
dt.cate_other:after     {content:"お知らせ";background-color:#1968b7;}

body#topics div#pickup_link_list ul.list_thumb li{
	background:none;
}
body#topics.category_support_edu div#pickup_link_list ul.list_thumb li span.photo:after,
body#topics.category_support_job div#pickup_link_list ul.list_thumb li span.photo:after{
	top:auto;
	left:0;
	right:auto;
	bottom:0;
	border-radius:0;
	-webkit-border-radius:0;
	-mopz-border-radius:0;
	-ms-border-radius:0;
}

dl.topics_list dd a.link{
	min-height: 26px;
	display:block;
	margin-top:5px;
}

@media screen and (max-width:760px){
	dl.topics_list dt,
	dl.topics_list dd{
		width:100%;
	}
	dl.topics_list dt{
		margin-top: 10px;
		margin-bottom:5px;
		padding-top: 10px;
		padding-left:13.5em;
		padding-right: 0;
	}
	dl.topics_list dd{
		margin-top:0;
		padding-top:0;
		border-top:none;
	}
	dl.list04 dt::after,
	dl.topics_list dt::after {
		top:10px;
		left: 0;
		right: 0;
	}
}
@media screen and (max-width:540px){
	div#topics dl.topics_list dt,
	div#topics dl.topics_list dd,
	div#topics dl.topics_list dd a {
	  line-height:1.5;
	}
}
@media screen and (max-width:480px){
	dl.topics_list dt {
		margin-bottom:5px;
		font-size:12px;
	}
	dl.topics_list dd a.link {
		padding-top:3px;
		font-size:12px;
	}
}



/* list_thumb
-----------------------------------------------*/
ul.list_thumb {
	margin:0 auto;
	max-width:1960px;
}
ul.list_thumb li{
	width:calc(25% - 46px);
	position:relative;
	margin: 0 60px 60px 0;
}
ul.list_thumb li:nth-child(4n){
	margin-right:0;
}
ul.list_thumb li span.photo{
	width:100%;
	height:0;
	position:relative;
	display:block;
	margin:0 auto 15px;
	padding-top:60%;
	border-radius:10px;
	background-repeat:no-repeat;
	background-position:center center;
	background-color: #fff;
	background-size:100% auto;
	transition:all 0.3s linear;
	overflow:hidden;
}
ul.list_thumb li a:hover span.photo{
	background-size:110% auto;
}
div#pickup_link_list ul.list_thumb li span.photo:after{
	width:12em;
	position:absolute;
	left:0;
	bottom:0;
	display:block;
	color:#fff;
	text-align:center;
}
ul.list_thumb li.cate_mirai_club     span.photo:after{content:"未来クラブ";background-color:#43a0da;}
ul.list_thumb li.cate_matching       span.photo:after{content:"出会いサポート";background-color:#ff7882;}
ul.list_thumb li.cate_marriage       span.photo:after{content:"結婚応援カード";background-color:#ff8200;}
ul.list_thumb li.cate_family_support span.photo:after{content:"とちぎ子育て家族応援";background-color:#30ac9c;}

ul li span.name{
	/*min-height:3.2em;*/
	position: relative;
	display:block;
	margin-bottom:15px;
}
ul li span.name:hover::before{
	background-color: #ff6400;
}

@media screen and (max-width:1260px){
	ul.list_thumb li{
		width:calc(33.33% - 40px);
	}
	ul.list_thumb li:nth-child(4n){
		margin-right:60px;
	}
	ul.list_thumb li:nth-child(3n){
		margin-right:0;
	}
}
@media screen and (max-width:960px){
	ul.list_thumb li{
		width:calc(33.3% - 20px);
		margin-right:30px;
		margin-bottom:30px;
	}
	ul.list_thumb li:nth-child(4n){
		margin-right:30px;
	}
}

@media screen and (max-width:716px){
	div#pickup_link_list ul.list_thumb li span.photo:after{
		font-size:14px;
	}
}
@media screen and (max-width:350px){
	ul.list_thumb li{
		width:100%;
	}
	ul.list_thumb li{
		margin-right:0;
	}
	ul.list_thumb li span.name {
		min-height: 0;
		font-size: 14px;
	}
}



/* pick_up and list_thumb
-----------------------------------------------*/
div#pick_up ul.list_thumb li,
div#pick_up_schedule ul.list_thumb li{
	width:calc(33.33% - 40px);
	margin-right:60px;
}
div#pick_up ul.list_thumb li:nth-child(3n),
div#pick_up_schedule ul.list_thumb li:nth-child(3n){
	margin-right:0;
}


/* gallery
-----------------------------------------------*/
ul.gallery{
	margin-top:60px;
}
ul.gallery li{
	max-width:200px;
	margin:0 15px 20px 0;
}
ul.gallery li:nth-child(6n){
	margin-right:0;
}
ul.gallery li figure{
	margin-bottom:5px;
}
@media screen and (max-width:1416px){
	ul.gallery li:nth-child(6n){
		margin-right:15px;
	}
}
@media screen and (max-width:716px){
	ul.gallery li{
		width:calc(33.33% - 6.66px);
		margin-right:10px;
		font-size:12px;
	}
	ul.gallery li:nth-child(3n){
		margin-right:0;
	}
	ul.gallery li:nth-child(6n){
		margin-right:0;
	}
}
@media screen and (max-width:350px){
	ul.gallery li{
		width:calc(50% - 5px);
	}
	ul.gallery li:nth-child(3n),
	ul.gallery li:nth-child(6n){
		margin-right:10px;
	}
	ul.gallery li:nth-child(2n){
		margin-right:0px;
	}
}


/* pager
-----------------------------------------------*/
ul.pager{
	width:auto;
	padding:30px 0 0 0;
	border-top:1px #ccc solid;
}
ul.pager li{
	min-width:4em;
	margin:0 10px 10px 0;
}
ul.pager li a:not(.btn),
ul.pager li span:not(.btn){
	width: calc(100% - 30px);
	display:block;
	margin:0 auto;
	padding:10px 15px;
	color:#fff;
	text-align:center;
	border-radius:30px;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	-ms-border-radius:30px;
	background:none!important;
	background-color:#1968b7!important;
	transition:all 0.3s linear;
}
ul.pager li.next a,
ul.pager li.prev a{
	width:calc(8em + 32px);
	display:block;
}
ul.pager li a:not(.btn):hover,
ul.num  li a:not(.btn):hover{
	background-color:orange!important;
}
ul.pager li span:not(.btn){
	color:#646464;
	background-color:#ddd;
}
ul.num li.pageCurrent,
ul.num li a{
	width:3em;
	display:inline-block;
	margin-right:5px;
	padding:0.7em 0;
	color:#fff;
	text-align:center;
	border-radius:1.5em;
	background-color:#1968b7;
}
ul.num li.pageCurrent{
	color:#969696;
	background-color:#fff;
}


/* sponsorship_list
-----------------------------------------------*/
ul.list_thumb,
#sponsorship_list ul.list_thumb{
	margin-bottom:30px;
	letter-spacing:-0.4em;
}
ul.list_thumb li,
#sponsorship_list ul.list_thumb li{
	width:calc(33.33% - 20px);
	min-height:300px;
	display:inline-block;
	*display:inline;
	position:relative;
	margin: 10px 30px 10px 0;
	padding:0;
	vertical-align:top;
	letter-spacing:normal;
	border-radius: 5px;
	zoom:1;
	background-color:#fff;
}
ul.list_thumb li:nth-child(3n),
#sponsorship_list ul.list_thumb li:nth-child(3n){
	margin-right:0;
}
ul.list_thumb li span.date,
#sponsorship_list ul.list_thumb li span.date{
	display:block;
	width:100%;
	margin-bottom:15px;
	color:#969696;
	font-size:12px;
}
div#pickup_link_list ul.list_thumb li p.date{
	margin-bottom:0;
}
ul.list_thumb li p.genre,
#sponsorship_list ul.list_thumb li p.genre{
	display:inline-block;
	margin-bottom:5px;
}

ul.list_thumb li p.genre span,
#sponsorship_list ul.list_thumb li p.genre span{
	display:inline-block;
	margin:0 5px 5px 0;
	padding:0 15px;
	color:#fff;
	font-size:16px;
	text-align:center;
	border-radius:15px;
	background-color:#ff6464;
}

ul.list_thumb li p.add,
#sponsorship_list ul.list_thumb li p.add{
	margin-bottom:15px;
	font-size:14px;
}
ul.list_thumb li p.benefit,
#sponsorship_list ul.list_thumb li p.benefit{
	width:100%;
	padding:5px 20px;
	color:#fff;
	font-size:16px;
	font-weight:bold;
	text-align:center;
	border-radius:15px;
	background-color:#005731;
}
ul.list_thumb li p a,
#sponsorship_list ul.list_thumb li p a{
	display:block;
	margin-bottom: 5px;
	padding-top:calc(210px + 15px);
	font-weight: bold;
	background-repeat:no-repeat;
	background-position:top center;
    background-size: auto 210px;
	overflow: visible;
}

/* new icon */
ul.list_thumb li p a img.new,
#sponsorship_list ul.list_thumb li p a img.new{
	position:relative;
	top:-30px;
	left:280px;
	margin: -42px 0 0 -65px;
	z-index:99999;
}
ul.list_thumb li.new:before{
	width:25%;
	content:"";
	position:absolute;
	top:-15px;
	right:-15px;
	display:block;
	padding-top:calc(25%*120/88);
	animation:3s fuwafuwa ease infinite;
	background:url(../img/icon_new.png) no-repeat center center / 100% auto;
	z-index:2;
}
@keyframes fuwafuwa{
  0%   {top:-15px;}
  50%  {top:-25px;}
  100% {top:-15px;}
}
dl.topics_list dd.new:before{
	content:"NEW";
	margin-right:15px;
	color:#ff0000;
	font-weight:bold;
}


#topics_list ul.list_thumb li p.btn,
#sponsorship_list ul.list_thumb li p.btn{
	width:100%;
	margin:15px auto 0;
}
#topics_list ul.list_thumb li p a.btn,
#sponsorship_list ul.list_thumb li p a.btn{
	min-height:auto;
	padding-top:0.75em!important;
}
@media only print, only screen and (min-width: 641px){
	#topics_list ul.list_thumb li p a:hover,
	#sponsorship_list ul.list_thumb li p a:hover{
	    opacity:0.50;
	    filter: alpha(opacity=50);
	    transition: all 0.3s;
	}
	#topics_list ul.list_thumb li p a.btn:hover,
	#sponsorship_list ul.list_thumb li p a.btn:hover{
	    opacity:1.0;
	    filter: alpha(opacity=100);
	    transition: all 0s;
	}
}
@media only screen and (max-width: 960px){
	#topics_list ul.list_thumb,
	#sponsorship_list ul.list_thumb{
		text-align:center;
	}
}
@media screen and (max-width: 760px){
	ul.list_thumb li,
	#sponsorship_list ul.list_thumb li{
		min-height:0;
	}
}
@media screen and (max-width: 716px){
	ul.list_thumb li,
	#sponsorship_list ul.list_thumb li{
		width:calc(33.33% - 10px);
		margin-right:15px;
	}
}
@media screen and (max-width: 540px){
	ul.list_thumb li,
	#sponsorship_list ul.list_thumb li{
		width:100%;
		clear:both;
		margin:0px 0 10px;
		padding-top:0;
		border-bottom:1px #ccc solid;
	}
	ul.list_thumb li:last-child,
	#sponsorship_list ul.list_thumb li:last-child{
		border-bottom:none;
		overflow:visible;
	}
	ul.list_thumb li span.photo,
	#sponsorship_list ul.list_thumb li span.photo{
		width:30%;
		float:left;
		margin-right:15px;
		padding-top: calc(60%*0.3);
		overflow:visible;
	}
	ul.list_thumb li span.name,
	#sponsorship_list ul.list_thumb li span.name{
		margin-top:1.7em;
	}
	ul.list_thumb li p.date,
	#sponsorship_list ul.list_thumb li p.date{
		text-align:left;
	}
	ul.list_thumb li span.photo::after,
	div#pickup_link_list ul.list_thumb li span.photo::after {
		height:1.7em;
		top:0;
		left: calc(100% + 15px);
		bottom:auto;
		font-size: 12px;
	}
	ul.list_thumb li.new::before {
		width: 10%;
		top:0;
		padding-top: calc(10%*120/88);
  	
}