@charset "utf-8";

.root-wrap {
	overflow: hidden;
}
.pagetop {
	z-index: 9000;
}
#Index .text h1 img {
	width: 100%;
	height: auto;
}
.contents {
	width: 100%;
	min-width: auto;
}


@media screen and (max-width: 1024px){
	header {
		display: none;
	}
/*********/}
@media screen and (max-width: 768px){
*,
*:after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
#Index .text .more {
	height: auto !important;
}
.commonBtn, .commonBtn02 {
	height: auto !important;
	border-radius: 70px;
	padding: 15px 0px 15px 38px;
}
.justify {
	text-align: justify
}
/*********/}

.frontmost {
	position: relative;
	z-index: 500;
}


/*================================================================================================

* Anchor ID *

================================================================================================*/
#ArticleList,
#articleList {
	padding-top: 60px;
	margin-top: -60px;
}

#Item01-,
#Item02-,
#Item03-,
#Item04-,
#Item05-,
#Item06- {
	padding-top: 80px;
	margin-top: -80px;
}


/*================================================================================================

* padding reset *

================================================================================================*/
.p-reset,
.p-reset::after,
.p-reset::before,
.p-reset *,
.p-reset *::after,
.p-reset *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
/*================================================================================================

* INNER *

================================================================================================*/
.p993 {
	width: 100%;
	max-width: 993px;
	margin: 0 auto;
}

@media screen and (max-width: 768px){
.p580 {
	max-width: 580px;
	margin: 0 auto;
}
/*********/}

/*================================================================================================

* COLOR *

================================================================================================*/
.cl-black {
	color: #000;
}

/*================================================================================================

* LINK BTN *

================================================================================================*/
a.link-btn *,
a.link-btn *::after,
a.link-btn *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a.link-btn {
	width: 100%;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-size: 13px;
    line-height: 17px;
    color: #666;
    background: #fff;
    text-align: center;
    text-decoration: none;
    padding: 8px 0px 8px 0px;
    overflow: hidden;
    transition: all 300ms ease;
}

a.link-btn {
	position: relative;
}
a.link-btn::after {
	width: 15px;
	height: 11px;
	background: url(../img/mark_more.png) no-repeat;
	background-size: contain;
	content: "";
	position: absolute;margin: auto;top: 0;right: 1rem;bottom: 0;
    transition: all 300ms ease;
}

/* black ------------------------------------------------- */

a.link-btn.black {
    border: 1px solid #000;
    color: #fff;
    background: #000;
}
a.link-btn.black:hover {
    border: 1px solid #fff;
    color: #000;
    background: #fff;
}
a.link-btn.black::after {
	width: 15px;
	height: 11px;
	background: url(../img/mark_more_hover.png) no-repeat;
}
a.link-btn.black:hover::after {
	width: 15px;
	height: 11px;
	background: url(../img/mark_more.png) no-repeat;
}


a.link-btn.black.border {
    border: 1px solid #ccc;
    color: #fff;
    background: #000;
}
a.link-btn.black.border:hover {
    border: 1px solid #ccc;
    color: #000;
    background: #fff;
}


/* hover ------------------------------------------------- */
a.link-btn:hover {
	 color: white;
    background-color: #000;
    border-color: #000;
    transition: all 300ms ease;
}
a.link-btn:hover::after {
	background: url(../img/mark_more_hover.png) no-repeat;
	background-size: contain;
    transition: all 300ms ease;
}

/* blank ------------------------------------------------- */
a.link-btn.blank::after {
	width: 12px;
	height: 10px;
	background: url(../img/mark_blank.png) no-repeat;
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
}
a.link-btn.blank:hover::after {
	background: url(../img/mark_blank_hover.png) no-repeat;
	background-size: contain;
}

a.link-btn.blank.black::after {
	width: 12px;
	height: 10px;
	background: url(../img/mark_blank_hover.png) no-repeat;
	background-size: contain;
}
a.link-btn.blank.black:hover::after {
	width: 12px;
	height: 10px;
	background: url(../img/mark_blank.png) no-repeat;
	background-size: contain;
}
/* Anchor ------------------------------------------------- */
a.link-btn.down::after {
	width: 15px;
	height: 13px;
	background: url(../img/mark_anchor.png) no-repeat;
	background-size: contain;
	content: "";
	background-repeat: no-repeat;
}
a.link-btn.down:hover::after {
	background: url(../img/mark_anchor_hover.png) no-repeat;
	background-size: contain;
}

