/* entire body */
body {
	background-color: #e5e5e5;
}



.vsp-window{
	padding: 0;
	margin: auto;
	width: 80vw;

	max-width: 1200px !important;
	min-width: 300px;
	font-size: 12px;
	
	display: flex;
 	justify-content: center;
	 /* align-items: center; */
	/* border-style: solid;
	border-color: blue; */
}

.vsp-row{
	margin: 20px auto;

	/* goes horizontally for large screen*/
	display: flex;
 	justify-content: center;
	text-align: center;
	/* Width is always 100% of screen */
	min-width: 100%;

	
}

@media screen and ( max-width:996px )
{
	.vsp-row{
		flex-flow: column;
	}

}

.vsp-col{
	/* always goes vertically */

	display: flex;
	justify-content: center;
	
	flex-flow: column;
	width: 100%;
    
	/* border-style: solid;
	border-color: black; */
}

.vsp-frame img{
	/* width: 100%; */
	height: 150px;
	/* flex-grow: 1;
	object-fit: cover;
	border-radius: 10px; */

	border-style: solid;
	border-color: #eeeeee;
	margin-right: 20px;
	
}

.vsp-frame:last-child {
    margin-right: 0;
}

.vsp-fixed-width {
    width: 220px;
	/* border-style: solid;
	border-color: red; */
	
}

.vsp-fixed-width-large {
    width: 300px;
	/* border-style: solid;
	border-color: red; */
	
}

@media screen and ( max-width:996px )
{
	.vsp-frame img{
		
		margin-right: 0px;
		
		
	}
	.vsp-fixed-width {
		margin: auto;
	}
	

}


/* each main block */
.vsp-main-block{
	margin: 10px;
	width: calc(100%-20px);
	border-radius: 10px;
	/* content alignment*/
 	display: flex;
 	justify-content: center;
	/* sentence alignment in the content*/
	text-align: center;

	/* border-style: solid;
	border-color: red; */
}

a {
	color: #12451D;
}

ul,ol{
	font-size: 8pt;
	padding-left: 20px;
	text-align: left;
}

/* ==============================================================================*/

.vsp-visible-block{
	flex-flow: column;
}

.vsp-invisible-block{
	flex-flow: row;

	/* border-style: solid;
	border-color: yellow; */
}

.vsp-sub-vertical{
	flex: 1;
	flex-grow: 1;

	margin-bottom: 10px;
	
	border-radius: 10px;
	/* margin: 10px; */
	display: flex;
 	justify-content: center;
 	align-items: center;
	text-align: center;

	/* border-style: solid;
	border-color: yellow; */
}

.vsp-vertical:last-child {
    margin-bottom: 0; /* 最後のB要素には下部のマージンを適用しない */
}

.vsp-sub-horizontal{
	flex: 1;
	flex-grow: 1;

	border-radius: 10px;

	display: flex;
 	justify-content: center;
 	align-items: center;
	text-align: center;
}

.vsp-sub-horizontal + .vsp-sub-horizontal{
	margin-left: 20px;
}



.vsp-brown {
	background-color: #681C1C;
	color: #FFFFFF;
	padding: 20px;
}

.vsp-green {
	background-color: #12451D;
	color: white;
	padding: 20px;
}

.vsp-white{
	background-color: #FFFFFF;
	color: #681C1C;
	padding: 20px;
}

.vsp-clickable-card{
	position: relative;
	overflow:hidden;

	clip-path: polygon(
		0 0, 
		calc(100% - 20px) 0, 
		100% 20px, 
		100% 100%, 
		0 100%
	);
}

.vsp-clickable-card::after {
	content: "";
	position: absolute;
	z-index: -1;
	border-width: 0;

	top: 0%;
	right: 0%;
	height: 20px;
	width: 20px;
	background-color: rgba(0, 0, 0, 0.52);
	clip-path: inset(0 0 round 0 0 0 10px);
  }

.vsp-clickable-card a{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.vsp-clickable-card a:hover{
    opacity: 0.1;
    background-color: #000000;
}