/* Document
 * ========================================================================== */

/**
 * Add border box sizing in all browsers (opinionated).
 */

*,
::before,
::after {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */

::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */

html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  -moz-tab-size: 4; /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}
.articles ol.number li::marker,
html[lang="ja"] ,
h2.article_h2{
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.articles ol.number li::marker {
  font-family: maru-maru-gothic-bsr-stdn, sans-serif;
}
.ff-providence{
  font-family: ff-providence-sans-web-pro,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size:14px;
}
/* Sections
 * ========================================================================== */

/**
 * Remove the margin in all browsers (opinionated).
 */

body {
  margin: 0;
  padding:0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 18px;
  text-align: center;
  font-weight:normal;
}
h1 span,h2 span,h3 span,h4 span{display:block;}


/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */

nav ol,
nav ul {
  list-style: none;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/*
 * Change the alignment on media elements in all browsers (opinionated).
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */

iframe {
  border-style: none;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */

svg:not([fill]) {
  fill: currentColor;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Tabular data
 * ========================================================================== */

/**
 * Collapse border spacing in all browsers (opinionated).
 */

table {
  border-collapse: collapse;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */

fieldset {
  border: 1px solid #a0a0a0; /* 1 */
  padding: 0.35em 0.75em 0.625em; /* 2 */
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}

/**
 * Remove the padding in IE 10-.
 */

[type="checkbox"],
[type="radio"] {
  padding: 0;
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

dialog:not([open]) {
  display: none;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */


template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */

a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] {
  -ms-touch-action: manipulation; /* 1 */
  touch-action: manipulation; /* 2 */
}

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

/* Accessibility
 * ========================================================================== */

/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */

[aria-busy="true"] {
  cursor: progress;
}

/*
 * Change the cursor on control elements in all browsers (opinionated).
 */

[aria-controls] {
  cursor: pointer;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */

[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */

[aria-hidden="false"][hidden] {
  display: initial;
}

[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/* Common setting
 * ========================================================================== */
body{
  color: #1F2121;
  background-color: #F6F5EE;
  margin: 0 auto;
/*  font-size: clamp(15px, 1vw, 25px);*/
  font-size: 15px;
}
#base {
  margin: 1em auto;
}
#base.top{
  margin: 5em auto;
}

.clear{
  clear:both;
  float:none;
  line-height:0px;
  font-size:0px;
  height:0px;
}
UL, OL, LI {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
a{color:#1F2121;text-decoration: none;}

.section_line {
  height: 2em;
  margin:0;
}

/*
 * font
 */

.f_mmgbs,
.f_marumaru,
.today_txt,
.seiza_score_txt P.score,
#list_keyword .box_list5 h4,
#list_keyword .boxL h4,
h1,
h2,
.ez-toc-title,
P.rank,
.block4 .motif span,
#tarot .goto,
.tarot2_box,
.tarot3_box,
#cal_data td ,
h3[id^="seiza_"],
.week h3,
.keyword h3,
.header_menus P,
.day_box .left_block P,
[class^="box"] span.icon,
header li {
  font-family: maru-maru-gothic-bsr-stdn, sans-serif;
  font-weight: 400;
  font-style: normal;
}
.block4 .today_inner.moon .motif,
.dayOfWeek th {
  font-family: stencil-creek, sans-serif;
  font-weight: 500;
  font-style: normal;
}
#cal_top{
  font-family: din-2014, sans-serif;
  font-style: normal;
  font-weight: 200;
}
h2{
  margin: 1em auto 0.5em;
  text-align: center;
  font-size: 1.2em;
  line-height: 1.6;
}
h3, h4{
  color: #1F2121;
  margin: 0;
  font-size: 1.0em;
  font-weight: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.block_S h4{
  -webkit-line-clamp: 2;
}
.is_pc{display:none !important;}

.left_block{
  float: left;
}
.right_block{
  float: right;
}

/*
 * heder
 */
header h1,
header .sun_logo{
  background: #fff;
}
header h1 img,
header .sun_logo img{
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 220px;
  height: auto;
  padding-top: 10px;
}
header .mini_header h1 img{
  width: 190px;
}

nav li{cursor: pointer;}

.header_moon{
  display: inline-block;
}
.header_menus{
  display: inline-block;
}
.fixed {
  position: fixed;
  width: 100%;
  top: 0;
  left:0;
  z-index: 1000;
  height: 75px;
  background: #F6F5EE;
  padding-top: 10px;
}
.nav_guide.fixed{
  background: #F2F2F2;
}
#sun_header {
  width: 100%;
  clear: both;
  margin-top: 0;
  z-index: 1;
  top:0;
  color: #1F2121;
  z-index: 200;
}
.header_border {
  margin-bottom: 10px;
  height: 16px;
  background: #fff;
  border-radius: 0 0 50% 50% /0 0 100% 100%;
}


/*
 * footer
 */
footer {
  background: #E9E7E0;
}
footer P , footer P a{
  color: #72787A;
  font-size: 11px;
  text-align: center;
  line-height: 16px;
}
/*
 * .links
 */
.links {
  display: block;
  text-align: center;
  width: 50%;
  margin: 0 auto;
  justify-content: space-between;
  padding: 20px 0 28px;
}
@media only screen and (max-width: 599px) {

  footer .links p{
    padding-bottom:12px;
  }
}
/*
 * .padding
 */
.copyright {
  padding-bottom: 3em;
  font-size: 0.8em;
}

/*
 * .breadcrumbs
 */
.breadcrumbs {
  background: #fff;
  padding: 12px 20px;
  font-size: 12px;
  line-height: 16px;
}
.breadcrumbs_inner{
  max-width: 1000px;
  margin: 0 auto;
}


/*
 * header
 */
header#sun_header ul{
  display: flex;
  background: #F6F5EE;
  align-items: start;
  justify-content: space-around;
}
header#sun_header .header__btn,
header#sun_header .header__btn span,
header#sun_header ul li{
  text-align: center;
  font-size: 9px;
  width: 46px;
}
header#sun_header  ul li.moon{
  width: 50px;
}
@media only screen and (max-width: 599px) {
  header#sun_header .header__btn,
  header#sun_header .header__btn span,
  header#sun_header ul li,
  header#sun_header ul li.moon{
    width: 50px;
    height: 54px;
  }
  header#sun_header ul.common{
    background: #F2F2F2;
  }
  header#sun_header .header__btn span{
    height: 9px;
  }
  .fixed li.moon .is_sp{
    opacity:0;
  }
  header#sun_header ul li a{
      display: block;
      height: 100%;
      width: 100%
  }
  .header_border {
    margin-bottom: 10px;
  }

}
header#sun_header li:not(.moon)::before  {
  background: #fff;
  position:absolute;
  content:"";
  display: block;
  top: 0;
  border-radius: 50px;
  left: 3px;
}
@media only screen and (max-width: 599px) {
  header#sun_header li:not(.moon)::before  {
    width: 40px;
    height: 40px;
  }
  header#sun_header li{position:relative;}
  header#sun_header li span,
  header#sun_header li a{
    display: inline-block;
    position: relative;
    top: 40px;
  }
  header#sun_header li::after  {
    position:absolute;
    content:"";
    width: 40px;
    height: 40px;
    display: block;
    top: 0;
    left: 3px;
  }
  header#sun_header ul span {
    font-size: 9px;
  }
  header#sun_header nav.nav_guide li:not(.moon)::before  {
    content:none;
  }
  header#sun_header nav.nav_guide ul{
    background: none;
    margin-bottom: 16px;
  }
  header#sun_header nav.nav_guide ul li.moon{width: 102px; height: 36px;}
  header#sun_header nav.nav_guide ul li.sun{width: 85px; height: 36px;}
  header#sun_header nav.nav_guide ul li.login{width: 103px; height: 36px;}
  header#sun_header nav.nav_guide ul li.mypage{width: 115px; height: 36px;}
  header#sun_header nav.nav_guide ul li.moon::after{ background: url("./../image/common/header/btn_moon.svg") no-repeat scroll center center/102px 36px;   width: 102px; height: 36px;left: 0;}
  header#sun_header nav.nav_guide ul li.sun::after { background: url("./../image/common/header/btn_sun.svg") no-repeat scroll center center/85px 36px;   width: 85px; height: 36px;left: 0;}
  header#sun_header nav.nav_guide ul li.login::after { background: url("./../image/common/header/btn_login_oval.svg") no-repeat scroll center center/103px 36px;   width: 103px; height: 36px;left: 0;}
  header#sun_header nav.nav_guide ul li.mypage::after { background: url("./../image/common/header/btn_mypage_oval.svg") no-repeat scroll center center/115px 36px;   width: 115px; height: 36px;left: 0;}
}

