@charset "utf-8";


/*共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

/*全体の設定
---------------------------------------------------------------------------*/
html {
	scroll-behavior: smooth;
}

body {
    margin: 0px;
    padding: 0px;
	color: #222222;	/*全体の文字色*/
	font-family: "游ゴシック体","Yu Gothic",YuGothic,"ヒラギノ角ゴ ProN","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;	/*フォント種類*/
	font-size: 16px;	/*文字サイズ*/
	line-height: 1.6;		/*行間*/
	-webkit-text-size-adjust: 100%;
	overflow-x: hidden;
}
h1,h2,h3,h4,h5,p,ul,ol,li,dl,dt,dd,form,figure,form {margin: 0px;padding: 0px;}
ul {list-style-type: none;}
img {border: none;height: auto;}
iframe {width: 100%;}


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


/*リンク（全般）設定
---------------------------------------------------------------------------*/
a {
}



.bgred{
background-color: red;
}

.bgblue{
background-color: blue;
}




/*コンテンツエリア
---------------------------------------------------------------------------*/

#contents{
width: 100%;
background-color: #fff;
}


#contents .inner{
max-width: 960px;
margin: 0 auto;
box-sizing: border-box;
}

#contents #top .fv img{
width: 100%;
}

#contents #search{
margin:30px auto 30px;
}

#contents #search .inner{
border: solid 1px #004444;
background-color: #f5f5f5;
}

#contents #search h3{
background-color: #004444;
text-align: center;
color: #fff;
font-weight: normal;
padding: 10px;
}

.accbox form{
padding: 16px;
}

.form-wrap form{
padding: 16px;
}


#contents #search table{
width: 100%;
}

#contents #search table tr th{
padding: 4px 8px;
width: 35%;
}

#contents #search table tr td{
padding: 4px 8px;
}

#contents #search table tr td select{
    width: 100%;
    height: 50px;
    display: block;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #c0c0c0;
    font-size: 16px;
}

#contents #search input[type="submit"]{
    width: 50%;
    height: 60px;
    margin: 16px auto;
    padding: 0 20px;
    display: block;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    background:   #009bd6;
;
    color: #fff;
    font-weight: bold;
    cursor: pointer;

}




#contents #search .inner label{
display: block;
width: 100%;
background-color: #004444;
text-align: center;
color: #fff;
font-weight: normal;
padding: 10px;
font-size: 18px;
    cursor :pointer;
    transition: all 0.5s;
position: relative;
}

.accbox label:after{
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f053";/*アイコンのユニコード*/
  font-weight: 900;
    position: absolute;
    right: 8px;

}


.accbox input.cssacc{
display: none;
}


.accbox form{
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

.cssacc:checked + label + form{
    height: auto;
        padding: 16px;
            opacity: 1;
}

.cssacc:checked + label:after{
  content: "\f078";
}




/*概要
---------------------------------------------------------------------------*/

#contents .about .inner{
padding: 8px;
}

#contents .about h3{
margin: 16px auto 32px;
padding: 26px;
color: #fff;
font-weight: normal;
text-align: center;
background-color: #009bd6;
font-size: 18px;
}

#contents .about h4{
 padding: 8px;
  border-left: solid 5px #666;
  border-bottom: solid 1px #666;
  font-size: 18px;
  margin: 16px 0px;
}

#contents .about table{
width: 100%;
border-collapse: collapse;
  border-spacing: 0;
}

#contents .about table th{
text-align: left;
width: 30%;
}

#contents .about table th,#contents .about table td{
border-bottom:  dotted 1px #009bd6;
border-top:   dotted 1px #009bd6;
padding: 16px 8px;
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}


#contents .result a img.banner_school{
width: 100%;
margin-top: 8px;
margin-bottom: 8px;
}


@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}



/*調査概要
---------------------------------------------------------------------------*/
#contents #survey{
padding: 0 8px;
}

#contents #survey h3{
text-align: center;
padding: 16px;
font-size: 24px;
border-radius: 15px;
background: #eef5f8;
margin: 30px 0 30px;
}

#contents #survey p{
margin: 0 0 30px;
}

#contents #survey p:last-child{
margin: 0 0 60px;
}

#contents #survey h4{
padding: 8px 16px;
background: #eef5f8;
display: inline-block;
border-radius: 5px;
margin: 0 0 10px;
}





/*その他
---------------------------------------------------------------------------*/



#contents footer{
margin-top: 45px;
text-align: center;
background-color: #333333;
color: white;
}

#contents footer #footermenu{
background-color: #004444;
overflow: hidden;
padding: 16px 8px;
}

#contents footer #footermenu .inner{


}

#contents footer #footermenu ul{
float: left;
width: 25%;
padding-left: 16px;
}

#contents footer #footermenu ul li{
text-align: left;
text-decoration: none;

}

#contents footer #footermenu ul li a{
font-size: 12px;
color: #fff;
}

#contents footer #about{
padding: 8px 0px 0px;
}

#contents footer #about a{
color: #fff;
font-size: 12px;
}

#contents footer #copyright{
padding: 8px 0px;
font-size: 12px;
}


span.yellow{
background: #ffd966;
font-weight: bold;
}

span.pink{
background:  linear-gradient(transparent 70%,#ffcdd2 0%);
font-weight: bold;
}

span.blue{
background:  linear-gradient(transparent 70%,#ccffff 0%);
font-weight: bold;
}


span.red{
color: #ff3300;
font-weight: bold;
}

span.gray{
color: #999999;
}

span.bgblue{
background-color:#009bd6;
color: #fff;
padding: 2px;
}

span.cyellow{
color: yellow;
}




p.center{
text-align: center;
}


span.big{
font-size: 120%;
}

span.bold{
font-weight: bold;
}

.bold{
font-weight: bold;
}

span.small{
font-size: 80%;
}

span.exsmall{
font-size: 50%;

}

span.midsmall{
font-size: 85%;
}

span.gold{
color: #ffcc00;
}

span.score{
font-family: 'Anton', sans-serif, cursive;
font-size: 110%;
color: #ff3366;
}

.center{
text-align: center;
}




.sp{
display: none;
}



#contents #main .center{
text-align: center;
}

/*_new
---------------------------------------------------------------------------*/

#contents #top02{
}


#contents #top02 header{
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 0;
}

#contents #top02 header img.logo{
}

#contents #top02 header .btn-wrap{
display: flex;
}

#contents #top02 header .btn-wrap a{
display: block;
margin: 0 15px 0 0;
padding: 0 15px 30px 15px;
position: relative;
white-space: nowrap;
}

#contents #top02 header .btn-wrap a:last-child{
margin: 0;
}

#contents #top02 header .btn-wrap a:after{
position: absolute;
bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
z-index: 100;
color: #666;
font-size: 14px;
font-weight: bold;

}

#contents #top02 header .btn-wrap a.btn1:after{
content: "コラム";
}

#contents #top02 header .btn-wrap a.btn2:after{
content: "エリア別";
}

#contents #top02 header .btn-wrap a.btn3:after{
content: "ランキング";
}


#contents #top02 img.logo-link{
text-align: center;
margin: 15px auto 15px;
display: block;
width: 210px;
}

#contents #top02 img#new_fv{
width: 100%;
}

#contents #top02 .area_fv{
position: relative;
margin: 0 0 60px;
}

#contents #top02 .area_fv img{
width: 100%;
}

#contents #top02 .area_fv .txt{
width: 100%;
color: #333;
position: absolute;
font-size: 38px;
font-weight: bold;
top: 30.5%;
text-align: center;
}

#contents #top02 .area_fv .txt span.color{
color: #3399cc;
}


#contents #top02 #compare{
margin: 0 0 60px 0;
}

#contents #top02 #compare .inner{
padding: 0px 15px 15px;
  background: #fff;
}

#contents #top02 #compare .tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:20px 0 0;
}
#contents #top02 #compare .tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #009bd6;
  display: block;
  order: -1;
}
#contents #top02 #compare .tab-label {
  color: White;
  background: LightGray;
  font-weight: bold;
  text-shadow: 0 -1px 0 rgba(0,0,0,.2);
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  flex: 1;
}
#contents #top02 #compare .tab-label:not(:last-of-type) {
  margin-right: 5px;
}
#contents #top02 #compare .tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
#contents #top02 #compare .tab-switch:checked+.tab-label {
  background: #009bd6;
}
#contents #top02 #compare .tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 30px;
  opacity: 1;
  transition: .5s opacity;
  background: #fff;

}
/* ラジオボタン非表示 */
#contents #top02 #compare .tab-switch {
  display: none;
}

