/*
Theme Name:chuo-group
*/
html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	overflow-y: scroll;
}
html,body{
	width: 100%;
	min-height: 100%;
}
:root {
	--bg:#ffffff;
	--card:#f6f6f6;
	--text:#1c2833;
	--text-sub:#444444;
	--border:#dddddd;
	--white:#ffffff;
	--red:#ea1b50;
	--green:#5a9930;
	--yellow:#fadf2d;
	--shadow:0 8px 20px -4px rgba(79,133,43,0.2);

	--font-sp-xxx-large: clamp(24px, 7.0vw, 28px);
	--font-sp-xx-large: clamp(20px, 6.0vw, 24px);
	--font-sp-x-large: clamp(18px, 5.0vw, 22px);
	--font-sp-large: clamp(15px, 4.5vw, 17px);
	--font-sp-normal: clamp(15px, 4.2vw, 16px);
	--font-sp-small: clamp(13px, 3.5vw, 14px);
	--font-sp-x-small: 11px;

	--font-pc-xxx-large: 48px;
	--font-pc-xx-large: 32px;
	--font-pc-x-large: 24px;
	--font-pc-large: 20px;
	--font-pc-normal: 16px;
	--font-pc-small: 14px;
	--font-pc-x-small: 13px;
	--font-pc-xx-small: 12px;
}
body {
	background-color:var(--bg);
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, address,code,del, dfn, em, img, ins, kbd, q, s,strike, strong, sub, sup,
b, u, i,dl, dt, dd, ol, ul, li,nav,
fieldset, form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
embed,footer, header, hgroup,
menu, nav, ruby, section, summary,
audio, video,figure,figcaption {
	font-family:"Noto Sans JP","Noto Sans CJK JP","Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",sans-serif;
	color:var(--text);
}
.serif,h1, h2, h3,h4,
.btn,.btn * {
    font-family: 
        "Noto Serif JP", 
        "Noto Serif CJK JP", 
        "Hiragino Mincho ProN", 
        serif;
}
.en {
	font-family: "Cormorant Garamond", serif;
	font-weight: 500;
}
body {
	line-height: 2;
}
h1, h2, h3 {
	line-height: 1.5;
	letter-spacing: 0.05em;
}
a {
	outline: none;
	text-decoration:none;
}
a:hover {
	text-decoration:none;
	transition: all 0.5s;
}
ol li {
	list-style-type:decimal;
	margin-left:16px;
	padding-left:4px;
	line-height:200%;
}
ul.dot li,
.panel ul li {
	list-style-type:disc;
	margin-left:1.5em;
}
hr {
	border: none;
	border-bottom:1px solid var(--border);
}
p.caption {
	color:var(--mute);
	padding-left:0.5em;
	padding-right:0.5em;
}
@media (width < 767px) {
	body,th,td,li,dt,dd,input,select,a,p,div,span,textarea,h1,h2,h3,h4,h5,h6,label,button,ruby,address,figcaption {
		font-size: var(--font-sp-normal);
	}
	hr {
		margin-top:10vw;
		margin-bottom:10vw;
	}
	p.caption {
		font-size: var(--font-sp-small);
		padding-top:5vw;
	}
	p.small {
		font-size: var(--font-sp-small);
	}
	.anchor {
		display:block;
		padding-top:50px;
		margin-top:-50px;
	}
}
@media (768px <= width) {
	body,th,td,li,dt,dd,input,select,a,p,div,span,textarea,h1,h2,h3,h4,h5,h6,label,button,ruby,address,figcaption {
		font-size: var(--font-pc-normal);
	}
	hr {
		margin-top:50px;
		margin-bottom:50px;
	}
	p.caption {
		font-size: var(--font-pc-small);
		padding-top:30px;
	}
	p.small {
		font-size: var(--font-pc-small);
	}
	.anchor {
		display:block;
		padding-top:80px;
		margin-top:-80px;
	}
}
html.drawer-body-on,
body.drawer-body-on {
	overflow: hidden;
}
body.drawer-body-on:before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	z-index: 500;
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	/* iOS16-fallback */
	height: 100vh;
	height: 100dvh;
	-webkit-transition: all 0.8s;
	transition: all 0.8s;
}
/*-----------------------------------------
master-layout-control
------------------------------------------*/
.container,
.container-middle {
	margin-right: auto;
	margin-left: auto;
}
.main-contents p {
	margin-bottom:1.5em;
}
section {
	position: relative;
	z-index: 1;
}
.text-center {
	text-align: center;
}
@media (width < 767px) {
	.container,
	.container-middle {
	padding-right: 5vw;
	padding-left: 5vw;
	}
	section {
		padding-top:8vw;
		padding-bottom:8vw;
	}
	.sp-only {display:block !important;}
	.pc-only {display:none !important;}
}
@media (768px <= width) {
	.container {
		max-width:1280px;
		padding-left:40px;
		padding-right:40px;
	}
	.container-middle {
		max-width:1000px;
		padding-left:20px;
		padding-right:20px;
	}
	section {
		padding-top:60px;
		padding-bottom:60px;
	}
	.sp-only {display:none !important;}
	.pc-only {display:block !important;}
}
/*-----------------------------------------
header
------------------------------------------*/
.header {
	position: absolute;
	z-index: 998;
	width:100%;
	top:0;
	left:0;
}
.header.smaller {
	position: fixed;
	animation:headup 0.4s forwards;
	background-color:var(--bg);
}

