@charset "UTF-8";
/* ----------------------------------------
common
---------------------------------------- */
.pagebody {
	width: 1000px;
	margin: auto;
	overflow: hidden;
}
.m0 {
	margin: 0 !important;
}
.mb0 {
	margin-bottom: 0 !important;
}
.mb10 {
	margin-bottom: 10px !important;
}
.mb20 {
	margin-bottom: 20px !important;
}
.mb30 {
	margin-bottom: 30px !important;
}
.mb40 {
	margin-bottom: 40px !important;
}
.mb50 {
	margin-bottom: 50px !important;
}
.mt10 {
	margin-top: 10px !important;
}
.mt20 {
	margin-top: 20px !important;
}
.mt30 {
	margin-top: 30px !important;
}
.mt40 {
	margin-top: 40px !important;
}
.mt50 {
	margin-top: 50px !important;
}
a:link, a:visited {
	color: #000;
	text-decoration: underline;
}
a:hover, a:active {
	color: #000;
	text-decoration: none;
}
a:hover img {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
a img {
	transition: all 0.3s linear 0s;
}
/* ----------------------------------------
head
---------------------------------------- */
header {
	height: 800px;
	background: url(../images/top/topimg.webp) no-repeat center top;
	background-size: auto 800px;
	box-sizing: border-box;
	padding-left: 2%;
}
header h1 {
	font-size: 16px;
	padding-top: 20px;
	margin-bottom: 5px;
}
header #logo {
	width: 250px;
}
header #logo img {
	width: 100%;
	height: auto;
}
header h2 {
	position: relative;
	top: 150px;
	font-size: 46px;
	line-height: 1.4em;
}
header h3 {
	position: relative;
	top: 170px;
	font-size: 18px;
	line-height: 1.6em;
}
header #contact {
	position: absolute;
	right: 0px;
	width: 200px;
	height: 100px;
	top: 0;
}
header #contact a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	color: #FFF;
	padding-top: 35px;
	box-sizing: border-box;
	background: #0077ff;
	transition: all 0.3s linear 0s;
	text-decoration: none;
}
header #contact a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}

