@charset "UTF-8";

/*=================================================================================
     Base
=================================================================================== */

body {
	font-family: Hiragino Mincho ProN;
	background: linear-gradient(to right, #232526, #414345);
	font-size: 15px;
	line-height: 1.5;
	color: #FFF;
	margin: 0;
	padding: 0;
	width: 100%;
}

.center {
	text-align: center;
}

a {
	text-decoration: none;
	outline: none;
}

a:hover {
	text-decoration: underline;
}

/* 各ページのカバー写真設定 */
#cover img {
	width: 100%;
}

/* Safari clamp関数対策 */
*{
	min-height: 0vw;
}

/* 区切り線 hr */
hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0px;
	border-top: 1px solid #ccc;
	border-bottom: 1px solid #fff;
}

/*=================================================================================
     Header
=================================================================================== */

/*----- トップページ以外のヘッダー --------------------*/
.header {
	display: flex;
	align-items: center;
}

.header-logo {
	display: flex;
}

.header-logo img {
	width: 40%;
	min-width: 100px;
}
/*=====================
 メニューのパソコン表示設定
=======================*/
@media screen and (min-width:600px) {
	.header-menu {
		display: column;
	}
	
	.header-nav {
		display: flex;
		margin: 0 0 0 auto;
	}
	
	.header-list {
		display: flex;
		align-items: center;
		margin: 0 0 0 auto;
	}
	
	.header-item {
		list-style: none;
		margin-right: 1.5vw;
	}
	
	.header-item i {
		font-size: clamp(23px,6vw,60px);
	}
	
	/*-- menu --*/
	.header-menu-list {
		width: 100%;
		display: flex;
		padding: 0;
		margin: 0;
		justify-content: center;
	}
	
	.header-menu-list li {
		display: inline-block;
		margin: 0;
		padding-left: 1em;
		padding-right: 1em;
		padding-top: 1em;
		font-size: clamp(10px,1.5vw,25px);
		list-style: none;
	}
	
	/* ボタンのデザイン */
	.header-menu-list li a{
		/*文字の色*/
		color: #FFF;
	}
	
	/* ハンバーガーメニューの非表示 */
	.hamburger-menu {
		display: none;
	}
}

/*====================
 メニューのスマホ表示設定
======================*/
@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.header-menu {
		display: none;
	}
	
	/*----- 
	ハンバーガーメニューの実装
	-----*/
	.hamburger-menu {
		margin: 0 0 0 auto;
	}
	
	.menu-btn {
		position: fixed;
		top: 8px;
		right: 8px;
		display: flex;
		height: 50px;
		width: 50px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		background-color: black;
	}
	
	.menu-btn:hover {
		cursor: pointer;
	}
	
	/* 三本線の実装 */
	.menu-btn span,
	.menu-btn span:before,
	.menu-btn span:after {
		content: "";
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
	}
	.menu-btn span:before {
		bottom: 8px;
	}
	.menu-btn span:after {
		top: 8px;
	}
	
	/* チェックボックスを非表示にする */
	#menu-btn-check {
		display: none;
	}
	
	#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255,255,255,0);/* メニューオープン時は真ん中の線を透明にする */
	}
	
	/* メニューを開いている時はハンバーバーボタンが×になる */
	#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
	}
	#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(45deg);
	}
	
	/*-----
	メニュー部分の実装
	-----*/
	.hamburger-menu-content {
		width: 80%;
		height: 100%;
		position: fixed;
		top: 0;
		/* メニューを外に出しておく */
		left: 100%;
		
		z-index: 80;
		background-color: black;
		transition: all 0.5s; /*アニメーションを滑らかにする*/
	}
	
	.hamburger-menu-content ul{
		padding: 70px; 10px 0;
	}
	
	.hamburger-menu-content ul li {
		/* メニューの下に線入れたかったらこれ有効にする border-bottom: solid 0.5px #ffffff; */
		list-style: none;
	}
	
	.hamburger-menu-content ul li a {
		display: block;
		width: 100%;
		font-size: 15px;
		box-sizing: border-box;
		color: #ffffff;
		text-decoration: none;
		padding: 9px 15px 10px 0;
		position: relative;
	}
	
	#menu-btn-check:checked ~ .hamburger-menu-content {
		left: 30%; /*メニューを画面内へ動かす*/
	}
	
	/* ハンバーガー内のSNS */
	.hamburger-sns {
		display: flex;
	}
}

/*=================================================================================
     Footer
=================================================================================== */
#footer {
	background-color: #4C4C4C;
}

#footer .footer_logo img, #footer .footer_logo {
	display: inline-block;
	width: 120px;
}

#footer .footer_navi li a {
	padding: 0 10px;
	color: #ccc;
}

#footer .footer_logo {
	padding: 10px 0;
}

