@charset "utf-8";
/* CSS Document */

* {
 box-sizing: border-box;
}

body, html {
	margin: 0 auto
}
body {
font-family: "Noto Sans JP", "ヒラギノ角ゴ W6", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
 position: relative;
 background:#ffffff url("../img/bg.jpg") top center repeat-y;
 background-size:1600px auto;
	font-size: 14px;
	color: #3c4753;
	margin: 0px;
	padding: 0px;
}
h1, h2, h3, h4, p {
	margin: 0px;
	padding: 0px;
}
ul, li, dl, dt, dd {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
}
img {
	margin: 0px;
	padding: 0px;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
}
a, a:visited {
	color: #3c4753;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
.mb_only{
display:none;
}

/*--------------------------------------------
トップページのヘッダー、MV
--------------------------------------------*/
#Header{
width: 100%;
position: absolute;
overflow: hidden;
top: 0;
left: 0;
z-index: 50;
display: flex;
justify-content: space-between;
align-items: center;
padding:10px 20px ;

}
#HeaderLeft{
width: 400px;
height: 66px;
display: flex;
align-items: center;
}
#HeaderLeft img{
display: block;
width: 100%;
height:auto;
}

#HeaderRight{
padding:0 60px;
}
#Header nav {
display: flex;
justify-content: flex-end;
width: 100%;
margin-bottom: 5px;
}
#Header nav ul {
display: flex;
width: 100%;
max-width: 900px;
justify-content: space-between;
}
#Header nav li {
margin: 0 20px;
}
#Header nav li a {
position: relative;
font-size: 16px;
font-weight: bold;
transition: all 0.1s ease-in;
color: #fff
}
#Header nav li a:hover {
text-decoration: none
}
#Header nav li a:after {
transition: width 0.2s cubic-bezier(0.19, 1, 0.22, 1);
content: "";
display: block;
width: 0%;
height: 1px;
background-color:#3c4753;
position: absolute;
left: 0px;
bottom: -1px;
}

#Header nav li a:hover:after {
width: 100%;
left: 0px;
bottom: -1px;
}

#SpMenu {
position: fixed;
top:0;
right:20px;
width: 60px;
height: 60px;
margin-top: 10px;
padding:17px 17px 0;
border-radius: 50px;
z-index: 1000;
background: #fff
}
#BtnMenu, #BtnMenu span {
display: inline-block;
transition: all .4s;
box-sizing: border-box;
}
#BtnMenu {
cursor: pointer;
position: relative;
width: 25px;
height: 30px;
}
#BtnMenu span {
position: absolute;
left:0;
width: 100%;
height: 2px;
background-color: #435972;
border-radius: 2px;
}
#BtnMenu span:nth-of-type(1) {
top: 0;
}
#BtnMenu span:nth-of-type(2) {
top: 6px;
}
#BtnMenu span:nth-of-type(3) {
top: 12px;
}
#BtnMenu span:nth-of-type(4) {
font-size:8.5px;
text-align: center;
height: 10px;
color: #435972;
background:none;
border-radius: none;
top: 18px;
}


#BtnMenu.active span:nth-of-type(1) {
	-webkit-transform: translateY(6px) rotate(-315deg);
	transform: translateY(6px) rotate(-315deg);
}
#BtnMenu.active span:nth-of-type(2) {
	opacity: 0;
}
#BtnMenu.active span:nth-of-type(3) {
	-webkit-transform: translateY(-6px) rotate(315deg);
	transform: translateY(-6px) rotate(315deg);
}

#VideoWrap {
width: 100%;
position: relative;
background-size:cover;
background: rgba(255,255,255,0.65)
}

.video-container {
width: 100%;
height:100vh;
position: relative;
}
#wrapper_videoPlay{
position: relative;
}
#wrapper_videoPlay:before{
position: absolute;
content:"";
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgb(1, 69, 44);
opacity: 0.4;
z-index: 1;
}

#Copy,#BackCopy{
position: absolute;
top: 55%;
left:50%;
transform: translate(-50% , -50%);
z-index: 20;
}
@keyframes copy{
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

@keyframes back_copy{
  0% {
    opacity: 0;
    }

  1% {
    opacity: 1;
  }
  100% {
    opacity: 1;
  }
}

#Copy{
animation: copy 0s;
}
#BackCopy{
z-index: 0;
opacity: 1;
animation: back_copy 4s;
}

/*#Copy{
transition-delay: 6500ms;
transition-duration: 2000ms;
}
*/
.inview{
opacity: 0;
filter: blur(6px);
transition: 100ms;
transition-delay: 100ms;
transition-duration: 500ms;
transition-timing-function: ease
}

.inview.show{
opacity: 1;
filter: blur(0);
}

#Copy.inview{
filter: blur(0px);
transition-delay: 890ms;/*開始されるまでの時間*/
transition-duration:1000ms;/*遷移するまでにかかる時間*/
}

#BackCopy{
transition-duration: 2000ms;
}

.image,
.leaf{
position: absolute;
pointer-events: none;
z-index: 2
}

.image img{
box-shadow: 9.804px 15.096px 27px 3px rgba(40, 100, 240, 0.15);
border-radius: 10px;
width: 100%;
height: auto
}

/* ヘッダーまわり */
#HeaderLeft{
transition-delay: 100ms;
}

#NavFreee{
transition-delay: 800ms;
}

#NavConsumer{
transition-delay: 850ms;
}

#NavBusiness{
transition-delay: 900ms;
}

#NavRecruit{
transition-delay: 950ms;
}

#SpMenu{
transition-delay: 1000ms;
}

#PhilosophyWrap{
width: 100%;
background:#fff;
}

