@charset "UTF-8";



/* ////////// Reset Stylesheet ////////// */

html, body, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  font-weight: normal;
  vertical-align: baseline;
  background: transparent;
}
* {
  box-sizing: border-box;
}
body {
  line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display:block;
}
ul {
  list-style:none;
  margin: 0;
  padding: 0;
}
blockquote, q {
  quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content:'';
  content:none;
}
a {
  margin:0;
  padding:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
ins {
  background-color:#ff9;
  color:#000;
  text-decoration:none;
}

mark {
  background-color:#ff9;
  color:#000;
  font-style:italic;
  font-weight:bold;
}
del {
  text-decoration: line-through;
}
abbr[title], dfn[title] {
  border-bottom:1px dotted;
  cursor:help;
}
table {
  border-collapse:collapse;
  border-spacing:0;
}
table th, table td {
  vertical-align: top;
  text-align: left;
}
hr {
  display:block;
  height:1px;
  border:0;
  border-top:1px solid #cccccc;
  margin:1em 0;
  padding:0;
}
input, select {
  vertical-align:middle;
}
input, button, textarea, select {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
  outline: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}



/* ////////// Font ////////// */

html {
  font-size: 87.5%; /*14px*/
}
body {
  line-height: 1.8;
}
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Medium");
}
@font-face {
  font-family: "Yu Gothic M";
  src: local("Yu Gothic Bold");
  font-weight: bold;
}
body {
  /* ---- Gothic Set ---- */
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", HelveticaNeue,
    "Segoe UI",
    "游ゴシック体", YuGothic, "Yu Gothic M",
    "游ゴシック Medium", "Yu Gothic Medium",
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic",
    sans-serif;
  color: #4d3a0a;
}
/* -------- Apply Gothic -------- */
.style--font-gothic ,
.page-link , .page-back , .page-top ,
.container--selling-point h3 ,
.container--info-list .col-body ,
.container--footer-map ,
.container--company-info ,
.container--site-copyright ,
.container--section-breadcrumb ,
.container--item-relation .col-body {
  font-family:
    -apple-system, BlinkMacSystemFont,
    "Helvetica Neue", HelveticaNeue,
    "Segoe UI",
    "游ゴシック体", YuGothic, "Yu Gothic M",
    "游ゴシック Medium", "Yu Gothic Medium",
    "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3,
    "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro",
    "メイリオ", Meiryo,
    Osaka,
    "ＭＳ Ｐゴシック", "MS PGothic",
    sans-serif;
}
/* -------- Apply Mincho -------- */
.syle--font-mincho {
  font-family:
    "游明朝体", "YuMincho",
    "游明朝", "Yu Mincho",
    "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN W3", HiraMinProN-W3,
    "ヒラギノ明朝 ProN", "Hiragino Mincho ProN",
    "ヒラギノ明朝 Pro", "Hiragino Mincho Pro",
    "HGS明朝E",
    "ＭＳ Ｐ明朝", "MS PMincho",
    serif;
}



/* ////////// Common ////////// */

html ,
body ,
#stage {
  height: 100%;
}

@media only screen and (min-width: 768px) {
  .sp-only {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .pc-only {
    display: none;
  }
}
input, textarea {
  font-size: 16px;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
a ,
a:visited {
  text-decoration: none;
  color: #fff;
  transition: color 0.2s ease-out;
}
a:hover ,
a::focus {
  text-decoration: underline;
  color: #000000;
}
input::placeholder {
  color: #bbb;
}
input:-ms-input-placeholder {
  color: #bbb;
}
input::-ms-input-placeholder {
  color: #bbb;
}
p {
  margin-bottom: 1em;
}
p:last-child {
  margin-bottom: 0;
}


/* ////////// Structure ////////// */

#stage {}
#row {}
#col {}



/* ////////// Style ////////// */

@media (max-width: 420px) {
}
@media (max-width: 768px) {
}

/* ========== mystyle ========== */

body {
  min-height: 100vh;
/*   background-color: #0c1a2a; */
  background-color: #ffffff;
  background-image: url(./images/bg-light-02.jpg);
/*   background-size: contain; */
  background-size: 100%;
  background-repeat: repeat-y;
}
#main .row {
/*   outline: 2px dashed #fff; */
/*   padding: 20px; */
}
#main .row-wrapper {
/*   outline: 2px dashed #ff0; */
}

article {
  position: relative;
  z-index: 1;
}
@media only screen and (min-width: 768px) {
  #main {
    width: 80%;
    max-width: 700px;
    margin: 0 auto;
  }
}


.body--style-light {

}
.row--style-header .column--header .col-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  padding: 1.0em;
  background: rgb(12,26,42);
  background: -moz-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
  background: linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
/*   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0c1a2a",endColorstr="#0c1a2a",GradientType=1); */
}
.row--style-header .column--header .col-content > * {
  flex-shrink: 1;
}
.row--style-header .column--header .col-content .col-head ,
.row--style-header .column--header .col-content .col-foot {
  flex-grow: 0;
  width: 2.0em;
}
.row--style-header .column--header .col-content .col-body img {
  width: auto;
  height: 2.0em;
}





/* ========== LAYOUT ========== */

.layout--single {
  margin: 10px;
}
.layout--sidebyside {
  display: flex;
  margin: 10px;
}
.layout--sidebyside > * {
  flex-basis: 100%;
  margin: 0;
  box-shadow: none;
}
.layout--center {
  text-align: center;
}



/* ========== PANEL ========== */

.style--panel {
  margin: 10px;
  padding: 10px;
  background-color: #4d3a0a;
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0,0,0,0.25);
  color: #fff;
}
.style--panel > * {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eedcaf;
  padding: 20px;
}
.row.style--panel .row-head ,
.col.style--panel .col-head {
  margin-bottom: 1.0em;
}
.row.style--panel .row-foot ,
.col.style--panel .col-foot {
  margin-top: 2.0em;
}

#input--someone .style--panel {
  background-color: #7b6328;
}

/* ========== HEADLINE ========== */

.style--headline {
  margin: 1.0em 0;
  font-weight: bold;
  font-size: 120%;
  color: #e5e1b1;
}
.style--headline img {
  height: 1.6rem;
  width: auto;
}

