@charset "utf-8";


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

/*全体の設定
---------------------------------------------------------------------------*/
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:   #18B491;
;
    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: #18B491;
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 #18B491;
border-top:   dotted 1px #18B491;
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: #e6fbec;
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: #e6fbec;
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: #ff0066;
font-weight: bold;
}

span.gray{
color: #999999;
}

span.bgblue{
background-color:#18B491;
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.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 img#new_fv03{
width: 100%;
margin: 0 0 0;
}

.fv_wrap{
position: relative;
}

.fv_annotation {
position: absolute;
top: 340px;
left: 90px;
font-size: 20px;
color: #666;
line-height: 1.3;
}

#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: 31.0%;
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;

}

#contents #top02 #compare .tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:0 0 0;
}
#contents #top02 #compare .tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #18B491;
  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: #18B491;
}
#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;
}

#contents #top02 #compare table{
width: 100%;
}

#contents #top02 #compare table th{

}

#contents #top02 #compare table th.th-service{
width: 20%;
}

#contents #top02 #compare table th.th-value{
width: 45%;
}




#contents #top02 #compare table th.th-workform{

}

#contents #top02 #compare table th.th-ammount{
width: 16%;
}

#contents #top02 #compare table th.th-area{

}



#contents #top02 #compare table td.td-service{
width: 20%;
}

#contents #top02 #compare table td.td-value{
position: relative;
}

#contents #top02 #compare table td.td-value img.rank{
position: absolute;
top:1px;
left: 0px;
width: 48px;
}

#contents #top02 #compare table td.td-value img.logo{
width: 240px;
display: block;
margin: 0 auto;
}

#contents #top02 #compare table td.td-value .text-box{
padding: 15px;
font-size: 16px;
font-weight: bold;
background: #e6fbec;
border-radius: 5px;
margin: 5px 0 0;
}

#contents #top02 #compare table td.td-value .text-box a.link{
display: block;
background: #ff6633;
color: #fff;
padding: 10px 0px;
text-decoration: none;
border-radius: 10px;
width: 240px;
margin: 5px auto 0;
  position: relative;
  overflow: hidden;
}

#contents #top02 #compare table td.td-value .text-box a.link: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; }
}

#contents #top02 #compare table td.td-value .text-box a.link i{
margin-left: 5px;
}


#contents #top02 #compare table td.td-workform{

}

#contents #top02 #compare table td.td-ammount{

}

#contents #top02 #compare table td.td-area{

}

#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 #18B491;
border-top: solid 2px #18B491;
top: 0;
left: 0;
}

#contents #top02 #compare #recommend .recommend-box:after{
border-right: solid 2px #18B491;
border-bottom: solid 2px #18B491;
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/ph_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: #18B491;
font-weight: 500;
}

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


.tablesorter-default{
	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;
}

.tablesorter-default th{
text-align: center;
	color: #222222;!important
}

#jquery-tablesorter-table th.tablesorter-headerasc{
    background-color: #fff;
    color: #18B491;
    border-bottom: none;
}

#jquery-tablesorter-table th.tablesorter-headerdesc{
    background-color: #18B491;
    color: #fff;
    border-bottom: none;
}

#jquery-tablesorter-table02 th.tablesorter-headerasc{
    background-color: #fff;
    color: #18B491;
    border-bottom: none;
}

#jquery-tablesorter-table02 th.tablesorter-headerdesc{
    background-color: #18B491;
    color: #fff;
    border-bottom: none;
}

#jquery-tablesorter-table03 th.tablesorter-headerasc{
    background-color: #fff;
    color: #18B491;
    border-bottom: none;
}

#jquery-tablesorter-table03 th.tablesorter-headerdesc{
    background-color: #18B491;
    color: #fff;
    border-bottom: none;
}




#contents #top02{

}

#contents #top02 #compare table td{
text-align: center;
padding: 15px;
vertical-align: middle;
}

#contents #top02 #compare table td.td-service img{
width: 100%;
}

#contents #top02 #compare table td a.cvbutton{
width: 100%;
text-align: center;
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 8px;
    color: #ffffff;
    background-color: #ff6600;
    border-bottom: solid 3px #cc3366;
    margin: 8px auto 0px;
    font-weight: bold;
}

#contents #top02 #compare table td a.cvbutton.sp{
display: none;
}

#contents #top02 #compare table td.td-value{
font-size: 20px;
}

#contents #top02 #compare table td.td-value span.gold{
  -webkit-text-stroke: 1px #cc9900;
  text-stroke: 1px #cc9900;
}

#contents #top02 #compare table td.td-workform .hushtug{
display: block;
margin: 0 auto 0;
position: relative;
}

#contents #top02 #compare table td.td-workform .hushtug.comment-on{
margin: 40px auto 0;
}

#contents #top02 #compare table td.td-workform .hushtug .hushtug-item{
    background-color: #18B491;
    border-radius: 4px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: bold;
    margin: 4px auto;
    padding: 3px 4px;
    width: 80%
}

#contents #top02 #compare table td.td-workform .hushtug .hushtug-item.off{
background-color: #cdcdcd;
color: #999999;
}

#contents #top02 #compare table td.td-workform .hushtug .comment-wrap{
position: absolute;
top:-72px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#contents #top02 #compare table td.td-workform .hushtug .comment-wrap .comment{
    width: 100px;
    margin: 10px auto 15px;
    text-align: center;
    font-size: 14px;
    background-color: #ffeddb;
    color: #ff4b4b;
	font-weight: bold;
    padding: 5px 0px;
    border-radius: 35px;
    position: relative;
    line-height: 1.3;
}

#contents #top02 #compare table td.td-workform .hushtug .comment-wrap .comment:after{
content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #ffeddb transparent transparent transparent;
    border-width: 15px 10px 0 10px;
    z-index: 1;
	
	}



#contents #top02 #compare table td.td-ammount{
font-size: 18px;
color: #999999;
font-weight: bold;
padding: 0;
}

