@charset "utf-8";
/***********************************************************
LAYOUT
***********************************************************/

/****************
COMMON
****************/
.fit-sidebar-fixed{margin-top:0!important;margin-bottom:0!important;position:fixed;}
.fit-sidebar-blank{z-index:0;background-color:transparent;visibility:hidden;}
#wrapper,
.wrapper{
display:flex;
justify-content:space-between;
overflow:hidden;
width:1224px;
margin:0 auto;
padding:0 50px;
border-left:5px #fff solid;
border-right:5px #fff solid;
}
#wrapper{
display:block;
background:#fff;
}
main,.main{
float:left;
width:728px;
}
aside,.aside{
float:right;
width:336px;
}

/****************
HEADER
****************/
header{
font-weight:bold;
line-height:1;
border-top:5px #33CCDD solid;
background:#666;
color:#fff;
}
header .main img{
margin:1rem 0 0 0;
max-width:70%;
max-height:40px;
}
header .main p{
font-size:.7rem;
text-align:justify;
text-justify:inter-ideograph;
-moz-text-align-last:justify;
text-align-last:justify;
margin:1rem 0 1rem 0;
padding:0;
white-space:nowrap;
line-height:25px;
border-top:1px #fff dotted;
border-bottom:1px #fff dotted;
}
header .aside a{
display:flex;
flex-flow:column;
justify-content:center;
align-items:center;
text-align:center;
text-decoration:none;
/*font-size:1rem;*/
margin:0;
padding:.5rem 0;
width:100%;
height:calc(100% - 1rem);
background:#33CCDD;
color:#fff;
clip-path: polygon(
 0% 0%,   /* 左上 (X:0, Y:0) */
 100% 0%, /* 右上 (X:100, Y:0) */
 85% 100%,/* 右下 (X:右端から15%内側, Y:下端) */
 15% 100% /* 左下 (X:左端から15%内側, Y:下端) */
);
/* 古いSafariブラウザのための記述（念のため） */
-webkit-clip-path:polygon(0% 0%, 100% 0%, 85% 100%, 15% 100%);
}
header .aside a i{
font-size:2rem;
margin-top:5px;
}
header .aside a:hover,
header .aside a.current{
color:#333;
}

/****************
FOOTER
****************/
footer{
font-size:.95rem;
background:#333;
color:#eee;
}
footer .wrapper{
padding-top:1rem;
padding-bottom:calc(50px + 2rem);
}
footer dt i{
font-size:1.3rem;
margin-right:.5rem;
}
footer a{
text-decoration:none;
font-weight:bold;
color:#fff;
}
footer a:hover{
text-decoration:underline;
}

address{
position:fixed;
left:0;
bottom:0;
width:100%;
background:rgba(0,0,0,.8);
}
address nav{
background:none;
}
address nav ul{
display:table;
table-layout:fixed;
}
address nav li a{
display:flex;
flex-flow:column;
align-items:center;
font-size:10px;
text-align:center;
text-decoration:none;
line-height:1;
padding:.5rem 0;
color:#ccc;
}
address nav a i{
display:block;
font-size:15px;
text-align:center;
margin:5px;
}
address nav a:hover{
background:#333;
color:#33ccff;
}

/***********************************************************
UTILITY
***********************************************************/

/****************
INTRO
****************/
#intro{
display:block;
overflow:hidden;
width:100%;
position:relative;
background:repeating-linear-gradient(to right,
  #c4e17f 0px, #c4e17f 50px,
  #f7fdca 50px, #f7fdca 100px,
  #fad071 100px, #fad071 150px,
  #f0766b 150px, #f0766b 200px,
  #db9dbe 200px, #db9dbe 250px,
  #c49cdf 250px, #c49cdf 300px,
  #6599e2 300px, #6599e2 350px,
  #61c2e4 350px, #61c2e4 400px);
}
#intro img{
width:100%;
margin:1rem 0;
}
#intro .wrapper,
#intro .wrapper img{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
height:100%;
}
#intro .wrapper img{
width:70%;
}

