@charset "utf-8";


/* CSS Document */

:root{
    --color_w:#FFF;
    --color_b:#000;
    --color_brown1:#7b5a1b; /*濃い茶色*/
    --color_brown2:#a47e39; /*ライトブラウン*/
    --color_or:#F2720B; /*オレンジ*/
    --color_or_l:#F59976; /*くすんだオレンジ*/
    --color_blue:#9AA7DE;
    --color_pink:#F6A5E1;
    --color_pink2:#f48c7c;
    --color_ye:#F2C959;
    --color_ye_l:#FEF9C7;/*薄い黄色*/
    --color_red:#FF0000;
    --color_be:#FCF6FA; /*淡いベージュ*/
    --color_be2:#FCF9F6; /*淡いベージュ　茶色寄り*/
    --color_be3:#faf7f1; /*淡いベージュ　茶色うすめ*/
    --color_green:#8CCC8A; /*淡い緑*/
}



/******************************************************************************
 Default CSS Reset
******************************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,figure{
 padding:0;
}
table{
 border-collapse:collapse;
 table-layout:fixed;
}
fieldset,img{
 border:0;
}
address,caption,cite,code,dfn,em,th,var{
 font-style:normal;
 font-weight:normal;
}
strong{
 font-style:normal;
 font-weight:bold;    
}
ol,ul{
 list-style:none;
}
caption{
 text-align:left;
}
h1,h2,h3,h4,h5,h6{
 font-size:100%;
 font-weight:normal;
}
.mb20 {
	margin-bottom: 20px;
}
.center{
    text-align: center;
}
.right{
    text-align: right;
}
.left{
    text-align: left:
}

/* Flex  ------------------------------------*/
.flexwrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
}
.flexnowrap{
 display: -webkit-flex;
 display: flex;
 flex-wrap: nowrap;
 -webkit-flex-wrap: nowrap;
}
.JCfs{
 justify-content: flex-start;
 -webkit-justify-content: flex-start;
}
.JCfe{
 justify-content: flex-end;
 -webkit-justify-content: flex-end;
}
.JCc{
 justify-content: center;
 -webkit-justify-content: center;
}
.JCsb{
 justify-content: space-between;
 -webkit-justify-content: space-between;
}
.AIc{
    align-items: center;
    -webkit-align-items: center;
}


/******************************************************************************
 General Setting
******************************************************************************/
body {
 padding:0;
	font-family: -apple-system, BlinkMacSystemFont, Roboto, "Segoe UI", "Helvetica Neue", HelveticaNeue, YuGothic, "Yu Gothic Medium", "Yu Gothic", Verdana, Meiryo, sans-serif;
 font-weight: normal;
 color: #000;
 word-wrap : break-word;
 -webkit-font-smoothing: antialiased;
 position: relative;
 background: #FEFFF6;
 line-height: 1.3;
 font-size: 14px;
}

a {
 color: #000;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 text-decoration: none;
}
a:visited { color: #000;}
a:active { color: #000;}
a:hover,
a.hover {
 text-decoration: none;
}

/*** clearfix ***/
.cf:after{
 content: "."; 
 display: block; 
 height: 0; 
 font-size:0; 
 clear: both; 
 visibility:hidden;
}
/*** pager ***/
.page_navi {
clear-after: left;
margin:0 0 15px 0;
padding:0;
display: inline-block;
position: absolute;
bottom: 0;
}
.page_navi,
.breadcrumb {
    overflow: hidden;
}

.breadcrumb{
    padding: 20px 0 20px 50px;
    background: #fff;
}
.breadcrumb li{
display:inline-block;
font-size:12px;
font-weight: bold;
list-style:none;
}

.breadcrumb li + li:before {
margin: 0 3px;
content: " > ";
}
.breadcrumb a{
color:#333;
}
.page_navi li {
display: inline;
float:left;
font-size:11px;
list-style:none;
margin:10px 5px 10px 0;
}

.page_navi li a{
display: inline-block;
padding:5px 10px;
border:1px solid #ccc;
}

.page_navi li span {
font-weight:bold;
display: inline-block;
padding:5px 10px;
border:1px solid #000;
background: #000;
color:#fff;
}

.page_navi li a:hover {
background:#eee;
text-decoration:none;
}

.pc_only{
    display: block;
}
.sp_only{
    display: none;    
}
	
/******************************************************************************
 PC Layout
******************************************************************************/
div#wrap{
	width: 100%;
    display: flex;
    flex-direction: column;
    min-height: 100vh;    
    font-size:14px;
    margin: auto;
}

/* header ****************************************************/
	#header_logo_top {
        background-image: url(../images/header/back.png);
        background-position: bottom left;
        background-repeat: no-repeat;
        background-size: cover;
        width: 100%;
		height: 300px;
        margin: 0;
        z-index: 9999;  
        position: relative;
	}
	#header_logo {
        background-image: url(../images/header/back.png);
        background-position: 20% 15%r;
        background-repeat: no-repeat;
        background-size: unset;
        position: fixed;
        width: 100%;
		height: 80px;
        margin: 0;
        z-index: 9999;
        overflow: hidden;
	}
    .logo{
        margin: 10px 0 0 20px;
        float: left;
    }    
    .logo img{
        width: auto;
        height: 60px;
    }    
    #ico_box {
        border-top: 1px solid #000;
        border-bottom: 1px solid #000;
        padding-right: 30px;
	}
    
	#ico_box ul {
		margin: 0px auto;
		padding: 10px 0;
		width: 1040px;
		display: -webkit-flex;
		display: flex;
		-webkit-justify-content: flex-end;
        justify-content: flex-end;
	}
    
	#ico_box li {
		margin-left: 20px;
		text-align: center;
		width: 135px;
		height: 35px;
		font-size: 100%;
        letter-spacing: 0.2em;
        position: relative;
	}
	#ico_box li i {
		position: absolute;
        top: 50%;
        left: 50%;
        font-weight: 600 !important;
        -webkit-transform: translate(-50%, -50%); /* Safari用 */
        transform: translate(-50%, -50%);
	}
	#ico_box li a {
		color: #fff;
	}
	#ico_box li a:hover {
		color: #FFF48C;
	}
    #ico_box li ::before {
        content: "/" !important;
        margin-left: .5em !important;  
        margin-right: .5em !important;  
    }   
    #ico_box li:first-child ::before {
        content: "" !important;
        margin-left: .5em;  
        margin-right: .5em;  
    }   
    
/* main contents ****************************************************/
#container_top{
 margin:-200px auto 0;
}
#container{
 margin:0 auto;
 padding: 70px 0 0 0;    
}
#container_top #main{
	width: 100%;
    margin: auto;
    padding-top:100px;
    flex-direction: column;
    min-height: 100vh;
}
#main{
	width: 100%;
    margin: auto;
    padding-top:80px;
}
.main-back-w{
    background-color: var(--color_w) !important;
    }   
.entry-content{
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 30px;
}      
.entry-content img{
    width: 100%;
    height: auto;
}
.block-f{
    margin: auto;
    max-width: 1000px;
}