#contents #top02 #compare table td.td-ammount img{
width: 50px;
display: block;
margin: 0 auto 5px;

}

#contents #top02 #compare table td.td-ammount span.ammount{
font-weight: bold;
font-size: 20px;
color: #ff6600;
}



#contents #main02{
color: #222222;
}

#contents .h2-wrap{
display: flex;
justify-content:center;
align-items: center;
border-bottom: solid 1px #18B491;
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: #18B491;
color: #fff;
padding: 3px 30px;
border-radius: 30px;
margin-bottom: 15px;
}

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

h2{
font-size: 60px;
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: #18B491;
}

#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: #18B491;
}

#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/ph_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 #18B491;
	border-top: dotted 2px #18B491;
	top: 0;
	left: 0;
}

#contents #main02 .recommend .box .logo-box::after {
	border-right: dotted 2px #18B491;
	border-bottom: dotted 2px #18B491;
	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 .box p b{
background: #ffffcc;
}


#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: #e6fbec;
font-size: 18px;
box-shadow: 0px 2px 2px #ccc;
}

#contents #main02 #attention01{
background: #f5e7d5;
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: #18B491;
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: #18B491;
    z-index: 100;
}

#contents #main02 #attention01 h3.h02:after{
position: absolute;
    content: "02";
    font-size: 100px;
    top: -140px;
    left: 42%;
    color: #18B491;
    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: #f5e7d5;
border-radius: 10px;
font-weight: bold;
}


#contents #sample{
padding-bottom: 80px;
}

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

#contents #sample h2 span.color{
color: #18B491;
}


#contents .sample_date{
text-align: right;
font-size: 12px;
font-weight: bold;
color: #18B491;
}

#contents #sample .carousel-wrap{

}

#contents #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 #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 #18B491;
border-radius: 6px;
}

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

#contents #sample .carousel-wrap .carousel li .title{
width:100%;
height: 65px;
padding: 4px;
background-color: #18B491;
color: #fff;
font-size: 12px;
font-weight: bold;
overflow: hidden;
border-radius: 5px 5px 0 0;
}

#contents #sample .carousel-wrap .carousel li .title-wrapper{
position: relative;
}


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

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

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

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

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

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

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

#contents #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 #sample .carousel-wrap .carousel li .wrapper .offer{
display: flex;
justify-content: space-around;
align-items: center;
padding: 0;
}

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

#contents #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 #search02 h2{
margin-bottom: 15px;
}

#contents #search02 h2 span.color{
color: #18B491;
}


#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: #e6fbec;
}

#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:   #18B491;
    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 #18B491;
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: #18B491;
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:#18B491;
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: #18B491;
}

#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: #e6fbec;
    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 #e6fbec;
    border-top: 15px solid transparent;
    border-bottom: 15px solid transparent;
}

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

#contents #main02 .h2-wrap_ranking{
border: none;
background: url(../images/ph_rank_h2background01.png);
margin: 90px 0px 40px;
padding: 20px 0px;
position: relative;
}

#contents #main02 .h2-wrap_ranking:after{
position: absolute;
content: '';
display: inline-block;
background: url(../images/ph_rank_h2icon01.png);
width: 164px;
height: 80px;
top: -90px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#contents #main02 .h2-wrap_ranking h2{
line-height: 1;
font-size: 50px;
background: #fff;
width: 100%;
text-align: center;
padding: 20px
}

#contents #main02 .h2-wrap_ranking h2 span.color{
font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-weight: bold;
  color: #ACB6E5;
  background: -webkit-linear-gradient(90deg, #e5b915, #edd43a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 120%;
}


#contents #main02 #ranking .tab-wrap {
  display: flex;
  flex-wrap: wrap;
  margin:0 0 0;
}
#contents #main02 #ranking .tab-wrap:after {
  content: '';
  width: 100%;
  height: 3px;
  background: #18B491;
  display: block;
  order: -1;
  position: sticky;
  top: 46px;
}
#contents #main02 #ranking .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;
  top: 0;
  position: sticky;
  z-index: 1;
  cursor: pointer;
  border-radius: 5px 5px 0 0;
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
  border-bottom: none;
  border-left: solid 1px #fff;
  flex: 1;
}
#contents #main02 #ranking .tab-label:not(:last-of-type) {
  
}
#contents #main02 #ranking .tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
/* アクティブなタブ */
#contents #main02 #ranking .tab-switch:checked+.tab-label {
  background: #18B491;
}
#contents #main02 #ranking .tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 30px 0px;
  opacity: 1;
  transition: .5s opacity;
  background: #fff;

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



#contents #main02 #ranking .ranking-item{
background: #f2f6f9;
border-radius: 10px;
padding: 20px;
position: relative;
margin: 0 0 20px;
border-top: solid 10px #159f80;
box-shadow: 0px 2px 4px rgb(0 0 0 / 20%);
}

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

#ranking .ranking-item .item-header{
display: flex;
align-items: flex-start;
padding: 0 0 10px;
margin: 0 0 20px;
border-bottom: solid #ccc 2px;
}

#ranking .ranking-item .item-header .rank{
color: #daae2b;
font-weight: bold;
font-size: 24px;
margin: 0 20px 0 0;
}

#ranking .ranking-item .item-header .rank:before{
    font-family: "Font Awesome 5 Free";
    content: "\f521";
    font-weight: 900;
    font-size: 20px;
    vertical-align: 2px;
    margin: 0 4px 0 0;
}

#ranking .ranking-item .item-header .rank.rank02{
color: #ccc;
}

#ranking .ranking-item .item-header .rank.rank03{
color: #d2b48c;
}

#ranking .ranking-item .item-header .rank.rank04,#ranking .ranking-item .item-header .rank.rank05{
color: #47BAA0;
}

#ranking .ranking-item .item-header ul.tags{
display: flex;
font-size: 20px;
align-items: flex-start;
flex-wrap: wrap;
}