table.compare_table{
width: 100%;
font-size: 20px;
color: #666;
border-collapse: collapse;
}

table.compare_table th,table.compare_table td{
border: solid 1px #ddd;
}

table.compare_table th{
font-size: 20px;
padding: 12px 0 10px;
background: #009bd6;
color: #fff;
}

table.compare_table td{
text-align: center;
padding: 10px 20px;
}

table.compare_table tr:nth-child(2) td:nth-child(1){
position: relative;
padding: 30px 20px 10px;
}

table.compare_table td:nth-child(2),table.compare_table td:nth-child(3),table.compare_table td:nth-child(4){
width: calc((890px - 340px) / 3);
}

table.compare_table td.ev01{
background: url(../images/reha_compare_icon01.png);
}

table.compare_table td.ev02{
background: url(../images/reha_compare_icon02.png);
}

table.compare_table td.ev03{
background: none;
}

table.compare_table td.ev01,table.compare_table td.ev02,table.compare_table td.ev03{
background-repeat: no-repeat;
background-size: 100px;
background-position: center;
background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;
text-shadow: 2px 2px 0 #fff,2px 0px 0 #fff,0px 2px 0 #fff,0px -2px 0 #fff,-2px 0px 0 #fff,-2px 2px 0 #fff,2px -2px 0 #fff,-2px -2px 0 #fff;
}


table.compare_table th:nth-child(1){
width: 340px;
}

img.compare_table_logo{
width: 320px;
}

a.compare_table_logo_wrap{
display: inline-block;
}

a.compare_table_linkbutton{
display: block;
background: #ff3300;
color: #fff;
padding: 10px 0px;
text-decoration: none;
border-radius: 10px;
width: 240px;
margin: 0 auto 5px;
position: relative;
overflow: hidden;
font-size: 20px;
text-align: center;
font-weight: bold;
box-shadow: 0 5px 0 #B62400;
}

a.compare_table_linkbutton:after{
 content: "";
  display: block;
  width: 20px;
  height: 100%;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #FFF;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflect 2s ease-in-out infinite;
  -webkit-transform: rotate(45deg);
  -webkit-animation: reflect 2s ease-in-out infinite;
}

@keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflect {
  0% { transform: scale(0) rotate(45deg); opacity: 0; }
  80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
  81% { transform: scale(4) rotate(45deg); opacity: 1; }
  100% { transform: scale(50) rotate(45deg); opacity: 0; }
}

.compare_table_score{
font-size: 28px;
font-family: 'Anton', sans-serif, cursive;
color: #ff4b4b;
}

.compare_table_score i{
color: #f0ee2f;
vertical-align: 4px;
}

a.compare_table_review{
display: inline-block;
margin: 5px 0 0;
text-decoration: none;
font-size: 20px;
color: #9AC5ED;
font-weight: bold;
}

span.compare_table_review_span{
text-decoration: underline;
}


a.compare_table_review:before{
  font-family: "Font Awesome 5 Free";
  content: "\f4ad";
  font-weight: 900;
  margin: 0 5px 0 0;
}

span.compare_table_amount_span{
font-size: 28px;
font-weight: bold;
color: #222;
}

span.compare_table_area_span{
font-size: 28px;
font-weight: bold;
color: #222;
}

.compare_table_td_label_wrap{
position: absolute;
top:0;
left:0;
}

.compare_table_td_label{
font-size: 20px;
height: 32px;
line-height: 1;
padding: 4px 0px 8px 10px;
color: #fff;
background: #CAA846;
text-shadow: none;
position: relative;
font-weight: bold;
text-shadow: 0 -2px 0 #B58B11;
}

.compare_table_td_label i{
font-size: 18px;
vertical-align: 2px;
color: #DEC784;
}

.compare_table_td_label:after{
position: absolute;
content: '';
top: 0;
right: -18px;
width: 0;
height: 0;
border-style: solid;
border-width: 32px 18px 0 0;
border-color: #CAA846 transparent transparent transparent;
}

p.compare_table_addition{
margin: 10px 0 0;
font-size: 20px;
color: #888;
}

#contents #top02 #compare #recommend{

}

#contents #top02 #compare #recommend .row{
margin: 0 0 30px;
}

#contents #top02 #compare #recommend .row:last-child{
margin: 0;
}

#contents #top02 #compare #recommend .recommend-box{
position: relative;
padding: 30px;
}


#contents #top02 #compare #recommend .recommend-box:before{
border-left: solid 2px #009bd6;
border-top: solid 2px #009bd6;
top: 0;
left: 0;
}

#contents #top02 #compare #recommend .recommend-box:after{
border-right: solid 2px #009bd6;
border-bottom: solid 2px #009bd6;
bottom: 0;
right: 0;
}

#contents #top02 #compare #recommend .recommend-box:before, #contents #top02 #compare #recommend .recommend-box:after{
    content: '';
    width: 40px;
    height: 40px;
    position: absolute;
}

#contents #top02 #compare #recommend .recommend-box .logo{
display: block;
margin: 0 auto 0;
}

#contents #top02 #compare #recommend .recommend-box a.txtlink{
display: block;
text-align: center;
font-size: 18px;
margin: 0 0 15px;
}

#contents #top02 #compare #recommend .recommend-box a.txtlink:before{
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f35d";/*アイコンのユニコード*/
  font-weight: 900;
  margin-right: 5px;
}

#contents #top02 #compare #recommend .recommend-box .title{
font-size: 30px;
text-align: center;
position: relative;
}

#contents #top02 #compare #recommend .recommend-box .title:before{

display: inline-block;
content:'';
background: url(../images/reha_recommend-title_icon.png);
background-size: cover;
width: 24px;
height: 32px;
vertical-align: 12px;
margin-right: 4px;

}

#contents #top02 #compare #recommend .recommend-box .title span.color{
color: #009bd6;
font-weight: 500;
}

#contents #top02 #compare #recommend .recommend-box p{
font-weight: bold;
}




#contents #top02{

}


#contents #main02{
color: #222222;
}

#contents .h2-wrap{
display: flex;
justify-content:center;
align-items: center;
border-bottom: solid 1px #009bd6;
position: relative;
margin-bottom: 30px;
}


#contents .h2-wrap .left{
margin-right: 20px;
}

#contents .h2-wrap .h2-subtitle01{
display: inline-block;
font-size: 24px;
font-weight: bold;
background: #009bd6;
color: #fff;
padding: 3px 30px;
border-radius: 30px;
margin-bottom: 15px;
}

#contents .h2-wrap .h2-subtitle02{
font-size: 36px;
font-weight: bold;
}

#contents h2{
font-size: 52px;
line-height: 1.25;
}

#contents #main02 .point h3{
position: relative;
margin-top:180px;
text-align: center;
font-size: 38px;
margin-bottom: 30px;
}

#contents #main02 .point h3:before{
    content: '';
    display: inline-block;
    width: 38px;
    height: 38px;
    background-image: url(../images/md_icon_h3.png);
    background-size: contain;
    vertical-align: -4px;
    margin-right: 15px;

}

#contents #main02 .point h3.h01:after{
position: absolute;
content: "01";
font-size: 100px;
top:-140px;
left: 44%;
color: #99cccc;
z-index: 100;
}

#contents #main02 .point h3.h02:after{
position: absolute;
content: "02";
font-size: 100px;
top:-140px;
left: 44%;
color: #99cccc;
z-index: 100;
}

#contents #main02 .point img.images{
display: block;
margin: 0 auto 30px;
}

#contents #main02 .point h4{
font-size: 24px;
text-align: center;
padding: 0 100px;
margin: 0 0 30px;
}

#contents #main02 .point p{
font-size: 18px;
padding: 0 100px;
margin: 0 0 60px;
}

#contents #main02 .point p:last-child{
margin-bottom: 120px;
}


#contents #main02 .recommend{
text-align: center;
}

#contents #main02 .recommend h3{
    display: inline-block;
    position: relative;
    font-size: 38px;    
    margin-bottom: 40px;
}

