@charset "UTF-8";
/* CSS Document */

:root{
	--main-c: #0A95AE;
	--base-c: #2B2B2B;
	--sab-c: #707070;
	--side-c: #75AAB3;
	--magenta-c: #D20A5A;
	--yellow-c: #DEB10F;
}

/*タブ切り替え全体のスタイル*/
html{
	font-size: 62.5%;/*16px×62.5%=10px*/
	height: 100%;
	box-sizing: border-box;
}


body{
	letter-spacing: 0.1em;
	line-height: 1.6;
	color: #2b2b2b;
	font-family: 'Noto Sans JP', sans-serif;
	font-size: 1.4rem;
	min-height: 0;
	overflow-x: hidden;
}
a{
	display: block;
	color: white;
	transition: all .2s;
	-webkit-transition: all .2s;
	-moz-transition: all .2s;
	-ms-transition: all .2s;
	-o-transition: all .2s;
}
li{
	list-style: none;
}
img{
	max-width: 100%;
	height: auto;
}
hr{
	margin: 0;
}
span{
	display: inline-block;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- br area -▼▼▼▼-▼▼▼--▼▼---▼---- */

.br-sp{
	display: none;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- font area -▼▼▼▼-▼▼▼--▼▼---▼---- */

.fontA{
	font-family: "Oswald", sans-serif;
}
.fontB{
	font-family: "Questrial", sans-serif;
}

.writ-t{
	writing-mode: vertical-rl;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- mouse-stalker -▼▼▼▼-▼▼▼--▼▼---▼---- */

#mouse-stalker{
	pointer-events: none;
	position: fixed;
	top: -10px;
	left: -10px;
	width: 30px;
	height: 30px;
	border: solid 2px white;
	border-radius: 50%;
	transform: translate(0, 0);
	transition: transform 0.2s;
	transition-timing-function: ease-out;
	z-index: 999;
}
#mouse-stalker.is_active{
	top: -40px;
	left: -40px;
	width: 120px;
	height: 120px;
	transition: 0.2s;
	background: none;
}
#mouse-stalker.is_active::after{
	content: "more";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: white;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- loading animation -▼▼▼▼-▼▼▼--▼▼---▼---- */


#loading{
	display: flex;
	width: 100vw;
	height: 100vh;
	transition: all 1s;
	background: var(--main-c);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999;
	justify-content: center;
	align-items: center;
}
.spinner{
	width: fit-content;
	height: fit-content;
	margin: 0 auto;
	animation: sk-scaleout 2.0s infinite ease-in-out;
}
/* Hide Loading Block */
.loaded{
	opacity: 0;
	visibility: hidden;
}

/* Loading Animation */
@keyframes sk-scaleout{
	0%{
		transform: scale(1.0);
	}
	100%{
		transform: scale(1.2);
		opacity: 0;
	}
}


/* ----▼---▼▼--▼▼▼-▼▼▼▼- flex area -▼▼▼▼-▼▼▼--▼▼---▼---- */

.flex{
	display: flex;
}
.flex-between{
	justify-content: space-between;
}
.flex-column{
	flex-direction: column;
}
.flex-horizon{
	align-items: center;
}
.flex-wrap{
	flex-wrap: wrap;
}

/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,80%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
	box-sizing: border-box;
	z-index: 100;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
	overflow-x: hidden;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 420px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content img{
	border-radius: 10px;
}
*,
*::before,
*::after { box-sizing: border-box; }

body.modal-open {
	overflow: hidden;
} /* 背景スクロール固定 */


/* モーダル全体（非表示時） */
.modal[aria-hidden="true"] {
	display: none;
}

/* 表示時の基盤 */
.modal[aria-hidden="false"] {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: grid;
	place-items: center;
}

/* オーバーレイ */
.modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.45);
}

/* ダイアログ */
.modal__dialog {
	position: relative;
	width: min(92vw, 600px);
	max-height: 85vh;
	overflow: auto;
	background: var(--base-c);
	border: solid 2px var(--main-c);
	padding: 3rem 3rem 4.5rem;
	box-shadow: 0 10px 35px rgba(0,0,0,0.25);
	transform: translateY(10px);
	opacity: 0;
	transition: transform 180ms ease, opacity 180ms ease;
}

