@charset "utf-8";
/*　Contents　*/
.btn-pagetop {
    display: none;
}

p {
	color: #353743;
	font-size: 1.3vw;
	font-weight: 500;
	line-height: 1.75;
}
aside p {
    margin: 0px 0px 8px 0.875em;
}
.text-bg-y {
	padding: 0 2px;
    background: #ffffbc;
}
.flex {
    display: flex;
    justify-content: center;
    align-items: center;
}
.box-w {
    background: #fff;
    padding: 16px;
}
section{
	position: relative;
	width: 100%;
	padding: 0;
	overflow: hidden;
}
.wrapper{
	position: relative;
	width: 96%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 60px 0;
}
h2{
	font-size: 2.5vw;
	font-weight: bold;
	line-height: 1.25;
	margin: 0 auto 32px auto;
	color: #353743;
}
h3{
	font-size: 2.5vw;
	font-weight: bold;
	letter-spacing: 0.05em;
	line-height: 1.25;
	color: #fff;
	margin: 0 auto;
}
h4{
	font-size: 2.1vw;
	font-weight: bold;
	line-height: 1.5;
	color: #2252C1;
	margin: 0 auto;
}
h5{
	font-size: 2.1vw;
	font-weight: bold;
	line-height: 1.5;
	color: #353743;
	margin-bottom: 12px;
}
h6{
	font-size: 1.25vw;
	font-weight: bold;
	line-height: 1.5;
	color: #2252C1;
	margin-bottom: 12px;
}

/*	main header CSS	*/
header .header-main {
	display: -ms-flexbox;
	display: flex;
	position: relative;
	width:100%;
	height:68px;
	justify-content: space-between;
	align-items: center;
	padding: 0 24px;
	color:#444B5B;
	z-index:99;
	overflow:hidden;
	transition: all .3s ease;
}
header.fixed{
	top: 0;
}
header.bg-color {
    background: rgb(255 255 255 / 60%);
}
header a.logo_cachatto{
	width: 30%;
    max-width: 300px;
    height: 100%;
    align-items: center;
    padding: 0 16px;
}
header a.logo_cachatto::before,
header a.logo_cachatto::after{
	display: none;	
}
header a.logo_cachatto img {
	width: 100%;
	padding: 8px 0;
	height: 100%;
}
header .menunavi{
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.menunavi a {
    color: #353743;
    font-weight: 700;
    padding: 0 1.5vw;
}
.menunavi a:nth-child(5) {
	margin-right: 2vw;
}

/*　link-btn CSS　*/
a.link-btn {
	display: inline-block;
	position: relative;
	margin: 0 16px;
	width: 400px;
    height: 60px;
    border-radius: 60px;
    color: #fff;
    background: #2252C1;
	z-index: 90;
	box-shadow: 0 0 6px rgb(27 31 35 / 20%);
	transition: all .3s ease;
}
a.link-btn p {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	margin: auto;
	height: 17px;
	font-size: 1em;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	color: #fff;
}
a.link-btn::before {
	position: absolute;
	content: "";
	right: 20px;
	top: 0;
	bottom: 0;
	margin: auto;
	width: 8px;
	height: 8px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
a.link-btn:hover{
	opacity: 1;
	background: #4786fa;
}
a.link-btn.link-btn-w {
    background: #fff;
    border: 1px solid #2252C1;
}
a.link-btn.link-btn-w p {
    color: #2252C1;
}
a.link-btn.link-btn-w::before {
	border-color: #2252C1;
}


.header-main a.link-btn {
	width: 180px;
    height: 48px;
    margin: 0 16px 0 0;
}
.menunavi .link-btn p {
    font-size: 0.875em;
}


.badge {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 6px;
	margin: auto;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #FF557C;
}
.badge p {
	position: absolute!important;
	top: 0!important;
	bottom: 0!important;
	left: 0!important;
	right: 0!important;
	margin: auto!important;
	color: #fff!important;
	font-weight: normal!important;
	padding-left: 0!important;
}

/* link-anchor */
.link-anchor {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
	padding: 24px 0 12px;
}
.link-anchor a {
    border: 1px solid #C8D7E6;
    border-radius: 8px;
    padding: 18px 12px;
    margin: 0 8px 12px;
    min-width: 180px;
    background: #fff;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	color: #2252C1;
}
.link-anchor a:before {
    position: absolute;
    content: "";
    top: unset;
    left: 0;
    bottom: 4px;
    right: 0;
    margin: auto;
    width: 8px;
    height: 8px;
    border-top: none;
    border-right: 2px solid #2252C1;
    border-bottom: 2px solid #2252C1;
    transform: rotate(45deg);
    transition: all .3s;
}
.link-anchor a span {
    font-size: 1em;
    font-weight: bold;
}

/* main */
#main{
	z-index: 89;
	padding: 0;
	background: #F6F6F6;
	overflow: hidden;
}
#main .wrapper{
	margin: 0 auto;
	display: flex;
	padding-top: 6vw;
	padding-bottom: 0;
	width: 80%;
	max-width: 1200px;
}
h1.main-title {
    position: relative;
    width: 65%;
	padding-top: 60px;
    padding-right: 60px;
    z-index: 90;
}
p.title-name {
    position: relative;
    padding: 14px 24px;
    margin: 0 auto 40px;
    color: #2252C1;
    font-size: 1.7vw;
    line-height: 1.3;
    letter-spacing: 0;
    font-weight: 700;
    text-align: center;
    background: color(srgb 0.88 0.92 1 / 0.6);
    z-index: 81;
}
.title01 {
    position: relative;
    text-align: left;
    font-size: 4.5vw;
    font-weight: 900;
    color: #353743;
    line-height: 1.75;
    margin-bottom: 40px;
    z-index: 90;
}
.title01 li{
	position: relative;
	margin-left: 100px;
}
.title01 li:before {
    content: "";
    position: absolute;
    top: 24px;
    left: -72px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 24px;
    height: 40px;
    border-right: 12px solid #E3578C;
    border-bottom: 12px solid #E3578C;
}
.main-text {
    font-size: 2vw;
    font-weight: 700;
    line-height: 1.5;
    position: relative;
    z-index: 90;
}
.main-cta {
	margin-bottom: 3vw;
    position: relative;
    width: 35%;
    z-index: 90;
    background: #fff;
    border-radius: 8px;
	padding-top: 24px;
}
.main-cta h6 {
    font-size: 1.2vw;
    margin-bottom: 0;
}
.main-cta iframe {
    height: 500px;
}
.main-img {
    align-self: center;
    position: absolute;
    right: -32px;
    top: 140px;
    z-index: 80;
}
.main-img img {
    margin: 0 auto;
    width: 100%;
}
.slant-bg{
	position: relative;
}
.slant-bg::before {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    left: -55%;
    background: #F3D3DF;
    transform: skewY(300deg);
    z-index: -1;
}
.slant-bg::after {
    content: '';
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    right: -55%;
    background: #F3D3DF;
	transform: skewY(300deg);
    z-index: -1;
}

