@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

:root {
	--bl: #006699;
	--pbl: #c5e1ec;
	--gy: #f5f5f5;
	--nv: #014263;
	--space-xxl: 130px;
	--space-md: 60px;
	--section-x-sp: 16px;
	--section-pt-only-pc: 60px;
	--section-pt-only-sp: 60px;
	--txt-xl: clamp(24px, 14.000px + 2.667vw, 54px);
	--txt-l: clamp(20px, 12.667px + 1.956vw, 42px);
	--txt-m: clamp(18px, 14.667px + 0.889vw, 28px);
	--txt-ms: clamp(16px, 14.000px + 0.533vw, 20px);
	--txt-s: clamp(14px, 12.667px + 0.356vw, 18px);
}

body {
	transition: all 1s;
	font-feature-settings: "palt";
	letter-spacing: .15em;
	line-height: 1.875
}

#stage {
	font-size: 1.6rem;
}

.txtnv {
	color: var(--color-blue-dark);
}

strong,
b {
	font-weight: 700;
}

h2,
h3,
h4,
h5 {
	font-weight: normal;
}

.l-row {
	display: flex;
	flex-wrap: wrap;
}

.l-row_ai_center {
	align-items: center;
}

.l-row_jc_center {
	justify-content: center
}

.evenly-row {
	display: flex;
	gap: 20px
}

.evenly-row > div {
	flex: 1 1 0%;
}

.evenly-row.reverse {
	flex-direction: row-reverse
}

.column-40 {
	display: flex;
	flex-direction: column;
	gap: 40px
}

.column-80 {
	display: flex;
	flex-direction: column;
	gap: 80px
}

.l-section {
	padding: var(--space-xxl) 0;
}

@media (max-width: 768px) {
	.l-section {
		padding: var(--space-md) var(--section-x-sp);
	}

	.evenly-row {
		flex-direction: column;
	}
}

.l-section--pb0 {
	padding-bottom: 0;
}

.l-section--pt0 {
	padding-top: 0;
}

.l-section--ptOnly {
	padding: var(--section-pt-only-pc) 0 0;
}

@media (max-width: 768px) {
	.l-section--ptOnly {
		padding: var(--section-pt-only-sp) var(--section-x-sp) 0;
	}

	.column-80 {
		gap: 40px
	}
}

.txt-wh {
	color: #fff;
}

/* アニメーション
------------------------------ */

.animate {
	opacity: 0;
}

@keyframes fade-in {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

@keyframes fade-in-top {
	0% {
		opacity: 0;
		transform: translateY(8px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fade-in-bottom {
	0% {
		opacity: 0;
		transform: translateY(-8px);
	}

	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes roll {
	0% {
		transform: rotate(0);
	}

	100% {
		transform: rotate(360deg);
	}
}

.fade-in-top.animated {
	animation: fade-in-top .8s cubic-bezier(0.390, 0.575, 0.565, 1.000) .5s both;
}

.fade-in.animated {
	animation: fade-in .8s cubic-bezier(0.390, 0.575, 0.565, 1.000) .5s both;
}


/* 共通パーツ
------------------------------ */
.l-inner {
	max-width: 1154px;
	width: 100%;
	margin: 0 auto
}

.ttl {
	line-height: 1.54;
	font-weight: 700
}

#pageheader {
	padding-top: 0;
	position: relative;
	margin-bottom: 0;
}

#pageheader .header {
	position: absolute;
	top: 135px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 100%;
	max-width: 1500px;
	padding-left: 50px;
	padding-right: 50px;
	margin: 0;
}

#pageheader .header::after {
	left: 50px;
}

#pageheader .header .ja {
	font-size: 1.8rem;
}

#pageheader .header .en {
	font-size: 6rem;
}

#pageheader .header .en span {
	font-size: 50%
}

#pageheader .pageImage {
	margin: 0;
	margin-left: auto;
	width: 57.8947368421%;
	/*		height: 600px;*/
	aspect-ratio: 1.3 / 1;
}

#pageheader .pageImage img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}

body#news #pageheader .pageImage {
	height: 225px;
}

