@charset "utf-8";
/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

ul,
ol {
    list-style: none;
}

html {
    font-size: 16px;
    /* font-feature-settings: "palt"; */
    min-height: 100vh;
}

body {
    line-height: 1.4;
    line-height: 1.6;
    font-family: serif;
    background: #fff;
    overflow-x: hidden;
    color: #000;
    font-family: 'Noto Sans JP', sans-serif;
    font-weight: normal;
    min-height: 100vh;
    position: relative;
}


@media screen and (min-width: 769px) {
    body {
        /* min-width: 1000px; */
    }
}

@media screen and (max-width: 1200px) {
    html {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px) {
    html {
        font-size: 16px;
        font-size: 1.5vw;
        /* font-size: 8px; */
    }
}
@media screen and (max-width: 640px) {
    html {
        font-size: 1.8vw;
    }
}

@media screen and (max-width: 500px) {
    html {
        font-size: 9px;
    }
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
    display: block;
}

nav ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

a {
    margin: 0;
    padding: 0;
    font-size: 100%;
    background: transparent;
    text-decoration: none;
    /* color: #fff; */
}
a.link {
    color: #2d4cc1;
    /* text-decoration: underline; */
}
a:focus {
    outline: none
}

a:hover img {
    /* opacity: .85 */
}

/* change colours to suit your needs */
ins {
    background-color: #ff9;
    color: #000;
    text-decoration: none;
}

/* change colours to suit your needs */
mark {
    background-color: #ff9;
    color: #000;
    font-style: italic;
    font-weight: bold;
}

del {
    text-decoration: line-through;
}

abbr[title],
dfn[title] {
    border-bottom: 1px dotted;
    cursor: help;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* change border colour to suit your needs */
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #cccccc;
    margin: 1em 0;
    padding: 0;
}

input:not([type="checkbox"],[type="radio"]),
select,
textarea {
    vertical-align: middle;
    -webkit-appearance: none;
    padding: 0;
    border: 1px solid #ccc;
    background-color: #fff;
    min-height: 3.75rem;
    font-size: 1.125rem;
    padding: 1rem 1rem;
    outline: none;
    border-radius: 3px;
    font-family: 'Noto Sans JP';
    width: 100%;
}
button {
    font-family: 'Noto Sans JP';
}
.errWrap input:not([type="checkbox"],[type="radio"]),
.errWrap select,
.errWrap textarea {
	border-color: #e01b1b;
}
textarea {
	font-size: 1rem
}
select {
    background: #fff url(../images/common/select_icon.png) no-repeat center right 0.5em;
    background-size: auto 0.5em;
    padding-right: 2em!important;
}
select:invalid { color: #bbb; }
select option { color: #000; }
select option:first-child { color: #bbb; }
input:not([type="checkbox"],[type="radio"]):focus,
select:focus,
textarea:focus {
	background-color: #feffe5;
	border-color: #000
}
::placeholder,
option:disabled {
    color: #aaa;
}
* {
    box-sizing: border-box;
}
sup {
    vertical-align: super;
    font-size: 70%;
}
img {
    max-width: 100%;
    vertical-align: bottom;
    transition: .25s opacity;
    height: auto;
}

.clearfix {
    zoom: 1;
}

.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

a:hover img {
    /* opacity: .8; */
}
@media screen and (max-width: 768px) {
		
	input:not([type="checkbox"],[type="radio"]),
	select,
	textarea {
		font-size: 1.75rem;
		padding: 0.875rem 1rem;
	}
}

/* STYLE */
/* 共通 */
body {
	background: #f8f8f8;
	/* color: #fff; */
	position: relative;
}
#wrap {
	/* min-height: 100vh; */
	/* min-height: 100%; */
	/* position: relative; */
}
section .inner {
    max-width: 1240px;
    margin: 0px auto 0;
    padding: 1.5rem 20px;
    position: relative;
    z-index: 1;
}
@media screen and (max-width: 768px) {
	section .inner {
		padding: 1.5rem 4.5%;
	}
	#wrap {
		/* overflow-x: hidden; */
		/* padding-top: 5%; */
		min-height: calc(100vh - 10rem);
	}
}
/* ヘッダー */
#headArea {
	padding: 0.5rem 1.875rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
#headArea .headText {
	display: flex;
	justify-content: flex-end;
	font-weight: bold;
	align-items: center;
	width: 100%;
	font-size: 1rem;
	max-width: 1380px;
	margin: auto;
}
#headArea .headText .text {
	font-size: 0.875rem;
	font-size: 87.5%;
	font-feature-settings: "palt";
}
#headArea .headText .text.blue {
	color: #2d4cc1
}
#headArea .headText .text.blue .large {
	font-size: 115%;
}
#headArea .headText .tel {
	font-size: 1.5rem;
	font-family: Arial;
	display: flex;
	align-items: center;
	/* line-height: 1; */
	margin: 0 0.625rem;
	font-size: 150%;
}
#headArea .headText .tel .icon {
	width: 1.1875rem;
	/* line-height: 1; */
	margin-right: 0.25rem;
	/* transform: rotate(15deg); */
}
#headArea .headText .tel .icon img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	line-height: 1;
	display: block;
}
#headArea .headText .time {
	font-size: 0.8125rem;
	font-size: 81.25%;
}
#header {
    position: sticky;
    top: 10px;
    left: 1.875rem;
    width: calc(100% - 3.75rem);
    background: #fff;
    display: flex;
    align-items: center;
    height: 4.375rem;
    border-radius: 10px;
    box-shadow: 0 0 7px 7px rgba(0,0,0,0.05);
    padding: 0 1rem;
    justify-content: space-between;
    margin-bottom: 1rem;
    z-index: 102;
    max-width: 1380px;
    margin: 0 auto 1rem;
}
#logoArea {
	display: flex;
	align-items: center;
	width: 50%;
	max-width: 660px;
	/* width: 60%; */
}
#roadheatingSystem {max-width: 399px;}
#ryosysLogo {
	width: 228px;
	padding-left: 1rem;
	margin-left: 1rem;
	border-left: 1px solid #959595;
}
#logoArea a {
	display: flex;
	padding: 5px 0;
	transition: .25s opacity;
}
#logoArea a:hover {
	opacity: 0.7
}
#headerMenuArea {
	display: flex;
	align-items: center;
	height: 100%;
}
#headerMenu {
	display: flex;
	height: 100%;
	align-items: center;
	margin-right: 1rem;
	font-size: 0.9375rem;
	line-height: 1.2;
}
#headerMenu li {
	height: 100%;
	padding: 0 0.25rem;
}
#headerMenu a {
	height: 100%;
	color: #333;
	/* font-size: 0.9375rem; */
	font-weight: bold;
	transition: .25s color;
	display: flex;
	align-items: center;
	position: relative;
	padding: 0 0.75em;
	text-align: center;
}
#headerMenu a > span {
	word-break: keep-all;
}
#headerMenu a:hover ,
#headerMenu .current a {
	color: #009b4d;
}
#headerMenu .current a:after {
	content: "";
	display: block;
	height: 4px;
	background: rgb(124,209,8);
    background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	position: absolute;
	width: 100%;
	left: 0;
	bottom: 0;
}
#contactBtn {
	border-radius: 5px;
	overflow: hidden;
	width: 8.75rem;
	height: 2.5rem;
	display: flex;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	line-height: 1;
	font-size: 0.875rem;
	font-weight: 700
	
}
#contactBtn a {
	color: #fff;
	background: #2d4cc1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.25s background;
	padding: 0 0.5rem;
}
#contactBtn a:hover, 
#contactBtn.current a {
	background: transparent;
}
#contactBtn a .icon {
	opacity: 0.6;
	margin-right: 8px;
	width: 1.125rem;
}
#contactBtn a .icon img {
	display: block;
}
@media screen and (max-width: 1200px) {
	#headArea {
		padding: 0.5rem 2%;
	}
	#header {
		width: 96%;
		left: 2%;
		padding: 0 0.5rem;
	}
}
@media screen and (max-width: 768px) {
	#headArea {
		padding: 0.5rem 3%;
		padding: 1% 3%;
		/* min-height: 3.5rem; */
	}
	#menuFilter {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 101;
		background: rgba(0,0,0,0.4);
		display: none;
	}
	#spRyosysLogo {
		width: 56.25%;
		min-width: 135px;
	}
	#headArea .headText {
		flex-direction: column;
		align-items: flex-end;
		font-size: 1.25rem;
	}
	#headArea .headText .text {
		/* display: none; */
	}
	#ryosysLogo {
		display: none
	}
	#header {
		width: 100%;
		left: 0;
		border-radius: 0;
		height: 5rem;
		padding: 0 1.5rem;
		top: 0;
	}
	#headArea .headText .tel {
		font-size: 2.125rem;
		font-size: 212.5%;
	}
	#headArea .headText .tel .icon {
		width: 1.6875rem
	}
	#headArea .headText .time {
		font-size: 1.125rem;
		font-size: 112.5%;
	}
	#headerMenuArea {
		position: fixed;
		width: 80%;
		width: 50%;
		right: auto;
		left: 100%;
		top: 0;
		background: #fff;
		max-width: 400px;
		transform: translateX(0);
	    /* translate: 0; */
		z-index: 105;
		display: block;
		transition: .5s transform;
		/* transition: .5s translate; */
		padding-top: 4rem;
		font-size: 0.875rem;
	}
	#headerMenuArea.on {
		transform: translateX(-100%);
	    /* translate: -100%; */
	}
	#menuCloseBtn {
		position: absolute;
		width: 2.75rem;
		height: 2.75rem;
		right: 1rem;
		top: 1rem;
	}
	#menuCloseBtn span {
		display: block;
		position: absolute;
		background: #7cd00a;
		width: 100%;
		height: 0.375rem;
		top: 50%;
		left: 0;
		margin-top: -0.1875rem;
	}
	#menuCloseBtn span:nth-child(1) { 
        transform: rotate(45deg);
        /* rotate: 45deg */
    } 
	#menuCloseBtn span:nth-child(2) { 
        transform: rotate(-45deg);
        /* rotate: -45deg */
    } 
	#headerMenu {
		display: block;
		height: auto;
		font-size: 1.875rem;
		text-align: left;
		margin-bottom: 2rem;
		margin-bottom: 2.5rem;
		font-size: 187.5%;
	}
	#headerMenu li {
		height: auto;
		padding: 0;
	}
	#headerMenu li:not(:last-child) {
		margin-bottom: 1rem;
		margin-bottom: 1.75rem;
	}
	#headerMenu li br {
		display: none
	}
	#headerMenu a {
		padding: 0.4rem 0 0.4rem 1.75rem;
	}
	#headerMenu .current a:after {
		width: 0.625rem;
		height: 100%;
	}
	#contactBtn {
		font-size: 1.65rem;
		font-size: 187.5%;
		width: 90%;
		height: 5rem;
		margin: 1rem auto 1.5rem;
		margin-bottom: 2rem;
		max-width: 21.25rem;
	}
	#contactBtn a .icon {
		width: 2.125rem;
	}
	#spHeadText {
		font-weight: bold;
		text-align: center;
	}
	#spHeadText .text {
		font-size: 175%;
	}
	#spHeadText .text.blue {
		color: #2d4cc1;
	}
	#spHeadText .text.blue .large {
		font-size: 115%;
}
	#spHeadText .tel {
		display: flex;
		font-family: Arial;
		justify-content: center;
		align-items: center;
		/* font-size: 0.9rem; */
	}
	#spHeadText .tel .icon {
		width: 2em;
		margin-right: 0.3rem;
		font-size: 155%;
	}
	#spHeadText .tel .telText {
		font-size: 2.5rem;
		font-size: 250%;
	}
	#spHeadText .time {
	    font-size: 1.5rem;
	    font-size: 1.35rem;
	    font-size: 150%;
	}
	#logoArea {
		width: 75.5%;
	}
	#roadheatingSystem {
		/* max-width: 100%; */
		/* width: 260px; */
		max-width: 300px;
	}
	#spMenuArea a {
		display: block;
		position: relative;
		width: 2.75rem;
		height: 3.375rem;
	}
	#spMenuArea a span {
		display: block;
		position: absolute;
		width: 100%;
		height: 0.375rem;
		left: 0;
		background: #7cd00a;
	}
	#spMenuArea a span:nth-child(1) {
		top: 0.625rem
	}
	#spMenuArea a span:nth-child(2) {
		top: 50%;
		transform: translateY(-50%);
	    /* translate: 0 -50%; */
	}
	#spMenuArea a span:nth-child(3) {
		bottom: 0.625rem
	}
}
@media screen and (max-width: 500px) {
	#headArea .headText {
		/* font-size: 0.8rem; */
		flex-wrap: wrap;
	}
	#headArea .headText .tel {
		/* font-size: 180%; */
	}
	#headArea .headText .tel .icon {
		width: 1.3rem;
	}
}