#contents #main02 .recommend h3 span.color{
color: #009bd6;
}

#contents #main02 .recommend h3:before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -10px;
    display: inline-block;
    width: 80px;
    height: 4px;
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translate(-50%);
    background-color: #009bd6;
}

#contents #main02 .recommend .box{
display: flex;
padding: 0 100px;
align-items: center;
margin-bottom: 15px;
}

#contents #main02 .recommend .box .logo-box{
margin-right: 30px;
background-image:url(../images/md_new_icon-logobox.png);
background-repeat: no-repeat;
background-position:center;
position: relative;
padding: 15px;
}

#contents #main02 .recommend .box .logo-box::before,#contents #main02 .recommend .box .logo-box::after {
	content: '';
	width: 40px;
	height: 40px;
	position: absolute;
}

#contents #main02 .recommend .box .logo-box::before {
	border-left: dotted 2px #009bd6;
	border-top: dotted 2px #009bd6;
	top: 0;
	left: 0;
}

#contents #main02 .recommend .box .logo-box::after {
	border-right: dotted 2px #009bd6;
	border-bottom: dotted 2px #009bd6;
	bottom: 0;
	right: 0;
}

#contents #main02 .recommend .box .logo-box img{
width: 300px;
}

#contents #main02 .recommend .box .logo-box img:first-child{
margin-bottom: 60px;
}

#contents #main02 .recommend .box p{
text-align: left;
font-weight: bold;
}


#contents #main02 .recommend .link{
display: flex;
padding: 0 100px;
justify-content: space-between;
margin-bottom: 80px;
}

#contents #main02 .recommend .link.sp{
display: none;
}

#contents #main02 .recommend .link:last-child{
margin-bottom: 240px;
}

#contents #main02 .recommend .link a.official-link{
font-size: 20px;
display: block;
padding: 10px 15px;
text-align: center;
width: 48%;
text-decoration: none;
border-radius: 8px;
color: #ffffff;
background-color: #ff6600;
border-bottom: solid 3px #cc3300;
margin: 8px auto 0px;
font-weight: bold;
vertical-align: middle;
}

#contents #main02 .recommend .link a.official-link span.small{
font-size: 16px;
}

#contents #area{
padding: 30px 0px 60px;
font-weight: bold;
}

#contents #area .area-h2-wrap{
display: flex;
justify-content: center;
margin: 0 0 30px;
align-items: center;
}

#contents #area .area-h2-wrap img{
margin: 0 32px 0 0;
width: 192px;
}

#contents #area h2{

}

#contents #area .area-wrap{
background: #f7f6f6;
border-radius: 10px;
padding: 30px;
}

#contents #area .area-wrap .area-row{
display: flex;
margin: 0 0 15px;
}

#contents #area .area-wrap .area-row:last-child{
margin:0;
}

#contents #area .area-wrap .area-row .rural{
width: 20%;
font-size: 20px;
}

#contents #area .area-wrap .area-row ul.prefecture{
display: flex;
flex-wrap: wrap;
width: 80%;
}

#contents #area .area-wrap .area-row ul.prefecture li{
width: 23%;
margin: 0 5px 10px;
}

#contents #area .area-wrap .area-row ul.prefecture li a{
text-decoration: none;
color: #222222;
display: inline-block;
width: 100%;
text-align: center;
padding: 8px 0px;
border-radius: 5px;
background: #eef5f8;
font-size: 18px;
box-shadow: 0px 2px 2px #ccc;
}

#contents #main02 #attention01{
background: #ffffe5;
padding: 30px 100px;
}

#contents #main02 #attention01 .attention01-h2-wrap{
display: flex;
align-items: center;
}

#contents #main02 #attention01 .attention01-h2-wrap img{
padding: 0 30px 0 0;
}

#contents #main02 #attention01 .attention01-h2-wrap h2{

}

#contents #main02 #attention01 .attention01-h2-wrap .subtitle{
background: #009bd6;
display: inline-block;
padding: 8px 16px;
font-size: 24px;
border-radius: 26px;
color: #fff;
font-weight: bold;
margin: 0 0 15px;
}

#contents #main02 #attention01 h3{
position: relative;
margin-top: 180px;
text-align: center;
font-size: 38px;
margin-bottom: 30px;
}

#contents #main02 #attention01 h3.h01:after{
position: absolute;
    content: "01";
    font-size: 100px;
    top: -140px;
    left: 42%;
    color: #009bd6;
    z-index: 100;
}

#contents #main02 #attention01 h3.h02:after{
position: absolute;
    content: "02";
    font-size: 100px;
    top: -140px;
    left: 42%;
    color: #009bd6;
    z-index: 100;
}

#contents #main02 #attention01 p{
background: #fff;
padding: 30px;
font-size: 20px;
border-radius: 15px;
font-weight: bold;
}

#contents #main02 #attention02{
padding: 30px 100px 60px;
}

#contents #main02 #attention02 h3{
text-align: center;
font-size: 38px;
margin: 0 auto 30px;
}

#contents #main02 #attention02 img{
display: block;
margin: 0 auto 30px;
}

#contents #main02 #attention02 p{
padding: 30px;
font-size: 20px;
background: #ffffe5;
border-radius: 10px;
font-weight: bold;
}


#contents #main02 #sample{
margin-bottom: 120px;
}

#contents #main02 #sample h2{
margin-bottom: 15px;
}

#contents #main02 #sample h2 span.color{
color: #009bd6;
}


#contents #main02 .sample_date{
text-align: right;
font-size: 12px;
font-weight: bold;
color: #009bd6;
}

#contents #main02 #sample .carousel-wrap{

}

#contents #main02 #sample .carousel-wrap .carousel {
width:100%;
padding:0px 0 8px;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
white-space:nowrap;
scroll-snap-type: x mandatory;
}

#contents #main02 #sample .carousel-wrap .carousel li{
    scroll-snap-align: start;
margin: 2px;
text-align: center;
display: inline-block;
width: 170px;
white-space: normal;
vertical-align: top;
border: solid 1px #009bd6;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper{
width: 100%;
padding: 16px 8px 8px;
}

#contents #main02 #sample .carousel-wrap .carousel li .title{
width:100%;
height: 65px;
padding: 4px;
background-color: #009bd6;
color: #fff;
font-size: 12px;
font-weight: bold;
overflow: hidden;
}

#contents #main02 #sample .carousel-wrap .carousel li .title-wrapper{
position: relative;
}
#contents #main02 #sample .carousel-wrap .carousel li .title-wrapper:after {
  position: absolute;
  content: '';
  top: 60px;
  left: 70px;
  border: 15px solid transparent;
  border-top: 15px solid #009bd6;
  width: 0;
  height: 0;
  }

