@charset "UTF-8";

body{
	background-image: url("../img/imdex_bk.webp");
	background-size: 100%;
	background-repeat: repeat-y;
	background-color: #f7f6f5;
}

.head_line{
	background-image: url(../img/h2_bk.webp);
    background-color: #2f3d50;
	background-size: 40px;
    padding: 8px;
}


h1{
	max-width: 740px;
	margin:0 auto 50px;
	text-align: center;
    font-size: 40px;
	line-height: 1.3em;
    font-family: "Noto Serif JP", serif;
    color: #333;
    font-weight: 900;
    padding: 50px 20px 15px;
	border-bottom:2px solid #2f3d50;
}

main{
	position: relative;
}

.aside{
	top: 0;
	left:0;
	float:left;
	position: sticky;
	width:220px;
	transition: .2s;
}

.article-writer{
	padding: 30px 0 0 20px;
}

.retern a{
	position: relative;
	display: block;
	aspect-ratio:1 / 1;
	width:20px;
	height:auto;
	padding:15px;
	margin-bottom: 10px;
	border-radius: 10px;
	background-color: rgba(0,0,0,.2);
}
.retern a::after{
	position: absolute;
    content: "";
    width: 10px;
    height: 10px;
    border-top: #fff 2px solid;
    border-left: #fff 2px solid;
    top: 9px;
    left: 12px;
    transform: rotate(-45deg);
    transition: 0.2s;
}

.writer_name{
	display: flex;
	flex-wrap: wrap;
}

.writer_name img{
	width:80px;
	border-radius:50%;
	transition: .2s;
}
.writer_name .writer_name-wrap{
	width:calc(100% - 80px);
	margin: auto 0;
	padding-left:10px;
	font-weight:600;
}
.writer_name-wrap div{
	color:#222;
	font-size:80%;
	line-height: 1.2em;
	padding-bottom:5px;
}

.writer_name:hover{
	opacity: 1;
}
@media screen and (min-width:768px) {
	.writer_name:hover img{
		filter: brightness(108%);
	}	
}

.writer_text{
	padding-top:6px;
}
.writer_text p{
	font-size: 13px;
	color:#4F4F4F;
}
.writer_link{
	padding-top: 8px;
}

.writer_link a{
	display: block;
	position: relative;
	margin-bottom: 5px;
	padding:3px 10px;
	background-color:#BF9922;
	color:#fff;
	font-size: 13px;
	border-radius: 6px;
}
.writer_link a::after{
	position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    border-bottom: #fff 2px solid;
    border-right: #fff 2px solid;
    bottom: 8px;
    right: 15px;
    transform: rotate(-45deg);
    transition: 0.2s;
}
@media screen and (min-width:768px) {
	.writer_link a:hover{
		opacity: .9;
		background-color: #8A6E1E;
	}
	.writer_link a:hover::after{
		right: 9px;
	}
}


article{
	background-color: #F7F6F5;
	width:100%;
	max-width: 780px;
	margin:0 auto 25px;
	padding: 0 20px;
}

.article-main{

}


.article-main h2{
	font-size: 20px;
	font-weight:600;
	text-align: center;
	padding-bottom: 5px;
}

.article-main .youtube{
	padding-bottom: 20px;
}

