/* ----------これからSP向けの変更を行います！------------------------------------------ */
@media screen and (min-width: 769px) {
	#footer-m,
	#sp_slide {
		display: none!important;
	}
	/*----------------------------------------------
			▼スマホフッターメニュー
----------------------------------------------*/
#footer-m {
	position: fixed;
	z-index: 2;
	bottom: 0;
	width: 100%;
	height: 50px;
	background: #3b3b3b;
	color: #fff;
}
#footer-m a{
	color: #fff;
	background-repeat: no-repeat;
	background-position: center 8px;
	background-size: 20px auto;
	border-right: 1px solid #1e1e1e;
	border-left: 1px solid #797979;
}
#footer-m a:nth-child(1){
	background-image: url(images/footer_m01.png);
	border-left: 0;
}
#footer-m a:nth-child(2){
	background-image: url(images/footer_m02.png);

}
#footer-m a:nth-child(3){
	background-image: url(images/footer_m03.png);

}
#footer-m a:nth-child(4){
	background-image: url(images/footer_m04.png);
	border-right: 0;
}
#footer-m ul{
	display: flex;
	display:-webkit-flex;
	justify-content: center;
	font-size: 10px;

}
#footer-m ul li{
	display: inline-block;
	width: 100%;
	text-align: center;
}
#footer-m a{
	padding: 32px 19px 10px;
	display: inline-block;
	width: 25%;
}

/*----------------------------------------------
			▼スマホフッター検索
----------------------------------------------*/
#open01 {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    position: absolute;
}
 
.close_overlay {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    text-indent: -9999px;
    position: absolute;
    background: #000;
    opacity: 0.5;
    z-index: 5;
}
 
.modal_window {
    bottom: 50px;
    left: 0;
    margin: initial;
    width: 100%;
    height: 150px;
    text-align: center;
    display: block;
    background: #fff;
    position: absolute;
    z-index: 10;
}
 
.modal_window h2 {
    margin-bottom: 20px;
    margin: 0;
    width: 100%;
    height: 30px;
    line-height: 30px;
    color: #fff;
    font-size: 120%;
    font-weight: bold;
    text-align: left;
    text-indent: 15px;
    background: #000;
    border-left: none;
}
.modal_window p {
    padding: 0 15px 15px 15px;
    font-size: 12px;
    line-height: 160%;
    text-align: left;
}
.mtb20  {
   margin: 20px;
}
 
 
/* CSS3 ModalWindow SET
-------------------------- */
@-webkit-keyframes modalFadeIn {
    0% {opacity:0;display:block;}
    100% {opacity:1;}
}
div#modal div:target {
    -webkit-animation-name: modalFadeIn; 
    -webkit-animation-duration: 1s;
    -webkit-animation-iteration-count: 1;
    opacity: 1;
    display:block;
}




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

body {
padding: 0 0 0 0;
}
img{
	max-width: 100%;
	height: auto;
}
.sp-none{
	display: none!important;
}