/* 表示アニメ（:whereで特異性を上げずに適用） */
.modal[aria-hidden="false"] .modal__dialog {
	transform: translateY(0);
	opacity: 1;
}

/* 閉じるボタン */
.modal__close {
	position: absolute;
	top: 8px; right: 8px;
	border: none;
	background: transparent;
	font-size: 1.5rem;
	line-height: 1;
	padding: 0.25rem 0.5rem;
	cursor: pointer;
}

.modal__title {
	margin: 0 2rem 0.25rem 0;
	font-size: 1.25rem;
}

.modal__desc {
	margin: 0 0 1rem 0;
	color: #666;
	font-size: .95rem;
}

.modal__form .field {
	display: grid;
	gap: 6px;
	margin: 0 0 12px 0;
}

.modal__form input,
.modal__form textarea {
	width: 100%;
	border: 1px solid var(--main-c);
	border-radius: 2px;
	padding: .6rem .75rem;
	font: inherit;
	background-color: initial;
}

.modal__form input:focus,
.modal__form textarea:focus {
	outline: 2px solid #2684ff;
	border-color: #2684ff;
}

.btn-primary{
	margin: 0 auto;
	background-color: var(--base-c);
	padding: 10px 40px;
	border: solid 1px var(--main-c);
	display: block;
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- animation -▼▼▼▼-▼▼▼--▼▼---▼---- */

.anime-object1{
	animation: fuwafuwa 1s ease-in-out infinite alternate;
}
@keyframes fuwafuwa {
	from{
		transform: translateY(0) scale(1)
	}
	to{
		transform: translateY(10px) scale(.9);
	}
}
.anime-object2{
	animation: bounce 2s linear infinite;
}
@keyframes bounce {
  0% {
    transform: translateY(0);
  }
  10% {
    transform: translateY(-10px);
  }
  20% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(-10px);
  }
  40% {
    transform: translateY(0);
  }
}
.anime-object3{
	animation: heartbeat 3s infinite ease-in-out;
}
@keyframes heartbeat {
	0% {
	transform: scale(1);
	}
	4% {
	transform: scale(1.1);
	}
	7% {
	transform: scale(1);
	}
	11% {
	transform: scale(1.07);
	}
	18% {
	transform: scale(1);
	}
}

/* ----▼---▼▼--▼▼▼-▼▼▼▼- header area -▼▼▼▼-▼▼▼--▼▼---▼---- */

header{
	position: fixed;
	top: 0;
	left: 0;
	box-sizing: border-box;
	background: url(../image/contents1.mp4) center/cover;
	width: 100%;
	height: 100dvh;
	color: white;
}
header nav{
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    padding: 30px 16px;
    box-sizing: border-box;
    background: var(--base-c);
    background-image: url("https://www.transparenttextures.com/patterns/exclusive-paper.png"),linear-gradient(135deg, var(--main-c) 10px, transparent 0),linear-gradient(-45deg, var(--main-c) 10px, transparent 0);
	color: var(--main-c);
    z-index: 100;
    border-right: solid 2px var(--main-c);
    align-items: center;
	justify-content: space-between;
    width: 140px;
	overflow: hidden;
    transition: width 0.6s ease;
}
header video{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100dvh;
	object-fit: cover;
	z-index: -1;
}
header section{
	position: fixed;
	top: 0;
	width: calc((100vw - 500px) / 2);
	height: 100dvh;
	background-color: rgba(0,0,0,0.75);
	background-image: url("https://www.transparenttextures.com/patterns/slash-it.png");
	z-index: 0;
}
header .nav1{
	left: 0;
	justify-content: space-around;
	text-align: center;
}
header .nav2{
	right: 0;
}
header .logo{
	width: 280px;
}
header .cta{
	gap: 30px;
	font-size: 1.2rem;
}
header .cta img{
	width: 240px;
}
header .cta a{
	background-color: var(--main-c);
	border-radius: 100px;
	width: fit-content;
	padding: 8px 30px;
	font-size: 1.4rem;
	gap: 8px;
}
header .list{
	position: absolute;
	inset: 0;
	margin: auto;
	width: fit-content;
	height: fit-content;
	gap: 30px;
}
header .list span{
	font-size: 1.0rem;
	color: var(--sab-c);
}