/* 印刷 */
#print {
	text-align: right;
	position: fixed;
	right: 0;
	top: 32%;
	z-index: 10;
}
#printBtn {
	/* position: sticky; */
	/* top: 0; */
	/* right: 0; */
	/* margin-left: auto; */
	/* display: inline-block; */
}

/* メインタイトル */
#mainTtlArea {
    background: rgb(124,209,8);
    background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
    position: relative;
    z-index: 1;
    /* overflow-x: hidden; */
    /* overflow-y: visible; */
    height: 18.75rem;
    display: flex;
    align-items: center;
}
#mainTtlArea:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	left: -25%;
	left: 0;
	top: 0;
	opacity: 0.3;
	z-index: -1;
	/* transform: rotate(-4deg); */
	transform: skewY(-4deg);
}
#mainTtlArea {
    text-align: center;
}
#mainTtlArea h1 {
	/* margin-bottom: 2.625rem; */
	padding-top: 0rem;
}
#mainTtlArea .contactStep {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 920px;
	margin: auto;
	margin-top: 2.625rem;
}
#mainTtlArea .contactStep li {
	width: calc((100% - 80px) / 3);
	/* max-width: 280px; */
	position: relative;
}
#mainTtlArea .contactStep li:first-child:after ,
#mainTtlArea .contactStep li:last-child:after {
	content: "";
	display: block;
	position: absolute;
	left: 100%;
	top: 0;
	height: 100%;
	width: 40px;
	background: url(../images/contact/step_icon.png) no-repeat center;
}
#mainTtlArea .contactStep li:last-child:after {
	left: auto;
	right: 100%
}

@media screen and (max-width: 768px) {
	#mainTtlArea {
		height: auto;
		/* height: 22rem; */
	}
	#mainTtlArea .inner {
		padding: 1.5rem 3.5%;
	}
	#mainTtlArea:after {
		height: 104%;
		top: -2%;
	}
	#mainTtlArea h1 {
		padding-top: 6%;
		/* margin-bottom: 5%; */
	}
	#mainTtlArea .contactStep {
		margin-bottom: -3rem;
	}
	#mainTtlArea .contactStep li {
		/* position: static; */
	}
	#mainTtlArea .contactStep li:nth-child(1) ,
	#mainTtlArea .contactStep li:nth-child(3) {
		width: 26.2%;
		max-width: 190px;
	}
	#mainTtlArea .contactStep li:nth-child(2) {
		width: 31.6%;
		max-width: 230px;
	}
	#mainTtlArea .contactStep li:nth-child(1) {
		
	}
	#mainTtlArea .contactStep li:first-child:after, #mainTtlArea .contactStep li:last-child:after {
	width: 31%;
	background-image: url(../images/contact/step_icon_s.png);
	background-size: 65%;
	}
}


/* フッター */
#footer {
	background: #fff;
	position: sticky;
	top: 100vh;
	/* left: 0; */
	/* padding: 0 5rem; */
}
#footerInner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
#footerLogo {
	max-width: 18.125rem;
	/* width: 70%; */
}
#copy {
	font-family: "Lato";
	font-size: 0.875rem;
	color: #777
}

#mainArea {
	position: relative;
	padding-bottom: 1rem;
}
#topBtn {
	position: sticky;
	right: 0;
	bottom: 1rem;
	pointer-events: none;
	padding-right: 1rem;
	display: flex;
	justify-content: flex-end;
	margin-top: -3.5rem;
	z-index: 10;
}
#topBtn a {
	/* margin-left: auto; */
	pointer-events: all;
}
#topBtn .btn {
	width: 4rem;
	height: 4rem;
	border-radius: 100rem;
	overflow: hidden;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	margin: auto;
}
#topBtn .btn span {
	display: flex;
	width: 100%;
	height: 100%;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 1.8125rem;
	font-weight: 900;
	transition: .25s background;
	background: transparent;
}
#topBtn a:hover .btn span {
	background: #005344;
}
#topBtn .text {
	color: #003042;
	font-weight: 900;
	font-family: "Lato";
	font-size: 0.75rem;
	text-align: center;
	padding-top: 0.25rem;
}
@media screen and (max-width: 768px) {
	#topBtn {
		position: fixed;
		z-index: 10
	}
	#footer .inner {
		padding: 1.5rem 6rem;
	}
	#footerInner {
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	#footerLogo {
		margin-bottom: 1.25rem
	}
	#copy {
		font-size: 1.25rem
	}
}

/* 共通 */
#mainArea .boxWrap {
	padding-top: 2.625rem;
	padding-bottom: 5rem;
}
#mainArea .bgBox {
  border-radius: 10px;
  background-color: #fff;
  box-shadow: 4px 4px 0px 0px rgba(30, 117, 149, 0.1);
  padding: 5rem 10%;
}