a.link-btn.down.black::after {
	background: url(../img/mark_anchor_hover.png) no-repeat;
	background-size: contain;
	content: "";
	background-repeat: no-repeat;
}
a.link-btn.down.black:hover::after {
	background: url(../img/mark_anchor.png) no-repeat;
	background-size: contain;
}


/*================================================================================================

* LINK BTN - NEW *

================================================================================================*/
a.link-btn- *,
a.link-btn- *::after,
a.link-btn- *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
a.link-btn- {
	width: 100%;
    border: 1px solid #ccc;
    border-radius: 50px;
    font-size: 13px;
    line-height: 17px;
    color: #666;
    background: #fff;
    text-align: center;
    text-decoration: none;
    padding: 8px 0px 8px 0px;
    overflow: hidden;
    display: block;
    position: relative;
    transition: all 300ms ease;
}

@media screen and (max-width: 768px){
a.link-btn- {
    padding: 1rem 0px 1rem 0px;
    margin-bottom: 1rem;
}
a.link-btn-:last-child {
    margin-bottom: 0rem;
}
/*********/}

/* ARROW ------------------------------------------------- */
a.link-btn- span {
	position: relative;
}
a.link-btn- span::after {
	width: 15px;
	height: 15px;
	background-image: url(../img/mark_more.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
	content: "";
	position: absolute;margin: auto;top: 0;right: -30px;bottom: 0;
    transition: all 300ms ease;
}

/* hover ------------------------------------------------- */
a.link-btn-:hover {
	color: white;
    background-color: #000;
    border-color: #000;
    transition: all 300ms ease;
}
a.link-btn-:hover span::after {
	background-image: url(../img/mark_more_hover.png);
	background-size: contain;
    transition: all 300ms ease;
}

@media screen and (max-width: 768px){
a.link-btn- span {
	position: static;
}
a.link-btn- span::after {
	position: absolute;margin: auto;top: 0;right: 1rem;bottom: 0;
}
/*********/}

/* 2col ------------------------------------------------- */
.col2 a.link-btn- {
	width: 49%;
	max-width: 489px;
}
/* 3col ------------------------------------------------- */
.col3 a.link-btn- {
	width: 32.333%;
	max-width: 321px;
}
/* 4col ------------------------------------------------- */
.col4 a.link-btn- {
	width: 24%;
	max-width: 237px;
}
@media screen and (max-width: 768px){
/* 1col ------------------------------------------------- */
/* 2col ------------------------------------------------- */
/* 3col ------------------------------------------------- */
/* 4col ------------------------------------------------- */
.col1 a.link-btn-,
.col2 a.link-btn-,
.col3 a.link-btn-,
.col4 a.link-btn- {
	width: 100%;
	max-width: 100%;
}
/*********/}


/* COLOR ------------------------------------------------- */

a.link-btn-.black {
    border: 1px solid #000;
    color: #fff;
    background: #000;
}
a.link-btn-.black:hover {
	color: white;
	color: #000;
    background-color: #fff;
    border-color: #ccc;
    transition: all 300ms ease;
}
a.link-btn-.black span::after {
	background-image: url(../img/mark_more_hover.png);
	background-size: contain;
    transition: all 300ms ease;
}
a.link-btn-.black:hover span::after {
	background-image: url(../img/mark_more.png);
	background-size: contain;
    transition: all 300ms ease;
}


/* BLANK ------------------------------------------------- */
a.link-btn-.blank span::after {
	width: 12px;
	height: 10px;
	background-image: url(../img/mark_blank.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
}
a.link-btn-.blank:hover span::after {
	background-image: url(../img/mark_blank_hover.png);
	background-position: center center;
	background-size: contain;
}
a.link-btn-.black.blank span::after {
	width: 12px;
	height: 10px;
	background-image: url(../img/mark_blank_hover.png);
	background-position: center center;
	background-size: contain;
	background-repeat: no-repeat;
	content: "";
}
a.link-btn-.black.blank:hover span::after {
	background-image: url(../img/mark_blank.png);
	background-position: center center;
	background-size: contain;
}

/* Anchor ------------------------------------------------- */
a.link-btn-.down span::after {
	top: -3px;
	width: 15px;
	height: 13px;
	background-image: url(../img/mark_anchor.png);
	background-position: center center;
	background-size: contain;
	content: "";
	background-repeat: no-repeat;
}
a.link-btn-.down:hover span::after {
	background-image: url(../img/mark_anchor_hover.png);
	background-position: center center;
	background-size: contain;
}

a.link-btn-.black.down span::after {
	top: -2px;
	background-image: url(../img/mark_anchor_hover.png);
	background-position: center center;
	background-size: contain;
	content: "";
	background-repeat: no-repeat;
}
a.link-btn-.black.down:hover span::after {
	background-image: url(../img/mark_anchor.png);
	background-position: center center;
	background-size: contain;
}






/*================================================================================================

* HEADER BLACK *

================================================================================================*/

#BrandsIndex #header-black header > ul > li:nth-of-type(1) a,
#RiIndex #header-black header > ul > li:nth-of-type(2) a,
#Ri #header-black header > ul > li:nth-of-type(2) a,
#CsrIndex #header-black header > ul > li:nth-of-type(3) a,
#rikejyoIndex #header-black header > ul > li:nth-of-type(3) a,
#Fwis #header-black header > ul > li:nth-of-type(3) a,
#BeautyBus #header-black header > ul > li:nth-of-type(3) a,
#Csr #header-black header > ul > li:nth-of-type(3) a,
#AboutusIndex #header-black header > ul > li:nth-of-type(4) a,
#Aboutus #header-black header > ul > li:nth-of-type(4) a,
#Recruiting #header-black header > ul > li:nth-of-type(5) a{
	padding-bottom:11px;
	border-bottom:2px solid #000;
}
#header-black header > ul > li a{
	color:#000;
}