/* ========== KEYWORD ========== */

.style--keywords {}
.style--keywords a {
  display: block;
  margin: 0.5em 0;
  padding: 0.5em 1.5em;
  background-color: #1359b8;
  border-radius: 5px;
  text-align: left;
  font-weight: normal;
  font-size: 100%;
  color: #fff;
}

/* ========== BUTTONS ========== */

.style--buttons {
/*   margin: 0 30px; */
/*   text-align: center; */
}
.style--buttons li:not(:last-child) {
  margin-bottom: 0.5em;
}



.button--invert .button {
  display: block;
  padding: 10px 0;
  background-color: #eadbb2;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}
.button--invert .label {
  color: #4d3a0a;
}


.button--back {
  text-align: center;
}
.button--back .button {
  display: inline-block;
  padding: 10px;
  line-height: 1.0;
}
.button--back .label {
  display: inline-block;
  padding: 5px 20px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 999px;
}

.button--back {
  text-align: center;
}
.button--back .button {
  display: inline-block;
  padding: 10px;
  line-height: 1.0;
}
.button--back .label {
  display: inline-block;
  padding: 5px 20px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 999px;
}


.button--rug {
  text-align: center;
}
.button--rug .button {
  display: inline-block;
  padding: 10px;
  line-height: 1.0;
}
.button--rug .label {
  display: inline-block;
  padding: 10px 10px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 999px;
}


.button--croquis {
  margin: 0 30px;
  text-align: center;
}
.button--croquis .button {
  position: relative;
  display: block;
  padding: 10px 0;
}
.button--croquis .button::before ,
.button--croquis .button::after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/black_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
}
.button--croquis .button::before {
  top: 0;
  background-position: center left;
}
.button--croquis .button::after {
  bottom: 0;
  background-position: center right;
}
.button--croquis .label {
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 1.0em 0.5em;
  background-color: #4d3a0a;
  border-radius: 5px;
/*   text-align: center; */
  font-weight: bold;
  font-size: 120%;
  color: #eedcaf;
}
.button--croquis .label::before ,
.button--croquis .label::after {
  content: '';
  position: absolute;
  top: -10px;
  display: block;
  width: 10px;
  height: calc(100% + 20px);
  background-image: url(./images/line/black_v.svg);
  background-size: 10px;
  background-repeat: repeat-y;
}
.button--croquis .label::before {
  left: -10px;
  background-position: top center;
}
.button--croquis .label::after {
  right: -10px;
  background-position: bottom center;
}
.button--croquis:hover ,
.button--croquis:active {
  opacity: 0.5;
}
.button--croquis.style--someone {

}
.button--croquis.style--someone .label {
  background-color: #7b6328;
}

.button--croquis.style--light .label {
  background-color: #eedcaf;
  color: #4d3a0a;
}
.button--croquis.style--full {
  margin: 0;
}


.button--solid {
  margin: 0 30px;
  text-align: center;
}
.button--solid .button {
  position: relative;
  display: block;
  padding: 10px 0;
}
.button--solid .label {
  position: relative;
  display: block;
  padding: 1.0em 0.5em;
  background-color: #4d3a0a;
/*   background-color: red; */
  border-radius: 5px;
  font-weight: bold;
  font-size: 120%;
  color: #eedcaf;
}
.button--solid.style--light .label {
  background-color: #eedcaf;
  color: #4d3a0a;
}
.button--solid.style--full {
  margin: 0;
}
.button--solid.style--blue .label {
  background-color: #1a73e7;
  color: #ffffff;
}

.button--pay {
  margin: 0;
  text-align: center;
}
.button--pay .button {
  position: relative;
  display: block;
  padding: 10px 0;
}
.button--pay .label {
  position: relative;
  display: block;
  padding: 0.8em 0.5em;
  background-color: rgb(250, 35, 59);
  border-radius: 5px;
  font-weight: bold;
  font-size: 120%;
  color: #ffffff;
}




.button--luckyday {
  margin: 0 30px;
  text-align: center;
}
.button--luckyday .button {
  position: relative;
  display: block;
  padding: 5px 0;
  background-color: rgb(222,189,74);
}
.button--luckyday .button::before ,
.button--luckyday .button::after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/white_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
}
.button--luckyday .button::before {
  top: 0;
  background-position: center left;
}
.button--luckyday .button::after {
  bottom: 0;
  background-position: center right;
}
.button--luckyday .label {
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 1.0em 0.5em;
  border-radius: 5px;
  font-weight: bold;
  font-size: 120%;
  color: #ffffff;
}
.button--luckyday .label::before ,
.button--luckyday .label::after {
  content: '';
  position: absolute;
  top: -10px;
  top: -5px;
  display: block;
  width: 10px;
  height: calc(100% + 20px);
  height: calc(100% + 10px);
  background-image: url(./images/line/white_v.svg);
  background-size: 10px;
  background-repeat: repeat-y;
}
.button--luckyday .label::before {
  left: -10px;
  background-position: top center;
}
.button--luckyday .label::after {
  right: -10px;
  background-position: bottom center;
}
.button--luckyday:hover ,
.button--luckyday:active {
  opacity: 0.5;
}



.button--yourlove {
  margin: 0 30px;
  text-align: center;
}
.button--yourlove .button {
  position: relative;
  display: block;
  padding: 5px 0;
  background-color: rgb(211,103,153);
}
.button--yourlove .button::before ,
.button--yourlove .button::after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/white_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
}
.button--yourlove .button::before {
  top: 0;
  background-position: center left;
}
.button--yourlove .button::after {
  bottom: 0;
  background-position: center right;
}
.button--yourlove .label {
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 1.0em 0.5em;
  border-radius: 5px;
  font-weight: bold;
  font-size: 120%;
  color: #ffffff;
}
.button--yourlove .label::before ,
.button--yourlove .label::after {
  content: '';
  position: absolute;
  top: -10px;
  top: -5px;
  display: block;
  width: 10px;
  height: calc(100% + 20px);
  height: calc(100% + 10px);
  background-image: url(./images/line/white_v.svg);
  background-size: 10px;
  background-repeat: repeat-y;
}
.button--yourlove .label::before {
  left: -10px;
  background-position: top center;
}
.button--yourlove .label::after {
  right: -10px;
  background-position: bottom center;
}
.button--yourlove:hover ,
.button--yourlove:active {
  opacity: 0.5;
}



