@charset "UTF-8";
/*================================================
 *  common
 ================================================*/
@import "https://fonts.googleapis.com/earlyaccess/notosansjapanese.css";

/*----- キャンペーンバナー -----*/

.bnr_cam {
	bottom: 280px;
}

/*----- キャンペーンバナーここまで -----*/

body {
	overflow-x: hidden;
}

p {
	color: #474c57;
}

a:hover {
	color: #000;
}

.pagetop {
	bottom: 250px;
}

.full-width a {
	transition: 0.3s;
}

.full-width a:hover {
	opacity: 0.3;
}

h3 {
	line-height: 1.5;
}

.r {
	justify-content: space-between;
}

.rr {
	justify-content: space-between;
	align-items: center;
}

.rt {
	gap: 30px 0;
}

.fontkan {
	font-family: kan412typos-std, sans-serif;
}

.hoverlink_box {
	width: 140px;
	display: block;
	position: fixed;
	bottom: 60px;
	right: 5px;
	z-index: 6;
}

.donyu {
	margin-bottom: 10px;
	background: rgb(49 181 96);
	padding: 20px
}

.showroom {
	background: #d4823c
}

.sponly2 {
	display: none
}

#hero {
	height: 430px;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	background: url(../img/hero_bg.png) 50% 70% / cover no-repeat;
}

#hero > a {
	width: 100%;
	height: 60px;
	display: flex;
	align-items: center;
	padding: 0 30px;
}

#hero > div {
	max-width: 1400px;
	display: grid;
	grid-template-columns: 430px 1fr;
	gap: 10px 30px;
	padding: 0 30px;
	margin: 0 auto;
}

.hero_logo {
	max-width: 120px;
}

.marker {
	background: linear-gradient(transparent 60%, rgba(255, 248, 47, 0.36) 60%)
}

#hero h1 {
	font-size: 9rem;
	color: #225293;
	font-weight: 400;
	text-shadow: 3px 3px 3px #fff;
	padding: 0;
	margin: -60px 0 30px 0;
}

#hero h1 span {
	padding-left: 20px;
	font-size: 4.6rem;
}

#hero p {
	font-family: kan412typos-std, sans-serif;
	color: #225293;
	font-size: 1.8rem;
	margin: 0 0 20px;
}

#hero > div > div:nth-of-type(1) {
	display: flex;
	flex-flow: column;
	justify-content: center;
	padding: 0 0 30px;
}

#hero > div > div:nth-of-type(2) {
	display: flex;
	align-items: flex-end;
	position: relative;
	margin: 0 auto 0 0;
}

#hero > div > div:nth-of-type(2) img {
	width: 100%;
	max-height: 370px;
	vertical-align: bottom;
}

.hero_business {
	color: #fff;
	text-align: center
}

.hero_business ul {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
}

.hero_business li {
	font-size: 1.4rem;
	letter-spacing: 4px;
	font-weight: 400;
	transform: skewX(-10deg);
	padding: 20px 5px;
}

.hero_business li span {
	display: inline-block;
	transform: skewX(10deg)
}

.hero_business .clinic {
	background: rgba(10, 100, 206, 0.9)
}

.hero_business .food {
	background: rgba(195, 23, 32, 0.9)
}

.hero_business .apparel {
	background: rgba(49, 181, 96, 0.9)
}

.hero_business .sales {
	background: rgba(201, 77, 23, 0.9)
}

.line {
	position: relative;
	margin-bottom: 1em;
	text-align: center
}

.line:before {
	content: "";
	position: absolute;
	bottom: -25px;
	display: inline-block;
	width: 90px;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #f0f062;
	border-radius: 2px
}

.campaign_box {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 30px;
	background: #9cc5ff;
	padding: 30px;
}

.campaign_box > a {
	display: block;
}

.campaign_box > a img {
	width: 100%;
	max-width: 450px;
	filter: drop-shadow(2px 2px 3px rgba(0, 0, 0, 20%));
}

#nowonair {
	position: relative;
	padding: 30px 10px 60px;
	z-index: 2;
}

#nowonair h4 {
	font-size: 2.6rem;
	color: #0057bc;
	font-weight: 500;
	position: relative;
	margin: 0 0 10px;
}

#nowonair h4::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 18px;
	height: 18px;
	border-left: 1px solid #0057bc;
	border-bottom: 1px solid #0057bc;
	transform: rotate(-135deg);
	margin: -5px 0 0 0;
}

.playbutton {
	position: relative
}

.playbutton:before {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.53);
	margin: -25px 0 0 -25px;
}

.playbutton:after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	border-top: 10px solid transparent;
	border-left: 16px solid rgba(0, 0, 0, 0.55);
	border-bottom: 10px solid transparent;
	margin: -10px 0 0 -6px;
}

.player img {
	border: 2px solid #fff
}

.player img:hover {
	opacity: .6;
	transition: opacity .2s ease-out
}

@keyframes movearrow {
	0% {
		transform: rotate(-135deg) translate(0, 0)
	}

	20% {
		transform: rotate(-135deg) translate(-10px, 10px)
	}

	40% {
		transform: rotate(-135deg) translate(0, 0)
	}
}

#nowonair p {
	font-size: 14px;
	color: #fff;
	padding-top: 20px;
	margin-left: -15px
}

.dx_title {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.5;
}

