@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Fredoka+One&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Noto+Sans+JP:wght@100;400;600;700;900&family=Roboto+Condensed:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200;400;700&display=swap');

.sp {
	display: none;
}
.pc {
	display: block;
}



/*------------------------------
	kv
------------------------------*/
#kv {
	width: 100%;
	height: 300px;
	background-color: darkgray;
	background-size: 100% 100%;
	background-size: cover;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 80px;
	@media screen and (max-width: 1220px) {
		height: 25vw;
		margin-top: 7vw;
	}
	@media screen and (max-width: 768px) {
		height: 37.6vw;
		margin-top: 12vw;
	}
	br.sponly{
		display: none;
		@media screen and (max-width: 768px) {
			display: inline;
		}
	}
}
#kv h2 {
	font-size: 16px;
	line-height: 1.7;
	color: #ffffff;
	text-align: center;
	@media screen and (max-width: 1220px) {
		font-size: 1.4vw;
	}
	@media screen and (max-width: 768px) {
		font-size: 3vw;
	}
}
#kv h2 span {
	font-size: 36px;
	@media screen and (max-width: 1220px) {
		font-size: 3vw;
	}
	@media screen and (max-width: 768px) {
		line-height: 1.1;
		font-size: 4.5vw;
	}
}
/*------------------------------
read
------------------------------*/
#read {
	font-size: 16px;
	line-height: 1.8;
	padding-block: 60px 40px;
	@media screen and (max-width: 1220px) {
		padding-block: 5vw;
		font-size: 1.4vw;
	}
	@media screen and (max-width: 768px) {
		padding-block: 8vw 10vw;
		font-size: 3.5vw;
	}
}
/*------------------------------
	inner
------------------------------*/
.inner {
	width: 900px;
	margin-inline: auto;
	box-sizing: border-box;
	@media screen and (max-width: 1220px) {
		width: 92vw;
	}
}
/*------------------------------
contents
------------------------------*/
.contents{
	padding-block: 40px;
	position: relative;
	@media screen and (max-width: 1220px) {
		padding-block: 2vw 5vw;
	}
	@media screen and (max-width: 768px) {
		padding-block: 5vw 8vw;
	}
	&:last-of-type{
		padding-bottom: 100px;
	}
    h3{
        font-size: 24px;
		line-height: 1;
        font-weight: 700;
        width: fit-content;
        padding-bottom: 20px;
        background-image: linear-gradient(to right, #d91731 30px, transparent 30px);
        background-position: bottom left;
        background-size: 30px 1px;
        background-repeat: no-repeat;
        margin-bottom: 20px;
		@media screen and (max-width: 1220px) {
			font-size: 2.1vw;
		}
		@media screen and (max-width: 768px) {
			font-size: 5.25vw;
		}
    }
    ol{
        list-style-type: decimal;
        list-style-position: inside;
        counter-reset: item-count;
        li{
            padding-left: 1em;
            text-indent: -1em;
            font-weight: 600;
            line-height: 2;
			font-size: 16px;
			@media screen and (max-width: 1220px) {
				line-height: 1.875;
				font-size: 1.4vw;
			}
			@media screen and (max-width: 768px) {
				font-size: 3.5vw;
			}
            span{
				font-weight: 400;
            }
        }
    }
    p{
		line-height: 2;
		font-size: 16px;
		@media screen and (max-width: 1220px) {
			line-height: 1.875;
			font-size: 1.4vw;
		}
		@media screen and (max-width: 768px) {
			font-size: 3.5vw;
		}
    }
    .ex{
        padding-left: 1em;
        margin-top: 1em;
    }
    .email{
        a{
            color: #d91731;
            font-weight: 500;
            text-decoration: underline;
			@media (any-hover: hover) {
                &:hover{
                    text-decoration: none;
                }
            }
        }
    }
    .caption{
        margin-top: 1lh;
        p{
            padding-left: 1em;
            text-indent: -1em;
        }
    }
	.pconly{
		@media screen and (max-width: 768px) {
			display: none;
		}
    }
}