#pageheader #lead .lead-main {
	font-size: 4.4rem;
	line-height: 1.6363636364;
	padding-top: 30px;
}

#pageheader #lead .lead-main + .lead-sub {
	margin-top: 50px;
}

#pageheader #lead > p,
#pageheader #lead .lead-sub {
	font-size: 2.4rem;
	line-height: 2;
	width: 713px;
	text-shadow: 0px 0px 30px #fff, 0px 0px 20px #fff, 0px 0px 10px #fff;
}

#pageheader #lead .note {
	padding-left: 1.5em;
}

#pageheader #lead {
	position: absolute;
	top: 325px;
	left: 50%;
	-webkit-transform: translateX(-50%);
	transform: translateX(-50%);
	margin: 0;
	width: 100%;
	max-width: 1500px;
	padding: 0 50px;
}

#pageheader #lead p {
	font-size: 2.4rem;
	line-height: 2;
}

#pageheader #lead .leadtext {
	font-size: 3.2rem;
	line-height: 1.75;
	width: 600px;
}

#pageheader #lead .title {
	font-size: 1.6rem;
	margin-top: 35px;
}

#pageheader #lead .name {
	font-size: 2.4rem;
	margin-top: 15px;
}

.headline {
	padding-top: 45px;
	padding-bottom: 70px;
	padding: 45px 0 70px;
	max-width: 1500px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: baseline;
	-ms-flex-align: baseline;
	align-items: baseline;
	gap: 0 20px;
}

.headline::before {
	background-image: linear-gradient(90deg, #069 100px, #ddd 100px);
	width: 100%;
	left: 0;
}

.headline .en {
	font-size: 2.8rem;
}

.headline .ja {
	font-size: 1.4rem;
	margin-top: 0;
}

.header {
	padding-bottom: 25px;
	margin-bottom: 0;
}

.header::after {
	width: 100px;
}

.header .ja {
	font-size: 1.6rem;
}

.header .en {
	font-size: 5rem;
	margin-top: 15px;
	white-space: nowrap;
}

.ico-request {
	width: 21px;
	height: 28px;
}

.ico-inquiry {
	width: 25px;
	height: 21px;
}

.ico-prev,
.ico-next {
	width: 60px;
	height: 60px;
	background-size: 9px 14px;
	-webkit-transition: .3s;
	transition: .3s;
}

a:hover .ico-prev,
a:hover .ico-next {
	background-color: #069;
}

a:hover .ico-prev {
	background-image: url(assets/images/common/ico_prev_white.svg);
}

a:hover .ico-next {
	background-image: url(assets/images/common/ico_next_white.svg);
}

.ttl1 {
	font-size: 29px;
	line-height: 50px;
	font-weight: bold;
	margin-bottom: 1em
}

.txt1 {
	font-size: 16px;
	line-height: 33px;
	font-weight: bold;
	margin-bottom: 1em
}

#pageheader .read .ttl1 strong {
	font-weight: bold;
	background: linear-gradient(transparent 60%, #c6e2ed 60%);
}

.indexareawrap {
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	background: #f5f5f5
}
.indexareawrap .inner{
	width: 100%;
    max-width: 1500px;
	    margin: 0 auto;
}
.indexarea {
	width: 1080px;
	padding: 75px 50px;
	/*
    position: absolute;
    top: 0;
    left: 0;
*/
}

.indexlist {
	column-gap: 8%;
	counter-reset: titlenum 0;
}

ol.indexlist li {
	width: 42%;
	position: relative;
	counter-increment: titlenum 1;
}

ol.indexlist li:before {
	content: "0"counter(titlenum);
	padding-right: 15px;
	color: var(--color-blue);
	vertical-align: middle;
	font-size: 18px;
	position: absolute;
	top: 16px;

}

ol.indexlist li:after {
	content: '';
	width: 10px;
	height: 10px;
	border: 0;
	border-top: solid 2px var(--color-blue);
	border-right: solid 2px var(--color-blue);
	transform: rotate(45deg);
	position: absolute;
	top: -5px;
	right: 0;
	bottom: 0;
	margin: auto;
}

.indexlist li a {
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #97BCD0;
	padding: 16px 30px 10px
}

.indexlist li .ttl {
	font-size: 19px;
	color: #09335C;
	margin-bottom: 6px
}

.indexlist li .en {
	color: var(--color-blue);
	font-size: 13px
}

.bg-gy {
	background: #f5f5f5;
}

.fukidashi {
	position: relative
}

.fukidashi:before {
	content: "";
	position: absolute;
	bottom: -130px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	border: 80px solid transparent;
	border-top: 60px solid #f5f5f5;
}
#customervoice{
	margin-top: 0!important;
	overflow: hidden
}
/*
#contactArea{
	margin-top: 0!important;
}
*/
#voice{
	width: 100vw;
	margin: 0 calc(50% - 50vw);
}
@media (max-width: 1400px) {
	.indexareawrap{
		margin-top: 60px
	}
}
@media (max-width: 768px) {
	.headline {
		padding-top: 8vw;
		padding-bottom: 30px;
	}

	.headline .en {
		font-size: 2rem;
		line-height: 1.2
	}

	#pageheader {
		margin-bottom: 30px;
	}

	#pageheader .header .ja {
		font-size: 14px
	}

	#pageheader .header {
		margin-left: 0;
		margin-right: 0;
		margin-bottom: 0;
		top: 0;
		left: 0;
		position: inherit;
		padding: 0 16px;
		width: 100%;
		max-width: 100%;
		transform: translateX(0);
	}

	#pageheader .header::after {
		left: 16px
	}

	#pageheader .header .en {
		font-size: 3.6rem;
		margin-top: 0;
	}

	#pageheader .pageImage {
		margin-top: 25px;
		margin-bottom: 20px;
		width: 100%;
	}

	#pageheader .read {
		position: initial;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		padding: 0 5%;
	}

	#pageheader .ttl1 {
		font-size: 20px;
		line-height: 33px;
	}

	#pageheader .txt1 {
		font-size: 16px;
		line-height: 31px;
		font-weight: 600;
	}

	.indexarea {
		width: 100%;
		padding: 35px 5%;
	}

	ol.indexlist li {
		width: 100%;
	}

	ol.indexlist li:before {
		top: 10px;
	}

	.indexlist li a {
		padding: 12px 30px 10px;
	}

	.indexlist li .ttl {
		font-size: 14px;
		margin-bottom: 0;
	}

	.indexlist li .en {
		font-size: 10px;
	}

	ol.indexlist li:after {
		transform: rotate(135deg);
	}

	#pageheader #lead {
		position: initial;
		-webkit-transform: translateX(0);
		transform: translateX(0);
		padding: 0 16px;
	}
	.indexareawrap{
		margin-top: 0
	}
}

