@charset "UTF-8";
/*
Theme Name:   YUME-URANAI
Description:  THE SONICカスタマイズ用子テーマ
Template:     thesonic
Version:      4.0.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
*/


*{ margin:0; padding:0;}
body { background:#fff!important; position: relative;}
img { vertical-align:bottom;}
ul, li { list-style:none;}
a { color:#333; text-decoration:none;}
a:hover { text-decoration:none;}
p { margin-bottom: 0;}

:root {
--main-color: #F7CE58;
--sub-color: #EEE4BB;
--text-color: #000;
--bg-color: #fff;
--sub-color-op2: rgba(203, 136, 255,0.2);
}

#header { background-color:var(--main-color)!important;}
#content { display:flex; flex-wrap:wrap; margin:0 auto;}
#main { width:100%;}
#main h1 { font-weight:700;}
#main footer { background:none;}
#sidebar { width:100%;}
#sidebar h2 { font-weight:700;}

#header { width:100%; display:flex; justify-content:space-between; align-items:center; height: 56px; position:fixed; top:0;}
#content { padding-top:56px;}
#header .header-logo { flex:0 0 auto; margin:0 0; height:56px; display:flex; align-items:center; width:200px; padding:0 16px; box-sizing:border-box;}
#header .header-logo a { display:block;}
#header .header-logo img { width:100%; height:auto;}

.mobileonly { display:block;}
.pconly { display:none;}
@media screen and (min-width : 768px) {
	#header { height:72px;}
	#header .header-logo { height:72px; width:264px; padding:0 24px;}
	#content { padding-top:72px;}
}
@media screen and (min-width : 960px) {
	#header { height:88px; position:relative;}
	#header .header-logo { height:88px; width:320px; padding:0 32px;}
	#content { padding-top:0;}
	.mobileonly { display:none;}
	.pconly { display:block;}
}


.header-navigation { display:none;}
.hamburger-menu { width:56px; height:56px; display:flex; align-items:center; justify-content:center; position:absolute; left:auto; right:0; top:0;}
.menu-open { flex:0 0 auto; display:block; height:56px; width:56px; font-size:32px; line-height:56px; color:var(--text-color); text-align:center;}
.menu-open::before { content:"\e5d2"; font-family:Material Icons; cursor:pointer;}
.menu-close { position:absolute; top:50%; left:-60px; width:56px; height:56px; text-align:center; line-height:56px; font-size:40px; color:#eee; z-index:15;}
.menu-close::before { content:"\e5cd"; font-family:Material Icons; cursor:pointer;}
.menu { position:fixed; top:0; right:0;}
.menu.showing { width:100%; height:100vh; z-index:12;}
.menu-inner { display:none; width:70%; height:100vh; background:#f0f0f0; padding:56px 20px; box-sizing:border-box; position:absolute; top:0; right:0; z-index:14;}
.menu-inner > form { width:100%;}
.menu-inner .cat-list { margin-top:24px;}

.showing .menu-inner { display:block;}
.menu .cat-list li a { display:block; color:#222; font-size:24px; font-weight:bold; margin-bottom:16px;}
.menu .cat-list li ul a { font-size:18px; font-weight:normal; padding-left:1em;}
.nav-background { display:none;}
.showing .nav-background { display:block; width:100%; height:100vh; background:rgba(0,0,0,0.5); position:fixed; top:0; left:0; z-index:13;}

.header-search-form { display:none;}
.search-form { display:flex; position:relative; margin:0!important; width:240px;}
.search-form .search-input { flex:1 1 auto; height:40px; border:solid 2px #919EC0; padding:8px 12px; box-sizing:border-box; font-size:16px; width:100%; border-radius:20px; background-color:#fff;}
.search-form .search-input::placeholder { font-size:15px; color:#666;}
.search-form .search-input:focus-visible { outline:none;}
.search-form .search-button { flex:0 0 auto; height:40px; width:40px; border:none; background-color:#919EC0; color:#fff; text-align:center; cursor:pointer; position:absolute; right:0; border-radius: 0 20px 20px 0;}
.search-form .search-button::before { content:"\e8b6"; font-family:Material Icons; font-size:28px; line-height:40px; padding-right:2px;}
@media screen and (min-width: 768px) {
	.hamburger-menu { width:72px; height:72px;}
	.menu-open { width:72px; height:72px; line-height:72px; font-size:40px;}
}
@media screen and (min-width: 960px) {
	.hamburger-menu { display: none;}
	.header-search-form { display:block; padding:0 24px;}
}
@media screen and (min-width : 768px) {
	.menu-inner { padding:56px 24px;}
}


#top-content { width:100%; max-width:1200px; margin:0 auto;}
#top-content section { flex:0 0 auto; width:auto; padding-bottom:32px;}
#top-content section header { padding:16px;}
#top-content section h1 { font-size:30px; font-weight:bold; position:relative;}
#top-content section h1 span { display:block; font-size:16px; font-weight:normal; color:#666; font-family:initial;}
#top-content section h1::after { content:""; display:block; width:48px; height:48px; background:#919EC0; opacity:0.6; position:absolute; top:4px; left:8px; z-index:-1;}
@media screen and (min-width : 960px) {
	#top-content section header { padding:24px;}
}

.article-list { display:flex; flex-wrap:wrap; justify-content:center;}
.article-list .item { flex:0 0 auto; width:calc(100% - 32px); margin-bottom:16px;}
@media screen and (min-width : 768px) {
	.article-list { margin-left:16px; justify-content:start;}
	.article-list .item { flex:0 0 auto; width:calc((100% - 32px) / 2); margin-right:16px;}
}
@media screen and (min-width : 960px) {
	.article-list { margin-left:24px;}
	.article-list .item { width:calc((100% - 48px) / 2); margin-right:24px; margin-bottom:24px;}
}
@media screen and (min-width : 1080px) {
	.article-list .item { width:calc((100% - 72px) / 3);}
}
.article-list .item a { display:block; height:100%; border-radius:16px; overflow:hidden; background:#fff; box-shadow:3px 3px 8px rgba(111,111,111,0.1), -1px -1px 8px rgba(111,111,111,0.1); transition:all 0.8s;}
.article-list .item a:hover { box-shadow:3px 3px 8px rgba(111,111,111,0.2), -1px -1px 8px rgba(111,111,111,0.2);}
.article-list .item a:hover img { transform: scale(1.05); transition-duration: 1.5s;}
.article-list .item a article { display:flex; flex-wrap:wrap;}
.article-list .item .thumbnail { flex:0 0 auto; width:100%; background:#f0f0f0; overflow:hidden; border-radius:16px 16px 0 0; z-index:1;}
.article-list .item .thumbnail img { width:100%; height:auto; object-fit:cover; transition:all 0.5s;}
.article-list .item .metadata { flex:1 1 auto; padding:16px 16px 32px; position:relative;}
.article-list .item .title { font-size:16px; font-weight:bold; color:#333; line-height:1.3; height:3.9em; overflow:hidden;}
.article-list .item .categories { display:none;}
.article-list .item .time { color:#bbb; font-size:13px; line-height:24px; position:absolute; left:16px; bottom:0; margin-bottom: 5px;}
.article-list .item.small-image a article { flex-wrap:nowrap; height:100%;}
.article-list .item.small-image .thumbnail { width:45%; border-radius:16px 0 0 16px;}
.article-list .item.small-image .thumbnail img { height:100%;}
.article-list .item.small-image .metadata { width:55%;}
.article-list .item.small-image .title { font-size:14px;}
@media screen and (min-width : 480px) {
	.article-list .item .title { font-size:18px;}
	.article-list .item.small-image .title { font-size:15px;}
}
@media screen and (min-width : 768px) {
	.article-list .item .title { font-size:20px;}
	.article-list .item.small-image .thumbnail { width:50%;}
}

.button { padding:32px 0; margin-bottom:0;}
.button a { display:block; text-align:center; color:#222; background:#fff; font-weight:bold; font-size:16px; line-height:48px; width:70%; max-width:320px; margin:0 auto; border:solid 1px #aaa; border-radius:24px; transition:all .5s; position:relative;}
.button a::after { content:"\e409"; font-family:Material Icons; position:absolute; right:16px;}
.button a:hover { background:#fff; opacity:0.9; box-shadow:0 2px 5px rgba(0,0,0,0.2);}

.main-list-header { width:100%; padding:24px 0; display:flex; flex-direction:column; justify-content:center; margin-bottom:16px; }
.main-list-header h1 { text-align:center; padding:0 24px; font-size:30px;}
.main-list-header .description { text-align:center; padding:0 24px; font-size:15px;}

.main-list-footer { padding:16px;}
.main-list-footer ul { margin:0;}
.main-list-footer .page-numbers a { background:#f0f0f0;}
.main-list-footer .page-numbers.prev { display:none;}
.main-list-footer .page-numbers.next { display:none;}
@media screen and (min-width : 960px) {
	.main-list-header { margin-bottom:24px;}
}
@media screen and (min-width : 1080px) {
	.main-list .article-list { max-width:1200px; padding-left:24px; margin:0 auto;}
}

.static-page .article-header { padding-top:56px;}

#sidebar { display:block; padding:0; border-top:solid 1px #eee;}
#sidebar .sidebar-content h3 { padding:16px; font-size:20px; font-weight:bold; position:relative;}
#sidebar .sidebar-content h3::after {
    content: "";
    display: block;
    width: 32px;
    height: 32px;
    background: #919EC0;
    opacity: 0.5;
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: -1;
}
#sidebar .sidebar-content h3 span { display:block; font-size:15px; font-weight:normal;}
@media screen and (min-width : 960px) {
	#sidebar .sidebar-content{ max-width:1200px; margin:0 auto;}
	#sidebar .sidebar-content h3 { padding:24px; font-size:24px;}
}

#footer { background:var(--sub-color)!important;}
#footer .footer-logo a img { width:140px!important;}
#footer .footer-container { margin-top: 24px!important; margin-bottom: 24px;}
#footer .footer-container img { width: 250px; height: auto; }
#footer .footer-container .footer-right h2 { font-size: 16px; color: #666; }
#footer .footer-container li a { font-size: 13px; color: #666; }

@media screen and (min-width : 1080px) {
	#footer .footer { font-size: 14px;}
}
#footer .container { padding: 40px 20px 150px;}
#footer .company { text-align:center;}
#footer .company-nav { display: flex; justify-content: center; gap: 15px;}
#footer .company-nav a { color: #fff; font-weight: bold; display:inline-block; padding:5px;}
#footer .copyright { font-size:12px; margin-top: 20px; color: #666!important; padding:0;}

#footer .site { text-align:center;}
#footer .site-nav { display: flex; flex-wrap: wrap; justify-content: space-between; max-width: 768px; margin: 0 auto; }
#footer .site-nav li {width: calc(50% - 20px);}
@media screen and (min-width : 1080px) {
	#footer .site-nav { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;}
	#footer .site-nav li {width: auto;}
}
#footer .site-nav a { color: #fff; font-weight: bold; display:inline-block; padding:5px;}
#footer .footer-recomend {
	padding: 20px 16px;
	background: rgb(245, 231, 255);
}
#footer .footer-recomend .inner h2 {
	font-size: 16px;
}
#footer .footer-recomend .inner li {
	font-size: 13px;
}
#footer .footer-recomend .inner a {
	color: #666;
}
@media screen and (min-width : 1080px) {
	#footer .footer-recomend {
		padding: 20px 0;
		background: rgb(245, 231, 255);
	}
	#footer .footer-recomend .inner {
		width: 60%;
		margin: 0 auto;
	}
	#footer .footer-recomend .inner ul {
		display: flex;
		justify-content: space-between;
	}
}

#footer .footer-container {
  display: flex;
  flex-wrap: wrap;
}
#footer .footer-top {
  width: 100%;
}
#footer .footer-left {
  flex: 0 0 auto;
  width: 100%;
  text-align: center;
  padding: 32px 16px;
  box-sizing: border-box;
}
#footer .footer-right {
  flex: 0 0 auto;
  width: 100%;
  padding: 32px 16px;
  box-sizing: border-box;
}
#footer .footer-logo a {
  display: inline-block;
}
#footer .footer-logo a:hover {
  background-color: transparent;
}
#footer .footer-logo a img {
  width: 200px;
  height: auto;
  vertical-align: middle;
}
#footer .site-list {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
#footer .genre-title {
  text-align: center;
  font-size: 12px;
  color: #888;
  margin-top: 24px;
}
#footer .site-list li {
  padding: 8px 16px;
}
#footer .site-list li img {
  width: 88px;
  height: auto;
  vertical-align: middle;
}
#footer .footer-recommend h2 {
  font-size: 16px;
}
#footer .footer-recommend li a {
  font-size: 13px;
  color: #666;
}
#footer .footer-bottom {
  flex: 0 0 auto;
  width: 100%;
  background: #333;
}
#footer .footer-menu {
  display: flex;
  margin: 10px 20px;
  justify-content: center;
  flex-wrap: wrap;
  flex-direction: column;
}
#footer .footer-menu li {
  flex: 0 0 auto;
}
#footer .footer-menu a {
  color: #fff;
  font-size: 13px;
}
#footer .footer-bar {
  background: #222;
}
#footer .copyright {
  font-size: 12px;
  color: #eee;
  text-align: center;
  padding: 16px;
}
@media (min-width: 768px) {
  #footer .footer-menu {
    flex-direction: row;
  }
  #footer .footer-menu li::before {
    content: '/';
    color: #fff;
    display: inline-block;
    padding: 0 1em;
  }
  #footer .footer-menu li:first-child::before {
    content: '';
    padding: 0;
  }
  #footer .copyright {
    padding: 8px 24px;
  }
}
@media (min-width: 1080px) {
  #footer {
    overflow: hidden;
  }
  #footer .footer-container {
    justify-content: center;
    flex-direction: row;
    margin-top: 32px;
  }
  #footer .footer-left {
    width: 40%;
    border-right: solid 1px #ccc;
    padding: 32px;
  }
  #footer .footer-right {
    width: 40%;
    padding: 32px;
  }
  #footer .footer-bottom {
    margin-top: 32px;
  }
  #footer .footer-menu {
    margin: 24px 24px;
  }
}

