@charset "UTF-8";
/*
Theme Name: EYE CONTACT
Description: EYE CONTACT
Version: 2020.10
Author: YH
*/

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

* {
  outline: none; }

body {
  line-height: 1; }

h1, h2, h3, h4, h5, h6 {
  font-weight: normal; }

ol, ul {
  list-style: none; }

blockquote {
  quotes: none; }

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

del {
  text-decoration: line-through; }

/* tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th {
  text-align: left; }

a:focus {
  outline: none; }

a img {
  border: none; }

input, button, select, textarea {
  border-radius: 0; }

@media screen and (max-width: 767px) {
  input, button, select, textarea {
  }
}

/* ------------------------------------------
   Utility Class
------------------------------------------ */
.clearfix::after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
/*
Web fonts:
font-family: 'Montserrat', sans-serif;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Roboto', sans-serif;
*/

/* Style
-------------------------------------------------------------- */
body {
  height: 100%;
  font-size: 15px;
  line-height: 2.0em;
  font-weight: 500;
  color: #000;
  opacity: 0;
  -webkit-text-size-adjust: none;
  min-width: 1080px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  transition: opacity 0.6s ease;
  -webkit-print-color-adjust: exact;
}
body.show {
	opacity: 1;
}
body p {
  color: inherit;
  font-size: inherit;
  line-height: 2em;
  font-weight: 500;
  }

a, a img {
  text-decoration: none;
  font-weight: 500;
  color: #000;
  transition: all 0.3s ease }

.pc_view a:hover {
	opacity: 0.75;
}

span {
	font-size: inherit;
	font-weight: inherit;
	color: inherit;
}
img {
  display: block;
  max-width: 100%;
  height: auto; }

h1, h2, h3, h4, h5, h6 {
  line-height: inherit; }

.non_pc {
  display: none !important; }

.f_en {
  font-family: 'Montserrat', sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
}
.f_en2 {
  font-family: 'Roboto', sans-serif;
  font-weight: 900;
  letter-spacing: 0.05em;
}

/* ===========================================================================================

	Common

=========================================================================================== */
.outline {
  position: relative;
  min-width: 1000px;
  overflow: hidden;
}
.main {
  z-index: 100;
  margin: 0 auto;
  position: relative;
  transition: opacity 0.3s ease;
  z-index: 100;
  overflow: hidden;
}


/* Header *******************************/
header {
  position: fixed;
  width: 100%;
  height: 80px;
  min-width: 1080px;
  z-index: 10000;
  top: -90px;
  left: 0;
  background: #fff;
  transition: top 0.3s ease;
}
header.show {
    top: 0;
}
header .logo {
  position: relative;
  float: left;
  width: 100px;
  padding: 10px 10px;
  margin: 1px 0 0 16px;
}
header .logo a {
  display: block;
}
header > p {
	float: left;
	line-height: 80px;
	margin-left: 20px;
}
header .gmenu {
	float: right;
}
.pc_view header .gmenu {
	opacity: 1 !important;
	display: block !important;
	height: auto !important;
}
header .gmenu ul {
	margin: 0;
}
header .gmenu ul li {
    float: left;
    margin-left: 10px;
}
header .gmenu ul li:first-child {
    margin-left: 0;
}
header .gmenu ul li a {
    display: block;
    font-size: 14px;
    font-weight: 900;
    line-height: 80px;
    padding: 0 10px;
}
header .gmenu ul li.bt_sample a {
    background: #FFF100;
    line-height: 50px;
    border-radius: 100px;
    margin-top: 15px;
    padding: 0 20px 0 60px;
    position: relative;
}
header .gmenu ul li.bt_sample a:before {
	content: "";
	display: block;
	position: absolute;
    width: 34px;
    height: 22px;
    background: #000;
    left: 16px;
    top: 13px;
    border-radius: 100px;
}
header .gmenu ul li.bt_sample a:after {
	left: 30px;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #fff;
	border-width: 7px;
	margin-top: -8px;
	transform: scale(1, 0.7)
}
header .gmenu ul li.bt_contact {
	margin-left: 20px;
}
header .gmenu ul li.bt_contact a {
    font-size: 14px;
    background: #82D6F2;
    line-height: 20px;
    padding: 15px 20px 25px 20px;
    text-align: center;
    color: #0A617E;
    position: relative;
}
header .gmenu ul li.bt_contact a::before {
	left: 50%;
	bottom: 1px;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(136, 183, 213, 0);
	border-left-color: #4faecf;
	border-width: 8px;
	margin-left: -8px;
	transform: rotate(90deg) scale(1, 0.7);
}

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

}



/* Footer *******************************/
footer {
	position: relative;
	background: #fff;
	padding: 60px 0;
	box-sizing: border-box;
	z-index: 1000;
}
footer .text {
	text-align: center;
	line-height: 1em;
	font-size: 14px;
}
footer .text span {
	display: block;
	line-height: 1em;
	font-size: 21px;
	margin-top: 5px;
}
footer .logo {
    width: 94px; 
    margin: 25px auto 0 auto;
    display: block;
}
footer .copyright {
    font-size: 12px;
    text-align: center;
    padding-top: 20px;
    color: #aaa;
    letter-spacing: 0.05em;
}

/* ===========================================================================================

  Index

=========================================================================================== */
#index .main {
    position: relative;
}

#index h2 {
	text-align: center;
	font-size: 56px;
	line-height: 1em;
}
#index h2 span {
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	font-size: 18px;
	display: inline-block;
	line-height: 1em;
	margin-top: 20px;
	background: #FFF000;
	line-height: 46px;
	padding: 0 30px;
	font-weight: bold;
	border-radius: 100px;
}
#index .main > section {
    position: relative;
    z-index: 100;
}


/* Visual *********************************/
#index .visual {
	position: relative;
    height: 1000px;
}
#index .visual > .inner {
	position: fixed;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: #F3F2F1;
}
#index .visual .info {
	position: absolute;
	left: 50%;
	top: 47.5%;
	width: 547px;
	transform: translate(-50%, -50%);
}
#index .visual h1 {
	transform: scale(1.1);
	opacity: 0;
	transition: all ease 0.6s;
}
#index .visual.active h1  {
	transform: scale(1);
    opacity: 1;
}

