@charset "utf-8";

/* ---------------------------------------
	max-width: 1024px
--------------------------------------- */

/************************************************************

     Layout | max-width: 1200px

************************************************************/

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


/* ---------------------------------------
	max-width: 1024px
--------------------------------------- */

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

    html { font-size:  16px; }
    .c-features_01 .__item-ttl h3::after{
    right: -10%;
}
    .c-features_03 .__item-ttl h3::after{
    right: 26%;
}
   .c-gallery{
    background: linear-gradient(180deg, #ffffff 0%, #ffffff 72%, #fbf7f1 72%, #fbf7f1 100%);
}
    .tab_item_product .__txt .__txt-pro .size{
    font-size: 0.75em;
}
.tab_item_product .__txt .__txt-pro .name{
    font-size: 0.75em;
}
.tab_item_leaf .tab_item_product .__txt .name,.tab_item_acce .tab_item_product .__txt .name{
    font-size: 0.75em;
}
}/* max-width: 1024px */


/* ---------------------------------------
	max-width: 820px
--------------------------------------- */

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

    html { font-size:  14px; }


    /*********************** NEWS ***************************/
.c-topics__inner .__ec .__btn::before{
    top: calc(50% - 0.8px);
    right:0.5em;
    transform: translateY(calc(-50% - 0.8px)) rotate(30deg);
    width: 5%;
}
.c-topics__inner .__ec .__btn::after{
    right: 0.5em;
    width: 8%;
}
/*********************** features ***************************/
 .c-features_01 .__item-ttl h3::after{
    right: 10%;
     transform: scale(0.45);
}
    .c-features_02 .__item-ttl h3::after{
        left: 40%;
        transform: scale(0.45);
    }
