@charset "utf-8";

/*
Theme Name: いなりんPay
Theme URI: 
Description: いなりんPay
Version: 0.26.03.27
Author: OA推進センター
Author URI: 
*/

:root {
  --main-color: #6496dc;
  --sub-color: #f9bf2c;
  --color-black: #323250;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-size: 100%;
}
body {
  position: relative;
  min-height: 100vh;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
  background-image: url(./images/back01.png);
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  background-color: #ffffff;
}
img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}
a {
  color: inherit;
  word-break: break-all;
}
a img {
  transition: all 200ms 0s ease;
}
a:hover {
/*  text-decoration: underline; */
}
a:hover {
  opacity: 0.7;
}
table {
  font-size: inherit;
}

/**********

**********/
.sp {
  display: inline;
}
@media screen and (min-width: 500px) {
.sp {
  display: none;
}
}
.tb_inline {
  display: inline;
}
@media screen and (min-width: 900px) {
.tb_inline {
  display: none;
}
}

/**********
ヘッダ
**********/
#wpadminbar {
  position: fixed !important;
}

header {
  position: fixed;
  z-index: 50;
  width: 100%;
  padding: 0 10px;
  background-color: #ffffff;
}
header .innner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
  font-size: 11px;
}
header .header_logo {
  flex-shrink: 0;
  max-width: 140px;
}
header .header_logo img {
  width: 100%;
}
header .header_link {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
header .member_name {
  margin: 0 1.5em;
  line-height: 1.2;
  font-weight: 700;
}
header .menu_button {
  flex-shrink: 0;
  position: relative;
  cursor: pointer;
}
header .menu_open {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 1.8em;
  height: 1.8em;
}
header .menu_open span {
  display: block;
  width: 100%;
  height: 0.25em;
  background-color: #000000;
  border-radius: 5px;
}
header .menu_close {
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.4em;
  height: 1.4em;
  background: url("./images/menu/icon_close.svg") 50% 50% no-repeat;
  background-size: contain;
}

header .link_button {
  display: inline-block;
  margin: 0 1em;
  padding: 0.4em 1.5em;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  background-color: var(--main-color);
  border-radius: 0.4em;
  transition: all 0.2s;
}
header .link_button:hover {
}

@media screen and (min-width: 500px) {
header .innner {
  height: 60px;
  font-size: 13px;
}
}
@media screen and (min-width: 900px) {
header {
  padding: 0 20px;
}
header .innner {
  height: 80px;
  font-size: 15px;
}
header .header_logo {
  max-width: 200px;
}
header .menu_open {
  width: 2.4em;
  height: 2.4em;
}
header .menu_open span {
  height: 0.3em;
}
}

.header_modal {
  overflow-y: scroll; 
  position: absolute;
  z-index: 100;
  right: -500px;
  top: 0;
  width: 74vw;
  max-width: 500px;
  height: 100vh;
  padding: 1em;
  background-color: #ffffff;
  transition: all 0.5s;
}
.header_modal_open {
  right: 0;
}
.header_modal .modal_menu_logo {
  width: 176px;
  margin: 1.5em auto;
  text-align: center;
}
.header_modal .modal_menu {
}
.header_modal .modal_menu ul {
  list-style-type: none;
  font-size: 1.23em;
  font-weight: 700;
  border-top: solid 1px #d3d3d3;
}
.header_modal .modal_menu ul a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5em 1em;
  border-bottom: solid 1px #d3d3d3;
  text-decoration: none;
}
.header_modal .modal_menu ul a:after {
  content: url("./images/menu/icon_next.svg");
}

body.open_menu {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.header_modal_back {
  position: absolute;
  z-index: 10;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}
.header_modal_back_wide {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.3);
}


/**********
フッタ
**********/
/* ポイント運用前
**************/
.area_footer {
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5em 0;
  font-feature-settings: "palt";
  background-color: #ffffff;
}
.area_footer .footer_logo {
  max-width: 210px;
  margin: 0 auto 1.5em auto;
}
.area_footer .footer_copyright {
  margin: 1.5em 0;
  text-align: center;
}
.area_footer nav ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 1.5em;
  font-size: 0.8em;
  transition: all 0.5s;
}
.area_footer nav ul li {
  margin: 0;
}
.area_footer nav ul li:after {
  content: "/";
  padding: 0 0.4em;
}
.area_footer nav ul li:last-of-type:after {
  display: none;
}

.area_footer nav ul li a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}
.area_footer nav ul li a:after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: #000000;
  transition: all 0.3s;
  transform: scale(0, 1);
  transform-origin: left top;
}
.area_footer nav ul li a:hover:after {
  transform: scale(1, 1);
}

/* ポイント運用後
**************/
/*
.area_footer_app {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 40;
  width: 100%;
  background: url(./images/back01.jpg) repeat left top;
}
.area_footer_app innner {
}
.area_footer_app area_button {
}

.area_footer_app nav {
  display: block;
  width: 100%;
  height: 100%;
  padding: 5px;
  background-color: #ffffff;
  border-top: solid 1px var(--main-color);
}
.area_footer_app nav ul {
  display: flex;
  justify-content: space-between;
  width: 100%;
  max-width: 600px;
  height: 100%;
  margin: 0 auto;
  list-style-type: none;
}
.area_footer_app nav ul li  {
  display: flex;
  justify-content: center;
  align-items: center;
  width: calc( 100% / 3 );
  border-right: solid 1px var(--main-color);
}
.area_footer_app nav ul li:last-of-type  {
  border: none;
}
.area_footer_app nav a {
  display: block;
  width: 100%;
  padding: 0.2em 0;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  color: var(--main-color);
  text-decoration: none;
}
.area_footer_app nav a img {
  margin-bottom: 0.2em;
}
@media screen and (min-width: 900px) {
.area_footer_app nav ul {
  border-right: solid 1px var(--main-color);
  border-left: solid 1px var(--main-color);
}
}
*/
#wallet-block footer {
  display: none;
}

/**********
ヘッダー／フッター 発行元 
**********/
.header_modal .credit, 
.area_footer .credit {
  margin-top: 1em;
}
.header_modal .credit p, 
.area_footer .credit p {
  text-align: center;
  font-weight: 700;
  color: var(--main-color);
}
.header_modal .credit ul, 
.area_footer .credit ul {
  list-style-type: none;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  line-height: 1.2;
  font-size: 0.8em;
}
.area_footer .credit ul {
  padding: 0 3em;
}
.header_modal .credit ul li, 
.area_footer .credit ul li {
  margin: 0.3em 0;
}
.header_modal .credit ul li:before, 
.area_footer .credit ul li:before {
  content: '/';
  padding: 0 0.4em;
}
.header_modal .credit ul li:first-of-type:before, 
.area_footer .credit ul li:first-of-type:before {
  display: none;
}