/*下層ページのタイトル　※背景設定以外　*/
.underpage_title{
    height: 200px;
    background: var(--color_ye_l);
    color: var(--color_brown1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
}
.underpage_title-back{
    background: rgba(255,255,255,0.7);    
    width: 100%;
    height: 200px;
}
.underpage_title h2{
    text-align: center;
    font-size: 18px;
}
.underpage_title span{
    font-size: 12px;    
}

/* 共通ボタン　枠からズレた色塗り　*/

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.bt_frame,
a.bt_frame,
button.bt_frame {
  width: 200px;
  height: 35px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: var(--color_b);
}

a.btn-border-shadow {
  background: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 97%;
  height: 90%;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 3px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow:hover {
  width: 200px;
  padding: calc(10px - 7px) 0;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}

a.btn-border-shadow--color {
  border-radius: 0;
  background: yellow;
}

a.btn-border-shadow--color:before {
  border-radius: 0;
}



/* Join ****************************************************/

.topentry_back{
    background-image: url(../images/join/top_back.jpg);
    background-attachment:fixed; 
    background-repeat: no-repeat;    
    background-size: cover;
}

/* クマ配置　*/
.join-bear{
  background-image: url(../images/bear/join_bear01.png),url(../images/bear/join_bear02.png),url(../images/bear/set001.png);
  background-repeat: no-repeat,no-repeat,no-repeat;
  background-position: top 10% left,top 16% right,bottom center;        
  background-size: 30%,30%,70%;    
}
.join-bear-membership{
  background-image: url(../images/bear/join_bear03.png);
  background-repeat: no-repeat;
  background-position: top left 15%;        
  background-size: 25%;    
}
.join-bear2{
  background-image: url(../images/bear/join_bear04.png);
  background-repeat: no-repeat;
  background-position: top right 10%;        
  background-size: 27%;    
}


.top-img{
    text-align: center;
}
.top-img img{
    height: 400px;
    width: auto;
}
.top-img p{
    font-size: 18px;
}
.top-img-back{
  background-image: url(../images/join/top_img_side1.png),
      url(../images/join/top_img_side2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 30% 100%,70% 100%;        
  background-size: auto;    
  height: 500px;
}
.join-welback{
    max-width: 1200px;
    margin-top: 50px;
    width: 100%;
    padding: 50px 0 0;
    background: var(--color_ye);
    background-image: url(../images/join/honypot_font.png),url(../images/join/title_icon.png);
    background-repeat: no-repeat,no-repeat;
    background-position: top right 10px,75% 10%;        
    background-size: 20%,auto;    
    height: 300px;
    border-radius: 10px;
}
.join-wel-text{
    margin: auto;
    width: 70%;
}
.join-wel-text span{
    padding-left: 20px;
    font-size: 24px;
    border-left:5px solid var(--color_ye_l);
}
.join-wel-text p{
    margin-top: 20px;
    padding: 20px 15px;
    background: rgba(255,255,255,0.5);
    border-radius: 15px;
}
.join-welback .more a.btn-border-shadow--color{
    background: var(--color_brown1);
}
.join-messeback{
    margin-top: 50px;
    margin-bottom: 280px;
    width: 100%;
    padding: 50px 0 0;
    background: var(--color_ye);
    background-image: url(../images/join/message_font.png),url(../images/join/title_icon.png);
    background-repeat: no-repeat,no-repeat;
    background-position: top right 10px,30% 10%;        
    background-size: 20%,auto;    
    border-radius: 10px;
    padding-bottom: 40px;
}


/* Join membership */

.membership-f{
    margin: 10px auto 30px;
    width: 100%;
    padding-top: 30px;
}
.membership-backimg{
    background-image: url(../images/join/back_flower.png);
    background-repeat: no-repeat;
    background-position: top right 10%;        
    background-size: auto;        
}
.membership-tab{
    margin-top: 100px;
}

/*タブ切り替え全体のスタイル*/
.tabs__service,
.tabs {
  padding-bottom: 3px;
  background: #fff;
  border:2px solid var(--color_brown2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  width: 1000px;
  margin: 0 auto 50px;
  border-radius: 5px 5px 0 0;
}
/*タブのスタイル*/
.tab_item_service,
.tab_item {
  width: calc(100%/2);
  height: 50px;
  background-color: var(--color_brown2);
  line-height: 50px;
  font-size: 16px;
  text-align: center;
  color: var(--color_w);
  display: block;
  float: left;
  text-align: center;
  font-weight: bold;
  transition: all 0.2s ease;
  border-radius: 5px 5px 0 0;
}
.tab_item_service:hover,
.tab_item:hover {
  opacity: 0.75;
}
. tab_margin{
    margin-right: 10px;
}
/*ラジオボタンを全て消す*/
input[name="tab_item_service"] ,
input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content_service,
.tab_content {
  background: var(--color_w);
  display: none;
  padding: 40px 40px 0;
  clear: both;
  overflow: hidden;
}

.membership-title{
    background: var(--color_brown1);
    color: #fff;
    margin-bottom: 30px;
    padding: 5px 10px;
    text-align: center;
    font-size: 110%;
}
.membership-title-min{
    padding-left: 11px;
    height: 35px;
    line-height: 40px;
    font-weight: bold;
    font-size: 18px;
    text-align: left;
    background-image: url(../images/join/menu_back.png);
    background-repeat: no-repeat;
    background-position: top left;        
    background-size: contain;    
}
.membership-title-min .fas{
    color:var(--color_w);
}
/*選択されているタブのコンテンツのみを表示*/
#member:checked ~ #member_content,
#free:checked ~ #free_content{
  display: block;
}
/*選択されているタブのコンテンツのみを表示*/
#member_service:checked ~ #member_service_content,
#free_service:checked ~ #free_service_content{
  display: block;
}

/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item_service,
.tabs input:checked + .tab_item {
  background-color: var(--color_fff);
  color: #000;
}

.membership-f1{
    box-sizing: border-box;
}
.membership-box1{
    margin: 10px auto;
    width: 98%;  
    padding: 10px;
    background: var(--color_be2);
    border-radius: 10px;
    box-shadow: 2px 2px 2px rgba(164,126,57,0.5);
}
.membership-box-img{
    margin: 10px auto 0;
    text-align: center;
    padding-top: 10px;
    max-width: 650px;
}
.membership-box1 img{
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 10px;
}
.membership-box2{
    width: 96%;
    margin: 0 auto 10px;
    padding: 10px;
    background: var(--color_be2);
    border-radius: 10px;    
    box-shadow: 2px 2px 2px rgba(164,126,57,0.5);
}
/* 入会ベアの特殊装飾　*/
.bearinfo{
    background: var(--color_or_l);
    padding: 0.5em 1em;
    box-shadow: 0px 0px 0px 5px var(--color_or_l);
    border: dashed 2px white;  
}

.membership-main{
    background: -moz-linear-gradient(top, var(--color_or_l), transparent);
    background: -webkit-linear-gradient(top, var(--color_or_l), transparent);
    background: linear-gradient(to bottom, var(--color_or_l), transparent);    
    border-radius: 15px;
}
.top-join-text{
    margin: 20px 0;
    line-height: 1.8;
    padding-left: 30px;
}
.tab_content .more a.btn-border-shadow--color{
    background: var(--color_ye);
    font-size: 12px;
}

/* Join service */
.service_menu{
    margin: 20px auto 30px;
    display: flex;
    flex-wrap: wrap;
    justify-content:flex-start;
}
.service_menu li{
    width: calc(100%/3);
    height: 30px;
}
#member01, #member02, #member03, #member04, #member05{
  padding-top: 130px;
  margin-top:-130px;
}


/* main ****************************************************/

#sns-navi {
    position: fixed;
    top: 400px;
    left: 0;
    z-index: 9999;
    display: block;
    transition: .8s;
}
.sns-f{
}
.sns-box{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 50px;
    height: 150px;
    background: var(--color_brown1);
}
.sns-f a{
    width: 50px;
    height: 50px;    
    text-align: center;
    line-height: 50px;
}
.sns-f a .fab{
    color:#fff;
}

.block1{
    margin: 0;
    background-image: url(../images/top/info_back.jpg);
    background-position: center;
    background-repeat: repeat-y;
    background-size: cover;    
}
.block2{
  width: 100%;
  height: auto;
  background-image: url(../images/top/story_back1.png),
      url(../images/top/story_back2.png),url(../images/top/story_back3.png),
      url(../images/top/story_back4.png),
      url(../images/top/story_back5.png);
  background-repeat: no-repeat,
      no-repeat,no-repeat;
  background-position: top left,bottom right,75% 30%,74% 70%,25% 76%;    
    background-size: 70%,50%,auto,auto,auto;
}
.block3{
    margin-top: -5px;
    background-image: url(../images/top/shop_back.png);
    background-position: left top;
    background-repeat: repeat-x;
    background-size: auto;    
}
.block4{
    margin-top: -5px;
    background-image: url(../images/top/link_back.png);
    background-position: 80% 0;
    background-repeat: no-repeat;
    background-size: auto;
    min-height: 600px;
}
.top_slider{
    margin: auto;
    border-radius: 15px;
}