.c-features_03 .__item-ttl h3::after{
    top:-90%;
    right: 18%;
    transform: scale(0.45);
}
/*********************** scene ***************************/
    .c-scene_01 .__item-body .__img::before,.c-scene_02 .__item-body .__img::before,.c-scene_03 .__item-body .__img::before{
        top:50%;
        right: -40%;
        transform: scale(0.4);  
    }
    
    .c-scene_01 .__item-body .__txt .__links .__pro-btn::before,.c-scene_02 .__item-body .__txt .__links .__pro-btn::before,.c-scene_03 .__item-body .__txt .__links .__pro-btn::before{
    top: calc(50% - 0.8px);
    right:0.6em;
    transform: translateY(calc(-50% - 0.8px)) rotate(30deg);
}
    .c-scene_01 .__item-body .__txt .__links .__pro-btn::after,.c-scene_02 .__item-body .__txt .__links .__pro-btn::after,.c-scene_03 .__item-body .__txt .__links .__pro-btn::after{
    right: 0.6em;
    width: 8%;
}
       .c-scene_01 .__item-body .__txt .__links .__pro-btn,.c-scene_02 .__item-body .__txt .__links .__pro-btn,.c-scene_03 .__item-body .__txt .__links .__pro-btn{
    width: 100%;
} 
    
    /*********************** lineup ***************************/
    .leaf_tab::before,.acce_tab::before{
    left:calc(100% / 3 - 92px);
        top:-53%;
}
    .tab_item {
  height: 130px;
}
        /*********************** onlineshop ***************************/
    .c-online__inner .__item-body .__item .__img::after{
    top:40%;
    left: 40%;
}
    
    /************************************************************

         Contents Navigation

    ************************************************************/

    .c-nav__head{
        margin-bottom: 3.2vw;
        text-align: center;
    }
    .c-nav__head h2{
        display: inline-block;
        position: relative;
        font-size: 1.6em;
        font-weight: 900;
    }
    .c-nav__head h2::before,
    .c-nav__head h2::after{
        width: 28px;
        height: 36px;
    }
    .c-nav__head h2::before{
        background-image: url(../images/c-nav_head_l.png);
        left: -40px;
        margin-top: -18px;
    }
    .c-nav__head h2::after{
        background-image: url(../images/c-nav_head_r.png);
        right: -40px;
        margin-top: -18px;
    }
    .c-nav__column .__item a{
        position: relative;
        display: block;
        padding: 3.6vw 2.4vw 40px;
    }
    .c-nav__column .__item.__a4{
        border-right: 1px solid #fff;
    }
    .c-nav__column .__item.__a4 a{
        background: #f6b2d8;
    }
    .c-nav__column .__item.__b5 a{
        background: #b2e6f9;
    }
    .c-nav__column .__item a::after{
        width: 36px;
        height: 30px;
        bottom: -15px;
        left: 50%;
        margin-left: -18px;
    }

    /************************************************************

         Block

    ************************************************************/


}/* max-width: 843px */
@media screen and (max-width: 640px) {
/***************** 共通 ***************************/
    .c-topics__inner,.c-about__inner,.c-features__inner,.c-scene__inner,.c-gallery__inner,.c-lineup__inner,.c-online__inner{
    padding: 0 8% 20%;  
}
    .__ttl h2{
        font-size: 2.5em;
        padding: 24% 0 8%;
    }
    .__ttl h2 span{
        font-size: 0.35em;
        letter-spacing: 0;
    }
    .__ttl h2::before{
        top:68%;
        width: 11%;
}
    .__item-ttl h3{
    padding-bottom: 5%;
    font-size: 1.3em;
    letter-spacing: 0;
}
.__item-ttl h3::before{
    width: 4%;
    top:20%;
    left: -5%;  
}
/***************** topics ***************************/
    .c-topics__inner .__body{
        flex-wrap: wrap;
    }
    .c-topics__inner .__img{
    width: 100%;
    margin: 0 0;
}
.c-topics__inner .__txt{
    width: 100%;
    margin: 8% 0;
}
    .c-topics__inner .__ec .__btn{
        width: 58%;
        margin: 10% auto 0;
}
/***************** about ***************************/
.c-about__inner .__body .__item-body .__banner{
    width: 100%;
    }
    
/***************** features ***************************/ 
    
    /*--featuresとscene共通--*/
    .c-features_01 .__item-body,.c-features_02 .__item-body,.c-features_03 .__item-body,.c-scene_01 .__item-body,.c-scene_02 .__item-body,.c-scene_03 .__item-body{
    flex-wrap: wrap;
}
.c-features_01 .__item-body .__img,.c-features_02 .__item-body .__img,.c-scene_01 .__item-body .__img,.c-scene_02 .__item-body .__img,.c-scene_03 .__item-body .__img{
    width: 100%;
    margin-top: 8%;
}
.c-features_01 .__item-body .__txt,.c-features_02 .__item-body .__txt,.c-scene_01 .__item-body .__txt,.c-scene_02 .__item-body .__txt,.c-scene_03 .__item-body .__txt{
    width: 100%;
    padding-left: 0;
    padding-top: 10%;
}
.c-features_02 .__item-body .__txt,.c-scene_02 .__item-body .__txt{
    width: 100%;
    padding-right: 0;
}
.c-features_01,.c-features_02,.c-scene_01,.c-scene_02{
    margin-bottom: 24%;
}
    /*--タイトル--*/
.c-features_01 .__item-ttl h3::after{
    top:-60%;
    right: 10%;
    transform: scale(0.4);
}
    .c-features_02 .__item-ttl h3::after{
    top:-60%;
    left: 35%;
    transform: scale(0.4);
}
    .c-features_03 .__item-ttl h3::after{
    top:-130%;
    right: 20%;
    transform: scale(0.4);
}
.c-features_03 .__item-body .__item{
    width: 100%;
    display: flex;
    margin-bottom: 8%;
}
.c-features_03 .__item-body .__item figure{
    width: 50%;
}
.c-features_03 .__item-body .__item .__txt{
    width: 50%;
    padding-left: 2%;
}
.c-features_03 .__item-body .__item .__txt h4{
    padding: 0% 0 1.2%;
    font-size: 1.1em;
}
/***************** scene ***************************/ 
  .c-scene_01 .__item-body .__txt .__links .__pro-btn a,.c-scene_02 .__item-body .__txt .__links .__pro-btn a,.c-scene_03 .__item-body .__txt .__links .__pro-btn a{
    font-size: 1em;
      padding: 7%;
}
    .c-scene_01 .__item-body .__img::before,.c-scene_02 .__item-body .__img::before,.c-scene_03 .__item-body .__img::before{
        top:70%;
        right: -20%;
        transform: scale(0.38);
    }    
    .c-scene_01 .__item-body .__txt .__links .__pro-btn::before,.c-scene_02 .__item-body .__txt .__links .__pro-btn::before,.c-scene_03 .__item-body .__txt .__links .__pro-btn::before{
    top: calc(50% - 1.9px);
    right:1em;
    transform: translateY(calc(-50% - 1.9px)) rotate(30deg);
}
.c-scene_01 .__item-body .__txt .__links .__pro-btn::after,.c-scene_02 .__item-body .__txt .__links .__pro-btn::after,.c-scene_03 .__item-body .__txt .__links .__pro-btn::after{
    right: 1em;
}
.c-scene_01 .__item-body .__txt .__links .__pro-btn:hover::before,.c-scene_02 .__item-body .__txt .__links .__pro-btn:hover::before,.c-scene_03 .__item-body .__txt .__links .__pro-btn:hover::before{
    right:1%;
}
.c-scene_01 .__item-body .__txt .__links .__pro-btn:hover::after,.c-scene_02 .__item-body .__txt .__links .__pro-btn:hover::after,.c-scene_03 .__item-body .__txt .__links .__pro-btn:hover::after{
    right: 2%;
}
    
/***************** user gallery ***************************/ 
.c-gallery__inner .__body .__img{
    margin-top: 12%;
}
    .c-gallery__inner .__body .__img ul{
    flex-wrap: wrap;
}
.c-gallery__inner .__body .__img ul li{
    width: 31.33%;
    margin: 0 1% 5%;
}
    
/***************** lineup ***************************/
    .c-lineup .__body .__txt{
    padding-bottom: 20%;
}
 .tab_item {
  height: 100px;
  font-size:0.95em;
}
    .leaf_tab::before,.acce_tab::before{
    left:calc(100% / 3 - 100px);
    transform: scale(0.3); 
        top:-65%;
}
    .tab_cat h3{
    font-size: 1.1em;
}
    .tab_item_product .__txt .__links{
    padding-top: 6%;
}
/*製品情報ボタン*/
.tab_item_product .__txt .__links .__pro-btn a{
    padding: 5%;
    font-size: 0.75em;
}
/*バインダー用製品情報ボタン*/
   #bin_content .tab_item_product .__txt .__links .__pro-btn a{
    font-size: 1em;
}
    #bin_content .tab_item_product .__txt .__links .__pro-btn::before{
    top: calc(50% - 1.5px);
    transform: translateY(calc(-50% - 2.3px)) rotate(30deg);
}
    
