@charset "UTF-8";

.title_line2{position: relative;}

.title_line2::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    background: #369da7;
    border-radius: 0;
    position: absolute;
margin-top: 10px;
    left: 50%;
    transform: translateX(-50%);
}
/*--- ヘッダーメニュー ---*/

.header_nav {
	width: 100%;
	height: 60px;
	position: sticky;
	top: 0;
	z-index: 3;
}

.header_nav.on {
	position: fixed;
	z-index: 1000;
}

.header_nav > div {
	width: 100%;
	background: #fff;
	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.12);
}

.header_nav a {
	display: block;
	transition: .3s;
}

.header_nav a:hover,
.header_nav a.on {
	color: #4CBFC6;
	text-decoration: none;
}

.header_nav .bg_blind {
	background: rgba(0, 0, 0, .5);
	opacity: 0;
}

.header_nav .bg_blind.on {
	width: 100%;
	height: 100%;
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	opacity: 1;
}

.header_nav .main_menu {
	height: 60px;
	display: flex;
	align-items: center;
	gap: 30px;
	background: #fff;
	position: relative;
	z-index: 3;
	padding: 0 30px;
	margin: 0 auto;
}

.header_nav .main_menu > div:nth-of-type(1) a {
	transition: .3s;
}

.header_nav .main_menu > div:nth-of-type(1) a:hover {
	opacity: 0.3;
}

.header_nav .main_menu > div:nth-of-type(1) img {
	width: 110px;
	vertical-align: bottom;
}

.header_nav .main_menu > ul {
	display: flex;
	gap: 0 30px;
	background: #fff;
}

.header_nav .main_menu > ul > li {
	width: min-content;
	position: relative;
}

.header_nav .main_menu > ul > li > a {
	height: 60px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	position: relative;
}

.header_nav .main_menu > ul > li:nth-of-type(4) > a {
	padding: 0 17px 0 0;
}

.header_nav .main_menu > ul > li:nth-of-type(-n+3) > a::after {
	content: "";
	width: 6px;
	height: 6px;
	border-right: solid 2px #444;
	border-top: solid 2px #444;
	position: absolute;
	bottom: 10px;
	transform: rotate(135deg);
	transition: .3s;
}

.header_nav .main_menu > ul > li:nth-of-type(-n+3) > a.on::after {
	border-right: solid 2px #4CBFC6;
	border-top: solid 2px #4CBFC6;
	transform: rotate(-45deg);
}

.header_nav .main_menu > ul > .pdf> a::after {
	content: "\f1c1";
	font-family: Font Awesome\ 5 Free;
	font-weight: 600;
	margin: 0 0 0 5px;
	position: absolute;
	right: 0;
}

.header_nav .main_menu > ul > li div > div {
	display: flex;
	flex-flow: column;
	gap: 30px;
}

.header_nav .main_menu > ul > li div > div img {
	width: 100%;
	max-width: 250px;
	transition: .3s;
}

.header_nav .main_menu > ul > li div > div img:hover {
	opacity: 0.3;
}

.header_nav .main_menu > ul > li a + ul {
	width: 250px;
	height: 0;
	background: #fff;
	border-radius: 0 0 10px 10px;
	box-shadow: 0 5px 4px 0 rgb(0, 0, 0, 20%);
	position: absolute;
	top: 60px;
	left: -90px;
	opacity: 0;
	overflow: hidden;
	padding: 0 20px;
	transition: .3s;
}

.header_nav .main_menu > ul > li:nth-of-type(1) a + ul {
	width: 250px;
	left: -90px;
}

.header_nav .main_menu > ul > li a.on + ul {
	height: auto;
	opacity: 1;
	padding: 20px;
}

.header_nav .main_menu > ul > li:nth-of-type(4) a + ul {
	left: -70px;
}

.header_nav .main_menu > ul > li a + ul li,
.header_nav .main_menu > ul > li a + div ul li {
	border-bottom: 1px solid #ccc;
	padding: 0 0 20px;
	margin: 0 0 20px;
}

.header_nav .main_menu > ul > li a + ul li:last-of-type,
.header_nav .main_menu > ul > li a + div ul li:last-of-type {
	border-bottom: none;
	padding: 0;
	margin: 0;
}

.header_nav .main_menu > ul > li a + div {
	width: 520px;
	height: 0;
	display: flex;
	gap: 30px;
	background: #fff;
	box-shadow: 0 5px 4px 0 rgb(0, 0, 0, 20%);
	border-radius: 0 0 10px 10px;
	overflow: hidden;
	position: absolute;
	top: 60px;
	left: -80px;
	opacity: 0;
	padding: 0 20px;
	transition: .3s;
}

.header_nav .main_menu > ul > li a.on + div {
	height: auto;
	opacity: 1;
	padding: 20px;
}

.header_nav .main_menu > ul > li a + div ul {
	width: 220px;
}

.header_nav .main_menu > div:nth-of-type(3) {
	display: flex;
	gap: 20px;
	position: absolute;
	right: 30px;
}


.support_btn{
	color: #fff;
	background: #1d6996;
	border: 1px solid #1d6996;
	border-radius: 5px;
	padding: 10px;
	position: relative;
	min-width: 85px;
    text-align: center;
}

/* .header_nav .main_menu > div:nth-of-type(3) a:nth-of-type(1) {
	color: #D64550;
	background: #fff;
	border: 1px solid #D64550;
	border-radius: 5px;
	padding: 10px;
} */

.header_nav .main_menu > div:nth-of-type(3) a:nth-of-type(2) {
	color: #fff;
	background: #D64550;
	border-radius: 5px;
	position: relative;
	padding: 10px 10px 10px 35px;
}

.header_nav .main_menu a:hover {
	opacity: 0.3;
}

.header_nav .main_menu > div:nth-of-type(3) a:nth-of-type(2)::before {
	content: "\f234";
	font-family: Font Awesome\ 5 Free;
	font-weight: 600;
	position: absolute;
	margin: 0 0 0 -25px;
}

.header_nav .sp_btn {
	display: none;
}

/*--- ヘッダーメニューここまで ---*/

/*--- 固定ボタン ---*/

.fixed_btn {
	background: #0a5f75;
}

.fixed_btn_mitumori {
	background: #4CBFC6;
}

.fixed_btn_ver {
	color: #000;
	font-size: 1.4rem;
	background: #ffe333;
}

.fixed_btn_mitumori2,
.fixed_btn_otoiawase {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 1.6rem;
	writing-mode: vertical-rl;
	white-space: nowrap;
	border-radius: 10px 0 0 10px;
	box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 20%);
	position: fixed;
	right: 0;
	z-index: 3;
	padding: 40px 15px;
	transition: 0.3s;
}

.fixed_btn_hojyokin2,
.fixed_btn_mitumori2 {
	color: #fff;
	background: #0A5F75;
	border: 1px solid #fff;
	top: 400px;
}

.fixed_btn_hojyokin2::before,
.fixed_btn_mitumori2::before {
	content: "";
	width: 15px;
	height: 23px;
	background: url(/product/rearegi/price/image/hardware/icon_calculator.png) no-repeat;
	background-size: contain;
}

.fixed_btn_hojyokin2 {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 1.6rem;
	writing-mode: vertical-rl;
	white-space: nowrap;
	border-radius: 10px 0 0 10px;
	box-shadow: -2px 2px 5px 0 rgba(0, 0, 0, 20%);
	position: fixed;
	right: 0;
	z-index: 3;
	padding: 30px 15px;
	transition: 0.3s;
}

.fixed_btn_hojyokin2 span {
	writing-mode: initial;
	margin: 0 0 -5px 0;
}

.fixed_btn_hojyokin2:hover {
	color: #fff;
	padding: 30px 30px 30px 15px;
}

.fixed_btn_mitumori2:hover {
	color: #fff;
	padding: 40px 30px 40px 15px;
}

.fixed_btn_otoiawase {
	color: #0A5F75;
	font-weight: bold;
	background: #fff;
	border: 1px solid #0A5F75;
	top: 200px;
}

.fixed_btn_otoiawase:hover {
	color: #0A5F75;
	padding: 40px 30px 40px 15px;
}

.fixed_btn_otoiawase::before {
	content: "\f0e0";
	font-family: Font Awesome\ 5 Free;
	font-weight: normal;
}

/*--- 固定ボタン ここまで ---*/

.currency_t,
.currencybox {
	display: none !important
}


.full-width a {
	transition: 0.3s;
}

.full-width a:hover {
	opacity: 0.3;
}

.foot .full-width a {
	color: #444;
}

.foot .full-width a:hover {
	color: #444;
	opacity: 0.3;
}

/*-----hero-----*/

.hero_box {
	height: 350px;
	display: flex;
	align-items: center;
	background: #d7f1f2;
}

.hero_box a {
	transition: .3s;
}

.hero_box a:hover {
	opacity: 0.3;
}

.hero_box > div {
	display: grid;
	gap: 20px 30px;
	padding: 30px;
}

.hero_box > div > h1 {
	grid-column: 1/2;
	grid-row: 1/2;
	color: #40424e;
	font-size: 2rem;
}

.hero_box > div > h1 img {
	width: 100%;
	max-width: 350px;
	margin: 10px 0 0;
}

.hero_box > div > div:nth-of-type(1) {
	grid-column: 1/2;
	grid-row: 2/3;
	display: flex;
	align-items: center;
	gap: 10px 20px;
}

.hero_box > div > div:nth-of-type(1) p {
	color: #40424e;
	font-weight: bold;
	position: relative;
}

.hero_box > div > div:nth-of-type(1) p::before {
	content: "＼";
	font-size: 2rem;
	transform: rotate(100deg);
	position: absolute;
	bottom: -15px;
	right: -10px;
}

.hero_box > div > div:nth-of-type(1) p::after {
	content: "／";
	font-size: 2rem;
	transform: rotate(80deg);
	position: absolute;
	bottom: 15px;
	right: -10px;
}

.hero_box > div > div:nth-of-type(1) a {
	display: flex;
	align-items: center;
	color: #fff;
	font-weight: bold;
	background: #D64550;
	box-shadow: 0 3px 5px 1px rgb(0, 0, 0, 40%);
	border-radius: 22px;
	cursor: pointer;
	padding: 15px 20px;
	position: relative;
}

.hero_box > div > div:nth-of-type(1) a::after {
	font-family: "Font Awesome 5 Free";
	content: "\f101";
	font-weight: 900;
	margin: 0 0 0 10px;
}

.hero_box > div > div:nth-of-type(2) {
	grid-column: 1/2;
	grid-row: 3/4;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	gap: 20px;
}

.hero_box > div > div:nth-of-type(2) a img {
	max-width: 105px;
	height: 30px;
	object-fit: contain;
}

.hero_box > div > div:nth-of-type(2) > a {
	display: flex;
	gap: 20px;
}

.hero_box > div > div:nth-of-type(2) > a img {
	background: #fff;
	padding: 5px 10px;
	border: 1px solid #333;
	border-radius: 5px;
}

.hero_box > div > div:nth-of-type(2) > a img:nth-of-type(3) {
	padding: 10px;
}

.hero_box > div > div:nth-of-type(3) {
	grid-column: 2/3;
	grid-row: 1/4;
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
}

.hero_box > div > div:nth-of-type(3) img {
	width: 100%;
	max-width: 370px;
	border-radius: 10px;
}

/*-----hero ここまで-----*/

/* dl */

.trial {
	background: #1c5361;
	padding:10px 0;
}
.pside-30{padding: 0 30px;}
.trial_app{
background: #fff;
/* width:80%; */
margin: auto;
padding:40px 0 40px;
border-radius: 10px;
}

.trial_app>.col-12{    justify-content: space-around;}

