@charset "utf-8";
/* Foundation
***********************************************************************/
*,
:before,
:after{
	box-sizing:border-box;
}
html{
	font-size: 62.5%;
	overflow-x: hidden;
}
body {
	position: relative;
	color: #252525;
	font-family: inherit;
	font-family:'Yu Gothic', '游ゴシック', Meiryo, 'メイリオ', Osaka, 'MS PGothic', arial, helvetica, sans-serif;
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.8;
	letter-spacing: .02em;
	min-width: 320px;
}
img{
	max-width:100%;
	vertical-align:middle;
	height:auto;
	-ms-interpolation-mode:bicubic;
}
:not(.img_box) > img,
.img_box{
	max-width:100%;
	text-align: center;
	line-height: 1;
}

/* a
***********************************************************************/
a{
	color: #15A9E8;
	text-decoration: none;
}

/* btn */
.btn {
	display:flex;
	justify-content: center;
	align-items: center;
	position: relative;
	padding: 10px 3rem 10px 1.6rem;
	min-width: 280px;
	height:80px;
	border:2px solid #053b6a;
	background: #053b6a;
	border-radius:.5rem;
	box-shadow: 0px 0px 10px -3px rgba(4,59,107,.36);
	color:#fff;
	font-size:2.4rem;
	font-weight:bold;
}
.btn_small {
	display:inline-flex;
	width:auto;
	min-width: auto;
	height:50px;
	font-size:1.6rem;
}
.btn::after {
	position: absolute;
	content: "";
	top: 50%;
	right:2rem;
	width: 14px;
	height: 14px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-webkit-transform: rotate(45deg) translateY(-50%);
	transform: rotate(45deg) translateY(-50%);
}
.btn.btn_small::after {
	width: 10px;
	height: 10px;
}
.btn_trial {
	background: #08b124;
}
.btn_pamphlet {
	background: #4da6ff;
}
.btn_contact {
	background: #053b6a;
}
.btn_comment{
	display: block;
	padding: 10px 16px;
	margin: 0 auto -16px;
	max-width: max-content;
	background: #043b6b;
	border-radius: 30px;
	color:#fff;
	line-height: 1;
	font-weight: bold;
	position: relative;
	z-index: 2;
}
.btn_area .btn_item + .btn_item {
	margin-top: 1.6rem;
}
/* layout
***********************************************************************/
.layout{
	width: 100%;
	max-width: 100rem;
	padding: 0 20px;
	margin: 0 auto;
}

/* gnav
***********************************************************************/
header{
	//position: fixed;
	background:#196cba;
	z-index: 3;
}
nav > .layout{
	//height: 50px;
	//background: #fff;
	position: relative;
	max-width: 100%;
	padding: 0;
	background:#196cba;
	color:#fff;
}
nav > .layout::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	box-shadow: .1rem .1rem .5rem rgba(0,0,0,.3);
	z-index: 1;
	pointer-events: none;
}
.h_tel_wrap {
	padding:8px 10px;
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-end;
	border-bottom:1px solid #fff;
}
.h_tel_link {
	display:flex;
	align-items: center;
	color: #fff;
	font-weight: bold;
}
.h_tel_link img {
	margin-right:.5rem;
	height: 2rem;
}
.btn_area_right.is-sp{
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	margin-top: 3rem;
}
.btn_area_right.is-sp .btn +.btn {
	margin-top: 1.6rem;
}

/*gnav*/
.gnav_wrap{
	position: fixed;
	top: 10rem;
	left: 0;
	width: 100%;
	height: 100%;
	padding: 3rem 2rem 2rem;
	background: #196cba;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s;
	z-index: 3;
}
header.is-active .gnav_wrap{
	visibility: visible;
	opacity: 1;
}
.gnav > li + li{
	margin-top: 1.6rem;
}
nav > .layout,
header.is-active .logo_wrap{
	top: 0;
	left: 0;
	width: 100%;
	z-index: 1;
}
.logo_wrap{
	position: relative;
	padding: 10px 20px;
	width: 100%;
	height: 60px;
	background: #196cba;
	z-index: 1;
}
.logo{
	line-height: 1;
}
.logo a{
	display: inline-block;
}
.logo img{
	height: 40px;
	vertical-align: middle;
}
.gnav a {
	position: relative;
	padding-right:2.8rem;
	color: inherit;
	font-size: 2rem;
	font-weight: bold;
}
.gnav a:not(.btn_trial)::after {
	position: absolute;
	content:" ";
	top: 50%;
	right:0;
	transform: translateY(-50%);
	width:2rem;
	height:2rem;
	background:url(../images/icon_arrow_r_wh.svg) no-repeat;
	background-size:contain;
}
.gnav .h_btn_trial {
	display: none;
}