.button--line {
  margin: 0 30px;
}
.button--line .button {
  position: relative;
  display: block;
  padding: 10px 20px;
}
.button--line .button::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/black_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
  background-position: center left;
}
.button--line .label {
  color: #4d3a0a;
}

.button--alternate {
  position: relative;
  display: block;
  padding: 10px 0;
}
.button--alternate::before ,
.button--alternate::after {
  content: '';
  position: absolute;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/black_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
}
.button--alternate::before {
  top: 0;
  background-position: center left;
}
.button--alternate::after {
  bottom: 0;
  background-position: center right;
}
.button--alternate span {
  position: relative;
  display: block;
  margin: 0 10px;
  padding: 1.0em 0.5em;
  background-color: #34676c;
  border-radius: 5px;
  text-align: center;
  font-weight: bold;
  font-size: 120%;
  color: #fff57d;
}
.button--alternate span::before ,
.button--alternate span::after {
  content: '';
  position: absolute;
  top: -10px;
  display: block;
  width: 10px;
  height: calc(100% + 20px);
  background-image: url(./images/line/black_v.svg);
  background-size: 10px;
  background-repeat: repeat-y;
}
.button--alternate span::before {
  left: -10px;
  background-position: top center;
}
.button--alternate span::after {
  right: -10px;
  background-position: bottom center;
}
.button--alternate:hover ,
.button--alternate:active {
  opacity: 0.5;
}



.button--bar {
  position: relative;
  display: block;
  padding: 0.25em 0;
  background-color: rgb(211,103,153);
  line-height: 1.2;
}
.button--bar::before ,
.button--bar::after {
  content: '';
  position: absolute;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/white_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
  background-position: top left;
  opacity: 0.5;
}
.button--bar::before {
  top: 0;
  left: 0;
}
.button--bar::after {
  bottom: 0;
  right: 0;
}
.button--bar .label {
  display: inline-block;
  width: 100%;
  padding: 1.5em 1.0em;
  text-align: center;
}
.button--bar:hover ,
.button--bar:active {
  opacity: 0.5;
}

.button--underbar {
  text-align: center;
}
.button--underbar .button {
  display: inline-block;
  padding: 10px;
  line-height: 1.0;
}
.button--underbar .label {
  display: inline-block;
  padding: 5px 10px;
  border-bottom: 1px solid rgb(77, 58, 10);
  color: rgb(77, 58, 10);
}


/* ========== RULE ========== */

.style--rule-moon {
  margin-bottom: 1.0em;
  padding: 0 2.0em;
}

/* ========== BEYOND ========== */

.style--beyond {
  margin: 1.0em 0;
}
.style--beyond a {
  text-decoration: underline;
  color: #fff;
}

/* ========== READBOX ========== */

.style--readbox {
  overflow-y: scroll;
  margin: 0 -20px;
  padding: 20px;
  height: 26em;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.25) inset;
  font-size: 80%;
  color: #000;
}
.style--readbox .head {
  margin-bottom: 1.0em;
}
.style--readbox .head > * {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}
.style--readbox .body {
  text-align: left;
}
.style--readbox .body p {
  margin-bottom: 1.0em;
}
.style--readbox .foot {
  margin-top: 1.0em;
  text-align: right;
}

/* ========== FORM ========== */

.style--form {}
.style--form .line {
  display: flex;
  align-items: center;
  margin: 0.5em 0;
}
.style--form .line .input {
  flex-grow: 1;
}
.style--form .line .suffix {
  flex-grow: 0;
  min-width: 2.5em;
  text-align: center;
}
.style--form input[type="text"] ,
.style--form select {
  width: 100%;
  padding: 0.5em;
  background-color: #fff;
  border-radius: 5px;
  font-size: 1.15rem;
  color: #000;
}
.style--form input[type="radio"] {
  background-color: #fff;
}
.style--form .map-button {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.5em;
  height: 2.25em;
  margin-left: 0.5em;
  padding: 0.5em;
  line-height: 1.0;
  font-size: 1.15rem;
  background-color: #1a73e7;
  border-radius: 5px;
  color: #fff;
}
.style--form .map-button img {
  height: 100%;
}
select.is-empty {
  color: #bbb !important;
}
.style--form .annotate {
  padding: 0.5em 1em;
  background: rgba(255,255,255,0.25);
  border-radius: 5px;
  line-height: 1.4;
}




.style--bg-moon {
  z-index: 0;
}
.style--bg-moon .body {
  width: 35%;
  margin: 0 auto;
  margin-bottom: -20px;
}




/* .style--check { */
.article--check .row {
  height: 80vh;
  margin: 20px;
  padding: 20px;
  border-radius: 10px;
  background-color: rgba(255,255,255,0.9);
  background: linear-gradient(0deg, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 10%, rgba(255,255,255,0.7) 40%, rgba(255,255,255,1.0) 100%);
  border: 2px solid rgba(255,255,255,0.25);
}
.article--check .row .row-wrapper {
  height: 100%;
}
.article--check .row .row-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}
.article--check .row .row-foot .style--buttons > * {
  margin: 0;
}


.article--check .section--start .row-head {
/* .style--check-start .row-head { */
  width: 35%;
  margin: 0 auto;
}
.article--check .section--start .row-body {
/* .style--check-start .row-body { */
  text-align: center;
  color: #000000;
}
.article--check .section--start .row-foot {
/* .style--check-start .row-foot { */
/*   padding-bottom: 2.0em; */
}

.article--check .section--question .row-head .col-content {
/* .style--check-quest .row-head .col-content { */
  display: flex;
  justify-content: space-between;
}
.article--check .section--question .row-head .col-head {
/* .style--check-quest .row-head .col-head { */
  font-weight: bold;
  font-size: 200%;
  color: #4d3a0a;
}
.article--check .section--question .row-body .question {
/* .style--check-quest .row-body .question { */
  line-height: 1.4;
  text-align: center;
  font-size: 140%;
  font-weight: bold;
  color: #000000;
}
.article--check .section--question .row-foot {
/* .style--check-quest .row-foot { */
  padding-bottom: 3.0em;
}

