@charset "UTF-8";

/* =====================================================
= 共通
===================================================== */
#index.personalized h3, #index.personalized h4, #index.personalized h5,
.section h3, .section h4, .section h5,
#content h3, #content h4, #content h5 {
	line-height: 2.0!important;
}

#index.personalized .heading,
#index.personalized [class*='heading-'] {
	line-height: 2.5!important;
}

.section-body p {
	font-size: 20px;
}

#index.personalized .section p{
	padding-bottom: 25px;
}

#index.personalized p,
.section p,
#content p {
	line-height: 2.5;
}

#content p.font-ex {
	line-height: 2.5!important;
}

.question strong {
	padding: 0 20px 10px; margin-bottom: 10px; display: inline-block;
}

.sec04-box li {
	border-bottom: 1px solid #ccc; margin-bottom: .5em; padding-bottom: .5em;
}

#index.personalized #content {
	width: 100%;
	color: #333;
}

#index.personalized .section {
	width: 100%;
	padding-bottom: 80px;
}

#index.personalized .section .section-header {
	padding: 50px 0 25px;
}

.color-subaccent { color: #5dfa7c!important; }

@media (max-width: 640px) {
	#index.personalized .section {
		padding-bottom: 30px;
	}
	#index.personalized .heading,
	#index.personalized [class*='heading-'] {
		line-height: 1.8!important;
	}
	#index.personalized p,
	.section p,
	#content p {
		line-height: 1.8;
	}
	#index.personalized .section p{
		padding-bottom: 10px;
	}
	#content p.font-ex {
		line-height: 1.8!important;
	}
	.section-body p {
		font-size: 16px;
	}
}

/* heading-container, number */
.heading-container {
	display: flex;
	align-items: flex-start;
	width: 80%;
	margin: 0 auto;
	gap: 20px;
	margin-bottom: 60px;
	border-bottom: 2px solid #333;
}
.con03 .heading-container,
.con05 .heading-container {
	border-color: #fff!important;
}

.heading-container h3 {
	color: #333;
	overflow: hidden;
	flex: 1;
	padding: 0 20px;
	margin-bottom: 0;
}

.heading-container .heading_number {
	font-size: 60px!important;
	font-style: italic;
	font-weight: bold;
	color: #0084CB;
	width: 80px;
	flex-shrink: 0;
	text-align: center;
	line-height: 1!important;
}
.personalized .section small{
	font-size: 65%;
}

@media (max-width: 640px) {
    .heading-container {
        flex-direction: column;
        align-items: center;
		width: 90%;
        gap: 10px;
        padding-top: 30px;
        padding-bottom: 20px;
		margin-bottom: 40px;
		border-bottom: 2px solid #333;
		border-top: 2px solid #333;
    }
    .heading-container .heading_number {
        font-size: 40px!important;
        width: auto;
        margin-bottom: 0;
        line-height: 1!important;
        padding-bottom: 0!important;
    }
    .heading-container h3 {
        text-align: center;
    }
    .heading-container .heading-lg {
        font-size: 20px;
        line-height: 1.4;
    }
    .heading-container .heading-xl {
        font-size: 22px;
        line-height: 1.4;
    }
	.personalized section small{
		font-size: 80%;
	}
}

.flex-container {
	display: flex;
	justify-content: center;
	width: 100%;
}
.flex-container p {
	border-bottom: 1px solid #fff;
	padding-bottom: 17px; padding-left: 30px;
	margin: 0 auto 22px; width: 70%; font-weight: bold;
}

@media (max-width: 640px) {
    #index.personalized .section .section-body {
        text-align: left;
        padding: 0 20px 0;
    }
    .question strong {
        padding: 0 10px 10px;
    }
}

/* =====================================================
= section: #visual
===================================================== */
#index #visual {
	background: url("../img/visual_bg.jpg") center/cover no-repeat;
	display: flex; flex-direction: column; width: 100%; height: 100%;
}
#index #visual h1 {
	width: 70%; padding: 10% 0 5% 0; margin: 0 auto;
}
#index.personalized #visual h1 img.img-fluid {
	max-width: 70%!important;
}
#index.personalized #visual p span {
	font-size: 22px;
}
#visual .subtitle p {
	display: inline-block;
	padding: calc(5px + 1vw) calc(10px + 2vw);
	margin-bottom: 8%;
	text-align: center;
	font-size: 2vw;
	line-height: calc(1.2em + 0.5vw);
	background-color: rgba(237,245,65,.9);
}