/* hamburger_menu */
#hamburger_menu{
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 5rem;
	height: 5rem;
	cursor: pointer;
	z-index: 2;
}
#hamburger_menu span{
	display: block;
	position: relative;
	width: 3rem;
	height: 3px;
	background: #fff;
}
#hamburger_menu span::before,
#hamburger_menu span::after{
	content: "";
	position: absolute;
	left: 0;
	width: inherit;
	height: inherit;
	background: #fff;
	transition: transform .2s;
}
#hamburger_menu span::before{
	top: -10px;
}
#hamburger_menu span::after{
	top: 10px;
}
header.is-active #hamburger_menu span{
	background: transparent;
	z-index: 2;
}
header.is-active #hamburger_menu span::before,
header.is-active #hamburger_menu span::after{
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	background: #fff;
}
header.is-active #hamburger_menu span::before{
	transform: rotate(45deg);
}
header.is-active #hamburger_menu span::after{
	transform: rotate(135deg);
}

/* mv
***********************************************************************/
.mv{
	padding: 6.4rem 0;
	background: #fff;
	background-image: url(../images/bg_box.png);
	z-index: 0;
	overflow-x: hidden;
}
.mv_item + .mv_item{
	margin-top: 4.5rem;
}
.mv_ttl{
	position: relative;
	margin: 1.6rem 0 .8rem;
	color:#043b6b;
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.6;
	text-align: center;
}
.mv_item_left .mv_ttl{
	position: relative;
	display:flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 3rem;
}
.mv_item_right .mv_ttl span{
	margin-bottom: .8rem;
}
.mv_ttl_balloon_wrap {
	width: 100%;
	text-align: center;
}
.mv_ttl .mv_ttl_logo img {
	max-width: 160px;
}
.mv_ttl strong{
	background: linear-gradient(transparent  75%, #ffb382  75%);
}
.mv_left_img {
	display:flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
}
.main_mordal {
	position:absolute;
	bottom: 0;
	left:0;
}
.main_mordal .sp_link {
	max-width: 100px;
}
.main_mordal .pc_link {
	display:none;
}
.mv_fn_ranking li + li {
	margin-top: 1.6rem;
}
.mv_fn_list_link_area {
	display:flex;
	flex-flow: row wrap;
	justify-content: flex-end;
}
.mv_fn_ranking_link,
.mv_fn_list_link {
	display:flex;
	align-items: center;
	padding:1rem;
	background: #e6f9ff;
	border-radius:.4rem;
	color:#043b6b;
	font-size: 1.8rem;
	font-weight: bold;
}
.mv_fn_list_link {
	margin: 1.6rem 0 0 1.6rem;
	width: 220px;
}
.mv_fn_ranking_link span,
.mv_fn_list_link span {
	position: relative;
	padding:0 1.6rem;
	width:100%;
}
.mv_fn_ranking_link span::after,
.mv_fn_list_link span::after {
	position: absolute;
	content: "";
	top: calc(50% - 10px);
	right: 1rem;
	width: 10px;
	height: 10px;
	border-top: 2px solid #043b6b;
	border-right: 2px solid #043b6b;
	-webkit-transform: rotate(135deg) translateY(-50%);
	transform: rotate(135deg) translateY(-50%);
}
.mv_fn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 3rem -8px -8px;
}
.mv_fn > li{
	margin: 4px;
}
.mv_fn > li > a{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: 6px;
	width: 80px;
	height: 80px;
	background: rgba(255,255,255,.5);
	border-radius: 5px;
}
/* main
----------------------------------------------------------------------*/
main,
section{
	display: block;
}
section{
	padding: 6rem 0 0;
}
section:nth-child(2n){
	background:#e6f9ff;
}

