@charset 'uft-8';
@media screen and (max-width : 768px) {
    /* device specific */
    .only_pc { display: none !important; }
    .only_sp { display: block !important; }
    /* ------------ */

    .fixed_container {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
				background:#ffffff;
    }

    .category {
        min-width: 91px;
    }

#toTop {
    bottom: 99px;
    padding: 5%;
    text-align: right;
}
#toTop img {
	width: 75%;
}

.section_breadcrumb {
	display:block;
	height: 46px;
	padding-top: 13px;
	overflow:hidden;
}

.pankuzu{
	width:100%;
    overflow-x: scroll;
		height:60px;
}
.pankuzu ol{
    list-style: none;
    display: table;
    padding: 0 15px;
}
.pankuzu ol li {
    display: table-cell !important;
    white-space: nowrap;
    vertical-align: middle;
		float:none !important;
		padding-right:4px;
		line-height: 1 !important;
}

/* ------------------------------------------------------------------------------------------
*
    .section_category
*
------------------------------------------------------------------------------------------ */
    .section h2.image_title {
        margin-bottom: 26px;
    }

    .section h2.image_title img { height: 30px; }

    .section h2.image_title .jp {
        font-size: 12px;
        margin-top: 7px;
    }

    .section_category {
        padding-top: 50px;
        padding-bottom: 0;
        background-size: auto 9px;
        background-color: #FFFFFF;
    }

/* ------------------------------------------------------------------------------------------
*
    .section_subscribe
*
------------------------------------------------------------------------------------------ */
    .section_subscribe {
        padding: 0;
        border: none;
    }

    .section_subscribe .fixed_container {
        padding: 0;
    }

    .section_subscribe .subscribe {
        width: 100%;
        padding: 15px;
        background-color: #ededed;
    }

    .section_subscribe .subscribe .subscribe_inner {
        width: 100%;
        height: auto;
        padding: 0 13px 18px;
        background-color: #FFFFFF;
        border: 2px #FFFFFF solid;
        border-radius: 0;
    }

    .section_subscribe .subscribe .mail {
        float: none;
        font-size: 16px;
        width: auto;
        line-height: 59px;
        margin: 0 -13px;
        padding: 0 0 0 20px;
        background-position: 69px center;
    }

    .section_subscribe .subscribe .mail:after {
        top: auto;
        left: 0;
        right: 0;
        bottom: -10px;
        border-top: 15px #ededed solid;
        border-left: 143px #FFFFFF solid;
        border-right: 143px #FFFFFF solid;
        border-bottom: none;
    }

    .section_subscribe .subscribe .paragraph1 {
        font-size: 16px;
        width: 100%;
        line-height: 1.3;
        margin-bottom: 5px;
    }

    .section_subscribe .subscribe .button {

        font-size: 14px;
        font-weight: normal;
        width: 250px;
        line-height: 1.3;
        margin: 0 auto;
        padding: 6px 15px;
        background-image: url(/outdoor/common/images/subscribe_button_sp.png);
        background-size: auto 100%;
        float: none;
        clear: both;
    }

    .section_subscribe .subscribe .paragraph2 {
        font-size: 14px;
        width: 100%;
        margin-bottom: 10px;
    }

    .section_subscribe .ads { width: 100%; padding: 15px;}
    .section_subscribe .ads_inner { width: 100%; }
		.section_subscribe .ads_inner a {
    width: 100%;
    margin: 0 0 20px 0;
}
    .section_subscribe img { display: block; width: 100%; }

/* ------------------------------------------------------------------------------------------
*
    .sidebar
*
------------------------------------------------------------------------------------------ */
    .sidebar {
			float: none;
        width: auto;
        margin: 0 -15px;
        padding-top: 50px;
				clear: both;
				border-top: 3px solid #d9d9d9;
    }

    .sidebar .sb_title img {
			height: 30px;
    }

		.side.only_pc{
			display: block !important;
			position: inherit;
			width: 100%;
			height:auto;
		}
		.side.only_pc{
			display: block !important;
			position: inherit !important;
			margin: 0 !important;
			width: 100%;
			height:auto;
		}