header#sun_header li.today::after   { background: url("./../image/common/header/navi_today.svg") no-repeat scroll center center/20px 20px; }
header#sun_header li.article::after { background: url("./../image/common/header/navi_article.svg") no-repeat scroll center center/20px 20px; }
header#sun_header li.otameshi::after{ background: url("./../image/common/header/navi_special.svg") no-repeat scroll center center/20px 20px; }
header#sun_header li.login::after   { background: url("./../image/common/header/navi_login.svg") no-repeat scroll center center/20px 20px; }
header#sun_header li.menu::after    { background: url("./../image/common/header/navi_menu.svg") no-repeat scroll center center/20px 20px; }
header#sun_header li.moon::after    { background: url("./../image/common/header/navi_moon.svg") no-repeat scroll center center/54px 54px;   width: 54px; height: 54px;left: 0;}

.moon_mark{ background: url("./../image/common/header/navi_moon.svg") no-repeat scroll center center/54px 54px;width: 54px; height: 54px;margin: 0 auto;}


.sh_are [class^="btn_"]{
  display: block;
  width: 30px; 
  height: 30px;
}
.sh_are .inner{
  display: flex;
  justify-content: space-between;
  width: 130px;
  margin: 0 auto;
}
.btn_line    {background: url("./../image/common/sns/btn_line.svg") no-repeat scroll center center/30px 30px;    }
.btn_twitter {background: url("./../image/common/sns/btn_twitter.svg") no-repeat scroll center center/30px 30px; }
.btn_facebook{background: url("./../image/common/sns/btn_facebook.svg") no-repeat scroll center center/30px 30px;}
/*
 * #sidemenus
 */

#sidemenus h2 P{
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  line-height: 1.3;
}
#sidemenus h2 P::after ,
#sidemenus h2 P::before {
  border-top: 1px solid;
  content: "";
  width: 1em;
}
#sidemenus h2 P::after { margin-left: 1em; }
#sidemenus h2 P::before { margin-right: 1em; }
#sidemenus #related,
#sidemenus #news,
#sidemenus #ranking{
  margin:0 auto 60px;
}
article.sh_are {
  width: 90%;
  margin: 60px auto 0;
}


/*-- tablet & PC ^^*/
@media only screen and (min-width: 600px) {
  body {
/*    padding-top: 75px;*/
    min-width: 1010px;
  }
  #sidemenus .keyword span{
/*    background: #F6F5EE;*/
    background: #fff;
  }
  #sidemenus {
    width: 90%;
    margin: 0 auto;
  }
  header#sun_header ul li.moon{
    width: 106px;
  }
  header#sun_header ul li.moon a{
    display: block;
    width: 106px;
    height: 34px;
  }
  #contents{
    width:700px;
    float:left;
  }
  h1{font-size: 20px; text-align: center;}
  #base {
    max-width: 1000px;
    margin-top: 8em;
  }
  #base.top {
    margin-top: 7em;
  }

  .is_pc{display:block !important; }
  .is_sp{display:none  !important; }
  .links {
    display: flex;
    width: 550px;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }
  .breadcrumbs p {
    max-width: 1000px;
    margin: 0 auto;
  }

  /**---- header ----**/
  header#sun_header h1{width: 220px;height: auto;}
  header#sun_header {
    width: 100%;
    clear: both;
    position: fixed;
    margin-top: 0;
    z-index: 1;
    top:0;
    color: #1F2121;
    z-index: 200;
  }
  #sun_header.non_fixed {
    position: static;
  }

  .header_menus{
    display: inline-block;
    width: 400px;
  }
  .header_moon{
    display: inline-block;
    width: 100px;
  }
  .header_inner{
    max-width: 1000px;
    margin: 0 auto;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
  }
  .header_border{
    height: 16px;
    background: #fff;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
  }
  .header_outer {
    background: #fff;
  }

  header#sun_header h1{
    width: 220px;
  }
  header#sun_header ul{
    background: #Ffff;
  }
  header#sun_header LI {
    line-height: 20px;
    padding-left: 28px;
    font-size: 12px;
  }
  header#sun_header .header__btn li span,
  header#sun_header ul li {
    font-size: 12px;
    width: auto;
    text-align: left;
  }
  header#sun_header .header__btn{
    width: auto;
  }
  header#sun_header li.today   { background: url("./../image/common/header/navi_today.svg") no-repeat scroll left center/20px 20px; }
  header#sun_header li.article { background: url("./../image/common/header/navi_article.svg") no-repeat scroll left center/20px 20px; }
  header#sun_header li.otameshi{ background: url("./../image/common/header/navi_special.svg") no-repeat scroll left center/20px 20px; }
  header#sun_header li.login   { background: url("./../image/common/header/navi_login.svg") no-repeat scroll left center/20px 20px; }
  header#sun_header li.menu    { background: url("./../image/common/header/navi_menu.svg") no-repeat scroll left center/20px 20px; }
  header#sun_header li.moon    { background: url("./../image/common/header/navi_moon_pc.svg") no-repeat scroll left center/106px 34px;width: 106px;height: 34px;font-size: 0;width: 106px;}
  header#sun_header li.sun    { background: url("./../image/common/header/navi_sun_pc.svg") no-repeat scroll left center/106px 34px;width: 106px;height: 34px;font-size: 0;width: 106px;}
  header#sun_header li::after ,
  header#sun_header li::before {
    content: none;
  }
  header#sun_header .header#sun_header__btn li span,
  header#sun_header li a{
    top: 0;
    left: 8px;
    letter-spacing: 0;
  }
    
  h1 img {  padding-top: 0;  }

  /**-- nav --**/
  header#sun_header nav ul img{cursor: pointer;}
  header#sun_header nav ul{
    height: 32px;
    background: #fff;
    width: 620px;
    display: -webkit-flex;
    display: flex;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    align-items: center;
  }

  header#sun_header nav.nav_guide ul {
    width: 320px;
  }
  header#sun_header nav.nav_guide ul li.moon ,
  header#sun_header nav.nav_guide ul li.sun  { background-size:102px 30px;width: 102px;height: 30px;} 

  /**-- sidemenus --**/
  #sidemenus{
    width:270px;
    float:right;
  }
  #sidemenus #news {
    margin:3em auto;
  }
  #sidemenus .block_S .mini_motif {
    width: 90px;
    height: 69px;
  }
  #sidemenus .block_S .mini_summary {
    height: 69px;
    width: calc(100% - 90px);
  }
  #sidemenus #popular, #sidemenus #news , #sidemenus #related {
    width: 270px;
    position: static;
  }
