@charset "UTF-8";
body {
	color: #493c3c;
	background-color:#fff;
	font-family: "Zen Maru Gothic", "Rera", "Noto Sans", "Osaka", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

/* PCでは非表示 */
.entry-btn {
	display: none;
}



/* SPのみ */
@media screen and (max-width: 768px) {
	.entry-btn {
    display: flex;
    align-items: center;
    justify-content: center;

    position: fixed;
    right: 0;
    top: 25%;
    transform: translateY(-50%);
    z-index: 1000;

    width: 48px;
    height: 100px;

    background-color: #ea9982;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;

    writing-mode: vertical-rl;
    border-radius: 12px 0 0 12px;
	}

	.entry-btn:hover{
		background-color: #e57555;
	}


}



/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.section-inner {
    padding: 0 24px;
    max-width: 550px;
	margin-top: 30px;
	}
.pc-only {
    display: none;
	}
.sp-only {
    display: block;
	}

	.wrapper{
		max-width: 550px;
		margin: 0 auto;
	}

	.wrapper-market{
		max-width: 155px;
		margin: 0 auto;
		margin-top: -10px;
	}
}
/** -----------------------------------
    レイアウト
-------------------------------------**/
a {
	text-decoration: none;
}

#about{
	margin-top: -10px;
}

#mainvisual{
	padding-bottom: 1px;
}

#works, #environment, #member, #jobtype, #faq{
	padding: 40px 0 56px 0;
}

#cta{
	padding: 0 0 0 0;
	padding-bottom: 1px;
}

#footer{
	margin-top: -40px;
}

img{
	max-width: 100%;
}

#about,.works{
	padding: 0 0 0 0;
}

.section-inner{
	width: 100%;
	max-width: 1000px;
	margin: 0 auto;
}

.section-inner2{
	width: 100%;
	max-width: 650px;
	margin: 0 auto;
}

.section-inner3{
	width: 100%;
	max-width: 912px;
	margin: 0 auto;
}

.section-inner4{
	width: 100%;
	max-width: 912px;
	margin: 0 auto;
	margin-top: 10%;
}

.title{
	text-align: center;
	margin-bottom: 16px;
}

.icon{
	width: 180px;
	text-align: center;
}

.about-logo{
	text-align: center;
	margin-top: 10px;
}

.a-logo{
	width: 180px;
}

.wrapper{
	display: flex;
	justify-content: center;
}

.col-2{
	display: flex;
	justify-content: space-between;
	margin-top: 37px;
	width: 912px;
}

.col-2 .item-img{
	width: calc((100% - 20px)/2);
}

.col-2 .item-text{
	width: calc((100% - 40px)/2);
	margin-top: 70px;
}

.col-4{
	display: flex;
	justify-content: space-between;
	margin-top: 37px;
}

.col-4 .item{
	width: calc((100% - 70px)/4);
	text-align: center;
}

.col-4 .item-img{
	width: 100%;
	text-align: center;
}

.col-4 .item-text{
	width: 100%;
	margin-top: 10px;
}

.col-2.item{
	width: calc((100% - 40px)/2);
}

.col-3{
	display: flex;
	justify-content: center;
	margin-top: 37px;
	flex-wrap: wrap;
	gap: 30px;
	
}

.col-22{
	display: flex;
	justify-content: space-between;
	margin-top: 20px;
	width: 640px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#about{
	padding-top: 40px;
}
#works, #environment, #member, #jobtype, #faq {
	padding: 40px 0 30px 0;
	}

.icon{
	width: 120px;
	text-align: center;
}

.col-2 {
    display: block;
	width: 100%;
	margin-top: 25px;
	}
.col-2 .item {
    width: 100%;
	}

.col-2 .item-text{
	width: 100%;
	margin-top: 0px;
}

.col-2 .item-img{
	width: 100%;
	margin-top: 10px;
}

.col-2 .item-img2{
	width: 100%;
	margin-top: -10px;
}
.col-3{
	display: flex;
	justify-content: center;
	margin-top: 37px;
	flex-wrap: wrap;
	
}
.col-3 .item {
	width: calc((100% - 1px) /3);
	}
.col-22{
	display: block;
}
.col-22.item{
	width: 100%;
}
.col-4 .item{
	width: calc((100% - 20px)/4);
	text-align: center;
}
.col-2sp{
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}
.col-2sp-market{
	display: flex;
	justify-content: space-between;
	margin-top: -10px;
}


.col-2sp .item{
	width: calc((100% - 24px)/2);
	
}

.col-2sp .item-img{
	text-align: center;
}

.col-2sp .item-text{
	width: 100%;
	margin-top: 10px;
}

.col-2sp-market .item{
	width: 155px;
}