/* ------------------------------------------------------------------------------------------
*
    .sidebar .ranking
*
------------------------------------------------------------------------------------------ */
nav{
height: 45px;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
    .sidebar .ranking {
        margin-bottom: 49px;
        padding-bottom: 28px;
        border-bottom: 2px #d9d9d9 solid;
    }

    .sidebar .ranking .sb_title {
        padding-left: 15px;
        margin-bottom: 20px;
    }

    .sidebar .ranking .sb_title span {
        font-size: 12px;
        margin-top: 6px;
    }

    .sidebar .ranking .sb_title img { height: 22px; width: auto; }

    .sidebar .ranking .sb_title::before {
        flex-shrink: 0;
        z-index: 1;
        width: 32px;
        height: 25px;
        margin-right: 8px;
        background-image: url('/outdoor/common/images/ranking/icon_ranking.png');
        background-repeat: no-repeat;
        background-size: contain;
        content: '';
    }

    .sidebar .ranking .tab_list {
       /* display: block;
        overflow: auto;*/
    -webkit-user-select: none;
    display: block;
    height: 60px;
    overflow-y: hidden;
    padding: 0;
    position: relative;
    -webkit-overflow-scrolling: touch;
    overflow-x: scroll;
		    }

    .sidebar .ranking .tab_list ul {
        padding-left: 15px;
        padding-right: 15px;
        white-space: nowrap;
    }

    .sidebar .ranking .tab_list ul li {
        display: inline-block;
        float: none;
        padding: 0 8px;
    }
    .sidebar .ranking .tab_list ul li:first-child { padding-left: 0; }
    .sidebar .ranking .tab_list ul li:last-child { padding-right: 0; }
    .sidebar .ranking .tab_list ul li:first-child:before { content: none; display: none; }

    .sidebar .ranking .tab_list ul li a {
        font-size: 13px;
        padding: 0 8px 5px;
        line-height: 40px;
    }

    .sidebar .ranking .tab_content {
        border: none;
    }

    .sidebar .ranking .back {
        border: none;
    }

    .sidebar .ranking .back a {
        font-size: 14px;
        font-weight: bold;
        line-height: 48px;
        padding-right: 0;
        background-position: right 23px center;
        background-size: 21px auto;
        border-radius: 10px;
        text-align: center;
    }

    .sidebar .campaign {
			display: block;
			width: 100%;
    }

    .sidebar .campaign .sb_title {
        margin-bottom: 12px;
    }

    .sidebar .campaign .inner {
        padding-top: 0;
        padding-bottom: 50px;
        border: none;
    }

    .sidebar .campaign .gift {
        font-size: 16px;
        font-weight: bold;
        text-align: center;
    }

    .sidebar .campaign .description { margin-bottom: 15px; }

    .sidebar .campaign .deadline {
        font-size: 16px;
        line-height: 1.35
    }

    /* ------------------------------------------------------------------------------------------
*
    .sidebar .popular_tags
*
------------------------------------------------------------------------------------------ */

.sidebar .popular_tags {
    margin-bottom: 50px;
    overflow: visible;
}
.sidebar .popular_tags .sb_title_inner {
    padding-left: 15px;
    margin-bottom: 8px;
}
.sidebar .popular_tags .sb_title_inner::before {
    top: 3px;
}

.sidebar .popular_tags .tab_content {
    width: 100%;
    padding: 14px 14px 0;
    margin-top: 0;
}
.sidebar .popular_tags li {
    margin: 0 9px 14px 0;
}
.sidebar .popular_tags li a {
    font-size: 13px;
    padding: 3.5px 11.5px 3.5px 8.5px;
    white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------
*
    .recommend
*
------------------------------------------------------------------------------------------ */

    /* 旧データここから */
    .section_recommend {
        margin-top: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        background: none !important;
    }
    .recommend {
        padding: 35px 15px 30px;
        margin: 0 -15px;
        background-image: url(/outdoor/common/images/recommend/recommend_bg.png);
        background-repeat: repeat-X;
        background-position: center top;
        background-size: auto 4px;
        background-color: #f5f5f5;
        border-bottom: 2px #d9d9d9 solid;
        clear: both;
    }
    .recommend ul {
        margin: 0 -7px 0 -8px;
    }
    .recommend ul li {
        width: 50%;
        padding: 0 7px 19px 8px;
    }

    .recommend ul li .caption {
        font-size: 14px;
        line-height: 1.25;
        margin-bottom: 6px;
				width:100%;
    }
    .recommend h2.image_title .en {
        font-size: 25px;
        text-transform: uppercase;
				font-weight: bold;
    }
    .recommend h2.image_title .jp {
        font-size: 13px;
        font-weight: bold;
    }
    .recommend .banner {
        margin: 0 0 40px 0;
    }
    /* 旧データここまで */

    /* ----------------------------- レコメンド後 ----------------------------- */

    #recome{
        margin-top: 0;
        padding: 25px 15px 10px;
        background-size: auto 4px;
    }

/* ------------------------------------------------------------------------------------------
*
    #contents_campaign
*
------------------------------------------------------------------------------------------ */

    #contents_campaign_sp{
        display: block !important;
        padding: 0 15px 45px;
    }

    #contents_campaign_sp img{
       width: 100%;
    }

    #contents_campaign_pc{
    display:none !important;
    }


