@charset "utf-8";

/* 基本
-------------------------------------------------------------------------------------- */

body {
	/* exdark > dark > fedault > light > exlight */
	/* ll > l > m > s > ss */
	--color_default: #000; /*ブラック：デフォルトカラー*/
		--color_default_exlight:#f8f8f8;
	--color_link: #1e95d4;
	--color_green: #03af7a;
		--color_green_light:#ebf9f0;
		--color_green_gray_light:#808C7F;
	--color_orange:#f18f10;
		--color_gold_light:#f3f1ec;
	--ff_roboto: "Roboto"; /*font-family*/
	--lh_m: 1.7; /*line-height*/
		--lh_l: 2.0;
}


/* アニメーション
-------------------------------------------------------------------------------------- */
.sa {
	opacity: 0;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
}
@media screen and (max-width: 940px) {
	.sa {
		-webkit-animation-name:none;
		animation-name: none;
		-webkit-transition: all 0s 0s ease;
		transition: all 0s 0s ease
	}
}
#index .mv .text h1 {
	white-space:nowrap;
	overflow:hidden;
}
header .header-inner .to-login.for-top {
	-webkit-animation-name: fade-in-ani;
	animation-name: fade-in-ani;
	-webkit-animation-duration: 200ms;
	animation-duration: 200ms;
	-webkit-animation-delay: 200ms;
	animation-delay: 200ms;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
	-webkit-transform: none;
	transform: none;
}
.sa.mv-pri-text.show {
	-webkit-animation-name: fade-left-slow-ani;
	animation-name: fade-left-slow-ani;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
	-webkit-transform: none;
	transform: none;
}
.sa.pre-nav-right.show,
.sa.right-menu.show,
.sa.pre-nav.show,
.sa.sentence.show,
.sa.badge.show,
.sa.girl.show,
.sa.base-btn.show,
.sa.mv-sec-text.show {
	-webkit-animation-name: fade-in-ani;
	animation-name: fade-in-ani;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
	-webkit-transform: none;
	transform: none;
}
.sa.hanbox.show,
.sa.cart.show,
.sa.comimgbox.show,
.sa.number.show,
.sa.strbox.show,
.sa.str-text.show,
.sa.str-img.show,
.sa.number.show,
.sa.task-details-text.show,
.sa.task-details-image.show,
.sa.jump.show,
.sa.paper.show,
.sa.task-before.show,
.sa.task-after.show,
.sa.after-text.show {
	-webkit-animation-name: fade-up-ani;
	animation-name: fade-up-ani;
	-webkit-animation-duration: .3s;
	animation-duration: .3s;
	-webkit-animation-delay: .3s;
	animation-delay: .3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	opacity: 0;
	-webkit-transform: none;
	transform: none;
}

/*** スクロールトリガー ***/
@keyframes fade-up-ani {
  from {
    transform: translateY(20px);
    opacity: .0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fade-left-ani {
	from {
		transform: translateX(-20px);
		opacity: .0;
	}
	to {
		transform: translateX(0);
		opacity: 1;
	}
}
@keyframes fade-left-slow-ani {
	from {
		width:0%;
		opacity: .0;
	}	
	to {
		width:100%;
		opacity: 1;
	}	
}
@keyframes fade-in-ani {
	from {
	  opacity: .0;
	}
	to {
	  opacity: 1;
	}
}


/* トップヘッダー
-------------------------------------------------------------------------------------- */
header.index-header {
	border-bottom: none;
	position: absolute;
	background-color: initial;
}
header.index-header .header-inner.up {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}
header.index-header.move {
	border-bottom: 1px solid #dfdfdf;
	background-color: #fff;
	position: fixed;
	top: -36px;
	z-index: 200;
}
header.index-header.main-header.move {
	top: -46px;
}
header.index-header.move .to-login {
	display: none;
}
header.index-header.move .to-buyer {
	display: none;
}
/* pcのみ */
@media screen and (min-width: 941px) {
	header.index-header:not(.move) .header-logo {
		min-width:150px;
		height: 60px;
		margin: 0;
	}
	header.index-header nav {
		position:relative;
	}
	header.index-header:not(.move) .to-buyer {
		margin-right:130px;
		color: var(--color_default);
	}
	header.index-header:not(.move) .to-buyer-btn:hover , header.index-header:not(.move) .to-buyer-btn:focus-visible {
		color:#03AF7A;
	}
	header.index-header:not(.move) .to-login {
		font-size:14px;
		font-weight: normal;
		padding: 3px 6px 3px 23px;
		border: 1px solid var(--color_default);
		border-radius: 4px;
		background: url(/img/header/login.png) left 7px center/11px no-repeat;
		-webkit-transition: background-color .2s;
		transition: background-color .2s;
		top: -35px;
		position: absolute;
		right: 0;
		background-color:#fff;
		color: var(--color_default);
	}
	header.index-header:not(.move) .to-login:hover, header.index-header:not(.move) .to-login:focus-visible {
		background-color: var(--color_green_light)
	}
	header.index-header:not(.move) .to-login:focus-visible{
		outline: solid;
		outline-offset: 2px;
		outline-color: #333333;	
		outline-width: 2px;
	}
	header.index-header:not(.move) .to-buyer:focus-visible {
		outline: solid;
		outline-offset: 2px;
		outline-color: #333333;
		outline-width: 2px;
		border-radius: 2px;
	}
}
/* pc1100 */
@media  (min-width: 941px) and (max-width: 1100px) {
	header nav .pre-nav {
		max-width: 440px;
	}
	header.index-header nav {
		margin-left: 2%;
	}
	header.index-header:not(.move) .header-logo {
		min-width:100px;
	}
}
/* tab/m */
@media screen and (max-width: 940px) {
	header.header-inner .header-logo {
		margin: 12px 0 11px;
		width: 128px;
		height: 32px;
	}
	header.index-header .header-inner.up {
		display:none;
	}
	header.index-header.move {
		top:0;
	}
	header.index-header.move .to-login {
		position: absolute;
	}
}


/* メインビジュアル
-------------------------------------------------------------------------------------- */

/*** 追加デフォルト設定 ***/
main#index figure {
	padding: 0;
	margin: 0;
	line-height: 0;
}
main#index img {
	width: 100%;
	height: auto;
}
p,
span {
	padding: 0;
	margin: 0;
	line-height: 1;
}
/*** /追加デフォルト設定 ***/

