@charset "utf-8";

/*------------------------------------------------------------
	C1
------------------------------------------------------------*/
.magazine_head{padding:0 20px;}
.magazine_head_in{
	position:relative;
	max-width:730px;
	padding:10px 0 30px;
	margin:77px auto 75px;
}
.magazine_head_in::before,
.magazine_head_in::after{
	content:'';
	position:absolute;
	width:40px;
	height:40px;
}
.magazine_head_in::before{
	top:0;
	left:0;
	border-top:1px solid #333;
	border-left:1px solid #333;
}
.magazine_head_in::after{
	right:0;
	bottom:0;
	border-right:1px solid #333;
	border-bottom:1px solid #333;
}
.magazine_head_in h1 img{
	display:block;
	margin:20px auto 5px;
}
.magazine_head_in p{
	font-size:1.5rem;
	letter-spacing:1.8px;
	line-height:3.2rem;
	text-align:center;
	margin:20px 0 0;
}
.br_sp{display:none;}

.magazine_link{
	position:relative;
	display:block;
	text-decoration:none;
}
#magazine_top{margin:75px 0 60px;}
#magazine_tab_list{
	display:flex;
	padding-left:0;
	overflow:hidden;
	margin-right:-2%;
}
.select_list_wrap {
	display: none;
}
.magazine_tab_item{
	list-style:none;
	margin:0 1.8% 0 0;
	width:24.6%;
}
.magazine_tab_link{
	position:relative;
	display:block;
	font-size:1.5rem;
	font-weight:500;
	letter-spacing:1.8px;
	line-height:2.07em;
	text-align:center;
	padding:14px 10px 12px;
	text-decoration:none;
	transition:all 0.3s;
}
.magazine_tab_link::before{
	position:absolute;
	display:block;
	content:'';
	width:100%;
	height:2px;
	bottom:0;
	left:0;
	background:#ddd;
}
.magazine_tab_link::after{
	position:absolute;
	display:block;
	content:'';
	width:100%;
	height:2px;
	bottom:0;
	left:0;
	background:#0099FF;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s;
}
.magazine_tab_link:hover,.on .magazine_tab_link{color:#09f;border-color:#09f;}
.magazine_tab_link:hover::after,.on .magazine_tab_link::after{
	transform-origin:left top;
	transform:scale(1, 1);
}
.magazine_time_list{
	display:flex;
	padding-left:0;
	margin:44px 0 78px;
}
.magazine_time_item{
	list-style:none;
	margin:0 28px 0 0;
}
.magazine_time_link{
	position:relative;
	font-size:1.3rem;
	letter-spacing:1.56px;
	line-height:2.07em;
	font-weight:500;
	text-decoration:none;
	color:#000;
	padding-bottom:6px;
}
.magazine_time_link:hover, .active .magazine_time_link{color:#09f;}
.magazine_time_link::after{
	content:'';
	display:block;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	height:1px;
	background:#09f;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform 0.3s;
}
.magazine_time_link:hover::after, .active .magazine_time_link::after{
	transform-origin:left top;
	transform:scale(1, 1);
}
#magazine_list{
	display:grid;
	grid-template-columns:48.5% 48.5%;
	grid-template-rows:repeat(5, auto);
	gap:45px 3%;
	padding:0;
}
.magazine_item{
	list-style:none;
	margin:0;
}
.magazine_link{
	display:block;
	text-decoration:none;
	color:#333;
}
.magazine_img{
	overflow:hidden;
	width: 100%;
	aspect-ratio: 3 / 2;
}
.magazine_img img{
	display:block;
	width:100%;
	height: 100%;
	object-fit: cover;
	transition:all 0.3s;
}
.magazine_outline{
	display:flex;
	align-items:center;
	margin:14px 0 10px;
}
.magazine_date{
	position:relative;
	display:block;
	font-size:1.2rem;
	letter-spacing:0.96px;
	line-height:2.41em;
	color:#666;
	padding:0 24px 0 0;
}
.magazine_date::after{
	position:absolute;
	content:"";
	width:1px;
	height:10px;
	background:#666 !important;
	top:calc(50% - 5px);
	right:0;
}
.magazine_category{
	display:block;
	font-size:1.1rem;
	letter-spacing:1.32px;
	line-height:2.63em;
	color:#666;
	margin-left:17px;
}
.magazine_title{
	position:relative;
	font-size:1.5rem;
	font-weight:500;
	letter-spacing:1.8px;
	line-height:1.8em;
	margin:0 !important;
	padding:0;
	text-decoration:underline;
	transition:all 0.3s;
}
.magazine_title::before{display:none;}
.magazine_about{
	font-size:1.2rem;
	letter-spacing:1.44px;
	line-height:2em;
	color:#6D7277;
	margin-top:15px;
}
.magazine_item:nth-child(1){
	grid-column:1/4;
	grid-row:1/3;
}
.magazine_item:nth-child(2){
	grid-column:1/2;
	grid-row:3/5;
	margin-right:2.3%;
}
.magazine_item:nth-child(9){
	grid-column:3/5;
	grid-row:5/7;
	margin-right:2.3%;
}
.magazine_item:nth-child(2) .magazine_outline,
.magazine_item:nth-child(9) .magazine_outline{
	margin:20px 0 9px;
}
.magazine_item:nth-child(2) .magazine_title,
.magazine_item:nth-child(9) .magazine_title{
	font-size:2.2rem;
	letter-spacing:0.44px;
	line-height:1.54em;
}
.magazine .magazine_item:nth-child(1) .magazine_link{position:relative;}
.magazine .magazine_item:nth-child(1) .magazine_outline{
	display:flex;
	align-items:center;
	margin:14px 0 17px;
}
.magazine .magazine_item:nth-child(1) .magazine_title{
	font-size:2.6rem;
	letter-spacing:3.12px;
	line-height:1.53em;
	font-weight:500;
}
.magazine .magazine_item:nth-child(1) .underline_standard{
	background:linear-gradient(to bottom,transparent,transparent calc(100% - 1px),#fff calc(100% - 1px),#fff 100%) no-repeat !important;
}
.magazine_link:hover img{transform:scale(1.03);}
.magazine_link:hover .magazine_title{text-decoration:none;color:#09f !important;}

#magazine_archive_list{
	overflow:hidden;
	display:flex;
	flex-wrap:wrap;
	margin:0;
	padding:0;
}
#magazine_archive_list .magazine_item{
	width:48.5%;
	margin:80px 3% 0 0;
	display:flex;
}
#magazine_archive_list .magazine_item:nth-child(1){
	flex-basis:100%;
	width:auto;
	margin:0;
}
#magazine_archive_list .magazine_item:nth-child(2n+1){margin-right:0 !important;}
#magazine_archive_list .magazine_link{
	padding-bottom:70px;
	border-bottom:2px solid #ddd;
	transition:border 0.3s;
	background:url("https://www.juyoungoh.com/img/common/arrow_r_l_black.svg") no-repeat right bottom 30px;
	text-decoration:none;
}
#magazine_archive_list .magazine_link:hover{
	background-image:url("https://www.juyoungoh.com/img/common/arrow_r_l_blue.svg");
	border-color:#09f;
}
#magazine_archive_list .magazine_title{text-decoration:none;font-size:2rem;}
#magazine_archive_list .magazine_item:nth-child(1) .magazine_title{font-size:2.6rem;}
#magazine_archive_list .magazine_item:nth-child(1) .magazine_outline{margin:27px 0 7px;}
#magazine_archive_list .magazine_outline{margin:13px 0 7px;}
#magazine_archive_list .magazine_date{padding:0 17px 0 0;}

