/* 1. main layout
-------------------------------------------*/
body {
    text-align:left;
    margin:0 auto 0 auto;
    padding:0;
    background-color:#fff;
    font-family: 'Noto Sans Japanese', sans-serif;
    color: #333333;
    font-size: 80%;
    background-image: url(../pub/bg2.jpg);
    background-repeat: repeat-x;
    line-height: 1.3;
}

#wrapper{
    margin:0 auto;
    padding:140px 10px 10px 10px;
    text-align:left;
    max-width: 1080px;
    background:#fff;
}

@media screen and (max-width: 768px){
#wrapper{
    padding:120px 10px 10px 10px;
}
}

/* a img {
    border:0;
    display: block;
} */

form {
    margin:0;
    padding:0;
}

#container {
    margin:10px 0 0 0;
    padding:0;
    width:100%;
    /*min-width: 1080px;*/
    background-color:#fff;
}


#inner {
    padding-top:20px;
}

ul{
    list-style: none;
}

/* 3. link style
-------------------------------------------*/
a{
overflow:hidden;
}

a:link{
color:#069;
text-decoration:none;
}

a:visited{
color:#069;
text-decoration:none;
}

a:hover{
  color:#FF6600;
  text-decoration:underline;
}

a:active{
color:#FF6600;
text-decoration:underline;
}

a.anchor{
position: relative;
top: -145px;
}

@media screen and (max-width: 768px){
a.anchor{
top: -80px;
}
}
/* 先頭へ戻る
-------------------------------------------*/
#page-top {
	position: fixed;
	bottom: 5px;
	right: 10px;
  background: #999999;
  border-radius: 30px;
  z-index: 2;
}
#page-top a {
	padding:0;
	display: block;
}
#page-top a:hover {
  background: #cccccc;
  border-radius: 30px;
}

/*********************************
     ヘッダー
*********************************/
#head {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    max-width: 1080px;
    margin: 0 auto 0;
    text-align: justify;
    padding: 0;
    z-index: 100;
}

#head.bg_on {
    height: 100%;
    overflow: auto;
}

#head.bg_on #csr_close {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: rgb(0,0,0,0.5);
}

#head strong{
    display:none;
}

#common_head {
    width: 100%;
    display:flex;
    padding: 0 10px;
    background:#fff;
}

@media screen and (max-width: 768px){
#common_head {
height:56px;
animation-name: HeadStr1;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
animation-direction:normal;
}
#common_head.str{
animation-name: HeadStr2;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-fill-mode:forwards;
animation-direction:normal;
}
}
@keyframes HeadStr1 {
    0% {
        margin-top: -56px;
    }
    100% {
        margin-top: 0px;
    }
}
@keyframes HeadStr2 {
    0% {
        margin-top: 0px;
    }
    100% {
        margin-top: -56px;
    }
}

#common_head.str #item_sf {
}

.pc-logo{
    float: left;
    width: 20%;
    margin-top: 14px;
}

#pc-tabs {
    width:100%;
    left:0;
    height:72px;
    background:#fff url(https://www.geestore.com/project_cospa/_cospa/img/common/tabs/cospa/hr.gif) repeat-x bottom;
    padding: 0 10px;
    display: flex;
}

#pc-tabs ul {
    list-style:none;
    margin:0;
    padding: 0 10px 0px 0;
    display: -webkit-flex;
    display: inline-flex;
    flex-grow: 1;
}

#pc-tabs li {
    margin:0;
    padding:0;
}

div#brand_switch {
    margin: 2px;
    display: flex;
    align-items: center;
  }

/* 共通・表示：非表示 */
.pc-content{
    display: block;
  }

.sp-content{
  display: none;

}


.sp-logo {
    position: relative;
    flex-grow: 1;
    display: flex;
    align-items: center;
    padding-left: 50px;
}
.sp-logo img {
    width: 100%;
    max-width:120px;
}

.sp-cart {
    position: relative;
    margin: 2px;
    display: flex;
    align-items: center;
}

.cartcount {
  position: absolute;
  top: 15px;
  right: 12px;
  color: red;
  font-weight: bold;
}

.sp-login {
    position: relative;
    margin: 2px;
    display: flex;
    align-items: center;
}

.sp-login img,.sp-cart img {
    width: 100%;
    max-width:40px;
}
/* 共通・表示：非表示 */



