@charset "UTF-8";
/*
Theme Name:   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;}
img { vertical-align:bottom;}
ul, li { list-style:none;}
a { color:#333; text-decoration:none;}
a:hover { text-decoration:none;}
p { margin-bottom: 15px;}

:root {
--maincolor: #f7f3c6;
--subcolor: #10A199;
--bgcolor: #fff;
--subcolor-op2: rgba(203, 136, 255,0.2);
}

#page-overview #header { background-color:#f7f3c6; color:var(--maincolor);}
#main footer { background:none;}

#content { display:flex; flex-wrap:wrap; margin:0 auto;}
#main { width:100%;}
#main h1 { font-weight:700;}
#sidebar { width:100%;}
#sidebar h2 { font-weight:700;}

#header { width:100%; background:#F3ECCF;}
#header .header-logo { margin:0 0; height:56px;}
#header .header-logo a { display:flex; height:56px; padding:0 16px; flex-direction:column;}
#header .header-logo .logo { display:inline-flex; line-height:1.1; color:var(--maincolor); font-weight:bold; font-size:12px; padding-top:4px;}
#header .header-logo img { width:128px; height:auto; display:block;}

.mobileonly { display:block;}
.pconly { display:none;}
@media screen and (min-width : 960px) {
	.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(--maincolor); 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:75%; height:100vh; background:#f0f0f0; padding:56px 16px; box-sizing:border-box; position:absolute; top:0; right:0; z-index:14;}
.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;}
.search-form { display:flex; position:relative;}
.search-form .search-input { flex:1 1 auto; height:48px; border:solid 1px #666; padding:8px 16px; box-sizing:border-box; font-size:15px; width:100%; border-radius:24px;}
.search-form .search-button { flex:0 0 auto; height:48px; width:48px; border:none; background:none; color:#666; text-align:center; cursor:pointer; position:absolute; right:0;}
.search-form .search-button::before { content:"\e8b6"; font-family:Material Icons; font-size:30px; line-height:48px;}
@media screen and (min-width: 960px) {
	.hamburger-menu {
		display: none;
	}
}
@media screen and (min-width : 768px) {
	.menu-inner { padding:56px 24px;}
}

#top-carousel { width:100%; height:calc(100vw * 1.2); background:#aaa; flex:0 0 auto;}
@media screen and (min-width : 768px) {
	#top-carousel { height:calc(100vw * 0.5625);}
}
@media screen and (min-width : 960px) {
	#top-carousel { max-height:650px;}
}

#top-content { width:100%; max-width:1200px; margin:0 auto;}
#top-content section { flex:0 0 auto; width:100%; 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:var(--maincolor); opacity:0.8; 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;}
#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:#eee!important;}
#footer .footer-logo a img { width:140px!important;}
#footer .copyright {color:#000!important;}
#footer .footer { font-size: 12px; background-color: var(--maincolor); color: #000;}
@media screen and (min-width : 1080px) {
	#footer .footer { font-size: 14px;}
}
#footer .container { padding: 40px 20px;}
#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 .company .copyright { font-size:12px; margin-top: 20px; color: #FCE6D1; padding:0;}

#footer .site { text-align:center;}
#footer .site-nav { display: block; }
@media screen and (min-width : 1080px) {
	#footer .site-nav { display: flex; justify-content: center; gap: 15px;}
}
#footer .site-nav a { color: #000; font-weight: bold; display:inline-block; padding:5px;}

.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:#666;}

/* ショートコードの擬似見出し用 */
.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: 24px;
		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: 960px;
    margin: 0 auto;
    justify-content: center;
	column-gap: 50px;
}

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

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

/* ヘッダーの検索窓css */
.header-search-area {
	display: none;
}

@media screen and (min-width: 960px) {
	.header-search-area {
		display: block;
		width: 260px;
	   position: absolute;
	   top: 10px;
	   right: 20px;
	}

	.header-search-area .search-form .search-input {
		height: 38px;
		border-color: #736ccc;
	}

	.header-search-area .search-form .search-button {
		width: 38px;
		height: 38px;
		border-top-right-radius: 24px;
		border-bottom-right-radius: 24px;
		background: #736ccc;
	}

	.header-search-area .search-form .search-button::before {
		font-size: 20px;
		line-height: 38px;
		color: #fff;
	}
}

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

.comment-form-comment label {
	color: #000;
}
.form-submit .submit {
	color: #000;
}

.mkj-title, #mkj .mkj-list>li:before {
	color: #666!important;
}
.mkj-openclose {
	background: rgba( 247, 243, 198, 0.8)!important;
	color: #666!important;
}

.is-style-titlebox-mark1 .ob-title,
.is-style-titlebox-mark2 .ob-title,
.is-style-titlebox-mark3 .ob-title,
.is-style-titlebox-mark4 .ob-title,
.is-style-titlebox-mark5 .ob-title,
.is-style-titlebox-mark7 .ob-title {
	color: #666!important;
}

.is-style-titlebox-mark1,
div.is-style-titlebox-mark2{
	background-color: rgba( 247, 243, 198, 0.3)!important;
}

.is-style-titlebox-mark3 {
	border-color: rgba( 247, 243, 198, 0.3)!important;
}

#footer .footer-container {
	margin-bottom: 24px;
}

#footer .footer-container .footer-right h2 {
	font-size: 16px;
}

#footer .footer-container .footer-right a {
	font-size: 13px;
	color: #000;
}