/*  #sidemenus h2 P::after ,
  #sidemenus h2 P::before {
    content: none;
  }*/
  #sidemenus h2 P{
    text-align: left;
  }
}

p.icon_book{
  position:absolute;
  content: "";
  background: url("./../image/tarot/icon_book.svg") no-repeat scroll center center/40px 40px;
  width: 40px;
  height: 40px;
  top: -20px;
  left: calc(50% - 20px);
}



.cal_0   { background: url("./../image/calendar/moon-0.svg") no-repeat scroll; }
.cal_1   { background: url("./../image/calendar/moon-1.svg") no-repeat scroll; }
.cal_2   { background: url("./../image/calendar/moon-2.svg") no-repeat scroll; }
.cal_3   { background: url("./../image/calendar/moon-3.svg") no-repeat scroll; }
.cal_4   { background: url("./../image/calendar/moon-4.svg") no-repeat scroll; }
.cal_5   { background: url("./../image/calendar/moon-5.svg") no-repeat scroll; }
.cal_6   { background: url("./../image/calendar/moon-6.svg") no-repeat scroll; }
.cal_7   { background: url("./../image/calendar/moon-7.svg") no-repeat scroll; }
.cal_8   { background: url("./../image/calendar/moon-8.svg") no-repeat scroll; }
.cal_9   { background: url("./../image/calendar/moon-9.svg") no-repeat scroll; }
.cal_10   { background: url("./../image/calendar/moon-10.svg") no-repeat scroll; }
.cal_11   { background: url("./../image/calendar/moon-11.svg") no-repeat scroll; }
.cal_12   { background: url("./../image/calendar/moon-12.svg") no-repeat scroll; }
.cal_13   { background: url("./../image/calendar/moon-13.svg") no-repeat scroll; }
.cal_14   { background: url("./../image/calendar/moon-14.svg") no-repeat scroll; }
.cal_15   { background: url("./../image/calendar/moon-15.svg") no-repeat scroll; }
.cal_16   { background: url("./../image/calendar/moon-16.svg") no-repeat scroll; }
.cal_17   { background: url("./../image/calendar/moon-17.svg") no-repeat scroll; }
.cal_18   { background: url("./../image/calendar/moon-18.svg") no-repeat scroll; }
.cal_19   { background: url("./../image/calendar/moon-19.svg") no-repeat scroll; }
.cal_20   { background: url("./../image/calendar/moon-20.svg") no-repeat scroll; }
.cal_21   { background: url("./../image/calendar/moon-21.svg") no-repeat scroll; }
.cal_22   { background: url("./../image/calendar/moon-22.svg") no-repeat scroll; }
.cal_23   { background: url("./../image/calendar/moon-23.svg") no-repeat scroll; }
.cal_24   { background: url("./../image/calendar/moon-24.svg") no-repeat scroll; }
.cal_25   { background: url("./../image/calendar/moon-25.svg") no-repeat scroll; }
.cal_26   { background: url("./../image/calendar/moon-26.svg") no-repeat scroll; }
.cal_27   { background: url("./../image/calendar/moon-27.svg") no-repeat scroll; }
.cal_28   { background: url("./../image/calendar/moon-28.svg") no-repeat scroll; }
.cal_29   { background: url("./../image/calendar/moon-29.svg") no-repeat scroll; }
.cal_30   { background: url("./../image/calendar/moon-30.svg") no-repeat scroll; }
#calendar [class^="cal_"]{
  background-size: 16px 16px;
  background-position: center bottom;
  height: 16px;
  display: block;
}

