@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap");
/* ==========================================================

	ブラウザリセット

========================================================== */
html, body, div, dl, dt, dd, ul, ol, li,
h1, h2, h3, h4, h5, h6,
pre, code, form, fieldset, legend,
p, blockquote, table, th, td {
  margin: 0;
  padding: 0;
}

html {
  background: #FFF;
  color: #000;
}

body {
  margin: 0;
  word-break: break-all;
}

* html body {
  font-size: small;
  font: x-small;
}

*:first-child + html body {
  font-size: small;
  font: x-small;
}

img {
  border: 0;
  vertical-align: bottom;
}

ul, dl, ol {
  text-indent: 0;
}

li {
  list-style: none;
}

address, caption, cite, code, dfn, em, th, var {
  font-style: normal;
  font-weight: normal;
}

sup {
  vertical-align: text-top;
}

sub {
  vertical-align: text-bottom;
}

input, textarea, select {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
}

* html input, * html textarea, * html select {
  font-size: 100%;
}

*:first-child + html + input, *:first-child html + textarea, *:first-child + html select {
  font-size: 100%;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  font-size: inherit;
  font: 100%;
}

th, td {
  text-align: left;
  vertical-align: top;
}

caption {
  text-align: left;
}

pre, code, kbd, samp, tt {
  font-family: monospace;
}

* html pre, * html code, * html kbd, * html samp, * html tt {
  font-size: 108%;
  line-height: 100%;
}

*:first-child + html pre, *:first-child html + code, *:first-child html + kbd, *:first-child + html + samp, *:first-child + html tt {
  font-size: 108%;
  line-height: 100%;
}

input, select, textarea {
  font-size: 100%;
  font-family: Verdana, Helvetica, sans-serif;
}

button {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
}

/* clearfix
===========================================================*/
.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
}

.clearfix {
  min-height: 1%;
}

* html .clearfix {
  height: 1%;
  /*\*/ /*/
height: auto;
overflow: hidden;
/**/
}

html,
body,
div,
span,
object,
iframe,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  font-style: normal;
}

body {
  min-width: 320px;
  -webkit-text-size-adjust: 100%;
  font-family: "Noto Sans JP", sans-serif, "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3";
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
}

a {
  text-decoration: underline;
}

section > h2 {
  line-height: 0.6;
}

footer nav li {
  line-height: 0.6;
}
/***** modules ********/
.fwn {
  font-weight: normal !important;
}

/* レイアウト関係
===========================================================*/
.m00 {
  margin: 0px !important;
}

.m-auto {
  margin: 0 auto !important;
}