#footer{
	margin-top: 0px;
}
.section-inner{
	width: 100%;
	padding-bottom: 25px;
}
.section-inner3{
	width: 100%;
	padding: 0 24px;
	margin: 0 auto;
}
}
/** -------- スマホ -------- **/
@media screen and (max-width: 500px) {
	.col-3 .item {
	width: 145px
	}

}
/** -----------------------------------
    テキスト
-------------------------------------**/

h2.large{
	font-size: 32px;
	line-height: 1.6;
	color: #493c3c;
	letter-spacing: 0.03em;
	font-weight: bold;
}

h3.small{
	font-size: 20px;
	line-height: 1.6;
	color: #493c3c;
	letter-spacing: 0.03em;
	font-weight: bold;
}


p.large{
	font-size: 17px;
	line-height: 2;
	color: #493c3c;
	letter-spacing: 0.06em;
	font-weight: bold;
}

p.medium{
	font-size: 15px;
	color: #493c3c;
	line-height: 2;
	letter-spacing: 0.06em;
}

p.small{
	font-size: 13px;
	color: #493c3c;
	line-height: 1.75;
	letter-spacing: 0.06em;
}

p.letter{
	font-size: 13px;
	color: #493c3c;
	line-height: 1.75;
	letter-spacing: 0.06em;
	text-align: left;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
  h2.large {
    font-weight: bold;
    font-size: 22px;
	color: #493c3c;
    line-height: 1.6;
    letter-spacing: 0.03em;
    margin-bottom: 0px;
  }

  h3.small {
    font-weight: bold;
	color: #493c3c;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: 0.03em;
	text-align: center;
	margin-top: 5px;
	margin-bottom: 10px;
  }

  p.large {
    font-size: 15px;
	color: #493c3c;
    line-height: 1.75;
    letter-spacing: 0.06em;
    font-weight: bold;
  }

  p.medium {
    font-size: 14px;
	color: #493c3c;
    line-height: 1.75;
    letter-spacing: 0.06em;
  }

  p.small {
    font-size: 13px;
	color: #493c3c;
    line-height: 1.75;
    letter-spacing: 0.03em;
	margin-top: 5px;
  }
}

/** -----------------------------------
    ボタン
-------------------------------------**/

.button-large{
	display: block;
	width: 230px;
	height: 70px;
	background-color: #ea9982;
	color: #fff;
	font-size: 17px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 70px;
	text-align: center;
	border-radius: 35px;
}

.button-large2{
	display: block;
	width: 387px;
	height: 81px;
	background-color: #ea9982;
	color: #fff;
	font-size: 32px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 80px;
	text-align: center;
	border-radius: 40px;
}

.button-border{
	display: block;
	width: 302px;
	height: 55px;
	border: 3px solid #493c3c;
	color: #493c3c;
	font-size: 19px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 50px;
	text-align: center;
	border-radius: 28px;
	margin-top: 40px;

}

.button-work a:hover{
	opacity: 0.7;
}
.button-env a:hover{
	opacity: 0.7;
}

.button-member a:hover{
	opacity: 0.7;
}

.button-large:hover{
	background-color: #e57555;
}

.button-large2:hover{
	background-color: #e57555;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.button-large2{
	display: block;
	width: 200px;
	height: 45px;
	background-color: #ea9982;
	color: #fff;
	font-size: 18px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 45px;
	text-align: center;
	border-radius: 40px;
}
.button-border{
	display: block;
	width: 200px;
	height: 45px;
	border: 3px solid #493c3c;
	color: #493c3c;
	font-size: 13px;
	letter-spacing: 0.06em;
	font-weight: bold;
	line-height: 40px;
	text-align: center;
	border-radius: 28px;
	margin-top: 20px;

}
}

/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header{
	background-color: #f5ebe1;
	width: 100%;
	height: 118px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 80px;
	position: fixed;
	top: 0;
	z-index: 1;
}
/** -----------------------------------
    折り返さない指示、効かない・・・質問
-------------------------------------**/
	gnav-pc-wrap{
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		flex-shrink: 0; 
	}

.gnav-pc-wrap {
  margin-left: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

ul.gnave-pc li {
	display: inline;
	margin-right: 20px;
	width: 72px;
	text-align: center;
}

ul.gnave-pc li a {
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: bold;
	font-size: 16px;
	letter-spacing: 0.13em;
	color: #6c6161;
}

ul.gnave-pc li a:hover {
	/* メニューをホバーした時、透明度0.7 */
	opacity: 0.7;
}

.button-h{
	display: block;
	width: 240px;
	height: 60px;
	background-color: #ea9982;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	letter-spacing: 0.06em;
	border-radius: 30px;
	text-align: center;
	line-height: 60px;
}
#menu-button {
	display: none;
}
.gnav-sp-wrap {
	display: none;
}
/** -------- スマホ -※メニューが多いため早めにハンバーガー表示------- **/
@media screen and (max-width: 1117px) {
#header {
    height: 60px;
    padding: 0;
	}

