/* 1. main layout
-------------------------------------------*/
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  scroll-padding-top: 150px;
}

@media screen and (max-width: 768px){
  html, body {
    scroll-padding-top:80px;
  }
}

body {
    text-align:left;
    margin:0 auto 0 auto;
    padding:0;
    background-color:#fff;
    font-family: 'Noto Sans JP', sans-serif;
    color: #333333;
    font-size: 85%;
    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{
color:#069;
overflow:hidden;
}

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

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

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

a[id^="toc"]:hover {
text-decoration:none;
}

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;
  overflow: visible;
}

/*********************************
     ヘッダー
*********************************/
#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);
    top:0;
    left:0;
}

#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(http://stage.cospa.com/images/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;
}

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



/**************************
 　　　　　　タブ
***************************/
/* tab css */

/* .tabs {
  margin: 0 auto;
  padding: 0 20px;
} */

#tab-button {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: center;
}

#tab-button input[type="radio"] {
  display: none;
}

#tab-button li {
  display: block;
  width: calc(100%/4);
  padding: 0 5px;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  box-sizing: border-box;
}

#tab-button li label {
  display: block;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  border-bottom: 5px solid #dddddd;
  cursor: pointer;
}

#tab-button li label:hover {
  border-bottom: 5px solid #317b96;
}

#tab-button li input[type="radio"]:checked+label {
  border-bottom: 5px solid #317b96;
}

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

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

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

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


/******************************
  イベント検索
*******************************/


.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;}





#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://stage.cospa.com/img/icons/cycle.gif") no-repeat left;
}

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

#shops h3 {
    background:url("http://stage.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%;
}

/**************************
    セッション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;
    padding: 6px 10px;
}


/***************************
    コンテンツメニュー
****************************/
#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;
}


/* 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%;
  }

}

.del a {
  color: red!important;
  background: #fff;
  padding: 4px;
  border: 2px solid red;
  border-radius: 4px;
  display: inline-block;
}

.del a:hover {
  color: #fff!important;
  background: red;
}