#ranking .ranking-item .item-header ul.tags li{
margin: 0 5px 5px 0;
font-weight: bold;
color: #159F80;
padding: 4px 10px;
border: solid 2px #47BAA0;
border-radius: 6px;
line-height: 1;
}

#ranking .ranking-item .maincopy{
font-size: 32px;
font-weight: bold;
margin: 0 0 20px;
}

#ranking .ranking-item .item-hv{
display: flex;
flex-wrap: nowrap;
}

#ranking .ranking-item .item-hv .left{
margin: 0 20px 20px 0;
}

#ranking .ranking-item .item-hv .left img{

}

#ranking .ranking-item .item-hv .right{
width: 100%;
margin: 0 0 20px;
}

#ranking .ranking-item .item-hv .right h3{
font-size: 32px;
margin: 0 0 10px;
}

#ranking .ranking-item .item-hv .right h3 i{
margin: 0 0 0 5px;
font-size: 80%;
}

#ranking .ranking-item .item-hv .right table{
width: 100%;
text-align: left;
font-size: 22px;
border-collapse: collapse;
}

#ranking .ranking-item .item-hv .right table tr{
border-bottom: dotted 2px #ccc;
}



#ranking .ranking-item .item-hv .right table th,#ranking .ranking-item .item-hv .right table td{
line-height: 1;
padding: 8px 0px;
font-weight: bold;
}

#ranking .ranking-item .item-hv .right table th{
color: #888;
width: 120px;
}

#ranking .ranking-item .item-hv .right table ul.hashtag{
display: flex;
flex-wrap: wrap;
}

#ranking .ranking-item .item-hv .right table ul.hashtag li{
padding: 6px 0px;
width: 48%;
background: #47BAA0;
color: #fff;
border-radius: 4px;
text-align: center;
margin: 0 0 5px 0;
font-size: 18px;
line-height: 1;
}

#ranking .ranking-item .item-hv .right table ul.hashtag li:nth-child(odd){
margin: 0 5px 5px 0;
}

#ranking .ranking-item .item-hv .right table ul.hashtag li.off{
background: #fff;
color: #ccc;

}



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


#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: #18B491;
font-size: 150%;
}


#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 .hushtug{
display: block;
margin: auto;
position: relative;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug.comment-on{
margin: 60px auto 0;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .hushtug-item{
    background-color: #18B491;
    border-radius: 4px;
    color: rgb(255, 255, 255);
    font-size: 14px;
    font-weight: bold;
    margin: 4px auto;
    padding: 3px 4px;
    width: 80%
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .hushtug-item.off{
background-color: #cdcdcd;
color: #999999;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .comment-wrap{
position: absolute;
top:-72px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .comment-wrap .comment{
    width: 110px;
    margin: 10px auto 15px;
    text-align: center;
    font-size: 14px;
    background-color: #ffeddb;
    color: #ff4b4b;
	font-weight: bold;
    padding: 5px 0px;
    border-radius: 35px;
    position: relative;
    line-height: 1.3;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .comment-wrap .comment:after{
content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #ffeddb transparent transparent transparent;
    border-width: 15px 10px 0 10px;
    z-index: 1;
	}

#contents #main02 #ranking .ranking-item .spec table td.strength{
text-align: left;
}

#contents #main02 #ranking .ranking-item .spec table h4{
display: inline-block;
}

#contents #main02 #ranking .ranking-item .spec table h4:before{
  font-family: "Font Awesome 5 Free";/*忘れずに*/
  content: "\f292";/*アイコンのユニコード*/
  font-weight: 900;
  color: #18B491;
  margin: 0 10px 0 0;
}


#contents #main02 #ranking .ranking-item .spec table p{
font-weight: normal;
font-size: 18px;
margin: 0 0 15px;
}

#contents #main02 #ranking .ranking-item .spec table p:last-child{
margin: 0 0 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 0px;
}

#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/ph_h4-uservoice_icon.png);
background-size: contain;
left: 0px;
}

#contents #main02 #ranking .ranking-item .uservoice ul{
    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 #ranking .ranking-item .uservoice ul li{
scroll-snap-align: start;
    margin: 0 12px 0 0px;
    display: inline-block;
    width: 300px;
    white-space: normal;
    vertical-align: top;
    background: #fff;
    border-radius: 10px;
    padding: 15px;
}

#contents #main02 #ranking .ranking-item .uservoice ul li .profile{
display: flex;
align-items: flex-end;
border-bottom: solid 2px #cdcdcd;
padding: 0 0 15px;
margin: 0 0 15px;
}

#contents #main02 #ranking .ranking-item .uservoice ul li .profile img{
width: 64px;
}

#contents #main02 #ranking .ranking-item .uservoice ul li .profile .detail{
font-weight: bold;
font-size: 20px;
margin-left: 15px;
line-height: 1.4;
}

#contents #main02 #ranking .ranking-item .uservoice ul li p{
font-size: 18px;
height: 224px;
overflow: hidden;
}

#contents #ranking .ranking-item p.addition{
text-align: right;
color: #888;
margin: 10px 0 0;
}

/*211216
---------------------------------------------------------------------------*/
section#header-ranking{
padding: 40px 100px 100px;
background: #f2f6f9;
margin: 0 0 80px;
position: relative;
}

section#header-ranking h2{
display: inline-block;
font-size: 36px;
line-height: 1;
padding: 0 0 10px 0;
border-bottom: solid 2px #159F80;
position: relative;
margin: 0 0 36px;
}

section#header-ranking h2 span.color{
color: #159F80;
text-shadow: 3px 3px 0 #fff;
}

section#header-ranking h2 span.pharma:before{
display: inline-block;
content: '';
background: url(../images/ph_header-ranking_h2icon01.png);
width: 36px;
height:36px;
background-size: contain;
vertical-align: -5px;
margin: 0 10px 0 0;
}

section#header-ranking h2 span.drugstore:before{
display: inline-block;
content: '';
background: url(../images/ph_header-ranking_h2icon02.png);
width: 36px;
height:36px;
background-size: contain;
vertical-align: -5px;
margin: 0 10px 0 0;
}

