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

#childcare.is-loaded .toptitleArea {
    opacity: 1;
    transition: opacity .4s linear 1s;}
#childcare .captionArea, #childcare_menu a, #childcare #about .content.lorgbg, #childcare #service h2, #childcare #reserve h2, #childcare #service table tr, #childcare #service #flexplan table tr td:last-child, #childcare #service #flexplan table tr:not(:first-child) td:first-child span, #childcare #service .arrowicon, #childcare #service #flexplan, #childcare h3.title.uline, #childcare #cck-event .eventList .posttxt {
	position: relative;}

/* LP内サブメニュー */
#childcare_menu .inner {
    width: 100%;
    padding: 1.2em;
	max-width: none;}
#childcare_menu a {
	padding-right: 1.2em;
	line-height: 2.2;
    display: inline-block;
	transition: all .4s ease-out ;}
#childcare_menu a:not(.side_a) {
    margin-right: 1.2em;}
#childcare_menu a:not(.side_a)::after {
    width: 1px;
    height: 70%;
    content: '';
    background: #f5f4f3;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);}
#childcare_menu a:hover{
	transform: translateY(-4px);
	transition: all .2s ease-in-out;}
/* #childcare_menu a:before{ 
	position: absolute;
    content: '...';
    font-family: serif;
    color: #fff;
    font-size: 1.1rem;
    line-height: 1;
    letter-spacing: 10px;
    margin-top: 1rem;
	bottom:-4px;
    left: calc((100% - 19.2px) / 2);
    transform: translateX(-50%);
    transition: all .2s ease-out;
	opacity:0;}
#childcare_menu a:hover:before{
	opacity:1;
    transition: all .4s ease-out;} */

/* イベントお知らせ */
#childcare #cck-event .eventList{
	display: flex;
    column-gap: 2%;
	margin-bottom: 2em;}
#childcare #cck-event .eventList li{
    width: calc(100% / 4);}
#childcare #cck-event .eventList figure{
	margin:0;}
#childcare #cck-event .eventList .date{
    color: #4f4c4866;
    font-size: .9rem;
    text-align: right;}
#childcare #cck-event .eventList .posttxt{
 	margin-top: 1em;}
/*#childcare #cck-event .eventList .posttxt:before{
	content:'';
	position:absolute;
    top: -.2em;
    left: -.8em;
    height: 65px;
    width: 0.2px;
    background: #4f4c48;} */
#childcare #cck-event .eventList .imageArea img{
	border: 0.8px solid #4f4c48;
	border-radius: 16px;}
#childcare #cck-event .eventList li a img{
	transition: all .4s ease-out;}
#childcare #cck-event .eventList li a:hover{
	transition: all .4s ease-in;
	& p {
		opacity:0.6;}
	& img {
		transform:scale(1.03);
		transform-origin: center;}}

/* 子育て支援サービスについて */
#childcare #about img.kosodateicon {
    width: 100%;
    max-width:  180px;
    padding-right: 1em;}
#childcare #about img.ninkagaiicon {
	width: 70px;}
#childcare #about .toptitleArea > .flex{
	gap:2em;}
#childcare #about .toptitleArea .bdArea{
	margin-top: 2em;
    width:92%;
	padding: 1.5em 6%;
	border-radius: 25px;}
#childcare #about .toptitleArea .bdArea > .flex:first-child {
    margin-bottom: 1em;
    padding-bottom: 1em;
	border-bottom: 0.8px solid #4f4c48;}

/* 託児料金エリア */
#childcare #service h2 span.squareicon, #childcare #reserve h2 span.squareicon{
	position: absolute;
    top: 50%;
    right: 0;
	margin:0;}
#childcare #service .captionArea {
    margin: 2em 0 .6em;
    /* box-shadow: 2px 3px 3px 3px #dfd9d6bd; */
    line-height: 1.8;
    border-left: 5px solid #f4b474;
    padding: 1.2em 0 1.2em 3em;}
#childcare #service .tab_wrapper .tab_button{
    justify-content: space-between;
	align-items: stretch;
	max-width: 870px;
	margin: 2em auto;}
#childcare #service .tab_wrapper .tab_button li.tab{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #f5f4f3;
    border: 3px solid #8bcac8;
    border-radius: 999px;
    padding: .6em 0;
    color: #8bcac8;
	transition:all .4s linear;}
#childcare #service .tab_wrapper .tab_button li.tab:hover{
	transform:scale(1.05);
	opacity:0.6;
	transform-origin: bottom ;
	transition:all .2s linear;}
#childcare #service .tab_wrapper .tab_button li.tab:active, #childcare #service .tab_wrapper .tab_button li.tab.is-active{
	transform:scale(1.05);
	opacity:1;
    background: #8bcac8;
    color: #ffffff;
	transition:all .4s linear;}
#childcare #service .tab_wrapper .tab_button li.tab h4.title-l{
	margin-bottom: 0;}
#childcare #service .content-container{
	max-width: 950px;
    margin: auto;
    width: 100%;}
#childcare #service .tab_content{ 
	border: 3px solid #8bcac8;
    border-radius: 30px;
    padding: 3em 6% 1px;}