.tab_item_product .__txt .__links .__pro-btn{
    margin-top: 4%;
    margin-bottom: 1%;
    
}
.tab_item_product .__txt .__links .__pro-btn::before{
    top: calc(50% - 1px);
    transform: translateY(calc(-50% - 1px)) rotate(30deg);
    width: 4%;
}
.tab_item_product .__txt .__links .__pro-btn::after{
    transform: translateY(-50%);
    width: 10%;
}
.tab_item_product .__txt .__links .__pro-btn:hover::before{
    right:2%;
}
.tab_item_product .__txt .__links .__pro-btn:hover::after{
    right: 2%;
}
/*製品情報ボタン ルーズリーフ・アクセサリー用*/
#leaf_content .tab_item_product .__txt .__links .__pro-btn::before,#acce_content .tab_item_product .__txt .__links .__pro-btn::before{
    width: 4%;
}
#leaf_content .tab_item_product .__txt .__links .__pro-btn::after,#acce_content .tab_item_product .__txt .__links .__pro-btn::after{
    width: 10%;
}
#leaf_content .tab_item_product .__txt .__links .__pro-btn:hover::before,#acce_content .tab_item_product .__txt .__links .__pro-btn:hover::before{
    right: 3%;
}
#leaf_content .tab_item_product .__txt .__links .__pro-btn:hover::after,#acce_content .tab_item_product .__txt .__links .__pro-btn:hover::after{
    right: 3%;
}
/*ECボタン*/
.tab_item_product .__txt .__links .__ec{
    flex-wrap: wrap;
}
.tab_item_product .__txt .__links .__ec .__btn{
    width: 100%;
    margin: 1% 0;
}
/*ルーズリーフ・アクセサリーECボタン*/
#leaf_content .tab_item_product .__txt .__links .__pro-btn a,#acce_content .tab_item_product .__txt .__links .__pro-btn a{
    padding: 5%;
}
#leaf_content .tab_item_product .__txt .__links .__ec,#acce_content .tab_item_product .__txt .__links .__ec{
    display: block;    
}
#leaf_content .tab_item_product .__txt .__links .__ec .__btn,#acce_content .tab_item_product .__txt .__links .__ec .__btn{
    width: 100%;
    margin: 2% 0
}
.tab_item_product .__txt .__links .__ec .__btn a{
    padding: 5%;
    font-size: 0.75em;    
}
    /*バインダーECボタン*/
    #bin_content .tab_item_product .__txt .__links .__ec .__btn a{
    font-size:1em;
	padding: 5%;
}
    #bin_content .tab_item_product .__txt .__links .__ec .__btn::before{
    top: calc(50% - 1.5px);
    right:0.8em;
    transform: translateY(calc(-50% - 1.5px)) rotate(30deg);
	width: 4%;
}
	#bin_content .tab_item_product .__txt .__links .__ec .__btn::after{
	width: 10%;
}
    