#Philosophy {
width: 100%;
max-width: 1560px;
margin: 0 auto;
position: relative;
padding-top: 734px
}

.philosophy_text{
position: absolute;
width: 862px;
height: 387px;
top: 176px;
left: 50%;
transform: translate(-50% , 0);
text-align: center;
z-index: 3
}

#Philosophy h2.inview{
font-size:30px;
margin-bottom: 60px;
letter-spacing: 1px;
line-height: 2.0
}

#Philosophy h2 span{
background: -webkit-linear-gradient(0deg, #0884bd, #249066);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

#Philosophy p{
font-size:18px;
letter-spacing: 1px;
margin-bottom: 20px
}

#Philosophy p span{
font-weight: bold
}

#Philosophy .philosophy_last {
margin-top: 60px;
}

#Philosophy .philosophy_last p{
font-weight: bold;
background: -webkit-linear-gradient(0deg, #0884bd, #249066);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.leaf img{
width: 100%;
height: auto;
opacity: 0.25
}
.leaf01{
width: 264px;
height: 251px;
top:0px;
left:50px;
}
.leaf02{
width: 243px;
height: 287px;
top:67px;
left:1316px;
}
.leaf03{
width: 337px;
height: 262px;
top:473px;
left:80px;
}
.leaf04{
width: 266px;
height: 264px;
top:473px;
left:1201px;
}




/*--------------------------------------------
共通パーツ
--------------------------------------------*/
.text_content{
padding-left: 60px;
}

.text_content h2{
font-size:16px;
margin-bottom: 50px;
}

.text_content p{
font-size:16px;
line-height: 2
}

.text_content h2 img{
margin-right: 30px;
vertical-align: bottom;
}

a.link_detail{
position: relative;
display: block;
padding: 20px 10px;
margin:50px 0; 
font-size:20px;
font-weight: bold;
background: #fff;
box-shadow: 9.804px 15.096px 27px 3px rgba(40, 100, 240, 0.15);
text-align: center;
width: 100%;
max-width:400px;
}

a.link_detail:after{
position:absolute;
content:"";
top:50%;
right:20px;
transform: translate(0, -50%);
width: 15px;
height: 15px;
background:url("../img/arrow_off.svg") no-repeat center;
transition: .5s all;
}

a.link_detail:hover:after{
background:url("../img/arrow_on.svg") no-repeat center;
}

a.link_detail.link_border{
border:solid 1px #3c4753;
}

/*--------------------------------------------
クラウド会計、相続手続き
--------------------------------------------*/
.parallax{
position: relative;
padding-top: 100vh;
}

.parallax:before,
.parallax:after{
content: '';
display: block;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size:cover; 
background-image:none;
opacity: 0;
pointer-events: none;
transition-timing-function: ease;
transition-duration: 500ms;/*時間*/
transition-delay: 0ms;/*開始するタイミング*/
z-index:-1;
}

.parallax.freee:before{
background-image:url("../img/freee_bg.jpg");
opacity: 1;
}

.parallax.souzoku:before{
background-image:url("../img/souzoku_bg.jpg");
opacity: 1;
}
.parallax.fudosan:before{
background-image:url("../img/fudosan_bg.jpg");
opacity: 1;
}

#FreeeMenu,
#SouzokuMenu,
#FudosanMenu{
width: 100%;
max-width: 1560px;
margin:0 auto;
padding: 0 30px;
}

#Freee{
padding-top:10vh;
/*margin-bottom: 100vh;必須*/
margin-bottom: 180vh;/*必須*/
display: flex;
justify-content: flex-end;
}

.text_content_wrap{
width: 50%;
margin:0 auto;
padding: 0 30px;
position: fixed;
top: 200px;
left:0;
padding-left:calc((100vw - 1560px) / 2);
z-index: 100;
display: none;
}

#Freee .text_content_wrap{
z-index: 1000;
}

.freee #Freee .text_content_wrap,
.souzoku #Souzoku .text_content_wrap,
.fudosan #Fudosan .text_content_wrap{
display: block
}

#Freee .link_content_wrap,
#Souzoku .link_content_wrap,
#Fudosan .link_content_wrap{
width: 50%;
margin: 0 0 0 auto;
padding:200px 30px 0;
padding-right:calc((100vw - 1560px) / 2);
display: flex;
justify-content:center;
}


#Souzoku{
margin-bottom: 180vh;/*必須*/
}

#Fudosan{
margin-bottom: 100vh !important;/*必須*/
}











.freee_image,.souzoku_image,.fudosan_image{
display: none
}

.parallax .text_content h2,
.parallax .text_content p{
color:#fff;
}

h3.section_copy{
font-size:45px;
margin-bottom: 50px;
font-weight: bold;
color:#fff;
line-height: 1.6
}

p.section_sub_copy{
font-size:27px;
margin-bottom: 10px;
font-weight: bold;
line-height: 1.6
}

#Fudosan .text_content .b_810{
display: none
}

a.link_detail{
position: relative;
display: block;
padding: 20px 10px;
margin:50px 0; 
font-size:20px;
font-weight: bold;
background: #fff;
box-shadow: 9.804px 15.096px 27px 3px rgba(40, 100, 240, 0.15);
text-align: center;
width: 100%;
max-width:400px;
}

#FreeeMenu + a.link_detail,
#SouzokuMenu a.link_detail,
#FudosanMenu + a.link_detail{
display: none
}

a.link_detail.link_border{
border:solid 1px #3c4753;
}

#Souzoku a.link_detail{
box-shadow: 9.804px 15.096px 27px 3px rgba(0, 0, 0, 0.15);
}

