@charset "UTF-8";

/* Contents Style*/

/* ================================================================================================== */
/* PC（共通）のスタイル */
/* ================================================================================================== */


/*==========================================================================
	PC mypage　
==========================================================================*/

main .main_inner .main_image {
    width: 100%;
    float: left;
    overflow: hidden;
    position: relative;
    height: 500px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    transition: .2s;
}

main .main_inner .main_image .grade {
    width: 100%;
    height: 100%;
    min-height: 100%;
    float: left;
    margin-top: 0px;
    margin-bottom: 0px;
    background-image: -webkit-linear-gradient(0deg,rgba(0,0,0,0.50) 0.40%,rgba(0,0,0,0.00) 60%);
    background-image: -moz-linear-gradient(0deg,rgba(0,0,0,0.50) 0.40%,rgba(0,0,0,0.00) 60%);
    background-image: -o-linear-gradient(0deg,rgba(0,0,0,0.50) 0.40%,rgba(0,0,0,0.00) 60%);
    background-image: linear-gradient(90deg,rgba(0,0,0,0.50) 0.40%,rgba(0,0,0,0.00) 60%);
    position: relative;
}

main .main_inner .main_image > main .inner .main_image .grad {
    height: auto;
}

main .main_inner .main_image .one-comment {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 45%;
    color: #FFFFFF;
    font-size: 2.5vw;
	line-height: normal;
    left: 0px;
    font-family: 'Noto Serif SC', serif;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.50);
}



/*--PC シルエット種類別----------------------------------------*/

main .main_inner .main_image .sil_01 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_01.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_02 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_02.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_03 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_03.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_04 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_04.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_05 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_05.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_06 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_06.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_07 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_07.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_08 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_08.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}

main .main_inner .main_image .sil_09 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/sil_09.png);
    background-repeat: no-repeat;
    background-position: right -20px bottom -35px;
    background-size: 300px auto;
}


/*--PC クラウン種類別----------------------------------------*/

main .main_inner .main_image .grade .crown_2016 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2016champ.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_2017 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2017champ.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_2018 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2018champ.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}


main .main_inner .main_image .grade .crown_2019 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2019champ.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}


