@charset "UTF-8";

/*=====================================================
 
テレビ会議ページ

=====================================================*/

.aft-border01:after,
.aft-border02:after{
	content: '';
	background-color: #134674;
	display: block;
	height: 3px;
	margin: 6px auto 0 auto;
	max-width: 200px;
	width: 50%;	
}

.aft-border02:after{
	margin-top: 3px;
}

.ls-01px{ letter-spacing: -1px; }

.br768-1060,
.br768-830,
.br833-455,
.br768,
.br767,
.br640,
.br375,
.br374{ display: none; }
@media print, screen and (min-width: 768px) and (max-width: 1060px) { .br768-1060{ display: inline; } }
@media print, screen and (min-width: 768px) and (max-width: 830px) { .br768-830{ display: inline; } .lh12-830-768 { line-height: 1.2 } }
@media print, screen and (min-width: 455px) and (max-width: 833px) { .br833-455{ display: inline; } }
@media print, screen and (min-width: 768px) { .br768{ display: inline; } }
@media print, screen and (min-width: 375px) { .br375{ display: inline; } }
@media print, screen and (max-width: 767px) { .br767{ display: inline; } }
@media print, screen and (max-width: 640px) { .br640{ display: inline; } }
@media print, screen and (max-width: 374px) { .br374{ display: inline; } }