#FreeeMenu .link_content ul{
margin:0 auto 50px;
width: 500px
}

#SouzokuMenu .link_content ul,
#FudosanMenu .link_content ul{
margin-bottom:50px;
width: 500px
}

.link_content li{
width: 90%;
margin: 0 auto;
padding: 10px 15px;
border-bottom:solid 1px #8598c0;
}

#Fudosan .link_content li {
border-bottom:solid 1px #fff;
}

.link_content li a{
display: block;
padding: 15px 10px;
font-size:20px;
font-weight: bold;
position: relative;
width: 100%;
color: transparent;
background: linear-gradient(to right, #2beffa 50%, #fff 50%) 100%;
background-clip: text;
background-size: 200% 100%;
transition: all 0.3s;
}

#SouzokuMenu .link_content li p{
padding: 15px 10px;
font-size:20px;
font-weight: bold;
width: 100%;
margin-bottom: 0
}

.link_content li a:hover{
text-decoration: none;
background-position: 0 100%;
}

a.link_detail:hover{
text-decoration: none;
background: #324e71;
color:#fff;
}

#Freee a.link_detail:hover,
#Souzoku a.link_detail:hover,
#Fudosan a.link_detail:hover{
background: #fff;
color:#038991;
}

.link_content li a span,
a.link_detail span{
position:absolute;
content:"";
top:50%;
right:10px;
transform: translate(0, -50%);
width: 36px;
height: 36px;
border-radius:50%;
background: #fff;
transition: .5s all;
}

a.link_detail span{
background: #eaeff4;
}

a.link_detail:hover span{
background: #61b7bc
}

.link_content li a:hover span{
background: #28dce6
}

.link_content li a:after{
position:absolute;
content:"";
top:50%;
right:20px;
transform: translate(0, -50%);
width: 15px;
height: 15px;
background:url("../img/arrow_off.svg") no-repeat center;
transition: .5s all;
}

.link_content a:hover:after{
background:url("../img/arrow_on.svg") no-repeat center;
}

#FreeeMenu .freee_advisor img{
display: block;
margin: 0 auto 30px;
}

#FudosanMenu .fudosan_img img {
display: block;
margin: 0 auto 30px;
}

#FreeeMenu .freee_advisor p{
font-size:16px;
text-align: center;
margin-bottom: 50px;
color: #fff
}

#SouzokuMenu .gradient{
padding:3px 10px;
background-image: -webkit-linear-gradient( 0deg, rgb(12,161,173) 0%, rgb(123,203,129) 100%);
border-radius: 5px;
margin: 0 10px 0 20px;
}

#SouzokuMenu .link_content li{
border-bottom:solid 1px #ccc;
}

#SouzokuMenu .link_content p{
color:#fff;
margin-bottom: 20px;
font-size:16px;
width: 500px;
line-height: 2.0
}

#SouzokuMenu .link_content p.souzoku_menu_title{
color:#fff;
font-size:26px;
font-weight: bold;
margin-bottom: 50px;
}

#RecruitWrap{
width: 100%;
background: #fff;
padding: 200px 0 350px;
margin-bottom: 0;
overflow: hidden
}

#Recruit{
width: 100%;
max-width: 1560px;
margin:0 auto;
padding: 0 0 0 30px;
display: flex;
justify-content: space-between;
}

#Recruit .text_content{
width:700px;
opacity: 1;
top:0;
}

#Recruit .section_copy{
color: #3c4753;
}


#Recruit .link_detail{
box-shadow:none;
}

#Recruit .image_content{
width:calc(100% - 700px);
position: relative
}

#Recruit .image_content .image01{
top:0;
right:10px;
left: auto;
width:552px;
height:578px;
}

#Recruit .image_content .image02{
top:588px;
right:505px;
width:270px;
height:282px;

}

#Recruit .image_content .image02 img{
margin-bottom: 100px
}

#AboutWrap{
width: 100%;
padding: 80px 10px;
margin-bottom: 0;
background: url("../img/about_bg.jpg") no-repeat center;
background-size:cover;
overflow: hidden
}

#About{
width: 100%;
max-width: 1560px;
margin: 0 auto;
}

#About h2{
text-align: center;
color:#fff;
font-size:45px;
margin:0 auto 80px ;
}

#About h2 img{
display: block;
margin:0 auto 50px;
}

#About p{
text-align: center;
color:#fff;
font-size:18px;
margin-bottom: 80px;
font-weight: bold;
line-height: 2.0;
}

#About .link_detail{
box-shadow: 9.804px 15.096px 27px 3px rgba(0, 0, 0, 0.15);
margin: 0 auto
}

#BlogWrap{
width: 100%;
padding: 80px 10px;
background: #fff
}

#Blog{
width: 100%;
max-width: 900px;
margin: 0 auto;
}

#Blog h2{
text-align: center;
font-size:45px;
margin:0 auto 80px ;
}

#Blog h2 img{
display: block;
margin:0 auto 50px;
}

#Blog p{
text-align: center;
font-size:18px;
margin-bottom: 80px;
font-weight: bold
}

#Blog .link_detail{
box-shadow: 9.804px 15.096px 27px 3px rgba(0, 0, 0, 0.15);
margin: 0 auto
}

#Blog #BlogBox{
margin: 0 auto 80px;
line-height: 1.7
}

#Blog .newsbox{
border-bottom: solid 1px #c7c8ca;
padding: 20px 10px;
overflow: hidden;
}

#Blog .newsbox .blogDate{
width: 25%;
float: left
}
#Blog .newsbox .blogTitle{
float: left;
}