@media screen and (max-width: 768px) {
  #head {
    position:fixed;
    max-width:768px;
    margin:0 auto 0;
    text-align:justify;
    padding: 0;
    width: 100%;
    z-index: 100;
    top: 0;
    left:0;
    border-bottom:1px solid #ccc;
  }

  /* 共通・表示：非表示 */
  .pc-content{
      display: none;
    }
  .sp-content{
    display: block;
  }

  #pc-tabs {
    width: 100%;
    left: 0;
    height: 72px;
    background: url(http://221.242.251.54/project_cospa/_cospa/img/common/tabs/cospa/hr.gif) repeat-x bottom;
    margin-bottom: 10px;
    display: none;
  }

  .pc-logo{
    display: none;
  }

  .cartcount {
    top:6px;
  }
}

/* SP heder css */
.head-nav-inner {
    border-bottom: 1px solid #ccc;
    height: 40px;
    position: relative;
    z-index: 100;
    display: block;
}

@media screen and (min-width: 769px){
.head-nav-inner {
    z-index: 95;
}
.sp-logo {display: none;}
}

  .header-sub {
    /* position: absolute; */
    top: 0px;
    width: 100%;
    z-index: 500;
  }

  dl#acMenu {
  }

  #acMenu dt {
    display: block;
    text-align: end;
    cursor: pointer;
    margin: 2px;
    display: flex;
    align-items: center;
  }

@media screen and (min-width: 769px){
#acMenu dt {display: none;}
}

  #acMenu dt a {
    display: inline-block;
    text-decoration: none;
    position: relative;
    overflow: visible;
  }

  #acMenu dt span {
    font-size: 5px;
    display: block;
    padding: 0;
    color: #333;
    position: absolute;
    top: 75%;
    left: 0;
    right: 0;
    text-align: center;
    white-space: nowrap;
  }

  .clearfix::after {
    content: "";
    display: block;
    clear: both;
  }

  #acMenu dd {
    border-top: none;
    border-bottom: none;
    width: 100%;
    display: none;
    margin: 0;
    background: #ffffff;
    position: absolute;
    top:100%;
    left:0;
    z-index:110;
  }

  #acMenu dt img {
    width: 100%;
    max-width:40px;
  }

  #acMenu ul {
    list-style: none;
    padding: 0;
    text-align: center;
    display: flow-root;
    margin: 2%;
  }

  #acMenu ul li img {
    width: 46%;
    padding: 0px;
    float: left;
    display: block;
    margin: 2%;
  }

  dt.position-top10 {
    position: absolute;
    top: 6px;
  }



  ul.sp-serch-top {
    width: 100%;
    margin: 0 !important;
  }









/****メニュー全体****/
#menu_left {
	/*配置*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
}

/****メニュー開閉ボタン****/
#menu_left div{
	/*デザイン*/
  width: 50%;
  height: 30px;
  background: rgb(255, 255, 255);
  border: 1px solid gray;
	/*配置*/
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
  display: block;
  text-align: center;
}


#menu_left .menuopen_left{
	/*デザイン*/
  color: rgb(51, 51, 51);
	font-size: 13px;
  text-decoration: none;
	/*配置*/
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

#menu_left .menuclose_left{
	/*デザイン*/
	color: rgb(51, 51, 51);
	font-size: 13px;
  text-decoration: none;
	/*配置*/
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

/****メニュー一覧****/
#menu_left ul{
	/*デザイン*/
  background: rgb(255, 255, 255);
	width: 100%;
	/*配置*/
	position: absolute;
	top: 30px;/*#menu divの高さ*/
	left: 0;
  border: 1px gray solid;

}

#menu_left li{
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	/*デザイン*/
	padding: 0 10px;
	color: rgba(0,0,0,1);
	border-bottom: 0px rgba(255,255,255,1) solid;
	height: 0;
	/*配置*/
	overflow: hidden;
	pointer-events: auto;
  display: inline-block;
  width: 40%;
}

/****メニューオープン時****/
#menu_left:target .menuopen_left{
	/*配置*/
	display: none;

}

#menu_left:target .menuclose_left{
	/*配置*/
	display: block;

}





#menu_left:target li{
	/*デザイン*/
	padding: 10px;
	height: 40px;
  display: inline-block;

}

/*** メインエフェクト ***/







/****メニュー全体****/
#menu_right{
	/*配置*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
}

/****メニュー開閉ボタン****/
#menu_right div{
	/*デザイン*/
	width: 30px;
	height: 30px;
	background: rgba(200,200,200,1);
	/*配置*/
	overflow: hidden;
	position: absolute;
	top: 0;
	right: 0;
}

#menu_right .menuopen_right{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

#menu_right .menuclose_right{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