.dx_title span {
	font-size: 1.4rem;
}

.dx_title span.indent {
	margin: 0 0 0 5rem;
}

.dx_title span.underline {
	font-size: 1.8rem;
	background: linear-gradient(transparent 50%, #c6df98 50%);
}

.h2_title {
	font-family: kan412typos-std, sans-serif;
	color: #225293;
	font-size: 3.4rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 30px;
}

.h2_title span {
	font-size: 2.6rem;
	font-weight: 600;
	padding: 0 0 0 1rem;
}

.h2_title_box {
	color: #225293;
	font-size: 2rem;
	font-weight: 700;
	border: 1px solid;
	padding: 10px;
	margin: 0 0 30px;
}

.h2_title_line {
	color: #225293;
	font-size: 1.6rem;
	font-weight: 700;
	border-bottom: 1px solid;
	padding: 0 0 10px;
	margin: 0 0 30px;
}

.h2_fontkan_sub {
	font-family: kan412typos-std, sans-serif;
	font-size: 2.2rem;
	margin: 0 0 30px;
}

.subtitle {
	font-family: kan412typos-std, sans-serif;
	color: #225293;
	font-size: 3.0rem;
	font-weight: 700;
	text-align: center;
	margin: 0 0 30px;
}

.subtitle span {
	font-size: 2.0rem;
	font-weight: 600;
	padding: 0 0 0 1rem;
}

.youtube_box {
	display: flex;
	justify-content: space-between;
}

.youtube_box > div {
	display: flex;
	align-items: center;
}

.youtube_box > div > div:first-of-type {
	width: 200px;
}

.youtube_box video {
	width: 100%;
	max-width: 200px;
}

.semiself_box {
	width: 100%;
	max-width: 750px;
	margin: 0 auto 30px;
}

.tsurisenki_box {
	margin: 0 0 30px;
}

.slider_box {
	margin: 0 0 30px;
}

.swiper-container {
	padding: 0 10px;
}

.swiper-slide {
	height: auto;
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	font-size: 1.6rem;
	text-align: center;
	background: #fff;
	border: 1px solid #e3e3e3;
	border-radius: 5px;
	padding: 10px;
}

.swiper-slide img {
	width: 130px;
	height: 80px;
	object-fit: contain;
}

.gyousyu_box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.gyousyu_box > div {
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	width: calc(95%/5);
	background: #fff;
	box-shadow: 3px 3px 3px rgb(190 190 190 / 40%);
	padding: 20px 10px;
}

.gyousyu_box h3 {
	color: #314a8e;
	font-size: 1.8rem;
	font-weight: 800;
	line-height: 1.5;
	text-align: center;
	margin: 0 0 10px;
}

.gyousyu_box p {
	font-size: 1.2rem;
	line-height: 1.5;
	margin: 0 0 10px;
}

.gyousyu_box > div > div:last-of-type p {
	text-align: center;
}

.gyousyu_box img {
	width: 100%;
	height: 100px;
	object-fit: cover;
	transition: .3s;
}

.gyousyu_box a p {
	color: #14a83b;
	text-decoration: underline;
	transition: .3s;
}

.gyousyu_box img:hover,
.gyousyu_box a p:hover {
	opacity: 0.3;
	cursor: pointer;
}

.change_box {
	width: 100%;
	max-width: 420px;
	padding: 0 10px;
}

.change_box .main_img {
	display: flex;
	justify-content: center;
	background: url(/product/tenpovisor/images/change_bg.png) center top no-repeat;
	background-size: contain;
}

.change_box .main_img img {
	width: 100%;
	max-width: 400px;
	padding: 19px 22px 0;
}

.change_box ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: 10px 0 0 0;
}

.change_box ul li {
	position: relative;
	width: 70px;
	cursor: pointer;
	border: 1px solid;
	padding: 2px;
	margin: 0 0 10px 0;
	transition: 0.3s;
}

.change_box ul li:hover {
	opacity: 0.3;
}

.change_box ul li img {
	width: 100%;
}

.naze_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.naze_box > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: calc(90%/3);
}

.naze_box > div > div {
	display: flex;
	align-items: center;
	height: 60px;
	margin: 0 0 20px;
}

.naze_box img {
	width: 100%;
}

.naze_box > div:first-of-type img {
	max-height: 45px;
}

.naze_box > div:nth-of-type(2) img {
	max-height: 60px;
}

.naze_box > div:last-of-type img {
	max-height: 45px;
}

.naze_box > div > p:first-of-type {
	margin: 0 0 20px;
}

.naze_box > div > p:first-of-type {
	color: #0057bc;
	font-family: kan412typos-std, sans-serif;
	font-size: 2rem;
	font-weight: 600;
	text-align: center;
}

.turisenki_box {
	margin: 0 0 30px;
}

.turisenki_box > div:first-of-type,
.tanmatu_box > div:first-of-type {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	margin: 0 0 30px;
}

.turisenki_box > div:first-of-type p:first-of-type,
.tanmatu_box > div:first-of-type p:first-of-type {
	width: 20%;
}

.turisenki_box > div:first-of-type p:last-of-type,
.tanmatu_box > div:first-of-type p:last-of-type {
	width: 77%;
}