.mt00 {
  margin-top: 0px !important;
}

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 20px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mb00 {
  margin-bottom: 0px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mr00 {
  margin-right: 0px !important;
}

.mr05 {
  margin-right: 5px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.ml00 {
  margin-left: 0px !important;
}

.ml05 {
  margin-left: 5px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.mp4 {
  margin: 0 4%;
}

.mlp1 {
  margin-left: 1% !important;
}

.mlp2 {
  margin-left: 2% !important;
}

.mlp3 {
  margin-left: 3% !important;
}

.mlp4 {
  margin-left: 4% !important;
}

.mlp5 {
  margin-left: 5% !important;
}

.mlp6 {
  margin-left: 6% !important;
}

.mlp7 {
  margin-left: 7% !important;
}

.mlp8 {
  margin-left: 8% !important;
}

.mlp9 {
  margin-left: 9% !important;
}

.mlp10 {
  margin-left: 10% !important;
}

.mtp1 {
  margin-top: 1% !important;
}

.mtp2 {
  margin-top: 2% !important;
}

.mtp3 {
  margin-top: 3% !important;
}

.mtp4 {
  margin-top: 4% !important;
}

.mtp5 {
  margin-top: 5% !important;
}

.mtp6 {
  margin-top: 6% !important;
}

.mtp7 {
  margin-top: 7% !important;
}

.mtp8 {
  margin-top: 8% !important;
}

.mtp9 {
  margin-top: 9% !important;
}

.mtp10 {
  margin-top: 10% !important;
}

.mrp1 {
  margin-right: 1% !important;
}

.mrp2 {
  margin-right: 2% !important;
}

.mrp3 {
  margin-right: 3% !important;
}

.mrp4 {
  margin-right: 4% !important;
}

.mrp5 {
  margin-right: 5% !important;
}

.mrp6 {
  margin-right: 6% !important;
}

.mrp7 {
  margin-right: 7% !important;
}

.mrp8 {
  margin-right: 8% !important;
}

.mrp9 {
  margin-right: 9% !important;
}

.mrp10 {
  margin-right: 10% !important;
}

.mbp1 {
  margin-bottom: 1% !important;
}

.mbp2 {
  margin-bottom: 2% !important;
}

.mbp3 {
  margin-bottom: 3% !important;
}

.mbp4 {
  margin-bottom: 4% !important;
}

.mbp5 {
  margin-bottom: 5% !important;
}

.mbp6 {
  margin-bottom: 6% !important;
}

.mbp7 {
  margin-bottom: 7% !important;
}

.mbp8 {
  margin-bottom: 8% !important;
}

.pd00 {
  padding: 0 !important;
}

.pt00 {
  padding-top: 0 !important;
}

.pt05 {
  padding-top: 5px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pt70 {
  padding-top: 70px !important;
}

.pt80 {
  padding-top: 80px !important;
}

.pt100 {
  padding-top: 100px !important;
}

.pb00 {
  padding-bottom: 0 !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pr00 {
  padding-right: 0 !important;
}

.pr05 {
  padding-right: 5px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pl00 {
  padding-left: 0 !important;
}

.pl05 {
  padding-left: 5px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pbp1 {
  padding-bottom: 1% !important;
}

.pbp2 {
  padding-bottom: 2% !important;
}

.pbp3 {
  padding-bottom: 3% !important;
}

.pbp4 {
  padding-bottom: 4% !important;
}

.pbp5 {
  padding-bottom: 5% !important;
}

.pbp6 {
  padding-bottom: 6% !important;
}

.pbp7 {
  padding-bottom: 7% !important;
}

.pbp8 {
  padding-bottom: 8% !important;
}

.pbp9 {
  padding-bottom: 9% !important;
}

.pbp10 {
  padding-bottom: 10% !important;
}

.ptp1 {
  padding-top: 1% !important;
}

.ptp2 {
  padding-top: 2% !important;
}

.ptp3 {
  padding-top: 3% !important;
}

.ptp4 {
  padding-top: 4% !important;
}

.ptp5 {
  padding-top: 5% !important;
}

.ptp6 {
  padding-top: 6% !important;
}

.ptp7 {
  padding-top: 7% !important;
}

.ptp8 {
  padding-top: 8% !important;
}

.ptp9 {
  padding-top: 9% !important;
}

.ptp10 {
  padding-top: 10% !important;
}

.tal {
  text-align: left !important;
}

.tac {
  text-align: center !important;
}

.tar {
  text-align: right !important;
}

.flR {
  float: right !important;
}

.flL {
  float: left !important;
}

.clear {
  clear: both !important;
}

.bn {
  border: none !important;
}

.btn {
  border-top: 0px !important;
}

.brn {
  border-right: 0px !important;
}

.bbn {
  border-bottom: 0px !important;
}

.bln {
  border-left: 0px !important;
}

/* ディスプレイ*/
/* ポジション　*/
main {
  display: block;
  width: 100%;
  margin: 0 auto;
  max-width: 750px;
}
main img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.tx {
  color: #fff;
  font-size: max(0.813rem, min(0.673rem + 0.7vw, 1rem));
  line-height: 1.5;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 40px);
}

.spread div.anim {
  -webkit-animation: Flash1 3s infinite;
          animation: Flash1 3s infinite;
}

@-webkit-keyframes Flash1 {
  0% {
    box-shadow: 0px 0px 5px 2px #f8e500;
    -moz-box-shadow: 0px 0px 5px 2px #f8e500;
    -webkit-box-shadow: 0px 0px 5px 2px #f8e500;
  }
  60% {
    box-shadow: 0px 0px 10px 3px #f8e500;
    -moz-box-shadow: 0px 0px 10px 3px #f8e500;
    -webkit-box-shadow: 0px 0px 10px 3px #f8e500;
  }
  40% {
    box-shadow: 0px 0px 10px 3px #f8e500;
    -moz-box-shadow: 0px 0px 10px 3px #f8e500;
    -webkit-box-shadow: 0px 0px 10px 3px #f8e500;
  }
  100% {
    box-shadow: 0px 0px 5px 2px #f8e500;
    -moz-box-shadow: 0px 0px 5px 2px #f8e500;
    -webkit-box-shadow: 0px 0px 5px 2px #f8e500;
  }
}

@keyframes Flash1 {
  0% {
    box-shadow: 0px 0px 5px 2px #f8e500;
    -moz-box-shadow: 0px 0px 5px 2px #f8e500;
    -webkit-box-shadow: 0px 0px 5px 2px #f8e500;
  }
  60% {
    box-shadow: 0px 0px 10px 3px #f8e500;
    -moz-box-shadow: 0px 0px 10px 3px #f8e500;
    -webkit-box-shadow: 0px 0px 10px 3px #f8e500;
  }
  40% {
    box-shadow: 0px 0px 10px 3px #f8e500;
    -moz-box-shadow: 0px 0px 10px 3px #f8e500;
    -webkit-box-shadow: 0px 0px 10px 3px #f8e500;
  }
  100% {
    box-shadow: 0px 0px 5px 2px #f8e500;
    -moz-box-shadow: 0px 0px 5px 2px #f8e500;
    -webkit-box-shadow: 0px 0px 5px 2px #f8e500;
  }
}
* {
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

#wrap {
  overflow: hidden;
}

body.top, body.lwr {
  background: #132a3c;
}

.top #wrap {
  background-image: url(../img/header_bg.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}
.no-webp .top #wrap {
  background-image: url(../img/header_bg.jpg);
}

.lwr #wrap {
  background-image: url(../img/header_bg_lwr.webp);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: top center;
}
.no-webp .lwr #wrap {
  background-image: url(../img/header_bg_lwr.jpg);
}

#contents {
  position: relative;
}

/*header*/
header {
  position: relative;
  overflow-y: hidden;
}

header h1 img {
  width: 100%;
}

header .top_hd_upr {
  position: relative;
  padding-bottom: 10%;
}
header .top_hd_upr .pankuzu {
  margin-top: -5%;
}

header .top_hd_lwr {
  position: relative;
  margin-top: 23%;
}

header .hfb {
  position: absolute;
  top: -32%;
  z-index: 100;
  height: 30%;
  width: 100%;
}

header .hfb a {
  position: absolute;
  top: 0;
  width: 50%;
  display: block;
  cursor: pointer;
}

header .hfb a:nth-child(1) {
  left: 0;
}

header .hfb a:nth-child(2) {
  right: 0;
}

header .hfb a img {
  width: 100%;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
}
header .hfb a img:hover {
  -webkit-filter: brightness(120%);
          filter: brightness(120%);
  -webkit-transform: translateY(-1px);
          transform: translateY(-1px);
}

.lwr header {
  /*margin-bottom: -8%;*/
}

#gl {
  position: absolute;
  z-index: 100;
  width: 100%;
  top: 0;
}

.lwr #gl,
#result #gl {
  z-index: 600;
  margin-bottom: 2%;
  position: relative;
}

#gl ul {
  display: table;
}

#gl ul li {
  display: table-cell;
  width: 50%;
}
#gl ul li a {
  cursor: pointer;
}