.trial_app h3{position: relative;
color: #0f1406;}

.trial_app h3::before{content: "－";
color: #0A5F75;
font-weight: 600;}

.trial_app .btm_btn03,.trial_app .btm_btn03r{font-size: 15px;}

.trial_app .btm_btn03{background-color: #19416a;
	border: 1px solid #afafaf;}

.trial_app h3::after{content: "－";
	color: #0A5F75;
	font-weight: 600;}




.trial h2{color: rgb(255, 255, 255)!important}

.trial p{color: rgb(255, 255, 255)!important}

.device {
	background: #3590a7
}

.device_box {
	padding: 20px 0;
}

.device h3 {
	color: #fff;
	font-size: 2.1rem;
	font-weight: 500;
	line-height: 30px;
}


.btm_btn03r{
	background-color:#ffffff;
	border: 2px solid 	#19416a;
	color:  	#19416a;
	font-weight: 700;
	font-size: 17px;
	width: 80% !important;
	padding: 1.5rem 0;
}



/* dl */

.flex {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.flex2 {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.flex div {
	width: calc(100%/2)
}

main {
	width: 100%;
	position: relative
}

main section {
	padding-top: 20px;
	background-color: #ccc;
	height: 100px
}


h1,
h2,
h3 {
	word-wrap: break-word
}

h2 {
	font-size: 2.4rem;
	font-weight: bold;
	line-height: 1.5;
	margin: 0 0 30px;
}

h4,
h5 {
	line-height: 1.5;
	word-wrap: break-word
}

.busicom_logo a {
	position: absolute;
	width: 100px;
	right: 230px;
	top: 14px;
	z-index: 20
}

.busicom_logo a:hover {
	opacity: 0.6
}

.fit {
	-ms-flex-pack: distribute;
	justify-content: space-around;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

.br5 {
	border-radius: 5px
}

.col-6m {
	padding: 0 0.5%;
	width: 48%;
	min-height: 250px;
	max-height: 250px
}

.col-6m h3 {
	padding-top: 20px;
	margin-bottom: 15px !important
}

.col-6m a {
	display: block
}

.col-6m a:hover {
	opacity: 0.6
}

.dispencerlist {
	display: flex;
	justify-content: space-between
}

.dispencerlist li {
	width: calc(99%/2);
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	border: 1px solid #d0e0d0;
	border-radius: 5px;
	padding: 6px 5px
}

.dispencerlist img {
	max-width: 80px;
	margin-right: 10px
}

/*背景色*/
.mainlink {
	background: #fff;
}

.white {
	background-color: #fff
}

.gray {
	background-color: #f0f0f0
}

.gray2 {
	background-color: #EFEFEF;
	color: #44444b
}

.gray2 h2 {
	color: #40424E;
}

.gray2 h3 {
	margin-bottom: 40px
}

.green {
	background-color: #4CBFC6;
	background-image: linear-gradient(170deg, #51c0c9 0%, #2EB5B0 74%);
	color: #fff
}

.green2 {
	background: #747092;
	color: #fff
}

.green3 {
	background-color: #0A5F75;
	color: #fff
}

.gradient1 {
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f8f8f8), color-stop(6%, #fff), color-stop(74%, #efefef));
	background-image: linear-gradient(180deg, #f8f8f8 0%, #fff 6%, #efefef 74%);
	color: #44444b
}

.gradient1 h2 {
	color: #0A5F75
}

.gradient1 h3 {
	margin-bottom: 40px
}

.gradient1 .buttons2 {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: absolute;
	top: 5%;
	right: 2%
}

.gradient1 .buttons2 li {
	display: inline-block;
	margin-top: 8px;
	padding: 5px 0px;
	width: 100%;
	height: 100%
}

.gradient1 .buttons2 li a {
	font-weight: 400;
	text-decoration: none;
	padding: 5px 25px 5px 40px;
	vertical-align: middle;
	display: block;
	font-size: 12px;
	color: #0A5F75;
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s
}

.gradient1 .login2 {
	border: 1px solid #0A5F75;
	margin-right: 15px;
	position: relative
}

.gradient1 .login2::before {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 15px;
	position: absolute;
	top: 30%;
	left: 12%
}

.gradient1 .register2 {
	border: 1px solid #0A5F75;
	margin-right: 10px;
	position: relative
}

.gradient1 .register2::before {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 15px;
	position: absolute;
	top: 30%;
	left: 12%
}

.gradient2 {
	background-color: #fff;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6fafa), color-stop(6%, white), color-stop(74%, #e3f1f8));
	background-image: linear-gradient(180deg, #f6fafa 0%, white 6%, #e3f1f8 74%);
	color: #44444b
}

.gradient2 h2 {
	color: #0A5F75
}

/*ボタン*/
.btn.type1 {
	padding: 20px 10px !important;
	font-size: 19px;
	width: 80%;
	border-radius: 4px;
	background: #298d9a;
	background: -webkit-gradient(linear, left top, left bottom, color-stop(60%, #D64550), color-stop(98%, #e35862));
	background: linear-gradient(#D64550 60%, #e35862 98%);
	border: none;
	color: white;
	display: block;
	-webkit-box-shadow: 0px 3px 5px #e0dada;
	box-shadow: 0px 3px 5px #e0dada;
	position: relative
}

.btn.type1 i {
	padding-left: 10px
}

.btn.type2 {
	padding: 15px 10px !important;
	font-size: 15px;
	width: 90%;
	margin: auto;
	border-radius: 200px;
	background: #2f3131;
	border: none;
	color: white;
	-webkit-box-shadow: 0 10px 40px -6px #afafafb8;
	box-shadow: 0 10px 40px -6px #afafafb8
}

.btn.type3 {
	padding: 15px 10px !important;
	font-size: 16px;
	width: 90%;
	margin: auto;
	border-radius: 200px;
	background: #f5ffff;
	border: none;
	color: #0A5F75;
	-webkit-box-shadow: 0 10px 40px -6px #afafafb8;
	box-shadow: 0 10px 40px -6px #afafafb8
}

.buttons {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: absolute;
	right: 10px;
	z-index: 100
}

.buttons li {
	display: inline-block;
	margin-top: 8px
}

.buttons li a {
	font-weight: 400;
	text-decoration: none;
	padding: 15px 25px 13px 40px;
	vertical-align: middle;
	display: block;
	font-size: 14px;
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s
}

.login {
	background: #fff;
	border: 1px solid #0A5F75;
	margin-right: 15px;
	position: relative;
	border-radius: 0px
}

.login a {
	color: #0A5F75
}

.login::before {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 15px;
	position: absolute;
	top: 28%;
	left: 12%
}

.register {
	background: #D64550;
	border-radius: 10px;
	margin-right: 10px;
	position: relative
}

.register a {
	color: #fff
}

.register a:hover {
	color: #fff
}

.register::before {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 15px;
	position: absolute;
	top: 34%;
	left: 5%;
	color: #fff
}

.buttons2 {
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	position: absolute;
	top: 5%;
	right: 2%
}

.buttons2 li {
	display: inline-block;
	margin-top: 8px;
	padding: 5px 0px;
	width: 100%;
	height: 100%
}

.buttons2 li a {
	font-weight: 400;
	text-decoration: none;
	padding: 5px 25px 5px 40px;
	vertical-align: middle;
	display: block;
	font-size: 12px;
	color: #fff;
	-webkit-transition: all 0.2s ease-in-out 0s;
	transition: all 0.2s ease-in-out 0s
}

.login2 {
	border: 1px solid #fff;
	margin-right: 15px;
	position: relative
}

.login2::before {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 15px;
	position: absolute;
	top: 30%;
	left: 12%
}

.register2 {
	border: 1px solid #fff;
	margin-right: 10px;
	position: relative
}

.register2::before {
	content: "";
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	font-size: 15px;
	position: absolute;
	top: 30%;
	left: 12%
}

a.hover_sp .arrow2 {
	border-top: 1px solid #4CBFC6;
	border-left: 1px solid #4CBFC6
}

#menuresp li a.hover_sp {
	color: #4CBFC6
}

#menuresp li.sousmenu li a.hover_sp {
	color: #4CBFC6;
	border-left: 3px solid #0a5f75
}

h4.row.mega-title {
	color: #eee;
	border-bottom: 1px solid #4CBFC6;
	background-color: #2f8298
}

.footNav .rearegi > div > div > ul {
	width: 100%;
	max-width: 800px;
	display: flex;
	justify-content: space-between;
	text-align: left;
	margin: 0 auto;
}

.footermenu > ul > li {
	display: block;
	float: left;
	width: 14%
}

.footermenu > ul > li:first-child,
.footermenu > ul > li:last-child,
.footermenu > ul > li.home {
	width: 8%;
	overflow: hidden;
	text-align: left
}

.footermenu > ul > li.products,
.footermenu > ul > li.news,
.footermenu > ul > li.support,
.footermenu > ul > li.about,
.footermenu > ul > li.document {
	width: auto;
}

.Rakutenpay,
.aupay,
.jcoinpay,
.unionpay,
.kakaopay,
.Npay,
.alipayhk,
.touchngo,
.ezlink,
.liiv {
	display: none
}

/*hero*/
#hero {
	padding-top: 30px;
	background-color: #DDEFF2;
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden
}

#hero h1 {
	padding-top: 50px;
	line-height: 170%;
	color: #0f1406;
	font-size: 39px
}

#hero p {
	font-weight: 500
}

#hero .hero_text {
	text-shadow: 4px 4px 12px #fff
}

#hero .hero_apps {
	padding-top: 20px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 80%
}

#hero .hero_apps .app_icon {
	width: 25%
}

#hero .hero_apps .app_icon img {
	max-width: 80px;
	margin-right: 30px
}

.hero_appbanner ul {
	margin-top: 0px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 90%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 10px
}

.hero_appbanner li {
	margin: 10px 2px;
	margin-left: 50px;
	border: none !important;
	background: none !important
}

.hero-pt {
	padding-top: 41px !important
}

.soon {
	position: relative
}

.soon_img {
	opacity: 0.4
}

.soon::after {
	position: absolute;
	content: "近日公開予定";
	color: #000;
	font-size: 16px;
	font-weight: 400;
	opacity: 1;
	top: 47px;
	left: 20px
}

#hero .herobanner {
	max-width: 440px;
	min-width: 350px;
	width: 44vw;
	margin-top: 20px
}

#hero .kameiten a {
	background: rgba(255, 255, 255, 0.6);
	margin-top: 40px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	border: 3px solid #439d97;
	border-radius: 5px
}

#hero .kameiten a .kameiten_img {
	width: 40%;
	display: block;
	margin: auto;
	padding: 8px
}

#hero .kameiten a .kameiten_text {
	width: 60%;
	color: #439d97;
	font-size: 33px;
	line-height: 34px;
	margin: auto 0;
	margin-bottom: 29px;
	font-weight: 600;
	padding: 0px 0 0 3px
}

#hero .kameiten a .kameiten_text span {
	font-size: 13px
}

#hero .sp_misemeg_hero {
	margin: auto;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: -2px
}

#hero .sp_misemeg_hero img {
	width: auto;
	max-height: 600px
}

.memo {
	font-size: 18px;
	font-weight: 800;
	color: #71B44B;
	padding-bottom: 12px;
	margin-bottom: 30px;
	position: relative;
	text-align: center
}

.memo:before {
	content: "";
	position: absolute;
	bottom: 0px;
	display: inline-block;
	width: 60px;
	height: 2px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #71B44B;
	border-radius: 2px
}

#mainhero {
	background-size: cover;
	background-repeat: no-repeat;
	overflow: hidden;
	max-width: 1010px;
	margin: auto
}

#mainhero .heroimg {
	max-height: 550px;
	max-width: 525px;
	display: block;
	margin: auto
}

#mainhero .col-6 {
	position: relative
}

img.herologo {
	max-width: 180px
}

#mainhero h1 {
	/* font-size:calc(32px+.4vw)!important;*/
	font-size: 3.8rem;
	text-align: left;
	line-height: 60px;
	margin-top: 15px;
	margin-bottom: 15px;
	font-weight: 800
}

#mainhero p {
	font-size: 1.4rem;
	letter-spacing: 0.7px;
	margin-bottom: 0px;
	line-height: 25px
}

#mainhero ul.os {
	max-width: 300px;
	margin-bottom: 10px;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	bottom: -15%;
	left: 1%;
	-webkit-transform: scale(0.8, 0.8);
	transform: scale(0.8, 0.8)
}

#mainhero ul.os li {
	width: auto
}

#mainhero ul.os li img.logo {
	height: 40px;
	width: revert !important
}

#mainhero ul.os li img.icon {
	height: 60px;
	width: revert !important
}

#mainhero ul.cashless {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	margin-bottom: 20px;
	margin-top: 40px;
	padding: 20px 10px
}

#mainhero ul.cashless li {
	width: calc(85%/4)
}

#mainhero ul.type {
	margin-bottom: 10px;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

#mainhero ul.type li {
	margin: 10px 2px;
	border: 1px solid #05417c;
	color: #05417c;
	border-radius: 10px;
	padding: 10px 5px;
	font-weight: 600;
	font-size: 13px;
	width: calc(100%/3);
	text-align: center;
	line-height: 20px;
	background: rgba(255, 255, 255, 0.88)
}

.campaign {
	text-align: center;
	font-size: 25px;
	padding: 20px 0;
	font-weight: 500;
	color: #40424E
}

.campaign span {
	color: #D64550;
	font-weight: 900
}

.hero {
	padding-top: 20px;
	padding-bottom: 20px
}

.hero h1 {
	font-size: 24px !important;
	margin-bottom: 0;
	font-weight: 800;
	text-align: center;
}

.hero h2 {
	font-size: 24px;
	margin-bottom: 0;
	font-weight: 800;
	text-align: center;
}

.hero2 {
	padding-top: 20px;
	padding-bottom: 20px;
	margin-top: 31px
}

.realdepos_hero_bg {
	position: relative;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	background-size: contain;
	text-align: right
}

.heroimg_box {
	padding: 120px 20px 10px 20px;
	background-color: #e8f1f3;
	background-size: 70%
}

.logosvg {
	max-width: 220px
}

.mainlink a {
	padding: 13px 25px !important
}

.mainlink a img {
	width: 110px
}

.realdepos_list_wrap {
	-ms-flex-pack: distribute;
	justify-content: space-around
}

.realdepos_list {
	margin: 0px 10px;
	width: calc(60%/4)
}

.realdepos_list a:hover {
	opacity: 0.6;
	color: #0A5F75 !important
}

.realdepos_list img {
	width: 50%;
	margin-bottom: 10px
}

.realdepos_list img:hover {
	opacity: 0.7
}

.realdepos_list p {
	font-size: 16px
}

.btm_btn01s {
	display: block;
	text-align: center;
	width: 70%;
	margin: auto;
	min-width: 200px;
	padding: 1.5rem 0 !important;
	position: relative;
	z-index: 1;
	background-color: #5b95b5;
	font-size: 13px;
	color: white;
	border-radius: 5px;
	margin-top: 20px
}