/* ----▼---▼▼--▼▼▼-▼▼▼▼- main area -▼▼▼▼-▼▼▼--▼▼---▼---- */


.title{
	gap: 10px;
	line-height: 1;
}
.title dt{
	position: relative;
	width: fit-content;
	font-weight: 100;
}
.title dt::before{
	content: '';
	position: absolute;
	width: 50px;
	height: 1px;
	background-color: white;
	top: 50%;
	right: -60px;
}
.title dd{
	font-size: 1.8rem;
	font-weight: bold;
}



main{
	position: relative;
	width: 100%;
	max-width: 500px;
	margin: auto;
}
main .fv{
	width: 100%;
	height: 100dvh;
	justify-content: space-around;
	background-color: rgba(0,0,0,0.25);
	text-align: center;
	padding: 90px 40px;
	box-sizing: border-box;
	gap: 4px;
	color: white;
}
main .fv .cta{
	gap: 6px;
}
main .fv a{
	background-color: var(--main-c);
	border-radius: 100px;
	width: fit-content;
	padding: 10px 40px;
	font-size: 1.6rem;
	gap: 8px;
}
main .fv span{
	font-size: 1.0rem;
}

#intro{
	position: relative;
	padding: 60px 40px;
	overflow: hidden;
	z-index: 0;
	color: white;
}
#intro::before{
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: calc(100% + 6px);
	height: calc(100% + 6px);
	background: url(../image/bg-intoro.jpg) center/cover;
	filter: blur(3px) brightness(.5);
	z-index: -1;
}

#intro .content{
	gap: 60px;
	margin-top: 200px;
}
#intro ul{
	gap: 10px;
	line-height: 1;
}
#intro li{
	padding: 10px;
	background-color: white;
	color: var(--base-c);
	font-size: 3.4rem;
	font-weight: bold;
	width: fit-content;
}
#intro .text{
	gap: 30px;
}
#intro p{
	font-size: 1.6rem;
	font-weight: bold;
	line-height: 2;
}
#case .catch{
	width: 100%;
	position: relative;
	background-color: white;
	padding: 60px 40px;
	box-sizing: border-box;
}
#case .catch::before{
	content: '';
	position: absolute;
	border-style: solid;
	border-width: 70px 250px 0 250px;
	border-color: white #eee  transparent #eee;
	bottom: -70px;
	left: 0;
	width: 100%;
	height: 70px;
	z-index: 2;
}
#case .title{
	color: var(--main-c);
	margin-bottom: 80px;
}
#case .title dt::before{
	background-color: var(--main-c);
}
#case .catch div{
	gap: 50px;
}
#case .catch h3{
	font-size: 2.8rem;
	font-weight: bold;
}
#case .catch p{
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
}
#case .content{
	position: relative;
	background-color: #eee;
	padding: 120px 30px 0;
}
#case .content::before{
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 80px;
	background-color: var(--main-c);
}
#case .content ul{
	gap: 60px;
	margin-bottom: 90px;
}
#case .content h3{
	margin-bottom: 40px;
	gap: 30px;
}
#case .number{
	position: relative;
	z-index: 0;
	color: white;
	text-align: center;
	gap: 2px;
	line-height: 1;
	justify-content: center;
}
#case .number::before{
	content: '';
	position: absolute;
	top: 30%;
	left: 50%;
	transform: translate(-50%,-50%) rotate(15deg);
	height: calc(tan(60deg) * 100px / 2);
	width: 100px;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	background-color: var(--main-c);
	z-index: -1;
}
#case .number span{
	font-size: 1.0rem;
}
#case .number p{
	font-size: 3.2rem;
}
#case h3 dt{
	font-size: 2.4rem;
	font-weight: bold;
}
#case h3 dd{
	font-weight: bold;
	color: #707070;
}
#case .info{
	gap: 20px;
	text-align: center;
	margin-bottom: 60px;
}
#case .info p{
	font-size: 2.4rem;
	font-weight: bold;
}
#case .info img{
	width: 240px;
	margin: 0 auto;
}
#case .cta{
	position: relative;
	padding: 60px 40px;
	box-sizing: border-box;
	z-index: 0;
	gap: 30px;
	font-size: 1.4rem;
	color: white;
	text-align: center;
}
#case .cta::before{
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: url(../image/cta_bg.jpg) center/cover;
	filter: brightness(0.5);
	z-index: -1;
	border-radius: 10px;
}
#case .cta img{
	width: 100%;
}
#case .cta a{
	background-color: var(--main-c);
	border-radius: 100px;
	width: fit-content;
	padding: 10px 40px;
	font-size: 1.8rem;
	gap: 8px;
}
#portfolio{
	background-color: var(--main-c);
	padding: 90px 30px;
}
#portfolio .catch{
	margin-bottom: 60px;
}
#portfolio .title{
	color: white;
	margin-bottom: 60px;
}
#portfolio .catch ul{
    gap: 10px;
    line-height: 1;
}
#portfolio .catch li{
    padding: 10px;
    background-color: white;
    color: var(--base-c);
    font-size: 3.4rem;
    font-weight: bold;
    width: fit-content;
}
#portfolio .list{
	margin: 0 -30px 70px;
}
#portfolio .list .item{
	margin-right: 20px;
	aspect-ratio: 9/16;
	border-radius: 20px;
	overflow: hidden;
}
.vmodal{
	position: fixed;
	inset: 0;
	display: grid;
	place-items: center;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 9998; /* 必要なら 9999 に変更（お問い合わせモーダルとの前後調整） */
}
.vmodal.is-open {
	opacity: 1; visibility: visible;
}

