@charset "euc-jp";

@import url(//fonts.googleapis.com/earlyaccess/notosansjapanese.css);
/* CSS Document */
body {
	color: #4C4948!important;
	text-align: center !important;
}

body #container input, body #container button, body #container textarea, body #container select {
    font-family: 'Outfit', 'Noto Sans JP', sans-serif, 'メイリオ', 'Meiryo' !important;
}

.breadcrumb-item {
	font-family: 'Outfit', 'Noto Sans JP', sans-serif, 'メイリオ', 'Meiryo' !important;
}

.page-wrap {
	font-family: 'Noto Sans Japanese', sans-serif !important;	
}

.wrap {
	font-family: 'Noto Sans Japanese', sans-serif !important;
	font-size: 100%;
	line-height: 1.8;
	background-color: #F0BF00;
	overflow: hidden;
}

body:not(.page-index) .mainnav::after {
	background-color: #fff ;

}

.page-wrap {	
	padding-top: 70px!important;
	overflow: hidden;
}

.page-head {
	padding: 32px 0 0 0;
	margin-bottom: 0;
}

.f-en {
	font-family: 'Roboto', sans-serif;
}

.pc {
	display: block;
}

.sp {
	display: none;
}

.btn-g:link, .btn-g:visited, .btn-g:active {
	background: #3f3f3f;
	color: #fff !important;
	border: 3px solid #3f3f3f;
}

.btn-g:hover {
	background: #fff;
	color: #3f3f3f !important;
}

.btn-gr:link, .btn-gr:visited, .btn-gr:active {
	background: #42ad99;
	color: #fff !important;
	border: 3px solid #42ad99;
}

.btn-gr:hover {
	background: #fff;
	color: #42ad99 !important;
}

.btn-r:link, .btn-r:visited, .btn-r:active {
	background: #df5a56;
	color: #fff !important;
	border: 3px solid #df5a56;
}

.btn-r:hover {
	background: #fff;
	color: #df5a56 !important;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.main-visual-wrap {
	text-align: center;
	width: 1200px;
    height: 525px;
	position: relative;
	margin: auto;
}

.main-visual-images img {
	max-width: 720px;
}

.main-visual-subtitle {
	font-size: 24px;
    font-weight: bold;
    padding: 3px 10px;
    border: 3px solid #4C4948;
    display: inline-block;
	margin-bottom: 10px;
}

.main-visual-text {
    font-size: 50px;
    font-weight: bold;
    padding-top: 10px;
    line-height: 1.4;
}

.main-visual-contents {
	padding-top: 20px;
}

.main-visual-btn-text {
    position: absolute;
	right: 10px;
	top: 240px;
}

.main-visual-btn {
	position: absolute;
	right: 15px;
	top: 300px;
}

.main-visual-wrap .btn-wrap {
	text-align: center;
	margin-top: 26px;
}

.main-visual-wrap .btn-wrap a {
	width: 400px;
	padding: 20px 0;
	font-size: 18px;
}

.main-visual-wrap .btn-wrap a:hover {
	transition: 0.3s;
}

#fv{ 
	padding-bottom: calc(3vw + 10px);  
	position: relative;
	overflow: hidden;
	background:#ffffff;
}

#fv::before {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	border-bottom: 30vw solid #f1f1f1;  /* 三角を白にする */ 
	border-left: 100vw solid transparent;
}

.main-section {
	position: relative;
	align-items: center;
}

.ereco-section {
  	width: 1200px;
    margin: 40px auto;
}

.trouble-section {
	margin: 0 auto;
	position: relative;
}

#trouble {
	position: relative;
	background: #f1f1f1;
}
  
#trouble:after {
	content: "";
	position: absolute;
	top: 100%;
	box-sizing: border-box;
	border-right: 50vw solid transparent;
	border-left: 50vw solid transparent;
	border-top: 200px solid #f1f1f1;
}

.trouble-wrap {
	text-align: center;
}

.trouble-section-title {
	font-size: 48px;
    font-weight: bold;
    display: inline-block;
}

.trouble-list-wrap {
	font-size: 0;
	text-align: left;
	margin: 50px auto 0;
	width: 930px;
}

.trouble-list {
    padding: 40px 20px;
    width: 29.6%;
	text-align: center;
    background: #fff;
	box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
    border-radius: 25px 25px 25px 0;
	position: relative;
}

.trouble-list .point {
	font-size: 140px;
    line-height: 0;
    position: absolute;
    left: 20px;
	transform: scale(-1, -1);
	top: -20px;
	color: #f0bf00;
}

.trouble-list-image {
	margin-right: 10px;
	vertical-align: middle;
}

.trouble-list-text {
 	font-size: 18px;
	font-weight: 700;
	text-align: center;
}

.trouble-list-text span {
	color: #db3a3a;
	font-size: 30px;
}

.answer-wrap-title {
	margin: 0 auto;
	width: 60%;
}

.section-wrap-title {
	font-size: 60px;
    font-weight: bold;
 	color: inherit;
    border-radius: 13px 13px 0px 0px;
 	text-align: center;
}

.section-wrap-title span {
	display: inline-block;
	font-size: 24px;
	border-bottom: 3px solid #4C4948;
}

.about-section {
	background: #ffdf63;
	padding: 180px 0 50px 0;
}

.section-wrap-head {
	margin-bottom: 30px;
}

.section-list-wrap {
    padding: 0;
    background: #fdf8e5;
	box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
    border-radius: 25px 25px 0 0;
	width: 560px;
	font-weight: 700;
	text-align: center;
}

.section-list-wrap-long {
    padding: 0;
    background: #ffffff;
	box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
    border-radius: 25px 25px 0 0;
	font-weight: 700;
	text-align: center;
	margin: 80px 0 0 0;
}

