/*
YUI 3.14.1 (build 63049cb)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/

html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,xmp{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}
input,select,textarea,button{outline:none;}
* {box-sizing: border-box;}
body {color: #333;-webkit-text-size-adjust: 100%;}
img {max-width: 100%;}
@charset "UTF-8";
/* ! html・ボディ・コンテナ ———————————————————————————————————————————————————————————— */
html {
  min-height: 100vh;
  display: flex;
}
html.fix{
  overflow: hidden;
}

/* ボディ */
body {
  width: 100%;
  min-height: 750px;
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  position: relative;
}
body.show_aside_nav{
  overflow: hidden;
}

@media screen and (max-width: 767px){
  .body_mypage,.page_message{
    padding: 0;
  }
}

/* マイページダッシュボードのみ */
.area_head_layout.dashbord{
  margin-top: 16px;
}
@media screen and (max-width: 767px){
.area_head_layout.dashbord{
    margin-top: 0;
  }
}
@media screen and (max-width: 480px){
  .area_head_layout.dashbord > .text{
    flex-direction: row-reverse;
    justify-content: flex-end;
  }
}

/* ! ヘッド_無料会員 —————————————————————————————— */
.head_free{
  margin-bottom: 10px;
}
section:not(.area_guest) .head_free .list_nav_guest a{
  font: 500 13px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 560px){
  section:not(.area_guest) .head_free .list_nav_guest a{
    font-size: 12px;
  }
}
@media screen and (max-width: 480px){
  .head_free {
    margin: 0 0 0 auto;
  }
}


/* コンテナ */
.container {
  max-width: 1080px;
  width: 100%;
  padding: 0 40px;
  margin: 0 auto;
}
@media screen and (max-width: 560px){
  .container {
    padding: 0 30px;
  }
}
@media screen and (max-width: 480px){
  .container {
    padding: 0 16px;
  }
}


/* ! ヘッダー ———————————————————————————————————————————————————————————— */
header {
  width: 179px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  background: #fff;
}
header > .container {
  height: 60px;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  position: relative;
}
header .logo{
  display: block;
  width: 100%;
}
header .logo img {
  display: inline-block;
  height: 24px;
  vertical-align: bottom;
}
@media screen and (max-width: 767px){
  header{
    position: absolute;
    background: transparent;
  }
  header > .container {
    padding: 0 0 0 30px;
  }
}
@media screen and (max-width: 479px){
  header{
    width: 160px;
  }
  header > .container {
    height: 50px;
    padding: 0 0 0 15px;
  }
  header .logo img {
    height: 20px;
  }
}
@media screen and (max-width: 359px){
  header{
    width: 140px;
  }
  header > .container {
    padding: 0 0 0 10px;
  }
  header .logo img {
    height: 18px;
  }
}


/* ! ハンバーガーボタン —————————————————————————— */
.button_menu_sp {
  display: block;
  width: 28px;
  height: 28px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_menu_sp_open.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: all 0.1s ease;
}
.show_aside_nav .button_menu_sp {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_menu_sp_close.svg");
}



/* ! ヘッダー_min ———————————————————————————————————————————————————————————— */
.header_min {
  border-bottom: 1px solid #EEE;
  background: #fff;
  width: 100%;
}
.header_min > .container {
  max-width: none;
  padding: 0 30px;
}

/* ユーザーエリア_ヘッダー */
.area_user_header {
  margin-left: auto;
  flex: 0 0 100px;
  display: flex;
  justify-content: flex-end;
}
.area_user_header .img {
  background: blue;
  width: 30px;
  border-radius: 100px;
}
.area_user_header .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}


/* ! メイン ———————————————————————————————————————————————————————————— */
main{
  display: flex;
  flex-wrap: wrap;
  flex: 1 1 auto;
  min-width: 10px;
  padding: 0 0 120px;
}
@media screen and (max-width: 480px){
  main {
    padding: 0 0 60px;
  }
}

@media screen and (max-width: 560px){
  main{
    padding: 0 0 60px;
  }
}

/* ! フッター ———————————————————————————————————————————————————————————— */
footer{
  background: #F7F9F9;
}

/* ! ボディ_フッター —————————————————————————————— */
.body_footer {
  padding: 50px 0;
}
.body_footer > .container {
  display: flex;
}
@media screen and (max-width: 900px){
  .body_footer > .container {
    flex-direction: column;
  }
}
@media screen and (max-width: 540px){
  .body_footer > .container {
    align-items: center;
  }
}


/* ロゴエリア */
.area_logo_footer {
  flex: 0 0 200px;
}
.area_logo_footer .logo{
  display: block;
  width: 100%;
}
.area_logo_footer img {
  display: block;
  height: 24px;
  vertical-align: bottom;
}
@media screen and (max-width: 1080px){
  .area_logo_footer {
    flex: 0 0 140px;
  }
  .area_logo_footer img {
    height: 20px;
  }
}
@media screen and (max-width: 900px){
  .area_logo_footer {
    flex: 0 0 auto;
    margin: 0 0 40px;
  }
}
@media screen and (max-width: 480px){
  .area_logo_footer img {
    height: 20px;
  }
}


/* レイアウト */
.list_layout_footer {
  display: flex;
  margin: 0 -30px 0 auto;
  flex: 1 1 auto;
  min-width: 10px;
}
.list_layout_footer > li {
  padding: 0 12px;
}
.list_layout_footer article + article {
  margin: 40px 0 0;
}
.list_layout_footer article > .ttl {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 12px;
}
@media screen and (max-width: 1280px){
  .list_layout_footer {
    margin: -12px auto;
  }
  .list_layout_footer {
    flex-wrap: wrap;
    margin: -15px -15px -15px auto;
  }
  .list_layout_footer > li {
    width: 33.3333%;
    padding: 15px;
  }
}
@media screen and (max-width: 1080px){
  .list_layout_footer {
    flex-wrap: wrap;
    margin: -15px -15px -15px auto;
  }
  .list_layout_footer > li {
    width: 33.3333%;
    padding: 15px;
  }
}
@media screen and (max-width: 767px){
  .list_layout_footer {
    margin: -15px -10px;
  }
  .list_layout_footer > li {
    padding: 15px 10px;
  }
}
@media screen and (max-width: 540px){
  .list_layout_footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: -20px 0;
  }
  .list_layout_footer > li {
    width: 100%;
    padding: 20px 0;
  }
}



/* ナビ_フッター */
.ttl_link {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 16px;
}
.list_nav_footer > li + li {
  margin: 10px 0 0;
}
.list_nav_footer a {
  color: #666;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  display: block;
  cursor: pointer;
}
@media screen and (min-width: 480px){
  .list_nav_footer a:hover {
    color: #51C96D;
  }
  .ttl_link:hover {
    color: #51C96D;
  }
}


/* ! フット_フッター —————————————————————————————— */
.foot_footer {
  padding: 20px 0;
  border-top: 1px solid #ddd;
}
.foot_footer > .container {
  display: flex;
}
.foot_footer .text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 767px){
  .foot_footer .text {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}
@media screen and (max-width: 480px){
  .foot_footer > .container {
    flex-direction: column;
    align-items: center;
  }
}


/* リスト */
.list_nav_footer_sub {
  display: flex;
  flex-wrap: wrap;
  margin: -5px -15px -5px auto;
}
.list_nav_footer_sub > li {
  padding: 5px 15px;
}
.list_nav_footer_sub a {
  color: #777;
  font: 200 12px/1em 'noto sans japanese',sans-serif;
  display: block;
}
@media screen and (min-width: 480px){
  .list_nav_footer_sub a:hover {
    color: #51C96D;
  }
}
@media screen and (max-width: 767px){
  .list_nav_footer_sub {
    margin: 0 -15px 20px;
  }
}
@media screen and (max-width: 480px){
  .list_nav_footer_sub {
    flex-direction: column;
    align-items: center;
  }
}


/* 外部リンク */
.list_nav_footer_sub .link_external {
  padding-right: 16px;
  position: relative;
}
.list_nav_footer_sub .link_external:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/shape/ico_external.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}


/* ボタンエリア */
.btnarea_footer_login {
  display: flex;
  margin: 0 0 0 60px;
}
.btnarea_footer_login [class*="btn_"] {
  height: 32px;
}
.btnarea_footer_login > [class*="btn_"] {
  margin: 5px 0 0;
}
/* min */
@media screen and (min-width: 1000px){
  .btnarea_footer_login {
    flex-direction: column;
  }
}
@media screen and (max-width: 1000px){
  .btnarea_footer_login {
    margin: 40px 0 0;
  }
  .btnarea_footer_login > [class*="btn_"] {
    margin: 0 0 0 5px;
  }
}


/* コピーライト */
.copyright {
  color: #666;
  font: 500 11px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 30px 0 0 ;
}
@media screen and (max-width: 480px){
  .copyright {
    margin: 0 auto;
  }
}



/* ! テキスト ———————————————————————————————————————————————————————————— */
p {
  font: 300 14px/1.5em 'Roboto','noto sans japanese';
  letter-spacing: .02em;
  word-break: break-word;
}
a {
  color: #222;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.1s ease;
}
h1 { font: 600 28px/1.3em 'noto sans japanese';}
h2 { font: 600 20px/1.3em 'noto sans japanese';}
.ttl_main {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 20px;
}


/* ! ====================================================================================================
　新ボタン
==================================================================================================== */
.btn {
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
  height: 40px;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  cursor: pointer;
  user-select: none;
}


:root {
  --color-question: hsl(28, 95%, 56%);
  --color-question-hover: hsl(28, 95%, 50%);
}

/* ! ボタン__カラー ———————————————————————————— */
[data-btn-options*="color-question"] {
  color: #fff !important;
  background: hsl(28, 95%, 56%) !important;
  border-color: hsl(28, 95%, 56%) !important;
}
[data-btn-options*="color-question"]:hover {
  background: hsl(28, 95%, 50%) !important;
  border-color: hsl(28, 95%, 50%) !important;
}


[data-btn-options*="disabled"] {

  pointer-events: none;
}

/* ! ボタン__アイコン ———————————————————————————— */
[data-btn-options*="ico"]:before {
  content: "";
  display: block;
  width: 30px;
  height: 30px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 10px 0 -10px;
}

/* ! ボタン__アイコン__私も知りたい ———————————————————————————— */
[data-btn-options*="ico-raise"]:before {
  background: url(../img/action/ico_raise_white.svg);
}

[data-btn-count]:after {
  content: attr(data-btn-count);
  color: hsl(28, 95%, 56%);
  font: 700 15px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  padding: 1px 10px;
  background: #fff;
  margin: 0 -10px 0 10px;
  border-radius: 100px;
  letter-spacing: 0;
}
/* 私も知りたいボタンチェックド */
.js-btn-raise.checked {
  background: #ccc !important;
  border: #ccc 1px solid !important;
  cursor: default;
}
.js-btn-raise.checked:after {
  color: #ccc !important;
}

/* 私も知りたい表示エリア_トップ ———————————————————————————— */
.area_count_raise {
  color: hsl(28, 95%, 56%);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area_count_raise .thumb {
  width: 28px;
  background: url(../img/action/ico_raise.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.area_count_raise .count_raise {
  text-align: center;
  line-height: 1em;
}




/* ! ボタン ———————————————————————————————————————————————————————————— */
[class*="btn_"]{
  color: #fff;
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 50px;
  padding: 0 24px;
  background: #51C96D;
  border: 1px solid #51C96D;
  border-radius: 5px;
  transition: all 0.1s ease;
  cursor: pointer;
  transition: .1s;
}
[class*="btn_"][disabled] {
  pointer-events: none;
  cursor: not-allowed;
  filter: alpha(opacity=65);
  opacity: .65;
}
@media screen and (min-width: 480px){
  [class*="btn_"]:hover{
    color: #51C96D;
    background:transparent;
  }
}

/* 料金が入る場合 */
[class*="btn_"][class*="price"] {
  font-weight: 500;
  height: 64px;
}
[class*="btn_"][class*="price"] .price {
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  display: inline-block;
  margin: 6px 0 -3px;
}
[class*="btn_"][class*="price"] .tpl_price {
  color: #fff;
  margin: 6px 0 -4px;
}


/* ダークグリーン */
[class*="btn_"][class*="darkgreen"],
[class*="btn_"][class*="forest"] {
  border-color: #0D6A18;
  background: #0D6A18;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="darkgreen"]:hover,
  [class*="btn_"][class*="forest"]:hover {
    background: transparent; color: #0D6A18;
  }
}

/* ブルー */
[class*="btn_"][class*="blue"] {
  border-color: #25ADE0;
  background: #25ADE0;
  box-shadow: 0px 8px 12px -4px rgba(37,173,224,.3);
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="blue"]:hover {
    color: #25ADE0;
    background: #fff;
  }
}

/* イエロー */
[class*="btn_"][class*="yellow"] {
  border-color: #f98623;
  background: #f98623;
  box-shadow: 0px 8px 12px -4px rgba(242, 158, 62, .3);
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="yellow"]:hover {
    color: #f98623;
    background: #fff;
  }
}

/* グリーン */
[class*="btn_"][class*="green"] { border-color: #51C96D; background: #51C96D;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="green"]:hover { background: transparent; color: #51C96D;}
}

/* ネイビー */
[class*="btn_"][class*="navy"] { border-color: #576086; background: #576086;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="navy"]:hover { background: transparent; color: #576086;}
}

/* ネイビー */
[class*="btn_"][class*="d-navy"] { border-color: #172858; background: #172858;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="d-navy"]:hover { background: transparent; color: #172858;}
}

/* パープル */
[class*="btn_"][class*="purple"] { border-color: #7857A7; background: #7857A7;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="purple"]:hover { background: transparent; color: #7857A7;}
}

/* ダークブルー */
[class*="btn_"][class*="darkblue"] { border-color: #1E3D58; background: #1E3D58;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="darkblue"]:hover { background: transparent; color: #1E3D58;}
}

/* ブルー */
[class*="btn_"][class*="brightnavy"] { border-color: #3F7CC4; background: #3F7CC4;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="brightnavy"]:hover { background: transparent; color: #3F7CC4;}
}

/* ピンク */
[class*="btn_"][class*="pink"] { border-color: #DD5176; background: #DD5176;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="pink"]:hover { background: transparent; color: #DD5176;}
}

/* オレンジ */
[class*="btn_"][class*="orange"] {border-color: #f98623; background: #f98623;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="orange"]:hover { background: transparent; color: #f98623;}
}

/* newオレンジ */
[class*="btn_"][class*="smorange"] {border-color: #ec8a3f; background: #ec8a3f;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="smorange"]:hover { background: transparent; color: #ec8a3f;}
}

/* ゴースト */
[class*="btn_"][class*="goast"] {
  color: #fff;
  border-color: #fff;
  background: transparent;
  box-shadow: none;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"]:hover{
    color: #51C96D;
    background: #fff;
  }
}

[class*="btn_"][class*="goast"][class*="smorange"] {
  color: #ec8a3f;
  border-color: #ec8a3f;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="smorange"]:hover {
    color: #fff;
    background: #ec8a3f;
  }
}