.top-menu{
    margin: 50px auto 80px;
    width: 100%;
}
.top-menu ul{
    display: flex;
    justify-content: center;
    align-items:flex-end;
    height: 250px;
}
.top-menu li{
    display: flex; /* Flexコンテナにする */
    flex-direction: column;
    width: calc(100% / 4);
    height: 250px;
    background-image: url(../images/top/menu-img.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    text-align: center;
}
.top-menu li:hover{
    background-image: url(../images/top/menu-img-on.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.top-menu li.bee-left:hover{
    background-image: url(../images/top/menu-img-left-on.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.top-menu li a{
    display: block;
    margin-top: auto;
    padding: 100px 0 30px;
    font-size: 18px;
    font-weight: bold;
    color: var(--color_brown1);
}
.top-menu li a span{
    font-size: 12px;
    color: var(--color_brown1);
}


/* TOP-info */
.info-f{
    margin-bottom: 30px;
    background: var(--color_w);
    border-radius: 15px;
    border: 3px solid #FC8D6C;
    padding: 15px;
    box-shadow:8px 8px 0px -3px rgba(252, 141, 108, 0.5);
    text-align: center;
}
.info-f a.btn-border-shadow--color {
  background: var(--color_brown1) !important;
}
.info-title{
    display: flex;
    justify-content: space-between;
    align-items:center;
}
.info-f-backimg{
    background-image: url(../images/top/info_img.png?220708);
    background-position: top right;
    background-size: 30%;
    background-repeat: no-repeat;
    height: auto;
}
.info-f img{
    width: 50%;
    height: auto;
}
.info-f2{
    display: flex;
    justify-content: center;
}
.info-box{
    width: calc((90% - 20px)/3);
	height: auto;
	background: #FCF6FA;
    border:1px solid var(--color_brown1);
    margin: 0 10px 20px 10px;
    vertical-align: top;
    }
.info-box-thum{
    position: relative;
    width: 100%;
    height: 200px;
    overflow: hidden;
    text-align: center;
    }
.info-box-thum img{
    width: 100%;
    height: 200px;
    object-fit: contain;
    }  
.info-box-thum .cat {
  position: absolute;
  top: 0;/*画像の左上に配置*/
  left: 0;
  margin: 0; /*余計な隙間を除く*/
  font-weight: bold;
  color: white;/*文字を白に*/
  background: var(--color_pink);
  font-size: 12px;
  line-height: 1;/*行高は1に*/
  padding: 10px 10px;/*文字周りの余白*/
    z-index: 555;
  } 
.info-title-box{
    margin: 10px;
    border-left: 2px solid var(--color_or);
    padding-left: 5px;
    text-align: left;
}
.info-title-box span{
    font-size: 14px;
    color: var(--color_or);
}
.info-title-box p{
    font-size: 18px;
    line-height: 1.6;
}
.info-content-box{
    margin: 10px;
    font-size: 14px;
    text-align: left;
}
.more{
    margin: 20px 0 0;
    text-align: right;
    height: 50px;
}
.more a{
    color:#fff;    
}
/* TOP-banner */
.banner-box{
    width: calc((100% - 30px)/3);
	height: auto;
    margin: 0 5px 80px 5px;
    vertical-align: top;
    box-sizing: border-box;
    }
.banner-box img{
    width: 100%;
    height: auto;
}

/* TOP-story */

.top-story-f{
    padding-top: 30px;
    display:flex;
    justify-content: center;
    margin-bottom: 30px;
}
.top-story-box{
    width: calc(100%/3);
    text-align: center;
}
.top-story-title{
    margin-left: 50px;
}
.top-story-f img{
    max-width: 450px;
    width: 90%;
    height: auto;
}
.top-story-box .top-shop-text{
    text-align: center;
}
.top-story-box .twitter-timeline{
    margin-left: 50px;}
.css-1dbjc4n{
    display: none !important;}

/* TOP-shop */
.top_shop-f-backimg{
    background-image: url(../images/top/main_bear02.png);
    background-position: bottom right;
    background-size: 25%;
    background-repeat: no-repeat;
}
.top-shop-f{
    margin-bottom: 30px;
    padding-top: 30px;
    padding-bottom: 100px;
}
.top-shop-text{
    margin: 20px 0;
    line-height: 1.8;
    font-size: 16px;
}
.top-shop-f2{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.top-shop-box{
    margin: 0 10px 20px;
    width: calc(90%/3);
}    
.top-shop-box_thum{
    background: #fff;
    border: solid 1px var(--color_brown1);
}
.top-shop-box img{
    object-fit: contain;
    object-position: center;
    width: 100%;
    height: 300px;
    background: var(--color_w);
}
.top-shop-box h3 {
  margin-bottom: 35px;
  padding: 10px 0 0;
  font-size: 16px;
  text-align: center;
  font-weight: bold;
  word-break:keep-all; 
}
.top-shop-box h3 a:hover{
    color:var(--color_or);
}
.top-shop-f .more{
    text-align: center !important;
}
.top-shop-f .more a.btn-border-shadow--color{
    background: var(--color_blue);
}


/* TOP-LINK */
.top-link-f{
    margin-bottom: 30px;
    padding-top: 30px;
}

.link-f{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;   
    padding-bottom: 100px;
    
}
.link-f-backimg{
    background-image: url(../images/top/main_bear03.png),url(../images/top/main_bear04.png);
    background-position: bottom left 8%,bottom right 8%;
    background-size: 20%,8%;
    background-repeat: no-repeat,no-repeat;
}

.link-box{
    margin: 0 10px 20px;
    width: calc((90% - 40px)/2);
    text-align: center;
    height: 70px;
}
.link-box h3 {
  font-size: 16px;
  display: flex;
  align-items: center;
  height: 50px;
  padding-left: 20px;
  text-align: left;
  word-break: break-all;
}
.link-box h3::before{
    content: url(../images/top/link_icon.png);
    padding-right: 10px;
}
.link-box .bt_frame,
.link-box  a.bt_frame{
  width: 100%;
  height: 60px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: var(--color_b);
}

.link-box a.btn-border-shadow:before {
  position: absolute;
  top: -7px;
  left: -7px;
  width: 99%;
  height: 90%;
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 3px solid #000;
  border-radius: 0.5rem;
}

.link-box a.btn-border-shadow:hover {
  width: 100%;
  padding: calc(10px - 7px) 0;
}

.link-box a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}

.link-box a.btn-border-shadow--color {
  border-radius: 0;
  background: var(--color_or_l);
}
.dif-color a.btn-border-shadow--color {
  border-radius: 0;
  background: var(--color_ye) !important;
}
.link-box a.btn-border-shadow--color:before {
  border-radius: 0;
}


/* Infoアーカイブ ****************************************************/

.info-archive-f{
    width: 70%;    
    margin: 0 auto 20px;
    border: 1px solid var(--color_brown1);
    background: var(--color_be2);
    display: flex;
}
.info-archive-f .cat{
    color: var(--color_green);
}
.info-archive-thum{
    width: 200px;
    padding: 20px;
    box-sizing: border-box;
}
.info-archive-thum img{
    object-fit: contain;    
    width: 150px;
    height: 150px;
}
.info-archive-box{
    padding: 20px;
    display: inline-block;    
    width: calc((100%-200px));
    vertical-align: top;
}

/*個別*/
.info-single-f{
    padding: 20px;
    margin: 0 auto 20px;
    border: 1px solid var(--color_brown1);
    background: var(--color_be2);
    overflow: hidden;
}

.info-single-f .cat{
    background: var(--color_green);
    padding: 5px 10px;
    border-radius: 10px;
    color:var(--color_w);
}
.info-single-title{
    margin:20px auto;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
}
.info-single-day{
    width: 15%;
    font-size: 14px;
}
.info-single-thum{
    text-align: left;
}
.info-single-thum img{
    width: 100%;
    height: auto;
}
.info-single-arrow-f{
    display: flex;
    justify-content: space-between;    
    margin-bottom: 30px;
}

/* Stroy ****************************************************/
.story_title_back{
    background-image: url(../images/story/title_back.png);
    background-position: top 35% center;
    background-repeat: no-repeat;
    background-size: cover;    
}
.story_back{
    background-image: url(../images/story/back.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;    
    min-height: 535px;
    padding-top: 50px;
}

.story_content_back{
    margin: 20px auto;
    width: 70%;
    background: rgba(255,255,255,0.5);
    border-radius: 15px;
    padding: 15px 20px;
}

/*　カテゴリーメインの時　*/
.story-cat.story-main{
    width: 80%;
    height: auto;
    margin: auto;
    text-align: center;
    content: url(../images/story/main_title.png?1014);
    object-fit: contain;
}
/*　カテゴリーサブの時　*/
.story-cat.story-sub{
    width: 70%;
    height: auto;
    margin: auto;
    text-align: center;
    content: "サブ";
    object-fit: contain;
}

.story_content{
    margin:30px auto;
    padding: 20px;
    text-align: center;
    line-height: 1.8;
    font-size: 16px;
    color: var(--color_brown1);
}



/* Library ****************************************************/
.library_title_back{
    background-image: url(../images/library/title_back.png);
    background-position: top 20% center;
    background-repeat: no-repeat;
    background-size: cover;    
}

.library_back{
    background-image: url(../images/library/back.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;    
    padding-top: 50px;
    padding-bottom: 50px;
}
.library_back-new{
    background-image: url(../images/library/back.jpg);
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;    
    padding-bottom: 50px;
}
.library_shelf_back{
    margin: 20px auto;
    width: 90%;
    max-width: 750px;
    background: rgba(255,255,255,0.7);
    border-radius: 15px;
    padding: 15px 20px;
}
/* 棚 */
.library_shelf{
    background-image: url(../images/library/shelf.png?1338),url(../images/library/shelf.png?1338),url(../images/library/shelf.png?1338);
    background-position: left 150px,left 500px,left 850px;
    background-repeat: no-repeat;
    background-size: contain;    
    min-height: 700px;
}
.library_shelf ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 80%;
    margin: auto;
    }
.library_shelf ul li{
    margin-bottom: 150px;
    padding: 0 10px;
    box-sizing: border-box;
    width: calc(100%/3);
    height: 200px;
    text-align: center;
}
.library_shelf ul li a{
    padding-top: 120px;
    color: var(--color_w);
    display: block;
    height: 100%;
}
.library_shelf ul li a:hover{
    color: var(--color_ye);
}
.library_cat{
    height: 150px;    
}
/*本の画像、トリミング注意*/
.library01{/*うす茶色*/
    background-image: url(../images/library/hb_category_original.jpg),url(../images/library/book01.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;        
}
.library02{/*紺色*/
    background-image: url(../images/library/hb_category_amourCollection.jpg),url(../images/library/book02.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;            
}
.library03{/*赤色*/
    background-image: url(../images/library/hb_category_Limited_Edition.jpg),url(../images/library/book03.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;          
}
.library04{/*ミモザ*/
    background-image: url(../images/library/hb_category_mimosa.jpg),url(../images/library/book03.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;          
}
.library05{/*焦げ茶色*/
    background-image: url(../images/library/hb_category_astragalus.jpg),url(../images/library/book04.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;            
}
.library06{/*深緑*/
    background-image: url(../images/library/hb_category_clover.jpg),url(../images/library/book05.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;            
}
.library07{/*グッズ　うす茶色*/
    background-image: url(../images/library/hb_category_original.jpg),url(../images/library/book01.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;        
}
.library08{/*ファンクラブ　紺色*/
    background-image: url(../images/library/hb_category_amourCollection.jpg),url(../images/library/book02.png?1505);
    background-position: 52px 35px,center;
    background-repeat: no-repeat,no-repeat;
    background-size: 50%,contain;            
}

/*Library カテゴリ選択時の表示*/
.library-list{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 50px;
}
figure{
    margin: 0 !important;
}
.library-list-box{
    box-sizing: border-box;
    width: calc(100%/4);
    padding: 10px;
    height: auto;
}
.library-list-box img{
    width: 90%;
    height: 250px;
    object-fit: cover;
    border: 1px solid var(--color_brown1);
}
.library-list-box-title{
    text-align: left;
    font-size: 14px;
    color: var(--color_brown1);
}
/* 1015 pre open時　非表示*/
.library-list-box .more{
  display: none;
  text-align: center;  
}
.library-list-box .more a{
    font-size: 90%;
}

.library-list-box.bt_frame,
.library-list-box a.bt_frame{
  width: 180px;
  height: 33px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: var(--color_w);
}
.library-list-box a.btn-border-shadow:before {
  position: absolute;
  top: -5px;
  left: -5px;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  border: 2px solid #000;
  border-radius: 0.5rem;
}

.library-list-box a.btn-border-shadow:hover {
  width: 180px;
  padding: calc(10px - 3px) 0;
}

.library-list-box a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}
.library-list-box a.btn-border-shadow--color:before {
  border-radius: 0;
}
.library-list-box a.btn-border-shadow--color {
  border-radius: 0;
  background: var(--color_or_l) !important;
}

/*single*/
.library-single_bg{
    background: rgba(0,0,0,0.8);
    height: 100vh;
    position: absolute;
    width: 100%;
}

/*Library　モータルウィンドウ*/
.remodal{
    background: rgba(255,255,255,0) !important;
    padding: 0 !important;
    max-width: 75% !important;
}
.remodal-close{
    color: var(--color_brown1) !important;
    left:94% !important;
    top:6% !important;
}
.openwindow-book{
    background-image: url(../images/library/book_open.png?1014);
    background-position: top 20% center;
    background-repeat: no-repeat;
    background-size: 100%; 
    height: 900px;
}
.openwindow{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: auto;
    height: 700px;
}
.openwindow-box{
    width: calc(98%/2);
}
.openwindow-box-l{
    padding: 70px 10px 0 70px;    
}
.openwindow-box-l p{
    margin-bottom: 20px;
}
.openwindow-box-r{
    padding: 70px 70px 0 10px;    
}
.openwindow-box img{
    border-radius: 10px;
    width: 100%;
    height: auto;
    max-height: 550px;
    object-fit: contain;
}
.openwindow-box p{
    font-size: 20px;
    text-align: left;
    height: 35px;
}
.openwindow-content,
.openwindow-content p{
    text-align: left;
    font-size: 16px;
    line-height: 1.6;
    height: auto;
}

/* DOWNLOAD  ---------------------------------*/
.download_title_back{
    background-image: url(../images/library/title_back.png);
    background-position: top 20% center;
    background-repeat: no-repeat;
    background-size: cover;    
}

.download-f{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}
.download-box{
    width: calc(100%/2);
    padding: 10px;
}
.download-box p{
    height: 40px;
    line-height: 40px;
}
/* 　*/
.download-box p {
    width: 50%;
	position:relative;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
	line-height:2em;
	padding-left:3em;
    height: 70px;
}
.download-box p:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/download/title.png) no-repeat;
	background-size:contain;
    
}
.download-img{
    margin-bottom: 10px;
    height: auto;
    object-fit: contain;
}
.download-box img{
    width: 100%;
    height: auto;
}
.download-list-title{
    color: var(--color_brown1);
    width: 100%;
    height: 45px;
    line-height: 45px;
}
.download-list{
    margin-top: 10px;
    background: var(--color_ye_l);
    padding: 10px;
    border-radius: 10px;
    line-height: 1.8;
}
.download-list a{
    text-decoration-line: underline;   
}
.download-info{
    margin: 50px auto 30px;
    padding: 10px 20px;
    background: var(--color_be);
    border: 1px solid var(--color_brown1);
    width: 100%;
    line-height: 1.5;
    color: var(--color_brown1);
}
.download-info p{
    width: 15%;
    height: 40px;
    line-height: 38px;
    font-size: 110%;
    margin: 0 auto 30px;
    text-align: center;
    background: var(--color_brown2);
    color: var(--color_w);
    outline: 2px solid rgb(255, 255, 255);
    outline-offset: -5px;    
}
.download-single h2{
    width: 100%;
}
.download-back{
    margin-top: 100px;
    margin-bottom: 50px;
}
.download-list-f .top-story-title,
.download-f .top-story-title,
.download-back .top-story-title{
    margin-left:0;
    margin-bottom: 20px;
}
.back-title{
    height: 45px;
    line-height: 45px;
    font-size: 16px;
    border-left: 5px solid var(--color_or_l);
    padding-left: 15px;
    margin-bottom: 20px;
    background: var(--color_be);    
}
.back-title a{
    display: block;
}
.back-title a:hover{
    color: var(--color_or);
}
.back-title:hover{
    background: var(--color_w);    
}
.download-back p{
    width: 20%;
    height: 40px;
    line-height: 38px;
    font-size: 110%;
    margin: 50px auto 30px;
    text-align: center;
    background: var(--color_brown2);
    outline: 2px solid rgb(255, 255, 255);
    outline-offset: -5px;    
}
.download-back p a{
    color: var(--color_w);
    display: block;
}



/* Q&A  --------------------------------------*/
.accordion {
  width: 100%;
}

/* inputのチェックボックスを非表示 */
.accordion-hidden {
  display: none;
}

/* 見出しボタン部分 */
.accordion-open {
  display: block;
  padding: 20px 50px 20px 10px;
  background: var(--color_be);
  cursor: pointer;
  margin: 10px 0 0;
  position: relative;
  border:1px solid var(--color_brown1)
}

/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
  content: '';
  width: 20px;
  height: 3px;
  background: var(--color_brown1);
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
}

/* アイコンのー */
.accordion-open::after {
  transform: translateY(-50%) rotate(90deg);
  transition: .5s;
}

/* アコーディオンが開いたらーに */
.accordion-hidden:checked+.accordion-open:after {
  transform: translateY(-50%) rotate(0);
}

/* アコーディオン中身部分 */
.accordion-inner {
  display: block;
  height: 0;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  transition: 0.5s;
  /* 表示速度の設定 */
  cursor: pointer;
  background: var(--color_be);
  border-bottom: 1px solid  var(--color_brown1);
  border-left: 1px solid  var(--color_brown1);
  border-right: 1px solid  var(--color_brown1);
    
}

/* チェックボックスにチェックが入ったら中身部分を表示する */
.accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 10px;
}

.accordion_qa .Q,
.accordion_qa .A {
  position: relative;
  padding-left: 10px;
}

.accordion_qa .Q::before,
.accordion_qa .A::before {
  font-size: 1.5em;
  display: block;
  position: absolute;
  top: -.6em;
  left: -1.3em;
}

.accordion_qa .Q::before {
  content: 'Q.';
  margin-top: 3px;
  padding: 5px;
  background: var(--color_ye);
}

.accordion_qa .A::before {
  content: 'A.';
  margin-top: 8px;
  padding: 3px;
  background: var(--color_pink);
}

.accordion_qa .accordion-open {
  padding-left: 2.5em;
}

.accordion_qa .accordion-hidden:checked+.accordion-open+.accordion-inner {
  height: auto;
  opacity: 1;
  padding: 20px 10px 10px 2.5em;
}

/* Concept*/
.concept_back{
    background-image: url(../images/top/shop_back.png);
    background-position: top left;
    background-repeat: repeat-x;
    background-size: auto;    
    padding-top: 50px;
    min-height: 500px;
}


/* From ****************************************************/
.from_title_back{
    background-image: url(../images/from/title_back.jpg?0426);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;    
}
.from-f{
    width: 50%;    
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;
}
.from-f .cat{
    color: var(--color_green);
}
.form-box{
    width: calc(50% - 40px);
    height: auto;
    margin: 0 20px 20px;
    padding: 10px;
    background: var(--color_be2);
    border: 1px solid var(--color_brown1);
}
.form-thum img{
    object-fit: contain;    
    width: 100%;
    height: 250px;
    background: #fff;
}
.form-title-box{
    margin: 10px 0;
}
.form-title-box a{
    color:var(--color_or);
    font-size: 18px;
}
.form-content-box{
    height: auto;
    margin-bottom: 10px;
    font-size: 14px;
    text-align: left;
    border-bottom: 1px solid var(--color_brown1);
    padding-bottom: 10px;
}
.form-box .cat{
    background-color: var(--color_brown1);
    color: var(--color_w);
    padding: 3px 5px;
}
.form-box-under{
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
}
.form-more{
    margin: 20px 0 0;
    text-align: center;
    height: 50px;
}
.form-more a{
    color:#fff;    
}
.form-more .btn-border-shadow--color{
    background: var(--color_brown1);
}

/* Column ****************************************************/
.column-menu{
    display: flex;
    justify-content: center;
}
.column-cat{
    width: 150px;
    height: 45px;
    line-height: 45px;
    margin: 20px 5px;
    border: 3px solid var(--color_pink2);
    background: var(--color_pink2);
    text-align: center;
}
.column-cat-on{
    width: 150px;
    height: 45px;
    line-height: 45px;
    margin: 20px 5px;
    border: 3px solid var(--color_pink2);
    text-align: center;
    color:var(--color_pink2);    
}
.column-cat a{
    color:var(--color_w);
    display: block;
}
.column-cat a:hover{
    color:var(--color_w);
    display: block;
}
.column-cat:hover{
    background: var(--color_or_l);
}
.main-title{
  margin:20px auto;
  padding-top: 20px;
  background-image: url(../images/join/top_img_side1.png),
      url(../images/join/top_img_side2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 45% 0,55% 0;        
  background-size: contain;    
  height: 60px;
  text-align: center;
  font-size: 24px;
}
.c-comic-b{
    background: var(--color_be2);
  background-image: url(../images/top/story_back1.png),
      url(../images/top/story_back2.png);
  background-repeat: no-repeat,no-repeat;
  background-position: top left,bottom right;    
  background-size: contain;
}
.column-box{
    width: calc(50% - 40px);
    height: auto;
    margin: 0 20px 20px;
    padding: 10px;
    background: var(--color_w);
}
/*縦長用*/
.column-thum-comic img{
    object-fit: contain;    
    object-position: top;
    width: 100%;
    height: auto;    
}
/*横長用*/
.column-thum img{
    object-fit: cover;    
    object-position: top;
    width: 100%;
    height: 250px;
}
.c-movie-b{
    background: var(--color_be);
    background: var(--color_be2);
  background-image: url(../images/top/story_back1.png),
      url(../images/top/story_back2.png);
  background-repeat: no-repeat,no-repeat;
  background-position: top left,bottom right;   
  background-size: contain;
}

.from-f .more{
    width: 100%;
}
.from-f .more a.btn-border-shadow--color{
    background:var(--color_brown1);
}
.from-f .more a.btn-border-shadow:before{
    top:-5px;
    left:-5px;
}
.from-f .more a.btn-border-shadow:hover:before{
    width: 100%;
    top:1px;
    left:0;
}
.column-f{
     max-width: 90%; /* ここに動画の横幅を指定 */
}
.column-f .movie,
.column-video {
  position: relative;
  width:100%; /* 横幅は100%にしておく(ここを変えたい場合は実装コード2の方法を確認してください) */
  height:0; /* 高さは0にしておく(padding-topで高さを指定するため) */
  padding-top: 56.25%; /* 高さを指定(16:9) */
}
/* YouTube埋め込み用のiframe */
.column-f .movie iframe,
.column-video iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.column-box-video{
    height: auto !important;    
}

/* Shop ****************************************************/
.shop{
    width: 60%;     
    margin: auto;
    padding-bottom: 100px;
}
.shop_title_back{
    background-image: url(../images/shop/title_back.jpg);
    background-position: bottom 43% center;
    background-repeat: no-repeat;
    background-size: cover;    
}
.shop-backimg{
    background-image: url(../images/shop/shop_bear01.png);
    background-position: bottom right 3%;
    background-size: 20%;
    background-repeat: no-repeat;
} 
.shop-menu{
    border: 2px solid var(--color_blue); 
    margin: 25px 0 25px auto;
    height: 40px;
    line-height: 40px;
    background: var(--color_blue);
    width: 150px;
    text-align: center;
}
.dashicons{
    height: 40px !important;
    line-height: 40px !important;    
}
.shop-menu a{
    color: var(--color_w);
    display: block;
}
.shop-menu:hover{
    border: 2px solid var(--color_blue); 
    background: var(--color_w);
    color: var(--color_blue);
}
.shop-menu a:hover{
    color: var(--color_blue);
    display: block;
}
.cat_menu{
    margin: 10px auto 30px;
}
.cat_menu ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.cat_menu li{
    padding: 0 15px;
    text-align: center;
    border-right: 1px solid var(--color_brown1);
}
.cat_menu li:last-child{
    border-right: none;    
}
.cat_menu .current{
    border-bottom: 1px solid var(--color_brown1);
}
.cat_menu li a:hover{
    color: var(--color_or);    
}
.shop-f{
    width: 100%;
    margin: 0 auto 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid var(--color_brown1);
    background: var(--color_be2);
}
.shop-box{
    width: calc((100% - 160px) /4);
    height: auto;
    margin: 0 20px 30px;
    padding: 10px;
}
.top-shop-box_thum,
.shop-thum{
    position: relative;
    width: 100%;
    height: auto;
    text-align: center;
    }
.top-shop-box ul,
.shop-box ul{
  position: absolute;
  top: 0;
  left: 0;
 display: -webkit-flex;
 display: flex;
 flex-wrap: wrap;
 -webkit-flex-wrap: wrap;
 justify-content: flex-start;
 -webkit-justify-content: flex-start;
 align-items: center;
 -webkit-align-items: center;    
}
.top-shop-box ul li.cat,
.shop-box ul li.cat{
  font-weight: bold;
  color: white;/*文字を白に*/
  background: var(--color_pink);
  font-size: 12px;
  line-height: 1;/*行高は1に*/
  padding: 10px 10px;/*文字周りの余白*/
 z-index: 555;
    margin-right: 5px;
}
.shop-thum img{
    border: 1px solid var(--color_brown2);
    object-fit: contain;    
    object-position: center;
    width: 100%;
    max-width: 250px;
    height: 250px;
    background: var(--color_w);
}
.top-shop-box .member_cat img,
.shop-box .member_cat img{
  border: none;
  position: absolute;
  bottom: 10px;
  right: 5px;
  width: 40%;
  height: auto;
  background-color: unset !important;
}
.shop-title a,
.shop-title{
    font-size: 18px;
    color: var(--color_brown1);
}
.shop-title span{
    font-size: 14px;
}


/* logo ****************************************************/
	.logo {
		padding: 0 0 40px 0;
	}

 		
/*********
 会社概要
***********/      
.company h3 {
  margin: 30px 0 20px;
  width: 90%;
  position: relative;
  display: inline-block;
  padding: 0 0 0 90px;
  font-weight: bold;
  font-size: 120%;
}
.company h3:before {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 70px;
  height: 3px;
  background-color:#333;
}
.company h3:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 84%;
  height: 3px;
  background-color: #333;
}
.company h3:before {
  left:0;
}
.company h3:after {
  right: 0;
}    
.company dl{
    width: 70%;
    border-bottom: 1px solid #333;
    margin: auto;
    overflow: hidden;
    padding: 20px 0 20px;
    }
.company dt{
    float: left;        
    width: 20%;
    min-width: 200px;
    font-weight: bold;
    }
.company dd{
    overflow: auto;
    }     
      
    
/* midashi ****************************************************/
.mi_01 {
	margin: 50px 0 30px 0;
	position: relative;
	padding-bottom: .5em;
	border-bottom: 1px solid #bfbfbf;
	font-size: 100%;
	clear: both;
	text-align: center;
	}


/* 壺+ハチミツバー　*/
.mi_02 {
	position:relative;
    text-align: left;
    font-size: 30px;
    font-weight: bold;
	line-height:2em;
	padding-left:60px;
	background:url(../images/title_bar.png) no-repeat;
    background-position: bottom left;
    height: 90px;
    min-width: 250px;
    margin-bottom: 20px;
}
.mi_02:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/title_icon.png) no-repeat;
	background-size:80%;
    background-position: center;
}
.mi_02 span{
    font-size: 16px;
    font-weight: normal;
}

.mi_03 {
    margin:2em auto;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px var(--color_brown1);
    border-bottom: solid 2px var(--color_brown1);
    
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    width: 300px;
    color:  var(--color_brown1);
}
.mi_03:before, .mi_03:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: var(--color_brown1);
}
.mi_03:before {left: 10px;}
.mi_03:after {right: 10px;}

.mi_03 img{
    vertical-align: sub;
    height: 35px;
    width: auto;
}

/* 壺のみ　
.mi_03 {
	position:relative;
    text-align: left;
    font-size: 20px;
    font-weight: bold;
    margin: 20px 0;
	line-height:2em;
	padding-left:3em;
}
.mi_03:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/title_icon.png) no-repeat;
	background-size:contain;    
}*/
/* クローバーのみ　*/
.mi_04 {
	position:relative;
    text-align: left;
    font-size: 16px;
    font-weight: bold;
    margin: 20px 0 10px;
	line-height:2em;
	padding-left:2.2em;
}
.mi_04:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/top/story_back4.png) no-repeat;
	background-size:contain;    
}

.sub_mi_01 {
	margin: 0 auto 20px;
	padding: 0 0 10px 0;
    width: 100%;
	border-bottom: 1px solid #000;
	font-size: 24px;
	clear: both;
	line-height: 1.2;
	}
.sub_mi_02 {
	margin: 20px auto;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #000;
	font-size: 80%;
	clear: both;
	line-height: 1.2;
	}

	
/* footer ****************************************************/
#footer {
    margin-top: auto;
    box-sizing: border-box;
	padding: 20px 0;
    background: var(--color_brown1);
	text-align: center;
	color: #fff;
	font-size: 100%;
    letter-spacing:0.2em;
}    
.footer_area{
    margin: auto;
    max-width: 700px;
    width: 80%;
    }       
.footer_area img{
    width: auto;
    height: 100px;
}    
.footer-box{
    vertical-align: top;
    max-width: 1000px;
    margin: auto;
    }
#FOOTER_MENU{
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    width: 100%;
    margin: auto;
    }    
#footer .footer_menu li{
    width: calc(100% / 3);
    height: 50px;
    line-height: 50px;
    text-align: left;
    }    