#footContactArea {
    display: flex;
    justify-content: center;
    padding-bottom: 5rem;
    align-items: center;
    padding-top: 5.875rem;
}
#footContactArea.bd {
    border-top: 3px solid #2d4cc1;
    padding-top: 5.875rem;
}
#footContactArea h2 {
	position: relative;
	display: flex;
	height: 6.25rem;
	align-items: center;
	line-height: 1.2;
	padding: 0 1rem;
	margin-bottom: 1.875rem;
	margin-bottom: 1rem;
	text-align: center;
}
#footContactArea h2 .en {
	font-weight: bold;
	font-size: 6.25em;
	color: #2d4cc1;
	opacity: 0.15;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	line-height: 1;
	font-family: "Lato";
	display: block;
	letter-spacing: 0.5rem;
}
@media screen and (min-width: 769px) and (max-width: 990px) {
	#footContactArea h2 .en {
		font-size: 8.5vw;
	}
}
#footContactArea h2 .ttl {
	font-size: 1.625rem;
	font-size: 162.5%;
}
#footContactArea .telArea {
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1.875rem;
}
#footContactArea .telArea .tel {
	font-size: 1.5rem;
	font-family: Arial;
	display: flex;
	align-items: center;
	margin: 0 0.625rem 0.25rem;
	font-size: 200%;
	font-weight: bold;
	justify-content: center;
}
#footContactArea .telArea .tel .icon {
	width: 1.5625em;
	margin-right: 0.25rem;
	font-size: 50%;
}
#footContactArea .telArea .tel .icon img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	line-height: 1;
	display: block;
}
#footContactArea .telArea .tel .telText {
	line-height: 1
}

#footContactArea .telArea .time {
	margin-left: 0.5rem;
}
#footContactArea .btnArea {
	max-width: 22.5rem;
	margin: auto;
	display: none;
}
#footContactArea .contactBtn {
	border-radius: 5px;
	overflow: hidden;
	height: 4.5em;
	display: flex;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	line-height: 1;
	font-size: 1.125rem;
	font-weight: 700
}
#footContactArea .contactBtn a {
	color: #fff;
	background: #2d4cc1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.25s background;
	padding: 0 0.5rem;
}
#footContactArea .contactBtn a:hover {
	background: transparent;
}
#footContactArea .contactBtn a .icon {
	opacity: 0.6;
	margin-right: 8px;
	width: 1em;
}
#footContactArea .contactBtn a .icon img {
	display: block;
}
#footContactArea .info {
	padding-left: 3rem
}
#footContactArea .info li:not(:last-child) {
	margin-bottom: 1rem;
}
#footContactArea .info h3 {
	font-weight: bold;
	color: #2d4cc1;
	font-size: 112.5%;
	line-height: 1;
	margin-bottom: 0.5rem;
}
#footContactArea .info .address {
	font-weight: bold;
	display: flex;
	margin-bottom: 0.5rem;
	flex-wrap: wrap;
}
#footContactArea .info .address dt {
	font-family: "Lato","Noto Sans JP";
	padding-right: 1rem;
}
#footContactArea .info .tel {
	display: flex;
	font-family: "Lato";
	font-weight: bold;
	flex-wrap: wrap;
}

#footContactArea .info .tel > div {
	display: flex;
	padding-right: 2rem;
	margin-bottom: 0.5em;
}
#footContactArea .info .tel > div dt {
	width: 2.75em;
	height: 2em;
	background: #7889a3;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 87.5%;
	margin-right: 0.5em;
}
@media screen and (max-width: 768px) {
    #mainArea .bgBox {
		padding: 2rem 5%;
	}

	#footContactArea {
		flex-direction: column;
	}
	#footContactArea h2 {
		font-size: 1.55rem;
		height: 7em;
	}
	#footContactArea h2 .en {
		font-size: 7em;
	}
	#footContactArea .telArea {
		font-size: 1.75rem;
		flex-wrap: wrap;
	}
	#footContactArea .btnArea {
		max-width: 500px;
		margin-bottom: 3rem;
		width: 85%;
	}
	#footContactArea .contactBtn {
		font-size: 2rem;
		height: 3.6em;
	}
	#footContactArea .info {
		padding-left: 0;
		font-size: 1.8rem;
	}
}
@media screen and (max-width: 500px) {
	
	#footContactArea h2 {
		font-size: 1.25rem;
	}
	#footContactArea h2 .en {
		font-size: 19vw;
	} 
	#footContactArea .telArea {
		font-size: 1.5rem;
	}
	#footContactArea .info {
		font-size: 1.625rem;
	}

}


/* TOPページ */
#mainArea .bgBox.top {
	padding: 2.5rem 2%
}

.top #footContactArea {
	padding-bottom: 0;
	padding-top: 0;
}
#topArea {/* background: #f8f8f8; */}
#spMoveWrap {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	/* padding-top: 650px; */
	max-width: 1214px;
	margin: auto;
	overflow: visible;
	justify-content: flex-end;
	justify-content: space-between;
	align-items: flex-start;
	padding-bottom: 22rem;
	padding-bottom: 23.5625rem;
	margin-top: -3rem;
	width: 100%;
}

#flowSpImg {
	position: sticky;
	top: 170px;
	left: 2%;
	width: 19.44%;
	z-index: 1;
	margin-top: 57px;
	max-width: 372px;
	max-width: 236px;
	height: auto;
	/* margin-left: -6%; */
	overflow: visible;
	z-index: 3;
	opacity: 0;
	transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
	transition-property: opacity, transform;
}
@media screen and (min-width: 769px) {
	#flowSpImg {
		opacity: 0;
		transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
		transition-property: opacity, transform;
	}
	
	#flowSpImg.on {
		opacity: 1
	}
}
@media screen and (max-width: 768px) {
	#flowSpImg_s {
		opacity: 0;
		transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
		transition-property: opacity, transform;
	}
	
	#flowSpImg_s.on {
		opacity: 1
	}
}
.flowSpInner {
	position: relative;
	/* display: flex; */
}
.flowSpInner .spImg {
	position: relative;
	z-index: 1;
	/* position: absolute; */
}
.flowSpInner .shadow {
	position: absolute;
	bottom: -3%;
	right: -9%;
	display: block;
	width: 150%;
}
#topMv {
	width: 80.56%;
	top: 0;
	margin-bottom: 6.25rem;
	margin-left: auto;
}
#visual {
	height: 650px;
}
#topMainCopy h1 {
	position: absolute;
	top: 153px;
	z-index: 2;
	left: 275px;
	left: 284px;
	width: 31.63097199341021%;
	left: 24%;
	top: 10%;
}
#topMainCopy:before,
#topMainCopy:after {
	content: "";
	display: block;
	position: absolute;
	width: calc((100vw - 1200px)/2 + 810px);
	right: 404px;
	top: 108px;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	height: 253px;
	transform: skewX(-15deg);
	z-index: 1;
	transform-origin: right top;
	top: 10%;
}
#topMainCopy.on.js-trNone h1, #topMainCopy.on.js-trNone:before , #topMainCopy.on.js-trNone:after {
	transition: none
}
#topMainCopy:after {
	transform-origin: center center;
	right: 414px;
	opacity: 0.3;
}
@media screen and (min-width: 769px) {
	#topMainCopy h1 {
		transform: translate(-2rem,-50%);
		opacity: 0;
		transition: 0.5s cubic-bezier(0.15, 0.58, 0.56, 0.98);
		transition-property: opacity, transform
	}
	#topMainCopy.on h1 {
		transform: translate(0,-50%);
		opacity: 1
	}
	#topMainCopy:before,
	#topMainCopy:after {
		transform: translate(-100%,-50%) skewX(-15deg);
		transition: .5s transform;
		opacity: 0;
	}
	#topMainCopy:after {
		opacity: 0;
		transform: translate(-100%,-50%) skewX(-15deg) rotate(-3deg);
	}
	#topMainCopy.on:before {
		opacity: 1;
		transform: translate(0%,-50%) skewX(-15deg);
	}
	#topMainCopy.on:after {
		opacity: 0.3;
		transform: translate(0%,-50%) skewX(-15deg) rotate(-3deg);
	}
}
@media screen and (max-width: 768px) {
	
}
#visual .visualInner {
	/* overflow: hidden; */
}
#mainVisual {
	opacity: 0;
	transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
	transition-property: opacity;
	overflow: hidden;
	width: 100vw;
	position: absolute;
	left: 50%;
	top: 0;
	height: 100%;
	transform: translateX(-50%);
}
#slider {
	
}
#mainVisual.on {
	opacity: 1;
}
#slider {
	position: absolute;
	width: 1920px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1920px;
	top: 0;
}
/* #visual .visualInner img {
	position: absolute;
	width: 1920px;
	left: 50%;
	transform: translateX(-50%);
	max-width: 1920px;
	top: 0;
} */
#topProblems {
	/* margin-top: 650px; */
	width: 74.15%;
	width: 75%;
	width: 80.56%;
	/* text-align: right; */
	margin-left: auto;
	/* text-align: center; */
	padding-left: 63px;
	padding-right: 4%;
	z-index: 2;
	position: relative;
	overflow: hidden;
}
#topProblems .img {
	opacity: 0;
	transform: translateX(10%);
	transition: 1s cubic-bezier(0.04, 1, 0.56, 0.98);
	transition: 0.5s cubic-bezier(0.15, 0.58, 0.56, 0.98);
	transition-property: opacity,transform;
}
#topProblems.on .img {
	opacity: 1;
	transform: translateX(0);
}
#merit1 {
	/* width: 74.15%; */
	/* width: 75%; */
	width: 80.56%;
	margin-left: auto;
	position: relative;
	padding: 15rem 0 0;
	margin-top: -10rem;
	width: 100%;
	padding-left: calc(19.44% + 60px);
	z-index: 1;
}
#merit1:after {
	content: "";
	display: block;
	position: absolute;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	width: 100vw;
	height: 100%;
	height: calc(100% + 23.5625rem);
	left: 50%;
	/* left: 0; */
	top: 0;
	transform: translateX(-34%);
	transform: translateX(-50%);
	z-index: -1;
}
#merit1 .ttlArea {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
	opacity: 0;
	transform: translateX(10%);
	transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
	transition-property: opacity,transform;
}
#merit1 .ttlArea .ttl {
	width: 80%
}
#merit1 .ttlArea .numCircle {
    background: #fff;
    border-radius: 5rem;
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
}
#merit1 .textArea {
	padding-left: 6rem;
	color: #fff;
	overflow: hidden;
	/* margin-bottom: -3rem; */
}
#merit1 .text {
	line-height: 1.875;
	margin-bottom: 1.25rem;
	opacity: 0;
	transform: translateX(15%);
	transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
	transition-property: opacity,transform;
	transition-delay: 0.1s;
}
#merit1 .img {
	width: 90%;
}
#merit1 .img img {
	display: block;
	opacity: 0;
	transform: translateX(20%);
	transition: 1s cubic-bezier(0.15, 0.58, 0.56, 0.98);
	transition-property: opacity,transform;
	transition-delay: 0.2s;
}
#topArea .meritListWrap {
	background: #eaf7e8;
	padding-top: 1px;
	max-width: 100%;
}