#case{
	z-index: 89;
	background: #FEFAD6;
}
#case .wrapper {
    padding: 32px 0;
}
#case h2 {
    font-size: 1.75vw;
    margin-bottom: 20px;
}
.record-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    padding: 12px 0;
}
.record-logo li {
    width: calc(100% / 6);
    padding: 12px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.record-logo li img {
	height: 3.5vw;
    max-height: 42px;
}
#case aside p {
    font-size: 0.75em;
}

/* front */
.prob-inner {
    display: flex;
    flex-direction: row-reverse;
}
.prob-list {
    display: flex;
    flex-wrap: wrap;
}
.prob-list li {
    width: calc((100% / 2) - 16px);
    background: #F6F6F6;
    border-radius: 8px;
    padding: 24px;
    margin: 8px;
    display: flex;
    align-items: center;
}
.prob-list h5 {
    font-size: 1.75vw;
    text-align: left;
    margin-bottom: 0;
}
.advance-inner .arrow {
	display: inline-block;
	border-style: solid;
	border-width: 54px 80px 0 80px;
	border-color: #F3D3DF transparent transparent transparent;
	margin: 24px auto 32px;
}
.advance-inner h2 {
    color: #E3578C;
    margin-bottom: 40px;
}

/* feature */
#feature {
    background: #FBE8EF;
}
.feature-list {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 60px;
    background: #fff;
    border-radius: 8px;
}
.feature-list .inner {
    display: flex;
    padding: 28px 0 40px;
    border-bottom: 1px dotted #707070;
    align-items: center;
}
.feature-list .inner:last-child {
	border-bottom: none;
}
.feature-list .inner:nth-child(2n) {
    flex-direction: row-reverse;
}
.ftr-inner {
    text-align: left;
    width: 50%;
}
.ftr-numb {
    font-size: 2.5vw;
    font-weight: 700;
    color: #E3578C;
}
.ftr-title h3 {
    font-size: 3vw;
    color: #E3578C;
	margin-bottom: 24px;
}
.feature-list .img {
    width: 50%;
}