.flex{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

/* 面談ボタン
-------------------------------------------------------------------- */
.tv-buttom01{
	max-width: 480px;
	width: 96%;
}

.tv-buttom01 > a{
	display: block;
	background-color: #dc9610;
	border-radius: 6px;
	box-shadow: 0px 10px #913b38;
	color: #fff;
	padding: 1em calc( 2em + 15px ) 1em 1em;
	position: relative;
	text-decoration: none;
	transition: color .3s, background .3s, box-shadow .3s, transform 0.3s;
}
.tv-buttom01 > a:hover{
	box-shadow: 0px 5px #913b38, 0px 8px 0 rgba(0,0,0,.2);
	transform: translateY(3px);
}
.tv-buttom01 > a:active{
	box-shadow: 0 0 #dc9610, 0 0 0 rgba(0,0,0,.2);
	transform: translateY(6px);
	transition-duration: .1s;
}
.tv-buttom01 > a:after{
	content: '';
	display: block;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 15px solid #ffffff;
	position: absolute;
	top: calc( 50% - 10px );
	right: 1em;
}

/* 3つのメリット
-------------------------------------------------------------------- */

.tv-merit{
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
@media print, screen and (max-width: 767px) {
	.tv-merit{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
}

.tv-merit > div{
	width: calc( ( 100% - 2em ) / 3 - 0.1px );
	margin-right: 1em;
}
.tv-merit > div:last-of-type{ margin-right: 0; }
@media print, screen and (max-width: 767px) {
	.tv-merit > div{ margin-bottom: 2em; width: 100%; }
	.tv-merit > div:last-of-type{ margin-bottom: 0; }
}

.tv-merit > div > p:first-of-type{ text-align: center; }

.tv-merit-img{
	margin: 1.3em auto;
	text-align: center; 
	width: 40%;
}
@media print, screen and (max-width: 767px) { .tv-merit-img{ max-width: 160px; } }

/* 2大ポイント
-------------------------------------------------------------------- */
.tv-point {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
@media print, screen and (max-width: 767px) {
	.tv-point {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
}

.tv-point  > div{
	margin-right: 4rem;
	max-width: 460px;
	width: calc( ( 100% - 4rem ) / 2 - 0.1px );
}
.tv-point > div:last-of-type{ margin-right: 0; }
@media print, screen and (max-width: 767px) {
	.tv-point > div{
		margin-right: 0;
		margin-bottom: 2em;
		max-width: none;
		width: 100%;
	}
	.tv-point > div:last-of-type{ margin-bottom: 0; }
}

.tv-point > div > p:first-of-type{ text-align: center; }

.tv-point-img{
	margin: 1.3em auto;
	text-align: center;
	width: 50%;
}
@media print, screen and (max-width: 767px) {
	.tv-point-img{ max-width: 230px; width: 60%; }
}

/* テレビ会議（Web会議）ってどうやるの？、
   税理士法人チェスターが採用するテレビ会議（Web会議）『ベルフェイス』のやり方
-------------------------------------------------------------------- */
.markup-balloon01{
	position: relative;
	max-width: 400px;
	width: 100%;
}

.markup-balloon01:after{
	content: '';
	display: block;
	border-top: 1.5em solid #134674;
	border-right: 1.7em solid transparent;
	border-left: 1.7em solid transparent;
	position: absolute;
	bottom: -1.3em;
	left: calc( 50% - 1.7em );
}

/* 『ベルフェイス』の流れ
-------------------------------------------------------------------- */

.bellFace-box{
	background-color: #e2ecf6;
	border: 1px solid #134674;
	padding: 2rem;
}

.bellFace-box-num{
	padding-left: 2.75em;
	text-indent: -2.75em;
	width: 100%;
}

@media print, screen and (max-width: 767px) {
	.bellFace-box-num{ text-align: center; }
}

.bellFace-box-img{
	text-align: center;
	margin: 1em auto;
}

/* よくある質問
-------------------------------------------------------------------- */
.tv-faq{
	margin: 0 auto;
	max-width: 900px;
	width: 96%;
}
.tv-faq > div{
	border-bottom: 1px solid #134674;
	padding: 0 2rem;
}
.tv-q,
.tv-a{
	padding-left: 2em;
	text-indent: -2em;
}
.tv-q{
	font-weight: bold;
	margin-bottom: 2rem;
	padding-top: 2rem;
	font-size: 20px;
}
.tv-a{
	padding-bottom: 2rem;
}

.tv-q:before,
.tv-a:before{
	font-size: 130%;
	font-weight: bold;
	padding-right: 10px;
}
.tv-q:before{
	content: "Q.";
	color: #0000ff;
}
.tv-a:before{
	content: "A.";
	color: #ff0000;
}

/* テレビ会議から申告完了までの流れ
-------------------------------------------------------------------- */

.tv-flow-img{
	max-width: 700px;
	width: 90%;
}

/* 外出不要！資料収集代行【有料サービス】
-------------------------------------------------------------------- */
.tv-acting{
	-s-flex-wrap: wrap;
	flex-wrap: wrap;
}
@media print, screen and (max-width: 767px) {
	.tv-acting{
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
}

.tv-acting-box{
	background-color: #e2ecf6;
	padding: 1rem;
	width: calc( ( 100% - 2rem ) / 2 - 0.1px );
}
.tv-acting-box:nth-of-type(odd){ margin-right: 2rem; }
.tv-acting-box:first-of-type,
.tv-acting-box:nth-of-type(2){ margin-bottom: 2rem; }

@media print, screen and (max-width: 767px) {
	.tv-acting-box{ width: 100%; }
	.tv-acting-box:nth-of-type(odd){ margin-right: 0; }
	.tv-acting-box:nth-of-type(3){ margin-bottom: 2rem; }
}

.tv-acting-box > div{ font-size: 0; }
.tv-acting-box > div > div{
	display: inline-block;
	font-size: 1.6rem;
	vertical-align: top;
}

.tv-acting-box > div > div.tv-acting-img{
	margin-right: 2rem;
	max-width: 140px;
	width: 30%;
}

.tv-acting-box > div > div.tv-acting-txt{
	width: calc( 70% - 2rem - 0.1px );
}

/* 【無料サービス】税務署への相続税申告の提出
-------------------------------------------------------------------- */

.mendan-free-service > div{ font-size: 0; }

.mendan-free-service > div > div{
	display: inline-block;
	font-size: 1.6rem;
	vertical-align: top;
}
.mendan-free-service > div > div.mendan-free-service-img{
	margin-right: 2rem;
	max-width: 160px;
	width: 30%;
}
.mendan-free-service > div > div.mendan-free-service-txt{
	width: calc( 70% - 2rem - 0.1px );
}

/*=====================================================
 
オンライン面談各種方法
タブ切り替え

=====================================================*/

@media print, screen and (max-width: 474px) { .none474{ display: none;} }
@media print, screen and (max-width: 450px) { .none450{ display: none;} }
@media print, screen and (max-width: 350px) { .none350{ display: none;} }

/*タブ切り替え全体のスタイル*/
.tabs {
	background-color: #fff;
	font-size: 0;
	margin: 0 auto;
	position: relative;
}

.tabs > h3{
	font-size: calc( 1.6rem * 1.5 );
	line-height: 1.4;
	min-height: 40px;
	padding-left: 50px;
}
.tabs > h3:first-of-type{
	background: url(/assets/images/tv_mendan/tv_icon02.png) left top no-repeat;
	background-size: 40px;
}
.tabs > h3:nth-of-type(2){
	background: url(/assets/images/tv_mendan/tv_icon03.png) left top no-repeat;
	background-size: 40px;
}

.tab_menu,
#tab_contents{ font-size: 1.6rem; }

/*ラジオボタンを全て消す*/
input[name="tab_item"] {
	display: none;
}

@media print, screen and (max-width: 767px) {
	.tab_menu{
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
	}
}

/*タブのスタイル*/
.tab_item {
	background-color: #134674;
	border: 2px solid rgba( 0,0,0,0 );
	border-radius: 5px;
	color: #ffffff;
	cursor: pointer;
	display: block;
	font-size: 16px;
	font-weight: bold;
	margin-right: 10px;
	padding: 0.5em 2.3rem 0.5em 0.5em;
	position: relative;
	text-align: center;
	transition: all 0.2s ease;
	vertical-align: middle;
	width: calc( ( 100% - 20px ) / 3 - 0.1px );
}

@media print, screen and (min-width: 768px) {
	.tab_item:first-of-type,
	.tab_item:nth-child(2),
	.tab_item:nth-child(3){ margin-top: 5rem; }
	.tab_item:nth-of-type(3n),
	.tab_item:last-of-type{ margin-right: 0; }
}

@media print, screen and (max-width: 767px) {
	.tab_item{
		width: calc( ( 100% - 10px ) / 2 - 0.1px );
	}
	.tab_item:first-of-type,
	.tab_item:nth-child(2){ margin-top: 5rem; }
	.tab_item:nth-of-type(2n),
	.tab_item:last-of-type{ margin-right: 0; }
	.tab_item:first-of-type,
	.tab_item:nth-of-type(2){ margin-bottom: 10px; }
}
@media print, screen and (max-width: 570px) {
	.tab_item:first-of-type,
	.tab_item:nth-child(2){ margin-top: 6rem; }
}

@media print, screen and (max-width: 470px) {
	.tab_item:first-of-type,
	.tab_item:nth-child(2){ margin-top: 7rem; }
}

.tab_item.tel01{
	margin-top: 0;
	margin-right: 0;
}

/*選択されているタブのコンテンツのみを表示*/
#bell-face:checked ~ #tab_contents > #bell-face-contents,
#google-hangouts:checked ~ #tab_contents > #google-hangouts-contents,
#zoom:checked ~ #tab_contents > #zoom-contents,
#tel:checked ~ #tab_contents > #tel-contents{
	display: block;
	opacity: 1;
	transition: opacity 0.6s;
	height: auto;
}

/*タブ切り替えの中身のスタイル*/
.tab_content {
	display: none;
	padding: 0 10px;
	clear: both;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s, height 0;
	height: 0;
}

/*選択されているタブのスタイルを変える*/
.tabs #bell-face:checked ~ .tab_menu label[for="bell-face"],
.tabs #google-hangouts:checked ~.tab_menu label[for="google-hangouts"],
.tabs #zoom:checked ~ .tab_menu label[for="zoom"],
.tabs #tel:checked ~ .tab_menu label[for="tel"]{
	background-color: #ffffff;
	border-color: #134674;
	color: #134674;
}
@media print, screen and (max-width: 767px) {
	.tabs #bell-face:checked ~ .tab_menu label[for="bell-face"],
	.tabs #google-hangouts:checked ~.tab_menu label[for="google-hangouts"],
	.tabs #zoom:checked ~ .tab_menu label[for="zoom"],
	.tabs #tel:checked ~ .tab_menu label[for="tel"]{
		padding-right: 3.3rem;
	}
}


.tab_menu label[for="bell-face"]:before{
	content: "＼PC操作が苦手な方にもオススメ！／";
}
.tab_menu label[for="google-hangouts"]:before{
	content: "＼Gmailをお持ちの方にオススメ！／";
}

.tab_menu label[for="bell-face"]:before,
.tab_menu label[for="google-hangouts"]:before{
	color: #134674;
	display: block;
	position: absolute;
	bottom: 100%;
	left: 0;
	line-height: 1.2;
	margin-bottom: 10px;
	width: 100%;
}

.tab_menu label:after{
	content: "▼";
	border: none;
	font-size: 13px;
	position: absolute;
	top: calc( ( 100% - 23px ) / 2 );
	right: 1rem;
	bottom: auto;
	left: auto;
	z-index: 1;
	width: auto;
}

/*=====================================================
 
初回面談にお越し頂く際の交通費

=====================================================*/
@media print, screen and (min-width: 768px) {
	.taxi-cont{ font-size: 0; }
	.taxi-cont p.taxi-plan-txt01{ font-size: 2rem; }
	.taxi-cont p.taxi-plan-txt02{ font-size: 1.7rem; }
	.taxi-cont > div{
		display: inline-block;
		vertical-align: top;
		width: calc( 50% - 10px );
	}
	.taxi-cont > div.taxi-txt{
		font-size: 1.6rem;
		margin-left: 20px;
	}
}

.taxi-cont p.taxi-plan-txt01,
.taxi-cont p.taxi-plan-txt02{ text-align: center; }

.taxi-cont p.taxi-plan-txt01{
	background: #ffdca8;
	padding: 1rem;
	margin-right: auto;
	margin-bottom: 1.5rem;
	margin-left: auto;
	text-align: center;
	max-width: 800px;
	width: 100%;
}

.taxi-cont p.taxi-plan-txt02{ margin-bottom: 2rem; }

.taxi-cont > div.taxi-img{ font-size: 0; }
.taxi-cont > div.taxi-img > .taxi-img-cont{
	display: inline-block;
	vertical-align: top;
	width: calc( 50% - 5px );
}
.taxi-cont > div.taxi-img > div:last-of-type{ margin-left: 10px; }

@media print, screen and (max-width: 767px) {
	.taxi-cont > div.taxi-img{
		margin: 0 auto;
		max-width: 540px;
		width: 100%;
	}
	.taxi-cont > div.taxi-txt{ margin-top: 20px; }
}