#index .visual .copy {
	margin-top: 30px;
	text-align: center;
	opacity: 0;
	transition: opacity ease 0.6s;
}
#index .visual.active .copy {
    opacity: 1;
}
#index .visual .copy .line {
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding: 0 20px;
    letter-spacing: 0.05em;
}
#index .visual .copy .line::before {
	position: absolute;
	content: "";
    display: block;
    width: 0;
    height: 105%;
    background: #fff;
    left: 0;
    top: 0;
	transition: width ease 0.6s +0.6s;
}
#index .visual.active .copy .line::before {
    width: 100%;
}
#index .visual .copy .line + br + .line {
	margin-top: 15px;
	padding-right: 0;
}
#index .visual .copy .line + br + .line::before {
    transition-delay: 0.8s;
}
#index .visual .copy .line span {
    position: relative;
}
#index .visual .copy .line span span {
	color: #71bed7;
}
#index .visual .bt_scroll {
	display: block;
	font-size: 10px;
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity ease 0.6s +1.2s;
}
#index .visual.active .bt_scroll {
    opacity: 1;
}
#index .visual .bt_scroll::before {
    display: block;
    position: absolute;
    content: "";
    width: 7px;
    height: 44px;
    background: #fff;
    top: -7px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
    border-radius: 10px;
}

/* Intro *********************************/
#index .intro {
	position: relative;
	background: -moz-linear-gradient(top,  rgba(243,242,241,0) 0%, rgba(243,242,241,1) 24%, rgba(243,242,241,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(243,242,241,0) 0%,rgba(243,242,241,1) 24%,rgba(243,242,241,1) 100%);
	background: linear-gradient(to bottom,  rgba(243,242,241,0) 0%,rgba(243,242,241,1) 24%,rgba(243,242,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3f2f1', endColorstr='#f3f2f1',GradientType=0 );
    height: 1000px;
}
#index .intro .man {
	position: absolute;
	bottom: 0;
	width: auto;
	left: 50%;
	height: 86%;
	opacity: 0;
	transform: translate(-50%, 0);
	transition: opacity ease 0.6s +1.2s;
}
#index .visual.active + .intro .man {
	opacity: 1;
}
#index .intro .man .eye {
    display: block;
    position: absolute;
    width: 6%;
    height: 8%;
    left: 55.6%;
    top: 34.7%;
    transition: all ease 0.3s;
    transform: scale(1.5);
    opacity: 0;
}
#index .intro .man .eye.left {
	left: 37.9%;
	top: 37.2%;
}
#index .intro .man .eye img {
    animation: eye_anime 0.1s linear infinite alternate;
    -webkit-animation: eye_anime 0.1s linear infinite alternate;
}
#index .intro.active .man .eye {
    opacity: 1;
    transform: scale(1);
}
#index .intro.end .man::before,
#index .intro.end .man::after {
    /* opacity: 0; */
}
/*
#index .intro.active .man img {
	opacity: 0;
    transition: opacity ease 0.1s;
}
#index .intro.end .man img {
    opacity: 1;
}
*/
@keyframes eye_anime {
	0% { transform: rotate(10deg); }
	100% { transform: rotate(-10deg); }
}
@-webkit-keyframes eye_anime {
	0% { transform: rotate(10deg); }
	100% { transform: rotate(-10deg); }
}
#index .intro .man img {
    height: 100%;
    max-width: none;
}

/* What *********************************/
#index .what {
	background: url(../images/bg_what.jpg) no-repeat center center;
	background-size: cover;
    padding: 130px 0;
    transition: background-image 1s ease;
}
#index .what.active {
	background-image: url(../images/bg_what2.jpg);
}
#index .what > .inner {
    width: 700px;
    margin: 0 auto;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    padding: 89px 50px;
	transition: all ease 0.6s +0.6s;
	opacity: 0;
	top: 30px;
	position: relative;
}
#index .what.active > .inner {
	opacity: 1;
	top: 0;
}
#index .what .text {
	margin-top: 40px;
	font-size: 18px;
	line-height: 2.4em;
	text-align: center;
	letter-spacing: 0.05em
}
#index .what .text span {
    font-weight: bold;
    display: inline-block;
    background: -moz-linear-gradient(top,  rgba(159,215,232,0) 0%, rgba(159,215,232,0) 10%, rgba(159,215,232,1) 11%, rgba(159,215,232,1) 87%, rgba(159,215,232,1) 89%, rgba(159,215,232,0) 90%, rgba(159,215,232,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(159,215,232,0) 0%,rgba(159,215,232,0) 10%,rgba(159,215,232,1) 11%,rgba(159,215,232,1) 87%,rgba(159,215,232,1) 89%,rgba(159,215,232,0) 90%,rgba(159,215,232,0) 100%);
	background: linear-gradient(to bottom,  rgba(159,215,232,0) 0%,rgba(159,215,232,0) 10%,rgba(159,215,232,1) 11%,rgba(159,215,232,1) 87%,rgba(159,215,232,1) 89%,rgba(159,215,232,0) 90%,rgba(159,215,232,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fd7e8', endColorstr='#009fd7e8',GradientType=0 );
    padding: 0 10px;
}

/* Sample *********************************/
#index .sample {
	background: url(../images/bg_pattern.png) repeat center 15px;
	background-size: 290px auto;
	padding: 120px 0 0 0;
	background-color: #fff;
}
#index .sample .video {
	margin: 60px auto 0 auto;
	width: 960px;
	transform: scale(1.05);
	opacity: 0;
	transition: all ease 0.6s;
}
#index .sample .video.active  {
	transform: scale(1);
    opacity: 1;
}
#index .sample .video iframe {
    display: block;
}
#index .sample .point {
	margin-top: 130px;
	text-align: center;
}
#index .sample .point h3 {
	position: relative;
    font-size: 28px;
	line-height: 1em;
	font-weight: 900;
	letter-spacing: 0.1em;
}
#index .sample .point h3::before,
#index .sample .point h3::after {
	position: absolute;
	display: block;
	content: "";
	left: 50%;
	top: 15px;
    width: 4px;
    height: 60px;
    background: #000;
    margin-left: -187px;
    border-radius: 10px;
    transform: rotate(-45deg);
}
#index .sample .point h3::after {
    transform: rotate(45deg);
    margin-left: 184px;
}
#index .sample .point h3 span {
	font-size: 46px;
	line-height: 1em;
	display: block;
	margin-top: 15px;
}
#index .sample .point .fbox {
    display: flex;
    margin-top: 35px;
}
#index .sample .point .fbox .box {
	width: 33.33333%;
	background: #F3F2F0;
	box-sizing: border-box;
	padding: 100px 0;
	opacity: 0;
	transition: all ease 0.6s;
	top: 30px;
	position: relative;
}
#index .sample .point .fbox.active .box  {
    opacity: 1;
	top: 0px;
}
#index .sample .point .fbox .box:nth-child(2) {
	background-color: #E8E7E5;
	transition-delay: 0.2s;
}
#index .sample .point .fbox .box:nth-child(3) {
	transition-delay: 0.4s;
}
#index .sample .point .fbox .box .title {
	font-size: 32px;
	letter-spacing: 0.05em;
	font-weight: 900;
	background: url(../images/icon_point1.png) no-repeat center top;
	background-size: 99px auto;
	padding-top: 110px;
}
#index .sample .point .fbox .box:nth-child(2) .title {
	background-image: url(../images/icon_point2.png);
}
#index .sample .point .fbox .box:nth-child(3) .title {
	background-image: url(../images/icon_point3.png);
}
#index .sample .point .fbox .box .text {
    font-size: 16px;
    max-width: 300px;
    width: 90%;
    margin: 10px auto 0 auto;
    text-align: left;
}