#footer .footer_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 10vw;
}

#footer .footer_navi {
	display: inline-block;
	list-style: none;
}

#footer .footer_navi li {
	display: inline-block;
	font-family: "Gill Sans","Gill Sans MT","ヒラギノ角ゴシック";
	font-size: 13px;
}

#footer .footer_navi li a:hover {
	text-decoration: none;
}


/*-----トップページのヘッダー----------*/
.footer-sns-btn ul {
	display: flex;
	align-items: right;
	justify-content: right;
	margin: 0;
	padding-top: 0;
	padding-right: 2vw;
	padding-left: 0;
	padding-bottom: 0;
}

.footer-sns-btn li {
	list-style: none;
	margin-right: 1.5vw;
	margin-bottom: 0.5vw;
}

.footer-sns-btn ul li i {
	font-size: clamp(23px,6vw,45px);
}


/* スマホ表示の設定 */
@media screen and (max-width:599px) {/*599px以下で表示される時*/
	#footer .footer_inner-block {
		padding: 0;
	}
	
	#footer .footer_logo img, #footer .footer_logo {
		display: block;
		margin: 0;
	}
	
	#footer .footer_navi {
		padding: 0;
	}
	
	#footer .footer_navi li a {
		padding: 0 10px;
		display: block;
		background-size: 5px auto;
	}

}

/*-----コピーライト------------------------------------*/
.copyright {
	background-color: #3B4661;
	font-family: "Gill Sans","Gill Sans MT","ヒラギノ角ゴシック";
	font-size: 10px;
	padding: 5px 0;
	text-align: center;
}

/*=================================================================================
     Top page
=================================================================================== */

/*-----スライドショー設定 --------------------------------*/
.main_wrap {
	position: relative;
	width: 100%;
	height: 450px;
	overflow: hidden;
	display: flex;
}

.slide-bg {
	position: absolute;
	width: 100%;
	height: auto;
}

/* スライドの画像設定 */
.loop_slide {
	display: flex;
	width: 100vw;
	height: 450px;
	overflow: hidden;
	z-index: 1;
}

.loop_slide img {
	width: auto;
	height: 100%;
}

.loop_slide img:first-child {
	animation: slide1 60s -30s linear infinite;
}

.loop_slide img:last-child {
	animation: slide2 60s linear infinite;
}

/* アニメーション設定 */
@keyframes slide1 {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}

@keyframes slide2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}


/*スライドに重なってる爪華師ロゴ*/
.slide-logo {
	position: absolute;
	width: 100%;
	height: 450px;
	overflow: hidden;
	z-index: 5;
}

.slide-logo img {
	position: absolute;
	width: 45%;
	max-width: 500px;
	min-width: 250px;
	left: 0;
	top: 0;
	bottom: auto;
	z-index:2;
}

/*スライドに重なってるメッセージ*/
.slide-message img {
	position: absolute;
	width: 60%; /* from manicuristの時は50% */
	max-width: 1150px; /* from manicuristの時は1090px */
	min-width: 500px; /* from manicuristの時は450px */
	right: 0;
	bottom: 0;
	z-index: 3;
}

/* スマホ表示の設定 */
@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.slide-logo img {
		position: absolute;
		width: 60%;
		min-width: 200px;
		left: 0;
		top: 0;
		z-index: 2;
	}
	
	.slide-message img {
		position: absolute;
		width: 90%;
		min-width: 310px; /* from manicuristの時は285px */
		right: 0;
		bottom: 0;
		z-index: 10;
	}
}


/*----- 1期生募集説明会の申し込みフォームボタン -----------------------*/
.about_designer1_text {
	width: 100%;
	text-align: center;
	font-size: 18px;
}

.about_designer1_btn {
	width: 50%;
	padding: 0 1vw;
	margin: 0 auto;
}

a.designer1-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#C04848, #480048 100%);
	border: 1px solid #000;
	border-radius: 15px;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 ;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	position: relative;
	line-height: 1.1;
	color: #FFF;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.designer-1_btn  {
		width: 60%;
	}
}


/*----- 各種サイトへのリンク ---------------------------------------------*/
.btn-wrap {
	display: flex;
	width: 80%;
	justify-content: space-evenly;
	margin-bottom: 0; /* ボタン1行にもどったら 5vw; にする */
	margin-top: 0;
	margin-left: auto;
	margin-right: auto;
}

/*----- WAO!entertainment models instaボタン -----*/
.about_model-btn {
	width: 50%;
	padding: 2vw;
}