main#index {
	padding:0;
	font-size: 18px;
	overflow: hidden;
}
#index .rwd-sec {
	display: none;
}
#index .mv {
	background: linear-gradient(#fff, 50%, var(--color_default_exlight));
	position: relative;
}
#index .mv-inner {
	display: flex;
	justify-content: center;
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
#index .mv .mv-img {
	display: flex;
	width: 500px;
	position: relative;
}
#index .mv-bg:before {
	content: "";
	background: url(/img/pre/index/bg_bills.webp) left -120px bottom 0px no-repeat;
	background-size: 1300px;
	width: 45%;
	height: 680px;
	position: absolute;
	top: 0;
	right: 0;
	border-radius: 0 0 0 60px;
}
#index .mv .mv-img .girl {
	max-width: 460px;
	position: absolute;
	bottom: 0;
	left: 0;
}
#index .mv-img .badge {
	max-width: 200px;
	position: absolute;
	top: 140px;
	left: 260px;
	padding: 0 20px;
}
#index .mv .text {
	margin-left: 120px;
	width: 600px;
}
#index .mv .text h1 {
	font-weight: bold;
	margin-top: 180px;
	font-size: 62px;
	line-height:1.5;
}
#index .mv .text p {
	line-height: var(--lh_l);
	margin: 20px 0 0;
}
#index .mv .text .base-btn {
	margin: 40px 0 70px;
}
/* pc1100 */
@media  (min-width: 941px) and (max-width: 1100px) {
	#index .mv .text {
		margin-left: 60px;
	}
	#index .mv-img .badge {
		left: 200px;
	}
}
/* tab/m */
@media screen and (max-width: 940px) {
	main#index {
		font-size: 16px;
	}
	#index .rwd {
		display: none;
	}
	#index .mv-inner {
		display: block;
	}
	#index .mv .mv-img {
		position: initial;
	}
	#index .mv .mv-img .girl {
		max-width: 300px;
		bottom: inherit;
		top: 206px;
		right: 17%;
		left: inherit;
	}
	#index .mv-img .badge {
		max-width: 190px;
		right: 20px;
		left: inherit;
		top: 200px;
	}
	#index .mv .text {
		margin:0 25px auto;
		width: auto;
	}
	#index .mv .text h1 {
		font-size: 56px;
		margin: 90px 0 310px;
		line-height: var(--lh_m);
	}
	#index .mv .text .mv-sec-text-wrap {
		display: flex;
		gap:40px;
		margin: 20px 0 0;
	}	
	#index .mv .text .mv-sec-text-wrap p {
		flex: 1;
	}	
	#index .mv .text .mv-sec-text-wrap a {
		flex: 1;
		max-width: 320px;
	}	
	#index .mv-bg:before {
		background-position: left bottom 0;
		background-size: 900px;
		right: inherit;
		top: 340px;
		left: 30px;
		width: 100%;
		height: 240px;
		border-radius: 40px 0 0 40px;
	}
	#index .mv .text .base-btn {
		margin: 20px 0 60px;
		max-width: 100%;
	}
	.base-btn.pri-cv-btn .first {
		display: block;
	}
	.base-btn.pri-cv-btn .second {
		margin-top: 0.25em;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .rwd-sec {
		display: block;
	}
	#index .mv-inner {
		padding-bottom: 60px;
	}
	#index .mv .text h1 {
		font-size: 40px;
		overflow: visible;
	}
	#index .mv-bg:before {
		top: 260px;
		background-position: left bottom 0;
		background-size: 600px;
	}
	#index .mv .mv-img .girl {
		max-width: 240px;
		top: 200px;
	}
	#index .mv-img .badge {
		max-width: 150px;
		right: 0;
	}
	#index .mv .text p {
		margin-top: 320px;
	}
	.base-btn.pri-cv-btn .time {
		font-size: 30px;
	}
	.base-btn.pri-cv-btn .first {
		font-size: 20px;
	}
	.base-btn.pri-cv-btn .free {
		font-size: 14px;
	}
	#index .mv .text .mv-sec-text-wrap {
		display: block;
	}
	#index .mv .text .mv-sec-text-wrap a {
		margin: 20px auto 0;
	}	
}


/* 導入企業No.1
-------------------------------------------------------------------------------------- */
#index .logo-area {
	margin: 80px 0 40px;
}
#index .logo-area h2 {
	font-size: 26px;
	font-weight: bold;
	text-align: center;
	line-height: 1;
}
#index .logo-area h2 span {
	font-size: 50px;
	color: var(--color_green);
	font-family: var(--ff_roboto);
	margin-left: 10px;
}
#index .logo-area .op {
	font-size: 10px;
	color: var(--color_green_gray_light);
	width: 96%;
	max-width: 1400px;
	margin: 0 auto;
	text-align: right;
	line-height: var(--lh_m);
}

/*** スライダー ***/
#index .logo-slider {
	display: flex;
	width: 100%;
	height: 160px;
	overflow: hidden;
	margin: 60px 0 30px;
}
#index .logo-slider img {
	width: auto;
	height: 100%;
}
#index .logo-slider img:first-child {
	animation: slide1 80s -40s linear infinite;
}
#index .logo-slider img:last-child {
	animation: slide2 80s linear infinite;
}
@keyframes slide1 {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes slide2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .logo-area {
		margin-top: 50px;
	}
	#index .logo-area h2 {
		font-size: 22px;
		line-height: var(--lh_m);
	}
	#index .logo-area h2 span {
		font-size: 36px;
	}
	#index .logo-slider {
		margin: 30px 0 15px;
		height: 100px;
	}
	#index .logo-slider img {
		width: 1400px;
		height: 106px;
	}
	#index .logo-area .op {
		font-size: 8px;
	}	
}


/* こんなお悩みありませんか？
-------------------------------------------------------------------------------------- */
#index .solution {
	background-color: var(--color_green_light);
	position: relative;
}
#index .solution h2 {
	text-align: center;
	font-size: 32px;
	padding:60px 0 30px;
}
#index .solution h2 span {
	color: var(--color_green);
}
#index .solution .task-before {
	width: 100%;
	max-width: 1050px;
	margin: 0 auto;
	position: relative;
	line-height: 1.4;
	height: 300px;
}
#index .solution .task-before li {
	font-size: 18px;
	text-align: center;
	background-color: #fff;
	padding:20px 20px 15px;
	border-radius: 23px;
	position: absolute;
	width: 240px;
	height: 60px;
	filter: drop-shadow( 0 0 4px #d5e5da);
}
#index .solution .task-before li:before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: 40px;
	top: 70px;
	border-right: 30px solid #fff;
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	transform: rotate(55deg);
}

#index .solution .task-before li:nth-child(1) { top: 0; left: 200px;}
#index .solution .task-before li:nth-child(2) { top: 0; right: 200px;}
#index .solution .task-before li:nth-child(3) { top: 80px; left: 0;}
#index .solution .task-before li:nth-child(4) { top: 80px; right: 0;}
#index .solution .task-before li:nth-child(5) { top: 170px; left: 100px;}
#index .solution .task-before li:nth-child(6) { top: 170px; right: 100px;}

#index .solution .task-before li:nth-child(1):before {left:inherit; right: 40px; transform: rotate(0deg); top: 74px;}
#index .solution .task-before li:nth-child(3):before{display: none;}
#index .solution .task-before li:nth-child(5):before {left:initial; right: 40px; transform: rotate(0deg); top: 74px;}

