@charset "UTF-8";

// @import url('https://fonts.googleapis.com/css2?family=Lato&family=Noto+Sans+JP&family=Noto+Serif+JP:wght@400;500&display=swap');

*,
*:before,
*:after {
	margin:0;
	padding:0;
	box-sizing:border-box;
}
html {
	font-size:16px;
}
body {
	font-family: '小塚ゴシック Pro', 'Kozuka Gothic Pro', "Noto Sans JP", sans-serif;
	line-height: 1.6;
	background-color:#fff;
	color:#000;
	font-feature-settings: "palt";
}
li {
	list-style:none;
}
a {
	color:#000;
}
@media screen and (max-width:1000px){
	html {
		font-size:1.6vw;
	}
}
@media screen and (max-width:750px){
	.pc {
		display:none;
	}
	html {
		font-size:4vw;
		scroll-padding-top: 70px;
	}
}
@media screen and (min-width:751px){
	.sp {
		display:none;
	}
}

picture,
img {
	display:block;
	max-width:100%;
	width:100%;
}


@import "footer";



.wrap {
	// overflow:hidden;
}


.js-effect {
	opacity:0;
	&.slide-up {
		transform:translate(0,3em);
	}
	&.is-view {
		opacity:1;
		transform:translate(0,0);
		transition: 1s ease .3s;
	}
}


.common-inner {
	padding:0 2em;
	margin:0 auto;
	max-width:1504px;
	@media screen and (max-width:750px){
		padding:0;
	}
}


.common-title1 {
	max-width:39.1875em;
	margin:0 auto;
	@media screen and (max-width:750px){
		width:86%;
	}
}


.hd-100 {
	position:absolute;
	right:0;
	top:0;
	width:6em;
	height:6em;
	display:flex;
	justify-content:center;
	align-items:center;
	background-color:#fff;
	z-index:100;
	> div {
		width:60%;
	}
	@media screen and (max-width:750px){
		width:70px;
		height:70px;
	}
}


.kv {
	max-width:1440px;
	margin:0 auto 1em;
	padding:4em 0 0;
	&:before {
		content:"";
		display:block;
		position:absolute;
		left:0;
		bottom:100%;
		width:100%;
		height:100%;
		transform-origin:45% bottom;
		transform:skewY(28deg);
		background-color:#d8dfe3;
	}
	img {
		position:relative;
	}
	@media screen and (max-width:750px){
		&:before {
			transform-origin:30% bottom;
		}
	}
}


.btn-inquiry {
	display:block;
	margin:0 auto;
	padding:1em 2em 1em 1em;
	text-align:center;
	background-color:#ff7a59;
	color:#fff;
	border-radius:3em;
	text-decoration:none;
	position:relative;
	width:18em;
	font-size:1.25em;
	font-weight:600;
	letter-spacing:.0625em;
	&:before {
		content:"";
		display:block;
		position:absolute;
		right:1.5em;
		top:calc(50% - .75em);
		width:1em;
		height:1em;
		border-style:solid;
		border-width:0 2px 2px 0;
		border-color:transparent #fff #fff transparent;
		transform:scale(.8) rotate(45deg);
	}
	@media screen and (max-width:750px){
		font-size:1em;
	}
}


.btn-totop {
	display:block;
	margin:0 auto;
	padding:1em 2em 1em 1em;
	text-align:center;
	background-color:#fff;
	color:#2e475d;
	border-radius:3em;
	text-decoration:none;
	position:relative;
	width:18em;
	font-size:1.25em;
	font-weight:600;
	letter-spacing:.0625em;
	border:2px solid #2e475d;
	&:before {
		content:"";
		display:block;
		position:absolute;
		right:1.5em;
		top:calc(50% - .25em);
		width:1em;
		height:1em;
		border-style:solid;
		border-width:2px 2px 0 0;
		border-color:#2e475d #2e475d transparent transparent;
		transform:scale(.8) rotate(-45deg);
	}
	@media screen and (max-width:750px){
		font-size:1em;
	}
}


.introduction .i01 {
		margin:4em auto 2em;
		max-width:1440px;
}