.article--check .section--result .row-head {
/* .style--check-result .row-head { */
  text-align: center;
}
.article--check .section--result .row-head .col-head {
/* .style--check-result .row-head .col-head { */
  padding-top: 2.0em;
  padding-bottom: 1.0em;
  font-weight: bold;
  font-size: 160%;
}
.article--check .section--result .row-body {
/* .style--check-result .row-body { */
  padding-bottom: 2.0em;

}
.article--check .section--result .row-body .question {
  font-size: 140%;
  text-align: center;
  color: #000000;
}









.style--check-volume_labels {
  display: flex;
  margin: 0 -1.0em 1.0em;
  font-size: 70%;
/*   color: #ffffff; */
  color: #4d3a0a;
}
.style--check-volume_labels > * {
  flex-basis: 100%;
  text-align: center;
}



.style--check-volume_buttons {
  display: flex;
  align-items: center;
  margin: 0 1.0em;
}
.style--check-volume_buttons > * {
  flex-grow: 0;
  align-items: flex-end;
}
.style--check-volume_buttons .line {
  flex-grow: 1;
}
.style--check-volume_buttons .line::after {
  content: "";
  display: block;
  height: 1px;
/*   background-color: #ffffff; */
  background-color: #4d3a0a;
}
.style--check-volume_buttons a {
  display: block;
  width: 3.0em;
  height: 3.0em;
  border-radius: 1.5em;
/*   border: 3px solid #ffffff; */
  border: 3px solid #4d3a0a;
  display: flex;
  justify-content: center;
  align-items: center;
}
.style--check-volume_buttons a::after {
  content: "";
  display: block;
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.75em;
  background-color: rgba(77, 58, 10, 0.15);
}
.style--check-volume_buttons .selected a {
  background-color: #1a73e7;
}
.style--check-volume_buttons .selected a::after {
  content: none;
}



.style--matching {
  display: flex;
  width: 80%;
  margin: 0 auto;
}
.style--matching > * {
  margin: 0 0.5em;
}
.style--matching img {
  width: 100%;
}



.article--luckyday .section--message {}
.article--luckyday .section--message .head {
  text-align: center;
  font-family: serif;
  font-size: 160%;
  color: rgb(211,103,153);
}
.article--luckyday .section--message .body {
  padding: 0 20px;
}

.luckyday--sign .moon {
  text-align: center;
}
.luckyday--sign .sign {
  text-align: center;
  font-size: 160%;
}
.luckyday--title h2 {
  text-align: center;
  font-family: serif;
  font-size: 160%;
  color: rgb(211,103,153);
}
.luckyday--list li {
  text-align: center;
  font-weight: bold;
  font-size: 120%;
}
.luckyday--list li:not(:last-child) {
  margin-bottom: 0em;
}

.luckyday--calendar {
  overflow: hidden;
}
.luckyday--calendar table {
  box-sizing: border-box;
  width: 100%;
  line-height: 1.0;
}
.luckyday--calendar tr {
  position: relative;
}
.luckyday--calendar tr th ,
.luckyday--calendar tr td {
  position: relative;
  width: calc(100%/7);
  padding: 5px;
}
.luckyday--calendar tr th {
  text-align: center;
}
.luckyday--calendar tr td {
  padding-bottom: 55px;
  background-color: rgba(255,255,255,0.4);
}
.luckyday--calendar tr td.last ,
.luckyday--calendar tr td.next {
  background-color: rgba(255,255,255,0.1);
}
.luckyday--calendar tr th::before ,
.luckyday--calendar tr td::before {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/button-line_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
  background-position: center center;
  z-index: 12;
}
.luckyday--calendar tr th:not(:last-child)::after ,
.luckyday--calendar tr td:not(:last-child)::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: -5px;
  display: block;
  width: 10px;
  height: 100%;
  background-image: url(./images/button-line_v.svg);
  background-size: 100%;
  background-repeat: repeat-y;
  background-position: top right;
}
.luckyday--calendar tr td .day {
  font-weight: bold;
}
.luckyday--calendar tr td.last .day ,
.luckyday--calendar tr td.next .day {
  font-weight: normal;
  opacity: 0.5;
}
.luckyday--calendar tr td .moon {
  position: absolute;
  bottom: 5px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  font-size: 10px;
}
.luckyday--calendar tr td .moon .icon {
  width: 12px;
  height: auto;
}
.luckyday--calendar tr td .moon .label {
  margin-left: 3px;
}
.luckyday--calendar tr td .moon .time {
  width: 100%;
  margin-top: 3px;
}
.luckyday--calendar .band {
  position: absolute;
  top: 1.5em;
}
.luckyday--calendar .band .wrapper {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.5em;
  background-color: #decfab;
  border-radius: 999px;
  line-height: 1;
  font-size: 10px;
  color: #4d3a0a;
  z-index: 1;
}
.luckyday--calendar .band.label-only .wrapper {
  justify-content: flex-start;
}
.luckyday--calendar .band.label-only .wrapper .time {
  display: none;
}
.luckyday--calendar .band.time-only .wrapper {
  justify-content: flex-end;
}
.luckyday--calendar .band.time-only .wrapper .label {
  display: none;
}
.luckyday--calendar .band.cut-left .wrapper {
  border-top-left-radius: unset;
  border-bottom-left-radius: unset;
}
.luckyday--calendar .band.cut-right .wrapper {
  border-top-right-radius: unset;
  border-bottom-right-radius: unset;
}
.luckyday--calendar .band.selected .wrapper {
  font-weight: bold;
  color: #ffffff;
}
.luckyday--calendar .band .wrapper > * {
  flex-shrink: 0;
  padding: 0 2px;
}
.luckyday--calendar .band .wrapper > *:first-child {
  padding-left: 8px;
}
.luckyday--calendar .band .wrapper > *:last-child {
  padding-right: 8px;
}
.luckyday--calendar .band .label {
}
.luckyday--calendar .band .time {
}
.luckyday--calendar .band.selected.aries .wrapper {
  background-color: #ee0000;
}
.luckyday--calendar .band.selected.taurus .wrapper {
  background-color: #9f3409;
}
.luckyday--calendar .band.selected.gemini .wrapper {
  background-color: #5cd600;
}
.luckyday--calendar .band.selected.cancer .wrapper {
  background-color: #692dc9;
}
.luckyday--calendar .band.selected.leo .wrapper {
  background-color: #ff4500;
}
.luckyday--calendar .band.selected.virgo .wrapper {
  background-color: #aa003a;
}
.luckyday--calendar .band.selected.libra .wrapper {
  background-color: #72b400;
}
.luckyday--calendar .band.selected.scorpio .wrapper {
  background-color: #004dc5;
}
.luckyday--calendar .band.selected.sagittarius .wrapper {
  background-color: #d90094;
}
.luckyday--calendar .band.selected.capricorn .wrapper {
  background-color: #a57600;
}
.luckyday--calendar .band.selected.aquarius .wrapper {
  background-color: #00c1cb;
}
.luckyday--calendar .band.selected.pisces .wrapper {
  background-color: #0097bc;
}