#index .solution .task-before:after {
	content: "";
	background: url(/img/pre/index/img_task.svg) center center no-repeat;
	position: absolute;
	left: calc(50% - 130px);
	bottom: -40px;
	width: 260px;
	height: 190px;
}
#index .solution .task-after {
	position: relative;
}
#index .solution .task-after-inner {
	position: relative;
	padding-bottom: 220px;
	overflow: hidden;
}
#index .solution .task-after-inner:before { /*斜面：左*/
	content: "";
	width: 100%;
	height: 150px;
	background-color: #fff;
	position: absolute;
	bottom: 0px;
	clip-path: polygon(0% 0%, 0% 100%, 50% 100%);
	z-index: 1;
}
#index .solution .task-after-inner:after { /*斜面：右*/
	content: "";
	width: 100%;
	height: 150px;
	background-color: #fff;
	position: absolute;
	bottom: 0px;
	clip-path: polygon(50% 100%, 100% 0%, 100% 100%);
	z-index: 1;
}
#index .solution .task-after-bg {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
#index .solution .task-after-bg:before {
	content: "";
	position: absolute;
	background: url(/img/pre/index/bg_dot_l.png) left -1100px bottom 280px no-repeat;
	background-size: 1600px;
	width: 1000px;
	height: 1000px;
	margin-left: -200px;
}
#index .solution .task-after-bg:after {
	content: "";
	position: absolute;
	background: url(/img/pre/index/bg_dot_r.png) right -1120px bottom 250px no-repeat;
	background-size: 1700px;
	width: 1000px;
	height: 1000px;
	margin-right: -200px;
	top: 0;
	right: 0;
}
#index .solution .after-allow {
	position: relative;
	margin: 60px 0;
	height: 100px;
}
#index .solution .after-allow:before,
#index .solution .after-allow span:before {
	content: "";
	position: absolute;
	left: calc(50% - 19px);
	top: 0;
	border-right: 1px solid #000;
	transform:  rotate(55deg);
	width: 50px;
	height: 50px;
}
#index .solution .after-allow:after,
#index .solution .after-allow span:after {
	content: "";
	position: absolute;
	left: calc(50% - 30px);
	top: 0;
	border-bottom: 1px solid #000;
	transform: rotate(35deg);
	width: 50px;
	height: 50px;
}
#index .solution .after-allow span:before,
#index .solution .after-allow span:after {
		display: block;
		top: 16px;
}
#index .solution .balloon {
	margin: 60px 0 0 0;
	background-color: var(--color_green);
	color: #fff;
	font-size: 22px;
	font-weight: bold;
	text-align: center;
	padding: 10px;
	border-radius: 100px;
	width: 100%;
	max-width: 360px;
	margin: 0 auto;
	letter-spacing: 6px;
	position: relative;
}
#index .solution .balloon:before {
	content: '';
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	left: calc(50% - 13px);
	top: 30px;
	border-right:26px solid var(--color_green);
	border-top: 30px solid transparent;
	border-bottom: 30px solid transparent;
	transform: rotate(270deg);
}
#index .solution .after-text {
	display: flex;
	width: 100%;
	max-width: 840px;
	margin: 60px auto;
	font-size:62px;
	align-items: flex-end;
	position: relative;
	z-index: 1;
}
#index .solution .after-text img {
	width: 300px;
}
#index .solution .after-text p {
	font-weight: bold;
	margin: 0 0 6px 0;
}
#index .solution .after-text p .small {
	font-size: 42px;
	padding: 0 2px 0 10px;
}
#index .solution .after-text p .clear {
	font-size: 73px;
	color: var(--color_orange);
}
#index .solution .after-text p .more  {
	font-size: 100px;
	display: inline-flex;
	transform: rotate(15deg);
	margin-left: -15px;
	position: absolute;
	right: 10px;
	top: -10px;
}
#index .solution .after-image {
	position: relative;
}
#index .solution .after-image figure {
	width: 100%;
	text-align: center;
	position: absolute;
	top: -200px;
	z-index: 1;
}
#index .solution .after-image .jump img {
	width: 330px;
}
#index .solution .after-image .paper img {
	width: 740px;
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .solution h2 {
		font-size: 22px;
	}
	#index .solution .task-before {
		max-width: 700px;
	}
	#index .solution .task-before li {
		width: 240px;
		font-size: 16px;
		padding: 20px;
		height: 50px;
		border-radius: 18px;
		line-height: 1.7;
	}
	#index .solution .task-before li:nth-child(1) {left: 0;}
	#index .solution .task-before li:nth-child(2) {right: 0;}
	#index .solution .task-before li:nth-child(3) {left: calc(50% - 140px); top: 70px;}
	#index .solution .task-before li:nth-child(4) {left: 0; top: 140px;}
	#index .solution .task-before li:nth-child(5) {right: 0; top: 140px; left: inherit;}
	#index .solution .task-before li:nth-child(6) {right: calc(50% - 140px); top: 200px;}

	#index .solution .task-before li:nth-child(1):before,
	#index .solution .task-before li:nth-child(4):before {
		transform: rotate(0deg);
		left: 40px;
		top: 68px;
	}
	#index .solution .task-before li:nth-child(2):before,
	#index .solution .task-before li:nth-child(5):before {
		left: inherit;
		right: 40px;
		top: 66px;
	}
	#index .solution .task-before li:nth-child(5):before {
		transform: rotate(55deg);
	}
	#index .solution .task-before li:nth-child(6):before {
		left: inherit;
		right: 40px;
		top: 66px;
	}
	#index .solution .task-before:after {
		width: 160px;
		height: 120px;
		background-size: 160px;
		bottom: -130px;
		left: calc(50% - 80px);
	}
	#index .solution .after-allow {
		 margin: 160px 0 80px;
		 height: 10px;
	}
	#index .solution .after-allow:before,
	#index .solution .after-allow span:before,
	#index .solution .after-allow:after,
	#index .solution .after-allow span:after {
		width: 25px;
		height: 25px;
	}
	#index .solution .after-allow:before,
	#index .solution .after-allow span:before {
		left: calc(50% - 10px);
	}
	#index .solution .after-allow:after,
	#index .solution .after-allow span:after {
		left: calc(50% - 15px);
	}
	#index .solution .after-allow span:before,
	#index .solution .after-allow span:after {
		top: 8px;
	}
	#index .solution .task-after-bg:before {
		background: url(/img/pre/index/bg_dot_l.png) left -660px bottom 400px no-repeat;
		background-size: 1300px;
		margin-left: -340px;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .solution .task-before {
		max-width: 360px;
	}
	#index .solution .task-before li {
		width: 150px;
		font-size: 13px;
		padding: 20px 10px 10px;
		height: 50px;
		border-radius: 18px;
	}
	#index .solution .task-before li:nth-child(3) {left: calc(50% - 85px);}
	#index .solution .task-before li:nth-child(6) {right: calc(50% - 85px);}

	#index .solution .task-before:after {
		width: 150px;
		height: 100px;
		background-size: 140px;
		bottom: -110px;
	}
	#index .solution .task-before li:nth-child(1):before,
	#index .solution .task-before li:nth-child(4):before {
		top: 57px;
	}
	#index .solution .task-before li:nth-child(2):before,
	#index .solution .task-before li:nth-child(5):before {
		top: 53px;
	}
	#index .solution .task-before li:nth-child(6):before {
		top: 53px;
	}
	#index .solution .task-after-bg {
		max-width: 560px;
	}
	#index .solution .task-after-bg:before {
		background: url(/img/pre/index/bg_dot_l.png) left -700px bottom 400px no-repeat;
        background-size: 1300px;
		margin-left: -370px;
	}
	#index .solution .task-after-bg:after {
        background: url(/img/pre/index/bg_dot_r.png) right -760px bottom 470px no-repeat;
        background-size: 1170px;
	}
}

/*** 解決 ***/
#index .solution .task-details {
	background-color: #fff;
	padding-top: 140px;
}
#index .solution .task-details-inner {
	max-width: 940px;
	margin: 0 auto 100px;
	padding: 0 60px;
}
#index .solution .task-details li {
	display: grid;
	align-items: center;
	grid-template-areas:
		"number image"
		"task-details-text image"
		;
	gap: 0 3%;
	justify-content: space-between;
}
#index .solution .task-details .list > li {
	margin-top: 160px;
}
#index .solution .task-details li:nth-child(2) {
	grid-template-areas:
		"image number"
		"image task-details-text"
		;
}
#index .solution .task-details .number {
	grid-area: number;
	padding:6px 8px 6px 10px;
	background-color: var(--color_orange);
	color: #fff;
	font-size: 20px;
	display: flex;
	max-width: 120px;
	align-items: center;
	font-weight: normal;
	justify-content:  center;
}
#index .solution .task-details .number .first {
	font-size: 20px;
}
#index .solution .task-details .number .second {
	font-size: 33px;
	font-family: var(--ff_roboto);
	padding: 0 0.1em;
}
#index .solution .task-details h3 {
	font-size: 46px;
	line-height: var(--lh_m);
	margin-top: 20px;
}
#index .solution .task-details h3 span {
	color: var(--color_green);
}
#index .solution .task-details p {
	line-height: var(--lh_m);
	margin-top: 20px;
}
#index .solution .task-details figure {
	grid-area: image;
	max-width: 400px;
}
#index .solution .task-details figure img {
	border-radius: 20px;
}
#index .solution .task-details .task-details-text {
	grid-area: task-details-text;
}
#index .solution .task-details .task-details-text ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 400px;
	margin-top: 20px;
}
#index .solution .task-details .task-details-text li {
	border: 1px solid var(--color_green);
	border-radius: 10px;
	color: var(--color_green);
	font-size: 16px;
	text-align: center;
	display: block;
	width: calc(100%/4);
	padding: 6px 0 16px;
	line-height: 1;
}
#index .solution .task-details .task-details-text li img {
	width: 60px;
	display: block;
	margin: 0 auto;
}
#index .solution .task-details .sec-btn {
	text-align: center;
	margin: 0 auto;
	margin-top: 80px;
}