.turisenki_box > div:last-of-type {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.turisenki_box > div:last-of-type > div {
	display: flex;
	flex-flow: column;
	align-items: center;
	width: calc(98%/3);
	border: 1px solid #e3e3e3;
	border-radius: 5px;
	background: #fff;
	padding: 10px 5px;
}

.turisenki_box > div:last-of-type > div img {
	width: 100%;
	max-width: 160px;
	height: 120px;
	object-fit: contain;
}

.turisenki_box > div:last-of-type > div:nth-of-type(2) img {
	max-width: 250px;

}

.turisenki_box > div:last-of-type > div:last-of-type img {
	max-width: 140px;
}

.riyu_title {
	color: #0057bc;
	font-family: kan412typos-std, sans-serif;
	font-size: 2rem;
	font-weight: 600;
	margin: 0 0 10px;
}

.riyu_inner {
	padding: 30px;
}

.riyu_mukihenkou {
	width: 100%;
	border: 1px solid #e3e3e3;
	padding: 5px;
}

.riyu_mukihenkou p {
	text-align: center;
	background: #edf1f7;
	padding: 10px;
	margin: 0 0 20px;
}

.riyu_img_teikyou {
	border: 1px solid #e3e3e3;
	padding: 5px;
}

.slick_box {
	position: relative;
	padding: 0 50px;
}

.slick_box .slick-slide img {
	height: 210px;
	object-fit: contain;
}

.taiou_icon {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 0 0 10px;
}

.taiou_icon > div {
	width: 80px;
	height: 80px;
	display: flex;
	flex-flow: column;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 2px solid #2b6fa0;
	border-radius: 40px;
	box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 30%);
	position: absolute;
	top: -20px;
	right: 10%;
}

.taiou_icon > div > img {
	width: 100%;
	max-width: 50px;
	position: absolute;
	top: -13px;
}

.taiou_icon > div > p {
	color: #2b6fa0;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	line-height: 0.8;
	margin: 25px 0 0;
}

.taiou_icon > div > p span {
	color: #111;
	font-size: 1rem;
	font-weight: normal;
}

.single-item {
	width: 100%;
	max-width: 350px;
	margin: 0 auto;
}

.tokuchou_box {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	grid-gap: 30px 40px;
}

.tokuchou_box > div {
	display: flex;
	align-items: center;
}

.tokuchou_box > div > div {
	margin: 0 0 0 30px;
}

.tokuchou_box h3 {
	font-size: 1.6rem;
	line-height: 1.5;
	margin: 0 0 10px;
}

.tokuchou_box img {
	width: 100%;
	max-width: 80px;
	max-height: 60px;
	object-fit: contain;
}

.set_box {
	display: flex;
	flex-flow: column;
	width: 100%;
	margin: 0 auto;
}

.set_box p {
	text-align: center;
	margin: 0 0 10px;
}

.set_box > ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 10px;
	margin: 0 0 10px;
}

.set_box ul li {
	text-align: center;
	background: #f0f0f0;
	padding: 10px;
}

.posregi_box {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	margin: 0 0 60px;
}

.posregi_box > div {
	width: calc(97%/3);
}

.posregi_box > div {
	display: flex;
	flex-flow: column;
	background: #fff;
	border: 1px solid #c7d0d2;
}

.posregi_box > div > div:first-of-type {
	background: #eef5f7;
	border-bottom: 1px solid #c7d0d2;
	padding: 10px;
}

.posregi_box > div > div:last-of-type {
	display: flex;
	flex-flow: column;
	align-items: center;
	padding: 10px;
}

.posregi_box > div > div:last-of-type div {
	display: flex;
	flex-flow: column;
	justify-content: center;
	align-items: center;
	height: 70px;
}

.posregi_box ul li {
	list-style: disc;
	line-height: 25px;
	margin: 0 0 0 2rem;
}

.posregi_box ul + p {
	width: 100%;
	font-size: 1rem;
	text-align: right;
}

.posregi_box p span {
	font-size: 2.4rem;
}

.posregi_box img {
	width: 100%;
	max-height: 25px;
}

.renkei_box {
	width: 100%;
}

.renkei_box tr:nth-of-type(even) {
	background: #fff;
	border: solid #fff;
	border-width: 1px 0;
}

.renkei_box tr:nth-of-type(odd) {
	background: #edf1f7;
}

.renkei_box th {
	border-collapse: collapse;
	border: none;
	background: #4472c4;
}

.renkei_box th p {
	width: 40px;
	height: 120px;
	color: #fff;
	writing-mode: vertical-rl;
	padding: 5px;
}

.renkei_box td {
	border-collapse: collapse;
	border: none;
	padding: 10px;
}

.renkei_box td:nth-of-type(2) {
	text-align: left;
}

.renkei_box td:nth-of-type(3) > div {
	display: flex;
	flex-flow: column;
	align-items: flex-end;
	margin: 0 20px 0;
}

.renkei_box td:nth-of-type(3) > div > div {
	width: fit-content;
}

.renkei_box tr:nth-of-type(1) td:nth-of-type(3) p:first-of-type,
.renkei_box tr:nth-of-type(2) td:nth-of-type(3) p:first-of-type {
	text-align: left;
}

.renkei_box tr:nth-of-type(1) td:nth-of-type(3) p:last-of-type span,
.renkei_box tr:nth-of-type(3) td:nth-of-type(3) p:first-of-type span {
	margin: 0 1em 0 0;
}