.section-list-wrap-long .flex {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}

.section-list-title {
	font-size: 24px;
    color: #42ad99;
    border-bottom: 1px solid #bbbbbb;
    display: block;
    border-top: 14px solid #42ad99;
    padding: 20px;
    margin: 0 40px;
}

.section-subtitle {
    font-size: 18px;
    font-weight: bold;
    display: inline-block;
	margin: 60px 40px 40px;
	text-align: center;
}

.section-subtitle .red {
	font-size: 30px;
	display: block;
}

.section-list-wrap .bg {
	position: relative;
	background: #ffffff;
	border-radius: 25px 25px 0 0;
}
  
.section-list-wrap .bg:after {
    content: "";
    position: absolute;
	top: 100%;
    box-sizing: border-box;
    border-right: 280px solid transparent;
    border-left: 280px solid transparent;
    border-top: 50px solid #ffffff;
    left: 0;
}

.section-list-wrap-long .section-text {
	font-size: 30px;
	margin: 30px 0;
}

.section-list-wrap-long .section-subtitle {
	font-size: 72px;
    margin: 0 auto;
	line-height: 1;
}

.section-list-wrap-long .section-subtitle {
	background:linear-gradient(transparent 80%, #edbd00 80%); 
}

.about-image {
    width: 55%;
    margin: -50px 0 0 0;
}

.balloon-right-btm {
    position: relative;
    display: block;
    margin: -20px auto 30px 0;
    padding: 15px 0;
    width: 120px;
    height: 120px;
    line-height: 90px;
	text-align: center;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    background: #42ad99;
    border-radius: 50%;
    box-sizing: border-box;
}
  
.balloon-right-btm:before {
	content: "";
    position: absolute;
    bottom: -39px;
    right: -39px;
    margin-top: -16px;
    border: 39px solid transparent;
    border-left: 39px solid #42ad99;
    z-index: 0;
    -webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}


#function{ 
	background: linear-gradient(-15deg, #3b9b89 0%, #3b9b89 50%, #42ad99 50%, #42ad99 100%);

}

#function .section-wrap-title {
	color: #ffffff;

}

#function .section-wrap-title span {
    display: inline-block;
    font-size: 24px;
    border-bottom: 3px solid #ffffff;
}

.function-wrap {
	position: relative;
    margin: 0 auto;
    padding: 30px 0;
}

.function-list-box-wrap-1 {
	background: url("/main/function/erecommend/images/new/function-1.png");
	background-repeat: no-repeat;
	background-position:0% 50%;
	width: 1288px;
	height: 605px;
	left: -50px;
	position: relative;
	margin: 30px 0 0 0;
}

.function-list-box-wrap-2 {
	background: url("/main/function/erecommend/images/new/function-2.png");
	background-repeat: no-repeat;
	background-position:0% 50%;
	width: 1288px;
	height: 605px;
	left: 0;
	position: relative;
	margin: 70px 0;
}

.function-list-box-wrap-3 {
	background: url("/main/function/erecommend/images/new/function-3.png");
	background-repeat: no-repeat;
	background-position:0% 50%;
	width: 1288px;
	height: 625px;
	left: -50px;
	position: relative;
	margin: 0 0 30px 0;
}

.function-list-image img {
	width: 320px;
}

.function-text {
	font-size: 13px;
}

.bold-red {
	font-size: 40px;
    font-weight: bold;
	color: #DB3A3A;
}

.bold-red-small {
	font-size: 30px;
    font-weight: bold;
	color: #DB3A3A;
}

.red {
    font-weight: bold;
	color: #DB3A3A;
}

.section-text {
    font-size: 18px;
    margin: 15px 0;
	text-align: center;
}

.section-image {
    margin-top: 60px;
	text-align: center;
}

.supplement-text {
    font-size: 14px;
    line-height: 2;
	padding-top: 25px;
	text-align: center;
	font-weight: 700;
}

.supplement-text p {
	text-align: center;
}

.about-supplement-text {
    font-size: 14px;
	padding-bottom: 100px;
}

.function-list-box-wrap {
    font-weight: bold;
	position: relative;
	color: #ffffff;
}

.function-box-right {
	position: absolute;
	top: 0;
    right: 30px;
    width: 500px;
	color: #ffffff;
	font-weight: 700;
}

.function-box-left {
	position: absolute;
	top: 0;
    left: 30px;
    width: 500px;
	color: #ffffff;
	font-weight: 700;
}


.function-box-right h3,
.function-box-left h3 {
	font-size: 36px;
	position: relative;
	line-height: .9;
	margin-bottom: 30px;
	padding-left: 30px;
	text-align: left;
}

.function-box-right h3:before,
.function-box-left h3:before {
	width: 8px;
	background: #f0bf00;
	position: absolute;
	content: "";
	height: 36px;
	left: 0;
}

.function-box-right p,
.function-box-left p {
	text-align: left;
}

.function-box-right .flex,
.function-box-left .flex {
	margin: 15px 0 0;
	border-top: 1px solid #ffffff;
	padding: 5px 0 0;
	align-items: center;
}

.function-list {
    width: calc(100%/3);
    float: left;
	text-align: center;
    padding: 20px 20px;
}

.function-list-box {
	padding-top: 15px;
}

.function-list-title {
	font-size: 16px;
	color: #42AD99;
}

.function-list-text {
	text-align: left;
}

.custom-image {
    margin-top: 60px;
	text-align: center;
}

.custom-bold-red {
	font-size: 35px;
    font-weight: bold;
	color: #DB3A3A;
}