section#header-ranking h2 span.hospital:before{
display: inline-block;
content: '';
background: url(../images/ph_header-ranking_h2icon03.png);
width: 36px;
height:36px;
background-size: contain;
vertical-align: -5px;
margin: 0 10px 0 0;
}

section#header-ranking h2 span.company:before{
display: inline-block;
content: '';
background: url(../images/ph_header-ranking_h2icon04.png);
width: 36px;
height:36px;
background-size: contain;
vertical-align: -5px;
margin: 0 10px 0 0;
}

section#header-ranking h2:before{
    content: "";
    position: absolute;
    bottom: -50px;
    left: 13%;
    margin-left: -16px;
    border: 25px solid transparent;
    border-top: 25px solid #f2f6f9;
    z-index: 2;
}

section#header-ranking h2:after{
    content: "";
    position: absolute;
    bottom: -53px;
    left: 13%;
    margin-left: -17px;
    border: 26px solid transparent;
    border-top: 26px solid #159F80;
    z-index: 1;
}

section#header-ranking ul.wrap{
border: solid 1px #ccc;
margin: 0 0 40px;
background: #fff;
box-shadow: 0px 2px 4px rgb(0 0 0 / 30%);
}

section#header-ranking ul.wrap:last-child{
margin: 0 0 0;
}

section#header-ranking ul.wrap li a{
display: flex;
text-decoration: none;
color: #222;
border-bottom: solid 1px #ccc;
padding: 20px;
align-items: center;
position: relative;
}

section#header-ranking ul.wrap li a:after{
position: absolute;
content: '';
background: url(../images/ph_header-ranking_link-button02.png);
background-size: cover;
width: 52px;
height: 54px;
right: -4px;
}


section#header-ranking ul.wrap li img.logo{
width: 180px;
height: 50px;
margin: 0 20px 0 0;
}

section#header-ranking ul.wrap .spec{
width: 100%;
line-height: 1;
}

section#header-ranking ul.wrap li .row01{
font-size: 18px;
display: flex;
border-bottom: dotted 2px #ccc;
padding: 0 0 10px;
align-items: baseline;
}

section#header-ranking ul.wrap li .row01 .rank{
color: #daae2b;
margin: 0 20px 0 0;
}

section#header-ranking ul.wrap li .row01 .rank.rank02{
color: #ccc;
}

section#header-ranking ul.wrap li .row01 .rank.rank03{
color: #d2b48c;
}

section#header-ranking ul.wrap li .row01 .rank.rank04,section#header-ranking ul.wrap li .row01 .rank.rank05{
color: #87D6C4;
}


section#header-ranking ul.wrap li .row01 .rank:before{
  font-family: "Font Awesome 5 Free";
  content: "\f521";
  font-weight: 900;
  font-size: 16px;
  vertical-align: 2px;
  margin: 0 4px 0 0;
}

section#header-ranking ul.wrap li .row02{
display: flex;
font-size: 22px;
align-items: baseline;
padding: 10px 0 0;
color: #888;
font-weight: bold;
}

section#header-ranking ul.wrap li .row02 .value{
margin: 0 10px 0 0;
color: #ff6600;
}

section#header-ranking ul.wrap li .row02 .value:last-child{
margin: 0;
}

section#header-ranking ul.wrap li .row02 sup{
font-size: 16px;
}

section#header-ranking a.category-link{
display: block;
background: #d4f1eb;
text-decoration: none;
font-weight: bold;
text-align: center;
color: #159F80;
font-size: 20px;
padding: 10px 0px;
}

section#header-ranking a.category-link i{
margin: 0 0 0 10px;
}

section#header-ranking p.addition{
position: absolute;
right:20px;
bottom: 20px;
}


section#situation{
position: relative;
padding: 0 100px;
margin: 0 0 80px;
}

section#situation .situation-header{
display: flex;
flex-wrap: nowrap;
margin: 0 0 20px;
align-items: center;
}

section#situation .situation-header img{
margin: 0 20px 0 0;
}

section#situation .situation-header .right{
width: 100%;
}

section#situation .situation-header h2{
font-size: 40;
}

section#situation .situation-header .subtitle{
font-size: 28px;
background: #159F80;
color: #fff;
display: inline-block;
line-height: 1;
padding: 10px 20px;
border-radius: 40px;
margin: 0 0 10px;
}


.grad-btn {
  z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 148px;
    margin: auto;
    padding: 5px 0;
    border-radius: 4px;
    background: #009e8f;
    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;
}

p.situation-description{
  position: relative;
  overflow: hidden;
  height: 100px;
  font-size: 22px;
}

p.situation-description::before {
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80px; /*グラデーションで隠す高さ*/
  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: "";
}
.grad-trigger {
  display: none; /*チェックボックスは常に非表示*/
}
.grad-trigger:checked + .grad-btn {
  display: none; /*チェックされていたら、grad-btnを非表示にする*/
}
.grad-trigger:checked ~ p.situation-description{
  height: auto; /*チェックされていたら、高さを戻す*/
}
.grad-trigger:checked ~ p.situation-description::before {
  display: none; /*チェックされていたら、grad-itemのbeforeを非表示にする*/
}

#contents #category-menu{
padding: 0px 0px;
margin: 0 0 60px;
}

#contents #category-menu{

}

#contents #category-menu h2 span.color {
    color: #18B491;
}

#contents #category-menu .row{
display: flex;
flex-wrap: nowrap;
margin: 0 0 20px;
}

#contents #category-menu .row:last-child{
margin: 0;
}

#contents #category-menu a.category-item{
display: block;
text-decoration: none;
color: #444;
font-size: 24px;
font-weight: bold;
width: 50%;
background: url(../images/ph_category-menu_bgstripe01.png) #DDF1EC;
padding: 20px;
position: relative;
border-bottom: solid 2px #159F80;
}