#footer .footer_menu li a {
	color: #fff;
    padding-left: 50px;
	}
#footer li a:hover {
    color: red;
	}
#footer_p .copyright {
    padding-top: 10px;
    font-size: 90%;
	color: var(--color_w);
	text-align: center;
	}
#footer_p {
	margin: 0 auto 0px auto;
	padding: 10px 0;
    width: 100%;
    background: var(--color_b);
	text-align: center;
	color: var(--color_w);
	font-size: 80%;
}
#footer_p a {
	color: var(--color_w);
    text-decoration: underline;
}	

@media screen and (max-width: 1440px) {    
.link-f-backimg{
    background-size: 20%,12%;}
.shop-box{
    width: calc((100% - 60px) /3);
    height: auto;
    margin: 0 10px 30px;
    padding: 0;
}    
}

@media screen and (max-width: 1380px) {
.remodal{
    max-width: 80% !important;
}    
.openwindow-book{
    height: 700px;
    }
.openwindow-box-l{
    padding: 80px 10px 0 40px;    
    }
.openwindow-box-r{
    padding: 80px 40px 0 10px;    
}    
.remodal-close{
    left:93% !important;
    top:3% !important;
}    
}
/******************************************
 PC END
**********************************************/

@media screen and (max-width: 1024px) {
  
.tabs__service,
.tabs {
  width: 900px;
}    
    
/* クマ配置　*/
.join-bear{
  background-position: top 10% left,top 18% right,top 37% left,bottom center;        
  background-size: 28%,28%,23%,60%;    
}    
.join-bear2{
  background-size: 27%;    
}        
.join-welback{
    background-position: top right,80% 12%;        
}   
.join-messeback{
    background-position: top right 10px,33% 10%;
    margin-bottom: 280px;
    height: auto;
}        
.join-wel-text{
    padding-bottom: 30px;
    }
.block-f{
    margin: auto;
    max-width: 90%;
}    
.block2{
  background-position: top left,bottom right,90% 20%,90% 75%,5% 85%;
}    
.link-f-backimg{
    background-position: bottom left 8%,bottom right;
    background-size: 25%,15%;
}    
.info-archive-f{
    width: 90%;
    }    
.library-list-box{
    width: calc(100%/3);
    padding: 10px;}      
.library-list{
        padding: 5px;}   
.library-list-box img{height: 150px;} 
.remodal{max-width: 100% !important;}    
.remodal-close{
    left:92% !important;
    top:7% !important;
}
.story_content_back{
    width: 90%;
}
.from_title_back{
    background-position: bottom 35% center;
}
.from-f{
    width: 80%;    
}    
.form-title-box a{font-size: 16px;}    
.main-title{
  background-position: 40% 0,60% 0;}    
/*Shop*/
.shop{
    width: 90%;    
    padding-bottom: 150px;
}     
.shop-box{
    width: calc(30% - 20px);
    margin: 0 10px 20px;
}
}