#header h1 {
    padding-left: 20px;
	}

#header h1 a {
    display: flex;
	}

.gnav-pc-wrap {
    display: none;
	}

.button-large{
	display: none;
}

#menu-button {
    display: block;
	background-color: #ea9982;
    width: 60px;
    height: 60px;
    padding: 22px 18px;
	}

.menu-button-inner {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
	}

.menu-button-inner span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #f5ebe1;
    position: absolute;
	}

.menu-button-inner span:nth-child(1) {
    top: 0;
	}

	.menu-button-inner span:nth-child(2) {
    top: 0;
    bottom: 0;
    margin: auto;
	}

.menu-button-inner span:nth-child(3) {
    bottom: 0;
}

.header-logo{
	width: 162px;
}
/* スマホ用メニューのスタイル */
.gnav-sp-wrap {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #f5ebe1;
    position: fixed;
    z-index: 100;
    padding-top: 100px;
}

ul.gnav-sp li {
    text-align: center;
    margin-bottom: 30px;
}

ul.gnav-sp li a {
    font-family: "Zen Maru Gothic", sans-serif;
    font-size: 20px;
    letter-spacing: 0.1em;
    color: #493c3c;
    font-weight: bold;
}
ul.gnav-sp li a:hover {
    opacity: 0.7;
}


}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
#mainvisual{
	position: relative;
	width: 100%;
	height: 900px;
	background-image: url(../images/mv.png);
	block-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	font-family: "Zen Maru Gothic", "Noto Sans", sans-serif;
	font-weight: bold;
	font-size: 36px;
	margin-top: 60px;
}

.maincopy {
	color: #493c3c;
	font-size: 45px;
	line-height: 1.5;
	letter-spacing: 0.1em;
	position: absolute;
	top: 20%;
	left: 8%;
}

.sp-br {
	display: none;
}

.mv-copy{
	display: none;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#mainvisual {
    width: 100vw;
    height: 100vw;
    background-image: url(../images/mv-sp.png);
	background-size: contain;
    margin-top: 60px;
	margin-bottom: -25px;
    }
#mainvisual .button-large {
    margin: 0 auto;
	}
.sp-br {
    display: inline;
	}
.maincopy{
	display: none;
}
.mv-copy{
	display: block;
	color: #493c3c;
	font-size: 28px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	font-weight: bold;
	position: absolute;
	top: 30px;
	left: 37px;
}


}

/** -----------------------------------
    私たちについて
-------------------------------------**/
#about{
	width: 100%;
	background-image: url(../images/about-back.png);
	background-position: center;
	height: 600px;
	text-align: center;
}

#about p.medium span {
	display: block;
}

#about h2.large{
	text-align: center;
}

#about p.large{
	text-align: center;
}

div.about-text{
	margin-top: 0px;
	margin-bottom: 60px;
}

#about .about-logo-sp{
	display: none;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#about {
    width: 100%;
	height: 110vw;
    background-image: url(../images/about-sp.png);
	background-size: contain;
	align-items: center;
    }
#about .a-logo{
	width: 115px;
    }
}

div.about-text{
	margin-top: 0px;
	margin-bottom: 60px;
	align-items: center;
}


/** -----------------------------------
    事業内容
-------------------------------------**/
#works{
	background-color: #FFF;
	height: 1400px;
}

#works h2.large{
	text-align: center;
}

#works p.medium{
	text-align: center;
}

img.mark{
	width: 73px;
}

.button-work{
    display: flex;
    justify-content: center; /* 横中央 */
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#works{
	background-color: #FFF;
	height: 100%;
}
	#works p.medium{
	text-align: left;
}
img.mark{
	width: 40px;
}

}

/** -----------------------------------
    働く環境
-------------------------------------**/
#environment{
	background-color: #fff;
	height: 700px;
}

#environment h2.large{
	text-align: center;
}

#environment p.medium{
	text-align: center;
}

.button-env{
    display: flex;
    justify-content: center; /* 横中央 */
}

.col-2 .member-01{
	width: 912px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#environment{
	background-color: #fff;
	height: 100%;
}

#environment p.medium{
	text-align: left;
}


}

/** -----------------------------------
    社員紹介
-------------------------------------**/
#member{
	background-color: #fff;
	height: 100%;
}

#member .item{
	border-radius: 25px;
}

#member h2.large{
	text-align: center;
}

#member p.medium{
	text-align: center;
}

#member p.medium span {
	display: block;
}