/*============================
#cont1
============================*/

#cont1 .box-bl {
	background: var(--bl);
	padding: 75px 50px;
	color: #fff;
	text-align: center;
}

#cont1 .box-bl .article-ttl {
	font-size: var(--txt-xl);
	font-weight: 700;
	line-height: 1;
	margin-bottom: 20px
}

#cont1 .box-bl .article-subttti {
	font-size: var(--txt-m);
	font-weight: 600;
	    line-height: 1.4;
}
#cont1 .box-bl .article-subttti span{
	font-size: 14px
}
#cont1 .box-bl .basiclist {
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 20px 50px;
	width: min(800px, 90%);
	margin: 0 auto;
	font-weight: 500;
	text-align: center;
	font-size: var(--txt-ms);
}
#cont1 .box-bl .subttl{
	font-size: var(--txt-m);
	font-weight: 600;
}
/*
#cont1 .box-bl .basiclist li {
	padding-left: 1em;
	position: relative;
	color: #fff;
	font-size: var(--txt-ms);

}

#cont1 .box-bl .basiclist li:before {
	content: '-';
	position: absolute;
	top: -10%;
	left: 0;

}

#cont1 .box-bl .basiclist li:not(:last-child) {
	margin-bottom: .5em
}
*/
#cont1 .cont1-boxwrap{
	background: #fff;
	padding: 120px 38px 40px;
	position: relative
}
#cont1 .cont1-boxwrap >.ttl{
	position: absolute;
       background-color: var(--color-bbb);
    color: #fff;
    width: 22em;
    font-size: 21px;
    height: 2em;
    border-radius: 50px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 0 2.4vw;
    position: absolute;
    top: 60px;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
    #cont1 .cont1-boxwrap::before {
           content: '';
    width: calc(100% - 170px);
    height: 60px;
    border: 2px solid #bbb;
    border-bottom: none;
    display: block;
    position: absolute;
    top: 60px;
    left: 85px;
    }