.setting-list-box-wrap {
	text-align: center;
	font-size: 0;
	align-items: center;
}

.setting-list {
	display: inline-block;
}

.regist-section {
	background: #3f3f3f;
	margin: 0;
	padding: 10px 0;
}

.tel-wrap {
	width: 43%;
    margin: 50px auto 0;
}

.regist {
	color: #ffffff;
}

.regist-text {
	font-size: 30px;
	font-weight: bold;
	text-align: center;
}

.regist-text p {
	text-align: center;
}

.regist .flex {
	display: flex;
	justify-content: center;
}

.regist .btn-wrap a {
    width: 400px;
    padding: 20px 0;
    margin: 0 10px;
	font-size: 18px;
}

.regist .btn-wrap a:hover {
    transition: 0.3s;	
}

#custom {
	background: #f1f1f1;
	padding: 3px;
}   

.custom-section .section-list-wrap {
	background: #ffffff;
	padding: 10px;
	width: 100%;
}

.custom-section .section-list {
	width: 31%;
	font-weight: 700;
	text-align: left;
}

.custom-section .section-list p {
	height: 70px;
}

.custom-section .section-wrap-title {
    font-size: 48px;
    font-weight: bold;
	text-align: center;
	margin-bottom: 80px;
}

.custom-section h3 {
    font-size: 30px;
    position: relative;
    line-height: .9;
    margin-bottom: 30px;
    padding-left: 30px;
}

.custom-section h3:before {
    width: 8px;
    background: #42ad99;
    position: absolute;
    content: "";
    height: 36px;
    left: 0;
}

.custom-ai-wrap {
	padding: 50px;
    background: #ffffff;
    box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
    border-radius: 25px 25px 0 0;
    width: 1200px;
    font-weight: 700;
	text-align: center;
	margin: 100px auto;
}

.custom-ai-wrap .balloon-right-btm {
    position: relative;
    display: block;
    margin: -80px auto 30px;
    padding: 15px 0;
    width: 120px;
    height: 120px;
    line-height: 90px;
	text-align: center;
    color: #FFF;
    font-size: 24px;
    font-weight: bold;
    background: #42ad99;
    border-radius: 50%;
    box-sizing: border-box;
}
  
.custom-ai-wrap .balloon-right-btm:before {
	content: "";
    position: absolute;
    bottom: -39px;
    right: -39px;
    margin-top: -16px;
    border: 39px solid transparent;
    border-left: 39px solid #42ad99;
    z-index: 0;
    -webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

#setting {
	background: #fdf8e5;
	padding: 30px 0;
}

.setting-list {
	width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #fff;
	box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
	font-weight: 700;
	position: relative;
}

#setting .setting-list .balloon-right-btm {
	position: relative;
    display: block;
    margin: -40px auto 10px -5px;
    padding: 33px 0;
    width: 100px;
    height: 100px;
    line-height: 90px;
    text-align: center;
    color: #FFF;
    font-size: 30px;
    font-weight: bold;
    background: #42ad99;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 1;
}

#setting .setting-list .balloon-right-btm:before {
    content: "";
    position: absolute;
    bottom: -32px;
    right: -32px;
    margin-top: -16px;
    border: 32px solid transparent;
    border-left: 32px solid #42ad99;
    z-index: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

#setting .setting-list .balloon-right-btm span,
#setting .setting-list .balloon-right-btm-red span {
	font-size: 16px;
	display: block;
}

#setting .setting-list .balloon-right-btm-red {
	position: relative;
    display: block;
    margin: -40px auto 10px -5px;
    padding: 33px 0;
    width: 100px;
    height: 100px;
    line-height: 90px;
    text-align: center;
    color: #FFF;
    font-size: 30px;
    font-weight: bold;
    background: #df5a56;
    border-radius: 50%;
    box-sizing: border-box;
    line-height: 1;
}

#setting .setting-list .balloon-right-btm-red:before {
    content: "";
    position: absolute;
    bottom: -32px;
    right: -32px;
    margin-top: -16px;
    border: 32px solid transparent;
    border-left: 32px solid #df5a56;
    z-index: 0;
    -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.setting-list-title {
	font-size: 30px;
    font-weight: bold;
}

.setting-list-title + p {
	color: inherit;
	font-size: 18px;
	margin: 12px;
	text-align: center;
}

.setting-list-arrow {
	width: 25px;
}

.cl-green {
	color: #42AD99;
}

.cl-red {
	color: #df5a56;
}

.setting-list-box-wrap {
	width: 930px;
    margin: 70px auto 0;
}

.price-table {
	width: 940px;
    margin: 0 auto;
	background: #ffffff;
	text-align: center;
	font-weight: 700;
	font-size: 30px;
}

th {
	background: #42ad99;
	border: solid 1px #ccc;
	color: #fff;
	padding: 10px;
	font-weight: 700;
	text-align: center;
}

td {
	border: solid 1px #ccc;
	padding: 20px;
}

.initial-cost {
	background: #878787;
	color: #ffffff;
}

.annual-cost {
	background: #3f3f3f;
	color: #ffffff;
}

td span {
	font-size: 16px;
    display: block;
}


/* -----------------------------------------------------------------
	form
-----------------------------------------------------------------*/ 
.formTemplate {
	width: 100%;
}

.contents-form-title-center {
	font-size: 22px;
	margin-top: 30px;	
}

.contents-form-title-center {
    font-size: 30px!important;
    color: #42AD99;
    text-align: center;
    margin-top: 45px;
}

.content {
    width: 1024px;	
}

#container {
    width: 1024px;
}
  
#ssl #erecommend .formTemplate th {
    width: 200px;
}

