@charset "utf-8";
@media (any-hover:hover){
:focus{outline-color:rgba(255,255,255,0.6);}
select{cursor: pointer;}
}
body{
background-color:#3D5257;
background-image: url(/images/index/box-bg-06.png);
color:#fff;
text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
.wrap{
background-image: url(/images/index/box-bg-06.png), linear-gradient(
180deg,#0C1929, #3D5257, #668983, #93A892, #B7C4A6, #DEDEC4);
background-size:auto, 100% 100%;
background-position:center top, center center;
background-repeat:repeat, no-repeat;
}
header.hdr01{background-color:transparent;}
main {background-color:transparent;}

/* 見出し 共通 */
.h1wrap{
text-align: center;
padding:0;margin:0 auto;
}
.h1wrap img {
filter:drop-shadow(0 0 5px rgba(255,255,255,0.5));
width:auto;
width:500px;
}
.h1wrap hr {margin-top:0;}
h2{
display: flex;
justify-content: space-between;
justify-content: space-evenly;
align-items: center;
gap:5px;
margin:20px auto;
}
h2 img {filter: drop-shadow(0 0 5px rgba(255,255,255,0.5));}

/* hr */
@media (any-hover: hover), (min-width: 960px) {
  header + hr {display: none;}
}
hr.daily-hr01 {
border:none;
height:6px;
--col-rgb01:200,200,200;
background-image:/* 変数読めない用 */
radial-gradient(circle at left 4px top 50%, rgba(200,200,200,0.1) 2px, rgba(200,200,200,0) 3px),
radial-gradient(circle at left 15px top 50%, rgba(200,200,200,0.1) 1px, rgba(200,200,200,0) 1px),
radial-gradient(circle at left 26px top 50%, rgba(200,200,200,0.1) 1px, rgba(200,200,200,0) 1px);
background-image:
radial-gradient(circle at left 4px top 50%, rgba(var(--col-rgb01),0.1) 2px, rgba(var(--col-rgb01),0) 3px),
radial-gradient(circle at left 15px top 50%, rgba(var(--col-rgb01),0.1) 1px, rgba(var(--col-rgb01),0) 1px),
radial-gradient(circle at left 26px top 50%, rgba(var(--col-rgb01),0.1) 1px, rgba(var(--col-rgb01),0) 1px);
background-size:34px 100%;
background-repeat:repeat-x;
}
hr.daily-hr01.col2{
background-image:/* 変数読めない用 */
radial-gradient(circle at left 4px top 50%, rgba(0,0,0,0.2) 2px, rgba(0,0,0,0) 3px),
radial-gradient(circle at left 15px top 50%, rgba(0,0,0,0.2) 1px, rgba(0,0,0,0) 1px),
radial-gradient(circle at left 26px top 50%, rgba(0,0,0,0.2) 1px, rgba(0,0,0,0) 1px);
--col-rgb01:0,0,0;
background-image:
radial-gradient(circle at left 4px top 50%, rgba(var(--col-rgb01),0.2) 2px, rgba(var(--col-rgb01),0) 3px),
radial-gradient(circle at left 15px top 50%, rgba(var(--col-rgb01),0.2) 1px, rgba(var(--col-rgb01),0) 1px),
radial-gradient(circle at left 26px top 50%, rgba(var(--col-rgb01),0.2) 1px, rgba(var(--col-rgb01),0) 1px);
}
hr.daily-hr01.col3{
background-image:/* 変数読めない用 */
radial-gradient(circle at left 4px top 50%, rgba(210,210,210,0.2) 2px, rgba(210,210,210,0) 3px),
radial-gradient(circle at left 15px top 50%, rgba(210,210,210,0.2) 1px, rgba(210,210,210,0) 1px),
radial-gradient(circle at left 26px top 50%, rgba(210,210,210,0.2) 1px, rgba(210,210,210,0) 1px);
--col-rgb01:210,210,210;
background-image:
radial-gradient(circle at left 4px top 50%, rgba(var(--col-rgb01),0.2) 2px, rgba(var(--col-rgb01),0) 3px),
radial-gradient(circle at left 15px top 50%, rgba(var(--col-rgb01),0.2) 1px, rgba(var(--col-rgb01),0) 1px),
radial-gradient(circle at left 26px top 50%, rgba(var(--col-rgb01),0.2) 1px, rgba(var(--col-rgb01),0) 1px);
}

/* zodiac */
.zodiac {
display: flex;
flex-wrap: wrap;
justify-content:space-between;
margin:5rem auto 3rem;
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:90%;*/
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:0.3;
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:0.5;
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.8;}
}
.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 .hdgh2{margin-bottom:20px;}
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-02.png);
background-size:auto 135%;
background-position:-5% center;
}
form.sunSeachForm select,form.sunSeachForm .sunsearchinput {
border: 1px solid #999;
background-color:transparent;
color:#fff;
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);
}
}
@-moz-document url-prefix(){/* firefoxのみ */
form.sunSeachForm select:hover{
background-color:#fff;
color:#000;
}
}

