@charset "UTF-8";

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.bg-success { background: #28a745 !important; }
.bg-warning { background: #ffc107 !important; }
.bg-danger { background : #dc3545 !important; }
.bg-white { background  : #fff !important; }
.bg-valid { background  : #28a745 !important; }
.bg-invalid { background: #dc3545 !important; }
.bg-pale-gray { background: #f5f5f5 !important;}
.bg-green { background: #20873e !important; }
.success { color        : #28a745 !important; }
.warning { color        : #ffc107 !important; }
.danger { color         : #dc3545 !important; }
.white { color          : #fff !important; }
.valid { color          : #28a745 !important; }
.invalid { color        : #dc3545 !important; }
.green { color: #31c45b !important; }

.fa-twitter { color: #55acee !important; }
.fa-facebook { color: #3b5998 !important; }
.fa-line { color: #00B900 !important; }
.m-0  { margin   : 0 !important; }
.mt-0 { margin-top   : 0 !important; }
.mb-0 { margin-bottom: 0 !important; }
.ml-0 { margin-left  : 0 !important; }
.mr-0 { margin-right : 0 !important; }
.m-1  { margin   : 1rem !important; }
.mt-1 { margin-top   : 1em !important; }
.mb-1 { margin-bottom: 1em !important; }
.ml-1 { margin-left  : 1em !important; }
.mr-1 { margin-right : 1em !important; }
.m-2  { margin   : 2rem !important; }
.mt-2 { margin-top   : 2em !important; }
.mb-2 { margin-bottom: 2em !important; }
.ml-2 { margin-left  : 2em !important; }
.mr-2 { margin-right : 2em !important; }
.m-3  { margin   : 3rem !important; }
.mt-3 { margin-top   : 3em !important; }
.mb-3 { margin-bottom: 3em !important; }
.ml-3 { margin-left  : 3em !important; }
.mr-3 { margin-right : 3em !important; }
.m-4  { margin   : 4rem !important; }
.mt-4 { margin-top   : 4em !important; }
.mb-4 { margin-bottom: 4em !important; }
.ml-4 { margin-left  : 4em !important; }
.mr-4 { margin-right : 4em !important; }
.m-5  { margin   : 5rem !important; }
.mt-5 { margin-top   : 5em !important; }
.mb-5 { margin-bottom: 5em !important; }
.ml-5 { margin-left  : 5em !important; }
.mr-5 { margin-right : 5em !important; }

.p-0  { padding   : 0 !important; }
.pt-0 { padding-top   : 0 !important; }
.pb-0 { padding-bottom: 0 !important; }
.pl-0 { padding-left  : 0 !important; }
.pr-0 { padding-right : 0 !important; }
.p-1  { padding   : 1rem !important; }
.pt-1 { padding-top   : 1rem !important; }
.pb-1 { padding-bottom: 1rem !important; }
.pl-1 { padding-left  : 1rem !important; }
.pr-1 { padding-right : 1rem !important; }
.p-2  { padding   : 2rem !important; }
.pt-2 { padding-top   : 2rem !important; }
.pb-2 { padding-bottom: 2rem !important; }
.pl-2 { padding-left  : 2rem !important; }
.pr-2 { padding-right : 2rem !important; }
.p-3  { padding   : 3rem !important; }
.pt-3 { padding-top   : 3rem !important; }
.pb-3 { padding-bottom: 3rem !important; }
.pl-3 { padding-left  : 3rem !important; }
.pr-3 { padding-right : 3rem !important; }
.p-4  { padding   : 4rem !important; }
.pt-4 { padding-top   : 4rem !important; }
.pb-4 { padding-bottom: 4rem !important; }
.pl-4 { padding-left  : 4rem !important; }
.pr-4 { padding-right : 4rem !important; }
.p-5  { padding   : 5rem !important; }
.pt-5 { padding-top   : 5rem !important; }
.pb-5 { padding-bottom: 5rem !important; }
.pl-5 { padding-left  : 5rem !important; }
.pr-5 { padding-right : 5rem !important; }

.text-left { text-align   : left !important; }
.text-right { text-align  : right !important; }
.text-center { text-align : center !important; }
.text-justify { text-align: justify !important; }

.w-100 { width: 100% !important; }

.float-left { float : left !important; }
.float-right { float: right !important; }
.float-none { float : none !important; }

.font-big { font-size: 30px; }
.font-medium { font-size: 20px; }
.font-small { font-size: 10px; }
.font-b { font-weight: bold; }

.d-none { display        : none !important; }
.d-inline { display      : inline !important; }
.d-inline-block { display: inline-block !important; }
.d-block { display       : block !important; }
.d-table { display       : table !important; }
.d-table-row { display   : table-row !important; }
.d-table-cell { display  : table-cell !important; }
.d-flex { display        : -ms-flexbox !important; display: flex !important; }
.d-inline-flex { display : -ms-inline-flexbox !important; display: inline-flex !important; }

.line_t { border-top: solid 1px #333;}
.line_l { border-left: solid 1px #333;}
.line_b { border-bottom: solid 1px #333;}
.line_r { border-right: solid 1px #333;}
:root {
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #fff;
  --gray: #6c757d;
  --gray-dark: #343a40;
  --primary: #007bff;
  --secondary: #6c757d;
  --success: #28a745;
  --info: #17a2b8;
  --warning: #ffc107;
  --danger: #dc3545;
  --light: #f8f9fa;
  --dark: #343a40;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-family: sans-serif;
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -ms-overflow-style: scrollbar;
  -webkit-tap-highlight-color: transparent;
  -moz-text-size-adjust: 100%;/*firefox*/
}

@-ms-viewport {
  width: device-width;
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

body {
  margin: 0;
  font-family: "Helvetica Neue", Verdana, Meiryo, "M+ 1p", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
  color: #374149;
}

[tabindex="-1"]:focus {
  outline: 0 !important;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title],
abbr[data-original-title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
  cursor: help;
  border-bottom: 0;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul,
dl {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ul ul,
ol ul,
ul ol {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

dfn {
  font-style: italic;
}

b,
strong {
  font-weight: bolder;
}

small {
  font-size: 80%;
}

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

sub {
  bottom: -.25em;
}

sup {
  top: -.5em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a {
  color: #007bff;
  text-decoration: none;
}
@media (max-width: 960px) {
    a {
        text-decoration: underline;
    }
}
a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:visited {
    color: #003a78;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover, a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}
@media (max-width: 480px) {
    a {
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        transition: all  0.3s ease;
    }
    a:active {
        background: #e6f2ff;
        padding: 3px 5px;
    }
}

pre,
code,
kbd,
samp {
  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 1em;
}

pre {
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
  -ms-overflow-style: scrollbar;
}

figure {
  margin: 0 0 1rem;
}

img {
  vertical-align: middle;
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  border-collapse: collapse;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
  color: #6c757d;
  text-align: left;
  caption-side: bottom;
}

th {
  text-align: inherit;
}

label {
  display: inline-block;
  margin-bottom: 0.5rem;
}

button {
  border-radius: 0;
}

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

input,
button,
select,
optgroup,
textarea {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html [type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

input[type="radio"],
input[type="checkbox"] {
  box-sizing: border-box;
  padding: 0;
}

input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"] {
  -webkit-appearance: listbox;
}
label {
    position: relative;
}
label > input[type="checkbox"] ,
label > input[type="radio"] {
    position: absolute;
    z-index: -1;
}
label > input[type="radio"]:focus ,
label > input[type="checkbox"]:focus {
    box-shadow: none;
}
label > input[type="checkbox"]+span ,
label > input[type="radio"]+span {
    margin-right: 5px;
    padding: 21px 15px 21px 50px;
    display: block;
    position: relative;
    z-index: 0;
    background: #f0f0f0;
    color: #2b2b2b;
    text-align: center;
    line-height: 1;
    border-radius: 5px;
    box-sizing: border-box;
    cursor: pointer;
    font-weight: normal;
}
#mailmagazine_checkbox {
    margin-top: 10px;
    border-top: dashed 1px #aaa;
}
#mailmagazine_checkbox.mailmagazine_checkbox {
    margin-top: 0;
    border-top: none;
}
#mailmagazine_checkbox label > input[type="checkbox"]+span {
    padding: 5px 5px 5px 40px;
}
label > input[type="checkbox"]:checked+span ,
label > input[type="radio"]:checked+span {
    background: #2cd051;
    color: #fff;
}
#mailmagazine_checkbox input[type="checkbox"]:checked+span {
    background: #fff;
    border: none;
    color: #333;
}
label > input[type="checkbox"]+span::before ,
label > input[type="radio"]+span::before {
    content: "";
    margin: -10px 0 0 0;
    display: block;
    position: absolute;
    top: 50%;
    left: 15px;
    width: 18px;
    height: 18px;
    border: 2px solid #a6a6a6;
    background: #ffffff;
}
#mailmagazine_checkbox input[type="checkbox"]+span::before {
    border: 2px solid #a6a6a6;
    background: #fff;
    border-radius: 3px;
    margin: -9px 0 0 -5px;
    padding: 0px 0 0 0px;
    width: 15px;
    height: 15px;
    font-size: 11px;
    color: #003333;
}
#mailmagazine_checkbox .input_wrap .label_desp {
    border: none;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    color: #996666;
}
#mailmagazine_checkbox .input_wrap .label_title {
    font-size: 15px;
    font-weight: normal;
}
#mailmagazine_checkbox .label_caution {
    font-size: 12px;
}
label > input[type="radio"]+span::before {
    border-radius: 18px;
}
label > input[type="checkbox"]+span::before {
    border-radius: 0;
}
label > input[type="checkbox"]:checked+span::before ,
label > input[type="radio"]:checked+span::before {
    content: "";
    border-width: 4px;
    border-color: #ffffff;
    background: #2cd051;
}
label > input[type="radio"]:checked+span::before {
    border-width: 4px;
    border-radius: 16px;
}
label > input[type="checkbox"]:checked+span::before {
    content: "\f00c";
    border-width: 2px;
    border-radius: 0;
    font-weight: bold;
    line-height: 1.1;
    font-size: 12px;
}
textarea {
  overflow: auto;
  resize: vertical;
}
form dl dt {
    border-bottom: 1px solid #ccc;
}
form dl dt span {
    border-left: solid 5px #ccc;
    padding: 5px 10px;
    font-size: 18px;
}
form dl dd,
form dl dt {
    padding: 10px;
}
/* mobile */
@media (max-width: 480px) {
    form dl dt {
        border: none;
    }
    form dl dd,
    form dl dt {
        padding: 7px;
    }
}

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

legend {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: .5rem;
  font-size: 1.5rem;
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

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

[type="search"] {
  outline-offset: -2px;
  -webkit-appearance: none;
}

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

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

summary {
  display: list-item;
  cursor: pointer;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  margin-bottom: 0.5rem;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1, .h1 {
  font-size: 2.5rem;
}

h2, .h2 {
  font-size: 2rem;
}

h3, .h3 {
  font-size: 1.75rem;
}

h4, .h4 {
  font-size: 1.5rem;
}

h5, .h5 {
  font-size: 1.25rem;
}

h6, .h6 {
  font-size: 1rem;
}

.lead {
  font-size: 1.25rem;
  font-weight: 300;
}

hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

small,
.small {
  font-size: 80%;
  font-weight: 400;
}

mark,
.mark {
  padding: 0.2em;
  background: #fffeee;
}
code {
  font-size: 87.5%;
  color: #e83e8c;
  word-break: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.2rem 0.4rem;
  font-size: 87.5%;
  color: #fff;
  background-color: #212529;
  border-radius: 0.2rem;
}

kbd kbd {
  padding: 0;
  font-size: 100%;
  font-weight: 700;
}

pre {
  display: block;
  font-size: 87.5%;
  color: #212529;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}
section {
    padding: 20px;
}
section h1 {
    border-bottom: solid 1px #374149;
    padding: 20px 10px;
    font-size: 25px;
    font-weight: bold;
}
section h1 i {
    margin-right: 10px;
}
label {
    font-family: Verdana, Meiryo, sans-serif;
}
@media all and (-ms-high-contrast: none)  {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}
@media all and (-ms-high-contrast: active) {
  html {
    font-family: Verdana, Meiryo, sans-serif;
  }
}

 /* for Android font-size */
#estate ,
article ,
.cc_license ,
#radar_chart_area ,
#city_user_voice_list ,
#body #rank_minna_wrap ,
#spotlight_city ,
footer ,
dt ,
dd ,
p {
    max-height: 100%;
}
.aside a,
.foot_adsby a ,
.text-right a ,
#body aside ul li a,
a.link {
    display: inline-block;
    max-height: 100%;
}
#body #rank_minna_wrap ul li a {
    display: inline;
}
.aside a {
    width: 100%;
}
#radar_chart_area a {
    width: auto;
    max-height: none;
}

body {
	background: #eeeeee;
}
.AndroidB  #animation_container ,
.ie #animation_container {
	display: none;
}
.AndroidB #service_image img ,
.ie #service_image img {
	display: inline-block;
}
#service_image img {
	display: none;
}
#service_image {
	background: #f0f0f0;
}
.AndroidB #service_image img ,
.ie #service_image img {
	width: 100%;
    height: 352px;
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;';
	transition: all 250ms ease-in-out;
}
#service_image #canvas {
	width: 100%;
    height: 352px;
	object-fit: cover;
	object-position: 50% 50%;
	transition: all 250ms ease-in-out;
}
#service_image #canvas,
#service_image #animation_container {
	overflow: hidden;
}
canvas {
	-webkit-backface-visibility: hidden;
}
/* mobile pc large */
.container {
	background: #fff;
	border-left: solid 1px #374149;
	border-right: solid 1px #374149;
	margin: 0 auto;
	width: 1200px;
}
main {
	display: table-cell;
	width: 70%;
	vertical-align: top;
}
.wrapper {
	border-top: solid 1px #333;
	border-bottom: solid 1px #333;
	display: table;
	width: 100%;
	table-layout: fixed;
}
article {
	background: #fff;
	padding: 20px;
}
aside {
	display: table-cell;
	border-left: solid 1px #333;
	background: #fff8d1;
	width: 340px;
	padding: 18px;
}
aside div:first-child {
}
footer {
}
@media (max-width: 1380px) {
	#service_image #canvas ,
	#service_image #animation_container {
		width: 100% !important;
	}
}
/* mobile pc small */
@media (max-width: 1280px) {
	.container {
		width: 95%;
	}
}
/* mobile tablet */
@media (max-width: 960px) {
	.container {
		border: none;
		width: 100%;
	}
	.wrapper {
		display: block;
	}
	section ,
	aside ,
	article ,
	main {
		display: block;
		width: 100%;
		border: none;
	}
	#service_image img {
	    height: 240px !important;
	}
	#service_image #canvas ,
	#service_image #animation_container {
		height: 280px !important;
	}
	#service_image #canvas {
		object-position: 47% 50%;
	}
}
/* mobile landscape */
@media (max-width: 600px) {
	.container {

	}
	#service_image img {
	    height: 160px !important;
	}
	#service_image #canvas ,
	#service_image #animation_container {
		height: 180px !important;
	}
	aside {
		padding: 10px;
	}
}
/* mobile */
@media (max-width: 480px) {
	.container {

	}
	label > input[type="radio"]+span {
		text-align: left;
	}
	label {
		width: 100%;
	}
}
@media (max-width: 320px) {
}
/* template **************************************************/
/* mobile pc small */
@media (max-width: 1280px) {
}
/* mobile tablet */
@media (max-width: 960px) {
}
/* mobile landscape */
@media (max-width: 600px) {
}
/* mobile */
@media (max-width: 300px) {
}
/****** btn ******/
.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
  .btn {
    transition: none;
  }
}

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

.btn:focus, .btn.focus {
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn.disabled, .btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.btn:not(:disabled):not(.disabled):active, .btn:not(:disabled):not(.disabled).active {
  background-image: none;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  font-size: 1.1rem;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus, .btn-primary.focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-primary.disabled, .btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:not(:disabled):not(.disabled):active, .btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #0062cc;
  border-color: #005cbf;
}

.btn-primary:not(:disabled):not(.disabled):active:focus, .btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.5);
}

.btn-secondary {
  color: #fff !important;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #5a6268;
  border-color: #545b62;
}

.btn-secondary:focus, .btn-secondary.focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-secondary.disabled, .btn-secondary:disabled {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}

.btn-secondary:not(:disabled):not(.disabled):active, .btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #545b62;
  border-color: #4e555b;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus, .btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #2cd051;
  border-color: #2cd051;
}

.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

.btn-success:focus, .btn-success.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-success.disabled, .btn-success:disabled {
  color: #fff;
  background-color: #2cd051;
  border-color: #2cd051;
}

.btn-success:not(:disabled):not(.disabled):active, .btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #1e7e34;
  border-color: #1c7430;
}

.btn-success:not(:disabled):not(.disabled):active:focus, .btn-success:not(:disabled):not(.disabled).active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-info {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:hover {
  color: #fff;
  background-color: #138496;
  border-color: #117a8b;
}

.btn-info:focus, .btn-info.focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-info.disabled, .btn-info:disabled {
  color: #fff;
  background-color: #17a2b8;
  border-color: #17a2b8;
}

.btn-info:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled).active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #117a8b;
  border-color: #10707f;
}

.btn-info:not(:disabled):not(.disabled):active:focus, .btn-info:not(:disabled):not(.disabled).active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-warning {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-warning:focus, .btn-warning.focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-warning.disabled, .btn-warning:disabled {
  color: #212529;
  background-color: #ffc107;
  border-color: #ffc107;
}

.btn-warning:not(:disabled):not(.disabled):active, .btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
  color: #212529;
  background-color: #d39e00;
  border-color: #c69500;
}

.btn-warning:not(:disabled):not(.disabled):active:focus, .btn-warning:not(:disabled):not(.disabled).active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.5);
}

.btn-danger {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-danger:focus, .btn-danger.focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-danger.disabled, .btn-danger:disabled {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.btn-danger:not(:disabled):not(.disabled):active, .btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #bd2130;
  border-color: #b21f2d;
}

.btn-danger:not(:disabled):not(.disabled):active:focus, .btn-danger:not(:disabled):not(.disabled).active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.5);
}

.btn-member {
  color: #fff !important;
  background-color: #29a44c;
  border-color: #29a44c;
  text-decoration: none;
}
.btn-member:visited {
    color: #fff;
}
.btn-member:hover {
  color: #fff;
  background-color: #20873e;
  border-color: #20873e;
}

.btn-member:focus, .btn-member.focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-member.disabled, .btn-member:disabled {
  color: #fff;
  background-color: #29a44c;
  border-color: #29a44c;
}

.btn-member:not(:disabled):not(.disabled):active, .btn-member:not(:disabled):not(.disabled).active,
.show > .btn-member.dropdown-toggle {
  color: #fff;
  background-color: #20873e;
  border-color: #20873e;
}

.btn-member:not(:disabled):not(.disabled):active:focus, .btn-member:not(:disabled):not(.disabled).active:focus,
.show > .btn-member.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #007bff;
  background-color: transparent;
}

