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

.sp-headerInner,
.tablet-only,
.tablet-than{ display: none; }


/*
-------------------*/
@media screen and (max-width: 1350px) {
  /* -- -- */
  .foot_link { }
  .foot_link ul{ display: flex; margin-left: -40px; padding-right: 25px; }
  .foot_link ul li { margin-right: 0px; margin-left: 40px; }
  .copyright { margin-right: 90px; font-size: 0.8em;}

}



/*

-------------------*/
@media screen and (max-width: 1300px) {

  /* -- INDEX -- */
      .popup_lineup_sec02_Box { width: 98vw; padding: 100px 4.5% 0; }
        .popup_lineup_sec02_Box ul li { width: 30%; margin: 0 1.665% 0; margin-bottom: 100px; }
  /* -- LINEUP -- */
    .LineupPageContainer ul li { width: 30%; margin: 0 1.665% 0; margin-bottom: 100px; }
}



/*
-------------------*/
@media screen and (max-width: 1180px) {
    /* -- -- */
    .wrap { padding-right: 40px; padding-left: 40px;  box-sizing: border-box;}

    .cart-nav-wrap{ width: 120%; left: -10%;}
    .menuInner ul li a { padding: 10px 25px ; }
    .foot_nav ul li a { padding: 10px 25px ; }
    .foot_nav ul#foot_menu { display: flex; justify-content: flex-start; }
    .foot_sns { padding-left: 10px; padding-right: 10px;}
    .foot_bottom.flex { display: block;}


    /* -- INDEX -- */
    .thumb-lineup_sec01_Inner{  padding-right: 40px; padding-left: 40px;  box-sizing: border-box; margin-top: -20px; }
    .lineup_sec02_Inner { width: 90%; margin: 0 auto;}
    .lineup_sec02_list ul li { width: 45%; }
    .howto_mainvisual .howto_mainvisual_img .howto_posi02 { position: absolute; bottom: -40px; right: -20px;}

    /* -- COLUMN -- */
    .columnSingleMain{ margin-left: -40px; margin-right: -40px; padding: 0 40px;}
    .column_Single_about-left{ width: 63%; -webkit-width: calc(100% - 335px); width: calc(100% - 335px); margin-left: 0px;  }
}


/*
-------------------*/
@media screen and (max-width: 1080px) {
    .headerInner .logo { width: 164px; }
    .headerInner .nav { -webkit-width: calc(100% - 170px); -moz-width: calc(100% - 170px); width: calc(100% - 170px); margin-top: 0px;}
    .menuInner ul li a { padding: 10px 18px ; }
    .foot_nav ul li a { padding: 10px 35px ; }
    .foot_sns { width: 180px; padding:0px; text-align: left; }
    .foot_sns ul { display: flex; justify-content:flex-start; padding-top: 40px; }
    .foot_sns ul li a {margin-right: 40px;}
    .foot_sns ul li .fa { font-size: 30px;}
    .copyright { margin-top: 40px; }

    /* -- INDEX -- */
    .lineup_sec01_Box_img .sec01_mainimg { width: 550px; width: 50%;}
    /* -- COLUMN -- */
    .columnSingleMain{ min-height: 500px}
}

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

  .sp-headerInner {
    height: auto;
    display: block;
  }

  .sp-headerInner .logo {
    left: 20px;
    line-height: 1;
    padding-left: 0;
    position: absolute;
    top: 14px;
    width: 120px;
  }

  .sp-headerInner .sp-head-nav,
  .sp-headerInner .nav {
    display: none;
  }
}