/* CTA */
#cta {
    background: #E3578C;
}
.main-cta-sub {
    color: #fff;
    text-align: center;
    font-size: 1.5vw;
    margin-bottom: 24px;
}

/* price */
#price {
    background: #E3578C;
}
#price h2,
#price p {
    color: #fff;
    text-align: center;
}

/* support */
.list-check {
    font-size: 1.75vw;
    text-align: left;
    font-weight: 700;
    color: #353743;
    margin: 60px auto;
    padding-left: 60px;
    width: 55%;
}
.list-check li {
	position: relative;
    margin-bottom: 48px;
}
.list-check li:before {
    content: "";
    position: absolute;
    top: -12px;
    left: -48px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 16px;
    height: 28px;
    border-right: 6px solid #2252C1;
    border-bottom: 6px solid #2252C1;
}
#support .box-w {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    background: #F3F7FF;
	padding: 24px 40px;
}
#support .box-w.flex .text {
    width: 70%;
}
#support .box-w.flex .img {
    width: 30%;
    padding: 0 24px;
}
#support .box-w.flex .img img {
    width: 100%;
}

/* step */
#step {
    background: #F6F6F6;
}

.step-list {
	position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 60px;
}
.step-list li{
	position: relative;
	width: 25%;
}
.step-list li .img{
	position: relative;
}
.step-list li .img:after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 16px 0 16px 16px;
	border-color: transparent transparent transparent #2252C1;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	margin: auto;
}
.step-list li:first-child .img:after{
	content : none ;
}
.step-list h5 {
    font-size: 1.3vw;
}


/*faq*/
.faq-list dl{
	border-bottom: 1px solid #adbfff;
}
.faq-list dt{
	display: -ms-flexbox;
    display: flex;
	justify-content: flex-start;
	position: relative;
	cursor:pointer;
	padding: 24px;
	border-top: 1px solid #adbfff;
}
.faq-list dd{
	display: -ms-flexbox;
    display: flex;
	justify-content: flex-start;
	display: none;
	padding: 24px 24px 24px 26px;
	overflow: hidden;
}
.faq-list dt span,
.faq-list dd span{
	font-size: 2em;
	font-weight: bold;
	margin: 0 20px 0 0;
	color: #18274D;
	display: block;
	float: left;
}
.faq-list dt p {
	font-weight: bold;
	color: #18274D;
}
.faq-list dd p{
	display: block;
	width: 95%;
	float: right;
}
.faq-list dd a {
	text-decoration: underline;
}
.faq-list dd a::before {
	display: none;
}
.faq-list .toggle_btn{
	text-align: center;
	margin-top: -47px;
	font-size: 0.75em;
}
.faq-list .toggle_btn::before,
.faq-list .toggle_btn::after {
	content: '';
	display: block;
	width: 16px;
	height: 3px;
	border-radius: 20px;
	background: #18274D;
	position: absolute;
	right: 4%;
	top: 54%;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
}
.faq-list .toggle_btn::after {
	background: #18274D;
	-webkit-transform: translateY(-50%) rotate(90deg);
	-ms-transform: translateY(-50%) rotate(90deg);
	transform: translateY(-50%) rotate(90deg);
	transition: 0.5s;
  }
.faq-list dt.selected .toggle_btn::after {
	-webkit-transform: rotate(0);
	-ms-transform: rotate(0);
	transform: rotate(0);
	transition: 0.5s;
  }

/* case2 */
#case2{
	background: #FEFAD6;
}
#case2 h2 {
	margin: 0 auto 48px auto;
}
#case2 h4{
	margin-bottom: 40px;
}
#case2 .record-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    background: #fff;
    border-radius: 8px;
    padding: 12px 0;
}
#case2 .record-logo li {
    width: calc(100%/5);
    padding: 12px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#case2 .record-logo li img {
    height: 36px;
}

#case2 .case-wrap{
	display: -ms-flexbox;
	display: flex;
	justify-content: space-between;
}
#case2 .case-wrap li{
	width: 30%;
}
#case2 .case-wrap li p{
	text-align: center;
	line-height: 1.5;
}
#case2 .case-wrap .img {
	margin-bottom: 12px;
}
#case2 .case-wrap h5 {
    font-size: 1.125em;
    font-weight: bold;
    line-height: 1.5;
    color: #444B5B;
    margin-bottom: 12px;
}
#case2 .case-wrap .case-name{
	color: #2252C1;
}
#case2 .case-wrap .case-type{
	font-size: 0.75em;
}
#case2 .box-w {
	padding: 32px;
	margin-bottom: 40px;
}
#case2 .img img {
    width: unset;
}