.ez-toc-title{
  margin: 0 auto 20px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 21px;
  font-size: 16px;
}
.c_keyword4, .c_keyword2, .c_keyword {
  margin: 28px auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.telling .c_keyword{margin: 0 auto 20px;}

.ez-toc-title::before,
.c_keyword::before {
  margin-right: 1em;
}
.ez-toc-title::before, .ez-toc-title::after,
.c_keyword::before, .c_keyword::after {
  border-top: 1px solid;
  content: "";
  width: 1em;
}
/*********/
.articles ul.ez-toc-list-level-3,
ul.ez-toc-list-level-3{
  margin:0em auto;
  margin-top: 16px;
}

ul.ez-toc-list {
  margin: 0 auto;
}
.ez-toc-list {
  counter-reset: hl_count;
  list-style: none;
}
.ez-toc-list li.ez-toc-heading-level-2 {
  counter-increment: mycounter;
}
.ez-toc-list li.ez-toc-heading-level-2:before {
  content: counter(mycounter, decimal-leading-zero);
}

/*.ez-toc-list ul li:before {
  background-color: #a9a9a9;
  padding: .1em .5em;
}*/
/********************/
.ez-toc-title::after,
.c_keyword::after {
  margin-left: 1em;
}
.c_keyword::before, .c_keyword::after {
  border-top: 1px solid;
  content: "";
  width: 1em;
}
.c_keyword2:after {
  content: "";
  margin-right: 1em;
  background: url("./../image/tarot/keyword_right.svg") no-repeat scroll center right/9px 24px;
  width: 24px;
  height: 24px;
}
.c_keyword2:before{
  content: "";
  margin-left: 1em; 
  background: url("./../image/tarot/keyword_left.svg") no-repeat scroll center left/9px 24px;
  width: 24px;
  height: 24px;
}
.c_keyword2 {
  font-size: 1.1em;
}

.c_keyword4:after {
  content: "";
  margin-right: 1em;
  background: url("./../image/common/point_keyword3_right.svg") no-repeat scroll center right/9px 24px;
  width: 24px;
  height: 24px;
}
.c_keyword4:before{
  content: "";
  margin-left: 1em; 
  background: url("./../image/common/point_keyword3_left.svg") no-repeat scroll center left/9px 24px;
  width: 24px;
  height: 24px;
}
.c_keyword4 {
  font-size: 16px;
  margin-bottom:14px;
  text-align: center;
}
.c_keyword_bold{
  text-align: center;
  margin-bottom: 8px;
}
.c_keyword span{font-size: 0.9em;}
.c_keyword_advice{
  background: #F6F5EE;
  padding: 1px 20px 20px;
  margin: 1em auto 0;
}
.c_keyword_advice .c_keyword_txt{
  font-size: 14px;
  line-height: 170%;
}
P.c_keyword3  {
  position: relative;
  display: inline-block;
  text-align: center;
  width: 100%;
}
P.c_keyword3::after {
  position: absolute;
  content: '';
  background: url("./../image/common/line.svg") no-repeat scroll center center/80px 5px;
  width: 100%;
  height: 5px;
  bottom: -12px;
  left: 0;
}

.c_keyword5{
  border: 1px solid #1F2121;
  width: 100%;
  font-size: 14px;
  border-radius: 50px;
  width: 113px;
  padding: 4px 12px;
  text-align: center;
}
.c_keyword6{
  font-weight: bold;
  padding: 10px 0;
}
/*
 *  scroll_top
 */
.scroll_top a{
  background: url("./../image/common/btn_scroll_to_top.svg") no-repeat scroll center center/87px 88px;
  display:block;
  width: 87px;
  height: 88px;
  margin: 0 auto;
}

/*--------------------*
.pagetop
*--------------------*/
.pagetop{
  display:none;
  position:fixed;
  bottom:20px;
  text-align:right;
  z-index:1001;
  transform:translate(-50%, 0);
  pointer-events:none;
}

@media only screen and (min-width: 600px) {
  .pagetop{
    width: 1000px;
    left:50%;
  }
}

@media only screen and (max-width: 599px) {
  .pagetop{
    right:0;
  }
}
.pagetop a{
  display:block;
  float:right;
  pointer-events: auto;
}
.pagetop a:hover{
  filter:alpha(opacity=80);
  -moz-opacity:0.8;
  opacity:0.8;
}
.scroll_top_mini a{
  background: url("./../image/common/btn_scroll_to_top_s.svg") no-repeat scroll center center/100% auto;
  width: 32px;
  height: 56px;
}


/* 
 * add_banner for Premium
 */
.go_premium_728_90{
  width: 728px;
  height: 90px;
  margin: 1em auto;
}

.go_premium_375_200{
  width: 375px;
  height: 200px;
  margin: 1em auto;
}


/**--  adjust util  --**/
.u-m0 { margin: 0px !important; }
.u-m5 { margin: 5px !important; }
.u-m10 { margin: 10px !important; }
.u-m20 { margin: 20px !important; }
.u-m30 { margin: 30px !important; }
.u-m40 { margin: 40px !important; }
.u-p0-r{ padding-right: 0px !important; }
.u-p0-l{ padding-left: 0px !important; }
.u-p0-t{ padding-top: 0px !important; }
.u-p0-b{ padding-bottom: 0px !important; }
.u-p0 {padding: 0px !important; }
.u-pt8 {padding-top: 8px !important; }
.u-pt10 {padding-top: 10px !important; }
.u-pt60 {padding-top: 60px !important; }
.u-p5 {padding: 5px !important; }
.u-p8 {padding: 8px !important; }
.u-p10 {padding: 10px !important; }
.u-pb12 {padding-bottom: 12px !important; }
.u-pt1 {padding-top: 1px !important; }
.u-p20 {padding: 20px !important; }
.u-p30 {padding: 30px !important; }
.u-p40 {padding: 40px !important; }
.u-pt16 {padding-top: 16px !important; }
.u-pb16 {padding-bottom: 16px !important; }
.u-pb40 {padding: 40px !important; }
.u-mb0 {margin-bottom: 0 !important; }
.u-mb4 {margin-bottom: 4px !important; }
.u-mb5 {margin-bottom: 5px !important; }
.u-mb8 {margin-bottom: 8px !important; }
.u-mb4 {margin-bottom: 4px !important; }
.u-mb10 {margin-bottom: 10px !important; }
.u-mb12 {margin-bottom: 12px !important; }
.u-mb14 {margin-bottom: 14px !important; }
.u-mb15 {margin-bottom: 15px !important; }
.u-mb16 {margin-bottom: 16px !important; }
.u-mb20 {margin-bottom: 20px !important; }
.u-mb24 {margin-bottom: 24px !important; }
.u-mb25 {margin-bottom: 25px !important; }
.u-mb28 {margin-bottom: 28px !important; }
.u-mb30 {margin-bottom: 30px !important; }
.u-mb32 {margin-bottom: 32px !important; }
.u-mb40 {margin-bottom: 40px !important; }
.u-mb42 {margin-bottom: 42px !important; }
.u-mb50 {margin-bottom: 50px !important; }
.u-mb60 {margin-bottom: 60px !important; }
.u-mt0 {margin-top: 0 !important; }
.u-mt5 {margin-top: 5px !important; }
.u-mt6 {margin-top: 6px !important; }
.u-mt8 {margin-top: 8px !important; }
.u-mt10 {margin-top: 10px !important; }
.u-mt12 {margin-top: 12px !important; }
.u-mt15 {margin-top: 15px !important; }
.u-mt16 {margin-top: 16px !important; }
.u-mt20 {margin-top: 20px !important; }
.u-mt24 {margin-top: 24px !important; }
.u-mt28 {margin-top: 28px !important; }
.u-mt25 {margin-top: 25px !important; }
.u-mt30 {margin-top: 30px !important; }
.u-mt32 {margin-top: 32px !important; }
.u-mt38 {margin-top: 38px !important; }
.u-mt40 {margin-top: 40px !important; }
.u-mt42 {margin-top: 42px !important; }
.u-mt50 {margin-top: 50px !important; }
.u-mt60 {margin-top: 60px !important; }
.u-mr10 {margin-right: 10px !important; }
.u-pl15 {padding-left: 15px !important; }

.u-br4  {border-radius:4px  !important;}
.u-br8  {border-radius:8px  !important;}
.u-br12 {border-radius:12px !important;}
.b-shadow1 {box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1);}

