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

.top_component_01 {
	padding: 0px;
	height: 100vh;
}

.top_component_01 .single_img {
	width: 100%;
	height: 100%;
}

.top_component_01 .single_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 18% center;
}

.top_component_01__catch__bg {
	display: flex;
	justify-content: center;
	height: 100%;
}

.top_component_01__catch {
	max-width: 1200px;
	width: 90%;
	height: 84%;
	justify-content: flex-end;
}

section.top_component_01::after {
	content: '';
	background: url("../images/top/back_top_message.svg");
	background-repeat: no-repeat;
	background-size: cover;
	display: inline-block;
	width: 100%;
	height: 10vw;
	bottom: 0px;
	left: 0px;
	position: absolute;
	z-index: 1;
}

section.top_component_01 span {
	font-size: clamp(28px,6vw,60px);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 500;
	line-height: 140%;
	text-align: left;
	filter: drop-shadow(3px 3px 3px rgba(255,255,255,1));
}

section.top_component_01 span::before {
	content: '';
	background: url("../images/top/mv_txt_waku.png");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 295px;
	height: 56px;
	top: -50px;
	left: -70px;
	position: absolute;
}

.message_wrap {
	max-width: 640px;
	width: 100%;
}

section.profile {
	background: url("../images/top/profile_img.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
}

section.profile::before {
	background: url("../images/top/back_bottom_message.svg");
	top: 0px;
}

section.profile::after {
	background: url("../images/top/back_bottom_profile.svg");
	bottom: -5px;
}

.profile_wrap .box_inner {
	max-width: 500px;
	width: 100%;
}

section.voice::before {
	background: url("../images/top/back_top_voice.svg");
}


.course_list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 60px 6vw;
}

.course_list li {
	width: 100%;
	font-family: "Sawarabi Gothic", sans-serif;
}

.course_img {
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
	width: 100%;
}

.course_img img {
	border-radius: 20px;
}

.course_name {
	font-size: clamp(16px,2vw,20px);
	font-weight: 600;
	padding: 20px 0px;
}

.course_txt {
	font-size: clamp(14px,1.6vw,16px);
	line-height: 200%;
	text-align: justify;
}

section.voice .sec_inner {
	background: linear-gradient(to right, rgba(250,245,236,1),rgba(240,230,237,1));
}

section.voice::after {
	background: url("../images/top/back_bottom_voice.svg");
}

.voice-slide li {
	margin: 0px 30px 15px;
	background: #FFF;
	border: 2px solid #E6B422;
	border-radius: 20px;
	padding: 100px 30px 50px;
	margin-top: 70px;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
}

.voice_img {
	position: absolute;
	top: -70px;
	left: 0px;
	width: 100%;
	display: flex;
	justify-content: center;
}

.voice_name {
	font-size: clamp(16px,2vw,20px);
	font-family: "Sawarabi Gothic", sans-serif;
	font-weight: bold;
	text-align: center;
	margin-bottom: 10px;
}

.voice_txt {
	font-size: clamp(14px,1.6vw,16px);
	text-align: justify;
	line-height: 160%;
}

.voice-slide button.arrow_name {
    width: 40px;
    height: 40px;
    background-repeat: no-repeat !important;
	background-size: contain !important;
    position: absolute;
    top: 50%;
    cursor: pointer;
    z-index: 1;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
}

.voice-slide button.prev_arrow {
    left: 31.5%;
	background: url("../images/top/arrow_prev.svg");
}

.voice-slide button.next_arrow {
    right: 31.5%;
	background: url("../images/top/arrow_next.svg");
}

.voice-slide button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: none;
    padding: 0;
    border: none;
    background-color: transparent;
}

.slick-slider button:focus {
  outline: none;
}

.accordion-inner {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
}

.accordion {
    display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: #FFF;
	filter: drop-shadow(0px 3px 6px rgba(0,0,0,0.16));
	border-radius: 20px;
	padding: 30px;
	width: 100%;
}

.accordion > * > * {
    display: flex;
	align-items: stretch;
	width: 100%;
}

.accordion > * > *::before {
	color: #DEABD4;
	font-size: clamp(20px,3.6vw,36px);
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 900;
	padding-right: 20px;
	line-height: 1;
	position: relative;
}

.accordion__title {
    font-size: clamp(16px,1.8vw,18px);
    cursor: pointer;
    position: relative;
	width: 100%;
	display: flex;
	align-items: center;
}

.accordion__title > span {
    align-items: center;
}

.accordion__title > span::before {
    content: 'Q';
	top: -2px;
}

.accordion__title::after {
	content: '';
	background: url("../images/top/acd_open.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 30px;
	height: 30px;
	right: 0px;
	position: absolute;
}

.accordion__title.show::after {
	content: '';
	background: url("../images/top/acd_close.svg");
	background-repeat: no-repeat;
	background-size: contain;
	display: inline-block;
	width: 30px;
	height: 30px;
	right: 0px;
	position: absolute;
}

.accordion__content {
    display: none;
	margin-top: 15px;
}

.accordion__text {
    font-size: clamp(14px,1.6vw,16px);
	text-align: justify;
	line-height: 200%;
}

.accordion__text > p {
	padding-top: 5px;
}

.accordion__text::before {
    content: 'A';
}

.accordion.show .accordion__content {
	display: flex;
}

.news_box {
	position: relative;
}

.blog_box {
	display: grid;
	grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
	gap: 10vw 3vw;
}

.blog_box li {
	font-size: clamp(14px,1.6vw,16px);
	font-family: "Sawarabi Gothic", sans-serif;
}

.blog_box li a {
	display: flex;
	flex-wrap: wrap;
	gap: 5px;
}

.blog_box li a > * {
	width: 100%;
}

.post_img {
	height: 24vh;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 5px;
}

.post_img.no_img {
	background: #999;
	display: flex;
	justify-content: center;
	align-items: center;
}

.post_img.no_img::before {
	content: '';
	background: url("../images/common/logo.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center center;
	display: inline-block;
	width: 90%;
	height: 100%;
	position: absolute;
}

.post_img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.post_date {
	font-size: clamp(16px,2vw,20px);
	font-weight: 600;
}

.post_content {
	display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
	margin-top: 10px;
}

.post_content a {
	display: none;
}

.post_content *:not(p),
.post_content p:not(:nth-of-type(2)) {
	display: none;
}

.post_content * {
	font-size: clamp(14px,1.6vw,16px) !important;
}

.sns_list {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	gap: 10px;
}

.sns_list li {
	text-align: center;
	max-width: 200px;
	width: 100%;
}