@charset "utf-8";
:root{
--theHEX:#086391;
--theRGB:8,99,145;
--theHSL:200deg,90%,30%;
--theHUE:200deg;
}
body {background-image:linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.2)),url(/images/index/opal200503.jpg);}
header.hdr01 {background-color:rgba(0,0,0,0.1);}
.page-footer{background-color:rgba(0,0,0,0.1);}
.navListCover{background-color:rgba(0,0,0,0.3);}
.abouts{background-color:rgba(0,0,0,0.1);}

.text01{
font-size:70%;
margin-top:20px;
margin-bottom:20px;
}
hr.decohr01 {
border:none;
height:9px;
padding:5px 0;
background-image:radial-gradient(10px,#ddd 1px,transparent 2px);
background-size: 10px 10px;
background-repeat: repeat-x;
background-position: left center;
}

/* tomenuall 占い全メニューはこちら */
.tomenuall {text-align: center;}
.tomenuall a {
background-color: rgba(255,255,255,0.3);
display: inline-block;
color: #333;
padding: 1rem;
border-radius:8px;
border: 1px solid #ccc;
box-shadow: 3px 3px 1px rgba(0,0,0,0.1);
}
.tomenuall a::before {content: "▼";color: #999;}
@media (any-hover:hover),(min-width:960px){
.tomenuall {
background-image:linear-gradient(90deg, rgba(0,0,0,.4), rgba(0,0,0,.8)),url(/images/index/opal200503.jpg);
background-position:center,center 132px;
/*text-align:right;*/
}
.tomenuall a {
background-color:transparent;
color: #fff;
padding: 0.5rem 1rem;
border-radius:0px;
border: none;
box-shadow: none;
}
}

/* contbox,noteBlock */
.contbox {margin: 2rem auto;}
.noteBlock {
margin:0 auto;
padding:10px;
}
@media (any-hover:hover),(min-width:960px){
.contbox > .noteBlock {
border:1px solid rgba(0,0,0,0.1);
border-radius:0 0 8px 8px;
}
.contbox h2,.contbox .wdbgcol{border-radius:8px 8px 0 0;}
}

/* h2 */
h2 {
height:80px;
display: flex;
align-items: center;
justify-content: center;
}
.contbox h2 img, .contbox h2 svg, .contbox h2 span,
.mabox01 dt h2 img, .mabox01 dt h2 svg, .mabox01 dt h2 span{margin: auto;}
.h2inner{
display: flex;
align-items: center;
max-width: 640px;
width: calc(100% - 20px);
height:100%;
}
.contbox h2{
background-image: url(/images/index/box-bg-06.png);
background-color:var(--theHEX);
color:#fff;
}
.contbox h2 img{
max-height: 30px;
filter: drop-shadow(0px 0px 3px rgba(0,0,0,0.9));
}
.h2inner {
display: flex;
align-items: center;
max-width: 640px;
width: calc(100% - 20px);
height: 100%;
}
/* h3 */
.contArea02 h3 {
height:80px;
display: flex;
align-items: center;
justify-content: center;
/*
padding: 3rem 0;
margin: 0 auto 2rem;
*/
padding:50px 0;
--dotcol1:221,221,221;
background-image: radial-gradient(circle at center, rgb(var(--dotcol1)) 20%, rgba(var(--dotcol1), 0) 30%), radial-gradient(circle at center, rgb(var(--dotcol1)) 20%, rgba(var(--dotcol1), 0) 30%);
background-size: 12px 12px;
background-repeat: repeat-x;
background-position: left top, left bottom;
}

/* 更新情報 */
.updateinfo h2 {height:30px;}
.updateinfo h2 img {
height:70%;
width:auto;
}
.updateinfo h2 .h2inner {
background-image: url(/images/common/twit.png), url(/images/common/twit2.png);
background-repeat: no-repeat, no-repeat;
background-size: auto 100%;
background-position: 0 top, right bottom;
color: #fff;
font-size: 20px;
font-weight: normal;
}

/* 月相 */
path.sh,circle.sh {fill:navy;fill-opacity:0.3;}
path.li,circle.li {fill:gold;fill-opacity:0.3;}
.moonphase h2{
background: url(/images/index/hdg-index-moonphase2-bg3.png) no-repeat right center #006991;
padding: 2px;
background-color: #006991;
background-image: url(/images/index/hdg-index-moonphase2-bg1.png), url(/images/index/hdg-index-moonphase2-bg3.png), url(/images/index/hdg-index-moonphase2-bg2.png);
background-repeat: no-repeat, no-repeat, no-repeat;
background-position: -15px 70%, right center, 0px 0px;
background-size: auto auto, auto auto, 100% 100%;
box-shadow: 0px 0px 30px 0px rgba(0,0,0,20%) inset;
}
.moonphase h2 img{filter: drop-shadow(0px 0px 5px hsl(196, 85%, 10%));}
.moonphase .imagebox01 svg {
width: 100%;
height: 100%;
background: url(/images/moonphase/img-moon6.png) no-repeat center center transparent;
background-size: 99% 99%;
}
.moonphase .imagebox01{
display:block;
width: 70px;
height: 70px;
margin-right: 10px;
float:left;
}
/*.moonphase .noteBlock{padding:1em 0;}*/
.moonphase .noteBlock > hr{width:60%;}
.moonphase .noteBlock p:not(:last-child){margin-bottom:1rem;}
.moonphase time{
display: block;
line-height: 1.6;
margin-bottom: 1rem;
}

/* 曜日 */
.weekDay .noteBlock {padding-top:0;}
.weekDay .noteBlock .itembox{padding-top:1em;padding-bottom:1em;}
.weekDay .noteBlock .hdg{
--headcolHsl:240,0%,50%;
font-weight:bold;line-height:2em;padding-left:1.5em;
background-image:radial-gradient(circle at 0.5em, hsla(var(--headcolHsl),1) 0.4em, hsla(var(--headcolHsl),0.9) 0.45em, hsla(var(--headcolHsl),0) 0.5em);
}
.weekDay .noteBlock .hdg-2 {font-weight: bold;line-height: 2em;margin: 1em 0;}
.weekDay .noteBlock .caution{margin-top:1em;font-size:0.9em;}

.weekDay .itembox:not(:last-child){border-bottom:3px dotted rgba(127,127,127,0.15);}
.weekDay .wdbgcol{
display: flex;align-items: center;justify-content: center;
--wdbgcolHeight:80px;height:var(--wdbgcolHeight);
background-color:#eee;
}
.weekDay h2{
flex:1;height:var(--wdbgcolHeight);
background: url("/images/index/hdg-index-weekday-2-deco2.png") left center no-repeat;
box-shadow: 0px 0px 30px 0px rgba(0,0,0,10%) inset;
}
.weekDay .decoInner01{
display: flex;align-items: center;justify-content: center;flex:1;height:var(--wdbgcolHeight);
background-image:url();
background-repeat: no-repeat;
background-position:right center;
background-size:auto 130%;
}
.weekDay .decoInner01 img{display: block;--shadowcol:rgba(0,0,0,0.3);-webkit-filter: drop-shadow(0 0 2px var(--shadowcol));filter: drop-shadow(0 0 2px var(--shadowcol));}
.weekDay .hymn{
min-height:430px;
background-repeat: no-repeat;
background-position:right bottom;
background-size:60% auto;
}
.weekDay .hymn .hymnTxts{text-shadow: 0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 2px #fff,0 0 4px #fff,0 0 6px #fff;}
/* 月曜 */
.weekDay1{--wdCol:#bfa59c;--wdColhsl:15,21%,68%;}
.weekDay1 .wdbgcol {
background-color:var(--wdCol);
background-image:url("/images/index/mop_01.webp");
background-size:cover;
}
.weekDay1 .decoInner01 {
background-image:url("/images/index/wd-mon-01_02.png");
background-size:auto 140%;
}
.weekDay1 .decoInner01 img{--shadowcol:rgba(0,0,0,0.8);}
.weekDay1.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay1 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay1 .hymn{
background-image:url("/images/index/wdpl01.png");
background-size:95% auto;
}
/* 火曜 */
.weekDay2{--wdCol:#AD1E23;--wdColhsl:358,70%,40%;}/* #AD1E23 */
.weekDay2 .wdbgcol {background-color:hsl(var(--wdColhsl));}
.weekDay2 .decoInner01 {
background-image:url("/images/index/wd-tue-01_2.png");
background-size:auto 120%;
background-position:right top -5%;
}
.weekDay2.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay2 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay2 .hymn{background-image:url("/images/index/wdpl02.png");}
/* 水曜 */
.weekDay3{--wdCol:##098ED1;--wdColhsl:200,91%,43%;}/* hsla(200,92%,43%,1.00) #098ED1 */
.weekDay3 .wdbgcol {background-color:hsl(var(--wdColhsl));}
.weekDay3 .decoInner01 {background-image:url("/images/index/wd-wed-01_2.png");background-position:right -20px center;}
.weekDay3.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay3 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay3 .hymn{background-image:url("/images/index/wdpl03.png");}
/* 木曜 */
.weekDay4{--wdCol:#3D03B8;--wdColhsl:259,97%,37%;}
.weekDay4 .wdbgcol {background-color:hsl(var(--wdColhsl));}
.weekDay4 .decoInner01 {background-image:url("/images/index/wd-thu-01.png");}
.weekDay4.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay4 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay4 .hymn{background-image:url("/images/index/wdpl04.png");}
/* 金曜 */
.weekDay5{--wdCol:#F43D99;--wdColhsl:330,90%,60%;}/* color:#F43D99; */
.weekDay5 .wdbgcol {background-color:hsl(var(--wdColhsl));}
.weekDay5 .decoInner01 {background-image:url("/images/index/wd-fri-01.png");}
.weekDay5.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay5 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay5 .hymn{background-image:url("/images/index/wdpl05.png");}
/* 土曜 */
.weekDay6{--wdCol:#2c3952;--wdColhsl:220,30%,25%;}/* hsla(219,30%,25%,1.00) */
.weekDay6 .wdbgcol {background-color:hsl(var(--wdColhsl));}
.weekDay6 .decoInner01 {background-image:url("/images/index/wd-sat-01.png");}
.weekDay6.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay6 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay6 .hymn{background-image:url("/images/index/wdpl06.png");}
/* 日曜 */
.weekDay7{--wdCol:#f8671c;--wdColhsl:20,94%,54%;}/* hsla(20,94%,54%,1.00) */
.weekDay7 .wdbgcol {background-color:var(--wdCol);}
.weekDay7 .decoInner01 {
background-image:url("/images/index/wd-sun-01.png");background-position:right -20px center;
}
.weekDay7.weekDay .itembox{border-color:hsla(var(--wdColhsl),0.2);}
.weekDay7 .noteBlock .hdg{--headcolHsl:var(--wdColhsl);}
.weekDay7 .hymn{
background-image:url("/images/index/wdpl07.png");
background-size:95% auto;
}

/* リンク（相互リンクなど） */
.links .noteBlock .hdg{
font-weight:bold;line-height:2em;padding-left:1.5em;
background-image:radial-gradient(circle at 0.5em, hsla(var(--theHSL),1) 0.4em, hsla(var(--theHSL),0.9) 0.45em, hsla(var(--theHSL),0) 0.5em);
}
.links .note02 ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
gap:10px;
}

/* レビュー */
.review dl:not(:last-child) {margin-bottom:1em;}
.review dl .datetime{
clear:both;
text-align: right;
font-size: 80%;
font-style: italic;
}
.review dt, .review dt a {color: #2F61AF;}
.review dt{
padding: 1rem 0;
background: url(/images/common/line/line-dot-02.gif) repeat-x left bottom;
}
.review dt p.title {
font-size: 120%;
margin-bottom: 10px;
}
.review dt p {line-height: 1em;}
.review dt p.author {
display: inline-block;
margin-top: 10px;
margin-right: 1em;
font-size: 80%;
}
.review dd {padding: 10px 0;}
.review .rvcont .floatL{margin-right:1em;}
.review .rvcont p {
text-indent: 1em;
margin-bottom: 1em;
}

/* menu all*/
#menuAll {
margin-top:3rem;
padding-bottom:2em;
}
#menuAll h2 {
background-color:#000;
color:#fff;
height:2.5em;
}
#menuAll > .capture{
margin:1em auto;
text-align: center;;
}
#menuAll > .capture > span {
display: inline-block;
text-align: left;
margin:0 0.5em;
}
.cateNote {padding:10px;}

/*.idxsmenu*/
.idxsContMenu{margin: 20px 10px 10px;text-align: left;}
.idxsContMenu li{margin: 30px auto;}
.idxsContMenu li > a,.idxsContMenu li form.nobtn .submit {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><polygon points="0,0 100,50 0,100" style="fill:teal;" /></svg>');
background-position: left center;
background-repeat: no-repeat;
background-size: auto 1em;
transition: 0.2s;
display: inline-flex;
align-items: center;
line-height:1em;
padding-left:2em;
}
.idxsContMenu li > p {padding-left:2em;}
.idxsContMenu li form.nobtn .submit {text-decoration: underline;color:rgb(0, 0, 238);}
@media (any-hover:hover){
.idxsContMenu li form.nobtn .submit:hover{opacity:0.7;}
}
.idxsContMenu.formlink{margin:20px auto 10px;}
.idxsContMenu.formlink li{margin:10px auto;}
.idxsContMenu.formlink li form.nobtn .submit {
padding:20px 0 20px 2em;
background-size: auto 1.5em;
padding-left:42px;
}
.rune .idxsContMenu{max-width:calc(5em + 1.5em + 10px);}
.rune .idxsContMenu li form.nobtn .submit {background-image:url(/images/index/icon17-02.svg);}
.eki .idxsContMenu{max-width:calc(3em + 1.5em + 10px);}
.eki .idxsContMenu li form.nobtn .submit {background-image:url(/images/index/icon09.svg);}
.astro .idxsContMenu li a {
background-image:url(/images/index/icon10.svg);
background-size: auto 1.3em;
line-height:2em;
}

/* tarot */
.tarot h4{
margin:1em auto;
text-align: center;;
}
.tarot h4 img{
width:100%;
max-width:600px;
height:auto;
}
.cateNote {padding:10px;}

.qlistwrap {margin:10px;}
.spread .qlistwrap{margin-top:30px;}
.qlistwrap h5{
text-align: center;
color:#8e2233;
font-weight:bold;
}
.qlistwrap h5 .deco {
display:inline-block;
padding: 0 4em;
background-image: url(/images/tarot/hdg-bg-01_04.png), url(/images/tarot/hdg-bg-01_05.png);
background-repeat: no-repeat, no-repeat;
background-position: left center, right center;
background-size: auto 0.6em, auto 0.6em;
font-size: 1.2em;
}
.queslist{margin:1em 0 3em;}
.queslist li {
background-image:url(/images/index/icon12.svg);
background-size:auto 1em;
background-repeat:no-repeat;
padding-left:2em;
margin:1em 0;
}
.onework .queslist li {background-image:url(/images/index/icon13.svg);}
.onerelation .queslist li {background-image:url(/images/index/icon14.svg);}
.spread .queslist li {background-image:url(/images/index/icon15.svg);}

/* daily */
/* zodiac */
.zodiac {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
margin:2rem auto 2rem;
width:960px;
width:min(calc(100% - 2rem),960px);
}

.zodiac li{
width:calc((100% - 12px) / 3);
margin-bottom:4px;
}
@media screen and (min-width:420px){/* 420以上 */
.zodiac li{width:calc((100% - 12px) / 4);}
/* ここまで420以上 */}
@media screen and (min-width:520px){/* 520以上 タブレット */
.zodiac li{width:calc((100% - 20px) / 6);}
/* ここまで520以上 */}
@media screen and (min-width:960px){/* 960以上 PC */
/*.zodiac li{width:calc((100% - 55px) / 12);margin-bottom:0;}*/
/* ここまで960以上 */}

.zodiac li a {
display: block;
border-radius: 5px;
position: relative;
}
.zodiac svg.sign {
fill:rgba(255,255,255,0.15);
margin:0 auto 0;
height:90px;
width:auto;
display: block;
}
.zodiac li a > div {
position:absolute;
top:0px;
left:0;
width:100%;
height:100%;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
gap:1px;
}
.zodiac svg.astchar {
height:40px;
width:auto;
}
.svg-symbol-astropict2 g {/* svgファイル内で設定してる項目はここではこう書かないと反映されない */
stroke:#fff;
stroke-width:8px;
}
.zodiac li div span {
color:#fff;
width:100%;
text-align: center;
display: block;
}
.zodiac svg.astchar,.zodiac li div span{
-webkit-filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4));filter: drop-shadow(0px 0px 4px rgba(0,0,0,0.4));
}
.zodiac li span.jp {font-size:120%;}
.zodiac li span.en {font-size:70%;}
.zodiac li a,form.sunSeachForm select,.sunsearchinput,.sunsign .signico a[href*="/daily/"] {
box-shadow: 3px 3px 3px rgba(0,0,0,0.3);
transition-duration:0.2s;
}
li.sco div svg{margin-left:10px;}
/* zodiacの色 */
.zodiac li a{
background-color:rgba(0,0,0,0.2);
--bgcol01:0,0,0;
--alpha01:1;
background-color:rgba(var(--bgcol01),var(--alpha01));
background-image: url(/images/index/box-bg-06.png);
}
.sunsign a {
background-color:rgba(0,0,0,0.5);
--bgcol01:0,0,0;
--alpha01:1;
background-color:rgba(var(--bgcol01),var(--alpha01));
}
@media (any-hover:hover){
.zodiac li a:hover{
opacity: 1;
box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.3);
}
.zodiac li a:hover ,.sunsign a:hover{--alpha01:0.6;}
}
.zodiac li a.aribgcol,.signico a.aribgcol{--bgcol01:var(--col-rgb-ari);}
.zodiac li a.taubgcol,.signico a.taubgcol{--bgcol01:var(--col-rgb-tau);}
.zodiac li a.gembgcol,.signico a.gembgcol{--bgcol01:var(--col-rgb-gem);}
.zodiac li a.canbgcol,.signico a.canbgcol{--bgcol01:var(--col-rgb-can);}
.zodiac li a.leobgcol,.signico a.leobgcol{--bgcol01:var(--col-rgb-leo);}
.zodiac li a.virbgcol,.signico a.virbgcol{--bgcol01:var(--col-rgb-vir);}
.zodiac li a.libbgcol,.signico a.libbgcol{--bgcol01:var(--col-rgb-lib);}
.zodiac li a.scobgcol,.signico a.scobgcol{--bgcol01:var(--col-rgb-sco);}
.zodiac li a.sagbgcol,.signico a.sagbgcol{--bgcol01:var(--col-rgb-sag);}
.zodiac li a.capbgcol,.signico a.capbgcol{--bgcol01:var(--col-rgb-cap);}
.zodiac li a.aqubgcol,.signico a.aqubgcol{--bgcol01:var(--col-rgb-aqu);}
.zodiac li a.pisbgcol,.signico a.pisbgcol{--bgcol01:var(--col-rgb-pis);}

/* searchMySun */
.searchMySun {margin:3rem auto 3rem;text-align: center;}
.searchMySun h4{
  margin-bottom:20px;
  background-image: url(/images/index/icon16.png),url(/images/index/icon16.png);
  background-repeat:no-repeat;
  background-position:left center,right center;
  background-size:auto 48px;
  background-size:auto 100%;
  padding:16px 58px;
  display: inline-block;
}

form.sunSeachForm select {
margin:0 auto 10px;
-webkit-background-clip: text;
        background-clip: text;
}
form.sunSeachForm select::-ms-expand {display: none;}
form.sunSeachForm select option {
background-color:#fff;
color:#333;
}
form.sunSeachForm .sunsearchinput {
background-image: url(/images/index/icon16.png);
background-size:auto 135%;
background-position:-5% center;
}
form.sunSeachForm select,form.sunSeachForm .sunsearchinput {
border: 1px solid #999;
background-color:transparent;
border-radius:5px;
}
@media (any-hover:hover){
form.sunSeachForm select:hover,.sunsearchinput:hover {
opacity: 1;
box-shadow: 0px 0px 10px rgba(255,255,255,0.3);
color:navy;
}
}
@-moz-document url-prefix(){/* firefoxのみ */
form.sunSeachForm select:hover{
background-color:#fff;
color:#000;
}
}