#contents #main02 #sample .carousel-wrap .carousel li .title p{
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-align: left;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper img.sample-img{
width: 100%;
margin-bottom: 8px;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper .hushtug{
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    min-width: 0;
    
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper .hushtug .hushtug-item{
    text-align: center;
    background-color: #fff;
border-radius: 4px;
border: solid 1px #009bd6;
color: #009bd6;
font-size:10px;
font-weight: bold;
margin: 0px 4px 2px 0px;
padding: 3px 4px;
position: relative;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper table{
width: 100%;
border-collapse:collapse;
margin: 8px 0px 0px 0px;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper table tr.border-btm{
border-bottom: solid 1px #999999;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper table th{
font-size: 12px;
background-color: #cccccc;
width: 14%;
text-align: center;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper table td{
font-size: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    padding-left: 4px
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper .offer{
display: flex;
justify-content: space-around;
align-items: center;
padding: 0;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper .offer .sample-logo{
width: 50%;
}

#contents #main02 #sample .carousel-wrap .carousel li .wrapper .offer a.sample-link{
font-size: 10px;
display: block;
text-decoration: none;
font-weight: bold;
color: #fff;
background-color: #ff6600;
border-radius: 4px;
padding: 8px 2px 8px 2px;
margin-right: 0;
width: 46%;
}

#contents #main02 #case h2{
margin-bottom: 15px;
}

#contents #main02 #case h2 span.color{
color: #009bd6;
}

#contents #main02 #case ul.carousel{
    width: 100%;
    padding: 0px 0 8px;
    overflow-x: scroll;
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    white-space: nowrap;
    scroll-snap-type: x mandatory;
    margin: 0 0 30px;
}

#contents #main02 #case ul.carousel li.item{
scroll-snap-align: start;
    margin: 0 12px 0 0px;
    display: inline-block;
    width: 380px;
    white-space: normal;
    vertical-align: top;
    background: #fff;
    border-radius: 10px;
    padding: 0px;
	border-radius: 10px;
	border: solid 1px #009bd6;
  background-image :
    repeating-linear-gradient(to bottom,          /* 横線 */
       transparent 12px,
       rgba(204, 204, 204, 0.20) 13px,  rgba(204, 204, 204, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(204, 204, 204, 0.20) 26px,  rgba(204, 204, 204, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(204, 204, 204, 0.20) 39px,  rgba(204, 204, 204, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(204, 204, 204, 0.20) 52px,  rgba(204, 204, 204, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(204, 204, 204, 0.20) 65px,  rgba(204, 204, 204, 0.20) 65px),

    repeating-linear-gradient(to right,          /* 縦線 */
       transparent 12px,
       rgba(204, 204, 204, 0.20) 13px,  rgba(204, 204, 204, 0.20) 13px,
       transparent 14px,  transparent 25px, 
       rgba(204, 204, 204, 0.20) 26px,  rgba(204, 204, 204, 0.20) 26px,
       transparent 27px,  transparent 38px, 
       rgba(204, 204, 204, 0.20) 39px,  rgba(204, 204, 204, 0.20) 39px,
       transparent 40px,  transparent 51px, 
       rgba(204, 204, 204, 0.20) 52px,  rgba(204, 204, 204, 0.20) 52px,
       transparent 53px,  transparent 64px, 
       rgba(204, 204, 204, 0.20) 65px,  rgba(204, 204, 204, 0.20) 65px);
}

#contents #main02 #case ul.carousel li.item h3{
background: linear-gradient(to right, #009bd6, #33ccff );
color: #fff;
padding: 15px;
font-size: 24px;
border-radius: 9px 9px 0px 0px;
}

#contents #main02 #case ul.carousel li.item section.item-main{

padding: 15px;
}

#case section.profile{
display: flex;
align-items: center;
margin: 0 0 30px;
}

#case section.profile .data{
padding: 0 0 0 15px;
}

#case section.profile .data .name{
font-size: 20px;
margin: 0 0 15px;
}

#case section.profile .data .career{
background: #666;
color: #fff;
font-weight: bold;
display: inline-block;
line-height: 1;
padding: 5px 10px;
border-radius: 5px;
}

#case section.profile .data p{
font-size: 16px;
font-weight: bold;
}

#case section.before-after{
display: flex;
justify-content: space-around;
position: relative;
margin: 0 0 30px;
}

#case section.before-after:after{
position: absolute;
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    font-weight: 900;
	font-size: 30px;
    bottom: 32%;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    color: #999;
}

#case section.before-after .before,#case section.before-after .after{
text-align: center;
font-size: 24px;
font-weight: bold;
color: #888;
line-height: 1.25;
position: relative;
padding: 50px 0 0;
}

#case section.before-after .before:after,#case section.before-after .after:after{
position: absolute;
top:0px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
content: 'Before';
font-family: 'Anton', sans-serif, cursive;
font-weight: normal;
text-decoration: underline;
}

#case section.before-after .after{
color: #fe9c3c;
font-size:  28px;
}

#case section.before-after .after:after{
color: #fe9c3c;
content: 'After';
}

#case h4{
background: #666;
color: #fff;
display: inline-block;
line-height: 1;
padding: 5px 10px;
margin: 0 0 10px;
}

#case ul.point{
list-style:disc;
padding: 0 0 0 20px;
margin: 0 0 30px;
}

#case ul.point li{
margin: 0 0 10px;
font-weight: bold;
font-size: 18px;
}

#case ul.point li:last-child{
margin: 0;
}

#case .using-site{
width: 210px;
    margin: 0px auto 20px;
    text-align: center;
    font-size: 16px;
    background-color: #009bd6;
    color: #fff;
    padding: 8px 0px;
    border-radius: 35px;
    position: relative;
	font-weight: bold;
}

#case .using-site:after{
content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -20px;
    left: 95px;
    border-style: solid;
    border-color: #009bd6 transparent transparent transparent;
    border-width: 20px 10px 0 10px;
    z-index: 1;
}

#case a.cvbutton{
display: flex;
padding: 15px;
border-radius: 10px;
background: #fe9c3c;
align-items: center;
text-decoration: none;
font-size: 18px;font-weight: bold;
color: #fff;
box-shadow: 0px 4px 0px #cc3300;
}

#case a.cvbutton img{
width: 50%;
}

#case a.cvbutton .cvbutton-copy{
padding: 0 0 0 15px;
}

#contents #search02 h2{
margin-bottom: 15px;
}

#contents #search02 h2 span.color{
color: #009bd6;
}


#contents #search02{

}

#contents #search02{
margin:30px auto 30px;
}

#contents #search02 .inner{
border: solid 1px #004444;
background-color: #f5f5f5;
}

#contents #search02 h3{
background-color: #004444;
text-align: center;
color: #fff;
font-weight: normal;
padding: 10px;
}

#contents #search02 .form-wrap{
background-color: #eef5f8;
}

#contents #search02 .form-wrap form{
padding: 16px;
}


#contents #search02 table{
width: 100%;
}

#contents #search02 table tr th{
padding: 4px 8px;
width: 35%;
}

#contents #search02 table tr td{
padding: 4px 8px;
}

#contents #search02 table tr td select{
    width: 100%;
    height: 50px;
    display: block;
    padding: 0 16px;
    background: #fff;
    border: 1px solid #c0c0c0;
    font-size: 16px;
}

#contents #search02 input[type="submit"]{
    width: 50%;
    height: 60px;
    margin: 16px auto;
    padding: 0 20px;
    display: block;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    background:   #009bd6;
    color: #fff;
    font-weight: bold;
    cursor: pointer;

}


#contents #search02 .inner label{
display: block;
width: 100%;
background-color: #004444;
text-align: center;
color: #fff;
font-weight: normal;
padding: 10px;
font-size: 18px;
    cursor :pointer;
    transition: all 0.5s;
position: relative;
}

#contents #main02 #result02 .sort{   
text-align: right;
padding: 8px 0px;
}

#contents #main02 #result02 .sort select{  
    margin: 0;
    padding: 0 15px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 4px;
    width: 320px;
    height: 50px;
    font-size: 16px;
    line-height: 48px;
}

#contents #main02 #result02 .output{
padding: 15px;
}

#contents #main02 #result02 .output .output-item{
padding: 30px;
border: solid 1px #009bd6;
border-radius: 30px;
color: #444444;
margin-bottom: 30px;
}

#contents #main02 #result02 .output .output-item:last-child{
margin-bottom: 0px;
}

#contents #main02 #result02 .output .output-item h3{
color: #009bd6;
font-size: 40px;
}

#contents #main02 #result02 .output .output-item h4{
font-size: 24px;
margin-bottom: 30px;
}

#contents #main02 #result02 .output .output-item .box{
display: flex;
align-items: center;
margin-bottom: 30px;
}

#contents #main02 #result02 .output .output-item .box img.logo{
margin-right: 30px;
}

#contents #main02 #result02 .output .output-item .box table.data{
width: 100%;
}

#contents #main02 #result02 .output .output-item .box table.data th{
background:#009bd6;
color: #fff;
padding: 15px 0;
font-size: 18px;
}

#contents #main02 #result02 .output .output-item .box table.data td{
font-size: 24px;
text-align: center;
background: #f5f5f5;
}

#contents #main02 #result02 .output .output-item .box table.data td span.ammount{
font-weight: bold;
color: #ff6600;
}

#contents #main02 #result02 .output .output-item ul li.title{
font-size: 24px;
font-weight: bold;
color: #009bd6;
}

#contents #main02 #result02 .output .output-item ul li.title:before{
content: '';
display: inline-block;
width: 28px;
height: 28px;
background-image: url(../images/md_icon_h3.png);
background-size: contain;
vertical-align: -4px;
margin-right: 10px;
}

#contents #main02 #result02 .output .output-item ul li.description{
font-size: 18px;
margin-bottom: 30px;
}

