/* TOP */

/**************************
/* メイン画像
**************************/

#main_area {
	width: 80%;
	height: 100%;
	margin-bottom: 1em;
}

#main_area #catch {
	width: 100%;
	height: 50vw;
}

#main_area #catch #stage {
	position: relative;
	z-index: 0;
}

#main_area #catch .stage img {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 0;
}

#main_area #catch .stage .pic {
	position: absolute;
	top: 8px;
}

#main_area #catch #title {
	font-size: 4vw;
	text-align: center;
	color: white;
	position: absolute;
	top: 15vw;
	left: 39vw;
	z-index: 1;
	text-shadow: 1px 1px 10px #555;
}

#main_area #catch #three_btn {
	width: 30%;
	margin-left: 25%;
	text-align: center;
	position: absolute;
	top: 27vw;
	border: 0px solid #fff;
	z-index: 1;
	text-shadow: 1px 1px 25px #555;
}

#main_area #catch #three_btn .btn_top {
	border-bottom: 3px solid #fff;
	padding-bottom: 0.2em;
	color: #fff;
	font-size: 150%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

#main_area #catch #three_btn .btn_top .btn_top_cell {
	width: 30%;
}

#main_area #catch #three_btn .btn_top .btn_top_cell img {
	width: 100%;
}

#main_area #catch #three_btn .btn_bottom {
	color: #fff;
	padding-top: 0.3em;
	font-size: 3vw;
	font-family: aharoni, Helvetica, "游ゴシック", "Yu Gothic", sans-serif;
	font-style: oblique;
}


/*************
	/* smartPhone
	*************/

@media screen and (max-width: 767px) {

	#main_area {
		width: 100%;
	}

	#main_area #catch {
		position: relative;
		z-index: 98;
	}

	#main_area #catch #stage {
		position: relative;
		z-index: 0;
	}

	#main_area #catch .stage .pic {
		position: absolute;
		top: 0px;
		z-index: 1;
	}

	#main_area #catch #title {
		font-size: 5vw;
		position: absolute;
		top: 15vw;
		left: 25vw;
		z-index: 97;
	}

	#main_area #catch #three_btn {
		display: none;
	}

}

/*************
お知らせ
*************/

#news {
	background: #fff;
	position: relative;
	z-index: 1;
	margin-top: 1em;
	margin-left: 1em;
	display: flex;
	align-items: center;
}

#news #news_sec {
	width: 15%;
	border-right: 5px solid #ccc;
}

#news #news_sec p {
	color: #ccc;
}

#news h2 {
	font-size: 3vw;
	color: #da241f;
	font-family: aharoni, Helvetica, "游ゴシック", "Yu Gothic", sans-serif;
	border-bottom: 1px solid #ddd;
}


#news .news_blc {
	margin-left: 1em;
}


/*************
	/* Tablet
	*************/
@media screen and (min-width: 767px) and (max-width: 769px) {
	#news .news_blc {
		margin-left: 0em;
		vertical-align: top;
	}

	#news .news_blc .news_left article {
		margin-top: 0.5em;
	}
}

/*************
	/* smartPhone
	*************/

@media screen and (max-width: 767px) {

	#news {
		display: block;
		width: 100%;
		z-index: 98;
		position: relative;
		margin-top: 18vw;
		margin-left: 0em;
		clear: both;
	}

	#news #news_sec {
		width: 50%;
		border-right: 5px solid #ccc;
		border-left: 5px solid #ccc;
		margin-left: 25%;
		margin-bottom: 1em;
		margin-top: 1em;
	}

	#news h2 {
		margin-left: 1em;
		margin-right: 1em;
		font-size: 5vw;
		text-align: center;
	}

	#news #news_sec p {
		margin-left: 1em;
		margin-right: 1em;
		font-size: 80%;
		text-align: center;
	}

	#news .news_blc .news_left p {
		font-size: 90%;
		width: 100%;
		display: inline-block;
		vertical-align: top;
	}
}

/*************
/* スクールシューズ
*************/


