@charset "UTF-8";
/*----------------------------------------

	- mov
	- article
		- concept
		- interview
		- collection
		- topics
		- link
		- about us
		- contact

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

header {
	z-index: 1002;
}

header>div>h1 {
    display: none;
}

/* ナビメニュー背景 */

header nav {
    background: url(/img/c_bg01.jpg) no-repeat center center;
    background-size: cover;
}


/*----------------------------------------
    mov
-----------------------------------------*/

#mov {
	position: fixed;
	top: 0;
	/*position: relative;*/
	z-index: 1001;
	overflow: hidden;
	height: 100vh;
	width: 100%;
	margin-bottom: 0;
	background: #000 url('/img/mov01_bg.jpg') no-repeat center center;
	background-size: cover;
}

/*#mov.fixed {
	margin-bottom: 700vh;
}*/

#mov p#movlogo {
	position: absolute;
	z-index: 1012;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	height: 74px;
	width: 400px;
	margin: auto;
	padding: 0 14px 150px 0;
}

#mov video {
	display: none;
	position: absolute;
	z-index: 1011;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	min-height: 100%;
	min-height: 100vh;
	min-width: 100%;
	min-width: 100vw;
	margin: auto;
}

#mov video+p {
	position: absolute;
	z-index: 1013;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	margin: auto;
	text-align: center;
	cursor: pointer;
}

#mov video+p::after {
	content: '';
	display: block;
	height: 60px;
	width: 1px;
	margin: 3px auto 0;
	background-color: #999;
}

@media only screen and (max-width:600px) {
	#mov p#movlogo {
		height: 44px;
		width: 240px;
		padding: 0 0 160px 0;
	}

	#mov video+p::after {
		height: 120px;
	}
}


/*----------------------------------------
    article
-----------------------------------------*/
article#content {
	position: static;
	top: auto;
	background-color: #fff;
}

article#content.fixed {
	position: fixed;
	top: 0;
}


/*----------------------------------------
    concept
-----------------------------------------*/

#concept {
	background-color: #fff;
}

#concept h1 {
    width: 1000px;
    margin: 0 auto;
	padding: 126px 0 61px;
	text-align: center;
}

@media only screen and (max-width:600px) {
	#concept h1 {
		width: 300px;
		margin: 0 auto;
		padding: 100px 0 50px;
	}
}

/* concepttxt */
#concept div#concepttxt {
	display: flex;
    width: 1000px;
    margin: 0 auto;
}

#concept div#concepttxt div {
	width: 50%;
	box-sizing: border-box;
}

#concept div#concepttxt div:nth-of-type(1) {
	padding: 90px 0 0 167px;
	line-height: 1.3;
}

#concept div#concepttxt div:nth-of-type(1) p {
	height: 500px; /* MS系ブラウザ縦書き文字高さ対策 */
	-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
			writing-mode: vertical-rl;
}

#concept div#concepttxt div:nth-of-type(2) p {
	line-height: 2;
}

@media only screen and (max-width:600px) {
	#concept div#concepttxt {
		display: block;
	    width: 100%;
	}
	#concept div#concepttxt div:nth-of-type(1) {
		width: 100%;
		padding: 3px 0 0 0;
		line-height: 1;
		text-align: center;
	}

	#concept div#concepttxt div:nth-of-type(1) p {
		height: 90px; /* MS系ブラウザ縦書き文字高さ対策 */
		-webkit-writing-mode: horizontal-tb;
			-ms-writing-mode: lr-tb;
				writing-mode: horizontal-tb;
	}
	#concept div#concepttxt div+div {
		width: 300px;
		margin: 57px auto 0;
		text-align: center;
	}
	#concept div#concepttxt div:nth-of-type(2) p {
		line-height: 1.6;
	}
}

/* conceptpics */
#concept div#conceptpics {
	display: flex;
    width: 100%;
	margin-top: 93px;
}

#concept div#conceptpics>div {
	display: flex;
    width: 50%;
}

#concept div#conceptpics>div span {
	display: block;
	position: relative;
	overflow: hidden;
}

#concept div#conceptpics>div div {
    height: inherit;
    width: 33%;
}

#concept div#conceptpics>div div span:nth-of-type(1) {
    height: 50%;
    width: 100%;
    background: url(../img/i_concept_p01.jpg) no-repeat left top;
    background-size: cover;
}

#concept div#conceptpics>div div span:nth-of-type(2) {
    height: 50%;
    width: 100%;
    background: url(../img/i_concept_p02.jpg) no-repeat left top;
    background-size: cover;
}