/* ------------------------------------------------------------------------------------------
*
    .hpopular_tags
*
------------------------------------------------------------------------------------------ */
.hpopular_tags {
    display: block;
    margin-top: 4px;
}
.hpopular_tags_container {
    padding: 0 14px;
    border-top: 1px solid #d9d9d9;
    border-bottom: 1px solid #d9d9d9;
}
.hpopular_tags_list {
    display: flex;
    flex-wrap: wrap;
}
.hpopular_tags_item {
    width: 33.3%;
}
.hpopular_tags_item:nth-child(n + 4) {
    border-top: 1px solid #d9d9d9;
}
.hpopular_tags_item a {
    display: block;
    padding: 8px 0;
    color: #000;
    font-size: 12px;
    font-weight: bold;
}
.hpopular_tags_item span {
    display: block;
    padding: 3.5px 0;
    border-right: 1px solid #d9d9d9;
}
.hpopular_tags_item:nth-child(3n) span {
    border: none;
}


/* ------------------------------------------------------------------------------------------
*
    .section_information
*
------------------------------------------------------------------------------------------ */


    .hsection_information_container {
            width: 100%;
        }

    .hsection_information .hinformation_box {
        padding:30px 30px;
        margin:10px 15px 20px 15px;
    }

    .hsection_information .hinformation_box .hinformation_title {
        font-size:14px;
    }


    .hsection_information .hinformation_box .hinformation_txt {
        font-size:12px;
    }


    /* ------------------------------------------------------------------------------------------
    *
        .contents_ttl
    *
    ------------------------------------------------------------------------------------------ */

    .contents_ttl{
        margin-bottom: 26px;
        padding-left: 0;
        font-size: 12px;
        line-height: 1;
        text-align: left;
    }

    .contents_ttl img {
        width: 145px;
    }

/* --------------------------------------------------------------------------------
*
    .subscribe_newsletter_banner
*
-------------------------------------------------------------------------------- */