/* tab/m */
@media screen and (max-width: 940px) {
	#index .solution .balloon {
		font-size: 16px;
		letter-spacing: normal;
		max-width: 180px;
		line-height: 1;
	}
	#index .solution .balloon:before {
		left: calc(50% - 8px);
		top: 25px;
		border-right: 16px solid var(--color_green);
		border-top: 15px solid transparent;
		border-bottom: 15px solid transparent;
	}
	#index .solution .after-text {
		font-size: 46px;
		max-width: 600px;
		margin-top: 30px;
	}
	#index .solution .after-text p .small {
		font-size: 31px;
	}
	#index .solution .after-text img {
		width: 220px;
	}
	#index .solution .after-text p {
		margin-left: 0;
	}
	#index .solution .after-text p .more {
		font-size: 70px;
		right: -10px;
        top: -8px;
	}
	#index .solution .after-text p .clear {
		font-size: 55px;
	}
	#index .solution .after-image .jump img {
		width: 260px;
	}
	#index .solution .after-image .paper img {
		width: 460px;
	}
	#index .solution .task-after:before,
	#index .solution .task-after:after {
		height: 80px;
	}
	#index .solution .after-image figure {
		padding: 0;
	}
	#index .solution .after-image .paper {
		top: -140px;
	}
	#index .solution .task-details-inner {
		padding: 0 20px;
		width: auto;
		max-width: 760px;
	}
	#index .solution .task-details li {
		align-items: flex-start;
	}
	#index .solution .task-details .list > li {
		margin-top: 80px;
	}
	#index .solution .task-details h3 {
		font-size: 36px;
	}
	#index .solution .task-details li:nth-child(2) {
		grid-template-areas:
		"number image"
		"task-details-text image";
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .solution .after-text {
		max-width: 320px;
		flex-wrap: wrap;
		justify-content: center;
		margin: 40px auto;
	}
	#index .solution .after-text img {
		width: 200px;
	}
	#index .solution .after-text p {
		font-size: 36px;
		margin: 10px 0 0 0;
	}
	#index .solution .after-text p .clear {
		font-size: 36px;
		position: relative;
	}
	#index .solution .after-text p .more {
		font-size: 50px;
		right: -45px;
		top: 0;
	}
	#index .solution .after-text p .small {
		font-size: 26px;
	}
	#index .solution .after-image .paper img {
		max-width: 460px;
		width: 100%;
	}
	#index .solution .after-image .jump img {
		width: 220px;
	}
	#index .solution .task-details {
		padding: 60px 20px;
	}
	#index .solution .task-details-inner {
		margin-bottom:0;
	}
	#index .solution .task-details li,
	#index .solution .task-details li:nth-child(2) {
		display: grid;
		grid-template-areas:
			"number"
			"image"
			"task-details-text"
			;
		grid-template-columns: 1fr;
		gap: 0 3%;
	}
	#index .solution .task-details .list > li {
		margin-top: 80px;
		text-align: center;
	}
	#index .solution .task-details .number {
		font-size: 16px;
		max-width: 100px;
		margin: 0 auto;
	}
	#index .solution .task-details .number .second {
		font-size: 21px;
		padding: 0;
	}
	#index .solution .task-details figure {
		margin: 20px auto;
	}
	#index .solution .task-details figure img {
		width: 220px;
	}
	#index .solution .task-details h3 {
		font-size: 28px;
		margin: 0;
	}
	#index .solution .task-details p {
		margin-top: 10px;
	}
	#index .solution .task-details .task-details-text ul {
		margin: 20px auto;
		justify-content: center;
	}
	#index .solution .task-details .task-details-text li {
		font-size: 14px;
		padding: 6px 4px 16px;
	}
	#index .solution .task-details .sec-btn {
		margin-top: 60px;
	}
}


/* CTAエリア
-------------------------------------------------------------------------------------- */
#index .cta-area {
	background-color: var(--color_green_light);
	position: relative;
	padding-bottom: 60px;
}
#index .cta-area:before {
	content: "";
	background: url(/img/contents/top/new/bg_dot.png) 0 0 no-repeat;
	position: absolute;
	padding: 140px;
    background-size: 100%;
}
#index .cta-area:after {
	content: "";
	background: url(/img/contents/top/new/bg_dot.png) 0 0 no-repeat;
	position: absolute;
	bottom: 0;
	right: 0;
	transform: rotate(180deg);
	padding: 140px;
    background-size: 100%;
}
#index .cta-area p {
	font-size: 38px;
	padding-top: 80px;
	text-align: center;
	line-height: var(--lh_m);
	position: relative;
}
#index .cta-area .cta {
	max-width: 1200px;
	justify-content: center;
	gap: 3%;
	margin: 60px auto 0;
	display: flex;
	padding: 0 40px;
}
#index .cta-area a {
	flex: 1;
	z-index: 1;
	max-width: 500px;
}
#index .cta-area .pri-cv-btn {
	padding: 28px 0px 18px 0px;
}
#index .cta-area .pri-cv-btn .first {
	font-size: 34px;
	display: block;
	padding: 0 24px 0 0;
}
#index .cta-area .pri-cv-btn .time {
	font-size: 44px;
}
#index .cta-area .pri-cv-btn .second {
	font-size: 22px;
	padding: 0 1em 0 0;
	margin: 10px 0 0 0;
}
#index .cta-area .pri-btn {
	border-radius: 20px;
	font-size: 26px;
	font-weight: normal;
}

/* tab/m */
@media screen and (max-width: 940px) {
	#index .cta-area:before {
		padding: 100px;
	}
	#index .cta-area p {
		font-size: 22px;
		padding-top: 40px;
	}
	#index .cta-area .rwd-sec {
		display: block;
	}
	#index .cta-area .pri-cv-btn {
		padding: 22px 0px 10px 0px;
	}
	#index .cta-area .pri-cv-btn .first {
		font-size: 23px;
	}
	#index .cta-area .pri-cv-btn .time {
		font-size: 37px;
	}
	#index .cta-area .pri-cv-btn .second {
		font-size: 18px;
		margin: 6px 0 0 0;
	}
	#index .cta-area .pri-btn {
		font-size: 18px;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .cta-area .cta {
		display: block;
		margin: 30px auto 0;
	}
	#index .cta-area .cta a {
		max-width: initial;
		width: 100%;
		position: relative;
		padding: 20px 0 14px 0;
	}
	#index .cta-area .cta a:nth-child(2) {
		margin-top: 20px;
		padding: 14px 0;
	}
	#index .cta-area .pri-cv-btn .time {
		font-size: 29px;
	}
	#index .cta-area .pri-cv-btn .first {
		font-size: 18px;
	}
	#index .cta-area .pri-cv-btn .second {
		font-size: 14px;
	}
}


