@charset "utf-8";
/* CSS Document */

#bg{
    background-color: #ffe22f;
}

#wrap{
    width: 900px;
    margin: auto;
    background-color: white;
    padding: 0 30px;
    overflow: hidden;
    box-shadow: 0px 0px 16px -6px rgba(0,0,0,0.5);
}

@media screen and (max-width:480px) {
    #wrap{
    width: 370px;
    margin: auto;
    background-color: white;
    overflow: hidden;
    padding: 0 10px;
}
}

/*========= デザイン全体のためのCSS ===============*/

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    list-style: none;
    vertical-align: text-top;
    background: transparent;
}

/*========= ナビゲーションのためのCSS ===============*/

#g-nav{
    /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
    position:fixed;
    z-index: 999;
    /*ナビのスタート位置と形状*/
  top:-120%;
    left:0;
  width:100%;
    height: 100vh;/*ナビの高さ*/
  background:#999;
    /*動き*/
  transition: all 0.6s;
}

/*アクティブクラスがついたら位置を0に*/
#g-nav.panelactive{
    top: 0;
}

/*ナビゲーションの縦スクロール*/
#g-nav.panelactive #g-nav-list{
    /*ナビの数が増えた場合縦スクロール*/
    position: fixed;
    z-index: 999; 
    width: 100%;
    height: 100vh;/*表示する高さ*/
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

/*ナビゲーション*/
#g-nav ul {
    /*ナビゲーション天地中央揃え*/
    position: absolute;
    z-index: 999;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
}

/*リストのレイアウト設定*/

#g-nav li{
  list-style: none;
    text-align: center; 
}

#g-nav li a{
  color: #333;
  text-decoration: none;
  padding:10px;
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: bold;
}

/*========= ボタンのためのCSS ===============*/
.openbtn1{
  position:fixed;
    z-index: 9999;/*ボタンを最前面に*/
  top:10px;
  right: 10px;
  cursor: pointer;
    width: 50px;
    height:50px;
}
  
/*×に変化*/  
.openbtn1 span{
    display: inline-block;
    transition: all .4s;
    position: absolute;
    left: 14px;
    height: 3px;
    border-radius: 2px;
  background-color: #666;
    width: 45%;
  }

.openbtn1 span:nth-of-type(1) {
  top:15px; 
}

.openbtn1 span:nth-of-type(2) {
  top:23px;
}

.openbtn1 span:nth-of-type(3) {
  top:31px;
}

.openbtn1.active span:nth-of-type(1) {
    top: 18px;
    left: 18px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}

.openbtn1.active span:nth-of-type(2) {
  opacity: 0;
}

.openbtn1.active span:nth-of-type(3){
    top: 30px;
    left: 18px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}



/*========= レイアウトのためのCSS ===============*/

