@charset "UTF-8";
/*--------------------------------------------
STATE
---------------------------------------------*/
@media screen and (max-width: 768px){
	.is-pc{
		display : none;
	}
}
@media print,screen and (min-width: 769px){
	.is-sp{
		display : none;
	}
}
/*--------------------------------------------
DATA TEXT
---------------------------------------------*/
[data-before]:before{
	content : attr( data-before );
	white-space : pre;
}
[data-after]:after{
	content : attr( data-after );
	white-space : pre;
}
[data-both]:before{
	content : attr( data-both );
	white-space : pre;
}
[data-both]:after{
	content : attr( data-both );
	white-space : pre;
}
@media screen and (max-width: 768px){
	[data-sp-after]:after{
		content : attr( data-sp-after );
		white-space : pre;
	}
}
@media screen and (max-width: 768px){
	[data-sp-befpre]:befpre{
		content : attr( data-sp-before );
		white-space : pre;
	}
}
@media print,screen and (min-width: 769px){
	[data-pc-after]:after{
		content : attr( data-pc-after );
		white-pcace : pre;
	}
}
@media print,screen and (min-width: 769px){
	[data-pc-befpre]:befpre{
		content : attr( data-pc-before );
		white-space : pre;
	}
}
:root{
	--body : #423604;
	--link : #423604;
	--primary : #5da126;
}
/*--------------------------------------------
IMG
---------------------------------------------*/
img.width{
	width : 100%;
	height : auto;
}
/*--------------------------------------------
CATEGORIES
---------------------------------------------*/
.tag-categories{
	display : flex;
	flex-wrap : wrap;
}
.tag-categories li{
	color : #fff;
	letter-spacing : .1em;
	text-indent : .1em;
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
}
@media screen and (max-width: 768px){
	.tag-categories li{
		height : calc( 40 * 100vw / 768 );
		border-radius : calc( 20 * 100vw / 768 );
		font-size : 2.2rem;
		padding-left : calc( 23 * 100vw / 768 );
		padding-right : calc( 23 * 100vw / 768 );
	}
}
/*--------------------------------------------
LINK
---------------------------------------------*/
.link01{
	display : flex;
	align-items : center;
	justify-content : center;
	text-align : center;
	text-indent : .1em;
	letter-spacing : .1em;
	background-color : #ffd00e;
	margin-left : auto;
	margin-right : auto;
	position : relative;
}
.link01:after{
	content : "";
	background-repeat : no-repeat;
	background-size : contain;
	background-position : 0 0;
	position : absolute;
	pointer-events : none;
}
@media screen and (max-width: 768px){
	.link01{
		width : calc( 400 * 100vw / 768 );
		height : calc( 80 * 100vw / 768 );
		font-size : calc( 2.6rem * 100vw / 768 );
	}
	.link01:after{
		background-image : url("../images/ui/parts/arrow01_sp.png");
		width : calc( 122 * 100vw / 768 );
		height : calc( 23 * 100vw / 768 );
		top : calc( 35 * 100vw / 768 );
		left : calc( 291 * 100vw / 768 );
	}
}
@media print,screen and (min-width: 769px){
	.link01{
		font-size : calc( 2rem * 100vw / 768 );
	}
	.link01:after{
		background-image : url("../images/ui/parts/arrow01_pc.png");
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	.link01{
		width : calc( 200 * 100vw / 1160 );
		height : calc( 50 * 100vw / 1160 );
	}
	.link01:after{
		width : calc( 79 * 100% / 200 );
		height : calc( 11 * 100vw / 1160 );
		top : calc( 22 * 100vw / 1160 );
		left : calc( 139 * 100% / 200 );
	}
}
@media print,screen and (min-width: 1486px){
	.link01{
		width : 200px;
		height : 50px;
	}
	.link01:after{
		width : 79px;
		height : 11px;
		top : 22px;
		left : 139px;
	}
}
/*--------------------------------------------
EDITOR
---------------------------------------------*/
.editor h1{
	text-align : center;
	margin-left : auto;
	margin-right : auto;
	font-weight : 700;
	letter-spacing : .1em;
	text-indent : .1em;
}
.editor h2{
	font-weight : 700;
	letter-spacing : .1em;
	border-bottom-color : currentColor;
	border-bottom-style : solid;
}
.editor h3{
	border-left-style : solid;
	border-left-color : #ffd00e;
	font-weight : 700;
	letter-spacing : .1em;
}
.editor p{
	letter-spacing : .1em;
}
.editor a {
    text-decoration: underline;
    color: #6b613a;
}
    .editor a:hover{
        opacity: .8;
        text-decoration: none;
    }
@media screen and (max-width: 768px){
	.editor h2{
	}
	.editor h3{
	}
}
@media screen and (max-width: 768px){
	.editor h1{
		border-bottom-width : calc( 4 * 100vw / 768 );
		padding-bottom : calc( ( 7 - 5.1 ) * 100vw / 768 );
		font-size : 3.4rem;
		line-height : 1.3;
	}
	.editor h1:after{
		content : "";
		display : block;
		width : calc( 300 * 100% / 648 );
		height : calc( 8 * 100vw / 768 );
		background-color : #ffd00e;
		margin-left : auto;
		margin-right : auto;
		margin-top : calc( ( 14 - 5.1 ) * 100vw / 768 );
	}
	.editor h2{
		font-size : 3rem;
		line-height : 1.3333;
		border-bottom-width : calc( 3 * 100vw / 768 );
		padding-bottom : calc( ( 12 - 5 ) * 100vw / 768 );
	}
	.editor h3{
		font-size : 2.8rem;
		line-height : 1.4286;
		border-left-width : calc( 8 * 100vw / 768 );
		padding-left : calc( 8 * 100% / 648 );
	}
	.editor p{
		font-size : 2.6rem;
		line-height : 1.5;
        word-break: break-all;
	}
	.editor h1 + p{
		margin-top : calc( 30 * 100vw / 768 );
	}
	.editor h2 + p{
		margin-top : calc( 15 * 100vw / 768 );
	}
	.editor h3 + p{
		margin-top : calc( 10 * 100vw / 768 );
	}
	.editor p + h2{
		margin-top : calc( 10 * 100vw / 768 );
	}
	.editor p + h3{
		margin-top : calc( 10 * 100vw / 768 );
	}
	.editor img{
        max-width: 100%;
	}
    
}
@media print,screen and (min-width: 769px){
	.editor h1{
		display : table;
		font-size : 3.4rem;
		line-height : 1.3;
		border-bottom-color : #ffd00e;
		border-bottom-style : solid;
	}
	.editor h2{
		font-size : 2.8rem;
		line-height : 1.3;
	}
	.editor h3{
		font-size : 2.2rem;
		line-height : 1.3;
	}
	.editor p{
		font-size : 1.8rem;
		line-height : 1.5;
	}
}
@media screen and (min-width: 769px) and (max-width:1485px){
	.editor h1{
		border-bottom-width : calc( 4 * 100vw / 1160 );
		padding-bottom : calc( 10 * 100vw / 1160 );
		margin-bottom : calc( 20 * 100vw / 1160 );
	}
	.editor h2{
		border-bottom-width : calc( 2 * 100vw / 1160 );
		padding-bottom : calc( 10 * 100vw / 1160 );
	}
	.editor h3{
		border-left-width : calc( 8 * 100% / 1160 );
		padding-left : calc( 6 * 100% / 1160 );
        margin-bottom: 10px;
	}
	.editor p + h1{
		margin-top : 30px;
	}
	.editor p + h2{
		margin-top : 20px;
	}
}
@media print,screen and (min-width: 1486px){
	.editor h1{
		border-bottom-width : 4px;
		padding-bottom : 10px;
        margin-bottom: 20px;
	}
	.editor h2{
		border-bottom-width : 2px;
		padding-bottom : 10px;
	}
	.editor h3{
		border-left-width : 8px;
		padding-left : 6px;
        margin-bottom: 10px;
	}
	.editor p + h1{
		margin-top : 30px;
	}
	.editor p + h2{
		margin-top : 20px;
	}
}