@charset "utf-8";
/*!
 * about CSS
 * ---------------------------------------------
 *
 *
 */

@import 'elements.css';

/*===================================
	layout
=====================================*/

.content2,
.fjallravenWay .content {
	margin-bottom: 30px;
	padding-bottom: 150px;
	border-bottom: solid 1px #ccc;
}
.fjallravenWay .content {
	padding-bottom: 100px;
}

/*===================================
	parts
=====================================*/
/*  sprite
---------------------------------*/

/*{
	background-image: url(../images/base/sprite.png);
	background-repeat: no-repeat;
}*/

/*  opacity
---------------------------------*/

/*{
	opacity: .7;
	text-decoration: none;
}*/
/*{
	opacity: 1;
}*/

/*  :before :after
---------------------------------*/

/*{
	content: "";
}*/
/*{
	display: inline-block;
	margin-top: -2px;
	vertical-align: middle;
}*/
/*{
	display: block;
}*/
/*{
	position: absolute;
}*/

/*===================================
	Brand Story
=====================================*/
/*  brandStoryCont
---------------------------------*/

.brandStoryCont {
	margin-bottom: 97px;
	line-height: 1.6;
}
.brandStoryCont h2 {
	margin-bottom: -10px;
	font-size: 48px;
	line-height: 1.4;
}
.brandStoryCont h3 {
	margin: 1em 0 2em;
	color: #d62336;
	font-size: 30px;
	font-weight: bold;
}
.brandStoryCont p {
	margin-bottom: 2.5em;
	font-size: 24px;
}

/*  brandConseptCont
---------------------------------*/

.contentHead h2 span {
	display: block;
/* 	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Osaka",Arial,sans-serif;; */
	font-size: 24px;
	font-weight: bold;
}
.brandConseptCont figure img {
	margin: auto;
}
.conseptList {
	margin: 100px; 0 60px;
}
.conseptList li {
	margin-bottom: 45px;
}
.conseptList h3 {
	margin-bottom:  0.5em;
	font-size: 52px;
	line-height: 1.2;
}
.conseptList h3 span {
	padding-left: 1em;
/* 	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック","Osaka",Arial,sans-serif;; */
	font-size: 30px;
	font-weight: bold;
}
.conseptList p {
	font-size: 18px;
	line-height: 1.6;
}
.conseptList p + p {
	margin-top: 3em;
}

/*===================================
	history
=====================================*/



/*===================================
	Fjallraven Way
=====================================*/

.fjallravenWay .content section h3 {
	margin-bottom: 0.8em;
	font-size: 36px;
	line-height: 1.6;
}
.fjallravenWay .content section h3 span {
	font-size: 30px;
}
.fjallravenWay .content section h3 + figure {
	margin-bottom: 2em;
}

/*  top
---------------------------------*/

.fjallravenWayTopCont h3 span {
	display: block;
}
.fjallravenWayTopCont h4 {
	font-size: 30px;
	line-height: 1.4;
}
.fjallravenWayTopCont p {
	margin-bottom: 2em;
	font-size: 18px;
	line-height: 1.8;
}
.fjallravenWayTopCont .link {
	overflow: hidden;
	margin: -1em 0 2em;
	font-size: 18px;
	line-height: 1.4;
}
.fjallravenWayTopCont .link dt {
	float: left;
	margin: 0 1em 0.6em 0;
	font-weight: bold;
}
.fjallravenWayTopCont .link dd {
	clear: right;
	margin-bottom: 1em;
}
.fjallravenWay .contentMenu {
	margin: 2em 0 0;
	font-size: 30px;
}
.fjallravenWay .contentMenu h3 {
	margin-bottom: 1.5em;
	text-align: center;
}
.fjallravenWay .contentMenu ul {
	border-top: dashed 1px #ddd;
	padding-top: 23px;
}
.fjallravenWay .contentMenu li {
	margin-bottom: 21px;
	padding-bottom: 27px;
	border-bottom: dashed 1px #ddd;
	letter-spacing: -.40em;
}
.fjallravenWay .contentMenu figure,.fjallravenWay .contentMenu b {
	display: inline-block;
	vertical-align: middle;
	letter-spacing: normal;
}
.fjallravenWay .contentMenu figure {
	margin-right: 34px;
	border: solid 1px #ddd;
}
.fjallravenWay .contentMenu b {
	width: 766px;
	color: #d00015;
	line-height: 1.6;
}