/**********
パンくずリスト
**********/
.area_breadcrumb {
  display: none;
  max-width: 1000px;
  margin: 1em auto 0 auto;
  padding: 0 10px;
}
.area_breadcrumb ol {
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  padding: 0;
  font-size: 0.8em;
  color: #ffffff;
}
.area_breadcrumb ol li {
  margin: 0;
}
.area_breadcrumb ol li:after {
  content: '＞';
  padding: 0 0.5em 0 0.3em;
}
.area_breadcrumb ol li:last-of-type:after {
  display: none;
}
.area_breadcrumb ol li a {
  text-decoration: underline;
}
@media screen and (min-width: 900px) {
.area_breadcrumb {
  display: block;
}
}


/**********

**********/
main {
  overflow: hidden;
  padding-top: 50px;
}
article {
  max-width: 1040px;
  padding: 0 20px;
  margin: 3em auto;
}

@media screen and (min-width: 500px) {
main {
  padding-top: 60px;
}
}
@media screen and (min-width: 900px) {
main {
  padding-top: 80px;
}
}

header, footer{
  font-size: 13px;
}
.main, .aside, .area_first {
  overflow: hidden;
  width: 100%;
  padding: 0 15px;
}
.main {
  /*background: url(./images/back01.jpg) repeat left top;*/
}
.aside {
  background-color: #ffffff;
}
.area_first_wrapper {
  overflow: hidden;
  width: 100%;
  padding-bottom: 1em;
  background-color: #ffffff;
}
.area_first {
  background-color: var(--main-color);
}

.content {
  max-width: 600px;
  margin: 20px auto;
  padding: 15px;
  line-height: 1.54;
  font-feature-settings: "palt";
  font-size: 13px;
  background-color: var(--sub-color);
  border-radius: 10px;
}
.top_wrapper {
  overflow: hidden;
  width: 100%;
  padding: 0 15px;
  background-color: #ffffff;
}
.top_wrapper .content {
  background-color: #ffffff;
  border: solid 2px var(--main-color);;
}

.wrapper_pc_center {
  margin-top: 0.4em;
}

@media screen and (min-width: 500px) {
.content, .aside, footer {
  font-size: 16px;
}
.main, .aside .top_wrapper {
  padding: 0 20px;
}
.content {
  padding: 20px;
}
}
@media screen and (min-width: 900px) {
.content, .aside, footer {
  font-size: 18px;
}
.main, .aside .top_wrapper {
  padding: 0 30px;
}
main {
  overflow: hidden;
  padding-top: 80px;
}
.content {
  max-width: 1000px;
  padding: 30px;
}
.wrapper_pc_center {
  display: flex;
  justify-content: center;
  margin: 0.5em 0;
}
.style_pc_center {
  text-align: center;
}
.inline_sp {
  display: none;
}
}
  
.content p + p:not(.title_h3) {
  margin-top: 0.4em;
}
.content a {
  color: var(--main-color);

}

.content figure {
  max-width: 600px;
  margin: 10px auto;
  text-align: center;
}
.content figure figcaption {
  margin-top: 5px;
  padding-left: 11%;
  text-align: left;
}
/*
.content figure .indent1 {
  width: 100%;
  text-align: left;
}
*/
.content figure.usage {
}
.content figure.point {
  max-width: 400px;
  margin-left: 1em;
}

.style_box {
  width: 100%;
  margin: 1em auto;
  padding: 0.7em;
  background-color: #ffffff;
  border: solid 2px var(--main-color);
  border-radius: 5px;
}
@media screen and (min-width: 500px) {
.style_box {
  padding: 1em;
}
}
@media screen and (min-width: 900px) {
.style_box {
  max-width: 800px;
  padding: 1.4em;
}
}

.first_message {
  text-align: center;
  font-size: 1.8em;
  font-weight: 700;
}
  
.style_topcenter {
  margin-top: 0.4em;
  display: flex;
  justify-content: center;
  align-items: flex-start
}
.style_topcenter > *:first-of-type {
  /* flex-shrink: 0; */
  padding-right: 0.4em;
}
.style_topcenter > p {
  margin: 0 !important;
}
  