#Blog .newsbox .blogTitle a{
display: inline;
font-size:16px;
font-weight: bold;
background: url("../img/blog_link_arrow.png") no-repeat right center;
padding-right: 30px;
}

#Blog .newsbox .Blogtxt{
float: left;
margin-left: 25%;
margin-top: 10px;
}

#Blog .newsbox p{
text-align: left
}

#Blog .link_detail{
box-shadow:none;
margin: 0 auto
}

#Service{
width: 100%;
background: #fff
}

#Service ul{
width: 100%;
display: flex;
justify-content: flex-start
}

#Service li{
position: relative;
width:calc(100% / 3);
}

#Service a{
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background: url("../img/link_business.jpg") no-repeat center ;
background-size: 100% ;
object-fit: cover;
transition: all 0.25s;
}

#Service li.link_consumer a{
background-image: url("../img/link_consumer.jpg");
}

#Service li.link_recruit a{
background-image: url("../img/link_recruit.jpg");
}

#Service a:after{
content: "";
display: block;
padding-top: 57%;
}

#Service a:hover{
text-decoration:none;
background-size: 105% ;
}

#Service a:before{
position: absolute;
width:100%;
height: 100%;
content:"";
background: rgba(66,66,66,0.60);
transition: all 0.5s;
opacity: 1;
}

#Service a:hover:before{
opacity: 0;
}

#Service a div{
width:80%;
max-width:400px;
margin: 0 auto;
text-align: center;
border:solid 1px #fff;
padding:4% 0 ;
color:#fff;
font-size:18px;
font-weight: bold;
z-index: 1;
}

#Service a:hover div{
color:#333;
background:#fff;
}

#Service div span{
position: relative;
}

#Service div span:before{
position:absolute;
content:"";
top:55%;
right:-50px;
transform: translate(0, -50%);
width: 20px;
height: 20px;
background:url("../img/arrow_on.svg") no-repeat center;
transition: .5s all;
}

#Service a:hover div span:before{
background:url("../img/arrow_off.svg") no-repeat center;
}

#ContactWrap{
width: 100%;
padding: 50px 10px;
margin-bottom: 0;
background:#fff;
overflow: hidden
}

#Contact{
width: 90%;
background: url("../img/contact_bg.jpg") repeat-y top center;
border-radius: 20px;
margin: 0 auto;
padding: 100px 10px;
}

#ContactInner{
width: 100%;
max-width: 850px;
margin: 0 auto
}

#Contact h2 img{
display: block;
margin:0 auto 50px;
}

#Contact p{
text-align: center;
color:#324e71;
font-size:24px;
margin-bottom: 80px;
line-height: 2.0;
font-weight: bold
}

#Contact ul{
width: 100%;
display: flex;
justify-content: space-between
}

#Contact li{
flex:1;
}

#Contact .link_detail{
box-shadow: 9.804px 15.096px 27px 3px rgba(0, 0, 0, 0.15);
margin: 0 auto;
padding: 25px 10px;
}

#Contact .tel-link{
display: block;
width: 340px;
}

#MenuWrap{
width: 100%;
background: #f2f4f6;
padding: 60px 10px;
}

#Menu{
width: 100%;
max-width: 1200px;
margin: 0 auto
}

#Menu h2{
font-size:22px;
border-bottom:solid 1px #cccccc;
margin-bottom:30px;
padding: 10px 5px
}

.menu_box{
width: 100%;
margin:0 auto 50px;
display: flex;
justify-content: space-between
}

.menu_box.menu_box_bottom{
margin:0 auto 60px;
}

.menu_box h3{
font-size:19px;
margin:0 0 20px 0;
}

.menu_cate{
flex: 1;
padding: 0 5px
}

.menu_cate ul{
padding-left: 16px;
}

.menu_cate li{
margin: 0 0 7px 20px;
}

.menu_cate li a{
position: relative;
font-size:16px;
margin:0;
text-indent: -20px;
}

.menu_cate li a:before{
position: absolute;
content:"";
width: 11px;
height: 16px;
background: url("../img/menu_arrow.svg") no-repeat center;
background-size:11px auto;
top:4px;
left: -17px
}

.menu_cate li a span:after{
transition: width 0.2s cubic-bezier(0.19, 1, 0.22, 1);
content: "";
display: block;
width: 100%;
height: 1px;
background-color:#3c4753;
position: absolute;
left: 0px;
bottom: -1px;
}

.menu_cate li a:hover span:after {
width: 0;
right: 0;
bottom: -1px;
}

.menu_box li.unpublished{
display: none;
}

.menu_cate li a:hover,
.menu_cate li a:hover span{
text-decoration: none;
border-bottom:none;
}

.menu_cate li p{
position: relative;
font-size:16px;
margin:0;
}

.menu_cate li p:before{
position: absolute;
content:"・";
width: 11px;
height: 16px;
top:0px;
left: -20px
}


footer {
background: #fff;
}

footer .footer_logo{
width: 100%;
background: #f2f4f6
}

footer .footer_logo div{
width: 100%;
max-width: 1560px;
margin:0 auto;
padding: 30px 10px;
display: flex;
justify-content: flex-end
}

footer .footer_logo img{
display: block;
width: 80%;
max-width: 280px;
height: auto
}

footer img{
display: block;
}

small{
display: block;
padding: 30px 10px;
text-align: center
}

.PageTop {
right: 20px;
bottom: 10px;
position: fixed;
z-index: 1000;
display: none
}

.PageTop a {
position: relative;
background :#324e71;
text-indent: -9999px;
display: block;
height: 61px;
width: 61px;
border-radius:30px;
transition: .5s all;
}

.PageTop a:hover {
background:#d1e1f5;
}