.button--bar {

}


/* ========== article ========== */

/* ---------- intro ---------- */

.article--intro .col-content {
  text-align: center;
}
.article--intro .row-head {
  padding: 20px 0;
}
.article--intro .row-head img {
  width: auto;
  height: 3.0em;
}
.article--intro .col-body .head p {
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 120%;
}
.article--intro .col-body .foot {
  margin-top: 20px;
}
.article--intro .col-body .foot img {
  width: 50%;
}
.article--intro .row-foot {
  padding: 20px 0;
}
/*---- stretch stage [ middle scroll ] ----*/
.article--intro .row-content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100vh;
}
.article--intro .row-body {
  overflow-y: hidden;
}
.article--intro .row-body .col ,
.article--intro .row-body .col-wrapper ,
.article--intro .row-body .col-content ,
.article--intro .row-body .col-body ,
.article--intro .row-body .col-body .content {
  height: 100%;
}
.article--intro .row-body .col-body .content {
  overflow-y: scroll;
}

/* ---------- agree ---------- */

.article--agree .col-content {
  text-align: center;
}

/* ---------- about ---------- */

.article--about .row-wrapper ,
.article--about .raw-wrapper {
  padding: 0 20px;
}
.article--about .headline {
  text-align: center;
}
.article--about .headline .label {
  font-size: 150%;
}
.article--about .row-body .col-head .body {
  padding: 0 30px;
}
.article--about .row-body .col-body .body h3 {
  margin-top: 1.0em;
  font-weight: bold;
  font-size: 125%;
}

/* ---------- profile ---------- */

.article--profile .headline {
  margin-bottom: 1.0em;
  text-align: center;
}
.article--profile .photo {
  width: 40%;
  margin: 0 auto;
}
.article--profile .photo img {
  border-radius: 50%;
}
.article--profile .name {
  margin-top: 10px;
  text-align: center;
}
.article--profile .name span {
  display: block;
  line-height: 1.4;
}
.article--profile .name .ja {
  font-weight: bold;
  font-size: 120%;
}
.article--profile .name .en {
}
.article--profile .brief {
  position: relative;
  margin: 0 20px;
  padding: 20px 0;
}
.article--profile .brief::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 10px;
  background-image: url(./images/line/black_h.svg);
  background-size: 100px;
  background-repeat: repeat-x;
  background-position: center left;
}
.article--profile .detail {
  margin: 0 20px;
  padding: 20px 0 ;
  font-size: 86%;
}

/* ---------- index ---------- */

.article--index .col-head .content {
  position: relative;
  margin: 20px 50px;
  text-align: center;
}
.article--index .col-head .content .body {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  line-height: 1.4;
  color: #4d3a0a;
}
.article--index .col-head .content h1 .shoulder {
  font-size: 140%;
}
.article--index .col-head .content h1 .label {
  font-weight: bold;
  font-size: 170%;
}
.article--index .col-body .foot {
  margin: 20px 0;
}

/* ---------- ad ---------- */

.article--ad {}
.article--ad .col-content {
  display: flex;
  padding: 10px;
  padding-left: 20px;
  background-color: rgba(0,0,0,0.3);
  color: #ffffff;
}
.article--ad .col-body .content {
  display: flex;
  align-items: center;
}
.article--ad .col-body .head {
  flex-basis: 30%;
}
.article--ad .col-body .body {
  padding: 0 20px;
}
.article--ad .col-body .body .title {
  font-weight: bold;
  font-size: 120%;
}
.article--ad .buy {
  display: inline-block;
  background-color: #ffffff;
  margin-top: 0.3em;
  padding: 0.5em 1.0em;
  border-radius: 5px;
  color: #4d3a0a;
}
.article--ad .close {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.0em;
  height: 2.0em;
  padding: 0.3em;
  background-color: #ffffff;
  border-radius: 1.0em;
}
.article--ad .close .label {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.article--ad .close .label::before,
.article--ad .close .label::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #4d3a0a;
  transform: rotate(45deg);
  transform-origin:0% 50%;
  position: absolute;
  top: calc(14% - 1px);
  left: 14%;
}
.article--ad .close .label::after{
  transform: rotate(-45deg);
  transform-origin:100% 50%;
  left: auto;
  right: 14%;
}



/* ========== section ========== */

/* ---------- zodiac ---------- */