.header-next{
	height:400px;
}
.header-next h2 {
    position: relative;
    top: 100px;
    font-size: 46px;
    line-height: 1.4em;
	padding-left:10%;
}
/* ----------------------------------------
お悩み
---------------------------------------- */
section.solve-problems {
	font-size: 20px;
	line-height: 1.45;
	padding: 4em 0 3.6em;
	font-weight: 700;
	width: calc(100% - 2em);
	max-width: 1080px;
	margin: 0 auto;
	text-align: center;
}
section.solve-problems .title {
	letter-spacing: 1.68px;
	color: inherit;
	text-align: center;
	font-weight: bold;
	color: #0077ff;
	font-size: 1.6em;
	padding-bottom: 12px;
	border-bottom: 3px solid currentColor;
	max-width: 420px;
	margin: 0 auto;
}
section.solve-problems .title-2 {
	font-size: 2em;
	margin-top: 16px;
	text-align: center;
	letter-spacing: 0.04em;
	margin-bottom: 1em;
}
section.solve-problems .problems {
	display: flex;
	justify-content: space-between;
	align-items: stretch;
}
section.solve-problems .problems .problem {
	width: calc((100vw - 64px - 2em) / 3);
	max-width: 320px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
section.solve-problems .problems .problem .text {
	font-weight: 400;
	background: #f5f5f5;
	border-radius: 16px;
	padding: 2em 1em;
	text-align: center;
	position: relative;
}
section.solve-problems .problems .problem .text:after {
	content: '';
	position: absolute;
	width: 52px;
	height: 52px;
	background: url(../images/top/bubbles.webp) top right no-repeat;
	background-size: contain;
	top: calc(100% + 12px);
	right: 12px;
}
section.solve-problems .problems .problem .image {
	flex-shrink: 0;
	width: 145px;
	height: 200px;
	background-size: contain;
	margin: 10px auto 0;
	background-repeat: no-repeat;
	background-position: center top;
}
section.solve-problems .problems .problem .image.user-1 {
	background-image: url(../images/top/user01.webp);
}
section.solve-problems .problems .problem .image.user-2 {
	background-image: url(../images/top/user02.webp);
}
section.solve-problems .problems .problem .image.user-3 {
	background-image: url(../images/top/user03.webp);
}
section.solve-problems .solution {
	text-align: center;
	margin: 80px 0 0;
}
section.solve-problems .solution span {
	display: inline-block;
	font-size: 24px;
	padding: 8px 16px;
	color: #fff;
	background: #07f;
	border-radius: 16px;
	position: relative;
}
section.solve-problems .solution span:after {
	content: '';
	position: absolute;
	top: calc(100% - 7px);
	left: calc(50% - 50px);
	width: 0;
	height: 0;
	border: solid #07f;
	border-width: 25px 50px;
	border-color: #07f transparent transparent transparent;
}
/* ----------------------------------------
お気軽にご相談下さい
---------------------------------------- */
section.solution-banner {
    position: relative;
    background: linear-gradient(207.4deg, #07f -29.3%, #394dee 131.9%, #6d73d7 131.9%);
    color: #fff;
    height: 187px;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: 0.04em;
    display: flex;
    justify-content: center;
    align-items: center;
}
section.solution-banner .banner-pc {
    display: flex;
    align-items: center;
    padding: 0 1em;
}
section.solution-banner .circle {
    width: 150px;
    height: 150px;
    color: #07f;
    background: #f2f6fb;
    border-radius: 50%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    font-size: 18px;
    margin-right: 48px;
}
section.solution-banner .circle:after {
    content: '';
    position: absolute;
    top: 99px;
    left: 132px;
    width: 0;
    height: 0;
    border: solid;
    border-width: 25px 17px;
    border-color: #f2f6fb transparent transparent transparent;
    transform: rotate(-57deg);
}
section.solution-banner .banner-pc .right {
    align-self: flex-end;
}
section.solution-banner .banner-pc .heading {
    font-size: 32px;
	color:#FFF;
}
section.solution-banner .banner-pc .short-term-use {
    letter-spacing: 0.08em;
}
section.solution-banner .banner-pc .short-term-use .large-text {
    color: #ffdfb1;
    font-size: 48px;
    white-space: nowrap;
}
section.solution-banner .banner-pc .short-term-use small {
    color: #fff;
    font-size: 40px;
}
section.solution-banner .banner-sp {
    display: none;
    margin: 0 1em;
}
section.solution-banner .banner-sp .above {
    display: flex;
    align-items: flex-end;
    margin-top: -36px;
}
section.solution-banner .banner-sp .circle {
    width: 110px;
    height: 110px;
    font-size: 18px;
    margin-right: 16px;
}
section.solution-banner .banner-sp .heading {
    font-size: 24px;
}
section.solution-banner:after {
    content: '';
    position: absolute;
    top: calc(100% - 1px);
    left: calc(50% - 111px);
    width: 223px;
    height: 32px;
    background: url(../images/top/gradient_arrow.svg) 0 0 no-repeat;
    background-size: contain;
}
/* ----------------------------------------
サービス
---------------------------------------- */
section .english-title {
    font-weight: 700;
    color: #07f;
    font-size: 20px;
    line-height: 1.2;
    text-align: center;
    margin-bottom: 0.8em;
}
section .title {
    font-size: 40px;
    font-weight: 700;
    letter-spacing: 1.68px;
    line-height: 1.45;
    color: inherit;
    text-align: center;
}
section.service {
    font-size: 20px;
    line-height: 1.45;
    padding: 4em 0 8.5em;
    background: #f2f6fb;
}
section.service .features {
    width: calc(100% - 8em);
    max-width: 1080px;
    margin: 2.8em auto 0;
    display: flex;
}
section.service .features .feature {
    width: calc(100% / 3);
    background: #fff;
    text-align: center;
    margin: 1em;
    padding: 20px;
}
section.service .features .feature__title {
    font-size: 1.6em;
    font-weight: 700;
    color: #07f;
    height: 2.4em;
}
section.service .features .feature__image {
    height: 112px;
    background: url() 0 0 no-repeat;
    background-size: contain;
    flex-shrink: 0;
    background-position: center;
    margin: 1.6em;
}
section.service .features .feature__description {
    letter-spacing: 0.04em;
    margin-top: 1em;
    font-size: 0.8em;
    text-align: left;
}
section.service .items {
    width: calc(100% - 2em);
    max-width: 1080px;
    margin: 2.8em auto 0;
}
section.service .items .item {
    display: flex;
    background: #fff;
}
section.service .items .item__image {
    width: 500px;
    height: 300px;
    background: url() 0 0 no-repeat;
    background-size: contain;
    flex-shrink: 0;
}
section.service .items .item__right {
    padding: 40px 32px;
}
section.service .items .item__heading {
    display: flex;
    align-items: center;
    letter-spacing: 0.05em;
    font-weight: 700;
    color: #07f;
}
section.service .items .item__title {
    font-size: 1.6em;
}
section.service .items .item__description {
    letter-spacing: 0.04em;
    margin-top: 1em;
}
section.service .items .item+.item {
    margin-top: 4em;
}
section.service .items .item:nth-child(2n) {
    flex-direction: row-reverse;
}

/* ----------------------------------------
お問い合わせ
---------------------------------------- */
section.operator-banner {
    background: url( ),linear-gradient(207.4deg, #07f -29.3%, #394DEE 131.9%, #6D73D7 131.9%);
    background-size: contain;
}
section.operator-banner .operator-banner-inner {
    display: flex;
    max-width:1000px;
    color: #fff;
    height: 367px;
    font-size: 1.8em;
    margin: 0 auto;
}
section.operator-banner .operator-banner-inner .left {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding: 0.6em 0;
}
section.operator-banner .operator-banner-inner .left .messages {
    display: flex;
}
section.operator-banner .operator-banner-inner .left .messages .texts {
    display: block;
}
section.operator-banner .operator-banner-inner .left .messages .texts .title {
    line-height: 1.4;
    text-align: left;
    font-size: 38px;
    font-weight: 700;
	color:#FFF;
}
section.operator-banner .operator-banner-inner .left .messages .texts .description {
    line-height: 1.6;
	color:#FFF;
}
section.operator-banner .operator-banner-inner .left .messages .texts .description span {
    background: linear-gradient(transparent 80%, #FABA0F 80%);
	color:#FFF;
}
section.operator-banner .operator-banner-inner .left .messages .operator-sp {
    background: url(../images/top/contact01.webp) 0 0 no-repeat;
    background-size: contain;
}
section.operator-banner .operator-banner-inner .left .contact-button {
    display: flex;
    justify-content: space-between;
    justify-content: center;
}
section.operator-banner .operator-banner-inner .left .contact-button .button {
    padding: 0.8em 3em 0.9em 3em;
    border-radius: 73.5px;
    background-color: #fff;
    color: #FFF;
    display: inline-block;
    white-space: nowrap;
    font-weight: 700;
    margin: 0 0.4em;
	text-decoration:none;
	transition: all 0.3s linear 0s;
}
section.operator-banner .operator-banner-inner .left .contact-button .button:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
section.operator-banner .operator-banner-inner .left .contact-button .button .button-text{
	color:#FFF;
}
section.operator-banner .operator-banner-inner .left .contact-button .button.blue {
    color: #fff;
    background: transparent;
    border: 2px solid #fff;
}
section.operator-banner .operator-banner-inner .left .contact-button .button.yellow {
    background: linear-gradient(207.4deg, #6d73d7 0%, #f7c912 0%, #ff8600 100%);
    color: #fff;
}
section.operator-banner .operator-banner-inner .left>.last-warehouse-count-updated {
    font-size: 16px;
    line-height: normal;
    letter-spacing: 0.32px;
    text-align: right;
    position: absolute;
    right: 94px;
    margin-top: 300px;
    z-index: 1;
}
section.operator-banner .operator-banner-inner .right {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
section.operator-banner .operator-banner-inner .right .operator {
    width: 238px;
    height: 330px;
    align-self: flex-end;
    position: relative;
    background: url(../images/top/contact01.webp) center center no-repeat;
    background-size: contain;
}

/* ----------------------------------------
流れ
---------------------------------------- */
.usage-flow {
    width: 100%;
    background-color: #f6f6f6;
    background-image:url(../images/top/flow_bg01.webp),url(../images/top/flow_bg02.webp),url(../images/top/flow_bg03.webp),url(../images/top/flow_bg04.webp);
    background-position:5% 50px,5% 500px,90% 70px,95% 450px;
	background-size:150px auto,90px auto,160px auto,200px auto;
    background-repeat:no-repeat;
    font-size: 20px;
    line-height: 1.5;
    padding: 5em 0 5.7em;
    text-align: center;
}
.usage-flow .steps-wrapper {
    width: 976px;
    margin: 4em auto 0;
}
.usage-flow .steps-wrapper .steps {
    display: flex;
    justify-content: space-between;
    padding-left: 1.5em;
	box-sizing: border-box;
}
.usage-flow .steps-wrapper .step {
    width: 21%;
    border-radius: 16px;
    background-color: #fff;
    text-align: center;
    padding: 1.2em 1.4em 0.8em;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
	box-sizing: border-box;
}
.usage-flow .steps-wrapper .step__count {
    position: absolute;
    background: #07f;
    color: #fff;
    width: 1.58em;
    height: 1.58em;
    margin-left: -1.58em;
    margin-top: -1.58em;
    border-radius: 50%;
    font-size: 1.9em;
    font-weight: 700;
}
.usage-flow .steps-wrapper .step__title {
    font-size: 1em;
    font-weight: 700;
    color: #07f;
}
.usage-flow .steps-wrapper .step__icon {
    width: 72px;
    height: 72px;
    background-size: contain;
    margin: 8px auto 0;
	background-repeat:no-repeat;
	background-position:center center;
}
.usage-flow .steps-wrapper .annotation {
    font-size: 1.2em;
    line-height: 36px;
    letter-spacing: 1.67px;
    font-weight: 700;
    margin-top: 2em;
}

/* ----------------------------------------
利用シーン
---------------------------------------- */
section.scene_body {
    width: calc(100% - 2em);
    font-size: 20px;
    padding: 4em 0 8.5em;
    margin: 0 auto;
}
section.scene_body .scenes {
    width: calc(100% - 8em);
    max-width: 1080px;
    margin: 2.8em auto;
    display: flex;
}
section.scene_body .scenes .scene {
    width: calc(100% / 3);
    text-align: center;
    margin: 0.8em;
    background-color: #F2F6FB;
    max-width: 328px;
}
section.scene_body .scenes .scene__image {
    height: 197px;
    width: 100%;
    background: url() 0 0 no-repeat;
    background-size: contain;
    flex-shrink: 0;
    background-position: center;
}
section.scene_body .scenes .scene__description {
    letter-spacing: 0.04em;
    font-size: 28px;
    text-align: center;
    font-weight: 700;
    line-height: 1.5em;
    padding: 20px 0;
}
section.scene_body .scenes .scene__description .blue {
    color: #07f;
}
section.scene_body .product-line {
    width: calc(100% - 8em);
    max-width: 1080px;
    margin: 2.8em auto 0;
}
section.scene_body .product-line__title {
    height: 88px;
    background-color: #07f;
    font-size: 1.6em;
    text-align: center;
    line-height: 88px;
    font-weight: 700;
    color: #fff;
}
section.scene_body .product-line__image .image {
    display: block;
    height: 734px;
    width: 1080px;
	background-repeat:no-repeat;
    background-image: url(../images/top/scene04.webp);
    background-size: contain;
    background-position: top;
}
.scroll-hint-icon-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-height: 100%;
    pointer-events: none;
}
.scroll-hint-icon {
    position: absolute;
    top: calc(50% - 25px);
    left: calc(50% - 60px);
    box-sizing: border-box;
    width: 120px;
    height: 80px;
    border-radius: 5px;
    transition: opacity .3s;
    opacity: 0;
    background: rgba(0, 0, 0, .7);
    text-align: center;
    padding: 20px 10px 10px 10px;
}
.scroll-hint-icon:before {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: #FFF;
    vertical-align: middle;
    text-align: center;
    content: "";
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNS43NyIgaGVpZ2h0PSIzMC41MiIgdmlld0JveD0iMCAwIDI1Ljc3IDMwLjUyIj48dGl0bGU+44Ki44K744OD44OIIDM8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxwYXRoIGQ9Ik0yMS4zMywzMC41Mkg3Ljg1QTEuNTUsMS41NSwwLDAsMSw2LjMsMjlhMTIuNDYsMTIuNDYsMCwwLDAtLjYzLTQuNDIsMjUuMTYsMjUuMTYsMCwwLDAtNC4yNS01bC0uMDYtLjA2QTUsNSwwLDAsMSwwLDE1Ljg2YTMuNjQsMy42NCwwLDAsMSwxLjE3LTIuNjIsMy42MywzLjYzLDAsMCwxLDUuMTQuMDdWMy43N2EzLjc3LDMuNzcsMCwxLDEsNy41NCwwVjguMzNhMy4zNSwzLjM1LDAsMCwxLDEuMjYsMCwzLDMsMCwwLDEsMiwxLjIyLDMuNSwzLjUsMCwwLDEsMi0uMDYsMy4yMSwzLjIxLDAsMCwxLDIsMS41NCwzLjc0LDMuNzQsMCwwLDEsMywuNDdBNC4yMSw0LjIxLDAsMCwxLDI1Ljc0LDE1YzAsLjExLDAsLjI3LDAsLjQ2YTE5LjI2LDE5LjI2LDAsMCwxLS44NCw3Yy0uMTQuMzgtLjM2LjgxLS41NiwxLjIybC0uMTEuMjJjMCwuMDctLjA5LjE0LS4xNC4yMWE3LjEzLDcuMTMsMCwwLDAtMS4xNywyLjE3Yy0uMDYuNTYtLjA2LDIuMTUtLjA1LDIuNzFBMS41NSwxLjU1LDAsMCwxLDIxLjMzLDMwLjUyWk04LjYxLDI4LjIxaDEyYzAtLjcxLDAtMS43MS4wNy0yLjIzYTguNzQsOC43NCwwLDAsMSwxLjU5LTMuMjVsLjA2LS4xMmExMCwxMCwwLDAsMCwuNDYtMSwxNi44LDE2LjgsMCwwLDAsLjctNi4xMmMwLS4yMywwLS40MSwwLS41NGgwYTIsMiwwLDAsMC0uNjQtMS41MiwxLjMzLDEuMzMsMCwwLDAtMS41NS4wOCwxLjEzLDEuMTMsMCwwLDEtMS4xOC4yOCwxLjE1LDEuMTUsMCwwLDEtLjc4LS45NCwxLjI2LDEuMjYsMCwwLDAtLjc1LTEuMTEsMSwxLDAsMCwwLTEuMTEuMjhsLS4xLjFhMS4xNSwxLjE1LDAsMCwxLTEuMTkuMjksMS4xNiwxLjE2LDAsMCwxLS43OC0uOTVjLS4wOS0uNjgtLjIxLS43Ny0uNy0uODdhLjgyLjgyLDAsMCwwLTEsLjQ4LDEuMTYsMS4xNiwwLDAsMS0yLjE2LS41OFYzLjc3YTEuNDYsMS40NiwwLDEsMC0yLjkyLDB2Ny44NWwwLDQuMzNhMS4xNywxLjE3LDAsMCwxLS44MywxLjExLDEuMTUsMS4xNSwwLDAsMS0xLjItLjM1bC0xLS45MWMtLjQ3LS40Mi0uNzMtLjY2LS44NC0uNzdhMS4zNSwxLjM1LDAsMCwwLTItLjEyTDIuNywxNWExLjMyLDEuMzIsMCwwLDAtLjM5LDFBMi41NywyLjU3LDAsMCwwLDMsMTcuODVsMCwwYTI3LjI0LDI3LjI0LDAsMCwxLDQuNyw1LjYyQTEyLjYzLDEyLjYzLDAsMCwxLDguNjEsMjguMjFaTTIzLjIsMjMuMzVaTTYuNTEsMTYuNTlaIiBmaWxsPSIjZmZmIi8+PC9nPjwvZz48L3N2Zz4=);
}
.scroll-hint-text {
    font-size: 10px;
    color: #FFF;
    margin-top: 5px;
}
.scroll-hint-icon:after {
    content: "";
    width: 34px;
    height: 14px;
    display: block;
    position: absolute;
    top: 10px;
    left: 50%;
    margin-left: -20px;
    background-repeat: no-repeat;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMy4yOSIgaGVpZ2h0PSIxMi4wMiIgdmlld0JveD0iMCAwIDMzLjI5IDEyLjAyIj48dGl0bGU+44Ki44K744OD44OIIDE8L3RpdGxlPjxnIGlkPSLjg6zjgqTjg6Tjg7xfMiIgZGF0YS1uYW1lPSLjg6zjgqTjg6Tjg7wgMiI+PGcgaWQ9IuODrOOCpOODpOODvF8xLTIiIGRhdGEtbmFtZT0i44Os44Kk44Ok44O8IDEiPjxsaW5lIHgxPSIxLjg1IiB5MT0iNi4wMSIgeDI9IjEwLjQiIHkyPSI2LjAxIiBmaWxsPSIjZmZmIi8+PHBhdGggZD0iTTEwLjQsNy4xN0gxLjg1YTEuMTYsMS4xNiwwLDEsMSwwLTIuMzFIMTAuNGExLjE2LDEuMTYsMCwxLDEsMCwyLjMxWiIgZmlsbD0iI2ZmZiIvPjxwYXRoIGQ9Ik03LjQsMTJhMS4xNSwxLjE1LDAsMCwxLS43Mi0uMjVsLTYuMjUtNUExLjIsMS4yLDAsMCwxLDAsNS44NywxLjE0LDEuMTQsMCwwLDEsLjQ2LDVMNi43LjIzQTEuMTYsMS4xNiwwLDAsMSw4LjEsMi4wOEwzLDUuOTEsOC4xMiwxMEExLjE2LDEuMTYsMCwwLDEsNy40LDEyWiIgZmlsbD0iI2ZmZiIvPjxsaW5lIHgxPSIzMS40NSIgeTE9IjYuMDEiIHgyPSIyMi44OSIgeTI9IjYuMDEiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMzEuNDUsNy4xN0gyMi44OWExLjE2LDEuMTYsMCwxLDEsMC0yLjMxaDguNTZhMS4xNiwxLjE2LDAsMCwxLDAsMi4zMVoiIGZpbGw9IiNmZmYiLz48cGF0aCBkPSJNMjUuOSwxMmExLjE4LDEuMTgsMCwwLDEtLjkxLS40M0ExLjE3LDEuMTcsMCwwLDEsMjUuMTcsMTBsNS4wOS00LjA1TDI1LjIsMi4wOEExLjE2LDEuMTYsMCwwLDEsMjYuNTkuMjNMMzIuODQsNWExLjE2LDEuMTYsMCwwLDEsLjQ1LjkxLDEuMTQsMS4xNCwwLDAsMS0uNDMuOTJsLTYuMjQsNUExLjE3LDEuMTcsMCwwLDEsMjUuOSwxMloiIGZpbGw9IiNmZmYiLz48L2c+PC9nPjwvc3ZnPg==);
    opacity: 0;
    transition-delay: 2.4s;
}
section.scene_body .product-line__note {
    font-size: 1em;
    text-align: center;
    font-weight: 700;
    margin-top: 2em;
}
/* ----------------------------------------
料金プラン
---------------------------------------- */
section.price-info {
    font-size: 20px;
    line-height: 1.5;
    padding: 5.3em 0 7.6em;
    background-color: #f2f6fb;
    text-align: center;
}
section.price-info {
    background-color: #fff;
    font-size: 20px;
    line-height: 1.45;
}
section.price-info .plan .img{
	width:1000px;
	margin:auto;
}
section.price-info .plan .price{
	width:1000px;
	margin:0 auto 2em;
}
section.price-info .plan .img img{
	width:100%;
	margin:auto;
}
section.price-info .plan .price img{
	width:100%;
	margin:auto;
}
section.price-info .plan {
    width: calc(100% - 2em);
    max-width: 1080px;
    margin: 2em auto;
}
section.price-info .plan .plan__header {
    width: 100%;
    height: 322px;
	background-size: contain;
	background-repeat:no-repeat;
	background-position:center top;
}

section.price-info .plan.plan-1 .plan__header {
    position: relative;
}
section.price-info .plan.plan-1 .plan__benefit .title{
    color: #07f;
    font-size: 1.2em;
    margin-top: 3em;
}
section.price-info .plan.plan-1 .plan__benefit .contents {
    display: flex;
    justify-content: center;
    margin: 2.8em auto 0;
}
section.price-info .plan.plan-1 .plan__benefit .benefit {
    position: relative;
    background: #f2f6fb;
    border-radius: 8px;
    padding: 1.2em 0.5em 1.6em 2.5em;
    width: 43%;
    max-width: 400px;
    font-weight: 700;
}
section.price-info .plan.plan-1 .plan__benefit .benefit+.benefit {
    margin-left: 4em;
}
section.price-info .plan.plan-1 .plan__benefit .benefit__number {
    background: #f9d778;
    width: 1.8em;
    height: 1.8em;
    position: absolute;
    left: -0.8em;
    top: -0.4em;
    font-size: 2em;
    color: #1c63f8;
    line-height: 1.8;
    text-align: center;
    font-weight: 700;
}
section.price-info .plan.plan-1 .plan__benefit .benefit__title {
    font-size: 1.2em;
    text-align: left;
}
section.price-info .plan.plan-1 .plan__benefit .benefit.benefit-1 .benefit__illustration {
    width: 98%;
    max-width: 281px;
    height: 91px;
    background: url(../images/top/merit01.webp) 0 0 no-repeat;
    background-size: contain;
    margin: 2em auto 0;
}
section.price-info .plan.plan-1 .plan__benefit .benefit.benefit-2 .benefit__illustration {
    width: 98%;
    max-width: 294px;
    height: 126px;
    background: url(../images/top/merit02.webp) 0 0 no-repeat;
    background-size: contain;
    margin: 2em auto 0;
}
section.price-info section.price-cards {
    padding: 0;
}
section.price-info .plan.plan-1 .price-cards .title,section.price-info .plan.plan-1 .shipping-price .title {
    color: #07f;
    font-size: 1.2em;
    margin-top: 3em;
}
section.price-info .plan.plan-1 .price-cards__image {
    width: 98%;
    width: 100%;
    height: 1123px;
    background: url(../images/top/price02.webp) 0 0 no-repeat;
    background-size: contain;
    background-position: center top;
    margin: 2em auto;
}
section.price-info .plan .contact-button {
    margin: 2em 0 4em;
}
section.price-info .plan .contact-button .button {
    padding: 0.8em 3em 0.9em 3em;
    border-radius: 73.5px;
    background-color: #fff;
    color: #07f;
    display: inline-block;
    white-space: nowrap;
    font-weight: 700;
	transition: all 0.3s linear 0s;
	text-decoration:none;
}
section.price-info .plan .contact-button .button:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
section.price-info .plan .contact-button .button.yellow {
    background: linear-gradient(207.4deg, #6d73d7 0%, #f7c912 0%, #ff8600 100%);
    color: #fff;
}
/* ----------------------------------------
お客様の声
---------------------------------------- */
section.voice-of-customer {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: 0.05em;
    padding: 3em 0;
}
section.voice-of-customer .contents {
    width: calc(100% - 2em);
    max-width: 1080px;
    margin: 0 auto;
}
section.voice-of-customer .contents .cases {
    width: 100%;
    max-width: 718px;
    margin: 0 auto;
}
section.voice-of-customer .contents .cases .case {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-top: 2em;
}
section.voice-of-customer .contents .cases .case .icon {
    width: 134px;
    height: 134px;
    background: url() 0 0 no-repeat;
    background-size: contain;
    flex-shrink: 0;
}
section.voice-of-customer .contents .cases .case .voice {
    flex-grow: 1;
    margin-left: 1.6em;
}
section.voice-of-customer .contents .cases .case .voice .heading {
    font-weight: 700;
}
section.voice-of-customer .contents .cases .case .voice .heading .sector {
    font-size: 0.8em;
    margin-bottom: 0.5em;
}
section.voice-of-customer .contents .cases .case .voice .description {
    font-size: 14px;
    margin: 16px 0 0 0;
}
/* ----------------------------------------
footer
---------------------------------------- */
footer{
    font-size: 20px;
    line-height: 1.5;
    padding:2em 0;
    background-color: #f2f6fb;
    text-align: center;
}
footer .contents{
	max-width: 1080px;
	margin:auto;
	overflow:hidden;
}
footer .contents .logo{
	width:250px;
	float:left;
	font-size:12px;
	text-align:left;
}
footer .contents .logo a{
	width:200px;
	height:auto;
	display:block;
	margin-bottom:10px;
}
footer .contents .logo img{
	width:100%;
	height:auto;
}
footer .contents ul{
	float:right;
	width:70%;
	text-align:right;
}
footer .contents ul li{
	display:inline-block;
	margin-right:20px;
	font-size:16px;
}
footer .contents ul li a{
	text-decoration:none;
}
footer .contents ul li a:hover{
	text-decoration:underline;
}
/* ----------------------------------------
fadein
---------------------------------------- */
.effect-fadein {
	opacity: 0;
	transform: translate(0, 30px);
	transition: all 500ms
}
.effect-fadein.effect-scroll {
	opacity: 1;
	transform: translate(0, 0)
}
/* ----------------------------------------
pagetop
---------------------------------------- */
#pageTop {
	bottom: 0;
	right: 0;
	display: block;
	position: fixed
}
#pageTop a {
	width: 100px;
	height: 100px;
	display: block;
	color: #fff;
	background: #bce0fd;
	background: rgba(188,224,253,0.2);
	position: relative;
	overflow: hidden;
	z-index: 999
}
#pageTop a:hover {
	background: rgba(188,224,253,0.4)
}
#pageTop a:hover:after {
	margin-top: -8px
}
#pageTop a:after {
	content: '';
	width: 14px;
	height: 14px;
	border: 0;
	border-top: solid 2px #7199c6;
	border-right: solid 2px #7199c6;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -5px;
	margin-left: -8px;
	transform: rotate(-45deg);
	transition: all 0.4s ease
}