.tab_item_product .__txt .__links .__ec .__btn::before{
    content: '';
    position: absolute;
    top: calc(50% - 1px);
    right:0.8em;
    transform: translateY(calc(-50% - 1px)) rotate(30deg);
    width: 4%;
    height: 1px;
    background-color: #fff;
    transition: 0.3s;
}
.tab_item_product .__txt .__links .__ec .__btn::after{
    content: '';
    position: absolute;
    top: 50%;
    right: 0.8em;
    transform: translateY(-50%);
    width: 10%;
    height: 1px;
    background-color: #ffffff;
    transition: 0.3s;
}
.tab_item_product .__txt .__links .__ec .__btn:hover::before{
    right:3%;
}
.tab_item_product .__txt .__links .__ec .__btn:hover::after{
    right: 3%;
}
  /*バインダーコンテンツ*/
    .tab_item_binder{
        flex-wrap: wrap;
    }
    .tab_item_binder .tab_item_product{
        width: 100%;
    }
    
  /*ルーズリーフ・アクセサリーコンテンツ*/  
  .tab_item_leaf,.tab_item_acce{
    flex-wrap: wrap;
}
	.tab_item_acce{
		justify-content: space-between;
	}
.tab_item_leaf .tab_item_product,.tab_item_acce .tab_item_product{
    width: 46%;
    margin: 2% 1%;
}  
   #leaf_content .tab_content_description .__links .__proall-btn,#acce_content .tab_content_description .__links .__proall-btn{
    width: 100%;
} 
    
/***************** online ***************************/
    
    .c-online__inner .__item-body .__item{
        flex-wrap: wrap;
}
.c-online__inner .__item-body .__item .__img{
    width: 100%;
    margin-top: 8%;
}
.c-online__inner .__item-body .__item .__txt{
    width: 100%;
    padding-top: 8%;
}
    .c-online__inner .__item-body .__item .__img::after{
    transform: scale(0.4);   
}
    .c-online__inner .__item-body .__ec-ttl h4{
    font-size: 1.1em;
    margin: 18% 0 2%;
}
.c-online__inner .__item-body .__ec-ttl h4::before{
    top:10%;
   left: -12%;
    width: 10%;
}
    .c-online__inner .__body .__ec .__btn{
    width: 58%;
    margin: 8% 1%;
}
        .c-online__inner .__item-body .__item .__img::after{
    top:60%;
    left: 60%;
}
    
/***************** related ***************************/
    
    .c-related a{
	padding:20% 3% 5%;
}

    
    
    

}

/* ---------------------------------------
	max-width: 600px
--------------------------------------- */

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

    /************************************************************

         Contents | General Settings

    ************************************************************/

    .content{
        position: relative;
        margin: 80px 0 0 0;
    }

    /************************************************************

         Hero

    ************************************************************/

    .c-hero__pc{
        display: none;
    }
    .c-hero__sp{
        display: block;
    }

    
    /************************************************************

         Related

    ************************************************************/

    .c-related{
        margin: 0 4.8vw 9.6vw;
    }

}/* max-width: 600px */


/* ---------------------------------------
	max-width: 480px
--------------------------------------- */

@media screen and (max-width: 480px) {/* max-width: 480px */
    
    
/***************** features ***************************/
    
    .c-features_01 .__item-ttl h3::after{
    top:-60%;
    right: -30%;
}
    .c-features_03 .__item-ttl h3::after{
    top:-90%;
    right: -25%;
}
/***************** scene ***************************/    
    .c-scene_01 .__item-body .__img::before,.c-scene_02 .__item-body .__img::before,.c-scene_03 .__item-body .__img::before{
        top:58%;
        right: -40%;
    }
/***************** lineup ***************************/ 
     .tab_item {
  height: 75px;
}
        .leaf_tab::before,.acce_tab::before{
    left:calc(100% / 3 - 113px);
        top:-85%;
}
/***************** online ***************************/ 
        .c-online__inner .__item-body .__item .__img::after{
    top:40%;
    left: 40%;
    transform: scale(0.38);
}
}
/* ---------------------------------------
	max-width: 320px
--------------------------------------- */

@media screen and (max-width: 360px) {
    html { font-size:  13px; }
     .__item-ttl h3{
    font-size: 1.2em;
}
    .c-features_03 .__item-body .__item .__txt h4{
    font-size: 1.1em;
        letter-spacing: 0;
}
    
}/* max-width: 320px */