@charset "UTF-8";

/* ■■■ スマホフロントレイアウト改修 ■■■ */
#top-list {
	box-sizing: border-box;
}

/* スマホ用表示切り替え */
#imgCD {
	display: block;
}

.spblock ,
.spinline ,
#spimgCD ,
#ceiling #spmenubar ,
#main-header #spsubtitle {
	display: none;
}

#hpsearch > form > span.sphidden {
	/* display:none; */
}

@media only screen and (max-width: 767px) {
	/* スマホ用表示切り替え */
	/* PC用ログインカートエリア */
	spam.sphidden,
	#imgCD ,
	#main-promotion ,
	#header-nav ,
	#header-nav + div
	{
		display: none;
	}
	#spimgCD ,
	.spblock ,
	#ceiling #spmenubar ,
	#main-header #spsubtitle {
		display: block;
	}
	.spinline {
		display: inline;
	}

	/* トップメニュー２段目 */
	#ceiling #spmenubar {
		padding-left:20px;
		background: #d8d8d8;
		height: 38px;
	}

	#ceiling #spmenubar ul {
		font-size: 1.4em;
	}
	#ceiling #spmenubar ul:first-child {
		float: left;
		width: 240px;
		border: 0px solid pink;
	}
	#ceiling #spmenubar ul:last-child {
		float: right;
		width: 200px;
		border: 0px solid gold;
	}
	#ceiling #spmenubar ul:last-child > li {
		float: right;
		font-size: 1.4rem;
	}
	#ceiling #spmenubar ul:first-child > li:last-child {
			margin-right: 0;
	}
	#ceiling #spmenubar a:link,
	#ceiling #spmenubar a:visited {
		color: #000;
	}
	#imgCD {
		top: 10px;
	}
	#main-header {
		height: 190px;
		display: block;
	}
	#main-header #spsubtitle {
		width: 280px;
		margin: 15px auto 20px;
		text-align: center;
		font-weight: bold;
		font-size: 1.5rem;
	}
	#title {
		margin-top: 0;
		margin-bottom: 0;
		margin-left: -90px;
	}
	#title > a {
		background: url("../img/header-logo_sp.png") no-repeat 0 0;
		height: 93px;
		width: 200px;
		margin-top: 0px;
		background-size: 200px;
	}
	.mypage span::before,
	.login span::before,
	.splogin span::before,
	.spcart span::before
	{
		font-family:'Font Awesome 5 Free';
		font-weight: 900;
		padding: 0;
		color: #2d459a;
	}
	.mypage span::before,
	.login span::before,
	.splogin span::before {
		content:'\f007';
	}
	.spcart span::before {
		content:'\f07a';
	}
	.spline::before {
		/* position: absolute;
		top: 10px;
		left: 30px; */
		display: block;
		width: 26px;
		height: 26px;
		margin-top: 6px;
		margin-right: 3px;
		background: url(https://scdn.line-apps.com/n/line_add_friends/btn/ja.png) -6px -2px;
		background-size: 100px;
		border-radius: 15px;
		content:'　';
		float: left;
	}
	.spline::before {
	}
	.spline img {
		width: 90px;
		margin-top: 5px;
	}
	#global-nav > ul {
		width:460px;
	}
	#global-nav > ul > li {
		position: relative;
		float: left;
		margin: 0 0 0 2px;
		/* padding: 1px; */
		border: none;
		/* border-right: 1px solid #fff; */
		/* background: #2d459a; */
		width: 24.6%;
		/* height: 34px; */
		height: auto;
		/* text-align: center; */
	}
	#global-nav > ul > li > div {
		left: 0px;
		top: 28px;
	}
	#global-nav > ul > li:nth-child(1) > div > span
	{
		left: 48px
	}
	#global-nav > ul > li:nth-of-type(2) > div {
		left: -114px;
	}
	#global-nav > ul > li:nth-child(2) > div > span {
		left: 161px;
	}

	#global-nav > ul > li:nth-of-type(1) {

		margin: 0;
	}
	#global-nav > ul > li:nth-of-type(3),
	#global-nav > ul > li:nth-of-type(6),
	#global-nav > ul > li:nth-of-type(7) {
		display: none;
	}
	#global-nav > ul > li > a {
		background: #2d459a;
		height: auto;
		width: 100%;
		height: 25px;
		/* width: 112px !important; */
		width: 100% !important;
		background-repeat: no-repeat;
		border-left: 1px solid #fff;
	}
	#global-nav > ul > li:nth-of-type(1) > a {
		background-image: url("../img/sp-menu01.png");
		background-position: 0;
		border-left: none;
	}
	#global-nav > ul > li:nth-of-type(2) > a {
		background-image: url("../img/sp-menu02.png");
		background-position: 0;
	}
	#global-nav > ul > li:nth-of-type(4) > a {
		background-image: url("../img/sp-menu03.png");
		background-position: 0;
	}
	#global-nav > ul > li:nth-of-type(5) > a {
		background-image: url("../img/sp-menu04.png");
		background-position: 0;
	}

	#hpsearch {
		top: 232px;
		left: 0px;
	}
	#hpsearch > form > input[type="text"] {
		width: 220px;
		margin-top: 10px;
		position: absolute;
		top: 10px;
		left: 8px;
		background-color: #fff;
	}
	#hpsearch > form #spimgCD {
		position: absolute;
		top: 15px;
		right: 0px;
		width: 180px;
	}

	#hpsearch > form > span.sphidden {
		/* display:none; */
		/* display:inline; */
	}


	#osusume_bar {
		/* border: 1px solid #dbdbdb; */
	}

	#global-nav {
		margin-bottom: 30px;
		background: #2d459a;
		padding: 10px 0;
	}
	#sphead {
		margin-top: -30px;
		/* margin-bottom: 20px; */
		height: 70px;
		/* background: #fff; */
		background: #2d459a;
		/* border-bottom: 2px dotted #2d459a; */
		/* border-bottom: 1px solid #2d459a; */

		opacity: 0.2;
	}
	#content.high {
		margin-top: 0px;
	}
}