@media screen and (max-width: 835px) {
.top-img-back{
  background-position: 25% 100%,75% 100%;        
  background-size: 18%;
}     
.join-welback{
    background-position: top right,75% 10%;        
}     
   
.tabs__service,
.tabs {
    width: 700px;
    }    
.top-menu li{
    height: 230px;
}        
.info-f2{
    flex-wrap: wrap;
}    
.block2{
  background-position: top left,bottom right,90% 20%,90% 68%,0% 80%;    
}       
.top-story-f img{
    max-width: 350px;
    }   
.download-img{
    margin-bottom: 10px;
    object-fit: contain;
} 
.story_content_back{
    width: 90%;
}
.shop,.from-f{
    width: 95%;    
}   
.form-title-box a{font-size: 14px;}      
.form-box{height: 470px;}

}

@media screen and (max-width: 768px) {
/******************************************************************************
 SP Layout
******************************************************************************/
#wrap {
 width: 100%;
 position: relative;
 height: auto !important; /*IE6対策*/
 height: 100%;
 min-height: 100vh;
 font-size:16px;
 line-height:1.5em;
 min-width: 90%;
}

.inner {
 clear:both;
 margin:0 auto;
 padding: 0;
 width: 90%;
 height:auto;
 position:relative;
}
.pc_only{
    display: none;
}
.sp_only{
    display: block;    
}
/* logo ****************************************************/
    .logo{
        float: left;
    }    
      