/* 仕組み
-------------------------------------------------------------------------------------- */
#index .structure {
	width: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 0 0 20px;
}
#index .structure .h-wrap {
	width: 100%;
	max-width: 1040px;
	margin: 120px 40px;
}
#index .structure h2 {
	font-size: 46px;	
}
#index .structure h2 .rwd {
	display: none;
}
#index .structure > ul > li {
	display: flex;
	justify-content: flex-start;
	gap: 6%;
	margin-top: 120px;
	margin-left: -100px;
}
#index .structure > ul > li:nth-child(2) {
	flex-direction: row-reverse;
	margin-left: 0;
	margin-right: -100px;
}
#index .structure .str-img {
	max-width: 640px;
	position: relative;
}
#index .structure .str-img img {
	border-radius: 60px;
}
#index .structure .str-img .bg-text {
	top: -20px;
	right: 0;
	font-size: 120px;
	font-family: var(--ff_roboto);
	position: absolute;
	font-weight: bold;
	-webkit-text-stroke: 4px #fff;
	text-align: center;
	color: transparent;
	line-height: 1;
}
#index .structure li:nth-child(2) .str-img .bg-text {
	right: inherit;
	left: 0;
}
#index .structure .str-text {
	padding: 0 20px;
}
#index .structure li h3 {
	font-size: 38px;
	margin: 0 0 40px;
}
#index .structure li h3 span {
	color: var(--color_green );
}
#index .structure li p {
	line-height: 1.7;
}
#index .structure .detail {
	display: flex;
	width: 100%;
	gap: 26px;
	margin-top: 60px;
}
#index .structure .detail ul {
	display: flex;
	justify-content: center;
}
#index .structure .detail li {
	border-radius: 50%;
	background-color: #fff;
	filter: drop-shadow( 0 0 10px #ddd);
	width: 236px;
	height: 236px;
	display: block;
	text-align: center;
	font-size: 20px;
	line-height: 1.5;
	flex: 1;
	align-items: center;
}
#index .structure .detail li img {
	height: 70px;
	display: block;
	margin: 50px auto 16px;
}
/* pcのみ */
@media screen and (min-width: 941px) {
	#index .structure li:nth-child(2) .str-text {
		padding: 0 0 0 40px;
	}
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .structure {
		padding: 0 40px;
		width: auto;
	}
	#index .structure h2 {
		font-size: 36px;
	}
	#index .structure .h-wrap {
		margin: 40px auto 0;
		font-size: 28px;
		padding-left: 20px;
	}
	#index .structure > ul > li {
		display: block;
		margin-top:40px;
		margin-left: 0;
	}
	#index .structure > ul > li:nth-child(2) {
		margin-right: 0;
	}
	#index .structure .str-img {
		max-width: fit-content;
		height: 200px;
		overflow: hidden;
		border-radius: 40px;
	}
	#index .structure .str-img img {
		border-radius: inherit;
		width: 800px;
        margin: -100px 0 0 0;
	}
	#index .structure li:nth-child(1) .str-img img {
		margin: -50px 0 0 -160px;
		width: 130%;
	}
	#index .structure li:nth-child(2) .str-img img {
		margin: -30px 0 0 0;
		width: 110%;
	}
	#index .structure li:nth-child(3) .str-img img {
		margin: -50px 0 0 -40px;
		width: 110%;
	}
	#index .structure .str-img .bg-text {
		font-size: 120px;
	}
	#index .structure li h3 {
		font-size: 30px;
		margin: 20px 0 14px;
	}
	#index .structure .detail {
		max-width: fit-content;
		gap: 4%;
		margin: 25px auto 0;
		padding: 20px 0 50px;
	}
	#index .structure .detail li {
		font-size: 16px;
		width: 200px;
		height: 190px;
	}
	#index .structure .detail li img {
		height: 55px;
		margin: 40px auto 8px;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .structure .h-wrap {
		padding-left: 0;
	}
	#index .structure h2 {
		font-size: 28px;
	}
	#index .structure h2 .rwd {
		display: block;
	}
	#index .structure > ul > li {
		display: block;
		margin-top:40px;
		margin-left: 0;
	}
	#index .structure > ul > li:nth-child(2) {
		margin-right: 0;
	}
	#index .structure .str-img {
		margin-left: -15%;
		max-width: fit-content;
		border-radius: 0 40px 40px 0;
		height: 140px;
	}
	#index .structure li:nth-child(2) .str-img {
		margin-right: -15%;
        margin-left: auto;
		border-radius: 40px 0 0 40px;
	}
	#index .structure li:nth-child(1) .str-img img {
		margin: -20px 0 0 -80px;
		width: 130%;
		max-width: 600px;
	}
	#index .structure li:nth-child(2) .str-img img {
	}
	#index .structure li:nth-child(3) .str-img img {
		margin: -30px 0 0 -40px;
		width: 130%;
		max-width: 600px;
	}
	#index .structure .str-img .bg-text {
		font-size: 56px;
		-webkit-text-stroke: 3px #fff;
		top: -10px;
	}
	#index .structure li h3 {
		font-size: 22px;
		margin: 20px 0 14px;
	}
	#index .structure .detail {
		max-width: fit-content;
		gap: 4%;
	}
	#index .structure .detail li {
		font-size: 14px;
		width: 146px;
		height: 146px;
	}
	#index .structure .detail li img {
		height: 45px;
		margin: 24px auto 8px;
	}
	#index .structure .str-text {
		padding: 0;
	}
}

/*** そのほか ***/
#index .structure-sec {
	background: linear-gradient(0deg, rgba(235, 249, 240, 0.6) 60%, rgba(255, 255, 255, 0.6)) ;
	background-size: 5200px;
	position: relative;
	padding: 60px 20px;
}
#index .structure-sec-bg {
	max-width: 1700px;
	margin: 0 auto;
	position: relative;
}
#index .structure-sec-bg:before {
	content: "";
	position: absolute;
	background: url(/img/pre/index/bg_dot_l.png) left -1200px bottom 144px no-repeat;
	background-size: 1800px;
	width: 1000px;
	height: 1000px;
	margin-left: -260px;
	z-index: -1;
}
#index .structure-sec-bg:after {
	content: "";
	position: absolute;
	background: url(/img/pre/index/bg_dot_r.png) right -1120px bottom 250px no-repeat;
	background-size: 1700px;
	width: 1000px;
	height: 1000px;
	margin-right: -200px;
	top: 0;
	right: 0;
	z-index: -1;
}
#index .structure-sec h3 {
	font-size: 26px;
	letter-spacing: 4px;
	color: var(--color_green);
	text-align: center;
	padding: 10px;
	border: 1px solid var(--color_green);
	border-radius: 100px;
	max-width: 700px;
	margin: 100px auto;
	position: relative;
	background-color: #fff;
}
#index .structure-sec h3:before,
#index .structure-sec h3:after {
	content: '';
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: -20px;
	border-top: 20px solid var(--color_green);
	border-right: 20px solid transparent;
	border-left: 20px solid transparent;
}
#index .structure-sec h3:after {
	bottom: calc( 1px - 20px );
	border-top: solid 20px #fff;
}
#index .structure-sec h3 br {
	display: none;
}
#index .structure-sec ul {
	display: flex;
	gap: 100px;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
	font-size: 15px;
}
#index .structure-sec ul li {
	flex: 1;
	font-size: 15px;
}
#index .structure-sec ul img {
	height: 60px;
}
#index .structure-sec ul h4 {
	font-size: 20px;
	margin: 30px 0 20px;
}
#index .structure-sec .banner-link {
	display: flex;
	max-width: 1000px;
	height: 200px;
	margin: 60px auto;
	filter: drop-shadow(0 0 4px #d5e5da);
	transform: translateZ(0); /*for safari*/
	transition: opacity 0.2s;
	border-radius: 20px;
	align-items: center;
	background-color: #fff;
}
#index .structure-sec .banner-link:hover, #index .structure-sec .banner-link:focus-visible {
	opacity: 0.8;
}
#index .structure-sec .banner-link:focus-visible {
	outline: solid;
	outline-color: #333333;
	outline-width: 2px;
	border-radius: 2px;	
}
#index .structure-sec .banner-link p {
	border-radius: 20px 0 0 20px;
	width: 100%;
	padding: 0 4%;
	color: var(--color_default);
	font-size: 20px;
	line-height: var(--lh_l);
	flex: 1.25;
}
#index .structure-sec .banner-link .linkmark {
	display: block;
	text-align: right;
	color: var(--color_green);
	font-size: 16px;
	margin-top: 20px;
}
#index .structure-sec .banner-link:hover .linkmark {
	text-decoration: underline;
}
#index .structure-sec .banner-link .linkmark:after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-style: solid;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg);
	vertical-align: 2px;
	margin-left: 9px;
}
#index .structure-sec .banner-link figure {
	flex: 1;
}
#index .structure-sec .banner-link img {
	max-width: 420px;
	margin: 100px 0 0 0;
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .structure-sec {
		padding: 10px 20px 10px;
	}
	#index .structure-sec h3 {
		letter-spacing: initial;
		margin-top: 0;
	}
	#index .structure-sec ul {
		gap: 4%;
		max-width: 660px;
	}
	#index .structure-sec .banner-link {
		max-width: 700px;
	}
	#index .structure-sec .banner-link p {
		flex: 1;
		font-size: inherit;
	}
	#index .structure-sec .banner-link .linkmark {
		margin-top: 10px;
	}
	#index .structure-sec .banner-link figure {
		overflow: hidden;
		max-width: 360px;
	}	
	#index .structure-sec .banner-link img {
		width: 110%;
		margin: 40px 0 0 -20px;
	}	
}
/* m */
@media screen and (max-width: 640px) {
	#index .structure-sec-bg:before {
		background: url(/img/pre/index/bg_dot_l.png) left -1170px bottom 200px no-repeat;
		background-size: 1700px;
	}
	#index .structure-sec-bg:after {
		background: url(/img/pre/index/bg_dot_r.png) right -1230px bottom 470px no-repeat;
		background-size: 1600px;
		margin-right: -200px;
	}	
	#index .structure-sec h3 {
		font-size: 20px;
		letter-spacing: 0;
		border-radius: 30px;
		margin: 0 auto;
		max-width: 460px;
	}
	#index .structure-sec h3 br {
		display: block;
	}
	#index .structure-sec ul {
		flex-wrap: wrap;
		gap: inherit;
		max-width: 600px;
		margin-top: 20px;
		justify-content: space-around;
	}
	#index .structure-sec ul h4 {
		font-size: 16px;
		margin: 10px 0;
	}
	#index .structure-sec ul li {
		flex: inherit;
		width: calc(50% - 20px);
		font-size: 13px;
		margin-top: 40px;
	}
	#index .structure-sec .banner-link {
		flex-direction: column-reverse;
		max-width: 400px;
		height: auto;
	}
	#index .structure-sec .banner-link p {
		width: auto;
		padding: 20px 30px 26px;
	}
	#index .structure-sec .banner-link .linkmark {
		font-size: 14px;
	}
	#index .structure-sec .banner-link figure {
		height: 160px;
		max-width: initial;
		flex: auto;
		
	}
	#index .structure-sec .banner-link img {
		margin: -54px 0 0 0;
		width: auto;
	}
}