.style_border_top {
  width: 100%;
  margin-top: 0.5em;
  padding-top: 0.5em;
  border-top: dotted 2px var(--main-color);
}
.style_border_bottom {
  width: 100%;
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  border-bottom: dotted 2px var(--main-color);
}
.style_color_main {
  color: var(--main-color);
}
.style_attention {
  padding: 0 0.5em;
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  color: var(--main-color);
}
.area_forshop .style_attention {
  text-align: left;
  color: #ffffff;
}
.style_phone {
  margin-top: 0.2em !important;
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
}
p.style_phone a {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
p.style_phone a:before {
  content: url(./images/icon_phone.svg);
  width: 0.9em;
  height: 0.9em;
  display: inline-block;
}

.style_text_center {
  display: flex;
  justify-content: center;
}
.indent1 {
  display: inline-block;
  padding-left: 1em;
  text-indent: -1em;
}
p.indent1 {
  display: block;
}
marker, .marker {
  background: linear-gradient(transparent 70%, #FFF362 70%);
}
.nobr {
  white-space: nowrap;
}

.fs_1318 {
  font-size: 1.38em;
}
.fs_1316 {
  font-size: 1.23em;
}
.fs_1314 {
  font-size: 1.08em;
}
.fs_1312 {
  font-size: 0.92em;
}
.fs_1311 {
  font-size: 0.85em;
}
.fs_1310 {
  font-size: 0.77em;
}
.content section + section {
  margin-top: 1.5em;
}
.title_h1 {
  position: relative;
  max-width: 600px;
  margin: 0 auto 0.7em auto;
  padding: 0.5em 0.6em;
  text-align: center;
  line-height: 1.4;
  font-size: 1.54em;
  font-weight: 700;
  color: #ffffff;
  background: url(./images/title_h2.png) no-repeat left top / 100% 100%;
}
.title_h2 {
  font-size: 1.08em;
  font-weight: 700;
  color: var(--main-color);
}
.title_h3 {
  margin-top: 20px;
  padding: 0.1em 0.5em;
  font-size: 1.23em;
  font-weight: 700;
  text-align: center;
  color: #ffffff;
  background-color: var(--main-color);
}
.area_contact .title_h3 {
  color: var(--main-color);
  background-color: #ffffff;
  border: solid 2px var(--main-color);
}

@media screen and (min-width: 900px) {
.title_h2 {
  text-align: center;
}
.title_h2 + p {
  text-align: center;
}
.title_h3 {
  max-width: 500px;
  margin: 40px auto 10px auto;
}
}

/*見出し　吹き出し型*/
.title_speech {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  margin: 0.5em 0 0.7em 0;
  padding-top: 0.5em;
  text-align: center;
  line-height: 1.4;
  font-weight: 900;
  font-size: 1.62em;
}
.title_speech:before {
  content: url(./images/title_speech1_left.svg);
  width: 19.5px;
  height: 26px;
  margin-right: 0.2em;
}
.title_speech:after {
  content: url(./images/title_speech1_right.svg);
  width: 19.5px;
  height: 26px;
  margin-left: 0.2em;
}
.title_speech p {
  display: inline-block;
}


/*タイル　事業概要*/
.speech_merit {
  margin-top: 0;
  font-size: 1.23em;
}
.speech_merit b {
  font-size: 1.3em;
}
.speech_merit strong {
  color: #ff0000;
}
.speech_merit strong b {
  font-size: 1.65em;
}
.speech_merit:before {
  width: 39px;
  height: 52px;
  margin-right: -0.5em;
}
.speech_merit:after {
  width: 39px;
  height: 52px;
  margin-left: -0.5em;
}



.title_step {
  display: flex;
  align-items: center;
  font-size: 1.3em;
  font-weight: 700;
}
.title_step span {
  display: inline-block;
  margin-right: 0.5em;
  padding: 0.1em 0.7em;
  vertical-align: middle;
  font-size: 0.7em;
  color: #ffffff;
  background-color: var(--main-color);
  border-radius: 2em;
}

@media screen and (min-width: 900px) {
.title_step {
  justify-content: center;
  margin: 1.5em auto 0.5em auto;
}
}


.area_button {
  overflow: hidden;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  padding: 10px 0;
}
.area_button .button_wrapper {
  overflow: hidden;
  
}
.area_button .button_normal {
  display: block;
  padding: 0.4em;
  margin: 5px 0 3px 0;
  text-align: center;
  font-size: 1.23em;
  font-weight: 700;
  color: var(--main-color);
  text-decoration: none;
  background-color: #ffffff;
  border: solid 2px var(--main-color);
  border-radius: 2em;
  filter: drop-shadow(0 2px 1px rgba(35,24,21,0.35));
  cursor: pointer;
  transition: all 0.2s;
}
.area_button .button_normal:hover {
  opacity: 1;
  margin: 8px 0 0 0;
  filter: drop-shadow(0 0 0 transparent);
}

.area_button .button_text {
  text-align: center;
}
.area_button .button_text span {
  text-decoration: underline;
  color: #127FC4;
  cursor: pointer;
}

.area_button .button_disabled {
  margin: 8px 0 0 0;
  color: #A8A9AD;
  border-color: var(--color-black);
  filter: drop-shadow(0 0 0 transparent);
  cursor: auto;
}
.area_button .button_check label {
  display: inline-block;
  margin: 0.4em 0 0.8em 0;
}
.area_button .button_check input {
  transform: scale(1.4);
  margin: 0 0.2em 0.2em 0;
}

.area_button .button_wrapper + p {
  margin-top: 1em;
  text-align: center;
}

.area_button .button_close {
  display: block;
  margin: 0 20px;
  text-align: center;
  line-height: 2.4;
  font-size: 1.7em;
  font-weight: 700;
  color: #ffffff;
  text-decoration: none;
  background-color: #000000;
  border-radius: 3em;
  cursor: pointer;
}

@media screen and (min-width: 900px) {
.area_button {
  padding: 30px 0 20px 0;
}
}

/**********

**********/
.icon_arrow {
  margin: 0.7em 0;
  text-align: center;
  font-size: 1.77em;
  color: var(--main-color);
}
.icon_arrow.style_start_step3 {
  margin-top: -1.2em;
}

.area_use1 {
  max-width: 440px;
  margin: 10px auto;
}
.area_use1 .use1_content {
  display: flex;
  align-items: center;
}
.area_use1 .use1_content .content1 {
  flex-shrink: 0;
  width: 35%;
}
.area_use1 .use1_content figure {
  display: block;
}
.area_use1 .use1_content figcaption {
  display: inline-block;
  width: 6em;
  margin-top: -0.2em;
  padding: 0.3em;
  color: #ffffff;
  background-color: #EE721A;
  border-radius: 2em;
}
.area_use1 .use1_customer .content1 {
  padding: 0 10px;
}
.area_use1 .use1_customer .content2 .use1_fukidashi + P {
  margin: -0.5em 0 0 2em;
}
.area_use1 .use1_shop {
}
.area_use1 .use1_shop .content1 {
  padding-top: 1em;
}
.area_use1 .use1_shop figcaption {
  background-color: #23A5DE;
}
.area_use1 .use1_content2 {
  position: relative;
}
.area_use1 .use1_content2 .use1_shop + p {
  position: relative;
  z-index: 2;
  max-width: 16em;
  margin-right: 2em;
}
.area_use1 .use1_content2 picture {
  display: block;
  position: absolute;
  right: 2em;
  bottom: -1em;
  z-index: 1;
  width: 5.5em;
}

.area_use1 .use1_content .content2 {
  width: 100%;
}

.area_use1 .use1_content .use1_fukidashi {
  width: 100%;
  padding: 2em 0 2em 3em;
  font-weight: 700;
  background: url(./images/phase01/usage_fukidashi.svg) no-repeat left center;
  background-size: contain;
}
.area_use1 .use1_content .use1_fukidashi span {
  color: var(--main-color);
}


.wrapper_mascot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}
.wrapper_mascot .mascot_alley {
  flex-shrink: 0;
  width: 55px;
}
.wrapper_mascot .mascot_dunker {
  flex-shrink: 0;
  width: 52px;
}

.style_uchiwake {
  margin: 0 auto;
}
.style_uchiwake th {
  padding-right: 0.2em;
  vertical-align: top;
  white-space: nowrap; 
  font-weight: 400;
}
@media screen and (min-width: 900px) {
.style_uchiwake {
  margin: 0 auto;
}
}

.top {
  max-width: 600px;
  margin: 2em auto;
  padding: 0 10px;
  text-align: center;
  font-size: 1.23em;
  font-weight: 700;
  color: #ffffff;
}


table.app_normal {
  width: 100%;
  margin: 0.5em auto;
  border-top: solid 1px var(--color-black);
  border-collapse: collapse;
}
table.app_normal th {
  padding: 0.4em 1em;
  text-align: center;
  line-height: 1.2;
  font-size: 0.77em;
  font-weight: 400;
  color: #ffffff;
  background-color: var(--color-black);
  border-bottom: solid 1px #ffffff;
}
table.app_normal td {
  padding: 0.7em 0.4em;
  background-color: #ffffff;
  border-bottom: solid 1px var(--color-black);
}
table.app_normal tr:last-of-type th {
  border-bottom: solid 1px var(--color-black);
}


table.simple {
  margin: 2em auto 0.5em auto;
  border-collapse: collapse;
  border: solid 1px var(--main-color);
}
table.simple th {
  padding: 0.4em 1em;
  text-align: center;
  line-height: 1.2;
  color: #ffffff;
  background-color: var(--main-color);
  border-bottom: solid 1px #ffffff;
}
table.simple td {
  padding: 0.4em 1.5em 0.4em 0.7em;
  background-color: #ffffff;
  border-bottom: solid 1px var(--main-color);
}
table.simple tr:last-of-type th, 
table.simple tr:last-of-type td {
  border-bottom: none;
}

table.single {
  margin: 2em auto 0.5em auto;
  border-collapse: collapse;
  border: solid 1px var(--main-color);
}
table.single th {
  width: 15em;
  padding: 0.4em 1em;
  text-align: left;
  line-height: 1.2;
  font-weight: 400;
  color: #ffffff;
  background-color: var(--main-color);
  border-bottom: solid 1px #ffffff;
}
table.single td {
  padding: 0.4em 1.5em 0.4em 0.7em;
  background-color: #ffffff;
  border-bottom: solid 1px var(--main-color);
}
table.single tr:last-of-type th, 
table.single tr:last-of-type td {
  border-bottom: none;
}

@media screen and (max-width: 900px) {
table.single tbody,
table.single tr,
table.single th,
table.single td {
  display: block;
}
table.single th {
  width: auto;
}
}



table.normal {
  width: 100%;
  margin: 2em auto 0.5em auto;
  border-collapse: collapse;
  border: solid 2px var(--main-color);
}
table.normal th {
  padding: 0.2em 0.4em;
  text-align: center;
  line-height: 1.2;
  font-size: 1.2em;
  color: #ffffff;
  background-color: var(--main-color);
}
table.normal td {
  padding: 0.5em;
  background-color: #ffffff;
  border-bottom: dotted 2px var(--main-color);
}
table.gaiyou td {
  padding: 0.5em 0.7em 0.5em 1.7em;
  text-indent: -1em;
  font-size: 0.77em;
}
table.normal tr:last-of-type td {
  border-bottom: none;
}
table.normal .color_yellow {
  background-color: #FFFFA0;
}
table.normal .add_necessary:after {
  content: '必須';
  display: inline-block;
  padding: 0.1em 0.4em;
  margin-left: 0.4em;
  vertical-align: 0.1em;
  font-size: 0.77em;
  color: #ffffff;
  background-color: var(--main-color);
}
table.normal td a {
  color: inherit;
}

table.bunrui {
  width: 100%;
  max-width: 600px;
  margin: 0.7em 0 0.7em 1em;
  font-size: 0.77em;
  border-right: solid 1px #000000;
  border-bottom: solid 1px #000000;
  border-collapse: collapse;
}
table.bunrui th {
  padding: 0.2em 0;
  font-weight: 400;
  background-color: #FFFFA0;
  border-top: solid 1px #000000;
  border-left: solid 1px #000000;
}
table.bunrui td {
  padding: 0.5em;
  vertical-align: top;
  background-color: #ffffff;
  border-top: solid 1px #000000;
  border-left: solid 1px #000000;
}
table.bunrui td.bunrui_link {
  text-align: center;
  vertical-align: middle;
}


.summary_date {
  width: 100%;
  max-width: 600px;
  margin: 1.4em auto;
  border-collapse: collapse;
  border-left: solid 1px var(--main-color);
  border-top: solid 1px var(--main-color);
}
.summary_date th {
  width: 5.5em;
  padding: 0.7em 0;
  text-align: center;
  vertical-align: middle;
  font-weight: 700;
  background-color: #FFFFA0;
  border-right: solid 1px var(--main-color);
  border-bottom: solid 1px var(--main-color);
}
.summary_date td {
  padding: 0.7em;
  vertical-align: middle;
  background-color: #ffffff;
  border-right: solid 1px var(--main-color);
  border-bottom: solid 1px var(--main-color);
}
.summary_arrow {
  position: relative;
  z-index: 3;
  width: 3em;
  margin: -0.5em auto 1.5em auto;
  padding: 0.4em 0 0 0;
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--main-color);
}
.summary_arrow::before {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  left: -1em;
  bottom: -1em;
  border-top: solid 1.5em var(--main-color);
  border-right: solid 2.5em transparent;
  border-bottom: solid 1px transparent;
  border-left: solid 2.5em transparent;
}
.summary_arrow span {
  position: relative;
  z-index: 2;
}