.header.smaller .spenit {
	display: none;
}
.header.smaller .container {
	max-width:100%;
	padding-left:0;
	padding-right:0;
}
.header.smaller .header-inner {
	max-width:100%;
	border-radius: 0;
}
@keyframes headup {
	0% {
		opacity: 0;
		transform: translate3d(0,-110px,0);
	}
	100% {
		opacity: 1;
		transform: translate3d(0,0,0);
	}
}
.header-inner {
	width:100%;
	background-color:var(--bg);
	box-shadow:var(--shadow);
	margin-left:auto;
	margin-right:auto;
	overflow: hidden;
}
.header-logo {
	display:flex;
	align-items: center;
}
.spenit {
	display: block;
	color:var(--bg);
}
@media (width < 767px) {
	.spenit {
		height:20px;
		line-height:20px;
		font-size:11px;
	}
	.drawer-btn {
		right:5vw;
	}
	.drawer.is-open {
		width:100vw;
		opacity: 1;
	}
	.drawer-menu {
		padding:50px 8vw 0 8vw;
	}
}
@media (768px <= width < 1079px) {
	.spenit {
		height:20px;
		line-height:20px;
		font-size:11px;
	}
	.drawer-btn {
		right:40px;
	}
	.drawer.is-open {
		width:360px;
		opacity: 1;
	}
	.drawer-menu {
		padding:50px;
	}
}
@media (width < 1079px) {
	.spenit {
		height:20px;
		line-height:20px;
		font-size:11px;
	}
	.header-inner {
		display:flex;
		justify-content: space-between;
		align-items: center;
		height:50px;
		border-radius: 8px;
	}
	.header-logo {
		padding-left: 10px;
	}
	.header-logo,
	.header-logo img {
		height:40px;
	}
	.pc-menu {
		display: none;
	}
	.drawer-btn {
		display: block;
		position: fixed;
		z-index: 9999;
		top:20px;
		width:55px;
		height:50px;
		cursor: pointer;
		background-color:var(--green);
		border-radius:0 8px 8px 0;
	}
	header.smaller+ .drawer-btn {
		top:0;
		right:0;
		border-radius:0;
		transition: all 0.3s;
	}
	.drawer-btn span,
	.drawer-btn span::before,
	.drawer-btn span::after {
		content: "";
		display: block;
		position: absolute;
		width: 24px;
		height: 1px;
		background: var(--white);
		transition: all 0.3s;
		left: 0px;
	}
	.drawer-btn span {
		left:15px;
	}
	.drawer-btn span { top: 23px; }
	.drawer-btn span::before { top: -6px; }
	.drawer-btn span::after { top: 6px; }
	.drawer-btn.drawer-btn-peke span {
		background: transparent;
	}
	.drawer-btn.drawer-btn-peke span::before {
		top: 0;
		transform: rotate(45deg);
	}
	.drawer-btn.drawer-btn-peke span::after {
		top: 0;
		transform: rotate(-45deg);
	}
	.drawer {
		position: fixed;
		width:100vw;
		z-index: 999;
		width: 0;
		height:100dvh;
		top:0;
		right:0;
		overflow: auto;
		transition: width 0.3s ease;
		opacity:0;
		background-color: var(--green);
	}
	.drawer-menu a {
		color:var(--white);
		display: block;
		padding:0.8vw 0;
	}
	.drawer-tel {
		text-align: center;
		margin-top:2em
	}
	.drawer-tel span {
		color:var(--white);
	}
	.drawer-tel a {
		font-size:var(--font-sp-x-large);
	}
}
@media (1080px <= width) {
	.spenit {
		font-size:var(--font-pc-x-small);
	}
	.header-inner {
		max-width:1200px;
		display:flex;
		justify-content: space-between;
		align-items: center;
		height:80px;
		border-radius: 8px;
	}
	.header-logo {
		padding-left: 10px;
	}
	.header-logo,
	.header-logo img {
		height:50px;
	}
	.pc-menu {
		display:grid;
		grid-template-columns: 1fr 160px 180px;
		column-gap:25px;
	}
	.pc-txtmenu {
		height:80px;
		display: flex;
	}
	.pc-txtmenu a {
		display: block;
		height:80px;
		line-height: 80px;
		padding:0 12px;
	}
	.pc-txtmenu a:hover {
		color:var(--white);
		background-color:var(--green);	
	}
	.header-tel {
		display: flex;
		flex-direction: column;
		align-items:flex-end;
		justify-content: center;
		text-align: right;
	}
	.header-tel a {
		color:var(--green);
		font-size:24px;
		font-weight: 700;
		line-height: 1;
	}
	.header-tel span {
		font-size:12px;
		letter-spacing: 0.1em;
	}
	.header-mail {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		text-align: right;
		color:var(--white);
		background-color:var(--green);
		height:80px;
		font-size:var(--font-pc-small);
		line-height: 1.5;
		padding-right:25px;
		background-image:url(images/email.svg);
		background-repeat: no-repeat;
		background-position:25px center;
	}
	.header-mail:hover {
		background-color:#5faf2a;
	}
	.drawer-btn,
	.drawer {
		display: none;
	}
}
/*-----------------------------------------
mainvisual
------------------------------------------*/
.mainvisual {
	position: relative;
	z-index: 1;
	background-image: linear-gradient(0deg, #5a9930, #79b94e);
	overflow: hidden;
}
/*
.mainvisual::before {
	content:"";
	position: absolute;
	z-index: 1;
	right:0;
	width:100%;
	background-image:url(images/mainvisual-bg.webp);
	background-size:auto 100%;
	background-repeat: no-repeat;
	background-position: right bottom;
	opacity: 0.25;
}
	*/
.mainvisual-copy {
	position:relative;
	z-index: 10;

}
.mainvisual-copy::before {
	content:"";
	position: absolute;
	background-image:url(images/bg-logoseal.webp);
	background-repeat: no-repeat;
	background-size:auto 100%;
	background-repeat: no-repeat;
}
.subcopy,
.maincopy {
	color:var(--white);
	line-height: 1.5;
	font-weight: 700;
	text-shadow: 0px 3px 8px rgba(68, 136, 22, 1);
}
.subcopy {
	margin-bottom:1em;
}
.maincopy span {
	color:#f4fc8f;
	line-height: 1.5;
	font-weight: 700;
	text-shadow: 0px 3px 8px rgba(68, 136, 22, 1);
}
.mainvisual-pic {
	position: absolute;
	z-index: 5;
}
.mainvisual-badge {
	position: absolute;
	z-index: 5;
}
.mainvisual-badge-inner {
	position: relative;
	background-color:var(--bg);
	background-image:url(images/crown.svg);
	background-repeat: no-repeat;
	box-shadow:var(--shadow);
	border-radius:50%;
	text-align: center;
}
.mainvisual-badge-inner::after {
	content:"";
	position: absolute;
	z-index: 1;
	border: 1px dashed var(--white);
	border-radius: 50%;
	animation: rotate-circle 50s linear infinite;
}
@keyframes rotate-circle {
      from {
        transform: rotate(0deg);
      }
      to {
        transform: rotate(360deg);
      }
}
.mainvisual-badge-inner * {
	line-height:1;
	font-weight: 700;
	text-align: center;
}
.mainvisual-badge-inner span,
.mainvisual-badge-inner p {
	display:block;
	font-weight: 700;
}
.badge-num {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: flex-end;
}
.badge-num::after {
	content:"";
	position: absolute;
	z-index: 1;
	background-color:var(--yellow);
	width:100%;
	left:50%;
	transform: translateX(-50%);
}
.badge-num span {
	position: relative;
	z-index: 5;
	color:var(--red);
	line-height: 1;
}
.badge-num div {
	position: relative;
	z-index: 5;
}
@media (width < 767px) {
	#canvas-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.5;
}
	.mainvisual {
		height:172vw;
	}
	.mainvisual::before {
		height:100dvh;
		bottom:0;
	}
	.mainvisual-copy {
		position: relative;
		height:100dvh;
		padding-left:5vw;
	}
	.mainvisual-copy::before {
		width:37.6vw;
		height:35.4vw;
		top:20vw;
		left:5vw;
	}
	.subcopy {
		padding-top:calc(50px + 12vw);
		font-size:var(--font-sp-large);
	}
	.maincopy {
		font-size:var(--font-sp-xx-large);		
	}
	.maincopy span {
		font-size:var(--font-sp-xxx-large);	
	}
	.cta-btncage {
		flex-direction: column;
		position: absolute;
		width:90vw;
		left:5vw;
		top:130vw;
	}
	.mainvisual-pic {
		right:-22vw;
		bottom:-16vw;
		width:140vw;
		height:107.6vw;
	}
	.mainvisual-badge {
		top:50%;
		transform: translateY(-50%);
		left:25vw;
	}
	.mainvisual-badge,
	.mainvisual-badge-inner {
		width:50vw;
		height:50vw;
	}
	.mainvisual-badge-inner {
		background-size:6vw auto;
		background-position: center 2vw;
	}
	.mainvisual-badge-inner::after {
		width:54vw;
		height:54vw;
		top:-2vw;
		left:-2vw;
	}
	.mainvisual-badge-inner .tani {
		padding-top:10vw;
		padding-bottom:1vw;
	}
	.badge-num span {
		font-size:16vw;
	}
	.badge-num div {
		font-size:var(--font-sp-large);
	}
	.badge-num::after {
		height:3vw;
		bottom:0px;
	}
	.mainvisual-badge-inner p {
		padding-top:1vw;
	}
}
@media (768px <= width) {
	.mainvisual::before {
		height:825px;
		bottom:-225px;
	}
	.mainvisual-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.mainvisual-copy::before {
		width:188px;
		height:177px;
		top:50%;
		transform: translateY(-60%);
		left:50px;
	}
	.subcopy {
		font-size:var(--font-pc-x-large);
	}
	.maincopy,.maincopy span {
		font-size:var(--font-pc-xxx-large);
	}
	.mainvisual-badge,
	.mainvisual-badge-inner {
		width:216px;
		height:216px;
	}
	.mainvisual-badge-inner {
		background-size:32px auto;
		background-position: center 8px;
	}
	.mainvisual-badge-inner::after {
		width:236px;
		height:236px;
		top:-10px;
		left:-10px;
	}
	.mainvisual-badge-inner .tani {
		padding-top:48px;
		padding-bottom:4px;
	}
	.badge-num span {
		font-size:72px;
	}
	.badge-num div {
		font-size:var(--font-pc-large);
	}
	.badge-num::after {
		height:12px;
		bottom:0px;
	}
	.mainvisual-badge-inner p {
		padding-top:16px;
	}
	.maincopy {
		margin-bottom:60px;
	}
}