/*
-------------------*/
@media screen and (max-width: 960px) {
    #Container.navfixed{ padding-top: 80px;}

    #headerContainer { width: 100%; background: #fff; position: fixed; top:0; left: 0; z-index: 9989; }
    .foot_nav ul li a { padding: 10px 25px ; }
    .indexPage #Container.navfixed{ padding-top: 0px;}
    .foot_link ul{ display: flex; margin-left: 0px; padding-right: 0px; }
    .foot_link ul li { margin-right: 50px; margin-left: 0px; }

    #pagetop {width: 80px;}

    /* -- INDEX -- */

    .ind_mainvisual_Container { height: 100vh; -webkit-height: calc(100vh - 80px); height: calc(100vh - 80px); }

    #About { padding: 100px 0 0;}
    .aboutContainer .about_leadbox .mark_gd { position: static; right: auto; bottom: auto; margin-top: 20px;}
    .aboutContainer .about_cntbox ul.flex { display: block;}
    .aboutContainer .about_cntbox ul li { width: 100%; margin-bottom: 5px;}

    .thumb-lineup_sec01_Inner{ margin-top: 0px; padding: 0 3%; }
    .thumb-lineup_sec01 { width: 100%; }
    .lineup_sec01_Box_img{ margin-bottom: 40px;}
    .lineup_sec01_Box_img > .flex{ display: block; width: 100%; max-width: 700px; margin: 0 auto;}
    .lineup_sec01_Box_img .sec01_mainimg { width: 100%; margin-bottom: 20px; }
    .lineup_sec01_Box_img .sec01_mainimg img{ }
    .lineup_sec01_Box_img .sec01_products_list { width: 100%; }
    .lineup_sec01_Box_img .sec01_products_list a{ display: block; max-width: 550px; margin: 0 auto; }
    .lineup_sec01_Box .lineup_sec01_Box_txt {max-width: 700px; margin: 0 auto; }
        .btn_sec01_star .tooltip_sec01_star { bottom: 150%; left: -20vw;  padding: 30px; width: 60vw; }
        .btn_sec01_star .tooltip_sec01_star p { word-wrap: break-word; white-space: normal; display: block; font-size: 17px;}


    .howto_blog ul { padding: 0 12%; }
    .howto_blog ul li { width: 45%;  }
    .howto_mainvisual .howto_mainvisual_img .howto_posi02 { width: 25vw;right: -10px;}


    .column_box .column_box_img { width: 40%; height:300px; overflow: hidden;position: relative;}
        .column_box .column_box_img img{ transform:scale(1.75,1.75); position: absolute; }
    .column_box .column_box_contents { width: 60%; }
      .column_box .column_box_contents .column_box_title { font-size: 22px; margin-bottom: 30px;}
          .column_box_about-left .column_box_about-cat {font-size: 14px; padding: 0 15px; margin: 30px 0 5px;}


    /* -- COLUMN -- */
    .column_Single_ttlcontents .column_box_about-right { margin-right: -40px;}
    .column_Single_about-ca{font-size: 14px; padding: 0 15px;}
    .column_Single_about-left{ padding-right:40px; padding-bottom: 40px; width:63%; -webkit-width: calc(100% - 275px); width: calc(100% - 275px);  }
    .column_Single_title{  margin-left: 40px; line-height: 1.6; }
    .column_Single_subttl{ margin-left: 40px; margin-top: 25px; line-height: 1.6; }

}


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

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

    .foot_nav ul li a { padding: 10px 18px ; }
    /* -- INDEX -- */

    .ind_column_list ul { max-width: 700px;  margin: 0 auto;}
    .ind_column_list ul li { height: auto;}
    .ind_column_list ul li .column_box.flex{ display: block;}
    .column_box .column_box_img { width: 100%; height:48vw; }
    .column_box .column_box_img img{ transform:scale(1,1); transform: translate(0,-15%); }
    .column_box .column_box_contents { width: 100%; height:auto; margin: 0 auto; box-sizing: border-box; padding: 6%; }
    .column_box .column_box_contents .column_box_contentsInner {  width: 100%; position: static; top:auto; left: auto; transform: translateX(0) translateY(0); -webkit- transform: translateX(0) translateY(0);}

    .partnerContainer ul.flex{display: block;}
    .partnerContainer ul li { width: 100%; display: flex; justify-content: space-between; margin-bottom: 8%; }
    .partnerContainer ul li a { display: block; width: 47%; }
    .partnerContainer ul li .partner_txt {width: 46%; margin: 0;}
    .partnerContainer ul li .btn_more{ display: none; }



}

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



@media screen and (max-width: 1080px) {
  .pc-only,
  .pc-only-inline{ display: none; }
  .tablet-than { display: block; }
}


@media screen and (min-width: 769px) and (max-width: 1080px) {
  .tablet-only { display: block; }
}

@media screen and (min-width: 769px) {
    .sp-hide{display: block;}
    .sp-hide-inline{display:inline-block;}
    .sp-only,
    .sp-only-inline{ display: none !important; }
}




/* BOLD HACK
----------------------------------------------------------------------------------------------*/