#header-black header > h1 > a img {
	opacity: 0;
}
#header-black header h1{
	padding-top:17px;
	background:url(../img/logo_black.png) no-repeat 34px 10px;
}

/*================================================================================================

* BR *

================================================================================================*/
br.sp-br {
	display: none;
}
br.pc-br {
	display: block;
}
@media screen and (max-width: 480px){
br.pc-br {
	display: none;
}
br.sp-br {
	display: block;
}
/*********/}

/*================================================================================================

* BLIND *

================================================================================================*/
span.blind {
	display: inline;
}
@media screen and (max-width: 480px){
span.blind {
	display: none;
}
/*********/}

/*================================================================================================

* FOOTER *

================================================================================================*/
footer .path ul {
	width: 100%;
	max-width: 993px;
	margin: 0 auto;
	height: 20px;
	padding: 3px 0px;
}

footer {
	background: #fff;
	width: 100%;
	position: relative;
	z-index: 1000;
	min-width: auto;
	padding: 0px 0px 0px;
}
footer ul.navi {
	margin: 0px;
	width: auto;
	width: calc(100% - 4rem);
	margin: 0 auto;
	margin-bottom: 10px;
}

footer small {
	width: 100%;
	max-width: 993px;
	margin: 0 auto;
}
footer small img {
	width: 100%;
	max-width: 189px;
}
footer div.navi {
	width: 100%;
	max-width: 993px;
	
}

/* INDEX =========================================*/
.index-footer {
	width: 100%;
}
.index-footer nav.path,
.index-footer div.navi {
	display: none;
}


/* PAGE =========================================*/
.page-footer footer ul.navi {
	width: 100%;
	max-width: 993px;
	margin: 0 auto;
	margin-bottom: 10px;
}