#concept div#conceptpics>div div+span {
    height: inherit;
    width: 68%;
    /*width: 67%;*/
    background: url(../img/i_concept_p03.jpg) no-repeat left top;
    background-size: cover;
}

#concept div#conceptpics>div+div {
	flex-wrap: wrap;
    width: 50%;
}

#concept div#conceptpics div+div span:nth-of-type(1) {
    height: 50%;
    width: 67%;
    background: url(../img/i_concept_p04.jpg) no-repeat left top;
    background-size: cover;
}

#concept div#conceptpics div+div span:nth-of-type(2) {
    height: 50%;
    width: 33%;
    background: url(../img/i_concept_p05.jpg) no-repeat left top;
    background-size: cover;
}

#concept div#conceptpics div+div span:nth-of-type(3) {
    height: 50%;
    width: 33%;
    background: url(../img/i_concept_p06.jpg) no-repeat left top;
    background-size: cover;
}

#concept div#conceptpics div+div span:nth-of-type(4) {
    height: 50%;
    width: 67%;
    background: url(../img/i_concept_p07.jpg) no-repeat left top;
    background-size: cover;
}

@media only screen and (max-width:600px) {
	#concept div#conceptpics {
		display: block;
		width: 100%;
		margin-top: 76px;
	}
	#concept div#conceptpics>div,
	#concept div#conceptpics>div+div {
		width: 100%;
	}
}


/*----------------------------------------
    interview
-----------------------------------------*/

#interview {
	position: relative;
	height: 600px;
	min-width: 1000px;
	padding-top: 120px;
	background-color: #fff;
}

#interview::before {
	content: '';
	display: block;
	position: absolute;
	right: 50%;
	margin-right: -500px;
	height: 600px;
	width: 100%;
	background: url(../img/i_bg01.jpg) no-repeat right center;
	background-size: cover;
}

#interview h1 {
	position: absolute;
	z-index: 3;
	top: 4px;
	left: 48.7%;
	height: 190px;
	width: 190px;
	background-color: #cb5237;
}

#interview h1 span {
	display: table-cell;
	height: 190px;
	width: 190px;
	text-align: center;
	vertical-align: middle;
}

#interview>div {
	position: absolute;
	z-index: 1;
    top: 230px;
	right: 0;
	bottom: 0;
	left: 0;
	height: 600px;
	width: 1000px;
	margin: auto;
}

#interview>div p {
	width: 450px;
}

#interview>div p:nth-of-type(1) {
	line-height: 2;
}

#interview>div p:nth-of-type(2) {
	margin-top: 63px;
	text-align: right;
}

#interview>div p:nth-of-type(3) {
	margin-top: 36px;
	text-align: right;
}

#interview>figure {
	position: absolute;
	overflow: hidden;
	z-index: 2;
	top: 300px;
	right: 0;
	max-height: 460px;
	min-width: 580px;
	width: calc(50vw - 37px);
	background-color: #fff;
    transition: all 0.2s ease-out;
}

#interview>figure img {
	margin-top: -1px;
}

@media only screen and (max-width:600px) {
	#interview {
		position: relative;
		height: 740px;
		min-width: auto;
		padding-top: 0;
	}

	#interview::before {
		top: 220px;
		right: 0;
		bottom: auto;
		margin-right: 0;
		height: 520px;
		width: 100%;
	}

	#interview h1 {
		position: absolute;
		z-index: 3;
		top: -51px;
		left: 0;
		height: 120px;
		width: 120px;
		background-color: #cb5237;
	}

	#interview h1 span {
		display: table-cell;
		height: 120px;
		width: 120px;
		text-align: center;
		vertical-align: middle;
	}

	#interview>div {
		position: absolute;
		z-index: 1;
		top: 265px;
		right: auto;
		bottom: auto;
		left: auto;
		height: auto;
		width: 100%;
		margin: auto;
	}

	#interview>div p {
		width: 300px;
		margin: 0 auto;
	}

	#interview>div p:nth-of-type(1) {
		/*margin-top: 87px;*/
		margin-top: 0;
		line-height: 2;
	}

	#interview>div p:nth-of-type(2) {
		margin-top: 28px;
		text-align: left;
	}

	#interview>div p:nth-of-type(3) {
		margin-top: 20px;
		text-align: center;
	}

	#interview>figure {
		position: absolute;
		overflow: hidden;
		z-index: 2;
		top: 150px;
		right: 0;
		max-height: auto;
		min-width: auto;
		height: 200px;
		/*width: 300px;*/
		width: 80%;
		background-color: rgba(255,255,255,0);
	}
}