.u-mauto{margin:auto !important; }
.tex_left{text-align: left !important;}
.tex_right{text-align: right !important;}
.c{text-align: center;}
.b{font-weight: bold;} 
.gray_moon{color:rgba(114, 120, 122, 1);}
.gray_sun{color:#838179;}
.fs10{font-size: 10px !important;}
.fs11{font-size: 11px !important;}
.fs12{font-size: 12px !important;}
.fs13{font-size: 13px !important;}
.fs14{font-size: 14px !important;}
.fs15{font-size: 15px !important;}
.fs16{font-size: 16px !important;}
.fs18{font-size: 18px !important;}
.fs20{font-size: 20px !important;}
.fs22{font-size: 22px !important;}
.fs24{font-size: 24px !important;}
.l_h13{line-height:1.3 !important;}
.l_h18{line-height:18px !important;}
.l_h20{line-height:20px !important;}
.l_h21{line-height:21px !important;}
.lh15{line-height:15px !important;}
.lh24{line-height:24px !important;}
.l_h24{line-height:24px !important;}
.l_h150{line-height:150% !important;}
.l_h170{line-height:170% !important;}
.l_s-1{letter-spacing: -1px; !important;}
.l_s-2{letter-spacing: -2px; !important;}
.col_bg_sun{background:#F6F5EE !important;}
.u-w255{width: 255px !important;}
.fw700{font-weight: 700!important;}
.fw500{font-weight: 500!important;}
.ta-r{text-align: right;display: block;}
.bg_commoncol_footer{background: #E8E8E8!important;} 
.br8{border-radius:8px!important;}
.u-0mauto{margin:0 auto!important;}
.w228{width: 228px !important;}
.w114{width: 114px !important;}
.w1000{width: 1000px !important;}
.b1_solid_EAE9E2{
  border: 1px solid #EAE9E2;
}
.bb_dashed {
  border-bottom: 1px dashed #1F2121;
}
.cross_img{
  background: url("./../image/common/cross.svg") no-repeat scroll center center/16px 15px;
  width: 27px;
  height: 37px;
  display: block;
}
.articles .article.moon_constellation{
  display: grid;
  margin-bottom: 12px;
  grid-template-areas: "a  b c d";
  grid-template-columns: 73px 34px 50px auto;
              
}
.moon_constellation .radius12{
  grid-area: a;
}
.moon_constellation .cross_img{
  grid-area: b;
  margin-left: 7px;
  align-self: center;
}
.moon_constellation .p_text{
  grid-area: c;
  width: 50px;
  align-self: center;
}
.moon_constellation .bb_dashed{
  grid-area: d;
  margin-left: 12px;
}

@media only screen and (max-width: 599px) {
  .moon_constellation .bb_dashed{
    align-self: end;
  }
}
@media only screen and (min-width: 600px) {
  .moon_constellation .bb_dashed{
    align-self: center;
  }
}
/*
 * pagenation  
 */
.pagenation {
  margin-bottom: 70px;
  text-align: center;
  white-space: nowrap;
}
.pagenation span.current {
  background-color: #EEE4BA;
}
.pagenation a, .pagenation span {
  font-size: 12px;
  display: inline-block;
  color: #666;
  background-color: #fff;
  text-decoration: none;
  text-align: center;
  line-height: 36px;
  width: 36px;
  height: 36px;
  margin: 0 6px;
  transition: .2s ease-in-out;
  white-space: nowrap;
  -webkit-border-radius: 50%;
  border-radius: 50%;
}
.pagenation a.previouspostslink,
.pagenation a.nextpostslink{
  background: none;
}

.scroll_top{
  margin: 120px auto 60px;
}
.b_gold_underline{background: linear-gradient(transparent 50%, rgba(238,228,186,0.6) 50%);}
.u_gold{background: linear-gradient(transparent 50%, rgba(246, 245, 238, 1) 50%);}
.u_silver{background: linear-gradient(transparent 50%, rgba(242, 245, 245, 1) 50%);}
.b_shimple_underline{text-decoration: underline;text-underline-offset: 2px;}
.b_gold{color:#B49A2E;}
.b_silver{color:#838179;}
.underline_wide_img{
  background: url("./../image/common/line.svg") no-repeat scroll center center/78px 5px;
  width: 78px;
  height: 5px;
  display: block;
  margin: 2px auto 8px;
}

.i_card_img.enlarge{
  position:relative;
}
.i_card_img.enlarge img{width:100%;height:auto;}

.icon_enlarge{
  background: url("./../image/teso/icon_enlarge.svg") no-repeat scroll center center/20px 21px;
  width: 20px;
  height: 21px;
  right: -2px;
  position:absolute;
  pointer-events:none;
  cursor: pointer;
}

#modal-container {
  display: none;
  position: fixed;
  background: rgba(0, 0, 0, .6);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
}
img.popup {
  cursor: pointer;
}
#modal-container .modal {
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}
.close {
  cursor: pointer;
  position: absolute;
  color: rgba(256,256,256,0.5);
}
@media only screen and (min-width: 600px) {
  .close {
    top: -53px;
    right: 0em;
    font-size: 40px;
  }
  .modal_inner{
    width: auto;
    height: 450px;
    position: relative;
  }
  #modal-container .modal img {
    width: auto;
    height: 450px;
  }
  .icon_enlarge{
    top: 270px;
  }

}
@media only screen and (max-width: 599px) {
  header ul {
    justify-content: space-between;
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .close {
    top: -53px;
    right: 0;
    font-size: 40px;
  }
  .modal_inner{
    width: auto;
    max-width: 300px;
    max-height:450px;
    position: relative;
  }
  #modal-container .modal img {
    width: auto;
    max-width: 300px;
    max-height:450px;
  }
  .icon_enlarge{
    top: 160px;
  }
  #sidemenus{
    width: 100%;
    margin: 0 auto;
  }
  #sidemenus #related,
  #sidemenus #ranking,
  #sidemenus #news{
    width: calc(100% - 40px);
    margin: 0 auto 80px;
  }
  #sidemenus #ranking {
    width: 100%;
  }
}
dd.mini_header{
  width: 100%;
  background: #fff;
}
dd.mini_header h1{
  margin: 0 auto;
  background: #fff;
  width: 100%;
}
  .nav__item{
    width: calc(100% - 40px);
    margin: 16px auto 8px;
    line-height: 36px;
  }
  html {
    overflow: auto;
  }
  dt.keyword span {
    margin: 4px;
  }
  dt.keyword{
    display: flex;
    margin: 5px auto;
    width: calc(100% - 40px);
    flex-wrap: wrap;
    justify-content: center;
  }
  html.drawerOpen {
    overflow: hidden;
  }
  .sns, 
  .two_btn {
    display: flex;
    justify-content: center;
    column-gap: 20px;
    margin: 20px auto;
  }
  .drawer {
    position: fixed;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  .drawer__backdrop {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .drawer__nav {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 335px;
  }

  .nav {
    background-color: #333;
    overflow: auto;
  }

  .nav__button {
    position: absolute;
    right: 0;
    box-sizing: border-box;
    border-width: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background-color: transparent;
    left: -25px;
    top: 10px;
  }

  .nav__button::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    content: "";
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;
    transition-timing-function: linear;
  }

  .nav__button:hover::before {
    opacity: 1;
  }
  header dd.nav__list{
    width: 100%;
  }

  .nav__list {
    margin-bottom: 0;
    padding-left: 0;
    list-style-type: none;
  }


  .nav__link {
    display: block;
    position: relative;
    padding: 1em;
    color: ivory;
    line-height: 1.2;
    text-decoration: none;
  }

  .nav__link::before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.2);
    content: "";
    opacity: 0;
    transition-property: opacity;
    transition-duration: 0.1s;
    transition-timing-function: linear;
  }

  .nav__link:hover::before {
    opacity: 1;
  }


  .nav dd.nav__list {
    display: block;
  }

  .nav dd.nav__list dt.nav__item {
    text-align: left;
    font-size: 15px;
    border-left: initial;
    border-right: initial;
    background: initial;
  }

.drawer[aria-expanded] {
  transition-property: visibility;
  transition-duration: 0.25s;
}
.to_guide a{
  display: block;
  text-align: center;
  padding: 4px;
  border: 1px solid;
  border-radius: 50px;
  width: 200px;
  margin: 0 auto;
}
.drawer[aria-expanded] .drawer__backdrop {
  transition-property: opacity;
  transition-duration: 0.25s;
  transition-timing-function: linear;
}

.drawer[aria-expanded] .drawer__nav {
  transition-property: transform;
  transition-duration: 0.25s;
  transition-timing-function: ease;
}

/*  J   Ă   Ƃ  */
  .drawer[aria-expanded="true"] {
    visibility: visible;
    z-index: 1000;
  }

  .drawer[aria-expanded="true"] .drawer__backdrop {
    opacity: 1;
  }

  .drawer[aria-expanded="true"] .drawer__nav {
    background: #F6F5EE;
  }

  /*  ‚  Ă   Ƃ  */
  .drawer[aria-expanded="false"] {
    visibility: hidden;
  }

  .drawer[aria-expanded="false"] .drawer__backdrop {
    opacity: 0;
  }

  .drawer[aria-expanded="false"] .drawer__nav {
    transform: translateX(100%);
  }