/* section */
.sec_item{
	margin-top: 3rem;
	padding-bottom: 6rem;
}
.subsec_item{
	margin-top: 3rem;
}
.sec_ttl{
	margin-bottom: 3rem;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}
.sec_subttl{
	display:block;
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 1.5;
}
.sec_ttl.blue,
.sec_subttl.blue,
.sec_subttl .blue{
	color:#186cba;
}
.icon_ttl{
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: left;
}

/* cta_area */
.cta_area{
	padding: 4rem 0;
	background:#a4d5ed;
}

/* el_label */
.el_label_wh{
	display: inline-block;
	color: #15A9E8;
	padding: .6rem;
	background: #fff;
	border-radius: 5px;
	line-height: 1;
}
.el_label_bl_line{
	display: inline-block;
	color: #15A9E8;
	font-size: 1.4rem;
	padding: .6rem;
	border: 2px solid #15A9E8;
	border-radius: 5px;
	line-height: 1;
}
/* list_disc */
.list_disc > li{
	position: relative;
	padding-left: 1.3em;
}
.list_disc > li::before{
	content: "";
	position: absolute;
	top: .4em;
	left: 0;
	width: 1em;
	height: 1em;
	background: #ff9e10;
	border-radius: 50%;
}
.list_disc > li + li{
	margin-top: 1em;
}

/* card */
.card_wrap > li + li{
	margin-top: 3.2rem;
}
.el_card{
	position: relative;
	padding: 1.6rem;
	background: #e6f9ff;
	border-radius: .5em;
	color: #333;
	box-shadow: 0px 0px 10px -3px rgba(4,59,107,.36);
}
.el_card.el_card_w {
	background: #fff;
}
.el_card p + p {
	margin: 1.6rem 0;
}
.card_tag {
	display:flex;
	justify-content: center;
	align-items: center;
	margin:0 auto;
	padding:0 1.6rem;
	width:max-content;
	height:36px;
	border-radius: 18px;
	font-weight:bold;
}
.card_tag.tag_no {
	background:#fff;
	color:#333;
}
.card_tag.tag_solution {
	background:#ff9e10;
	color:#fff;
}
.introduction_card_ttl {
	font-weight: bold;
	text-align: center;
}
.introduction_card_ttl span {
	display: inline-block;
}
/* el_img_txt_flex */
.el_img_txt_flex .img_box + .txt_box,
.el_img_txt_flex .txt_box + .img_box{
	margin-top:1.6rem;
}
.el_img_txt_flex .ttl {
	margin-bottom:1.6rem;
	font-size: 1.8rem;
	font-weight: bold;
}
.el_img_txt_flex .ttl strong {
	background: linear-gradient(transparent  75%, #ffb382  75%);
	color:#186cba;
}

/* price */
.price_img_ex {
	display:flex;
	justify-content: center;
}
.price_img_ex .price_img {
	width:120px;
	text-align: center;
}
.price_txt_ex {
	margin:0 auto;
	margin-top:3.2rem;
	max-width: 540px;
}
.price_txt_ex dl {
	display:flex;
	flex-flow: row wrap;
	justify-content: space-around;
	align-items: baseline;
	font-size:2rem;
	font-weight: bold;
	line-height: 1.5;
}
.price_txt_ex dl + dl {
	margin-top:2rem;
}
.price_txt_ex dl dd {
	min-width:260px;
	text-align: right;
}
.price_txt_ex dl dd strong {
	color:#ff934c;
	font-size:4rem;
}

/* order */
.sec_order .el_card {
	position: relative;
	margin-top:40px;
	padding-top:50px;
}
.sec_order .el_card + .el_card {
	margin-top:calc(40px + 3.2rem);
}
.sec_order .el_card .img_box {
	position: absolute;
	top:-40px;
	left:50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
.sec_order .el_card .ttl {
	font-size:2.4rem;
	font-weight: bold;
	text-align: center;
}
.order_txt li + li {
	margin-top:.5rem;
}

/* rank */
.list_ranking {
	margin-bottom: 6rem;
}
.list_ranking_item + .list_ranking_item {
	margin-top: 1.6rem;
}
.list_ranking_item a {
	display: block;
	position:relative;
	padding: .5em 2em .5em .5em;
	background: #fff;
	border-radius: .5em;
	box-shadow: 0px 0px 10px -3px rgba(4,59,107,.36);
	color:#333;
	font-weight: bold;
}
.list_ranking_item a::after {
	position:absolute;
	content: "";
	top: calc(50% - 10px);
	right: 2rem;
	width: 10px;
	height: 10px;
	border-top: 2px solid #333;
	border-right: 2px solid #333;
	-webkit-transform: rotate(135deg) translateY(-50%);
	transform: rotate(135deg) translateY(-50%);
}
.list_ranking_item img {
	height:3.2rem;
	margin-right: .5em;
}
.ranking_ttl {
	display:flex;
	align-items: center;
	margin-bottom: 2.4rem;
	font-size: 2.4rem;
	font-weight: bold;
}
.ranking_ttl span {
	margin: 0 .5em;
}
.ranking_ttl span + img {
	height: 3rem;
}
.ranking_ex_other,
.ranking_ex_other li+ li{
	margin-top: 2.4rem;
}
.ranking_ex_other li .img_box,
.ranking_ex_other li .ttl {
	margin-bottom: 1rem;
	font-weight:bold;
}

/* list_fn */
.list_fn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: -1rem -.5rem 0;
}
.list_fn li{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	padding: 1.2rem;
	margin: 1rem .5rem 0;
	width: calc(50% - 1rem);
	//background: #d9e7ff;
	background: #fff;
	border: 2px solid #fff;
	border-radius: .5em;
	font-size:.9em;
	text-align: center;
	line-height: 1.5;
}
.list_fn li a{
	display: block;
	margin: 0;
	margin-top: .5rem;
	color: #333;
	font-weight: bold;
	text-align: center;
}
.list_fn .arrow{
		position: relative;
		display: inline-block;
		padding-right: 2em;
}
.list_fn .arrow::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 1.5em;
	height: 1.5em;
	background: url(../images/icon_arrow_fn.svg);
	background-size:1.5em 1.5em;
}
.list_fn li.fn_op{
	//background: #fcecf6;
	background: #c1e6e9;
	border: 2px solid #c1e6e9;
}