/*------------------------------------------------------------
	C2
------------------------------------------------------------*/
.magazine_h_caption{
	position:absolute;
	bottom:0;
	left:70px;
	z-index:20;
}
.magazine_h_caption .txt_caption{
	font-size:1.1rem;
	color:#fff;
}
.magazine_post .action{margin:38px 0 34px;}
.magazine_speaker{
	letter-spacing:1.16px;
	line-height:3.2rem;
	font-weight:500;
	color:#000;
	margin-bottom:29px;
}
.magazine_lead{
	margin-bottom:65px;
}
/*--------- 目次 ---------*/
#toc_container{
	border:none;
	background:#FAFAFA;
	padding:48px 45px 30px;
}
.toc_title{
	font-size:2.0rem;
	font-weight:500;
	letter-spacing:0.4px;
	line-height:2.7rem;
	color:#000;
	margin:0 0 32px;
}
.toc_list{
	padding-left:0;
	border-top:1px solid #ddd;
}
.toc_list li{
	list-style:none;
	border-bottom:1px solid #ddd;
}
.toc_list li:not(:last-child){margin-bottom:0;}
.toc_list a{
	position:relative;
	display:block;
	padding:18px 20px 18px 49px;
	font-size:1.5rem;
	font-weight:500;
	letter-spacing:1.8px;
	text-decoration:none !important;
	transition:background-color 0.3s, color 0.3s;
}
.toc_list a:hover{
	background-color:#E5F5FF;
	color:#09f;
}
.toc_list a::after{
	content:'';
	position:absolute;
	top:0;
	left:25px;
	bottom:2px;
	margin:auto;
	width:8px;
	height:8px;
	border-right:1px solid #000;
	border-bottom:1px solid #000;
	transform:rotate(45deg);
	transition:border-color 0.3s;
}
.toc_list a:hover::after{border-color:#09f;}
#toc_container::after{display:none;}
/*------------------*/
.magazine_h{
	position:relative;
	max-width:1140px;
	padding:0 20px;
	margin:0 auto 62px;
}
.magazine_h_img{position:relative;}
.magazine_h_img_wrap{position:relative;}
.magazine_h_img_wrap::before{
	position:absolute;
	content:"";
	width:100%;
	height:50%;
	bottom:0;
	left:0;
	background:linear-gradient(0deg, #000000 0%, #00000000 100%);
	opacity:0.4;
	z-index:1;
}
.magazine_h_txt{
	position:absolute;
	left:0;
	bottom:0;
	color:#fff;
	padding:0 70px 43px;
	z-index:10;
}
.magazine_h_outline{
	display:flex;
	align-items:center;
	margin:14px 0 6px;
}
.magazine_h_date{
	position:relative;
	display:block;
	font-size:1.2rem;
	letter-spacing:0.96px;
	line-height:2.41em;
	padding:0 17px 0 0;
}
.magazine_h_date::after{
	position:absolute;
	content:"";
	width:1px;
	height:10px;
	background:#fff;
	top:calc(50% - 4px);
	right:0;
}
.magazine_h_category{
	display:block;
	font-size:1.1rem;
	letter-spacing:1.32px;
	line-height:2.63em;
	color:#fff;
	margin-left:16px;
}
.magazine_h_title{
	font-size:2.6rem;
	letter-spacing:3.12px;
	line-height:1.53em;
	font-weight:500;
	color:#fff;
}
.txt_interviewer{
	position:relative;
	padding-left:45px;
	font-size:1.5rem;
	letter-spacing:1.8px;
	line-height:1.8em;
	font-weight:500;
	margin:43px 0 17px;
	color:#000;
}
.txt_interviewer+p{margin-top:0 !important;}
.txt_interviewer::before{
	position:absolute;
	content:"";
	width:24px;
	height:1px;
	background:#333;
	top:13px;
	left:3px;
}
.content_area.magazine_post img{
	margin:10px 0;
}
.content_area.magazine_post{max-width:880px;}
.content_area.magazine_post h2{
	font-size:2.4rem;
	padding:0;
	margin:95px 0 30px;
}
.content_area.magazine_post h2::before{display:none;}

.magazine_post .tag_box{margin:66px 0 72px;}
.content_area.magazine_post p{margin:26px 0;}


@media screen and (max-width:1024px){

.magazine_h{padding:50px 20px 0;}
.magazine_list{grid-template-columns:54% 21.5% 21.5%;}
.magazine_outline{margin:6px 0 0;}
.magazine_date{padding:0 15px 0 0;}
.magazine_date::after{top:calc(50% - 5px);}
.magazine_category{margin-left:14px;}
.magazine_title{font-size:1.4rem;}
.magazine_item:nth-child(1) .magazine_outline{margin:10px 0 0;}
.magazine_item:nth-child(1) .magazine_title{font-size:1.7rem;}
.magazine .magazine_item:nth-child(2) .magazine_title{font-size:2.0rem;}
.magazine_h_caption{left:50px;}
.magazine_h_txt{padding:0 50px 43px;}

/* C1 */
#magazine_archive_list .magazine_item{margin-top:50px;}
#magazine_archive_list .magazine_link{
	padding-bottom:50px;
	background-position:right bottom 20px;
}
#magazine_archive_list .magazine_outline{margin:10px 0 5px;}
#magazine_archive_list .magazine_item:nth-child(1) .magazine_outline{margin:20px 0 6px;}
#magazine_archive_list .magazine_title{font-size:1.6rem;}
#magazine_archive_list .magazine_item:nth-child(1) .magazine_title{font-size:2rem;}

}


@media screen and (max-width:767px){
/*------------------------------------------------------------
	C1
------------------------------------------------------------*/
.magazine_head{
	margin:30px 0 0;
}
.magazine_head_in{margin:auto;}
.magazine_head_in::before,.magazine_head_in::after{
	width:20px;
	height:20px;
}
.magazine_head_in h1 img{max-width:178px;}
.magazine_head_in p{line-height:3rem;font-size:1.3rem;}
.br_sp{display:inline;}


.select_list_wrap{
	display: block;
	position: relative;
	margin-top:42px;
}
.select_list{
	font-size: 1.6rem;
	letter-spacing: 1.44px;
	line-height: 2.2rem;
	color: #000;
	border: 1px solid #ddd;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	cursor: pointer;
	width: 100%;
	padding:15px;
}
.select_list_wrap::after{
	position: absolute;
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1px solid #09f;
	border-bottom: 1px solid #09f;
	transform: rotate(45deg);
	top: calc(50% - 5px);
	right: 17px;
}
#magazine_top{
	margin:0 0 40px;
}
#magazine_tab_list{
	display:none;
}
.magazine_time_list{
	margin:34px 0 45px;
}
.magazine_time_item{
	margin:0 18px 0 0;
}
.magazine_time_link{
	font-size:1.2rem;
	letter-spacing:1.44px;
}
#magazine_list{
	display:flex;
	flex-wrap:wrap;
	margin-right:-2.5%;
	gap:normal;
}
.magazine_item{
	width:47.5%;
	margin:0 2.5% 35px 0 !important;
}
.magazine_outline{
	margin:9px 0 2px;
}
.magazine_date{
	font-size:1.1rem;
	letter-spacing:0.88px;
	padding-right:16px;
	line-height:1.8em;
}
.magazine_category{
	font-size:1.0rem;
	line-height:1.8em;
	letter-spacing:1.2px;
}
.magazine_title{
	font-size:1.3rem !important;
	letter-spacing:1.04px !important;
}
.magazine_about{
	display:none;
}
#magazine_list .magazine_item:first-child{
	width:100%;
}
.magazine_item:nth-child(2){
	width:47.5%;
	margin:0 2.5% 37px 0;
}
.magazine_item:nth-child(2) .magazine_outline,
.magazine_item:nth-child(9) .magazine_outline{
	margin:9px 0 2px;
}
.magazine_item:nth-child(2) .magazine_title,
.magazine_item:nth-child(9) .magazine_title{
	font-size:1.5rem;
	letter-spacing:0.3px;
	line-height:1.8em;
}