.section--zodiac {
  margin-top: 30px;
}
.section--zodiac .row-body {
  display: flex;
  text-align: center;
  font-size: 150%;
}
.section--zodiac .row-body > * {
  flex-basis: 100%;
}
.section--zodiac .row-body > *:nth-child(2) {
  border-left: 1px solid #4d3a0a;
}
.section--zodiac .headline {
  margin-bottom: -20px;
  font-weight: bold;
  color: #7b6328;
}
.section--zodiac .head {
  position: relative;
  z-index: 2;
}
.section--zodiac .body {
  position: relative;
  padding-bottom: 100%;
  text-align: center;
  background-size: contain;
  z-index: 1;
}
.section--zodiac .foot {
  position: relative;
  z-index: 3;
}
.section--zodiac .style--moon .body {
  background-image: url(images/zodiac/base-moon.svg);
}
.section--zodiac .style--sun .body {
  background-image: url(images/zodiac/base-sun.svg);
}
.section--zodiac .body .image {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
}
.section--zodiac .body .image img {
  width: 70%;
}
.section--zodiac .foot {
  margin-top: -10px;
  line-height: 1.2;
}
.section--zodiac .foot .ja {
  font-weight: bold;
  font-size: 150%;
}
.section--zodiac.style--single {
  margin-bottom: 30px;
}
.section--zodiac.style--single .content {
  width: 75%;
  max-width: 400px;
  margin: 0 auto;
}

/* ---------- comment ---------- */

.section--comment {
}
.section--comment .col-addition .head {
  margin-top: 2.0em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  text-align: center;
  font-size: 140%;
}
.section--comment .col-head {
  background-color: rgba(123, 99, 40, 0.2);
}
.section--comment .col-head .head {
  position: relative;
  text-align: center;
  text-shadow: -1px -1px 1px rgb(77 58 10 / 25%), 1px 1px 1px rgb(255 255 255 / 50%);
  /* background-color: rgba(123, 99, 40, 0.2); */
}
.section--comment .col-head .head .headline {
  font-weight: bold;
  font-size: 140%;
}
.section--comment .col-head .head .icon {
  position: absolute;
  top: 0.25em;
  right: 0.5em;
  width: 1.5em;
}
.section--comment .col-body {
  position: relative;
  padding: 2.0em;
  background-color: rgba(255,255,255,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-shadow: -1px -1px 1px rgba(77,58,10,0.25), 1px 1px 1px rgba(255,2155,255,0.5);
}
.section--comment .col-body h3 {
  margin-bottom: 0.25em;
  line-height: 1.3;
  font-weight: bold;
  font-size: 120%;
}
.section--comment .col-body li:not(:last-child) {
  margin-bottom: 2.0em;
}

/* ---------- birthmoon ---------- */

.section--birthmoon {
}
.section--birthmoon .col-addition .head {
  margin-top: 2.0em;
  margin-bottom: 0.5em;
  line-height: 1.4;
  text-align: center;
  font-size: 140%;
}
.section--birthmoon .col-head {
  background-color: rgba(201,165,0,0.2);
}
.section--birthmoon .col-head .head {
  position: relative;
  padding: 0.25em;
  text-align: center;
  text-shadow: -1px -1px 1px rgb(77 58 10 / 25%), 1px 1px 1px rgb(255 255 255 / 50%);
}
.section--birthmoon .col-head .head .headline {
  font-weight: normal;
  font-size: 140%;
}
.section--birthmoon .col-head .head .headline strong {
  border-bottom: 2px dotted rgb(77 58 10);
  font-weight: bold;
}
.section--birthmoon .col-head .head .icon {
  position: absolute;
  top: 0.25em;
  right: 0.5em;
  width: 1.5em;
}
.section--birthmoon .col-body {
  position: relative;
  padding: 2.0em;
  background-color: rgba(255,250,191,0.5);
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  text-shadow: -1px -1px 1px rgba(77,58,10,0.25), 1px 1px 1px rgba(255,2155,255,0.5);
}
.section--birthmoon .col-body h3 {
  margin-bottom: 0.25em;
  line-height: 1.3;
  font-weight: bold;
  font-size: 120%;
}
.section--birthmoon .col-body .notes {
  position: relative;
  margin-top: 1.5em;
  padding-left: 1.2em;
  line-height: 1.2;
  font-size: 90%;
  opacity: 0.8;
}
.section--birthmoon .col-body .notes::before {
  content: "※";
  position: absolute;
  left: 0;
}
.section--birthmoon .col-body li {
  display: flex;
  justify-content: space-between;
  font-size: 120%;
}
.section--birthmoon .col-body li:not(:last-child) {
  margin-bottom: 0.5em;
}
.section--birthmoon .col-body li .name small {
  padding-left: 0.5em;
}
.section--birthmoon .col-body li .birthday {
  padding-left: 1.0em;
}

.section--birthmoon.style--match .col-head {
  background-color: rgba(0,201,107,0.2);
}
.section--birthmoon.style--match .col-body {
  background-color: rgba(198,244,201,0.5);
}

/* ---------- navigation ---------- */

.section--navigation {
  margin: 30px 0;
}
.section--navigation .col-head {
  padding: 0 20px;
  text-align: center;
}

/* ---------- aspect ---------- */

.section--aspect {}
.section--aspect .row-body {
  padding: 10px 40px;
}
.section--aspect .row-foot .content {
  padding: 0 40px;
  line-height: 1.4;
  text-align: center;
  font-weight: bold;
}
.section--aspect .row-foot .body {
  display: inline-block;
  text-align: left;
  font-size: 140%;
}
.section--aspect .content {
  position: relative;
}
#aspect--pie {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  overflow: hidden;
  z-index: 1;
}
#aspect--pie .canvas-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 12% 14% 16%; /* adjust */
}
@media only screen and (min-width: 768px) {
  #aspect--pie .canvas-wrapper {
    padding: 15.5% 16% 16.6%; /* adjust */
  }
}
#aspect--base {
  position: relative;
  text-align: center;
  z-index: 2;
}
#aspect--base img {
  width: 100%;
  height: auto;
}
#aspect--sign {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 3;
}
#aspect--sign img {
  position: absolute;
  top: 0;
  left: 50%;
  display: none;
  width: 100%;
  height: auto;
  transform: translate(-50%, 0)
}
#aspect--spec {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  padding-bottom: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 3;
}
#aspect--spec .angle {
  margin-bottom: 5px;
  line-height: 1;
  text-shadow:
    2px 2px 0 #4d3a0a,
    -2px -2px 0 #4d3a0a,
    -2px 2px 0 #4d3a0a,
    2px -2px 0 #4d3a0a,
    0 2px 0 #4d3a0a,
    0 -2px 0 #4d3a0a,
    -2px 0 0 #4d3a0a,
    2px 0 0 #4d3a0a;
  font-weight: bold;
  font-size: 300%;
  color: #f7efdc;
}
#aspect--spec .angle .value::after {
  content: '°';
  font-weight: normal;
}
#aspect--spec .label {
  margin-bottom: 5px;
  line-height: 1;
  text-shadow:
    2px 2px 0 #eedfb4,
    -2px -2px 0 #eedfb4,
    -2px 2px 0 #eedfb4,
    2px -2px 0 #eedfb4,
    0 2px 0 #eedfb4,
    0 -2px 0 #eedfb4,
    -2px 0 0 #eedfb4,
    2px 0 0 #eedfb4;
  font-weight: bold;
  font-size: 150%;
}
#aspect--spec .comment {
  width: 50%;
  line-height: 1.4;
  text-shadow:
    1px 1px 0 #eedfb4,
    -1px -1px 0 #eedfb4,
    -1px 1px 0 #eedfb4,
    1px -1px 0 #eedfb4,
    0 1px 0 #eedfb4,
    0 -1px 0 #eedfb4,
    -1px 0 0 #eedfb4,
    1px 0 0 #eedfb4;
  text-align: center;
  font-weight: bold;
}