/* header ****************************************************/
	#header_logo {
        position: fixed;
        width: 100%;
		height: 80px;
        margin: 0;
        z-index: 9999;
	}   
    #ico_box {
		position: relative;
        height: 40px;
	}
	nav #ico_box {
		display: none;
	}

/* main contents ****************************************************/

#container {
 margin:0 auto;
 padding: 80px 0 0 0;
}
#main {
	margin: 0px auto;
	padding: 80px 0 0 0;
	width: 100%;
	}
 
.entry-content{
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 10px;
}    
.entry-content-event a,
.entry-content a{
    text-decoration: underline;}    
	
/* header ****************************************************/

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
    font-size: 2em;
  } 
    
/*JOIN*/
/* クマ配置　*/
.join-bear{
  background-position: top 15% left,top 21% right,bottom center;        
  background-size: 23%,23%,70%;    
}     
    
.join-bear2{
  background-position: top right;        
  background-size:35%;    
}     
.top-img img{
    width: 57% !important;
    height: auto;
}
/*Library*/
.remodal-close{
    left:89% !important;
    top:7% !important;
}    
        
    
/* midashi ****************************************************/
.mi_01 {
	margin: 40px auto 20px auto;
	position: relative;
	padding-bottom: .5em;
	border-bottom: 1px solid #bfbfbf;
	font-size: 157%;
	width: 100%;
	text-align: center;
	}
    
.mi_02 {
    position: relative;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 20px;
}
.mi_03{
    margin: 10px auto;}
.sub_mi_01 {
	margin: 20px auto 20px auto;
	padding: 0 0 10px 20px;
	border-bottom: 1px solid #000;
	font-size: 128%;
	clear: both;
	line-height: 1.2;
	}
.sub_mi_02 {
	margin: 20px auto;
	padding: 0 0 10px 0;
	border-bottom: 1px solid #000;
	font-size: 128%;
	clear: both;
	line-height: 1.2;
	}
	
/*Join*/    
.top-img-back{
    height: 530px;
    background-size: 13%;
    background-position: 25% 93%,75% 93%;
    }    