.PageTop a:before{
position: absolute;
content: "";
top: 50%;
right: 50%;
transform: translate(50%, -50%);
width: 20px;
height: 20px;
background: url("../img/pagetop_off.svg") no-repeat center;
}

.PageTop a:hover:before{
background:url("../img/pagetop_on.svg") no-repeat center;
}


@media screen and (max-width:1560px) {
.b_1560{
display: none
}
#Header{
padding:10px calc(100vw * 20 / 1560);
}
#HeaderLeft{
width:calc(100vw * 400 / 1560);
height:calc(100vw * 66 / 1560);
}

#Header nav {
margin-bottom:calc(100vw * 5 / 1560);
}
#Header nav ul {
max-width:calc(100vw * 900 / 1560);
}
#Header nav li {
margin: 0 calc(100vw * 20 / 1560);
}
#Header nav li a {
font-size:14px;
}


#SpMenu {
right:calc(100vw * 20 / 1560);
margin-top: calc(100vw * 10 / 1560);
}


h1{
font-size:calc(100vw * 30 / 1560);
letter-spacing:calc(100vw * 1 / 1560)
}

.inview{
filter: blur(6px);
}


#PhilosophyWrap{
width: 100%;
background-image: url("../img/philosophy_pc_top.jpg") ,url("../img/philosophy_pc_bottom.jpg") ;
background-repeat:no-repeat;
background-position: top center ,bottom center;
background-size:100% auto; 
background-color:#fff;
padding-top: 16.41025%;
padding-bottom:18.89745%;
}

#Philosophy {
max-width:auto;
position: static;
padding: 0
}

.philosophy_text{
position: static;
width:100%;
height:auto;
top:auto;
left: auto;
transform: translate(0 , 0);
margin-bottom: 40px
}

.leaf{
display:none;
}

/*--------------------------------------------
共通パーツ
--------------------------------------------*/
.text_content{
padding-left:calc(100vw * 60 / 1560) ;
}

.text_content h2{
font-size:15px;
margin-bottom: calc(100vw * 50 / 1560) ;
}

.text_content h2 img{
margin-right:20px;
}

a.link_detail span{
right:calc(100vw * 10 / 1560);
transform: translate(0, -50%);
width:calc(100vw * 36 / 1560);
height:calc(100vw * 36 / 1560);
border-radius:50%;
}

a.link_detail:after{
right:calc(100vw * 20 / 1560);
width:calc(100vw * 15 / 1560);
height:calc(100vw * 15 / 1560);
}

/*--------------------------------------------
クラウド会計、相続手続き
--------------------------------------------*/
#FreeeMenu,
#SouzokuMenu{
padding: 0 calc(100vw * 30 / 1560) ;
}

#Freee{
padding-top:10vh;
margin-bottom: 140vh;/*必須*/
}

#Freee .text_content_wrap,
#Souzoku .text_content_wrap{
width: 50%;
padding: 0 calc(100vw * 30 / 1560) ;
top:calc(100vw * 200 / 1560) ;
margin-left:0;
}

.text_content p{
font-size:16px;
}

#Freee .link_content_wrap,
#Souzoku .link_content_wrap{
padding:calc(100vw * 100 / 1560) calc(100vw * 30 / 1560) 0;
margin-right:0;
}


h3.section_copy{
font-size:calc(100vw * 42 / 1560);
margin-bottom:calc(100vw * 50 / 1560) ;
}
p.section_sub_copy{
font-size:calc(100vw * 27 / 1560);
}
a.link_detail{
margin:calc(100vw * 50 / 1560) 0;
font-size:15px;
}

#FreeeMenu .link_content ul{
margin:0 auto calc(100vw * 50 / 1560) ;
width: 400px
}

#SouzokuMenu .link_content ul{
margin-bottom:calc(100vw * 50 / 1560);
width: 400px
}
.link_content li{
padding:calc(100vw * 10 / 1560) calc(100vw * 15 / 1560);
}
.link_content li a{
padding:calc(100vw * 10 / 1560) calc(100vw * 15 / 1560);
font-size: 18px;
}

#FreeeMenu .freee_advisor img{
margin: 0 auto calc(100vw * 30 / 1560);
}

#FudosanMenu .fudosan_img img {
margin: 0 auto calc(100vw * 30 / 1560);
}

#SouzokuMenu .gradient{
padding:calc(100vw * 3 / 1560) calc(100vw * 10 / 1560);
border-radius:calc(100vw * 5 / 1560);
margin: 0 calc(100vw * 10 / 1560) 0 calc(100vw * 20 / 1560);
}

#SouzokuMenu .link_content p{
margin: 0 auto calc(100vw * 20 / 1560);
font-size: 15px;
width:340px
}

#SouzokuMenu .link_content p.souzoku_menu_title{
font-size:20px;
margin-bottom:calc(100vw * 50 / 1560);
margin-left: 0;
}

.link_content li a span{
right:calc(100vw * 10 / 1560);
transform: translate(0, -50%);
width:calc(100vw * 36 / 1560);
height:calc(100vw * 36 / 1560);
border-radius:50%;
}

.link_content li a:after{
right:calc(100vw * 20 / 1560);
width:calc(100vw * 15 / 1560);
height:calc(100vw * 15 / 1560);
}


#RecruitWrap{
padding:calc(100vw * 200 / 1560) 0 calc(100vw * 350 / 1560);
}

#Recruit{
padding: 0 0 0 calc(100vw * 30 / 1560);
}

#Recruit .text_content{
width:50%;
}

#Recruit .text_content p:not(.section_copy) {
font-size: 16px;
}
#Recruit .image_content{
width:49%;
}