/****************************************
		3.  Header, Menu
*****************************************/
header{
	/*z-index: 20000;*/
	/*position: relative;*/
}
header .mm{
	width: 95%;
	margin: 16px auto;
}
header .mm .logo img:not(.sp-none){
	width: 100px;
	display: inline-block;
}
header .mm .search{
	display: none;
}
header .mm .sns{
	display: none;
}
/*スマホナビ*/
.sp-menu-nav ul.menu > li a {
	color: #fff;
	padding: 10px;
}
.sp-menu-nav ul.menu > li.menu-item-has-children > a {
	background: url(../images/icon/arrow_b.png) no-repeat;
    background-position: 98% 60%;
    background-size: 25px;
    padding-right: 35px;
}
.sp-menu-nav .sub-menu {
	display: none;
}
nav .menu{
	position: fixed;
	right: 10px;
	top: 5px;
}
nav .menu img{
	width: 40px;
	height: 40px;
}
.js-menu {
	display: inherit;
  position: fixed;
  z-index: 10000;
  top: 50px;
  width: 100%;
  height: auto;
  background-color: rgba( 255, 255, 255, 0.95 );
  	font-size: 133%;
  	border-bottom: 2px solid #535353;
}
.js-menu .menu{
	width: 95%;
	padding: 5px 0;
	text-align: right;
	font-size: 80%;
}
.js-menu .sns{
	text-align: center;
	padding: 10px 0;
	border-bottom: 2px solid #535353;
}
.js-menu .sns a{
	padding: 5px 15px;
}
.search{
	overflow: hidden;
	padding-bottom: 15px;
}
.search-results {
	overflow: auto;
}
.search form{
	padding: 18px 10px 0;
}
.search #s{
	background: #ccc;
	border: none;
	padding: 5px;
	font-size: 20px;
	width: 75%;
	position: relative;
	display: block;
	float: left;
	outline: 0;
	border-radius: 0;
}
.search #searchsubmit{
	display: block;
	float: left;
	border-radius: 0;
}
.area{
		border-bottom: 2px solid #535353;
}
.area p{
	border-bottom: 1px solid #535353;
	padding: 10px;
	background: url(../images/icon/arrow_b.png) no-repeat;
	background-position: 98% 60%;
	background-size: 25px;
}
.area li a{
	color: #444;
}
.area .cat{
	padding: 10px 0;
	border-top: 1px solid #535353;
}
.area .cat li{
	padding: 0;
	/*display: inline-block;*/
	border: none;
	font-size: 16px;
}
.area .cat li a{
	padding: 5px 10px;
}
ul.accordion { 
}
ul.accordion a { 
	display:block; 
	padding:10px; 
	text-decoration:none; 
	color:#fff; 
}
ul.accordion span { 
	display:block; 
	color:#fff; 
}
ul.accordion ul { 
	display:none;
}
ul.accordion > li > p { 
	border-bottom: none;
}
ul.accordion > li > p span { 
}
ul.accordion > li > p span.open { 
}
ul.accordion > li > ul > li > ul > li { 
	background:#eee; 
	border-top:1px solid #ccc;
}
ul.accordion > li > ul > li > ul > li p { 
	background:#eee;
}
ul.accordion > li > ul > li > a { 
}
ul.accordion > li > ul > li > ul > ul > li li { 
	background:#FFF; 
	border-bottom:1px dotted #888;
}
ul.accordion > li > ul > li > ul > li ul > li:last-child { 
	border:none;
}
ul.accordion li > ul > li{
	border-top: 1px solid #ccc;
}

/*SNS side menu*/
.mail {
    font-size: 76%;
    padding: 0;
    display: block;
    text-align: left;
    border: none;
}
.mail .sp_mail{
	padding-left: 10px;
	display: block;
}

.sns_section{
	border-bottom: 1px solid #000;
    box-shadow: 0 1px 0 #4D4D4D;
    -moz-box-shadow: 0 1px 0 #4D4D4D;
    -webkit-box-shadow: 0 1px 0 #4D4D4D;
}
.sns_section .sns{
	padding: 10px;
	text-align: center;
}
.sns_section .sns a {
	float: none;
	display: inline-block;
	vertical-align: top;
	padding: 0 5px;
}
#side .topnews dd{
	font-size: 80%;
}
#side .topnews .img_thumb{
	width: 100px;
	overflow: hidden;
}
/*------------------
	前の記事、次の記事
--------------------*/

/*------------------
前の記事、次の記事END
--------------------*/


/****************************************
		4.  Slide
*****************************************/
.ranking{
	margin: 50px 0 0;
}
.ranking h2{
	display: none;
	background: url(../images/title/title_ranking.png) no-repeat left center;
	padding: 15px 0 10px 165px;
	background-position: 5px;
}
.ranking li{
}
img.ran_img{
	top: 0;
	margin-top: 0;
}
.ran_box span{
	display: none;
}
.bx-wrapper .ran_title img{
	display: none;
}
.ran_title{
	background: rgba( 0, 0, 0, 0.6 );
	position: absolute;
	bottom: 0;
	color: #fff;
	padding: 10px 0;
	width: 100%;
}
.ran_title h4{
	width: 95%;
	margin: 0 auto;
	float: none;
	font-size: 14px;
}
.ranking a:hover h4{
	color: #fff;
}
.bx-wrapper .bx-pager.bx-default-pager a{
	background: #383838;
	width: 7px;
	height: 7px;
}
.bx-wrapper .bx-pager{
	background: none;
	padding: 10px 0;
}
/****************************************
		4.  Ranking
*****************************************/
.rank{
	display: inherit;
}
.rank h2{
	border-top: 1px solid #aaaaaa;
	border-bottom: 1px solid #aaaaaa;
	padding: 12px 0 7px 110px;
	background: url(../images/title/title_ranking.png) no-repeat left center;
	background-position: 5px;
	background-size: 100px;
	font-size: 18px;
}
.rank ul{
	padding: 15px 10px;
	margin: 0;
}
.rank li{
	overflow: hidden;
	padding-bottom: 20px;
}
.rank li a{
	color: #383838;
}
.rank li article{
	overflow: hidden;
}
.rank li .left_box{
	float: left;
	width: 35%;
}
.rank li .left_box img{
	width: 100%;
}
.rank li .right_box{
	float: right;
	width: 62%;
	overflow: hidden;
}
.rank li .right_box span{
	display: block;
	text-align: center;
	color: #fff;
	font-size: 110%;
}
.rank li:nth-child(1) span{
	background: #f35e5b;
}
.rank li:nth-child(2) span{
	background: #e1d91c;
}
.rank li:nth-child(3) span{
	background: #ffb900;
}