#contents #category-menu a.category-item:after{
  font-family: "Font Awesome 5 Free";
  content: "\f138";/
  font-weight: 900;
    position: absolute;
	color: #159F80;
	top: 32%;
	right: 20px;
	font-size: 32px;
}

#contents #category-menu a.category-item span.color{
color: #159F80;
text-shadow: 4px 4px 0 #fff;
font-size: 32px;
}

#contents #category-menu a.category-item:nth-child(odd){
margin: 0 10px 0 0;
}

#contents #category-menu a.category-item:nth-child(even){
margin: 0 0 0 10px;
}

#column{
background: #f2f6f9;
}

#column .inner{
width: 750px;
padding: 0 20px 0px;
}

#column .inner.main-column{
padding: 0 20px 40px;
}

section.col01{
    padding: 20px 0px;
    margin: 0 0 40px;
    border-radius: 20px;
    background: #fff;
	font-size: 18px;
}

p.p-col01{
padding: 0 20px 20px;
font-size: 18px;
}

h2.h2-col01{
    font-size: 28px;
    padding: 20px;
    margin: 0 0 20px;
    position: relative;
    background: #d4f1eb;
	
}

h2.h2-col01:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #d4f1eb transparent transparent transparent;
    border-width: 15px 10px 0 10px;
    z-index: 1;
}

img.img-col01{
    margin: 0 20px 20px;
    border-radius: 20px;
}

ul.ul-col01-01{
width: 670px;
margin: 0 auto 20px;
padding: 20px 20px 20px 40px;
background: #d4f1eb;
border-radius: 10px;
list-style: decimal;
}

ul.ul-col01-01 h3{
color: #149A7C;
margin: 0 0 10px -20px;
font-style: oblique;
font-size: 24px;
}

ul.ul-col01-01 li{
margin: 0 0 10px;
}

ul.ul-col01-01 li:last-child{
margin: 0;
}

ul.ul-col01-01 li a{
font-weight: bold;
color: #222;
}

span.color-green{
color: #149A7C;
font-weight: bold;
}

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

span.color-orange{
color: #ff6600;
font-weight: bold;
}

ul.ul-col01-02{
width: 670px;
margin: 0 auto 20px;
padding: 20px;
list-style: disc;
list-style-position: inside;
background: #f2f6f9;
border-radius: 10px;
}

ul.ul-col01-02 li{
font-weight: bold;
}

ul.ul-col01-03{
width: 670px;
margin: 0 auto 20px;
padding: 20px 20px 20px 52px;
border: solid 2px #ff6600;

}

ul.ul-col01-03 li{
margin: 0 0 10px;
position: relative;
font-weight: bold;
}

ul.ul-col01-03 li:before{
  font-family: "Font Awesome 5 Free";
  content: "\f14a";/
  font-weight: 900;
  color: #ff6600;
  font-size: 24px;
  position: absolute;
  left: -32px;
  top: -6px;
}

ul.ul-col01-03 li:last-child{
margin: 0;
}

.align-center{
text-align: center;
}

h3.h3-ul-col01-03{
    display: inline-block;
    margin: 0px auto 25px;
    text-align: center;
    font-size: 18px;
    background-color: #ff6600;
    color: #fff;
    padding: 15px 15px;
    border-radius: 35px;
    position: relative;
    line-height: 1;
}

h3.h3-ul-col01-03:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #ff6600 transparent transparent transparent;
    border-width: 15px 10px 0 10px;
    z-index: 1;
}

a.txtlink-big{
font-weight: bold;
font-size: 120%;
text-decoration: none;
}

a.txtlink{
font-weight: bold;
text-decoration: none;
}

a.txtlink-big:after{
  font-family: "Font Awesome 5 Free";
  content: "\f35d";/
  font-weight: 900;
}

#fv_col01{
width: 100%;
margin: 20px 0 ;
}

#contents #search02.search02-fresher{
margin: 0px 0 0px;;
}

h2.h2-col01-02{
    display: inline-block;
    margin: 0px auto 25px;
    text-align: center;
    font-size: 23px;
    background-color: #18B491;
    color: #fff;
    padding: 15px 15px;
    border-radius: 35px;
    position: relative;
    line-height: 1;
}

h2.h2-col01-02:after{
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #18B491 transparent transparent transparent;
    border-width: 15px 10px 0 10px;
    z-index: 1;
}

.recommend-col01{
width: 670px;
margin: 0 auto;
box-shadow: 0px 2px 4px rgb(0 0 0 / 30%);
padding: 20px;
border-radius: 10px;
}

.recommend-col01 h3{
font-size: 24px;
margin: 0 0 10px;
}

.recommend-col01 a.banner{
margin: 0 20px 0 0;
}

.recommend-col01 a.banner img{
width: 200px;
}

.recommend-col01 ul.description{
padding: 0 0 0 20px;
}

.recommend-col01 ul.description li{
font-weight: bold;
position: relative;
margin: 0 0 10px;
line-height: 1.25;
}

.recommend-col01 ul.description li:before{
  font-family: "Font Awesome 5 Free";
  content: "\f14a";/
  font-weight: 900;
  color: #18B491;
  font-size: 24px;
  position: absolute;
  left: -29px;
  top: -5px;
}

.recommend-col01 .wrap{
display: flex;
margin: 0 0 20px;
}

.recommend-col01 a.cvbutton{
display: inline-block;
padding: 20px 35px 20px 20px;
font-size: 24px;
background: #ff6600;
text-decoration: none;
font-weight: bold;
color: #fff;
border-radius: 10px;
box-shadow: 0 5px 0 #B64800;
line-height: 1;
position: relative;
}

.recommend-col01 a.cvbutton:after{
  font-family: "Font Awesome 5 Free";
  content: "\f054";/
  font-weight: 900;
  position: absolute;
  right: 10px;
     top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  
}

img.col01-image{
width: 670px;
margin: 0 auto 20px;
display: block;
border-radius: 10px;
}

a.cvbutton-col01{
    display: inline-block;
    padding: 15px 20px;
	margin: 0 auto 25px;
    font-size: 24px;
    background: #ff6600;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 0 #B64800;
    line-height: 1.35;
    position: relative;
	text-align: center;
}