#contents #main02 #result02 .output .output-item a.cvbutton{
    font-size: 24px;
    display: block;
    padding: 15px 15px;
    text-align: center;
    width: 60%;
    text-decoration: none;
    border-radius: 8px;
    color: #ffffff;
    background-color: #ff6600;
    border-bottom: solid 3px #cc3300;
    margin: 0px auto 0px;
    font-weight: bold;
    vertical-align: middle;
}

#contents #main02 #result02 .output .output-item .advice {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

#contents #main02 #result02 .output .output-item .advice img.icon {
    width: 150px;
    margin-right: 30px;
}

#contents #main02 #result02 .output .output-item .advice .comment {
    background: #eef5f8;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    font-size: 18px;
}

#contents #main02 #result02 .output .output-item .advice .comment:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -15px;
    top: 20px;
    border-right: 15px solid #eef5f8;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

#contents #main02 #ranking{
padding: 0 100px;
}

#contents #main02 #ranking .h2-wrap .h2-subtitle{
display: inline-block;
padding: 10px 20px;
font-size: 28px;
font-weight: bold;
border-radius: 40px;
background: #ff4b4b;
color: #fff;
margin: 0 0 15px;
}

#contents #main02 #ranking .h2-wrap .h2-subtitle.area{
background: #3399cc;
}


#contents #main02 #ranking .h2-wrap h2{
line-height: 1;
}

#contents #main02 #ranking .h2-wrap h2 span.color{
color: #ff4b4b;
font-size: 140%;
}





#contents #main02 #ranking .ranking-item{
background: #eef5f8;
border-radius: 10px;
padding: 30px;
position: relative;
margin: 0 0 30px;
}

#contents #main02 #ranking .ranking-item:last-child{
margin: 0;
}

#contents #main02 #ranking .ranking-item.rank1:before{
content: '';
display: inline-block;
position: absolute;
background-image: url(../images/reha_rank-icon01.png);
width: 90px;
height: 120px;
background-size: cover;
top: 15px;
}

#contents #main02 #ranking .ranking-item.rank2:before{
content: '';
display: inline-block;
position: absolute;
background-image: url(../images/reha_rank-icon02.png);
width: 90px;
height: 120px;
background-size: cover;
top: 15px;
}

#contents #main02 #ranking .ranking-item.rank3:before{
content: '';
display: inline-block;
position: absolute;
background-image: url(../images/reha_rank-icon03.png);
width: 90px;
height: 120px;
background-size: cover;
top: 15px;
}

#contents #main02 #ranking .ranking-item.rank4:before{
content: '';
display: inline-block;
position: absolute;
background-image: url(../images/reha_rank-icon04.png);
width: 90px;
height: 120px;
background-size: cover;
top: 15px;
}

#contents #main02 #ranking .ranking-item.rank5:before{
content: '';
display: inline-block;
position: absolute;
background-image: url(../images/reha_rank-icon05.png);
width: 90px;
height: 120px;
background-size: cover;
top: 15px;
}

#contents #main02 #ranking .ranking-item.rank6:before{
content: '';
display: inline-block;
position: absolute;
background-image: url(../images/reha_rank-icon06.png);
width: 90px;
height: 120px;
background-size: cover;
top: 15px;
}



#contents #main02 #ranking .ranking-item h3{
display: flex;
justify-content: space-between;
margin: 0 0 50px;
align-items: center;
}

#contents #main02 #ranking .ranking-item h3 .name{
padding-left: 110px;
padding-top: 10px;
font-size: 38px;
}

#contents #main02 #ranking .ranking-item h3 a{
color: #222;
}

#contents #main02 #ranking .ranking-item h3 .vote{
width: 150px;
padding: 5px 20px 5px 0;
background: #fff;
border-radius: 10px;
box-shadow: 0px 5px 5px #baabad;
text-align: right;
}

#contents #main02 #ranking .ranking-item h3 .vote span.color{
color: #009bd6;
font-size: 150%;
}


#contents #main02 #ranking .ranking-item h3 .ranking-headerscore{
padding: 10px 20px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 5px 5px #baabad;
font-size: 24px;
}

#contents #main02 #ranking .ranking-item h3 .ranking-headerscore span.color{
font-family: 'Anton', sans-serif, cursive;
color: #ff3366;
font-weight: 400;
font-size: 120%;
}

#contents #main02 #ranking .ranking-item h3 .ranking-headerscore span.color:before{
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f005";/*アイコンのユニコード*/
  font-weight: 900;
  color: #ffcc00;
  margin: 0 6px 0 0;
  font-size: 24px;
  vertical-align:2px
}

#contents #main02 #ranking .ranking-item .maincopy{
font-size: 28px;
font-weight: bold;
margin: 0 0 30px;
}

#contents #main02 #ranking .ranking-item img.hv-img{
width: 100%;
border-radius: 10px;
margin: 0 0 30px;
}

#contents #main02 #ranking .ranking-item .spec{
padding: 15px;
background: #fff;
border-radius: 10px;
margin: 0 0 30px;    
}

#contents #main02 #ranking .ranking-item .spec table{
width: 100%;
font-size: 20px;
text-align: center;
}

#contents #main02 #ranking .ranking-item .spec table th{
width: 33%;
padding: 5px 0px;
background: #f5f5f5;
border-right: solid 2px #fff;
}

#contents #main02 #ranking .ranking-item .spec table td{
padding: 15px 0px;
font-weight: bold;
}

#contents #main02 #ranking .ranking-item .spec table ul.spec-tags{
display: flex;
}

#contents #main02 #ranking .ranking-item .spec table ul.spec-tags li{
display: block;
padding: 10px 0px;
width: calc((666px - 10px) / 3);
line-height: 1;
border-radius: 100px;
    color: #009BD6;
    margin: 0 5px 5px 0;
    font-weight: normal;
    font-size: 20px;
	font-weight: bold;
    border: solid 2px #009BD6;
    background: #DAF0F9;
}

#contents #main02 #ranking .ranking-item .spec table ul.spec-tags li:last-child{
margin-right: 0;
}


#contents #main02 #ranking .ranking-item .advice{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

#contents #main02 #ranking .ranking-item .advice img.icon {
    width: 150px;
    margin-right: 30px;
}

#contents #main02 #ranking .ranking-item .advice .comment {
    background: #fff;
    padding: 30px;
    border-radius: 15px;
    position: relative;
    font-size: 18px;
}

#contents #main02 #ranking .ranking-item .advice .comment:before {
    content: '';
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    left: -15px;
    top: 20px;
    border-right: 15px solid #fff;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

#contents #main02 #ranking .ranking-item a.cvbutton{
font-weight: bold;
vertical-align: middle;
    border-radius: 8px;
    color: #fff;
    text-decoration: none;
    text-align: center;
    -webkit-transition: all .2s linear;
    transition: all .2s linear;
padding: 20px;
    font-size: 18px;
    background-color: #ff9966;
    background-image: -webkit-gradient(linear,left bottom,left top,from(#ff3300),to(#ff9966));
    background-image: -webkit-linear-gradient(bottom,#ff3300,#ff9966);
    background-image: linear-gradient(0deg,#ff3300 0,#ff9966);
    border: 1px solid #ff6633;
    display: block;
    letter-spacing: normal;
    -ms-flex: 1 1 50%;
    width: 60%;
    max-width: 60%;
    border-radius: 40px;
    margin: 0 auto 30px;
}

#contents #main02 #ranking .ranking-item a.cvbutton:last-child{
margin-bottom: 0px;
}

#contents #main02 #ranking .ranking-item .uservoice h4{
font-size: 30px;
padding:0 0 0 60px;
position: relative;
margin: 0 0 15px;
}

#contents #main02 #ranking .ranking-item .uservoice h4:before{
position: absolute;
content: '';
display: inline-block;
width: 44px;
height: 44px;
background-image: url(../images/reha_h4-uservoice_icon.png);
background-size: contain;
left: 0px;
}


li.ranking_item_review{
position: relative;
}

ul.ranking_item_review__wrap li.ranking_item_review:not(:last-child){
margin: 0 0 20px;
padding: 0 0 20px;
}