.renkei_box td:last-of-type {
	width: 40%;
}

.renkei_box ul li {
	list-style: disc;
	line-height: 25px;
	margin: 0 0 0 2rem;
}

.renkei_box ul li span {
	font-size: 1rem;
}

.renkei_box + p {
	font-size: 1rem;
	text-align: right;
}

.renkei_box td:nth-of-type(3) p {
	font-size: 1.2rem;
}

.renkei_box p span {
	font-size: 2.4rem;
}

.renkei_box img {
	width: 100%;
	object-fit: contain;
}

.renkei_box tr:first-of-type img {
	max-height: 100%;
	max-width: 130px;
}

.renkei_box tr:nth-of-type(2) img {
	max-height: 100%;
	max-width: 120px;
}

.renkei_box tr:last-of-type img {
	max-width: 100px;
	max-height: 100%;
}

.fluid_box {
	background-color: #edf1f7;
	padding: 30px;
}

.bg_blue {
	background: #edf1f7;
}

.w_500 {
	max-width: 500px;
}

.w_400 {
	max-width: 400px;
}

.w_300 {
	max-width: 300px;
}

.w_250 {
	max-width: 250px;
}

.text_small {
	font-size: 1.2rem;
}

@media screen and (max-width:767px) and (min-width:320px) {
	.player {
		padding-bottom: 30px !important
	}
}

#semiself1 {
	margin-top: -20px;
	background-size: auto auto;
	background-color: #fff;
	background-image: repeating-linear-gradient(126deg, transparent, transparent 4px, rgba(101, 202, 255, 0.29) 4px, rgba(201, 240, 232, 0.23) 8px);
	position: relative;
	z-index: 1
}

.semiself1-box {
	position: relative;
	background: #fff;
	border: 1px solid #d9d9d9;
	box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.14);
	z-index: 5
}

#semiself1 h3 {
	padding-top: 15px;
	font-size: 4rem;
	font-weight: 800;
	text-align: center;
	color: #225293
}

.caption1 {
	text-align: center;
	font-size: 1.8rem;
	font-weight: 500;
	padding-bottom: 0
}

.semiself1_inneer {
	margin-bottom: 0;
	margin-top: 10px;
	padding: 0 30px
}

.semiself1_inneer p {
	line-height: 30px;
	font-size: 1.5rem;
	text-align: left
}

#semiself1 .semiself_point div {
	padding: 0 20px
}



#semiself1 .semiself_point h4 {
	color: #0057bc;
	font-size: 24px;
	line-height: 28px
}

#semiself1 .semiself_point p {
	text-align: center;
	padding: 0 5px;
	margin-top: 30px;
	line-height: 30px
}

#semiself1 ul {
	width: 80%;
	margin: auto
}

#semiself1 li {
	background: #345faf;
	text-align: center;
	font-weight: 500;
	font-size: 16px;
	color: #fff;
	margin-top: 30px;
	padding: 15px
}

#bcpos {
	margin-top: -40px
}

.balloon {
	position: relative;
	padding: 1px;
	width: 80px;
	height: 70px;
	line-height: 67px;
	border-radius: 50%;
	text-align: center;
	color: #fff;
	letter-spacing: .1em;
	font-size: 16px;
	font-weight: 500;
	top: 20px;
	left: 10%;
	background-color: #1C7437
}

.balloon::before {
	content: "";
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	right: 2px;
	bottom: 2px;
	border-left: 20px solid #1C7437;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	transform: rotate(45deg);
	z-index: -1
}

.plan {
	position: relative
}

.it_hojokin {
	position: absolute;
	top: 40px;
	display: flex;
	right: -60px;
	width: 20vw !important;
	max-width: 170px;
	min-width: 130px !important
}

.btn {
	border: 1px solid #00863C;
	padding: 1.6rem;
	background-color: #fff;
	width: 84%;
	margin: 0 auto;
	color: #00863C
}

.btn a {
	color: #00863C
}

.btm_btn01 {
	border: 1px solid #00863C;
	padding: 2rem;
	background-color: #fff;
	width: 100%;
	margin: 0 auto;
	text-align: center;
	color: #00863C
}

.btm_btn01 a {
	color: #00863C;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 2
}

@media screen and (max-width:767px) and (min-width:320px) {
	#price h3 {
		margin-top: 10px !important
	}

	#semiself1 .semiself_point {
		margin-top: 0;
		transform: none;
		-moz-transform: none;
		-webkit-transform: none
	}

	#semiself1 .semiself_point div {
		padding: 0 40px
	}

	#semiself1 .semiself_point h5 {
		color: #0057bc;
		position: relative;
		font-size: 18px;
		font-weight: 600;
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		margin-bottom: 14px;
		margin-left: 0
	}

	#semiself1 .semiself_point img {
		transform: none;
		-moz-transform: none;
		-webkit-transform: none
	}

	#semiself1 .semiself_point h5::before {
		content: "";
		background-color: #fffa7c;
		display: block;
		position: absolute;
		left: 0;
		height: 70px;
		width: 70px;
		border-radius: 50%;
		top: 15px;
		z-index: -1
	}

	#semiself1 .semiself_point h4 {
		color: #0057bc;
		font-size: 23px;
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		margin-left: 0;
		margin-bottom: 20px;
		line-height: 30px
	}

	#semiself1 .semiself_point p {
		text-align: center;
		transform: none;
		-moz-transform: none;
		-webkit-transform: none;
		padding: 0;
		margin-top: 0;
		line-height: 30px
	}

	#semiself1 li:last-child {
		margin-bottom: 20px
	}
}