/* Client *********************************/
#index .client {
    background: #fff;
}
#index .client > .inner {
    padding: 120px 0;
}
#index .client .text {
    text-align: center;
    font-size: 18px;
    margin-top: 50px;
    line-height: 2.2em;
    letter-spacing: 0.05em;
}
#index .client .text a {
    color: #59A2B9;
    text-decoration: underline;
}

/* Service *********************************/
#index .service {
	background: #A0D7E9;
}
#index .service > .inner {
    padding: 120px 0 240px 0;
}
#index .service .logo {
	width: 500px;
	margin: 45px auto  0 auto;
	transform: scale(1.1);
	opacity: 0;
	transition: all ease 0.6s;
}
#index .service .logo.active  {
	transform: scale(1);
    opacity: 1;
}
#index .service .lead {
	text-align: center;
	font-size: 34px;
	font-weight: 900;
	line-height: 1.7em;
	letter-spacing: 0.1em;
	margin-top: 30px;
	position: relative;
	z-index: 100
}
#index .service ol {
    width: 1000px;
    margin: 160px auto 0 auto;
    position: relative;
}
#index .service ol::before,
#index .service ol::after {
	display: block;
	position: absolute;
	content: "";
	width: 200px;
	height: 200px;
	background: url(../images/img_service_sub1.png) no-repeat center center;
	background-size: cover;
	top: -220px;
	right: 100px;
}
#index .service ol::after {
	background-image: url(../images/img_service_sub2.png);
	top: auto;
	bottom: -190px;
	right: 140px;
}
#index .service ol li {
    display: flex;
    justify-content: space-between;
    margin-top: 120px;
    position: relative;
    left: 30px;
}
#index .service ol li::before {
    position: absolute;
    content: "1";
    display: block;
    font-size: 200px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    z-index: 100;
    top: 50%;
    left: -140px;
    opacity: 0;
    transition: all 0.6s ease;
	margin-top: 20px;
}
#index .service ol li.active::before {
	opacity: 1;
	margin-top: 0;
}
#index .service ol li .img {
	width: 370px;
	position: relative;
}
#index .service ol li .img::before {
	display: block;
	position: absolute;
	content: "";
	width: 536px;
	height: 536px;
	background: url(../images/img_service1_bg.png) no-repeat center center;
	background-size: cover;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%) scale(1.1);
    opacity: 0;
    transition: all 0.6s ease;
}
#index .service ol li.active .img::before {
	transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}
#index .service ol li .img::after {
	display: block;
	position: absolute;
	content: "";
	width: 150px;
	height: 150px;
	background: url(../images/img_service1_2.png) no-repeat center center;
	background-size: cover;
	right: -100px;
	bottom: -100px;
}
#index .service ol li .img img {
    position: relative;
    transform: scale(0.9);
    opacity: 0;
    transition: all 0.6s ease;
}
#index .service ol li.active .img img {
    transform: scale(1);
    opacity: 1;
}
#index .service ol li .info {
	width: 580px;
	position: relative;
    margin-top: 40px;
}
#index .service ol li .info .title {
	
}
#index .service ol li .info .title .line {
    font-size: 26px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding: 0 20px;
    letter-spacing: 0.05em;
}
#index .service ol li .info .title .line::before {
	position: absolute;
	content: "";
    display: block;
    width: 0;
    height: 105%;
    background: #FFF000;
    left: 0;
    top: 0;
    transition: width 0.3s +0.4s ease;
}
#index .service ol li .info .title .line:nth-child(3)::before {
	transition-delay: 0.5s;
}
#index .service ol li .info .title .line:nth-child(5)::before {
	transition-delay: 0.6s;
}
#index .service ol li .info .title .line:nth-child(7)::before {
	transition-delay: 0.7s;
}
#index .service ol li.active .info .title .line::before {
    width: 100%;
}
#index .service ol li .info .title br + .line {
	margin-top: 15px;
}
#index .service ol li .info .title .line span {
    position: relative;
}
#index .service ol li .info .title .line span span {
	color: #71bed7;
}
#index .service ol li .info .text {
    font-size: 16px;
    margin-top: 32px;
}
#index .service ol li:first-child {
    margin-top: 0;
}
#index .service ol li:nth-child(2) {
	flex-direction: row-reverse;
	left: -30px;
}
#index .service ol li:nth-child(2):before {
    content: "2";
    left: auto;
    right: -140px;
}
#index .service ol li:nth-child(2) .img::after {
	background-image: url(../images/img_service2_2.png);
	right: auto;
	left: -100px;
}
#index .service ol li:nth-child(2) .info {
	margin-left: 40px;
}
#index .service ol li:nth-child(3):before {
    content: "3";
}
#index .service ol li:nth-child(3) .img::after {
	background-image: url(../images/img_service3_2.png);
}

#index .scene {
	position: relative;
}
#index .scene img {
	width: 100%;
}