ul.ranking_item_review__wrap li.ranking_item_review:not(:last-child):after{
position: absolute;
display: block;
content: '';
background: #ccc;
height: 2px;
width: calc(100%);
bottom: 0;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
 }

.ranking_item_review__profile{
padding: 0 0 0 84px;
position: relative;
font-size: 24px;
}

.ranking_item_review__profile:before{
position: absolute;
content: '';
display: inline-block;
width: 64px;
height: 64px;
background: url(../images/reha_ranking_item_review-icon.png);
left: 0;
background-repeat: no-repeat;
}

.ranking_item_review__profile.male:before{
position: absolute;
content: '';
display: inline-block;
width: 64px;
height: 64px;
background: url(../images/reha_ranking_item_review-icon_male.png);
left: 0;
background-repeat: no-repeat;
}

.ranking_item_review__profile_title{
line-height: 1.25;
font-weight: bold;
color: #FE843C;
padding: 20px 0 20px;
}

.ranking_item_review__profile_detail{
display: flex;
align-items: center;
}

._detail_star{
margin: 0 20px 0 0;
}

span._detail_star_gold{
color: #ffcc00;
}

span._detail_star_gray{
color: #ccc;
}

._detail_age-occuaption{
font-size: 20px;
}

p.ranking_item_review__description{
font-size: 20px;
}

.ranking_item_review__box{
position: relative;
margin: 0 0 20px;
}

.grad-btn {
  z-index: 2;
    position: absolute;
    right: 0;
    bottom: 20px;
    left: 0;
    width: 148px;
    margin: auto;
    padding: 5px 0;
    border-radius: 4px;
    background: #FE843C;
    color: #fff;
    font-size: 1.3rem;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	font-weight: bold;
}

ul.ranking_item_review__wrap{
padding: 20px;
background: #fff;
  position: relative;
  overflow: hidden;
  height: 280px;
}

ul.ranking_item_review__wrap::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
  z-index: 1;
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ ul.ranking_item_review__wrap{
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ ul.ranking_item_review__wrap::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}




/*コラム一覧
---------------------------------------------------------------------------*/
#contents #column h1{
text-align: center;
    background: linear-gradient(to right, #009bd6, #33ccff );
color: #fff;
font-size: 60px;
line-height: 1.2;
padding: 40px;
margin: 0 0 40px;
}

#contents #column h1 span.sub{
font-size: 40%;
}

#contents #column h2{
font-size: 40px;
border-left: solid 10px #009bd6;
line-height: 1;
padding: 0 0 0 10px;
margin: 0 0 20px;
}

#contents #column ul{
margin: 0 0 40px;
}

#contents #column ul li a{
display: block;
text-decoration: none;
font-size: 20px;
margin: 0 0 10px 20px;
}

#contents #column ul li a:before{
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f0da";/*アイコンのユニコード*/
  font-weight: 900;
  color: #009bd6;
  margin: 0 10px 0 0;
}

/*各コラム
---------------------------------------------------------------------------*/

#contents #post h2 {
padding: 20px;
    line-height: 1.2;
    font-size: 34px;
    color: #fff;
    background: linear-gradient(to right, #009bd6, #33ccff );
    margin: 8px 0px 8px;
	border-radius: 4px;
}

#contents #post h2 span.subtitle {
    font-size: 14px;
}


#contents #post .date{
color: #666666;
font-size: 14px;
text-align: right;
margin-bottom: 8px;
}

#contents #post .date:before{
    font-family: "Font Awesome 5 Free";
    content: "\f017";
    font-weight: 900;
    margin-right: 4px;
}

#contents #post p {
    line-height: 2.0em;
    font-size: 17px;
    margin: 0 0 40px;
}


#contents #post h3 {
    color: #444;
    padding: 0px 8px 12px 0px;
    margin: 40px 0px 20px;
    font-size: 20px;
    position: relative;
    border-bottom: 6px solid #009bd6;
}

#contents #post h3:before {
    position: absolute;
    bottom: -6px;
    left: 0;
    width: 20%;
    height: 6px;
    content: '';
    background: #33ccff;
}

#contents #post h4 {
    margin: 8px 0px;
    padding: 8px 8px;
    color: #494949;
    background: transparent;
    border-left: solid 5px #009bd6;
}

#contents #post table{
font-size: 14px;
border-collapse: collapse;
border: solid 1px #ccc;
}

#contents #post table th{
padding: 5px 15px;
border: solid 1px #ccc;
font-weight: bold;
background: #f5f5f5;
}

#contents #post table td{
padding: 5px 15px;
border: solid 1px #ccc;
}



.sp{
display: none;
}


/*画面幅～750px
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width:768px){

.sp{
display: block;
}

body{
font-size: 14px;
}



/*コンテンツ
---------------------------------------------------------------------------*/


#contents{
width: 100%;
margin:0;
}

#contents .inner{
box-sizing: border-box;
width: 100%;
overflow: hidden;

}

#contents #main{
box-sizing: border-box;
width: 100%;
padding: 20px 15px;
}

#contents #search{
margin:0px auto 30px;
}

#contents #search02 h2{
margin: 0 0 10px;
font-size: 30px;
}

#contents #search .inner label{
font-size: 16px;
}

#contents #search table tr th {
font-size: 14px;
}


#contents #search table tr td select{
font-size: 14px;
}

#contents #search table tr td{
font-size: 14px;
}

#contents .service h2{
padding: 8px 16px;
font-size: 16px;
text-shadow: 0 1px 3px #3b79aa;
}

.full{
width: 82% !important;
}

#contents .service .compare{
  overflow-y: hidden;
  }



/*_new
---------------------------------------------------------------------------*/

#contents #top02 header{
padding: 10px 10px 0;
align-items: flex-start;
}

#contents #top02 header .btn-wrap a{
margin: 0 0 0 0;
padding: 0 15px 20px 15px;
}

#contents #top02 header .btn-wrap a.btn1:after,#contents #top02 header .btn-wrap a.btn2:after,#contents #top02 header .btn-wrap a.btn3:after{
font-size: 10px;

}

#contents #top02 header .btn-wrap a img{
width: 22px;
}

#contents #top02 header img.logo{
width: 120px;
}


#contents #top02 img.logo-link{
width: 140px;
}

#contents #top02 img#new_fv{
width: 100%;
}

#contents #top02 .area_fv .txt{
color: #444;
font-size: 6.5vw;
font-weight: bold;
top: 29%;
}

#contents #top02 #compare{
font-size: 12px;
margin-bottom: 30px;
}

#contents #top02 #compare .inner{
padding: 0px 10px 10px;
}

#contents #top02 #compare .tab-wrap{
margin-top: 0px;
box-shadow: 0px 2px 4px #ccc;
}

#contents #top02 #compare .tab-label{
font-size: 14px;
}

#contents #top02 #compare .tab-switch:checked+.tab-label+.tab-content{
padding: 5px;
}

#contents #top02 #compare .tab-switch:checked+.tab-label+.tab-content.tab2{
padding: 20px;
}


table.compare_table{
font-size: 12px;
}

table.compare_table th,table.compare_table td{
}

table.compare_table th{
font-size: 12px;
padding: 4px 0 2px;
}

table.compare_table td{
text-align: center;
padding: 5px 5px;
}

table.compare_table tr:nth-child(2) td:nth-child(1){
padding: 22px 5px 5px;
}

table.compare_table td:nth-child(2),table.compare_table td:nth-child(3),table.compare_table td:nth-child(4){
width: calc((100vw - 170px) / 3);
}

table.compare_table td.ev01{
background: url(../images/reha_compare_icon01.png);
}

table.compare_table td.ev02{
background: url(../images/reha_compare_icon02.png);
}

table.compare_table td.ev03{
background: url(../images/reha_compare_icon03.png);
}

table.compare_table td.ev01,table.compare_table td.ev02,table.compare_table td.ev03{
background-repeat: no-repeat;
background-size: 50px;
background-position: center;
background-color:rgba(255,255,255,0.5);
background-blend-mode:lighten;
text-shadow: 1px 1px 0 #fff,1px 0px 0 #fff,0px 1px 0 #fff,0px -1px 0 #fff,-1px 0px 0 #fff,-1px 1px 0 #fff,1px -1px 0 #fff,-1px -1px 0 #fff;
}


table.compare_table th:nth-child(1){
width: 140px;
}