.btn-link:hover {
  color: #0056b3;
  text-decoration: underline;
  background-color: transparent;
  border-color: transparent;
}

.btn-link:focus, .btn-link.focus {
  text-decoration: underline;
  border-color: transparent;
  box-shadow: none;
}

.btn-link:disabled, .btn-link.disabled {
  color: #6c757d;
  pointer-events: none;
}
/****** badge ******/

.badge {
  display: inline-block;
  padding: 0.25em 0.4em;
  font-size: 75%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 0.25rem;
}

.badge:empty {
  display: none;
}

.btn .badge {
  position: relative;
  top: -1px;
}

.badge-pill {
  padding-right: 0.6em;
  padding-left: 0.6em;
  border-radius: 10rem;
}

.badge-primary {
  color: #fff;
  background-color: #007bff;
}

.badge-primary[href]:hover, .badge-primary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #0062cc;
}

.badge-secondary {
  color: #fff;
  background-color: #6c757d;
}

.badge-secondary[href]:hover, .badge-secondary[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #545b62;
}

.badge-success {
  color: #fff;
  background-color: #2cd051;
}

.badge-success[href]:hover, .badge-success[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1e7e34;
}

.badge-info {
  color: #fff;
  background-color: #17a2b8;
}

.badge-info[href]:hover, .badge-info[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #117a8b;
}

.badge-warning {
  color: #212529;
  background-color: #ffc107;
}

.badge-warning[href]:hover, .badge-warning[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #d39e00;
}

.badge-danger {
  color: #fff;
  background-color: #dc3545;
}

.badge-danger[href]:hover, .badge-danger[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #bd2130;
}

.badge-light {
  color: #212529;
  background-color: #f8f9fa;
}

.badge-light[href]:hover, .badge-light[href]:focus {
  color: #212529;
  text-decoration: none;
  background-color: #dae0e5;
}

.badge-dark {
  color: #fff;
  background-color: #343a40;
}

.badge-dark[href]:hover, .badge-dark[href]:focus {
  color: #fff;
  text-decoration: none;
  background-color: #1d2124;
}

/****** alert ******/

.alert {
  position: relative;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.alert-heading {
  color: inherit;
}

.alert-link {
  font-weight: 700;
}

.alert-dismissible {
  padding-right: 4rem;
}

.alert-dismissible .close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.75rem 1.25rem;
  color: inherit;
}

.alert-primary {
  color: #004085;
  background-color: #cce5ff;
  border-color: #b8daff;
}

.alert-primary hr {
  border-top-color: #9fcdff;
}

.alert-primary .alert-link {
  color: #002752;
}

.alert-secondary {
  color: #383d41;
  background-color: #e2e3e5;
  border-color: #d6d8db;
}

.alert-secondary hr {
  border-top-color: #c8cbcf;
}

.alert-secondary .alert-link {
  color: #202326;
}

.alert-success {
  color: #155724;
  background-color: #d4edda;
  border-color: #c3e6cb;
}

.alert-success hr {
  border-top-color: #b1dfbb;
}

.alert-success .alert-link {
  color: #0b2e13;
}

.alert-info {
  color: #0c5460;
  background-color: #d1ecf1;
  border-color: #bee5eb;
}

.alert-info hr {
  border-top-color: #abdde5;
}

.alert-info .alert-link {
  color: #062c33;
}

.alert-warning {
  color: #856404;
  background-color: #fff3cd;
  border-color: #ffeeba;
}

.alert-warning hr {
  border-top-color: #ffe8a1;
}

.alert-warning .alert-link {
  color: #533f03;
}

.alert-danger {
  color: #d71153;
  background-color: #fce7e9;
  border-color: #f5c6cb;
  display: block;
  padding: 10px;
}

.alert-danger .msg {
    display: inline-block;
    margin-bottom: 5px;
}
.alert-danger .msg {
    display: inline-block;
    margin-bottom: 5px;
}

.alert-danger hr {
  border-top-color: #f1b0b7;
}

.alert-danger .alert-link {
  color: #491217;
}

.alert-light {
  color: #818182;
  background-color: #fefefe;
  border-color: #fdfdfe;
}

.alert-light hr {
  border-top-color: #ececf6;
}

.alert-light .alert-link {
  color: #686868;
}

.alert-dark {
  color: #1b1e21;
  background-color: #d6d8d9;
  border-color: #c6c8ca;
}

.alert-dark hr {
  border-top-color: #b9bbbe;
}

.alert-dark .alert-link {
  color: #040505;
}

/****** close ******/

.close {
  float: right;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: #000;
  text-shadow: 0 1px 0 #fff;
  opacity: .5;
}

.close:hover, .close:focus {
  color: #000;
  text-decoration: none;
  opacity: .75;
}

.close:not(:disabled):not(.disabled) {
  cursor: pointer;
}


button.close {
  padding: 0;
  background-color: transparent;
  border: 0;
  -webkit-appearance: none;
}

/****** modal  ******/

.modal {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1050;
  display: none;
  overflow: hidden;
  outline: 0;
}
/****** form-control ******/
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.area_select .form-control {
    display: inline-block;
    width: 30%;
}
.area_select .alert-danger {
    display: inline-block;
    width: 30%;
}
.area_select .alert-danger .form-control {
    width: 100%;
}
.form-control.necess {
    background: #fce7e9;
}
.error .form-control.necess {
    background: #f5c6cb;
}
.form-control::after {
}
/* mobile landscape */
@media (max-width: 600px) {
    .area_select .form-control {
        width: 49%;
    }
    .area_select .alert-danger {
        width: 49%;
        font-size: 12px;
    }
}

