@charset "utf-8";

/* ##### ipad proのlandscape(1366px)のみ ##### */
@media screen and (orientation: landscape) and (max-width: 1366px) {

}



/* ##### 1200px以上 ##### */
@media (min-width: 1200px) {

}



/* ##### 1024px未満 ##### */
@media (max-width: 1024px) {
	.fixed-nav .drawer-menu > li {
		-webkit-flex-basis: 82px;
		flex-basis: 82px;
	}
	
	.fixed-nav > .drawer-menu > .lower-btn-1 {
		-webkit-flex-shrink: 2;
		flex-shrink: 2;
	}
	
	.fixed-nav .drawer-menu > li:nth-of-type(5) {
		-webkit-flex-grow: 2;
		flex-grow: 2;
	}
	
	.fixed-nav .drawer-menu > li:nth-of-type(4),
	.fixed-nav .drawer-menu > li:nth-of-type(10),
	.fixed-nav .drawer-menu > li:nth-of-type(11) {
		-webkit-flex-grow: 3;
		flex-grow: 3;
	}
	
	.fixed-nav > .drawer-menu > li > a {
		white-space: normal;
		font-size: 1.1rem;
	}
	
	.fixed-nav > .drawer-menu > .lower-btn-1 {
		margin: 0; 
	}
	
	.fixed-nav > .drawer-menu > .lower-btn-2 > a > span {
		font-size: 1.0rem;
	}
	
	.fixed-nav > .drawer-menu > .lower-btn-3 > a > span {
		font-size: 1.1rem;
	}
	
	.fixed-nav > .drawer-menu > .lower-btn-3 > a > span::before {
		width: 3.0rem;
		height: 3.0rem;
	}
}



/* ##### ipadのlandscape(1024px)のみ ##### */
@media screen and (orientation: landscape) and (max-width: 1024px) {
	
}



/* ##### 768px未満 ##### */
@media (max-width: 768px) {
	.inner-section, .content {
		width: 100%;
	}
	
	
	
	/* ##### 下層ページ全体 ##### */
	.lower-cont {
		width: 100%;
		padding: 1.0rem;
		box-sizing: border-box;
	}
	/* ##### 下層ページ全体ここまで ##### */
}



/* ##### iphone6 plusのlandscape(736px) ##### */
@media screen and (orientation: landscape) and (max-width: 736px) {
	
}



/* ##### iphone6のlandscape(667px) ##### */
@media screen and (orientation: landscape) and (max-width: 667px) {
	
}




/* ##### androidのlandscape(640px) ##### */
@media screen and (orientation: landscape) and (max-width: 640px) {
	
}



/* ##### iphone5のlandscape(568px) ##### */
@media screen and (orientation: landscape) and (max-width: 568px) {
	
}


/* ##### 414px未満 ##### */
@media (max-width: 414px) {
	/* 全体のcss */
	.br::before {
		display: none;
	}
	/* 全体のcssここまで */

	/* ナビのcss */
	.drawer--right.drawer-open .drawer-hamburger {
		right: 22.0rem;
	}
	
	.drawer--right .drawer-nav {
		right: -22.0rem;
	}
	
	.drawer-nav {
		position: fixed;
		width: 22.0rem;
	}
	
	.drawer--right.drawer-open .drawer-nav {
		z-index: 3;
	}
	
	.drawer-hamburger {
		display: block;
		width: 3.5rem;
	}
	
	.drawer-hamburger-icon,
	.drawer-hamburger-icon:after,
	.drawer-hamburger-icon:before {
		height: 4px;
	}
	
	.drawer-nav > .drawer-menu {
		width: 100%;
		display: block;
		padding: 1.0rem;
		box-sizing: border-box;
		background-color: #fff;
		z-index: 9999;
	}
	
	.drawer-nav > .drawer-menu > li {
		width: 100%;
		display: block;
		border-bottom: 1px;
	}
	
	.drawer-nav > .drawer-menu > li > a {
		display: block;
		width: 100%;
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
		padding-left: 1.0rem;
		font-size: 1.6rem;
		border-top: none;
		-webkit-writing-mode: horizontal-tb;
		-ms-writing-mode: lr-tb;
		writing-mode: horizontal-tb;
	}

	.drawer-nav > .drawer-menu > .lower-btn-1 > a {
		width: 20%;
		padding-top: 0.5rem;
		padding-left: 0.5rem;
	}
	
	.drawer-nav > .drawer-menu > li > a > span {
		display: none;
	}
	
	header > .outer-nav {
		width: 100%;
		height: 0;
	}
	
	.fixed-nav {
		display: none;
	}
	
	.drawer-nav .drawer-menu::after {
		display: none;
	}
	
	.drawer-nav .drawer-menu::before {
		content: "";
		display: block;
		width: 5.0rem;
		height: 3.5rem;
		 margin-left: 0; 
		background-image: url(../img/common/logo_02.png);
		-moz-background-size: 100% auto;
		background-size: 100% auto;
		background-repeat: no-repeat;
		background-position: center center;
		position: absolute;
		top: 17px;
		right: 112px;
	}
	
	.sp-icon {
		display: block;
		position: fixed;
		top: 1.0rem;
		width: 100%;
		z-index: 1;
	}
	
	.sp-icon > ul {
		overflow: hidden;
		height: 4.5rem;
		padding: 0 1.0rem;
	}
	
	.sp-icon > ul > li {
		float: left;
		height: 100%;
	}
	
	.sp-icon > ul > li:nth-of-type(2) {
		float: right;
		margin-right: 4.0rem;
	}
	
	.sp-icon > ul > li > a {
		display: block;
		height: 100%;
	}
	
	.sp-icon > ul > li > a > img {
		height: 100%;
		width: auto;
	}
	
	.shopping-header > ruby {
		margin: 1.0rem 0 3.0rem 0;
	}
	/* ##### ナビのcssここまで ##### */
	
	
	
	/* ##### 下層ページのナビ ##### */
	header .drawer-nav {
		left: initial;
		width: 22.0rem;;
		height: 100%;
		-webkit-transform: initial;
		transform: initial;
	}
	
	header .drawer-nav .drawer-menu {
		height: 100%;
	}
	/* ##### 下層ページのナビここまで ##### */
	
	footer {
		height: 45vh;
	}
	
	footer > .inner-footer {
		width: 35%;
	}

	footer > .inner-footer > a {
		width: 7.0rem;
		display: block;
	}

	footer > .inner-footer > a:nth-of-type(1) {
		width: 6.0rem;
	}

	footer > .inner-footer > a > img {
		width: 100%;
		height: auto;
	}
}



/* ##### 375px未満 ##### */
@media (max-width: 375px) {
	
}



/* ##### 360px未満 ##### */
@media (max-width: 360px) {
	
}



/* ##### 321px未満 ##### */
@media (max-width: 321px) {
	
}