/* 最も選ばれている決済サービス
-------------------------------------------------------------------------------------- */
#index .company {
	max-width: 1200px;
	margin: 0 auto 60px;
	text-align: center;
	padding: 0 20px;
}
#index .company h2 {
	padding: 140px 0 80px;
	font-size: 46px;
}
#index .company .number {
	font-size: 38px;
	position: relative;
	max-width: 700px;
	margin: 0 auto;
}
#index .company .number:before {
	content: "";
	position: absolute;
	background: url(/img/pre/index/leef.svg) 0 0 no-repeat;
	background-size: 64px;
	padding: 66px 36px;
	left: 0;
}
#index .company .number:after {
	content: "";
	position: absolute;
	background: url(/img/pre/index/leef.svg) 0 0 no-repeat;
	background-size: 64px;
	padding: 66px 36px;
	transform: scaleX(-1);
	right: 0;
}
#index .company .number .n02 {
	font-size: 112px;
	font-family: var(--ff_roboto);
	color: var(--color_green);
	display: inline-block;
	vertical-align: sub;
}
#index .company .number .n04 {
	font-size: 26px;
}
#index .company > p {
	line-height: 1.7;
	margin: 60px 0;
}
#index .company img {
	max-width: 1000px;
}
#index .company .cart {
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
	max-width: 900px;
	display: flex;
	justify-content: space-around;
	margin: 40px auto;
	align-items: center;
}
#index .company .cart img {
	max-width: 700px;
}
#index .company .top-instance ul {
	display: flex;
	justify-content: space-between;
	max-width: 1000px;
	gap: 20px;
	margin: 0 auto;
}
#index .company .top-instance ul li {
	flex:1;
}
#index .company .top-instance ul a {
	display: block;
	color: var(--color_default);
	padding:15px;
	transition: opacity 0.2s;
	margin: 20px;
}
#index .company .top-instance ul a:hover, #index .company .top-instance ul a:focus-visible {
	opacity: 0.8;
}
#index .company .top-instance ul a span {
	font-size: 14px;
	color: #aaa;
	display: block;
	margin: -5px 0 20px;
}
#index .company .top-instance .logo {
	height: 74px;
}
#index .company .top-instance .logo img {
	max-width: 160px;
	padding: 20px 0 0;
}
#index .company .top-instance li:nth-child(2) .logo img {
	padding: 12px 0 0;
}
#index .company .top-instance ul p {
	line-height: 1.7;
	margin-top: 10px;
	padding: 0 10px;
}
#index .company .top-instance ul p:after {
	content: "";
    background: url(/img/pre/index/icon_link.svg) right 0 no-repeat;
    padding: 0 0 0 25px;
    vertical-align: sub;
}
#index .company .top-instance ul a:hover p , #index .company .top-instance ul a:focus-visible p {
	text-decoration: underline;
}
#index .company .top-instance ul a:focus-visible {
	outline: solid;
	outline-color: #333333;
	outline-width: 2px;
	border-radius: 2px;	
}
#index .company .top-instance .sec-btn {
	text-align: center;
	margin: 0 auto;
	margin-top: 60px;
}

/* tab/m */
@media screen and (max-width: 940px) {
	#index .company h2 {
		font-size: 28px;
		padding: 60px 0;
	}
	#index .company .number {
		font-size: 18px;
		max-width: 360px;
	}
	#index .company .number .n02 {
		font-size: 61px;
	}
	#index .company .number .n03,
	#index .company .number .n04 {
		font-size: 16px;
	}
	#index .company .number:before,
	#index .company .number:after {
		background-size: 40px;
	}
	#index .company > p {
		max-width: 340px;
		text-align: left;
		margin: 50px auto 30px;
	}
	#index .company .cart {
		display: block;
	}
	#index .company .cart p {
		margin-bottom: 10px;
		font-size: 13px;
	}
	#index .company .top-instance ul a {
		margin: 0;
	}
}

/* m */
@media screen and (max-width: 640px) {
	#index .company .top-instance ul {
		display: block;
	}
	#index .company .top-instance ul a {
		display: grid;
		align-items: flex-start;
		grid-template-areas:
			"image logo"
			"image category"
			"image text"
			;
		gap: 0 20px;
		justify-content: space-between;
		max-width: 540px;
		margin: 0 auto;
		text-align: left;
		grid-template-rows: auto auto 1fr;
	}
	#index .company .top-instance .image {
		grid-area: image;
	}
	#index .company .top-instance .logo {
		grid-area: logo;
		height: inherit;
		margin: 20px 0 0;
	}
	#index .company .top-instance .logo img {
		padding: 0;
	}
	#index .company .top-instance ul a span {
		grid-area: category;
		margin: 20px 0 0;
	}
	#index .company .top-instance ul p {
		grid-area: text;
		margin:20px 0 0;
		padding: 0 20px 0 0;
	}
}