/****メニュー一覧****/
#menu_right ul{
	/*デザイン*/
	background: rgba(200,200,200,1);
	width: 80%;
	/*配置*/
	position: absolute;
	top: 30px;
	right: 0;
}

#menu_right li{
	/*アニメーション*/
	-webkit-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
	/*デザイン*/
	padding: 0 10px;
	color: rgba(0,0,0,1);
	border-bottom: 0px rgba(255,255,255,1) solid;
	height: 0;
	/*配置*/
	overflow: hidden;
	pointer-events: auto;
}

/****メニューオープン時****/
#menu_right:target .menuopen_right{
	/*配置*/
	display: none;
}

#menu_right:target .menuclose_right{
	/*配置*/
	display: block;
}

#menu_right:target li{
	/*デザイン*/
	padding: 10px;
	height: 40px;
	border-bottom: 1px rgba(255,255,255,1) solid;
}

/*** メインエフェクト ***/




}


/**************************
 　　ニューストピック
***************************/

#newtopic {
  margin-bottom:30px;
}
#newtopic div {
  clear:both;
  margin: 2px auto;
  line-height:120%;
}

#newtopic div.wraph2,
#newlineup div.wraph2{
margin: 20px 0 10px 0;
padding:3px;
background-color:#317b96;
border-bottom:3px solid #6bb5c6;
}

#newtopic div.wraph2 h2,
#newlineup div.wraph2 h2{
float:left;
margin:0px;
padding: 3px;
font-size: 17px;
font-weight: bold;
color:#fff;
border-bottom:none;
}

#newtopic div.wraph2 p.i_rss,
#newlineup div.wraph2 p.i_rss{
float:right;
margin:0px;
padding:0px;
}

#newtopic div.gray,
#newtopic div.first{
  background-color:#eee;
}

#newtopic h2 em,
#newlineup h2 em{
  display:none;
}

#newtopic h3 {
  font-size:13px;
  margin:12px 0px;
  padding:0;
}

#newtopic .first h3 {
  font-size:14px;
}

#newtopic .img {
  float:left;
  margin-right:5px;
  border:1px solid #333;
}

#newtopic h3 img {
  margin-right:5px;
}

#newtopic p {
  font-size:13px;
}

/* #newtopic a {
  color:#333;
  text-decoration:none;
} */

#newtopic em {
  font-style:normal;
  /* color:#317b96; */
}

#newtopic .topix-area a {
  color: #317b96;
  text-decoration: none;
  padding: 10px;
  border: 1px solid #317b96;
  margin: 40px auto 0;
  text-align: center;
  width: 40%;
}

#newtopic .topix-area a {
  width: 80%;
}

#newtopic .topix-area ul#tab-button li a {
  color: #317b96;
  text-decoration: none;
  padding: 10px;
  border: 1px solid #317b96;
  margin: 0;
  text-align: center;
  width: 82%;
}
.news_area{
width: 100%;
display: flex;
flex-wrap: wrap;
}

.genre_tag {
width: 15%;
margin: 0 !important;
float: left;
padding-top: 10px;
}

.news_info {
width: 85%;
float: right;
}

.genre_tag p {
border: 1px solid;
width: 50%;
height: 20px;
text-align: center;
margin: 0 0 0 35px;
color: red;
}

th.genre_tag {
width: 15%;
}

@media screen and (max-width: 768px){
  .news_area {
    display: block;
  }

  p.genre_tag {
    width: 100%;
    float: left;
    text-align: center;
  }

  .news_info {
    width: 100%;
    float: none;
  }

  .genre_tag {
    width: 100%;
  }

  .genre_tag p {
    border: 1px solid;
    width: 20%;
    text-align: center;
    margin: 5px 0 10px 0;
  }

}

.more {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.more_news {
max-width: 820px;
width: 100%;
/* display: flex; */
flex-wrap: wrap;
}

/**************************
 　　　　　　タブ
***************************/
/* tab css */
.tabs {
  margin: 0 auto;
  padding: 0 20px;
}

#tab-button {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

#tab-button li {
  display: table-cell;
  width: 20%;
  font-size: 12px;
  font-weight: bold;
}

#tab-button li a {
  display: block;
  padding: .5em;
  background: #eee;
  border: 1px solid #ddd;
  text-align: center;
  color: #000;
  text-decoration: none;
}

#tab-button li:not(:first-child) a {
  border-left: none;
}

ul#tab-button li a:hover,
ul#tab-button .is-active a {
  border-bottom-color: transparent !important;
  background: #fff;
}