footer .footer_sns{
  width: 240px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  padding-top: 40px;
}
.breadcrumbs li {
    display: inline;
}
.breadcrumbs li:last-child::after {
    content: '';
}
span.home_icon {
  background: url("./../image/common/icon_home.svg") no-repeat center center/ 100% auto;
  width: 14.4px;
  height: 14.4px;
  display: inline-block;
  text-align: center;
  margin-right: 4px;
}
.breadcrumbs li::after {
  content: url("./../image/common/bc_arrow.svg");
  padding: 0 5px;
}

/* 20220802　tuika */

@media only screen and (max-width: 599px) {
  header#sun_header ul span {
      font-size: 9px;
      padding: 4px 0 0;
      line-height: 12px;
      letter-spacing: -0.04em;
  }
}

.breadcrumbs_inner{
    padding-left: 18px;
    text-indent: -18px;
}

span.underline_wide {
  background: url("./../image/common/underline_wide.svg") no-repeat scroll center center/100% auto;
  width:226px;
  height:8px;
  display: block;
  margin:8px auto 28px;
}


@media only screen and (min-width: 600px) {
  .modoru{
    margin-bottom:20px;
  }
  header .sun_logo.common_h img {
    width: 148.5px;
    padding-top: 0;
  }
  #base_guide_top .s_01 .accordion_one{
    width: 380px;
  }
  .header_inner.common_h{
    padding: 20px 0 12px;
    width: 810px;
  }
  #base_guide_top .section.s_01{
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, 380px);
    column-gap: 20px;
  }
  #base_guide_top .section.s_01 .accordion_inner{display: block;}

  #base_guide {
    max-width: 810px;
    margin: 40px auto;
  }
  #base_guide #sidemenus{
    float:left;
    width:210px;
  }
  #base_guide #contents{
    float:right;
    width:560px;
    padding: 28px 80px 40px;
    border-radius: 8px;
  }

  #base_guide_top {
    width: 800px;
    margin: 40px auto;
  }
  #base_guide_top #contents{
    background: none;
    width: 800px;
    gap: 20px;
    display: grid;
    /*grid-template-columns: repeat(auto-fill, 380px);*/
  }
  #base_guide_top .guide_box{
    background: #fff;
    width:380px;
    min-height:237px;
    padding:20px;
    border-radius: 8px;
  }
  .guide_result_box{
    width: 380px;
    background: #fff;
    padding: 16px 20px;
    border-radius: 8px;
    text-align: left;
  }
  #sea-con{
    width: 800px;
    display: grid;
    grid-template-columns: repeat(auto-fill, 380px);
    gap: 20px;
  }
  #sea-con-non{
    width: 800px;
  }
}
.guide_result_box h2{
  text-align: left;
  font-size: 14px;
  line-height: 20px;
  margin: 0;
}
.modoru span.guide_arrow{
  background: url("./../image/common/arrow_left.svg") no-repeat scroll center center/100% auto;
  width: 8px;
  height: 12px;
  display: inline-block;
  margin-right: 4px;
}
  .no_result{
    margin: 40px auto 0;
  }
  .no_result .no_result_img{
    background: url("./../image/common/no_result.svg") no-repeat scroll center center/100% auto;
    width: 49px;
    height: 40px;
    margin: 20px auto;
  }

@media only screen and (max-width: 599px) {
  .modoru,
  .search-result .result_count{
    margin-bottom:20px;
    padding:0 20px;
  }
  .modoru span.guide_arrow{
    background: url("./../image/common/arrow_left.svg") no-repeat scroll center center/100% auto;
    width: 8px;
    height: 12px;
    display: inline-block;
    margin-right: 4px;
  }
  .guide_result_box,
  #base_guide #contents{
    background: #fff;
    width:335px;
    padding:20px;
    border-radius: 8px;
    margin: 0 auto 0px;
  }
  .guide_result_box{
    padding:16px 20px;
    margin-bottom: 16px;
  }
  header .sun_logo.common_h img {
      width: 135px;
  }
  .no_result{
    margin: 40px auto 0;
  }
  .no_result .no_result_img{
    background: url("./../image/common/no_result.svg") no-repeat scroll center center/100% auto;
    width: 49px;
    height: 40px;
    margin: 20px auto;
  }
  .serchform_outer.is_sp{
    margin: 20px auto 40px;
    width: calc(100% - 40px);
  }
  #base_guide_top #contents{
    background: none;
  }
  #base_guide_top .guide_box{
    background: #fff;
    width:335px;
    padding:20px;
    border-radius: 8px;
    margin: 0 auto 20px;
  }
}
.related_guide{
  width: 100%;
  margin: 40px auto;
  background: #F2F2F2;
  padding: 20px;
}
.box_one a,
.related_guide a,
#base_guide_top .guide_box a{
  color: #1F2121;
  line-height: 21px;
  margin-bottom: 8px;
  display: block;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.but-inp-hom{
  background: #1F2121;
  color: #fff;
  border-radius: 4px;
  font-size: 14px;
  width: 61px;
  height: 32px;
  border: none;
}
.inp-hom{
  width: 262px;
  height: 32px;
  border: 1px solid #1F2121;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}
.searchform{
  display: flex;
  gap: 12px;
}
.box_one span.dot,
.related_guide span.dot,
#base_guide_top .guide_box span.dot{
  width: 6px;
  height: 6px;
  background: #1F2121;
  border-radius: 6px;
  display: inline-block;
  margin-right: 8px;
  vertical-align: middle;
}
#base_guide .articles{
  font-size: 14px ;
  line-height: 24px;
}
.serchform_inner{
  width: 335px;
  margin: 40px auto;
}
.guide_right .b_title{
  width: 146px;
  position:relative;
}
.guide_right ul{
  background: #fff;
  border-radius: 9px;
  padding: 12px 20px;
}
.guide_right li.b_line_top{
  border-bottom: 1px solid #1F2121;
  padding-bottom: 12px;
}
.b_line_bottom{
  border-bottom: 1px solid #1F2121;
  padding-bottom: 20px;
  margin-bottom:20px;
}
.guide_right li.b_line_bottom{
  padding-top: 12px;
}
.guide_right .b_title .accordion01_toggle{
  background: url("./../image/common/guide_arrow.svg") no-repeat scroll center center/100% auto;
  width: 12px;
  height: 8px;
  display: block;
}

#base_information .article_ttl_h1{
  width:100%;
  margin: 0 auto;
}
#base_information .title{
  display: flex;
  text-align: center;
  font-size: 18px;
  justify-content: center;
  margin-bottom: 8px;
}
#base_information .date{
  margin-bottom: 20px;
  height: 21px;
  display: flex;
  justify-content: center;
  font-size: 14px;
  color: #838179;
}
#base_information #contents{
  font-size: 14px;
}

@media only screen and (min-width: 600px) {

  #base_information {
    max-width: 810px;
    margin: 120px auto;
  }
  #base_information #contents{
    float:right;
    width:800px;
    padding: 28px 80px 40px;
    border-radius: 8px;
  }
}

@media only screen and (max-width: 599px) {

  #base_information {
    max-width: 375px;
    margin: 28px auto;
  }

  #base_information .title{
    width: 295px;
  }
  #base_information #contents{
    background: #fff;
    width:335px;
    padding:28px 20px 40px;
    border-radius: 8px;
    margin: 0 auto 0px;
  }
}