#Recruit .image_content .image01{
right:calc(100vw * 20 / 1560);
width:calc(100vw * 552 / 1560);
height:calc(100vw * 578 / 1560);
}

#Recruit .image_content .image02{
top: calc(100vw * 608 / 1560);
right: calc(100vw * 503  / 1560);
width:calc(100vw * 270 / 1560);
height:calc(100vw * 282 / 1560);
left: auto;
}

#Recruit .image_content .image02 img{
margin-bottom:calc(100vw * 100 / 1560)
}

#AboutWrap{
padding:calc(100vw * 80 / 1560) calc(100vw * 10 / 1560);
}

#About h2{
font-size:calc(100vw * 45 / 1560);
margin:0 auto calc(100vw * 80 / 1560);
}

#About h2 img{
margin:0 auto calc(100vw * 50 / 1560);
}

#About p{
margin-bottom:calc(100vw * 80 / 1560);
}

#BlogWrap{
padding:calc(100vw * 80 / 1560) calc(100vw * 10 / 1560);
}

#Blog h2{
font-size:calc(100vw * 45 / 1560);
margin:0 auto calc(100vw * 80 / 1560);
}

#Blog h2 img{
margin:0 auto calc(100vw * 50 / 1560);
}

#Blog p{
margin-bottom: calc(100vw * 80 / 1560);
}

#Blog #BlogBox{
margin: 0 auto calc(100vw * 80 / 1560);
}

#Blog .newsbox .Blogtxt{
margin-left: 25%;
margin-top:calc(100vw * 15 / 1560);
}

#Service a div{
font-size:16px;
}

#Service div span:before{
right: -20px;
width: 15px;
height: 15px;
}

#ContactWrap{
padding:calc(100vw * 50 / 1560) calc(100vw * 10 / 1560);
}

#Contact{
padding: calc(100vw * 100 / 1560) calc(100vw * 60 / 1560);
}

#Contact h2 img{
margin:0 auto calc(100vw * 50 / 1560);
}

#Contact p{
font-size:18px;
margin-bottom:calc(100vw * 80 / 1560);
}

#Contact .link_detail{
box-shadow: 9.804px 15.096px 27px 3px rgba(0, 0, 0, 0.15);
margin: 0 auto;
font-size:20px;
}
#MenuWrap{
padding: 60px 20px;
}

.menu_box{
padding: 0 10px;
}

.menu_box.menu_box_bottom{
margin:0 auto;
}

footer .footer_logo div{
padding: 30px 20px;
}
.PageTop {
right: calc(100vw * 20 / 1560);
bottom: calc(100vw * 20 / 1560);
}
}



@media screen and (max-width:1200px) {
#Header nav li {
margin: 0 calc(100vw * 10 / 1560);
}
}


@media screen and (max-width:960px) {
body {
background-size: 1000px auto;
}
.pc_only{
display:none;
}

.mb_only{
display:block;
}

#HeaderLeft{
width:300px;
height: auto;
}

#HeaderRight{
display: none
}

#SpMenu {
right:10px;
width: 50px;
height: 50px;
margin-top: 10px;
padding:13px 12px 0;
}

#BackCopy img,
#Copy img{
width: 220px;
height: auto
}

#PhilosophyWrap{
width: 100%;
background-image: url("../img/philosophy_mb_top.jpg") ,url("../img/philosophy_mb_bottom.jpg") ;
background-repeat:no-repeat;
background-position: top center ,bottom center;
background-size:100% auto; 
background-color:#fff;
padding-top: 26.66666%;
padding-bottom:25.625%;
}

#Philosophy {
max-width:auto;
position: static;
padding: 0
}

.philosophy_text{
position: static;
width:100%;
height:auto;
top:auto;
left: auto;
transform: translate(0 , 0);
margin-bottom: 40px
}


/*--------------------------------------------
共通パーツ
--------------------------------------------*/
.text_content{
padding:0;
}

.text_content h2{
font-size: calc(100vw * 30 / 960);
margin-bottom: 40px;
text-align: center
}

.text_content h2 img{
margin: 0 auto 10px;
display: block;
}

.text_content p{
font-size:18px;
line-height: 2
}

a.link_detail{
margin:100px auto; 
width: 80%;
max-width:400px;
}
/*--------------------------------------------
クラウド会計、相続手続き、不動産賃貸業
--------------------------------------------*/
.parallax{
padding-top: 80vh;
}

#Freee{
padding-top:10vh;
/*margin-bottom: 100vh;必須*/
margin-bottom: 140vh;/*必須*/
display: block;
}
.freee_image,.souzoku_image,.fudosan_image{
display: block;
margin: 0 auto 100px;
width: 80%;
max-width: 464px;
height: auto
}
.content_m{
height:100px;
}
#Souzoku {
margin-bottom: 140vh;/*必須*/
}
#Fudosan {
margin-bottom: 100vh;/*必須*/
}
#Freee .text_content_wrap,
#Souzoku .text_content_wrap,
#Fudosan .text_content_wrap{
width: 100%;
padding: 0;
position:static;
top:auto;
left:auto;
display: block;
}

.freee #Freee .text_content_wrap,
.souzoku #Souzoku .text_content_wrap,
.fudosan #Fudosan .text_content_wrap{
display: block
}

#Freee .text_content h2 img,
#Souzoku .text_content h2 img,
#Fudosan .text_content h2 img{
display:none;
}

#Freee .text_content p:not(.section_copy),
#Souzoku .text_content p:not(.section_copy),
#Fudosan .text_content p:not(.section_copy){
font-size: 2.2vw;
text-align: center;
}