.tab-contents {
  padding: .5em 2em 1em;
  border: 1px solid #ddd;
}

 #tab-button .is-active a:nth-child(1){
   color: #FFCCCC;
 }

 #tab-button .is-active a:nth-child(2){
   color: #FF0000;
 }


.tab-button-outer {
  display: none;
}

.tab-contents {
  margin-top: 20px;
}

@media screen and (min-width: 640px) {
  .tab-button-outer {
    position: relative;
    z-index: 2;
    display: block;
  }
  .tab-sp-button-outer {
    display: none;
  }
  .tab-contents {
    position: relative;
    top: -1px;
    margin-top: 0;
  }
}

.tab-sp-button-outer form {
  margin-bottom: 15px;
}
/* tab css end */


/******************************
  イベント検索
*******************************/
div.searchevents {
width:100%;
/* height:20px !important; */
margin:0;
padding:0 !important;
}

div.searchevents ul{
float:right;
list-style:none;
margin:0;
padding:0;
}

div.searchevents li.radio{
margin:5px 5px 0 20px;
}


div.searchevents input[type="radio"]{display:none;}
.tab_area{font-size:0; margin:0 10px;}
.panel_area{background:#fff;}
.tab-contents{width:100%; padding:80px 0; display:none;}
.tab-contents p{font-size:14px; letter-spacing:1px; text-align:center;}


.searchevents {
  overflow: hidden;
  width: 90%;
  margin: 2em auto;
  text-align: center;
}
.searchevents select {
  width: 100%;
  padding-right: 1em;
  cursor: pointer;
  height: 30px;
  font-size: 12px;
}









#head .titlelogo {
    margin:10px;
}

#minimenus {
    height:20px;
}

#minimenus ul {
    margin:0;
    padding:0;
    list-style:none;
}

#minimenus li {
    float:left;
    margin:0px;
    padding:0;
}

#minimenus li img {
    border:1px solid #fff;
    vertical-align:top;
}

#member {
    position:relative;
}

#member p {
    color:#fff;
    font-size:12px;
    font-weight:normal;
    margin:0;
    padding:5px;
    background-color:#317b96;
    border-bottom:3px solid #6bb5c6;
}

#member ul {
    list-style-image:none;
    list-style-position:outside;
    list-style-type:none;
    margin:0;
    padding:0;
}

#member li {
    float:left;
    margin-bottom:10px;
    padding:0;
}

#member li img {
    border:1px solid #FFFFFF;
    vertical-align:top;
}

#member span.tooltip2 {
    position:absolute;
    top:90px;
    line-height:1.5;
    color:#fff;
    width:186px;
    background:#ff9999;
    border:2px solid #fff;
    padding:5px;
    font-size:110%;
    font-weight:bold;
    display:block;
    z-index:999;
    animation-name:anime;
    animation-duration:5s;
    animation-timing-function:ease;
    animation-iteration-count:1;
    animation-fill-mode:both;
}

@keyframes anime {
    0%{opacity:0;}
    20%{opacity:0.9;}
    80%{opacity:0.9;}
    99%{font-size:110%;}
    100%{opacity:0;font-size:0;}
}



/*********************************
     サブメニュー（フッタ）
*********************************/
#sub_menus {
    position:absolute;
    height:19px;
    top:0;
    _top:5px;
    right:0px;
}

#sub_menus ul {
    margin:0;
    padding:0;
    list-style:none;
}

#sub_menus li {
    float:left;
}

#sub_menus li a {
    display:block;
    float:left;
    width:130px;
    padding:5px 0;
    text-align:center;
    text-decoration:none;
    font-size:10px;
    color:#fff;
}

#sub_menus li a:hover {
    color:#317b96;
    background-color:#6bb5c6;
}







/****************************
    グループサイトへのリンク
******************************/
#brands,
#links,
#shops
{
    margin-top:10px;
}

#brands h3,
#links h3,
#shops h3
{
    font-size:10px;
    font-weight:normal;
    color:#317b96;
    padding:3px 0 3px 20px;
    margin:10px 0;
}

#brands h3 {
    background:url("http://www.cospa.com/img/icons/cycle.gif") no-repeat left;
}

#links h3 {
    background:url("http://www.cospa.com/img/icons/earth.gif") no-repeat left;
}

#shops h3 {
    background:url("http://www.cospa.com/img/icons/shop.gif") no-repeat left;
}

#brands ul,
#links ul,
#shops ul
{
    list-style:none;
    margin:0;
    padding:0;
}

#brands li,
#links li,
#shops li
{
    margin:0;
    padding:0;
    font-size:10px;
}

#brands li em,
#links li em,
#shops li em
{
    display:none;
}