.btm_btn01s::hover {
	background-color: #8de6a9;
	-webkit-transition-duration: 3s;
	transition-duration: 3s
}

.btm_btn01s a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2
}

.btm_btn02 {
	width: 70% !important;
	margin: auto;
	min-width: 200px;
	display: block;
	text-align: center;
	width: 100%;
	padding: 1.5rem 0;
	position: relative;
	z-index: 1;
	background-color: #0A5F75;
	border: 1px solid #0A5F75;
	font-size: 13px;
	color: white;
	border-radius: 5px
}

.btm_btn03 {
	width: 70% !important;
	margin: auto;
	min-width: 200px;
	display: block;
	text-align: center;
	width: 100%;
	padding: 1.5rem 0;
	margin-top: 20px;
	position: relative;
	z-index: 1;
	background-color: #4CBFC6;
	border: 1px solid #4CBFC6;
	font-size: 13px;
	color: white;
	border-radius: 5px
}

.btm_btn02 a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2
}


.btm_btn02:after {
	content: "\f101";
	font-family: "Font Awesome\ 5 Free";
	font-weight: 600;
	margin: 0 0 0 5px;
}

.btm_btn03 a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2;
}

.oshirase_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	color: #434343;
	border: solid #ccc;
	border-width: 1px 0;
	padding: 0 20px 0 0;
}

.oshirase_box a,
.ver_box a {
	color: #434343;
	transition: .3s;
}

.oshirase_box a:hover,
.ver_box a:hover {
	color: #434343;
	opacity: 0.3;
}

.oshirase_box > div:first-of-type {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	background-color: #0a5f75;
}

.oshirase_box > div:nth-of-type(2) {
	display: flex;
	justify-content: flex-start;
	align-items: center;
}

.oshirase_box > div:nth-of-type(2) div:first-of-type {
	margin: 0 30px 0 0;
}

.oshirase_box > div:first-of-type,
.ver_box > div:first-of-type {
	width: 20%;
	text-align: center;
	padding: 20px;
}

.oshirase_box > div:nth-of-type(2),
.ver_box > div:nth-of-type(2) {
	display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 57%;
	line-height: 1.5;
}

.oshirase_box > div:last-of-type,
.ver_box > div:last-of-type {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	width: 20%;
	text-align: right;
}

.ver_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;
	color: #434343;
	background: rgba(10, 95, 117, 5%);
	border-bottom: 1px solid #ccc;
	padding: 0 20px 0 0;
}

.ver_box > div:first-of-type {
	display: flex;
	justify-content: center;
	align-items: center;
	border-right: 1px solid #ccc;
}

.free {
	padding: 10px;
	color: #232a2a;
	font-weight: 400;
	font-size: 20px;
	background: #eef4f3
}

.notice {
	color: #D64550;
	border: 5px double #D64550;
	font-weight: 700;
	font-size: 30px;
	padding: 25px 10px
}

.notice br {
	display: none
}

.notice span {
	margin-left: 10px;
	font-size: 25px
}

#info .infobox {
	margin: auto
}

#info .infobox .point p {
	font-size: 20px;
	margin-bottom: 40px
}

#info .infobox .point h2 {
	margin-bottom: 20px !important
}

#info .infobox .point h3 {
	display: inline-block;
	font-size: 80px;
	color: #fff;
	margin-bottom: 20px;
	position: relative
}

#info .infobox .point h3 span {
	font-size: 30px
}

#info .infobox .point h3 .pointsub {
	position: absolute;
	font-weight: 300;
	font-size: 16px;
	top: -20px;
	left: 5px
}

#info .infobox .point h5 {
	font-size: 18px;
	font-weight: 400;
}

.jyuuryou_box {
	display: flex;
	align-items: center;
	gap: 30px;
}

.jyuuryou_box > div:nth-of-type(2) {
	max-width: 400px;
	min-width: 380px;
	margin: 0 auto;
}

.jyuuryou_box > div:nth-of-type(2) img {
	width: 100%;
	margin: 0 0 10px;
}

.getugaku_box {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 30px;
	background: #fff;
	padding: 10px;
}

.getugaku_box > div p:nth-of-type(1) {
	font-size: 1.2rem;
	margin: 0 0 5px;
}

.getugaku_box > div p:nth-of-type(2) {
	font-size: 3rem;
}

.getugaku_box > p {
	color: #D64550;
	font-size: 3rem;
}


#info h3 {
	color: #000
}

#topic_introduction h2 {
	color: #40424E;
	vertical-align: middle
}

#topic_introduction h2 img {
	width: 230px;
	vertical-align: sub
}

#topic_introduction h2 span {
	vertical-align: bottom;
	font-size: 24px
}

#topic_introduction .introimg_hover {
	position: relative
}

#topic_introduction .introimg_hover:hover .bg {
	fill: #dff1ff;
	stroke: #36a1c9;
	stroke-width: 2;
	-webkit-transition: 0.3s;
	transition: 0.3s;
	cursor: pointer
}

#topic_introduction .introimg_hover:hover::after {
	padding: 200px;
	z-index: 10;
	content: "aaa";
	top: 0;
	left: 0
}

.icon_new {
	position: absolute;
	font-weight: 550;
	font-size: 20px;
	letter-spacing: 1px;
	top: 10%;
	left: -10px;
	color: #096a83;
	background: #effd43;
	padding: 8px 15px
}

.integration {
	padding: 0px 0 0px 0 !important;
	margin: auto;
	text-align: center;
	background: #f2f8fd;
	border-top: 1px solid #ddd
}

.integration .new_text {
	position: relative
}

.integration ul {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	max-width: 1010px;
	margin: auto;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.integration ul li {
	width: calc(90%/2);
	text-align: center;
	padding: 10px 5px;
	margin-bottom: 10px;
	margin-top: 10px;
	border: 1px solid #eaeaea;
	border-radius: 5px;
	margin-left: 10px;
	background: #fff
}

.integration ul li img {
	max-height: 30px;
	height: 3vw;
	width: auto
}

.integration p {
	margin-left: 80px;
	margin-top: 5px;
	color: #0A5F75;
	font-weight: 500
}

.fancybox-content {
	padding: 30px 15px !important
}

.modalcontents {
	max-width: 500px;
	width: 90vw
}

.modalcontents .memo {
	color: #0A5F75;
	border: 1px solid #0A5F75;
	display: inline-block;
	padding: 5px 15px;
	font-size: 15px;
	font-weight: 500
}

.modalcontents .modallogo {
	max-width: 320px;
	max-height: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin: auto;
	margin-bottom: 5px
}

.modalcontents p {
	font-size: 14px;
	margin-bottom: 10px;
	letter-spacing: -1px
}

.modalcontents .main {
	width: 100%;
	max-width: 400px;
	margin: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex
}

.modalcontents .button {
	border: 1px solid #00A8E8;
	width: 80%;
	margin: auto;
	border-radius: 5px;
	position: relative;
	text-align: center;
	margin-top: 20px
}

.modalcontents .button:hover {
	background-color: rgba(58, 175, 227, 0.2)
}

.modalcontents .button a {
	display: block;
	color: #00A8E8;
	text-align: center;
	padding: 15px
}

.modalcontents .button i {
	margin-left: 5px
}

.multi_three {
	margin-bottom: 50px;
	background: #E0E6E8;
	width: 100%;
	padding: 10px 0 10px 0
}

.multi_three .multi_wrap {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around
}

.multi_three .multi_wrap .cross {
	position: relative
}

.multi_three .multi_wrap .cross::after {
	content: "×";
	top: 20%;
	left: 95%;
	color: #c2c9d0;
	font-size: 100px;
	position: absolute
}

.multi_three .multi_wrap .multi_inner {
	width: calc(94%/3)
}

.multi_three .multi_wrap .multi_inner .multi_circle {
	font-size: 24px;
	font-weight: 700;
	letter-spacing: 1.5px;
	color: #0A5F75;
	width: 180px;
	height: 180px;
	margin: 0 auto;
	/* ←円を中央揃え */
	text-align: center;
	/* ←文字を左右に中央揃え */
	line-height: 185px;
	/* ←文字を上下に中央揃え */
	background: #fff;
	border-radius: 20%;
	-webkit-box-shadow: 18px 18px 69px rgba(10, 95, 117, 0.23), -18px -18px 69px #fff;
	box-shadow: 18px 18px 69px rgba(10, 95, 117, 0.23), -18px -18px 69px #fff
}

.multi_three .multi_wrap .multi_inner .multi_text {
	margin-top: 20px;
	padding: 15px 10px;
	background: #fff;
	border-radius: 10px;
	-webkit-box-shadow: 18px 18px 69px rgba(10, 95, 117, 0.23), -18px -18px 69px #fff;
	box-shadow: 18px 18px 69px rgba(10, 95, 117, 0.23), -18px -18px 69px #fff;
	line-height: 20px
}

.sudeni_title h2 {
	font-weight: 900;
	text-align: center;
	margin: 0 0 30px;
}

.sudeni_title h2 span {
	color: #D64550;
	font-size: 3rem;
}

.slider_title {
	font-size: 2.4rem;
	font-weight: 900;
	text-align: center;
	margin: 0 0 30px;
}

.slider_title span {
	color: #D64550;
}

.slider_box {
	position: relative;
	width: 100%;
	padding: 0px 35px;
	margin: 0 0 10px;
}

.slider_box img {
	width: 110px;
	height: 100px;
	object-fit: contain;
}

.slider_box a {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0px 2px 2px 1px rgb(0, 0, 0, 30%);
	margin: 10px 0;
	transition: .3s;
}

.slider_box a:hover {
	opacity: 0.3;
}

.slider_box a p {
	color: #4CBFC6;
	font-size: 1.6rem;
	font-weight: bold;
	text-align: center;
	line-height: 1.5;
}

.slider_box a > div {
	flex: 1;
}

.slider_box a > div:nth-of-type(1) {
	height: 70px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-right: 1px solid #4CBFC6;
	padding: 10px;
}

.slider_box a > div:nth-of-type(2) {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
}

.slider_box .swiper-button-prev {
	background-image: url(/product/rearegi/img/index/slider_arrow.svg);
	transform: rotate(180deg);
	z-index: 1;
}

.slider_box .swiper-button-next {
	background-image: url(/product/rearegi/img/index/slider_arrow.svg);
	z-index: 1;
}

.swiper-pagination {
	display: flex;
	justify-content: center;
	gap: 10px;
	position: inherit !important;
}

.swiper-pagination-bullet {
	width: 15px !important;
	height: 15px !important;
}

.swiper-pagination-bullet-active {
	background: #4CBFC6 !important;
}

.swiper-button-next,
.swiper-button-prev {
	z-index: 2 !important;
}

#stera:checked ~ #stera_content {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 20px;
}

#paycas_tance:checked ~ #paycas_tance_content {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.kesaitanmatu_box input#stera:checked ~ div label#stera_btn:hover,
.kesaitanmatu_box input#paycas_tance:checked ~ div label#paycas_tance_btn:hover {
	opacity: 1;
}

.kesaitanmatu_box input#stera:checked ~ div label#stera_btn,
.kesaitanmatu_box input#paycas_tance:checked ~ div label#paycas_tance_btn,
.kesaitanmatu_box input#paycas:checked ~ div label#paycas_btn {
	background: #0A5F75;
	color: #fff;
	border-bottom: 3px solid #0A5F75;
}

.kesaitanmatu_box > div:nth-of-type(n+2) a {
	display: block;
	line-height: 0;
	border-radius: 5px;
	box-shadow: 0 5px 10px rgb(0 0 0 / 20%);
	position: relative;
	transition: .3s;
}

.kesaitanmatu_box > div:nth-of-type(n+2) a:hover {
	opacity: 0.3;
}

.kesaitanmatu_box > div:nth-of-type(n+2) a.no_movie {
	pointer-events: none;
}

.kesaitanmatu_box > div:nth-of-type(n+2) a::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .8);
	margin: -20px 0 0 -20px;
	z-index: 1;
}

.kesaitanmatu_box > div:nth-of-type(n+2) a::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	border-top: 10px solid transparent;
	border-left: 16px solid rgba(0, 0, 0, .55);
	border-bottom: 10px solid transparent;
	margin: -10px 0 0 -6px;
	z-index: 2;
}

.kesaitanmatu_box > div:nth-of-type(n+2) a.no_movie::before,
.kesaitanmatu_box > div:nth-of-type(n+2) a.no_movie::after {
	display: none;
}

.kesaitanmatu_box video {
	width: 100%;
	border-radius: 5px;
}

#youto h2 {
	color: #0A5F75;
}

.youto_box {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.youto_box > div {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	border: 1px solid #0A5F75;
	background: #fff;
	padding: 20px;
}

.youto_box h3 {
	font-size: 2rem;
	margin-bottom: 10px;
}

.youto_box img {
	width: 100%;
	height: 100px;
	object-fit: contain;
	margin: 0 0 10px 0;
}

.youto_box p {
	text-align: left;
	min-height: 125px;
}

.youto_box a {
	display: block;
	color: #fff;
	line-height: 1.5;
	background-color: #5b95b5;
	border-radius: 5px;
	padding: 15px 5px;
	margin-top: 20px;
	transition: 0.3s;
}

.youto_box a:hover {
	color: #fff;
	opacity: 0.3;
}

h2.title_rearegitoha {
	color: #44444b;
	text-align: center;
}

h2.title_rearegitoha img {
	width: 100%;
	max-width: 230px;
	vertical-align: bottom;
}

.kihonkinou_box h2 {
	text-align: center;
	line-height: 1.5;
}

.kihonkinou_box h2 span {
	color: #44444b;
}

.kihonkinou_box h2 img {
	width: 230px;
	vertical-align: sub;
}

.kihonkinou_box > div {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 30px 10px;
}

.kihonkinou_box > div > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	position: relative;
	padding: 16px 0 0 0;
}