img.compare_table_logo{
width: 120px;
}

a.compare_table_logo_wrap{
display: inline-block;
margin: 0 0 10px;
}

a.compare_table_linkbutton{
padding: 5px 0px;
border-radius: 6px;
width: 120px;
margin: 0 auto 3px;
font-size: 10px;
box-shadow: 0 3px 0 #B62400;
}

.compare_table_score{
font-size: 16px;

}

.compare_table_score i{
vertical-align: 2px;
}

a.compare_table_review{
margin: 2px 0 0;
font-size: 10px;
}

span.compare_table_review_span{
}


a.compare_table_review:before{
  font-family: "Font Awesome 5 Free";
  content: "\f4ad";
  font-weight: 900;
  margin: 0 2px 0 0;
}

span.compare_table_amount_span{
font-size: 14px;
font-weight: bold;
color: #222;
}

span.compare_table_area_span{
font-size: 14px;
font-weight: bold;
color: #222;
}

.compare_table_td_label_wrap{
left: 0;
}

.compare_table_td_label{
font-size: 10px;
height: 20px;
line-height: 1;
padding: 2px 0px 4px 5px;
background: #CAA846;
text-shadow: 0 -1px 0 #B58B11;
font-weight: bold;
}

.compare_table_td_label i{
font-size: 10px;
vertical-align: 0px;
color: #DEC784;
}

.compare_table_td_label:after{
position: absolute;
content: '';
top: 0;
right: -9px;
border-width: 20px 9px 0 0;
border-color: #CAA846 transparent transparent transparent;
}

p.compare_table_addition{
margin: 5px 0 0;
font-size: 10px;
color: #888;
}

#contents #top02 #compare #recommend .recommend-box{
padding: 20px;
margin-bottom: 20px;
}

#contents #top02 #compare #recommend .row{
margin: 0;
}

#contents #top02 #compare #recommend .row:last-child .recommend-box:last-child{
margin: 0;
}

#contents #top02 #compare #recommend .recommend-box .title{
font-size: 20px;
margin: 0 0 10px;
}

#contents #top02 #compare #recommend .recommend-box .title:before{
width: 12px;
height: 18px;
}

#contents #top02 #compare #recommend .recommend-box .logo{
width: 160px;
}

#contents #top02 #compare #recommend .recommend-box p{
font-size: 14px;
}

#contents #top02 #compare #recommend .recommend-box a.txtlink{
font-size: 16px;
}

#contents #main02 .h2-wrap{
font-size: 10px;
}

#contents #main02 .h2-wrap .left{
margin-right: 0px;
}

#contents #main02 .h2-wrap .left img{
width: 110px;
}

#contents #main02 .h2-wrap .h2-subtitle01{
font-size: 14px;
margin-bottom: 10px;
}

#contents #main02 .h2-wrap .h2-subtitle02{
font-size: 18px;
}

#contents #main02 h2{
font-size: 30px;
}

#contents #main02 .h2-wrap:before {
  content: "";
  position: absolute;
  bottom: -50px;
  left: 48%;
  margin-left: -16px;
  border: 25px solid transparent;
  border-top: 25px solid #fff;
  z-index: 2;
}

#contents #main02 .h2-wrap:after {
  content: "";
  position: absolute;
  bottom: -52px;
  left: 48%;
  margin-left: -17px;
  border: 26px solid transparent;
  border-top: 26px solid #009bd6;
  z-index: 1;
}

#contents #main02 #ranking{
padding: 0 10px 0;
margin: 0 0 30px;
}

#contents #main02 #ranking .h2-wrap img{
width: 100px;
margin: 0 5px 0 0;
}

#contents #main02 #ranking .h2-wrap .h2-subtitle{
font-size: 16px;
padding: 5px 10px;
}

#contents #main02 #ranking .h2-wrap h2{
font-size: 24px;
margin: 0 0 20px;
white-space: nowrap;
}

#contents #main02 #ranking .ranking-item{
padding: 10px;
margin: 0 0 20px;
}

#contents #main02 #ranking .ranking-item.rank1:before,#contents #main02 #ranking .ranking-item.rank2:before,#contents #main02 #ranking .ranking-item.rank3:before,#contents #main02 #ranking .ranking-item.rank4:before,#contents #main02 #ranking .ranking-item.rank5:before,#contents #main02 #ranking .ranking-item.rank6:before{
width: 45px;
height: 60px;
}

#contents #main02 #ranking .ranking-item h3{
margin: 0 0 30px;
}

#contents #main02 #ranking .ranking-item h3 .name{
font-size: 20px;
padding: 10px 0 0 50px;
}

#contents #main02 #ranking .ranking-item h3 .vote{
width: 84px;
font-size: 12px;
padding: 5px 5px 5px 0;
white-space: nowrap;
}

#contents #main02 #ranking .ranking-item h3 .ranking-headerscore{
padding: 5px 5px;
font-size: 14px;
width: 68px;
white-space: nowrap;
}

#contents #main02 #ranking .ranking-item h3 .ranking-headerscore span.color{
font-family: 'Anton', sans-serif, cursive;
color: #ff3366;
font-weight: 400;
font-size: 120%;
}

#contents #main02 #ranking .ranking-item h3 .ranking-headerscore span.color:before{
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f005";/*アイコンのユニコード*/
  font-weight: 900;
  color: #ffcc00;
  margin: 0 3px 0 0;
  font-size: 14px;
  vertical-align:2px
}

#contents #main02 #ranking .ranking-item .maincopy{
font-size: 16px;
margin: 0 0 10px;
}

#contents #main02 #ranking .ranking-item img.hv-img{
margin: 0 0 10px;
}

#contents #main02 #ranking .ranking-item .spec{
padding: 10px;
margin: 0 0 10px;
}

#contents #main02 #ranking .ranking-item .spec table{
font-size: 14px;
}

#contents #main02 #ranking .ranking-item .spec table td{
padding: 10px 0;
}

#contents #main02 #ranking .ranking-item .spec table ul.spec-tags{
}

#contents #main02 #ranking .ranking-item .spec table ul.spec-tags li{
padding: 6px 0px;
width: calc((315px - 6px) / 3);
line-height: 1;
border-radius: 100px;
    color: #009BD6;
    margin: 0 3px 5px 0;
    font-size: 14px;
	font-weight: bold;
    border: solid 1px #009BD6;
}

#contents #main02 #ranking .ranking-item .spec table ul.spec-tags li:last-child{
margin-right: 0;
}



#contents #main02 .point h3{
margin-top: 120px;
font-size: 18px;
padding: 10px;
}

#contents #main02 #ranking .ranking-item .advice{
margin: 0 0 10px;
}

#contents #main02 #ranking .ranking-item .advice img.icon{
width: 100px;
margin: 0 5px 0 0;
}

#contents #main02 #ranking .ranking-item .advice .comment{
padding: 15px;
font-size: 14px;
}

#contents #main02 #ranking .ranking-item a.cvbutton{
width: 80%;
max-width: 80%;
margin: 0 auto 20px;
}

#contents #main02 #ranking .ranking-item .uservoice h4{
font-size: 16px;
padding: 0 0 0 25px;
margin: 0 0 10px;
}

#contents #main02 #ranking .ranking-item .uservoice h4:before{
width: 22px;
height: 22px;
}


li.ranking_item_review{
}

ul.ranking_item_review__wrap li.ranking_item_review:not(:last-child){
margin: 0 0 10px;
padding: 0 0 10px;
}

ul.ranking_item_review__wrap li.ranking_item_review:not(:last-child):after{
height: 1px;
}

.ranking_item_review__profile{
padding: 0 0 0 42px;
position: relative;
font-size: 14px;
}

.ranking_item_review__profile:before{
width: 32px;
height: 32px;
background: url(../images/reha_ranking_item_review-icon.png);
left: 0;
background-repeat: no-repeat;
background-size: contain;
}

.ranking_item_review__profile.male:before{
width: 32px;
height: 32px;
background: url(../images/reha_ranking_item_review-icon_male.png);
left: 0;
background-repeat: no-repeat;
background-size: contain;
}
.ranking_item_review__profile_title{
padding: 10px 0 10px;
}

.ranking_item_review__profile_detail{

}

._detail_star{
margin: 0 10px 0 0;
}