@media screen and (prefers-reduced-motion: reduce) {
  .form-control {
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.form-control::-webkit-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::-ms-input-placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control::placeholder {
  color: #6c757d;
  opacity: 1;
}

.form-control:disabled, .form-control[readonly] {
  background-color: #e9ecef;
  opacity: 1;
}

select.form-control {
    border-color: #374149;
}

select.form-control:not([size]):not([multiple]) {
  height: calc(2.25rem + 2px);
}

select.form-control:focus::-ms-value {
  color: #495057;
  background-color: #fff;
}
/****** table ******/

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  background-color: transparent;
}
.table th {
    white-space: nowrap;
    width: 250px;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #dee2e6;
}

.table.conf tr:first-child th,
.table.conf tr:first-child td {
  border-top: none;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #dee2e6;
}

.table tbody + tbody {
  border-top: 2px solid #dee2e6;
}

.table .table {
  background-color: #fff;
}

.table-sm th,
.table-sm td {
  padding: 0.3rem;
}

.layout_table {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.layout_table_row {
    display: table-row;
}
.layout_table_cell {
    display: table-cell;
    vertical-align: top;
}
.column_2 {
	width: 50%;
}
.column_3 {
	width: 33%;
}
.column_4 {
	width: 25%;
}

.common_table {
    border: solid 1px #333;
    margin: 10px 0;
    width: 100%;
}
.common_table tr:nth-child(even) {
    background: #ebf0ef;
}
.common_table tr:nth-child(even) td ,
.common_table tr:nth-child(even) th {
    background: #ebf0ef;
    background-clip: padding-box;
}
.common_table.column_2 td ,
.common_table.column_2 th {
    width: 25%;
}
.common_table.column_2 tr:first-child th {
}
.common_table.column_2 tr:first-child td {
}
.common_table.column_2 tr:last-child th {
}
.common_table.column_2 tr:last-child td {
}
.common_table th {
    border-bottom: solid 1px #333;
    background: #f8f8f8;
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
    vertical-align: top;
}
.common_table td {
    border-bottom: solid 1px #333;
    background: #f8f8f8;
    padding: 10px;
    background-clip: padding-box;
    text-align: left;
    vertical-align: top;
}
.common_table tr:last-child th ,
.common_table tr:last-child td {
    border-bottom: none;
}
/* mobile landscape */
@media (max-width: 600px) {
    .common_table tr:last-child th {
        border-bottom: solid 1px #333;
    }
}

.str ,
.number {
    color: #000;
    font-family: verdana;
}
.unit {
    display: inline-block;
    font-size: 15px;
    color: #003366;
}
.common_table td {
}
.common_table td .order {
    float: right;
    top: 12px;
    right: 10px;
    font-size: 16px;
}
@media (max-width: 1280px) {
    .common_table td .order {
        font-size: 15px;
    }
}
.caution {
    font-size: 14px;
    color: #990000;
}
.label_caution {
    position: relative;
    top: -5px;
    font-size: 14px;
}
/******  ******/
ul.flow {
    margin: 15px 0 10px;
    text-align: center;
}
ul.flow li {
    display: inline-block;
    position: relative;
    top: 0;
    left: 0;
    border-radius: 3px;
    background: #f0f0f0;
    margin-right: 10px;
    padding: 15px 20px 10px;
    width: 30%;
    text-align: center;
    font-size: 15px;
    vertical-align: top;
}
ul.step_3 li {
    width: 30%;
}
ul.step_4 li {
    width: 22.2%;
}
ul.step_5 li {
    width: 17.5%;
}
ul.flow li::after {
    content: "";
    position: absolute;
    margin-top: -0.3rem;
    top: 50%;
    right: -10px;
    width: 0;
    height: 0;
    border-left: 5px solid black;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}
ul.flow li:last-child::after {
    border: none;
}
ul.flow li .number {
    position: absolute;
    margin-left: -10px;
    top: -0.5rem;
    left: 49%;
    background: #fff;
    width: 20px;
    height: 20px;
    border: solid 1px #aaa;
    border-radius: 20px;
    font-family: verdana;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
    line-height: 15px;
    color: #888;
}
ul.flow li.current {
    background: #2cd051;
    color: #fff;
}
ul.flow li.current .number {
    border-color: #2cd051;
    color: #2cd051;
}

@media (max-width: 1280px) {
    ul.flow {
        margin: 20px 0 10px;
    }
}
/* mobile tablet */
@media (max-width: 960px) {
    ul.step_3 li {
        width: 28%;
    }
    ul.step_4 li {
        width: 20.5%;
    }
    ul.step_5 li {
        padding: 15px 20px;
        width: 16%;
        line-height: 1;
    }
}
/* mobile landscape */
@media (max-width: 600px) {
    #signup ul.flow li {
        min-height: 90px;
    }
}
/* mobile */
@media (max-width: 480px) {
    #erros {
        margin-top: 10px;
    }
    ul.flow {
        margin: 20px 0 0;
    }
    ul.step_3 li {
        width: 26%;
    }
    ul.step_4 li {
        width: 18.5%;
    }
    ul.step_5 li {
        padding: 20px 20px;
        width: 14%;
        line-height: 1;
    }
}
/******  ******/
mark.require {
    border: solid 1px #ff2970;
    border-radius: 5px;
    background: #fff;
    color: #ff2970;
    font-size: 12px;
    padding: 1px 5px;
    line-height: 1;
    vertical-align: middle;
}
mark.any {
    border: solid 1px #676767;
    border-radius: 5px;
    background: #fff;
    color: #676767;
    font-size: 12px;
    padding: 1px 5px;
    line-height: 1;
    vertical-align: middle;
}
/******  ******/
header {
	background: #fff;
    position: relative;
    top: 0;
    left: 0;
    padding: 20px 20px 25px;
    border-bottom: solid 1px #374149;
}
header .logo {
    position: relative;
    top: 10px;
    left: 20px;
    line-height: 1;
    margin: 0;
    padding: 0;
}
header h1.logo {
    font-size: 20px;
}
header .logo a {
    display: inline-block;
}
header .logo img {
    width: 300px;
    -webkit-backface-visibility: hidden;
    vertical-align: bottom;
}
header .lead {
    position: relative;
    top: 20px;
    left: 20px;
    color: #afb3b6;
    font-size: 20px;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 1rem;
}
header a {
    color: #374149;
    font-weight: bold;
}
header a.beginner {
    display: inline-block;
    position: absolute;
    top: 55px;
    right: 500px;
    text-align: center;
}
header.logined a.beginner {
    right: 210px;
}
#header_wrap {
    height: 133px;
}
header a.beginner img {
    margin-right: 5px;
    width: 17px;
}
header.on {
    position: fixed;
    top: 0;
    left: auto;
    margin: 0 auto;
    z-index: 100;
}
a.login {
    background: url(/img/icon/login.png) no-repeat 0 50%;
    margin-left: 20px;
    padding: 3px 0 3px 25px;
    background-size: 17px;
}
header .member {
    background: #fff;
    position: absolute;
    top: 30px;
    right: 130px;
    display: inline-block;
    padding: 20px;
    text-align: center;
    line-height: 1;
}
header.logined .member {
    padding: 0;
    top: 35px;
}
header.logined .member i {
    margin-right: 0;
}
header .no_login_menu i {
    margin-right: 0;
    display: none;
}
header .member .btn-member {
    padding: 5px 50px;
    font-weight: bold;
}
header.logined .default {
}
header.logined .member.photo {
    padding: 0;
    line-height: 1;
}
header .member a.no_login_menu ,
header.logined .member a {
    display: inline-block;
    background: #f5f5f5;
    border-radius: 55px;
    width: 55px;
    height: 55px;
    overflow: hidden;
}
header .member a.no_login_menu {
    display: none;
}

header .member .label {
    position: absolute;
    left: 0;
    bottom: -10px;
    width: 60px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    color: #aaa;
}
header .member .label {
    left: -5px;
}
header.logined .member .label {
    left: -3px;
}
header.logined .member img {
    height: 55px;
}
header #menu a {
    text-decoration: none;
}
#menu_control {
    background: #f5f5f5;
    position: absolute;
    top: 0;
    right: 0;
    padding: 15px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    cursor: pointer;
}
#menu_control .title {
    margin-top: 5px;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}
.menu-trigger,
.menu-trigger span {
  display: inline-block;
  transition: all .4s;
  box-sizing: border-box;
}
.menu-trigger {
  position: relative;
  height: 22px;
}
.menu-trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: #374149;
  border-radius: 4px;
}
.menu-trigger span:nth-of-type(1) {
  top: 0;
}
.menu-trigger span:nth-of-type(2) {
  top: 9px;
}
.menu-trigger span:nth-of-type(3) {
  bottom: 0;
}
.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(9px) rotate(-45deg);
  transform: translateY(9px) rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2) {
  left: 50%;
  opacity: 0;
  -webkit-animation: active-menu-bar02 .8s forwards;
  animation: active-menu-bar02 .8s forwards;
}
@-webkit-keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
@keyframes active-menu-bar02 {
  100% {
    height: 0;
  }
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-9px) rotate(45deg);
  transform: translateY(-9px) rotate(45deg);
}
#g_nav {
    display: none;
}
#g_nav {
    position: absolute;
    top: 90px;
    right: 0;
	display: none;
 	margin: 0;
	padding: 10px;
	min-width: 350px;
 	max-width: 100%;
 	color: #555;
	font-size: 16px;
	background: #FFF;
 	border: solid 3px #555;
    border-radius: 5px;
 	box-sizing: border-box;
    text-align: left;
}

#g_nav:before{
	content: "";
	position: absolute;
	top: -24px;
	right: 22px;
 	margin-left: -15px;
	border: 12px solid transparent;
	border-bottom: 12px solid #FFF;
 	z-index: 9;
}

#g_nav:after{
	content: "";
	position: absolute;
	top: -30px;
	right: 20px;
 	margin-left: -17px;
	border: 14px solid transparent;
	border-bottom: 14px solid #555;
 	z-index: 1;
}

#g_nav dt {
    padding: 10px;
    font-size: 17px;
    color: #000;
}
#g_nav dd ul li {
    border: solid 1px #ccc;
    border-radius: 5px;
    margin-top: 5px;
    font-size: 15px;
    background: url(/img/arrow_right.png) no-repeat right 50%;
    background-size: 15px;
}
nav#menu {
    position: absolute;
    top: 30px;
    right: 30px;
    z-index: 100;
}
nav#menu a {
    display: block;
    padding: 10px 20px;
}
.mobile ,
.tablet {
    display: none;
}
header .member i {
    font-size: 35px;
    color: #c2c2c2;
}
.more_user_comment {
    margin-top: 10px;
    background: #fffeee;
    display: block;
    text-align: right;
    padding: 10px;
}
/* mobile pc small */
@media (max-width: 1280px) {
    #header_wrap {
        height: 120px;
    }
    header .logo img {
        width: 250px;
    }
    header .member .btn-member {
        padding: 5px 20px;
    }
    header a.beginner {
        right: 445px;
    }
    header .lead {
        left: 10px;
        font-size: 16px;
    }
    header .logo {
        left: 10px;
    }
}
/* mobile tablet */
@media (max-width: 960px) {
    .tablet {
        display: block;
    }
    header.logined a.beginner ,
    header a.beginner {
        top: 45px;
        right: 205px;
    }
    header a.beginner span {
        display: block;
    }
    header .member .desktop {
        display: none;
    }
    header .no_login_menu i {
        display: inline-block;
        font-size: 30px;
    }
    header.logined .member ,
    header .member.no_login_menu {
        top: 35px;
        right: 130px;
        padding: 0;
    }
    header .member a.no_login_menu ,
    header.logined .member a {
        display: inline-block;
        width: 50px;
        height: 50px;
    }
    header .member.no_login_menu a {
        padding: 10px;
    }
    header .member .label {
        left: 0;
    }
    header .member.no_login_menu .label {
        bottom: -13px;
        left: -5px;
    }
    header.logined .member .label {
        bottom: -13px;
        left: -5px;
    }
    header.logined .member img {
        height: 50px;
    }
}
/* mobile landscape */
@media (max-width: 600px) {
    #header_wrap {
        height: 90px;
    }
    header {
        padding: 10px 20px 20px;
    }
    header .logo {
        left: 0px;
    }
    header .logo img {
        width: 180px;
    }
    header .lead {
        left: 0;
        font-size: 12px;
    }
    header .member.no_login_menu {
        top: 15px;
        right: 90px;
        width: 45px;
        height: 45px;
    }
    header .member.no_login_menu i {
        position: relative;
        top: -3px;
        left: -2px;
        font-size: 27px;
    }
    header.logined .member {
        top: 18px;
        right: 85px;
    }
    header .member a.no_login_menu ,
    header.logined .member a {
        width: 45px;
        height: 45px;
    }
    header .member.no_login_menu a {
        padding: 13px;
    }
    header.logined .member .label,
    header .member .label {
        bottom: -13px;
        left: -7px;
    }
    header.logined .member img {
        height: 45px;
    }
    header a.beginner {
        display: none;
        top: 20px;
        right: 130px;
        font-size: 15px;
    }
    header #menu_control {
        padding: 10px;
    }
    header nav#menu {
        top: 15px;
        right: 10px;
    }
    header #menu_control .title {
        font-size: 16px;
    }
    .mobile {
        display: block;
    }
    #g_nav {
        position: relative;
        top: 80px;
        right: 0;
        z-index: 100;
        width: 100%;
        min-width: 100%;
        max-width: 100%;
    }
    header nav#menu {
        margin: 0 auto;
        width: 95%;
    }
}
/* mobile */
@media (max-width: 480px) {
    header .lead ,
    header .logo {
        left: -5px;
    }
}
@media (max-width: 320px) {
    header.logined .member {
        display: none;
    }
    header .member.no_login_menu {
        display: none;
    }
}
/******************/
#news {
    display: table;
    background: #f5f5f5;
    border-bottom: solid 1px #000;
    padding: 5px 20px;
    width: 100%;
    line-height: 1;
}
#news div {
    display: table-cell;
    vertical-align: middle;
    padding: 10px;
}
#news .media ,
#news .news {
    border-radius: 15px;
    line-height: 1;
}
#news .news_title {
    background: url(/img/icon/news.png) no-repeat 0 50%;
    background-size: 20px;
    padding-left: 25px;
    width: 100px;
    font-weight: bold;
    font-size: 15px;
    white-space: nowrap;
}
#news .news a {
    display: inline-block;
    font-size: 13px;
    vertical-align: middle;
}
#news .media {
    width: 200px;
    text-align: right;
}
#news .media span {
    display: inline-block;
    background: url(/img/icon/media.png) no-repeat 0 50%;
    background-size: 18px;
    padding: 2px 0 2px 25px;
    font-size: 15px;
    font-weight: bold;
}
@media (max-width: 960px) {
    #news {
        padding: 0 20px;
    }
}
@media (max-width: 600px) {
    #news a {
        width: 100%;
        line-height: 1.3;
    }
    #news .media {
        display: none;
    }
}
/******************/
#pickup {
    display: table;
    width: 100%;
    line-height: 1.2;
}
#pickup div {
    display: table-cell;
    vertical-align: middle;
}
#pickup {
    background: #31c45b;
    border-bottom: solid 1px #333;
    padding: 10px 20px;
    color: #fff;
}
#pickup .info {
    font-weight: bold;
}
#pickup .link {
    border-radius: 5px;
    background: #fff;
    margin: 0;
    padding: 10px 20px;
    width: 250px;
    font-size: 14px;
    text-align: center;
    vertical-align: middle;
}
#pickup .link br {
    display: none;
}
@media (max-width: 600px) {
    #pickup {
        padding: 10px;
    }
    #pickup .info {
        padding: 0 20px 0 0;
        font-size: 15px;
    }
    #pickup .link {
        padding: 10px;
        width: 150px;
    }
    #pickup .link br {
        display: inline-block;
    }
}
/******  ******/
footer {
    background: #f5f5f5;
    padding: 40px;
    text-align: center;
}
footer ul {
    margin: 0 0 30px;
}
footer ul.share {
    margin: 0 0 30px;
    font-size: 50px;
}
footer ul.share .head {
    font-size: 20px;
    font-weight: bold;
    vertical-align: middle;
}
footer ul li {
    display: inline-block;
    vertical-align: top;
    padding: 0 10px;
}
footer ul li a {
    color: #0056b3;
}
footer .logo {
    margin: 30px 0;
}
footer .logo img {
    width: 400px;
}
footer small {
    display: inline-block;
    margin: 0 0 10px;
    font-size: 17px;
}
footer p {
    line-height: 1.2;
}
@media (max-width: 900px) {
    footer ul li a {
        color: #374149;
    }
    footer ul {
        margin-bottom: 30px;
    }
    footer ul.share {
        margin-bottom: 20px;
    }
    footer ul.share li {
        vertical-align: middle;
        padding: 0;
        font-size: 35px;
    }
    footer ul li {
        font-size: 15px;
    }
    footer .logo {
        margin: 20px 0;
    }
    footer .logo img {
        width: 400px;
    }
    footer p ,
    footer small {
        font-size: 13px;
    }
}
/* mobile landscape */
@media (max-width: 600px) {
    footer ul.share {
        margin: 0;
    }
    footer ul {
        margin-bottom: 30px;
    }
    footer .logo {
        margin: 20px 0;
    }
    footer .logo img {
        width: 100%;
    }
    footer p ,
    footer small {
        font-size: 14px;
    }
}