.benefits {
	margin:5em auto 3em;
	position:relative;
  }
.benefits:before {
		content:"";
		display:block;
		position:absolute;
		left:0;
		top:37%;
		width:100%;
		height:34%;
		transform:skewY(28deg);
		background-color:#d8dfe3;
	}

.benefits .i01 {
		margin:3em 1em;
		border:4px solid #dce2e5;
		border-radius:3em;
		position:relative;
		overflow:hidden;
}
.benefits .i01 a {
			position:absolute;
			left:80.2%;
			width:15.1%;
			// background-color:rgba(0,0,255,.2);
			border-radius:50%;
}
.benefits .i01 a:before {
				content:"";
				display:block;
				padding-top:100%;
			}
.benefits .i01 a.circle_1 {
    top: 7.7%;
}
.benefits .i01 a.circle_2 {
				top:27.7%;
			}
.benefits .i01 a.circle_3 {
				top:47.8%;
			}
.benefits .i01 a.circle_4 {
				top:67.9%;
			}


  
  
	@media screen and (max-width:750px){
		&:before {
			display:none;
		}
		.i01 {
			width:94%;
			margin:2em auto;
			padding:0;
			border-radius:1.5em;
			a {
				left:34.8%;
				width:30.4%;
				&.circle_1 {
					top:15.5%;
				}
				&.circle_2 {
					top:36.1%;
				}
				&.circle_3 {
					top:57.6%;
				}
				&.circle_4 {
					top:78.35%;
				}
			}
		}
	}
}


.users_voice {
	margin:4em auto;
	@media screen and (max-width:750px){
		margin:2em auto;
	}
}


.c-users_voice {
	border:4px solid #2e475d;
	border-radius:3em;
	margin:0 1em;
	padding:4em 0;
	.slick1 {
		margin-top:3em;
		position:relative;
		.slick-track {
			height:100%;
			display:flex;
		}
		.slick-slide {
			height:auto;
			float:none;
		}
		.slick-prev,
		.slick-next {
			font-size:1.4375em;
			position:absolute;
			bottom:calc(50% - 1em);
			width:2em;
			height:2em;
			background:url(/hubfs/100inc-corp/image/lp/pardot/arrow1.svg) center center no-repeat;
			background-size:98%;
			z-index:1;
			transform:scale(1);
			&:before {
				display:none;
			}
		}
		.slick-prev {
			left:1em;
		}
		.slick-next {
			right:1em;
			transform:scale(-1,1);
		}
	}
	.slick1-contents {
		padding:0 6em;
		height:100%;
		display:flex;
		align-items:center;
		.img {
			width:14.75em;
		}
		.text {
			flex:1;
			margin-left:2.5em;
			position:relative;
			padding:2em;
			&:before,
			&:after {
				content:"";
				display:block;
				position:absolute;
				width:2em;
				height:2em;
				border:2px solid #000;
			}
			&:before {
				left:0;
				top:0;
				border-width:2px 0 0 2px;
			}
			&:after {
				right:0;
				bottom:0;
				border-width:0 2px 2px 0;
			}
			p {
				font-size:1.4375em;
				font-weight:600;
				line-height:1.75;
				letter-spacing:.0625em;
				text-align:justify;
			}
		}
	}
	@media screen and (max-width:750px){
		border-radius:1.5em;
		padding:2em 0;
		.slick1 {
			margin-top:2em;
			.slick-prev,
			.slick-next {
				width:1.5em;
				height:1.5em;
				bottom:auto;
				top:4em;
			}
			.slick-prev {
				left:.5em;
			}
			.slick-next {
				right:.5em;
			}
		}
		.slick1-contents {
			display:block;
			padding:0 1em;
			.img {
				width:40%;
				margin:0 auto;
			}
			.text {
				margin:1em auto 0;
				padding:1.5em;
				&:before,
				&:after {
					width:1.5em;
					height:1.5em;
				}
				p {
					font-size:.875em;
				}
			}
		}
	}
}