/****************
GLOBAL NAV
****************/
nav{
display:block;
overflow:hidden;
margin:0;
padding:0;
background:#33cccc;
}
nav ul{
display:table;
table-layout:fixed;
border-collapse:collapse;
list-style:none;
margin:0;
padding:0;
width:100%;
}
nav li{
display:table-cell;
list-style:none;
overflow:hidden;
margin:0;
padding:0;
width:100%;
border-left:1px #fff solid;
border-right:1px #fff solid;
}
nav a{
display:block;
overflow:hidden;
white-space:nowrap;
text-decoration:none;
text-align:center;
font-size:.85rem;
font-weight:bold;
margin:0;
padding:1rem 0;
width:100%;
line-height:1;
color:#fff;
}
nav a:hover{
/*background:#f9f9f9;*/
color:#333;
}
nav a.current{
background:#f9f9f9;
color:#333;
}
nav a i{
display:block;
text-align:center;
font-weight:bold;
margin-bottom:5px;
}
nav a span:after{
content:"・";
}

/****************
PANKUZU
****************/
.pankuzu{
display:block;
overflow:hidden;
font-size:11px;
text-overflow:ellipsis;
white-space:nowrap;
width:100%;
line-height:1;
margin:0;
padding:1rem 0;
}
.pankuzu a i{
display:inline-block;
font-size:15px;
vertical-align:baseline;
}
.pankuzu a{
text-decoration:underline;
}
.pankuzu a:hover{
text-decoration:none;
}
.pankuzu:after{
content:"当サイトは広告を含みます。";
display:block;
text-align:right;
width:100%;
margin:.5rem 0 0 0;
padding:.5rem 0 0 0;
border-top:1px #ccc solid;
}

/****************
HOME & SNS
****************/
.sns{
display:flex;
align-items:center;
justify-content:space-between;
gap:1px;
line-height:1.0;
padding:1.5rem 0 3rem 0;
border-top:1px #ccc solid;
}
.sns a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:1.3rem;
line-height:60px;
width:100%;
background:rgba(0,0,0,.05);
color:#666;
}
.sns i,
.sns img{
height:1.3rem;
-webkit-transition:0.2s;
   -moz-transition:0.2s;
    -ms-transition:0.2s;
     -o-transition:0.2s;
        transition:0.2s;
}
.sns a:hover{
background:rgba(0,0,0,.1);
}
.sns a:hover i,
.sns a:hover img{
font-size:1.5rem;
height:1.5rem;
color:#333;
}

/****************
ITEM LIST
[class^="itemlist"] で "itemlist" で始まる全クラスに適用
****************/
[class^="itemlist"]{
	display:block;
	margin:0;
	padding:0;
	line-height:1;
	width:100%;
}
[class^="itemlist"] *{
	transition:0.2s;
}
.itemlist a{
	border-top:1px #eee solid;
	border-bottom:1px #eee solid;
}
[class^="itemlist"] a{
	display:flex;
	overflow:hidden;
	text-decoration:none;
	margin-top:1.5rem;
	color:#333;
}
[class^="itemlist"] .eyecatch{
	display:block;
	overflow:hidden;
	position:relative;
	height:0;
	padding-bottom:56.25%;
}
[class^="itemlist"] img.image{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	object-fit:cover;
}
[class^="itemlist"] img.mark{
	width:auto;
	height:auto;
	position:absolute;
	top:10%;
	left:5%;
}
[class^="itemlist"] .eyecatch span{
	position:absolute;
	bottom:0;
	left:0;
	display:-webkit-box;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:1;
	font-size:.8rem;
	font-weight:bold;
	text-align:center;
	padding:0 1rem;
	width:100%;
	line-height:2rem;
	background:rgba(0,0,0,.5);
	color:#fff;
}
[class^="itemlist"] span.text-wrap{
	display:flex;
}
[class^="itemlist"] span.text-wrap span{
	display:-webkit-box;
	-webkit-box-orient:vertical;
	overflow:hidden;
	text-overflow:ellipsis;
	-webkit-line-clamp:3;
	margin-top:.5rem;
	line-height:1.3;
	font-size:.95rem;
}
aside .itemlist2 span.text-wrap span{
	line-height:1.3;
	font-size:.9rem;
}
[class^="itemlist"] span.text-wrap span:first-child{
	font-weight:bold;
}
[class^="itemlist"] span.text-wrap span:not(:first-child){
	font-size:.8rem;
	line-height:1.3;
}
[class^="itemlist"] a:hover img.image{
	transform:scale(1.1);
}
[class^="itemlist"] a:hover .eyecatch span{
	bottom:-2rem;
}
.itemlist a:hover{
	border-top:1px #3366CC solid;
	border-bottom:1px #3366CC solid;
}
[class^="itemlist"] a:hover{
	color:#3366CC;
}