@media screen and (min-width: 769px) {
    .lineup_sec02_list ul li .lineup_sec02_list_txt p:first-child,
    .lineup_sec03_list ul li .lineup_sec03_list_txt p:first-child,
    .howto_blog_txt p.howto_blog_title,
    .column_box .column_box_contents .column_box_title,
    .partnerContainer ul li .partner_txt p:first-child,
    .column_Single_title,
    .column_subttl
    { font-weight: bold;}


}

/* SP
----------------------------------------------------------------------------------------------*/


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


body { font-size: 14px; line-height: 1.7;}


.sp-only{ display: block;}
.sp-only-inline{ display:inline-block; }
.sp-hide, .sp-hide-inline,
.sp-br-none br, br.sp-br-none {display: none;}

img{ max-width: 100%; height: auto;}

.col-l { float: none;}
.col-r { float: none;}



/* main-layout
==========================================================*/
#wrapper  { }
.wrap { padding-right:6%; padding-left: 6%;  }
.wrapInner { padding: 50px 0;}


/* common
==========================================================*/
    #pagetop {width: 60px;}

#footerContainer .wrap{ padding: 0;}
.footerInner { padding: 0px;}
.foot_nav { margin-bottom: 0px;}
.foot_nav ul#foot_menu { display: block; }
    .foot_nav ul li.first::before,
    .foot_nav ul li::after { display: none; }
    .foot_nav ul li a { display: block; padding: 20px 35px ; font-size: 16px; text-align: center; border-bottom: 1px solid #e0e0e0;}
    .foot_nav ul li.shop { display: none; }

    .foot_bottom.flex{display: block; }
    .foot_link ul{ display: block;}
    .foot_link ul li { display: block; margin-right: 0px; }
    .foot_link ul li a { display: block; padding: 10px 35px ; text-align: center; border-bottom: 1px solid #e0e0e0;}


    .foot_sns { width: 100%; padding:0px; text-align: left; }
    .foot_sns ul { display: flex; justify-content: space-between;  padding-top: 0px; }
    .foot_sns ul li{ width: 33.33%; text-align: center; position: relative;}
    .foot_sns ul li a { padding: 25px 0px ; display: block; margin-right: 0px;}
    .foot_sns ul li::after {position: absolute; content: ""; border-left: 1px solid #e0e0e0; box-sizing: border-box; height: 40%; top: 30%; left: 0px;}
    .foot_sns ul li .fa { font-size: 25px; }

    .copyright { margin: 0 60px 0 0px;  font-size: 12px; background: #f8f8f8; text-align: center; height: 60px; line-height: 60px; }


/* 見出し */
.h2ttl { margin-bottom: 25px;}
.h2ttl div h2,
.h2ttl div .h1ttl { font-size: 1.7em; line-height: 1.5; }
.h2ttl .h2ttl_leadtxt  {  margin-top: 15px; font-size: 1em; padding: 0 6%; }

/* closeボタン */
.close-w{width:14px;height:14px;width:40px;height:40px;line-height:40px;}
.close-w::before,.close-w::after{margin-left: -7px; width:14px;}
.lity-close {width:40px;height:40px;}
.lity-close::before,.lity-close::after{ margin-left: -7px; width:14px;}



/* pages
==========================================================*/

/* INDEX
-------------------*/

    .ind_mainvisual_Container { height: 85vh; overflow: hidden;}
    .ind_maincopy { top: 40%; left:25vw; margin: 0 ;}
    .ind_maincopy img{ width: 50vw; }


    .ind_main_links { top:auto; bottom: 15vh;  max-width: 200px; width: 42%; }


    /* About */
    #About { padding: 0px 0 0;}
    #About .wrapInner { padding: 50px 0 0; }

    .aboutContainer { margin-top: 35px;}
    .aboutContainer .about_leadbox { margin-bottom: 20px; }
    .aboutContainer .about_leadbox p:first-child { font-size: 1.42em; margin: 0 0 10px;}
    .aboutContainer .about_leadbox p:last-child { font-size: 1em;}
    .aboutContainer .about_cntbox ul li { padding: 8% 8.5%; }
    .aboutContainer .about_cntbox ul li .about_cntbox_ttl { font-size: 1.42em; }


    /* Topics */
    #Topics .wrapInner { padding: 50px 0 0;}
      .ind_topics_list { font-size: 0.86em; }
      .ind_topics_list dt { width: 75px; padding: 12px 0px;  margin-right: 13px;}
      .ind_topics_list dd { -webkit-width: calc(100% - 88px); width: calc(100% - 88px); padding: 12px 0px; ;}
      .ind_topics_list ul li:first-child dt, .ind_topics_list ul li:first-child dd { border-top: 1px solid #ccc; }
      .ind_topics_list ul li:last-child dt, .ind_topics_list ul li:last-child dd { border-bottom: 1px solid #ccc; }

    /* Recommend */
    .recommend_slide ul { padding: 0 10%;}


    /* lineup */
    .lineup_sec01 .slick-prev,
    .lineup_sec01 .slick-next
    {
        top: 32vw;
        -webkit-transform: translate(0, 0);
        -ms-transform: translate(0, 0);
        transform: translate(0, 0);
    }
    .btn_sec01_star .tooltip_sec01_star { left: -30vw;  padding: 30px; width: 70vw; }
    .sec01_products .sec01_products_img { width: 150px; }
    .sec01_products .sec01_products_img img{ max-width: 90%;}

    .lineup_sec02 { margin-top: 40px;}
    .lineup_sec02_Inner { width: 100%;}
    .lineup_sec02_list ul { margin-bottom: 15px; }
    .lineup_sec02_list ul li { width: 47.8%; margin-bottom: 35px;}
    .lineup_sec02_list ul li .lineup_sec02_list_txt { margin-top: 15px;}
    .lineup_sec02_list ul li .lineup_sec02_list_txt p{ font-size: 0.9em;}
    .lineup_sec02_list ul li .lineup_sec02_list_txt p:first-child { font-size: 1.1em;}


    .lity-close,.lity-close:active {top: 1vw;}
    .popup_lineup_sec02_Box { margin: 1vw auto 50px; }
    .popup_lineup_sec02_Box { width: 98vw; padding: 100px 4% 0; }
    .popup_lineup_sec02_Box ul li { width: 46%; margin: 0 2% 0; margin-bottom: 75px; }

        .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt { margin: 15px 0 15px;}
        .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt p,
        .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt p:first-child,
        .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt p:nth-child(2) span { font-size: 0.9em;}
        .popup_lineup_sec02_Box ul li .btn_more a{ padding: 0; display: block; text-align: center;}

    /* LINEUP PAGE */
    .LineupPageContainer ul { display: flex;  }
    .LineupPageContainer ul li {  width: 46%; margin: 0 2% 0; margin-bottom: 75px;}
    .LineupPageContainer ul li .popup_lineup_sec02_txt { margin: 15px 0 15px;}
    .LineupPageContainer ul li .popup_lineup_sec02_txt p,
    .LineupPageContainer ul li .popup_lineup_sec02_txt p:first-child,
    .LineupPageContainer ul li .popup_lineup_sec02_txt p:nth-child(2) span { font-size: 0.9em;}
    .LineupPageContainer ul li .btn_more a{ padding: 0; display: block; text-align: center;}



    .lineup_sec03 { }
    .lineup_sec03_list ul.flex{ display: block;}
    .lineup_sec03_list li { width: 100%; margin-bottom: 35px; }
    .lineup_sec03_list li:last-child { margin-bottom: 0;}
    .lineup_sec03_list li img{ width: 100%;}
    .lineup_sec03_list ul li .lineup_sec03_list_txt { margin-top: 15px; }
    .lineup_sec03_list ul li .lineup_sec03_list_txt p { font-size: 0.9em;}
    .lineup_sec03_list ul li .lineup_sec03_list_txt p:first-child {font-size: 1.1em;}



    .howto_posi01 { width: 25vw;}
    .howto_mainvisual { margin-bottom: 20px;}
    .howto_mainvisual .howto_mainvisual_img { padding: 0 4%;}
    .howto_mainvisual .howto_mainvisual_img .howto_posi02 { width: 34vw;right: 8%;}
    .howto_mainvisual .howto_mainvisual_txt { font-size: 1em;}

    .howto_blog_img .howto_blog_img_number {top: -15px; right: -10px; width: 35px; height: 35px; }
    .howto_blog_img .howto_blog_img_number p { line-height: 35px; font-size: 14px;}
    .howto_blog_txt p {font-size: 0.9em; }
    .howto_blog_txt p.howto_blog_title { font-size: 1.14em; }

    #Column .wrap{ padding-right:0%; padding-left: 0%; }
    .columnContainer { margin-top: 50px;}
    .ind_column_list { margin-bottom: 50px;}

    .partnerContainer ul li:last-child{ margin-bottom: 0;}


/* COLUMN
-------------------*/
    .columnSingleMain{ min-height: 45vh}
    .column_Single_ttlcontents { padding-bottom: 35px; }
    .column_Single_ttlcontents .column_box_about-right { margin-right: 0px;}
    .column_Single_about-left{ padding-right:5vw; padding-bottom: 5vw; width:94vw; margin-left: 3%;}
    .column_Single_title{  margin-left: 5vw; }
    .column_Single_subttl{ margin-left: 5vw; margin-top: 3vw; margin-bottom: 10px; }

    .column_Single_about{ display: block; }
    .column_Single_ttlcontents .column_box_about-right{ width: 100%; padding: 25px 0% 0; display: flex; justify-content: flex-end;}
    .column_Single_ttlcontents .column_box_about-writer{ width: 150px;}
    .column_Single_arrow_box:after {
        left: auto;
        top: 100%;
        right: 210px;
        border: solid transparent;
        border-top-color: #FFF;
        border-width: 10px;
        margin-top: 0px;
        margin-left: -10px;
    }

    .column_Single_contents{padding: 35px 6% 0px;}
    .column_Single_post_body {}
    .column_Single_post_body p{ margin: 10px 0 ;}
    .column_Single_post_body img{ margin: 5px 0 ;}
    .column_Single_post_body img.tate { max-width: 80%; }

/*
-------------------*/
@media screen and (max-width: 600px) {

    .copyright { font-size: 11px;  }

    /* -- INDEX -- */
    .ind_maincopy { left:20vw; margin: 0 ;}
    .ind_maincopy img{ width: 60vw; }

    .sec01_star.flex { display: block; }
    .btn_sec01_star { margin-top: 20px;}
    .btn_sec01_star .tooltip_sec01_star { left: 0vw;  padding: 30px; width: 88vw; }
    .sec01_products .sec01_products_img { width: 150px; }

    .lineup_sec02_list ul li .lineup_sec02_list_txt p,
    .lineup_sec03_list ul li .lineup_sec03_list_txt p{ font-size: 0.85em;}
    .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt p,
    .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt p:first-child,
    .popup_lineup_sec02_Box ul li .popup_lineup_sec02_txt p:nth-child(2) span { font-size: 0.85em;}

    .column_box .column_box_img { width: 100%; height:58.6vw; }
    .column_box .column_box_img img{ transform: translate(0,-15%); }
    .column_box .column_box_contents .column_box_title { font-size: 1.15em; margin-bottom: 4%; line-height: 1.5;}
    .column_box_about-left .column_box_about-cat { font-size: 0.85em;margin: 10px 0 5px;}
    .column_box_about-right .column_box_about-writer { font-size: 0.85em; margin-right: 6%; padding-left: 1em; border-left: none;}
    .column_box_about-right .column_box_about-writer p:first-child { font-size: 0.8em;margin-bottom: 5px; }
    .column_box_about-right .column_box_about-writer-img { width: 36%; }
    .column_list_hover > li:hover .column_box_about-right .column_box_about-writer { border-left: none;}
    .partnerContainer ul li .partner_txt p {line-height: 1.4; }
    .partnerContainer ul li .partner_txt p:nth-child(2) { font-size: 0.82em; }

     /* -- Column -- */
    .category_search { width: 88%; margin: 35px auto 50px;}
    .category_search ul li { width: 31.5%;}
    .category_search ul li a { line-height: 40px; font-size: 1em;}

    .column_Single_about-left { margin-top: -30px; }
    .column_Single_about-ca{ font-size: 0.85em;}
    .column_Single_subttl { font-size: 0.8em;}
    .column_Single_ttlcontents .column_box_about-writer {border-left: 1px solid #ccc; width: 130px;}
    .column_Single_ttlcontents .column_box_about-right .column_box_about-writer-img { width: 70px; margin-right: 10px; }
    .column_Single_arrow_box:after {right: 160px;}

}
   /*
-------------------*/
@media screen and (max-width: 420px) {
    .copyright { font-size: 10px; }
    .ind_maincopy { left:16vw; margin: 0 ;}
    .ind_maincopy img{ width: 68vw; }
}

@media screen and (max-width: 380px) {
    .copyright span{ display: none;}
}