#childcare #service table {
    width: 100%;
    border: 0;
	border-spacing: 0;}

/* 託児料金　フレックスプラン #flexplan */
#childcare #service h5.title-m {
    margin: 1em auto .6em;
	border-radius: 10px;
    padding: .2em 0;
    line-height: 1.7;}
#childcare #service #flexplan table td span.drkbg, #childcare #service #flexplan table td span.whtbg{
	border-radius: 999px;
	border: 0.8px solid #426f77;}
#childcare #service #flexplan table tr td {
	width:calc(75% / 4);
    padding: .4em 3px;
	text-align:center;
	line-height:2.8;}
#childcare #service #flexplan table tr td:last-child{
	width:25%;
	line-height: 1.4;}
#childcare #service #flexplan table .uline{
	border-bottom: 1px solid #426f77;
    padding-bottom: 6px;}
#childcare #service #flexplan table tr:not(:first-child) td:first-child span {
    height: 50px;
    display: inline-flex;
    width: 100%;
	background:#426f77;
    align-items: center;
    justify-content: center;}
#childcare #service #flexplan table tr:not(:first-child) td:first-child span:after {
    content: "";
    position: absolute;
    top: 0;
    right: -20px;
	height: 50px;
    width: 20px;
    background: #426f77;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    z-index: 1;}

/* 託児料金　通常プラン #regularplan */
#childcare #service #regularplan table td {
	width: calc(100% / 4);
    height: 60px;
	text-align: center;
	border-right: 2px solid #426f77;
	border-left: 3px solid transparent;
	border-bottom: 1px dotted #f5f4f3;}
#childcare #service #regularplan table tr:first-child td:first-child{
    border-radius: 10px 10px 0 0;
    border: 2px solid #426f77;
    border-bottom: none;}
#childcare #service #regularplan table tr:first-child td:not(:first-child) {
    border-radius: 0 10px 0 0;
	border: 2px solid #426f77;
    border-left: 2px solid transparent;
    border-bottom: none;}
#childcare #service #regularplan table tr td:first-child{
	border-left: 2px solid #426f77;}
#childcare #service #regularplan table tr:last-child td{
	border-bottom: 2px solid #426f77;}

/* 託児料金　親子パック #weekdayplan */
#childcare #service #weekdayplan .txtArea.whtbg{
	border-radius: 30px;
    padding: 1em 5%;}
#childcare #service #weekdayplan .txtArea.whtbg .center .cynbg{
	border-radius: 999px;
    padding: 6px 11px;
    margin: 2px;}
#childcare #service #weekdayplan .txtArea.whtbg .column-size--x-wide{
    border-top: 1px solid;
    padding: 1em 0;}

/* 利用方法・予約について */
#childcare #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;}
#childcare #reserve .content ol.liststyle-number > li:before{
	border: 1px solid #4f4c48;}
#childcare #reserve .btnArea.flex{
    width: 100%;
    max-width: 950px;
    margin: 2em auto;}
#childcare #reserve .btnArea.flex .btn span.dialogueicon{
	border: 2px solid #8bcac8;
	border-radius:999px;
	transition: all .3s ease 0s;
	color:#8bcac8;}
#childcare #reserve .btnArea.flex a.btn{
	border-width: 2px;
	border-radius: 999px;}
#childcare #reserve .btnArea.flex .btn:hover{
	transition: all .2s ease 0s;} 
#childcare #reserve .btnArea.flex .btn .dialogueicon:after { 
    z-index: 1;
    content: "";
    position: absolute;
    bottom: -11.8px;
    left: calc(50% - 12px);
    width: 24px;
    height: 11.8px;
    background: #8bcac8;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}

#childcare #community-members .column-size--two-thirds .btnArea{
    width: 100%;
    max-width: 380px;
	margin: 2em 0 4em auto;}
#childcare #community-members .column-size--two-thirds .btnArea .btn .dialogueicon{
	border: 2px solid #c7a27e;
    color: #c7a27e !important;}
#childcare #community-members .column-size--two-thirds .btnArea .btn .dialogueicon:after { 
    background: #c7a27e;}



/* 保育園運営の実績 */
#childcare #basis {
    position: relative;
    background-image: url(https://c-room.jp/wp/wp-content/themes/croom/images/childcare-img-01.png), url(https://c-room.jp/wp/wp-content/themes/croom/images/childcare-img-02.png);
    background-repeat: no-repeat;
    background-size: 16%;
    background-position: left 6% top 20%, right 6% top 30%;}