.kihonkinou_box > div > div img {
	width: 100%;
	max-width: 280px;
	object-fit: contain;
	background: #e8e8e8;
	border-radius: 10px 10px 0 0;
	padding: 30px 20px 0;
}

.kihonkinou_box > div > div p {
	font-size: 1.4rem;
	color: #fff;
	font-weight: bold;
	background: #747092;
	border-radius: 18px;
	position: absolute;
	top: 0;
	padding: 5px 15px;
}

.rearegi_box {
	margin: 0 auto;
}

.rearegi_box a {
	transition: .3s;
}

.rearegi_box a:hover {
	opacity: 0.3;
}

.rearegi_box > div {
	display: flex;
	justify-content: space-between;
	gap: 30px;
	padding: 30px;
}

.rearegi_box h3 {
	color: #0A5F75;
	margin: 0 0 10px;
}

.rearegi_box > div:nth-of-type(even) {
	background: #efefef;
}

.rearegi_box > div > div:nth-of-type(2) {
	display: flex;
	flex-flow: column;
	align-items: center;
	gap: 20px;
}

.rearegi_box > div > div:nth-of-type(2).btn_box {
	position: relative;
}

.rearegi_box > div > div:nth-of-type(2).btn_box a:nth-of-type(2) {
	font-size: 1.2rem;
	text-align: center;
}

.rearegi_box img {
	width: 100%;
	min-width: 250px;
	max-width: 250px;
	object-fit: contain;
}

.rearegi_box > div:nth-of-type(1) img,
.rearegi_box > div:nth-of-type(5) img {
	border-radius: 10px;
}

.rearegi_box > div:nth-of-type(1) .banner_hojyokin img {
	border-radius: 0;
}

.rearegi_box > div:nth-of-type(4) img,
.rearegi_box > div:nth-of-type(6) img {
	max-height: 180px;
}

.rearegi_box img.ios_btn {
	min-width: 150px;
}

.rearegi_box .banner_hojyokin {
	display: inline-block;
}

.rearegi_box .banner_hojyokin img {
	width: 100%;
	max-width: 250px;
}

.dekirukoto_box {
	max-width: 900px;
	display: grid;
	justify-content: center;
	grid-template-columns: repeat(auto-fit, 140px);
	gap: 30px;
	text-align: center;
	margin: 0 auto;
}

.kitchenset {
	padding: 20px;
	border-radius: 5px;
	border: 1px solid #bac7e3;
	margin: auto;
	margin-top: 10px
}

.kitchenset .text_black {
	font-size: 20px;
	font-weight: 600
}

.kitchenset .text_price_medium2 {
	font-size: 25px;
	font-weight: 400;
	color: #E90000
}

.kitchenset .text_spec {
	font-size: 12px
}

#topic_unyou,
#topic_cloud {
	padding-top: 60px
}

#topic_unyou a,
#topic_unyou i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline
}

#topic_feature a,
#topic_feature i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline
}

#topic_cloud a,
#topic_cloud i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline
}

#topic_price a,
#topic_price i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline
}

#topic_unyou h2,
#topic_feature h2,
#topic_cloud h2,
#topic_device h2,
#topic_price h2 {
	position: relative;
	text-align: center;
}

#topic_unyou h3.line {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	margin-bottom: 60px
}

#topic_unyou h3.line:before,
#topic_unyou h3.line:after {
	content: "";
	height: 1px;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	background-color: #d8d8d8
}

#topic_unyou h3.line:before {
	margin-right: 1rem
}

#topic_unyou h3.line:after {
	margin-left: 1rem
}

.unyou_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap
}

.unyou_box .unyou_inner {
	width: calc(100%/3);
	margin-bottom: 50px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.unyou_box img {
	width: 85%
}

.unyou_box .unyou_text {
	background: rgba(255, 255, 255, 0.92);
	width: 98%;
	height: 100%;
	padding: 10px 0;
	margin-bottom: 0px;
	border-radius: 5px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column
}

.unyou_box h4 {
	padding-bottom: 10px;
	font-size: 20px;
	text-align: left;
	color: #0A5F75;
	font-weight: 600;
	padding: 0 10px
}

.unyou_box p {
	text-align: left;
	padding: 0 10px;
	font-size: 14px;
	letter-spacing: 0px
}

#topic_feature h4 {
	background: #0A5F75;
	text-align: left;
	padding-left: 3px;
	color: white;
	margin-bottom: 20px;
	font-weight: 300
}

#topic_feature ul {
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-pack: distribute;
	justify-content: space-around;
	margin-bottom: 20px
}

#topic_feature ul li {
	width: calc(90%/4)
}

.contents {
	padding: 30px 10px
}

#topic_device h5 {
	font-size: 11px;
	text-align: left;
	font-weight: 500
}

section.info {
	border: 1px solid #eee;
	padding: 0.5vw 1vw 1vw;
	margin-top: 1vw;
	background: #fff
}

h2.wf-notosansjapanese {
	font-size: 1.5em;
	margin-top: 0;
	font-weight: 300;
	border-bottom: 1px solid #eee;
	padding-bottom: 10px;
	text-align: center;
	margin-bottom: 0px
}

.table {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
	margin-top: 0.5vw;
	overflow: scroll;
	overflow-x: hidden;
	height: 35vh
}

.info li {
	text-align: left !important;
	margin: inherit !important;
	width: 100% !important
}

.info li:first-child {
	max-width: inherit;
	font-size: 1em
}

.info li:nth-child(2) {
	overflow: initial
}

.info p {
	display: inline-block;
	line-height: 1.5em;
	width: 90%;
	text-align: left;
	font-size: 1.4rem
}

section.avairable {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	max-width: 1010px;
	margin-bottom: 60px
}

.table {
	width: 100%;
	margin: 10px
}

.table h4 {
	color: #fff;
	font-size: 15px;
	background: #4CBFC6;
	padding: 7px 10px;
	width: 100%
}

.table span {
	padding-left: 20px;
	font-size: 12px
}

.table table {
	width: 99%;
	margin-bottom: 10px
}

.table table th {
	text-align: left;
	padding: 10px 5px 5px;
	font-weight: 300
}

td {
	font-size: 14px;
	vertical-align: bottom;
	padding: 15px 5px;
	border: solid 1px #ccc
}

td:nth-child(1) {
	width: 20%
}

td:nth-child(2) {
	width: 30%
}

td:nth-child(3),
td:nth-child(4),
td:nth-child(5) {
	width: 20%
}

.th01 {
	font-size: 14px;
	white-space: nowrap;
	text-align: center;
	margin: 0 auto;
	padding: 0 30px
}

.td01 {
	font-size: 12px;
	color: #55f;
	padding: 0;
	border-width: 1px 0 0
}

.td02 {
	text-align: center;
	padding: 0
}

.td03 {
	min-width: 210px
}

#topic_introduction,
#topic_feature,
#topic_function,
#topic_plan,
#topic_hard {
	padding-top: 60px;
	margin-top: -60px
}

#topic_plan h2 {
	color: #0A5F75
}

* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

*:before,
*:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box
}

#menu-box {
	width: 100%;
	text-align: center
}

#menu-box h3 {
	padding-top: 1rem;
	padding-bottom: 0.5rem;
	color: #fff
}

#toggle {
	display: none
}

#menu {
	overflow: hidden;
	width: 100%;
	max-width: 1010px;
	margin: 0 auto;
	/* display:flex; */
	/* justify-content:space-between; */
	/* float:left; */
}

#menu li {
	width: calc(100% / 4);
	text-align: center;
	margin: 0 auto;
	position: relative;
	height: 105px;
	/* float:inherit; */
	float: left;
	margin-bottom: 20px
}

#menu li:hover {
	opacity: 0.5
}

#menu li a {
	/* display:block;      float:left;      width:118px; */
	color: #00863C;
	text-align: center;
	/* margin-right:1px; */
	padding: 10px 0 5px;
	/* border:1px solid #ddd; */
}

#menu li img {
	height: 60px;
	margin-top: 10px
}

#menu li span {
	display: block;
	font-size: 14px;
	line-height: 20px;
	font-weight: bold;
	color: #0A5F75;
	margin: 10px auto;
	letter-spacing: 2px
}

#menu li .single {
	margin-top: 0.1rem
}

.slider {
	display: none
}

.slider.slick-initialized {
	display: block;
	/*slick-initializedが付与されたら表示*/
}

.rearegifunc {
	width: 100%
}

.rearegifunc a,
.rearegifunc i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline
}

.rearegifunc a:hover,
.rearegifunc i:hover {
	color: #0088d0;
	opacity: 0.3
}

.rearegifunc td img {
	max-width: 100px
}

table.func_tbl {
	border-collapse: collapse;
	background: #fff;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%
}

table.func_tbl tr {
	height: 119px !important
}

table.func_tbl th {
	background-color: #fff;
	color: #000;
	border: 1px solid #ccc;
	font-size: 1.6rem;
	padding: 1.5rem
}

table.func_tbl td {
	width: 100%
}

table.func_tbl td:first-child {
	padding: 1em 0;
	width: 30%;
	text-align: center;
	vertical-align: middle;
	color: #000;
	font-weight: 700;
	font-size: 12px;
	border: 1px solid #ccc
}

table.func_tbl td:nth-child(2) {
	padding: 0.5em 1em;
	width: 70%;
	line-height: 20px;
	text-align: left;
	vertical-align: middle;
	color: #000;
	border: 1px solid #ccc
}

table.func_tbl .func_tbl_title {
	height: 70px !important
}

table.func_tbl .func_tbl_title td {
	font-size: 14px;
	width: 100% !important;
	background: #f3f3f3
}

table.func_tbl td img {
	max-width: 60px;
	padding: 0.2rem 0
}

table.func_tbl td span {
	font-size: 1rem;
	padding: 1rem;
	display: block
}

.nav-wrap2 {
	background: rgba(209, 209, 209, 0.9);
	/* メニューの背景色 */
	border-top: 1px solid white;
	padding: 5px;
	height: 102px;
}

.nav-wrap2 li {
	font-size: 12px;
	font-weight: 600;
	text-align: center;
	padding: 52px 0 10px 0;
	margin-right: 10px;
	border: 3px solid #ccc;
	max-width: 215px;
	background: #fff;
	border-radius: 8px;
	color: #3c3c3c;
	position: relative;
	min-height: 96px
}

.nav-wrap2 li:hover {
	background: #e2f7f6
}

.nav-wrap2 li img {
	width: 47px !important;
	position: absolute;
	top: 8%;
	left: 38%
}

.nav-slider {
	position: relative;
	padding: 0 0.5%;
	width: 90%;
	margin: auto
}

section.payment {
	width: 100%;
	padding: 25px 0;
	margin: 0 auto;
	text-align: center
}

.payment p {
	font-size: 16px;
	color: #fff;
	line-height: 26px;
	margin-bottom: 40px
}

.payment_layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between
}

.paymentbox {
	text-align: center;
	width: 30%
}

.paymentbox img {
	max-height: 110px
}

.paymentbox p {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	margin-bottom: 20px
}

.cardbox {
	min-height: 130px;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #0A5F75;
	border-radius: 5px;
	padding: 20px 10px;
}

.cardbox img {
	max-height: 80px;
	object-fit: contain;
}

.card_layout p {
	font-size: 16px;
	font-weight: 700;
	color: #000;
	margin-bottom: 10px;
}

table.kessai {
	border-collapse: collapse;
	border: 1px solid #ccc;
	width: 100%;
	padding: 1rem;
	background: #fff
}

table.kessai th{
	background-color: #0A5F75;
	color: #fff;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	padding: 2rem 0
}
table.kessai .os2{
    background-color: #e1e1e1;
    color: #2b2b2b;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 300;
    padding: 1rem 0;
}

table.kessai td {
	vertical-align: middle;
	padding: 1.5rem;
	border: 0.1px solid #c1c1c1
}

table.kessai td ul {
	-webkit-box-pack: left !important;
	-ms-flex-pack: left !important;
	justify-content: left !important
}

table.kessai td ul li {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	vertical-align: middle;
	padding-left: 40px;
	padding-top: 10px;
	text-align: center;
	width: auto !important
}

table.kessai td ul li:first-child {
	width: 32px;
	height: 32px;
	position: relative;
	margin-left: 60px
}

table.kessai td ul li img {
	top: 0%;
	left: 0%;
	position: absolute;
	max-width: 50px
}

.type_w {
	position: relative;
	z-index: 1;
	display: block;
	background-color: #fff;
	border: 2px solid #0A5F75;
	padding: 2rem;
	color: #0A5F75;
	text-align: center;
	margin-bottom: 1.5rem;
	width: 100%
}

.type_n {
	position: relative;
	z-index: 1;
	width: 100%;
	display: block;
	background-color: #0A5F75;
	border: 2px solid #0A5F75;
	padding: 2rem;
	color: #fff;
	text-align: center;
	margin-bottom: 1.5rem;
	width: 100%
}