.magazine .magazine_item:nth-child(1) .magazine_link::before{
	display:none;
}
.magazine .magazine_item:nth-child(1) .magazine_txt{
	position:relative;
	color:#000;
	padding:0;
}
.magazine .magazine_item:nth-child(1) .magazine_outline{
	margin:8px 0 2px;
}
.magazine .magazine_item:nth-child(1) .magazine_date,
.magazine .magazine_item:nth-child(1) .magazine_category{
	color:#666;
}
.magazine .magazine_item:nth-child(1) .magazine_date::after{
	background:#666 !important;
}
.magazine .magazine_item:nth-child(1) .magazine_title{
	color:#000;
	line-height:2.7rem;
}
#magazine_archive_list .magazine_item{
	margin:25px 3% 0 0 !important;
	display:block;
}
#magazine_archive_list .magazine_item:nth-child(1){margin-top:0 !important;}
#magazine_archive_list .magazine_link{
	padding-bottom:0;
	background:none !important;
	border:none;
}
#magazine_archive_list .magazine_outline{margin:7px 0 2px;}
#magazine_archive_list .magazine_item:nth-child(1) .magazine_outline{margin:14px 0 4px;}
#magazine_archive_list .magazine_item:nth-child(1) .magazine_title{font-size:1.5rem !important;}
#magazine_archive_list .magazine_title span{
	position:relative;
	margin-right:25px;
}
#magazine_archive_list .magazine_title span::after{
	content:'';
	display:inline-block;
	position:relative;
	bottom:-2px;
	right:-15px;
	width:23px;
	height:15px;
	background:url("https://www.juyoungoh.com/img/common/smp_arrow_r_l_black.svg") no-repeat center right;
}
#magazine_archive_list .magazine_link:hover .magazine_title span::after{background-image:url("https://www.juyoungoh.com/img/common/smp_arrow_r_l_blue.svg");}