#cont1 .cont1-boxwrap .evenly-row{
	gap:50px
}
#cont1 .cont1-box.left{
	background: #fff;
	border: 1px solid var(--color-bbb);
	position: relative
}
#cont1 .cont1-box.left:before{
	content: '';
    width: 153px;
    height: 68px;
    display: block;
    background: url(../images/service/clo/arrow.png) center / contain no-repeat;
    position: absolute;
    right: -103px;
    top: calc(50% - 9px);
    z-index: 2;
}
#cont1 .cont1-box.right{
	background: #e3f9ff;
	border: 1px solid #0e3c6a;
	box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2);
}
#cont1 .cont1-box .ttl {
	color: #fff;
	font-size: var(--txt-l);
	font-weight: 700;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1;
	padding: 20px
}
#cont1 .cont1-box.left >.ttl{
	background: #3ca0c5;
}
#cont1 .cont1-box.right >.ttl{
	background: #0e3c6a;
}
#cont1 .cont1-box .ttl span {
	font-size: var(--txt-ms);
	font-weight: normal;
	display: block
}

#cont1 .cont1-box .txt {
	color: #000;
	text-align: center;
	font-size: var(--txt-s);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 20px;
	padding: 0 30px
}
#cont1 .cont1-box .img{
	width: 70%;
	margin: 0 auto
}
#cont1 .box-bl .summary {
	font-size: var(--txt-m);
	text-align: center;
	font-weight: 600;
	letter-spacing: .07em
}

@media (max-width: 768px) {
	#cont1 .box-bl{
		padding: 30px 10px
	}
	#cont1 .box-bl .basiclist {
		padding: 16px 0;
	}
    #cont1 .cont1-box {
        padding: 0 0 30px;
    }

	#cont1 .cont1-box .ttl span {
		font-size: 13px
	}

	.clo-row__head {
		font-size: 14px;
		margin-bottom: 1em;
		padding: 0 10px
	}
	#cont1 .cont1-boxwrap{
		border: 1px solid var(--color-bbb);
    background-color: var(--color-f5);
		    padding: 40px 15px 40px;
	}
	#cont1 .cont1-boxwrap::before{
		display: none
	}
	#cont1 .cont1-boxwrap >.ttl{
		top: 0;
		font-size: 14px;
		    width: 20em;
	}
	#cont1 .cont1-boxwrap .evenly-row {
    gap: 25px;
}
	#cont1 .cont1-box.left:before {
    content: '';
    width: 72px;
    height: 50px;
    display: block;
    background: url(../images/service/clo/arrow.png) center / contain no-repeat;
    position: absolute;
    right: calc(50% - 35px);
    bottom: -33px;
    top: auto;
    z-index: 2;
    transform: rotate(90deg);
}
#cont1 .box-bl .article-subttti span{
	font-size: 12px
}
}

/*============================
#cont2
============================*/
#cont2 {}

#cont2 .column-80 {}

#cont2 .column-80 .cont2_bloc.evenly-row {}

#cont2 .column-80 .cont2_bloc.evenly-row .txtarea {}

#cont2 .cont2_bloc .ttl {
	font-size: var(--txt-l);
	color: var(--bl);
	margin-bottom: .5em;
}

#cont2 .cont2_bloc .ttl strong {
	background: linear-gradient(transparent 60%, #c6e2ed 60%);
}

#cont2 .cont2_bloc .txtarea p {
	font-size: var(--txt-s);
}

#cont2 .cont2_bloc .box-wh {
	background: #fff;
	padding: 50px 38px;
	font-size: var(--txt-ms);
	color: var(--nv);
	text-align: center;
}

#cont2 .cont2_bloc.bloc2 .txtarea {
	margin-left: 40px
}

