@charset "UTF-8";
/** -----------------------------------------------
  共通
------------------------------------------------**/
body {
	/*下記のCSSはご自身のデザインに合わせて書き換えてください。*/
	font-size: 16px;
	line-height: 1.7;
	color: #333;
	background-color:#fff;
	font-family: "Noto Sans JP", sans-serif;
  	font-style: normal;
	font-weight: 400;
	overflow-x: hidden;
}

.sp_only {
	display: none;
}



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


.projects, .person, .job, .environment, .entry {
	padding: 130px 0;
}

.section-inner {
	max-width: 960px;
	margin: 0 auto;
}
.section-inner2 {
	margin-left: calc((100% - 960px)/2);
}

img {
	max-width: 100%;
}

a {
	text-decoration: none;
}

/*詳しく見るボタン*/
.button-andmore {
	display: block;
	width: 250px;
	height: 33px;
	background-color: #fff;
	color: #DF6054;
	font-size: 12px;
	letter-spacing: 0.05em;
	border-radius: 17px;
	border: 1px solid #DF6054;
	text-align: center;
	line-height: 33px;
	margin: 0 auto;
}
a.button-andmore:hover {
	background-color: #DF6054;
	color: #fff;
}

/*セクションタイトル部分*/
h2.section-title {
	font-family: "Zen Maru Gothic", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 28px;
	line-height: normal;
	letter-spacing: 0.05em;
	text-align: center;
	margin-top: 20px;
	margin-bottom: 30px;
}
.section-symbol {
	display: block;
	width: 42px;
	height: 24px;
	margin: 0 auto;
}

/*セクション説明文部分*/
p.section-description {
	font-size: 16px;
	line-height: 1.7;
	letter-spacing: 0.05em;
	text-align: center;
	margin-bottom: 80px;
}

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

	.section-inner {
		padding: 0 24px;
		max-width: 550px;
		/** レスポンシブ一通り終わった後にmaveidthのけたらどうなるかやってみる-**/
	}

	p.section-description {
		text-align: left;
	}
}




/** -----------------------------------
    ヘッダー
-------------------------------------**/
.header {
	background-color: #fff;
	height: 60px;
	display: flex;
	justify-content: space-between;
}

h1 {
	display: flex;
}

.m_gNavBox__logoLink {
	display: flex;
	align-items: center;
	gap: 15px;
	margin-left: 20px;
}
a.m_gNavBox__logoLink:hover {
	opacity: 50%;
}

.logoMsg {
	font-size: 14px;
  	letter-spacing: 0.07em;
  	color: #333333;
  	font-weight: 500;
	line-height: 1;
}

.hedder-logo {
	display: block;
	width: 170px;
}

.gnav-pc-wrap {
	display: flex;
	align-items: center;
}

ul.gnav-pc li {
	display: inline;
	margin-right: 50px;
}
ul.gnav-pc li a {
  font-size: 14px;
  letter-spacing: 0.07em;
  color: #333333;
  font-weight: 500;
  line-height: 1;
}
ul.gnav-pc li a:hover {
  color: #DF6054;
}


#menu-button {
	display: none;
}

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

/**スマホ**/
@media screen and (max-width:640px) {
	.gnav-pc-wrap {
		display: none;
	}

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

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

	.menu-button-inner span {
		display: block;
		width: 100%;
		height: 2px;
		background-color: #fff;
		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;
	}

	/* スマホ用メニューのスタイル */
  .gnav-sp-wrap {
    display: none;
    width: 100vw;
    height: 100vh;
    background-color: #fff;
    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-weight: 500;
  	font-style: normal;
    font-size: 20px;
    letter-spacing: 0.1em;
    color: #333333;
    font-weight: bold;
  }
}