@media (768px <= width < 1079px) {
		#canvas-bg {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.5;
	}
	.mainvisual {
		height:800px;
	}
	.mainvisual-pic {
		right:20px;
		bottom:-80px;
		width:90%;
		height:auto;
	}
	.mainvisual-badge {
		top:434px;
		left:50%;
		transform: translateX(-50%);
	}
	.mainvisual-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height:500px;
		padding-left:40px;
	}
}
@media (1080px <= width) {
	#canvas-bg {
	position: absolute;
	top: 0;
	left: 20%;
	width: 100%;
	height: 100%;
	z-index: -1;
	opacity: 0.5;
	}
	.mainvisual {
		height:600px;
	}
	.mainvisual-container {
		position: relative;
		max-width:1280px;
		margin-left:auto;
		margin-right:auto;
	}
	.mainvisual-pic {
		right:20px;
		bottom:-80px;
		width:700px;
		height:538px;
	}
	.mainvisual-badge {
		top:234px;
		right:274px;
	}
	.mainvisual-copy {
		display: flex;
		flex-direction: column;
		justify-content: center;
		height:600px;
		padding-left:40px;
	}
}

/*-----------------------------------------
btn-cta
------------------------------------------*/
.btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	border-radius:8px;
	transition: all 0.4s ease;
	outline: none;
	padding-left:1em;
	padding-right:1em;
}
.btn.btn-cta {
	flex-direction: column;
	color: var(--text);
	background-color: var(--bg);
	padding-left:56px;
	line-height: 1.5;
}
.btn-cta::before {
	content: '';
	position: absolute;
	top: -3px;
	left: -3px;
	right: -3px;
	bottom: -3px;
	background-image: linear-gradient(90deg, #b3b6ea, #d1a2c3 50%, #e88a98);
	border-radius: 11px;
	z-index: -1;
	filter: blur(5px);
	opacity: 1;
	transition: all 0.4s ease;
}
.btn-cta::after {
	content:"";
	position: absolute;
	z-index: 2;
	background-image:url(images/icon-cta-girl.svg);
	background-repeat: no-repeat;
	background-position: center bottom;
	width:56px;
	height:70px;
	left:0;
	bottom:0;
}
.btn-cta span {
	display: inline-block;
	font-weight: 700;
	font-size:20px;
	background: linear-gradient(90deg, #f772d1 0%, #c872f2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.btn-cta:hover {
	color:#f772d1;
}
.btn-cta:hover::before {
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
}
.btn-ghost {
	color:var(--white);
	border:1px solid var(--white);
}
.btn-ghost:hover,
.mainvisual .btn-ghost:hover {
	color:var(--text);
	background-color:var(--bg);
}
.cta-btncage {
	display:flex;
	gap:20px;
}
.btn-center {
	text-align: center;
}
@media (width < 767px) {
	.btn {
		min-height:16vw;
	}
	.mainvisual .btn-ghost,
	footer .btn-ghost {
		background:var(--green);
	}
}
@media (768px <= width) {
	.btn {
		height:60px;
	}
	.mainvisual .btn-ghost,
	footer .btn-ghost {
		background:rgba(0,0,0,0.1);
	}
}
/*-----------------------------------------
reason
------------------------------------------*/

.typewriter {
    transform-style: preserve-3d;
    perspective: 1000px;
	overflow: hidden;
}
.typewriter span {
    display: inline-block;
    opacity: 0;
    transform: translateY(30%) translateZ(0);
    backface-visibility: hidden;
    will-change: transform, opacity;
    -webkit-font-smoothing: antialiased;
    font-family: 
        "Noto Serif JP", 
        "Noto Serif CJK JP", 
        "Hiragino Mincho ProN", 
        serif;
}
.typewriter.putactionon span,
.typewriter.putactionon-one span {
    animation: slideUp 0.3s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}
@keyframes slideUp {
    0% {
        opacity: 0;
        transform: translateY(20%);
    }
    30% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}
.reason {
	position: relative;
}
.reason::before {
	content:"Reason";
	font-family: "Cormorant Garamond", serif;
	line-height: 1;
	font-weight: 500;
	text-align: right;
	position: absolute;
	z-index: 1;
	width:100%;
	top:0;
	right:0;
	color:var(--card);
}
.reason-tt {
	position: relative;
	z-index: 2;
	margin-left:auto;
	margin-right:auto;
	text-align: right;
	font-weight: 700;
}
.reason-tt::before {
	content:"";
	position: absolute;
	z-index: 2;
	background-image:url(images/img-reason-tt.webp);
	background-size:contain;
	background-repeat: no-repeat;
}
.reason-tt::after {
	content:"";
	position: absolute;
	z-index: -1;
	left:0;
	bottom:0;
	background-color:var(--yellow);
	width:100%;
	height:1em;
}
.reason-tt span {
	font-weight: 700;
	line-height: 1;
}
.reason-tt h2 {
	font-weight: 700;
	background: linear-gradient(90deg, #f772d1 0%, #c872f2 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	line-height: 1;	
}
.reason-cel {
	position: relative;
	background-color:var(--card);
	border-radius:8px;
}
.reason-cel h2 {
	position: relative;
	display:flex;
	justify-content: center;
	align-items: baseline;
}
.reason-cel .num span {
	color:var(--red);
	font-weight: 700;
	line-height:1;
}
@media (width < 767px) {
	.reason::before {
		font-size:20vw;
		height:30vw;
	}
	.reason-tt {
		width:70vw;
		padding-right:20vw;
		
	}
	.reason-tt::before {
		width:20vw;
		height:20vw;
		right:0;
		bottom:-1vw;
	}
	.reason-tt span {
		font-size:var(--font-sp-x-large);
	}
	.reason-tt h2 {
		font-size:var(--font-sp-xxx-large);
	}
	.reason-grid {
		display:grid;
		margin-top:15vw;
		row-gap:12vw;
	}
	.reason-cel {
		padding:5vw;
	}
	.reason-cel h2 {
		margin-top:-14vw;
		margin-bottom:4vw;
	}
	.reason-cel span {
		font-size:var(--font-sp-x-large);
	}
	.reason-cel .num span {
		font-size:16vw;
	}
	.reason-cel h3 {
		font-size:var(--font-sp-x-large);
		margin-bottom: 4vw;
	}
}
@media (768px <= width) {
	.reason::before {
		font-size:200px;
		height:133px;
	}
	.reason-tt {
		width:440px;
		padding-right:110px;
		
	}
	.reason-tt::before {
		width:100px;
		height:100px;
		right:0;
		bottom:-5px;
	}
	.reason-tt span {
		font-size:var(--font-pc-x-large);
	}
	.reason-tt h2 {
		font-size:var(--font-pc-xxx-large);
	}
	.reason-grid {
		display:grid;
		margin-top:100px;
	}
	.reason-cel {
		padding:36px;
	}
	.reason-cel h2 {
		margin-top:-84px;
		margin-bottom:20px;
	}
	.reason-cel span {
		font-size:var(--font-pc-x-large);
	}
	.reason-cel .num span {
		font-size:96px;
	}
	.reason-cel h3 {
		font-size:var(--font-pc-x-large);
		margin-bottom: 40px;
	}
}
@media (768px <= width < 1079px) {
	.reason-grid {
		grid-template-columns: 1fr;
		row-gap: 48px;
	}
}
@media (1080px <= width) {
	.reason-grid {
		grid-template-columns: 1fr 1fr 1fr;
		gap:25px;
	}
}
hr.scroll {
	display:block;
	position: relative;
	z-index: 1;
	border:none;
}
hr.scroll:after {
	content : '';
	display : block;
	position : absolute;
	background-color: var(--green);
	left : 50%;
	transform : translateX(-50%);
	width : 1px;
	animation: scroll 1.5s infinite;
}
@keyframes scroll {
	0% {
		transform: scale(1, 0);
		transform-origin: 0 0;
	}
	50% {
		transform: scale(1, 1);
		transform-origin: 0 0;
	}
	50.1% {
		transform: scale(1, 1);
		transform-origin: 0 100%;
}
	100% {
		transform: scale(1, 0);
		transform-origin: 0 100%;
	}
}
@media (width < 767px) {
	hr.scroll {
		height:8vw;
		margin-top:8vw;
	}
	hr.scroll:after {
		height:8vw;
		top:0;
	}
}
@media (768px <= width) {
	hr.scroll {
		height:64px;
		margin-top:60px;
	}
	hr.scroll:after {
		height:64px;
		top:0;
	}
}
/*-----------------------------------------
service
------------------------------------------*/
.service {
	position: relative;
}
.service-tt,
.service .leadtext {
	text-align: center;
	position: relative;
	z-index: 2;
}
.service::before {
	content:"Services";
	font-family: "Cormorant Garamond", serif;
	line-height: 1;
	font-weight: 500;
	text-align: center;
	position: absolute;
	z-index: 1;
	width:100%;
	top:0;
	right:0;
	color:var(--card);
}
.service-tt {
	margin-left:auto;
	margin-right:auto;
	margin-bottom:2em;
	font-weight: 700;
}
.tablist {
	position: relative;
	z-index: 10;
	display:flex;
	justify-content: center;
	gap:1px;
}
.tablist button span {
	display:block;
}
[role="tab"] {
	display: block;
	border:none;
	cursor:pointer;
	position: relative;
	border-radius:5px 5px 0 0;
    transition: all 0.4s;
	background-color: var(--card);
	background-repeat: no-repeat;
}
[role="tab"][aria-selected="true"] {
    background-color: #eaf3da;
}
[role="tab"] span {
	color:#919191;
	letter-spacing: 0.1em;
}
.tab-kojin {
	background-image:url(images/icon-kojin.svg);
	background-position: right center;
	text-align: right;
}
.tab-houjin {
	background-image:url(images/icon-houjin.svg);
	background-position: left center;
	text-align: left;
}
[role="tabpanel"] {
	 background-color: #eaf3da;
}
.service-copy {
	text-align: center;
	line-height: 2;
	font-weight: 700;
}
.service-grid {
	display: grid;
}
.service-grid li {
	background-color:var(--bg);
	border-radius:8px;
	box-shadow:var(--shadow);
}
.service-grid li h3 {
	color:var(--green);
}
@media (width < 767px) {
	.service::before {
		font-size:20vw;
		height:30vw;
	}
	.service-tt {
		font-size:var(--font-sp-xx-large);
	}
	.tablist {
		margin-top:8vw;
	}
	[role="tab"] {
		width:44vw;
		height:16vw;
		background-size:auto 12vw;
		font-size:var(--font-sp-normal);
		font-weight: 700;
	}
	[role="tab"] span {
		font-size:var(--font-sp-x-small);
	}
	.tab-kojin {
		padding-right:12vw;
	}
	.tab-houjin {
		padding-left:12vw;
	}
	.service-copy {
		font-size:var(--font-sp-large);
	}
	.service-grid {
		gap:5vw;
		padding:10vw 0;
	}
	.service-grid li {
		padding:5vw;
	}
	.service-grid li h3 {
		font-size:var(--font-sp-large);
		border-bottom:1px solid var(--border);
		padding-bottom: 1em;
		margin-bottom:1em;
	}
}
@media (768px <= width) {
	.service::before {
		font-size:200px;
		height:133px;
		top:-33px;
	}
	.service-tt {
		font-size:var(--font-pc-xx-large);
	}
	.tablist {
		margin-top:40px;
	}
	[role="tab"] {
		width:300px;
		height:100px;
		background-size:auto 80px;
		font-size:var(--font-pc-x-large);
		font-weight: 700;
	}
	.tab-kojin {
		padding-right:80px;
	}
	.tab-houjin {
		padding-left:80px;
	}
	.service-copy {
		font-size:var(--font-pc-x-large);
	}
	.service-grid {
		gap:38px;
		padding:64px 0 48px 0;
	}
	.service-grid li {
		padding:25px;
		display: grid;
		grid-template-rows: subgrid;
		grid-row: span 2;
		gap:0px;
	}
	.service-grid li h3 {
		font-size:var(--font-pc-large);
		border-bottom:1px solid var(--border);
		padding-bottom: 1em;
		margin-bottom:1em;
		overflow-wrap: normal;
  		word-break: keep-all;
  		line-break: strict;
	}
}
@media (768px <= width < 1079px) {
	.service-grid {
		grid-template-columns: 1fr 1fr;
	}
}
@media (1080px <= width) {
	.service-grid {
		grid-template-columns: 1fr 1fr 1fr 1fr;
	}
}
/*-----------------------------------------
news
------------------------------------------*/
.news-grid {
	display: grid;
}
.left-tt h2 {
	position: relative;
	font-weight: 500;
}
.left-tt h2::after {
	content:"";
	position: absolute;
	bottom:0;
	height:1px;
	background: linear-gradient(90deg, #5a993c 0%, #7182ef 100%);
}
.left-tt span {
	display: block;
	font-weight: 700;
}
.news-content ul li {
	border-bottom:1px solid var(--border);
	color:var(--text-sub);
}
.news-content ul li:last-child {
	border-bottom:none;
}
.news-content ul li time {
	display:block;
	color:#999999;
}
.news-content ul li h3 {
	font-weight: 700;
	color:var(--text);
}
@media (width < 767px) {
	.left-tt {
		margin-bottom:8vw;
		text-align: center;
	}
	.left-tt h2 {
		font-size:12vw;
	}
	.left-tt h2::after {
		width:32vw;
		left:50%;
		transform: translateX(-50%);
	}
	.left-tt span {
		margin-top:3vw;
	}
	.news-content ul li {
		padding:5vw 0;
	}
	.news-content ul li time {
		font-size:var(--font-sp-small);
		margin-bottom: 4vw;
	}
	.news-content ul li h3 {
		font-size:var(--font-sp-large);
		margin-bottom: 4vw;
	}
}
@media (768px <= width) {
	.news-grid {
		grid-template-columns: 1fr 2fr;
	}
	.left-tt h2 {
		font-size:72px;
	}
	.left-tt h2::after {
		width:120px;
		left:0;
	}
	.left-tt span {
		margin-top:18px;
	}
	.news-content ul li {
		padding:30px 0;
	}
	.news-content ul li time {
		font-size:var(--font-pc-small);
		margin-bottom: 20px;
	}
	.news-content ul li h3 {
		font-size:var(--font-pc-large);
		margin-bottom: 20px;
	}
}
/*-----------------------------------------
company
------------------------------------------*/
section.company {
	border-top:1px solid var(--border);
	padding-top:0;
	padding-bottom:0;
}
.company-left table tbody tr {
	border-bottom:1px solid var(--border);
}
.company-left table tbody tr:last-child {
	border-bottom:none;
}
.company-left table tbody tr th {
	font-weight: 400;
	text-align: left;
}
@media (width < 767px) {
	section.company {
		line-height:1;
	}
	.company-left {
		padding:5vw;
	}
	.company-left table {
		margin:8vw auto;
	}
	.company-left table tbody tr th {
		padding-right:4vw;
		white-space: nowrap;
	}
	.company-left table tbody tr th,
	.company-left table tbody tr td {
		padding-top:4vw;
		padding-bottom:4vw;
		vertical-align: top;
		line-height:1.75;
	}
}
@media (768px <= width) {
	.container-company {
		display: grid;
		grid-template-columns: 
		minmax(20px, 1fr) 
    	minmax(auto, 1000px) 
    	minmax(20px, 1fr);
	}
	.company-grid {
		grid-column: 2 / -1;
		display: grid;
		grid-template-columns:2fr 1fr;
		column-gap: 40px;
		height:600px;
	}
	.company-left {
		padding-top:60px;
	}
	.company-left table {
		margin-top:40px;
	}
	.company-left table tbody tr th {
		padding-right:clamp(24px,3.8vw,48px);
	}
	.company-left table tbody tr th,
	.company-left table tbody tr td {
		padding-top:16px;
		padding-bottom:16px;
		vertical-align: top;
	}
}
/*-----------------------------------------
footer
------------------------------------------*/
footer {
	background-color:var(--green);
	background-image:url(images/bg-footer.webp);
	background-repeat: no-repeat;
}
.footer-word {
	position: relative;
	height:100%;
}
.footer-word h2 {
	margin-bottom: 1em;
}
.footer-word h2,
.footer-word p {
	color:var(--white);
	text-shadow: 0px 3px 8px rgba(68, 136, 22, 1);
}
@media (width < 767px) {
	footer {
		background-size:150% auto;
		background-position: center bottom;
		height:172vw;
	}
	.footer-word {
		padding-top:calc(50px + 10vw);
		padding-left:5vw;
		padding-right:5vw;
	}
	.footer-word h2 {
		font-size:var(--font-sp-xx-large);
	}
}
@media (768px <= width) {
	footer {
		display:flex;
		flex-direction: column;
		justify-content: center;
		background-size:auto 100%;
		background-position: right bottom;
		min-height:390px;
	}
	.footer-word {
		display:flex;
		flex-direction: column;
		justify-content: center;
		padding-left:5vw;
	}
	.footer-word h2 {
		font-size:var(--font-pc-xx-large);
	}
	.footer-word p {
		margin-bottom:2em;
	}
}