/* theSun 今の太陽星座 */
h2.sign span.icon {
display: block;
border-radius: 50%;
--icosize01:50px;
height: var(--icosize01);width: var(--icosize01);
height: min(13vw,var(--icosize01));
width: min(13vw,var(--icosize01));
}
h2.sign span.icon svg {
height: 100%;width: auto;
stroke:none;
fill:rgba(255,255,255,0.2);
}
/* コンテンツ */
.noteBlock{/* タイトル直下の説明文など */
color:inherit;
margin: 2.2rem auto 3rem;
}
time.today {
display: block;
text-align: center;
margin:40px auto;
}
section time.today:not(:first-of-type){
border-top:5px solid rgba(0,0,0,0.1);
margin-top:30px;
padding-top:20px;
}
.block01{
text-align: left;
padding: 10px 0;
max-width: none;
}
.block01 p{margin: 1.5rem 0;line-height:1.8;}

.block02{
line-height:1.8;
margin:20px auto;
}
section ~ hr {margin:3em auto;}

/* 各星座 */
.mysign .todayfortune h3{
text-align:center;
line-height:1.5em;
margin-top:1rem;
margin-bottom:2rem;
margin:3em auto;
}
.mysign .todayfortune h3 span{
display: block;;
}
.mysign .block02{text-indent:1.5em;}
.mysign .block02 > span{display: block;}
.zodiacimg {text-align: center;}
.zodiacimg img {
width:80%;
height:auto;
}
.hdot01 {padding-left:1.5em;
background-image:radial-gradient(circle at 0.5em 0.8em,rgba(0,0,0,0.2) 0.44em,rgba(0,0,0,0) 0.5em);
--hdotrgb:255,165,0;
background-image:radial-gradient(circle at 0.5em 0.8em,rgba(var(--hdotrgb),0.3) 0.44em,rgba(var(--hdotrgb),0) 0.5em);
}
.ari .hdot01{--hdotrgb:var(--col-rgb-ari);}
.tau .hdot01{--hdotrgb:var(--col-rgb-tau);}
.gem .hdot01{--hdotrgb:var(--col-rgb-gem);}
.can .hdot01{--hdotrgb:var(--col-rgb-can);}
.leo .hdot01{--hdotrgb:var(--col-rgb-leo);}
.vir .hdot01{--hdotrgb:var(--col-rgb-vir);}
.lib .hdot01{--hdotrgb:var(--col-rgb-lib);}
.sco .hdot01{--hdotrgb:var(--col-rgb-sco);}
.sag .hdot01{--hdotrgb:var(--col-rgb-sag);}
.cap .hdot01{--hdotrgb:var(--col-rgb-cap);}
.aqu .hdot01{--hdotrgb:var(--col-rgb-aqu);}
.pis .hdot01{--hdotrgb:var(--col-rgb-pis);}

/* 全星座共通 */
/* 以下はほぼ全てスマホcssからコピペ */
.global {
background-image:url("/images/daily/moonstar.png");
background-image:-webkit-image-set(
url('/images/daily/moonstar.png') 1x,
url('/images/daily/moonstar@2x.png') 2x,
url('/images/daily/moonstar@3x.png') 3x
);
background-image:image-set(
url('/images/daily/moonstar.png') 1x,
url('/images/daily/moonstar@2x.png') 2x,
url('/images/daily/moonstar@3x.png') 3x
);
background-repeat:no-repeat;
background-position:right top;
background-size:168px 153px;
}
.global h2 {
text-align:center;
background-image:url("/images/daily/conusikai.png");
background-image:-webkit-image-set(
  url('/images/daily/conusikai.png') 1x,
  url('/images/daily/conusikai@2x.png') 2x,
  url('/images/daily/conusikai@3x.png') 3x
  );
background-image:image-set(
  url('/images/daily/conusikai.png') 1x,
  url('/images/daily/conusikai@2x.png') 2x,
  url('/images/daily/conusikai@3x.png') 3x
  );
background-position:2rem center;
background-repeat:no-repeat;
background-size:auto 100%;
padding:40px 0 0;
height:70px;
/*margin-bottom:40px;*/
}