/** -----------------------------------
    ファーストセクション
-------------------------------------**/
.firstsection {
	background: linear-gradient(#F2D6C733,#F2D6C729,#DF60540A);
	/*opacity: 0.2;背景だけを透明度0.2にしたいのにセクション全体文字とかまで透けちゃう*/
	padding-bottom: 130px;
}

.mainvisual {
	padding: 80px;
	padding-bottom: 25px;
	width: 100vw;
	position: relative;
}

.fvphoto {
  width: 70vw;      /* 画面幅の70% */
  height: auto;     /* 縦横比を維持 */
  display: block;   /* インライン要素だと余計な隙間が出るのでblockに */
  margin: 0 auto;   /* 中央寄せ */
}

.copy {
	font-family: "Zen Maru Gothic", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	color: #DF6054;
	font-size: 60px;
	line-height: 1.3;
	letter-spacing: 0.1em;
	position: absolute;
	left: 60px;
	top: 60px;
}

h2.large {
	font-family: "Zen Maru Gothic", sans-serif;
  	font-weight: 500;
  	font-style: normal;
	font-size: 36px;
	letter-spacing: 0.1em;
	text-align: center;
	margin-top: 150px;
	margin-bottom: 80px;
}

p.about-text {
	font-size: 16px;
	line-height: 2.3;
	letter-spacing: 0.05em;
	text-align: center;
	margin-bottom: 30px;
}

.tsutsumu {
	display: block;
	width: 170px;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 80px;
}

.textandimg-area {
	position: relative;
}

.about1photo {
	width: 164px;
	position: absolute;
	top: 0%;
	right: 10%;
}

.about2photo {
	width: 250px;
	position: absolute;
	top: 20%;
	left: 0%;
}

.about3photo {
	width: 236px;
	position: absolute;
	bottom: 0%;
	right: 0%;
}

.circle-entry {
	position: fixed;
	right: 65px;
	bottom: 65px;
}
.circle-entry-img {
	width: 153px;
	height: 132px;
}

.mainvisual a:hover img {
  filter: alpha(opacity=70);
  -moz-opacity: 0.7;
  opacity: 0.7;
  /*画像を70%の不透明度に
  もし50%にしたいときは
  上から50、0.5、0.5にします*/
}


/**スマホ**/
@media screen and (max-width:640px) {
	.mainvisual {
		padding: 190px 0;
		padding-bottom: 150px;
		width: 100vw;
		position: relative;
	}

	.fvphoto {
		width: 100%;      /* 画面幅の70% */
		height: auto;     /* 縦横比を維持 */
		display: block;   /* インライン要素だと余計な隙間が出るのでblockに */
		margin: 0 0 0 10%;   /* 中央寄せ */
	}

	.copy {
		font-size: 32px;
		line-height: 1.3;
		letter-spacing: 0.1em;
		position: absolute;
		left: 20px;
		top: 60px;
	}

	h2.large {
		font-size: 24px;
		letter-spacing: 0.1em;
		text-align: left;
		margin-top: 70px;
		margin-bottom: 45px;
	}

	p.about-text {
		text-align: left;
		margin-bottom: 20px;
	}

	.tsutsumu {
		padding-top: 25px;
		padding-bottom: 60px;
	}

	.about1photo, .about2photo, .about3photo {
		display: none;
	}

	.sp_only {
		display: block;
		margin-top: 60px;
	}

	.circle-entry {
		position: fixed;
		right: 45px;
		bottom: 45px;
		z-index: 999;
	}

}






/** -----------------------------------
    事業について
-------------------------------------**/
h3 {
	font-size: 22px;
	line-height: normal;
	font-weight: 500;
}

h4 {
	font-family: "Zen Maru Gothic", sans-serif;
  	font-weight: 700;
  	font-style: normal;
	font-size: 80px;
	line-height: 0;
	letter-spacing: 0.02em;
	color: #F2D6C780;
}

.two {
	color: #D4C4D980;
}
.three {
	color: #DDEEE0CC;
}

.short-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.line-1 {
	width: 100%;
	height: 4px;
	background-color: #F2D6C7;
	border-radius: 2px;
	margin: 16px auto;
}
.line-2 {
	width: 100%;
	height: 4px;
	background-color: #D4C4D9;
	border-radius: 2px;
	margin: 16px auto;
}
.line-3 {
	width: 100%;
	height: 4px;
	background-color: #DDEEE0;
	border-radius: 2px;
	margin: 16px auto;
}

.projects-photo {
	width: 373px;
}
.projects-text {
	width: calc(95% - 373px);
}

.col-2-projects {
	display: flex;
	margin-bottom: 40px;
	justify-content: space-between;
	align-items: center;
}

.projects .button-andmore {
	margin-top: 80px;
}


/**スマホ**/
@media screen and (max-width:640px) {
	.col-2-projects {
		display: block;

	}

	.projects-photo {
		width: 100%;
	}
	.projects-text {
		width: 100%;
		margin: 30px 0 50px 0;
	}

	.container {
		display: flex;
		flex-direction: column; /* スマホでは縦並び */
	}
	.container .projects-text { order: 2; }
	.container .projects-photo { order: 1; }

}



/** -----------------------------------
    メンバー紹介
-------------------------------------**/
.person {
	background: linear-gradient(#F2D6C71A,#DF60540F);
	border-radius: 130px 130px 0 0;
}

.col-2-sectiontitle {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
}

.person .section-symbol {
	margin: 0 auto 0 0;
}
.person h2.section-title {
	text-align: left;
	margin: 0;
	margin-left: 20px;
}
.person p.section-description {
	text-align: left;
	margin: 0;
}

.col-2-top {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin-bottom: 80px;
}

.autoplay {
    /*幅の最大値を600pxに*/
    /*幅をもたせて中央寄せにする*/
    max-width: 960px;
    margin: 0 auto;
}

.autoplay img {
	margin: 0 22px;
}

.autoplay {
  overflow: visible;
}
.slick-list {
  overflow: visible;
}

/*以下チャッピーコピペ*/

/* 全スライドの基本 */
.autoplay .slick-slide {
  transform: scale(0.9);
  opacity: 0.7;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

/* アクティブ（左端）スライドを拡大 */
.autoplay .slick-current {
  transform: scale(1);
  opacity: 1;
  z-index: 2;
}





/**スマホ**/
@media screen and (max-width:640px) {
	.person .button-andmore {
		margin-top: 700px;
	}

	.col-2-sectiontitle {
		display: block;
	}

	.person .section-symbol {
		margin: 0 auto;
	}
	.person h2.section-title {
		text-align: center;
		margin: 20px 0 30px 0;
	}
	.person p.section-description {
		text-align: left;
		margin: 0 auto;
	}

	.col-2-top {
		display: block;
		margin-bottom: 80px;
	}

	.person .section-inner{
		position: relative;
	}

	.wrapper{
		position: absolute;
		left:0;
		right:0;
		bottom: 80px;
	}

	/* スライドの基本設定 */
	
}

/** -----------------------------------
    募集職種
-------------------------------------**/
.job {
	height: auto;
}

.occupation {
	display: block;
	width: 362px;
	height: 45px;
	background-color: #F2D6C766;
	color: #333;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.07em;
	text-decoration: none;
	border-radius: 23px;
	text-align: center;
	line-height: 45px;
	margin: 0 auto;
	margin-bottom: 33px;
}
.joblist a:hover{
	background-color: #F2D6C7;
}

.job_illust {
	width: 471px;
}

.col-2-job {
	display: flex;
	justify-content: space-between;
	margin-bottom: 47px;
}

/**スマホ**/
@media screen and (max-width:640px) {
	.col-2-job {
		flex-direction: column; /* スマホでは縦並び */
		/* もくもく会で解決 */
		flex-direction: column-reverse;
		margin-bottom: 0;
	}

	.job_illust {
		width: 80vw;
		max-width: 360px;
		margin: 0 auto;
		margin-top: 100px;
	}
	.occupation {
		max-width: 100%;
		
	}

	/* もくもく会で解決 */
	#job .section-inner{
		position: relative;
	}

	/* もくもく会で解決 */
	#job .button-andmore{
		position: absolute;
		left:0;
		right:0;
		bottom: 300px;
	}

}


/** -----------------------------------
    働く環境
-------------------------------------**/
.environment {
	background: linear-gradient(#F2D6C71A,#DF60540F);
}

.col-3 {
	display: flex;
	justify-content: space-between;
	margin-bottom: 80px;
}

.environment-photo {
	display: block;
	width: 30%;
}

/**スマホ**/
@media screen and (max-width:640px) {
	.col-3 {
		display: block;
		max-width: 285px;
		margin: 0 auto;
	}
	.environment-photo {
		display: block;
		width: 100%;
		margin-bottom: 40px;
	}
}

/** -----------------------------------
    エントリー
-------------------------------------**/
.entry {
	background: linear-gradient(80deg,#F2D6C7,#DF6054CC);
}

.entry .section-description span {
	display: block;
}


.entrysection-button {
	display: block;
	width: 360px;
	height: 80px;
	background-color: #fff;
	color: #DF6054;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: 40px;
	text-align: center;
	line-height: 80px;
	margin: 0 auto;
    position: relative;
	z-index: 998;
}
a.entrysection-button:hover {
	background-color: #DF6054;
	color: #fff;
}

.entrysection_photo {
	display: block;
	margin-top: -40px;
}

.entrysection_sp {
	display: none;
}

/**スマホ**/
@media screen and (max-width:640px) {
	.entrysection-button {
		width: 280px;
	}

	.entrysection_photo {
		display: none;
	} 
	.entrysection_sp {
		display: block;
		margin-top: -40px;
	}
}

/** -----------------------------------
    フッター
-------------------------------------**/
.footer {
	text-align: center;
	padding: 80px 0;
}

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

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

.footer a {
  color: #333;
}
.footer a:hover {
  color: #333333B3;
}

/**スマホ**/
@media screen and (max-width:640px) {
	.footer-link li {
		display: block;
		margin: 0 0 20px 0;
	}

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

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


.copyright {
  color: #333;
}


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