#merit1 #merit1Inner {
	overflow-x: hidden;
	width: 100%;
	margin-bottom: -3rem;
}
#merit1 #merit1Inner.on .ttlArea,
#merit1 #merit1Inner.on .text ,
#merit1 #merit1Inner.on .img img {
	opacity: 1;
	transform: translateX(0);
}


#meritPanelListArea ,
#meritList {
	display: flex;
	justify-content: space-between;
	width: 100%;
	max-width: 1208px;
	margin: auto;
}
#meritPanelListArea {
	margin-bottom: 4.375rem;
	margin-top: -14.6875rem;
	/* padding: 0 2%; */
}
@media screen and (max-width: 1300px) {
	#meritPanelListArea,
#meritList {
		padding: 0 3%
	}
}
#meritPanelListArea li {
	width: calc((100% - 8rem)/3);
	background: #fff;
	border-radius: 8px;
	position: relative;
	filter: drop-shadow(0px 0px 15px rgba(0,0,0,0.1));
	padding: 2rem 1.75rem;
	width: 29.802%;
	transition: .5s;
	transition-property: opacity,transform;
	opacity: 0;
	transform: translateY(4rem);
}

@media screen and (min-width: 769px) {
	#meritPanelListArea li:nth-child(2) {transition-delay: 0.1s;}
	#meritPanelListArea li:nth-child(3) {transition-delay: 0.2s;}	
}
#meritPanelListArea li.on {
	opacity: 1;
	transform: translateY(0)
}
#meritPanelListArea li .numCircle {
	position: absolute;
	left: 0;
	top: 0;
	transform: translate(-50%,-50%);
	background: #fff;
	border-radius: 1000px;
	width: 5rem;
	height: 5rem;
	aspect-ratio: 1/1
}
#meritPanelListArea li .meritImg {
	text-align: center;
	margin-bottom: 1.5rem;
}
#meritPanelListArea li .ttl {
	text-align: center;
	margin-bottom: 1.5rem;
}
#meritPanelListArea li .text {
	font-size: 93.75%;
	line-height: 1.7;
	/* letter-spacing: -0.075em; */
}

#meritList {
	padding-bottom: 5.625rem;
	overflow: hidden;
}
#meritList li {
	width: 45.75%;
	transition: .5s;
	transition-property: opacity,transform;
	opacity: 0;
	transform: translateX(10%);
}
#meritList.on li {
	opacity: 1;
	transform: translateX(0);
}
#meritList li:nth-child(2) {
	transition-delay: .1s
}
#meritList .ttlArea {
	display: flex;
	align-items: center;
	margin-bottom: 1rem;
}
#meritList .ttlArea .ttl {
	max-width: calc(100% - 6rem);
	width: calc(100% - 6rem);
}
#meritList .ttlArea .numCircle {
    background: #fff;
    border-radius: 5rem;
    width: 5rem;
    height: 5rem;
    margin-right: 1rem;
}
#meritList .text {
	font-size: 93.75%;
	line-height: 1.7;
}

#topLinkArea ul {
	display: flex;
	/* height: 400px; */
}

#topLinkArea ul li {
	width: 50%;
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 400px;
}
#topLinkArea ul li a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
}
#topLinkArea ul li p.img img {
	position: absolute;
	height: 100%;
	width: 960px;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	max-width: 960px;
	z-index: -1;
	transition: .75s
}
#topLinkArea ul li .textArea {
	/* position: relative; */
	z-index: 1;
	width: 100%;
}
#topLinkArea ul li .textArea .ttl {
	margin: 0 auto 1.5rem;
	text-align: center;
	max-width: 85%;
}
#topLinkArea ul li .textArea .ttl img {
	/* max-width: 80%; */
}
#topLinkArea .btnWrap {
	padding-top: 0;
	width: 100%;
	margin: auto;
	max-width: 18.75rem;
}
#topLinkArea .btnWrap .btn:hover + p.img img {
	transform: translateX(-50%) scale(1.05);
} 
#topLinkArea .btnWrap .btn {
    height: 3.75rem;
    font-family: 'Lato';
    font-weight: 900;
}
#topLinkArea .btnWrap .btn span {
    font-feature-settings: normal;
}
#topLinkArea .flow .btnWrap .btn {
	background: #003042
}
#topLinkArea .operation .btnWrap .btn {
	background: #005344
}
@media screen and (min-width: 769px) and (max-width: 1200px) {
	#topMainCopy h1 {
		left: 25%;
	}
	#topMainCopy:before, #topMainCopy:after{
		width: 64vw;
		right: 36vw;
		height: 0;
		padding-bottom: 20%;
	}
	#visual {
		height: auto;
		aspect-ratio: 10 / 6.85;
	}
	#slider {
		width: 160%;
	}
	#visual .visualInner img {
		/* width: 160%; */
	}
	#topProblems {
		padding-left: 6%;
	}
	#merit1 {
		padding-left: 25.44%;
		padding-right: 3%;
	}
	#topLinkArea ul li {
		height: 320px
	}
	#topLinkArea ul li p.img img {
		width: auto;
	}
}
@media screen and (max-width: 768px) {
	#mainArea .bgBox.top {
		background: none;
		box-shadow: none;
		padding: 0;
		border-radius: 0;
	}
	#topArea {
		overflow: hidden
	}
	#spMoveWrap {
		margin-top: -1.5rem;
		padding-bottom: 10%;
		display: block;
	}
	#flowSpImg {
		position: absolute;
		top: 9.5%;
		left: 8%;
		width: 26%;
		margin-top: 0;
	}
	#topMv {
		width: 100%;
	}
	#visual {
		height: auto;
		position: relative;
	}
	#mainVisual {
		position: static;
		transform: none;
	}
	#slider {
		position: static;
		width: 100%;
		transform: none;
	}
	#visual .visualInner img {
		/* position: static;
		width: 100%;
		transform: none; */
	}
	#topMainCopy {
		position: absolute;
		top: 3rem;
		top: 5%;
		left: 0;
		padding: 2rem 2rem 3rem;
		width: 70%;
		padding: 5% 5% 12%;
	}
	#topMainCopy h1 {
		position: relative;
		width: 90%;
		left: 0;
		top: 0;
	}
	#topMainCopy h1 {
		transform: translateX(-2rem);
		opacity: 0;
		transition: 0.5s cubic-bezier(0.15, 0.58, 0.56, 0.98);
		transition-property: opacity, transform
	}
	#topMainCopy.on h1 {
		transform: translateX(0);
		opacity: 1
	}
	#topMainCopy:before, #topMainCopy:after {
		right: auto;
		left: 0;
		width: 100%;
		height: 100%;
		top: 0;
		transform: translateX(-100%) skewX(-15deg);
		opacity: 0;
		transition: 0.5s cubic-bezier(0.15, 0.58, 0.56, 0.98);
		transition-property: opacity, transform;
	}
	#topMainCopy:after {
		transform: translateX(-100%) skewX(-15deg) rotate(-3deg);
		left: -4%;
		height: 109%;
		top: -4%;
	}
	#topMainCopy.on:before {
		transform: translateX(0%) skewX(-15deg);
		opacity: 1;
	}
	#topMainCopy.on:after {
		transform: translateX(0%) skewX(-15deg) rotate(-3deg);
		opacity: 0.3
	}
	.flowSpInner {
		position: absolute;
		top: 35.5%;
		left: 8%;
		width: 26%;
		margin-top: 0;
		z-index: 3;
	}
	#topProblems {
		width: 100%;
		padding: 0 4%;
	}	
	#merit1 {
		width: 100%;
		padding: 20rem 1.5rem 30rem 1.5rem;
		margin: -15rem 0 0;
	}
	.numCircle {
		width: 8.685rem!important;
		height: 8.685rem!important;
		width: 6.685rem!important;
		height: 6.685rem!important;
	}
	#merit1 .ttlArea .ttl {
		width: calc(100% - 7.685rem);
		/* width: 105%; */
		max-width: 400px;
	}
	#merit1 .textArea {
		font-size: 160%;
		padding-left: 1.5rem;
	}
	#merit1 .text {
		margin-bottom: 3rem
	}
	#topArea .meritListWrap {
		font-size: 160%;
		padding: 1.5rem 4rem;
		padding: 1.5rem 1.5rem 1.5rem 1.5rem;
		/* overflow: hidden; */
	}
	#meritPanelListArea {
		flex-direction: column;
		margin-top: -25rem;
		margin-bottom: 0;
		padding: 0 3.3425rem;
	}
	#meritPanelListArea li {
		width: 100%;
		margin-bottom: 7rem;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		justify-content: center;
		padding: 3rem;
	}
	#meritPanelListArea li .numCircle {
		transform: translate(-50%,-30%);
	}
	#meritPanelListArea li .meritImg {
		