#business {
	background-image: linear-gradient(120deg, #8383b5 0%, #448fa5 100%);
	padding-top: 40px;
	padding-bottom: 100px
}

.business_text2 {
	position: relative;
	color: #fff;
	text-align: center
}

.business_text2::before {
	content: "1店舗・小規模店舗でも大丈夫！";
	color: #0f3467;
	font-weight: 600;
	position: absolute;
	top: -40%;
	left: 0;
	background: #c6e1e3;
	padding: 15px
}

.business_text2::after {
	content: "";
	position: absolute;
	top: 9%;
	left: 20%;
	margin-top: -13px;
	border: 7px solid transparent;
	border-left: 47px solid #c6e1e3;
	z-index: -1;
	transform: rotate(20deg)
}

.business_text2 p {
	font-size: 18px;
	margin-bottom: 20px;
	font-weight: 400;
	color: #fff
}

.business_text2 h3 {
	padding-bottom: 0
}

.business_box {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around
}

.business_box .business_inner {
	width: calc(95%/3);
	margin-bottom: 10px;
	display: flex;
	flex-direction: column;
	background: rgba(255, 255, 255, 0.9);
	box-shadow: 3px 3px 3px rgba(190, 190, 190, 0.4)
}

.business_box img {
	width: 38%
}

.business_box .business_text {
	width: 95%;
	margin: auto;
	height: 100%;
	padding: 0 0 10px;
	border-radius: 5px;
	display: flex;
	flex-direction: column
}

.business_box h4 {
	font-size: 20px;
	text-align: left;
	color: #0A5F75;
	font-weight: 600;
	padding: 0 10px;
	margin-bottom: 10px
}

.business_box p {
	text-align: left;
	padding: 0 10px;
	letter-spacing: 0
}

.business_wrap {
	display: flex;
	height: 100%;
	flex-wrap: wrap
}

.col-4 > .business_box {
	background: rgba(245, 245, 245, 0.45);
	box-shadow: 3px 3px 3px rgba(190, 190, 190, 0.4);
	margin-top: 10px;
	display: flex;
	flex-direction: column
}

#business img {
	max-width: 290px;
	margin: auto;
	display: flex;
	padding: 15px 6px 6px
}

.business_title {
	display: flex
}

#business h4 {
	margin: 0 auto;
	font-size: 22px;
	color: #314a8e;
	font-weight: 800;
	padding-bottom: 0;
	line-height: 26px;
	text-align: center;
	display: flex;
	flex-direction: column
}

#business p {
	display: flex;
	flex-direction: column;
	font-size: 15px;
	height: 100%;
	line-height: 23px
}

#business .btm_btn01 {
	width: 70%;
	padding: 10px;
	margin-top: 0;
	margin-bottom: 10px;
	color: #211f67 !important;
	border: 1px solid #211f67 !important
}

#business .btm_btn01:hover {
	background: #a6cfff
}

.businessbox p {
	color: #fff;
	text-align: center;
	margin-top: 20px
}

.business_others {
	background: rgba(255, 255, 255, 0.96);
	border-radius: 5px;
	margin-top: 20px
}

.business_others h4 {
	text-align: center;
	padding: 20px 0 5px
}

.business_others ul {
	padding: 10px
}

.business_others ul li {
	display: contents;
	line-height: 25px
}

.business_others ul li::after {
	content: "/";
	margin: 0 3px
}

#cashless {
	background-size: cover
}

#cashless h3 {
	margin: 0 0 30px;
	color: #0d40a0
}

#cashless p {
	font-size: 15px;
	line-height: 30px;
	text-align: center
}

.cashless_icon {
	display: flex
}

.iconBox2 img {
	width: 50px
}

.cashlessbox {
	background-color: rgba(255, 255, 255, 0.7);
	display: flex
}

.cashlessbox div {
	width: calc(100%/3)
}

.cashlessbox div img {
	width: 100%
}

.parallax {
	padding: 30px 0;
	background-position: center top;
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover
}

.parallax.bg-01 {
	background-image: url(/lp/semiself/img/cashbackground2.png)
}

.cashless_box {
	margin: auto
}

#movie {
	background: #8bbed9;
	padding-top: 10px;
	padding-bottom: 1px
}

#movie h3 {
	color: #fff;
	font-weight: 400;
	margin-bottom: 20px
}

section.movie,
section.movie02 {
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: 560px;
	height: auto;
	margin: 40px auto;
	position: relative
}

.youtube {
	position: relative;
	width: 100%;
	line-height: 0;
}

.youtube iframe {
	position: absolute;
	top: 0;
	right: 0;
	width: 100% !important;
	height: 100% !important
}

#price h2 {
	color: #282834;
	margin-bottom: 30px
}

#price h3 {
	color: #225293
}

div.subtext {
	font-size: 26px;
	color: #225293;
	margin-top: -10px;
	font-weight: 600
}

.litefree {
	padding: 5px;
	border: 1px solid #d4d4d4;
	margin-top: 40px
}