/* company */
#company table {
    width: 100%;
    margin: 0 auto 48px auto;
    border: 2px solid #666E82;
}
#company table tr {
    font-size: 1em;
    line-height: 2.5;
    letter-spacing: 0.08em;
}
#company table th {
    font-weight: normal;
    width: 30%;
    padding: 8px 2px 8px 2px;
    background: #FFF;
	border: 1px solid #666E82;
    border-collapse: collapse;
    vertical-align: middle;
    line-height: 1.5;
}
#company table td {
    text-align: left;
    width: 70%;
    padding: 12px 2px 12px 12px;
    background: #FFF;
    border: 1px solid #666E82;
    border-collapse: collapse;
    vertical-align: middle;
    line-height: 1.5;
}



@media screen and (min-width: 1400px){
	.wrapper {
		width: 1320px;
	}
	p {
		font-size: 18px;
	}
	h2,h3 {
		font-size: 2.25em;
	}
	h4,h5 {
		font-size: 1.75em;
	}
	.main-cta h6 {
    font-size: 16px;
	}
	.header-main {
		width: 1400px;
		margin: 0 auto;
	}
	#main .wrapper{
		padding-top: 82px;
	}
	p.title-name{
		font-size: 24px;
	}
	.title01 {
    font-size: 68px;
	}
	.main-text {
    font-size: 28px;
	}
	.prob-list h5 {
		font-size: 24px;
	}
	.ftr-title h3 {
		font-size: 40px;
	}
	.list-check {
		font-size: 24px;
	}
	
	
	#case h2 {
		font-size: 24px;
	}
}