/****************************************
		4. Center Menu 
*****************************************/
.blog_title{
	display: none;
}
#shop_menu{
	display: none;
}

/****************************************
		5.  contents
*****************************************/
#contents{
	/*padding: 0;*/
}
#contents h2.title{
	margin-top: 50px;
	background: none;
	padding: 0 10px;
}
#contents h2.title div{}
#contents h2 div{
	width: inherit;
	margin: 5px 0;
	background: none;
	padding: 0;
}
#contents #main{
	width: 100%;
	margin: 0;
	overflow: hidden;
}
#contents #main .post{
	display: block;
	width: 47%;
	float: left;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
    margin: 16px 9px 0;
    border: 1px solid #ccc;
    padding: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    -ms-border-radius: 5px;
    /*background: #fff;*/
}
.single #contents #main > .post,
.page-template-default #contents #main > .post {
	border: 0;
	margin: 0;
}
.single #contents #main > .post .post-categories{
	margin-top: 10px;
}
.page-template-default #contents #main > .post {
	padding: 0!important;
}
#contents #main .post .img_thumb img{
	vertical-align: top;
	height: auto;
}
#contents #main .post p img{
	width: 100%;
	height: auto;
}

.related_img,
.new_img {
	margin-right: 0;
	float: none;
}

/****************************************
		6.  Writer
*****************************************/
#writer{
	display: none;
}

/****************************************
		7.  footer
*****************************************/
footer{
	margin-top: 30px;
}
#foot_sns{
	position: fixed;
	bottom: 80px;
	z-index: 100;
	width: 60%;
	left: 50%;
	transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
}
#foot_sns a{
	padding: 0 10px;
	display: table-cell;
	text-align: center;
	width: 25%;
}
#foot_sns a img{
	height: 30px;
}

/****************************************
		8.  single
*****************************************/
.single #contents #main{
	padding: 0;
	width: inherit;
}
.single #contents .breadcrumbs {
	margin: 0;
	padding: 20px 15px;
}
.single #contents #main .post .kiji{
	padding: 0 10px;
}
.single #contents #main .post h1{
	font-size: 20px;
	line-height: 1.3em;
}
.single #contents #main .post p{

}
.single #contents #main .post p img{
	width: 100%;
}
.single #contents #main .post .kiji p img{
	width: inherit;
}
.single #contents #main .post .blog_info{
	font-size: 14px;
}
#tab .tab-index ul{
	width: 80%;
}
#tab .tab-index li{
}
#tab .tab-contents.active img{
	width: 80px;
}
.single #contents #main #tab .tab-contents.active p img{
	width: inherit;
}