.type_w a,
.type_n a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%
}

table.kessai_tbl {
	border-collapse: collapse;
	border: 1px solid #ccc;
	width: 100%;
	padding: 1rem;
	background: #fff
}

table.kessai_tbl th {
	background-color: #fff;
	color: #000;
	border: 1px solid #ccc;
	text-align: center;
	font-size: 1.6rem;
	font-weight: 700;
	padding: 1.5rem
}

table.kessai_tbl td {
	width: 25% !important;
	text-align: center;
	vertical-align: middle;
	color: #000;
	border: 1px solid #ccc
}

table.kessai_tbl img {
	max-width: 140px;
	max-height: 70px;
	object-fit: contain;
}

.payment_table_text {
	background-color: #0A5F75;
	color: #fff !important;
	font-size: 2rem;
	font-weight: 700;
	padding: 1.5rem 0
}

table.kessai_tbl td img.logo_credit {
	max-width: 100px;
	max-height: 150px;
}

table.kessai_tbl td img.logo_credit_tl {
	max-width: 140px;
	max-height: 150px;
}

table.kessai_tbl td img.logo_em {
	max-width: 220px;
	max-height: 160px;
}

table.kessai_tbl td img.logo_sp {
	max-width: 200px;
	max-height: 130px;
}

table.kessai_tbl td span {
	font-size: 1.5rem;
	padding: 1rem;
	display: block;
	line-height: 1.5
}

table.kessai_tbl td span a {
	transition: 0.3s
}

table.kessai_tbl td span a:hover {
	color: #000;
	opacity: 0.3
}

.bg-blue {
	padding-top: 20px;
	position: relative;
	background: rgba(142, 193, 212, 0.08)
}

.bg-blue::after {
	content: "";
	position: absolute;
	top: 0%;
	left: calc(93vw - 50%);
	width: 0;
	height: 0;
	border-top: 40px solid #E4F1F8;
	/* 好みで高さ色を変えてください */
	border-left: 6vw solid transparent;
	border-right: 6vw solid transparent;
	z-index: 0
}

.bg-blue h2 {
	color: #0A5F75
}

.bg-blue h3 {
	margin-top: 20px;
	margin-bottom: 10px;
	font-size: 20px;
	text-align: left;
	color: #f39800;
	font-weight: 600;
	padding: 0 10px
}

.bg-blue p {
	padding: 0 10px;
	font-size: 1.4rem
}

.bg-blue a,
.bg-blue i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline;
	transition: 0.3s
}

.bg-blue a:hover {
	color: #0088d0;
	opacity: 0.3
}

#customer a,
#customer i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline
}

.customer_list .shop h2 {
	color: #050080
}

.customer_list .shop span {
	padding-bottom: 3px;
	border-bottom: 3px solid #6f9bd6
}

.customer_list .shop ul {
	font-size: 16px;
	text-align: left;
	margin-left: 50px;
	font-weight: 500;
	line-height: 40px
}

.customer_list .shop ul li::before {
	content: "";
	margin-right: 20px;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	color: #050080
}

.customer_list .customer h2 {
	color: #bc0e4a
}

.customer_list .customer span {
	padding-bottom: 3px;
	border-bottom: 3px solid #d66f6f
}

.customer_list .customer ul {
	font-size: 16px;
	text-align: left;
	margin-left: 50px;
	font-weight: 500;
	line-height: 40px
}

.customer_list .customer ul li::before {
	content: "";
	margin-right: 20px;
	font-family: "Font Awesome 5 Free";
	font-weight: 600;
	color: #bc0e4a
}

#order a,
#order i {
	color: #0088d0;
	font-weight: 600;
	text-decoration: underline;
	transition: 0.3s
}

#order a:hover {
	opacity: 0.3
}

.order_box div {
	position: relative
}

.order_box div::before {
	content: "▼";
	position: absolute;
	top: 120%;
	left: 50%
}

.order_box div:last-child::before {
	content: ""
}

.order_box a {
	color: #fff;
	text-decoration: underline
}

.order_box p {
	font-size: 16px;
	padding: 10px;
	border: 1px solid #fff;
	border-radius: 50px;
	width: 50%;
	margin: auto;
	margin-bottom: 30px;
	position: relative
}

#acMenu h3 {
	position: relative;
	cursor: pointer;
	margin-bottom: 40px
}

#acMenu h3:hover {
	opacity: 0.8
}

#acMenu h3 span {
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
	padding: 14.5px 20px;
	background: #fff
}

#acMenu h3 .rotation2 {
	-webkit-transform: rotateX(180deg);
	transform: rotateX(180deg)
}

section.qrkessai {
	max-width: 1010px;
	margin: 70px auto 0;
	border-top: 1px solid #ccc
}

.qrkessai h2 {
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin: 60px auto 0
}

.qrkessai p {
	text-align: center;
	font-size: 14px;
	margin-bottom: 20px
}

.qrkessai_wrap {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 70px
}

.qrkessai_caution1 {
	width: 49%;
	margin-bottom: 10px;
	border: 1px solid #999
}

.qrkessai_caution1 span {
	padding: 15px;
	font-size: 16px;
	text-align: left;
	color: red;
	margin: 0;
	padding: 0
}

.qrkessai_caution1 dt {
	padding: 10px;
	background: #41778b;
	color: #fff;
	text-align: center
}

.qrkessai_caution1 ul {
	padding: 10px;
	font-size: 16px;
	line-height: 25px
}

.qrkessai_caution2 {
	width: 49%;
	border: 1px solid #999;
	margin-bottom: 10px
}

.qrkessai_caution2 ul {
	padding: 10px;
	font-size: 16px;
	line-height: 25px
}

.qrkessai_caution2 dt {
	padding: 10px;
	background: #4c7b3b;
	color: #fff;
	text-align: center
}

.qricon_layout {
	max-width: 640px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin: 10px auto
}

.qr_icon {
	width: 15%;
	margin: 0 auto;
	text-align: center
}

.qr_icon img {
	max-width: 80px
}

.qrkessai_txt {
	max-width: 1010px;
	text-align: left
}

.qrkessai_txt h3 {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin-bottom: 15px
}

.qrkessai_txt h4 {
	font-size: 17px;
	font-weight: 700;
	color: #000;
	margin-bottom: 15px;
	margin-top: 30px;
	padding-bottom: 5px;
	border-bottom: 2px #bbe3d2 solid
}

.qrkessai_txt h5 {
	font-size: 17px;
	color: #000;
	margin-bottom: 20px;
	margin-top: 30px
}

.qrkessai_txt p {
	margin-top: 20px;
	text-align: left;
	font-size: 15px;
	line-height: 30px
}

.regist_layout {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end
}

.btnbox {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	border: 1px solid #999;
	color: #000;
	font-size: 1.8rem;
	width: 40%;
	height: 40px;
	padding: 10px
}

a.btnbox {
	color: #000;
	transition: 0.3s
}

a.btnbox:hover {
	color: #000;
	opacity: 0.3
}

.btnbox2 {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #eee;
	border: 1px solid #999;
	color: #000;
	font-size: 1.8rem;
	width: 100%;
	height: 50px;
	padding: 10px;
	margin-top: 10px
}

a.btnbox2 {
	color: #000;
	transition: 0.3s
}

a.btnbox2:hover {
	color: #000;
	opacity: 0.3
}

h3.case {
	margin-top: 40px;
	background: #daeaf4;
	padding: 15px 10px;
	border: 1px solid #d1d1d1
}

.mailsend {
	display: block;
	border: 1px solid #999;
	background-color: #eee;
	color: #000;
	font-size: 1.8rem;
	text-align: center;
	padding: 15px 0
}

.mailsend a {
	color: #000
}

section.cardkessai {
	max-width: 1010px;
	margin: 0 auto;
	margin: 70px auto 0;
	border-top: 1px solid #ccc
}

.cardkessai h2 {
	font-size: 28px;
	font-weight: 700;
	text-align: center;
	margin: 60px auto 0
}

.cardkessai p {
	text-align: center;
	font-size: 14px;
	margin-bottom: 5rem
}

.kessai_icon {
	width: 30%;
	margin: 0 auto;
	text-align: center
}

.kessai_icon img {
	max-width: 200px;
	margin: 20px auto
}

.cardkessai_txt {
	max-width: 1010px;
	text-align: center;
	margin: 0 auto
}

.cardkessai_txt h3 {
	font-size: 18px;
	text-align: center;
	font-weight: 700;
	color: #000
}

.cardkessai_txt p {
	margin-top: 10px;
	text-align: center;
	font-size: 16px;
	line-height: 22px
}

form#mail_form li:first-child {
	margin-top: 7px
}

.price_container {
	display: flex;
	gap: 30px;
	margin: 0 auto;
}

.card1 {
	padding: 12px 0;
	margin-bottom: 10px;
	background: #eaf4f2
}

.card2 {
	padding: 12px 0;
	margin-bottom: 10px;
	background: #ecedf0
}

.card {
	display: flex;
	flex-flow: column;
	flex: 1;
	position: relative;
}

