.cat-wear-bg-color {
	background-color: #fff299;
}

.cat-eat-bg-color {
	background-color: #ffb6b6;
}

.cat-live-bg-color {
	background-color: #86eac4;
}

.cat-play-bg-color {
	background-color: #c5b2f8;
}

.cat-learn-bg-color {
	background-color: #e7e6dd;
}

.cat-pr-bg-color {
	background-color: #ddf8fd;
}

::-moz-selection {
	/*color: #fff;*/
	background: #99ccff;
}

::selection {
	/*color: #fff;*/
	background: #99ccff;
}

html, body {
	width: 100%;
	height: 100%;
	color: #222;
}
.gf-1{font-family: 'Cardo', "游明朝体", "Yu Mincho", YuMincho,"ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ Ｐ明朝", "MS PMincho", serif;}
.gf-2{}
.gf-3{font-family: 'Open Sans', sans-serif;  letter-spacing: 2px;}
.gf-4{font-family: 'PT Serif',"游明朝体", "Yu Mincho", YuMincho, serif}

/**
 * Root.
 */
#app {
	position: relative;
	height: 100%;
}

/**
 * Main.
 */
#main {
	position: relative;
	visibility: hidden;
	opacity: 0;
}

#sections {
	position: relative;
}

.section {
	position: relative;
}

/**
 * Copyright
 */
#copyright {
	position: fixed;
	right: 15px;
	top: 45%;
	z-index: 9999;
}

#copyright img {
	position: relative;
	top: -200px;
}

/**
 * SNS plate
 */
#sns-plate {

}


/**
 * Footer Logo
 */
.page-entry .entry-footer{
	width: 820px;
	margin: 30px auto 0 auto;
	padding-bottom: 50px;
	border-top: 1px solid #000;
	padding-top: 30px;
	text-align: center;
}

.page-entry .entry-footer-presented{
	font-family: 'Open Sans', sans-serif;
	letter-spacing: 2px;
	color: #555;
	margin-bottom: 15px;
	margin-right: 15px;
	font-size: 10px;
	float: left;
}

.page-entry .entry-footer ul{
	display: inline-block;
	float: left;
}

.page-entry .entry-footer li{
	float: left;
	margin-left: 20px;

}

.page-entry .entry-footer li:first-child{
	margin: -15px 0 0 0;
}

.page-entry .entry-footer li:last-child{
	margin-top: -5px;
}

/**
 * Modal About
 */
#modal-about {
	top: 0;
	left: -100%;
	position: fixed;
	width: 100%;
	height: 100%;
	z-index: 9999999;
	background: #fff;
	overflow-y: scroll;
}

#modal-about .close-btn {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 10;
	display: none;
}

#modal-about .wrap {
	position: relative;
	opacity: 0;
}

#modal-about .title {
	text-align: center;
	padding: 40px 0;
}

#modal-about .nav {
	width: 685px;
	margin: 42px auto 50px;
}

#modal-about .nav li {
	float: left;
	margin: 0 28px;
}

#modal-about .nav li a {
	text-align: center;
	display: block;
	width: 80px;
	height: 130px;
	overflow: hidden;
	position: relative;
}

#modal-about .nav li a .icon {
	position: absolute;
	top: 25px;
	left: 0;
}

#modal-about .message {
  width:685px;
  text-align:left;
  margin:30px auto;
  font-size:13px;
	background: #fff;
}
#modal-about .t-catch{
  width:685px;
  margin:0 auto;
  font-size:24px;
  line-height:36px;
  font-weight:bold;
}
#modal-about .companies {
	margin: 80px auto 0 auto;
	padding-bottom: 40px;
  font-size:11px;
  text-indent:2em;
}

.sns-groups {
	position: fixed;
	top: 15px;
	right: 15px;
	z-index: 999999;
}

.sns-groups .facebook.sns {
	margin: 0 5px;
}