@media (max-width: 640px) {
    #index.personalized #visual {
        background: url("../img/visual_bg_sp.jpg") center/cover no-repeat;
        padding: 0;
    }
    #index.personalized #visual h1 {
        width: 80%; margin: 0 auto; padding: 35% 0 5%;
    }
    #index.personalized #visual p span {
        font-size: 14px;
    }
	#index.personalized #visual h1 img.img-fluid {
		max-width: 100%!important;
	}
    #visual .subtitle p {
        margin-bottom: 15%; font-size: 5vw;
    }
}

#index.personalized .visual-button {
	text-align: center;
	margin-top: 10px;
	margin-bottom: 10%;
}

#index.personalized .visual-button .btn {
	border: 1px solid #333;
	background-color: #fff;
	color: #333;
	display: inline-block;
	padding: 10px 30px;
	font-size: 16px;
	font-weight: bold;
	transition: all 0.3s ease;
}

#index.personalized .visual-button .btn:hover {
	background-color: #0084cb;
	color: #fff;
}

#index.personalized .visual-button .btn strong {
	display: block;
	font-weight: bold;
}

#index.personalized .visual-button .btn::before,
#index.personalized .visual-button .btn::after {
	content: "≪";
	display: inline-block;
	transform: rotate(-90deg);
	margin: 0 5px;
}

@media (max-width: 640px) {
	#index.personalized .visual-button {
		margin-top: 20px;
		margin-bottom: 15%;
	}
	
	#index.personalized .visual-button .btn {
		padding: 12px 20px;
		font-size: 13px;
	}
}

/* =====================================================
= section: con01
===================================================== */
#index.personalized .section.con01 {
	background: url("../img/bg_con01.jpg") top center/cover no-repeat;
}
#index.personalized .con01 h3{
	font-size: 26px;
	font-weight: bold;
}
#index.personalized .con01 h3 span {
	display: inline-block;
	background-color: #fff;
	padding: 0.2em 1.2em;
	margin: 0.3em 0;
}
#index.personalized .con01 h3 br {
	display: block;
	margin-top: 0.8em;
	content: "";
}
#index.personalized .con01 .flex-container > ul {
	width: 70%;
}
#index.personalized .con01 ul {
	list-style: none;
	text-align: left;
	line-height: 2;
}
#index.personalized .con01 ul li {
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #333;
	padding-left: 3.5em;
	position: relative;
}
#index.personalized .con01 ul li::before {
	content: "◎";
	position: absolute;
	left: 2em;
	top: 0;
	color: #0084CB;
}

@media (max-width: 640px) {
	#index.personalized .section.con01 {
		background: url("../img/bg_con01.jpg") bottom right 25%/cover no-repeat;
	}
	#index.personalized .con01 h3{
		font-size: 22px;
		font-weight: bold;
	}
    #index.personalized .con01 h3 span:first-child {
        display: inline-block;
        background-color: #fff;
        padding: 0.6em 1.2em 0.2em;
        margin: 0 0;
    }
	#index.personalized .con01 h3 span:last-child {
        display: inline-block;
        background-color: #fff;
        padding: 0.2em 1.2em 0.6em;
        margin: 0 0;
    }
    #index.personalized .con01 .flex-container > ul {
        width: 100%;
    }
    #index.personalized .con01 ul li {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        padding-left: 2em;
    }
    #index.personalized .con01 ul li::before {
        left: .5em;
    }
}

/* =====================================================
= section: con02
===================================================== */
#index.personalized .con02 .flex-container > ul {
	width: 70%;
	padding: 3em 3em .5em;
	background-color: #EEEEEE;
}

#index.personalized .con02 ul {
	list-style: none;
	text-align: left;
	line-height: 2;
}

#index.personalized .con02 ul li {
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #fff;
	padding-left: 3.5em;
	position: relative;
}
#index.personalized .con02 ul li::before {
	content: "☆";
	position: absolute;
	left: 2em;
	top: 0;
}

@media (max-width: 640px) {
    #index.personalized .con02 .flex-container > ul {
        width: 100%;
		padding: 2em 2em .5em;
    }
	#index.personalized .con02 .section-body p.heading-ex{
		font-size: 22px;
	}
	#index.personalized .con02 ul {
		line-height: 1.8;
	}
    #index.personalized .con02 ul li {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        padding-left: 2em;
    }
    #index.personalized .con02 ul li::before {
        left: 0.5em;
    }
}