.card_box {
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.card_box2 {
	display: table-cell;
	height: 100%;
	min-height: 320px
}

.fee {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.fee div {
	margin-top: 10px;
	margin-bottom: 8px;
	padding: 8px 0;
	color: #fff;
	font-weight: 500;
	width: calc(85%/2)
}

.fee div:first-child {
	margin-right: 10px;
	background: #4CBFC6
}

.fee div:last-child {
	background: #0A5F75
}

.highlight .topic_plan {
	background: #d7ebe7
}

.other {
	background: #fff;
	-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	border-radius: 10px;
}

.support_box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	width: 100%;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center
}

.support_box img {
	width: 5%
}

.support_box div {
	width: 90%
}

@-webkit-keyframes slidein {
	from {
		left: -1500px
	}

	to {
		left: 0
	}
}

@keyframes slidein {
	from {
		left: -1500px
	}

	to {
		left: 0
	}
}

.card a {
	width: 50%;
	min-width: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4CBFC6;
	font-size: 1.2rem;
	font-weight: bold;
	background: #e1ecee;
	border: 1px solid #4CBFC6;
	border-radius: 5px;
	position: relative;
	padding: 10px 0px;
	margin: 0 auto;
	transition: .3s;
}

.card a:hover {
	opacity: 0.3;
}

.card a::after {
	font-family: "Font Awesome 5 Free";
	content: "\f101";
	font-weight: 900;
	margin: 0 0 0 10px;
}

.card ul {
	height: 80px;
	list-style-type: none;
}

.card ul li {
	width: 100%;
	font-size: 1em;
	padding-bottom: 14px
}

.card ul li:first-of-type {
	padding-top: 10px
}

.card .title1 {
	font-size: 1.6em;
	margin-bottom: 10px;
	font-weight: 500;
	padding: 25px;
	border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
	background: #0a5f75;
	background: linear-gradient(45deg, #0a5f75 0%, #2eb4af 57%);
	color: #fff
}

.card .title2 {
	font-size: 1.6em;
	margin-bottom: 10px;
	font-weight: 500;
	padding: 25px;
	border-radius: 10px 10px 0px 0px/10px 10px 0px 0px;
	background: #6c748b;
	background: #6c748b;
	background: linear-gradient(45deg, #6c748b 0%, #a2a9be 30%);
	color: #fff
}

.card h2 {
	font-size: 1em;
	font-weight: 600;
	padding: 0px 5px 10px 5px
}

.price {
	width: 100%;
	background: #ecedf0;
	margin: 0 0 10px;
}

.card h3 {
	font-size: 2em;
	font-weight: 700;
	margin-top: 0px;
	margin-bottom: 0px;
	padding: 18px 0 17px;
	max-height: 62px
}

.card h3 span {
	font-weight: 400;
	font-size: 0.6em
}

.rearegi {
	background: #f7fafa;
	padding: 0 10px;
}

.pb_bcpos {
	-webkit-box-ordinal-group: 5;
	-ms-flex-order: 4;
	order: 4
}

.pb_rearegi {
	-webkit-box-ordinal-group: 2;
	-ms-flex-order: 1;
	order: 1
}

.pb_atkessai {
	-webkit-box-ordinal-group: 6;
	-ms-flex-order: 5;
	order: 5
}

.pb_misemeg {
	-webkit-box-ordinal-group: 3;
	-ms-flex-order: 2;
	order: 2
}

.pb_tv {
	-webkit-box-ordinal-group: 4;
	-ms-flex-order: 3;
	order: 3
}

.pb_taxfree {
	-webkit-box-ordinal-group: 7;
	-ms-flex-order: 6;
	order: 6
}

.pb_atpassport {
	-webkit-box-ordinal-group: 8;
	-ms-flex-order: 7;
	order: 7
}

.pconly_1000 {
	display: inline
}

.sponly_1000 {
	display: none
}

.mb-20-pc {
	margin-bottom: 20px !important
}

/*end media queries*/
/*---210513_杉浦追加---*/
.bg_blugreen {
	background: #4CBFC6
}

.box_kenbai {
	display: inline-flex;
	align-items: center;
	justify-content: space-around;
	width: 100%;
	max-width: 400px;
	border: 1px solid #BFBFBF;
	border-radius: 4px;
	margin: 0 auto
}

.box_kenbai_img {
	max-width: 80px
}

a.box_kenbai_link {
	display: block
}

a.box_kenbai_link:hover {
	opacity: 0.5;
	color: inherit
}

.box_start {
	display: flex;
	justify-content: space-around;
	align-items: baseline
}

.box_start div {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	flex-wrap: wrap
}

.box_start div p {
	margin: 10px 0 0 0
}

.box_start div + img {
	max-width: 15px
}

.box_start_img {
	max-height: 55px
}

.box_start_img2 {
	max-width: 60px
}

.box_start_btn {
	max-width: 450px;
	text-align: center;
	text-align: -webkit-center;
	padding: 20px 0 0 0;
	margin: 0 auto
}

.box_feature {
	display: flex;
	justify-content: space-around;
	max-width: 800px;
	margin: 0 auto
}

.box_feature img {
	width: 20%;
	height: 100%;
	max-width: 110px
}

.box_renkei {
	display: flex;
	align-items: center;
	gap: 10px;
}

.box_renkei > div {
	display: flex;
	flex-flow: column;
	gap: 10px;
}

.box_renkei img {
	width: auto;
	height: 40px
}

.box_hero_logo {
	display: flex;
	justify-content: space-around;
	width: 80%;
	margin-top: 30px
}

.title_line {
	text-align: center;
}

.title_line h2 {
	display: inline-block;
	color: #44444b;
	font-size: 3rem;
	border-bottom: 2px solid #D64550;
	padding: 0 20px 5px;
	position: relative;
}

.title_line h2::after {
	content: '';
	background: #D64550;
	width: 13px;
	height: 23px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	position: absolute;
	bottom: -18px;
	left: 50%;
	margin: 0 0 0 -7px;
	transform: rotate(90deg);
}

.text_white {
	color: #fff !important;
}

.text_black {
	color: #000 !important;
}

.text_green {
	color: #0A5F75 !important;
}

.text_small {
	font-size: 1.2rem !important;
}

.text_medium {
	font-size: 1.6rem !important;
	font-weight: bold;
}

.text_annotation {
	font-size: 1.2rem;
	line-height: 1.8;
}

.text_new {
	display: inline-block;
	color: #fff;
	background: #F63B3B;
	padding: 5px 10px;
	line-height: 1
}

.text_new2 {
	display: inline-block;
	color: #fff;
	background: #F63B3B;
	padding: 5px 10px;
	line-height: 1
}

.text_price_small {
	color: #E90000;
	font-size: 1.8rem
}

.text_price_medium {
	color: #E90000;
	font-size: 3.0rem
}

.text_spec {
	color: #707070;
	font-size: 1.4rem;
	line-height: 1.8
}

.img_renkei_logo {
	max-width: 80px
}

.img_renkei_logo2 {
	width: 100%;
	max-width: 100px
}

a.icon_double_right {
	color: #444;
	transition: 0.3s
}

a.icon_double_right:hover {
	color: #444;
	opacity: 0.5
}

.w_350 {
	width: 100%;
	max-width: 350px
}

.w_400 {
	width: 100%;
	max-width: 400px;
}

.kadomaru {
	border-radius: 10px;
}

#topic_feature h1 {
	font-size: 3.0rem;
	font-weight: 800
}

.pt-30 {
	padding-top: 30px !important
}

.ml-10 {
	margin-left: 10px
}

.ml-10-pconly {
	margin-left: 10px
}

.sponly2 {
	display: none;
}

.btn_text {
	font-size: 17px !important;
	margin-top: 20px;
	font-weight: 500;
	margin-bottom: 7px !important;
}

.btn_text span {
	color: #D64550;
	font-weight: 700;
}

.btn_bluegreen,
.btn_darkgreen,
.btn_orange {
	width: 100%;
	max-width: 400px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	border-radius: 5px;
	position: relative;
	padding: 0 10px;
	margin: 0 auto;
	transition: .3s;
}

.btn_bluegreen:hover,
.btn_darkgreen:hover,
.btn_orange:hover {
	color: #fff;
	opacity: 0.3;
}

.btn_bluegreen::after,
.btn_darkgreen::after,
.btn_orange::after {
	font-family: "Font Awesome 5 Free";
	content: "\f101";
	font-size: 1.4rem;
	font-weight: 900;
	position: absolute;
	right: 7%;
	margin: 0 0 0 10px;
}

.btn_bluegreen.small,
.btn_darkgreen.small,
.btn_orange.small {
	max-width: 200px;
	height: 30px;
}

.btn_bluegreen {
	background: #4CBFC6;
}

.btn_darkgreen {
	background: #0A5F75;
}

.btn_orange {
	background: #e14d2a;
}

.hoverC:hover {
	background:
}

/* cta */


.btm_btn01,
.btm_btn02,
.btm_btn03,
.btm_btn03s {

	max-width: 300px !important;
	margin: auto;
	min-width: 200px;
	display: block;
	text-align: center;
	padding: 1.5rem 0;
	position: relative;
	z-index: 1;
	font-size: 13px;
	color: white;
	border-radius: 2px
}

.btm_btn03r{

	max-width: 300px !important;
	margin: auto;
	min-width: 200px;
	display: block;
	text-align: center;
	padding: 1.5rem 0;
	position: relative;
	z-index: 1;
	font-size: 13px;
	border-radius: 2px
}

.bg_gray1 {
    background: #e7edff;
}

.bg_gray5 {
	background: #eef3f5
}

.btm_btn01 {
	background-color: #414141;
	border: 1px solid #c4c4c4;
}

.btm_btn03s {
    background-color: #19416a;
    border: 1px solid #c4c4c4;
}

.cta_inner {
	padding: 30px 20px;

}

.cta_inner h4 {
	font-size: 22px;
}

.cta_inner p{p {
    font-size: 1.4rem;
    line-height: 25px;
}}

.line {
	color: black;
	font-size: 3.5rem;
	text-align: center;
	line-height: 1.5;
	position: relative;
	margin: 0 0 20px;
}

.line::after {
	content: '';
	position: absolute;
	bottom: -10px;
	display: inline-block;
	width: 60px;
	height: 3px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	background-color: #78b7ed;
	border-radius: 2px;
}

/* cta */


/* faq */

#faq h2 {
	margin-bottom: 0
}

#faq .container2 {
	margin: 0 auto;
}

#faq h3 {
	color: #373d51;
	padding: 1.3rem;
	margin: 0
}
#faq .accordion2  {
counter-reset: number 0; 
}

#faq .cp_qa02 {
	width: 100%;
	display: flex;
	flex-direction: column;
	color: #0f1406;
	font-size: 1.6rem;
	line-height: 1.5;
	border-bottom: 1px solid #e5e5e5;
	position: relative;
	padding: 30px 60px 10px 30px;
	margin: 0;
	text-align: justify;
	font-weight: 600;

}
.cp_qa02::before {
	counter-increment: number;
    content: counter(number) ". ";
	position: absolute;
	top: 50;
	left: 0;
	position: absolute;
  }

.cp_qa02.active3{color: #147087!important;}


#faq .accordion2 a:hover,
#faq .accordion2 a:hover::after {
	cursor: pointer;
	color: #147087;
}

#faq .accordion2 a:hover::after {
	border: 1px solid #147087;
}

#faq .accordion2>a.active3 {
	color: #147087;
	border-bottom: 1px solid #147087;
	background: #f1fafc
}

#faq .accordion2 a:after {
	content: "+";
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: 400;
	position: absolute;
	bottom: 9px;
	right: 1rem;
	font-size: 3.3rem;
	color: #7288a2;
	padding: 5px;
	width: 25px;
	height: 25px;
	border-radius: 50%;
	border: 1px solid #7288a2;
}

#faq .accordion2 a.active3:after {
	content: "-";
	font-size: 2.5rem;
	font-weight: 600;
	color: #147087;
	border: 1px solid #147087;
}

#faq .accordion2 a.link_faq {
	width: 20pc;
	color: green;
	text-align: center;
	position: relative;
	display: inline-block;
	font-size: 1.6rem;
	font-weight: 600;
	background-color: #fff;
	border: 1px solid green;
	border-radius: 20px;
	padding: 10px 0;
	margin: 10px 0 20px;
	transition: .3s
}

#faq .accordion2 a.link_faq:hover {
	color: #0f1406;
	border: 1px solid #0f1406
}

/* #faq .accordion2 a.link_faq:after {
	display: none
} */

#faq .accordion2 a.link_faq.active2 {
	background: 0
}

#faq .accordion2 .content {
	opacity: 0;
	padding: 0 1rem;
	max-height: 0;
	border-bottom: 1px solid #e5e5e5;
	overflow: hidden;
	clear: both;
	transition: all .2s ease .15s
}

#faq .accordion2 .content p {
	font-size: 1.5rem;
    line-height: 1.7;
	text-align: left;
}

#faq .accordion2 .content.active3 {
	opacity: 1;
	padding: 1.6rem 0;
	max-height: 100%;
	transition: all .35s ease .15s
}

.bg_gray7 {
	background:#f3f3f4;}

.faq_btn01 {
	background-color: #c4373c;
	/* border: 1px solid #c4c4c4; */
	border-radius: 40px;
	font-size: 15px;
	display: inline-table;
	padding: 16px 40px;
	/* width: 80% !important; */

}

.faq_btn01 {
	width: 260px;
	min-width: 200px;
	display: block;
	text-align: center;
	padding: 1.5rem 0;
	position: relative;
	z-index: 1;
	font-size: 13px;
	color: white;
}


.faq_btn01 a{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2
}

/* faq */

/* ending */

.bg_gray8 {
	background: #d8ecef;
}


section.ending {
	/* background-color: #D0701D; */
	margin: 0 auto;
	text-align: center
}

.endingbox {
	width: 100%;
	text-align: center;
	margin: 0 auto;
}

.endingbox h2 {
	/* font-size: 2.8rem; */
	margin-bottom: 10px;

}

.endingbox img {
	width: 80%
}

.endingbox ul li img {
	/*width: 80%;*/
	max-width: 150px;
}
.endingbox ul {
	display: flex;
	justify-content: center;
	gap: 30px;
    align-items: flex-start;
    margin: 0 auto;
    align-items: center;
    padding: 0 15px;}

.endingbox ul li {
	width: 60%;
	margin: 0 auto;
}


.endingbox ul li span {
	display: block;
	font-size: 14px;
	color: #fff
}

.endingbox ul li span img {
	width: 86px
}


.endingbox span {
	display: inline-block;
	font-size: 40px;
	font-weight: 700;
	color: #fff;
	padding: 0 10px
}

.appqr{max-width: 80px!important;}


.tryinner h3{margin-bottom: 5px;
	color: #042c54!important;
margin-bottom: 5px;
}

.trybox{
	/* gap: 10px; */
	display: flex;}


.tryinner{padding: 15px;
border-radius: 5px;
/* border: 1px solid #e6e6e6; */
margin: auto;
width: 49%;
background: #ffffff94;
}



/*---terms.html---*/

#terms p {
	font-size: 14.5px;
	margin-bottom: 0px;
	line-height: 22px
}

#terms h2 {
	text-align: center;
	color: #0A5F75;
	margin-top: 30px;
	margin-bottom: 30px
}

#terms h3 {
	font-size: 18px;
	margin-top: 30px;
	margin-bottom: 20px
}

#terms .terms_table td,
#terms .terms_table th {
	padding: 10px 0px 10px 10px;
	border-bottom: 1px solid #ccc
}

#terms .terms_table td {
	padding: 12px 0 12px 12px;
	line-height: 20px
}

#terms .terms_table td:nth-child(odd) {
	background: #f5f5f5
}

#terms .terms_table td:first-child {
	width: 150px
}

#terms .term_list li {
	list-style: none;
	position: relative;
	padding: 10px 0;
	padding-left: 20px;
	margin-left: 1.1em;
	text-indent: -1.1em;
	line-height: 21px;
	font-size: 15px
}

#terms .term_list1 {
	counter-reset: number 0
}

#terms .term_list1 li {
	list-style: none;
	position: relative;
	padding: 10px 0;
	padding-left: 20px;
	margin-left: 1.1em;
	text-indent: -1.1em;
	line-height: 21px;
	font-size: 15px
}

#terms .term_list1 li:before {
	counter-increment: number 1;
	content: counter(number) ".";
	padding-right: 3px
}

#terms .term_list2 {
	counter-reset: number 0
}

#terms .term_list2 li {
	list-style: none;
	position: relative;
	padding: 10px 0;
	padding-left: 20px;
	margin-left: 1.9em;
	text-indent: -1.9em;
	line-height: 19px;
	font-size: 15px
}

#terms .term_list2 li:before {
	counter-increment: number 1;
	content: "("counter(number) ")";
	padding-right: 10px
}

#terms ul.list_disc {
	line-height: 1.5;
}

#terms ul.list_disc li {
	list-style: disc;
	margin: 0 0 0 2rem;
}

/*--- terms.htmlここまで ---*/

/*----- メールフォーム -----*/

.form_box {
	display: flex;
	flex-flow: column;
	justify-content: center;
	background: #fff;
	border-radius: 10px;
	box-shadow: 0 2px 5px 1px rgb(0 0 0 / 10%);
	padding: 40px;
	margin: 0 auto;
}

.form_title h2 {
	color: #0A5F75;
	font-size: 2.4rem;
	text-align: center;
	line-height: 1.5;
	margin: 0 0 30px;
}

.form_box h3 {
	font-size: 1.6rem;
	text-align: center;
	line-height: 1.5;
	margin: 0 0 10px;
}