/*====================================================================
.s_01 .accordion_one
====================================================================*/
.s_01 .accordion_one {
  margin: 0 auto 20px;
  border-radius: 8px;
  background: #fff;
}
@media only screen and (max-width: 599px) {
  .s_01 .accordion_one {
    width: calc(100% - 40px);
  }
}

.s_01 .accordion_one .accordion_header {
  background-color: #fff;
  border-radius: 8px;
  color: #1F2121;
  font-size: 13px;
  padding: 12px 28px 12px 20px;
  text-align: left;
  position: relative;
  z-index: +1;
  cursor: pointer;
  transition-duration: 0.2s;
}
.hr_accordion_one{
  border-bottom: 1px solid #1f2121;
  margin-bottom: 12px;
}
.s_01 .accordion_one .accordion_header .i_box {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 40px;
  right: 15px;
  width: 12px;
  height: 8px;
  border: 1px solid #fff;
  margin-top: -20px;
  box-sizing: border-box;
  background: url("./../image/common/guide_arrow.svg") no-repeat scroll center center/100% auto;
  transition-duration: 0.2s;
}
.to_guide_top{
    display: block;
    border-radius: 50px;
    padding: 12px 20px;
    border: 1px solid #1F2121;
    margin: 40px auto;
}
.s_01 .accordion_one .accordion_header .i_box .one_i {
  display: block;
  width: 12px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  transform-origin: center center;
  transition-duration: 0.2s;
  position: relative;
}
.s_01 .accordion_one .accordion_header.open .i_box {
  -webkit-transform: rotate(-360deg);
  transform: rotate(-360deg);
}
.s_01 .accordion_one .accordion_header .i_box .one_i:before {
  width: 4px;
  height: 18px;
  top: 0;
  left: 7px;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:before {
  content: none;
}
.s_01 .accordion_one .accordion_header.open .i_box .one_i:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.s_01 .accordion_one .accordion_inner {
  display: none;
  padding: 0 20px 12px;
}

.s_01 .accordion_one .accordion_inner p.txt_a_ac {
  margin: 0;
}


.check_param_area {
  background: #F6F5EE;
  margin: 40px auto;
  padding:28px 20px 40px 20px;
}
.check_param_area .article_ttl_h1{
  width:100%;
  margin-bottom:20px;
}

table.param_input_tbl{
  width: 295px;
}
table.param_input_tbl td .calenderForm{
  width: 295px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #1F2121;
  background: #fff;
  text-align: center;
  position: relative;
}
table.param_input_tbl td .calenderForm input{
  border: none;
/*  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;*/
  outline: 0;
  padding: 0;
}
.date_unit{
  display: inline-block;
  color: #D3D2CA;
  padding: 0 12px;
}
table.param_input_tbl td .calenderForm input::placeholder {
  color: #D3D2CA;
}

table.param_input_tbl td .calenderForm [id^="birth_year"]        {width: 36px;text-align: center;font-size: 15px;}
table.param_input_tbl td .calenderForm [id^="birth_month"]       {width: 20px;text-align: center;font-size: 15px;}
table.param_input_tbl td .calenderForm [id^="birth_mday"]     {width: 20px;text-align: center;font-size: 15px;}
table.param_input_tbl td .calenderForm [id^="target_birth_year"] {width: 36px;text-align: center;font-size: 15px;}
table.param_input_tbl td .calenderForm [id^="target_birth_month"]{width: 20px;text-align: center;font-size: 15px;}
table.param_input_tbl td .calenderForm [id^="target_birth_mday"] {width: 20px;text-align: center;font-size: 15px;}

table.param_input_tbl input{
  width: 295px;
  padding: 8px 12px;
  border-radius: 4px;
  border: 1px solid #1F2121;
  outline: 0;
}
.param_horizon{
  border-top: 1px dashed #1F2121;
  margin:8px auto 20px;
  width: 295px;
}
table.param_input_tbl .tr_name input{
  width: 140px;
  text-align: center;
}
table.param_input_tbl .tr_name input::placeholder {
  color: #D3D2CA;
}

table.param_input_tbl select{
  width: 180px;
  height: 40px;
  padding: 8px;
  border-radius: 4px;
  border: 1px solid #1F2121;
  color: #1F2121;
}
table.param_input_tbl select {
  -webkit-appearance: none;
  appearance: none;
  background-image: url(./../image/common/pulldown_arrow.svg);
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 12px 12px;
  outline: 0;
}
table.param_input_tbl select:invalid { color: #D3D2CA; }
table.param_input_tbl select option { color: #1F2121; }

table.param_input_tbl td .select_hour { width: 90px; font-size: 15px;}
table.param_input_tbl td .select_min { width: 90px; font-size: 15px;}
table.param_input_tbl td .hour { margin: 4px; }
table.param_input_tbl td .min { margin: 4px; }


table.param_input_tbl td {
  width: auto;
  height: 52px;
  color: #72787A;
  vertical-align: top;
}
table.param_input_tbl th{
  font-weight: 400;
  font-size: 14px;
  line-height: 20px;
  text-align: left;
  padding-bottom: 8px;
}
.shiraberu_btn{
  width: 295px;
  margin: 8px auto 0px;
}
.more_red_btn{
  width: 295px;
  margin: 8px auto 0px;
}
.more_blue_btn{
  width: 295px;
  margin: 28px auto 0;
}

.info_login{
  margin:0 auto;
  border: 1px dashed #1F2121;
  border-radius: 8px;
  padding: 20px;
}
.info_txt{
  display: table;
  margin: auto;
  text-align: left;
}
.form_close {
  background: url(./../image/common/clear_cross.svg) no-repeat center center/20px 20px;
  width: 24px;
  height: 24px;
  display: inline-block;
  position: absolute;
  right: 8px;
  cursor: pointer;
  border: none;
  display: none; 
  top: 8px;
  outline: 0;
}
@media only screen and (max-width: 599px) {
  .info_login{
    width:335px;
  }
}
@media only screen and (min-width: 600px) {
  .form_close:hover{
    background: url(./../image/common/clear_cross.svg) no-repeat center center/20px 20px,#F2F2F2;
    width: 24px;
    height: 24px;
    border-radius: 50px;
    border: none;
  }

  .info_login{
    width:460px;
  }
  .check_param_area {
    width: 540px;
  }
}

[class^="info_login_btn_"]{
  width: 120px;
  line-height: 30px;
  border: 1px solid #1F2121;
  border-radius: 16px;
}
.info_login_btns{
  width: 255px;
  margin: 12px auto 0;
  display: flex;
  justify-content: space-between;
}
a.btn_shiraberu{
  background: #1F2121;
  height: 40px;
  width: 295px;
  border-radius: 20px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
a.more_red_btn{
  background: #EE6B62;
  height: 40px;
  width: 295px;
  border-radius: 20px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}
a.more_blue_btn{
  background: #4B93B1;
  height: 40px;
  width: 295px;
  border-radius: 20px;
  display: block;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
}

.err_txt{
  color: #EA4E44;
  font-weight: 700;
  font-size: 13px;
  line-height: 14px;
  margin-bottom: 12px;
  margin-top: 8px;
  display: none;
}
[id^="result_form"]{
  display: none;
}
[id^="result_form"] .result_1{
  width: 295px;
  margin: 0 auto 32px;
  gap: 20px;
  display: flex;
}
[id^="result_form"] .result_1:last-child{
  margin: 0 auto 0px;
}
[id^="result_form"] .result_left{
  width: 120px;
  height:120px;
}
[id^="result_form"] .result_right{
  width: 155px;
}
[id^="result_form"] .arrow_btm{
  background-size:26px 18px;
  width: 26px;
  height: 18px;
  margin: 28px auto 28px;
}
[id^="result_form"] P.btn_detail{
  background: #1F2121;
  color: #fff;
  text-align: center;
  border-radius: 14px;
  width: 120px;
  line-height: 28px;
  margin: 0 auto;
}
[id^="result_form"] .supplement_text{
  text-align:center;
  margin: 20px auto 0px;
}


/** article_rl_outer **/

.article_rl_outer .article_left .i_ct_keywords span{
  display: inline-block;
  width: 100px;
  text-align: center;
}
.article_rl_outer .article_left .i_ct_keywords:first-child {
  margin-top: 0;
}
.article_rl_outer .article_left .i_ct_keywords:last-child {
  margin-bottom: 0;
}
.bg_col_sun{
  background:#F6F5EE;
}

@media only screen and (min-width: 600px) {
  .article_rl_outer{display: flex;}
  .article_rl_outer .article_right,
  .article_rl_outer .article_left{
    width:50%;
  }
  .article_rl_outer .article_right,
  .article_rl_outer .article_left{
    margin-top: 12px;
    margin-bottom: 28px;
  }
  .article_rl_outer .article_right{
    padding: 0 20px 0 28px;
  }
  .article_rl_outer .article_left{
    padding: 0 28px 0 20px;
    border-right: 1px solid #000;
  }
  .article_rl_outer .article_right,
  .article_rl_outer .article_left{
    margin-top: 12px;
    width:50%;
    margin-bottom: 28px;
  }
  .shasow_boxS_sp{
    width: 335px;
  }
}
@media only screen and (max-width: 599px) {
  .article_rl_outer .article_right,
  .article_rl_outer .article_left{
    width:100%;
  }
  .article_rl_outer .article_left{
    margin-top: 16px;
    margin-bottom: 12px;
  }
  .article_rl_outer .article_right{
    padding: 16px;
  }
  .article_rl_outer .article_left{
    padding: 0 16px;
  }
  .article_rl_outer_horizon{
    border-top: 1px solid #1F2121;
    width: 300px;
    margin: 24px auto 0;
  }
}

.boxS_sp{
  width: 335px;
  margin: 0 auto;
  border: 1px solid #EAE9E2;
  border-radius: 8px;
  z-index: 10;
}
.banner_under_shadow{
  background:radial-gradient(50% 50% at 50% 50%, #EFEEEC 0%, rgba(239, 238, 236, 0) 100%);
  width: 100%;
  height: 24px;
  position: relative;
  bottom: 12px;
  z-index: 1;
  margin: 0 auto;
}
.topic_img.ban_sf,
.topic_img.ban_sf img{
  width: 100%;
}
.banner_box{
  box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1);
  margin:0 auto;
  position: relative;
  z-index: 2;
  border-radius: 12px;  
}
@media only screen and (min-width: 600px) {
  .banner_under_shadow{
    width: 400px;
  }
  .topic_img.ban_sf{
    width:400px;
  }
  .banner_box{
    width: 400px;
  }
  .banner_box .box_bottom P.caption{
    width: auto;
  }
  .shasow_boxS_sp{
    width: 400px;
  }
  .banner_box.only_img img{
    height: 214px;
  }
  .articles .article.y_thumb_movie{
    width:420px;
  }
  .boxS_sp .mini_summary h4.box_summary{
    padding: 20px 20px 0px 16px;
  }
}
.articles .article.y_thumb_movie .lyte-wrapper.fourthree{
  margin:0 !important;
}

.banner_box .box_bottom{
  padding: 12px 20px 16px;
}
.banner_box img{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  object-fit: cover;
  object-position: center center;
}
.boxS_sp .mini_summary h4.box_summary{
  font-size: 14px;
  line-height: 18px;
  background: #fff;
  border-radius: 8px;
  -webkit-line-clamp: 2;
}

@media only screen and (max-width: 599px) {
  .banner_box{
    width: calc(100% - 40px);
  }
  .shasow_boxS_sp{
    width: 335px;
  }
  .banner_box.only_img img{
    height: 180px;
  }
  .articles .article.y_thumb_movie{
    width:335px;
  }
  .boxS_sp .mini_summary::after {
    content: url(./../image/common/bc_arrow.svg);
    width:6px;
    height:10px;
    position: absolute;
    top: 26px;
    right: 12px;
  }
  .boxS_sp .mini_summary h4.box_summary{
    padding: 20px 36px 0px 16px;
  }
}
.banner_box.only_img{ 
  box-shadow:0px 0px 4px rgba(0, 0, 0, 0.1);
}
.banner_box.only_img img{
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}
.banner_box h4.box_title{
  -webkit-line-clamp: initial;
}
.pos_r2 {
  position: relative;
  z-index: 20;
}
.shasow_boxS_sp{
  background:radial-gradient(50% 50% at 50% 50%, #EFEEEC 0%, rgba(239, 238, 236, 0) 100%);
  height: 20px;
  position: relative;
  bottom: 10px;
  z-index: 1;
  margin: 0 auto;
}
.boxS_sp  a{
  display: flex;
}
.boxS_sp .mini_motif img{
  width: 100px;
  height: 76px;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
}
.boxS_sp .mini_summary{
  width:235px;
  background: #fff;
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  position: relative;
}
a.over_link {
  display:block;
  height:20px;
}

@media only screen and (min-width: 600px) {
  .site_links{
    width: 678px;
    padding:20px;
  }
  .site_links ul{
    text-align: center;
  }
  .site_links li{
    display: inline-block;
    margin: 0 10px 0;
  }
  .more_telling{
    width:460px;
    border:1px solid #4B93B1;
    border-radius:8px;
    padding:40px 30px 32px;
    margin:0 auto;
    position:relative;
  }
}
.more_title{
  position: absolute;
  top: -12px;
  text-align: center;
  background: #F6F5EE;
  padding: 0 10px;
  width: 140px;
  left: 158px;
  color:#4B93B1;
}
.more_telling li.sub_ttl{
  position:relative;
  padding-left: 20px;
}
.more_telling li.sub_ttl::before{
  background: #BBCBCB;
  width:14px;
  height:14px;
  border-radius:50px;
  position: absolute;
  content: '';
  top: 4px;
  left: 0;
}
@media only screen and (max-width: 599px) {
  .site_links{
    width: calc(100% - 40px);
  }
  .more_telling{
    border:1px solid #4B93B1;
    border-radius:8px;
    padding:30px 20px;
    margin:0 auto;
    position:relative;
  }
  .more_title{
    left: 97px;
  }

}

.k-btn{
  background: #1F2121;
  height: 40px;
  width: 295px;
  border-radius: 20px;
  color: #fff;
  text-align: center;
  line-height: 40px;
  font-size: 14px;
  cursor:pointer;
  display:none;
}
.flex_img_items{
  display: flex;
  justify-content: center;
  align-items: center;
}
.flex_img_items img{
  max-width: 100%; 
  height: auto;
}

.prohibited_txt{
  width: 540px;
  margin: 80px auto 40px;
  font-size: 12px;
}

@media screen and (max-width: 599px) {
  .prohibited_txt {
    width: 90%;
  }
}