/*----------------------------------------
    collection
-----------------------------------------*/

#collection {
	background-color: #fff;
}

#collection>h1 {
    display: block;
    position: relative;
    width: 100%;
    padding: 129px 0 57px;
    text-align: center;
}

#collection>h1::before {
    content: "";
    display: block;
    width: 100%;
    margin-bottom: -0.9em;
    border-top: 1px solid #000;
}

#collection>h1>span {
    padding: 0 0.5em 0 1.5em;
	background-color: #fff;
}

#collection ul {
    display: flex;
    height: calc(100vw * 0.333333);
    width: 100%;
}

#collection ul#coll1 li {
    position: relative;
    height: inherit;
    width: 33%;
    box-sizing: border-box;
}

#collection ul#coll1 li:nth-of-type(1) {
	background: url(../img/i_collection_p01.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul#coll1 li:nth-of-type(2) {
    width: 34%;
	background: url(../img/i_collection_p02.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul#coll1 li:nth-of-type(3) {
	background: url(../img/i_collection_p03.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul#coll2 {
    height: calc(100vw * 0.25);
}

#collection ul#coll2 li {
    position: relative;
    height: inherit;
    width: 25%;
    box-sizing: border-box;
}

#collection ul#coll2 li:nth-of-type(1) {
	background: url(../img/i_collection_p04.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul#coll2 li:nth-of-type(2) {
	background: url(../img/i_collection_p05.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul#coll2 li:nth-of-type(3) {
	background: url(../img/i_collection_p06.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul#coll2 li:nth-of-type(4) {
	background: url(../img/i_collection_p07.jpg) no-repeat center center;
	background-size: 102% 102%;
}

#collection ul li a {
	display: block;
    position: relative;
    height: 100%;
    width: 100%;
}

#collection ul li a::before {
	content: '';
	display: block;
	top: 0;
	left: 0;
    height: inherit;
    width: 100%;
    background-color: rgba(0,0,0,0);
    transition: background-color 0.2s ease-out;
}

#collection ul li a:hover::before {
    background-color: rgba(0,0,0,0.6);
    transition: background-color 0.2s ease-out;
}

#collection ul li a p {
    position: absolute;
    bottom: 20px;
    width: auto;
    padding: 2px 19px;
    background-color: rgba(0,0,0,0);
    box-sizing: border-box;
}

#collection ul li a:link,
#collection ul li a:visited {
    text-decoration: none;
    opacity: 1;
    transition: none;
}

#collection ul li a:hover,
#collection ul li a:active {
    text-decoration: none;
    opacity: 1;
    transition: none;
}

#collection ul li a p {
    background-color: rgba(0,0,0,1);
    transition: background-color 0.1s ease-out;
}

#collection ul li a:hover p {
    background-color: rgba(203,82,55,1);
    transition: background-color 0.2s ease-out;
}

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

	#collection>h1 {
	    padding: 89px 0 36px;
	}
	#collection ul#coll1 {
		display: block;
		height: auto;
		width: 100%;
	}

	#collection ul#coll1 li {
		height: 250px !important;
	    width: 100% !important;
		background-size: cover !important;
	}

	#collection ul#coll2 {
		flex-wrap: wrap;
	    height: 100vw;
	}

	#collection ul#coll2 li {
	    height: 50%;
	    width: 50%;
	}

	#collection ul#coll1 li a p {
	    padding: 2px 19px;
	}

	#collection ul#coll2 li a p {
    	bottom: 10px;
	    padding: 3px 19px;
	}
}


/*----------------------------------------
    topics
-----------------------------------------*/

#topics {
	background-color: #fff;
}

#topics div {
    width: 1000px;
    margin: 0 auto;
    padding: 107px 0 0;
}

#topics div h1 {
    margin-bottom: 55px;
}

#topics div h1 span {
    line-height: 1;
    vertical-align: middle;
}

#topics div h1 span+span {
}

#topics div h1 span+span:before {
    content: '';
    display: inline-block;
    height: 4px;
    width: 10px;
    margin: 0 19px 0 6px;
    border-top:1px solid #666;
}

#topics div ul {
    display: flex;
    flex-wrap: wrap;
}

#topics div ul li {
    position: relative;
    height: 320px;
    width: 320px;
    margin-left: 20px;
    padding: 20px;
    box-sizing: border-box;
}