ul.prize {
  list-style-type: none;
  padding: 0;
}
ul.prize li {
  position: relative;
  margin: 0;
  padding: 0.3em 0.3em 0.3em 2.5em;
  border-top: dotted 2px var(--main-color);
}
ul.prize li span {
  position: absolute;
  left:  0.3em;
  top:  0.3em;
  color: var(--main-color);
}



ul.merit_list {
  display: flex;
  justify-content: space-between;
  margin: 0;
  padding: 0;
}
ul.merit_list li {
  list-style-type: none;
  width: 31.7%;
  padding: 0.76em;;
  background-color: #ffffff;
  border-radius: 9px;
}
ul.merit_list picture {
  display: block;
  width: 60px;
  height: 60px;
  margin: 0 auto 0.5em auto;
}
ul.merit_list dl dt {
  margin-bottom: 0.4em;
  text-align: center;
  line-height: 1.2;
  font-size: 1.1em;
  font-weight: 700;
  color: var(--main-color);
}
ul.merit_list dl dd {
  text-align: justify;
  line-height: 1.3;
}

@media screen and (min-width: 900px) {
ul.merit_list {
}
ul.merit_list picture {
  width: 120px;
  height: 120px;
}
}


.area_join {
  padding-top: 1em;
}
.area_join .join_text {
  text-align: center;
}
.area_join .join_check {
  max-width: 280px;
  margin: 1em auto;
}
.area_join .join_check_inner {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  padding: 0.5em 1em 0.8em 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.6;
  font-size: 1.12em;
  background-color: #FFFFA0;
  border: solid 2px #000000;
  border-radius: 5px;
  cursor: pointer;
}
.area_join .join_check .checkbox {
  flex-shrink: 0;
  position: relative;
  width: 2.4em;
  height: 2.4em;
  margin: 1em;
  padding: 2px;
  background-color: #ffffff;
  border: solid 1px #000000;
  border-radius: 5px;
}
.area_join .join_check .checkbox img {
  opacity: 0;
  transition: all 0.2s;
}
.area_join .join_check.checked .checkbox img {
  opacity: 1;
}
.area_join .area_button {
  display: none;
  padding-bottom: 3em;
}
@media screen and (min-width: 500px) {
.area_join .join_check {
  max-width: 700px;
}
}

.area_support_start {
  text-align: center;
}
.area_support_start .title_support {
  font-size: 1.62em;
  font-weight: 700;
  color: #6AB82D;
}
.area_support_start .text_support {
  font-size: 1.31em;
  font-weight: 700;
}
.area_support_start .text_support span {
  color: #E71F19;
}
.area_support_start .link_support {
  font-size: 1.31em;
  font-weight: 700;
  color: #E71F19;
}






.area_forshop {
  padding: 15px 10px;
  background-color: var(--main-color);
  border: solid 4px #ffffff;
  border-radius: 10px;
}
.area_forshop .forshop_title {
  margin-bottom: 0.1em;
  text-align: center;
  line-height: 1;
  font-size: 3em;
  font-weight: 700;
/*  color: #ffffff;  -miura*/
}
.area_forshop .forshop_text {
  margin-top: 1em;
  text-align: center;
  color: #ffffff;
}
.area_forshop .forshop_title img {
  width: 200px;
  margin-bottom: 15px;
}


.tile_forshop {
  padding: 15px 10px;
  background-color: var(--main-color);
  border: solid 4px #ffffff;
  border-radius: 10px;
}
.tile_forshop .forshop_title {
  margin-bottom: 0.1em;
  text-align: center;
  line-height: 1;
  font-size: 2.8em;
  font-weight: 700;
  color: #ffffff;
}
.tile_forshop .forshop_title img {
  width: 200px;
  margin-bottom: 15px;
}
.tile_forshop .forshop_text {
  margin: 0.2em;
  text-align: justify;
  font-size: 1.3em;
  font-weight: 700;
  color: #ffffff;
}
.tile_forshop .area_button .button_normal {
  padding: 0.4em 0.1em;
}