.form_box h3 + div {
	color: #ff0000;
	text-align: center;
	margin: 0 0 30px;
}

.form_box table {
	margin: 0 0 10px;
}

.form_box table tr th,
.form_box table tr td {
	width: auto;
	text-align: left;
	border: 0;
	padding: 20px 0;
	font-weight: 600px;
	color: #000;
}

.form_box table tr th {
    padding-left: 50px;
    text-indent: -3.5em;
	width: 30%;
	line-height: 18px;

}

.form_box table tr th span {
	color: #fff;
	background: #d9534f;
	border-radius: 5px;
	padding: 5px;
	margin: 0 10px 0 0;
}
.form_box table tr th span.blank {
    background: none !important;
    width: 39px;
    display: inline-flex;
}

.form_box label {
	line-height: 1.5;
}

.form_box input[type="text"],
.form_box input[type="email"],
.form_box input[type="tel"],
.form_box textarea,
.form_box select {
	width: 100%;
}

.form_box input.short {
	max-width: 200px;
}

.form_box input,
.form_box textarea,
.form_box select {
	background: #f9f9f9;
	border: 1px solid #ececec;
	border-radius: 5px;
	padding: 10px;
}

.form_box p.error_messe {
	color: #ff0000;
}

.form_box > p.front {
	text-align: center;
	margin: 0 0 30px;
}

.form_box > p input {
	width: fit-content;
	display: flex;
	min-width: 300px;
	height: 40px;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 1.6rem;
	font-weight: bold;
	background: #4CBFC6;
	border: none;
	border-radius: 5px;
	box-shadow: 0 2px 3px 0 rgb(0 0 0 / 20%);
	position: relative;
	cursor: pointer;
	margin: 0 auto;
	transition: .3s;
}

.form_box > p input.back {
	color: #fff;
	background: #999;
}

.form_box > p input:hover {
	opacity: 0.3;
}

.form_box .columns {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.form_box table.kakunin_table tr th,
.form_box table.kakunin_table tr td {
	border: 1px solid #ccc;
	padding: 20px;
	text-indent: 0em;
}

.form_box table.kakunin_table tr th {
	font-weight: bold;
	background: #eee;
}

.form_box table.kakunin_table + p {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 30px;
}

/*----- メールフォームここまで -----*/


@media screen and (max-width:1024px) {

	/*--- ヘッダーメニュー ---*/

	body.fixed {
		width: 100%;
		height: 100%;
		position: fixed;
		overflow-y: scroll;
	}

	.header_nav .bg_blind.on {
		background: #dbe5e5;
	}

	.header_nav .main_menu {
		padding: 0 10px;
	}

	.header_nav .main_menu > ul {
		width: 100%;
		height: 0;
		overflow-y: hidden;
		flex-flow: column;
		background: #dbe5e5;
		position: absolute;
		top: 60px;
		left: 0;
		opacity: 0;
		transition: .3s;
	}

	.header_nav .main_menu > ul > li a + ul,
	.header_nav .main_menu > ul > li a + div {
		width: 100%;
		position: initial;
		border-radius: 0;
	}

	.header_nav .main_menu > ul > li:nth-of-type(1) a + ul {
		width: 100%;
	}

	.header_nav .main_menu > ul > li:nth-of-type(4) > a::after {
		right: 50%;
		margin: 0 -50px 0 0;
	}

	.header_nav .main_menu > ul > li a + div ul {
		width: 100%;
	}

	.header_nav .main_menu > ul > li a + div ul + div {
		display: none;
	}

	.header_nav .main_menu > div.sp_btn.on + ul {
		height: 76vh;
		overflow-y: scroll;
		opacity: 1;
		padding: 0 0 50px;
	}

	.header_nav .main_menu > ul > li {
		width: 100%;
		border-bottom: 1px solid #f6f6f6;
	}

	.header_nav .main_menu > div:nth-of-type(1) img {
		max-width: 100px;
	}

	.header_nav .main_menu > a:nth-of-type(2):before {
		margin: 0 0 0 -20px;
	}

	.header_nav .sp_btn {
		width: 30px;
		height: 30px;
		display: flex;
		flex-flow: column;
		align-items: center;
		justify-content: center;
		gap: 5px 0;
		position: absolute;
		right: 10px;
	}

	.header_nav .sp_btn > div {
		width: 30px;
		height: 3px;
		background: #797979;
		transition: .3s;
	}

	.header_nav .sp_btn.on > div:nth-of-type(1) {
		position: absolute;
		transform: rotate(45deg);
	}

	.header_nav .sp_btn.on > div:nth-of-type(2) {
		opacity: 0;
	}

	.header_nav .sp_btn.on > div:nth-of-type(3) {
		position: absolute;
		transform: rotate(-45deg);
	}

	.header_nav .main_menu > div:nth-of-type(3) {
		gap: 10px;
		right: 60px;
	}

	.header_nav .main_menu > div:nth-of-type(3) a:nth-of-type(1) {
		font-size: 1.2rem;
		line-height: 1.2;
		padding: 5px;
	}

	.header_nav .main_menu > div:nth-of-type(3) a:nth-of-type(2) {
		display: flex;
		align-items: center;
		font-size: 1.2rem;
		line-height: 1.2;
		padding: 5px 5px 5px 25px;
	}

	.header_nav .main_menu > div:nth-of-type(3) a:nth-of-type(2)::before {
		margin: 0 0 0 -20px;
	}

	/*--- ヘッダーメニュー ここまで---*/

	/*-----hero-----*/

	.hero_box {
		height: auto;
	}

	.hero_box > div {
		justify-items: center;
		padding: 30px 20px;
	}

	.hero_box > div > h1 {
		font-size: 1.8rem;
	}

	.hero_box > div > div:nth-of-type(1) {
		height: auto;
		flex-flow: column;
		justify-content: center;
		margin: 0 auto;

	}

	.hero_box > div > div:nth-of-type(1) p::before {
		transform: rotate(0deg);
		bottom: 0;
		right: 0;
		left: -25px;
	}

	.hero_box > div > div:nth-of-type(1) p::after {
		transform: rotate(0deg);
		bottom: 0;
		right: -25px;
	}

	.hero_box > div > div:nth-of-type(2) {
		grid-row: 4/5;
		flex-wrap: wrap;
	}

	.hero_box > div > div:nth-of-type(2) > a {
		gap: 20px 10px;
	}

	.hero_box > div > div:nth-of-type(3) {
		grid-column: 1/2;
		grid-row: 3/4;
		align-items: center;
	}

	.hero_box > div > div:nth-of-type(3) img {
		max-width: 300px;
	}

	/*-----heroここまで-----*/

	#mainhero .heroimg {
		max-width: 428px;
	}

	.heroimg_box {
		padding: 90px 20px 10px 20px
	}

	#mainhero .col-6 {
		width: 85%;
		text-align: center;
		margin: 0 auto
	}

	#mainhero h1 {
		text-align: center
	}

	.box_hero_logo {
		max-width: 400px;
		margin: 20px auto 0 auto
	}

	.sudeni_box > div {
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;
	}

	.sudeni_box > div > div:nth-of-type(7) p br:nth-of-type(1) {
		display: none;
	}

	.kihonkinou_box > div {
		max-width: 600px;
		grid-template-columns: repeat(2, 1fr);
		margin: 0 auto 30px;
	}

	#stera:checked ~ #stera_content,
	#paycas_tance:checked ~ #paycas_tance_content {
		grid-template-columns: repeat(3, 1fr);
	}

	section.avairable {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex
	}

	.table {
		margin: auto;
		width: 94%;
		font-size: 12px
	}

	.table table th {
		padding: 20px 5px 5px
	}

	.th01 {
		font-size: 14px;
		white-space: nowrap;
		text-align: center;
		margin: 0 auto;
		padding: 0 0 0 10px
	}

	td:nth-child(1) {
		width: 40%
	}

	td:nth-child(2) {
		width: 60%
	}

	td:nth-child(3),
	td:nth-child(4),
	td:nth-child(5) {
		width: auto
	}

	.price_container {
		width: 100%
	}

	.topics_wrap a h3 {
		font-size: 15px
	}

	.btn.type1 {
		max-width: 400px;
		margin: 0 auto
	}

	.pconly_1000 {
		display: none
	}

	.sponly_1000 {
		display: inline
	}

	.os {
		-webkit-transform: scale(0.8, 0.8);
		transform: scale(0.6);
		bottom: -50px !important;
		left: -2% !important
	}

	.mb-40-sp {
		margin-bottom: 40px !important
	}

	.busicom_logo a {
		right: 200px;
		top: 19px;
		width: 80px
	}

	.mainlink a {
		padding: 15px 25px 20px 8px !important
	}

	.mainlink a img {
		width: 100px
	}

	.buttons {
		top: 10px;
		right: 50px
	}

	.buttons li a {
		padding: 11px 10px 11px 30px;
		font-weight: 300;
		font-size: 12px
	}

	.login {
		margin-right: 5px;
		position: relative
	}

	.login::before {
		font-family: "Font Awesome 5 Free";
		font-size: 10px;
		top: 37%;
		left: 6%
	}

	.register {
		margin-right: 10px;
		position: relative
	}

	.arrow2::after {
		display: none
	}

	.menu2 {
		display: none
	}

	.menu2 li a.arrow2 {
		padding: 20px 25px
	}

	.mobile-menu {
		display: block;
		position: relative;
		padding: 30px
	}

	.mobile-menu:hover::after {
		color: #0a5f75
	}

	.mobile-menu2 {
		display: block;
		position: relative;
		padding: 30px
	}

	nav {
		margin: 0;
		background: none
	}

	.menu2 li {
		display: block;
		margin: 0
	}

	.sub-menu {
		display: none !important
	}

	.menu2 li a {
		background: #fff;
		color: #797979;
		border-top: 1px solid #e0e0e0;
		border-left: 3px solid #fff
	}

	.menu2 li a:hover {
		background: #f0f0f0;
		color: #797979;
		border-left: 3px solid #0a5f75
	}

	.menu li:hover > a {
		background: #f0f0f0;
		color: #797979;
		border-left: 3px solid #0a5f75
	}

	/*level 2 and 3 - make same width as all items*/
	.menu2 ul {
		display: block;
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}

	.menu2 ul ul {
		left: 0;
	}

	.realdepos_list {
		margin: 0px 0px;
		width: calc(95%/4)
	}

	.realdepos_list img {
		width: 50%;
		margin-bottom: 20px;
	}

	.pconly2 {
		display: none !important
	}

	.sponly2 {
		display: block;
		margin: 0 auto;
		text-align: center;
	}

	#nav {
		background: #dbe5e5 !important
	}

	#menuresp li:first-child a {
		height: inherit !important;

	}

	a.hover_sp .arrow2 {
		border-top: 1px solid #4CBFC6;
		border-left: 1px solid #4CBFC6
	}

	#menuresp li.sousmenu ul li:first-child a.hover_sp {
		background: #f0f0f0;
		color: inherit;
		border-left: 3px solid #0a5f75;
		color: #4CBFC6 !important
	}

	#menuresp li a.hover_sp {
		color: #4CBFC6 !important;
		background: rgba(240, 240, 240, 0.26) !important;
		color: #797979;
		border-left: 3px solid #0a5f75
	}

	.buttons li {
		display: inline-block;
		margin-top: 3px
	}

	/*----- メールフォーム -----*/

	.form_box {
		padding: 20px 20px 40px;
	}

	.form_box table tr {
		display: flex;
		flex-flow: column;
	}

	.form_box table tr th {
		width: 100%;
		padding: 20px 0 0;
		
		
	}

	.form_box input.short {
		max-width: 100%;
	}
	.form_box table tr th {
		padding-left: 0px;
		text-indent: 0em;
	}
	.form_box table tr th span.blank {
		width: 0px;
		display: contents;
	}
	/*----- メールフォームここまで -----*/
}


@media screen and (max-width: 1024px) {

	.btm_btn03 {
		padding: 10px;
		margin-top: 10px;
	}

	.trial_app .btm_btn03,.trial_app .btm_btn03r{
		padding: 1.5rem 0;
		font-size: 15px;
		margin-top: 0px;
		min-width: 180px;}

}