/* voice */
.voice_item + .voice_item {
	margin-top:3.2rem;
}

/* trial */
section.sec_trial {
	background: rgb(46,137,206);
	background: linear-gradient(90deg, rgba(46,137,206,1) 0%, rgba(36,124,197,1) 55%, rgba(24,108,186,1) 100%);
	font-weight:bold;
}
.sec_trial .sec_ttl {
	color:#fff;
}
.sec_trial .btn_item,
.tel_area {
	margin-top:4rem;
}
.tel_area {
	color:#fff;
	text-align: center;
}
.tel_area .sec_ttl {
	margin-bottom:0;
}
.tel_area .tel_link {
	display:flex;
	justify-content: center;
	align-items: center;
	margin: 1rem auto;
	color:#fff;
	font-size:3.2rem;
}
.tel_area .tel_link img {
	margin-right:.5rem;
	width:auto;
	height:3.2rem;
}
/* stepper */
.stepper{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 auto;
	width: 100%;
	background:#fff;
	border-radius: .5rem;
}
.stepper li{
	display: grid;
	grid-template-rows: 1fr 2fr;
	grid-template-columns: 1fr 80px;
	padding: 1.5rem;
	//padding-right: 2rem;
	height: 100%;
	border-bottom:2px solid #186cba;
	color: #252525;
	font-weight: bold;
	position: relative;
	overflow: hidden;
}
.stepper li:last-child{
	border-bottom:none;
}
.stepper .step_no{
	grid-row: 1 / 2;
	grid-column: 1 / 2;
	color:#ff934c;
	font-size:.8em;
}
.stepper .step_txt{
	grid-row: 2 / 3;
	grid-column: 1 / 2;
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	font-size:1em;
	line-height: 1.3;
}
.stepper .img_box{
	grid-row: 1 / 3;
	grid-column: 2 / 3;
}

/*contact*/
.sec_contact{
	background: #fff;
	background-image: url(../images/bg_box.png);
}