.area_safety {
  margin: 20px 0;
  text-align: center;
  border: solid 2px #000000;
  border-radius: 15px;
  background-color: #FFFFA0;
}
.area_safety .safety_title {
  padding-top: 10px;
  font-size: 2em;
  font-weight: 700;
}
.area_safety .saety_text {
  width: calc(100% + 2px);
  margin-left: -1px;
  padding: 0.5em;
  font-size: 1.38em;
  color: #ffffff;
  background-color: #000000;
}
.area_safety ul {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
}
.area_safety ul li {
  position: relative;
  width: 50%;
  padding: 10px;
}
.area_safety ul li .newaista {
  position: absolute;
  top: 35%;
  right: 8%;
  width: 50%;
}
@media screen and (min-width: 500px) {
.area_safety ul li {
  width: calc(100% / 3);
}
}
@media screen and (min-width: 900px) {
.area_safety ul li {
  width: calc(100% / 6);
}
}





/**********
メイン
**********/
article p {
  margin: 0.8em 0;
  line-height: 1.5;
}
article a {
  text-decoration: underline;
}


/**********

**********/
.area_landing_top {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
}

.area_about {
  margin-bottom: 20px;
  padding: 30px 20px;
  background-color: #FFF3B8;
}
.area_about .area_about_inner {
  overflow: hidden;
  max-width: 1000px;
  margin: 0 auto;
}
.area_about .area_about_image {
  float: left;
  width: 100px;
  margin-right: 20px;
}
.area_about .area_about_title {
  float: left;
  width: calc(100% - 120px);
  margin-bottom: 0.3em;
  font-size: 1.4em;
  letter-spacing: 0.1em;
  border-bottom: solid 2px #000000;
}


/**********

**********/
:root {
  --point-color: #ee86a8;
  --point-sub-color: #fff0f5;
}
#point.point_disable {
  --point-color: #A8A9AD;
  --point-sub-color: #f4f4f4;
}
#point.error {
  display: block;
}
#point.error.hidden {
  display:none;
}
#point.error .wallet-point-total {
  text-align: center;
  width: auto;
  font-size: 1em;
  padding-top: 10px;
}
#point.error .wallet-point-total .text-small {
  font-size: 0.8em;
}
#point.error .point_total dd:after {
  display: none;
}
#point.error .point_total dd .area_button .button_normal {
  font-size: 1.23em;
  padding-right: 20px;
  width: 100%;
}
#point.error .point_total dd .area_button .button_normal i {
  transform: scale(0.6825);
  margin-bottom: -8px;
}
#point.error .point_sub {
  display: none;
}
.implement-icon-reload {
  display:inline-block;
  width:32px;
  height:32px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAA0lJREFUWEfFl89LFGEYx7/P+666K2Ia1kIgQUKUBZ4jqkNk0TVYyNqgP8G0qFOeFDJDunmJcMHSuhVhCF3sEnRIKihNC5Sk0lZt23XXnfeJd3RkdnZm3XVHmus7876f9/t8nx9D+M8PlXM+j4zIhS+pJknBC8zcBMVKAOOJavm08VokVczeZQEs9TyvV5wYBNAKoHLjQAPALCAmiY1HiZAcLgSzEwD2ixsM/hQIyM65JF4d6YpknKqUBaBDkJgRh9aMbC8Ip20q5EAQMG2AYipD/Xu7Ign7YlkA1kYaZGnaaAxAHsiATwjGKQYfdwAlmPiukZZ9dghXAL1hfEocAa09JFBWVqrztZ1tC8WYSr+z+b3IDoJxFIDc+DYPIg/gZ9dIjaziDmLuBFBDoF9Z5nMN78QEPYlogxX1WBkiKHiZmNv1XgDyPLEJ4BXP7QJYlM4LaQgCJmSlOqtVNQF44G3FSnym1VAqBqA+1yTbU8DuD6dRmXkFoOvJkIiRC2GOxOUqYHliYSrdIlHxEoQGuwr0u/vxM0ch8R1Ab7h4/0Ut/V3pBSMKIARwXAoZpcWe4duW4dzc5YcCHmE2M4K0+Ra/qoNkoIOAtnU6+7NOOreKMbdKVlRKbKSmPQzEyCjwmGnC2fZ7oeqGfVEi3AGwaycA9J6O3iF1NpgA+UaklIIaE6AzAK/6oUCJABwnRVelCHw2lDqcqMZose21UEicRmTGD48Q+BN3J8x894M9QVSPMtCi1zZD4FKIXBtHsYbzei/RPxROJ4WOezjHhGbdthUKa1EKFa27dSle7sHuRqcUmGObvcDpUIA/Upau1L0XH0ppQl6wnoXI+sCZin6q4NZrtAGroFpyuqE5A+T2cF+84DCfzGlGdslcCpJRbijypXdpx4Va50bn8pzpvGLuPS/mpnjeRFTKOOV5uPd8sfVIZvVvFz/oJT2SfWPGuFT8WlVhcj4p3zQ3w9h6KF1PO0hxY/fNyLIF7zkVF1DCfnGDYZbTsG3wzBPGbjpnSS84lnsMlqXUJX9+TGwgF8HcRkBToRuboWJMCuK+P0E55OuvmYZJT8v9KZU5yYKOmQMMI8yE71A0C4FlI00Dzj8gL9l8+TMqJSbOd/8B+k2meXQLGLUAAAAASUVORK5CYII=');
}

.area_point {
  overflow: hidden;
  width: 100%;
  max-width: 1000px;
  margin: 15px auto;
  font-weight: 700;
}
.area_point dl.point_total {
  width: 100%;
  text-align: center;
}
.area_point dl.point_total dt {
  padding: 0.2em;
  color: var(--point-color);
  border: solid 2px var(--point-color);
  border-radius: 0.8em 0.8em 0 0;
}
.area_point dl.point_total dd {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: baseline;
  padding: 0.2em;
  color: #ffffff;
  background-color: var(--point-color);
}
.area_point dl.point_total dd span {
  display: inline-block;
  width: 4.1em;
  text-align: right;
  font-size: 3em;
}

.area_point dl.point_sub {
  display: flex;
  justify-content: center;
  padding: 0.2em 1em;
  align-items: center;
  text-align: right;
  color: var(--point-color);
  background-color: #ffffff;
  border: solid 2px var(--point-color);
  border-bottom: none;
}
.area_point dl.point_sub_buttom {
  border-bottom: solid 2px var(--point-color);
  border-radius: 0 0 0.8em 0.8em;
}
.area_point dl.point_sub dt {
  width: 6em;
  font-size: 1em;
}
.area_point dl.point_sub dd span {
  display: inline-block;
  width: 3.5em;
  font-size: 1.8em;
}

.area_point dl dd:after {
  content: 'ポイント';
  display: inline-block;
  width: 80px;
  margin-left: 0.2em;
  text-align: left;
}
.area_point dl.point_total dd:after {
  font-size: 1.2em;
}
.area_point dl.point_sub dd:after {
  font-size: 1em;
}