.price {
	margin:4em auto;
	.i01 {
		margin:3em auto 1.5em;
		position:relative;
		a {
			display:block;
			position:absolute;
			width: 4.2%;
			height: 4%;
			// background-color:rgba(255,0,0,.2);
			&.l1 {
				left: 55.4%;
				top: 86.6%;
			}
			&.l2 {
				left: 44.6%;
				top: 92.3%;
			}
			&.l3 {
				left: 92%;
				top: 88%;
			}
		}
	}
	.caution1 {
		background-color:#f5f5f5;
		padding:1em;
		margin:1em auto;
		width:98%;
		line-height:1.75;
	}
	.i02 {
		width:98%;
		margin:3em auto 0;
	}
	.caution2 {
		width:98%;
		line-height:1.75;
		margin:1em auto 0;
	}
	.cap1 {
		width:98%;
		margin:2em auto;
		font-size:1.4375em;
		font-weight:600;
		line-height:1.75;
		letter-spacing:.0625em;
	}
	h3 {
		text-align:center;
		font-size:2.5em;
		font-weight:600;
		letter-spacing:.0625em;
		margin:1em auto 0;
		color:#2e475d;
	}
	.i03 {
		margin:1.5em auto;

	}
	.btn-inquiry {
		margin-top:3em;
	}
	@media screen and (max-width:750px){
		.i01 {
			margin:2em auto 1em;
			a {
				width: 7.3%;
				height: 4%;
				&.l1 {
					left: 50.4%;
					top: 88.8%;
				}
				&.l2 {
					left: 49.9%;
					top: 94.6%;
				}
				&.l3 {
					left: 85.4%;
					top: 91.3%;
				}
			}
		}
		.caution1 {
			width:94%;
			font-size:.875em;
		}
		.i02 {
			width:100%;
			margin:1em auto;
		}
		.caution2 {
			width:94%;
			font-size:.875em;
		}
		h3 {
			font-size:1.5em;
		}
		.i03 {
			padding:.5em;
			overflow:auto;
			img {
				max-width:200%;
				width:200%;
			}
		}
		.cap1 {
			font-size:1.125em;
			margin:1em auto;
			width:94%;
		}
	}
}


.omakase {
	color:#2e475d;
	margin:4em auto;
	h2 {
		text-align:center;
		font-size:2.8125em;
		font-weight:600;
		letter-spacing:.0625em;
		margin:0 auto 1em;
	}
	.bg1 {
		background:url(/hubfs/100inc-corp/image/lp/pardot/omakase-bg1.png) center center no-repeat;
		background-size:cover;
	}
	@media screen and (max-width:750px){
		h2 {
			font-size:1.5em;
			line-height:1.375;
		}
	}
}


.c-omakase-clms {
	display:flex;
	margin:0 -1em;
	padding:2em 0;
	> div {
		padding:1em;
    width:50%;
	}
	h3 {
		text-align:center;
		font-size:2.1875em;
	}
	ul {
		li {
			margin:.75em auto;
			padding:.75em 0;
			background-color:#fff;
			border:2px solid #2e475d;
			border-radius:3em;
			text-align:center;
			font-size:1.3125em;
			font-weight:600;
		}
	}
	p {
		font-size:1.125em;
		font-weight:500;
		line-height:1.75;
	}
	@media screen and (max-width:750px){
		display:block;
		margin:0;
		> div {
			width:94%;
			padding:.5em 0;
			margin:0 auto;
		}
		h3 {
			font-size:1.25em;
		}
		ul {
			li {
				font-size:1em;
				display:flex;
				align-items:center;
				justify-content:center;
				height:4em;
			}
		}
		p {
			font-size:.875em;
			width:94%;
			margin:0 auto;
		}
	}
}


.step {
	color:#2e475d;
	margin:4em auto 6em;
	h2 {
		text-align:center;
		font-size:2.8125em;
		font-weight:600;
		letter-spacing:.0625em;
		margin:0 auto 1em;
	}
	.i01 {
		margin:0 auto 3em;
	}
	@media screen and (max-width:750px){
		h2 {
			font-size:1.5em;
		}
	}
}