.ranking #contents{
	display: none;
}
.heading-wrap .heading-inner{
	/*height: 225px;*/
	overflow: hidden;
}
.home .heading-wrap .heading-inner:before{
	padding-top: 0;
}
.heading-wrap .heading-inner:before{
	content:"";
    display: block;
    padding-top: 66%;
}
.heading-wrap .heading-inner img {
	height: auto;
	position: absolute;
	top: 0;
}
}
@media screen and (max-width: 768px) {
	header .logo a,
	header .header-social a,
	header .shopping-cart a {
		line-height: 1em;
	}
	.offcanvas-open #wrapper:after {
		content: '';
		background: rgba(0,0,0,0.7);
		width: 100%;
		height: 100%;
		position: absolute;
		z-index: 99999;
		top: 0;
		left: 0;
	}
	#wrapper{
	    padding-bottom: 50px;
	}
	footer {
		padding: 20px 0;
		position: static;
		margin: 0;
	}
	.backtotop{
		bottom: 100px;
		position: static;
		left: 0;
		width: 100%;
		background: #dcdcdc;
		height: auto;
	}
	.backtotop a {
		height: auto;
		width: auto;
		display: inline-block;
		visibility: visible;
		font-size: 20px;
		padding: 30px 60px;
		color: #8b8a8a;
		background: url(../images/backtotop_arrow.png) right center no-repeat;
		background-size: 35px auto;
	}
	#contents #main .post .related .post_article,
	#contents #main .post .new .post_article {
		width: 48%!important;
		margin: 2% 1%;
		float: left;
	}
	#contents #main .post .related .post_article:nth-of-type(2n+1),
	#contents #main .post .new .post_article:nth-of-type(2n+1) {
		clear: both !important;
	}
	.Pbutton + .Nbutton {
		border-top: 1px solid #e6e6e6;
	}
	.Nbutton {
		border-top: 1px solid #e6e6e6 !important;
	}
	.Pbutton,
	.Nbutton {
		width: 100% !important;
	}

	header {
		display: block;
		width: 100%;
		/*border-bottom: 0 solid #e6e6e6;*/
		/*overflow: hidden;*/
	}
	header .header-social {
		padding: 0;
		border: 0;
	}
	header .shopping-cart {
		padding: 4px 10px 0;
	}
	header .shopping-cart img{
		height: 25px;
	}
	header .logo {
		padding: 0 10px;
	}
	#contents #main {
		padding: 0 0 30px;
	}
	.p-navi.bottom {
		margin: 10px 0;
		width: initial;
	}
	#contents .pagination {
		padding-bottom: 30px;
	}
	/*sidebar*/
	#side_search .searchs {
		padding: 8px;
	}
	#s {
		width: 150px;
		font-size: 60%;
	}
	#side_search h2 {
		font-size: 14px;
	}

	/*-sp_menu-*/
	#sp_slide{
	    display: block;
	}
	/*header*/
	#sp_slide .button {
    position: absolute;
    display: block;
    background-color: #00afd8;
    border: 2px solid #fff;
    opacity: 0.9;
    color: #fff;
    padding: 10px 20px 5px;
    text-align: center;
    border-radius: 8px 8px 0 0;
    -webkit-border-radius: 8px 8px 0 0;
    -moz-border-radius: 8px 8px 0 0;
    font-size: 70%;
    z-index: 9999 !important;
    line-height: 18px;
    /* font-weight: lighter; */
 }
	#sp_slide .menu-button-left {
	    left: -24px;
	    -moz-transform: rotate(90deg);
	    -webkit-transform: rotate(90deg);
	    -o-transform: rotate(90deg);
	    -ms-transform: rotate(90deg);
	    transform: rotate(90deg);
	}
	#sp_slide .menu-button-right {
	    right: -22px;
	    -moz-transform: rotate(-90deg);
	    -webkit-transform: rotate(-90deg);
	    -o-transform: rotate(-90deg);
	    -ms-transform: rotate(-90deg);
	    transform: rotate(-90deg);
	}

	/*slidemenu*/
	#sp_slide .slidemenu {
	    background-color: #f5f5f5;
	}
	#sp_slide .slidemenu ul.menu  {
		margin-left: -10px;
		margin-right: -10px;
	}
	#sp_slide .slidemenu ul.menu li {
	    list-style: none;
	    font-size:16px;
	    text-transform: uppercase;
	    line-height: 1.8;
	    border-bottom: 1px solid #f5f5f5;
	}
	#sp_slide .slidemenu ul.menu li a {
	    padding:10px;
	    display: block;
	    text-decoration: none;
	    color: #333333;
	    background: #dcdcdc;
	}
	#sp_slide .slidemenu ul.menu li.menu-item-has-children {
		position: relative;
	}
	#sp_slide .slidemenu ul.menu li.menu-item-has-children > a {
		padding-right: 50px;
	}
	#sp_slide .slidemenu ul.menu li.menu-item-has-children:after {
		content: '';
		width: 50px;
		height: 48px;
		display: block;
		z-index: 11;
		position: absolute;
		right: 0;
		top: 0;
		background: url(../images/nav_arrow_down.png) center center no-repeat;
		background-size: 35px;
	}
	#sp_slide .slidemenu ul.menu li.menu-item-has-children.open:after {
		background: url(../images/nav_arrow_up.png) center center no-repeat;
		background-size: 35px;
	}
	#sp_slide .slidemenu ul.menu .sub-menu li {
		border-bottom: 1px solid #dcdcdc;
	}
	#sp_slide .slidemenu ul.menu .sub-menu li:last-child {
		border: 0;
	}
	#sp_slide .slidemenu ul.menu .sub-menu li a {
		background: #f5f5f5;
		padding-left: 20px;
	}
	#sp_slide .slidemenu .slidemenu-header {
	    height: 49px;
	    background-color: #ccc;
	    bottom: 100px;
	}
	#sp_slide .slidemenu .slidemenu-header div {
	    padding: 17px 0px 0px 19px;
	    text-decoration: none;
	    color: #fff;
	}
	#sp_slide .pos {
	    position: fixed;
	    bottom: 140px;
	    z-index: 1;
	    left: -15px;
	    right: -15px;
	}

	/*plugin*/
	#sp_slide .slidemenu {
	  top: 0;
	  padding-top: 0;
	  padding: 0 10px;
	  width: 240px;
	  position: fixed;
	  visibility: hidden;
	  z-index: -1;
	  overflow: hidden;
		overflow-y: auto;
	}
	.logged-in #sp_slide .slidemenu {
	    padding-top: 50px;
	}
	#sp_slide .slidemenu .slidemenu-header {
	  position: relative;
	}
	#sp_slide .slidemenu .slidemenu-body {
	  height: 100%;
	  position: relative;
	}
	#sp_slide .slidemenu .slidemenu-body .slidemenu-content {
	  position: relative;
	  padding-bottom: 80px;
	}
	#sp_slide .slidemenu-left {
	    left: 0;
	}
	#sp_slide .slidemenu-right {
	    right: 0;
	}

	/*anime*/
	#sp_slide .menu-button-left:active {
	    -moz-transform: scale(1.2) rotate(90deg);
	    -webkit-transform: scale(1.2) rotate(90deg);
	    -o-transform: scale(1.2) rotate(90deg);
	    -ms-transform: scale(1.2) rotate(90deg);
	    transform: scale(1.2) rotate(90deg);
	}
	#sp_slide .menu-button-right:active {
	    -moz-transform: scale(1.2) rotate(-90deg);
	    -webkit-transform: scale(1.2) rotate(-90deg);
	    -o-transform: scale(1.2) rotate(-90deg);
	    -ms-transform: scale(1.2) rotate(-90deg);
	    transform: scale(1.2) rotate(-90deg);
	}
	
	#footer-m {
		position: fixed;
		z-index: 10;
		bottom: 0;
		width: 100%;
		background: #00afd8;
		color: #fff;
	}
	#footer-m a{
		color: #fff;
		background-repeat: no-repeat;
		background-position: center 8px;
		background-size: 20px auto;
		border-right: 1px solid #fff;
		border-left: 1px solid #416788;
	}
	#footer-m li:nth-child(1) a{
		background-image: url(../images/footer_m01.png);
		border-left: 0;
	}
	#footer-m li:nth-child(2) a{
		background-image: url(../images/footer_m02.png);

	}
	#footer-m li:nth-child(3) a{
		background-image: url(../images/footer_m04.png);

	}
	#footer-m li:nth-child(4) a{
		background-image: url(../images/footer_m04.png);
		border-right: 0;
	}
	#footer-m ul{
		display: flex;
		display:-webkit-flex;
		justify-content: center;
		font-size: 10px;

	}
	#footer-m ul li{
		display: inline-block;
		width: 33%;
		text-align: center;
	}
	#footer-m a{
		padding: 30px 10px 2px;
		display: block;
	}
	#side .snsb li {
		max-width: 50%;
	}
	h3.card-name{
	height: auto;
	-webkit-line-clamp:inherit;
}


}
@media screen and (max-width: 599px){
	#contents #main .post {
		margin: 10px 8px 0;
	}
}
@media screen and (max-width: 480px){
	#contents #main .post {
		margin: 10px 6px 0;
	}
	#contents #main .post .img_thumb {
		margin: 0 0 5px;
	}
	.related_img, .new_img {
		overflow: hidden;
		margin: 0 0 5px;
	}
	.single .post .ts-fab-text h4 span {
		float: none;
	}
}
@media screen and (max-width: 400px){
	#contents #main .post {
		margin: 10px 4px 0;
	}
}