/******  ******/
.text-content {
    width: 100%;
    word-wrap: break-word;
    word-break: break-all;
}
/******  ******/
.terms_h2 {
    position: relative;
    top: 0;
    left: 0;
    padding-right: 80px;
    font-size: 20px;
    font-weight: bold;
}
.terms_h2 span {
    position: absolute;
    top: 5px;
    right: 0;
    display: inline-block;
    font-size: 15px;
    text-decoration: underline;
    cursor: pointer;
    color: #004085;
}
#input_terms {
    border: solid 1px #ccc;
    overflow: scroll;
    width: 100%;
    height: 200px;
    padding: 20px;
}
#input_terms.on {
    overflow:auto;
    height: auto;
}
/******  ******/
form dl.conf dd {
    padding: 20px;
    background: #e6edf4;
}

/****** zip address input ******/
#zip span {
    display: inline-block;
}
input[name=zip_2] ,
input[name=zip_1] {
    margin-bottom: 5px;
}
input[name=zip_1] {
    width: 4rem;
}
input[name=zip_2] {
    width: 5rem;
}
#search_address_msg {
    display: none;
    margin: 10px 0 0;
    border-radius: 3px;
    border: solid 1px #ccc;
    padding: 10px;
    background: #e6edf4;
    color: #990000;
}
#search_address_msg ul li {
    border-radius: 3px;
    border: solid 1px #ccc;
    background: #fff;
    margin-top: 5px;
    padding: 10px 5px;
    color: #004085;
    cursor: pointer;
}
/******  ******/
/****** form layout ******/
.wrapper.form {
    background: #f5f5f5;
}
section.form {
    background: #fff;
    border: solid 1px #374149;
    border-radius: 5px;
    margin: 20px auto;
    padding: 20px 40px;
    width: 860px;
}
/* mobile pc small */
@media (max-width: 1280px) {
    section.form {
    }
}
/* mobile tablet */
@media (max-width: 960px) {
    section.form {
        margin: 0 auto;
        border: none;
        width: 100%;
        padding: 20px;
    }
}
/* mobile landscape */
@media (max-width: 600px) {
    section.form {
        padding: 10px;
    }
}
/* mobile */
@media (max-width: 480px) {
}

/**/
table.error {
    margin: 10px auto 0;
}
table.error th {
    text-align: left;
}
table.error td {
    text-align: left;
}
table.error td a {
    color: #d71153;
    text-decoration: underline;
}
/* mobile tablet */
@media (max-width: 960px) {
    .alert-danger .msg {
        font-size: 14px;
    }
}
/* mobile */
@media (max-width: 600px) {
    table.error {
        margin: 10px;
    }
    table.error td,
    table.error th {
        display: block;
        text-align: left;
        font-size: 15px;
    }
    table.error td {
        margin-bottom: 10px;
        padding-left: 40px;
    }
}
/**************/
.input_wrap .label_text {
    text-align: left;
}
.input_wrap .label_title {
    display: inline-block;
    padding: 5px 0;
    font-size: 18px;
    font-family: verdana meiryo, sans-serif;
    font-weight: bold;
}
.input_wrap .label_desp {
    display: inline-block;
    border-top: dashed 1px #ccc;
    margin: 5px 0 0 5px;
    padding: 5px 0 0;
    font-size: 14px;
    font-family: verdana meiryo, sans-serif;
}
/****************************/
.breadcrumb {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin: 0;
  padding: 0.75rem 1rem;
  list-style: none;
  background: #e9dc24;
  padding: 10px 20px;
  color: #595411;
  font-size: 17px;
  font-weight: bold;
}
.breadcrumb-item {
    display: inline-block;
}
.breadcrumb-item + .breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item + .breadcrumb-item::before {
  display: inline-block;
  padding-right: 0;
  color: #595411;
  content: "/";
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
    color: #595411;
}
.breadcrumb a {
    color: #595411;
}
@media (max-width: 480px) {
    .breadcrumb {
        display: block;
        -webkit-overflow-scrolling: touch;
        overflow-x: auto;
        font-size: 16px;
        padding-left: 10px;
    }
    .breadcrumb .breadcrumb-item {
        display: table-cell;
        white-space: nowrap;
    }
}

/***********************/

.field {
  position: relative;
  top: 0;
  left: 0;
}

.field__label {
  color: #0669fc;
  font-size: 12px;
  opacity: 0;
  padding: 4px 10px;
  pointer-events: none;
  position: absolute;
  left: 0;
  text-overflow: ellipsis;
  text-align: left;
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
}

.field--not-empty .field__label {
  opacity: 1;
  -webkit-transform: none;
          transform: none;
}

.error .field__label {
    top: 38px;
    left: 10px;
}

.field__input {
  background-color: #fffeee;
  border: 2px solid #e9e9e9;
  color: #333;
  font-size: 18px;
  padding: 10px;
  -webkit-transition: all .2s ease-out;
  transition: all .2s ease-out;
  width: 100%;
}

.field--not-empty .field__input {
  padding-bottom: 2px;
  padding-top: 18px;
}

/***************************/
.h1 {
    margin: 0 0 10px;
    padding: 0 0 10px;
    border-bottom: solid 1px #ccc;
    font-weight: bold;
    position: relative;
    top: 0;
    left: 0;
}
.h1 i.far ,
.h1 i.fas {
    margin-right: 15px;
    color: #31c45b;
}
.h1 img {
    margin-right: 20px;
    vertical-align: middle;
}
.h1 .beginner {
    margin-top: -3px;
}
.h1 .icon {
    background: #31c45b;
    color: #fff;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 15px;
    line-height: 1;
}
.h2 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 30px;
    font-weight: bold;
}
.h3 {
    position: relative;
    top: 0;
    left: 0;
    font-size: 25px;
    font-weight: bold;
}
.lead {
    color: #808080;
    font-weight: bold;
}
.lead span {
    font-size: 20px;
}
/* mobile tablet */
@media (max-width: 960px) {
    .h1 {
        font-size: 35px;
    }
    .h2 {
        font-size: 27px;
    }
    .h3 {
        font-size: 23px;
    }
}
/* mobile landscape */
@media (max-width: 600px) {
}
/* mobile */
@media (max-width: 480px) {
    .h1 {
        font-size: 28px;
    }
    .h1 i.fas {
        margin-right: 10px;
    }
    .h2 {
        font-size: 24px;
    }
    .h3 {
        font-size: 20px;
    }
}
.description {
    padding: 10px;
}
#simple article ,
#simple {
    margin: 0;
    padding: 0;
}
#main_img img {
    width: 100%;
}
.simple_body {
    padding: 30px 60px 40px;
}
.line {
    clear: both;
    border-bottom: solid 1px #333;
    margin: 0;
    line-height: 1;
}
/******************/
#g-recaptcha>div {
    margin: 0 auto;
}

/******************/
#body aside h2 {
    font-size: 17px;
    font-weight: bold;
}
#body aside .wrap {
    padding: 20px;
}
#body aside .aside {
    background: #fff;
    margin: 10px 0 0;
}
#body aside .aside:first-child {
    margin: 0;
}
#body aside #pr ul li {
    border-top: dashed 1px #aaa;
    margin-top: 10px;
    padding-top: 10px;
}
#body aside #pr ul li:first-child {
    border-top: none;
}
#body #info {
}
.ranking_copy {
    padding: 0 5px 0;
    font-size: 13px;
    font-weight: bold;
}
.ranking_copy span {
    display: inline-block;
    margin-bottom: 5px;
    font-size: 15px;
}
.ranking_copy i {
    font-size: 20px;
}