#ssl #erecommend .formTemplate td {
    width: 460px;
	font-size: 16px !important;
}

.mgnT8 {
	font-size: 14px;
}

.mgnB16 {
	font-size: 16px;
}

#erecommend .inner {
    width: 900px;	
}

#checkform {
	font-size: 16px;
}

.formTemplate th, .formTemplate td {
    padding: 16px;
}

.form-any {
    float: right;
    color: #fff;
    font-size: 14px;
    font-weight: normal;
    background-color: #666;
    padding: 3px 8px;
}

.formTemplate th em {
	background: #df5a56;
    font-size: 14px;
	padding: 3px 8px;
}

#ssl #erecommend .formTemplate label {
    font-size: 16px;
}

#ssl #erecommend .postscript {
    font-size: 14px;
    margin-left: 8px;
}

#ssl #erecommend h3 {
    font-size: 18px;
	margin: 0;
}

#ssl #erecommend .cautionList li {
    margin-left: 16px;
    font-size: 14px;
    line-height: 1.8;
}

.contents-flow-image {
  text-align: center;
    margin-top: 48px;
}

.contents-flow-image {
	text-align: center;
    margin: 48px 0 40px;
}

.contents-form-text-wrap {
	width: 900px;
	margin: 48px auto 0;
}

.contents-form-table {
	width: 900px;
	border: 1px solid #ccc;
	margin: 20px auto 0;
}
.contents-form-table th {
	width: 300px;
	color: #222;
	font-weight: bold;
	background-color: #F2F2F2;
	border-bottom: 1px solid #d8d8d8;
	padding: 16px;
}
.contents-form-table td {
	border-bottom: 1px solid #d8d8d8;
	padding: 16px;
}
.contents-form-table td input {
	width: 400px;
	font-size: 16px;
	border: 1px solid #ccc;
	padding: 8px;
}
.contents-form-table td textarea {
	width: 500px;
	height: 200px;
	font-size: 16px;
	border: 1px solid #ccc;
	padding: 8px;
}
.form-name-kanji {
	width: 300px !important;
	margin: 0 0 10px 5px;
}
.form-name-kana {
	width: 300px !important;
	margin-left: 5px;
}
.form-required {
	float: right;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	background-color: #ec524f;
	padding: 3px 8px;
}
.form-any {
	float: right;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	background-color: #666;
	padding: 3px 8px;
}

.error-message {
    color: #ec524f;
    background: url(/images/form/errorIcon.png) no-repeat left center;
    padding-left: 20px;	
	margin-bottom: 5px;
}

.contents-license-wrap {
	width: 900px;
	margin: 50px auto 0;
}
.contents-license-title {
	color: #222;
	font-size: 18px;
	font-weight: bold;
}
.contents-license-text {
    height: 175px;
    font-size: 13px;
    border: 1px solid #ccc;
    margin: 16px auto;
    overflow-x: hidden;
    overflow-y: auto;
}
.contents-license-element {
	text-align: center;
	margin-top: 24px;
}
.form-license-accept {
	margin-right: 8px;
}
.form-license-required {
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	background-color: #ec524f;
	padding: 5px 8px;
	margin-left: 8px;
}

.contents-license-text #policy_common {
	padding: 12px;
}
.contents-license-text #policy_basic {
	padding: 24px;
}
.contents-license-text .clearfix,
.contents-license-text .rightFloat {
	margin: 0;
}
.contents-license-text .intro {
	margin-bottom: 24px;
}
.contents-license-text .heading {
	color: #333;
	font-weight: bold;
	margin: 16px 0 8px;
	border-bottom: 1px dashed #444;
	padding-bottom: 2px;
}
.contents-license-text .content_title {
	font-weight: bold;
	background: #e5e5e5;
	padding: 2px 0 2px 13px;
}
.contents-license-text p {
	margin-bottom: 8px;
}
.contents-license-text .space_left {
	padding-left: 13px;
}
.contents-license-text ol {
	list-style-image: none;
	list-style-position: outside;
	padding-left: 13px;
}
.contents-license-text ol li,
.contents-license-text ol.desimal li,
.contents-license-text ol.desimal_in li {
	list-style-type: decimal;
	margin-bottom: 8px;
}
.contents-license-text ol.no_desimal li {
	list-style-type: none;
}
.contents-license-text ol.disc li {
	list-style-type: disc;
}
.contents-license-text .administrator {
	margin: 40px 0 8px;
	color: #333;
	font-weight: bold;
	border-bottom: 1px dashed #444;
	padding-bottom: 2px;
}
.contents-license-text .update_box .update {
	float: right;
}
.contents-license-text .update_box ul {
	margin-bottom: 8px;
}
.contents-license-text .update_box p {
	margin-bottom: 0px;
}

.form-send-btn {
	display: block;
	width: 460px;
	color: #fff !important;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	background-color: #df5a56;
	border: 4px solid #df5a56;
	border-radius: 50px;
	padding: 24px 0;
	margin: 50px auto 0;
}
.form-send-btn:hover {
	color: #df5a56 !important;
	background-color: #fff;
	border: 4px solid #df5a56;
}
.form-send-btn.yet,
.form-send-btn.yet:hover  {
	color: #fff !important;

	background-color: #bfbfbf !important;
	border: 4px solid #bfbfbf !important;
	cursor: default;
}

