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

/********************************************************************

reset

*********************************************************************/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-style:normal;
	font-weight: normal;
	font-size: 100%;
}

ol, ul{
    list-style:none;
}

table{
    border-collapse: collapse;
    border-spacing:0;
}

img.max-size {
	width: 100%;
	height: auto;
}

/****************************************

          Clearfix

*****************************************/
.clearfix:after {
	visibility: hidden;
	display: block;
	font-size: 0;
	content: " ";
	clear: both;
	height: 0;
}
.clearfix {
	display: inline-block;
}
/* clearfix for ie7 */
.clearfix {
	display: block;
}


/****************************************

          CSS3 MEMO

*****************************************/

テキストシャドウ {
	text-shadow: 1px 1px 3px #000;
}

テキストシャドウ {
	text-shadow: 1px 1px 3px #000;
}

ボックスシャドウ {
	-moz-box-shadow: 1px 1px 3px #000;
	-webkit-box-shadow: 1px 1px 3px #000;
	box-shadow: 1px 1px 3px #000;
}

ボックスシャドウ内側 {
	-moz-box-shadow: inset 1px 1px 3px #000;
	-webkit-box-shadow: inset 1px 1px 3px #000;
	box-shadow: inset 1px 1px 3px #000;
}

/****************************************

          General Setting

*****************************************/

html {
	height: 100%;
	scroll-behavior: smooth;
}

body {
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
	width: 100%;
	min-width: 320px;
	height: 100%;
	color: #1e1e14;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-text-size-adjust: 100%;
	position: relative;
}

img {
	vertical-align: bottom;
}

* {-webkit-box-sizing: border-box;
   -ms-box-sizing: border-box;
   -moz-box-sizing: border-box;
   -o-box-sizing: border-box;
   box-sizing: border-box;
}

span.important {
	font-weight: bold;
	color: #F00;
}

.bold {
	font-weight: bold;
}

.main-txt.top {
	margin-top: 0;
}

.cf-turnstile {
	display: block;
	text-align: center;
	padding-top: 20px;
}

/******************************************************************************************************

SP

******************************************************************************************************/