#ranking .ranking_step {
    background-size: 25px;
    padding: 0 0 0 35px;
}
#sumitsuzuketaimachi_ranking .over_3 ,
#living_town_ranking .over_3 {
    background: #f5f5f5;
    margin: 0;
    padding: 5px 10px 10px 12px;
    list-style: none;
    color: #31c45b;
    font-weight: bold;
    font-size: 28px;
    line-height: 1;
}
#sumitsuzuketaimachi_ranking .under_3 span ,
#living_town_ranking .under_3 span ,
#living_town_ranking .over_3 span {
    vertical-align: middle;
}
#sumitsuzuketaimachi_ranking .over_3 .number ,
#living_town_ranking .over_3 .number {
    display: inline-block;
    width: 25px;
    margin-right: 5px;
    color: #31c45b;
    font-size: 28px;
    font-weight: bold;
    vertical-align: middle;
}
#sumitsuzuketaimachi_ranking .under_3 ,
#living_town_ranking .under_3 {
    margin: 0 0 10px;
	padding: 5px 10px 0 12px;
	list-style: none;
	color: #bbb;
	font-weight: bold;
	font-size: 25px;
	line-height: 1;
}
#sumitsuzuketaimachi_ranking .under_3 .number ,
#living_town_ranking .under_3 .number {
    display: inline-block;
    width: 25px;
    margin-right: 5px;
    color: #bbb;
    font-size: 28px;
    font-weight: bold;
    vertical-align: middle;
}
#sumitsuzuketaimachi_ranking a ,
#living_town_ranking a {
    display: inline-block;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #007bff;
    font-weight: normal;
    font-size: 17px;
    vertical-align: middle;
}
#body #sumitsuzuketaimachi_ranking h2 ,
#body #living_town_ranking h2 {
    border-bottom: solid 1px #ccc;
    padding: 0 0 10px;
    margin-bottom: 10px;
}
#sumitsuzuketaimachi_ranking h2 i ,
#living_town_ranking h2 i {
    font-size: 30px;
    vertical-align: middle;
}
#sumitsuzuketaimachi_ranking .detail a ,
#living_town_ranking .detail a {
    font-size: 14px;
}
#sumitsuzuketaimachi_ranking .ranking_living ,
#living_town_ranking .ranking_living {
    background-size: 25px;
    padding: 0 0 0 35px;
}
#sumitsuzuketaimachi_ranking .year ,
#living_town_ranking .year {
    margin: 0 0 5px;
    padding: 0 10px 5px;
    text-align: right;
    line-height: 1;
}
#sumitsuzuketaimachi_ranking small ,
#living_town_ranking small {
    border: solid 1px #990000;
    border-radius: 5px;
    padding: 1px 10px;
    line-height: 1;
    font-size: 11px;
    color: #990000;
}
#body #ranking .head {
    text-align: center;
}
#body #ranking .head img {
    width: 100px;
}
#ranking h2 {
    margin: 10px 0;
    text-align: center;
    color: #88710f;
}
#ranking .over_3 li {
	line-height: 1;
}
#ranking .over_3 a {
	color: #007bff;
	font-weight: normal;
	font-size: 15px;
	vertical-align: middle;
}
#sumitsuzuketaimachi_ranking .detail ,
#living_town_ranking .detail ,
#ranking .detail {
    padding: 5px;
    font-size: 14px;
    text-align: right;
}
#pr h2 {
	background: url(/img/icon/pr.png) no-repeat 0 0;
	background-size: 30px;
	padding: 0 0 10px 35px;
    border-bottom: solid 1px #ccc;
    line-height: 1.5;
}
#estate h2 {
    background: url(/img/icon/live.png) no-repeat 0 0;
    background-size: 30px;
    margin-bottom: 20px;
	padding: 3px 0 10px 37px;
    border-bottom: solid 1px #ccc;
    line-height: 1.5;
}
#other_city_link h2 i ,
#compare_history_sidebar_wrap h2 i ,
#city_compare_form h2 i ,
#city_info_history h2 i ,
#compare_popular_sidebar h2 i ,
#radar_chart_area h2 i ,
#info_re_search h2 i {
    font-size: 25px;
    vertical-align: middle;
}
#info_re_search h2 ,
#compare_popular_sidebar h2 ,
#city_info_history h2 ,
#city_compare_form h2 ,
#compare_history_sidebar_wrap h2 ,
#other_city_link h2 {
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
}

#info_re_search h2 i {
    font-size: 25px;
    vertical-align: middle;
    margin-right: 8px;
}
#other_city_link h2 i ,
#compare_history_sidebar_wrap h2 i ,
#city_info_history h2 i {
    margin-right: 8px;
}

.toggle_btn {
    background: #edf7ff;
    margin: 10px 0;
    padding: 10px;
    font-size: 15px;
    text-align: center;
    cursor: pointer;
    color: #007bff;
}
.other_link {
    text-align: right;
    font-size: 14px;
}


#vote_btn {
    width: 200px;
    height: 200px;
    position: fixed;
    right: 20px;
    bottom: 20px;
    z-index: 11;
}
#vote_btn.vote_city {
    background: url(/img/vote.png) no-repeat 0 0;
    background-size: 200px;
}
#vote_btn.vote_minna {
    background: url(/img/vote_minna.png) no-repeat 0 0;
    background-size: 200px;
}
/* mobile tablet */
@media (max-width: 960px) {
    .simple_body {
		padding: 20px;
	}
    #body aside h2 {
        font-size: 20px;
    }
    #vote_btn {
        width: 150px;
        height: 150px;
    }
    #vote_btn.vote_city ,
    #vote_btn.vote_minna {
        background-size: 150px;
    }
}
@media (max-width: 600px) {
    #vote_btn {
        right: 10px;
        bottom: 10px;
    }
}
@media (max-width: 480px) {
    #vote_btn {
        width: 100px;
        height: 100px;
    }
    #vote_btn.vote_city ,
    #vote_btn.vote_minna {
        background-size: 100px;
    }
}


#progress {
    background-color: #f8f8f8;
    border-radius: 10px;
    position: fixed;
    margin-left: -220px;
    bottom: 10px;
    left: 50%;
    padding: 5px 10px;
    text-align: center;
}
#progress span {
    font-size: 15px;
    color: #003366;
}
#progress progress {
    background-color: #ccc;
    -webkit-appearance: none;
	border: none;
    width: 300px;
    height: 30px;
    vertical-align: middle;
}
#progress progress.fin {
    color: #31c45b;
}
/* All good till now. Now we'll style the background */
progress::-webkit-progress-bar {
	background: #ccc;
	padding: 2px;
	box-shadow: 0 1px 0px 0 rgba(255, 255, 255, 0.2);
}
progress.fin {background-color: #31c45b !important;}
progress.fin::-moz-progress-bar {background-color: #31c45b !important;}
/* Now the value part */
progress::-webkit-progress-value {
	box-shadow: inset 0 1px 1px 0 rgba(255, 255, 255, 0.4);
	background:
		-webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
		-webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
		-webkit-linear-gradient(left, #4875ba, #2d65c4);

	/* Looks great, now animating it */
	background-size: 25px 14px, 100% 100%, 100% 100%;
	-webkit-animation: move 5s linear 0 infinite;
}
progress.fin::-webkit-progress-value {
    background:
        -webkit-linear-gradient(45deg, transparent, transparent 33%, rgba(0, 0, 0, 0.1) 33%, rgba(0, 0, 0, 0.1) 66%, transparent 66%),
        -webkit-linear-gradient(top, rgba(255, 255, 255, 0.25), rgba(0, 0, 0, 0.2)),
        -webkit-linear-gradient(left, #48ba5a, #2dc453);
}

@-webkit-keyframes move {
	0% {background-position: 0px 0px, 0 0, 0 0}
	100% {background-position: -100px 0px, 0 0, 0 0}
}

/*******************************/
dl.inline dt,
dl.inline dd,
ol.inline li ,
ul.inline li {
    display: inline-block;
}

.card {
    background: #f5f5f5;
    padding: 20px;
}
.content_hide {
    display: none;
}
/* mobile landscape */
.mobile_hidden_open {
    display: none;
}
@media (max-width: 960px) {
    #body .tablet_hidden {
        display: none;
    }
    #progress {
        margin: 0 auto;
        left: auto;
        width: 95%;
    }
}
@media (max-width: 600px) {
    #progress progress {
        width: 200px;
    }
    .mobile_hidden_open {
        position: absolute;
        top: 2px;
        right: 10px;
        display: inline-block;
    }
    #body .mobile_hidden {
        display: none;
    }
}
@media (max-width: 480px) {
    .card {
        padding: 10px;
    }
}

.areamatch {

}
.areamatch_title {

}
.areamatch_title h2 {

}
.areamatch_title h2 span {
    color: #2dc453;
}
.areamatch ul li {
    font-size: 15px;
}
.content_open {
    cursor: pointer;
}
@media (max-width: 600px) {
    #city_info_link li.current .space ,
    .space {
        display: block;
        height: 3px;
        font-size: 0;
    }
}
#compare_city_select ,
#compare_pref_select {
    margin-bottom: 5px;
}
#compare_pref_select {
    margin-top: 10px;
}
#compare_city_btn {
    width: 100%;
}
.compare_choice ,
#compare_choice {
    background: #f5f5f5;
    margin: 0 0 10px;
    padding: 10px 0;
    text-align: center;
}
.compare_choice form,
#compare_choice form {
    display: table;
    margin: 0 auto;
}
.compare_choice .form-control ,
#compare_choice .form-control {
    display: inline-block;
    margin-bottom: 5px;
    width: 45%;
}
.compare_choice .compare_col ,
#compare_choice .compare_col {
    display: table-cell;
    vertical-align: middle;
    padding: 5px;
}
#compare_history_wrap {
    display: none;
    vertical-align: middle;
    padding: 0 10px;
    text-align: center;
    font-size: 15px;
}
#compare_history_wrap h2 {
    display: table-cell;
    border-radius: 5px;
    background: #f0f0f0;
    padding: 10px 0;
    color: #555;
    font-weight: bold;
    font-size: 15px;
    width: 150px;
    vertical-align: middle;
    text-align: center;
}
#compare_history_wrap ul {
    display: table-cell;
    padding: 5px;
    text-align: left;
}
#compare_history_wrap ul li {
    margin-right: 10px;
    line-height: 1;
}
.city_select_1 ,
.pref_select_1 ,
#city_select_1 ,
#pref_select_1 {
    background: rgba(49, 196, 91, 0.1);
}
.city_select_2 ,
.pref_select_2 ,
#city_select_2 ,
#pref_select_2 {
    background: rgba(84, 157, 214, 0.1);
}
.iPhone .city_select_1 ,
.iPhone .pref_select_1 ,
.iPad .city_select_1 ,
.iPad .pref_select_1 ,
.iPhone #city_select_1 ,
.iPhone #pref_select_1 ,
.iPad #city_select_1 ,
.iPad #pref_select_1 {
    border: solid 1px rgba(49, 196, 91, 1);
}
.iPhone .city_select_2 ,
.iPhone .pref_select_2 ,
.iPad .city_select_2 ,
.iPad .pref_select_2 ,
.iPhone #city_select_2 ,
.iPhone #pref_select_2 ,
.iPad #city_select_2 ,
.iPad #pref_select_2 {
    border: solid 1px rgba(84, 157, 214, 1);
}

#compare_re_choice {
    display: none;
    text-align: right;
    margin: 0 0 10px;
    padding: 0;
    color: #007bff;
}
@media (max-width: 600px) {
    #compare #compare_re_choice {
        display: block;
    }
    #compare #compare_choice {
        display: none;
    }
    .compare_choice .compare_col select ,
    #compare_choice .compare_col select {
        width: 100%;
    }
    .compare_choice .compare_col.compare ,
    #compare_choice .compare_col.compare {
        width: 20px;
    }
    .compare_choice .compare_col ,
    #compare_choice .compare_col {
        display: inline-block;
        width: 45%;
        text-align: center;
    }
    .compare_choice .compare_col .btn-primary ,
    #compare_choice .compare_col .btn-primary {
        width: 100%;
    }
}

/*********************************************************/
#spotlight_city {
	padding: 10px 0;
}
#idx_ranking_popular .wrap ,
#spotlight_city .wrap {
	background: #fff8d1;
	margin: 0 0 5px;
	padding: 20px;
	font-size: 18px;
    line-height: 2;
}
#spotlight_city h2 {
    border-bottom: solid 1px #ccc !important;
    margin: 0;
    padding: 0 0 10px 0 !important;
}
#spotlight_city h2 .icon {
    margin-right: 10px;
    vertical-align: middle;
    line-height: 1;
    width: 35px;
    position: relative;
    top: -3px;
}
#home #spotlight_city h2 {
    font-size: 25px;
}
#home #spotlight_city .icon {
    width: 30px;
}
#spotlight_city .h2 .icon {
    margin: 0 10px 0 0;
    width: 35px;
}
#idx_ranking_popular .wrap ol ,
#spotlight_city .wrap ol {
	margin-bottom: 0;
}
#idx_ranking_popular .wrap span.number ,
#spotlight_city .wrap span.number {
	margin: 0;
	padding: 10px 0 10px 10px;
	color: #31c45b;
	font-weight: bold;
	font-size: 35px;
	line-height: 1;
}
#idx_ranking_popular .wrap .rank_3 .number ,
#idx_ranking_popular .wrap .rank_2 .number ,
#idx_ranking_popular .wrap .rank_1 .number ,
#spotlight_city .wrap .rank_3 .number ,
#spotlight_city .wrap .rank_2 .number ,
#spotlight_city .wrap .rank_1 .number {
    width: 50px;
}
#idx_ranking_popular .wrap .rank_3 i ,
#idx_ranking_popular .wrap .rank_2 i ,
#idx_ranking_popular .wrap .rank_1 i ,
#spotlight_city .wrap .rank_3 i ,
#spotlight_city .wrap .rank_2 i ,
#spotlight_city .wrap .rank_1 i {
    margin-right: 0;
    position: relative;
    top: 0;
    left: 0;
}
#idx_ranking_popular .wrap .rank_1 i span ,
#spotlight_city .wrap .rank_1 i span {
    position: absolute;
    top: 8px;
    left: 15px;
    color: #000;
    font-size: 18px;
    font-family: verdana;
}
#idx_ranking_popular .wrap .rank_3 i span ,
#idx_ranking_popular .wrap .rank_2 i span ,
#spotlight_city .wrap .rank_3 i span ,
#spotlight_city .wrap .rank_2 i span {
    position: absolute;
    top: 7px;
    left: 13px;
    color: #000;
    font-size: 18px;
    font-family: verdana;
}
#spotlight_city .rank_3 ,
#spotlight_city .rank_2 ,
#spotlight_city .rank_1 {
	font-size: 22px;
}
#idx_ranking_popular .rank_3 ,
#idx_ranking_popular .rank_2 ,
#idx_ranking_popular .rank_1 {
    font-size: 18px;
}

