@charset "utf-8";
/*----------------------------
	header
-----------------------------*/
.header {
	opacity: 0;
}
.is--loaded .header {
	animation: mvfadeIn .8s linear 3s forwards;
}
/*----------------------------
	main visual
-----------------------------*/
.mv {
	aspect-ratio: 1440/788;
	position: relative;
	overflow: hidden;
	background: linear-gradient(to top,  var(--base-color) 0,var(--base-color) 127rem, transparent 127rem ,transparent 100%);
}
.mv__title__outer {
	opacity: 0;
	display: inline-block;
	top: 272rem;
	left: 140rem;
	position: absolute;
	z-index: 1;
}
.is--loaded .mv__title__outer {
	animation: mvfadeIn .4s linear 2.7s forwards;
}
.mv__title {
	font-size: 24rem;
	font-weight: bold;
	line-height: 2;
	letter-spacing: 0.04em;
	margin-bottom: 15rem;
}
.mv__title span {
	display: block;
}
.mv__title__outer .link--main {
	margin: auto;
}
.mv__circle {
	border-radius: 50%;
	position: absolute;
}
.mv__circle.bg--main {
	aspect-ratio: 649/649;
	width: 649rem;
	top: -98rem;
	right: -119rem;
	transform: translate(-60rem,60rem);
}
.is--loaded .mv__circle.bg--main {
	animation: circleBlue 1.5s ease-in forwards;
}
.mv__circle.bg--main img {
	width: 496rem;
	height: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	animation: spin 30s linear infinite;
}
.mv__circle.bg--accent {
	aspect-ratio: 515/515;
	width: 515rem;
	color: #ffca7b;
	font-size: 160rem;
	font-weight: bold;
	line-height: 1;
	letter-spacing: 0.07em;
	left: -203rem;
	bottom: 0;
	transform: translateX(100rem);
	overflow: hidden;
	display: flex;
}
.is--loaded .mv__circle.bg--accent {
	animation: circleOrange 1.5s ease-in forwards;
}
.mv__circle.bg--accent .text__outer {
	display: flex;
	align-items: center;
	gap: .5em;
	animation: scrollText 20s linear infinite;
}
.mv__img {
	width: 879rem;
	height: 217rem;
	position: absolute;
	bottom: 37rem;
    right: 58rem;
}
.img--mv {
	position: absolute;
	height: auto;
	bottom: 0;
	z-index: 2;
	opacity: 0;
	transform: translateY(20rem);
}
.img--mv--1 {
	width: 213rem;
	left: 0;
}
.img--mv--2 {
	width: 212rem;
	left: 214rem;
}
.img--mv--3 {
	width: 107rem;
	left: 432rem;
}
.img--mv--4 {
	width: 196rem;
	left: 552rem;
}
.img--mv--5 {
	width: 121rem;
	right: 0;
}
.img--town {
	width: 813rem;
	height: auto;
	position: absolute;
	top: 0;
	right: 25rem;
	z-index: 1;
	opacity: 0;
}
.is--loaded .img--mv--1 {
	animation: mvFadeInUp .4s linear 1.7s forwards;
}
.is--loaded .img--mv--2 {
	animation: mvFadeInUp .4s linear 1.9s forwards;
}
.is--loaded .img--mv--3 {
	animation: mvFadeInUp .4s linear 2.1s forwards;
}
.is--loaded .img--mv--4 {
	animation: mvFadeInUp .4s linear 2.3s forwards;
}
.is--loaded .img--mv--5 {
	animation: mvFadeInUp .4s linear 2.5s forwards;
}
.is--loaded .img--town {
	animation: mvfadeIn .8s linear 1.5s forwards;
}
.img--stripe {
	position: absolute;
	height: auto;
	opacity: 0;
}
.img--stripe--1 {
	transform: rotate(-24.45deg);
	width: 48rem;
	top: 33rem;
	left: 23.04%;
}
.img--stripe--2 {
	transform: rotate(25.23deg);
	width: 54rem;
	top: -7rem;
	left: 53.378%;
}
.img--stripe--3 {
	transform: rotate(25.39deg);
	width: 40rem;
	top: 271rem;
	left: 16.554%;
}
.img--stripe--4 {
	transform: rotate(-24.29deg);
	width: 40rem;
	top: 145rem;
	left: 45.27%;
}
.img--stripe--5 {
	transform: rotate(25.23deg);
	width: 75rem;
	top: 380rem;
	right: 37.905%;
}
.img--stripe--6 {
	transform: rotate(-24.29deg);
	width: 40rem;
	top: 496rem;
	right: 22.648%;
}
/* 7だけaboutの中 */
.img--stripe--7 {
	transform: rotate(-24.45deg);
	width: 48rem;
	top: 39rem;
	right: 39.054%;
}
.is--loaded .img--stripe--1 {
	animation: mvfadeIn .8s linear 1s forwards;
}
.is--loaded .img--stripe--2 {
	animation: mvfadeIn .8s linear 1.6s forwards;
}
.is--loaded .img--stripe--3 {
	animation: mvfadeIn .8s linear 1.9s forwards;
}
.is--loaded .img--stripe--4 {
	animation: mvfadeIn .8s linear 2.4s forwards;
}
.is--loaded .img--stripe--5 {
	animation: mvfadeIn .8s linear 1.3s forwards;
}
.is--loaded .img--stripe--6 {
	animation: mvfadeIn .8s linear 2.1s forwards;
}
.is--loaded .img--stripe--7 {
	animation: mvfadeIn .8s linear 2.7s forwards;
}
@keyframes spin {
	0%{
		transform: rotate(0deg);
	}
	100%{
		transform: rotate(360deg);
	}
}
@keyframes scrollText {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-50%); }
  }
