@charset "UTF-8";

/* ===============================
	style
=============================== */

/* - - - - - キャディ / 研修生 共通 - - - - - */

/* ------ サイトbase style ------ */

article {
    margin-bottom: 0;
}

section {
	width: 100%;
	padding: 10rem 0 15rem;
}
.innerbox {
	width: 1020px;
	margin-left: auto;
	margin-right: auto;
}

#container img{
	width:100%;
	/* object-fit: cover; */
}

/* ------ トップエリア ------ */

#main-visual,
#main-visual img {
	width:100%;
	height:500px;
}
#main-visual img {
	object-fit: cover;
}

#main-visual {
	outline: 2px solid #A7746C;
	outline-offset: -20px;
}

#toperea h2 {
	width: 940px;
	margin: 5rem auto;
}

#toperea #introtext {
	text-align: center;
	margin-bottom: 4rem;
}
#toperea #introtext p:nth-child(1) {
	text-align: center;
	font-size: 2.6rem;
	font-weight: bold;
	margin-bottom: 2rem;
}
#toperea #introtext p:nth-child(2) {
	font-size: 1.8rem;
}

h3 {
	width: 540px;
	margin: 0 auto 9rem;
}

#schedule,
#voice,
#practice {
	border-top: 3px solid #fff;
}

/* ------ 魅力 ------ */

#attraction h3 {
	margin-bottom: 15rem;
}

#attraction .detail {
	background-color: #FDFDFC;
	position: relative;
	padding: 200px 0 100px;
}
#attraction .detail:not(:first-of-type) {
	margin-top: 12rem;
}

/* タイトル */
#attraction .titlearea {
	display: block;
	width: 100%;
	height: 180px;
	position: absolute;
	top: -40px;
	left: 0;
}
#attraction .title {
	height: 180px;
	position: relative;
	display: flex;
	align-items: center;
}
#attraction .title::before {
	content: "";
	display: inline-block;
	width: 46vw;
	height: 100%;
	background-color: #A7746C;
	position: absolute;
}
#attraction .title .innerbox {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

#attraction .num {
	width: 60px;
	margin-right: 2rem;
}
#attraction h4 {
	font-size: 2.3rem;
	line-height: 2;
	color: #fff;
}
#attraction h4 span {
	border-bottom: 1px solid #fff;
	padding-bottom: 1rem;
}


/* テキスト・写真 */
#attraction .textarea {
	position: relative;
}

#attraction .textarea p {
	width: 440px;
	font-size: 1.8rem;
	line-height: 2.2;
}

#attraction .photo {
	width: 490px;
	height: 400px;
	box-shadow: 20px 20px 0px 0px #A7746C;	
	position: absolute;
}
#attraction .photo img {
	height: 400px;
	object-fit: cover;
}

/* ------ よくあるご質問 ------ */

#faq ul li.answer:not(:last-of-type) {
	margin-bottom: 4rem;
}

#faq ul li.ttl {
	font-size: 1.8rem;
	font-weight: bold;
	padding:1rem 0 1rem 6rem;
	background-color: #F4F1EF;
	position: relative;
	display: flex;
	align-items: center;
	margin-bottom: 1.5rem;
}
#faq ul li.ttl::before {
	content: "Q";
	display: inline-block;
	font-size: 3rem;
	color: #A7746C;
	position: absolute;
	left: 2rem;
}

/* ------ 募集要項 ------ */

#description h4 {
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 2;
	color: #fff;
	text-align: center;
	background-color: #A7746C;
	margin-bottom: 3rem;
}

#description table {
	width: 100%;
	margin-bottom: 8rem;
}

#description table tr:not(:last-of-type) {
	border-bottom: 2px solid #F4F1EF;
}

#description table td {
	padding: 2rem 0;
}
#description table td:nth-child(1) {
	width: 20%;
	text-align: center;
	background-color: #E2DBDA;
}
#description table td:nth-child(2) {
	width: 80%;
	padding-left: 4rem;
	background-color: #FDFDFC;
}

#description table td .cap {
	color: #A7746C;
}

/* 採用までの流れ */
#description ul#step {
	margin-bottom: 8rem;
}

#description ul#step li {
	text-align: center;
	background-color: #fff;
	position: relative;
}

#description ul#step li p.title {
	font-size: 2rem;
	font-weight: bold;
	background-color:#E2DBDA;
}