@media screen and (max-width: 640px) {
	.wrap{
		overflow: hidden;
	}
	.sp {
		display: inline-block;
	}
	p {
		font-size: 0.875em;
		line-height: 1.75;
		letter-spacing: 0;
	}
	h2,h3 {
		font-size: 1.25em;
		margin-bottom: 24px;
	}
	h4,h5 {
		font-size: 1em;
	}
	a.link-btn {
		width: 100%;
		margin: auto;
	}
	a.link-btn:nth-child(2n) {
		margin-top: 24px;
	}
	header .menunavi a {
		display: none;
	}
	header .header-main {
		padding: 0 8px 0 16px;
        height: 60px;
	}
	header a.logo_cachatto {
		width: 250px;
        padding: 12px 0 0 12px;
	}
	header a.logo_cachatto img {
		padding: 0;
	}
	.header-main a.link-btn {
		width: 50%;
		display: none;
		margin: 0 4px;
		margin-top: 10px;
	}
	header.fixed .header-main,
	header.fixed .header-main a.link-btn {
		display: block;
	}
	header.fixed a.logo_cachatto {
		display: none;
	}
	.menunavi a.link-btn p {
		text-align: left;
		left: 20px;
	}
	header.fixed {
		bottom: 0;
		top: unset;
	}
	header.fixed .header-main {
		height: 68px;
	}
	.wrapper{
		width: 90%;
		padding: 32px 0;
	}
	section{
		width: 100%;
	}
	#main {
		height: auto;
	}
	#main .wrapper{
		padding-top: 12vw;
		padding-bottom: 4vw;
		width: 90%;
		flex-direction: column;
	}
	h1.main-title {
        width: 100%;
        padding: 40px 0 0 0;
    }
	p.title-name {
		font-size: 1em;
		margin-bottom: 16px;
		padding: 14px 8px;
	}
	.title01 {
		font-size: 2em;
		margin-bottom: 16px;
	}
	.title01 li:before {
		width: 14px;
		height: 28px;
		top: 4px;
		left: -60px;
		border-right: 10px solid #E3578C;
		border-bottom: 10px solid #E3578C;
	}
	.main-text {
		width: 100%;
        margin-bottom: 12px;
        font-size: 1.125em;
        text-align: center;
	}
	.main-cta {
		width: 100%;
		margin: 0 auto;
		background: none;
	}
	.main-img {
		display: block;
        position: relative;
        width: 60%;
        top: unset;
        right: 0;
        left: 0;
        margin: auto;
	}
	.slant-bg::before {
		height: 1000px;
		top: -120%;
		bottom: unset;
		left: -55%;
	}
	.slant-bg::after {
		height: 1000px;
		top: unset;
		bottom: -120%;
		right: -55%;
	}
	#case h2 {
		font-size: 3.5vw;
	}
	.record-logo {
		padding: 0;
	}
	.record-logo li {
		width: calc(100% / 3);
	}
	.record-logo li img {
		height: 7vw;
	}
	#case aside p {
		font-size: 50%;
	}
	.prob-inner {
		flex-direction: column-reverse;
	}
	.prob-list {
		flex-direction: column;
	}
	.prob-list li {
		width: 100%;
		margin: 4px auto;
		padding: 16px 24px;
	}
	.prob-list h5 {
		font-size: 0.875em;
	}
	.prob-inner .img {
		width: 50%;
		margin: 0 auto;
	}
	.prob-inner .img img {
		width: 100%;
	}
	.feature-list {
		padding: 0 24px;
	}
	.feature-list .inner {
		flex-direction: column;
	}
	.feature-list .inner:nth-child(2n){
		flex-direction: column;
	}
	.ftr-inner {
		width: 100%;
	}
	.ftr-title {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
	}
	.ftr-numb {
		font-size: 1.25em;
		text-align: center;
		margin-top: -4px;
	}
	.ftr-title h3 {
		font-size: 1.25em;
		margin: 0 0 24px 24px;
	}	
	
	.feature-list .img {
		margin: 12px 0 0;
		padding: 0;
		width: 80%;
	}
	.feature-list .img img {
		width: 100%;
	}
	.main-cta-sub {
		font-size: 0.875em;
	}
	.list-check {
		width: 100%;
		font-size: 1em;
	}
	.list-check li {
		margin-bottom: 32px;
	}
	.list-check li:before {
		top: -4px;
		width: 12px;
		height: 20px;
	}
	#support .box-w {
		flex-direction: column;
		padding: 16px;
	}
	#support .box-w.flex .text {
		width: 100%;
	}
	#support .box-w.flex .img {
		width: 60%;
		margin-top: 16px;
	}
	#support .box-w.flex .img img {
		width: 100%;
	}
	.step-list {
		flex-direction: column;
		margin-bottom: 0;
	}
	.step-list li {
		width: 100%;
		display: flex;
		align-items: center;
		margin-bottom: 24px;
	}
	.step-list li .img:after {
		top: -28px;
		bottom: unset;
		right: 0;
		transform: rotate(90deg);
		border-width: 14px 0 14px 12px;
	}
	.step-list li .img {
		width: 25%;
	}
	.step-list li .img img {
		width: 100%;
	}
	.step-list h5 {
		font-size: 1em;
		text-align: left;
		padding-left: 24px;
	}
	
	aside p {
		font-size: 50%;
	}
	#case2 h4 {
		font-size: 1.125em;
		margin-bottom: 24px;
	}
	#case2 .box-w {
		margin-top: 40px;
		padding: 16px;
	}
	#case2 .record-logo {
		padding: 0;
	}
	#case2 .record-logo li {
		width: calc(100%/3);
	}
	#case2 .record-logo li img {
		height: 22px;
	}
	#case2 .case-wrap {
		flex-wrap: wrap;
        justify-content: flex-start;
        align-items: unset;
	}
	#case2 .case-wrap li {
		width: 50%;
        padding: 0 6px 16px 0;
	}
	#case2 .case-wrap li:nth-child(2n) {
        padding: 0 0 16px 6px;
	}
	#case2 .case-wrap .img img {
		width: 100%;
	}
	#case2 .case-wrap h5 {
		font-size: 0.75em;
        text-align: left;
	}
	#case2 .case-wrap li p {
		margin-bottom: 0;
	}
	#case2 .inner h4 {
		font-size: 1em;
	}
	#case2 .box-w .img img {
		width: 100%;
	}
	.faq-list dt {
		flex-direction: inherit;
		align-items: center;
		padding: 16px 44px 16px 12px;
	}
	.faq-list dt span, .faq-list dd span {
		margin-bottom: 12px;
	}
	.faq-list dt p {
		line-height: 1.5;
	}
	.faq-list dd {
		padding: 16px 32px 16px 14px;
	}
	.faq-list dd p {
		width: 84%;
	}
	#faq-product .wrapper {
		padding-bottom: 0;
	}
	#case .img img {
		width: 100%;
	}
	.inq-inner {
		flex-direction: column;
	}
	.inq-inner li {
		width: 100%;
		padding: 16px 12px;
	}
	.inq-inner li:last-child {
		padding-bottom: 0;
	}
	.inq-inner .link-btn p {
		font-size: 1em;
	}
	.inq-inner .link-btn {
		margin-bottom: 8px;
	}
	#company table {
		margin-bottom: 0;
	}
	footer .logo_e-jan {
		width: 100%;
	}
	.btn-cta2 img {
		width: 100%;
	}
}