h3.section_copy{
font-size: calc(100vw * 47 / 960);
margin-bottom:50px;
text-align: center;
line-height: 1.6;
}
#Freee .text_content p.section_sub_copy{
font-size: calc(100vw * 27 / 960);
}

#Freee .link_content_wrap,
#Souzoku .link_content_wrap,
#Fudosan .link_content_wrap{
width: 100%;
padding:0;
margin-top: 100px;
}

#Freee .text_content a.link_detail,
#Souzoku .text_content a.link_detail,
#Fudosan .text_content a.link_detail{
display: none
}

#FeeeMenu + a.link_detail,
#Souzoku .link_content a.link_detail,
#Fudosan .link_content a.link_detail{
display: block;
}

#Fudosan .text_content .b_810{
display: block
}


.link_content{
width: 100%;
}

#FreeeMenu .link_content ul,
#SouzokuMenu .link_content ul,
#FudosanMenu .link_content ul{
width: 80%;
max-width: 400px;
margin: 0 auto 50px;
}

.link_content li{
width: 100%;
}
.link_content li a,
#SouzokuMenu .link_content li p{
padding: 15px 10px;
font-size:16px;
transition: none
}

.link_content li a span,
a.link_detail span{
position:absolute;
content:"";
top:50%;
right:10px;
transform: translate(0, -50%);
width: 36px;
height: 36px;
border-radius:50%;
background: #fff;
transition:none;
}

.link_content li a:after,
a.link_detail:after{
position:absolute;
content:"";
top:50%;
right:20px;
transform: translate(0, -50%);
width: 15px;
height: 15px;
background:url("../img/arrow_off.svg") no-repeat center;
transition:none;
}
#FreeeMenu .link_content,
#FudosanMenu .link_content{
display: flex;
flex-direction: column-reverse
}

#FreeeMenu + a.link_detail, 
#SouzokuMenu a.link_detail, 
#FudosanMenu + a.link_detail{
display:block
}

#FreeeMenu .freee_advisor p{
padding: 0 20px;
}

#FreeeMenu .freee_advisor p br{
display: none
}

#SouzokuMenu .gradient{
padding:3px 10px;
background-image: -webkit-linear-gradient( 0deg, rgb(12,161,173) 0%, rgb(123,203,129) 100%);
border-radius: 5px;
margin: 0 10px 0 20px;
}

#SouzokuMenu .link_content li{
border-bottom:solid 1px #ccc;
}
#SouzokuMenu .link_content p{
margin-bottom: 20px;
width: 100%;
padding: 0 20px;
}

#SouzokuMenu .link_content p br{
display: none
}

#SouzokuMenu .link_content p.souzoku_menu_title{
text-align: center;
font-size:26px;
margin-left: auto;
}

#RecruitWrap{
padding:calc(100vw * 100 / 960) 0;
}

#Recruit{
padding: 0;
display: block;
background: url("../img/recruit_bg_mb.jpg") no-repeat bottom center;
background-size:contain;
padding-bottom: 60.03125%
}

#Recruit .text_content{
width:100%;
top:auto;
}

#Recruit .image_content{
display: none
}

#Recruit .text_content p:not(.section_copy) {
font-size: 2.2vw;
padding: 0 6vw;
text-align: center;
}

#AboutWrap{
padding: calc(100vw * 100 / 960) 0;
}

#About h2{
font-size: calc(100vw * 30 / 960);
margin-bottom: 50px;
}

#About h2 img{
margin: 0 auto 10px;
}

#About p{
font-size: 2.2vw;
padding: 0 6vw;
font-weight: normal
}

#About .link_detail{
margin: 100px auto 0;
}

#BlogWrap{
padding:calc(100vw * 100 / 960) 0;
}

#About h2{
font-size: calc(100vw * 30 / 960);
margin-bottom: 50px;
}

#About h2 img{
margin: 0 auto 10px;
}

#Blog p{
font-size: 2.2vw;
padding: 0 6vw;
font-weight: normal
}

#Blog .link_detail{
margin: 100px auto 0;
}

#Blog #BlogBox{
padding: 10px;
margin: 0 auto
}

#Blog .newsbox .blogDate{
width: 100%;
float: none
}
#Blog .newsbox .blogTitle{
float: none;
}

#Blog .newsbox .Blogtxt{
float:none;
margin-left:0;
margin-top:0;
}

#Blog .link_detail{
margin: 50px auto 0;
}

#Service ul{
padding: calc(100vw * 80 / 960) 30px calc(100vw * 40 / 960);
display:block;
}

#Service li{
width:100%;
margin-bottom: 20px;
border-radius: 20px;
}
#Service a,
#Service a::before{
border-radius: 20px;
}

#Service li.link_recruit a{
background-position:top center;
}

#Service a::after{
padding-top: 36%;
}

#Service a div{
font-size:18px;
}

#Service div span:before{
right: -30px;
width: 20px;
height: 20px;
}

#ContactWrap{
padding: calc(100vw * 100 / 960) 30px;
}

#Contact{
width: 100%;
padding: calc(100vw * 80 / 960) 0;
}

#Contact h2 img{
display: block;
margin:0 auto 50px;
width: 188px;
height: auto
}

#Blog p{
font-size: 2.2vw;
padding: 0 6vw;
font-weight: normal
}

#Contact ul{
display: block;
}
#Contact ul li{
text-align: center
}

#Contact .link_detail{
margin: 50px auto 0;
}

#Contact .tel-link{
width: 80%;
max-width: 340px;
text-align: center;
display: block;
margin: 0 auto;
}

#Contact .tel-link img{
width:100%;
height: auto
}

#MenuWrap{
padding: 60px 20px;
}