/* Plan *********************************/
#index .plan {background: #fff;}
#index .plan > .inner {
	width: 1100px;
    padding: 120px 0 120px 0;
    margin: 0 auto 0 auto;
}
#index .plan .lead {
	text-align: center;
	font-size: 18px;
	margin-top: 45px;
	letter-spacing: 0.05em;
}
#index .plan .plan_box {
	margin-top: 60px;
}
#index .plan .plan_box .box {
    background: #D4EDF5;
    padding: 55px;
    margin-top: 40px;
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: all 0.6s ease;
    top: 20px;
    position: relative;
}
#index .plan .plan_box .box.active {
	top: 0;
	opacity: 1;
}
#index .plan .plan_box .box .info {
    width: 265px;
    position: relative;
}
#index .plan .plan_box .box .info .name {
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0.05em;
}
#index .plan .plan_box .box .info .name span {
	font-size: 42px;
	display: block;
	margin-bottom: 5px;
}
#index .plan .plan_box .box .info .fee {
	font-size: 30px;
	border: 2px solid #000;
	background: #fff;
	text-align: center;
	line-height: 70px;
	border-radius: 6px;
	position: absolute;
	bottom: 0;
	width: 100%;
	left: 0;
}
#index .plan .plan_box .box .detail {
    width: 676px;
    display: flex;
    justify-content: space-between;
}
#index .plan .plan_box .box .detail > div {
	background: #fff;
	width: calc(50% - 1px);
	box-sizing: border-box;
	padding: 25px 30px
}
#index .plan .plan_box .box .detail .label {
    background: #F2F2F2;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    border-radius: 100px;
    width: 240px;
    margin: 0 auto;
}
#index .plan .plan_box .box .detail .num {
    font-size: 12px;
    text-align: center;
    margin-top: 25px;
}
#index .plan .plan_box .box .detail .num span {
    font-size: 32px;
    font-weight: bold;
    color: #2C9EC3;
    line-height: 1em;
    margin-right: 5px;
    display: inline-block;   
    letter-spacing: 0.05em;
}
#index .plan .plan_box .box .detail .note {
	text-align: center;
	font-size: 13px;
    line-height: 1.8em;
    margin-top: 15px;
}

#index .plan .plan_box .box:nth-child(1) {
	margin-top: 0;
}
#index .plan .plan_box .box:nth-child(2) {
	background: #BCE3EF;
}
#index .plan .plan_box .box:nth-child(3) {
	background: #A0D7E9;
}
#index .plan .note {
    font-size: 13px;
    margin-top: 50px;
}
#index .plan .option {
	margin-top: 90px;
}
#index .plan .option h3 {
    font-size: 48px;
    line-height: 1em;
}
#index .plan .option .fbox {
	display: flex;
	flex-wrap: wrap;
	margin-top: 30px;
}
#index .plan .option .fbox .box {
	width: 530px;
	margin-top: 40px;
	background: #F3F2F1;
	box-sizing: border-box;
	padding: 40px 40px;
    transition: all 0.6s ease;
    opacity: 0;
    top: 20px;
    position: relative;
}
#index .plan .option .fbox .box.active {
	top: 0;
	opacity: 1;
}
#index .plan .option .fbox .box:nth-child(-n+2) {
	margin-top: 0;
}
#index .plan .option .fbox .box:nth-child(2n) {
    margin-left: auto;
}
#index .plan .option .fbox .box .name {
	font-size: 22px;
	font-weight: bold;
	letter-spacing: 0.1em;
}
#index .plan .option .fbox .box .text {
    font-size: 14px;
    min-height: 6em;
    margin-top: 5px;
}
#index .plan .option .fbox .box ul {
	display: flex;
	justify-content: space-between;
	margin-top: 25px;
}
#index .plan .option .fbox .box ul li {
	width: 32%;
	text-align: center;
	border: 2px solid #000;
	background: #fff;
	text-align: center;
	border-radius: 6px;
	box-sizing: border-box;
	padding: 15px 0;
}
#index .plan .option .fbox .box ul.wide li {
	width: 100%;
}
#index .plan .option .fbox .box ul li .title {
	line-height: 1em;
	font-size: 12px;
}
#index .plan .option .fbox .box ul li .fee {
	line-height: 1em;
	font-size: 20px;
	margin-top: 8px;
}

/* Contact *********************************/
#index .contact {
	background: url(../images/bg_pattern.png) repeat center 15px;
	background-size: 290px auto;
	background-color: #F3F2F1;
	padding: 120px 0;
}
#index .contact .needs {
	width: 497px;
	margin: 50px auto 0 auto;
	box-sizing: border-box;
	padding-left: 20px;
}
#index .contact .needs p {
	position: relative;
	padding-left: 55px;
	font-size: 24px;
	font-weight: 900;
	letter-spacing: 0.1em;
}
#index .contact .needs p::before {
	display: block;
	position: absolute;
	content: "";
	background: #fff;
	width: 32px;
	height: 32px;
	border-radius: 20px;
    left: 0;
    top: 50%;
    transform: translate(0, -50%);
}
#index .contact .needs p::after {
	display: block;
	position: absolute;
	content: "";
	border-top: 3px solid #3AB5DD;
	border-right: 3px solid #3AB5DD;
	width: 11px;
	height: 6px;
    left: 9px;
    top: 48%;
    transform: translate(0, -50%) rotate(135deg);
    z-index: 10;
}
#index .contact .lead {
	text-align: center;
	font-size: 18px;
	margin-top: 40px;
}
#index .contact .form_box {
	background: #ffff;
	width: 1080px;
	margin: 40px auto 0 auto;
	box-sizing: border-box;
	padding: 50px 70px 70px 70px;
}
#index .contact .form_box > a {
	display: block;
	width: 630px;
	height: 150px;
	line-height: 150px;
	background: #1da6c3;
	margin: 100px auto 100px auto;
	text-align: center;
	position: relative;
	border-radius: 12px;
	color: #fff;
	font-weight: bold;
	font-size: 26px;
}
#index .contact .form_box .pp {
	text-align: center;
	font-size: 18px;
	margin-top: 35px;
}
#index .contact .form_box .pp a {
    text-decoration: underline;
}


#index .contact .form_box input[type="checkbox"] {
  opacity:0;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
}
#index .contact .form_box input[type="checkbox"] + span {
	position: relative;
	display: inline-block;
	line-height: 1.5em;
	padding: 10px 0 10px 40px;
	cursor: pointer;
}
#index .contact .form_box input[type="checkbox"] + span::before {
  display: block;
  content: '';
  width: 25px;
  height: 25px;
  border: 1px solid #d1d2db;
  float: none;
  margin: 0;
  position: absolute;
  background: whitesmoke;
  left: 0px;
  top: 9px;
}
#index .contact .form_box input[type="checkbox"]:checked + span::before {
    background: #1da6c3;
    border-color: #000;
}
#index .contact .form_box input[type="checkbox"]:checked + span::after {
	position: absolute;
	display: block;
	content: '';
	width: 12px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
	left: 6px;
	top: 15px;
}