#brands li img,
#links li img,
#shops li img
{
    border:1px solid #ddd;
}

#brands a,
#links a,
#shops a
{
    color:#333;
}

#brands a:hover,
#links a:hover,
#shops a:hover
{
    color:#317b96;
}


/***************************
    QRコード
****************************/
#qr {
    position:relative;
    width:180px;
    height:72px;
    border:1px solid #666;
    margin-top:10px;
}

#qr .img {
    position:absolute;
    left:5px;
    top:5px;
}

#qr p {
    position:absolute;
    color:#333;
    font-size:10px;
    width:100px;
    left:70px;
    top:15px;
    margin:0;
    padding:0;
    line-height:130%;
}


/***************************
    ピックアップ商品
****************************/
#pickups {
    width:180px;
    clear:both;
    position:relative;
}

#pickups h2 {
    color:#fff;
    font-size:10px;
    font-weight:normal;
    margin:0;
    padding:5px;
    background-color:#317b96;
    border-bottom:3px solid #6bb5c6;
}

#pickups div {
    position:relative;
    clear:both;
    background-color:#eee;
    border-top:1px solid #fff;
    border-bottom:1px solid #ccc;
    padding:5px;
}

#pickups div .img {
    position:relative;
    float:left;
    margin:5px 5px 5px 0;
    border:1px solid #317b96;
}

/* 商品名 */
#pickups div h3{
margin:0;
padding:0;
}


#pickups div h3 a {
    display:block;
    color:#317b96;
    font-size:10px;
    text-decoration:underline;
    font-weight:normal;
}

#pickups div h3 a:hover {
    background-color:#ddd;
    text-decoration:none;
}

#pickups div p {
    font-size:10px;
    margin:5px 0 0 0;
    padding:0;
    letter-spacing:1px;
    line-height:120%;
    color:#666;
}

#pickups div em {
    display:block;
    clear:both;
    padding:5px 0;
    height:15px;
}

#pickups div em img {
    float:right;
}

/**************************
    セッションID
***************************/
#sid {
    display:none;
}

/**************************
    アクセス解析
***************************/
#analyze {
    display:none;
}

/**************************
    クリアフィックス
***************************/
.clearfix:after{
clear:both;
display:block;
height:0px;
visibility:hidden;
content:".";
}
.clearfix{
display:inline-block;
}
* html .clearfix{
height:1%;
}
.clearfix{
display:block;
}









/* コンテンツセンター */
#contents_center {
    /* width: 80%; */
    display: flex;
}

#contents_center_inner{
    /* margin: 10px 0 0 15px; */
    width: 100%;
}

#contents_center_inner_full{
    margin-top: 20px;
}


/* コンテンツ右側 */
#contents_right {
    float: left;
    margin-left: -190px;
    width:190px;
    height:100%;
}

/* サイドメニュー */
/* コンテンツ左側 */
#contents_left {
    float: left;
    margin-right: 15px;
    width: 200px;
    display: block;
}
li.member_login {
    border-bottom: 1px solid #317B96;
}


/***************************
    コンテンツメニュー
****************************/
#menus {
    clear:both;
}

#menus li .ttl{
  background-color: #317b96;
  color: #ffffff;
}

#menus li {
    font-size:13px;
    line-height: 25px;
    border-bottom: 1px solid #ccc;
}

#menus li a {
    padding: 6px 10px;
    display:block;
    text-decoration:none;
    font-size: 13px;
    color: #333;
}

#menus li a:hover {
    color:#317b96;
/*    background-color:#6bb5c6;*/
    background-color:#fcffaa;
}

#menus li a.ttl:hover {
    color: #ffffff;
    background-color: #317b96;
}



/**************************
 　　        SNS
***************************/
  /* sns css */

  .sns li {
    display: flex;
  }

  .sns a {
    margin: 15px 0 10px 20px;
    display: block;
    width: 110px;
  }

  @media screen and (max-width: 768px){
    .sns li {
      flex-wrap: wrap;
    }

    .sns a {
      margin: 10px;
      width: 65px;
    }
  }


  .sns p{
    margin-bottom: 15px;
  }

  /* #sns_side img {
    margin: 5px;
    padding: 5px 5px;
  } */

  /* sns css end */

/* Twitter */
  iframe#twitter-widget-0 {
    min-width: 100% !important;
}


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

/* 注目タイトル */
div#freespace2 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

  #contents_center_inner{
    margin: 0 0 0 0;
}

/* コンテンツセンター */
  #contents_center {
      float: none;
      width: 100%;
  }

}