#price p {
	line-height: 27px
}

.cost {
	min-height: 32px;
	font-size: 3rem;
	color: #c00;
	font-weight: 600
}

.cost span {
	font-size: 15px
}

.cost_glory {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 40px;
}

.cost_glory > div {
	width: fit-content;
}

.cost_glory > div:nth-of-type(1) {
	display: flex;
	flex-flow: column;
	justify-content: center;
	position: relative;
}

.cost_glory > div:nth-of-type(1)::after {
	content: "";
	background: #474c57;
	width: 100%;
	height: 2px;
	position: absolute;
	bottom: 10px;
	left: 0;
}

.cost_glory > div > p {
	line-height: 1;
	text-align: left;
}

.cost_glory > div:nth-of-type(1) > p:nth-of-type(1) {
	font-size: 1.2rem;
}

.cost_glory > div:nth-of-type(1) > p:nth-of-type(2) {
	font-size: 2rem;
}

.cost_glory > div:nth-of-type(1) > p:nth-of-type(2) span:nth-of-type(1) {
	font-size: 1.6rem;
}

.cost_glory > div:nth-of-type(1) > p:nth-of-type(2) span:nth-of-type(2) {
	font-size: 1.2rem;
}

.cost_glory > div:nth-of-type(2) {
	display: flex;
	flex-flow: column;
	justify-content: center;
	position: relative;
}

.cost_glory > div:nth-of-type(2)::after {
	content: "";
	background: #474c57;
	width: 8px;
	height: 18px;
	clip-path: polygon(0 0, 0 100%, 100% 50%);
	position: absolute;
	left: -20px;
}

.cost_glory > div:nth-of-type(2) > p {
	font-size: 3rem;
	color: #c00;
	font-weight: 600;
}

.cost_glory > div:nth-of-type(2) > p span {
	font-size: 15px;
}

#set a {
	text-decoration: none
}

.bcposlf_info {
	border: 1px solid #ccc;
	border-radius: 5px;
	background-color: #fff;
	padding: 1rem;
	text-align: center;
	display: flex;
	justify-content: center
}

.bcposlf_info01 {
	align-self: center
}

.bcposlf_info02 {
	align-self: center;
	text-align: left;
	margin-left: 1.5rem
}

.bcposlf_info02 p {
	font-size: 1.2rem
}

.bcposlf_info02 span {
	font-size: 1rem;
	color: #666
}

.colorbox {
	text-align: center;
	margin-top: 10px;
	width: 100%
}

.colorwrap {
	display: flex;
	justify-content: space-around;
	border: solid 1px #c6c6c6;
	margin: 10px;
	padding: 5px;
	vertical-align: middle;
	background: #fff
}

.colorB {
	margin-right: 10px
}

.colorW {
	margin-top: 6px
}

.colorB::before {
	content: "●";
	font-size: 30px;
	margin-right: 10px
}

.colorW::before {
	content: "〇";
	font-size: 23px;
	margin-right: 10px
}

.cost_wrap h3 {
	color: #235293;
	margin: 0 0 10px;
}

#otherusage {
	background: #edf1f7;
	padding: 10px;
	font-size: 4px
}

#otherusage h4 {
	font-size: 25px;
	line-height: 35px;
	color: #235293
}

form#mail_form dl dd {
	width: 65%;
	float: right;
	border-top: 1px solid #ccc;
	padding: 5px 0 5px 5% !important
}

form#mail_form textarea {
	height: 100px !important
}

/*================================================
*  sect caution
================================================*/
#caution {
	background: #EDF0F3;
	padding: 10px
}

#caution h3 {
	font-size: 12px;
	color: #3b3e3e
}

#payment_campaign {
	background: #f2fcff;
	padding: 10px 0
}

#payment_campaign .caption {
	font-size: 26px;
	background: #fafcd9;
	padding: 1px 0 9px;
	margin: 0 auto;
	color: #225293;
	margin: 20px 0
}

#payment_campaign h3 {
	color: #225293;
	margin-bottom: 1em
}

.banner_box {
	display: flex;
	flex-flow: column;
	align-items: center;
}

.banner_box a {
	width: fit-content;
	display: block;
}

.banner_box a img {
	width: 100%;
}

.btn-02 a {
	display: block;
	width: 90%;
	margin: 3% auto 4%;
	padding: 1.5vh 2vw;
	font-size: 1em;
	color: #fff;
	font-size: 20px;
	background: #225293
}

.btn-02 a:hover {
	transition: .3s;
	color: #fff;
	background: rgba(34, 82, 147, 0.44);
	border: 2px solid #fff
}

.btn-02 i {
	padding-left: 1vw
}

.btn_blue {
	max-width: 250px;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background: #225293;
	border-radius: 20px;
	position: relative;
	margin: 0 0 0 auto;
}

.btn_blue:hover {
	color: #fff;
}

.window::after {
	content: "\f35d";
	font-family: Font Awesome\ 5 Free;
	font-weight: 600;
	margin: 0 0 0 5px;
}

#form {
	background: #c0d5ea;
	background-image: repeating-linear-gradient(126deg, transparent, transparent 4px, rgba(223, 244, 255, 0.29) 4px, rgba(255, 255, 255, 0.23) 8px);
	position: relative
}

#form h3 {
	padding-top: 0;
	text-align: center;
	color: #10466d
}