#idx_ranking_popular .wrap .rank_10 span,
#idx_ranking_popular .wrap .rank_9 span,
#idx_ranking_popular .wrap .rank_8 span,
#idx_ranking_popular .wrap .rank_7 span,
#idx_ranking_popular .wrap .rank_6 span,
#idx_ranking_popular .wrap .rank_5 span,
#idx_ranking_popular .wrap .rank_4 span {
    color: #bbb;
	font-size: 16px;
}
#spotlight_city .wrap .rank_10 span ,
#spotlight_city .wrap .rank_9 span ,
#spotlight_city .wrap .rank_8 span ,
#spotlight_city .wrap .rank_7 span ,
#spotlight_city .wrap .rank_6 span ,
#spotlight_city .wrap .rank_5 span ,
#spotlight_city .wrap .rank_4 span {
	color: #bbb;
	font-size: 20px;
}
@media (max-width: 600px) {
    #idx_ranking_popular .wrap .rank_3 a,
    #idx_ranking_popular .wrap .rank_2 a,
    #idx_ranking_popular .wrap .rank_1 a,
    #spotlight_city .wrap .rank_3 a ,
    #spotlight_city .wrap .rank_2 a ,
    #spotlight_city .wrap .rank_1 a {
        font-size: 18px;
    }
    #idx_ranking_popular .wrap .rank_3 i span,
    #idx_ranking_popular .wrap .rank_2 i span,
    #idx_ranking_popular .wrap .rank_1 i span,
    #spotlight_city .wrap .rank_3 i span ,
    #spotlight_city .wrap .rank_2 i span ,
    #spotlight_city .wrap .rank_1 i span {
        font-size: 15px;
    }
    #idx_ranking_popular .wrap .rank_1 i span,
    #spotlight_city .wrap .rank_1 i span {
        left: 12px;
    }
    #idx_ranking_popular .wrap .rank_3 i span,
    #idx_ranking_popular .wrap .rank_2 i span,
    #spotlight_city .wrap .rank_3 i span ,
    #spotlight_city .wrap .rank_2 i span {
        top: 5px;
        left: 10px;
    }
    #idx_ranking_popular .wrap .rank_3 .number,
    #idx_ranking_popular .wrap .rank_2 .number,
    #idx_ranking_popular .wrap .rank_1 .number,
    #spotlight_city .wrap .rank_3 .number ,
    #spotlight_city .wrap .rank_2 .number ,
    #spotlight_city .wrap .rank_1 .number {
        display: inline-block;
        padding-left: 5px;
        font-size: 28px;
        width: 38px;
    }
    #idx_ranking_popular .wrap,
    #spotlight_city .wrap {
        padding: 5px 10px 10px;
    }
    #idx_ranking_popular .wrap {
        line-height: 1.2;
    }
    #idx_ranking_popular ol li {
        display: block;
    }
    #idx_ranking_popular ol li a {
        display: inline-block;
        width: 80%;
        overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
    }
    #home #area_selector_title .fa-search {
        font-size: 30px;
        vertical-align: middle;
    }
    #home #compare_ranking {
        padding: 20px 0 0;
    }
    #home #idx_ranking {
        padding: 0 !important;
    }
    #home #spotlight_city .h2 .icon {
        margin-right: 15px;
        width: 30px;
        left: 5px;
    }
}
.fa-arrow-up {
	color: #31c45b;
	font-weight: bold;
	font-size: 20px;
}
.fa-arrow-down {
	color: #317ec4;
	font-weight: bold;
	font-size: 20px;
}
.fa-arrow-right {
	color: #c4b631;
	font-weight: bold;
	font-size: 20px;
}
.rank_1 .fa-crown {
    color: #e8c016;
}
.rank_2 .fa-trophy {
    color: #c2bfb8;
}
.rank_3 .fa-trophy {
    color: #e0d18b;
}
@media (max-width: 960px) {
}
@media (max-width: 600px) {
}
/*********************************************************/
#compare_ranking .wrap {
    background: #f5f5f5;
    margin-bottom: 5px;
    padding: 20px;
}
#city_list_title {
    border-bottom: solid 1px #ccc !important;
    margin: 10px 0 0;
	padding: 0 0 10px 0;
}
#pref_list_title {
    border-bottom: solid 1px #ccc !important;
    margin: 10px 0 0;
	padding: 0 0 10px 0;
}
#idx_ranking li {
    padding: 5px 0;
}
#idx_ranking a {
    display: inline-block;
    width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#compare_ranking {
    padding: 10px 0;
}
#home #compare_ranking {
    padding: 0;
}
#home #idx_ranking {
    padding: 0;
}

#home #idx_ranking h2 ,
#home #compare_ranking h2 {
    background: url(/img/icon/ranking_hikaku.png) no-repeat 0 -1px;
	background-size: 30px;
    border-bottom: solid 1px #ccc !important;
    margin: 0;
	padding: 0 0 10px 40px !important;
    line-height: 1.5;
}
#compare_ranking h2 {
    background: url(/img/icon/ranking_hikaku.png) no-repeat 0 8px;
	background-size: 30px;
    border-bottom: solid 1px #ccc !important;
    margin: 0;
	padding: 0 0 10px 40px !important;
    line-height: 1.5;
}
#home #idx_ranking h2 {
    background: url(/img/icon/ranking_step.png) no-repeat 0 4px;
    background-size: 35px;
}
#home #idx_ranking ol ,
#home #compare_ranking ol {
    padding: 10px 10px 10px 12px;
    list-style: none;
}
#home #idx_ranking ol.under_3 ,
#home #compare_ranking ol.under_3 {
    padding: 10px 10px 0 12px;
}
#compare_ranking .wrap ol {
    display: inline-block;
    margin-bottom: 0;
    padding-bottom: 15px;
    font-size: 18px;
    color: #bbb;
    line-height: 1;
}
#compare_ranking .wrap ol.under_3 {
    padding-bottom: 0;
}
#idx_ranking ol.under_3 .number ,
#idx_ranking ol.over_3 .number ,
#compare_ranking ol.under_3 .number ,
#compare_ranking ol.over_3 .number {
    display: inline-block;
    width: 25px;
    margin-right: 5px;
    vertical-align: middle;
}
#compare_ranking ol.under_3 .number.over_10 {
    width: 45px;
}
#idx_ranking ol.over_3 .number ,
#compare_ranking ol.over_3 .number {
    color: #31c45b;
    font-size: 28px;
    font-weight: bold;
}
#idx_ranking ol.under_3 .number ,
#compare_ranking ol.under_3 .number {
    color: #bbb;
    font-size: 28px;
    font-weight: bold;
}
#compare_ranking .wrap ol.over_3 .number {
    color: #31c45b;
}
#compare_ranking .wrap ol.under_3 {
    border-top: dashed 1px #ccc;
    width: 100%;
    font-size: 18px;
}
#compare_ranking .wrap ol.over_3 li {
    padding: 0 10px 5px 0;
}
#compare_ranking .wrap ol.under_3 li {
    padding: 8px 10px 0 0;
}
#compare_ranking .wrap ol li:last-child {
    padding: 0;
}
#compare_ranking .over_3 {
	font-size: 28px;

}
#compare_ranking .rank_3 a ,
#compare_ranking .rank_2 a ,
#compare_ranking .rank_1 a {
    vertical-align: middle;
    font-size: 22px;
}
#compare_ranking .rank_10 a ,
#compare_ranking .rank_9 a ,
#compare_ranking .rank_8 a ,
#compare_ranking .rank_7 a ,
#compare_ranking .rank_6 a ,
#compare_ranking .rank_5 a ,
#compare_ranking .rank_4 a {
    font-size: 16px;
    vertical-align: middle;
}
#compare_ranking li {
    padding: 5px 0;
}
#compare_ranking .wrap ol .rank_number {
    font-weight: bold;
    font-size: 28px;
    margin-right: 4px;
    font-weight: bold;
}
#idx_ranking_popular {
    margin: 10px 0 0;
}
#idx_ranking_popular h2 {
    border-bottom: solid 1px #ccc;
    margin: 0 0 10px;
    padding: 0 0 10px;
}
#idx_ranking_popular h2 .icon {
    margin-right: 10px;
    vertical-align: middle;
    line-height: 1;
    width: 35px;
    position: relative;
    top: -3px;
}
.co_wrap {
    padding: 20px;
}
@media (max-width: 960px) {
    #compare_ranking h2 {
        background: url(/img/icon/ranking_hikaku.png) no-repeat 0 -2px;
        background-size: 30px;
    }
}
@media (max-width: 600px) {
    #home #idx_ranking h2 {
        background: url(/img/icon/ranking_step.png) no-repeat 2px 2px;
        background-size: 40px;
        padding: 0 0 10px 50px !important;
    }
    #home #compare_ranking h2 {
        background: url(/img/icon/ranking_hikaku.png) no-repeat 0 0;
        background-size: 30px;
    }
    #compare_ranking h2 {
        background: url(/img/icon/ranking_hikaku.png) no-repeat 0 2px;
        background-size: 30px;
    }
    #home #compare_ranking {
        padding: 0;
    }
    #spotlight_city .wrap {
    	font-size: 18px;
    }
    #compare_ranking .wrap {
        padding: 15px;
    }
    #compare_ranking .rank_3 a ,
    #compare_ranking .rank_2 a ,
    #compare_ranking .rank_1 a ,
    #compare_ranking .wrap ol.over_3 a {
        font-size: 18px;
    }
    #compare_ranking .wrap ol.under_3 a {
        font-size: 16px;
    }
    #compare_ranking ol .number {
        font-size: 25px;
    }
    #compare_ranking li {
        padding: 0 0 5px;
    }
    #compare_ranking .wrap ol.under_3 li {
        padding: 5px 0;
    }
    #compare_ranking .wrap ol.under_3 li:last-child {
        padding: 5px 0 0;
    }
    #compare_ranking .wrap ol .number {
        font-size: 28px;
    }
    #compare_ranking .wrap ol li {
        display: block;
    }
    #spotlight_city .h2 .icon {
        width: 30px;
    }
    #idx_ranking_popular .wrap span.number {
        padding: 5px 0 5px 10px;
    }
    #idx_ranking_popular h2 {
        margin-top: 20px;
        font-size: 22px;
    }
    #idx_ranking_popular h2 .icon {
        margin-right: 5px;
        width: 30px;
    }
    #idx_ranking_popular ol li {
        padding: 4px 0;
        line-height: 1;
    }
}
@media (max-width: 320px) {
    #spotlight_city h2 ,
    #compare_ranking h2 {
        font-size: 20px;
    }
}
ul.pager {
    display: inline-block;
}
ul.pager li {
    display: inline-block;
    border: solid 1px #ccc;
    margin: 2px;
    padding: 10px;
}
ul.pager li a {
}
.pager .current {
    background: #e6d826;
}
.pager_total_items {
    display: inline-block;
    padding: 0 0 0 10px;
}
.pager_total_items select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    color: #333;
    pointer-events: none;
}
#recommend_member_join {
    display: none;
}
.score {
    margin: 0;
    position: relative;
    top: 0;
    left: 0;
    height: 25px;
    width: 5em;
    height: 1em;
    font-size: 30px;
    line-height: 1;
}
.score .off ,
.score .on {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.score .off {
    z-index: 1;
    color: #ddd;
}
.score .on {
    color: #ffc61c;
    overflow: hidden;
    z-index: 2;
}
.vote_member {
    margin: 5px 0;
    text-align: right;
    font-size: 15px;
    position: relative;
    top: 5px;
    left: 0;
    color: #990000;
}
.vote_link {
    display: inline-block;
    margin: 0 0 0 5px;
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 12px;
    line-height: 1.1;
    z-index: 20;
}
.vote_link:visited {
    color: #fff;
}
#radar_chart_detail_wrap .score {
    display: inline-block;
    margin: 0;
    top: 0;
}
#body .aside #radar_chart_area h2 {
    margin-bottom: 10px;
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
}
#body .aside #radar_chart_area .header {
    background: #f5f5f5;
    margin: 10px 0;
    padding: 5px 10px;
}
#wavedash_links h2 {
    border-bottom: solid 1px #ccc;
    padding-bottom: 10px;
}
#wavedash_links h2 i {
    margin-right: 10px;
    font-size: 25px;
    vertical-align: middle;
}
#radar_chart_area h3 {
    margin: 0;
    color: #0069d9;
    font-size: 13px;
    text-align: center;
}
#radar_chart_area h3 .fas {
    color: #0069d9;
}
#radar_chart_area h3 span {
    font-family: verdana;
    font-weight: bold;
}
#radar_chart_area .caution {
    margin: 5px 0 0;
    font-size: 13px;
    text-align: left;
}
#recommend_spot_other .line {
    margin: 20px 0;
    border-bottom: solid 1px #ccc;
}
.radar_chart_detail {
    margin: 10px 0;
    text-align: right;
    color: #007bff;
    cursor: pointer;
    font-size: 15px;
}
.radar_chart_detail:hover {
    text-decoration: underline;
}
#radar_chart_detail_canvas_wrap {
    overflow: hidden;
    background: #f8f8f8;
    height: 300px;
    width: 100%;
    padding: 20px 10px;
}
#radar_chart_detail {
    display: none;
    text-align: left;
}
#radar_chart_detail_wrap {
    overflow: hidden;
}
#radar_chart_detail_wrap .title {
    position: relative;
    top: 0;
    left: 0;
}
#radar_chart_detail_wrap .title span {
    position: absolute;
    top: 5px;
    right: 10px;
    font-size: 16px;
    color: #990000;
}
#radar_chart_detail_wrap .caution {
    text-align: right;
}
#radar_chart_detail_wrap h3 {
    margin: 0;
}
#radar_chart_desp {
    display: none;
}
#radar_chart_desp h3 {
}
#radar_chart_desp dl ,
#radar_chart_detail_wrap .content {
    margin: 20px 0 30px 30px;
}
#radar_chart_detail_wrap .content ul li {
    border-bottom: dashed 1px #ccc;
    margin: 0 0 5px;
    padding: 5px 0;
}
#radar_chart_detail_wrap .content ul li.over_10 {
    display: none;
}
#radar_chart_detail_wrap .content ul li:last-child {
    border: none;
}
#radar_chart_detail_wrap .score {
    display: inline-block;
    margin: 10px;
    top: 0;
    vertical-align: middle;
}
#radar_chart_detail_wrap .comment_more {
    background: #f0f0f0;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 0;
    line-height: 1;
    cursor: pointer;
}
#radar_chart_detail_wrap .spot_comment {
    background: #f8f8f8;
    margin: 5px 0 10px 0;
    padding: 20px;
    font-size: 15px;
    line-height: 1.4;
    text-align: justify;
    text-justify: inter-ideograph;
}
#radar_chart_detail_wrap .spot_comment .row_2 ,
#radar_chart_detail_wrap .spot_comment .row_1 {
    padding-left: 0;
}