.global h3 {
font-weight:bold;
margin-bottom:1rem;
background:url("/images/daily/ico-kira01-20px.png") left center no-repeat transparent;
background-image: url("/images/daily/ico-kira01-20px.png");
background-image:-webkit-image-set(
 url('/images/daily/ico-kira01-20px.png') 1x,
 url('/images/daily/ico-kira01-40px.png') 2x,
 url('/images/daily/ico-kira01-60px.png') 3x
 );
background-image:image-set(
 url('/images/daily/ico-kira01-20px.png') 1x,
 url('/images/daily/ico-kira01-40px.png') 2x,
 url('/images/daily/ico-kira01-60px.png') 3x
 );
padding-left:28px;
}
.osusume .block02{margin-left:1.5em;}
.osusume span {
display: inline-block;
margin-right:1em;
}
.voidinfo .block02 span{display: block;}
.voidinfo .block02 span.date{margin:1em auto;}
.voidinfo .block02 span.text{text-indent:1.5em;}
.ttltxt {
margin:1em auto;
font-weight:bold;
}
.cmbst p{
text-indent: 1.5em;
}
.moonphase .list{
margin-top:1em;
}


/* planetary hours */
.plhour h3{
text-align:center;
margin-bottom:40px;
}
.plhour .acdbox.nogaki {margin:20px auto 0;}
.plhour .acdbox label {
display: flex;
line-height:1.2em;
align-items: center;
padding-right:0.5em;
-webkit-transition-duration: 0.3s;-o-transition-duration: 0.3s;transition-duration: 0.3s;
background-color: rgba(0,0,0,0.15);
height: 45px;
}
.plhour .acdbox input:checked + label + .acdCont {min-height: 400px;}
.plhour .acdbox input:checked + label {background-color: rgba(0,0,0,0.3);}
.plhour .acdbox label::before {line-height:45px;background-color: rgba(0,0,0,0.2);display: inline-block;width:3em;margin-right:0.5em;}
.plhour .acdbox label span {display: inline-block;width:calc(100% - 3em);}
.plhour .acdbox .acdCont {
text-shadow: none;
background-color:rgba(255,255,255,0.25);
color:#000;
}
.plhour .acdbox input:checked ~ .acdCont{ margin-top:10px; }
.plhour .acdCont p {text-indent: 1em;}
.plhour .acdbox.nogaki .hdg {
margin-top:1.5em;
line-height: 1.8;
font-weight: bold;
padding-left:1.5em;
background-image:radial-gradient(circle at 0.5em 0.8em,rgba(59,107,103,0.8) 0.44em,rgba(59,107,103,0) 0.5em);
}
.plhour .acdbox.nogaki table {margin:0 auto;}
.plhour .acdbox.nogaki tr:first-child{background-color:rgba(0,0,0,0.05);}
.plhour .acdbox.nogaki td {
border:1px solid rgba(0,0,0,0.1);
padding:5px;
text-align: center;
}
.plhour .acdbox.nogaki table.scoreitems tr:not(:nth-child(1)) td:nth-child(1){text-align: left;}
.caution{margin:10px 0;}
.caution p {
margin:0;
text-indent:-2.5em;
margin-left:2.5em;
}
.plhour .selectnotation {font-size:80%;margin-top:1em;}
.plhour .selectlocbox select[name="selloc"]{
margin:24px auto;
display:block;
border:none;
background-color:rgba(255,255,255,0.3);
color:#000;
padding:10px 5px;
border-radius:5px;
-webkit-appearance: auto;-moz-appearance: auto;appearance: auto;
}

.anchorbox_pl01 {text-align: right;}
.js-scroll-to-id2 {color:rgba(255,255,255,0.8);}
.js-scroll-to-id3 {color:rgba(255,255,255,0.8);}

/* 天体別 */
.phpl_header {
position: relative;
border-top:1px dashed rgba(255,255,255,0.2);
border-bottom:1px dashed rgba(255,255,255,0.2);
padding:15px 0;
text-align: center;
margin:10px auto;
}
.phpl_header time {font-size:120%;}
.phpl_header .locinfo{
font-size:80%;
word-break: keep-all;
margin:1em auto;
}
.nowinfo p,.nowinfo p {margin:0;}
.nowinfo a {
font-size:120%;

}
.nowinfo a span{vertical-align: middle;}
.phplblock {
margin-bottom:1em;
}
.phplblock .phpl {
min-height:151px;
background-repeat:no-repeat;
background-size:auto 140px;
background-position:right bottom 5px;
}

.phplblock dd.hours {
margin:1.5em 0 2em;
display: flex;
flex-wrap: wrap;
gap:0.8em 1.5em;
padding:0 0.5em 0 1em;
min-height:5em;
align-content: center;
}
.phplblock dd.hours .ahour {
white-space: nowrap;
margin:0;
}

.plhplsbox dt {
text-align: center;
display: flex;
justify-content: space-between;
vertical-align: middle;
margin-bottom:5px;
align-items: center;
}
dt .cent{
font-size:120%;
}
dt .cent .afont {
font-size:160%;
vertical-align: middle;
margin-right:5px;
}
dl.phpl dd.nogaki {
padding-left:1em;
padding-right:0.5em;
padding-bottom:1em;
}
dl.phpl dd.nogaki p span:first-child {
display: block;
font-weight: bold;
text-indent: 0;
padding-left:2em;
background-image:url("/images/daily/ico-kira01-40px.png");
background-size:1em auto;
background-repeat:no-repeat;
background-position:left center;
}
dl.phpl dd.nogaki p{margin:1.5em auto;}