.google-form {
  margin-bottom: 32px;
}
.google-form > form {
  display: flex;
  flex-direction: column;
}
.google-form br {
  display: none;
}
.google-form input {
  border: solid 1px #ccc;
  height: 1.8em;
  line-height: 1.8em;
  padding: 4px 8px;
  font-size: 16px;
  margin-bottom: 16px;
}
.google-form textarea {
  border: solid 1px #ccc;
  line-height: 1.8em;
  padding: 4px 8px;
  font-size: 16px;
}
.google-form button {
  background: #919EC0;
  color: #fff;
  font-size: 17px;
  font-weight: bold;
  padding: 8px 16px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
  margin-top: 24px;
}
.google-form button:hover {
  opacity: 0.8;
}
.article-header .featured-image {
  width: 100%;
  height: auto;
  max-height: 500px;
  background-color: var(--sub-color-op2);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  z-index: 0;
  overflow: hidden;
}
.article-header .featured-image::before {
  content: '';
  position: absolute;
  top: -10px;
  bottom: -10px;
  left: -10px;
  right: -10px;
  background: inherit;
  filter: blur(10px);
  z-index: -1;
}
.article-header .featured-image img {
  width: 100%;
  height: auto;
  max-height: 500px;
  object-fit: cover;
  z-index: 2;
}
.article-header .metadata {
  padding: 16px;
}
.article-header h1 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}
.article-header .time {
  font-size: 13px;
  color: #888;
}
.article-body {
  padding: 16px;
}
.article-body .content > p {
  margin-bottom: 2em;
}
.article-body .content > figure {
  margin-bottom: 2em;
}
.article-body .content figcaption {
  font-size: 13px;
  color: #888;
}
.article-body .content iframe {
  width: 100% !important;
}
.article-footer {
  padding: 16px;
}
.article-footer .metadata {
  border-top: solid 1px #eee;
  padding: 16px 0;
}
.article-footer .categories {
  padding: 16px 0;
}
.article-footer .category-list ul {
  display: flex;
  flex-wrap: wrap;
}
.article-footer .category-list a {
  display: inline-block;
  padding: 0 16px;
  font-size: 15px;
  line-height: 32px;
  border-radius: 16px;
  background: #eee;
  color: #888;
  margin: 0 8px 8px 0;
}
.article-footer .tags {
  padding: 16px 0;
}
.article-footer .tag-list ul {
  display: flex;
  flex-wrap: wrap;
}
.article-footer .tag-list a {
  display: inline-block;
  padding: 0 16px;
  font-size: 15px;
  line-height: 32px;
  border-radius: 16px;
  background: #eee;
  color: #888;
  margin: 0 8px 8px 0;
}
.article-footer .tag-list a::before {
  content: '#';
}
.related-posts {
  padding: 16px;
}
.related-posts h3 {
  padding-bottom: 16px;
  font-size: 24px;
  font-weight: 700;
}
.related-posts .article-list {
  padding-left: 0;
  margin-left: 0;
  justify-content: space-between;
}
.related-posts .article-list .item {
  width: calc((100% - 16px) / 2);
}
.related-posts .article-list .item .title {
  padding: 16px;
  font-size: 15px;
  height: auto;
}
@media screen and (min-width: 768px) {
  .related-posts .article-list {
    justify-content: start;
    margin-right: -16px;
  }
  .related-posts .article-list .item {
    width: calc((100% - 48px) / 3);
  }
}
.author {
  padding: 24px 0;
  border-top: solid 1px #ddd;
  border-bottom: solid 1px #ddd;
  display: flex;
}
.author .icon {
  width: 80px;
  text-align: center;
}
.author .icon img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
}
.author .name {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 8px;
}
.author .profile {
  width: calc(100% - 80px);
}
.author .profile p {
  font-size: 14px;
  padding-left: 16px;
  line-height: 1.5;
}
@media screen and (min-width: 768px) {
  .author .icon {
    width: 120px;
  }
  .author .name {
    font-size: 13px;
  }
  .author .profile {
    width: calc(100% - 120px);
  }
  .author .profile p {
    padding-left: 24px;
  }
}
.comments {
  padding: 16px;
}
@media screen and (min-width: 960px) {
  .article-header .featured-image img {
    object-fit: contain;
  }
  .article-header .metadata {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .article-header h1 {
    font-size: 32px;
    margin-bottom: 24px;
  }
  .article-body {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .article-footer {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .related-posts {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
  }
  .related-posts .article-list {
    justify-content: start;
    margin-right: -24px;
  }
  .related-posts .article-list .item {
    width: calc((100% - 72px) / 3);
  }
  .comments {
    padding: 24px;
    max-width: 800px;
    margin: 0 auto;
    box-sizing: border-box;
  }
}
.breadcrumbs {
  display: none;
}
@media (min-width: 1080px) {
  .breadcrumbs {
    display: block;
    border-top: solid 1px #eee;
  }
  .breadcrumbs ol {
    font-size: 13px;
    padding: 24px;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
  }
  .breadcrumbs ol + ol {
    padding: 0 24px 24px;
  }
  .breadcrumbs li:not(:last-child)::after {
    content: '\e409';
    font-family: Material Icons;
    vertical-align: bottom;
    opacity: 1;
    font-weight: 700;
    margin: 0 5px;
  }
}
#comments h2 {
  margin-bottom: 16px;
}
#comments input {
  border: solid 1px #ccc;
}
#comments input.submit {
  border: none;
}
#comments .comment-meta {
  padding: 0 0 16px;
  flex-direction: row;
}
#comments .comment-author img {
  width: 32px;
  height: 32px;
  object-fit: cover;
}
#comments .comment-author .says {
  display: none;
}
#comments .comment-content {
  padding: 0;
}
#comments .comment-content p {
  font-size: 14px;
  padding: 0;
  margin-bottom: 16px;
}
#comments .comment-reply-title {
  font-size: 14px;
  padding: 16px 0;
}
#comments .comment-form-comment {
  margin-bottom: 16px;
}
#comments .logged-in-as {
  font-size: 14px;
}
#comments .reply {
  padding: 0;
  margin: 0;
}
#comments .bypostauthor {
  background-color: transparent;
}
#comments-list {
  padding: 0;
  background-color: transparent;
}
#comments-list li {
  border: none;
}
#comments-list li article {
  background: #f6f6f6;
  padding: 16px;
  border-radius: 16px;
  margin-bottom: 16px;
}
#comments-list .children li {
  position: relative;
}
#comments-list .children li::before {
  content: '';
  display: block;
  width: 16px;
  height: 16px;
  transform: rotate(45deg);
  background: #f6f6f6;
  position: absolute;
  top: -8px;
  left: 24px;
  z-index: -1;
}
#comments-list .children {
  margin-left: 40px;
}
#comments-list .comment.parent:not(:last-child) {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 0;
}
.scrolltop {
  display: none;
}
@media screen and (min-width: 1080px) {
  .scrolltop {
    display: block;
  }
  .scrolltop-button {
    position: fixed;
    right: 32px;
    bottom: 64px;
    border: none;
    background: var(--main-color);
    text-align: center;
    display: block;
    width: 56px;
    height: 56px;
    line-height: 56px;
    z-index: 99;
    border-radius: 0;
    color: #fff;
    opacity: 0;
    transition: all 1s ease;
  }
  .scrolltop-button::before {
    content: '\e5d8';
    font-family: Material Icons;
    font-size: 50px;
  }
}
.star-rating {
  display: inline-block;
  width: 5em;
  height: 1em;
  font-size: 15px;
  letter-spacing: 0;
  white-space: nowrap;
  position: relative;
}
.star-rating::after {
  content: '★★★★★';
  color: #ddd;
  font-weight: 400;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.star-rating .star {
  display: block;
  color: #fdd800;
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.star-rating .number {
  display: none;
}
.wp-block-table a.button {
  display: inline-block;
  padding: 0 16px;
  line-height: 40px;
  background: var(--main-color);
  color: #fff;
  font-weight: 700;
  border-radius: 20px;
  font-size: 14px;
  box-shadow: 0 1px 2px #ddd;
  transition: all 0.5s;
}
.wp-block-table a.button:hover {
  opacity: 0.8;
}
#mkj {
  margin-top: 1em;
  border: solid 2px #eee;
}
#mkj .mkj-title {
  border-bottom: none;
  text-align: center;
  padding: 16px;
}
#mkj .mkj-openclose {
  top: 16px;
}
#mkj .mkj-content {
  border-bottom: none;
}
#mkj .mkj-content-in {
  background: 0 0;
  padding: 16px;
}
#mkj .mkj-list {
  padding: 0;
}
#mkj .mkj-list li {
  padding-left: 32px;
  position: relative;
  margin-bottom: 4px;
}
#mkj .mkj-list li ol {
  padding-left: 0;
}
#mkj .mkj-list li ol li {
  padding-left: 16px;
}
#mkj .mkj-list a {
  font-size: 15px;
  font-weight: 700;
  padding: 0;
  color: #666;
}
#mkj .mkj-content::after {
  content: none;
}
#mkj .mkj-list > li:before {
  content: counter(num);
  background: var(--main-color);
  border-radius: 50%;
  color: #fff;
  position: absolute;
  top: 4px;
  left: 0;
  width: 24px;
  height: 24px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}
