@charset "utf-8";
article > header,article > footer{background-color:#000;}
article > header, article > footer,.atclwrap > header, .atclwrap > footer {background-color: rgba(0,0,0,1.0);}
.atclwrap{background-color:#fafafa;}
.page-footer{background-color: #000;color: #fff;}
.navListCover {background-color:#444444;}
.navList01 li.al-astrology {background:#605740;}
@media (any-hover:hover), (min-width: 960px) {
  .navList01.txtver li a:hover{opacity:1;background:#877A5B;}
}
header .inner{
width:auto;
padding: 0 54px;
}
.wrap{
background-color:#f3f3f3;/* gridだから？背景色明示しないと要素の間からbodyの色がうっすら出てくる */
}
h1 {
text-align: center;
padding:20px 0 0;
background-color:#f9f9f9;
background-color:#f3f3f3;
}
h1 a {
display: block;
width:calc(100% - 20px);
max-width:700px;
margin:0 auto;
background-image: url("/images/astrology/box-bg-01-l.png"),url("/images/astrology/box-bg-01-r.png");
background-repeat: no-repeat;
background-position:left top,right top;
background-size:auto 90%;
}
h1 a img {
height:20vw;
max-height:139px;
height:min(20vw,139px);
width:auto;
}
h2 {
display: flex;
justify-content: center;
}
h2 img {height:auto;}
hr.deco01 {max-width:1200px;}
h1 + hr {margin-top:0;}

.column01{margin: 1.5em auto;}
.turncross {cursor: pointer;}
.turncross::before {
content: "＋ ";
display: inline-block;
transform-origin: center center;
-webkit-transform:translate(-0.5em, -0px) rotate(0deg);-ms-transform:translate(-0.5em, -0px) rotate(0deg);transform:translate(-0.5em, -0px) rotate(0deg);
-webkit-transition: color 0s ease,-webkit-transform 0.3s ease;transition: color 0s ease,-webkit-transform 0.3s ease;-o-transition: color 0s ease,transform 0.3s ease;transition: color 0s ease,transform 0.3s ease;transition: color 0s ease,transform 0.3s ease,-webkit-transform 0.3s ease;
}
.turncross.open::before{
content: "＋ ";
-webkit-transform:translate(-0.5em, -0px) rotate(45deg);-ms-transform:translate(-0.5em, -0px) rotate(45deg);transform:translate(-0.5em, -0px) rotate(45deg);
}

/* データ入力 */
.hdgcover01 {
margin:1em auto 1em;
text-align: center;
}
.hdg-ndatin {
transition-duration: 0.4s;
display: inline-block;
padding:0.5em 1em 0.5em 2.7em;
position:relative;
background-image:linear-gradient(90deg,rgba(128,128,128,0.3) 2.2em,rgba(128,128,128,0.1) 2.2em);
background-blend-mode:exclusion;
border-radius: 10px;
}
.hdg-ndatin.open {
background-color:#333;
color:#fff
}
.hdg-ndatin::before{
position: absolute;
left:1.2em;
}

.formcover {
border:1px solid #bbb;
border-radius: 10px;
text-align: center;
}
form.bddat {
width:calc(100% - 20px);
max-width:1200px;
margin:20px auto 0px;
}
form.bddat ::placeholder{color: #ccc;}
.inputBlock01 {
border-top: 1px dotted #ddd;
padding-top:1em;
margin-top:1em;
text-align: left;
}
.hdg-inform {font-weight:bold;}
.hdg-inform .attention{font-weight: normal;font-size:12px;margin-left:1em;}
.confirm01 .attention{text-align: center;}
.inputBlock01 select,.inputBlock01 input {
padding:5px;
font-size:16px;
border-radius: 4px;
border:solid 1px #aaa;
min-width:3em;
text-align: center;;
}
select[name="year"]{width:5em;}
input[name="lon"],input[name="lat"]{text-align:left;}
input[name="lat"]{padding-left:1em;}
select:focus,input:focus{
border-color:rgba(147, 41, 43, 1.00);
outline-color:rgba(147, 41, 43, 1.00);
background-color:rgba(147, 41, 43, 0.02);
}
#lon01,#lat01 {width:12em;}
.inputBlock01.loc div {display: inline-block;}
.inputBlock01.loc div input {margin-bottom:0.5em;}
.click01 {
display: inline-block;
cursor: pointer;
font-size:16px;
}
.buttonBlock01 {margin:1em auto;}
.buttonBlock01 > *:last-child{margin-top:1em;}
button.sbmtbtn,.assistbtn.btn01 {
display: inline-block;
width: calc(100% - 10px);
max-width: 300px;
border-radius: 10px;
}
button.sbmtbtn {
padding:0.5em;
font-size:16px;
background-color:#A6997B;
border:none;
cursor: pointer;
}
.assistbtn.btn01 {
padding:0.5em 1em 0.5em 2.7em;
font-size:14px;
/*background-color:#ffffff;*/
transition-duration: 0.4s;
position:relative;
background-image:linear-gradient(90deg,rgba(128,128,128,0.8) 2.2em,rgba(128,128,128,0.1) 2.2em);
background-blend-mode:exclusion;
border: none;
}
.assistbtn.btn01.open {
background-color:#333;
color:#fff
}
.assistbtn.btn01::before{
position: absolute;
left:1.2em;
}
.btn01 .dcl{display: none;}
.btn01.open .dop{display: none;}
.btn01.open .dcl{display: inline;}
.btn02 {
position: absolute;
right:0;bottom:0;
background-color:#ccc;
display: inline-block;
font-weight:bold;
cursor: pointer;
transition-duration:0.2s;
-webkit-transform:rotate(45deg);
        transform:rotate(45deg);
vertical-align: middle;
font-size:26px;
line-height:1em;
width:1em;
height:1em;
border-radius:0.5em;
}
@media (any-hover:hover){
  .trig-slide:hover,.trig-slide.open:hover{
    background-color:hsla(43, 20%, 60%, 1);
    color:#fff;
  }
}
/* 入力補助 */
.assist01 {
display: flex;
justify-content: space-between;
position:relative;
text-align: left;
padding-top:2em;
padding-bottom:3rem;
margin-top:0em;/* 0にしないと表示toggleでぽこぽこ動く */
margin-bottom:2rem;
background-image: radial-gradient(circle at center, #ddd 20%, rgba(255,255,255,0) 30%),radial-gradient(circle at center, #ddd 20%, rgba(255,255,255,0) 30%);
background-size: 1.5rem 1.5rem;
background-repeat: repeat-x;
background-position: left top,left bottom;
}
.assist01 .hdg02 {
font-size:12px;
width:100%;
padding:5px;
}
@media screen and (min-width:390px){.citylistbox .hdg02 br {display: none;}}
h2 {display: flex;justify-content: center;}
.reglistbox,.citylistbox {
padding:0.5em;
height:70vh;
max-height:470px;
overflow-y: scroll;
border:solid 1px #ccc;
border-radius:5px;
-webkit-overflow-scrolling : touch;
}
.reglistbox {width:calc(40% - 5px);}
.citylistbox {width:60%;}
.reglistbox ul {
display: flex;
flex-wrap: wrap;
}
li.area1 {background-color:hsla(247,100%,90%,1.00);}
li.area2 {background-color:hsla(206,100%,90%,1.00);}
li.area3 {background-color:hsla(154,100%,90%,1.00);}
li.area4 {background-color:hsla(103,100%,90%,1.00);}
li.area5 {background-color:hsla(51,100%,90%,1.00);}
li.area6 {background-color:hsla(0,100%,90%,1.00);}
li.area7 {background-color:hsla(309,100%,90%,1.00);}
.reglistbox li {
width:100%;
padding:0.2em 0;
}

@media screen and (min-width:500px){.reglistbox li {width:50%;}}
@media screen and (min-width:720px){.reglistbox li {width:33%;}}
@media screen and (min-width:940px){.reglistbox li {width:25%;}}
.reglistbox span{
line-height:1em;
cursor: pointer;
padding: 12px 0px;
display: inline-block;
}
.reglistbox span::before {
content: "▶ ";
display: inline-block;
opacity: 1;
color:rgba(0,0,0,0.1);
}
.hdg_region {
background-blend-mode: color-dodge;
background-image:linear-gradient(90deg, rgba(0,0,0,0.5),rgba(48,48,48,0.5), rgba(96,96,96,0.5),rgba(192,192,192,0.5), rgba(220,255,255,0.5));
color:#fff;
width:100%;
position:-webkit-sticky;/* iOs */
position:sticky;
top:0;
z-index: 1;
padding:0.3em 0 0.3em 0.5em;
margin:0em 0 0.5em;
}
.cityBox.area1 {background-color:hsla(247,100%,98%,1.00);}
.cityBox.area2 {background-color:hsla(206,100%,98%,1.00);}
.cityBox.area3 {background-color:hsla(154,100%,98%,1.00);}
.cityBox.area4 {background-color:hsla(103,100%,98%,1.00);}
.cityBox.area5 {background-color:hsla(51,100%,98%,1.00);}
.cityBox.area6 {background-color:hsla(0,100%,98%,1.00);}
.cityBox.area7 {background-color:hsla(309,100%,98%,1.00);}
.cityBox{margin-bottom:1em;}
.cityBox.area1 .hdg_region {background-color:hsla(247,100%,20%,1.00);}
.cityBox.area2 .hdg_region {background-color:hsla(206,100%,20%,1.00);}
.cityBox.area3 .hdg_region {background-color:hsla(154,100%,20%,1.00);}
.cityBox.area4 .hdg_region {background-color:hsla(103,100%,20%,1.00);}
.cityBox.area5 .hdg_region {background-color:hsla(51,100%,20%,1.00);}
.cityBox.area6 .hdg_region {background-color:hsla(0,100%,20%,1.00);}
.cityBox.area7 .hdg_region {background-color:hsla(309,100%,20%,1.00);}

.citylistbox ul {
display: flex;
flex-wrap: wrap;
}
.citylistbox .md-radio label {padding: 0 0.5em 0 1.5em;}
.citylistbox .md-radio label:before {width:1em;height:1em;}
.citylistbox .md-radio label:after {top: 0.25em;left: 0.25em;width: 0.5em;height: 0.5em;}
.citylistbox .md-radio {margin:0;}
.citylistbox li {width:100%;padding:10px 0;}
@media screen and (min-width:360px){.citylistbox li {width:50%;}}
@media screen and (min-width:530px){.citylistbox li {width:33%;}}
@media screen and (min-width:680px){.citylistbox li {width:25%;}}
@media screen and (min-width:850px){.citylistbox li {width:20%;}}

.citylistbox span{
line-height:1em;
cursor: pointer;
background-color:transparent;
}
#locname {height:1em;}

/* contents */
.contSect01 {
margin:30px auto 10px;
text-align: left;
width:calc(100% - 20px);
max-width:720px;
}
.contSect01::before{
content: "";
display: block;
height:6px;
margin-bottom:20px;
background-image:
radial-gradient(circle at left  4px top 50%, hsla(0,0%,50%,0.20) 2px, hsla(0,0%,50%,0.00) 3px),
radial-gradient(circle at left 15px top 50%, hsla(0,0%,50%,0.20) 1px, hsla(0,0%,50%,0.00) 1px),
radial-gradient(circle at left 26px top 50%, hsla(0,0%,50%,0.20) 1px, hsla(0,0%,50%,0.00) 1px);
background-size:34px 100%;
background-repeat:repeat-x;
}

body.happy h2 + .column01 {text-align: center;}
body.happy h2 + .column01 > .note {display: inline-block;text-align: left;max-width:none;width:auto;}


h3 {
width:calc(100% - 20px);
max-width:700px;
min-height: 82px;
padding: 10px 0 0 120px;
margin: 0 auto;
}
h3 span {display: block;}
h3 span.hsName {font-weight: bold;font-size:120%;margin-bottom:0.5em;}
h3 span.capture {font-weight: normal;font-size:80%;}

.column01 .note {
width:calc(100% - 20px);
max-width:700px;
margin:1em auto 1em;
text-indent: 1em;
text-align: left;;
}
.contBlock01 {
width:calc(100% - 20px);
max-width:540px;
margin:2em auto 0;
}
h4 {
font-weight: bold;
line-height: 1.2em;
min-height:32px;
}
h4::before {
background-color:#a09986;
background-image: radial-gradient(ellipse 60% 50%, rgba(0,0,0,0.2) 30%,rgba(255,255,255,0.2) 100%);
background-blend-mode: overlay;
content:"";
display:inline-block;
vertical-align: middle;
margin-right:0.6em;
margin-top:0px;
height:32px;
width:30px;
-webkit-clip-path: path("M16.66 21.94c0-.78.14-1.75.41-2.92q.42-1.755 1.29-2.97c.95-1.31 1.92-2.27 2.92-2.88s2.37-.91 4.12-.91c1.26 0 2.34.51 3.24 1.52S30 15.97 30 17.31s-.34 2.54-1.04 3.79c-.69 1.25-1.5 2.15-2.42 2.71q0-2.43-1.08-3.72c-1.08-1.29-1.89-1.29-3.52-1.29q-1.515 0-2.58.96c-1.065.96-1.06 1.36-1.06 2.17.52 0 .98.16 1.38.49s.6.77.6 1.33c-.77-.47-1.43-.7-1.98-.7 0 .59.11 1.19.32 1.8s.52 1.13.92 1.57c.09-.53.25-.94.46-1.24s.49-.44.83-.44q.645 0 1.17.63c.35.42.53.9.53 1.43 0 .59-.16 1.08-.48 1.45s-.75.56-1.27.56c-.95 0-1.83-.55-2.62-1.66s-1.24-2.47-1.33-4.09h-.92c0 1.25.12 2.18.37 2.81l.05.14c.21.59.32 1.03.32 1.31 0 .31-.17.92-.51 1.82s-.72 1.86-1.15 2.85c-.43-1-.81-1.95-1.15-2.85-.34-.91-.51-1.51-.51-1.82 0-.28.11-.72.32-1.31l.05-.14c.24-.62.37-1.56.37-2.81h-.92c-.09 1.62-.54 2.99-1.33 4.09-.8 1.11-1.67 1.66-2.62 1.66-.52 0-.94-.19-1.27-.56-.32-.38-.48-.86-.48-1.45 0-.53.18-1.01.53-1.43q.525-.63 1.17-.63c.34 0 .61.15.83.44.21.3.37.71.46 1.24.4-.44.71-.96.92-1.57s.32-1.21.32-1.8c-.55 0-1.21.23-1.98.7 0-.56.2-1.01.6-1.33.4-.33.86-.49 1.38-.49 0-.81-.34-1.54-1.04-2.17-.69-.64-1.56-.96-2.6-.96-1.63 0-2.8.43-3.52 1.29q-1.08 1.29-1.08 3.72c-.92-.56-1.73-1.47-2.42-2.71-.69-1.25-1.04-2.51-1.04-3.79s.45-2.52 1.36-3.53c.9-1.01 1.99-1.52 3.24-1.52 1.75 0 3.12.3 4.12.91s1.97 1.57 2.92 2.88q.87 1.215 1.29 2.97c.28 1.17.41 2.14.41 2.92h.74c0-1.22-.21-2.44-.64-3.67s-1.01-2.55-1.75-3.95q-.555-1.08-.87-1.92c-.21-.56-.32-1.11-.32-1.64 0-1.19.52-2.73 1.56-4.63.55-1.03 1.09-2.07 1.61-3.13S14.62.94 14.98.01c.37.94.81 1.93 1.33 2.99s1.06 2.1 1.61 3.13c1.04 1.9 1.57 3.45 1.57 4.63 0 .53-.11 1.08-.32 1.64q-.33.84-.87 1.92c-.74 1.4-1.32 2.72-1.75 3.95s-.64 2.46-.64 3.67h.74Z");
clip-path: path("M16.66 21.94c0-.78.14-1.75.41-2.92q.42-1.755 1.29-2.97c.95-1.31 1.92-2.27 2.92-2.88s2.37-.91 4.12-.91c1.26 0 2.34.51 3.24 1.52S30 15.97 30 17.31s-.34 2.54-1.04 3.79c-.69 1.25-1.5 2.15-2.42 2.71q0-2.43-1.08-3.72c-1.08-1.29-1.89-1.29-3.52-1.29q-1.515 0-2.58.96c-1.065.96-1.06 1.36-1.06 2.17.52 0 .98.16 1.38.49s.6.77.6 1.33c-.77-.47-1.43-.7-1.98-.7 0 .59.11 1.19.32 1.8s.52 1.13.92 1.57c.09-.53.25-.94.46-1.24s.49-.44.83-.44q.645 0 1.17.63c.35.42.53.9.53 1.43 0 .59-.16 1.08-.48 1.45s-.75.56-1.27.56c-.95 0-1.83-.55-2.62-1.66s-1.24-2.47-1.33-4.09h-.92c0 1.25.12 2.18.37 2.81l.05.14c.21.59.32 1.03.32 1.31 0 .31-.17.92-.51 1.82s-.72 1.86-1.15 2.85c-.43-1-.81-1.95-1.15-2.85-.34-.91-.51-1.51-.51-1.82 0-.28.11-.72.32-1.31l.05-.14c.24-.62.37-1.56.37-2.81h-.92c-.09 1.62-.54 2.99-1.33 4.09-.8 1.11-1.67 1.66-2.62 1.66-.52 0-.94-.19-1.27-.56-.32-.38-.48-.86-.48-1.45 0-.53.18-1.01.53-1.43q.525-.63 1.17-.63c.34 0 .61.15.83.44.21.3.37.71.46 1.24.4-.44.71-.96.92-1.57s.32-1.21.32-1.8c-.55 0-1.21.23-1.98.7 0-.56.2-1.01.6-1.33.4-.33.86-.49 1.38-.49 0-.81-.34-1.54-1.04-2.17-.69-.64-1.56-.96-2.6-.96-1.63 0-2.8.43-3.52 1.29q-1.08 1.29-1.08 3.72c-.92-.56-1.73-1.47-2.42-2.71-.69-1.25-1.04-2.51-1.04-3.79s.45-2.52 1.36-3.53c.9-1.01 1.99-1.52 3.24-1.52 1.75 0 3.12.3 4.12.91s1.97 1.57 2.92 2.88q.87 1.215 1.29 2.97c.28 1.17.41 2.14.41 2.92h.74c0-1.22-.21-2.44-.64-3.67s-1.01-2.55-1.75-3.95q-.555-1.08-.87-1.92c-.21-.56-.32-1.11-.32-1.64 0-1.19.52-2.73 1.56-4.63.55-1.03 1.09-2.07 1.61-3.13S14.62.94 14.98.01c.37.94.81 1.93 1.33 2.99s1.06 2.1 1.61 3.13c1.04 1.9 1.57 3.45 1.57 4.63 0 .53-.11 1.08-.32 1.64q-.33.84-.87 1.92c-.74 1.4-1.32 2.72-1.75 3.95s-.64 2.46-.64 3.67h.74Z");
}
.contBox01 {margin: 10px 0 20px 0px;}
.contBox01 p span{
display:inline-block;
text-indent: 0;
}

body.happy .contBox01 p > span:nth-child(2),
body.unlucky .contBox01 p > span:nth-child(2){
margin-left:0.5em;
}

.dt_just{
margin:1em auto;
font-weight:bold;
font-size:110%;
text-align: center;
}
ul.dt_just{
max-width:12em;
text-align: left;
margin:0 auto;
}
.dt_si{
margin:1em auto;
font-weight:bold;
font-size:110%;
text-align: center;
}
ul.dt_si li{margin-bottom:2em;}
ul.dt_si li span{display: block;}
/* w460以上 */
@media screen and (min-width:460px){
ul.dt_si li{margin-bottom:1em;}
ul.dt_si li span{
display: inline-block;
margin:0 0.2em;
}
}

.dt_preposthours{
text-align: center;
}
.elms{
font-size:80%;
text-align: center;
}

/* natal */
body.natal h3 {
text-align: center;
padding:0;
min-height:inherit;
max-width:none;
position:absolute;
top:-15px;
left:0;right:0;
margin:0 auto;
}
body.natal .contSect01 {
border: 1px solid #A6997B;
border-radius: 8px;
width:calc(100% - 20px);
max-width: 735px;
margin: 50px auto 20px;
position:relative;
}
body.natal .contSect01::before{
background-image:url();display: inline;height:0;margin-bottom:0;
}
body.natal .contSect01 .column01 {padding-top:12px;}
/* happy */
body.happy h3 {background: url(/images/astrology/ornHead1-2.png) no-repeat left center transparent;}
/* unlucky */
body.unlucky h3 {background: url(/images/astrology/ornHeadCross03.png) no-repeat left center transparent;}
body.unlucky h4::before {
background-color:#333;
background-blend-mode: screen;
}
/* gamble */
body.gamble h3{
width: calc(100% - 20px);
max-width: 540px;
}
body.gamble h4::before {background-color:#d8c973;}
body.gamble .contSect01.moo{--colHSL:189,57%,46%;}
body.gamble .contSect01.jup{--colHSL:266deg,50%,50%;}
body.gamble .contSect01 h4::before {background-color:hsl(var(--colHSL),1.0);}
body.gamble .contSect01 h3 .hsName{
color:hsl(var(--colHSL),1.0);
background-image:radial-gradient(0.4em at 0.4em 0.7em,hsl(var(--colHSL),1) 80%, hsl(var(--colHSL),0));
background-repeat: no-repeat;
padding:0.2em 0 0.2em 1.2em;
}
body.gamble .contSect01.moo{
background-image:url(/images/astrology/astx-moo-02_2x.png);
background-repeat:no-repeat;
background-position:left 30px;
background-size:max(120px,30%) auto;
}
body.gamble .contSect01.jup{
background-image:url(/images/astrology/astx-jup-01_2x.png);
background-repeat:no-repeat;
background-position:left 30px;
background-size:max(120px,30%) auto;
}
body.gamble .contBlock01.MC{
background-image:url(/images/astrology/ast01-mc_2x.png);
background-repeat:no-repeat;
background-position:center center;
background-size:max(120px,25%) auto;
}
body.gamble .contBlock01.POF{
background-image:url(/images/astrology/ast01-pof_2x.png);
background-repeat:no-repeat;
background-position:center center;
background-size:max(120px,25%) auto;
}
body.gamble .column01{
--txsh-col1-rgb:243,243,243;
text-shadow: 0 0 1px rgba(var(--txsh-col1-rgb),0.99),0 0 2px rgba(var(--txsh-col1-rgb),0.99),0 0 3px rgba(var(--txsh-col1-rgb),0.99),0 0 4px rgba(var(--txsh-col1-rgb),0.99),0 0 5px rgba(var(--txsh-col1-rgb),0.99);
}
.mtx {margin-top:0.5em;}
.brite0{-webkit-filter: brightness(10%);filter: brightness(10%);}




/* astro menu */
.astroMenu li {
margin:0 auto 50px;
width:calc(100% - 20px);
max-width:540px;
}
.astroMenu li a {text-decoration: none;}
.astroMenu li span.note {
font-size:12px;
color:#333;
display: block;
}
.astroMenu li span.note::before {
content: "▶ ";
color:darkred;
}
.astroMenu2 {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.astroMenu2 li {
width:48%;
margin-bottom:30px;
}
.astroMenu2 li a {text-decoration: none;}
.astroMenu2 li span {
-webkit-transition-duration:0.2s;-o-transition-duration:0.2s;transition-duration:0.2s;
}
.astroMenu2 li .title {
display: block;
color:hsla(43, 20%, 40%, 1);
font-weight: bold;
margin-bottom:0.3em;
}
.astroMenu2 li .note {
display: block;
color: #666;
font-size: 80%;
}

/* footer .acdbox */
footer .acdbox label{
  background-color:#444;
}