#cont2 .cont2_bloc.bloc3 .ttl {
	text-align: center;
	margin-bottom: 1em
}

@media (max-width: 768px) {
	.evenly-row.reverse {
		flex-direction: column
	}

	#cont2 .cont2_bloc.bloc2 .txtarea {
		margin-left: 0;
	}

	#cont2 .cont2_bloc .ttl {
		font-size: 17px
	}

	#cont2 .cont2_bloc.bloc3 .ttl {
		text-align: left
	}

	#cont2 .cont2_bloc .box-wh {
		padding: 30px 16px;
		font-size: 14px;
		text-align: left;
	}
}

/*============================
#cont3
============================*/
#cont3 {
	background: #FFFFFF;
	background: linear-gradient(180deg, rgba(255, 255, 255, 1) 70%, rgba(233, 245, 250, 1) 30%);
}

.cont3-contents__inner {
	width: 1154px;
	margin: 0 auto;
	background: #fff;
	padding: 50px 38px;
	box-shadow: 3px 3px 10px 5px rgba(0, 0, 0, 0.08);
}

.cont3-contents__pc {
	width: 100%;
	height: auto;
	display: block;
}

.cont3-contents__sp {
	display: none;
}

@media (max-width: 768px) {
	.cont3-contents__inner {
		width: 100%;
		padding: 30px 16px
	}

	.cont3-contents__pc {
		display: none;
	}

	.cont3-contents__sp {
		display: block;
	}

	.cont3-contents__spFig {
		width: min(420px, 86vw);
		margin: 0 auto 24px;
		display: block;
		height: auto;
	}

	.cont3-contents__list {
		list-style: none;
		padding: 0;
		margin: 0;
		display: grid;
		gap: 22px;
	}

	.cont3-contents__li {
		display: grid;
		grid-template-columns: 56px 1fr;
		column-gap: 6px;
		row-gap: 6px;
		align-items: start;
	}

	.cont3-contents__no {
		grid-row: 1 / 3;
		margin: 0;
		font-size: 34px;
		line-height: 1;
		font-weight: 700;
		color: #BFD3DF;
	}

	.cont3-contents__ttl {
		margin: 0;
		font-size: 18px;
		color: #0A6C8C;
		font-weight: 700;
		line-height: 1.35;
	}

	.cont3-contents__txt {
		margin: 0;
		line-height: 1.8;
		color: #333;
		font-size: 14px;
	}
}

/*============================
#cont4
============================*/
#cont4 {
	background: #e9f5fa
}

#cont4 .pointlist {
	gap: 50px;
}

#cont4 .pointlist li {
	display: flex;
	flex-direction: column;
	gap: 50px;
	align-items: center;
	flex: 1 1 0%;
	min-width: 0;
}

#cont4 .pointlist .ttl {
	font-size: var(--txt-m);
	color: #fff;
	background: var(--bl);
	text-align: center;
	padding: 5px;
	border-radius: 3em;
	width: 100%
}

#cont4 .pointlist .img {
	height: 230px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#cont4 .pointlist .img img {
	height: max-content;
}

#cont4 .pointcard1 .img {
	width: 90%
}

#cont4 .pointcard3 .img {
	width: 60%
}

#cont4 .pointlist .txt {
	font-size: var(--txt-ms);
	color: var(--bl);
	font-weight: 500
}

#cont4 .box-wh {
	padding: 50px 23px;
	color: var(--nv);
	font-size: var(--txt-m);
	background: #fff;
	text-align: center;
	font-weight: 600
}

#cont4 .box-wh strong {
	background: linear-gradient(transparent 60%, #ffff00 60%);
}

@media (max-width: 768px) {
	#cont4 .pointlist li {
		gap: 10px
	}

	#cont4 .pointlist .img img {
		height: inherit;
	}
}

@media (max-width: 420px) {
	#cont4 .pointlist .img img {
		height: auto;
	}
}

/*============================
#cont5
============================*/
#cont5 {
	background: var(--bl);
}

#cont5 .headline span {
	color: #fff
}