/* エントリーボタン */
#description .formbtn a {
	display: block;
	width: 820px;
	font-size: 2.8rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	padding: 4rem 0;
	background-color: #A7746C;
	box-shadow: 0px  2px 6px 1px rgba(0,0,0,0.3);
	margin: 0 auto 5rem;
	transition: all .3s;
	position: relative;
}
#description .formbtn a::before {
	content: '';
	height: 0;
	width: 0;
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #fff;
	position: absolute;
	top: 50%;
	left: 30px;
	transform: translateY(-50%);
}
#description .formbtn a:hover {
	background-color: #CCADA8;
}

/* 電話 */
#description ul.call {
	width: 820px;
	background-color: #fff;
	border: 2px solid #A7746C;
	text-align: center;
	margin: 0 auto;
}

#description ul.call li.ttl {
	background-color: #A7746C;
	font-size: 2.2rem;
	color: #fff;
}

#description ul.call li.number {
	font-size: 1.4rem;
	padding: 2rem 0;
}
#description ul.call li.number p.tel {
	font-size: 3.6rem;
	font-weight: bold;
	line-height: 1.6;
}
#description ul.call li.number p.tel span {
	font-size: 2.6rem;
	padding-left: 0.5rem;
}
#description ul.call li.number p.tel a:hover {
	color: #A7746C;
}

/* - - - - - エントリーフォーム - - - - - */

h1#top-title {
    text-align: center;
    padding-left: 0;
}

#entry .linebtn a {
	display: block;
	width: 500px;
	font-size: 2rem;
	font-weight: bold;
	text-align: center;
	color: #fff;
	background-color: #1DA053;
	border-radius: 7px;
	box-shadow: 0px  2px 6px 1px rgba(0,0,0,0.3);
	padding: 2rem 0;
	margin: 6rem auto 8rem;
	transition: all .3s;
	position: relative;
}
#entry .linebtn a::before {
	content: "";
	display:block;
	width:50px;
	height:50px;
	background: url(/images/common/icon-line.svg) no-repeat;
	background-size: 100%;
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 10px;
}
#entry .linebtn a:hover {
	opacity: 0.8;
}

form select {
    background-color: #fff;
    border: none;
    padding: 0.5em;
	border-radius: 5px;
}

/* ===============================
	PC / Tab Style
=============================== */
@media print , screen and (min-width: 481px) {	
	
	/* - - - - - キャディ / 研修生 共通 - - - - - */

	/* ------ ページ内リンク ------ */

	#pnavi {
		width: 100%;
		border-top: 2px solid #A7746C;
		border-bottom: 2px solid #A7746C;
	}
	#pnavi ul {
		justify-content: space-around;
		padding: 2rem 0;
	}
	#pnavi ul a {
		font-weight: bold;
		color: #A7746C;
		transition: all .3s;
	}
	#pnavi ul a:hover{
		opacity: .4;
	}
	
	/* ------ 魅力 ------ */

	/* テキスト・写真 */
	#attraction .photo {
		top:-240px;
		right: 0;
	}
	#attraction .photo img {
		object-fit: cover;
	}

	/* ------ 募集要項 ------ */

	/* 採用までの流れ */
	#description ul#step {
		justify-content: space-between;
	}

	#description ul#step li {
		width: 300px;
		height:155px;
	}	
	#description ul#step li:not(:last-of-type)::after {
		content: '';
		height: 0;
		width: 0;
		border-top: 20px solid transparent;
		border-bottom: 20px solid transparent;
		border-left: 20px solid #A7746C;
		position: absolute;
		top: 50%;
		right: -42px;
		transform: translateY(-50%);
	}

	#description ul#step li p.title {
		height:40px;
		line-height: 40px;
	}	
	#description ul#step li p.text {
		height:115px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* - - - - - エントリーフォーム - - - - - */

	h1#top-title {
		font-size: 4rem;
	}
	
}