.menu_box h2{
font-size:18px;
}

.menu_box h3{
font-size:16px;
margin:0 0 10px 0;
}

.menu_cate ul{
padding-left:5px;
}

.menu_cate li{
margin: 0 0 10px 16px;
}

.menu_cate li a{
font-size:14px;
}

.menu_cate li a:before{
width: 9px;
background-size:9px auto;
top: 3px;
left: -12px;
}

.menu_cate li p{
font-size:14px;
}

.menu_cate li p:before{
width: 9px;
height: 16px;
top:0px;
left: -12px;
}

.PageTop {
	right: 10px;
	bottom: 10px;
}
.PageTop a {
	height: 51px;
	width: 51px;
}
}


@media screen and (max-width:810px) {
#Header {
padding: 10px;
height: 70px
}

#HeaderLeft{
width: 70%;
max-width:300px;
height: auto;
}

#SpMenu {
right:10px;
}
#Philosophy {
padding: 0 20px;
}

.philosophy_text{
margin-bottom:calc(100vw * 40 / 810);
}

#Philosophy h2{
font-size:calc(100vw * 32 / 810);
margin-bottom:calc(100vw * 50 / 810);
}

.text_content h2,
#About h2,
#Blog h2{
font-size:20px;
}

a.link_detail {
margin: 50px auto;
}

/*ここから値変更は慎重に*/
/*#Freee .text_content_wrap {
margin-top:-25vh;
}*/

.parallax.souzoku:before{
background-image:url("../img/souzoku_bg_mb.jpg");
opacity: 1;
}



#Souzoku .text_content_wrap {
margin-top:0;
}

.freee #Freee .text_content_wrap,
.suozoku #Souzoku .text_content_wrap {
display: block;
}
.content_m{
height:100vh;
}
/*ここまで値変更は慎重に*/

#Freee .text_content p:not(.section_copy),
#Freee .text_content p:not(.section_sub_copy),
#Souzoku .text_content p:not(.section_copy),
#SouzokuMenu .link_content p,
#Fudosan .text_content p:not(.section_copy),
#Fudosan .text_content p:not(.section_sub_copy),
#Recruit .text_content p:not(.section_copy),
#About p,
#Blog p{
font-size: 17px;
padding: 0 20px;
text-align: left;
}

#Freee .text_content p.section_copy,
#Souzoku .text_content p.section_copy,
#Fudosan .text_content p.section_copy {
font-size: calc(100vw * 58 / 960);
text-align: center
}

 #Freee .text_content p.section_sub_copy{
font-size:18px;
}

#FreeeMenu .freee_advisor img{
width:50%;
max-width:278px;
height: auto
}


#FudosanMenu .fudosan_img img{
width:70%;
max-width:596px;
height: auto
}


#FreeeMenu .freee_advisor p{
margin-bottom: 0
}



#SouzokuMenu .link_content p.souzoku_menu_title {
font-size: 20px;
margin-bottom: 50px;
}

#SouzokuMenu a.link_detail {
margin: 50px auto 0;
}


.b_810, #Fudosan .text_content .b_810{
display: none
}

#About .link_detail {
margin: 50px auto 0;
}

#Blog .newsbox .blogTitle a {
font-size: 14px;
text-decoration: underline
}

#Blog .newsbox .blogTitle a:hover {
text-decoration: none
}
#Service ul,
#ContactWrap{
padding:30px 20px;
}

#Service a::after {
padding-top: 46%;
}

#Service a div {
font-size: 15px;
}

#Service div span::before {
right: -20px;
width: 12px;
height: 12px;
}

#Contact {
padding:60px 10px;
}

#Contact p {
font-size:3.2vw;
margin-bottom: 30px
}

#Contact a.link_detail {
width: 94%;
font-size: 15px;
margin: 30px auto 0;
box-shadow: 10px 10px 15px 3px rgba(0, 0, 0, 0.05);
}

#MenuWrap {
padding: 70px 10px;
}

#Menu h2.menu_toggle{
font-size: 19px;
margin-bottom:0;
padding: 15px 5px;
position: relative;
border-top: solid 1px #cccccc;
border-bottom:none;
cursor: pointer
}

#Menu h2.menu_toggle.last_toggle.active{
border-bottom:solid 1px #cccccc;
}

#Menu h2.menu_toggle:after{
position: absolute;
content: "";
width: 15px;
height: 15px;
background:url("../img/accordion_close.png") no-repeat center;
background-size:15px 15px; 
right:10px;
top:20px;
}

#Menu h2.menu_toggle.active:after{
background-image:url("../img/accordion_open.png");
}

.menu_box{
display:block;
}

.menu_box h3 {
font-size: 17px;
margin: 0 0 14px 0;
}

.menu_cate{
padding: 15px 5px;
}

.menu_cate ul {
padding-left: 0px;
}

.menu_cate li{
margin:0 0 14px 16px;
}

.menu_cate li a {
font-size: 15px;
}
footer .footer_logo div{
justify-content: center
}

#Freee .link_content_wrap{
margin-top: 50px;
}
}


@media screen and (max-width:720px) {
#Philosophy p{
font-size:15px;
text-align: left
}
.philosophy_last {
  margin-top: 60px;
}
}




@media screen and (max-width:500px) {
#HeaderLeft {
width: 50%;
}

#Philosophy h2.inview {
font-size: calc(100vw * 30 / 500);
margin-bottom: calc(100vw * 50 / 500);
}

.content_m{
height:300px;
}
}


@media screen and (max-width: 480px) {
.video-wrapper {
aspect-ratio: 1 / 1;
}
.video-content {
top:38%;
margin-top: 1rem;
}
}