width: 40%;
		
max-width: 180px;
	}
	#meritPanelListArea li .ttl {
		
width: 60%;
		
max-width: 250px;
	}
	#meritPanelListArea li .text {
		width: 100%
	}
	#meritList {
		flex-direction: column;
		padding-bottom: 0;
		padding: 0;
	}
	#meritList li {
		width: 100%;
		margin-bottom: 3rem;
	}
	#meritList .ttlArea .numCircle {
	}
	#meritList .ttlArea .ttl {
		/* max-width: calc(100% - 9.685rem); */
		max-width: 395px;
		width: calc(95% - 8.685rem);
	}
	#meritList .text {
		padding-left: 9.685rem;
		padding-left: 7.685rem;
		padding-right: 3.3425rem;
	}
	#topLinkArea ul {
		flex-direction: column;
	}
	#topLinkArea ul li {
		width: 100%;
		height: auto;
		aspect-ratio: 16/9;
	}
	#topLinkArea ul li .textArea .ttl {
		/* width: 62.7%; */
		max-width: 68%;
		width: 68%;
		max-width: 400px;
	}
	#topLinkArea .btnWrap {
		max-width: 300px;
		width: 55%;
	}
	#topLinkArea .btnWrap .btn {
		font-size: 1.7rem;
		height: auto;
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
		min-height: 5rem;
	}
}
@media screen and (max-width: 400px) {
	.numCircle {
		/* width: 7rem!important; */
		/* height: 7rem!important; */
	}
	#topArea .meritListWrap {
		padding: 1.5rem 1rem;
	}
	#meritPanelListArea {
		padding: 0 3.3425rem;
	}
	#meritPanelListArea li {
		padding: 3rem 2rem;
	}
	#meritList .ttlArea .ttl {
		/* max-width: calc(100% - 8rem); */
	}
	#meritList .text {
		padding-left: 8rem
	}
}


/* ご依頼から導入まで */

#mainArea .bgBox.flow {
    padding: 5rem 5%;
}
#flowStep {
	margin-bottom: 4.6875rem
}
#flowStep ul {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
#flowStep li {
    width: calc((100% - 12.5rem)/6);
}
#flowStep li .text {
	text-align: center;
	margin-bottom: 1rem;
}
#flowStep li .text img {
	width: 6.25rem
}
#flowStep li .imgCircle {
    background: #ebfcdc;
    width: 100%;
    height: auto;
    aspect-ratio: 1 /1;
    border-radius: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    position: relative;
}
#flowStep li:not(:last-child) .imgCircle:after {
    content: "";
    display: block;
    position: absolute;
    width: 1rem;
    height: 2rem;
    background: #7bd00c;
    clip-path: polygon(100% 50%, 0% 100%, 40% 50%, 0% 0%);
    left: calc(100% + 1.25rem);
    transform: translateX(-50%);
    /* translate: -50% 0; */
}
#flowStep li .imgCircle span.img {
	text-align: center;
	padding: 0 0.7rem;
	width: 100%;
}
.flowIcon1 {width: 69.5%;}
.flowIcon2 {width: 75.8%;}
.flowIcon3 {width: 67.9125%;transform: translateX(-10%);}
.flowIcon4 {width: 78.9725%;}
.flowIcon5 {width: 67.125%;}
.flowIcon6 {width: 82.9125%;}

#flowStepDetail {
    max-width: 50rem;
    margin: auto;
}
#flowStepDetail li:not(:last-child) {
	margin-bottom: 3.875rem
}
#flowStepDetail .stepTtlArea {
    display: flex;
    width: 100%;
    height: 4.375em;
    font-size: 1rem;
}

#flowStepDetail .stepTtlArea .stepNum {
    background: rgb(124,209,8);
    background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
    border-radius: 1000px 0 0 1000px;
    width: 17.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
#flowStepDetail .stepTtlArea h2 {
	border: 3px solid #039b4d;
	border-left: none;
	border-radius: 0 1000px 1000px 0;
	width: calc(100% - 17.5rem);
	font-size: 1.375rem;
	letter-spacing: 0.125rem;
	color: #013143;
	display: flex;
	align-items: center;
	padding-left: 2.125rem;
}
#flowStepDetail .stepDetail {
	display: flex;
	padding: 2rem 0 0;
	align-items: center;
}
#flowStepDetail .stepDetail.step2 {
	
}
#flowStepDetail .stepDetail .img {
	width: 10.5rem;
	text-align: center;
	padding: 0 1rem;
}
#flowStepDetail .stepDetail .textArea {
	width: calc(100% - 10.5rem);
	padding: 0 0 0 0.5rem;
}
#flowStepDetail .contactWrap {
    display: flex;
    margin-top: 1.5rem;
    align-items: center;
    justify-content: space-between;
}

#flowStepDetail .contactWrap .btnArea {
	width: 22.5rem;
}
#flowStepDetail .contactWrap .contactBtn {
	border-radius: 5px;
	overflow: hidden;
	height: 4.25em;
	display: flex;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	line-height: 1;
	font-size: 1.125rem;
	font-weight: 700
}
#flowStepDetail .contactWrap .contactBtn a {
	color: #fff;
	background: #2d4cc1;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: 0.25s background;
	padding: 0 0.5rem;
}
#flowStepDetail .contactWrap .contactBtn a:hover {
	background: transparent;
}
#flowStepDetail .contactWrap .contactBtn a .icon {
	opacity: 0.6;
	margin-right: 8px;
	width: 1.125em;
}
#flowStepDetail .contactWrap .contactBtn a .icon img {
	display: block;
}
#flowStepDetail .contactWrap .telArea {
	font-size: 1rem;
	/* font-size: 1.125rem; */
	font-weight: bold;
	text-align: center;
}
#flowStepDetail .contactWrap .telArea .text {
	
} 
#flowStepDetail .contactWrap .telArea .blue {
	color: #2d4cc1;
	font-size: 112.5%;
}
#flowStepDetail .contactWrap .telArea .large {
	font-size: 125%;
	font-size: 115%;
}
#flowStepDetail .contactWrap .telArea .tel {
	font-size: 1.5rem;
	font-family: Arial;
	display: flex;
	align-items: center;
	margin: 0 0.625rem 0.25rem;
	font-size: 200%;
	font-weight: bold;
	justify-content: center;
}
#flowStepDetail .contactWrap .telArea .tel .icon {
	width: 0.78125em;
	margin-right: 0.25rem;
}
#flowStepDetail .contactWrap .telArea .tel .icon img {
	width: 100%;
	height: auto;
	vertical-align: middle;
	line-height: 1;
	display: block;
}
#flowStepDetail .contactWrap .telArea .tel .telText {
	line-height: 1
}

#flowStepDetail .contactWrap .telArea .time {
	
}

@media screen and (max-width: 850px) {
	#flowStepDetail .contactWrap {
		flex-direction: column;
		align-items: center;
	}
	
	#flowStepDetail .contactWrap .telArea {
		width: 22.5rem;
		margin-bottom: 1rem;
	}
}
@media screen and (max-width: 768px) {
	#mainTtlArea h1.flow {
		margin-bottom: 12%;
		padding-top: 12%;
	}
	#mainTtlArea h1.flow img {
		width: 91.21%;
		max-width: 637px;
	}
	#flowStep ul {
		flex-wrap: wrap;
	}
	#flowStep ul li {
		width: calc(100% / 3);
		padding-right: 3rem;
	}
	#flowStep ul li:nth-child(-n + 3) {
		margin-bottom: 2.5rem;
	}
	#flowStep li .imgCircle span.img {
		padding: 0 9%;
	}
	#flowStep li .text {
		margin-bottom: 1em;
	}
	#flowStep li .text img {
		width: 85%;
		max-width: 140px;
	}
	#flowStep li:not(:last-child) .imgCircle:after {
		width: 1.6rem;
		height: 3.2rem;
		left: calc(100% + 1.5rem);
	}

	#flowStepDetail {
		max-width: 100%;
	}
	#flowStepDetail li:not(:last-child) {
		margin-bottom: 4.5rem;
	}
	#flowStepDetail .stepTtlArea {
		font-size: 1.2rem;
		height: auto;
	}
	#flowStepDetail .stepTtlArea .stepNum {
		width: 45%;
	}
	#flowStepDetail .stepTtlArea h2 {
		width: 55%;
		font-size: 2.125rem;
		padding: 0.3em 0 0.3em 0.75em;
	}
	#flowStepDetail .stepTtlArea .stepNum span {
		width: 45%;
		text-align: center;
	}
	#flowStepDetail .stepDetail .img {
		width: 33%;
		padding: 0 2rem 0 0;
	}
	#flowStepDetail .stepDetail .textArea {
		width: 67%;
		font-size: 1.5rem
	}
	#flowStepDetail .contactWrap .telArea {
		font-size: 1.5rem;
		width: 100%;
	}
	#flowStepDetail .contactWrap .btnArea {
		width: 100%;
	}
	#flowStepDetail .contactWrap .contactBtn {
		font-size: 1.75rem;
		height: 3.5em;
	}
}
@media screen and (max-width: 500px) {
	#flowStepDetail .stepTtlArea h2 {
		font-size: 1.875rem;
	}
}
/* 操作画面イメージ */