#cont5 .headline::before {
	background-image: linear-gradient(90deg, #fff 100px, #9b9b9b 100px);
	width: 100%;
	left: 0;
}

#cont5 .top {
	font-size: var(--txt-ms);
	font-weight: 500
}

.clo-feature {
	padding: 80px 40px;
	background: #fff;
}
.clo-feature__inner{
	    display: flex;
    gap: 20px;
}
.clo-row {
	display: flex;
	flex-direction: column;
	width: calc(100% / 3);
	position: relative;
	    border: 1px solid #eee;
    box-shadow: 0px 5px 30px 0px rgba(0, 0, 0, 0.2);
}
/*

.clo-row:not(:last-child):before{
	content: '';
	width: 1px;
	height: 100%;
	position: absolute;
	right: -20px;
	top: 0;
	background: #0A6C8C
}
*/
.clo-row__head {
	    margin: 0 0 14px;
       font-size: 2.2rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.02em;
    text-align: center;
    background: var(--color-blue);
    padding: 13px 0 8px;
    position: relative;
	z-index: 1
}
.clo-row__head .num {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    position: absolute;
    top: -28px;
    left: calc(50% - 30px);
    padding-top: 3px;
    background-color: var(--color-blue);
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    text-align: center;
	z-index: -1
	
}
   .clo-row__head .num span {
    border-bottom: 1px dotted #fff;
	   padding-bottom: 0.6666666667vw;
}

.clo-row__no {
	margin-right: 10px;
}

/* 箇条書き（青） */
.clo-row__bullets {
	margin: 0;
	font-size: 16px;
	line-height: 1.9;
	    padding: 0 15px;
}

.clo-row__bullets li {
	margin: 0;
	position: relative;
	padding-left: 1em;
	font-size: 18px;
	    font-weight: bold;
	color: var(--color-blue);
}

.clo-row__bullets li:before {
	content: '・';
	position: absolute;
	left: 0;
}

.clo-row__left{
	    padding-bottom: 10px;
    border-bottom: 1px dotted #176699;
}

.clo-row__right {
	display: grid;
	align-content: start;
	padding:20px 15px;
}

.clo-row__right p {
	margin: 0;
	font-size: 15px
}


/* ===== SP ===== */
@media (max-width: 768px) {
	.clo-feature {
		padding: 40px 10px;
	}

	.clo-row {
		width: 100%
	}
	.clo-row:not(:last-child):before{
		content: '';
    width: 100%;
    height: 1px;
		right: 0;
    top: auto;
    bottom: -20px;
}
	
	.clo-row__right {
		border-left: none;
	}

	.clo-row__bullets {
		font-size: 16px;
		border-right: none;
	}
	.clo-feature__inner{
		flex-direction: column;
		gap:40px
	}
}

/*============================
#cont6
============================*/
.flowlist {
	gap: 75px;
}

.flowcard {
	border: 2px solid var(--bl);
	border-radius: 10px;

	.flowcard:not(:last-child)::before {
		top: auto;
		top: auto;
		bottom: -86px;
		transform: translateX(-50%) rotate(90deg);
	}

	background: var(--gy);
	padding: 40px 16px 16px;
	color: var(--bl);
	display: flex;
	flex-direction: column;
	gap:10px;
	text-align: center;
	justify-content: center;
	position: relative;
}

.flowcard:not(:last-child):before {
	content: '';
	background: url(../images/service/clo/clo-icon-arrow.svg)no-repeat;
	background-size: cover;
	width: 75px;
	height: 86px;
	position: absolute;
	top: 50%;
	right: -75px;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
}

.flowcard .ttl {
	font-size: clamp(17px, 14.333px + 0.711vw, 25px);
	font-weight: 600
}

.flowcard .txt {
	font-size: 15px;
	height: 6em;
}

@media (max-width: 768px) {
	.flowlist {
		gap: 44px;
	}

	.flowcard {
		padding: 16px
	}

	.flowcard:not(:last-child)::before {
		right: auto;
		left: 50%;
		top: auto;
		width: 45px;
		height: 53px;
		bottom: -50px;
		transform: translateX(-50%) rotate(90deg);
	}.flowcard .txt {
font-size: 14px;
	height: auto
}
}