@charset "UTF-8";
/*
======================
 基本CSS
======================
*/


*
{
	font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	margin:0;
	padding:0;
	border: 0;
}

body
{
	background-color: #fafdff;
	font-size: 100%;
	text-align: center;
}

.wrap
{
	overflow: hidden;
}

#site
{
	text-align: left;
	width: 100%;
}

#topbar
{	
	background-color: #cdb6e3;
	color: #fff;
	font-size: 70%;
	height: 1.4em;
	padding-left: 10px;
	padding-top: 0.2em;
	width: 100%;
}

#site #topbar-side
{	
	background-color: #fafdff;
	background-color: #cdb6e3;
	position: fixed;
    right: 0;
	text-align: right;
    top: 0px;
	width: 100%;
}
#topbar-side-text
{	
	color: #fff;
	font-size: 70%;
	float: left;
	padding-left: 10px;
}
#topbar-side-button
{	
	margin-right: 0px;
	clear:both;
}
#topbar-side-menu
{
	
}
#topbar-side-menu ul
{
	z-index: 999;
}
#topbar-side-menu ul li
{
	border-top: 2px solid #fff;
	line-height: 2em;
	text-align: center;
	width: 100%;
	
}
#topbar-side-menu ul li a
{
	color: #fff;
	text-decoration: none;
}
#topbar-side-menu ul li a:hover
{
	color: #ccc;
}

.close-menu
{
	display:none;
} 
.open-menu
{
	desplay:block;
}

	
/*
====================
 左サイドバーの設定
====================
*/


#sidebar
{
	background-color: #fafdff;
	float: left;
	text-align: center;
	width: 240px;
}
#sidebar #sidebar-logo
{
	background-color: #fafdff;
	padding-top: 10px;
}
#sidebar #sidebar-image
{
}
#sidebar div#sidebar-text
{
	color: #696969;
	padding-left: 10px;
	text-align: left;
	font-size: 140%;
}
#sidebar div#sidebar-text #sidebar-description
{
	font-size: 140%;
}
#sidebar div#sidebar-text #sidebar-name
{
	font-size: 140%;
}
#sidebar div#sidebar-link
{
	color: #8fbc8f;
	font-size: 90%;
	padding: 10px;
	text-align: left;
	font-size: 110%;
}
#sidebar div#sidebar-link ul
{
	list-style-type: none;
}
#sidebar div#sidebar-link ul li
{
	margin: 0.5em 0;
}
#sidebar div#sidebar-link ul li a
{
	text-decoration: none;
}
#sidebar div#sidebar-link ul li a:hover
{
	color: #ccc;
}

#sidebar div#sidebar-banner
{
	padding: 10px 0px;
}


/*
====================
 右メインの設定
====================
*/

#work
{
	background-color: #fff;
}

header
{
	background-color: #1dcc74;
}

#header-image img
{
	margin:0;
	padding:0;
	margin-bottom: -6.5px;
	width: 100%;
}

#header-information
{
	overflow: hidden;
	
	background-color: #bdd7ee;
	color: #fff;
	height: auto;
	margin-top: -6px;
	padding: 0;
	text-align: left;
	width: 100%;
}
#header-information ul
{
	list-style-type: none;
	width: 100%;
}

.information-title ,
.information-text ,
.information-button
{
	border: solid 0.5px #fff;
	float:left;
	height: 40px;
	padding-top: 20px;
} 
.information-title
{
	background-color: #8fbc8f;
	text-align: center;
	width: 150px;
} 
.information-text
{
	background-color: #E1EDD0;
	margin-right: -232px;
	padding-left: 19px;
	width: calc(100% - 3px);
} 
.information-text a
{
	color: #696969;
	text-decoration: none;
} 
.information-text a:hover
{
	color: #fff;
} 
.information-button
{
	background-color: #8fbc8f;
	height: 60px;
	padding-top: 0px;
	width: 60px;
} 
.information-button::after
{
	clear:both;
} 
.close-information
{
	display:none;
} 
.open-information
{
	desplay:inline;
}