@media screen and (max-width: 768px){
footer div.navi {
	display: none;
}
footer .path {
	border-top: 1px solid #e7e7e7;
	border-bottom: 0px solid #e7e7e7;
	margin: 0px;
	width: 100%;
}
footer .path ul {
	height: auto;
	padding: 1rem 2rem;
	margin-bottom: 0px;
}
.page-footer footer ul.navi,
.page-footer footer small {
	padding-left: 2rem;
}

/*********/}
@media screen and (max-width: 480px){
footer .path ul {
	height: auto;
	padding: 1rem 1rem;
	margin-bottom: 0px;
}
.page-footer footer ul.navi,
.page-footer footer small {
	padding-left: 1rem;
}

/*********/}

/*================================================================================================

* SP MENU - アコーディオン型 *

================================================================================================*/
.menu-sp-wrap {
	width: 100%;
	height: 100%;
	position: fixed;
	margin: auto;top: 0;right: 0;bottom: 0;left: 0;
	background: rgba(0,0,0,0.5);
	z-index: 9999;
}
.menu-sp-wrap .scroll {
	width: 100%;
	height: 100%;
	padding: 6rem 1rem;
	overflow-y: scroll;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.menu-sp-title {
	font-size: 1.5rem;
	margin-bottom: 0.5rem;
	color: #fff;
}

/* 入れ子 ver
   ========================================================================== */

ul#menu-sp-nest {
	width: 100%;
	max-width: 580px;
	margin: 0 auto;
	box-shadow: 0px 0px 3px rgba(0,0,0,0.2);
	background: #fff;
	border-radius: 3px;
	overflow: hidden;
}

/* 親 =========================================*/
ul#menu-sp-nest > li {
	overflow: hidden;
	text-align: left;
}
ul#menu-sp-nest li img {
	width: 100%;
	max-width: 280px;
}
#menu-sp-nest > li > span.open,
#menu-sp-nest > li > a {
	cursor: pointer;
	position: relative;
	font-size: 1rem;
	line-height: 1.75em;
	padding: 1rem 1rem;
	text-decoration: none;
	display: block;
	color: #333333;
	border-bottom: 1px solid #eee;
	border-left: 3px solid rgba(0,0,0,0);
	transition: all 0.35s ease;
}
#menu-sp-nest > li > span.open {
	display: block;
	padding-right: 3rem;
}
#menu-sp-nest > li > span.open.active {
	padding: 1.5rem 1rem;
	padding-right: 3rem;
	background: #cabb82;
	border-left: 3px solid #9c8d52;
	transition: all 0.35s ease;
	color: #fff;
	font-weight: 500;
}


/* 子 =========================================*/
ul#menu-sp-nest ul.nest {
	padding: 1rem 1rem 2rem 1rem;
	background: #f2f2f2;
}
ul#menu-sp-nest ul.nest li a {
	font-size: 15px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	text-decoration: none;
	display: block;
	color: #333333;
	text-align: left;
	padding: 1rem 0;
	padding-right: 3rem;
	border-bottom: 1px solid #e0e0e0;
}

/* 孫 =========================================*/
ul#menu-sp-nest ul.nest li.child a {
	padding: 1rem;
	padding-right: 3rem;
}
ul#menu-sp-nest ul.nest li.title {
	border-bottom: 0px solid;
	font-size: 15px;
	padding: 0rem;
	padding: 1rem 1rem;
	background: #fafafa;
	border-left: 3px solid #e0e0e0;
}


/*================================================================================================

* SP MENU - レイヤー型 *

================================================================================================*/

/* ハンバーガーボタン =========================================*/
.hmbg-btn {
	width: 50px;
	height: 50px;
	background: #fff;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9995;
	display: none;
}

.hmbg-btn span {
	width: 20px;
	height: 1px;
	background: #333;
	content: "";
	position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
}
.hmbg-btn span:nth-child(2) {
	top: -10px;
}
.hmbg-btn span:nth-child(3) {
	top: 10px;
}

@media screen and (max-width: 1024px){
.hmbg-btn {
	display: block;
}
/*********/}

/* クローズ =========================================*/
.menu-close-btn {
	width: 50px;
	height: 50px;
	background: #fff;
	position: fixed;
	top: 0;
	right: 0;
	z-index: 9999;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease;
}
.menu-close-btn.on {
	opacity: 1;
	pointer-events: auto;
	transition: all 0.5s ease;
}
		.menu-close-btn span {
			width: 30px;
			height: 1px;
			background: #333;
			content: "";
			position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
			transform: rotate(45deg);
		}
		.menu-close-btn span:nth-child(2) {
			width: 30px;
			height: 1px;
			background: #333;
			content: "";
			position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
			transform: rotate(135deg);
		}