@keyframes circleBlue {
	0%{
		transform: translate(-60rem,60rem);
	}
	100%{
		transform: translate(0,0);
	}
}
@keyframes circleOrange {
	0%{
		transform: translateX(100rem);
	}
	100%{
		transform: translateX(0);
	}
}
@keyframes mvFadeInUp {
	0%{
		opacity: 0;
		transform: translateY(20rem);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes mvfadeIn {
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*----------------------------
	選ばれる3つの理由
-----------------------------*/
.sec--about {
	background: linear-gradient(180deg, var(--base-color) 0, var(--base-color) 205rem, #fff 205rem, #fff 100%);
	padding-top: 205rem;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: flex-start;
	gap: 152rem 0;
	position: relative;
	z-index: 1;
}
.sec--about::before {
	content: "WEB DESIGN";
	color: var(--gray);
	font-weight: bold;
	letter-spacing: 0.07em;
	line-height: 1;
	font-size: 160rem;
	position: absolute;
	-ms-writing-mode: tb-rl;
  	writing-mode: vertical-rl;
	left: -15rem;
	top: 124rem;
	z-index: -1;
}
.list--about {
	width: 984rem;
	margin-top: 88rem;
	margin-left: 80rem;
}
.list--about__item {
	display: flex;
	align-items: center;
	gap: 48rem;
	justify-content: flex-end;
}
.list--about__item.reverse {
	flex-direction: row-reverse;
}
.list--about__item .text__outer {
	position: relative;
	width: 370rem;
}
.list--about__item .text__outer::before {
	content: "";
	background: url(../img/icon_good.png) center / 100% no-repeat;
	aspect-ratio: 157/134;
	width: 78.5rem;
	position: absolute;
	top: -56rem;
	left: -39rem;
}
.list--about__item .title {
	font-size: var(--size-24);
	line-height: 1.7;
	letter-spacing: 0.04em;
	margin-bottom: 17rem;
}
.list--about__item .text {
	font-weight: 500;
	line-height: 1.8;
}
.list--about__item img {
	width: 336rem;
	height: auto;
}
.content--about {
	padding-top: 128rem;
	padding-bottom: 128rem;
	width: 100%;
}
.content--about__title {
	font-size: var(--size-24);
	color: #fff;
	font-weight: bold;
	line-height: 1.7;
	letter-spacing: 0.04em;
	margin-left: 141rem;
	margin-bottom: 9rem;
	position: relative;
	padding-right: 212rem;
	max-width: max-content;
}
.content--about__title::before {
	content: "";
	background: url(../img/illust_woman.png)center/100% no-repeat;
	aspect-ratio: 212/204;
	width: 212rem;
	position: absolute;
	right: 0;
	bottom: -18rem;
}
.content--about__title em {
	font-size: var(--size-32);
}
.list--problem {
	background-color: #fff;
	width: 1062rem;
	border-radius: 20rem 0 0 20rem;
	margin-left: auto;
	padding: 40rem 128rem;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	gap: 40rem;
	position: relative;
}
.list--problem__item {
	font-size: 16rem;
	background-color: var(--main-color);
	color: #fff;
	line-height: 1.3;
	letter-spacing: 0.04em;
	font-weight: 800;
	width: 200rem;
	height: 200rem;
	border-radius: 200rem 200rem 0 200rem;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rem;
	box-sizing: border-box;
}
.list--problem__item.left {
	border-radius: 200rem 200rem 200rem 0;
}
.list--problem__item em {
	font-size: 24rem;
	color: var(--yellow);
}
/*----------------------------
	料金プラン
-----------------------------*/
.sec--plan {
	padding-bottom: 128rem;
	font-size: 16rem;
}
.list--plan {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24rem;
	margin-bottom: 80rem;
}
.list--plan__item {
	width: calc((100% - 72rem)/4);
	border-radius: 20rem;
	background-color: var(--base-color);
	overflow: hidden;
	box-sizing: border-box;
}
.list--plan__item.orange {
	border: solid 3px var(--accent-color);
}
.list--plan__item.red {
	border: solid 3px var(--red);
}
.list--plan__item.pink {
	border: solid 3px var(--pink);
}
.list--plan__item.blue {
	border: solid 3px var(--main-color);
}
.list--plan__item .title {
	color: #fff;
	font-weight: 700;
	padding: 12rem;
	text-align: center;
}
.orange .title,.orange .price,
.orange .list--check__item::before {
	background-color: var(--accent-color);
}
.red .title,.red .price,
.red .list--check__item::before {
	background-color: var(--red);
}
.pink .title,.pink .price,
.pink .list--check__item::before {
	background-color: var(--pink);
}
.blue .title,.blue .price,
.blue .list--check__item::before {
	background-color: var(--main-color);
}
.list--plan__item .text__outer {
	padding: 24rem 16rem 20rem;
	font-weight: 500;
	box-sizing: border-box;
	height: 152rem;
}
.orange .text__outer,
.orange .example {
	color: var(--accent-color);
}
.red .text__outer,
.red .example {
	color: var(--red);
}
.pink .text__outer,
.pink .example {
	color: var(--pink);
}
.blue .text__outer,
.blue .example {
	color: var(--main-color);
}
.list--plan__item .list--check {
	background-color: #fff;
	padding: 24rem 15rem;
	font-size: 14rem;
	line-height: 1;
}
.list--check__item {
	padding-left: 22rem;
	position: relative;
	display: flex;
	justify-content: space-between;
}
.list--check__item::before {
	content: "";
	aspect-ratio: 1/1;
	width: 14rem;
	mask: url(../img/icon_check.png) no-repeat center center / contain;
    -webkit-mask: url(../img/icon_check.png) no-repeat center center / contain;
	position: absolute;
	top: 0;
	left: 0;
}
.list--check__item + .list--check__item {
	margin-top: 8rem;
}
.example__outer {
	height: 130rem;
}
.list--plan__item .example {
	text-align: center;
	font-size: 14rem;
	line-height: 1;
	padding: 9rem;
}
.list--plan__item .example__text {
	padding: 8rem 16rem;
	font-size: 14rem;
	line-height: 1.7;
}
.list--plan__item .price {
	color: #fff;
	font-size: 24rem;
	font-weight: 500;
	line-height: 1.7;
	text-align: center;
}
.content--plan {
	display: flex;
	align-items: flex-end;
	gap: 28rem;
}
.content--plan__title {
	font-size: var(--size-32);
	line-height: 1.7;
	letter-spacing: 0.04em;
	font-weight: 500;
	text-align: center;
	min-width: max-content;
	background: url(../img/bg_yellow.png) top 17rem center / 100% no-repeat;
}
.content--plan__title::after {
	content: "";
	background: url(../img/illust_woman_2.png) center / 100% no-repeat;
	aspect-ratio: 152/168;
	width: 152rem;
	display: block;
	margin-left: 37rem;
	margin-top: 16rem;
}
.content--plan__text {
	width: 68.346%;
}
.content--plan__text .title {
	color: var(--main-color);
	font-size: var(--size-24);
	font-weight: 800;
	line-height: 1.7;
	letter-spacing: 0.04em;
	padding: 0 29rem;
	box-sizing: border-box;
	margin: 0 auto 19rem;
	position: relative;
	max-width: max-content;
}
.content--plan__text .title::before,
.content--plan__text .title::after {
	content: "";
	width: 45rem;
	height: 2rem;
	background-color: var(--main-color);
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
}
.content--plan__text .title::before {
	left: -15rem;
	transform: rotate(62deg);
}
.content--plan__text .title::after {
	right: -15rem;
	transform: rotate(-62deg);
}
.content--plan__text .text {
	font-weight: 500;
	letter-spacing: 0.04em;
	line-height: 1.7;
}
.content--plan__text .text + .text {
	margin-top: 1em;
}
/*----------------------------
	制作実績
-----------------------------*/
.sec--works {
	background-color: var(--base-color);
	padding: 40rem 0 152rem;
}
.sec--works .sec__title__img {
	margin-top: 0;
}
.list--works,.list--works .slick-track {
	display: flex;
	gap: 48rem;
}
.list--works a {
	color: var(--font-color);
	transition: .3s;
}
.list--works a:hover {
	opacity: .6;
}
.list--works__item {
	padding: 206rem 44rem 0 87rem;
	box-sizing: border-box;
	position: relative;
}
.list--works__item img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.list--works__item .title {
	font-size: var(--size-14);
	font-weight: 500;
	margin-bottom: 8rem;
}
.list--works__item .list {
	display: flex;
	flex-wrap: wrap;
	gap: 8rem;
}
.list--works__item .list__item {
	background-color: #fff;
	border: 1px solid var(--main-color);
	font-size: var(--size-12);
	font-weight: 500;
	color: var(--main-color);
	line-height: 1;
	padding: 4rem 8rem;
	box-sizing: border-box;
}
/*----------------------------
	お客様の声
-----------------------------*/
.sec--client {
	padding: 152rem 0;
	position: relative;
}
.bg--border::before,
.bg--border::after {
	content: "";
	height: 148rem;
	width: 100%;
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	z-index: -1;
}
.bg--border::before {
	background: repeating-linear-gradient(-45deg, transparent,transparent 5rem,var(--main-color) 5rem,var(--main-color) 7rem);
	transform: translateY(-50%);
}
.bg--border::after {
	background-color: var(--main-color);
	transform: translateY(50%);
}
.sec--client .bg--gray {
	padding: 64rem 40rem 64rem 62rem;
	border-radius: 20rem;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	box-sizing: border-box;
	width: 80%;
}
.sec--client .title__outer {
	width: 33.802%;
	color: var(--main-color);
	margin-top: 66rem;
	position: relative;
}
.sec--client .title__outer::after {
	content: "";
	background: url(../img/illust_woman_3.png) center / 100% no-repeat;
	aspect-ratio: 344/249;
	width: 344rem;
	display: block;
	position: relative;
	right: -91rem;
	top: 40rem;
}
.title__outer .title--en {
	font-weight: 700;
	margin-bottom: 8rem;
	line-height: 1.6;
}
.title__outer .title {
	font-size: var(--size-40);
	font-weight: 500;
	margin-bottom: 40rem;
	line-height: 1;
}
.sec__text {
	line-height: 1.6;
	font-weight: 500;
}
.sec--client .text__outer {
	width: 42.338%;
}
.sec--client .bg--white {
	padding: 40rem 32rem 24rem;
	border-radius: 20rem;
}
.sec--client .bg--white + .bg--white {
	margin-top: 24rem;
}
.sec--client .bg--white .text {
	margin-bottom: 16rem;
}
/*----------------------------
	制作の流れ
-----------------------------*/
.sec--flow {
	padding-bottom: 152rem;
}
.list--flow {
	display: flex;
	gap: 24rem;
	padding: 0 81rem;
}
.list--flow .slick-track {
	display: flex;
	gap: 24rem;
	position: relative;
	height: 100%;
}
.list--flow__item {
	width: 227rem;
	border-right: 2px solid var(--main-color);
	position: relative;
	padding-top: 56rem;
	counter-increment: num;
}
.list--flow__item::before {
	content: "";
	aspect-ratio: 1/1;
	width: 40rem;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	margin: auto;
	background-size: 100%;
	background-repeat: no-repeat;
}
.list--flow__item--1::before {
	background-image: url(../img/icon_mail.png);
}
.list--flow__item--2::before {
	background-image: url(../img/icon_hearing.png);
}
.list--flow__item--3::before {
	background-image: url(../img/icon_memo.png);
}
.list--flow__item--4::before {
	background-image: url(../img/icon_design.png);
}
.list--flow__item--5::before {
	background-image: url(../img/icon_coding.png);
}
.list--flow__item--6::before {
	background-image: url(../img/icon_loupe.png);
}
.list--flow__item--7::before {
	background-image: url(../img/icon_deliver.png);
}
.list--flow__item .title {
	background-color: var(--main-color);
	color: #fff;
	line-height: 1.21;
	padding: 10rem 16rem 10rem 64rem;
	box-sizing: border-box;
	min-height: 67rem;
	border-radius: 67rem 0 0 67rem;
	margin-bottom: 16rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-end;
	width: 100%;
	position: relative;
}
.list--flow__item .title::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 24rem;
	margin: auto;
	color: var(--main-color);
	font-size: var(--size-20);
	font-weight: 800;
	width: 32rem;
	height: 32rem;
	border-radius: 50%;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
}
.list--flow__item--1 .title::before {
	content: "1";
}
.list--flow__item--2 .title::before {
	content: "2";
}
.list--flow__item--3 .title::before {
	content: "3";
}
.list--flow__item--4 .title::before {
	content: "4";
}
.list--flow__item--5 .title::before {
	content: "5";
}
.list--flow__item--6 .title::before {
	content: "6";
}
.list--flow__item--7 .title::before {
	content: "7";
}
.list--flow__item .text__outer {
	font-size: var(--size-14);
	padding: 0 8rem;
}
.list--flow__item .text__outer p + p {
	margin-top: 1em;
}
.list--flow .slick-prev {
	left: 15rem;
	z-index: 1;
}
.list--flow .slick-next {
	right: 15rem;
	z-index: 1;
}

/*----------------------------
	よくあるご質問
-----------------------------*/
.sec--faq {
	padding: 128rem 0;
	background-color: var(--gray);
	display: flex;
	flex-direction: row-reverse;
	gap: 138rem;
}
.list--faq__outer {
	display: flex;
	width: 788rem;
	margin-left: 243rem;
	gap: 48rem;
}
.list--faq {
	width: calc((100% - 48rem)/2);
}
.list--faq__item {
	background-color: #fff;
	border-radius: 20rem;
	padding: 16rem;
	box-sizing: border-box;
	position: relative;
}
.list--faq__item::before {
	content: "";
	aspect-ratio: 1/1;
	width: 40rem;
	background: url(../img/icon_question.png) center / 100% no-repeat;
	position: absolute;
	left: -17rem;
	top: -22rem;
}
.list--faq__item + .list--faq__item {
	margin-top: 32rem;
}
.question {
	color: var(--main-color);
	margin-bottom: 17rem;
}
.form__label {
	display: block;
}
/*----------------------------
	ブログ
-----------------------------*/
.sec--blog {
	padding-bottom: 128rem;
}
.list--blog {
	max-width: 994px;
	width: calc(100% - 284rem);
	margin: auto;
	position: relative;
}
.list--blog__item a {
	color: var(--font-color);
}
.list--blog__item .img__outer {
	aspect-ratio: 222/148;
	width: 100%;
	border-radius: 10rem;
	margin-bottom: 8rem;
}
.list--blog__item .img__outer img {
	width: 100%;
	height: auto;
}
.list--blog__item .date {
	font-size: var(--size-12);
}
.list--tag {
	display: flex;
	justify-content: flex-end;
	font-size: var(--size-10);
	gap: 8rem;
	margin-bottom: 8rem;
}
.list--tag__item {
	background-color: var(--base-color);
	padding: 4rem 8rem;
	line-height: 1;
	border-radius: 18rem;
}
.list--blog__item .title {
	font-size: var(--size-14);
	margin-bottom: 8rem;
}
.list--blog__item .text {
	font-size: var(--size-14);
}
.list--blog .slick-track {
	display: flex;
	gap: 32rem;
}
.slick-arrow {
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto;
	cursor: pointer;
	font-size: 0;
	color: transparent;
	aspect-ratio: 37/67;
	width: 37rem;
	height: 100%;
}
.slick-prev {
	left: -66rem;
	background: url(../img/arrow_prev.png) center / 100% no-repeat;
}
.slick-next {
	right: -66rem;
	background: url(../img/arrow_next.png) center / 100% no-repeat;
}
/*----------------------------
	お問い合わせ
-----------------------------*/
.sec--contact {
	padding: 128rem 0;
	background-color: var(--main-color);
}
.sec--contact .inner--l {
	width: 1200rem;
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-between;
}
.sec--contact .title__outer {
	color: #fff;
	width: 28%;
}
.sec--contact .title__outer::after {
    content: "";
    background: url(../img/illust_woman_4.png) center / 100% no-repeat;
    aspect-ratio: 344 / 249;
    width: 344rem;
    display: block;
    position: relative;
    left: -77rem;
    top: 40rem;
}
.form {
	width: 59.75%;
	padding: 64rem;
	border-radius: 10rem;
	box-sizing: border-box;
	font-size: var(--size-14);
}
.list--form__item + .list--form__item {
	margin-top: 16rem;
}
.list--form__item .title {
	margin-bottom: 8rem;
	line-height: 1;
}
.form__input,.form__textarea {
	border: solid 1px var(--font-color);
	background-color: var(--base-color);
	border-radius: 8rem;
	padding: 12rem 16rem;
	box-sizing: border-box;
	width: 100%;
	line-height: 2;
}
.form__label {
	position: relative;
	padding: 17rem 0 17rem 56rem;
}
.form__label--checkbox {
	position: relative;
	padding-left: 56rem;
	max-width: max-content;
	display: block;
	margin: 21rem auto;
}
.form__label::before,
.form__label--checkbox::before {
	content: "";
	width: 20rem;
	height: 20rem;
	border: solid 2px #49454f;
	position: absolute;
	left: 14rem;
	top: 0;
	bottom: 0;
	margin: auto;
}
.form__label::before {
	border-radius: 50%;
}
.form__label--checkbox::before {
	border-radius: 6rem;
}
.form__label:has(.form__radio:checked)::before {
	border-color: #65558f;
}
.form__label--checkbox:has(.form__checkbox:checked)::before {
	border-color: #65558f;
	background-color: #65558f;
}
.form__label:has(.form__radio:checked)::after {
	content: "";
	width: 14rem;
	height: 14rem;
	background: #65558f;
	position: absolute;
	left: calc(17rem + 2px);
	top: 0;
	bottom: 0;
	margin: auto;
	border-radius: 50%;
}
.form__label--checkbox:has(.form__checkbox:checked)::after {
	content: "";
	width: 12rem;
	height: 9.5rem;
	background: url(../img/icon_check.png)center/100% no-repeat;
	position: absolute;
	left: calc(18rem + 2px);
	top: 0;
	bottom: 0;
	margin: auto;
}
.form__submit {
	background-color: var(--accent-color);
	color: #fff;
	padding: 16rem 100rem;
	border-radius: 8rem;
	margin: auto;
	display: block;
	line-height: 1;
	cursor: pointer;
}
.form .align--c {
	margin-bottom: 21rem;
}
.form--confirm .title {
	color: var(--main-color);
	font-weight: bold;
}
.form--confirm .submit__outer {
	display: flex;
	margin-top: 32rem;
}
.form__submit.back {
	background-color: #ccc;
}
/*----------------------------
	運営
-----------------------------*/
.sec--management {
	position: relative;
}
.sec--management .bg--white {
	padding: 128rem 200rem;
	box-sizing: border-box;
	width: 80%;
}
.sec--management .title {
	text-align: center;
	line-height: 1;
	font-weight: normal;
	margin-bottom: 24rem;
	letter-spacing: 0.01em;
}
.tbl {
	font-family: var(--yugothic);
}
.tbl tr {
	margin-bottom: 24rem;
	display: block;
}
.tbl__head {
	text-align: left;
	letter-spacing: 0.01em;
	margin-right: 27rem;
	width: 88rem;
	min-width: 88px;
}

/*----------------------------
	media query
-----------------------------*/
@media screen and (min-width: 1440px){
	.list--blog {
		max-width: 994rem;
	}
}
@media screen and (max-width: 1200px){
	/*----------------------------
		選ばれる3つの理由
	-----------------------------*/
	.list--about__item + .list--about__item {
		margin-top: 32rem;
	}
	.list--about__item .text__outer {
		width: 470rem;
	}
}
@media screen and (max-width: 768px){
	/*----------------------------
		mainvisual
	-----------------------------*/
	.mv {
		aspect-ratio: 390/650;
	}
	.mv__title__outer {
		left: 0;
		right: 0;
		top: 188rem;
		margin: auto;
		max-width: max-content;
	}
	.mv__title {
		font-size: var(--size-18);
	}
	.mv__circle.bg--main {
		width: 66%;
		top: -60rem;
		right: -44rem;
		transform: translate(-20rem, 20rem);
	}
	.mv__circle.bg--main img {
		width: 71.884%;
	}
	.mv__circle.bg--accent {
		width: 56%;
		left: -42rem;
		bottom: 80rem;
		font-size: 80rem;
		transform: translateX(40rem);
	}
	@keyframes circleBlue {
		0%{
			transform: translate(-20rem,20rem);
		}
		100%{
			transform: translate(0,0);
		}
	}
	@keyframes circleOrange {
		0%{
			transform: translateX(40rem);
		}
		100%{
			transform: translateX(0);
		}
	}
	.mv__img {
		width: 100%;
		height: auto;
		aspect-ratio: 390/96;
		right: 0;
		bottom: 0;
	}
	.img--mv--1 {
		width: 94rem;
	}
	.img--mv--2 {
		width: 95rem;
		left: 94rem;
	}
	.img--mv--3 {
		width: 47rem;
		left: 192rem;
	}
	.img--mv--4 {
		width: 87rem;
		left: 245rem;
	}
	.img--mv--5 {
		width: 54rem;
	}
	.img--town {
		width: 360rem;
		right: 11rem;
	}
	.img--stripe--1 {
		width: 32rem;
		top: 88rem;
		left: 2%;
	}
	.img--stripe--2 {
		width: 36rem;
		left: 32%;
	}
	.img--stripe--3 {
		width: 26rem;
		top: 218rem;
    	left: 9.554%;
	}
	.img--stripe--4 {
		width: 26rem;
		top: 203rem;
		left: 84.27%;
	}
	.img--stripe--5 {
		width: 50rem;
		right: 17.905%;
	}
	.img--stripe--6 {
		width: 26rem;
		right: 43.648%;
	}
	.img--stripe--7 {
		width: 32rem;
		right: 30.054%;
	}
	/*----------------------------
		選ばれる3つの理由
	-----------------------------*/
	.sec--about {
		gap: 100rem;
	}
	.list--about {
		width: calc(100% - 20rem);
		margin: auto;
	}
	.list--about__item,.list--about__item.reverse {
		flex-direction: column;
		gap: 32rem;
	}
	.list--about__item + .list--about__item {
		margin-top: 64rem;
	}
	.list--about__item .text__outer {
		width: 100%;
	}
	.list--about__item .text__outer::before {
		width: 60rem;
		left: 0;
		top: -28rem;
	}
	.list--about__item .title {
		padding-left: 42rem;
		font-size: var(--size-22);
	}
	.list--about__item .text {
		width: 90%;
		margin: auto;
	}
	.list--about__item img {
		width: 280rem;
	}
	.content--about__title {
		font-size: var(--size-22);
		margin: auto;
		padding-right: 0;
		padding-bottom: 144rem;
		width: calc(100% - 20rem);
	}
	.content--about__title::before {
		width: 150rem;
	}
	.content--about__title em {
		font-size: var(--size-30);
	}
	.list--problem {
		width: 100%;
		border-radius: 0;
		padding: 40rem 20rem;
		gap: 16rem 4%;
	}
	.list--problem__item {
		width: 48%;
		height: 100%;
		aspect-ratio: 1/1;
		font-size: 14rem;
	}
	.list--problem__item em {
		font-size: 18rem;
	}
	/*----------------------------
		料金プラン
	-----------------------------*/
	.list--plan {
		flex-direction: column;
	}
	.list--plan__item {
		width: 100%;
	}
	.list--plan__item .text__outer,
	.example__outer {
		height: auto;
	}
	.content--plan {
		flex-direction: column;
		align-items: center;
	}
	.content--plan__text .title {
		font-size: var(--size-22);
	}
	.content--plan__title::after {
		width: 110rem;
		margin: auto;
	}
	.content--plan__text {
		width: 90%;
	}
	/*----------------------------
		制作実績
	-----------------------------*/
	.list--works,.list--works .slick-track {
		gap: 0;
	}
	.list--works__item {
		padding: 150rem 16rem 0 78rem;
	}
	.list--works__item img {
		width: 90%;
		margin: auto;
		right: 0;
	}
	/*----------------------------
		お客様の声
	-----------------------------*/
	.sec--client {
		padding: 0 0 100rem;
	}
	.bg--border::before,
	.bg--border::after {
		content: none;
	}
	.sec--client .bg--gray {
		padding: 64rem 20rem;
		width: 100%;
		border-radius: 0;
		flex-direction: column;
	}
	.sec--client .title__outer {
		width: 100%;
		margin-bottom: 32rem;
	}
	.sec--client .title__outer::after {
		width: 260rem;
		top: 0;
	}
	.sec--client .text__outer {
		width: 100%;
	}
	/*----------------------------
		制作の流れ
	-----------------------------*/
	.list--flow {
		padding: 0 40rem;
	}
	.list--flow .slick-track {
		gap: 8rem;
	}
	.list--flow__item {
		border-right: none;
	}
	.list--flow .slick-prev {
		left: 7rem;
	}
	.list--flow .slick-next {
		right: 7rem;
	}
	/*----------------------------
		よくあるご質問
	-----------------------------*/
	.sec--faq {
		flex-direction: column;
		gap: 100rem;
	}
	.sec--faq .sec__title__img.vertical {
		margin: auto;
	}
	.list--faq__outer {
		width: 100%;
		margin: auto;
		flex-direction: column;
		gap: 32rem;
	}
	.list--faq {
		width: 80%;
		margin: auto;
	}
	/*----------------------------
		ブログ
	-----------------------------*/
	.list--blog {
		width: calc(100% - 80rem);
	}
	.list--blog .slick-track {
		gap: 8rem;
	}
	.slick-arrow {
		width: 25rem;
	}
	.slick-prev {
		left: -35rem;
	}
	.slick-next {
		right: -35rem;
	}
	/*----------------------------
		お問い合わせ
	-----------------------------*/
	.sec--contact {
		padding: 128rem 20rem;
	}
	.sec--contact .inner--l {
		width: 100%;
		flex-direction: column;
	}
	.sec--contact .title__outer {
		width: 100%;
		margin-bottom: 32rem;
	}
	.sec--contact .title__outer::after {
		width: 260rem;
		margin: auto;
		left: auto;
		top: 0;
	}
	.form {
		width: 100%;
		padding: 48rem 20rem;
	}
	.form--confirm .form__submit {
		padding: 16rem 40rem;
	}
	/*----------------------------
		運営会社
	-----------------------------*/
	.sec--management .bg--white {
		padding: 100rem 0;
	}
}