@charset "UTF-8";

/*! destyle.css v3.0.0 | MIT License | https://github.com/nicolas-cusan/destyle.css */

/* Reset box-model and set borders */
/* ============================================ */

*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
}

::placeholder {
  color: #ddd;
  font-size: 15px;
}

/* フォーカス時　アウトライン消し */
*:focus {
  outline: none;
}

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

/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
* 3. Remove gray overlay on links for iOS.
*/

/* アドビフォント 指定時こちらからコピペ */
/*

font-family: "yu-gothic-pr6n", sans-serif;
font-weight: 400;
font-style: normal;

font-family: shippori-mincho, sans-serif;
font-style: normal;
font-weight: 400;

font-family: natalya, sans-serif;
font-style: normal;
font-weight: 400;


明朝指定
font-family: '游明朝','Yu Mincho',YuMincho,'Noto Serif JP',serif;

font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", 'Noto Sans JP', sans-serif;

font-family: 'Inter', sans-serif;
font-family: 'Mrs Saint Delafield', cursive;
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', serif;


*/

/* アドビフォント 指定時こちらからコピペ */

@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&family=Playfair+Display:wght@400;500;600;700;800;900&display=swap");

html {
  font-family: "Noto Sans JP", sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

html {
  font-size: 14px;
  line-height: 21px; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -webkit-tap-highlight-color: transparent; /* 3*/
  color: #000000;
  font-weight: 400;
  height: 100%;
}

/* Sections */
/* ============================================ */

/**
* Remove the margin in all browsers.
*/

body {
  margin: 0 auto !important;
  max-width: 768px !important;
  min-width: 320px !important;
  background: #ffffff;
  height: 100%;
}

/**
* Render the `main` element consistently in IE.
*/

main {
  display: block;
}

/* Vertical rhythm */
/* ============================================ */

p,
table,
blockquote,
address,
pre,
iframe,
form,
figure,
dl {
  margin: 0;
}

/* Headings */
/* ============================================ */

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  margin: 0;
}

/* Lists (enumeration) */
/* ============================================ */

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

/* Lists (definition) */
/* ============================================ */

dt {
  font-weight: bold;
}

dd {
  margin-left: 0;
}

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

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

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
  border-top-width: 1px;
  margin: 0;
  clear: both;
  color: inherit;
}

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

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

address {
  font-style: inherit;
}

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

/**
* Remove the gray background on active links in IE 10.
*/

a {
  background-color: transparent;
  text-decoration: none;
  color: inherit;
}

/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Replaced content */
/* ============================================ */

/**
* Prevent vertical alignment issues.
*/

svg,
img,
embed,
object,
iframe {
  vertical-align: bottom;
}

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

/**
* Reset form fields to make them styleable.
* 1. Make form elements stylable across systems iOS especially.
* 2. Inherit text-transform from parent.
*/

input[type="text"],
optgroup,
select,
textarea {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 8px;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
  background: #ffffff;
}

button {
  -webkit-appearance: none; /* 1 */
  appearance: none;
  vertical-align: middle;
  color: inherit;
  font: inherit;
  background: transparent;
  padding: 0;
  margin: 0;
  border-radius: 0;
  text-align: inherit;
  text-transform: inherit; /* 2 */
  border: none;
}

/**
* Reset radio and checkbox appearance to preserve their look in iOS.
*/

[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}

[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}

/**
* Correct cursors for clickable elements.
*/

button,
[type="button"],
[type="reset"],
[type="submit"] {
  cursor: pointer;
  -webkit-appearance: none; /* 1 */
  appearance: none;
}

button:disabled,
[type="button"]:disabled,
[type="reset"]:disabled,
[type="submit"]:disabled {
  cursor: default;
}

/**
* Improve outlines for Firefox and unify style with input elements & buttons.
*/

:-moz-focusring {
  outline: auto;
}

select:disabled {
  opacity: inherit;
}

/**
* Remove padding
*/

option {
  padding: 0;
}

/**
* Reset to invisible
*/