/* BACK BTN =========================================*/
.back-btn {
	width: 50px;
	height: 50px;
	position: fixed;
	top: 0rem;
	left: 0rem;
	z-index: 9995;
	opacity: 0;
	pointer-events: none;
	transition: all 0.5s ease;
}
.back-btn.on {
	opacity: 1;
	pointer-events: auto;
	transition: all 0.5s ease;
}
		.back-btn span:nth-child(1) {
			width: 21px;
			height: 21px;
			border-left: 1px solid #333;
			border-bottom: 1px solid #333;
			content: "";
			position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
			transform: rotate(45deg);
		}
		.back-btn span:nth-child(2) {
			width: 25px;
			height: 1px;
			background: #333;
			content: "";
			position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
		}
/* 背景 =========================================*/
.menu-sp-bg- {
	width: 200px;
	height: 200px;
	border-radius: 100%;
	opacity: 0.95;
	background: #fff;
	position: fixed;
	top: -6rem;
	right: -6rem;
	z-index: 9980;
	transform: scale(0);
	transition-duration: 0.3s;
	transition-delay: 0.2s;
	transition-timing-function: ease;
	transition-property: all;
	pointer-events: none;
}
		.menu-sp-bg-.show {
			transform: scale(13);
			transition-duration: 0.3s;
			transition-delay: 0s;
			transition-timing-function: ease;
			transition-property: all;
		}

@media screen and (max-width: 1024px){
.menu-sp-bg-.show {
	transform: scale(13);
}
/*********/}

@media screen and (max-width: 480px){
.menu-sp-bg-.show {
	transform: scale(11);
}
/*********/}

