/*--- SP版 ---*/
@media screen and (max-width: 768px){
	body{
		font-family: sans-serif;
		overflow-x: hidden;
	}
	
	img, iframe{
		max-width: 100%;
	}
	
	.pc{
		display: none;
	}
	
	.sp{
		display: block;
	}
	@media screen and (min-width: 760px){
		.sp.not_tb{
			display: none;
		}
	}
	
	.inner{
		width: calc(690/750 * 100vw);
	}
	section .inner{
		padding: 60px 0;
	}
	
	.sub_title{
		margin-bottom: 40px;
		font-size: 2.4rem;
	}
	@media screen and (min-width: 760px){
		.sub_title{
			font-size: 3.2rem;
		}
	}
	
	.sub_title_2{
		margin: -24px 0 40px;
		padding-top: 24px;
		background-size: 80px auto;
		font-size: 3.2rem;
	}
	.sub_title_2 .lf_name{
		font-size: 2rem;
	}
	@media screen and (max-width: 760px){
		.sub_title_2 .lf_name::before{
			margin-right: 10px;
		}
		.sub_title_2 .lf_name::after{
			margin-left: 10px;
		}
		.sub_title_2.dok{
			font-size:2.6rem;
		}
	}
	
	.lead_txt{
		font-size: 1.8rem;
	}
	
	/* ヘッダー */
	#header .inner{
		padding: calc(20/750 * 100vw);
	}
	#site_title{
		font-size: 2rem;
	}
	
	#hd_contact{
		display: none;
	}
	
	/* メインビジュアル */
	#main_visual{
		padding-top: calc(40/750 * 100vw + 2rem);
		padding-bottom: 240px;
		height: auto;
	}
	#main_visual::before{
		width: 360px;
		right: 50%;
		transform: translateX(-50%);
	}
	#main_visual .inner{
		width: calc(690/750 * 100vw);
	}
	
	#main_copy{
		margin: 20px 0 0;
		width: auto;
		font-size: calc(26/360 * 100vw);
	}
	#main_copy em{
		font-size: 1.25em;
	}
	
	#main_copy_s{
		margin: calc(10 / 360 * 100vw) 0 0;
		font-size: calc(18/360 * 100vw);
	}
	
	#sub_copy{
		font-size: calc(20/360 * 100vw);
	}
	
	@media screen and (min-width: 760px){
		#main_visual{
			padding-bottom: 390px;
		}
		#main_visual::before{
			width: 600px;
		}
		
		#sub_copy{
			font-size: 3.2rem;
		}
	}
	
	.mv_point{
		padding: 15px;
	}
	.mv_point ul{
		display: block;
		font-size: calc(18 / 360 * 100vw);
	}
	.mv_point li{
		display: block;
		margin-top: 10px;
		padding: calc(10 / 360 * 100vw);
		width: auto;
		height: auto;
	}
	.mv_point li:first-of-type{
		margin-top: 0;
	}
	.mv_point .mv_point_mail{
		font-size: calc(20 / 360 * 100vw);
	}
	
	#sub_copy_2{
		font-size: 2.4rem;
	}
	
	@media screen and (max-width: 760px){
		.mv_point li::before{
			width: calc(100% - 8px);
			height: calc(100% - 8px);
			top: 4px;
			left: 4px;
		}
		
		#sub_copy_2{
			display: block;
			padding: 10px;
			height: auto;
			border-width: 3px;
			border-radius: 20px;
			font-size: 2rem;
		}
	}
	
	/* お悩み */
	#trouble{
		padding-bottom: 60vw;
	}
	#trouble::before{
		width: 70vw;
		max-width: 500px;
		right: 50%;
		transform: translateX(50%);
	}
	#trouble .inner{
		padding-top: 20px;
	}
	
	#trouble_ttl{
		padding: 16px;
	}
	
	@media screen and (min-width: 760px){
		#trouble_ttl br.sp{
			display: none;
		}
	}
	
	#trouble_item{
		padding: 20px;
		margin: 0 auto;
		width: auto;
		max-width: 600px;
	}
	
	/* 共感 */
	@media screen and (max-width: 760px){
		#sympathy{
			background-image: url(img/sympathy_bg_sp.jpg);
		}
	}
	
	.sympathy_txt{
		margin: 40px 0 0;
		width: auto;
	}
	
	/* 問題提起 */
	@media screen and (max-width: 760px){
		#pose_problem .pp_txt{
			padding: 15px;
		}
	}
	
	/* 解決方法案内 */
	.promise_list{
		margin: 20px auto 0;
		padding: 20px;
		width: auto;
	}
	.promise_list ul{
		font-size: 1em;
	}
	.promise_list li{
		margin-top: 16px;
		padding-left: 16px;
	}
	.promise_list li::before{
		top: 5px;
	}
	
	@media screen and (max-width: 760px){
		#promise .lead_txt{
			text-align: left;
		}
		
		.promise_list{
			display: block;
		}
		.promise_list ul{
			width: auto;
		}
		.promise_list ul:not(:first-of-type){
			margin-top: 16px;
		}
	}
	
	/* お問い合わせバナー */
	.contact_banner{
		padding: 40px 0;
	}
	.contact_banner .inner{
		padding: 20px 0;
	}
	.contact_banner h2{
		padding-right: 100px;
		font-size: 2.8rem;
	}
	
	.contact_item{
		display: block;
		margin: 0 20px;
		width: auto;
	}
	.contact_item li{
		margin-top: 20px;
	}
	.contact_item .bnr_tel{
		display: inline-block;
	}
	.contact_item .bnr_mail br.sp{
		display: none;
	}
	@media screen and (max-width: 730px){
		.contact_banner .inner{
			padding-top: 140px;
		}
		.contact_banner .inner::before{
			width: 240px;
			height: 200px;
			right: calc(50% - 120px);
			bottom: auto;
			top: -30px;
		}
		.contact_banner h2{
			padding-right: 0;
			font-size: 2.4rem;
			letter-spacing: 0.07em;
			position: relative;
		}
		.contact_item .bnr_tel{
			display: block;
		}
		.contact_item .bnr_tel_num{
			font-size: 3.6rem;
			text-align: center;
		}
		.contact_item .bnr_tel_num::before{
			width: 30px;
			height: 40px;
			background-size: auto 32px;
		}
		.contact_item .bnr_mail{
			width: auto;
			font-size: 2rem;
			line-height: 1.25;
		}
		.contact_item .bnr_mail br.sp{
			display: block;
		}
	}
	
	/* 選ばれる理由 */
	.reason_container{
		display: block;
	}
	.reason_container .reason_txt,
	.reason_container .reason_img{
		width: auto;
	}
	.reason_container .reason_img{
		margin: 20px auto 0;
		max-width: 480px;
	}
	
	/* 解決事例 */
	.case_list li h3{
		padding: 10px 15px;
		font-size: 2rem;
	}
	
	.case_content{
		padding: 20px 15px 15px;
	}
	.case_content .case_compensation{
		max-width: 100%;
	}
	.case_content .case_item{
		display: block;
	}
	.case_content .case_item dl{
		width: auto;
	}
	
	.case_content .case_detail h4::after{
		font-size: 28px;
		right: 5px;
	}
	
	@media screen and (max-width: 760px){
		.case_list li{
			margin-top: 20px;
		}
		.case_list li h3{
			padding: 5px 10px;
			font-size: 1.8rem;
		}
	}
	
	/* お客様の声 */
	.voice_list li{
		margin-top: 20px;
		padding: 15px;
	}
	.voice_list h3{
		margin-bottom: 0;
		padding: 0.2em 15px;
	}
	
	.voice_content_flex{
		display: block;
	}
	.voice_content_flex .flex_child{
		margin-top: 15px;
		padding: 15px;
		width: auto;
	}
	
	#btn_voice_more{
		margin-top: 20px;
		max-width: 100%;
	}
	
	@media screen and (max-width: 760px){
		.voice_content_flex .flex_child{
			padding: 10px;
		}
		.voice_content_flex .flex_child h4{
			font-size: 1.8rem;
			line-height: 1.25;
		}
	}
	
	/* 事務所概要 */
	.office_tbl{
		width: auto;
	}
	.office_tbl th, .office_tbl td{
		padding: 8px 10px;
	}
	.office_tbl th{
		width: auto;
	}
	
	.gmap{
		margin-top: 20px;
		width: auto;
	}
	.gmap iframe{
		height: 50vw;
	}
	
	.ofc_access{
		margin-top: 20px;
	}
	.ofc_access dd{
		text-align: left;
	}
	
	@media screen and (max-width: 760px){
		.office_tbl .map_link{
			display: block;
			margin: 0;
			width: 100px;
			text-align: center;
		}
		
		.gmap iframe{
			height: 75vw;
		}
		
		.ofc_access{
			display: block;
		}
		.ofc_access dl{
			margin-top: 20px;
			width: auto;
		}
	}
	
	/* サポートの流れ */
	.support_title{
		margin-bottom: 20px;
		font-size: 2.4rem;
	}
	.support_title_2{
		font-size: 2rem;
	}
	
	.support_flow{
		width: auto;
		max-width: 960px;
	}
	.support_flow > li{
		padding-bottom: 24px;
	}
	.support_flow h3{
		font-size: 2.8rem;
	}
	.support_flow h3 .flow_num{
		margin-right: 10px;
		min-width: 120px;
		font-size: 1.8rem;
	}
	.support_flow h3 .flow_num em{
		font-size: 3.6rem;
	}
	.support_flow p{
		margin: 12px 20px 0;
	}
	
	.support_case li h3{
		font-size: 2.4rem;
	}
	
	@media screen and (max-width: 760px){
		.support_flow h3{
			display: block;
			margin-left: 10px;
			font-size: 2.4rem;
		}
		.support_flow h3 .flow_num{
			margin-left: -10px;
			margin-bottom: 10px;
			width: 40%;
		}
		
		.support_case{
			display: block;
			margin: 0 10px;
		}
		.support_case li{
			display: block;
			margin-top: 20px;
			width: auto;
		}
		.support_case li:last-of-type{
			margin-top: 30px;
		}
		.support_case li:last-of-type::before{
			top: -45px;
			left: 50%;
			transform: translate(-50%, 0);
		}
	}
	
	/* よくあるご質問 */
	.faq_list dl{
		padding: 10px;
	}
	.faq_list dd{
		margin-top: 0;
		padding: 10px;
		padding-top: 20px;
	}
	
	/* 相談・問合せ */
	#contact_form{
		width: auto;
	}
	#contact_form dl{
		display: block;
		flex-wrap: wrap;
		padding: 12px 0;
	}
	#contact_form dt{
		width: auto;
	}
	#contact_form dt, #contact_form dd.item_status{
		display: inline-block;
		vertical-align: middle;
	}
	#contact_form dl dd:last-of-type{
		margin-top: 10px;
	}
	#contact_form .submit_btn input[type="button"]{
		margin: 0 0 20px;
		padding: 16px;
	}
	@media screen and (max-width: 760px){
		#contact_form label{
			display: block;
			margin-left: 0;
		}
	}
	
	/* 追伸 */
	@media screen and (max-width: 760px){
		.ps_container{
			padding: 15px;
		}
	}
	
	/* フッター */
	#pagetop{
		width: 40px;
		height: 40px;
		right: 6px;
		bottom: calc(80 / 360 * 100vw);
	}
	
	#footer{
		padding-bottom: calc(78 / 360 * 100vw);
		z-index: 99999;
	}
	
	@media screen and (min-width: 760px){
		#pagetop{
			bottom: 120px;
		}
		
		#footer{
			padding-bottom: 114px;
		}
	}
	
	/* お問い合わせ(フッター固定) */
	#sp_contact{
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 9999;
		background: rgba(0,0,0,0.6);
	}
	#sp_contact > a{
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 3px 0;
		text-decoration: none;
		text-align: center;
		width: 44%;
	}

	#sp_contact .line{
		    width: 12%;
	}

	#sp_contact .line img{
		width: 100%;
		height: auto;
	}
	#spft_tel{
		background: #F6EDFA;
		color: inherit;
	}
	
	#spft_tel_num{
		font-size: calc(20 / 360 * 90vw);
		font-weight: bold;
	}
	#spft_tel_num::before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		width: calc(16 / 360 * 100vw);
		height: calc(20 / 360 * 100vw);
		background: url(img/ico_phone.svg) no-repeat left center;
		background-size: contain;
	}
	
	#spft_time{
		font-size: calc(12 / 360 * 95vw);
	}
	
	#spft_mail{
		background: #F2AA00;
		color: #FFF;
		font-size: calc(14 / 360 * 96vw);
	}
	#spft_mail::before{
		content: "";
		display: inline-block;
		vertical-align: middle;
		margin-right: 4px;
		width: calc(16 / 360 * 100vw);
		height: calc(14 / 360 * 100vw);
		background: url(img/ico_mail.svg) no-repeat left center;
		background-size: contain;
	}
	@media screen and (min-width: 760px){
		#spft_tel_num{
			font-size: 3.6rem;
		}
		#spft_time{
			font-size: 2rem;
		}
		#spft_mail{
			font-size: 2.4rem;
		}
		#spft_mail::before{
			margin-right: 10px;
		}
	}