@media screen and (max-width:767px) {

	/*----- キャンペーンバナー -----*/

	.bnr_cam {
		bottom: 65px;
	}

	/*----- キャンペーンバナーここまで -----*/


	/*----- 固定ボタン -----*/

	.fixed_btn_hojyokin2,
	.fixed_btn_mitumori2,
	.fixed_btn_otoiawase {
		width: 50%;
		height: 50px;
		justify-content: center;
		writing-mode: initial;
		border-radius: 0;
		top: auto;
		bottom: 0;
		right: auto;
		padding: 0;
	}

	.fixed_btn_otoiawase {
		left: 0;
	}

	.fixed_btn_hojyokin2,
	.fixed_btn_mitumori2 {
		right: 0;
	}

	.fixed_btn_hojyokin2:hover,
	.fixed_btn_mitumori2:hover,
	.fixed_btn_otoiawase:hover {
		padding: 0;
	}

	.fixed_btn_hojyokin2 span {
		margin: 0 -3px 0 0;
	}

	/*----- 固定ボタン ここまで -----*/

	.nav-wrap2 {
		height: 82px;
	}

	.btn.type1 {
		font-size: 1.5rem;
		width: 70%
	}

	.btn.type2 {
		font-size: 15px;
		width: 90%
	}

	#menu {
		overflow: hidden;
		width: 100%;
		max-width: 1010px;
		margin: 0 auto;
		/* display:flex; */
		/* justify-content:space-between; */
		/* float:left; */
		padding: 0px 0px 30px 0
	}

	#mainhero p {
		text-shadow: 1px 1px 10px #fff;
		margin-left: 0px;
		text-align: center;
		margin-bottom: 10px;
		padding: 0 5px
	}

	.soon::after {
		top: 52px;
		left: 18px
	}

	.icon_new {
		position: absolute;
		font-weight: 550;
		font-size: 16px;
		letter-spacing: 1px;
		top: 3px;
		left: 0px;
		color: #096a83;
		background: #effd43;
		padding: 8px 20px
	}

	.integration {
		padding-top: 20px
	}

	.integration ul li {
		width: calc(90%/2)
	}

	.integration p {
		margin-top: 5px;
		color: #0A5F75;
		font-weight: 500
	}

	.campaign {
		font-size: 1.6rem
	}

	.btn.type1 {
		-webkit-box-shadow: 0 10px 10px -6px rgba(11, 11, 11, 0.35);
		box-shadow: 0 10px 10px -6px rgba(11, 11, 11, 0.35);
		margin: auto;
		width: 100%
	}

	h2 {
		font-size: 2.6rem;
		margin-bottom: 20px;
	}

	.title_line h2 {
		font-size: 2.6rem;
	}

	.realdepos_list p {
		font-size: 1.2rem
	}

	.kihonkinou_box > div {
		grid-template-columns: repeat(1, 1fr);
	}

	.rearegi_box {
		max-width: 500px;
	}

	.rearegi_box > div {
		flex-flow: column;
		padding: 30px 10px;
	}

	.rearegi_box > div > div:nth-of-type(2).btn_box {
		height: 300px;
		justify-content: space-between;
	}

	#topic_introduction h2 {
		line-height: 40px
	}

	#topics section {
		max-width: 100%
	}

	#topics h3 {
		font-size: 18px;
		text-align: center;
		font-weight: 800
	}

	.topics_wrap li {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		margin: auto;
		margin-top: 10px
	}

	.topics_wrap li a {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		padding: 5px 0px 5px 0px
	}

	.topics_wrap li p {
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex
	}

	.topics_wrap .topics_icon {
		width: 50px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		vertical-align: middle;
		-ms-flex-line-pack: center;
		align-content: center;
		height: 45px;
		opacity: 0.7;
		margin-left: 0px;
		width: 20%
	}

	.topics_wrap .topics_icon img {
		width: 100%;
		max-width: 55px;
		margin: 5px 0;
		vertical-align: middle;
		-ms-flex-line-pack: center;
		align-content: center
	}

	.topics_wrap a h3 {
		font-size: 19px
	}

	.topics_wrap .topics_text {
		width: 100%;
		position: relative;
		border-left: 1px dashed rgba(255, 255, 255, 0.48);
		padding-left: 0px
	}

	.arrow--bottom2::after {
		right: 10%
	}

	.arrow3 {
		position: relative;
		padding-right: 0px;
		color: #333;
		text-decoration: none
	}

	.unyou_box .unyou_text {
		width: 99%;
		margin-bottom: 15px;
		-ms-flex-wrap: wrap;
		flex-wrap: wrap
	}

	.unyou_box h4 {
		font-size: 16px;
		letter-spacing: -1px;
		padding: 0 8px
	}

	.unyou_box p {
		padding: 0 8px;
		letter-spacing: -1px;
		margin-bottom: 0px
	}

	.unyou_box img {
		width: 100%
	}

	.unyou_box .unyou_inner {
		width: calc(100%/2);
		margin-bottom: 10px
	}

	.iconWrap2 {
		padding: 0px 5px
	}

	.price_container {
		max-width: 500px;
		flex-flow: column;
	}

	.card {
		width: 100%;
		margin-top: 0px
	}

	.card ul {
		height: auto;
	}

	.card_box {
		min-height: auto;
	}

	.hero {
		padding-top: 30px;
		padding-bottom: 30px
	}

	#mainhero h1 {
		font-size: 2.3rem;
		line-height: 1.5
	}

	#mainhero ul.os li img.logo {
		height: 44px
	}

	.buttons2 {
		top: 2%
	}

	.buttons2 li {
		padding: 6px 0px;
		margin-top: 0px
	}

	.buttons2 li a {
		color: #0A5F75;
		padding: 5px 15px 5px 30px
	}

	.support_box {
		display: block;
		width: 100%;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center
	}

	.support_box img {
		width: 8%;
		margin-bottom: 20px
	}

	.support_box div {
		width: 100%
	}

	.login2 {
		border: 1px solid #0A5F75;
		margin-right: 15px;
		position: relative;
		color: #0A5F75
	}

	.login2::before {
		content: "";
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		font-size: 15px;
		position: absolute;
		top: 30%;
		left: 12%
	}

	.register2 {
		border: 1px solid #0A5F75;
		margin-right: 10px;
		position: relative;
		color: #0A5F75
	}

	.register2::before {
		content: "";
		font-family: "Font Awesome 5 Free";
		font-weight: 600;
		font-size: 15px;
		position: absolute;
		top: 30%;
		left: 12%
	}

	#menu li {
		width: calc(100% / 2);
		text-align: center;
		margin: 0 auto;
		position: relative;
		float: left
	}

	#menu li span {
		font-size: 13px
	}

	#menu li img {
		height: 40px;
		margin-bottom: 10px
	}

	.notice {
		color: #D64550;
		border: 5px double #D64550;
		font-weight: 800;
		font-size: 34px;
		line-height: 40px;
		padding: 10px 0;
	}

	.notice br {
		display: block
	}

	.notice span {
		margin-left: 10px;
		font-size: 25px
	}

	ul.os {
		margin-bottom: 30px;
		width: 100%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: center !important;
		-ms-flex-pack: center !important;
		justify-content: center !important
	}

	.os {
		left: -55px !important
	}

	ul.os li {
		margin-left: 20px
	}

	.free {
		line-height: 30px;
		font-weight: 400;
		font-size: 20px
	}

	.point p h2 {
		margin-bottom: 20px !important
	}

	.point h3 {
		font-size: 50px !important;
		color: #fff
	}

	.point h3 span {
		font-size: 18px !important
	}

	#terms {
		padding: 10px 12px
	}

	.logo img {
		max-width: 120px
	}

	.buttons3 {
		right: 0%
	}

	.buttons3 li {
		display: inline-block;
		padding: 0px 0px;
		width: 100%;
		height: 100%
	}

	.buttons3 li a {
		padding: 10px 10px 10px 35px;
		font-weight: 300;
		font-size: 12px
	}

	.login3 {
		margin-right: 10px
	}

	.register3 {
		margin-right: 5px
	}

	.nav-wrap2 li {
		font-size: 11px;
		min-height: 75px;
		padding: 40px 0 0px 0
	}

	.nav-wrap2 li img {
		left: 35%;
		top: 8%;
		width: 36px !important
	}

	.col-6m:first-child {
		margin-bottom: 20px
	}

	.payment_layout {
		width: 96%;
		margin: 0 auto;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between
	}

	.paymentbox {
		width: 32%;
		text-align: center
	}

	.paymentbox img {
		max-width: 80px;
		margin-bottom: 20px
	}

	.paymentbox:last-child img {
		max-width: 46px;
		margin-bottom: 20px
	}

	.paymentbox p {
		font-size: 10px;
		font-weight: 700;
		color: #fff;
		margin-bottom: 5px;
		text-align: center
	}

	table.kessai td ul li {
		display: inline-block;
		vertical-align: middle;
		padding-left: 0px;
		text-align: center
	}

	table.kessai td ul li:first-child {
		width: 20px;
		height: 20px;
		position: relative;
		margin-left: 10px;
		position: relative
	}

	table.kessai td ul li img {
		top: -30px;
		left: 20px;
		position: absolute;
		max-width: 30px
	}

	table.kessai_tbl_sp {
		width: 100%;
		border: 1px solid #ccc;
		background: #fff;
		margin: 0 0 20px 0;
	}

	table.kessai_tbl_sp td:first-child {
		background-color: #eee;
		font-size: 1.4rem;
		width: 40%;
		vertical-align: middle;
		padding: 0.4rem 0;
		border: 1px solid #ccc
	}

	table.kessai_tbl_sp td:last-child {
		background-color: #fff;
		font-size: 1.4rem;
		width: 60%;
		vertical-align: middle;
		padding: 0.4rem 0;
		border: 1px solid #ccc
	}

	table.kessai_tbl_sp td span {
		font-size: 1rem;
		padding: 1rem;
		display: block
	}

	table.kessai_tbl_sp td img {
		max-width: 200px;
		padding: 10px;
	}

	table.kessai_tbl_sp td img.logo_credit {
		max-width: 100px;
	}

	table.kessai_tbl_sp td img.logo_credit_tl {
		max-width: 140px;
	}

	.join_ttl {
		display: block;
		background-color: #D0701E;
		color: #fff;
		font-size: 2rem;
		font-weight: 700;
		padding: 0.8rem;
		text-align: center;
		margin: 2rem auto
	}

	.tbl_logo img {
		max-width: 170px;
		max-height: 120px;
		object-fit: contain;
	}

	.tbl_logo img.logo_product {
		max-width: 110px;
	}

	.rearegifunc {
		display: block;
		width: 100%
	}

	table.func_tbl {
		border-collapse: collapse;
		background: #fff;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		width: 100%
	}

	table.func_tbl tr {
		max-height: 60px !important;
		height: 0px !important
	}

	table.func_tbl td {
		width: 100%
	}

	table.func_tbl td img {
		max-width: 50px;
		padding: 0.2rem 0
	}

	.customer {
		padding: 20px 0
	}

	.customer_list .shop ul,
	.customer_list .customer ul {
		margin-left: 30px
	}

	.order_box p {
		margin-top: 30px;
		width: 90%;
		font-size: 14px
	}

	#mainhero .col-6 {
		width: 90%
	}

	.btnbox {
		width: 100%
	}

	.qrkessai_caution1,
	.qrkessai_caution2 {
		width: 100%
	}

	.mb-20-sp {
		margin-bottom: 20px !important
	}

	.mb-20-pc {
		margin-bottom: 0 !important
	}

	#mainhero ul.os {
		transform: scale(0.6)
	}

	img.herologo {
		max-width: 200px
	}

	.box_hero_logo {
		width: 100%
	}

	.box_hero_img {
		max-width: 110px
	}

	#topic_introduction h2 img {
		width: 200px
	}

	.oshirase_box,
	.ver_box {
		padding: 0;
	}

	.oshirase_box > div:first-of-type,
	.ver_box > div:first-of-type {
		width: 100%;
		padding: 10px 0;
	}

	.oshirase_box > div:nth-of-type(2),
	.ver_box > div:nth-of-type(2) {
		width: 100%;
		padding: 20px 10px
	}

	.oshirase_box > div:last-of-type,
	.ver_box > div:last-of-type {
		width: 100%;
		text-align: center;
		padding: 0 0 10px;
	}

	.ver_box > div:first-of-type {
		border: solid #ccc;
		border-width: 0 0 1px;
	}

	.flex2 {
		display: block;
	}

	.box_start div + img {
		max-width: 8px
	}

	.box_start_img {
		max-height: 30px
	}

	.box_start_img2 {
		max-width: 35px
	}

	.box_start div p {
		text-align: center;
		font-size: 1.1rem;
		line-height: 1.2
	}

	.box_start_btn {
		max-width: 80%
	}

	.box_renkei {
		flex-flow: column;
	}

	.slider_box img {
		width: 80px;
		height: 80px;
	}

	#stera:checked ~ #stera_content,
	#paycas_tance:checked ~ #paycas_tance_content {
		grid-template-columns: repeat(2, 1fr);
	}

	.youto_box {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}

	.youto_box div {
		padding: 10px 5px;
	}

	.youto_box h3 {
		font-size: 1.4rem;
	}

	.youto_box p {
		min-height: auto;
	}

	.cardbox {
		max-width: 300px;
		margin: 0 auto;
	}

	form#mail_form dl dt {
		width: auto;
		float: none;
		text-align: left;
		padding: 10px 0 5px;
		font-weight: bold;
		line-height: 22px;
	}

	.jyuuryou_box {
		flex-wrap: wrap;
	}

	.jyuuryou_box > div:nth-of-type(2) {
		min-width: 300px;
	}

	.getugaku_box > div p:nth-of-type(2),
	.getugaku_box > p {
		font-size: 2rem;
	}

	.mb-10-sp {
		margin-bottom: 1rem !important;
	}

	.mb-20-sp {
		margin-bottom: 2rem !important;
	}

	.mb-30-sp {
		margin-bottom: 3rem !important;
	}

	.ml-10-pconly {
		margin-left: 0
	}

	

	/* cta */
	.cta_box {
		gap: 10px;
	}


	/*----- メールフォーム -----*/

	.form_box .columns {
		flex-flow: column;
		font-size: 1.2rem;
	}

	/*----- メールフォームここまで -----*/

}

@media print {

	.slide-left,
	.slide-right {
		opacity: 1 !important;
		visibility: visible !important;
		position: relative !important;
		right: 0 !important
	}

	#nav {
		display: none;
	}

	body {
		margin-top: -90px;
	}
}
