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


/* ! ゲスト ————————————————————————————————————————————————————————————

トップ_ゲスト

———————————————————————————————————————————————————————————— */

/* ! ゲスト ———————————————————————————————————————————————————————————— */
.area_guest {
  padding: 30px 30px 0;
  width: 100%;
}
.area_guest .container {
  padding: 0;
}
@media screen and (max-width: 960px){
  .area_guest {
    padding: 16px 30px 0;
  }
}
@media screen and (max-width: 480px){
  .area_guest {
    padding: 16px 16px 0
  }
}
@media screen and (max-width: 359px){
  .area_guest {
    padding: 16px 10px 0
  }
}


/* ! ヘッド_ゲスト —————————————————————————————— */
.head_guest {
  display: flex;
  align-items: center;
}
@media screen and (max-width: 840px){
  .head_guest {
    flex-direction: column-reverse;
    align-items: flex-end;
  }
}
@media screen and (max-width: 560px){
  .head_guest {
    padding: 0;
  }
}


/* リスト */
.list_nav_guest {
  /* display: none; */
  flex-wrap: wrap;
  align-items: center;

}
.area_guest .list_nav_guest{
  display: flex;
}
.list_nav_guest > li + li {
  margin-left: 20px;
}
.list_nav_guest a {
  color: #172858;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
}
.list_nav_guest a:hover {
  text-decoration: underline;
}
@media screen and (max-width: 840px){
  .list_nav_guest {
    margin-top: 10px;
  }
}
@media screen and (max-width: 480px){
  .list_nav_guest > li + li {
    margin-left: 15px;
  }
  .list_nav_guest a {
    font-size: 12px;
  }
}


/* aboutページなど */
.header_page .list_nav_guest {
  display: flex;
  margin: 0 -20px 0 auto;
}
@media screen and (max-width: 767px){
  .header_page .list_nav_guest {
    display: none;
  }
}



/* ! nav_guest アサイド —————————————————————————————— */
@media screen and (max-width: 767px){
  .area_nav_guest_aside{
    padding: 10px 0;
  }
  .area_nav_guest_aside .list_nav_guest{
    display: block;
    margin: 0;
  }
  .area_nav_guest_aside .list_nav_guest > li{
    margin: 0;
  }
  .area_nav_guest_aside .list_nav_guest a{
    color: #43a55b;
    font: 400 12px/1em 'noto sans japanese' , sans-serif;
    display: block;
    padding: 10px;
    text-align: center;
  }
}
@media screen and (max-width: 480px){
  .area_nav_guest_aside .list_nav_guest a{
    padding: 8px;
  }
}


/* ボタンエリア */
.head_guest [class*="btnarea"] {
  margin: -4px;
  align-items: center;
}
.head_guest [class*="btnarea"] [class*="btn_"] {
  margin: 4px;
  height: 32px;
  padding: 0 28px;
  margin-left: auto;
}
@media screen and (max-width: 1080px){
  .head_guest [class*="btnarea"] [class*="btn_"] {
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px){
  .head_guest [class*="btnarea"] {
    margin-left: auto;
  }
}
@media screen and (max-width: 600px){
  .head_guest [class*="btnarea"] [class*="btn_"] {
    padding: 0 10px;
  }
}
@media screen and (max-width: 560px){
  .head_guest {
    padding: 0;
  }
}
@media screen and (max-width: 480px){
  .head_guest [class*="btn_"] {
  }
}
@media screen and (max-width: 380px){
  .head_guest [class*="btnarea"] [class*="btn_"] {
    font-size: 11px;
    padding: 0 6px;
  }
}

.head_guest [class*="btnarea"] .button_menu_sp {
  margin: 0 0 0 4px;
}
@media screen and (max-width: 359px){
  .head_guest [class*="btnarea"] .button_menu_sp {
    margin: 0;
  }
}


/* ! トップのみボタン表示 —————————————————————————————— */
.area_guest .head_guest [class*="btnarea"] {
  display: flex;
  margin-left: auto;
}

/* それ以外 */
section:not(.area_guest) .head_guest {
  margin: 0 0 30px;
}
section:not(.area_guest) .list_nav_guest a {
  color: #444;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 767px){
  section:not(.area_guest) .head_guest {
    display: none;
  }
}



/* ! ボディ_ゲスト —————————————————————————————— */
.body_guest{
  margin: 30px 0 0;
}
@media screen and (max-width: 960px){
  .body_guest{
    margin: 16px 0 0;
  }
}
@media screen and (max-width: 480px){
  .body_guest{
    margin: 16px 0 0;
  }
}

/* ! ビューゲスト ———————————————————————————————————————————————————————————— */
.area_view_guest {
  padding: 40px;
  background: url(../img/bg_view_guest.png) ;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  border-radius: 10px;
  overflow: hidden;
}
@media screen and (max-width: 1280px){
  .area_view_guest {
    padding: 20px;
  }
}
@media screen and (max-width: 1079px){
  .area_view_guest {
    padding: 40px 20px 20px;
  }
}
@media screen and (max-width: 840px){
  .area_view_guest {
    background-position: bottom center !important;
  }
}
@media screen and (max-width: 560px){
  .area_view_guest {
    padding: 32px 16px;
  }
}





/* ! ボディ —————————————————————————————— */
.body_view_guest {
  display: flex;
  align-items: center;
}
.body_view_guest > .text {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.body_view_guest .copy {
  /* flex: 1 1 0; */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.body_view_guest .copy img {
  height: 120px;
}
.body_view_guest > .text .description {
  font: 500 15px/1.5em 'noto sans japanese',sans-serif;
  margin: 12px 0 0;
  text-shadow:0px 0px 11px #ffffff,0px 0px 11px #ffffff,0px 0px 11px #FFFFFF;
}
@media screen and (max-width: 1079px){
  .body_view_guest {
    flex-direction: column;
  }
  .body_view_guest .copy {
    flex: 0 0 auto;
  }
}
@media screen and (max-width: 600px){
  .body_view_guest {
    align-items: stretch;
  }
}
@media screen and (max-width: 480px){
  .body_view_guest .copy img {
    height: 80px;
  }
}


/* ! 検索 ============================== */
.area_search_guest{
  background: rgba(255,255,255,.4);
  padding: 16px;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 5px;
  margin: 24px 0 0;
}
@media screen and (max-width: 560px){
  .area_search_guest{
    margin: 16px 0 0;
    padding: 16px 10px 10px;
  }
}
@media screen and (max-width: 480px){
  .area_search_guest{
    margin: 16px -12px 0;
    width: auto;;
  }
}
@media screen and (max-width: 370px){
  .area_search_guest{
    padding: 10px 6px 6px;
  }
}

/* ! 注目タグリスト */
.head_search_guest {
  display: flex;
  align-items: center;
  margin: 0 auto 16px;
}
.head_search_guest .head {
  flex: 0 0 80px;
}
.head_search_guest .ttl {
  color: #000;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
}
.head_search_guest .data {
  flex: 1 1 auto;
  min-width: 10px;
}
.head_search_guest .list_tag a,
.head_search_guest .list_tag p{
  color: #fff;
  background: #839eac;
}
.head_search_guest .list_tag a:before,
.head_search_guest .list_tag p:before{
  border-color: transparent transparent transparent #839eac;
}
@media screen and (max-width: 767px){
  .head_search_guest {
    flex-wrap: wrap;
  }
  .head_search_guest .head {
    margin: 0 0 4px;
  }
}

/*  */
.body_search_guest > .ttl{
  display: flex;
  justify-content: center;
  margin: 0 0 6px;
}
.body_search_guest > .ttl span{
  color: #000;
  font: 500 14px/1.3em 'noto sans japanese',sans-serif;
  text-align: center;
  position: relative;
}
.body_search_guest > .ttl span:after, .body_search_guest > .ttl span:before {
  content: "";
  background: url(../img/shape/ico_diagonal.svg) no-repeat center center!important;
  background-size: contain!important;
  width: 14px;
  height: 14px;
  position: absolute;
  left: -20px;
  bottom: 0;
}
.body_search_guest > .ttl span:after {
  left: auto;
  right: -20px;
  transform: rotate(45deg);
}
@media screen and (max-width: 560px){
  .body_search_guest > .ttl span{
    font-size: 12px;
  }
  .body_search_guest > .ttl span:after, .body_search_guest > .ttl span:before {
    width: 12px;
    height: 12px;
    left: -15px;
  }
  .body_search_guest > .ttl span:after {
    left: auto;
    right: -15px;
  }
}

/* input */
.body_view_guest .wrap_input {
  position: relative;
}
.body_view_guest input[type=text] {
  font: 300 18px/1em 'noto sans japanese',sans-serif;
  background: #fff;
  border-color: #fff;
  height: 60px;
  padding-right: 50px;
}
.body_view_guest input[type=text]::-webkit-input-placeholder { color: #A4AABE; padding-top: 0.2em;}
.body_view_guest input[type=text]:-ms-input-placeholder { color: #A4AABE;}
.body_view_guest input[type=text]::-moz-placeholder { color: #A4AABE;}
.body_view_guest input:not([type="checkbox"]).button_search {
  display: block;
  width: 24px;
  height: 24px;
  border: none;
  background: url(../img/shape/ico_search_green.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
  cursor: pointer;
}
@media screen and (max-width: 480px){
  .body_view_guest input[type=text] {
    font-size: 16px;
    height: 48px;
    padding: 0 36px 0 8px;
  }
  .body_view_guest input:not([type=checkbox]).button_search {
    right: 12px;
  }
  .body_view_guest .button_search {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 370px){
  .body_view_guest input[type=text]{
    padding: 0 10px;
    padding-right: 32px;
  }
  .body_view_guest input:not([type="checkbox"]).button_search {
    width: 20px;
    height: 20px;
    right: 10px;
  }
}
@media screen and (max-width: 320px){
  .body_view_guest input[type=text]{
    font-size: 14px;
  }
}

/* 専門家一覧 */
.body_view_guest .list_user_card {
  margin-top: 36px;
}
.body_view_guest .list_user_card > li {
  flex: auto;
}
.body_view_guest .list_user_card article {
  padding: 8px;
  background: rgba(0,0,0,.8);
}
.body_view_guest .list_user_card .ttl {
  margin: 0;
}
.body_view_guest .list_user_card .cat {
  color: #51C96D;
}
.body_view_guest .list_user_card .img {
  margin-top: -56px;
}


/* 株価算定・資本制作など */
.body_view_guest > .calc {
  flex: 0 0 400px;
  margin: 0 0 0 30px;
}
@media screen and (max-width: 1200px){
  .body_view_guest > .calc {
    flex: 0 0 360px;
    margin: 0 0 0 20px;
  }
}
@media screen and (max-width: 1079px){
  .body_view_guest > .calc {
    margin: 20px 0 0;
    flex: none;
  }
}
@media screen and (max-width: 480px){
  .body_view_guest > .calc {
    margin: 10px -10px 0;
  }
}


.area_calc_guest {
  background: #fff;
  border-radius: 5px;
  padding: 5px;
}
.area_calc_guest .template {
  color: #fff;
  background: #37BAA7 url(../img/bg_template.svg) no-repeat center center;
  background-size: cover !important;
  border-radius: 5px;
  padding: 12px;
}
.area_calc_guest .template .text {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area_calc_guest .template .ttl {
  font: 900 36px/1em 'noto sans japanese',sans-serif;
  margin: 20px 0 0 -30px;
  padding: 0 0 0 70px;
  position: relative;
}
.area_calc_guest .template .ttl:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  display: block;
  background: url(../img/ico_template_white.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.area_calc_guest .template .copy {
  font: 700 24px/1em 'noto sans japanese',sans-serif;
  margin: 20px 0 0;
  position: relative;
  z-index: 1;
}
.area_calc_guest .template .copy:before{
  content: "";
  width: 100%;
  height: 10px;
  background: #FFC400;
  position: absolute;
  bottom: -5px;
  left: 0;
  z-index: -1;
}
.area_calc_guest .template .description {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
  margin: 20px 0 0;
}
.area_calc_guest .template .btnarea {
  margin: 12px 0 0;
}
.area_calc_guest .template [class*="btn_"] {
  color: #37BAA7;
  font: 700 20px/1em 'noto sans japanese',sans-serif;
  height: 60px;
  background: #fff;
  border-color: #fff;
  display: flex;
  align-items: center;
  padding: 0 20px 0 50px;
  position: relative;
}
.area_calc_guest .template [class*="btn_"]:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/ico_search_template.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.area_calc_guest .template [class*="btn_"]:hover {
  color: #fff;
  background: #37BAA7;
}
.area_calc_guest .template [class*="btn_"]:hover:before {
  background: url(../img/ico_search_template_white.svg) no-repeat center center;
}
@media screen and (max-width: 1200px){
  .area_calc_guest .template .description {
    font-size: 15px;
  }
}
@media screen and (max-width: 480px){
  .area_calc_guest .template .ttl {
    font-size: 32px;
  }
  .area_calc_guest .template .description {
    font-size: 13px;
  }
  .area_calc_guest .template [class*=btn_] {
    font-size: 16px;
  }
}




/* リスト */
.list_calc {
  display: flex;
  margin: 2px -3px -3px;
}
.list_calc > li {
  padding: 3px;
  width: 50%;
  display: flex;
}
.list_calc article {
  color: #fff;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-radius: 5px;
  padding: 10px;
  position: relative;
}
.list_calc .text {
  padding: 8px 0;
  margin: 0 0 auto;
}
.list_calc .ttl {
  font: 600 24px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  margin: 0 0 12px;
}
.list_calc .free {
  font: 600 18px/1em 'noto sans japanese',sans-serif;
  margin: 0 2px 0 0;
}
.list_calc .description {
  font: 300 13px/1.3em 'noto sans japanese',sans-serif;
  letter-spacing: 0;
}
.list_calc .description b {
  font-weight: 900;
}
.list_calc [class*="btnarea"] {
  margin: 8px 0 0;
}
.list_calc [class*="btn_"] {
  font: 600 16px/1em 'noto sans japanese',sans-serif;
  height: 36px;
  padding: 0 10px;
  width: 100%;
  background: #fff;
  border-color: #fff;
}
@media screen and (min-width: 480px){
  .list_calc [class*="btn_"]:hover{
    text-decoration: underline;
  }
}
@media screen and (max-width: 1200px){
  .list_calc .ttl {
    font-size: 22px;
  }
  .list_calc .description {
    font-size: 14px;
  }
}
@media screen and (max-width: 1079px){
  .list_calc {
    display: flex;
  }
}

/* 個別 */
.calc_howmuch > article { background: #48BC63;}
.calc_capital_policy > article { background: #3FB0C4;}
.calc_howmuch [class*="btn_"] {
  color: #48BC63;
  border-color: #fff;
}
.calc_howmuch [class*="btn_"]:hover{
  color: #fff;
  text-decoration: none;
  background: #48BC63;
}
.calc_capital_policy [class*="btn_"] {
  color: #3FB0C4;
  text-decoration: none;
}
.calc_capital_policy [class*="btn_"]:hover {
  color: #fff;
  background: #3FB0C4;
  text-decoration: none;
}


/* ! フット_ビューゲスト —————————————————————————————— */
.foot_view_guest {
  margin: 30px 0 0;
}
@media screen and (max-width: 560px){
  .foot_view_guest {
    margin: 20px 0 0;
  }
}


/* 専門家リスト */
.list_professional {
  padding: 10px 0 0;
}
.list_user_card.list_professional > li {
  display: flex;
  width: auto;
  max-width: none;
  flex: 1 1 0%;
}
.list_user_card.list_professional article {
  width: 100%;
  padding: 12px 4px;
  background: rgba(255,255,255,.85);
}
.list_user_card.list_professional .img {
  margin: -50px 0 0;
}
.list_user_card.list_professional p.cat{
  font: 500 10px/1.3em 'noto sans japanese',sans-serif;
  color: #000;
}
@media screen and (max-width: 1200px){
  .list_user_card.list_professional {
    overflow: auto;
    flex-wrap: nowrap;
  }
  .list_user_card.list_professional > li {
    flex: 0 0 25%;
  }
}
@media screen and (max-width: 560px){
  .list_user_card.list_professional > li {
    flex: 0 0 120px;
  }
  .list_user_card.list_professional [class*="thumb"][class*="_user"][class*="_medium"] {
    width: 50px;
  }
}



/* ! ボディ_ゲスト パターン2 —————————————————————————————— */
.body_guest_02{
  margin: 30px 0 0;
}
@media screen and (max-width: 480px){
  .body_guest_02{
    margin: 16px 0 0;
  }
}

/* ! ビューゲスト ———————————————————————————————————————————————————————————— */
.area_view_guest_02 {
  padding: 70px 40px;
  background: url(../img/bg_view_guest_02.png) ;
  background-size: cover !important;
  background-position: top center !important;
  background-repeat: no-repeat !important;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 0;
}
@media screen and (max-width: 1200px){
  .area_view_guest_02 {
    padding: 60px 30px;
  }
}
@media screen and (max-width: 840px){
  .area_view_guest_02 {
    background-position: bottom center !important;
  }
}
@media screen and (max-width: 560px){
  .area_view_guest_02 {
    padding: 32px 16px;
  }
}

/* ! ボディ —————————————————————————————— */
.body_view_guest_02 {
}
.body_view_guest_02 > .text {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
}
.body_view_guest_02 .ttl{
  color: #00B64B;
  font: 800 52px/1em 'noto sans japanese' , sans-serif;
  text-align: center;
}
.body_view_guest_02 .ttl span{
  font: 500 18px/1em 'noto sans japanese' , sans-serif;
  display: block;
  margin: 20px 0 0;
}
.body_view_guest_02 .description {
  color: #000;
  font: 600 20px/1.5em 'noto sans japanese',sans-serif;
  text-align: center;
  margin: 30px 0 0;
}

@media screen and (max-width: 640px){
  .body_view_guest_02 .ttl{
    font-size: 42px;
  }
  .body_view_guest_02 .ttl span{
    font-size: 16px;
  }
  .body_view_guest_02 .description {
    font-size: 18px;
    margin: 20px 0 0;
  }
}
@media screen and (max-width: 480px){
  .body_view_guest_02 .ttl{
    font-size: 32px;
  }
  .body_view_guest_02 .ttl span{
    font-size: 15px;
    margin: 16px 0 0;
  }
  .body_view_guest_02 .description {
    font-size: 14px;
    margin: 16px 0 0;
  }
}

/* フォーム */
.body_view_guest_02 .form_view_guest_02{
  width: 100%;
}
.body_view_guest_02 [class*="wrap_input_"] {
  margin: 24px auto 0;
  position: relative;
}

/* 質問ボタンデザイン */
.button_question_guest {
  color: #aaa;
  font: 300 18px/1em 'noto sans japanese',sans-serif;
  background: #fff;
  border-color: #fff;
  height: 60px;
  padding: 0 12px 0 60px;
  box-shadow: 0px 2px 10px 0px rgba(0,182,75,.2);
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 8px;
  max-width: 600px;
  width: 100%;
  margin: 40px auto 0;
}
.button_question_guest:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  border: none;
  background: url(../img/shape/ico_search_green.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}

/*
.body_view_guest_02 input[type=text] {
  font: 300 18px/1em 'noto sans japanese',sans-serif;
  background: #fff;
  border-color: #fff;
  height: 60px;
  padding: 0 12px 0 60px;
  box-shadow: 0px 2px 10px 0px rgba(0,182,75,.2);
}
.body_view_guest_02 input[type=text]::-webkit-input-placeholder { color: #6D79A0;}
.body_view_guest_02 input[type=text]:-ms-input-placeholder { color: #6D79A0;}
.body_view_guest_02 input[type=text]::-moz-placeholder { color: #6D79A0;}
.body_view_guest_02 .button_search {
  display: block;
  width: 24px;
  height: 24px;
  border: none;
  background: url(../img/shape/ico_search_green.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
*/
@media screen and (max-width: 480px){
  .body_view_guest_02 input[type=text] {
    font-size: 16px;
    height: 48px;
  }
  .body_view_guest_02 .button_search {
    width: 20px;
    height: 20px;
  }
}

/* 専門家一覧 */
.body_view_guest_02 .list_user_card {
  margin-top: 36px;
}
.body_view_guest_02 .list_user_card > li {
  flex: auto;
}
.body_view_guest_02 .list_user_card article {
  padding: 8px;
  background: rgba(0,0,0,.8);
}
.body_view_guest_02 .list_user_card .ttl {
  margin: 0;
}
.body_view_guest_02 .list_user_card .cat {
  color: #51C96D;
}
.body_view_guest_02 .list_user_card .img {
  margin-top: -56px;
}


/* ! フット_ビューゲスト —————————————————————————————— */
.foot_view_guest_02 {
  margin: 30px 0 0;
}
@media screen and (max-width: 560px){
  .foot_view_guest_02 {
    margin: 20px 0 0;
  }
}

/* 専門家リスト */
.foot_view_guest_02 .list_user_card.list_professional p.cat{
  color: #00B64B;
}


/* ! サーチゲスト ———————————————————————————————————————————————————————————— */
.area_search_guest_02{
  margin: 30px 0 0;
}

/* ! ヘッド —————————————————————————————— */
.head_search_guest_02{
  display: flex;
  flex-direction:column;
  align-items: center;
  margin: 0 0 24px;
}
.head_search_guest_02 .ttl{
  color: #000;
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  position: relative;
}
.head_search_guest_02 .ttl:before,.head_search_guest_02 .ttl:after{
  content: "";
  background: url(../img/shape/ico_diagonal.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 20px;
  height: 20px;
  position: absolute;
  left: -24px;
  bottom: 0;
}
.head_search_guest_02 .ttl:after{
  left: auto;
  right: -24px;
  transform: rotate(45deg);
}
@media screen and (max-width: 640px){
  .head_search_guest_02 .ttl{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  .head_search_guest_02{
    margin: 0 0 16px;
  }
  .head_search_guest_02 .ttl{
    font-size: 16px;
  }
  .head_search_guest_02 .ttl:before,.head_search_guest_02 .ttl:after{
    width: 16px;
    height: 16px;
  }
}

/* ! ボディ —————————————————————————————— */
/* 検索エリア */
.body_search_guest_02 .search{
  background: #F4F4F4;
  padding: 20px 40px;
  border-radius: 10px;
  margin: 0 0 16px;
}
@media screen and (max-width: 640px){
  .body_search_guest_02 .search{
    padding: 16px;
    margin: 0 0 10px;
  }
}
@media screen and (max-width: 480px){
  .body_search_guest_02 .search{
    padding: 10px;
  }
}

/* ! フット リスト —————————————————————————————— */
.list_main_service {
  display: flex;
  margin: -5px;
}
.list_main_service > li{
  width: 50%;
  padding: 5px;
}
.list_main_service article {
  color: #fff;
  border-radius: 10px;
  padding: 16px;
  position: relative;
}

@media screen and (max-width: 640px){
  .list_main_service {
    margin: -2.5px;
  }
  .list_main_service > li{
    padding: 2.5px;
  }
}

/* ヘッド */
.head_main_service .ttl {
  font: 600 24px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 16px;
}
.head_main_service .free {
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  height: 20px;
  flex: 0 0 100px;
  border: 1px solid #fff;
  border-radius: 100px;
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 640px){
  .head_main_service .ttl {
    font-size: 20px;
    margin: 0 0 6px;
    justify-content: center;
  }
  .head_main_service .free {
    flex: 0 0 100%;
    margin: 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .head_main_service .ttl{
    font-size: 18px;
    justify-content: center;
  }
}

/* ボディ */
.body_main_service {
  display: flex;
}
.body_main_service .description {
  font: 500 15px/1.5em 'noto sans japanese',sans-serif;
  flex: 1 1 auto;
  min-width: 10px;
}
.body_main_service [class*="btnarea"] {
  flex: 0 0 50%;
  margin: 0 0 0 4px;
}
.body_main_service [class*="btn_"] {
  height: 36px;
  width: 100%;
  background: #fff;
  border-color: #fff;
}
@media screen and (max-width: 1000px){
  .body_main_service{
    flex-direction:column;
  }
  .body_main_service [class*="btnarea"] {
    margin: 6px 0 0;
  }
}
@media screen and (max-width: 640px){
  .body_main_service .description {
    font-size: 13px;
    text-align: center;
  }
}
@media screen and (max-width: 480px){
  .body_main_service .description{
    text-align: center;
  }
  .body_main_service [class*="btn_"]{
    padding: 0;
  }
}

/* 個別 */
.main_service_howmuch > article { background: #48BC63;}
.main_service_capital_policy > article { background: #3FB0C4;}
.main_service_howmuch [class*="btn_"] {
  color: #48BC63;
}
.main_service_capital_policy [class*="btn_"] {
  color: #3FB0C4;
}



/* ! ============================================================
　サイト内検索
============================================================ */
.area_search_whole {
  width: 100%;
}


/* ! ヘッド ———————————————————————————————————————————————————————————— */
.head_search_whole {
  background: #F7F9F9;
  padding: 30px 30px 20px;
}
.head_search_whole .wrap_search{
  margin: 0 0 10px;
}
.head_search_whole .wrap_checkbox label{
  height: 30px;
}
@media screen and (max-width: 640px){
  .head_search_whole {
    padding: 20px 20px 16px;
  }
}
@media screen and (max-width: 480px){
  .head_search_whole {
    padding: 10px 10px 8px;
  }
  .head_search_whole .wrap_checkbox label{
    height: 26px;
    margin-right: 16px;
  }
}

/* 検索 */
.wrap_search .button_search {

}

/* ! 公式パートナー ———————————————————————————————————————————————————————————— */
.area_official_partner{
  margin: 30px 0;
}
.area_official_partner > .ttl{
  margin: 0 0 16px;
  font: 600 16px/1em 'noto sans japanese',sans-serif;
}
.area_official_partner .list_expert{
  display: flex;
  flex-wrap: wrap;
  margin: -12px;
}
.area_official_partner .list_expert > li{
  width: 33.33%;
  padding: 12px;
}
.area_official_partner .list_expert > li + li{
  border-top: none;
}
.area_official_partner .list_expert article{
  padding: 0;
  align-items: center;
}
.area_official_partner .list_expert article>.img{
  margin: 0 16px 0 0;
  display: flex;
}
.area_official_partner .head_expert{
  margin: 0;
}
.area_official_partner .head_expert .company{
  font: 400 13px/1.3em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 1080px){
  .area_official_partner .list_expert{
    margin: -8px;
  }
  .area_official_partner .list_expert > li{
    width: 50%;
    padding: 8px;
  }
}
@media screen and (max-width: 767px){
  .area_official_partner .list_expert > li{
    width: 50%;
  }
}
@media screen and (max-width: 640px){
  .area_official_partner{
    margin: 20px 0;
  }
  .area_official_partner .list_expert{
    flex-wrap: nowrap;
    overflow: auto;
  }
  .area_official_partner .list_expert > li{
    min-width: 260px;
  }
  .area_official_partner .list_expert article>.img{
    margin: 0 10px 0 0;
  }
  .area_official_partner .head_expert .name{
    font: 600 16px/1em 'noto sans japanese',sans-serif;
  }
  .area_official_partner .head_expert .name:after{
    font: 300 12px/1em 'noto sans japanese',sans-serif;
  }
}


/* ! ボディ ———————————————————————————————————————————————————————————— */
.body_search_whole {
  padding: 30px;
}
@media screen and (max-width: 640px){
  .body_search_whole {
    padding: 20px 10px;
  }
}

/* ! カウントエリア —————————————————————————————— */
.area_count_whole {
  margin: 0 0 20px;
}
.area_count_whole .count {
  font: bold 24px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_count_whole .count:before {
  content: "検索結果：";
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 4px 0 0;
}
.area_count_whole .count:after {
  content: "件";
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}

/* ! 検索結果リスト —————————————————————————————— */
.list_search_whole > li {
  margin: 25px 0 0;
  padding: 25px 0 0;
  border-top: 1px dotted #ccc;
}
.list_search_whole article {
  position: relative;
}
.list_search_whole article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.list_search_whole .ttl {
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
}
.list_search_whole .description {
  color: #666;
  font: 200 13px/1.5em 'noto sans japanese',sans-serif;
  margin: 4px 0 0;
}
.list_search_whole [class*="price"] {
  margin: 8px 0 0;
}
@media screen and (max-width: 560px){
  .list_search_whole > li {
    margin: 16px 0 0;
    padding: 16px 0 0;
  }
  .list_search_whole .ttl{
    font-size: 14px;
  }
}

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

/* タグ */
.list_search_whole article:before {
  content: "";
  color: #fff;
  font: 600 10px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
  margin: 0 0 12px;
  padding-left: 20px;
}
.list_search_whole article:after{
  content: "";
  background: #333;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: -3px;
}
.list_search_whole [class*="content"] article:after{ background: url(../img/shape/ico_count_column.svg);}
.list_search_whole [class*="cgm"] article:after{ background: url(../img/shape/ico_count_cgm.svg);}
.list_search_whole [class*="skill"] article:after{ background: url(../img/shape/ico_count_contents.svg);}
.list_search_whole [class*="fmt"] article:after{ background: url(../img/shape/ico_fmt.svg);}
.list_search_whole [class*="enquete"] article:after{ background: url(../img/shape/ico_enquete.svg);}
.list_search_whole [class*="expert"] article:after{ background: url(../img/shape/ico_expert.svg);}
.list_search_whole [class*="user"] article:after{ content: none;}

/* 個別 */
.list_search_whole [class*="content"] article:before {
  content: "記事&コラム";
  color: #3f7cc4;
}
.list_search_whole [class*="cgm"] article:before {
  content: "みんなの事業相談";
  color: #f98623;
}
.list_search_whole [class*="skill"] article:before {
  content: "知識を買う／売る";
  color: #DD5176;
}
.list_search_whole [class*="fmt"] article:before {
  content: "契約書テンプレート";
  color: #37BAA6;
}
.list_search_whole [class*="enquete"] article:before {
  content: "アンケート";
  color: #576086;
}
.list_search_whole [class*="expert"] article:before {
  content: "専門家";
  color: #446888;
}
.list_search_whole [class*="user"] article:before {
  content: none;
}

@charset "UTF-8";

/* ! ナビゲーション ————————————————————————————————————————————————————————————

ナビゲーション
メインエリアのサイドバー
株価算定・資本政策
ランキング
コンテンツ
タブ_サイドバー
株価算定サイドバー
足跡
設定サイドバー

———————————————————————————————————————————————————————————— */
/* ! 共通 ———————————————————————————————————————————————————————————— */
aside > div + div {
  margin: 10px 0 0;
}

/* タイトル */
.ttl_aside {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 20px;
}
.ttl_aside .num {
  font: bold 16px/1em 'Roboto','noto sans japanese',sans-serif;
  display: inline-block;
  margin: 0 0 0 4px;
}
.ttl_aside .num:after{
  content: attr(data-unit) "";
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  display: inline-block;
  margin: 0 0 0 2px;
}

/* ! ナビゲーション ———————————————————————————————————————————————————————————— */
.aside_nav {
  padding: 70px 0 30px;
  width: 180px;
  background: #fff;
  border-right: 1px solid #eee;
  position: relative;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 5;
  overflow-y: auto;
  height: 100vh;
}
@media screen and (max-width: 767px){
  .aside_nav {
    padding: 46px 0 140px;
    opacity: 0;
    pointer-events: none;
/*     transform: translateX(100%); */
    position: absolute;
    top: 0;
    right: 0;
    left: auto;
    width: 220px;
    width: 0px;
    height: 100vh;
    overflow-y: auto;
    box-shadow: -5px 0px 40px 0px rgba(0,0,0,.3);
    z-index: 10;
    transition: all 0.2s ease;
  }
}
@media screen and (max-width: 479px){
  .aside_nav{
    width: 200px;
  }
}

/* 固定ページ */
.page > .aside_nav{
  display: none;
}
@media screen and (max-width: 767px){
  .page > .aside_nav{
    display: block;
  }
}



/* ! スマホメニュー開閉 ———————————————————— */
.show_aside_nav .aside_nav {
  opacity: 1;
  pointer-events: all;
  transform: translateX(0);
  width: 220px;
}

/* ゲストの */
.aside_nav .description {
  text-align: center;
  font: 300 12px/1.4em 'noto sans japanese',sans-serif;
  margin: 12px 0;
}
.aside_nav [class*="btnarea"]{
  flex-direction:column;
  align-items: center;
}
.aside_nav [class*="btn_"] {
  font: 500 12px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  height: 24px;
  width: 140px;
  padding: 0 8px;
  color: #aaa;
  border-color: #aaa;
  background: #fff;
}
@media screen and (min-width: 480px){
  .aside_nav [class*="btn_"]:hover {
    color: #fff;
    background: #aaa;
  }
}
.aside_nav [class*="button_"] {
  color: #aaa;
  font-size: 11px;
  margin: 8px 0 0;
  position: relative;
  z-index: 2;
}

/* 閉じるボタン */
.aside_nav .button_menu_sp {
  display: none;
  width: 28px;
  height: 28px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_menu_sp_close.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: all 0.1s ease;
  position: absolute;
  top: 18px;
  right: 25px;
  margin: 0;
  cursor: pointer;
}
@media screen and (max-width: 767px){
  .aside_nav .button_menu_sp {
    display: block;
  }
}
@media screen and (max-width: 479px){
  .aside_nav .button_menu_sp {
    right: 12px;
  }
}

/* ! ユーザーエリア —————————————————————————————— */
.area_user_aside {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  padding: 0 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.2);
  position: relative;
}
.area_user_aside > .link {
  display: block;
  border: 3px solid transparent;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.area_user_aside [class*="thumb"] {
  margin-bottom: 6px;
}
.area_user_aside .name {
  font: 700 16px/1em 'noto sans japanese',sans-serif;
  text-align: center;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .area_user_aside:hover .name {
    color: #43AC5D;
  }
}
.area_user_aside .name:after {
  content: attr(data-kana)"";
  color: #aaa;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 4px 0 0;
  text-align: center;
}
.area_user_aside .plan  {
  color: #43AC5D;
  font: 700 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: 0em;
  border-top: 1px solid #43AC5D;
  border-bottom: 1px solid #43AC5D;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 8px 0;
  margin: 16px 0 0;
  width: 100%;
  max-width: 150px;
  transition: all 0.1s ease;
  position: relative;
  z-index: 2;
}
@media screen and (min-width: 480px){
  .area_user_aside .plan:hover,
  .area_user_aside .plan:hover .type {
    color: #fff;
    background: #43AC5D;
  }
}
.area_user_aside .plan .type {
  color: #707070;
  font-size: 10px;
  margin: 4px 0 0;
  transition: all 0.1s ease;
}
@media screen and (max-width: 480px){
  .area_user_aside {
    padding: 0;
  }
  .area_user_aside .plan  {
    margin: 10px 0 0;
  }
}


/* アクション */
.area_user_aside .list_status {
  margin: 24px 0 0;
}
.area_user_aside .list_status > li {
  padding: 0 12px;
}
.area_user_aside .list_status p {
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area_user_aside .list_status p:before {
  position: static;
  transform: none;
  margin: 0 0 2px;
}
@media screen and (max-width: 480px){
  .area_user_aside .list_status {
    display: none;
  }
}


/* カウントリスト */
.list_count_aside {
  max-width: 120px;
  width: 100%;
  margin: 15px 0 0;
}
.list_count_aside li + li {
  margin: 6px 0 0;
}
.list_count_aside p {
  font: 700 16px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.list_count_aside p:before {
  color: #839EAC;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 480px){
  .list_count_aside {
    display: none;
  }
}

/* ボタンエリア(お気に入り) */
.list_count_aside + .btnarea {
  margin: 15px 0 0;
  position: relative;
  z-index: 1;
}
.list_count_aside + .btnarea [class*="btn_"]{
  color: #7f8eca;
  border-color: #7f8eca;
}
.list_count_aside + .btnarea [class*="btn_"] + [class*="btn_"]{
  margin: 4px 0 0;
}
@media screen and (min-width: 480px){
  .list_count_aside + .btnarea [class*="btn_"]:hover{
    background: #7f8eca;
    color: #fff;
  }
}


/* ! ナビゲーション ———————————————————————————————————————————————————————————— */
.area_nav_aside {
  padding: 0 16px;
}


/* リスト */
.list_nav_aside {
  border-top: 1px solid #eee;
  padding: 12px 0;
  margin: 0 -16px;
}
.list_nav_aside > li {
  position: relative;
  padding: 3px 6px 3px 8px;
}
.list_nav_aside > li:after {
  content: "";
  display: block;
  height: 30px;
  width: 4px;
  background: transparent;
  position: absolute;
  top: 10px;
  right: 0;
}
.list_nav_aside > li > a {
  font: 600 13px/1.4em 'noto sans japanese',sans-serif;
  letter-spacing: .01em;
  display: block;
/*   border-left: 3px solid transparent; */
  padding: 12px 2px 12px 26px;
  width: 100%;
  position: relative;
}
@media screen and (min-width: 480px){
  .list_nav_aside > li > a:hover {
    color: #51C96D;
  }
}
.list_nav_aside > li > a:after {
  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%);
}
@media screen and (max-width: 767px){
  .list_nav_aside > li {
    padding-left: 24px;
  }
  .list_nav_aside > li:after{
    left: 0;
  }
}
@media screen and (max-width: 480px){
  .list_nav_aside {
    border-top: none;
  }
  .list_nav_aside > li > a {
    padding: 8px 6px 8px 30px;
  }
  .list_nav_aside > li:after {
    top: 2px;
  }
  .list_nav_aside > li > a:after {
    width: 18px;
    height: 18px;
  }
}


/* 個別 */
.list_nav_aside > .nav_dashboard > a:after { background: url(../img/shape/ico_nav_dashboard.svg);}
.list_nav_aside > .nav_column > a:after { background: url(../img/shape/ico_nav_column.svg);}
.list_nav_aside > .nav_cgm > a:after { background: url(../img/shape/ico_nav_cgm.svg);}
.list_nav_aside > .nav_market > a:after { background: url(../img/shape/ico_nav_market.svg);}
.list_nav_aside > .nav_format > a:after { background: url(../img/shape/ico_nav_format.svg);}
.list_nav_aside > .nav_tool > a:after { background: url(../img/shape/ico_nav_tool.svg);}
.list_nav_aside > .nav_bundle > a:after { background: url(../img/shape/ico_nav_bundle.svg);}
.list_nav_aside > .nav_dashboard.nav_current:after { background: #51C96D;}
.list_nav_aside > .nav_dashboard.nav_current a { color: #51C96D;}
.list_nav_aside > .nav_column.nav_current:after { background: #3F7CC4;}
.list_nav_aside > .nav_column.nav_current a { color: #3F7CC4;}
.list_nav_aside > .nav_cgm.nav_current:after { background: #F98623;}
.list_nav_aside > .nav_cgm.nav_current a { color: #F98623;}
.list_nav_aside > .nav_market.nav_current:after { background: #DD5176;}
.list_nav_aside > .nav_market.nav_current a { color: #DD5176;}
.list_nav_aside > .nav_format.nav_current:after { background: #37BAA6;}
.list_nav_aside > .nav_format.nav_current a { color: #37BAA6;}
.list_nav_aside > .nav_tool.nav_current:after { background: #48BC63;}
.list_nav_aside > .nav_tool.nav_current > a { color: #48BC63;}
.list_nav_aside > .nav_bundle.nav_current:after { background: #1E3D58;}
.list_nav_aside > .nav_bundle.nav_current a { color: #1E3D58;}

@media screen and (min-width: 480px){
  .list_nav_aside > .nav_dashboard a:hover { color: #51C96D;}
  .list_nav_aside > .nav_column a:hover{ color: #3F7CC4;}
  .list_nav_aside > .nav_cgm a:hover{ color: #F98623;}
  .list_nav_aside > .nav_market a:hover { color: #DD5176;}
  .list_nav_aside > .nav_format a:hover { color: #37BAA6;}
  .list_nav_aside > .nav_tool a:hover { color: #48BC63;}
  .list_nav_aside > .nav_bundle a:hover { color: #1E3D58;}
}


.list_nav_aside > li.nav_current > a {
  border-color: #51C96D;
  color: #51C96D;
}
.list_nav_aside > li.nav_current > a:before {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: -moz-linear-gradient(-45deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(-45deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(135deg, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=1 );
  position: absolute;
  top: 0;
  left: 0;
  opacity: .2
}
/* 1階層下のリスト */
.list_nav_aside_under {
  padding: 0 0 0 32px;
}
.list_nav_aside_under > li + li {
  margin: 8px 0 0;
}
.list_nav_aside_under a {
  color: #666;
  font: 300 12px/1.2em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
  padding: 4px 0 4px 12px;
  position: relative;
}
.list_nav_aside_under a:before {
  content: "-";
  position: absolute;
  top: .7em;
  left: 2px;
  transform: translateY(-50%);
}
@media screen and (min-width: 480px){
  .list_nav_aside_under a:hover {
    color: #51C96D;
  }
}
@media screen and (max-width: 480px){
  .list_nav_aside_under > li + li {
    margin: 4px 0 0;
  }
}



/* ! メインエリアのサイドバー ———————————————————————————————————————————————————————————— */
.area_main_layout aside > section + section {
  margin-top: 20px;
}
.area_main_layout aside > section + section.wide {
  margin-top: 30px;
}
[class*="aside_min"] {
  flex: 0 0 220px;
  margin: 0 0 0 40px;
  width: 220px;
}
[class*="aside_min"] > .area_tab_aside{
  width: 220px;
}
[class*="aside_medium"] {
  flex: 0 0 240px;
  margin: 0 0 0 40px;
  width: 240px;
}
[class*="aside_medium"] > .area_tab_aside{
  width: 240px;
}
@media screen and (max-width: 1280px){
  [class*="aside_min"] {
    flex: 0 0 200px;
    margin: 0 0 0 30px;
    width: 200px;
  }
  [class*="aside_min"] > .area_tab_aside{
    width: 200px;
  }
  [class*="aside_medium"] {
    flex: 0 0 220px;
    margin: 0 0 0 30px;
    width: 220px;
  }
  [class*="aside_medium"] > .area_tab_aside{
    width: 220px;
  }
}
@media screen and (max-width: 1000px){
  [class*="aside_min"] {
    flex: 0 0 100%;
    margin: 40px 0 0;
    width: 100%;
  }
  [class*="aside_min"] > .area_tab_aside{
    width: 100%;
  }
  [class*="aside_medium"] {
    flex: 0 0 100%;
    margin: 40px 0 0;
    width: 100%;
  }
  [class*="aside_medium"] > .area_tab_aside{
    width: 100%;
  }
  [class*=aside_medium].reorder{
    display: flex;
    flex-direction:column;
  }
  [class*=aside_medium].reorder .order_1{ order: 1;}
  [class*=aside_medium].reorder .order_2{ order: 2; margin: 0 0 20px}
  [class*=aside_medium].reorder .order_3{ order: 3;}
}
@media screen and (max-width: 560px){
  [class*="aside_min"] {
    margin: 20px 0 0;
  }
  [class*="aside_medium"]{
    margin: 20px 0 0;
  }
}



/* ! 株価算定・資本政策 ———————————————————————————————————————————————————————————— */
.area_calc_aside {
  margin: -10px;
}
.area_calc_aside > * {
 /* 共通クラス */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px;
}
@media screen and (max-width: 1000px){
  .area_calc_aside {
    display: flex;
    align-items: flex-start;
  }
  .area_calc_aside > * {
    flex: 0 0 50%;
  }
  .area_calc_aside > * + * {
    margin: 0;
  }
}
@media screen and (max-width: 560px){
  .area_calc_aside {
    margin: -5px;
  }
  .area_calc_aside > *  {
    padding: 5px;
  }
}



/* ! ヘッド_株価算定・資本政策 —————————————————————————————— */
.head_calc_aside {
  color: #fff;
  height: 48px;
  margin: 0 0 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #000;
  border: 1px solid #000;
  position: relative;
}
.head_calc_aside > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
[class*="area_calc_aside"] .head_calc_aside a:hover ~ .ttl{
  text-decoration: underline;
}
.head_calc_aside .ttl {
  font: 700 16px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 560px){
  .head_calc_aside {
    height: 32px;
  }
}


/* 個別 */
[class*="area_calc_aside"][class*="howmuch"] .head_calc_aside {
  background: #48BC63;
  border-color: #48BC63;
}
[class*="area_calc_aside"][class*="capital"] .head_calc_aside {
  background: #3FB0C4;
  border-color: #3FB0C4;
}
[class*="area_calc_aside"][class*="howmuch"] .head_calc_aside:before{
  content: "";
  background: url(../lp/img/howmuch/img_japan_first.svg) no-repeat center top !important;
  background-size: contain !important;
  width: 64px;
  height: 64px;
  position: absolute;
  top: -12px;
  left: -8px;
}
@media screen and (max-width: 560px){
  [class*="area_calc_aside"][class*="howmuch"] .head_calc_aside:before {
    top: -17px;
  }
}


/* ! ボディ_株価算定・資本政策 —————————————————————————————— */
.body_calc_aside {
  display: flex;
  align-items: center;
}
.body_calc_aside .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.body_calc_aside .description {
  font: 300 13px/1.4em 'noto sans japanese',sans-serif;
}
.body_calc_aside .btnarea {
  flex: 0 0 120px;
  margin: 0 0 0 10px;
}
.body_calc_aside [class*="btn_"] {
  font-size: 14px;
  padding: 0 8px;
  height: 36px;
}
@media screen and (max-width: 1280px){
  .body_calc_aside .btnarea {
    flex: 0 0 100px;
  }
}
@media screen and (max-width: 1000px){
  .body_calc_aside .description {
    font-size: 13px;
  }
  .body_calc_aside .description br {
    display: none;
  }
}
@media screen and (max-width: 560px){
  .body_calc_aside {
    flex-wrap: wrap;
  }
  .body_calc_aside .description{
    font-size: 12px;
    text-align: center;
  }
  .body_calc_aside .btnarea {
    flex: 0 0 100%;
    margin: 8px 0 0;
  }
}
@media screen and (max-width: 360px){
  .body_calc_aside .description br {
    display: block;
  }
}



/* ! フット_株価算定・資本政策 —————————————————————————————— */
.area_calc_aside .cnt [class*="btnarea"] {
  margin: 16px 0 0;
}
.area_calc_aside .cnt [class*="btn_"] {
  color: #fff;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  width: 140px;
  height: 20px;
  background: transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 100px;
  border: 1px solid #fff;
}
@media screen and (min-width: 480px){
  .area_calc_aside .cnt [class*="btn_"]:hover {
    background: #fff;
  }
}
/* 株価算定 */
.area_howmuch_aside:before {
  content: "";
  display: block;
  width: 100px;
  height: 100px;
  background: url(../img/bg_howmuch.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: .5;
  pointer-events: none;
}


/* ! 過去の算定 —————————————————————————————— */
.area_record_aside {
  border-top: 1px dotted #eee;
  margin: 8px 0 0;
  padding: 8px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-end;
}


/* ! ヘッド_レコード —————————————————————————————— */
.head_record_aside {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 0 4px;
}
.head_record_aside .ttl {
  color: #48BC63;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
}
.head_record_aside .date {
  margin-left: auto;
  font: 300 11px/1em 'Roboto','noto sans japanese',sans-serif;
}


/* ! ボディ_レコード —————————————————————————————— */
.body_record_aside {
  display: flex;
}
.body_record_aside .count {
  font: 700 18px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
}
.body_record_aside .count:after {
  content: attr(data-unit)"";
  font: 700 14px/1em 'noto sans japanese',sans-serif;
  display: inline-block;
  margin: 0 0 0 2px;
  transform:scale(.8);
  transform-origin: 0% 100%;
}
.area_howmuch_aside .area_record:before {
  content: attr(data-date)"";
  font: 400 10px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  text-align: right;
  display: block;
  width: 100%;
  margin: 0 0 4px;
}
.area_howmuch_aside .area_record .count:before {
  content: "¥";
  font: 700 14px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 2px 0 0;
}
.area_howmuch_aside .area_record .range {
  color: #fff;
  font: 700 10px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  align-items: flex-end;
  padding: 0 6px;
}


/* ! フット_レコード —————————————————————————————— */
.foot_record_aside {
  width: 100%;
  margin: 4px 0 0;
  display: flex;
  justify-content: flex-end;
}


/* ! タブアサイド ———————————————————————————————————————————————————————————— */
.head_tab_aside {
  margin: 0 0 12px;
  background: #f1f1f1;
  padding: 8px 16px;
}
.head_tab_aside .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
}

/* ! アサイドタイトル ———————————————————————————————————————————————————————————— */
.block_ttl_aside {
  margin: 0 0 12px;
  background: #F2F3F5;
  padding: 8px 16px;
  height: 40px;
  display: flex;
  align-items: center;
}
.block_ttl_aside .ttl{
  color: #1A1311;
  font: 600 18px/1em 'noto sans japanese' , sans-serif;
}

/* ! ランキング ———————————————————————————————————————————————————————————— */
.area_ranking_aside {
}

/* CGMの場合 */
.area_ranking_aside [class*="list_cgm"] {
  counter-reset: number 0;
  margin: -12px 0 0;
}
[class*="list_cgm"] article{
  position: relative;
}
[class*="list_cgm"] article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.area_ranking_aside [class*="list_cgm"] > li {
  position: relative;
  counter-increment: number 1;
  margin: 0;
  padding: 12px 0;
}
.area_ranking_aside [class*="list_cgm"] > li + li{
  border-top: 1px solid #eee;
}
.area_ranking_aside [class*="list_cgm"] .ttl {
  font: 600 15px/1.4em 'noto sans japanese',sans-serif;
  position: relative;
  padding-left: 30px;
}
.area_ranking_aside [class*="list_cgm"] .ttl:before {
  content: counter(number) "";
  color: #fff;
  font: 600 14px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: #8B93B2;
  position: absolute;
  top: 0;
  left: 0;
}
.area_ranking_aside [class*="list_cgm"] > li:nth-of-type(1) .ttl:before { background: #DAB35D;}
.area_ranking_aside [class*="list_cgm"] > li:nth-of-type(2) .ttl:before { background: #162A49;}
.area_ranking_aside [class*="list_cgm"] > li:nth-of-type(3) .ttl:before { background: #BB7743;}
.area_ranking_aside [class*="list_cgm"] .description {
  color: #888;
  font: 300 12px/1.4em 'noto sans japanese',sans-serif;
}
.area_ranking_aside [class*="list_cgm"] > li:nth-of-type(n + 6) .ttl:before {
  content: counter(number) ".";
  color: #8B93B2;
  background: transparent;
}
.area_ranking_aside [class*="list_cgm"] > li:nth-of-type(n + 6) .ttl {
  font: 500 12px/1.4em 'noto sans japanese',sans-serif;
}
/*
.area_ranking_aside [class*="list_cgm"] > li:nth-of-type(n + 6) .list_action {
  border-top: 1px solid #E5E7EB;
}
*/
aside [class*="list_cgm"] .description {
  font: 300 12px/1.4em 'noto sans japanese',sans-serif;
}
[class*="list_cgm"] .area_poster{
  position: relative;
  z-index: 1;
}

[class*="list_cgm"][class*="aside"]{
  margin: -12px 0 0;
}
[class*="list_cgm"][class*="aside"] > li{
  margin: 0;
  padding: 12px 0;
}
[class*="list_cgm"][class*="aside"] > li + li{
  border-top: 1px solid #eee;
}

/* ! 経営相談 */
.area_ranking_aside [class*="list_cgm"].ellipsis .ttl{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-bottom: 4px;
  margin: 0;
}


/* ! コンテンツの場合 */
.area_ranking_aside [class*="list_ranking"] {
  counter-reset: number 0;
}
.area_ranking_aside [class*="list_ranking"] > li {
  position: relative;
  counter-increment: number 1;
  padding: 16px 0;
}
.area_ranking_aside [class*="list_ranking"] > li:nth-of-type(1) {
  padding-top: 0;
}
.area_ranking_aside [class*="list_ranking"] > li + li {
  border-top: 1px solid #F2F4FA;
}
.area_ranking_aside [class*="list_ranking"] > li:before {
  content: counter(number) "";
  color: #fff;
  font: 700 14px/1em 'Roboto','noto sans japanese',sans-serif;
  font-style: italic;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 24px;
  padding: 2px 0 0;
  background: #8B93B2;
  position: absolute;
  top: 16px;
  right: 0;
}
.area_ranking_aside [class*="list_ranking"] > li:nth-of-type(1):before{
  top: 0;
}
.area_ranking_aside [class*="list_ranking"] > li:nth-of-type(1):before { background: #DAB35D;}
.area_ranking_aside [class*="list_ranking"] > li:nth-of-type(2):before { background: #162A49;}
.area_ranking_aside [class*="list_ranking"] > li:nth-of-type(3):before { background: #BB7743;}
.area_ranking_aside [class*="list_ranking"] .ttl {
  color: #162a49;
  font: 500 13px/1.5em 'noto sans japanese',sans-serif;
  letter-spacing: .02em;
  padding-right: 30px;
  margin: 0 0 4px;
}
.area_ranking_aside [class*="list_ranking"] .list_action {
  margin-top: 0;
}
.area_ranking_aside [class*="list_ranking"] .area_poster {
  margin-top: 6px;
}
.area_ranking_aside [class*="list_ranking"] .tpl_price{
  margin: 6px 0 0;
  height: 28px;
}

/* ユーザーと料金を横並び */


/* ! 新着アンケート ———————————————————————————————————————————————————————————— */
.area_main_layout aside .area_enquete_aside{
  margin: 50px 0 0;
}

/* ! タブ_サイドバー —————————————————————————————— */
/* ボタンリスト */
.list_tab_button {
  display: flex;
  border-bottom: 1px solid #eee;
}
.list_tab_button > li {
  flex: 1 1 0%;
}
.tab_button {
  color: #000;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  height: 32px;
  border-bottom: 3px solid transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tab_button.tab_current {
  font-weight: 700;
  border-color: #000;
/*
  background: #E5E6EA;
  border-color: #E5E6EA;
*/
}



/* パネル */
.list_tab_panel {
  margin: 20px 0 0;
}
.tab_panel {
  display: none;
}
.tab_panel > article {
}


/* お気に入りページデザイン */
.area_favorite .list_tab_button > li {
  max-width: 160px;
}
.area_favorite .tab_button.tab_current {
  color: #fff;
  background: #42a55a;
  border-color: #42a55a;
  border-radius: 5px 5px 0 0  ;
}

/* 投稿ページデザイン */
.list_tab_history{
  display: flex;
  border-bottom: 1px solid #eee;
}
.list_tab_history > li {
  flex: 1 1 0%;
  max-width: 160px;
}
.tab_button_history {
  color: #000;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  height: 32px;
  border-bottom: 3px solid transparent;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.tab_button_history.current {
  color: #fff;
  background: #42a55a;
  border-color: #42a55a;
  border-radius: 5px 5px 0 0  ;
}

@media screen and (max-width: 1080px){
  .list_tab_history{
    flex-wrap: wrap;
    margin: -2px;
    margin-bottom: 2px;
    border: none;
  }
  .list_tab_history > li{
    width: 33.3333%;
    max-width: none;
    flex: 0 0 auto;
    padding: 2px;
  }
  .tab_button_history{
    border: 1px solid #eee;
    border-radius: 5px !important;
    height: 36px;
    font-size: 11px;
    line-height: 1.3em;
  }
  .tab_button_history br{
    display: none;
  }
}
@media screen and (max-width: 560px){
  .list_tab_history > li{
    width: 50%;
  }
  .tab_button_history{
    height: 30px;
  }
}


/* ! 株価算定サイドバー ———————————————————————————————————————————————————————————— */
.area_howmuch_support {
  padding: 30px;
  background: #fff;
  border-radius: 5px;
  box-shadow: 0px 4px 8px -4px rgba(0,0,0,.1);
}
/* リスト */
.list_howmuch_support > li + li {
  margin: 20px 0 0;
}
.list_howmuch_support .description {
  color: #888;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
  margin: 10px 0 0;
}
/* 個別 */
.support_copy [class*="btn_"] {
  background: #5FE0C2;
  border-color: #5FE0C2;
}
.support_substitute [class*="btn_"] {
  background: #4FC7B5;
  border-color: #4FC7B5;
}



/* ! サポートツール　表示非表示ボタン ———————————————————————————————————————————————————————————— */
.area_tool_support {
	position: absolute;
	top: 140px;
	right: 100px;
}
.area_tool_support.fixed{
  position: fixed;
  top: 40px;
}
.button_support {
  color: #fff;
  font: 600 14px/1.4em 'noto sans japanese',sans-serif;
  text-align: center;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	width: 90px;
	height: 90px;
	border-radius: 100px;
	background: #51C96D;
	width: 90px;
	margin: 0 0 0 auto;
  filter: drop-shadow(0px 8px 8px rgba(81, 201, 109, 0.35));
  position: relative;
  cursor: pointer;
}
.button_support:before {
	content: "";
	display: block;
	width: 60px;
	height: 60px;
	background: url(../img/shape/ico_pen_white.svg) no-repeat center center;
  background-size: contain !important;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50% , -50%);
	opacity: .2;
}
.area_tool_support .note{
  font: 400 11px/1.3em 'noto sans japanese' , sans-serif;
  padding: 3px 8px;
  border-radius: 2px;
  margin: 16px 0 0;
  background: #fff;
  border: 2px solid #51c96d;
  position: relative;
}
.area_tool_support .note:before {
  content: "";
  position: absolute;
  top: -13px;
  right: 36px;
  border: 5px solid transparent;
  border-bottom: 8px solid #FFF;
  z-index: 2;
}
.area_tool_support .note:after {
  content: "";
  position: absolute;
  top: -17px;
  right: 35px;
  border: 6px solid transparent;
  border-bottom: 9px solid #51c96d;
  z-index: 1;
}


@media screen and (max-width: 1280px){
  .area_tool_support {
  	right: 30px;
  }
}
@media screen and (max-width: 479px){
  .area_tool_support {
  	right: 16px;
  	top: 160px;
  	position: absolute;
  }
  .area_tool_support.fixed{
    position: fixed;
    top: 16px;
  }
  .button_support {
    font-size: 12px;
  	width: 80px;
  	height: 80px;
  }
  .button_support:before {
  	width: 50px;
  	height: 50px;
  }
}


/* ! 足跡 ———————————————————————————————————————————————————————————— */
.area_foot {
}
.area_foot .head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 0 20px;
}
.area_foot .ttl_aside{
  flex: 0 0 60px;
  margin: 0 0 4px;
}
.area_foot .count {
  font: 600 20px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_foot .count:before {
  content: attr(data-date)"";
  color: #A3A7B2;
  font: 400 11px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .02em;
  margin: 0 8px 0 0;
}
.area_foot .count:after {
  content: "人";
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}

/* リスト */
.list_foot {
  overflow: auto;
  max-height: 600px;
}
.list_foot > li {
  border-top: 1px solid #F2F4FA;
  padding: 10px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.list_foot .date {
  color: #B3C1C7;
  font: 400 12px/1em 'Roboto','noto sans japanese',sans-serif;
}

/* ボタンエリア */
.area_foot [class*="btnarea"] {
  border-top: 1px solid #F2F4FA;
  padding: 16px 0 0;
}

/* ページング */
.area_foot [class*="area_paging"]{
  margin: 16px 0 0;
  justify-content: flex-end;
}
.area_foot .list_paging{
  margin: 0 -2px;
}
.area_foot .list_paging > li{
  padding: 0 2px;
}
@media screen and (max-width: 1000px){
  .area_foot [class*="area_paging"]{
    justify-content: flex-start;
  }
}

/* フリー会員の場合 */
.area_foot.free .body{
  position: relative;
  padding: 8px;
  background: url(../img/img_foot_list.png) no-repeat left top !important;
  background-size:  cover !important;
  height: 160px;
}
.area_foot.free .text{
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: rgba(255,255,255,.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.area_foot.free .text .description {
  font: 500 14px/1.4em 'noto sans japanese',sans-serif;
}
.area_foot.free .text [class*="btn_"] {
  font-size: 13px;
  height: 28px;
  margin: 8px 0 0;
}
@media screen and (max-width: 1000px){
  .area_foot.free .body{
    background-size:  36% !important;
  }
}
@media screen and (max-width: 640px){
  .area_foot.free .body{
    background-size:  48% !important;
  }
}
@media screen and (max-width: 480px){
  .area_foot.free .body{
    background-size:  64% !important;
  }
}
@media screen and (max-width: 370px){
  .area_foot.free .body{
    background-size:  80% !important;
  }
}

/* ! 出品喚起 ———————————————————————————————————————————————————————————— */
[class*="area_post"][class*="aside"] {
  background: #DD5176;
  padding: 10px;
  margin: 0 0 10px;
}
[class*="area_post"][class*="aside"][class*="end"]{
  margin: 40px 0 0;
}
[class*="area_post"][class*="aside"] .text {
  color: #fff;
  padding: 10px;
  position: relative;
}
[class*="area_post"][class*="aside"] .text:after {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background: url(../img/shape/ico_skill_white.svg) ;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  right: 0;
  opacity: .3;
}
[class*="area_post"][class*="aside"] .ttl {
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
}
[class*="area_post"][class*="aside"] .description {
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
  margin: 12px 0 0;
}
@media screen and (max-width: 1000px){
  [class*="area_post"][class*="aside"] .ttl br{
    display: none;
  }
  [class*="area_post"][class*="aside"] .description br{
    display: none;
  }
}

/* 個別 */
[class*="area_post"][class*="aside"][class*="enquete"] { background: #576086;}
[class*="area_post"][class*="aside"][class*="enquete"] .text:after {
  background: url(../img/shape/ico_enquete_white.svg) ;
  background-size: contain !important;
}
[class*="area_post"][class*="aside"][class*="360"] { background: #7857A7;}
[class*="area_post"][class*="aside"][class*="360"] .text:after {
  background: url(../img/shape/ico_360.svg) ;
  background-size: contain !important;
}
[class*="area_post"][class*="aside"][class*="content"] { background: #3f7cc4;}
[class*="area_post"][class*="aside"][class*="content"] .text:after {
  background: url(../img/shape/ico_content_white.svg) ;
  background-size: contain !important;
}
[class*="area_post"][class*="aside"][class*="cgm"] { background: #f98623;}
[class*="area_post"][class*="aside"][class*="cgm"] .text:after {
  background: url(../img/shape/ico_cgm_white.svg) ;
}



/* 投稿ボタン */
[class*="btn_post"] {
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  height: 48px;
  background: #fff;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
}
[class*="btn_post"]:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  margin: 0 6px 0 -3px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: all 0.1s ease;
}


/* 個別 */
[class*="btn_post"][class*="skill"] {
  color: #DD5176;
  border-color: #DD5176;
}
[class*="btn_post"][class*="skill"]:before {  background: url(../img/shape/ico_pen_red.svg);}
@media screen and (min-width: 480px){
  [class*="btn_post"][class*="skill"]:hover {
    color: #fff;
    background: #DD5176;
  }
}

/* アンケート */
[class*="btn_post"][class*="enquete"] {
  color: #576086;
  border-color: #576086;
}
[class*="btn_post"][class*="enquete"]:before {  background: url(../img/shape/ico_pen_navy.svg);}
@media screen and (min-width: 480px){
  [class*="btn_post"][class*="enquete"]:hover {
    color: #fff;
    background: #576086;
  }
}

/* 360評価 */
[class*="btn_post"][class*="360"] {
  color: #7857A7;
  border-color: #7857A7;
}
[class*="btn_post"][class*="360"]:before {  background: url(../img/shape/ico_pen_purple.svg);}
@media screen and (min-width: 480px){
  [class*="btn_post"][class*="360"]:hover {
    color: #fff;
    background: #7857A7;
  }
}

/* 記事＆コラム */
[class*="btn_post"][class*="content"] {
  color: #3f7cc4;
  border-color: #3f7cc4;
}
[class*="btn_post"][class*="content"]:before {  background: url(../img/shape/ico_pen_blue.svg);}
[class*="btn_post"][class*="cgm"] {
  color: #f98623;
  border-color: #f98623;
}
[class*="btn_post"][class*="cgm"]:before {  background: url(../img/shape/ico_pen_yellow.svg);}
@media screen and (min-width: 480px){
  [class*="btn_post"][class*="content"]:hover {
    color: #fff;
    background: #3f7cc4;
  }
  [class*="btn_post"][class*="cgm"]:hover {
    color: #fff;
    background: #f98623;
  }
}

/* 契約書テンプレート */
[class*="btn_post"][class*="format"] {
  color: #37baa6;
  border-color: #37baa6;
  width: 100%;
  background: #fff;
}
[class*="btn_post"][class*="format"]:before {  background: url(../img/shape/ico_search_format.svg);}
@media screen and (min-width: 480px){
  [class*="btn_post"][class*="format"]:hover {
    color: #fff;
    background: #37baa6;
  }
  [class*="btn_post"][class*="format"]:hover:before {  background: url(../img/shape/ico_search_format_white.svg);}
}

[class*="btn_post"][class*="head"] {
  width: 124px;
  height: 28px;
}
[class*="btn_post"][class*="head"] {
  color: #fff;
  background: #7f8eca;
  border-color: #7f8eca;
}
[class*="btn_post"][class*="head"]:before {  background: url(../img/shape/ico_pen_white.svg);}

/* ホバー共通 */
[class*="btn_post"]:hover:before {
  background: url(../img/shape/ico_pen_white.svg);
}
@media screen and (min-width: 480px){
  aside [class*="btn_post"]:hover {
    border-color: #fff;
  }
}

/* 関連知識出品 */
[class*="area_post"][class*="aside"][class*="relation"]{
  background: #f3f3f3;
  margin: 0;
  padding: 16px;
}
[class*="area_post"][class*="aside"][class*="relation"] .ttl {
  font: 500 12px/1.5em 'noto sans japanese',sans-serif;
  margin: 0 0 10px;
}
[class*="area_post"][class*="aside"][class*="relation"] .text:after{
  width: 32px; height: 32px;
  top: 2px;
  right: 10px;
}

/* ! 設定サイドバー ———————————————————————————————————————————————————————————— */
.main_settings aside {
  margin: 0 60px 0 0;
}
.area_nav_settings {

}

@media screen and (max-width: 1000px){
  .main_settings aside{
    display: none;
  }
}

/* リスト */
.list_nav_settings > li{
  position: relative;
}
.list_nav_settings > li + li {
  margin: 4px 0 0;
}
.list_nav_settings a {
  font: 400 13px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: 50px;
  padding: 0 16px 0 48px;
  background: #fff;
  cursor: pointer;
  position: relative;
}
.list_nav_settings a:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}
@media screen and (min-width: 480px){
  .list_nav_settings a:hover {
    color: #43AC5D;
  }
}
.list_nav_settings .current a {
  background: #F7F9F9;
}
.list_nav_settings .current a:after {
  content: "";
  display: block;
  width: 4px;
  height: 100%;
  background: #000;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

/* 未登録 */
.list_nav_settings .unauth a{
  align-items: flex-start;
  padding-top: 10px;
}
.list_nav_settings > li.unauth:after{
  content: "未登録";
  color: #fff;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  background: #333;
  z-index: 1;
  display: inline-block;
  text-align: center;
  padding: 2px 10px;
  border-radius: 20px;
  height: 12px;
  position: absolute;
  bottom: 5px;
  left: 50px;
}


/* ! 投稿メディアサイドバー_コメント ———————————————————————————————————————————————————————————— */
.area_aside_comment {
  width: 100%;
  max-width: 240px;
  margin: 0 0 20px;
}
.aside_medium .area_aside_comment {
  max-width: 240px;
}
.area_aside_comment:nth-of-type(n + 2) {
  margin-top: 16px;
}
@media screen and (max-width: 1280px){
  .aside_medium .area_aside_comment {
    max-width: 220px;
  }
}
@media screen and (max-width: 1000px){
  .aside_medium .area_aside_comment {
    max-width: 100%;
    margin: 20px 0 0;
  }
}

/* コメントリスト */
.list_comment {
  display: flex;
  flex-direction: column-reverse;
}
.list_comment > li {
  padding: 16px 0;
  background: #fff;
}
.list_comment > li + li {
  border-top: 1px solid #F2F4FA;
}
.list_comment > li > article {
  display: flex;
  align-items: flex-start;
}
.list_comment .img {
  flex: 0 0 32px;
}
.list_comment .text {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  flex-direction: column;
}
.list_comment .name {
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 8px;
}
.list_comment .time_post {
  color: #B3C1C7;
  font: 300 12px/1.7em 'noto sans japanese',sans-serif;
  display: inline-block;
  margin: 0 0 0 8px;
}
.list_comment .comment {
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
}

.list_comment .action {
  display: flex;
  margin: 12px 0 0;
}
.list_comment .action [class*="btnarea"] {
  margin: 0 0 0 16px;
}
.list_comment .action .button_message{
  font-size: 12px;
  height: 28px;
  padding: 0 10px 0 30px;
}
.list_comment .action .button_message:before{
  left: 10px;
}


/* 匿名 */
.list_comment .name .anonymous {
  color: #666;
  font: 300 11px/1.5em 'Roboto','noto sans japanese',sans-serif;
}

/* 返信リスト */
.list_comment.reply {
  margin: 12px 0 0;
  flex-direction: column;
}
.list_comment.reply .img {
  flex: 0 0 26px;
}
.list_comment.reply [class*="thumb"][class*="_user"] {
  width: 18px;
  height: 18px;
}

/* ! コメント投稿 —————————————————————————————— */
.area_post_comment {
  margin: 0 0 10px;
}
.head_post_comment {
  display: flex;
  align-items: center;
  margin: 0 0 8px;
}
.head_post_comment .img {
  flex: 0 0 40px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.area_post_comment.unknown [class*="thumb"] {
  background: url(../img/img_gender_free.svg) no-repeat center center !important;
  background-size: cover !important;
}

.head_post_comment .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.head_post_comment .wrap_radio label:before,
.head_post_comment .wrap_radio label:after {
  left: 0;
  background: #fff;
}
.head_post_comment .wrap_radio label:before {
  border: 2px solid #E5E7EB;
}
.head_post_comment .wrap_radio label:after {
  border: 2px solid #51C96D;
  background: #fff url(../img/shape/shape_circle_green.svg) no-repeat center center
}
.head_post_comment input[type="radio"] + label {
  margin-right: 12px;
  height: 30px;
}
.head_post_comment [class*="btnarea"] {
  margin-top: 0 !important;
}

/* ボディ */
.body_post_comment textarea {
  vertical-align: bottom;
}
.body_post_comment [class*="btnarea"],
.area_modal .body_post_comment [class*="btnarea"]{
  margin: 10px 0 0;
}

/* 投稿ボタン */
input[type="submit"].button_submit_comment,
.button_submit_comment {
  color: #fff;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  display: block;
  padding: 8px;
  text-align: center;
  background: #7f8eca;
  border: 1px solid #7f8eca;
  border-radius: 4px;
  width: 100%;
  cursor: pointer;
}
@media screen and (min-width: 480px){
  input[type="submit"].button_submit_comment:hover{
    color: #7f8eca;
    background: #fff;
  }
}

/* 返信 */
.area_comment_post {
  margin: 24px 0 0;
}

/*
.area_comment_post .wrap_input {
  position: relative;
}
.area_comment_post .user {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0 0 2px;
  position: relative;
}
.area_comment_post .user [class*="btnarea"] {
  margin-left: auto;
}
.area_comment_post .user_post {
  color: #8B93B2;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  padding: 8px 18px 8px 0;
  cursor: pointer;
  position: relative;
}
.area_comment_post .user_post:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: blue;
  background: url(../img/shape/ico_down.svg) no-repeat center center;
  background-size: 8px 9px !important;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
*/


/* 返信フォーム  ーーーーーーーーーーーーーー*/
.list_comment .text .area_post_comment {
  margin: 20px 0 0;
}
.list_comment .head_post_comment .img {
  flex: 0 0 28px;
}
.name_reply {
  color: #999;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
  position: relative;
}
.name_reply span {
  background: #fff;
  display:inline-block;
  padding: 0 6px 0 0;
  position: relative;
  z-index: 1;
}
.name_reply:before {
  content: "";
  display: block;
  width: 100%;
  border-top: 1px dotted #999;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}



/* 投稿者変更 */
.area_change_user {
  padding: 16px;
  background: #fff;
  box-shadow: 0px 10px 10px 0px rgba(75,83,110,.2),0px 4px 20px 0px rgba(75,83,110,.1);
  border-radius: 12px;
  position: absolute;
  bottom: 99%;
  left: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
}
.area_comment_post .user_post.show + .area_change_user {
  pointer-events: all;
  opacity: 1;
}
.area_comment_post.unknown [class*="thumb"] {
  background: url(../img/img_gender_free.svg) no-repeat center center !important;
  background-size: cover !important;
}


/* 記入エリア */
.area_fillin {
  display: flex;
  align-items: flex-start;
  position: relative;
}

/* ファイルアップロード */
.area_upload_fillin {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  margin: 0 5px 0 0;
  position: relative;
  cursor: pointer;
}
.area_upload_fillin input[type="file"] {
  height: 40px;
}

/* アップロードボタン */
.area_upload_fillin label {
  position: absolute;
  top: 0;
  left: 0;
}
.button_upload_fillin {
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: #fff url(../img/shape/ico_clip_gray.svg) no-repeat center center;
  border-radius: 4px;
  border: 1px solid #f1f1f1;
  background-size: 20px 20px !important;
  cursor: pointer;
  position: relative;
}
@media screen and (min-width: 480px){
  .button_upload_fillin:hover {
    border-color: #2BCBAC;
  }
}
.area_upload_fillin input[type="file"] {
  opacity: 0;
}


/* カウント表示 */
.dot_list_count {
  color: #fff;
  font: bold 11px/1.5em 'Roboto','noto sans japanese',sans-serif;
  width: 14px;
  height: 14px;
  border-radius: 100px;
  background: #1184FF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -7px;
  position: relative;
  z-index: 2;
  cursor: pointer;
}
@media screen and (min-width: 480px){
  .dot_list_count:hover + .list_upload_fillin,
  .list_upload_fillin:hover {
    opacity: 1;
    pointer-events: all;
  }
}

/* 選択されたファイルリスト */
.list_upload_fillin {
  margin-top: -7px;
  position: relative;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  width: 200px;
}
.list_upload_fillin p {
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  background: #fff;
  padding: 5px 20px 5px 10px;
  box-shadow: 0px 1px 4px 0px rgba(0,0,0,.2);
  position: relative;
}
.list_upload_fillin .button_remove {
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/shape/ico_times.svg);
  background-size: 6px 6px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  right: 0;
  cursor: pointer;
  transform: translateY(-50%);
  opacity: .3;
}
@media screen and (min-width: 480px){
  .list_upload_fillin .button_remove:hover {
    opacity: 1;
  }
}


/* メッセージ投稿エリア */
.area_fillin .area_post_message {
  flex: 1 1 auto;
  min-width: 10px;
}
.area_fillin .area_post_message .textarea_post {
  border: none;
}

/* フォーム */
.textarea_post {
  font: 300 13px/1.5em 'Roboto','noto sans japanese',sans-serif;
  min-height: auto;
  padding: 8px;
  max-height: 100px;
  height: auto;
  border-color: #E5E6EA;
}



/* ! エディターコントロール ———————————————————————————————————————————————————————————— */
/* 共通 */
.area_control_editor > article {
  background: #fff;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0px 0px 1px 0px rgba(0,0,0,.3);
}
.area_control_editor > article + article {
  margin: 10px 0 0;
}
.area_control_editor .head,
.area_control_editor .cnt {
  padding: 18px;
}

/* ヘッド */
.area_control_editor .head {
  border-bottom: 1px solid #F2F4FA;
}
.area_control_editor .ttl_aside {
  margin: 0;
}

/* 反映ボタン類 */
.area_reflect .btnarea {
  display: flex;
  flex-wrap: nowrap;
  margin: -3px;
}
.area_reflect .btnarea [class*="btn_"] {
  font-size: 14px;
  padding: 0 12px;
  height: 40px;
  margin: 3px;
}
.area_reflect .btnarea [class*="btn_"][class*="preview"] {
  font-size: 12px;
  flex: 0 0 90px;
}
.area_reflect [class*="btnarea"][class*="text"] {
  margin: 20px 0 20px;
}


/* カテゴリー */
.area_control_editor .control_category [class*="btnarea"] {
  margin: 12px 0 0;
}

/* フォーム */
.area_control_editor input,
.area_control_editor select {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  height: 30px;
  padding: 0 12px;
}
.area_control_editor label {
  width: 100%;
  height: 28px;
}


/* ! ============================================================
　コメントをするには会員登録が必要
============================================================ */
.area_register_comment {
  padding: 8px;
  position: relative;
  margin: -10px 0 10px;
}
.area_register_comment > .text {
  width: 100%;
  height: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
  border: 1px solid #ccc;
  background: rgba(255,255,255,.7);
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.area_register_comment .description {
  font: 500 14px/1.4em 'noto sans japanese',sans-serif;
}
.area_register_comment [class*="btn_"] {
  font-size: 13px;
  height: 28px;
  margin: 8px 0 0;
}

/* コメントエリア モック */
.area_register_comment .area_post_comment {
  margin-bottom: 0;
}
.area_register_comment .area_post_comment textarea {
  height: 140px;
}

@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;
  }
}

@charset "UTF-8";

/* ! トップページスタイル ————————————————————————————————————————————————————————————

質問一覧_トップ
カテゴリー別_トップ
専門家リスト_トップ

———————————————————————————————————————————————————————————— */
/* ! ビュー_ホーム ———————————————————————————————————————————————————————————— */
.area_view_home {
  width: 100%;
}


/* ! ヘッド_ビュー_ホーム —————————————————————————————— */
.head_view_home {
  margin: 0 0 20px;
}


/* ! カウントエリア ———————————————————————————————————————————————————————————— */
.area_nav_count {
}
/* リスト */
.list_nav_count {
  display: flex;
  align-items: flex-start;
  margin: -10px;
}
.list_nav_count > li {
  padding: 10px;
  display: flex;
  flex-direction:column;
  flex: 1 1 0%;
  min-width: 10px;
}
.list_nav_count article{
  flex: 1 1 auto;
  min-height: 10px;
  display: flex;
  flex-direction:column;
}
@media screen and (min-width: 1200px) and (max-width: 1280px){
  .list_nav_count {
    margin: -4px;
  }
  .list_nav_count > li {
    padding: 4px;
  }

}
@media screen and (max-width: 1200px){
  .list_nav_count {
    flex-wrap: wrap;
  }
  .list_nav_count > li {
    width: 50%;
    flex: 1 1 auto;
  }
}
@media screen and (max-width: 600px){
  .list_nav_count {
    margin: -8px -6px;
  }
  .list_nav_count > li {
    padding: 8px 6px;
  }
}
@media screen and (max-width: 480px){
  .list_nav_count {
    margin: -8px -4px;
  }
  .list_nav_count > li {
    padding: 8px 4px;
  }
}


/* ! ヘッド_カウントエリア —————————————————————————————— */
.head_nav_count {
  margin: 0 0 10px;
  flex: 1 1 auto;
  min-height: 10px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: flex-start;
}
.head_nav_count .ttl {
  font: 600 16px/1em 'noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  position: relative;
  padding: 0 0 0 36px;
  width: auto;
}
.head_nav_count .ttl:before {
  content: "";
  display: block;
  border-radius: 3px;
  width: 30px;
  height: 30px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-52%);
}
.head_nav_count .sub {
  font: 500 13px/1.3em 'noto sans japanese',sans-serif;
  text-align: left;
  margin: 12px 0 0;
}
@media screen and (min-width: 1200px) and (max-width: 1280px){
  .head_nav_count .ttl {
    padding: 0 0 0 32px;
    font-size: 15px;
  }
  .head_nav_count .ttl:before {
    width: 28px;
    height: 28px;
  }
}
@media screen and (max-width: 1200px){
  .head_nav_count .ttl {
    font-size: 14px;
  }
}
@media screen and (max-width: 374px){
  .head_nav_count .ttl {
    padding: 0 0 0 32px;
  }
  .head_nav_count .sub {
    font-size: 12px;
  }
}
@media screen and (max-width: 360px){
  .head_nav_count .ttl:before {
    width: 24px;
    height: 24px;
  }
  .head_nav_count .ttl{
    font-size: 13px;
    padding: 0 0 0 26px;
  }
}
@media screen and (max-width: 359px){  
  .head_nav_count .sub {
    font-size: 11px;
  }
}

/* 個別 */
.count_favorite .ttl:before {  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_favorite.svg");}
.count_contents .ttl:before {  background:#DD5176 url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_line_white_contents.svg");}
.count_format .ttl:before {  background:#37baa6 url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_line_white_format.svg");}
.count_cgm .ttl:before {  background:#f98623 url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_line_white_cgm.svg");}
.count_column .ttl:before {  background:#3f7cc4 url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_line_white_column.svg");}

/* 個別ホバー */
.count_favorite .head_nav_count .ttl:hover { color: #40A55A;}
.count_column .head_nav_count .ttl:hover { color: #3f7cc4;}
.count_cgm .head_nav_count .ttl:hover { color: #f98623;}
.count_contents .head_nav_count .ttl:hover { color: #DD5176;}
.count_format .head_nav_count .ttl:hover { color: #37baa6;}

/* 無料表示 */
.count_format .ttl:after {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_free_format.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: -24px;
  right: -20px;
}
@media screen and (max-width: 1200px){
  .count_format .ttl:after {
    top: -20px;
    right: -28px;
  }
}
@media screen and (max-width: 1000px){
  .count_format .ttl:after {
    top: -15px;
  }
}
@media screen and (max-width: 480px){
  .count_format .ttl:after {
    top: -25px;
    right: -18px;
  }
}
@media screen and (max-width: 359px){
  .count_format .ttl:after {
    right: -15px;
  }
}


/* 売り上げ */
.list_nav_count .earning {
  font: 600 14px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
    padding: 4px 2px;
  background: #f4f4f4;
  border: 1px solid #ddd;
  margin: 8px 0 0 -3px;
  border-radius: 4px;
  width: 100%;
}
.list_nav_count .earning:before,
.list_nav_count .earning:after {
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  letter-spacing: 0;
}
.list_nav_count .earning:before {
  content: attr(data-before)":";
  margin: 0 2px 0 0;
}
.list_nav_count .earning:after {
  content: attr(data-after)"";
  margin: 0 0 0 2px;
}
@media screen and (max-width: 374px){
  .list_nav_count .earning {
    font-size: 13px;
  }
}



/* ! ボディ_カウントエリア —————————————————————————————— */
/* ボタンエリア */
.body_nav_count [class*="btnarea"] {
  width: 100%;
}
.body_nav_count [class*="btn_"] {
  font: 500 13px/1.3em 'noto sans japanese',sans-serif;
  height: 30px;
  padding: 0;
}
.body_nav_count [class*="btn_"] + [class*="btn_"]{
  margin: 4px 0 0;
}
.body_nav_count [class*="btn_"][class*="summary"]{
  font-weight: 400;
  border: 1px solid #A4A7B3;
  color: #555;
  background: #fff;
  flex-direction: row;
}
.body_nav_count [class*="btn_"][class*="summary"] span{
  font: 600 1.2em/1em 'Roboto','noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  .body_nav_count [class*="btn_"][class*="summary"]:hover{
    border-color: #444;
    color: #000;
  }
}
@media screen and (max-width: 480px){
  .body_nav_count [class*="btn_"] {
    font-size: 12px;
  }
}


/* 知識を買う／売るレイアウト */
.body_nav_count .layout {
  display: flex;
  margin: 0 -2px;
  flex: 1 1 auto;
  min-width: 10px;
}
.body_nav_count .layout > * {
  margin: 0 2px;
}
.body_nav_count .layout [class*=btn_]+[class*=btn_] {
  margin: 0 2px 0;
}
.body_nav_count .layout + [class*=btn_] {
  margin: 4px 0 0;
}
[class*=btn_post][class*=skill].sell,
[class*=btn_post][class*=skill].buy {
  font-size: 14px;
  position: relative;
}
[class*=btn_post][class*=skill].sell:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_knowhow_post.svg");
  width: 17px;
  height: 17px;
}
[class*=btn_post][class*=skill].buy:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_search_red.svg");
  width: 14px;
  height: 14px;
}
[class*=btn_post][class*=skill].buy:after {
  content: "";
  display: block;
  width: 56px;
  height: 20px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_free_button.svg") no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: -10px;
  right: -10px;
  transform : rotate(10deg) ;
  transform-origin : 50% 50% ;
}
[class*=btn_post][class*=cgm].question:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_question.svg");
}
[class*=btn_post][class*=cgm].answer:before {
  width: 13px;
  height: 13px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_answer.svg");
}
@media screen and (min-width: 480px){
  [class*=btn_post][class*=skill].buy:hover:before {background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_search_format_white.svg");}
  [class*=btn_post][class*=cgm].question:hover:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_question_white.svg");}
  [class*=btn_post][class*=cgm].answer:hover:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_answer_white.svg");}
}

/* ! ボディ_ビュートップ —————————————————————————————— */
.body_view_home {
  display: flex;
  margin: 0 -10px;
}
.body_view_home > * {
  flex: 1 1 0;
  padding: 0 10px;
  width: 50%;
}
@media screen and (max-width: 1080px){
  .body_view_home {
    margin: 0 -6px;
  }
  .body_view_home > * {
    padding: 0 6px;
  }
}
@media screen and (max-width: 767px){
  .body_view_home {
    flex-wrap: wrap;
    margin: 0;
  }
  .body_view_home > * {
    flex: 0 0 100%;
    padding: 0;
  }
  .body_view_home > * + * {
    margin: 40px 0 0;
  }
}


/* ボックス */
.box_view_home .head {
  margin: 0 0 4px;
  background: #f1f1f1;
  padding: 10px 16px;
}



/* ! ホーム共通タイトル —————————————————————————————— */
.ttl_home {
  font: 600 18px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 480px){
  .ttl_home {
    font-size: 16px;
  }
}



/* ! 新着情報エリア ———————————————————————————————————————————————————————————— */
.area_info_top {
  flex: 1 1 auto;
  min-width: 10px;
}
.area_info_top [class*="area_scroll"] {
  height: 160px;
}

/* タブ */
.area_info_top .list_tab_panel_cat{
  margin: 0;
}
.area_info_top .area_head_tab{
  margin: 0 0 2px;
}
@media screen and (max-width: 1180px){
  .area_info_top .list_tab_button_cat a{
    padding: 6px 7px;
  }
}
@media screen and (max-width: 1080px) and (min-width: 1000px){
  .area_info_top .list_tab_button_cat a{
    font-size: 11px;
    padding: 6px 5px;
  }
}
@media screen and (max-width: 840px) and (min-width: 767px){
  .area_info_top .list_tab_button_cat a{
    font-size: 11px;
    padding: 6px 5px;
  }
}

/* リスト */
.list_info_top {
  padding: 0 6px 10px 0;
}
.list_info_top > li {
  padding: 8px 0;
}
.list_info_top > li + li{
  border-top: 1px solid #eee;
}
.list_info_top article {
  cursor: pointer;
  transition: all 0.1s ease;
  position: relative;
}
.list_info_top article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.list_info_top .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_info_top .ttl {
  font: 600 13px/1.3em 'noto sans japanese',sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.list_info_top .description {
  color: #5d5d5d;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  margin: 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 480px){
  .list_info_top article:hover .ttl {
    color: #43AC5D;
  }
}


/* ! 質問一覧_トップ ———————————————————————————————————————————————————————————— */
.area_question_top {
  width: 100%;
}
.area_question_top [class*="area_scroll"] {
  height: 160px;
  max-height: 160px;
  height: auto;
}

/* タブ */
.area_question_top .list_tab_panel_cat{
  margin: 0;
}
@media screen and (max-width: 1180px){
  .area_question_top .list_tab_button_cat a{
    padding: 6px 7px;
  }
}
@media screen and (max-width: 1080px) and (min-width: 1000px){
  .area_question_top .list_tab_button_cat a{
    font-size: 11px;
    padding: 6px 6px;
  }
}
@media screen and (max-width: 840px) and (min-width: 767px){
  .area_question_top .list_tab_button_cat a{
    font-size: 11px;
    padding: 6px 6px;
  }
}

.area_question_top .list_community > li > article {
  padding: 8px 8px 8px 0;
}
.area_question_top .list_community > li > article:before {
  width: 16px;
  height: 16px;
  top: 9px;
  display: none;
}
.area_question_top .list_community .ttl {
  font-size: 13px;
  line-height: 1.3em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.area_question_top .list_community .count {
  font-size: 14px;
  margin: 3px 0 2px;
}
.area_question_top .list_community .count:after {
  font-size: 11px;
}
.area_question_top .status_community {
  justify-content: flex-start;
}
.area_question_top .list_community .list_cat {
  margin: -2px -8px;
}
.area_info_top .list_tab_button_cat,
.area_question_top .list_tab_button_cat {
  margin-bottom: 10px;
}

.area_question_top .best-answer_decision .count:before {
  padding: 2px 4px 2px 16px;
  background-position: left 4px center;
}


/* ! 投稿一覧_トップ ———————————————————————————————————————————————————————————————————————————————————————— */
/* タブ */
#contentsList,
.area_post_cat {
  width: 100%;
}
.area_post_cat + .area_post_cat {
  margin-top: 20px !important;
}
.head_post_cat {
  margin: 0 0 16px;
  background: #f4f4f4;
  padding: 10px 16px;
}


/* 個別 */
.area_post_cat [class*="list_media"].min article,
.area_post_cat [class*="list_cnt"].min article,
.area_post_cat [class*="list_fmt"].min article{
  background: #fff;
  padding: 16px;
}


/* ! パネル ———————————————————————————————————————————————————————————— */
.area_post_cat .area_panel_post {
}


/* ! ヘッド_パネル —————————————————————————————— */
.head_panel_post {
  display: flex;
  margin: 0 0 10px
}
.head_panel_post .ttl {
  font: 600 16px/1em 'noto sans japanese',sans-serif;
}
.head_panel_post [class*="btnarea"] {
  margin-left: auto;
}
@media screen and (max-width: 480px){
  .head_panel_post {
    align-items: flex-start;
  }
  .head_panel_post .ttl{
    font-size: 15px;
  }
  .head_panel_post [class*="btnarea"] {
    margin-top: 2px;
  }
}
@media screen and (max-width: 360px){
  .head_panel_post{
    flex-direction:column;
  }
}

.area_post_cat .area_panel_post + .area_panel_post {
  margin: 30px 0 0;
}
.area_post_cat .head {
  margin: 0 0 10px;
  display: flex;
  justify-content: flex-start;
}
.area_post_cat .cnt {
  position: relative;
}
.area_post_cat .cnt:before,
.area_post_cat .cnt:after {
/*   content: ""; */
  display: block;
  width: 20px;
  height: 100%;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 0;
  z-index: 1;
  transition: all 0.1s ease;
}
.area_post_cat .cnt:before {
  background: -moz-linear-gradient(left, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0) 100%);
  background: -webkit-linear-gradient(left, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0.4) 0%,rgba(255,255,255,0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=1 );
  left: 0;
  opacity: 0;
}
.area_post_cat .cnt:after {
  background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 100%);
  background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 100%);
  background: linear-gradient(to right, rgba(255,255,255,0) 0%,rgba(255,255,255,0.4) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fff', endColorstr='#fff',GradientType=1 );
  right: 0;
}
.area_post_cat .cnt.scroll_now:before {
  opacity: 1;
}
.area_post_cat .cnt.scroll_end:after {
  opacity: 0;
}


/* ! 一覧へボタン ============================== */
.area_post_cat .cnt .btnarea {
  margin: 10px 0 0;
}
.area_post_cat .cnt [class*="btn_"] {
  color: #7f8eca;
  background: transparent;
  width: 100%;
  height: 36px;
  border-color: rgba(127,142,202,.3);
}
@media screen and (min-width: 480px){
  .area_post_cat .cnt [class*="btn_"]:hover {
    background: #fff;
    border-color: rgba(127,142,202,1);
  }
}

/* 個別 */
.area_post_cat .cnt [class*="btn_"][class*="content"]{
  color: #fff;
  background: #3f7cc4;
  border-color: #3f7cc4;
}
.area_post_cat .cnt [class*="btn_"][class*="book"]{
  color: #fff;
  background: #dd5176;
  border-color: #dd5176;
}
.area_post_cat .cnt [class*="btn_"][class*="format"]{
  color: #fff;
  background: #37baa6;
  border-color: #37baa6;
}
@media screen and (min-width: 480px){
  .area_post_cat .cnt [class*="btn_"][class*="content"]:hover{
    color: #3f7cc4;
    background: #fff;
  }
  .area_post_cat .cnt [class*="btn_"][class*="book"]:hover{
    color: #dd5176;
    background: #fff;
  }
  .area_post_cat .cnt [class*="btn_"][class*="format"]:hover{
    color: #37baa6;
    background: #fff;
  }
}


/* スクロール */
.area_post_cat .area_scroll_hol::-webkit-scrollbar {
  height: 8px;
}
.area_post_cat .area_scroll_hol::-webkit-scrollbar-track {
  border-radius: 8px;
	background: rgba(255,255,255,.2);
}
.area_post_cat .area_scroll_hol::-webkit-scrollbar-thumb {
  border-radius: 8px;
	background: rgba(179,193,199,.3);
}
@media screen and (min-width: 480px){
  .area_post_cat .area_scroll_hol::-webkit-scrollbar-thumb:hover {
  	background: rgba(179,193,199,1);
  }
}




/* ! 専門家リスト ———————————————————————————————————————————————————————————— */
.area_expert_top,
area_expert {
  width: 100%;
  margin: 20px 0 0;
}
.head_expert_top {
  margin: 0 0 20px;
  display: flex;
  align-items: baseline;
  background: #f4f4f4;
  padding: 10px 16px;
}
.head_expert_top .btnarea {
  margin: 0 0 0 auto;
}
.area_expert_top .area_recommend_expert{
  margin: 0;
}
/*
.area_expert_top .area_head_tab {
  margin: 0 0 20px;
}
.area_expert_top .list_tab_panel_cat {
  min-height: 220px;
}
.area_expert_top .list_user_card > li {
  max-width: 160px;
}
*/


/* ! ====================================================================================================
　■ トップ＿パターンA
==================================================================================================== */
.body_guest_typea.area_main_layout{
  margin: 30px 0;
}
[class*="area_view_guest_"]{
  width: 100%;
}
[class*="area_view_guest_"] > div{
  width: 100%;
}
.head_view_guest_typea .copy{
  margin: 0 0 10px;
}
.head_view_guest_typea img{
  width: 100%;
}
.head_view_guest_typea .description{
  font: 400 15px/1.5em 'noto sans japanese' , sans-serif;
}

/* ! 検索エリア ============================== */
.area_search_guest_typea{
  padding: 20px;
  background: #F2F3F5;
  margin: 20px 0 0;
}
.area_search_guest_typea .ttl{
  font: 600 18px/1.4em 'noto sans japanese' , sans-serif;
  margin: 0 0 16px;
  text-align: center;
}
@media screen and (max-width: 640px){
  .area_search_guest_typea{
    padding: 16px 10px;
    margin: 10px 0 0;
  }
  .area_search_guest_typea .ttl{
    text-align: left;
  }
  .head_search_guest_typea{
    padding: 0 0 0 40px
  }
}

/* 注目のタグ */
.area_search_guest_typea .area_tag{
  padding: 0 0 0 50px;
  position: relative;
}
.area_search_guest_typea .area_tag:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/seal/ico_seal_featured.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 64px;
  height: 64px;
  position: absolute;
  left: -24px;
  top: -34px;
}
.area_search_guest_typea .list_tag a,
.area_search_guest_typea .list_tag p{
  height: 24px;
  font: 500 14px/1.6em 'noto sans japanese',sans-serif;
}
.area_search_guest_typea .list_tag a:before,
.area_search_guest_typea .list_tag p:before{
  border-width: 12px 0 12px 8px;
}
@media screen and (max-width: 640px){
  .area_search_guest_typea .area_tag{
    padding: 0;
  }
  .area_search_guest_typea .area_tag:before{
    width: 50px;
    height: 50px;
    left: -50px;
  }
}

/* 検索input */
.area_search_guest_typea .wrap_input{
  margin: 15px 0 0;
}
.area_search_guest_typea input:not([type=checkbox]){
  border: none;
  height: 40px;
  padding-right: 50px;
}
.area_search_guest_typea input::-webkit-input-placeholder { color: #808598;}
.area_search_guest_typea input:-ms-input-placeholder { color: #808598;}
.area_search_guest_typea input::-moz-placeholder { color: #808598;}
.area_search_guest_typea input:not([type=checkbox]).button_search {
  display: block;
  width: 20px;
  height: 20px;
  border: none;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_search_dark.svg") no-repeat center center;
  background-size: contain!important;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  cursor: pointer;
}

/* ! 注目の専門家 ============================== */
[class*="area_professional_guest_"][class*="typea"] {
  margin: 20px 0 0;
}
[class*="area_professional_guest_"] .ttl{
  color: #172858;
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 12px;
  position: relative;
  display: flex;
  align-items: center;
}
[class*="area_professional_guest_"] .ttl:after{
  content: "";
  background: #E5E6EA no-repeat center center !important;
  background-size: contain !important;
  width: 100%;
  height: 1px;
  display: block;
  flex: 1 1 0;
  margin: 0 0 0 10px;
}
[class*="area_professional_guest_"] [class*=btnarea]{
  margin: 20px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid #E5E6EA;
}
@media screen and (max-width: 480px){
  [class*="area_professional_guest_"] .ttl{
    font-size: 18px;
  }
}

/* リスト＿専門家 */
[class*="list_professional_guest_"]{
  margin: -10px;
  display: flex;
  flex-wrap: wrap;
}
[class*="list_professional_guest_"] > li{
  padding: 10px;
  width: 25%;
}
[class*="list_professional_guest_"] article{
  display: flex;
  align-items: center;
  position: relative;
}
[class*="list_professional_guest_"] article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
[class*="list_professional_guest_"] [class*="thumb"]{
  width: 50px;
}
[class*="list_professional_guest_"] .img{
  margin: 0 10px 0 0;
  display: flex;
  flex-direction:column;
}
[class*="list_professional_guest_"] .name{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
}
[class*="list_professional_guest_"] .company{
  color: #787C7B;
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
  margin: 8px 0 0;
}
[class*="list_professional_guest_"] .search{
  color: #172858;
  font: 600 13px/1.4em 'noto sans japanese' , sans-serif;
}
@media screen and (min-width: 480px){
  [class*="list_professional_guest_"] article:hover .name{
    color: #51C96E;
  }
}
@media screen and (max-width: 1080px){
  [class*="list_professional_guest_"] .name{
    font-size: 15px;
  }
  [class*="list_professional_guest_"] > li{
    width: 50%;
  }
}
@media screen and (max-width: 1000px){
  [class*="list_professional_guest_"] > li{
    width: 25%;
  }
}
@media screen and (max-width: 860px){
  [class*="list_professional_guest_"] > li{
    width: 50%;
  }
}
@media screen and (max-width: 768px){
  [class*="list_professional_guest_"]{
    margin: -6px;
  }
  [class*="list_professional_guest_"] > li{
    width: 25%;
    padding: 6px;
  }
}
@media screen and (max-width: 640px){
  [class*="list_professional_guest_"] > li{
    width: 50%;
  }
}

/* ! アサイド ============================== */
.area_trial_aside {
  width: 100%;
}
/* リスト＿トライアル */
.list_trial{
  margin: -1px;
  display: flex;
  flex-wrap: wrap;
}
.list_trial > li{
  padding: 1px;
  width: 100%;
  display: flex;
  flex-direction:column;
}
.list_trial article{
  color: #fff;
  background: #37BAA7;
  padding: 16px;
  position: relative;
  border: 2px solid #37BAA7;
  flex: 1 1 auto;
  transition: .2s;
}
.list_trial article:before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 10px 10px;
  border-color: transparent transparent #fff transparent;
  position: absolute;
  right: 5px;
  bottom: 5px;
  transition: .1s;
}
.list_trial article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.list_trial .ttl{
  font: 900 24px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
}
.list_trial .ttl:after{
  content: "無料";
  color: #37BAA7;
  font: 900 18px/1em 'noto sans japanese' , sans-serif;
  background: #fff;
  padding: 4px 10px;
  margin: 0 0 0 auto;
  border: 1px solid #37BAA7;
}
.list_trial .description{
  font: 400 13px/1.6em 'noto sans japanese' , sans-serif;
}
.list_trial .description span{
  font-weight: 900;
}

.list_trial .howmuch article{
  background: #00C057;
  border-color: #00C057;
}
.list_trial .capital article{ 
  background: #00B2C7;
  border-color: #00B2C7;
}
.list_trial .howmuch .ttl:after{ color: #00C057; border-color:#00C057; }
.list_trial .capital .ttl:after{ color: #00B2C7; border-color:#00B2C7;}

@media screen and (min-width: 480px){
/*
  .list_trial article:hover{
    opacity: .9;
  }
*/
  .list_trial article:hover{
    color: #37BAA7;
    background: #fff;
  }
  .list_trial .howmuch article:hover{ color: #00C057;}
  .list_trial .capital article:hover{ color: #00B2C7;}
  .list_trial article:hover:before{ border-color: transparent transparent #37BAA7 transparent;}
  .list_trial .howmuch article:hover:before{ border-color: transparent transparent #00C057 transparent;}
  .list_trial .capital article:hover:before{ border-color: transparent transparent #00B2C7 transparent;}
/*
  .list_trial article:hover:before{
    right: 3px;
    bottom: 3px;
  }
  .list_trial article:hover .ttl{
    text-decoration: underline;
  }
*/
}

@media screen and (max-width: 1000px){
  .list_trial > li{
    width: 33.3333%;
  }
  .list_trial .ttl{
    font-size: 20px;
  }
  .list_trial .ttl:after{
    font-size: 16px;
  }
}
@media screen and (max-width: 660px){
  .list_trial > li{
    width: 50%;
  }
  .list_trial > li.template{
    width: 100%;
  }
}
@media screen and (max-width: 560px){
  .list_trial article{
    padding: 10px;
  }
}
@media screen and (max-width: 360px){
  .list_trial .ttl{
    font-size: 18px;
  }
  .list_trial .ttl:after{
    font-size: 14px;
    padding: 4px 6px;
  }
}

/* ! ====================================================================================================
　■ トップ＿パターンB
==================================================================================================== */

.area_main_layout.full{
  width: 100%;
}

/* ! ヘッダ ============================== */
.area_guest_heading_search{
  display: flex;
  margin: 0 0 0 auto;
}
.area_guest_heading_search [class*="btnarea"] {
  margin-left: 0;
}
.area_guest_heading_search [class*=wrap_input]{
  margin: 0 15px 0 auto;
}
.area_guest_heading_search input:not([type=checkbox]){
  height: 32px;
  border-color: #AABBCC;
  padding-right: 30px;
}
.area_guest_heading_search input:not([type=checkbox]).button_search {
  display: block;
  width: 16px;
  height: 16px;
  border: none;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_search_gray.svg") no-repeat center center;
  background-size: contain!important;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  cursor: pointer;
}
@media screen and (max-width: 860px){
  .area_guest_heading_search{
    flex-direction:column-reverse;
  }
  .area_guest_heading_search [class*=wrap_input]{
    margin: 4px 0 0;
  }
  .area_guest_heading_search form{
    width: 100%;
  }
}

/* !  ============================== */
.body_guest_typeb{
  margin: 40px 0;
}
@media screen and (max-width: 1180px){
  .head_view_guest_typeb .layout_auto + .layout_fix.wide{
    margin: 0 0 0 30px;
  }
}
@media screen and (max-width: 960px){
  .head_view_guest_typeb.layout{
    display: block;
  }
  .head_view_guest_typeb .layout_auto + .layout_fix.wide{
    margin: 20px 0 0;
  }
}
@media screen and (max-width: 560px){
  .body_guest_typeb{
    margin: 30px 0;
  }
}

/* ! コピー ============================== */
.head_view_guest_typeb img{
  width: 100%;
  max-width: 540px;
}
.head_view_guest_typeb .description{
  font: 400 16px/1.5em 'noto sans japanese' , sans-serif;
  margin: 10px 0 0;
}


/* ! 注目の専門家 ============================== */
[class*="list_professional_guest_"][class*="typeb"]{
  margin: -4px;
}
[class*="list_professional_guest_"][class*="typeb"] > li{
  width: 50%;
  padding: 4px;
}
[class*="list_professional_guest_"][class*="typeb"] .company{
  color: #1A1311;
  font: 500 11px/1em 'noto sans japanese' , sans-serif;
}
@media screen and (max-width: 960px){
  [class*="list_professional_guest_"][class*="typeb"] > li{
    width: 33.3333%;
  }
}
@media screen and (max-width: 560px){
  [class*="list_professional_guest_"][class*="typeb"] > li{
    width: 50%;
  }
}

/* ! 事業相談・記事&コラム・知識を買う／売る ============================== */
.body_view_guest_typeb{
  margin: 40px 0 0;
}

/* リスト */
.list_main_cat{
  display: flex;
  flex-wrap: wrap;
  margin: -15px;
}
.list_main_cat > li{
  width: 33.333%;
  padding: 15px;
  display: flex;
  flex-direction:column;
}
.head_main_cat{
  flex: 1 1 auto;
}
.head_main_cat .ttl{
  font: 600 28px/1em 'noto sans japanese' , sans-serif;
  position: relative;
  padding: 0 0 0 50px;
}
.head_main_cat .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_ttl/ico_ttl_cgm.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 40px;
  height: 40px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.head_main_cat .copy{
  color: #ec8a3f;
  font: 900 22px/1em 'noto sans japanese' , sans-serif;
  margin: 16px 0 0;
}
.head_main_cat .copy span{
  font: 900 26px/1em 'noto sans japanese' , sans-serif;
  position: relative;
}
.head_main_cat .copy span:before{
  content: "";
  background: #F29F3E;
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
}
.column .head_main_cat .ttl:before{ background: url(../img/shape/ico_ttl/ico_ttl_column.svg);}
.store .head_main_cat .ttl:before{ background: url(../img/shape/ico_ttl/ico_ttl_store.svg);}
.column .head_main_cat .copy{ color: #3F7CC4;}
.store .head_main_cat .copy{ color: #DD5176;}
.column .head_main_cat .copy span:before{ background: #3F7CC4;}

@media screen and (max-width: 1180px){
  .list_main_cat{
    margin: -8px;
  }
  .list_main_cat > li{
    padding: 8px;
  }
  .head_main_cat .ttl{
    font-size: 22px;
  }
  .head_main_cat .copy{
    font-size: 18px;
  }
  .head_main_cat .copy span{
    font-size: 20px;
  }
}
@media screen and (max-width: 980px){
  .head_main_cat .ttl{
    font-size: 18px;
  }
  .head_main_cat .copy{
    font-size: 16px;
    margin: 10px 0 0;
  }
  .head_main_cat .copy span{
    font-size: 18px;
  }
}
@media screen and (max-width: 900px) and (min-width: 768px){
  .list_main_cat > li{
    width: 100%;
  }
  .head_main_cat{
    display: flex;
    align-items: baseline;
  }
  .head_main_cat .copy{
    margin: 0 0 0 20px;
  }
}

/* ボタンエリア */
.body_main_cat{
  margin: 16px 0 0;
}
.body_main_cat [class*=btn_action]{
  border-radius: 3px;
}
@media screen and (max-width: 1280px){
  .body_main_cat [class*=btn_action]{
    padding-left: 24px;
    font-size: 13px;
  }
  .body_main_cat [class*=btn_action]:before{
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 1080px){
  .body_main_cat.layout{
    display: block;
  }
  .body_main_cat [class*=btn_action]{
    max-width: none;
    font-size: 14px;
  }
  .body_main_cat [class*="btn_action"] + [class*="btn_action"]{
    margin: 4px 0 0;
  }
}
@media screen and (max-width: 980px){
  .body_main_cat{
    margin: 10px 0 0;
  }
}
@media screen and (max-width: 900px) and (min-width: 768px){
   .body_main_cat.layout{
     display: flex;
   }
   .body_main_cat [class*="btn_action"] + [class*="btn_action"]{
    margin: 0 0 0 4px;
  }
}


@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";

/* !  ================================================== 
  
・お問い合わせ

- 契約書テンプレート　弁護士お問い合わせ
  
-------------------------------------------------- */

/* ———————————————————————————————————————————————————————————— 
 ! ■お問い合わせ入力ページ
———————————————————————————————————————————————————————————— */
.area_wrap_contact {
  width: 100%;
  max-width: 900px;
  margin: 0 auto 80px;
}

/* ! コンテンツ ———————————————————————————————————————————————————————————— */
.area_cnt_contact {
  margin: 60px 0 0;
}

@media screen and (max-width: 560px){
  .area_cnt_contact {
    margin: 40px 0 0;
  }
}

/* ! ヘッド_ —————————————————————————————— */
.head_cnt_contact {
  padding: 0 0 30px;
  margin: 0 0 30px;
  border-bottom: 1px solid #EEE;
}
.head_cnt_contact .ttl {
  font: 600 24px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
}
.head_cnt_contact .description {
  font: 300 13px/1.3em 'noto sans japanese',sans-serif;
}

@media screen and (max-width: 767px){
  .head_cnt_contact .ttl {
    font-size: 22px;
    margin: 0 0 4px;
  }
}
@media screen and (max-width: 480px){
  .head_cnt_contact {
    padding: 0 0 20px;
    margin: 0 0 20px;
  }
  .head_cnt_contact .ttl {
    font-size: 18px;
  }
}

/* ! フォーム——————————— */
.list_form_contact > li {
  display: flex;
}
[class*="list_form"][class*="contact"]{
  margin: 0 0 30px;
}

@media screen and (max-width: 767px){
  .list_form_contact > li{
    display: block;
    padding: 0 0 30px;
  }
}
@media screen and (max-width: 480px){
  .list_form_contact > li{
    padding: 0 0 20px;
  }
}

/* ! ヘッド —————————————————————————————— */
.head_form_contact {
  flex: 0 0 180px;
}
.head_form_contact .ttl {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  position: relative;
}
.head_form_contact .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: 767px){
  .head_form_contact{
    padding: 6px 0;
  }
}

/* ! ボディ —————————————————————————————— */
.body_form_contact {
  flex: 1 1 auto;
  min-width: 10px;
}
.body_form_contact > p {
  font: 400 16px/1em 'noto sans japanese',sans-serif;
}

/* ! ボタンエリア ——————————— */
.area_cnt_contact .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;
}
.area_cnt_contact .btnarea_step [class*="btn_"] {
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 44px;
  max-width: 300px;
  background: #51C96D;
  border: 1px solid #51C96D;
}
.area_cnt_contact .btnarea_step [class*="btn_"][class*="back"]{
  color: #C1C5D3;
  border-color: #ddd;
  background: transparent;
}

.area_cnt_contact .btnarea_step [class*="btn_"] + [class*="btn_"] {
  margin-left: 8px;
}

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

/* ———————————————————————————————————————————————————————————— 
 ! ■お問い合わせ完了ページ
———————————————————————————————————————————————————————————— */
.body_cnt_contact.complete{
  display: flex;
  flex-direction:column;
  align-items: center;
  max-width: 700px;
  margin: 60px auto;
}
.body_cnt_contact.complete h1{
  font: 600 32px/1.3em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 40px;
}
.body_cnt_contact.complete .description{
  font: 500 16px/1.5em 'noto sans japanese' , sans-serif;
  text-align: center;
}
.body_cnt_contact.complete .description + .description {
  margin: 20px 0 0;
}
.body_cnt_contact.complete [class*="btnarea"]{
  margin: 50px 0 0;
}

@media screen and (max-width: 767px){
  .body_cnt_contact.complete h1{
    font-size: 28px;
  }
  .body_cnt_contact.complete .description{
    font-size: 14px;
    text-align: left;
  }
  .body_cnt_contact.complete .description br {
    display: none;
  }
}
@media screen and (max-width: 480px){
  .body_cnt_contact.complete{
    margin: 40px auto;
  }
  .body_cnt_contact.complete h1{
    font-size: 24px;
    margin: 0 0 30px;
  }
  .body_cnt_contact.complete .description{
    font-size: 13px;
  }
  .body_cnt_contact.complete .description + .description {
    margin: 12px 0 0;
  }
}


/* ! --------------------------------------------------

- 契約書テンプレート　弁護士お問い合わせ

-------------------------------------------------- */
.layout-max-width-600 {
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}
.area_contact_format > .head {
  display: flex;
}
.area_contact_format > .head > .img {
  flex: 0 0 120px;
  width: 120px;
  height: 120px;
  border: 1px solid #ddd;
  border-radius: 3px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 20px 0 0;
}
@media screen and (max-width: 480px){
  .area_contact_format > .head {
    flex-wrap: wrap;
  }
  .area_contact_format > .head > .img {
    width: 80px;
    height: 80px;
    flex: 0 0 80px;
    margin: 0 auto 20px;
  }
}
.area_contact_format > .head > .text {
  flex: auto;
  min-width: 10px;
}
.area_contact_format > .head > .text > .name {
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 10px;
}
.area_contact_format > .head > .text > .description {
  font: 400 14px/1.5em 'noto sans japanese',sans-serif;
}
.area_contact_format > .head > .text > .url {
  color: #1A73E8;
  font: 500 13px/1.2em 'helvetica','noto sans japanese',sans-serif;
  display: inline-block;
  text-decoration: underline;
  word-break: break-all;
  margin: 15px 0 0;
}
.area_contact_format > .head > .text > .forte {
  color: #4dc2af;
  margin: 20px 0 0;
  font: 600 15px/1.5em 'noto sans japanese',sans-serif;
}
.area_contact_format > .head > .text > .forte:before {
  content: "得意分野";
  color: #fff;
  font: 600 14px/1em 'noto sans japanese',sans-serif;
  padding: 4px 6px;
  background: #4dc2af;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 10px 0 0;
}
@media screen and (max-width: 480px){
  .area_contact_format > .head > .text > .name {
    text-align: center;
  }
}

/* スタッフ */
.area_contact_format .staff {
  display: flex;
  align-items: center;
  margin: 20px 0 0;
}
.area_contact_format .staff > .img {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  margin: 0 10px 0 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.area_contact_format .staff .name {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
}
.area_contact_format .staff .name:before {
  content: "担当者";
  color: #ccc;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 5px;
}


.area_contact_format > .data {
  background: #f4f4f4;
  margin: 20px 0 30px;
  padding: 12px;
}
.area_contact_format > .data .file {
  color: #aaa;
  font: 300 13px/1.3em 'helvetica','noto sans japanese',sans-serif;
}
.area_contact_format > .data .file:before {
  content: "問い合わせする契約書テンプレート";
  color: #ccc;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 10px;
}















@charset "UTF-8";

/* ! 下層ページスタイル ==================================================

会社概要
利用規約

投稿リスト

-------------------------------------------------- */
/* ! レイアウト ================================================== */
.header_page {
  width: 100%;
  position: static;
}
.header_page .container {
	max-width: none;
	padding: 14px 60px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  height: auto;
}
.header_page .logo {
	margin: 0 60px 0 0;
	width: auto;
}
.header_page .head_guest {
	flex: 1 1 auto;
}
.header_page .head_guest [class*="btnarea"] [class*="btn_"] {
  display: none;
}

@media screen and (max-width: 767px){
  .header_page .container {
  	padding: 14px 30px;
  }
}
@media screen and (max-width: 480px){
  .header_page .container {
  	padding: 14px 16px;
  }
}

/*  */
.layout_wrap.page{
  overflow: hidden;
}
.main_page{
  padding: 0;
}
.area_page{
  width: 100%;
}


/* ————————————————————————————————————————————————————————————
 ! 会社概要
———————————————————————————————————————————————————————————— */
.area_company{
  background: #fff;
  border-radius: 10px;
  margin: 50px 0 0;
}


/* リスト */
.list_company_overview > li{
  display: flex;
  padding: 30px 0;
}
.list_company_overview > li + li{
  border-top: 1px solid #d2d5e0;
}
.list_company_overview .ttl{
  font: 700 15px/1.5em 'noto sans japanese' , sans-serif;
  flex: 0 0 100px;
}
.list_company_overview .cnt{
  font: 350 16px/1.5em 'noto sans japanese' , sans-serif;
}
@media screen and (max-width: 480px){
  .list_company_overview > li{
    display: block;
    padding: 16px 0;
  }
  .list_company_overview .ttl{
    font-size: 13px;
  }
  .list_company_overview .cnt{
    font-size: 14px;
  }
}

/* ————————————————————————————————————————————————————————————
 ! 特商法
———————————————————————————————————————————————————————————— */
.area_law{
  background: #fff;
  border-radius: 10px;
  margin: 50px 0 0;
}
@media screen and (max-width: 767px){
  .area_law{
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 600px){
  .area_law{
    margin: 0;
  }
}

/* リスト */
.list_law > li{
  display: flex;
  padding: 24px 0;
}
.list_law > li + li{
  border-top: 1px solid #d2d5e0;
}
.list_law .ttl{
  font: 700 13px/1.5em 'noto sans japanese' , sans-serif;
  flex: 0 0 160px;
}
.list_law .cnt{
  font: 350 14px/1.5em 'noto sans japanese' , sans-serif;
}
.list_law .cnt a{
  text-decoration: underline;
}
@media screen and (max-width: 600px){
  .list_law .ttl{
    flex: 0 0 140px;
  }
}
@media screen and (max-width: 480px){
  .list_law > li{
    display: block;
    padding: 14px 0;
  }
  .list_law .ttl{
    font-size: 13px;
    margin: 0 0 4px;
  }
  .list_law .cnt{
    font-size: 14px;
  }
}

/* ————————————————————————————————————————————————————————————
 ! 利用規約
———————————————————————————————————————————————————————————— */
.area_terms{
  padding: 30px 0;
}

/* ヘッド */
.head_terms {
  margin: 0 0 30px;
}

/* ボディ */
.body_terms{
  background: #fff;
  border-radius: 10px;
}
.body_terms > .description{
  font: 350 14px/1.5em 'noto sans japanese' , sans-serif;
  margin: 0 0 30px;
}

/* リスト_利用規約 */
.list_terms{
  counter-reset: count;
}
.list_terms > li + li{
  margin: 30px 0 0;
}
.list_terms p{
  font: 350 14px/1.5em 'noto sans japanese' , sans-serif;
  position: relative;
}
.list_terms > li > .ttl{
  font: 700 16px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
}
.list_terms > li > .ttl:before{
  counter-increment: count;
  content: "第"counter(count)"条";
  font: 700 16px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 20px 0 0;
}
.list_terms > li > .description{
  margin: 0 0 4px;
}

/* カウントリスト */
.area_terms [class*="list_count"]{
  counter-reset: count02;
}
.area_terms [class*="list_count"] > li + li{
  margin: 10px 0 0;
}
.area_terms [class*="list_count"] > li > p{
  padding-left: 24px;
}
.area_terms [class*="list_count"] > li > p:before{
  counter-increment: count02;
  content: counter(count02);
  font: 400 14px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  top: 3px;
  left: 0;
}
.area_terms [class*="list_count"][class*="inner"]{
  padding: 0 0 0 18px;
  margin: 4px 0 0;
}
.area_terms [class*="list_count"][class*="inner"] > li + li{
  margin: 4px 0 0 ;
}

/* カウントリスト type 1. */
.area_terms [class*="list_count"][class*="default"] > li > p:before{
  content: counter(count02)".";
}

/* カウントリスト type ① */
.area_terms [class*="list_count"][class*="circle"] > li > p:before{
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 17px;
  width: 17px;
  font-size: 10px;
  line-height: 1;
}

/* カウントリスト type (1) */
.area_terms [class*="list_count"][class*="brackets"] > li > p:before{
  content: "("counter(count02)")";
}


/* ————————————————————————————————————————————————————————————
 ! knowhowsとは
———————————————————————————————————————————————————————————— */
.area_about > section{
  padding: 100px 0 80px;
}
.area_about > section:nth-child(even){
  background: #F5F5F5;
}

@media screen and (max-width: 767px){
  .area_about > section{
    padding: 80px 0 60px;
  }
}
@media screen and (max-width: 480px){
  .area_about > section{
    padding: 50px 0 40px;
  }
}

/* トップビュー -----------------------*/
.body_top_view_about{
  display: flex;
  align-items: center;
  margin: 0 0 60px;
}

@media screen and (max-width: 1000px){
  .body_top_view_about{
    margin: 0 0 40px;
  }
}
@media screen and (max-width: 767px){
  .body_top_view_about{
    flex-direction:column-reverse;
    margin: 0 0 20px;
  }
}

/* img */
.body_top_view_about .img {
  flex: 0 0 600px;
}

@media screen and (max-width: 1280px){
  .body_top_view_about .img {
    flex: 0 0 560px;
  }
}
@media screen and (max-width: 1000px){
  .body_top_view_about .img {
    flex: 0 0 460px;
  }
}
@media screen and (max-width: 860px){
  .body_top_view_about .img {
    flex: 0 0 380px;
  }
}
@media screen and (max-width: 767px){
  .body_top_view_about .img {
    flex: 0 0 auto;
    margin: 30px 0 0;
  }
}

/* テキスト */
.body_top_view_about .ttl{
  font: 600 36px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 20px;
}
.body_top_view_about .ttl span{
  color: #43A55B;
  font: 600 44px/1em 'Roboto','noto sans japanese',sans-serif;
}
.body_top_view_about .lead{
  font: 600 28px/1.3em 'noto sans japanese' , sans-serif;
}
.body_top_view_about .description{
  font: 300 16px/1.4em 'noto sans japanese' , sans-serif;
  margin: 30px 0 0;
}
.body_top_view_about [class*="btnarea"]{
  margin: 50px 0 0;
  flex-direction:column;
  align-items: center;
}
.body_top_view_about [class*="btn_"]{
  max-width: 320px;
  width: 100%;
}
.body_top_view_about [class*="button_"][class*="text"]{
  margin: 8px 0 0;
}

@media screen and (max-width: 1000px){
  .body_top_view_about .ttl{
    font-size: 32px;
  }
  .body_top_view_about .ttl span{
    font-size: 40px;
  }
  .body_top_view_about .lead{
    font-size: 24px;
  }
  .body_top_view_about .description{
    margin: 20px 0 0;
  }
  .body_top_view_about [class*="btnarea"]{
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 767px){
  .body_top_view_about .text{
    text-align: center;
    display: flex;
    flex-direction:column;
    align-items: center;
  }
}
@media screen and (max-width: 480px){
  .body_top_view_about .ttl{
    font-size: 28px;
  }
  .body_top_view_about .ttl span{
    font-size: 36px;
  }
  .body_top_view_about .lead{
    font-size: 20px;
  }
  .body_top_view_about .description{
    font-size: 13px;
    margin: 16px 0 0;
  }
  .body_top_view_about [class*="btnarea"]{
    margin: 20px 0 0;
  }
}

/* リスト_サービス */
.list_service{
  display: flex;
  flex-wrap: wrap;
}
.list_service > li{
  width: 12.5%;
}
.list_service article{
  display: flex;
  flex-direction:column;
  align-items: center;
  position: relative;
}
.list_service article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.list_service .img{
  width: 80px;
}
.list_service img{
  vertical-align: bottom;
}
.list_service p{
  font: 500 14px/1.3em 'noto sans japanese' , sans-serif;
  text-align: center;
}
@media screen and (max-width: 560px){
  .list_service .img{
    width: 64px;
  }
}

/* 個別 */
@media screen and (min-width: 480px){
  .list_service .howmuch:hover p{ color: #48BC63;}
  .list_service .capital:hover p{ color: #3FB0C4;}
  .list_service .column:hover p{ color: #3F7CC4;}
  .list_service .consul:hover p{ color: #F29F3E;}
  .list_service .knowhow:hover p{ color: #DD5176;}
  .list_service .format:hover p{ color: #0FB1A4;}
  .list_service .enquete:hover p{ color: #576086;}
  .list_service .whole_angle:hover p{ color: #7857A7;}
}
@media screen and (max-width: 940px){
  .list_service{
    margin: -8px;
  }
  .list_service > li{
    width: 25%;
    padding: 8px;
  }
}
@media screen and (max-width: 560px){
  .list_service{
    margin: -8px 0;
  }
  .list_service > li{
    width: 25%;
    padding: 8px 0;
  }
}
@media screen and (max-width: 480px){
  .list_service p{
    font-size: 12px;
  }
}


/* サービス詳細 -----------------------*/
/* ヘッド ---- */
[class*="head_service_"] {
  display: flex;
  flex-direction:column;
  align-items: center;
}
[class*="head_service_"] .ttl{
  font: 600 36px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 80px;
  position: relative;
  z-index: 0;
}
[class*="head_service_"] .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_content.svg");
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 90px;
  height: 90px;
  position: absolute;
  top: 50%;
  left: -45px;
  transform: translateY(-50%);
  z-index: -1;
  opacity: .07;
}

@media screen and (max-width: 767px){
  [class*="head_service_"] .ttl{
    font-size: 28px;
    margin: 0 0 50px;
  }
  [class*="head_service_"] .ttl:before{
    width: 60px;
    height: 60px;
    left: -30px;
  }
}
@media screen and (max-width: 480px){
  [class*="head_service_"] .ttl{
    font-size: 24px;
    margin: 0 0 30px;
  }
  [class*="head_service_"] .ttl:before{
    width: 56px;
    height: 56px;
    left: -28px;
  }
}

/* 個別 */
[class*="head_service_"][class*="howmuch"] .ttl span{ color: #48BC63;}
[class*="head_service_"][class*="capital"] .ttl span{ color: #3FB0C4;}
[class*="head_service_"][class*="column"] .ttl span{ color: #3F7CC4;}
[class*="head_service_"][class*="consul"] .ttl span{ color: #F29F3E;}
[class*="head_service_"][class*="knowhow"] .ttl span{ color: #DD5176;}
[class*="head_service_"][class*="format"] .ttl span{ color: #0FB1A4;}
[class*="head_service_"][class*="enquete"] .ttl span{ color: #576086;}
[class*="head_service_"][class*="360"] .ttl span{ color: #7857A7;}

[class*="head_service_"][class*="howmuch"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_howmuch.svg");}
[class*="head_service_"][class*="capital"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_capi.svg") ;}
[class*="head_service_"][class*="column"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_column.svg") ;}
[class*="head_service_"][class*="consul"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_consul.svg") ;}
[class*="head_service_"][class*="knowhow"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_knowhow.svg") ;}
[class*="head_service_"][class*="format"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_format.svg") ;}
[class*="head_service_"][class*="enquete"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_enquete.svg");}
[class*="head_service_"][class*="360"] .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_360_purple.svg");}



/* ボディ ---- */
[class*="body_service_"]{
  display: flex;
}

@media screen and (max-width: 767px){
  [class*="body_service_"]{
    flex-direction: column-reverse;
  }
}

/* img */
[class*="body_service_"] .img{
  flex: 0 0 400px;
  margin: 0 60px 0 0;
  box-shadow:0px 12px 30px 0px rgba(0,0,0,.08);
}
[class*="body_service_"] .img img{
  vertical-align: bottom;
}

@media screen and (max-width: 1000px){
  [class*="body_service_"] .img{
    flex: 0 0 380px;
    margin: 0 30px 0 0;
  }
}
@media screen and (max-width: 767px){
  [class*="body_service_"] .img{
    margin: 40px 0 0;
    flex: 0 0 auto;
  }
}
@media screen and (max-width: 480px){
  [class*="body_service_"] .img{
    box-shadow: 0px 6px 18px 0px rgba(0,0,0,.08);
    margin: 30px 0 0;
  }
}

/* テキスト */
[class*="body_service_"] .text{
  flex: 1 1 auto;
  min-width: 10px;
}
[class*="body_service_"] .ttl{
  font: 600 28px/1.3em 'noto sans japanese' , sans-serif;
  margin: 0 0 30px;
}
[class*="body_service_"] .description{
  font: 400 16px/1.5em 'noto sans japanese' , sans-serif;
}
[class*="body_service_"] [class*="btnarea"]{
  margin: 40px 0 0;
}
[class*="body_service_"] [class*="button_"]{
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  position: relative;
}
[class*="body_service_"] [class*="button_"]:after{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_content.svg");
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 22px;
  height: 22px;
  display: block;
  margin: 0 0 0 10px;
}

@media screen and (max-width: 1000px){
  [class*="body_service_"] .ttl{
    font-size: 26px;
  }
}
@media screen and (max-width: 767px){
  [class*="body_service_"] .ttl{
    font-size: 22px;
    margin: 0 0 20px;
    text-align: center;
  }
  [class*="body_service_"] .description{
    font-size: 14px;
    text-align: center;
  }
  [class*="body_service_"] [class*="btnarea"]{
    margin: 30px 0 0;
    justify-content: center;
  }
  [class*="body_service_"] [class*="button_"]{
    font-size: 16px;
  }
  [class*="body_service_"] [class*="button_"]:after{
    width: 18px;
    height: 18px;
  }
}
@media screen and (max-width: 480px){
  [class*="body_service_"] .ttl{
    font-size: 18px;
    margin: 0 0 10px;
  }
  [class*="body_service_"] .description{
    font-size: 13px;
  }
  [class*="body_service_"] [class*="btnarea"]{
    margin: 20px 0 0;
  }
  [class*="body_service_"] [class*="button_"]{
    font-size: 14px;
  }
  [class*="body_service_"] [class*="button_"]:after{
    width: 16px;
    height: 16px;
  }
}

/* 個別 */
[class*="body_service_"][class*="howmuch"] [class*="button_"]{ color: #48BC63;}
[class*="body_service_"][class*="capital"] [class*="button_"]{ color: #3FB0C4;}
[class*="body_service_"][class*="column"] [class*="button_"]{ color: #3F7CC4;}
[class*="body_service_"][class*="consul"] [class*="button_"]{ color: #F29F3E;}
[class*="body_service_"][class*="knowhow"] [class*="button_"]{ color: #DD5176;}
[class*="body_service_"][class*="format"] [class*="button_"]{ color: #0FB1A4;}
[class*="body_service_"][class*="enquete"] [class*="button_"]{ color: #576086;}
[class*="body_service_"][class*="360"] [class*="button_"]{ color: #7857A7;}

[class*="body_service_"][class*="howmuch"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_howmuch.svg");}
[class*="body_service_"][class*="capital"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_capital.svg");}
[class*="body_service_"][class*="column"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_column.svg");}
[class*="body_service_"][class*="consul"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_consul.svg");}
[class*="body_service_"][class*="knowhow"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_knowhow.svg");}
[class*="body_service_"][class*="format"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_format.svg");}
[class*="body_service_"][class*="enquete"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_enquete.svg");}
[class*="body_service_"][class*="360"] [class*="button_"]:after{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_circle_360.svg");}


/* 会員登録 -----------------------*/
.area_conversion{
  color: #fff;
  background: #43A55B;
  padding: 50px 0;
}
.head_conversion {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 30px;
}
.head_conversion .ttl {
  font: 700 36px/1.4em 'noto sans japanese',sans-serif;
  margin: 0 0 24px;
}
.head_conversion .ttl .en {
  font-family: 'Roboto','noto sans japanese',sans-serif;
}
.body_conversion [class*="btnarea_"]{
  flex-direction: column;
  align-items: center;
}
.body_conversion [class*="btn_"]{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  background: #fff;
  color: #51C96D;
  border-color: #fff;
  min-width: 300px;
}
@media screen and (min-width: 480px){
  .body_conversion [class*="btn_"]:hover{
    background: #51C96D;
    color: #fff;
  }
}
.body_conversion [class*="button_"]{
  color: #fff;
  margin: 8px 0 0;
}
@media screen and (max-width: 560px){
  .area_conversion{
    padding: 40px 0;
  }
  .head_conversion .ttl{
    font-size: 32px;
    margin: 0 0 16px;
  }
}

/* ————————————————————————————————————————————————————————————
 ! 料金表＆機能一覧
———————————————————————————————————————————————————————————— */
.area_function_list{
  padding: 70px 0;
}
.body_function_list{
  margin: 50px 0 0;
}
@media screen and (max-width: 767px){
  .area_function_list{
    padding: 50px 0;
  }
}
@media screen and (max-width: 640px){
  .body_function_list{
    margin: 0;
  }
}
@media screen and (max-width: 480px){
  .area_function_list{
    padding: 30px 0;
  }
}

/* 機能リスト */
.list_function > li > .ttl{
  font: 500 18px/1em 'noto sans japanese' , sans-serif;
  padding: 0 0 0 16px;
  position: relative;
}
.list_function > li > .ttl:before{
  content: "";
  background: #51C96D no-repeat center center !important;
  background-size: contain !important;
  width: 4px;
  height: 18px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.list_function > li + li{
  margin: 80px 0 0;
}
@media screen and (max-width: 767px){
  .list_function > li > .ttl{
    margin: 0 0 20px;
  }
}
@media screen and (max-width: 640px){
  .list_function{
    margin: 30px 0 0;
  }
  .list_function > li + li{
    margin: 60px 0 0;
  }
  .list_function > li > .ttl{
    font-size: 16px;
  }
}

/* 会員種別_sp_fixed表示 */
.area_member_type_sp{
  display: none;
  min-height: 60px;
}

.list_member_type{
  display: flex;
  height: 60px;
  border-bottom: 1px solid #333;
}
.list_member_type > li{
  width: 25%;
  background: #fff;
  text-align: center;
  padding: 16px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.list_member_type p{
  font: 600 11px/1.3em 'noto sans japanese' , sans-serif;
}
body.fixed .list_member_type{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  padding: 0 30px;
  width: 100%;
  background: #fff;
}
@media screen and (max-width: 640px){
  .area_member_type_sp{
    display: block;
  }
}
@media screen and (max-width: 480px){
  body.fixed .list_member_type{
    padding: 0 16px;
  }
}

/* テーブル */
[class*="table_"][class*="function_list"] thead {
  border-bottom: 1px solid #333;
}
[class*="table_"][class*="function_list"] th{
  font: 600 11px/1em 'noto sans japanese' , sans-serif;
}
[class*="table_"][class*="function_list"] th:nth-child(n+2){
  width: 124px;
  text-align: center;
  padding: 16px 0;
}
[class*="table_"][class*="function_list"] td {
  padding: 10px 8px;
}
[class*="table_"][class*="function_list"] td:nth-child(n+2){
  text-align: center;
}
[class*="table_"][class*="function_list"] small{
  color: #666;
  font: 400 11px/1.3em 'noto sans japanese' , sans-serif;
}
@media screen and (max-width: 767px){
  [class*="table_"][class*="function_list"] th:nth-child(n+2) {
    width: 100px;
  }
}
@media screen and (max-width: 640px){
  [class*="table_"][class*="function_list"] thead{
    display: none;
  }
  [class*="table_"][class*="function_list"] tbody tr {
    display: flex;
    flex-wrap: wrap;
  }
  [class*="table_"][class*="function_list"] tbody th {
    width: 100%;
    padding: 10px 8px 4px;
  }
  [class*="table_"][class*="function_list"] tbody th p{
    font: 400 13px/1em 'noto sans japanese' , sans-serif;
  }
  [class*="table_"][class*="function_list"] tbody td {
    width: 25%;
  }
  [class*="table_"][class*="function_list"] small{
    margin: 4px 0 0;
    display: block;
  }
}




/* ————————————————————————————————————————————————————————————
 ! 料金表
———————————————————————————————————————————————————————————— */
.area_plan{
  padding: 70px 0;
}

@media screen and (max-width: 767px){
  .area_plan{
    padding: 50px 0;
  }
}
@media screen and (max-width: 480px){
  .area_plan{
    padding: 30px 0;
  }
}

/* ボディ ----- */
/* リスト */
.list_plan{
  display: flex;
  flex-wrap: wrap;
}
.list_plan > li{
  width: 33.3333%;
  background: #fff;
  border: 1px solid #f3f3f3;
  transition: .2s;
  display: flex;
  flex-direction:column;
}
.list_plan .standard{
  transform: scale(1.08);
  transform-origin: 50% 18.5%;
  box-shadow:0px 12px 24px 0px rgba(22,116,45,.2);
}

@media screen and (max-width: 767px){
  .list_plan .standard{
    margin: 20px 0 60px;
  }
}
@media screen and (max-width: 640px){
  .list_plan .standard{
    transform: scale(1.05);
    margin: 20px 0 40px;
  }
}

/* ヘッド  */
.head_list_plan p{
  font: 700 13px/1em 'noto sans japanese' , sans-serif;
  text-align: center;
  padding: 20px 0;
}
.guest .head_list_plan{ background: #52BF6D;}
.free .head_list_plan{ background: #43AC5D;}
.standard .head_list_plan{ color: #fff; background: #16742D;}
.professional .head_list_plan{ background: #349A4D;}

.head_list_plan p:after{
  content: attr(data-eng)"";
  color: #16742D;
  font: 600 20px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 6px 0 0;
  display: block;
}
.standard .head_list_plan p:after{
  color: #349A4D;
}

@media screen and (max-width: 480px){
  .head_list_plan p{
    font-size: 12px;
    padding: 14px 0;
  }
  .head_list_plan p:after{
    font-size: 18px;
  }
}

/* ボディ */
.body_list_plan{
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: flex-start;
  padding: 30px 20px;
  background: #fff;
  flex: 1 1 auto;
}
.body_list_plan > div{
  width: 100%;
  display: flex;
  flex-direction:column;
  align-items: center;
}
.body_list_plan > div + div{
  margin: 40px 0 0;
}
.list_plan .ttl{
  font: 600 13px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
  margin: 0 0 6px;
}
.list_plan .price{
  font: 600 20px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
}
.list_plan .price:before,
.list_plan .price .yen{
  content: attr(data-unit-before)"";
  font: 600 16px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 4px 0 0;
}
.list_plan .price span{
  font: 600 14px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}
.list_plan .price small{
  color: #666;
  font: 400 11px/1em 'noto sans japanese' , sans-serif;
}
.body_list_plan > .price{
  font: 600 28px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 40px;
}
.body_list_plan > .price:before{
  font: 600 24px/1em 'Roboto','noto sans japanese',sans-serif;
}
.body_list_plan > .price:after{
  font: 600 16px/1em 'Roboto','noto sans japanese',sans-serif;
}

@media screen and (max-width: 1000px){
  .body_list_plan > div + div{
    margin: 30px 0 0;
  }
  .list_plan .price{
    font-size: 16px;
  }
  .body_list_plan > .price{
    font-size: 24px;
    margin: 0 0 30px;
  }
  .body_list_plan > .price:before{
    font-size: 20px;
  }
  .body_list_plan > .price:after{
    font-size: 14px;
  }
}
@media screen and (max-width: 767px){
  .list_plan > li > p{
    font-size: 12px;
  }
  .list_plan > li > p:after{
    font-size: 17px;
  }
  .list_plan > li{
    width: 100%;
  }
}
@media screen and (max-width: 480px){
  .body_list_plan{
    padding: 24px 10px;
  }
  .list_plan > li > p{
    padding: 12px 0;
  }
  .list_plan .cnt{
    padding: 24px 10px;
  }
  .list_plan .cnt .ttl{
    font-size: 12px;
    margin: 0 0 8px;
  }
  .body_list_plan .price:after{
    font-size: 13px;
  }
}

/* ボタンエリア */
.body_list_plan [class*="btnarea_"]{
  padding: 40px 0 0;
  margin: auto 0 0;
}
.body_list_plan [class*="btn_"]{
  text-align: center;
  height: 40px;
  padding: 0 8px;
}
.body_list_plan [class*="btn_"] br{
  display: none;
}
.standard .body_list_plan [class*="btn_"]{
  height: 60px;
}
@media screen and (max-width: 1000px){
  .body_list_plan [class*="btn_"]{
    font-size: 13px;
  }
  .body_list_plan [class*="btnarea_"]{
    padding: 30px 0 0;
  }
}
@media screen and (max-width: 860px){
  .body_list_plan [class*="btn_"]{
    line-height: 1.3;
    height: 50px;
  }
  .body_list_plan [class*="btn_"] br{
    display: block;
  }
}
@media screen and (max-width: 767px){
  .body_plan .list_plan [class*="btn_"] br{
    display: none;
  }
}
@media screen and (max-width: 480px){
  .body_list_plan [class*="btn_"]{
    font-size: 12px;
  }
  .body_list_plan [class*="btn_"]{
    height: 36px;
  }
  .standard .body_list_plan [class*="btn_"]{
    height: 50px;
  }
}


/* ! attention表示 ============================== */
.area_attention {
  width: 100%;
}
.list_attention {
  width: 100%;
}
.list_attention > li {
  color: #999;
  display: flex;
  align-items: center;
}
.list_attention > li + li {
  margin: 12px 0 0;
  padding: 12px 0 0;
  border-top: 1px solid #eee;
}
.list_attention .ttl_attention {
  font: 400 12px/1em 'noto sans japanese',sans-serif;
}
.list_attention .price_attention {
  font: 500 13px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
}
.list_attention .price_attention span {
  font: 400 12px/1em 'noto sans japanese',sans-serif;
}
.list_attention .price_attention:before {
  content: attr(data-unit-before)"";
  font-size: 12px;
  display:inline-block;
  margin: 0 2px 0 0;
}


/* ————————————————————————————————————————————————————————————
 ! よくある質問
———————————————————————————————————————————————————————————— */
.area_faq{
  margin: 20px 0 0;
}
.box_faq + .box_faq{
  margin: 60px 0 0;
}
@media screen and (max-width: 560px){
  .box_faq+.box_faq{
    margin: 40px 0 0;
  }
}

/* 質問リスト＿大カテゴリ */
.box_faq .h3{
  font: 700 22px/1.4em 'noto sans japanese' , sans-serif;
  margin: 0 0 20px;
  padding: 0 0 0 16px;
  position: relative;
}
.box_faq .h3:before{
  content: "";
  background: #333;
  width: 4px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 6px;
}
@media screen and (max-width: 600px){
  .box_faq .h3{
    font-size: 18px;
    margin: 0 0 16px;
  }
  .box_faq .h3:before{
    height: 16px;
    top: 5px;
  }
}

/* 質問リスト＿中カテゴリ */
.faq_title {
  display: flex;
  justify-content: flex-start;
}
.faq_seach {
  margin-left: 30px;
}
@media screen and (max-width: 880px){
  .faq_title {
    flex-direction: column;
    justify-content: flex-start;
  }
  .faq_seach {
    margin: 20px 0 0 -88px !important;
  }
}
@media screen and (max-width: 600px){
  .faq_seach {
    margin: 20px 0 0 -50px !important;
  }
}
.faq_seach input {
  font: 400 16px/1.5em Roboto,'noto sans japanese',sans-serif;
  padding: 0 10px;
  background: #fff;
  border: 1px solid #e5e6ea;
  width: 300px !important;
  max-width: 100%;
  min-width: 10px;
  border-radius: 18px !important;
}
#faq_candidate_list {
  position: relative;
}
#faq_candidate_list .box_search {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%,0);
  width: 100%;
  background-color: #fff;
  border: #ccc 1px solid;
  border-radius: 3px;
  padding: 5px;
  z-index: 1;
}
#faq_candidate_list .box_search .body_box {
  max-height: 300px;
  overflow: auto;
}
#faq_candidate_list .box_search .body_box .list_box_search > li {
  padding:7.5px 5px;
  cursor: pointer;
  transition: all 0.2s ease;
  —webkit-transition: all 0.2s ease;
}
#faq_candidate_list .box_search .body_box .list_box_search > li:hover {
  background-color: #eee;
}
#faq_candidate_list .box_search .body_box .list_box_search > li + li {
  border-top: #ccc 1px solid;
}
#faq_candidate_list .box_search .body_box .list_box_search > li p {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
#faq_candidate_list .box_search .body_box .list_box_search > li p.faq_q {
  color: #42a45a;
  font: 600 14px/1.4em 'noto sans japanese',sans-serif;
  margin-bottom: 5px;
}

.head_faq_first .h4{
  font: 700 16px/1.4em 'noto sans japanese' , sans-serif;
}
.head_faq_first{
  background: #F7F7F7;
  padding: 10px 40px 10px 20px;
  position: relative;
  cursor: pointer;
}
.head_faq_first:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 20px;
  top: 16px;
  transform: rotate(90deg);
}
.open .head_faq_first:before{
  transform: rotate(-90deg);
}
.list_faq_first > li + li{
  margin: 10px 0 0;
}
.body_faq_first {
  padding: 0 0 0 30px;
  margin: 0 0 30px;
  display: none;
}
.open > .body_faq_first{
  display: block;
}
@media screen and (max-width: 600px){
  .head_faq_first .h4{
    font-size:15px;
  }
}
@media screen and (max-width: 480px){
  .list_faq_first > li + li{
    margin: 6px 0 0;
  }
  .body_faq_first {
    padding: 0 0 0 16px;
  }
  .head_faq_first{
    padding: 8px 40px 8px 14px;
  }
  .head_faq_first:before{
    right: 14px;
    top: 13px;
  }
}

/* 質問リスト＿小カテゴリ */
.list_faq_third > li + li{
}
.head_faq_second .h5{
  font: 500 14px/1em 'noto sans japanese' , sans-serif;
  padding: 20px 0 10px;
  border-bottom: 1px solid #D5D5D5;
}
@media screen and (max-width: 600px){
  .head_faq_second .h5{
    font-size: 13px;
  }
}


/* 質問リスト */
.list_faq_third > li{
  padding: 10px 0;
}
.list_faq_third > li + li {
  border-top: 1px solid #eee;
}
.list_faq_third p,
.list_faq_third .h6{
  padding: 0 0 0 28px;
  position: relative;
}
.list_faq_third p:before,
.list_faq_third .h6:before{
  content: "Q.";
  font: 700 16px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  left: 0;
  top: 1px;
}
.list_faq_third .h6{
  color: #42a45a;
  font: 600 14px/1.4em 'noto sans japanese',sans-serif;
  display: inline-block;
  padding: 0 20px 0 28px;
  position: relative;
  cursor: pointer;
}
.list_faq_third .h6:after{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_green.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 5px;
  transform: rotate(90deg);
}
.list_faq_third .open .h6:after{
  transform: rotate(-90deg);
}
.list_faq_third p{
  font: 300 14px/1.5em 'noto sans japanese',sans-serif;
}
.list_faq_third p:before{
  content: "A.";
}
.list_faq_third a{
  text-decoration: underline;
}
.body_faq_third{
  margin: 8px 0 0;
  display: none;
}
.open > .body_faq_third{
  display: block;
}
@media screen and (max-width: 600px){
  .list_faq_third > li{
    padding: 8px 0;
  }
  .list_faq_third .h6{
    font-size: 13px;
  }
  .list_faq_third p{
    font-size: 13px;
  }
}


/* ! ====================================================================================================
　■ 投稿一覧
==================================================================================================== */
.area_post_group{
  width: 100%;
}
.area_post_group > article + article{
  margin: 60px 0 0;
}
@media screen and (max-width: 560px){
  .area_post_group > article + article{
    margin: 40px 0 0;
  }
}

/* ! ヘッド ============================== */
/* レイアウト */
.head_post_group{
  padding: 0 0 0 90px;
  margin: 0 0 30px;
  display: flex;
  align-items: flex-end;
  position: relative;
}
.head_post_group:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_ttl/ico_ttl_cgm.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 76px;
  height: 76px;
  position: absolute;
  left: 0;
  top: -8px;
}
.head_post_group > .layout{
  flex: 0 0 340px;
  margin: 4px 0 0 auto;
  justify-content: flex-end;
}
.column .head_post_group:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_ttl/ico_ttl_column.svg");}
.store .head_post_group:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_ttl/ico_ttl_store.svg");}
.template .head_post_group:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_ttl/ico_ttl_template.svg");}

@media screen and (max-width: 1280px){
  .head_post_group{
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 880px){
  .head_post_group{
    display: block;
  }
  .head_post_group>.layout{
    margin: 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .head_post_group{
    margin: 0 0 20px;
  }
}

/* タイトル */
.head_post_group .ttl{
  font: 600 28px/1em 'noto sans japanese',sans-serif;
  flex: 1 1 auto;
  min-width: 10px;
}
.head_post_group .ttl:after{
  content: attr(data-copy)"";
  display: block;
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  color: #ec8a3f;
  margin: 10px 0 0;
}
.column .head_post_group .ttl:after{ color: #3F7CC4; }
.store .head_post_group .ttl:after{ color: #DD5176; }
.template .head_post_group .ttl:after{ color: #37BAA6; }

/* 個別＿タイトルアイコン  */
[class*="btn_action"][class*="question"]:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_question_Q_white.svg");}
[class*="btn_action"][class*="answer"]:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_question_A_white.svg");}
[class*="btn_action"][class*="search"]:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_search_white02.svg");}
[class*="btn_action"][class*="post"]:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_white.svg");}

@media screen and (max-width: 960px){
  .head_post_group{
    padding: 0 0 0 70px;
  }
  .head_post_group:before{
    width: 64px;
    height: 64px;
  }
  .head_post_group .ttl{
    font-size: 22px;
  }
  .head_post_group .ttl:after{
    font-size: 16px;
    margin: 8px 0 0;
  }
}
@media screen and (max-width: 480px){
  .head_post_group{
    padding: 0 0 0 64px;
  }
  .head_post_group:before{
    width: 56px;
    height: 56px;
  }
  .head_post_group .ttl{
    font-size: 18px;
  }
  .head_post_group .ttl:after{
    font-size: 14px;
  }
}

/* ボタン */
[class*=btn_action]{
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  height: 36px;
  background: #fff;
  width: 100%;
  max-width: 190px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  position: relative;
  padding-left: 30px;
}
[class*="btn_action"]:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 6px 0 -3px;
  background: url(../img/shape/ico_pen_white.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  transition: all 0.1s ease;
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
}
[class*="btn_action"] + [class*="btn_action"]{
  margin: 0 0 0 5px;
}
@media screen and (max-width: 880px){
  [class*="btn_action"]{
    font-size: 14px;
    padding-left: 16px;
    height: 32px;
  }
  [class*="btn_action"]:before {
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 480px){
  [class*="btn_action"]{
    font-size: 13px;
    height: 28px;
  }
  [class*="btn_action"]:before {
    width: 14px;
    height: 14px;
  }
}


/* 個別＿ボタン  */
[class*="btn_action"][class*="goast"][class*="question"]:before{
  background: url(../img/shape/ico_question_Q.svg);
}
[class*="btn_action"][class*="goast"][class*="answer"]:before{
  background: url(../img/shape/ico_question_A.svg);
}
.column [class*="btn_action"][class*="goast"][class*="search"]:before{
  background: url(../img/shape/ico_search_navy.svg);
}
.column [class*="btn_action"][class*="goast"][class*="post"]:before{
  background: url(../img/shape/ico_pen_blue.svg);
}
.store [class*="btn_action"][class*="goast"][class*="search"]:before{
  background: url(../img/shape/ico_search_red.svg);
}
.store [class*="btn_action"][class*="goast"][class*="post"]:before{
  background: url(../img/shape/ico_pen_red.svg);
}
.template [class*="btn_action"][class*="goast"][class*="search"]:before{
  background: url(../img/shape/ico_search_emerald.svg);
}

@media screen and (min-width: 480px){
  [class*="btn_action"][class*="question"]:hover:before{ background: url(../img/shape/ico_question_Q.svg);}
  [class*="btn_action"][class*="answer"]:hover:before{ background: url(../img/shape/ico_question_A.svg);}
  .column [class*="btn_action"][class*="search"]:hover:before{ background: url(../img/shape/ico_search_navy.svg);}
  .column [class*="btn_action"][class*="post"]:hover:before{ background: url(../img/shape/ico_pen_blue.svg);}
  .store [class*="btn_action"][class*="search"]:hover:before{ background: url(../img/shape/ico_search_red.svg);}
  .store [class*="btn_action"][class*="post"]:hover:before{ background: url(../img/shape/ico_pen_red.svg);}
  [class*="btn_action"][class*="goast"][class*="question"]:hover:before{ background: url(../img/shape/ico_question_Q_white.svg);}
  [class*="btn_action"][class*="goast"][class*="answer"]:hover:before{ background: url(../img/shape/ico_question_A_white.svg);}
  [class*="btn_action"][class*="goast"][class*="search"]:hover:before{ background: url(../img/shape/ico_search_white02.svg);}
  [class*="btn_action"][class*="goast"][class*="post"]:hover:before{ background: url(../img/shape/ico_pen_white.svg);}
}

/* タイトル横並び */
.head_post_group.row{
  padding: 0 0 0 56px;
}
.head_post_group.row:before{
  width: 40px;
  height: 40px;
  top: 2px;
}
.head_post_group.row .ttl{
  display: flex;
  align-items: baseline;
}
.head_post_group.row .ttl:after{
  margin: 0 0 0 10px;
}
@media screen and (max-width: 1100px) and (min-width: 880px){
  .head_post_group.row .ttl{
    display: block;
  }
  .head_post_group.row .ttl:after{
    margin: 8px 0 0;
  }
}
@media screen and (max-width: 960px){
  .head_post_group.row:before{
    top: -10px;
  }
}
@media screen and (max-width: 560px){
  .head_post_group.row .ttl{
    display: block;
  }
  .head_post_group.row .ttl:after{
    margin: 8px 0 0;
  }
}

/* ! ボディ============================== */
/* リスト_タブボタン */
.list_tab_button_group {
  display: flex;
  flex-wrap: wrap;
  flex: 0 0 auto;
  width: 100%;
  border-bottom: 1px solid #172858;
  margin: 0 0 4px;
}
.list_tab_button_group > li{
  position: relative;
}
.list_tab_button_group a{
  color: #172858;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .06em;
  text-align: center;
  display: block;
  padding: 8px 14px;
  transition: all 0.1s ease;
  position: relative;
}
.list_tab_button_group a span{
  font: 600 1em/1em Roboto,'noto sans japanese',sans-serif;
}
.list_tab_button_group > .tab_current a{
  border: 1px solid #172858;
  border-radius: 3px 3px 0 0;
}
.list_tab_button_group > .tab_current a:before{
  content: "";
  background: #fff no-repeat center center !important;
  width: 100%;
  height: 3px;
  position: absolute;
  left: 0;
  bottom: -2px;
}
@media screen and (min-width: 480px){
  .list_tab_button_group a:hover {
    color: #7f8eca;
    border-color: #7f8eca;
  }
}
@media screen and (max-width: 768px){
  .list_tab_button_group{
    margin: -2px;
    border-color: #ccc;
    border: none;
    padding: 0 0 4px;
  }
  .list_tab_button_group > li{
    padding: 2px;
  }
  .list_tab_button_group a{
    border: 1px solid #AABBCC;
    background: #AABBCC;
    color: #fff;
    border-radius: 3px !important;
  }
  .list_tab_button_group > .tab_current a{
    background: #fff;
    color: #172858;
  }
  .list_tab_button_group > .tab_current a:before{
    display: none;
  }
}
@media screen and (max-width: 480px){
  .list_tab_button_group a {
    padding: 5px 10px;
  }
}

/* サイズ大 */
.list_tab_button_group.large a{
  font: 600 16px/1.2em 'noto sans japanese',sans-serif;
  padding: 10px 30px;
}


@media screen and (max-width: 768px){
  .list_tab_button_group.large a{
    font-size: 14px;
    padding: 8px 16px;
  }
}


/* リスト_タブパネル */
.list_tab_panel_group > .tab_panel_group {display: none;}
.list_tab_panel_group > .tab_panel_group.tab_current { display: block;}

/* 投稿記事リスト */
[class*="list_post_"] > li{
  padding: 16px 0;
  border-bottom: 1px solid #E5E6EA;
  position: relative;
}
[class*="list_post_"] > li > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
[class*="list_post_"] .layout_auto{
  flex: 1 1 auto;
  width: 100%;
  min-width: 10px;
}
[class*="list_post_"] .img{
  border-radius: 3px;
  background-size: contain!important;
  background-position: center center!important;
  background-repeat: no-repeat!important;
  position: relative;
}
[class*="list_post_"] .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
[class*="list_post_"] .ttl{
  overflow: hidden;
  max-height: 42px;
  line-height: 1.3em;
}
[class*="list_post_"] .body_box{
  margin: 16px 0 0;
}
[class*="list_post_"] .description{
  color: #787C7B;
  font: 400 15px/1em 'noto sans japanese';
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 480px){
  [class*="list_post_"] > li:hover .ttl{ color: #ec8a3f;}
  [class*="list_post_"][class*="column"] > li:hover .ttl{ color: #3F7CC4;}
  [class*="list_post_"][class*="store"] > li:hover .ttl{ color: #DD5176;}
  [class*="list_post_"][class*="template"] > li:hover .ttl{ color: #37BAA6;}
}
@media screen and (max-width: 560px){
  [class*="list_post_"] .ttl{
    font-size: 16px;
    max-height: 36px;
  }
  [class*="list_post_"] .body_box{
    margin: 10px 0 0;
  }
  [class*="list_post_"] .description{
    font-size: 13px;
  }
}
/* 一番下は下にボーダーなし */
[class*="list_post_"][class*="partition"] > li:last-child{
  border: none;
}

/* フット＿投稿者・評価レイアウト */
[class*="list_post_"] .foot_box{
  margin: 12px -4px -4px;
  display: flex;
}
[class*="list_post_"] .foot_box > *{
  padding: 4px;
}
[class*="list_post_"] .status_cnt > *{
  padding: 10px;
}
[class*="list_post_"] .status_cnt{
  display: flex;
  margin: -10px -10px -10px auto;
}
@media screen and (max-width: 600px){
  [class*="list_post_"] .foot_box{
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 560px){
  [class*="list_post_"] .foot_box{
    margin: 10px -4px -4px;
    display: flex;
  }
  [class*="list_post_"] .status_cnt{
    margin: -5px -5px -5px auto;
  }
  [class*="list_post_"] .status_cnt > *{
    padding: 5px;
    margin: 0;
  }
}
@media screen and (max-width: 460px){
  [class*="list_post_"] .status_cnt{
    flex-wrap: wrap;
    margin: -5px;
  }
}


/* 投稿者 */
[class*="list_post_"] [class*=thumb][class*="_user"]{
  width: 24px;
}
[class*=tpl_user][class*=up]{
  color: #787C7B;
  font: 400 14px/1em 'noto sans japanese' , sans-serif;
}
@media screen and (max-width: 560px){
  [class*=tpl_user][class*=up]{
    font-size: 13px;
  }
}

/* 評価 */
.list_count_action{
  display: flex;
  margin: -5px;
}
.list_count_action > li{
  padding: 5px;
}
.list_count_action p{
  font: 600 14px/1em 'Roboto','noto sans japanese' , sans-serif;
  padding: 0 0 0 26px;
  position: relative;
}
.list_count_action p:before {
  content: "";
  display: block;
  width: 26px;
  height: 26px;
  background: url(../img/shape/ico_count/ico_count_view.svg);
  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 .1s ease;
}
.list_count_action .good p:before{ background: url(../img/shape/ico_count/ico_count_good.svg);}
.list_count_action .empathy p:before{ background: url(../img/shape/ico_count/ico_count_empathy.svg);}
.list_count_action .book p:before{ background: url(../img/shape/ico_count/ico_count_book.svg);}
.list_count_action .download p:before{
  background: url(../img/shape/ico_count/ico_count_download.svg);
  background-size: 16px 16px !important;
}

/* みんなの事業相談 ------------------ */
.count_answer_cgm {
  color: #787C7B;
  font: 400 14px/1em 'noto sans japanese' , sans-serif;
}
.count_answer_cgm  span{
  color: #333;
  font: 600 18px/1em 'Roboto','noto sans japanese' , sans-serif;
}
@media screen and (max-width: 560px){
  .count_answer_cgm{
    font-size: 12px;
  }
  .count_answer_cgm  span{
    font-size: 16px;
  }
}

/* 知識を買う／売る ------------------ */
.count_price_store{
  font: 500 12px/1em 'noto sans japanese' , sans-serif;
}
.count_price_store span{
  color: #DD5176;
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
}
.count_price_store span.en{
  font: 600 20px/1em 'Roboto','noto sans japanese' , sans-serif;
  padding: 0 3px;
}
@media screen and (max-width: 560px){
  .count_price_store span{
    font-size: 13px;
  }
  .count_price_store span.en{
    font-size: 18px;
  }
}

/* ! フット ============================== */
.foot_post_group{
  margin: 8px 0 0;
}
.foot_post_group [class*=btn_][class*=gray]{
  font-size: 14px;
  color: #182959;
  border: 1px solid #182959;
  background: #F2F3F5;
  height: 36px;
  min-width: 200px;
  border-radius: 3px;
}
@media screen and (min-width: 480px){
  .foot_post_group [class*=btn_][class*=gray]:hover{
    color: #172858;
    border-color: #172858;
  }
}

/* ! ====================================================================================================
　■ 基礎知識一覧
==================================================================================================== */
.area_column_basic{
  width: 100%;
}
.area_column_basic .img{
  border-radius: 5px;
  background-size: cover!important;
  background-position: center center!important;
  background-repeat: no-repeat!important;
  position: relative;
}
.area_column_basic .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}

/* ! ヘッド ============================== */
.head_column_basic{
  align-items: center;
  margin: 30px 0 40px;
}
.head_column_basic .ttl{
  font: 900 36px/1.3em 'Roboto','noto sans japanese' , sans-serif;
}
.head_column_basic .ttl span{
  font-size: .7em;
}
.head_column_basic .description{
  font: 400 14px/1.5em 'noto sans japanese' , sans-serif;
}
.head_column_basic .ttl:after {
  content: "";
  display: block;
  height: 20px;
  width: 120px;
  background: url(../img/tag_edit_partner.svg) no-repeat left center;
  background-size: contain !important;
}
@media screen and (max-width: 768px){
  .head_column_basic .ttl{
    font-size: 30px;
  }
  .head_column_basic .description{
    font-size: 13px;
  }
  .head_column_basic .layout_fix{
    flex: 0 0 140px;
    margin: 0 30px 0 0;
  }
}
@media screen and (max-width: 640px){
  .head_column_basic .layout_fix{
    flex: 0 0 120px;
  }
}
@media screen and (max-width: 560px){
  .head_column_basic{
    margin: 20px 0 30px;
  }
  .head_column_basic .layout_fix{
    flex: 0 0 80px;
    margin: 0 15px 0 0;
  }
  .head_column_basic .ttl{
    font-size: 22px;
  }
}

/* ! ボディ ============================== */
/* リスト＿カテゴリ */
.list_column_basic_cat{
  counter-reset: category;
}
.list_column_basic_cat > li{
  position: relative;
}
.list_column_basic_cat > li + li{
  margin: 50px 0 0;
}
.head_column_basic_cat{
  margin: 0 0 20px;
  padding: 0 0 0 60px;
  position: relative;
}
.head_column_basic_cat:before {
  content: "0"counter(category)".";
  counter-increment: category;
  font: 900 28px/1em Roboto,'noto sans japanese',sans-serif;
  color: #1284D5;
  position: absolute;
  top: 0;
  left: 0;
}
.head_column_basic_cat .ttl{
  font: 900 24px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
}
.head_column_basic_cat .description{
  font: 400 14px/1.5em 'noto sans japanese' , sans-serif;
}
.body_column_basic_cat{
  padding: 0 0 0 60px;
}
@media screen and (max-width: 768px){
  .head_column_basic_cat{
    padding: 0 0 0 50px;
  }
  .head_column_basic_cat:before{
    font-size: 24px;
  }
  .head_column_basic_cat .ttl{
    font-size: 20px;
  }
  .body_column_basic_cat{
    padding: 0 0 0 50px;
  }
}
@media screen and (max-width: 560px){
  .body_column_basic_cat{
    padding: 0;
  }
  .head_column_basic_cat .ttl{
    font-size: 17px;
  }
  .head_column_basic_cat .description{
    font-size: 13px;
  }
}

/* リスト＿記事 */
.list_column_basic{
  counter-reset: number 0;
}
.list_column_basic .img{
  border-radius: 2px;
}
.list_column_basic > li{
  padding: 0 0 0 40px;
  position: relative;
}
.list_column_basic > li > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.list_column_basic > li + li{
  margin: 10px 0 0;
}
.list_column_basic > li:before {
  content: counter(number) ".";
  counter-increment: number;
  font: 900 16px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  top: 12px;
  left: 10px;
}
.list_column_basic .layout{
  align-items: center;
}
.list_column_basic > li p{
  font: 600 16px/1.3em 'noto sans japanese' , sans-serif;
}
@media screen and (min-width: 480px){
  .list_column_basic > li:hover p{color: #1284D5;}
}
@media screen and (max-width: 768px){
  .list_column_basic > li p{
    font: 500 14px/1.5em 'noto sans japanese' , sans-serif;
  }
}
@media screen and (max-width: 560px){
  .list_column_basic .layout_fix.narrow{
    margin: 0 10px 0 0;
  }
}


/* ! ====================================================================================================
　■ アサイド＿ランキング
==================================================================================================== */
[class*="list_rank_aside_"][class*="normal"]{
  margin: -16px 0;
  counter-reset: number 0;
}
[class*="list_rank_aside_"][class*="normal"] > li{
  padding: 16px 0;
  border-bottom: 1px solid #eee;
}
[class*="list_rank_aside_"][class*="normal"] article{
  padding: 0 0 0 30px;
  position: relative;
}
[class*="list_rank_aside_"][class*="normal"] .ttl{
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[class*="list_rank_aside_"][class*="normal"] .area_poster{
  margin: 10px 0 0;
}
[class*="list_rank_aside_"][class*="normal"] .list_count_action{
  margin: 10px 0 0;
}
/* カウント */
[class*="list_rank_aside_"][class*="normal"] article:before {
  content: counter(number) "";
  counter-increment: number;
  color: #fff;
  font: 600 16px/1em 'Roboto','noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 100px;
  background: #8B93B2;
  position: absolute;
  top: 0;
  left: 0;
}
[class*="list_rank_aside_"][class*="normal"] > li:nth-of-type(1) article:before {background: #DAB35D;}
[class*="list_rank_aside_"][class*="normal"] > li:nth-of-type(2) article:before {background: #162A49;}
[class*="list_rank_aside_"][class*="normal"] > li:nth-of-type(3) article:before {background: #BB7743;}
[class*="list_rank_aside_"][class*="normal"] > li:nth-of-type(n + 6) article:before {
  content: counter(number) ".";
  color: #8B93B2;
  background: transparent;
}


/* ! ====================================================================================================
　■ 会員向けページ
==================================================================================================== */
.area_paid_member{
  color: #000;
}

/* ! トップビュー ============================== */
.area_view_paid {
  background: url(../img/img_paid_member/bg_paid_member.png) no-repeat center center;
  background-size: cover !important;
  height: 400px;
  display: flex;
  align-items: center;
  position: relative;
}
.area_view_paid:before{
  content: "";
  background: -moz-linear-gradient(top,  #e6ebf2 0%, #cad3e0 100%);
  background: -webkit-linear-gradient(top,  #e6ebf2 0%,#cad3e0 100%);
  background: linear-gradient(to bottom,  #e6ebf2 0%,#cad3e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e6ebf2', endColorstr='#cad3e0',GradientType=0 );
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
}
.area_view_paid .ttl{
  font: 600 40px/1em 'noto sans japanese' , sans-serif;
}
.area_view_paid .ttl:before{
  content: "";
  background: url(../img/logo.svg) no-repeat left center !important;
  background-size: contain !important;
  width: 150px;
  height: 24px;
  display: block;
  margin: 0 0 20px
}
.area_view_paid .description{
  font: 400 16px/1.4em 'noto sans japanese' , sans-serif;
  margin: 20px 0 0;
}
.area_view_paid [class*=btnarea]{
  margin: 40px 0 0;
  max-width: 200px;
}
.area_view_paid [class*="btn_"][class*="navy"]{
  height: 40px;
  border-radius: 3px;
  width: 100%;
  box-shadow:0px 4px 8px 0px rgba(0,0,0,.2);
}
@media screen and (max-width: 860px){
  .area_view_paid{
    height: 340px;
  }
  .area_view_paid .ttl{
    font-size: 36px;
  }
  .area_view_paid .description{
    font-size: 14px;
  }
  .area_view_paid [class*=btnarea]{
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 560px){
  .area_view_paid{
    height: 300px;
    background-position: right 45% center;
  }
  .area_view_paid .ttl{
    font-size: 30px;
  }
  .area_view_paid .ttl:before{
    margin: 0 0 16px;
    height: 20px;
  }
}
@media screen and (max-width: 460px){
  .area_view_paid{
    background-position: right 45% bottom -42%;
    background-size: 200% !important;
  }
  .area_view_paid .ttl{
    font-size: 28px;
  }
}
@media screen and (max-width: 380px){
  .area_view_paid{
    align-items: flex-start;
    background-size: 215% !important;
  }
  .area_view_paid .container{
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 330px){
  .area_view_paid .ttl{
    font-size: 26px;
  }
  .area_view_paid .description{
    font-size: 13px;
  }
}

/* ! 概要 ============================== */
.area_merit_paid {
  padding: 60px 0;
}
.area_merit_paid .container{
  text-align: center;
}
.area_merit_paid .h2{
  font-size: 32px;
  display: flex;
  flex-direction:column;
  align-items: center;
}
.area_merit_paid .h2:before{
  content: "";
  background: url(../img/logomark_gray.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 80px;
  height: 80px;
  display: block;
  margin: 0 0 24px;
}
.area_merit_paid .description{
  font: 400 19px/1.7em 'noto sans japanese' , sans-serif;
  margin: 40px 0 0;
}
@media screen and (max-width: 860px){
  .area_merit_paid {
    padding: 50px 0;
  }
  .area_merit_paid .h2{
    font-size: 30px;
  }
  .area_merit_paid .h2:before{
    width: 60px;
    height: 60px;
  }
  .area_merit_paid .description{
    font-size: 16px;
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 560px){
  .area_merit_paid {
    padding: 40px 0;
  }
  .area_merit_paid .h2{
    font-size: 26px;
  }
  .area_merit_paid .h2:before{
    width: 50px;
    height: 50px;
    margin: 0 0 16px;
  }
  .area_merit_paid .description{
    font-size: 14px;
    margin: 20px 0 0;
  }
}

/* ! 有料プランメリット ============================== */
[class*="area_cat_paid"]{
  padding: 30px 0;
}
[class*="area_cat_paid"] .layout{
  align-items: center;
}

.area_text_paid .ttl{
  font: 900 26px/1.4em 'noto sans japanese' , sans-serif;
  position: relative;
  padding: 0 0 0 100px;
  position: relative;
}
.area_text_paid .ttl:before{
  content: attr(data-ttl)"";
  color: #EC8A3F;
  font: 600 16px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 10px;
  display: block;
}
.area_text_paid .ttl:after{
  content: "";
  background: url(../img/shape/ico_ttl/ico_circle_ttl_cgm.svg);
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  width: 80px;
  height: 80px;
  position: absolute;
  left: 0;
  top: -10px;
}
[class*="message"] .area_text_paid .ttl:before{ color:#1493E6; }
[class*="template"] .area_text_paid .ttl:before{ color:#37BAA6; }
[class*="store"] .area_text_paid .ttl:before{ color:#DD5176; }
[class*="footprints"] .area_text_paid .ttl:before{ color:#2C6093; }
[class*="capital"] .area_text_paid .ttl:before{ color:#23A5AF; }
[class*="howmuch"] .area_text_paid .ttl:before{ color:#48BC63; }

[class*="message"] .area_text_paid .ttl:after{ background: url(../img/shape/ico_ttl/ico_circle_ttl_message.svg); }
[class*="template"] .area_text_paid .ttl:after{ background: url(../img/shape/ico_ttl/ico_circle_ttl_template.svg); }
[class*="store"] .area_text_paid .ttl:after{ background: url(../img/shape/ico_ttl/ico_circle_ttl_store.svg); }
[class*="footprints"] .area_text_paid .ttl:after{ background: url(../img/shape/ico_ttl/ico_circle_ttl_footprints.svg);}
[class*="capital"] .area_text_paid .ttl:after{ background: url(../img/shape/ico_ttl/ico_circle_ttl_capital.svg); }
[class*="howmuch"] .area_text_paid .ttl:after{ background: url(../img/shape/ico_ttl/ico_circle_ttl_howmuch.svg); }

.area_text_paid .add{
  color: #444;
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  position: relative;
}
.area_text_paid .add:before{
  content: "";
  background: #37baa6;
  width: 100%;
  height: 4px;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
}
.area_text_paid .description{
  color: #787C7B;
  font: 400 16px/1.8em 'noto sans japanese' , sans-serif;
  margin: 30px 0 0;
}
[class*="area_cat_paid"] .layout_half + .layout_half{
  margin: 0 0 0 30px;
}
[class*="area_cat_paid"] .reverse .layout_half + .layout_half{
  margin: 0 30px 0 0 ;
}
@media screen and (max-width: 860px){
  .area_text_paid .ttl{
    font-size: 22px;
    padding: 0 0 0 60px;
  }
  .area_text_paid .ttl:after{
    width: 50px;
    height: 50px;
  }
  .area_text_paid .add{
      font-size: 14px;
    }
  .area_text_paid .description{
    font-size: 14px;
    margin: 20px 0 0;
  }
}
@media screen and (max-width: 560px){
  [class*=area_cat_paid] .layout{
    display: block;
  }
  [class*=area_cat_paid] .layout_half+.layout_half{
    margin: 20px 0 0 !important;
  }
}
@media screen and (max-width: 480px){
  .area_text_paid .ttl:before{
    font-size: 14px;
    margin: 0 0 8px;
  }
  .area_text_paid .ttl{
    font-size: 20px;
  }
  .area_text_paid .description{
    font-size: 13px;
  }
  .area_text_paid .ttl:after{
    top: 0;
  }
}

/* ! 有料会員登録へ ============================== */
.area_cv_paid{
  color: #fff;
  background: #172858;
  padding: 50px 0;
  margin: 50px 0;
}
.area_cv_paid .layout{
  align-items: center;
}
.area_text_cv_paid .ttl{
  font: 600 32px/1em 'noto sans japanese' , sans-serif;
}
.area_text_cv_paid .ttl:before{
  content: "";
  background: url(../img/logo_white.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 150px;
  height: 24px;
  display: block;
  margin: 0 0 20px
}
.area_text_cv_paid .description{
  font: 400 14px/1.6em 'noto sans japanese' , sans-serif;
  margin: 20px 0 0;
}
.area_action_cv_paid{
  text-align: center;
}
@media screen and (max-width: 860px){
  .area_text_cv_paid .ttl{
    font-size: 28px;
  }
  .area_text_cv_paid .ttl:before{
    margin: 0 0 16px;
  }
  .area_text_cv_paid .description{
    font-size: 13px;
    margin: 16px 0 0;
  }
}
@media screen and (max-width: 767px){
  .area_cv_paid{
    padding: 40px 0 !important;
    margin: 30px 0;
  }
  .area_cv_paid .layout{
    display: block;
  }
  .area_text_cv_paid{
    text-align: center;
    margin: 0 0 30px !important;
  }
  .area_text_cv_paid .ttl:before{
    margin: 0 auto 16px;
  }
}
@media screen and (max-width: 560px){
  .area_text_cv_paid .ttl{
    font-size: 26px;
  }
  .area_text_cv_paid .ttl:before{
    height: 20px;
  }
}
@media screen and (max-width: 480px){
  .area_text_cv_paid .ttl{
    font-size: 24px;
  }
  .area_text_cv_paid .description{
    font-size: 12px;
  }
}

/* ボタンエリア */
.area_action_cv_paid p{
  margin: 0 0 14px;
  font: 500 18px/1em 'noto sans japanese' , sans-serif;
}
.area_action_cv_paid [class*="btn_"]{
  max-width: 440px;
  width: 100%;
  background: #fff;
  color: #172858;
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  border-radius: 3px;
  border-color: #fff;
}
.area_action_cv_paid [class*="btn_"]:hover{
  background: transparent;
  color: #fff;
}
@media screen and (max-width: 860px){
  .area_action_cv_paid p{
    font-size: 16px;
  }
  .area_action_cv_paid [class*=btn_]{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  .area_action_cv_paid p{
    margin: 0 0 10px;
    font-size: 14px;
  }
  .area_action_cv_paid [class*=btn_]{
    font-size: 16px;
  }
}

/* 有料会員登録へ＿一番下 */
.area_cv_paid.bottom{
  margin-bottom: 0;
  padding: 60px 0 80px;
}
.bottom .area_text_cv_paid .ttl:before{
  display: none;
}
.bottom .area_text_cv_paid{
  text-align: center;
  margin: 0 0 50px;
}

[class*=body_service_] .ttl strong{
    font-weight: 600;
    color: #48bc63;
}
.area_evaluation_tel .stars .clickable{
  cursor:pointer;
  background: url(../img/ico/ico_star_evaluation.svg) no-repeat left center;
  background-size: cover;
  height:100%;
  width:50%;
}
.stars .list{
	display:flex;
	margin: 0 -5px;
}
.stars .list > li{
	width: 20%;
	padding: 0 5px;
}
@charset "UTF-8";


.area_evaluation_tel .stars .clickable{
  cursor:pointer;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/ico/ico_star_evaluation.svg") no-repeat left center;
  background-size: cover;
  height:100%;
  width:50%;
}
.stars .list{
	display:flex;
	margin: 0 -5px;
}
.stars .list > li{
	width: 20%;
	padding: 0 5px;
}
@charset "UTF-8";

/* ! 株価算定 ————————————————————————————————————————————————————————————

株価一覧ページ
ステップ
コンテンツ
算定結果

———————————————————————————————————————————————————————————— */
.area_wrap_howmuch {
  width: 100%;
  /*max-width: 900px;*/
  margin: 0 auto;
  overflow: hidden
}
.area_wrap_howmuch + .area_wrap_howmuch {
  margin-top: 10px;
}
.area_wrap_howmuch .ttl_howmuch,
.area_wrap_howmuch .ttl_howmuch_large,
.area_wrap_howmuch .ttl_howmuch_exlarge {
  flex: 0 0 160px;
  margin: 0 10px 0 0;
  padding: 5px 0 0;
}
.area_wrap_howmuch .ttl_howmuch {
  font: 500 13px/1.2em 'noto sans japanese',sans-serif;
}

/* 合計とかの見出し */
.area_wrap_howmuch .ttl_howmuch_exlarge {
  font: 700 20px/1.2em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  padding: 0;
  height: 52px;
  border: 3px solid #000;
}


/* ! 株価一覧ページ ———————————————————————————————————————————————————————————— */
.area_howmuch {
  width: 100%;
}


/* ! ヘッド —————————————————————————————— */
.head_howmuch {
  margin: 20px 0 0;
  display: flex;
  align-items: center;
}
.head_howmuch [class*="btnarea"]{
  flex: 0 0 400px;
  margin: 0 30px 0 0;
}
[class*="btn_"][class*="howmuch"] {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 90px;
  max-width: 400px;
  width: 100%;
  border-width: 2px;
  transition: all 0.1s ease;
}
[class*="btn_"][class*="howmuch"]:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 16px 0 -8px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_white.svg") no-repeat center center;
  background-size: contain !important;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="howmuch"]:hover {
    color: #51C96D;
    background: #fff;
  }
  [class*="btn_"][class*="howmuch"]:hover:before {
    background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_green.svg") no-repeat center center;
  }
}
@media screen and (max-width: 1180px){
  .head_howmuch [class*="btnarea"]{
    flex: 0 0 360px;
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 1080px){
  .head_howmuch{
    display: block;
  }
  .head_howmuch [class*="btnarea"]{
     margin: 0 0 10px;
  }
}
@media screen and (max-width: 767px){
  [class*="btn_"][class*="howmuch"] {
    height: 70px;
  }
}
@media screen and (max-width: 767px){
  [class*="btn_"][class*="howmuch"] {
    font-size: 16px;
    height: 60px;
  }
}

/* バナー */
.head_howmuch .img{
  position: relative;
  flex: 1 1 auto;
  min-width: 10px;
}
.head_howmuch .img > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
@media screen and (min-width: 480px){
  .head_howmuch .img:hover{
    opacity: .9;
  }
}
@media screen and (max-width: 1080px){
  .head_howmuch .img{
    max-width: 560px;
  }
}


/* ! ボディ —————————————————————————————— */
.body_howmuch {
  margin: 50px 0 0;
}


/* ! レイアウト ———————————————————————————————————————————————————————————— */
.box_howmuch + .box_howmuch {
  margin: 60px 0 0;
}
@media screen and (max-width: 560px){
  .box_howmuch + .box_howmuch {
    margin: 40px 0 0;
  }
}

/* ! ヘッド —————————————————————————————— */
.head_box_howmuch {
  display: flex;
  align-items: center;
}
.head_box_howmuch .ttl {
  font: 600 24px/1em 'noto sans japanese',sans-serif;
}
.head_box_howmuch .btnarea {
  margin-left: auto;
}


/* ! ボディ —————————————————————————————— */
.body_box_howmuch {
  margin: 30px 0 0;
}


/* リスト */
.list_group_howmuch > li + li {
  margin: 30px 0 0;
}
.list_group_howmuch > li > article {
}


/* ! ヘッド —————————————————————————————— */
.head_group_howmuch {
  display: flex;
  align-items: flex-end;
  min-height: 28px;
}
.head_group_howmuch .ttl {
  font: 600 20px/1.4em 'noto sans japanese',sans-serif;
  padding: 0 0 0 36px;
  position: relative;
}
.head_group_howmuch .ttl:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/shape/ico_folder.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: .65em;
  left: 0;
  transform: translateY(-50%);
}
.head_group_howmuch [class*="btnarea"] {
  margin: 0 0 0 auto;
}
.head_group_howmuch [class*="btn_"] {
  color: #aaa;
  font: 400 11px/1em 'noto sans japanese',sans-serif;
  border: 1px solid #aaa;
  background: #fff;
  height: auto;
  padding: 4px 12px;
  border-radius: 100px;
}
.head_group_howmuch [class*="btn_"] + [class*="btn_"] {
  margin: 0 0 0 4px;
}
@media screen and (max-width: 767px){
  .head_group_howmuch .ttl {
    font-size: 18px;
    padding: 0 0 0 26px;
  }
  .head_group_howmuch .ttl:before {
    width: 20px;
    height: 20px;
  }
}
@media screen and (max-width: 560px){
  .head_group_howmuch{
    flex-wrap: wrap;
    flex-direction:column;
    align-items: flex-start
  }
  .head_group_howmuch [class*="btnarea"]{
    margin: 12px 0 0;
  }
}
@media screen and (max-width: 480px){
  .head_group_howmuch .ttl {
    font-size: 16px;
    padding: 0 0 0 24px;
  }
  .head_group_howmuch .ttl:before {
    width: 18px;
    height: 18px;
  }
}


/* ! ボディ —————————————————————————————— */
.body_group_howmuch {
  margin: 12px 0 0;
  border-radius: 10px;
  position: relative;
  background: #f4f4f4;
  padding: 20px;
}
/*
.body_group_howmuch:before {
  content: "";
  display: block;
  width: 2px;
  height: 100%;
  background: #ccc;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 10px;
}
*/

.list_group_howmuch .head_group [class*="btnarea"] {
  margin-left: auto;
}
@media screen and (max-width: 480px){
  .body_group_howmuch {
    padding: 8px;
  }
}


/* ! グループ化されていない —————————————————————————————— */
.box_howmuch_indivisual .head_group_howmuch .ttl {
  font-size: 16px;
  padding: 0;
}
.box_howmuch_indivisual .head_group_howmuch .ttl:before {
  content: none;
}
.box_howmuch_indivisual .body_group_howmuch {
  background: transparent;
  padding: 0 20px;
  margin: 20px 0 0;
  border-left: 3px solid #f7f7f7;
  border-radius: 0;
}
.box_howmuch_indivisual .body_group_howmuch article {
  border: 1px solid #ddd;
}
@media screen and (max-width: 480px){
  .box_howmuch_indivisual .body_group_howmuch {
    padding: 0 10px;
  }
}


/* グループの作成ボタン */
.button_create_group {
  color: #48BC63;
  font: 700 14px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  padding: 0 0 0 30px;
  position: relative;
  transition: all 0.1s ease;
  cursor: pointer;
}
.button_create_group:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/shape/ico_folder_add.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 480px){
  .button_create_group{
    font-size: 13px;
    padding: 0 0 0 26px;
  }
  .button_create_group:before {
    width: 18px;
    height: 18px;
  }
}
@media screen and (min-width: 480px){
  .button_create_group:hover {
    text-decoration: underline;
  }
}


/* ! 新しく算定 ———————————————————————————————————————————————————————————— */
.button_add_howmuch {
  color: #1E5076;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  border: 1px dotted #1E5076;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  width: 100%;
  max-width: 300px;
  cursor: pointer;
}
.button_add_howmuch:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/shape/ico_plus.svg) no-repeat center center;
  background-size: contain !important;
  margin: 0 6px 0 0;
}
@media screen and (min-width: 480px){
  .button_add_howmuch:hover {
    background: #fff;
  }
}
@media screen and (max-width: 767px){
  .button_add_howmuch {
    margin: 0 auto;
  }
}


/* ! リスト_作成した算定 —————————————————————————————— */
.list_howmuch {}
.list_howmuch > li + li {
  margin: 10px 0 0;
}
.list_howmuch article {
  background: #fff;
/*   border: 1px solid #ccc; */
  border-radius: 5px;
  padding: 30px;
  display: flex;
  position: relative;
}
.list_howmuch article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 860px){
  .list_howmuch article {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 560px){
  .list_howmuch article{
    padding: 14px;
    display: block;
  }
}

/* テキスト */
.list_howmuch .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_howmuch .name {
  font: 700 15px/1em 'noto sans japanese',sans-serif;
}


/* 金額 */
.list_price_result {
  display: flex;
  align-items: baseline;
  margin: 20px 0 0;
}
.list_price_result:before {
  content: "算定価格：";
  color: #777;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
}
.list_price_result > li + li {
  margin: 0 0 0 24px;
  position: relative;
}
.list_price_result > li + li:before {
  content: "〜";
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translate(-50% , -50%);
}
.list_price_result p {
  font: 600 24px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
}
.list_price_result p:before {
  content: "¥";
  font-size: .8em;
  display:inline-block;
  margin: 0 4px 0 0;
}
@media screen and (max-width: 960px){
  .list_price_result {
    flex-wrap: wrap;
  }
  .list_price_result:before {
    display: block;
    width: 100%;
    margin: 0 0 4px;
  }
}
@media screen and (max-width: 480px){
  .list_price_result p {
    font-size: 20px;
  }
}

/* 情報 */
.list_info_howmuch {
  display: flex;
  flex-wrap: wrap;
  margin: 20px 0 0;
}
.list_info_howmuch p {
  color: #333;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
}
.list_info_howmuch > li {
  padding: 2px 0;
}
.list_info_howmuch > li + li {
  margin: 0 0 0 24px;
  position: relative;
}
.list_info_howmuch > li + li:before {
  content: "/";
  position: absolute;
  top: 50%;
  left: -12px;
  transform: translate(-50% , -50%);
}
@media screen and (max-width: 480px){
  .list_info_howmuch > li + li {
    margin: 0 0 0 16px;
  }
  .list_info_howmuch > li + li:before {
    left: -8px;
  }
  .list_info_howmuch p {
    font-size: 12px;
  }
}

/* ステータス */
.list_howmuch .list_price_status {
  color: #fff;
  font: 700 13px/1em 'noto sans japanese',sans-serif;
  background: #1e5076;
  width: 100%;
  max-width: none;
  height: 32px;
  border: 1px solid #1e5076;
  border-radius: 5px;
  border-width: 2px;
  letter-spacing: .04em;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 編集可能回数 */
.editable_count {
  background: #777;
  color: #fff;
  padding: 1px 10px 3px;
  position: absolute;
  top: -1px;
  right: -1px;
  border-radius: 0 4px 0 0;
}
.editable_count p {
  font-size: 10px;
}

/* ! ボタンエリア —————————————————————————————— */
.area_button {
  flex: 0 0 160px;
  margin: 0 0 0 20px;
  display: flex;
  flex-direction: column;
}
@media screen and (max-width: 860px){
  .area_button {
    flex: 0 0 100%;
    margin: 30px 0 0;
  }
}

/* ! インフォ_ヘッド —————————————————————————————— */
.area_button .head {
  flex: 1 1 0;
}
.area_button > .text {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  margin: auto 0 0;
}
.list_howmuch .date {
  color: #777;
  font: 500 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_button .button_text {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 560px){
  .area_button{
    flex: 0 0 auto;
    margin: 10px 0 0;
  }
  .area_button > .text {
    margin: 8px 0 0;
  }
}

/* ! インフォ_ボディ —————————————————————————————— */
.area_button .body {
  display: flex;
  justify-content: center;
  margin: 5px 0 5px;
}
.area_button [class*="btn_"] {
  color: #1E5076;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  height: 24px;
  width: 100%;
  max-width: 50px;
  padding: 0;
  background: #fff;
  border-color: #1E5076;
/*   border-color: #7f8eca; */
}
@media screen and (min-width: 480px){
  .area_button [class*="btn_"]:hover {
    color: #fff;
    background: #1E5076;
  }
}
.area_button [class*="btn_"][class*="full"] {
  color: #fff;
  font: 700 13px/1em 'noto sans japanese',sans-serif;
  background: #1E5076;
  width: 100%;
  max-width: none;
  height: 32px;
  border-width: 2px;
}
@media screen and (min-width: 480px){
  .area_button [class*="btn_"][class*="full"]:hover {
    color: #1E5076;
    background: #fff;
  }
}
.area_button [class*="btn_"][class*="delete"] {
  color: #7f8eca;
  background: #F7F9F9;
  border-color: #F7F9F9;
}
.area_button [class*="btn_"] + [class*="btn_"] {
  margin: 0 0 0 4px;
}



/* ! コンテンツ ———————————————————————————————————————————————————————————— */
.area_cnt_howmuch {
  margin: 60px 0 0;
}
@media screen and (max-width: 560px){
  .area_cnt_howmuch {
    margin: 40px 0 0;
  }
}
.area_cnt_howmuch .minus,
.list_price_howmuch  [class*=price_].minus:before {
  color: #ed6086;
}

/* ! ヘッド_ —————————————————————————————— */
.head_cnt_howmuch {
  padding: 0 0 30px;
  margin: 0 0 30px;
  border-bottom: 1px solid #EEE;
}
.head_cnt_howmuch .ttl {
  font: 600 24px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
}
.head_cnt_howmuch .description {
  font: 300 13px/1.3em 'noto sans japanese',sans-serif;
}


/* ! 株価算定フォーム ———————————————————————————————————————————————————————————— */
.list_form_howmuch > li {
  display: flex;
}

/* ! ヘッド —————————————————————————————— */
.head_form_howmuch {
  flex: 0 0 180px;
}
.head_form_howmuch .ttl {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  position: relative;
}
.head_form_howmuch .ttl .small {
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .08em;
  display: inline-block;
  padding: 3px 0;
}


/* 必須 */
.required .head_form_howmuch .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%);
}

.required .wrap_required input,
.required .wrap_required select,
.required .wrap_required textarea{
/*   background: #FFF2F5; */
}



/* アラート表記 */
.area_alert {
  margin: 4px 0 8px;
}
.area_alert .ttl {
  color: #ED6086;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  background: #fff;
  border: 1px solid #ED6086;
  padding: 4px 12px !important;
  display:inline-block;
}



/* ! ボディ —————————————————————————————— */
.body_form_howmuch {
  flex: 1 1 auto;
  min-width: 10px;
}
.body_form_howmuch > p {
  font: 400 16px/1em 'noto sans japanese',sans-serif;
}

/* ! オンオフエリア ———————————————————————————————————————————————————————————— */
.area_change_howmuch {
  padding: 30px;
  background: #D3F0DA;
}
@media screen and (max-width: 560px){
  .area_change_howmuch {
    padding: 20px;
  }
}

/* ボディ */
.body_change_howmuch {
  margin: 20px 0 0;
  display: flex;
}
.body_change_howmuch .wrap_checkbox label {
  height: auto;
}


/* ! BSの入力などフォームを横並びにするレイアウト ———————————————————————————————————————————————————————————— */
.layout_list_form_howmuch {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
}
.layout_list_form_howmuch > section {
  width: calc((100% - 80px) / 2);
}
.layout_list_form_howmuch > section + section {
  margin-left: auto !important;
}
@media screen and (max-width: 1000px){
  .layout_list_form_howmuch > section {
    width: calc((100% - 40px) / 2);
  }
}
@media screen and (max-width: 767px){
  .layout_list_form_howmuch > section {
    width: 100%;
  }
}


/* ! 時価評価額を非表示 —————————————————————————————— */
.hide_market_value .unit_min,
.hide_market_value .unit_min + .current_price {
  opacity: 0;
  position: absolute;
  pointer-events: none;
}
.show_market_value [class*="list_form"][class*="howmuch"] > li:not(.bs_header) {
  flex-wrap: wrap;
}
.show_market_value .area_bs li:not(.bs_header) .head_form_howmuch {
  flex: 0 0 100%;
  margin: 0 0 8px;
}
.show_market_value .area_bs li.bs_header .head_form_howmuch {
  flex: 0 0 50%;
}
.show_market_value .head_form_howmuch .ttl br {
  display: none;
}
@media screen and (max-width: 767px){
  .area_bs li:not(.bs_header) .head_form_howmuch {
    margin: 0 0 8px;
  }
}

/* エラー表示考慮 */
[class*="wrap_input"][class*="bs"] > div{
  width: 50%;
}
.hide_market_value [class*="wrap_input"][class*="bs"] > div{
  width: 100%;
}


/* ! BSエリア —————————————————————————————— */
.area_bs {
  display: flex;
  flex-direction: column;
}
.area_bs .head_form_howmuch {
  flex: 0 0 180px;
  margin: 0 10px 0 0;
}
@media screen and (max-width: 767px){
  .area_bs .head_form_howmuch{
    margin: 0;
  }
}

/* ヘッド */
.head_bs {
  margin: 60px 0 6px;
  height: 24px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.head_bs .ttl {
  font: 700 22px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 16px;
  border-left: 6px solid #000;
}
@media screen and (max-width: 767px){
  .head_bs {
    margin: 60px 0 10px;
  }
}
@media screen and (max-width: 480px){
  .head_bs {
    margin: 40px 0 6px;
  }
  .head_bs .ttl{
    font-size: 18px;
  }
}

/* ボディ */
.body_bs {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  flex-direction: column;
}
/* 見出し(帳簿価格、時価評価額) */
[class*="list_form"][class*="howmuch"] > .bs_header {
  position: relative;
  height: 56px !important;
}
.bs_header:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: 14px;
  left: 0;
}
.bs_header p:before {
  content: attr(data-header-hide)"";
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .06em;
}
.show_market_value .bs_header p:before {
  content: attr(data-header-show)"";
}
@media screen and (max-width: 767px){
  [class*="list_form"][class*="howmuch"] > .bs_header {
    height: 44px !important;
  }
  .show_market_value [class*="list_form"][class*="howmuch"] > .bs_header {
    display: flex;
  }
}

/* ! 小計 —————————————————————————————— */
[class*="list_form"][class*="howmuch"] [class*="howmuch_subtotal"] {
  border-top: 1px dotted #ccc;
  height: 48px;
  padding: 6px 0 0;
}
[class*="list_form"][class*="howmuch"] [class*="howmuch_subtotal"] .ttl {
  font-weight: 300;
}

/* エンドの場合 */
[class*="list_form"][class*="howmuch"] [class*="howmuch_subtotal"][class*="_end"] {
  border-bottom: 1px solid #666;
  padding: 6px 0 54px;
  margin: 0 0 16px;
  height: 106px;
}
.show_market_value [class*="list_form"][class*="howmuch"] [class*="howmuch_subtotal"][class*="_end"] {
  padding-top: 10px;
}


/* ! 合計 —————————————————————————————— */
.area_total_howmuch {
  display: flex;
  align-items: center;
  border-top: 3px solid #000;
  margin-top: auto;
  padding: 10px 0;
}
.area_total_howmuch .wrap_disabled input:not([type="checkbox"]) {
  font-size: 20px;
}
.area_total_howmuch .head_form_howmuch{
  flex: 0 0 80px;
}

/* 時価評価額あり */
.show_market_value .area_total_howmuch {
  flex-wrap: wrap;
}


/* ! 実績と将来予測 ———————————————————————————————————————————————————————————— */
.area_prediction {
  margin: 40px 0 0;
  overflow-x: auto;
}
.area_prediction .head_form_howmuch {
  flex: 0 0 220px;
}
@media screen and (max-width: 767px){
  .area_prediction .head_form_howmuch{
    margin: 0 0 10px;
  }
}

.body_form_howmuch p,
.wrap_input_prediction .wrap_input {
    min-width: 165.5px;
}

/* N+1_表示非表示 */
.hide_next_term .body_form_howmuch > p:nth-of-type(3),
.hide_next_term .body_form_howmuch > .wrap_input_prediction > div:nth-of-type(3) {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* N+2_表示非表示 */
.hide_after_next_term .body_form_howmuch > p:nth-of-type(4),
.hide_after_next_term .body_form_howmuch > .wrap_input_prediction > div:nth-of-type(4) {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* N+3_表示非表示 */
.hide_after_after_next_term .body_form_howmuch > p:nth-of-type(5),
.hide_after_after_next_term .body_form_howmuch > .wrap_input_prediction > div:nth-of-type(5) {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* N+4_表示非表示 */
.hide_after_after_after_next_term .body_form_howmuch > p:nth-of-type(6),
.hide_after_after_after_next_term .body_form_howmuch > .wrap_input_prediction > div:nth-of-type(6) {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
}

/* 見出し(帳簿価格、時価評価額) */
.prediction_header {
  display: flex;
  position: relative;
  height: 40px;
}
.prediction_header:before {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: 14px;
  left: 0;
}

.prediction_header .head_form_howmuch {
  flex: 0 0 220px;
}
.prediction_header .body_form_howmuch {
  display: flex;
  flex: 1 1 auto;
  min-width: 10px;
}
.prediction_header .body_form_howmuch > p {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .06em;
  flex: 1 1 0%;
}
@media screen and (max-width: 767px){
  .prediction_header .head_form_howmuch{
    flex: 0 0 auto;
  }
}
@media screen and (max-width: 640px){
  .prediction_header{
    display: none;
  }
}

/*  */
[class*="wrap_input"][class*="prediction"] > div{
  width: 100%;
}
@media screen and (max-width: 640px){
  [class*="wrap_input"][class*="prediction"]{
    flex-direction:column;
  }
  [class*="wrap_input"][class*="prediction"] > div{
    padding: 0 0 0 50px;
    position: relative;
  }
  [class*="wrap_input"][class*="prediction"] > div:before{
    content: attr(data-ttl);
    font-weight: 200;
    font-size: 12px;
    display: inline-block;
    margin: 0 0 0 4px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}

/* ! 株価算定用のフォーム ———————————————————————————————————————————————————————————— */
[class*="list_form"][class*="howmuch"]  {
  margin: 0 0 30px;
}
[class*="list_form"][class*="howmuch"] > li {
  display: flex;
  align-items: center;
  height: 60px;
  padding: 0 0 12px;
}
[class*="list_form"][class*="howmuch"][class*="auto"] > li  {
  height: auto;
}
[class*="list_form"][class*="howmuch"] [class*="wrap_input"]:after {
  content: attr(data-unit)"";
  color: #000;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-30%);
}
@media screen and (max-width: 767px){
  [class*="list_form"][class*="howmuch"] > li {
    display: block;
    padding: 0 0 30px;
    height: auto;
  }
}
@media screen and (max-width: 480px){
  [class*="list_form"][class*="howmuch"] > li {
    padding: 0 0 20px;
  }
}
@media screen and (max-width: 430px){
  [class*="list_form"][class*="howmuch"] [class*="wrap_input"]:after{
    font-size: 10px;
    right: 5px;
  }
}
@media screen and (max-width: 400px){
  [class*="list_form"][class*="howmuch"] [class*="wrap_input"]:after{
    top: auto;
    bottom: 4px;
    transform: translateY(0);
  }
}

/* 必須項目がないフォーム */
[class*="list_form"][class*="howmuch"][class*="norequired"] .head_form_howmuch .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%);
}


/* 基本は金額のinput */
[class*="list_form"][class*="howmuch"] input,
[class*="list_form"][class*="howmuch"] select {
  text-align: right;
  font-size: 18px;
  border-radius: 4px;
  padding-right: 26px;
  padding-left: 8px;
}

/* 金額13桁以上のinput */
[class*="list_form"][class*="howmuch"] .huge input{
  font-size: 13px;
}
@media screen and (max-width: 767px) and (min-width: 560px){
  [class*="list_form"][class*="howmuch"] .huge input{
    font-size: 18px;
  }
}
@media screen and (max-width: 430px){
  [class*="list_form"][class*="howmuch"] .huge input{
    padding-right: 16px;
    padding-left: 4px;
  }
}
@media screen and (max-width: 400px){
  [class*="list_form"][class*="howmuch"] .huge input{
    padding-right: 4px;
    padding-left: 4px;
  }
}


/* 日本語の場合 */
[class*="list_form"][class*="howmuch"] .wrap_jp input,
[class*="list_form"][class*="howmuch"] .wrap_jp select {
  font-size: 16px;
  text-align: left;
}


/* inputのタイトル */
[class*="ttl_input"] {
  font: 500 13px/1.2em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 50%;
  left: 6px;
  transform: translateY(-50%);
  z-index: 1;
}
.required [class*="ttl_input"] {
  left: 24px;
}
[class*="ttl_input"][class*="min"] {
  color: #C1C5D3;
  font: 400 11px/1.2em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  top: 3px;
  transform: none;
}

/* selectのスタイル */
[class*="list_form"][class*="howmuch"] select {
  font: 500 13px/1.2em 'noto sans japanese',sans-serif;
}



/* ! クエスチョンバルーン —————————————————————————————— */
.area_question {
  font: 300 12px/1em 'Roboto','noto sans japanese',sans-serif;
  color: #ccc;
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 100px;
  position: absolute;
  left: 4px;
  bottom: 4px;
}
.area_question:before {
  content: "？";
}


/* ! ステップ ———————————————————————————————————————————————————————————— */
[class*="button_change_"]  {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  width: auto;
  padding: 0 0 0 20px;
  position: relative;
  cursor: pointer;
}
[class*="button_change_"]:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  border: 1px solid transparent;
  background: #fff;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
[class*="button_change_"].show_market_value:before,
[class*="button_change_"].show_next_term:before,
[class*="button_change_"].show_after_next_term:before,
[class*="button_change_"].show_after_after_next_term:before,
[class*="button_change_"].show_after_after_after_next_term:before {
  background: #48BC63 url(../img/shape/ico_check_white.svg) no-repeat center center !important;
  background-size: 12px 12px !important;
}
[class*="button_change_"] + [class*="button_change_"] {
  margin: 0 0 0 20px;
}
@media screen and (max-width: 560px){
  .body_change_howmuch .wrap_checkbox{
    flex-direction:column;
    align-items: flex-start;
  }
  [class*="button_change_"]{
    flex-direction:column;
    align-items: flex-start;
  }
  [class*="button_change_"] + [class*="button_change_"] {
    margin: 10px 0 0;
  }
}


/* ! 類似会社 ———————————————————————————————————————————————————————————— */
.area_similar {

}

/* ! 類似会社の選択 —————————————————————————————— */
.area_similar form > .ttl {
  margin: 0 0 30px;
}
@media screen and (max-width: 480px){
  .area_similar form > .ttl {
    margin: 0 0 16px;
    font-size: 13px;
  }
}

/* ボタン */
.button_modal_similer {
  color: #C1C5D3;
  font: 400 16px/1.5em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 12px 0 24px;
  height: 52px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background: #fff;
  border: 1px solid #E5E6EA;
  border-radius: 5px;
  width: 100%;
  flex: 1 1 auto;
  min-width: 10px;
  cursor: pointer;
}
/* 選択されたもの */
.button_modal_similer.selected {
  border-color: #1E5076;
}
.button_modal_similer.selected p {
  color: #000;
  font: 500 16px/1.3em 'noto sans japanese',sans-serif;
  border-color: #000;
}
.button_modal_similer.selected p span {
  font: 300 14px/1em 'noto sans japanese',sans-serif;
  display: inline-block;
  margin: 0 0 0 4px;
}
@media screen and (max-width: 767px){
  .button_modal_similer.selected p{
    font-size: 14px;
  }
}


/* 類似会社選択エリア */
.area_wrap_similer {
  width: 100%;
  height: 100%;
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}
.area_wrap_similer.show {
  pointer-events: all;
  opacity: 1;
}
.area_cover_similer {
  flex: 1 1 auto;
  min-width: 10px;
}
.area_select_similer {
  height: 100%;
  background: #fff;
  box-shadow: 0px 0px 20px 0px rgba(0,0,0,.1);
  flex: 0 0 400px;
  transition: all 0.4s ease;
}
.hide .area_select_similer {
  transform: translateX(100%);
}
.show .area_select_similer {
  transform: translateX(0);
}






/* ! 株価算定ボタンエリア —————————————————————————————— */
.area_cnt_howmuch .btnarea_step {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #eee;
  margin: 0 auto;
  margin-top: 40px;
  padding: 30px 0 0;
}
.area_cnt_howmuch .btnarea_step [class*="btn_"] {
  width: 200px;
}
.area_cnt_howmuch .btnarea_step [class*="btn_"] + [class*="btn_"] {
  margin-left: 8px;
}




/* ! 算定結果 ———————————————————————————————————————————————————————————— */
.area_result_howmuch .head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.area_result_howmuch .head .ttl {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
}
.area_result_howmuch .head [class*="btnarea"] {
  margin-left: auto;
}
@media screen and (max-width: 767px){
  .area_result_howmuch .head .ttl{
    font-size: 18px;
  }
}


/* ! 算定金額 —————————————————————————————— */
.area_price_howmuch {
  padding: 60px 0 100px;
}
@media screen and (max-width: 460px){
  .area_price_howmuch {
    padding: 40px 0 60px;
  }
}

/* リスト */
.list_price_howmuch {
  display: flex;
  flex-wrap: wrap;
  margin: -8px 0;
}
.list_price_howmuch > li{
  min-width: 110px;
  padding: 8px 0;
}
.list_price_howmuch > li:last-child{
  min-width: 170px;
}
.list_price_howmuch > li + li {
  padding-left: 60px;
  position: relative;
}
.list_price_howmuch > li + li:before {
  content: "〜";
  color: #999DAC;
  font: 400 20px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  bottom: 0;
  left: 30px;
  transform: translate(-50% , -50%);
}
.list_price_howmuch [class*="price_"] {
  font: 300 56px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: -.04em;
  padding: 16px 0 0;
  position: relative;
}
.list_price_howmuch [class*="price_"]:before {
  content: "¥";
  color: #999DAC;
  font: 400 32px/1em 'Roboto','noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 8px 0 0;
}
.list_price_howmuch [class*="price_"]:after {
  content: "最小算定金額";
  letter-spacing: .08em;
  color: #999DAC;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 0;
  left: 24px;
}
.list_price_howmuch [class*="price_"][class*="max"]:after {
  content: "最大算定金額";
}
@media screen and (max-width: 1000px){
  .list_price_howmuch [class*="price_"]{
    font-size: 52px;;
  }
}
@media screen and (max-width: 767px){
  .list_price_howmuch [class*="price_"]{
    font-size: 44px;;
  }
  .list_price_howmuch [class*="price_"]:before{
    font-size: 24px;
  }
  .list_price_howmuch [class*="price_"]:after{
    font-size: 12px;
  }
  .list_price_howmuch > li + li {
    padding-left: 40px;
  }
}
@media screen and (max-width: 560px){
  .list_price_howmuch [class*="price_"]{
    font-size: 36px;;
  }
}



/* ! グラフエリア —————————————————————————————— */
/* タイトル */
.area_graph_howmuch_wrapper {
  position: relative;
  padding: 4px 60px 0 140px;
}
.area_graph_howmuch_wrapper + .area_graph_howmuch_wrapper {
  margin-top: 80px;
}
.area_graph_howmuch_wrapper:before {
  content: attr(data-ttl)"";
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 0;
  left: 0;
}
@media screen and (max-width: 767px){
  .area_graph_howmuch_wrapper {
    padding: 64px 60px 0 36px;
  }
  .area_graph_howmuch_wrapper + .area_graph_howmuch_wrapper {
    margin-top: 30px;
  }
  .area_graph_howmuch_wrapper:before{
    font-size: 13px;
  }
}

/* グラフ */
.area_graph_howmuch {
}
.area_graph_howmuch .bar {
  width: 100%;
  height: 5px;
  background: #F0F1F4;
  position: relative;
}
[class*="dot_price"] {
  width: 16px;
  height: 16px;
  background: #fff;
  border: 2px solid #40C45F;
  border-radius: 100px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(-50% , -50%);
  z-index: 1;
  box-shadow: 0px 4px 8px -2px rgba(0,0,0,.15);
}
@media screen and (min-width: 480px){
  [class*="dot_price"]:hover {
    z-index: 2;
  }
}
[class*="dot_price"] > span {
  position: relative;
  display: block;
}
[class*="dot_price"] > span:before {
  content: attr(data-num) "";
  color: #fff;
  font: bold 13px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .04em;
  height: auto;
  width: auto;
  border: 2px solid #fff;
  display: inline-block;
  background: #3B3C41 url(../img/shape/ico_yen_white.svg) no-repeat left 10px bottom 7px;
  background-size: 8px 8px;
  padding: 4px 12px 4px 24px;
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50% , -36px);
  box-shadow: 0px 4px 6px -2px rgba(0,0,0,.1);
}
[class*="dot_price"] > span:after {
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 4px 0 4px;
  border-color: #3B3C41 transparent transparent transparent;
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translate(-50% , -12px);
}


/* カラー部分 */
.bar_color {
  height: 6px;
  display: block;
  background: rgb(64,196,95);
  background: -moz-linear-gradient(left, rgba(64,196,95,1) 0%, rgba(64,196,171,1) 100%);
  background: -webkit-linear-gradient(left, rgba(64,196,95,1) 0%,rgba(64,196,171,1) 100%);
  background: linear-gradient(to right, rgba(64,196,95,1) 0%,rgba(64,196,171,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#40c45f', endColorstr='#40c4ab',GradientType=1 );
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* メモリ */
.area_scale {
  min-height: 20px;
  display: flex;
  position: relative;
}
.area_scale:after {
  content: attr(data-unit)"";
  color: #999DAC;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 0;
  right: -40px;
}
.area_scale > span {
  flex: 1 1 0;
  position: relative;
}
.area_scale > span:before,
.area_scale > span:after {
  content: attr(data-scale)"";
  color: #999DAC;
  font: bold 13px/1em 'Roboto','noto sans japanese',sans-serif;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
}
.area_scale > span:after {
  content: attr(data-scale-end)"";
  position: absolute;
  top: 0;
  left: auto;
  right: 0;
  transform: translateX(50%);
}

/* 簿価純資産 */
.book_value {
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}
.book_value > span{
  color: #fff;
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
  padding: 0 12px;
  height: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  background: #05A2A8;
  position: relative;
}
.book_value > span:before {
  content: "";
  display: block;
  height: 260px;
  border: 1px dashed #05A2A8;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: -1;
}

/* ! 競合会社比較法アラート ———————————————————————————————————————————————————————————— */
.alert_howmuch_comparison {
  margin: 60px 0 0;
}
.alert_howmuch_comparison .ttl {
  color: #ED6086;
  font: 600 14px/1em 'noto sans japanese',sans-serif;
  border: 2px solid #ED6086;
  border-radius: 4px;
  padding: 20px 20px 20px 60px;
  position: relative;
}
.alert_howmuch_comparison .ttl:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background: url(../img/shape/ico_attention_red.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.alert_howmuch_comparison .ttl + .ttl{
  margin: 6px 0 0;
}
@media screen and (max-width: 480px){
  .alert_howmuch_comparison .ttl {
    font: 600 12px/1.3em 'noto sans japanese',sans-serif;
    padding: 16px 16px 16px 50px;
  }
  .alert_howmuch_comparison .ttl:before {
    width: 20px;
    height: 20px;
    left: 16px;
  }
}

/* ! パラメーター ———————————————————————————————————————————————————————————— */
.area_parameter {
  margin: 40px 0 0;
}
.area_parameter .blur {
  color: #fff;
  text-align: center;
  width: 100%;
  height: 300px;
  background: url(../img/bg_parameter.png) no-repeat center center;
  background-size: cover;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.area_parameter .blur p {
  font: 600 18px/1.4em 'noto sans japanese',sans-serif;
}
/* レイアウト */
.area_parameter .layout {
  display: flex;
  margin: 30px 0 0;
}
.area_parameter .img {
  flex: 0 0 50%;
  margin: 0 30px 0 0;
}
.area_parameter img {
  vertical-align: bottom;
}
.area_parameter .text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 640px){
  .area_parameter .layout{
    display: block;
  }
  .area_parameter .img{
    margin: 0 0 16px;
  }
}

/* ボタン */
.area_parameter [class*="btnarea"] {
  margin-top: auto;
}


/* ! 表示されたパラメーター ———————————————————————————————————————————————————————————— */
.area_parameter_show {
  border: 2px solid #48BC63;
  border-radius: 8px;
  padding: 40px;
}
@media screen and (max-width: 1000px){
  .area_parameter_show {
    padding: 30px;
  }
}
@media screen and (max-width: 560px){
  .area_parameter_show {
    padding: 30px 20px;
  }
}

/* ! ヘッド —————————————————————————————— */
.body_parameter_show > article + article {
  margin: 40px 0 0;
}
.body_parameter_show .ttl {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 10px;
}
@media screen and (max-width: 767px){
  .body_parameter_show .ttl{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  .body_parameter_show .ttl{
    font-size: 16px;
  }
}

/* ! テーブル_パラメーター —————————————————————————————— */
.table_parameter {
  width: 100%;
}
.table_parameter th,
.table_parameter td {
  padding-top: 4px;
  padding-bottom: 4px;
}
.table_parameter th {
  font: 900 14px/1em 'noto sans japanese',sans-serif;
}
.table_parameter th:first-child{
  display: none;
}
.table_parameter td {
}
.table_parameter td p {
  font: 400 14px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 4px;
}
.th_30 {
  width: 30px;
}
.th_center {
  text-align: center;
}
.td_right {
  text-align: right;
}
@media screen and (max-width: 640px){
  .table_parameter td p{
    font-size: 13px;
  }
  .table_parameter th{
    font-size: 13px;
  }
}

/* テーブル_スクロール */
@media screen and (max-width: 1000px){
  [class*="area_scroll_table_"][class*="1000"]{
    overflow-x: auto;
  }
  [class*="area_scroll_table_"][class*="1000"] table{
    min-width: 700px;
    -webkit-overflow-scrolling: touch;
  }
  [class*="area_scroll_table_"][class*="1000"] table.min_560{ min-width: 560px;}
  [class*="area_scroll_table_"][class*="1000"] table.min_700{ min-width: 700px;}
}

/* ティーヘッド */
.table_parameter thead th {
}

/* 各指標 */
.table_parameter.indicator{
  table-layout: fixed;
}

.td_80{ width: 80px;}
.td_170{ width: 170px;}

/* フリー会員 */
.table_parameter [class*="text_blur_"]{
  height: 18px;
  background: url(../img/img_blur_text01.svg) no-repeat left center;
  background-size: contain!important;
}
.table_parameter [class*="text_blur_"][class*="02"]{ background: url(../img/img_blur_text02.svg) no-repeat center center;}
.table_parameter [class*="text_blur_"][class*="03"]{ background: url(../img/img_blur_text03.svg) no-repeat center center;}
.table_parameter .number_blur{
  height: 16px;
  background: url(../img/img_blur_number.svg) no-repeat right center;
  background-size: contain!important;
}

/* ! 算定書出力 —————————————————————————————— */
.area_export_howmuch .text {
  margin: 30px 0;
}
.area_export_howmuch [class*="btn_"] {
  min-width: 400px;
}
@media screen and (max-width: 480px){
  .area_export_howmuch .text p{
    font-size: 13px;
  }
}

/* サンプルリスト */
.list_sample_howmuch {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
  margin-top: 30px;
}
.list_sample_howmuch > li {
  padding: 4px;
}
.list_sample_howmuch > li > img {
  height: 150px;
  vertical-align: bottom;
  border: 1px solid #eee;
}
@media screen and (max-width: 560px){
  .list_sample_howmuch > li{
    width: 50%;
  }
}
@media screen and (max-width: 480px){
  .list_sample_howmuch > li > img{
    height: auto;
  }
}


/* ! ==================================================
　株価算定に関するお問い合わせ_ファミリア
================================================== */
.area_bnr_familia {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  border: 2px solid #eee;
  transition: all 0.1s ease;
  position: relative;
}
@media screen and (min-width: 480px){
  .area_bnr_familia:hover {
    border-color: #f39800;
  }
}
.area_bnr_familia > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.area_bnr_familia .logo {
  height: 44px;
  vertical-align: bottom;
}
.area_bnr_familia .description {
  color: #555;
  margin: 20px 0 0;
}
.area_bnr_familia .link {
  color: #ccc;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  position: absolute;
  right: 15px;
  bottom: 15px;
  transition: all 0.1s ease;
}
.area_bnr_familia .link:after {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/shape/ico_external_link_gray.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 0 0 6px;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .area_bnr_familia:hover .link:after {
    background: url(../img/shape/ico_external_link_orange.svg);
  }
  .area_bnr_familia:hover .link {
    color: #f39800;
  }
}
@media screen and (max-width: 480px){
  .area_bnr_familia {
    padding: 20px 20px 40px;
  }
  .area_bnr_familia .logo {
    height: 32px;
  }
  .area_bnr_familia .description {
    margin: 12px 0 0;
    font-size: 13px;
  }
  .area_bnr_familia .link {
    font-size: 12px;
    bottom: 10px;
    right: 10px;
  }
}




/* ! 代理記入 ———————————————————————————————————————————————————————————— */
.area_proxy {
  width: 100%;
}

/* ! ヘッド —————————————————————————————— */
.head_proxy {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0 0 30px;
}
.head_proxy .ttl {
  font: 500 32px/1.3em 'noto sans japanese',sans-serif;
}
.head_proxy .description {
  font: 300 13px/1.5em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  text-align: center;
  margin: 24px 0 0;
}
.head_proxy .description + .description {
  margin: 16px 0 0;
}


/* ! ボディ —————————————————————————————— */
.body_proxy {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.body_proxy [class*="btnarea_"] {
  margin: 30px 0 0;
}

/* ! select2 —————————————————————————————— */
.select2-container {
  width: 100% !important;
}

@charset "UTF-8";

/* ! 資本政策 ————————————————————————————————————————————————————————————

資本政策

———————————————————————————————————————————————————————————— */
/* ページレイアウト */
.page_capital .area_main_layout {
  margin: 3px;
}
.page_capital .layout_main,
.page_capital > .container,
.page_capital .area_main_layout {
  max-width: none;
}
.page_capital .area_main_layout {
  align-items: inherit;
}
.capital_policy.area_main_layout{
  flex-wrap: nowrap !important;
}

/* ! 資本政策一覧ページ ———————————————————————————————————————————————————————————— */
.area_capital {
  width: 100%;
  position: relative;
}
.list_group_capital > li + li {
  margin: 12px 0 0;
}
.list_group_capital > li > article {
  background: #E5E6EA;
  padding: 10px;
  border-radius: 10px;
}
.list_group_capital .head_group {
  display: flex;
  align-items: center;
  padding: 12px 6px 6px;
}
.list_group_capital .ttl {
  font: 600 16px/1.4em 'noto sans japanese',sans-serif;
}
.list_group_capital .head_group [class*="btnarea"] {
  margin-left: auto;
}

/* ! スマホ表示 —————————————————————————————— */
.area_capital_sp {
  display: none;
}
@media screen and (max-width: 600px){
  .area_capital {
    max-height: 200px;
    overflow: hidden;
  }
  .area_capital_sp {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 40px;
    border-radius: 5px;
    width: 100%;
    height: 100%;
    background: #3fb0c4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .area_capital_sp .ttl {
    color: #fff;
    font: 600 15px/1.5em 'noto sans japanese',sans-serif;
    text-align: center;
  }
}



/* ! ヘッド —————————————————————————————— */
.head_howmuch {
  margin: 20px 0 0;
}
[class*="btn_"][class*="capital"] {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 90px;
  max-width: 400px;
  width: 100%;
  border-width: 2px;
  transition: all 0.1s ease;
  background: #3fb0c4;
  border-color: #3fb0c4;
}
[class*="btn_"][class*="capital"]:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 16px 0 -8px;
  background: url(../img/shape/ico_pen_white.svg) no-repeat center center;
  background-size: contain !important;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="capital"]:hover {
    color: #3fb0c4;
    background: #fff;
  }
  [class*="btn_"][class*="capital"]:hover:before {
    background: url(../img/shape/ico_pen_skyblue.svg) no-repeat center center;
  }
}

@media screen and (max-width: 767px){
  [class*="btn_"][class*="capital"] {
    height: 70px;
  }
}
@media screen and (max-width: 767px){
  [class*="btn_"][class*="capital"] {
    font-size: 16px;
    height: 60px;
  }
}


/* ヘッド */
.area_capital .head {
  /* margin: 0 0 20px; */
}

/* 作成した資本政策リスト */
.list_capital_created {
  margin: 12px 0 0;
}
.list_capital_created > li {

}
.list_capital_created > li + li {
  margin: 4px 0 0;
}
.list_capital_created article {
  background: #fff;
  border-radius: 5px;
  height: 60px;
  padding: 0 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  position: relative;
}
.list_capital_created article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.list_capital_created .text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1 1 auto;
  min-width: 10px;
}
.list_capital_created .date {
  color: #666;
  font: 300 12px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 20px 0 0;
}
.list_capital_created .name {
  font: 500 16px/1em 'noto sans japanese',sans-serif;
}

/*  */
.list_howmuch.capital article{
  align-items: inherit;
}
.list_howmuch.capital article > .text{
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

/* 情報エリア */
.list_howmuch.capital .area_info {
  flex: 0 0 220px;
  flex-direction: column;
  align-items: flex-end;
}
.list_howmuch.capital .area_info [class*="btnarea"]{
  justify-content: flex-end;
}
.list_howmuch.capital .area_info .button_text{
  margin: 0 0 0 16px;
}

/* 共有メンバー */
.button_text_share_member{
  margin: auto 0 0;
  padding: 4px 0 0;
}

/* リスト */
.list_shared_member > li {
  padding: 12px 0;
}
.list_shared_member > li + li{
  border-top: 1px solid #eee;
}
.list_shared_member article{
  display: flex;
  align-items: center;
}
.list_shared_member [class*="thumb"]{
  margin: 0 10px 0 0;
  width: 30px;
}

/* ユーザー */
.list_shared_member .user{
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 10px;
}

/* メンバーから削除 */
.area_modal .list_shared_member [class*="btnarea"]{
  margin: 0;
}


/* ! 詳細ページ ———————————————————————————————————————————————————————————— */
.area_capital_detail {
  width: 100%;
  overflow: auto;
  padding: 0 0 0 0;
}
.area_capital_detail [class*="area_scroll"][class*="_hol"] {
  padding-top: 20px;
}

/* ナビ */
.area_nav_capital {
  background: #f1f1f1;
  margin: 20px 0 0;
  position: relative;
  z-index: 1;
  flex: 0 0 240px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
}



/* ! 情報 ———————————————————————————————————————————————————————————— */
.area_info_capital {
  height: 764px;
  padding: 30px 20px;
  position: relative;
}
.area_info_capital:after{
  content: "";
  height: 105px;
  background: rgba(0,131,220,.1);
  position: absolute;
  bottom: 124px;
  left: 0;
  z-index: 1;
  width: 100%;
  border-top: 2px solid #0083dc;
  
}


/* テキスト */
.area_info_capital .text {
  margin: 0 0 40px;
}
.area_info_capital .name {
  font: 600 16px/1.4em 'noto sans japanese',sans-serif;
}
.area_info_capital .description {
  color: #aaa;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}


/* ボタンエリア */
.area_info_capital [class*="btnarea"] {
  display: flex;
  flex-direction: column;
}
[class*="btn_"][class*="save"] {
  font-size: 15px;
  width: 100%;
  height: 56px;
  background: #1383D5;
  border-color: #1383D5;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="save"]:hover {
    background: #fff;
    color: #1383D5;
  }
}


/* 出力 */
[class*="btn_"][class*="export"][class*="table"] {
  margin: 5px 0 0;
  height: 56px;
  background: #41B0C4;
  border-color: #41B0C4;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="export"][class*="table"]:hover {
    color: #41B0C4;
    background: #fff;
  }
}

/* 代理記入 */
.area_info_capital [class*="btn_"][class*="flat"] {
  margin: 20px 0 0;
  height: 40px;
  position: relative;
  padding-left: 36px;
  transition: all 0.1s ease;
}
.area_info_capital [class*="btn_"][class*="flat"]:before {
  content: "";
  opacity: .5;
  width: 16px;
  height: 16px;
  background: url(../img/shape/ico_pen_white.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .area_info_capital [class*="btn_"][class*="flat"]:hover {
    color: #fff;
    background: #1E5076;
  }
  .area_info_capital [class*="btn_"][class*="flat"]:hover:before {
    opacity: 1;
  }
}



/* ! カテゴリ ———————————————————————————————————————————————————————————— */
.name_category {
  color: #000;
  font: 500 18px/1em 'noto sans japanese',sans-serif;
  height: 50px;
  margin: 62px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 12px 12px 16px;
  border-top: 2px solid #000;
  background: #f9f9f9;
}

/* Windows */
@media all and (-ms-high-contrast: none){
  .name_category { margin: 52px 0 0;}
}
@supports (-ms-ime-align: auto) {
  .name_category { margin: 52px 0 0;}
}


/* ! エリア メンバー ———————————————————————————————————————————————————————————— */
.area_member_capital {
  position: relative;
}
.area_member_capital:before{
  content: "";
  height: calc((100% + 58px));
  width: 100%;
  background: rgba(248,199,65,.1);
  position: absolute;
  top: -58px;
  left: 0;
  border-top: 2px solid #D99703;
  border-bottom: 2px solid #D99703;
  z-index: 2;
}

/* 親しみチェックボックス */
.area_explain_relative {
  position: absolute;
  top: -24px;
  left: 12px;
}
.area_explain_relative p {
  color: #999;
  font: 300 12px/1.3em 'noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  position: relative;
}
.area_explain_relative p:before {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #41B0C4 url(../img/shape/ico_check_white.svg) no-repeat center center;
  background-size: 10px 10px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

/* メンバーリスト */

.list_member_capital > li {
  height: 44px;
  border-top: 1px solid #F2F4FA;
  padding: 0 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  position: relative;
}
.list_member_capital > li:nth-of-type(1) {
  border-top-width: 2px;
  border-color: #000;
}
.list_member_capital p {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  padding-right: 10px;
}
.list_member_capital p:before {
  content: attr(data-position)"";
  color: #1E5176;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 8px 0 0;
}
.list_member_capital .button_text:nth-of-type(2) {
  margin-left: 3px;
}
.list_member_capital [class*="button_"][class*="text"]{
  z-index: 2;
}

/* 経営側株主 */
.list_member_capital .wrap_input {
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
  z-index: 2;
}
.list_member_capital .wrap_checkbox label:before,
.list_member_capital .wrap_checkbox label:after {
  border-radius: 4px;
}
.list_member_capital .wrap_checkbox label:after {
  background: #41B0C4 url(../img/shape/ico_check_white.svg) no-repeat center center;
  background-size: 12px 12px !important;
  border-color: #41B0C4;
}


/* ボタンエリア */
.area_member_capital [class*="btnarea"] {
  padding: 0 12px 30px;
  margin: 10px 0 0;
  position: relative;
  z-index: 2;
}





/* リスト */
.list_capital {
  display: flex;
  margin: 0;
  counter-reset: number 0;
}
.list_capital > li {
  max-width: 750px;
  min-width: 650px;
  width: 100%;
  flex: 0 0 auto;
  padding: 0;
  margin-left: -1px;
  counter-increment: number 1;
  display: flex;
  position: relative;
}
.list_capital > .area_add_capital{
  min-width: 10px;
}
.list_capital > li > article {
  padding: 20px;
  background: #fff;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
}

/* ! ==================================================
　アラートの表示
================================================== */
.list_capital .area_alert {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 0;
  position: absolute;
  top: -2px;
  left: -2px;
  pointer-events: none;
}
.list_capital .area_alert .ttl {
  font-size: 10px;
  border: none;
  border: none;
  padding: 1px 2px;
  border-radius: 3px;
  background: rgba(255,255,255,.7);
  box-shadow: 0px 1px 6px 0px rgba(0,0,0,.1);
}
.list_capital .area_alert .ttl:after {
  content: none;
}

/* ! ==================================================
　フェーズ追加
================================================== */
.area_add_phase {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transform: translate(-50% ,-50%);
}
.list_capital .phase_li:nth-of-type(1) .area_add_phase {
  display: none;
}
.button_add_phase {
  display: block;
  width: 32px;
  height: 32px;
  background: #fff url(../img/shape/ico_add_sheet.svg) no-repeat center center;
  border-radius: 100px;
  background-size: contain !important;
  cursor: pointer;
}


/* フェーズ */
.area_phase {
  display: flex;
  align-items: baseline;
  height: 30px;
  position: relative;
}
[data-count-alert]::before {
  content: attr(data-count-alert)"";
  color: #fff;
  font: 600 13px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 16px;
  border-radius: 3px;
  background: #ED6086 url(../img/shape/ico_attention_white.svg) no-repeat left 6px center;
  background-size: 12px 12px;
  position: absolute;
  bottom: -20px;
  left: 0;
}
.area_phase .ttl_phase {
  color: #1383D5;
  font: 900 24px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_phase .ttl_phase:before {
  content: "フェーズ";
  color: #1383D5;
  font: 600 12px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 6px 0 0;
}
.area_phase .date {
  color: #999;
  font: 300 12px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 12px;
}
.area_phase [class*="btnarea"] {
  margin-left: auto;
}
.tag_category_phase {
  position: relative;
  cursor: pointer;
}
[data-catgegory-phase]::before {
  content: attr(data-catgegory-phase);
  color: #8B93B2;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  border-color: #8B93B2;
  background: #fff;
  height: 20px;
  border-radius: 0;
  border: 1px solid #8B93B2;
  padding: 0 28px 0 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-catgegory-phase]:after {
  content: "";
  width: 8px;
  height: 8px;
  background: url(../img/shape/ico_down.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
}

/* コントロールエリア */
.area_control_phase {
  position: absolute;
  right: 0;
  top: 25px;
  opacity: 0;
  pointer-events: none;
}
.control_current + .area_control_phase {
  opacity: 1;
  pointer-events: all;
}
.list_control_phase {
  background: #fff;
  padding: 10px 15px;
  border-radius: 5px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,.1);
}
.list_control_phase > li + li {
  margin: 8px 0 0;
}


/* ヘッド */
.area_capital_detail .area_head {
  text-align: center;
  height: 45px;
  margin: 30px 0 0;
}
.area_capital_detail .ttl {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
}
.area_capital_detail .description {
  color: #888;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}

/* 総額 */
.area_price_amount {
  margin: 40px 0 0;
  text-align: center;
}
.area_price_amount:before {
  content: "- 時価総額 -";
  font: 400 16px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .08em;
}


/* リスト */
.list_price_amount {
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto;
}
.list_price_amount > li {
  width: 50%;
  padding: 0 4px;
}

/* プレポスト表示 */
.list_price_amount > li > article:before {
  content: "Pre";
  font: 500 13px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: .08em;
  display: block;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 4px 0;
  margin: 8px 0;
}
.list_price_amount > .li_post > article:before {
  content: "Post" ;
}

/* テキスト */
.list_price_amount p {
  color: #1383D5;
  font: 900 22px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0em;
}
.list_price_amount p.small{
  font-size: 16px;
}
.list_price_amount .potential {
  margin: 12px 0 0;
  font-size: 20px;
  font-weight: 500;
}
.list_price_amount p:before,
.list_price_amount p:after {
  content: "";
  color: #666;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 4px;
}
.list_price_amount p.small:before,
.list_price_amount p.small:after{
  font-size: 11px;
}
.list_price_amount .amount:before {
  content: "顕在のみ";
}
.list_price_amount .potential:before {
  content: "潜在含む";
}
.list_price_amount p:after {
  content: attr(data-unit)"";
}


/* 詳細データ */
.area_detail_capital {
  margin: 50px 0 0;
  height: 468px;
}
/* リスト */
.list_detail_capital {
  display: flex;
  flex-wrap: wrap;
}
.list_detail_capital > li {
  width: 100%;
}
.list_detail_capital > li + li {
  margin-top: 40px;
}
.list_detail_capital .ttl {
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 20px;
  position: relative;
  text-align: center;
  z-index: 1;
}
.list_detail_capital .ttl span {
  background: #fff;
  display: inline-block;
  padding: 0 30px;
  position: relative;
  z-index: 2;
}
.list_detail_capital .ttl:before {

}
.list_detail_capital .ttl:after {
  content: "";
  width: 100%;
  height: 1px;
  background: #000;
  position: absolute;
  top: .5em;
  left: 0;
}
/* 個別＿調達目標/株主設計 */
.list_detail_capital > .shareholder_design {
  margin-top: 0;
}
.list_detail_capital .supply_plan .ttl{ color: #0083DC;}
.list_detail_capital .supply_plan .ttl:after,
.list_detail_capital .shareholder_design .ttl:after{ 
  height: 2px;
  width: calc((100% + 40px));
  background: #0083DC;
  left: -20px;
}
.list_detail_capital .shareholder_design .ttl{ color: #D99703;}
.list_detail_capital .shareholder_design .ttl:after{background: #D99703;}


/* PER */
.area_per {
  background: #f9f9f9;
  padding: 10px;
  margin: -50px 0 0 auto;
  width: 75%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.area_per input:not([type="submit"]) {
  border-color: #ccc !important;
}
.area_per .result {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 24px;
}
.area_per .result strong {
  font: 700 20px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 8px;
}
.area_per .result .average {
  display: block;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  margin: 3px 0 0 ;
}
.area_per .result .average strong {
  font-size: 14px;
}


/* 共通 */
.ttl_item {
  color: #1E5176;
  font: 300 13px/1.3em 'noto sans japanese',sans-serif;
}
.ttl_item small {
  margin: 0;
  display: inline-block;
}

/* リスト */
.list_form_capital {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  margin: 0 -4px;
  min-height: 80px;
}
.list_form_capital > li {
  width: 33.3333%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 4px;
}
.list_4 > li {
  width: 25%;
}
.list_form_capital .ttl_item {
  color: #666;
  width: 100%;
  margin: 0 0 6px;
}
.list_form_capital .cnt_item {
  width: 100%;
  min-width: 10px;
}
.list_form_capital .cnt_item_sub {
  margin: 20px 0 0;
}

/* フロートするユニット */
[class*="wrap_float"] {
  position: relative;
}
[class*="wrap_float"][class*="_1"] input {
  padding-right: 20px;
}
[class*="wrap_float"][class*="_2"] input {
  padding-right: 32px;
}
[class*="unit_"][class*="float"] {
  position: absolute;
  bottom: 8px;
}
[class*="unit_"][class*="float"][class*="left"] {
  left: 0;
}
[class*="unit_"][class*="float"][class*="right"] {
  right: 0;
}
[class*="unit_"][class*="float"][class*="top"] {
  bottom: auto;
  top: .5em;
}

/* 一部固定 */
[class*="wrap_float"][class*="fix"] {
  flex-wrap: wrap;
}
[class*="unit_"][class*="float"][class*="fix"] {
  display: block;
  position: inherit;
  margin: 10px 0 -10px;
}

/* 色 */
[class*="unit_"][class*="float"][class*="blue"]{ color: #0083DC;}
[class*="unit_"][class*="float"][class*="yellow"]{ color: #D99703;}

/* フォント */
[class*="unit_"][class*="float"][class*="min"]{ font-size: 10px;}
[class*="unit_"][class*="float"][class*="bold"]{ font-weight: 600;}


/* ! ファイナンス —————————————————————————————— */
.area_contain_alert_capital_finance{
  position: relative;
}
.area_contain_alert_capital_finance .alert{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.area_alert_capital_finance {
/*
  margin: 16px 0 0;
  height: 24px;
*/
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  pointer-events: none;
}
.area_alert_capital_finance .alert{
  color: #ED6086;
  font: 600 15px/1.4em 'noto sans japanese',sans-serif;
}
.area_alert_capital_finance .alert span{
  padding: 0 0 0 24px;
  margin: 0 0 8px;
  position: relative;
}
.area_alert_capital_finance .alert span:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/shape/ico_attention_red.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: .6em;
  left: 0;
  transform: translateY(-50%);
}



/* ! フォーム —————————————————————————————— */
.area_capital_detail input:not([type="submit"]) {
  font-weight: 500;
  text-align: right;
  height: 32px;
  border-color: #1383d5;
  border-width: 1px;
  background: #fff;
  border-radius: 3px;
}
.area_capital_detail input.input_min {
  height: 24px;
  font-size: 13px;
}
.area_capital_detail [class*="unit_"] {
  color: #999;
}

/* disabled_変更不可 */
.area_capital_detail .disabled input:not([type="submit"]) {
/*   color: #1383D5; */
  background: #fff;
  border-color: #fff;
  border-bottom: 1px solid #f1f1f1;
  pointer-events: none !important;
}


/* ! 総計 ———————————————————————————————————————————————————————————— */
.area_overall_capital {
  border: 2px solid #1383D5;
  padding: 20px;
  border-radius: 12px;
  margin: 40px 0 0;
}
.list_overall_capital {
  display: flex;
  justify-content: center;
}
.list_overall_capital > li {
  margin: 0 20px;
  display: flex;
  flex-direction: column;
}
.area_overall_capital .ttl {
  color: #1E5176;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 8px;
}
.area_overall_capital .num {
  color: #1383D5;
  font: 900 24px/1em 'Roboto','noto sans japanese',sans-serif;
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  align-items: flex-end;
}
.area_overall_capital .num:after {
  content: attr(data-unit)"";
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}
.area_overall_capital .num.amount {
  font-size: 32px;
}

/* ! 調達目標 ———————————————————————————————————————————————————————————— */
.area_form_supply_plan{
  position: relative;
  margin: 0 0 40px;
}
.area_form_supply_plan:before{
  content: "";
  height: calc((100% + 26px));
  width: calc((100% + 40px));
  background: rgba(0,131,220,.1);
  position: absolute;
  top: -26px;
  left: -20px;
  z-index: 1;
}

.area_form_supply_plan .list_form_capital{
  position: relative;
  z-index: 2;
}

/* フォーム --------*/
.supply_plan .list_form_capital input:not([type="submit"]){
  height: 40px;
  border: 1px solid #1383d5;
}
.supply_plan .disabled input:not([type="submit"]){
  background: #EBF5FC;
}
/* 株主設計 */
.area_form_plan_shareholders .list_form_capital input:not([type="submit"]){
  border-color: #D99703;
}
.area_form_plan_shareholders .disabled input:not([type="submit"]){
  background: #FFFBEF;
}
/* エラー */
.supply_plan .error input:not([type="submit"]){
  background: #FFEBF1;
  border-color: #ED6086;
}
.supply_plan .error [class*="unit_"][class*="float"][class*="left"]{
  color: #ED6086;
}

/* ! テーブルエリア ———————————————————————————————————————————————————————————— */
.area_table_capital {
  padding: 0 0 16px;
  position: relative;
}
.area_table_capital:not(.bg_none):before{
  content: "";
  height: calc((100% + 56px));
  width: calc((100% + 40px));
  background: rgba(248,199,65,.1);
  border-bottom: 2px solid #d99703;
  position: absolute;
  top: -56px;
  left: -20px;
  z-index: 2;
}
.table_capital {
  margin: 0 0 64px;
  table-layout: fixed;
  border-collapse: collapse;
}

.table_capital,
.table_capital > thead,
.table_capital > tbody {
  display: block;
  width: 100%;
  z-index: 1;
}
.table_capital tr {
  display: flex;
}
.table_capital tr > * {
  display: block;
  flex: 1 1 0%;
}
.table_capital tr + tr{
  border: none;
}

/* Windows */
@media all and (-ms-high-contrast: none){
  .table_capital { margin: 0 0 54px;}
}
@supports (-ms-ime-align: auto) {
  .table_capital { margin: 0 0 54px;}
}

/* 非表示のテーブル(高さ調節よう) */
.table_blank {
  opacity: 0;
  pointer-events: none;
}


/* th横幅 */
.table_capital .th_80,
.table_capital .td_80 { flex: 0 0 80px;}
.table_capital .th_100,
.table_capital .td_100 { flex: 0 0 100px;}
.table_capital .th_110,
.table_capital .td_110 { flex: 0 0 110px;}
.table_capital .th_120,
.table_capital .td_120 { flex: 0 0 120px;}



/* リスト */
.area_table_capital thead {
  position: relative;
}
.area_table_capital thead:before,
.area_table_capital thead:after {
  content: "";
  display: block;
  width: calc((100% + 40px));
  height: 2px;
  background: #000;
  position: absolute;
  top: 0;
  left: -20px;
}
.area_table_capital thead:after {
  top: auto;
  bottom: 0;
}
.area_table_capital thead > tr {
  position: relative;
}
.area_table_capital thead > tr:before {
  content: "";
  display: block;
  width: calc((100% + 40px));
  height: 100%;
  background: #f9f9f9;
  position: absolute;
  top: 0;
  left: -20px;
  z-index: -1;
}
.area_table_capital th {
  padding: 6px 3px;
  overflow: hidden;
}
.area_table_capital th > span {
  color: #666;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display:inline-block;
  transform: translateY(-24px);
  position: absolute;
}
.area_table_capital th > p {
  color: #000;
  font: 900 18px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: right;
  height: 40px;
  padding: 0 8px 0 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.area_table_capital th > p:after {
  content: attr(data-unit)"";
  color: #999;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}

/* フォーム */
.table_capital > tbody > tr {
  display: flex;
  width: 100%;
  position: relative;
}
.table_capital > tbody > tr:before,
.table_capital > tbody > tr:last-of-type:after {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: #F2F4FA;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
.table_capital > tbody > tr:last-of-type:after {
  top: auto;
  bottom: -1px;
}
/*
.table_capital > tbody > tr:first-of-type:before {
  height: 2px;
  background: #D6DCEB;
}
*/
.table_capital td {
  padding: 6px 3px;
}
.table_capital .wrap_input {
  position: relative;
  z-index: 2;
}
.table_capital .disabled .wrap_input{
  z-index: 0;
}
.table_capital .disabled .wrap_input input {
  border-bottom: none;
}
.table_capital .wrap_input:after {
  content: attr(data-unit) "";
  color: #999;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-30%);
}
.table_capital .wrap_input input {
  padding-right: 26px;
  padding-left: 4px;
}
.table_capital input:read-only:not([class*="button_"]),
.table_capital textarea:read-only {
  background: #EFEFEF !important;
}


/* ! 値の増減　UP DOWN ———————————————————————————————————————————————————————————— */
.table_capital .wrap_input:before {
  font: 500 10px/1em 'Roboto','noto sans japanese',sans-serif;
  display: inline-block;
  padding: 0 0 0 6px;
  background-size: 4px 6px !important;
  position: absolute;
  top: 55%;
  left: 8px;
  transform: translateY(-50%);
  z-index: 1;
}
[data-compare-up]::before {
  content: attr(data-compare-up)"";
  color: #51C96D;
  background: url(../img/shape/ico_compare_up.svg) no-repeat left 0 center;
}
[data-compare-down]::before {
  content: attr(data-compare-down)"";
  color: #ED6086;
  font: 500 11px/1em 'Roboto','noto sans japanese',sans-serif;
  background: url(../img/shape/ico_compare_down.svg) no-repeat left 0 center;
}

/* ! 自動計算 ———————————————————————————————————————————————————————————— */
.wrap_auto input:not([type="submit"]) {
  background: #f4faff;
}


/* 注意書き */
.table_capital tfoot {
  display: block;
  width: 100%;
}
.table_capital tfoot tr {
  height: 40px;
}
.attention_auto_calc {
  color: #1383d5;
  font: 300 12px/1.3em 'noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
}
.attention_auto_calc:before {
	content: "";
	width: 14px;
	height: 8px;
	border: 1px solid #1383d5;
	background: #f4faff;
	margin: 0 6px 0 0;
}


/* ホバー時に詳細説明 */
@media screen and (min-width: 480px){
  .attention_auto_calc:hover:after {
    opacity: 1;
  }
}
.attention_auto_calc:after {
  opacity: 0;
  pointer-events: none;
  content: "出資金額を入力すると株価と照らし合わせ、株数が整数になるように再計算されます。";
  color: #000;
  font: 300 12px/1.4em 'noto sans japanese',sans-serif;
  display: block;
  width: 80%;
  padding: 20px;
  border-radius: 4px;
  border: 2px solid #1383d5;
  box-shadow: 0px 4px 5px 1px rgba(0,0,0,.1);
  position: absolute;
  top: 98%;
  left: 0;
  transition: all 0.1s ease;
}




/* ! 備考欄 —————————————————————————————— */
.area_remark {
  margin: 40px 0 0;
}
.area_remark textarea {
  font-size: 13px;
  border-color: #F2F4FA;
  background: #F2F4FA;
  padding: 10px 16px;
}




/* ! シート追加 ———————————————————————————————————————————————————————————— */
.list_capital > li.area_add_capital {
  max-width: 120px;
  margin: 0 0 0 10px;
}
.button_add_sheet {
  color: #C1C5D3;
  font: 600 22px/1.2em 'noto sans japanese',sans-serif;
  text-align: center;
  padding: 120px 0;
  width: 100%;
  max-height: 400px;
  background: #fff;
  border: 2px dashed #C1C5D3;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  position: relative;
}
.button_add_sheet:before {
  content: "";
  display: block;
  width: 32px;
  height: 32px;
  background: url(../img/shape/ico_add_sheet.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
}



/* ! ============================================================
　アラートエリア
============================================================ */
.area_alert_capital {
  margin: 30px 0 0;
}

/* ! ヘッド —————————————————————————————— */
.head_alert_capital .ttl {
  font: 600 18px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 20px;
  background: #ddd;
  padding: 10px 16px;
}


/* ! ボディ —————————————————————————————— */
.body_alert_capital > .area_alert_capital {
  display: flex;
  flex-direction: column;
}
.body_alert_capital > .area_alert_capital + .area_alert_capital{
  margin: 20px 0 0;
}
.body_alert_capital > article > .ttl {
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 10px;
}


/* ! アラートカテゴリ —————————————————————————————— */
.area_cat {
  user-select: none;
}
.area_cat + .area_cat {
  margin: 5px 0 0;
}
/* デフォルトの権利タイトル　アクティブ => 権利がある */
.area_cat > .ttl {
 font: 600 15px/1em 'noto sans japanese',sans-serif;
 width: 100%;
 padding: 10px 0;
 cursor: pointer;
 display: flex;
 align-items: baseline;
 position: relative;
}
.area_cat > .ttl:before {
/*
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: url(../img/shape/ico_down.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
*/
}
.area_cat > .ttl .button_show{
  color: #999;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
  padding-right: 14px;
  position: relative;
}
.area_cat > .ttl .button_show:before{
  content: "";
  display: block;
  width: 8px;
  height: 8px;
  background: url(../img/shape/ico_down.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}
.show.area_cat > .ttl .button_show:before{
  transform: translateY(-50%) rotate(180deg);
}
.area_cat > .ttl span.close{
  display: none;
}
.show.area_cat > .ttl span.open{
  display: none;
}
.show.area_cat > .ttl span.close{
  display: inline-block;
}
.area_cat .sub {
  color: #000;
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  border-top: 2px solid #fff;
  padding: 10px 10px  0;
}
.area_cat .vote_right_alert_detail {
  background: #F1F1F1;
}

/* 権利がなくなった場合の表示　アクティブ => 権利がある */
/*
.area_cat:not(.active) > .ttl {
  background: #ED6086;
  color: #fff;
}
*/
.area_cat:not(.active) div:not(.active) > .sub{
  color: #ED5C86;
}
.area_cat:not(.active) > .ttl:before{
  background: url(../img/shape/ico_down_white.svg);
}
.area_cat:not(.active) .vote_right_alert_detail:not(.active) {
  background: #ffd4e0;
  border-color: #ffd4e0;
}
.area_cat:not(.active) div:not(.active) > .list_alert > li > p {
  color: #fff;
  background: #ED6086;
  border-color: #ED6086;
}

/* 潜在の場合 */
.alert_potential .area_cat:not(.active) > .ttl:before{
  background: url(../img/shape/ico_down_white.svg);
}



/* アラートリスト */
.list_alert_capital {
  width: 100%;
  margin: 0 -4px;
  display: flex;
}
.list_alert_capital > li {
  width: 50%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  padding: 0 4px;
}
.list_alert_capital > li > article {
  width: 100%;
}

/* 中のリスト */
.vote_right_alert_detail {
  margin-bottom: 5px;
}


/* アラートの表 */
.area_alert_capital article .head .ttl {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  text-align: center;
  background: #444;
  padding: 10px;
  border-radius: 5px 5px 0 0;
  color: #fff;
  position: relative;
  z-index: 1;
  width: 100%;
}
.area_alert_capital article .body {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 0 0 5px 5px;
}

/* 注意書き */
.area_alert_capital .note{
  font: 400 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  position: relative;
}
.area_alert_capital .note:before{
  content: "";
  display: inline-block;
  background: #ED5D86;
  width: 15px;
  height: 15px;
  border-radius: 4px;
  margin: 0 6px 0 0;
}
.area_alert_capital .note span{ display: none;}
.area_alert_capital.alert_potential .note span{ display: block;}

/* アラートリスト */
.list_alert{
  padding: 10px;
}
/*
 .list_alert > li + li {
   margin-top: 4px;
 }
*/
.list_alert > li{
  margin-bottom: 4px;
}
.list_alert > li:last-child{
 margin: 0;
}
.list_alert > li > p {
 color: #777;
 font: 500 13px/1.3em 'noto sans japanese',sans-serif;
 background: #fff;
 border-radius: 3px;
 padding: 6px 8px;
 position: relative;
 border: 1px solid #eee;
}
.list_alert > li.detail{
  display: none;
}
.show .list_alert > li.detail{
  display: block;
}
 /* アラートリスト_詳細 */
 .list_alert_inner > li {
   margin: 4px 0 0;
 }
 .list_alert_inner > li > p {
   color: #444;
   font: 300 11px/1.2em 'noto sans japanese',sans-serif;
   padding: 0 0 0 12px;
   position: relative;
 }
 .list_alert_inner > li > p:before {
   content: "・";
   position: absolute;
   top: .7em;
   left: 0;
   transform: translateY(-50%);
 }



/* ! 算定書出力 ———————————————————————————————————————————————————————————— */
.area_export_capital {
  width: 100%;
}

@charset "UTF-8";

/* ! ページスタイル ————————————————————————————————————————————————————————————

メインレイアウト

フォーマット
専門家

———————————————————————————————————————————————————————————— */
/* ! ====================================================================================================
　■ フレームワークレイアウト
==================================================================================================== */
.l-grid {
  display: flex;
}
.l-grid.wrap {
  flex-wrap: wrap;
}
.l-grid > [class*="l-cell"] {
  display: flex;
  flex-direction: column;
}


/* ! 固定と可変 —————————— */
.l-cell-auto {
  flex: 1 1 auto;
  min-width: 1px;
}
.l-cell-fix  {
  flex: 0 0 100px;
}
.l-cell-fix[data-l-cell-width="300"] {
  flex: 0 0 300px;
  width: 300px;
}



/* ! ====================================================================================================
　■ スタック
==================================================================================================== */
[class*="stack"] + [class*="stack"] {
  margin-top: 10px;
  width: 100%; /* 良くある質問の私も知りたいボタン箇所 */
}














/* ! ====================================================================================================
　■ レイアウト
==================================================================================================== */

.h1 { font: 600 36px/1em "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.h2 { font: 600 30px/1em "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.h3 { font: 600 24px/1em "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.h4 { font: 600 20px/1em "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}
.h5 { font: 600 18px/1em "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;}

/*  */
.layout {
  display: flex;
  width: 100%;
}
.layout + .layout {
  margin: 30px 0 0;
}
.layout_fix {
  flex: 0 0 100px;
  margin: 0 40px 0 0;
}
.layout_auto {
  flex: auto;
}
.layout_auto + [class*="layout_fix"] {
  margin: 0 0 0 40px;
}
.layout_half {
  flex: 0 0 50%;
}
.layout.reverse{
  flex-direction: row-reverse;
}

/* ! スペース変更 —————————— */
.layout + .layout.none { margin: 0;}
.layout + .layout.narrow { margin: 10px 0 0;}
.layout + .layout.wide { margin: 50px 0 0;}
.layout_fix.none { margin: 0;}
.layout_auto + .layout_fix.nonw { margin: 0;}
.layout_fix.wide { margin: 0 60px 0 0;}
.layout_auto + .layout_fix.wide { margin: 0 0 0 60px;}
.layout_fix.narrow { margin: 0 20px 0 0;}
.layout_auto + .layout_fix.narrow { margin: 0 0 0 20px;}


/* ! 固定幅変更 —————————— */
.fix_40 {flex: 0 0 40px;}
.fix_60 {flex: 0 0 60px;}
.fix_130 {flex: 0 0 130px;}
.fix_150 {flex: 0 0 150px;}
.fix_180 {flex: 0 0 180px;}
.fix_200 {flex: 0 0 200px;}
.fix_300 {flex: 0 0 300px;}
.fix_350 {flex: 0 0 350px;}
.fix_450 {flex: 0 0 450px;}


/* ! ====================================================================================================
　■ ボックス
==================================================================================================== */
.box {}
.box + .box {
  margin: 40px 0 0;
}
.head_box {
  margin: 0 0 60px;
}
.foot_box {
  margin: 40px 0 0;
}

@media screen and (max-width: 768px){
  .head_box {
    margin: 0 0 40px;
  }
}
@media screen and (max-width: 480px){
  .head_box {
    margin: 0 0 30px;
  }
}

/* ! スペース変更 —————————— */
.box + .box.wide {
  margin: 60px 0 0;
}
.head_box.wide {
  margin: 0 0 50px;
}.head_box.narrow {
  margin: 0 0 10px;
}




/* ! ラップレイアウト ———————————————————————————————————————————————————————————— */
.layout_wrap {
  display: flex;
  flex: 1 1 auto;
  min-width: 10px;
  overflow: hidden;
}


/* ! メインレイアウト ———————————————————————————————————————————————————————————— */
.layout_main {
  max-width: 1340px;
  width: 100%;
  padding: 20px 30px;
  margin: 0 auto;
}
@media screen and (max-width: 1280px){
  .layout_main {
  }
}
@media screen and (max-width: 767px){
  .layout_main {
    padding: 15px 30px 30px;
  }
  .page_post .layout_main{
   padding: 30px;
  }
}
@media screen and (max-width: 479px){
  .layout_main {
    padding: 16px;
  }
  .page_post .layout_main{
    padding: 30px 16px;
  }
}
@media screen and (max-width: 359px){
  .layout_main {
    padding: 16px 12px;
  }
}



/* ! ヘッド_レイアウト —————————————————————————————— */
.area_head_layout {
  display: flex;
  margin: 0 0 40px;
  position: relative;
}
.area_head_layout > .text {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 10px;
}
.area_head_layout .ttl {
  font: 600 22px/1em 'noto sans japanese',sans-serif;
}
.area_head_layout .ttl[data-sub]::after {
  content: "- " attr(data-sub) " -";
  color: #aaa;
  font: 300 14px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 0 12px;
}
@media screen and (max-width: 767px){
  .area_head_layout {
    margin: 0 0 30px;
    flex-direction:column-reverse;
  }
}
@media screen and (max-width: 560px){
  .area_head_layout {
    margin: 0 0 24px;
  }
  .area_head_layout .ttl {
    font-size: 18px;
  }
  .area_head_layout .ttl[data-sub]:after {
    font-size: 11px;
    display: block;
    margin: 6px 0 0;
  }
}


/* ! コントロールエリア —————————————————————————————— */
.area_head_layout > .control {
  flex: 0 0 210px;
}
@media screen and (max-width: 767px){
  .area_head_layout > .control {
    flex: 0 0 auto;
  }
}

/* ナビ */
.list_nav_head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-end;
  margin: 0 -10px;
  margin-left: auto;
}
.list_nav_head > li {
  padding: 0 10px;
}
.list_nav_head > li > a {
  color: #A7AAB7;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
  width: 28px;
  height: 28px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
  cursor: pointer;
}
@media screen and (max-width: 840px){
  .list_nav_head {
    margin: 0 -6px;
    margin-left: auto;
  }
  .list_nav_head > li {
    padding: 0 6px;
  }
}
@media screen and (max-width: 767px){
  .list_nav_head {
    width: 100%;
    margin-bottom: 10px;
    order: 3;
    position: relative;
  }
}
@media screen and (max-width: 480px){
  .list_nav_head > li {
    padding: 0 6px;
  }
  .list_nav_head > li > a {
    width: 24px;
    height: 24px;
  }
  .list_nav_head {
    margin-bottom: 6px;
  }
}

/* 投稿する -------- */
.nav_post{
}

/* ボタン */
.nav_post [class*="btn_post"]{
  background: #7f8eca;
  border-color: #7f8eca;
  height: 32px;
  padding-left: 10px;
  user-select: none;
}
.nav_post [class*="btn_post"]:before{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_white.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  height: 10px;
  width: 10px;
}
.nav_post [class*="btn_post"] p{
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
}
@media screen and (min-width: 480px){
  .nav_post [class*="btn_post"]:hover{
    background: #fff;
    color: #7f8eca;
  }
  .nav_post [class*="btn_post"]:hover:before{
    background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_navy.svg");
  }
}
@media screen and (max-width: 600px){
  .nav_post [class*="btn_post"]{
    height: 28px; width: 28px;
    padding: 0;
  }
  .nav_post [class*="btn_post"] p{
    display: none;
  }
  .nav_post [class*="btn_post"]:before{
    margin: 0;
    height: 12px;
    width: 12px;
    padding: 0;
  }
}
@media screen and (max-width: 480px){
  .nav_post [class*="btn_post"]{
    height: 24px; width: 24px;
  }
}

/* 投稿する show ――――――――*/
.area_post_all{
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  background: #fff;
  width: 370px;
  z-index: 5;
  padding: 30px;
  box-shadow:0px 6px 12px 0px rgba(0,0,0,.2);
  border-radius: 4px;
}
.area_post_all.show{
  display: block;
}
@media screen and (max-width: 767px){
  .area_post_all{
    padding: 20px;
  }
}
@media screen and (max-width: 480px){
  .area_post_all {
    width: 290px;
  }
}
@media screen and (max-width: 370px){
  .area_post_all{
    padding: 16px;
  }
}

/*  ヘッド -----*/
.head_post_all {}

/* リスト */
.list_post_all {
  display: flex;
  padding: 0 0 10px;
  margin: 0 -2px;
}
.list_post_all > li {
  width: 33.3333%;
  padding: 0 2px;
  position: relative;
  display: flex;
}
.list_post_all > li > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
}
.list_post_all p {
  width: 100%;
  font: 600 11px/1.2em 'noto sans japanese' , sans-serif;
  text-align: center;
  font-size: 11px;
  padding: 42px 0 10px;
  height: auto;
  border: 1px solid #eee;
  border-radius: 5px;
  position: relative;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  transition: all 0.1s ease;
}
.list_post_all p:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_column.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
}
.list_post_all .cgm p:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_cgm.svg") no-repeat center center !important;}
.list_post_all .market p:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_contents.svg") no-repeat center center !important;}
@media screen and (min-width: 480px){
  .list_post_all .content:hover p{
    color: #3f7cc4;
    border-color: #3f7cc4;
  }
  .list_post_all .cgm:hover p {
    color: #f98623;
    border-color: #f98623;
  }
  .list_post_all .market:hover p {
    color: #DD5176;
    border-color: #DD5176;
  }
  .list_post_all > li:hover p {
    border-color: #7f8eca;
  }
}
@media screen and (max-width: 480px){
  .list_post_all{
    padding: 0;
    margin: 0 0 20px;
  }
}
@media screen and (max-width: 370px){
  .list_post_all p{
    padding: 34px 0 10px;
  }
  .list_post_all p:before{
    width: 32px;
    height: 32px;
  }
}

/*  ボディ -----*/
.body_post_all {
  margin: 15px 0 0;
}

/*  タイトル */
.area_ttl_post_all{
  display: flex;
  align-items: baseline;
  margin: 0 0 24px;
}
.area_ttl_post_all .ttl{
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
}
.area_ttl_post_all [class*="button_"][class*="text"]{
  margin: 0 0 0 auto;
}

/* リスト_カテゴリー */
.list_draft_category{
  max-height: 400px;
  overflow-y: auto;
}
.list_draft_category > li + li{
  margin: 20px 0 0;
}
.list_draft_category > li > article > .ttl{
  font: 500 13px/1em 'noto sans japanese' , sans-serif;
  color: #3f7cc4;
  padding: 0 0 8px 20px;
  position: relative;
}
.list_draft_category > li > article > .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_column.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 16px;
  height: 16px;
  position: absolute;
  left: 0;
  top: .5em;
  transform: translateY(-50%);
}
.list_draft_category > li.cgm > article > .ttl{color: #f98623}
.list_draft_category > li.market > article > .ttl{color: #DD5176}
.list_draft_category > li.cgm > article > .ttl:before{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_cgm.svg") no-repeat center center !important;
  background-size: contain !important;
}
.list_draft_category > li.market > article > .ttl:before{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_count_contents.svg") no-repeat center center !important;
  background-size: contain !important;
}

/* リスト_下書き */
.list_draft_header {
  border-radius: 5px;
  overflow: hidden;
}
.list_draft_header > li {
  position: relative;
}
.list_draft_header > li + li {
  border-top: 1px dotted #eee;
}
.list_draft_header > li > article{
  position: relative;
}
.list_draft_header > li > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  cursor: pointer;
}
.list_draft_header article {
  display: flex;
  padding: 10px;
  background: #fafafa;
}
.list_draft_header .ttl{
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
  flex: 1 1 auto;
  min-width: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
@media screen and (min-width: 480px){
  .list_draft_header .content:hover .ttl{color: #3f7cc4}
  .list_draft_header .cgm:hover .ttl{color: #f98623}
  .list_draft_header .market:hover .ttl{color: #DD5176}
}
.list_draft_header .date{
  color: #aaa;
  font: 300 11px/1em 'Roboto','noto sans japanese',sans-serif;
  flex: 0 0 70px;
}



/* 通知数 */
.list_nav_head span {
  color: #fff;
  font: 700 12px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: -.04em;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 100px;
  background: #ED6086;
  position: absolute;
  top: 0;
  right: -3px;
  transform: translate(20% , -30%);
}
/* 個別 */
.nav_search a { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/head/ico_btn_search.svg");}
.nav_message a { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/head/ico_btn_mail.svg");}
.nav_setting a { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/head/ico_btn_setting.svg");}


/* ! スマホメニュー —————————————————————————— */
.nav_sp {
  display: none;
  cursor: pointer;
}
.area_menu_sp {
  display: none;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
@media screen and (max-width: 767px){
  .nav_sp {
    display: block;
  }
  .area_menu_sp {
    display: block;
  }
}


/* ゲスト */
.head_guest .nav_sp {
  margin-right: 0;
}




/* ! コントロールエリア ———————————————————————————————————————————————————————————— */
.area_control {
  display: flex;
  min-width: 300px;
}
.area_control [class*="btnarea"][class*="right"] {
  margin-left: auto;
}

/* 検索エリア */
.area_control .area_search {
  max-width: 340px;
  width: 100%;
}
.area_control .area_search .wrap_input {
  position: relative;
}
.area_control .area_search input {
  border-radius: 100px;
  height: 44px;
  border: none;
}
.area_control .area_search .button_search {
  display: block;
  width:  36px;
  height: 36px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/head/ico_btn_search.svg") no-repeat center center ;
  background-size: 28px 28px !important;
  border: none;
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  z-index: 1;
  cursor: pointer;
}




/* ヘッド_コミュニティ ----------------------- */
.area_head_page {
  width: 100%;
  margin: 0 0 20px;
}
.area_head_page .text {
  padding: 0 0 0 88px;
  position: relative;
}
.area_head_page .text:before {
  content: "";
  display: block;
  width: 60px;
  height: 60px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: -4px;/* 微調整 */
  left: 0;
}
.area_head_page .ttl {
  font: 700 32px/1em 'noto sans japanese',sans-serif;
}
.area_head_page .description {
  color: #444;
  font: 300 14px/1.4em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}
.area_head_page .description a {
  text-decoration: underline;
}
.area_head_page [class*="btnarea"] {
  margin-left: auto;
}
@media screen and (max-width: 600px){
  .area_head_page .text {
    padding: 0 0 0 50px;
  }
  .area_head_page .text:before {
    width: 40px;
    height: 40px;
  }
  .area_head_page .ttl {
    font-size: 24px;
  }
  .area_head_page .description {
    font-size: 12px;
    line-height: 1.3em;
  }
}


/* 個別 */
.area_main_layout_content .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_content.svg");}
.area_main_layout_skill .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_skill.svg");}
.area_main_layout_fmt .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_fmt.svg");}
.area_main_layout_cgm .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_cgm.svg");}
.area_main_layout_howmuch .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_howmuch.svg");}
.area_main_layout_capital .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_capital.svg");}
.area_main_layout_useful .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_useful.svg");}
.area_main_layout_favorite .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_favorite.svg");}
.area_main_layout_enquete .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_enquete.svg");}
.area_main_layout_expert .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_expert.svg");}
.area_main_layout_post .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_post.svg");}
.area_main_layout_visited .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_visited.svg");}
.area_main_layout_users .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_users.svg");}
.area_main_layout_faq .area_head_page .text:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_faq.svg");}


/* アイコンなど省略したタイトル */
.area_head_page.min .text {
  padding: 0;
}
.area_head_page.min .text:before {
  content: none;
}


/* ! 検索エリア ———————————————————————————————————————————————————————————— */
.area_filter_contents {
  background: #F7F9F9;
  border: 1px solid #eee;
  padding: 8px;
  border-radius: 4px;
}
.area_filter_contents .search {
  margin: 0 0 6px;
}

/* 検索 */
.wrap_search {
  position: relative;
}
.wrap_search input {
  height: 40px;
}
.wrap_search [class*="button_search"] {
  width: 80px;
  height: 30px;
  background-size: 16px 16px !important;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
}

@media screen and (max-width: 767px){
  .wrap_search [class*="button_search"] {
    width: 64px;
  }
}
@media screen and (max-width: 560px){
  .wrap_search input {
    height: 48px;
  }
  .wrap_search [class*="button_search"] {
    width: 56px;
    height: 34px;
    background-size: 18px 18px !important;
  }
}
@media screen and (max-width: 480px){
  .wrap_search [class*="button_search"] {
    height: 32px;
  }
  .wrap_search input {
    font-size: 14px;
    height: 44px;
    padding: 0 12px;
  }
}

/* 個別 */
[class*="button_search"]{
  border: 1px solid #eee;
}
[class*="button_search"][class*="skill"] {
  background: #DD5176 url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #DD5176;
}
[class*="button_search"][class*="content"] {
  background: #3f7cc4 url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #3f7cc4;
}
[class*="button_search"][class*="fmt"] {
  background: #37BAA6 url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #37BAA6;
}
[class*="button_search"][class*="cgm"] {
  background: #f98623 url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #f98623;
}
[class*="button_search"][class*="enquete"] {
  background: #576086 url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #576086;
}
[class*="button_search"][class*="expert"] {
  background: #446888 url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #446888;
}
[class*="button_search"][class*="whole"] {
  background: #7F8ECA url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #7F8ECA;
}
[class*="button_search"][class*="faq"] {
  background: #51c96d url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #51c96d;
}


/* ! メイン —————————————————————————————— */
.area_main_layout {
  display: flex;
  align-items: flex-start;
  flex: 1 1 auto;
  min-width: 10px;
  max-width: 1366px;
  margin: 0 auto;
}
.area_main_layout.col {
  flex-direction: column;
  width: 100%;
}
.area_main_layout + .area_main_layout {
  margin-top: 40px;
}
.area_main_layout.col > section + section {
  margin-top: 50px;
}
.area_main_layout.col > section + section.wide {
  margin-top: 100px;
}
@media screen and (max-width: 1000px){
  .area_main_layout {
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 767px){
  .area_main_layout + .area_main_layout {
    margin-top: 30px;
  }
}
@media screen and (max-width: 480px){
  .area_main_layout + .area_main_layout {
    margin-top: 20px;
  }
}


/* ! フォーマット ———————————————————————————————————————————————————————————— */
.area_format {
  width: 100%;
}
.area_filter_format {
  margin: 0 0 20px;
}

/* リスト */
.area_format .list_fmt_card {
  flex-wrap: wrap;
  margin: -5px;
}
.area_format .list_fmt_card > li {
  padding: 5px;
  max-width: none;
}


/* ! フォーマット詳細ページ —————————————————————————————— */
.area_detail_format .layout {
  display: flex;
  align-items: flex-start;
  padding: 30px;
  background: #F9F9F9;
}
.area_detail_format .img {
  border: 1px solid #f1f1f1;
  flex: 0 0 400px;
  margin: 0 40px 0 0;
}
.area_detail_format .img img {
  vertical-align: bottom;
}
.area_detail_format .info {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  min-width: 10px;
}
.area_detail_format .info .ttl {
  font: 500 15px/1.3em 'noto sans japanese',sans-serif;
  text-align: center;
}
.area_detail_format .area_report{
  margin: 0 0 10px;
}

/* ダウンロードボタン */
.area_detail_format [class*="btn_"] {
  margin: 8px 0 0;
  position: relative;
}
.area_detail_format [class*="btn_"] .possible_dl{
  color: #000;
  font: 500 12px/1em 'noto sans japanese' , sans-serif;
  position: absolute;
  right: -10px;
  top: -20px;
  background: #fff;
  padding: 2px 10px 4px;
  border-radius: 2px;
  border: 1px solid #37BAA7;
  box-shadow:0px 1px 3px rgba(0,0,0,.2);  
}
.area_detail_format [class*="btn_"] .possible_dl span{
  color: #37BAA7;
  font: 600 21px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 2px;
}
.area_detail_format [class*="btn_"] .possible_dl:before,
.area_detail_format [class*="btn_"] .possible_dl:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 10px;
}
.area_detail_format [class*="btn_"] .possible_dl:before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 10px 10px 0 0;
  border-color: #37BAA7 transparent transparent transparent;
}
.area_detail_format [class*="btn_"] .possible_dl:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 8px 8px 0 0;
  border-color: #fff transparent transparent transparent;
  margin-top: -1px;
  left: 11px;
}

/* ! 画像表示箇所 ============================== */
.area_detail .area_img_template {
  width: 100%;
}
.area_detail .head .area_img_template img {
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  vertical-align: bottom;
  border: 2px solid #f3f3f3;
}


/* ダウンロードエリア_詳細ページトップ ------------------------------------------------- */
.area_detail .area_template_download_top {
  display: flex;
  background: #f9f9f9;
  padding: 15px;
  margin: 10px 0 0;
}
.area_detail .area_template_download_top .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.area_detail .area_template_download_top > .text > .ttl {
  font: 600 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 8px;
}
.area_detail .area_template_download_top .description {
  font: 300 14px/1.3em 'noto sans japanese',sans-serif;
}
.area_detail .area_template_download_top .btnarea {
  flex: 0 0 360px;
  margin: 0 0 0 20px;
}
.area_detail .area_template_download_top .btnarea > * {
  width: 100%;
}
.area_detail .area_template_download_top .btnarea >.area_permission {
  margin-top: 0;
}
.area_detail .area_template_download_top [class*="btn_"] {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: #37baa6;
  border-color: #37baa6;
/*   padding: 0 10px 0 50px; */
  position: relative;
}
.area_detail .area_template_download_top [class*="btn_"]:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/ico_download_template_white.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
.area_detail .area_template_download_top [class*="btn_"] b {
  font: 900 16px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 3px;
}
.area_detail .area_template_download_top [class*="btn_"]:hover {
  color: #37baa6;
  background: #fff;
}
.area_detail .area_template_download_top [class*="btn_"]:hover:before {
  background: url(../img/ico_download_template.svg);
}
@media screen and (max-width: 1119px){
  .area_detail .area_template_download_top .btnarea {
    flex: 0 0 240px;
  }
}
@media screen and (min-width: 560px) and (max-width: 1119px) {
  .area_detail .area_template_download_top [class*="btn_"] {
    flex-direction: column;
  }
  .area_detail .area_template_download_top [class*=btn_] b {
    margin-top: 2px;
  }
}
@media screen and (max-width: 560px){
  .area_detail .area_template_download_top {
    flex-wrap: wrap;
  }
  .area_detail .area_template_download_top .text,
  .area_detail .area_template_download_top .btnarea {
    flex: 0 0 100%;
  }
  .area_detail .head .area_template_download_top .text {
    margin: 0 0 10px;
  }
  .area_detail .area_template_download_top .btnarea {
    margin: 0;
  }
}

/* 知識を買う／売るの場合 */
.area_detail .area_template_download_top.book .tpl_price {
  font-size: 22px;
  margin: 10px 0 5px;
  justify-content: center;
  align-items: baseline;
}
.area_detail .area_template_download_top.book [class*="btn_"] {
  background: #dd5176;
  border-color: #dd5176;
}
.area_detail .area_template_download_top.book [class*="btn_"]:not([class*="download"]):before {
  background: url(../img/shape/ico_count_contents_white.svg);
  background-size: contain !important;
}
.area_detail .area_template_download_top.book [class*="btn_"]:hover {
  color: #dd5176;
  background: #fff;
  border-color: #dd5176;
}
.area_detail .area_template_download_top.book [class*="btn_"]:not([class*="download"]):hover:before {
  background: url(../img/shape/ico_count_contents.svg);
  background-size: contain !important;
}
.area_detail .area_template_download_top.book [class*="btn_"][class*="download"]:hover:before {
  background: url(../img/ico_download_buy.svg);
  background-size: contain !important;
}
@media screen and (max-width: 840px){
  .area_detail .area_template_download_top.book .tpl_price {
    margin: 5px 0 0;
  }
}


/* ダウンロード可能数 */
.possible_download{
  color: #666;
  font: 600 18px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 16px 0 0;
  border-bottom: 1px dotted #656565;
}
.possible_download:before{
  content: "今月ダウンロード可能数：";
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
}

@media screen and (max-width: 1280px){
  .area_detail_format .img {
    flex: 0 0 260px;
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 1080px) and (min-width: 1000px){
  .area_detail_format .layout {
    display: block;
  }
}
@media screen and (max-width: 1000px){
  .area_detail_format .layout {
    padding: 20px;
  }
}
@media screen and (max-width: 860px){
  .area_detail_format .layout {
    padding: 20px;
  }
  .area_detail_format .img {
    flex: 0 0 240px;
    margin: 0 16px 0 0;
  }
}
@media screen and (max-width: 860px) and (min-width: 767px){
  .area_detail_format .layout {
    display: block;
  }
}
@media screen and (max-width: 640px){
  .area_detail_format .layout {
    display: block;
  }
}
@media screen and (max-width: 560px){
  .area_detail_format .img {
    margin: 0 0 20px;
  }
  .area_detail_format .info .ttl{
    font-size: 14px;
  }
}


/* ボタンエリア */
.area_detail_format .info [class*="btnarea"] {
  width: 100%;
  margin: 16px 0 0;
}

/* ダウンロードボタン */
[class*="btn_"][class*="download"] {
  background: #37BAA6;
  border-color: #37BAA6;
  padding: 0 8px;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="download"]:hover {
    color: #37BAA6;
    background: #fff;
    border-color: #37BAA6;
  }
}
/* ! --------------------------------------------------

- 問い合わせを弁護士に行う

-------------------------------------------------- */
.area_contact_lawyer{
  margin: 40px 0 0;
  width: 100%;
  padding: 15px 30px;
  border: 3px solid #fb9339;
  background-color: #fff;
}
@media screen and (max-width: 640px){
  .area_contact_lawyer{
    margin: 30px 0 0;
  }
}

/* ヘッド --------*/
.area_contact_lawyer .head_contact_lawyer{
  margin: 0 0 15px;
  display:flex;
  flex-direction: column;
  align-items: center;
}
.area_contact_lawyer .head_contact_lawyer .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  display: inline-block;
  position: relative;
  padding: 0 10px 0 0;
}
.area_contact_lawyer .head_contact_lawyer .ttl:before{
/*   content: ""; */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 5px 3.5px 0 3.5px;
  border-color: #000000 transparent transparent transparent;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.head_contact_lawyer .btn{
  
}
/* ボディ --------*/
/* 弁護士のリスト */
.list_contact_lawyer{
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
}
.list_contact_lawyer > li{
  width: 100%;
  flex: 1 1 auto;
  padding: 2px;
  display: flex;
  flex-direction:column;
}
.list_contact_lawyer a{
  display: flex;
  align-items: center;
  flex: auto;
  min-width: 10px;
  background: #ddd;
  border: 2px solid #ddd;
  box-shadow: 0px 2px 8px -2px rgba(0,0,0,.1);
  position: relative;
}
.list_contact_lawyer a:hover {
  border-color: #37BAA6;
}
/* バナー */
.list_contact_lawyer .banner {
  width: 100%;
  background-size: contain !important;
  background-position: center center!important;
  background-repeat: no-repeat!important;
}
.list_contact_lawyer .banner:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 31.25%;
}



/* 偶数になる場合 */
.list_contact_lawyer.even > li {
  width: 50%;
}



/* ! 広告を掲載しませんか ———————————————————————————————————————————————————————————— */
.area_attract_lawyer{
  margin: 10px 0 0;
}
.box_attract_lawyer{
  border: 1px solid #ddd;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 15px;
  background: #F9F9F9;
}
.box_attract_lawyer .text{
  color: #666;
  padding: 0 0 0 54px;
  position: relative;
}
.box_attract_lawyer .text:before{
  content: "";
  background: url(../img/shape/ico_ad_format.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 36px;
  height: 36px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.box_attract_lawyer .text .ttl{
  font: 500 14px/1.3em 'noto sans japanese' , sans-serif;
  text-align: left;
  margin: 0 0 4px;
}
.box_attract_lawyer .description{
  font: 400 12px/1.3em 'noto sans japanese' , sans-serif;
}
.box_attract_lawyer .description a{
  color: #37BAA6;
  font-weight: 700;
}
.box_attract_lawyer .description a:hover{
  text-decoration: underline;
}
@media screen and (max-width: 640px){
  .box_attract_lawyer{
    padding: 10px;
  }
  .box_attract_lawyer .text .ttl{
    font-size: 13px;
  }
}
/* ラージ */
.box_attract_lawyer.large{
  padding: 30px;
}
@media screen and (max-width: 640px){
  .box_attract_lawyer.large{
    padding: 15px;
  }
}

/* エリア_広告を掲載しませんか ——————————— */
.area_attract_lawyer{
  margin: 10px 0 0;
}

/* ! 専門家 ———————————————————————————————————————————————————————————— */
.area_main_layout.expert{
  width: 100%;
}
.area_expert {
  width: 100%;
}
.area_main_layout.expert{
  width: 100%;
}
.area_head_page.expert{
  margin: 0 0 40px;
}
.area_expert .head_list_users [class*=tpl_user] {
  flex: auto;
  min-height: 1px;;
}


@media screen and (max-width: 600px){
  .area_head_page.expert{
    margin: 0 0 20px;
  }
}

/* ! 検索結果_専門家 —————————————————————————————— */
.area_search_result_expert{
  border-bottom: 1px solid #eee;
  padding: 0 0 10px;
  margin-bottom: 20px;
}
.area_search_result_expert p{
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
}
.area_search_result_expert p span{
  font: 600 16px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 6px;
}

/* ! リスト_専門家 —————————————————————————————— */
.list_expert {

}
.list_expert > li + li {
  border-top: 1px solid #eee;
}
.list_expert article {
  background: #fff;
  padding: 20px 0;
  position: relative;
  display: flex;
}
.list_expert article > .img {
  flex: 0 0 60px;
  margin: 0 20px 0 0;
}
.list_expert article > .info {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_expert article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 560px){
  .list_expert article {
    padding: 16px 0;
  }
  .list_expert article > .img {
    margin: 0 10px 0 0;
    flex: 0 0 50px;
  }
  .list_expert [class*="thumb"][class*="_user"][class*="_medium"]{
    width: 50px;
  }
}
@media screen and (max-width: 380px){
  .list_expert article{
/*     display: block; */
  }
  .list_expert article > .img {
    flex: 0 0 40px;
  }
  .list_expert [class*="thumb"][class*="_user"][class*="_medium"]{
    width: 40px;
  }
}

/* ! ヘッド —————————————— */
.head_expert {
  margin: 0 0 16px;
  display: flex;
  align-items: flex-start;
}
.head_expert .name {
  font: 600 18px/1em 'noto sans japanese',sans-serif;
}
.head_expert .name:after {
  content: attr(data-kana)"";
  color: #aaa;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 0 8px;
}
.head_expert .company {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}
@media screen and (max-width: 1180px){
  .head_expert{
    flex-direction:column;
    margin: 0 0 10px;
  }
}
@media screen and (max-width: 560px){
  .head_expert .name{
    font-size: 16px;
  }
  .head_expert .name:after{
    font-size: 12px;
  }
  .head_expert .company{
    font-size: 12px;
  }
}

/* ! フォロー —————————————— */
.area_follow_expert {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.area_follow_expert .number{
  display: flex;
  margin: -10px;
}
.area_follow_expert .follow,
.area_follow_expert .follower {
  font: bold 16px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 10px;
}
.area_follow_expert .follow:before,
.area_follow_expert .follower:before {
  color: #839EAC;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 6px 0 0;
}
.area_follow_expert .follow:before {
  content: "フォロー";
}
.area_follow_expert .follower:before {
  content: "フォロワー";
}
.area_follow_expert .btnarea {
  margin: 0 0 0 24px;
  position: relative;
  z-index: 1;
}
.area_follow_expert .btn_follow {
  font-size: 13px;
  height: 32px;
  padding: 0 24px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 1180px){
  .area_follow_expert{
    margin: 6px 0 0;
    width: 100%;
  }
}
@media screen and (max-width: 560px){
  .area_follow_expert .follow:before,
  .area_follow_expert .follower:before{
    font-size: 11px;
    display: block;
    margin: 0 4px 0 0;
  }
  .area_follow_expert .follow,
  .area_follow_expert .follower {
    display: flex;
    align-items: baseline;
  }
  .area_follow_expert .btn_follow {
    font-size: 12px;
    height: 28px;
    padding: 0 12px;
  }
}
@media screen and (max-width: 480px){
  .area_follow_expert{
    flex-direction:column;
    align-items: flex-start;
    margin: 10px 0 0;
  }
  .area_follow_expert .btnarea {
    margin: 0 0 0 auto;
    margin-top: 6px;
  }
  .area_follow_expert .follow,
  .area_follow_expert .follower{
    font-size: 14px;
  }
}

/* ! ボディ —————————————— */
.body_expert .description {
  color: #444;
  font: 300 13px/1.7em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 600px){
  .body_expert .description {
    font: 300 12px/1.5em 'noto sans japanese',sans-serif;
  }
}


/* ! リスト_専門家 min —————————————————————————————— */
.list_expert.min {}

/* ! ヘッド —————————————— */
.min .head_expert .name {
  font: 600 15px/1em 'noto sans japanese',sans-serif;
}
.min .head_expert .name:after {
  content: attr(data-kana)"";
  color: #aaa;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 0 8px;
}
.min .head_expert .company {
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}

/* ! フォロー —————————————— */
.min .area_follow_expert .follow,
.min .area_follow_expert .follower {
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
.min .area_follow_expert .follow:before,
.min .area_follow_expert .follower:before {
  font: 300 11px/1em 'noto sans japanese',sans-serif;
}
.min .area_follow_expert .follow + .follower {
  margin-left: 16px;
}
.min .area_follow_expert .btnarea {
  margin: 0 0 0 16px;
  position: relative;
  z-index: 1;
}
.min .area_follow_expert .btn_follow {
  font-size: 12px;
  height: 28px;
  padding: 0 12px;
}
@media screen and (max-width: 1180px){
  .min .area_follow_expert .btnarea {
    margin: 10px 0 0 auto;
  }
}
@media screen and (max-width: 5600px){
  .min .area_follow_expert .follow + .follower {
    margin-left: 10px;
    margin-right: 10px;
  }
}

/* ! ボディ —————————————— */
.min .body_expert .description {
  font: 300 12px/1.7em 'noto sans japanese',sans-serif;
}


/* ! 専門家検索エリア_ダッシュボード —————————————————————————————— */
.area_search_expert{
  background: #f4f4f4;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.area_main_layout.expert > form{
  width: 100%;
}
.area_search_expert .layout_fix{
  margin: 0;
  border-right: solid 1px #DFDFDF;
}
.area_search_expert .layout_fix .ttl{
  font: 600 16px/1em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 1240px){
  .area_search_expert .layout{
    display: block;
  }
  .area_search_expert .layout_fix{
    border-right: none;
    margin: 0 0 10px;
  }
}
@media screen and (max-width: 560px){
  .area_search_expert{
    padding: 20px 16px;
  }
}
  
  

/* フォームリスト */
[class*="list_form"][class*="search_expert"]{
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: -4px 0;
}
[class*="list_form"][class*="search_expert"] > li{
  display: flex;
  align-items: center;
  width: auto;
  flex: 0 0 auto;
  padding: 4px 0;
}
[class*="list_form"][class*="search_expert"] .ttl{
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
  white-space: nowrap;
  flex: 0 0 auto;
  min-width: 80px;
  margin: 0 10px 0 0;
  text-align: right;
}
[class*="list_form"][class*="search_expert"] input:not([type="submit"]),
[class*="list_form"][class*="search_expert"] select,
[class*="list_form"][class*="search_expert"] .wrap_checkbox label,
[class*="list_form"][class*="search_expert"] .wrap_radio label{
  height: 34px;
  font: 400 14px/1em 'noto sans japanese' , sans-serif;
  border: 1px solid #ccc;
}
[class*="list_form"][class*="search_expert"] [class*="wrap_input_"][class*="160"] { width: 160px;}
[class*="list_form"][class*="search_expert"] [class*="wrap_input_"][class*="200"] { width: 200px;}


@media screen and (max-width: 1080px){
  [class*="list_form"][class*="search_expert"]{
    margin: -4px -10px;
  }
  [class*="list_form"][class*="search_expert"] > li{
    width: 33.33%;
    padding: 4px 10px;
  }
  [class*="list_form"][class*="search_expert"] .ttl{
    min-width: auto;
  }
  [class*="list_form"][class*="search_expert"] [class*="wrap_input_"][class*="200"],
  [class*="list_form"][class*="search_expert"] [class*="wrap_input_"][class*="160"]{
    width: auto;
    max-width: none;
    flex: auto;
    min-width: 1px;
  }
}
@media screen and (max-width: 980px){
  [class*="list_form"][class*="search_expert"] > li{
    width: 50%;
  }
  [class*="list_form"][class*="search_expert"] > li.w_100_980{
    width: 100%;
  }
  [class*="list_form"][class*="search_expert"] > li.w_auto_980{
    width: auto;
    flex: auto;
    min-width: 1px;
  }
}
@media screen and (max-width: 640px){
  [class*="list_form"][class*="search_expert"]{
    margin: -4px -6px;
  }
  [class*="list_form"][class*="search_expert"] > li{
    display: block;
    padding: 4px 6px;
  }
  [class*="list_form"][class*="search_expert"] .ttl{
    text-align: left;
    margin: 0 0 4px;
  }
}
@media screen and (max-width: 560px){
  [class*="list_form"][class*="search_expert"] .detail_open{
    position: relative;
    padding: 0 0 0 16px;
  }
  [class*="list_form"][class*="search_expert"] .detail_open:before,
  [class*="list_form"][class*="search_expert"] .detail_open:after{
    content: "";
    background: #7f8eca;
    width: 10px;
    height: 1px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  [class*="list_form"][class*="search_expert"] .detail_open:after{
    transform: translateY(-50%) rotate(90deg);
  }
  .open [class*="list_form"][class*="search_expert"] .detail_open:after{
    display: none;
  }
}

/*  */
[class*=list_form][class*=search_expert][class*=inner]{
  width: 100%;
}

/* 検索ボタン */
[class*="btnarea"][class*="search_expert"]{
  margin: -8px;
  margin-top: 10px;
}
[class*="btn_"][class*="search_expert"]{
  background: #446888;
  border-color: #446888;
  height: 36px;
  width: 120px;
  margin: 8px;
  font: 600 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
[class*=btnarea][class*=search_expert] > [class*="button_"]{
  padding: 8px;
}
[class*=btnarea][class*=search_expert] > [class*="button_"]{
  color: #456888;
  font: 600 13px/1em 'noto sans japanese',sans-serif;
}
[class*=btnarea][class*=search_expert] > [class*="button_"]:before{
  content: '';
  width: 15px; height: 15px;
  border-radius: 50%;
  border: solid 1px #446888;
  margin: 0 4px 0 0;
  background: url('../img/ico_plus_navy.svg')no-repeat center;  
  background-size: contain !important;
}
[class*=btnarea][class*=search_expert] > [class*="button_"].open:before{
  background: url('../img/ico_minus_navy.svg')no-repeat center;  
}

/* フォームリスト_専門家一覧aside */
.area_search_expert > .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 20px;
}

.aside [class*="list_form"][class*="search_expert"]{
  margin: -10px -5px;
}
.aside [class*="list_form"][class*="search_expert"] > li{
  width: 100%;
  padding: 10px 5px;
}
.aside [class*="list_form"][class*="search_expert"] .ttl{
  margin: 0 0 6px;
}
@media screen and (max-width: 1000px){
  .aside [class*="list_form"][class*="search_expert"][class*="inner"] > li{
    width: 50%;
  }
}
@media screen and (max-width: 560px){
  .aside [class*="list_form"][class*="search_expert"][class*="inner"] > li{
    width: 100%;
  }
}

/* 注目の専門家 */
.area_recommend_expert{
  border: 2px solid #446888;
  padding: 30px;
  position: relative;
  margin: 40px 0 0;
}
.area_recommend_expert > .ttl{
  color: #446888;
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  background: #fff;
  padding: 10px;
  position: absolute;
  left: 30px;
  top: -20px;
}
@media screen and (max-width: 1180px){
  .area_recommend_expert{
    padding: 20px;
  }
  .area_recommend_expert > .ttl{
    left: 20px;
  }
}
@media screen and (max-width: 560px){
  .area_recommend_expert{
    padding: 16px;
    margin: 30px 0 0;
  }
  .area_recommend_expert > .ttl{
    left: 16px;
    font-size: 18px;
  }
}
/* ! 一覧へボタン ============================== */
.area_recommend_expert .btnarea {
  margin: 10px 0 0;
}
.area_recommend_expert [class*="btn_"] {
  color: #fff;
  background: #446888;
  width: 100%;
  height: 36px;
  border-color: #446888;
}
@media screen and (min-width: 480px){
  .area_recommend_expert [class*="btn_"]:hover {
    color: #446888;
    background: #fff;
  }
}




/* ! 投稿系のレイアウト ———————————————————————————————————————————————————————————— */
.page_post header {
  position: relative;
  width: 100%;
  border-bottom: 1px solid #eee;
}
.page_post .header_new {
  border-bottom: #eee 1px solid;
  padding: 10px 0;
  background: #fff;
}
.page_post header > .container{
  justify-content: flex-start;
  max-width: none;
  padding: 0 40px;
}
.page_post header .logo img {
  height: 20px;
}
.page_post main {
  padding: 0 0 80px;
}
.page_post footer {
  background: #F7F9F9;
  padding: 0;
}
.page_post footer > .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: 60px;
}
@media screen and (max-width: 479px){
  .page_post header > .container{
    padding: 0 16px;
  }
}

/* ユーザーエリア */
.area_user_header .img {
  display: block;
  width: 28px;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.area_user_header .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}



/* ! お役立ちツール ———————————————————————————————————————————————————————————— */

/* ! リスト ———————————————————————————————————————————————————————————— */
.list_useful {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
  margin-top: 30px;
  padding: 10px;
  background: #f8f9f9;
  border-radius: 10px;
}
.list_useful > li {
  width: 50%;
  padding: 5px;
  display: flex;
}
.list_useful article {
  display: flex;
  padding: 40px;
  background: #fff;
  border-radius: 10px;
  border: 4px solid transparent;
  transition: all 0.1s ease;
  position: relative;
}
.list_useful article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 1000px){
  .list_useful article{
    padding: 24px;
  }
}
@media screen and (max-width: 1000px) and (min-width: 767px){
  .list_useful > li{
    width: 100%;
  }
}
@media screen and (max-width: 767px){
  .list_useful article{
    padding: 16px;
  }
}
@media screen and (max-width: 640px){
  .list_useful{
    padding: 4px;
  }
  .list_useful > li{
    width: 100%;
  }
}


/* 画像 */
.list_useful .img {
  flex: 0 0 60px;
  margin: 0 20px 0 0;
}
.list_useful .img:before {
  content: "";
  display: block;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 100%;
  padding-top: 100%;
  background: blue;
}
@media screen and (max-width: 1000px){
  .list_useful .img {
    flex: 0 0 50px;
    margin: 0 16px 0 0;
  }
}
@media screen and (max-width: 767px){
  .list_useful .img {
    flex: 0 0 40px;
    margin: 0 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .list_useful .img {
    flex: 0 0 30px;
  }
}


/* 個別 */
.useful_template .img:before {background: url(../img/shape/ico_fmt.svg)}
.useful_howmuch .img:before {background: url(../img/shape/ico_howmuch.svg)}
.useful_capital .img:before {background: url(../img/shape/ico_capital.svg)}
.useful_enquete .img:before {background: url(../img/shape/ico_enquete.svg)}
.useful_360 .img:before {background: url(../img/shape/ico_360_purple.svg)}


/* テキスト */
.list_useful .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_useful .ttl {
  font: 700 20px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
}
.list_useful .ttl br {
  display: none;
}
.list_useful .description {
  color: #444;
}
@media screen and (max-width: 1000px){
  .list_useful .description{
    font-size: 13px;
  }
}
@media screen and (max-width: 767px){
  .list_useful .ttl{
    font-size: 18px;
    margin: 0 0 8px;
  }
  .list_useful .description{
    font-size: 12px;
  }
}


/* 個別 */
@media screen and (min-width: 480px){
  .useful_template article:hover {border-color: #37BAA6;}
  .useful_howmuch article:hover {border-color: #48BC63;}
  .useful_capital article:hover {border-color: #3FB0C4;}
  .useful_enquete article:hover {border-color: #576086;}
  .useful_360 article:hover {border-color: #7857A7;}
}


/* ! お気に入りページ ———————————————————————————————————————————————————————————— */
.area_favorite {
  margin: 30px 0 0;
}
.area_favorite .tab_button {
  text-align: center;
}
.area_favorite .tab_button br{
  display: none;
}
@media screen and (max-width: 560px){
  .area_favorite .tab_button {
    font-size: 11px;
    line-height: 1.3em;
    height: 42px;
  }
  .area_favorite .tab_button br{
    display: block;
  }
}


/* ! 投稿履歴ページ ———————————————————————————————————————————————————————————— */
.area_history {
  margin: 30px 0 0;
}
.area_history .tab_panel > article + article{
  margin: 40px 0 0 ;
}
.area_history .area_ttl{
  border-bottom: 1px solid #444;
  padding: 0 0 10px;
  margin: 20px 0 10px;
}
.area_history .area_ttl .ttl{
  font: 500 13px/1em 'noto sans japanese' , sans-serif;
}

/* タブ_知識投稿・購入履歴 */
.list_switch{
  display: flex;
  align-items: center;
  margin: 20px 0;
}
.list_switch p,
.list_switch a{
  font: 500 13px/1em 'noto sans japanese' , sans-serif;
  color: #ccc;
  background: #fff;
  display: block;
  padding: 8px 20px;
  border: 1px solid #ccc;
}
.list_switch p{
  color: #fff;
  background: #333;
  border-color: #333;
}
.list_switch > li:first-child p,
.list_switch > li:first-child a{
  border-radius: 3px 0 0 3px;
  border-right: 0;
}
.list_switch > li:last-child p,
.list_switch > li:last-child a{
  border-radius: 0 3px 3px 0;
}

/* 投稿なし */
.no_history{
  padding: 16px 0;
  font: 500 14px/1em 'noto sans japanese' , sans-serif;
}

/*  */
.body_history .list_tab_panel{
  margin: 0;
}
.body_history .list_media.min article,
.body_history [class*="list_cnt"].min article{
  padding: 16px;
}
.body_history .draft article:after{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.15);
  position: absolute;
  left: 0;
  top: 0;
}
.body_history .list_media.min article,
.body_history [class*="list_cnt"].min article{
  padding: 16px;
}
@media screen and (max-width: 480px){
  .body_history .list_media.min article,
  .body_history [class*="list_cnt"].min article{
    padding: 10px;
  }
}

/* 経営相談 投稿履歴 */
.body_history [class*="list_community"].min article{
  padding: 16px 16px 16px 48px
}
.body_history [class*="list_community"] article:before{
  left: 16px;
}

/* 回答履歴 */
[class*="list_community"].answer_history>li>article:before{
  top: 58px;
  width: 14px;
  height: 14px;
  left: 24px;
}
[class*="list_community"].answer_history>li>article:after{
  content: "";
  background: url(../img/shape/ico_answer.svg) no-repeat center center;
  background-size: contain!important;
  width: 18px;
  height: 18px;
  position: absolute;
  left: 16px;
  top: 16px;
}
[class*="list_community"].answer_history .text .ttl{
  font: 400 12px/1.4em 'noto sans japanese',sans-serif;
}
.area_answer_history{
  border-bottom: 2px dotted #eee;
  padding: 0 0 10px;
  margin: 0 0 10px;
}

/* アンケート */
[class*="list_media"].enquete .list_cat a,
[class*="list_media"].enquete .list_cat p{
  color: #576086;
}
.list_info_history{
  margin: -3px;
}
.list_info_history > li{
  padding: 3px;
}
.list_info_history p {
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
}
.list_info_history p span {
  font: 700 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  .list_media.enquete article:hover .ttl {
    color: #576086;
  }
}

/* 360° */
@media screen and (min-width: 480px){
  .list_media.whole_angle article:hover .ttl {
    color: #7857a7;
  }
}

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

.body_history .head_list_media{
  display: flex;
  align-items: flex-start;
}
@media screen and (max-width: 480px){
  .body_history .head_list_media{
    display: block;
  }
}

/* ステータス */
.body_history .status{
  border: 1px solid #666;
  padding: 4px 8px;
  margin: 0 10px 0 0;
  max-width: 52px;
  flex: 0 0 52px;
  display: flex;
  justify-content: center;
}
.body_history .status:before{
  content: "投稿済";
  color: #222;
  font: 600 11px/1em 'noto sans japanese' , sans-serif;
}
.body_history .draft .status{
  border: 1px solid #777;
  background: #777;
}
.body_history .draft .status:before{
  content: "下書き";
  color: #fff;
}
@media screen and (max-width: 480px){
  .body_history .status{
    margin: 0 0 6px;
  }
}



/* レビュー投稿 ボタン */
[class*="btnarea_"][class*="post"][class*="review"]{
  margin: 0 0 0 auto;
}
[class*="btn_"][class*="review"][class*="post"]{
  height: 28px;
  background: #37BAA6;
  padding: 0 16px;
  border-color: #37baa6;
  position: relative;
  z-index: 2;
}
[class*="btn_"][class*="review"][class*="post"][class*="fmt"]{
  background: #37BAA6;
  border-color: #37baa6;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="review"][class*="post"][class*="fmt"]:hover{
    color: #37BAA6;
    background: #fff;
  }
}
[class*="btn_"][class*="review"][class*="post"][class*="fmt"][class*="line"]{
  background: #fff;
  color: #37baa6;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="review"][class*="post"][class*="fmt"][class*="line"]:hover{
    color: #fff;
    background: #37BAA6;
  }
}
[class*="btn_"][class*="review"][class*="post"][class*="book"]{
  background: #DD5176;
  border-color: #DD5176;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="review"][class*="post"][class*="book"]:hover{
    color: #DD5176;
    background: #fff;
  }
}
[class*="btn_"][class*="review"][class*="post"][class*="book"][class*="line"]{
  background: #fff;
  color: #DD5176;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="review"][class*="post"][class*="book"][class*="line"]:hover{
    color: #fff;
    background: #DD5176;
  }
}
@media screen and (max-width: 560px){
  [class*="btnarea_"][class*="post"][class*="review"]{
    width: 100%;
    margin: 6px 0 0;
  }
}

/* フォーム */
[class*="list_form"][class*="review"] > li{
  padding: 20px 10px;
}
[class*="head_form_"][class*="review"]{
  margin: 0 0 6px;
}
@media screen and (max-width: 480px){
  [class*="list_form"][class*="review"] > li{
    padding: 10px;
  }
}

/* 星のレビュー */
.wrap_stars {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.wrap_stars label {
  margin: 0 2px;
}
.wrap_stars input[type="radio"] + label,
.wrap_stars input[type="radio"] + label:after {
  color: #643E93;
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: url(../img/shape/ico_star_blank.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  padding: 0;
  border: none;
  margin: 0 6px 0 0;
}
.wrap_stars input[type="radio"] + label:before {
  display: none;
}
.wrap_stars input[type="radio"] + label:after{
  height: 36px;
  border-color: #643E93;
  box-shadow: 0px 3px 6px rgba(100, 62, 147, 0.32);
  background: #643E93;
  position: absolute;
  top: -2px;
  left: -2px;
  transform: translate(0);
  z-index: -1;
}
.wrap_stars input[type="radio"]:checked ~ label{
  background: url(../img/shape/ico_star.svg);
}

/* ! コメント履歴ページ ———————————————————————————————————————————————————————————— */
.area_comments_history{
  border-bottom: 2px dotted #eee;
  padding: 0 0 10px;
  margin: 0 0 10px;
}

.area_comments_history .comment{
  font: 500 14px/1.5em 'noto sans japanese',sans-serif ;
  position: relative;
  padding: 0 0 0 28px;
}
.area_comments_history .comment:before{
  content: "";
  background: url(../img/shape/ico_comment_gray.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 2px;
  left: 0;
}
.area_comments_history ~ div .ttl{
  font: 400 12px/1.4em 'noto sans japanese',sans-serif !important;
}
.list_media .area_comments_history ~ div .list{
  margin-top: 0;
  margin-bottom: 0;
}

/* リスト */
.list_comment_history article{
  padding: 24px 16px;
}
.list_comment_history > li + li{
  border-top: 1px solid #d8d8d8;
}
/*
.list_comment_history > li + li{
  margin: 20px 0 0;
}
*/

/* ! ==================================================
　購入された知識表示エリア
================================================== */
.area_count_bought {
  width: 100%;
  margin: 12px 0 0;
  background: #f9f9f9;
  padding: 12px 16px;
  display: flex;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}
.area_count_bought p {
  font: bold 14px/1em Roboto,'noto sans japanese',sans-serif;
  margin: 0 20px 0 0;
}
.area_count_bought span {
  color: #777;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  display: inline-block;
}
.area_count_bought .extention {
  color: #000;
  font: 600 16px/1em Roboto,'noto sans japanese',sans-serif;
  padding: 2px 4px;
}
@media screen and (max-width: 480px){
  .area_count_bought {
    justify-content: center;
  }
}

/* ! あしあと———————————————————————————————————————————————————————————— */
.area_visited {
  width: 100%;
}

/* ! リスト_あしあと —————————————————————————————— */
.list_visited {
}
.list_visited > li + li{
  border-top: 1px solid #eee;
}
.list_visited article {
  background: #fff;
  padding: 20px 0;
  position: relative;
  display: flex;
}
.list_visited article > .img {
  flex: 0 0 60px;
  margin: 0 20px 0 0;
}
.list_visited article > .info {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_visited article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 560px){
  .list_visited article {
    padding: 16px 0;
  }
  .list_visited article > .img {
    margin: 0 10px 0 0;
  }
}

/* ! ヘッド —————————————— */
.head_list_visited {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
}
.head_list_visited .name {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
}
.head_list_visited .name:after {
  content: attr(data-kana)"";
  color: #aaa;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 0 8px;
}
.head_list_visited .company {
  font: 300 14px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}
@media screen and (max-width: 1000px){
  .head_list_visited{
    flex-direction:column;
    margin: 0 0 10px;
    align-items: flex-start;
  }
}
@media screen and (max-width: 560px){
  .head_list_visited .name{
    font-size: 16px;
  }
  .head_list_visited .name:after{
    font-size: 12px;
  }
  .head_list_visited .company{
    font-size: 12px;
  }
}

/* ! ボディ —————————————— */
.body_list_visited .description{
  color: #444;
  font: 300 13px/1.7em 'noto sans japanese',sans-serif;
}
.body_list_visited .date{
  color: #B3C1C7;
  font: 400 13px/1em 'noto sans japanese',sans-serif;
  margin: 6px 0 0;
  text-align: right;
}
@media screen and (max-width: 560px){
  .body_list_visited .date{
    font-size: 12px;
  }
}



/* ! ============================================================
　投稿が0件の場合
============================================================ */
.area_bnr_post {
  padding: 40px;
  background: #EBF4FF;
  margin: 20px 0 0;
  position: relative;
}
@media screen and (max-width: 480px){
  .area_bnr_post {
    padding: 30px 20px;
  }
}

/* 個別 */
.area_bnr_post.community {
  background: #fff6ea;
}
.area_bnr_post.skill {
  background: #fff1f5;
}

/* アイコン */
.area_bnr_post:before,
.area_bnr_post:after {
  content: "";
  display: block;
  width: 160px;
  height: 160px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  bottom: 10px;
}
.area_bnr_post:before {
  left: 10px;
  background: url(../img/shape/ico_bnr_post_01.svg);
}
.area_bnr_post:after {
  right: 10px;
  background: url(../img/shape/ico_bnr_post_02.svg);
}
.area_bnr_post.community:before {
  background: url(../img/shape/ico_bnr_post_03.svg);
}
.area_bnr_post.community:after {
  background: url(../img/shape/ico_bnr_post_04.svg);
}
.area_bnr_post.skill:before {
  background: url(../img/shape/ico_bnr_post_05.svg);
}
.area_bnr_post.skill:after {
  background: url(../img/shape/ico_bnr_post_06.svg);
}


/* ! ヘッド —————————————————————————————— */
.head_bnr_post {
  margin: 10px 0 30px;
  display: flex;
  justify-content: center;
}
.head_bnr_post .ttl {
  font: 600 22px/1em 'noto sans japanese',sans-serif;
  position: relative;
  padding: 0 0 0 36px;
}
.head_bnr_post .ttl:before {
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/shape/ico_pen_blue.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: .5em;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (max-width: 480px){
  .head_bnr_post {
    margin: 0 0 25px;
  }
  .head_bnr_post .ttl {
    font-size: 18px;
    margin: 0;
  }
}

/* 個別 */
.area_bnr_post.community .head_bnr_post .ttl:before {
  background: url(../img/shape/ico_pen_yellow.svg);
}
.area_bnr_post.skill .head_bnr_post .ttl:before {
  background: url(../img/shape/ico_pen_red.svg);
}



/* ! ボディ —————————————————————————————— */
.body_bnr_post {
  margin: 20px 0 0;
  position: relative;
  z-index: 1;
}
.body_bnr_post > .text {
  display: flex;
  justify-content: center;
}
.body_bnr_post .description {
  font: 500 15px/1.4em 'noto sans japanese',sans-serif;
}
.body_bnr_post > .btnarea {
  margin: 32px auto 0;
  max-width: 300px;
}
.body_bnr_post [class*="btn_post"] {
  height: 56px;
  border-width: 2px;
  font-size: 16px;
}
.body_bnr_post [class*="btn_post"]:before {
  width: 16px;
  height: 16px;
}


/* リスト */
.list_merit_check > li + li {
  margin: 12px 0 0;
}
.list_merit_check p {
  color: #333;
  font: 300 13px/1.2em 'noto sans japanese',sans-serif;
  position: relative;
  padding: 0 0 0 22px;
}
.list_merit_check p:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: #3f7cc4 url(../img/shape/ico_check_white.svg);
  background-size: 10px 10px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  border-radius: 2px;
  position: absolute;
  top: .6em;
  left: 0;
  transform: translateY(-50%);
}

/* 個別 */
.area_bnr_post.community .list_merit_check p:before {
  background: #f98623 url(../img/shape/ico_check_white.svg);
}
.area_bnr_post.skill .list_merit_check p:before {
  background: #DD5176 url(../img/shape/ico_check_white.svg);
}


/* ! ============================================================
　ユーザーを探す
============================================================ */
/* リスト */
.list_users{
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
  margin-top: 20px;
}
.list_users > li{
  width: 25%;
  padding: 5px;
  display: flex;
  flex-direction:column;
}
.list_users article{
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.list_users .expert article:before{
  content: '専門家';
  font: 600 11px/1em 'noto sans japanese' , sans-serif;
  color: #fff;
  background: #29446E;
  padding: 3px 5px;
  position: absolute;
  left: 0;
  top: 10px;
}
@media screen and (max-width: 1180px){
  .list_users > li{
    width: 33.3333%;
  }
}
@media screen and (max-width: 567px){
  .list_users{
    margin: -3px;
    margin-top: 10px;
  }
  .list_users > li{
    width: 50%;
    padding: 3px;
  }
  .list_users article{
    padding: 8px;
  }
}

/* ヘッド */
.head_list_users{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
  flex: 1 1 auto;
  position: relative;
}
.head_list_users [class*=tpl_user]{
  display: flex;
  flex-direction:column;
  width: 100%;
}
.head_list_users [class*=tpl_user] [class*=thumb]{
  margin: 0 0 10px;
}
.head_list_users .industry{
  color: #29446E;
  font: 600 11px/1.3em 'noto sans japanese',sans-serif;
  margin: auto 0 0;
  padding: 8px 0 0;
  width: 100%;
}
.head_list_users .name{
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
}
.head_list_users .name:after{
  content: attr(data-kana)"";
  color: #B3C1C7;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 4px 0 0;
}

/* ボディ */
.body_list_users{
  padding: 10px 0;
}
.body_list_users .list_follow{
  display: flex;
  justify-content: center;
  margin: -4px;
}
.body_list_users .list_follow > li{
  padding: 4px;
}
.body_list_users .list_follow p{
  font: 700 16px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
}
.body_list_users .list_follow p:before{
  content: attr(data-ttl)"";
  color: #B3C1C7;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 4px;
}
.body_list_users [class*="btnarea"]{
  margin: 10px 0 0;
}

@charset "UTF-8";

/* ! マイページ ————————————————————————————————————————————————————————————


共通
ユーザー情報


———————————————————————————————————————————————————————————— */
/* ! 共通 ———————————————————————————————————————————————————————————— */


/* ! ユーザー情報 ———————————————————————————————————————————————————————————— */
.area_info_profile {
  width: 100%;
}
.area_user_number_profile{
  margin: 6px 0 0;
}
.user_number {
  display: block;
  font: 400 12px/1em 'Roboto','noto sans japanese',sans-serif;
  color: #aaa;
  padding-top: 4px;
}
.user_certification {
  display: block;
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  color: #aaa;
  padding-top: 4px;
  margin: -2px;
}
.user_certification span{
  padding: 2px;
}
.area_user_aside .user_number{
  font-weight: 300;
}
input:not([type=checkbox]):not([type=submit]).user_number{
  height: auto;
  padding: 0;
  border: none;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
}
[class*="button_text_"][class*="user_number"]{
  border: none;
  padding: 0;
  margin: 2px 0 0;
}

/* ヘッド */
.area_info_profile .head_info_profile {
  display: flex;
  align-items: center;
}
.area_info_profile .tpl_user {
  margin-right: auto;
  flex: 1 1 auto;
  min-width: 10px;
}
.area_info_profile .text{
  margin: 0 0 0 8px;
}
.area_info_profile .name {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
  display: flex;
  align-items: flex-end;
}
.area_info_profile .name:after {
  content: attr(data-kana)"";
  color: #B3C1C7;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 0 6px;
}
.area_info_profile .profession{
  font: 400 13px/1em 'noto sans japanese',sans-serif;
  margin: 10px 0 0;
}
.area_info_profile .last_login{
  font: 500 11px/1em 'noto sans japanese' , sans-serif;
  margin: 10px 0 0;
  color: #8b93b2;
}


/* 認証リスト ----------------- */
.list_status_qualification {
  display: flex;
  margin: 8px 0 0;
}
.list_status_qualification > li{
  position: relative;
}
.list_status_qualification > li + li {
  margin: 0 0 0 4px;
}
.list_status_qualification p[class*="button_"] {
  color: #aaa;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  padding: 6px 8px;
  background: #eee;
  border-radius: 3px;
  border: 1px solid #eee;
}
.list_status_qualification p:before {
  content: attr(data-off)"";
}
/* 登録されている場合 */
.list_status_qualification .data-on[class*="button_"] {
  color: #fff;
  background: #446888;
  cursor: pointer;
  padding-right: 20px;
}
.list_status_qualification .data-on:before {
  content: attr(data-on)"";
}
.list_status_qualification .data-on:after{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_white.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 8px;
  height: 8px;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (min-width: 480px){
  .list_status_qualification .data-on:hover{
    color: #446888;
    background: #fff;
    border-color: #446888;
  }
  .list_status_qualification .data-on:hover:after{
    background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_navy.svg") no-repeat center center !important;
    background-size: contain !important;
  }
}

/* 証明内容 */
[class*="area_evidence_"]{
  display: none;
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  z-index: 3;
  padding: 16px;
  box-shadow: 0px 3px 8px 0px rgba(0,0,0,.2);
  border-radius: 4px;
  min-width: 180px
}
.show [class*="area_evidence_"]{
  display: block;
}
.head_evidence{
  margin: 0 0 6px;
}
.head_evidence .ttl{
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
  padding: 0 0 8px;
  border-bottom: 1px solid #eee;
}
.body_evidence p{
  font: 600 13px/1em 'noto sans japanese' , sans-serif;
}
@media screen and (max-width: 370px){
  [class*="area_evidence_"]{
    left: 0;
    right: auto;
  }
}

/* 証明内容_画像 */
[class*="area_evidence_"][class*="img"]{
  left: 0;
  width: 320px;
}
[class*="area_evidence_"][class*="img"] .head_evidence{
  margin: 0 0 16px;
}
[class*="area_evidence_"][class*="img"] .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
@media screen and (max-width: 640px){
  [class*="area_evidence_"][class*="img"]{
    right: 0;
    left: auto;
    top: calc(100% + 16px);
  }
}
@media screen and (max-width: 370px){
  [class*="area_evidence_"][class*="img"]{
    width: 280px;
  }
}
@media screen and (max-width: 350px){
  [class*="area_evidence_"][class*="img"]{
    width: 240px;
  }
}

/*  */
.area_info_profile .area_edit {
  width: auto;
  margin: 8px 0 0;
}
.area_info_profile .area_edit [class*="btn_"]{
  margin: 2px;
}
@media screen and (max-width: 1080px){
  .area_info_profile.my .head_info_profile {
    display: block;
  }
}
@media screen and (max-width: 960px){
  .area_info_profile .head_info_profile {
    display: block;
  }
  .area_info_profile .area_edit [class*="btn_"]{
    height: 40px;
  }
}
@media screen and (max-width: 560px){
  .area_info_profile .area_edit [class*="btn_"]{
    flex: 1 1 0;
    height: 34px;
    font-size: 13px;
    padding: 0;
  }
  .area_info_profile [class*="thumb"][class*="_user"]{
    width: 80px;
  }
  .area_info_profile .last_login{
    font: 400 11px/1em 'noto sans japanese' , sans-serif;
  }
}
@media screen and (max-width: 480px){
  .area_info_profile [class*="thumb"][class*="_user"]{
    width: 60px;
  }
  .area_info_profile .name {
    font-size: 16px;
  }
  .area_info_profile .name:after{
    font-size: 11px;
  }
  .area_info_profile .profession{
    font-size: 12px;
    margin: 6px 0 0;
  }
}


/* フォローエリア */
.area_info_profile .area_follow_user .follow,
.area_info_profile .area_follow_user .follower {
  font-size: 20px;
  cursor: pointer;
}
.area_info_profile .area_follow_user [class*="btn_"] {
  font-size: 12px;
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
@media screen and (min-width: 480px){
  .area_info_profile .area_follow_user .follow:hover,
  .area_info_profile .area_follow_user .follower:hover{
    color: #43AC5D;
  }
}

/* アクションボタンエリア */
[class*="btnarea_"][class*="user_action"]{
  margin: 10px 0 0;
}
[class*="btnarea_"][class*="user_action"] [class*="button_"]{
  font-size: 12px;
  height: 30px;
  padding: 0 18px 0 32px;
}
[class*="btnarea_"][class*="user_action"] [class*="button_"][class*="menu_dot"]{
  padding: 0;
  display: flex;
  align-items: center;
}
[class*="btnarea_"][class*="user_action"] [class*="button_"][class*="menu_dot"] .blocking{
  color: #ED6086;
}
[class*="btnarea_"][class*="user_action"] a + a{
  margin: 0 0 0 4px;
}
@media screen and (max-width: 400px){
  [class*="btnarea_"][class*="user_action"] [class*="button_"]{
    padding: 0 10px 0 26px;
  }
  [class*="btnarea_"][class*="user_action"] [class*="button_"]:before{
    left: 8px;
  }
}

/* リスト_プロフィール */
.list_profile {
  margin: 30px 0px 0px;
}
.list_profile > li{
  display: flex;
}
.list_profile > li + li{
  margin: 6px 0 0;
  padding: 6px 0 0;
  border-top: 1px dotted #eee;
}
.list_profile .head_list_profile{
  flex: 0 0 100px;
}
.list_profile .body_list_profile{
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 -8px;
}
.list_profile .ttl{
  font: 700 13px/1.4em 'noto sans japanese' , sans-serif;
}
.list_profile .body_list_profile p{
  font: 400 13px/1.4em 'noto sans japanese' , sans-serif;
  padding: 0 8px;
}
@media screen and (max-width: 480px){
  .list_profile > li{
    display: block;
  }
  .list_profile .head_list_profile{
    margin: 0 0 4px;
  }
}


/* ! 分析 —————————————————————————————— */
.area_analysis {
  margin: 20px 0 0;
  display: flex;
}
@media screen and (max-width: 1000px){
  .area_analysis{
    display: block;
  }
}

/* カウント */
.area_count {
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 1000px){
  .area_analysis{
    margin: 16px 0 0;
  }
}

/* フォロー・フォロワー */
.area_follow {
  flex: 0 0 180px;
  margin: 0 20px 0 0;
}
.area_follow p {
  font-size: 28px;
}
.area_follow p:before {
  font-size: 12px;
  text-align: left;
}
.area_follow .list_count {
  margin: 0 -15px;
}
.area_follow .list_count > li {
  padding: 0 15px;
}
@media screen and (max-width: 1000px){
  .area_follow {
    margin: 0 0 10px;
  }
  .area_follow p{
    font-size: 24px;
    display: flex;
    align-items: baseline;
  }
  .area_follow p:before{
    margin: 0 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .area_follow p{
    font-size: 20px;
  }
}


/* ボディ */
.body_info_profile {
  margin: 12px 0 0;
}


/* カウントリスト */
.list_count_amount {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  padding: 4px 0;
  margin: 0 0 12px;
  justify-content: center;
}
.list_count_amount > * {
  padding: 8px 15px;
}
.list_count_amount .tpl_count {
  font-size: 18px;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
}
.list_count_amount .tpl_count.link{
  cursor: pointer;
}
.list_count_amount .tpl_count.link:hover{
  color: #43ac5d;
}
.list_count_amount .tpl_count:before {
  font-size: 11px;
  display: flex;
  align-items: center;
  height: 18px;
  padding: 0 0 0 22px;
  margin: 0 6px 0 0;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_book_gray.svg");
  background-size: 18px 18px !important;
  background-position: left center !important;
  background-repeat: no-repeat !important;
}
.list_count_amount .ico_good:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_good.svg");}
.list_count_amount .ico_agree:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_agree.svg");}
.list_count_amount .ico_view:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_view.svg");}
.list_count_amount .ico_download:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_download.svg");}
.list_count_amount .ico_login:before { background: none; padding-left: 0;}
.list_count_amount .ico_best_answer:before { background: none; padding-left: 0; }

@media screen and (max-width: 560px){
  .list_count_amount{
    margin: 0 -15px;
    margin-bottom: 10px;
  }
}
@media screen and (max-width: 480px){
  .list_count_amount{
    margin: 0 -8px;
    margin-bottom: 10px;
  }
  .list_count_amount > * {
    padding: 8px;
  }
  /* .list_count_amount .tpl_count {
    font-size: 15px;
    flex-direction:column;
  }
  .list_count_amount .tpl_count:before {
    padding: 0 0 0 18px;
    margin: 0 4px 0 0;
    background-size: 16px 16px !important;
    margin: 0 0 4px;
  } */
}

/* リストレイアウト */
.list_count_layout {
  display: flex;
  margin: 0 -15px;
}
.list_count_layout > li {
  flex: 1 1 0;
  padding: 0 15px;
}
.list_count_layout .ttl {
  color: #A3A7B2;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  margin: 4px 0 0;
}

/* アイコンリスト */
.list_count_ico {
  padding: 8px 0 0;
  border-bottom: 1px dashed #E5E7EB;
}
.list_count_ico > li {
  padding: 4px 0;
  border-top: 1px dashed #E5E7EB;
}
.list_count_ico p {
  font: 600 15px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  font-style: italic;
  text-align: right;
  position: relative;
}
.list_count_ico p:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.ico_book p:before { background: url(../img/action/ico_book_gray.svg);}
.ico_good p:before { background: url(../img/action/ico_good_gray.svg);}
.ico_bad p:before { background: url(../img/action/ico_bad_gray.svg);}
.ico_agree p:before { background: url(../img/action/ico_agree_gray.svg);}
.ico_download p:before { background: url(../img/action/ico_download_gray.svg);}
.ico_comment p:before { background: url(../img/action/ico_comment_gray.svg);}
.ico_view p:before { background: url(../img/action/ico_view_gray.svg);}


/* 文章_プロフィール */
.area_text_profile {
  margin: 24px 0 0;
}
.area_text_profile .description {
  color: #666;
  font: 300 14px/1.7em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 480px){
  .area_text_profile .description {
    font-size: 13px;
  }
}

/* 課題エリア */
.area_main_layout.col .area_task_profile {
  width: 100%;
  border: 4px solid #1E5076;
  border-radius: 5px;
  padding: 15px;
  margin-top: 30px;
}
.area_task_profile .head {
  margin: 0 0 20px;
}
/* 課題リスト */
.list_task_profile > li {
  position: relative;
}
.list_task_profile > li + li {
  margin: 8px 0 0;
}
.list_task_profile p {
  color: #1E5076;
  font: 600 13px/1.3em 'noto sans japanese',sans-serif;
  background: #fff;
  padding: 0 16px;
  position: relative;
}
.list_task_profile p:before {
  content: "・";
  font: 600 13px/1.2em 'noto sans japanese',sans-serif;
  position: absolute;
  top: .6em;
  left: 0;
  transform: translateY(-50%);
}

/* 履歴エリア */
.area_main_layout.col .area_history_profile {
  background: #F7F9F9;
  width: 100%;
  padding: 10px;
  border-radius: 5px;
  margin-top: 60px;
}
.area_history_profile .head {
  padding: 10px 10px 0;
}

/* リスト */
.list_history_profile {
  max-height: 300px;
  overflow: auto;
}
.list_history_profile > li + li {
  margin: 1px 0 0;
}
.list_history_profile article {
  background: #fff;
  padding: 16px;
  position: relative;
}
.list_history_profile .text {
  position: relative;
  padding: 0 0 0  28px;
}
.list_history_profile .text: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: 0;
  left: 0;
}
.list_history_profile .text > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 個別 */
.list_history_profile .text.content:before { background: url(../img/shape/ico_content.svg);}
.list_history_profile .text.cgm:before { background: url(../img/shape/ico_cgm.svg);}
.list_history_profile .text.store:before { background: url(../img/shape/ico_skill.svg);}
.list_history_profile .text.comment:before { background: url(../img/shape/ico_comment_gray.svg);}
.list_history_profile .text.wholeangle:before { background: url(../img/shape/ico_360_purple.svg);}
.list_history_profile .text.enquete:before { background: url(../img/shape/ico_enquete.svg);}


.list_history_profile .date {
  color: #A3A7B2;
  font: 400 11px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 8px;
}
.list_history_profile .ttl {
  font: 400 12px/1.5em 'noto sans japanese',sans-serif;
}
.list_history_profile .sub {
  color: #A3A7B2;
  font: 400 11px/1.5em 'noto sans japanese',sans-serif;
}
@media screen and (min-width: 480px){
  .list_history_profile .text:hover .ttl{
    text-decoration: underline;
  }
}
@media screen and (max-width: 767px){
  .list_history_profile article{
    display: block;
  }
  .list_history_profile .date{
    margin: 0 0 4px;
  }
}
@media screen and (max-width: 480px){
  .list_history_profile .ttl{
    font-size: 13px;
  }
}


/* ! ユーザーのリスト____あしあと/フォロー中フォロワー ———————————————————————————————————————————————————————————— */

[class*="list_user_"][class*="_default"] > li + li {
  border-top: 1px solid #eee;
}
[class*="list_user_"][class*="_default"] article {
  background: #fff;
  padding: 20px;
  position: relative;
  display: flex;
}
[class*="list_user_"][class*="_default"] article > .img {
  flex: 0 0 60px;
  margin: 0 20px 0 0;
}
[class*="list_user_"][class*="_default"] article > .info {
  flex: 1 1 auto;
  min-width: 10px;
}
[class*="list_user_"][class*="_default"] article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
@media screen and (max-width: 560px){
  [class*="list_user_"][class*="_default"] article {
    padding: 16px;
  }
  [class*="list_user_"][class*="_default"] article > .img {
    margin: 0 10px 0 0;
  }
}

/* ! ヘッド —————————————— */
[class*="list_user_"][class*="_default"] [class*="head_info"] {
  margin: 0 0 10px;
  display: flex;
  align-items: flex-start;
}
[class*="list_user_"][class*="_default"] .name {
  font: 600 15px/1em 'noto sans japanese',sans-serif;
}
[class*="list_user_"][class*="_default"] .name:after {
  content: attr(data-kana)"";
  color: #aaa;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 0 8px;
}
[class*="list_user_"][class*="_default"] .company {
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}
@media screen and (max-width: 1000px){
  [class*="list_user_"][class*="_default"] [class*="head_info"]{
    flex-direction:column;
    margin: 0 0 10px;
  }
}

/* ! フォロ―ボタン —————————————— */
[class*="list_user_"][class*="_default"] [class*="btnarea_"][class*="follow"]{
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  margin: 0;
}
[class*="list_user_"][class*="_default"] .button_follow,
[class*="list_user_"][class*="_default"] .button_following{
  font-size: 12px;
  width: 130px;
  z-index: 1;
}
@media screen and (max-width: 1000px){
  [class*="list_user_"][class*="_default"] [class*="btnarea_"][class*="follow"]{
    margin: 6px 0 0;
    width: 100%;
  }
}

/* ! ボディ —————————————— */
[class*="list_user_"][class*="_default"] [class*="body_info"] .description {
  font: 300 12px/1.7em 'noto sans japanese',sans-serif;
}

/* ! フット —————————————— */
/* あしあと */
[class*="foot_info"][class*="visited"] .date{
  color: #B3C1C7;
  font: 400 12px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: right;
}

/* ! フォロー中/フォロワー ————————————————————— */
.list_tab_panel.follow > li{
  height: 500px;
  overflow-y: auto;
}

/* ! 過去のあしあと ————————————————————— */
.area_visited [class*="area_paging"]{
  margin: 30px 0 0;
}

.infinitescroll_list > ul > li:first-child {
  border-top: none;
}
@charset "UTF-8";


/* ! エリア ————————————————————————————————————————————————————————————

バナーエリア_メディア
カウントエリア

メッセージ

———————————————————————————————————————————————————————————— */

/* ! バナーエリア_メディア ———————————————————————————————————————————————————————————— */
.area_main_settings {
  width: 100%;
  max-width: 560px;
}
.area_main_settings.wide {
  max-width: 800px;
}

/* ヘッド */
.head_settings {
  margin: 0 0 40px;
  position: relative;
}
.head_settings [class*="btnarea"]{
  margin: 0 0 16px;
  display: none;
}
.head_settings .ttl {
  font: 500 24px/1em 'noto sans japanese',sans-serif;
}
.head_settings .description {
  color: #A3A7B2;
  font: 400 13px/1.5em 'noto sans japanese',sans-serif;
  margin: 12px 0 0;
}

@media screen and (max-width: 1000px){
  .head_settings [class*="btnarea"]{
    display: block;
  }
}
@media screen and (max-width: 560px){
  .head_settings {
    margin: 0 0 30px;
  }
  .head_settings .ttl{
    font-size: 22px;
  }
}

/* ボタン_有料プランのメリット */
.head_settings [class*="btn_"][class*="member"]{
  height: 30px;
  padding: 0 16px;
  position: absolute;
  top: 0;
  right: 0;
}
@media screen and (max-width: 1000px){
  .head_settings [class*="btn_"][class*="member"]{
    top: 33px;
  }
}
@media screen and (max-width: 480px){
  .head_settings [class*="btn_"][class*="member"]{
    padding: 0 10px;
  }
}
@media screen and (max-width: 370px){
  .head_settings [class*="btn_"][class*="member"]{
    top: -5px;
  }
}


/* タイトル */
.ttl_sub {
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  margin: 40px 0 20px;
}

/* コンテンツ */
.cnt_settings [class*="btnarea"] {
  margin: 30px 0 0;
}
.cnt_settings [class*="btnarea"] [class*="btn_"] + [class*="btn_"]{
  margin: 0 0 0 4px;
}
@media screen and (max-width: 480px){
  .cnt_settings [class*="btnarea"] {
    margin: 16px 0 0;
  }
}


/* ! セッティングメニュー ———————————————————————————————————————————————————————————— */
.area_menu_settings {
  width: 100%;
}

/* ヘッド */
.head_menu_settings {
  margin: 0 0 30px;
}
/* アラート */
.alert_profile {
  color: #ED6086;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  border: 1px solid #ED6086;
  padding: 15px;
  border-radius: 5px;
}


/* ボディ */
/* リスト */
.list_menu_settings {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list_menu_settings > li {
  width: 33.3333%;
  padding: 5px;
  position: relative;
}
.list_menu_settings a {
  color: #666;
  font: 400 15px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: flex;
  align-items: center;
  padding: 0 10px 0 60px;
  height: 60px;
  width: 100%;
  position: relative;
  cursor: pointer;
  white-space: nowrap;
}
.list_menu_settings a:before {
  content: "";
  display: block;
  width: 40px;
  height: 40px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
@media screen and (min-width: 480px){
  .list_menu_settings a:hover {
    color: #43AC5D;
  }
}
@media screen and (max-width: 1000px){
  .list_menu_settings > li {
    width: 50%;
  }
}
@media screen and (max-width: 560px){
  .list_menu_settings{
    flex-direction:column;
  }
  .list_menu_settings > li {
    width: 100%;
  }
  .list_menu_settings a {
    height: 50px;
    padding: 0 10px 0 50px;
  }
  .list_menu_settings a:before {
    width: 30px;
    height: 30px;
  }
}
@media screen and (max-width: 480px){
  .list_menu_settings a {
    font-size: 13px;
    height: 40px;
    padding: 0 10px 0 40px;
  }
  .list_menu_settings a:before {
    width: 24px;
    height: 24px;
  }
}

/* 未登録 */
.list_menu_settings .unauth a{
  align-items: flex-start;
  padding-top: 16px;
}
.list_menu_settings .unauth:before{
  content: "未登録";
  color: #fff;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  background: #333;
  z-index: 1;
  display: inline-block;
  text-align: center;
  padding: 2px 10px;
  border-radius: 20px;
  height: 12px;
  position: absolute;
  bottom: 12px;
  left: 64px;
}
@media screen and (max-width: 560px){
  .list_menu_settings .unauth a{
    padding-top: 8px;
  }
  .list_menu_settings .unauth:before{
    left: 54px;
  }
}
@media screen and (max-width: 480px){
  .list_menu_settings .unauth:before{
    left: 44px;
    bottom: 4px;
  }
}

/* ! 個別 —————————————————————————————— */
.nav_profile a:before { background: url(https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_profile.svg);}
.nav_certificate a:before { background: url(https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_certificate.svg);}
.nav_sms a:before { background: url(https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_sms.svg);}
.nav_mail a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_mail.svg");}
.nav_password a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_password.svg");}
.nav_plan a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_plan.svg");}
.nav_payment a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_payment.svg");}
.nav_sales a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_sales.svg");}
.nav_deposit a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_deposit.svg");}
.nav_receipt a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_receipt.svg");}
.nav_bank a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_bank.svg");}
.nav_alert a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_alert.svg");}
.nav_retire a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_retire.svg");}
.nav_logout a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_settings_logout.svg");}




/* ! プラン変更 ———————————————————————————————————————————————————————————— */
.wrap_plan_select label {
  border: 2px solid #e4e4e4;
  background: #f9f9f9;
  padding: 20px 20px 20px 56px;
  border-radius: 8px;
  margin-right: 0 !important;
  width: 100%;
  overflow: hidden;
  height: auto;
}
.wrap_plan_select label:before,
.wrap_plan_select label:after {
  top: 36px;
  left: 20px;
}
@media screen and (min-width: 480px){
  .wrap_plan_select label:hover {
    border-color: #51C96D;
  }
}
.wrap_plan_select label:nth-of-type(n + 2) {
  margin-top: 8px;
}
.wrap_plan_select .head {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  width: 100%;
}
.wrap_plan_select .ttl {
  color: #000;
  font: 900 18px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 12px;
}
.cnt_settings .wrap_plan_select .ttl{
  margin: 0;
}
.wrap_plan_select .ttl:after {
  content: attr(data-ttl)"";
  color: #9a9a9a;
  font: 500 16px/1em 'Roboto','noto sans japanese',sans-serif;
  display: block;
  margin: 8px 0 0;
}
.wrap_plan_select input[type=radio]:checked + label .ttl:after{
  color: #292929;
}
.wrap_plan_select .price {
  font: 900 28px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
}
.wrap_plan_select .price span {
  font: 500 15px/1em 'noto sans japanese',sans-serif;
}
.wrap_plan_select .price:before {
  content: "¥";
  font-size: .8em;
  display:inline-block;
}
.wrap_plan_select .price:after {
  content: "（税込）" ;
  color: #666;
  font: 400 11px/1em 'noto sans japanese',sans-serif;
}
.wrap_plan_select .description {
  color: #666;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}
@media screen and (max-width: 480px){
  .wrap_plan_select .ttl{
    font-size: 16px;
  }
  .wrap_plan_select .ttl:after{
    font-size: 14px;
  }
  .wrap_plan_select label {
    border-width: 3px;
    padding: 16px 14px 16px 56px;
  }
  .wrap_plan_select label {
    padding-left: 46px;
  }
  .wrap_plan_select label:before,
  .wrap_plan_select label:after {
    left: 15px;
  }
  .wrap_plan_select .ttl:after {
    margin: 5px 0 0;
  }
  .wrap_plan_select .price {
    font-size: 22px;
  }
  .wrap_plan_select .price span {
    font-size: 13px;
    margin: 0;
  }
}
@media screen and (max-width: 420px){
  .wrap_plan_select .price {
    font-size: 20px;
  }
}
@media screen and (max-width: 370px){
  .wrap_plan_select .head{
    flex-direction:column;
  }
  .wrap_plan_select .price{
    margin: 4px 0 0;
  }
}

/* チェックされたもの */
.wrap_plan_select input[type=radio]:checked + label {
  background: #f4fff6;
  border-color: #51C96D ;
}
.wrap_plan_select input[type=radio]:checked + label::after {
  background: #51C96D url(../img/shape/shape_circle_white.svg) no-repeat center center;
  border-color: #51C96D;
}



/* 金額表記 */
.area_price_plan {
  margin: 0 0 20px;
}
.area_price_plan .head {
  border-bottom: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0 0 12px;
  margin: 0 0 8px;
}
.area_price_plan .ttl {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
}
.area_price_plan .plan {
  font: 700 20px/1em 'Roboto','noto sans japanese',sans-serif;
  margin-left: auto;
}
.area_price_plan .price {
  font: 700 24px/1em 'Roboto','noto sans japanese',sans-serif;
  margin-left: auto;
}
.area_price_plan .price:before {
  content: "¥";
  font-size: .8em;
  margin: 0 4px 0 0;
}
.area_price_plan .price:after {
  content: "(税込)";
  color: #666;
  font: 400 11px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}
.area_price_plan .description,
.area_price_plan .description a {
  color: #A3A7B2;
  font: 400 13px/1.5em 'noto sans japanese',sans-serif;
}
.area_price_plan .description a {
  text-decoration: underline;
}
@media screen and (max-width: 480px){
  .area_price_plan {
    margin: 10px 0;
  }
}


/* 現在/翌月のプラン */
.list_plan_contents{
  display: flex;
  flex-wrap: wrap;
  margin: -30px;
}
.list_plan_contents > li{
  width: 50%;
  padding: 30px;
  position: relative;
}
.list_plan_contents > li:first-child:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_gray.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.list_plan_contents article{
  padding-left: 24px;
  position: relative;
}
.list_plan_contents article:before{
  content: "";
  background: #d0d0d0 url(../img/shape/ico_check_white.svg) no-repeat center center !important;
  background-size: 10px !important;
  width: 14px;
  height: 14px;
  position: absolute;
  left: 0;
  top: 1px;;
  border-radius: 10px;
}
.list_plan_contents .ttl{
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 10px;
}
.list_plan_contents .cnt{
  color: #444;
  font: 600 16px/1em  'noto sans japanese',sans-serif;
}
.plan_status .description{
  color: #A3A7B2;
  font: 400 13px/1.5em 'noto sans japanese',sans-serif;
  margin: 20px 0 0;
}
@media screen and (max-width: 560px){
  .list_plan_contents{
    margin: -20px;
  }
  .list_plan_contents > li{
    padding: 20px;
  }
  .list_plan_contents .ttl{
    font-size: 13px;
  }
  .list_plan_contents .cnt{
    font-size: 14px;
  }
  .plan_status .description{
    margin: 10px 0 0;
  }
}
@media screen and (max-width: 480px){
  .list_plan_contents{
    margin: 0;
  }
  .list_plan_contents > li{
    width: 100%;
    padding: 0;
  }
  .list_plan_contents > li + li{
    margin: 10px 0 0;
  }
  .list_plan_contents article{
    display: flex;
  }
  .list_plan_contents .ttl{
    flex: 0 0 130px;
    margin: 0;
  }
  .list_plan_contents > li:first-child:before {
    display: none;
  }
}
@media screen and (max-width: 370px){
  .list_plan_contents article{
    display: block;
  }
}

/* 翌月のプラン */
.list_plan_contents .next .ttl{
  color: #000;
}
.list_plan_contents .next article:before{
  background: #51c96d url(../img/shape/ico_check_white.svg) no-repeat center center !important;
  background-size: 10px !important;
}
.list_plan_contents .next .cnt{
  color: #51c96d;
}

/* カレンダー 年月 */
#ui-datepicker-div {
  padding: 0;
  border: none;
  box-shadow: 0px 8px 4px -2px rgba(0,0,0,.1);
}
#ui-datepicker-div > *:not(.ui-datepicker-header) {
  display: none;
}
#ui-datepicker-div .ui-datepicker-header {
  background: #ccc;
  height: 48px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  border: none;
}
#ui-datepicker-div select {
  font: 400 16px/1em 'Roboto','noto sans japanese',sans-serif;
  height: 32px;
}
#ui-datepicker-div .ui-datepicker-title {
  /*display: flex;*/
  width: 100%;
  padding: 0;
}

/* 決済方法 */
/* クレジットカードエリア */
.area_credit_settings .img {
  /*display: flex;*/
  justify-content: center;
  margin: 20px 0;
}
.area_credit_settings .Err,
.area_credit_settings .Status {
  color: #ED6086;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  margin: 10px 0;
  display: block;
}
.area_credit_settings [class*="wrap_input"] {
  flex: 1;
}


/* キャリア決済エリア */
.area_carrier_settings .img {
  display: flex;
  justify-content: center;
  margin: 0 0 20px;
}

/* ! 証明登録 ———————————————————————————————————————————————————————————— */
/* 証明画像 */
[class*="list_form"][class*="certificate"] .wrap_file:before {
  color: #7f8eca;
  border-radius: 5px;
  border: 1px dotted #E5E6EA;
  width: 100%;
  height: 300px;
}
[class*="list_form"][class*="certificate"] .wrap_file,
[class*="list_form"][class*="certificate"] input[type="file"] {
  width: 100%;
  height: 300px;
}
[class*="list_form"][class*="certificate"] .wrap_file [class*="thumb"]{
  border-radius: 5px;
  background: #fbfbfb;
}
[class*="list_form"][class*="certificate"] .wrap_file [class*="thumb"]:before{
  padding-top: 300px;
}
@media screen and (max-width: 560px){
  [class*="list_form"][class*="certificate"] .wrap_file:before {
    height: 200px;
  }
  [class*="list_form"][class*="certificate"] .wrap_file,
  [class*="list_form"][class*="certificate"] input[type="file"] {
    height: 200px;
  }
  [class*="list_form"][class*="certificate"] .wrap_file [class*="thumb"]:before{
    padding-top: 200px;
  }
}


/* ! SMS認証 ———————————————————————————————————————————————————————————— */
[class*="area_step_"][class*="sms"]{
  margin: 0 0 30px;
}

/* 認証済み */
.area_sms_done > .ttl{
  color: #51C96D;
  font: 600 15px/1em 'noto sans japanese' , sans-serif;
  background: #e7f5ea;
  padding: 16px 40px 16px 60px;
  display: inline-block;
  position: relative;
}
.area_sms_done > .ttl:before{
  content: "";
  background: url(../img/shape/ico_check_green.svg) no-repeat center center !important;
  background-size: contain !important;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 30px;
  top: 50%;
  transform: translateY(-50%);
}
@media screen and (max-width: 480px){
  .area_sms_done > .ttl{
    font-size: 13px;
    padding: 12px 30px 12px 50px;
  }
}

/* 認証されてる番号 */
.area_sms_done_number{
  margin: 16px 0 0;
  display: flex;
  align-items: baseline;
}
.area_sms_done_number .ttl{
  color: #666;
  font: 300 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 6px;
}
.area_sms_done_number .ttl:after{
  content: "：";
}
.area_sms_done_number .number{
  font: 500 18px/1em 'Roboto','noto sans japanese',sans-serif;
}
@media screen and (max-width: 480px){
  .area_sms_done_number .ttl{
    font-size: 12px;
  }
}

/* ! 入出金管理 ———————————————————————————————————————————————————————————— */

/* 引出し依頼 --- */
.area_withdraw{
  display: flex;
}
@media screen and (max-width: 560px){
  .area_withdraw{
    flex-direction:column;
  }
}

/* 引出し可能額 */
.area_withdraw .possible{
  font: 900 24px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_withdraw .possible:before{
  content: "引出し可能額：";
  font: 400 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 10px 0 0;
}
@media screen and (max-width: 560px){
  .area_withdraw .possible{
    border: 1px solid #dcdcdc;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: baseline;
  }
}

/* 引出し依頼 */
.area_request_withdraw{
  margin: 0 0 0 auto;
}
.area_request_withdraw [class*="btnarea"]{
  margin: 0;
}
.area_request_withdraw [class*="btn_"]{
  background: #2E79CA;
  border-color: #2E79CA;
  box-shadow: none;
  height: 28px;
}
@media screen and (min-width: 480px){
  .area_request_withdraw [class*="btn_"]:hover{ color: #2E79CA;}
}
.area_request_withdraw .date{
  font: 400 16px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 10px 0 0;
}
.area_request_withdraw .date:before{
  content: "次回引出し日：";
  font: 300 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 6px 0 0;
}
@media screen and (max-width: 560px){
  .area_request_withdraw{
    margin: 0;
    margin-top: 10px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: space-between;
  }
  .area_request_withdraw .date{
    font-size: 14px;
    margin: 0 16px 0 0;
  }
  .area_request_withdraw .date:before{
    font-size: 12px;
  }
}

/* 引出し依頼modal */
.modal_request_withdraw .area_withdraw{
  justify-content: center;
  margin: 0 0 40px;
}
.modal_request_withdraw .area_withdraw .possible{
  text-align: center;
}
[class*="head_form_"][class*="withdraw"]{
  flex: 0 0 120px;
}
@media screen and (max-width: 480px){
  .modal_request_withdraw .area_withdraw{
    margin: 0 0 30px;
  }
  modal_request_withdraw .area_withdraw .possible{
    font-size: 22px;
  }
}
.area_request_withdraw select {
  min-width: 75px;
}


/* テーブル */
[class*="area_table_"][class*="payment"] .date{ width: 100px;}
[class*="area_table_"][class*="payment"] [class*="price_"]{ width: 80px;}
[class*="area_table_"][class*="payment"]{
  max-height: 500px;
  overflow-y: auto;
}
[class*="area_table_"][class*="payment"] .date p{
  color: #666;
  font: 400 12px/1em 'Roboto','noto sans japanese',sans-serif;
}
[class*="area_table_"][class*="payment"] [class*="price_"] p{
  font: 400 12px/1em 'Roboto','noto sans japanese',sans-serif;
}
[class*="area_table_"][class*="payment"] .ttl{
  font: 400 13px/1.4em 'Roboto','noto sans japanese',sans-serif;
}
[class*="area_table_"][class*="payment"] .sub{
  color: #666;
  font: 300 11px/1.4em 'noto sans japanese' , sans-serif;
}
[class*="area_table_"][class*="payment"] [class*="price_"][class*="withdraw"] p{ color: #7582c7;}
[class*="area_table_"][class*="payment"] [class*="price_"][class*="deposit"] p{ color: #ED6086;}
[class*="area_table_"][class*="payment"] [class*="price_"][class*="withdraw"] p:before{ content: "- ";}
[class*="area_table_"][class*="payment"] [class*="price_"][class*="deposit"] p:before{ content: "+ ";}


/* ! 売上管理 ———————————————————————————————————————————————————————————— */

/* 当月売上 */
.area_sales > p{
  font: 900 24px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_sales > p:before{
  content: "当月売上：";
  font: 400 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 10px 0 0;
}
@media screen and (max-width: 560px){
  .area_sales > p{
    border: 1px solid #dcdcdc;
    padding: 16px;
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: baseline;
  }
}

/* 期間絞り込み */
.area_sales .area_request_withdraw .wrap_input{
  justify-content: flex-end;
  align-items: baseline;
}
@media screen and (min-width: 480px){
  .area_sales .area_request_withdraw [class*="btn_"]:hover{ background: #fff; color: #2E79CA;}
}

/* ! 通知設定 ———————————————————————————————————————————————————————————— */
/* リスト */
.list_form_alert > li {
  border-top: 1px solid #F2F4FA;
}
.list_form_alert article {
  display: flex;
  align-items: center;
}
.list_form_alert .ttl {
  color: #C1C5D3;
  font: 500 14px/1em 'noto sans japanese',sans-serif;
}
.list_form_alert .wrap_radio{
  width: auto;
  margin-left: auto;
  flex: 0 0 136px;
  padding: 0 0 0 10px;
}
@media screen and (max-width: 420px){
  .list_form_alert .ttl {
    font-size: 12px;
    line-height: 1.3;
  }
}

/* ! 退会 ———————————————————————————————————————————————————————————— */
/* リスト */
.list_alert_retire > li + li {
  margin: 20px 0 0;
}
.list_alert_retire p {
  font: 500 14px/1.4em 'noto sans japanese',sans-serif;
  position: relative;
  padding: 0 0 0 30px;
}
.list_alert_retire p:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../img/shape/ico_attention_red.svg) no-repeat center center;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: .65em;
  left: 0;
  transform: translateY(-50%);
}

/* パーミッションえりあ */
.area_permission.unsubscribe{
  margin: 24px 0 0;
}


/* ! メッセージ ———————————————————————————————————————————————————————————— */
/* ヘッド */
/*
@media screen and (max-width: 767px){
  .area_head_layout.message {
    margin: 0;
  }
  .area_head_layout.message > .ttl{
    display: none;
  }
}
*/

@media screen and (max-width: 767px){
  html.message,
  html.message body{
    /*overflow: hidden;*/
  }
  html.message main{
    padding: 0;
  }
  html.message .layout_main{
    padding-bottom: 0;
  }
  .area_head_layout.message {
    margin: 0 0 10px;
  }
  .area_head_layout.message .text{
    display: none;
  }

}

/* メイン */
.area_message {
  display: flex;
  width: 100%;
  position: relative;
}
.elm_none {
  display: none;
}
@media screen and (max-width: 1000px){
  .area_message{
    padding: 0;
  }
}
@media screen and (max-width: 767px){
  .area_message{
    padding: 0;
  }
}

/* 対象者いません */
.area_nouser_message{
  width: 100%;
  background: #f3f3f3;
  padding: 50px 0;
  margin: 20px 0 !important;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
.area_nav_message .area_nouser_message{
  display: none;
}
@media screen and (max-width: 767px){
  .area_nouser_message{
    display: none;
    margin-bottom: 100px !important;
  }
  .area_nav_message .area_nouser_message{
    display: flex;
  }
}
.area_nouser_message .ttl{
  color: #444;
  font: 600 20px/1.4em 'noto sans japanese' , sans-serif;
}
.area_nouser_message .description{
  color: #666;
  font: 300 13px/1.4em 'noto sans japanese' , sans-serif;
  margin: 10px 0 0;
}
.area_nouser_message [class*="btnarea_"]{
  margin: 20px 0 0;
}
.area_nouser_message [class*="btn_"]{
  background: #446888;
  border-color: #446888;
}
@media screen and (min-width: 480px){
  .area_nouser_message [class*="btn_"]:hover{
    color: #446888;
    background: #fff;
  }
}
@media screen and (max-width: 560px){
  .area_nouser_message .ttl{
    font-size: 18px;
  }
  .area_nouser_message .description{
    font-size: 12px;
  }
  .area_nouser_message [class*="btn_"]{
    height: 40px;
  }
}
.area_nouser_message .description {
  margin: 20px 0;
}
.area_nouser_message .btnare {
  margin: 30px 0 0;
}
@media screen and (max-width: 600px){
  .area_nouser_message {
    padding: 40px 30px;
  }
  .area_nouser_message .ttl {
    font-size: 16px;
  }
  .area_nouser_message .description {
    font-size: 13px;
  }
}



/* 検索エリア */
.area_search_message {
  margin: 0 0 8px;
  position: relative;
}
.area_search_message input {
  height: 32px;
}
.area_search_message .button_search {
  position: absolute;
  top: 0;
  right: 0;
}
input:not([type="checkbox"]).button_search {
  display: block;
  width: 32px;
  height: 32px;
  border: none;
  background: url(../img/shape/ico_search_blue.svg) no-repeat center center;
  background-size: 16px 16px !important;
  flex: 0 0 20px;
}

/* ! 検索結果 —————————————————————————————— */
.area_result_search {
  width: 100%;
  background: #fff;
  box-shadow: 0px 4px 10px 0px rgba(0,0,0,.1);
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.area_result_search.show_list {
  opacity: 1;
  pointer-events: all;
}

/* リスト */
.list_result_search > li {
  cursor: pointer;
}
.list_result_search > li .tpl_user {
  padding: 15px;
  position: relative;
}
.list_result_search > li .tpl_user > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.list_result_search > li .tpl_user [class*="thumb"]:after{
  transform: translateX(-100%);
}
@media screen and (min-width: 480px){
  .list_result_search > li:hover {
    background: #f1f1f1;
  }
}

/* 入力したキーワードで検索 */
.li_keyword {
  border-top: 1px solid #f1f1f1;
}
.li_keyword p {
  color: #666;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
}
.li_keyword span {
  display:inline-block;
}
.li_keyword span:before,
.li_keyword span:after {
  content: '"';
}


/* ! ナビ —————————————————————————————— */
.area_nav_message {
  flex: 0 0 280px;
  width: 280px;
  border-right: 1px solid #f1f1f1;
  margin: 0 30px 0 0;
  padding: 0 8px 0 0px;
  background: #fff;
}
@media screen and (max-width: 1000px){
  .area_nav_message{
    pointer-events: none;
    opacity: 0;
    position: absolute;
    top: 0;
    left: -16px;
    /*height: 100%;*/
    z-index: 1;
    width: 0;
    transition: all 0.1s ease;
  }
  .area_nav_message.show{
    opacity: 1;
    z-index: 2;
    pointer-events: all;
    width: calc(100% + 32px);
  }
}

/* スマホユーザーメニュー_閉じるボタン */
.button_cls_user_sp{
  display: none;
  position: absolute;
  left: 16px;
  top: 0px;
  width: 32px;
  height: 32px;
  background: url(../img/shape/ico_arrow_left.svg) no-repeat center center;
  background-size: 56% !important;
  border-radius: 4px;
  border: 1px solid #E5E6EA;
  cursor: pointer;
}
@media screen and (max-width: 1000px){
  .area_nav_message{
    padding: 48px 16px 16px;
  }
  .button_cls_user_sp{
    display: block;
  }
}


/* スクロール */
[class*="area_scroll"][class*="_chat"] {
  height: calc((100vh - 210px));
}

@media screen and (max-width: 767px){
  [class*="area_scroll"][class*="_chat"] {

  }
}

/* ユーザーリスト */
.list_user_chat > li {
  padding: 2px 0;
}
.list_user_chat article {
  display: flex;
  align-items: center;
  padding: 10px;
  position: relative;
  cursor: pointer;
}
.list_user_chat article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.list_user_chat .img {
  flex: 0 0 40px;
  margin: 0 10px 0 0;
}
.list_user_chat .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_user_chat .name {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  margin-right: 40px;
}
.list_user_chat .btnarea_menu_dot {
  margin: 0 !important;
  position: absolute !important;
  right: 50px;
  top: 10px;
}
.list_user_chat .description {
  color: #999;
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
  margin: 6px 0 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* カレント */
.list_user_chat .current article {
  background: #F1F0F0;
}

/* ブロック中ユーザーリスト */
.list_user_chat.blocking{
  display: none;
}
.show_blocking .list_user_chat.blocking{
  display: block;
}

/* ボタンエリア */
[class*="btnarea_"][class*="blocking_user"]{
  margin: 20px auto;
  background: #f4f4f4;
}


/* ボタン */
[class*="button_"][class*="toggle_block"]{
  color: #aaa;
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
  display: flex;
  align-items: center;
  width: 100%;
  background: transparent;
  border-color: transparent;
  height: 30px;
  padding: 0 20px;
  position: relative;
}
@media screen and (min-width: 480px){
  [class*="button_"][class*="toggle_block"]:hover {
    text-decoration: none;
  }
}
[class*="button_"][class*="toggle_block"]:before{
  content: "";
  background: url(../img/shape/ico_arrow_purple.svg);
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: contain !important;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}
.show [class*="button_"][class*="toggle_block"]:before{
  transform: rotate(180deg) translateY(50%);
  transform-origin: center center;
}

/* ピン留 */
.list_user_chat [class*="btnarea"] {
  flex: 0 0 20px;
  margin: 0 0 0 10px;
  position: relative;
  z-index: 1;
}
.button_pin {
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/shape/ico_pin_gray.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  cursor: pointer;
}
.pin_current .button_pin {
  background: url(../img/shape/ico_pin_blue.svg);
}


/* ! チャット —————————————————————————————— */
.area_chat {
  flex: 1 1 auto;
  min-width: 10px;
  position: relative;
}

/* スマホ時ユーザーメニュー */
.button_open_user_sp{
  display: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  background: url(../img/shape/ico_chat.svg) no-repeat center center;
  background-size: 67% !important;
  border-radius: 4px;
  border: 1px solid #E5E6EA;
  cursor: pointer;
}
@media screen and (max-width: 1000px){
  .button_open_user_sp{
    display: block;
  }
}

/* ヘッド */
.area_chat .head {
  position: relative;
  border-bottom: 1px solid #f1f1f1;
  z-index: 1;
}
.area_chat .head .layout {
  background: #fff;
  padding: 0 0 20px;
  position: relative;
  z-index: 0;
  display: block;
}
.area_chat .head [class*="tpl_user"] {
  font: 600 22px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
}
.area_chat .head [class*="tpl_user"] .name:after {
  content: attr(data-kana)"";
  font: 400 14px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .08em;
  display: block;
  margin: 4px 0 0;
}
.area_chat .head [class*="tpl_user"] [class*="thumb"] {
  margin-right: 12px;
}
@media screen and (max-width: 1280px){
  .area_chat .head .layout {
    display: block;
  }
}
@media screen and (max-width: 767px){
  .area_chat .head .layout{
    padding: 0 0 10px;
  }
}
@media screen and (max-width: 560px){
  .area_chat .head [class*="tpl_user"]{
    font-size: 18px;
  }
  .area_chat .head [class*="tpl_user"] [class*="thumb"] {
    width: 50px;
    margin-right: 8px;
  }
}
@media screen and (max-width: 480px){
  .area_chat .head .layout{
    padding: 0 0 8px;
  }
  .area_chat .head [class*="thumb"][class*="_user"][class*="_medium"]{
    width: 40px;
  }
  .area_chat .head [class*="tpl_user"]{
    font-size: 16px;
  }
  .area_chat .head [class*="tpl_user"] .name:after{
    font-size: 12px;
  }
}
.area_chat .user_number {
  display: inline;
  margin-left: 4px;
}
.area_chat #block{
  margin: 10px 0;
  padding: 10px;
  border-color: #aaa;
  width: 100%;
  background: #f3f3f3;
  text-align: center;
  color: #444;
  font: 600 12px/1.4em 'noto sans japanese',sans-serif;
}

/* チャット相手 */
.area_user_chat{
  display: flex;
}
@media screen and (max-width: 1000px){
  .area_user_chat {
    padding: 0 0 0 48px;
  }
}
@media screen and (max-width: 560px){
  .area_user_chat{
    flex-wrap: wrap;
  }
}
@media screen and (max-width: 370px){
  .area_user_chat{
    flex-direction: column;
  }
}

/* ステータス */
.area_chat .status_head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0 0 0 10px;
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 560px){
  .area_chat .status_head{
    margin: 8px 0 0;
  }
}

/* ! 匿名でやりとりしています —————————————————————————————— */
.area_anonymous_chat {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 10px 0 0;
  flex: 1 1 auto;
  min-width: 10px;
  background: #ccc;
  padding: 8px;
}
.area_anonymous_chat .description {
  color: #666;
  font: 600 14px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 4px 0 0;
}
.button_cancel_anonymous {
  color: #fff;
  background: #666;
  font: 600 14px/1em 'noto sans japanese',sans-serif;
  padding: 5px 10px;
  border-radius: 4px;
  border: 2px solid #666;
  cursor: pointer;
}
@media screen and (min-width: 480px){
  .button_cancel_anonymous:hover {
    color: #666;
    background: #fff;
  }
}
@media screen and (max-width: 1280px){
  .area_anonymous_chat{
    flex: 0 0 auto;
  }
}
@media screen and (max-width: 560px){
  .area_anonymous_chat{
    width: 100%;
    padding: 6px;
  }
  .area_anonymous_chat .description {
    font-size: 12px;
    margin: 0 10px 0 0;
  }
  .button_cancel_anonymous{
    font-size: 12px;
  }
}
@media screen and (max-width: 380px){
  .area_anonymous_chat .description {
    font-size: 11px;
  }
  .button_cancel_anonymous{
    padding: 5px;
  }
}


/* ! ボタンエリア_報告 —————————————————————————————— */
.btnarea_menu_dot {
  margin: 0 0 0 20px;
  position: relative;
}
.button_menu_dot {
  cursor: pointer;
}
.button_menu_dot:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url(../img/shape/ico_menu_dot.svg) no-repeat center center;
  background-size: contain !important;
}
@media screen and (max-width: 480px){
  .btnarea_menu_dot {
    margin: 0 0 0 16px;
  }
}

/* リスト */
.list_menu_dot {
  width: 200px;
  background: #fff;
  padding: 5px;
  box-shadow: 0px 6px 12px 0px rgba(0,0,0,.2);
  border-radius: 4px;
  position: absolute;
  top: 90%;
  right: 0;
  z-index: 1;
  transition: all 0.1s ease;
  opacity: 0;
  pointer-events: none;
}
.list_menu_dot.list_show {
  opacity: 1;
  pointer-events: all;
}
.list_menu_dot a,
.list_menu_dot div {
  font: 400 12px/1em 'noto sans japanese',sans-serif;
  display: block;
  padding: 10px;
  transition: all 0.1s ease;
  cursor: pointer;
}
@media screen and (min-width: 480px){
  .list_menu_dot a:hover,
  .list_menu_dot div:hover {
    color: #ED6086;
  }
}

/* コンテンツ */
.area_chat .cnt {
}

/* チャットのスクロール */
.area_chat .area_scroll_chat {
  padding: 0 20px;
  margin: 0 -16px;
  display: flex;
}
@media screen and (max-width: 767px){
  .area_chat .area_scroll_chat {
    padding: 0 20px 40px;
    max-height: none;
  }
}
@media screen and (max-width: 480px){
  .area_chat .area_scroll_chat {
    padding: 0 20px 40px;
  }
}
@media screen and (max-width:370px){
  .area_chat .area_scroll_chat {
    padding: 0 10px 70px;
  }
}

/* チャットのやりとりリスト */
.list_chat {
  padding: 20px 0;
  margin: 0 0 auto;
}
.list_chat article {
  display: flex;
  max-width: 500px;
  position: relative;
}
.list_chat .img {
  flex: 0 0 45px;
  margin: 0 10px 0 0;
}
.list_chat .img [class*="thumb"] {
  max-width: 30px;
}
.list_chat .time_post {
  color: #888;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  display: block;
  width: 100%;
}
.list_chat .text {
  flex: 1 1 auto;
  min-width: 10px;
  background: #F1F0F0;
  padding: 16px 24px;
  border-radius: 5px;
}
@media screen and (max-width: 480px){
  .list_chat .text {
    padding: 13px 16px;
  }
}

/* チャット歴なし */
.area_nomessage{
  background: #f9f9f9;
  height: 100%;
  display: flex;
  justify-content: center;
  flex-direction:column;
  align-items: center;
  margin: -40px 0 0;
}
.area_nomessage p{
  color: #999;
  font: 400 12px/1.6em 'noto sans japanese' , sans-serif;
  text-align: center;
}
.area_nomessage .ttl{
  font-size: 18px;
  margin: 0 0 8px;
}

/* メニュー */
.list_chat .menu {
  flex: 0 0 20px;
  position: relative;
}
.button_menu_chat  {
  display: block;
  width: 16px;
  height: 16px;
  background: url(../img/shape/ico_menu_dot.svg) no-repeat center center;
  background-size: contain !important;
  cursor: pointer
}

/* 表示非表示 */
.list_chat .list_menu_dot {
  top: 15px;
}
.list_show + .list_menu_dot {
  opacity: 1;
  pointer-events: all;
}

/* 自分の投稿 */
.list_chat li + li {
  margin: 20px 0 0;
}
.list_chat .post_me article {
  flex-direction: row-reverse;
  margin-left: auto;
}
.list_chat .post_me .img {
  margin: 0 0 0 10px;
}
.list_chat .post_me .text {
  color: #fff;
  background: #1184FF;
}

/* 共有コンテンツ */
.store_content {
  margin: 8px 0 0;
  padding: 10px;
  border-radius: 4px;
  background: #fff;
  position: relative;
}
.store_content p:not(.tpl_price) {
  color: #1184ff;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
}
.store_content .tpl_price {
  color: #1184ff;
  border: 1px solid #1184ff;
  margin: 6px 0 0;
  padding: 0px 10px;
}
.store_content > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

/* 共有ファイル */
.share_file {
  color: #1184ff;
  font: bold 12px/1em 'Roboto','noto sans japanese',sans-serif;
  border: 1px solid #fff;
  background: #fff;
  display: block;
  padding: 8px;
  margin: 8px 0 0;
  border-radius: 4px;
}

/* 既読 */
.list_chat .already {
  display: flex;
  align-items: flex-end;
  margin: 0 10px 0 0;
  flex: 0 0 30px;
}
.list_chat .already p {
  color: #aaa;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
}
.list_chat .post_you .already {
  display: none;
}

@media screen and (max-width: 480px){
  .list_chat li + li {
    margin: 16px 0 0;
  }
  .list_chat .already {
    margin: 0 6px 0 0;
  }
  .list_chat .already p{
    font-size: 11px;
  }
}

/* ! コメントエリア —————————————————————————————— */
.area_comment_chat {
  border-top: 1px solid #f1f1f1;
}
.area_comment_chat .textarea_post {
  border: 1px solid #f1f1f1 !important;
}
#textarea_post_message {
  min-height: 100px;
}
@media screen and (max-width: 1000px){
  .area_comment_chat.close,
  .area_comment_chat.blocked {
    display: none;
  }
}
@media screen and (max-width: 767px){
  .area_comment_chat{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
/*     transform: translateY(100%); */
    background: #fff;
    padding: 10px;
    z-index: 9;
  }
  .area_comment_chat .area_comment_post{
    margin: 0;
  }
  #textarea_post_message {
    font-size: 16px;
    background-color: #fff;
    height: 3em;
    min-height: 10px;
  }
}
@media screen and (max-width: 480px){
  #textarea_post_message {
    font-size: 16px;
    height: 2em;
  }
}

/* フォーム */
@media screen and (max-width: 767px){
  .area_comment_chat form{
    display: flex;
    align-items: flex-start;
  }
  .area_comment_chat .body_post_comment{
    flex: 1 1 auto;
    min-width: 10px;
    margin: 0 0 0 4px;
  }
  .area_comment_chat .area_post_message{
    display: flex; flex-wrap:wrap;
    align-items: flex-end;flex-end;
  }
  .area_comment_chat .area_fillin [class*="btnarea"]{
    margin: 0 0 0 4px;
  }
}

/* 知識添付 */
[class*="btn_"][class*="upload_book"]{
  display: block;
  width: 40px;
  height: 40px;
  border: 1px solid transparent;
  background: #fff url(../img/shape/ico_book_gray.svg) no-repeat center center;
  border-radius: 4px;
  border: 1px solid #f1f1f1;
  background-size: 20px 20px !important;
  cursor: pointer;
  position: relative;
  padding: 0;
}
@media screen and (max-width: 480px){
  .area_comment_chat .area_upload_fillin {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .area_comment_chat .button_upload_fillin {
    width: 30px;
    height: 30px;
  }
  .area_comment_chat [class*="btn_"][class*="upload_book"]{
    width: 30px;
    height: 30px;
  }
}


/* チャットエリアで投稿者変更を非表示 */
.area_comment_chat .head_post_comment > .img,
.area_comment_chat .head_post_comment > .text {
  opacity: 0;
  pointer-events: none;
}

@charset "UTF-8";


/* ! エリア ————————————————————————————————————————————————————————————

バナーエリア_メディア
カウントエリア

———————————————————————————————————————————————————————————— */
/* ! ダッシュボード検索エリア ———————————————————————————————————————————————————————————— */
.area_search_home {
  background: #F7F9F9;
  padding: 20px;
  width: 100%;
  border: 1px solid #eee;
  border-radius: 5px;
}
.area_search_home > * {
  max-width: 900px;
  margin: 0 auto;
}
@media screen and (max-width: 767px){
  .area_search_home {
    padding: 10px;
  }
}
@media screen and (max-width: 480px){
  .area_search_home {
    padding: 10px 5px;
  }

}

/* ! ボディ —————————————————————————————— */
.body_search_home > .ttl{
  display: flex;
  justify-content: center;
  margin: 0 0 6px;
}
.body_search_home > .ttl span{
  color: #000;
  font: 500 14px/1.3em 'noto sans japanese',sans-serif;
  text-align: center;
  position: relative;
}
.body_search_home > .ttl span:after, .body_search_home > .ttl span:before {
  content: "";
  background: url(../img/shape/ico_diagonal.svg) no-repeat center center!important;
  background-size: contain!important;
  width: 14px;
  height: 14px;
  position: absolute;
  left: -20px;
  bottom: 0;
}
.body_search_home > .ttl span:after {
  left: auto;
  right: -20px;
  transform: rotate(45deg);
}
@media screen and (max-width: 560px){
  .body_search_home > .ttl span{
    font-size: 12px;
  }
  .body_search_home > .ttl span:after, .body_search_guest > .ttl span:before {
    width: 12px;
    height: 12px;
    left: -15px;
  }
  .body_search_home > .ttl span:after {
    left: auto;
    right: -15px;
  }
}


.body_search_home .wrap_input {
  position: relative;
}
.body_search_home input[type=text] {
  font: 300 18px/1em 'noto sans japanese',sans-serif;
  background: #fff;
  border: 1px solid #ccc;
  height: 52px;
  padding-right: 50px;
}
.body_search_home input[type=text]::-webkit-input-placeholder { color: #A4AABE; padding-top: 0.2em;}
.body_search_home input[type=text]:-ms-input-placeholder { color: #A4AABE;}
.body_search_home input[type=text]::-moz-placeholder { color: #A4AABE;}
.body_search_home input:not([type="checkbox"]).button_search {
  width: 100px;
  height: 36px;
  background: #51C96D url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #51C96D;
  background-size: 20px 20px !important;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  cursor: pointer;
}
@media screen and (max-width: 480px){
  .body_search_home input[type=text] {
    font-size: 16px;
    height: 48px;
  }
  .body_search_home input:not([type="checkbox"]).button_search {
    width: 32px;
    height: 32px;
  }
}
@media screen and (max-width: 360px){
  .body_search_home input[type=text] {
    padding-right: 40px;
    padding-left: 8px;
  }
}
@media screen and (max-width: 359px){
  .body_search_home input[type=text] {
    font-size: 14.5px;
  }
  .body_search_home input:not([type="checkbox"]).button_search {
    width: 32px;
    height: 32px;
  }
}
/* ! 検索 _ オススメのタグリスト ============================== */
.head_search_home {
  display: flex;
  align-items: center;
  margin: 0 auto 16px;
}
.head_search_home .head {
  flex: 0 0 80px;
}
.head_search_home .ttl {
  font: 500 12px/1em 'noto sans japanese',sans-serif;
}
.head_search_home .data {
  flex: 1 1 auto;
  min-width: 10px;
}
.head_search_home .list_tag a{
  color: #fff;
  background: #839eac;
}
.head_search_home .list_tag a:before{
  border-color: transparent transparent transparent #839eac;
}
@media screen and (min-width: 480px){
  .head_search_home .list_tag a:hover{
    background: #7f8eca;
  }
  .head_search_home .list_tag a:hover:before{
    border-color: transparent transparent transparent #7f8eca;
  }
}
@media screen and (max-width: 767px){
  .head_search_home {
    flex-wrap: wrap;
  }
  .head_search_home .head {
    margin: 0 0 4px;
  }
}

/* ! ====================================================================================================
　基礎知識バナーエリア
==================================================================================================== */
.area_bnr_media {
  width: 100%;
}

/* ! ==================================================
　リスト_基礎知識バナー
================================================== */
/* リスト_バナー */
.list_bnr_media {
  display: flex;
  flex-wrap: wrap;
  margin: -2px;
}
.list_bnr_media > li {
  width: 33.3333%;
  padding: 2px;
}
.list_bnr_media article {
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: relative;
}
.list_bnr_media article:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 54%;
}
.list_bnr_media article:after {
  content: "";
  display: block;
  width: 100%;
  padding-top: 54%;
  background: linear-gradient(#000 0%,rgba(0, 0, 0, 0) 100%);
  opacity: 0.5;
  position: absolute;
  top: 0;
  left: 0;
  transition: all 0.2s ease;
}
.list_bnr_media article > a {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}
/*
- ( XS - 480 )
- SM - 560
- MD - 900
- LG - 1200
- ( XL - 1400 )
*/
@media screen and (max-width: 560px){
  .list_bnr_media > li {
    width: 100%;
  }
  .list_bnr_media article:before,
  .list_bnr_media article:after {
    padding-top: 80px;
  }
  .list_bnr_media article:hover .ttl {
    color: #51C96D;
  }
}

/* テキスト */
.list_bnr_media .text {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 20px;
  z-index: 1;
}
.list_bnr_media .ttl {
  color: #fff;
  font: 700 20px/1.2em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  transition: all 0.2s ease;
}
/* 編集パートナーバッジ */
.list_bnr_media .ttl:after {
  content: "";
  display: block;
  height: 18px;
  width: 100%;
  margin: 8px 0 0;
  background: url(../img/tag_edit_partner.svg) no-repeat left center !important;
  background-size: contain !important;
}
.list_bnr_media .ttl span {
  display:inline-block;
}
.list_bnr_media .ttl .small {
  font-size: .7em;
}

/*
- ( XS - 480 )
- SM - 560
- MD - 900
- LG - 1200
- ( XL - 1400 )
*/
@media screen and (max-width: 1200px){
  .list_bnr_media .text {
    padding: 12px;
  }
}
@media screen and (max-width: 560px){
  .list_bnr_media article {
    background-position: top -50px center!important;
  }
}


/* メインエリアの指定 */
.list_bnr_media .li_bnr_main {
  border-right: 1px solid #fff;
}
.list_bnr_media .li_bnr_main article:after {
  height: 100px;
}
.list_bnr_media .li_bnr_main .text {
}
.list_bnr_media .li_bnr_main .ttl {
  font-size: 24px;
  transition: all 0.1s ease;
}
@media screen and (max-width: 480px){
  .list_bnr_media .li_bnr_main .ttl {
    font-size: 20px;
  }
}
@media screen and (max-width: 360px){
  .list_bnr_media .li_bnr_main .ttl {
    font-size: 18px;
  }
}


/* ボタンエリア */
.area_bnr_media > [class*="btnarea"] {
    margin: 8px 0 0;
}


/* ! 関連エリア ———————————————————————————————————————————————————————————— */
.area_relation {
  padding: 40px 0 0;
  width: 100%;
}
/* ヘッド */

.area_relation > .head {
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  background: #f1f1f1;
  padding: 10px 16px;
}
aside .area_relation > .head{
  margin: 0 0 10px;
}
.area_relation > .head .ttl {
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
}
.area_relation > .head [class*="btnarea"] {
  margin-left: auto;
}

/* ! このユーザーの投稿 ———————————————————————————————————————————————————————————— */
.area_otherpost_user{
  margin: 30px 0 0;
}
.head_otherpost_user{
  margin: 0 0 14px;
}
.head_otherpost_user .ttl{
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
}
.body_otherpost_user .list_media article{
  background: #fff;
  padding: 16px;
}
.body_otherpost_user .list_community  article {
  padding: 16px 16px 16px 28px;
}
.body_otherpost_user .list_community > li > article:before{
  width: 14px;
  height: 14px;
  left: 7px;
}
.body_otherpost_user [class*=list_community] .list_cat a,
.body_otherpost_user [class*=list_community] .list_cat p{
  color: #f98623;
}
.body_otherpost_user .list_media .protected .text:before {
    content: "パスワードつき";
    color: #aaa;
    font: 600 10px/1em 'noto sans japanese',sans-serif;
    display: inline-block;
    background: #fff url(../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;
}
.body_otherpost_user .list_media .protected > div {
  display: none;
}

/* ! 投稿に出品された知識 ———————————————————————————————————————————————————————————— */
.area_posted_book{
  margin-top: 50px;
  width: 100%;
}
.area_posted_book > .head{
  display: flex;
  align-items: center;
  margin: 0 0 20px;
  background: #f1f1f1;
  padding: 10px;
}
.area_posted_book > .head .ttl {
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
}
@media screen and (max-width: 1000px){
  .area_posted_book > .head {
     padding: 10px 16px;
  }
  .area_posted_book > .head .ttl {
    font-size: 16px;
  }
}
@media screen and (max-width: 480px){
  .area_posted_book > .head .ttl {
    font-size: 14px;
  }
}

/* ! ソートエリア ———————————————————————————————————————————————————————————— */
.area_sort {
  margin-left: auto;
}
.area_sort select {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  padding: 0 50px 0 10px;
  height: 32px;
}



/* ! ==========================================================================================
詳細ページ
========================================================================================== */
.area_detail {
  width: 100%;
  overflow: hidden;
}
.area_detail > .head .area_action {
  margin: 12px 0 0;
  padding: 0;
  position: relative;
  z-index: 2;
}
.area_detail > .head .area_action .list_action {
  margin-left: -6px;
}
.area_detail > .head > .btnarea {
  margin: 0 0 20px;
  display: flex;
  align-items: center;
}
.area_detail > .head > .btnarea .area_sns {
  margin: 0 0 0 auto;
}
@media screen and (max-width: 560px){
  .area_detail > .head .area_action {
    margin: 8px 0 0;
  }
  .area_detail > .head > .btnarea {
    flex-wrap: wrap;
  }
  .area_detail > .head > .btnarea .area_sns {
    width: 100%;
    margin: 8px 0 0;
    justify-content: flex-end;
  }
}

.area_detail .list_tag{
  margin: 4px 0 0;
}
.area_detail_format .list_tag{
  margin: 6px 0 0;
}



/* ! 戻るボタン_詳細ページ ———————————————————————————————————————————————————————————— */
.button_back {
  color: #999;
  font: 300 13px/1em 'noto sans japanese',sans-serif;
  position: relative;
  display: flex;
  align-items: center;
}
.button_back:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #999;
  background: url(../img/shape/ico_left.svg);
  background-size: 8px 8px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 6px 0 0;
}

/* ! ヘッド_詳細ページ ———————————————————————————————————————————————————————————— */
/* テキスト */
.area_detail .head .info{
  width: 100%;
}
.area_detail .head .text {
  margin: 0 0 20px;
}
.area_detail .head .ttl {
  font: 900 26px/1.5em 'noto sans japanese',sans-serif;
  letter-spacing: .01em;
}
.area_detail .head img {
  margin-top: 16px;
  max-width: 300px;
}
.area_detail .cnt {
  margin: 30px 0 0;
  display: flex;
}
.area_detail .cnt .description:not(.list_media_description) {
  color: #999;
  font: 500 15px/1.6em 'noto sans japanese',sans-serif;
  letter-spacing: .02em;
  margin-bottom: 30px;
}
.area_detail .cnt > .area_article_post{
  width: 100%;
}
@media screen and (max-width: 600px){
  .area_detail .head .ttl {
    font-size: 24px;
    line-height: 1.3em;
  }
  .area_detail .cnt .description:not(.list_media_description) {
    font-size: 12px;
  }
  .area_detail .cnt {
    margin: 16px 0 0;
  }
}
@media screen and (max-width: 480px){
  .area_detail .head .ttl {
    font-size: 22px;
  }
}

/* 画像 */
.area_detail .cnt > .img {
  flex: 0 0 120px;
  margin: 0 0 0 20px;
}
.area_detail .cnt > .img:before {
  content: "";
  display: block;
  background: #ccc;
  width: 100%;
  padding-top: 100%;
}


/* ! アクション_詳細ページ ———————————————————————————————————————————————————————————— */
.area_action {
  padding: 16px 0;
  display: flex;
  align-items: flex-end;
/*   justify-content: flex-end; */
}
.area_action .list_action{
  margin-left: auto;
}

@media screen and (max-width: 560px){
  .area_action {
    padding: 8px 0;
    flex-direction:column;
  }
}


/* ! ステータス_詳細ページ ———————————————————————————————————————————————————————————— */
.area_status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
.area_status .list_action {
  position: relative;
  z-index: 2;
}
.area_status .list_cat {
  margin-right: 12px;
  position: relative;
  z-index: 2;
}
.area_status .list_tag{
  padding: 5px 0;
}
.area_status .area_poster {
  margin: 0 0 0 auto;
  position: relative;
  z-index: 2;
}
@media screen and (max-width: 480px){
  .area_status {
    flex-wrap: wrap;
  }
  .area_status .area_poster {
    margin-top: 8px;
  }
}




/* ! 報告_詳細ページ ———————————————————————————————————————————————————————————— */
.area_report {
  width: 100%;
  margin: 6px 0 -20px;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.area_report [class*="btn_"] {
  color: #DD5176;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  display: flex;
  align-items: center;
  padding: 0 8px;
  height: 19px;
  border: 1px solid #DD5176;
  border-radius: 3px;
  background: #fff;
}
.area_report [class*="btn_"][class*="purple"] {
  color: #7f8eca;
  border-color: #7f8eca;
}
.area_report_alert {
  margin: 10px;
  color: #dd5176;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  line-height: 1.2;
}
@media screen and (min-width: 480px){
  .area_report [class*="btn_"][class*="purple"]:hover {
    background: #7f8eca;
    color: #fff;
  }
}
@media screen and (max-width: 767px){
  .area_head_layout .area_report {
    order: 2;
    margin: 0;
  }
  .area_head_layout .page_post .area_report {
    margin: 10px 0;
  }
}
@media screen and (max-width: 480px){
  .area_report{
    margin: 10px 0 0;
  }
  .area_head_layout .area_report {
    margin: 0 0 10px;
  }
}

@media screen and (min-width: 480px){
  .area_report [class*="btn_"]:hover{
    color: #fff;
    background: #DD5176;
  }
  .area_head_layout .area_report [class*="btn_"][class*="purple"]:hover {
    color: #fff;
    background: #7f8eca;
  }
}

/* ! すべてのコンテンツから検索_詳細ページ ———————————————————————————————————————————————————————————— */
.area_search_all_cnt-detail{
  width: 100%;
  background: #f7f9f9;
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.body_search_cnt-detail input[type=text]{
  height: 44px;
  padding-right: 80px;
}
.body_search_cnt-detail input:not([type=checkbox]).button_search {
  width: 80px;
  height: 36px;
  background: #51c96d url(../img/shape/ico_search_white.svg) no-repeat center center;
  border-color: #51c96d;
  background-size: 20px 20px!important;
  border-radius: 4px;
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  cursor: pointer;
}
@media screen and (max-width: 480px){
  .body_search_cnt-detail input:not([type=checkbox]).button_search {
    width: 60px;
    height: 32px;
    right: 6px;
  }
}

/* フット注目のタグ */
.foot_search_cnt-detail{
  display: flex;
  align-items: center;
  margin: 8px auto 0;
  border-top: 1px solid #eee;
  padding: 8px 0 0;
}
.foot_search_cnt-detail .head {
  flex: 0 0 80px;
}
.foot_search_cnt-detail .head .ttl {
  font: 500 12px/1em 'noto sans japanese',sans-serif;
}
.foot_search_cnt-detail .list_tag a, .foot_search_cnt-detail .list_tag p{
  color: #fff;
  background: #839eac;
}
.foot_search_cnt-detail .list_tag a:before, .foot_search_cnt-detail .list_tag p:before {
  border-color: transparent transparent transparent #839eac;
}
@media screen and (min-width: 480px){
  .foot_search_cnt-detail .list_tag a:hover{
    background: #7f8eca;
  }
  .foot_search_cnt-detail .list_tag a:hover:before{
    border-color: transparent transparent transparent #7f8eca;
  }
}

/* ! 新規相談・投稿するCTA_詳細ページ ———————————————————————————————————————————————————————————— */
[class*="area_cta_"][class*="_commynity"]{
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 20px;
  background: #fff7eb;
  border: 1px solid #eee;
  width: 100%;
}
[class*="area_cta_"][class*="_commynity"] .ttl {
  font: 600 24px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 24px;
  padding: 0 0 0 50px;
  position: relative;
}
[class*="area_cta_"][class*="_commynity"] .ttl:before {
  content: "";
  display: block;
  width: 50px;
  height: 50px;
  margin: 0 0 0 -20px;
  background: url(../img/shape/ico_cgm_guest.svg) no-repeat center center;
  background-size: contain!important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.cnt [class*="area_cta_"][class*="_commynity"] .description {
  font: 400 14px/1.6em 'noto sans japanese',sans-serif;
  text-align: center;
  margin: 0;
}
[class*="area_cta_"][class*="_commynity"] .btnarea {
  width: 100%;
  margin: 24px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
[class*="area_cta_"][class*="_commynity"] .btn_ {
  max-width: 240px;
  background: #f98623;
  border-color: #f98623;
  width: 100%;
}
@media screen and (min-width: 480px){
  [class*="area_cta_"][class*="_commynity"] .btn_:hover{
    color: #f98623;
    background: #fff;
  }
}
@media screen and (max-width: 600px){
  [class*="area_cta_"][class*="_commynity"] .ttl{
    font-size: 20px;
    padding: 0 0 0 40px;
  }
  [class*="area_cta_"][class*="_commynity"] .ttl:before {
    width: 40px;
    height: 40px;
    margin: 0 0 0 -10px;
  }
}


/* ! 個別 —————————————————————————————— */
/* カテゴリリスト */
.area_detail_media .list_cat a,
.area_detail_media .list_cat p { color: #3f7cc4;}
.area_detail_contents .list_cat a,
.area_detail_contents .list_cat p { color: #DD5176;}
.area_detail_commynity .list_cat a,
.area_detail_commynity .list_cat p { color: #f98623;}
.area_detail_format .list_cat a,
.area_detail_format .list_cat p { color: #37BAA6;}

.area_detail_media .list_cat{ margin: -2px 4px -2px -4px;}
.area_detail_media .list_cat > li{ padding: 2px 4px;}


/* ! ロックされた状態_詳細ページ ============================== */
.area_detail_contents.protected > .head .ttl {
  position: relative;
  padding-left: 34px;
}
.area_detail_contents.protected > .head .ttl:before {
  content: "";
  display: block;
  width: 28px;
  height: 28px;
  background: url(../../../img/shape/ico_protected.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: .75em;
  left: 0;
  transform: translateY(-50%);
}





/* ! 専門家リスト ———————————————————————————————————————————————————————————— */
.list_agent_home > li + li {
  border-top: 1px solid #eee;
}
.list_agent_home > li > article {
  padding: 24px 0 24px 100px;
  position: relative;
}
.list_agent_home > li > article > .img {
  position: absolute;
  top: 24px;
  left: 0;
}

/* ! ヘッド_専門家リスト —————————————————————————————— */
.head_list_agent_home {
  display: flex;
}
.head_list_agent_home .btnarea {
  margin-left: auto;
}

/* ! ボディ_専門家リスト —————————————————————————————— */

@charset "UTF-8";

/* ! コミュニティ ————————————————————————————————————————————————————————————


共通



———————————————————————————————————————————————————————————— */
/* ! 共通 ———————————————————————————————————————————————————————————— */


/* ! コミュニティページ ———————————————————————————————————————————————————————————— */
.area_community {
  width: 100%;
  display: block;
}

/* ボタンリスト_タブ */
.list_button_tab {
 width: 100%;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #E5E7EB;
}
.list_button_tab > li {
  padding: 0 3px;
  width: 100%;
  max-width: 140px;
}
.list_button_tab a,
.list_button_tab div {
  font: 400 14px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  height: 40px;
  border-radius: 4px 4px 0 0;
  transition: all 0.1s ease;
}
@media screen and (min-width: 480px){
  .list_button_tab div:hover,
  .list_button_tab a:hover {
    color: #F29F3E;
  }
}

.list_button_tab .current div,
.list_button_tab .current a {
  color: #fff;
  background: #F29F3E;
}

/* ! フィルター —————————————————————————————— */
.area_filter_community {
  width: 100%;
  margin: 20px 0 0;
}

/* ! トップアクション　質問する/回答する —————————————————————————————— */
.area_action_cgm{
  margin: 0 0 10px;
}

.list_action_cgm{
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list_action_cgm > li{
  padding: 5px;
  width: 50%;
}
.list_action_cgm [class*="btn_"]{
  font: 600 24px/1em 'noto sans japanese' , sans-serif;
  color: #F98623;
  border: 2px solid #F98623;
  height: 60px;
  position: relative;
}
@media screen and (min-width: 480px){
  .list_action_cgm [class*="btn_"]:hover{
    color: #f29f3d;
  }
}
.list_action_cgm [class*="btn_"]:before,
.list_action_cgm [class*="btn_"]:after{
  content: "";
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
.list_action_cgm [class*="btn_"]:before{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_q_cgm.svg");
  width: 36px;
  height: 36px;
  left: 16px;
}
.list_action_cgm .a [class*="btn_"]:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_a_cgm.svg");}
.list_action_cgm [class*="btn_"]:after{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_arrow_right_orange.svg");
  width: 8px;
  height: 8px;
  right: 10px;
}
@media screen and (max-width: 640px){
  .list_action_cgm [class*="btn_"]{
    font-size: 18px;
    height: 50px;
  }
}
@media screen and (max-width: 480px){
  .list_action_cgm [class*="btn_"]{
    font-size: 16px;
    height: 46px;
  }
  .list_action_cgm [class*="btn_"]:before{
    width: 28px;
    height: 28px;
    left: 10px;
  }
}
@media screen and (max-width: 400px){
  .list_action_cgm{
    margin: -3px;
  }
  .list_action_cgm > li{
    padding: 3px;
  }
  .list_action_cgm [class*="btn_"]{
    font-size: 12px;
    height: 38px;
  }
  .list_action_cgm [class*="btn_"]:before{
    width: 24px;
    height: 24px;
    left: 8px;
  }
}

/* ! コミュニティ詳細ページ ———————————————————————————————————————————————————————————— */
/*  */
.area_detail_commynity .head .ttl{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 質問内容 */
.area_community_detail {
  width: 100%;
}
.area_community_detail .head .ttl {
  font: 600 24px/1.5em 'noto sans japanese',sans-serif;
  letter-spacing: .01em;
}
.area_community_detail .cnt {
  display: flex;
  padding: 0 0 60px;
  margin: 30px 0px 0;
}

/* 画像 */
.area_community_detail .cnt > .img {
  flex: 0 0 120px;
  margin: 0 0 0 20px;
}
.area_community_detail .cnt > .img:before {
  content: "";
  display: block;
  background: #ccc;
  width: 100%;
  padding-top: 100%;
}

/* テキスト */
.area_community_detail .cnt .text p {
  line-height: 1.8em;
}
.area_community_detail .cnt .text p + p {
  margin: 12px 0 0;
}


/* ! コミュニティ詳細ページコメント —————————————————————————————— */
.area_comment_community{
  width: 100%;
  margin: 30px 0 0;
}
.area_comment_community > li {
  padding-bottom: 0;
}
.area_comment_community .area_post_comment [class*="btnarea"]{
  margin: 10px 0 0;
}
.area_comment_community .area_post_comment input[type="submit"].button_submit_comment{
  font-size: 15px;
  padding: 12px;
  background: #f98623;
  border-color: #f98623;
  max-width: 300px;
  margin: 0 auto;
}
.area_comment_community .area_post_comment .head_bar_gray {
  margin: 0 0 10px;
}
@media screen and (min-width: 480px){
  .area_comment_community .area_post_comment input[type="submit"].button_submit_comment:hover{
    color: #f98623;
    background: #fff;
  }
}

/* 回答数 */
.area_count_answer_community{
  padding: 0 0 8px;
  border-bottom: 1px solid #ddd;
  margin: 0 0 10px;
}
.area_count_answer_community p{
  color: #666;
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
}
.area_count_answer_community p span{
  color: #333;
  font: 900 18px/1em Roboto,'noto sans japanese',sans-serif;
  padding: 0 4px;
}

/*  */
.area_comment_community .list_comment article,
.area_best-answer .list_comment article{
  flex-direction:column;
}
.area_comment_community .head_comment,
.area_best-answer .head_comment{
  display: flex;
  align-items: flex-start;
  margin: 0 0 8px;
}
.area_comment_community .head_comment .user_number,
.area_best-answer .head_comment .user_number{
  padding: 0;
  margin: 0 0 0 8px;
}
.area_comment_community .list_comment .text,
.area_best-answer .list_comment .text{
  margin: 0 0 0 28px;
}
.area_comment_community .list_comment .comment,
.area_best-answer .list_comment .comment{
  font: 400 14px/1.5em 'noto sans japanese',sans-serif;
}
.area_comment_community .list_comment .comment a,
.area_best-answer .list_comment .comment a {
  text-decoration: underline;
  color: #03f;
}
.area_comment_community .list_comment .comment a:hover,
.area_best-answer .list_comment .comment a:hover {
  color: #51c96d;
}
.area_comment_community .area_poster{
  display: flex;
  flex-direction:column;
}
.area_comment_community .head_comment .user_company,
.area_best-answer .head_comment .user_company{
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  padding: 0 0 0 28px;
}

/* 並び変更 */
.area_comment_community .list_comment {
  flex-direction: column;
}

/* 返信リスト ここだけ組み方が変わるため */
.area_comment_community .list_comment.reply,
.area_comment_community .ReplyWrap {
  padding: 0 0 0 32px;
}


/* ! 投稿者の回答 —————————————————————————————— */
.list_comment > li.comment_poster {
  padding: 4px 0;
}
.list_comment > li.comment_poster > article {
  background: #fff3e9;
  padding: 8px;
  position: relative;
}
.list_comment > li.comment_poster > article:before {
  content: "投稿者の回答";
  color: #f98623;
  font: 500 11px/1em 'noto sans japanese',sans-serif;
  position: absolute;
  top: 10px;
  right: 10px;
}

/* ! 投稿エリア —————————————————————————————— */
.area_comment_community .area_post_comment {
  margin: 40px 0 0;
}

/* ! ボタンエリア ——————————— */
[class*="area_cnt_"][class*="question"] .btnarea_step [class*="btn_"][class*="draft"]{
  color: #f98623;
}

/* ! 投稿ページ —————————————————————————————— */
[class*="area_attention_"][class*="right"] {
  display: flex;
  justify-content: flex-end;
}

.area_detail_commynity .cnt {
  flex-wrap: wrap;
}
.area_detail_commynity .cnt .description{
  color: #333;
  font: 400 16px/1.9em 'noto sans japanese',sans-serif;
  letter-spacing: .03em;
  width: 100%;
}
.area_detail_commynity .cnt .description a{
  text-decoration: underline;
  color: #03f;
}
.area_detail_commynity .cnt .description a:hover{
  color: #51c96d;
}
@media screen and (max-width: 600px){
  .area_detail_commynity .cnt .description{
    font-size: 14px;
  }
}
@media screen and (max-width: 480px){
  .area_detail_commynity .cnt .description {
    font-size: 13px;
    line-height: 1.5em;
  }
}


/* ! 会員登録が必要 —————————————————————————————— */
.area_register_cgm {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 20px;
  background: #FFF7EB;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_guest_community.png") no-repeat center top !important;
  background-size: cover !important;
  border: 1px solid #eee;
}
.area_register_cgm .text {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
}
.area_register_cgm .ttl {
  font: 600 24px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 24px;
  padding: 0 0 0 90px;
  position: relative;
}
.area_register_cgm .ttl .sub {
  color: #F98724;
  font: 600 18px/1.3em 'noto sans japanese',sans-serif;
  display: block;
  margin: 0 0 4px;
}
.area_register_cgm .ttl .free {
  font-size: 1.2em;
  position: relative;
  z-index: 0;
}
.area_register_cgm .ttl .free:before{
  content: "";
  background: rgba(249,134,35,.6);
  width: 100%;
  height: 6px;
  position: absolute;
  left: 0;
  bottom: 4px;
  z-index: -1;
}
.area_register_cgm .ttl:before {
  content: "";
  display: block;
  width: 90px;
  height: 90px;
  margin: 0 0 0 -20px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_cgm_guest.svg") no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}
.area_register_cgm .remaining{
  font: 400 13px/1.3em 'noto sans japanese',sans-serif;
  margin: 0 0 30px;
  border-bottom: 1px dotted #333;
}
.area_register_cgm .remaining span{
  font: 900 20px/1em Roboto,'noto sans japanese',sans-serif;
  padding: 0 4px;
}
@media screen and (max-width: 600px){
  .area_register_cgm {
    padding: 30px 10px;
  }
  .area_register_cgm .ttl {
    font-size: 20px;
    margin: 0 0 20px;
    padding: 0 0 0 60px;
  }
  .area_register_cgm .ttl:before {
    width: 60px;
    height: 60px;
    margin: 0 0 0 -10px;
  }
  .area_register_cgm .ttl .sub {
    font-size: 14px;
  }
}
@media screen and (max-width: 340px){
  .area_register_cgm .ttl{
    margin: 0 0 0 40px;
  }
  .area_register_cgm .ttl:before {
    width: 44px;
    height: 44px;
  }
}

/* ステップリスト */
.list_step_cgm {
  display: flex;
  justify-content: center;
  margin: 0 -10px;
  max-width: 600px;
}
.list_step_cgm > li {
  width: 33.3333%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 10px;
  position: relative;
}
.list_step_cgm > li + li:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_triangle_right_gray.svg") no-repeat center center ;
  background-size: contain !important;
  position: absolute;
  top: 40px;
  left: 0;
  transform: translate(-50% , -50%);
}
.list_step_cgm .img {
  width: 80px;
  border: 4px solid #F98824;
  border-radius: 100px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.list_step_cgm .img:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
@media screen and (max-width: 600px){
  .list_step_cgm {
    margin: 0 -5px;
  }
  .list_step_cgm > li {
    padding: 0 5px;
  }
  .list_step_cgm > li + li:before {
    width: 16px;
    height: 16px;
    top: 30px;
  }
  .list_step_cgm .img {
    width: 60px;
    border-width: 3px;
  }
}

/* 個別 */
.list_step_cgm > li:nth-of-type(1) .img {
  background: #fff url(../img/shape/ico_step_cgm_01.svg);
}
.list_step_cgm > li:nth-of-type(2) .img {
  background: #fff url(../img/shape/ico_step_cgm_02.svg);
}
.list_step_cgm > li:nth-of-type(3) .img {
  background: #fff url(../img/shape/ico_step_cgm_03.svg);
}
.list_step_cgm .description {
  font: 500 13px/1.4em 'noto sans japanese',sans-serif;
  margin: 8px 0 0
}
@media screen and (max-width: 600px){
  .list_step_cgm .description {
    font-size: 12px;
  }
}


/* ボタンエリア */
.area_register_cgm .btnarea {
  width: 100%;
  margin: 30px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.area_register_cgm .btn_ {
  max-width: 240px;
  background: #f98623;
  border-color: #f98623;
  width: 100%;
}
.area_register_cgm .button_text {
  margin: 12px 0 0;
}
@media screen and (min-width: 480px){
  .area_register_cgm .btn_:hover {
    color: #f98623;
    background: #fff;
  }
}
@media screen and (max-width: 600px){
  .area_register_cgm .btnarea {
    margin: 20px 0 0;
  }
}


/* ! ============================================================
　ベストアンサー
============================================================ */
.area_best-answer {
  width: 100%;
  border: 1px solid #F98724;
  margin: 0 0 20px;
}

/* ! ヘッド —————————————————————————————— */
.head_best-answer .ttl {
  color: #fff;
  font: 500 15px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  background: #F98724;
  position: relative;
  padding: 10px 15px 10px 40px;
}
.head_best-answer .ttl:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url(../img/shape/ico_check_white.svg) no-repeat center center;
  background-size: contain !important;
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(-50%);
}


/* ! ボディ —————————————————————————————— */
.body_best-answer {
  padding: 16px;
}
.body_best-answer > .list_comment > li {
  border-top: none;
}
.body_best-answer > .list_comment > li > article {
}
.body_best-answer > .list_comment > li > article .comment {
  font: 500 15px/1.5em 'noto sans japanese',sans-serif;
}
.body_best-answer .list_comment.reply,
.body_best-answer .ReplyWrap {
  padding: 0 0 0 32px;
}c

@charset "UTF-8";

/* ! コンテンツストア ————————————————————————————————————————————————————————————


共通



———————————————————————————————————————————————————————————— */
/* ! 共通 ———————————————————————————————————————————————————————————— */


/* ! コンテンツストア ———————————————————————————————————————————————————————————— */
.area_contents {
  width: 100%;
}
/* ヘッド */
.head_contents {
  margin: 0 0 10px;
}

.area_contents {
  width: 100%;
}


/* コントロールエリア */
.area_control_list {
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid #ddd;
  padding: 0 0 8px;
}
.area_control_list .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.area_control_list .count {
  font: bold 28px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_control_list .count:after {
  content: attr(data-unit-after) "";
  font: 500 18px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 0 0 4px;
}
@media screen and (max-width: 560px){
  .area_control_list .count{
    font-size: 22px;
  }
  .area_control_list .count:after{
    font-size: 14px;
  }
}

/* ソート */
.area_control_list .sort {
  flex: 0 0 130px;
  display: flex;
  align-items: center;
}
.area_control_list [class*="wrap_input"]{
  align-items: center;
}
.area_control_list .wrap_checkbox label{
  height: auto;
  margin-right: 10px;
}
.area_control_list .sort_240{ flex: 0 0 240px;}
.area_control_list .sort_200{ flex: 0 0 200px;}
.area_control_list .sort_220{ flex: 0 0 220px;}
.wrap_select.wrap_sort:before {
  width: 12px;
  height: 8px;
}
.wrap_sort select {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  height: 30px;
}
[class*="btn_"][class*="sort"]{
  color: #fff;
  height: 30px;
  background: #e5e6ea url(../img/shape/ico_sort_02.svg) no-repeat center center;
  background-size: 16px 16px !important;
  border-color: #e5e6ea;
  padding: 0 6px;
  flex: 0 0 30px;
  margin: 0 0 0 4px;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="sort"]:hover{
    color: #fff;
    border-color: #999;
  }
}

.area_contents [class*="area_paging"] {
  margin-top: 30px;
}




/* ! コンテンツ詳細ページ ———————————————————————————————————————————————————————————— */
/* ! サンプルデータ_コンテンツ —————————————————————————————— */
.area_sample_contents {
  margin: 60px 0 0;
}
.area_sample_contents > .ttl{
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
  margin: 0 17px 4px;
  color: #37baa6;
}
.area_sample_contents [class*="btnarea"] {
  margin-left: auto;
}


/* リスト */
.list_sample_contents {
  width: 100%;
  border-bottom: 1px solid #f1f1f1;
}
.list_sample_contents > li {
  border-top: 1px solid #f1f1f1;
}
.list_sample_contents article {
  padding: 5px;
  display: flex;
  align-items: center;
}
.list_sample_contents .ttl {
  font: 600 12px/1.5em 'noto sans japanese',sans-serif;
  padding: 0 12px;
  flex: 1 1 auto;
  min-width: 10px;
}
.list_sample_contents .btnarea {
  flex: 0 0 150px;
}
@media screen and (max-width: 480px){
  .list_sample_contents article{
    display: block;
  }
  .list_sample_contents .btnarea{
    margin: 4px 0 0;
  }
}
@media screen and (max-width: 380px){
  .list_sample_contents .ttl{
    font-size: 12px;
  }
  .list_sample_contents .btnarea {
    flex: 0 0 130px;
  }
}

/* ダウンロードボタン */
.btn_download {
  font-size: 13px;
  height: 32px;
  width: 100%;
  padding: 0 8px;
  background: #7f8eca;
  border-color: #7f8eca;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.btn_download:before {
  content: "";
  display: block;
  width: 14px;
  height: 14px;
  background: url(../img/shape/ico_download_white.svg) ;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 6px 0 0;
}
@media screen and (min-width: 480px){
  .btn_download:hover:before{
    background: url(../img/shape/ico_download_green.svg) ;
  }
}
@media screen and (max-width: 380px){
  .btn_download{
    font-size: 12px;
    height: 28px;
  }
}


/* ! コンテンツの購入 ———————————————————————————————————————————————————————————— */
.area_buy_contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 10px 0 0;
  padding: 30px;
  background: #F9F9F9;
}
.area_buy_contents > * {
  width: calc((100% - 30px) / 2);
}
.area_buy_contents .info {
  background: #fff;
  padding: 20px;
}
@media screen and (max-width: 1180px) and (min-width: 1000px){
  .area_buy_contents{
    flex-direction: column;
  }
  .area_buy_contents > *{
    width: 100%;
  }
  .area_buy_contents .info{
    margin: 0 0 20px;
  }
}
@media screen and (max-width: 1000px){
  .area_buy_contents > * {
    width: calc((100% - 20px) / 2);
  }
  .area_buy_contents {
    padding: 20px;
  }
  .area_buy_contents .info {
    padding: 20px;
  }
}
@media screen and (max-width: 840px) and (min-width: 767px){
  .area_buy_contents{
    flex-direction: column;
  }
  .area_buy_contents > *{
    width: 100%;
  }
  .area_buy_contents .info{
    margin: 0 0 16px;
  }
}
@media screen and (max-width: 660px){
  .area_buy_contents{
    flex-direction: column;
  }
  .area_buy_contents > *{
    width: 100%;
  }
  .area_buy_contents .info{
    margin: 0 0 16px;
  }
}
@media screen and (max-width: 480px){
  .area_buy_contents {
    padding: 16px;
  }
  .area_buy_contents .info {
    padding: 16px;
  }
}

/* リスト */
.list_info_buy_contents {
}
.list_info_buy_contents > li {
  display: flex;
  padding: 8px 0;
}
.list_info_buy_contents > li + li {
  border-top: 1px dashed #ccc;
}
.list_info_buy_contents p {
  font: 300 13px/1em 'noto sans japanese',sans-serif;
}
.list_info_buy_contents .ttl {
  font-weight: 500;
  flex: 0 0 150px;
}
.list_info_buy_contents .ttl:after {
  content: "：";
}
.list_info_buy_contents .data:after {
  content: attr(data-unit-after);
}
@media screen and (max-width: 1000px){
  .list_info_buy_contents p{
    font-size: 12px;
  }
  .list_info_buy_contents .ttl {
    flex: 0 0 140px;
  }
}
/*
@media screen and (max-width: 1180px) and (min-width: 1000px){
  .list_info_buy_contents > li{
    flex-direction:column;
    align-items: flex-start;
  }
  .list_info_buy_contents .ttl{
    flex: 0 0 auto;
    margin: 0 0 4px;
  }
}
@media screen and (max-width: 900px) and (min-width: 767px){
  .list_info_buy_contents > li{
    flex-direction:column;
    align-items: flex-start;
  }
  .list_info_buy_contents .ttl{
    flex: 0 0 auto;
    margin: 0 0 4px;
  }
}
@media screen and (max-width: 480px){
  .list_info_buy_contents p{
    font-size: 12px;
  }
  .list_info_buy_contents .ttl {
    flex: 0 0 140px;
  }
}
*/

/* ファイル形式 */
.ico_extention {
  font: bold 12px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
  display: block;
  min-width: 36px;
  padding: 2px 8px;
  background: #fff;
  border: 2px solid #000;
}


/* ボタンエリア */
.area_buy_contents .btnarea {
  margin-left: auto;
  flex-direction: column;
  align-items: center;
}
.area_buy_contents .btnarea .ttl {
  font: 600 15px/1em 'noto sans japanese',sans-serif;
}
.area_buy_contents .btnarea .tpl_price {
  font-size: 28px;
  align-items: baseline;
  margin: 16px 0 10px;
  border: none;
}
.area_buy_contents .btnarea .tpl_price:before,
.area_buy_contents .btnarea .tpl_price:after {
  font-size: 16px;
}
@media screen and (max-width: 1000px){
  .area_buy_contents .btnarea .tpl_price{
    margin: 10px 0 4px;
    font-size: 24px;
  }
  .area_buy_contents .btnarea .tpl_price:before,
  .area_buy_contents .btnarea .tpl_price:after {
    font-size: 13px;
  }
}
@media screen and (max-width: 480px){
  .area_buy_contents .btnarea .ttl{
    font-size: 13px;
  }
  .area_buy_contents .btnarea .tpl_price{
    margin: 8px 0 4px;
    font-size: 22px;
  }
}

/* 無料の時の表示 */
.area_buy_contents .btnarea .tpl_price.free {
  font-size: 24px;
  font-weight: 600;
  background: #f9f9f9;
  padding: 0;
}

/* ! 購入ボタン —————————————————————————————— */
.btn_buy {
  background: #DD5176;
  border-color: #DD5176;
  width: 100%;
  margin: 8px 0 0;
}
@media screen and (min-width: 480px){
  .btn_buy:hover{
    color: #DD5176;
  }
}

/* ! 投稿者 ———————————————————————————————————————————————————————————— */
.area_post_user_wrap{
  margin: 30px 0 0;
}
.area_post_user_wrap > .ttl{
  color: #fff;
  font: 500 14px/1em 'noto sans japanese' , sans-serif;
  background: #333;
  padding: 10px 20px;
}
.area_post_user {
  padding: 30px;
  border: 1px solid #333;
}

.area_post_user .img {
  flex: 0 0 60px;
  margin: 0 10px 0 0;
}
.area_post_user .info {
  flex: 1 1 auto;
  min-width: 10px;
}
@media screen and (max-width: 480px){
  .area_post_user {
    padding: 14px;
  }
  .area_post_user .img {
    flex: 0 0 50px;
    margin: 0 4px 0 0;
  }
  .area_post_user [class*="thumb"][class*="_user"][class*="_medium"] {
    width: 50px;
  }
}
@media screen and (max-width: 370px){
  .area_post_user {
    padding: 16px;
  }
}

/* ! ヘッド —————————————————————————————— */
.head_post_user {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}
.head_post_user .area_poster{
  display: flex;
  align-items: center;
} 
.head_post_user .name {
  font: 600 16px/1em 'noto sans japanese',sans-serif;
}
.head_post_user .name:hover{
  color: #51c96d;
}
.head_post_user .name:after {
  content: attr(data-kana)"";
  color: #aaa;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  margin: 0 0 0 8px;
}
.head_post_user .user_certification{
  margin: 0 -2px -2px;
}
.head_post_user .user_certification span{
  color: #333;
}
.head_post_user .company {
  font: 300 12px/1em 'noto sans japanese',sans-serif;
  margin: 8px 0 0;
}
@media screen and (max-width: 370px){
  .head_post_user .name:after{
    display: block;
    margin: 4px 0 0 ;
  }
}

/* ! フォロー —————————————————————————————— */
.area_follow_user {
  flex: 1 1 auto;
  min-width: 10px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.area_follow_user .follow,
.area_follow_user .follower {
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_follow_user .follow:before,
.area_follow_user .follower:before {
  color: #839EAC;
  font: 300 11px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 6px 0 0;
  white-space: nowrap;
}
.area_follow_user .follow:before {
  content: "フォロー中";
}
.area_follow_user .follower:before {
  content: "フォロワー";
}
.area_follow_user [class*="follow"] + [class*="follow"] {
  margin-left: 20px;
}
.area_follow_user .btnarea {
  margin: 0 0 0 24px;
  padding: 4px 0;
}
.area_follow_user .btnarea [class*=button_] + [class*=button_] {
  margin: 0 0 0 4px;
}
.btn_follow {
  font-size: 12px;
  height: 28px;
  padding: 0 12px;
  display: flex;
  align-items: center;
}
@media screen and (max-width: 480px){
  .area_follow_user .btnarea {
    margin: 0 0 0 16px;
  }
}
@media screen and (max-width: 430px){
  .area_follow_user .btnarea [class*=button_]{
    height: 26px;
  }
}



/* ! ボディ —————————————————————————————— */
.area_post_user .body_post_user .description {
  color: #444;
  font: 400 13px/1.6em 'noto sans japanese',sans-serif;
  margin: 14px 0 0;
}
@media screen and (max-width: 480px){
  .area_post_user .body_post_user .description {
    font-size: 12px;
  }
}

/* ! フット —————————————————————————————— */
.area_post_user .foot_post_user{
  margin: 16px 0 0;
  padding: 16px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #eee;
}
.area_post_user .foot_post_user [class*=btn_][class*=ico]{
  flex-direction:row;
}
.area_post_user .foot_post_user [class*=btn_][class*=message] {
  font: 500 14px/1em 'noto sans japanese',sans-serif;
  background: #7f8eca;
  border-color: #7f8eca;
  height: 36px;
  min-width: 120px;
  flex-direction: row;
  padding: 0 20px;
}
.area_post_user .foot_post_user [class*=btn_][class*=message]:before{
  content: "";
  background: url(../img/head/ico_btn_mail_white.svg) no-repeat center center;
  background-size: contain !important;
  width: 18px;
  height: 18px;
  margin: 0 6px 0 0;
}
.area_post_user .foot_post_user [class*=btn_][class*=message]:hover{
  color: #7f8eca;
  background: #fff;
}
.area_post_user .foot_post_user [class*=btn_][class*=message]:hover:before{ background: url(../img/head/ico_btn_mail.svg) no-repeat center center;}
.area_post_user .foot_post_user [class*=btn_][class*=ico][class*=phone]:before{
  background: url(../img/head/ico_btn_mail_white.svg) no-repeat center center;
}
@media screen and (max-width: 480px){
  .area_post_user .foot_post_user{
    margin: 14px 0 0;
    padding: 10px 0 0;
  }
  .area_post_user .foot_post_user [class*=btn_][class*=message]{
    height: 32px;
    min-width: 10px;
  }
}
@media screen and (max-width: 370px){
  .area_post_user .foot_post_user{
    flex-direction:column;
  }
}

/* お話してみませんか？ */
.area_post_user .foot_post_user p{
  font: 500 13px/1em 'noto sans japanese' , sans-serif;
  margin: 0 16px 0 0;
  padding: 0 16px 0 0;
  position: relative;
}
.area_post_user .foot_post_user p:before{
  content: "";
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4.5px 0 4.5px 5px;
  border-color: transparent transparent transparent #000333;
  position: absolute;
  right: 0;
  top: 2px;
}
@media screen and (max-width: 480px){
  .area_post_user .foot_post_user p{
    font-size: 12px;
  }
}
@media screen and (max-width: 370px){
  .area_post_user .foot_post_user p{
    margin: 0 0 10px;
  }
  .area_post_user .foot_post_user p:before{
    transform: rotate(90deg);
  }
}


/* ! レビューエリア ———————————————————————————————————————————————————————————— */
.area_review {
  width: 100%;
  margin: 50px 0 0;
}
.area_review .ttl {
  font: 600 16px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 40px;
  background: #f4f4f4;
  padding: 10px 16px;
}
.area_contents_detail + .area_review {
  margin: 8px 0 0;
}
@media screen and (max-width: 480px){
  .area_review .ttl {
    margin: 0 0 30px;
  }
}


/* リスト */
.list_review {
  margin: 16px 0 0;
}
.list_review > li + li  {
  margin: 30px 0 0;
}
.list_review article {
  display: flex;
}
.list_review .img {
  flex: 0 0 36px;
}
.list_review .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_review .name {
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 8px;
}
.list_review .comment {
  font: 300 12px/1.5em 'noto sans japanese',sans-serif;
}


/* ! レビューエリア ———————————————————————————————————————————————————————————— */
.area_star {
  margin: 4px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.area_star .date {
  color: #B3C1C7;
  font: normal 11px/1em 'Roboto','noto sans japanese',sans-serif;
  margin-left: auto;
}

/* リスト */
.list_star {
  display: flex;
/*   margin: 0 -1px; */
}
.list_star > li {
/*   padding: 0 1px; */
}
.list_star > li:before {
  content: "";
  display: block;
  background: url(../img/shape/ico_star_blank.svg);
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  width: 15px;
  height: 15px;
}
.list_star > li.star_full:before {
  background: url(../img/shape/ico_star_full.svg);
}


/* ! コンテンツへの投稿 ———————————————————————————————————————————————————————————— */
.area_inserts {
  padding: 60px 0 30px;
}
.area_post_inserts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
.area_post_inserts .ttl {
  color: #DD5176;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
}
.area_post_inserts .btnarea {
  width: 100%;
  max-width: 320px;
}
@media screen and (max-width: 480px){
  .area_inserts {
    padding: 40px 0 20px;
  }
}

/* ————————————————————————————————————————————————————————————
 ! column投稿ページ
———————————————————————————————————————————————————————————— */

/* ! ボディ —————————————————————————————— */
/* step1の入力内容 */
.area_inputted_content article{
  display: flex;
  align-items: center;
  margin: 0 0 50px;
}
.area_inputted_content .img{
  flex: 0 0 80px;
  margin: 0 30px 0 0;
}
.area_inputted_content .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.area_inputted_content .text {
  flex: 1 1 auto;
  min-width: 10px;
}
.area_inputted_content .text > div{
  display: flex;
}
.area_inputted_content .text .ttl{
  flex: 0 0 76px;
}
.area_inputted_content .text > div + div{
  margin: 6px 0 0;
}
.area_inputted_content .text p{
  font: 500 14px/1.3em 'Roboto','noto sans japanese',sans-serif;
}


/* 必須 */
.required [class*="body_form_"][class*="post"][class*="content"] .wrap_required input,
.required [class*="body_form_"][class*="post"][class*="content"] .wrap_required select {
  background: #fff;
}

/* ! ボディ —————————————— */
[class*="body_form_"][class*="post"][class*="content"] .answer{
  font: 500 15px/1.5em 'noto sans japanese' , sans-serif;
}
[class*="body_form_"][class*="post"][class*="content"] .answer .img{
  width: 120px;
}
[class*="body_form_"][class*="post"][class*="content"] .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 75%;
}
@media screen and (max-width: 480px){
  [class*="body_form_"][class*="post"][class*="content"] .answer{
    font-size: 14px;
  }
}

/* 画像選択 */
[class*="list_form"][class*="content"] .wrap_file:before,
[class*="list_form"][class*="question"] .wrap_file:before,
[class*="list_form"][class*="book"] .wrap_file:before{
  content: "";
  border-radius: 5px;
/*   border: 1px dotted #E5E6EA; */
  background: transparent;
  width: 140px;
  height: 140px;
}
[class*="list_form"][class*="content"] .wrap_file,
[class*="list_form"][class*="content"] input[type="file"],
[class*="list_form"][class*="question"] .wrap_file,
[class*="list_form"][class*="question"] input[type="file"],
[class*="list_form"][class*="book"] .wrap_file,
[class*="list_form"][class*="book"] input[type="file"] {
  width: 140px;
  height: 140px;
  margin: 0 16px 0 0;
}
[class*="list_form"][class*="content"] .file_preview,
[class*="list_form"][class*="question"] .file_preview,
[class*="list_form"][class*="book"] .file_preview{
  border-radius: 0;
}
[class*="list_form"][class*="content"] .eyecatch [class*="wrap_input"],
[class*="list_form"][class*="question"] .eyecatch [class*="wrap_input"],
[class*="list_form"][class*="book"] .eyecatch [class*="wrap_input"]{
  align-items: flex-end;
}
[class*="list_form"][class*="content"]  .eyecatch [class*="btn_"],
[class*="list_form"][class*="question"]  .eyecatch [class*="btn_"],
[class*="list_form"][class*="book"]  .eyecatch [class*="btn_"]{
  height: 40px;
  width: 140px;
  padding: 0 10px;
}
[class*="list_form"][class*="content"] .eyecatch [class*="btn_"] + [class*="btn_"],
[class*="list_form"][class*="question"] .eyecatch [class*="btn_"] + [class*="btn_"],
[class*="list_form"][class*="book"] .eyecatch [class*="btn_"] + [class*="btn_"]{
  margin: 0 0 0 4px;
}
@media screen and (max-width: 560px){
  [class*="list_form"][class*="content"] .eyecatch [class*="btnarea_"],
  [class*="list_form"][class*="question"] .eyecatch [class*="btnarea_"],
  [class*="list_form"][class*="book"] .eyecatch [class*="btnarea_"]{
    flex-direction:column;
  }
  [class*="list_form"][class*="content"] .eyecatch [class*="btn_"] + [class*="btn_"],
  [class*="list_form"][class*="question"] .eyecatch [class*="btn_"] + [class*="btn_"],
  [class*="list_form"][class*="book"] .eyecatch [class*="btn_"] + [class*="btn_"]{
    margin: 4px 0 0;
  }
}

/* checkbox */
[class*="list_form"][class*="content"] .wrap_checkbox label:after,
[class*="list_form"][class*="question"] .wrap_checkbox label:after{
  background: #3f7cc4 url(../img/shape/ico_check_white.svg) no-repeat center center;
  border-color: #3f7cc4;
}

/* ! ボタンエリア ——————————— */
.foot_cnt_post_content{
  border-top: 1px solid #eee;
  margin-top: 40px;
}
.foot_cnt_post_content [class*="btnarea_"][class*="agreement"]{
  padding: 30px 0 0;
}
.foot_cnt_post_content [class*="button_"][class*="agreement"]{
  color: #3f7cc4;
}

/*  */
[class*="area_cnt_"][class*="content"] .btnarea_step {
  margin: 0 auto;
  border: none;
}
[class*="area_cnt_"][class*="content"] .btnarea_step [class*="btn_"][class*="draft"]{
  color: #DD5176;
}


[class*="area_cnt_"][class*="content"] [class*="btn_"][class*="blue"]{
  background: #3f7cc4;
  border-color: #3f7cc4;
  box-shadow:0 0 0 0;
}
@media screen and (min-width: 480px){
  [class*="area_cnt_"][class*="content"] [class*="btn_"][class*="blue"]:hover{
    color: #3f7cc4;
    background: #fff;
  }
}
[class*="area_cnt_"][class*="content"] [class*="btn_"][class*="goast"][class*="blue"]{
  color: #3f7cc4;
  background: transparent;
}
[class*="area_cnt_"][class*="content"] .btnarea_step [class*="btn_"][class*="draft"]{
  color: #3f7cc4;;
  background: #eee;
  border-color: #eee;
}

@charset "UTF-8";

/* ! 履歴系ページ ————————————————————————————————————————————————————————————
  


編集ボタンエリア


———————————————————————————————————————————————————————————— */
/* ! 履歴ページ ———————————————————————————————————————————————————————————— */
.area_history {
}
.area_history [class*="list_media_card"] {
  flex-wrap: wrap;
  margin: -15px -5px;
}
.area_history [class*="list_media_card"] > li {
  width: 33.3333%;
  max-width: none;
  padding: 15px 5px;
}



/* ! 履歴 ———————————————————————————————————————————————————————————— */
.list_button_history {
 width: 100%;
  display: flex;
  flex-wrap: wrap;
}
.list_button_history > li {
  padding: 0 3px;
}
.list_button_history a {
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background: #fff;
  height: 48px;
  padding: 0 20px 0 50px;
  border-radius: 100px;
  transition: all 0.1s ease;
  position: relative;
}
.list_button_history a:before {
  content: "";
  display: block;
  width: 24px;
  height: 24px;
  background-size: 21px 21px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: block;
  position: absolute;
  top: 50%;
  left: 16px;
  transform: translateY(-50%);
}
@media screen and (min-width: 480px){
  .list_button_history a:hover {
    color: #F29F3E;
  }
}
.list_button_history .current a {
  color: #fff;
  background: #F29F3E;
}
.list_button_history a span {
  font: 600 20px/1em 'Roboto','noto sans japanese',sans-serif;
  display: inline-block;
  margin: 0 8px 0 0;
}

/* 個別 */
.history_book a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_book_gray.svg"); background-size: 24px 24px !important;}
.history_upload a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_upload_gray.svg");}
.history_download a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_download_gray.svg");}
.current.history_book a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_book_white.svg"); background-size: 24px 24px !important;}
.current.history_upload a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_upload_white.svg");}
.current.history_download a:before { background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/action/ico_download_white.svg");}



/* ! 編集ボタンエリア ———————————————————————————————————————————————————————————— */
.area_history .area_edit {
  margin: 10px 0 20px;
  position: relative;
  z-index: 2;
}



@charset "UTF-8";

/* ! アンケート ————————————————————————————————————————————————————————————

■アンケート詳細ページ
　アンケート履歴

■アンケート詳細ページ

■アンケート入力ページ

———————————————————————————————————————————————————————————— */
/* ! aside アンケート履歴 ———————————————————————————————————————————————————————————— */

[class*="area_enquete"][class*="aside"] > .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 12px;
}
[class*="area_enquete"][class*="draft"][class*="aside"] > .ttl{
  color: #aaa;
}
.area_main_layout_enquete aside section + section{
  margin: 30px 0 0;
}

@media screen and (max-width: 480px){
  [class*="area_enquete"][class*="aside"] > .ttl{
    margin: 0 0 16px;
  }
}


/* ————————————————————————————————————————————————————————————
 ! ■アンケート詳細ページ
———————————————————————————————————————————————————————————— */
/* ! アンケート詳細ページ ———————————————————————————————————————————————————————————— */
.area_enquete_detail {
  width: 100%;
}
.area_enquete_detail > .head {
}
.area_enquete_detail > .head .btnarea {
  margin: 0 0 20px;
}

.area_cnt_enquete_detail{
  width: 100%;
}
.area_cnt_enquete_detail > section{
  padding: 40px 0;
}
.area_cnt_enquete_detail > section + section{
  border-top: 1px solid #eee;
}
@media screen and (max-width: 480px){
  .area_cnt_enquete_detail > section{
    padding: 30px 0;
  }
}


/* テキスト */
.area_enquete_detail .head .text {
  margin: 0 0 30px;
}
.area_enquete_detail .head .ttl {
  font: 600 24px/1.5em 'noto sans japanese',sans-serif;
  letter-spacing: .01em;
}
.area_enquete_detail .head .description {
  font: 200 14px/1.6em 'noto sans japanese',sans-serif;
  letter-spacing: .06em;
  margin: 16px 0 0;
}
.area_enquete_detail .cnt {
/*   border-top: 1px solid #E5E7EB; */
  margin: 30px 0 0;
  display: flex;
}

@media screen and (max-width: 767px){
  .area_enquete_detail .head .ttl{
    font-size: 22px;
  }
}
@media screen and (max-width: 560px){
  .area_enquete_detail .head .text {
    margin: 0 0 16px;
  }
  .area_enquete_detail .head .ttl{
    font-size: 18px;
  }
}

/* 投稿者_ステータス */
.status_enquete {
  margin: 6px 0;
}
.status_enquete .list_action {
  position: relative;
  z-index: 2;
}

.status_enquete .list_cat {
  margin: 0 -8px;
  margin-bottom: 12px;
  position: relative;
  z-index: 2;
}
.status_enquete .area_poster {
  margin: 0 0 0 auto;
  position: relative;
  z-index: 2;
}
.status_enquete .area_poster .date{
  color: #999;
  font: Regular 14px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 10px;
}
.status_enquete .list_tag a {
  display: inline;
}

/* ! imgエリア —————————————————————————————— */
.area_enquete_detail_img .img{
  max-width: 240px;
  margin: 0 0 20px;
}
.area_enquete_detail_img .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 75%;
}
}


/* ! グラフエリア —————————————————————————————— */
.area_graph_answer{
  display: flex;
  align-items: center;
  justify-content: center;
}
.area_graph_answer .number{
  color: #222;
  font: 600 14px/1em 'noto sans japanese',sans-serif;
  text-align: right;
  margin: 0 50px 0 0;
}
.area_graph_answer .number span{
  color: #000;
  font: bold 48px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 10px;
}
.area_graph_answer .area_graph{
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 480px;
}
.area_graph_answer .area_graph .graph{
  flex: 0 0 220px;
}
@media screen and (max-width: 1280px){
  .area_graph_answer .number{
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 1000px){
  .area_graph_answer{
    flex-direction:column;
  }
  .area_graph_answer .number{
    flex: 0 0 auto;
  }
  .area_graph_answer .area_graph{
    flex: 0 0 auto;
    margin: 0 0 30px;
    width: 100%;
    justify-content: center;
  }
}
@media screen and (max-width: 767px){
  .area_cnt_enquete_detail > .area_graph_answer{
    padding: 0 0 40px;
  }
  .area_graph_answer .area_graph .graph canvas{
    width: 180px !important;
    height: 180px !important;
  }
  .area_graph_answer .number span{
    font-size: 40px;
  }
}
@media screen and (max-width: 560px){
  .area_graph_answer .area_graph{
    width: 100%;
  }
  .area_graph_answer .number{
    font-size: 12px;
    text-align: center;
  }
  .area_graph_answer .number span{
    font-size: 30px;
  }
  .area_graph_answer .area_graph .graph canvas{
    width: 160px !important;
    height: 160px !important;
  }
  .area_graph_answer .area_graph .graph{
    flex: 0 0 180px;
  }
}
@media screen and (max-width: 480px){
  .area_graph_answer .area_graph .graph canvas{
    width: 120px !important;
    height: 120px !important;
  }
}

/* リスト_回答内容 */
.list_answer_item{
  flex: 1 1 auto;
}
.list_answer_item > li{
  display: flex;
  align-items: baseline;
  padding: 8px 0;
  padding-left: 20px;
  position: relative;
}
.list_answer_item > li:before{
  content: "";
  background: #4471C4;
  width: 8px;
  height: 8px;
  border-radius: 10px;
  position: absolute;
  left: 0;
  top: 14px;
}
.list_answer_item > li + li{
  border-top: 1px solid #eee;
}
.list_answer_item .rate{
  color: #4471C4;
  font: 400 11px/1em 'Roboto','noto sans japanese',sans-serif;
  flex: 0 0 80px;
}
.list_answer_item .rate span{
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_answer_item .rate span:after{
  content: "%";
  font: bold 15px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 3px;
}
.list_answer_item .ttl{
  font: 500 12px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 0 16px;
  flex: 1 1 auto;
  min-width: 10px;
}

@media screen and (max-width: 1000px){
  .list_answer_item{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  }
  .list_answer_item > li{
    width: 100%;
    padding: 10px;
    padding-left: 20px;
  }
  .list_answer_item > li + li{
    margin: 0;
  }
  .list_answer_item > li:before{
    top: 16px;
  }
}
@media screen and (max-width: 560px){
  .list_answer_item{
    margin: -8px 0;
  }
  .list_answer_item > li{
    width: 100%;
    padding: 8px 0;
    padding-left: 20px;
  }
  .list_answer_item > li:before{
    top: 14px;
  }
}

/* 個別 */
.list_answer_item > li:nth-of-type(2) .rate{ color: #ED7D31;}
.list_answer_item > li:nth-of-type(3) .rate{ color: #A4A4A4;}
.list_answer_item > li:nth-of-type(4) .rate{ color: #FFC000;}
.list_answer_item > li:nth-of-type(5) .rate{ color: #5B9BD4;}
.list_answer_item > li:nth-of-type(6) .rate{ color: #70AD47;}
.list_answer_item > li:nth-of-type(7) .rate{ color: #254477;}
.list_answer_item > li:nth-of-type(8) .rate{ color: #9E480D;}
.list_answer_item > li:nth-of-type(9) .rate{ color: #636363;}
.list_answer_item > li:nth-of-type(10) .rate{ color: #997300;}

.list_answer_item > li:nth-of-type(2):before{ background: #ED7D31;}
.list_answer_item > li:nth-of-type(3):before{ background: #A4A4A4;}
.list_answer_item > li:nth-of-type(4):before{ background: #FFC000;}
.list_answer_item > li:nth-of-type(5):before{ background: #5B9BD4;}
.list_answer_item > li:nth-of-type(6):before{ background: #70AD47;}
.list_answer_item > li:nth-of-type(7):before{ background: #254477;}
.list_answer_item > li:nth-of-type(8):before{ background: #9E480D;}
.list_answer_item > li:nth-of-type(9):before{ background: #636363;}
.list_answer_item > li:nth-of-type(10):before{ background: #997300;}



/* ! 回答詳細 —————————————————————————————— */
.list_answer_item_detail > li + li{
  margin: 50px 0 0;
}
.list_answer_item_detail .rate{
  color: #4471C4;
  font: 400 16px/1em 'Roboto','noto sans japanese',sans-serif;
}

.list_answer_item_detail > li:nth-of-type(2) .rate{ color: #ED7D31;}
.list_answer_item_detail > li:nth-of-type(3) .rate{ color: #A4A4A4;}
.list_answer_item_detail > li:nth-of-type(4) .rate{ color: #FFC000;}
.list_answer_item_detail > li:nth-of-type(5) .rate{ color: #5B9BD4;}
.list_answer_item_detail > li:nth-of-type(6) .rate{ color: #70AD47;}
.list_answer_item_detail > li:nth-of-type(7) .rate{ color: #254477;}
.list_answer_item_detail > li:nth-of-type(8) .rate{ color: #9E480D;}
.list_answer_item_detail > li:nth-of-type(9) .rate{ color: #636363;}
.list_answer_item_detail > li:nth-of-type(10) .rate{ color: #997300;}

.list_answer_item_detail .rate span{
  font: bold 33px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_answer_item_detail .rate span:after{
  content: "%";
  font: bold 24px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 4px;
}
.list_answer_item_detail .ttl{
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  margin: 16px 0 0;
}
.head_list_answer_item_detail{
  margin: 0 0 20px;
}

@media screen and (max-width: 767px){
  .list_answer_item_detail .rate span{
    font-size: 28px;
  }
  .list_answer_item_detail .ttl{
    font-size: 18px;
  }
}
@media screen and (max-width: 560px){
  .list_answer_item_detail .rate span{
    font-size: 24px;
  }
  .list_answer_item_detail .rate span:after{
    font-size: 16px;
  }
  .list_answer_item_detail .ttl{
    font-size: 16px;
  }
}

/* リスト_回答者一覧*/
.list_answerers{
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list_answerers > li{
  width: 20%;
  padding: 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.list_answerers .date{
  display: block;
  color: #999;
  font: 400 13px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 4px 0 0;
}
.list_answerers [class*="tpl_user"]{
  font: 400 16px/1em 'noto sans japanese',sans-serif;
}
.list_answerers [class*="tpl_user"] .number{
  margin: 0 0 0 4px;
  font-size: .9em;
}

@media screen and (max-width: 1000px){
  .list_answerers > li{
    width: 25%;
  }
}
@media screen and (max-width: 560px){
  .list_answerers > li{
    width: 33.3333%;
  }
  .list_answerers > li{
    width: 50%;
  }
  .list_answerers [class*="tpl_user"]{
    font-size: 13px;
  }
  .list_answerers [class*="tpl_user"] [class*="thumb"][class*="_regular"] {
    width: 26px;
  }
  .list_answerers .date{
    font-size: 12px;
  }
}

/* ゲストユーザー_アンケートの閲覧 */
.area_request_login{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_enquete_blur.png") no-repeat center center !important;
  background-size: contain !important;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  min-height: 400px;
  position: relative;
  z-index: 0;
}
.area_request_login:before{
  content: "";
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255,255,255,.5);
  z-index: -1;
}
.area_request_login .ttl{
  color: #111;
  font: 600 18px/1.4em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 20px;
}
.area_request_login [class*="btn_"]{
  width: 200px;
  margin: 2px;
}
.area_request_login [class*="btn_"][class*="goast"]{
  background: #fff;
}
@media screen and (min-width: 480px){
  .area_request_login [class*="btn_"]:hover{
    background: #fff;
  }
}
@media screen and (max-width: 640px){
  .area_request_login .ttl{
    font-size: 16px;
  }
  .area_request_login{
    min-height: 200px;
    background-size: 130% !important;
  }
  .area_request_login [class*="btn_"]{
    height: 36px;
  }
}
@media screen and (max-width: 480px){
  .area_request_login [class*="btn_"]{
    width: 140px;
    margin: 2px;
    font-size: 12px;
  }
}


/* ————————————————————————————————————————————————————————————
 ! ■アンケート入力ページ step1
———————————————————————————————————————————————————————————— */

/* 必須 */
.required .body_form_post_enquete .wrap_required input,
.required .body_form_post_enquete .wrap_required select {
  background: #fff;
}

/* ! ボディ —————————————— */
[class*="body_form_"][class*="enquete"] .answer{
  font: 500 15px/1.5em 'noto sans japanese' , sans-serif;
}
[class*="body_form_"][class*="enquete"] .answer .img{
  width: 120px;
}
[class*="body_form_"][class*="enquete"] .answer .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 75%;
}

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

/* 回答選択肢 */
[class*="list_form_"][class*="enquete"] .answer_select{
  counter-reset: count;
}
[class*="list_form_"][class*="enquete"] .answer_select .number:after{
  counter-increment: count;
  content: counter(count);
}

/* ボタン_設問を追加 */
.area_add_question_enquete{
  display: flex;
  margin: 12px 0 20px;
}
[class*="button_"][class*="add_question"][class*="enquete"]{
  color: #576086;
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  position: relative;
  cursor: pointer;
}
[class*="button_"][class*="add_question"][class*="enquete"]:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_add_navy.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 13px;
  height: 13px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
[class*="list_form"][class*="enquete"] .note{
  color: #C1C5D3;
  font: 500 10px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 0 auto;
}

/* 削除ボタン */
[class*="list_form"][class*="enquete"] .delete_btn{
  color: #C1C5D3;
  font: 500 13px/1em 'noto sans japanese' , sans-serif;
}
[class*="list_form"][class*="enquete"] .answer_select > div:first-child .delete_btn{
  display: none;
}

@media screen and (max-width: 560px){
  [class*="list_form"][class*="enquete"] .delete_btn{
    font-size: 12px;
  }
}

/* 画像選択 */
[class*="list_form"][class*="enquete"] .wrap_file:before{
  color: #576086;
  border-radius: 5px;
  border: 1px dotted #E5E6EA;

  width: 140px;
  height: 140px;
}
[class*="list_form"][class*="enquete"] .wrap_file,[class*="list_form"][class*="enquete"] input[type="file"] {
  width: 140px;
  height: 140px;
}
[class*="list_form"][class*="enquete"] .wrap_file [class*="thumb"]{
  border-radius: 5px;
    background: #fbfbfb;
}


/* ! アンケート回答ページ ———————————————————————————————————————————————————————————— */
.head_cnt_post_enquete .btnarea {
  margin: 0 0 20px;
}

/* リスト */
.list_enquete_answer{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: -5px;
}
.list_enquete_answer > li{
  width: 50%;
  padding: 5px;
  border: none !important;
  display: flex;
  flex-direction:column;
  position: relative;
}
.list_enquete_answer .wrap_radio.tab{
  flex: 1 1 auto;
  min-height: 10px;
}
.list_enquete_answer > li:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_check_white.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 15px;
  height: 15px;
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 100;
}
.list_enquete_answer .wrap_radio.tab input[type="radio"] + label{
  color: #222;
  font: 500 18px/1.4em 'Roboto','noto sans japanese',sans-serif;
  padding: 15px 40px 15px 40px;
  height: auto;
  text-align: left;
}
.list_enquete_answer .wrap_radio.tab input[type=radio]:checked + label{
  color: #fff;
}
.list_enquete_answer .wrap_radio.tab label:before,
.list_enquete_answer .wrap_radio.tab label:after{
  border-color: #C1C5D3;
}
.list_enquete_answer .wrap_radio.tab input[type="radio"] + label,
.list_enquete_answer .wrap_radio.tab input[type="radio"] + label:before,
.list_enquete_answer .wrap_radio.tab input[type="radio"] + label:after{
  width: 100%;
  margin: 0;
  height: 100%;
}
.list_enquete_answer .wrap_radio.tab label:after {
  background: #576086;
}

@media screen and (max-width: 767px){
  .list_enquete_answer .wrap_radio.tab input[type="radio"] + label{
    font-size: 16px;
  }
}
@media screen and (max-width: 560px){
  .list_enquete_answer{
    margin: -4px 0;
  }
  .list_enquete_answer > li{
    width: 100%;
    padding: 4px 0;
  }
  .list_enquete_answer > li:before{
    left: 14px;
  }
}
@media screen and (max-width: 480px){
  .list_enquete_answer .wrap_radio.tab input[type="radio"] + label{
    font-size: 14px;
    padding: 10px 40px 10px 40px;
  }
}

@charset "UTF-8";

/* ! アンケート ————————————————————————————————————————————————————————————

■匿名360°評価 トップページ
■匿名360°評価 アンケート作成 step1
■匿名360°評価 アンケート作成 step3


/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 トップページ
———————————————————————————————————————————————————————————— */
.area_main_layout > .area_360{
  width: 100%;
  overflow: hidden;
}

/* ヘッド img ———————————————————— */
.head_360{
  background:url(../img/head/img_top_360.webp) no-repeat center;
  background-size:cover;
  color: #fff;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  position: relative;
  margin: 0 0 20px;
}
.head_360:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 200px;
}
.head_360:after{
  content: "";
  display: block;
  width: 100%;
  height: 140px;
  background: -moz-linear-gradient(bottom, rgba(120,87,167,.6), transparent);
  background: -webkit-linear-gradient(bottom, rgba(120,87,167,.6), transparent);
  background: linear-gradient(to top, rgba(120,87,167,.6), transparent);
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 10px 10px;
}
.head_360 .ttl{
  font: 600 40px/1em 'noto sans japanese' , sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 1;
  width: 100%;
  text-align: center;
}
.head_360 .ttl span{
  font: bold 43px/1em 'Roboto','noto sans japanese',sans-serif;
}
.head_360 .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_360.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 56px;
  height: 56px;
  display: inline-block;
  transform: translate(-10px , 10px);
}

@media screen and (max-width: 767px){
  .head_360{
    margin: 0 0 16px;
  }
  .head_360:before{
    padding-top: 180px;
  }
  .head_360 .ttl{
    font-size: 32px;
  }
  .head_360 .ttl span{
    font-size: 36px;
  }

  .head_360 .ttl:before{
    width: 44px;
    height: 44px;
  }
}
@media screen and (max-width: 480px){
  .head_360{
    margin: 0 0 10px;
  }
  .head_360:before{
    padding-top: 140px;
  }
  .head_360 .ttl{
    font-size: 28px;
  }
  .head_360 .ttl span{
    font-size: 32px;
  }
  .head_360 .ttl:before{
    width: 36px;
    height: 36px;
  }
}


/* 匿名360°評価とは? ———————————————————— */
.body_360{
  border: 4px solid #7857A7;
  border-radius: 4px;
  padding: 70px 60px;
}
.body_360 > .ttl{
  font: 600 28px/1em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 50px;
}
.body_360 > .copy{
  color: #7857A7;
  font: bold 23px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
  margin: 0 0 20px;
}
.body_360 > .description{
  color: #444;
  font: 400 14px/1.8em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 70px;
}
.body_360 > [class*="area_360"]{
  margin: 80px 0 0;
}

.body_360 > [class*="area_360"] > .ttl{
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 40px;
}

@media screen and (max-width: 1280px){
  .body_360{
    padding: 60px 40px;
  }
}
@media screen and (max-width: 560px){
  .body_360{
    padding: 40px 20px;
  }
  .body_360 > .ttl{
    font-size: 24px;
    margin: 0 0 30px;
  }
  .body_360 > .copy{
    font-size: 18px;
    margin: 0 0 16px;
  }
  .body_360 > .description{
    font-size: 13px;
    margin: 0 0 30px;
  }
}
@media screen and (max-width: 480px){
  .body_360 > [class*="area_360"]{
    margin: 50px 0 0;
  }
  .body_360 > [class*="area_360"] > .ttl{
    font-size: 18px;
    margin: 0 0 30px;
  }
}


/* 概要説明 ---------- */
.area_about_360 .overview{
  display: flex;
}
.area_about_360 .overview > div{
  width: 50%;
}
.area_about_360 .img{
  margin: 0 20px 0 0;
}
.area_about_360 .description{
  font: 500 14px/1.5em 'noto sans japanese' , sans-serif;
}
.area_about_360 .description + .description{
  margin: 30px 0 0;
}

@media screen and (max-width: 560px){
  .area_about_360 .overview{
    display: block;
  }
  .area_about_360 .overview > div{
    width: 100%;
  }
  .area_about_360 .description{
    font-size: 13px;
  }
  .area_about_360 .description + .description{
    margin: 16px 0 0;
  }
}

/*  匿名360°評価の例 ---------- */
/* リスト */
.list_360_example{
  display: flex;
  flex-wrap: wrap;
  margin: -20px;
}
.list_360_example > li{
  width: 50%;
  padding: 20px;
}
.list_360_example article .ttl{
  font: 500 15px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
}
.list_360_example [class*="btnarea"]{
  margin: 16px 0 0;
}
.list_360_example [class*="btn_"]{
  font: 600 13px/1.3em 'noto sans japanese' , sans-serif;
  text-align: center;
  background: #fff;
  color: #7857A7;
  border: 2px solid #7857A7;
}
@media screen and (min-width: 480px){
  .list_360_example [class*="btn_"]:hover{
    background: #7857A7;
    color: #fff;
  }
}

@media screen and (max-width: 1280px){
  .list_360_example{
    margin: -10px;
  }
  .list_360_example > li{
    padding: 10px;
  }
}
@media screen and (max-width: 560px){
  .list_360_example{
    margin: 0;
  }
  .list_360_example > li{
    width: 100%;
    padding: 0;
  }
}
@media screen and (max-width: 480px){
  .list_360_example [class*="btn_"]{
    height: 42px;
  }
}


/*  匿名360°評価の流れ ---------- */
/* リスト */
.list_360_flow{
  display: flex;
  flex-wrap: wrap;
  margin: -15px;
  counter-reset: step;
}
.list_360_flow > li{
  width: 33.3333%;
  display: flex;
  flex-direction:column;
  align-items: center;
  padding: 15px;
  position: relative;
}
.list_360_flow > li + li:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_flow_arrow_purple.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 40px;
  height: 40px;
  position: absolute;
  left: -20px;
  top: 30px;
}
.list_360_flow article{
  width: 100%;
}
@media screen and (max-width: 1000px){
  .list_360_flow{
    margin: -10px;
  }
  .list_360_flow > li{
    padding: 10px;
  }
}
@media screen and (max-width: 767px){
  .list_360_flow > li + li:before{
    width: 30px;
    height: 30px;
    left: -15px;
  }
}
@media screen and (max-width: 480px){
  .list_360_flow{
    margin: 0;
  }
  .list_360_flow > li{
    width: 100%;
    padding: 0;
  }
  .list_360_flow > li + li{
    margin: 20px 0 0;
  }
  .list_360_flow article{
    display: flex;
  }
  .list_360_flow > li + li:before{
    width: 20px;
    height: 20px;
    left: 19px;
    top: -36%;
    transform: rotate(90deg);
  }
}

/* 画像 */
.list_360_flow .img{
  text-align: center;
  margin: 0 0 10px;
}
.list_360_flow img{
  vertical-align: bottom;
}

@media screen and (max-width: 480px){
  .list_360_flow .img{
    margin: 0 16px 0 0;
    flex: 0 0 60px;
  }
}
@media screen and (max-width: 420px){
  .list_360_flow .img{
    margin: 0 10px 0 0;
    flex: 0 0 50px;
  }
}

/* テキスト */
.list_360_flow .step{
  color: #7857A7;
  text-align: center;
  margin: 0 0 20px;
}
.list_360_flow .step:before{
  content: "STEP";
  font: 200 19px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_360_flow .step:after{
  counter-increment: step;
  content: "0"counter(step);
  font: bold 22px/1em 'Roboto','noto sans japanese',sans-serif;
}
.list_360_flow .ttl{
  font: 600 16px/1.3em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 24px;
}
.list_360_flow .description{
  color: #444;
  font: 400 13px/1.6em 'noto sans japanese' , sans-serif;
}

@media screen and (max-width: 480px){
  .list_360_flow .text{
    flex: 1 1 auto;
    min-width: 10px;
  }
  .list_360_flow .step{
    text-align: left;
    margin: 0 0 6px;
  }
  .list_360_flow .step:before{
    font-size: 13px;
  }
  .list_360_flow .step:after{
    font-size: 18px;
  }
  .list_360_flow .ttl{
    font-size: 15px;
    text-align: left;
    margin: 0 0 8px;
  }
  .list_360_flow .description{
    font-size: 12px;
  }
}

/*  アンケート作成するボタン ---------- */
.body_360 > [class*="btnarea"]{
  margin: 70px 0 0;
}
.body_360 > [class*="btnarea"] [class*="btn_"]{
  font: 600 20px/1em 'noto sans japanese' , sans-serif;
  max-width: 440px;
  width: 100%;
  height: 90px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.body_360 > [class*="btnarea"] [class*="btn_"]:before{
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 0 8px 0 -4px;
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_white.svg");
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
@media screen and (min-width: 480px){
  .body_360 > [class*="btnarea"] [class*="btn_"]:hover{
    color: #7857A7;
    background: #fff;
  }
  .body_360 > [class*="btnarea"] [class*="btn_"]:hover:before{
    background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_purple.svg");
  }
}

.body_360 > [class*="btnarea"] [class*="btn_post"]:before{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_purple.svg");
}
@media screen and (min-width: 480px){
  .body_360 > [class*="btnarea"] [class*="btn_post"]:hover{
    background: #7857A7;
    color: #fff;
  }
  .body_360 > [class*="btnarea"] [class*="btn_post"]:hover:before{
    background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_pen_white.svg");
  }
}

@media screen and (max-width: 767px){
  .body_360 > [class*="btnarea"] [class*="btn_"]{
    font-size: 18px;
    height: 72px;
  }
}
@media screen and (max-width: 480px){
  .body_360 > [class*="btnarea"]{
    margin: 40px 0 0;
  }
  .body_360 > [class*="btnarea"] [class*="btn_"]{
    padding: 0 10px;
    font-size: 16px;
    height: 64px;
  }
  .body_360 > [class*="btnarea"] [class*="btn_"]:before{
    width: 16px;
    height: 16px;
  }
}
@media screen and (max-width: 380px){
  .body_360 > [class*="btnarea"] [class*="btn_"]{
    font-size: 14px;
    height: 54px;
  }
}

/* アサイド ———————————————————— */
[class*="list_enquete"][class*="360"] p{
  text-align: left;
}
[class*="list_enquete"][class*="360"] .number{
  font: 400 12px/1em 'noto sans japanese' , sans-serif;
}
[class*="list_enquete"][class*="360"] .number span{
  color: #7857A7;
  font: bold 16px/1em 'Roboto','noto sans japanese',sans-serif;
}
[class*="list_enquete"][class*="360"] .head_list_enquete_history{
  margin: 0 0 10px;
}
[class*="body_list_enquete"][class*="360"] .number + .number{
  margin: 4px 0 0;
}

@media screen and (max-width: 1000px){
  [class*="body_list_enquete"][class*="360"]{
    margin: -10px;
  }
  [class*="body_list_enquete"][class*="360"] .number{
    width: auto;
    padding: 10px;
  }
  [class*="body_list_enquete"][class*="360"] .number + .number{
    margin: 0;
  }
}

/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 アンケート作成 step1
———————————————————————————————————————————————————————————— */
.required .body_form_post_360 .wrap_required input,
.required .body_form_post_360 .wrap_required select {
  background: #fff;
}

/* リスト */
[class*="list_form_"][class*="360"] > li {
  padding: 0 0 40px;
}

[class*="list_form_"][class*="360"] textarea{
  padding: 12px 16px;
}
[class*="list_form_"][class*="360"] small{
  color: #C1C5D3;
  font: 500 11px/1em 'noto sans japanese' , sans-serif;
  margin: 8px 0 0;
}
[class*="list_form_"][class*="360"] .area_permission{
  margin: 8px 0 0;
}
@media screen and (max-width: 560px){
  [class*="list_form_"][class*="360"] > li {
    padding: 0 0 30px;
  }
}

/* 質問を作成 ------------------------------------------------------------*/
.area_create_question_360 {
  max-width: 260px;
  position: relative;
  margin: 0 0 50px;
}

/* 作成ボタン */
[class*="btn_"][class*="create_question"]{
  font: 700 17px/1em 'Roboto','noto sans japanese',sans-serif;
  width: 100%;
  height: 70px;
  user-select:none;
}

@media screen and (max-width: 767px){
  [class*="btn_"][class*="create_question"]{
    height: 64px;
  }
}
@media screen and (max-width: 480px){
  [class*="btn_"][class*="create_question"]{
    font-size: 15px;
    height: 48px;
  }
}

/* 選択肢のリスト */
.list_create_question_type{
  box-shadow:0px 5px 9px 0px rgba(0,0,0,.1);
  border-radius: 5px;
  width: 100%;
  background: #fff;
  position: absolute;
  left: 0;
  top: 100%;
  transform: translateY(-10px);
  z-index: 1;
  display: none;
}
.list_create_question_type.display{
  display: block;
}
.list_create_question_type article{
  padding: 16px;
  user-select:none;
  cursor: pointer;
}

.list_create_question_type > li:first-child{ border-radius: 5px 5px 0 0;}
.list_create_question_type > li:last-child{ border-radius: 0 0 5px 5px;}
@media screen and (min-width: 480px){
  .list_create_question_type > li:hover{
    color: #fff;
    background: #7857A7;
  }
}
.list_create_question_type > li p{
  font: 400 16px/1em 'Roboto','noto sans japanese',sans-serif;
  position: relative;
}
.list_create_question_type > li p:before{
  content: "▶";
  color: #fff;
  font-size: 10px;
  margin: 0 4px 0 0 ;
}

/* 回答選択肢 */
.list_question_360{
  margin: 6px 0 0;
}
.area_question_group_360 + .area_question_group_360{
  margin: 50px 0 0;
}
.area_question_group_360 > .ttl{
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 10px;
}
.area_question_group_360{
  counter-reset: count;
}
.list_question_360 > li:nth-child(-n+3) .button_text_delete_360{
 opacity: 0;
 pointer-events: none;
}
.list_question_360 > li + li{
 margin: 6px 0 0;
}
[class*="list_form"][class*="360"] .answer_select .number{
  color: #7857A7;
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
}
[class*="list_form"][class*="360"] .answer_select .number:after{
  counter-increment: count;
  content: counter(count);
}
@media screen and (max-width: 480px){
  .area_question_group_360 > .ttl{
    font-size: 13px;
    margin: 0 0 8px;
  }
  [class*="list_form"][class*="360"] .answer_select .number{
    font-size: 16px;
  }
}

/* テンプレ使用/初期化 ----------*/
[class*="btnarea_"][class*="question_type"][class*="360"]{
  margin: 0 0 20px;
}
[class*="btnarea_"][class*="question_type"][class*="360"] [class*="btn_"]{
  height: 36px;
  margin: 2px;
}
[class*="btn_"][class*="reset"][class*="question_type"]{
  color: #999;
  border-color: #999;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="reset"][class*="question_type"]:hover{ color: #fff; background: #999;}
}

/* ボタン_設問を追加 ----------*/
.area_add_question_360{
  display: flex;
  margin: 12px 0 0;
}

/* ボタン_設問を追加 */
[class*="button_"][class*="text"][class*="add_question"][class*="360"]{
  color: #7857A7;
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 0 0 20px;
  position: relative;
  cursor: pointer;
  margin: 8px 0 0;
}
[class*="button_"][class*="text"][class*="add_question"][class*="360"]:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_add_purple.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 13px;
  height: 13px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}

@media screen and (max-width: 480px){
  [class*="button_"][class*="text"][class*="add_question"]{
    font-size: 13px;
    padding: 0 0 0 16px;
  }
  [class*="button_"][class*="text"][class*="add_question"]:before{
    width: 11px;
    height: 11px;
  }
}

/* 注釈 */
[class*="list_form"][class*="360"] .note{
  color: #C1C5D3;
  font: 500 10px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 0 auto;
}

/* ボタン_削除ボタン */
[class*="btn_"][class*="delete"][class*="360"] {
  color: #C1C5D3;
  font: 500 13px/1em 'noto sans japanese' , sans-serif;
}
.area_question_group_360:first-child [class*="btn_"][class*="delete"][class*="group"] {
  opacity: 0;
  pointer-events: none;
}
[class*="btn_"][class*="delete"][class*="group"]{
  color: #fff;
  background: #C1C5D3;
  border-color: #C1C5D3;
  border-radius: 4px;
  flex: 0 0 3.2em;
  padding: 0;
  margin: 0 0 0 4px;
}

@media screen and (max-width: 480px){
  [class*="btn_"][class*="delete"][class*="group"]{
    height: 42px;
  }
}

/* ボタン_設問グループを追加 */
[class*="btnarea_"][class*="add_group"]{
  margin: 50px 0 0;
}
[class*="btn_"][class*="add_group"] {
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  padding-left: 40px;
  position: relative;
}
[class*="btn_"][class*="add_group"]:before {
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_add_purple.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 14px;
  height: 14px;
  background: blue;
  position: absolute;
  top: 50%;
  left: 12px;
  transform: translateY(-50%);
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="add_group"]:hover:before {
    background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_add_white.svg") no-repeat center center !important;
  }
}

@media screen and (max-width: 480px){
  [class*="btnarea_"][class*="add_group"]{
    margin: 30px 0 0;
  }
  [class*="btn_"][class*="add_group"]{
    height: 36px;
  }
}

/* ! アンケート入力 ボタンエリア ——————————— */
.area_cnt_post_360 .btnarea_step [class*="btn_"][class*="draft"]{
  color: #7857A7;
}

[class*="list_form"][class*="360"] .mail .wrap_input .delete_btn{
  opacity: 0;
  pointer-events: none;
}
[class*="list_form"][class*="360"] .mail .wrap_input:nth-child(n+6) .delete_btn{
  opacity: 1;
  pointer-events: all;
}


/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 アンケート作成 step3(入力内容確認)
———————————————————————————————————————————————————————————— */
[class*="list_form"][class*="360"][class*="confirm"] .li_title .answer{
  font: bold 22px/1.4em 'Roboto','noto sans japanese',sans-serif;
}
.group_360_question > .ttl{
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 8px 0 16px;
}
.group_360_question{
  counter-reset: count;
}
.group_360_question + .group_360_question{
  margin: 40px 0 0;
}
.group_360_question .wrap_input{
  align-items: baseline;
}
.group_360_question .number{
  color: #7857A7;
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
}
.group_360_question .number:after{
  counter-increment: count;
  content: counter(count);
}
[class*="list_form"][class*="360"][class*="confirm"] .li_target .total{
  font: 600 14px/1em 'noto sans japanese' , sans-serif;
  margin: 16px 0 0;
}
[class*="list_form"][class*="360"][class*="confirm"] .li_target .total span{
  color: #7857A7;
  font: bold 20px/1em 'Roboto','noto sans japanese',sans-serif;
  padding: 0 4px;
}

@media screen and (max-width: 767px){
  [class*="list_form"][class*="360"][class*="confirm"] .li_title .answer{
    font-size: 20px;
  }
  .group_360_question > .ttl{
    font-size: 16px;
    margin: 0 0 10px;
  }
}
@media screen and (max-width: 480px){
  [class*="list_form"][class*="360"][class*="confirm"] .li_title .answer{
    font-size: 17px;
  }
  .group_360_question > .ttl{
    font-size: 14px;
  }
  .group_360_question .number{
    font-size: 16px;
  }
}

/* 宣誓内容 */
.area_360_agreement{
  margin: 0 auto;
  width: 100%;
}
.area_360_agreement label{
  font: 600 13px/1.3em 'noto sans japanese' , sans-serif;
}
.area_360_agreement .wrap_checkbox{
  align-items: flex-start;
  justify-content: flex-end;
}
.area_360_agreement .wrap_checkbox label:after{
  background: #7857A7 url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_check_white.svg") no-repeat center center;
  border-color: #7857A7;
}

@media screen and (max-width: 480px){
  .area_360_agreement label{
    font-size: 12px;
  }
}

/* フット */
.foot_cnt_360{
  border-top: 1px solid #eee;
  padding: 30px 0 0;
}
[class*="area_cnt_"][class*="360"] .foot_cnt_360 .btnarea_step{
  border: none;
  margin-top: 0;
}
.foot_cnt_360 [class*="area_note_"][class*="right"]{
  margin: 4px 0 0;
}
[class*="area_note_"][class*="right"]{
  text-align: right;

}
[class*="area_note_"][class*="right"] .note{
  color: #C1C5D3;
  font: 500 12px/1em 'noto sans japanese' , sans-serif;
}

/* ————————————————————————————————————————————————————————————
/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 アンケート作成 step4(アンケート作成完了)
———————————————————————————————————————————————————————————— */
.body_cnt_360.complete{
  display: flex;
  flex-direction:column;
  align-items: center;
  max-width: 700px;
  margin: 60px auto;
}
.body_cnt_360.complete h1{
  font: 600 32px/1.4em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 40px;
}
.body_cnt_360.complete .description{
  font: 500 16px/1.5em 'noto sans japanese' , sans-serif;
}
.body_cnt_360.complete [class*="btnarea"]{
  margin: 50px 0 0;
}

@media screen and (max-width: 767px){
  .body_cnt_360.complete h1{
    font-size: 28px;
  }
  .body_cnt_360.complete .description{
    font-size: 14px;
  }
}
@media screen and (max-width: 480px){
  .body_cnt_360.complete{
    margin: 40px auto;
  }
  .body_cnt_360.complete h1{
    font-size: 24px;
    margin: 0 0 30px;
  }
  .body_cnt_360.complete .description{
    font-size: 13px;
  }
}


/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 アンケート回答 トップ
———————————————————————————————————————————————————————————— */
.answer_top .head_cnt_360{
  display: flex;
  flex-direction:column;
  align-items: center;
  border: none;
  padding: 0;
  margin: 0 0 30px;
}
.answer_top .head_cnt_360 .img {
  display: block;
  width: 60px;
  border-radius: 100px;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  margin: 0 0 8px;
}
.answer_top .head_cnt_360 .img:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 100%;
}
.answer_top .head_cnt_360 .name{
  font: 600 15px/1em 'noto sans japanese' , sans-serif;
}
.answer_top .head_cnt_360 .kana{
  color: #444;
  font: 400 11px/1em 'noto sans japanese' , sans-serif;
  margin: 4px 0 0;
}

/* body */
.answer_top .body_cnt_360{
  display: flex;
  flex-direction:column;
  align-items: center;
  max-width: 700px;
  margin: 0 auto;
}
.answer_top .body_cnt_360 h1{
  font: 600 32px/1.4em 'noto sans japanese' , sans-serif;
  text-align: center;
  letter-spacing: .06em;
  margin: 0 0 20px;
}
.answer_top .body_cnt_360 .description{
  font: 500 16px/1.5em 'noto sans japanese' , sans-serif;
}

@media screen and (max-width: 767px){
  .answer_top .body_cnt_360 h1{
    font-size: 28px;
  }
}
@media screen and (max-width: 480px){
  .answer_top .body_cnt_360 h1{
    font-size: 20px;
  }
  .answer_top .body_cnt_360 .description{
    font-size: 13px;
  }
}

/* 依頼文 */
.answer_top .area_request{
  margin: 30px 0 0;
}
.answer_top .area_request .ttl{
  font: 500 14px/1.5em 'noto sans japanese' , sans-serif;
  margin: 0 0 6px;
}
.answer_top .body_request{
  background: #f8f7f9;
  padding: 20px 30px;
  max-height: 240px;
  overflow-y: auto;
}
.answer_top .body_cnt_360 .body_request p{
  font: 400 13px/1.5em 'noto sans japanese' , sans-serif;
}

@media screen and (max-width: 480px){
  .answer_top .area_request .ttl{
    font-size: 12px;
  }
  .answer_top .body_request{
    padding: 20px;
    max-height: 220px;
  }
}

/*  */
.answer_top .body_cnt_360 .attention{
  color: #DD5176;
  font: 500 16px/1.5em 'noto sans japanese' , sans-serif;
  margin: 50px 0 0;
}
.answer_top .body_cnt_360 [class*="btnarea"]{
  margin: 50px 0 0;
}
.answer_top .body_cnt_360 [class*="btn_"][class*="gray"]{
  border-color: #E5E6EA;
  background: #E5E6EA;
}

@media screen and (max-width: 480px){
  .answer_top .body_cnt_360 .attention{
    font-size: 13px;
    margin: 30px 0 0;
  }
}


/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 アンケート回答 STEP1(アンケート入力)
———————————————————————————————————————————————————————————— */
[class*="body_cnt_"][class*="360"][class*="answer"] > article > .ttl{
  font: 600 16px/1.4em 'noto sans japanese' , sans-serif;
  margin: 0 0 30px;
}
[class*="body_cnt_"][class*="360"][class*="answer"] > article + article{
  margin: 30px 0 0;
}
@media screen and (max-width: 560px){
  [class*="body_cnt_"][class*="360"][class*="answer"] > article > .ttl{
    font-size: 14px;
  }
}

/* リスト */
.list_360_answer{
  counter-reset: count02;
}
.list_360_answer > li{
  display: flex;
}
.list_360_answer > li + li{
  margin: 40px 0 0;
}

@media screen and (max-width: 480px){
  .list_360_answer > li + li{
    margin: 30px 0 0;
  }
}
@media screen and (max-width: 767px){
  .list_360_answer > li {
    flex-direction: column;
  }
}

/* リスト_ヘッド */
.head_list_360_answer{
  flex: 0 0 70px;
}
.head_list_360_answer .ttl{
  color: #7857A7;
  font: 900 22px/1em 'Roboto','noto sans japanese',sans-serif;
}
.head_list_360_answer .ttl:after{
  counter-increment: count02;
  content: counter(count02);
}

@media screen and (max-width: 767px){
  .head_list_360_answer{
    flex: 0 0 60px;
  }
  .head_list_360_answer .ttl{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  .head_list_360_answer{
    flex: 0 0 56px;
  }
  .head_list_360_answer .ttl{
    font-size: 16px;
  }
}

/* リスト_ボディ */
.body_list_360_answer{
  flex: 1 1 auto;
  min-width: 10px;
}
.body_list_360_answer > .ttl{
  font: 500 18px/1.3em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 16px;
}
.body_list_360_answer .wrap_radio.tab input[type="radio"] + label {
  width: calc((100% / 9) - 5px);
  padding: 0;
}
.body_list_360_answer .wrap_radio.tab input[type="radio"] + label:before,
.body_list_360_answer .wrap_radio.tab input[type="radio"] + label:after {
  width: 100%;
}
.body_list_360_answer .wrap_radio.tab input[type=radio]:checked + label:before,
.body_list_360_answer .wrap_radio.tab input[type=radio]:checked + label:after{
  border-color: #7857A7;
}
.body_list_360_answer .wrap_radio span {
  width: calc((100% / 5) - 0px);
  padding: 2px;
  background-color: #efefef;
  font: 600 10px/1.3em Roboto,'noto sans japanese',sans-serif;
  height: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
.body_list_360_answer .wrap_radio span:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
.body_list_360_answer .wrap_radio span:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
@media screen and (max-width: 767px){
  .body_list_360_answer .wrap_radio span {
    height: 35px;
  }
}

@media screen and (max-width: 767px){
  .body_list_360_answer > .ttl{
    font-size: 16px;
    margin: 0 0 10px;
  }
}
@media screen and (max-width: 480px){
  .body_list_360_answer > .ttl{
    font-size: 14px;
    margin: 0 0 8px;
  }
  .body_list_360_answer .wrap_radio.tab input[type="radio"] + label:before,
  .body_list_360_answer .wrap_radio.tab input[type="radio"] + label:after {
    width: 100%;
  }
  .body_list_360_answer .wrap_radio.tab input[type="radio"] + label{
    font-size: 15px;
  }
}



/* ————————————————————————————————————————————————————————————
 ! ■匿名360°評価 アンケート結果
———————————————————————————————————————————————————————————— */
.area_360_answer_detail {
  width: 100%;
}
.area_360_answer_detail > .head {
}
.area_360_answer_detail > .head .btnarea {
  margin: 0 0 20px;
}
.area_cnt_360_answer_detail{
  width: 100%;
}
.area_cnt_360_answer_detail > section{
  padding: 40px 0;
}
.area_cnt_360_answer_detail > section + section{
  border-top: 1px solid #eee;
}
@media screen and (max-width: 560px){
  .area_cnt_360_answer_detail > section{
    padding: 20px 0;
  }
}

/* ヘッド */
.area_360_answer_detail .head .text {
  margin: 0 0 16px;
}
.area_360_answer_detail .head .ttl {
  font: 600 28px/1.5em 'noto sans japanese',sans-serif;
  letter-spacing: .01em;
}
@media screen and (max-width: 767px){
  .area_360_answer_detail .head .ttl{
    font-size: 24px;
  }
}
@media screen and (max-width: 480px){
  .area_360_answer_detail .head .ttl{
    font-size: 18px;
  }
}

/* コンテンツ */
.area_360_answer_detail .cnt {
  margin: 30px 0 0;
  display: flex;
}

/* ! アンケート項目ブロック ——————————— */
.area_360_answer_detail_group + .area_360_answer_detail_group{
  margin: 70px 0 0;
}
.area_360_answer_detail_group > .ttl{
  font: 600 20px/1.4em 'noto sans japanese' , sans-serif;
  margin: 0 0 30px;
  padding: 10px 24px;
  background: #eee;
}

@media screen and (max-width: 560px){
  .area_360_answer_detail_group > .ttl{
    font-size: 16px;
    margin: 0 0 20px;
    padding: 8px 16px;
  }
}

/* グラフエリア ------*/
.area_360_answer_detail_group .img{
  display: flex;
  align-items: center;
  margin-bottom: 40px;
}
.area_360_answer_detail_group .img > div{
  width: 50%;
}
.area_360_answer_detail_group .img .area_chart{
  margin: 0 60px 0 0;
}

.area_360_answer_detail_group .graph{
  background: url(../img/sample/img_sample_chart_02.svg) no-repeat center center !important;
  background-size: contain !important;
  height: 280px;
  margin: 0 20px 0 0;
}
.area_360_answer_detail_group .graph:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 36%;
}

@media screen and (max-width: 560px){
  .area_360_answer_detail_group .img{
    margin-bottom: 30px;
  }
  .area_360_answer_detail_group .img .area_chart{
    margin: 0 20px 0 0;
  }
}
@media screen and (max-width: 480px){
  .area_360_answer_detail_group .img{
    display: block;
  }
  .area_360_answer_detail_group .img > div{
    width: 100%;
  }
  .area_360_answer_detail_group .img .area_chart{
    margin: 0;
  }
  .area_360_answer_detail_group canvas{
    max-width: 300px;
    max-height: 300px;
    margin: 0 auto;
  }
}

/* 総合点　平均点 */
.area_360_answer_detail_group .total{
  display: flex;
}
.area_360_answer_detail_group .total > div{
  background: #F9F9F9;
  padding: 20px 4px;
  width: 50%;
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
}
.area_360_answer_detail_group .total > div + div{
  margin: 0 0 0 4px;
}
.area_360_answer_detail_group .total .ttl{
  font: 500 15px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 8px;
}
.area_360_answer_detail_group .total .number{
  color: #7857A7;
  font: bold 30px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_360_answer_detail_group .total .max{
  font: 400 18px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}
@media screen and (max-width: 1080px){
  .area_360_answer_detail_group .total{
    flex-direction:column;
  }
  .area_360_answer_detail_group .total > div{
    width: 100%;
  }
  .area_360_answer_detail_group .total > div + div{
    margin: 4px 0 0;
  }
}
@media screen and (max-width: 767px){
  .area_360_answer_detail_group .total .ttl{
    font-size: 13px;
  }
  .area_360_answer_detail_group .total .number{
    font-size: 26px;
  }
}
@media screen and (max-width: 560px){
  .area_360_answer_detail_group .total{
  }
  .area_360_answer_detail_group .total .number{
    font-size: 22px;
  }
  .area_360_answer_detail_group .total .max{
    font-size: 15px;
  }
}
@media screen and (max-width: 480px){
  .area_360_answer_detail_group .total{
    flex-direction:row;
  }
  .area_360_answer_detail_group .total > div{
    padding: 10px 4px;
  }
  .area_360_answer_detail_group .total > div + div{
    margin: 0 0 0 4px;
  }
  .area_360_answer_detail_group .total{
    margin: 20px 0 0;
    text-align: center;
  }
}

/* アンケート項目エリア ------*/
/*
.layout_list_gap{
  display: flex;
  flex-wrap: wrap;
  counter-reset: count03;
  margin: 0 -50px;
}
.layout_list_gap > div{
  width: 50%;
  padding: 0 50px;
}

@media screen and (max-width: 1000px){
  .layout_list_gap{
    margin: 0 -30px;
  }
  .layout_list_gap > div{
    padding: 0 30px;
  }
}

@media screen and (max-width: 560px){
  .layout_list_gap{
    margin: 0;
  }
  .layout_list_gap > div{
    width: 100%;
    padding: 0;
  }
}
*/

/* ! アンケート項目リスト ——————————— */
.list_360_answer_detail{
  counter-reset: count03;
  margin: -10px -30px;
  -webkit-column-count: 2;
	-moz-column-count: 2;
	column-count: 2;
}
.list_360_answer_detail > li{
  padding: 10px 30px;
  display: inline-block;
  width: 100%;
}
.list_360_answer_detail article{
  display: flex;
  align-items: baseline;
  border-bottom: 1px solid #eee;
  padding: 0 0 8px;
}
.list_360_answer_detail .number{
/*   color: #7857A7; */
  font: bold 14px/1em 'Roboto','noto sans japanese',sans-serif;
  flex: 0 0 50px;
}
.list_360_answer_detail .number:after{
  counter-increment: count03;
  content: counter(count03);
}
.list_360_answer_detail .ttl{
  font: 500 13px/1.3em 'Roboto','noto sans japanese',sans-serif;
  text-align: left;
  flex: 1 1 auto;
  min-width: 10px;
}
.list_360_answer_detail .score{
  margin: 0 0 0 10px;
  color: #7857A7;
  font: bold 18px/1em 'Roboto','noto sans japanese',sans-serif;
  flex: 0 0 30px;
}

@media screen and (max-width: 860px){
  .list_360_answer_detail{
    -webkit-column-count: 1;
    -moz-column-count: 1;
    column-count: 1;
    margin: -10px 0;
  }
  .list_360_answer_detail > li{
    padding: 10px;
  }
}
@media screen and (max-width: 480px){
  .list_360_answer_detail > li{
    padding: 8px 0;
  }
  .list_360_answer_detail article{
    padding: 0 0 6px;
  }
}

/* アンケート削除*/
.area_enquete_delete [class*="button_"][class*="red"]{
  font: 600 13px/1em 'noto sans japanese' , sans-serif;
}

/* 結果表示できません*/
.area_undisplayed_360{
  color: #fff;
  height: 460px;
  background: #9A7DBD url(../img/img_undisplayed_360.svg) no-repeat center center;
  background-size: 56%;
  border-radius: 5px;
  padding: 16px;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
}
.area_undisplayed_360 .ttl{
  font: 600 24px/1.4em 'noto sans japanese' , sans-serif;
  margin: 0 0 16px;
}
.area_undisplayed_360 .description{
  font: 300 15px/1.4em 'noto sans japanese' , sans-serif;
  text-align: center;
}
@media screen and (max-width: 560px){
  .area_undisplayed_360{
    height: 320px;
    background-size: 66%;
  }
  .area_undisplayed_360 .ttl{
    font-size: 20px;
    margin: 0 0 8px;
  }
  .area_undisplayed_360 .description{
    font-size: 13px;
  }
}
@media screen and (max-width: 420px){
  .area_undisplayed_360{
    height: 200px;
    background-size: 51%;
  }
  .area_undisplayed_360 .ttl{
    font-size: 18px;
  }
  .area_undisplayed_360 .description{
    text-align: left;
  }
}

/* ! aside 回答状況 ——————————— */
.area_resend_360{
  margin: 40px 0 0;
}
.area_resend_360 > div{
  display: flex;
  align-items: baseline;
}
.area_resend_360 > div + div{
  margin: 16px 0 0;
}
.area_resend_360 .ttl{
  font: 500 14px/1em 'noto sans japanese' , sans-serif;
}
.area_resend_360 .number{
  color: #7857A7;
  font: bold 20px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 auto;
}
.area_resend_360 .number span{
  font: bold 26px/1em 'Roboto','noto sans japanese',sans-serif;
}
.area_resend_360 [class*="btn_"]{
  padding: 0 16px;
}

@media screen and (max-width: 480px){
  .area_resend_360 .ttl{
    font-size: 14px;
  }
  .area_resend_360 .number{
    font-size: 18px;
  }
  .area_resend_360 .number span{
    font-size: 26px;
  }
}

@charset "UTF-8";

/* ! アンケート ————————————————————————————————————————————————————————————
  
■匿名360°評価 トップページ
■匿名360°評価 アンケート作成 step1
■匿名360°評価 アンケート作成 step3


/* ———————————————————————————————————————————————————————————— 
 ! ■匿名360°評価 トップページ 
———————————————————————————————————————————————————————————— */

/* ヘッド img ———————————————————— */
.area_main_layout_bdl_q .area_head_page{
  margin: 0;
}
.head_bdl_q{
  background:url(../img/head/img_top_360.webp) no-repeat center;
  background-size:cover;
  color: #fff;
  display: flex;
  flex-direction:column;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  margin: 0 0 50px;
  position: relative;
}
.head_bdl_q:before{
  content: "";
  display: block;
  width: 100%;
  padding-top: 250px;
}
.head_bdl_q:after{
  content: "";
  width: 300px;
  height: 200px;
  background: radial-gradient(ellipse farthest-side, rgba(30,61,88,.6), rgba(30,61,88,0));
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50% , -50%);
}
.head_bdl_q .ttl{
  font: 600 40px/1em 'noto sans japanese' , sans-serif;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50% , -50%);
  z-index: 1;
}
.head_bdl_q .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_origami_white.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 56px;
  height: 56px;
  display: inline-block;
  transform: translate(-10px , 10px);
}

@media screen and (max-width: 767px){
  .head_bdl_q{
    margin: 0 0 40px;
  }
  .head_bdl_q:before{
    padding-top: 200px;
  }
  .head_bdl_q .ttl{
    font-size: 32px;
  }
  .head_bdl_q .ttl:before{
    width: 44px;
    height: 44px;
  }
}
@media screen and (max-width: 480px){
  .head_bdl_q{
    margin: 0 0 24px;
  }
  .head_bdl_q:before{
    padding-top: 160px;
  }
  .head_bdl_q .ttl{
    font-size: 28px;
  }
  .head_bdl_q .ttl:before{
    width: 36px;
    height: 36px;
  }
}

/* コンテンツ ———————————————————— */
.body_bdl_q > .ttl{
  color: #1E3D58;
  font: 600 28px/1.5em 'noto sans japanese' , sans-serif;
  margin: 0 0 40px;
  text-align: center;
}
.body_bdl_q > .description{
  color: #888;
  font: 300 14px/1.6em 'noto sans japanese' , sans-serif;
  max-width: 800px;
  margin: 0 auto;
}

@media screen and (max-width: 767px){
  .body_bdl_q > .ttl{
    font-size: 24px;
    margin: 0 0 32px;
  }
}
@media screen and (max-width: 480px){
  .body_bdl_q > .ttl{
    font-size: 18px;
    margin: 0 0 20px;
  }
  .body_bdl_q > .description{
    font-size: 13px;
  }
}

/* 特徴  -----------*/
.area_bdl_q_feature{
  margin: 70px 0 0;
}

@media screen and (max-width: 767px){
  .area_bdl_q_feature{
    margin: 50px 0 0;
  }
}
@media screen and (max-width: 480px){
  .area_bdl_q_feature{
    margin: 40px 0 0;
  }
}

/* リスト */
.list_bdl_q_feature{
  display: flex;
  flex-wrap: wrap;
  counter-reset: step;
}
.list_bdl_q_feature > li{
  width: 33.3333%;
  display: flex;
  flex-direction:column;
  align-items: center;
  padding: 0 50px;
}

@media screen and (max-width: 1280px){
  .list_bdl_q_feature > li{
    padding: 0 30px;
  }
}
@media screen and (max-width: 1000px){
  .list_bdl_q_feature > li{
    padding: 0 20px;
  }
}
@media screen and (max-width: 767px){
  .list_bdl_q_feature > li{
    padding: 0 10px;
  }
}
@media screen and (max-width: 480px){
  .list_bdl_q_feature > li{
    width: 100%;
    padding: 0;
  }
  .list_bdl_q_feature > li + li{
    margin: 20px 0 0;
  }
  .list_bdl_q_feature article{
    display: flex;
  }
}

/* 画像 */
.list_bdl_q_feature .img{
  text-align: center;
  margin: 0 0 10px;
}
.list_bdl_q_feature img{
  vertical-align: bottom;
}

@media screen and (max-width: 480px){
  .list_bdl_q_feature .img{
    margin: 0 16px 0 0;
    flex: 0 0 60px;
  }
}

/* テキスト */
.list_bdl_q_feature .step{
  color: #1E3D58;
  text-align: center;
  margin: 0 0 14px;
}
.list_bdl_q_feature .step:before{
  content: "特徴";
  font: 300 16px/1.3em 'noto sans japanese' , sans-serif;
}
.list_bdl_q_feature .step:after{
  counter-increment: step;
  content: "0"counter(step);
  font: bold 22px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 4px;
}
.list_bdl_q_feature .ttl{
  font: 600 16px/1.3em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 16px;
}
.list_bdl_q_feature .description{
  color: #444;
  font: 400 13px/1.6em 'noto sans japanese' , sans-serif;
}

@media screen and (max-width: 480px){
  .list_bdl_q_feature .text{
    flex: 1 1 auto;
    min-width: 10px;
  }
  .list_bdl_q_feature .step{
    text-align: left;
    margin: 0 0 6px;
  }
  .list_bdl_q_feature .step:before{
    font-size: 13px;
  }
  .list_bdl_q_feature .step:after{
    font-size: 18px;
  }
  .list_bdl_q_feature .ttl{
    font-size: 15px;
    text-align: left;
    margin: 0 0 8px;
  }
}

/* 専門家エリア ----------- */
.area_bdl_q_consul{
  margin: 100px 0 0;
}
.area_bdl_q_consul .expert > .ttl{
  font: 600 24px/1.4em 'noto sans japanese' , sans-serif;
  margin: 0 0 40px;
  text-align: center;
}

@media screen and (max-width: 1000px){
  .area_bdl_q_consul{
    margin: 80px 0 0;
  }
  .area_bdl_q_consul .expert > .ttl{
    font-size: 20px;
    margin: 0 0 30px;
  }
}
@media screen and (max-width: 480px){
  .area_bdl_q_consul{
    margin: 50px 0 0;
  }
  .area_bdl_q_consul .expert > .ttl{
    font-size: 18px;
    margin: 0 0 20px;
  }
}

/* リスト */
[class*="list_bdl_q_expert"]{
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
[class*="list_bdl_q_expert"] > li{
  width: 50%;
  padding: 5px;
}
[class*="list_bdl_q_expert"] article{
  border:2px solid #1E3D58;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30px 10px;
  position: relative;
}
.list_bdl_q_expert article:before{
  content: "";
  background: #333 no-repeat center center !important;
  background-size: contain !important;
  width: 36px;
  height: 36px;
  position: absolute;
  top: 50%;
  left: 20px;
  transform: translateY(-50%);
}
[class*="list_bdl_q_expert"] article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
[class*="list_bdl_q_expert"] article p{
  color: #fff;
  font: 400 18px/1em 'noto sans japanese' , sans-serif;
}
[class*="list_bdl_q_expert"] article p strong{
  font-weight: 800;
}

@media screen and (max-width: 1000px){
  [class*="list_bdl_q_expert"] article{
    padding: 24px 10px;
  }
  [class*="list_bdl_q_expert"] article p{
    font-size: 16px;
  }
  .list_bdl_q_expert article:before{
    width: 30px;
    height: 30px;
    left: 10px;
  }
}
@media screen and (max-width: 767px){
  [class*="list_bdl_q_expert"] > li{
    width: 100%;
  }
}
@media screen and (max-width: 480px){
  [class*="list_bdl_q_expert"] {
    margin: -3px;
  }
  [class*="list_bdl_q_expert"] > li{
    padding: 3px;
  }
  [class*="list_bdl_q_expert"] article{
    padding: 16px 10px;
  }
  [class*="list_bdl_q_expert"] article p{
    font-size: 14px;
  }
  .list_bdl_q_expert article:before{
    width: 24px;
    height: 24px;
  }
}

/* 個別 */
[class*="list_bdl_q_expert"] .manda article{ border-color: #59A7E5;}
[class*="list_bdl_q_expert"] .account article{ border-color: #4E92CA;}
[class*="list_bdl_q_expert"] .social article{ border-color: #4685B8;}
[class*="list_bdl_q_expert"] .administrative article{ border-color: #407BAB;}
[class*="list_bdl_q_expert"] .capital article{ border-color: #356691;}
[class*="list_bdl_q_expert"] .manda article:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_shake_hands.svg") no-repeat center center !important; background-size: contain !important;}
[class*="list_bdl_q_expert"] .account article:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_calculator.svg") no-repeat center center !important; background-size: contain !important;}
[class*="list_bdl_q_expert"] .social article:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_social_insurance.svg") no-repeat center center !important; background-size: contain !important;}
[class*="list_bdl_q_expert"] .administrative article:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_legal.svg") no-repeat center center !important; background-size: contain !important;}
[class*="list_bdl_q_expert"] .capital article:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_venture_capital.svg") no-repeat center center !important; background-size: contain !important;}


/* 個別 */
[class*="list_bdl_q_expert"] .manda p{ color: #59A7E5;}
[class*="list_bdl_q_expert"] .account p{ color: #4E92CA;}
[class*="list_bdl_q_expert"] .social p{ color: #4685B8;}
[class*="list_bdl_q_expert"] .administrative p{ color: #407BAB;}
[class*="list_bdl_q_expert"] .capital p{ color: #356691;}


/* 専門コンサルタントエリア ----------- */
.area_bdl_q_consul .consultant{
  margin: 40px 0 0;
}
.area_bdl_q_consul .consultant > .ttl span{
  color: #1E3D58;
  font: 500 16px/1em 'noto sans japanese' , sans-serif;
  background: #fff;
  padding: 0 16px 0 34px;
}
.area_bdl_q_consul .consultant > .ttl strong{
  font-weight: 900;
}
.area_bdl_q_consul .consultant > .ttl{
  position: relative;
  z-index: 0;
  margin: 0 0 20px;
}
.area_bdl_q_consul .consultant > .ttl:before{
  content: "";
  background: #1E3D58 no-repeat center center !important;
  background-size: contain !important;
  width: 100%;
  height: 1px;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: -1;
}
.area_bdl_q_consul .consultant > .ttl:after{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_man_consul.svg") no-repeat center center !important;
  background-size: contain !important;
  width: 24px;
  height: 24px;
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

@media screen and (max-width: 480px){
  .area_bdl_q_consul .consultant{
    margin: 30px 0 0;
  }
  .area_bdl_q_consul .consultant > .ttl{
    margin: 0 0 14px;
  }
  .area_bdl_q_consul .consultant > .ttl span{
    font-size: 14px;
  }
  .area_bdl_q_consul .consultant > .ttl:after{
    width: 20px;
    height: 20px;
  }
}

/* リスト */
[class*="list_bdl_q_expert"][class*="consultant"] article{
  background: #fff;
  border: 2px solid #1E3D58;
}
[class*="list_bdl_q_expert"][class*="consultant"] article p{
  color: #1E3D58;
}


/* アサイド ———————————————————— */

[class*="area_consult"][class*="aside"] > .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 24px;
}

/* リスト 相談履歴*/
[class*="list_consult"][class*="history"] > li{
  border-top: 1px solid #eee;
}
[class*="list_consult"][class*="history"] > li:last-child{
  border-bottom: 1px solid #eee;
}
[class*="list_consult"][class*="history"] article{
  flex-direction:column;
  padding: 16px 0;
  position: relative;
}
[class*="list_consult"][class*="history"] article > a{
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
[class*="list_consult"][class*="history"] .ttl{
  font: 600 15px/1.4em 'noto sans japanese',sans-serif;
}
[class*="list_consult"][class*="history"] .category{
  color: #1E3D58;
  font: 600 12px/1em 'noto sans japanese' , sans-serif;
  margin: 2px 0 0;
}
[class*="list_consult"][class*="history"] .date{
  color: #999;
  font: 400 14px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 6px 0 0;
}


/* ———————————————————————————————————————————————————————————— 
 ! ■一括相談 step1 基本情報入力
———————————————————————————————————————————————————————————— */
.required .body_form_post_bdl_q .wrap_required input,
.required .body_form_post_bdl_q .wrap_required select {
  background: #fff;
}

.body_form_bdl_q small{
  color: #C1C5D3;
  font: 500 11px/1em 'noto sans japanese' , sans-serif;
  margin: 8px 0 0;
}

/* ! ボタンエリア ——————————— */
.area_cnt_post_bdl_q .btnarea_step [class*="btn_"][class*="darkblue"] {
  box-shadow:0 0 0 0;
}


/* ———————————————————————————————————————————————————————————— 
 ! ■一括相談 step3 入力内容確認
———————————————————————————————————————————————————————————— */
[class*="list_form"][class*="bdl_q"][class*="confirm"] .head_form_post_bdl_q{
  padding: 0;
}
[class*="list_form"][class*="bdl_q"][class*="confirm"] .ttl{
  font-weight: 600;
}


/* ———————————————————————————————————————————————————————————— 
 ! ■匿名360°評価 アンケート作成 step4(アンケート作成完了)
———————————————————————————————————————————————————————————— */
[class*="body_cnt_"][class*="bdl_q"][class*="complete"] [class*="btn_"]{
  box-shadow:0 0 0 0;
  width: 200px;
}











/**
 * simplemde v1.11.2
 * Copyright Next Step Webs, Inc.
 * @link https://github.com/NextStepWebs/simplemde-markdown-editor
 * @license MIT
 */
.CodeMirror{color:#000}.CodeMirror-lines{padding:4px 0}.CodeMirror pre{padding:0 4px}.CodeMirror-gutter-filler,.CodeMirror-scrollbar-filler{background-color:#fff}.CodeMirror-gutters{border-right:1px solid #ddd;background-color:#f7f7f7;white-space:nowrap}.CodeMirror-linenumber{padding:0 3px 0 5px;min-width:20px;text-align:right;color:#999;white-space:nowrap}.CodeMirror-guttermarker{color:#000}.CodeMirror-guttermarker-subtle{color:#999}.CodeMirror-cursor{border-left:1px solid #000;border-right:none;width:0}.CodeMirror div.CodeMirror-secondarycursor{border-left:1px solid silver}.cm-fat-cursor .CodeMirror-cursor{width:auto;border:0!important;background:#7e7}.cm-fat-cursor div.CodeMirror-cursors{z-index:1}.cm-animate-fat-cursor{width:auto;border:0;-webkit-animation:blink 1.06s steps(1) infinite;-moz-animation:blink 1.06s steps(1) infinite;animation:blink 1.06s steps(1) infinite;background-color:#7e7}@-moz-keyframes blink{50%{background-color:transparent}}@-webkit-keyframes blink{50%{background-color:transparent}}@keyframes blink{50%{background-color:transparent}}.cm-tab{display:inline-block;text-decoration:inherit}.CodeMirror-ruler{border-left:1px solid #ccc;position:absolute}.cm-s-default .cm-header{color:#00f}.cm-s-default .cm-quote{color:#090}.cm-negative{color:#d44}.cm-positive{color:#292}.cm-header,.cm-strong{font-weight:700}.cm-em{font-style:italic}.cm-link{text-decoration:underline}.cm-strikethrough{text-decoration:line-through}.cm-s-default .cm-keyword{color:#708}.cm-s-default .cm-atom{color:#219}.cm-s-default .cm-number{color:#164}.cm-s-default .cm-def{color:#00f}.cm-s-default .cm-variable-2{color:#05a}.cm-s-default .cm-variable-3{color:#085}.cm-s-default .cm-comment{color:#a50}.cm-s-default .cm-string{color:#a11}.cm-s-default .cm-string-2{color:#f50}.cm-s-default .cm-meta,.cm-s-default .cm-qualifier{color:#555}.cm-s-default .cm-builtin{color:#30a}.cm-s-default .cm-bracket{color:#997}.cm-s-default .cm-tag{color:#170}.cm-s-default .cm-attribute{color:#00c}.cm-s-default .cm-hr{color:#999}.cm-s-default .cm-link{color:#00c}.cm-invalidchar,.cm-s-default .cm-error{color:red}.CodeMirror-composing{border-bottom:2px solid}div.CodeMirror span.CodeMirror-matchingbracket{color:#0f0}div.CodeMirror span.CodeMirror-nonmatchingbracket{color:#f22}.CodeMirror-matchingtag{background:rgba(255,150,0,.3)}.CodeMirror-activeline-background{background:#e8f2ff}.CodeMirror{position:relative;overflow:hidden;background:#fff}.CodeMirror-scroll{overflow:scroll!important;margin-bottom:-30px;margin-right:-30px;padding-bottom:30px;height:100%;outline:0;position:relative}.CodeMirror-sizer{position:relative;border-right:30px solid transparent}.CodeMirror-gutter-filler,.CodeMirror-hscrollbar,.CodeMirror-scrollbar-filler,.CodeMirror-vscrollbar{position:absolute;z-index:6;display:none}.CodeMirror-vscrollbar{right:0;top:0;overflow-x:hidden;overflow-y:scroll}.CodeMirror-hscrollbar{bottom:0;left:0;overflow-y:hidden;overflow-x:scroll}.CodeMirror-scrollbar-filler{right:0;bottom:0}.CodeMirror-gutter-filler{left:0;bottom:0}.CodeMirror-gutters{position:absolute;left:0;top:0;min-height:100%;z-index:3}.CodeMirror-gutter{white-space:normal;height:100%;display:inline-block;vertical-align:top;margin-bottom:-30px}.CodeMirror-gutter-wrapper{position:absolute;z-index:4;background:0 0!important;border:none!important;-webkit-user-select:none;-moz-user-select:none;user-select:none}.CodeMirror-gutter-background{position:absolute;top:0;bottom:0;z-index:4}.CodeMirror-gutter-elt{position:absolute;cursor:default;z-index:4}.CodeMirror-lines{cursor:text;min-height:1px}.CodeMirror pre{-moz-border-radius:0;-webkit-border-radius:0;border-radius:0;border-width:0;background:0 0;font-family:inherit;font-size:inherit;margin:0;white-space:pre;word-wrap:normal;line-height:inherit;color:inherit;z-index:2;position:relative;overflow:visible;-webkit-tap-highlight-color:transparent;-webkit-font-variant-ligatures:none;font-variant-ligatures:none}.CodeMirror-wrap pre{word-wrap:break-word;white-space:pre-wrap;word-break:normal}.CodeMirror-linebackground{position:absolute;left:0;right:0;top:0;bottom:0;z-index:0}.CodeMirror-linewidget{position:relative;z-index:2;overflow:auto}.CodeMirror-code{outline:0}.CodeMirror-gutter,.CodeMirror-gutters,.CodeMirror-linenumber,.CodeMirror-scroll,.CodeMirror-sizer{-moz-box-sizing:content-box;box-sizing:content-box}.CodeMirror-measure{position:absolute;width:100%;height:0;overflow:hidden;visibility:hidden}.CodeMirror-cursor{position:absolute}.CodeMirror-measure pre{position:static}div.CodeMirror-cursors{visibility:hidden;position:relative;z-index:3}.CodeMirror-focused div.CodeMirror-cursors,div.CodeMirror-dragcursors{visibility:visible}.CodeMirror-selected{background:#d9d9d9}.CodeMirror-focused .CodeMirror-selected,.CodeMirror-line::selection,.CodeMirror-line>span::selection,.CodeMirror-line>span>span::selection{background:#d7d4f0}.CodeMirror-crosshair{cursor:crosshair}.CodeMirror-line::-moz-selection,.CodeMirror-line>span::-moz-selection,.CodeMirror-line>span>span::-moz-selection{background:#d7d4f0}.cm-searching{background:#ffa;background:rgba(255,255,0,.4)}.cm-force-border{padding-right:.1px}@media print{.CodeMirror div.CodeMirror-cursors{visibility:hidden}}.cm-tab-wrap-hack:after{content:''}span.CodeMirror-selectedtext{background:0 0}.CodeMirror{height:auto;min-height:300px;border:1px solid #ddd;border-bottom-left-radius:4px;border-bottom-right-radius:4px;padding:10px;font:inherit;z-index:1}.CodeMirror-scroll{min-height:300px}.CodeMirror-fullscreen{background:#fff;position:fixed!important;top:50px;left:0;right:0;bottom:0;height:auto;z-index:9}.CodeMirror-sided{width:50%!important}.editor-toolbar{position:relative;opacity:.6;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;-o-user-select:none;user-select:none;padding:0 10px;border-top:1px solid #bbb;border-left:1px solid #bbb;border-right:1px solid #bbb;border-top-left-radius:4px;border-top-right-radius:4px}.editor-toolbar:after,.editor-toolbar:before{display:block;content:' ';height:1px}.editor-toolbar:before{margin-bottom:8px}.editor-toolbar:after{margin-top:8px}.editor-toolbar:hover,.editor-wrapper input.title:focus,.editor-wrapper input.title:hover{opacity:.8}.editor-toolbar.fullscreen{width:100%;height:50px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;padding-top:10px;padding-bottom:10px;box-sizing:border-box;background:#fff;border:0;position:fixed;top:0;left:0;opacity:1;z-index:9}.editor-toolbar.fullscreen::before{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,1)),color-stop(100%,rgba(255,255,255,0)));background:-webkit-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-o-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);background:linear-gradient(to right,rgba(255,255,255,1) 0,rgba(255,255,255,0) 100%);position:fixed;top:0;left:0;margin:0;padding:0}.editor-toolbar.fullscreen::after{width:20px;height:50px;background:-moz-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-webkit-gradient(linear,left top,right top,color-stop(0,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,1)));background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-o-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:-ms-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,1) 100%);position:fixed;top:0;right:0;margin:0;padding:0}.editor-toolbar a{display:inline-block;text-align:center;text-decoration:none!important;color:#2c3e50!important;width:30px;height:30px;margin:0;border:1px solid transparent;border-radius:3px;cursor:pointer}.editor-toolbar a.active,.editor-toolbar a:hover{background:#fcfcfc;border-color:#95a5a6}.editor-toolbar a:before{line-height:30px}.editor-toolbar i.separator{display:inline-block;width:0;border-left:1px solid #d9d9d9;border-right:1px solid #fff;color:transparent;text-indent:-10px;margin:0 6px}.editor-toolbar a.fa-header-x:after{font-family:Arial,"Helvetica Neue",Helvetica,sans-serif;font-size:65%;vertical-align:text-bottom;position:relative;top:2px}.editor-toolbar a.fa-header-1:after{content:"1"}.editor-toolbar a.fa-header-2:after{content:"2"}.editor-toolbar a.fa-header-3:after{content:"3"}.editor-toolbar a.fa-header-bigger:after{content:"▲"}.editor-toolbar a.fa-header-smaller:after{content:"▼"}.editor-toolbar.disabled-for-preview a:not(.no-disable){pointer-events:none;background:#fff;border-color:transparent;text-shadow:inherit}@media only screen and (max-width:700px){.editor-toolbar a.no-mobile{display:none}}.editor-statusbar{padding:8px 10px;font-size:12px;color:#959694;text-align:right}.editor-statusbar span{display:inline-block;min-width:4em;margin-left:1em}.editor-preview,.editor-preview-side{padding:10px;background:#fafafa;overflow:auto;display:none;box-sizing:border-box}.editor-statusbar .lines:before{content:'lines: '}.editor-statusbar .words:before{content:'words: '}.editor-statusbar .characters:before{content:'characters: '}.editor-preview{position:absolute;width:100%;height:100%;top:0;left:0;z-index:7}.editor-preview-side{position:fixed;bottom:0;width:50%;top:50px;right:0;z-index:9;border:1px solid #ddd}.editor-preview-active,.editor-preview-active-side{display:block}.editor-preview-side>p,.editor-preview>p{margin-top:0}.editor-preview pre,.editor-preview-side pre{background:#eee;margin-bottom:10px}.editor-preview table td,.editor-preview table th,.editor-preview-side table td,.editor-preview-side table th{border:1px solid #ddd;padding:5px}.CodeMirror .CodeMirror-code .cm-tag{color:#63a35c}.CodeMirror .CodeMirror-code .cm-attribute{color:#795da3}.CodeMirror .CodeMirror-code .cm-string{color:#183691}.CodeMirror .CodeMirror-selected{background:#d9d9d9}.CodeMirror .CodeMirror-code .cm-header-1{font-size:200%;line-height:200%}.CodeMirror .CodeMirror-code .cm-header-2{font-size:160%;line-height:160%}.CodeMirror .CodeMirror-code .cm-header-3{font-size:125%;line-height:125%}.CodeMirror .CodeMirror-code .cm-header-4{font-size:110%;line-height:110%}.CodeMirror .CodeMirror-code .cm-comment{background:rgba(0,0,0,.05);border-radius:2px}.CodeMirror .CodeMirror-code .cm-link{color:#7f8c8d}.CodeMirror .CodeMirror-code .cm-url{color:#aab2b3}.CodeMirror .CodeMirror-code .cm-strikethrough{text-decoration:line-through}.CodeMirror .CodeMirror-placeholder{opacity:.5}.CodeMirror .cm-spell-error:not(.cm-url):not(.cm-comment):not(.cm-tag):not(.cm-word){background:rgba(255,0,0,.15)}
/*
 *  Remodal - v1.1.1
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

/* ==========================================================================
   Remodal's default mobile first theme
   ========================================================================== */

/* Default theme styles for the background */

.remodal-bg.remodal-is-opening,
.remodal-bg.remodal-is-opened {
  -webkit-filter: blur(3px);
  filter: blur(3px);
}

/* Default theme styles of the overlay */

.remodal-overlay {
  background: rgba(43, 46, 56, 0.7);
}

.remodal-overlay.remodal-is-opening,
.remodal-overlay.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal-overlay.remodal-is-opening {
  -webkit-animation-name: remodal-overlay-opening-keyframes;
  animation-name: remodal-overlay-opening-keyframes;
}

.remodal-overlay.remodal-is-closing {
  -webkit-animation-name: remodal-overlay-closing-keyframes;
  animation-name: remodal-overlay-closing-keyframes;
}

/* Default theme styles of the wrapper */

.remodal-wrapper {
/*   padding: 80px; */
}

/* Default theme styles of the modal dialog */

.remodal {
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 10px;
  padding: 80px 0;
}

.remodal.remodal-is-opening,
.remodal.remodal-is-closing {
  -webkit-animation-duration: 0.3s;
  animation-duration: 0.3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.remodal.remodal-is-opening {
  -webkit-animation-name: remodal-opening-keyframes;
  animation-name: remodal-opening-keyframes;
}

.remodal.remodal-is-closing {
  -webkit-animation-name: remodal-closing-keyframes;
  animation-name: remodal-closing-keyframes;
}

/* Vertical align of the modal dialog */

.remodal,
.remodal-wrapper:after {
  vertical-align: middle;
}

/* Close button */

.remodal-close {
  position: absolute;
  top: 0;
  right: 0;

  display: block;
  overflow: visible;

  width: 35px;
  height: 35px;
  margin: 0;
  padding: 0;

  cursor: pointer;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
  text-decoration: none;

  color: #95979c;
  border: 0;
  outline: 0;
  background: transparent;
}

@media screen and (min-width: 480px){
  .remodal-close:hover,
  .remodal-close:focus {
    color: #2b2e38;
  }
}

.remodal-close:before {
  font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif !important;
  font-size: 25px;
  line-height: 35px;

  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 35px;

  content: "\00d7";
  text-align: center;
}

/* Dialog buttons */

.remodal-confirm,
.remodal-cancel {
  font: inherit;

  display: inline-block;
  overflow: visible;

  min-width: 110px;
  margin: 0;
  padding: 12px 0;

  cursor: pointer;
  -webkit-transition: background 0.2s;
  transition: background 0.2s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;

  border: 0;
  outline: 0;
}

.remodal-confirm {
  color: #fff;
  background: #81c784;
}

@media screen and (min-width: 480px){
  .remodal-confirm:hover,
  .remodal-confirm:focus {
    background: #66bb6a;
  }
}

.remodal-cancel {
  color: #fff;
  background: #e57373;
}

@media screen and (min-width: 480px){
  .remodal-cancel:hover,
  .remodal-cancel:focus {
    background: #ef5350;
  }
}

/* Remove inner padding and border in Firefox 4+ for the button tag. */

.remodal-confirm::-moz-focus-inner,
.remodal-cancel::-moz-focus-inner,
.remodal-close::-moz-focus-inner {
  padding: 0;

  border: 0;
}

/* Keyframes
   ========================================================================== */

@-webkit-keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes remodal-opening-keyframes {
  from {
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    opacity: 0;
  }
  to {
    -webkit-transform: none;
    transform: none;

    opacity: 1;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@keyframes remodal-closing-keyframes {
  from {
    -webkit-transform: scale(1);
    transform: scale(1);

    opacity: 1;
  }
  to {
    -webkit-transform: scale(0.95);
    transform: scale(0.95);

    opacity: 0;

    -webkit-filter: blur(0);
    filter: blur(0);
  }
}

@-webkit-keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes remodal-overlay-opening-keyframes {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes remodal-overlay-closing-keyframes {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

/* Media queries
   ========================================================================== */


@media only screen and (min-width: 641px) {
  .remodal {
    max-width: 700px;
  }
  .remodal.wide {
    max-width: 900px;
  }
  .remodal.min {
    max-width: 600px;
  }
}


.remodal_560 {
  max-width: 560px;
}
.remodal_1380{
  max-width: 1380px;
}

/* IE8
   ========================================================================== */

.lt-ie9 .remodal-overlay {
  background: #2b2e38;
}

.lt-ie9 .remodal {
  width: 700px;
}


/* ! モーダルの中身 ———————————————————————————————————————————————————————————— */
.area_modal {
  text-align: left;
  background: #fff;
  padding: 50px;
  border-radius: 10px;
  box-shadow: 0px 0px 1px 0px rgba(0,0,0,.3);
  position: relative;
}

@media screen and (max-width: 767px){
  .area_modal {
    padding: 40px;
  }
}
@media screen and (max-width: 560px){
  .area_modal {
    padding: 40px 20px;
  }
}


/* ! ヘッド —————————————————————————————— */
.modal_head {
  margin: 0 0 30px;
}
.modal_head [class*="text"] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.modal_head .ttl {
  font: 400 28px/1.3em 'noto sans japanese',sans-serif;
  text-align: center;
}
.modal_head .ttl_sub {
  font: 500 16px/1.4em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0;
}
.modal_head .ttl_sub.min {
  font-size: 14px;
}
.modal_head .ttl_sub small{
  color: #999;
  font-weight: 300;
}
.modal_head .description {
  color: #aaa;
  font: 300 14px/1.7em 'noto sans japanese',sans-serif;
  margin: 12px 0 0;
}
@media screen and (max-width: 767px){
  .modal_head .ttl{
    font-size: 24px;
  }
}
@media screen and (max-width: 560px){
  .modal_head {
    margin: 0 0 20px;
  }
  .modal_head .ttl{
    font-size: 20px;
  }
  .modal_head .description{
    font-size: 13px;
  }
}


.modal_cnt > .text {
    padding: 20px 0 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.modal_cnt > .text .ttl {
  font: 600 20px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 20px;
}
.wrap_list_form > article + article {
  margin: 30px 0 0;
}
.wrap_list_form > article > .ttl {
  font: 500 16px/1em 'noto sans japanese';
  margin: 0 0 20px;
  background: #eee;
  padding: 8px;
}

/* ! カレンダーのスタイル() ———————————————————————————————————————— */
.wrap_calendar .ui-widget.ui-widget-content {
  box-shadow: none;
  border: 1px solid #E5E6EA;
}
@media screen and (max-width: 480px){
  .wrap_calendar {
    flex-wrap: wrap;
  }
  .wrap_calendar .ui-widget.ui-widget-content {
    margin-top: 5px;
  }
}



/* ! フット ———————————————————————————————————————————————————————————— */
.modal_foot{
  margin: 30px 0 0;
}
.modal_foot [class*="btn_"] + [class*="btn_"]{
  margin: 0 0 0 10px;
}
@media screen and (max-width: 560px){
  .remodal [class*="btn_"]{
    height: 44px;
  }
  .modal_foot [class*="btn_"] + [class*="btn_"]{
    margin: 10px 0 0;
  }
}

/* ! ボタン —————————————————————————————— */
.area_modal [class*="btnarea"] {
  margin: -2px;
  margin-top: 40px;
}
[class*="btn_"][class*="modal"] {
  height: 40px;
  display: flex;
  align-items: center;
  background: #7f8eca;
  border-color: #7f8eca;
  box-shadow: none;
  margin: 2px;
  width: auto;
  flex: 0 1 auto;
  min-width: 10px;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="modal"]:hover{
    color: #7f8eca;
    background: #fff;
  }
}
[class*="btn_"][class*="modal"][class*="line"] {
  color: #aaa;
  background: transparent;
  border-color: #aaa;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="modal"][class*="line"]:hover{
    color: #777;
    background: transparent;
    border-color: #777;
  }
}
[class*="btn_"][class*="modal"][class*="blue"] {
  border-color: #25ADE0;
  background: #25ADE0;
}
[class*="btn_"][class*="modal"][class*="purple"]{
  background: #7857A7;
  border-color: #7857A7;
}
@media screen and (min-width: 480px){
  [class*="btn_"][class*="modal"][class*="purple"]:hover{ background: #fff;color: #7857A7;}
}

/* サイズ */
[class*="btn_"][class*="modal"][class*="thick"]{ height: 60px;}

[class*="btn_"][class*="modal"][class*="240"]{ width: 240px;}
[class*="btn_"][class*="modal"][class*="160"]{ width: 160px;}

@media screen and (max-width: 560px){
  .area_modal [class*="btnarea"]{
    flex-direction:column-reverse;
    align-items: center;
    margin-top: 30px;
  }
  [class*="btn_"][class*="modal"][class*="thick"]{ height: 40px;}
  .area_modal [class*="btn_"]{
    width: 100% !important;
  }
}

/* ! 共有するデジタルコンテンツ ———————————————————————————————————————————————————————————— */
[class*="list_cnt"].list_cnt_modal > li + li {
  margin: 5px 0 0;
  border-top: none;
}
[class*="list_cnt"].list_cnt_modal label {
  margin: 0;
  width: 100%;
  height: auto;
  padding: 0;
}
[class*="list_cnt"].list_cnt_modal article {
  width: 100%;
  border: 1px solid #E5E6EA;
  padding: 20px 20px 20px 40px;
  border-radius: 5px;
  pointer-events: none;
}
[class*="list_cnt"].list_cnt_modal .wrap_radio label:before,
[class*="list_cnt"].list_cnt_modal .wrap_radio label:after {
  left: 10px;
  z-index: 1;
}

/* ! このコンテンツに出品する ———————————————————————————————————————————————————————————— */
[class*="list_cnt"].list_cnt_modal.book article {
  padding: 24px 24px 24px 40px;
}
.modal_exhibit_contents .area_new .ttl{
  font: 600 13px/1em 'noto sans japanese',sans-serif;
  text-align: center;
}
.modal_exhibit_contents .area_new{
  background: #f3f3f3;
  margin: 0 -50px -50px;
  padding: 40px 0;
  border-radius: 0 0 10px 10px;
}
.modal_exhibit_contents .area_new [class*="btnarea"]{
  margin: 10px 0 0;
}
.modal_exhibit_contents .area_new [class*="btn_"]{
  max-width: 300px;
}
.modal_exhibit_contents form{
  margin: 0 0 40px;
}
.modal_exhibit_contents input[class*="btn_"]{
  font: 500 14px/1em 'noto sans japanese' , sans-serif;
  padding: 0 24px;
}
.modal_exhibit_contents [class*="list_cnt"].min .tpl_price{
  justify-content: flex-end;
}
@media screen and (max-width: 820px){
  .modal_exhibit_contents [class*="list_cnt"].min .tpl_price{
    text-align: left;
  }
}
@media screen and (max-width: 767px){
  .modal_exhibit_contents .area_new{
    margin: 0 -40px -50px;
  }
}
@media screen and (max-width: 560px){
  .modal_exhibit_contents .area_new{
    margin: 0 -20px -40px;
  }
}

/* 選択された表示 */
[class*="list_cnt"].list_cnt_modal input[type=radio]:checked + label article {
  border-color: #7f8eca;
}





/* ! アイキャッチを選択 ———————————————————————————————————————————————————————————— */
/* リスト */
.list_eyecatch {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list_eyecatch > li {
  width: 12.5%;
  padding: 5px;
}
.list_eyecatch > li > article {
  position: relative;
}
.list_eyecatch .wrap_radio label {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
.list_eyecatch .wrap_radio label:before,
.list_eyecatch .wrap_radio label:after {
  border-radius: 0;
  width: 100%;
  height: 100%;
  border: none;
  transform: none;
  background: transparent;
}
.list_eyecatch .wrap_radio label:before {
  display: block;
  position: relative;
  top: 0;
  left: 0;
  padding-top: 100%;
}
.list_eyecatch .wrap_radio label:after {
  background: rgba(81,201,109,.5) url(../img/shape/ico_check_white.svg) no-repeat center center;
  background-size: 40px 40px !important;
  top: 0;
  left: 0;
}
@media screen and (max-width: 1180px){
  .list_eyecatch > li {
    width: 16.6666%;
  }
}
@media screen and (max-width: 860px){
  .list_eyecatch > li {
    width: 25%;
  }
}
@media screen and (max-width: 560px){
  .list_eyecatch > li {
    width: 33.3333%;
  }
}

/* ファイルアップロード */
.list_eyecatch .wrap_file {
  width: 100%;
}
.list_eyecatch .wrap_file:before {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
/*
.list_eyecatch .wrap_file:after {
  content: "";
  display: block;
  width: 100%;
  height: auto;
  padding-top: 100%;
}
*/
.list_eyecatch .wrap_file input[type="file"] {
  width: 100%;
  height: 100%;
}
.list_eyecatch .file_preview {
  width: 100%;
  background: #ccc;
  border-radius: 0;
  vertical-align: bottom;
}



/* モーダル内の検索フィルター */
.area_filter_modal {
  background: #E5E6EA;
  padding: 10px;
  border-radius: 5px;
}
.area_filter_modal input:not([type="submit"]),
.area_filter_modal select {
  color: #aaa;
  height: 36px;
  padding: 0 12px 0;
}
.area_filter_modal [class*="btn_"] {
  height: 36px;
  padding: 0;
}

/* 類似会社検索 */
.area_filter_modal.company [class*="wrap_input_"][class*="60"]{
  flex: 0 0 60px;
}
.area_filter_modal.company [class*="wrap_input_"][class*="160"]{
  flex: 0 0 160px;
}
@media screen and (max-width: 767px){
  .area_filter_modal.company > .wrap_input{
    display: block;
  }
  .area_filter_modal.company [class*="wrap_input_"]{
    max-width: none;
  }
  .area_filter_modal.company [class*="unit_min"]{
    padding: 2px;
  }
}

/* 会社リスト */
.modal_select_company [class*="area_scroll"] {
  max-height: 400px;
  margin-top: 20px;
}


.list_company > li {
  padding: 8px 0;
}
.list_company > li + li {
  border-top: 1px dotted #E5E6EA;
}
.list_company article {
  display: flex;
  align-items: center;
}
.list_company p {
  font: 500 16px/1.3em 'noto sans japanese',sans-serif;
}
.list_company p span {
  font: 300 14px/1em 'noto sans japanese',sans-serif;
  display:inline-block;
  margin: 0 0 0 4px;
}
.list_company [class*="btnarea"] {
  margin: 0 0 0 auto;
}
.list_company [class*="btn_"] {
  height: 24px;
}
.list_company [class*="btn_"].selected,
.list_company [class*="btn_"].disable {
  background: #E5E6EA;
  border-color: #E5E6EA;
  pointer-events: none;
}
@media screen and (max-width: 767px){
  .list_company p{
    font-size: 14px;
    margin: 0 8px 0 0;
  }
  .list_company p span{
    font-size: 12px;
  }
}
@media screen and (max-width: 640px){
  .list_company [class*="btn_"]{
    padding: 0 10px;
    font-size: 12px;
  }
}

/* 検索結果が1件もない場合 */
.list_company .no_result p {
  color: #666;
  font: 500 13px/1em 'noto sans japanese',sans-serif;
  border: 1px dotted #ccc;
  padding: 20px;
  display: flex;
  justify-content: center;
}


/* ! ============================================================
　会員登録誘致
============================================================ */
.modal_register_attract .area_modal {
  padding: 80px;
  border-radius: 0;
  background: #FFF url(../img/bg_geometry.jpg) no-repeat center center;
  background-size: 1160px;
  background-position-y: top;
}
@media screen and (max-width: 600px){
  .modal_register_attract .area_modal {
    padding: 60px 20px;
  }
}
@media screen and (max-width: 480px){
  .modal_register_attract .area_modal {
    padding: 30px 20px;
  }
}

/* ! ヘッド —————————————————————————————— */
.head_modal_register_attract .ttl {
  font: 300 15px/1.4em 'noto sans japanese',sans-serif;
  text-align: center;
}

/* ! ボディ —————————————————————————————— */
.body_modal_register_attract {
  padding: 0 0 30px;
  position: relative;
}
.body_modal_register_attract .img {
  display: flex;
  flex-direction: column;
  align-items: center
}
.body_modal_register_attract img {
  vertical-align: bottom;
}
.body_modal_register_attract .logo {
  margin: 20px 0 0;
  height: 36px;
}
.body_modal_register_attract .copy {
  margin: 30px 0 0;
  height: 160px;
}
.body_modal_register_attract .description {
  color: #000;
  font: 300 15px/1.5em 'noto sans japanese',sans-serif;
  text-align: center;
  margin: 10px 0;
}
@media screen and (max-width: 480px){
  .body_modal_register_attract {
    margin: 20px 0 0;
    padding: 0 0 10px;
  }
  .body_modal_register_attract .logo {
    height: 28px;
    margin: 10px 0 0;
  }
  .body_modal_register_attract .copy {
    margin: 20px 0 0;
    height: 120px;
  }
  .body_modal_register_attract .description  {
    margin: 15px 0;
  }
}

.body_modal_register_attract .ttl {
  font: 900 36px/1.2em 'noto sans japanese',sans-serif;
  text-align: center;
  color: #000;
  margin: 30px 0 0;
}
.body_modal_register_attract .sub_ttl {
  color: #43a65b;
  font: 900 22px/1.2em 'noto sans japanese',sans-serif;
  text-align: center;
  margin: 10px 0 0;
}
@media screen and (max-width: 480px){
  .body_modal_register_attract .ttl {
    font-size: 28px;
  }
  .body_modal_register_attract .sub_ttl {
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  .modal_register_attract_for_book_sell .ttl {
    font-size: 26px;
  }
}

/* アイコン */
.body_modal_register_attract:before,
.body_modal_register_attract:after {
/*   content: ""; */
  display: block;
  width: 120px;
  height: 180px;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  bottom: 40px;
}
.body_modal_register_attract:before {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_register_attract_01.svg");
  left: -50px;
}
.body_modal_register_attract:after {
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_register_attract_02.svg");
  right: -50px;
}
@media screen and (max-width: 600px){
  .body_modal_register_attract:before {
    left: -15px;
  }
  .body_modal_register_attract:after {
    right: -15px;
  }
}
@media screen and (max-width: 480px){
  .body_modal_register_attract:before,
  .body_modal_register_attract:after {
    width: 90px;
    height: 120px;
    border: 100px;
    bottom: 60px;
    opacity: .4;
  }
}


/* ボタンエリア */
.body_modal_register_attract .area_modal .btnarea {
  margin: 40px 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
.body_modal_register_attract [class*="btn_"] {
  font: 600 22px/1em 'noto sans japanese',sans-serif;
  width: 100%;
  max-width: 360px;
  height: 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.body_modal_register_attract [class*="btn_"]:after{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/img_register_attract.svg") no-repeat center bottom !important;
  background-size: contain !important;
  width: 34%;
  height: 75px;
  position: absolute;
  bottom: calc(100% - 28px);
  left: -5%;
}
.body_modal_register_attract [class*="btn_"]:before {
  content: attr(data-ttl)"";
  font: 400 13px/1em 'Roboto','noto sans japanese',sans-serif;
  display:inline-block;
  margin: -5px 0 5px;
}
.body_modal_register_attract [class*="button"] {
  color: #51CD6E;
  font-weight: 600;
  font-size: 14px;
  margin: 30px 0 0;
}
@media screen and (max-width: 480px){
  .modal_register_attract .body_modal_register_attract .btnarea {
    margin: 30px 0 0;
  }
  .body_modal_register_attract [class*="btn_"] {
    font-size: 18px;
    height: 60px;
  }
  .body_modal_register_attract [class*="button"] {
    font-size: 12px;
    margin: 15px 0 0;
  }
}
@media screen and (max-width: 400px){
  .body_modal_register_attract [class*="btn_"]:after{
    left: -3%;
  }
}

/* ! ============================================================
　投稿内容シェア
============================================================ */
.head_modal_posted{
  text-align: center;
  margin: 0 0 30px;
}
.head_modal_posted .ttl{
  font: 600 26px/1.5em 'noto sans japanese' , sans-serif;
  margin: 0 0 16px;
}
.head_modal_posted .description{
  font: 300 15px/1.5em 'noto sans japanese',sans-serif;
}

.body_modal_posted .list_action_sns{
  justify-content: center;
  margin: 30px 0 0;
}

/* 投稿した内容 */
.area_posted_article{
  background: #F7F9F9;
  border: 1px solid #eee;
  padding: 16px;
  position: relative;
}
.area_posted_article > a{
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}
.area_posted_article .ttl{
  font: 600 15px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: relative;
  padding: 0 0 0 24px;
}
.area_posted_article .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_cgm.svg") no-repeat center center;
  background-size: contain !important;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
}
.area_posted_article.column .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_content.svg") no-repeat center center;}
.area_posted_article.store .ttl:before{ background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_nav_market.svg") no-repeat center center;}
.area_posted_article .description{
  font: 300 14px/1em 'noto sans japanese',sans-serif;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ! ============================================================
　契約書dl後
============================================================ */


.area_related_dl_format + .area_related_dl_format{
  margin: 60px 0 0;
}
.area_related_dl_format > .ttl {
  font: 400 20px/1.5em 'noto sans japanese';
  position: relative;
  padding: 0 0 0 10px;
  margin: 0 0 6px;
}
.area_related_dl_format > .ttl:before{
  content: "";
  background: #37BAA6;
  width: 3px;
  height: 16px;
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
}
.area_related_dl_format.community > .ttl:before{
  background: #f98623;
}
@media screen and (max-width: 480px){
  .area_related_dl_format > .ttl{
    font-size: 18px;
  }
}

/* 投稿リスト */
.body_modal_dl_format .list_fmt.min article{
  padding: 10px 0;
}
.body_modal_dl_format .list_fmt.min .ttl{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}
.body_modal_dl_format .list_fmt.min .description{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.body_modal_dl_format [class*=list_community].min article {
  padding: 10px 0 10px 28px;
}

/* ボタン */
.body_modal_dl_format [class*=btnarea_]{
  margin-top: 20px;
}
.body_modal_dl_format [class*=btn_]{
  height: 36px;
  min-width: 200px;
  background: #37BAA6;
  border-color: #37BAA6;
}
.body_modal_dl_format [class*=btn_][class*=community]{
  background: #f98623;
  border-color: #f98623;
}
@media screen and (min-width: 480px){
  .body_modal_dl_format [class*=btnarea_]{
    margin-top:10px;
  }
  .body_modal_dl_format [class*=btn_]:hover{
    background: #fff;
    color: #37BAA6;
  }
  .body_modal_dl_format [class*=btn_][class*=community]:hover{
    color: #f98623;
  }
}

/* QAで質問をしませんか？ */
.area_attract_community{
  display: flex;
  flex-direction:column;
  align-items: flex-start;
  justify-content: center;
  margin: 20px 0 30px;
}
.area_attract_community .ttl{
  font: 600 18px/1.5em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
  padding: 0 0 0 36px;
  position: relative;
}
.area_attract_community .ttl:before{
  content: "";
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/shape/ico_cgm.svg") no-repeat center center;
  background-size: contain !important;
  width: 26px;
  height: 26px;
  position: absolute;
  left: 0;
  top: 2px;
}
.area_attract_community .description{
  font: 300 14px/1.5em 'noto sans japanese',sans-serif;
}
.area_attract_community [class*=btnarea_]{
  width: 100%;
}
.area_attract_community [class*=btn_]{
  color: #f98623;
  background: #fff;
  border-color: #f98623;
  width: auto;
}
.area_attract_community [class*=btn_]:hover{
  background: #f98623;
  color: #fff;
}
@media screen and (max-width: 480px){
  .area_attract_community .ttl{
    font-size: 16px;
    padding: 0 0 0 30px;
  }
}

/* ! ============================================================
　SMS未認証
============================================================ */
.modal_cnt_nosms{
  max-width: 460px;
  margin: 0 auto;
}
.modal_cnt_nosms .ttl{
  font: 600 18px/1.5em 'noto sans japanese' , sans-serif;
  margin: 0 0 40px;
  text-align: center;
}
.modal_cnt_nosms .description{
  font: 400 15px/1.6em 'noto sans japanese' , sans-serif;
}
.modal_cnt_nosms [class*="btn_"]{
  margin: 2px;
}
.modal_cnt_nosms [class*="btn_"][class*="green"] {
  width: 100%;
  max-width: 240px;
}
.modal_cnt_nosms [class*="btn_"][class*="lgoast_gray"]{
  background: #fff;
  color: #aaa;
}
@media screen and (min-width: 480px){
  .modal_cnt_nosms [class*="btn_"][class*="lgoast_gray"]:hover{
    background: #aaa;
    color: #fff;
  }
}
@media screen and (max-width: 560px){
  .modal_cnt_nosms .ttl{
    font-size: 16px;
    margin: 0 0 30px;
  }
  .modal_cnt_nosms .description{
    font-size: 13px;
  }
  .modal_cnt_nosms [class*="btn_"][class*="green"]{
    max-width: 100%;
  }
}


/* ! ============================================================
　投稿確認
============================================================ */
.remodal.modal_confirm_post{
  max-width: 500px;
}
.modal_confirm_post .area_modal{
  padding: 36px;
}
.modal_confirm_post .modal_head .ttl {
  font: 500 24px/1.3em 'noto sans japanese',sans-serif;
}
.modal_confirm_post .modal_head .ttl_sub{
  margin: 10px 0 0;
}
.modal_confirm_post .area_modal [class*="btnarea"] {
  margin-top: 30px;
}
@media screen and (max-width: 560px){
  .modal_confirm_post .area_modal{
    padding: 30px;
  }
  .modal_confirm_post .modal_head .ttl{
    font-size: 20px;
  }
  .modal_confirm_post .modal_head .ttl_sub{
    font-size: 14px;
  }
  .modal_confirm_post .modal_head .ttl_sub.min{
    font-size: 14px;
  }
  .modal_confirm_post .area_modal [class*="btnarea"] {
    margin-top: 20px;
  }
}
@media screen and (max-width: 480px){
  .modal_confirm_post .modal_head .ttl_sub.min{
    font-size: 12px;
  }
}

/* ! ==================================================
　有料会員登録誘致
================================================== */
.area_list_merit_paid {
  margin: 30px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list_merit_paid > li + li {
  margin: 16px 0 0;
}
.list_merit_paid p {
  font: 600 16px/1.3em 'noto sans japanese',sans-serif;
  padding: 0 0 0 24px;
  position: relative;
}
.list_merit_paid p:before {
  content: "";
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: #51C96D url(../img/shape/ico_check_white.svg);
  background-size: 12px 12px !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: 1px;
  left: 0;
}
.area_list_merit_paid [class*=button]{
  margin: 16px 0 0;
  text-decoration: underline;
}
@media screen and (max-width: 480px){
  .area_list_merit_paid {
    margin: 20px 0;
  }
  .list_merit_paid p {
    font-size: 14px;
  }
}

/* ! ==================================================
　職業と資格を選択して下さい
================================================== */
.area_register_profile {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.area_register_profile .img {
	padding: 20px 0 0;
}
.area_register_profile img {
	height: 180px;
}
.area_register_profile .text {
	margin: 20px 0 0;
}
.area_register_profile .copy {
  font: 600 20px/1.5em 'noto sans japanese',sans-serif;
}
.area_register_profile .btnarea {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}
.area_register_profile [class*="btn_"] {
	font: 600 16px/1em 'noto sans japanese',sans-serif;
	height: 60px;
	width: 100%;
	max-width: 360px;
}
.area_register_profile [class*="button_"] {
	margin: 20px 0 0;
}
@media screen and (max-width: 480px){
	.area_register_profile .img {
  	padding: 0;
	}
	.area_register_profile img {
  	height: 150px;
	}
	.area_register_profile .text {
  	margin: 10px 0 0;
	}
	.area_register_profile .copy {
  	font-size: 16px;
	}
}

/*
 *  Remodal - v1.1.1
 *  Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin with declarative configuration and hash tracking.
 *  http://vodkabears.github.io/remodal/
 *
 *  Made by Ilya Makarov
 *  Under MIT License
 */

/* ==========================================================================
   Remodal's necessary styles
   ========================================================================== */
   
  

/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;

  -ms-touch-action: none;
  touch-action: none;
}

/* Anti FOUC */

.remodal,
[data-remodal-id] {
  display: none;
}

/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;

  display: none;
}

/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  display: none;
  overflow: auto;

  text-align: center;

  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;

  height: 100%;
  margin-left: -0.05em;

  content: "";
}

/* Fix iPad, iPhone glitches */

.remodal-overlay,
.remodal-wrapper {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Necessary styles of the modal dialog */

.remodal {
  position: relative;

  outline: none;

  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

.remodal-is-initialized {
  /* Disable Anti-FOUC */
  display: inline-block;
  padding: 0;
/*   background: #fff; */
  padding: 10px;
  border-radius: 12px;
}

/*
@media screen and (max-width: 767px){
  .remodal-is-initialized {
    padding: 40px;
  }
}
@media screen and (max-width: 560px){
  .remodal-is-initialized {
    padding: 40px 20px;
  }
}
*/


/* ! 資本政策フェーズ追加で使用 ———————————————————————————————————————————————————————————— */

.modal_buy_contents .list_cnt article {
	padding: 0;
	box-shadow: none;
}
.modal_buy_contents .list_cnt .ttl {
	font-size: 16px;
}
.modal_buy_contents .list_cnt .area_poster {
	margin-top: 10px;
}

.area_credit_modal {
	max-width: 400px;
}

/* ! データリスト —————————————————————————————— */
.list_data > li + li {
  margin: 30px 0 0;
}
/* 	ヘッド_データ */
.head_data {
  margin: 0 0 8px;
}
.head_data .ttl {
  color: #A7AAB7;
  font: 300 12px/1em 'noto sans japanese',sans-serif;
}
/* 	ボディ_データ */
.body_data .tpl_price {
	color: #000;
}



/* ! データリスト 横並び —————————————————————————————— */
.list_data.row article {
  display: flex;
}
.list_data.row .ttl {
  color: #000;
  font-size: 13px;
}
.list_data.row .head_data {
  flex: 0 0 100px;
}
.list_data.row .body_data {
  flex: 1 1 auto;
  min-width: 10px;
}
.list_data.row input:not([type="submit"]),
.list_data.row select,
.list_data.row .wrap_checkbox label,
.list_data.row .wrap_radio label {
  font-size: 15px;
  height: 36px;
  border-radius: 3px;
}
@media screen and (max-width: 480px){
  .list_data.row article {
    flex-wrap: wrap;
  }
  .list_data.row .head_data,
  .list_data.row .body_data {
    flex: 0 0 100%;
  }
}




/* ! 360評価 アンケート未回答者へ依頼を再送 ———————————————————————————————————————————————————————————— */
.remodal.resend .head_modal .ttl{
  font: 300 32px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
}
.remodal.resend .head_modal p{
  color: #999;
  font: 400 14px/1em 'noto sans japanese' , sans-serif;
}
.remodal.resend .head_modal{
  margin: 0 0 40px;
}

@media screen and (max-width: 767px){
  .remodal.resend .head_modal .ttl{
    font-size: 28px;
  }
  .remodal.resend .head_modal p{
    font-size: 13px;
  }
}
@media screen and (max-width: 480px){
  .remodal.resend .head_modal .ttl{
    font-size: 22px;
  }
  .remodal.resend .head_modal p{
    font-size: 12px;
  }
}

/* リスト */
.resend .list_maliaddress{
  display: flex;
  flex-wrap: wrap;
  margin: -15px;
}
.resend .list_maliaddress > li{
  width: 50%;
  padding: 15px;
}
.resend .list_maliaddress .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
  text-align: left;
}
.resend .list_maliaddress input:disabled{
  color: #fff;
  background: #C1C5D3;
}
.resend .list_maliaddress input + input{
  margin: 6px 0 0;
}

@media screen and (max-width: 767px){
  .remodal.resend .list_maliaddress .ttl{
    font-size: 14px;
    margin: 0 0 8px;
  }
  .remodal.resend .list_maliaddress{
    margin: 0;
  }
  .remodal.resend .list_maliaddress > li{
    width: 100%;
    padding: 0;
  }
  .remodal.resend .list_maliaddress > li + li{
    margin: 16px 0 0;
  }
}
@media screen and (max-width: 480px){
  .remodal.resend .list_maliaddress .ttl{
    font-size: 12px;
  }
}

/*  */
@media screen and (max-width: 560px){
  .remodal.resend [class*="btn_"][class*="goast"]{
    flex: 0 0 auto;
  }
}

/* ! あなたの相談履歴 ———————————————————————————————————————————————————————————— */
.remodal.consult_history .head_modal h1{
  font: 300 32px/1em 'noto sans japanese' , sans-serif;
  margin: 0 0 10px;
}
.remodal.consult_history .head_modal p{
  color: #999;
  font: 400 14px/1em 'noto sans japanese' , sans-serif;
}
.remodal.consult_history .head_modal{
  margin: 0 0 40px;
}

/* リスト */
.list_info_consult_history > li{
  display: flex;
}
.list_info_consult_history > li + li{
  margin: 20px 0 0;
}
.list_info_consult_history .ttl{
  font: 600 16px/1em 'noto sans japanese' , sans-serif;
  flex: 0 0 160px;
  text-align: left;
}
.list_info_consult_history .cnt{
  font: 500 16px/1.4em 'Roboto','noto sans japanese',sans-serif;
  flex: 1 1 auto;
  min-width: 10px;
  text-align: left;
}

/* ボタン */
.remodal.consult_history [class*="btnarea"]{
  margin: 50px 0 0;
  display: flex;
}
.remodal.consult_history [class*="btn_"][class*="goast"]{
  color: #ddd;
  border-color: #ddd;
  flex: 0 0 120px;
}

/* ! alert ———————————————————————————————————————————————————————————— */
.remodal.alert [class*="btn_"]{
  max-width: 200px;
  width: 100%;
}
.remodal.alert [class*="btn_"][class*="goast"]{
  color: #576086;
  border-color: #576086;
}


/* ! 360評価 サンプル ———————————————————————————————————————————————————————————— */
.remodal.sample_360 .area_answer_rate{
  display: flex;
  justify-content: center;
  align-items: baseline;
  margin: 0 -40px;
  margin-bottom: 70px;
}
.remodal.sample_360 .area_answer_rate p{
  font: 500 15px/1em 'noto sans japanese' , sans-serif;
  padding: 0 40px;
}
.remodal.sample_360 .area_answer_rate p span{
  color: #7857A7;
  font: bold 32px/1em 'Roboto','noto sans japanese',sans-serif;
}
.remodal.sample_360 .area_answer_rate .rate span:after{
  content: "%";
  font-size: .7em;
}
.remodal.sample_360 .area_result_group > .ttl{
  font: 600 18px/1em 'noto sans japanese' , sans-serif;
  text-align: center;
  margin: 0 0 20px;
}

@media screen and (max-width: 480px){
  .remodal.sample_360 .area_result_group > .ttl{
    font-size: 16px;
  }
}

/*  */
.remodal.sample_360 .head_result_group{
  display: flex;
  align-items: center;
  margin: 0 0 40px;
}
.remodal.sample_360 .head_result_group > div{
  width: 50%;
}

@media screen and (max-width: 480px){
  .remodal.sample_360 .head_result_group{
    display: block;
  }
  .remodal.sample_360 .head_result_group > div{
    width: 100%;
  }
}

/*  */
.remodal.sample_360 .chart{
  background: url("https://d38jpe7aprjxji.cloudfront.net/asset/img/sample/img_sample_chart_02.svg") no-repeat center center !important;
  background-size: contain !important;
  height: 200px;
}
.remodal.sample_360 .chart:before {
  content: "";
  display: block;
  width: 100%;
  padding-top: 36%;
}
.remodal.sample_360 .total{
  margin: -12px;
}
.remodal.sample_360 .total p{
  text-align: left;
  font: 500 15px/1em 'noto sans japanese' , sans-serif;
  padding: 12px;
}
.remodal.sample_360 .total p span{
  color: #7857A7;
  font: bold 28px/1em 'Roboto','noto sans japanese',sans-serif;
}
.remodal.sample_360 .total p .max{
  font: 400 20px/1em 'Roboto','noto sans japanese',sans-serif;
  margin: 0 0 0 8px;
}

@media screen and (max-width: 560px){
  .remodal.sample_360 .chart{
    height: 180px;
  }
  .remodal.sample_360 .total p{
    font-size: 13px;
  }
  .remodal.sample_360 .total p span{
    font-size: 24px;
  }
  .remodal.sample_360 .total p .max{
    font-size: 18px;
  }
}
@media screen and (max-width: 480px){
  .remodal.sample_360 .chart{
    height: 160px;
  }
  .remodal.sample_360 .total{
    margin: 20px 0 0;
  }
  .remodal.sample_360 .total p{
    text-align: center;
    padding: 8px;
  }
}

/* ! ボタン ——————————— */
.remodal.sample_360 [class*="btn_"]{
  width: 200px;
}


/* ! ============================================================
　有料会員登録バナー
============================================================ */
.modal_bnr_plan .area_modal {
  background: #f1f1f1;
}
.area_bnr_plan {
  margin: 0 auto;
  max-width: 740px;
}

/* リスト */
.list_bnr_plan {
  display: flex;
  margin: 0 -10px;
}
.list_bnr_plan > li {
  flex: 0 0 50%;
  padding: 0 10px;
  flex: 0 0 1;
  min-width: 10px;
  display: flex;
}
.list_bnr_plan article {
  background: #fff;
  padding: 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 10px;
}

.list_bnr_plan article > .ttl {
  font: 900 32px/1em 'Roboto','noto sans japanese',sans-serif;
  text-align: center;
  padding: 10px 0;
  margin: 0 0 6px;
}
.list_bnr_plan .ttl:after {
  content: attr(data-sub)"";
  color: #444;
  font: 500 12px/1em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  display: block;
  margin: 10px 0 0;
}
.list_bnr_plan .description {
  color: #444;
  font: 300 12px/1.7em 'noto sans japanese',sans-serif;
  margin: 20px 0;
}



/* オススメ項目 */
.area_recommend_plan {
  margin: 20px 0 0;
}
.area_recommend_plan .ttl {
  color: #1D762D;
  font: 600 16px/1em 'noto sans japanese',sans-serif;
  text-align: center;
  margin: 0 0 16px;
}


/* オススメリスト */
.list_recommend_plan {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.list_recommend_plan > li {
  font: 600 14px/1.3em 'noto sans japanese',sans-serif;
  letter-spacing: .04em;
  padding: 0 0 0 24px;
  position: relative;
}
.list_recommend_plan > li:before {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  background: url(../img/shape/ico_check_standard.svg) ;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  position: absolute;
  top: .6em;
  left: 0;
  transform: translateY(-50%);
}
.list_recommend_plan > li + li {
  margin: 12px 0 0;
}


/* 金額表記 */
.list_bnr_plan .price {
  font: 900 28px/1em 'Roboto','noto sans japanese',sans-serif;
  letter-spacing: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin: auto 0 0;
}
.list_bnr_plan .price:before {
  content: "¥";
  font-size: .8em;
  display:inline-block;
  margin: 0 4px 0 0;
}
.list_bnr_plan .price:after {
  content: "/月" ;
  font: 500 15px/1em 'noto sans japanese',sans-serif;
  margin: 0 0 0 6px;
}


/* ボタンエリア */
.list_bnr_plan [class*="btnarea"] {
  margin: 28px 0 0;
}


/* ! 個別 —————————————————————————————— */
/* スタンダード */
.plan_standard .ttl {
  color: #196B17;
}
.plan_standard [class*="btn_"] {
  background: #196B17;
  border-color: #196B17;
}


/* プロフェッショナル */
.plan_professional .ttl {
  color: #51C96D;
}
.plan_professional .list_recommend_plan > li:before {
  background: url(../img/shape/ico_check_professional.svg);
}


/* ! ============================================================
　知識 パス解除
============================================================ */
[class*="list_form"][class*="unlock_contents"] .error{
  color: #dd4f76;
  font: 500 12px/1em 'noto sans japanese' , sans-serif;
  margin: 6px 0 0;
  text-align: center;
}