.topentry_back{
    background-size: contain;
    background-repeat: repeat-y;
}       
.top-img-back{
  background-position: 25% 95%,75% 95%;        
}         
.join-messeback{
    background-position: top right,40% 10%;        
    height: auto;
    padding-bottom: 30px;
}
.join-welback{
    background-position: top right,92% 13%;           
    }
.join-wel-text{
    width: 90%;
    padding: 0;
    }
.tab_content_service, .tab_content{
    padding: 40px 10px 0;
    }
.membership-title-min{
    padding: 8px 0 8px 8px;
    height: auto;
    line-height: unset;
    font-weight: bold;
    font-size: 16px;
    background-position: top left;        
}    
/* TOP-banner */
.banner-box{
    margin: 0 5px 20px 5px;
    vertical-align: top;
    box-sizing: border-box;
    }    
/*info*/ 
.info-title-box a{
    font-size: 14px;       
    }    
.info-content-box{
    font-size: 12px;           
    }
/* stroy*/
.top-story-title{
    margin-left: 0;
}    
.top-story-box{
    width: calc(100%/2);
    text-align: center;
}    
/* Shop */
.shop-box{
    width: calc(33% - 20px);
    height: 260px;
    margin: 0 10px 20px;
    padding: 0;
}
.shop-thum img{
    max-width: 200px;
    height: 200px;
}       
.top-shop-box ul li.cat,    
.shop-box ul li.cat{
  font-size: 8px;
  line-height: 1;/*行高は1に*/
  padding: 3px 5px;/*文字周りの余白*/
    margin-bottom: 3px;
}       
.shop-title a, .shop-title{
    font-size: 16px;
    }    
.shop-title span{
    font-size: 12px;
    }    
.block5{
    margin-bottom: 50px;
    }    
.twitter-timeline{
    margin: auto !important;
}    
    
/* footer ****************************************************/
#footer {
	padding: 20px 0;
	text-align: center;
	color: #000;
    border-top: solid 1px;
	font-size: 100%;
    letter-spacing:0.2em;
}         
.footer_area{width: 100%;}    
.footer_menu{
    text-align: left;
    }    	
#footer .footer_menu li a {
	color: #fff;
	}
#footer li a:hover {
    color: red;
	}
#footer_p .copyright {
    margin-top: 10px;
    padding-top: 10px;
    font-size: 90%;
	text-align: center;
	}
#footer_p {
	margin: 0 auto 0px auto;
	padding: 10px 0;
	text-align: center;
	font-size: 80%;
}
#footer_p a {
    text-decoration: underline;
}	
}

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

@media screen and (max-width: 600px) {
#main{
    padding: 80px 0 0 0;  
    }    
.logo{
        float: left;
        width: 33%;
        left:0;
        padding: 0;
        margin: 0;
    }       
    .logo img{
        width: 100% !important;
        height: auto;
        margin-top: 15px;
        margin-left: 5px;
        left:0;
    }      
#header_logo_top {
    background-position: bottom center;
	height: 130px;
	}    
 
/* 壺+ハチミツバー　*/
.mi_02 {
    margin-bottom: 20px;
    font-size: 20px;
	line-height:2em;
	padding-left:40px;
	background:url(../images/title_bar.png) no-repeat;
    height: 70px;
    background-size: contain;
    background-position: bottom left;
    min-width: 180px;
}
.mi_02:before{
	position:absolute;
	left:0;
	content:"";
	display:inline-block;
	width:2em;
	height:2em;
	background:url(../images/title_icon.png) no-repeat;
	background-size:85%;
    
}
.mi_02 span{
    font-size: 12px;
    font-weight: normal;
}    
.breadcrumb{
    padding: 20px 0 20px 10px;
    }    
    
/*JOIN*/    
 /* クマ配置　*/
.join-bear{
  background-image: url(../images/bear/set001.png);  
    background-position: bottom center;
    background-size: contain;
    background-repeat: no-repeat;
}      
.join-bear2{
  background-image: none;  
}      
     
.top-img img{
    width: 95% !important;
    height: auto;
}    
.top-img-back{
  background-image: url(../images/join/top_img_side1.png),
      url(../images/join/top_img_side2.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 100%,100% 100%;        
  background-size: 25%;    
  height: 480px;
}    
.join_area ul{
    width: 100%;
    }    
.join_area li a{
    padding-left: 60px;
}
.join-wel-text{width: 90%;}    
.join-wel-text span{padding-left: 5px;
    font-size: 16px;}    
.join-welback{
    margin-top: 50px;
    width: 100%;
    padding: 80px 0 0;
    background-image: url(../images/join/honypot_font.png),url(../images/join/title_icon.png);
    background-repeat: no-repeat,no-repeat;
    background-position: top right,100% 10%;        
    background-size: 50%,auto;    
    height: 450px;
}
.join-messeback{
    background-position: top right,35% 6%;
    background-size:40%,auto;
    margin-bottom: 180px;
    }
.membership-title-min{
    padding: 10px 0 10px 12px;
    line-height: 1.5;
    background-position: top left;        
    background-size: 12%;    
} 
.membership-f{
    margin: 10px auto 30px;
    width: 100%;
    padding-top: 30px;
    background-image: url(../images/join/back_flower.png);
    background-repeat: no-repeat;
    background-position: top left 10%;        
    background-size: auto;        
}    
.tabs__service,
.tabs {
    width: 90%;
    }    
.membership-tab{margin-top: 50px;}    
.tab_content_service,
.tab_content {
  padding: 40px 20px 0;
}
.membership-f1{
    flex-wrap: wrap;
    }    
.membership-box1{
    margin: 5px auto 10px;
    width: 98%;
    }    
.top-join-text{padding-left: 0;}    
.service_menu li{width: 100%;}    
    
/*TOP*/ 
.top_slider{
    width: 90%;
    padding-top: 50px;}    
#sns-navi{
  top: 130px;
}
.sns-f{
    padding-top: 50px;
}
.sns-box{
    width: 30px;
    height: 100px;
}
.sns-f a{
    width: 30px;
    height: 30px;    
    text-align: center;
    line-height: 30px;
}   
.top-menu{margin: 0 auto;}    
.top-menu li a{
    padding: 175px 0 70px;
    font-size: 14px;
    line-height: 1;
    }    
.top-menu li a span{font-size: 10px;}    
.banner-box img{
    width: 100%;
    height: auto;
}    
.block-f{
    max-width: 95%;
    }    
.block2{
  margin-top: 0;
  width: 100%;
  height: auto;
  background-image: url(../images/top/story_back1.png),      url(../images/top/story_back2.png),url(../images/top/story_back3.png),
      url(../images/top/story_back4.png),
      url(../images/top/story_back5.png);
  background-repeat: no-repeat,
      no-repeat,no-repeat;
  background-position: top left,bottom right,90% 30%,80% 80%,8% 85%; 
  background-size: auto,auto,12%,10%,20%;
}
.info-f-backimg{
    background-position: top 5% right;
}
.top-story-f{flex-wrap: wrap;}
.top-story-box{
    width: 100%;
    margin: 0 auto 20px;}
.top-story-box .top-shop-text{
    font-size: 100%;
    line-height: 1.5;
    margin: 0 auto;
    }        
.top-shop-f{
    padding-bottom: 40px;
    }
.top_shop-f-backimg{
    background-size: 35%;
}
.top-shop-text{
    font-size: 100%;       
    }    
.block4{
    margin-top: 0;
    background-position: top right;
    background-size: 50%;
    min-height: unset;
} 
.top-link-f{
    padding-top: 20px;
}
.top-menu{
    margin: 0;
    }    
.top-menu ul{
    height: 150px;
    }    
.info-title .mi_02{
    height: 55px;
    min-width: 130px;
    }
.info-title-min{width: 100%;}    
.info-title img{
    width: 50%;
    height: auto;
    }    
.info-box{
    width: 100%;
    border:1px solid var(--color_brown1);
    margin: 10px;
    vertical-align: top;
    }    
.info-box-thum{
    position: relative;
    width: 100%;
    height: 120px;
    overflow: hidden;
    text-align: center;
    }
.info-box-thum img{
    width: 100%;
    height: 120px;
    }      
/* TOP-banner */
.banner-box{
    width: 100%;
	height: auto;
    margin: 0 10px 20px 10px;
    box-sizing: border-box;
    }    

.top-story-f{
    padding-bottom: 30px;
    }
.top-story-f img{
    max-width: 100%;
    height: 250px;
}    
.top-shop-f .mi_02,
top-link-f .mi_02{
    height: 70px;
    }
.top-shop-f2{
    justify-content: flex-start;
    }    
.top-shop-box{
    margin: 10px 5px;
    width: calc(90%/2);
    text-align: center;
}    
.top-shop-box img{
    object-fit: contain;
    width: 95%;
    height: 200px
}
.top-shop-box h3{
    margin-bottom: 0;
    font-size: 90%;
    }