#header-link
{
	background-color: #d3d3d3;
	margin-top: 0px;
	height: 54px;
}
#header-link div.link-title
{
	background-color: #d3d3d3;
	border-right: solid 1px #fff;
	float: left;
	margin: 0;
	padding: 14px 0;
	text-align: center;
	width: 200px;
}
#header-link div.link-title a
{
	color: #696969;
	text-decoration: none;
}
#header-link div.link-title a:hover
{
	color: #fff;
}

#contents
{
	width: 100%;
}

footer
{
	background-color: #cdb6e3;/*#23ff91;*/
	color: #fff;
	height: 160px;
	padding: 5px;
	text-align: center;
	width: 100%;
}
footer div#footer-link
{
	font-size: 70%;
	margin: 10px auto;
}
footer div#footer-link a
{
	margin: 0px 5px;
	text-decoration: none;
	color: #fff;
}

footer .footer-center
{
	color: #fff;
	margin: 0 auto;
}

hr
{
	border: solid 0.5px #fff;
	margin: 5px auto 20px;
	width: 95%;
}

footer .footer-left ,
footer .footer-right
{
	float: left;
	width: 50%;
}

footer .footer-left .inner,
footer .footer-right .inner
{
	width: 90%;
	text-align: left;
}
footer .footer-left .inner
{
	margin-left: auto;
	margin-right: 5px;
}
footer .footer-right .inner
{
	margin-left: 5px;
	margin-right: auto;
}
footer .footer-left .inner p,
footer .footer-right .inner p
{
}

/*
====================
 その他
====================
*/

h2
{
	font-size: 160%;
	text-align: left;
	margin-left: 5px;
	color: #696969;
}
h3
{
	font-size: 140%;
	text-align: left;
	margin-left: 10px;
	color: #696969;
}
h2::before
{
	content:"/ ";
	color: #696969;
	font-size: 120%;
	font-weight: 900;
}
h3
{
	background-color: #f5f5f5;
}
h3::before
{
	background-color: #f5f5f5;
	content:"■ ";
	color: #696969;
}

.cf::after
{	
	clear:both;
}

/*
 -- Inquiry --
*/

.area-inquiry
{
	margin: 0 auto;
	width: 96%;
}
.area-inquiry .area-note
{
	margin: 10px auto;
	color: #808080;
}
.area-inquiry .errors
{
	color: #ff0000;
	margin: 10px 45px;
}
.area-inquiry .area-input
{
	margin: 10px auto;
	color: #808080;
}
.area-inquiry .area-input table
{
	border: solid 1px #a9a9a9;
	border-collapse: collapse;
	width: 90%;
}
.area-inquiry .area-input table tr th ,
.area-inquiry .area-input table tr td
{
	border: solid 1px #a9a9a9;
	padding: 10px;
	text-align: left;
}
.area-inquiry .area-input table tr th
{
	width: 250px;
}
.area-inquiry .area-input table tr td
{
	width: auto;
}
.area-inquiry .area-input table tr td input ,
.area-inquiry .area-input table tr td select ,
.area-inquiry .area-input table tr td textarea
{
	background-color: #f5f5f5;
	border: solid 1px #a9a9a9;
}
.area-inquiry .area-input table tr td input ,
.area-inquiry .area-input table tr td select
{
	height: 2em;
}

.area-inquiry .area-input table tr td input[type="text"],
.area-inquiry .area-input table tr td input[type="email"],
.area-inquiry .area-input table tr td input[type="tel"],
.area-inquiry .area-input table tr td input[type="fax"],
.area-inquiry .area-input table tr td textarea
{
	width : 100%;
}

.area-inquiry .area-input .button
{
	padding: 10px;
	text-align: center;
}

.area-inquiry .area-input .button input
{
	border-radius: 10px;        /* CSS3草案 */  
	-webkit-border-radius: 10px;    /* Safari,Google Chrome用 */  
	-moz-border-radius: 10px;   /* Firefox用 */
	font-wight: bold;
	height: 40px;
	width: 160px;
	color: #808080;
}
.area-inquiry .area-input .button input:hover
{
	background-color: #ba55d3;
	color: #ffffff;
}
.area-inquiry .complete
{
	margin: 100px auto;
	text-align: center;
}
.area-inquiry .complete p
{
	margin: 10px auto;
}