#mkj .mkj-list ol li:before {
  content: '';
  width: 5px;
  height: 5px;
  background: #666;
  top: 10px;
  left: 2px;
}
#mkj .mkj-list ol li a {
  font-weight: 400;
  font-size: 13px;
}
@media screen and (min-width: 960px) {
  #mkj .mkj-content-in {
    padding: 24px;
  }
}
.updatedate i::before {
  content: '\e5d5';
  font-family: Material Icons;
  vertical-align: bottom;
}
.postdate i::before {
  content: '\e8b5';
  font-family: Material Icons;
  vertical-align: bottom;
}
.readtime i::before {
  content: '\e54b';
  font-family: Material Icons;
  vertical-align: bottom;
}















.sitemap { padding:16px;}
.sitemap h2 { font-size:16px; color:#666; text-align:center; margin-bottom:24px;}
.sitemap-category { margin-bottom:16px;}
.sitemap-category h3 { font-size:16px; margin-bottom:8px;}
.sitemap-category h3 a { color:#333;}
.sitemap-category li a { font-size:13px; color:#666; display:inline-block; line-height:1.5;}
.sitemap-category li a::before { content:"・";}
@media screen and (min-width : 960px) {
	.sitemap { padding:24px;}
}

.promotion-note { font-size:14px; color:#888; margin-bottom:8px;}

/* ショートコードの擬似見出し用 */
.head2 {background: #736ccc; color: #fff; padding: 8px 16px; margin: 3em 0 1em; box-sizing: border-box; position: relative; display: block; unicode-bidi: isolate; font-size: 1.2em; font-weight: bold; display: block; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;}
.head3 {border-color: #736ccc!important; border-left: 4px solid; padding-left: 16px; margin: 2em 0 0.75em; box-sizing: border-box; position: relative; display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold; }
@media screen and (min-width: 768px) {
	.head2 {font-size: 1.5em;}
}
/* 周辺エリアの占い情報用 */
.uranai-area {
	padding: 16px;
}
.uranai-area h2 {
	font-size: 20px;
	position: relative;
	font-weight: normal;
	background: none!important;
	color: #666;
	font-family: initial;
}
.uranai-area h3 {
	font-size: 13px;
	border-bottom: solid 2px #736ccc;
	border-left: none;
	margin: 1.5em 0 1em;
}
.uranai-area ul {
	display: flex;
	flex-wrap: wrap;
	font-size: 14px;
}
.uranai-area ul li {
	padding-bottom: 15px;
	position: relative;
	margin: 0 1% 10px;
	width: 31%;
}
.uranai-area li a {
	background-color: #736ccc;
	border-radius: 10px;
	color: #fff;
	display: inline-block;
	font-size: 120%;
	font-weight: bold;
	padding: 10px 5%;
	text-align: center;
	width: 90%;
}
.uranai-area li a:before {
	font-family: "Font Awesome 5 Free";
	content: '\f3c5';
	display: inline-block;
	font-weight: 900;
	margin-right: 8px;
}
@media screen and (min-width: 960px) {
	.uranai-area {
		padding: 20px;
		max-width: 800px;
		margin: 0 auto;
		box-sizing: border-box;
	}
}

/* ヘッダーのカテゴリーリストcss */
.category-header {
	background: rgb(245, 231, 255);
   padding: 10px 0;
	display: none;
}

.category-header ul {
	 display: flex;
    flex-wrap: wrap;
    max-width: 1030px;
    margin: 0 auto;
    justify-content: center;
	column-gap: 40px;
}

.category-header a {
	color: #000;
	font-size: 13px;
	font-weight: bold;
}

@media screen and (min-width: 960px) {
	.category-header {
		display: block;
	}
}

.ob-title {
	line-height: 1.5;
}

/* ボタンアニメーション */
.sway {
  animation: sway 2s forwards infinite ease;
  text-align: center;
  margin-top:16px;
  margin-bottom:0;
}
@keyframes sway {
  0% {
    transform: translateY(0px);
  }
  20% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(10px);
  }
  50% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(7px);
  }
  70% {
    transform: translateY(-7px);
  }
  80% {
    transform: translateY(4px);
  }
  100% {
    transform: translateY(0px);
  }
}

.overlay-banner {
	display: none;
}

@media screen and (max-width: 767px) {
	.overlay-banner {
		display: block;
		position: fixed;
		bottom: 20px;
		left: 50%;
		transform: translateX(-50%);
		z-index: 999;
	}
}

.article-list.area-list {
	margin-bottom: 60px;
}
.area-title {
	max-width: 1200px;
	padding-left: 24px;
	margin: 0 auto 24px;
}

.category-title {
	max-width: 360px;
}

@media screen and (max-width: 767px) {
	.category-title {
		max-width: 280px;
	}
}

.keyword-list ul {
	display: flex;
	padding-left: 24px;
	gap: 10px;
}
.keyword-list ul li a {
	padding: 10px;
	border: 1px solid purple;
	color: purple;
	border-radius: 5px;
}
/* ===============================
   SP：AdSense 最終安定版（微ズレ解消）
================================ */
@media (max-width: 768px) {

  /* AdSense本体 */
  ins.adsbygoogle {
    display: block !important;

    /* flex対策：必ず1行100% */
    flex: 0 0 100% !important;
    min-width: 0 !important;

    /* 中央寄せは margin ではなく幅基準で */
    width: 100% !important;
    max-width: 100% !important;

    /* subpixel対策 */
    box-sizing: border-box !important;

    /* 余計なズレ防止 */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* iframeはサイズ計算に任せる */
  ins.adsbygoogle iframe {
    display: block !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 横スクロール防止 */
  body {
    overflow-x: hidden;
  }
}

/* ===============================
   緩衝ラッパー（そのままでOK）
================================ */
.content-start {
  width: 100%;
  max-width: 100%;
}
/* ===============================
   SP：AdSense 下余白対策
================================ */
@media (max-width: 768px) {

  /* AdSense全体の余白をリセット */
  ins.adsbygoogle {
    line-height: 0 !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* iframeの下余白を消す */
  ins.adsbygoogle iframe {
    display: block !important;
    margin-bottom: 0 !important;
    vertical-align: top !important;
  }
}