@charset "utf-8";
@import url("https://use.fontawesome.com/releases/v5.5.0/css/all.css");

/* ------------------------------
   Universal Reset
   Default Style
   Contents
   Common
------------------------------ */

/*==================================================================
   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,tr,td,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,cite,abbr,caption,th,address{font-style:normal;font-weight:normal;}
img{max-width:100%;border:0 none;vertical-align:bottom;}
input,select,textarea{margin:0;padding:0;vertical-align:middle;-webkit-appearance:none;appearance:none;}
input[type="submit"]{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;-ms-box-sizing:border-box;box-sizing:border-box;}


/*==================================================================
   Default Style
==================================================================*/
html{font-size:62.5%;}
body{margin:0 auto;color:#484848;font-size:100%;-webkit-text-size-adjust:100%;font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;line-height:1.6;height:100%;-webkit-touch-callout:none;}
a{color:#0000ee;-webkit-tap-highlight-color:rgba(0,0,0,0);}
a:hover, a:active{color:#c49234;}
img,input[type="image"]{max-width:100%;}

/*========== form ==========*/
input,select,textarea{width:100%;font-size:16px;font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;}
input[type="submit"],input[type="button"],input[type="file"]{line-height:1;}
input[type="text"],input[type="search"],input[type="tel"],input[type="url"],input[type="email"],input[type="password"],
input[type="number"],input[type="range"],input[type="color"],
input[type="datetime"],input[type="date"],input[type="month"],input[type="week"],input[type="time"],input[type="datetime-local"],
select,textarea{padding: 0.5em;background:var(--form-color);border:solid 1px #EEE;border-radius:3px;}
input[type="radio"],input[type="checkbox"]{vertical-align:text-bottom;}
input::placeholder,input::-webkit-input-placeholder{font-size:16px;}
input[type="file"]{display:none;}
input[type="submit"].skip,input[type="button"].skip{background:none;color:#8c8c8c;font-size:1.3rem;text-decoration: underline;border:none;}
.selectwrap{position: relative;}
.selectwrap:after{position:absolute;content:'\f078';top:10px;right:6px;font-size:12px;font-family: "Font Awesome 5 Free";font-weight: 900;}
.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-color);font-size:1.4rem;padding:1em;}
.area_imagefile label > span > i{margin-right:0.5em;}

/*========== color setting ==========*/
:root {
  --site-color:#7f6a3f;
  --sub-color :#506874;
  --new-color :#dbb660;
  --form-color:#F0F0F0;
  --red-color :#c62a07;

  --genre1-color:#d82929; /* 恋愛 */
  --genre2-color:#bb52b6; /* 浮気 */
  --genre3-color:#1f9ea8; /* 仕事 */
  --genre4-color:#5db143; /* 人間関係 */
  --genre5-color:#d1aa26; /* お金 */
  --genre6-color:#3947ad; /* 人生 */
}

/*==================================================================
   Contents
==================================================================*/
/*========== container ==========*/
.container{height:100%;max-width: 1000px;margin: 0 auto;position:relative;display: flex;flex-flow: column;min-height: 100vh;}

/*========== header ==========*/
header{position:fixed;left:0;top:0;width:100%;background:#FFF;z-index:100;}
header .sitename{color: #FFF;font-size: 1.2rem;font-weight: bold;text-align: center;line-height:1;padding:0.8rem;background: var(--site-color);}
header ul.gnav{display: flex;border-bottom:0.5px solid rgba(0,0,0,0.3);}
header ul.gnav > li {width:25%;text-align: center;}
header ul.gnav > li > a{display:block;color:#8c8c8c;padding:0.6em 0.1em 0.3em;position:relative;}
header ul.gnav > li > a > i{display:block;font-size:2rem;line-height:2.5rem;}
header ul.gnav > li > a > p{display:block;font-size:1rem;}
header ul.gnav > li.select > a{color:var(--site-color);}
header .gttl{position:relative;border-bottom:1px solid #EEE;}
header .gttl > h1{width:100%;color:#484848;font-size:1.4rem;font-weight:bold;text-align: center;padding:0.5em 3em;}
header .gttl > .prev{position:absolute;left:0;top:0.1em;font-size:2.1rem;}
header .gttl > .prev > a span{display: inline-block;vertical-align: middle;font-size:1rem;}
header .gttl > .ope{position:absolute;right:0;top:0.1em;font-size:2.1rem;}
header .gttl > .ope > #favorite{display: inline-block;}
header .gttl > .ope > #favorite > span{display:inline-block;vertical-align: middle;font-size:1rem;font-weight:bold;}
header .gttl > .ope > #favorite.active{color:var(--site-color);}
header .gttl a,
header .gttl span{color:#8c8c8c;padding:0 0.5em;}
/* login setting */
header.setting{color:#FFF;font-size:1.4rem;background:var(--site-color);}
header.setting > .inner{padding:1.2em 0.5em 1.2em 4em;position:relative;}
header.setting > .inner .icon{position:absolute;top:50%;left:1em;transform: translateY(-50%);}
header.setting > .inner .icon > i{font-size:2em;}
header.setting > .inner h1{font-weight:bold;}
header.setting + main{padding-top:1.5em;}

/*========== main ==========*/
main{position: relative;flex: 1;}
main.contents{padding-bottom: 3em;}

/*========== footer ==========*/
footer{border-top:1px solid #EEE;}
footer .copy{text-align: center; padding:1em;}


/*========== title ==========*/
.ttl_01{color:#484848;font-size:1.6rem;font-weight:bold;margin:0.5em 0;}
.ttl_01 > span{display: inline-block;vertical-align:middle;}
.ttl_01 > span.circle{position:relative;width:2rem;height:2rem;color: #FFF;text-align: center;margin-right:0.5em;background: var(--site-color);border-radius: 50%;}
.ttl_01 > span.circle > i{position:absolute;left:50%;top:50%;font-size: 0.6em;transform: translate(-50%, -50%);-webkit-transform: translate(-50%, -50%);}
.ttl_02{color: #FFF;font-size: 1.4rem;text-align: left;padding: 0.5em 1em;background: var(--site-color);}
.ttl_03{color: #FFF;font-size: 1.4rem;text-align: left;padding: 0.5em 1em;background: var(--sub-color);}
.ttl_04{color: #FFF;font-size: 1.4rem;text-align: left;padding: 0.5em 1em;background: var(--red-color);}

/*========== button ==========*/
/*-- btn_01 (site-color) --*/
.btn_01 a,
.btn_01 button,
.btn_01 input[type="submit"],
.btn_01 input[type="file"] + label,
.btn_01.jsbtn > span{display:block;width:80%;max-width:300px;color:#FFF;font-size:1.3rem;font-weight:bold;text-align:center;line-height: 1;margin:1em auto;padding:1em;background:var(--site-color);border:2px solid var(--site-color);border-radius:30px;cursor: pointer;}
.btn_01 i{margin-right:0.5em;}
.btn_01 a:hover,
.btn_01 button:hover,
.btn_01 input[type="submit"]:hover,
.btn_01 input[type="file"] + label:hover{color:var(--site-color);background:#FFF;}

/*-- btn_02 (red-color) --*/
.btn_02 a,
.btn_02 button,
.btn_02 input[type="submit"],
.btn_02 input[type="file"] + label,
.btn_02.jsbtn > span{display:block;width:80%;max-width:300px;color:#FFF;font-size:1.3rem;font-weight:bold;text-align:center;line-height: 1;margin:1em auto;padding:1em;background:var(--red-color);border:2px solid var(--red-color);border-radius:30px;cursor: pointer;}
.btn_02 i{margin-right:0.5em;}
.btn_02 a:hover,
.btn_02 button:hover,
.btn_02 input[type="submit"]:hover,
.btn_02 input[type="file"] + label:hover{color:var(--red-color);background:#FFF;}

/*-- btn_03 #BBBBBB --*/
.btn_03 a,
.btn_03 button,
.btn_03 input[type="submit"],
.btn_03 input[type="reset"],
.btn_03.jsbtn > span{display:block;width:80%;max-width:300px;color:#FFF;font-size:1.3rem;font-weight:bold;text-align:center;line-height: 1;margin:1em auto;padding:1em;background:#BBB;border:2px solid #BBB;border-radius:30px;cursor: pointer;}
.btn_03 i{margin-right:0.5em;}
.btn_03 a:hover,
.btn_03 button:hover,
.btn_03 input[type="submit"]:hover,
.btn_03 input[type="reset"]:hover{color:#BBB;background:#FFF;}

/*-- btn_04 (sub-color) --*/
.btn_04 a,
.btn_04 button,
.btn_04 input[type="submit"],
.btn_04 input[type="file"] + label,
.btn_04.jsbtn > span{display:block;width:80%;max-width:300px;color:#FFF;font-size:1.3rem;font-weight:bold;text-align:center;line-height: 1;margin:1em auto;padding:1em;background:var(--sub-color);border:2px solid var(--sub-color);border-radius:30px;cursor: pointer;}
.btn_04 i{margin-right:0.5em;}
.btn_04 a:hover,
.btn_04 button:hover,
.btn_04 input[type="submit"]:hover,
.btn_04 input[type="file"] + label:hover{color:var(--sub-color);background:#FFF;}

/*-- btn_circle --*/
.btn_circle a,
.btn_circle.jsbtn > span{display:inline-block;width:70px;height:70px;color:var(--site-color);font-size: 1.1rem;font-weight:bold;text-align: center;padding:1.1em 0;border:3px solid var(--site-color);border-radius:50%;background:#FFF;}
.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_line --*/
.btn_line a,
.btn_line input[type="submit"]{display:block;width:80%;max-width:300px;color:#fff !important;font-size:1.4rem;font-weight: bold; text-align:center;line-height:1;margin:15px auto;padding:1em;border-radius:5px;
 background:#00b900 url(../img/icon_line.png) no-repeat;
 background-size:auto 70%;
 background-position: calc(50% - 80px);}


/*========== box ==========*/
/*-- box_01 bluebox --*/
.box_01{font-size:1.3rem;padding:1em;border:2px solid var(--site-color);}

/*-- box_02 graybox --*/
.box_02{font-size:1.3rem;padding:1em;border:2px solid #CCC;}

/*-- box_03 redbox --*/
.box_03{font-size:1.3rem;padding:1em;border:2px solid var(--red-color);}

/*-- box_genresearch --*/
.box_genresearch{position:fixed;top:0;left:0;width: 100%;height: 100%;background: #FFF;z-index: 999;display:none;overflow: auto;}
.box_genresearch > .ttl{position:fixed;top:0;left:0;width: 100%;height:50px;background:#FFF;border-bottom:3px solid var(--site-color);z-index: 10;}
.box_genresearch > .ttl > p{font-size:1.4rem;}
.box_genresearch > .ttl > p.text{width:100%;font-weight:bold;line-height: 50px;text-align: center;}
.box_genresearch > .ttl > p.ope{position:absolute;left:0;font-size:2em;padding:0.4em 1em;}
.box_genresearch > .inner{margin-top:50px;padding:1em;}
.box_genresearch > p.cancel{color:#8c8c8c;font-size:1.4rem;text-align: center;margin-bottom:1.5em;}

/*========== list ==========*/
ul.list_number,
ol.list_number{list-style-type:decimal;margin-left:1.5em;}
ul.list_disc{list-style-type: disc;margin-left:1.5em;}

ul.list_flex{display: flex;align-items: center;flex-wrap: wrap;}
ul.list_flex.clm2 > li{width:50%;}
ul.list_flex.clm3 > li{width:33.3%}

/*--- list_simple ---*/
ul.list_simple li a{display:block;color:#484848;font-size:1.4rem;padding:1em 1.5em;border-bottom:1px solid #EEE;position: relative;}
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 #8c8c8c;border-right: solid 2px #8c8c8c;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);}

/*--- 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;}
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.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.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"]{width:95%;margin:1em auto;border-radius:10px;}

/*--- list_notes ( line green ) ---*/
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_basic ---*/
dl.list_basic{font-size:1.3rem;text-align: left;margin-bottom:3em;}
dl.list_basic > dt{font-size: 1.1em;font-weight:bold;margin:1.5em 0 1em;border-bottom: 2px solid var(--site-color);}
dl.list_basic > dt:first-child{margin-top:0;}
dl.list_basic > dd{margin-bottom:0.5em;text-align: justify;}
dl.list_basic > dd > ul > li,
dl.list_basic > dd > ol > li{margin:0.5em 0;}

/*--- list_terms ---*/
dl.list_terms{font-size:1.3rem;text-align: left;margin-bottom:3em;}
dl.list_terms dt{font-size: 1.1em;font-weight:bold;margin:1.5em 0 0.5em;}
dl.list_terms dt:first-child{margin-top:0;}
dl.list_terms dd{margin-bottom:0.5em;text-align: justify;}
dl.list_terms dd > ul > li,
dl.list_terms dd > ol > li{margin:0.5em 0;}

/*--- list_pager ---*/
ul.list_pager{display: flex;justify-content: center;align-items: center;font-size:1.4rem;margin:1em auto}
ul.list_pager > li:not(:first-child){padding:0em 0.8em;border-left:1px solid #999;}
ul.list_pager > li > a{display: block;color:#333;}
ul.list_pager > li > a.current{font-weight:bold;border-bottom:1px solid #333;}
ul.list_pager > li > a:hover{color:var(--site-color);}
ul.list_pager > li.prev{border-left:0px;}

/*--- list_qa ---*/
dl.list_qa{font-size:1.3rem;padding:1em;}
dl.list_qa > dt{color:#FFF;font-weight:bold;padding:0.7em 2.5em;margin-top:1em;background:var(--site-color);position: relative;cursor: pointer;}
dl.list_qa > dt::before{content:"Q.";position:absolute;left:0.9em;top:0.7em;}
dl.list_qa > dt::after{content:"\f00d";font-family: "Font Awesome 5 Free";font-weight: 900;position:absolute;right:1em;top:0.7em;transition:0.5s;transform: rotate(-45deg);}
dl.list_qa > dt.open::after{transform: rotate(0deg);}
dl.list_qa > dt:first-child{margin-top:0;}
dl.list_qa > dd{display:none;text-align: justify;padding:1em;background:var(--form-color);}

/*--- list_input ---*/
dl.list_input{font-size:1.3rem;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;}
dl.list_input > dd.birth{display: flex;}
dl.list_input > dd.birth > *{display: inline-flex;align-items: center;}
dl.list_input > dd.birth > * > .selectwrap{width:calc(100% - 2em);margin-right:0.5em;}
dl.list_input > dd.birth .year{width:40%;}
dl.list_input > dd.birth .month,
dl.list_input > dd.birth .day{width:30%;}
dl.list_input > dd ul.inputstar{display: flex;align-items: center;}
dl.list_input > dd ul.inputstar > li{margin:0 0.1em;color:#e2c41f;font-size:1.8em;}
dl.list_input > dd ul.inputstar > li input[type="radio"]{display:none;}

/*--- list_radio ---*/
ul.list_radio{position: relative;margin:0 -0.2em;}
ul.list_radio > li input[type="radio"]{display:none;}
ul.list_radio > li input[type="radio"] + label{display:block;color:#8c8c8c;font-size:1.4rem;padding:0.5em 1em 0.5em 3em;margin:0.2em;border:1px solid var(--form-color);border-radius:3px;position:relative;}
ul.list_radio > li input[type="radio"] + label:after {content: "\f111";font-family: "Font Awesome 5 Free";font-weight: 500;color:var(--site-color);position:absolute;left:1em;top:20%;}
ul.list_radio > li input[type="radio"]:checked + label{color:#333;background:var(--form-color);}
ul.list_radio > li input[type="radio"]:checked + label:after {content: "\f111";font-weight: 900;}

/*--- list_settlement ---*/
ul.list_settlement{font-size:1.4rem;font-weight:bold;margin:0 auto;}
ul.list_settlement > li{display: flex;align-items: baseline;padding:5px;margin-bottom:15px;border-bottom:2px solid #000;}
ul.list_settlement > li > p{width:50%;}
ul.list_settlement > li > p > span{font-size:14px;margin-left:3px;}
ul.list_settlement > li > p:first-child{text-align:left;}
ul.list_settlement > li > p:last-child{text-align: right;}
ul.list_settlement > li > p:last-child{font-size:1.6em;font-weight:bold;}

/*--- list_search ---*/
ul.list_search{display: flex;justify-content:flex-start;align-items: flex-start;flex-wrap: wrap;font-size:1.3rem;margin:1em 0 5em;}
ul.list_search > li{display: flex;align-items:flex-start;flex-wrap: wrap;width:50%;padding:0 0.4em;margin-bottom: 1em;position:relative;}
ul.list_search > li a{display: block;}
ul.list_search > li .image{width:100%;text-align: center;margin-bottom:0.3em;position:relative;}
ul.list_search > li .image > img{max-width: 100%;max-height: 100%;width:100%;/*height: 132px;*/border-radius: 4px;-o-object-fit: cover;object-fit: cover;}
ul.list_search > li .image > .status{position: absolute;top: 0;left: 0;width: 45px;height: 22px;opacity: 0.95;z-index: 5;
display: flex;justify-content: center;align-items: center;
background: #46ba5b;
border-radius: 4px 0;}
ul.list_search > li .image > .status.off{background:#8c8c8c;}
ul.list_search > li .image > .status > p{color: #fff;font-size: 0.8em;font-weight: bold;line-height: 1.2em;}
ul.list_search > li .image > .comment{position: absolute;left: 0;bottom: 0;width: 100%;text-align: left;
 border-radius: 0 0 4px 4px;
 background: rgb(109 109 109 / 80%);}
ul.list_search > li .image > .comment > p{color: #FFF;font-size: 0.8em;line-height: 1.2;padding: 0.5em;}
ul.list_search > li .image > .comment.off{display:none;}
ul.list_search > li .tellerdata{width:100%;}
ul.list_search > li .tellerdata > p.name{font-weight:bold;text-align:center;margin-bottom:0.5em;}
ul.list_search > li .tellerdata > p.type{font-size: 0.8em;margin-bottom: 0.5em;overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;}
ul.list_search > li .tellerdata > p.profile{display:block;color:#8c8c8c;font-size:0.8em;overflow: hidden;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
}

/*--- list_genre ---*/
ul.list_genre{display: flex;flex-wrap: wrap;margin-bottom:3em;}
ul.list_genre > li{width:50%;padding:0.5em;}
ul.list_genre > li > input[type="checkbox"]{display: none;}
ul.list_genre > li > input[type="checkbox"] + label{display: block;color:#AAA;padding:1em;border:2px solid #EEE;border-radius:5px;position: relative;}
ul.list_genre > li > input[type="checkbox"] + label > i{display: block;text-align: center;margin-bottom:0.1em;}
ul.list_genre > li > input[type="checkbox"] + label > span{display:block;text-align: center;}
/* icon */
ul.list_genre > li > input[type="checkbox"] + label > span:before{display: block;font-size:4em;font-family:"Font Awesome 5 Free";font-weight:900;text-align: center;line-height: 1;margin-bottom:0.1em;}
ul.list_genre > li.genre1 > input[type="checkbox"] + label > span:before{content:"\f004";}
ul.list_genre > li.genre2 > input[type="checkbox"] + label > span:before{content:"\f6fa";}
ul.list_genre > li.genre3 > input[type="checkbox"] + label > span:before{content:"\f1ad";}
ul.list_genre > li.genre4 > input[type="checkbox"] + label > span:before{content:"\f0c0";}
ul.list_genre > li.genre5 > input[type="checkbox"] + label > span:before{content:"\f53a";}
ul.list_genre > li.genre6 > input[type="checkbox"] + label > span:before{content:"\f018";}
/* checked */
ul.list_genre > li > input[type="checkbox"]:checked + label{font-weight:bold;}
ul.list_genre > li > input[type="checkbox"]:checked + label:before{content:"\f14a";position:absolute;left:0.6em;top:0.1em;font-size:1.5em;font-family:"Font Awesome 5 Free";font-weight:900;}
ul.list_genre > li.genre1 > input[type="checkbox"]:checked + label{color:var(--genre1-color);border-color:var(--genre1-color);}
ul.list_genre > li.genre2 > input[type="checkbox"]:checked + label{color:var(--genre2-color);border-color:var(--genre2-color);}
ul.list_genre > li.genre3 > input[type="checkbox"]:checked + label{color:var(--genre3-color);border-color:var(--genre3-color);}
ul.list_genre > li.genre4 > input[type="checkbox"]:checked + label{color:var(--genre4-color);border-color:var(--genre4-color);}
ul.list_genre > li.genre5 > input[type="checkbox"]:checked + label{color:var(--genre5-color);border-color:var(--genre5-color);}
ul.list_genre > li.genre6 > input[type="checkbox"]:checked + label{color:var(--genre6-color);border-color:var(--genre6-color);}

/*--- list_genretag ---*/
ul.list_genretag{display: flex;flex-wrap: wrap;margin-bottom:0.2em;}
ul.list_genretag > li{color:#333;font-size:0.8em;font-weight:bold;line-height: 1.5;padding:0 0.5em;margin-right:0.3em;margin-bottom:0.5em;border-radius:5px;border:1px solid #333;}
ul.list_genretag > li.genre1{color:var(--genre1-color);border-color:var(--genre1-color);}
ul.list_genretag > li.genre2{color:var(--genre2-color);border-color:var(--genre2-color);}
ul.list_genretag > li.genre3{color:var(--genre3-color);border-color:var(--genre3-color);}
ul.list_genretag > li.genre4{color:var(--genre4-color);border-color:var(--genre4-color);}
ul.list_genretag > li.genre5{color:var(--genre5-color);border-color:var(--genre5-color);}
ul.list_genretag > li.genre6{color:var(--genre6-color);border-color:var(--genre6-color);}

/*--- list_talk ---*/
ul.list_talk{font-size:1.3rem;}
ul.list_talk > li{display: flex;align-items:center;flex-wrap: wrap;width: 100%;padding: 1em;border-bottom: 1px solid #EEE;position: relative;}
ul.list_talk > li > .image{width:23%;max-width: 100px;text-align: center;}
ul.list_talk > li > .image img{max-width: 100%;max-height: 100%;width: 100%;border-radius:50%;
 -o-object-fit: cover;
 object-fit: cover;}
ul.list_talk > li > .userdata{width: 72%;padding-left: 1em;}
ul.list_talk > li > .userdata > p.name{font-size: 1.1em;font-weight: bold;}
ul.list_talk > li > .userdata > p.text{color:#9aa5a7;margin-bottom:0.5em;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
ul.list_talk > li > .userdata > p.time{color:#9aa5a7;font-size:0.8em;}
ul.list_talk > li > .status{position: absolute;top: 0;left: 0;opacity: 0.95;z-index: 5;
 background: #46ba5b;
 border-radius: 0 0 5px 0;}
ul.list_talk > li > .status > p{color: #FFF;font-size: 0.8em;font-weight:bold;padding: 0.2em 0.5em;}
ul.list_talk > li > .status.off{background:#8c8c8c;}
ul.list_talk > li.new:after{content: "\f111";font-family: "Font Awesome 5 Free";color: var(--new-color);font-size:1.5rem;font-weight: 900;position: absolute;top: 38%;right:1em;z-index:1;}

/*--- list_chat ---*/
ul.list_chat{font-size:1.2rem;padding:1em;}
ul.list_chat > li{margin-bottom: 1.5em;}
ul.list_chat > li .text{position: relative;}
ul.list_chat > li .text > p{word-wrap: break-word;}
ul.list_chat > li .text > p.date{font-size:0.8em;margin-bottom:0.2em;}
ul.list_chat > li .text > p.message{display: inline-block;color:#484848;font-size: 1.4rem;text-align: left;padding:0.5em;border:1px solid #484848;border-radius:0.8em;background: #FFF;word-break: break-word;}
ul.list_chat > li .text > p.image{display: block;padding:0.5em;border:1px solid #484848;border-radius:0.8em;max-width:130px;background: #FFF;}
ul.list_chat > li.opp .icon{margin-bottom:0.5em;}
ul.list_chat > li.opp .icon img{max-width:50px;border-radius:50%;}
ul.list_chat > li.opp .text .message{position: relative;}
ul.list_chat > li.opp .text .message .more{position:absolute;bottom:0;left:0;width:100%;color:var(--site-color);font-weight:bold;text-align: center;padding:2.5em 1em 1em;
 background:linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff 50%, #ffffff);
 background:-webkit-linear-gradient(top, rgba(255, 255, 255, 0), #ffffff 50%, #ffffff);}
ul.list_chat > li.opp .text .message .close{display: block;color:var(--site-color);font-weight:bold;text-align: center;padding:1em;}

ul.list_chat > li.my{text-align: right;margin-left:20%;}
ul.list_chat > li.my .text > p.message,
ul.list_chat > li.my .text > p.image{background:var(--form-color);}
ul.list_chat > li.my .text > p.image{margin-left:auto;}

/*--- list_review ---*/
ul.list_review{font-size:1.3rem;}
ul.list_review > li{position:relative;padding:1em 0;margin-bottom:0.5em;padding:1em;background:var(--form-color);border-radius:5px;}
ul.list_review > li > p:not(:first-child){margin-top:0.5rem;}
ul.list_review > li > p.eval{color: #8c8c8c;}
ul.list_review > li > p.eval > .star{color: #e5c307;font-size:1.2em;margin-right:0.5em;letter-spacing: 0.1em;}
ul.list_review > li > p.comment{line-height: 1.4;word-break: break-all;text-align: justify;}
ul.list_review > li > p.writer{font-size:0.8em;}
ul.list_review > li > p.date{position:absolute;color:#8c8c8c;font-size:0.8em;right:1.2rem;bottom:1.2rem;}
ul.list_review > li.more{padding:0;background: none;}
ul.list_review > li.more > a{position:relative;display: block;color:var(--site-color);font-weight:bold;text-align:right;padding:0.5em;}
ul.list_review > li.more > a > span{margin-right:0.5em;}

/*--- list_mymenu ---*/
ul.list_mymenu{display: flex;flex-wrap: wrap;margin:1.5em auto;border:1px solid #EEE;border-width:1px 1px 0 0;}
ul.list_mymenu > li{width:50%;text-align: center;border:1px solid #EEE;border-width:0 0 1px 1px;}
ul.list_mymenu > li > a{display: block;color:#484848;padding:2em 1em 1em;position:relative;}
ul.list_mymenu > li > a > i{display: block;color:#8c8c8c;font-size:3.5rem;margin-bottom:0.3em;}

/*--- list_profile ---*/
ul.list_profile{font-size:1.6rem;width:100%;margin:0 auto 1.5em;}
ul.list_profile > li{display: flex;margin-bottom:0.8em;border-bottom:2px solid var(--form-color);}
ul.list_profile > li > *{padding-bottom:0.3em;}
ul.list_profile > li > h2{width:30%;font-weight:bold;}
ul.list_profile > li > p{width:70%;}
ul.list_profile > li > p:before{content:"/";color:#CCC;padding-right:1em;}

/*--- list_mail ---*/
ul.list_mail > li{display:block;color:#484848;font-size:1.4rem;padding:1em 2em 1em 1em;border-bottom:1px solid #EEE;position: relative;}
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(--sub-color);border-radius:5px;transform: translateY(-50%);}
/* news */
ul.list_mail.news > li{padding:1em 2em 1em 4.5em;}
ul.list_mail.news > li:before{content:"\f0e0";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-color);border-radius:5px;transform: translateY(-50%);}

/*--- list_buy ---*/
ul.list_buy{font-size:1.8rem;margin:1.5em auto;}
ul.list_buy li a{display: block;color:#484848;margin-bottom:1em;border-radius:15px;}
ul.list_buy li a dl{display:table;width:100%;}
ul.list_buy li a dl dt{display: table-cell;vertical-align: middle;width:40%;color:#FFF;background:var(--site-color);border-radius:10px 0 0 10px;position:relative;}
ul.list_buy li a dl dt > p{font-weight:bold;text-align:center;}
ul.list_buy li a dl dd{display: table-cell;width:60%;text-align:right;padding:5%;background:#FFF;border:3px solid var(--site-color);border-radius:0 10px 10px 0;}
ul.list_buy li a dl dd > p{font-weight:bold;line-height: 1.2;}

/*--- list_pay ---*/
ul.list_pay li{margin:1.5em 1em;background:#FFF;border-radius:5%;box-shadow:0px 5px 3px #CCC;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;}
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_notice ---*/
ul.list_notice{margin-bottom:3em;}
ul.list_notice > li{display: flex;align-items:center;justify-content: space-between;padding:1em;border-bottom:1px solid #EEE;}
ul.list_notice > li > p{font-size:1.4em;}

/* switch design */
.switch{margin-bottom: -0.5em;}
.switch .switch_label {display: inline-block;width: 50px;position: relative;}
.switch .switch_content {display: block;height: 31px;border-radius: 30px;overflow: hidden;cursor: pointer;position: relative;}
.switch .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 .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 .switch_input {display: none;}
.switch .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 .switch_input:checked ~ .switch_circle {left: 21px;}
.switch .switch_input:checked ~ .switch_content:after {
 background-color: #4BD964;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}


/*========== overlay ==========*/
/*-- overlay_01 standard --*/
.overlay_01{position:fixed;width: 100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.6);display:none;z-index:1000;}
.overlay_01 .inner{position:absolute;top:50%;left: 0;right: 0;width: 90%;max-width: 360px;margin: auto;padding:1.5em 1em;text-align: center;background: #FFF;border-radius:1em;
 -ms-transform: translateY(-50%);
 -webkit-transform : translateY(-50%);
 transform : translateY(-50%);}
.overlay_01 .inner > h3{font-size:1.4rem;font-weight:bold;margin-bottom:0.5em;}
.overlay_01 .inner > p{font-size:1.2rem;margin-bottom:0.5em;}
.overlay_01 .inner .ope_01{font-size:1.2rem;margin:1em 0 0;border-top:1px solid #EEE;}
.overlay_01 .inner .ope_01 .menu{border-bottom:1px solid #EEE;}
.overlay_01 .inner .ope_01 .menu > a{display:block;padding:1em 0;color:var(--site-color);font-size:1.1em;font-weight:bold;}
.overlay_01 .inner .ope_01 .close > a{display:block;padding:1em 0 0;color:#8c8c8c;text-decoration: underline;}
.overlay_01 .inner .ope_02{font-size:1.2rem;margin:2em 0 0;}
.overlay_01 .inner .ope_02 p[class^="btn_"] > a,
.overlay_01 .inner .ope_02 p[class^="btn_"] > input[type="submit"]{margin-bottom:0;}
.overlay_01 .inner .ope_02 .close  > a,
.overlay_01 .inner .ope_02 .skip   > input[type="submit"]{display:block;padding:1em 0 0;color:#8c8c8c;text-decoration: underline;}
.overlay_01 .inner ul.list_btn a{margin-bottom:0;}
/* logininfo */
.overlay_01 .inner > .textarea {max-height: 40vh;min-height: 15vh;overflow-y: scroll;font-size:1.2rem;text-align: left;padding: 0.5em;border-top:1px solid #EEE;}
.overlay_01 .inner > .textarea > img{display: block;}
.overlay_01 .inner .infocheck label{position: relative;padding-left:2em;}
.overlay_01 .inner .infocheck label input[type="checkbox"]{display: none;}
.overlay_01 .inner .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_01 .inner .infocheck label input[type="checkbox"]:checked + span::before{border-color:#1c506f;background:#1c506f;}
.overlay_01 .inner .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_02 send --*/
.overlay_02{position:fixed;width: 100%;height:100%;top:0;left:0;background:rgba(0,0,0,0.6);display:none;z-index:1000;}
.overlay_02 .inner{position:absolute;top:50%;left: 0;right: 0;width: 80%;max-width: 360px;margin: auto;padding:4em 1em 1.5em;text-align: center;background: #FFF;border-radius:1em;
 -ms-transform: translateY(-50%);
 -webkit-transform : translateY(-50%);
 transform : translateY(-50%);}
.overlay_02 .inner > h3{color:var(--site-color);font-size:1.8rem;font-weight:bold;margin-bottom:0.5em;}
.overlay_02 .inner > p.icon{position:absolute;top:-1em;left:0;right:0;width:2em;height:2em;margin:auto;color:#FFF;font-size:3rem;text-align: center; background:var(--site-color);border-radius:50%;}
.overlay_02 .inner > p.icon i{position: absolute;top: 50%;left: 50%;
 transform: translate(-50%, -50%);
 -ms-transform: translate(-50%, -50%);
 -webkit-transform: translate(-50%, -50%);}
.overlay_02 .inner > p.close > a{display:block;padding:1em 0 0;color:#8c8c8c;font-size:1.2em;text-decoration: underline;}


/*========== table ==========*/
/*--- tbl_01 graytable ---*/
table.tbl_01{width:100%;font-size:1.3rem;background:#FFF;}
table.tbl_01 thead th{color:#FFF;background:var(--site-color);}
table.tbl_01,
table.tbl_01 th,
table.tbl_01 td {border: 1px solid #CCC;border-collapse: collapse;}
table.tbl_01 th,
table.tbl_01 td {padding: 10px;}
table.tbl_01 th {width:25%;font-weight:bold;background:var(--form-color);}
table.tbl_01.max{border:none;}
/* width max */
table.tbl_01.max tr,
table.tbl_01.max th,
table.tbl_01.max td{display: block;width:100% !important;border-bottom: none;}
table.tbl_01.max tr:last-child{border-bottom:1px solid #CCC;}

/*--- tbl_02 sitecolortable ---*/
table.tbl_02{width:100%;font-size:1.3rem;background:#FFF;}
table.tbl_02 thead th{color:#FFF;background:var(--site-color);}
table.tbl_02,
table.tbl_02 th,
table.tbl_02 td {border: 1px solid #CCC;border-collapse: collapse;}
table.tbl_02 th,
table.tbl_02 td {padding: 10px;}
table.tbl_02 th {width:25%;color:#FFF;font-weight:bold;background:var(--site-color);}
table.tbl_02.max{border:none;}
/* width max */
table.tbl_02.max tr,
table.tbl_02.max th,
table.tbl_02.max td{display: block;width:100% !important;border-bottom: none;}
table.tbl_02.max tr:last-child{border-bottom:1px solid #CCC;}


/*========== contents ==========*/
/*=== 占い師プロフィール画面 ===*/
/*-- tellerprofile --*/
.tellerprofile{position:relative;font-size:1.4rem;padding:1em 1em 3em;}
.tellerprofile .status{position: absolute;left:1em;top:1em;display: inline-block;z-index: 5;padding: 0.1em 0.5em;border: 2px solid #46ba5b;}
.tellerprofile .status > p{color: #46ba5b;font-weight: bold;}
.tellerprofile .status.off{border-color: #8c8c8c;}
.tellerprofile .status.off > p{color: #8c8c8c;}
.tellerprofile .main_image figure{width: 50%;text-align: center;margin:0 auto 1em;}
.tellerprofile .main_image figure > img{border-radius:5px;}
.tellerprofile .thum_image {width:100%;margin-bottom:1.5em;}
.tellerprofile .thum_image ul{display: flex;justify-content: center;width: 100%;}
.tellerprofile .thum_image ul li{width:60px;margin-right:0.3em;}
.tellerprofile .thum_image ul li:last-child{margin-right:0;}
.tellerprofile .thum_image ul li img{border-radius:5px;border:2px solid #FFF;}
.tellerprofile .thum_image ul li img:hover,
.tellerprofile .thum_image ul li img:active{border:2px solid var(--site-color);}
.tellerprofile > .comment{max-width: 90%;margin:0 auto 1.5em;border-radius: 3px;background: var(--form-color);}
.tellerprofile > .comment > p{font-size:0.8em;padding: 1em;}
.tellerprofile > .comment.off{display:none;}
.tellerprofile section{margin-bottom:2em;}


/*=== トークタブ === */
/*-- トークリストバナー --*/
.talk_topbnr{width:100%;text-align: center;}
.talk_topbnr a{display: block;}

/*=== チャット ===*/
.area_chat{min-height: 100%;background:#f9f9f9;}
.area_chat .swiperfixed{position: fixed;width: 100%;left:0;z-index: 10;}
.area_chat .swiperfixed .swiper-container{background:none;}
.chatform{position:fixed;bottom:0;left:0;width: 100%;background: #FFF;padding:0.5em;}
.chatform > form{display:flex;justify-content:center;align-items: flex-end;}
.chatform > form .file{display:block;width:10%;color:var(--site-color);margin-right:2%;font-size:2.8em;line-height:1;text-align: center;}
.chatform > form .message{width: 73%;margin-right:2%;}
.chatform > form .message > textarea{height:35px;max-height: 200px;font-size:1.6rem;line-height: 1.5;}
.chatform > form p.btn{width: 13%;}
.chatform > form p.btn > input[type="submit"]{color:#FFF;font-size:1.2rem;font-weight:bold;text-align: center; padding:0.8em;border-radius:0.5em;background:var(--site-color);}

/*=== マイページ ===*/
/*-- myprofile --*/
.myprofile{max-width:250px;margin:0 auto 1.5em;font-size:1.4rem;text-align:left;}
.myprofile p.myid{display: inline-block;color:#8c8c8c;font-size:0.8em;font-weight:bold;padding:0 1em;margin-bottom:0.3em;border:1px solid #8c8c8c;border-radius:5px;}
.myprofile dl.point{display: flex;align-items: baseline;}
.myprofile dl.point dt{width:45%;text-align: left;}
.myprofile dl.point dd{width:55%;text-align: center;}
.myprofile dl.point dd > span{color:var(--red-color);font-size:2em;font-weight:bold;line-height: 1;margin:0 0.3em;}
.myprofile .point_dtl{font-size: 1.2rem;text-align:center;margin:0 -5rem;}
.myprofile .point_dtl > span {display: inline-block;color: var(--red-color);font-weight: bold;}
.myprofile p.btn_01 > a{width:100%;}

/*-- myprofile_detail --*/
.myprofile_detail{position:fixed;top:0;left:0;width: 100%;height: 100%;background: #FFF;z-index: 999;display:none;overflow: auto;}
.myprofile_detail > .ttl{position:fixed;top:0;left:0;width: 100%;height:50px;background:#FFF;border-bottom:3px solid var(--site-color);z-index: 10;}
.myprofile_detail > .ttl > p{font-size:1.4rem;}
.myprofile_detail > .ttl > p.ope{position:absolute;left:0;font-size:2em;padding:0.4em 1em;}
.myprofile_detail > .inner{margin-top:50px;padding:2em;}

/*-- 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;}

/*-- maildetail --*/
.maildetail{font-size:1.4rem;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;}

/*-- area_point --*/
.area_point{font-size:1.6rem;text-align: center; padding: 0.5em;background: var(--form-color);border-radius: 0.5em;}
.area_point .point > i{font-size: 1.5em;}
.area_point .point > span{color:var(--red-color);font-size:2em;font-weight:bold;line-height: 1;margin:0 0.2em;}


/*=== メールアドレスボーナス ===*/
.area_mailbonus{font-size:1.3rem;text-align:center;margin-bottom:1.5em;}
.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-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.bonuspoint > span > em{font-size:2em;font-weight:bold;margin-right: 0.1em;vertical-align: sub;}
.area_mailbonus > p.process{margin-top:1em;}


/*=== データなし画面 ===*/
/*-- area_empty --*/
.area_empty{padding: 5em 1em 1em;margin:auto;}
.area_empty > p{font-size:1.4rem;text-align: center;margin-bottom:1em;}


/*========== 登録前 ==========*/
/*-- login --*/
main.login{max-width:1000px;margin:0 auto;font-size:1.3rem;}
main.login h1{margin-bottom:1em;}
main.login .notes{font-size:0.8em;margin:1em auto;padding:1em 0;border-top:1px solid #EEE;}


/*========== inview Animation ==========*/
/*-- フェードインアップ --*/
.animated_fadeInUp{opacity: 1;
-webkit-animation:fadeInUp 0.5s ease 1;
-moz-animation:fadeInUp 0.5s ease 1;
animation: fadeInUp 0.5s ease 1;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(30px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@-moz-keyframes fadeInUp {
 0% { opacity: 0; -moz-transform: translateY(30px); }
 100% { opacity: 1; -moz-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; transform: translateY(30px); }
 100% { opacity: 1; transform: translateY(0); }
}


/*==================================================================
   Common
==================================================================*/
/*========== text ==========*/
/* size */
.f_SS{font-size:0.6em !important;}
.f_S{font-size:0.8em !important;}
.f_L{font-size:1.2em !important;}
.f_LL{font-size:1.5em !important;}
/* color */
.f_red{color:var(--red-color) !important;}
.f_yellow{color:#ffde00 !important;}
.f_white{color:#FFFFFF !important;}
/* site color */
.f_color1{color:var(--site-color);}
/* align */
.t_right{text-align: right !important;}
.t_left{text-align: left !important;}
.t_center{text-align: center !important;}
/* decoration */
.f_bold{font-weight:bold !important;}
.f_normal{font-weight:normal !important;}
.t_line{text-decoration: underline;}
.t_inline > span{display: inline-block;}

.textcont > h2{font-weight:bold;margin:2em 0;}
.textcont > p{text-align:justify;line-height:1.8;margin-bottom:1.5em;position: relative;}
.textcont > figure{margin-bottom:1.5em;}

.mb_0{margin-bottom: 0 !important;}
.mb_S{margin-bottom: 0.5em !important;}
.mb_M{margin-bottom: 1em !important;}
.mb_L{margin-bottom: 1.5em !important;}
.mb_LL{margin-bottom: 2em !important;}

.wd_auto{width:auto;}
.wd_50 {width:50% !important;margin-left:auto;margin-right:auto;}
.wd_70 {width:70% !important;margin-left:auto;margin-right:auto;}
.wd_80 {width:80% !important;margin-left:auto;margin-right:auto;}
.wd_90 {width:90% !important;margin-left:auto;margin-right:auto;}
.wd_100{width:100% !important;}

.area_01{padding:1em;}
.area_text > p{font-size:1.3rem;}
.errormsg{color:#ff0000;font-size:1.2rem;}

/*　new badge */
.badge{position:absolute;display:inline-block;top:10%;right:15%;width:18px;height:18px;color:#FFF;font-size:1rem;font-weight:bold;line-height:1.8;text-align: center;border-radius:50%;background:var(--new-color);}

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