.remodal-overlay {
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000000;
}
.remodal-wrapper {
	z-index: 1000001;
}
.remodal {
	max-width: 900px;
	padding: 0;
	background: none;
	padding: 100px 0 0 0;
	margin-bottom: 40px;
	text-align: left;
}
.remodal > .inner {
	background: #ffffff;
	padding: 50px 50px;
}
.remodal > .inner {
    /* border: 1px solid #424242; */
    /* color: #fff; */
    font-size: 13px;
}
.remodal > .inner .title {
    margin-bottom: 30px;
    text-align: center;
    font-size: 22px;
    font-weight: bold;
}
.remodal > .inner .body p {
	font-size: 14px;
    margin-top: 2em;
}
.remodal > .inner .body strong {
	font-weight: bold;
}

.remodal-close {
	left: auto;
	right: 5px;
	top: 110px;
	width: 60px;
}
.remodal-close::before {
    display: none;	
}

.remodal-close::before,
.remodal-close::after {
	display: block;
	position: absolute;
	content: "";
	width: 25px;
	height: 1px;
	background: #656565;
	left: 17px;
    top: 50%;
    transform: rotate(-30deg);
}
.remodal-close::after {
    transform: rotate(30deg);
}
/* ===========================================================================================

  Thanks

=========================================================================================== */
#inner.thanks .main {
	
}
#inner.thanks .message {
 	padding: 320px 0 100px 0;
 	text-align: center;
 	background: url(../images/img_logo.png) no-repeat center 100px;
 	background-size: 280px auto;
 	background-color: #A0D7E9;
}
#inner.thanks .message h1 {
	font-size: 36px;
	font-weight: bold;
}
#inner.thanks .message .text {
    margin-top: 40px;
    font-size: 16px;
}
#inner.thanks .message .bt_back {
	display: block;
	width: 480px;
	height: 130px;
	line-height: 130px;
	background: rgba(255, 255, 255, 0.6);
	margin: 50px auto 0 auto;
	text-align: center;
	position: relative;
	border-radius: 0;
	color: #1a1412;
	font-weight: bold;
	font-size: 22px;
}

/**************************************************************/
/**************************************************************/
/** SP ********************************************************/
/**************************************************************/
/**************************************************************/
@media screen and (max-width: 767px) {
	
/* style
-------------------------------------------------------------- */
body {
	min-width: 320px;
	overflow: visible !important;
	letter-spacing: 0;
}
body p {
	color: inherit;
	font-size: 12px;
	line-height: 1.8em;
}
a:hover {
	opacity: 1;
}
.non_pc {
	display: block !important;
}
.non_sp {
	display: none !important;
}

/* ===========================================================================================

	Common

=========================================================================================== */
.outline {
	position: relative;
	min-width: 320px;
	padding-bottom: 0;
	background: #fff;
}
.main {
	width: auto;
	margin: 0 auto;
	padding-bottom: 0;
	position: relative;
	/* padding-top: 60px; */
}
 
/* Header *******************************/
header {
  height: 60px;
  min-width: 320px;
  z-index: 10000;
  top: 0;
}
header > p {
	display: none
}
header .logo {
  position: relative;
  float: left;
  width: 70px;
  padding: 5px 10px;
  margin: 5px 0 0 5px;
}
header.show .logo {
	opacity: 1;
}
header .logo a {
  display: block;
}
header .gmenu {
	display: none;
	float: none;
	position: absolute;
	top: 60px;
	left: 0;
	width: 100%;
}
.pc_view header .gmenu {
	opacity: 1 !important;
	display: block !important;
}
header .gmenu ul {
	margin: 0;
	background: #fff;
	padding: 0;
}
header .gmenu ul li {
    float: none;
    margin: 0px !important;
    border-top: 1px solid #ccc;
}
header .gmenu ul li a {
    display: block;
    font-size: 14px;
    font-weight: bold;
    line-height: 50px;
    padding: 5px 20px;
    text-align: center;
}
header .gmenu ul li.bt_contact a {
    background: #1BA6C3;
    line-height: 44px;
    padding: 0 20px;
    text-align: center;
}
header .gmenu ul li.bt_sample a {
    background: #FFF100;
    line-height: 50px;
    border-radius: 0;
    margin-top: 0;
    padding: 5px 20px;
    position: relative;
}
header .gmenu ul li.bt_sample a:before,
header .gmenu ul li.bt_sample a:after {
	display: none;
}
header .gmenu ul li.bt_contact {
	margin-left: 20px;
}
header .gmenu ul li.bt_contact a {
    font-size: 14px;
    background: #82D6F2;
    line-height: 50px;
    padding: 5px 20px;
    text-align: center;
    color: #0A617E;
    position: relative;
}
header .gmenu ul li.bt_contact a br {
    display: none
}
header .gmenu ul li.bt_contact a::before {
    display: none
}

header .bt_menu {
	position: absolute;
	display: block;
	width: 60px;
	height: 60px;
	font-size: 12px;
	text-align: center;
	box-sizing: border-box;
	border-radius: 30px;
	right: 0;
	top: 0;
	z-index: 100001;
	text-indent: -9999px;
	overflow: hidden;
}
header .bt_menu:hover {
    opacity: 1;
}
header .bt_menu::before,
header .bt_menu::after {
	display: block;
	position: absolute;
	content: "";
	width: 25px;
	height: 2px;
	background: #000;
	top: 23px;
	left: 17px;
	transition: all ease 0.3s;
}
header .bt_menu::after {
    top: 36px;
}
header .bt_menu.open::before,
header .bt_menu.open::after {
    top: 50%;
    transform: rotate(-210deg);
}
header .bt_menu.open::after {
    transform: rotate(210deg);
}


/* Footer *******************************/
footer {
	position: relative;
	background: #fff;
	padding: 30px 0;
	box-sizing: border-box;
}
footer .text {
	text-align: center;
	line-height: 1em;
	font-size: 12px;
}
footer .text span {
	display: block;
	line-height: 1em;
	font-size: 18px;
	margin-top: 7px;
}
footer .logo {
    width: 78px;
    margin: 18px auto 0 auto;
    display: block;
}
footer .copyright {
    font-size: 11px;
    text-align: center;
    padding-top: 15px;
    color: #aaa;
    font-weight: bold;
}

/* ===========================================================================================

  Index

=========================================================================================== */
#index .main {
    position: relative;
}