/* ----- 追加分 ----- */
#title > a {
	height: 100px;
	background: url("../img/header-logo_sb_pc.png") no-repeat 0 0;
	background-size: 99%;
}
@media only screen and (max-width: 767px) {
	.spline::before {
			width: 96px;
			background: url(https://scdn.line-apps.com/n/line_add_friends/btn/ja.png) -4px -2px;
			background-size: 100px;
			border-radius: 20px;
	}
	#title {
		left: 150px;
		top: 12px;
		/* position: static; */
		/* margin-left: 0; */
		/* margin-top: 80px; */
		/* position: static; */
	}
	#title > a {
		height: 143px;
		width: 227px;
		background: url("../img/header-logo_sb_sp.png") no-repeat 0 0;
		background-size: 100%;
	}
	#hpsearch {
			top: 212px;
	}
	#main-header #spsubtitle {
		width: auto;
		margin: 12px 0 0 60px;
		text-align: left;
		/* font-weight: normal; */
		font-size: 1.5rem;
		display:none;
	}
	#main-header #spsubmenu {
		position: absolute;
		right: 15px;
		top: 54px;
		/* width: 100px; */
		text-align: center;
		/* display: none; */
	}
	#main-header #spsubmenu img {
		margin: 0 15px 0 37px;
	}
	#main-header #spsubmenu a {
		display: block;
		border: 3px solid #2d459a;
		margin-bottom: 10px;
		padding: 8px 0 4px;
		border-radius: 20px;
	}

	#main-header #spsubmenu a::before {
		font-family: 'Font Awesome 5 Free';
		font-weight: 900;
		padding: 0;
		color: #2d459a;
		position: absolute;
		font-size: 1.5rem;
	}
	#main-header #spsubmenu a.spshopbtn::before {
		content: '\f54e';
		top: 13px;
		left: 15px;
	}
	#main-header #spsubmenu a.spblogbtn::before {
		content: '\f304';
		top: 66px;
		left: 16px;
	}

	#ceiling #spmenubar ul#topmenu {
		width: 260px;
	}
	#ceiling #topmenu > li {
		width: 45px;
		padding: 0 8px;
		margin-right: 0;
		text-align: center;
		height: 38px;
		font-size: 14px;
	}
	#spsubmenu i {
		color: #2d459a;
	}

	#main-header {
			height: 170px;
			display: block;
	}
	#sphead {
		background: #d5daeb;
		border-bottom: 0px solid #2d459a;
		opacity: 1;
	}
}