@keyframes shiny {
    0% { left: -20%; }
    10% { left: 120%; }
    100% { left: 120%; }
}

.shiny-btn {
    position: relative;
    display: block;
    width: 100%;
    height: 100%px;
    overflow: hidden;
}

.shiny-btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 40px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .5) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}



/*　ハンバーガーメニューボタン　*/
.hamburger-menu{
position:fixed;
top:20px;
right:5px;
}
.hamburger-menu div {
  width: 35px;
  height: 5px;
  background-color: #21A685;
  margin: 6px 0 6px auto;
}
.hamburger-menu + .sidenavs:target {
  overflow-x: visible;
  /* ボックスからはみ出る箇所をそのまま表示 */
  width: 100%;
  display:block;
}
/* .sidenavs:target {
  overflow-x: hidden; */
  /* ボックスからはみ出る箇所を隠す */
  /* width: 0;
} */
/* ハンバーガーメニュー表示時 */
.sidenavs {
    height: 100%;
    width: 0;
    position: fixed;
    /* 画像の配置を指定 */
    z-index: 99!important;
    top: 0;
    left: 0;
    background-color: #E8FAF5;
    overflow-x: hidden;
    /* 横スクロールを無効にする */
    padding-top: 60px;
    transition: 0.5s;  /* アニメーションの時間を0.5秒に指定 */
}
/* ハンバーガーメニュー表示時のリンク */
.sidenavs a {
	display: none;

  padding: 6px 0;
  text-decoration: none;
  font-size: 16px;
  text-align: center;
  color: #21A685;
  /* display: block; */
  transition: 0.3s;
  /* アニメーションの時間を0.3秒に指定 */
}
.sidenavs:target a {
	display: block;
}
/* クローズボタン */
.sidenavs .close-btn {
  position: absolute;
  /* 親要素との絶対位置を指定 */
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
}


  /*弁護士費用*/