/*
 -- Policy
*/

.area-policy
{
	margin: 30px auto;
	width: 900px;
	text-align: left;
}
.area-policy h2 ,
.area-policy h3
{
	margin: 1em auto;
}
.area-policy h3
{
	margin-left: 0.5em;
}
.area-policy h4
{
	margin-left: 1.5em;
}
.area-policy p
{
	margin: 0.5em auto;
	margin-left: 3em;
}
.area-policy p.note
{
	margin: 0.5em auto;
	margin-left: 1em;
}
.area-policy ul
{
	margin-left: 5em;
}


/*
 -- Information
*/

.area-information
{
	margin: 30px auto;
	width: 900px;
}
.area-information span.part-date
{
	margin: 0;
}
.area-information h2
{
	margin-bottom: 10px;
}
.part-information
{
	margin-bottom: 20px;
}

/*
 -- Single
*/

.note-single
{
	margin: 0 2%;
	width: 96%;
}
.a-single
{
	text-align: right;
	width: 98%;
}



/*
====================
	STRING
====================
*/


.box-1000
{
   width: 1000px; height: auto;
   align: left;
}

.red
{
	color: #f00;
}
.pink
{
	color: #ff66ff;
}

.black
{
	color: #000000;
}

.brown
{
	color: #78552B;
}

.blue
{
	color: #6495ed;
}

.steelblue
{
	color: #4682b4;
}

.tomato
{
	color: #ff6347;
}

.chocolate
{
	color: #d2691e;
}
.dimgray
{
	color: #696969;
}
.gray
{
	color: #808080;
}
.fnt-70
{
    font-size: 70%;
}
.fnt-80
{
    font-size: 80%;
}

.fnt-100
{
    font-size: 100%;
}
.fnt-100-center
{
    font-size: 100%;
	text-align: center;
}
.fnt-110
{
    font-size: 110%;
}
.fnt-105
{
    font-size: 105%;
}
.fnt-115
{
    font-size: 115%;
}

.fnt-120
{
    font-size: 120%;
}

.fnt-125
{
    font-size: 125%;
}

.fnt-130
{
    font-size: 130%;
}

.fnt-140
{
    font-size: 140%;
}

.fnt-150
{
    font-size: 150%;
}

.fnt-160
{
    font-size: 160%;
}

.fnt-180
{
    font-size: 180%;
}

.fnt-200
{
    font-size: 200%;
}

.fnt-300
{
    font-size: 300%;
}

.fnt-400
{
    font-size: 400%;
}

.fnt-b
{
    font-weight: bold;
}

.u-line
{
    text-decoration: underline;
}

.u-dot
{
    border-bottom: dotted;
}
.u-solid
{
   border-bottom: solid;
}

.ln-h1em { line-height: 1em;}
.ln-h1hem { line-height: 1.5em;}
.ln-h2em { line-height: 2em;}
.ln-h2hem { line-height: 2.5em;}



div.box-400-solid
{  
   border-style: solid; 
   border-width: 1px;
   height: auto;
   padding: 10px 10px 10px 10px; 
   width: 400px;
}

div.box-300
{  
   width: 300px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}