.confirm-section,
.result-section {
	margin-top: 48px;
}
.confirm-section .contents-form-btn {
	text-align: center;
	margin-top: 50px;
}
.form-modify-btn {
	display: inline-block;
	width: 250px;
	color: #fff !important;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	background-color: #ccc;
	border: 4px solid #ccc;
	border-radius: 50px;
	padding: 24px 0;
	margin: 0 15px ;
}
.form-modify-btn:hover {
	color: #ccc !important;
	background-color: #fff;
	border: 4px solid #ccc;
}
.form-submit-btn {
	display: inline-block;
	width: 460px;
	color: #fff !important;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	background-color: #df5a56;
	border: 4px solid #df5a56;
	border-radius: 50px;
	padding: 24px 0;
	margin: 0 15px;
}
.form-submit-btn:hover {
	color: #df5a56 !important;
	background-color: #fff;
	border: 4px solid #df5a56;
}

.contents-result-wrap {
	text-align: center;
	margin-top: 48px;
}
.contents-result-title {
	color: #39b6be;
	font-size: 36px;
	font-weight: bold;
}
.contents-result-text {
	margin-top: 16px;
}
.contents-top-btn {
	text-align: center;
	margin-top: 100px;
}
.top-btn {
	display: inline-block;
	width: 460px;
	color: #005bac !important;
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	text-decoration: none !important;
	background-color: #fff;
	border: 4px solid #005bac;
	border-radius: 50px;
	padding: 24px 0;
	margin: 0 15px ;
}

.top-btn:hover {
	color: #fff !important;
	background-color: #005bac;
	border: 4px solid #005bac;
}

.formTemplate .fmS {
    width: 83px;
}

.formTemplate input {
    width: 98%;
}

.formTemplate .fmM,
.formTemplate .fmL {
    width: 98%;
}

#contact td ul.formInput input {
	width: auto;
}

#ssl #erecommend .formTemplate th {
    font-size: 16px !important;
    color: #3f3f3f;
}

.contents-form-btn {
  text-align: center;
    margin-top: 50px;
}

.foot-tel-number {
	text-align: center !important;
}

.foot-tel-number a:link {
    color: #ffffff !important;
}

.foot-tel-hour {
	text-align: center;
}

.formTemplate th {
    background: #ffffff;
    width: 135px;
}