[class*="btn_"][class*="goast"][class*="orange"] {
  color: #F29F3E;
  border-color: #F29F3E;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="orange"]:hover {
    color: #fff;
    background: #F29F3E;
  }
}

[class*="btn_"][class*="goast"][class*="green"] {
  color: #51C96D;
  border-color: #51C96D;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="green"]:hover {
    color: #fff;
    background: #51C96D;
  }
}
[class*="btn_"][class*="goast"][class*="darkgreen"],
[class*="btn_"][class*="goast"][class*="forest"] {
  color: #0D6A18;
  border-color: #0D6A18;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="darkgreen"]:hover,
  [class*="btn_"][class*="goast"][class*="forest"]:hover {
    color: #fff;
    background: #0D6A18;
  }
}
[class*="btn_"][class*="goast"][class*="emerald"] {
  color: #37BAA6;
  border-color: #37BAA6;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="emerald"]:hover {
    color: #fff;
    background: #37BAA6;
  }
}
[class*="btn_"][class*="goast"][class*="blue"] {
  color: #3FB0C4;
  border-color: #3FB0C4;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="blue"]:hover {
    color: #fff;
    background: #3FB0C4;
  }
}
[class*="btn_"][class*="goast"][class*="navy"] {
  color: #3F7CC4;
  border-color: #3F7CC4;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="navy"]:hover {
    color: #fff;
    background: #3F7CC4;
  }
}
[class*="btn_"][class*="goast"][class*="purple"] {
  color: #7857A7;
  border-color: #7857A7;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="purple"]:hover {
    color: #fff;
    background: #7857A7;
  }
}
[class*="btn_"][class*="goast"][class*="red"] {
  color: #DD5176;
  border-color: #DD5176;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="red"]:hover {
    color: #fff;
    background: #DD5176;
  }
}
[class*="btn_"][class*="goast"][class*="deepgreen"] {
  color: #40A55A;
  border-color: #40A55A;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="deepgreen"]:hover {
    color: #fff;
    background: #40A55A;
  }
}
[class*="btn_"][class*="goast"][class*="yellow"] {
  color: #f98623;
  border-color: #f98623;
}
[class*="btn_"][class*="goast"][class*="min"] {
  height: 40px;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="goast"][class*="yellow"]:hover {
    color: #fff;
    background: #f98623;
  }
}

/* ドットライン */
[class*="btn_"][class*="dot"] {
  color: #7f8eca;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  border: 1px dotted #7f8eca;
  background: #fff;
  height: 30px;
  box-shadow: none;
}

/* ダッシュライン */
[class*="btn_"][class*="dash"] {
  color: #7f8eca;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  border: 1px dashed #7f8eca;
  background: transparent;
  height: 60px;
  box-shadow: none;
}