/* WRAP =========================================*/
.menu-sp-wrap- {
	width: 100%;
	height: 110%;
	position: fixed;
	margin: auto;top: 0;right: 0;left: 0;
	z-index: 9990;
	text-align: left;
}
.menu-sp-wrap- .scroll {
	width: 100%;
	height: 91%;
	overflow-y: scroll;
	padding: 8rem 1rem;
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

@media screen and (max-width: 480px){
.menu-sp-wrap- .scroll {
	padding: 4rem 1rem 12rem 1rem;
}

/*********/}

/* LIST =========================================*/
.menu-sp-wrap- .scroll .title {
	font-size: 1.25rem;
	max-width: 480px;
	margin: 0 auto;
	margin-bottom: 2rem;
	border-bottom: 1px solid #e0e0e0;
	padding-bottom: 1rem;
}
.menu-sp-wrap- .scroll .title a {
	text-decoration: none;
	color: #333;
	position: relative;
	width: 100%;
	display: block;
}
.menu-sp-wrap- .scroll .title a::after {
	width: 11px;
	height: 11px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	content: "";
	position: absolute;margin: auto;top: 0;right: 1rem;bottom: 0;
	transform: rotate(45deg);
}
		.menu-sp-wrap- .scroll .title.lato {
			font-size: 2rem;
			font-family: "Lato";
			font-weight: bold;
		}
.menu-sp-wrap- .scroll ul {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
}
.menu-sp-wrap- .scroll ul li {
	width: 100%;
	position: relative;
}
.menu-sp-wrap- .scroll ul li a,
.menu-sp-wrap- .scroll ul li p {
	width: 100%;
	padding: 1rem;
	display: block;
	text-decoration: none;
	font-size: 1.25rem;
	border-bottom: 1px solid #e0e0e0;
	color: #333;
	padding-right: 3rem;
	position: relative;
}

@media screen and (max-width: 480px){
.menu-sp-wrap- .scroll .title {
	margin-bottom: 1rem;
}
/*********/}

/* LIST SUB TITLE =========================================*/
.menu-sp-wrap- .scroll ul li.sub-title a {
	pointer-events: none;
	margin-top: 2rem;
}
	.menu-sp-wrap- .scroll ul li.sub-title.auto a {
		pointer-events: auto;
	}
.menu-sp-wrap- .scroll ul li.sub-title a::after {
	height: 60%;
	width: 3px;
	background: #cabb82;
	content: "";
	position: absolute;margin: auto;top: 0;bottom: 0;left: 0;
}

/* LIST ICON =========================================*/

/* arrow -----------------------*/
.menu-sp-wrap- .scroll ul li::after {
	width: 11px;
	height: 11px;
	border-top: 1px solid #333;
	border-right: 1px solid #333;
	content: "";
	position: absolute;margin: auto;top: 0;right: 1rem;bottom: 0;
	transform: rotate(45deg);
}
		.menu-sp-wrap- .scroll ul li.menu-sp-show::before {
			width: 11px;
			height: 1px;
			background: #333;
			content: "";
			position: absolute;margin: auto;top: 0;right: 0.95rem;bottom: 0;
		}


/* arrow reset -----------------------*/
.menu-sp-wrap- .scroll ul li.blank::after,
.menu-sp-wrap- .scroll ul li.sub-title::after {
	display: none;
}
.menu-sp-wrap- .scroll ul li.sub-title.auto::after {
	display: block;
}

/* blank -----------------------*/
.menu-sp-wrap- .scroll ul li.blank::before {
	width: 15px;
	height: 15px;
	background: url(../img/mark_blank.png)no-repeat center center;
	background-size: contain;
	content: "";
	position: absolute;margin: auto;top: 0;right: 0.75rem;bottom: 0;
}


@media screen and (max-width: 480px){
.menu-sp-wrap- .scroll .title {
	font-size: 1.25rem;
}
.menu-sp-wrap- .scroll ul li a,
.menu-sp-wrap- .scroll ul li p {
	font-size: 1rem;
}
/*********/}


/* IMG LINK =========================================*/
.menu-sp-wrap- .img-link {
	width: 100%;
}
.menu-sp-wrap- .img-link .img {
	width: 100%;
}
	.menu-sp-wrap- .img-link .img img {
		width: 100%;
	}
.menu-sp-wrap- .img-link .link-text {
	width: 100%;
	padding-top: 0.5rem;
	text-align: left;
}

/* MOVIN ANIME =========================================*/
.menu-sp-wrap-.right {
	transform: translateX(110%);
	transition: all 0.35s ease;
}
.menu-sp-wrap-.in {
	transform: translateX(0%);
	transition: all 0.35s ease;
}
.menu-sp-wrap-.left {
	transform: translateX(-110%);
	transition: all 0.35s ease;
}

.menu-sp-wrap-.scale-out {
	transform: translateX(0%) scale(0.6);
	opacity: 0;
	transition: all 0.35s ease;
}

.menu-sp-wrap-.no01.in {
	transition-duration: 0.35s;
	transition-delay: 0.3s;
	transition-timing-function: ease;
	transition-property: all;
}
.menu-sp-wrap-.no01.in.right {
	transition-duration: 0.35s;
	transition-delay: 0s;
	transition-timing-function: ease;
	transition-property: all;
}

/*================================================================================================

* HEADER SP *

================================================================================================*/
.sp-menu-black {
	width: 100%;
}
/* SP用ヘッダー背景 =========================================*/
.header-sp {
	width: 100%;
	height: 50px;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9000;
	pointer-events: none;
	background: rgba(255,255,255,0);
	transition: all 0.35s ease;
}
		.header-sp.show {
			background: rgba(255,255,255,1);
			transition: all 0.35s ease;
		}
/* ロゴ部分 =========================================*/
.header-sp-logo {
	width: 100%;
	max-width: 100px;
	position: fixed;
	top: 9px;
	left: 13px;
	opacity: 0;
	display: none;
	z-index: 9001;
	transition: all 0.5s ease;
}
		.header-sp-logo.show {
			opacity: 1;
			transition: all 0.5s ease;
		}
.header-sp-logo img {
	width: 100%;
}

.header-sp-logo .no02 {
	opacity: 0;
	transition: all 0.5s ease;
}

		/* 初期カラーBLACK =========================================*/
		.sp-menu-black .header-sp-logo.no01 {
			opacity: 0;
		}
		.sp-menu-black .header-sp-logo.no02 {
			opacity: 1;
		}


@media screen and (max-width: 1024px){
.header-sp,
.header-sp-logo {
	display: block;
}
/*********/}

/* セクション全体 =========================================*/
section.main-wrap {
	width: 100%;
	min-height: 100vh;
	position: relative;
	overflow: hidden;
}

/* paddingを内側に =========================================*/
section.main-wrap *,
section.main-wrap *::after,
section.main-wrap *::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.commonBtn02 {
	width: 100%;
	max-width: 195px;
	height: auto;
}
/* メイン背景 =========================================*/
.main-bg {
	width: 100%;
	height: 100%;
	max-height: 960px;
	min-width: 1400px;
	content: "";
	position: absolute;margin: auto;top: -150px;right: 0;left: 0;
	z-index: 1;
}
.main-bg img.bg {
	width: 100%;
	position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
}
		.main-bg::before {
			width: 100%;
			height: 100%;
			content: "";
			background: rgba(0,0,0,0);
			position: absolute;margin: auto;top: 0;left: 0;
			z-index: 2;
		}

.slash-area {
	width: 100%;
	height: 1000px;
	content: "";
	background: #fff;
	overflow: hidden;
	pointer-events: none;
	position: absolute;margin: auto;right: 0;bottom: -500px;left: 0;
	transform: skewY(-17deg);
}

@media screen and (max-width: 768px){
.main-bg img.bg {
	display: none;
}
/*********/}

/* メインコピー梱包要素 =========================================*/
.main-copy {
	width: 100%;
	padding: 8rem 1rem 5rem 1rem;
	position: relative;
	z-index: 10;
}
.main-copy .inner {
	width: 100%;
	max-width: 993px;
	margin: 0 auto;
	color: white;
}
@media screen and (max-width: 768px){
	.main-copy {
    padding: 4rem 1rem 0rem 1rem;
	}
}

/* メインコピー =========================================*/
.main-copy .inner h1 {
	font-weight: normal;
	font-size: 13px;
	margin: 0px;
	margin-bottom: 2rem;
}
		.main-copy .inner h1 .text {
			padding-bottom: 6px;
		}
		.main-copy .inner h1 img {
			width: 100%;
			max-width: 387px;
		}

/* サブコピー =========================================*/
.main-copy .inner h2 {
	font-weight: normal;
    font-size: 17px;
    line-height: 24px;
}

/* Description =========================================*/
.main-copy .inner p {
    font-size: 13px;
    line-height: 24px;
}

/*================================================================================================

* SP用メイン背景 *

================================================================================================*/

.sp-bg {
	width: 100%;
	height: 100%;
	max-height: 740px;
	content: "";
	position: absolute;margin: auto;top: 0;right: 0;left: 0;
	z-index: 0;
	display: none;
}
.sp-bg img {
	width: 100%;
}
		.sp-bg::after {
			width: 100%;
			height: 100%;
			background: rgba(0,0,0,0.3);
			content: "";
			position: absolute;margin: auto;top: 0;right: 0;bottom: 0;left: 0;
		}

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

.sp-bg {
	display: block;
}
/*********/}