#school_bar {
	width: 99.5%;
	height: 16vw;
	margin-top: 2em;
	margin-bottom: 1em;
	background: url("../img/ricosta_school.jpg") no-repeat;
	background-size: 50% auto;
	border: 1px solid #ddd;
	transition: .8s;
}

#school_bar_ec {
	width: 99.5%;
	height: 16vw;
	margin-top: 2em;
	margin-bottom: 1em;
	background: url("../img/ricosta_school_ec.jpg") no-repeat;
	background-size: 50% auto;
	border: 1px solid #ddd;
	transition: .8s;
}

#school_bar:hover {
	border: 1px solid #aaa;
}

#school_bar_ec:hover {
	border: 1px solid #aaa;
}

#school_bar a {
	display: block;
	width: 100%;
	height: 16vw;
	color: #fff;
	transition: .8s;
}

#school_bar_ec a {
	display: block;
	width: 100%;
	height: 16vw;
	color: #fff;
	transition: .8s;
}

#school_bar a:hover {
	color: #fabb00;
}

#school_bar_ec a:hover {
	color: #fabb00;
}

#school_bar h2 a span {
	width: 50%;
	height: 13vw;
	display: block;
	text-align: center;
	float: right;
	background: #da241f;
	font-size: 2vw;
	padding-top: 3vw;
}

#school_bar_ec h2 a span {
	width: 50%;
	height: 13vw;
	display: block;
	text-align: center;
	float: right;
	background: #da241f;
	font-size: 2vw;
	padding-top: 3vw;
}

/*************
	/* smartPhone
	*************/

@media screen and (max-width: 767px) {

	#school_bar {
		width: 100%;
		height: 20vw;
		margin-top: 1em;
		margin-bottom: 0em;
		border-left: 0;
		border-right: 0;
	}

	#school_bar_ec {
		width: 100%;
		height: 20vw;
		background: url(../img/ricosta_school_ec_sp.jpg) no-repeat;
		background-size: 100% auto;
		margin-top: 1em;
		margin-bottom: 0em;
		border-left: 0;
		border-right: 0;
	}


	#school_bar a {
		height: 20vw;
	}

	#school_bar h2 a span {
		/*height: 40vw;*/
		height: 19vw;
		font-size: 3vw;
		padding-top: 1vw;
		padding-left: 1vw;
		padding-right: 1vw;
	}

	#school_bar_ec a {
		height: 20vw;
	}

	#school_bar_ec h2 a span {
		height: 40vw;
		font-size: 3vw;
		padding-top: 1vw;
		padding-left: 1vw;
		padding-right: 1vw;
	}

}

/*******/
/* P2 */

/**************************
/* ヒストリー
**************************/

#milestones_w {
	border-top: 1px solid #ccc;
}

.milestones {
	border-top: 1px solid #ccc;
	display: inline-block;
	margin-bottom: 1em;
}

.milestones p:first-child {
	font-size: 2vw;
	font-weight: bold;
	background: #ccc;
	padding: 0.5em;
	color: #fff;
}

.milestones p:last-child {
	height: 4em;
	width: 61.5vw;
	padding-top: 0.5em;
	margin-left: 1em;
}

.milestones .long {
	height: 5.5em !important;
}

.milestones img {
	float: right;
	height: 80%;
}

/*************
	/* Tablet_S
	*************/
@media screen and (max-width: 1023px) {

	.milestones p:last-child {
		width: 60vw;
		height: 3.5em;
		margin-left: 1em;
	}
}

/*************
	/* smartPhone_H
	*************/

@media screen and (max-width: 767px) {
	#milestones_w {
		border-width: 0;
	}

	.milestones {
		display: flex;
	}

	.milestones p:first-child {
		height: 30px;
	}

	.milestones p:last-child {
		width: 85vw;
		height: 30px;
		margin-left: 0.5em;
	}


	.milestones .long {
		height: 5em !important;
	}

	.milestones img {
		float: right;
		height: 70%;
	}
}

/*************
	/* smartPhone_V
	*************/

@media screen and (max-width: 458px) {

	.milestones p:last-child {
		width: 75vw;
		height: 3.5em;
		margin-left: 0.5em;
	}


	.milestones .long {
		height: 8em !important;
	}

	.milestones img {
		float: right;
		height: 50%;
	}

}