a.cvbutton-col01 span.small{
font-size: 18px;
}

h4.h4-cvbutton-col01{
margin: 0 0 10px;
}

h2.h2-column-annotation{
font-size: 18px;
text-align: center;
position: absolute;
display: inline-block;
padding: 0 10px;
background: #f2f6f9;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
	top: -10px;
	color: #149A7C;
}

h2.h2-column-annotation i:first-child{
margin: 0 5px 0 0;
}

h2.h2-column-annotation i:last-child{
margin: 0 0 0 5px;
}

.column-annotation{
position: relative;
padding: 20px;
margin: 0 0 20px;
border: solid 1px #149A7C;
}

p.p-column-annotation{
font-size: 18px;
text-align: center;
}

p.p-column-annotation a.annotation-link:after{
  font-family: "Font Awesome 5 Free";
  content: "\f101";/
  font-weight: 900;
}

.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%;


}

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

#contents #top02 header .btn-wrap a{
margin: 0 5px 0 0;
padding: 0 15px 25px 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: 12px;

}

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

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


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

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

#contents #top02 img#new_fv03{
width: 100%;
margin: 0 0 0;
}

.fv_annotation {
position: absolute;
top: 40.8vw;
left: 5.33vw;
font-size: 10px;
color: #666;
line-height: 1.2;
text-shadow: 0 0 1px #fff;
}


#contents #top02 #fv-wrap{
position: relative;
}

#contents #top02 #fv-wrap a.rank-button{
position: absolute;
display: block;
padding: 3vw 0px;
text-align: center;
width: 50vw;
border-radius: 20px;
background: #ffe34b;
color: #444;
font-weight: bold;
line-height: 1;
text-decoration: none;
bottom: 6.4vw;
left: 5vw;
box-shadow: 0px 2px 0px #B6A235;
font-size: 3.6vw;
}

#contents #top02 #fv-wrap a.rank-button i{
margin: 0 0 0 4px;;
}




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

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

#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{

}

.tablesorter-default{
font-size: 10px;
}

#contents #top02 #compare table th.th-service{
width: 24%;
}

#contents #top02 #compare table td.td-service{
padding: 0px;
}

#contents #top02 #compare table td{
padding: 10px 5px;
}

#contents #top02 #compare table td.td-value{
font-size: 12px;
padding: 15px 5px 5px 0;
}

#contents #top02 #compare table td.td-value img.logo{
width: 120px;
}

#contents #top02 #compare table td.td-value .text-box{
font-size: 10px;
padding: 5px;
border-radius: 0px;
}

#contents #top02 #compare table td.td-value img.rank{
width: 24px;
}

#contents #top02 #compare table td.td-value .text-box a.link{
width: 100%;
padding: 5px 0px;
}

#contents #top02 #compare table td a.cvbutton{
padding: 5px;
font-size: 12px;
}

#contents #top02 #compare table td a.cvbutton.pc{
display: none;
}

#contents #top02 #compare table td a.cvbutton.sp{
display: inline-block;
}

#contents #top02 #compare table td.td-workform{
padding: 10px 5px 10px 0px;
}

#contents #top02 #compare table td.td-workform .hushtug .hushtug-item{
font-size: 10px;
width: 100%;
}

#contents #top02 #compare table td.td-workform .hushtug .comment-wrap{
top: -60px;
}

#contents #top02 #compare table td.td-workform .hushtug .comment-wrap .comment{
    width: 74px;
    text-align: center;
    font-size: 10px;
	
}

#contents #top02 #compare table td.td-workform .hushtug .comment-wrap .comment:after{
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-color: #ffeddb transparent transparent transparent;
    border-width: 10px 5px 0 5px;
    z-index: 1;
	
	}

#contents #top02 #compare table td.td-ammount img{
width: 30px;
}

#contents #top02 #compare table td.td-ammount{
font-size: 12px;
}

#contents #top02 #compare table td.td-ammount span.ammount{
font-size: 12px;
}

#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 #top02 #compare.new03 table td.td-value .text-box a.link{
padding: 8px 0px;
}

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

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

h2{
font-size: 30px;
padding: 0 0 10px;
}

#contents .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 .h2-wrap:after {
  content: "";
  position: absolute;
  bottom: -52px;
  left: 48%;
  margin-left: -17px;
  border: 26px solid transparent;
  border-top: 26px solid #18B491;
  z-index: 1;
}

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

#contents #sample .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 #sample .h2-wrap:after {
  content: "";
  position: absolute;
  bottom: -52px;
  left: 48%;
  margin-left: -17px;
  border: 26px solid transparent;
  border-top: 26px solid #18B491;
  z-index: 1;
}

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

#contents #main02 .h2-wrap_ranking{
margin: 50px 0px 20px;
padding: 10px 0px;
}

#contents #main02 .h2-wrap_ranking:after{
background-size: contain;
width: 82px;
height: 40px;
top: -45px;
}

#contents #main02 .h2-wrap_ranking h2{
font-size: 22px;
background: #fff;
padding: 10px 0px;
margin: 0;
}

#contents #main02 .h2-wrap_ranking h2 span.color{
}

#contents #main02 #ranking .tab-switch:checked+.tab-label+.tab-content{
padding: 10px 0px;
}

#contents #main02 #ranking .tab-wrap:after{
top: 43px;
}

#contents #main02 #ranking .ranking-item{
padding: 5px 10px 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;
}

#ranking .ranking-item .item-header{
padding: 0 0 5px;
margin: 0 0 5px;
border-bottom: solid #ccc 1px;
align-items: baseline;
}

#ranking .ranking-item .item-header .rank{
font-size: 14px;
margin: 0 5px 0 0;
}

#ranking .ranking-item .item-header .rank:before{
    font-size: 12px;
    vertical-align: 1px;
    margin: 0 2px 0 0;
}