.vmodal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.6);
}

.vmodal__dialog {
	position: relative;
	width: min(92vw, 960px);
	height: min(92vh, 960px);
	border-radius: 16px;
	overflow: hidden;
	background: #0b0b0c;
	box-shadow: 0 20px 60px rgba(0,0,0,.35);
	transform: translateY(10px);
	transition: transform .25s ease;
}
.vmodal.is-open .vmodal__dialog {
	transform: translateY(0);
}

.vmodal__close {
	position: absolute;
	top: 8px; right: 8px;
	width: 40px; height: 40px;
	border: none; border-radius: 50%;
	background: rgba(255,255,255,.12);
	color: #fff; font-size: 22px;
	cursor: pointer;
	z-index: 3;
}
.vmodal__close:hover {
	background: rgba(255,255,255,.2);
}
.vmodal__content {
	height: 100%;
	padding: 0;
}
.vmodal__content .video-frame {
	width: 100%;
	height: 100%;
	aspect-ratio: 4/5;
	background: #000;
}
.vmodal__content video {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: contain;
	background: #000;
}
#portfolio .slick-prev,
#portfolio .slick-next{
    z-index: 2;
}
#portfolio .slick-prev{
    left: 20px;
}
#portfolio .slick-next{
	right: 20px;
}
#portfolio p{
	font-size: 1.8rem;
	font-weight: bold;
	color: white;
	line-height: 2;
}
#packages{
	padding: 60px 30px;
	color: white;
}
#packages .title{
	margin-bottom: 50px;
}
#packages .catch{
	margin-bottom: 40px;
}
#packages .catch span{
	position: relative;
	width: 100%;
	aspect-ratio: 1/1;
}
#packages .catch span img{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%) scale(1.3,1.3);
	width: 100%;
}
#packages .catch ul{
    gap: 10px;
    line-height: 1;
	margin: -80px 0 30px;
	z-index: 2;
	position: relative;
}
#packages .catch li{
    padding: 10px;
    background-color: white;
    color: var(--base-c);
    font-size: 3.4rem;
    font-weight: bold;
    width: fit-content;
}
#packages .catch p {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2;
}
#packages .content h3{
	font-size: 2.4rem;
	font-weight: bold;
	margin-bottom: 16px;
}
#packages .plan{
	gap: 14px;
	margin-bottom: 20px;
}
#packages .text{
	padding: 24px;
	background-color: var(--main-c);
	border-radius: 10px;
	color: white;
}
#packages h4{
	font-size: 1.8rem;
	font-weight: bold;
	margin-bottom: 14px;
}
#packages .text ul{
	background: white;
	color: var(--main-c);
	padding: 20px;
	border-radius: 14px;
	font-size: 1.8rem;
	margin-bottom: 16px;
}
#packages .text p{
	font-size: 1.6rem;
	line-height: 2;
}