.subscribe_newsletter_banner {
    margin: 0 auto 50px;
        width: calc(100% - 30px);
}

    /* ------------------------------------------------------------------------------------------
    *
        メルマガ登録
    *
    ------------------------------------------------------------------------------------------ */

    .subscribe_newsletter{
        padding: 20px 0 40px 0;
    }
    .subscribe_newsletter_inner{
        padding: 30px 15px;
        width: calc(100% - 30px);
    }
    .subscribe_newsletter_header{
        display: block;
        margin-bottom: 20px;
    }
    .subscribe_newsletter_header_info{
        margin-right: 0;
        width: 100%;
    }
    .subscribe_newsletter_header_info_bar{
        flex-direction: column;
        margin-bottom: 14px;
        padding-bottom: 10px;
        text-align: center;
    }
    .subscribe_newsletter_header_info_bar:before{
        height: 3px;
        background-size: 8px 3px;
    }
    .subscribe_newsletter_header_info_bar_links {
        gap: 6px;
    }
    .subscribe_newsletter_header_info_bar_link {
        width: 36px;
    }
    .subscribe_newsletter_header_info_bar_link.subscribe_newsletter_header_info_bar_link--mail > img {
        width: 22px;
    }
    .subscribe_newsletter_header_info_bar_link.subscribe_newsletter_header_info_bar_link--x > img {
        width: 19px;
    }
    .subscribe_newsletter_header_info_bar_ttl{
        padding: 0;
        margin-top: 8px;
        font-size: 26px;
        line-height: calc(65 / 52);
    }
    .subscribe_newsletter_header_info_bar_ttl:before{
        top: -53px;
        right: 0;
        margin: auto;
        width: 44px;
        height: 44px;
        background-size: 21px auto;
        transform: translate(0, 0);
    }
    .subscribe_newsletter_header_info_txt{
        margin-bottom: 16px;
        font-size: 12px;
        line-height: 19px;
    }
    .subscribe_newsletter_main_links {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .subscribe_newsletter_main_link {
        gap: 10px;
        height: 50px;
        border-radius: 10px;
    }

    .subscribe_newsletter_main_link.subscribe_newsletter_main_link--mail .subscribe_newsletter_main_link_icon {
        width: 29px;
    }

    .subscribe_newsletter_main_link.subscribe_newsletter_main_link--x .subscribe_newsletter_main_link_icon {
        width: 24px;
    }

    .subscribe_newsletter_main_link_text {
        font-size: 16px;
    }

    .subscribe_newsletter_main_link_option {
        margin-top: 8px;
        text-align: center;
    }
    .subscribe_newsletter_main_catch{
        margin-bottom: 25px;
        padding: 12px 15px;
        font-size: 14px;
        line-height: 20px;
    }
    .subscribe_newsletter_main_catch_line{
        padding-bottom: 3px;
    }
    /* .subscribe_newsletter_header_info_img{
        margin-bottom: 25px;
    }
    .subscribe_newsletter_header_info_img img{
        width: 100%;
        height: auto;
    }
    .subscribe_newsletter_header_info_img a{
        position: relative;
        display: block;
    }
    .subscribe_newsletter_header_info_img_popup{
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        bottom: 16px;
        right: 16px;
        width: 83px;
        height: 83px;
        background: #000;
        border-radius: 50%;
        z-index: 5;
    }
    .subscribe_newsletter_header_info_img_popup_txt{
        padding-bottom: 16px;
        color: #fff;
        font-size: 10px;
        line-height: 14px;
        text-align: center;
        font-weight: bold;
        background: url(../images/newsletter/newsletter_icon_plus_wt.png) center bottom no-repeat;
        background-size: 13px auto;
    }
    .subscribe_newsletter_header_info_btn{
        padding: 14px;
    }
    .subscribe_newsletter_header_info_btn span{
        padding-left: 28px;
        font-size: 14px;
        line-height: 24px;
        background-size: 22px auto;
    }
    .subscribe_newsletter_main_info{
        display: block;
    }
    .subscribe_newsletter_main_info_ttl{
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 10px;
        margin-bottom: 16px;
        width: 100%;
        border-right: 0;
        border-bottom: 1px dashed #e6e6e6;
    }
    .subscribe_newsletter_main_info_ttl_label{
        margin-bottom: 0;
        margin-right: 5px;
        padding: 0 10px;
        font-size: 10px;
        line-height: 14px;
        border-radius: 8px;
        transform: translate(-15px,0);
    }
    .subscribe_newsletter_main_info_ttl_txt{
        font-size: 14px;
        line-height: 1;
        transform: translate(-15px,0);
    }
    .subscribe_newsletter_main_info_content{
        padding-left: 0;
        width: 100%;
    }
    .subscribe_newsletter_main_info_content_coming{
        margin-bottom: 12px;
        padding-left: 109px;
        font-size: 11px;
        line-height: 17px;
        background-size: 100px auto;
    }
    .subscribe_newsletter_main_info_content_list{
        margin-bottom: 4px;
    }
    .subscribe_newsletter_main_info_content_list li{
        padding-left: 12px;
        font-size: 12px;
        line-height: 22px;
    }
    .subscribe_newsletter_main_info_content_list li:after{
        width: 7px;
        height: 7px;
    }
    .subscribe_newsletter_main_info_content_attention{
        margin-left: 1em;
        text-indent: -1em;
        font-size: 11px;
        line-height: 18px;
    }
    .subscribe_newsletter_modal_sample{
        padding: 60px 16px 35px 16px;
    }
    .subscribe_newsletter_modal_sample_txt{
        margin-bottom: 25px;
        font-size: 9px;
        line-height: 14px;
    }
    .subscribe_newsletter_modal_sample_btm{
        width: 100%;
        height: 60px;
    } */
    #cboxClose{
        top: 16px;
        right: 16px;
        width: 26px;
        height: 26px;
        background-size: 26px auto;
    }
    #cboxClose:hover{opacity: 1;}
    #cboxClose2{
        padding: 13px 0;
        font-size: 14px;
        line-height: 24px;
    }
    #cboxClose2 span{
        padding-left: 20px;
        background-size: 12px auto;
    }

    /**
     * 各詳細ページに表示のバナーエリア
     */
    .section_banners {
        padding-top: 0;
    }
    .section_banners--terms {
        padding-bottom: 35px;
    }
    .section_banners--autocamp {
        padding-bottom: 20px;
    }
    .section_banners--adventure {
        padding-bottom: 35px;
    }
    .section_banners--constellation {
        padding-bottom: 20px;
    }
    .section_banners--recipe {
        padding-bottom: 20px;
    }
    .category-top__link {
        border-radius: 0;
    }
    .section_banners__category-top {
        width: 100%;
        padding: 0;
    }
    .link-text__explanation {
        font-size: 3.75vw;
        margin-bottom: 8px;
    }
    .link-text__title {
        font-size: 6.09375vw;
        display: inline-block;
    }
    .link-text__btn {
        width: 19.3125vw;
        height: 5.8vw;
        border-radius: 1.5625vw;
        font-size: 3vw;
        padding: 0 2.48125vw 0 3.025vw;
        margin-left: 4vw;
        margin-bottom\0: 0;
        display: inline-flex;
        vertical-align: 0.7vw;
    }
    .link-text__btn--side {
        margin-top: 0;
        margin-left: 4vw;
    }
    .link-text__btn::after {
        content: '';
        height: 1.5625vw;
        width: 1.09375vw;
    }
    .category-top__bg {
        max-width: 100%;
    }
    .category-top--autocamp .link-text__title {
        line-height: 1.3em;
    }

    /**
     * 各一覧・詳細ページに表示のカテゴリタグ
     */
    .page-category-tags {}

    .page-category-tags__lists {
        margin-right: 0 !important;
    }

    .page-category-tags__list {
        margin-right: 9px !important;
        margin: 3px 9px 3px 0 !important;
    }

    .page-category-tags__link {
        text-indent: 0 !important;
        font-size: 13px !important;
        padding: 5px 13px 3px 9px !important;
    }

    /**
     * page-category-tags-wrap
     */
    .page-category-tags-wrap--type-c-head .page-category-tags {
        margin-bottom: 20px;
    }

    .page-category-tags-wrap--type-c-head--n-margin-top .page-category-tags {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .page-category-tags-wrap--type-c-body .page-category-tags {
        margin-top: 20px;
        padding-left: 30px;
    }

    .page-category-tags-wrap--type-c-body .page-category-tags::before {
        width: 20px;
        height: 21px;
    }

    .page-category-tags-wrap--type-b-head .page-category-tags {
        margin-bottom: 20px;
    }

    .page-category-tags-wrap--type-b-head--n-margin-top .page-category-tags {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .page-category-tags-wrap--type-b-body .page-category-tags {
        margin-top: 20px;
        padding-left: 30px;
    }

    .page-category-tags-wrap--type-b-body .page-category-tags::before {
        width: 20px;
        height: 21px;
    }

    .page-category-tags-wrap--type-a-head .page-category-tags {
        margin-bottom: 20px;
    }

    .page-category-tags-wrap--type-a-head--n-margin-top .page-category-tags {
        margin-top: 0;
        margin-bottom: 20px;
    }

    .page-category-tags-wrap--type-a-head--n-margin-bottom {
        padding: 22px 15px 0;
        margin: 0 auto;
        width: 100%;
        position: relative;
    }

    .page-category-tags-wrap--type-a-head--n-margin-bottom .page-category-tags {
        position: relative;
        top: 0;
        margin-top: 0;
    }

    .page-category-tags-wrap--type-a-body-sc {
        padding: 0 15px 0;
        width: 100%;
    }

    .page-category-tags-wrap--type-a-head--margin-top .page-category-tags {
        margin-top: 0;
    }

    .page-category-tags-wrap--type-a-body .page-category-tags {
        padding-left: 30px;
        margin-top: 20px;
        margin-bottom: 20px;
    }
    .page-category-tags-wrap--type-a-body .page-category-tags::before {
        width: 20px;
        height: 21px;
    }


    /* ------------------------------------------------------------------------------------------
    *
        Honda ASOBI BASE
    *
    ------------------------------------------------------------------------------------------ */
    .related-site__inner {
        width: calc(100% - 30px);
        padding: 0 0 50px;
    }

    .related-site__heading {
        font-size: 14px;
        line-height: 1.5;
    }

    .related-site__sub-heading {
        font-size: 18px;
    }

    /* ------------------------------------------------
        202306追加
    --------------------------------------------------- */

    #footer-cp.campaignbanner {
        width: calc(100% - 30px);
				margin: 10px auto 60px auto;
    }

    #footer-cp.campaignbanner img {
        width: 100%;
    }

    /* ------------------------------------------------
        202306追加ここまで
    --------------------------------------------------- */

    .hab__header {
        margin-top: 10px;
    }

    .hab__heading {
        width: 289.5px;
        margin: 0 auto;
    }

    .hab__heading img {
        width: 100%;
    }

    .hab__header-text {
        margin-top: 2px;
        font-size: 18px;
    }

    .hab__list {
        display: block;
        margin-top: 24px;
    }

    .hab__item {
        width: 100%;
    }

    .hab__item::before {
        width: 70px;
        height: 70px;
    }

    .hab__item + .hab__item {
        margin-top: 16px;
    }

    .hab__item-textarea {
        padding: 14px 14px 25px;
    }

    .hab__item-heading {
        font-size: 16px;
        line-height: calc(48 / 32);
    }

    .hab__item-tags {
        margin-top: 8px;
    }

    .hab__item-tag {
        padding: 4px 5px;
        font-size: 10px;
    }

    .hab__btn {
        width: 100%;
        padding: 17px 0;
        margin-top: 15px;
        font-size: 16px;
        border-radius: 1.5px;
    }

    .hab__btn-icon {
        top: calc(50% - 7px);
        right: 12%;
        width: 13px;
        height: 13px;
    }

    .hab__btn-icon::before {
        width: 3px;
        height: 3px;
        border-width: 1px;
    }

    /* ------------------------------------------------------------------------------------------
    *
        関連するHondaのコミュニティ/サービス
    *
    ------------------------------------------------------------------------------------------ */
    .related-service a:hover {
        opacity: 1;
    }

    .related-service__inner {
        width: 100%;
        padding: 40px 15px 60px;
    }

    .related-service__ttl {
        font-size: 16px;
    }

    .related-service__list {
        grid-template-columns: 1fr;
        gap: 20px;
        margin-top: 20px;
    }

    .related-service__list > li {
        grid-template-columns: 93px 1fr;
        padding-top: 6px;
        padding-right: 14px;
        padding-bottom: 20px;
        border-radius: 6px;
    }

    .related-service__img {
        grid-row: 1 / 2;
    }

    .related-service__text-wrap {
        align-self: start;
        padding: 14px 0;
    }

    .related-service__text {
        font-size: 14px;
        line-height: calc(20 / 14);
        text-align: left;
    }

    .related-service__btn-wrap {
        grid-column: 1 / 3;
        padding-left: 14px;
        margin-top: 4px;
    }
}