.section--aspect .debug {
  display: flex;
  justify-content: space-between;
}
.section--aspect .debug select {
  border:2px solid red;
}


/* ---------- alert ---------- */

.section--alert {}
.section--alert .content {
  margin: 10px;
  padding: 10px;
  background-color: #ffe94e;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgb(0 0 0 / 25%);
  text-align: center;
  color: #4d3a0a;
}

/* ---------- panel ---------- */

.section--panel {
  margin-top: 20px;
  padding: 20px;
  padding-bottom: 10px;
/*   background-color: #4d3a0a; */
  background-color: rgba(77, 58, 10, 0.3);
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
  color: #fff;
}
.section--panel > * {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.section--panel .row-foot {
  margin-top: 40px;
}
.style--someone .section--panel {
  background-color: rgba(77, 58, 10, 0.05);
  color: #4d3a0a;
}




.headline .icon {
  display: inline-flex;
  width: 1em;
  margin-right: 0.5em;
}


#header {
  position: relative;
  z-index: 9;
}

.hamburger-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
/*   z-index: 90; */
  z-index: 1;
}
.hamburger-button span,
.hamburger-button span:before,
.hamburger-button span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #4d3a0a;
  position: absolute;
}
.hamburger-button span:before {
  bottom: 8px;
}
.hamburger-button span:after {
  top: 8px;
}
#hamburger-button-flag {
  display: none;
}
#hamburger-button-flag:checked ~ .hamburger-content {
  left: 0;
}
#hamburger-button-flag:checked ~ .hamburger-button span {
  background-color: rgba(255, 255, 255, 0);
}
#hamburger-button-flag:checked ~ .hamburger-button span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#hamburger-button-flag:checked ~ .hamburger-button span::after {
  top: 0;
  transform: rotate(-45deg);
}


.hamburger-content {
  position: fixed;
  top: 0;
  left: 100%;/*leftの値を変更してメニューを画面外へ*/
/*   z-index: 80; */
  width: 100%;
  height: 100%;
  background-color: rgb(53 132 187 / 50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.5s;/*アニメーション設定*/
}
.hamburger-content ul {
  padding: 70px 10px 0;
}
.hamburger-content ul li {
  border-bottom: solid 1px #ffffff;
  list-style: none;
}
.hamburger-content ul li a {
  display: block;
  width: 100%;
  font-size: 15px;
  box-sizing: border-box;
  color:#ffffff;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.hamburger-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #ffffff;
  border-right: solid 2px #ffffff;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}






#colorbox,
#cboxOverlay,
#cboxWrapper {
  position: absolute;
  z-index: 9999;
}
#cboxOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(53 132 187 / 50%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
#colorbox ,
#cboxWrapper {
  overflow: visible;
}
#cboxLoadedContent {
  overflow: visible !important;
}
#map_area {
  position: relative;
  border-radius: 5px;
  background-color: #f8efda;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
  text-shadow: -1px -1px 1px rgb(77 58 10 / 25%), 1px 1px 1px rgb(255 255 255 / 50%);
}
#map_area > p {
  text-align: center;
  padding: 1em 0 0.5em;
  margin: 0;
  line-height: 1.4;
}
#map_area #maps {
  margin: 0 auto;
}
#map_area .map_buttons {}
#map_area #inputPoint {
  display: block;
  margin: 0 auto;
}
#map_area #inputPoint .map_buttons {
  width: 85%;
  margin-top: 5px;
  padding: 1em 0.5em;
  background-color: #1a73e7;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
  color: #ffffff;
}
#map_area #btn_close {
  position: absolute;
  bottom: -3.5em;
  left: 50%;
  display: block;
  transform: translate(-50%, 0);
}
#map_area #btn_close .map_buttons {
  display: inline-block;
  padding: 5px 20px;
  background-color: rgba(0,0,0,0.25);
  border-radius: 999px;
  color: #ffffff;
}
#map_area #btn_world {
  float: right;
}
#map_area #btn_world .map_buttons {
  display: inline-block;
  margin-top: 5px;
  margin-right: 30px;
  padding: 5px 10px;
  background-color: rgba(0,0,0,0.4);
  border-radius: 999px;
  color: #ffffff;
}



