@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;500&display=swap');

html, body {
	margin: 0;
	overflow-x: hidden;
	padding: 0;
	max-width: 100%;
}
body {
	color: #2B3848;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 28px;
	font-weight: 300;
	line-height: 1.8;
	margin: 0 auto;
	width: 100%;
	max-width: 750px;
}
a {
	color: #2B3848;
	text-decoration: none;
	transition: ease .3s;
}
div {
	box-sizing: border-box;
}
h1, h2, h3, h4, h5 {
	box-sizing: border-box;
	font-weight: 500;
	line-height: 1.6;
	margin: 0;
	padding: 0;
}
ul, ol, li, dl, dt, dd {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
ul li, ol li {
	list-style-type: none;
}
figure, figcaption, p {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
img {
	vertical-align: bottom;
	max-width: 100%;
}

main, section, article {
	box-sizing: border-box;
	display: block;
}

/** flex box **/
.flexBox {
	display: flex;
	flex-wrap: wrap;
}

/** 背景色 **/
.bc-gray {
	background-color: #F7F7F7;
}
.bc-pink {
	background-color: #F7F0F0;
}
.bc-blue {
	background-color: #F5FEFF;
}
.bc-yellow {
	background-color: #FFF7E5;
}

@media screen and (max-width: 750px) {
	body {
		font-size: 3.8vw;
	}
}

/** ---------------------
	header
--------------------- **/
header {
	background-color: #fff;
	box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1);
	box-sizing: border-box;
	position: fixed;
	padding: 0 30px;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	height: 100px;
	width: 100%;
	max-width: 750px;
	z-index: 999;
}
header .inner {
	align-items: center;
	height: 100%;
}
header .logo {
	line-height: 1.0;
	width: 230px;
}
header .cv {
	background-color: #FF779C;
	border-radius: 50px;
	box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
	color: #fff;
	display: block;
	font-size: 36px;
	font-weight: 500;
	margin-left: auto;
	text-align: center;
	width: 330px;
}
.c_blue header .cv {
	background-color: #92C8E0;
}
.c_yellow header .cv {
	background-color: #F5C74B;
}
header .cv:hover {
	opacity: .7;
}
@media screen and (max-width: 750px) {
	header {
		padding: 0 3vw;
		height: 14vw;
	}
	header .logo {
		width: 34vw;
	}
	header .cv {
		border-radius: 10vw;
		font-size: 4.8vw;
		padding: .5vw 0;
		width: 46vw;
	}
}

/** ---------------------
	main
--------------------- **/
main {
	margin-top: 100px;
}
@media screen and (max-width: 750px) {
	main {
		margin-top: 14vw;
	}
}

/** -- headline_1 -- **/
.headline_1 {
	font-size: 48px;
	margin-bottom: 40px;
	padding-top: 35px;
	position: relative;
	text-align: center;
}
.headline_1.pink {
	color: #FF779C;
}
.headline_1.blue {
	color: #92C8E0;
}
.headline_1.yellow {
	color: #F5C74B;
}
.headline_1::before {
	background: url("img/koujitsu-maru.png") no-repeat center / 100%;
	content: '';
	display: block;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 0;
	height: 30px;
	width: 54px;
}
.c_blue .headline_1::before {
	background: url("img/koujitsu-maru-blue.png") no-repeat center / 100%;
}
.c_yellow .headline_1::before {
	background: url("img/koujitsu-maru-yellow.png") no-repeat center / 100%;
}
@media screen and (max-width: 750px) {
	.headline_1 {
		font-size: 6.5vw;
		margin-bottom: 6vw;
		padding-top: 6.5vw;
	}
	.headline_1::before {
		height: 5vw;
		width: 8.5vw;
	}
}

/** -- cv_block -- **/
.cv_block {
	margin-bottom: 80px;
	margin-top: -20px;
	padding: 0 30px;
}
.cv_block img {
	width: 650px;
}
.cv_block a {
	background-color: #FF779C;
	border-radius: 60px;
	box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
	color: #fff;
	display: block;
	font-size: 48px;
	font-weight: 500;
	padding: 6px 0;
	text-align: center;
}
.c_blue .cv_block a {
	background-color: #92C8E0;
}
.c_yellow .cv_block a {
	background-color: #F5C74B;
}
.cv_block a:hover {
	opacity: .7;
}
@media screen and (max-width: 750px) {
	.cv_block {
		margin-bottom: 10vw;
		margin-top: -3vw;
		padding: 0 4vw;
	}
	.cv_block img {
		width: 86vw;
	}
	.cv_block a {
		border-radius: 60px;
		font-size: 6.4vw;
		padding: 1.4vw 0;
	}
}

/** -- fv -- **/
.fv {
	position: relative;
}
.fv h2 {
	font-size: 60px;
	padding: 30px;
	position: absolute;
	bottom: 70px;
	left: 0;
}
.c_blue .fv h2,
.c_yellow .fv h2 {
	background-color: rgba(255, 255, 255, .55);
}
@media screen and (max-width: 750px) {
	.fv h2 {
		font-size: 8.2vw;
		padding: 4vw;
		bottom: 9vw;
		left: 0;
	}
}

/** -- appeal -- **/
.appeal {
	padding: 80px 30px;
}
.appeal .text_image {
	margin-bottom: 50px;
}
@media screen and (max-width: 750px) {
	.appeal {
		padding: 14vw 4vw;
	}
	.appeal .text_image {
		margin-bottom: 7vw;
	}
}

/** -- overview -- **/
.overview {
	padding: 80px 30px;
}
.overview li {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 20px;
}
@media screen and (max-width: 750px) {
	.overview {
		padding: 14vw 4vw;
	}
	.overview li {
		font-size: 4.2vw;
		margin-bottom: 3vw;
	}
}

/** -- worries -- **/
.worries {
	padding: 80px 30px;
}
.worries .headline_1 {
	margin-bottom: 50px;
}
.worries article {
	margin-bottom: 100px;
	position: relative;
}
.worries article figure {
	width: 540px;
}
.worries article:nth-child(2n) figure {
	margin-left: auto;
}
.worries article p.circle {
	background-color: #fff;
	border: solid 1px #FF779C;
	border-radius: 50%;
	padding-top: 25px;
	position: absolute;
	top: 30px;
	text-align: center;
	height: 200px;
	width: 200px;
}
.c_blue .worries article p.circle {
	border: solid 1px #92C8E0;
}
.c_yellow .worries article p.circle {
	border: solid 1px #F5C74B;
}
.worries article:nth-child(2n-1) p.circle {
	right: 50px;
}
.worries article p.circle span {
	color: #FF779C;
	display: block;
	font-weight: 500;
	margin-bottom: 10px;
}
.c_blue .worries article p.circle span {
	color: #92C8E0;
}
.c_yellow .worries article p.circle span {
	color: #F5C74B;
}
.worries article p.circle img {
	height: 77px;
	width: auto;
}
.worries article .text {
	background-color: rgba(255, 255, 255, .75);
	display: table;
	font-size: 32px;
	font-weight: 500;
	position: absolute;
	top: 260px;
	padding: 15px 40px;
}
.worries article:nth-child(2n-1) .text {
	right: 0;
}
@media screen and (max-width: 750px) {
	.worries {
		padding: 14vw 4vw;
	}
	.worries .headline_1 {
		margin-bottom: 8vw;
	}
	.worries article {
		margin-bottom: 16vw;
	}
	.worries article figure {
		width: 76vw;
	}
	.worries article p.circle {
		padding-top: 3vw;
		top: 5vw;
		height: 27vw;
		width: 27vw;
	}
	.worries article:nth-child(2n-1) p.circle {
		right: 4vw;
	}
	.worries article p.circle span {
		margin-bottom: 1.5vw;
	}
	.worries article p.circle img {
		height: 11vw;
	}
	.worries article .text {
		font-size: 4.2vw;
		top: 36vw;
		padding: 2vw 6.5vw;
	}
}

/** -- about -- **/
.about {
	background: url("img/image-4.png") no-repeat center / cover;
	padding: 30px;
}
.about .inner {
	background-color: rgba(255, 255, 255, .75);
	padding: 80px 30px;
}
.about .headline_1 {
	line-height: 1.4;
}
.about li {
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 50px;
	padding-left: 65px;
	position: relative;
}
.about li:last-child {
	margin-bottom: 0;
}
.about li::before {
	background: url("img/icon-check.png") no-repeat center / 100%;
	content: '';
	display: block;
	position: absolute;
	left: 0;
	top: 10px;
	height: 44px;
	width: 44px;
}
.c_blue .about li::before {
	background: url("img/icon-check-blue.png") no-repeat center / 100%;
}
.c_yellow .about li::before {
	background: url("img/icon-check-yellow.png") no-repeat center / 100%;
}
@media screen and (max-width: 750px) {
	.about {
		padding: 4vw;
	}
	.about .inner {
		padding: 14vw 4vw;
	}
	.about li {
		font-size: 4.2vw;
		margin-bottom: 8vw;
		padding-left: 9vw;
	}
	.about li::before {
		top: 1vw;
		height: 6.5vw;
		width: 6.5vw;
	}
}

/** -- product -- **/
.product {
	padding: 80px 30px;
}
.product .headline_1 {
	margin-bottom: 20px;
}
.product .exp {
	margin-bottom: 50px;
}
.product figure {
	margin-bottom: 50px;
}
.product figure:last-child {
	margin-bottom: 0;
}
.product figure img {
	margin-bottom: 20px;
}
.product figcaption {
	font-size: 32px;
	font-weight: 500;
	text-align: center;
}
@media screen and (max-width: 750px) {
	.product {
		padding: 14vw 4vw;
	}
	.product .headline_1 {
		margin-bottom: 3vw;
	}
	.product .exp {
		margin-bottom: 7vw;
	}
	.product figure {
		margin-bottom: 7vw;
	}
	.product figure img {
		margin-bottom: 3vw;
	}
	.product figcaption {
		font-size: 4.2vw;
	}
}

/** -- elected -- **/
.elected {
	padding: 80px 30px;
}
.elected article {
	margin-bottom: 80px;
}
.elected article:last-child {
	margin-bottom: 0;
}
.elected article h3 {
	background-color: #fff;
	font-size: 32px;
	margin-bottom: 30px;
	margin-left: 40px;
	margin-right: -30px;
	margin-top: 40px;
	padding: 15px;
	padding-left: 60px;
	position: relative;
}
.elected article h3 img {
	position: absolute;
	left: -40px;
	top: 50%;
	transform: translateY(-50%);
	width: 90px;
}
@media screen and (max-width: 750px) {
	.elected {
		padding: 14vw 4vw;
	}
	.elected article {
		margin-bottom: 14vw;
	}
	.elected article h3 {
		font-size: 4.2vw;
		margin-bottom: 5vw;
		margin-left: 6vw;
		margin-right: -4vw;
		margin-top: 6vw;
		padding: 3vw;
		padding-left: 11vw;
	}
	.elected article h3 img {
		left: -6vw;
		width: 15vw;
	}
}

/** -- flow -- **/
.flow {
	padding: 80px 30px;
}
.flow li {
	background-color: #fff;
	border: solid 3px #FF779C;
	border-radius: 4px;
	color: #FF779C;
	font-size: 32px;
	font-weight: 500;
	line-height: 1.4;
	margin-bottom: 60px;
	padding: 25px 0;
	position: relative;
	text-align: center;
}
.c_blue .flow li {
	border: solid 3px #92C8E0;
	color: #92C8E0;
}
.c_yellow .flow li {
	border: solid 3px #F5C74B;
	color: #F5C74B;
}
.flow li:last-child {
	margin-bottom: 0;
}
.flow li::after {
	background: url("img/icon-arrow.png") no-repeat center / 100%;
	content: '';
	display: block;
	position: absolute;
	bottom: -45px;
	left: 50%;
	transform: translateX(-50%);
	height: 20px;
	width: 40px;
}
.c_blue .flow li::after {
	background: url("img/icon-arrow-blue.png") no-repeat center / 100%;
}
.c_yellow .flow li::after {
	background: url("img/icon-arrow-yellow.png") no-repeat center / 100%;
}
.flow li:last-child::after {
	display: none;
}
.flow li span {
	font-size: 28px;
}
.flow li.pink {
	background-color: #FFF4F7;
}
.flow li.blue {
	background-color: #DFF2F4;
}
.flow li.yellow {
	background-color: #FFEBBD;
}
@media screen and (max-width: 750px) {
	.flow {
		padding: 14vw 4vw;
	}
	.flow li {
		font-size: 4.5vw;
		margin-bottom: 10vw;
		padding: 4vw 0;
	}
	.flow li::after {
		bottom: -8vw;
		height: 4vw;
		width: 7vw;
	}
	.flow li span {
		font-size: 3.8vw;
	}
}

/** -- faq -- **/
.faq {
	padding: 80px 30px;
}
.faq dl {
	border-bottom: dashed 2px #FF779C;
	margin-bottom: 20px;
	padding-bottom: 20px;
}
.c_blue .faq dl {
	border-bottom: dashed 2px #92C8E0;
}
.c_yellow .faq dl {
	border-bottom: dashed 2px #F5C74B;
}
.faq dt,
.faq dd {
	position: relative;
}
.faq dt {
	color: #FF779C;
	cursor: pointer;
	font-weight: 500;
	padding: 20px 0;
	padding-left: 70px;
}
.c_blue .faq dt {
	color: #92C8E0;
}
.c_yellow .faq dt {
	color: #F5C74B;
}
.faq dd {
	background-color: #F7F0F0;
	display: none;
	margin: 0 -30px;
	padding: 20px 30px;
	padding-left: 100px;
}
.c_blue .faq dd {
	background-color: #F5FEFF;
}
.c_yellow .faq dd {
	background-color: #FFF7E5;
}
.faq dt::before,
.faq dt::after,
.faq dd::before {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	content: '';
	display: block;
	position: absolute;
	top: 30px;
	height: 48px;
	width: 48px;
}
.faq dt::before {
	background-image: url("img/icon-q.png");
	left: 0;
}
.c_blue .faq dt::before {
	background-image: url("img/icon-q-blue.png");
}
.c_yellow .faq dt::before {
	background-image: url("img/icon-q-yellow.png");
}
.faq dt::after {
	background-image: url("img/icon-plus.png");
	right: 0;
}
.c_blue .faq dt::after {
	background-image: url("img/icon-plus-blue.png");
}
.c_yellow .faq dt::after {
	background-image: url("img/icon-plus-yellow.png");
}
.faq dt.open::after {
	background-image: url("img/icon-minus.png");
	right: 0;
}
.c_blue .faq dt.open::after {
	background-image: url("img/icon-minus-blue.png");
}
.c_yellow .faq dt.open::after {
	background-image: url("img/icon-minus-yellow.png");
}
.faq dd::before {
	background-image: url("img/icon-a.png");
	left: 30px;
}
@media screen and (max-width: 750px) {
	.faq {
		padding: 14vw 4vw;
	}
	.faq dl {
		margin-bottom: 3vw;
		padding-bottom: 3vw;
	}
	.faq dt {
		padding: 3vw 0;
		padding-left: 10vw;
	}
	.faq dd {
		margin: 0 -4vw;
		padding: 3vw 4vw;
		padding-left: 14vw;
	}
	.faq dt::before,
	.faq dt::after,
	.faq dd::before {
		top: 4vw;
		height: 7.4vw;
		width: 7.4vw;
	}
	.faq dd::before {
		left: 4vw;
	}
}

/** -- contact -- **/
.contact {
	padding: 80px 30px;
}
.contact dl {
	margin-bottom: 60px;
}
.contact dt {
	margin-bottom: 15px;
}
.contact dt .must {
	color: #FF779C;
	margin-left: 10px;
}
.c_blue .contact dt .must {
	color: #92C8E0;
}
.c_yellow .contact dt .must {
	color: #F5C74B;
}
.contact dt p {
	font-size: 24px;
	line-height: 1.4;
	margin-top: 10px;
}
.contact dd {
	margin-bottom: 30px;
}
.contact .policy_text {
	background-color: #fff;
	border: solid 1px #333333;
	border-radius: 4px;
	margin-bottom: 30px;
	padding: 20px;
	overflow-y: scroll;
	height: 300px;
	width: 100%;
}
.contact .agree {
	margin-bottom: 50px;
	text-align: center;
}
.contact select {
	border: solid 1px #D6D6D6;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 28px;
	padding: 20px;
	height: 74px;
	width: 100%;
}
.contact input {
	border: solid 1px #D6D6D6;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 28px;
	padding: 20px;
	height: 74px;
	width: 100%;
}
.contact textarea {
	border: solid 1px #D6D6D6;
	border-radius: 4px;
	box-sizing: border-box;
	font-size: 28px;
	padding: 20px;
	height: 300px;
	width: 100%;
}
.contact input[type="submit"] {
	background-color: #FF779C;
	border: none;
	border-radius: 100px;
	box-shadow: 2px 2px 8px 0 rgba(0, 0, 0, .2);
	color: #fff;
	cursor: pointer;
	font-size: 48px;
	font-weight: 500;
	transition: ease .3s;
	height: 100px;
}
.c_blue .contact input[type="submit"] {
	background-color: #92C8E0;
}
.c_yellow .contact input[type="submit"] {
	background-color: #F5C74B;
}
.contact input[type="submit"]:hover {
	opacity: .7;
}
.wpcf7-not-valid-tip {
	font-size: 21px;
}
@media screen and (max-width: 750px) {
	.contact {
		padding: 14vw 4vw;
	}
	.contact dl {
		margin-bottom: 10vw;
	}
	.contact dt {
		margin-bottom: 2vw;
	}
	.contact dt .must {
		margin-left: 10px;
	}
	.contact dt p {
		font-size: 3.4vw;
		margin-top: 1.5vw;
	}
	.contact dd {
		margin-bottom: 4vw;
	}
	.contact .policy_text {
		margin-bottom: 5vw;
		padding: 3vw;
		height: 38vw;
	}
	.contact .agree {
		margin-bottom: 8vw;
	}
	.contact select {
		font-size: 3.8vw;
		padding: 3vw;
		height: 12vw;
	}
	.contact input {
		font-size: 3.8vw;
		padding: 3vw;
		height: 12vw;
	}
	.contact textarea {
		font-size: 3.8vw;
		padding: 3vw;
		height: 40vw;
	}
	.contact input[type="submit"] {
		border-radius: 12vw;
		font-size: 6.8vw;
		height: 16vw;
	}
	.wpcf7-not-valid-tip {
		font-size: 3.6vw;
	}
}

/** ---------------------
	footer
--------------------- **/
footer {
	background-color: #333333;
	padding: 30px 0;
}
footer .copyright {
	color: #fff;
	font-size: 24px;
	text-align: center;
}
@media screen and (max-width: 750px) {
	footer {
		padding: 4vw 0;
	}
	footer .copyright {
		font-size: 3.6vw;
	}
}