a.model-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background:linear-gradient(#43C6AC, #191654 100%);
	/* モデルにもどしたらこれにする background: linear-gradient(#9a8478, #1e130c 100%); */
	border: 1px solid #000;
	border-radius: 15px;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 ;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	position: relative;
	line-height: 1.1;
	color: #FFF;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.about_model-btn {
		width: 50%;
	}
	
	a.model-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background:linear-gradient(#43C6AC, #191654 100%);
		/* モデルにもどしたらこれにする background: linear-gradient(#9a8478, #1e130c 100%); */
		border: 1px solid #000;
		border-radius: 15px;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		padding: 0 ;
		font-size: 13px;
		text-align: center;
		text-decoration: none;
		position: relative;
		line-height: 1;
		color: #FFF;
	}
}

/*----- JNFW2023A/W ボタン -----*/
.about_jnfw-btn {
	width: 50%;
	padding: 2vw;
}

a.jnfw-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#ED213A, #93291E 100%);
	border: 1px solid #000;
	border-radius: 15px;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 ;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	position: relative;
	line-height: 1.1;
	color: #FFF;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.about_jnfw-btn {
		width: 50%;
	}
	
	a.jnfw-btn {
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(#ff0084, #33001b 100%);
		border: 1px solid #000;
		border-radius: 15px;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		padding: 0 ;
		font-size: 13px;
		text-align: center;
		text-decoration: none;
		position: relative;
		line-height: 1;
		color: #FFF;
	}
}

/* ボタン2行になった時の下のボタン -----------*/
.btn-2 {
	width: 80%;
	margin: 0 auto 5vw;
}

.about_model-btn2 {
	width: 50%;
	padding: 2vw;
	margin: 0 auto;
}

.model-btn2 {
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#9a8478, #1e130c 100%);
	border: 1px solid #000;
	border-radius: 15px;
	box-sizing: border-box;
	width: 100%;
	height: 50px;
	padding: 0 ;
	font-size: 13px;
	text-align: center;
	text-decoration: none;
	position: relative;
	line-height: 1.1;
	color: #FFF;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.about_model-btn2 {
		width: 50%;
	}
	
	a.model-btn2 {
		display: flex;
		justify-content: center;
		align-items: center;
		background: linear-gradient(#9a8478, #1e130c 100%);
		border: 1px solid #000;
		border-radius: 15px;
		box-sizing: border-box;
		width: 100%;
		height: 50px;
		padding: 0 ;
		font-size: 13px;
		text-align: center;
		text-decoration: none;
		position: relative;
		line-height: 1;
		color: #FFF;
	}
}

		

/*-----YouTube --------------------------------*/
iframe {
	display: block;
	width: 70%;
	aspect-ratio: 16 / 9;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5vw;
}

/*-----メニューのボタン --------------------------------*/
.menu-list-wrap {
	width: 80%;
	margin-top: 0;
	margin-bottom: 3em;
	margin-right: auto;
	margin-left: auto;
}

.menu-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
    margin: 0;
	justify-content: center;
}

.menu-list li {
	display: inline-block;
	box-sizing: border-box;
	margin: 0;
	padding-left: 1em;
	padding-right: 1em;
	padding-top: 1em;
	font-size: clamp(15px,1.5vw,25px);
	list-style: none;
}

.gradient {
	vertical-align: super;
}

/* ボタンのデザイン */
.menu-list li a{
	/*文字の色*/
	color: #FFF;
	/*アニメーションの設定*/
	transition-property: all;
	transition-duration: 0.4s;
	transition-timing-function: ease-out;
}