.info-content-box{
    margin: 5px;
    }
.link-f-backimg{
    background-image: url(../images/top/main_bear03.png);
    background-position: bottom left 3%;
    background-size: 40%;
    background-repeat: no-repeat;
}    
.link-box{
    margin: 0 5px 20px;
    width: calc((90% - 20px)/2);
    text-align: center;
    height: auto;
}    
.link-box h3{
    padding-left: 0;
    font-size: 14px;
    padding-right: 5px;
} 
.link-box h3::before{
    padding-right: 2px;
    transform: scale(0.7);}   
.bt_frame,
a.bt_frame,
button.bt_frame {
  width: 130px;
  height: 30px;
  font-size: 14px;
  line-height: 1.5;
}    
a.btn-border-shadow:hover {
  width: 130px;
  padding: calc(10px - 7px) 0;
  line-height: 1.7;
}    
.link-box .bt_frame, .link-box a.bt_frame{
    font-size: 13px;
    letter-spacing: -0.01em;
    }    
    
/* Info*/    
.info-archive-f{width: 90%;
    }
.info-archive-thum{
    padding: 10px;
    width: 100px;}    
.info-archive-thum img{width: 100px;}    
.info-archive-box{padding: 10px 10px 10px 20px;}    
.info-archive-box .cat{
    font-size: 90%;
    padding-left: 15px;}  
.info-single-day{
    width: 25%;
    font-size: 12px;
    }
.info-single-f .cat{
    font-size: 12px;
    }    
/*Story*/    
.story_back{
    padding-top: 20px;
    }
/* Library */    
.library_shelf_back{
    max-width: fit-content;
    padding: 5px;}    
.library_shelf{
    background-position: left 135px,left 350px,left 565px;
    min-height: 500px;
}    
.library_shelf ul li{
    margin-bottom: 15px;
    }    
.library_shelf ul li a{
    font-size: 12px;
    line-height: 1.2;
    padding-top: 110px;}    
/*本の画像、トリミング注意*/
.library01,.library02,.library03,
.library04,.library05,.library06,
.library07,.library08{
    background-position: 15px 50px,center;
    background-size: 73%,contain;        
}
.library_back{
    height: auto;
    min-height: 560px;
    padding-bottom: 30px;} 
.library_back-new{
    height: auto;
    padding-bottom: 30px;} 
.library-list-box{
    width: calc(100%/2);
    padding: 10px;}      
.library-list{
        padding: 5px;}   
.library-list-box{
    height: 240px;
    }    
.library-list-box img{height: 150px;}   
.openwindow-box p{
    font-size: 16px;
    }        
.openwindow{
    width: 100%;
    justify-content: center;
    align-items: flex-start;
    margin-left: 0;
    height: auto;
    
    }    
.openwindow-book{
    background-size: 100% 500px;
    height: 600px;
}      
.openwindow-box-l{
    padding: 60px 10px 0 !important;    
    }
.openwindow-box-r{
    padding: 60px 10px 0 !important;
}      
.remodal-close{
    left:87% !important;
    top:5% !important;
}
.openwindow-content{
    padding: 30px 5px 30px 15px;
    }
.openwindow-content, .openwindow-content p{
    font-size: 13px;
    } 
    
/* Story */    
.story-cat.story-main{width: 100%;}    
.story_content_back{width: 90%;}  
.story_content{text-align: left;}    
    
/* Q&A */    
.accordion_qa .Q::before {
  margin-top: 8px;
}    
/* ＋アイコン */
.accordion-open::before,
.accordion-open::after {
  right: 5%;
}
/* Download*/    
.download-box{
    width: 100%;
    }
.download-box p {
    width: 100%;
}    
.download-info p,
.download-back p{
    width: 50%;
}    
/*form*/
.from_title_back{
    background-position: bottom 42% center;
}
.form-box{
    width: 100%;
    height: auto;
    margin: 0 20px 20px;
    padding: 10px;
}
.form-thum img{
    height: 200px;
}    
.form-content-box{
    height: auto;
    }    
/*From チャット風表示調整*/
.w_b_flex{
    flex-wrap: wrap;
    }
.w_b_ava_R{
    justify-content: flex-end;/*縦向調整用*/
    }
    
    
/*Column*/    
.column-cat{
    width: 80px;
}
.column-cat-on{
    width: 80px;
}    
.column-box{
    width: calc(50% - 20px);
    height: auto;
    margin: 0 10px 20px;
}
.column-thum img{
    height: 180px;
}    
.form-title-box{
    margin: 5px 0;
    }    
.main-title{
  background-position: 30% 0,70% 0;}        
.column-box-video{
    width: 100% !important;
    height: auto !important;
    }    
/* Shop */
.shop-f{
    justify-content:flex-start;
    padding-bottom: 70px;
 }
.shop-backimg{
    background-size: 40%;
}     
.shop-box{
    width: calc(50% - 20px);
    height: auto;
}    
.shop-thum img{
    height: 150px;
    }    
 
    
/* 共通　*/    
.underpage_title-back{height: 120px;}
    
    
.footer_area{width: 100%;}
.footer_area img{
    width: 50% !important;
    height: auto !important;
}
.footer-box{
    margin-top: 30px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    }       
#footer .footer_menu li{
    width: 50%;
    height: 30px;
    line-height: 30px;
    }    
#footer .footer_menu li a{
    font-size: 90%;
    padding-left:30px;
    }
}


@media screen and (max-width: 480px) {
 
  /* ------------------------------------------------ */
  button,
  input[type="button"],
  input[type="reset"],
  input[type="submit"] {
    font-size: 14px;
  }
.top-img-back{
  background-position: 0 bottom,100% bottom;        
  background-size: 25%;    
  height: 420px;
}      
.top-img p{
    font-size: 16px;
    }
.library-list-box.bt_frame,
.library-list-box a.bt_frame{
  width: 150px;
}
}

@media screen and (max-width: 400px) {
.top-img-back{
  background-position: 0 90%,100% 90%;        
  background-size: 25%;    
  height: 480px;
}    
.tab_content_service, .tab_content{
    padding: 40px 5px;
    }
}


@media screen and (max-width: 320px) {
.logo{
    margin-top: 10px;
    width: 30%;
    }
.menu_bee,.menu_bee_w{
    background-size:0%;
    }    
#header_logo_top .menu_area li, #header_logo .menu_area li{
    width: 60px;
    }    
#header_logo_top .menu_area li a, #header_logo .menu_area li a{
    padding-left: 0;
    }   
.toggle_btn{
    width: 40px;
    }  
#header_logo_top .menu_area, #header_logo .menu_area{
    padding-right: 40px;
    }    
.join_area li{text-align: center;}        
.join_area li a{padding-left: 0;}    
.membership-title-min{
    padding: 5px 0 10px 11px;
    background-size: 12%;    
}     
.membership-box1 img{
    width: 100%;
    height: auto;
    object-fit: contain;
}    
.top-img-back{
  background-position: 0 90%,100% 90%;        
  background-size: 25%;    
  height: 350px;
}        
.top-img p{font-size: 14px;}    
.join-welback{
    padding: 50px 0 0;
    height: 480px;}
.mi_03{
    width: 200px;
    font-size: 16px;}
.tab_item_service, .tab_item{
    font-size: 12px;
    }
.top-join-text,
.membership-title{font-size: 90%;}
.join-messeback{
    background-position: top right,50% 10%;        
    }
    
.link-box{
    margin: 0 5px 20px;
    width: 100%;
}     
.story_content_back{
    padding: 0;
    }    
.library_shelf{
    background-position: left 130px,left 330px,left 530px;
    min-height: 400px;
}        
.library01,.library02,.library03,
.library04,.library05,.library06,
.library07,.library08{
    background-position: 9px 65px,center;
    background-size: 73%,contain;        
}    
.library_shelf ul li{
    margin-bottom: 0;
    padding: 0 5px;
    }    
.library_shelf ul li a{
    font-size: 11px;
    }    
.library-list-box{
    width: 100%;
    padding: 10px;}   
.openwindow-book{
    background-size: 200%; 
}    
.openwindow{
    margin:30px auto 0;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
    }    
.remodal-close{
    left:89% !important;
    top:10% !important;
}
.openwindow-book{height: 450px;}    
.openwindow-box{
    width: calc(99%/2);
    margin-top: 30px;
    }    
.openwindow-box-l{
    padding: 15px 10px 0 !important;    
    }
.openwindow-box-l p{
    margin-top: 0;
    }
.openwindow-box-r{
    padding: 15px 10px 0 !important;    
}       
.openwindow-box p{
    font-size: 12px;
    }    
.openwindow-content, .openwindow-content p{
    font-size: 10px;
    }    
#footer .footer_menu li a{
    padding-left: 10px;
    }
}