/* Footer
----------------------------------------------------------------------*/
#footer{
	position:relative;
	line-height:1.2;
	background:#333;
	padding: 0 1rem;
}
#footer a{
	color:#fff;
	text-decoration:none;
}
#f_wrap{
	padding-top:2.4rem;
	overflow:hidden;
}
.f_link_box{
	margin-bottom:2.4rem;
	overflow:hidden;
}
.f_link_head{
	margin-left:1.6rem;
	font-size:1.4rem;
}
.f_link_head .marker_triangle_circle:before{
	top:.6rem;
}
.f_link_head .marker_triangle_circle:after{
	top:.4rem;
}
.f_link{
	font-size:1.2rem;
}
.f_link li{
	float:left;
	margin:1.6rem 0 0 1.6rem;
}

.f_mark{
	float:right;
	margin:0 1.6rem 1.6rem 0;
}
.f_mark li{
	display:inline-block;
	vertical-align:bottom;
}
.f_mark li:not(:first-child){
	margin-left:4px;
}
.f_mark li a{
	display:block;
	height:50px;
	padding:2px;
	background:#fff;
	border-radius:5px;
}
.isms img{
	width:65px;
}
.privacymark a{
	width:50px;
}

#copyright{
	display: block;
	clear:both;
	height:5rem;
	line-height:5rem;
	text-align:center;
	color:#fff;
	border-top: 1px solid #fff;
	font-size:1.2rem;
}

/* a_blank
----------------------------------------------------------------------*/
.a_blank{
	position:relative;
	padding-right:1.8rem;
}
.a_blank:before,
.a_blank:after{
	position:absolute;
	width:1.2rem;
	height:1.2rem;
	background:#5ab303;
	border: 2px solid #fff;
	content:"";
}
.a_blank:before{
	top:.7rem;
	right:.2rem;
}
.a_blank:after{
	top:.3rem;
	right:-.2rem;
}

.a_blank:before,
#footer .a_blank:before,
.a_blank:after,
#footer .a_blank:after{
	background:#fff;
}

.btn .a_blank{
	display:inline-block;
	padding-right:1.6rem;
}
.btn .a_blank:before,
.btn .a_blank:after{
	top:50%;
}
.a_blank:before,
.a_blank:after{
	border-color:#5ab303;
}
.btn .a_blank:before{
	margin-top:-.6rem;
}
.btn .a_blank:after{
	margin-top:-1rem;
}

#footer .a_blank:before,
#footer .a_blank:after{
	background:#fff;
	border-color:#333;
}
#footer .a_blank:before{
	top:.4rem;
	right:.4rem;
}
#footer .a_blank:after{
	top:0;
	right:0;
}

/* btnTop
----------------------------------------------------------------------*/
#btnTop{
	position:fixed;
	right:10px;
	bottom:10px;
	z-index:3;
	display:none;
}
#btnTop a{
	display:block;
	position:relative;
	width:42px;
	height:42px;
	background:rgba(4,59,107,.7);
	border-radius:50%;
	text-indent:100%;
	white-space:nowrap;
	overflow:hidden;
}
#btnTop a:after{
	display:block;
	position:absolute;
	content:"";
	top:8px;
	right:0;
	bottom:0;
	left:0;
	width:16px;
	height:16px;
	margin:auto;
	border-top:solid 2px #fff;
	border-right:solid 2px #fff;
	transform:rotate(-45deg);
}