.article-main .introduce{
	background-image: url(../img/supervision.webp);
	background-size: 75%;
	background-position: center;
	padding: 20px;
	margin-bottom: 30px;
}
.introduce_box{
	display: flex;
	flex-wrap: wrap;
	padding: 20px;
	background-color: rgba(255,255,255,.6);
}
.introduce_img{
	width:200px;
}
.introduce_text{
	width:calc(100% - 200px);
	padding-left:15px;
}
.introduce_text_wrap{
	display: contents;
}
.introduce_text h3{
	font-size: 30px;
    font-family: "Noto Serif JP", serif;
    color: #333;
    font-weight: 900;
}
.introduce_text .introduce_sub{
	font-size: 15px;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.introduce_text .introduce_sub.bottom{
	font-size: 13px;
	line-height: 1.6em;
}

.introduce_link{
	display: flex;
	flex-wrap: wrap;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	padding:5px 8px 0;
	margin-bottom: 10px;
}

.introduce_link a{
	margin-right: 8px;
}

.introduce_link a[href*="apricotmarron.net"]{
	font-size:30px;
	line-height: 1.05em;
}
.introduce_link a[href*="dmm"]{
	font-size:15px;
	line-height: 1em;
}


.introduce_link img{
    margin: auto;
    width: 30px;
    transition: .2s;
}


.article-main p{
	font-size: 17px;
	padding-bottom: 35px;
}

.article-main p a{
	color:#111;
	text-decoration: underline;
}

.article_img{
	margin:auto;
	padding-bottom: 35px;
}
.article_img_sub{
	width:100%;
	text-align:center;
	font-size:15px;
}
.article_img_sub a{
	color:#111;
	text-decoration: underline;
}

.double{
	display:flex;
	flex-wrap:wrap;
}
.double img{width:50%;}

.double_floor{
	display:flex;
	flex-wrap:wrap;
	gap:10px;
}
.double_floor img{width:calc((100% - 10px)/ 2);margin:auto 0 0;}

.article_img.w_80{width:80%;}
.article_img.w_70{width:70%;}
.article_img.w_60{width:60%;}
.article_img.w_50{width:50%;}


.inimg_introduce_link{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	border-top: 1px solid #222;
	border-bottom: 1px solid #222;
	padding:5px 8px 0;
	margin-bottom: 10px;
}

.inimg_introduce_link a{
	margin-right: 8px;
}

.inimg_introduce_link a[href*="suehirotei.com"]{
	font-size:30px;
	line-height: 1.05em;
}
.inimg_introduce_link a[href*="dmm"]{
	font-size:15px;
	line-height: 1em;
}
.inimg_introduce_link img{
    margin: auto;
    width: 30px;
    transition: .2s;
}


.article-main p span.yellow{
	font-weight:600;
	background:linear-gradient(to bottom,rgba(247,190,0,0) 50%,rgba(247,190,0,.5) 50%);
}

.article-main p span.bold{
	font-weight:600;
}


.retern_btn{
	margin: auto;
	max-width: 780px;
	padding: 30px 0;
}
.retern_btn.top{
	display: none;
}

.retern_btn a{
	background-color: rgba(0,0,0,.3);
	padding:5px 10px 3px;
	color:#fff;
	font-size:14px;
	border-radius: 5px;
}





@media screen and (max-width:1200px) {
	main{
		display: flex;
		flex-wrap: wrap;
	}
	h1{
		order:1;
		margin: 0 auto 20px;
	}
	.aside{
		float: none;
		position: relative;
		margin: auto;
		width:100%;
		max-width:780px;
		margin-bottom: 30px;
		order:2;
	}
	.article-writer{
		padding: 0 20px;
	}
	
	.retern{
		display: none;
	}
	.writer_link{
		display: flex;
		flex-wrap:wrap;
		gap:5px;
	}
	.writer_link a {
		width:calc((100% - 10px)/ 3);
	}
	.writer_link a::after{
		right:8px;
	}
	article{
		order: 3;
	}
}



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

}


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



@media screen and (max-width:767px) {
	
	.article-main .introduce{
		margin: auto;
		max-width: 500px;
	}
	.introduce_box{
		
	}
	.introduce_text{
		display: contents;
	}
	.introduce_text h3{
		order: 1;
		width: 100%;
		text-align: center;
		padding-bottom:10px;
	}
	.introduce_img{
		order: 2;
		width: 100%;
		text-align: center;
	}
	.introduce_img img{
		max-width: 200px;
	}
	.introduce_img img[src*="suehiro"]{max-width:none;}
	.introduce_text_wrap{
		display: block;
		order: 3;
	}
	.introduce_sub{
		text-align: center;
	}
	.introduce_sub.bottom{
		text-align: left;
	}
	.introduce_link{
		justify-content: center;
	}
	
	
	
}



@media screen and (max-width:520px) {
	h1{
		margin: 0 auto 20px;
		padding: 10px 20px 20px;
		font-size: 28px;
	}
	
	.writer_name img{
		width:100px;
	}
	.writer_name .writer_name-wrap{
		width:calc(100% - 100px);
		font-size: 20px;
	}
	
	
	.writer_link{
		gap:5px;
	}
	.writer_link a {
		padding: 3px 15px;
		width:100%;
		font-size: 16px;
	}
	.writer_link a::after{
		bottom: 11px;
	}
	
	.article-main .introduce{
		padding: 15px;
	}
	.introduce_box{
		padding: 15px 20px;
	}
	.introduce_img img {
        max-width: 160px;
    }
	
	.double img{width:100%;}
	.double_floor img{width:70%;margin:auto;}
	.article_img.w_50{width:70%;}

	.article_img.w_80.sp_max{width:100%;}
	.article_img.w_70.sp_max{width:100%;}
	.article_img.w_60.sp_max{width:100%;}
	.article_img.w_50.sp_max{width:100%;}
	
	.article-main p{
		font-size:15px;
		padding-bottom: 30px;
	}
	.writer_text p{
		font-size:14px;
	}
	.article_img{padding-bottom:30px;}
	.article_img_sub{
		font-size:13px;
	}
	
	.retern_btn{
		padding: 10px 0 20px;
	}
	.retern_btn.top{
		display: block;
		width: 100%;
		padding:30px 20px 3px;
	}

	
}


@media print {

}