/* ===============================
	Mobile Style
=============================== */
@media screen and (max-width: 480px) {

	/* - - - - - キャディ / 研修生 共通 - - - - - */

	/* ------ サイトbase style ------ */

	.innerbox {
		width: 90%;
	}

	section {
		padding: 15vw 0;
	}

	footer {
		padding-bottom:20vw;
	}

	/* ------ トップエリア ------ */

	#main-visual,
	#main-visual img {
		height:80vw;
	}

	#main-visual {
		outline-offset: -3vw;
	}

	#toperea h2 {
		width: 100%;
		margin: 6vw auto 4vw;
	}

	#toperea #introtext {
		margin-bottom: 8vw;
	}
	#toperea #introtext p:nth-child(1) {
		font-size: 1.4rem;
		margin-bottom: 5vw;
	}
	#toperea #introtext p:nth-child(2) {
		font-size: 1.1rem;
		text-align: left;
	}
	
	h3 {
		width: 100%;
		margin: 0 auto 10vw;
	}
	
	#schedule,
	#voice,
	#practice {
		border-top: 2px solid #fff;
	}
	
	/* ------ 魅力 ------ */
	
	section#attraction {
		padding-bottom: 55vw;
	}

	#attraction h3 {
		width: 90%;
		margin-bottom: 22vw;
	}
	
	#attraction .detail {
		padding: 26vw 0;
	}
	#attraction .detail:not(:first-of-type) {
		margin-top: 61vw;
	}
	
	/* タイトル */
	#attraction .titlearea {
		height: 30vw;
		top: -10vw;
		left: 0;
	}
	#attraction .title {
		height: 30vw;
	}
	#attraction .title::before {
		width: 90vw;
		height: 100%;
	}
	
	#attraction .num {
		width: 9vw;
		margin-right: 4vw;
	}
	#attraction h4 {
		font-size: 1.2rem;
	}
	#attraction h4 span {
		padding-bottom: 0.6rem;
	}
	
	
	/* テキスト・写真 */
	#attraction .textarea p {
		width: 95%;
		font-size: 1rem;
		line-height: 1.8;
		margin: 0 auto;
	}
	
	#attraction .photo {
		width: 98%;
		height: 54vw;
		box-shadow: 3vw 3vw 0px 0px #A7746C;
		bottom:-60vw;
		left: 50%;
		transform: translateX(-50%);
	}
	#attraction .photo img {
		height: 54vw;
	}
	
	/* ------ よくあるご質問 ------ */

	#faq ul li.answer:not(:last-of-type) {
		margin-bottom: 2.5rem;
	}

	#faq ul li.ttl {
		font-size: 1.05rem;
		padding:1rem 2rem 1rem 12vw;
		margin-bottom: 1rem;
	}
	#faq ul li.ttl::before {
		font-size: 1.8rem;
		left: 4vw;
	}

	/* ------ 募集要項 ------ */

	#description h4 {
		font-size: 1.2rem;
		line-height: 2;
		margin-bottom: 2rem;
	}

	#description table {
		margin-bottom: 4rem;
	}

	#description table td {
		padding: 1rem 0;
	}
	#description table td:nth-child(1) {
		width: 25%;
	}
	#description table td:nth-child(2) {
		width: 75%;
		padding: 1rem;
	}

	/* 採用までの流れ */
	#description ul#step {
		margin-bottom: 4rem;
	}

	#description ul#step li {
		width: 100%;
	}
	#description ul#step li:not(:last-of-type) {
		margin-bottom: 11vw;
	}
	#description ul#step li:not(:last-of-type)::after {
		content: '';
		height: 0;
		width: 0;
		border-top: 5vw solid #A7746C;
		border-right: 5vw solid transparent;
		border-left: 5vw solid transparent;
		position: absolute;
		bottom: -8vw;
		left: 50%;
		transform: translateX(-50%);
	}

	#description ul#step li p.title {
		font-size: 1.1rem;
		line-height: 2;
	}

	#description ul#step li p.text {
		height:20vw;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/* エントリーボタン */
	#description .formbtn a {
		width: 100%;
		font-size: 1.3rem;
		padding: 2rem 0;
		margin: 0 auto 2rem;
	}
	#description .formbtn a::before {
		border-top: 10px solid transparent;
		border-bottom: 10px solid transparent;
		border-left: 10px solid #fff;
		left: 4vw;
	}

	/* 電話 */
	#description ul.call {
		width: 100%;
	}

	#description ul.call li.ttl {
		font-size: 1.1rem;
		line-height: 2;
	}

	#description ul.call li.number {
		font-size: 1rem;
		padding: 1rem 0 1.5rem;
	}
	#description ul.call li.number p.tel {
		font-size: 1.8rem;
		line-height: 2;
	}
	#description ul.call li.number p.tel span {
		font-size: 1.1rem;
	}

	/* - - - - - エントリーフォーム - - - - - */

	#entry .linebtn a {
		width: 100%;
		font-size: 1.2rem;
		padding: 1rem 0;
		margin: 3rem auto 4rem;
	}
	#entry .linebtn a::before {
		width:10vw;
		height:10vw;
		left: 4vw;
	}
	
}