@media (max-width: 640px){

	.pc {
		display: none;
	}
		
	.sp {
		display: block;
	}
	
	.flex {
		display: block;
	}
		
	.page-wrap {
		padding: 0;
		width: 100%;
		box-sizing: border-box;
	}
	.page-head {
		padding: 0;
		margin-left: -20px;
	}
	
	.breadcrumb-wrap {
		margin: 0 0 0 20px;
	}
	
	.main-visual-wrap .btn-wrap {
		margin-top: 15px;
	}
	
	.main-visual-wrap {
		text-align: center;
		width: 100%;
		position: relative;
		margin: 0 auto;
		background: none;
		padding: 20px;
		height: auto;
	}
	
	.main-visual-subtitle {
		  font-size: 20px;
	}

	.main-visual-images img {
		max-width: 100%;
	}
	
	#fv::before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		border-bottom: 50vw solid #f1f1f1;
		border-left: 100vw solid transparent;
	}
	
	.main-visual-text {
		font-size: 36px;
		font-weight: bold;
		padding-top: 10px;
		line-height: 1.5;
	}
	
	.main-visual-wrap .btn-wrap a {
		width: 100%;
		padding: 15px 0;
		font-size: 16px;
	}
	
	.supplement-text {
		font-size: 12px;
		line-height: 1.7;
		padding-bottom: 30px;
	}
	
	.ereco-section {
		width: 100%;
		margin: 0 auto;
	}
	
	.trouble-section-title {
		font-size: 30px;
	}
	
	.trouble-wrap {
		text-align: center;
		padding: 50px 0 0 0;
	}
	
	.trouble-list-wrap {
		font-size: 0;
		text-align: left;
		padding: 20px;
		width: 100%;
		margin: 0 auto;
	}
	
	#trouble:after {
		content: "";
		position: absolute;
		top: 100%;
		box-sizing: border-box;
		border-right: 50vw solid transparent;
		border-left: 50vw solid transparent;
		border-top: 90px solid #f1f1f1;
	}
	
	.answer-wrap-title {
		margin: 0 auto;
		width: 100%;
	}
	
	.main-visual-contents {
		padding-top: 20px;
	}
	
	.main-visual-btn-text {
		position: absolute;
		right: 120px;
		top: 330px;
	}	
	
	.main-visual-btn {
		position: absolute;
		margin: 0 50px;
		top: 395px;
	}
	
	.trouble-list {
		display: inline-block;
		margin: 20px 0px;
		font-size: 13px;
		font-weight: bold;
		width: 100%;
	}
	
	.trouble-list .point {
		font-size: 100px;
		line-height: 0;
		position: absolute;
		left: 20px;
		transform: scale(-1, -1);
		top: -15px;
		color: #f0bf00;
	}
	
	.about-section {
		background: #ffdf63;
		padding: 100px 20px 50px;
	}
	
	.section-wrap-title {
		font-size: 34px;
		font-weight: bold;
		color: inherit;
		border-radius: 13px 13px 0px 0px;
		text-align: center;
	}
	
	.section-list-wrap .bg:after {
		content: "";
		position: absolute;
		top: 100%;
		box-sizing: border-box;
		border-right: 170px solid transparent;
		border-left: 170px solid transparent;
		border-top: 50px solid #ffffff;
		left: 0;
	}
	
	.section-wrap-title span {
		display: inline-block;
		font-size: 18px;
		border-bottom: 2px solid #4C4948;
	}
	
	.section-list-wrap {
		box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
		border-radius: 25px 25px 0 0;
		width: 100%;
		font-weight: 700;
		text-align: center;
		margin: 20px 0 70px;
	}
	
	.section-subtitle {
		font-size: 16px;
		font-weight: bold;
		display: inline-block;
		margin: 60px 0 20px;
	}
	
	.section-list-title {
		font-size: 18px;
		color: #42ad99;
		border-bottom: 1px solid #bbbbbb;
		display: block;
		border-top: 14px solid #42ad99;
		padding: 10px;
		margin: 0 40px;
	}
	
	.section-subtitle .red {
		font-size: 24px;
		display: block;
	}
	
	.section-text {
		font-size: 16px;
		line-height: 1.7;
	}
	
	.section-list-wrap-long .flex {
		display: block;
	}
	
	.section-list-wrap-long .section-text {
		font-size: 18px;
		margin: 10px 0;
	}
	
	.section-list-wrap-long .section-subtitle {
		font-size: 50px;
		margin: 0 auto;
		line-height: 1;
	}
	
	.about-image {
		width: 100%;
		margin: 20px 0 0px -23px;
		padding: 0;
	}
	
	.balloon-right-btm {
		position: relative;
		display: inline-block;
		margin: -80px auto 20px;
		padding: 15px 0;
		width: 110px;
		height: 110px;
		line-height: 80px;
		text-align: center;
		color: #FFF;
		font-size: 22px;
		font-weight: bold;
		background: #42ad99;
		border-radius: 50%;
		box-sizing: border-box;
	}
	
	.section-wrap-head {
		font-size: 20px;
		padding: 0;
	}
	
	.about-supplement-text {
		font-size: 12px;
		padding-bottom: 70px;
		line-height: 1.7;
	}

	#function {
		background: linear-gradient(-25deg, #3b9b89 0%, #3b9b89 50%, #42ad99 50%, #42ad99 100%);
	}
	
	.function-list {
		width: 100%;
	}
	
	.function-list-box-wrap {
		margin: 15px 0px;
		font-size: 14px;
	}	
	
	.function-list-box-wrap {
		background: none;
		background-repeat: no-repeat;
		background-position: 0% 50%;
		width: 100%;
		height: auto;
		left: 0;
		position: relative;
		margin: 30px 0 0 0;
	}
	
	.function-box {
		width: 100%;
		color: #ffffff;
		font-weight: 700;
	}
	
	.function-wrap {
		position: relative;
		margin: 0 auto;
		padding: 30px 20px;
	}
	
	.function-box h3 {
		font-size: 24px;
		position: relative;
		line-height: .9;
		margin-bottom: 30px;
		padding-left: 24px;
	}
	
	.function-box h3:before {
		width: 6px;
		background: #f0bf00;
		position: absolute;
		content: "";
		height: 24px;
		left: 0;
	}
	
	.function-box .flex {
		margin: 15px 0 0;
		border-top: 1px solid #ffffff;
		padding: 15px 0 0;
		align-items: center;
	}
	
	.function-text {
		font-size: 16px;
		text-align: center;
	}
	
	.setting-list {
		width: calc(100%/3);
	}
	
	.setting-list:nth-child(even){
		display: none;
	}
	
	.setting-list-image {
		width: 100%;
		padding: 2px;
	}
	
	.regist {
		padding: 15px 10px 40px;	
	}	
	
	.regist-text {
		font-size: 22px;
		line-height: 1.5;
	}

	.tel-wrap {
		width: 100%;
		margin: 30px auto 0;
	}
	
	.setting-list-box-wrap {
		padding: 15px 0;
	}	
	
	.setting-supplement {
		font-size: 12px;
		line-height: 1.6;
		padding-bottom: 5px;
	}
		
	
	.regist .btn-half {
		width: 100%;
		font-size: 16px;
		border-radius: 38px;
	}
	
	.regist .flex {
		display: block;
		justify-content: center;
	}
	
	.regist .btn-wrap a {
		width: 100%;
		padding: 15px 0;
		margin: 0;
		font-size: 16px;
	}
	
	.regist {
		padding: 30px 20px;
	}
	
	.regist .btn-wrap {
		text-align: center;
		margin-top: 16px;
	}
	
	.price-supplement-text {
		font-size: 12px;
		line-height: 1.7;
		padding: 60px 0px 60px;
	}
	
	.function-list-text {
		font-size: 16px
	}	
		
	.function-list-title {
		font-size: 19px;
	}
	
	.function-list-image img {
		width: 90%;
	}

	.function-list-image {
		margin: 0 auto;
		text-align: center;
	}
	
	#custom {
		background: #f1f1f1;
		padding: 50px 20px;
	}
	
	.custom-ai-wrap .balloon-right-btm {
		position: relative;
		display: block;
		margin: -80px auto 20px;
		padding: 15px 0;
		width: 110px;
		height: 110px;
		line-height: 80px;
		text-align: center;
		color: #FFF;
		font-size: 22px;
		font-weight: bold;
		background: #42ad99;
		border-radius: 50%;
		box-sizing: border-box;
	}
	
	.custom-section .section-wrap-title {
		font-size: 32px;
		font-weight: bold;
		text-align: center;
		margin-bottom: 20px;
	}
	
	.custom-section .section-list {
		width: 100%;
		font-weight: 700;
		text-align: left;
		margin: 0 0 50px 0;
	}
	
	.custom-section .section-list:last-child {
		margin: 0;
	}
	
	.custom-section h3 {
		font-size: 24px;
		position: relative;
		line-height: .9;
		margin-bottom: 20px;
		padding-left: 24px;
	}
	
	.custom-section h3:before {
		width: 6px;
		background: #42ad99;
		position: absolute;
		content: "";
		height: 25px;
		left: 0;
	}
	
	.custom-section .section-list p {
		height: auto;
	}
	
	.custom-ai-wrap {
		padding: 50px 20px;
		background: #ffffff;
		box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
		border-radius: 25px 25px 0 0;
		width: 100%;
		font-weight: 700;
		text-align: center;
		margin: 100px auto 0;
	}
	
	#setting {
		background: #fdf8e5;
		padding: 30px 20px;
	}
	
	.setting-list-box-wrap {
		width: 100%;
		margin: 70px auto 0;
	}
	
	#setting .setting-list-box-wrap {
		width: 100%;
		margin: 0 auto;
	}
	
	#setting .setting-list-title {
		font-size: 30px;
		font-weight: bold;
	}
	
	#setting .setting-list .balloon-right-btm {
		position: relative;
		display: block;
		margin: -40px auto 10px -5px;
		padding: 22px 0;
		width: 90px;
		height: 90px;
		line-height: 90px;
		text-align: center;
		color: #FFF;
		font-size: 36px;
		font-weight: bold;
		background: #42ad99;
		border-radius: 50%;
		box-sizing: border-box;
		line-height: 1;
	}
	
	#setting .setting-list .balloon-right-btm-red {
		position: relative;
		display: block;
		margin: -40px auto 10px -5px;
		padding: 22px 0;
		width: 90px;
		height: 90px;
		line-height: 90px;
		text-align: center;
		color: #FFF;
		font-size: 36px;
		font-weight: bold;
		background: #df5a56;
		border-radius: 50%;
		box-sizing: border-box;
		line-height: 1;
	}
	
	#setting .setting-list .balloon-right-btm span, #setting .setting-list .balloon-right-btm-red span {
		font-size: 16px;
		display: block;
	}
	
	#setting .setting-list-title + p {
		color: inherit;
		font-size: 18px;
		margin: 12px;
	}
	
	#setting .setting-list {
		width:250px;
		height: 250px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 10px 10px 30px 0px rgba(0, 0, 0, 0.1);
		font-weight: 700;
		position: relative;
		margin: 30px auto;
	}
	
	#setting .setting-list:last-child {
		margin: 30px auto 0;
	}
	
	#setting .setting-list .balloon-right-btm:before {
		content: "";
		position: absolute;
		bottom: -30px;
		right: -30px;
		margin-top: -16px;
		border: 30px solid transparent;
		border-left: 30px solid #42ad99;
		z-index: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	#setting .setting-list .balloon-right-btm-red:before {
		content: "";
		position: absolute;
		bottom: -30px;
		right: -30px;
		margin-top: -16px;
		border: 30px solid transparent;
		border-left: 30px solid #df5a56;
		z-index: 0;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.setting-list-arrow {
		width: 25px;
		margin: 0 auto;
		transform: rotate(90deg);
	}
	
	.price-table {
		margin: 0 auto;
		background: #ffffff;
		text-align: center;
		font-weight: 700;
		font-size: 24px;
	}
	
	.price-table td {
		border: solid 1px #ccc;
		padding: 14px;
	}

	#contact .inner1 {
			max-width: initial;
			max-width: auto;
			width: auto;
		}
		#contact .contact_form_wrapper {
			padding: 51px 0px;
			margin-top: 0;
		}
	
		.contact_inner {
			max-width: 325px;
			width: 95%;
			margin: 0 auto;
		}
	
		#contact .p1 {
			font-size: 14px;
		}
	
		.contact_table th,
		.contact_table td {
			padding: 10px;
			font-size: 14px;
		}
	
		.contact_table th {
			width: 30%;
		}
	
		.contact_table th span {
			display: inline-block;
			width: auto;
			height: auto;
			line-height: 1;
			font-size: 12px;
			position: static;
			right: auto;
			top: auto;
			transform: translate(0, 0);
			padding: 4px 5px 5px;
		}
	
		.contact_table td span {
			display: block;
		}
	
		.input_size_1,
		.input_size_2 {
			width: 100%;
		}
	
		#contact td input {
			padding: 10px;
			font-size: 15px;
			width: 100%;
		}
	
		#contact textarea {
			width: 100%;
			height: 140px;
			font-size: 15px;
		}
	
		#contact h3 {
			font-size: 16px;
			margin: 40px 0px 20px;
		}
	
		#contact h4 {
			font-size: 15px;
		}
	
		#contact p {
			font-size: 14px;
			margin-left: 0;
		}
	
		#contact p span.link-p001 {
			font-size: 12px;
		}
	
		.privacy_check {
			font-size: 15px;
			line-height: 1.6;
			text-align: center;
			margin: 20px 0px 40px;
		}
	
		.privacy_check span {
			margin: 0px 0px 0px 5px;
			width: auto;
			height: auto;
			line-height: 1;
			font-size: 12px;
			padding: 4px 5px 5px;
		}
	
		.submit_btn input {
			width: 95%;
			max-width: 325px;
			height: 50px;
			font-size: 17px;
			line-height: 50px;
		}

	#ssl #erecommend .formTemplate th {
		width: 100%;
	}

	#ssl #erecommend .formTemplate td {
		width: 100%;
		font-size: 16px !important;
	}

	.formTemplate .fmM {
		width: 100%;
	}

	.formTemplate .fmL {
		width: 100%;
	}

	.formTemplate {
		border: 1px solid #cccccc;
		margin: auto;
		width: 98%;
		table-layout: fixed;
	}

	.contents-form-title-center {
		font-size: 24px!important;
		color: #42AD99;
		text-align: center;
		margin-top: 45px;
	}

	.formTemplate th, .formTemplate td {
		border-bottom: none;
		border-right: none;
		padding: 12px;
		text-align: left;
	}

	.form-send-btn, .form-modify-btn, .form-submit-btn {
		width: 90%;
		font-size: 18px;
		padding: 16px 0;
		margin: 10px auto;
	}

	.formTemplate th, .formTemplate td {
		padding: 16px;
		border: none;
	}

	#contact td ul.formInput input {
			width: auto;
	}

	.formTemplate th {
		background: #ebebeb;
		width: 135px;
	}
}