/**************************
/* ブランド
**************************/

.content {
	margin-bottom: 3em;
	margin-left: 10px;
}

.content+.content {
	border-top: 1px solid #ccc;
}

.content .content_box {
	display: flex;
	align-items: flex-start;
	column-gap: 2em;
}

.content article h2 {
	margin-top: 1em;
	margin-bottom: 1em;
	color: #555;
	font-weight: lighter;
}

.content article img {
	width: 25%;
	border-radius: 5px;
}

.content article .cont_txt {
	line-height: 2;
}

.content article .cont_txt h3 {
	font-weight: lighter;
}

.content article .cont_txt ul li {
	display: inline-block;
}

/*************
	/* smartPhone
	*************/

@media screen and (max-width: 479px) {

	.content {
		font-size: 90%;
		margin-bottom: 2em;
	}

	.content .content_box {
		align-items: flex-start;
		flex-direction: column;
		column-gap: 2em;
	}

	.content article h2 {
		font-size: 120%;
	}

	.content article img {
		width: 95%;
	}

	.content article .cont_txt {
		width: 95%;
	}

	.content article .cont_txt h3 {
		font-size: 110%;
	}

	.content article .cont_txt p {
		line-height: 2 !important;
	}
}

/**************************
/* こだわり　クラフトマンシップ
**************************/

#quality {
	line-height: 2;
	margin-bottom: 2em;
}

.q_head {
	text-align: center;
}

.q_head h2,
h3 {
	font-weight: lighter;
}

.q_head h3 {
	margin-bottom: 1em;
}

#quality img {
	width: 100%;
	margin-bottom: 1em;
}

video {
	width: 50%;
	margin-left: 25%;
	margin-bottom: 1em;
}

/*************
	/* smartPhone
	*************/

@media screen and (max-width: 767px) {

	#quality {
		padding: 1em;
		font-size: 90%;
	}

	.q_head {
		text-align: center;
		margin-left: 0px;
	}

	video {
		width: 100%;
		margin-left: 0;
	}
}

/**************************
/* こだわり　クオリティ
**************************/

#ten_q>li {
	margin-bottom: 1em;
	border-bottom: 1px solid #ddd;
}

#ten_q>li:last-child {
	border-width: 0;
}

#ten_q li h4 {
	color: #555;
	font-weight: bold;
}

#ten_q li span {
	color: #fabb00;
	background: #da241f;
	padding: 2px;
	margin-right: 0.5em;
	border-radius: 3px;
}

#ten_q li ul {
	display: flex;
	align-items: flex-start;
}

#ten_q li ul li:first-child {
	width: 70%;
	margin-right: 2em;
}

#ten_q li ul li img {
	width: 150px;
	border-radius: 5px;
}


/*************
	/* TAB
	*************/



/*************
	/* smartPhone_L
	*************/

@media screen and (max-width: 560px) {
	#ten_q li ul {
		justify-content: space-between;
	}

	#ten_q li ul li:first-child {
		margin-right: 1.5em;
	}

	#ten_q li h4 {
		margin-top: 1em;
	}
}

/*************
	/* smartPhone_S
	*************/
@media screen and (max-width: 420px) {

	#ten_q li ul li img {
		width: 100px;
	}

}

/**************************
/* 靴
**************************/

#item {
	text-align: center;
}

#item #listSetting .item {
	display: inline-block;
	margin-left: 0.6em;
	margin-right: 0.6em;
	margin-bottom: 2em;
}

#item #listSetting .item figure {
	width: 200px;
	height: 200px;
}

#item #listSetting .item figure img {
	width: 200px;
	border: 1px solid #ddd;
	transition: transform 0.5s linear;
}

#item #listSetting .item figure img:hover {
	transform: scale(2.2);
}

#item #listSetting .item .item-text {
	margin-top: 0.5em;
	font-size: 90%;
	text-align: left;
}

.item-brand {
	color: #da241f;
	font-weight: bold;

}

.label-ric {
	border: 1px solid #da241f;
	font-size: 75%;
	color: #da241f;
	font-weight: bold;
	padding: 0 5px;
	margin-right: 1em;
}

