@charset "utf-8";
/**
 *coworking page
 */

#coworking #service h2, #coworking #service #month dl dt, #coworking #service #month .content-inner > ul li.flex, #coworking #service h3, #coworking #service h4, #coworking #service #dropin ul li, #coworking #service .btnArea span{
	position: relative;}
#coworking h2 span.squareicon{
    position: absolute;
    top: 50%;
    right: 0;
    margin: 0;}

/* 
コワーキングの料金エリア */
#coworking #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;}
#coworking #service .icon-absolute{
    top: 7em;
    left: 50%;}
#coworking #service .icon-absolute ul.fdList{
	gap:1em;}
#coworking #service .icon-absolute ul.fdList li{
    padding: 3px 1em;}
#coworking #service .tab_wrapper .tab_button{
    justify-content: space-between;
	align-items: stretch;
	max-width: 980px;
	margin: 2em auto;}
#coworking #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 .2s linear;}
#coworking #service .tab_wrapper .tab_button li.tab:hover{
	transform:scale(1.05);
	opacity:0.6;
	transform-origin: bottom ;
	transition:all .4s linear;}
#coworking #service .tab_wrapper .tab_button li.tab:active, #coworking #service .tab_wrapper .tab_button li.tab.is-active{
	transform:scale(1.05);
	opacity:1;
    background: #8bcac8;
    color: #ffffff;
	transition:all .2s linear;}
#coworking #service .tab_wrapper .tab_button li.tab h3.title-m{
	margin-bottom: 0;}
#coworking #service .content-container{
	max-width: 950px;
    margin: auto;
    width: 100%;}
#coworking #service .tab_content.show{ 
	transition:all .4s ease-in;}

/* 月極プラン */

#coworking #month .flex{
	gap: 1em;}
#coworking #service #month .content-inner > .squareicon{ 
	background: #f4b474;
	border-color:#f4b474;}
#coworking #service #month .content-inner > ul li.flex{
	margin: 1.2em auto;}
#coworking #service #month .content-inner > ul li.flex:first-child{
	border-bottom: 1px solid #4f4c4824;
	padding-bottom: 1.2em;}
#coworking #service #month .content-inner li.liststyle-check-mark {
	margin-left: .8em;}
#coworking #service #month dl dt {
    display: inline-flex;
    background: #426f77;
    align-items: center;
    justify-content: center;
	height: 60px;
    padding: 0 5%;}
#coworking #service #month dl dd.whtbg{ 
	padding: 1em 5%;
	line-height: 1.25;
	& .uline {
		border-bottom: 0.8px solid;
        padding-bottom: 8px;
        margin-bottom: 5px;}
	& .plusicon {
		margin:1em auto 1.1em;}}
#coworking #service #month dl dt:after {
    content: "";
    position: absolute;
    top: 0;
    right: -30px;
    height: 60px;
    width: 30px;
    background: #426f77;
    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
    z-index: 1;}

/* 個室利用プラン */
#coworking #service #satellite .costArea ul li.column-size--half.whtbg{
	display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    width: 12.5em;
    height: 12.5em;}
#coworking #service #satellite .costArea ul li.column-size--half.whtbg h4.title { 
	margin-bottom: 0;}
#coworking #service #satellite .costArea ul li.column-size--half.whtbg .icon{
	margin-bottom: .4em;
    padding: 2px 2em;
    background: #f4b474;
    border-radius: 999px;}
#coworking #service #satellite .costArea .uline{  
	border-bottom: 1px solid;
    padding-bottom: 3px;
    margin-bottom: 6px;}

/* ドロップイン */
#coworking #service #dropin .txtArea .squareicon{
	padding: .2em 2%;}
#coworking #service #dropin ul li.whtbg{
	max-width:300px;
    line-height: 1.2;
    padding: 1.2em;
    margin-bottom: 2.5em;}
#coworking #service #dropin ul li.whtbg .icon-absolute{
    top: -2.5em;
    left: 0;
    right: 0;
    margin: auto;}
#coworking #service #dropin ul li.whtbg .icon-absolute .dialogueicon, #coworking #service #dropin ul li.whtbg .icon-absolute .dialogueicon:before{
	background: #f4b474;}

#coworking #service .btnArea.lorgbg{
	padding-top:3em;}
#coworking #service .btnArea span:after{
    z-index: 1;
    content: "";
    position: absolute;
    top: 2em;
    left: calc((100% - 30px) / 2);
    width: 30px;
    height: 18px;
    background: #f4b474;
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);}
#coworking #service .btnArea .btn02 span:after{
	background: #8bcac8;}

/* 利用方法・予約について */
#coworking #flow .content ol.liststyle-number > li:before{
	border: 1px solid #4f4c48;}
#coworking #flow .btnArea.flex{
	width: 100%;
	max-width:950px;
    margin: auto;}
#coworking #flow .btnArea.flex .btn span.dialogueicon{
	border: 2px solid #8bcac8;
	transition: all .3s ease 0s;}
#coworking #flow .btnArea.flex .btn:hover{
	transition: all .3s ease 0s;
	& span.dialogueicon{
/* 		border-color: transparent;*/}} 
#coworking #flow .btnArea.flex .btn .dialogueicon{
	color:#8bcac8;}
#coworking #flow .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%);}


@media screen and (max-width: 960px) {
	#coworking #service .captionArea {
		margin: 2em auto;
		border-left: 3px solid #f4b474;
		padding: 1em 0 1em 1em;}
	#coworking #service .container > .icon-absolute {
		position: inherit;}
	#coworking #service .icon-absolute ul.fdList li {
		width: 70%;}
	#coworking #service .tab_wrapper .tab_button li.tab{
		width: calc(((100% / 3) - .5em) * 1);}
	#coworking #service #month .content-inner > .squareicon{
		width: 100%;
		display: block;
		text-align: center;}
	#coworking #service #month .content-inner > ul li.flex:first-child{ 
		margin-bottom: 2em;}
	
	#coworking #service #satellite > .flex{ 
		flex-direction: column-reverse;}
	#coworking #service #satellite .costArea ul.flex.row{
		gap: 3%;
		margin: 2em auto;}
	#coworking #service #satellite .costArea ul.flex.row .costArea{
		margin: 2em auto 1em;}
	#coworking #service #satellite .costArea ul li.column-size--half.whtbg{
		border-radius: 18px;}
	#coworking #service .btnArea{  
		padding: 0 3%;}
	#coworking #service .btnArea span:after{
		left: calc((100% - 20px) / 2);
		width: 20px;
		height: 12px;
		top: auto;
        bottom: -1.5em;}
	#coworking #flow .btnArea.flex .btn{ 
		margin: 2em auto 0;}
}

@media only screen and (max-width: 768px) {
	#mvArea .imageMv img {
		width: 100%;}
	#coworking #service .tab_wrapper .tab_button{ 
		gap: 1em;}
	#coworking #service .tab_wrapper .tab_button li.tab{
		width:100%;}
	#coworking #service #month dl dt{
		height: 45px;}
	#coworking #service #month dl dt:after {
		top:auto;
		bottom: -19.6px;
		right: 0;
		height: 20px;
		width: 100%;
		clip-path: polygon(0 0, 50% 100%, 100% 0);}
}