#index h2 {
	text-align: center;
	font-size: 36px;
	line-height: 1em;
}
#index h2 span {
	font-family: 'Noto Sans JP', sans-serif;
	text-align: center;
	font-size: 14px;
	display: inline-block;
	letter-spacing: 0.05em;
	line-height: 1em;
	margin-top: 12px;
	background: #FFF000;
	line-height: 36px;
	padding: 0 20px;
	font-weight: bold;
	border-radius: 100px;
}
#index .main > section {
    position: relative;
    z-index: 100;
}


/* Visual *********************************/
#index .visual {
	position: relative;
    height: 1000px;
}
#index .visual > .inner {
	position: relative;
	height: 100%;
	width: 100%;
	left: 0;
	top: 0;
	background: #F3F2F1;
}
#index .visual .info {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 360px;
	transform: translate(-50%, -50%);
}
#index .visual h1 {
	width: 300px;
	margin: 0 auto;
}
#index .visual .copy {
	margin-top: 24px;
	text-align: center;
}
#index .visual .copy .line {
    font-size: 16px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding: 0 10px;
    letter-spacing: 0.05em;
}
#index .visual .copy .line::before {
	position: absolute;
	content: "";
	display: block;
	/* width: 100%; */
	height: 105%;
	background: #fff;
	left: 0;
	top: 0;
}
#index .visual .copy .line + br + .line {
	margin-top: 10px;
}
#index .visual .copy .line span {
    position: relative;
}
#index .visual .copy .line span span {
	color: #71bed7;
}
#index .visual .bt_scroll {
	display: block;
	font-size: 10px;
	position: absolute;
	bottom: 4%;
	left: 50%;
	transform: translate(-50%, -50%);
}
#index .visual .bt_scroll::before {
    display: block;
    position: absolute;
    content: "";
    width: 5px;
    height: 44px;
    background: #fff;
    top: -7px;
    left: 50%;
    transform: translate(-50%, 0);
    z-index: -1;
    border-radius: 10px;
}

/* Intro *********************************/
#index .intro {
	position: relative;
	background: -moz-linear-gradient(top,  rgba(243,242,241,0) 0%, rgba(243,242,241,1) 24%, rgba(243,242,241,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(243,242,241,0) 0%,rgba(243,242,241,1) 24%,rgba(243,242,241,1) 100%);
	background: linear-gradient(to bottom,  rgba(243,242,241,0) 0%,rgba(243,242,241,1) 24%,rgba(243,242,241,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00f3f2f1', endColorstr='#f3f2f1',GradientType=0 );
	height: 1000px;
	height: 440px !important;
}
#index .intro .man {
	position: absolute;
	bottom: 0;
	width: auto;
	height: 86%;
}

/* What *********************************/
#index .what {
	background: url(../images/bg_what.jpg) no-repeat center center;
	background-size: cover;
	padding: 70px 0 70px 0;
	position: relative;
}
#index .what::before {
	display: block;
	position: absolute;
	content: "";
	background: transparent;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	backdrop-filter: blur(10px);
	z-index: -1;
}
#index .what > .inner {
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.9);
    padding: 50px 20px;
}
#index .what .text {
	margin-top: 20px;
	font-size: 14px;
	line-height: 2.4em;
	text-align: center;
	letter-spacing: 0;
}
#index .what .text span {
    font-weight: bold;
    display: inline-block;
    background: -moz-linear-gradient(top,  rgba(159,215,232,0) 0%, rgba(159,215,232,0) 10%, rgba(159,215,232,1) 11%, rgba(159,215,232,1) 87%, rgba(159,215,232,1) 89%, rgba(159,215,232,0) 90%, rgba(159,215,232,0) 100%);
	background: -webkit-linear-gradient(top,  rgba(159,215,232,0) 0%,rgba(159,215,232,0) 10%,rgba(159,215,232,1) 11%,rgba(159,215,232,1) 87%,rgba(159,215,232,1) 89%,rgba(159,215,232,0) 90%,rgba(159,215,232,0) 100%);
	background: linear-gradient(to bottom,  rgba(159,215,232,0) 0%,rgba(159,215,232,0) 10%,rgba(159,215,232,1) 11%,rgba(159,215,232,1) 87%,rgba(159,215,232,1) 89%,rgba(159,215,232,0) 90%,rgba(159,215,232,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#009fd7e8', endColorstr='#009fd7e8',GradientType=0 );
    padding: 0 10px;
}
#index .what > img {
	margin: 0 auto;
	width: 90%;
}

/* Sample *********************************/
#index .sample {
	background-size: 180px auto;
	padding: 60px 0 0 0;
	background-color: #fff;
}
#index .sample .video {
	width: 90%;
	margin: 40px auto 0 auto;
	position: relative;
	padding-bottom: 50.625%;
	height: 0;
	overflow: hidden;
}

#index .sample .video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
#index .sample .point {
	margin-top: 70px;
	text-align: center;
}
#index .sample .point h3 {
	position: relative;
	font-size: 18px;
	line-height: 1em;
	font-weight: 900;
	letter-spacing: 0.1em;
}
#index .sample .point h3::before,
#index .sample .point h3::after {
	position: absolute;
	display: block;
	content: "";
	left: 50%;
	top: 8px;
	width: 4px;
	height: 50px;
	background: #000;
	margin-left: -118px;
	border-radius: 10px;
	transform: rotate(-45deg);
}
#index .sample .point h3::after {
    transform: rotate(45deg);
    margin-left: 110px;
}
#index .sample .point h3 span {
	font-size: 34px;
	line-height: 1em;
	display: block;
	margin-top: 9px;
}
#index .sample .point .fbox {
    display: flex;
    margin-top: 25px;
    flex-direction: column;
}
#index .sample .point .fbox .box {
	width: auto;
	background: #F3F2F0;
	box-sizing: border-box;
	padding: 20px 20px;
	background-image: url(../images/icon_point1.png);
	background-repeat: no-repeat;
	background-position: 20px center;
	background-size: 70px auto;
}
#index .sample .point .fbox .box:nth-child(2) {
	background-image: url(../images/icon_point2.png);
	background-color: #E8E7E5;
}
#index .sample .point .fbox .box:nth-child(3) {
	background-image: url(../images/icon_point3.png);
}
#index .sample .point .fbox .box .title {
	font-size: 24px;
	letter-spacing: 0.05em;
	font-weight: 900;
	background: none !important;
	padding: 0px 0 30px 90px;
	text-align: left;
}
#index .sample .point .fbox .box .text {
    font-size: 14px;
    max-width: none;
    width: auto;
    margin: -25px auto 0 auto;
    text-align: left;
    padding-left: 90px;
}