/* 便利な決済
-------------------------------------------------------------------------------------- */
#index .handy {
	background-color: var(--color_green_light);
	width: 100%;
	margin:100px 0 0;
	height: 632px;
}
#index .handy-inner {
	display: flex;
	max-width: 1400px;
	margin: auto;
}
#index .handy figure {
	position: absolute;
	left: 76%;
	margin-left: -100px;
	width: 900px;
	overflow: hidden;
	height: 632px;
}
#index .handy figure img {
	width: 1000px;
	margin-left: -170px;
}
#index .handy .handy-text {
	margin: 100px 35% 57px 12%;
}
#index .handy .handy-text h2 {
	font-size: 46px;
}
#index .handy .handy-text li {
	display: flex;
	flex-wrap: wrap;
	margin-top: 50px;
}
#index .handy .handy-text li h3 {
	font-size: 30px;
	min-width: 260px;
	background: url(/img/pre/index/icon_handy01.svg) 0 7px no-repeat;
	background-size: 40px;
	padding-left: 60px;
	flex: 1;
}
#index .handy .handy-text li:nth-child(2) h3 {
	background-image: url(/img/pre/index/icon_handy02.svg) ;
}
#index .handy .handy-text li:nth-child(3) h3 {
	background-image: url(/img/pre/index/icon_handy03.svg) ;
}
#index .handy .handy-text p {
	line-height: 1.7;
	flex: 1;
}
/* pc1200 */
@media  (min-width: 941px) and (max-width: 1300px) {
	#index .handy .handy-text {
		margin: 70px 40% 57px 8%;
	}
	#index .handy .handy-text h2 {
		font-size: 40px;
	}
	#index .handy .handy-text p {
		max-width: fit-content;
		margin-top: 10px;
	}
	#index .handy .handy-text li {
		margin-top: 36px;
		display: block;
	}
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .handy {
		height: auto;
		width: auto;
		padding: 60px 20px;
	}
	#index .handy-inner {
		display: block;
		position: relative;
	}
	#index .handy figure {
		position: absolute;
		left: 0;
		right: 0;
		top: 80px;
		margin:0 auto;
		width: 100%;
		border-radius: 40px;
		max-width: 660px;
		height: 200px;
	}
	#index .handy figure img {
		border-radius: 20px;
		width: 800px;
		margin: -100px 0 0 0;
	}
	#index .handy .handy-text h2 {
		font-size: 28px;
		text-align: center;
	}
	#index .handy .handy-text {
		margin: 0;
	}
	#index .handy .handy-text ul {
		max-width: 600px;
		margin: 280px auto 0;
	}
	#index .handy .handy-text li {
		margin-top: 40px;
		display: block;
	}
	#index .handy .handy-text li h3 {
		font-size: 20px;
		background-size: 30px;
		background-position: 0px 4px;
		padding-left:40px;
	}
	#index .handy .handy-text p {
		max-width: 100%;
		line-height: var(--lh_l);
		margin-top: 10px;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .handy .handy-text ul {
		margin: 240px auto 0;
	}
	#index .handy figure {
		top: 130px;
		height: 160px;
	}
	#index .handy figure img {
		width: -webkit-fill-available;
		min-width: 280px;
		margin: -26px 0 0 0px;
		object-fit: cover;
	}
}


/* よくあるご質問
-------------------------------------------------------------------------------------- */
#index .faq {
	max-width: 1000px;
	margin: 0 auto;
	padding: 100px 20px 0;
}
#index .faq h2 {
	text-align: center;
	font-size: 38px;
}
#index .faq dl {
	border-bottom: 1px solid #ccc;
	padding: 20px 0;
}
#index .faq dt {
	border-top: 1px solid #ccc;
	padding: 30px 0 20px 40px;
	margin: 30px 0 0 0;
	font-size: 24px;
	color: var(--color_green);
	line-height: 1;
	position: relative;
}
#index .faq dt:before {
	content: "Q.";
	font-size: 35px;
	padding: 0 10px 0 0;
	font-family: var(--ff_roboto);
	font-weight: normal;
	position: absolute;
	top: 22px;
	left: 0;
}
#index .faq dd {
	margin: 0 0 0 3em;
}
#index .faq dd a {
	color: var(--color_green);
}
#index .faq dd a.allowlink {
	text-decoration: none;
}
#index .faq dd a.allowlink:after {
	content: "";
	display: inline-block;
	width: 0.45em;
	height: 0.45em;
	border-style: solid;
	border-width: 2px 2px 0 0;
	transform: rotate(45deg) translateY(-2px);
	margin-left: 9px;
}
#index .faq dd a.allowlink:hover, #index .faq dd a.allowlink:focus-visible {
	text-decoration: underline;
}
#index .faq dd a.allowlink:focus-visible {
	outline: solid;
	outline-color: #333333;
	outline-width: 2px;
}
#index .faq .base-btn {
	text-align: center;
	margin: 60px auto 0;
}

/* tab/m */
@media screen and (max-width: 940px) {
	#index .faq {
		margin-top: 60px;
		padding: 0 20px;
		width: auto;
	}
	#index .faq h2 {
		font-size: 22px;
	}
	#index .faq dt {
		font-size: 18px;
	}
	#index .faq dt:before {
		font-size: 32px;
	}
	#index .faq dd {
		margin: 0;
	}
}


/* セミナー
-------------------------------------------------------------------------------------- */
#index .seminar {
	background-color: var(--color_default_exlight);
	padding: 120px 20px 100px;
	margin: 120px 0 0;
}
#index .seminar-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
#index .seminar h2 {
	text-align: center;
	font-size: 38px;
	margin-bottom: 60px;
}
#index .seminar .small-list-wrap {
	display: flex;
	gap: 20px;
}
#index .seminar .small-list-wrap .small-list {
	flex-basis: calc(33.33%);
}
#index .seminar .small-list a {
	transition: opacity 0.2s;
}
#index .seminar .small-list a:hover, #index .seminar .small-list a:focus-visible {
	opacity: 0.8;
	text-decoration: underline;
	color: var(--color_default);
}
#index .seminar .small-list a:focus-visible {
 	outline: solid;
	outline-offset: 2px;
	outline-color: #333333;
	outline-width: 2px;
}
#index .seminar .small-list h3 {
	font-size: 16px;
	color: var(--color_default);
	line-height: 2;
	padding: 16px 0;
}
#index .seminar .small-list img {
	border-radius: 10px;
}
#index .seminar .base-btn {
	text-align: center;
	margin: 60px auto 0;
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .seminar {
		padding: 60px 20px;
		margin: 60px 0 0;
	}
	#index .seminar h2 {
		font-size: 22px;
	}
	#index .seminar .small-list-wrap {
		display: block;
		max-width: 600px;
		margin: 0 auto;
	}
	#index .seminar .small-list a {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		margin-top: 30px;
	}
	#index .seminar .small-list a figure {
		flex: 1;
	}
	#index .seminar .small-list h3 {
		flex: 1;
		padding: 0;
		font-size: 18px;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .seminar .small-list h3 {
		font-size: 15px;
	}
}


/* セミナー＞バナー表示アイコン
-------------------------------------------------------------------------------------- */
/* バナー表示共通 */
[id^='contents-seminar'] [class*='display-'] figure {position: relative;}
[id^='contents-seminar'] [class*='display-'] figure::before,
[id^='contents-seminar'] [class*='display-'] figure::after,
[id^='contents-seminar'] .display-archived figure::before {
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	z-index: 1;
}
[id^='contents-seminar'] [class*='display-'] figure::after {
	color: #ffffff;
	text-align: center;
	line-height: 1;
	font-size: 14px;
	font-weight: 100;
	background: url(/img/contents/seminar/banner_bg_orange.svg) top right / cover no-repeat;
}
/* 受付中表示 */
[id^='contents-seminar'] .display-accepting figure::after {
	content: '参加受付中';
	padding: 11px 25px 11px 15px;
}
/* アーカイブ表示 */
[id^='contents-seminar'] .display-archived figure::after { content: ''; }
[id^='contents-seminar'] .display-archived figure::after { padding: 11px 14px 10px 10px; }
[id^='contents-seminar'] .display-archived figure::before {
	content: '';
	width: 21px;
	height: 15px;
	background: url('/img/contents/seminar/icon_movie.svg') center center / contain no-repeat;
	margin: 8px 10px;
	z-index: 2;
}
#contents-seminar .display-archived figure::after {
	width: 25px;
	height: 10px;
}
/* 終了表示 */
[id^='contents-seminar'] .display-closed figure::before {
	content: '';
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.25);
}
[id^='contents-seminar'] .display-closed figure::after {
	content: '終了';
	padding: 9px 16px 9px 10px;
	background: url(/img/contents/seminar/no_held_bgicon.png) top right / cover no-repeat;
}