.fa ,
.far,
.fas {
    margin-right: 5px;
}
#mypage .modaal-outer-wrapper ,
#compare .modaal-outer-wrapper ,
#city .modaal-outer-wrapper {
    cursor: pointer;
}
#mypage .modaal-container ,
#compare .modaal-container ,
#city .modaal-container {
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}
#mypage .modaal-content-container ,
#compare .modaal-content-container ,
#city .modaal-content-container {
    border-top: solid 10px #29a14b;
    padding-top: 40px;
}
#mypage .modaal-content-container h3 ,
#compare .modaal-content-container h3 ,
#city .modaal-content-container h3 {
    border-bottom: solid 1px #ccc;
    margin: 0 0 20px;
    padding: 0 0 20px;
    font-size: 23px;
    font-weight: bold;
}
#mypage #radar_chart_detail_wrap h3.score_title ,
#compare #radar_chart_detail_wrap h3.score_title ,
#city #radar_chart_detail_wrap h3.score_title {
    margin: 0;
}
#mypage .modaal-content-container dl dt ,
#compare .modaal-content-container dl dt ,
#city .modaal-content-container dl dt {
    color: #003366;
}
#mypage .modaal-content-container dl dd ,
#compare .modaal-content-container dl dd ,
#city .modaal-content-container dl dd {
    border-bottom: dashed 1px #ccc;
    margin-bottom: 5px;
    padding: 5px 0 0 1.2rem;
    line-height: 1.2;
}
#mypage .modaal-content-container dl dd:last-child ,
#compare .modaal-content-container dl dd:last-child ,
#city .modaal-content-container dl dd:last-child {
    border: none;
}
#radar_chart_wrap {
    overflow: hidden;
    background: #f8f8f8;
    height: 180px;
    width: 100%;
    padding: 0 10px;
}
#radar_chart {
    border-radius: 20px;
    padding: 10px 0;
}
#radar_chart_area h2 {
    margin-bottom: 10px;
    font-size: 20px;
}
.chart_score_list {
    margin: 10px 0 20px 25px;
    font-size: 20px;
}
.chart_score_list td {
    vertical-align: middle;
}
.chart_score_list .vote_number {
    display: inline-block;
    margin: 0 0 0 5px;
}
aside .google_adsense {
    overflow: hidden;
    text-align: center;
}
aside .google_adsense .item {
    margin: 10px auto 0;
    vertical-align: middle;
}
#sumitsuzuketaimachi_ranking ,
#living_town_ranking {
	padding: 20px;
}
aside .banner {
    margin: 15px 0 0;
    text-align: center;
}
aside .banner img {
    border: solid 1px #ccc;
    width: 250px;
}
#sitemap article .d-table {
    width: 100%;
}
#sitemap article dl {
    width: 50%;
}
#sitemap article dl dd ul li span {
	display: inline-block;
	width: 20px;
    font-weight: bold;
    color: #31c45b;
}
#share {
    margin-top: 10px;
    background: #fff;
    padding: 20px;
}
#share ul {
    margin-bottom: 0;
}
#share ul li {
    margin-right: 10px;
    font-size: 35px;
    vertical-align: middle;
    width: auto;
}
#share ul li.head i {
    font-size: 16px;
}
#share ul li.head {
    font-size: 16px;
    font-weight: bold;
}
.release_ranking {
    background: #f0f0f0;
    padding: 10px;
    text-align: center;
}
@media (max-width: 1280px) {
    #body #radar_chart_area h2 {
        font-size: 17px;
    }
    aside .banner img {
        width: 100%;
    }
}
@media (max-width: 960px) {
    #pref main ,
    #city main {
        border-top: solid 1px #333;
    }
    .radar_chart_detail {
        font-size: 16px;
    }
    #radar_chart_wrap {
        width: 100%;
        height: 350px;
    }
    #body #radar_chart_area h2 {
        font-size: 24px;
    }
    #city .modaal-content-container h3 {
        font-size: 25px;
    }
    aside .banner img {
        width: 250px;
    }
    .radar_chart_detail {
        text-decoration: underline;
    }
}
/* mobile landscape */
@media (max-width: 600px) {
    #body #radar_chart_detail_wrap .score {
        margin-top: 0;
        margin-bottom: 0;
        padding-bottom: 10px;
    }
    .score_number {
        padding-bottom: 5px;
        height: 35px;
    }
    #radar_chart_detail_wrap .content.score {
        font-size: 25px;
    }
    #mypage .modaal-content-container h3,
    #compare .modaal-content-container h3,
    #city .modaal-content-container h3 {
        margin-top: 5px;
        font-size: 22px;
        padding-bottom: 15px;
    }
    #mypage #radar_chart_detail_wrap h3.score_title ,
    #compare #radar_chart_detail_wrap h3.score_title ,
    #city #radar_chart_detail_wrap h3.score_title {
        margin-top: 25px;
        font-size: 22px;
        padding-bottom: 15px;
    }
    #mypage .modaal-content-container,
    #compare .modaal-content-container,
    #city .modaal-content-container {
        padding-top: 20px;
    }
    .sp.scroll-prevent {
      position: fixed;
      z-index: -1;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
    }
    .sp #header_wrap.nav {
        background: #fff;
        overflow: scroll;
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        -webkit-overflow-scrolling: touch;
        overflow-y: scroll;
        z-index: 100;
    }
    #radar_chart_desp dl ,
    #radar_chart_detail_wrap .content {
        margin: 20px 0 30px 0;
    }
    #radar_chart_detail_wrap .score {
        margin: 10px;
    }
    .vote_member {
        margin: 15px 0;
    }
    .modaal-outer-wrapper .modaal-inner-wrapper {
        padding-left: 15px;
        padding-right: 15px;
    }
    .modaal-inner-wrapper .modaal-content-container {
        padding: 20px 20px;
    }
    #radar_chart_detail_wrap h3 {
        margin: 20px 0 0;
        padding: 0 0 10px;
        font-size: 21px;
    }
    #radar_chart_detail_canvas_wrap {
        box-sizing: border-box;
    }
    #radar_chart_detail_wrap .score {
        margin: 0 0 0 65px;
    }
    #radar_chart_detail_wrap .title span {
        display: block;
        position: relative;
        text-align: right;
        top: 5px;
    }
    #radar_chart_wrap {
        height: 300px;
    }
    .chart_score_list td {
        display: inline-block;
    }
    #radar_chart_detail_wrap .chart_score_list {
        margin-left: 0;
        margin-bottom: 10px;
    }
    .vote_link {
        margin-left: 0;
        text-decoration: none;
    }
    #sitemap article dl.d-table-cell {
        display: block !important;
        width: 100%;
    }
    #city_re_search .desktop {
        display: none;
    }
}
@media (max-width: 600px) {
	#signup .table.conf th,
	#signup .table.conf td {
		display: block;
		width: 100%;
		border-top: none;
	}
	#signup .table.conf th {
		border-bottom: solid 1px #ccc;
		padding: 10px;
		font-weight: bold;
	}
	#signup .table.conf td {
		padding: 15px 25px;
	}
	#signup .mt-3 {
		margin-top: 2em !important;
	}
	#signup .conf th span {
		border-left: solid 5px #ccc;
		padding: 5px 10px;
		font-size: 18px;
	}
	#signup dl {
		display: block;
		width: 100%;
	}
	#signup p.description {
		margin: 0 0 10px;
		padding: 0;
	}
	#signup p.desp {
		min-height: 60px;
	}
}

/* mobile iphoneSE */
@media (max-width: 320px) {
    #body #city_re_search {
        padding-right: 10px;
    }
    #pref h1 i,
    #city h1 i {
        display: none;
    }
    #radar_chart_detail_wrap a i {
        display: none;
    }
    #radar_chart_detail_canvas_wrap {
        height: 250px;
    }
    #compare_choice .compare_col {
        width: 43%;
    }
    #compare .compare_city .name {
        width: 100%;
    }
    #compare .compare_city .img {
        position: relative;
        top: 0;
        left: 0;
    }
    #city #city_info_link .box,
    #city #city_info_link li a ,
    #compare #city_info_link .box,
    #compare #city_info_link li a {
        width: 35px;
    }
    #compare .login_capture .board {
        padding: 20px 10px;
    }
    .input_wrap .label_title {
        font-size: 17px;
    }
}
#user_voice {
    position: fixed;
    margin-left: -650px;
    left: 50%;
    bottom: 5px;
    width: 70%;
    overflow: hidden;
}
#user_voice .post_wrap {
    position: relative;
    top: 0;
    left: 0;
}
#user_voice ul li {
    position: relative;
    top: 0;
    left: 0;
    overflow: auto;
}
#user_voice .close_post {
    position: absolute;
    top: 3px;
    right: 3px;
    display: inline-block;
    border-radius: 25px;
    width: 20px;
    height: 20px;
    line-height: 1;
    font-size: 20px;
    cursor: pointer;
}
@media (max-width: 1280px) {
    #user_voice {
        margin-left: 0;
        left: 10px;
    }
}
#user_voice {
    z-index: 21;
}
#user_voice ul li {
    border: solid 2px #31c45b;
    background: #fffeee;
    border-radius: 10px;
    display: none;
    padding: 5px 10px;
    width: 90%;
    overflow: hidden;
    -o-text-overflow: ellipsis;
    text-overflow:    ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}
#user_voice ul li a {
    overflow: hidden;
}
#user_voice ul li i.fa-comment {
    vertical-align: middle;
    position: relative;
    top: 0;
    left: 0;
}
#user_voice ul li.on i.fa-comment {
    position: relative;
    top: 0;
    left: 0;
}
#user_voice ul li .fa-comment {
    animation: bounce 2s ease normal 0s none running;
    -webkit-animation: bounce 2s ease normal 0s none running;
    -ms-animation:bounce 2s ease normal 0s none running;
}
#user_voice ul li.male .sex ,
#user_voice ul li.male .age {
    color: #003366;
}
#user_voice ul li.female .sex ,
#user_voice ul li.female .age {
    color: #990000;
}
@keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
@-webkit-keyframes bounce {
    0%, 100%, 20%, 50%, 80% {
        transform: translateY(0px);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}
#city_user_voice_list {
}
#city #city_user_voice_list h2.h2 {
    margin: 30px 0 10px;
}
#city #city_user_voice_list h3 {
    background: #f5f5f5;
    border-bottom: solid 1px #ccc;
    margin: 10px 0 20px 0;
    padding: 20px 0 20px 10px;
    font-size: 20px;
    font-weight: bold;
}
#city #city_user_voice_list ul li {
    margin-left: 25px;
}
#city_user_voice_list ul li.over_10 {
    display: none;
}
#city_user_voice_list .comment_more {
    background: #f0f0f0;
    text-align: center;
    border-radius: 5px;
    margin-bottom: 10px;
    padding: 15px 0;
    line-height: 1;
    cursor: pointer;
}
@media (max-width: 960px) {
    #city #city_user_voice_list ul li {
        margin-left: 10px;
    }
}
#city #city_user_voice_list .spot_comment {
    background: #f8f8f8;
    margin: 5px 0 10px 0;
    padding: 20px;
    font-size: 15px;
    line-height: 1.4;
    text-align: justify;
    text-justify: inter-ideograph;
}
#city_user_voice_list .male .age ,
#city_user_voice_list .male .sex {
    color: #003366;
}
#city_user_voice_list .female .age ,
#city_user_voice_list .female .sex {
    color: #990000;
}