/*================================================================================================

* PAGE - GLOBAL *

================================================================================================*/

/* メインコピーエリア =========================================*/
.main,
.main02 {
	width: 100%;
	height: 793px;
	margin: 0px auto 0px;
	position: relative;
	overflow: hidden;
	min-width: auto;
}

/* 背景梱包要素 =========================================*/
.main .bg-wrap,
.main02 .bg-wrap {
	width: 100%;
	overflow: hidden;
}

/* メインタイトル =========================================*/
.main h1,
.main02 h1 {
	width: 100%;
}
.main dl, .main02 dl {
	width: 100%;
}

/* コピー部分インナー =========================================*/
.main .inner {
	width: 100%;
	max-width: calc(993px + 2rem);
	padding: 0rem 1rem;
	margin: 0 auto;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
@media screen and (max-width: 768px){
.main .inner {
	max-width: calc(580px + 2rem);
}
/*********/}


/*================================================================================================

* COLOR BOX *

================================================================================================*/
#colorbox {
	/*top: 5% !important;*/
	top: 5%;
	/*height: 100% !important;*/
	height: 100%;
	max-height: 85% !important;
}
#cboxLoadedContent {
	padding: 0px;
	height: 100% !important;
	overflow-y: scroll;
}
#Recruiting #cboxContent {
	height: 100vh !important;
	/*max-height: 900px;*/
}
iframe.cboxIframe {
	height: 100% !important;
	-webkit-overflow-scrolling: touch;
	overflow-scrolling: touch;
}