/* =====================================================
= section: con03
===================================================== */
.personalized .section.con03 {
	/* background: url("../img/bg_con03.jpg") top center / cover !important; */
	background: linear-gradient(
		135deg,
		rgba(51, 204, 255, 0.9),
		rgba(0, 102, 204, 0.8)
	);
	color: #fff;
}
.personalized .con03 .section-body{
	margin-bottom: 0;
}
.personalized .con03.section{
	padding-bottom: 0!important;
}

@media (max-width: 640px) {
    #index.personalized .section.con03 {
        padding-bottom: 20px;
    }
}

/* con03-top */
#index.personalized .section.con03 .con03-top {
	/* background: linear-gradient(
		135deg,
		rgba(51, 204, 255, 0.8),
		rgba(0, 102, 204, 0.8)
	); */
}

@media (max-width: 640px) {
}

/* con03-bottom */
#index.personalized .section.con03 .con03-bottom {
	/* background: linear-gradient(
		135deg,
		rgba(0, 153, 255, 0.8),
		rgba(0, 51, 153, 0.9)
	); */
}

@media (max-width: 640px) {
}

/* =====================================================
= section: con04
===================================================== */

@media (max-width: 640px) {
}

/* =====================================================
= section: con05
===================================================== */
#index.personalized .section.con05 {
	background-size: cover!important;
	background: linear-gradient(135deg, rgba(51, 204, 255, 0.8), rgba(0, 102, 204, 0.8)),
	url("../img/bg_con05.jpg") center center;
	color: #fff;
}

@media (max-width: 640px) {
}

/* =====================================================
= section: con_offer
===================================================== */
#index.personalized .section .con_offer {
	/* background: url("../img/bg_con_offer.jpg") bottom center/cover no-repeat; */
}
#index.personalized .con_offer .wrap_offer {
	border: 10px solid #333;
	text-align: left;
	padding: 50px 50px 30px 50px;
	margin-top: 40px;
	margin-bottom: 35px;
}
#index.personalized .con_offer .wrap_offer .section-header,
#index.personalized .con_offer .wrap_offer  {
	padding: 0; color: #111;
}
#index.personalized .con_offer .wrap_offer  {
	border: 10px solid #333;
	text-align: left;
	padding: 50px 50px 30px;
	margin: 40px 0 35px;
}
#index.personalized .con_offer .wrap_offer h4 {
	font-weight: bold; font-size: 28px; text-align: center;
	color: #fff; position: relative; margin-bottom: 30px;
	padding: 1em 2em; background: #0084CB;
}
#index.personalized .con_offer h3 {
	font-weight: bold;
	font-size: 32px;
	text-align: center;
	margin-bottom: 40px;
}

#index.personalized .con_offer .wrap_offer dl {
	background: #EEE;
	margin: 0 10px 35px;
	text-align: center;
	padding: 30px 0;
	border-radius: 20px;
}
#index.personalized .con_offer .wrap_offer dt {
	text-align: center;
	font-size: 20px;
}
#index.personalized .section.con_offer .section-body h4:after {
	content: ""; position: absolute; right: 0; left: 0; bottom: -20px;
	width: 0; height: 0; margin: auto;
	border-style: solid; border-width: 20px 20px 0 20px;
	border-color: #0084CB transparent transparent transparent;
}
i.clock {
	display: inline-block;
	background: url("../../online/img/clock.svg") top center;
	width: 20px; height: 20px; margin-right: .5em;
}
#index.personalized .con_offer .flex-container > ul {
	width: 80%;
}
#index.personalized .con_offer ul {
	list-style: none;
	text-align: left;
	line-height: 2;
}
#index.personalized .con_offer ul li {
	font-size: 20px;
	font-weight: bold;
	padding-bottom: 20px;
	margin-bottom: 20px;
	border-bottom: 1px solid #333;
	padding-left: 3.5em;
	position: relative;
}
#index.personalized .con_offer li::before {
	content: "■";
	position: absolute;
	left: 2em;
	top: 0;
	color: #0084CB;
}

