@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");
/* ------------------------------
   Universal Reset
   Default Style
   Common
   Contents
   Animation
------------------------------ */

/*==================================================================
   Universal Reset
==================================================================*/
html,body{margin:0;padding:0;width:100%;height:100%;font-size:100%;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,div,object,ul,ol,li,dl,dt,dd,fieldset,form,legend,figure{margin:0;padding:0;font-size:100%;font-weight:normal;}
ul,ol{list-style:none;}
fieldset{margin:0;padding:0;border:0 none;}
legend{display:none;}
table,th,td{border:0;border-spacing:0;}
caption,th{text-align:left;}
em,strong,caption,th,address{font-style:normal;font-weight:normal;}
img{border:0 none;vertical-align:bottom;_vertical-align:text-bottom;max-width: 100%!important}
input,select,textarea{margin:0;padding:0;vertical-align:middle;}
select{-webkit-appearance: none;-moz-appearance: none; appearance: none;}
textarea{-webkit-appearance:none;appearance:none;}
input{-webkit-appearance:none;appearance:none;}
input[type="submit"],input[type="reset"]{border:none;border-radius:0;}
input[type="radio"]{-webkit-appearance:radio;appearance:radio;}
input[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}
option{padding-right:5px;}
article,aside,dialog,details,figure,figcaption,footer,header,hgroup,menu,nav,section{display:block;}
mark{font-weight:normal;font-style:normal;}
blockquote,q{quotes:none;}
a{vertical-align:baseline;text-decoration:none;}
*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-o-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;word-wrap: break-all;}
div,p{max-width:100%;word-wrap: break-word;}
input[type="file"]{background:#CCC;color:#FFF;}

/*==================================================================
   Default Style
==================================================================*/
body{font-size:12px;margin:0 auto;font-family: Verdana, Geneva, "sans-serif";-webkit-text-size-adjust:100%;color:#7f7f7f;height:auto;}
a, a:visited{color:#7f7f7f;}
a:hover, a:active{color:#7f7f7f;}

/*========== color setting ==========*/
:root {
  --site-color1 :#77c8f7; 
  --site-color2 :#ff8183;
  --sub-color   :#ff8183;
  --form-color  :#fbf6f6;
  --pink-color  :#ff8183;
  --new-color   :#F99;
  
  --head-color1 :#7c7575; /* 登録前ヘッダ */
  --head-color2 :#7c7575; /* 項目選択ヘッダ */
}

/*==================================================================
   Common
==================================================================*/
.mt_S{margin-top:0.5em !important;}
.mt_M{margin-top:1em !important;}
.mt_L{margin-top:1.5em !important;}
.mb_SS{margin-bottom: 0.2em !important;}
.mb_S{margin-bottom:0.5em !important;}
.mb_M{margin-bottom:1em !important;}
.mb_L{margin-bottom:1.5em !important;}
.pt_S{padding-top:0.5em !important;}
.pt_M{padding-top:1em !important;}
.pb_S{padding-bottom:0.5em !important;}
.pb_M{padding-bottom:1em !important;}

.mb0{margin-bottom:0!important;}
.mb1{margin-bottom:1em!important;}
.mb2{margin-bottom:2em!important;}
.mb3{margin-bottom:3em!important;}
.mg_auto{margin:auto!important;display:block!important;}
.mg_0auto{margin:0 auto!important;}
.pb0{padding-bottom:0!important;}
.pb1{padding-bottom:1em!important;}
.pt0{padding-top:0!important;}
.pt1{padding-top:1em!important;}
.b_space{padding-bottom:8em!important;}

.fontSS{font-size:0.5em!important;}
.fontS{font-size:0.8em!important;}
.fontM{font-size:0.9em!important;}
.fontL{font-size:1.2em!important;}
.fontLL{font-size:1.4em!important;}

.center{text-align:center;}
.right{text-align:right;}
.left{text-align: left;}

/*-- color --*/
.red{color:#F00;}
.gold{color: #998001;}
.gray{color: #7f7f7f;}
.lightgray{color: #ebe5e5;}
.pink{color: var(--pink-color);}
.blue{color:#6BACFB;}
.icon_cl1{color:var(--sub-color);}
.icon_cl2{color:#FFF;background:var(--sub-color);}

/*-- font --*/
.bold{font-weight:bold!important;}
.lighter{font-weight:lighter!important;}
.t_line{text-decoration: underline;}

/*-- width --*/
.wd50{width:50% !important;}
.wd90{width:90% !important;}
.wide{width:100% !important;}

/*-- other --*/
.area_01{padding:1em;}
.box_gray{padding:1em;background:#EEE;}
.square{border-radius:0 !important;}
.relative{position:relative;}
.flex{display:-webkit-flex;display:flex;justify-content: flex-start;align-items: center;}
.clm2 > *{width:50%;}
span.circle{display:inline-block;background: #7f7f7f;color:#FFF;font-size:0.8em;padding: 3px;border-radius:30px;margin-right:5px;}


/*==================================================================
   Contents
==================================================================*/
#container{max-width:1000px;margin: 0 auto;height: 100%;position: relative;}
#container > .inner{padding:3%;}
#bg_gray{background:#EEE;min-height: 100%;}

section{padding:1em;}
h2{font-weight:bold;margin-bottom: 2em;font-size:1.2em;}


/*==================== header ====================*/
header{position: fixed;z-index:100;top: 0;left: 0;width: 100%;background:#FFF;transition: 0.3s;}
header#navTab + *{margin-top:6.6em!important;}
header#navBar + *{margin-top:3.4em!important;}
header#navAll + *{margin-top:10em !important;}

/* sitename */
header p.sitename{color:#FFF;text-align: center;font-weight: bold;min-height:2.2em;padding: 5px;background:var(--site-color1);}

/* head_tab */
header ul.head_tab{display:-webkit-flex;display:flex;justify-content: space-around;border-bottom:0.5px solid rgba(0,0,0,0.3);}
header ul.head_tab > li{width:25%;}
header ul.head_tab > li > a{color:#8c8c8c;position:relative;display:block;text-align:center;padding:6px 1px 3px;}
header ul.head_tab > li > a > i{font-size: 22px;line-height: 25px;}
header ul.head_tab > li > a > p{display:block;font-size: 10px;line-height:1.6;}
header ul.head_tab > li.current a{color:var(--site-color1);}
header ul.head_tab > li.new a:after{content: "\f111";font-family: "Font Awesome 5 Free";font-weight: 900;font-size:0.8em;position: absolute;top: 15%;right: 15%;color: var(--new-color);}

/* head_bar */
header ul.head_bar{position: relative;min-height: 3.5em;padding:0.5em;border-bottom:1px solid #ebe5e5;}
header ul.head_bar > li{width:20%;font-size:1.2em;font-weight:bold;}
header ul.head_bar > li > a{font-weight:bold;}
header ul.head_bar > li:nth-child(2){width:60%;text-align: center;}
header ul.head_bar > li:nth-child(3){text-align:right;padding-right:5px;/* scroll bar 対策 */}
header ul.head_bar > li > a span{display:inline-block;font-weight:lighter;padding-left: 5px;font-size:0.7em;vertical-align:top;margin-top: 7px;position: absolute;top:0.5em;left: 2em;max-width: 25%;overflow: hidden;white-space: nowrap;text-overflow: ellipsis;}

/* header.info */
header.info{background:var(--head-color1);color:#FFF;position:sticky;display:block;top: 0;left: 0;width: 100%;padding:1em 1em 1em 5em;}
header.info p.icon{font-size:2.5rem;position:absolute;top:5px;left:0.3em;}
header.info h1{font-weight:bold;}


/*==================== form ====================*/
input,select,textarea{width: 100%;color: #7f7f7f;font-size:initial;border:none;padding:0.5em;border-radius:0.2em;background:var(--form-color);}
input::placeholder,textarea::placeholder{color:#9d9d9d;}
input[type="submit"].submit_nomal{background-color:transparent;color:#7f7f7f;border:none;margin: 0 auto;padding:0 0 10px;font-size:1em;}
input[type="file"]{display:none !important;}
form#step2 input[type="text"]{color: #F99;text-align: right;text-align:-moz-right;}
/* area_imagefile */
.area_imagefile label{display: block;width:100%;text-align: center;background:var(--form-color);border:1px dashed #CCC;}
.area_imagefile label > span{display: block;color:var(--site-color1);font-size:1.2em;padding:1em;}
.area_imagefile label > span > i{margin-right:0.5em;}

/*==================== overlay ====================*/
#overlay{position:fixed;width: 100%;height:100%;bottom:0;left:0;background:rgba(0,0,0,.6);display:none;z-index:1000;}
#overlay > div{position:absolute;top:50%;width: 94%;max-width: 375px;left: 50%;padding-top: 1em;text-align: center;background: #FFF;border-radius:1em;
-ms-transform: translate(-50%, -50%);-webkit-transform : translate(-50%, -50%);transform : translate(-50%, -50%);}
#overlay > div > h3{font-size:1.2em;font-weight:bold;}
#overlay > div > p{padding-bottom:1em;}
#overlay > div > a{display:block;padding: 1em;border-top:1px solid #EEE;color:#6BACFB;border-radius:0 0 1em 1em;font-weight:bold;font-size:1.2em;}
#overlay > div > a:hover{background: #F3F3F3;}
#overlay > div.inner{padding:1.5em 5% 2%;}
#overlay .textarea{max-height: 65vh;min-height: 15vh;overflow-y: scroll;text-align: left;padding: 0.5em;border: 1px solid #EEE;border-width: 1px 0;}
#overlay .infocheck label{position: relative;padding-left:2em;}
#overlay .infocheck label input[type="checkbox"]{display: none;}
#overlay .infocheck label input[type="checkbox"] + span::before{content: "";display: block;width: 11px;height: 11px;
 position: absolute;top: 50%;left: 0;transform: translateY(-50%);border: 2px solid #CCC;border-radius: 3px;cursor: pointer;}
#overlay .infocheck label input[type="checkbox"]:checked + span::before{border-color:#1c506f;background:#1c506f;}
#overlay .infocheck label input[type="checkbox"]:checked + span::after{content: "";display: block;width: 10px;height: 5px;border-bottom: 2px solid #fff;border-left: 2px solid #fff;box-sizing: border-box;
 position: absolute;top: 40%;left: 4px;
 -webkit-transform: rotate(-45deg);
 transform: rotate(-45deg) translateY(-50%);}

#overlay.box_message .inner h3{font-size:1.4em !important;}
#overlay.box_message .inner .close{text-decoration: underline;}
#overlay.box_message .area_send{position: relative;width: 60%;margin: 0 auto;left: 0;}
#overlay.box_message .area_send > h3{color:var(--sub-color);padding-top:1.5em;margin-bottom:0.5em;}
#overlay.box_message .area_send > span.icon{position: absolute;top:-1em;left:0;right:0;margin:auto;display:block;width:50px;font-size:2em;text-align:center;line-height:2em;border-radius:50%;}

#overlay.box_image .inner .image > img{max-height: 70vh;}
#overlay.box_image .inner .close{text-decoration: underline;}

#overlay.box_credit .inner .close{text-decoration: underline;}
#overlay.box_credit ul{width:80%;margin:0 auto;}
#overlay.box_credit ul > li{display: flex;padding:5px;margin-bottom:15px;border-bottom:2px solid #000;align-items: baseline;}
#overlay.box_credit ul > li > p{width:50%;}
#overlay.box_credit ul > li > p > span{font-size:14px;margin-left:3px;}
#overlay.box_credit ul > li > p:first-child{text-align:left;}
#overlay.box_credit ul > li > p:last-child{text-align: right;}
#overlay.box_credit ul > li > p:last-child{font-size:1.6em;font-weight:bold;}
#overlay.box_credit dl{width:80%;margin:1.5em auto;text-align: left;}
#overlay.box_credit dl > dt{margin-bottom:5px;}
#overlay.box_credit input[type="text"]{border:1px solid #7f7f7f;}

#overlay_friend,
#overlayMail{position:fixed;width: 100%;height:100%;bottom:0;left:0;background:rgba(0,0,0,.6);display:none;z-index:1100;}
#overlay_friend > div,
#overlayMail > div{position:absolute;top:50%;width: 94%;max-width: 375px;left: 50%;padding-top: 1em;text-align: center;background: #FFF;border-radius:1em;
-ms-transform: translate(-50%, -50%);
-webkit-transform : translate(-50%, -50%);
transform: translate(-50%, -50%);}
#overlay_friend > div.inner,
#overlayMail > div.inner{padding:1.5em 5% 2%;}
#overlay_friend > div > h3,
#overlayMail > div > h3{font-size:1.2em;font-weight:bold;}

#overlay_friend > div > .icon{width:15%;max-width:60px;margin:0 auto 1em;}
#overlay_friend > div > p{padding-bottom:1em;}
#overlay_friend > div > p.btn_01 > a{font-weight:bold;}
#overlay_friend > div > a{display:block;padding: 1em;border-top:1px solid #EEE;color:#6BACFB;border-radius:0 0 1em 1em;font-weight:bold;font-size:1.2em;}
#overlay_friend > div > a:hover{background: #F3F3F3;}


/*==================== 通報・ブロック ====================*/
div#box_report{position:fixed;width: 100%;height:100%;left:0;bottom:0;background:rgba(0,0,0,.6);display:none;}
div#box_report ul{position:absolute;width: 96%;left:2%;bottom:10px;}
div#box_report ul li a{background:#FFF;font-weight: bold;text-align: center;display:block;text-align: center;padding:1em;font-size:1.1em;}
div#box_report ul li a:hover{background: #F3F3F3;}
/* リミット解除 */
div#box_report ul li.lmt > a{color:#FFF;font-weight:bold;background:#FF5B5B;border-radius:3em;margin-bottom: 1em;}
div#box_report ul li.lmt > a:hover{background:#e04b4b;}
div#box_report ul li.lmt > a.on::before,
div#box_report ul li.lmt > a.off::before{font-family:"Font Awesome 5 Free";font-weight:900;margin-right:0.5em;}
div#box_report ul li.lmt > a.on::before{content:"\f09c";}
div#box_report ul li.lmt > a.off::before{content:"\f023";}
/* 通報・ブロック */
div#box_report ul li.rpt > a{color:#FF5B5B;border-radius:0.5em 0.5em 0 0;border-bottom:1px solid #EEE;}
div#box_report ul li.blc > a{color:#FF5B5B;border-radius:0 0 0.5em 0.5em;margin-bottom:0.5em;}
/* キャンセル */
div#box_report ul li.close a{color:#6BACFB;font-weight:bold;border-radius:0.5em;}

/*-- 通報ページ --*/
dl#area_report{background:#EEE;padding-bottom: 1em;}
dl#area_report dt , dl#area_report dd{background: #FFF;padding:1em;margin-bottom: 10px;}
dl#area_report dt img{display:block;width:60%;margin: auto;border-radius:50%;}


/*==================== list ====================*/
/* ul_list ==========*/
ul.list_simple li a{display:block;padding:1em;border-bottom:1px solid #ebe5e5;position: relative;font-size:1.1em}
ul.list_simple li a:after{display: block;content: "";position: absolute;top: 50%;right: 10px;width: 6px;height: 6px;margin: -4px 0 0 0;border-top: solid 2px #7f7f7f;border-right: solid 2px #7f7f7f;-webkit-transform: rotate(45deg);transform: rotate(45deg);}

ul.list_circle li{padding-left: 1em;text-indent: -1em;}
ul.list_circle li:before{content:"・";}

/* 数字リスト */
ul.list_number{list-style: decimal;padding-left:1.5em;}
ul.list_number > li{margin-bottom:0.5em;}
/* 括弧付き数字リスト */
ul.list_number2{padding-left:2em;}
ul.list_number2 > li{counter-increment: cnt;}
ul.list_number2 > li:before{content: "(" counter(cnt) ") ";margin-left:-2em;}
/* 備考リスト(緑) */
ul.list_notes{padding:1em;border:2px solid #00b900;border-radius:5px;}
ul.list_notes li{color:#00b900;font-weight:bold;margin-bottom:0.5em;}
ul.list_notes li:last-child{margin-bottom: 0;}

/* list_btn */
ul.list_btn > li{margin-bottom:0.5em;}
ul.list_btn.clm2,ul.list_btn.clm3,ul.list_btn.clm4{display:-webkit-box;display:-webkit-flex;display: -ms-flexbox;display: flex;align-items:center;flex-wrap:wrap;}
ul.list_btn.clm2 > li{width:50%;}
ul.list_btn.clm3 > li{width:33.3%;}
ul.list_btn.clm4 > li{width:25%;}
ul.list_btn.clm2 > li a, ul.list_btn.clm2 > li button, ul.list_btn.clm2 > li input[type="submit"], ul.list_btn.clm2 > li input[type="reset"], ul.list_btn.clm2 > li .jsbtn > span,
ul.list_btn.clm3 > li a, ul.list_btn.clm3 > li button, ul.list_btn.clm3 > li input[type="submit"], ul.list_btn.clm3 > li input[type="reset"], ul.list_btn.clm3 > li .jsbtn > span,
ul.list_btn.clm4 > li a, ul.list_btn.clm4 > li button, ul.list_btn.clm4 > li input[type="submit"], ul.list_btn.clm4 > li input[type="reset"], ul.list_btn.clm4 > li .jsbtn > span{width:95%;margin:1em auto;border-radius:5px;box-shadow:none;}

/* dl_list ==========*/
dl.text dt{font-size:1.4em;color:var(--site-color1);margin-bottom: 0.5em;}
dl.text dd li{padding-left: 1em;text-indent: -1em;}
dl.text dd li:before{content:"・";}
/* 規約 */
dl.normal dt{font-weight:bold;margin-bottom:0.5em;}
dl.normal dd{margin-bottom:1.5em;}
/* 説明 */
dl.howto > dt{font-weight:bold;font-size:1.2em;color:var(--site-color1);margin-bottom:0.5em;border-bottom: 2px solid var(--site-color1);}
dl.howto > dt span{display:inline-block;background:var(--site-color1);color:#FFF;padding:0.2em; margin-right:0.3em;}
dl.howto > dd{margin-bottom:2.5em;}

/* list_input */
dl.list_input{font-size:1.1em;text-align: left;margin-bottom:3em;}
dl.list_input > dt{font-weight:bold;margin:1.5em 0 0.5em;}
dl.list_input > dt span.required{display: inline-block;vertical-align:text-top; color:#FFF;font-size:0.8em;padding:0 0.5em;margin:0 0.5em;border-radius:5px;background:#FF0000;}
dl.list_input > dt:first-child{margin-top:0;}
dl.list_input > dd{margin-bottom:0.5em;}


/*==================== table  ====================*/
table.tbl_01{width:100%;margin-top: 0.5em;}
table.tbl_01 thead th{background:var(--site-color1);color:#FFF;}
table.tbl_01{border-top:1px solid #7f7f7f;border-left:1px solid #7f7f7f;}
table.tbl_01 td,table.tbl_01 th{border-right:1px solid #7f7f7f;border-bottom:1px solid #7f7f7f;padding:0.5em;}
table.tbl_01.center th,table.tbl_01.center td{text-align: center;}


/*==================== button ====================*/
/* btn_01 select (site-color1) */
.btn_01 a,
.btn_01 input,
.btn_01 button,
.btn_01 input[type="file"] + label,
.btn_01.jsbtn > span{background: var(--site-color1);border:2px solid var(--site-color1);color:#FFF;display:block;border-radius:30px;text-align: center;padding: 10px;margin:1.5em auto;width:70%;font-size:1.2em;}
.btn_01.mltline > :is(a, input, button, label, span){line-height: 1.2;padding: 5px;}
.btn_01 a:hover,
.btn_01 input:hover,
.btn_01 button:hover,
.btn_01 input[type="file"] + label:hover,
.btn_01.jsbtn > span:hover{background: #FFF;color: var(--site-color1);}
/* .btn_02 cancel #7f7f7f*/
.btn_02 a,
.btn_02 input,
.btn_02 button,
.btn_02.jsbtn > span{background: #7f7f7f;border:2px solid #7f7f7f;color:#FFF;display:block;border-radius:30px;text-align: center;padding: 10px;margin:1.5em auto;width:70%;font-size:1.2em;}
.btn_02.mltline > :is(a, input, button, label, span){line-height: 1.2;padding: 5px;}
.btn_02 a:hover,
.btn_02 input:hover,
.btn_02 button:hover,
.btn_02.jsbtn > span:hover{background: #FFF;color: #7f7f7f;}
/* btn_03 contents (sub-color) */
.btn_03 a,
.btn_03 input,
.btn_03 button,
.btn_03.jsbtn > span{background: var(--sub-color);border:2px solid var(--sub-color);color:#FFF;display:block;border-radius:30px;text-align: center;padding: 10px;margin:1.5em auto;width:70%;font-size:1.2em;}
.btn_03.mltline > :is(a, input, button, label, span){line-height: 1.2;padding: 5px;}
.btn_03 a:hover,
.btn_03 input:hover,
.btn_03 button:hover,
.btn_03.jsbtn > span:hover{background: #FFF;color: var(--sub-color);}

/* btn_circle */
.btn_circle a,
.btn_circle.jsbtn > span{display:inline-block;width:70px;height:70px;color:var(--site-color1);font-size:0.9em;font-weight:bold;text-align: center;padding:1.1em 0;line-height: 1.6;border:2px solid var(--site-color1);border-radius:50%;background:#FFF;box-shadow:5px 5px 10px rgb(133 133 133 / 30%);}
.btn_circle a > i,
.btn_circle.jsbtn > span > i{width:100%;font-size:1.8em;}
.btn_circle a > span,
.btn_circle.jsbtn > span > span{width:100%;}
/* btn_circle.support */
.btn_circle.support > a{width:75px;height:75px;line-height:1;padding:1.3em 0;}
.btn_circle.support > a > span{display:block;margin-top:0.25em;}
.btn_circle.support > a > i{font-size:1.6em;}

/* fix_btn */
.fix_btm{position:fixed;left:0;bottom:0;width:100%;z-index:99;}
.fix_ribtm{position:fixed;right:1em;bottom:1em;z-index:99;}

/* LINE登録ボタン */
.btn_line a{display:block;margin:15px auto;padding:15px 10px;width:70%;color:#fff !important;font-size:1.2em;font-weight: bold; border-radius:5px;text-align:center;line-height:1;
 background:#00b900 url(../img/icon_line.png) no-repeat;
 background-size:auto 70%;
 background-position: calc(50% - 60px);}
.btn_line a > span{padding-left: 30px;}



/*=================== 探すタブ =================== */
ul#list_search{display:-webkit-flex;display:flex;justify-content: flex-start;justify-content:space-between;flex-wrap: wrap;padding: 1em 0.5em;}
ul#list_search > li{width:49%;margin-bottom: 2em;}
ul#list_search > li dt{position:relative;}
ul#list_search > li dt img{max-width: 100%;max-height: 100%;width: 100%;
 -o-object-fit: cover;
 object-fit: cover;border-radius:0.5em;}
ul#list_search > li dd{text-align:center;display:-webkit-flex;display:flex;justify-content: flex-start;justify-content:center;align-items: center;padding-top:5px;}
ul#list_search > li dd p{margin-left:0.5em;}
ul#list_search > li dd p:nth-child(1){font-weight:bold;position:relative;}
ul#list_search > li dd p:nth-child(1):before{font-family: "Font Awesome 5 Free";content: "\f111";color:#ebe5e5;padding-right:10px;}
ul#list_search > li dd.online p:nth-child(1):before{color:#7eccbc;}

/*-- サーチボタン --*/
#btn_search{background:var(--site-color2);color:#FFF;border:2px solid #FFF;position:fixed;bottom:1em;right:1em;z-index:100;text-align: center;padding:1.2em;border-radius:50%;}
#btn_search span{font-size:0.8em;display:block;margin-top: 3px;}

/*-- ユーザ検索 --*/
body.open { width: 100%;height: 100%;margin: auto;position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow: hidden;}
#userserch{position:fixed;bottom:0;left:0;width: 100%;height: 100%;background: #FFF;z-index: 9999;display:none;overflow: auto;
-webkit-transform: translate3d(0,0,0);transform: translate3d(0,0,0);
-webkit-backface-visibility:hidden;backface-visibility:hidden;
}
#userserch p#close{text-align:right;padding:0.5em;font-size:1.8em;}
#userserch p#return{padding:0.5em;font-size:2em;position:absolute;}


/* 相手プロフィール画面 =================== */
#area_photo{position:relative;}
#area_photo > p img{width: 100%;}
#area_photo > div{position:absolute;left:0;bottom:0;width: 100%;background: rgba(0,0,0,.5);color:#FFF;font-size:1.2em;
padding:3px 1em;}
#area_photo > div p{margin-right:1em;}
#area_photo + ul{padding:0.5em;overflow: auto;width: 100%;}
#area_photo + ul li{margin-right:0.3em;width: 14%;}
#area_photo + ul li:last-child{margin-right:0;}
#area_photo + ul li img{border-radius:5px;border:2px solid #FFF;}
#area_photo + ul li img:hover,
#area_photo + ul li img:active{border:2px solid var(--site-color1);}


/*=================== トークタブ =================== */
/*-- トークリストバナー --*/
.talk_topbnr{/*position: sticky;top:4.5em;*/width:100%;text-align: center;padding-top: 0.5em;}
.talk_topbnr a{display: block;}
/*-- トークリスト切り替え --*/
ul#tab_talk{padding:1em 5%;display:-webkit-flex;display:flex;justify-content: flex-start;justify-content:space-between;background: #FFF;}
ul#tab_talk li{width:48%;margin-right: 4%;}
ul#tab_talk li:last-child{margin-right:0;}
ul#tab_talk li a{background: #FFF;border:1px solid var(--sub-color);border-radius:30px;display:block;text-align: center;padding:2px;}
ul#tab_talk li a.current{background:var(--sub-color);border-color: var(--sub-color);color:#FFF;}
/*--　トーク一覧　--*/
ul.list_talk li{position:relative;border-bottom:1px solid #ebe5e5;}
ul.list_talk li a{display:block;padding:0.5em;background: #FFF;}
ul.list_talk li a dl{display:-webkit-flex;display:flex;justify-content: flex-start;justify-content:space-between;}
ul.list_talk li a dl dt{width:28%;}
ul.list_talk li a dl dt img{border-radius:50%;width: 90%;}
ul.list_talk li a dl dd{width:76%;align-items: center;}
ul.list_talk li a dl dd > p{margin-bottom: 5px;font-size:1.2em;}
ul.list_talk li a dl dd > p:nth-child(1){color:var(--site-color1);font-weight: bold;padding-top:5px;}
ul.list_talk li a dl dd > p:nth-child(2){overflow: hidden;text-overflow: ellipsis; white-space: nowrap;margin-right: 2em;}
ul.list_talk li a dl dd > p:nth-child(2) br{display:none;}
ul.list_talk li a dl dd > p:nth-child(3){font-size:0.9em;}

ul.list_talk li.new::after{font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f111";color: var(--new-color);font-size:1.2em;line-height:1;position:absolute;right:15px;top:50%;transform: translateY(-50%);}
ul.list_talk li.new a dl dd > p:nth-child(2){display: block;color:#7eccbc;}
#box_talk{padding-bottom:100px;}/* 下部固定ボタン用余白設定 */

/* チャット画面 ===================*/
#area_chat{min-height: calc(100vh - 10em); /* タブ分をマイナス */
 padding:1em;background-color:#f9f9f9;}
ul.list_chat {padding-bottom:2em;}
ul.list_chat li{margin-bottom: 1.5em;}
ul.list_chat li > dl{display:flex;align-items: flex-start;width: 100%;}
ul.list_chat li > dl dt{min-width: 50px;width: 50px;padding-top: 5px;margin-right:10px;}
ul.list_chat li > dl dt img{border-radius:50%;}
ul.list_chat li p{word-wrap: break-word;max-width:100%;}
ul.list_chat li p.date{font-size:0.8em;margin-bottom: 5px;}
ul.list_chat li p.message{color:#4f4f4f;font-size: 16px;background: #FFF;border:1px solid #7f7f7f;padding:0.5em;border-radius:8px;background: #FFF;display: inline-block;word-break: break-word;}
ul.list_chat li p.image{border:1px solid #7f7f7f;padding:0.5em;max-width:130px;background: #FFF;display: inline-block;}
ul.list_chat li.opp{margin-right: 10%;}
ul.list_chat li.opp > dl{justify-content: flex-start;}
ul.list_chat li.my{margin-left: 20%;text-align:right;}
ul.list_chat li.my > dl{justify-content: flex-end;}
ul.list_chat li.my p.message{background:var(--form-color);text-align: left;}
ul.list_chat li.my p.image{background:var(--form-color);}
ul.list_chat li p.mask{position: relative;}
ul.list_chat li p.mask > a{position:absolute;top:50%;left:50%;width: 80%;text-align: center; background:#998001;color:#FFF;padding:0.5em 1em;border-radius:30px;border:2px solid #998001;
-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
ul.list_chat li p.mask > a:hover{background: #FFF;color:#998001;}
/* バナー */
#area_chat p.chat_bn{position:fixed;bottom:60px;left: 0;right: 0;margin: auto;width: 90%;text-align: center;}
/* 入力フォーム */
form#chat_form{position:fixed;bottom:0;left:0;width: 100%;display:-webkit-flex;display:flex;justify-content:center;align-items: flex-end;background: #FFF;padding:0.5em;}
form#chat_form input[type="file"]{display: none;}
form#chat_form input[type="file"] + label {display:block;width:10%;margin-right:2%;font-size:2.8em;line-height:1;text-align: center;}
form#chat_form textarea{color: #4f4f4f;font-size: 16px;border:1px solid var(--form-color);width: 73%;height:35px;line-height: 1.2;margin-right:2%;max-height: 200px;}
form#chat_form input[type="submit"]{background: var(--site-color1);color:#FFF;text-align: center; padding:0.3em;width: 13%;border-radius:0.5em;font-size:1.2em;}
/* お気に入り追加 */
div#sendlike{display:none;position:fixed;top: 50%;left:23%;width: 54%;padding: 2em 1em;background: #FFF;
box-shadow:0 0 4px #555;z-index: 100;border-radius:5px;
-ms-transform: translateY(-50%);-webkit-transform : translateY(-50%);transform : translateY(-50%);}
div#sendlike p{position: absolute;left:50%;top:-18px;background: var(--pink-color);color:#FFF;padding:8px;border-radius:30px;border:2px solid #FFF;font-size: 16px;-ms-transform: translateX(-50%);-webkit-transform : translateX(-50%);transform : translateX(-50%);}
div#sendlike h3{text-align: center;color:var(--pink-color);font-weight:bold;font-size:1.1em;}


/*=================== マイページタブ =================== */
h1.ttl_mypage{font-size:1.2em;font-weight:bold;padding:0.5em 2.5em;text-align: center;border-bottom:1px solid #ebe5e5;}
h1.ttl_mypage .conf{position:absolute;right:10px;top: 50%;transform: translateY(-50%);font-size:1.3em;}

#my_profire dl{width:100%;display:table;}
#my_profire dt,
#my_profire dd{display:table-cell;vertical-align: top;}
#my_profire dt {width:30%;}
#my_profire dt input[tye="file"]{display:none;}
#my_profire dt label {display:block;text-align:center;}
#my_profire dt label img{border-radius:50%;}
#my_profire dt .userid{font-weight:bold;text-align:center;margin-bottom:0.3em;}
#my_profire dd{padding-left:1.5em;}
#my_profire dd .area_point{background:var(--form-color);border-radius:0.5em;padding:0.5em;}
#my_profire dd .area_point p{text-align: center;}
#my_profire dd .area_point p > i{font-size:1.7em;}
#my_profire dd .area_point p > span{font-weight:bold;}
#my_profire dd .area_point p > span.point{color:var(--pink-color);font-size:2em;margin-right:5px;}
#my_profire dd .area_point p.point_dtl{font-size: 0.9em;margin: 0.5em 0;}
#my_profire dd .area_point p.point_dtl > span{color:var(--pink-color);font-weight:bold;}
#my_profire dd .area_point p.btn_point a{display: block;width:80%;margin:0.5em auto;padding:5px;color:#6f5d00;font-weight:bold;text-align: center;background:#fff039;border-bottom:2px solid #7f7f7f;border-radius:5px;}
#my_profire dd .note{font-size:0.9em;}
/* mymenu list */
ul.mymenu{display: -webkit-flex;display:flex;flex-wrap: wrap;border-left:1px solid #ebe5e5;border-bottom:1px solid #ebe5e5;}
ul.mymenu li{width:50%;border-top:1px solid #ebe5e5;border-right:1px solid #ebe5e5;}
ul.mymenu li a{position: relative;display:block;text-align: center;background: #FFF;padding:1.5em 1em 1em;}
ul.mymenu li a span{font-size:0.8em;display:block;margin-top:2em;}
ul.mymenu li.new a:after{content: "\f111";font-family: "Font Awesome 5 Free";font-weight: 900;position: absolute;top: 10%;right: 15%;color: var(--new-color);}
/* slide banner */
.swiper-container{margin:0.5em auto;padding-bottom:1em !important;background:#FFF;}
.swiper-wrapper{margin-bottom:0.5em;}
.swiper-slide{padding:0.5em;text-align: center;}
.swiper-pagination{bottom:0em !important;}
/* event banner */
.evbanner{margin:2% 5%;text-align: center;}
.evbanner a{display: block;}

/*=================== サポート問合せ =================== */
.ttl_support{color: #FFF;font-size: 1.2em;text-align: left;padding: 0.5em 1em;margin-bottom:0;background: var(--site-color1);}
/*--- list_mail ---*/
ul.list_mail > li{display:block;color:#484848;font-size:1.2em;padding:1em;border-bottom:1px solid #EEE;position: relative;min-height:4em;}
ul.list_mail > li:after{display: block;content: "";position: absolute;top: 50%;right: 15px;width: 6px;height: 6px;margin: -4px 0 0 0;border-top: solid 2px #8c8c8c;border-right: solid 2px #8c8c8c;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);}
ul.list_mail > li p.date{color:#8c8c8c;}
ul.list_mail > li p.detail{white-space: nowrap;text-overflow: ellipsis;overflow: hidden;}
ul.list_mail > li.new > p{font-weight:bold;}
ul.list_mail > li.new > p.date:before{content: "\f111";font-family: "Font Awesome 5 Free";color: var(--new-color);font-weight: 900;margin-right:0.5em;z-index:1;}
/* support */
ul.list_mail.support > li{padding:1em 2em 1em 4.5em;}
ul.list_mail.support > li:before{content:"\f590";font-family: "Font Awesome 5 Free";font-weight: 900;color:#FFF;font-size:1.6em;text-align: center;line-height:1.8em;position: absolute;top: 50%;left: 0.5em;width:1.8em;height:1.8em;background:var(--site-color1);border-radius:5px;transform: translateY(-50%);}

/*-- maildetail --*/
.maildetail{font-size:1.2em;padding:1em;}
.maildetail .date{color:#8c8c8c;font-size:0.9em;text-align: right;margin-bottom:0.5em;}
.maildetail .detail{text-align: justify;}
.maildetail .detail img{display: block;}

/*=================== ポイント購入 =================== */
.mypoint{background:#FFF;border-radius:0.5em;padding:0.5em;}
.mypoint h2,
.mypoint p{font-size:1.2em;text-align: center;}
.mypoint p > i{font-size:1.7em;}
.mypoint p > span{font-weight:bold;}
.mypoint p > span.point{color:var(--pink-color);font-size:2em;margin-right:5px;}
/* list_pay */
ul.list_pay{padding-bottom:100px;}/* 下部固定ボタン用余白設定 */
ul.list_pay > li{margin:0 1% 1.5em;background:#FFF;border-radius:5%;box-shadow:0px 5px 5px #AAA;position: relative;}
ul.list_pay > li > a{display: block;}
ul.list_pay > li p.recommend{position: absolute;background:#00000000 !important;top: -6px;right: -5px;width: 89px;height: 91px;overflow: hidden;z-index:11;}
ul.list_pay > li p.recommend span{display: inline-block;position: absolute;width: 160px;top: 22px;left: -23px;color: #fff;font-size: 1em;font-weight:bold;text-align: center;line-height: 16px;padding: 7px 0;background: #FF595F;letter-spacing: 0.05em;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);}
ul.list_pay > li p.recommend span:before,
ul.list_pay > li p.recommend span:after{position: absolute;content: "";bottom: -4px;
 border-top: 4px solid #cb1d23;
 border-left: 4px solid transparent;
 border-right: 4px solid transparent;}
ul.list_pay > li p.recommend span:before{left: 14px;}
ul.list_pay > li p.recommend span:after {right: 18px;}
/* list_cardbrand ※画像上にabsolute指定※ */
ul.list_pay > li ul.list_cardbrand{position:absolute;top: 36%;left: 36%;width: 55%;z-index: 10;
display:flex;align-items: center;justify-content: space-evenly;}
ul.list_pay > li ul.list_cardbrand > li{width:calc(100% / 6);}

/* list_point */
ul.list_point li a{display: block;margin-bottom:1.5em;}
ul.list_point li a dl{display:table;width:100%;border-radius:10px;box-shadow:0px 5px 5px #AAA;}
ul.list_point li a dl dt{display: table-cell;vertical-align: middle;width:40%;color:#FFF;background:#0179c5;border-top-left-radius:10px;border-bottom-left-radius:10px;}
ul.list_point li a dl dt > p{font-size:1.6em;font-weight:bold;text-align:center;}
ul.list_point li a dl dd{display: table-cell;width:60%;text-align:center;padding:5%;background:#FFF;border-top-right-radius:10px;border-bottom-right-radius:10px;}
ul.list_point li a dl dd > p{font-size:1.8em;font-weight:bold;line-height: 1.2;}
ul.list_point li a dl dd > span{display: block;color:#FF0000;font-size:1.2em;}
ul.list_point li.normal a dl dt{background:#998001;}


/*=================== プロフィール編集 =================== */
#prof_edit{padding:1em 0;}
#prof_edit > img{display:block;margin: auto;width: 50%;border-radius:50%;}
#prof_edit > h3{border-bottom:1px solid #7f7f7f;padding:1em 0.5em 0;}
#prof_edit > ul{padding:0.5em;align-items: stretch;}
#prof_edit > ul li{background: var(--site-color1);color:#FFF;border:2px solid var(--site-color1);width:16%;margin-right: 0.8%;border-radius:50%;text-align: center;position:relative;}
#prof_edit > ul li img{border-radius:50%;}
#prof_edit > ul li label{display:block;position:absolute;top:50%;left:50%;-webkit-transform: translate(-50%, -50%);transform: translate(-50%, -50%);}
#prof_edit > ul li:empty{background: var(--form-color);}
#prof_edit > ul li:last-child{margin-right: 0 !important;}
#prof_edit > p a{display:block;padding:1em 2em 1em 0.5em;border-bottom: 1px solid #7f7f7f;position:relative;}
#prof_edit > p a:after{display: block;content: "";position: absolute;top: 50%;right: 10px;width: 6px;height: 6px;margin: -4px 0 0 0;border-top: solid 2px #7f7f7f;border-right: solid 2px #7f7f7f;-webkit-transform: rotate(45deg);transform: rotate(45deg);}
#prof_edit > p a span{display:inline-block;width: 70%;text-align: right;}
/*　料金　*/
ul.paid_paidplan{padding:1em 0;}
ul.paid_paidplan li{margin-bottom: 1em;}
/* 画像更新 */
div#box_subimg{position:fixed;width: 100%;height:100%;left:0;bottom:0;background:rgba(0,0,0,.6);display:none;}
div#box_subimg ul{position:absolute;width: 96%;left:2%;bottom:5px;}
div#box_subimg ul li form{background:#FFF;text-align: center;display:block;text-align: center;color:#FF5B5B;padding:1em;font-size:1.1em;}
div#box_subimg ul li form label{display: block;}
div#box_subimg ul li:first-child form{border-radius:1em 1em 0 0;border-bottom:1px solid #EEE;}
div#box_subimg ul li a{background:#FFF;text-align: center;display:block;text-align: center;color:#FF5B5B;padding:1em;font-size:1.1em;}
div#box_subimg ul li:nth-child(2) a{border-radius:0 0 1em 1em;margin-bottom: 5px;}
div#box_subimg ul li:last-child a{color:#6BACFB;font-weight:bold;border-radius:1em;}
div#box_subimg ul li a:hover{background: #F3F3F3;}

/*=================== メールアドレスボーナス =================== */
.area_mailbonus{color:#333;font-size:1.2em;text-align:center;margin-bottom:1.5em;}
.area_mailbonus .ttl_bonus{color: var(--site-color1);font-size: 1.2em;font-weight:bold;text-align: center;padding: 0.5em 1em;margin-bottom:1em;border-bottom:2px solid var(--site-color1);}
.area_mailbonus > p{font-weight:bold;}
.area_mailbonus > p.bonuspoint {color:#FF0000;font-size:1.2em;}
.area_mailbonus > p.bonuspoint > span{display:block;color:#FF0000;font-size:2em;font-weight:bold;width:70%;margin:0.2em auto;padding:0.1em;text-shadow:-2px 0 0 #FFF, 0 -2px 0 #FFF,2px 0 0 #FFF,0 2px 0 #FFF;
background: repeating-linear-gradient(-45deg, #ffffc5, #ffffc5 5px, #FFF 0, #FFF 10px);}
.area_mailbonus > p.process{margin-top:1em;}

/*==================== プッシュ設定  ====================*/
ul#noticeset li{border-bottom:1px solid #ebe5e5;justify-content: space-between;padding:5px 10px;}

/*switch design*/
.switch_label {display: inline-block;width: 50px;position: relative;}
.switch_content {display: block;height: 31px;border-radius: 30px;overflow: hidden;cursor: pointer;position: relative;}
.switch_content:before {position: absolute;display: block;
 content: "";
 width: calc(100% - 3px);
 height: calc(100% - 3px);
 top: 0;
 left: 0;
 border: 1.5px solid #E5E5EA;
 border-radius: 30px;
 background-color:#DADADA;
}
.switch_content:after {position: absolute;display: block;
 content: "";
 width: 0;
 height: 0;
 top: 50%;
 left: 50%;
 background-color: transparent;
 border-radius: 30px;
-webkit-transition: all .3s;
   -moz-transition: all .3s;
    -ms-transition: all .3s;
     -o-transition: all .3s;
	        transition: all .3s;
}
.switch_input {display: none;}
.switch_circle {position: absolute;display: block;
 top: 2px;
 left: 2px;
 width: 27px;
 height: 27px;
 background-color: #fff;
 -webkit-box-shadow: 0 2px 6px #999;
         box-shadow: 0 2px 6px #999;
 -webkit-border-radius: 20px;
         border-radius: 20px;
 -webkit-transition: all .3s;
    -moz-transition: all .3s;
     -ms-transition: all .3s;
      -o-transition: all .3s;
         transition: all .3s;
}
.switch_input:checked ~ .switch_circle {left: 21px;}
.switch_input:checked ~ .switch_content:after {
 background-color: #4BD964;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}


/*=================== 初期登録/設定変更時 =================== */
/* ログイン前サービス紹介 */
.service_intro{display: flex;padding:5% 0;border:1px solid #EEE;border-width:2px 0;}
.service_intro figure{width:35%;margin-right:5%;}
.service_intro p{width:60%;color:var(--site-color1);}

div.info{padding:1em 3em;}
div.info > img{display:block;margin: 0 auto 1em;}
div.proftop{background: #ebe5e5;display: -webkit-flex; display: flex;justify-content:center;align-items: center;padding: 0.4em 2em;}
div.proftop p{font-size:1.3em; margin-right:1em;}

dl.profile {width:100%;display: -webkit-flex;display:flex;flex-wrap: wrap;align-items: baseline}
dl.profile dt{width:40%;}
dl.profile dt span{display: inline-block;background: #FF0000;color:#FFF;border-radius:10px;font-size:0.9em;padding:0 0.5em;margin-right:0.5em;}
dl.profile dd{width: 60%; margin-bottom:2em;}

ul#proflist{padding-bottom:1em;}
ul#proflist > li{border-bottom:1px solid #ebe5e5;padding:0.6em 0;margin-bottom: 1em;
display: -webkit-flex; display: flex;justify-content: flex-start;align-items: center;}
ul#proflist > li > p{width:50%;font-size:1.1em;-webkit-tap-highlight-color:rgba(0,0,0,0);}
ul#proflist > li > p.inputvalue,
ul#proflist > li > p:nth-child(2){text-align: right;color:#7f7f7f;}
ul#proflist > li:last-child{margin-bottom:0;}
div#proftext p{font-size:1.1em;}

div.radiobox{position: fixed;width: 100%;height: 100%;top: 0;left:0;background:#FFF;z-index: 10000;display:none;}
div.radiobox h3{background: var(--head-color2);color:#FFF;padding:15px 10px;text-align: center;font-size:1.2em;position:relative}
div.radiobox > ul{margin:0 20px;overflow-y: auto;height: 90%;position: relative;-webkit-overflow-scrolling: touch;}
div.radiobox > ul input[type="radio"],div.radiobox > ul input[type="checkbox"]{display:none;}
div.radiobox > ul li{border-bottom: 1px solid #ebe5e5;}
div.radiobox > ul li:last-child{border:none;}
div.radiobox > ul label{color:#7f7f7f;font-size:1.2em;display:block;padding:1em;position:relative;}
div.radiobox > ul input[type="radio"]:checked + label,
div.checkbox > ul input[type="checkbox"]:checked + label{background: #ECECEC;}
div.radiobox > ul input[type="radio"]:checked + label:after {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f00c";color:#7f7f7f;position:absolute;right:1em;top:45%;}

div.checkbox{position: fixed;width: 100%;height: 100%;top: 0;left:0;background:#FFF;z-index: 10000;display:none;}
div.checkbox h3{padding:15px 10px;background: var(--head-color2);color:#FFF;text-align: center;font-size:1.2em;position:relative}
div.radiobox h3 span,div.checkbox h3 span{position:absolute;top:50%;right:8px;font-weight:bold;border:1px solid #FFF;padding:0.3em;-ms-transform: translateY(-50%);-webkit-transform : translateY(-50%);transform : translateY(-50%);}
div.checkbox > ul{margin:0 20px;overflow-y: auto;height: 90%;position: relative;-webkit-overflow-scrolling: touch;}
div.checkbox > ul input[type="checkbox"]{display:none;}
div.checkbox > ul li{border-bottom: 1px solid #ebe5e5;}
div.checkbox > ul li:last-child{border:none;}
div.checkbox > ul label{color:#7f7f7f;font-size:1.2em;display:block;padding:1em;}

div.radiobox h3:before,
div.checkbox h3:before{font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f137";color:#fff;position:absolute;top:50%;left:10px;font-size:22px;
-ms-transform: translateY(-50%);-webkit-transform : translateY(-50%);transform : translateY(-50%);}

div.checkbox > ul input[type="checkbox"] + label{position:relative;}
div.checkbox > ul input[type="checkbox"]:checked + label:after {font-family: "Font Awesome 5 Free";font-weight: 900;content: "\f00c";color:#7f7f7f;position:absolute;right:1em;top:45%;}
div.checkbox.rangeslider h3{margin-bottom: 8em;}
#userserch .area_value{overflow: hidden;text-overflow: ellipsis; white-space: nowrap;}

/*-- lineQR --*/
main.lineQR{max-width:1000px;width:100%;margin:3.4em auto 0;color: #484848;font-size:16px;text-align:center;padding-bottom:3em;}
main.lineQR h1{font-size:1.2em;font-weight:bold;margin:1.5em 0 1em;}
main.lineQR p{color:#777;}

/*==================== Empty  ====================*/
div.empty{padding:5em 1em 1em;}
div.empty dt{text-align:center;padding-bottom: 1em}
div.empty dt img{width:30%;display:block;margin: auto;}
div.empty dd p{text-align: center;margin-bottom: 0.5em;}
div.empty dd a{display:block;width:60%;margin: 1em auto;border:1px solid #7f7f7f;padding:0.8em 2em;text-align: center;border-radius:30px;font-weight:bold;}


/*==================================================================
   Animation
==================================================================*/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

@media (prefers-reduced-motion) {
  .animated {
    -webkit-animation: unset !important;
    animation: unset !important;
    -webkit-transition: none !important;
    transition: none !important;
  }
}

@-webkit-keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes slideInLeft {
  from {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.slideInLeft {
  -webkit-animation-name: slideInLeft;
  animation-name: slideInLeft;
}
@-webkit-keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slideOutLeft {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  to {
    visibility: hidden;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
  }
}

.slideOutLeft {
  -webkit-animation-name: slideOutLeft;
  animation-name: slideOutLeft;
}