div.box-350
{  
   width: 350px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-400
{  
   width: 400px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-450
{  
   width: 450px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-480
{  
   width: 480px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-500
{
   width: 500px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-510
{
   width: 510px; height: auto; 
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-600
{
   width: 600px; 
   height: auto; 
   text-align: left;
   margin-left: auto;
   margin-right: auto;
}

div.box-800
{
   width: 800px; height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   
}


div.box-850-center
{
   width: 850px;
   height: auto;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
   
}

div.box-900
{
   width: 900px; 
   height: auto;
   text-align: left;
   margin-left: auto;
   margin-right: auto;
   
}

div.box-850
{
   width: 850px;
   height: auto;
   text-align: left;
   margin-left: 20px;
}

div.box-800-center
{
   width: 800px; height: auto;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

div.box-550-solid
{  
   border-style: solid; 
   border-width: 9px;
   border-color: #f4f4f4;
   height: auto;
   padding: 30px 30px 30px 30px;
   width: 550px;
   margin-left: auto;
   margin-right: auto;
   font-size: 120%;
   text-align: center;
}

div.box-550-solid-left
{  
   border-style: solid; 
   border-width: 9px;
   border-color: #f4f4f4;
   height: auto;
   padding: 10px 10px 10px 10px;
   width: 550px;
   margin-left: auto;
   margin-right: auto;
   font-size: 120%;
   text-align: left;
}

div.box-600-solid
{  
   border-style: solid; 
   border-width: 9px;
   border-color: #f4f4f4;
   height: auto;
   width: 600px;
   margin-left: auto;
   margin-right: auto;
 
   text-align: left;
}

div.box-800-solid
{  
   border-style: solid; 
   border-width: 9px;
   border-color: #f4f4f4;
   height: auto;
   width: 800px;
   margin-left: auto;
   margin-right: auto;
   text-align: left;
}

div.box-950-solid
{  
   border-style: solid; 
   border-width: 9px;
   border-color: #f4f4f4;
   height: auto;
   padding: 30px 30px 30px 30px;
   width: 900px;
   margin-left: auto;
   margin-right: auto;
   font-size: 90%;
   text-align: left;
}

div.box-950-solid-2px
{  
   border-style: solid; 
   border-width: 2px;
   border-color: #f4f4f4;
   height: auto;
   padding: 30px 30px 30px 30px;
   width: 900px;
   margin-left: auto;
   margin-right: auto;
   font-size: 140%;
}

div.box-950-solid-5px
{  
   border-style: solid; 
   border-width: 5px;
   border-color: #f4f4f4;
   height: auto;
   padding: 30px 30px 30px 30px;
   width: 900px;
   margin-left: auto;
   margin-right: auto;
   font-size: 120%;
   text-align: center;
}

div.box-900-center
{
   width: 900px;
   height: auto;
   text-align: center;
   padding: 30px 30px 30px 30px;
   margin-left: auto;
   margin-right: auto;
}

div.box-700-solid
{  
   border-style: solid; 
   border-width: 9px;
   border-color: #f4f4f4;
   height: auto;
   width: 700px;
   padding: 30px 30px 30px 30px;
   margin-left: auto;
   margin-right: auto;
   font-size: 110%;
   text-align: center;
}

div.box-1000
{
   width: 1000px; height: auto;
   text-align: left;
}

div.box-1000-border
{
   width: 1000px; height: auto;
   border: solid 1px black;
}

div.box-1200
{  
   width: 1200px;
   height: auto;
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

table tr.shikiri-nashi th.width-180
{
   width: 180px;
}

table tr.shikiri-nashi th.width-150
{
   width: 150px;
}


/* 高さ */

.h-250
{
	height: 250px;
}

.h-300
{
	height: 300px;
}
.h-350
{
	height: 350px;
}
.h-400
{
	height: 400px;
}
.h-450
{
	height: 450px;
}
.h-470
{
	height: 470px;
}
.h-600
{
	height: 600px;
}

.h-900
{
	height: 900px;
}

.h-1500
{
	height: 1500px;
}

/*
===================
      block 
===================
*/

div.block
{
    margin-bottom: 5px;
}

div.block h3
{
	background-color: #f5f5f5;
	color: #696969;
	font-size: 140%;
	margin-left: 10px;
	text-align: left;
}
div.block .block-wide
{
	font-size: 80%;
	width: 1000px;
	margin-left: auto;
	margin-right: auto;
	overflow:hidden;
}

div.block .block-wide-center
{
	font-size: 80%;
	text-align: center;
	width: 1500px;
	margin-left: auto;
	margin-right: auto;
}

div.block .block-wide-1050
{
	font-size: 80%;
	width: 1050px;
	margin-left: auto;
	margin-right: auto;
}

div.block .block-wide2
{
	font-size: 80%;
	width: 750px;
	margin-left: auto;
	margin-right: auto;
}

div.block　.block-wide p
{
	font-size: 80%;

}
div.block .block-title
{
	font-size: 100%;
	margin-bottom: 10px;
	padding-left: 50px;
	margin-left: 50px;
}
div.block .block-wide div.block-left ,
div.block .block-wide2 div.block-left ,
div.block .block-wide div.block-right ,
div.block .block-wide2 div.block-right
{
	font-size: 120%;
	float: left;
	margin-left: 70px;
	margin-right: auto;
	

}
div.block .block-wide div.block-left-aisatsu
{
	font-size: 120%;
	margin: auto;
}

div.block .block-wide div.block-left2
{
	font-size: 120%;
	float: left;
	margin-left: 70px;
	margin-right: auto;
    width: 400px;
}



div.block table
{
	border: solid 0px #000000;
	border-collapse: separate;
	font-size: 100%;
	margin-left: auto;
	margin-right: auto;
	color: #c0c0c0;
	margin-bottom: 20px;
	padding-left: 20px;           /* テーブル左開始位置調整 */
	width: 500px;                /* テーブル全幅調整 */

}
div.block table.w-900
{
	width: 900px;                /* テーブル全幅調整 */
}

div.block table tr th ,
div.block table tr td
{
	padding: 0.3em;
}
div.block table tr th
{
	background-color: #c0c0c0;    /* テーブル左側調整 */
	color: #fff;
}

div.block table tr th.shikiri-nashi
{
	background-color: #9dc3e6;  /* テーブル右側調整 */
	color: #fff;
}

div.block table tr th.shikiri-nashi
{
	background-color: #9dc3e6;　　/* 白 */
	color: #fff;
}
div.block table tr td
{
	background-color: #f2f2f2;
	color: #808080;
}
div.block table tr td.shikiri-nashi
{
	background-color: #f2f2f2;
	color: #808080;
}

div.block table tr td p
{
	padding: 0;
	font-size: 90%;
}
iv.block table tr th.tour-detail
{
	background-color: #9dc3e6;  /* テーブル右側調整 */
	color: #fff;
}
div.block table tr th.tour-detail
{
	background-color: #9dc3e6;　　/* 白 */
	color: #fff;
}
div.block table tr td.tour-detail
{
	background-color: #f2f2f2;
	color: #808080;
}




/*
====================
 れすぽんしぶる
====================
*/

/* PC */
@media(min-width: 1081px)
{
	#sidebar ,
	.pc-only
	{
		display: inline;
	}
	#work
	{
		margin-left: 240px;
	}
	#topbar-side ,
	.tb-only ,
	.sp-only
	{
		display: none;
	}
}
/* PC */
@media(max-width: 1080px)
{
	#sidebar ,
	.pc-only
	{
		display: inline;
	}
	#work
	{
		margin-left: 240px;
	}
	#topbar-side ,
	#header-link ,
	.tb-only ,
	.sp-only
	{
		display: none;
	}
}
/* TABLET */
@media(max-width: 799px)
{
	.tb-only
	{
		display: inline;
	}
	#topbar-side ,
	#header-information ,
	#header-link ,
	#sidebar ,
	.pc-only ,
	.sp-only
	{
		display: none;
	}
	#work
	{
		margin-left: 0px;
	}

}

/* SMART */
@media(max-width: 640px)
{
	#topbar-side ,
	.sp-only
	{
		display: inline;
	}
	
	#topbar ,
	#header-information ,
	#header-link ,
	#sidebar ,
	.not-sp ,
	.pc-only ,
	.tb-only
	{
		display: none;
	}
	#work
	{
		margin-left: 0px;
	}
	#header-image ,
	#contents
	{
		margin-top: 70px;
	}

	/* 個人情報保護方針 */
	div.block ,
	div.block div.block-wide ,
	div.block div.block-wide div.box-600 {
		margin: 0 5px;
		padding: 0;
		width: auto;
	}

	/* トップページ */
	div.block-wide-center ,
	div.block-wide-center div.box-1200 ,
	div.block-wide-center div.box ,
	div.block div.block-wide {
		display: block;
		margin: 0;
		padding: 0;
		width: auto;
	}
	div.block-wide-center div.box-1200 img {
		height: auto;
		width: 100%;
	}


	.area-information ,
	h3 ,	
	div.block .block-wide ,
	div.block .block-wide div.block-left ,
	div.block .block-wide2 div.block-left ,
	div.block .block-wide div.block-right ,
	div.block .block-wide2 div.block-right ,
	div.block .block-wide2 div.block-right ,
	div.block .block-wide div.block-left2 ,
	div.block div.box-600-solid ,
	div.block-wide div.box-700-solid ,
	div.block div.box-800-center ,
	div.block div.box-900-center {
		display: block;
		font-size: 100%;
		margin: 0;
		padding: 0;
		height: auto;
		width: auto;
	}

	.h-250 ,
	.h-350 ,
	.h-400 ,
	.h-450 ,
	.h-470 ,
	.h-600 ,
	.h-900 {
		height: auto;
	}

	.wide-set-sp ,
	div.block img ,
	div.block table ,
	div.block table.w-900 {
		font-size: 90%;
		display: block;
		margin: 5px 0;
		padding: 0;
		height: auto;
		width: 100%;
	}

	h2 {
		display: block;
		margin: 0;
		padding: 0;
		width: auto;
	}
	h2.home-top {
		margin-top: -70px;
	}

	.area-information {
		margin: 0 5px;
	}
	.map {
		height: 100%;
	}
	.map iframe {
		height: 200px;
		width: 100%;
	}

	form#requestForm table {
		margin: 0 5px;
		width: calc(100% - 10px);
	}
	form#requestForm table th {
		width: 40%;
	}
	
	/*埋め込み案内*/
	div.box-950-solid {
		border-style: solid;
		border-width: 9px;
		border-color: #f4f4f4;
		height: auto;
		padding: 0;
		width: calc(100% - 20px);
		margin: -50px 0 100px;
		font-size: 90%;
		text-align: center;
	}
	div.box-950-solid p {
		padding: 0;
		margin: 0;
	}

	
}

/*
====================
　　YouTube埋め込み
====================
/*YouTube最大値指定*/

.youtube {
  position:relative;
  width: 100%;
  max-width: 560px;
}

.youtube::before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 56.25%;
}

.youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

@media(max-width: 600px)
{
	div.box-600{
		width: auto;
	}
}

/*
====================
	構想
====================
*/
.slider img.toli {
	width: auto;
	height: 450px;
	margin: 0 auto; 
}
.slider img.toli-nav {
	width: 220px;
	height: 220px;
	object-fit: cover;
}


/*
====================
  商品一覧　画像３列
====================
<html側記述>
  <div class="box">
	<div class="item"><img src="" alt="" /><p class="cnt">商品名が入る</p></div>
	<div class="item"><img src="" alt="" /><p class="cnt">商品名が入る</p></div> 
  </div>
*/

.box {
	display: flex;
	flex-wrap: wrap;
    margin: 0 auto;
}
.item {
 	margin-left: 20px;       /* 変更　0→20px　20230919 */
}

.item p {                    /* 追加　20230919 */
	text-align: center;
}
@media screen and (min-width: 768px){       /* 751 768 */
	.item:nth-child(3n + 1) {
		margin-left: 0;
		text-align: center;
	
    }                                     
}

		
.moji-takasa {
	line-height: 2em;
	margin-bottom: 2em;
}







/* ===============================================
#Card Styling  サクセスウェイ「業務代行」
=============================================== */
img2 {
  width: 100%;
  height: auto;
  -o-object-fit: cover;
     object-fit: cover;
}

.heading {
  font-size: 20px;
  color: #385495;
}

.small {
  font-size: 16px;
  color: #79767d;
}

.container {
  width: 100%;
  max-width: 960px;
  margin: 100px auto;
}

.container_wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding:0 20px;
  gap: 20px;
}

.card2 {
 /*box-shadow: 1px 1px 3px rgba(106, 131, 152, 0.2);*/
  display: flex;
  flex-direction: column;
  width: calc(100% / 2 - 20px * 2  );
  /*background-color: #ffffff;*/
  /*border-top: 5px solid #385495;*/
}

@media (max-width: 768px) {
  .card2 {
    width: calc(50% - 20px / 2);
  }
}

@media (max-width: 414px) {
  .card2 {
    width: 100%;
  }
}

.card2_item {
  padding: 10px 10px 0 10px;
}

.ellipsis {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.flexible {
  flex-grow: 1;
}