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

Service name produced by rakus

*/

/* top_main */
a:hover img {
	opacity: 0.85;
}

.top_main {
  background: #fff;
}
.top_main__inner {
  position: relative;
  max-width: 970px;
  /*height: 478px;*/
  margin: 0 auto;
}
.top_main__img {
  position:relative;
  height: 478px;
  background:url(../tps/img/top/top_main_img.jpg) no-repeat 50% 0;
  text-indent: -9999px;
  margin-bottom: 0;
}
.top_main__btn {
  position: absolute;
  top: 330px;
  left: 0;
}
.top_main__note {
  position: absolute;
  left: 0;
  bottom: 1rem;
  color: #686767;
  font-size: 10px;
  line-height: 1.6;
}
/* index AB test */
.top_main__img_02 {
  position:relative;
  height: 478px;
  background:url(../tps/img/top/top_main_img_02.jpg) no-repeat 50% 0;
  text-indent: -9999px;
  margin-bottom: 0;
}
.top_main__img_03 {
  position:relative;
  height: 438px;
  background:url(../tps/img/top/top_main_img_03.jpg) no-repeat 50% 0;
  text-indent: -9999px;
  margin-bottom: 0;
}
.top_main__note_02 {
display: block;
position:relative;
color: #686767;
font-size: 10px;
line-height: 1.6;
text-align: right;
margin-bottom: 40px;
}
@media screen and (max-width: 767px){
.top_main__img_02 {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background-image: none;
  text-indent: 0;
  text-align:right;
}
.top_main__img_03 {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background-image: none;
  text-indent: 0;
  text-align:right;
}
}
@media screen and (max-width: 960px){
  .top_main__img {
    background-position: 100% 100%;
    background-size: 100% auto;
    height: 49rem;
  }
} /* @media */


/* = CTA エリア
----------------------------------------------- */
.cta {
	padding: 2rem 0 0;
	color: #fff;
	background: #007bc7;
}
.cta__inner {
	max-width: 1000px;
	margin: 0 auto;
}
.cta__text {
  font-size: 2.5rem;
  text-align: center;
  height: 3.5rem;
	margin: auto;
	padding-top: 0.3rem\0;
}
.cta__text.sp {
	 margin: 0 3%;
}
.cta__btn__wrap {
	overflow: hidden;
	padding-bottom: 30px;
}

.cta__btn__wrap .cta__btn__left {
	float: left;
	width: 48%;
	margin-right: 4%;
}

.cta__btn__wrap .cta__btn__right {
	float: right;
	width: 48%;
}
.cta__btn {
	padding: 1.4rem 0 2rem;
	text-align: center;
}