/*================================================================================================

* REMODAL JS *

================================================================================================*/
.remodal-overlay {
	background-color: rgba(0,0,0,.3)!important;
}
.remodal-close-btn {
  background: url(../img/close.png) no-repeat right top;
  top: -32px;
  width: 65px;
  height: 65px;
  right: 0;
  border: 0;
  padding: 0;
  margin: 0;
  overflow: visible;
  text-indent: -9999px;
  position: absolute;
}

/*================================================================================================

* BLOG *

================================================================================================*/

#Modal .modal {
	width: 100%;
	max-width: 773px;
	margin: 0 auto;
	overflow: hidden;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 2rem 1rem 20rem 1rem;
}
			#Modal.ex .modal {
				padding: 6rem 1rem 20rem 1rem;
			}
			#Modal .modal *,
			#Modal .modal *::after,
			#Modal .modal *::before {
				-webkit-box-sizing: border-box;
				-moz-box-sizing: border-box;
				box-sizing: border-box;
			}
#Modal {
    width: 100%;
    height: 100%;
	overflow-y: scroll !important;
}
.modal img {
    width: 100%;
    height: auto;
}

#Modal .modal .photo {
    width: 45%;
    float: left;
    margin-right: 5%;
}
#Modal .modal .photo img {
    width: 100%;
    margin: 0px;
    display: block;
    margin-bottom: 1rem;
}

#Modal .modal .photo + .text {
    width: 50%;
    float: left;
    margin: 0px;
}

#cboxPrevious {
	background: none;
}

#Modal .modal .list {
    position: absolute;
    right: 3rem;
    top: 3rem;
    font-size: 13px;
    line-height: 24px;
}
#Modal .modal table th {
  background: #7fa7ff;
  padding: 10px;
}
#Modal .modal table td {
  background: #dae3f3;
  padding: 10px;
}


@media screen and (max-width: 768px){
#Modal .modal {
	width: 100%;
	max-width: 480px;
}
#Modal .modal .photo {
    width: 100%;
    margin-right: 0%;
    border-bottom: 1px solid #eee;
    margin-bottom: 2rem;
    padding-bottom: 1rem;
}
#Modal .modal .photo + .text {
    width: 100%;
}

#Modal .modal .list {
    right: 1rem;
}
/*********/}


/*================================================================================================

* FLEX ROW *

================================================================================================*/
.flex-row {
	width: 100%;
	margin: 0 auto;
	margin-bottom: 62px;
	position: relative;
}
		.flex-row img {
			width: 100%;
		}
.flex-row .img {
	width: 35%;
}
.flex-row .text {
	width: 60%;
	z-index: 2;
}
		.flex-row .inner {
			width: 100%;
		}
		.flex-row .text h3 {
			margin: 0;
			padding: 0;
		}
				.flex-row .text h3 .sub-title {
					font-size: 18px;
					color: #b39e62;
					margin: 0px 0px 2px;
					line-height: normal;
					font-weight: normal;
				}
				.flex-row .text h3 .main-title {
					font-size: 30px;
					color: #b39e62;
					margin: 0px 0px 18px;
					line-height: 38px;
					font-weight: normal;
				}
		.flex-row .text p {
			text-align: left !important;
			margin-bottom: 0px !important;
			font-size: 13px;
			line-height: 26px;
		}

.flex-row .img-ab {
	width: 100%;
	content: "";
	position: absolute;margin: auto;top: 0%;right: 0%;bottom: 0%;left: 0%;
	z-index: 1;
}