.sns-groups .sns {
	float: right;
	height: 20px;
	overflow: hidden;
}

/**
 * Modal window.
 */
#shop-modal .modal-detail {
	position: relative;
	background: #fff;
	width: 820px;
	height: 720px;
}

#shop-modal .close-btn {
  width:40px;
  display:block;
	position: absolute;
	right: -40px;
	top: 0;
}
#shop-modal .close-btn img{
  width:100%;
}


/**
 * logo top,modal
 */

 #page-top #sec-about .logo-itochu,
 #modal-about .companies{
	width: 100%;
	text-indent: inherit;
 }

 #page-top #sec-about .logo-itochu span,
 #modal-about .companies span{
	display: block;
 }

 #page-top #sec-about .logo-itochu ul,
 #modal-about .companies ul{
	display: inline-block;
	margin-bottom: 20px;
 }

 #page-top #sec-about .logo-itochu li:last-child,
 #modal-about .companies li:last-child{
 margin-top: 17px;
 }



.onlySp{display:none;}
@media screen and (max-width:640px) {
  .sp .onlySp{display:block;}
  .onlyPc{display:none;}
  #page-top.sp .sns-groups, #page-top.sp #copyright, .page-category.sp .sns-groups, .page-category.sp #copyright{ display:none; }
  #page-top.sp img,.page-category.sp img{ width:auto; height:auto; max-width:100%;}

  .sp .sp-title-menu{
    position:fixed;
    left:0;
    top:0;
    z-index:2;
  }

  /* Ｇナビ
  ******************/
  .sp #g-side-nav{
    width:68.75%; left:-68.75%;
    background-color:#FFFFFF;
  }
  .sp #g-side-nav .wrap,
  .sp #g-side-nav .mask{
    width:100%;
    height:100%;
    overflow-y:scroll;
    -webkit-overflow-scrolling: touch;
    background-color:#FFFFFF;
  }
  .sp #g-side-nav .content-nav{
    position:relative;
  }
  .sp #g-side-nav .content-nav .logo{
    width:65.45454545454545%;
    margin:0 auto;
    padding: 13% 0;
  }
  .sp #g-side-nav .content-nav li{
    margin:0;
  }
  .sp #g-side-nav .content-nav li a{
    width:auto;
    height:auto;
    text-align:left;
    position:relative;
  }
  .sp #g-side-nav .content-nav li a .icon{
    position:relative;
    left:auto;
    top:auto;
    width:23.63636363636364%;
    margin-left:20%;
  }
  .sp #g-side-nav .content-nav li a .label{
    position:absolute;
    display:block;
    left:52.27272727272727%;
    top:50%;
    margin-top:-0.5em;
    font-size:16px;
  }
  .sp #g-side-nav .btn-close{
    display:none;
    width:23.63636363636364%;
    position:absolute;
    top:0;
    right:-23.63636363636364%;
  }
  .sp #g-side-nav.show .btn-close.show{
    display:block;
  }


  .sp #g-side-nav .links-nav{
    text-align:center;
    position:relative;
    bottom:0;
    padding:6% 0;
  }
  .sp #g-side-nav .links-nav .sns{
    width:100%;
  }
  .sp #g-side-nav .links-nav .sns .ttl{
    font-size:16px;
    float:none;
    padding:4%;
  }
  .sp #g-side-nav .links-nav .sns .sns-btns{
    float:none;
    padding-bottom:6%;
  }
  .sp #g-side-nav .links-nav .sns .sns-btns a{
    display:inline-block;
    width:20%;
    margin:4%;
  }
  .sp #g-side-nav .links-nav .copyright{
    font-size:12px;
    line-height:1.5;
    padding:4%;
  }


  .sp #g-side-nav .main-nav{
    width:auto;
    height:auto;
  }
  .sp #g-side-nav .home, .sp #g-side-nav .content-nav li{
    height:auto;
  }
  .sp #g-side-nav .content-nav li a{
    background:none;
  }
  .sp #g-side-nav .main-nav {
    max-width: none;
  }
  .sp #g-side-nav .archives-nav{
    display:none;
  }
  .sp #g-side-nav .home{
    display:none;
  }
  .sp #g-side-nav .open-btn{
    display:none;
  }





  /* About
  ******************/
  .sp #modal-about {
    -webkit-overflow-scrolling: touch;
  }
  .sp #modal-about .wrap{
    top:0 !important;
  }
  .sp #modal-about .close-btn{
    top:0 !important;
    width:16.25%;
  }
  .sp #modal-about .title{
    width: 81.875%;
    margin: 0 auto;
    padding:24% 0 8%;
  }
  .sp #modal-about .t-catch{
    width: 80%;
    font-size:18px;
    line-height:1.6;
  }
  .sp #modal-about .nav{
    width: 92.5%;
    display:table;
    word-spacing:-1em;
    text-align:center;
    margin:10% auto 2%;
  }
  .sp #modal-about .nav li{
    width:33.333333333333%;
    display:inline-block;
    word-spacing:normal;
    box-sizing:border-box;
    padding:0;
    margin:0 0 10%;
    float:none;
  }
  .sp #modal-about .nav li a{
    width:69.42567567567569%;
    margin:0 auto;
    height:auto;
    text-align:center;
  }
  .sp #modal-about .nav li a .label{
    width:54.01459854014599%;
    margin:0 auto;
    display:block;
  }
  .sp #modal-about .nav li a .label img{
    vertical-align:top;
    display:block;
  }
  .sp #modal-about .nav li a .icon-cate{
    position:absolute;
    width:100%;
    display:block;
    top:22%;
  }
  .sp #modal-about .nav li a .icon-cate .icon{
    display:inline;
    top:auto;
    position:relative;
  }
  .sp #modal-about .message{
    width: 92.5%;
    margin:0 auto;
    font-size:14px;
    line-height:1.6;
  }
  .sp #modal-about .companies{
    margin: 8% auto 0;
    width:54.0625%;
    padding-bottom: 8%;
    font-size: 10px
  }


  /* トップ
  ******************/
  #page-top.sp #sec-about{
    padding:12% 0 8%
  }
  #page-top.sp #sec-about h2{
    width:auto;
    font-size:20px;
    margin-bottom:6%;
  }
  #page-top.sp #sec-about h2 span{
    display:block;
  }
  #page-top.sp #sec-about .t-read{
    display:none;
  }
  #page-top.sp #sec-about .logo-itochu,
	#modal-about .companies{
    margin-bottom:5%;
		width:50%;
		text-indent: inherit;
  }
	#page-top.sp #sec-about .logo-itochu li:first-child,
	#modal-about .companies li:first-child{
		width:100%;
		margin: 0 auto;
	}
	#page-top.sp #sec-about .logo-itochu li:last-child,
	#modal-about .companies li:last-child{
		width:70%;
		margin: 8% auto 0 auto;
	}
  #page-top.sp .sec-entry .header .new{
    width:23.90625%;
  }
  #page-top.sp .sec-entry .footer{
    background-size:19.6875%;
    line-height:1;
    height:auto;
    padding:0;
  }

  /* PR用追記　2015/07/21 start */
  #page-top.sp .sec-entry .footer .innerPr{
    position:relative;
    width:92.5%;
    margin:0 auto;
    padding:4% 0;
  }

  #page-top.sp .sec-entry .footer .innerPr .info{
    float:none;
    width:100%;
    padding:0;
    box-sizing:border-box;
    height:auto;
    border: none;
  }
  #page-top.sp .sec-entry .footer .innerPr .info .cate,
  #page-top.sp .sec-entry .footer .innerPr .info .number{
    width:50%;
    box-sizing:border-box;
    font-size:12px;
    margin:0 0 4% 0;
    line-height:1;
    height:auto;
  }

  #page-top.sp .sec-entry .footer .innerPr .profile {
    line-height:1;
    padding-top:4%;
  }
  #page-top.sp .sec-entry .footer .innerPr .profile .photo{
    width:8.620689655172414%;
  }
  #page-top.sp .sec-entry .footer .titlePr{
    width:92.5%;
    position:relative;
    border-left:none;
    border-top: 4px #222 solid;
    height: auto;
    left: auto;
    top: auto;
    margin: 0 auto;
    padding: 0.3em 0 0.5em;
    line-height:0;
  }
  #page-top.sp .sec-entry .footer .titlePr span{
    font-size:19px;
    padding: 0;
    display:inline;
    line-height:1.4;
  }
 /* PR用追記　2015/07/21 end */




  #page-top.sp .sec-entry .footer .inner{
    position:relative;
    width:92.5%;
    margin:0 auto;
    padding:4% 0;
  }
  #page-top.sp .sec-entry .footer .inner .category{
    position:relative;
    width:17.22972972972973%;
    left:auto;
    top:auto;
    display:table-cell;
    vertical-align:middle;
    box-sizing:border-box;
    padding-right:3.716216216216216%;
  }
  #page-top.sp .sec-entry.banner .footer .inner .info{
    border-left:none;
    padding-left:0;
    margin-left: -10px;
    text-align:left;
    width:35.47297297297297%;
    display:block;
  }
  #page-top.sp .sec-entry .footer .inner .info{
    display:table-cell;
    float:none;
    width:82.77027027027027%;
    padding:0 0 0 3.716216216216216%;
    box-sizing:border-box;
    height:auto;
  }
  #page-top.sp .sec-entry .footer .inner .info .cate,
  #page-top.sp .sec-entry .footer .inner .info .number{
    width:50%;
    box-sizing:border-box;
    font-size:12px;
    margin:0 0 4% 0;
    line-height:1;
    height:auto;
  }
  #page-top.sp .sec-entry .footer .title{
    width:92.5%;
    position:relative;
    border-left:none;
    border-top: 4px #222 solid;
    height: auto;
    left: auto;
    top: auto;
    margin: 0 auto;
    padding: 0.3em 0 0.5em;
    line-height:0;
  }
  #page-top.sp .sec-entry .footer .title span{
    font-size:19px;
    padding: 0;
    display:inline;
    line-height:1.4;
  }
  #page-top.sp .sec-entry.banner .footer .title{
    border-left:none;
    border-top: 4px #FFF solid;
  }
  #page-top.sp .sec-entry .footer .inner .profile {
    line-height:1;
    padding-top:4%;
  }
  #page-top.sp .sec-entry .footer .inner .profile .photo{
    width:8.620689655172414%;
  }
  #page-top.sp .sec-entry .footer .info .profile .name{
    font-size:14px;
  }










  /* カテトップ
  ******************/
  #page-top.sp #main, .page-category.sp #main{
    min-width:0;
    margin-left:0;
    width:100%;
    padding:0;
  }
  .page-category.sp #sec-archives{
    width:auto;
  }
  .page-category.sp #sec-archives .cat-icon{
    width:25%;
    padding:0;
    margin:6% auto;
  }
  .page-category.sp #sec-archives .entries li{
    width:92.5%;
    height: auto;
    margin: 0 auto 6%;
    padding: 0;
    float:none;
  }
  .page-category.sp #sec-archives .entries li .new{
    width:18.24324324324324%;
  }

  .page-category.sp #sec-archives .entries li .pic{
    background:#FFF;
    padding:1.5%;
    margin-bottom:3%;
  }
  .page-category.sp #sec-archives .entries li .title{
    font-size:16px;
    font-weight:bold;
    margin-bottom:2.6%;
    padding:0;
    line-height:1.4;
  }
  .page-category.sp #sec-archives .entries li .desc{
    font-size:14px;
    margin: 0;
    padding:0;
    line-height:1.4;
  }
}