#topics div ul li:nth-child(3n+1) {
    margin-left: 0;
}

#topics div ul li:nth-child(n+4) {
    margin-top: 40px;
}

#topics div ul li a {
    display: block;
}

#topics div ul li a::after {
    content: '';
    display: block;
    position: absolute;
    z-index: 2;
    bottom: 0;
    left: 0;
    height: 320px;
    width: 320px;
    background: linear-gradient(to bottom, rgba(255,255,255,0) 66%,rgba(0,0,0,1) 84%,rgba(0,0,0,1) 100%);
    opacity: .7;
}

#topics div ul li img {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
}

#topics div ul li p {
    position: absolute;
    z-index: 3;
    bottom: 16px;
    left: 20px;
    width: 280px;
}

/* more */
#topics div>p {
    width: 120px;
    margin: 41px auto 0;
    margin-right: 0;
}

@media screen and (max-width:600px) {
    #topics div {
        width: 300px;
        padding: 62px 0 0;
    }

    #topics div h1 {
        margin-bottom: 32px;
    }

    #topics div h1 span {
        line-height: 1;
        vertical-align: middle;
    }

    #topics div h1 span+span:before {
        content: '';
        display: inline-block;
        height: 4px;
        width: 10px;
        margin: 0 19px 0 10px;
        border-top:1px solid #666;
    }

    #topics div ul {
        display: block;
    }

    #topics div ul li {
        height: 140px;
        width: 140px;
        padding: 20px;
    }

    #topics div ul li+li {
        margin-top: 10px !important;
        margin-left: 0;
    }

	#topics div ul li:nth-child(n+4) {
	    margin-top: 0;
	}

    #topics div ul li a::after {
        display: none;
    }

    #topics div ul li a span {
        color: #999;
    }

    #topics div ul li p {
        position: absolute;
        top: -4px;
        bottom: auto;
        left: 0;
        height: 140px;
        width: 100%;
        padding-left: 160px;
        color: #000;
    }

    /* more */
    #topics div>p:last-child {
        width: 120px;
        margin: 40px auto 0;
        margin-right: auto;
    }
}


/*----------------------------------------
    link
-----------------------------------------*/

#link {
    width: 1000px;
    margin: 0 auto;
    padding: 105px 0 120px;
}

#link section#brand {
    margin-top: 51px;
}

#link section#group {
    margin-top: 75px;
}

#link section ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 35px;
}

#link section ul li {
    display: table;
    flex-basis: 320px;
    margin-left: 20px;
}

#link section ul li:nth-of-type(3n+1) {
    margin-left: 0;
}

#link section ul li:nth-of-type(n+4) {
    margin-top: 20px;
}

#link section ul li a {
    display: table-cell;
    position: relative;
    height: 64px;
    width: 320px;
    padding: 0;
    background-color: #f5f3f0;
    vertical-align: middle;
    text-align: center;
}

#link section ul li a:hover {
    background-color: #cb5237;
}

#link section ul li:last-child a {
    padding: 0;
}

/* arrow */
#link section ul li a::after {
  content: '';
  position: absolute;
  top: 32px;
  right: 17px;
  width: 5.5px;
  height: 5.5px;
  margin-top: -3px;
  border: 0;
  border-top: solid 1px #333;
  border-right: solid 1px #333;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

#link section ul li a:hover::after {
  border-top: solid 1px #fff;
  border-right: solid 1px #fff;
}

@media screen and (max-width:600px) {
    #link {
        width: 300px;
        padding: 84px 0 80px;
    }

    #link section#brand {
        margin-top: 31px;
    }

    #link section#group {
        margin-top: 54px;
    }

    #link section ul {
        display: block;
        margin-top: 35px;
    }

    #link section ul li {
        margin: 20px 0 0 0;
    }

    #link section ul li:nth-of-type(n+2) {
        margin-top: 20px;
    }
}


/*----------------------------------------
    aboutus
-----------------------------------------*/

#aboutus {
    background-color: #f5f3f0;
}

#aboutus>h1 {
	width: 100%;
	text-align: center;
	padding: 93px 0 0;
}

#aboutus div {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
    padding: 55px 0 95px;
}

#aboutus div section {
	width: 500px;
	padding: 0 50px 0 0;
}

#aboutus div section+section {
	width: 500px;
	padding: 0 0 0 49px;
	border-left: 1px solid #ccc;
}

#aboutus div section>h1 {
	line-height: 1;
	padding-bottom: 13px;
}

#aboutus div section dl {
    display: flex;
    width: 100%;
}

