@media screen and (min-width: 769px) {
	.guide_article_main {
		width: 100%;
		min-height: 300px;
		margin: 0 0 70px 0;
		background-color: #d0e0ef;
		background-image: url(../img/guidebook/main_bg.webp);
		background-repeat: no-repeat;
		background-size: cover;
		background-position: center;
		text-align: center;
		overflow: hidden;
		>div {
			width: 1100px;
			height: 500px;
			box-sizing: border-box;
			margin: 0 auto;
			padding: 230px 0 0 0;
			position: relative;
			&:after {
				content: "";
				width: 940px;
				height: 940px;
				margin: auto;
				border-radius: 50%;
				background: RGBA(0, 88, 160, 0.07);
				position: absolute;
				top: 60px;
				left: 0;
				right: 0;
			}
			>h2 {
				margin: 0 0 20px 0;
				color: #0058a0;
				.guide_article_main_smtxt {
					display: block;
					margin: 0 0 20px 0;
					font-size: 30px;
					line-height: 1;
					letter-spacing: 0.03em;
					.guide_article_main_line {
						background: linear-gradient(transparent 80%, #fff101 80%);
						>span {
							position: relative;
							&:before {
								content: "";
								width: 6px;
								height: 6px;
								margin: auto;
								background: #0058a0;
								border-radius: 50%;
								position: absolute;
								left: 0;
								right: 0;
								top: -6px;
							}
						}
					}
				}
				.guide_article_main_btxt {
					font-size: 52px;
					line-height: 1;
					>span {
						font-size: 40px;
					}
				}
			}
			>ul {
				display: flex;
				justify-content: center;
				gap: 0 12px;
				>li {
					padding: 10px 22px;
					background: #FFF;
					font-size: 25px;
					line-height: 30px;
					color: #0058a0;
					font-weight: bold;
					border: 2px solid #0058a0;
					border-radius: 30px;
				}
			}
			>img {
				position: absolute;
				bottom: 0;
				z-index: 3;
			}
			.guide_article_main_hakase {
				left: 30px;
			}
			.guide_article_main_man {
				right: 40px;
			}
		}
	}
	.gb_article_main_bnr {
		display: block;
		width: 1100px;
		border-radius: 10px;
		margin: 0 auto 20px auto;
		box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
		transition: all 0.2s ease-out;
		&:hover {
			transform: translateY(-3px);
		}
	}
	.guide_article {
		display: flex;
		align-items: flex-start;
		gap: 0 40px;
		width: 1100px;
		margin: 0 auto 100px auto;
		.breadcrumb {
			width: 100%;
			padding: 0;
			margin: 0 0 15px 0;
		}
		.guide_article_list {
			width: 760px;
			>ul {
				>li {
					&:not(:last-child) {
						margin: 0 0 30px 0;
					}
					>a {
						display: flex;
						align-items: flex-end;
						gap: 0 20px;
						padding: 15px 20px;
						border-radius: 10px;
						box-shadow: 0px 0px 4px 0px RGBA(120, 120, 120, 0.3);
						color: #333;
						.guide_article_list_img {
							width: 240px;
							aspect-ratio: 3 / 2;
							border-radius: 8px;
							overflow: hidden;
							>img {
								width: 100%;
								height: 100%;
								object-fit: cover;
								transition: all 0.2s;
							}
						}
						.guide_article_list_box {
							width: 460px;
							.guide_article_list_item {
								margin: 0 0 20px 0;
								padding: 0 0 20px 0;
								border-bottom: 2px solid #0095db;
								font-size: 22px;
								line-height: 1;
								font-weight: 500;
								color: #0095db;
								letter-spacing: 0.05em;
								transition: all 0.2s;
								>span {
									overflow: hidden;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
								}
							}
							.guide_article_list_txt {
								margin: 0 0 15px 0;
								font-size: 13px;
								line-height: 1.5;
								font-weight: 500;
								color: #666666;
								letter-spacing: 0.05em;
								>span {
									overflow: hidden;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
								}
							}
							>div {
								height: 28px;
								overflow: hidden;
								>p {
									display: flex;
									flex-wrap: wrap;
									justify-content: flex-end;
									gap: 0 5px;
									>label {
										padding: 5px 10px;
										background: #eeeeee;
										border-radius: 5px;
										font-size: 13px;
										line-height: 18px;
										font-weight: 500;
										color: #666666;
										letter-spacing: 0.05em;
										&:before {
											content: "#";
										}
									}
								}
							}
						}
						&:hover {
							.guide_article_list_img {
								>img {
									transform: scale(1.1);
								}
							}
							.guide_article_list_box {
								.guide_article_list_item {
									border-bottom: 2px solid #0058a0;
									color: #0058a0;
								}
							}
						}
					}
				}
			}
		}
		.guide_article_side {
			width: 300px;
			#guide_article_side_sr {
				width: 300px;
				box-sizing: border-box;
				margin: 0 0 30px 0;
				background: #FFF;
				border: 3px solid #333333;
				border-radius: 13px;
				box-shadow: 2px 3px 0px 0px rgba(0, 0, 0, 0.1);
				>h2 {
					display: flex;
					align-items: center;
					justify-content: center;
					gap: 0 10px;
					margin: 0 0 20px 0;
					padding: 15px 5px 15px 0;
					background: #0058a0;
					border-bottom: 3px solid #333333;
					font-size: 21px;
					line-height: 30px;
					color: #FFF;
					font-weight: 500;
					&:before {
						content: "";
						width: 23px;
						height: 23px;
						background-image: url(/img/guidebook/common/sidebar/s_icon_sr.webp);
						background-repeat: no-repeat;
						background-size: cover;
					}
				}
				>div {
					padding: 0 20px 20px 20px;
					>div {
						>h3 {
							display: flex;
							align-items: center;
							gap: 0 5px;
							margin: 0 0 10px 0;
							font-size: 16px;
							line-height: 1;
							color: #0058a0;
							letter-spacing: 0.05em;
							&:before {
								content: "";
								width: 19px;
								height: 20px;
								background-repeat: no-repeat;
								background-size: cover;
							}
						}
					}
					.guide_article_side_free {
						margin: 0 0 15px 0;
						>h3 {
							&:before {
								background-image: url(/img/guidebook/common/sidebar/s_icon_free.webp);
							}
						}
						.guide_article_side_sr_free {
							display: flex;
							gap: 0 6px;
							.t_search_tx {
								width: 198px;
								box-sizing: border-box;
								padding: 0 8px;
								border: 2px solid #cccccc;
								border-radius: 5px;
								font-size: 13px;
								line-height: 32px;
							}
							.t_search_btn {
								width: 55px;
								font-size: 13px;
								line-height: 32px;
								color: #FFF;
								background: #333;
								border: 2px solid #333333;
								border-radius: 5px;
								cursor: pointer;
								transition: all 0.2s;
								&:hover {
									background: #FFF;
									color: #333;
								}
							}
						}
					}
					.guide_article_side_word {
						>h3 {
							&:before {
								background-image: url(/img/guidebook/common/sidebar/s_icon_tag.webp);
							}
						}
						>ul {
							display: flex;
							flex-wrap: wrap;
							gap: 8px 6px;
							>li {
								>a {
									display: block;
									padding: 0 7px;
									border-radius: 5px;
									border: 2px solid #cccccc;
									box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.1);
									transition: all 0.2s;
									>span {
										font-size: 12px;
										line-height: 26px;
										font-weight: bold;
										color: #333;
										letter-spacing: 0.02em;
										&:before {
											content: "#";
										}
									}
									&:hover {
										transform: translateY(1px);
										box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.1);
									}
								}
							}
						}
					}
				}
			}
			#guide_article_side_lesson {
				margin: 0 0 20px 0;
				padding: 15px;
				background-image: url(/img/guidebook/common/sidebar/s_lesson_bg.webp);
				background-repeat: no-repeat;
				background-size: cover;
				>div {
					padding: 15px;
					background: #FFF;
					border-radius: 15px;
					>div {
						margin: 0 0 12px 0;
						>h2 {
							display: flex;
							align-items: center;
							justify-content: center;
							gap: 0 8px;
							margin: 0 0 5px 0;
							padding: 0 5px 0 0;
							font-size: 13px;
							line-height: 1;
							&:before {
								content: "";
								width: 22px;
								height: 23px;
								background-image: url(/img/guidebook/common/sidebar/s_icon_good.webp);
								background-repeat: no-repeat;
								background-size: cover;
							}
						}
						>p {
							font-size: 26px;
							line-height: 1;
							letter-spacing: 0.03em;
							color: #0058a0;
							font-weight: 700;
							text-align: center;
						}
					}
					>ul {
						>li {
							&:not(:last-child) {
								margin: 0 0 10px 0;
							}
							>a {
								display: block;
								padding: 15px 12px 10px 12px;
								border-radius: 10px;
								>p {
									margin: 0 0 7px 0;
									font-size: 16px;
									line-height: 1;
									font-weight: bold;
									letter-spacing: 0.02em;
								}
								>div {
									display: flex;
									align-items: center;
									justify-content: center;
									gap: 0 7px;
									>p {
										font-size: 12px;
										line-height: 1.2;
										letter-spacing: 0.02em;
										color: #333;
									}
								}
							}
							&:nth-child(1) {
								>a {
									background-color: #fcf3f4;
									box-shadow: 1px 1px 0px 0px rgba(225, 132, 136, 0.3);
									>p {
										color: #e18488;
									}
								}
							}
							&:nth-child(2) {
								>a {
									background-color: #f4f8ed;
									box-shadow: 1px 1px 0px 0px rgba(141, 191, 71, 0.3);
									>p {
										color: #8dbf47;
									}
								}
							}
							&:nth-child(3) {
								>a {
									background-color: #fcf5ec;
									box-shadow: 1px 1px 0px 0px rgba(221, 149, 60, 0.3);
									>p {
										color: #dd953c;
									}
								}
							}
							&:nth-child(4) {
								>a {
									background-color: #f0f8f8;
									box-shadow: 1px 1px 0px 0px rgba(95, 183, 188, 0.3);
									>p {
										color: #5fb7bc;
									}
								}
							}
							&:nth-child(5) {
								>a {
									background-color: #f3f3f7;
									box-shadow: 1px 1px 0px 0px rgba(133, 167, 208, 0.3);
									>p {
										color: #71a7d0;
									}
								}
							}
							&:nth-child(6) {
								>a {
									background-color: #f2f6fa;
									box-shadow: 1px 1px 0px 0px rgba(127, 132, 177, 0.3);
									>p {
										color: #7f84b1;
									}
								}
							}
							>a {
								&:hover {
									transform: translateY(2px);
									box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
								}
							}
						}
					}
				}
			}
			#guide_article_side_can {
				margin: 0 0 20px 0;
				padding: 10px 20px 20px 20px;
				background: #0058a0;
				>div {
					margin: 0 0 25px 0;
					>h2 {
						margin: 0 0 10px 0;
						font-size: 13px;
						line-height: 1;
						color: #FFF;
						text-align: right;
					}
					>p {
						font-size: 26px;
						line-height: 1;
						letter-spacing: 0.03em;
						color: #FFF;
						font-weight: 700;
						text-align: center;
					}
				}
				>ul {
					margin: 0 0 20px 0;
					>li {
						position: relative;
						&:not(:last-child) {
							margin: 0 0 20px 0;
						}
						>div.guide_article_side_can_cir {
							width: 45px;
							height: 45px;
							box-sizing: border-box;
							padding: 4px 0 0 0;
							border-radius: 50%;
							background: #0058a0;
							border: 3px solid #FFF;
							color: #FFF;
							text-align: center;
							box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.5);
							position: absolute;
							top: -8px;
							left: 20px;
							z-index: 5;
							.guide_article_side_can_txt {
								font-size: 9px;
								line-height: 1;
								font-weight: 500;
							}
							.guide_article_side_can_num {
								font-size: 21px;
								line-height: 1;
								font-weight: bold;
							}
						}
						>div.guide_article_side_can_box {
							padding: 40px 0 15px 20px;
							background: #FFF;
							border: 7px solid #d3e9fe;
							border-radius: 15px;
							overflow: hidden;
							position: relative;
							>p {
								font-size: 14px;
								line-height: 1.3;
								color: #0058a0;
								font-weight: bold;
							}
							&:before {
								content: "";
								width: 105px;
								height: 105px;
								background: #f7f6f0;
								border-radius: 50%;
								position: absolute;
								top: -40px;
								right: -30px;
							}
							>img {
								margin: auto;
								position: absolute;
								top: 0;
								bottom: 0;
								right: 5px;
							}
						}
					}
				}
				>a {
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 260px;
					height: 60px;
					box-sizing: border-box;
					padding: 0 18px 0 25px;
					background: #FFF;
					border-radius: 30px;
					box-shadow: 3px 4px 10px 0px rgba(0, 0, 0, 0.2);
					font-size: 15px;
					line-height: 1;
					color: #333;
					font-weight: bold;
					transition: all 0.2s ease-out;
					&:before {
						content: "";
						width: 19px;
						height: 20px;
						background-image: url(/img/guidebook/common/sidebar/s_icon_mem.webp);
						background-repeat: no-repeat;
						background-size: cover;
					}
					&:after {
						content: "";
						width: 7px;
						height: 10px;
						background-image: url(/img/guidebook/common/sidebar/s_icon_ar.webp);
						background-repeat: no-repeat;
						background-size: cover;
					}
					&:hover {
						transform: translateY(-3px);
					}
				}
			}
			.guide_article_side_bnr {
				display: block;
				overflow: hidden;
				border-radius: 10px;
				box-shadow: 0px 0px 9px 0px rgba(0, 0, 0, 0.2);
				transition: all 0.2s ease-out;
				&:hover {
					transform: translateY(-3px);
				}
			}
		}
	}
	#guide_article_conts {
		width: 760px;
		.guide_article_samune {
			width: 100%;
			margin: 0 0 30px 0;
			>img {
				width: 100%;
			}
		}
		.guide_article_input {
			.guide_art_title {
				width: calc(100% - 30px);
				box-sizing: border-box;
				margin: 0 0 20px 0;
				padding: 15px 0 15px 18px;
				border-radius: 10px 0 0 10px;
				font-size: 24px;
				line-height: 30px;
				color: #FFF;
				font-weight: 600;
				position: relative;
				&:after {
					content: "";
					display: block;
					width: 42px;
					height: 42px;
					border-radius: 0 5px 0 0;
					transform: rotate(45deg);
					position: absolute;
					top: 9px;
					right: -21px;
				}
			}
			.guide_art_box {
				&:not(:last-of-type) {
					margin: 0 0 30px 0;
				}
			}
			.guide_art_tit_bg {
				margin: 0 0 15px 0;
				padding: 15px 15px;
				border-radius: 8px;
				font-size: 22px;
				line-height: 24px;
				font-weight: 600;
			}
			.guide_art_txt {
				font-size: 15px;
				line-height: 24px;
				font-weight: 400;
				letter-spacing: 0.05em;
			}
			.guide_art_border_box {
				box-sizing: border-box;
				padding: 25px;
				border-radius: 8px;
			}
			.guide_art_character {
				display: flex;
				align-items: flex-end;
			}
			.guide_art_bg_box {
				padding: 18px 25px 18px 25px;
				border-radius: 8px;
				>h3 {
					margin: 0 0 10px 0;
					font-size: 20px;
					line-height: 1.5;
					font-weight: 600;
				}
			}
			.guide_art_tit_border {
				margin: 0 0 25px 0;
				padding: 0 0 15px 0;
				border-bottom: 3px solid #000000;
				font-size: 22px;
				line-height: 30px;
				font-weight: 600;
				position: relative;
				&:after {
					content: "";
					width: 50px;
					height: 3px;
					position: absolute;
					left: 0;
					bottom: -3px;
				}
			}
		}
	}
	.guide_article_conts01 {
		.guide_art_title {
			background-color: #e18488;
			&:after {
				background-color: #e18488;
			}
		}
		.guide_art_tit_bg {
			background-color: #fbeded;
			color: #e18488;
		}
		.guide_art_color {
			color: #e18488;
		}
		.guide_art_border_box {
			border: 3px solid #e18488;
		}
		.guide_art_bg_box {
			background-color: #fbeded;
		}
		.guide_art_tit_border {
			&:after {
				background-color: #e18488;
			}
		}
	}
	.guide_article_conts02 {
		.guide_art_title {
			background-color: #8dbf47;
			&:after {
				background-color: #8dbf47;
			}
		}
		.guide_art_tit_bg {
			background-color: #eef5e4;
			color: #8dbf47;
		}
		.guide_art_color {
			color: #8dbf47;
		}
		.guide_art_border_box {
			border: 3px solid #8dbf47;
		}
		.guide_art_bg_box {
			background-color: #eef5e4;
		}
		.guide_art_tit_border {
			&:after {
				background-color: #8dbf47;
			}
		}
	}
	.guide_article_conts03 {
		.guide_art_title {
			background-color: #dd953c;
			&:after {
				background-color: #dd953c;
			}
		}
		.guide_art_tit_bg {
			background-color: #faefe2;
			color: #dd953c;
		}
		.guide_art_color {
			color: #dd953c;
		}
		.guide_art_border_box {
			border: 3px solid #dd953c;
		}
		.guide_art_bg_box {
			background-color: #faefe2;
		}
		.guide_art_tit_border {
			&:after {
				background-color: #dd953c;
			}
		}
	}
	.guide_article_conts04 {
		.guide_art_title {
			background-color: #5fb7bc;
			&:after {
				background-color: #5fb7bc;
			}
		}
		.guide_art_tit_bg {
			background-color: #e7f4f5;
			color: #5fb7bc;
		}
		.guide_art_color {
			color: #5fb7bc;
		}
		.guide_art_border_box {
			border: 3px solid #5fb7bc;
		}
		.guide_art_bg_box {
			background-color: #e7f4f5;
		}
		.guide_art_tit_border {
			&:after {
				background-color: #5fb7bc;
			}
		}
	}
	.guide_article_conts05 {
		.guide_art_title {
			background-color: #7f84b1;
			&:after {
				background-color: #7f84b1;
			}
		}
		.guide_art_tit_bg {
			background-color: #ecedf3;
			color: #7f84b1;
		}
		.guide_art_color {
			color: #7f84b1;
		}
		.guide_art_border_box {
			border: 3px solid #7f84b1;
		}
		.guide_art_bg_box {
			background-color: #ecedf3;
		}
		.guide_art_tit_border {
			&:after {
				background-color: #7f84b1;
			}
		}
	}
	.guide_article_conts06 {
		.guide_art_title {
			background-color: #71a7d0;
			&:after {
				background-color: #71a7d0;
			}
		}
		.guide_art_tit_bg {
			background-color: #eaf2f8;
			color: #71a7d0;
		}
		.guide_art_color {
			color: #71a7d0;
		}
		.guide_art_border_box {
			border: 3px solid #71a7d0;
		}
		.guide_art_bg_box {
			background-color: #eaf2f8;
		}
		.guide_art_tit_border {
			&:after {
				background-color: #71a7d0;
			}
		}
	}
}
/* media screen fin */