.label-pep {
	border: 1px solid #ff69b4;
	font-size: 75%;
	color: #ff69b4;
	font-weight: bold;
	padding: 0 5px;
}

/*************
	/* Tablet
	*************/

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

	#item #listSetting .item figure img:hover {
		transform: scale(1.8);
	}

	#item #listSetting .item {
		margin-left: 0;
		margin-right: 0;
	}
}

/*************
	/* smartPhone
	*************/


/**************************
/* 取引先
**************************/

#agency h3 {
	width: 280px;
	border: 1px solid #000;
	padding: 3px 5px;
	text-align: center;
	margin: 0 auto;
	margin-bottom: 1em;
	margin-top: 1em;
}


#agency ul {
	width: 280px;
	display: inline-block;
	vertical-align: top;
	margin-bottom: 10px;
	margin-right: 1em;
}

#agency ul li h4 {
	font-size: 110%;
	font-weight: bold;
	line-height: 1.5;
}


/**************************
/* 靴の選び方
**************************/

.kids span {
	font-size: 130%;
	color: #da241f;
}

.kids h3 {
	margin: 0 auto;
	width: 8.5em;
	text-align: center;
	border: 1px solid #000;
	margin-bottom: 2em;
	margin-top: 2em;
}

.kids_img {
	display: block;
	margin: 0 auto;
	width: 30% !important;
}

.kids_img.circle {
	border-radius: 999px;
}

.kids ul li {
	margin-bottom: 1em;
}

.kids ul li span {
	font-size: 110%;
	font-weight: bold;
	color: #000;
	background: linear-gradient(transparent 50%, #fabb00 50%);
	margin-right: 0.5em;
}

/*************
	/* Tablet
	*************/

@media screen and (max-width: 905px) {

	.kids {
		text-align: center;
	}

	.kids p {
		width: 100%;
		text-align: left;
		line-height: 2 !important;
	}

	.kids h3+img {
		display: inline-block;
		vertical-align: top;
		margin-left: 0em;
		margin-top: 0em;
		width: 80% !important;
	}

	.kids ul {
		width: 100%;
	}

	.kids ul li {
		text-align: left;
		line-height: 2.5;
	}

}

/**************************
/* 靴のサイズ
**************************/

.size table {
	background: red;
	border: 3px solid #dcdcdc;
	margin-bottom: 1em;
	margin-top: 1em;
}

.size table tr:nth-child(odd) {
	background: #e6e6fa;
}

.size table tr:nth-child(even) {
	background: #faebd7;
}

.size table tr th,
td {
	text-align: center;
	border: 1px solid #fff;
	padding: 6px 12px;
}

.size table th {
	width: 5em;
}

.size table td {
	width: 2.2em;
}

.size img {
	width: 60% !important;
}

.size .dl:hover {
	border: 3px solid #000;
}

.size .dl {
	margin: 1em auto;
	color: #da241f;
	display: block;
	width: 15em;
	border: 3px solid #ccc;
	border-radius: 5px;
	box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
}

.size .dl span:first-child {
	display: block;
	width: 15em;
	text-align: center;
	border-radius: 5px 5px 0 0;
}

.size .dl span:last-child {
	color: #fff;
	background: #da241f;
	display: block;
	width: 15em;
	text-align: center;
	border-radius: 0 0 3.5px 3.5px;
}


/**************************
/* FSC
**************************/

.fsc p {
	border-bottom: 1px solid #ccc;
	padding: 0.5em 0em;
}

.fsc .shop_info {
	display: inline-block;
	vertical-align: top;
	width: 49%;
	margin-top: 1em;
}

.fsc .shop_info h3 {
	width: 5em;
	text-align: center;
	border: 1px solid #000;
}

/*************
	/* smartPhone
	*************/

@media screen and (max-width: 426px) {

	.fsc .shop_info {
		width: 100%;
	}

	.fsc .shop_info img {
		max-width: 426px;
	}

}

/**************************
/* COLUMN
**************************/

#column {
	line-height: 2;
}

#column #honbun {
	min-width: 768px;
	margin-top: 1em;
}