/*----- 外部読み込みページ -----*/

.jyunkanshiki_box {
	border: 1px solid #c7c8c7;
	border-radius: 5px;
	padding: 20px;
	margin: 40px 0 40px;
}

.jyunkanshiki_box > p {
	font-size: 1.8rem;
	font-weight: bold;
	margin: 0 0 20px;
}

.jyunkanshiki_box > div {
	gap: 30px 0;
}

.jyunkanshiki_box img {
	max-width: 300px;
}

/*----- 外部読み込みページ ここまで -----*/

/*メールフォーム*/

header {
	background: #fff;
	padding: 10px 30px;
}

header img {
	width: 100%;
	max-width: 120px;
}

.form_title h2 {
	width: fit-content;
	display: flex;
	align-items: baseline;
	color: #10466d;
	font-family: kan412typos-std, sans-serif;
	text-align: center;
	line-height: 1.5;
	position: relative;
	margin: 0 auto 50px;
}

.form_title h2:before {
	content: "";
	position: absolute;
	bottom: -25px;
	display: inline-block;
	width: 90px;
	height: 3px;
	left: 50%;
	transform: translateX(-50%);
	background-color: #f0f062;
	border-radius: 2px;
}

.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_box h4 {
	text-align: center;
	line-height: 1.5;
	margin: 0 0 10px;
}

.form_box h4 + div {
	color: #ff0000;
	text-align: center;
	margin: 0 0 30px;
}

.form_box table {
	margin: 0 0 30px;
}

.form_box table tr th,
.form_box table tr td {
	text-align: left;
	font-weight: normal;
	padding: 20px 0;
}

.form_box table tr th span {
	color: #fff;
	background: #d9534f;
	border-radius: 5px;
	padding: 5px;
	margin: 0 10px 0 0;
}

.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: #225293;
	border: none;
	border-radius: 20px;
	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: 10px 20px;
}

.form_box table.kakunin_table tr th,
.form_box table.kakunin_table tr td {
	border: 1px solid #ccc;
	padding: 20px;
}