.area_point .point_time {
  padding: 0.4em 1em;
  text-align: center;
  border: solid 2px var(--point-color);
  border-radius: 0 0 0.8em 0.8em;
}
.area_point .point_add {
  margin: 0.5em 0 0 1em;
  text-indent: -1em;
  font-weight: 400;
  font-size: 0.77em;
}

.area_point_priod {
  margin: 0.7em auto;
  padding: 0.5em;
  text-align: center;
  background-color: var(--point-sub-color);
}
.area_point_priod .box_title {
  margin-bottom: 0.2em;
  font-weight: 700;
  color: var(--point-color);
}
.area_point_priod .box_text {
  font-weight: 500;
  color: var(--point-color);
}
.area_point_error {
  display: none;
  text-align: center;
  font-weight: 700;
  color: #ff0000;
}
.point_disable .area_point_error {
  display: block;
}

@media screen and (min-width: 600px) {
.area_point {
  max-width: 800px;
  margin: 0 auto;
  border: none;
}
.area_point dl.point_total {
  margin-bottom: 1em;
}
.area_point dl.point_total dt {
  padding: 0.6em;
  color: #ffffff;
  background-color: var(--point-color);
  border-bottom: dotted 2px #ffffff;
}
.area_point dl.point_total dd {
  border-radius: 0 0 10px 10px;
}
  
  
.area_point dl.point_sub {
  display: block;
  float: left;
  width: 49%;
  padding: 0;
  margin-bottom: 1em;
  text-align: center;
  border: solid 2px var(--point-color);
  border-radius: 0.8em;
}
.area_point dl.point_sub:last-of-type {
  float: right;
}
.area_point dl.point_sub dt, 
.area_point dl.point_sub dd {
  width: 100%;
}
.area_point dl.point_sub dt {
  padding: 0.5em;
}
.area_point dl.point_sub dd {
  padding: 0 0.5em;
  font-size: 1.4em;
  border-top: dotted 2px var(--point-color);
  border-radius: 0 0 10px 10px;
}
.area_point dl.point_sub dd:after {
  display: block;
  width: auto;
  text-align: center;
  font-size: 0.8em;
}

.area_point .point_time {
  clear: both;
  margin-top: 1em;
  border-radius: 0.8em;
}
}


.area_infolist {
  position: relative;
  width: 100%;
  max-width: 1000px;
  margin: 15px auto;
  font-size: 0.77em;
}
.area_infolist_title {
  position: relative;
  padding: 0.5em 10px;
  line-height: 1;
  font-size: 1.5em;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--main-color);
  border-radius: 10px 10px 0 0;
}
.area_infolist ul {
  list-style-type: none;
  margin: 0;
  padding-left: 0;
  border: solid 2px var(--main-color);
  border-radius: 0 0 10px 10px;
}
.area_infolist ul li {
  position: relative;
  margin: 0.9em 10px;
  padding-left: 7.5em;
}
.area_infolist ul time {
  position: absolute;
  left: 0;
  display: inline-block;
}
.area_infolist ul div {
  margin-top: 0.7em;
}
.area_infolist ul .news_title {
  text-decoration: underline;
  cursor: pointer;
}
.area_infolist ul .news_title + div {
  display: none;
}
.area_infolist ul div p + P {
  margin-top: 1em;
}


.area_infolist .area_infolist_button {
  position: absolute;
  right: 1.2em;
  top: 0.6em;
  width: 1.2em;
  height: 1.2em;
  transition: all 0.3s;
  transform-origin: center 70%;
  cursor: pointer;
}
.area_infolist .area_infolist_button span {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  width: 100%;
  height: 100%;
  border-right: solid 3px #ffffff;
  border-bottom: solid 3px #ffffff;
  transform: rotate(45deg);
}
.area_infolist .accordion_open {
  transform: rotate(180deg);
}
.area_infolist ul li.info_hidden {
  display: none;
}


/**********

**********/
.area_tile {
  position: relative;
  max-width: 1040px;
  margin: 3em auto;
}
.item_tile {
  display: flex;
  justify-content: center;
  position: relative;
}
.item_tile_space {
  margin-bottom: 3em;  
}

.item_tile_button {
  position: absolute;
  left: 10%;
  width: 80%;
  margin: 1em auto;
}
.position_top .item_tile_button {
  top: 5%;
}
.position_center .item_tile_button {
  top: 50%;
  margin-top: -1.4em;
}
.position_bottom .item_tile_button {
  bottom: 5%;
}
.item_tile_button a {
  display: block;
  width: 100%;
  padding: 0.4em 1em;
  text-align: center;
  line-height: 1.2;
  font-size: 2.8em;
  font-weight: 700;
  text-decoration: none;
  border: solid 5px #ffffff;
  border-radius: 1em;
  filter: drop-shadow(0 5px 3px rgba(0,0,0,0.35));
}

.item_tile .item_tile_button_maru a {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: 500;
}

@media screen and (max-width: 900px) {
.item_tile_button {
  padding: 5px 20px;
}
.item_tile_button a {
  font-size: 4.4vw;
}
}


.area_plan {
  overflow: hidden;
}
.area_plan .area_plan_image {
  margin: 20px 0 50px 0;
  text-align: center;
}
.area_plan .area_plan_button {
  margin: 30px 0;
  padding: 0 50px;
  text-align: center;
}

@media screen and (max-width: 700px) {
.area_plan .area_plan_button {
  margin: 20px 0;
  padding: 0 10px;
}
}

.area_howto {
  overflow: hidden;
}
.area_howto .area_howto_top {
  margin-bottom: 50px;
  padding-bottom: 0.4em;
  text-align: center;
  font: 500 3em/1.4 'M PLUS Rounded 1c', sans-serif;
  border-bottom: solid 4px #000000;
}
.area_howto .area_howto_top img {
  width: 100%;
  max-width: 600px;
  margin-bottom: 0.4em;
}

.area_howto .hanabar_flow {
  text-align: center;
}
.area_howto .hanabar_flow .hanabar_step {
  padding: 0 20px;
  text-align: center;
}

@media screen and (max-width: 700px) {
.area_howto .area_howto_top {
  font-size: 6vw;
}
}



/**********

**********/
article.page_normal {
  max-width: 1040px;
  padding: 0 20px;
  margin: 3em auto;
}
article.page_normal a {
  color: #0068B7;
}


article.page_normal .style_col2 table {
  width: 100%;
  margin: 1em 0;
  border-collapse: collapse;
  border-top: solid 1px var(--color-black);
  border-bottom: solid 1px var(--color-black);
}
article.page_normal .style_col2 td {
  padding: 0.7em 1.4em;
}
article.page_normal .style_col2 td:first-of-type {
  vertical-align: top;
  white-space: nowrap;
  text-align: left;
  font-weight: 400;
  color: #ffffff;
  background-color: var(--color-black);
  border-bottom: solid 1px #ffffff;
}
article.page_normal .style_col2 tr:last-of-type td:first-of-type {
  border-bottom: solid 1px var(--color-black);
}
article.page_normal .style_col2 td {
  border-bottom: solid 1px var(--color-black);
}