#process{
	padding: 60px 30px;
	border-top-left-radius: 60px;
	border-top-right-radius: 60px;
	background-color: white;
}
#process .title{
	margin-bottom: 50px;
	color: var(--main-c);
}
#process .title dt::before{
	background-color: var(--main-c);
}
#process .catch{
	margin-bottom: 40px;
}
#process .catch h2{
	font-size: 3rem;
	margin-bottom: 20px;
	color: var(--main-c);
}
#process .catch ul{
    gap: 10px;
    line-height: 1;
	margin-bottom: 30px;
	z-index: 2;
	position: relative;
}
#process .catch li{
    padding: 10px;
    background-color: var(--base-c);
    color: white;
    font-size: 3.4rem;
    font-weight: bold;
    width: fit-content;
}
#process .catch li span{
	position: relative;
	width: 60px;
	height: 100%;
}
#process .catch li p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-70%) rotate(5deg);
  color: white;
  font-size: 7rem;
  font-weight: bold;
  -webkit-text-stroke: 16px var(--base-c);
  display: inline;
}
#process .catch li p::before {
  content: attr(data-text);
  -webkit-text-stroke: 0;
  position: absolute;
  inset: 0 auto auto 0;
  font-size: 7rem;
}
#process .list{
	position: relative;
	gap: 40px;
	z-index: 0;
	margin-bottom: 60px;
}
#process .list::before{
	content: '';
	position: absolute;
	bottom: 0;
	left: 55px;
	width: 4px;
	height: calc(100% - 20px);
	background-color: var(--main-c);
	z-index: -1;
}
#process .list li{
	gap: 20px;
}
#process .list img{
	width: 110px;
}
#process .list dt{
	font-size: 2.1rem;
	font-weight: bold;
	margin-bottom: 16px;
	line-height: 1;
}
#process .list dt span{
	font-size: 1rem;
	font-weight: 100;
	color: var(--main-c);
}
#process .info{
	gap: 20px;
	text-align: center;
	margin-bottom: 60px;
}
#process .info p{
	font-size: 2.1rem;
	font-weight: bold;
	line-height: 2;
}
#process .info span{
	font-size: 3rem;
	font-weight: bold;
}
#process .info img{
	width: 240px;
	margin: 0 auto;
}
#process .cta{
	position: relative;
	padding: 60px 40px;
	box-sizing: border-box;
	z-index: 0;
	gap: 30px;
	font-size: 1.4rem;
	color: white;
	text-align: center;
	margin-bottom: -120px;
}
#process .cta::before{
	content: '';
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	background: url(../image/cta_bg.jpg) center/cover;
	filter: brightness(0.5);
	z-index: -1;
	border-radius: 10px;
}
#process .cta img{
	width: 100%;
}
#process .cta a{
	background-color: var(--main-c);
	border-radius: 100px;
	width: fit-content;
	padding: 10px 40px;
	font-size: 1.8rem;
	gap: 8px;
}
#advantage{
	padding: 120px 30px 90px;
	background: url(../image/back_advantage.png) center/cover;
	color: white;
}
#advantage .catch{
	margin-bottom: 40px;
}
#advantage .title{
	margin-bottom: 60px;
}
#advantage .title dt{
	margin-bottom: 60px;
}
#advantage .title dd{
	font-size: 3.4rem;
	line-height: 1.7;
}
#advantage .catch p{
	font-size: 1.6rem;
	font-weight: bold;
}
#advantage .list{
	gap: 6px;
	margin-bottom: 40px;
}
#advantage .list li{
	flex: 1;
	aspect-ratio: 1/1;
	height: auto;
	background-color: white;
	border-radius: 200px;
	text-align: center;
	color: var(--base-c);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	line-height: 1;
}
#advantage .list span{
	font-size: 1.0rem;
	color: var(--main-c);
	letter-spacing: 0.4em;
}
#advantage .list p{
	font-size: 2.4rem;
	font-weight: bolder;
}
#advantage .text{
	gap: 30px;
}
#advantage .text dt{
	font-size: 1.8rem;
	font-weight: bold;
	text-decoration: underline;
	margin-bottom: 10px;
}
#voice{
	background-color: white;
	padding: 80px 30px 60px;
}
#voice .title{
	margin-bottom: 40px;
}
#voice .title dt::before{
	background-color: var(--sab-c);
}
#voice h2{
	font-size: 3rem;
	margin-bottom: 30px;
}
#voice ul{
	gap: 16px;
	font-size: 3rem;
	align-items: end;
	margin-bottom: 40px;
	color: var(--main-c);
}
#voice p{
	font-size: 2.1rem;
	font-weight: bold;
	text-align: center;
}