@media screen and (max-width: 767px) {
	
	div.shape01 {
		width: 130vw;
		height: 130vw;
		background-image: conic-gradient(#e9f7f2 90deg,white 90deg);
		clip-path: circle();
		position: fixed;
		left: -65vw;
		bottom: -65vw;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape01::before {
		content: "";
		width: 90vw;
		height: 90vw;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	div.shape02 {
		width: 80vw;
		height: 80vw;
		background-image: conic-gradient(#e9f7f2 360deg,white 360deg);
		clip-path: circle();
		position: fixed;
		right: -30vw;
		top: -50vw;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape02::before {
		content: "";
		width: 54vw;
		height: 54vw;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	div.shape03 {
		width: 60vw;
		height: 60vw;
		background-image: conic-gradient(#e9f7f2 360deg,white 360deg);
		clip-path: circle();
		position: fixed;
		right: -35vw;
		bottom: -32vw;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape03::before {
		content: "";
		width: 42vw;
		height: 42vw;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	.pc {
		display: none;
	}
	
	.ta {
		display: none;
	}
	
	.sp {
		display: block;
	}
	
	.hamburger {
		display : block;
		position: fixed;
		z-index : 99999;
		right : 0;
		top   : 0;
		width : 80px;
		height: 60px;
		cursor: pointer;
		text-align: center;
	}

	.hamburger span {
		display : block;
		position: absolute;
		width: 40px;
		height: 2px;
		left: 20px;
		background : #24b283;
		transition: .3s;
	}

	.hamburger span:nth-child(1) {
		top: 21px;
	}

	.hamburger span:nth-child(2) {
		top: 29px;
	}

	.hamburger span:nth-child(3) {
		top: 37px;
	}

	/* ナビが開いてる時 */

	.hamburger.active {
		display : block;
		position: fixed;
		z-index : 99999;
		right : 0;
		top   : 0;
		width : 80px;
		height: 60px;
		cursor: pointer;
		text-align: center;
		transition: .3s;
	}

	.hamburger.active span:nth-child(1) {
		top : 30px;
		left: 20px;
		background: #24b283;
		transform: rotate(-45deg);
	}

	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
		top: 30px;
		background: #24b283;
		transform: rotate(45deg);
	}
	
	header {
		width: 100%;
		height: 60px;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 0 20px;
		z-index: 100;
		transition: .2s;
	}
	
	.header-animation {
		height: 60px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
	
	header h1 {
		position: relative;
		z-index: 9999;
	}
	
	header h1 img.logo {
		width: auto;
		height: 30px;
	}
	
	nav.gnav {
		width: 100%;
		height: 100vh;
		visibility: hidden;
		opacity: 0;
		transition: .3s;
		position: fixed;
		top: 0;
		right: 0;
		background: #e9f7f2;
		overflow-y:  scroll;
		padding: 80px 0 0 0;
		z-index: 1000;
		display: flex;
		align-items: center;
	}
	
	/* このクラスを、jQueryで付与・削除する */
	nav.gnav.active {
		visibility: visible;
		opacity: 1;
	}
	
	nav.gnav ul {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 4vh;
	}
	
	nav.gnav ul li {
		text-align: center;
	}
	
	nav.gnav ul li:last-child {
		margin-right: 0;
	}
	
	nav.gnav ul li a {
		font-size: min(3.6vw, 16px);
		font-weight: bold;
		color: #333;
		line-height: 150%;
		text-decoration: none;
	}
	
	nav.gnav ul li a.contact {
		width: fit-content;
		color: #fff;
		background: #24b283;
		line-height: 150%;
		padding: 15px 25px;
		border-radius: 30px;
		display: block;
		margin: 0 auto;
	}
	
	div.main-visual {
		width: 100%;
		position: relative;
	}
	
	div.main-visual div.inner {
		width: 90%;
		visibility: hidden;
		animation: late-open 0.3s ease-in 2s forwards;
		opacity: 0;
		margin: 0 auto;
		padding: 90px 0 12vw 0;
	}

	@keyframes late-open {
		to {
			visibility: visible;
			opacity: 1;
		  	margin-top: 0;
	  	}
	}

	@keyframes anime{
		0%{transform:scale(.95); opacity:1}
		90%{opacity:.1}to{transform:scale(1.5,1.5); opacity:0}
	}
	
	div.main-visual div.inner div.copy-area h2.main-copy {
		font-size: 8.6vw;
		font-weight: bold;
		line-height: 150%;
	}
	
	div.main-visual div.inner div.copy-area h2.main-copy span {
		color: #24b283;
		font-weight: bold;
	}
	
	div.main-visual div.inner div.copy-area h2.sub-copy {
		font-size: 3.6vw;
		font-weight: bold;
		line-height: 180%;
		margin-top: 3vw;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap {
		display: flex;
		column-gap: 2vw;
		margin-top: 4vw;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a {
		font-size: 4vw;
		font-weight: bold;
		line-height: 12vw;
		text-decoration: none;
		border-radius: 6vw;
		padding: 0 6vw;
		transition: .3s;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a.contact {
		color: #fff;
		background: #24b283;
		border: 1px solid #24b283;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a:hover.contact {
		background: #333;
		border: 1px solid #333;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a.service {
		color: #24b283;
		background: #fff;
		border: 1px solid #24b283;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a:hover.service {
		color: #fff;
		background: #333;
		border: 1px solid #333;
	}
	
	img.main-visual-img {
		width: 90%;
		height: auto;
		display: block;
		margin: 12vw auto 0 auto;
	}
	
	#about,#strength,#service,#flow,#column,#faq,#company,#contact {
		display: block;
		margin-top: -60px;
		padding-top: 60px;
	}
	
	section {
		width: 100%;
		padding: 12vw 0;
	}
	
	section div.inner {
		width: 90vw;
		margin: 0 auto;
	}
	
	.relative {
		position: relative;
	}
	
	.flex {
		display: flex;
		flex-wrap: wrap;
		row-gap: 8vw;
	}
	
	.flex div.half-wrap {
		width: 100%;
	}
	
	section.about,
	section.service,
	section.column,
	section.company {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
	}
	
	div.half-wrap img.about-img {
		width: 90%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	h2.main-title-en {
		font-size: 8vw;
		font-weight: bold;
		color: #24b283;
		line-height: 100%;
		margin-bottom: 3vw;
		letter-spacing: 0.05em;
	}
	
	h2.main-title-jp {
		font-size: 3.6vw;
		font-weight: bold;
		color: #24b283;
		line-height: 100%;
		margin-bottom: 8vw;
		letter-spacing: 0.05em;
	}
	
	h2.wh {
		color: #fff;
	}
	
	h3.sub-title {
		font-size: 4.8vw;
		font-weight: bold;
		line-height: 150%;
	}
	
	p.main-txt {
		font-size: 3.6vw;
		line-height: 180%;
		margin-top: 4vw;
	}
	
	p.main-txt a {
		color: #1e1e14;
		text-decoration: none;
	}
	
	.main-button {
		width: fit-content;
		font-size: 4vw;
		font-weight: bold;
		color: #24b283;
		line-height: 12vw;
		background: #fff;
		border-radius: 6vw;
		border: 1px solid #24b283;
		padding: 0 6vw;
		text-decoration: none;
		transition: .3s;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	
	.main-button:hover {
		color: #fff;
		border: 1px solid #333;
		background: #333;
	}
	
	.main-button.right-top {
		width: fit-content;
		display: block;
		margin: 8vw auto 0 auto;
	}
	
	section.strength {
		background: #24b283;
	}
	
	section.white {
		background: #fff;
	}
	
	ul.strength {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 2vw;
	}
	
	ul.strength li {
		background: #fff;
		border-radius: 1.5vw;
		position: relative;
		padding: 6vw 3vw 3vw 3vw;
	}
	
	ul.strength li img.icon {
		width: auto;
		height: 12vw;
		display: block;
		margin: 0 auto;
	}
	
	ul.strength li img.left-en {
		width: 2.4vw;
		height: auto;
		position: absolute;
		left: 2vw;
		top: 2vw;
	}
	
	ul.strength li h3 {
		font-size: 3.6vw;
		font-weight: bold;
		text-align: center;
		margin-top: 4vw;
		line-height: 150%;
	}
	
	ul.strength li p.main-txt {
		font-size: 3vw;
		text-align: center;
		line-height: 150%;
		margin-top: 3vw;
	}
	
	h3.strength-bottom {
		font-size: 36px;
		line-height: 150%;
		text-align: center;
		margin-top: 100px;
		color: #fff;
	}
	
	section.flow,
	section.faq {
		background: #e8f4ef;
	}
	
	div.flow {
		width: 100%;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 2vw;
		position: relative;
	}
	
	div.flow-items {
		width: 44%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		border: 3px dotted #a9dac7;
		position: relative;
		z-index: 0;
		background: #fff;
	}
	
	img.flow-arrow {
		width: 6%;
		height: auto;
		display: block;
		margin: 0 3%;
	}
	
	img.flow-arrow.diagonal {
		width: 6%;
		height: auto;
		display: block;
		margin: 0 47%;
		transform: rotate(135deg);
	}
	
	p.flow-number {
		width: 8vw;
		height: 8vw;
		background: #24b283;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: .3s;
		font-size: 3vw;
		font-weight: bold;
		color: #fff;
		margin: 4vw auto 0 auto;
		position: relative;
	}
	
	p.flow-number::before,
	p.flow-number::after {
		content: "";
		position: absolute;
		z-index: -1;
		width: 8vw;
		height: 8vw;
	  	top: 0;
	  	left: 0;
	  	border-radius: 50%;
	  	background: #91d8c1;
	  	transform: translate3d(0,0,0);
	}
	
	p.flow-number::before {
	  animation: anime 1s ease-out infinite;
	}

	p.flow-number::after {
	  animation: anime 1s ease-out 1s infinite;
	}
	
	h3.flow-title {
		font-size: 3vw;
		font-weight: bold;
		line-height: 180%;
		text-align: center;
		color: #333;
		margin-top: 2vw;
	}
	
	div.flow-items img {
		width: auto;
		height: 10vw;
		display: block;
		margin: 4vw auto 0 auto;
	}
	
	div.service-wrap {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12vw;
	}
	
	div.service-content img {
		width: 100%;
		height: auto;
		border-radius: 2vw;
	}
	
	div.service-content h3.title {
		font-size: 6vw;
		font-weight: bold;
		line-height: 150%;
		margin-top: 6vw;
	}
	
	div.service-content ul.service-detail {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 2vw;
		margin-top: 4vw;
	}
	
	div.service-content ul.service-detail li {
		font-size: 3vw;
		font-weight: bold;
		line-height: 8vw;
		color: #fff;
		background: #24b283;
		border-radius: 4vw;
		padding: 0 4vw;
	}
	
	ul.column-wrap {
		width: 90vw;
		display: grid;
		grid-template-columns: 1fr;
		column-gap: 2%;
		row-gap: 30px;
		margin-top: 6vw;
	}
	
	ul.column-wrap li a {
		width: 100%;
		height: 100%;
		transition: .3s;
		display: block;
		text-decoration: none;
		background: #24b283;
		border-radius: 2vw;
		padding: 4vw;
	}
	
	ul.column-wrap li a:hover {
		opacity: 0.7;
	}
	
	ul.column-wrap li a div.date-area {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	ul.column-wrap li a div.date-area p.date {
		font-size: 3.2vw;
		line-height: 180%;
		color: #fff;
		margin-right: 1vw;
	}
	
	ul.column-wrap li a p.category {
		font-size: 2.8vw;
		font-weight: bold;
		line-height: 5vw;
		color: #fff;
		padding: 0 2.5vw;
		border-radius: 2.6vw;
		border: 1px solid #fff;
		display: inline-block;
	}
	
	ul.column-wrap li a img {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		margin: 4vw 0;
	}
	
	ul.column-wrap li a:hover img {
		opacity: 1;
	}
	
	ul.column-wrap li a p.title {
		width: fit-content;
		font-size: 4vw;
		font-weight: bold;
		line-height: 150%;
		color: #fff;
	}
	
	div.faq-list {
		width: 100%;
		background: #fff;
		border-radius: 2vw;
		padding: 1vw 3vw;
	}

	div.faq-list details {
		border-bottom: 1px solid #eee;
		padding: 0;
		overflow: hidden;
		interpolate-size: allow-keywords;
	}

	div.faq-list details:last-child {
		border-bottom: none;
	}

	div.faq-list summary {
		cursor: pointer;
		font-size: 3.4vw;
		font-weight: bold;
		color: #1e1e14;
		line-height: 180%;
		padding: 3.6vw 0;
		list-style: none;
	}

	div.faq-list summary::-webkit-details-marker {
		display: none;
	}

	div.faq-list summary::before {
		content: "Q.";
		color: #24b283;
		margin-right: 1vw;
	}

	div.faq-list summary::after {
		content: "+";
		float: right;
		color: #24b283;
	}

	div.faq-list details[open] summary::after {
		content: "−";
	}

	div.faq-list details p.main-txt {
		font-size: 3.2vw;
		margin: 0 0 3vw 5vw;
	}

	div.faq-list details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
		  block-size .35s ease,
		  content-visibility .35s ease allow-discrete;
	}

	div.faq-list details[open]::details-content {
		block-size: auto;
	}
	
	dl.company {
		width: 100%;
		font-size: 3.6vw;
		line-height: 150%;
		color: #333;
		text-align: left;
		border-top: 1px solid #eee;
		display: grid;
		grid-template-columns: 25% 1fr;
	}
	
	dl.company dt {
		padding: 4vw 0;
		font-weight: bold;
		border-bottom: 1px solid #eee;
	}
	
	dl.company dd {
		padding: 4vw 0;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	
	.gmap {
		height: 60vw;
	}
	
	section.contact {
		background: #333;
	}
	
	table.contact-form {
		width: 100%;
		font-size: 3.6vw;
		border-top: 1px solid #666;
	}
	
	table.contact-form tr {
		border-bottom: 1px solid #666;
	}

	table.contact-form th,
	table.contact-form td {
		text-align: left;
	}

	table.contact-form th {
		font-weight: bold;
		width: 100%;
		padding: 4vw 0 0 0;
		vertical-align: middle;
		line-height: 5.4vw;
		overflow: hidden;
		color: #fff;
		display: block;
	}

	table.contact-form td {
		width: 100%;
		display: block;
		padding: 3vw 0 4vw 0;
		overflow: hidden;
		line-height: 5.4vw;
	}

	.formbtn {
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
		width: fit-content;
		padding: 20px 60px;
		background: #24b283;
		font-size: 24px;
		color: #fff;
		cursor: pointer;
		outline: none;
		border-radius: 50px;
		margin: 60px auto 0 auto;
		display: block;
		font-weight: 800;
		transition: 0.3s;
		border: none;
	}

	.formbtn:hover {
		opacity: 0.7;
	}

	input[type="text"],
	input[type="tel"] {
		width: 40%;
	}

	input[type="email"] {
		width: 100%;
	}

	textarea {
		width: 100%;
		height: 150px;
		vertical-align: bottom;
	}
	
	input#zip {
		width: 20%;
	}

	.must {
		display: block;
		background-color: #fc0606;
		padding: 0 1vw;
		font-size: 3vw;
		line-height: 5.4vw;
		color: #fff;
		float: right;
		font-weight: bold;
	}

	table.contact-form input,
	table.contact-form select,
	table.contact-form textarea {
		font-size: 3.6vw;
		padding: 2vw;
		border: 1px solid #ddd;
		border-radius: 0;
		font-weight: normal;
	}

	table.contact-form input:focus,
	table.contact-form select:focus,
	table.contact-form textarea:focus {
		border: 1px solid #24b283;
	  	outline: 0;
	}
	
	footer {
		width: 100%;
		padding: 12vw 0 6vw 0;
		background: #f8f8f8;
	}
	
	footer div.inner {
		width: 90vw;
		margin: 0 auto;
	}
	
	footer div.inner div.info-area {
		width: 100%;
		margin-top: 10vw;
	}
	
	footer div.inner div.info-area img.logo {
		width: auto;
		height: 30px;
	}
	
	footer div.inner div.info-area p.main-txt {
		font-size: 14px;
		margin-top: 10px;
	}
	
	div.fnav {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 30px 5%;
	}
	
	div.fnav a {
		font-size: 3vw;
		font-weight: bold;
		color: #333;
		line-height: 150%;
		transition: .3s;
		text-decoration: none;
		display: block;
		width: fit-content;
	}
	
	div.fnav a:hover {
		color: #24b283;
	}
	
	p.copyright {
		font-size: 12px;
		line-height: 180%;
		margin-top: 20px;
	}
	
	div.main-visual.lower {
		height: 60vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	div.main-visual.lower h2.page-title {
		font-weight: bold;
		line-height: 150%;
		text-align: center;
		color: #24b283;
		display: block;
	}
	
	div.main-visual.lower h2.page-title.en {
		font-size: 8.6vw;
	}
	
	div.main-visual.lower h2.page-title.jp {
		font-size: 3vw;
		margin-top: 5px;
	}
	
	section.thanks {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
	}
	
	p.breadcrumbs {
		font-size: 14px;
		line-height: 150%;
		color: #999;
		position: absolute;
		left: 20px;
		bottom: 20px;
	}
	
	p.breadcrumbs a {
		color: #333;
		text-decoration: none;
		transition: .3s;
	}
	
	p.breadcrumbs a:hover {
		opacity: 0.7;
	}
	
}

/******************************************************************************************************

SP補足

******************************************************************************************************/

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



}

/******************************************************************************************************

タブレット

******************************************************************************************************/

@media screen and (min-width:768px) and ( max-width:1024px) {
	
	div.shape01 {
		width: 130vw;
		height: 130vw;
		background-image: conic-gradient(#e9f7f2 90deg,white 90deg);
		clip-path: circle();
		position: fixed;
		left: -65vw;
		bottom: -65vw;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape01::before {
		content: "";
		width: 90vw;
		height: 90vw;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	div.shape02 {
		width: 80vw;
		height: 80vw;
		background-image: conic-gradient(#e9f7f2 360deg,white 360deg);
		clip-path: circle();
		position: fixed;
		right: -30vw;
		top: -50vw;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape02::before {
		content: "";
		width: 54vw;
		height: 54vw;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	div.shape03 {
		width: 60vw;
		height: 60vw;
		background-image: conic-gradient(#e9f7f2 360deg,white 360deg);
		clip-path: circle();
		position: fixed;
		right: -35vw;
		bottom: -28vw;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape03::before {
		content: "";
		width: 40vw;
		height: 40vw;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	.pc {
		display: none;
	}
	
	.ta {
		display: block;
	}
	
	.sp {
		display: none;
	}

	.hamburger {
		display : block;
		position: fixed;
		z-index : 99999;
		right : 0;
		top   : 0;
		width : 90px;
		height: 80px;
		cursor: pointer;
		text-align: center;
	}

	.hamburger span {
		display : block;
		position: absolute;
		width: 40px;
		height: 2px;
		left: 25px;
		background : #24b283;
		transition: .3s;
	}

	.hamburger span:nth-child(1) {
		top: 31px;
	}

	.hamburger span:nth-child(2) {
		top: 39px;
	}

	.hamburger span:nth-child(3) {
		top: 47px;
	}

	/* ナビが開いてる時 */

	.hamburger.active {
		display : block;
		position: fixed;
		z-index : 99999;
		right : 0;
		top   : 0;
		width : 90px;
		height: 80px;
		cursor: pointer;
		text-align: center;
		transition: .3s;
	}

	.hamburger.active span:nth-child(1) {
		top : 40px;
		left: 25px;
		background: #24b283;
		transform: rotate(-45deg);
	}

	.hamburger.active span:nth-child(2),
	.hamburger.active span:nth-child(3) {
		top: 40px;
		background: #24b283;
		transform: rotate(45deg);
	}
	
	header {
		width: 100%;
		height: 80px;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 0 0 20px;
		z-index: 100;
		transition: .2s;
	}
	
	.header-animation {
		height: 80px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
	
	header h1 {
		position: relative;
		z-index: 9999;
	}
	
	header h1 img.logo {
		width: auto;
		height: 40px;
	}
	
	nav.gnav {
		width: 100%;
		height: 100vh;
		visibility: hidden;
		opacity: 0;
		transition: .3s;
		position: fixed;
		top: 0;
		right: 0;
		background: #e9f7f2;
		overflow-y:  scroll;
		padding: 80px 0 0 0;
		z-index: 1000;
		display: flex;
		align-items: center;
	}
	
	/* このクラスを、jQueryで付与・削除する */
	nav.gnav.active {
		visibility: visible;
		opacity: 1;
	}
	
	nav.gnav ul {
		width: 100%;
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-row-gap: 4vh;
	}
	
	nav.gnav ul li {
		text-align: center;
	}
	
	nav.gnav ul li:last-child {
		margin-right: 0;
	}
	
	nav.gnav ul li a {
		font-size: min(2.4vw, 18px);
		font-weight: bold;
		color: #333;
		line-height: 180%;
		text-decoration: none;
	}
	
	nav.gnav ul li a.contact {
		width: fit-content;
		color: #fff;
		background: #24b283;
		line-height: 150%;
		padding: 15px 30px;
		border-radius: 30px;
		display: block;
		margin: 0 auto;
	}
	
	div.main-visual {
		width: 100%;
		position: relative;
	}
	
	div.main-visual div.inner {
		width: 90%;
		visibility: hidden;
		animation: late-open 0.3s ease-in 2s forwards;
		opacity: 0;
		margin: 0 auto;
		padding: 120px 0 10vw 0;
	}

	@keyframes late-open {
		to {
			visibility: visible;
			opacity: 1;
		  	margin-top: 0;
	  	}
	}

	@keyframes anime{
		0%{transform:scale(.95); opacity:1}
		90%{opacity:.1}to{transform:scale(1.5,1.5); opacity:0}
	}
	
	div.main-visual div.inner div.copy-area h2.main-copy {
		font-size: 7.2vw;
		font-weight: bold;
		line-height: 150%;
	}
	
	div.main-visual div.inner div.copy-area h2.main-copy span {
		color: #24b283;
		font-weight: bold;
	}
	
	div.main-visual div.inner div.copy-area h2.sub-copy {
		font-size: 2.8vw;
		font-weight: bold;
		line-height: 180%;
		margin-top: 1.5vw;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap {
		display: flex;
		column-gap: 1.5vw;
		margin-top: 3vw;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a {
		font-size: 18px;
		font-weight: bold;
		line-height: 60px;
		text-decoration: none;
		border-radius: 30px;
		padding: 0 40px;
		transition: .3s;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a.contact {
		color: #fff;
		background: #24b283;
		border: 1px solid #24b283;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a:hover.contact {
		background: #333;
		border: 1px solid #333;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a.service {
		color: #24b283;
		background: #fff;
		border: 1px solid #24b283;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a:hover.service {
		color: #fff;
		background: #333;
		border: 1px solid #333;
	}
	
	img.main-visual-img {
		width: 80%;
		height: auto;
		display: block;
		margin: 10vw auto 0 auto;
	}
	
	#about,#strength,#service,#flow,#column,#faq,#company,#contact {
		display: block;
		margin-top: -80px;
		padding-top: 80px;
	}
	
	section {
		width: 100%;
		padding: 10vw 0;
	}
	
	section div.inner {
		width: 90vw;
		margin: 0 auto;
	}
	
	.relative {
		position: relative;
	}
	
	.flex {
		display: flex;
		flex-wrap: wrap;
		row-gap: 6vw;
	}
	
	.flex div.half-wrap {
		width: 100%;
	}
	
	section.about,
	section.service,
	section.column,
	section.company {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
	}
	
	div.half-wrap img.about-img {
		width: 80%;
		height: auto;
		display: block;
		margin: 0 auto;
	}
	
	h2.main-title-en {
		font-size: 6.4vw;
		font-weight: bold;
		color: #24b283;
		line-height: 100%;
		margin-bottom: 20px;
		letter-spacing: 0.05em;
	}
	
	h2.main-title-jp {
		font-size: 2vw;
		font-weight: bold;
		color: #24b283;
		line-height: 100%;
		margin-bottom: 6vw;
		letter-spacing: 0.05em;
	}
	
	h2.wh {
		color: #fff;
	}
	
	h3.sub-title {
		font-size: 3.6vw;
		font-weight: bold;
		line-height: 150%;
	}
	
	p.main-txt {
		font-size: 2vw;
		line-height: 180%;
		margin-top: 3vw;
	}
	
	p.main-txt a {
		color: #1e1e14;
		text-decoration: none;
	}
	
	.main-button {
		width: fit-content;
		font-size: 18px;
		font-weight: bold;
		color: #24b283;
		line-height: 70px;
		background: #fff;
		border-radius: 40px;
		border: 1px solid #24b283;
		padding: 0 30px 0 40px;
		text-decoration: none;
		transition: .3s;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	
	.main-button:hover {
		color: #fff;
		border: 1px solid #333;
		background: #333;
	}
	
	.main-button.bottom-low {
		margin-top: 30px;
	}
	
	.main-button.wh {
		border: none;
	}
	
	.main-button.right-top {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	section.strength {
		background: #24b283;
	}
	
	section.white {
		background: #fff;
	}
	
	ul.strength {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5vw;
	}
	
	ul.strength li {
		background: #fff;
		border-radius: 1vw;
		position: relative;
		padding: 5vw 3vw 3vw 3vw;
	}
	
	ul.strength li img.icon {
		width: auto;
		height: 100px;
		display: block;
		margin: 0 auto;
	}
	
	ul.strength li img.left-en {
		width: 17px;
		height: auto;
		position: absolute;
		left: 20px;
		top: 20px;
	}
	
	ul.strength li h3 {
		font-size: 2.6vw;
		font-weight: bold;
		text-align: center;
		margin-top: 3vw;
		line-height: 180%;
	}
	
	ul.strength li p.main-txt {
		text-align: center;
	}
	
	h3.strength-bottom {
		font-size: 36px;
		line-height: 150%;
		text-align: center;
		margin-top: 100px;
		color: #fff;
	}
	
	section.flow,
	section.faq {
		background: #e8f4ef;
	}
	
	div.flow {
		width: 100%;
		display: flex;
		justify-content:space-between;
		align-items: center;
		flex-wrap: wrap;
		row-gap: 2vw;
		position: relative;
	}
	
	div.flow-items {
		width: 44%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		border: 3px dotted #a9dac7;
		position: relative;
		z-index: 0;
		background: #fff;
	}
	
	img.flow-arrow {
		width: 6%;
		height: auto;
		display: block;
		margin: 0 3%;
	}
	
	img.flow-arrow.diagonal {
		width: 6%;
		height: auto;
		display: block;
		margin: 0 47%;
		transform: rotate(135deg);
	}
	
	p.flow-number {
		width: 8vw;
		height: 8vw;
		background: #24b283;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: .3s;
		font-size: 3vw;
		font-weight: bold;
		color: #fff;
		margin: 4vw auto 0 auto;
		position: relative;
	}
	
	p.flow-number::before,
	p.flow-number::after {
		content: "";
		position: absolute;
		z-index: -1;
		width: 8vw;
		height: 8vw;
	  	top: 0;
	  	left: 0;
	  	border-radius: 50%;
	  	background: #91d8c1;
	  	transform: translate3d(0,0,0);
	}
	
	p.flow-number::before {
	  animation: anime 1s ease-out infinite;
	}

	p.flow-number::after {
	  animation: anime 1s ease-out 1s infinite;
	}
	
	h3.flow-title {
		font-size: 3vw;
		font-weight: bold;
		line-height: 180%;
		text-align: center;
		color: #333;
		margin-top: 2vw;
	}
	
	div.flow-items img {
		width: auto;
		height: 10vw;
		display: block;
		margin: 4vw auto 0 auto;
	}
	
	div.service-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8vw;
	}
	
	div.service-content img {
		width: 100%;
		height: auto;
		border-radius: 2vw;
	}
	
	div.service-content h3.title {
		font-size: 3vw;
		font-weight: bold;
		line-height: 150%;
		margin-top: 4vw;
	}
	
	div.service-content ul.service-detail {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 1vw;
		margin-top: 2vw;
	}
	
	div.service-content ul.service-detail li {
		font-size: 1.6vw;
		font-weight: bold;
		line-height: 4vw;
		color: #fff;
		background: #24b283;
		border-radius: 2vw;
		padding: 0 2vw;
	}
	
	ul.column-wrap {
		width: 90vw;
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(280px, 3fr));
		gap: 30px;
		margin-top: 6vw;
	}
	
	ul.column-wrap li a {
		width: 100%;
		height: 100%;
		transition: .3s;
		display: block;
		text-decoration: none;
		background: #24b283;
		border-radius: 2vw;
		padding: 3vw;
	}
	
	ul.column-wrap li a:hover {
		opacity: 0.7;
	}
	
	ul.column-wrap li a div.date-area {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	ul.column-wrap li a div.date-area p.date {
		font-size: 1.8vw;
		line-height: 180%;
		color: #fff;
		margin-right: 1vw;
	}
	
	ul.column-wrap li a p.category {
		font-size: 1.6vw;
		font-weight: bold;
		line-height: 3.6vw;
		color: #fff;
		padding: 0 2vw;
		border-radius: 2vw;
		border: 1px solid #fff;
		display: inline-block;
	}
	
	ul.column-wrap li a img {
		width: 100%;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		margin: 3vw 0;
	}
	
	ul.column-wrap li a:hover img {
		opacity: 1;
	}
	
	ul.column-wrap li a p.title {
		width: fit-content;
		font-size: 2.4vw;
		font-weight: bold;
		line-height: 150%;
		color: #fff;
	}
	
	div.faq-list {
		width: 100%;
		background: #fff;
		border-radius: 2vw;
		padding: 1vw 4vw;
	}

	div.faq-list details {
		border-bottom: 1px solid #eee;
		padding: 0;
		overflow: hidden;
		interpolate-size: allow-keywords;
	}

	div.faq-list details:last-child {
		border-bottom: none;
	}

	div.faq-list summary {
		cursor: pointer;
		font-size: 2.4vw;
		font-weight: bold;
		color: #1e1e14;
		line-height: 180%;
		padding: 3vw 0;
		list-style: none;
	}

	div.faq-list summary::-webkit-details-marker {
		display: none;
	}

	div.faq-list summary::before {
		content: "Q.";
		color: #24b283;
		margin-right: 1vw;
	}

	div.faq-list summary::after {
		content: "+";
		float: right;
		color: #24b283;
	}

	div.faq-list details[open] summary::after {
		content: "−";
	}

	div.faq-list details p.main-txt {
		margin: 0 0 3vw 4vw;
	}

	div.faq-list details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
		  block-size .35s ease,
		  content-visibility .35s ease allow-discrete;
	}

	div.faq-list details[open]::details-content {
		block-size: auto;
	}
	
	dl.company {
		width: 100%;
		font-size: 2vw;
		line-height: 150%;
		color: #333;
		text-align: left;
		border-top: 1px solid #eee;
		display: grid;
		grid-template-columns: 25% 1fr;
	}
	
	dl.company dt {
		padding: 3vw 0;
		font-weight: bold;
		border-bottom: 1px solid #eee;
	}
	
	dl.company dd {
		padding: 3vw 0;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	
	.gmap {
		height: 60vw;
	}
	
	section.contact {
		background: #333;
	}
	
	table.contact-form {
		width: 100%;
		font-size: 2vw;
		border-top: 1px solid #666;
	}
	
	table.contact-form tr {
		border-bottom: 1px solid #666;
	}

	table.contact-form th,
	table.contact-form td {
		text-align: left;
	}

	table.contact-form th {
		font-weight: bold;
		width: 100%;
		padding: 3vw 0 0 0;
		vertical-align: middle;
		line-height: 30px;
		overflow: hidden;
		color: #fff;
		display: block;
	}

	table.contact-form td {
		width: 100%;
		display: block;
		padding: 2vw 0 3vw 0;
		overflow: hidden;
	}
	
	table.contact-form td ul.contact {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	table.contact-form td ul.contact li:last-child {
		margin-right: 0;
	}
	
	table.contact-form td ul.contact li input[type="text"] {
		width: 100%;
	}
	
	table.contact-form td ul.contact li select {
		margin-right: 5px;
	}

	.formbtn {
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
		width: fit-content;
		padding: 20px 60px;
		background: #24b283;
		font-size: 24px;
		color: #fff;
		cursor: pointer;
		outline: none;
		border-radius: 50px;
		margin: 60px auto 0 auto;
		display: block;
		font-weight: 800;
		transition: 0.3s;
		border: none;
	}

	.formbtn:hover {
		opacity: 0.7;
	}

	input[type="text"],
	input[type="tel"] {
		width: 40%;
	}

	input[type="email"] {
		width: 100%;
	}

	textarea {
		width: 100%;
		height: 150px;
		vertical-align: bottom;
	}
	
	input#zip {
		width: 20%;
	}

	.must {
		display: block;
		background-color: #fc0606;
		padding: 0 6px;
		font-size: 14px;
		line-height: 30px;
		color: #fff;
		float: right;
		font-weight: bold;
	}

	table.contact-form input,
	table.contact-form select,
	table.contact-form textarea {
		font-size: 16px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 0;
		font-weight: normal;
	}

	table.contact-form input:focus,
	table.contact-form select:focus,
	table.contact-form textarea:focus {
		border: 1px solid #24b283;
	  	outline: 0;
	}
	
	footer {
		width: 100%;
		padding: 10vw 0 6vw 0;
		background: #f8f8f8;
	}
	
	footer div.inner {
		width: 90vw;
		margin: 0 auto;
	}
	
	footer div.inner div.info-area {
		width: 100%;
		margin-top: 10vw;
	}
	
	footer div.inner div.info-area img.logo {
		width: auto;
		height: 40px;
	}
	
	footer div.inner div.info-area p.main-txt {
		font-size: 16px;
		margin-top: 15px;
	}
	
	div.fnav {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(4,1fr);
		gap: 30px 5%;
	}
	
	div.fnav a {
		font-size: 2vw;
		font-weight: bold;
		color: #333;
		line-height: 150%;
		transition: .3s;
		text-decoration: none;
		display: block;
		width: fit-content;
	}
	
	div.fnav a:hover {
		color: #24b283;
	}
	
	p.copyright {
		font-size: 12px;
		line-height: 180%;
		margin-top: 20px;
	}
	
	div.main-visual.lower {
		height: 50vw;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	div.main-visual.lower h2.page-title {
		font-weight: bold;
		line-height: 150%;
		text-align: center;
		color: #24b283;
		display: block;
	}
	
	div.main-visual.lower h2.page-title.en {
		font-size: 7.2vw;
	}
	
	div.main-visual.lower h2.page-title.jp {
		font-size: 2.2vw;
		margin-top: 5px;
	}
	
	section.thanks {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
	}
	
	p.breadcrumbs {
		font-size: 14px;
		line-height: 150%;
		color: #999;
		position: absolute;
		left: 20px;
		bottom: 20px;
	}
	
	p.breadcrumbs a {
		color: #333;
		text-decoration: none;
		transition: .3s;
	}
	
	p.breadcrumbs a:hover {
		opacity: 0.7;
	}

}

/******************************************************************************************************

PC

******************************************************************************************************/

@media screen and (min-width:1025px) {
	
	div.shape01 {
		width: 170vh;
		height: 170vh;
		background-image: conic-gradient(#e9f7f2 90deg,white 90deg);
		clip-path: circle();
		position: fixed;
		left: -85vh;
		bottom: -85vh;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape01::before {
		content: "";
		width: 120vh;
		height: 120vh;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	div.shape02 {
		width: 85vh;
		height: 85vh;
		background-image: conic-gradient(#e9f7f2 360deg,white 360deg);
		clip-path: circle();
		position: fixed;
		right: -20vh;
		top: -50vh;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape02::before {
		content: "";
		width: 58vh;
		height: 58vh;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	div.shape03 {
		width: 60vh;
		height: 60vh;
		background-image: conic-gradient(#e9f7f2 360deg,white 360deg);
		clip-path: circle();
		position: fixed;
		right: -35vh;
		bottom: -28vh;
		z-index: -100;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	div.shape03::before {
		content: "";
		width: 40vh;
		height: 40vh;
		background-color: white;
		clip-path: circle();
		position: fixed;
	}
	
	a img {
		transition: .3s;
	}
	
	a:hover img {
		opacity: 0.7;
	}
	
	.pc {
		display: block;
	}
	
	.ta {
		display: none;
	}
	
	.sp {
		display: none;
	}
	
	#about,#strength,#service,#flow,#column,#faq,#company,#contact {
		display: block;
		margin-top: -80px;
		padding-top: 80px;
	}
	
	header {
		width: 100%;
		height: 100px;
		position: fixed;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 40px;
		z-index: 100;
		transition: .2s;
	}
	
	.header-animation {
		height: 80px;
		background-color: #fff;
		border-bottom: 1px solid #eee;
	}
	
	header h1 img.logo {
		width: auto;
		height: 40px;
	}
	
	header nav.gnav ul {
		display: flex;
		align-items: center;
	}
	
	header nav.gnav ul li {
		margin-right: 2vw;
	}
	
	header nav.gnav ul li:last-child {
		margin-right: 0;
	}
	
	header nav.gnav ul li a {
		font-size: min(1.35vw,16px);
		font-weight: bold;
		color: #1e1e14;
		line-height: 180%;
		text-decoration: none;
		transition: .3s;
	}
	
	header nav.gnav ul li a.contact {
		color: #fff;
		line-height: 50px;
		padding: 0 30px;
		background: #24b283;
		border-radius: 25px;
		display: block;
	}
	
	header nav.gnav ul li a:hover.contact {
		color: #fff;
		background: #333;
	}
	
	header nav.gnav ul li a:hover {
		color: #24b283;
	}
	
	div.main-visual {
		width: 100%;
		position: relative;
	}
	
	div.main-visual div.inner {
		width: 100%;
		height: 100vh;
		max-height: 60vw;
		min-height: 50vw;
		padding: 120px 3vw 0 5vw;
		display: flex;
		justify-content: space-between;
		align-items: center;
		visibility: hidden;
		animation: late-open 0.3s ease-in 2s forwards;
		opacity: 0;
	}

	@keyframes late-open {
		to {
			visibility: visible;
			opacity: 1;
		  	margin-top: 0;
		  	padding: 60px 3vw 0 5vw;
	  	}
	}

	@keyframes anime{
		0%{transform:scale(.95); opacity:1}
		90%{opacity:.1}to{transform:scale(1.5,1.5); opacity:0}
	}
	
	div.main-visual div.inner div.copy-area h2.main-copy {
		font-size: 4.1vw;
		font-weight: bold;
		line-height: 150%;
	}
	
	div.main-visual div.inner div.copy-area h2.main-copy span {
		color: #24b283;
		font-weight: bold;
	}
	
	div.main-visual div.inner div.copy-area h2.sub-copy {
		font-size: 1.4vw;
		font-weight: bold;
		line-height: 150%;
		margin-top: 1.5vw;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap {
		display: flex;
		column-gap: 1vw;
		margin-top: 2.5vw;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a {
		font-size: 1.3vw;
		font-weight: bold;
		line-height: 4vw;
		text-decoration: none;
		border-radius: 2.1vw;
		padding: 0 2.4vw;
		transition: .3s;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a.contact {
		color: #fff;
		background: #24b283;
		border: 1px solid #24b283;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a:hover.contact {
		background: #333;
		border: 1px solid #333;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a.service {
		color: #24b283;
		background: #fff;
		border: 1px solid #24b283;
	}
	
	div.main-visual div.inner div.copy-area div.btn-wrap a:hover.service {
		color: #fff;
		background: #333;
		border: 1px solid #333;
	}
	
	img.main-visual-img {
		width: 48vw;
		height: auto;
	}
	
	section {
		width: 100%;
		padding: 120px 0;
	}
	
	section div.inner {
		width: 94vw;
		max-width: 1200px;
		margin: 0 auto;
	}
	
	.relative {
		position: relative;
	}
	
	.flex {
		display: flex;
		justify-content: space-between;
	}
	
	.flex.center {
		align-items: center;
	}
	
	.flex div.half-wrap {
		width: 46.5%;
	}
	
	section.about,
	section.service,
	section.column,
	section.company {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
	}
	
	div.half-wrap img.about-img {
		width: 100%;
		height: auto
	}
	
	h2.main-title-en {
		font-size: 60px;
		font-weight: bold;
		color: #24b283;
		line-height: 100%;
		margin-bottom: 20px;
		letter-spacing: 0.05em;
	}
	
	h2.main-title-jp {
		font-size: 18px;
		font-weight: bold;
		color: #24b283;
		line-height: 100%;
		margin-bottom: 60px;
		letter-spacing: 0.05em;
	}
	
	h2.wh {
		color: #fff;
	}
	
	h3.sub-title {
		font-size: min(2.4vw, 30px);
		font-weight: bold;
		line-height: 150%;
	}
	
	p.main-txt {
		font-size: 16px;
		line-height: 180%;
		margin-top: 30px;
	}
	
	p.main-txt a {
		color: #1e1e14;
		text-decoration: none;
	}
	
	.main-button {
		width: fit-content;
		font-size: 18px;
		font-weight: bold;
		color: #24b283;
		line-height: 70px;
		background: #fff;
		border-radius: 40px;
		border: 1px solid #24b283;
		padding: 0 30px 0 40px;
		text-decoration: none;
		transition: .3s;
		display: flex;
		align-items: center;
		overflow: hidden;
		position: relative;
		z-index: 1;
	}
	
	.main-button:hover {
		color: #fff;
		border: 1px solid #333;
		background: #333;
	}
	
	.main-button.right-top {
		position: absolute;
		top: 0;
		right: 0;
	}
	
	section.strength {
		background: #24b283;
	}
	
	section.white {
		background: #fff;
	}
	
	ul.strength {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 15px;
	}
	
	ul.strength li {
		background: #fff;
		border-radius: 10px;
		position: relative;
		padding: 50px 30px 30px 30px;
	}
	
	ul.strength li img.icon {
		width: auto;
		height: 100px;
		display: block;
		margin: 0 auto;
	}
	
	ul.strength li img.left-en {
		width: 17px;
		height: auto;
		position: absolute;
		left: 20px;
		top: 20px;
	}
	
	ul.strength li h3 {
		font-size: 24px;
		font-weight: bold;
		text-align: center;
		margin-top: 30px;
		line-height: 180%;
	}
	
	ul.strength li p.main-txt {
		text-align: center;
	}
	
	h3.strength-bottom {
		font-size: 36px;
		line-height: 150%;
		text-align: center;
		margin-top: 100px;
		color: #fff;
	}
	
	section.flow,
	section.faq {
		background: #e8f4ef;
	}
	
	div.flow {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	
	div.flow-items {
		width: 21%;
		aspect-ratio: 1 / 1;
		border-radius: 50%;
		border: 3px dotted #a9dac7;
		position: relative;
		z-index: 0;
		background: #fff;
	}
	
	img.flow-arrow {
		width: 3%;
		height: auto;
		display: block;
	}
	
	p.flow-number {
		width: 50px;
		height: 50px;
		background: #24b283;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		transition: .3s;
		font-size: 18px;
		font-weight: bold;
		color: #fff;
		margin: 30px auto 0 auto;
		position: relative;
	}
	
	p.flow-number::before,
	p.flow-number::after {
		content: "";
		position: absolute;
		z-index: -1;
		width: 50px;
		height: 50px;
	  	top: 0;
	  	left: 0;
	  	border-radius: 50%;
	  	background: #91d8c1;
	  	transform: translate3d(0,0,0);
	}
	
	p.flow-number::before {
	  animation: anime 1s ease-out infinite;
	}

	p.flow-number::after {
	  animation: anime 1s ease-out 1s infinite;
	}
	
	h3.flow-title {
		font-size: 18px;
		font-weight: bold;
		line-height: 180%;
		text-align: center;
		color: #333;
		margin-top: 15px;
	}
	
	div.flow-items img {
		width: auto;
		height: 50px;
		display: block;
		margin: 25px auto 0 auto;
	}
	
	div.flow img.arrow {
		width: 100%;
		height: auto;
		position: absolute;
		top: 68px;
		left: 0;
		z-index: 0;
	}
	
	div.service-wrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 80px;
	}
	
	div.service-content img {
		width: 100%;
		height: auto;
		border-radius: 20px;
	}
	
	div.service-content h3.title {
		font-size: 30px;
		font-weight: bold;
		line-height: 150%;
		margin-top: 40px;
	}
	
	div.service-content ul.service-detail {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
	}
	
	div.service-content ul.service-detail li {
		font-size: 14px;
		font-weight: bold;
		line-height: 40px;
		color: #fff;
		background: #24b283;
		border-radius: 20px;
		margin: 10px 10px 0 0;
		padding: 0 20px;
	}
	
	ul.column-wrap {
		display: flex;
		justify-content: space-between;
		column-gap: 2%;
		margin-top: 60px;
	}
	
	ul.column-wrap li {
		width: 32%;
	}
	
	ul.column-wrap li a {
		width: 100%;
		height: 100%;
		transition: .3s;
		display: block;
		text-decoration: none;
		background: #24b283;
		border-radius: 10px;
		padding: 20px;
	}
	
	ul.column-wrap li a:hover {
		opacity: 0.7;
	}
	
	ul.column-wrap li a div.date-area {
		width: 100%;
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}
	
	ul.column-wrap li a div.date-area p.date {
		font-size: 14px;
		line-height: 180%;
		color: #fff;
		margin-right: 10px;
	}
	
	ul.column-wrap li a p.category {
		font-size: 13px;
		font-weight: bold;
		line-height: 30px;
		color: #fff;
		padding: 0 15px;
		border-radius: 20px;
		border: 1px solid #fff;
		display: inline-block;
	}
	
	ul.column-wrap li a img {
		width: 100%;
		height: 200px;
		object-fit: cover;
		margin: 20px 0;
	}
	
	ul.column-wrap li a:hover img {
		opacity: 1;
	}
	
	ul.column-wrap li a p.title {
		width: fit-content;
		font-size: 18px;
		font-weight: bold;
		line-height: 180%;
		color: #fff;
	}
	
	div.faq-list {
		width: 100%;
		background: #fff;
		border-radius: 20px;
		padding: 10px 40px;
	}

	div.faq-list details {
		border-bottom: 1px solid #eee;
		padding: 0;
		overflow: hidden;
		interpolate-size: allow-keywords;
	}

	div.faq-list details:last-child {
		border-bottom: none;
	}

	div.faq-list summary {
		cursor: pointer;
		font-size: 20px;
		font-weight: bold;
		color: #1e1e14;
		line-height: 180%;
		padding: 30px 0;
		list-style: none;
	}

	div.faq-list summary::-webkit-details-marker {
		display: none;
	}

	div.faq-list summary::before {
		content: "Q.";
		color: #24b283;
		margin-right: 10px;
	}

	div.faq-list summary::after {
		content: "+";
		float: right;
		color: #24b283;
	}

	div.faq-list details[open] summary::after {
		content: "−";
	}

	div.faq-list details p.main-txt {
		margin: 0 0 30px 36px;
	}

	div.faq-list details::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
		  block-size .35s ease,
		  content-visibility .35s ease allow-discrete;
	}

	div.faq-list details[open]::details-content {
		block-size: auto;
	}
	
	dl.company {
		width: 100%;
		font-size: 16px;
		line-height: 150%;
		color: #333;
		text-align: left;
		border-top: 1px solid #eee;
		display: grid;
		grid-template-columns: 25% 1fr;
	}
	
	dl.company dt {
		padding: 30px 0;
		font-weight: bold;
		border-bottom: 1px solid #eee;
	}
	
	dl.company dd {
		padding: 30px 0;
		color: #333;
		border-bottom: 1px solid #eee;
	}
	
	section.contact {
		background: #333;
	}
	
	table.contact-form {
		width: 100%;
		font-size: 16px;
		border-top: 1px solid #666;
	}
	
	table.contact-form tr {
		border-bottom: 1px solid #666;
	}

	table.contact-form th,
	table.contact-form td {
		text-align: left;
	}

	table.contact-form th {
		font-weight: bold;
		width: 30%;
		padding: 30px;
		vertical-align: middle;
		line-height: 30px;
		overflow: hidden;
		color: #fff;
	}

	table.contact-form td {
		width: 70%;
		padding: 30px 30px 30px 0;
		overflow: hidden;
	}
	
	table.contact-form td ul.contact {
		width: 100%;
		display: flex;
		align-items: center;
	}
	
	table.contact-form td ul.contact li:last-child {
		margin-right: 0;
	}
	
	table.contact-form td ul.contact li input[type="text"] {
		width: 100%;
	}
	
	table.contact-form td ul.contact li select {
		margin-right: 5px;
	}

	.formbtn {
		font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック体", "YuGothic", "メイリオ", "Meiryo", "verdana", sans-serif;
		width: fit-content;
		padding: 20px 60px;
		background: #24b283;
		font-size: 24px;
		color: #fff;
		cursor: pointer;
		outline: none;
		border-radius: 50px;
		margin: 60px auto 0 auto;
		display: block;
		font-weight: 800;
		transition: 0.3s;
		border: none;
	}

	.formbtn:hover {
		opacity: 0.7;
	}

	input[type="text"],
	input[type="tel"] {
		width: 40%;
	}

	input[type="email"] {
		width: 100%;
	}

	textarea {
		width: 100%;
		height: 150px;
		vertical-align: bottom;
	}
	
	input#zip {
		width: 20%;
	}

	.must {
		display: block;
		background-color: #fc0606;
		padding: 0 6px;
		font-size: 14px;
		line-height: 30px;
		color: #fff;
		float: right;
		font-weight: bold;
	}

	table.contact-form input,
	table.contact-form select,
	table.contact-form textarea {
		font-size: 16px;
		padding: 10px;
		border: 1px solid #ddd;
		border-radius: 0;
		font-weight: normal;
	}

	table.contact-form input:focus,
	table.contact-form select:focus,
	table.contact-form textarea:focus {
		border: 1px solid #24b283;
	  	outline: 0;
	}
	
	footer {
		width: 100%;
		padding: 120px 0;
		background: #f8f8f8;
	}
	
	footer div.inner {
		width: 1200px;
		max-width: 94vw;
		margin: 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-direction: row-reverse;
	}
	
	footer div.inner div.info-area {
		width: 35%;
	}
	
	footer div.inner div.info-area img.logo {
		width: auto;
		height: 40px;
	}
	
	div.fnav {
		width: 65%;
		display: grid;
		grid-template-columns: repeat(3,1fr);
		gap: 30px 5%;
	}
	
	div.fnav a {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		line-height: 150%;
		transition: .3s;
		text-decoration: none;
		display: block;
		width: fit-content;
	}
	
	div.fnav a:hover {
		color: #24b283;
	}
	
	p.copyright {
		font-size: 12px;
		line-height: 180%;
		margin-top: 20px;
	}
	
	div.main-visual.lower {
		height: 500px;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: wrap;
	}
	
	div.main-visual.lower h2.page-title {
		font-weight: bold;
		line-height: 150%;
		text-align: center;
		color: #24b283;
		display: block;
	}
	
	div.main-visual.lower h2.page-title.en {
		font-size: 60px;
	}
	
	div.main-visual.lower h2.page-title.jp {
		font-size: 18px;
		margin-top: 5px;
	}
	
	section.thanks {
		background: rgba(255, 255, 255, 0.5);
		backdrop-filter: blur(10px);
	}
	
	p.breadcrumbs {
		font-size: 14px;
		line-height: 150%;
		color: #999;
		position: absolute;
		left: 40px;
		bottom: 20px;
	}
	
	p.breadcrumbs a {
		color: #333;
		text-decoration: none;
		transition: .3s;
	}
	
	p.breadcrumbs a:hover {
		opacity: 0.7;
	}

}