.frameboxbl {
	position: relative;
	margin:0 auto;
	width:40%;
	max-width:40%;
	padding: 10px;
	text-align:center;
	margin-bottom:60px;
}

.frameboxbl::before, .frameboxb::after {
	content: '';
	width: 30px;
	height: 30px;
	position: absolute;
}

.frameboxbl::before {
	border-left: solid 6px #ccc;
	border-top: solid 6px #666;
	top: 0;
	left: 0;
}

.frameboxbl::after {
	border-right: solid 6px #ccc;
	border-bottom: solid 6px #666;
	bottom: 0;
	right: 0;
}

@media screen and (max-width: 768px) {
.frameboxbl{
	width:96%;
	max-width:96%;
}}




.boxv {
  position:relative;
  width:98%;
  max-width:98%;
  margin: 70px auto;
  padding: 60px 30px;
  text-align: left;
    --x-gradient: linear-gradient(90deg, #ccc 0 25px, transparent 0 calc(100% - 25px), #ccc calc(100% - 25px));
    --y-gradient: linear-gradient(#ccc 0 25px, transparent 0 calc(100% - 25px), #ccc calc(100% - 25px));

    outline: 1px solid #ccc;
    outline-offset: -3px;
    background-image:
        var(--x-gradient),
        var(--y-gradient),
        var(--x-gradient),
        var(--y-gradient);
    background-repeat: no-repeat;
    background-size: 100% 7px, 7px 100%, 100% 7px, 7px 100%;
    background-position: top, right, bottom, left;
}
.boxv p {
    line-height: 1.8;
    color: #222;
    font-weight:300;
}
@media screen and (max-width: 768px) {
.boxv {
    padding: 50px 20px;
    max-width:98%;
}}














.grid {
    width: 40%;
    max-width: 40%;
    margin-inline: auto;
    display: grid;
    gap: 10px;/* 画像間余白 */
    grid-auto-flow: dense; /* 隙間埋配置 */
    grid-template-columns: repeat(7, 1fr); /* カラム数 */
}
@media screen and (max-width: 768px) {
.grid {
	width: 70%;
    max-width: 70%;
}}

.imgs:first-child {
	grid-column: 1/4;
	grid-row: 1/3;
}
.imgs:nth-child(2) {
	grid-column: 4/8;
	grid-row: 1/2;
}
.imgs:nth-child(3) {
	grid-column: 4/8;
	grid-row: 2/3;
}
.imgs:nth-child(4) {
	grid-column: 1/5;
	grid-row: 3/5;
}
.imgs:nth-child(5) {
	grid-column: 1/5;
	grid-row: 5/7;
}
.imgs:nth-child(6) {
	grid-column: 5/8;
	grid-row: 3/4;
}
.imgs:nth-child(7) {
	grid-column: 5/8;
	grid-row: 4/7;
}


/* アスペクト比 */
.imgs {
    display: block;
    aspect-ratio: 300/200;
    width: 100%;
    height: 100%;
    object-fit: cover;	
}
.imgs:first-child {
  aspect-ratio: 200/400;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.imgs:nth-child(7) {
  aspect-ratio: 200/300;
  width: 100%;
  height: 100%;
  object-fit: cover;
}