@media only screen and (max-width: 960px) {
	#childcare #cck-event .eventList{
		flex-wrap: wrap;}
	#childcare #cck-event .eventList li {
		margin-bottom: 2em;
		width: calc((100% - 2%) / 2);
	}
	#childcare #about h2.title-m span{
		line-height:1;}
	#childcare #about .toptitleArea .bdArea {
		width: 100%;}
	#childcare #service h2 span.squareicon{
		top: 0;}
	#childcare #service .captionArea {
		margin: 2em auto;
		padding: .6em 0 .6em 1em;}
	#childcare #service h3.title-l{
		margin-top: 3em;}
	#childcare #service .tab_wrapper .tab_button{ 
		margin: 1em auto;}
	#childcare #service .tab_wrapper .tab_button li.tab{
		margin: 1em auto 0;
		padding: 0.2em 0;}
	#childcare #service .tab_wrapper .tab_button li.tab h4{
		line-height: 1.25;}
	#childcare #service .tab_content.show{
		padding: 3em 3% 0;}
	#childcare #service .tab_content .lead > .txt-center{
		text-align:left;
		font-size:1.1rem;}
	#childcare #service #weekdayplan .txtArea.whtbg .center .cynbg{
		display:block;
		padding: 2px 0;
		margin: 2px auto;
		width: 70%;}
	#childcare .carouselArea {
		position:relative; 
		display: flex;
		overflow-x: scroll;
        -webkit-overflow-scrolling: touch;
        overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        padding: 0 0;
        scroll-behavior: smooth;
		margin: 1em auto;
		padding: 0 1em 1em;}
	#childcare .carouselArea::scroll-button(*) {
		border: 0;
		opacity: 1;
		background: none;
		cursor: pointer;
		overflow: auto;}
	#childcare .carouselArea::scroll-button(*):hover, #childcare .carouselArea::scroll-button(*):focus {
		opacity: 1;
		transition: opacity .5s ease 0s;}
	#childcare .carouselArea::scroll-button(*):active {
		translate: 1px 1px;
		transition: opacity .5s ease-out;}
	#childcare .carouselArea::scroll-button(*):disabled {
		opacity: 0.16;
		transition: opacity .1s ease-out;
		cursor: unset;}
	#childcare .carouselArea::scroll-button(left), #childcare .carouselArea::scroll-button(right) {
        content: '';
        width: 15px;
        height: 15px;
        border-bottom: 5px solid #426f77;
        border-right: 5px solid #426f77;
		opacity: 0.8;
		transition: opacity .5s ease-in-out;
        z-index: 1;}
	#childcare .carouselArea::scroll-button(left){
		transform: rotate(135deg);}
	#childcare .carouselArea::scroll-button(right) {
		transform: rotate(-45deg);}
	#childcare #flexplan .carouselArea{
		anchor-name: --myCarousel02;}
	#childcare #flexplan .carouselArea::scroll-button(*) {
		position: absolute;
		position-anchor: --myCarousel02;}
	#childcare #flexplan .carouselArea::scroll-button(left) {
		right: calc(anchor(left) - 10px);
		bottom: calc(anchor(top) + -150px);}
	#childcare #flexplan .carouselArea::scroll-button(right) {
        left: calc(anchor(right) - 10px);
        bottom: calc(anchor(top) + -150px);}
	#childcare #regularplan .carouselArea {
		display:flex;
		anchor-name: --myCarousel03;}
	#childcare #regularplan .carouselArea::scroll-button(*) {
		position: absolute;
		position-anchor: --myCarousel03;}
	#childcare #regularplan .carouselArea::scroll-button(left) {
		right: calc(anchor(left) - 10px);
		bottom: calc(anchor(top) + -200px);}
	#childcare  #regularplan .carouselArea::scroll-button(right) {
        left: calc(anchor(right) - 10px);
        bottom: calc(anchor(top) + -200px);}
	#childcare #flexplan .carouselArea table {
        height: 100%;
		flex:0 0 150%;
        scroll-snap-align: start;}
	#childcare #regularplan .carouselArea table {
        height: 100%;
        flex: 0 0 120%;
        scroll-snap-align: start;
	}
	#childcare #reserve h2 span.squareicon {
		top: -3em;}
	#childcare #reserve .btnArea.flex{
		margin:0;
		gap:1em;
		padding-top: 1em;} 
	#childcare #reserve .btnArea.flex .btn{
		margin: 1em auto;}
	#childcare #reserve .content{
		padding-top: 50%;
		background-size: 70%;}
	#community-members .imageArea{
		margin-top: 3em;}
	#childcare #community-members .column-size--two-thirds .uline{
		padding:1em;}
	#community-members .imageArea h3{
		top: -4em;}
	#childcare #community-members .btnArea{
	    margin-top: 2em;}
	#childcare #community-members .btnArea .btn{
		margin:3em auto 2em;} 
	#childcare #basis { 
		background-size: 120px;
		background-position: left 20% top 165px, right 20% top 165px;}
	#childcare #basis h2.title-l{
		margin-bottom: 160px;}
	#childcare #basis .btnArea .btn{
		margin:1em auto 0;}

}
@media only screen and (max-width: 768px) {
	#childcare #about .toptitleArea .imageArea.column-size--narrow{display:none;}
	#facility_menu a:not(.side_a) {
        padding-right: 3vw;
        margin-right: 2vw;}
	#childcare #flexplan .carouselArea table {
		flex:0 0 225%;}
	#childcare #regularplan .carouselArea table {
        flex: 0 0 180%;}
	#childcare #reserve .content{
		padding-top: 55%;
		background-position:center top;}
	#community-members .imageArea {
		margin-top: 4em;}
	#community-members .imageArea h3 {
		top: -3em;}
}