/* Client *********************************/
#index .client {
    background: #fff;
}
#index .client > .inner {
    padding: 60px 0;
}
#index .client .text {
    text-align: left;
    font-size: 14px;
    margin-top: 40px;
    line-height: 2em;
    letter-spacing: 0.05em;
    padding: 0 20px;
}
#index .client .text a {
    color: #59A2B9;
    text-decoration: underline;
}

/* Service *********************************/
#index .service {
	background: #A0D7E9;
}
#index .service > .inner {
    padding: 60px 0 150px 0;
}
#index .service .logo {
	width: 280px;
	margin: 35px auto  0 auto;
}
#index .service .lead {
	text-align: center;
	font-size: 22px;
	font-weight: 900;
	line-height: 1.7em;
	letter-spacing: 0.05em;
	margin-top: 30px;
	position: relative;
	z-index: 100;
}
#index .service ol {
    width: 340px;
    margin: 100px auto 0 auto;
    position: relative;
}
#index .service ol::before,
#index .service ol::after {
	display: block;
	position: absolute;
	content: "";
	width: 120px;
	height: 120px;
	background: url(../images/img_service_sub1.png) no-repeat center center;
	background-size: cover;
	top: -150px;
	right: 0px;
}
#index .service ol::after {
	background-image: url(../images/img_service_sub2.png);
	top: auto;
	bottom: -120px;
	right: 10px;
}
#index .service ol li {
    display: block;
    justify-content: space-between;
    margin-top: 80px;
    position: relative;
    left: auto;
}
#index .service ol li:before {
    position: absolute;
    content: "1";
    display: block;
    font-size: 100px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    z-index: 100;
    top: 30px;
    left: 50%;
    margin-left: 100px;
}
#index .service ol li .img {
	width: 230px;
	position: relative;
	margin-left: 20px;
}
#index .service ol li .img::before {
	display: block;
	position: absolute;
	content: "";
	width: 320px;
	height: 320px;
	background: url(../images/img_service1_bg.png) no-repeat center center;
	background-size: cover;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}
#index .service ol li .img::after {
	display: block;
	position: absolute;
	content: "";
	width: 110px;
	height: 110px;
	background: url(../images/img_service1_2.png) no-repeat center center;
	background-size: cover;
	right: -80px;
	bottom: 10px;
}
#index .service ol li .img img {
    position: relative;
}
#index .service ol li .info {
	width: auto;
	position: relative;
	margin-top: 20px;
}
#index .service ol li .info .title {
	
}
#index .service ol li .info .title .line {
    font-size: 22px;
    font-weight: bold;
    display: inline-block;
    position: relative;
    padding: 0 10px;
    /* letter-spacing: 0; */
}
#index .service ol li .info .title .line::before {
	position: absolute;
	content: "";
	display: block;
	/* width: 100%; */
	height: 105%;
	background: #FFF000;
	left: 0;
	top: 0;
}
#index .service ol li .info .title br + .line {
	margin-top: 10px;
}
#index .service ol li .info .title .line span {
    position: relative;
}
#index .service ol li .info .title .line span span {
	color: #71bed7;
}
#index .service ol li .info .text {
    font-size: 14px;
    margin-top: 20px;
}
#index .service ol li:first-child {
    margin-top: 0;
}
#index .service ol li:nth-child(2) {
	flex-direction: row-reverse;
	left: 0;
}
#index .service ol li:nth-child(2):before {
    content: "2";
    right: auto;
    left: 50%;
    margin-left: -150px;
}
#index .service ol li:nth-child(2) .img {
	margin-left: 0;
	margin-right: 20px;
	float: right;
	margin-bottom: 20px;
}
#index .service ol li:nth-child(2) .img::after {
	background-image: url(../images/img_service2_2.png);
	right: auto;
	left: -80px;
}
#index .service ol li:nth-child(2) .info {
	margin-left: 0;
}
#index .service ol li:nth-child(3):before {
    content: "3";
}
#index .service ol li:nth-child(3) .img::after {
	background-image: url(../images/img_service3_2.png);
}

#index .scene {
	position: relative;
}
#index .scene img {
	width: 100%;
}

/* Plan *********************************/
#index .plan {background: #fff;}
#index .plan > .inner {
	width: 92%;
	padding: 60px 0 60px 0;
	margin: 0 auto 0 auto;
}
#index .plan .lead {
	text-align: center;
	font-size: 16px;
	margin-top: 35px;
	letter-spacing: 0.05em;
}
#index .plan .plan_box {
	margin-top: 30px;
}
#index .plan .plan_box .box {
    background: #D4EDF5;
    padding: 34px 25px 30px 25px;
    margin-top: 25px;
    display: block;
    justify-content: space-between;
}
#index .plan .plan_box .box .info {
    width: auto;
    position: relative;
    text-align: center;
}
#index .plan .plan_box .box .info .name {
	font-size: 14px;
	font-weight: 900;
	letter-spacing: 0.05em;
}
#index .plan .plan_box .box .info .name span {
	font-size: 32px;
	display: block;
	margin-bottom: 0;
	line-height: 1em;
}
#index .plan .plan_box .box .info .fee {
	font-size: 26px;
	border: 2px solid #000;
	width: 80%;
	background: #fff;
	text-align: center;
	line-height: 50px;
	border-radius: 4px;
	position: relative;
	bottom: auto;
	left: auto;
	margin: 15px auto 0 auto;
}
#index .plan .plan_box .box .detail {
    width: auto;
    display: block;
    justify-content: space-between;
    margin-top: 20px;
}
#index .plan .plan_box .box .detail > div {
	background: #fff;
	width: auto;
	box-sizing: border-box;
	padding: 20px 20px;
}
#index .plan .plan_box .box .detail .time {
	padding-top: 0;
}
#index .plan .plan_box .box .detail .label {
    background: #F2F2F2;
    font-size: 15px;
    text-align: center;
    line-height: 30px;
    border-radius: 100px;
    width: 240px;
    margin: 0 auto;
}
#index .plan .plan_box .box .detail .num {
    font-size: 12px;
    text-align: center;
    margin-top: 20px;
}
#index .plan .plan_box .box .detail .num span {
    font-size: 28px;
    font-weight: bold;
    color: #2C9EC3;
    line-height: 1em;
    margin-right: 5px;
    display: inline-block;
    letter-spacing: 0.05em;
}
#index .plan .plan_box .box .detail .note {
	text-align: center;
	font-size: 12px;
	line-height: 1.8em;
	margin-top: 10px;
}

