/* <style> */
			a {
				color: var(--black-color);
			}
			
			h1 {
				font-size: 30px;
				color: var(--black-color);
			}

			h2 {
				font-size: 28px;
				font-weight: var(--font-bold);
				color: var(--black-color);
				margin-bottom: 20px;
			}

			h3 {
				color: var(--black-color);
				font-size: var(--font-size-l);
				font-weight: var(--font-bold);
				margin-bottom: 20px;
			}

			img {
				width: 100%;
			}

			.wrapper {
				margin-top: 60px;
			}

			.section {
				max-width: var(--screen-width);
				padding: 0 20px;
				margin: 10px auto 28px auto;
			}

			.section .title {
				font-size: 70px;
				color: var(--black-color);
				font-weight: var(--font-bold);
			}

			.section .magazine-summary-header {
				display: flex;
				flex-direction: row;
				margin-bottom: 8px;
			}

			.section .magazine-summary-header-text-wrap {
				display: flex;
				flex-direction: row;
				align-items: center;
				margin-left: 10px;
				color: #5c5c5c;
			}

			.section .magazine-summary-header-text-wrap p,
			.section .magazine-summary-desc p {
				font-size: var(--font-size-l);
			}

			.plus-img,
			.minus-img {
				width: 23px;
				height: 24px;
				padding-top: 2px;
				cursor: pointer;
			}

			input[name="summary-toggle"] {
				display: none;
			}

			input[name="summary-toggle"] ~ label .magazine-summary-desc {
				max-height: 0;
				overflow: hidden;
				transition: max-height 0.5s ease-out;
				margin-left: 33px;
				color: #5c5c5c;
				line-height: 1.4;
			}

			input[name="summary-toggle"]:checked ~ label .magazine-summary-desc {
				max-height: 500px;
			}

			input[name="summary-toggle"]:not(:checked)
				+ label
				img.plus-img
				input[name="summary-toggle"]:checked
				+ label
				img.minus-img {
				display: block;
			}
			input[name="summary-toggle"]:checked + label img.plus-img,
			input[name="summary-toggle"]:not(:checked) + label img.minus-img {
				display: none;
			}

			.magazine-summary {
				margin-bottom: 44px;
			}

			.magazine-category {
				border-radius: 27px;
			}

			.magazine-category input[name="magazine-category"]:checked + label,
			.magazine-category label:hover {
				background-color: var(--deep-black-color);
				color: var(--white-color);
			}

			.magazine-category input[name="magazine-category"] {
				display: none;
			}

			.magazine-category label {
				font-size: var(--font-size-l);
				font-weight: var(--font-bold);
				color: var(--black-color);
				background-color: var(--white-color);
				text-align: center;
				padding: 15px 18px;
				border-radius: 27px;
				cursor: pointer;
			}

			.magazine-list-empty {
				display: none;
				color: #5c5c5c;
				height: 500px;
				padding-top: 30px;
				margin-left: 35px;
				margin-bottom: 180px;
				font-size: var(--font-size-l);
			}

			.magazine-list {
				display: flex;
				flex-wrap: wrap;
				margin: 0 5px 180px 5px;
				padding-top: 30px;
			}

			.magazine-list .magazine-card {
				border-radius: 20px;
				width: 100%;
				height: 100%;
				max-width: 323px;
				max-height: 397px;
				margin: 0 12px 24px 12px;
				background-color: var(--white-color);
				box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
				box-sizing: border-box;
			}

			.magazine-list .magazine-card .magazine-image {
				width: 100%;
				padding-bottom: 60%;
				position: relative;
				border-radius: 20px 20px 0 0;
			}
			.magazine-image img {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				object-fit: cover;
				object-position: center;
				border-radius: 20px 20px 0 0;
			}
			/* .magazine-list .magazine-card .magazine-image {
				max-width: 397px;
				max-height: 189px;
				min-height: 189px;
				width: 100%;
				overflow:hidden;
				background-color: #f7f7f7;
			}

			.magazine-list .magazine-card .magazine-image img {
				border-top-left-radius: 20px;
				border-top-right-radius: 20px;
			} */

			.magazine-list .magazine-card .magazine-content {
				padding: 20px 22px 29px 26px;

				height: 100%;
			}

			.magazine-list .magazine-card .magazine-content .magazine-header {
			}

			.magazine-list .magazine-card .magazine-content .magazine-header .magazine-card-category-wrap {
				margin-bottom: 15px;
			}

			.magazine-list .magazine-card .magazine-content .magazine-header .magazine-card-category {
				font-weight: var(--font-light);
				font-size: var(--font-size-s);
				color: var(--black-color);
			}

			/* .magazine-list .magazine-card .magazine-content .magazine-header .magazine-title {
				font-weight: var(--font-bold);
				font-size: var(--font-size-l);
				color: var(--black-color);
				margin-bottom: 10px;
				display: -webkit-box;
				-webkit-line-clamp: 3;
				line-clamp: 3;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				min-height: 50px;
			} */

			.magazine-list .magazine-card .magazine-content .magazine-body-wrap .magazine-body {
				font-weight: var(--font-light);
				font-size: var(--font-size-s);
				color: #5c5c5c;
			}

			.magazine-footer {
				position: relative;
				margin-bottom: 82px;
			}

			.magazine-footer .magazine-footer-text {
				position: absolute;
				top: 40px;
				left: 40px;
				width: 100%;
				height: 100%;
			}

			.magazine-footer .magazine-footer-text p {
				margin-bottom: 4px;
				color: var(--black-color);
				font-size: var(--font-size-4xl);
			}

			.swiper-container {
				position: relative;
				overflow-x: clip;
				padding-right: 50px;
				padding-left: 20px;
			}

			.swiper-button-prev,
			.swiper-button-next {
				top: 0px !important;
				height: 70px !important;
				background-color: var(--background-color);
			}

			.swiper-button-prev {
				padding-right: 4px;
				left: 0 !important;
				transform: rotate(180deg);
			}

			.swiper-button-next {
				padding-left: 4px;
				right: 0 !important;
			}

			.swiper-button-prev:after {
				content: "" !important;
			}

			.swiper-button-next:after {
				content: "" !important;
			}

			.swiper-wrapper {
				position: relative;
				margin: 0 20px 50px 20px;
			}

			.swiper-slide {
				width: auto !important;
			}

			.magazine-list .magazine-card .magazine-image img.img-right {
				object-position: center right;
			}
			.magazine-list .magazine-card .magazine-image img.img-left {
				object-position: center left;
			}
			.magazine-list .magazine-card .magazine-image img.img-center {
				object-position: center center;
			}
		/* </style>


		<style> */
			@media screen and (max-width: 860px) {
				h1 {
					font-size: 30px;
					margin-bottom: 25px;
				}

				.section {
					margin-bottom: 29px !important;
				}

				.section .title-wrap .title {
					font-size: 35px;
				}

				.plus-img,
				.minus-img {
					width: 15px;
					height: 16px;
				}

				.magazine-summary-header {
					margin-bottom: 4px !important;
				}

				.magazine-summary-header-text-wrap {
					margin-left: 6px !important;
				}

				input[name="summary-toggle"] ~ label .magazine-summary-desc {
					margin-left: 22px;
				}

				.magazine-list {
					width: 100%;
					flex-direction: column;
					flex-wrap: nowrap;
					box-sizing: border-box;
				}

				.magazine-list .magazine-card {
					display: flex;
					flex-direction: row;
					/* justify-content: center; */
					/* align-items: center; */
					max-width: var(--screen-width);

					height: calc(100% - 138px);
					margin: 0 auto 12px auto;
					box-sizing: border-box;
				}
				.magazine-list .magazine-card .magazine-content {
					width: 50%;
				}
				.magazine-list .magazine-card .magazine-image {
					max-width: unset;
					max-height: unset;
					width: 50%;
					/* padding: 15px 0px 15px 15px; */
					padding-bottom:30%;
				}

				.magazine-list .magazine-card .magazine-image img {
					border-top-left-radius: 20px;
					border-bottom-left-radius: 20px;
					border-top-right-radius: 0;
					border-bottom-right-radius: 0;
					width: 100%;
					height: 100%;
				}

				.magazine-list .magazine-card .magazine-content .magazine-header .magazine-card-category,
				.magazine-list .magazine-card .magazine-content .magazine-body-wrap .magazine-body {
					font-size: var(--font-size-xs);
				}

				.magazine-list .magazine-card .magazine-content .magazine-header .magazine-title {
					font-size: var(--font-size-s);
				}

				.magazine-list .magazine-card .magazine-content .magazine-header {
					margin-bottom: 8px;
				}

				.magazine-footer .magazine-footer-text {
					top: 20px;
					left: 20px;
				}

				.magazine-footer .magazine-footer-text p {
					font-size: var(--font-size-m);
				}
			}
		/* </style>
		<style> */

			.pc_ver{display:block;}
			.mobile_ver{display:none;}
			.mobile_ver2{display:block;}
			


			@media screen and (max-width: 470px) {
				.pc_ver{display:none;}
				.mobile_ver{display:block;}
				.mobile_ver2{display:block;}
				h1 {
					font-size: var(--font-size-2xl);
					margin-bottom: 0;
					text-align: center;
				}
				.wrapper {
					margin-top: 46px;
				}

				.section {
					margin-bottom: 32px;
				}

				.section .title-wrap .title {
					text-align: center;
					font-size: var(--font-size-2xl);
				}

				.magazine-category label {
					font-size: var(--font-size-xs);
					padding: 10px 12px;
				}

				.swiper-button-prev img,
				.swiper-button-next img {
					width: 16px;
				}

				.swiper-button-prev,
				.swiper-button-next {
					height: 67px !important;
				}
				.magazine-list-empty {
					font-size: var(--font-size-xs);
				}
				.magazine-list {
					margin-bottom: 90px;
					padding-top: 0px;
				}
				.magazine-list .magazine-card {
					height: 138px;
				}
				.magazine-list .magazine-card .magazine-content {
					padding: 15px 10px;
				}

				.magazine-list .magazine-card .magazine-content .magazine-header .magazine-card-category,
				.magazine-list .magazine-card .magazine-content .magazine-body-wrap .magazine-body {
					font-size: var(--font-size-2xs) !important;
				}

				.magazine-list .magazine-card .magazine-content .magazine-header .magazine-title {
					font-size: var(--font-size-xs) !important;
					/* -webkit-line-clamp: 4; */
					min-height: auto !important;
				}

				.magazine-footer .magazine-footer-text p,
				.magazine-summary-header-text-wrap p,
				.magazine-summary-desc p {
					font-size: var(--font-size-xs) !important;
				}

				.magazine-list .magazine-card .magazine-content .magazine-header {
					margin-bottom: 10px;
				}

				.magazine-list .magazine-card .magazine-image {
					/* width: unset; */
					height: 138px;
					width: 138px;
					padding-bottom:0;
				}

				.magazine-list .magazine-card .magazine-image img {
					width: 100%;
					height: 100%;
				}

				.magazine-footer .magazine-footer-text {
					top: 15px;
					left: 15px;
				}

				.section .magazine-title {
					font-size: 25px;
				}

				

			}
			@media screen and (max-width: 390px) {
				.mobile_ver2{display:none;}
			}
		/* </style> */


		.magazine-list .magazine-card .magazine-content .magazine-header .magazine-title {
			font-weight: var(--font-bold);
			font-size: var(--font-size-l);
			color: var(--black-color);
			margin-bottom: 10px;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
			min-height: 51px
		}