#mail_drop_caution {
    background: #ffeef5;
    margin-bottom: 20px;
    padding: 20px;
}
#mail_drop_caution h2 {
    margin-bottom: 20px;
    text-align: center;
    font-size: 25px;
}
#mail_drop_desp {

}
#mail_drop_desp dt {
    color: #003366;
}
#mail_drop_desp dd {
    margin: 0 0 10px;
    padding: 10px 0 10px 1rem;
    border-bottom: dashed 1px #ccc;
}
#mail_drop_desp dd:last-child {
    border-bottom: none;
}
@media (max-width: 600px) {
    #mail_drop_caution h2 {
        margin-bottom: 10px;
        font-size: 20px;
    }
    #mail_drop_caution ul li {
        padding-bottom: 10px;
    }
    #mail_drop_caution ul li:last-child {
        padding-bottom: 0;
    }
    #mail_drop_desp {
        padding: 0 10px;
    }
}
aside #twitter_timeline {
    background: #fff;
    margin: 10px 0 0;
}
aside #twitter_timeline h2 {
    margin: 0;
    padding: 10px 15px;
    font-size: 14px;
}
aside #twitter_timeline h2 i {
    font-size: 20px;
    vertical-align: middle;
}

#body #rank_minna_wrap {
	width: 100%;
	background: #f5eb3c;
	margin: 10px 0 0;
	padding: 10px;
}
#body aside #rank_minna_wrap {
    margin: 0 0 10px 0;
}
#pref aside #rank_minna_wrap ,
#city aside #rank_minna_wrap {
    margin: 10px 0;
}
#body #rank_minna_wrap .title {
	width: 200px;
}
#body #rank_minna_wrap.short .title {
	width: 150px;
}
#body #rank_minna_wrap div {
	display: table-cell;
	vertical-align: middle;
}
#body #rank_minna_wrap.aside div {
	display: block;
}
#body #rank_minna_wrap div:first-child {
	text-align: center;
}
#body #rank_minna_wrap div.wrap {
	border-radius: 10px;
	background: #f0efd4;
	padding: 10px;
}
#body #rank_minna_wrap div.wrap.second {
    margin-top: 10px;
}
#body #rank_minna_wrap h2 {
	border-bottom: solid 1px #ccc;
	margin: 0;
	padding: 5px 10px 10px;
	font-size: 18px;
	color: #595411;
    text-align: center;
}
#body #rank_minna_wrap h2 i {
}
#body #rank_minna_wrap h2 img {
	margin: -5px 5px 0 0;
	width: 30px;
}
#body #rank_minna_wrap ul {
	margin: 0;
	padding: 10px;
	background: #fff;
}
#body #rank_minna_wrap ul li {
	list-style: none;
    border-bottom: dashed 1px #ccc;
    margin-bottom: 5px;
    padding: 5px 0;
	font-size: 15px;
}
#body #rank_minna_wrap ul li.history {
    text-align: right;
    font-size: 14px;
}
#body #rank_minna_wrap ul li:last-child {
    border-bottom: none;
    margin-bottom: 0;
}
#body #rank_minna_wrap ul li .fa-check-square {
    color: #ccc;
}
#body #rank_minna_wrap ul li.vote_finish a {
    color: #666;
}
#body #rank_minna_wrap ul#rank_minna_result_list li {
}
#rank_minna_links {
    text-align: center;
}
#rank_minna_links .wrap {
    display: inline-block;
    border-radius: 50px;
    background: #fffee2;
    margin: 0 auto;
    padding: 20px 40px;
    font-weight: bold;
    font-size: 25px;
}
#body #other_rank_minna .btn {
    margin-bottom: 20px;
}
@media (max-width: 600px) {
	#body #rank_minna_wrap .title {
		width: 150px;
	}
	#body #rank_minna_wrap.short .title {
		width: 120px;
	}
	#body #rank_minna_wrap div:last-child {
		padding: 10px;
	}
    #body #rank_minna_wrap div:first-child {
		margin-bottom: 5px;
	}
	#body #rank_minna_wrap div {
		display: block;
	}

    #rank_minna_links .wrap {
        padding: 15px 20px;
        width: 85%;
        font-size: 18px;
    }
}
@media (max-width: 320px) {
    #body #share ul {
        padding: 0 10px;
    }
}
#preview_wrap_cover {
	transform: rotate(20deg);
	background: transparent url(/img/preview.png) repeat;
    position: fixed;
	top: -20%;
	left: -20%;
    width: 200%;
    height: 200%;
    opacity: 0.2;
	z-index: 100;
}
#preview_msg {
	position: fixed;
	top: 20px;
	right: 20px;
	background: #fff;
	border: solid 5px #73879C;
	padding: 10px 20px;
	border-radius: 5px;
	color: #73879C;
	font-weight: bold;
	font-size: 25px;
	z-index: 101;
}
#preview_msg a:visited ,
#preview_msg a {
	color: #73879C;
}
.read_more {
    text-decoration: underline;
    color: #0056b3;
    cursor: pointer;
}
.read_more_detail {
    display: none;
}
.cmp_banner img {
    width: 100%;
    margin-bottom: 10px;
}
.emoji {
	font-family: "Segoe UI Emoji",
                 "Segoe UI Symbol",
                 "Apple Color Emoji",
                 "Noto Color Emoji",
                 "Noto Emoji",
                 sans-serif;
}
.w_100 {
	width: 100%;
}
.item_square {
}
.item_rectangle {
    display: none;
}
@media (max-width: 960px) {
    .item_square {
        display: none;
    }
    .item_rectangle {
        display: block;
    }
}
@media (max-width: 600px) {
    .item_square {
        display: block;
    }
    .item_rectangle {
        display: none;
    }
}

/**/
.ad_banner {
    text-align: center;
}
.lifull_data {
    display: none;
    margin: 10px 0 20px;
}
.lifull_data .h3 ,
.lifull_data h3 {
    font-weight: bold;
    font-size: 16px;
}
.lifull_data ul li {
    margin-bottom: 10px;
    border-bottom: dashed 1px #ccc;
}
.lifull_data .lifull_text ,
.lifull_data .lifull_img {
    display: table-cell;
    vertical-align: top;
}
.lifull_data .lifull_img img {
    margin-bottom: 10px;
    width: 80px;
    vertical-align: top;
}
.lifull_data .lifull_text {
    padding: 0 10px;
    font-size: 12px;
    overflow: hidden;
}
.lifull_data .lifull_text a {
    display: inline-block;
}
.lifull_data .lifull_text .details {
    float: right;
    background: #31c45b;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 5px 5px 5px 10px;
    border-radius: 5px;
    line-height: 1;
}
.lifull_data .lifull_text .details a {
    color: #fff;
}
.lifull_link {
    margin-bottom: 20px;
}
.lifull_detail_link_item.compare {
     margin-top: 10px;
}
.lifull_detail_link_item ,
.lifull_link li {
    border-radius: 5px;
    background: #31c45b;
    margin: 0 0 5px;
    font-size: 15px;
    text-align: center;
}
.lifull_detail_link_item a,
.lifull_link li a {
    display: inline-block;
    padding: 10px;
    width: 100%;
    color: #fff;
    font-weight: bold;
}
.lifull_link_item {
    display: none;
}
.lifull_caution {
    display: none;
    font-size: 12px;
    text-align: right;
}
.no_photo {
    display: inline-block;
    width: 80px;
    height: 60px;
    background: #f0f0f0;
    color: #555;
    padding: 20px 10px;
    text-align: center;
    vertical-align: top;
    font-size: 11px;
    font-style: italic;
}
#compare .lifull_data_wrap {
    display: table-cell;
    width: 50%;
    border-collapse: separate;
    border-spacing: 5px;
}
#compare .lifull_data {
    width: 100%;
}
#compare .table-row {
    display: table-row;
}
#compare .lifull_compare_wrap {
    display: table;
    width: 100%;
    border-spacing: 10px;
}
.lifull_data .lifull_text .details a ,
.lifull_detail_link_item a ,
.lifull_link a ,
#estate .lifull_data .lifull_text .details a {
    text-decoration: none;
}
.lifull_data .h3 .pickup ,
.lifull_data h3 .pickup {
    display: inline-block;
    margin-left: 5px;
    background: #dfdd09;
    padding: 3px 5px;
    line-height: 1;
    color: #000;
    font-size: 13px;
    vertical-align: middle;
}
@media (max-width: 600px) {
    #compare .lifull_data {
        margin-bottom: 10px;
    }
    #compare .lifull_data {
        display: block;
        width: 100%;
    }
}
#compare .lifull_data ul {
    margin-bottom: 0;
}
#compare .lifull_data ul li {
    background: #fff;
    margin-bottom: 0;
    padding: 10px;
}
#compare .lifull_data ul li:last-child {
    border-bottom: none;
}
#lifull_list_house_1 {
    margin-right: 10px;
}
#lifull_list_house_1 ,
#lifull_list_mansion_1 {
    border: solid 1px #000;
    background: rgba(49, 196, 91, 0.1);
    padding: 10px;
}
#lifull_list_house_2 ,
#lifull_list_mansion_2 {
    border: solid 1px #000;
    background: rgba(84, 157, 214, 0.1);
    padding: 10px;
}
#sumitaimachi .rank_2_5 .link,
#sumitaimachi .rank_1 .link {
    margin-left: 0;
    text-align: center;
}
#sumitaimachi .city_detail {
    margin-right: 0;
    display: inline-block;
    width: 96%;
}
#sumitaimachi .city_detail.estate {
    margin-right: 0;
    display: inline-block;
    width: 48%;
    background: #fff1da;
    color: #eb5d17;
    vertical-align: top;
}
#sumitaimachi .city_detail.estate:hover {
    background: #ed6103;
    color: #fff;
}
.lifull_side_wrap {
    display: table;
    width: 100%;
}
.lifull_side_wrap .lifull_img {
    width: 15%;
}
@media (max-width: 600px) {
    #compare .lifull_data_wrap {
        display: block;
        width: 100%;
    }
}

#reguide_links {
    display: table;
    border-collapse: separate;
    border-spacing: 5px;
    width: 100%;
}
#reguide_links .link {
    border: solid 1px #ccc;
    padding: 5px;
    display: table-cell;
}
#reguide_links.column_2 .link {
    background: #fff;
    width: 50%;
    text-align: left;
}
#reguide_links.column_3 .link {
    background: #fff;
    width: 33.3%;
    text-align: left;
}
#reguide_links .desc ,
#reguide_links .img ,
#reguide_links .link {
    display: table-cell;
    vertical-align: top;
}
#reguide_links .link img {
    margin: 0 10px 0 0;
}
#reguide_links .link p {
    margin: 0;
    font-size: 14px;
}
@media (max-width: 960px) {
    #reguide_links .desc ,
    #reguide_links .img {
        display: block;
    }
    #reguide_links .img img {
    }
}
@media (max-width: 600px) {
    #reguide_links.column_3 .link ,
    #reguide_links.column_2 .link ,
    #reguide_links .link {
        display: block;
        width: 100%;
    }
    #reguide_links .link:first-child {
        margin-bottom: 10px;
    }
    #reguide_links .desc ,
    #reguide_links .img {
        display: table-cell;
    }
    #reguide_links .img img {
        width: auto;
    }
}

#rank_minna .city_detail {
	display: block;
	border-radius: 10px;
	background: #e2eef4;
	color: #003366;
	margin: 0 25px 20px 0;
	padding: 10px;
	font-weight: bold;
	text-align: center;
	box-shadow: 0 2px #003366;
	text-decoration: none;
}
#rank_minna .city_detail {
    margin-right: 0;
    display: inline-block;
    width: 100%;
}
#rank_minna .city_detail.estate {
    margin-right: 0;
    display: inline-block;
    width: 49%;
    background: #fff1da;
    color: #eb5d17;
    vertical-align: top;
}
#rank_minna .city_detail.estate:hover {
    background: #ed6103;
    color: #fff;
}