#index .plan .plan_box .box:nth-child(1) {
	margin-top: 0;
}
#index .plan .plan_box .box:nth-child(2) {
	background: #BCE3EF;
}
#index .plan .plan_box .box:nth-child(3) {
	background: #A0D7E9;
}
#index .plan .note {
    font-size: 12px;
    margin-top: 36px;
}
#index .plan .option {
	margin-top: 70px;
}
#index .plan .option h3 {
    font-size: 28px;
    text-align: center;
    line-height: 1em;
}
#index .plan .option .fbox {
	display: block;
	flex-wrap: wrap;
	margin-top: 25px;
}
#index .plan .option .fbox .box {
	width: auto;
	margin-top: 25px;
	background: #F3F2F1;
	box-sizing: border-box;
	padding: 34px 25px 30px 25px;
}
#index .plan .option .fbox .box:nth-child(-n+2) {
	margin-top: 0;
}
#index .plan .option .fbox .box:nth-child(2) {
	margin-top: 25px;
}
#index .plan .option .fbox .box:nth-child(2n) {
    margin-left: auto;
}
#index .plan .option .fbox .box .name {
	font-size: 18px;
	font-weight: bold;
	letter-spacing: 0.1em;
	text-align: center;
}
#index .plan .option .fbox .box .text {
    font-size: 13px;
    min-height: 0;
    margin-top: 11px;
}
#index .plan .option .fbox .box ul {
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
}
#index .plan .option .fbox .box ul li {
	width: 32%;
	text-align: center;
	border: 2px solid #000;
	background: #fff;
	text-align: center;
	border-radius: 6px;
	box-sizing: border-box;
	padding: 10px 0;
}
#index .plan .option .fbox .box ul.wide li {
	width: 100%;
}
#index .plan .option .fbox .box ul li .title {
	line-height: 1em;
	font-size: 12px;
}
#index .plan .option .fbox .box ul li .fee {
	line-height: 1em;
	font-size: 18px;
	margin-top: 5px;
	letter-spacing: 0;
}


/* Contact *********************************/
#index .contact {
	padding: 60px 0 60px 0;
	background-size: 190px auto;
}
#index .contact .needs {
	width: 90%;
	margin: 40px auto 0 auto;
	box-sizing: border-box;
	padding-left: 0;
}
#index .contact .needs p {
	position: relative;
	padding-left: 40px;
	font-size: 18px;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 2.4em;
}
#index .contact .needs p::before {
	display: block;
	position: absolute;
	content: "";
	background: #fff;
	width: 26px;
	height: 26px;
	border-radius: 20px;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}
#index .contact .needs p::after {
	display: block;
	position: absolute;
	content: "";
	border-top: 2px solid #3AB5DD;
	border-right: 2px solid #3AB5DD;
	width: 10px;
	height: 5px;
	left: 7px;
	top: 48%;
	transform: translate(0, -50%) rotate(135deg);
	z-index: 10;
}
#index .contact .lead {
	text-align: center;
	font-size: 16px;
	/* font-weight: bold; */
	margin-top: 30px;
}
#index .contact .form_box {
	background: #ffff;
	width: 94%;
	margin: 30px auto 0 auto;
	box-sizing: border-box;
	padding: 10px 12px;
}
#index .contact .form_box > a {
	display: block;
	width: 630px;
	height: 150px;
	line-height: 150px;
	background: #1da6c3;
	margin: 100px auto 100px auto;
	text-align: center;
	position: relative;
	border-radius: 12px;
	color: #fff;
	font-weight: bold;
	font-size: 26px;
}
#index .contact .form_box .pp {
	text-align: center;
	font-size: 16px;
	margin-top: 35px;
}
#index .contact .form_box .pp a {
    font-weight: bold;
    text-decoration: underline;
}
#index .contact .form_box input[type="checkbox"] {
  opacity:0;
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
}
#index .contact .form_box input[type="checkbox"] + span {
	position: relative;
	display: inline-block;
	line-height: 1.5em;
	padding: 10px 0 10px 40px;
	font-size: 16px;
	cursor: pointer;
}
#index .contact .form_box input[type="checkbox"] + span::before {
  display: block;
  content: '';
  width: 25px;
  height: 25px;
  border: 1px solid #d1d2db;
  float: none;
  margin: 0;
  position: absolute;
  background: whitesmoke;
  left: 0px;
  top: 9px;
}
#index .contact .form_box input[type="checkbox"]:checked + span::before {
    background: #1da6c3;
    border-color: #000;
}
#index .contact .form_box input[type="checkbox"]:checked + span::after {
	position: absolute;
	display: block;
	content: '';
	width: 12px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(135deg);
	left: 6px;
	top: 15px;
}

.remodal-overlay {
	background: rgba(0, 0, 0, 0.8);
	z-index: 1000000;
}
.remodal-wrapper {
	z-index: 1000001;
}
.remodal {
	max-width: 900px;
	padding: 0;
	width: 95%;
	background: none;
	padding: 30px 0 0 0;
	margin-bottom: 40px;
	text-align: left;
}
.remodal > .inner {
	padding: 40px 20px;
}
.remodal > .inner .body p {
    font-size: 13px;  
}
.remodal > .inner .title {
    margin-bottom: 30px;
    text-align: center;
    font-size: 15px;
}
.remodal-close {
	left: auto;
	right: 0px;
	top: 36px;
	width: 60px;
}
.remodal-close::before {
    display: none;	
}

.remodal-close::before,
.remodal-close::after {
	display: block;
	position: absolute;
	content: "";
	width: 25px;
	height: 1px;
	background: #656565;
	left: 17px;
    top: 50%;
    transform: rotate(-30deg);
}
.remodal-close::after {
    transform: rotate(30deg);
}
/* ===========================================================================================

  Thanks

=========================================================================================== */
#inner.thanks .bt_menu {
	display: none !important;
}
#inner.thanks .message {
 	padding: 80px 0 80px 0;
 	text-align: center;
 	background: none;
 	background-color: #A0D7E9;
}
#inner.thanks .message h1 {
	font-size: 22px;
	font-weight: bold;
}
#inner.thanks .message .text {
    margin-top: 40px;
    font-size: 14px;
    padding: 0 5%;
    text-align: left;
}
#inner.thanks .message .bt_back {
	display: block;
	width: 80%;
	height: 80px;
	line-height: 80px;
	margin: 50px auto 0 auto;
	text-align: center;
	position: relative;
	border-radius: 12px;
	color: #1a1412;
	font-weight: bold;
	font-size: 15px;
}