/* ----------------------------------------
breadcrumb
---------------------------------------- */
.breadcrumb ol {
	padding: 0;
	text-align: left;
	max-width: 1080px;
	margin: 2em auto;
}
.breadcrumb  ol li {
	display: inline;
	font-size:16px;
}
.breadcrumb  ol li:after {
	content: '>';
	padding: 0 0.4em;
	color: #CCC;
}
.breadcrumb  ol li:last-child:after {
	content: ''
}
.breadcrumb  ol li a {
	color: #0079ff;
	text-decoration: none;
	font-size:16px;
}
.breadcrumb  ol li a:hover {
	color: #0079ff;
}
/* ----------------------------------------
contact
---------------------------------------- */
.contact .contaForm {
	margin-top: 60px
}
.contaForm {
	width: 90%;
	padding: 60px 7.5%;
	background: #f0f5fa;
	border-radius: 20px 20px 20px 20px / 17px 17px 17px 17px;
	overflow: hidden;
	max-width: 800px;
	margin: 4em auto;
	text-align: left
}
.contaForm p {
	margin: 0 auto 20px
}
.contaForm p label {
	font-size: 20px;
	font-size: 1.25rem
}
.contaForm dl {
	max-width: 600px;
	margin: 0 auto
}
.contaForm dt {
	float: none;
	padding: .75em 0 0;
	font-weight: bold
}
.contaForm dt span {
	display: inline-block;
	background: #f15753;
	color: #fff;
	padding: 0 6px;
	border-radius: 4px;
	font-size: 12px;
font-size:.8rem;
	margin-left: 10px
}
.contaForm dd {
	padding: .5em 0 .75em;
	border-bottom: none
}
.contaForm input, .contaForm textarea{
	width: 92%!important;
	font-size: 20px;
	font-size: 1.25rem;
	border: none;
	padding: 3%;
	border-radius: 10px
}
.contaForm select {
	width: 98%;
	font-size: 20px;
	font-size: 1.25rem;
	border: none;
	padding: 3%;
	border-radius: 10px;
	appearance: none;
}