#mainArea .bgBox.operation {
  padding: 0;
}
#mainArea .bgBox.operation .boxInner {
	padding: 5rem 4.5%;
}
#mainArea .bgBox.operation .boxInner.bgGreen {
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	position: relative;
}
#mainArea .bgBox.operation .boxInner.bgGreen .innerBg {
	position: relative;
	z-index: 10
}
#mainArea .bgBox.operation .boxInner.bgGreen:after {
	content: "";
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(255,255,255,0.8);
	left: 0;
	top: 0;
}
.operationLead {
	text-align: center;
}
.operationLead .leadText {
	margin-bottom: 4.0625rem;
}
.operationImg h2 {
	display: flex;
	align-items: flex-end;
	padding: 0.75rem 0;
	padding-left: calc(1.375rem + 5px);
	position: relative;
	margin-bottom: 3rem;
}
.operationImg h2:after {
	content: "";
	display: block;
	position: absolute;
	width: 5px;
	height: 100%;
	top: 0;
	left: 0;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
}
.operationImg h2 .img {
	margin-right: 1rem;
}
.operationImg h2 .anno {
	color: #555;
	font-size: 0.875rem;
	font-weight: normal;
	
}
.operationImg .operationImgCol {
	display: flex;
	justify-content: space-between;
}
.operationImgCol .col {
	width: 48.2%;
	max-width: 520px;
}
.operationImgCol .imgTtlWrap {
	position: relative;
}
.operationImgCol .imgTtlWrap h3 {
	position: absolute;
	display: flex;
	background: #fff;
	border-radius: 1000px;
	width: 92%;
	left: 4%;
	top: 5%;
	font-size: 1.375rem;
	color: #009b4d;
	min-height: 3.75rem;
	align-items: center;
	padding-left: 18%;
	box-shadow: 7.071px 7.071px 20px 0px rgba(0, 0, 0, 0.2);
	font-weight: 900;
}

.operationImgCol .imgTtlWrap h3 .icon {
	position: absolute;
	/* height: 155%; */
	width: 17%;
	left: 2%;
	top: 50%;
	transform: translateY(-50%)
}
.operationImgCol .imgTtlWrap h3 .icon img {
	
}
.operationImgCol .imgTtlWrap .img {
	border-radius: 1.25rem;
	overflow: hidden;
}
.operationImgCol .screen {
	text-align: center;
	margin-top: -3rem;
	position: relative;
}

.screenImage h2 {
	padding-bottom: 1rem;
	position: relative;
	margin-bottom: 1.5rem;
}
.screenImage h2:before,
.screenImage h2:after {
	content: "";
	display: block;
	position: absolute;
	top: 100%;
}
.screenImage h2:before {
	height: 3px;
	width: 100px;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
}
.screenImage h2:after {
	height: 1px;
	background: #555;
	width: calc(100% - 105px);
	left: 105px;
	margin-top: 1px;
}
.screenImage .systemImage {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.screenImage .systemImage > li {
	width: calc((100% - 4.5rem)/3);
	margin-bottom: 4.0625rem;
}
.screenImage .systemImage li h3 {
	display: flex;
	color: #fff;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
	border-radius: 5px;
	min-height: 3.75rem;
	padding: 0rem 3%;
	align-items: center;
	margin-bottom: 1rem;
}
.screenImage .systemImage li h3 .icon {
	width: 3.6em;
}
.screenImage .systemImage li h3 .icon img {
	width: 100%
}
.screenImage .systemImage li h3 .text {
  font-size: 125%;
  color: rgb(255, 255, 255);
  font-weight: bold;
  text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.2);
  padding: 0.5rem 0;
}
.screenImage .systemImage li .screenImg {
	text-align: center;
	margin-bottom: 1.5625rem;
}

.screenImage .list {
	padding-left: 1em;
	font-size: 93.75%;
	font-weight: 500;
	color: #333;
}
.screenImage .list li:before {
	content: "・";
	color: #7cd00a;
	text-indent: 0;
	display: inline-block;
	width: 1em;
	text-align: center;
}

.screenImage .option .list li:before {
	color: #009b4d
}
.screenImage .list li {
	text-indent: -1em;
}
.screenImage .option .optionImgCol {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 1rem;
}
.screenImage .option .optionImgCol .col {
	display: flex;
	margin-bottom: 4rem;
	align-items: center;
	max-width: 1000px;
}
.screenImage .option .optionImgCol .col:first-child {
	flex-direction: row-reverse;
}

.screenImage .option .optionImgCol .col .imgArea {
	width: 25rem;
}
.screenImage .option .optionImgCol .col .textArea {
	font-size: 0.9375rem;
	padding: 0 1rem;
	width: calc(100% - 25rem);
}
.screenImage .option .optionImgCol .col h3 {
	color: #009b4d;
	font-size: 175%;
	font-weight: 900;
	margin-bottom: 1.125rem;
	font-feature-settings: normal;
}
.screenImage .option .annoArea {
	background: #e8f3f7;
	border-radius: 5px;
	padding: 2rem 3rem;
	font-size: 0.8125rem;
	line-height: 2;
	color: #555;
}
.screenImage .option .annoArea li {
	padding-left :1em;
	text-indent: -1em
}
.screenImage .option .annoArea li:before {
	content: "・";
	text-indent: 0;
	display: inline-block;
	width: 1em;
	text-align: center;
}

.screenImage .list li {
	text-indent: -1em;
}

#checkBtnArea {
	display: flex;
	justify-content: center;
	margin-bottom: -4.5rem;
	padding-top: 1rem;
}
#checkBtnArea .btnWrap {
	width: 85%;
	max-width: 34.375rem;
}
#checkBtnArea .btn {
	background: #005344;
	height: 6.25rem;
	font-size: 1.5rem;
	padding: 1rem 2rem;
	transition: .25s background;
}
#checkBtnArea .btn:hover {
	background: transparent
}
#checkBtnArea .btn:before{
	content: "";
    display: block;
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgb(124,209,8);
    background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
}
#checkBtnArea .btn span:before {
	content: "Check";
	position: absolute;
	display: block;
	color: #fff32c;
	font-family: 'Lato';
	font-weight: 900;
	left: 0;
	top: 0.5rem;
	transform: rotate(-30deg);
	transition: .25s text-shadow;
	font-size: 100%;
}
#checkBtnArea .btn:hover span:before {
	text-shadow: 0px 0px 3px rgba(0,0,0,0.15);
}
#checkBtnArea .btn span:after {
	content: "→";
	font-size: 1.125rem;
	display: block;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 75%;
	font-weight: 900;
}
@media screen and (max-width: 768px) {
	#mainTtlArea h1.operation {
		margin-bottom: 12%;
		padding-top: 12%;
	}
	#mainTtlArea h1.operation img {
		width: 71.6%;
		max-width: 500px;
	}
	#mainArea .bgBox.operation .boxInner.operationLead {
		padding: 5rem 0;
	}
	.operationLead .leadText {
		padding: 0 7%;
	}
	.operationImg h2 {
		flex-direction: column;
		align-items: flex-start;
		padding: 0.25rem 0;
		padding-left: calc(1.375rem + 8px);
	}
	.operationImg h2:after {
		width: 8px
	}
	.operationImg h2 .img {
		width: 75%;
		margin-bottom: 1rem;
	}

	.operationImg h2 .img img {
	    width: 100%;
	}
	.operationImg h2 .anno {
		font-size: 1.5rem;
	}
	.operationImg .operationImgCol {
		flex-direction: column;
	}
	.operationImg .operationImgCol .col {
		width: 100%;
		max-width: 100%;
	}
	.operationImg .operationImgCol .col:first-child {
		margin-bottom: 2rem
	}
	.operationImgCol .imgTtlWrap h3 {
		font-size: 2.4rem;
		min-height: 2.5em;
		line-height: 1;
		padding: 1em 0.25em 1em 4em;
	}
	.operationImgCol .imgTtlWrap h3 .icon {
		width: 4em;
	}
	.operationImgCol .screen img {
		width: 55%;
		min-width: 250px
	}
	.screenImage .systemImage > li {
		width: calc((100% - 2.25rem)/2);
		font-size: 1.5rem;
	}

	.screenImage h2 {
		margin-bottom: 2.5rem
	}
	.screenImage .system h2 img {
		width: 70%
	}
	.screenImage .option h2 img {
		width: 73%
	}
	.screenImage .option .optionImgCol {
		
	}
	.screenImage .option .optionImgCol .col {
		flex-direction: column!important;
		margin-bottom: 6.5rem;
	}
	.screenImage .option .optionImgCol .col .textArea {
		width: 100%;
		font-size: 1.5rem;
		margin-bottom: 2.5rem;
	}
	.screenImage .option .optionImgCol .col h3 {
		text-align: center;
	}
	.screenImage .option .optionImgCol .col .text {
		font-size: 125%;
	}
	.screenImage .option .optionImgCol .col .list {
		font-size: 125%;
		font-weight: normal;
	}
	.screenImage .option .optionImgCol .col .imgArea {
		width: 100%;
		text-align: center
	}
	.screenImage .option .optionImgCol .col .imgArea img {
		width: 55%;
		min-width: 250px
	}
	.screenImage .option .annoArea {
		font-size: 1.5rem;
		line-height: 1.5;
	}
	#checkBtnArea .btnWrap {
		
	}
	#checkBtnArea .btn {
		font-size: 1.875rem;
		height: 7.5rem;
	}
	#checkBtnArea .btn span:after {
		font-size: 87.5%
	}
}
@media screen and (max-width: 640px) {
	.screenImage .systemImage > li {
		width: 100%;
		font-size: 170%;
	}
	.screenImage .systemImage li .screenImg img {
		width: 55%;
		min-width: 250px
	}
}

