@charset "UTF-8";
/* CSS Document */

header{
	background-color: #222;
	position: fixed;
	width: 100%;
	z-index: 20;
}

.header_box{
	max-width: 1200px;
	margin: auto;
	text-align: left;
	padding:10px 20px;
	display: flex;
	flex-wrap: wrap;
}
@media only screen and (max-width: 520px) {
	.header_box{
		padding:5px 20px;
	}
}
.header_box a.img{
	line-height: 0;
}

.header_box img{
	height:20px;
	width:auto;
}
.header_box p{
	color:#fff;
	margin: auto 10px;
}

.article_contents{
	margin: auto;
	max-width: 1200px;
	width:calc(100% - 40px);
	padding:40px 20px 0;
	display: flex;
	user-select:none;
}
@media only screen and (max-width: 520px) {
	.article_contents {
		width: calc(100% - 30px);
    	padding: 40px 15px 0;
	}
}
@media only screen and (max-width: 359px) {
	.article_contents {
		width: calc(100% - 20px);
    	padding: 30px 10px 0;
	}
}

.article_contents main{
	background-color:#fff;
	width:75%;
	margin: 30px 0 80px;
	padding:50px 0;
}
@media only screen and (max-width: 1100px) {
	.article_contents main{
		width:100%;
	}
}
@media only screen and (max-width: 520px) {
	.article_contents main{
		padding:30px 0;
	}
}

.article_contents main h1{
	padding:20px 20px 0;
	font-size:36px;
	color:#333;
}
@media only screen and (max-width: 520px) {
	.article_contents main h1{
		font-size:30px;
		line-height: 1.2em;
	}
}

.h1_sub{
	font-size:18px;
	padding:0 20px;
}
.h1_sub a{
	text-decoration: underline;
	color:#222;
}
@media only screen and (max-width: 520px) {
.h1_sub{
	font-size:15px;
	padding:5px 20px;
	}
}

.article_nav{
	padding:20px;
	width:80%;
	margin: auto;
	border-bottom: 1px solid #ddd;
}
.article_nav a{
	display: flex;
	justify-content: center;
}
.article_nav a img{
	width:40px;
}
.article_nav a p{
	display: flex;
	padding:0 10px;
}
.article_nav a p span{
	display: block;
	margin: auto;
	color:#444;
	font-weight: 600;
}