.cta__btn a {
	display: block;
	background: #fff;
	box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  color: #fff;
}
.cta__btn img {
	width: 100%;
	height: auto;
}
.cta__btn a.btn_base {
box-sizing: border-box;
font-size: 1.8rem;
font-weight: bold;
  display: block;
  padding:  1.2em 1em;
  background-color: #F8A411;
  background-image: -webkit-linear-gradient(270deg, rgba(235, 127, 0, 0) 0%, #eb7f00 100%);
  background-image: linear-gradient(180deg, rgba(235, 127, 0, 0) 0%, #eb7f00 100%);
  border-top: 1px solid #ffc359;
  border-bottom: 1px solid #FAA610;
  border-left: 1px solid #FAA610;
  border-right: 1px solid #FAA610;
border-radius: 4px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  color: #FFF;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  -webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;
}
.cta__btn a.btn_base:hover {
background-image:none;
background-color: #F8A411;
}
.cta__btn a.btn_style {
 box-sizing: border-box;
 font-size: 1.8rem;
  font-weight: bold;
  display: block;
  padding:  1.2em 1em;
  background-color: #F8A411;
  /*background-image: -webkit-linear-gradient(270deg, rgba(235, 127, 0, 0) 0%, #eb7f00 100%);
  background-image: linear-gradient(180deg, rgba(235, 127, 0, 0) 0%, #eb7f00 100%);*/
  border-radius: 5px;
  box-shadow: 0 5px 0 rgba(85, 64, 27, 1);
  color: #FFF;
  text-decoration: none;
  text-align: center;
  vertical-align: middle;
  border: 3px solid #F8A411;
  /*-webkit-transition: background-color 0.25s ease-out;
  transition: background-color 0.25s ease-out;*/
}
.cta__btn a.btn_style:hover{ 
  background-color: #FFF;
  color: #F8A411;
  border: 3px solid #F8A411;
}

@media screen and (max-width: 767px) {
.pc_none .cta__btn a.btn_base {width: 100%;
margin: 0 auto;
font-size: 1.5rem;
display: block;
}
}

.cta__btn .sp{
	margin-top: 0.5rem;
}
.cta__type {
	max-width: 800px;
	margin: 1.6rem auto 1.5rem;
}
.cta__type span {
	position: relative;
	display: inline-block;
	padding: 0.7rem 2rem 0.5rem 1.5rem;
	color: #218cd4;
	background: #fff;
	font-size: 1.9rem;
}
.cta__type span:after {
	display: block;
	content: "";
	position: absolute;
	bottom: -12px;
	left: 119px;
	width: 0;
	height: 0;
	border-top: 6px solid #fff;
	border-right: 6px solid #fff;
	border-bottom: 6px solid transparent;
	border-left: 6px solid transparent;
}
.cta__lead {
	margin: 0 0 2rem;
	font-size: 2.2rem;
	text-align: center;
}
.cta__tel {
	margin: 0.5rem 0 5rem;
	color: #fff;
	background: #007ac6;
}
.cta__tel dl {
	display: table;
	width: 100%;
}
.cta__tel dt {
	display: table-cell;
	width: 94px;
	border-right: 1px solid #218cd4;
	vertical-align: middle;
	text-align: center;
}
.cta__tel dd {
	display: table-cell;
	padding: 1.2rem 0 0.7rem 2.5rem;
	color: #fff;
	vertical-align: middle;
}
.cta__contact {
	margin: 0 0 1rem;
	font-size: 1.4rem;
}
.cta__num {
	float: left;
	width: 210px;
	font-size: 1.8rem;
}
.cta__num + .cta__num {
	margin-right: 2rem;
}
.cta__num li {
	margin: 0 0 0.5rem;
}
.cta__num a {
	color: #fff;
}
.cta__time {
	float: left;
	width: 210px;
	font-size: 1.6rem;
}

/* = cta_fixed
----------------------------------------------- */
.cta_fixed {
	display: none;
	position: fixed;
	top: 40%;
	right: 0;
	margin-top: -108px;
	z-index: 3333;
}
.cta_fixed a {
	display: block;
	background: #fff;
}
.cta_fixed a:hover img {
	opacity: 0.85;
}


/* top_media */
.top_media {
}
.top_media__inner {
  display: table;
    width: 900px;
    margin: 0 auto;
    background: #fff;
}
.top_media__item {
  display: table-cell;
  vertical-align: top;
  width: 50%;
  background: #fff;
}
.top_media__item_inner {
}
.top_media__title {
  margin: 6rem 0 2rem;
  font-size: 3.6rem;
  line-height: 5.6rem;
  text-align: left;
}
.top_media__text {
  margin: 0 0 1rem;
    font-size: 1.3rem;
    line-height: 1.285714;
    color: #007bc7;
	text-align: left;
}
.top_media__tvcm .top_media__item_inner {
  text-align: center;
}
.top_media__tvcm iframe {
  vertical-align: bottom;
}
.top_menu__set {
  max-width: 396px;
  margin: 0 auto;
}
.top_media__facebook {
  position: relative;
}
.top_media__facebook__title {
}
.top_media__share__box{
  width: 310px;
  margin: 0 auto;
}
.top_media__share {
  width: 100%;
  max-width: 31.5rem;
  margin: 0 auto 1rem;
  text-align: right;
}
.top_media__timeline {
  width: 100%;
  max-width: 31.5rem;
  margin: 0 auto;
}
.top_media__headingline {
  max-width: 320px;
  margin: 0 auto;
}


/*「楽楽精算」スペシャルムービー A*/
.special-movie {
	margin-bottom: 4rem;
}
.special-movie br{
	display: none;
}
.special-movie h2{
	margin-bottom: 1rem;
	margin-top: .5rem;
	font-size: 2.2rem;
	color: #007bc7;
    line-height: 1.4;
    font-weight: 500;
	letter-spacing: 0.05rem;
}
.special-movie .special-movie-inner {
	text-align: center;
    width: 900px;
    margin: 0 auto;
}
.presentation {
	position: relative;
    display: inline-block;
    margin: 0 auto 2.5rem auto;
    font-size: 1.3rem;
    background-color: #007BC7;
    color: #FFFFFF;
    border-radius: 20px;
    padding: 0.5rem 2rem;
	letter-spacing: 0.05rem;
}
.presentation .presentation-img {
	position: absolute;
    top: -180%;
    left: -8%;
}
.special-movie .download {
	position: relative;
	display: inline-block;
	margin-top: 2rem;
	padding: .5rem 1rem;
	color: #007bc7;
	font-size: 1rem;
	border: solid 1px #007BC7;
	box-sizing: border-box;
}
.special-movie .download:before,.special-movie .download:after {
	position: absolute;
	left: 50%;
	top: -30px;
	border: solid transparent;
	content: '';
	height: 0;
	width: 0;
	border-width: 15px;
	margin: 0 0 0 -15px;
}
.special-movie .download:before {
	border-bottom-color: #007BC7;
}
.special-movie .download:after {
	border-bottom-color: #FFFFFF;
	top: -28px;
}
.special-movie .download a {
	color: #FF8701;
	font-weight: bold;
	text-decoration: underline;
}
@media all and (-ms-high-contrast:none){
  .presentation  {
    padding: .8rem 3rem 0px 3rem;
  }
  .special-movie .download {
  padding: .8rem 1rem 0px 1rem;
  }
}

@media screen and (max-width: 900px){
	.accounting_benefits__text {
		padding: 4rem 35% 4rem 5%;
		font-size: 2.8rem;
	}
	.accounting_benefits__img {
		max-width: 380px;
	}
}

@media screen and (max-width: 767px) {
	.special-movie .special-movie-inner {
		max-width: 100%;
		text-align: center;
		width: 100%;
		padding: 0 1.5rem 1.5rem;
    	box-sizing: border-box;
	}
	.special-movie {
		margin-bottom: 2rem;
	}
	.special-movie br {
		display: block;
	}
	.special-movie h2{
		font-size: 1.5rem;
	}
	.presentation {
		position: relative;
		margin:0 auto 2.5rem auto;
		font-size: 0.8rem;
		display: block;
		line-height: 130%;
	}
	.presentation .presentation-img {
		position: absolute;
		top: -140%;
		left: -2%;
	}
	.top-main-cta-inner {
		padding: 0;
	}
	.top-main-btn {
		width: 40%;
		right: 0;
		top: -250%;
	}
	.intro__contents {
		width: auto;
	}
	.special-movie .download {
		display: block;
		line-height: 150%;
	}		
}

@media screen and (max-width: 539px){
	.presentation .presentation-img {
		width: 80px;
		position: absolute;
		top: -55%;
		left: -4%;
	}
	.special-movie .download span {
		display: block;
	}

}/* @media */

/* = display switch(pc or sp)
----------------------------------------------- */
.sp {
	display: none;
}
.pc {
	display: block;
}

/*--------------------------------------------------------

20190508 「楽楽精算」スペシャルムービー B

----------------------------------------------------------*/
.special-movie_b {
	margin-bottom: 4rem;
    color: #007bc7;
    text-align: center;
}
.special-movie_b br{
	display: none;
}
.special-movie_b h2{
	font-size: 2.2rem;
    line-height: 1.6;
    font-weight: 600;
	letter-spacing: 0.05rem;
}
.special-movie_b .intro__header2__txt{
	font-size: 1.6rem;
}
.special-movie_b .movie-area{
	margin: 2rem auto 0;
}
.special-movie_b .movie-area iframe{
	width: 800px;
    border: solid 1px #0078C9;
}
.special-movie_b .special-movie-inner {
	text-align: center;
    width: 900px;
    margin: 0 auto;
}
.special-movie_b .movie-area2{
    background: #ebebeb;
    border-radius: 10px;
    max-width: 900px;
    margin: 3rem auto 0;
    padding: 1.5rem;
}
.special-movie_b .movie-area2 h3{
    font-size: 1.2rem;
    font-weight: 600;
}
.special-movie_b .movie-area2__inner{
    display: flex;
    justify-content: center;
	margin: 1rem auto 0;
    max-width: 800px;
}
.special-movie_b .movie-area2__inner > iframe{
    max-width: 30%;
    height: auto;
    margin: 0 1%;
}
    
@media screen and (max-width: 900px){
    .special-movie_b .movie-area {
        margin: 2rem 1rem 0;
    }
    .special-movie_b .movie-area iframe {
        width: 100%;
    }
    .special-movie_b .movie-area2 {
        margin: 3rem 1rem 0;
    }
}
    
@media screen and (max-width: 767px) {
	.special-movie_b .special-movie-inner {
		max-width: 100%;
		text-align: center;
		width: 100%;
		padding: 2rem 1.5rem 1.5rem;
    	box-sizing: border-box;
	}
	.special-movie_b {
		margin-bottom: 2rem;
	}
	.special-movie_b br {
		display: block;
	}
	.special-movie_b h2{
		font-size: 1.5rem;
	}
    .special-movie_b .intro__header2__txt {
        font-size: 1.2rem;
        line-height: 1.2;
    }
    .special-movie_b .movie-area {
        margin: 1.3rem auto 0;
    }
    .special-movie_b .movie-area iframe{
        width: 100%;
        height: 50vw;
    }
    .special-movie_b .movie-area2 {
        margin: 3rem 0 0;
    }
    .special-movie_b .movie-area2 h3 {
        font-size: 0.9rem;
    }
    .special-movie_b .movie-area2__inner{
        width: 100%;
        flex-direction: column;
    }
    .special-movie_b .movie-area2__inner > iframe {
        max-width: 100%;
        margin: 1% auto;
    }	
}


/*--------------------------------------------------------

スマートフォン

----------------------------------------------------------*/
@media screen and (max-width: 767px){
	
/* top_main */
.top_main__inner {
  height: auto;
}
.top_main__box {
  position: relative;
}
.top_main__img {
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  background-image: none;
  text-indent: 0;
  text-align:right;
}
.top_main__img__block {
  display:inline-block;
}
.top_main__btn {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
}
.top_main__text {
  max-width: 640px;
  margin: 0 auto;
}
.top_main__note {
  position: static;
  padding: 0.5rem 1rem;
  line-height: 1.2;
}
	
/* = CTA エリア
----------------------------------------------- */
.cta {
	padding: 1.5rem 0;
}
.cta__inner {
	max-width: 640px;
	width: 90%;
	padding: 0;
}
.cta__text {
  font-size: 1.2rem;
  line-height: 1rem;
  text-align: center;
  color: #007bc7;
  background: #fff;
  border-radius: 0.5rem;
  height: auto;
  max-width: 516px;
  margin: auto auto;
  height: auto\0;
  padding-top:0\0;

}

.cta__btn__wrap {
	padding: 0.5rem 0.5rem 0rem;
}
.cta__btn__wrap .cta__btn__left {
	float: none;
	width: 100%;
	margin-right: 4%;
}

.cta__btn__wrap .cta__btn__right {
	float: none;
	width: 100%;
}
.cta__btn {
    padding: 0;
}
.cta__btn a {
	box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.cta__type {
	margin: 1.2rem 0 1.7rem;
}
.cta__type span {
	display: block;
	padding: 0.7rem 0 0.5rem;
	font-size: 1.4rem;
	text-align: center;
}
.cta__type span:after {
	left: 30px;
}
.cta__lead {
	margin: 0 1rem;
	font-size: 1.6rem;
	line-height: 1.4;
}
.cta__tel {
	margin: 0.5rem 0 1.2rem;
	border: none;
}
.cta__tel dt {
	width: 62px;
}
.cta__tel dd {
	padding: 1rem;
}
.cta__contact {
	margin: 0 0 0.8rem;
	font-size: 1.2rem;
	line-height: 1.4;
}
.cta__num {
	float: none;
	width: auto;
	font-size: 1.4rem;
}
.cta__num + .cta__num {
	margin-right: 2rem;
}
.cta__num li {
	margin: 0 0 0.6rem;
}
.cta__num li span {
	display: inline-block;
	min-width: 3em;
}
.cta__time {
	float: none;
	width: auto;
	margin: 0.9rem 0 0;
	font-size: 1.4rem;
}

.btn_base{
	height: 45px;
	padding-top: 10px !important;}
	
/* = cta_fixed
----------------------------------------------- */
.cta_fixed {
	top: auto;
	bottom: 0;
	opacity: 0.85;
	z-index: 10;
}
.cta_fixed a:hover img {
	opacity: 1;
}

	
/* top_media */
.top_media {
  width: 100%;
  padding-bottom: 3rem;
}

.top_media__inner {
  max-width: none;
  width: 100%;
  padding: 0 1.5rem;
  box-sizing: border-box;
  display: block;
}
.top_media__item {
  display: block;
  width: 100%;
}
.top_media__title {
  margin: 0 0 0.4rem;
  font-size: 2.0rem;
  text-align: center;
}
.top_media__text {
  margin: 0;
  font-size: 1.0rem;
  line-height: 2.2rem;
  color: #007bc7;
  text-align: center;
}
.top_media__tvcm .top_media__item_inner {
  padding: 1.8rem 0 0;
}
.top_media__movie {
  position: relative;
  width: 100%;
}
	
@media screen and (max-width: 899px){
  .top_media__movie {
  padding-top: 1rem !important;
  padding-bottom: 1.5rem !important;
  }
} /* @media */

.top_media__movie iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}
.top_menu__set {
  max-width: none;
}
.top_menu__set img {
  width: 100%;
}
.top_media__facebook__title {
}
.top_media__share {
  max-width: 316px;
  margin: 0 auto 1rem;
  padding: 0;
  box-sizing: border-box;
}
.top_media__share__box {
  width: 100%;
}
.top_media__headingline {
  width: 100%;
  max-width: none;
  background: #fff;
  text-align: center;
}
.content__cta {
  margin: 0 auto 0;
  padding-top: 1.2rem;
  padding-bottom: 1.2rem;
}
.cta__layout {
  margin-top: 4rem; 
}
	


@media screen and (max-width: 767px) {
    .sp {
        display: block;
    }

    .pc {
        display: none;
    }


    .cta__btn__wrap .cta__btn__left {
        margin-bottom: 15px;
    }
}/* @media */