.contaForm textarea {
	height: 6.5em!important;
}
.contaForm .formBtn input {
	display: block;
	text-align: center;
	background: #07f;
	color: #fff;
	line-height: 80px;
	font-size: 20px;
	font-size: 1.25rem;
	font-weight: bold;
	margin: 30px auto 0;
	padding: 0;
	max-width: 320px;
	border-radius: 50px
}
.contaForm .formBtn input:hover {
	opacity: 0.6;
	filter: alpha(opacity=60)
}

.contaForm .shise input {
	width: auto
}
/* ----------------------------------------
company
---------------------------------------- */
.gaiyo {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    align-items: center;
    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;
    align-items: flex-start;
	margin:4em auto;
	max-width:1080px;

}
.gaikan {
    -webkit-flex-basis: 35%;
    flex-basis: 35%;
    text-align: center;
}
.gaikan img{
	width:100%;
	height:auto;
	border-radius:20px;
}
.gaiyo dl {
    width: 100%;
    -webkit-flex-basis: 60%;
    flex-basis: 60%;
    border-top: 1px solid #ddd;
}
.gaiyo dl dt{
    width: 10em;
    float: left;
    padding: 30px 0;
    font-weight: bold;
}
.gaiyo dl dd{
    border-bottom: 1px solid #ddd;
    padding: 30px 0 30px 10em;
}