@charset "utf-8";
/* childcare */

#startup.is-loaded .toptitleArea {
    opacity: 1;
    transition: opacity .4s linear 1s;}
#startup .captionArea, #su_menu .inner a, #startup #plan .container h2, #startup #voice .imageArea, #startup #info {
	position: relative;}
#startup .container{
    padding: 50px 0;}

/* イベントお知らせ */
#startup #su-event .eventList{
    column-gap: 3%;
	margin-bottom: 2em; 
	align-items: stretch;}
#startup #su-event .eventList li{
    width: calc(100% / 4);}
#startup #cck-event .eventList figure{
	margin:0;}
#startup #su-event .eventList .date{
    color: #4f4c4866;
    text-align: right;}
#startup #su-event .eventList .posttxt{
	margin-top: 1em;
    height: 100%;}
#startup #su-event .eventList .imageArea img{
	border: 0.8px solid #4f4c48;
	border-radius: 16px;}
#startup #su-event .eventList li a img{
	transition: all .4s ease-out;}
#startup #su-event .eventList li a:hover{
	transition: all .4s ease-in;
	& p {
		opacity:0.6;}
	& img {
		transform:scale(1.03);
		transform-origin: center;}}

/* 　創業支援関連お知らせ　*/
#startup #su-news{
    padding-bottom: 50px;}
#startup #su-news .container.whtbg {
    padding: 1.5em 3% 0;
	border-radius: 30px;}
#startup #su-news ul.newsList li {
	border-bottom: 1px dashed #4f4c48;
	padding-bottom: 1px;
	margin-bottom: 5px;}
#startup #su-news ul.newsList li:last-child{
	margin-bottom: 0;}
#startup #su-news ul.newsList li .date{ 
    padding-right: 1em;
    padding-left: .2em;}
#startup #su-news ul.newsList li .newicon{
	padding: 3px 1em;
	border-radius: 999px;
	margin-right: 4px;}

/* 　創業支援サービスについて　*/
#startup #about .flex { 
	column-gap: 5%;}
#startup #about .btnArea{
	margin-top: 1em;}
#startup #about .btnArea a.btn{
	position:relative;
	border-radius: 999px;}
#startup #about .btnArea a.btn:before{
    position: absolute;
    top: calc((100% - 8px) / 2);
    left: 10%;
    content: '';
    width: 8px;
    height: 8px;
    border: 0;
    border-bottom: solid 2px #fff;
    border-right: solid 2px #fff;
    transform: rotate(-45deg);
	transition:all .3s ease-in;}
#startup #about .btnArea a.btn:hover:before{
	transform:rotate(45deg);
	border-color:#8bcac8;
	transition:all .3s ease-in;}

/* 　創業応援プラン　*/
#startup #plan h2 span.squareicon{
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;}
#startup #plan .captionArea {
    margin: 2em 0 1.5em;
    line-height: 1.8;
    border-left: 5px solid #f4b474;
    padding: 1.2em 0 1.2em 3em;}
#startup #plan .container > .flex{
	align-items: stretch;
	justify-content: center;
	margin: 2em auto;
	column-gap: 5em;}
#startup #plan h3.title-m {
	margin:.5em auto 1em;
	padding: .5em 0;
    line-height: 1.2;}
#startup #plan li.liststyle-check-mark{
    border-bottom: 1px dashed #4f4c48;
    padding: 5px 5px 2px 10px;
	column-gap: .1em;}
#startup #plan #startup-plan, #startup #plan #leadiamember-plan{
	position:relative;
/* 	border: 2px solid #426f77; */
    border-radius: 30px;
    padding: 2em 5%;
	transition: all .2s ease-out;}
#startup #plan #startup-plan:hover, #startup #plan #leadiamember-plan:hover {
	transform:scale(1.04);
	transition: all .4s ease-out;}
#startup #plan #startup-plan span.drkbg, #startup #plan #leadiamember-plan span.drkbg{
	border-radius: 999px;
	width: 14.5em;
    margin: .3em auto;
    padding: 1px;}
#startup #plan #startup-plan .content-row > .content-inner.flex{
	align-items: flex-start;}
#startup #plan #startup-plan .content-row > .content-inner.flex .column-size--half .tline{
	border-top: 0.8px solid #426f77;
    padding-top: 4px;}
#startup #plan #leadiamember-plan > .center{
    width: fit-content;}
#startup #plan #leadiamember-plan img.lwa-logo{
	max-width: 265px;}

/* 利用方法・予約について */
#startup #reserve .content{
	background: url('https://c-room.jp/wp/wp-content/themes/croom/images/bk-front-childcare.png') no-repeat right top;
	background-size: contain;}
#startup #reserve .content ol.liststyle-number > li:before{
	border: 1px solid #4f4c48;}

#startup #info ul.flex{
    align-items: stretch;
    justify-content: center;
    gap: 5%;}
#startup #info li.column-size--half{
	padding: 2em 3%;}
#startup #info li.column-size--half h3{ 
	& img{ 
		margin-top: .5em;
		border: 0.8px solid #4f4c48;
		padding: .5em 8%;
        width: 100%;
		height: auto;}
	& img.FUK-Bloom{
        max-width: 350px;}
	& img.LEADIA{
        max-width: 450px;}
	& span.smaller{
		margin-right:0;}}
#startup #info li.column-size--half a:hover img, #startup #info li.column-size--half a:hover span.impact{
	opacity:0.6;}


@media only screen and (max-width: 960px) {
	#startup .container {
		padding: 50px 3%;}
	#startup #about .toptitleArea h2.title-l span{
		line-height:1;
		margin-bottom: .3em;}
	#startup #about .toptitleArea .imageArea{
		padding: 2em 2em 0;}
	#startup #about .btnArea .btn{
	    margin: 1em auto 0;}
	#startup #su-event .eventList{
		flex-wrap: wrap;
		flex-direction: row;
		gap: 1em;}
	#startup #su-event .eventList li {
		width: calc((100% - 1em) / 2);}
	#startup #su-event .eventList .posttxt{
		height: 100%;}
	#startup #su-news{
		padding: 0 3% 1em;}
	#startup #su-news .container.whtbg {
		padding: 2em 4% 0;}
	#startup #su-news ul.newsList li {
		padding-bottom: 9px;
		margin-bottom: 1em;}
	#startup #su-news ul.newsList li .posttxt{
		display:block;}
	#startup #plan .container h2.title-m{
		margin-bottom:6em;}
	#startup #plan h2 span.squareicon {
		top: 12em;}
	#startup #plan .captionArea{
		padding: .6em 0 .6em 1em;}
	#startup #plan li.liststyle-check-mark{
		display: inline-block; 
		padding: 8px 0 8px 10px;
        width: 100%;}
	#startup #plan .container > .flex{ 
		row-gap: 2em;}
	#startup #plan #startup-plan .content-row > .content-inner.flex {
		padding: 0 5%;
		gap: 1em;}
	#startup #plan #leadiamember-plan ul li.li-disc{ 
		line-height: 1.25;
		padding-top: .5em;}
	#startup #info ul.flex{
		gap: 2em;}
	#startup #info li.column-size--half {
		padding: 1.5em 5%;}
}
@media only screen and (max-width: 768px) {
	#mvArea .imageMv img {
		width: 100%;}
	#startupsupport_menu a:not(.side_a) {
        padding-right: 3vw;
        margin-right: 2vw;
	}
}