#column h2 {
	font-weight: bold;
	text-align: left;
}

#column h2 span {
	border-bottom: 1px solid #ccc;
}

#column h3 {
	font-weight: bold;
}

#column h3::before {
	content: "●";
	margin-right: 0.25em;
}

#column p {
	margin-bottom: 1.5em;
	padding-right: 5em;
}

#column img {
	width: 100%;
	max-width: 100%;
}

#column img .img50 {
	width: 50%;
}


#column .column-img {
	max-width: 50%;
	margin: 0 auto;
	text-align: center;
}

#column .column-img2 {
	max-width: 50%;
	height: 50%;
	margin: 0 auto;
	text-align: center;
}

#column .column-img80 {
	max-width: 80%;
	height: 80%;
	margin: 0 auto;
	text-align: center;
}

#column .column-img90 {
	max-width: 90%;
	height: 90%;
	margin: 0 auto;
	text-align: center;
}

#column .column-img110 {
	max-width: 110%;
	height: 110%;
	margin: 0 auto;
	text-align: center;
}

#column .column-img130 {
	max-width: 150%;
	height: 150%;
	margin: 0 auto;
	text-align: center;
}

#column .column-img .small-img {
	/*	max-width: 200px;*/
	max-width: 100%;
}

#column .caption {
	text-align: center;
	font-size: 90% !important;
}

#column .author {
	background: #eee;
	padding: 1em;
}

#column .navi {
	display: flex;
	flex-wrap: nowrap;
	text-align: center;
	width: 100%;
	padding: 40px 0 40px 0;
	vertical-align: middle;
}

#column .previous {
	width: 50%;
	text-align: right;
	padding-right: 30px;
}

#column .previous-center {
	width: 100%;
}

#column .next {
	width: 50%;
	text-align: left;
	padding-left: 30px;
}

#column .next-center {
	width: 100%;
}

#column .p-title {
	font-weight: bold;
}

#column .naka-midashi {
	font-weight: bold;
}

#column .kyoucyou {
	font-weight: bold;
}

.static-column #catch {
	height: 100% !important;
}

/*************
	/* smartPhone
	*************/

@media screen and (max-width: 567px) {

	#column {
		padding: 1em;
		font-size: 90%;
	}

	#column #honbun {
		max-width: 567px;
		min-width: 280px;
	}

	#column p {
		padding-right: 0em;
	}

	#column .column-img {
		margin-left: 0em;
		max-width: 100%;
		width: 100%;
	}


	#column .column-img2 {
		max-width: 90%;
		height: 90%;
		margin: 0 auto;
		text-align: center;
	}


}

@media screen and (min-width: 568px) and (max-width: 768px) {

	#column {
		padding: 1em;
		font-size: 90%;
	}

	#column #honbun {
		max-width: 767px;
		min-width: 300px;
	}

	#column p {
		padding-right: 0em;
	}

	#column .column-img {
		/*margin-left: 0em;*/
		width: 100%;
	}


}

/* P2 */
.wrapper-sub #main_area #catch {
	height: 100%;
}

#wrapper #sub_area {
	padding-top: 20px;
}

#wrapper #sub_area .sub_area_in {
	width: 92%;
	margin: 0 auto;
}

#pan_li {
	border-top: 1px solid #ddd;
	background: #fffaf0;
	margin-bottom: 1em;
	padding: 0.5em;
}

#pan_li ul li {
	font-size: 90%;
	display: inline;
	list-style-type: none;
}

#pan_li ul li:after {
	content: " > ";
}

#pan_li ul li:last-child:after {
	content: none;
}

.two_h {
	font-size: 3vw;
	text-align: center;
	margin-bottom: 0.3em;
	color: #da241f;
	font-weight: bold;
}

/*************
	/* Tablet_S
	*************/

@media screen and (max-width: 767px) {

	#wrapper #sub_area {
		width: 100%;
		padding-top: 2vw;
	}

	#wrapper #sub_area .sub_area_in {
		width: 100%;
		margin: 0 auto;
	}

	#wrapper #sub_area p {
		font-size: 110%;
		line-height: 1.5em;
	}

}