#ranking .ranking-item .item-header ul.tags{
font-size: 10px;
}

#ranking .ranking-item .item-header ul.tags li{
margin: 0 3px 3px 0;
padding: 2px 3px;
border: solid 1px #47BAA0;
border-radius: 4px;
}

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

#ranking .ranking-item .item-hv{
}

#ranking .ranking-item .item-hv .left{
margin: 0 10px 10px 0;
}

#ranking .ranking-item .item-hv .left img{
width: 150px;
}

#ranking .ranking-item .item-hv .right{
margin: 0 0 10px;
}

#ranking .ranking-item .item-hv .right h3{
font-size: 16px;
margin: 0 0 5px;
}

#ranking .ranking-item .item-hv .right table{
font-size: 11px;
border-collapse: collapse;
}

#ranking .ranking-item .item-hv .right table tr{
border-bottom: dotted 1px #ccc;
}



#ranking .ranking-item .item-hv .right table th,#ranking .ranking-item .item-hv .right table td{
padding: 4px 0px;
}

#ranking .ranking-item .item-hv .right table th{
width: 60px;
}

#ranking .ranking-item .item-hv .right table ul.hashtag{
}

#ranking .ranking-item .item-hv .right table ul.hashtag li{
padding: 4px 0px;
border-radius: 2px;
margin: 0 0 3px 0;
font-size: 10px;
}

#ranking .ranking-item .item-hv .right table ul.hashtag li:nth-child(odd){
margin: 0 3px 3px 0;
}


#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 .hushtug.comment-on{
margin: 40px auto 0;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .hushtug-item{
font-size: 12px;
width: 100%;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .comment-wrap{
top: -60px;
}

#contents #main02 #ranking .ranking-item .spec table .hushtug .comment-wrap .comment{
    width: 78px;
    text-align: center;
    font-size: 10px;
}


#contents #main02 #ranking .ranking-item .spec table .hushtug .comment-wrap .comment:after{
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    border-style: solid;
    border-width: 10px 5px 0 5px;
    z-index: 1;
}

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

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

#contents #main02 #ranking .ranking-item .spec table td{
padding: 10px 0 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: 12px;
font-weight: bold;
}

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

#contents #main02 #ranking .ranking-item .uservoice h4{
font-size: 24px;
padding: 0 0 0 40px;
}

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

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

#contents #main02 #ranking .ranking-item .uservoice ul li{
width: 230px;
}

#contents #main02 #ranking .ranking-item .uservoice ul li .profile img{
width: 48px;
}

#contents #main02 #ranking .ranking-item .uservoice ul li .profile .detail{
font-size: 16px;
}

#contents #main02 #ranking .ranking-item .uservoice ul li p{
font-size: 14px;
height: 170px;
}

#contents #ranking .ranking-item p.addition{
font-size: 10px;
}

#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 #sample{
margin: 0 0 0px;
padding-bottom: 40px;
}

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

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

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

#contents #sample.new03 h2{
font-size: 26px;
}

#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: #e6fbec;
display: inline-block;
border-radius: 5px;
margin: 0 0 10px;
}

/*211216
---------------------------------------------------------------------------*/
section#header-ranking{
padding: 20px 10px 30px;
margin: 0 0 20px;
}

section#header-ranking h2{
font-size: 18px;
border-bottom: solid 1px #159F80;
padding: 0 0 5px 0;
margin: 0 0 22px;
}

section#header-ranking h2 span.color{
text-shadow: 1px 1px 0 #fff;
}

section#header-ranking h2 span.pharma:before,section#header-ranking h2 span.drugstore:before,section#header-ranking h2 span.hospital:before,section#header-ranking h2 span.company:before{
    width: 18px;
    height: 18px;
    background-size: contain;
    vertical-align: -2px;
    margin: 0 5px 0 0;
}

section#header-ranking h2:before{
bottom: -32px;
left: 40px;
margin-left: -16px;
border: 16px solid transparent;
border-top: 16px solid #f2f6f9;
}

section#header-ranking h2:after{
bottom: -34px;
left: 40px;
margin-left: -17px;
border: 17px solid transparent;
border-top: 17px solid #159F80;
}

section#header-ranking ul.wrap{
margin: 0 0 20px;
}

section#header-ranking ul.wrap:last-child{
}

section#header-ranking ul.wrap li a{
padding: 10px;
}

section#header-ranking ul.wrap li a:after{
background: url(../images/ph_header-ranking_link-button02-sp.png);
background-repeat: none;
background-size: contain;
width: 25px;
height: 32px;
right: -8px;
}

section#header-ranking ul.wrap li img.logo{
width: 90px;
height: 25px;
margin: 0 10px 0 0;
}

section#header-ranking ul.wrap .spec{
}

section#header-ranking ul.wrap li .row01{
font-size: 10px;
padding: 0 0 5px;
border-bottom: dotted 1px #ccc;
}


section#header-ranking ul.wrap li .row01 .rank{
margin: 0 10px 0 0;
}

section#header-ranking ul.wrap li .row01 .rank.rank02{
}

section#header-ranking ul.wrap li .row01 .rank.rank03{
}

section#header-ranking ul.wrap li .row01 .rank:before{
font-size: 8px;
vertical-align: 0px;
}

section#header-ranking ul.wrap li .row02{
font-size: 12px;
}

section#header-ranking ul.wrap li .row02 .label{
font-size: 9px;
}

section#header-ranking ul.wrap li .row02 .value{
margin: 0 5px 0 0;
}

section#header-ranking ul.wrap li .row02 .value:last-child{
}

section#header-ranking ul.wrap li .row02 sup{
font-size: 5px;
}

section#header-ranking a.category-link{
font-size: 12px;
}

section#header-ranking a.category-link i{
}

section#header-ranking p.addition{
color: #888;
font-size: 10px;
right:0px;
bottom: 0px;
}


section#situation{
padding: 0 10px;
margin: 0 0 0px;

}

section#situation .situation-header{
margin: 0 0 10px;
align-items: center;
}

