@charset "utf-8";

:root {
	--color-black: #1A1311;
	--color-blue: #0072BC;
	--color-darkblue: #005B97;
	--color-skyblue: #E7F2FC;
	--color-lightblue: #F5F7FA;
	--color-yellow: #FFE036;
}

/*--------------------------------------------------*/
/* img */
/*--------------------------------------------------*/

.img-auto {
	max-width: 100%;
	height: auto;
}

.img-border {
	border: 2px solid var(--color-black);
    border-radius: 24px;
}

/*--------------------------------------------------*/
/* l-sec__inner--alert */
/*--------------------------------------------------*/

.l-sec__inner--alert {
	padding-top: 60px;
}

@media (max-width: 1079px) {
	.l-sec__inner--alert {
		padding-top: 40px;
	}
}

/*--------------------------------------------------*/
/* o-title-lv1 */
/*--------------------------------------------------*/

@media (max-width: 767px) {
	.o-title-lv1 {
		line-height: 1.4;
		font-size: 150%; /* 24px */
	}
}

/*--------------------------------------------------*/
/* o-label */
/*--------------------------------------------------*/

.o-label {
	padding: 8px 16px;
	border-radius: calc(1px / 0);
    border-color: var(--color-darkblue);
    background-color: var(--color-blue);
    color: #fff !important;
}

/*--------------------------------------------------*/
/* o-alert--info */
/*--------------------------------------------------*/

.o-alert--info {
    padding: 10px;
	border: 4px solid var(--color-black);
	background-size: auto;
    background-color: var(--color-yellow);
    background-image: repeating-linear-gradient(135deg, transparent, transparent 20px, var(--color-black) 20px, var(--color-black) 40px);
}

.o-alert--info > .o-alert__body {
	border: 4px solid var(--color-black);
	background-color: var(--color-yellow);
	padding: 20px 30px;
}

@media (max-width: 767px) {
	.o-alert--info > .o-alert__body {
		padding: 10px 20px;
		font-size: 100%;
	}
}

/*--------------------------------------------------*/
/* o-frame */
/*--------------------------------------------------*/

.o-frame {
	border-width: 6px;
	border-color: var(--color-black);
	background-color: var(--color-lightblue);
}

@media not screen and (max-width: 767px) {
	.o-frame {
		padding: 35px 40px;
	}
}

.o-frame > .o-title-lv3 {
	border-bottom-color: var(--color-black);
}

.o-frame > .o-list > li:last-child {
	margin-bottom: 0;
}

/*--------------------------------------------------*/
/* o-title-lv4 */
/*--------------------------------------------------*/

.o-title-lv4 {
	padding-left: 20px;
    border-left: 5px solid var(--color-blue);
}

/*--------------------------------------------------*/
/* o-card--anchor */
/*--------------------------------------------------*/

.o-card--anchor {
	border-radius: 8px;
	border: 1px solid var(--color-darkblue);
	box-shadow: 0 3px 15px rgb(0 0 0 / 0.3);
}

.o-card--anchor > .o-card__body {
	padding-right: 25px;
	padding-bottom: 20px;
	background: none;
}

.o-card--anchor .o-btn {
	width: max(40%, 160px);
}

@media (max-width: 767px) {
	.o-card--anchor .o-card__title {
		font-size: 120%;
	}
}

/*--------------------------------------------------*/
/* grid-margin-10 */
/*--------------------------------------------------*/

.l-sec.u-bg-blue .grid-margin-10 {
	margin-bottom: -20px;
}

.l-sec.u-bg-blue .grid-margin-10 > .grid-cell {
	margin-bottom: 20px;
}

/*--------------------------------------------------*/
/* p-balloon */
/*--------------------------------------------------*/

.p-balloon {
	position: relative;
	margin-top: 60px;
	padding: 20px 30px;
	border: 3px solid #ccc;
	border-radius: 8px;
	background-color: #fff;
}

.p-balloon > *:first-child {
	margin-top: 0;
}

.p-balloon::before,
.p-balloon::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	border: solid transparent;
}

.p-balloon::before {
	border-top-color: #ccc;
	border-width: 18px 20px 0;
}

.p-balloon::after {
	border-top-color: #fff;
	border-width: 18px 20px 0;
	margin-top: -4px;
}

@media (max-width: 767px) {
	.p-balloon {
		margin-top: 40px;
		padding: 15px 20px;
		font-size: 100%;
	}
}

/*--------------------------------------------------*/
/* u-hidden */
/*--------------------------------------------------*/

@media (max-width: 1296px) {
	.u-hidden-lg {
		display: none;
	}
}

@media (max-width: 900px) {
	.u-hidden-md {
		display: none;
	}
}