/*強調*/
strong_p {
	font-weight: bold;
	/*color: #ee0000;*/
	/*color: #ff3d0a;*/
	/*background-color: #ff6;*/
    color: deeppink;
	background: linear-gradient(transparent 40%,#fef49b 40%);
}

red {
    font-weight: bold;
    color: red;
    font-size: 120%;
}

back_yellow {
    background: linear-gradient(transparent 40%,#fef49b 40%);
    
}

back_yellow2 {
    background: linear-gradient(transparent 40%,#fef49b 40%);
    font-size: 120%;
}

pink01 {
    font-weight: 700;
    color: #f3982d;
    font-size: 120%;
}

pink02 {
    font-weight: 700;
    color: #f3982d;
    font-size: 100%;
}

strong_r {
	font-weight: bold;
	/*color: #ee0000;*/
	/*color: #ff3d0a;*/
	/*background-color: #ff6;*/
    color: #ff491c;
	background: linear-gradient(transparent 40%,#fef49b 40%);
}

strong_p_b {
	font-weight: bold;
	/*color: #ee0000;*/
	/*color: #ff3d0a;*/
	/*background-color: #ff6;*/
    color: deeppink;
	background: linear-gradient(transparent 40%,#fef49b 40%);
    font-size: 120%;
}



h1{
  font-size:1.2rem;
}

small{
  color:#fff;
  display: block;
  text-align: center;
}

#header{
}

section{
  padding:100px 30px;
}

section:nth-child(2n){
  background:#f3f3f3; 
}

#footer{
  background:#333;
  padding:20px;
}

.logo{
  margin: 20px 0 20px;
  width: 50%;
}

@media screen and (max-width:480px) {
    .logo{
  margin:10px 0;
  width: 70%;
}
}

/*========= ヘッダー =========*/

/*==
.hero_area{
    padding: 10px 0;
    background-color: #ffe22f;
    margin-right: calc(100% - 100vw);
    margin-left: calc(100% - 100vw);
}

.hero{
    width: 60%;
    margin: 10px auto;
    padding: 10px;
    display: block;
}

@media screen and (max-width:480px) {
    .hero{
    margin-right: calc(50% - 65vw);
    margin-left: calc(50% - 65vw);
    }
}

.hero img{
  margin: 10px auto;
  display: block;
}
==*/

.fv_comment {
    display: flex;
    background-color: #f3982d;
    height: 50px;
    text-align: center;
    vertical-align: middle;
    }

.fv_comment_font {
    color: white;
    margin: auto;
    font-weight: 400;
    font-size: 1.9em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

@media screen and (max-width:480px) {
    .fv_comment {
    display: flex;
    background-color: #f3982d;
    height: 30px;
    text-align: center;
    vertical-align: middle;
    }

.fv_comment_font {
    color: white;
    margin: auto;
    font-weight: 700;
    font-size: 0.8em;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
}


/*=========　転職動向　=========*/

.trend {
    box-sizing: border-box;
    border: solid 2px #D6524B;
    align-items: center;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 15px;
    width: 90%;
    padding: 0px;
}

.trend_title {
    background-color: #D6524B;
    color: white;
    text-align: center;
    font-weight: bolder;
    padding: 5px;
    margin: 0px;
}

.trend_comment {
    padding: 20px;
    font-weight: bolder;
    margin: 0;
    font-size: 1.1em;
}

@media screen and (max-width:480px) { 
    .trend {
        box-sizing: border-box;    
        border: solid 2px #D6524B;  
        font-size: 0.8em;
        align-items: center;
        margin: auto;
        margin-top: 10px;
        margin-bottom: 15px;
        width: 90%;
        padding: 0px;
}
    
    .trend_comment {
    padding: 10px;
    font-weight: bolder;
    margin: 0;
    font-size: 0.9em;
}
}

/*========= 詳細ページ =========*/

.detail_page {
    font-size: 1.0em ;
    margin: auto;
    padding: 0px;
    color: white;
    font-weight: bolder;
}

@media screen and (max-width:480px) {
    .detail_page {
    font-size: 0.7em ;
    margin: auto;
    padding: 0px;
    color: white;
    font-weight: bolder;
}
}

/*========= 運営者情報 =========*/

.company_title02 {
    background-color: #f3982d;
    font-size: 1.5em;
    font-weight: bolder;
    color: white;
    width: 100%;
    margin-top: 10px;
}

/*========= ランキング根拠 =========*/

#evidence_body {
    align-items: center;
    justify-content: center;
    background-color: #FFE6E6;
    text-align: center;
    max-width: 890px;
    margin: auto ;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 20px;
    margin-left: 20px;
}

.evidence_title {
    background-color: #f3982d;
    font-size: 1.5em;
    font-weight: bolder;
    color: white;
    width: 100%;
}

.evidence_table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    margin-bottom: 20px;
}

.evidence_th {
    background-color: #f3982d;
    font-size: 1.2em;
    width: 20%;
}

.evidence_td {
    font-size: 1.2em;
}

.evidence_box {
    width: 100%;
    background-color: white;
    text-align: left;
}

.evidence_text {
    margin: auto;
    padding: 10px;
}


/*========= プラポリ =========*/

#privacy_body {
    align-items: center;
    justify-content: center;
    background-color: #FFE6E6;
    text-align: center;
    max-width: 890px;
    margin: auto ;
    padding-bottom: 5px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 20px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 20px;
    margin-left: 20px;
}

.privacy_title {
    width: 100%;
    height: auto;
    font-size: 1.5em;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
    margin-top: 20px;
    margin-bottom: 20px;
}

.privacy_first {
    width: 100%;
    height: auto;
    font-size: 1.0em;
    font-weight: 100;
    text-align: left;
    vertical-align: middle;
    padding-right: 10px;
    margin: 20px;
}

.privacy_main {
    width: 100%;
    height: auto;
    font-size: 1.0em;
    font-weight: 100;
    text-align: left;
    vertical-align: middle;
    padding-right: 10px;
    margin-top: 20px;

}

/*========= 来訪者 =========*/

.realtime_box {
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    text-align: center;
    max-width: 890px;
    padding: 0 5px;
    margin: 20px 0;
    border-radius: 10px;
}

.realtime_box{
  animation: flash 2.5s linear infinite;
}

@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}


.realtime_box_rank {
    align-items: center;
    justify-content: center;
    background-color: white;
    text-align: center;
    max-width: 890px;
    padding: 5px;
    margin-bottom: 0px;
    margin-top: 0px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 10px;
}

.realtime_text {
    width: 100%;
    height: auto;
    font-size: 1.8em;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
}

.realtime_text_rank {
    width: 100%;
    height: auto;
    font-size: 1.0em;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
}

/* 点滅 */
strong_b {
	font-weight: bold;
    font-size: 3vmin;
	/*color: #ee0000;*/
	/*color: #ff3d0a;*/
	/*background-color: #ff6;*/
    color: red;
	background: linear-gradient(transparent 40%,#fef49b 40%);
    animation: blinking 1s ease-in-out infinite alternate;
}

@media screen and (max-width:480px) {
    .realtime_box {
        display: flex;
        vertical-align: middle;
        text-align: center;
        max-width: 890px;
}
    
.realtime_box_rank {
    align-items: center;
    justify-content: center;
    background-color: white;
    text-align: center;
    max-width: 890px;
    padding: 5px;
    margin-bottom: 0px;
    margin-top: 10px;
    margin-right: 20px;
    margin-left: 20px;
    border-radius: 10px;
}

.realtime_text {
    width: 100%;
    height: auto;
    font-size: 0.8em;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
}

.realtime_text_rank {
    width: 100%;
    height: auto;
    font-size: 0.7em;
    font-weight: bolder;
    text-align: center;
    vertical-align: middle;
    padding-right: 10px;
}
    
/* 点滅 */
strong_b {
	font-weight: bold;
    font-size: 4vmin;
	/*color: #ee0000;*/
	/*color: #ff3d0a;*/
	/*background-color: #ff6;*/
    color: red;
	background: linear-gradient(transparent 40%,#fef49b 40%);
    animation: blinking 1s ease-in-out infinite alternate;
}
}

/*========= 転職ポイント =========*/

.title_illust01 {
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:150px;
    height: 130px;
    position: relative;
    bottom: -0px;
    left: 12px;
}

.title_illust01_nagasaku {
    background-image: url(../img/asset/illust_001.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:150px;
    height: 130px;
    position: relative;
    bottom: -0px;
    left: 12px;
}

.title_illust02 {
    background-image: url(../img/asset/illust_002.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:150px;
    height: 130px;
    position: relative;
    bottom: -0px;
    left: 0px;
}

.title_illust02_nagasaku {
    background-image: url(../img/asset/nagasaku_parts002.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:150px;
    height: 130px;
    position: relative;
    bottom: -0px;
    left: 0px;
}

.title_illust03 {
    background-image: url(../img/asset/change_point_illust04.webp);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:150px;
    height: 130px;
    position: relative;
    bottom: -0px;
    left: 0px;
}

.title_illust03_nagasaku {
    background-image: url(../img/asset/illust_002.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:150px;
    height: 130px;
    position: relative;
    bottom: -0px;
    left: 5px;
}

.title_board {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    border: 4px solid #f3982d;
    border-radius: 20px;
    vertical-align: middle;
    margin-top: 50px;
    margin-bottom: 20px;
}

.title_text {
    font-size: 2em;
    text-align: left;
    vertical-align: middle;
    font-weight: 700;
    margin-left: 30px;
}

.title_text01 {
        font-size: 3.3em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        line-height: 55px;
        margin-left: 10px;
        margin-right: 10px;
        color: #f3982d;
}
    .title_text02 {
    
        font-size: 5.0em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        background-color: #f3982d;
        color: white;
        border-radius: 5px;
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 0px;
        padding-bottom: 0px;
}

.title_text03 {
    
        font-size: 2.5em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        color: black;
}

.title_text04 {
        font-size: 4.0em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        background-color: #f3982d;
        color: white;
        border-radius: 5px;
        padding-right: 20px;
        padding-left: 20px;
        padding-top: 0px;
        padding-bottom: 0px;
}

.title_text05 {
        font-size: 2.4em;   
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        line-height: 55px;
        margin-left: 25px;
        margin-right: 20px;
        color: #f3982d;
}

@media screen and (max-width:480px) {
    .title_illust01 {
    background-image: url(../img/asset/change_point_illust05.webp);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:60px;
    height: 60px;
    position: relative;
    bottom: -0px;
    left: 5px;
}
    
    .title_illust01_nagasaku {
    background-image: url(../img/asset/illust_001.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:60px;
    height: 60px;
    position: relative;
    bottom: -0px;
    left: 5px;
}
    
    .title_illust02 {
    background-image: url(../img/asset/illust_002.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:60px;
    height: 60px;
    position: relative;
    bottom: -0px;
    left: 5px;
}
    
    .title_illust02_nagasaku {
    background-image: url(../img/asset/illust_001.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:60px;
    height: 60px;
    position: relative;
    bottom: -0px;
    left: 5px;
}
    
    .title_illust03 {
    background-image: url(../img/asset/change_point_illust05.webp);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:60px;
    height: 60px;
    position: relative;
    bottom: -0px;
    left: 5px;
}
    
    .title_illust03_nagasaku {
    background-image: url(../img/asset/illust_002.png);
    background-size: 100% ;
    background-repeat: no-repeat;
    width:60px;
    height: 60px;
    position: relative;
    bottom: -0px;
    left: 5px;
}

.title_board {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    box-sizing: border-box;
    border: 2px solid #f3982d;
    border-radius: 15px;
    vertical-align: middle;
    margin-top: 40px;    
    margin-bottom: 20px;
}

.title_text {
    font-size: 0.8em;
    text-align: left;
    vertical-align: middle;
    font-weight: 700;
}
    
    .title_text01 {
    
        font-size: 1.3em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        line-height: 21px;
        margin-left: 10px;
        margin-right: 5px;
        color: #f3982d;
}
    .title_text02 {
    
        font-size: 2.0em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        background-color: #f3982d;
        color: white;
        border-radius: 5px;
        padding-right: 5px;
        padding-left: 5px;
}
    .title_text03 {
    
        font-size: 1.0em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        color: black;
}


    .title_text04 {
        font-size: 1.2em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        background-color: #f3982d;
        color: white;
        border-radius: 5px;
        padding-right: 10px;
        padding-left: 10px;
        padding-top: 0px;
        padding-bottom: 0px;
}


    .title_text05 {
        font-size: 1.2em;    
        text-align: left;
        vertical-align: middle;
        font-weight: 700;
        line-height: 25px;
        margin-left: 10px;
        margin-right: 5px;
        color: #f3982d;
}
}

.change_board{
    background-image: url(../img/asset/change_point.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 100%;
    height: 140px;
    position: relative;
    top: 0;
    left:5px;
    top: 0px;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: -18px;
}

@media screen and (max-width:480px) {
    .change_board{
    background-image: url(../img/asset/change_point.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 100%;
    height: 60px;
    position: relative;
    top: 0;
    left: 0px;
    overflow: hidden;
    margin-top: 5px;
    margin-bottom: 0px;
}

}

.change_box02 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

@media screen and (max-width:480px) {
    .change_box02 {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 0px;
}
}

.table_change {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 95%;
    margin-bottom: 5px;
}

.th_change {
    vertical-align: middle;
    font-size: 1.2em;
    margin: auto;
}

.td_change {
    padding: 5px;
    text-align: center;
    font-size: 1.2em;
    font-weight: bolder;
    vertical-align: middle;
}

.change_span {
    font-size: 1.4em;
    vertical-align: baseline;
    padding-right: 3px;
    color: #ff491c;
    background: linear-gradient(transparent 40%,#fef49b 40%);
}

@media screen and (max-width:480px) {

.table_change {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 95%;
    margin-bottom: 5px;
}

.th_change {
    vertical-align: middle;
    font-size: 0.1em;
    width: 10%;
}

.td_change {
    padding: 5px;
    text-align: left;
    font-size: 0.8em;
    font-weight: bolder;
}
}

.change_box {
    padding: 0.5em 0.5em 0.0em 0.5em;
    margin: 1em 1em;
    color: black;
    background-color: white;
    box-shadow: 0px 0px 0px 5px #FF99AF;
    border-left: dashed 2px #ffc3c3;
    border-right: dashed 2px #ffc3c3;
    border-bottom: dashed 2px #ffc3c3; 
    border-radius: 8px;
    font-weight: bold;
    width: auto;
    height: auto;
    display:flex;
    flex-flow: column;
    justify-content:space-between;
}

.change_box .change_point {
    width: 100%;
    height: 200px;
    margin: auto;
}


.change_point01 {
    text-align: left;
}


p.p_style019 {
    margin: auto;
}

.change_point_title {
    text-align: center;
    font-size:30px;
    font-weight: bolder;
    color: white;
    margin: auto;
}

.change_title_line {
  height: 8px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="hsla(0, 0%, 65%, 1.0)"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"/><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"/></svg>');
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3px" height="3px" viewBox="0 0 3 3" fill="hsla(0, 0%, 65%, 1.0)"><polygon points="0,0.5 0,1.5 1.5,3 2.5,3"/><polygon points="2.5,0 1.5,0 3,1.5 3,0.5"/></svg>');
  background-size: 3px 3px;
  width: 80%;
    position: relative;
    bottom: 0px;
    left: 90px;
}

hr.style2{
	border-top: 3px double #FF99AF;
    
}

.change_point {
    width: 700px;
    height: 200px;
    margin: 5px auto;
}


/*ピックアップ求人
-------------------------------------------------*/

.pickup_main_title {
    background-color: #53AD5C;
    font-size: 1.5em;
    width: 100%;
    margin-top: 20px;
    text-align: center;
    font-weight: 700;
    color: white;
}

.pickup {
    box-sizing: border-box;
    display: flex;
    width: 100%;
    height: auto;
    background-color: white;
    padding-top: 10px;
    padding-bottom: 10px;
    overflow-x: scroll;
    
}

.pickup_box {
    box-sizing: border-box;
    border: 1px solid black;
    width: 30%;
    height: auto;
    padding: 10px;
    margin: auto;
    margin-left: 10px;
    flex-shrink: 0;
}

.pickup_title {
    background-color:#53AD5C;
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 0.8em;
}

.pickup_detail {
    
    font-weight: 700;
    width: 100%;
}

.pickup_logo {
    width:100%;
    display: flex;
    align-items: center;
}

.pickup_logo_img {
    background: url(../img/parts/logo.png) no-repeat left;
    background-size: 100%;
    width: 50%;
    height: 20px;
    margin: auto;
    
}

.pickup_logo_roo {
    background: url(../img/logo/kango-roo.webp) no-repeat left;
    background-size: 100%;
    width: 40%;
    height: 45px;
    margin: auto;
    
}

.pickup_logo_img02 {
    background: url(../img/parts/kaigo-job-logo.png) no-repeat left;
    background-size: 100%;
    width: 40%;
    height: 45px;
    margin: auto;
    
}

.pickup_logo_img03 {
    background: url(../img/parts/kaigo-job-logo.png) no-repeat left;
    background-size: 100%;
    width: 40%;
    height: 45px;
    margin: auto;
    
}

.pickup_logo_img04 {
    background: url(../img/parts/kaigo-job-logo.png) no-repeat left;
    background-size: 100%;
    width: 40%;
    height: 45px;
    margin: auto;
    
}




.button11 {
	display: block;
	position: relative;
	background-color: #ed2f2f;
	border-radius: 4px;	
	color: #fff;
	line-height: 11px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #bbb;/*0e8c73*/
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	padding: 5px 5px;
	overflow: hidden;
	width: 90%;
	margin: auto;
}

.button_text5 {
 
    color:white;
    font-size: 1.0em;
    text-align: center;
    font-weight: 700;
    margin: auto;
    padding: 0px;

}

.table_pickup {
    width: 100%;
    padding: 0px;
    margin: auto;
}

.th_pickup {

    width: 30%;    
    font-size: 0.7em;
}
    
    
.td_pickup {
        
    width: 100%;
    font-size: 0.7em;
    padding: 5px;    
    margin: 0px;
    
    }

.pickup_scroll {
    text-align: center;
    font-weight: 700;
    background-color: white;
}

@media screen and (max-width: 480px) {
    
    .pickup_box {
    box-sizing: border-box;
    border: 1px solid black;
    width: 60%;
    height: auto;
    padding: 10px;
    margin: auto;
    margin-right: 10px;
    flex-shrink: 0;
}

.pickup_title {
    background-color:#53AD5C;
    color: white;
    text-align: center;
    font-weight: 700;
    font-size: 0.8em;
}

.pickup_detail {
    font-weight: 700;
}

.pickup_logo {
    width:100%;
    display: flex;
}

    
}


.button11 {
	display: block;
	position: relative;
	background-color: #ed2f2f;
	border-radius: 4px;	
	color: #fff;
	line-height: 11px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #bbb;/*0e8c73*/
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	padding: 5px 5px;
	overflow: hidden;
	width: 90%;
	margin: auto;
}


    
    


/*========= 転職エージェント===========*/

#select_point {
    padding: 0.2em 0.5em;
    margin: 2em 1em;
    color: #565656;
    background: #ffeaea;
    box-shadow: 0px 0px 0px 10px #ffeaea;
    border-left: dashed 2px #ffc3c3;
    border-right: dashed 2px #ffc3c3;
    border-bottom: dashed 2px #ffc3c3;    
    border-radius: 8px;
    font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    font-weight: bold;
    width: auto;
    height: 700px;
    display: flex;
}
.select_point p {
    margin: 0; 
    padding: 0;
}

.select_point01 {
    width: 250px;
    height: 650px;
    background-color: white;
    border-radius: 30px;
    margin: auto;
}

@media screen and (max-width:480px) {
    .select_point01 {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    margin: auto;
}
}

.select_point02 {
    width: 250px;
    height: 650px;
    background-color: white;
    border-radius: 30px;
    margin: auto;
}

@media screen and (max-width:480px) {
    .select_point02 {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    margin: auto;
}
}

.select_point03 {
    width: 250px;
    height: 650px;
    background-color: white;
    border-radius: 30px;
    margin: auto;
}

@media screen and (max-width:480px) {
    .select_point03 {
    width: 100%;
    height: auto;
    background-color: white;
    border-radius: 10px;
    margin: auto;
}
}

.select_point01_illust {
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
    position: relative;
    bottom: -10px;
    left: 30px;
}

.select_point02_illust {
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
    position: relative;
    bottom: -40px;
    left: 30px;
}

.select_point03_illust {
    background-image: url(../img/asset/change_point_illust05.webp);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
    position: relative;
    bottom: -60px;
    left: 30px;
}

@media screen and (max-width:480px) {
    .select_point03_illust {
    display: none;
    background-image: url(../img/asset/change_point_illust05.webp);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    width: 600px;
    height: 600px;
    position: relative;
    bottom: -60px;
    left: 30px;
}
}
    

.select_point_title {
    font-size: 15px;
    font-weight: bolder;
    padding: 5px 5px;
}

@media screen and (max-width:480px) {
    p.select_point_title {
    font-size: 0.7em;
    font-weight: bolder;
    padding: 0px 0px;
}
}
    
.select_point_text {
    font-size: 15px;
    font-weight: bolder;
    padding: 10px;
}

@media screen and (max-width:480px) {
    .select_point_text {
    font-size: 0.8em;
    font-weight: bolder;
    padding: 10px;
}
}

.select_point_under {
border-bottom: solid 3px #FFDDFF;
}

hr.style1{
	border-top: 1px solid #8c8b8b;
}

/*========作り直し比較表=========*/


/*========= 吹き出し ===============*/

.balloon4 {
  position: relative;
  display: inline-block;
  margin-top: 10px;
    margin-bottom: 0px;
  padding-top: 7px;
        padding-bottom: 7px;
        padding-right: 10px;
        padding-left: 10px;
  width: 97%;
  color: #555;
  font-size: 16px;
  background: #e0edff;
}

.balloon4:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 290px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon4:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -10px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}


.balloon4 p {
  margin: 0;
  padding: 10px;
    text-align: center;
    font-weight: bolder;
}

@media screen and (max-width: 480px) {
    
    .balloon4 {
        position: relative;
        display: inline-block;
        margin-top: 10px;
        margin-bottom: 7px;
        margin-right: 5px;
        margin-left: 5px;
        padding-top: 7px;
        padding-bottom: 7px;
        padding-right: 10px;
        padding-left: 10px;
        text-align: left;
  width: 95%;
  color: #555;
  font-size: 13px;
  background: #e0edff;
}

.balloon4:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: 110px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}

.balloon4:after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -20px;
  border: 15px solid transparent;
  border-top: 15px solid #e0edff;
}


.balloon4 p {
  margin: 0;
  padding: 5px;
    text-align: left;
    font-weight: bolder;
}
}

/*========= 比較表のタブ ===============*/

.tab-wrap {
  display: flex;
  flex-wrap: wrap;
    margin-top: 30px;
    margin-bottom: 0px;
}
.tab-wrap:after {
  content: '';
  width: 100%;
  height: 10px;
  background: #f3982d;
  display: block;
  order: -1;
}
.tab-label {
  color: White;
  background: Gray;
  font-weight: bold;
  white-space: nowrap;
  text-align: center;
  padding: 10px .5em;
  order: -1;
  position: relative;
  z-index: 1;
  cursor: pointer;
  border-radius: 10px 10px 0 0;
  flex: 1;
}
.tab-label:not(:last-of-type) {
  margin-right: 5px;
}
.tab-content {
  width: 100%;
  height: 0;
  overflow: hidden;
  opacity: 0;
}
.tab-switch:checked+.tab-label {
  background:   #f3982d;
}
.tab-switch:checked+.tab-label+.tab-content {
  height: auto;
  overflow: auto;
  padding: 15px;
  opacity: 1;
  transition: .5s opacity;
  border: 2px solid #f3982c;
  box-sizing: border-box;
  border-radius: 0 0 15px 15px;
}
.tab-switch {
  display: none;
}

/*===ナースガーデン用テーブル==========*/

.table_garden {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
    margin-bottom: 30px;
    margin-top: 0px;
}

.th_garden {
    background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
    color: aliceblue;
}

@media screen and (max-width: 480px) {
    .th_garden {
    background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 0.7em;
	padding: 1px 1px 1px 1px;
}
}

.th_garden_special {
    font-size: 1em;
    background-color: #f3982d;
    color: white;
}

.hikaku_rank_garden {
    background-color: #f3982d;
    font-size: 1.2em;
    vertical-align: middle;
    background-image: url(../img/asset/icon_001.png);
    background-repeat: no-repeat	; 
    background-size: 50%;
    background-position: 50% 30%;
}

@media screen and (max-width: 479px) {
    .hikaku_rank_garden {
        font-size: 1em;
        vertical-align: middle;
    background-image: url(../img/asset/icon_001.png);

    }
    }

/*========= テーブル ===============*/


table {
    border-collapse: separate;
    border-spacing: 1px;
}

table.table_main {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
}


th {
	background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
    color: aliceblue;
}

@media screen and (max-width: 767px) {
th {
	background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
}
.thtd_sp_hidden {
	display: none;
}
}

@media screen and (max-width: 479px) {
th {
	background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
}
}

.hikaku_rank {
    font-size: 1.2em;
    vertical-align: middle;
}


    
@media screen and (max-width: 479px) {
    .hikaku_rank {
    font-size: 1em;
    vertical-align: middle;
}
}

.garden_name {
    font-size: 1em;
}

.garden_special {
    font-size:1.2em;
    background-color: #30A142;

}

.th_hikaku {
	background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
    color: aliceblue;
}

@media screen and (max-width: 767px) {
.th_hikaku {
	background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
}
}

@media screen and (max-width: 480px) {
.th_hikaku {
	background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 0.7em;
	padding: 1px 1px 1px 1px;
}
}

.th_hikaku2 {
	background-color: white;
	align-items: center;
    display: flex;
    justify-content: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
    width: 100%;
    height: 100%;
}



@media screen and (max-width: 767px) {
.th_hikaku2 {
	background-color: white;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
    width: auto;
}
}

@media screen and (max-width: 479px) {
.th_hikaku2 {
	background-color: white;
	text-align: center;
	font-size: 14px;
	padding: 2px 2px 2px 2px;
    width: auto;
}
}

.table_button{
    background-color: aliceblue;
    
}

.table_text {
    background-color: #FF99AF;
    width: 100%;
    
}

/*========= tr ===============*/

tr.tr_text {
  margin: 0;  
}

/*========= td ===============*/

td {
    background-color: white;
	border: 1px solid #cccccc;
	text-align: center;
	font-size: 14px;
	padding: auto;
    border-radius: 5px;
}

td.td_main {
    margin: 0;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-right: 0px;
    padding-left: 0px;
    vertical-align: middle;
}

td.td_sub {
    padding: 5px;
    vertical-align: middle;
}

td.td_sub2 {
    padding: 5px;
    font-size: 14px;
    text-align: left;
    font-weight: bolder;
    vertical-align: middle;
}

td.td_sub3 {
    padding: 5px;
    font-size: 14px;
    align-items: center;
    text-align: center;
    font-weight: bolder;
    vertical-align: middle;
}

.sub3_in {
    display: inline-block;
    margin: auto;
    padding: 0px;
    text-align: left;
    width: auto;
        
}

.sub3_tag {    
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #f3982d;
    font-size: 1.2em;
    font-weight: bolder;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

.sub4_tag {    
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #0F9124;
    font-size: 1.2em;
    font-weight: bolder;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

.area_img {
    width: 80%;
}

td.td_sub4 {
    padding: 5px;
    font-size: 14px;
    text-align: left;
    font-weight: bolder;
    vertical-align: middle;
}

span.check {
    color: red;
}

.td_text,.td_text2,.td_text3  {
    font-size: 17px;
    font-weight: bolder;
    background-color: white;
    border-color: #cccccc;
    padding: 5px;
    color: #1D090D;
    vertical-align: middle;
}

.td_text4 {
    font-size: 13px;
    font-weight: bolder;
    background-color: white;
    border-color: #cccccc;
    padding: 5px;
    color: #1D090D;
    vertical-align: middle;
}

.td_text2_time {
    font-size: 1px;
    font-weight: none;
    background-color: white;
    padding: 0px;
    color: #1D090D;
    vertical-align: middle;
    border-color: #cccccc;
    text-align: right;
}

.td_logo {
    font-size: 15px;
    line-height: normal;
}


@media screen and (max-width: 480px) {
    td.td_main {
    margin: 0;
    padding-top: 10px;
        padding-bottom: 10px;
        padding-right: 0px;
        padding-left: 0px;
    vertical-align: middle;
}
    
.td_text2 ,.td_text3 {
    font-size: 0.5em;
    font-weight: bolder;
    background-color: white;
    border-color: #cccccc;
    padding: 5px;
    color: #1D090D;
        vertical-align: middle;
}
    .td_text {
    font-size: 0.7em;
    font-weight: bolder;
    background-color: white;
    border-color: #cccccc;
    padding: 0px;
    color: #1D090D;
        vertical-align: middle;
}
    
    

td.td_sub2 {
    padding: 5px;
    font-size: 10px;
    text-align: left;
    font-weight: bolder;
    vertical-align: middle;
}    
    
    td.td_sub3 {
    padding: 5px;
    font-size: 10px;
    text-align: center;
    font-weight: bolder;
    vertical-align: middle;
}
    
    td.td_sub4 {
    padding: 5px;
    font-size: 10px;
    text-align: left;
    font-weight: bolder;
    vertical-align: middle;
}
    
    .sub3_in {
    display: inline-block;
    margin: auto;
    padding: 0px;
    text-align: left;
    width: auto;
        
}


    .sub3_tag {    
    box-sizing: border-box;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #f3982d;
    font-size: 0.8em;
    font-weight: bolder;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}
    
    .sub4_tag {    
    box-sizing: border-box;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #f3982d;
    font-size: 0.8em;
    font-weight: bolder;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}
    
.td_text2_time {
    font-size: 0.1em;
    font-weight: none;
    background-color: white;
    padding: 0px;
    color: #1D090D;
    vertical-align: middle;
    border-color: #cccccc;
    text-align: right;
}    

.td_text4 {
    font-size: 0.5em;
    font-weight: bolder;
    background-color: white;
    padding: 5px;
    color: #1D090D;
    vertical-align: middle;
    border-color: #cccccc;
}
    .td_logo {
    font-size: 1.0em;
    line-height: normal;
}
}

.td_maru {
    width: 50%;
    height: auto;
}

@media screen and (max-width: 480px) {

    .td_maru {
    width: 80%;
    height: auto;
}
}
    
.img_waku{
    width: 70%;
}

@media screen and (max-width: 480px) {

    .img_waku{
    width: 85%;
}
}
    
.frame_text{
  font-size: 20px;
  margin: auto;
}

/*========= ボタン ===============*/

.button01:hover,.button02:hover,.button03:hover,.button04:hover,.button05:hover,
.button06:hover,.button07:hover,.button08:hover,.button09:hover,.button10:hover,.button11:hover {
  background: #fa6d6d;
  color: #ff701e;
  cursor: pointer;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

.button01 {
	display: block;
	position: relative;
	background-color: #ed2f2f;
	border-radius: 25px;	
	color: #fff;
	line-height: 11px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #bbb;/*0e8c73*/
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	padding: 20px 10px;
	overflow: hidden;
	width: 80%;
	margin: 10px auto 10px;
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}


.button_text01 {
    color: #fff  !important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.4em;
    text-align: center;
    font-weight: bolder;
}

.button_text04 {
    color: #fff  !important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.4em;
    text-align: center;
    font-weight: bolder;
}

@media screen and (max-width: 480px) {
    .button_text01 {
    color: #fff  !important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.4em;
    text-align: center;
    font-weight: bolder;
    }
    
    .button_text04 {
    color: #fff  !important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 0.3em;
    text-align: center;
    font-weight: bolder;
}
}

.reflection {
	background-color: #fff;
	height: 100%;
	width: 30px;
	top: -180px;
	left: 0;
	position: absolute;
    opacity: 0;
	transform: rotate(45deg);
	animation: reflection 3s ease-in-out infinite;
	-webkit-transform: rotate(45deg);
	-webkit-animation: reflection 3s ease-in-out infinite;
	-moz-transform: rotate(45deg);
	-moz-animation: reflection 3s ease-in-out infinite;
	-ms-transform: rotate(45deg);
	-ms-animation: reflection 3s ease-in-out infinite;
	-o-transform: rotate(45deg);
	-o-animation: reflection 3s ease-in-out infinite;
}

@keyframes reflection {
	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; }
}

/*=========検索フォーム=========*/

.js-error__required {
  line-height: 1;
  color: red;
  font-size: 10px;
  margin-top: 5px;
}
.is-hide {
  display: none;
}
.is-disabled {
  opacity: 0.7;
  pointer-events: none;
}

// only for layout

.content {
  margin: auto;
  width:100%;
}

.content__select {
  margin: auto;
}

.content__hint {
  font-size: 14px;
  margin-top: 15px;
}

.form_table {
    width: 100%;
    border-collapse:collapse; /*セル同士の間に隙間を空けない*/
}

.form_tr {
    height: 50px;
}

.form_th {
    background-color: #f3982d;
    color: white;
    font-size: 20px;
    font-weight: bolder;
    width: 100%;
    height: auto;
    vertical-align: middle;
    padding: inherit;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;

}

.form_cate {
    width:30%;
    font-size: 20px;
    font-weight: bolder;
}

.form_select {
    width: 70%;
}

#select01 {
    font-size: 25px;
}

#select02 {
    font-size: 25px;
}


/*=========ナースガーデン特集=========*/

.garden_board {
    background-image: url(../img/asset/recommend_agent.webp);
    background-size: 900px 150px;
    background-repeat: no-repeat;
    width: 100%;
    height: 150px;
    position: relative;
    top: 0;
    left: -5px;
    top: 28px;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 50px;
}

@media screen and (max-width:480px) {
    .garden_board {
    background-image: url(../img/asset/recommend_agent.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 375px;
    height: 60px;
    position: relative;
    top: 0;
    left: 1px;
    top: 0px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}
}

.garden_feature_box {
    box-sizing: border-box;
    border-width: 4px;
    width: 873px;
    margin: 0 auto;
    border-left: solid 2px #DEDEDE;
    border-right: solid 2px #DEDEDE;
    border-bottom: solid 2px #DEDEDE;
    padding: 30px 40px 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: white;
    position: relative;
}




/*========= ランキングのタブ ===============*/

#rank_body{
    box-sizing: border-box;
    border-width: 4px;
    width: 873px;
    margin: 0 auto;
    border-left: solid 2px #DEDEDE;
    border-right: solid 2px #DEDEDE;
    border-bottom: solid 2px #DEDEDE;
    padding: 30px 40px 20px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: floralwhite;
    position: relative;
}

.rank_unit{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    justify-content: space-between;
    align-items: stretch;
    margin-bottom: 20px;
    }


.rank_column01{
    flex-basis: 300px;
    width: 300px;
}

.rank_column02{
    flex-basis: 465px;
    width: 465px;
}

.rank_column03{
    width: 100%;
}

.rank_banner{
    display: block;
    width: 300px;
    height: 250px;
    background-repeat: no-repeat;
    background-position: 50% 0;
    background-size: 300px 250px;
    margin-bottom: 12px;
}

.tr2{
    background-image:url(asset/ranked_background_pattern.webp);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 5px 5px;
    width: 140px;
    padding-left: 16px;
    border-right: 1px solid #ededed;
    font-family: "ヒラギノ角ゴ Pro W6", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
    width: auto;
}

.rank_important {
    height: 265px;
}

.th_rank01{
    background-image:url(asset/ranked_background_pattern.webp);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 5px 5px;
    background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
    vertical-align: middle;
	font-size: 23px;
	padding: 2px 2px 2px 2px;
    color: white;
    width: 300px;
    height:50px
}

.th_rank02{
	border: 1px solid #cccccc;
	font-size: 80px;
    font-weight: bolder;
	padding: 2px 2px 2px 2px;
    color: dimgray;
    text-align: center;
    vertical-align: middle;
    background-color: white;
    height: 140px;
}

td.td_rank01 {
    height: 30px;
    vertical-align: middle;
    font-size: 20px;
    font-weight: bolder;
    padding: 5px;
    color: white;
    background-color: #FF99AF;
}

/*========= ランキング上部 ===============*/
.rank_top_board {
    background-image: url(../img/asset/rank_all.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 900px;
    height: 140px;
    position: relative;
    top: 0;
    left: -px;
    top: 28px;
    overflow: hidden;
    margin-bottom: 40px;
}

@media screen and (max-width:480px) {
    .rank_top_board{
    background-image: url(../img/asset/rank_all.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 375px;
    height: 60px;
    position: relative;
    top: 0;
    left: 1px;
    top: 0px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}

}

.rank_board_special {
    background-image: url(../img/asset/rank_head_special.webp);
    background-size: 900px 124px;
    background-repeat: no-repeat;
    width: 900px;
    height: 124px;
    position: relative;
    top: 0;
    left: -22px;
    top: 28px;
    overflow: hidden;
}



.overall_rate{
    box-sizing: border-box;
    position: absolute;
    top: 15px;
    right: 165px;
    width: 100px;
    height: 100px;
    padding-top: 11px;
}

.overall_rate_vlaue{
    padding: 10px;
    margin-bottom: 2px;
    font-size: 2.7em;
    font-weight: bold;
    text-align: right;
    color: white;
}

@media screen and (max-width:480px) {

.overall_rate{
    box-sizing: border-box;
    position: absolute;
    top: -4px;
    right: 55px;
    width: 100px;
    height: 100px;
    padding-top: 11px;
    }    }
    
@media screen and (max-width:480px) {
    
.overall_rate_vlaue{    
    font-size: 1.5em;
    font-weight: bold;
    color: white;
    padding: 5px;
    }
}
    
.rating-star {
    display: block;
    margin: 0 auto;
    height: auto;
    position:relative;
    left: 360px;
    top: 25px;
    width: 30%;
}
/* */

@media screen and (max-width:480px) {

.rating-star{
    width: 5%;
    
    }
}

.rank_name {
    position: absolute;
    top: 26px;
    left: 130px;
    width: 720px;
    height: 32px;
    overflow: hidden;
    text-decoration: underline;
    font-size: 25px;
    font-weight: bold;
}


@media screen and (max-width:480px) {
.rank_name {
    position: absolute;
    top: 2px;
    left: 60px;
    overflow: hidden;
    text-decoration: underline;
    font-size: 20px;
    font-weight: bold;
    } 
}

/*　△スマホ用△ */

.th_detail01 {
    background-image:url(asset/ranked_background_pattern.webp);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 5px 5px;
    background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
    vertical-align: middle;
	font-size: 0.8em;
	padding: 2px 2px 2px 2px;
    color: white;
    width: 100px;
    height:30px
}

@media screen and (max-width:480px) {
    .th_detail01 {
    background-image:url(asset/ranked_background_pattern.webp);
    background-repeat: repeat;
    background-position: 0 0;
    background-size: 5px 5px;
    background-color: #f3982d;
	border: 1px solid #cccccc;
	text-align: center;
    vertical-align: middle;
	font-size: 1.1em;
	padding: 2px 2px 2px 2px;
    color: white;
    width: 100px;
    height:30px
}
}

.td_detail01 {
    background-color: white;
	border: 1px solid #cccccc;
	text-align: center;
    vertical-align: middle;
	padding: 2px 2px 2px 2px;
    color: dimgray;
    width: 280px;
    height:30px;
    padding: 10px;
}

.tag_rank {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

@media screen and (max-width:480px) {
    .tag_rank {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
}
}

.tag_table_rank {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.rank_detail {
    margin-top: 10px;
}

.tag_rank_detail {
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #f3982d;
    font-size: 0.5em;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

@media screen and (max-width:480px) {
    .tag_rank_detail {
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #f3982d;
    font-size: 0.5em;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}
}

.tag_table_detail {
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #FF99AF;
    font-size: 0.6em;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}

@media screen and (max-width:480px) {
    .tag_table_detail {
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #FF99AF;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}
}



/*========= ランキング上部手作り ===============*/


.rank_no_box {
    display: flex;
    flex-direction: row;
    width: 99%;
    height: 80px;
    border: 4px #f3982d solid;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 20px;
}

@media screen and (max-width:480px) {
    .rank_no_box {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    border: 4px #f3982d solid;
    border-radius: 10px;
    background-color: white;
    margin: auto;
}
}

.rank_no_box_garden {
    display: flex;
    flex-direction: row;
    width: 99%;
    height: 80px;
    border: 4px #ed2f2f solid;
    border-radius: 10px;
    background-color: white;
    margin-bottom: 20px;
}

@media screen and (max-width:480px) {
    .rank_no_box_garden {
    display: flex;
    flex-direction: row;
    width: 100%;
    height: auto;
    border: 4px #ed2f2f solid;
    border-radius: 10px;
    background-color: white;
    margin: auto;
}
}

.rank_no {
    background-color: #f3982d;
    padding: 5px;
    width: 15%;
    margin: 5px;
    border-radius: 10px;
    display: flex;
}

.rank_no_garden {
    background-color: #ed2f2f;
    padding: 5px;
    width: 15%;
    margin: 5px;
    border-radius: 10px;
    display: flex;
}

.no {
    font-size: 2.5em;
    font-weight: bolder;
    color: white;
    margin: auto;
}

.ranker_name {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 2.5em;
    font-weight: bolder;
    color: black;
}

.ranker_name02 {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 2.5em;
    font-weight: bolder;
    color: black;
}

.ranker_name03 {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 1.5em;
    font-weight: bolder;
    color: black;
}

.ranker_name04 {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 2.7em;
    font-weight: bolder;
    color: black;
}

@media screen and (max-width:480px) {
.ranker_name {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 0.9em;
    font-weight: bolder;
    color: black;
    
}
}

@media screen and (max-width:480px) {
    .ranker_name02 {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 1.3em;
    font-weight: bolder;
    color: black;
        
        
}
    
    .ranker_name03 {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 0.8em;
    font-weight: bolder;
    color: black;
}
    
    .ranker_name04 {
    width: 50%;
    align-items:center;
    margin: auto;
    font-size: 1.1em;
    font-weight: bolder;
    color: black;
}

}
    

.rank_point_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 50%;
    background-color: #f3982d;
    margin: 5px;
    border-radius: 10px;
}

.rank_point_box_garden {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 50%;
    background-color:#ed2f2f;
    margin: 5px;
    border-radius: 10px;
}

.rank_repu_text {
    font-size: 1.8em;
    text-align: center;
    color: white;
    font-weight: bolder;
    line-height: 1.1;
}

.rank_repu {
    font-size: 1.5em;    
}

.rank_star {
    background-image: url(../img/asset/star_5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 150px;
    height: 30px;
    margin-right: 4px;
}

.rank_star45 {
    background-image: url(../img/asset/star_4.5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 150px;
    height: 30px;
    margin-right: 4px;
}

.rank_star40 {
    background-image: url(../img/asset/star_4.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 150px;
    height: 30px;
    margin-right: 4px;
}

.rank_star35 {
    background-image: url(../img/asset/star_3.5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 150px;
    height: 30px;
    margin-right: 4px;
}

@media screen and (max-width:480px) {
    .rank_no {
    background-color: #f3982d;
    padding: 5px;
    width: 15%;
    margin: 5px;
    border-radius: 10px;
    display: flex;
}

.no {
    font-size: 1.1em;
    font-weight: bolder;
    color: white;
    margin: auto;
}



.rank_point_box {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    background-color: #f3982d;
    margin: 5px;
    border-radius: 10px;
}
    
.rank_point_box_garden {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 50%;
    background-color: #ed2f2f;
    margin: 5px;
    border-radius: 10px;
}    

.rank_repu_text {
    font-size: 0.8em;
    text-align: center;
    color: white;
    font-weight: bolder;
    line-height: 1.1;
}

.rank_repu {
    font-size: 0.5em;    
}

.rank_star {
    background-image: url(../img/asset/star_5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100px;
    height: 15px;
    margin-right: 4px;
}
    
.rank_star45 {
    background-image: url(../img/asset/star_4.5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100px;
    height: 15px;
    margin-right: 4px;
}
.rank_star40 {
    background-image: url(../img/asset/star_4.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100px;
    height: 15px;
    margin-right: 4px;
}
    
.rank_star35 {
    background-image: url(../img/asset/star_3.5.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 100px;
    height: 15px;
    margin-right: 4px;
}    
}

/*========= ランキング作り直し ===============*/

#rank_body02 {
    align-items: center;
    justify-content: center;
    background-color: #FFE6E6;
    text-align: center;
    max-width: 890px;
    border-radius: 20px;    
    margin: auto ;
    padding: 10px;
    margin-bottom: 30px;
}

#rank_body_garden {
    align-items: center;
    justify-content: center;
    background-color: #D8F0DC;
    text-align: center;
    max-width: 890px;
    margin: auto ;
    padding-bottom: 10px;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 20px;
}

.rank_unit02 {
    width: 100%;
    overflow: hidden;
    margin-top: 12px;
}

.rank_unit03 {
    width: 100%;
    overflow: hidden;
    margin-top: 12px;
}

.rank_column03 {
    display: flex;
    
}
.rank_column04 {
    display: flex;
    flex-direction:column;
    padding-left: 10px;
}

.rank_column04 img {
    border: solid 1px #ccc;
}

@media screen and (max-width:480px) {
    .rank_column03 {
    display: flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
}
}
    
@media screen and (max-width:480px) {

.rank_column04 {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: inherit;
}
}


/*========= ランキングポイント ===============*/

.li_change {
    margin: 5px;
}

span.span_change {
    font-size: 0.8em;
}

span.span_change::before {
    background: url(../img/asset/point_check_icon.gif) no-repeat left top;
    content: '';
    display: inline-block;
    height: 30px;
    left: 4px;
    position: absolute;
    top: 1px;
    width: 32px;
    margin-right: 10px;
}

.point_rank {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    margin-left: 10px;
    margin-right: 10px;
    margin-bottom: 10px;    
}

@media screen and (max-width:480px) {
    .point_rank {
    display: table-cell;
    vertical-align: top;
    width: 100%;
    margin-top: 10px;
}
}
    
    
.title {
    border: 2px #96d0ff solid;
    background-color: cornflowerblue;
    color: white;
    font-size: 1.1em;
    font-weight: bold;
    vertical-align: middle;
    text-align: center;
    
}

.list_rank {
    background-color: #ffffff;
    padding: 0.5em 0.5em;
    border: 1px;
    border-color: cornflowerblue;
    background-color:aliceblue;
        
}

.title_point {
    display: block;
    font-size: 140%;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
    
}

@media screen and (max-width:480px) {
    .title_point {
    display: block;
    font-size: 100%;
    font-weight: bold;
    line-height: 1.3;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
    
}
}

.list_box {
    background-color: azure;
    padding: 5px;
    width: 95%;
    height: 90%;
    margin-bottom: 4px;
    text-align: left;

}

.title_point ::before {
    background: url(../img/asset/point_check_icon.gif) no-repeat left top;
    content: '';
    display: inline-block;
    height: 30px;
    left: 4px;
    position: absolute;
    top: 15px;
    width: 32px;
    margin-right: 10px;
}

@media screen and (max-width:480px) {
    .title_point ::before {
    background: url(../img/asset/point_check_icon.gif) no-repeat left top;
    content: '';
    display: inline-block;
    height: 30px;
    left: 4px;
    position: absolute;
    top: 1px;
    width: 32px;
    margin-right: 10px;
}
}
    
    
.title_point > span {
    color: #ff491c;
    font-size: 120%;
}

.text_point {
    font-size: 70%;
    
}

@media screen and (max-width:480px) {
    .title_point > span {
    color: #ff491c;
    font-size: 100%;
}

.text_point {
    font-size: 60%;
    
}
}

.editor_rank {
    width: 100%;
    margin: auto;
    border-radius: 5px;
}

h2 {
  position: relative;
  padding: 1rem 1rem;
  text-align: left;
  font-weight: bolder;
  font-size: 20px;
  color: #ff491c;
}

h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 25%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #f3982d, #f3982d 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #f3982d, #f3982d 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

h3 {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

.editor_text {
    width: 100%;
    margin: auto;
    display: flex;
}

.editor_text_font {
    text-align: left;
    font-family: "メイリオ", "Meiryo";
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
}

.editor_illust {
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 200px 200px;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: relative;
    bottom: -10px;
    left: 30px;
}

@media screen and (max-width:480px) {
    .editor_illust {
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 150px 150px;
    background-repeat: no-repeat;
    width: 200px;
    height: 200px;
    position: relative;
    bottom: -10px;
    left: -20px;
    }
}

/* 吹き出し本体 */

.balloon1{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #FF99AF; 
  color: black;
  background-color: white;
  margin-left: 30px; /* 左に余白を設ける */
  margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-weight: bolder;
    text-align: left;
    width: 70%;
}

@media screen and (max-width:480px) {
    .balloon1{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #FF99AF; 
  color: black;
  text-align: left;
  font-size: 0.7em;
  background-color: white;
  margin-left: 10px; /* 左に余白を設ける */
  margin-top: 10px;
    margin-bottom: 10px;
    font-weight: bolder;
  width: 70%;
}
}

    

/* 画像 - 絶対配置で左上に配置 */
.balloon1 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon1::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 50px;
  border-right: 15px solid #FF99AF;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/*=========　求人例　=============*/



/*=========　ランキングテーブル　=============*/

.pc_table_rank {
    margin: 10px 10px 0 10px;
    padding: 0 0 25px;
}

.pc_table_rank>.table_rank {
    background-color: #fff;
    font-size: 13px;
    padding: 8px;
    border: 2px solid #f3982d;
}

.th_rank {
    font-size: 1.1em;
    border-radius: 0px;
    border-color: white;
    background-color: #f3982d;
    height: auto;
}

@media screen and (max-width:480px) {
    .th_rank {
    font-size: 1.1em;
    border-radius: 0px;
    border-color: white;
    background-color: #f3982d;
    vertical-align: middle;
}
}

.td_rank {
    border-color: white;
    background-color: aliceblue;
    font-size: 1.5em;
    font-weight: bolder;
    height: auto;
    padding: 5px;
    vertical-align: middle;
}

.td_score {
        font-size: 0.6em;
    }

.td_score_time {
    font-weight: 0;
    font-size: 0.1em;
    text-align: right;
    
    }

@media screen and (max-width:480px) {
    .td_rank {
    border-color: white;
    background-color: aliceblue;
    font-size: 1.5em;
    font-weight: bolder;
    text-align: center;
    padding: 1px;
    justify-content: center;
}
    .table_maru {
        width: 20%;
    }
    
    .td_score {
        font-size: 0.8em;
    }
    
    .td_score_time {
    font-weight: 0;right: 
    font-size: 0.1em;
    text-align: right;
    
    }
}

table.rank_layout_pc {
    table-layout: fixed;
    width: 100%;
    border-color: white;
    border-collapse: collapse;
    border-spacing: 0;
    border-radius: 0px;
}

@media screen and (max-width:480px) {
    .rank_layout_pc{
    display: none;
    }
}

.rank_layout_sp {
    width: 100%;
}

.rank_layout_sp .th_rank {
    width: 30%;
}

.rank_layout_sp .td_rank {
    width: 70%;
}

@media screen and (min-width:481px){
    .rank_layout_sp{
        display: none;
    }
}

@media screen and (max-width:480px) {
    .tag_table_detail {
    box-sizing: border-box;
    width: fit-content;
    height: 20px;
    padding: 0 10px;
    margin: 0 5px 5px 0;
    border-radius: 20px;
    background-color: #f3982d;
    font-size: 0.8em;
    font-weight: normal;
    line-height: 20px;
    letter-spacing: normal;
    text-align: center;
    color: #fff;
}
}

.tr3 {
    height: 30px;
    width: auto;
    
}

/*=========　編集部のコメント　============*/

.editor_layout {
    width: 100%;
    margin-top: 10px;
}

.editor_title {
    width: 100%;
}

.editor_contents {
    display: flex;
    color: black;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    height: 100%;
    width: 99%;
}

.editor_title h4 {
  padding: 0.5em;/*文字周りの余白*/
  color: #494949;/*文字色*/
  background: #F2E7AE;/*背景色*/
  border-left: solid 5px #5FC6ED;/*左線（実線 太さ 色）*/
    text-align: left;
}

.editor_illust02 {
    background-image: url(../img/asset/illust_001.png);
    background-size: 90%;
    background-repeat: no-repeat;
    width: 30%;
    height: auto;
    position: relative;
    bottom: 0px;
    left: 10px;
    top: 10px;
    }

@media screen and (max-width:480px) {
    .editor_illust02 {
    background-image: url(../img/asset/illust_001.png);
    background-size: 90%;
    background-repeat: no-repeat;
    width: 30%;
    height: 200px;
    position: relative;
    bottom: -40px;
    left: 10px;
    top: 10px;
    }
}

.editor_box {
    background-color: #DB4437;
    padding: 5px;
    width: 100%;
    height: 90%;
    margin-bottom: 4px;
    text-align: left;
}

.editor_point {
    display: block;
    font-size: 140%;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
}

.editor_point ::before {
    background: url(../img/deco/icon02.webp) no-repeat left top;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 40px;
    width: 32px;        
    left: 2px;
    position: absolute;
    top: 6px;
    margin-right: 10px;
}

.editor_point h3 {
    color: white;
}

@media screen and (max-width:480px) {
    .editor_point {
    display: block;
    font-size: 1.1em;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
    
}
}

@media screen and (max-width:480px) {
    .editor_point ::before {
    background: url(../img/deco/icon02.webp) no-repeat left top;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 40px;
    width: 32px;        
    left: 2px;
    position: absolute;
    top: 3px;
    margin-right: 10px;
}
}

/*=========　会社概要　===============*/

.company {
    width: 100%;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
}

.company_box {
    display: flex;
    color: black;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    height: 100%;
    width: 100%;
}

.company_title {
    background-color: #DB4437;
    padding: 5px;
    width: 100%;
    height: 90%;
    margin-bottom: 4px;
    text-align: left;
}

.company_point {
    display: block;
    font-size: 140%;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
    
}

.company_point ::before {
    background: url(../img/deco/icon02.webp) no-repeat left top;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 40px;
    width: 32px;        
    left: 2px;
    position: absolute;
    top: 6px;
    margin-right: 10px;
}

.company_point h3 {
    color: white;
}

.table_company {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
    margin: 10px; 
}

.th_company {
    width: 10%;
    font-size: 1.0em;
    font-weight: bolder;
    vertical-align: middle;
}


.td_company {
    width: 30%;
    font-size: 0.8em;
    text-align: left;
    font-weight: bolder;
    
}

/*=========　求人数・非公開求人　===============*/

.detail {
    width: 100%;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
}

.detail_box {
    display: flex;
    color: black;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    height: 100%;
    width: 99%;
}

.detail_title {
    background-color: #DB4437;
    padding: 5px;
    width: 100%;
    height: 90%;
    margin-bottom: 4px;
    text-align: left;
}

.detail_point {
    display: block;
    font-size: 140%;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
    
}

.detail_point ::before {
    background: url(../img/deco/icon02.webp) no-repeat left top;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 40px;
    width: 32px;        
    left: 2px;
    position: absolute;
    top: 6px;
    margin-right: 10px;
}

.detail_point h3 {
    color: white;
}

.detail_illust {
    background-image: url(../img/asset/change_point_illust04.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 30%;
    height: auto;
    position: relative;
    bottom: 0px;
    left: 0px;
    }

@media screen and (max-width:480px) {
    .detail_illust {
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 220px;
    height: 200px;
    position: relative;
    bottom: -30px;
    left: 0px;
    }
}

.detail_illust2 {
    background-image: url(../img/asset/change_point_illust05.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 30%;
    height: auto;
    position: relative;
    bottom: 0px;
    left: 0px;
    }

@media screen and (max-width:480px) {
    .detail_illust2 {
    background-image: url(../img/asset/change_point_illust05.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 220px;
    height: 200px;
    position: relative;
    bottom: -30px;
    left: 0px;
    }
}

/* 吹き出し本体 */

.balloon2{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #FF99AF; 
  color: black;
  background-color: white;
  margin-left: 30px; /* 左に余白を設ける */
  margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    font-weight: bolder;
    text-align: left;
    width: 70%;
}

@media screen and (max-width:480px) {
    .balloon2{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #FF99AF; 
  color: black;
  text-align: left;
  font-size: 0.7em;
  background-color: white;
  margin-left: 10px; /* 左に余白を設ける */
  margin-top: 10px;
    margin-bottom: 10px;
    margin-right: auto;
    font-weight: bolder;
}
}

    

/* 画像 - 絶対配置で左上に配置 */
.balloon2 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon2::before{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 50px;
  border-right: 15px solid #FF99AF;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/* 吹き出し本体 */

.balloon3{
  position: relative;
  padding: 20px;
  border-radius: 10px;
  border: 2px solid #FF99AF; 
  color: black;
  background-color: white;
  margin-right: 30px; /* 右に余白を設ける */
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 10px;
  font-weight: bolder;
  text-align: left;
  width: 70%;
}

@media screen and (max-width:480px) {
    .balloon3{
  position: relative;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #FF99AF; 
  color: black;
  text-align: left;
  font-size: 0.7em;
  background-color: white;
  margin-left: 10px; /* 左に余白を設ける */
  margin-top: 10px;
    margin-bottom: 10px;
    margin-right: auto;
    font-weight: bolder;
}
}

    

/* 画像 - 絶対配置で左上に配置 */
.balloon3 .icon{
  position: absolute;
  left: -110px;
  top: 0;
}
/* 三角アイコン */
.balloon3::after{
  content: '';
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: 600px;
  top: 50px;
  border-left: 15px solid #FF99AF;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

/*=========　求人　===============*/

.job_box {
    display: flex;
    color: black;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    height: 100%;
    width: 99%;
    margin-bottom: 10px;
}

.job_table {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
    margin: 20px;
}

.th_job {
    width: 10%;
    font-size: 1.0em;
    font-weight: bolder;
    vertical-align: middle;
}

.td_job {
    width: 10%;
    font-size: 0.8em;
    font-weight: bolder;
    vertical-align: middle;    
    padding: 5px;
    text-align: left;
}

/*=========　口コミ　===============*/

.user_repu {
    width: 100%;
    margin: auto;
    margin-top: 20px;
    border-radius: 5px;
}

.user_title {
    background-color: #DB4437;
    padding: 5px;
    width: 100%;
    height: 90%;
    margin-bottom: 4px;
    text-align: left;
}

.user_point {
    display: block;
    font-size: 140%;
    font-weight: bold;
    line-height: 2.0;
    position: relative;
    padding: 0 3em 0 40px;
    width: 100%;
    
}

.user_point ::before {
    background: url(../img/deco/icon02.webp) no-repeat left top;
    background-size: 100%;
    content: '';
    display: inline-block;
    height: 40px;
    width: 32px;        
    left: 2px;
    position: absolute;
    top: 6px;
    margin-right: 10px;
}

.user_point h3 {
    color: white;
}

.user_box {
    display: flex;
    color: black;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    height: 120px;
}

@media screen and (max-width:480px) {
    .user_box {
    display: flex;
    flex-direction: row;
    border: 2px solid #FF99AF; 
    color: black;
    background-color: white;
    margin: auto;
    margin-top: 10px;
    height: auto;
    }
}

.user_column01{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: auto;
    width: 30%;
}

@media screen and (max-width:480px) {
    .user_column01{
    display: flex;
    flex-direction: column;
    align-items: center;
    vertical-align: middle;
    margin: auto;
    width: 30%;
    }
}

.user {
    width: 40%;
}

@media screen and (max-width:480px) {
    .user {
    width: 80%;
}
}
    
.user_demogra {
    font-size: 0.7em;
    font-weight: bolder;
    margin-left: 10px;
    width: 30%;
}

@media screen and (max-width:480px) {
    .user_demogra {
    font-size: 0.4em;
    font-weight: bolder;
    }
}


.user_column02{
    margin: auto;
    width: 70%;
}

@media screen and (max-width:480px) {
    .user_column02{
    margin: auto;
    width: 70%
}
}

.user_comments {
    padding: 10px;
    font-size: 0.9em;
    text-align: left;
}

@media screen and (max-width:480px) {
    .user_comments {
    padding: 10px;
    font-size: 0.7em;
    text-align: left;
}
}

.good, .ungood {/*ボックス共通部分*/
    border: 2px solid #f4f4f5;/*枠線*/
    color: #797979;/*文字色*/
    padding: 1.5em 1em;/*内側余白*/
    margin: 1em 0;/*外側余白*/
}
.good .box-title, .ungood .box-title {/*タイトル部分*/
    display: flex;/*配置しやすい種類に変更*/
    align-items: center;/*縦方向を真ん中に*/
    line-height: 1;/*行の高さ*/
    margin-bottom: 5px;/*外側　下の余白*/
}
.good .box-title, .good .box-title:before {/*タイトルとアイコンの色*/
    color: #fda359;/*文字色*/
}
.ungood .box-title, .ungood .box-title:before {/*タイトルとアイコンの色*/
    color: #4cb1bf;/*文字色*/
}
.good .box-title:before ,.ungood .box-title:before {/*アイコン*/
    font-family: "font awesome 5 free";/*種類*/
    margin-right: 5px;/*外側　右余白*/
    font-size: 1.7em;/*文字の大きさ*/
}
.good .box-title:before {/*メリットのアイコン*/
    content: "\f599";/*アイコンの種類*/
}

.so-good .box-title:before {/*メリットのアイコン*/
    content: "\f599";/*アイコンの種類*/
}

.ungood .box-title:before {/*デメリットのアイコン*/
    content: "\f5c8";/*アイコンの種類*/
}
/*=========　編集長おすすめ　===============*/

.recommend_board {
    background-image: url(../img/asset/recommend_agent.webp);
    background-size: 900px 150px;
    background-repeat: no-repeat;
    width: 100%;
    height: 150px;
    position: relative;
    top: 0;
    left: -5px;
    top: 28px;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 20px;
}

@media screen and (max-width:480px) {
    .recommend_board {
    background-image: url(../img/asset/recommend_agent.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 375px;
    height: 60px;
    position: relative;
    top: 0;
    left: 1px;
    top: 0px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 10px;
}
}

.recommend_box {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    border-width: 4px;
    width: 100%;
    height: auto;
    margin: auto;
    border-left: solid 2px #DEDEDE;
    border-right: solid 2px #DEDEDE;
    border-bottom: solid 2px #DEDEDE;
    padding: 10px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #FFE6E6;
}

@media screen and (max-width:480px) {
    .recommend_box {
    display: flex;
    flex-direction: column;
    border-width: 4px;
    width: 100%;
    height: auto;
    margin: auto;
    border-left: solid 2px #DEDEDE;
    border-right: solid 2px #DEDEDE;
    border-bottom: solid 2px #DEDEDE;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #FFE6E6;
    padding: 10px;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
}


.recommend_agent {
    display: flex;
    border-width: 4px;
    width: 100%;
    height: auto;
    margin: auto;
    margin-top: 10px;
}

@media screen and (max-width:480px) {
    .recommend_agent {
    margin: 10px;
    display: flex;
    flex-direction: row;
    border-width: 4px;
    width: 100%;
    height: auto;
}
}

.recommend_agent01 {
    box-sizing: border-box;
    border-width: 4px;
    width: 100%;
    height:auto;
    margin: 0 auto;
    border: solid 2px #DEDEDE;
    float: left;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.recommend_agent02 {
    box-sizing: border-box;
    border-width: 4px;
    width: 100%;
    height:auto;
    margin: 0 auto;
    border: solid 2px #DEDEDE;
    float: left;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

@media screen and (max-width:480px) {
    .recommend_agent01 {
    width: 100%;
    height:auto;
    margin: 0 auto;
    border: solid 2px #DEDEDE;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: white;
}

.recommend_agent02 {
    width: 100%;
    height:auto;
    margin: 0 auto;
    border: solid 2px #DEDEDE;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    background-color: white;
}
}

.recommend_image {
    padding: 5px;
    width: 90%;    
}

.recommend_comment {
    border-width: 4px;
    height:auto;
    border-radius: 10px;
    font-size: 1.0em;
    font-weight: bolder;
    padding: 30px;
    background-color: #FFE6E6;
    margin-top: -10px;
}

@media screen and (max-width:480px) {
    .recommend_comment {
    padding: 20px;
    width: 88%;
    height:auto;
    border-radius: 10px;
    font-size: 0.8em;
    font-weight: bolder;
    background-color: #FFE6E6;
    margin: 0;
}
}

.recommend_comment_bnr {
    padding: 30px;
    margin: 10px;
}

@media screen and (max-width:480px) {
    .recommend_comment_bnr {
    padding: 0;
    margin: 0 0 20px;
}
}



.recommend_under {
    border-bottom: solid 2px #FFDDFF;
}

.agent_name {
    background-color: #f3982d;
    margin: auto;
    padding: inherit;
    font-size: 1em;
    font-weight: bolder;
    color: white;
    text-align: center;
    width: 100%;
}

.agent_detail {
    font-size: 0.8em;
    border-radius: 5px;
    margin: 5px;
    font-weight: bolder;
    padding: 5px;
}

@media screen and (max-width:480px) {
    .agent_detail {
    font-size: 0.7em;
    border-radius: 5px;
    margin: 5px;
    font-weight: bolder;
}
}

.button02 {
	display: block;
	position: relative;
	background-color: #ed2f2f;
	border-radius: 4px;	
	color: #fff;
	line-height: 11px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #bbb;/*0e8c73*/
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	padding: 1px 1px;
	overflow: hidden;
	width: 90%;
	margin: 5px auto 5px;
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

@media screen and (max-width:480px) {
.button02 {
	display: block;
	position: relative;
	background-color: #ed2f2f;
	border-radius: 4px;	
	color: #fff;
	line-height: 11px;
	-webkit-transition: none;
	transition: none;
	box-shadow: 0 3px 0 #bbb;/*0e8c73*/
	text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
	padding: 12px 10px;
	overflow: hidden;
	width: 80%;
	margin: 5px auto 5px;
}
}
    
.button_text02 {
    color:white;
    font-size: 18px;
    text-align: center;
    font-weight: bolder;
    line-height: 1.1em;
}

@media screen and (max-width:480px) {
    .button_text02 {
    color:white;
    font-size: 0.8em;
    margin: auto;
    text-align: center;
    font-weight: bolder;
}
}

.plus {
    display: flex;
    align-items: center;
    font-size: 3em;
    font-weight: bolder;
    color: #f3982d;
}

@media screen and (max-width:480px) {
    .plus {
    display: flex;
    align-items: center;
    font-size: 3em;
    font-weight: bolder;
    }
}
    

/*=========　転職サイトを選ぶポイント　=========*/

.select_board {
    background-image: url(../img/asset/select_point.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 900px;
    height: 150px;
    position: relative;
    top: 0;
    left: 0px;
    top: 28px;
    overflow: hidden;
    margin-top: 0px;
    margin-bottom: 20px;
}

@media screen and (max-width:480px) {
    .select_board {
    background-image: url(../img/asset/select_point.webp);
    background-size: 99% 99%;
    background-repeat: no-repeat;
    width: 375px;
    height: 60px;
    position: relative;
    top: 0;
    left: 1px;
    top: 0px;
    overflow: hidden;
    margin-top: 10px;
    margin-bottom: 0px;
}
}

.select_box {
    box-sizing: border-box;
    border-width: 4px;
    width: 100%;
    margin: 0 auto;
    padding: 30px 40px 20px;
    border-radius: 20px;
    background-color: #FFE6E6;
    position: relative;
}

@media screen and (max-width:480px) {
    .select_box {
    box-sizing: border-box;
    border-width: 4px;
    width: 100%;
    margin: 0 auto;
    border-left: solid 2px #DEDEDE;
    border-right: solid 2px #DEDEDE;
    border-bottom: solid 2px #DEDEDE;
    padding: 10px;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    background-color: #FFE6E6;
    position: relative;

}
}

/*=========　転職サイトを選ぶポイント　=========*/

.table_select {
    border-collapse:collapse;
    border-spacing: 0px;
    width: 100%;
    margin-bottom: 15px;
}

.th_select {
    font-size: 1.2em;
}

.td_select {
    font-size: 1.1em;
    font-weight: bolder;
    padding: 20px;
    text-align: left;
}

@media screen and (max-width:480px) {
    .th_select {
    font-size: 0.8em;
}

.td_select {
    font-size: 0.7em;
    font-weight: bolder;
    padding: 10px;
    text-align: left;
}
}

/*=========　検索フォーム　=========*/

.form_box {
    box-sizing: border-box;
    border-width: 4px;
    width: 100%;
    margin: auto;
    margin-bottom: 20px;
    border-radius: 20px;
    background-color: #FFE6E6;
}

.form_title {
    background-color: #f3982d;
    width: 100%;
    height: auto;
    padding-top: 10px;
    padding-bottom: 10px;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    text-align: center;
    color: white;
    font-size: 1.2em;
    font-weight: bolder;

}

.form_table {
    border-collapse:separate;
    border-spacing: 10px;
    width: 100%;
    margin-bottom: 0px;
    padding: 10px 10px 0;
}

.th_form {
    width: 30%;
    font-size: 1.4em;
    height: auto;
    vertical-align: middle;
    
}

@media screen and (max-width:480px) {
    
    .th_form {
    width: 30%;
    font-size: 0.8em;
    height: auto;
    vertical-align: middle;
    
}
}

.td_form {
    background-color: #FFE6E6;
    border: none;
    padding: 0px;
    height: 40px;
    vertical-align: middle;
}

.td_form02 {
    background-color: white;
    border: none;
    padding: 0px;
    height: auto;
    vertical-align: middle;
    font-size: 0.9em;
    flex-wrap: wrap;
    font-weight: bolder;
    border-radius: 0px;
}


.td_form03 {
    background-color: #FFE6E6;
    border: none;
    padding: 0px;
    height: 40px;
    vertical-align: middle;
    font-size: 0.9em;
    flex-wrap: wrap;
}

.td_form02 ul {
    list-style: none;
}

.ul_form {
    display: flex;
    flex-wrap: wrap;
    height: auto;
    padding: 10px
}

@media screen and (max-width:480px) {
    .ul_form {
    display: flex;
    flex-wrap: wrap;
    height: 70px;
    padding: 10px
}
}

    
    
.ul_form li {
    margin: auto;
}



.styled-select {
  overflow: hidden;
  width: 90%;
  margin: 2em auto;
  text-align: center;
  font-weight: bolder;
  height: 40px;
}
.styled-select select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  text-indent: 0.01px;
  text-overflow: ellipsis;
  border: none;
  outline: none;
  background: transparent;
  background-image: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.styled-select select::-ms-expand {
    display: none;
}
.styled-select.sl01 {
  position: relative;
  border-radius: 2px;
  border: 2px solid #f3982d;
  border-radius: 50px;
  background: #ffffff;
}
.styled-select.sl01::before {
  position: absolute;
  top: 0.8em;
  right: 0.8em;
  width: 0;
  height: 0;
  padding: 0;
  content: '';
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid skyblue;
  pointer-events: none;
}
.styled-select.sl01 select {
  padding: 8px 38px 8px 8px;
  color: black;
}

/*=========　チェックボックス　=========*/

@import url(https://fonts.googleapis.com/css?family=Open+Sans);

input[type="checkbox"] { display: none; }

input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 14px/20px 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  font-weight: bolder;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

@media screen and (max-width:480px) {
    
 input[type="checkbox"] + label {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 20px;
  font: 1.1em/20px 'Open Sans', Arial, sans-serif;
  cursor: pointer;
  font-weight: bolder;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
     
    }
}   

input[type="checkbox"] + label:last-child { margin-bottom: 0; }

input[type="checkbox"] + label:before {
  content: '';
  display: block;
  width: 20px;
  height: 20px;
  border: 2px solid #f3982d;
  position: absolute;
  left: 0;
  top: 0;
  opacity: .6;
  -webkit-transition: all .12s, border-color .08s;
  transition: all .12s, border-color .08s;
}

input[type="checkbox"]:checked + label:before {
  width: 10px;
  top: -5px;
  left: 5px;
  border-radius: 0;
  opacity: 1;
  border-top-color: transparent;
  border-left-color: transparent;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

/*=========　チェックボックスここまで　=========*/

.button-box03 {
    width: 100%;
    text-align: center;
    cursor: pointer;
    border: none;
    margin-top: 20px;
    margin-bottom: 20px;
}

.button06 {
    display: block;
    position: relative;
    background-color: #ed2f2f;
    border-radius: 40px;
    color: none;
    line-height: 52px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #bbb;
    text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
    padding: 10px 0;
    overflow: hidden;
    width: 100%;
    margin: 1px auto 1px;
  cursor: pointer;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}
.button06:hover {
  background: #fa6d6d;
  color: #ff701e;
  cursor: pointer;
  transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}


.button07 {
    display: block;
    position: relative;
    background-color: #ed2f2f;
    border-radius: 40px;
    color: none;
    line-height: 52px;
    -webkit-transition: none;
    transition: none;
    box-shadow: 0 3px 0 #bbb;
    text-shadow: 0 1px 1px rgb(0 0 0 / 30%);
    padding: 10px 0;
    overflow: hidden;
    width: 80%;
    margin: auto;
    cursor: pointer;
    transition: .3s cubic-bezier(0.45, 0, 0.55, 1);
}

.button_text {
    color: #fff !important;
    display: flex;
    justify-content: center;
    margin: 0 auto;
    font-size: 20px;
    text-align: center;
    font-weight: bolder;
}

.button_text03{
    color: #fff !important;
    display: flex;
    justify-content: center;
    margin: auto;
    font-size: 1.0em;
    text-align: center;
    font-weight: bolder;
    line-height: normal;
    padding: 5px;
}

#btn-click {
    width: 100%;
    padding: 0 20px 10px;
    margin: auto;
    border: none;
    background-color: #FFE6E6;
    border-radius: 20px;
}

/*=========　検索結果　=========*/

.result {
    width: 100%;
    background-color: lightyellow;
    font-size: 1.5em;
    font-weight: bolder;
    text-align: center;
}

@media screen and (max-width:480px) {
    .result {
    width: 100%;
    background-color: lightyellow;
    font-size: 1.2em;
    font-weight: bolder;
    text-align: center;
}
}

.result_text {
    font-size:  1.0em;
}

.result_reco {
    display: block;
    margin-top: 0px;
}

.result_reco_box01{
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 220px;
    height: 150px;
    position: relative;
    bottom: 0px;
    left: 0px;
    }


.result_reco_box02 {
    
    border: 3px solid #EE7891;
    border-radius: 10px;
    padding: 20px;
    vertical-align: middle;
    margin: 0px;
}

.under_p {
    margin: auto;
    vertical-align: middle;
    font-size: 20px;
    font-weight: bolder;
}

.result_reco_box02 li {
	background: url(../img/asset/check.png) left 0px top 7px no-repeat;	line-height: px;
	background-size: 25px;
	padding-left: 30px;
}

@media screen and (max-width:480px) {
    .result_reco_box01{
    background-image: url(../img/asset/change_point_illust01.webp);
    background-size: 100%;
    background-repeat: no-repeat;
    width: 220px;
    height: 100px;
    position: relative;
    bottom: -10px;
    left: 0px;
    }

    .result_reco_box02 {
    display: flex;
    border: 1px solid #EE7891;
    border-radius: 10px;
    font-weight: bolder;
    font-size: 15px;
    padding: 5px;
    vertical-align: middle;
    margin: 0px;
}
    
    .under_p {
    margin: auto;
    vertical-align: middle;
    font-size: 13px;
    font-weight: bolder;
}
    
    .result_reco_box02 li {
	background: url(../img/asset/point_check_icon.gif) left 0px top 5px no-repeat;	line-height: px;
	background-size: 16px;
	padding-left: 20px;
}
}
/*=========　フッター　=========*/

.footer {
 color: white;
 background: #f3982d;
 text-align: center;
 padding: 30px;
 margin-top: 30px;
 font-weight: bolder;
margin-right: calc(50% - 50vw);
margin-left: calc(50% - 50vw);
}
.footer a {
 color: white;
 text-decoration: none;
}
.footer a:hover {
 text-decoration: underline;
}
.footer .menu {
 margin: 0;
 padding: 0;
 list-style: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
}

.footer .menu li {
 margin: 0;
 padding: 0 20px;
}

.menu li::before {
   content: "｜";
   padding-right: 30px;
   color: white;
}

.menu .after_line ::after {
    content: "｜";
    padding: 0 30px 0;
}

.footer .copyright {
 margin: 0;
 padding: 20px 0 0 0;
}

@media screen and (max-width:480px) {
.footer .menu {
 margin: 0;
 padding: 0;
 display: block;
}
.footer .menu li {
 margin: 0 0 10px 0;
 padding: 0 20px;
}
.menu li::before {
    content: "";
    padding: 0;
}

.menu .after_line ::after {
    content: "\A";
    padding: 0;
}
}

/*ローディング
------------------------------------------*/
#re-load {
    text-align: center;
    justify-content: center;
    display: flex;
    padding: 50px 50px;
    background-color: white;
}

#re-load-in {
    padding: inherit;
}

#re-load-logo img {
    width: 50%;
}

#re-load-text {
    font-size: 2vmin;
}

#re-load-title {
    padding: 10px 10px;
    font-size: 3vmin;

}

#re-load-link span{
    font-size: 2vmin;
    color: blue;
    text-decoration:underline;
}

.loader {
  margin: 100px auto;
  font-size: 25px;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  position: relative;
  text-indent: -9999em;
  -webkit-animation: load5 1.1s infinite ease;
  animation: load5 1.1s infinite ease;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}
@-webkit-keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #53ad5c, 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.5), -1.8em -1.8em 0 0em rgba(83,173,92, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.7), 1.8em -1.8em 0 0em #53ad5c, 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.5), 1.8em -1.8em 0 0em rgba(83,173,92, 0.7), 2.5em 0em 0 0em #53ad5c, 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.5), 2.5em 0em 0 0em rgba(83,173,92, 0.7), 1.75em 1.75em 0 0em #53ad5c, 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.5), 1.75em 1.75em 0 0em rgba(83,173,92, 0.7), 0em 2.5em 0 0em #53ad5c, -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.5), 0em 2.5em 0 0em rgba(83,173,92, 0.7), -1.8em 1.8em 0 0em #53ad5c, -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.5), -1.8em 1.8em 0 0em rgba(83,173,92, 0.7), -2.6em 0em 0 0em #53ad5c, -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.5), -2.6em 0em 0 0em rgba(83,173,92, 0.7), -1.8em -1.8em 0 0em #53ad5c;
  }
}
@keyframes load5 {
  0%,
  100% {
    box-shadow: 0em -2.6em 0em 0em #53ad5c, 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.5), -1.8em -1.8em 0 0em rgba(83,173,92, 0.7);
  }
  12.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.7), 1.8em -1.8em 0 0em #53ad5c, 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.5);
  }
  25% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.5), 1.8em -1.8em 0 0em rgba(83,173,92, 0.7), 2.5em 0em 0 0em #53ad5c, 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  37.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.5), 2.5em 0em 0 0em rgba(83,173,92, 0.7), 1.75em 1.75em 0 0em #53ad5c, 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  50% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.5), 1.75em 1.75em 0 0em rgba(83,173,92, 0.7), 0em 2.5em 0 0em #53ad5c, -1.8em 1.8em 0 0em rgba(83,173,92, 0.2), -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  62.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.5), 0em 2.5em 0 0em rgba(83,173,92, 0.7), -1.8em 1.8em 0 0em #53ad5c, -2.6em 0em 0 0em rgba(83,173,92, 0.2), -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  75% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.5), -1.8em 1.8em 0 0em rgba(83,173,92, 0.7), -2.6em 0em 0 0em #53ad5c, -1.8em -1.8em 0 0em rgba(83,173,92, 0.2);
  }
  87.5% {
    box-shadow: 0em -2.6em 0em 0em rgba(83,173,92, 0.2), 1.8em -1.8em 0 0em rgba(83,173,92, 0.2), 2.5em 0em 0 0em rgba(83,173,92, 0.2), 1.75em 1.75em 0 0em rgba(83,173,92, 0.2), 0em 2.5em 0 0em rgba(83,173,92, 0.2), -1.8em 1.8em 0 0em rgba(83,173,92, 0.5), -2.6em 0em 0 0em rgba(83,173,92, 0.7), -1.8em -1.8em 0 0em #53ad5c;
  }
}