input[type="radio"], input[type="checkbox"] {
    margin-right: 4px;
    vertical-align: middle;
}

/* アニメーション 
  .fade-in-up {
	transform: translate(0, 50px);
	opacity: 0;
	transition: opacity 1s;
  }
  
  
  .scroll-in {
	opacity: 1;
	transform: translate(0, 0);
  }
*/

  /*お問い合わせフォーム　ステップ部分*/
.form_step {
    width: 100%;
    max-width: 780px;
    display: flex;
    justify-content: center;
    gap: 5%;
    margin: 3% auto 5%;
    border-radius: 5px;
    box-sizing: border-box;
}
.form_step p {
    margin: 0 !important;
    text-align: center;
    position: relative;
    padding: 2.5rem 0 0 0;
    font-size: 16px;
    width: 33.33333%;
}
.form_step p:after {
    content: "";
    width: 1.2rem;
    height: 1.2rem;
    background: #c3c3c3;
    display: block;
    border-radius: 2rem;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.form_step p:before {
    content: "";
    width: 120%;
    height: 4px;
    background: #c3c3c3;
    display: block;
    position: absolute;
    top: 0.6rem;
    left: 50%;
    transform: translateY(-50%);
}
.form_step p.active, .form_step p.done{
    color: #42AD99;
    font-weight: bold;
}
.form_step p.active:after, .form_step p.done:after, .form_step p.done:before {
    background: #42AD99;
}

.form_step p:last-of-type:before {
    display: none;
}

@media (max-width:580px){
    .form_step {
        margin: 8% auto;
    }
    .form_step p {
        padding: 2rem 0 0 0;
        font-size: 12px;
    }
}

@media (max-width:430px){
    section#form {
        padding: 5%;
    }
    section.innerbox > div.form_step {
        padding: 0;
    }

    .form_step p {
        padding: 2rem 0 0 0;
        font-size: 12px;
    }

	body #container input, body #container button, body #container textarea, body #container select {
		font-family: 'Outfit', 'Noto Sans JP', sans-serif, 'メイリオ', 'Meiryo' !important;
		padding: 5px;
		box-sizing: border-box;
	}
}