/*------------------------------------------------------------
	C2
------------------------------------------------------------*/
.magazine_h{margin-bottom:26px;padding:0 20px;}
.magazine_h_caption{
	position:absolute;
	width:calc(100% - 20px);
	bottom:0;
	left:10px;
}
.magazine_h_caption .txt_caption{
	font-size:1.0rem;
	letter-spacing:0.8px;
	line-height:1.8rem;
}
.magazine_h_img_wrap {
	position: relative;
	padding-top: 108.059%;
}
.magazine_h_img_wrap img{
	position: absolute;
	top: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.magazine_h_img_wrap::before {display: none;}
.magazine_h_txt{
	position:relative;
	color:#000;
	padding:0;
	margin-top:0;
}
.magazine_h_outline{
	margin:12px 0 7px;
	color:#666;
}
.magazine_h_date{
	font-size:1.1rem;
	letter-spacing:0.88px;
	padding:0 17px 0 0;
}
.magazine_h_date::after{
	background:#666;
}
.magazine_h_category{
	font-size:1.1rem;
	letter-spacing:0.88px;
	color:#666;
	margin-left:14px;
}
.magazine_h_title{
	font-size:1.8rem;
	letter-spacing:2.4px;
	color:#000;
}
.magazine_speaker{font-size:1.3rem;margin-bottom:17px;}
.content_area.magazine_post{margin:10px 0 15px;}
/*--------- 目次 ---------*/
#toc_container{
	padding:25px 20px 7px;
	margin:45px -20px;
}
.toc_title{
	font-size:1.6rem;
	letter-spacing:0.96px;
	margin:0 !important;
}
.toc_list{margin-top:16px !important;}
.toc_list li{
	padding:0;
}
.toc_list a{
	font-size:1.3rem;
	letter-spacing:1.56px;
	line-height:1.7;
	padding:13px 20px 14px 25px;
}
.toc_list a::after{left:0;}
.content_area.magazine_post h2{
	font-size:1.8rem;
	margin:56px 0 30px;
}
/*------------------*/
.content_area.magazine_post img{
	margin:0;
}
.txt_interviewer{
	padding-left: 25px;
	font-size: 1.5rem;
	letter-spacing: 0.96px;
	margin: 30px 0 20px;
	line-height:1.7;
}
.txt_interviewer::before{width:16px;}
.content_area.magazine_post p{margin:26px 0;}
}