.fee_new_box{
display: none!important;
}
.fee_new_box_img{
display: none!important;
}

.fee_new_box_sp{
border:3px solid #19856B;
background: #fff;
margin-bottom: 10px;
padding-bottom: 2%!important;
}
.fee_new_box_img_sp{
background: #fff;
width:92%!important;
margin-left: auto;
margin-right: auto;
}
.fee_new_box_img_sp img{
width:100%;
height:auto;
}
.fee_new_box_h3{
color:#fff;
font-size:16px;
font-weight:bold;
text-align: center;
padding:5px;
background: #19856B;
}
.notes{
font-size:10px!important;
margin-left: 1em;
text-indent: -1em;
}

.ta_fee_new_box{
width:100%;
border-left:3px solid #19856B;
border-right:3px solid #19856B;
background: #fff;
margin-bottom: 10px;
}
.ta_fee_new_box th,.ta_fee_new_box caption{
color:#fff;
font-size:16px;
font-weight:bold;
text-align: center;
padding:10px;
background: #19856B;
padding: 2%;
}
.ta_fee_new_box td{
padding: 2%;
width:50%;
font-size:14px;
}
.yellow_box{
background: #FFF277;
color:#000;
padding: 2%;
text-align: center;
font-size:16px;
font-weight:bold;
}
.bg_gray{
background: #F0F0F0;
}
.ft-or{
font-size:22px!important;
color:#167961;
}
.lft_box{
color:#fff!important;
background: #000;
padding: 2% 0;
text-align: center;
font-size:14px;
font-weight:bold;
width:100%!important;
display: block;
}
.rgt_box{
text-align: center;
font-size:14px;
font-weight:bold;
width:100%!important;
display: block;
vertical-align: middle;
padding-top:2%;
}
.zero{
font-size:30px!important;
}
.pad{
margin-top: 3%;
margin-bottom: 2%;
}
.notes{
font-size:12px!important;
}
.ft-light{
font-weight:lighter!important;
font-size:14px!important;
}
.ft-sml{
font-size:14px!important;
}
.mrk{
background: linear-gradient(transparent 0%, #fff799 0%);
font-weight: bold;
color:#000!important;
}
.spNone{
display:none!important
}
.box_01{
margin-top: 6%!important;
border-top:3px solid #19856B !important;
border-bottom:3px dashed #19856B !important;
padding-bottom:4%!important;
}
.box_02{
margin-top: -4%!important;
border-bottom:3px solid #21A685!important;
border-top:3px dashed #21A685!important;
padding-top:4%!important;
}


table.tbl_jr{
  border: solid 1px #666;
  border-collapse: collapse;
  margin: 20px auto 30px;
}

table.tbl_jr tr {
    display: flex;
    flex-wrap: wrap;
}

table.tbl_jr th,
table.tbl_jr td{
  display: inline-block;
  box-sizing: border-box;
  padding: 7px 5px;
/*  border: solid 1px #666;8
  border-collapse: collapse;*/
  vertical-align: middle;
}
.th_tt01{
  color: #333;
  background: #fc9;
  width: 100%;
}

.th_tt02{
  color: #333;
  background: #fffae5;
  width: 30% !important;
}

table.tbl_jr td{
  color:#333;
  width: 68% !important;
}


.itm-hide{
  display: none;
}

#ontent_page {
    width: 94.5%;
    margin: 10px auto 0;
}
button.more {
  cursor: pointer;
  width: 120px;
  margin: 80px auto 20px;
  display: block;
  background-color: #666;
  color: #fff;
  padding:10px 15px;
  border: none;
  outline: 0;
  transition: .2s;
  -erbkit-transition: .2s;
}
 