main .main_inner .main_image .grade .crown_2021 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2021champ.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_2022a {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2022champ_suzuka.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_2022b {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2022champ_ose.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_2023 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url("../images/crown_2023champ_kuma.png");
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_2024 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url("../images/crown_2024champ_itujin.png");
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_legend {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_legend.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_podium {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_podium.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}


main .main_inner .main_image .grade .crown_super_legend {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_super_legend.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}

main .main_inner .main_image .grade .crown_dh {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_dh.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}


main .main_inner .main_image .grade .crown_super_legend_completer {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_super_legend_completer.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 300px auto;
}


.head-box {
	
    width: 100%;
    float: left;
    margin-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
	
	
}


.coution {
    text-align: left;
    background-color: #2D2D2D;
	border-top-left-radius: 10px;
	border-top-right-radius: 10px;
    margin-top: 10px;
    padding: 20px;
    color: #FFFFFF;
    font-size: 20px;
    line-height: 140%;
}
	
.coution-body {
    text-align: left;
    background-color: #2D2D2D;
	border-bottom-left-radius: 10px;
	border-bottom-right-radius: 10px;
    margin-bottom: 10px;
    padding: 20px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 140%;
}

/*-------------------------------------------------------*/

/*---------------------------------------------------------------
	PC マイ情報
----------------------------------------------------------------*/

.user_state_box {
    width: 100%;
    float: left;
    position: relative;
}

.user_state_box .upper {
    width: 100%;
    float: left;
    height: 100px;
    background-color: #000000;
    vertical-align: middle;
}

.user_state_box .upper .badge {
    width: 160px;
    height: 200px;
    background-color: #000000;
    position: absolute;
    padding: 10px;
    top: 0px;
    left: 0px;
    display: block;
    border-bottom-right-radius: 10px;
}

.user_state_box .upper .badge .badge_01 {
    width: 160px;
    height: 160px;
    position: absolute;
    top: -35px;
    left: 0px;
    display: block;
				padding: 0px 0px;;
}

.user_state_box .upper .badge .badge_02 {
    width: 85px;
    height: 85px;
    position: absolute;
    top: 120px;
    left: 0px;
    display: block;
				padding: 0px 0px 10px 10px;
}

.user_state_box .upper .badge .badge_03 {
    width: 85px;
    height: 85px;
    position: absolute;
    top: 120px;
    left: 80px;
    display: block;
				padding: 0px 10px 10px 0px;
}

.user_state_box .upper .badge a {
    width: 180px;
    height: 180px;
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
}

.user_state_box .upper .badge img {
    width: 100%;
}

.user_state_box .upper .user_name {
    font-family: 'Anton', sans-serif;
    font-size: 46px;
    color: #FFFFFF;
    line-height: 120%;
    margin-left: 180px;
    transition: .2s;
}

/*2つ名*/
.user_state_box .upper .aka {
    font-size: 15px;
    color: #FFFFFF;
    line-height: 120%;
				margin-top: 5px;
    margin-left: 180px;
    transition: .2s;
				font-weight: bold;
}

/*ショップ名*/
.user_state_box .upper .shop_name {
				font-family: 'Anton', sans-serif;
    font-size: 16px;
    color: #C2C2C2;
    line-height: 110%;
    margin-left: 180px;
    transition: .2s;
}

.user_state_box .middle {
    width: 100%;
    float: left;
    height: 20px;
    background-color: #000000;
    vertical-align: middle;
}

.user_state_box .middle .shop_name {
    font-family: 'Anton', sans-serif;
    font-size: 16px;
    color: #C2C2C2;
    margin-left: 180px;
    transition: .2s;
}

/*---------------------------------------------------------------
	PC 踏破ランク・ポイント
----------------------------------------------------------------*/

.user_state_box .traverse {
    width: 100%;
    position: absolute;
    top: 20px;
    right: 5px;
    display: inline-block;
    color: #FFFFFF;
}

.user_state_box .traverse .trophy {
    width: 80px;
    height: 80px;
    background-image: url(../images/trophy_white.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 70px auto;
    display: block;
    float: right;
}

.user_state_box .traverse .trophy img {
    width: 100%;
}

.user_state_box .traverse .trophy a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
}

.user_state_box .traverse .state {
    position: absolute;
    top: 11px;
    right: 75px;
    display: inline-block;
    text-align: right;
    width: 100%;
}

.user_state_box .traverse .state .state_rank {
width: 100%;
    font-size: 17px;
    line-height: 120%;
    font-weight: bold;
}

.user_state_box .traverse .state .state_rank::before {
    content : "全国道の駅踏破ランキング";
    padding-right: 5px;
    font-weight: normal;
    font-size: 14px;
}

.user_state_box .traverse .state .state_rank::after {
  content : "位";
  padding-left: 5px;
  font-weight: normal;
  font-size: 13px;
}

.user_state_box .traverse .state .state_point {
width: 100%;
    font-size: 17px;
    line-height: 120%;
    font-weight: bold;
}

.user_state_box .traverse .state .state_point::before {
  content : "シーズン獲得ポイント";
  padding-right: 5px;
  font-weight: normal;
  font-size: 14px;
}
.user_state_box .traverse .state .state_point::after {
  content : "POINT";
  padding-left: 5px;
  font-weight: normal;
  font-size: 13px;
} 

.user_state_box .traverse .state .state_point {
    text-align: right;
}


.user_state_box .lower {
    width: 100%;
    float: left;
    height: 120px;
    background-color: #ffffff;
    background-image: url(../images/stamp.svg);
    background-repeat: no-repeat;
    background-position: right -15px top -30px;
    background-size: 180px 180px;
}

/*---------------------------------------------------------------
	PC 道の駅達成数・達成率
----------------------------------------------------------------*/

.user_state_box .lower .achieve_box {
    width: 100%;
    height: 90px;
    float: left;
    padding-left: 180px;
    display: inline-block;
    margin-top: 10px;
    transition: .2s;
}


.user_state_box .lower .achieve_box .michi_icon {
    width: 90px;
    height: 90px;
    float: left;
}

.user_state_box .lower .achieve_box .michi_icon img {
    width: 100%;
}

.user_state_box .lower .achieve_inner {
    float: left;
    font-family: 'Anton', sans-serif;
}

.user_state_box .lower .achieve_inner .conquer_box {
    float: left;
    padding-left: 7px;
}

.user_state_box .lower .achieve_inner .conquer_box .conquer {
    float: left;
    font-size: 60px;
    display: inline-block;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap {
    float: left;
    padding-left: 5px;
    margin-top: 2px;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap .season {
    float: left;
    color: #324496;
    font-size: 24px;
    line-height: 100%;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap .season::after {
  content : "SEASON";
  padding-left: 2px;
  font-size: 16px;
  line-height: 100%;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap .stations {
    float: left;
    clear: left;
    font-size: 27px;
    line-height: 100%;
    margin-top: 1px;
}

.user_state_box .lower .achieve_inner .rate_box {
    float: left;
    padding-left: 7px;
    clear: left;
    margin-top: 2px;
}

.user_state_box .lower .achieve_inner .rate_box .rate {
    float: left;
    font-size: 30px;
    line-height: 100%;
    display: inline-block;
    color: #324496;
}

.user_state_box .lower .achieve_inner .rate_box .rate::after {
    content : "%";
    padding-left: 2px;
    font-size: 14pt;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.user_state_box .lower .achieve_inner .rate_box .wrap {
    float: left;
    color: #324496;
    margin-left: 5px;
}

.user_state_box .lower .achieve_inner .rate_box .wrap .comp {
    float: left;
    font-size: 14px;
    line-height: 100%;
}
.user_state_box .lower .achieve_inner .rate_box .wrap .total {
    float: left;
    clear: left;
    font-size: 14px;
    line-height: 100%;
}

.user_state_box .lower .achieve_inner .rate_box .wrap .total::after {
  content : "TOTAL STATIONS";
  padding-left: 5px;
  font-size: 12px;
}

/*---------------------------------------------------------------
	PC LOG MAP
----------------------------------------------------------------*/
.log_map_img {
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
	
}

.mapimage{
	padding: 10px;
	margin-bottom: 10px;
}

/*---------------------------------------------------------------
	PC プライバシーモードの表示
----------------------------------------------------------------*/

.pmode_box {
    width: 100%;
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: #00C1FF;
    position: relative;
    overflow: hidden;
    
}
.pmode_box .privacymode_text {
    width: 100%;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 20px;
    border-left: 5px solid #FFFFFF;
   /* height: 20px;
    margin-bottom: 15px;*/
    margin-left: 10px;
    padding-left: 8px;
}

/*---------------------------------------------------------------
	PC SNS ボタンベース
----------------------------------------------------------------*/

.sns_box {
    width: 100%;
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: #C3C3C3;
    position: relative;
    overflow: hidden;
    
}

/*---------------------------------------------------------------
	PC エントリー状態の表示
----------------------------------------------------------------*/

.entry_status_box {
    width: 100%;
    float: left;
    padding: 10px 10px 10px 10px;
    background-color: #7E7E7E;
    position: relative;
    overflow: hidden; 
    
}
.entry_status_box .comment_text {
    width: 100%;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #FFFFFF;
    line-height: 20px;
    border-left: 5px solid #FFFFFF;
    margin-left: 10px;
    padding-left: 8px;
}


/*---------------------------------------------------------------
	PC 最新のスタンプリスト
----------------------------------------------------------------*/

.stamp_box {
    width: 100%;
    float: left;
    padding: 20px 10px 20px 10px;
    background-color: #EAEAEA;
    position: relative;
    overflow: hidden;
    
}

.stamp_box .new_stamp_text {
    width: 100%;
    float: left;
    font-size: 16px;
    font-weight: bold;
    color: #000000;
    line-height: 20px;
    border-left: 5px solid #C30D23;
    height: 20px;
    margin-bottom: 15px;
    margin-left: 10px;
    padding-left: 8px;
}

.stamp_box .new_stamp_list {
    width: 100%;
    float: left;
}

.stamp_box .new_stamp_list li {
    width: 50%;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}



/*--スタンプ種類別----------------------------------------*/

.stamp_box .new_stamp_list li .s_OFF_SEASON {
    background-color: #848484;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_NOCOUNT {
    background-color: #848484;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg),url(../images/nocountBg.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 30px 30px,auto 170px;
    background-position: left 10px top 30px,right -20px top -50px;
    
}


.stamp_box .new_stamp_list li .s_2016 {
    background-color: #E892F7;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2017 {
    background-color: #B192F4;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2018 {
    background-color: #8CC53F;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2019 {
    background-color: #F7931E;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2020 {
    background-color: #E1C700;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2021 {
    background-color: #DED1B1;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2022 {
    background-color: #84BCFF;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}


.stamp_box .new_stamp_list li .s_2023 {
    background-color: rgba(0,200,255,1.00);
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_2024 {
    background-color: #F4AA40;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}


.stamp_box .new_stamp_list li .s_2025 {
    background-color: #FF7AE4;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_michinoeki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_cafe {
    background-color: #C4A180;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_cafe.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_event {
    background-color: #FEE100;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_event.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_shop {
    background-color: #909090;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_shop.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_off {
    background-color: #BCBCBC;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_offroad.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}

.stamp_box .new_stamp_list li .s_zekkei {
    background-color: #72E06E;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_zekkei.svg),url(../images/fujisan.png);
    background-repeat: no-repeat,no-repeat;
    background-size: 30px 30px,auto 170px;
    background-position: left 10px top 30px,right -20px top -50px;
}


.stamp_box .new_stamp_list li .s_shiro {
    background-color: #72E06E;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_shiro.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}


.stamp_box .new_stamp_list li .s_misaki {
    background-color: #72E06E;
    width: 100%;
    height: 100px;
    border-radius: 10px;
    background-image: url(../images/icon_misaki.svg);
    background-repeat: no-repeat;
    background-size: 30px 30px;
    background-position: left 10px top 30px;
}


/*-------------------------------------------------------*/

.stamp_box .new_stamp_list li .stamp_list {
    width: 100%;
    height: 100px;
    float: left;
    padding: 10px 10px 10px 10px;
    display: block;
    position: relative;
    font-family: 'Noto Sans JP', sans-serif;
    background-image: url(../images/stamp_01.svg);
    background-repeat: no-repeat;
    background-position: right -10px top 0px;
    background-size: 120px 120px;
}

.stamp_box .new_stamp_list li .stamp_list a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

.stamp_box .new_stamp_list li:hover {
    opacity: 0.8;
}

.stamp_box .new_stamp_list li .stamp_list time {
    display: inline-block;
    float: left;
    font-size: 14px;
}

.stamp_box .new_stamp_list li .stamp_list .category {
    display: inline-block;
    clear: left;
    float: left;
    height: 30px;
    padding-left: 35px;
    padding-top: 0px;
    font-size: 15px;
    line-height: 30px;
    margin-top: 12px;
}

.stamp_box .new_stamp_list li .stamp_list .spot_name {
    display: inline-block;
    clear: left;
    float: left;
    font-size: 20px;
    margin-top: 2px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.stamp_box .new_stamp_list li .stamp_list .kiriban {
    width: 65px;
    height: 25px;
    display: inline-block;
    position: absolute;
    right: 10px;
    top: 10px;
    background-image: url(../images/kiriban.svg);
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: right top;
}

.stamp_box .new_stamp_list li .stamp_list .rank {
    color: #FFFFFF;
    font-size: 35px;
    position: absolute;
    right: 10px;
    top: 32px;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.20);
}

/*---------------------------------------------------------------
	ボタン（orange）
----------------------------------------------------------------*/

.btn-icon {
    display: inline-block;
    text-align: center;
    background-color: #eb6100;
    font-size: 16px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    padding: 12px 16px 12px 16px;
    border-radius: 5px;
    position: relative;
    -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
    -webkit-tap-highlight-color: transparent;
    transition: .2s;
}

.btn-icon::before {
    content: "";
    display: inline-block;
    width: 30px;
    height: 30px;
    background-image: url(../images/icon_btn_stamp.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 10px;
}

.btn-icon:hover {
    background-color: #F7822F;
}

.btn-icon:active {
    background-color: #eb6100;
    -webkit-box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
    box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
}


/*---------------------------------------------------------------
	ボタン（next all stamps）
----------------------------------------------------------------*/

.btn-icon-all-stamp {
    display: inline-block;
    text-align: center;
    background-color: #000;
    font-size: 14px;
    color: #FFF;
    text-decoration: none;
    font-weight: bold;
    height: 45px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    line-height: 30px;
    margin-top: 12px;
    margin-left: 10px;
    border-radius: 10px;
    position: relative;
    -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
    box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15);
    -webkit-tap-highlight-color: transparent;
    transition: .2s;
}

.btn-icon-all-stamp::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 20px;
    background-image: url(../images/icon_btn_stamp.svg);
    background-size: contain;
    background-repeat: no-repeat;
    vertical-align: middle;
    margin-right: 10px;
}

.btn-icon-all-stamp:hover {
    background-color: #F7822F;
}

.btn-icon-all-stamp:active {
    background-color: #eb6100;
    -webkit-box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
    box-shadow: inset 0px 1px 1px 1px rgba(0,0,0,0.15);
}

/* ================================================================================================== */
/* Tablet専用のスタイル */
/* ================================================================================================== */
@media only screen and (max-width: 960px) {


/*---------------------------------------------------------------
	Tablet マイページイメージ　
----------------------------------------------------------------*/

main .main_inner .main_image {
    height: 450px;
    overflow: hidden;
}


main .main_inner .main_image .one-comment {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 45%;
    color: #FFFFFF;
    font-size: 3.5vw;
    left: 0px;
    font-family: 'Noto Serif SC', serif;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.50);
}

	
	
/*--Tablet シルエット種類別----------------------------------------*/
main .main_inner .main_image .sil_01 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_02 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_03 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_04 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_05 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_06 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_07 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_08 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

main .main_inner .main_image .sil_09 {
    background-position: right -20px bottom -30px;
    background-size: 280px auto;
}

/*--Tablet クラウン種類別----------------------------------------*/
main .main_inner .main_image .grade .crown_2016 {
    width: 100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background-image: url(../images/crown_2016champ.png);
    background-repeat: no-repeat;
    background-position: left 0px bottom 0px;
    background-size: 260px auto;
}

main .main_inner .main_image .grade .crown_2017 {
    background-position: left 0px bottom 0px;
    background-size: 260px auto;
}

main .main_inner .main_image .grade .crown_2018 {
    background-position: left 0px bottom 0px;
    background-size: 260px auto;
}

main .main_inner .main_image .grade .crown_legend {
    background-position: left 0px bottom 0px;
    background-size: 260px auto;
}

main .main_inner .main_image .grade .crown_super_legend {
    background-position: left 0px bottom 0px;
    background-size: 260px auto;
}

/*-------------------------------------------------------*/

/*---------------------------------------------------------------
	Tablet マイ情報
----------------------------------------------------------------*/

.user_state_box {
    width: 100%;
    float: left;
    position: relative;
}

.user_state_box .upper {
    width: 100%;
    float: left;
    height: 95px;
    background-color: #000000;
    vertical-align: middle;
    position: relative;
}

.user_state_box .upper .badge {
    width: auto;
    height: 60px;
    background-color: #000000;
    position: absolute;
    padding: 0px;
    top: 0px;
    left: auto;
    right: 0px;
    display: block;
    border-bottom-right-radius: 0px;
}

.user_state_box .upper .badge .badge_01 {
    width: 160px;
    height: auto;
    position: relative;
    top: -65px;
    right: 0px !important;
    display: block;
				padding: 0px 0px;;
				
}

.user_state_box .upper .badge .badge_02 {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 30px;
				left: auto;
    right: 180px;
    display: block;
				padding: 0px 0px 0px 0px;
}

.user_state_box .upper .badge .badge_03 {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 30px;
    left: auto;
				right: 125px;
    display: block;
				padding: 0px 0px 0px 0px;
}

.user_state_box .upper .badge a {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    right: 0px;
    display: block;
}

.user_state_box .upper .badge img {
    width: 100%;
}



.user_state_box .upper .user_name {
    font-family: 'Anton', sans-serif;
    font-size: 45px;
    color: #FFFFFF;
    line-height: 110%;
    margin-left: 10px;
}

/*2つ名*/
.user_state_box .upper .aka {
    font-size: 15px;
    color: #FFFFFF;
    line-height: 120%;
				margin-top: 5px;
    margin-left: 10px;
    transition: .2s;
				font-weight: bold;
}

/*ショップ名*/
.user_state_box .upper .shop_name {
				font-family: 'Anton', sans-serif;
    font-size: 14px;
    color: #C2C2C2;
    line-height: 120%;
    margin-left: 10px;
    transition: .2s;
}

	
.user_state_box .middle .shop_name {
    font-family: 'Anton', sans-serif;
    font-size: 16px;
    color: #C2C2C2;
    margin-left: 10px;
}

/*---------------------------------------------------------------
	Tablet 踏破ランク・ポイント
----------------------------------------------------------------*/

.user_state_box .traverse {
    width: 100%;
    position: absolute;
    top: 190px;
    right: auto;
    left: 0px;
    display: inline-block;
    color: #000000;
    padding-left: 5px;
}

.user_state_box .traverse .trophy {
    width: 60px;
    height: 60px;
    background-image: url(../images/trophy_black.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px auto;
    display: block;
    float: left;
}

.user_state_box .traverse .trophy img {
    width: 100%;
}

.user_state_box .traverse .trophy a {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

.user_state_box .traverse .state {
    position: absolute;
    top: 11px;
    right: auto;
    left: 70px;
    display: inline-block;
    text-align: left;
    width: auto;
}

.user_state_box .traverse .state .state_rank {
    width: auto;
    font-size: 17px;
    text-align: left;
    line-height: 120%;
    font-weight: bold;
}

.user_state_box .traverse .state .state_rank::before {
    content : "全国道の駅踏破ランキング";
    padding-right: 5px;
    font-weight: normal;
    font-size: 14px;
}

.user_state_box .traverse .state .state_rank::after {
  content : "位";
  padding-left: 5px;
  font-weight: normal;
  font-size: 13px;
}

.user_state_box .traverse .state .state_point {
    width: auto;
    font-size: 17px;
    text-align: left;
    line-height: 120%;
    font-weight: bold;
}

.user_state_box .traverse .state .state_point::before {
  content : "シーズン獲得ポイント";
  padding-right: 5px;
  font-weight: normal;
  font-size: 14px;
}
.user_state_box .traverse .state .state_point::after {
  content : "POINT";
  padding-left: 5px;
  font-weight: normal;
  font-size: 13px;
} 

.user_state_box .traverse .state .state_point {
    text-align: left;
}

.user_state_box .lower {
    width: 100%;
    float: left;
    height: 180px;
    background-color: #ffffff;
    background-image: url(../images/stamp.svg);
    background-repeat: no-repeat;
    background-position: right -15px top -30px;
    background-size: 230px 230px;
}

/*---------------------------------------------------------------
	Tablet 道の駅達成数・達成率
----------------------------------------------------------------*/

.user_state_box .lower .achieve_box {
    width: 100%;
    height: 90px;
    float: left;
    padding-left: 10px;
    display: inline-block;
    margin-top: 10px;
}


.user_state_box .lower .achieve_box .michi_icon {
    width: 90px;
    height: 90px;
    float: left;
}

.user_state_box .lower .achieve_box .michi_icon img {
    width: 100%;
}

.user_state_box .lower .achieve_inner {
    float: left;
    font-family: 'Anton', sans-serif;
}

.user_state_box .lower .achieve_inner .conquer_box {
    float: left;
    padding-left: 7px;
}

.user_state_box .lower .achieve_inner .conquer_box .conquer {
    float: left;
    font-size: 58px;
    display: inline-block;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap {
    float: left;
    padding-left: 5px;
    margin-top: 2px;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap .season {
    float: left;
    color: #324496;
    font-size: 24px;
    line-height: 100%;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap .season::after {
  content : "SEASON";
  padding-left: 2px;
  font-size: 16px;
  line-height: 100%;
}

.user_state_box .lower .achieve_inner .conquer_box .wrap .stations {
    float: left;
    clear: left;
    font-size: 27px;
    line-height: 100%;
    margin-top: 1px;
}

.user_state_box .lower .achieve_inner .rate_box {
    float: left;
    padding-left: 7px;
    clear: left;
    margin-top: 2px;
}

.user_state_box .lower .achieve_inner .rate_box .rate {
    float: left;
    font-size: 30px;
    line-height: 100%;
    display: inline-block;
    color: #324496;
}

.user_state_box .lower .achieve_inner .rate_box .rate::after {
    content : "%";
    padding-left: 2px;
    font-size: 14pt;
    font-weight: bold;
    font-family: Arial, Helvetica, sans-serif;
}

.user_state_box .lower .achieve_inner .rate_box .wrap {
    float: left;
    color: #324496;
    margin-left: 5px;
}

.user_state_box .lower .achieve_inner .rate_box .wrap .comp {
    float: left;
    font-size: 14px;
    line-height: 100%;
}
.user_state_box .lower .achieve_inner .rate_box .wrap .total {
    float: left;
    clear: left;
    font-size: 14px;
    line-height: 100%;
}

.user_state_box .lower .achieve_inner .rate_box .wrap .total::after {
  content : "TOTAL STATIONS";
  padding-left: 5px;
  font-size: 12px;
}


}/* --↑Tablet 専用　終-- */

/* ================================================================================================== */
/* SP 専用のスタイル */
/* ================================================================================================== */
@media only screen and (max-width: 599px) {



/*---------------------------------------------------------------
	SP マイページイメージ　
----------------------------------------------------------------*/

main .main_inner .main_image {
    height: 380px;
    overflow: hidden;
}
	
main .main_inner .main_image .one-comment {
    width: 100%;
    height: 100%;
    display: inline-block;
    text-align: center;
    position: absolute;
    top: 45%;
    color: #FFFFFF;
    font-size: 4.8vw;
    left: 0px;
    font-family: 'Noto Serif SC', serif;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.50);
}
	

/*--SP シルエット種類別----------------------------------------*/
main .main_inner .main_image .sil_01 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_02 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_03 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_04 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_05 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_06 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_07 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_08 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

main .main_inner .main_image .sil_09 {
    background-position: right -10px bottom -18px;
    background-size: 180px auto;
}

/*-------------------------------------------------------*/

/*--SP クラウン種類別----------------------------------------*/
main .main_inner .main_image .grade .crown_2016 {
    background-position: left 0px bottom 0px;
    background-size: 220px auto;
}

main .main_inner .main_image .grade .crown_2017 {
    background-position: left 0px bottom 0px;
    background-size: 220px auto;
}

main .main_inner .main_image .grade .crown_2018 {
    background-position: left 0px bottom 0px;
    background-size: 220px auto;
}

main .main_inner .main_image .grade .crown_legend {
    background-position: left 0px bottom 0px;
    background-size: 220px auto;
}

main .main_inner .main_image .grade .crown_super_legend {
    background-position: left 0px bottom 0px;
    background-size: 220px auto;
}

/*-------------------------------------------------------*/

.user_state_box .upper {
    width: 100%;
    float: left;
    height: 100px;
    background-color: #000000;
    vertical-align: middle;
    position: relative;
}

.user_state_box .upper .badge {
    width: auto;
    height: 60px;
    background-color: #000000;
    position: absolute;
    padding: 0px;
    top: 0px;
    left: auto;
    right: 0px;
    display: block;
    border-bottom-right-radius: 0px;
}

.user_state_box .upper .badge .badge_01 {
    width: 160px;
    height: auto;
    position: relative;
    top: -65px;
    right: 0px !important;
    display: block;
				padding: 0px 0px;;
				
}

.user_state_box .upper .badge .badge_02 {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 30px;
				left: auto;
    right: 180px;
    display: block;
				padding: 0px 0px 0px 0px;
}

.user_state_box .upper .badge .badge_03 {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 30px;
    left: auto;
				right: 125px;
    display: block;
				padding: 0px 0px 0px 0px;
}

.user_state_box .upper .user_name {
    font-family: 'Anton', sans-serif;
    font-size: 8.9vmin;
    color: #FFFFFF;
    line-height: 110%;
    margin-left: 10px;
}

/*2つ名*/
.user_state_box .upper .aka {
    font-size: 2.9vmin;
    color: #FFFFFF;
    line-height: 120%;
				margin-top: 5px;
    margin-left: 10px;
    transition: .2s;
				font-weight: bold;
}

/*ショップ名*/
.user_state_box .upper .shop_name {
				font-family: 'Anton', sans-serif;
    font-size: 3.1vmin;
    color: #C2C2C2;
    line-height: 120%;
    margin-left: 10px;
    transition: .2s;
}

/*---------------------------------------------------------------
	SP 踏破ランク・ポイント
----------------------------------------------------------------*/

.user_state_box .traverse {
    width: 100%;
    position: absolute;
    top: 200px;
    right: auto;
    left: 0px;
    display: inline-block;
    color: #000000;
    padding-left: 5px;
}

.user_state_box .traverse .trophy {
    width: 60px;
    height: 60px;
    background-image: url(../images/trophy_black.svg);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 50px auto;
    display: block;
    float: left;
}

.user_state_box .traverse .trophy img {
    width: 100%;
}

.user_state_box .traverse .trophy a {
    width: 60px;
    height: 60px;
    position: absolute;
    top: 0px;
    left: 0px;
    display: block;
}

.user_state_box .traverse .state {
    position: absolute;
    top: 11px;
    right: auto;
    left: 65px;
    display: inline-block;
    text-align: left;
    width: auto;
}

.user_state_box .traverse .state .state_rank {
    width: auto;
    font-size: 16px;
    text-align: left;
    line-height: 120%;
    font-weight: bold;
}

.user_state_box .traverse .state .state_rank::before {
    content : "全国道の駅踏破ランキング";
    padding-right: 5px;
    font-weight: normal;
    font-size: 13px;
}

.user_state_box .traverse .state .state_rank::after {
  content : "位";
  padding-left: 5px;
  font-weight: normal;
  font-size: 12px;
}

.user_state_box .traverse .state .state_point {
    width: auto;
    font-size: 16px;
    text-align: left;
    line-height: 120%;
    font-weight: bold;
}

.user_state_box .traverse .state .state_point::before {
  content : "シーズン獲得ポイント";
  padding-right: 5px;
  font-weight: normal;
  font-size: 13px;
}
.user_state_box .traverse .state .state_point::after {
  content : "POINT";
  padding-left: 5px;
  font-weight: normal;
  font-size: 12px;
} 

.user_state_box .traverse .state .state_point {
    text-align: left;
}

/*---------------------------------------------------------------
	SP 最新のスタンプリスト
----------------------------------------------------------------*/


.stamp_box .new_stamp_list li {
    width: 100%;
    float: left;
    padding-left: 10px;
    padding-right: 10px;
    margin-bottom: 10px;
}

/*---------------------------------------------------------------
	ボタン（orange）
----------------------------------------------------------------*/

.btn-icon {
    width: 80%;
    
}



}/* --↑SP 専用　終-- */