/* anime
----------------------------------------------------------------------*/
.fadeIn{
	animation-name:fadeInAnime;
	animation-duration:0.7s;
	animation-fill-mode:forwards;
	opacity:0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
.js-fadeIn {
	opacity: 0;
}

/* utility
***********************************************************************/
.u-ta-c{
	text-align: center;
}
.bold {
	font-weight: bold;
}
.inlineBlock {
	display: inline-block;
}
.u-mt-40{
	margin-top: 4rem;
}
.u-mt-16{
	margin-top: 1.6rem;
}
.is-pc{
	display: none;
}
.js-html{
	overflow-y: hidden;
}

/*=====================================================================
   PC start
======================================================================*/
@media screen and (min-width: 48em/*768px*/){
html{
}
/* a
***********************************************************************/
a{
	transition: opacity .2s;
}
a:hover{
	opacity: .7;
}
a[href^="tel:"]{
	pointer-events: none;
}
.el_btn_l{
	font-size: 2.2rem;
}
.btn_area_right.is-sp{
	display: none;
}
.btn_area_right{
	display: flex;
	flex-flow: row wrap;
	margin-top: 0;
	position: fixed;
	top: 13rem;
	right: 0;
	writing-mode: vertical-rl;
	-webkit-writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
	z-index: 3;
}
.btn_area_right .btn {
	display: inline-flex;
	align-items: center;
	margin: .4rem;
	margin-right: 0;
	padding: 1rem 1.2rem;
	padding-top: 3rem;
	position: relative;
	min-width: 1.2rem;
	height: auto;
	border: none;
	border-radius: .5rem 0 0 .5rem;
	box-shadow: 0px 0px 10px -3px rgba(4,59,107,.36);
	font-size: 1.8rem;
	line-height: 1.5;
}
.btn_area_right .btn.btn_contact::before {
	position: absolute;
	content: " ";
	top:8px;
	right:16px;
	width: 1.6rem;
	height: 1.6rem;
	background: url("../images/icon_btn_right_c.png") center / contain no-repeat;
}
.btn_area_right .btn.btn_trial::before {
	position: absolute;
	content: " ";
	top:8px;
	right:16px;
	width: 1.6rem;
	height: 1.6rem;
	background: url("../images/icon_btn_right_t.png") center / contain no-repeat;

}.btn_area_right .btn.btn_pamphlet::before {
	position: absolute;
	content: " ";
	top:8px;
	right:16px;
	width: 1.6rem;
	height: 1.6rem;
	background: url("../images/icon_btn_right_p.png") center / contain no-repeat;
}
.btn_area_right a::after{
	content: none;
}
.btn_area_right span{
	text-orientation: upright;
}
.btn_area_right img{
	margin: 0 0 .5em 0;
}
.btn_area {
	padding-right: 48px;
}
/* main
----------------------------------------------------------------------*/
/* section */
.sec_ttl{
	font-size: 3.6rem;
}
section.u-border-dot .sec_ttl,
.contact .sec_ttl{
	font-size: 3rem;
}
.sec_ttl + .txt_area{
	text-align: center;
}
.icon_ttl{
	text-align: center;
}
.sec_item{
	margin-top: 4rem;
}

/* list_sec */
.list_sec > li{
	margin: 10rem 0;
}
.list_sec_ttl{
	position: relative;
	padding-left: 6rem;
}
.list_sec_ttl::before{
	position: absolute;
	top: calc(2.8rem * 0.25);
	left: 0;
}

/* el_bracket */
.el_bracket{
	display: inline-block;
	padding: 3rem 6rem;
	margin-top: 0;
}

.media_rev{
	display: flex;
}
.media_rev{
	flex-direction: row-reverse;
}
.media_item:not(.img_box){
	flex: 1;
}
.media_item + .media_item{
	margin-top: 0;
}
.media > .media_item + .media_item,
.media_rev > .media_item:first-child{
	margin-left: 3rem;
}

/* card */
.card_wrap.col3{
	display: flex;
}
.card_wrap.col3 > li{
	width: calc(33.3% - 2rem);
}
.card_wrap.col3 > li + li{
	margin: 0 0 0 3rem;
}
.card_wrap.col2 .el_card{
	position: relative;
	width: calc(50% - 2rem);
}
.card_wrap .el_card.media{
	flex-direction: row;
}
.el_card .btn_area{
	display: block;
}
.el_card .el_btn_m::before{
	content: "";
	position: absolute;
	display: block;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.el_card > .txt_area{
	margin-bottom: auto;
}
.list_sec .card_ttl{
	font-size: 3rem;
}
.introduction_card_ttl span {
	display: block;
}

/* el_img_txt_flex */
.el_img_txt_flex {
	display:flex;
	justify-content: space-between;
}
.el_img_txt_flex .img_box{
	width: 480px;
}
.el_img_txt_flex .txt_box{
	width:calc(100% - 500px);
}
.el_img_txt_flex .img_box + .txt_box, .el_img_txt_flex .txt_box + .img_box {
	margin-top:0;
}

/* order */
.sec_order .card_wrap.col3 > li + li {
	margin: 40px 0 0 3rem;
}

/* rank */
.list_ranking {
	display:flex;
	justify-content: space-between;
}
.list_ranking li {
	width: calc(20% - 1rem);
}
.el_img_txt_flex.ranking_ex {
	flex-direction: row-reverse;
}
.ranking_ex_other {
	display: flex;
	justify-content: space-between;
}
.ranking_ex_other li {
	width: calc(50% - 16px);
}
.list_ranking_item + .list_ranking_item, 
.ranking_ex_other li + li {
	margin-top:0;
}

/* list_fn */
.list_fn{
	margin-left: auto;
	margin-right: auto;
}
.list_fn li{
	width: calc(20% - 2rem);
	transition: background .2s;
}
.list_fn li:hover{
	background: #bbceea;
	border-color: #bbceea;
}
.list_fn li.fn_op:hover{
	background: #9ad6d8;
	border-color: #9ad6d8;
}
.list_fn li a::before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	pointer-events: auto;
	background: transparent;
}

/* voice */
.el_img_txt_flex.voice_item .img_box {
	width: 200px;
}
.el_img_txt_flex.voice_item .txt_box {
	width: calc(100% - 200px);
}

/* trial */
.sec_trial .btn_item {
	margin:0 auto;
	max-width: 320px;
}
.sec_trial .btn_item,
.tel_area {
	margin-top:6rem;
}
/* stepper */
.stepper{
	flex-direction: row;
	margin: 0 auto;
	max-width: 720px;
	background:#fff;
	border-radius: .5rem;
}
.stepper li{
	display: grid;
	grid-template-rows: auto 4em 80px;
	grid-template-columns: 1fr;
	border-bottom:none;
	padding-right:.5rem;
	padding-left:3rem;
	width:calc(100% + 20px);
	height:100%;
	position: relative;
	overflow: hidden;
}
.stepper li:first-child{
	padding-left:1.5rem;
	width:calc(100% - 40px);
}
.stepper li:not(:first-child)::before{
	position: absolute;
	content:" ";
	top: 50%;
	left:0px;
	transform: translateY(-50%);
	width: 0;
  height: 0;
  border-style: solid;
  border-top: 125px solid transparent;
  border-bottom: 125px solid transparent;
  border-left: 30px solid #186cba;
  border-right: 0;
}
.stepper li:not(:first-child)::after{
	position: absolute;
	content:" ";
	top: 50%;
	left:-3px;
	transform: translateY(-50%);
	width: 0;
  height: 0;
  border-style: solid;
  border-top: 125px solid transparent;
  border-bottom: 125px solid transparent;
  border-left: 30px solid #fff;
  border-right: 0;
}
.stepper .step_no{
	grid-row: 1 / 2;
	grid-column: 1 / 1;
	text-align: center;
}
.stepper .step_txt{
	grid-row: 2 / 3;
	grid-column: 1 / 1;
	justify-content: center;
	font-size:1.2em;
}
.stepper .img_box{
	grid-row: 3 / 4;
	grid-column: 1 / 1;
}

/* contact */
.sec_contact .btn_area {
	justify-content: center;
}
.sec_contact .btn_area .btn_item {
	max-width: 320px;
}

/* Footer
----------------------------------------------------------------------*/
.hover #footer a:hover{
	opacity:.7;
}
#f_wrap{
	margin:auto;
	padding:3.2rem 0 1.6rem;
}
.f_link_box{
	float:left;
	width:20rem;
}
.f_link_head{
	font-size:1.6rem;
}
.f_link_head .marker_triangle_circle:before{
	top:.7rem;
}
.f_link_head .marker_triangle_circle:after{
	top:.5rem;
}
.f_link li{
	float:none;
}
.f_link_box.single,
.f_link_box.single .f_link{
	width:100%;
	overflow:hidden;
}
.f_link_box.single .f_link li{
	float:left;
}
.f_mark{
	position:absolute;
	right:60px;
	bottom:60px;
	margin: 0;
}
.f_mark li a,
.isms img,
.privacymark a{
	width:auto;
	height:auto;
}
#f_wrap{
	padding-top:2.4rem;
}