/* ----▼---▼▼--▼▼▼-▼▼▼▼- footer page -▼▼▼▼-▼▼▼--▼▼---▼---- */

footer{
	position: relative;
	background-color: rgba(10,149,174,.7);
	box-sizing: border-box;
    width: 100%;
    max-width: 500px;
    margin: auto;
	padding: 60px 30px 20px;
	color: white;
}
footer .catch{
	margin-bottom: 30px;
}
footer .cta p{
	font-size: 3rem;
	font-weight: bold;
	margin-bottom: 30px;
}
footer .deco{
	width: 300px;
}
footer .Form{
	flex: 1;
	width: 100%;
	overflow: hidden;
	background-color: white;
	padding: 30px;
	border-radius: 20px;
	gap: 30px;
	margin-bottom: 60px;
}
footer .Form .wpcf7-form{
	display: flex;
	flex-direction: column;
	gap: 40px;
}
footer .Form-Item{
	color: black;
	align-items: center;
}
footer .Form-Item p{
	margin-bottom: 6px;
}
footer ::placeholder{
	color: #aaa;
	font-size: 1.4rem;
}
footer .Label{
	width: 280px;
	letter-spacing: 0.05em;
	color: #2b2b2b;
	line-height: 1;
}
footer .Required{
	font-size: 0.8rem;
	background: #2b2b2b;
	color: #EDE4D5;
	padding: 6px 10px;
	margin-left: 16px;
}
footer .Form-Item-Input{
	border: solid 1px #aaa;
	background-color: initial;
	box-sizing: border-box;
	border-radius: 3px;
	padding: 0.02em 1em;
	width: 100%;
	height: 48px;
	flex: 1;
	font-size: 1.6rem;
	appearance: none;
}
footer .Form-Item-Textarea{
	border: solid 1px #aaa;
	background-color: initial;
	padding: 1em;
	height: 240px;
	font-size: 1.4rem;
	flex: 1;
	width: 100%;
	box-sizing: border-box;
}
footer .Form-Btn{
	border-radius: 3px;
	margin: 0 auto;
	padding: 10px 0;
	width: 280px;
	letter-spacing: 0.8em;
	text-indent: 0.8em;
	background: none;
	color: black;
	font-size: 1.8rem;
	border: solid 2px #2b2b2b;
	box-sizing: border-box;
	cursor: pointer;
}
footer .wpcf7-form-control-wrap{
	width: 100%;
	flex: 1;
}
footer .logo{
	width: 200px;
	display: block;
	margin: 0 auto 60px;
}
footer small{
	text-align: center;
	display: block;
	font-size: 1rem;
}


@media screen and (max-width:1024px){

	header .nav1{
		display: none;
	}
	header section{
		width: calc(100vw - 500px);
	}
	main,
	footer{
		margin-left: 0;
	}

}