/* 1-4カラムリストの共通スタイル (Flexbox) */
.itemlist1, .itemlist2, .itemlist3, .itemlist4{
	display:flex;
	justify-content:space-between;
	flex-wrap:wrap;
}
/* .itemlist (横並び) の個別スタイル */
.itemlist a{
	justify-content: space-between;
	width:100%;
}
.itemlist .eyecatch-wrap{
	width:calc(100% / 3 - .5rem);
}
.itemlist span.text-wrap{
	flex-flow:column;
	/*width:calc(70% - .5rem);*/
	width:calc(100% / 3 * 2 - .25rem);
}
.itemlist span.text-wrap span{
	font-size:1rem;
}
/* 1-4カラムリスト (縦積み) の個別スタイル */
.itemlist1 a, .itemlist2 a, .itemlist3 a, .itemlist4 a{
	flex-flow:column;
	align-items:flex-start;
}
.itemlist1 .eyecatch-wrap, .itemlist2 .eyecatch-wrap, .itemlist3 .eyecatch-wrap, .itemlist4 .eyecatch-wrap{
	width:100%;
}
.itemlist1 span.text-wrap, .itemlist2 span.text-wrap, .itemlist3 span.text-wrap, .itemlist4 span.text-wrap{
	width:100%;
}
.itemlist1 span.text-wrap span:not(:first-child), .itemlist2 span.text-wrap span:not(:first-child), .itemlist3 span.text-wrap span:not(:first-child), .itemlist4 span.text-wrap span:not(:first-child){
	display:none;
}
.itemlist1 span.text-wrap span, .itemlist2 span.text-wrap span{
	font-size:1rem;
}
/* カラム数に応じた幅の指定 */
.itemlist1 a{width:100%;}
.itemlist2 a{width:calc(100% / 2 - .5rem);}
.itemlist3 a{width:calc(100% / 3 - .5rem);}
.itemlist4 a{width:calc(100% / 4 - .5rem);}
/*************************************
RESPONSIVE
*************************************/
@media all and (max-width: 750px){
	/* 650px以下で2カラムに統一 */
	.itemlist2 a,
	.itemlist3 a,
	.itemlist4 a {
		width:calc(100% / 2 - .5rem);
	}
	/* アイテム内の縦中央寄せ */
	[class^="itemlist"] a{
		align-items:center;
	}
	[class^="itemlist"] span.text-wrap span,
	aside .itemlist2 span.text-wrap span{
		font-size:.95rem;
		line-height:1.3;
		margin-top:0;
	}
	/* 2番目以降のテキストは非表示 */
	[class^="itemlist"] span.text-wrap span:not(:first-child){
		display:none;
	}
}
@media all and (max-width: 450px){
	.itemlist .eyecatch-wrap,
	.itemlist span.text-wrap{
		width:calc(100% / 2 - .5rem);
	}
}

/****************
もっと見る
****************/
.viewMore{
display:block;
overflow:hidden;
margin:-2rem 0 0 0;
width:100%;
height:5rem;
background:linear-gradient(180deg, rgb(255, 255, 255, 0) -100%, rgb(255, 255, 255, 1) 70%);
position:relative;
}
.viewMore a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-weight:bold;
font-size:15px;
width:70%;
line-height:3.5rem;
height:3.5rem;
margin:0 auto;
position:absolute;
right:0;
left:0;
bottom:0;
color:#fff;
background:rgba(0,0,0,.5);
border-radius:2.5rem;
z-index:9999;
}
.viewMore a:hover{
color:#33CCDD;
background:rgba(0,0,0,.7);
}