span._detail_star_gold{
color: #ffcc00;
}

span._detail_star_gray{
color: #ccc;
}

._detail_age-occuaption{
font-size: 12px;
}

p.ranking_item_review__description{
font-size: 12px;
}

.ranking_item_review__box{
margin: 0 0 10px;
}

.grad-btn {
  z-index: 2;
    position: absolute;
    right: 0;
    bottom: 10px;
    left: 0;
    width: 100px;
    margin: auto;
    padding: 5px 0;
    border-radius: 4px;
    background: #FE843C;
    color: #fff;
    font-size: 12px;
    text-align: center;
    cursor: pointer;
    transition: .2s ease;
    box-shadow: 0 0 3px rgb(0 0 0 / 30%);
	font-weight: bold;
}

ul.ranking_item_review__wrap{
padding: 10px;
  position: relative;
  overflow: hidden;
  height: 120px;
}

ul.ranking_item_review__wrap::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px; /*グラデーションで隠す高さ*/
  background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  background: linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
  content: "";
  z-index: 1;
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ ul.ranking_item_review__wrap{
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ ul.ranking_item_review__wrap::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

#contents #top02 .area_fv{
margin: 0 0 30px;
}

#contents #area{
padding: 0 10px 0;
margin: 0 0 30px;
}

#contents #area .area-h2-wrap{
margin: 0 0 10px;
}

#contents #area .area-h2-wrap h2{
font-size: 26px;
}

#contents #area .area-h2-wrap img{
width: 96px;
margin: 0 10px 0 0;
}

#contents #area .area-wrap{
padding: 15px;
}

#contents #area .area-wrap .area-row .rural{
font-size: 16px;
width: 16%;
}

#contents #area .area-wrap .area-row ul.prefecture{
width: 84%;
}

#contents #area .area-wrap .area-row ul.prefecture li{
margin: 0 5px 10px;
width: 21%;
}

#contents #area .area-wrap .area-row ul.prefecture li a{
font-size: 14px;
}

#contents #main02 #attention01{
padding: 20px;
}

#contents #main02 #attention01 .attention01-h2-wrap img{
width: 120px;
padding: 0 10px 0 0;
}

#contents #main02 #attention01 .attention01-h2-wrap .subtitle{
font-size: 14px;
border-radius: 36px;
margin: 0 0 5px;
padding: 5px 10px;
}

#contents #main02 #attention01 .attention01-h2-wrap h2{
font-size: 26px;
}

#contents #main02 #attention01 h3{
font-size: 26px;
margin: 100px auto 12px;
}

#contents #main02 #attention01 h3.h01:after{
font-size: 60px;
left: 41%;
top: -80px;
}

#contents #main02 #attention01 h3.h02:after{
font-size: 60px;
left: 41%;
top: -80px;
}

#contents #main02 #attention01 p{
padding: 20px;
font-size: 16px;
}

#contents #main02 #attention02 h3{
font-size: 26px;
margin: 0 auto 20px;
}

#contents #main02 #attention02{
padding: 20px;
margin: 0 0 30px;
}

#contents #main02 #attention02 img{
width: 200px;
margin: 0 auto 20px;
}

#contents #main02 #attention02 p{
font-size: 16px;
padding: 20px;
}




#contents #main02 .point h3.h01:after{
font-size: 60px;
left: 42%;
top: -90px;
}

#contents #main02 .point h3.h02:after{
font-size: 60px;
left: 42%;
top: -90px;
}

#contents #main02 .point h3::before{
width: 24px;
height: 24px;
margin-right: 10px;
}

#contents #main02 .point img.images{
width: 70%;
}

#contents #main02 .point h4{
padding: 0 30px;
font-size: 16px;
}

#contents #main02 .point p{
padding: 0 30px;
font-size: 14px;
}

#contents #main02 .point p:last-child{
margin-bottom: 60px;
}

#contents #main02 .recommend h3{
font-size: 20px;
}

#contents #main02 .recommend h3:before{
height: 2px;
}

#contents #main02 .recommend .box{
padding: 0 30px;
}

#contents #main02 .recommend .box .logo-box{

width: 80%;
margin: 0 auto 30px;
background-size: 36px;
padding: 30px;
}

#contents #main02 .recommend .box .logo-box img{
width: 100%;
}

#contents #main02 .recommend .box .logo-box img:first-child{
margin-bottom: 40px;
}

#contents #main02 .recommend .link{
padding: 0 30px;
margin-bottom: 60px;
}

#contents #main02 .recommend .link.sp{
display: flex;
}

#contents #main02 .recommend .link.pc{
display: none;
}

#contents #main02 .recommend .link a.official-link{
font-size: 16px;
padding: 5px;
}

#contents #main02 .recommend .link a.official-link span.small{
font-size: 12px;
}

#contents #main02 .recommend .link:last-child{
margin-bottom: 120px;
}

#contents #main02 #sample{
margin: 0 0 30px;
}

#contents #main02 #sample .h2-wrap{
margin: 0 0 20px;
}

#contents #main02 #sample h2{
margin: 0 0 10px;
}

#contents #main02 #sample h2:before{
    width: 24px;
    height: 28px;
    vertical-align: 20px;
    margin-right: 5px;
}

#contents #main02 .h2-wrap{
margin-bottom: 40px;
}

#contents #search02.search-result{
margin: 0 0 5px;
}

#contents #main02 #result02 .output{
padding: 10px 10px 0;
margin: 0 0 30px;
}

#contents #main02 #result02 .output .output-item{
padding: 10px;
border-radius: 15px;
margin: 0 0 10px;
}

#contents #main02 #result02 .output .output-item h3{
font-size: 28px;
margin-bottom: 10px;
}

#contents #main02 #result02 .output .output-item h4{
font-size: 18px;
margin-bottom: 10px;
}

#contents #main02 #result02 .output .output-item .box img.logo{
width: 40%;
padding-right: 10px;
margin: 0;
}

#contents #main02 #result02 .output .output-item .advice{
margin: 0 0 10px;
}

#contents #main02 #result02 .output .output-item .advice img.icon{
width: 100px;
margin: 0 10px 0 0;
}

#contents #main02 #result02 .output .output-item .advice .comment{
padding: 20px;
font-size: 14px;

}

#contents #main02 #result02 .output .output-item .box{
margin: 0 0 10px;
}

#contents #main02 #result02 .output .output-item .box table.data{
width: 60%;
}

#contents #main02 #result02 .output .output-item .box table.data th{
font-size: 12px;
}

#contents #main02 #result02 .output .output-item .box table.data td{
font-size: 14px;
}

#contents #main02 #result02 .output .output-item ul li.title{
font-size: 18px;
}

#contents #main02 #result02 .output .output-item ul li.title:before{
width: 20px;
height: 20px;
vertical-align: -2px;
margin-right: 5px;
}

#contents #main02 #result02 .output .output-item ul li.description{
margin-bottom: 15px;
font-size: 14px;
}

#contents #main02 #result02 .output .output-item a.cvbutton{
font-size: 16px;
width: 80%;
}

#contents #main02 #result02 .sort select{
width: 50%;
}

#contents #survey{
padding: 0 8px;
}

#contents #survey h3{
text-align: center;
padding: 16px;
font-size: 20px;
border-radius: 5px;

}

#contents #survey p{
margin: 0 0 30px;
}

#contents #survey p:last-child{
margin: 0 0 60px;
}

#contents #survey h4{
padding: 8px 16px;
background: #eef5f8;
display: inline-block;
border-radius: 5px;
margin: 0 0 10px;
}

#contents #column h1{
font-size: 30px
}

#contents #column h1 span.sub{

}

#contents #column h2{
font-size: 20px;
margin: 0 0 10px 10px;
}

#contents #column ul{
padding: 0 10px 0 10px;
}

#contents #column ul li a{
font-size: 16px;
text-indent: -10px;

}

#contents #column ul li a:before{
margin-right: 5px;
}

#contents #post{
padding: 10px;
}

#contents #post h2 {
font-size: 24px;
    padding: 10px;
    border-radius: 4px;
}


#contents #post p {
font-size: 14px;
margin: 0 0 30px;
}


#contents #post h3 {
margin: 0 0 20px;
}

#contents #post h3:before {

}

#contents #post h4 {

}




.pc{
display: none;
}

}