@media screen and (max-width: 500px) {
	.operationImgCol .imgTtlWrap h3 {
		font-size: 1.75rem;
		padding: 1em 0.25em 1em 3.25em;
	}
	.operationImgCol .imgTtlWrap h3 .icon {
		width: 3em
	}
	.screenImage .option .optionImgCol .col h3 {
		font-size: 160%;
	}
}

/* お問い合わせ */
#mainArea .boxWrap.contactBox {
	padding-top: 3.75rem;
	padding-bottom: 5rem;
}
#mainArea .boxWrap.contactBox p.lead {
	padding: 0 0 3.75rem;
	text-align: center;
	line-height: 1.6;
}

#mainArea .bgBox .formList > div {
	display: flex;
	flex-wrap: wrap;
}
#mainArea .bgBox .formList.confirm > div {
	min-height: 3.75rem;
}
#mainArea .bgBox .formList > div:not(:first-child) {
	margin-top: 1.375rem;
}
#mainArea .bgBox .formList > div.errWrap:not(:first-child) {
	margin-top: 2.2rem;
}
#mainArea .bgBox .formList.confirm > div:not(:first-child) {
	border-top: 1px dotted #aaa;
	padding-top: 1rem;
	margin-top: 1rem;
}

#mainArea .bgBox .formList .errTextArea {
	width: 100%;
	padding-left: 15rem;
	font-size: 0.75rem;
	color: #fff;
	padding-bottom: 0.75rem;
}
#mainArea .bgBox .formList .errText {
	display: inline-flex;
	background: #e01b1b;
	padding: 0.25rem 0.5rem;
	border-radius: 3px;
	position: relative;
}

#mainArea .bgBox .formList .errText:after {
	content: "";
	background: #e01b1b;
	display: block;
	width: 10px;
	height: 7px;
	clip-path: polygon(0 0, 100% 0%, 50% 100%);
	position: absolute;
	left: 1rem;
	top: 100%;
	margin-top: -1px
}
#mainArea .bgBox .formList div.formTtl {
	padding-left: 3.5rem;
	position: relative;
	font-weight: 500;
	height: 3.75rem;
	display: flex;
	align-items: center;
	width: 14rem;
	color: #333;
}
#mainArea .bgBox .formList div.formTtl .label {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 1.5rem;
	font-size: 0.75rem;
	color: #fff;
	background: #f4556d;
	border-radius: 3px;
	left: 0;
}
#mainArea .bgBox .formList div.formTtl .label span {
	display: block;
	line-height: 1;
}
#mainArea .bgBox .formList .formDetail {
	width: calc(100% - 14rem);
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 1rem;
}
#mainArea .bgBox .formList .formDetail .text {
	color: #777;
	margin-left: 1rem;
	font-size: 0.9375rem
}
#mainArea .bgBox .formList .formDetail .inputWrap {
	width: 100%;
	/* margin-right: 1rem; */
}
#mainArea .bgBox .formList .formDetail .inputWrap .confText {
	font-size: 1.125rem
}
#mainArea .bgBox .formList .formDetail .inputWrap.s {
	max-width: 12.5rem
}
#mainArea .bgBox .formList .formDetail .inputWrap.m {
	max-width: 19.375rem;
}
#mainArea .bgBox .formList .formDetail .inputWrap.l {
	max-width: 31.25rem
}
#mainArea .bgBox .formList .formDetail .nameWrap {
	display: flex;
	justify-content: space-between;
}
#mainArea .bgBox .formList .formDetail .nameWrap .col {
	width: calc((100% - 0.625rem)/2);
}
.bgBox #mailConf {
	padding-top: 0.5rem;
	font-size: 1.75rem;
	font-weight: bold;
	word-break: break-all;
}

#mainArea .contactBtnArea {
	padding: 1rem 0;
	display: flex;
	justify-content: center;
	position: relative;
	flex-wrap: wrap;
}
#mainArea .contactBtnArea .consentArea {
	text-align: center;
	padding-top: 3.125rem;
	width: 100%;
}
.consentArea #consent {
	display: flex;
	width: 12.5rem;
	background: #fff;
	border-radius: 5px;
	margin: 1rem auto 0;
	justify-content: center;
	align-items: center;
	height: 3.125rem;
}
.consentArea #consent label {
	cursor: pointer;
	/* line-height: 1; */
	width: 100%;
	height: 100%;
}
.consentArea #consent input {
	display: none;
}
.consentArea #consent .inputWrap {
	padding: 0.5rem;
	display: flex;
	align-items: center;
	font-size: 1.125rem;
	font-weight: bold;
	justify-content: center;
	/* line-height: 1; */
	width: 100%;
	height: 100%;
}
.consentArea #consent .inputWrap .input {
	width: 0.9375rem;
	height: 0.9375rem;
	border: 1px solid #000;
	line-height: 1;
	/* display: block; */
	margin-right: 0.5rem;
	position: relative;
	font-size: 93.75%;
	width: 1em;
	height: 1em;
}
.consentArea #consent .inputWrap .input:after {
	content: "";
	display: block;
	position: absolute;
	width: 90%;
	height: 40%;
	border: 2px solid #2419ac;
	border-width: 0.125em;
	border-top: none;
	border-right: none;
	transform: rotate(-45deg);
	/* rotate: -45deg; */
	left: 10%;
	top: 0%;
	opacity: 0;
}
.consentArea #consent input:checked + .inputWrap .input:after {
	opacity: 1
}
.consentArea #consent .inputWrap .text {
	font-size: 112.5%;
}

.boxWrap .thanksArea .leadText {
	color: #009b4d;
	font-size: 1.875rem;
	text-align: center;
	margin-bottom: 1.75rem;
}
.boxWrap .thanksArea .text {
	text-align: center;
	font-size: 1.125rem;
	line-height: 1.6;
}
.boxWrap .thanksArea .text span {
	/* display: inline-block; */
	/* text-align: left; */
}
@media screen and (max-width: 768px) {
	#mainTtlArea h1.contact img {
		width: 68%;
		max-width: 469px;
	}
	#mainArea .boxWrap {
		padding: 7% 0 5rem;
	}
	#mainArea .boxWrap p.lead {
		font-size: 1.375rem;
		padding-bottom: 2.5rem;
	}
	#mainArea .bgBox .formList.confirm > div:not(:first-child) {
		padding-top: 1.5rem;
		margin-top: 1rem;
	}
	#mainArea .bgBox .formList div.formTtl {
		width: 100%;
		order: 1;
		font-size: 1.5rem;
		padding-left: 0;
		font-weight: bold;
		height: auto;
		/* padding-top: 0.5rem; */
		margin-bottom: 0.75rem;
	}
	#mainArea .bgBox .formList div.formTtl .label {
		font-size: 1.25rem;
		width: 3.75rem;
		height: 1.875rem;
		position: static;
		margin-right: 0.5rem;
	}
	#mainArea .bgBox .formList .formDetail {
		order: 3;
		padding-left: 0;
		width: 100%;
	}
	#mainArea .bgBox .formList .errTextArea {
		order: 2;
		padding-left: 0;
		font-size: 1.125rem;
	}
	#mainArea .bgBox .formList .formDetail .inputWrap.m ,
	#mainArea .bgBox .formList .formDetail .inputWrap.l {
		max-width: 100%
	}
	#mainArea .bgBox .formList .formDetail .inputWrap {
		margin-bottom: 0.5rem
	}
	#mainArea .bgBox .formList .formDetail .text {
		/* padding: 0.5rem 0; */
		/* margin: 0; */
		/* margin-bottom: -0.5rem; */
	}
	.bgBox #mailConf {
		font-size: 2.5rem
	}
	#mainArea .contactBtnArea .consentArea {
		font-size: 1.375rem;
		padding-top: 5%;
	}
	.consentArea #consent {
		max-width: 18.75rem;
		width: 100%;
		height: 4.375rem;
	}
	.consentArea #consent .inputWrap {
		font-size: 1.5rem;
	}
	.consentArea #consent .inputWrap .input {
		
	}
	#mainArea .bgBox .formList .formDetail .inputWrap .confText {
		font-size: 1.75rem;
	}
	.boxWrap .thanksArea .leadText {
		font-size: 2rem;
	}
	.boxWrap .thanksArea .text {
		font-size: 1.375rem;
	}
}