@media screen and (max-width:768px){
	html, body{
		overflow-x: hidden;
	}

	header section{
		display: none;
	}
	main,footer{
		width: 100%;
		max-width: 100%;
	}
	main .fv a{
		font-size: 3.6vw;
	}
	#case .catch::before{
		border-width: 10vw 50vw 0 50vw;
		height: 10vw;
		bottom: -10vw;
	}
	#packages{
		overflow-x: hidden;
	}
	
}
@media screen and (max-width:599px){
	
	main .fv{
		padding: 20px;
	}
	#intro{
		padding: 50px 20px;
	}
	#intro .content {
		gap: 14vw;
		margin-top: 40vw;
	}
	#intro li{
		font-size: 6.8vw;
	}
	#intro .text{
		gap: 6vw;
	}
	#intro p{
		font-size: 1.4rem;
	}
	#case .catch{
		padding: 50px 20px;
	}
	#case .catch div{
		gap: 10vw;
	}
	#case .catch h3{
		font-size: 6.7vw;
	}
	#case .catch p {
		font-size: 4.2vw;
	}
	#case .catch::before {
        border-width: 20vw 50vw 0 50vw;
        height: 20vw;
        bottom: -19vw;
    }
	#case .content{
		padding: 100px 20px 0;
	}
	#case h3 dt{
		font-size: 5.6vw;
	}
	#case h3 dd{
		font-size: 1.4rem;
	}
	#case .content ul{
		margin-bottom: 70px;
	}
	#case .info p{
		font-size: 5.4vw;
	}
	#case .cta{
		padding: 10vw 6vw;
	}
	#portfolio{
		padding: 70px 20px;
	}
	#portfolio .catch li{
        font-size: 8vw;
    }
	#portfolio .catch {
		margin-bottom: 40px;
	}
	#packages{
		padding: 50px 20px;
	}
	#packages .catch ul{
		margin: -100px 0 30px;
	}
	#packages .catch li{
		font-size: 7.2vw;
	}
	#packages .catch p {
    	font-size: 1.4rem;
	}
	#packages .content h3 {
		font-size: 2.1rem;
	}
	#packages .text{
		pad: 24px 20px;
	}
	#packages .text ul{
		padding: 10px;
    	font-size: 4vw;
		border-radius: 10px;
	}
	#packages .text p {
		font-size: 1.2rem;
	}
	#process{
		padding: 70px 20px 50px;
		border-top-left-radius: 40px;
		border-top-right-radius: 40px;
	}
	#process .catch h2{
		font-size: 2.4rem;
	}
	#process .catch li{
		font-size: 7vw;
	}
	#process .catch li p{
		font-size: 16vw;
	}
	#process .catch li p::before {
		font-size: 16vw;
	}
	#process .list::before{
		left: 11.2vw;
	}
	#process .list li {
		gap: 4vw;
	}
	#process .list img{
		width: 22vw;
	}
	#process .list dt{
		font-size: 4.1vw;
		margin-bottom: 2vw;
	}
	#process .list dd{
		font-size: 3vw;
	}
	#process .info span {
		font-size: 6.8vw;
	}
	#process .info p {
    	font-size: 4.6vw;
	}
	#process .cta{
		padding: 10vw 6vw;
	}
	#advantage{
		padding: 110px 20px 80px;
	}
	#advantage .title dd {
		font-size: 8.4vw;
	}
	#advantage .list p {
		font-size: 5vw;
	}
	#advantage .list{
		flex-wrap: wrap;
		justify-content: center;
		gap: 0 20px;
	}
	#advantage .list li{
		flex: none;
		width: calc(50% - 10px);
	}
	#advantage .list li:first-child{
		margin: 0 30px;
	}
	#voice{
		padding: 70px 20px 40px;
	}
	#voice h2 {
		font-size: 6vw;
	}
	#voice ul{
		gap: 0;
	}
	footer{
		padding: 60px 20px 20px;
	}
	footer .cta p{
		font-size: 6vw;
	}
	footer .Form {
		padding: 40px 20px;
		border-radius: 10px;
		gap: 20px;
	}
}