button.more::after {
  content: "もっと見る";
  transition: .2s;
  -erbkit-transition: .2s;
}

button.more.on-click::after{
  content: "閉じる";
}



#js-show-popup {
  font-size: 12px;
  display: block;
  margin-top: 1.5em;
  padding: 6px 0;
  text-align: center;
  color: #21A685;
  transition: 0.3s;
}

.popup {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: .6s;
}
.popup.is-show {
  opacity: 1;
  visibility: visible;
}
.popup-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 80%;
  max-width: 600px;
  padding: 30px;
  background-color: #fff;
  z-index: 2;
}

.popup-inner form{
  display: flex;
  flex-wrap: wrap;
}

.popup-inner form input[type="email"]{
  margin:5px 10px 0 0;
  width: 250px;
  padding: 5px 0;
}

#js-cl-ctn{
    cursor: pointer;
    background: #21A685;
    color: #fff;
    border: none;
    padding: 3px 10px;
    margin: 5px 0 0 0;
}

.black-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.8);
  z-index: 1;
  cursor: pointer;
}

.top-flow_inner{
  position: relative;
}

/* ===== Renewal theme compatibility fixes ===== */
/* PC: restore desktop fee elements. The original mobile fee rules below
   are outside the mobile media query, so they otherwise affect desktop too. */
@media screen and (min-width: 769px) {
  .fee_new_box,
  .fee_new_box_img {
    display: block !important;
  }

  .fee_new_box_sp,
  .ta_fee_new_box.pcNone {
    display: none !important;
  }

  .ta_fee_new_box.spNone {
    display: table !important;
  }
}

@media screen and (max-width: 768px) {

	#sp_contact {
		display: flex !important;
		flex-wrap: wrap !important;
		width: 100% !important;
	}

	#sp_contact > #spft_tel,
	#sp_contact > #spft_mail {
		flex: 0 0 44% !important;
		width: 44% !important;
		box-sizing: border-box !important;
	}

	#spft_line {
		display: flex !important;
		flex: 0 0 12% !important;
		width: 12% !important;
		align-items: center !important;
		justify-content: center !important;
		background: #06c755 !important;
		box-sizing: border-box !important;
	}

	#spft_line img {
		display: block !important;
		width: 60px !important;
		max-width: 80% !important;
		height: auto !important;
		margin: 0 auto !important;
	}

	#sp_contact .riyn02 {
		flex: 0 0 100% !important;
		width: 100% !important;
	}
}