/****************
Link List
****************/
.linklist{
display:block;
overflow:hidden;
margin:1.5rem 0 0 0;
padding:0;
}
.linklist ul,
.linklist li,
.linklist a{
display:block;
overflow:hidden;
margin:0;
padding:0;
list-style:none;
line-height:1;
}
.linklist ul{
border-top:1px #ccc solid;
}
.linklist li ul{
border-top:0;
}
.linklist li{
font-size:1em;
margin-top:-1px;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
}
.linklist li ul li{
font-size:.9em;
margin:0 0 0 1rem;
border:0;
}
.linklist li ul{
margin-bottom:5px;
}
.linklist a{
display:flex;
align-items:center;
justify-content:space-between;
text-decoration:none;
font-size:1em;
margin:10px 0;
padding:0 0 0 10px;
height:2.4em;
line-height:1.2em;
border-left:3px #ccc solid;
color:#333;
}
.linklist li ul li a{
margin:5px 0;
}
.linklist a.current,
.linklist a:hover{
font-weight:bold;
border-color:#666;
color:#666;
}
.linklist a span{
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.linklist a i{
white-space:nowrap;
margin-left:10px;
}

/****************
Tagcloud
****************/
ul.tagcloud{
text-align:center;
margin:1.5rem 0 0 0;
padding:0;
line-height:1;
}
ul.tagcloud li{
display:inline-block;
list-style:none;
margin:.5rem .5rem 0 .5rem;
padding:0;
}
ul.tagcloud li a{
text-decoration:none;
}
ul.tagcloud li a:hover{
text-decoration:underline;
}

/****************
PAGE NATION
****************/
.pageNavi{
display:flex;
justify-content:space-between;
align-items:stretch;
margin:1.5rem 0 0 0;
padding:1.5rem 0 0 0;
border-top:1px #ccc solid;
}
.pageNavi ol{
list-style:none;
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:5px 1px;
align-items:center;
width:100%;
margin:0 5px;
padding:0;
}
.pageNavi li{
list-style:none;
width:60px;
min-width:calc(100% / 5 - 5px);
margin:0;
padding:0;
}
.pageNavi a{
display:block;
overflow:hidden;
text-align:center;
text-decoration:none;
font-size:.85rem;
line-height:60px;
background:#666;
color:#fff;
}
.pageNavi a.current,
.pageNavi a:hover{
background:#666;
}
.pageNavi div{
display:flex;
align-items:center;
min-width:60px;
}
.pageNavi div i{
font-size:1.5rem;
}
.pageNavi div a{
display:flex;
justify-content:center;
align-items:center;
width:100%;
height:100%;
}

/****************
PAGE NAVI 前後記事
****************/
ul.page_link{
list-style:none;
display:flex;
justify-content:space-between;
gap:0 1rem;
margin:1rem 0 0 0;
}
ul.page_link li{
list-style:none;
width:50%;
}
ul.page_link a{
display:flex;
align-items:center;
font-weight:bold;
text-decoration:none;
width:100%;
height:60px;
}
ul.page_link a.current i,
ul.page_link a:hover i{
background:#666;
color:#33CCDD;
}
ul.page_link a.current span,
ul.page_link a:hover span{
/*font-weight:bold;*/
color:#33CCDD;
}
ul.page_link i{
font-size:1.5rem;
text-align:center;
margin:0;
padding:0;
min-width:60px;
height:60px;
line-height:60px;
background:#666;
color:#fff;
}
ul.page_link span{
display:-webkit-box;
overflow:hidden;
text-overflow:ellipsis;
-webkit-box-orient:vertical;
-webkit-line-clamp:3;
font-size:.8rem;
line-height:1.4;
width:100%;
padding:0 0 0 .5rem;
color:#333;
}
ul.page_link li.next span{
text-align:right;
padding:0 .5rem 0 0;
}

/****************
VIEW SAMMARY
****************/
div.sammary{
margin:1.5rem 0 0 0;
border-top:1px #ccc solid;
border-bottom:1px #ccc solid;
}
div.sammary dl{
display:flex;
flex-wrap:wrap;
align-items:center;
margin:1rem 0;
}
div.sammary dt,
div.sammary dd{
font-size:.8rem;
margin:0;
padding:.5rem 0 0 0;
line-height:1;
border:0;
}
div.sammary dt{
text-align:center;
width:.8rem;
}
div.sammary dd{
width:calc(100% - .8rem);
padding-left:.5rem;
}

/****************
SEARCH FORM
****************/
form.search{
display:flex;
width:100%;
margin:1rem 0 0 0;
border:1px #666 solid;
}
form.search input{
flex:1;
height:60px;
padding:0 .5rem;
outline:none;
border:0;
}
form.search button,
form.search input[type=submit]{
font-size:1.5rem;
width:60px;
height:60px;
line-height:60px;
margin:0;
padding:0;
border:none;
outline:none;
cursor:pointer;
text-align:center;
background:#666;
color:#fff;
}
form.search:hover button:hover,
form.search input[type=submit]:hover{
color:#33CCDD;
}
/****************
SELECT LINK
****************/
div.selectlink{
display:block;
overflow:hidden;
position:relative;
width:100%;
height:60px;
margin:1.5rem 0 0 0;
}
div.selectlink:after{
pointer-events:none;
content:"\f142";/*開く*/
font-family:'Font Awesome 5 Free';
font-weight:900;
position:absolute;
top:0;
right:0;
display:block;
overflow:hidden;
width:60px;
line-height:60px;
text-align:center;
margin:0;
padding:0;
color:#666;
}
div.selectlink select::-ms-expand{
display:none;
}
div.selectlink select{
-moz-appearance:none;
-webkit-appearance:none;
-o-appearance:none;
-ms-appearance:none;
appearance:none;
margin:0;
padding:0 1rem;
vertical-align:middle;
outline:none;
font-size:1.2rem;
cursor:pointer;
width:100%;
height:60px;
border:0;
background:#666;
}
div.selectlink:hover:after,
div.selectlink:focus:after{
color:#333;
}


/****************

****************/


/***********************************************************
ADDITION
***********************************************************/
/****************
CATEGORY MENU
****************/
h1{
display:flex;
justify-content:space-between;
position:relative;
}
h1 details{
margin:0;
padding:0;
}
h1 summary{
cursor:pointer;
outline:0;
text-align:center;
font-size:1rem;
font-weight:normal;
width:2rem;
line-height:2rem;
background:#33CCDD;
color:#fff;
}
h1 summary::-webkit-details-marker{
display:none;
}
h1 summary:before{
content:"＋";
}
h1 details[open] summary:before{
content:"×";
}
h1 summary:hover{
background:#666;
}
h1 details div{
position:absolute;
top:0;
right:2.5rem;
z-index:99999;
height:350px;
overflow-y:scroll;
-webkit-overflow-scrolling:touch;
}
h1 details div strong{
margin:0;
padding:0;
display:block;
font-size:11px;
padding:0 1rem;
line-height:2rem;
background:#666;
color:#fff;
}
h1 details div strong i{
display:inline-block;
width:1rem;
}
h1 details ul{
list-style:none;
margin:0;
padding:0;
white-space:nowrap;
}
h1 details li{
list-style:none;
font-size:.9rem;
margin:0;
padding:0;
}

h1 details li a{
display:flex;
justify-content:space-between;
gap:1rem;
text-decoration:none;
padding:.75rem 1rem;
line-height:1;
background:rgba(51,204,204,1);
color:#FFF;
border-top:1px #33CCDD solid;
border-bottom:1px #33CCDD solid;
}
h1 details li a span{
text-align:right;
font-weight:normal;
}
h1 details li a:hover{
background:#666;
border-top:1px #fff solid;
border-bottom:1px #fff solid;
}

/****************
BANNER ELEVEN & NUMEROLOGY
****************/
.bnr.eleven{background-image:url('https://kokoro.wdeco.jp/_/images/intro.webp');}
.bnr.eleven:before{content:"＼イレブン診断を試してみる／";}
.bnr.numerology{background-image:url('https://kokoro.wdeco.jp/_/files/medias/app_numerology/yoko-intro2.jpg');}
.bnr.numerology:before{content:"＼数秘術占いで鑑定してみる／";}

.bnr{
display:flex;
justify-content:space-between;
flex-wrap:wrap;
gap:1rem .5rem;
font-weight:bold;
margin:1.5rem 0 0 0;
padding:1rem;
background-position:top center;
background-size:cover;
}
.bnr:before{
display:block;
font-size:.9rem;
text-align:center;
line-height:3rem;
width:100%;
background:rgba(0,0,0,.5);
color:#fff;
}
.bnr a{
display:block;
text-align:center;
text-decoration:none;
white-space:nowrap;
width:calc(50% - .5rem);
padding:1rem 0;
color:#fff;
background:rgba(0,0,0,.3);
border:10px #ccc double;
}
.bnr a:hover{
color:#333;
background:rgba(255,255,255,.5);
border:10px #666 double;
}


/***********************************************************
RESPONSIVE
***********************************************************/
@media all and (max-width:1224px){
	#wrapper,
	.wrapper{
		display:block;
		width:calc(728px + 100px + 10px);
	}
	main, aside,
	.main, .aside{
		float:none;
		width:100%;
	}
	#wrapper main .sns{
		padding-bottom:1.5rem;
	}
	header .wrapper{
		display:flex;
	}
	header .main{
		flex:1;
	}
	header .main img{
		max-width:85%
	}
	header .aside{
		flex:0 0 25%;
	}
	nav .aside{
		display:none;
	}
}
@media all and (max-width:850px){
	#wrapper,
	.wrapper{
		padding:0 1rem;
		width:100%;
		border:0;
	}
	header .aside a{
		font-size:.8rem;
	}
}
@media all and (max-width:650px){
	nav .main i{
		font-size:.7rem;
		color:#666;
	}
	nav .main span{
		display:block;
		text-align:center;
	}
	nav .main span:after{
		content:"";
	}
	dl.entrylist p{
		display:none;
	}
}

/***********************************************************
END
***********************************************************/