@media (max-width: 640px) {
	#index.personalized .con_offer h3 {
		margin-bottom: 20px;
		font-size: 22px;
	}
	#index.personalized .con_offer .wrap_offer{
		border: 5px solid #333;
        text-align: left;
        padding: 30px 0px 30px 0px;
        margin-top: 20px;
        margin-bottom: 0epx;
	}
	#index.personalized .con_offer .wrap_offer dl {
		margin-bottom: 10px;
		padding-top: 0;
		padding-bottom: 0;
	}
	#index.personalized .con_offer .wrap_offer dt {
		text-align: left;
		padding: 20px;
	}
	#index.personalized .con_offer .flex-container > ul {
        width: 100%;
    }
	#index.personalized .con_offer .flex-container > ul {
        width: 100%;
    }
    #index.personalized .con_offer ul li {
        font-size: 16px;
        padding-bottom: 10px;
        margin-bottom: 10px;
        padding-left: 2em;
    }
    #index.personalized .con_offer ul li::before {
        left: .5em;
    }
}

/* =====================================================
= section: con06
===================================================== */
#index.personalized .con06 {
	background: url("../img/bg_con06.jpg") top center/cover no-repeat;
}

@media (max-width: 640px) {
}

/* =====================================================
= section: con_voice
===================================================== */
#index.personalized .con_voice {
	/* background: url("../img/bg_con06.jpg") top center/cover no-repeat; */
	background: linear-gradient(
		135deg,
		rgba(255, 231, 122, 0.85),
		rgba(255, 193, 7, 0.8)
	);
}
#index.personalized .con_voice .heading-xl {
	font-size: 28px;
	font-weight: bold;
	color: #333;
	margin-bottom: 60px;
	line-height: 1.5;
}
.voice-card {
	background: #fff;
	border: 1px solid #ddd;
	margin-bottom: 30px;
	width: 780px;
	margin-left: auto;
	margin-right: auto;
}
.voice-card-content {
	display: flex;
	align-items: flex-start;
	padding: 35px;
	gap: 20px;
}
.voice-card-image {
	flex-shrink: 0;
	width: 100px;
	height: 100px;
}
.voice-card-image img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.voice-card-info {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 100px;
}
.voice-card-header {
	margin-bottom: 15px;
	padding-bottom: 10px;
	border-bottom: 1px solid #ddd;
	text-align: left;
}
.voice-card-name {
	font-size: 18px;
	font-weight: bold;
	color: #333;
	margin-bottom: 4px;
	line-height: 1.3;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}
.voice-card-title {
	font-size: 13px;
	color: #666;
	line-height: 1.4;
}
.voice-card-bottom {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	flex: 1;
}
.voice-card-text {
	font-size: 14px;
	color: #333;
	line-height: 2;
	flex: 1;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
	text-overflow: "...";
	-webkit-text-overflow: "...";
	white-space: normal;
	margin-right: 15px;
}
.voice-card-button {
	flex-shrink: 0;
	align-self: flex-start;
}
.voice-card-button .btn {
	background: #808080;
	color: #fff;
	padding: 8px 16px;
	border: none;
	font-size: 12px;
	text-decoration: none;
	display: inline-block;
	background-image: none;
	box-shadow: none;
}
.personalized .section.con_voice small{
	font-size: 80%;
	font-family: "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
}

@media (max-width: 640px) {
	#index.personalized .con_voice .heading-xl {
		font-size: 20px;
		margin-bottom: 40px;
	}
	.voice-card {
		width: 100%;
	}
	.voice-card-content {
		flex-direction: column;
		text-align: left;
		gap: 15px;
		padding: 20px;
	}
	.voice-card-image {
		align-self: center;
		width: 40%;
		height: auto;
	}
	.voice-card-info {
		height: auto;
	}
	.voice-card-bottom {
		flex-direction: column;
		gap: 15px;
	}
	.voice-card-button {
		align-self: flex-end;
	}
	.voice-card-name {
		font-size: 16px;
		padding-bottom: 5px;
	}
	.voice-card-title {
		font-size: 12px;
	}
	.voice-card-text {
		font-size: 13px;
	}
}


/* =====================================================
= section: con_apply
===================================================== */
#index.personalized .con_apply {
	background-size: cover!important;
	background: linear-gradient(135deg, rgba(255, 235, 59, 0.5), rgba(33, 150, 243, 0.8)),
	url("../img/bg_con03.jpg") top center;
	padding-top: 60px;
	padding-bottom: 60px;
}

@media (max-width: 640px) {

}