/* お役立ち記事
-------------------------------------------------------------------------------------- */
#index .useful {
	padding: 120px 20px 100px;
}
#index .useful-inner {
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
#index .useful h2 {
	text-align: center;
	font-size: 38px;
	margin-bottom: 60px;
}
#index .useful .list {
	display: flex;
	gap: 20px;
}
#index .useful .list a {
	transition: opacity 0.2s;
}
#index .useful .list a:hover, #index .useful .list a:focus-visible {
	opacity: 0.8;
	text-decoration: underline;
	color: var(--color_default);
}
#index .useful .list a:focus-visible {
 	outline: solid;
	outline-offset: 2px;
	outline-color: #333333;
	outline-width: 2px;
}
#index .useful .list h3 {
	font-size: 16px;
	list-style: 2;
	color: var(--color_default);
}
#index .useful .base-btn {
	text-align: center;
	margin: 60px auto 0;
}
#index .useful img {
	border-radius: 20px;
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .useful {
		padding: 60px 20px;
	}
	#index .useful h2 {
		font-size: 22px;
	}
	#index .useful .list {
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#index .useful .list a {
		max-width: calc(50% - 10px);
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .useful .list h3 {
		font-size: 14px;
	}
}
/*** お役立ち資料 ***/
#index .link-banner {
	max-width: 900px;
	height: 156px;
	border: 2px solid #03AF7A;
	border-radius: 10px;
	display: flex;
	-webkit-box-align: center;
	align-items: center;
	color: #03AF7A;
	background: #fff;
	text-decoration: none;
	margin: 0 auto;
	transition: opacity 0.2s;
}
#index .link-banner:hover , #index .link-banner:focus-visible {
	background: #ebf9f0;
	opacity: 0.8;
}
#index .link-banner:focus-visible {
	outline: solid;
	outline-color: #333333;
	outline-width: 2px;
	border-radius: 2px;	
}
#index .link-banner .eye-catch {
	max-width: 350px;
	width: 100%;
	flex:1;
}
#index .link-banner .eye-catch img {
	object-fit: cover;
	vertical-align: top;
}
#index .link-banner .text-area {
	padding: 0 70px 2px 30px;
	font-size: 26px;
	line-height: 1.7;
	position: relative;
	flex:1;
}
#index .link-banner .text-area::after {
	content: "";
	position: absolute;
	top: 1px;
	bottom: 0;
	margin: auto;
	vertical-align: middle;
	right: 23px;
	width: 9px;
	height: 9px;
	border-top: 2px solid #03AF7A;
	border-right: 2px solid #03AF7A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#index .link-banner .text-area span {font-size: 22px;}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .link-banner {
		margin: 0 20px;
	}
	#index .link-banner .eye-catch {
		overflow-x: hidden;
		width: auto;
	}
	#index .link-banner .eye-catch img {
		width: 114%;
	}
	#index .link-banner .text-area {
		flex: 2;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .link-banner {
		height: 86px;
	}
	#index .link-banner .text-area,
	#index .link-banner .text-area span {
		font-size: 16px;
	}
	#index .link-banner .text-area {
		font-size: 14px;
		padding: 4px 40px 2px 10px;
	}
	#index .link-banner .eye-catch {
		max-width: 80px;
	}
}


/* ニュース
-------------------------------------------------------------------------------------- */
#index .news {
	padding: 60px 20px 60px;
	margin: 120px 0 0;
	background-color: var(--color_default_exlight);
}
#index .news-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
#index .news h2 {
	font-size: 38px;
	color: var(--color_green);
}
#index .news .date a {
	display: flex;
	align-items: flex-start;
	position: relative;
	margin-top: 20px;
	color: var(--color_default);
}
#index .news .date a:hover, #index .news .date a:focus-visible {
	text-decoration: underline;
}
#index .news .date a:hover span, #index .news .date a:focus-visible span {
	text-decoration: underline;
	display: block;
}
#index .news .date a:focus-visible {
	outline: solid;
	outline-offset: 2px;
	outline-color: #333333;
	outline-width: 2px;
}
#index .news .date a .entry-date {
	min-width: 120px;
	display: block;
	line-height: 1.7;
	position: relative;
}
#index .news .date a .entry-date:after {
	content: "";
	position: absolute;
	top: 11px;
	right: 0;
	width: 9px;
	height: 9px;
	border-top: 2px solid #03AF7A;
	border-right: 2px solid #03AF7A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#index .news .date a .list-title {
	position: relative;
	margin-left: 38px;
	line-height: 1.7;
}
#index .news .link-wrap {
	display: block;
	text-align: right;
	position: relative;
	padding-right: 15px;
	margin-top: 20px;
}
#index .news .link-wrap a:hover, #index .news .link-wrap a:focus-visible {
	text-decoration: underline;
	color: var(--color_green);
}
#index .news .link-wrap a:focus-visible{
	outline: solid;
	outline-offset: 2px;
	outline-color: #333333;
	outline-width: 2px;
}
#index .news .link-wrap a {
	color: var(--color_green);
}
#index .news .link-wrap a:after {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;
	width: 9px;
	height: 9px;
	border-top: 2px solid #03AF7A;
	border-right: 2px solid #03AF7A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* tab/m */
@media screen and (max-width: 940px) {
	#index .news {
		padding: 60px 20px ;
		margin: 60px 0 0;
	}
}
/* m */
@media screen and (max-width: 640px) {
	#index .news h2 {
		text-align: center;
		font-size: 22px;
	}
	#index .news .date a {
		display: block;
	}
	#index .news .date a .list-title {
		margin: 0;
		display: inline-block;
	}
	#index .news .date a .entry-date:after {
		display: none;
	}
	#index .news .date a .list-title:after {
		content: "";
		position: absolute;
		top: initial;
		right: initial;
		bottom: 6px;
		width: 9px;
		height: 9px;
		border-top: 2px solid #03AF7A;
		border-right: 2px solid #03AF7A;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

/* ニュース ～2024.8.5（以降削除）----------------------------------------------------- */
#index .news {
	padding: 60px 20px 60px;
	margin: 120px 0 0;
	background-color: var(--color_default_exlight);
}
#index .news-inner {
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}
#index .news h2 {
	font-size: 38px;
	color: var(--color_green);
}
#index .news .list a {
	display: flex;
	align-items: flex-start;
	position: relative;
	margin-top: 20px;
	color: var(--color_default);
}
#index .news .list a:hover {
	text-decoration: underline;
}
#index .news .list a:hover span {
	text-decoration: underline;
	display: block;

}
#index .news .list a .entry-date {
	min-width: 120px;
	display: block;
	line-height: 1.7;
	position: relative;
}
#index .news .list a .entry-date:after {
	content: "";
	position: absolute;
	top: 11px;
	right: 0;
	width: 9px;
	height: 9px;
	border-top: 2px solid #03AF7A;
	border-right: 2px solid #03AF7A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
#index .news .list a .list-title {
	position: relative;
	margin-left: 38px;
	line-height: 1.7;
}
#index .news .link-wrap {
	display: block;
	text-align: right;
	position: relative;
	padding-right: 15px;
	margin-top: 20px;
}
#index .news .link-wrap a:hover {
	text-decoration: underline;
	color: var(--color_green);
}
#index .news .link-wrap a {
	color: var(--color_green);
}
#index .news .link-wrap a:after {
	content: "";
	position: absolute;
	top: 10px;
	right: 0;
	width: 9px;
	height: 9px;
	border-top: 2px solid #03AF7A;
	border-right: 2px solid #03AF7A;
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}
/* tab/m  */
@media screen and (max-width: 940px) {
	#index .news {
		padding: 60px 20px ;
		margin: 60px 0 0;
	}
}
/* m  */
@media screen and (max-width: 640px) {
	#index .news h2 {
		text-align: center;
		font-size: 22px;
	}
	#index .news .list a {
		display: block;
	}
	#index .news .list a .list-title {
		margin: 0;
		display: inline-block;
	}
	#index .news .list a .entry-date:after {
		display: none;
	}
	#index .news .list a .list-title:after {
		content: "";
		position: absolute;
		top: initial;
		right: initial;
		bottom: 6px;
		width: 9px;
		height: 9px;
		border-top: 2px solid #03AF7A;
		border-right: 2px solid #03AF7A;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}
/* /ニュース ～2024.8.5（以降削除）----------------------------------------------------- */