/* 天体別・時系列両方に表示 */
.ahour.dmcl1.motion_d::after,
.ahour.exlt1.motion_d::after
{content: '★';color:gold;text-shadow: 0 0 0 transparent;}
.samplegood{color:gold;text-shadow: 0 0 0 transparent;}
.ahour.dtrm1::after,
.ahour.fall1::after,
.ahour.motion_r::after
{content: '◆';color:rgba(255,255,255,0.55);text-shadow: 0 0 0 transparent;}
.samplebad{color:rgba(255,255,255,0.55);text-shadow: 0 0 0 transparent;}
.colflag0::after{opacity:0.4;}

/* 時系列 */
#planetaryhour_timesequence {margin-top:30px;}
.hdg-time{
text-align: center;
font-size:120%;
}
.tmblock {
display: flex;
flex-wrap: wrap;
width:100%;
gap:1px;
margin:1em auto;
font-size:95%;
}
.tmblock .halfday {
flex:1;
display: flex;
flex-direction: column;
gap:1px;
background-repeat: no-repeat;background-position: center top;background-size:100% auto;
}
.tmblock .halfday:nth-child(3n) .ahour,
.tmblock .halfday:nth-child(3n+1) .ahour{background-color:rgba(0,0,0,0.08);}
.tmblock .halfday:nth-child(3n+2) .ahour{background-color:rgba(255,255,255,0.05);}
.tmblock .halfday .ahour .afont {font-size: 1.2em;}
.tmblock .ahour{
flex: 1;
padding:5px 0;
text-align: center;
vertical-align:bottom;
box-shadow:0px 0px 5px 0px rgba(0,0,0,0.30);
color:rgba(255,255,255,0.4);padding:0.5em 0;
}
.tmblock .ahour.colflag1{color:rgba(255,255,255,1);}
.tmblock .ahour .dtf-nj{width:100%;}
.tmblock .ahour .riseorset {width:100%;}
.tmblock .dtf-Gi {font-size:120%;}
.tmblock .ahour .riseorset{
display: block;
margin:0.5em auto;
}
@media screen and (max-width: 470px){
.tmblock .dtf-Gi {display: block;}
}
/* planetaryhours天体一覧の横スクロール用 */

/* .plhplsbox {overflow-x: scroll;} */
.plhplsboxInner {
display: flex;
max-width:3220px;
width:calc(700vw - 280px + 0px);
background-color:rgba(0,0,0,0.1);
}
.plhplsbox dl {
max-width:540px;
width:calc(100vw - 40px);
padding:0 5px;
box-shadow: -240px 0px 50px 0px rgba(0,0,0,0.06) inset;
}

/* scrollsnap */
.plhplsbox {-webkit-overflow-scrolling:touch;}/* ios14用 */
.plhplsboxInner {
width:auto;
scroll-snap-type: x mandatory;overflow-x: auto;
scrollbar-color: rgba(255,255,255,0.2) rgba(0,0,0,0.1);
}
.plhplsboxInner > dl {
width:min(calc(100vw - 40px),470px);
scroll-snap-align: start;flex: none;width:100%;
}

/* 追加 2025-12-05 */
span.nowrap{
white-space: nowrap;
word-break: keep-all;
}
.bgsvgs{background-repeat: no-repeat;}
.phpl.bgsvgs{background-size:clamp(30%,200px,calc(100% - 35px)) auto;}

/* ↓を使う場合、sizeとposition、それぞれ書かないと反映されない */
/*
.bgsvgs.satbgsvg{
background-image:url(/images/astropict/pl1/sat.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
.bgsvgs.jupbgsvg{
background-image:url(/images/astropict/pl1/jup.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
.bgsvgs.marbgsvg{
background-image:url(/images/astropict/pl1/mar.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
.bgsvgs.sunbgsvg{
background-image:url(/images/astropict/pl1/sun.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
.bgsvgs.venbgsvg{
background-image:url(/images/astropict/pl1/ven.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
.bgsvgs.merbgsvg{
background-image:url(/images/astropict/pl1/mer.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
.bgsvgs.moobgsvg{
background-image:url(/images/astropict/pl1/moo.png);
background-size:clamp(50%,340px,calc(100% - 35px)) auto;
background-position:right 20px bottom 20px;
}
*/


/*
uSignItems.sco .mystone > h3 > img
.sag h2.sign span.icon {background-color:rgba(var(--col-rgb-sag),0.2);}
*/