@media screen and (max-width: 450px) {
article.page_normal .style_col2 table, article.page_normal .style_col2 td {
  display: block;
  border: none;
}
article.page_normal .style_col2 td {
  margin-bottom: 0.7em;
}
article.page_normal .style_col2 td:first-of-type {
  white-space: normal;
  margin-bottom: 0;
}
article.page_normal .style_col2 td:first-of-type br {
  display: none;
}
}


.area_term {
  display: block;
  margin-bottom: 4em;
}
.area_term:last-of-type {
  margin-bottom: 0 !important;
}
.area_term .s_head {
  padding: 0.2em 1em 0.1em 1em;
  text-align: center;
  font-size: 2em;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--color-black);
}
.area_term .s_title {
  margin: 1.4em 0 0 0;
  font-size: 1.4em;
  font-weight: 700;
}
.area_term .s_sign {
  margin-top: 2em;
}

.area_term ul.list_nopoint {
  list-style-type: none;
  padding-left: 0;
}
.area_term ul > li {
  margin-bottom: 1.4em;
}
.area_term .style_subtext {
  display: inline-block;
  margin-left: 1em;
}
.area_term table {
  margin: 1em 0 2em 0;
}
.area_term table td{
  padding: 0.2em 2em 0.2em 0; 
  font-size: 0.8em;
}

.style_indent {
  display: inline-block;
  margin-left: 1em;
  text-indent: -1em;
}

/**********

**********/
.area_teaser {
  background-color: #FDF3F7;
}
.area_content {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2em 1em;
}

.block_title {
  text-align: center;
  font-weight: 700;
}
.block_title .logomark {
  margin: 1em 0 1em 3.4em;
}

.area_teaser .teaser_p1 {
  margin-top: 1.5em;
  text-align: center;
  font-weight: 700;
}
.area_teaser .teaser_p1 span {
  font-size: 1.4em;
}
.area_teaser .teaser_p1 strong {
  font-size: 1.7em;
}
.area_teaser .teaser_p1 font {
  color: #ff0000;
}

.area_teaser .teaser_p2 {
  margin-top: 0.5em;
  text-align: center;
  font-size: 0.5em;
}

.area_teaser .teaser_p3 {
  margin: 1.5em 0;
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  color: #ff0000;
}

.area_teaser .teaser_p4 {
  margin: 0.7em 0;
  padding-bottom: 0.7em;
  border-bottom: solid 1px #000000;
}

.area_teaser .teaser_btn {
  display: block;
  width: 100%;
  max-width: 350px;
  margin: 2em auto 1em auto;
  text-align: center;
  line-height: 2.4;
  font-size: 1.4em;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--main-color);
  border-radius: 2em;
}
.area_teaser .btn_disable {
  color: #F3B0CE;
}

.area_teaser ul {
  margin: 0;
  padding: 0 1em;;
  list-style-type: none;
  display: flex;
  justify-content: space-between;
}
.area_teaser ul li {
  width: 30%;
}
.area_teaser ul li picture {
  flex-shrink: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 5.2em;
  height: 5.2em;
  margin: 1em auto;
  padding: 1.2em;
  background-color: var(--main-color);
  border-radius: 100%;
}
.area_teaser ul li picture img {
  object-fit: contain;
  width: 4em;
  height: 4em;
}
@media screen and (max-width: 600px) {
.area_teaser ul {
  display: block;
}
.area_teaser ul li {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin: 1.5em 0;
}
.area_teaser ul li picture {
  width: 7em;
  height: 7em;
  margin: 0 1.2em 0 0;
  padding: 1.5em;
}
.area_teaser ul li picture img {
  width: 5.6em;
  height: 5.6em;
}
}

/**********

**********/
.page_title {
  text-align: center;
  font-size: 2em;
  font-weight: 700;
}

/*---------------------------------------------
youtube
---------------------------------------------*/
.area_movie {
  width: 100%;
  max-width: 560px;
  margin: 10px auto;
}
.area_movie .youtube {
	position: relative;
  width: 100%;
	height: 0 ;
  margin: 1.5em auto 0 auto;
  padding-top: 56.25%;
}
.area_movie .youtube iframe{
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
}

/**********
メンテナンス画面
**********/
.maintenance .content {
  padding: 2em;
  text-align: center;
}
.maintenance_title {
  font-size: 1.8em;
  font-weight: 700;
}
.maintenance_date {
  max-width: 600px;
  margin: 1em auto !important;
  padding: 0.5em;
  font-size: 1.3em;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--main-color);
  border-radius: 0.5em;
}
.maintenance .maintenance_text {
}

.content_top {
  margin-top: 100px;
}


/**********
エラー画面（Not Found、汎用エラー）
**********/
body.area_error {
  background-color: var(--sub-color);
}
.area_error .content {
  padding: 2em;
  text-align: center;
}
.area_error .error_title {
  margin-bottom: 1em;
  font-size: 1.8em;
  font-weight: 700;
}
.area_error .error_title img {
  margin-bottom: 1em;
}
.area_error .error_subtitle {
  margin-bottom: 0.5em;
  padding-bottom: 0.5em;
  font-weight: 700;
  border-bottom: solid 1px var(--color-black);
}
.area_error .error_text {
  margin-bottom: 2em;
}


/**********
規約
**********/
.terms .term {
  padding-left: 1em
}
.terms .term p + p {
  margin-top: 0.1em;
}
.terms .term .term_title {
  margin: 1.5em 0 0 -1em;
}
.terms .term .term_title_sub {
  margin: 1em 0 0 -1em;
}
.terms .term > P:not(.term_title) {
  text-indent: 1em;
}

.terms ol {
  counter-reset: li;
	list-style: none;
	margin: 0.1em 0 0.5em 0;
}
.terms li {
	list-style: none;
  position: relative;
	margin: 0.1em 0 0.5em 0.5em;
  font-feature-settings: "fwid";
  font-feature-settings: "palt";
  margin-bottom: 0.1em;
}
.terms ul > li:before {
	content: '・';
  position: absolute;
	top: 0;
	right: 100%;
}
.terms ol.list_second > li:before, 
.terms ol.list_kana > li:before, 
.terms ol.list_lalpha > li:before {
	counter-increment: li;
  position: absolute;
	top: 0;
	right: 100%;
  text-align: right;
}
.terms ol.list_second > li {
  margin-left: 2em;
}
.terms ol.list_kana > li {
  margin-left: 1em;
}
.terms ol.list_second > li:before {
	content: '（'counter(li)'）';
}
.terms ol.list_kana > li:before {
	content: counter(li,katakana)'）';
}
.terms ol.list_lalpha > li:before {
	content: counter(li,lower-alpha)'）';
}

.terms .term table {
  margin: 1em 0 1em -1em;
}
.terms .term table td {
  padding-left: 0.7em;
  word-break: break-all;
}
.terms .term table td:nth-of-type(2) {
  max-width: 30vw;
}
.terms .term table td:nth-of-type(3) {
  min-width: 3em;
}