.page-wrap a:not(.btn):link, .page-wrap a:not(.btn):visited, .page-wrap a:not(.btn):active {
    text-decoration: none !important;
    word-wrap: break-word;
}

section{
	margin: 0 auto;
}

/*form*/
.colorRed {
    color: #ff0000;
}
.formTemplate {
	border-left: 1px solid #b2b2b2;
	border-top: 1px solid #b2b2b2;
	margin: auto;
	width: 98%;
	table-layout: fixed;
}
.formTemplate th, .formTemplate td {
	border-bottom: 1px solid #b2b2b2;
	border-right: 1px solid #b2b2b2;
	padding: 12px;
	text-align: left;
}
.formTemplate th {
	background: #ebebeb;
	width: 135px;
}
.formTemplate th em {
	background:#dc3333;
	color: #fff;
	float: right;
	font-size: 10px;
	font-weight: normal;
	padding: 2px 4px;
}
.formTemplate #company_type02 {
	margin-left: 32px;
}
.formTemplate .ime {
	ime-mode: disabled;
}
.formTemplate textarea {
	height: 80px;
	width: 98%;
}
.formTemplate textarea.large {
	height: 80px;
}
.formTemplate .errorMesseage {
	background: url("/images/errorIcon.png") no-repeat left top;
	color: #dc3333;
	margin-bottom: 4px;
	padding-left: 20px;
}
.formTemplate .okMesseage {
	background: url("/images/tick.png") no-repeat left top;
	color: #44a44c;
	margin-bottom: 4px;
	padding-left: 20px;
}
.formTemplate .sampleTxt {
	color: #999;
	margin-top: 4px;
}
.formTemplate .note {
	margin-top: 8px;
}
label {
	cursor: pointer;
}
.formTemplate label {
	font-size: 14px;
}
.formTemplate input, .formTemplate img {
	vertical-align: middle;
}
input[type="radio"], input[type="checkbox"] {
	margin-right: 4px;
}
.formTemplate input[type="text"], .formTemplate input[type="password"], .formTemplate select, .formTemplate textarea {
	background:#fff;
	border: 1px solid #ccc;
	border-radius: 2px 2px 2px 2px;
	font-size: 15px;
	padding: 4px;
}
.formTemplate select {
	padding: 2px;
}
.formTemplate input[type="text"]:focus, .formTemplate input[type="password"]:focus, .formTemplate textarea:focus {
	background:#ffc;
	border: 1px solid #888;
}
.formTemplate input.fmError[type="text"], .formTemplate input.fmError[type="password"], .formTemplate textarea.fmError, .formTemplate select.fmError {
	background:#fee;
	border: 2px solid #f0c7c7;
}
.formTemplate input.fmError[type="text"]:focus, .formTemplate input.fmError[type="password"]:focus, .formTemplate textarea.fmError:focus {
	border: 2px solid #e68c8c;
}
.formTemplate .fmL {
	width: 375px;
}
.formTemplate .fmM {
	width: 140px;
}
.formTemplate .fmS {
	width: 50px;
}

.formTemplate .disabled p{
	color:#ccc
}
.formTemplate .disabled input.txtBox{
	background:#e6e6e6;
}
.formTemplate .verticalM{
	display:inline;
	vertical-align:middle;
	padding-top:2px;
}