.about100 {
	border-top:4px solid #d8dfe3;
	border-bottom:4px solid #d8dfe3;
	padding-bottom:3em;
	h2 {
		text-align:center;
		font-size:2.75em;
		font-weight:600;
		letter-spacing:.0625em;
		padding:2em 0;
		border-bottom:4px solid #d8dfe3;
		position:relative;
		&:before {
			content:"";
			display:block;
			position:absolute;
			left:0;
			top:calc(50% - .75em);
			width:1.5em;
			height:1.5em;
			background:url(/hubfs/100inc-corp/image/lp/pardot/logo100.png) center center no-repeat;
			background-size:contain;
		}
	}
	h3 {
		margin:2em auto 1em;
		font-size:2.1875em;
		font-weight:600;
		text-align:center;
	}
	p {
		width:98%;
		font-size:1.4375em;
		line-height:2.25;
		margin:1em auto;
		letter-spacing:.0625em;
	}
	ul {
		display:flex;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		li {
			display:block;
			margin:2em;
			width:12em;
			height:4em;
			img {
				display:block;
				width:100%;
				height:100%;
				object-fit:contain;
			}
		}
	}
	@media screen and (max-width:750px){
		h2 {
			font-size:1.5em;
			&:before {
				left:3%;
			}
		}
		h3 {
			margin:1em auto .75em;
			font-size:1.375em;
		}
		p {
			width:94%;
			font-size:1em;
			line-height:1.75;
			text-align:justify;
		}
		ul {
			padding:0 1em;
			li {
				width:4em;
				height:3em;
				margin:.375em;
			}
		}
	}
}


.faq {
	margin:5em auto;
	@media screen and (max-width:750px){
		margin:2em auto;
	}
}


.c-faq-list1 {
	margin:4em auto;
	width:98%;
	> div {
		+ div {
			margin-top:1.5em;
		}
		border:4px solid #d8dfe3;
		border-radius:2em;
		overflow:hidden;
	}
	.faq-q {
		background-color:#2e475d;
		color:#fff;
		h3 {
			font-size:1.875em;
			font-weight:600;
			letter-spacing:.0625em;
			padding:.5em 1em;
		}
	}
	.faq-a {
		padding:1em 2em;
		h3 {
			font-size:1.875em;
			font-weight:600;
			letter-spacing:.0625em;
			color:#2e475d;
		}
		p {
			margin-top:.5em;
			font-size:1.125em;
			letter-spacing:.0625em;
		}
	}
	@media screen and (max-width:750px){
		width:94%;
		margin:2em auto;
		> div {
			border-radius:1.5em;
		}
		.faq-q {
			h3 {
				font-size:1.125em;
			}
		}
		.faq-a {
			padding:1em;
			h3 {
				font-size:1.125em;
			}
			p {
				font-size:.875em;
			}
		}
	}
}


.contact {
	margin-top:6em;
	.bln1 {
		max-width:950px;
		margin:0 auto -4em;
		z-index:1;
		position:relative;
	}
	.bg1 {
		background-color:#d8dfe3;
		padding:5em 0;
	}
	h2 {
		color:#2e475d;
		text-align:center;
		font-size:3.75em;
		font-weight:600;
		letter-spacing:.0625em;
	}
	.white-wrap {
		width:98%;
		background-color:#fff;
		margin:1em auto;
		padding:2em;
	}
	.btn-totop {
		margin-top:4em;
	}
	@media screen and (max-width:750px){
		margin-top:3em;
		.bln1 {
			width:94%;
			margin:0 auto -2em;
		}
		.bg1 {
			padding:3em 0;
		}
		h2 {
			font-size:1.5em;
		}
		.white-wrap {
			width:94%;
			padding:1.5em 1em;
		}
	}
}


.temp {
	display:none;
}