/*  our design
---------------------------------*/

.ourdesignCont h4 {
	font-size: 30px;
	line-height: 1.4;
}
.ourdesignCont h4 span {
	font-size: 24px;
}
.ourdesignCont p {
	margin-bottom: 1.6em;
	font-size: 18px;
	line-height: 1.8;
}
.ourdesignCont p:nth-of-type(1) {
	margin-bottom: 3em;
}
.ourdesignCont h3:nth-last-of-type(1) {
	margin-top: 110px;
}
.ourdesignCont .sampleList img {
	margin: 4em auto;
}

/*  our material
---------------------------------*/

.fjallravenWay .content section.ourmaterialCont h3:nth-of-type(2) {
	margin-bottom: 0;
}
.fjallravenWay .content section.ourmaterialCont h3:nth-of-type(2) span {
	display: block;
	margin-top: -0.3em;
	font-size: 24px;
}
.ourmaterialCont h4 {
	font-size: 30px;
	line-height: 1.4;
}
.ourmaterialCont h4 span {
	font-size: 24px;
}
.ourmaterialCont p,
.ourmaterialCont h5 {
	margin-bottom: 1.6em;
	font-size: 18px;
	line-height: 1.8;
}
.ourmaterialCont p:nth-of-type(1) {
	margin-bottom: 3em;
}
.ourmaterialCont h5 {
	margin-top: 4em;
}
.ourmaterialCont .ulatin {
	margin-bottom: 1.6em;
	color: #cd071e;
	font-size: 24px;
	line-height: 1.8;
	font-weight: bold;
}
.ourmaterialCont .materialList li {
	overflow: hidden;
	margin-bottom: 4em;
}
.ourmaterialCont .materialList figure {
	float: left;
	width: 260px;
}
.ourmaterialCont .materialList figure img {
	margin: auto;
}
.ourmaterialCont .materialList h4,
.ourmaterialCont .materialList p {
	margin-left: 260px;
}
.ourmaterialCont .materialList p:nth-of-type(1) {
	margin-bottom: 0;
}
.ourmaterialCont .materialList .noflt figure {
	float: none;
	width: auto;
	margin-bottom: 1em;
}
.ourmaterialCont .materialList .noflt figure img {
	margin: 0;
}
.ourmaterialCont .materialList .noflt h4,
.ourmaterialCont .materialList .noflt p {
	margin-left: 0;
}
@media screen and (max-width: 768px) {



}
/*
---------------------------------*/