/* フォローボタン_フォロー中ボタン */
.button_follow,
.button_following {
  color: #fff;
  font: 500 13px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 18px 0 32px;
  background: #51C96D;
  border: 1px solid #51C96D;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.button_follow:before,
.button_following:before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/shape/ico_follow_white.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
.button_following {
  color: #51C96D;
  background: #fff;
}
.button_following:before {
  background: url(../img/shape/ico_following_green.svg);
}
@media screen and (min-width: 480px){
  .button_follow:hover{
    color: #51C96D;
    background: #fff;
  }
  .button_following:hover{
    color: #fff;
    background: #51C96D;
  }
  .button_follow:hover:before { background: url(../img/shape/ico_follow.svg);}
  .button_following:hover:before {background: url(../img/shape/ico_following.svg);}
}

@media screen and (max-width: 430px){
  .button_follow,
  .button_following{
    font-size: 12px;
    padding: 0 10px 0 24px;
    height: 26px;
  }
  .button_follow:before,
  .button_following:before {
    width: 10px;
    height: 10px;
    left: 10px;
  }
}

/* ブロックボタン_ブロック中ボタン */
.button_block,
.button_blocking {
  color: #ED6086;
  font: 500 13px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 18px 0 32px;
  background: #fff;
  border: 1px solid #ED6086;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.button_block:before,
.button_blocking:before {
  content: "";
  width: 12px;
  height: 12px;
  background: url(../img/shape/ico_block.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
.button_blocking {
  color: #fff;
  background: #ED6086;
}
.button_blocking:before {
  background: url(../img/shape/ico_block_white.svg);
}
@media screen and (min-width: 480px){
  .button_block:hover{
    color: #fff;
    background: #ED6086;
  }
  .button_blocking:hover{
    color: #ED6086;
    background: #fff;
  }
  .button_block:hover:before{ background: url(../img/shape/ico_block_white.svg);}
  .button_blocking:hover:before{ background: url(../img/shape/ico_block.svg);}
}


/* メッセージボタン */
.button_message{
  color: #4f6fb7;
  font: 500 13px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 18px 0 32px;
  background: #fff;
  border: 1px solid #4f6fb7;
  border-radius: 5px;
  cursor: pointer;
  position: relative;
}
.button_message:before {
  content: "";
  width: 13px;
  height: 13px;
  background: url(../img/shape/ico_mail.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 12px;
}
@media screen and (min-width: 480px){
  .button_message:hover{
    color: #fff;
    background: #4f6fb7;
  }
  .button_message:hover:before {
    background: url(../img/shape/ico_mail_white.svg);
  }
}

/* 退会済み */
.button_unsubscribed{
  color: #fff;
  font: 500 13px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 32px !important;
  background: #dedede;
  border: 1px solid #dedede;
  border-radius: 5px;
  position: relative;
}

/* フラット */
[class*="btn_"][class*="flat"] {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  background: #1E5076;
  border-color: #1E5076;
  height: 36px;
  box-shadow: none;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="flat"]:hover {
    color: #1E5076;
    background: #fff;
  }
}

/* 戻るボタン */
[class*="btn_"][class*="back"] {
  color: #C1C5D3;
  border-color: #ddd;
  background: transparent;
  box-shadow: none;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="back"]:hover{
    color: #7f8eca;
    border-color: #7f8eca;
  }
}

/* カラー */
[class*="btn_"][class*="gray"] { border-color: #aaa; background: #aaa;}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="gray"]:hover { color: #aaa; background: #fff;}
}


/* 高さ */


/* 幅 */
[class*="btn_"][class*="full"] {
  width: 100%;
}

/* サイズ */
[class*="btn_"][class*="small"] { font-size: 12px;}
[class*="btn_"][class*="large"] { font-size: 18px;}


/* テキストボタン */
[class*="button_"][class*="text"] {
  color: #7f8eca;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  position: relative;
  display: flex;
  align-items: center;
  cursor: pointer;
}
[class*="button_"][class*="text"][class*="red"]{
  color: #DD5176;
}
[class*="button_"][class*="text"][class*="navy"]{
  color: #172858;
}
@media screen and (min-width: 480px){
  [class*="button_"][class*="text"]:hover {
    text-decoration: underline;
  }
}
[class*="button_"][class*="text"][class*="right"]:before,
[class*="button_"][class*="text"][class*="left"]:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
[class*="button_"][class*="text"][class*="right"] {
  padding-right: 18px;
}
[class*="button_"][class*="text"][class*="right"]:before {
  background: url(../img/shape/ico_button_right.svg);
  right: 0;
}
[class*="button_"][class*="text"][class*="left"] {
  padding-left: 24px;
}
[class*="button_"][class*="text"][class*="left"]:before {
  background: url(../img/shape/ico_button_left.svg);
  left: 0;
}
/* 白ver */
[class*="button_"][class*="text"][class*="white"] {
  color: #fff;
}
[class*="button_"][class*="text"][class*="right"][class*="white"]:before {
  border-color: #fff;
  background: url(../img/shape/ico_button_right_white.svg);
}

/* アイコン */
[class*="button_"][class*="text"][class*="ico"]{
  padding: 0 16px 0 0;
  position: relative;
}
[class*="button_"][class*="text"][class*="ico"]:before{
  content: "";
  background: #333;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
[class*="button_"][class*="text"][class*="ico"][class*="right"]:before{
  background: url(../img/ico_arrow_right_navy.svg);
}

/* ボタンエリア */
[class*="btnarea"] {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
}
[class*="btnarea"][class*="center"] {
  justify-content: center;
}
[class*="btnarea"][class*="right"] {
  justify-content: flex-end;
}
[class*="btnarea"][class*="full"] {
  width: 100%;
}

/* ステップの横並び */
/*
[class*="btnarea"][class*="step"] {
  display: flex;
  margin: -4px;
}
[class*="btnarea"][class*="step"] > *  {
  margin: 4px;
  flex: 2 1 auto;
  min-width: 10px;
}
[class*="btnarea"][class*="step"] > [class*="back"] {
  flex: 1 1 auto;
}
*/


/* ! バックグラウンド ———————————————————————————————————————————————————————————— */


/* ! パンくず ———————————————————————————————————————————————————————————— */
.area_bread {
  flex: 1 1 auto;
  min-width: 10px;
}

/* リスト */
.list_bread {
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
  margin-top: 4px;
  width: 100%;
}
.list_bread > li{
  padding: 3px;
  overflow: hidden;
}
.list_bread > li + li {
  padding-left: 30px;
  position: relative;
  max-width: 240px;
}
.list_bread > li + li:before {
  content: "";
  display: block;
  width: 9px;
  height: 9px;
  background: url(../img/shape/ico_right.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translate(-50% , -50%);
}
.list_bread p,
.list_bread a {
  color: #999;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_bread a {
  color: #7f8eca;
}
@media screen and (min-width: 480px){
  .list_bread a:hover {
    text-decoration: underline;
  }
}
@media screen and (max-width: 480px){
  .list_bread p,
  .list_bread a {
    font-size: 10px;
  }
}


/* ! テーブル ———————————————————————————————————————————————————————————— */

[class*="area_table_"]{
  margin: 30px 0 0;
}
table{ width: 100%;}
th,td { padding: 16px 8px;}
thead{
}
th {
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
}
td {
  font: 400 13px/1em 'noto sans japanese' , sans-serif;
}
tr + tr { border-top: 1px solid #eee;}
tbody { }


/* ! ページング ———————————————————————————————————————————————————————————— */
.paging {margin: 10px 0 0;}
.paging ul {
  display: -webkit-flex; display: flex;
  -webkit-flex-wrap: wrap; flex-wrap: wrap;
  -webkit-align-items: center; align-items: center;
}
.paging li {
  padding: 1px;
}
.paging a {
  text-align: center;
  font: 300 12px/1em 'noto sans japanese';
  display: block;
  border: 1px solid #222;
  border-radius: 2px;
  padding: 4px 7px;
  display: -webkit-flex; display: flex;
  -webkit-align-items: center; align-items: center;
  -webkit-justify-content: center; justify-content: center;
}
@media screen and (min-width: 480px){
  .paging a:hover {
    color: #fff;
    background: #222;
  }
}
.paging .current a{
  color: #fff;
  background: #000;
  pointer-events: none;
}
.paging .off a {
  pointer-events: none;
  color: #ddd;
  border-color: #ddd;
}


/* ! フォーム ———————————————————————————————————————————————————————————— */
input::-ms-clear{
  display: none;
}

/* ! フォーム_スタイル —————————————————————————————— */
input:not([type="checkbox"]):not([type="submit"]),
select,
textarea {
  font: 400 16px/1.5em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #E5E6EA;
  border-radius: 3px;
  width: 100%;
  flex: 1 1 auto;
  min-width: 10px;
/*   box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05); */
}
input:disabled,
textarea:disabled{
  background: #EFEFEF !important;
}

@media screen and (max-width: 480px){
  input:not([type="checkbox"]),
  select,
  textarea{
    font-size: 14px;
  }
}

/* 無効 */
.wrap_disabled {
  pointer-events: none;
}
.wrap_disabled input:not([type="checkbox"]) {
/*   background: #E5E6EA; */
  background: transparent;
  border-color: transparent;
  font-weight: bold;
}

/* ! フォーム_スタイル_フォーカス時 —————————————————————————————— */
input:focus,select:focus,textarea:focus { outline: none; border-color: #7f8eca;}

/* ! フォーム_高さ —————————————————————————————— */
input:not([type="submit"]),
select,
.wrap_checkbox label,
.wrap_radio label { height: 36px;}
.wrap_checkbox.min label,
.wrap_radio.min label { height: 36px;}
textarea { min-height: 100px; resize: none; padding: 8px 12px;}
textarea.xl {
  min-height: 300px;
}

@media screen and (max-width: 480px){
  input:not([type="submit"]),
  select,
  .wrap_checkbox label,
  .wrap_radio label
  .wrap_radio label { height: 42px;}
}

/* ! フォーム_デフォルトリセット —————————————————————————————— */
input,select,button,textarea{ -webkit-appearance: none; -moz-appearance: none; appearance: none;}
button { outline: none;}
select::-ms-expand { display: none;}
input:-webkit-autofill {-webkit-box-shadow: 0 0 0px 1000px #fafafa inset;}
input[type="checkbox"],input[type="radio"]{display: none;}

/* ! プレイスホルダー —————————————————————————————— */
input::-webkit-input-placeholder { color: #ccc;}
input:-ms-input-placeholder { color: #ccc;}
input::-moz-placeholder { color: #ccc;}
textarea::-webkit-input-placeholder { color: #ccc;}
textarea:-ms-input-placeholder { color: #ccc;}
textarea::-moz-placeholder { color: #ccc;}

/* ! フォーム_リスト —————————————————————————————— */
[class*="list_form"] { margin: -5px -10px;}
[class*="list_form"] > li { padding: 5px 10px;}

/* ! フォーム_タイトルの幅 —————————————————————————————— */
[class*="list_form"][class*="100"] .form_ttl {flex: 0 0 100px;}
[class*="list_form"][class*="200"] .form_ttl {flex: 0 0 200px;}
[class*="list_form"][class*="300"] .form_ttl {flex: 0 0 300px;}
[class*="list_form"] small {
  color: #999;
  font: 300 11px/1.3em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 4px 0 0;
}
[class*="list_form"] .sub_message {
  padding: 10px;
  background: #f7f9f9;
  border: 1px solid #eee;
  color: #333;
}

/* ! フォーム_レイアウト —————————————————————————————— */
.layout_form {
  display: flex;
  align-items: flex-start;
}

/* ! フォーム_タイトル —————————————————————————————— */
.ttl_form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 0 0 160px;
  min-height: 32px;
  margin: 0 10px 0 0;
  position: relative;
}

/* ! フォーム_コンテンツ —————————————————————————————— */
.cnt_form {
  flex: 1 1 auto;
  min-width: 10px;
}

/* ! フォーム_ラップ —————————————————————————————— */
[class*="wrap_input"] {
  display: flex;
  width: 100%;
  position: relative;
}
/* 住所などインプット要素を縦に並べる場合に仕様 */
[class*="wrap_input"][class*="column"] {
  flex-direction: column;
}
[class*="wrap_input"] + [class*="wrap_input"] {
  margin: 5px 0 0;
}
/* input要素の横幅を指定(wrap_inputと同時に指定) */
[class*="wrap_input_"][class*="50"] { max-width: 50px;}
[class*="wrap_input_"][class*="60"] { max-width: 60px;}
[class*="wrap_input_"][class*="75"] { max-width: 75px;}
[class*="wrap_input_"][class*="100"] { max-width: 100px;}
[class*="wrap_input_"][class*="120"] { max-width: 120px;}
[class*="wrap_input_"][class*="140"] { max-width: 140px;}
[class*="wrap_input_"][class*="150"] { max-width: 150px;}
[class*="wrap_input_"][class*="160"] { max-width: 160px;}
[class*="wrap_input_"][class*="200"] { max-width: 200px;}
[class*="wrap_input_"][class*="250"] { max-width: 250px;}
[class*="wrap_input_"][class*="280"] { max-width: 280px;}
[class*="wrap_input_"][class*="300"] { max-width: 300px;}
[class*="wrap_input_"][class*="350"] { max-width: 350px;}
[class*="wrap_input_"][class*="400"] { max-width: 400px;}
[class*="wrap_input_"][class*="450"] { max-width: 450px;}
[class*="wrap_input_"][class*="500"] { max-width: 500px;}
[class*="wrap_input_"][class*="550"] { max-width: 550px;}
[class*="wrap_input_"][class*="600"] { max-width: 600px;}
[class*="wrap_input_"][class*="full"] { max-width: 100vw;}


/* 注意書き */
.attention_required {
  color: #ED6086;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display:inline-block;
  padding: 0 0 0 20px;
  margin: 0 0 12px;
  position: relative;
}
.attention_required:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #ED6086 url(../img/shape/ico_form_check_white.svg) no-repeat;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* バリデーションスタイル */
[role="alert"].invalid-feedback {
  display: block;
  margin: 4px 0;
}
[role="alert"].invalid-feedback strong {
  color: #ED6086;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
}


/* ! ユニット —————————————————————————————— */
[class*="unit_"] {
  color: #000;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  padding: 0 .5em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex: 1 0 auto;
}
[class*="unit_min"] { flex: 0 0 .5em; padding: 0; }
[class*="unit_1"] { flex: 0 0 2.5em; }
[class*="unit_2"] { flex: 0 0 3.5em; }
[class*="unit_3"] { flex: 0 0 4.5em; }
[class*="unit_4"] { flex: 0 0 5.5em; }
[class*="unit_5"] { flex: 0 0 6.5em; }
[class*="unit_6"] { flex: 0 0 7.5em; }
[class*="unit_7"] { flex: 0 0 8.5em; }
[class*="unit_8"] { flex: 0 0 9.5em; }
[class*="unit"][class*="left"] { justify-content: flex-start;}
[class*="unit"][class*="right"] { justify-content: flex-end;}
[class *="unit"][class*="center"] { justify-content: center;}

/* ! フォーム_セレクトボックス —————————————————————————————— */
select {
  width: 100%;
  padding-right: 20px;
  cursor: pointer;
}
.wrap_select {
  width: 100%;
  position: relative;
}
.wrap_select:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/shape/ico_down.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  pointer-events:none;
  z-index: 1;
}

/* ! チェックボックス・ラジオボタン_共通項目 —————————————————————————————— */
.wrap_checkbox,
.wrap_radio {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.wrap_checkbox label,
.wrap_radio label {
  font: 400 12px/1.3em 'noto sans japanese';
  padding: 0 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
  user-select: none;
  cursor: pointer;
}
.wrap_checkbox label a,
.wrap_radio label a {
  color: #7f8eca;
  font-weight: 500;
}
@media screen and (min-width: 480px){
  .wrap_checkbox label a:hover,
  .wrap_radio label a:hover {
    text-decoration: underline;
  }
  .paging a:hover {
    color: #fff;
    background: #222;
  }
}
.wrap_checkbox label:before,
.wrap_checkbox label:after,
.wrap_radio label:before,
.wrap_radio label:after {
  content: "";
  width: 14px;
  height: 14px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.wrap_checkbox label:before,
.wrap_radio label:before {
  display: block;
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 2px;
}
.wrap_checkbox label:after,
.wrap_radio label:after {
  border: 1px solid #ddd;
  background: #222;
}
/* 選択時の指定 */
input[type=checkbox]:checked + label::after,
input[type=radio]:checked + label::after {
  display: block;
}
/* 横並び時用 */
input[type="checkbox"] + label,
input[type="radio"] + label{
  margin-right: 24px;
}
/* 線で囲む */
.wrap_radio.line {
  border: 1px solid #E5E6EA;
  border-radius: 5px;
  padding: 0 12px 0 24px;
}
/* ! チェックボックス —————————————————————————————— */
.wrap_checkbox label:after {
  background: #7f8eca url(../img/shape/ico_check_white.svg) no-repeat center center;
  border-color: #7f8eca;
  border-radius: 2px;
  display: none;
}

/* ! タブ型チェックボックス —————————————————————————————— */
.wrap_checkbox.tab input[type="checkbox"] + label {
  color: #000;
  font: 500 18px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  justify-content: center;
  margin: 0;
  padding: 0 24px;
  z-index: 1;
  cursor: pointer;
}
.wrap_checkbox.tab label:before,
.wrap_checkbox.tab label:after {
  height: 100%;
  width: 100%;
  background: #576086;
  border-color: #576086;
  border-radius: 4px;
  margin-right: 0;
  z-index: -1;
}
.wrap_checkbox.tab label:before {
  background: #fff;
  border: 1px solid #C1C5D3;
  border-radius: 4px;
}
.wrap_checkbox.tab label:after {  /* これで通常のscaleも打ち消している */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.wrap_checkbox.tab input[type=checkbox]:checked + label {
  color: #fff;
}

/* ! 住所のチェックボックス —————————————————————————————— */
.wrap_prefectures.wrap_checkbox .button_area {
  width: 100%;
  padding: 10px 0;
}
.wrap_prefectures.wrap_checkbox label {
  height: 28px;
  width: 72px;
  margin-right: 12px;
}


/* ! ラジオボタン —————————————————————————————— */
.wrap_radio label:before {
  border-radius: 50%;
}
.wrap_radio label:after {
  background: #7f8eca url(../img/shape/shape_circle_white.svg) no-repeat center center;
  background-size: 8px 8px;
  border-color: #7f8eca;
  border-radius: 50%;
  display: none;
}

/* ! テキスト型ラジオ —————————————————————————————— */
.wrap_radio.text label {
  margin: 0;
  padding: 4px 8px;
  height: auto;
}
.wrap_radio.text label:before,
.wrap_radio.text label:after {
  display: none !important;
}
.wrap_radio.text input[type=radio] + label{
  color: #CCD4E3;
}
.wrap_radio.text input[type=radio]:checked + label {
  color: #7f8eca;
}

/* ! タブ型ラジオ —————————————————————————————— */
/* ラジオボタンのタブ型デザイン */
.wrap_radio.tab input[type="radio"] + label,
.wrap_radio.tab input[type="radio"] + label:before,
.wrap_radio.tab input[type="radio"] + label:after {
  height: 40px;
  width: 78px;
}
.wrap_radio.tab input[type="radio"] + label {
  color: #E5E6EA;
  text-align: center;
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 5px 5px 0 0 ;
  padding: 0 24px;
  justify-content: center;
  z-index: 1;
  cursor: pointer;
}
.wrap_radio.tab label:before,
.wrap_radio.tab label:after {
  height: 28px;
  width: 100%;
  margin-right: 0;
  border-radius: 4px;
  border-color: #fff;
  border: 1px solid #E5E6EA;
  left: 0;
  z-index: -1;
}
.wrap_radio.tab label:after{
  background: #7857A7;
}
.wrap_radio.tab label:before {
  background: #fff;
}
.wrap_radio.tab label:after {  /* これで通常のscaleも打ち消している */
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.wrap_radio.tab input[type=radio]:checked + label {
  color: #fff;
}



/* ! 画像アップロード —————————————————————————————— */
.wrap_file {
  position: relative;
}
.wrap_file:before {
  content: "画像を選択";
  color: #fff;
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  background: rgba(0,0,0,.1);
  position: absolute;
  border-radius: 100px;
  top: 0;
  left: 0;
  z-index: 1;
}
.wrap_file input[type="file"] {
  width: 100px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}
.file_preview {
  background: url(../img/bg_no-photo.svg) no-repeat center center;
  background-size: contain !important;
}


/* ! セレクトを追加する箇所 ———————————————————————————————————————————————————————————— */
.wrap_add:first-child .button_text_delete_area {
  display: none;
}
.button_text_add_select,
.register_profession_button_text_add_select {
  margin: 4px 0 16px;
}
.wrap_add [class*=btnarea] {
  margin: 0 !important;
}

/* ! フラッシュメッセージ ———————————————————————————————————————————————————————————— */
.area_flash {
  padding: 20px;
}
.list_flash p {
  color: #333;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  height: 40px;
  border-radius: 5px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 0 40px 0 20px;
  background: #fff;
  border: 2px solid #51C96D;
  box-shadow: 0px 16px 8px -4px rgba(82, 200, 109,0.4);
}
.list_flash > li {
  transform: translateX(150%);
  transition: all 0.5s ease;
  visibility: hidden;
  opacity: 0;
}
.list_flash > li.flash_on {
  animation: flash 4s ease forwards;
}
.list_flash > li.flash_on p {
  cursor: pointer;
  pointer-events: all;
}
@keyframes flash {
  0% {
    transform: translateX(150%);
    visibility: hidden;
    opacity: 0;
  }
   20% {
    transform: translateX(0%);
    visibility: visible;
    opacity: 1;
  }
   80% {
    transform: translateX(0%);
    visibility: visible;
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
  }
}
/* クリックして消す場合。 */
.list_flash > li.flash_on.flash_remove {
  animation: flash_remove 1s ease forwards;
}
.list_flash > li.flash_on.flash_remove p {
  pointer-events: none;
  cursor: default;
}
@keyframes flash_remove {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(-50%);
    opacity: 0;
    pointer-events: none;
  }
}



/* ! リスト ———————————————————————————————————————————————————————————— */
[class*="list_text"] > li > article {
  display: flex;
  align-items: flex-start;
}
[class*="list_text"] > li + li {
  margin-top: 4px;
}
[class*="list_text"] .ttl_list {
  flex: 0 0 70px;
}
[class*="list_text"] .ttl_list p {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  padding: .5em 0 0;
}
[class*="list_text"] .cnt_list {
  flex: 1 1 auto;
  min-width: 10px;
}


/* ! ============================================================
　パーミッションエリア
============================================================ */
.area_permission {
  margin: 12px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.area_permission.left{
  align-items: flex-start;
}
.area_permission p {
  color: #444;
  font: 200 11px/1.3em 'noto sans japanese',sans-serif;
  padding: 0 0 0 12px;
  position: relative;
  width: 100%;
}
.area_permission p + p{
  margin: 3px 0 0;
}
.area_permission p:before {
  content: "※";
  position: absolute;
  top: .6em;
  left: 0;
  transform: translateY(-50%);
}
.area_permission a {
  color: #7f8eca;
  font-weight: 500;
  display: inline-block;
}
.area_permission.right{ align-items: flex-end;}


/* ラジオ */
.area_permission .wrap_checkbox {
  justify-content: center;
}

/* 会員登録箇所 */
.area_register .area_permission {
  margin: 0 0 16px;
}


/* ! ============================================================
　共通グレータイトル
============================================================ */
.head_bar_gray {
  background: #f1f1f1;
  padding: 10px 16px;
}
.head_bar_gray .ttl {
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
}
/* ! ============================================================
　メッセージ画面 IEのみ対応
============================================================ */
@media all and (-ms-high-contrast: none){
  .ChatContents ul.list_chat {
      min-height: 0%
  }
}

/* 公開日時 */
.js-reserve_date_toggle [name=reserve_date] {
  width: 105px !important;
}
.js-reserve_date_toggle > div >div {
  margin-right: 2px;
}
@charset "UTF-8";

/* ! 登録ログイン周り ==================================================

・ヘッダー・フッター
・レイアウト
・エリア_auth
・サイドバー_auth
・メイン_auth
・フォームリスト_auth
・SNSログイン

-------------------------------------------------- */
.body_auth {
  height: 100vh;
}
@media screen and (max-width: 767px){
  .body_auth {
    height: 100%;
  }
}
/* ! ヘッダー・フッター ———————————————————————————————————————————————————————————— */
.header_auth {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: transparent;
}
.header_auth > .container {
  max-width: none;
  padding: 0 40px;
  justify-content: flex-start;
}
.header_auth .logo img{
  width: 148px;
  height: auto;
  padding: 8px 0;
}
.footer_auth {
  pointer-events: none;
  width: 100%;
  background: transparent;
  position: absolute;
  bottom: 0;
  left: 0;
}
.footer_auth .container {
  max-width: none;
  height: 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (max-width: 767px){
  .footer_auth .container {
    justify-content: center;
  }
}
@media screen and (max-width: 480px) {
  .header_auth .logo img {
    width: 120px;
  }
  .header_auth > .container {
    padding: 0 16px;
  }
}


/* コピーライト */
.footer_auth .copyright {
  color: #fff;
}


/* ! レイアウト ———————————————————————————————————————————————————————————— */
.layout_auth {
  display: flex;
  flex: 1 1 auto;
  min-width: 10px;
}
.aside_auth {
  flex: 0 0 38%;
  background: #43a55b;
  background: -moz-linear-gradient(-45deg,  #43a55b 0%, #4ba543 100%);
  background: -webkit-linear-gradient(-45deg,  #43a55b 0%,#4ba543 100%);
  background: linear-gradient(135deg,  #43a55b 0%,#4ba543 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#43a55b', endColorstr='#4ba543',GradientType=1 );
}
.main_auth {
  flex: 1 1 auto;
  min-width: 10px;
  padding: 80px 16px 120px;
}
@media screen and (max-width: 767px){
  .layout_auth {
    flex-wrap: wrap-reverse;
  }
  .aside_auth {
    padding: 60px 0 120px;
    flex: 0 0 100%;
  }
  .main_auth {
    flex: 0 0 100%;
  }
}



/* ! エリア_auth ———————————————————————————————————————————————————————————— */
.area_auth {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 300px;
  width: 100%;
}
.area_auth .img {
  margin: 0 0 10px;
  text-align: center;
}
.area_auth .img img {
  height: 70px;
}
.area_auth .text {
  margin: 0 0 40px;
  width: 100%;
}
.area_auth .ttl {
  font: 700 32px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
  margin: 0 0 20px;
}
.area_auth .description {
  font: 400 15px/1.5em 'noto sans japanese',sans-serif;
  text-align: center;
}
.area_auth .description + .description {
  margin: 8px 0 0;
}
.area_auth .notes {
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  text-align: center;
  letter-spacing: .04em;
  display: block;
  margin: 12px 0 0
}
.area_auth .notes:before,
.area_auth .notes:after {
  content: "-";
}
.area_auth .cnt {
  width: 100%;
}
.area_auth form {
  width: 100%;
}
@media screen and (max-width: 1000px){
  .area_auth .ttl {
    font-size: 24px;
  }
  .area_auth .description {
    font-size: 13px;
  }
}
@media screen and (max-width: 560px){
  .area_auth .img {
    margin: 0 0 30px;
  }
  .area_auth .img img {
    height: 50px;
  }
  .area_auth .text {
    margin: 0 0 30px;
  }
}
@media screen and (max-width: 480px){
  .area_auth .img {
    margin: 0 0 20px;
  }
}

/* 新規会員登録エリアの場合 */
.aside_auth .area_auth {
  max-width: none;
  padding: 0 20px;
}
@media screen and (max-width: 800px){
  .aside_auth .area_auth {
    padding: 0 10px;
  }
}


/* ! サイドバー_auth ———————————————————————————————————————————————————————————— */
.aside_auth {
  color: #fff !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}


/* ! メイン_auth ———————————————————————————————————————————————————————————— */
.main_auth {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}


/* ! フォームリスト_auth ———————————————————————————————————————————————————————————— */
.list_form_auth {
  margin: -8px 0;
}
.list_form_auth > li {
  padding: 8px 0;
}
.list_form_auth .ttl {
  color: #666;
  font: 400 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 6px;
}
.list_form_auth .required .wrap_input {
  position: relative;
}
.list_form_auth .required [class="wrap_input"]:before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  background: #ED6086 url(../img/shape/ico_form_check_white.svg) no-repeat;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 100px;
  position: absolute;
  top: 3px;
  left: 3px;
  z-index: 1;
}
.list_form_auth textarea {
  padding: 10px 16px;
}
[class*="button_"][class*="text"][class*="add_area"]{
  margin: 4px 0 0;
}


/* ! 横並び —————————————————————————————— */
.list_form_auth.row > li {
  display: flex;
}
.list_form_auth.row .ttl {
  flex: 0 0 140px;
  margin: 0 20px 0 0;
  padding: 16px 0 0;
}
.list_form_auth.row .cnt {
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 560px){
  .list_form_auth.row > li {
    flex-wrap: wrap;
  }
  .list_form_auth.row .ttl {
    margin: 0 0 6px;
    padding: 0;
  }
  .list_form_auth.row .cnt {
    flex: 0 0 100%;
  }
}



/* ! SNSログイン ———————————————————————————————————————————————————————————— */
.area_login_sns {
  margin: 40px 0 0;
  width: 100%;
}
/* リスト */
.list_login_sns {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list_login_sns > li {
  padding: 5px;
  width: 100%;
}

/* SNSボタン */
[class*="btn_"][class*="sns"] {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  height: 38px;
  width: 100%;
  border: 1px solid transparent;
  background: #fff;
  padding-left: 60px;
  position: relative;
  box-shadow: 0px 25px 10px -10px rgba(24,119,242,.1);
}
[class*="btn_"][class*="sns"]:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
@media screen and (max-width: 430px){
  [class*="btn_"][class*="sns"]:before {
    width: 16px;
    height: 16px;
    left: 12px;
  }
}

/* SNSボタン_google */
[class*="btn_"][class*="sns"][class*="google"] {
  color: #777;
  border-color: #777;
}
[class*="btn_"][class*="sns"][class*="google"]:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/sns/ico_google_circle.svg");
}
/* SNSボタン_facebook */
[class*="btn_"][class*="sns"][class*="facebook"] {
  color: #1877F2;
  border-color: #1877F2;
}
[class*="btn_"][class*="sns"][class*="facebook"]:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/sns/ico_facebook_circle.svg");
}


/* ! 会員登録 ———————————————————————————————————————————————————————————— */
.area_register {
  max-width: 400px;
  margin: 0 auto;
}
.area_auth.area_register .ttl {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
}
.list_register {
  display: flex;
  flex-wrap: wrap;
}
.list_register > li {
  width: 100%;
}
.list_register > li + li {
  margin: 40px 0 0;
}
.list_register .ttl_list {
  font: 700 14px/1em 'noto sans japanese',sans-serif;
  text-align: left;
  margin: 0 0 20px;
}

/* 職業/業種/資格 */
[class*=list_form][class*=register] > .row{
  display: flex;
}

[class*=list_form][class*=register] .ttl{
  font: 400 13px/1em 'noto sans japanese',sans-serif;
  flex: 0 0 30px;
  margin: 0 20px 0 0;
  padding: 12px 0 0;
}
[class*=list_form][class*=register] .button_text_add_select{
  margin: 4px 0 0;
}
[class*=list_form][class*=register] [class*=button_][class*=delete]{
  margin: 0 0 0 4px;
}
@media screen and (max-width: 560px){
  [class*=list_form][class*=register] > .row{
    flex-wrap: wrap;
  }
  [class*=list_form][class*=register] .ttl{
    margin: 0 0 4px;
    padding: 0;
  }
}

/* SNS */
.area_register .list_login_sns > li {
  width: 50%;
}
[class*="btn_"][class*="sns"] {
  padding-left: 50px;
}
@media screen and (max-width: 430px){
  [class*="btn_"][class*="sns"] {
    font-size: 12px;
    padding-left: 32px;
    padding-right: 10px;
  }
}

/* ボタンエリア */
.area_register [class*="btnarea"] {
  margin: -4px;
  margin-top: 40px;
}
.area_register [class*="btn_"] {
  margin: 2px;
}
.area_register [class*="btn_"][class*="back"] {
  width: 30%;
}
.area_register [class*="btn_"][class*="next"] {
  width: 60%;
}

/* ! 会員登録_完了 ———————————————————————————————————————————————————————————— */
.area_complete {
  max-width: 600px;
}
.area_complete .ttl {
  font: 500 24px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 30px;
}
.area_complete .description {
  font: 300 15px/1.6em 'noto sans japanese',sans-serif;
}
.area_complete [class*="btn_"] {
  min-width: 300px;
}

/* ! パスワード忘れ ———————————————————————————————————————————————————————————— */
.area_forgot {
  max-width: 500px;
}
.area_forgot form {
  max-width: 320px;
  margin: 0 auto;
}
.area_forgot [class*="btnarea"] {
  margin: 40px 0 0;
}
.area_forgot [class*="btnarea"] + [class*="btnarea"] {
  margin: 20px 0 0;
}

/* リセット送信しました */
.area_forgot .alert-success {
  color: #51c96d;
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 40px;
}

/* リセット送信しました */
.area_forgot .alert-success {
  color: #51c96d;
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 40px;
}


/* ! ナビゲーション_auth ———————————————————————————————————————————————————————————— */
.area_nav_auth {
  width: 100%;
  position: absolute;
  bottom: 30px;
  left: 0;
}

/* リスト */
.list_nav_auth {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0 40px;
}



/* ! ============================================================
　無料会員 => 有料会員登録　モーダル
============================================================ */
/* ヘッド */
.head_register_paid {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 50px 0;
}
.head_register_paid .copy {
  color: #DC5C81;
  font: 700 16px/1.3em 'noto sans japanese',sans-serif;
}
.head_register_paid .now {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  margin: 12px 0 0;
}
@media screen and (max-width: 480px){
  .head_register_paid{
    margin: 30px 0 50px;
  }
  .head_register_paid .copy{
    font-size: 14px;
  }
  .head_register_paid .now{
    font-size: 12px;
  }
}

/* ボディ */
.body_register_paid > .ttl {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 30px 0 15px;
}


/* 選択 */
.wrap_plan label {
  display: flex;
  align-items: center;
  height: 90px;
  width: 100%;
  margin-right: 0 !important;
  border: 2px solid #eee;
  border-radius: 8px;
  padding: 0 60px;
}
.wrap_plan label:nth-of-type(n + 2) {
  margin:8px 0 0;
}
.wrap_plan label:before,
.wrap_plan label:after {
  left: 24px;
}
.wrap_plan label .name {
  font: 700 18px/1em 'noto sans japanese',sans-serif;
}
.wrap_plan label .price {
  font: 700 27px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
}
.wrap_plan label .price small{
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 0 0 4px;
}
.wrap_plan label .price:before {
  content: "¥";
  font-size: .8em;
  display:inline-block;
  margin: 0 4px 0 0;
}
.wrap_plan label .price:after {
  content: "（税込）";
  color: #666;
  font: 400 11px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 767px){
  .wrap_plan label {
    height: 70px;
  }
  .wrap_plan label .name {
    font-size: 16px;
  }
  .wrap_plan label .price{
    font-size: 24px;
  }
}
@media screen and (max-width: 560px){
  .wrap_plan label {
    padding: 0 30px 0 60px;
  }
}
@media screen and (max-width: 480px){
  .wrap_plan label {
    padding: 0 20px 0 40px;
  }
  .wrap_plan label:before,
  .wrap_plan label:after {
    left: 16px;
  }
  .wrap_plan label .name {
    font-size: 14px;
  }
  .wrap_plan label .price{
    font-size: 20px;
  }
  .wrap_plan label .price:after{
    font-size: 10px;
  }
}
@media screen and (max-width: 400px){
  .wrap_plan label{
    flex-direction:column;
    justify-content: center;
  }
  .wrap_plan label .price{
    margin: 6px 0 0;
  }
}

/* チェックされた状態 */
.wrap_plan input[type=radio]:checked + label {
  border-color: #808CCA;
  background: #EBEEFF;
}


/* ! セレクトを追加する箇所 ———————————————————————————————————————————————————————————— */
.wrap_add:first-child .button_text_delete_area {
  display: none;
}
.wrap_add [class*=btnarea] {
  margin: 0;
}

@charset "UTF-8";

/* ! スタイル_テンプレート ==================================================

・テンプレートページ
・アクション
・メディア
・コミュニティ CGM
・ステップ
・フォーム

-------------------------------------------------- */
/* ! テンプレートページ ———————————————————————————————————————————————————————————— */
.main_tpl {
  padding: 0 0 200px;
}
.main_tpl > section {
  margin: 40px auto 0;
}
.main_tpl > section > h2 {
  color: #ccc;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 60px 0 40px;
  padding: 0 0 10px;
  border-bottom: 1px solid #ddd;
}

/* ! テキスト —————————————————————————————— */
p.cat {
  color: #29446E;
  font: 600 12px/1em 'noto sans japanese',sans-serif;
}


/* ! アクション ———————————————————————————————————————————————————————————— */
.list_action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -6px;
  position: relative;
  z-index: 1;
}
.list_action > li {
  padding: 6px;
}
.list_action p {
  color: #707070;
  font: 900 16px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  font-style: italic;
  user-select: none;
  padding: 0 0 0 22px;
  min-height: 18px;
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  pointer-events: all;
}
.list_action p:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background-size: 20px 20px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.1s ease;
}
.action_on p:before {
  transform-origin: 50% 50%;
  animation: click .1s ease forwards;
}
@keyframes click {
  0% {
    transform: translateY(-50%) scale(1);
  }
  20% {
    transform: translateY(-50%) scale(1.5);
  }
  100% {
    transform: translateY(-50%) scale(1);
  }
}
.list_action p:after {
  content: "";
  color: #fff;
  font: 600 11px/1em 'noto sans japanese',sans-serif;
  text-align: center;
  display: inline-block;
  padding: 2px 8px;
  border: 1px solid #fff;
  border-radius: 100px;
  box-shadow: 0px 10px 5px -5px rgba(0,0,0,.1);
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translate(-50% , 20%);
  pointer-events: none;
  opacity: 0;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .list_action p:hover:after {
    opacity: 1;
    transform: translate(-50% , -0%);
  }
}
@media screen and (max-width: 480px){
  .list_action {
/*     margin: 0; */
  }
}

/* ゲストユーザーのとき */
.list_action.guest_list > li,
.list_action.guest_list > li p{
  /*pointer-events: none !important;*/
}

/* 個別 */
.action_book p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_book.svg");}
.action_book.action_on p {  color: #51C96D;}
.action_book.action_on p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_book_green.svg");
  border-color: #51C96D;
}
.action_book p:after {
  content: "ブックする";
  background: #51C96D;
  width: 56px;
}
.action_good p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_good.svg");}
.action_good.action_on p {color: #1383D5;}
.action_good.action_on p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_good_blue.svg");
}
.action_good p:after {
  content: "いいね";
  background: #1383D5;
  width: 36px;
}
.action_bad p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_bad.svg");}
.action_bad.action_on p {color: #06688E;}
.action_bad.action_on p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_bad_navy.svg");
}
.action_bad p:after {
  content: "あんまり";
  background: #06688E;
  width: 48px;
}
.action_agree p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_agree.svg");}
.action_agree.action_on p {color: #ED6086;}
.action_agree.action_on p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_agree_pink.svg");
}
.action_agree p:after {
  content: "共感した";
  background: #ED6086;
  width: 48px;
}
.action_raise p:after {
  content: none;
}

/* 個別_押せないもの */
.action_download p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_download.svg");
  animation: none;
}
.action_comment p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_comment.svg");
  animation: none;
}
.action_view p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_view.svg");
  animation: none;
}
.action_raise p {
  color: #F98823;
}
.action_raise p:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_raise.svg");
  animation: none;
  border-radius: 0;
}
.list_action .action_raise p {
  cursor: default;
}

.action_download p,
.action_comment p,
.action_view p,
.action_light p {
  cursor: default;
}
.action_download p:after,
.action_comment p:after,
.action_view p:after,
.action_light p:after {
  content: none;
}

/* 大きいサイズ */
.list_action.large {
  margin: -10px;
}
.list_action.large > li {
  padding: 10px;
}
.list_action.large p {
  font-size: 16px;
  padding: 0 0 0 28px;
}
.list_action.large p:before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: 16px 16px !important;
}


/* ステータス */
.list_status {
  display: flex;
  flex-wrap: wrap;
  margin: -6px;
}
.list_status > li {
  padding: 6px;
}
.list_status p {
  color: #707070;
  font: 600 12px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  user-select: none;
  padding: 0 0 0 22px;
  position: relative;
}
.list_status p:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  transition: all 0.1s ease;
}
/* 個別 */
.status_book p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_book.svg");}
.status_good p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_good.svg");}
.status_bad p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_bad.svg");}
.status_agree p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_agree.svg");}
.status_download p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_download.svg");}
.status_comment p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_comment.svg");}
.status_view p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_view.svg");}
.status_light p:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/new_top/ico/ico_light.svg");}


/* ! アクション_SNS ———————————————————————————————————————————————————————————— */
.list_action_sns {
  display: flex;
  flex-wrap: wrap;
  margin: -3px;
}
.list_action_sns > li {
  padding: 3px;
  display: flex;
  align-items: flex-end;
}
.list_action_sns > li + li {

}
.list_action_sns .sns_copy-url [class*="btn_"]{
  height: 21px;
  color: #7f8eca;
  border-color: #7f8eca;
  background: #fff;
  padding: 0 10px;
  border-radius: 3px;
  margin: 0;
}
@media screen and (min-width: 480px){
  .list_action_sns .sns_copy-url [class*="btn_"]:hover{
    background: #7f8eca;
    color: #fff;
  }
}

@media screen and (max-width: 560px){
  .list_action_sns {
    margin-bottom: 8px;
  }
}


/* ! カウント ———————————————————————————————————————————————————————————— */
.list_count {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px;
}
.list_count > li {
  padding: 0 10px;
}
.list_count p {
  font: 700 22px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
  letter-spacing: 0;
  user-select: none;
}
.list_count p:before {
  content: "";
  color: #A3A7B2;
  font: 400 10px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 4px;
  text-align: center;
}
@media screen and (max-width: 560px){
  .list_count p{
    font-size: 18px;74

  }
}

/* 個別 */
.count_follower p:before {
  content: "フォロワー";
}
.count_follow p:before {
  content: "フォロー中";
}

/* カウント表記 */
.tpl_count {
  color: #777;
  font: 700 22px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  text-align: center;
  letter-spacing: 0;
  user-select: none;
}
.tpl_count:before {
  content: attr(data-ttl)"";
  color: #A3A7B2;
  font: 400 10px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 4px;
  text-align: center;
}

/*
.count_on p,
.count_on p:before {
  color: #51C96D;
  animation: follow .1s ease forwards;
}
@keyframes follow {
  0% {
    transform: translateY(0%);
  }
  30% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(0%);

  }
}
*/



/* ! ユーザー ———————————————————————————————————————————————————————————— */
[class*="tpl_user"] {
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
@media screen and (min-width: 480px){
  [class*="tpl_user"]:hover {
    color: #51C96D;
  }
}

/* マイページhover処理停止 */
@media screen and (min-width: 480px){
  .area_info_profile [class*="tpl_user"]:hover {
    color: #333;
  }
  [class*="tpl_user"][class*="anonym"]:hover {
    color: #333;
  }
}

[class*="tpl_user"] [class*="thumb"] {
  margin-right: 6px;
  border-radius: 100px;
  overflow: hidden;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_guest.svg");
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
/* knowhowsの場合 */
[class*="tpl_user_knowhows"]:before {
  content: "";
  display: block;
  width: 120px;
  height: 24px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/logo.svg") no-repeat center center;
  background-size: contain !important;
}

/* パートナー */
.user_partner img {
  height: 16px;
  display:inline-block;
  margin: 0 0 0 6px;
}
.tpl_user .user_partner{
  padding: 6px;
}
.tpl_user .user_partner img{
  margin: 0 !important;
}

/* Windows */
@media all and (-ms-high-contrast: none){
  .tpl_user .user_partner{
    width: 100%;
  }
}


/* ! サムネイル ———————————————————————————————————————————————————————————— */
[class*="thumb"] {
  display: inline-block;
  width: 100%;
  height: auto;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 100px;
  overflow: hidden;
  vertical-align: bottom;
  position: relative;
}
[class*="thumb"]:before {
  content: "";
  display: block;
  padding-top: 100%;
}
[class*="thumb"][class*="_user"]{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_guest.svg");
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
[class*="thumb"][class*="square"] {
  border-radius: 0;
}
[class*="thumb"][class*="_user"][class*="_min"] {
  width: 18px;
}
[class*="thumb"][class*="_user"][class*="_small"] {
  width: 22px;
}
[class*="thumb"][class*="_user"][class*="_regular"] {
  width: 32px;
}
[class*="thumb"][class*="_user"][class*="_medium"]{
  width: 60px;
}
[class*="thumb"][class*="_user"][class*="_large"] {
  width: 100px;
}
[class*="thumb"]:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(81,201,109,.7) url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_right_white.svg") no-repeat center center;
  background-size: 18px 18px !important;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .tpl_user:hover [class*="thumb"]:after {
    transform: translateX(0);
  }
}

/* マイページhover処理停止 */
@media screen and (min-width: 480px){
  .area_info_profile .tpl_user:hover [class*="thumb"]:after {
    transform: translateX(-100%);
  }
}

/* ! 投稿情報 ———————————————————————————————————————————————————————————— */
.area_posted_info{
  display: flex;
  align-items: center;
}
.area_posted_info .tpl_user,.area_posted_info .user_partner{
  margin: 0 10px 0 0;
}
.area_posted_info .date{
  color: #aaa;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
}


/* ! ============================================================
リスト_メディア
============================================================ */
.list_media {
  display: flex;
  flex-wrap: wrap;
}
.list_media > li {
  width: 100%;
}
.list_media > li + li {
  border-top: 1px solid #eee;
}
.list_media article {
  position: relative;
  padding: 30px 0;
}
.list_media article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
[class*="btnarea_"][class*="delete_edit"]{
  margin: 8px 0 0;
  position: relative;
  z-index: 2;
}
[class*="btnarea_"][class*="delete_edit"] [class*="button_"] + [class*="button_"]{
  margin: 0 0 0 16px;
}
@media screen and (max-width: 560px){
  .list_media article {
    padding: 16px 0;
  }
}
@media screen and (max-width: 480px){
  .list_media article {
    padding: 10px 0;
  }
}
.list_media .list_tag,
.list_fmt .list_tag,
.list_community .list_tag,
.list_enquete_default .list_tag {
  height: 28px;
}

/*  */
.area_btngroup {
  margin: 0 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.area_btngroup [class*="btnarea_"][class*="delete_edit"]{
  margin: 0 10px 0 0;
}
.area_btngroup .area_report{
  width: auto;
  margin: 0;
}
@media screen and (max-width: 560px){
  .area_btngroup {
    margin: 6px 0 0;
  }
}


/* レイアウト */
.list_media .layout {
  display: flex;
  align-items: flex-start;
}
.list_media .layout > .img {
  flex: 0 0 100px;
  margin: 0 20px 0 0;
  border-radius: 5px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: all 0.2s ease;
  transform-origin: 0 center;
  z-index: 4;
  position: relative;
}
.list_media .layout > .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.list_media .layout > .img .cls_btn{
  display: block;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_close_circle.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
}
@media screen and (min-width: 480px){
  .list_media article .img:hover{
    transform: scale(4);
    z-index: 6;
    box-shadow: 2px 2px 1px 0px rgba(0,0,0,.2);
  }
}
.list_media .layout > .text {
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 560px){
  .list_media .layout > .img {
    flex: 0 0 80px;
    margin: 0 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .list_media article .img:hover{
    transform: scale(1);
    box-shadow: none;
  }
  .list_media article .img.expansion{
    transform: scale(4);
    z-index: 6;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);
  }
  .list_media .layout > .img.expansion .cls_btn{
    display: block;
  }
}
@media screen and (max-width: 360px){
  .list_media .layout > .img {
    flex: 0 0 60px;
  }
}

/* ヘッド */
.list_media .tpl_price {
  margin-left: auto;
}
.list_media .cat {
   margin: 0 0 8px;
 }
.list_media .ttl {
  font: 600 18px/1.4em 'noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  .list_media article:hover .ttl {
    color: #3f7cc4;
  }
}
.list_media .description {
  color: #444;
  font: 300 13px/1.5em 'noto sans japanese',sans-serif;
  margin: 6px 0 0;
}
@media screen and (max-width: 560px){
  .list_media .ttl{
    font-size: 16px;
  }
}
@media screen and (max-width: 360px){
  .list_media .description{
    font-size: 12px;
  }
}


/* リスト */
.list_media .list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px -6px;
}
.list_media .list .list_tag {
  margin: 0 12px 0 0;
}
.list_media .list [class*="list_"]{
  margin: 0;
  padding: 4px 6px;
}


/* ! メディアリスト min —————————————————————————————— */
.list_media.min .ttl {
  font-size: 16px;
}
.list_media.min .description {
  font-size: 13px;
}
.list_media.min article {
  padding: 16px 0;
}
.list_media.min .layout > .img {
  flex: 0 0 70px;
  margin: 0 16px 0 0;
}


/* ! 背景白埋め —————————————————————————————— */
[class*="list_media_card"][class*="_fill"] article {
  background: #fff;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0px 4px 8px -4px rgba(0,0,0,.1);
}
[class*="list_media_card"][class*="_fill"] .img {
  border-radius: 5px 5px 0 0;
}
[class*="list_media_card"][class*="_fill"] .text {
  padding: 0 16px 16px;
}
[class*="list_media_card"][class*="_fill"] .description {
  color: #888;
}



/* ! ============================================================
リスト_コンテンツ
============================================================ */
[class*="list_cnt"] {
  display: flex;
  flex-wrap: wrap;
}
[class*="list_cnt"] > li {
  width: 100%;
}
[class*="list_cnt"] > li + li {
  border-top: 1px solid #eee;
}
[class*="list_cnt"] article {
  position: relative;
  padding: 24px 0;
}
[class*="list_cnt"] article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 600px){
  [class*="list_cnt"] article {
    padding: 20px 0;
  }
}
@media screen and (max-width: 480px){
  [class*="list_cnt"] article {
    padding: 10px 0;
  }
}
[class*="list_cnt"] .list_tag {
  height: 28px;
}

/* レイアウト */
[class*="list_cnt"] .layout {
  display: flex;
  align-items: flex-start;
}
[class*="list_cnt"] .layout > .img {
  flex: 0 0 100px;
  margin: 0 20px 0 0;
  border-radius: 5px;
  background-size: contain!important;
  background-position: center center!important;
  background-repeat: no-repeat!important;
  position: relative;
  overflow: hidden;
  transition: all .2s ease;
  transform-origin: 0 center;
  z-index: 4;
  background: #000;
}
[class*="list_cnt"] .layout .img:hover{
  transform: scale(4);
  z-index: 6;
  box-shadow: 2px 2px 1px 0px rgba(0,0,0,.2);
}
[class*="list_cnt"] .layout > .img:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 100%;
}
[class*="list_cnt"] .layout > .img > img {
    position: absolute;
    top: 0;
    left: 0;
}
[class*="list_cnt"] .layout > .text {
  flex: auto;
  min-width: 10px;
}
@media screen and (max-width: 560px){
  [class*="list_cnt"] .layout > .img {
    flex: 0 0 80px;
    margin: 0 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  [class*="list_cnt"] .layout .img:hover{
    transform: scale(1);
    box-shadow: none;
  }
  [class*="list_cnt"] .layout .img.expansion{
    transform: scale(4);
    z-index: 6;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);
  }
  [class*="list_cnt"] .layout > .img.expansion .cls_btn{
    display: block;
  }
}
@media screen and (max-width: 360px){
  [class*="list_cnt"] .layout > .img {
    flex: 0 0 60px;
  }
}



/* ヘッド */
.head_list_cnt {
  display: flex;
}
[class*="list_cnt"] .tpl_price {
  margin-left: auto;
  flex: 0 0 120px;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
}
[class*="list_cnt"] .cat {
   margin: 0 0 8px;
 }
[class*="list_cnt"] .ttl {
  font: 600 18px/1.4em 'noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  [class*="list_cnt"] article:hover .ttl {
    color: #DD5176;
  }
}
[class*="list_cnt"] .description {
  color: #444;
  font: 300 13px/1.5em 'noto sans japanese',sans-serif;
  margin: 6px 0 0;
}
[class*="list_cnt"] .tpl_price {
  padding: 8px 0;
}

@media screen and (max-width: 820px){
  [class*="list_cnt"] .tpl_price {
    flex: 0 0 auto;
    display: block;
  }
  [class*="list_cnt"] .tpl_price.free:before{
    bottom: 0;
    top: auto;
    transform: translateY(0);
  }
}
@media screen and (max-width: 600px){
  [class*="list_cnt"] .ttl {
    font-size: 16px;
    width: 100%;
  }
}
@media screen and (max-width: 480px){
  [class*="list_cnt"] .tpl_price {
    padding: 4px 0;
  }
}
@media screen and (max-width: 360px){
  [class*="list_cnt"] .description {
    font-size: 12px;
  }
  [class*="list_cnt"] .tpl_price{
    margin-top: 10px;
  }
}



/* ! ロックされた状態 ============================== */
[class*="list_cnt"] .protected .text:before{
  content: "パスワードつき";
  color: #aaa;
  font: 600 10px/1em 'noto sans japanese',sans-serif;
  display: inline-block;
  background: #fff url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_protected.svg") no-repeat center left 6px;
  border: 1px solid #aaa;
  background-size: 14px 14px;
  padding: 5px 8px 5px 24px;
  margin: 0 0 8px;
}

/* リスト */
[class*="list_cnt"] .list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px -6px;
}
[class*="list_cnt"] .list .list_tag {
  margin: 0 12px 0 0;
}
[class*="list_cnt"] .list [class*="list_"]{
  margin: 0;
  padding: 4px 6px;
}

/* コンテンツ_ステータス */
.status_cnt {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 0;
}
.status_cnt .list_action {
  margin-left: auto;
  position: relative;
  z-index: 2;
}
.status_cnt .list_cat {
  margin: 0 0 0 12px;
  position: relative;
  z-index: 2;
}
.status_cnt .area_poster {
  margin: 0 auto 0 0 ;
  position: relative;
  z-index: 2;
}

@media screen and (max-width: 560px){
  .status_cnt{
    display: block;
  }
  .status_cnt .area_poster{
    margin: 0 0 6px;
  }
  .status_cnt .list_action{
    margin: -6px;
  }
}

/* ! コンテンツリスト min —————————————————————————————— */
[class*="list_cnt"].min .ttl {
  font-size: 16px;
}
[class*="list_cnt"].min .description {
  font-size: 13px;
}
[class*="list_cnt"].min article {
  padding: 16px 0;
}
[class*="list_cnt"].min .layout > .img {
  flex: 0 0 70px;
  margin: 0 16px 0 0;
}

/* knowhows公式 */
[class*="list_cnt"].min > .official .ttl {
  width: 100%;
}
[class*="list_cnt"].min > .official .ttl:before {
  content: "KnowHows公式";
  color: #43ac5d;
  display: block;
  font-size: 11px;
  border-bottom: 1px solid #43ac5d;
  margin: 0 0 5px;
}


/* ! ============================================================
リスト_コミュニティー
============================================================ */
.list_community > li + li {
  border-top: 1px solid #eee;
}
.list_community > li > article {
  background: #fff;
  padding: 24px 0 24px 30px;
  position: relative;
}
@media screen and (max-width: 480px){
  .list_community > li > article {
    overflow: hidden;
  }
}
.list_community > li > article:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_question.svg") no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 26px;
  left: 0;
}
.list_community > li > article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.list_community .ttl {
  font: 600 18px/1.4em 'noto sans japanese',sans-serif;
  letter-spacing: .02em;
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_community .count {
  font: 900 18px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  margin: 6px 0 0;
}
.list_community .count:after {
  content: "人が回答しています";
  color: #777;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 0 0 4px;
}
@media screen and (max-width: 560px){
  .list_community > li > article {
    padding: 16px 0 16px 30px;
  }
  .list_community > li > article:before {
    width: 18px;
    height: 18px;
    top: 12px;
  }
  .list_community .ttl{
    font-size: 16px;
  }
}
@media screen and (max-width: 480px){
  .list_community > li > article {
    padding: 10px 0 10px 30px;
  }
}


/* ベストアンサー決定している/未回答 */
.list_community .best-answer_decision,
.list_community .unanswered{
  padding-top: 22px;
  position: relative;
}
.list_community .best-answer_decision:before,
.list_community .unanswered:before {
  content: "ベストアンサー";
  color: #F98724;
  font: 600 10px/1em 'noto sans japanese',sans-serif;
  display: inline-block;
  background: #fff url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_check_orange.svg") no-repeat center left 6px;
  border: 1px solid #F98724;
  background-size: 10px 10px;
  padding: 4px 8px 4px 20px;
  position: absolute;
  top: 20px;
  left: 0;
  z-index: 1;
}
.list_community .unanswered:before {
  content: "未回答";
  color: #fff;
  background: #F98724;
  padding: 4px 8px;
}
@media screen and (max-width: 560px){
  .list_community .best-answer_decision:before,
  .list_community .unanswered:before {
    top: 10px;
  }
}

aside .list_community .best-answer_decision:before,
aside .list_community .unanswered:before{
  top: 10px;
}



/* リスト */
.list_community .list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px -6px;
}
.list_community .list [class*=list_] {
  margin: 0;
  padding: 4px 6px;
}

/* アクション */
.list_community .status_cnt{
  margin: 0 0 0 auto;
  display: flex;
}


/* コミュニティ_ステータス */
.status_community {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 6px 0;
}
.status_community .list_action {
  position: relative;
  z-index: 2;
}
.status_community .list_cat {
  margin: 0 0 0 12px;
  position: relative;
  z-index: 2;
}
.status_community .area_poster {
  margin: 0 0 0 auto;
  position: relative;
  z-index: 2;
}


/* ページング */
.area_community [class*="area_paging"] {
  margin: 30px 0 0;
}


/* ! コミュニティリスト min —————————————————————————————— */
[class*="list_community"].min article {
  padding: 16px 0 16px 28px;
}
[class*="list_community"].min > li > article:before {
  width: 18px;
  height: 18px;
  top: 16px;
}
[class*="list_community"].min .list {
  margin: 10px 0 5px;
}
[class*="list_community"].min .ttl {
  font-size: 14px;
}
[class*="list_community"].min .count {
  font-size: 16px;
}
[class*="list_community"].min .count:after {
  font-size: 11px;
}
[class*="list_community"].min .best-answer_decision .count:before {
  display: block;
  width: 70px;
  padding: 2px 4px 2px 16px;
  background-position: left 4px center;
}




/* ! リスト_タグ —————————————————————————————— */
.list_tag {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
  z-index: 1;
}
.list_tag > li {
  padding: 2px 8px 2px 2px;
}


/* ! タグのリスト —————————————————————————————— */
.list_tag{
  position: relative;
  z-index: 1;
  overflow: hidden;
}
.list_tag p,
.list_tag a {
  color: #aaa;
  font: 500 11px/18px 'noto sans japanese',sans-serif;
  display: block;
  height: 18px;
  padding: 0 8px 0 10px;
  background: #EEE;
  border-radius: 0;
  position: relative;
  transition: all 0.1s ease;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.list_tag p:before,
.list_tag a:before {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 9px 0 9px 6px;
  border-color: transparent transparent transparent #EEE;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(99% , -50%);
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .list_tag a:hover{
    background: #7f8eca;
    color: #eee;
  }
  .list_tag p:hover:before,
  .list_tag a:hover:before {
    border-color: transparent transparent transparent #7f8eca;
  }
}

/* 色 */
.list_tag.navy p,
.list_tag.navy a {
  background: #172858;
  color: #fff;
}
.list_tag.navy p:before,
.list_tag.navy a:before {
border-color: transparent transparent transparent #172858;
}

/* ! リスト_コンテンツ_カード ———————————————————————————————————————————————————————————— */
[class*="list_cnt"][class*="card"] {
  display: flex;
  margin: 0 -5px;
}
[class*="list_cnt"][class*="card"] > li {
  max-width: 200px;
  padding: 0 px;
  flex: 0 0 auto;
}

/* ! コンテンツ_料金の表示 —————————————————————————————— */
.tpl_price {
  color: #ED6086;
  font: 700 18px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .02em;
  display: inline-flex;
  align-items: center;
}
.tpl_price:before,
.tpl_price:after {
  content: "";
  color: #333;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
}
.tpl_price:before {
  content: "税込";
  margin: 0 4px 0 0;
}
.tpl_price:after {
  content: "円";
  margin: 0 0 0 4px;
}
@media screen and (max-width: 600px){
  .tpl_price {
  }
  .tpl_price:before,
  .tpl_price:after{
    font-size: 11px;
  }
}

/* 無料の場合 .free */
.tpl_price.free{
  position: relative;
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
  padding: 8px 0;
  border-radius: 4px;
}
.tpl_price.free:before,
.tpl_price.free:after {
  display: none;
}
[class*="list_cnt"].min .tpl_price.free,
.tpl_price.free.min {
  justify-content: flex-start;
  min-width: auto;
  flex: 0 0 auto;
}


/* 小さく */
[class*="list_cnt"].min .tpl_price,
.tpl_price.min {
  font-size: 14px;
}
[class*="list_cnt"].min .tpl_price:before,
[class*="list_cnt"].min .tpl_price:after,
.tpl_price.min:before,
.tpl_price.min:after{
  font-size: 11px;
}



[class*="list_cnt"][class*="card"] .tpl_price {
  margin: 16px 0 24px;
}
[class*="list_cnt"][class*="card"] .area_poster {
  border-top: 1px solid #E5E7EB;
  padding-top: 8px;
  margin-top: 8px;
}



/* ! 記事へ投稿されたリスト ———————————————————————————————————————————————————————————— */
.list_contents_post {
  width: 100%;
  margin: 40px 0 0;
  position: relative;
}
.list_contents_post:before {
  content: attr(data-ttl)"";
  color: #333;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 0 8px;
}
.list_contents_post > li + li {
  margin-top: 4px;
}
.list_contents_post article {
  padding: 12px;
  border: 2px solid #ccc;
  border-radius: 3px;
  position: relative;
}
.list_contents_post article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.list_contents_post .ttl {
  color: #999;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
}
.list_contents_post .layout {
  display: flex;
  align-items: center;
  margin: 8px 0 0;
}
.list_contents_post .user {
  margin-right: auto;
}
.list_contents_post .price {
  margin: 0 0 0 20px;
}
@media screen and (max-width: 480px){
  .list_contents_post .layout{
    flex-direction:column;
    align-items: flex-end;
  }
}


/* 公式による投稿 */
.list_contents_post > .official article {
  border-color: #43ac5d;
}
.list_contents_post > .official .ttl:before {
  content: "KnowHows公式：";
  color: #43ac5d;
  font-weight: 600;
  font-size: 11px;
}


/* ! コミュニティ CGM ———————————————————————————————————————————————————————————— */
/* リスト */
[class*="list_cgm"] > li + li {
  margin: 24px 0 0;
}
[class*="list_cgm"] .ttl {
  font: 600 13px/1.4em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 4px;
}
[class*="list_cgm"] .description {
  color: #888;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
}
[class*="list_cgm"] .list_action {
  margin-top: 4px;
}
[class*="list_cgm"] .area_poster {
  margin: 8px 0 0;
}

/* ! ロックされた状態 ============================== */
[class*="list_cgm"] .protected .ttl {
  position: relative;
  padding-left: 28px;
}
[class*="list_cgm"] .protected .ttl:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_protected.svg") no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: .8em;
  left: 0;
  transform: translateY(-50%);
}
/* ランキング内 */
.area_ranking_aside [class*="list_cgm"] .protected .ttl {
  padding-left: 48px;
}
[class*="list_cgm"] .protected .ttl:after {
  left: 24px;
}

/*  */
[class*="list_cgm"].ellipsis .ttl{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ! フォーマット ———————————————————————————————————————————————————————————— */
/* ! ============================================================
リスト_メディア
============================================================ */
.list_fmt {
  display: flex;
  flex-wrap: wrap;
}
.list_fmt > li {
  width: 100%;
}
.list_fmt > li + li {
  border-top: 1px solid #eee;
}
.list_fmt article {
  position: relative;
  padding: 20px 0;
}
.list_fmt article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 560px){
  .list_fmt article {
    padding: 20px 0;
  }
}
@media screen and (max-width: 480px){
  .list_fmt article {
    padding: 16px 0;
  }
}

/* レイアウト */
.list_fmt .layout {
  display: flex;
  align-items: flex-start;
}
.list_fmt .layout > .img {
  flex: 0 0 100px;
  margin: 0 20px 0 0;
  border-radius: 5px;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  overflow: hidden;
  transition: all 0.2s ease;
  transform-origin: 0 center;
  z-index: 4;
  background: #000;
}
.list_fmt .layout > .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.list_fmt .layout > .img .cls_btn{
  display: block;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_close_circle.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 6px;
  height: 6px;
  position: absolute;
  top: 4px;
  right: 4px;
  display: none;
}
.list_fmt .layout .img:hover{
  transform: scale(4);
  z-index: 6;
  box-shadow: 2px 2px 1px 0px rgba(0,0,0,.2);
}
.list_fmt .layout > .img > img {
  position: absolute;
  top: 0;
  left: 0;
}
.list_fmt .layout > .text {
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 560px){
  .list_fmt .layout > .img {
    flex: 0 0 80px;
    margin: 0 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .list_fmt .layout .img:hover{
    transform: scale(1);
    box-shadow: none;
  }
  .list_fmt .layout .img.expansion{
    transform: scale(4);
    z-index: 6;
    box-shadow: 1px 1px 1px 0px rgba(0,0,0,.1);
  }
  .list_fmt .layout > .img.expansion .cls_btn{
    display: block;
  }
}
@media screen and (max-width: 360px){
  .list_fmt .layout > .img {
    flex: 0 0 60px;
  }
}

/* ヘッド */
.list_fmt .tpl_price {
  margin-left: auto;
}
.list_fmt .cat {
/*    margin: 0 0 8px; */
 }
.list_fmt .ttl {
  font: 600 18px/1.4em 'noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  .list_fmt article:hover .ttl {
    color: #37BAA6;
  }
}
.list_fmt .description {
  color: #444;
  font: 300 13px/1.5em 'noto sans japanese',sans-serif;
  margin: 6px 0 0;
}
@media screen and (max-width: 560px){
  .list_fmt .ttl{
    font-size: 16px;
  }
}
@media screen and (max-width: 360px){
  .list_fmt .description {
    font-size: 12px;
  }
}


/* ! スターエリア（評価） ———————————————————————————————————————————————————————————— */
.area_stars {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

/* リスト */
.list_fmt .list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 4px -6px;
}
.list_fmt .list [class*=list_] {
  margin: 0;
  padding: 4px 6px;
}
.list_fmt .area_stars {
  margin: 0 0 8px;
}

/* 評価リスト */
.list_stars {
  display: flex;
  margin: 0 6px 0 0;
}
.list_stars > li{
  position: relative;
}
.list_stars > li:before,
.list_stars > li:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/shape/ico_star_blank.svg) no-repeat center center;
  background-size: contain;
}
.list_stars.skyblue > li:before{
  background: url(../img/shape/ico_star_blank.svg) no-repeat center center;
}
.list_stars > li:after{
  background: url(../img/shape/ico_star_half.svg) no-repeat center center;
  background-size: contain;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.list_stars.star_1 > li:nth-of-type(1):before,
.list_stars.star_1_5 > li:nth-of-type(1):before,
.list_stars.star_2 > li:nth-of-type(-n + 2):before,
.list_stars.star_2_5 > li:nth-of-type(-n + 2):before,
.list_stars.star_3 > li:nth-of-type(-n + 3):before,
.list_stars.star_3_5 > li:nth-of-type(-n + 3):before,
.list_stars.star_4 > li:nth-of-type(-n + 4):before,
.list_stars.star_4_5 > li:nth-of-type(-n + 4):before,
.list_stars.star_5 > li:nth-of-type(-n + 5):before{
  background: url(../img/shape/ico_star.svg) no-repeat center center;
  background-size: contain;
}
.list_stars.star_1_5 > li:nth-of-type(2):after,
.list_stars.star_2_5 > li:nth-of-type(3):after,
.list_stars.star_3_5 > li:nth-of-type(4):after,
.list_stars.star_4_5 > li:nth-of-type(5):after{
  display: block;
}
.list_stars.skyblue.star_1 > li:nth-of-type(1):before,
.list_stars.skyblue.star_1_5 > li:nth-of-type(1):before,
.list_stars.skyblue.star_2 > li:nth-of-type(-n + 2):before,
.list_stars.skyblue.star_2_5 > li:nth-of-type(-n + 2):before,
.list_stars.skyblue.star_3 > li:nth-of-type(-n + 3):before,
.list_stars.skyblue.star_3_5 > li:nth-of-type(-n + 3):before,
.list_stars.skyblue.star_4 > li:nth-of-type(-n + 4):before,
.list_stars.skyblue.star_4_5 > li:nth-of-type(-n + 4):before,
.list_stars.skyblue.star_5 > li:nth-of-type(-n + 5):before{
  background: url(../img/shape/ico_star.svg) no-repeat center center;
  opacity: 1;
}



/* 知識を買う／売る一覧_情報エリア */
.area_info_store {
  display: flex;
  align-items: center;
  margin: 12px 0 0;
  background: #f9f9f9;
  padding:12px 16px;
}
@media screen and (max-width: 820px){
  .area_info_store{
    flex-direction:column;
    align-items: flex-start;
  }
}

/* 情報リスト */
.list_info_store {
  display: flex;
  flex-wrap: wrap;
  margin: -2px -6px;
  margin-bottom: 6px;
}
.list_info_store > li {
  padding: 2px 6px;
}
.list_info_store p {
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_info_store span{
  color: #777;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
}
.list_info_store .extention {
  color: #000;
  font: 400 12px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 2px 4px;
}


/* ウィルス表示 */
.list_info_store [class*="virus_"] {
  padding: 0 0 0 16px;
  position: relative;
}
.list_info_store [class*="virus_"]:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* 個別 */
.list_info_store [class*="virus_"][class*="now"]{ color: #aaa;}
.list_info_store [class*="virus_"][class*="ok"]{ color: #48BE63;}
.list_info_store [class*="virus_"][class*="ng"]{ color: #DD4F76;}
.list_info_store [class*="virus_"][class*="now"]:before { background: url(../img/shape/ico_virus_checking.svg);}
.list_info_store [class*="virus_"][class*="ok"]:before { background: url(../img/shape/ico_virus_ok.svg);}
.list_info_store [class*="virus_"][class*="ng"]:before { background: url(../img/shape/ico_virus_ng.svg);}



/* カウント */
.area_stars .count {
  color: #777;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
}
.area_stars .count span {
  color: #000;
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 2px 0 0;
}

/* 知識を買う／売る_デジコンnum */
.digicon_number{
  text-align: right;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  color: #666;
}
.list_cnt .digicon_number{
  position: absolute;
  right: 0;
  bottom: 6px;
}
@media screen and (max-width: 600px){
  .list_cnt .digicon_number{
    bottom: 4px;
  }
}
@media screen and (max-width: 480px){
  .list_cnt .digicon_number {
    bottom: 4px;
    position: static;
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 0px;
  }
}

/* 知識を買う／売る_デジコンnum_詳細ページ */
.area_digicon_number{
  display: flex;
  justify-content: flex-end;
  margin: 10px 0 0;
}

/* ! 詳細ページレビュー投稿 —————————————————————————————— */
.head_post_review{
  display: flex;
  flex-wrap: wrap;
}
.body_post_review{
  margin: 30px 0 0;
}
media screen and (max-width: 560px)
.head_post_review [class*="btnarea_"][class*="post"][class*="review"] {
  width: auto;
  margin: 0 0 0 auto;
}

/* ! メディアリスト min —————————————————————————————— */
.list_fmt.min .ttl {
  font-size: 16px;
}
.list_fmt.min .description {
  font-size: 13px;
}
.list_fmt.min article {
  padding: 16px 0;
}
.list_fmt.min .layout > .img {
  flex: 0 0 70px;
  margin: 0 16px 0 0;
}
@media screen and (max-width: 360px){
  .list_fmt.min .layout > .img {
    margin: 0 0 10px;
  }
}





/* ! ユーザーリスト ———————————————————————————————————————————————————————————— */
.list_user_card {
  display: flex;
  margin: -3px;
}
.list_user_card > li {
  max-width: 200px;
  width: 100%;
  padding: 3px;
  padding-top: 28px;
  flex: 0 0 auto;
}
.list_user_card article {
  background: #fff;
  padding: 16px;
  border-radius: 5px;
  box-shadow: 0px 4px 8px -4px rgba(0,0,0,.1);
  position: relative;
}
.list_user_card article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.list_user_card .img {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin: -40px 0 8px;
}
.list_user_card [class*="thumb"] {
  box-shadow: 0px 4px 8px -4px rgba(41,68,110,.4);
  border-radius: 100px;
  background: url(../img/img_guest.svg);
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.list_user_card .text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list_user_card .ttl {
  font: 600 15px/1.4em 'noto sans japanese',sans-serif;
  margin: 4px 0;
}
@media screen and (min-width: 480px){
  .list_user_card article:hover .ttl{
    color: #51C96D;
  }
}
.list_user_card .description {
  color: #888;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
}
.list_user_card .list_count {
  border-top: 1px solid #E5E7EB;
  margin-top: 12px;
  margin-bottom: 12px;
  padding: 12px 0 0;
  justify-content: center;
}
.list_user_card .list_count p {
  font-size: 18px;
}
.list_user_card .list_status {
  justify-content: center;
}
@media screen and (max-width: 480px){
  .list_user_card .ttl {
    font-size: 14px;
  }
}


/* ! タブ_カテゴリー ———————————————————————————————————————————————————————————— */
.list_tab_button_cat {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: 100%;
  background: #F7F9F9;
  border: 1px solid #eee;
  padding: 2px;
  border-radius: 4px;
}
.list_tab_button_cat > li{
  padding: 2px;
  position: relative;
}
.list_tab_button_cat > li.unread:before{
  content: "";
  background: url(../img/shape/ico_unread.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 14px;
  height: 14px;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}
.list_tab_button_cat > li.unread a{
  padding-right: 13px;
}
.list_tab_button_cat a{
  color: #777;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .06em;
  text-align: center;
  display: block;
  padding: 8px 14px;
  border: 1px solid #eee;
  border-radius: 3px;
  background: transparent;
  transition: all 0.1s ease;
  position: relative;
}
.list_tab_button_cat a span{
  font: 600 1em/1em Roboto,'noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  .list_tab_button_cat a:hover {
    color: #7f8eca;
    border-color: #7f8eca;
  }
}
.list_tab_button_cat > .tab_current a{
  color: #000;
  border-color: #fff;
  background: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,.2);
}
@media screen and (max-width: 480px){
  .list_tab_button_cat a {
    padding: 5px 10px;
  }
}




/* リスト_パネル */
.list_tab_panel_cat {
  margin: 5px 0 0;
}
.list_tab_panel_cat > .tab_panel_cat {
  display: none;
}
.list_tab_panel_cat > .tab_panel_cat.tab_current {
  display: block;
}
.list_tab_panel_cat > .tab_panel_cat > article {
  background: #F7F9F9;
  padding: 20px;
}
.list_tab_panel_cat > .tab_panel_cat > article + article{
  margin: 5px 0 0;
}
@media screen and (max-width: 480px){
  .list_tab_panel_cat > .tab_panel_cat > article {
    padding: 16px 8px;
  }
}

/* タイトルにリンク入る場合 */
.area_head_tab {
  display: flex;
  margin: 0 0 12px;
}
.area_head_tab [class*="btnarea"] {
  margin-left: auto;
}


/* ! 契約書テンプレートについて ———————————————————————————————————————————————————————————— */
.area_post_template {
  background: #F7F9F9;
  padding: 20px;
  margin: 5px 0 0;
}
@media screen and (max-width: 480px){
  .area_post_template {
    padding: 16px 8px;
  }
}



/* ! タブ_カテゴリー_リンクの場合 ———————————————————————————————————————————————————————————— */
.list_tab_cat {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: 100%;
  margin: -2px;
}
.list_tab_cat > li{
  padding: 2px;
}
.button_tab a{
  color: #777;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .06em;
  text-align: center;
  display: block;
  padding: 8px 14px;
  border: 1px solid #eee;
  border-radius: 3px;
  background: transparent;
  transition: all 0.1s ease;
  position: relative;
}
@media screen and (min-width: 480px){
  .button_tab a:hover {
    color: #7f8eca;
    border-color: #7f8eca;
  }
}
.button_tab.current a{
  color: #000;
  border-color: #fff;
  background: #fff;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,.2);
}
@media screen and (max-width: 480px){
  .list_tab_cat a {
    padding: 5px 10px;
  }
}




/* ! カテゴリーリスト ———————————————————————————————————————————————————————————— */
.list_cat {
  display: flex;
  flex-wrap: wrap;
  margin: -2px -5px;
  position: relative;
  z-index: 1;
}
.list_cat > li {
  padding: 2px 5px;
  display: flex;
  flex-wrap: wrap;
}
.list_cat a,
.list_cat p {
  color: #7f8eca;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: 0;
  display: block;
}
@media screen and (min-width: 480px){
  .list_cat a:hover,
  .list_cat p:hover {
    text-decoration: underline;
  }
}
.list_cat a {
  pointer-events: all;
}

[class*="list_cnt"] .list_cat {
  margin: -2px 4px -2px -4px;
}

/* 個別 */
[class*="list_media"] .list_cat a, [class*="list_media"] .list_cat p { color: #3f7cc4; }
[class*="list_community"] .list_cat a, [class*="list_community"] .list_cat p { color: #f98623; }
[class*="list_cnt"] .list_cat a, [class*="list_cnt"] .list_cat p { color: #DD5176; }
[class*="list_fmt"] .list_cat a, [class*="list_fmt"] .list_cat p { color: #37BAA6; }

[class*="list_media"] .list_cat{ margin: -2px 4px -2px -4px;}
[class*="list_media"] .list_cat > li{ padding: 2px 4px;}



/* ! ページング ———————————————————————————————————————————————————————————— */
[class*="area_paging"] {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0;
}
[class*="area_paging"][class*="center"]{
  justify-content: center;
}

/* リスト */
.list_paging {
  display: flex;
  margin: 0 -4px;
}
.list_paging > li {
  padding: 0 3px;
}
.list_paging a {
  color: #7D8DCF;
  font: bold 15px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 2px;
  border: 1px solid #7D8DCF;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .list_paging a:hover {
    color: #fff;
    background: #7D8DCF;
  }
}
.list_paging .current a,
.list_paging .active a{
  color: #fff;
  background: #7D8DCF;
  border-color: #7D8DCF;
}

/* 前へ・次へ */
.list_paging .prev,
.list_paging .next{
  background: url(../img/shape/ico_left.svg) no-repeat center center;
  background-size: 10px 10px !important;
}
.list_paging .next{
  background: url(../img/shape/ico_right.svg) no-repeat center center;
}
@media screen and (min-width: 480px){
  .list_paging .next:hover{
    background: #7D8DCF url(../img/shape/ico_right_white.svg) no-repeat center center !important;
    background-size: 10px 10px !important;
  }
  .list_paging .prev:hover{
    background: #7D8DCF url(../img/shape/ico_left_white.svg) no-repeat center center !important;
    background-size: 10px 10px !important;
  }
}


/* disabled */
.list_paging .disabled a{
  border: none;
  pointer-events: none;
}
@media screen and (min-width: 480px){
  .list_paging .disabled.prev:hover,
  .list_paging .disabled.next:hover{
    background: transparent url(../img/shape/ico_left.svg) no-repeat center center !important;
    background-size: 10px 10px !important;
  }
  .list_paging .disabled.next:hover{
    background: transparent url(../img/shape/ico_right.svg) no-repeat center center !important;
    background-size: 10px 10px !important;
  }
  .list_paging .disabled.prev:hover a ,
  .list_paging .disabled.next:hover a{
    background: transparent;
  }
}


/* ! プログレスバー ———————————————————————————————————————————————————————————— */
.progressbar{
  margin: 10px 0 0;
  max-width: 360px;
  width: 100%;
}
.progressbar .info{
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
progress[value] {color:red;width: 100%;} /* IE10 */
progress::-webkit-progress-bar-value {background:red;width: 100%;}
progress::-webkit-progress-value {background:red;width: 100%;}
progress::-moz-progress-bar {background:red;width: 100%;}


/* ! スクロールエリア ———————————————————————————————————————————————————————————— */
[class*="area_scroll"] {
/* 	height: 280px; */
	overflow: auto;
}
[class*="area_scroll"]::-webkit-scrollbar {
  width: 8px;
}
[class*="area_scroll"]::-webkit-scrollbar-track {
  border-radius: 8px;
	background: #e6e6e6;
}
[class*="area_scroll"]::-webkit-scrollbar-thumb {
  border-radius: 8px;
	background: #B3C1C7;
}

/* 横 */
[class*="area_scroll"][class*="_hol"] {
	width: 100%;
	overflow: auto;
	padding-bottom: 6px;
}
[class*="area_scroll"]_hol::-webkit-scrollbar {
  height: 6px;
}
[class*="area_scroll"]_hol::-webkit-scrollbar-track {
  border-radius: 6px;
	background: #e6e6e6;
}
[class*="area_scroll"]_hol::-webkit-scrollbar-thumb {
  border-radius: 6px;
	background: #B3C1C7;
}

/* ! オンオフ ———————————————————————————————————————————————————————————— */
.off {
  display: none !important;
}
@media screen and (max-width: 1280px){
  .on_1280 {
    display: block !important;
  }
  .off_1280 {
    display: none !important;
  }
}
@media screen and (max-width: 1200px){
  .on_1200 {
    display: block !important;
  }
  .off_1200 {
    display: none !important;
  }
}
@media screen and (max-width: 1080px){
  .on_1080 {
    display: block !important;
  }
  .off_1080 {
    display: none !important;
  }
}
@media screen and (max-width: 1000px){
  .on_1000 {
    display: block !important;
  }
  .off_1000 {
    display: none !important;
  }
}
@media screen and (max-width: 767px){
  .on_767 {
    display: block !important;
  }
  .off_767 {
    display: none !important;
  }
}
@media screen and (max-width: 640px){
  .on_640 {
    display: block !important;
  }
  .off_640 {
    display: none !important;
  }
}
@media screen and (max-width: 600px){
  .on_600 {
    display: block !important;
  }
  .off_600 {
    display: none !important;
  }
}
@media screen and (max-width: 560px){
  .on_560 {
    display: block !important;
  }
  .off_560 {
    display: none !important;
  }
}
@media screen and (max-width: 480px){
  .on_480 {
    display: block !important;
  }
  .off_480 {
    display: none !important;
  }
}
@media screen and (max-width: 420px){
  .on_420 {
    display: block !important;
  }
  .off_420 {
    display: none !important;
  }
}
@media screen and (max-width: 360px){
  .on_360 {
    display: block !important;
  }
  .off_360 {
    display: none !important;
  }
}


/* ! リスト_アンケート ———————————————————————————————————————————————————————————— */
[class*="list_enquete_"] {
  display: flex;
  flex-wrap: wrap;
}
[class*="list_enquete_"] > li {
  width: 100%;
  border-top: 1px solid #eee;
}
[class*="list_enquete_"] > li:first-child{
  border: none;
}
[class*="list_enquete_"] article {
  position: relative;
  padding: 16px 0;
  display: flex;
}
[class*="list_enquete_"] article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.area_enquete_info{
  display: flex;
  align-items: flex-start;
  width: 100%;
}


/* home */
[class*="list_enquete_"][class*="default"] .number{
  text-align: left;
}
[class*="list_enquete_"][class*="default"] .number span{
  font: bold 20px/1em 'Roboto','noto sans japanese',sans-serif;
}

@media screen and (max-width: 1180px){
  .area_enquete_info{
/*     flex-wrap: wrap; */
  }
}
@media screen and (max-width: 480px){
  [class*="list_enquete_"] article {

  }
}

/* ステータス 回答受付中/終了 */
[class*="area_status_"][class*="enquete"]{
  background: #aaa;
  flex: 0 0 110px;
  margin: 0 16px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction:column;
  height: 70px;
}
[class*="area_status_"][class*="enquete"][class*="unanswered"]{ background: #565C89;}
[class*="area_status_"][class*="enquete"] .ttl{
  color: #fff !important;
  font: 600 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 6px;
}
[class*="area_status_"][class*="enquete"] .another_day{
  color: #fff;
  font: 300 11px/1em 'noto sans japanese' , sans-serif;
}
[class*="area_status_"][class*="enquete"] .another_day span{
  font: bold 22px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 4px;
}
@media screen and (max-width: 1180px){
  [class*="area_status_"][class*="enquete"]{
    margin: 0 16px 6px 0;
    padding: 10px;
  }
  [class*="area_status_"][class*="enquete"] .ttl{
    font-size: 13px;
  }
}
@media screen and (max-width: 480px){
  [class*="area_status_"][class*="enquete"]{
    margin: 0 10px 6px 0;
    padding: 0;
    flex: 0 0 90px;
    height: 56px;
  }
  [class*="area_status_"][class*="enquete"] .ttl{
    font-size: 12px;
    margin: 0 0 4px;
  }
  [class*="area_status_"][class*="enquete"] .another_day span{
    font-size: 18px;
  }
}

/* アンケートメイン情報 */
.area_info_enquete{
  display: flex;
  flex: 1 1 auto;
  min-width: 10px;
}
/*  */
.area_main_info_enquete{
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  flex-direction: column;
}
.head_list_enquete{
  margin: 0 0 8px;
  flex: 1 1 auto;
  min-height: 10px;
}
.body_list_enquete{
  margin: 0 0 8px;
}
.body_list_enquete .deadline{
  font: bold 13px/1em 'Roboto','noto sans japanese',sans-serif;
}
.body_list_enquete .deadline:before {
  content: attr(data-ttl)"";
  font: 300 12px/1em 'noto sans japanese',sans-serif;
}
.foot_list_enquete{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.foot_list_enquete .list{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.foot_list_enquete .list [class*=list_] {
  margin: 0;
  padding: 4px 6px;
}
.foot_list_enquete .area_poster{
  z-index: 1;
  padding: 4px 6px;
  margin: 0 0 0 auto;
}

/* 回答数・期限 */
.area_count_enquete{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  flex: 0 0 100px;
  border-left: 1px dotted #ddd;
  padding: 10px 0;
  margin: 0 0 0 10px;
}
.area_count_enquete .ttl{
  font: 300 12px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 4px;
}
.area_count_enquete .number span{
  font: bold 20px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 2px;
}
@media screen and (max-width: 560px){
  .area_count_enquete{
    flex: 0 0 80px;
  }
}
@media screen and (max-width: 480px){
  .area_count_enquete{
    flex: 0 0 64px;
    flex-direction: row;
    border: none;
    margin: 0;
    position: absolute;
    left: 0;
    top: 70px;
  }
}

/* テキスト*/
.head_list_enquete .ttl {
  font: 600 18px/1.4em 'noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  [class*="list_enquete_"] article:hover .ttl { color: #576086;}
  [class*="list_enquete_"][class*="360"] article:hover .ttl { color: #7857A7;}
}
@media screen and (max-width: 767px){
  .head_list_enquete .ttl {
    font-size: 16px;
  }
}

/* ユーザー */
[class*="list_enquete"] [class*="tpl_user"]{
  color: #8B93B2;
}
[class*="list_enquete"] [class*="tpl_user"] .time{
  color: #aaa;
  font: Italic 12px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 10px;
}
[class*="list_enquete"] .status_cnt{
  margin: 16px 0 0;
}

/* リスト */
.list_enquete .list {
  display: flex;
  align-items: center;
  margin: 16px 0;
}
.list_enquete .list .list_cat a,
.list_enquete .list .list_cat p {
  color: #576086;
}

/* ! リスト_アンケート min ———————————————————————————————————————————————————————————— */
/*
[class*="list_enquete_"] .number{
  font: 300 12px/1em 'noto sans japanese' , sans-serif;
  margin: 0;
  flex: 1 1 auto;
  min-width: 10px;
}
[class*="list_enquete_"] .number span{
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 0 0 6px;
}
*/

/* テキスト*/
.min .head_list_enquete .ttl {
  font: 600 13px/1.4em 'noto sans japanese',sans-serif;
}

/* ! リスト_アンケート アサイド ———————————————————————————————————————————————————————————— */
aside [class*="list_enquete"] article {
  position: relative;
  padding: 16px 0;
}
aside [class*="list_enquete"] .deadline{
  font: 300 12px/1em 'noto sans japanese' , sans-serif;
  margin: 6px 0;
}
aside [class*="list_enquete"] .deadline span{
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
aside [class*="list_enquete"] .number{
  font: 300 12px/1em 'noto sans japanese' , sans-serif;
  text-align: center;
  width: 100%;
}
aside [class*="list_enquete"] [class*="status_"]{
  color: #fff !important;
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
  background: #aaa;
  padding: 6px;
  margin: 0 0 6px;
  display: flex;
  justify-content: center;
  align-items: baseline;
}
aside [class*="list_enquete"] [class*="status_"][class*="unanswered"]{
  background: #565c89;
}
aside [class*="list_enquete"] [class*="status_"] .ttl{
  color: #fff;
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
}
aside [class*="list_enquete"] [class*="status_"] .another_day{
  font: 400 11px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 0 6px;
}
aside [class*="list_enquete"] [class*="status_"] .another_day span{
  font: 600 18px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 3px;
}

/* リスト */
.list_count_enquete_history{
  width: 100%;
}
.list_count_enquete_history p{
  display: flex;
  align-items: baseline;
}
.list_count_enquete_history p{
  font: 300 12px/1em 'noto sans japanese' , sans-serif;
}
.list_count_enquete_history p span{
  font: 400 14px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 3px 0 0;
}
@media screen and (max-width: 1000px){
  .list_count_enquete_history{
    display: flex;
    margin: -10px;
  }
  .list_count_enquete_history > li{
    padding: 10px;
  }
  .list_count_enquete_history p{
    flex-direction: row;
    padding: 4px 0;
  }
  .list_count_enquete_history p span{
    margin: 0 0 0 3px;
  }
}

/* 作成履歴 */
aside [class*="list_enquete"][class*="history"] article{
  flex-direction:column;
}
[class*="head"][class*="list_enquete"][class*="history"]{
  flex-direction:column;
}
[class*="head"][class*="list_enquete"][class*="history"] .ttl{
  font: 500 14px/1.4em 'noto sans japanese' , sans-serif;
}
[class*="body"][class*="list_enquete"][class*="history"]{
  align-items: center;
}

/* 下書き */
aside [class*="list_enquete"] [class*="button_"]{
  position: relative;
  z-index: 2;
}
aside [class*="list_enquete"][class*="draft"] article{
  flex-direction:column;
}
aside [class*="list_enquete"][class*="draft"] [class*="button_"]{
  padding: 0 0 0 10px;
}

/* ! ステップ ———————————————————————————————————————————————————————————— */
[class*="area_step_"] {
  position: relative;
}

/* リスト */
[class*="list_step_"] {
  display: flex;
  flex-wrap: wrap;
  margin: -4px -8px;
  counter-reset: number 0;
}
[class*="list_step_"]  > li {
  padding: 4px 8px;
  counter-increment: number 1;
  display: inline-block;
  flex: 0 0 auto;
}
[class*="list_step_"]  article {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
[class*="list_step_"] article span{
  margin: 0 4px 0 0;
}
[class*="list_step_"] article span:before{
  content: "";
  color: #fff;
  font: 900 14px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: url(../img/shape/ico_check_green.svg);
  background-size: 12px 12px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 100px;
}
[class*="list_step_"][class*="enquete"] article span:before { background: url(../img/shape/ico_check_navy.svg);}
[class*="list_step_"][class*="360"] article span:before { background: url(../img/shape/ico_check_purple.svg);}
[class*="list_step_"][class*="bdl_q"] article span:before { background: url(../img/shape/ico_check_navy.svg);}
[class*="list_step_"][class*="content"] article span:before { background: url(../img/shape/ico_check_blue.svg);}
[class*="list_step_"][class*="book"] article span:before { background: url(../img/shape/ico_check_pink.svg);}


/* 以降のもの */
[class*="list_step_"] .step_current ~ li article span:before{
  content: counter(number) "";
  background: #D3F0DA;
}

[class*="list_step_"][class*="enquete"] .step_current ~ li article span:before { background: #C7CBD9;}
[class*="list_step_"][class*="360"] .step_current ~ li article span:before { background: #CFC5DE;}
[class*="list_step_"][class*="bdl_q"] .step_current ~ li article span:before { background: #C1D6E8;}
[class*="list_step_"][class*="content"] .step_current ~ li article span:before { background: #C1D6E8;}
[class*="list_step_"][class*="book"] .step_current ~ li article span:before { background: #f9dde5;}
[class*="list_step_"][class*="question"] .step_current ~ li article span:before { background: #ffe1c7;}

/* テキスト */
[class*="list_step_"] .ttl {
  color: #aaa;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
}

/* カレント */
[class*="list_step_"] .step_current article span:before {
  content: counter(number) "";
  color: #fff;
  background: #48BC63;
}

[class*="list_step_"][class*="enquete"] .step_current article span:before { background: #576086;}
[class*="list_step_"][class*="360"] .step_current article span:before { background: #7857A7;}
[class*="list_step_"][class*="bdl_q"] .step_current article span:before { background: #1E3D58;}
[class*="list_step_"][class*="content"] .step_current article span:before { background: #3f7cc4;}
[class*="list_step_"][class*="book"] .step_current article span:before { background: #DD5176;}
[class*="list_step_"][class*="question"] .step_current article span:before { background: #f98623;}

[class*="list_step_"] .step_current .ttl {
  color: #000;
  font-weight: 600;
}


/* ————————————————————————————————————————————————————————————
 ! ■フォーム 投稿ページ系
———————————————————————————————————————————————————————————— */
[class*="area_wrap_"][class*="post"] {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
}

/* ! コンテンツ ———————————————————————————————————————————————————————————— */
[class*="area_cnt_"][class*="post"] {
  margin: 60px 0 0;
}
@media screen and (max-width: 560px){
  [class*="area_cnt_"][class*="post"] {
    margin: 40px 0 0;
  }
  [class*="area_cnt_"][class*="post"][class*="enquete_answer"]{
    margin: 0;
  }
}

/* ! ヘッド_ —————————————————————————————— */
[class*="head_cnt_"][class*="post"] {
  padding: 0 0 30px;
  margin: 0 0 30px;
  border-bottom: 1px solid #EEE;
}
[class*="head_cnt_"][class*="post"] .ttl {
  font: 600 24px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
}
[class*="head_cnt_"][class*="post"] .description {
  font: 300 13px/1.3em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 767px){
  [class*="head_cnt_"][class*="post"]  .ttl {
    font-size: 22px;
  }
}
@media screen and (max-width: 480px){
  [class*="head_cnt_"][class*="post"]  {
    padding: 0 0 20px;
    margin: 0 0 20px;
  }
  [class*="head_cnt_"][class*="post"]  .ttl {
    font-size: 18px;
  }
}

/* ! フォームヘッド —————————————————————————————— */
[class*="head_form_"][class*="post"] {
  flex: 0 0 180px;
  padding: 10px 0px;
}
[class*="head_form_"][class*="post"] .ttl {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  position: relative;
}
[class*="head_form_"][class*="post"] .ttl .small {
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .08em;
  display: inline-block;
  padding: 3px 0;
}

@media screen and (max-width: 480px){
  .head_form_360{
    padding: 6px 0;
  }
}

/* ! フォームボディ —————————————— */
[class*="body_form_"][class*="post"] {
  flex: 1 1 auto;
  min-width: 10px;
}
[class*="body_form_"][class*="post"] > p {
  font: 400 16px/1em 'noto sans japanese',sans-serif;
}
[class*="body_form_"][class*="post"] .answer{
  font: 500 14px/1.5em 'noto sans japanese' , sans-serif;
}

@media screen and (max-width: 480px){
  [class*="body_form_"][class*="post"] .answer{
    font-size: 13px;
  }
}

/* リスト */
[class*="list_form"][class*="post"]  {
  margin: 0 0 30px;
}
[class*="list_form"][class*="post"] > li {
  display: flex;
  padding: 0 0 12px;
}
[class*="list_form"][class*="post"] > li.column {
  display: block;
}
[class*="list_form"][class*="post"] [class*="wrap_input"]:after {
  content: attr(data-unit)"";
  color: #000;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-30%);
}

@media screen and (max-width: 767px){
  [class*="list_form"][class*="post"] > li{
    display: block;
    padding: 0 0 30px;
  }
}
@media screen and (max-width: 480px){
  [class*="list_form"][class*="post"] > li{
    padding: 0 0 20px;
  }
}

/* 必須 */
.required [class*="head_form_"] .ttl:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #ED6086 url(../img/shape/ico_form_check_white.svg) no-repeat;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 100px;
  position: absolute;
  top: .5em;
  left: 0;
  z-index: 1;
  transform: translateY(-50%);
}

/* 必須項目がないフォーム */
[class*="norequired"] [class*="head_form_"] .ttl {
  padding: 0;
}

/* 注意書き */
.attention {
  color: #444;
  font: 300 12px/1.2em 'noto sans japanese',sans-serif;
  display:inline-block;
  padding: 0 0 0 18px;
  margin: 4px 0 0;
  position: relative;
}
.attention strong{
  color:color(alert);
  margin: 0;
  font: 700 14px/1.2em 'noto sans japanese',sans-serif;
}
.attention:before {
  content: "※";
  position: absolute;
  top: .55em;
  left: 0;
  transform: translateY(-50%);
}

/* ! ボタンエリア —————— */
[class*="area_cnt_"][class*="post"] .btnarea_step {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  border-top: 1px solid #eee;
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px 0 0;
}
[class*="area_cnt_"][class*="post"] .btnarea_step [class*="btn_"] {
  padding: 0 44px;
  max-width: 280px;
}
[class*="area_cnt_"][class*="post"] .btnarea_step [class*="btn_"][class*="draft"]{
  color: #8a8a8a;
  background: #eee;
  border-color: #eee;
}
@media screen and (min-width: 480px){
  [class*="area_cnt_"][class*="post"] .btnarea_step [class*="btn_"][class*="draft"]:hover{
    border-color: #d0d0d0;
  }
}
[class*="area_cnt_"][class*="post"] .btnarea_step [class*="btn_"] + [class*="btn_"] {
  margin-left: 8px;
}

@media screen and (max-width: 480px){
  [class*="area_cnt_"][class*="post"] .btnarea_step{
    flex-direction:column-reverse;
  }
  [class*="area_cnt_"][class*="post"] .btnarea_step [class*="btn_"] {
    width: 100%;
    max-width: none;
  }
  [class*="area_cnt_"][class*="post"] .btnarea_step [class*="btn_"] + [class*="btn_"] {
    margin: 0 0 6px;
  }
}


/* ————————————————————————————————————————————————————————————
 ! ■投稿完了ページ
———————————————————————————————————————————————————————————— */
[class*="body_cnt_"][class*="post"][class*="complete"]{
  display: flex;
  flex-direction:column;
  align-items: center;
  max-width: 700px;
  margin: 60px auto;
}
[class*="body_cnt_"][class*="post"][class*="complete"] h1{
  font: 600 32px/1.3em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 40px;
}
[class*="body_cnt_"][class*="post"][class*="complete"] .description{
  font: 500 16px/1.5em 'noto sans japanese' , sans-serif;
  width: 100%;
  text-align: center;
}
[class*="body_cnt_"][class*="post"][class*="complete"] [class*="btnarea"]{
  margin: 50px 0 0;
}

@media screen and (max-width: 767px){
  [class*="body_cnt_"][class*="post"][class*="complete"] h1{
    font-size: 28px;
  }
  [class*="body_cnt_"][class*="post"][class*="complete"] .description{
    font-size: 14px;
  }
}
@media screen and (max-width: 480px){
  [class*="body_cnt_"][class*="post"][class*="complete"]{
    margin: 40px auto;
  }
  [class*="body_cnt_"][class*="post"][class*="complete"] h1{
    font-size: 22px;
    margin: 0 0 30px;
  }
  [class*="body_cnt_"][class*="post"][class*="complete"] .description{
    font-size: 13px;
  }
}