#gl ul li a img {
  width: 100%;
  height: auto;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
}
#gl ul li a img:hover {
  -webkit-filter: brightness(120%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
          filter: brightness(120%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}

.s_disp {
  display: none;
}

/*--------------------------------------------------------------------------------------
index
--------------------------------------------------------------------------------------*/
/*inbox*/
.inbox {
  overflow: hidden;
  display: block;
  position: relative;
}

.inbox .left {
  width: 20%;
  margin-left: 9%;
  margin-right: 3%;
  float: left;
  display: block;
}

.inbox .right {
  float: right;
  width: 58%;
  margin: 0 10% 0 0;
  text-align: left;
  display: block;
}

.inbox .right .ttl {
  text-align: left;
  font-size: 28px;
  font-size: max(1.125rem, min(0.66rem + 2.33vw, 1.75rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 18[px] ～   max28[px] */
  font-weight: 700;
  line-height: 1.6;
  padding-bottom: 0.5em;
}

.inbox .right .ttl a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
  color: #000;
}
.inbox .right .ttl a:hover {
  text-decoration: none !important;
}

.inbox .right .normal {
  font-size: 28px;
  font-size: max(0.75rem, min(0.424rem + 1.63vw, 1.188rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 12[px] ～   max28[px] */
}

.inbox .right .price {
  color: #c30455;
  font-weight: 900;
  text-align: right;
  line-height: 1.3;
  display: block;
}

.newbox,
.gorgeous_box,
.recommend_box,
.free_box {
  background-image: url(../img/new_bgf.webp), url(../img/new_bgr.webp);
  background-repeat: no-repeat, repeat-y;
  background-position: bottom center, top center;
  background-size: 100% auto, 100% auto;
}
.no-webp .newbox,
.no-webp .gorgeous_box,
.no-webp .recommend_box,
.no-webp .free_box {
  background-image: url(../img/new_bgf.png), url(../img/new_bgr.png);
}

.newbox {
  margin-bottom: -10%;
  position: relative;
}

.newbox .inbox,
.gorgeous_box .inbox,
.recommend_box .inbox,
.free_box .inbox {
  background: url(../img/new_line.webp) no-repeat bottom center/100% auto;
  padding: 5% 0;
}
.no-webp .newbox .inbox,
.no-webp .gorgeous_box .inbox,
.no-webp .recommend_box .inbox,
.no-webp .free_box .inbox {
  background: url(../img/new_line.png) no-repeat bottom center/100% auto;
}
.newbox .inbox:last-child,
.gorgeous_box .inbox:last-child,
.recommend_box .inbox:last-child,
.free_box .inbox:last-child {
  background: none;
}

.newbox .inbox .ttl a {
  color: #336699;
}

.newbox .inbox .ttl span {
  padding-left: 0.3em;
  color: red;
}

.gorgeous_box .inbox.love .ttl a {
  color: #990000;
}

.gorgeous_box .inbox.life .ttl a {
  color: #333366;
}

.recommend_box,
.free_box {
  margin-top: 5%;
}

.recommend_box .inbox .ttl a {
  color: #330066;
}

.free_box .inbox .ttl a {
  color: #003300;
}

section.all {
  margin-top: 5%;
}
section.all .all_nav {
  display: table;
  margin: 2% 0;
}
section.all .all_nav li {
  display: table-cell;
  width: 33.3%;
}
section.all .all_nav a img {
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
}
section.all .all_nav a img:hover {
  -webkit-filter: brightness(120%) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
          filter: brightness(120%) drop-shadow(0 3px 3px rgba(0, 0, 0, 0.5));
}
section.all h3 {
  display: block;
  padding-top: 5%;
}
section.all .menu_wrap li.inbox {
  margin: 3% 0;
  padding: 5% 0;
  background-image: url(../img/all_inbox_bgt.webp), url(../img/all_inbox_bgf.webp), url(../img/all_inbox_bgr.webp);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top center, bottom center, top center;
  background-size: 100% auto, 100% auto, 100% auto;
}
.no-webp section.all .menu_wrap li.inbox {
  background-image: url(../img/all_inbox_bgt.jpg), url(../img/all_inbox_bgf.jpg), url(../img/all_inbox_bgr.jpg);
}
section.all .menu_wrap.love li a {
  color: #660000;
}
section.all .menu_wrap.encmar li a {
  color: #330066;
}
section.all .menu_wrap.lfwk li a {
  color: #003366;
}

.start_form .inbox,
.inbox.single {
  padding: 5% 0;
  margin: 3% 0;
  background-image: url(../img/start_inbox_bgt.webp), url(../img/start_inbox_bgf.webp), url(../img/start_inbox_bgr.webp);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top center, bottom center, top center;
  background-size: 100% auto, 100% auto, 100% auto;
}
.no-webp .start_form .inbox,
.no-webp .inbox.single {
  background-image: url(../img/start_inbox_bgt.jpg), url(../img/start_inbox_bgf.jpg), url(../img/start_inbox_bgr.jpg);
}
.start_form .inbox .ttl,
.inbox.single .ttl {
  color: #ffff99;
}

/*動作条件*/
/* 注意事項 */
.ope_cond,
.precautions {
  margin: 100px auto;
  margin: max(2.5rem, min(-0.291rem + 13.95vw, 6.25rem)) auto;
  /* veiwport min: 320[px]～   max 750[px] で   min 40[px] ～   max100[px] */
  color: #fff;
  text-align: center;
}
.ope_cond h2,
.precautions h2 {
  font-size: 45px;
  font-size: max(2.125rem, min(1.613rem + 2.56vw, 2.813rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 34[px] ～   max45[px] */
  letter-spacing: 0.1em;
  color: #fff;
}
.ope_cond .content,
.precautions .content {
  padding: 2em;
  text-align: left;
  line-height: 1.4;
  font-size: 15px;
  font-size: max(0.75rem, min(0.61rem + 0.7vw, 0.938rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 12[px] ～   max15[px] */
}
.ope_cond table,
.ope_cond tr,
.ope_cond td,
.precautions table,
.precautions tr,
.precautions td {
  border: 1px solid #fff;
}
.ope_cond td,
.precautions td {
  display: table-cell;
  vertical-align: middle;
  padding: 0.5em;
}
.ope_cond td:first-of-type,
.precautions td:first-of-type {
  min-width: 40px;
}
.ope_cond a,
.precautions a {
  color: #ff0000;
}
.ope_cond:not([class]) a,
.precautions:not([class]) a {
  text-decoration: underline;
}
.ope_cond .precautions_txt,
.precautions .precautions_txt {
  margin: 2em 0;
  background-color: #fff;
  color: #000;
  padding: 2em;
  text-align: left;
  line-height: 1.6;
  font-size: 15px;
  font-size: max(0.75rem, min(0.61rem + 0.7vw, 0.938rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 12[px] ～   ma15[px] */
}
.ope_cond .precautions_txt p + p,
.precautions .precautions_txt p + p {
  margin-top: 0.5em;
}

/*footer*/
.footer {
  text-align: center;
  /* margin-top: max(6.25rem, min(1.599rem + 23.26vw, 12.5rem));*/
}
.footer .jumptotop, .footer .returntotop {
  display: block;
  margin: 1em auto;
  text-align: center;
  font-weight: 700;
  font-size: 35px;
  font-size: max(1.25rem, min(0.552rem + 3.49vw, 2.188rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 20[px] ～   max35[px] */
  color: #fff;
  text-underline-offset: 0.1em;
}
.footer .returntotop {
  color: #f3eb69;
}
.footer .footerin {
  //margin-top: 100px;
  //margin-top: max(3.125rem, min(0.799rem + 11.63vw, 6.25rem));
  //padding-bottom: 200px;
  //padding-bottom: max(6.25rem, min(1.599rem + 23.26vw, 12.5rem));
padding-bottom:50px;
  font-size: 15px;
  font-size: max(0.75rem, min(0.61rem + 0.7vw, 0.938rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 12[px] ～   ma15[px] */
}
.footer .footerin a {
  color: #fff;
  text-underline-offset: 3px;
}
.footer .footerin .copy {
  color: #fff;
  margin-top: 2em;
}

/*** sec_result ***/
.sec_result {
  margin: 20px 0;
}
.sec_result .result_content + .result_content {
  margin-top: 10%;
}
.sec_result .result_content .ttlbox {
  font-size: 20px;
  font-size: max(1.125rem, min(1.032rem + 0.47vw, 1.25rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 18[px] ～   max20[px] */
  padding: 8% 8% 6%;
  background-image: url(../img/result_ttl_bgt.webp), url(../img/result_ttl_bgf.webp);
  background-repeat: no-repeat, no-repeat;
  background-position: top center, bottom center;
  background-size: 100% auto, 100% auto;
}
.no-webp .sec_result .result_content .ttlbox {
  background-image: url(../img/result_ttl_bgt.png), url(../img/result_ttl_bgf.png);
}
.sec_result .result_content h2 {
  line-height: 1.6;
  width: 100%;
  z-index: 1000000000000000000;
  color: #fff;
}
.sec_result .result_content h2.view-target {
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.3s;
  transition: opacity 0.3s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.3s;
}
.sec_result .result_content h2.scrolled-in {
  opacity: 1;
}
.sec_result .result_content .card_single, .sec_result .result_content .card_pair {
  width: 100%;
  margin: 0 auto;
  padding: 3% 3% 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}
.sec_result .result_content .card_single {
  padding-bottom: 2%;
}
.sec_result .result_content .description {
  font-size: 16px;
  font-size: max(0.875rem, min(0.782rem + 0.47vw, 1rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 14[px] ～   max16[px] */
  color: #fff;
  padding: 0 6% 0;
  line-height: 1.5;
  display: block;
  color: #fff;
  opacity: 0;
  -webkit-transition: opacity 0.2s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.3s;
  transition: opacity 0.2s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.3s;
}
.sec_result .result_content .description.scrolled-in {
  opacity: 1;
}
.sec_result .result_content .description .gauss {
  -webkit-filter: blur(8px);
          filter: blur(8px);
}
.sec_result .result_content .description .gauss_img {
  display: block;
  width: 100%;
}
.sec_result .result_content .card01 {
  margin: 0 auto 0;
  width: 53%; /*    カード幅指定 ★★★       253px / 480px * 100 = 52.7%       */
}
.sec_result .result_content .dmywrap {
  position: relative;
  margin-top: -2%;
}
.sec_result .result_content .dmywrap .gauss_img {
  display: block;
  width: 93%;
  margin: 0 auto;
}
.sec_result .result_content .dmywrap .paybtn {
  position: absolute;
  width: 74%;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
          transform: translateY(-50%) translateX(-50%);
}
.sec_result .result_content .dmywrap .paybtn img {
  display: block;
  width: 100%;
  height: auto;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}
.sec_result .result_content .dmywrap .paybtn img:hover {
  -webkit-filter: brightness(120%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
          filter: brightness(120%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}
.sec_result .intro_others {
  position: relative;
  z-index: -1;
  margin: -4% 0 -5%;
}

/*** sec_others ***/
.sec_others {
  margin: 5% 0;
}
.sec_others .intro_txt {
  margin: 0 0 6%;
  text-align: center;
  line-height: 1.7;
  color: #ffffcc;
  font-size: 4vw;
  font-size: max(0.875rem, min(0.511rem + 1.82vw, 1.875rem));
}
.sec_others .more_menus {
  padding-top: 9%;
  background-image: url(../img/moremenu_bgt.webp), url(../img/moremenu_bgr.webp);
  background-repeat: no-repeat, repeat-y;
  background-position: top center, top center;
  background-size: 100% auto, 100% auto;
}
.no-webp .sec_others .more_menus {
  background-image: url(../img/moremenu_bgt.png), url(../img/moremenu_bgr.png);
}
.sec_others .more_menus .menus {
  padding: 2% 10% 5%;
}
.sec_others .more_menus .menus.pb0 {
  padding-bottom: 0;
}
.sec_others .more_menus .menus li {
  color: #fff;
  line-height: 1.6;
  font-size: 110%;
  font-size: max(0.875rem, min(0.689rem + 0.93vw, 1.125rem));
  position: relative;
  padding-left: 2.5em;
  padding-top: 0.2em;
  padding-bottom: 0.5em;
}
.sec_others .more_menus .menus li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background: url(../img/ico_list.jpg) no-repeat center center;
  background-size: contain;
}
.sec_others .more_menus .menus li + li {
  margin-top: 1em;
}
.sec_others .more_paybtn {
  margin: 0 auto;
  text-align: center;
  width: 74%;
}
.sec_others .more_paybtn img {
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
}
.sec_others .more_paybtn img:hover {
  -webkit-filter: brightness(120%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
          filter: brightness(120%) drop-shadow(0 5px 5px rgba(0, 0, 0, 0.5));
}
.sec_others .more_note {
  width: calc(100% - 4em);
  margin: 0 auto;
  font-size: 16px;
  font-size: max(0.813rem, min(0.673rem + 0.7vw, 1rem));
  text-align: center;
  color: #fff;
}
.sec_others .more_note .more_price {
  color: #ffffcc;
}

/*** result_menu_listarea ***/
.result_menu_listarea {
  margin-bottom: 10%;
}
.result_menu_listarea ul {
  margin-top: -1%;
  background-image: url(../img/resultnew_bgf.webp), url(../img/resultnew_bgr.webp);
  background-repeat: no-repeat, repeat-y;
  background-position: bottom center, top center;
  background-size: 100% auto, 100% auto;
}
.no-webp .result_menu_listarea ul {
  background-image: url(../img/resultnew_bgf.jpg), url(../img/resultnew_bgr.png);
}
.result_menu_listarea ul .inbox {
  padding: 5% 0;
  background: url(../img/new_line.webp) no-repeat bottom center/100% auto;
}
.no-webp .result_menu_listarea ul .inbox {
  background: url(../img/new_line.png) no-repeat bottom center/100% auto;
}
.result_menu_listarea ul .inbox:last-child {
  background: none;
}
.result_menu_listarea ul .inbox .right .ttl a {
  color: #336699;
}
.result_menu_listarea ul .inbox .right .ttl span {
  padding-left: 0.3em;
  color: red;
}

/*--------------------------------------------------------------------------------------
introduction
--------------------------------------------------------------------------------------*/
.member_entrance {
  margin: 5% 0 5%;
}

.card_name {
  text-align: center;
  display: block;
  font-weight: bold;
  color: #fff;
  font-size: 110%;
  margin: 10% auto 10%;
  width: 90%;
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.2s;
  transition: opacity 0.3s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.2s;
}

.card_name.scrolled-in {
  opacity: 1;
}

.peekre_ttl {
  display: relative;
  margin-bottom: -9%;
  position: relative;
}

.peekre_ttl .absotxt {
  position: absolute;
  top: 17%;
  left: 0;
  right: 0;
  text-align: center;
  line-height: 1.5;
  letter-spacing: 0.1em;
  color: #fff;
  font-size: 4.5vw;
  text-shadow: rgba(148, 148, 148, 0.1) 4px 0px 4px, rgba(199, 199, 199, 0.1) -4px 0px 4px, rgba(199, 199, 199, 0.1) 0px -4px 4px, rgba(199, 199, 199, 0.1) -4px 0px 4px, rgba(199, 199, 199, 0.1) 4px 4px 4px, rgba(199, 199, 199, 0.1) -4px 4px 4px, rgba(199, 199, 199, 0.1) 4px -4px 4px, rgba(199, 199, 199, 0.1) -4px -4px 4px, rgba(199, 199, 199, 0.1) 2px 4px 4px, rgba(199, 199, 199, 0.1) -2px 4px 4px, rgba(199, 199, 199, 0.1) 2px -4px 4px, rgba(199, 199, 199, 0.1) -2px -4px 4px, rgba(199, 199, 199, 0.1) 4px 2px 4px, rgba(199, 199, 199, 0.1) -4px 2px 4px, rgba(199, 199, 199, 0.1) 4px -2px 4px, rgba(199, 199, 199, 0.1) -4px -2px 4px, rgba(199, 199, 199, 0.1) 2px 2px 4px, rgba(199, 199, 199, 0.1) -2px 2px 4px, rgba(199, 199, 199, 0.1) 2px -2px 4px, rgba(199, 199, 199, 0.1) -2px -2px 4px;
  opacity: 0;
  -webkit-transition: opacity 0.3s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.1s;
  transition: opacity 0.3s cubic-bezier(0.43, 0.25, 0.93, 0.16) 0.1s;
}

.peekre_ttl .absotxt.scrolled-in {
  opacity: 1;
}

.peekre_ttl .absotxt .gold {
  margin-top: 33%;
  letter-spacing: 0.03em;
  font-size: 5.2vw;
  color: #ecd688;
  line-height: 1.3;
  text-shadow: rgba(0, 0, 0, 0.5) 4px 0px 4px, rgba(0, 0, 0, 0.5) -4px 0px 4px, rgba(0, 0, 0, 0.5) 0px -4px 4px, rgba(0, 0, 0, 0.5) -4px 0px 4px, rgba(0, 0, 0, 0.5) 4px 4px 4px, rgba(0, 0, 0, 0.5) -4px 4px 4px, rgba(0, 0, 0, 0.5) 4px -4px 4px, rgba(0, 0, 0, 0.5) -4px -4px 4px, rgba(0, 0, 0, 0.5) 2px 4px 4px, rgba(0, 0, 0, 0.5) -2px 4px 4px, rgba(0, 0, 0, 0.5) 2px -4px 4px, rgba(0, 0, 0, 0.5) -2px -4px 4px, rgba(0, 0, 0, 0.5) 4px 2px 4px, rgba(0, 0, 0, 0.5) -4px 2px 4px, rgba(0, 0, 0, 0.5) 4px -2px 4px, rgba(0, 0, 0, 0.5) -4px -2px 4px, rgba(0, 0, 0, 0.5) 2px 2px 4px, rgba(0, 0, 0, 0.5) -2px 2px 4px, rgba(0, 0, 0, 0.5) 2px -2px 4px, rgba(0, 0, 0, 0.5) -2px -2px 4px;
}

/*------------------------------------------------------------
start_form
--------------------------------------------------------------*/
.start_form {
  margin-bottom: 10%;
}
.start_form .tx {
  width: 88%;
}

.sec_start_menu .menu_list {
  padding: 5% 8% 10%;
  color: #fff;
  background-image: url(../img/start_menu_list_bgt.webp), url(../img/start_menu_list_bgf.webp), url(../img/start_menu_list_bgr.webp);
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: top center, bottom center, top center;
  background-size: 100% auto, 100% auto, 100% auto;
}
.no-webp .sec_start_menu .menu_list {
  background-image: url(../img/start_menu_list_bgt.jpg), url(../img/start_menu_list_bgf.jpg), url(../img/start_menu_list_bgr.jpg);
}
.sec_start_menu .menu_list ul {
  padding: 2% 0 5%;
}
.sec_start_menu .menu_list ul li {
  width: 100%;
  margin: 0 auto;
  color: #fff;
  line-height: 1.6;
  font-size: 110%;
  font-size: max(0.875rem, min(0.689rem + 0.93vw, 1.125rem));
  position: relative;
  padding-left: 2.5em;
  padding-top: 0.2em;
  padding-bottom: 0.5em;
}
.sec_start_menu .menu_list ul li::before {
  position: absolute;
  left: 0;
  top: 0;
  content: "";
  display: block;
  width: 2em;
  height: 2em;
  background: url(../img/ico_list.jpg) no-repeat center center;
  background-size: contain;
}
.sec_start_menu .menu_list ul li + li {
  margin-top: 1em;
}

.sec_start_spread {
  margin-bottom: 100px;
  margin-bottom: max(3.125rem, min(0.799rem + 11.63vw, 6.25rem));
}
.sec_start_spread .start_spread_ttl {
  margin-bottom: -17%;
}

.sec_form_description {
  margin-bottom: max(3.125rem, min(0.799rem + 11.63vw, 6.25rem));
}
.sec_form_description .desc_box {
  margin: 2em auto;
  width: calc(100% - 30px);
  background-color: #fff;
  padding: 1em 1em 2em;
  text-align: center;
}
.sec_form_description .desc_box p {
  color: #330000;
  font-size: 16px;
  font-size: max(0.813rem, min(0.673rem + 0.7vw, 1rem));
}
.sec_form_description h2 {
  font-weight: 800;
  display: block;
  margin: 0.5em auto;
}
.sec_form_description h2.completely_free {
  line-height: 1.6;
  text-align: center;
  width: calc(100% - 2em);
  color: #f3eb69;
  font-size: 120%;
  font-size: max(1.25rem, min(0.785rem + 2.33vw, 1.875rem));
  /* veiwport min: 320[px]～   max 750[px] で   min 20[px] ～   max30[px] */
}
.sec_form_description h2.menu_closed {
  color: #330000;
}
.sec_form_description h2.partially_free {
  color: #003366;
}
.sec_form_description h2.fee_based {
  color: #990033;
}
.sec_form_description h3 {
  font-weight: 800;
  display: inline-block;
  margin: 0.5em 0;
}
.sec_form_description h3 span.price {
  color: #b72a62;
}
.sec_form_description p + h2 {
  margin-top: 2em;
}
.sec_form_description p + h3 {
  margin-top: 2em;
}
.sec_form_description form[name*=stepin] {
  margin-top: 3em;
  margin-bottom: 1em;
}

/*-----------------------------------------------------------
------------------------------------------------------------*/
/*-----------------------------------------------
intro
-------------------------------------------------*/
#intro {
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 10%;
}

.sec_about_astrology,
.sec_tarot,
.sec_spread {
  margin-bottom: 10%;
}
.sec_about_astrology h2,
.sec_tarot h2,
.sec_spread h2 {
  margin-bottom: 5%;
}

.tarot {
  position: relative;
  z-index: 100000;
  overflow: hidden;
  position: relative;
  padding: 0 2% 10% 2%;
}

.tarot li {
  width: 20%;
  display: block;
  float: left;
  margin: 2% 2% 0;
}

.tarot.col3 {
  margin-top: 0;
}

.tarot.col3 li:nth-child(3n+1) {
  margin-left: 16%;
}

.tarot.col3 li:nth-child(3n+3) {
  margin-right: 16%;
}

.tarot.col3 li:nth-child(-n+3) {
  margin-top: 0;
}

.tarot.col4 {
  margin-top: 0;
}

.tarot.col4 li:nth-child(4n+1) {
  margin-left: 4%;
}

.tarot.col4 li:nth-child(4n+4) {
  margin-right: 4%;
}

.tarot.col4 li:nth-child(-n+4) {
  margin-top: 0;
}

.tarot span {
  text-align: center;
  line-height: 1.4;
  height: 4.5em;
  font-size: 100%;
  color: #fff;
  padding: 5% 0 0;
  margin: 0 auto 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.sec_tarot .author {
  text-align: center;
}

.sec_spread {
  margin-top: 10%;
  margin-bottom: 10%;
}

.sec_spread .spread_img img {
  display: block;
  margin: 1em auto 3em;
  width: 94%;
}

.spread {
  position: relative;
  margin: 0 auto;
}

.spread .spread_wrapper {
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
  left: 0;
}

.footer small.copy span {
  font-size: 72%;
}

/* SPREAD */
/* 66/750*100 = 8.8% */
.spread div:not(.spread_wrapper) {
  width: 8.8%;
  position: absolute;
  -webkit-box-shadow: 0px 0px 10px 2px #dbf5ff;
  box-shadow: 0px 0px 10px 2px #dbf5ff;
  border-radius: 2px;
}

.spread_1 .c01 {
  left: 45.73%;
  top: 11.11%;
}

.spread_1 .c02 {
  left: 34.93%;
  top: 24.42%;
}

.spread_1 .c03 {
  left: 45.73%;
  top: 24.42%;
}

.spread_1 .c04 {
  left: 56.27%;
  top: 24.42%;
}

.spread_1 .c05 {
  left: 45.73%;
  top: 37.73%;
}

.spread_1 .c06 {
  left: 45.73%;
  top: 50.94%;
}

.spread_1 .c07 {
  left: 45.73%;
  top: 64.14%;
}

.spread_1 .c08 {
  left: 34.93%;
  top: 37.73%;
}

.spread_1 .c09 {
  left: 34.93%;
  top: 50.94%;
}

.spread_1 .c10 {
  left: 34.93%;
  top: 64.14%;
}

.spread_1 .c11 {
  left: 56.27%;
  top: 37.73%;
}

.spread_1 .c12 {
  left: 56.27%;
  top: 50.94%;
}

.spread_1 .c13 {
  left: 56.27%;
  top: 64.14%;
}

.spread_1 .c14 {
  left: 12%;
  top: 37.73%;
}

.spread_1 .c15 {
  left: 22.53%;
  top: 37.73%;
}

.spread_1 .c16 {
  left: 22.53%;
  top: 50.94%;
}

.spread_1 .c17 {
  left: 68.67%;
  top: 37.73%;
}

.spread_1 .c18 {
  left: 68.67%;
  top: 50.94%;
}

.spread_1 .c19 {
  left: 79.2%;
  top: 37.73%;
}

.spread_1 .c20 {
  left: 34.93%;
  top: 77.34%;
}

.spread_1 .c21 {
  left: 45.73%;
  top: 77.34%;
}

.spread_1 .c22 {
  left: 56.27%;
  top: 77.34%;
}

.spread_2 .c20 {
  left: 45.73%;
  top: 8.69%;
}

.spread_2 .c21 {
  left: 28.8%;
  top: 16.72%;
}

.spread_2 .c19 {
  left: 63.07%;
  top: 16.72%;
}

.spread_2 .c22 {
  left: 12.93%;
  top: 27.28%;
}

.spread_2 .c07 {
  left: 45.73%;
  top: 23.65%;
}

.spread_2 .c18 {
  left: 78.8%;
  top: 27.28%;
}

.spread_2 .c01 {
  left: 45.73%;
  top: 37.4%;
}

.spread_2 .c02 {
  left: 45.73%;
  top: 51.16%;
}

.spread_2 .c08 {
  left: 45.73%;
  top: 64.8%;
}

.spread_2 .c03 {
  left: 35.33%;
  top: 44.22%;
}

.spread_2 .c04 {
  left: 56.13%;
  top: 44.22%;
}

.spread_2 .c09 {
  left: 67.07%;
  top: 33.66%;
}

.spread_2 .c10 {
  left: 67.07%;
  top: 54.9%;
}

.spread_2 .c11 {
  left: 9.2%;
  top: 44.22%;
}

.spread_2 .c17 {
  left: 82.13%;
  top: 44.22%;
}

.spread_2 .c06 {
  left: 24.53%;
  top: 54.9%;
}

.spread_2 .c12 {
  left: 12.93%;
  top: 61.06%;
}

.spread_2 .c16 {
  left: 78.8%;
  top: 61.06%;
}

.spread_2 .c13 {
  left: 28.8%;
  top: 71.62%;
}

.spread_2 .c15 {
  left: 63.07%;
  top: 71.62%;
}

.spread_2 .c14 {
  left: 45.73%;
  top: 79.65%;
}

.spread_2 .c05 {
  left: 24.53%;
  top: 33.66%;
}

.spread_3 .c18 {
  left: 45.6%;
  top: 8.69%;
}

.spread_3 .c16 {
  left: 20.8%;
  top: 31.79%;
}

.spread_3 .c09 {
  left: 31.6%;
  top: 31.79%;
}

.spread_3 .c03 {
  left: 60%;
  top: 31.79%;
}

.spread_3 .c11 {
  left: 70.4%;
  top: 31.79%;
}

.spread_3 .c08 {
  left: 20.8%;
  top: 44.22%;
}

.spread_3 .c01 {
  left: 40.93%;
  top: 44.22%;
}

.spread_3 .c26 {
  left: 50.4%;
  top: 44.22%;
}

.spread_3 .c04 {
  left: 70.4%;
  top: 44.22%;
}

.spread_3 .c15 {
  left: 20.8%;
  top: 56.77%;
}

.spread_3 .c07 {
  left: 31.6%;
  top: 56.77%;
}

.spread_3 .c05 {
  left: 60%;
  top: 56.77%;
}

.spread_3 .c12 {
  left: 70.4%;
  top: 56.77%;
}

.spread_3 .c02 {
  left: 45.6%;
  top: 26.4%;
}

.spread_3 .c06 {
  left: 45.6%;
  top: 62.6%;
}

.spread_3 .c17 {
  left: 31.6%;
  top: 19.36%;
}

.spread_3 .c10 {
  left: 60%;
  top: 19.36%;
}

.spread_3 .c14 {
  left: 31.6%;
  top: 69.2%;
}

.spread_3 .c13 {
  left: 60%;
  top: 69.2%;
}

.spread_3 .c24 {
  left: 9.2%;
  top: 44.22%;
}

.spread_3 .c20 {
  left: 82.13%;
  top: 44.22%;
}

.spread_3 .c25 {
  left: 17.33%;
  top: 17.05%;
}

.spread_3 .c19 {
  left: 74.53%;
  top: 17.05%;
}

.spread_3 .c23 {
  left: 17.33%;
  top: 71.62%;
}

.spread_3 .c21 {
  left: 74.53%;
  top: 71.62%;
}

.spread_3 .c22 {
  left: 45.6%;
  top: 79.65%;
}

.spread_4 .c01 {
  left: 7.73%;
  top: 18.26%;
}

.spread_4 .c02 {
  left: 17.2%;
  top: 18.26%;
}

.spread_4 .c03 {
  left: 26.4%;
  top: 18.26%;
}

.spread_4 .c19 {
  left: 36.67%;
  top: 18.26%;
}

.spread_4 .c20 {
  left: 46.13%;
  top: 18.26%;
}

.spread_4 .c21 {
  left: 55.33%;
  top: 18.26%;
}

.spread_4 .c10 {
  left: 65.47%;
  top: 18.26%;
}

.spread_4 .c11 {
  left: 74.93%;
  top: 18.26%;
}

.spread_4 .c12 {
  left: 84.13%;
  top: 18.26%;
}

.spread_4 .c04 {
  left: 7.73%;
  top: 33.66%;
}

.spread_4 .c05 {
  left: 17.2%;
  top: 33.66%;
}

.spread_4 .c06 {
  left: 26.4%;
  top: 33.66%;
}

.spread_4 .c22 {
  left: 36.67%;
  top: 33.66%;
}

.spread_4 .c23 {
  left: 46.13%;
  top: 33.66%;
}

.spread_4 .c24 {
  left: 55.33%;
  top: 33.66%;
}

.spread_4 .c13 {
  left: 65.47%;
  top: 33.66%;
}

.spread_4 .c14 {
  left: 74.93%;
  top: 33.66%;
}

.spread_4 .c15 {
  left: 84.13%;
  top: 33.66%;
}

.spread_4 .c07 {
  left: 7.73%;
  top: 49.06%;
}

.spread_4 .c08 {
  left: 17.2%;
  top: 49.06%;
}

.spread_4 .c09 {
  left: 26.4%;
  top: 49.06%;
}

.spread_4 .c25 {
  left: 36.67%;
  top: 49.06%;
}

.spread_4 .c26 {
  left: 46.13%;
  top: 49.06%;
}

.spread_4 .c27 {
  left: 55.33%;
  top: 49.06%;
}

.spread_4 .c16 {
  left: 65.47%;
  top: 49.06%;
}

.spread_4 .c17 {
  left: 74.93%;
  top: 49.06%;
}

.spread_4 .c18 {
  left: 84.13%;
  top: 49.06%;
}

.spread_4 .c28 {
  left: 7.73%;
  top: 70.08%;
}

.spread_4 .c29 {
  left: 17.2%;
  top: 70.08%;
}

.spread_4 .c30 {
  left: 26.4%;
  top: 70.08%;
}

.spread_4 .c31 {
  left: 36.67%;
  top: 70.08%;
}

.spread_4 .c32 {
  left: 46.13%;
  top: 70.08%;
}

.spread_4 .c33 {
  left: 55.33%;
  top: 70.08%;
}

.spread_4 .c34 {
  left: 65.47%;
  top: 70.08%;
}

.spread_4 .c35 {
  left: 74.93%;
  top: 70.08%;
}

.spread_4 .c36 {
  left: 84.13%;
  top: 70.08%;
}

.spread_5 .c01 {
  left: 45.73%;
  top: 44.22%;
}

.spread_5 .c08 {
  left: 27.2%;
  top: 44.22%;
}

.spread_5 .c04 {
  left: 64.27%;
  top: 44.22%;
}

.spread_5 .c07 {
  left: 32.8%;
  top: 56.11%;
}

.spread_5 .c09 {
  left: 32.67%;
  top: 31.9%;
}

.spread_5 .c02 {
  left: 45.73%;
  top: 28.93%;
}

.spread_5 .c03 {
  left: 58.93%;
  top: 31.9%;
}

.spread_5 .c05 {
  left: 58.8%;
  top: 56.22%;
}

.spread_5 .c06 {
  left: 45.73%;
  top: 59.41%;
}

.spread_5 .c22 {
  left: 45.87%;
  top: 79.21%;
}

.spread_5 .c14 {
  left: 33.33%;
  top: 68.32%;
}

.spread_5 .c17 {
  left: 33.33%;
  top: 19.25%;
}

.spread_5 .c21 {
  left: 45.87%;
  top: 9.35%;
}

.spread_5 .c10 {
  left: 58.53%;
  top: 19.25%;
}

.spread_5 .c13 {
  left: 58.53%;
  top: 68.32%;
}

.spread_5 .c20 {
  left: 15.47%;
  top: 69.2%;
}

.spread_5 .c15 {
  left: 15.6%;
  top: 54.9%;
}

.spread_5 .c18 {
  left: 7.2%;
  top: 44.22%;
}

.spread_5 .c16 {
  left: 15.6%;
  top: 33%;
}

.spread_5 .c19 {
  left: 15.47%;
  top: 19.25%;
}

.spread_5 .c24 {
  left: 77.33%;
  top: 69.2%;
}

.spread_5 .c12 {
  left: 75.87%;
  top: 54.9%;
}

.spread_5 .c25 {
  left: 84.27%;
  top: 44.22%;
}

.spread_5 .c11 {
  left: 75.87%;
  top: 33%;
}

.spread_5 .c23 {
  left: 78.53%;
  top: 19.14%;
}

.spread_6 .c13 {
  left: 45.6%;
  top: 43.67%;
}

.spread_6 .c04 {
  left: 45.6%;
  top: 66.89%;
}

.spread_6 .c03 {
  left: 33.2%;
  top: 63.59%;
}

.spread_6 .c02 {
  left: 21.6%;
  top: 57.65%;
}

.spread_6 .c01 {
  left: 21.47%;
  top: 43.56%;
}

.spread_6 .c12 {
  left: 21.6%;
  top: 29.7%;
}

.spread_6 .c11 {
  left: 33.2%;
  top: 23.76%;
}

.spread_6 .c10 {
  left: 45.6%;
  top: 21.34%;
}

.spread_6 .c09 {
  left: 58%;
  top: 23.76%;
}

.spread_6 .c08 {
  left: 69.6%;
  top: 29.7%;
}

.spread_6 .c07 {
  left: 69.73%;
  top: 43.67%;
}

.spread_6 .c06 {
  left: 69.6%;
  top: 57.65%;
}

.spread_6 .c05 {
  left: 58%;
  top: 63.59%;
}

.spread_6 .c14 {
  left: 45.73%;
  top: 82.07%;
}

.spread_6 .c15 {
  left: 26.13%;
  top: 77.34%;
}

.spread_6 .c16 {
  left: 9.07%;
  top: 63.59%;
}

.spread_6 .c17 {
  left: 9.07%;
  top: 43.67%;
}

.spread_6 .c18 {
  left: 9.07%;
  top: 23.87%;
}

.spread_6 .c19 {
  left: 26.13%;
  top: 10.12%;
}

.spread_6 .c20 {
  left: 45.73%;
  top: 6.16%;
}

.spread_6 .c21 {
  left: 65.07%;
  top: 10.12%;
}

.spread_6 .c22 {
  left: 82.27%;
  top: 23.87%;
}

.spread_6 .c23 {
  left: 82.27%;
  top: 43.67%;
}

.spread_6 .c24 {
  left: 82.27%;
  top: 63.59%;
}

.spread_6 .c25 {
  left: 65.07%;
  top: 77.34%;
}

/* pankuzu */
.pankuzu {
  padding: 2% 4% 2% 4%;
  font-size: max(1rem, min(0.907rem + 0.47vw, 1.125rem));
  color: #fff;
  line-height: 1.4;
}

.pankuzu a {
  text-decoration: underline;
  color: #ffe99d;
}

.card_pair > div {
  width: 49%;
}

.card_pair .pair1 .card01,
.card_pair .pair2 .card01 {
  margin: 0;
  width: 100%;
  padding-top: 0;
}

.continue_btn {
  width: 77.08%;
  /* 370/480*100=77.083333 */
}

.continue_btn {
  opacity: 0;
  -webkit-transition: opacity 0.6s cubic-bezier(0.43, 0.25, 0.93, 0.16) 2s;
  transition: opacity 0.6s cubic-bezier(0.43, 0.25, 0.93, 0.16) 2s;
}

.continue_btn.scrolled-in {
  opacity: 1;
}

/* .rotate */
.rotate {
  position: relative;
}

.rotate .front {
  width: 100%;
  margin: 0 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1s, -webkit-box-shadow 0.5s;
  transition: -webkit-transform 1s, -webkit-box-shadow 0.5s;
  transition: transform 1s, box-shadow 0.5s;
  transition: transform 1s, box-shadow 0.5s, -webkit-transform 1s, -webkit-box-shadow 0.5s;
}

.rotate .back {
  width: 100%;
  margin: 0 0;
  position: absolute;
  top: 0;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: -webkit-transform 1s, -webkit-box-shadow 0.5s;
  transition: -webkit-transform 1s, -webkit-box-shadow 0.5s;
  transition: transform 1s, box-shadow 0.5s;
  transition: transform 1s, box-shadow 0.5s, -webkit-transform 1s, -webkit-box-shadow 0.5s;
}

.rotate .front {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.flipped .front {
  -webkit-transform: rotateY(0deg);
  transform: rotateY(0deg);
}

.flipped .back {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

.shadow { /* カード回転後の発光色 */
  -webkit-box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.4);
  box-shadow: 0px 0px 10px 5px rgba(255, 255, 255, 0.4);
  border-radius: 3%;
}

.scene .card_shuffle {
  height: 100%;
}

.scene .card_shuffle .card_wrapper {
  position: absolute;
  height: 100%;
  top: 0;
  width: 100%;
  left: 0;
}

.scene .card_shuffle li {
  display: none;
  position: absolute;
  width: 8.8%;
  -webkit-transition: -webkit-box-shadow 0.6s ease;
  transition: -webkit-box-shadow 0.6s ease;
  transition: box-shadow 0.6s ease;
  transition: box-shadow 0.6s ease, -webkit-box-shadow 0.6s ease;
}

.scene .card_shuffle li.luminescence {
  -webkit-box-shadow: 0px 0px 10px 2px #253795;
          box-shadow: 0px 0px 10px 2px #253795; /* カード発光色 */
}

.fadein {
  transform: translateY(100px);
  -webkit-transform: translateY(100px);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  opacity: 0;
}

.fadein.scrollin {
  transform: translateY(0);
  -webkit-transform: translateY(0);
  transition: 0.5s;
  -webkit-transition: 0.5s;
  opacity: 1;
}

@media only screen and (min-width: 500px){
  body {
    margin: 0;
  }
}

@media only screen and (min-width: 640px){
  body {
    margin: 0;
  }
}

@media only screen and (min-width: 770px){
  body {
    margin: 0;
  }
  .tx {
    width: 100%;
  }
}

@media only screen and (max-width: 480px){
  body {
    margin: 0;
  }
  .shadow {
    -webkit-box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 5px 3px rgba(255, 255, 255, 0.4);
  }
}

@media only screen and (max-width: 360px){
  body {
    margin: 0;
  }
  .sec_form_description h2.completely_free {
    width: calc(100% - 1em);
  }
}


.stw_recommend {
    max-width: 750px;
    width: 100%;
    margin: 20px auto;
    background-color: #000000;
    padding-bottom: 20px;
}

.stw_recommend ul {
    max-width: 730px;
    width: 100%;
    margin: 0 auto;
}

.stw_recommend ul li {
    max-width: 700px;
    width: 100%;
    margin-top: 20px;
    border: 1px #ffff99 solid;
    padding: 20px 15px 20px 10px;
    display: table;
}

.stw_recommend ul li .left {
    width: 150px !important;
    padding-left: 10px !important;
    display: table-cell;
}

.stw_recommend ul li .right {
    width: calc(100% - 150px) !important;
    float: none !important;
    padding-left: 10px !important;
    padding-right: 0px !important;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}

.stw_recommend a {
    text-decoration: none;
}

.stw_recommend ul li .right .site_name {
    color: #FFFF99;
    font-size: 15px;
    font-weight: bold;
}

.stw_recommend ul li .right .menu_name {
    margin-top: 5px;
    color: #FFFFFF;
    font-size: 20px;
    text-decoration: underline;
    line-height: 1.5;
}

.stw_header {
    width: 100%;
    margin: 0 auto;
    background-color: #09055a;
    padding: 10px 0;
    font-size: 14px;
}

.stw_header .table {
    max-width: 750px;
    width: 100%;
    display: table;
    margin: 0 auto;
}

.stw_header .table .left {
    width: 70%;
    display: table-cell;
    text-align: left;
    vertical-align: middle;
}

.stw_header .table .left img {
    width: 35px;
    vertical-align: middle;
}

.stw_header .table .left a {
    color: #FFC000;
}

.stw_header .table .right {
    width: 30%;
    display: table-cell;
    text-align: right;
    vertical-align: middle;
    float: none!important;
    padding-right: 5px;
}

.stw_header .table .right a {
    color: #FFC000;
}

.stw_bookmark{
	margin: 0 auto;
	text-align: center;
	width: 60%;
}

.stw_bookmark_end {
	margin: 0 auto;
	display: none;
	text-align: center;
	width: 60%;
}

.stw_bookmark .text, .stw_bookmark_end .text {
	margin: 15px auto 25px auto;
	padding: 15px 0 25px 0;
	font-size: 17px;
	color: #FFCC66;
}