section#situation .situation-header img{
margin: 0 10px 0 0;
width: 100px;
}

section#situation .situation-header .right{
width: 100%;
}

section#situation .situation-header h2{
font-size: 24px;
}

section#situation .situation-header .subtitle{
font-size: 14px;
padding: 5px 10px;
margin: 0 0 5px;
}


.grad-btn {
  z-index: 2;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100px;
    margin: auto;
    padding: 5px 0;
    border-radius: 4px;
    background: #009e8f;
    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;
	font-size: 12px;
}

p.situation-description{
  position: relative;
  overflow: hidden;
  height: 100px;
  font-size: 14px;
}

p.situation-description::before {
  height: 100px;
}

#contents #category-menu{
margin: 0 0 40px;
}

#contents #category-menu .row{
padding: 0px 10px;
margin: 0 0 10px;
}

#contents #category-menu a.category-item:nth-child(odd){
margin: 0 5px 0 0;
}

#contents #category-menu a.category-item:nth-child(even){
margin: 0 0 0 5px;
}

#contents #category-menu a.category-item{
padding: 10px 25px 10px 10px;
font-size: 14px;
}

#contents #category-menu a.category-item:after{
font-size: 18px;
top: 30%;
right: 5px;
}


#contents #category-menu a.category-item span.color{
font-size: 18px;
text-shadow: 2px 2px 0 #fff;
}

#column .inner{
width: 100%;
padding: 0 10px 0px;
}

#column .inner.main-column{
padding: 0 10px 20px;
}

section.col01{
    padding: 10px 0px;
    margin: 0 0 40px;
    border-radius: 10px;
    background: #fff;
	font-size: 16px;
}

p.p-col01{
padding: 0 10px 10px;
font-size: 16px;
}

h2.h2-col01{
    font-size: 18px;
    padding: 10px;
    margin: 20px 0 15px;
}

h2.h2-col01:after{
    bottom: -10px;
    border-width: 10px 8px 0 8px;
}

img.img-col01{
    margin: 0 20px 20px;
    border-radius: 20px;
}

ul.ul-col01-01{
width: calc(100vw - 40px);
margin: 0 auto 15px;
padding: 10px 10px 10px 30px;

}

ul.ul-col01-01 h3{
margin: 0 0 5px -20px;
font-size: 16px;
}

ul.ul-col01-01 li{
margin: 0 0 10px;
}

ul.ul-col01-02{
width: calc(100vw - 40px);
margin: 0 auto 10px;
padding: 10px;
}

ul.ul-col01-02 li{
font-weight: bold;
}

ul.ul-col01-02 h3{
font-size: 16px;
margin: 0 0 10px;
}

ul.ul-col01-03{
width: calc(100vw - 40px);
margin: 0 auto 10px;
padding: 10px 10px 10px 36px;
}

ul.ul-col01-03 li{

}

ul.ul-col01-03 li:before{
  font-size: 18px;
  left: -24px;
  top: -3px;
}

h3.h3-ul-col01-03{
    margin: 0px auto 15px;
    font-size: 16px;
    background-color: #ff6600;
    color: #fff;
    padding: 12px 10px;
}

h3.h3-ul-col01-03:after{
    bottom: -12px;
    border-width: 12px 8px 0 8px;
}

#fv_col01{
width: 100%;
margin: 10px 0 ;
}

#contents #search02.search02-fresher{
margin: 0px 0 0px;;
}

h2.h2-col01-02{
    margin: 0px auto 15px;
    font-size: 18px;
    padding: 10px 10px;
}

h2.h2-col01-02:after{
    bottom: -12px;
    border-width: 12px 8px 0 8px;
}

.recommend-col01{
width: calc(100vw - 40px);
margin: 0 auto;
box-shadow: 0px 2px 4px rgb(0 0 0 / 30%);
padding: 10px 10px 14px;
border-radius: 10px;
}

.recommend-col01 h3{
font-size: 16px;
margin: 0 0 10px;
}

.recommend-col01 a.banner{
margin: 0 10px 0 0;
}

.recommend-col01 a.banner img{
width: 125px;
}

.recommend-col01 ul.description{
padding: 0 0 0 18px;
}

.recommend-col01 ul.description li{
margin: 0 0 10px;
font-size: 12px;
}

.recommend-col01 ul.description li:before{
  font-size: 14px;
  position: absolute;
  left: -18px;
  top: -2px;
}

.recommend-col01 .wrap{
display: flex;
margin: 0 0 5px;
}

.recommend-col01 a.cvbutton{
padding: 10px 25px 10px 10px;
font-size: 18px;
box-shadow: 0 4px 0 #B64800;
}

.recommend-col01 a.cvbutton:after{
  font-family: "Font Awesome 5 Free";
  content: "\f054";/
  font-weight: 900;
  position: absolute;
  right: 5px;
     top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
  
}

img.col01-image{
width: calc(100vw - 40px);
margin: 0 auto 10px;
}

a.cvbutton-col01{
    padding: 10px 10px;
	margin: 0 auto 15px;
    font-size: 17px;
    background: #ff6600;
    text-decoration: none;
    font-weight: bold;
    color: #fff;
    border-radius: 10px;
    box-shadow: 0 5px 0 #B64800;
    line-height: 1.35;
    position: relative;
	text-align: center;
}

a.cvbutton-col01 span.small{
font-size: 14px;
}

h4.h4-cvbutton-col01{
margin: 0 0 5px;
font-size: 14px;
}

h2.h2-column-annotation{
font-size: 13px;
padding: 0 5px;
	top: -7px;
	color: #149A7C;
}

h2.h2-column-annotation i:first-child{
margin: 0 5px 0 0;
}

h2.h2-column-annotation i:last-child{
margin: 0 0 0 5px;
}

.column-annotation{
position: relative;
padding: 14px 10px 10px;
margin: 5px 0 10px;
border: solid 1px #149A7C;
}

p.p-column-annotation{
font-size: 13px;
}

.pc{
display: none;
}

}