fieldset {
  margin: 0;
  padding: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/

progress {
  vertical-align: baseline;
}

/**
* Remove the default vertical scrollbar in IE 10+.
*/

textarea {
  overflow: auto;
}

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

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
* 1. Correct the outline style in Safari.
*/

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

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

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Fix font inheritance.
*/

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

/**
* Clickable labels
*/

label[for] {
  cursor: pointer;
}

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

/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/

details {
  display: block;
}

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

summary {
  display: list-item;
}

/*
* Remove outline for editable content.
*/

[contenteditable]:focus {
  outline: auto;
}

/* Tables */
/* ============================================ */

/**
1. Correct table border color inheritance in all Chrome and Safari.
*/

table {
  border-color: inherit; /* 1 */
}

caption {
  text-align: left;
}

td,
th {
  vertical-align: top;
  padding: 0;
}

th {
  text-align: left;
  font-weight: bold;
}

/* ============================================ 
汎用
/* ============================================ */

.w100 {
  width: 100% !important;
}

img {
  width: 100%;
}

/* 汎用　margin　padding ―――――――*/

.u-m0 {
  margin: 0px !important;
}

.u-m5 {
  margin: 5px !important;
}

.u-m8 {
  margin: 8px !important;
}

.u-m10 {
  margin: 10px !important;
}

.u-m20 {
  margin: 20px !important;
}

.u-m30 {
  margin: 30px !important;
}

.u-m40 {
  margin: 40px !important;
}

/* 汎用　padding０　右　左　上　下―――――――*/

.u-p0-r {
  padding-right: 0px !important;
}

.u-p0-l {
  padding-left: 0px !important;
}

.u-p0-t {
  padding-top: 0px !important;
}

.u-p0-b {
  padding-bottom: 0px !important;
}

/* 汎用　padding０　右　左　上　下―――――――*/

/* 汎用　padding　上―――――――*/
.u-p0 {
  padding: 0px !important;
}

.u-p8 {
  padding: 8px !important;
}

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

.u-pt12 {
  padding-top: 12px !important;
}

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

.u-pt24 {
  padding-top: 24px !important;
}

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

.u-pt36 {
  padding-top: 36px !important;
}

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

.u-pt48 {
  padding-top: 48px !important;
}

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

.u-pt60 {
  padding-top: 60px !important;
}

/* 汎用　padding０　右　左　上　下―――――――*/

.u-p0-r {
  padding-right: 0px !important;
}

.u-p0-l {
  padding-left: 0px !important;
}

.u-p0-t {
  padding-top: 0px !important;
}

.u-p0-b {
  padding-bottom: 0px !important;
}

/* 汎用　padding０　右　左　上　下―――――――*/

.u-p5-l {
  padding-left: 5px !important;
}

.u-p10-l {
  padding-left: 10px !important;
}

.u-p5-r {
  padding-right: 5px !important;
}

.u-p10-r {
  padding-right: 10px !important;
}

.u-p12-r {
  padding-right: 12px !important;
}

.u-p15-r {
  padding-right: 15px !important;
}

/* 汎用　padding　下―――――――*/

.u-pb0 {
  padding-bottom: 0px !important;
}

.u-pb6 {
  padding-bottom: 6px !important;
}

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

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

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

.u-pb60 {
  padding-bottom: 60px !important;
}

/* 汎用　padding　上―――――――*/
.u-p0 {
  padding: 0px !important;
}

.u-pt0 {
  padding-top: 0px !important;
}

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

.u-pt6 {
  padding-top: 6px !important;
}

.u-pt8 {
  padding-top: 8px !important;
}

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

.u-pt28 {
  padding-top: 28px !important;
}

.u-pt60 {
  padding-top: 60px !important;
}

/* 汎用　padding　―――――――*/

.u-p5 {
  padding: 5px !important;
}

.u-p10 {
  padding: 10px !important;
}

.u-p20 {
  padding: 20px !important;
}

.u-p30 {
  padding: 30px !important;
}

.u-p40 {
  padding: 40px !important;
}

/* 汎用　margin-top　―――――――*/

.u-mt0 {
  margin-top: 0 !important;
}

.u-mt5 {
  margin-top: 5px !important;
}

.u-mt8 {
  margin-top: 8px !important;
}

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

.u-mt12 {
  margin-top: 12px !important;
}

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

.u-mt18 {
  margin-top: 18px !important;
}

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

.u-mt24 {
  margin-top: 24px !important;
}

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

.u-mt28 {
  margin-top: 28px !important;
}

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

.u-mt35 {
  margin-top: 35px !important;
}

.u-mt36 {
  margin-top: 36px !important;
}

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

.u-mt48 {
  margin-top: 48px !important;
}

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

.u-mt60 {
  margin-top: 60px !important;
}

.u-mt80 {
  margin-top: 80px !important;
}

.u-mt88 {
  margin-top: 88px !important;
}

/* 汎用　margin-top マイナス　―――――――*/

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

.u-mt_25 {
  margin-top: -25px !important;
}

.u-mt_64 {
  margin-top: -64px !important;
}
/* 汎用　margin-bottom　―――――――*/

.u-mb0 {
  margin-bottom: 0 !important;
}

.u-mb4 {
  margin-bottom: 4px !important;
}

.u-mb5 {
  margin-bottom: 5px !important;
}

.u-mb8 {
  margin-bottom: 8px !important;
}

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

.u-mb12 {
  margin-bottom: 12px !important;
}

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

.u-mb16 {
  margin-bottom: 16px !important;
}

.u-mb18 {
  margin-bottom: 18px !important;
}

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

.u-mb24 {
  margin-bottom: 24px !important;
}

.u-mb25 {
  margin-bottom: 25px !important;
}

.u-mb28 {
  margin-bottom: 28px !important;
}

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

.u-mb32 {
  margin-bottom: 32px !important;
}

.u-mb36 {
  margin-bottom: 36px !important;
}

.u-mb38 {
  margin-bottom: 38px !important;
}

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

.u-mb42 {
  margin-bottom: 42px !important;
}

.u-mb44 {
  margin-bottom: 44px !important;
}

.u-mb46 {
  margin-bottom: 46px !important;
}

.u-mb48 {
  margin-bottom: 48px !important;
}

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

.u-mb54 {
  margin-bottom: 54px !important;
}

.u-mb56 {
  margin-bottom: 56px !important;
}

.u-mb58 {
  margin-bottom: 58px !important;
}

.u-mb60 {
  margin-bottom: 60px !important;
}

.u-mb64 {
  margin-bottom: 64px !important;
}

.u-mb70 {
  margin-bottom: 70px !important;
}

/* 汎用　margin-bottom　マイナスマージン ―――――――*/

.u-mb-70 {
  margin-bottom: -70px !important;
}

/* 汎用　margin-left　―――――――*/
.u-pl10 {
  padding-left: 10px !important;
}

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

.u-pl16 {
  padding-left: 16px !important;
}

/* 汎用　margin　左右　auto　―――――――*/

/* 汎用　margin　左右　auto　―――――――*/

.u-mauto {
  margin: auto !important;
}

/* テキスト　寄せ　―――――――*/
.tex_just {
  text-align: justify;
}

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

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

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

/* テキスト　太さ　―――――――*/

.b {
  font-weight: bold !important;
}

.fw_400 {
  font-weight: 400 !important;
}

.fw_500 {
  font-weight: 500 !important;
}

.fw_700 {
  font-weight: 700 !important;
}

.fw_normal {
  font-weight: normal !important;
}

/* テキスト　色　―――――――*/

.fcolor_green {
  color: #28823c;
}

.fcolor_orenge {
  color: #fca95d;
}

.fcolor_gray {
  color: #8e8e8e;
}

/* テキスト　大きさ　―――――――*/

.fs11 {
  font-size: 11px !important;
}

.fs12 {
  font-size: 12px !important;
}

.fs13 {
  font-size: 13px !important;
}

.fs14 {
  font-size: 14px !important;
}

.fs15 {
  font-size: 15px !important;
}

.fs16 {
  font-size: 16px !important;
}

.fs17 {
  font-size: 17px !important;
}

.fs18 {
  font-size: 18px !important;
}

.fs20 {
  font-size: 20px !important;
}

.fs24 {
  font-size: 24px !important;
}

/* テキスト　line-height　―――――――*/

/* line-height 18px*/
.l_h12 {
  line-height: 1.2 !important;
}

/* line-height 19.5px*/
.l_h13 {
  line-height: 1.3 !important;
}

/* line-height 22px*/
.l_h14 {
  line-height: 1.46666 !important;
}

/* line-height 29px*/
.l_h19 {
  line-height: 1.93333 !important;
}

/* 汎用　‐――――――――――――――――――‐―――――――――――――――――― */

/* ===== マーカー===== */
.marker_orange_hoso {
  background: linear-gradient(transparent 60%, #ffedb7 60%);
}

.marker_orange2_hoso {
  background: linear-gradient(transparent 60%, #f6d0ad 60%);
}

.marker_orange3_hoso {
  background: linear-gradient(transparenw100t 60%, #ffab6f 60%);
}

.marker_green_hoso {
  background: linear-gradient(transparent 50%, #aece53 50%);
}

/* ===== マーカー===== */

/* ============================================ 
header
/* ============================================ */

/* ヘッダー周り mtop */
header {
  padding: 1px 12px 8px;
  border-bottom: 1px solid #28823c;
  background: #fff;
}
.header h1 img {
  width: 75px;
  height: 15px;
}

/* ヘッダー周り 下層ページ */
.header {
}

/* ロゴ */
.title_logo_mtop {
  position: absolute;
  font: 0/0 a;
  width: 19.4%;
  top: 11%;
  left: 4.2%;
  color: transparent;
}

.title_logo {
  position: absolute;
  font: 0/0 a;
  width: 19.4%;
  top: 20%;
  left: 4.2%;
  color: transparent;
}

/* menu 位置 */
.menu_box {
  position: absolute;
  top: 5%;
  right: 2.5%;
}

.drawer_btn {
  /*  border-radius: 50%;*/
  width: 40px;
  height: 40px;
  position: relative;
}

.menu_btn_text {
  position: absolute;
  top: 30px;
  left: 6px;
  text-align: center;
  font-size: 10px;
  font-weight: 700;
}
.drawer-open .menu_btn_text {
  display: none;
}
/* ============================================ 
footer
/* ============================================ */

.footer {
  height: 100px;
  width: 100%;
  background: #c36e8a;
  padding: 14px 0;
  text-align: center;
}

footer p a {
  width: 100%;
  display: block;
}

#home_btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 45px;
  height: 45px;
  background: #ffffff;
  border-radius: 50%;
  margin: auto;
}

#home_icon {
  width: 45px;
  height: 45px;
  background: url(../image/icon/icon_home.sp.480.png);
  background-size: cover;
}

footer .copy {
  padding-top: 8px;
  font-weight: 500;
  font-size: 10px;
  line-height: 12px;
  color: #ffffff;
}

/* ============================================ 
ページ共通
/* ============================================ */

/* ===== cocoloni-banner　===== */
.cocoloni-banner {
  font: 0/0 a;
  color: transparent;
  border: 0;
  background-color: #ffffff;
  background-image: url(../image/cocoloni-brand.sp.480.png);
  background-repeat: no-repeat;
  background-position: center;
  -webkit-background-size: 68px 10px;
  background-size: 68px 10px;
  height: 24px;
  border-bottom: 1px solid #ececec;
}

/* ===== pageTop用　===== */

#pageTop {
  position: fixed;
  bottom: 25px;
  right: 12px;
  z-index: 1;
}

#pageTop a {
  position: relative;
  display: block;
  background-image: url(../image/icon/icon_toTop.sp.480.png);
  color: #e2c08d;
  width: 40px;
  height: 40px;
  cursor: pointer;
  background-size: cover;
  /* opacity: 0.7;*/
}
/*
#pageTop a:after {
width: 9px;
height: 9px;
border-top: 2px solid #eac46d;
border-left: 2px solid #eac46d;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #fff;
}  

#pageTop:after {
content: "";
display: block;
clear: both;
width: 22px;
height: 22px;
border-top: 3px solid #FFF;
border-left: 3px solid #FFF;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #fff;  
position: absolute;
top: 8px;
bottom: 0;
right: 0;
left: 0;
margin: auto;
content: "";
vertical-align: middle;
}  
*/
/* ===== pageTop用　===== */

/* ===== コーナー画像　===== */
.corner_head {
  width: 68.9%;
  max-width: 460px;
  margin: auto;
}

/* ===== コーナー見出し　===== */

.corner_head {
  width: 100%;
  text-align: center;
}

/* ===== ボタン 320px以下 ===== */

@media screen and (max-width: 320px) {
  .normal_btn a,
  .normal_btn_line a {
    font-size: 12px;
    letter-spacing: 0em;
  }
}

/* ===== ボタン 320px以下 ===== */

/* ===== リスト　new　===== */

.list_title_nolink {
  padding: 12px 20px 10px 0px;
  border-bottom: 1px solid #413b46;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 500;
  font-size: 15px;
  line-height: 140%;
  margin: 0 0 12px;
}

.list_base_new a {
  padding: 12px 20px 10px 0px;
  border-bottom: 1px solid #413b46;
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 500;
  font-size: 15px;
  line-height: 140%;
  color: #413b46;
}

.list_base_new .date_tip,
.list_base_new .cate_tip,
.list_base_new .people_tip {
  font-weight: 500;
  font-size: 12px;
  line-height: 18px;
  color: #a7516e;
  padding-right: 10px;
}

/* ===== 会員基盤　リスト　おすすめ ===== */

h2.midashi {
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  border-radius: 2px;
  padding-bottom: 8px;
  border-bottom: 2px solid #28823c;
}

h2.midashi_sort {
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 150%;
  border-radius: 2px;
  padding-bottom: 8px;
  border-bottom: 2px solid #28823c;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}

h2.midashi_sort img {
  width: 60px;
  min-width: 60px;
}

/* ===== リンクあり ===== */

.list_recome li {
  padding: 0 8px;
  margin-bottom: 20px;
}

.list_recome .thumbnail_s {
  color: #000;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}

.list_recome .thumbnail_s img {
  min-width: 28px;
  max-width: 28px;
  margin-right: 8px;
}

.list_recome .list_title {
  padding-right: 20px;
  color: #28823c;
  font-size: 15px;
  font-weight: 700;
  line-height: 150%;
  margin-bottom: 8px;
}

.list_recome .list_flex {
  position: relative;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #dae2e2;
  padding-bottom: 20px;
}

.list_recome .list_flex img {
  min-width: 60px;
  max-width: 60px;
  margin-right: 16px;
}
.list_recome .list_flex span {
  min-width: 30px;
  height: 18px;
  border-radius: 11px;
  background: #eff9f1;
  color: #28823c;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

.list_recome .list_flex::after {
  position: absolute;
  content: "";
  right: 5px;
  top: 25%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid #28823c;
  border-bottom: 1.5px solid #28823c;
  -webkit-transform: rotate(-45deg);
}

/* ===== リンクなし ===== */
/* .list_base_kobetsu_result .list_title{
  padding:10px 20px 8px 8px ;  
  background-color:rgba(255, 255, 255, 0.6);
  border-bottom: 1px dashed #9164B8;
  display: flex;
  align-items: center;
  position: relative;
  margin: 0 0 12px;
  font-weight: 500;
  font-size: 15px;
  line-height: 140%;
  border-radius: 4px 4px 0px 0px;
  }
  */

/* ===== カテゴリ名　＃並び===== */
.category_list {
  font-weight: 700;
  font-size: 14px;
  line-height: 170%;
  color: #9164b8;
}

.category_list li {
  margin-top: 14px;
  margin-right: 10px;
  display: inline-block;
}

.category_list li span {
  padding-bottom: 4px;
  border-bottom: 1px solid #d698ad;
}

.category_list li span.current {
  padding-bottom: 4px;
  border-bottom: none;
}

.category_list .category_tip_act {
  font-weight: 700;
  font-size: 15px;
  line-height: 22px;
  color: #aaaaaa;
  display: inline-block;
  border-bottom: none;
}
/* ===== カテゴリ名　＃並び===== */

/* 文字間均等割り無し */
.ex_text {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
}

/* ===== ページャー　===== */

.pager_right_image {
  display: inline-block;
  width: 8px;
}

.pager .grid-row {
  position: relative;
  width: 100%;
  height: 56px;
  display: flex;
  align-items: center;
}

.col1-3 {
  width: 33%;
}

.pager .grid-row > div {
  text-align: center;
  /* line-height: 48px; */
}

.pager .grid-row > div .item-page-size {
  font-size: 14px;
  line-height: 18px;
  letter-spacing: 0.3em;
}

.pager .grid-row > div .item-paging a {
  display: block;
  /* font-size: 32px; */
  padding: 0 24px;
}

.pager .grid-row > div .item-paging a.disabled {
  visibility: hidden;
}

.pager .grid-row > div .item-paging.prev a {
}

.pager .grid-row > div .item-paging.next a {
}

.pager .pager-aside {
  font-size: 10px;
  text-align: center;
  margin-top: 6px;
  line-height: 1;
}

.fa-angle-left {
  content: "";
  left: 0px;
  top: 40%;
  position: absolute;
  width: 12px;
  height: 12px;
  border-right: 1px solid #1d1d1d;
  border-bottom: 1px solid #1d1d1d;
  -webkit-transform: rotate(-225deg);
}

.fa-angle-right {
  content: "";
  right: 0px;
  top: 40%;
  position: absolute;
  width: 12px;
  height: 12px;
  border-right: 1px solid #1d1d1d;
  border-bottom: 1px solid #1d1d1d;
  -webkit-transform: rotate(-45deg);
}
/* ===== ページャー　===== */

/* ===== リクエストバナー　===== */
.area-request {
  margin: 0 auto 2pc;
  width: 3in;
}

/* ============================================ 
情報入力ページ
/* ============================================ */

/* ===== 確認画面　===== */

.comfirm_box {
  background: #ffffff;
  border-radius: 4px;
  padding: 0px;
}

.comfirm_box table {
  border-collapse: collapse; /* セルの線を重ねる */
  width: 100%;
}

.comfirm_box td {
  padding-top: 20px;
  padding-bottom: 11px;
  border-bottom: 1px solid #787878;
}

.comfirm_content {
  padding-left: 10px;
  font-weight: 700;
}

/* ===== リンク横　矢印　===== */

.link_arrow {
  width: 7px;
  height: 14px;
  margin-left: 12px;
  content: "";
  display: inline-block;
  text-align: center;
  background: url(../image/icon/icon_arrow_left.sp.480.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.control-label {
  font-weight: 500;
  font-size: 15px;
  line-height: 24px;
  display: flex;
  padding-bottom: 12px;
  color: #3e3e3e;
}

/* ===== p-3　cocoloni ID（メールアドレス）テキスト左のアイコン　===== */
.control-label span.cocoloni_logo {
  width: 20px;
  height: 20px;
  background-image: url(https://cocoloni.jp/build/assets/CI_cocoloni_ic_green-DpTlB1k5.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 12px;
}

input[type="text"] {
  height: 50px;
  padding: 8px;
  border: 1px solid #8e8e8e;
  border-radius: 1px;
}

.select-item {
  position: relative;
  width: 100%;
}

.select-item::after {
  position: absolute;
  content: "";
  width: 10px;
  height: 11px;
  top: 15px;
  right: 17px;
  display: block;
  text-align: center;
  background: url(../image/form_arrow.sp.480.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#inputName {
  width: 100%;
}

.col-xs-9 {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.col-birthday {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.col-birthtime {
  width: 47.7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.inputkana {
  width: 47.7%;
}

.birthtime-h,
.birthtime-m {
  width: 44.85%;
}

#birthday-y,
#birthday-m,
#birthday-d,
#birthtime-h,
#birthtime-m {
  border-radius: 4px;
  border: 1px solid #8e8e8e;
  height: 40px;
  padding: 10px 12px;
}

.birthday-y {
  width: 26.86%;
}

.birthday-m,
.birthday-d {
  width: 21.4%;
}

#inputGender,
.select_fid {
  height: 50px;
  padding: 8px;
  width: 100%;
  border: 1px solid #787878;
  border-radius: 1px;
}

.select_fid .select_border {
  border: 1px solid #373737;
}

.birth_caution {
  font-weight: 700;
  font-size: 13px;
  line-height: 17px;
  padding: 20px;
  color: #977044;
  background: #fff8d8;
}

/* ===== 必須　tip　===== */
.must_black_tip {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  background: #fca95d;
  border-radius: 10px 0px;
  margin-left: 10px;
  padding: 0px 8px 0px;
  font-size: 12px;
  line-height: 20px;
  height: 21px;
  color: #ffffff;
}
/* ===== 任意　tip　===== */
.must_white_tip {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  border: 1px solid #fca95d;
  background: #ffffff;
  margin-left: 10px;
  border-radius: 10px 0px;
  padding: 0px 8px 0px;
  font-size: 12px;
  line-height: 20px;
  height: 20px;
  color: #fca95d;
}

.link_arrow {
  width: 7px;
  height: 14px;
  margin-left: 12px;
  content: "";
  display: inline-block;
  text-align: center;
  background: url(../image/icon/icon_arrow_left.sp.480.png);
  background-repeat: no-repeat;
  background-size: contain;
}

/* ===== 送信ボタン　===== */

.submit_btn_box {
  display: flex;
  justify-content: center;
}

.submit_btn_ok {
  width: 77%;
  margin: auto;
  display: flex;
  font-family: "游明朝", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
  height: 50px;
  background: #f2de73;
  box-shadow: 3px 3px 0px rgb(62 62 62 / 10%), inset 0px 0px 0px 4px #f1d959,
    inset 0px 0px 0px 5px rgb(255 255 255 / 80%);
  border-radius: 25px 0px;
  justify-content: center;
  align-items: center;
  letter-spacing: 0.15em;
}

/* =====セレクト　横　矢印　===== */

#inputGender,
.select_fid {
  -webkit-appearance: none;
  background-image: url(../image/icon/icon_arrow_bottom.png);
  -webkit-background-size: auto 100%;
  background-size: 10px;
  background-repeat: no-repeat;
  background-position: right 27px;
  padding-right: 2pc;
  border: 1px solid #3e3e3e;
  border-radius: 2px;
}

/* =====　チェックボックス　===== */

.scmUpdateFlg {
  display: flex;
  align-items: cwnter;
}

/* =====　チェックボックス　オン　===== */
.form-button-group .item input[type="checkbox"]:checked {
  background: url(../image/icon/check_on.sp.480.png);
  background-size: contain;
  background-repeat: no-repeat;
}

/* =====　チェックボックス　オフ　===== */
.form-button-group .item input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin-right: 10px;
  display: block;
  width: 24px;
  height: 19px;
  background: url(../image/icon/check_off.png);
  background-size: contain;
  background-repeat: no-repeat;
  -webkit-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}

/* =====　チェックボックス　===== */

/* ============================================ 
前・次スライドボタン共通スタイル
/* ============================================ */

.swiper-button-next:after,
.swiper-rtl .swiper-button-prev:after {
  content: "";
}
.swiper-button-prev:after,
.swiper-rtl .swiper-button-next:after {
  content: "";
}

/* 前・次スライドボタン共通スタイル */
.swiper-button-prev,
.swiper-button-next {
  transform: rotate(90deg); /* 元のボタンを90度回転 */
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  margin: 0 auto; /* 以下、横方向の中央配置用 */
  left: 50%;
  margin-left: -22px;
}
/* 前ページボタン */
.swiper-button-prev {
  width: 100%;
  transform: rotate(0deg);
  left: 20px;
  position: relative;
}
/* 次ページボタン */
.swiper-button-next {
  top: auto;
  width: 100%;
  transform: rotate(0deg);
  left: 20px;
  position: relative;
}

.normal_btn.swiper-button-prev a {
  color: #1d1d1d;
}
.normal_btn.swiper-button-next a {
  color: #1d1d1d;
}

.hide1 {
  display: none;
}
.hide2 {
  display: none;
}

/* ============================================ 
もっと見る
/* ============================================ */

.more_link {
  text-align: right;
  font-weight: 500;
  font-size: 12px;
  color: #000000;
}

.more_link a:after {
  margin-left: 4px;
  content: "";
  display: inline-block;
  background-image: url(../image/icon/more_arrow.sp.480.png);
  width: 16px;
  height: 7px;
  background-size: contain;
}

/* ============================================ 
コーナーバナー
/* ============================================ */

.corner_bn img {
  filter: drop-shadow(3px 3px 0px rgba(61, 61, 61, 0.2));
}

/* ============================================ 
m_top下層ページ全体用
/* ============================================ */

.m_top_under_header_box {
  position: relative;
  width: 100%;
}

.l-contents-mtop_under {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #ffffff;
  min-height: CALC(100% - 62px);
}

.l-contents_under {
  padding-left: 20px;
  padding-right: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  background: #ffffff;
  min-height: CALC(100% - 62px);
}

/* ===== ボタン ノーマル　紫　高さ違い ===== */

.normal_btn_tall_rn a {
  height: 54px;
  text-align: center;
  padding-left: 15px;
  padding-right: 15px;
}

/* ===== ボタン 320px以下 ===== */

@media screen and (max-width: 320px) {
  .normal_btn_rn a,
  .normal_btn_line_rn a {
    font-size: 12px;
    letter-spacing: 0em;
  }
}
/* ===== メニューリスト ===== */
.list_base_new_rn {
  padding: 12px 20px 10px 0px;
  border-bottom: 1px solid #413b46;
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 15px;
  line-height: 140%;
  display: block;
}

.list_base_new_rn a {
  position: relative;
}
.list_base_new_rn_none a {
  position: none !important;
}

/* ===== リスト用アイコンmtop下層ページ メニューリスト用===== */

/* ============================================ 
情報入力ページ
/* ============================================ */

/* ===== 確認画面　===== */

.comfirm_box_rn {
  background: #ffffff;
  border-radius: 4px;
  padding: 20px;
}

.comfirm_box_rn table {
  border-collapse: collapse; /* セルの線を重ねる */
  width: 100%;
}

.comfirm_box_rn td {
  padding-top: 20px;
  padding-bottom: 11px;
  border-bottom: 1px solid #999999;
}

.comfirm_content_rn {
  padding-left: 10px;
  font-weight: 700;
}

/* ===== リンク横　矢印　===== */

.link_arrow_rn {
  width: 7px;
  height: 14px;
  margin-left: 12px;
  content: "";
  display: inline-block;
  text-align: center;
  background: url(../image/icon/icon_arrow_left.sp.480.png);
  background-repeat: no-repeat;
  background-size: contain;
}

input[type="text"] {
  height: 40px;
  padding: 8px;
  border: 1px solid #999999;
  border-radius: 4px;
}

.select-item_rn {
  position: relative;
  width: 100%;
}

.select-item_rn::after {
  position: absolute;
  content: "";
  width: 12px;
  height: 12px;
  top: 15px;
  right: 16px;
  display: block;
  text-align: center;
  background: url(../image/icon/icon_arrow_bottom.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.col-xs-9_rn {
  width: 100%;
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.col-birthday_rn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 8px;
}

.col-birthday_rn span {
  padding: 0 8px;
}

.col-birthtime_rn {
  width: 47.7%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.inputkana_rn {
  width: 47.7%;
}

.birthtime-h_rn,
.birthtime-m_rn {
  width: 44.85%;
}

#birthday-y_rn,
#birthday-m_rn,
#birthday-d_rn,
#birthtime-h_rn,
#birthtime-m_rn,
#cardNumber,
.expiration-date,
.security-code,
#cardExpirationMonth,
#expirationDate_m,
#expirationDate_y,
#securityCode,
#birthDate-h,
#birthDate-m,
#inputCoupon,
#inputPlace,
#selectPlace,
#storeQuestion {
  height: 40px;
  padding: 8px 16px 8px 10px;
  width: 100%;
  border: 1px solid #8e8e8e;
  border-radius: 4px;
  margin-bottom: 8px;
}

#cardNo_1,
#cardNo_2,
#cardNo_3,
#cardNo_4 {
  width: calc((100% - 24px) / 4);
}

.birthday-y_rn,
.expirationDate_y,
.securityCode,
.birthDate-h,
.birthDate-m {
  width: 26.86%;
}

.birthday-m_rn,
.birthday-d_rn,
.expirationDate_m {
  width: 20.89%;
}

#inputGender_rn,
.select_fid_rn {
  height: 50px;
  padding: 8px;
  width: 100%;
  border: 1px solid #787878;
  border-radius: 1px;
}

.select_fid_rn .select_border_rn {
  border: 1px solid #373737;
}

.birth_caution_rn {
  font-weight: 700;
  font-size: 13px;
  line-height: 17px;
  padding: 20px;
  color: #977044;
  background: #fff8d8;
}

/* =====　チェックボックス　===== */

.scmUpdateFlg_rn {
  display: flex;
  align-items: cwnter;
}

.submit_btn_rn a {
  color: #ffffff;
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: center;
}

/* ============================================ 
formページ　指定
/* ============================================ */

.form-button-group {
  margin-right: 0px;
  margin-left: 0px;
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.form-button-group .item {
  border-bottom: none;
}

.form-button-group .item label {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: flex-start;
  padding: 8px 0px;
}

.form-button-group .item input[type="checkbox"],
.form-button-group .item input[type="radio"] {
  border: none;
}

button.normal_btn_rn {
  color: #ffffff;
  width: 100%;
  font-weight: 500;
  font-size: 14px;
  line-height: 150%;
  display: flex;
  height: 39px;
  align-items: center;
  justify-content: center;
}

/* ============================================ 
myページ　指定
/* ============================================ */

.switch-mode {
  border-bottom: none;
}

.switch-mode .item {
  padding: 0;
}

.switch-mode .item.active {
  background: #03a9f4;
  color: #fff;
}

.switch-mode .item .menu-icon {
  color: inherit;
  padding: 0px 0;
  height: 35px;
  color: #c36e8a;
  font-weight: 500;
  font-size: 14px;
}

.switch-mode .item:not(:last-child) {
  border-right: 1px solid #ddd;
}

.nav-mypage {
  list-style: none;
}

.nav-mypage .item {
  padding: 4px 0;
  text-align: center;
}

.nav-mypage .item:not(:last-child) {
  border-right: 1px solid #ddd;
}

.nav-mypage a {
  display: block;
  text-align: center;
}

.nav-mypage a:hover,
.nav-mypage a:focus {
  text-decoration: none;
}

.nav-mypage a i {
  display: block;
  width: 28px;
  height: 28px;
  font-size: 28px;
  line-height: 28px;
  text-align: center;
  margin: 0 auto 2px;
}

.nav-mypage a span {
  font-size: 10px;
  display: block;
}

.nav-mypage a:hover,
.nav-mypage a:focus {
  text-decoration: none;
}

.menu-icon {
  display: block;
  text-align: center;
}

.menu-icon:hover,
.menu-icon:focus {
  text-decoration: none;
}

.menu-icon i {
  display: block;
  width: 24px;
  height: 24px;
  font-size: 24px;
  line-height: 24px;
  text-align: center;
  margin: 0 auto 2px;
  float: left;
}

.menu-icon span {
  font-size: 10px;
  display: block;
}

.menu-list.mypage {
  overflow: hidden;
  margin-bottom: 16px;
}

.menu-list.mypage .area-edit {
  display: block;
}

.m-list-mypage .switch-mode .item.active {
  background: transparent;
  color: inherit;
  border-bottom: 1px solid #2e3156;
  background: #d698ad;
}

/* =======================================================================
会員基盤 
======================================================================= */
/* 各サービスで背景色指定 */
/* 既存モバイルサイト */
body.mobile {
  background-color: #eff9f1;
  /*  background: url(../image/bg/mobile.jpg);*/
  /*   background-size: 100%;*/
  /*   background-attachment: fixed;*/
  /*  background-repeat: repeat;*/
}

/* 各サービスで背景部分アイコン指定 */
/* 既存モバイルサイト */
@media only screen and (min-width: 900px) {
  .icon_bg {
    position: fixed;
    top: 50%; /* 高さは画面の縦中央 */
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
  }

  body.mobile .service_icon_bg_left {
    left: calc((100vw - 768px) / 4 - 15px); /* 画面の左端からの距離 */
    background-image: url(https://cocoloni.jp/build/assets/CI_cocoloni_ic_green-DpTlB1k5.png);
    width: 30px;
    height: 30px;
  }

  body.mobile .service_icon_bg_right {
    right: calc((100vw - 768px) / 4 - 15px); /* 画面の右端からの距離 */
    background-image: url(https://cocoloni.jp/build/assets/CI_cocoloni_ic_green-DpTlB1k5.png);
    width: 30px;
    height: 30px;
  }
}
/* 占い館 */
body.uranai_sun_moon {
  background-image: linear-gradient(
    90deg,
    rgba(246, 245, 238, 1) 50%,
    rgba(242, 245, 245, 1) 50%
  );
  /*  background: url(../image/bg/mobile.jpg);*/
  /*   background-size: 100%;*/
  /*   background-attachment: fixed;*/
  /*  background-repeat: repeat;*/
}

/* 各サービスで背景部分アイコン指定 */

@media only screen and (min-width: 900px) {
  .icon_bg {
    position: fixed;
    top: 50%; /* 高さは画面の縦中央 */
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
  }

  body.uranai_sun_moon .service_icon_bg_left {
    left: calc((100vw - 768px) / 4 - 40px); /* 画面の左端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Flogo_sun3.png%26decrypt%3D1");
    width: 80px;
    height: 8ch;
  }

  body.uranai_sun_moon .service_icon_bg_right {
    right: calc((100vw - 768px) / 4 - 40px); /* 画面の右端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Flogo_moon3.png%26decrypt%3D1");
    width: 80px;
    height: 80px;
  }
}

/* ストア */
body.store {
  background: linear-gradient(
    116deg,
    #e8f3d1 0%,
    #fbf6e5 35.94%,
    #ffe0e4 77.08%
  );
  /*  background: url(../image/bg/mobile.jpg);*/
  /*   background-size: 100%;*/
  /*   background-attachment: fixed;*/
  /*  background-repeat: repeat;*/
}

/* 各サービスで背景部分アイコン指定 */

@media only screen and (min-width: 900px) {
  .icon_bg {
    position: fixed;
    top: 50%; /* 高さは画面の縦中央 */
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
  }

  body.store .service_icon_bg_left {
    left: calc((100vw - 768px) / 4 - 30px); /* 画面の左端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Fstore_logo_bg.png%26decrypt%3D1");
    width: 60px;
    height: 60px;
  }

  body.store .service_icon_bg_right {
    right: calc((100vw - 768px) / 4 - 30px); /* 画面の右端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Fstore_logo_bg.png%26decrypt%3D1");
    width: 60px;
    height: 60px;
  }
}

/* ロバミミ */
body.robamimi {
  background-color: #fceef0;
  /*  background: url(../image/bg/mobile.jpg);*/
  /*   background-size: 100%;*/
  /*   background-attachment: fixed;*/
  /*  background-repeat: repeat;*/
}

/* 各サービスで背景部分アイコン指定 */

@media only screen and (min-width: 900px) {
  .icon_bg {
    position: fixed;
    top: 50%; /* 高さは画面の縦中央 */
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
  }

  body.robamimi .service_icon_bg_left {
    left: calc((100vw - 768px) / 4 - 25px); /* 画面の左端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Frobamimi.png%26decrypt%3D1");
    width: 50px;
    height: 50px;
  }

  body.robamimi .service_icon_bg_right {
    right: calc((100vw - 768px) / 4 - 25px); /* 画面の右端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Frobamimi.png%26decrypt%3D1");
    width: 50px;
    height: 50px;
  }
}

/* chapli */
body.chapli {
  background-color: #fceef0;
  /*  background: url(../image/bg/mobile.jpg);*/
  /*   background-size: 100%;*/
  /*   background-attachment: fixed;*/
  /*  background-repeat: repeat;*/
}

/* 各サービスで背景部分アイコン指定 */

@media only screen and (min-width: 900px) {
  .icon_bg {
    position: fixed;
    top: 50%; /* 高さは画面の縦中央 */
    transform: translateY(-50%);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1000;
  }

  body.chapli .service_icon_bg_left {
    left: calc((100vw - 768px) / 4 - 30px); /* 画面の左端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Fchapli_logo_fukidashi_w.png%26decrypt%3D1");
    width: 60px;
    height: 60px;
  }

  body.chapli .service_icon_bg_right {
    right: calc((100vw - 768px) / 4 - 30px); /* 画面の右端からの距離 */
    background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Fbg%2Fchapli_logo_fukidashi_w.png%26decrypt%3D1");
    width: 60px;
    height: 60px;
  }
}

/* 各サービスで背景部分アイコン指定 */

.top_cocoloni_box {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid #28823c;
}

.top_cocoloni_box h2 {
  min-width: 192px;
  max-width: 192px;
  margin: auto;
}

.logo_list {
  min-width: 295px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  margin: auto;
  padding: 0 8px;
}

.logo_list > div {
  margin-right: 24px;
}

.logo_list > div:last-child {
  margin-right: 0px;
}

.logo_list img {
  max-width: 68px;
  margin: auto;
}

.logo_list img.logo_store {
  max-width: 68px;
  margin: auto;
}

.logo_list img.logo_mobile {
  max-width: 96px;
  margin: auto;
}

.logo_list p.logo_mobile {
  max-width: 96px;
}

.statement {
  padding: 20px 12px;
  border-radius: 4px;
  background: #eff9f1;
  color: #28823c;
  font-family: "Zen Maru Gothic", serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 150%;
  text-align: center;
}

.more img {
  width: 15px;
  max-width: 15px;
  margin-right: 4px;
}
/* .more span.underline {
  border-bottom: 1px solid #000;
  padding-bottom: 2px;
}*/

/* ===== 会員基盤　ボタン　もっと見る  ===== */

.more_btn {
}

.more_btn a {
  width: 88%;
  margin: auto;
  color: #28823c;
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
}

.more_btn a span.logo {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  text-align: center;
  background: url(../image/icon/CI_cocoloni_ic_green.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.more_btn_green {
}

.more_btn_green a {
  width: 88%;
  margin: auto;
  color: #ffffff;
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #28823c;
  height: 52px;
}

@media only screen and (max-width: 320px) {
  .more_btn_green a {
    font-size: 14px;
  }
}

.more_btn_green a span.logo {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  text-align: center;
  background: url(../image/icon/CI_cocoloni_ic_white.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.reg_log_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reg_log_box > div {
  width: calc(50% - 4px);
}

.reg_btn span img {
  width: 20px;
  max-width: 20px;
  margin-right: 8px;
}

.reg_btn a {
  color: #ffffff;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #28823c;
  height: 52px;
}

.login_btn a {
  color: #28823c;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
}

@media screen and (min-width: 768px) {
  .logo_list {
    min-width: 590px;
  }

  .logo_list > div {
    margin-right: 24px;
  }

  .logo_list > div:last-child {
    margin-right: 0px;
  }

  .logo_list img {
    max-width: 136px;
    margin: auto;
  }

  .logo_list img.logo_store {
    max-width: 136px;
    margin: auto;
  }

  .logo_list img.logo_mobile {
    max-width: 192px;
    margin: auto;
  }

  .logo_list p.logo_mobile {
    max-width: 192px;
  }
}

.service_list {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  flex-wrap: wrap;
}

.service_box {
  width: calc(50% - 5px);
  border-radius: 8px;
  border: 2px solid #28823c;
  margin-bottom: 12px;
  position: relative;
}

.use_icon {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 500;
  line-height: 100%;
  width: 62px;
  height: 22px;
  border-radius: 20px;
  border: 1px solid #28823c;
  background: #28823c;
  top: -11px;
  left: 10px;
}

.service_box_bg {
  background: #eff9f1;
  padding: 14px 10px 8px;
  border-radius: 6px 6px 0px 0px;
}

.service_box_bg_bottom {
  background: #fff;
  padding: 8px 10px 14px;
  border-radius: 0px 0px 6px 6px;
}
.service_box_bg_bottom span {
  min-width: 30px;
  height: 18px;
  border-radius: 11px;
  background: #eff9f1;
  color: #28823c;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

.service_box img {
  width: 60px;
  max-width: 60px;
  margin: 0 auto 8px;
}

.service_box .title {
  color: #28823c;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 150%;
}

.service_box .summary {
  color: #1f2121;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

.service_list li.service_box_mobile {
  width: 100%;
  border-radius: 8px;
  border: 2px solid #28823c;
  /* padding: 16px; */
  margin-bottom: 12px;
  position: relative;
}
.service_list li.service_box_mobile > a {
  display: inline-block;
  width: 100%;
}

.service_list li.service_box_mobile:last-child {
  margin-bottom: 0px;
}

.service_list li.service_box_mobile .list_flex {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #eff9f1;
  border-radius: 6px;
}

.service_list li.service_box_mobile .list_flex_mobile {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  border-radius: 6px;
}

.service_list li.service_box_mobile .list_flex .title_box {
  background: #ffffff;
  width: 100%;
  padding: 16px 16px 16px 8px;
  border-radius: 0px 6px 6px 0;
}

.service_list li.service_box_mobile .list_flex_mobile .title_box {
  width: 100%;
  padding: 16px 16px 16px 8px;
  border-radius: 0px 6px 6px 0;
}

.service_list li.service_box_mobile .list_flex img,
.service_list li.service_box_mobile .list_flex_mobile img {
  min-width: 60px;
  max-width: 60px;
  /* margin-right: 16px; */
}

.service_list li.service_box_mobile .thumbnail {
  padding: 16px 8px 16px 16px;
}

.service_list li.service_box_mobile .list_title {
  color: #28823c;
  font-size: 15px;
  font-weight: 700;
  line-height: 150%;
}

.service_list li.service_box_mobile .summary {
  color: #1f2121;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

.service_list li.service_box_mobile span {
  min-width: 30px;
  height: 18px;
  border-radius: 11px;
  background: #eff9f1;
  color: #28823c;
  font-size: 10px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  display: inline-flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  margin-right: 4px;
}

/* ===== 会員基盤　Q&A  ===== */
.qa_secton ul {
}

.qa_secton ul li {
  border-bottom: 1px solid #d6d6d6;
}

/*ベース*/
.toggle {
  display: none;
}
.Label {
  /*タイトル*/
  padding: 16px 24px 16px 4px;
  display: block;
  color: #1f2121;
  font-size: 14px;
  line-height: 170%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.Label span {
  padding-right: 12px;
}

.Label::before {
  /*タイトル横の矢印*/
  content: "";
  width: 8px;
  height: 8px;
  border-top: 1px solid #1f2121;
  border-right: 1px solid #1f2121;
  -webkit-transform: rotate(45deg);
  position: absolute;
  top: calc(50% - 3px);
  right: 8px;
  transform: rotate(135deg);
}
.Label,
.content {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: all 0.3s;
  font-weight: 500;
}
.content {
  /*本文*/
  height: 0;
  overflow: hidden;
}

.content span {
  padding-right: 12px;
}

.answer {
  text-align: justify;
  padding-right: 20px;
  color: #1f2121;
}

.toggle:checked + .Label + .content {
  /*開閉時*/
  height: auto;
  padding: 0px 4px 16px;
  transition: all 0.3s;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.toggle:checked + .Label::before {
  transform: rotate(-45deg) !important;
}

footer {
  color: #28823c;
  background-color: #ffffff;
  position: sticky;
  top: 100vh;
}

.foot_head {
  color: #28823c;
  padding: 12px 20px;
  border-top: 1px solid #28823c;
  border-bottom: 1px solid #28823c;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  display: flex;
  justify-content: flex-start;
}

.foot_head a {
}

.foot_middle a {
  width: 100%;
  display: block;
}

.foot_head p.arrow {
  padding: 0 12px;
}

.foot_head p.arrow img {
  width: 6.5px;
  height: 10px;
  margin: 0 0 2px;
}

.foot_head img {
  width: 16px;
  max-width: 16px;
  margin-right: 4px;
}

.foot_bottom {
  padding: 8px 12px;
  text-align: center;
  font-size: 11px;
  font-weight: 400;
  line-height: 16px;
}

/*pageTopボタン*/

#pageTop a {
  position: relative;
  display: block;
  color: rgb(226, 192, 141);
  width: 60px;
  height: 60px;
  cursor: pointer;
  background: #28823c;
  border-radius: 50%;
}

#pageTop a::before,
#pageTop a::after {
  position: absolute;
  top: 0px;
  bottom: 0px;
  right: 0px;
  left: 0px;
  content: "";
  vertical-align: middle;
  margin: auto;
}

#pageTop a::after {
  width: 9px;
  height: 9px;
  transform: rotate(45deg);
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}

/* ===== 会員基盤  top_login.html===== */

.logout_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.info_summary {
  padding: 8px 12px;
  border-radius: 4px;
  background: #eff9f1;
  margin-bottom: 28px;
  text-align: center;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

.info_summary_small {
  padding: 4px 8px;
  border-radius: 4px;
  background: #eff9f1;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

.logout_box h2 {
  width: 192px;
  max-width: 192px;
  margin-right: 20px;
}

.logout_btn {
  margin-left: auto;
}

.logout_btn a {
  min-width: 120px;
  color: #28823c;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
}

/* ===== ボタン　エラーコピー ===== */

.error_copy_btn {
  margin-left: auto;
}

.error_copy_btn {
  min-width: 105px;
  color: #28823c;
  display: flex;
  padding: 8px 20px;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 30px;
}

@media only screen and (max-width: 320px) {
  .error_copy_btn {
    font-size: 12px;
  }
}

/* ===== ボタン ノーマル　幅　100% ===== */
.normal_btn a {
  width: 100%;
  color: #28823c;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
}

.profile_box {
  border-radius: 8px;
  border: 2px solid #28823c;
  padding: 20px;
}

.profile_box .item_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile_box h3 {
  color: #28823c;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.profile_box_logo {
  color: #28823c;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.profile_box_logo img {
  width: 20px;
  max-width: 20px;
  margin-right: 12px;
}

.profile_box_red {
  border-radius: 8px;
  border: 2px solid #ddd;
  padding: 20px;
}

.profile_box_red .item_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile_box_red h3 {
  color: #d31e1e;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.profile_box_red_logo {
  color: #000;
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.profile_box_red_logo img {
  width: 20px;
  max-width: 20px;
  margin-right: 12px;
}

.profile_box_red .info_summary {
  border-radius: 4px;
  background: rgba(211, 30, 30, 0.1);
  padding: 8px;
  text-align: center;
  font-size: 13px;
  color: #d31e1e;
  font-weight: 700;
}

.change_btn a {
  min-width: 104px;
  color: #28823c;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
  margin-left: 12px;
}

.add,
.pass,
.name,
.birthday,
.gender {
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.add,
.pass {
  width: 100%;
  word-break: break-all;
}

.top_login_add,
.top_login_pass {
  width: calc(100% - 116px);
  word-break: break-all;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
}
.name,
.birthday,
.gender {
  width: 100%;
}

.border_top {
  border-top: 1px solid #ddd;
}
.border_bottom {
  border-bottom: 1px solid #ddd;
}

h2.my_cocoloni_logo {
  min-width: 190px;
  max-width: 190px;
  margin: auto;
}
/* =======================================================================
ページャー
======================================================================= */

.pager {
  margin-bottom: 28px;
}

.pagination {
  width: calc(100% - 35px);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}

.pagination ul {
  width: 100%;
  text-align: center;
}

.pagination ul li {
  display: inline-block;
  margin-right: 8px;
}

.pagination ul li:last-child {
  display: inline-block;
  margin-right: 0px;
}

.circul__btnR,
.circul__btnL,
.circul__btnR--disabled,
.circul__btnL--disabled {
  width: 20px;
  height: 46px;
}
.circul__btnR--disabled::before,
.circul__btnL--disabled::before {
}
.circul__btnR::before,
.circul__btnL::before,
.circul__btnR--disabled::before,
.circul__btnL--disabled::before {
  width: 20px;
  height: 46px;
}

.circul__btnR::after,
.circul__btnL::after,
.circul__btnR--disabled::after,
.circul__btnL--disabled::after {
  width: 8px;
  height: 8px;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.pagination ul li a.active {
  color: #fff;
  background: #28823c;
}
.arrow {
  position: relative;
  display: inline-block;
}

.arrow::before,
.arrow::after {
  position: absolute;
  top: 5px;
  bottom: 0;
  left: 0;
  margin: auto;
  content: "";
  vertical-align: middle;
}

.pagination ul li a {
  width: 36px;
  background: #eff9f1;
  border-radius: 50%;
  padding: 7px;
  font-size: 12px;
  font-weight: 400;
  display: inline-block;
  font-weight: bold;
}

.circul__btnR::after {
  left: 10px;
  border-top: 1px solid #000000;
  border-right: 1px solid #000000;
}

.circul__btnL--disabled::after {
  left: 3px;
  border-bottom: 1px solid #000000;
  border-left: 1px solid #000000;
}
@media only screen and (max-width: 320px) {
  .pagination ul li a {
    min-width: 20px;
    width: 25px;
    padding: 2px;
    height: 25px;
  }
}

/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 600px;
  padding: 40px 20px 20px;
  background-color: #fff;
  border-radius: 8px;
  overflow-y: scroll;
  height: 90vh;
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}

/* 以下ボタンスタイル */
button {
  cursor: pointer;
}

#openModal {
}

/* チェックボックス全体 */
.checkbox {
  /*   width: fit-content; */
  display: grid;
  grid-template-columns: auto 1fr;
  /* gap: 10px; */
  /* padding: 0 8px; */
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  color: #28823c;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* チェックボックス全体（アイコンを上に表示） */
  &.checkbox--icon-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* auto はアイコン、1fr はラベル文字列を想定 */
    place-items: center;
    text-align: center;
  }

  /* チェックボックス全体（アイコンを下に表示） */
  &.checkbox--icon-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto; /* 1fr はラベル文字列、auto はアイコンを想定 */
    place-items: center;
    text-align: center;
  }

  /* チェックボックス全体（アイコンを右に表示） */
  &.checkbox--icon-right {
    width: auto;
    display: grid;
    grid-template-columns: 1fr auto; /* 1fr はラベル文字列、auto はアイコンを想定 */
    border-bottom: dashed 1px #bdbdbd;
  }
  &.checkbox--icon-right:last-child {
    border-bottom: none;
  }

  /* チェックボックス全体：非活性の見た目 */
  &:has(.checkbox_icon:disabled) {
    opacity: 0.4;
  }
}

.form-field {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  width: 100%;
  /*max-width: 320px;*/
  margin: 0 auto 28px;
  overflow: auto;
  background-color: #fff;
}
/* チェックボックスを2列に並べる */
.form-field.form-field--2-column {
  grid-template-columns: 1fr 1fr;
}
/* アイコン */
.checkbox_icon {
  position: relative;
  width: 20px;
  height: 20px;
  appearance: none;
  background: #ffffff;
  background: url(../image/icon/check_off.png);
  background-repeat: no-repeat;
  background-size: contain;
  box-shadow: 0 0 0 0 transparent;
  transition-duration: 0.2s;
  transition-property: background-color, border, box-shadow, color;

  /* 強制カラーモードが有効のときは、既定のシステムカラー値を設定して、トランジションを無効にする */
  @media (forced-colors: active) {
    transition: none;
    border-color: CanvasText;
  }

  /* アイコン：選択済みの見た目 */
  &:checked {
    width: 20px;
    height: 20px;

    background: url(../image/icon/check.png); /* 紫色 */
    /*border-color: #3223B3; */
    background-size: contain;

    /* 強制カラーモードが有効のときは、システムカラーを設定 */
    @media (forced-colors: active) {
      background-color: Canvas;
      border-color: CanvasText;
    }
  }

  /* アイコン：活性時のホバー演出 */
  &:hover:enabled {
    /* 強制カラーモードが無効かつ、ホバーが有効のときは、ホバー演出を追加 */
    @media (forced-colors: none) and (any-hover: hover) {
      /*    border-color: #3223B3;  紫色 */
      /*   box-shadow: 0 0 0 4px #D2CEFF;薄い紫色 */
    }
  }

  /* チェックマーク */
  &::before {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    opacity: 0;
    mask-image: url("../image/icon/check.png");
    mask-repeat: no-repeat;
    mask-size: contain;
    background-color: #ffffff;
    transition: opacity 0.2s;
  }
  /* 強制カラーモードが有効のときは、既定のシステムカラー値を設定して、トランジションを無効にする */
  @media (forced-colors: active) {
    &::before {
      transition: none;
      background-color: CanvasText;
    }
  }

  /* チェックマーク：選択済みの見た目 */
  &:checked::before {
    opacity: 1;
  }
}

.checkbox_icon_black::before {
  background: url(../image/icon/check_off_black.png);
  background-size: contain;
}

.checkbox img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}
.checkbox div {
  width: calc(100% - 24px);
}

input[type="checkbox"] {
  margin: 0px 0 0 4px;
}

.form-field--2-column label.checkbox:nth-child(odd) {
  padding-right: 12px;
  padding-bottom: 20px;
}

.form-field--2-column label.checkbox:nth-child(even) {
  padding-left: 12px;
  padding-bottom: 20px;
}

.modalContents h4 {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.reg_sort_box {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.reg_sort_box > div {
  width: calc(50% - 6px);
}

input.normal_btn {
  width: 100%;
  color: #28823c;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
}

input.normal_btn.green {
  color: #fff;
  border: 2px solid #28823c;
  background: #28823c;
}

.use_btn a {
  margin: auto;
  width: calc(100% - 20px);
  color: #28823c;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 37px;
}
.use_mobile_btn {
  text-align: right;
  margin: -4px 16px 16px;
}
.use_mobile_btn > a {
  display: inline-flex !important;
  margin: auto;
  width: 133px !important;
  color: #28823c;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  padding: 12px 16px;
  border: 2px solid #28823c;
  background: #fff;
  height: 37px;
}

/* =======================================================================
プライバシーポリシー
======================================================================= */
.provacy {
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
  text-align: justify;
}

.underline {
  text-decoration: underline;
}
/* =======================================================================
問い合わせ
======================================================================= */
/* ===== 必須　tip　===== */

.control-label {
  font-weight: 700;
  font-size: 15px;
  line-height: 20px;
  display: flex;
  align-items: center;
  padding-bottom: 12px;
  color: #3e3e3e;
}

.tip_must {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  background: #000000;
  border-radius: 10px;
  margin-left: 8px;
  padding: 4px 8px;
  font-size: 10px;
  line-height: 18px;
  height: 18px;
  color: #ffffff;
}

#inputName,
#inputMail,
#inputPassword,
#inputPassword_b,
#inputTel,
#inputCouponNo {
  width: 100%;
  border-radius: 4px;
  border: 1px solid #8e8e8e;
  height: 40px;
  padding: 10px 12px;
}

#inputService {
  width: 100%;
  -webkit-appearance: none;
  background-image: url(../image/icon/icon_arrow_bottom.png);
  -webkit-background-size: auto 100%;
  background-size: 12px;
  background-repeat: no-repeat;
  background-position: right 15px top 12px;
  padding-right: 2pc;
  border: 1px solid #8e8e8e;
  height: 40px;
  border-radius: 4px;
}

.form-control {
  width: 100%;
  min-height: 140px;
  padding: 8px;
  background-color: #fff;
  background-image: none;
  border: 1px solid #8e8e8e;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -webkit-transition: border-color ease-in-out 0.15s,
    -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -webkit-appearance: none;
}

.submit_more_btn {
  width: 88%;
  margin: auto;
  color: #ffffff;
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #ddd;
  background: #ddd;
  height: 52px;
}

.submit_more_btn.active {
  width: 88%;
  margin: auto;
  color: #ffffff;
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #28823c;
  height: 52px;
}
.submit_more_btn span.logo,
.submit_more_btn.active span.logo {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 8px;
  text-align: center;
  background: url(../image/icon/CI_cocoloni_ic_white.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.submit_back_btn {
  width: 88%;
  margin: auto;
  color: #28823c;
  display: flex;
  padding: 16px 20px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
}

.icon_whats_cocoloni {
  position: relative;
  padding-right: 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

.icon_whats_cocoloni::after {
  position: absolute;
  content: "";
  top: 3px;
  right: 4px;
  width: 15px;
  height: 15px;
  text-align: center;
  background: url(../image/icon/CI_cocoloni_ic_green.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.icon_window {
  position: relative;
  padding-right: 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 150%;
}

.icon_window::after {
  position: absolute;
  content: "";
  top: 0px;
  right: 0px;
  width: 20px;
  height: 20px;
  text-align: center;
  background: url(https://cocoloni.jp/build/assets/ic_window-WoLzfpvW.png);
  background-repeat: no-repeat;
  background-size: contain;
}

.form_explain {
  font-size: 11px;
  color: #8e8e8e;
}
/* ===== エラー　===== */
.error {
  border: 1px solid #d31e1e !important;
  color: #d31e1e !important;
}

/* ===== エラーメッセージ　===== */

.error_message {
  position: relative;
  border-radius: 4px;
  background: rgba(211, 30, 30, 0.1);
  color: #d31e1e;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  padding: 8px 8px 8px 31px;
}

.error_message::before {
  position: absolute;
  content: "";
  top: calc(50% - 7px);
  left: 8px;
  width: 15px;
  height: 15px;
  text-align: center;
  background: url(https://cocoloni.jp/build/assets/ic_caution-B38ZIrC5.png);
  background-repeat: no-repeat;
  background-size: contain;
}
/* ===== エラーメッセージ　===== */

.error_message_copy {
  position: relative;
  border-radius: 4px;
  background: rgba(211, 30, 30, 0.1);
  color: #d31e1e;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  padding: 8px 8px 8px 31px;
  display: flex;
  align-items: center;
}
.error_message_copy::before {
  position: absolute;
  content: "";
  top: calc(50% - 7px);
  left: 8px;
  width: 15px;
  height: 15px;
  text-align: center;
  background: url(../image/icon/ic_caution.png);
  background-repeat: no-repeat;
  background-size: contain;
}
/* ===== 確認画面　===== */

.confirm_item_box {
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.confirm_item_box .confirm_item {
  padding: 8px;
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
}
/* ===== エラー画面　===== */
.cocoloni_ic_ase img {
  width: 65px;
  max-width: 65px;
  margin: auto;
}

/* ===== ID統合　===== */

.icon_arrow_bottom img {
  width: 12px;
  height: 12px;
}

.line_login_btn a {
  border-radius: 32px;
  background: #06c755;
  border: 2px solid #06c755;
  color: #ffffff;
  font-weight: 400;
}

.google_login_btn a {
  border-radius: 32px;
  background: #4285f4;
  border: 2px solid #4285f4;
  color: #ffffff;
  font-weight: 400;
}

.line_login_btn a {
  border-radius: 32px;
  background: #06c755;
  border: 2px solid #06c755;
  color: #ffffff;
  font-weight: 400;
}

.docomo_reg_btn a {
  border-radius: 32px;
  background: #c03;
  border: 2px solid #c03;
  color: #ffffff;
  font-weight: 400;
}

.au_reg_btn a {
  border-radius: 32px;
  background: #eb5505;
  border: 2px solid #eb5505;
  color: #ffffff;
  font-weight: 400;
}

.softbank_reg_btn a {
  border-radius: 32px;
  background: #969697;
  border: 2px solid #969697;
  color: #ffffff;
  font-weight: 400;
}

/* チェックボックス全体 */
.checkbox_black {
  /*   width: fit-content; */
  display: grid;
  grid-template-columns: auto 1fr;
  /* gap: 10px; */
  /* padding: 0 8px; */
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  color: #28823c;
  display: flex;
  align-items: center;
  justify-content: space-between;

  /* チェックボックス全体（アイコンを上に表示） */
  &.checkbox--icon-top {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr; /* auto はアイコン、1fr はラベル文字列を想定 */
    place-items: center;
    text-align: center;
  }

  /* チェックボックス全体（アイコンを下に表示） */
  &.checkbox--icon-bottom {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto; /* 1fr はラベル文字列、auto はアイコンを想定 */
    place-items: center;
    text-align: center;
  }

  /* チェックボックス全体（アイコンを右に表示） */
  &.checkbox--icon-right {
    width: auto;
    display: grid;
    grid-template-columns: 1fr auto; /* 1fr はラベル文字列、auto はアイコンを想定 */
    border-bottom: dashed 1px #bdbdbd;
  }
  &.checkbox--icon-right:last-child {
    border-bottom: none;
  }

  /* チェックボックス全体：非活性の見た目 */
  &:has(.checkbox_black:disabled) {
    opacity: 0.4;
  }
}

/* =======================================================================
新規登録 reg
======================================================================= */

.p-1_site_title {
  border-bottom: 1px solid #ddd;
  padding: 0px 0px 20px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  line-height: 20px;
  margin: 0 -20px 0 -20px;
}

.p-1_site_title .cocoloni-uranai img {
  max-width: 135px;
  width: 135px;
}

.p-1_site_title .robamimi img {
  max-width: 77px;
  width: 77px;
}

.p-1_site_title .chapli img {
  max-width: 67px;
  width: 67px;
}

.p-1_site_title .store img {
  max-width: 67px;
  width: 67px;
}

.p-1_site_kiyaku {
  width: 90%;
  margin: auto;
}

.p-15_site_kiyaku {
  padding: 20px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid #28823c;
}

/* 各サイトのできること部分 */
.register-head {
  text-decoration: none;
  font-family: Source Han Sans JP, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 19px;
  line-height: 28px;
  align-items: center;
  text-align: center;
  text-decoration-line: underline;
  text-underline-offset: 1rem;
  margin: 34px auto;
  letter-spacing: 1px;
}
.hoshi-under {
  background: linear-gradient(transparent 60%, #ddb3f299 0%);
  font-family: Source Han Sans JP, sans-serif;
}
.dekirukoto-head {
  font-family: Source Han Sans JP, sans-serif;
  font-style: normal;
  font-weight: bold;
  font-size: 15px;
  line-height: 22px;
  margin-bottom: 6px;
}

.dekirukoto-detail {
  font-family: Source Han Sans JP, sans-serif;
  font-style: normal;
  font-weight: normal;
  font-size: 15px;
  line-height: 23px;
  color: #4c4a40;
}
.detail-frame {
  margin: 30px 10px;
}
/* 各サイトのできること部分 */

.profile_box_reg {
}

.profile_box_reg .item_box {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.profile_box_reg h3 {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.profile_box_reg_logo {
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
}

.profile_box_reg_logo img {
  width: 20px;
  max-width: 20px;
  margin-right: 12px;
}
/* ラジオボタン */
.radio-label {
  position: relative;
  /*  padding: 1px;*/
  line-height: 1;
}
.radio-label .label-check {
  position: relative;
  display: block;
  padding-left: 30px;
  cursor: pointer;
  min-height: 20px;
  display: flex;
  align-items: center;
}
.radio-label .label-check:before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  display: block;
  margin: auto;
  width: 20px;
  height: 20px;
}
.radio-label .label-check.round:before {
  border: 1px solid #000000;
  border-radius: 50%;
}

.radio-label input[type="radio"].radio {
  display: none;
}
.radio-label input[type="radio"].radio:checked + .label-check:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 4.5px;
  display: block;
  margin: auto;
}
.radio-label input[type="radio"].radio:checked + .label-check.round:after {
  width: 11px;
  height: 11px;
  background-color: #28823c;
  border-radius: 50%;
}

.p .form-name-3,
.p label.form-name-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  border: 2px solid;
  border-color: #28823c;
  gap: 8px;
}
/* チェックボタン */
.form-name-3,
label.form-name-3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  position: relative;
  flex: 0 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  border: 2px solid;
  border-color: #28823c;
  gap: 8px;
}

.form-name-3:has(input[type="checkbox"]:checked) {
  background-color: #28823c;
}

.form-name-3 input[type="checkbox"] {
  display: none;
}

.form-name-3 input[type="checkbox"]:checked + .text-wrapper-13 {
  color: #ffffff;
}

.form-name-3 input[type="checkbox"]:checked + .text-wrapper-13::before {
  background-color: #28823c;
}

.form-name-3 input[type="checkbox"]:checked {
  background-color: #28823c;
}

.form-name-3:has(input[type="checkbox"]:checked) {
  background-color: #28823c;
}

.text-wrapper-13,
label.form-name-3 span.text-wrapper-13 {
  width: fit-content;
  margin-top: -2px;
  color: #28823c;
  font-size: 14px;
  line-height: 24px;
  white-space: nowrap;
  position: relative;
  font-family: "Noto Sans JP-Regular", Helvetica;
  font-weight: 400;
  letter-spacing: 0;
}

/* .checkbox,
input[type="checkbox"].checkbox {
  position: relative;
  width: 20px;
  height: 20px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #000000;
  border-radius: 4px;
  background-color: #ffffff;
  margin: 0;
} */

input[type="checkbox"].checkbox:checked {
  background-color: #28823c;
  border-color: #28823c;
}

input[type="checkbox"].checkbox:checked::after {
  content: "✓";
  position: absolute;
  color: white;
  font-size: 14px;
  top: 0;
  left: 4px;
}

.frame-6 {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px 8px;
  position: relative;
  flex: 0 0 auto;
}

.safety_level {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 100%;
}

.safety_level > div {
  width: calc((100% - 8px) / 3);
}

.safety_level .safety_weak {
  color: #fa6969;
  text-align: center;
}
.safety_level .safety_medium {
  color: #eec026;
  text-align: center;
}
.safety_level .safety_strong {
  color: #6fc035;
  text-align: center;
}

.safety_level .safety_weak span,
.safety_level .safety_medium span,
.safety_level .safety_strong span {
  height: 10px;
  width: 100%;
  display: block;
  background: #ddd;
}

.safety_level .safety_weak.active,
.safety_level .safety_medium.active,
.safety_level .safety_strong.active {
  height: 23px;
}

.safety_level .safety_weak.active span {
  height: 10px;
  width: 100%;
  display: block;
  background: #fa6969;
}

.safety_level .safety_medium.active span {
  height: 10px;
  width: 100%;
  display: block;
  background: #eec026;
}
.safety_level .safety_strong.active span {
  height: 10px;
  width: 100%;
  display: block;
  background: #6fc035;
}

.safety_level .safety_weak.active span::after {
  content: "weak";
  display: block;
  padding-top: 10px;
}

.safety_level .safety_medium.active span::after {
  content: "medium";
  display: block;
  padding-top: 10px;
}

.safety_level .safety_strong.active span::after {
  content: "strong";
  display: block;
  padding-top: 10px;
}

.inputPassword_btn_box {
  width: 100%;
  position: relative;
}

.inputPassword_btn {
  content: "";
  display: inline-block;
  background: url(https://cocoloni.jp/build/assets/pass_hide-CtjlBmbL.png);
  width: 20px;
  height: 14px;
  background-size: cover;
  position: absolute;
  right: 10px;
}
.inputPassword_btn_open {
  content: "";
  display: inline-block;
  background: url(https://cocoloni.jp/build/assets/pass_hide-CtjlBmbL.png);
  width: 20px;
  height: 14px;
  background-size: cover;
  position: absolute;
  right: 10px;
}

.border_box {
  padding: 20px;
  border-radius: 8px;
  border: 1px solid var(---CI_cocoloni, #28823c);
}

.caldNo_box {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  justify-content: space-between;
}
.col-expirationDate {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  justify-content: flex-start;
}
.col-expirationDate span {
  padding: 0 8px;
}

.security_text_box {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}

.security_text_box img {
  width: 42px;
  max-width: 42px;
  margin-left: 12px;
}

/* チェックボックス */
.check-box {
  cursor: pointer;
}

.check-box input {
  display: none;
}

.check-box input + .text:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 0.3em;
  margin: 0 5px 0 0;
  background-image: url(../image/icon/check_off_black.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
}

.check-box input:checked + .text:before {
  background-image: url(../image/icon/check.png);
}

/* サービス選択用　チェックボックス */

.form-field--2-column label.check-box_service:nth-child(odd) {
  padding-right: 12px;
  padding-bottom: 20px;
}

.form-field--2-column label.check-box_service:nth-child(even) {
  padding-left: 12px;
  padding-bottom: 20px;
}

.check-box_service {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  color: #28823c;
}

.check-box_service input {
  display: none;
}

.check-box_service input + .check_btn:after {
  content: "";
  display: inline-block;
  position: relative;
  top: 2px;
  background-image: url(../image/icon/check_off.png);
  background-size: cover;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  font-size: 15px;
  font-weight: normal;
  line-height: 1.5;
  color: #28823c;
}

.check-box_service input:checked + .check_btn:after {
  background-image: url(../image/icon/check.png);
}

.check-box_service .icon img {
  width: 20px;
  height: 20px;
  margin-right: 4px;
}

/* 退会ページ */

.thank img {
  width: 75px;
}

.unreg_logo img {
  width: 40px;
  height: 40px;
}

/* アカウントページ */

.item_box_account {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.account_box_line {
  width: calc(100% - 116px);
  word-break: break-all;
  border-radius: 4px;
  padding: 10px 12px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  display: flex;
}

.account_box_line .no_linked {
  width: 48px;
  display: inline-block;
  color: #8e8e8e;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  line-height: 20px;
  margin-left: auto;
}

.account_box_line .linked {
  width: 48px;
  display: inline-block;
  color: #28823c;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  margin-left: auto;
}

.linked_btn {
  min-width: 104px;
  color: #28823c;
  display: flex;
  padding: 16px 0px;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: 700;
  line-height: 20px;
  border-radius: 32px;
  border: 2px solid #28823c;
  background: #fff;
  height: 52px;
  margin-left: 12px;
}

/* ==========================
絞り込みサイト　表示部分
============================= */

.survice_sort_list {
  color: #000;
  font-size: 15px;
  font-weight: 400;
  line-height: 150%;
}

.survice_sort_list span.sort {
  color: #28823c;
  font-weight: 700;
  margin-right: 14px;
}

.survice_sort_list span.sort:last-child {
  margin-right: 0px;
}

/* ==========================
ツールチップ
============================= */

.icon_tooltip {
  content: "";
  display: inline-block;
  background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Ficon%2Fic_info.png%26decrypt%3D1");
  background-size: cover;
  background-repeat: no-repeat;
  width: 14px;
  height: 14px;
  margin-left: 8px;
}

.tooltip {
  position: relative;
  display: inline-flex;
  cursor: pointer;
  align-items: center;
}

.tooltip-content {
  display: none;
  color: #28823c;
  border: 1px solid #28823c;
  position: absolute;
  top: 120%;
  left: 60px;
  border-radius: 4px;
  background: #eff9f1;
  padding: 9px 8px;
  z-index: 1000;
  min-width: 275px;
}

.tooltip-content_text {
  font-size: 10px;
  font-weight: 500;
  line-height: 150%;
  display: flex;
  align-items: center;
}

.tooltip-content .tooltip-close {
  cursor: pointer;
  content: "";
  display: inline-block;
  background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Ficon%2Fic_info_close.png%26decrypt%3D1");
  background-size: cover;
  background-repeat: no-repeat;
  width: 20px;
  height: 20px;
  margin-left: 8px;
}

.balloon2-top {
  position: relative;
  display: flex;
  box-sizing: border-box;
  justify-content: space-between;
}

.balloon2-top:before {
  content: "";
  position: absolute;
  top: -16px;
  left: 21%;
  content: "";
  display: inline-block;
  background-image: url("https://websmart.zappallas.com/web_image?url=http%3A%2F%2Fwebmember.smart-srv%2F..%2Fimage%2Ficon%2Fic_info_top.png%26decrypt%3D1");
  background-size: cover;
  background-repeat: no-repeat;
  width: 7px;
  height: 8px;
}

@media screen and (max-width: 320px) {
  .tooltip-content {
    left: 5px;
  }
}

/* ==========================
モバイル　登録ステップ
============================= */

.register-head_mobile {
  color: #28823c;
  text-decoration: none;
  font-style: normal;
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-weight: 700;
  line-height: 150%; /* 39px */
  margin: 28px auto 10px;
  font-size: 22px;
  letter-spacing: 0.08em;
}

.register-head_mobile span.big {
  font-size: 26px;
  letter-spacing: 0.08em;
}

.register-head_mobile span.middle {
  font-size: 24px;
  letter-spacing: 0.08em;
}

.register-head_mobile span.small {
  font-size: 18px;
  letter-spacing: 0.08em;
}

.register-head_mobile span.left,
.register-head_mobile span.right {
  content: "";
  display: block;
  width: 15px;
  height: 26px;
  text-align: center;
}

.register-head_mobile span.left {
  background: url(../image/icon/ic_slash_left.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
}

.register-head_mobile span.right {
  background: url(../image/icon/ic_slash_right.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 5px;
}

.step_section .step_box {
  display: flex;
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
}

.step_box {
  background: url(../image/icon/ic_step_line.png);
  background-repeat: repeat-y;
  background-size: 3px;
  background-position: 10px;
  background-position: 18px;
}

.step_box h3 {
  color: #000;
  font-family: "Noto Sans JP";
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  display: inline-block;
  background: linear-gradient(transparent 80%, #28823c 0%);
  margin-bottom: 14px;
}

.step_box .step_image {
  min-width: 37px;
  min-height: 37px;
  max-width: 37px;
  max-height: 37px;
  margin-right: 10px;
}
.step_box p.check_icon::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 9px;
  text-align: center;
  background: url(../image/icon/ic_check.png);
  background-repeat: no-repeat;
  background-size: contain;
  margin-right: 5px;
}

.step_comp_box {
  border-radius: 4px;
  border: 1px solid #28823c;
  background: #ebf7ee;
  color: #000;
  font-size: 18px;
  font-weight: 700;
  line-height: 150%;
  padding: 24px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ==========================
モバイル　ログイン部分
============================= */
.login_mobile_ex_box {
  padding: 0 5px;
}
.login_mobile_ex_box h3 {
  color: #000;
  font-size: 16px;
  font-weight: 700;
  line-height: 120%;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
}
.login_mobile_ex_box h3 span {
  display: block;
  width: 22px;
  min-width: 22px;
}

.login_mobile_ex_box h3 span img.no1 {
  width: 15px;
  min-width: 15px;
}

.login_mobile_ex_box h3 span img.no2 {
  width: 17px;
  min-width: 17px;
}

.login_mobile_ex_text {
  color: #000;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 400;
  line-height: 120%;
}

.login_mobile_linkText {
  color: #28823c;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  line-height: 160%; /* 20.8px */
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-skip-ink: auto;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
}

/* ==========================
エラー表示
============================= */
#error-cc_number .error,
#error-cc_expiration_date .error,
#error-cc_expiration_year .error,
#error-security_code .error {
  position: relative;
  border-radius: 4px;
  background: rgba(211, 30, 30, 0.1);
  color: #d31e1e;
  font-size: 13px;
  font-weight: 500;
  line-height: 150%;
  padding: 8px 8px 8px 31px;
  border: 0px solid !important;
  display: flex;
  margin: 0px 0px 8px 0px;
}

#error-cc_number .error::before,
#error-cc_expiration_date .error::before,
#error-cc_expiration_year .error::before,
#error-security_code .error::before {
  position: absolute;
  content: "";
  top: calc(50% - 7px);
  left: 8px;
  width: 15px;
  height: 15px;
  text-align: center;
  background: url(https://cocoloni.jp/build/assets/ic_caution-B38ZIrC5.png);
  background-repeat: no-repeat;
  background-size: contain;
}

#cardExpirationMonth {
  width: 20.89%;
}
input[name="cc_expiration_year"] {
  width: 26.86%;
}
input[name="security_code"] {
  width: 26.86%;
}