/**********
FAQ
**********/
.faq .faq_title {
  margin-top: 1.5em;
  font-size: 1.23em;
  font-weight: 700;
}
.faq .faq_title_sub {
  margin-top: 1.5em;
  font-size: 1.23em;
}
.faq dl {
  margin-top: 1.4em;
  font-feature-settings: "fwid";
  font-feature-settings: "palt";
}
.faq dl dt {
  display: flex;
  font-size: 1.23em;
  font-weight: 700;
  color: var(--main-color);
}
.faq dl dt:before {
	content: "Q"attr(data-number)".";
}
.faq dl dd {
  display: none;
  margin-top: 0.2em;
  padding-left: 2em;
}
.faq_single dl dd {
  display: block;
}
.faq dl ol {
  margin-left: 1.2em;
}
.faq p#forshop {
  margin-top: 1.5em;
  padding-top: 1.5em;
  text-align: left;
}
.faq dl[id]:before {
content:'';
display: block;
height: 110px;
margin-top:-110px;
}

/**********
GDPR
**********/
.gdpr-area_modal .gdpr-modal_content {
  padding: 20px !important;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif" !important;
} 
.gdpr-area_modal .gdpr-modal_content .gdpr-mypage_text a {
  color: var(--main-color) !important;
}
.gdpr-area_content .gdpr-area_button {
  margin: 1em 0 0 0 !important;
}
.gdpr-area_content .gdpr-area_button * {
  background-color: var(--main-color) !important;
  border:none !important;
}
@media screen and (max-width: 500px) {
.gdpr-area_modal {
  padding: 10px !important;
}
.gdpr-area_modal .gdpr-modal_content {
  width: auto !important;
}
}



/**********
アプリ用
**********/
.area_app, .area_payment {
  width: 100%;
  font-family: 'Roboto', 'Noto Sans JP', sans-serif;
  color: var(--color-black);
  background-color: #ffffff;
  
  font-feature-settings: "fwid";
  font-feature-settings: "palt";
}

.area_app {
  overflow: hidden;
  padding: 0 25px;
}
.area_app, .area_modal {
  font-size: 13px;
}
@media screen and (min-width: 500px) {
.area_app, .area_modal {
  font-size: 16px;
}
}
@media screen and (min-width: 900px) {
.area_app, .area_modal {
  font-size: 18px;
}
}

.content_app, .payment_content {
  max-width: 600px;
  margin: 10px auto 20px auto;
  background-color: #ffffff;
}
@media screen and (min-width: 900px) {
.content_app, .payment_content {
  max-width: 800px;
}
}

.content_app .title_app_h1 {
  padding: 0.5em 1em;
  color: #ffffff;
  background-color: var(--main-color);
  border-radius: 0.4em;
}

/* ポイント支払い
**************/
.content_app .box_payment {
  margin-top: 0.7em;
}
.content_app .box_payment .input_wrapper {
  width: 100%;
  padding-top: 1em;
  text-align: center;
  color: #d3d3d3;
  border-bottom: solid 2px #d3d3d3;
}
.content_app .box_payment .input_wrapper:after {
  content: 'ポイント';
  margin-left: 0.2em;
  font-size: 1.5em;
  font-weight: 700;
}
.content_app .box_payment input {
  width: 3.5em;
  text-align: right;
  font-size: 3.2em;
  font-weight: 700;
  border: none;
}
.content_app .box_payment input::placeholder {
  color: #d3d3d3;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  margin: 0;
  -webkit-appearance: none;
}
input[type=number] {
  -moz-appearance: textfield;
}

.area_payment {
  position: relative;
  padding: 25px 25px 0 25px;
  font-size: 13px;
}
.area_payment:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: calc( 100% - 25px );
  background-color: var(--main-color);
}
.area_payment .payment_content {
  padding: 15px 0;
  border: solid 2px var(--main-color);
  background-color: #ffffff;
  border-radius: 0.8em;
  filter: drop-shadow(0 2px 1px rgba(35,24,21,0.35));
}
.area_payment .payment_content .payment_content_point {
  margin-bottom: 0.5em;
  text-align: center;
  font-size: 1.5em;
  font-weight: 700;
}
.area_payment .payment_content .payment_content_point .style_point {
  font-size: 2.5em;
}
.area_payment .payment_content .payment_content_point img {
  width: 180px;
  margin-bottom: 0.5em;
}


/* 要素
**************/
.area_app_box {
  margin: 0.7em auto;
  text-align: center;
}
.area_app_box .box_title {
  margin-bottom: 0.2em;
  font-weight: 700;
}
.area_app_box .box_text {
  font-weight: 500;
}

.style_back_pink {
  padding: 0.5em;
  background-color: var(--sub-color);
}
.style_point {
  display: inline;
  padding-right: 0.1em;
  font-size: 1.4em;
  font-weight: 700;
}

.box_fukidashi {
  position: relative;
  margin-bottom: 1.2em;
  padding: 0.5em;
  text-align: center;
  font-size: 1.4em;
  font-weight: 700;
  color: #ffffff;
  background-color: var(--main-color);
}
.box_fukidashi:after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -1.2em;
  margin-left: -0.5em;
  border: solid 0.5em transparent;
  border-top: solid 1em var(--main-color);
}

.text_error {
  font-size: 1.2em;
  font-weight: 700;
  color: #ff0000;
}

/* ダイアログ
**************/
.area_modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 100;
  width: 100vw;
  height: 100vh;
  padding: 10px;
}
.area_modal .modal_box_inner {
}
.area_modal .modal_back {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 110;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0,0,0,0.3);
}
.area_modal .modal_box {
  overflow-y: hidden; 
  position: relative;
  z-index: 120;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  max-height: calc( 100vh - 20px );
  background-color: #ffffff;
  transition: all 0.5s;
}

.area_modal .modal_box .modal_box_title {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1em;
  text-align: center;
  line-height: 1;
  font-size: 1.2em;
  font-weight: 700;
}
.area_modal .modal_box .title_error {
  color: #ff0000;
}
.area_modal .modal_box .title_error:before {
  content: url("images/icon_exclamation_red.svg");
  margin-right: 0.4em;
}
.area_modal .modal_box .title_check {
  color: var(--color-black);
}
.area_modal .modal_box .title_check:before {
  content: url("images/icon_check_circle.svg");
  margin-right: 0.4em;
}
.area_modal .modal_box .modal_text {
  margin-top: 1em;
}

/* ダイアログ テスト用
**************/
.area_modal_test {
}
.area_modal_test .modal_box {
  overflow-y: scroll; 
}

/* 
**************/
.forshop_merit {
	display: flex;
	justify-content: center;
	padding: 1em;
  background-color: #ffffff;
  border: solid 3px var(--main-color);
}
.forshop_merit li {
  padding-left: 2em;
	font-weight: 700;
  background: url("images/checkbox01.png") no-repeat left 0.4em;
  list-style-type: none;
}
.forshop_merit strong {
	font-size: 1.2em;
  color: var(--main-color);
}

@media screen and (max-width: 900px) {
.forshop_merit li {
  padding-left: 1.5em;
  background-size: 1.2em auto;
}
}