.button-member{
    display: flex;
    justify-content: center; /* 横中央 */
}
.item a:hover {
    /* メニューをホバーした時、透明度0.7 */
    opacity: 0.7;
}
/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#member p.medium span {
	display: inline;
}
#member p.medium{
	text-align: left;
}
}

.wrapper-member {
    padding: 10px 20px 0 20px;
}
.single-item {
    /*幅の最大値を600pxに*/
    /*幅をもたせて中央寄せにする*/
    max-width: 310px;
    margin: 0 auto;
}

.single-item a:hover {
    /* メニューをホバーした時、透明度0.7 */
    opacity: 0.7;
}

/** -----------------------------------
    募集職種
-------------------------------------**/
#jobtype{
	background-color: #FFF;
	height: 100%;
}

#jobtype h2.large{
	text-align: center;
}

#jobtype p.medium{
	text-align: center;
}

#jobtype p.medium span {
	display: block;
}
/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#jobtype p.medium{
	text-align: left;
}
#jobtype p.medium span {
	display: inline;
}
}
.wrapper-market a:hover {
    /* メニューをホバーした時、透明度0.7 */
    opacity: 0.7;
}
/** -----------------------------------
    よくある質問
-------------------------------------**/
#faq{
	background-color: #fff;
	height: 100%;
}

#faq h2.large{
	text-align: center;
}

.faq {
	border-radius: 29px;
	margin-bottom: 20px;
	border: 3px solid #f5ebe1;
	background-color: #f5ebe1;
}

.faq-head, .faq-body {
	padding: 20px 30px;
}

.faq-head {
	position: relative;
	background-color: #f5ebe1;
	border-radius: 26px;
}

.faq-head::after {
	content: "";
	display: block;
	background-image: url(../images/arrows.png);
	background-size: 100%;
	width: 38px;
	height: 26px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 24px;
	margin: auto;
}

.faq-head.open::after {
	background-image: url(../images/arrows.png);
	transform: rotate(180deg);
}

.faq-body {
	border-radius: 20px;
	background-color: #fff;
	margin: 5px 20px 20px 20px;
	display: none;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 790px) {
	.faq-head::after {
	content: "";
	display: block;
	background-image: url(../images/arrows.png);
	background-size: 100%;
	width: 25px;
	height: 20px;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 24px;
	margin: auto;
}
.faq-head.open::after {
	background-image: url(../images/arrows.png);
	transform: rotate(180deg);
}
.faq-body {
    margin: 5px 20px 20px 20px;
	background-color: #FFF;
}
}

/** -----------------------------------
    CTA
-------------------------------------**/
#cta{
	height: calc(100vh - 50px);
	background-image: url(../images/cta-photo.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}


#cta .cta-copy {
	color: #493c3c;
	font-size: 32px;
	line-height: 1.5;
	letter-spacing: 0.15em;
	text-align: center;
	margin: 0 auto;
}

#cta .button-large{
	margin: 0 auto;
}

#cta .wrapper{
	margin-top: 30px;
}

.sp-br{
	display: none;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	#cta .cta-copy {
	color: #493c3c;
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.15em;
	text-align: center;
	margin: 0 auto;
}
.sp-br{
	display: inline;
}
#cta {
    width: 100vw;
    background-image: url(../images/sp-back.png);
	margin-bottom: -25px;
	height: 100vw;
	margin-top: -20px;
    }
}

/** -----------------------------------
    フッター
-------------------------------------**/
#footer {
	background-color:#f5ebe1;
	text-align: center;
	padding: 70px 0;
}

#footer a {
	color: #493c3c;
}

.footer-link, .copyright {
	font-size: 15px;
}

.copyright {
	color: #493c3c;
}

.footer-link {
	margin-bottom: 20px;
}

.footer-link li {
	display: inline;
	margin-right: 20px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
#footer{
	padding: 40px 0 20px 0;
}
.footer-link{
	margin-bottom: 30px;
}
.footer-link li{
	display: block;
	margin-right: 0px;
	margin: 0 0 10px 0;
}

.footer-link, .copyright {
	font-size: 13px;
}

ul.footer-link li a:hover{
	opacity: 0.8;
}


}


/** -----------------------------------------------
  共通
------------------------------------------------**/



/** -----------------------------------------------
  PC :  画面の横幅が641px以上
------------------------------------------------**/






/*ここからメディアクエリで各デバイスサイズに書き分けます。
今回の課題で考慮するのはPCとスマホのみでOKですが、タブレットサイズでのスタイルを書いてもOK！
また、CSSは上から下に継承されるので、変化させたいところだけ書けばOKです*/


/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width:640px){
	.example {
		font-size: 20px;
		color: #AD8651;
	}
}