.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) {
	#hero {
		height: auto;
	}

	#hero h1 {
		font-size: 6rem;
		margin: -30px 0 20px 0;
	}

	#hero h1 span {
		font-size: 3rem;
		padding-left: 10px;

	}

	#hero p {
		font-size: 1.6rem;
		margin: 0 0 10px;
	}

	#hero > div {
		grid-template-columns: 280px 1fr;
	}

	#hero > div > div:nth-of-type(2) img {
		max-height: 250px;
	}

	.hero_business li {
		font-size: 1.2rem;
		letter-spacing: 0;
		padding: 15px 0;
	}

	.campaign_box > a img {
		max-width: 300px;
	}

	.youtube_box {
		flex-flow: column;
		align-items: center;
	}

	.youtube_box > div:first-of-type {
		margin: 0 0 30px;
	}

	.turisenki_box > div:first-of-type p:first-of-type,
	.tanmatu_box > div:first-of-type p:first-of-type,
	.turisenki_box > div:first-of-type p:last-of-type,
	.tanmatu_box > div:first-of-type p:last-of-type {
		width: 100%;
	}

	.cost_glory {
		flex-flow: column;
	}

	.cost_glory > div:nth-of-type(2) {
		align-items: center;
	}

	.cost_glory > div:nth-of-type(2)::after {
		transform: rotate(90deg);
		left: auto;
		top: -30px;
	}

	.taiou_icon {
		margin: 0 0 90px;
	}

	.taiou_icon > div {
		top: 80px;
		right: auto;
	}

	/*メールフォーム*/

	.form_title h2 {
		font-size: 2.4rem;
		align-items: flex-end;
	}

	.form_box {
		padding: 20px 20px 40px;
	}

	.form_box table tr {
		display: flex;
		flex-flow: column;
	}

	.form_box table tr th {
		padding: 20px 0 0;
	}

	.form_box input.short {
		max-width: 100%;
	}

	/*メールフォームここまで*/
}

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

	/*----- キャンペーンバナー -----*/

	.bnr_cam {
		bottom: 65px;
	}

	/*----- キャンペーンバナーここまで -----*/

	.pagetop {
		bottom: 90px;
	}

	.foot {
		padding-bottom: 80px;
	}

	#hero > div {
		grid-template-columns: 1fr;
		padding: 0 20px;
	}

	#hero > a {
		padding: 0 20px;
	}

	#hero h1 {
		text-align: center;
		font-size: 6.5rem;
	}

	#hero p {
		text-align: center
	}

	#hero > div > div:nth-of-type(1) {
		padding: 0;
		margin: 0 auto;
	}

	#hero > div > div:nth-of-type(2) img {
		max-width: 350px;
	}

	#hero > div > div:nth-of-type(2) {
		display: flex;
		justify-content: center;
		margin: 0 auto;
	}

	#hero > div > div:nth-of-type(1) > div:nth-of-type(1) {
		text-align: center;
	}

	.hero_business ul {
		margin: 0 0 10px;
	}

	.video-section {
		position: relative;
		height: 56vh;
		overflow: hidden;
		min-height: 400px
	}

	#business {
		padding: 50px 0 0
	}

	#business p {
		padding-top: 10px
	}

	.business_others {
		padding: 5px;
		margin-bottom: 100px
	}

	#business img {
		width: 40%;
		border-radius: 50%;
		margin-top: 10px;
		padding: 10px
	}

	.business_box .business_text {
		width: 99%;
		margin-bottom: 15px
	}

	.business_box h4 {
		letter-spacing: -1px;
		padding-top: 10px;
		font-size: 16px !important
	}

	.business_box p {
		padding: 0 8px;
		letter-spacing: -1px;
		margin-bottom: 0
	}

	.business_box img {
		width: 100%
	}

	.business_box .business_inner {
		width: 80%;
		margin: 0 auto;
		margin-bottom: 10px
	}

	#bcpos {
		margin-top: 25px
	}

	.balloon {
		position: relative;
		padding: px;
		width: 80px;
		height: 70px;
		line-height: 67px;
		border-radius: 50%;
		text-align: center;
		color: #fff;
		letter-spacing: .1em;
		font-size: 16px;
		font-weight: 500;
		top: -20px;
		left: 10%;
		background-color: #1C7437
	}

	.plan {
		position: relative;
		margin-top: 20px !important
	}

	.it_hojokin {
		position: absolute;
		top: -40px;
		display: flex;
		right: 0;
		width: 20vw !important;
		max-width: 170px;
		min-width: 130px !important
	}

	.h2_title span {
		font-size: 2.4rem;
	}

	.h2_title_box,
	.h2_title_line {
		text-align: center;
	}

	div.subtext {
		font-size: 2rem !important
	}

	#otherusage h4 {
		font-size: 1.8rem !important;
		line-height: 35px;
		text-align: center
	}

	#nowonair {
		padding-top: 20px
	}

	#nowonair h4 {
		font-size: 20px
	}

	#nowonair p {
		font-size: 10px;
		color: #fff;
		padding-top: 10px;
		margin-left: -10px
	}

	.business_text::after {
		content: "";
		position: absolute;
		top: -5%;
		left: 30%;
		margin-top: -13px;
		border: 7px solid transparent;
		border-left: 30px solid #c6e1e3;
		z-index: 0;
		transform: rotate(50deg)
	}

	#nowonair p {
		margin-bottom: 30px
	}

	.dx_title span.indent {
		margin: 0;
	}

	.naze_box > div {
		width: 100%;
		margin: 0 0 30px;
	}

	.naze_box > div:last-of-type {
		margin: 0;
	}

	.turisenki_box > div:last-of-type > div {
		width: 100%;
		max-width: 400px;
		margin: 0 auto 30px;
	}

	.turisenki_box > div:last-of-type > div:last-of-type {
		margin: 0 auto;
	}

	.slick_box img {
		max-width: 250px;
		margin: 0 auto;
	}

	.gyousyu_box > div {
		width: 100%;
		max-width: 400px;
		margin: 0 auto 30px;
	}

	.gyousyu_box > div:last-of-type {
		margin: 0 auto;
	}

	.gyousyu_box > div > div:first-of-type {
		margin: 0 0 10px;
	}

	.gyousyu_box > div:last-of-type > div:first-of-type p:last-of-type {
		margin: 0;
	}

	.gyousyu_box p {
		font-size: 1.4rem;
	}

	.gyousyu_box img {
		display: block;
		width: 260px;
		height: 150px;
		margin: 0 auto;
	}

	.change_box {
		padding: 0;
		margin: 30px 0 0 0;
	}

	.change_box ul {
		justify-content: space-evenly;
	}

	.change_box ul li {
		width: 30%;
	}

	.posregi_box > div {
		width: 100%;
		max-width: 500px;
		margin: 0 auto 30px;
	}

	.posregi_box > div:last-of-type {
		margin: 0 auto;
	}

	.renkei_box tr {
		display: flex;
		flex-flow: column;
		max-width: 500px;
		background: #fff;
		margin: 0 auto 30px;
	}

	.renkei_box tr:nth-of-type(even) {
		border: none;
		border-width: 0;
	}

	.renkei_box tr:last-of-type {
		margin: 0 auto;
	}

	.renkei_box th {
		max-width: 100%;
		writing-mode: initial;
	}

	.renkei_box th p {
		width: 100%;
		height: auto;
		writing-mode: initial;
	}

	.renkei_box td:first-of-type {
		text-align: center;
	}

	.renkei_box td:nth-of-type(2) {
		text-align: center;
	}

	.renkei_box td:nth-of-type(3) > div {
		align-items: center;
		margin: 0;
	}

	.renkei_box td:last-of-type {
		width: 100%;
	}

	.renkei_box tr:nth-of-type(1) td:nth-of-type(3) p:last-of-type span,
	.renkei_box tr:nth-of-type(3) td:nth-of-type(3) p:first-of-type span {
		margin: 0;
	}

	.renkei_box ul {
		width: fit-content;
		margin: 0 auto;
	}

	.fluid_box,
	.riyu_inner {
		padding: 30px 10px;
	}

	.btn_blue {
		margin: 0 auto;
	}

	.mb-30-sp {
		margin-bottom: 3rem !important;
	}
}

@keyframes sdb {
	0% {
		transform: rotate(-45deg) translate(0, 0)
	}

	20% {
		transform: rotate(-45deg) translate(-10px, 10px)
	}

	40% {
		transform: rotate(-45deg) translate(0, 0)
	}
}