@charset "UTF-8";
/*
Theme Name:   womanlife
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: 15px;}

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

#page-overview #header { background-color:#CC595A; 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; display:flex; justify-content:space-between; align-items:center;}
#header .header-logo { flex:0 0 auto; margin:0 0; height:76px;}
#header .header-logo a { display:flex; align-items:center;  height:76px; padding:0 12px;}
#header .header-logo img { width:240px; height:auto;}

.mobileonly { display:block;}
.pconly { display:none;}
@media screen and (min-width : 960px) {
	#header .header-logo { height:112px;}
	#header .header-logo a { padding:0 16px; height:112px;}
	#header .header-logo img { width:300px;}
	.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:10px;}
.menu-open { flex:0 0 auto; display:block; height:56px; width:56px; font-size:32px; line-height:56px; color:#aaa; 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 #D3BAA6; 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:#D3BAA6; 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: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;}
.search-form .search-input { flex:1 1 auto; height:48px; border:solid 1px #D3BAA6; padding:8px 16px; box-sizing:border-box; font-size:15px; width:100%; border-radius:24px;}
#top-content section h1::after { content:""; display:block; width:48px; height:48px; background:#D3BAA6; 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; margin: 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; margin: 0;}
.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:#F3E0DA!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; }

#footer .footer { font-size: 12px; background-color: #F3E0DA; 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: #666; display:inline-block; padding:0 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;
	}
}
.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: 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;
	}
}

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

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

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

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

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

.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;
}
@media screen and (min-width: 768px) {
  .map-search {
    display: block;
  }
}
.map-search h2 {
	font-size: 20px;
	position: relative;
	font-weight: normal;
	color: #666;
	font-family: initial;
}
.map-search-content {
  min-height: 400px;
  padding: 16px;
  margin-bottom: 32px;
  box-shadow: 0px 2px 8px 0px rgba(5, 5, 5, 0.1), 0px -2px 8px 0px rgba(5, 5, 5, 0.1);
  background-image: url(./assets/images/map1.png);
  background-position: center;
  background-size: 100%;
  background-repeat: no-repeat;
  aspect-ratio: 5 / 4;
  box-sizing: border-box;
}
.map-search-content .map {
  display: flex;
  flex-direction: row-reverse;
  height: 100%;
}
.map-search-content .map > div {
  width: 25%;
  display: flex;
  flex-direction: column;
}
.map-search-content .map > div.left {
  justify-content: center;
}
.map .top,
.map .bottom {
  height: 50%;
}
.map .right .top {
  padding-left: 30%;
}
.map .right .bottom {
  padding-top: 10%;
  padding-left: 15%;
  padding-right: 15%;
}
.map .mid-right .top {
  padding-top: 30%;
  padding-right: 30%;
}
.map .mid-right .bottom {
  padding-top: 40%;
  padding-left: 20%;
  padding-right: 10%;
}
.map .mid-left .top {
  padding-right: 30%;
  display: flex;
  align-items: end;
}
.map .mid-left .bottom {
  padding-left: 30%;
  display: flex;
  align-items: end;
}
.map .left .middle {
  padding-top: 35%;
  padding-right: 30%;
}
.map .block p {
  font-size: 0.8rem;
  line-height: 2;
  color: #fff;
  background-color: #736ccc;
  text-align: center;
  font-weight: bold;
  margin-bottom: 4px;
}
.map .block ul {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.map .block li {
  border: solid 1px #736ccc;
  width: calc(50% - 4px);
}
.map .block li a {
  display: block;
  font-size: 0.8rem;
  line-height: 2;
  color: var(--main-color);
  background-color: #fff;
  text-align: center;
  font-weight: bold;
}

@media screen and (max-width: 768px) {
	.map-search-content {
		min-height: auto;
		padding: 16px;
		box-shadow: none;
		background-image: none;
		aspect-ratio: initial;
	}
	.map-search-content .map {
		display: block;
	}
	.map-search-content .map > div {
		display: block;
		width: auto;
	}
	.map .right .top {
		padding-left: 0;
	}
	.map .right .bottom {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.map .mid-right .top {
		padding-top: 0;
		padding-right: 0;
	}
	.map .mid-right .bottom {
		padding-top: 0;
		padding-left: 0;
		padding-right: 0;
	}
	.map .mid-left .top {
		padding-right: 0;
		display: block;
	}
	.map .mid-left .bottom {
		padding-left: 0;
		display: block;
	}
	.map .left .middle {
		padding-top: 0;
		padding-right: 0;
	}
	.map .block p {
		color: #000;
		background: none;
		text-align: left;
		font-size: 13px;
		border-bottom: 2px solid #736ccc;
		margin: 1.5em 0 1em;
	}
	.map .block ul {
		gap: 0;
	}
	.map .block li {
		border: none;
		padding-bottom: 15px;
		position: relative;
		margin: 0 1% 10px;
		width: 31%;
	}
	.map .block li a {
		background-color: #736ccc;
		border-radius: 10px;
		color: #fff;
		display: inline-block;
		font-size: 100%;
		font-weight: bold;
		padding: 10px 5%;
		text-align: center;
		width: 90%;
	}
	.map .block li a::before {
		font-family: "Font Awesome 5 Free";
    	content: '\f3c5';
    	display: inline-block;
    	font-weight: 900;
    	margin-right: 8px;
	}
}