.mymodal {
	position:fixed;
	left:0;
	top:0;
	width:100%;
	height:100%;
	display:flex;
	justify-content:center;
	align-items:center;
	padding:4em 2em;
	opacity:0;
	z-index:-1;
	transition:.3s;
	> .modal-close {
		display:block;
		position:absolute;
		left:0;
		top:0;
		width:100%;
		height:100%;
		background-color:rgba(0,0,0,.8);
	}
	.mymodal-inner {
		position:relative;
		max-width:1180px;
		> .modal-close {
			position:absolute;
			right:0;
			top:-4em;
			width:4em;
			height:4em;
			&:before,
			&:after {
				content:"";
				display:block;
				position:absolute;
				left:25%;
				top:calc(50% - 1px);
				width:50%;
				border-top:2px solid #fff;
				transform:rotate(45deg);
			}
			&:after {
				transform:rotate(-45deg);
			}
		}
		.mymodal-contents {
			max-height:calc(100vh - 8em);
			overflow:auto;
		}
	}
	&.on {
		z-index:10000;
		opacity:1;
	}
	@media screen and (max-width:750px){
		padding:70px 0 1em;
		.mymodal-inner {
			width:94%;
			> .modal-close {
				top:-70px;
				right:0;
				width:70px;
				height:70px;
			}
			.mymodal-contents {
				max-height:calc(100vh - 70px - 1em);
			}
		}
	}
}


.modal-benefits {
	max-width:1180px;
	color:#2e475d;
	.hd {
		background-color:#d8dfe3;
		padding:2em 3em 1.5em;
		border-radius:2em 2em 0 0;
		h2 {
			font-size:3.75em;
			font-weight:600;
			letter-spacing:.0625em;
		}
		p {
			font-size:1.875em;
			font-weight:600;
			letter-spacing:.0625em;
		}
	}
	.body {
		background-color:#fff;
		padding:3em;
		border-radius:0 0 2em 2em;
	}
	@media screen and (max-width:750px){
		.hd {
			padding:1em 1.5em;
			border-radius:1.5em 1.5em 0 0;
			h2 {
				font-size:1.5em;
			}
			p {
				font-size:.875em;
			}
		}
		.body {
			padding:1em 1.5em 2em;
		}
	}
}


.c-modal-benefits-ti {
	display:flex;
	.text {
		flex:1;
		margin-right:2em;
		h3 {
			font-size:2em;
			font-weight:600;
			letter-spacing:.0625em;
		}
		p {
			margin-top:1em;
			font-size:1.125em;
			line-height:2;
			text-align:justify;
		}
	}
	.img {
		width:32.375em;
	}
	+ .c-modal-benefits-ti {
		margin-top:3em;
		padding-top:3em;
		border-top:2px solid #ccc;
	}
	@media screen and (max-width:750px){
		display:block;
		.text {
			margin:0;
			h3 {
				font-size:1.125em;
			}
			p {
				font-size:.875em;
				line-height:1.75;
				margin-top:.5em;
			}
		}
		.img {
			width:100%;
			margin:1em auto 0;
		}
		+ .c-modal-benefits-ti {
			margin-top:1.5em;
			padding-top:1.5em;
		}
	}
}


.c-modal-benefits-ti2 {
	+ .c-modal-benefits-ti2 {
		margin-top:2em;
		padding-top:2em;
		border-top:.25em solid #d8dfe3;
	}
	.text {
		h3 {
			font-size:1.875em;
			font-weight:600;
			letter-spacing:.0625em;
		}
		p {
			margin-top:1em;
			font-size:1.125em;
			line-height:2;
			text-align:justify;
		}
	}
	.img {
		margin-top:2em;
	}
}


.modal-price-detail {
	max-width:1180px;
	padding:3em;
	background-color:#fff;
	border-radius:2em;
	@media screen and (max-width:750px){
		padding:1.5em;
		border-radius:1em;
		overflow:auto;
		img {
			max-width:200%;
			width:200%;
		}
	}
}

.contact .white-wrap{
padding:2em 10em;
}
.contact form fieldset {
    border: 0;
    padding: 0;
    margin: 0;
    max-width: 500px;
}

#footer .social a,
#footer .copyright div a {
font-size: 14px;
}
#footer p.isms-text {
padding: 10px 0 0 0px;
}
	@media screen and (max-width:1000px){
 .contact .white-wrap{
padding:2em 2em;
}   
}
	@media screen and (max-width:700px){
 .contact .white-wrap{
padding:2em 0em;
}   
}