.nav-open{
	padding: 15px 10px 10px;
	font-size: 18px;
	color:#333;
	font-weight: 600;
	position: relative;
	cursor: pointer;
}
.nav-open::before{/* 閉じている時 */
	content: "";
	position: absolute;
	right: 20px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width: 10px;
    height: 10px;
    display: block;
    border-left: 1px solid #464646;
    border-top: 1px solid #464646;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    transition: -webkit-transform .3s;
    transition: transform .3s;
    transition: transform .3s, -webkit-transform .3s;
}
.nav-open.active::before{/* 開いている時 */
	content: "";
	-webkit-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.nav_box{display: none;}
#tarot .nav_box{display:block;}


.article_contents main ul{
	list-style-type: none;
}
.article_contents main ul li{
	padding: 5px 20px;
}

.article_contents main .article_index{
	list-style-type: none;
	background-color:#eee;
	text-align: left;
	width:75%;
	margin:20px auto 0;
	padding:20px 20px 25px;
}
@media only screen and (max-width: 767px) {
	.article_contents main .article_index{
		width:80%;
	}
}
@media only screen and (max-width: 520px) {
	.article_contents main .article_index{
		padding:10px 20px 15px;
	}
}

.article_contents main ul a{
	text-decoration: underline;
	color:#444;
	font-size: 16px;
	letter-spacing: 0.02em;
}
@media only screen and (max-width: 520px) {
	.article_contents main ul a{
		font-size: 14px;
	}
}
.article_contents main .article_index > ul > li > a{
	font-weight:600;
}

.article_contents article{
	padding:20px 0;
	width:80%;
	margin: auto;
}

@media only screen and (max-width: 767px) {
	.article_contents article{
		width:86%;
	}
}

.article_contents section{
	padding-top:40px;
}
@media only screen and (max-width: 520px) {
	.article_contents article{
		width:88%;
	}
	.article_contents section{
		padding-top:30px;
	}
}

.article_contents section h2{
	text-align: left;
	font-size: 24px;
	font-weight:600;
	color:#333;
	padding:0 10px;
	border-left:5px #333 solid;
	margin: 20px auto;
}
@media only screen and (max-width: 520px) {
	.article_contents section h2{
		font-size:20px;
	}
}
.article_contents section h3{
	position: relative;
	text-align: left;
	font-size: 20px;
	font-weight:600;
	color:#333;
	padding-left:68px;
	margin: 20px auto 10px;
}
.h3_index{
	padding-bottom: 40px;
}
.h3_box{
	padding:40px 0 ;
}
@media only screen and (max-width: 520px) {
	.h3_index {padding-bottom: 25px;}
	.h3_box{padding:25px 0 ;}
}

.article_contents section h3::before{
	content:"";
	top:0;
	left:0;
	position: absolute;
	width:58px;
	height:50%;
	border-bottom:2px #333 solid;
}

@media only screen and (max-width: 520px) {
	.article_contents section h3{
		font-size: 18px;
		padding-left:38px;
	}
	.article_contents section h3::before{
		width:28px;
	}
}


.article_contents section p{
	text-align: left;
	font-size:16px;
	line-height: 1.7em;
	padding-bottom:25px;
}

@media only screen and (max-width: 520px) {
	.article_contents section p{
		font-size:14px;
	}
}
.article_contents section a{
	color:#960000;
	text-decoration: underline;
	transition: .2s;
}
@media only screen and (min-width: 521px) {
	.article_contents section a:hover{
		color:#333;
	}
}

.article_contents section p .weight{
	font-weight: 600;
}
.article_img{
	padding: 10px 0 20px;
}
.article_img img{
	width:100%;
	max-width:600px;
}

.article_contents nav{
	width:25%;
	margin:0 0 auto;
	padding-top:50px;
	top: 0;
	position: sticky;
}
@media only screen and (max-width: 1100px) {
	.article_contents nav{
		display: none;
	}
}

.article_contents nav .nav_bottom_img{
	max-width:170px;margin-top:20px;
}
@media only screen and (max-height:770px) {
	.article_contents nav .nav_bottom_img{
		display: none;
	}
}



/*----TSUKINAMI projectとは----*/
.novel_box{
	display: flex;
	flex-wrap: wrap;
}

.article_contents section .novel_box a{
	display: block;
	width:48%;
	margin:0 auto 20px;
	line-height: 0;
	text-decoration: none;
}
.novel_box a img{
	width: 100%;
}
.novel_box a span{
	display: block;
	line-height: 1.8em;
	background-color: #111;
	color:#fff;
	text-decoration: none;
	padding:0 10px;
}

@media only screen and (max-width: 767px) {
	.novel_box{
		display: block;
	}
	.article_contents section .novel_box a{
		width:80%;
		min-width: 400px;
	}
	.novel_box a span.tb_b {
		font-size: 13px;
		line-height: 1.2em;
		padding-bottom:10px;
	}
}
@media only screen and (max-width: 520px) {
	.article_contents section .novel_box a{
		width:100%;
		min-width: auto;
	}
}

.nav-open.open_line{
	text-align: center;
	margin: auto;
	background-color: #222;
	color:#fff;
	font-size: 15px;
	padding:10px 0 10px;
	border-bottom:2px #fff solid;
}
.nav-open.open_line::before{/* 閉じている時 */
    border-left: 1px solid #fff;
    border-top: 1px solid #fff;
}


.nav_box.open_box{
	padding: 10px 15px 15px;
}
.nav_box.open_box p{
	font-size: 14px;
	padding-bottom: 15px;
}
.nav_box.open_box img{
	width: 100%;
}
.nav_box.open_box p a{
	font-size: 14px;
}


/*======占い記事======*/

.choices{
	background-color: #eee;
	margin-top: 80px;
	transition: .2s;
}
.choices.active{
	margin-top: 10px;
}

.article_contents section.choices_detali{
	padding: 10px 0 40px;
}

.affiliate{
	padding:5px 0 15px;
	color:#999;
	font-size:11px;
}

time{
	color:#777;
	font-size:14px;
	letter-spacing: 0.04em;
}

article img{
	width:100%;
}

.reader{
	margin:0 auto 20px;
}

.reader.single{
	max-width:500px;
}

.reader a{
	line-height: 0;
}
.reader h2{
	background-color: #111;
	color:#fff;
	font-size:18px;
	padding:5px 0;
	letter-spacing: 0.06em;
}

.reader_cmt{
	margin:0 auto 20px;
}

.reader_cmt p{
	text-align: left;
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 1.7em;
	letter-spacing: 0.04em;
}
.reader_cmt a{
	color:#111;
	font-weight: bold;
	text-decoration: underline;
}
.reader_cmt p .bold{
	font-weight:bold;
}


.reader_cmt.two{
	display: flex;
	flex-wrap: wrap;
}

.reader_cmt.two .name{
	display: inline-block;
	width:50px;
	font-size: 12px;
	text-align: center;
	margin:4px 10px auto 0;
	border-radius: 5px;
	padding:2px 0;
	letter-spacing: -.05em;
}
.reader_cmt.two .name.len{background-color:#1f0652;color:#fff;}
.reader_cmt.two .name.shino{background-color:#f9d6d7;}
.reader_cmt.two .name.haku{background-color:#bfdace;}
.reader_cmt.two .name.tsutsuji{background-color:#be006c;color:#fff;}

.reader_cmt.two p{
	width:calc(100% - 60px);
}

@media only screen and (max-width: 520px) {
	.reader_cmt.two .name{
		width:40px;
		font-size: 10px;
	}
	.reader_cmt.two p{
		width:calc(100% - 50px);
	}
}




.fortune_index{
	background-color: #eee;
	padding: 30px 30px 15px;
	margin-bottom: 20px;
}
.fortune_index h2{
	font-size: 16px;
	margin-bottom: 18px;
	line-height: 1.7em;
	letter-spacing: 0.04em;
}
.article_contents .fortune_index p{
	text-align: left;
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 1.7em;
	letter-spacing: 0.04em;
	padding-bottom: 0;
}
.fortune_index a.prf{
	position: relative;
	display: inline-block;
	border:#111 solid 1px;
	color:#111;
	padding:3px 32px 3px 20px;
	margin-bottom: 20px;
	transition: .2s;
}
.fortune_index a.prf::after {
    content: "";
    position: absolute;
    top: 9px;
    right: 20px;
    width: 6px;
    height: 6px;
    border-bottom: #111 1px solid;
    border-right: #111 1px solid;
    transform: rotate(-45deg);
    transition: .2s;
}
@media only screen and (min-width: 768px) {
	.fortune_index a.prf:hover{
		border:transparent solid 1px;
		background-color: rgba(0,0,0,.8);
		color:#fff;
	}
	.fortune_index a.prf:hover::after {
		right: 10px;
		border-bottom: #fff 1px solid;
    	border-right: #fff 1px solid;
	}
}
.fortune_index p .bold{
	font-weight:bold;
}
.fortune_index ul{
	padding-bottom: 15px;
}
.fortune_index li{
	text-align: left;
	display: flex;
	flex-wrap: wrap;
}
.fortune_index li span:nth-child(1){
	padding-right: 10px;
}

@media only screen and (max-width: 520px) {
	.fortune_index{
		padding: 30px 10px 15px;
	}
	.choices{
		margin-top: 40px;
	}
	.reader h2 {
		font-size: 16px;
	}
	.fortune_index p {
		padding:0 10px;
		text-align: justify;
	}
	.article_contents .fortune_index ul li{
		padding: 5px;
	}
	.fortune_index li span{
		
	}.fortune_index li span b{
		display: block;
		margin: auto;
		font-weight:normal;
	}
	.fortune_index li span:nth-child(1){
		display: flex;
		padding:2px 0;
		margin-right: 10px;
		background-color: rgba(0,0,0,.78);
		color:#fff;
		text-align: center;
		width:25px;
		border-radius: 5px;
	}
	.fortune_index li span:nth-child(2){
		display: block;
		width:calc(100% - 35px);
	}
}

.section_box{
	margin: 50px 0 0;
}

.section_box.two{
	display: flex;
	flex-wrap: wrap;
}
.section_box.two h2{
	width: 100%;
}

.section_box.two .name{
	display: inline-block;
	width:50px;
	font-size: 12px;
	text-align: center;
	margin:4px 10px auto 0;
	border-radius: 5px;
	padding:2px 0;
	letter-spacing: -.05em;
}
.section_box.two .name.len{background-color:#1f0652;color:#fff;}
.section_box.two .name.shino{background-color:#f9d6d7;}
.section_box.two .name.haku{background-color:#bfdace;}
.section_box.two .name.tsutsuji{background-color:#be006c;color:#fff;}

.section_box.two p{
	width:calc(100% - 60px);
}

@media only screen and (max-width: 520px) {
	.section_box.two .name{
		width:40px;
		font-size: 10px;
	}
	.section_box.two p{
		width:calc(100% - 50px);
	}
}

.choices_box{
	display: flex;
	flex-wrap: wrap;
	margin-bottom:20px;
}
.choices_box h3{
	color:#fff;
	width:100%;
	text-align: center;
	padding:2px 0;
	line-height: 1.4em;
}
.choices_box > a{
	line-height: 0;
	background-color: rgba(0,0,0,.85);
}

.choices_box.three > a{
	width:calc((100% - 4px)/ 3);
}
.choices_box.three > a:nth-child(2){
	margin: 0 2px;
}

.choices_box.four > a{
	width:calc((100% - 6px) / 4);
}
.choices_box.four > a:nth-child(1),
.choices_box.four > a:nth-child(2),
.choices_box.four > a:nth-child(3){
	margin: 0 2px 0 0;
}

.choices_box.year > a{
	width:calc((100% - 6px) / 4);
}
.choices_box.year > a:nth-child(1),
.choices_box.year > a:nth-child(2),
.choices_box.year > a:nth-child(3){
	margin: 0 2px 0 0;
}

.choices_box > a span{
	display: block;
}


@media only screen and (max-width: 520px) {
	.choices_box {
		width:84%;
		margin: auto;
	}
	
	.choices_box.year{
		width: 100%;
	}
	
	.choices_box h3 {
		padding:5px 0;
	}
	.choices_box > a{
		margin-bottom: 10px;
	}
	.choices_box > a span{
		position: relative;
		overflow: hidden;
		width:100%;
		height:auto;
		aspect-ratio:2/1;
	}
	.choices_box > a span img{
		position: absolute;
		top:50%;
		left:0;
		transform: translateY(-50%);
	}
	.choices_box.three > a,
	.choices_box.four > a{
		width:100%;
	}
	.choices_box.year > a{
		width:calc((100% - 4px) / 2);
	}
	
	.choices_box.three > a:nth-child(2),
	.choices_box.four > a:nth-child(1),
	.choices_box.four > a:nth-child(2),
	.choices_box.four > a:nth-child(3){
		margin: 0 0 10px;
	}
	
	.choices_box.year > a:nth-child(odd){
		margin:0 1px 2px 0;		
	}
	.choices_box.year > a:nth-child(even){
		margin:0 0 2px 1px;	
	}
	
}


.icon{
	text-align: center;
	padding: 50px 0 60px;
}
.icon img{
	width:30px;
}
@media only screen and (max-width: 520px) {
	.icon{
		padding: 20px 0 30px;
	}
}

/*=========================*/

.card{
	padding-top: 30px;
}
.card h2{
	font-size: 16px;
	line-height: 1.7em;
	letter-spacing: 0.04em;
}
.card_box{
	margin: 20px 0 40px;
	border-radius: 10px;
	box-shadow: 0 0 6px rgba(0,0,0,.3);
	padding-bottom: 4px;
}

.card_title{
	padding:5px 0;
	background-color: rgba(0,0,0,.9);
	color:#fff;
	border-radius: 10px 10px 0 0;
}
.card_box img{
	width: calc(100%/3);
}
.card_box a.buy{
	display: block;
    font-size: 14px;
    font-weight: 500;
    line-height: 36px;
    padding: 0 12px;
    border-radius: 18px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin: 10px;
}

.card_box a.buy.rakuten{
	background-color: #bf0000;
	color: #fff;
}

a span.card_img{
	width: calc(100%/3);
	background-color: #fff;
	display: inline-block;
	aspect-ratio:1/1;
}
a span.card_img img{
	height:100%;
	width:auto;
}

@media only screen and (max-width: 520px) {
	.card_box {
		margin: 20px 0 20px;
	}
	a span.card_img,
	.card_box img{
		width: calc(100%/2);
	}
}

/*=========================*/

.item{
	margin:15px 0 30px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
}

.item_box{
	display: inline-block;
	width:32%;
	margin:auto auto 0;
}

.item_title{
	display: none;
}

.item_box a.link{
	display: block;
	width: 100%;
	height:auto;
	aspect-ratio:1/1;
}
.item_box a.link img{
	height:100%;
	width: auto;
}
.item_box a.link img.beside{
	height:auto;
	width: 100%;
}

.item_box a.buy{
	display: block;
    font-size: 13px;
    font-weight: 500;
    line-height: 32px;
    padding: 0 10px;
    border-radius: 18px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    margin:0 10px 10px;
	transition: .2s;
}
@media only screen and (min-width: 521px) {
	.item_box a.buy:hover{
		border-radius: 2px;
	}
}

.item_box a.buy.rakuten{
	background-color: #bf0000;
	color: #fff;
}

.menu_intro{
	background-color: #eee;
	width: 100%;
	padding:12px 15px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.article_contents section .menu_intro p{
	font-size: 14px;
	line-height: 2em;
	padding-bottom:0;
}

.bottom_profile{
	width: 100%;
	padding: 30px 0 0;
}

.article_contents section .bottom_profile a,
.bottom_profile a{
    position: relative;
    display: inline-block;
    color: #111;
	background-color: #fff;
	box-shadow: 0 0 7px rgba(0,0,0,.4);
	font-size: 17px;
	text-decoration: none;
    padding: 3px 32px 3px 20px;
    margin:auto;
    transition: .2s;
}
.article_contents section .bottom_profile a::after,
.bottom_profile a::after{
    content: "";
    position: absolute;
    top: 11px;
    right: 18px;
    width: 6px;
    height: 6px;
    border-bottom: #111 1px solid;
    border-right: #111 1px solid;
    transform: rotate(-45deg);
    transition: .2s;
}
@media only screen and (min-width: 768px) {
	.article_contents section .bottom_profile a:hover,
	.bottom_profile a:hover{
		background-color: rgba(0,0,0,.8);
		color:#fff;
		box-shadow: 0 0 7px rgba(0,0,0,0);
	}
	.article_contents section .bottom_profile a:hover::after,
	.bottom_profile a:hover::after{
		right: 10px;
		border-bottom: #fff 1px solid;
    	border-right: #fff 1px solid;
	}
}

@media only screen and (max-width: 520px) {
	.item_box{
		width:100%;
		display: flex;
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	.item_box:nth-child(3){
		display: none;
	}
	.item_box a.link{
		width:53%;
	}
	.item_box span{
		display: block;
		width: 43%;
		margin-left:4%;
	}
	.item_title{
		display: block;
		text-align: left;
		padding-bottom: 10px;
		font-size: 12px;
	}
	.item_box a.buy{
		margin:0 0 auto;
		padding: 0;
	}
	.menu_intro{
		padding: 15px;
	}
	.section_box.two .menu_intro .name {
		margin-top:0;
	}
	.article_contents section .menu_intro p{
		font-size: 13px;
		line-height: 1.7em;
	}
	
}





.copy{
	margin-top: 25px;
}

.copy h4{
	padding:5px 0 10px;
}
.article_contents section .copy p{
	font-size: 14px;
	line-height: 1.2em;
	text-align: center;
}
@media only screen and (max-width: 520px) {
	.article_contents section .copy p{
		font-size: 12px;
	}
}

.shadow{
	line-height: 0;
}
.shadow img{
	border-radius: 8px;
	box-shadow: 0 0 5px rgba(0,0,0,.5);
	transition: .2s;
}
@media only screen and (min-width: 521px) {
	.shadow img:hover{
		border-radius: 0;
		box-shadow: 0 0 7px rgba(0,0,0,0);
	}

}

.tarot{
	width: 100%;
	margin:15px 0 30px;
}
.article_contents section .tarot p{
	width:100%;
	font-size: 12px;
	line-height: 1.2em;
	text-align: center;
}
.tarot.large img{
	max-width:480px;
}
.tarot.one img{
	max-width:400px;
}


.marker{
	background:linear-gradient(transparent 60%, #ff6 60%);
}


/*----------タロット解説------------*/


.header_box_links{
	display:flex;
	flex-wrap:wrap;
	padding-left: 30px;
}

.header_box_links a{
	color:#B09554;
	font-weight:600;
	font-size:12px;
	margin:auto 0;
}
.header_box_links a::after{
	content:"｜";
	padding:0 5px;
}
.header_box_links a:last-child::after{
	content:none;
}

@media only screen and (max-width: 520px) {
	.header_box_links{padding:2px 0 1px 29px;}
	.header_box_links a{font-size:11px;letter-spacing:-0.05em;}
	.header_box_links a::after{padding:0 4px;}
}
@media only screen and (max-width: 359px) {
	.header_box_links a:last-child{display:none;}
	.header_box_links a:nth-last-child(2)::after{content:none;}
}


.tarot_article{
	position: relative;
}
.tarot_article::before,.tarot_article::after{
	content:"";
	position:absolute;
	display:block;
	width:13%;
	height:auto;
	aspect-ratio:1/1;
	top:20px;
	background-repeat:no-repeat;
	background-size:contain;
	background-position:left top;
	z-index: 3;
}
.tarot_article::before{background-image: url("../tarot/img/tarot_topfigure.webp");left:2%;}
.tarot_article::after{background-image: url("../tarot/img/tarot_topfigure.webp");right:2%;transform: scale(-1,1);}

.tarot_lineimg{
	padding-top:20px;
	width:40%;
	margin: auto;
}

@media only screen and (max-width: 520px) {
	.tarot_article::before,.tarot_article::after{
		top:10px;width:20%;
	}
	.tarot_lineimg{width:60%;padding-top:10px;}
}


.article_mv{
	width:100%;
}
.article_mv img{width:100%;}

.article_mv_link{
	padding:12px 0 0;
	margin-bottom:50px;
}
.article_mv_link a{
	display: inline-block;
	position: relative;
    border:#960000 solid 2px;
	background-color:#960000;
	color: #fff;
	font-weight:600;
	font-size:20px;
	padding:2px 45px 2px 35px;
	box-shadow: 0 0 5px rgba(0, 0, 0, .5);
	border-radius:30px;
	transition: .2s;
}
.article_mv_link a::after{
    content: "";
    position: absolute;
    top:10px;
    right: 20px;
    width: 11px;
    height: 11px;
    border-bottom: #fff 2px solid;
    border-right: #fff 2px solid;
    transform: rotate(-45deg);
    transition: .2s;
}
@media only screen and (min-width: 768px) {
	.article_mv_link a:hover{
		background-color:rgba(255,255,255,0);
		color:#960000;
		box-shadow: 0 0 5px rgba(0,0,0,0);
	}
	.article_mv_link a:hover::after{
		border-color:#960000;
		right:15px;
	}
}


@media only screen and (max-width: 520px) {
	.article_mv{
		aspect-ratio:21 / 13;
		height:auto;
		overflow: hidden;
		position: relative;
	}
	.article_mv img{
		width:118%;
		position:absolute;
		top:50%;
		left:50%;
		transform:translateX(-50%) translateY(-50%);
	}
	.article_mv_link{margin-bottom:25px;padding:10px 0 0;}
	
	.article_mv_link a{
		transform:scale(75%);
	}
	
}

.article_ad{
	width: 80%;
    margin:0 auto;
    padding: 15px 0;
}
.article_ad_title{font-size:18px;font-weight:600;color:#222;padding-bottom:8px;}
.article_ad img{width:100%;}

@media only screen and (max-width: 520px) {
	.article_ad{width:90%;}
	.article_ad_title {font-size: 15px;padding-bottom: 5px;}
}

.ex_cmt{
	display:flex;
	flex-wrap:wrap;
	gap:0 20px;
	margin-bottom: 15px;
}
.ex_cmt > div:nth-child(1){
	position:relative;
	width:90px;
	height:auto;
	aspect-ratio:1/1;
	line-height:0;
	background-repeat:no-repeat;
	background-position:center top;
	background-size:100%;
	border-radius:50%;
	margin:0 0 auto;
}
.ex_cmt > div:nth-child(1)::after{
	content:"";
	position:absolute;
	transform:translateX(-50%);
	bottom:-8px;
	left:50%;
	font-size:11px;
}

.ex_cmt.shino > div:nth-child(1){background-image:url("../tarot/img/icon_shino.png");}
.ex_cmt.shino > div:nth-child(1)::after{content:"シノ";}
.ex_cmt.len > div:nth-child(1){background-image:url("../tarot/img/icon_len.png");}
.ex_cmt.len > div:nth-child(1)::after{content:"レン";}
.ex_cmt.haku > div:nth-child(1){background-image:url("../tarot/img/icon_haku.png");}
.ex_cmt.haku > div:nth-child(1)::after{content:"ハク";}
.ex_cmt.tsutsuji > div:nth-child(1){background-image:url("../tarot/img/icon_tsutsuji.png");}
.ex_cmt.tsutsuji > div:nth-child(1)::after{content:"ツツジ";}

.ex_cmt > div:nth-child(2){
	position:relative;
	box-sizing: border-box;
	max-width:calc(90% - 110px);
	margin:10px 0 auto;
	padding:20px;
	background-color:#eee;
	border-radius:5px;
	text-align: left;
}
.ex_cmt > div:nth-child(2)::after{
	content:"";
	position:absolute;
	top:8px;
	left: -10px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 10px 16px 10px 0;
	border-color: rgba(255,255,255,0) #eee rgba(255,255,255,0) rgba(255,255,255,0);
}
.ex_cmt > div:nth-child(2) a{
	font-weight:600;
}

.ex_cmt.ltr{
	flex-direction:row-reverse;
}
.ex_cmt.ltr > div:nth-child(2)::after{
	left:auto;
	right: -10px;
	transform: scale(-1,1);
}


@media only screen and (max-width: 520px) {
	.ex_cmt{gap:0 10px;margin-bottom:15px;}
	.ex_cmt > div:nth-child(1){
		width:60px;
		background-size:115%;
	}
	.ex_cmt > div:nth-child(2){
		max-width:calc(100% - 70px);
		margin:5px 0 auto;
		padding:15px;
		font-size:85%;
	}
	.ex_cmt > div:nth-child(1)::after{
		font-size:9px;
	}
}



.tarot_index_box{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}

.tarot_index_box > div:nth-child(1){width:40%;line-height:0;}
.tarot_index_box > div:nth-child(2){width:calc(60% - 20px);padding:20px 0;}

.tarot_index_title{
	position:relative;
	padding:5px 20px;
}
.tarot_index_title > span{
	display:block;
	line-height:1.3em;
}
.tarot_index_title > span:nth-child(1){
	font-size:28px;
	font-weight:600;
}
.tarot_index_title > span:nth-child(2){}

.tarot_index_title::before,.tarot_index_title::after{
	box-sizing: border-box;
	content:"";
	position:absolute;
	width:12px;
	height:100%;
	border:4px solid #333;
	top:0;
}
.tarot_index_title::before{
	left:0;
	border-right:none;
}
.tarot_index_title::after{
	right:0;
	border-left:none;
}

.tarot_index_key{
	display:flex;
	flex-wrap:wrap;
	padding:20px 0 0;
	gap:18px 15px;
}

.tarot_index_key > div:nth-child(odd){
	width:100px;
	border:1px solid #111;
	color:#111;
	padding:2px 0;
	border-radius:30px;
	margin-bottom:auto;
}
.tarot_index_key > div:nth-child(even){
	width:calc(100% - 117px);
	text-align:left;
	font-size:110%;
}

.key_list span{display:inline-block;}
.key_list span::after{
	content:"/";
	padding:0 5px;
}
.key_list span:last-child::after{
	content:none;
}


@media only screen and (max-width: 520px) {
	.tarot_index_box > div:nth-child(1){width:50%;margin:auto;}
	.tarot_index_box > div:nth-child(2){width:100%;padding:0;}
	.tarot_index_title > span:nth-child(1){font-size:24px;}
	.tarot_index_key > div:nth-child(odd){font-size:12px;margin:auto;width:94%;background-color:#444;color:#fff;border-color:#444;}
	.tarot_index_key{gap:4px;}
	.tarot_index_key > div:nth-child(even){width:100%;padding-bottom:13px;text-align:center;font-size:100%;}
}


.tarot_position_box{
	display:flex;
	flex-wrap:wrap;
	gap:20px;
}
.tarot_position_box > div:nth-child(1){width:30%;}
.tarot_position_box > div:nth-child(2){width:calc(70% - 20px);padding:20px 0;}

.tarot_position_key{
}
.tarot_position_key > div:nth-child(odd) {
    width: 100px;
    border: 1px solid #111;
    color: #111;
    padding: 2px 0;
    border-radius: 30px;
    margin-bottom: auto;
}
.tarot_position_key > div:nth-child(even) {
	padding-top:4px;
    text-align: left;
	font-weight:600;
    font-size: 110%;
}

.tarot_position_box > div:nth-child(2) ul{text-align:left;padding-top:20px;}
.tarot_position_box > div:nth-child(2) ul li{
	list-style:circle;
	list-style-position:inside;
	font-size:110%;
	padding:5px 10px;
}

.tarot_position_link{
	display: flex;
	flex-wrap: wrap;
	padding:15px 0 0;
	font-weight:600;
}
.article_contents section .tarot_position_link a{color:#b09552;margin-left:2px;}
.tarot_position_link img{width:18px;margin:auto 5px auto 0;}

#reverse .tarot_position_box > div:nth-child(1) img{transform:rotate(180deg);}

@media only screen and (max-width: 520px) {
	.tarot_position_box{gap:0;}
	.tarot_position_box > div:nth-child(1){width:50%;margin:auto;}
	.tarot_position_box > div:nth-child(2){width:100%;padding:15px 0 0;}
	.tarot_position_box > div:nth-child(2) ul{padding-top:15px;}
	.tarot_position_box > div:nth-child(2) ul li{padding:3px 0;font-size:100%;}
	
	.tarot_position_key > div:nth-child(even){padding:6px 4px 0;font-size:100%;}
	.tarot_position_link{padding-bottom:20px;}
}


.tarot_table_box{
	display:grid;
	grid-template-columns:120px 1fr;
}
.tarot_table_box > div{
	padding:20px 15px;
	border-bottom:1px solid #999;
}

.tarot_table_box > div:nth-child(odd){
	display:flex;
	flex-wrap:wrap;
	border-right:1px solid #999;
}
.tarot_table_box > div:nth-child(odd) span{
	margin: auto;
}
.tarot_table_box > div:nth-child(even){
	text-align:left;
}
.tarot_table_box > div:nth-child(even) p{
	font-size: 15px;
	padding-bottom:15px;
}
.tarot_table_box > div:nth-child(even) p:last-child{
	padding-bottom:0;
}

.tarot_table_box > div:nth-last-child(-n+2){
	border-bottom:none;
}

@media only screen and (max-width: 520px) {
	.tarot_table_box{grid-template-columns:1fr;}
	.tarot_table_box > div:nth-child(odd){padding:5px;font-size:14px;font-weight:600;border-right:none;}
	.tarot_table_box > div:nth-last-child(2){border-bottom:1px solid #999;}
	.tarot_table_box > div:nth-child(even){padding:5px 5px 20px;border-bottom:none}
	.tarot_table_box > div:nth-child(even) p{font-size:14px;}
}

.case_list{
	display: flex;
	flex-wrap: wrap;
	gap:10px;
	padding-bottom:25px;
}

.article_contents main .case_list li{
	padding:0;
}
.article_contents main .case_list li a{
	position:relative;
	color:#fff;
	text-decoration:none;
	font-size:14px;
	letter-spacing:-0.05em;
	padding:3px 28px 3px 15px;
	background-color:#b09552;
	border:#b09552 1px solid;
	border-radius:20px;
	box-shadow: 0 0 3px rgba(0, 0, 0, .2);
	transition:.2s;
}
.article_contents main .case_list li a::before {
    content: "";
    position: absolute;
    right:10px;
    top:5px;
    width:6px;
    height:6px;
    display: block;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
    transition:.2s;
}
@media only screen and (min-width:768px) {
	.article_contents main .case_list li a:hover{background-color:rgba(255,255,255,0);color:#b09552;box-shadow: 0 0 3px rgba(0,0,0,0);}
	.article_contents main .case_list li a:hover::before{border-color:#b09552;}
}

@media only screen and (max-width: 520px) {
	.case_list{justify-content: center;}
}

.tarot_case_box{
	display:flex;
	flex-wrap:wrap;
	gap:0 20px;
	margin-bottom:35px;
	padding-bottom:25px;
	border-bottom:1px dotted #B09552;
}

.tarot_case_box > div:nth-child(1){width:20%;line-height:0;}
.tarot_case_box > div:nth-child(2){width:calc(80% - 20px);}

.tarot_case_box.reverse > div:nth-child(1) img{transform:rotate(180deg);}
.tarot_case_box.reverse{border-bottom:none;margin-bottom:0;padding-bottom:0;}

.tarot_case_box > div:nth-child(2) h4{
	text-align:left;
	font-size:16px;
	color:#333;
	border-left:4px solid #333;
	border-bottom:1px solid #666;
	padding:0 0 1px 8px;
}

.tarot_case_text{
	padding:10px 4px 15px;
	text-align:left;
	font-weight:600;
}

.tarot_case_main{
	padding:0 4px;
}
.article_contents section .tarot_case_main p{
	font-size:14px;
	padding-bottom: 15px;
}



@media only screen and (max-width: 520px) {
	.tarot_case_box{gap:0 15px;margin:0 0 30px;}
	.tarot_case_box > div:nth-child(2){display:contents;}
	.tarot_case_title{width:calc(80% - 15px);}
	.tarot_case_text{font-size:100%;}
	.tarot_case_main{width:100%;padding:25px 0 0;}
	.article_contents section .tarot_case_main p{font-size:13px;}
}




.ad_img_box{
	display:flex;
	flex-wrap:wrap;
	max-width:380px;
	margin:0 auto 20px;
	gap:0 10px;
	justify-content: center;
}
.ad_img_box > div{width:100%;color:#999;font-size:11px;padding:0 0 5px;}
.ad_img_box a{
	display:flex;
	flex-wrap:wrap;
	width:calc((100% - 26px)/3);
	height:auto;
	aspect-ratio:1/1;
	line-height:0;
	box-sizing:border-box;
	border:#eee 1px solid;
}

.ad_img_box a img{width:100%;margin:auto;}


.bottom_links_box{
	padding-top:30px;
}

.bottom_links_title{
	text-align:left;
	margin-bottom:5px;
	padding:2px 9px;
	font-size:16px;
	font-weight:600;
	border-left:#111 solid 5px;
	border-bottom:#111 solid 1px;
}
.bottom_links_title a{
	color:#222;
	position:relative;
}
.bottom_links_title a::before{
    content: "";
    position: absolute;
    right:-16px;
    top: 0;
    bottom: 0;
    margin-top: auto;
    margin-bottom: auto;
    width:8px;
    height:8px;
    display: block;
    border-right: 1px solid #464646;
    border-top: 1px solid #464646;
    transform: rotate(45deg);
    transition: transform .2s;
}

.bottom_links{
	display:flex;
	flex-wrap:wrap;
	gap:4px 5px;
	justify-content:left;
	padding:0 6px;
}

.article_contents main .bottom_links li{
	padding:0;
}

.article_contents main .bottom_links li a{
	padding:1px 10px;
	font-size:13px;
	text-decoration:none;
	letter-spacing:0.04em;
	background-color:#B09554;
	border:1px solid #B09554;
	color:#fff;
	border-radius:15px;
	transition: .2s;
}

@media only screen and (min-width:768px) {
	.article_contents main .bottom_links li a:hover{
		background-color:rgba(255,255,255,0);
		color:#B09554;
	}
}
@media only screen and (max-width:520px) {
	.article_contents main .bottom_links li a{
		font-size:13px;
		border-radius:2px;
		padding:0 8px;
	}
}