/* utility
----------------------------------------------------------------------*/
.is-pc{
	display: block;
}
.is-sp{
	display: none;
}

/*=====================================================================
   769 end
======================================================================*/
}
/*=====================================================================
   PC start
======================================================================*/
@media screen and (min-width: 60em/*960px*/){
/* a
***********************************************************************/
.btn_area {
	display: flex;
	align-items: flex-end;
	padding-right: 0;
}
.btn_area .btn_item {
	width: 100%;
}
.btn_area .btn_item + .btn_item {
	margin-top:0;
	margin-left: 1.6rem;
}
.btn_area .btn_item .btn {
	min-width:auto;
}

/* gnav
***********************************************************************/
header a[href^="tel:"]{
	font-size: 2rem;
	margin-left: .6rem;
}
nav > .layout{
	display: grid;
	grid-template-rows: 1fr 80px;
	grid-template-columns: 160px 1fr;
	//position: fixed;
	position: static;
	top: 0;
	left: 0;
	margin: 0 auto;
	padding: 0;
	max-width: 1000px;
	height: auto;
}
.h_tel_wrap {
	grid-row: 1 / 1;
	grid-column: 1 / 3;
}
.logo_wrap {
	grid-row: 2 / 2;
	grid-column: 1 / 2;
	padding: 20px 0;
	width: auto;
	height:80px;
	background: transparent;
	box-shadow: none;
}
.logo img{
	height: 38px;
}
.gnav_wrap{
	display: flex;
	grid-row: 2 / 2;
	grid-column: 2 /3;
	position: static;
	padding: 0;
	height: auto;
	background: transparent;
	overflow-y: visible;
	visibility: visible;
	opacity: 1;
}
.gnav{
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width:100%;
}
.gnav {
	text-align: right;
}
.gnav > li + li{
	margin: 0 0 0 3rem;
}
.gnav a{
	display: inline-block;
	font-size: 1.6rem;
	//padding-bottom: 1.5rem;
}
.gnav > li > span::after{
	content:"";
	position:absolute;
	top:0;
	bottom:calc(1.5rem + 3px);
	right: 0;
	margin:auto 0;
	width: 1rem;
	height: 1rem;
	border-top: 3px solid;
	border-right: 3px solid;
	transform:rotate(135deg);
}
.gnav .h_btn_trial {
	display: block;
}
.gnav .h_btn_trial .btn {
	display:flex;
	min-width: 240px;
	height: 50px;
	border: none;
	font-size: 2rem;
	text-align: center;
}

/*hamburger_menu*/
#hamburger_menu{
	display: none;
}

