div.pre-caution {
    display:block;
    color: var(--primary-color);
    padding: 0 0.5rem;
    border: 0.5rem solid var(--primary-color);
    font-weight: bold;
    line-height: 1.4;
    border-radius: 0.5rem;
}
main h2 {
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-size: 3rem;
	letter-spacing: 0.05em;
	color: var(--primary-color);
}
main h2 .hosoku {
	display: block;font-weight: normal;
	font-size: 0.4em;
}

main p {
    font-size: 1.2rem;
    line-height: 1.6;
   
}

@media screen and (max-width: 600px) {
    main h2 {
        font-size: 2.5rem;
    }
    main p {
        font-size: 1.0rem;
    }
}
#contents {
	flex: 1;
	padding: var(--global-space);
}
	@media screen and (max-width:600px) {

	#contents {
		padding-top: 0px;
	}

	}


.list-half {
    display: flex;
    flex-direction: column;
    gap: 2px;
    justify-content: space-between;
}
.list-half .reverse {
    flex-direction: column;
    justify-content: space-between;
}
.list-half .text {
    min-height: 30px;
    background: rgb(255, 255, 255);
    padding: 1rem 2rem;
    border-radius: 1vw;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}

.list-half .reverse .text {
    margin-top: 0px;
    margin-bottom: 8vw;
    align-self: flex-end;
    margin-left: -10vw;
    box-shadow:5px 5px 20px rgba(0, 0, 0, 0.5);
}

.list-half h3 {
    text-align: center;
    margin:0px;
    padding: 0px;
}


.list-half h4 {
    font-weight: normal;
    margin: 0;
    font-size: 1.5rem;
    color: var(--primary-color);
    position: relative;
    padding-right: 100px;
}

.list-half + .list-half {
    margin-top: 4rem;
}

@media screen and (min-width:600px) {
    .list-half.reverse {
        flex-direction: row-reverse;
        margin-left: calc(-1 * var(--global-space));
        margin-right: calc(-1 * var(--global-space));
    }
    .list-half.reverse .image {
        border-radius: 0px 3vw 3vw 0px;
        overflow: hidden;
    }
    .list-half.reverse .text {
        margin-bottom: 0px;
        align-self: flex-start;
        margin-left: -10vw;
        box-shadow: -1vw 1vw 0 5px var(--primary-color);
        flex: 1 1 0%;
    }
}

@media screen and (min-width: 600px) {
    .list-half {
        flex-direction: row;
        margin-right: calc(-1 * var(--global-space));
        margin-left: calc(-1 * var(--global-space));
    }
    
    .list-half .text {
        margin-bottom: 0px;
        align-self: flex-start;
        margin-top: 8vw;
        position: relative;
        z-index: 1;
        margin-right: -10vw;
        box-shadow: 1vw 1vw 0 5px var(--primary-color);
        flex: 1 1 0%;
    }
    .list-half .image {
        width: 50vw;
        padding: 0px;
        border-radius: 3vw;
        overflow:hidden;
    }
    .list-half h3 {
        text-orientation: upright;
        writing-mode: vertical-rl;
        font-size: 0.85rem;
        display: inline-block;
        white-space: nowrap;
        margin-top: 10vw;
    }
    .list-half .kazari {
        display: block;
        width: 100px;
    }
}
#photo-gallery {
	margin:0 calc(-1 * var(--global-space));
}
.gallery-wrap { overflow: hidden; }
.gallery-track {
	display: flex;
    width: max-content;
    gap: 0;
	align-items: center;
    will-change: transform;
	animation: gallery-scroll 27s linear infinite;
}
.gallery-track:hover { animation-play-state: paused; }
.gallery-track figure { flex: 0 0 auto; width: 27vw; max-width: 360px; height: 18vw; max-height: 260px; }
.gallery-track img { display: block; width: 100%; height:100%; border-radius: 8px; box-shadow: 0 6px 18px rgba(0,0,0,0.18); }

@keyframes gallery-scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@media screen and (max-width: 700px) {
	.gallery-track figure { width: 45vw; max-width: 260px; height: 30vw; max-height: 180px; }
	#photo-gallery { padding-left: 4vw; padding-right: 4vw; }
}