.pay--cover {
  position: absolute;
  top: 30%;
  left: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 70%;
  text-align: center;
  background-color: rgba(247, 239, 218, 0.5);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.pay--cover .icon {
  flex-basis: 100%;
  position: relative;
  width: 10%;
  margin: 0 auto 10%;
  margin: 0 auto;
}
.pay--cover .icon img {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.pay--cover .button {
  margin-bottom: 20px;
  padding: 0 30px;
}






.section--paypanel {
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 20;
}
.section--paypanel .row-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  background-color: #ffffff;
}
.section--paypanel .shoulder {
  text-align: center;
}
.section--paypanel .headline {
  text-align: center;
  font-size: 200%;
}
.section--paypanel .price {
  text-align: center;
  font-weight: bold;
  font-size: 200%;
  color: rgb(250, 35, 59);
}
.section--paypanel .price small {
  margin-left: 0.5em;
  font-size: 75%;
}

.paypanel-overlay {
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 19;
}
/* input#paypanel-flag { position: fixed; top: 0; width: 2em; height: 2em; border: 3px solid red; z-index: 999; }
input#paypanel-flag:checked { background-color: red; } */
.paypanel-overlay {
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}
input#paypanel-flag:checked ~ .paypanel-overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.section--paypanel .row-content {
  transform: translateY(100%);
  transition: 0.5s;
}
input#paypanel-flag:checked ~ .section--paypanel .row-content {
  transform: translateY(0);
}



.popup--legalpopup {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  pointer-events: none;
  z-index: 30;
}
.popup--legalpopup .row-wrapper ,
.popup--legalpopup .row-content {
  position: relative;
  height: 100%;
  width: 100%;
}
.popup--legalpopup .row-body {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  background-color: #ffffff;
  box-shadow: 0 2px 10px rgb(0 0 0 / 25%);
  border-radius: 5px;
  pointer-events: all;
  overflow-y: scroll;
}
.popup--legalpopup .headline {
  margin-bottom: 1.0em;
  text-align: center;
  font-size: 140%;
}
.popup--legalpopup dl {
}
.popup--legalpopup dl dt {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  padding-top: 0.5em;
  border-top: 1px solid rgb(0 0 0/25%);
  font-weight: bold;
}
.legalpopup-overlay {
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 29;
}
/* input#legalpopup-flag { position: fixed; top: 0; width: 2em; height: 2em; border: 3px solid red; z-index: 999; }
input#legalpopup-flag:checked { background-color: red; } */
.legalpopup-overlay {
  opacity: 0;
  transition: opacity 0.5s, transform 0s 0.5s;
  transform: scale(0);
}
input#legalpopup-flag:checked ~ .legalpopup-overlay {
  opacity: 1;
  transform: scale(1);
  transition: opacity 0.5s;
}
.popup--legalpopup .row-content {
  opacity: 0;
  transform: translateY(100%);
  transition: 0.5s;
}
input#legalpopup-flag:checked ~ .popup--legalpopup .row-content {
  opacity: 1;
  transform: translateY(0);
}



.button--close {
  position: absolute;
  top: 0.5em;
  right: 0.5em;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0.5em;
  background-color: rgb(0 0 0 / 10%);
  border-radius: 1.25em;
  pointer-events: all;
}
.button--close .label {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
}
.button--close .label::before,
.button--close .label::after{
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #4d3a0a;
  transform: rotate(45deg);
  transform-origin:0% 50%;
  position: absolute;
  top: calc(14% - 1px);
  left: 14%;
}
.button--close .label::after{
  transform: rotate(-45deg);
  transform-origin:100% 50%;
  left: auto;
  right: 14%;
}



/* ---- 2022.6.29 ---- */



.article--inherit {
  /* margin-top: 100px; */
}
.article--inherit .row-wrapper ,
.article--inherit .raw-wrapper {
  padding: 0 20px;
}
.article--inherit .headline {
  text-align: center;
}
.article--inherit .headline .label {
  font-size: 150%;
}
.article--inherit .row-body .col-head .body {
  /* padding: 0 30px; */
  text-align: center;
}
.article--inherit .row-body .col-body .body h3 {
  margin-top: 1.0em;
  font-weight: bold;
  font-size: 125%;
}

.style--attention {
  color: rgb(250, 35, 59);
}
.style--attention .head ,
.style--attention .head * {
  text-align: center;
  font-weight: bold;
}
.style--readonly {
  background-color: #ffffff;
  padding: 0.5em 0;
  width: 100%;
  text-align: center;
}
.section--popup {
  height: 100%;
}
.section--popup .row-wrapper {
  height: 100%;
}
.section--popup .row-wrapper .row-content {
  height: 100%;
}
.section--popup .row-wrapper .row-content .row-body {
  height: 100%;
  overflow-y: scroll;
}
.section--popup h2 {
  margin-bottom: 1em;
  padding: 0.2em 1.0em;
  background-color: rgba(123, 99, 40, 0.2);
  font-weight: bold;
  font-size: 120%;
}
.section--popup .row-body {
  background-color: #ffffff;
  padding: 20px;
  box-shadow: 0 0 10px rgb(0 0 0 / 10%);
}
.section--popup ul {
  position: relative;
}
.section--popup ul li {
  position: relative;
  padding-left: 1.0em;
}
.section--popup ul li::before {
  content: '・';
  position: absolute;
  top: 0;
  left: 0;
}
.section--popup ul.style--attention {
  margin: 1.0em 0;
}
.section--popup ul.style--attention li::before {
  content: '※';
}

.section--dialog {
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0px 3px 10px rgba(0,0,0,0.5);
  border-radius: 10px;
}
.section--dialog ul.style--dialog-buttons {
  display: flex;
  border-top: 2px solid #dddddd;
}
.section--dialog .row-body .col-body .body {
  padding: 40px;
}
.section--dialog ul.style--dialog-buttons li {
  flex-basis: 100%;
  text-align: center;
}
.section--dialog ul.style--dialog-buttons li a {
  display: block;
  padding: 1.0em 0.5em;
}
.section--dialog ul.style--dialog-buttons li.button--type-ok a {
  background-color: #1a73e7;
  font-weight: bold;
  color: #ffffff;
}
.section--dialog ul.style--dialog-buttons li.button--type-cansel a {
  background-color: #eeeeee;
  color: #000000;
}

.section--blind {
  position: fixed;
  bottom: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  text-shadow: 0px 1px 5px rgba(0,0,0,0.5);
  text-align: center;
  color: #ffffff;
  z-index: 30;
}
.section--blind .row-body {
  margin-top: 80px;
}
.section--blind .row-body .head {
  font-size: 120%;
}
.section--blind .row-body .head * {
  font-weight: bold;
}

#cboxClose {
  display: none;
}