/*
---------------------------------*/

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

	/*===================================
		layout
	=====================================*/

	.content2,
	.fjallravenWay .content{
		margin-bottom: 15px;
		padding-bottom: 60px;
	}

	/*===================================
		element
	=====================================*/
	/*  sprite
	---------------------------------*/

	/*{
		background-image: url(../images/base/sprite.png);
		background-repeat: no-repeat;
		background-size: 500px 250px;
	}*/

	/*  :before :after
	---------------------------------*/

	/*{
		content: "";
	}*/
	/*{
		display: inline-block;
		margin-top: -2px;
		vertical-align: middle;
	}*/

	/*===================================
		Brand Story
	=====================================*/

	.brandStory .contentHead h2 {
		font-size: 48px;
	}
	.brandStoryCont {
		margin: 10px 0 32px;
	}
	.brandStoryCont h2 {
		margin-bottom: 1em;
		font-size: 24px;
	}
	.brandStoryCont h3 {
		font-size: 18px;
	}
	.brandStoryCont p {
		font-size: 14px;
	}
	.brandStoryCont figure {
		margin: 0 -18px;
	}

	/*  brandConseptCont
	---------------------------------*/

	.contentHead h2 span {
		font-size: 18px;
	}
	.brandConseptCont figure {
		margin: 0 -18px;
	}
	.brandConseptCont .conseptList + figure img {
		width: 40%;
		margin: auto;
	}
	.conseptList {
		margin: 10px; 0;
	}
	.conseptList li {
		margin-bottom: 15px;
	}
	.conseptList h3 {
		font-size: 26px;
	}
	.conseptList h3 span {
		font-size: 16px;
	}
	.conseptList p {
		font-size: 14px;
	}
	.conseptList p + p {
		margin-top: 2em;
	}





	/*===================================
		Fjallraven Way
	=====================================*/

	.fjallravenWay .content section h3,
	.fjallravenWay .content section h3 span {
		font-size: 24px;
	}
	.fjallravenWay .content section h3 + figure {
		margin-bottom: 1em;
	}

	/*  top
	---------------------------------*/

	.fjallravenWayTopCont h4 {
		font-size: 24px;
	}
	.fjallravenWayTopCont p {
		font-size: 14px;
	}
	.fjallravenWayTopCont .link {
		font-size: 14px;
	}
	.fjallravenWayTopCont .link dd {
		clear: right;
		margin-bottom: 1em;
	}
	.fjallravenWay .contentMenu {
		font-size: 18px;
	}
	.fjallravenWay .contentMenu ul {
		padding-top: 10px;
	}
	.fjallravenWay .contentMenu li {
		margin-bottom: 10px;
		padding-bottom: 15px;
	}
	.fjallravenWay .contentMenu figure {
		width: 27%;
		margin-right: 3%;
	}
	.fjallravenWay .contentMenu b {
		width: 68%;
		line-height: 1.2;
	}

	/*  ourdesignCont
	---------------------------------*/

	.ourdesignCont h4 {
		font-size: 24px;
	}
	.ourdesignCont h4 span {
		display: inline-block;
		margin-bottom: 0.3em;
		font-size: 18px;
	}
	.ourdesignCont p {
		margin-bottom: 1.6em;
		font-size: 14px;
		line-height: 1.8;
	}
	.ourdesignCont p:nth-of-type(1) {
		margin-bottom: 3em;
	}
	.ourdesignCont h3:nth-last-of-type(1) {
		margin-top: 70px;
	}
	.fjallravenWay .content section.ourdesignCont h3:nth-last-of-type(1) span {
		font-size: 20px;
	}
	.ourdesignCont .sampleList img {
		margin: 2em auto;
	}

	/*  our material
	---------------------------------*/

	.fjallravenWay .content section.ourmaterialCont h3 {
		line-height: 1.2;
	}
	.fjallravenWay .content section.ourmaterialCont h3:nth-of-type(2) span {
		margin-top: 0.3em;
		font-size: 18px;
	}
	.ourmaterialCont h4 {
		font-size: 24px;
	}
	.ourmaterialCont h4 span {
		display: inline-block;
		font-size: 18px;
	}
	.ourmaterialCont p,
	.ourmaterialCont h5 {
		font-size: 14px;
	}
	.ourmaterialCont .ulatin {
		font-size: 18px;
	}
	.ourmaterialCont .materialList li {
		margin-bottom: 2em;
	}
	.ourmaterialCont .materialList figure,.ourmaterialCont .materialList h4 {
		display: inline-block;
		vertical-align: middle;
	}
	.ourmaterialCont .materialList figure {
		float: none;
		width: 50%;
	}
	.ourmaterialCont .materialList figure img {
		margin: 0 auto 1em;
	}
	.ourmaterialCont .materialList h4 {
		width: 45%;
		margin: 0 0 0 1%;
	}
	.ourmaterialCont .materialList h4 span {
		display: block;
	}
	.ourmaterialCont .materialList p {
		clear: both;
		margin-left: 0;
	}
	.ourmaterialCont .materialList p:nth-of-type(1) {
		margin-bottom: 0;
	}
	.ourmaterialCont .materialList .noflt figure,.ourmaterialCont .materialList .noflt h4 {
		display: block;
		float: none;
		width: auto;
		margin: 0 auto 1em;
		text-align: center;
	}
	.ourmaterialCont .materialList .noflt figure {
		float: none;
		width: auto;
		margin: 0 auto 1em;
	}

}