/* コンテンツボタン押した時の設定*/
.menu-list li a:hover{
	text-decoration: none;
	background: linear-gradient(90deg, #3B4661 0%, #576B93 100%);
	background: -webkit-linear-gradient(120deg,#3B4661 0%, #576B93 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}


/* ------- News ----------------------*/
.news-list{
	list-style: none outside;
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
	margin-bottom: 10vw;
	padding: 3vw;
}
.news-list .item a{
	display: flex;
	flex-wrap: wrap;
	flex-wrap: nowrap;
	text-decoration: none;
	color: #fff;
	border-bottom: 1px solid #5b5b5b;
	padding: 20px 20px;
}
.news-list .item:first-child a{
	border-top: 1px solid #5b5b5b;
}
.news-list .item .date{
	margin: 0;
	min-width: 120px;
	font-size: clamp(15px,1.5vw,20px);
	color: #999;
	padding: 0 20px 0 0;
}
.news-list .item .title{
	margin: 0;
	width: 100%;
}
.news-list .item a:hover .title{
	color: #a0a0a0;
}

@media screen and (max-width: 767px){
	.news-list .item a{
		flex-wrap: wrap;
		padding: 8px;
	}
	.news-list .item .date{
		min-width: 100px;
	}
	.news-list .item .title{
		margin-top: 5px;
	}
	.news-list{
		margin-bottom: 76px;
	}
}

/* 装飾 */
*{
	box-sizing: border-box;
}
a{
	text-decoration: none;
}




/*-----2023ネイルデザイナー ----------------------------*/
.designer_2023 {
	display: flex;
	width: 100%;
	margin: 0;
}


@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.designer_2023 {
		flex-wrap: wrap;
	}
	.designer {
		width: calc(100%/5);
	}
}

.title_2023 {
	margin-left: 3vw;
	margin-top: 2vw;
	margin-bottom: 0;
	font-size: clamp(20px, 5vw, 45px);
}


/*--- view more ボタン ---*/
.view_more {
	width: 100%;
	margin-top: 0;
	margin-bottom: 10vw;
}

.view_more p {
	width: 100%;
	margin: 0;
	font-size: clamp(15px,1.5vw,20px);
	text-align: right;
}

.view_more a {
	text-decoration: none;
	outline: none;
	margin-right: 3vw;
	color: #fff;
}



/*=================================================================================
      What's      about
=================================================================================== */

/*----- 「タイトル」デザイン設定 -----*/

.about_title p {
	text-align: center;
	margin-top: 1em;
	margin-bottom: 1em;
	font-size: 40px;
}

/*画面幅が1000pxまでの場合に適用*/
@media screen and (max-width: 1000px){
	.about_title p {
		text-align: center;
		margin-top: 1.5em;
		margin-bottom: 1.5em;
		/*文字サイズを画面幅に合わせる*/
		font-size: 5.5vw;
	}
}

.about_content-box {
	width: 100%;
	margin: 5vw auto;
	background-image: url(images/about-image3.png);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}
		
.about_content-box p{
	width: 90%;
	text-align: center;
	margin:0 auto;
	padding: 5vw; 
	font-size: clamp(15px,2vw,20px);
	line-height: 2;
}

.about_content_box2 {
	display: flex;
	width: 100%;
	align-items: center;
}

.about_content_box2 img {
	width: 40%;
	max-width: 600px;

}

.about_content_box2 p{
	width: 60%;
	margin:0 0 0 auto;
	padding: 5vw; 
	font-size: clamp(15px,2vw,20px);
	line-height: 2;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.about_content_box2 {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		margin-bottom: 10vw;
	}
	.about_content_box2 img {
		width: 50%;
	}
	.about_content_box2 p {
		width: 60%;
		margin: 0 auto;
		font-size: clamp(10px,2vw,15px);
		line-height: 2;
		padding: 0;
	}
}


/*---------- 磯部プロフィール設定 ----------*/

.profile_box {
	border: 2px solid #FFF;
	width: 70%;
	margin: 10vw auto;
	background-image: url(images/about-isobe.png);
	background-position: right top;
	background-repeat: no-repeat;
	background-size: contain;
}
		
.profile_box p{
	width: 80%;
	padding-top: 1.2em;
	padding-left: 3em;
	padding-bottom: 1.2em;
	font-size: clamp(10px,2vw,15px);
}
/*
.profile_inner img {
	position:absolute;
	height: 100%;
	right: 0px;
}*/


/*
画面幅が1000oxまでの場合に適用
@media screen and (max-width: 1000px){
	.profile_box {
		border: 2px solid #FFF;
		position: relative;
		width:90%;
		height: 810px;
		margin-top: 5em;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 5em;
	}
	
	.profile_inner p{
		position: absolute;
		width: 90%;
		padding-top: 1.2em;
		padding-left: 2em;
		padding-bottom: 1.2em;
		font-size: clamp(12px,2vw,15px);/*最小11px、最大15px*//*
	}
	
	.profile_inner img {
		position: absolute;
		width: 100%;
		height: auto;
		right: 0;
		top: 0;
	}
}
*/
	
/*=================================================================================
      career   
=================================================================================== */
.career_title {
	width: 80%;
	margin: 0 auto;
}

.career_title p {
	font-size: 30px;
	margin-bottom: 10px;
}

.career_contents {
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	font-size: 20px;
	line-height: 20px;
}

.career_contents li {
	list-style: none;
	padding-bottom: 13px;
	padding-left: 23px;
	background: left top no-repeat;
	background-size: 18px auto;
}

.career_contents a {
	text-decoration: none;
	outline: none;
	color: #fff;
}

a:hover,a:visited {
	color: #a0a0a0;
}

/* 2024 国旗 */
.career_2024 li:nth-child(1) {
	background-image: url(images/career/france-flag.png);
}

.career_2024 li:nth-child(2) {
	background-image: url(images/career/japan-flag.png);
}

.career_2024 li:nth-child(3) {
	background-image: url(images/career/france-flag.png);
}

/* 2023 国旗 */
.career_2023 li:nth-child(1) {
	background-image: url(images/career/france-flag.png);
}

.career_2023 li:nth-child(2) {
	background-image: url(images/career/usa-flag.png);
}

.career_2023 li:nth-child(3) {
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(4) {
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(5) { /* CANAILL */
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(6) { /* ilsogno */
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(7) { /* LNFW */
	background-image: url(images/career/uk-flag.png);
}

.career_2023 li:nth-child(8) { /* 姫コレ */
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(9) { /* PNFW */
	background-image: url(images/career/france-flag.png);
}

.career_2023 li:nth-child(10) { /* JNFW */
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(11) { /* NOBUコレ */
	background-image: url(images/career/japan-flag.png);
}

.career_2023 li:nth-child(12) { /* ローマ */
	background-image: url(images/career/italy-flag.png);
}

.career_2023 li:nth-child(13) { /* ドバイ */
	background-image: url(images/career/arab-flag.png);
}


/* 2022 国旗 */
.career_2022 li:nth-child(1) {
	background-image: url(images/career/japan-flag.png);
}

.career_2022 li:nth-child(2) {
	background-image: url(images/career/usa-flag.png);
}

.career_2022 li:nth-child(3) {
	background-image: url(images/career/italy-flag.png);
}

.career_2022 li:nth-child(4) {
	background-image: url(images/career/italy-flag.png);
}

.career_2022 li:nth-child(5) {
	background-image: url(images/career/japan-flag.png);
}


/* 2021 国旗 */
.career_2021 li {
	background-image: url(images/career/japan-flag.png);
}

/* 2020 国旗 */
.career_2020 li:nth-child(1) {
	background-image: url(images/career/usa-flag.png);
}

.career_2020 li:nth-child(2) {
	background-image: url(images/career/italy-flag.png);
}

/* 2019 国旗 */
.career_2019 li:nth-child(1) {
	background-image: url(images/career/italy-flag.png);
}

.career_2019 li:nth-child(2) {
	background-image: url(images/career/monaco-flag.png);
}

.career_2019 li:nth-child(3) {
	background-image: url(images/career/usa-flag.png);
}

/* 2017 国旗 */
.career_2017 li:nth-child(1) {
	background-image: url(images/career/japan-flag.png);
}

/* 2016 国旗 */
.career_2016 li:nth-child(1) {
	background-image: url(images/career/france-flag.png);
}

.career_2016 li:nth-child(2) {
	background-image: url(images/career/japan-flag.png);
}

/* 2015 国旗 */
.career_2015 li:nth-child(1) {
	background-image: url(images/career/france-flag.png);
}

/*=================================================================================
      Career__2023S/S JNFW
=================================================================================== */
/*-- ネイルデザイナー一覧 --*/
.career-box-parent {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap; /* これを指定する */
	justify-content: center;
}

.career-box-child {
	width: calc(100%/6); /* 横幅を6等分 */
	height: auto;
	display: flex; /* 高さを揃えるための指定 */
	flex-direction: column; /* 高さを揃えるための指定 */
	border: 1px; /* 装飾用 */
	box-sizing: border-box; /* 装飾用 */
	line-height: 0;
}

/* スマホ表示の設定 */
@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.career-box-child  {
		width: calc(100%/ 3); /* 横幅を6等分 */
		height: auto;
		display: flex; /* 高さを揃えるための指定 */
		flex-direction: column; /* 高さを揃えるための指定 */
		border: 1px; /* 装飾用 */
		box-sizing: border-box; /* 装飾用 */
		line-height: 0;
	}
}

.career-box-image {
	width: 100%;
	height: auto;
}

.career-box-image img {
	width: 100%;
	height: auto;
}

/*-- モデル写真 --*/
.career-image-box-parent {
	width: 100%;
	height: auto;
	display: flex;
	flex-wrap: wrap; /* 折り返し */
	justify-content: center;
	margin-top: 10vw;
	margin-bottom: 5vw;
}

.career-image-box-child {
	width: calc(100%/3); /* 横幅を3等分 */
	height: auto;
	display: flex; /* 高さを揃えるための指定 */
	flex-direction: column; /* 高さを揃えるための指定 */
	border: 1px; /* 装飾用 */
	box-sizing: border-box; /* 装飾用 */
}

/* スマホ表示の設定 */
@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.career-image-box-child {
		width:  100%;
		display: flex; /* 高さを揃えるための指定 */
		flex-direction: column; /* 高さを揃えるための指定 */
		border: 1px; /* 装飾用 */
		box-sizing: border-box; /* 装飾用 */
		line-height: 0;
	}
}

.career-image-box-image {
	width: 100%;
	height: auto;
}

.career-image-box-image img {
	width: 100%;
	height: auto;
}

/*-- naildesigner 個人の紹介 ----------*/
.naildesigner-wrap {
	display: flex;
	width: 85%;
	height: auto;
	justify-content: space-around;
	text-align: center;
	margin: 0 auto;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	/* 要素を縦並びに */
	.naildesigner-wrap {
		width: 90%;
		display: flex;
		flex-direction: column;
		height: auto;
		text-align: center;
	}
}

.naildesigner-content {
	padding: 0;
	margin: 1em;
}

.naildesigner-content-wrap {
	width: 100%;
	display: flex;
	flex-flow: column;
	margin: 0 0 1em;
}

.naildesigner-profile-content {
	padding-top: 0.5em;
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0;
	margin: 0 auto;
	width: 90%;
}

.naildesigner-profile-content img {
	width: 100%;
	margin: 0;
}

.naildesigner-profile-content p {
	font-size: clamp(9px, 2vw, 15px);
	text-align: left;
}

.naildesigner-profile-btn-wrap {
	width: 70%;
	display: flex;
	margin: 0 0 1em;
	justify-content: space-around;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.naildesigner-profile-btn-wrap {
		width: 70%;
		display: flex;
		margin: 0 0 1em;
		text-align: center;
	}
}

.naildesigner-profile-btn-content {
	padding-top: 0.5em;
	padding-left: 1em;
	padding-right: 0;
	padding-bottom: 0;
}

.naildesigner-profile-btn-content img {
	width: 100%;
	margin: 0 auto;
}

.naildesigner-content-item1 {
	padding: 0;
	margin-top: 1em;
	margin-right: 1em;
	margin-left: 1em;
	margin-bottom: 0;
	width: 40%;
}

.naildesigner-content-item2 {
	padding: 0;
	margin-top: 1em;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 0;
	width: 60%;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.naildesigner-content-item1 {
		padding: 0;
		margin-top: 1em;
		margin-right: 1em;
		margin-left: 1em;
		margin-bottom: 0;
		width: 90%;
	}
	.naildesigner-content-item2 {
		padding: 0;
		margin-top: 1em;
		margin-right: auto;
		margin-left: auto;
		margin-bottom: 0;
		width: 70%;
	}
}

/*===== スライダーのためのcss ===================================*/

/*画像の横幅を100%にしてレスポンシブ化*/
img{
  width: 100%;
  height: auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*メイン画像下に余白をつける*/
.gallery{
  margin:0 0 5px 0;
}

/*矢印の設定*/

/*戻る、次へ矢印の位置*/
.slick-prev, 
.slick-next {
    position: absolute;/*絶対配置にする*/
  z-index: 3;
    top: 42%;
    cursor: pointer;/*マウスカーソルを指マークに*/
    outline: none;/*クリックをしたら出てくる枠線を消す*/
    border-top: 2px solid #ccc;/*矢印の色*/
    border-right: 2px solid #ccc;/*矢印の色*/
    height: 25px;
    width: 25px;
}

.slick-prev {/*戻る矢印の位置と形状*/
    left:2.5%;
    transform: rotate(-135deg);
}

.slick-next {/*次へ矢印の位置と形状*/
    right:2.5%;
    transform: rotate(45deg);
}

/*選択するサムネイル画像の設定*/

.choice-btn li{
  cursor: pointer;
  outline: none;
  background:#333;
}

.choice-btn li img{
  opacity: 0.4;/*選択されていないものは透過40%*/
}

.choice-btn li.slick-current img{
  opacity: 1;/*選択されているものは透過しない*/
}

/*========= レイアウトのためのCSS ===============*/
/*エリア全体を中央寄せ*/
.wrapper{
	width: 80%;
	max-width: 700px;
	margin-right: auto;
	margin-left: auto;
	margin-top: 8vw;
	margin-bottom: auto;
}

@media screen and (max-width:599px) {/*599px以下で表示される時*/
	.wrapper{
		width: 80%;
		margin-right: auto;
		margin-left: auto;
		margin-top: 0;
		margin:bottom: 8vw;
	}
}

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}



/* ============================ ここまで ============================*/

/*-- アーティスト一覧へもどるボタン --*/
.top-back {
	width: 5%;
	margin-top: 0;
	margin-left: auto;
	margin-right: 2em;
	margin-bottom: 1em;
}

.top-back img {
	width: 100%;
}

/*=================================================================================
      Sponcer
=================================================================================== */
.sponcer-text {
	width: 70%;
	margin-top: 0;
	margin-bottom: 3vw;
	margin-left: auto;
	margin-right: auto;	
}

.sponcer-text p {
	width: 100%;
	text-align: left;
}

.sponcer-table {
	width: 50%;
	margin-top: 0;
	margin-bottom: 3vw;
	margin-left: auto;
	margin-right: auto;	
}

.sponcer-table img {
	width: 100%;
}

@media screen and (max-width: 599px) {/*599px以下で適用される*/
	.sponcer-table {
		width: 80%;
		margin-top: 0;
		margin-bottom: 3vw;
		margin-left: auto;
		margin-right: auto;
	}
	.sponcer-table img {
		width: 100%;
	}
}

.sponcer-btn {
	width: 30%;
	margin-top: 0;
	margin-bottom: 3vw;
	margin-left: auto;
	margin-right: auto;	
}

.sponcer-btn img {
	width: 100%;
}

/* 協賛お申込みはこちら ボタン */
.sponcer-btn-2 a {
	display: flex;
	justify-content: space-around;
	align-items: center;
	text-align: center;
	margin: 0 auto;
	padding: 1em 2em;
	width: 20%;
	min-width: 100px;
	color: #fff;
	font-size: clamp(12px, 1.5vw, 25px);
	font-weight: 700;
	background-image: linear-gradient(170deg, #16222A, #3A6073);
	border-radius: 50vh;
	transition: 0.3s;
}
@media screen and (max-width: 599px) {/*599px以下で適用される*/
	.sponcer-btn-2 a {
		width: 40%;
	}
}

/* なしで良いかな
.sponcer-btn-2 a::after {
	content: '';
	width: 5px;
	height: 5px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform: rotate(45deg);
}
*/

.sponcer-btn-2 a:hover {
	text-decoration: none;
	background-image: linear-gradient(-170deg, #16222A, #3A6073);
}

/*=================================================================================
      magazine
=================================================================================== */
.magazine-list {
	width: 90%;
	display: flex;
	flex-wrap: wrap;
	margin-top: 3vw;
	margin-bottom: 5vw;
	margin-left: auto;
	margin-right: auto;
	justify-content: center;
}

.magazine-list img {
	width: 25%;
	padding: 4vw;
}

@media screen and (max-width: 599px) {/*599px以下で適用される*/
	.magazine-list img {
		width: 70%;
	}
}


/*=================================================================================
      job offer
=================================================================================== */
.job-offer-comingsoon {
	width: 80%;
	text-align: center;
	font-size: clamp(15px, 5vw, 40px);
	margin-top: 0;
	margin-bottom: 5vw;
	margin-left: auto;
	margin-right: auto;
}

/*=================================================================================
      Recruitment
=================================================================================== */
.recruitment-text1 {
	width: 60%;
	margin: 0 auto;
}

.recruitment-wrap {
	width: 60%;
	height: auto;
	display:flex;
	flex-wrap:wrap;
	border: 2px #ccc solid;
	box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
	margin-top: 5vw;
	margin-bottom: 3vw;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
	background-image: url(images/recruitment/recruitment-image3.png);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 60%;
}

.recruitment-content-title {
	margin-left: auto;
	margin-right: auto;
	margin-top: 2vw;
	width: 100%;
	font-size: clamp(20px, 5vw, 40px);
	text-shadow: 1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black;
}

.recruitment-content-wrap {
	display: flex;
	width: 80%;
	margin: 0 auto;
}

.recruitment-content1 {
	width: 90%;
	margin-top: 0;
	margin-bottom: 3vw;
	margin-left: auto;
	margin-right: auto;
}

.recruitment-content1-headline {
	padding-top: 3vw;
	margin-top: 0;
	margin-bottom: 0.5vw;
	font-size: 170%;
	text-align: left;
	text-shadow: 1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black;
}

.recruitment-content1-setsumei {
	padding: 0;
	margin: 0;
	text-align: left;
	text-shadow: 1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black;
}

.toumei {
	background-color: rgba(55, 51, 50, 0.4);
}

@media screen and (max-width: 599px) {/*599px以下で適用される*/
	.recruitment-wrap {
		width: 80%;
		height: auto;
		display:flex;
		flex-wrap:wrap;
		border: 2px #ccc solid;
		box-shadow: 0 10px 25px 0 rgba(0, 0, 0, .5);
		margin-top: 10vw;
		margin-bottom: 3vw;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
		background-image: url(images/recruitment/recruitment-image3.png);
		background-repeat: no-repeat;
		background-position: right bottom;
		background-size: 70%;
	}
	.recruitment-content-title {
		margin-left: auto;
		margin-right: auto;
		margin-top: 5vw;
		width: 100%;
		font-size: clamp(15px, 5vw, 21px);
	}
	.recruitment-content-wrap {
		display: flex;
		flex-direction: column;
		width: 80%;
		margin: 0 auto;
	}
	.recruitment-content1 {
		width: 100%;
		margin-top: 0;
		margin-bottom: 5vw;
		margin-left: auto;
		margin-right: auto;
	}
	.recruitment-content1-headline {
		padding-top: 3vw;
		margin-top: 0;
		margin-bottom: 0.5vw;
		font-size: clamp(15px, 4vw, 19px);
		text-align: left;
		text-shadow: 1px 1px 2px black,-1px 1px 2px black,1px -1px 2px black,-1px -1px 2px black;
	}
}

/*-- よくある質問 --*/
.faq-title {
	margin-top: 10vw;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1vw;
	width: 60%;
	font-size: clamp(20px, 5vw, 40px);
}

.faq-accordion {
	width: 60%;
	margin: 0 auto;
}

@media screen and (max-width: 1014px) {/*599px以下で適用される*/
	.faq-title {
		margin-top: 10vw;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 1vw;
		width: 90%;
		font-size: clamp(20px, 5vw, 40px);
	}
	.faq-accordion {
		width: 90%;
		margin: 0 auto;
	}
}

/* ベース */
.toggle {
	display: none;
}

.Label {  /* タイトル */
	padding-top: 1em;
	padding-bottom: 1em;
	padding-left: 3em;
	padding-right: 2em;
	display: block;
	color: #fff;
	background: #000;
}

.Label::before {  /* タイトル横の矢印 */
	content: "";
	width: 6px;
	height: 6px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	position: absolute;
	top: calc( 50% - 3px );
	right: 20px;
	transform: rotate(135deg);
}

.Label,
.faq-content {
	backface-visibility: hidden;
	transform: translateZ(0);
	transition: all 0.3s;
}

.faq-content {  /* 本文 */
	height: 0;
	margin-bottom: 0.5em;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	overflow: hidden;
}

.faq-content p {
	margin-top: 0.5em;
	margin-bottom: 1.5em;
	margin-right: 0;
	margin-left: 4em;
}

.toggle:checked + .Label + .faq-content {  /* 開閉時 */
	height: auto;
	padding; 20px;
	transition: all .3s;
}

.toggle:checked + .Label::before {
	transform: rotate(-45deg) !important;
}

/* 報酬について */
.recruitment-content-wrap2 {
	width: 100%;
	height: auto;
	display:flex;
	flex-wrap:wrap;
	background: linear-gradient(to right, #141E30, #243B55);
	margin-top: 5vw;
	margin-bottom: 5vw;
	margin-right: auto;
	margin-left: auto;
	text-align: center;
}

.recruitment-content2 {
	margin-top: 3vw;
	margin-left: auto;
	margin-right: auto;
	width:  60%;
}

.recruitment-content2 p {
	text-align: left;
}

.recruitment-content2 img {
	width: 60%;
	padding-bottom: 5vw;
}

@media screen and (max-width: 599px) {/*599px以下で適用される*/
	.recruitment-content-wrap2 {
		width: 100%;
		height: auto;
		display:flex;
		flex-wrap:wrap;
		background: linear-gradient(to right, #141E30, #243B55);
		margin-top: 5vw;
		margin-bottom: 5vw;
		margin-right: auto;
		margin-left: auto;
		text-align: center;
	}
	.recruitment-content2 {
		margin-top: 3vw;
		margin-left: auto;
		margin-right: auto;
		width: 75%;
	}
	.recruitment-content2 p {
		text-align: left;
	}
	.recruitment-content2 img {
		width: 90%;
		padding-bottom: 5vw;
	}
}

/*=================================================================================
      Company
=================================================================================== */
/*table {
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	margin-bottom: 3vw;
}

th,td {
	padding:1em;
}
*/

/*
.company-table {
	width: 80%;
	margin-top: 0;
	margin-right: auto;
	margin-bottom: 5vw;
	margin-left: auto;
}

.company-table th, .company-table td {
	border: 1px solid #ccc;
	padding: 2vw;
}

.company-table th {
	font-weight: bold;
	color: #000;
	background-color: #dedede; 
}

@media screen and (max-width: 599px) {/*599px以下で適用される*//*
.company-table,
.company-table tr,
.company-table td,
.company-table th {display:block;}
.company-table th {width:auto;}
}
*/

.company-table {
    border-collapse: collapse;
    border-spacing: 0;
	width: 70%;
	margin-top: 0;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5vw;
}
.company-table tr {
    border-top: 1px solid #565656;
    border-bottom: 1px solid #565656;
}
.company-table tr th,
.company-table tr td {
    padding: 20px 20px;
    text-align: left;
    vertical-align: top;
}
.company-table tr th {
    width: 20%;
    font-weight: bold;
    background: #4C4C4C;
}
.company-table tr td {
    width: 80%;
}

@media screen and (max-width: 599px){
.company-table tr th,
.company-table tr td {
    display: block;
    width: 100%;
}
}

/* 企業名 */
.company-name {
	width: 80%;
	margin: 0 auto;
	font-size: 25px;
}
	

/*=================================================================================
      プライバシーポリシー
=================================================================================== */
.privacy-wrap {
	width: 80%;
	margin-top: 0;
	margin-bottom: 5vw;
	margin-left: auto;
	margin-right: auto;
}

.privacy-title {
	margin-top: 1em;
	font-size: clamp(15px, 2vw, 30px);
}