#aboutus div section dl dt {
    flex-basis: 150px;
    padding-top: 22px;
}

#aboutus div section dl dd {
    flex-basis: 370px;
    padding-top: 22px;
}

#aboutus div section dl dd>p {
	display: inline-block;
}

#aboutus div section dl dd>p:nth-of-type(even) {
    padding: 0 0 0 1em;
}

#aboutus div section dl dd ul li {
    display: flex;
    flex-wrap: wrap;
}

#aboutus div section dl dd ul li p:nth-of-type(2n) {
    flex-basis: 320px;
}

@media screen and (max-width:600px) {
	#aboutus>h1 {
		width: 100%;
		padding: 54px 0 0;
	}
    #aboutus div {
    	display: block;
    	width: 300px;
        margin: 0 auto;
    	padding: 35px 0 57px;
    }
    #aboutus div section {
        width: 100%;
    	padding: 0;
    }

	#aboutus div section+section {
		width: 300px;
		margin-top: 55px;
		padding: 0;
		border-left: none;
	}

    #aboutus div section h1 {
        width: 100%;
        margin: auto;
        padding-bottom: 16px;
    }

	#aboutus div section+section h1 {
        padding-bottom: 13px;
	}

    #aboutus div section dl {
        display: flex;
        flex-wrap: wrap;
        width: 300px;
        margin: 0 auto;
    }

    #aboutus div section dl dt {
        flex-basis: 100px;
        padding-top: 22px;
    }

    #aboutus div section dl dd {
        flex-basis: 200px;
        padding-top: 22px;
    }

    #aboutus div section dl dd ul {
        display: block;
    }

    #aboutus div section dl dd ul li p {
        padding: 0;
    }

	#aboutus div section dl dd>p:nth-of-type(even) {
	    padding: 0;
	}

    #aboutus div section dl dd ul li p:nth-of-type(2n+1) {
        flex-basis: auto;
        padding: 0;
    }

    #aboutus div section dl dd ul li p:nth-of-type(2n) {
        flex-basis: auto;
    }
}


/*----------------------------------------
    contact
-----------------------------------------*/
#contact>h1 {
	width: 100%;
	text-align: center;
	padding: 93px 0 0;
}

#contact div {
    display: flex;
    justify-content: space-between;
    width: 1000px;
    margin: 0 auto;
    padding: 55px 0 114px;
}

#contact div dl {
	width: 500px;
	padding: 0 50px 0 0;
}

#contact div dl+dl {
	width: 500px;
	padding: 0 0 0 49px;
	border-left: 1px solid #ccc;
}

#contact div dl dt {
	line-height: 1;
}

#contact div dl dd {
	margin-top: 34px;
}

#contact div dl dd p:first-child {
	margin-bottom: 22px;
}

#contact div dl+dl dd p:first-child {
	margin-bottom: 37px;
}

#contact div dl+dl dd p a.moreBtn01 {
	width: 144px;
}

#contact div dl+dl dd p a.moreBtn01 span {
	width: 144px;
}

@media screen and (max-width:600px) {
	#contact>h1 {
		padding: 54px 0 0;
	}

	#contact div {
	    display: block;
	    width: 300px;
	    padding: 36px 0 74px;
	}

	#contact div dl {
		width: 100%;
		padding: 0;
	}

	#contact div dl+dl {
		width: 100%;
		margin-top: 57px;
		padding: 0;
		border-left: none;
	}

	#contact div dl dt {
		line-height: 1;
	}

	#contact div dl dd {
		margin-top: 34px;
	}

	#contact div dl dd p:first-child {
		margin-bottom: 22px;
	}

	#contact div dl+dl dd p:first-child {
		margin-bottom: 39px;
	}

	#contact div dl+dl dd p:last-child {
		text-align: center;
	}

	#contact div dl+dl dd p a.moreBtn01 {
		width: 144px;
	}

	#contact div dl+dl dd p a.moreBtn01 span {
		width: 144px;
	}
}


/*----------------------------------------
    recruit
-----------------------------------------*/

#recruit {
    width: 400px;
    margin: 0 auto;
	text-align: center;
}
#recruit a {
	display: block;
    padding: 19px 0 20px;
	padding-left: 0.5em;
	background-color: #000;
    opacity: 1;
}

#recruit a:hover {
    background-color: rgba(203,82,55,1);
    transition: background-color 0.2s ease-out;
    opacity: 1;
}

@media screen and (max-width:600px) {
    #recruit {
    	width: 300px;
    }
}