.js-html{
	overflow-y: visible;
}
/* mv
***********************************************************************/
.mv .layout {
	display: flex;
	max-width: 1280px;
}
.mv_item + .mv_item {
	margin-top:0;
}
.mv .layout .mv_item_left {
	flex-direction: column;
	padding: 0 20px;
	width:45%;
	max-width:540px;
}
.mv .layout .mv_item_right {
	flex-direction: column;
	width:55%;
}
.mv_ttl{
	font-size: 2.4rem;
}
.mv_ttl .mv_ttl_logo img {
	width: 160px;
}
.main_mordal .sp_link {
	display:none;
}
.main_mordal .pc_link {
	display:block;
}
.mv_fn_ranking {
	display:flex;
	flex-direction: row;
	margin:3.2rem 0;
}
.mv_fn_ranking li {
	margin: 0 4px;
	width:100%;
}
.mv_fn_ranking li + li {
	margin-top: 0;
}
.mv_fn_ranking_link {
	display:flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding:.5rem;
	height:125px;
	font-size: 1.4rem;
}
.mv_fn_ranking_link span {
	padding-left:0;
	text-align: center;
}
.mv_fn {
	margin: 0;
}
.mv_fn > li{
	margin: 6px;
}
.mv_fn > li > a{
	padding: 0;
	width: 60px;
	height: 60px;
}
/* main
***********************************************************************/

.u-ta-c-pc{
	text-align: center;
}
/*=====================================================================
   769 end
======================================================================*/
}