.btnWrap {
	display: flex;
	justify-content: center;
	padding-top: 2.5rem;
	width: 50%;
	max-width: 25rem;
}
.btnWrap.largeBtn {
	width: 75%;
	max-width: 37.5rem;
}
.btnWrap.left {
	position: absolute;
	left: 0;
	max-width: 13.75rem;
	margin-right: auto;
	width: 25%;
}
.btnWrap .btn {
	display: flex;
	height: 5rem;
	width: 100%;
	font-size: 1.25rem;
	color: #fff;
	align-items: center;
	justify-content: center;
	border-radius: 5px;
	overflow: hidden;
	border: none;
	outline: none;
	font-weight: bold;
	cursor: pointer;
	transition: .25s background;
	position: relative;
	text-align: center;
}
.btnWrap .btn.off {
	/* opacity: 0.75; */
	background: #999!important;
	cursor: default;
	pointer-events: none;
}
.btnWrap .btn.cType1 {
	background: #005344;
}
.btnWrap .btn.cType1:hover {
	background: transparent;
}
.btnWrap .btn.cType2 {
	background: #777;
}
.btnWrap .btn.cType2:hover {
	background: #333;
}
.btnWrap .btn.cType1:before {
	content: "";
	display: block;
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	background: rgb(124,209,8);
	background: linear-gradient(120deg, rgba(124,209,8,1) 0%, rgba(0,155,77,1) 100%);
}
.btnWrap .btn.iconL,
.btnWrap .btn.iconR {
	padding: 1rem 2rem
}
.btnWrap .btn.iconR:after {
	content: "→";
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 90%;
	position: absolute;
	right: 1rem;
	top: 50%;
	transform: translateY(-50%);
	/* translate: 0 -50%; */
}
.btnWrap .btn.iconL:after {
	content: "←";
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 90%;
	position: absolute;
	left: 1rem;
	top: 50%;
	transform: translateY(-50%);
	/* translate: 0 -50%; */
}
@media screen and (max-width: 768px) {
	.btnWrap {
		width: 100%;
		max-width: 31.25rem;
	}
	.btnWrap.largeBtn {
		width: 100%;
		max-width: 50rem;
	}
	.btnCol .btnWrap {
		width: 45%;
		max-width: 100%
	}
	.btnWrap.left {
		position: static;
		margin: 0;
	}
	#mainArea .contactBtnArea.btnCol {
		justify-content: space-between;
	}
	.btnWrap .btn {
		width: 100%;
		/* max-width: 31.25rem; */
		font-size: 1.75rem;
		border-radius: 0.625rem;
		min-height: 5.625rem;
		font-weight: 500;
		height: auto;
	}
}
.dilb {
    display: inline-block;
}

.fll {
    float: left;
}

.tal {
    text-align: left;
}

.tac {
    text-align: center;
}

.tar {
    text-align: right;
}

.small {
    /* font-size: 90% */
}
.orange {
    color: #f59b00
}
.mt0 {margin-top: 0 !important;}
.mt10 {margin-top: 0.625rem !important;}
.mt20 {margin-top: 1.25rem !important;}
.mt30 {margin-top: 1.875rem !important;}
.mt40 {margin-top: 2.5rem !important;}
.mt50 {margin-top: 3.125rem !important;}
.mt60 {margin-top: 3.75rem !important;}
.mt70 {margin-top: 4.375rem !important;}
.mt80 {margin-top: 5rem !important;}
.mt90 {margin-top: 5.625rem !important;}
.mt100 {margin-top: 6.25rem !important;}

.mb0 {margin-bottom: 0 !important;}
.mb10 {margin-bottom: 0.625rem !important;}
.mb20 {margin-bottom: 1.25rem !important;}
.mb30 {margin-bottom: 1.875rem !important;}
.mb40 {margin-bottom: 2.5rem !important;}
.mb50 {margin-bottom: 3.125rem !important;}
.mb60 {margin-bottom: 3.75rem !important;}
.mb70 {margin-bottom: 4.375rem !important;}
.mb80 {margin-bottom: 5rem !important;}
.mb90 {margin-bottom: 5.625rem !important;}
.mb100 {margin-bottom: 6.25rem !important;}

.pb0 {padding-bottom: 0!important;}

.w1p {width: 1%!important;}
.w2p {width: 2%!important;}
.w3p {width: 3%!important;}
.w4p {width: 4%!important;}
.w5p {width: 5%!important;}
.w6p {width: 6%!important;}
.w7p {width: 7%!important;}
.w8p {width: 8%!important;}
.w9p {width: 9%!important;}
.w10p {width: 10%!important;}
.w11p {width: 11%!important;}
.w12p {width: 12%!important;}
.w13p {width: 13%!important;}
.w14p {width: 14%!important;}
.w15p {width: 15%!important;}
.w16p {width: 16%!important;}
.w17p {width: 17%!important;}
.w18p {width: 18%!important;}
.w19p {width: 19%!important;}
.w20p {width: 20%!important;}
.w21p {width: 21%!important;}
.w22p {width: 22%!important;}
.w23p {width: 23%!important;}
.w24p {width: 24%!important;}
.w25p {width: 25%!important;}
.w26p {width: 26%!important;}
.w27p {width: 27%!important;}
.w28p {width: 28%!important;}
.w29p {width: 29%!important;}
.w30p {width: 30%!important;}
.w31p {width: 31%!important;}
.w32p {width: 32%!important;}
.w33p {width: 33%!important;}
.w34p {width: 34%!important;}
.w35p {width: 35%!important;}
.w36p {width: 36%!important;}
.w37p {width: 37%!important;}
.w38p {width: 38%!important;}
.w39p {width: 39%!important;}
.w40p {width: 40%!important;}
.w41p {width: 41%!important;}
.w42p {width: 42%!important;}
.w43p {width: 43%!important;}
.w44p {width: 44%!important;}
.w45p {width: 45%!important;}
.w46p {width: 46%!important;}
.w47p {width: 47%!important;}
.w48p {width: 48%!important;}
.w49p {width: 49%!important;}
.w50p {width: 50%!important;}
.w51p {width: 51%!important;}
.w52p {width: 52%!important;}
.w53p {width: 53%!important;}
.w54p {width: 54%!important;}
.w55p {width: 55%!important;}
.w56p {width: 56%!important;}
.w57p {width: 57%!important;}
.w58p {width: 58%!important;}
.w59p {width: 59%!important;}
.w60p {width: 60%!important;}
.w61p {width: 61%!important;}
.w62p {width: 62%!important;}
.w63p {width: 63%!important;}
.w64p {width: 64%!important;}
.w65p {width: 65%!important;}
.w66p {width: 66%!important;}
.w67p {width: 67%!important;}
.w68p {width: 68%!important;}
.w69p {width: 69%!important;}
.w70p {width: 70%!important;}
.w71p {width: 71%!important;}
.w72p {width: 72%!important;}
.w73p {width: 73%!important;}
.w74p {width: 74%!important;}
.w75p {width: 75%!important;}
.w76p {width: 76%!important;}
.w77p {width: 77%!important;}
.w78p {width: 78%!important;}
.w79p {width: 79%!important;}
.w80p {width: 80%!important;}
.w81p {width: 81%!important;}
.w82p {width: 82%!important;}
.w83p {width: 83%!important;}
.w84p {width: 84%!important;}
.w85p {width: 85%!important;}
.w86p {width: 86%!important;}
.w87p {width: 87%!important;}
.w88p {width: 88%!important;}
.w89p {width: 89%!important;}
.w90p {width: 90%!important;}
.w91p {width: 91%!important;}
.w92p {width: 92%!important;}
.w93p {width: 93%!important;}
.w94p {width: 94%!important;}
.w95p {width: 95%!important;}
.w96p {width: 96%!important;}
.w97p {width: 97%!important;}
.w98p {width: 98%!important;}
.w99p {width: 99%!important;}
.w100p {width: 100%!important;}

.fc-red { color: #eb1c24}

@media screen and (max-width: 1000px) {
	.o1000 {display: none;}
}

@media screen and (min-width: 1001px) {
	.u1000 {display: none;}
}


@media screen and (max-width: 768px) {
	.pc {display: none;}
}

@media screen and (min-width: 769px) {
	.sp {display: none;}
}
@media screen and (max-width: 500px) {
	.o500 {display: none;}
}

@media screen and (min-width: 501px) {
	.u500 {display: none;}
}