@charset "UTF-8";

/* ※備忘録：基本的に背景画像やセクションに高さは設定しなくてよい。セクションの高さは中の要素で決まる。 */

/* インライン要素は横幅と高さの指定が不可 */
/* インライン要素：a/h/ */

/* * -----------------------------------------------
  共通
------------------------------------------------* */
body {
	/* 背景を配置する */
	background-image: url(../images/background.png);
	background-repeat: repeat;
	/* ・M PLUS Rounded 1c、Montserratが優先。WindowsはYuGothicが優先。Macの場合は、欧文であれば、Helvetica→Arialの順に表示する。和文はHiragino Kaku Gothic ProNが優先。古いパソコンであれば、Meiryoを表示する。 */
	font-family: "M PLUS Rounded 1c", "Montserrat", "Yu Gothic", YuGothic, Helvetica, Arial, "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3",
		Meiryo, メイリオ, sans-serif;
	font-size: 16px;
	font-weight: 400;
	color: #7e4c47;
	line-height: 1.8;
	letter-spacing: 0.06em;
}

/* 画像の最大幅を親要素の横幅いっぱいにする */
img {
	max-width: 100%;
}

/* 各セクションに余白を設定する */
.about,
.business,
.member,
.benefit,
.career,
.job-list,
.flow,
.ideal-candidate,
.entry {
	padding: 100px 0px 100px 0px;
}

.section-inner {
	/* PCのコンテンツの最大幅を1040pxに */
	max-width: 1040px;
	/* 中央寄せにする */
	margin: 0 auto;
}

.ul {
	display: flex;
}

a:link,
a:visited,
a:hover,
a:active {
	color: inherit;
	text-decoration: none;
}

/* レスポンシブ対応 */
.pc-only {
	display: block;
}

.sp-only {
	display: none;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.body {
		line-height: 1.6;
	}

	.section-inner {
		/* 左右に20pxの余白（padding） */
		padding: 0 20px;
		/* 最大幅を550pxにする */
		max-width: 550px;
	}

	.pc-only {
		/* PCの時は表示しない */
		display: none;
	}

	.sp-only {
		/* SPの時は表示する */
		display: block;
	}

	.about,
	.business,
	.member,
	.benefit,
	.career,
	.job-list,
	.flow,
	.ideal-candidate,
	.entry {
		padding: 52px 0px 40px 0px;
	}
}

/** -----------------------------------
    ★テキスト
-------------------------------------**/

/** -------- PC -------- **/

/* 32pxかつBold */
h2 {
	font-size: 32px;
	font-weight: 700;
	color: #5d3430;
	text-align: center;
	margin-top: 32px;
	margin-bottom: 32px;
}

/* 24pxかつMediumかつ薄茶色 */
h3 {
	font-size: 24px;
	font-weight: 500;
	color: #7e4c47;
	text-align: center;
	margin-bottom: 80px;
}

/* 24pxかつBoldかつ白 */
h4.h4-business {
	font-size: 24px;
	font-weight: 700;
	color: #fff;
}

/* 24pxかつBoldかつ茶色 */
h4.h4-benefit {
	font-size: 24px;
	font-weight: 700;
	color: #5d3430;
	text-align: center;
	padding: 32px 0px;
}

/* 24pxかつBoldかつ薄茶色 */
h4.h4-flow-step {
	font-family: 'Montserrat', sans-serif;
	font-size: 24px;
	font-weight: 700;
	color: #7e4c47;
	padding: 32px 0px;
}

/* 18pxかつBoldかつ薄茶色 */
p.p-flow-phase {
	font-size: 18px;
	font-weight: 700;
	color: #7e4c47;
	margin-bottom: 24px;
}

/* 18pxかつMediumかつ薄茶色 */
p.large {
	font-size: 18px;
	font-weight: 500;
	color: #7e4c47;
}

/* 16pxかつMediumかつ薄茶色 */
p.medium {
	font-size: 16px;
	font-weight: 500;
	color: #7e4c47;
	margin-bottom: 16px;
}

/* 16pxかつRegularかつ薄茶色 */
p.small {
	font-size: 16px;
	font-weight: 400;
	color: #7e4c47;
	margin-bottom: 16px;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	/* 24pxかつBold */
	h2 {
		font-size: 24px;
	}

	/* 16pxかつMediumかつ薄茶色 */
	h3 {
		font-size: 16px;
		margin-bottom: 32px;
	}

	/* 18pxかつMediumかつ濃茶色 */
	h3-news {
		font-size: 18px;
		margin-bottom: 32px;
	}

	/* 18pxかつBoldかつ白 */
	h4.h4-business {
		font-size: 18px;
	}

	/* 18pxかつBoldかつ茶色 */
	h4.h4-benefit {
		font-size: 18px;
	}

	/* 18pxかつBoldかつ薄茶色 */
	h4.h4-flow-step {
		font-size: 18px;
	}

	/* 16pxかつBoldかつ薄茶色 */
	p.p-flow-phase {
		font-size: 16px;
	}

	/* 16pxかつMediumかつ薄茶色 */
	p.large {
		font-size: 14px;
	}

	/* 14pxかつMediumかつ薄茶色 */
	p.medium {
		font-size: 14px;
	}

}

/** -----------------------------------
    リンクの色
-------------------------------------**/
a:visited {
	color: inherit;
}

/** -----------------------------------
    ボタン
-------------------------------------**/
/** -------- PC -------- **/
/* リンクボタンを作成 */
.button {
	display: block;
	height: 80px;
	width: 380px;
	border-radius: 40px;
	font-family: 'Montserrat', sans-serif;
	/* 文字色を設定する */
	color: #FFFFFF;
	/* 文字サイズを設定する */
	font-size: 18px;
	/* ウェイトを設定する */
	font-weight: 700;
	/* 文字を中央に寄せる */
	text-align: center;
	line-height: 80px;
	background-image: url("../images/view-more-button.png");
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	margin: 0 auto;
	margin-top: 64px;
}

.top-button {
	display: block;
	height: 40px;
	width: 190px;
	border-radius: 40px;
	font-family: 'Montserrat', sans-serif;
	/* 文字色を設定する */
	color: #FFFFFF;
	/* 文字サイズを設定する */
	font-size: 18px;
	/* ウェイトを設定する */
	font-weight: 700;
	/* 文字を中央に寄せる */
	text-align: center;
	line-height: 40px;
	background-image: url("../images/entry-button.png");
	background-size: contain;
	background-repeat: no-repeat;
	text-decoration: none;
	margin-top: 12px;
}

.entry-button {
	width: 380px;
	/* 文字を中央に寄せる */
	text-align: center;
	line-height: 80px;
	background-image: url("../images/entry-button.png");
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	margin: 0 auto;
	margin-top: 64px;
}

.top-button a {
	color: #ffffff;
	font-size: 16px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-decoration: none;
}

.entry-button a {
	color: #ffffff;
	font-size: 24px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-decoration: none;
}

.view-more-button a {
	color: #ffffff;
	font-size: 18px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	text-decoration: none;
}

.top-button:hover {
	background-image: url("../images/entry-button-hover.png");
	transition: 0.8s;
}

.view-more-button:hover {
	height: 80px;
	width: 380px;
	background-image: url("../images/view-more-button-hover.png");
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	margin: 0 auto;
	margin-top: 64px;
	transition: 0.8s;
}

.entry-button:hover {
	width: 380px;
	text-align: center;
	line-height: 80px;
	background-image: url("../images/entry-button-hover.png");
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	margin: 0 auto;
	margin-top: 64px;
	opacity: .6;
	transition: 1s;
}

.view-more-button:active {
	height: 80px;
	width: 380px;
	background-image: url("../images/view-more-button-hover.png");
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	margin: 0 auto;
	margin-top: 64px;
	opacity: 0;
	transition: 0.8s;
}

.entry-button:active {
	width: 380px;
	text-align: center;
	line-height: 80px;
	background-image: url("../images/entry-button-hover.png");
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	margin: 0 auto;
	margin-top: 64px;
	opacity: 0;
	transition: 1s;
}

.top-button:active {
	width: 190px;
	background-image: url("../images/entry-button-hover.png");
	transition: 0.8s;
}

html {
	scroll-behavior: smooth;
}

.pagetop {
	height: 120px;
	width: 120px;
	position: fixed;
	right: 30px;
	bottom: 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 980;
	background-image: url("../images/top-img.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
/*デフォルトで非表示にする*/
	opacity: 0;
	visibility: hidden;
}

	/*このクラスが付与されると表示する*/
	.active {
		opacity: 1;
		visibility: visible;
	}

	/*フッターのスタイルを追加*/
	footer {
		position: relative;
	}

	/*このクラスが付与されると表示する*/
	.absolute {
		position: absolute;
		top: -70px;
		bottom: auto;
		transition: 5s;
	}

.pagetop p {
	padding-bottom: 6px;
	color: #FFFFFF;
	font-size: 18px;
	line-height: 1.8;
	font-family: 'Montserrat', sans-serif;
	font-weight: 500;
}

/* 未訪問 */
.pagetop:link {
	opacity: 1;
}

/* 訪問済み*/
.pagetop:visited {
	opacity: 1;
}

/* ホバー時 */
.pagetop:hover {
	opacity: 0.8;
}

/* アクティブなリンク */
.pagetop:active {
	opacity: 1;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	/* リンクボタンを作成 */
	.view-more-button {
		display: block;
		width: 300px;
		height: 40px;
		border-radius: 40px;
		font-family: 'Montserrat', sans-serif;
		/* 文字色を設定する */
		color: #FFFFFF;
		/* 文字サイズを設定する */
		font-size: 18px;
		/* ウェイトを設定する */
		font-weight: 700;
		/* 文字を中央に寄せる */
		text-align: center;
		line-height: 40px;
		background-image: url("../images/view-more-button-sp.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		text-decoration: none;
		margin: 32px auto;
	}

	.entry-button {
		display: block;
		width: 320px;
		height: 60px;
		border-radius: 60px;
		font-family: 'Montserrat', sans-serif;
		/* 文字色を設定する */
		color: #FFFFFF;
		/* 文字サイズを設定する */
		font-size: 18px;
		/* ウェイトを設定する */
		font-weight: 700;
		/* 文字を中央に寄せる */
		text-align: center;
		line-height: 60px;
		background-image: url("../images/entry-button-sp.png");
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center;
		text-decoration: none;
		margin: 32px auto;
	}

	.top-button {
		width: 340px;
		/* 文字を中央に寄せる */
		text-align: center;
		line-height: 40px;
		background-image: url("../images/entry-button-sp.png");
		background-repeat: no-repeat;
		text-decoration: none;
		margin-top: 40px;
	}


	.top-button a,
	.entry-button a {
		color: #ffffff;
		font-size: 18px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		text-decoration: none;
	}

	.view-more-button a {
		color: #ffffff;
		font-size: 16px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
		text-decoration: none;
	}

	.top-button:hover {
		width: 340px;
		top: 16px;
		margin-left: 128px;
		background-image: url("../images/entry-button-hover-sp.png");
		background-repeat: no-repeat;
		transition: 0.8s;

	}

	.view-more-button:hover {
		height: 40px;
		width: 340px;
		background-image: url("../images/view-more-button-hover-sp.png");
		background-repeat: no-repeat;
		background-position: 0px, 0px;
		text-decoration: none;
		background-size: contain;
		background-position: center;
		text-decoration: none;
		margin: 32px auto;
		transition: 0.8s;
	}

	.entry-button:hover {
		width: 320px;
		text-align: center;
		line-height: 60px;
		background-image: url("../images/entry-button-hover-sp.png");
		background-repeat: no-repeat;
		background-position: 0px, 0px;
		text-decoration: none;
		margin: 32px auto;
		transition: 1s;
	}

	.view-more-button:active {
		width: 340px;
		height: 40px;
		background-image: url("../images/view-more-button-hover-sp.png");
		background-repeat: no-repeat;
		background-position: 0px, 0px;
		text-decoration: none;
		margin: 32px auto;
		opacity: 0;
		transition: 0.8s;
	}

	.entry-button:active {
		width: 320px;
		text-align: center;
		line-height: 60px;
		background-image: url("../images/entry-button-hover-sp.png");
		background-repeat: no-repeat;
		background-position: 0px, 0px;
		text-decoration: none;
		margin: 32px auto;
		opacity: 0;
		transition: 1s;
	}

	.top-button:active {
		width: 340px;
		top: 16px;
		margin-left: 128px;
		background-image: url("../images/entry-button-hover.png");
		background-repeat: no-repeat;
		transition: 0.8s;
	}

	html {
		scroll-behavior: smooth;
	}
}


/** -----------------------------------
    アニメーション
-------------------------------------**/
@keyframes fuwafuwa {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-20px);
	}
}

@keyframes yurayura {
	0%,
	100% {
		transform: rotate(15deg);
	}
	50% {
		transform: rotate(-15deg);
	}
}

@keyframes popup {
	0% {
		/* ちょっとだけ下にする */
		transform: translateY(30px);
		/* 注：displayプロパティはアニメーションに対応していない */
		opacity: 0;
	}
	20% {
		transform: none;
		opacity: 1;
	}
	80% {
		transform: none;
		opacity: 1;
	}
	100% {
		transform: translateY(30px);
	}
}

@keyframes scrollAnimation {
	0% {
		color: #7e4c47;
	}
	100% {
		color: #fe6a77;
	}
}

/** -----------------------------------
    ヘッダー
-------------------------------------**/
.header {
	background-color: #feeed7;
	width: 100%;
	height: 120px;
	/* 常に上部に固定されるように指定 */
	position: fixed;
	/* topからの距離で固定 */
	top: 0;
	/* 重なり順が一番上になるように指定 */
	z-index: 999;
}

.header-col2 {
	margin: 0 3% 0;
	/* 2カラムを横並びにする */
	display: flex;
	/* 高さを持たせる */
	height: 120px;
	/* 子要素を縦方向の中央に配置する */
	align-items: center;
	justify-content: space-between;
}

h1.header-logo {
	width: 280px;
}

.item-sp-nav {
	display: none;
}

.gnav-pc-col2 {
	display: flex;
	/* 縦並びにする */
	flex-direction: column;
	justify-content: space-between;
	/* 交差軸に対して、右揃えにする */
	align-items: flex-end;
}

.gnav-pc-item {
	/* 上下の余白を無くして配置 */
	justify-content: space-between;
}

ul.gnav-pc li {
	display: inline;
}

ul.gnav-pc li a {
	font-family: 'Rounded Mplus 1c', sans-serif;
	font-size: 14px;
	font-weight: 500;
	padding: 0 7px;
	color: #7e4c47;
	text-decoration: none;
}

/* グロナビにマウスホバー時に、手書きの下線をふわっと表示させる */
/* .aboutのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-about {
	position: relative;
}

a.gnav-about::after {
	content: "";
	background-image: url("../images/hover_gnav-about.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-about:hover:after {
	opacity: 1;
	transition: 0.8s;
}

/* .businessのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-business {
	position: relative;
}

a.gnav-business::after {
	content: "";
	background-image: url("../images/hover_gnav-business.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-business:hover:after {
	opacity: 1;
	transition: 0.8s;
}

/* .memberのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-member {
	position: relative;
}

a.gnav-member::after {
	content: "";
	background-image: url("../images/hover_gnav-member.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-member:hover:after {
	opacity: 1;
	transition: 0.8s;
}

/* .careerのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-career {
	position: relative;
}

a.gnav-career::after {
	content: "";
	background-image: url("../images/hover_gnav-career.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-career:hover:after {
	opacity: 1;
	transition: 0.8s;
}

/* .job-listのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-job-list {
	position: relative;
}

a.gnav-job-list::after {
	content: "";
	background-image: url("../images/hover_gnav-job-list.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-job-list:hover:after {
	opacity: 1;
	transition: 0.8s;
}

/* .flowのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-flow {
	position: relative;
}

a.gnav-flow::after {
	content: "";
	background-image: url("../images/hover_gnav-flow.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-flow:hover:after {
	opacity: 1;
	transition: 0.8s;
}

/* .ideal-candidateのリンク */
/* ①擬似要素で、下線を配置し、透明にしておく。 */
a.gnav-ideal-candidate {
	position: relative;
}

a.gnav-ideal-candidate::after {
	content: "";
	background-image: url("../images/hover_gnav-ideal-candidate.png");
	display: block;
	position: absolute;
	top: 14px;
	margin: auto;
	left: 4px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 12px;
	opacity: 0;
}

/* ②リンクホバー時に擬似要素の透明をゆっくり解除する */
/* リンクホバー時の擬似クラス設定 */
a.gnav-ideal-candidate:hover:after {
	opacity: 1;
	transition: 0.8s;
}

.sp-nav {
	display: none;
}

/** -------- タブレット -------- **/
@media screen and (max-width: 1128px) {
	.header {
		position: static;
		background-color: #feeed7;
		width: 100%;
		height: 84px;
		align-items: center;
		/* 重なり順が一番上になるように指定 */
		z-index: 999;
	}

	.header-col2 {
		/* フレックスボックスに高さを持たせる */
		height: 84px;
		display: flex;
		margin: 0 5%;
		align-items: center;
		justify-content: space-between
	}

	.header-col2 .item {
		/* calcで計算していた横幅は全て横いっぱいにひろがるようにする */
		text-align: center;
	}


	h1.header-logo {
		width: 168px;
	}

	.gnav-pc-col2 {
		margin-right: 50%;
	}

	.header-col2 .item-pc {
		display: none;
	}

	.item-sp-nav {
		display: block;
		width: 60px;
		height: 60px;
	}

	.sp-nav {
		display: block;
		position: fixed;
		/* ハンバーガーメニューの親要素を前面へ */
		z-index: 990;
	}

	/* ハンバーガーメニューをホバーしたら少し透過させる */
	.drawer_open:active {
		opacity: .7;
		transition: 0.8s;
	}

	.slide-nav a:hover {
		opacity: .7;
		transition: 0.8s;
	}

	.sp-nav-content {
		background-image: url("../images/sp-nav-li-background.png");
		background-repeat: repeat;
		height: 100%;
	}

	.sp-nav-li {
		padding-top: 8px;
	}

	.sp-nav-li li {
		list-style: none;
		text-decoration: none;
		text-align: left;
	}

	.sp-nav-li a {
		display: block;
		line-height: 52px;
		text-decoration: none;
		width: 100%;
	}

	.sp-nav-p {
		padding-left: 10%;
		font-size: 18px;
		font-weight: 500;
		color: #7e4c47;
	}

	/* チェックボックスを非表示にする */
	.drawer_hidden {
		display: none;
	}

	/* ハンバーガーアイコンの設置スペース */
	.drawer_open {
		display: flex;
		height: 60px;
		width: 60px;
		background-image: url("../images/menu-button-img.png");
		justify-content: center;
		align-items: center;
		position: relative;
		cursor: pointer;
		/* ハンバーガーメニューを開いた際に、
	コンテンツよりも、アイコンを前に表示 */
		z-index: 1000;
	}

	/* ハンバーガーメニューのアイコン */
	.drawer_open span,
	.drawer_open span:before,
	.drawer_open span:after {
		content: '';
		display: block;
		height: 3px;
		width: 25px;
		border-radius: 3px;
		background: #fff;
		transition: 0.5s;
		position: absolute;
	}

	/* 三本線の一番上の棒の位置調整 */
	.drawer_open span:before {
		bottom: 8px;
	}

	/* 三本線の一番下の棒の位置調整 */
	.drawer_open span:after {
		top: 8px;
	}


	/* アイコンがクリックされたら真ん中の線を透明にする */
	#drawer_input:checked~.drawer_open span {
		background: rgba(255, 255, 255, 0);
	}

	/* アイコンがクリックされたらアイコンが×印になるように上下の線を回転 */
	#drawer_input:checked~.drawer_open span::before {
		bottom: 0;
		transform: rotate(45deg);
	}

	#drawer_input:checked~.drawer_open span::after {
		top: 0;
		transform: rotate(-45deg);
	}

	.sp-nav-logo {
		background-color: #feeed7;
		width: 100%;
		height: 84px;
		margin: 0 auto;
	}

	.sp-nav-logo-img {
		width: 169px;
		margin: 0px auto;
		padding-top: 20px;
	}

	/* メニューのデザイン*/
	.nav_content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;
		/* メニューを画面の外に飛ばす */
		background: #fff;
		z-index: 800;
		transition: 0.8s;
	}

	.sp-nav-li,
	.p-nav-sns-list {
		display: inline;
		list-style: none;
	}

	.p-nav-sns-list li {
		margin: 10px;
	}

	/* アイコンがクリックされたらメニューを表示 */
	#drawer_input:checked~.nav_content {
		left: 0;
		/* メニューを画面に入れる */
	}

	.p-nav-sns-link li {
		display: inline;
	}

	/* 擬似要素 */
	.nav-item-1,
	.nav-item-2,
	.nav-item-3,
	.nav-item-4,
	.nav-item-5,
	.nav-item-6,
	.nav-item-7 {
		/* 擬似要素のposition配置の基準とする */
		position: relative;
	}

	/* リンクの横に「＞」をつける */
	.nav-item-1::after,
	.nav-item-2::after,
	.nav-item-3::after,
	.nav-item-4::after,
	.nav-item-5::after,
	.nav-item-6::after,
	.nav-item-7::after {
		position: absolute;
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印画像を背景画像として配置する */
		background-image: url("../images/arrow-sp-nav-content.png");
		width: 20px;
		height: 20px;
		left: calc(90% - 20px);
		top: 18px;
	}

	/* リンクの下に波線をつける */
	.nav-item-8::after {
		position: absolute;
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印画像を背景画像として配置する */
		background-image: url("../images/line-sp-nav-content.png");
		width: 100%;
		height: 6px;
		top: 54px;
		left: 0px;
	}

	/* リンクの上に波線をつける */
	.nav-item-1::before,
	.nav-item-2::before,
	.nav-item-3::before,
	.nav-item-4::before,
	.nav-item-5::before,
	.nav-item-6::before,
	.nav-item-7::before {
		position: absolute;
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印画像を背景画像として配置する */
		background-image: url("../images/line-sp-nav-content.png");
		width: 100%;
		height: 6px;
	}
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.header-item {
		/* 左から50％の位置に、ロゴ中央が来るようにする */
		padding-left: calc(47% - 84px);
	}
}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/
.main-visual {
	/* 横幅を画面いっぱいに広げる(vwはスクロールバーが含まれるため、％の方がよい） */
	width: 100%;
	/* 高さを120px減らして指定。基本的にはvhでOK。SPは検索窓が出てくるが、vhでOK。）*/
	height: calc(100vh - 120px);
	/* height: 755px; */
	/* ヘッダー固定した分外側に余白をつける */
	margin-top: 120px;
	/* 背景画面を配置、一つ上の階層の「images」フォルダの画像を表示 */
	background-image: url("../images/mainvisual-pc.jpg");
	/* 縦横比を保持したまま全面を覆うように配置 */
	background-size: cover;
	/* 背景画像が常に中央に配置されるように指定 */
	background-position: center;
	/* 背景画像を繰り返さないように指定 */
	background-repeat: no-repeat;
}

.main-visual-col2 {
	/* 2カラムを横並びにする */
	display: flex;
	/* 横に均等に配置する */
	justify-content: space-between;
}

/* キャッチコピーの配置 */
.catch-copy {
	/* 上に余白をつける */
	/* 端末の画面縦幅から、ヘッダーの高さとキャッチコピーの半分の高さを引いた値＋補正値で設定 */
	padding-top: calc(50% - 120px - 15.75% - 40px);
	padding-left: 10%;
	width: 50%;
}


/** -----------------------------------
    お知らせ
-------------------------------------**/
/* お知らせのBOXを作り、メッセージボードと文言を配置する */
.news {
	/* 背景にメッセージボード画像を配置する */
	background-image: url("../images/news.png");
	/* 背景画像を繰り返さないように指定 */
	background-repeat: no-repeat;
	/* 画像を切り取ったり縦横比を崩したりすることなく、コンテナー内で可能な限り大きく配置 */
	background-size: contain;
	/* 背景画像が常にお知らせboxの下部に配置されるように指定 */
	background-position: bottom;
	/* コンテンツ領域の横幅を指定する。 */
	width: 50%;
	/* 要素の上に余白をつける */
	line-height: 1.8;
	/* 配下の要素は中央寄せ下揃えにする */
	text-align: center;
}

.news h3 {
	/* 「お知らせ」に余白をつける*/
	margin-top: calc(100vh - 120px - 233px);
	padding: 0.7em 0 .5em 0;
	/* マージンを取り消す */
	margin-bottom: 0px;
	/* font-size: clamp(24px, 1vw, 24px); */
}

.news p {
	/*下に余白をつける*/
	padding-bottom: 1em;
	/* font-size: clamp(12px, 1vw, 14px); */
}

.news-viewmore {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
	padding-bottom: 1.5em;
}

/* VIEW MOREの横に擬似要素で、「＞」をつける */
a.viewmore::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 矢印画像を背景画像として配置する */
	background-image: url("../images/arrow.png");
	background-size: contain;
	width: 20px;
	height: 20px;
	/* 上下は中央に、右から180pxになるように配置する */
	position: absolute;
	top: 8px;
	margin: auto;
	right: 30%;
}

/* VIEW MOREのスタイルを設定 */
.news a {
	/* VIEW MOREの下線を削除 */
	text-decoration: none;
	font-size: 20px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	/* font-size: clamp(14px, 1vw, 18px); */
}

/* ホバー時に透明にする */
.news a:hover {
	opacity: 0.5;
	transition: 0.3s;
}

@media screen and (max-width: 1128px) {
	.sp-only {
		display: block;
	}

	.pc-only {
		display: none;
	}

	.main-visual {
		width: 100%;
		height: calc(78vh - 84px);
		background-image: url("../images/mainvisual-pc.jpg");
		background-size: cover;
		background-position: center;
		margin-bottom: 0px;
		margin-top: 0px;
	}

	/* 縦並びにする */
	.main-visual-col2 {
		display: block;
	}

	.main-visual-col2 .item {
		/* calcで計算していた横幅は全て横いっぱいにひろがるようにする */
		width: 100%;
	}

	/* キャッチコピーの配置 */
	.catch-copy {
		padding: 30vh 0 0;
		width: 90%;
		margin: 0 auto;
	}

	/* お知らせのBOXを作り、メッセージボードと文言を配置する */
	.news-sp {
		/* 背景にメッセージボード画像を配置する */
		background-image: url("../images/news.png");
		/* 背景画像を繰り返さないように指定 */
		background-repeat: no-repeat;
		background-size: contain;
		width: 668px;
		margin: 0 auto;
		/* 背景画像が常にお知らせboxの下部に配置されるように指定 */
		background-position: bottom;
		line-height: 1.6;
		/* 配下の要素は中央寄せ下揃えにする */
		text-align: center;
	}

	br.pc-only {
		display: block;
	}

	br.sp-only {
		display: none;
	}

	/* お知らせを配置 */
	.news-sp {
		text-align: center;
	}

	.news-sp h3 {
		padding-top: 28px;
		margin-bottom: 16px;
	}

	.news-sp news-p-1 {
		padding-bottom: 24px;
	}

	.news-sp news-p-2 {
		padding-bottom: 36px;
	}

	h3 {
		font-size: 18px;
		font-weight: 700;
	}

	p.medium {
		font-size: 14px;
		font-weight: 500;
	}

	.news-viewmore-sp {
		/*下に余白をつける*/
		padding-bottom: 32px;
		/* 擬似要素のposition配置の基準とする */
		position: relative;
	}

	/* VIEW MOREのスタイルを設定 */
	.news-sp a {
		/* VIEW MOREの下線を削除 */
		text-decoration: none;
		font-size: 18px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;
	}

	/* ホバー時に透明にする */
	.news-sp a:hover {
		opacity: 0.5;
		transition: 0.3s;
	}

	/* VIEW MOREの横に擬似要素で、「＞」をつける */
	a.viewmore::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印画像を背景画像として配置する */
		background-image: url("../images/arrow.png");
		background-size: contain;
		width: 16px;
		height: 16px;
		/* 上下は中央に、右から180pxになるように配置する */
		position: absolute;
		top: 6px;
		margin: auto;
		right: 36%;
	}
}

@media screen and (max-width: 768px) {
	.main-visual {
		width: 100%;
		height: calc(78vh - 84px);
		background-image: url("../images/mainvisual-pc.jpg");
		background-size: cover;
		background-position: center;
		margin-bottom: 0px;
		margin-top: 0px;
	}

	br.pc-only {
		display: none;
	}

	br.sp-only {
		display: block;
	}


	/* お知らせのBOXを作り、メッセージボードと文言を配置する */
	.news-sp {
		/* 背景にメッセージボード画像を配置する */
		background-image: url("../images/news-sp.png");
		/* 背景画像を繰り返さないように指定 */
		background-repeat: no-repeat;
		background-size: contain;
		width: 334px;
		margin: 0 auto;
		/* 背景画像が常にお知らせboxの下部に配置されるように指定 */
		background-position: bottom;
		line-height: 1.6;
		/* 配下の要素は中央寄せ下揃えにする */
		text-align: center;
	}

	/* VIEW MOREの横に擬似要素で、「＞」をつける */
	a.viewmore::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印画像を背景画像として配置する */
		background-image: url("../images/arrow.png");
		background-size: contain;
		width: 16px;
		height: 16px;
		/* 上下は中央に、右から180pxになるように配置する */
		position: absolute;
		top: 6px;
		margin: auto;
		right: 64px;
	}

	/* VIEW MOREの横に擬似要素で、「＞」をつける */
	a.viewmore::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印画像を背景画像として配置する */
		background-image: url("../images/arrow.png");
		background-size: contain;
		width: 16px;
		height: 16px;
		/* 上下は中央に、右から180pxになるように配置する */
		position: absolute;
		top: 6px;
		margin: auto;
		right: 65px;
	}
}

@media screen and (max-width: 375px) {
	.main-visual {
		background-image: url("../images/mainvisual-sp.jpg");
	}
}

/** -----------------------------------
    私たちについて
-------------------------------------**/
.about {
	/* 背景を配置する */
	background-image: url(../images/background-orange.png);
	background-repeat: repeat;
}

.about-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* コンテンツのハートの画像を非表示にする */
.about-heart {
	display: none;
}

/* 擬似要素で、ハートのイラストをつける */
.about-h2::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* ハートのイラストを配置する */
	background-image: url("../images/about-heart.png");
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -70px;
	right: 0px;
	animation: 3s fuwafuwa infinite;
}

.about-col2 {
	/* 横並びにする */
	display: flex;
	/* 左右に散らすように水平方向の揃え方を指定する */
	justify-content: space-between;
}

.about-col2 .item {
	/* 要素と要素の間の余白が80pxで左右の要素の横幅が等しくなるように設定する */
	width: calc((100% - 80px)/2);
}

br.sp-only {
	display: none;
}

p.vision-1,
p.vision-2 {
	font-size: 42px;
	font-family: 'Rounded Mplus 1c', sans-serif;
	font-weight: 700;
	color: #7e4c47;
}

p.vision-2 {
	padding-left: 1em;
}

.p-about {
	font-size: 18px;
	font-weight: 500;
	}	


.about span {
	color: #fe6a77;
	transition-property: color;
	transition: .8s;
}

.about span {
	animation-name: scrollAnimation;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}

/** -------- PC〜スマホ -------- **/
@media screen and (max-width: 1199px) {
	.about-col2 {
    display: flex;
    justify-content: space-evenly;
	}

	.about-col2 .item {
    width: 420px;
	}

	p.pc-only {
		display: block;
	}

	p.sp-only {
		display: none;
	}

	/* 世界をやさしさでつつむ。のキャッチコピー */
	p.vision-1,
	p.vision-2 {
		font-size: 32px;
	}
}


/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	p.pc-only {
		display: none;
	}

	p.sp-only {
		display: block;
		font-size: 22px;
	}

	.p-about {
		font-size: 16px;
	}	

	br.pc-only {
		display: none;
	}
	
	br.sp-only {
		display: block;
	}

	/* 擬似要素のハートの画像を非表示にする */
	.about-h2::after {
		display: none;
	}

	/* コンテンツのハートを表示する*/
	.about-heart {
		display: block;
		margin: 0 auto;
		width: 100px;
		animation: 3s fuwafuwa infinite;
	}

	.about {
		padding-top: 80px;
	}

	/* 縦並びにする */
	.about-col2 {
		display: block;
	}

	.about-col2 .item {
		/* calcで計算していた横幅は全て横いっぱいにひろがるようにする */
		width: 100%;
		text-align: center;
	}

	br {
		display: block;
	}

	.about-col2 .item {
		margin: 20px auto;
	}
}

/** -----------------------------------
    事業について
-------------------------------------**/
.business .tablet-only,
.business .sp-only,
.business-baby-train {
	display: none;
}

.business .pc-only {
	display: block;
}

.business-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* 擬似要素で、赤ちゃんと列車のイラストをつける */
.business-h2::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 赤ちゃんと列車のイラストを配置する */
	background-image: url("../images/baby-train.png");
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -70px;
	left: 8%;
	animation: 3s fuwafuwa infinite;
}

/* 擬似要素で、ハートのイラストをつける */
.business-h2::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* ハートのイラストを配置する */
	background-image: url("../images/business-heart.png");
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -60px;
	right: 8%;
	animation: 3s fuwafuwa infinite;
}


.business-col2-1,
.business-col2-2 {
	/* 横並びにする */
	display: flex;
	/* 左右に散らすように水平方向の揃え方を指定する */
	justify-content: space-between;
	margin-bottom: 54px;
}

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

.item-1,
.item-2,
.item-3,
.item-4 {
	margin-top: 80px;
	position: relative;
	z-index: -1;
}

.item-1-img,
.item-2-img,
.item-3-img,
.item-4-img {
	position: absolute;
	top: -90px;
	left: -60px;
}


/* ----------------------------------
	ベビー用品開発事業 
---------------------------------- */
.baby-products {
	display: block;
	width: 480px;
	/* 背景を配置する */
	background-image: url(../images/baby-products-background.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* 背景画像が常に中央に配置されるように指定 */
	background-position: center;
	z-index: -1;
}

/* ----------------------------------
	フォトブック事業 
---------------------------------- */
/** -------- PC -------- **/
.photobook-products {
	display: block;
	width: 480px;
	/* 背景を配置する */
	background-image: url(../images/photobook-background.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* 背景画像が常に中央に配置されるように指定 */
	background-position: center;
}

/* ----------------------------------
	コミュニティ事業 
---------------------------------- */
.community-products {
	display: block;
	width: 480px;
	/* 背景を配置する */
	background-image: url(../images/community-background.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* 背景画像が常に中央に配置されるように指定 */
	background-position: center;
}

/* ----------------------------------
	これからの事業 
---------------------------------- */
.future-products {
	display: block;
	width: 480px;
	/* 背景を配置する */
	background-image: url(../images/future-background.png);
	background-repeat: no-repeat;
	background-size: contain;
	/* 背景画像が常に中央に配置されるように指定 */
	background-position: center;
}
/* ----------------------------------
	ベビー用品開発事業&コミュニティ事業 
---------------------------------- */
	/* h4文言を配置する */
	h4.h4-message-baby-products, 
	h4.h4-message-community-products {
		padding-top: 60px;
		padding-bottom: 24px;
		padding-left: 284px;
		padding-right: 24px;
	}

	/* p文言を画像と文言を囲うdivに対して配置する */
	p.p-message-baby-products,
	p.p-message-community-products {
		padding-left: 60px;
		padding-right: 44px;
		padding-bottom: 64px;
	}

/* ----------------------------------
	フォトブック事業&これからの事業 
---------------------------------- */
	/* h4文言を配置する */
	h4.h4-message-photobook-products,
	h4.h4-message-future-products {
		padding-top: 60px;
		padding-bottom: 24px;
		padding-right: 24px;
		padding-left: 284px;
	}

	/* p文言を画像と文言を囲うdivに対して配置する */
	p.p-message-photobook-products,
	p.p-message-future-products {
		padding-left: 60px;
		padding-right: 44px;
		padding-bottom: 64px;
	}

/** -------- PC〜スマホ -------- **/
@media screen and (max-width: 1199px) {
		.business .pc-only,
		.business .sp-only {
			display: none;
		}

		.business .tablet-only {
			display: block;
		}
		
		.baby-products,
		.photobook-products,
		.community-products,
		.future-products {
			width: 340px;
			margin-top: 70px;
		}

		p.p-message-baby-products,
		p.p-message-community-products {
			padding-left: 48px;
			font-size: 14px;
		}

		p.p-message-photobook-products,
		p.p-message-future-products {
			padding-left: 48px;
			font-size: 14px;
		}

		/* h4文言を配置する */
		h4.h4-business {
			text-align: center;
			padding: 62px 0px 0px 0px;
			margin-bottom: 12px;
		}

		p.p-message-photobook-products {
			/* 行が少ないため、1文字分余白をつける */
			padding-bottom: 89.2px;
		}
		.business-col2-1,
		.business-col2-2 {
			/* 横並びにする */
			display: flex;
			/* 左右に散らすように水平方向の揃え方を指定する */
			justify-content: space-evenly;
		}
		.business h4 {
			font-size: 18px;
		}
		.business p {
			font-size: 14px;
		}
		.item-1-img,
		.item-2-img,
		.item-3-img,
		.item-4-img {
			position: absolute;
			top: -90px;
			left: 0px;
		}

		/* ----------------------------------
			ベビー用品開発事業&コミュニティ事業 
		---------------------------------- */
		/* h4文言を配置する */
		h4.h4-message-baby-products, 
		h4.h4-message-community-products {
			padding-top: 50px;
			margin-bottom: 12px;
		}

		/* p文言を画像と文言を囲うdivに対して配置する */
		p.p-message-baby-products,
		p.p-message-community-products {
			padding-bottom: 64px;
		}

		/* ----------------------------------
			フォトブック事業&これからの事業 
		---------------------------------- */
		/* h4文言を配置する */
		h4.h4-message-photobook-products,
		h4.h4-message-future-products {
			padding-top: 50px;
			margin-bottom: 12px;
		}

		/* p文言を画像と文言を囲うdivに対して配置する */
		p.p-message-photobook-products,
		p.p-message-future-products {
			padding-bottom: 64px;
		}
	}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	.business .pc-only,
	.business .tablet-only,
	.business-h2::before,
	.business-h2::after {
		display: none;
	}

	.business .sp-only {
		display: block;
	}

	.business-baby-train {
		/* コンテンツの赤ちゃんと列車のイラストを表示する */
	display: block;
	width: 100px;
	margin: 0 auto;
	animation: 3s fuwafuwa infinite;
	}

	/* 縦並びにする */
	.business-col2-1,
	.business-col2-2 {
		display: block;
		margin-bottom: 0px;
	}

	.business-col2 .item,
	.business-col2-2.item {
		/* calcで計算していた横幅は全て横いっぱいにひろがるようにする */
		width: 100%;
	}

	.item-1,
	.item-2,
	.item-3,
	.item-4 {
		position: static;
		text-align: center;
		margin: 0 auto;
	}

	.item-1-img,
	.item-2-img,
	.item-3-img,
	.item-4-img {
		display: block;
		position: static;
		margin: 0 auto;
	}

	.baby-products {
		text-align: center;
		margin: 0 auto;
	}

	.business-h2 {
		/* 擬似要素のposition配置の基準とする */
		position: relative;
	}

	.baby-products {
		background-image: url(../images/baby-products-background-sp.png);
		width: 335px;
		background-repeat: no-repeat;
		/* 背景画像が常に中央に配置されるように指定 */
		background-position: top;
		text-align: center;
		margin: 0 auto;
		margin-top: -40px;
	}

	.photobook-products {
		background-image: url(../images/photobook-background-sp.png);
		width: 335px;
		background-repeat: no-repeat;
		/* 背景画像が常に中央に配置されるように指定 */
		background-position: top;
		text-align: center;
		margin: 0 auto;
		margin-top: -40px;
	}

	.community-products {
		background-image: url(../images/community-background-sp.png);
		width: 335px;
		background-repeat: no-repeat;
		/* 背景画像が常に中央に配置されるように指定 */
		background-position: top;
		text-align: center;
		margin: 0 auto;
		margin-top: -40px;
	}

	.future-products {
		background-image: url(../images/future-background-sp.png);
		width: 335px;
		background-repeat: no-repeat;
		/* 背景画像が常に中央に配置されるように指定 */
		background-position: top;
		text-align: center;
		margin: 0 auto;
		margin-top: -40px;
	}

	/* h4文言を配置する */
	h4.h4-business {
		font-size: 18px;
		text-align: center;
		padding: 50px 0px 0px 0px;
		margin-bottom: 12px;
	}

	/* p文言を画像と文言を囲うdivに対して配置する */
	p.p-business {
		padding: 0px 0px 64px 0px;
		margin-bottom: 0px;
	}

	p.p-message-photobook-products {
		/* 行が少ないため、1文字分余白をつける */
		padding-bottom: 89.2px;
	}
}

/** -----------------------------------
    メンバー紹介
-------------------------------------**/
.slider,
.member-heart {
	display: none;
}

.member-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* 擬似要素で、ハートの風船の画像を表示する */
.member-h2::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* ハートの風船の画像を配置する */
	background-image: url("../images/member-heart.png");
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -80px;
	left: 16%;
	animation: 3s fuwafuwa infinite;
}

.member {
	/* 背景を配置する */
	background-image: url(../images/background-orange.png);
	background-repeat: repeat;
}

.member-col4 {
	/* 4カラムを横並びにする */
	display: flex;
	/* 横に均等に配置する */
	justify-content: space-between;
}

.member-col4 .item {
	/* 横幅を余白を除いて指定する */
	width: calc((100% - 0px) / 4);
}

.p-member {
	/* pを親要素の中で中央揃えにする */
	text-align: center;
}

/* それぞれのメンバーの画像と文言を囲うdixを位置の基準とする */
.member-image {
	position: relative;
}

/* メッセージの画像を一番手前に持ってくる */
.message-img {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 2;
}

/* ホバー前の社員画像 */
.member-img {
	margin-top: 48px;
}
/* ホバー時の画像を透明にする */
/* .member-imageのdivで囲まれた.member-img-hover */
.member-image .member-img-hover {
	position: absolute;
	opacity: 0;
	transition: .5s;
	left: 0;
	top: 48px;
}

/* メンバーのブロックをホバー時にホバー時の画像を表示する */
.member-image:hover .member-img-hover {
	opacity: 1;
}

/* メンバーの紹介文言を配置する */
.member-p {
	margin-top: 10px;
}

/** -------- PC〜スマホ -------- **/
@media screen and (max-width: 1199px) {
	/* 写真と肩書きは横並び */
	.slider {
		display: block;
	}

	.member-col4{
		display: none;
	}
	.slick-prev:before,
	.slick-next:before {
		color: #ffb1ae;
	}

	.slider-img img {
		width: 100%;
	}

	.slider {
		margin: 0 auto;
		max-width: 760px;
	}

	/* 下のドットを中央寄せにする */
	.slide-dots {
		margin: 0;
		padding: 0;
		text-align: center;
	}

	/* 下のドットを横並びにする */
	.slide-dots li {
		display: inline-block;
		margin: 0 8px;
	}

	.slide-dots li button {
		position: relative;
		text-indent: -9999px;
	}

	.slide-dots li button::before {
		background-image: url(../images/dot-nomal.png);
		background-repeat: no-repeat;
		background-size: contain;
		content: "";
		cursor: pointer;
		height: 8px;
		left: 0;
		margin: auto;
		position: absolute;
		right: 0;
		top: 24px;
		width: 8px;
		opacity: 0.8;
	}

	/* 活性化しているドットは大きく濃く表示する */
	.slide-dots li.slick-active button::before {
		background-image: url(../images/dot-active.png);
	}

	/* 矢印を配置する */
	.slick-arrow {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.prev-arrow {
		width: 50px;
		left: -24px;
		top: -162px;
		z-index: 10;
	}

	.next-arrow {
		width: 50px;
		right: -24px;
		top: -162px;
	}
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
/* 擬似要素のハートの風船を非表示にする */
	.member-h2::before {
		display: none;
	}

/* コンテンツのハートの風船の画像を表示する */
	.member-heart {
		display: block;
		margin: 0 auto;
		width: 68px;
		transform: rotate(-10deg);
		animation: 3s fuwafuwa infinite;
	}

		/* 写真と肩書きは横並び */
		.slider {
			display: block;
		}

		/* ドット */
		.slider {
			margin: 0 auto;
			max-width: 500px;
			width: 80%;
		}
	
		/* 下のドットを中央寄せにする */
		.slide-dots {
			margin: 0;
			padding: 0;
			text-align: center;
		}
	
		/* 下のドットを横並びにする */
		.slide-dots li {
			display: inline-block;
			margin: 0 8px;
		}
	
		.slide-dots li button {
			position: relative;
			text-indent: -9999px;
		}
	
		.slide-dots li button::before {
			background-image: url(../images/dot-nomal.png);
			background-repeat: no-repeat;
			background-size: contain;
			content: "";
			cursor: pointer;
			height: 8px;
			left: 0;
			margin: auto;
			position: absolute;
			right: 0;
			top: 24px;
			width: 8px;
			opacity: 0.8;
		}
	
		/* 活性化しているドットは大きく濃く表示する */
		.slide-dots li.slick-active button::before {
			background-image: url(../images/dot-active.png);
		}
	
		/* 矢印を配置する */
		.slick-arrow {
			position: absolute;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	
		.prev-arrow {
			width: 50px;
			left: -28px;
			top: -162px;
			z-index: 10;
		}
	
		.next-arrow {
			width: 50px;
			right: -28px;
			top: -162px;
		}

	.member .view-more-button{
	margin-top: 32px;
	}

	.member-p {
		margin-top: 30px;
	}
}
/** -------- スマホ -------- **/
@media screen and (max-width: 375px) {
	/* 矢印の調整 */
	.prev-arrow {
		width: 50px;
		left: -5px;
		top: -162px;
		z-index: 10;
	}

	.next-arrow {
		width: 50px;
		right: -10px;
		top: -162px;
	}
}
	
/** -----------------------------------
    働く環境
-------------------------------------**/
.benefit-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* コンテンツの家の画像を非表示にする */
.benefit-house {
	display: none;
}

/* 擬似要素で、家のイラストをつける */
.benefit-h2::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 家のイラストを配置する */
	background-image: url("../images/benefit-house.png");
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -70px;
	right: 8%;
	animation: 3s fuwafuwa infinite;
}

.benefit-col3 .item {
	width: 320px;
	text-align: center;
}

/* アイコンのサイズを指定する */
.icon-benefit {
		max-width: 164px;
		margin: 0 auto;
}

.benefit-col3 {
	/* 3カラムを横並びにする */
	display: flex;
	text-align: center;
	justify-content: center;
}

/** -------- PCからスマホ -------- **/
@media screen and (max-width: 1199px) {
	.benefit-col3 .item {
		width: 240px;
		text-align: center;
	}
	
	.h4-benefit{
		font-size: 18px;
	}

	/* アイコンのサイズを指定する */
	.icon-benefit {
			max-width: 120px;
			margin: 0 auto;
	}
}

	/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	/* アイコンのサイズを指定する */
	.icon-benefit {
		max-width: 120px;
	}

	/* 縦並びにする */
	.benefit-col3 {
		display: block;
	}

	.benefit-col3 .item {
		/* calcで計算していた横幅は全て横いっぱいにひろがるようにする */
		width: 100%;
		text-align: center;
		padding-bottom: 40px;
	}

	.h4-benefit {
		padding: 20px 0px;
	}

		/* コンテンツの家の画像を表示する */
	.benefit-house {
		display: block;
		margin: 0 auto;
		width: 100px;
		animation: 3s fuwafuwa infinite;
	}

	/* 擬似要素の家の画像を非表示にする*/
	.benefit-h2::after {
		display: none;
	}
}

/** -----------------------------------
    キャリア支援
-------------------------------------**/
.career {
	/* 背景を配置する */
	background-image: url(../images/background-orange.png);
	background-repeat: repeat;
}

/* h３の下の余白を打ち消す */
.career h3 {
	margin-bottom: 0px;
}

.career-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* コンテンツの積み木の画像を非表示にする */
.career-block {
	display: none;
}

/* 擬似要素で、積み木のイラストをつける */
.career-h2::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 積み木のイラストを配置する */
	background-image: url("../images/career-block.png");
	transform: rotate(0deg);
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -70px;
	left: 8%;
	animation: 3s fuwafuwa infinite;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
/* 擬似要素の積み木の画像を非表示にする */
.career-h2::before {
	display: none;
}

/* コンテンツの積み木の画像を表示する */
.career-block {
		display: block;
		margin: 0 auto;
		width: 100px;
		animation: 3s fuwafuwa infinite;
	}
}

/** -----------------------------------
    募集職種
-------------------------------------**/
.job-list-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* コンテンツのべビーカーの画像を非表示にする */
.job-list-stroller{
	display: none;
}

/* 擬似要素で、ベビーカーの画像をつける */
.job-list-h2::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* ベビーカーのイラストを配置する */
	background-image: url("../images/job-list-stroller.png");
	transform: rotate(-5deg);
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -70px;
	right: 8%;
	animation: 5s yurayura infinite;
}

/* リンクボタンの親要素の横幅を指定 */
.job-list-col3 .item,
.job-list-col2 .item {
	width: 320px;
}

/* リンクボタンを作成 */
.button-job-list {
	/* ブロック表示にする */
	display: block;
	/* 下線を消す */
	text-decoration: none;
	/* 横幅と高さを設定する */
	width: 100%;
	/* 背景を設定する */
	background-image: url(../images/job-list-background.png);
	/* 文字色を設定する */
	color: #7e4c47;
	/* 文字サイズを設定する */
	font-size: 18px;
	/* ウェイトを設定する */
	font-weight: 700;
	/* ボタンの中央に文字が配置されるようにする */
	text-align: center;
	/* line-heightで高さを指定する */
	line-height: 80px;
	margin-bottom: 36px;
}

/* リンクボタンを作成 */
.button-job-list:hover {
	/* ブロック表示にする */
	display: block;
	/* 下線を消す */
	text-decoration: none;
	/* 横幅と高さを設定する */
	width: 100%;
	/* 背景を設定する */
	background-image: url(../images/job-list-background-hover.png);
	/* 文字色を設定する */
	color: #7e4c47;
	/* 文字サイズを設定する */
	font-size: 18px;
	/* ウェイトを設定する */
	font-weight: 700;
	/* ボタンの中央に文字が配置されるようにする */
	text-align: center;
	/* line-heightで高さを指定する */
	line-height: 80px;
	transition: 0.8s;
}

.job-list-col3 {
	/* カラムを横並びにする */
	display: flex;
	/* 横に均等に配置する */
	justify-content: center;
	/* 要素の間に隙間を作る */
	gap: 40px;
}

.job-list-col2 {
	/* カラムを横並びにする */
	display: flex;
	/* 横に均等に配置する */
	justify-content: center;
	/* 要素の間に隙間を作る */
	gap: 80px;
}

.job-list-col3.item {
	text-align: center;
}

.job-list-col2.item {
	text-align: center;
}

/* ボタンの中のリンクを擬似要素で配置 */
a.button-job-list {
	position: relative;
	z-index: 1;
}

a.button-job-list::after {
	content: "";
	background-image: url("../images/job-list-arrow.png");
	display: block;
	position: absolute;
	margin: auto;
	left: 260px;
	bottom: 32px;
	background-repeat: no-repeat;
	background-size: contain;
	width: 20px;
	height: 20px;
}

/** -------- PC〜スマホ -------- **/
@media screen and (max-width: 1199px) {
	/* 縦並びにする */
	.job-list-col3,
	.job-list-col2 {
		display: block;
	}
	/* 中央揃えにする */
	.job-list-col3 .item,
	.job-list-col2 .item {
		margin: 0 auto;
	}
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {

	/* 擬似要素のべビーカーの画像を非表示にする */
	.job-list-h2::after {
		display: none;
	}

	/* コンテンツのベビーカーの画像を表示する*/
	.job-list-stroller {
		display: block;
		width: 100px;
		margin: 0 auto;
		animation: 5s yurayura infinite;
	}

	.job-list-col3 .item,
	.job-list-col2 .item {
		max-width: 280px;
		width: 100%;
		margin: 0 auto;
	}

	/* リンクボタンを作成 */
	.button-job-list {
		/* ブロック表示にする */
		display: block;
		/* 下線を消す */
		text-decoration: none;
		/* 横幅と高さを設定する */
		width: 100%;
		/* 背景を設定する */
		background-image: url(../images/job-list-background-sp.png);
		/* 文字色を設定する */
		color: #7e4c47;
		/* 文字サイズを設定する */
		font-size: 16px;
		/* ウェイトを設定する */
		font-weight: 700;
		/* ボタンの中央に文字が配置されるようにする */
		text-align: center;
		/* line-heightで高さを指定する */
		line-height: 60px;
		margin-bottom: 36px;
	}

	/* リンクボタンを作成 */
	.button-job-list:hover {
		/* ブロック表示にする */
		display: block;
		/* 下線を消す */
		text-decoration: none;
		/* 横幅と高さを設定する */
		width: 100%;
		/* 背景を設定する */
		background-image: url(../images/job-list-background-hover-sp.png);
		/* 文字色を設定する */
		color: #7e4c47;
		/* 文字サイズを設定する */
		font-size: 16px;
		/* ウェイトを設定する */
		font-weight: 700;
		/* ボタンの中央に文字が配置されるようにする */
		text-align: center;
		/* line-heightで高さを指定する */
		line-height: 60px;
		transition: 0.8s;
	}

	/* ボタンの中のリンクを擬似要素で配置 */
	a.button-job-list {
		position: relative;
		z-index: 1;
	}

	a.button-job-list::after {
		content: "";
		background-image: url("../images/job-list-arrow.png");
		display: block;
		position: absolute;
		margin: auto;
		left: 86%;
		bottom: 38%;
		background-repeat: no-repeat;
		background-size: contain;
		width: 16px;
		height: 16px;
	}

	.job-list .view-more-button {
		margin-top: 64px;
	}
}

/** -----------------------------------
    選考フロー
-------------------------------------**/
/* SP用のフロー図と矢印を非表示 */
.flow-col3, 
.arrow-3 {
	display: none;
}

.flow {
	/* 背景を配置する */
	background-image: url(../images/background-orange.png);
	background-repeat: repeat;
}

.flow-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* コンテンツの木馬の画像を非表示にする */
	.flow-horse{
		display: none;
	}

/* 擬似要素で、木馬のイラストをつける */
.flow-h2::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 木馬のイラストを配置する */
	background-image: url("../images/flow-horse.png");
	/* transform: rotate( 8deg ); */
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -70px;
	left: 8%;
	animation: 4s yurayura infinite;
}

/* アイコンのサイズを指定する */
.icon-flow {
	max-width: 160px;
	max-height: 80x;
	margin: 0 auto;
}

.flow-col7 {
	/* 4カラムを横並びにする */
	display: flex;
	justify-content: center;
	/* 中央寄せにする */
	text-align: center;
}

.flow-col7 .item {
	width: 180px
}

.flow .arrow-1 {
	width: 120px;
	padding-top: 200px;
	text-align: center;
}

.flow-arrow{
	width: 40px;
}
.flow-col2-1,
.flow-col2-2 {
	display: none;
}

/** -------- PC〜スマホ -------- **/
@media screen and (max-width: 1199px) {
/* PC用のフローは非表示 */
	.flow.pc-only {
		display: block;
	}
	
	.flow.sp-only {
		display: none;
	}

	.flow .item {
		width: 140px;
	}

	.flow .arrow-1 {
		width: 60px;
		padding-top: 170px;
		text-align: center;
	}
	.flow-arrow {
		width: 30px;
	}

	/* アイコンのサイズを指定する */
	.icon-flow {
		max-width: 80px;
		margin: 0 auto;
	}
	.flow-col4 {
		justify-content: center;
		gap: 84px;
		}

	/* 擬似要素で、矢印のイラストをつける */
	.flow-h4-1::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印のイラストを配置する */
		background-image: url("../images/flow-arrow.png");
		position: absolute;
		background-size: contain;
		width: 26px;
		top: 160px;
		left: 140%;
	}

	.flow-h4-2::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印のイラストを配置する */
		background-image: url("../images/flow-arrow.png");
		position: absolute;
		background-size: contain;
		width: 26px;
		top: 160px;
		left: 136%;
	}

	.flow-h4-3::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 矢印のイラストを配置する */
		background-image: url("../images/flow-arrow.png");
		position: absolute;
		background-size: contain;
		width: 26px;
		top: 160px;
		left: 124%;
	}
	}

/** -------- PC〜スマホ②------- **/
@media screen and (max-width: 875px) {
	.flow .pc-only {
		display: none;
	}
	.flow-h4-2::after {
		display: none;
	}
	
	.flow-h4-3::after {
		display: none;
	}

	.flow-col3 {
	/* 3カラムを横並びにする */
	display: flex;
	justify-content: center;
	/* 中央寄せにする */
	text-align: center;
	}

	.flow-col3 .arrow-1 {
		padding-top: 100px;
	}

	/* 中央の斜めの矢印を配置する */
	.arrow-3 {
		display: block;
		text-align: center;
		margin: 16px auto;
	}


	.flow-col2-1 .item {
		width: 108px;
	}

	.flow-col2-2 .item {
		width: 108px;
	}

	.flow-h4-1::after {
		display: none;
	}

	.flow-h4-2::after {
		display: none;
	}

	.flow-h4-3::after {
		display: none;
	}

	.flow-h4-4::after {
		display: none;
	}

	h4.h4-flow-step {
		padding: 0;
	}

	p.p-flow-phase {
		margin: 0;
		padding: 0 0 16px 0;
	}

	.flow-h4-1,
	.flow-h4-2,
	.flow-h4-3 {
		position: relative;
	}
}

/** -------- PC〜スマホ②------- **/
@media screen and (max-width: 768px) {
	/* 擬似要素の木馬の画像を非表示にする */
	.flow-h2::before {
		display: none;
	}

	/* 擬似要素で、木馬のイラストをつける */
	.flow-horse {
	display: block;
	margin: 0 auto;
	width: 100px;
	animation: 4s yurayura infinite;
	}
}

/** -----------------------------------
    求める人物像
-------------------------------------**/
	/* 赤ちゃんの画像とコンテンツのお母さんと赤ちゃんの写真を非表示にする */
	.ideal-candidate-content,
	.ideal-candidate-baby {
		display: none;
	}

.ideal-candidate-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* h３の下の余白を打ち消す */
.ideal-candidate h3 {
	margin-bottom: 0px;
}

/* 擬似要素で、赤ちゃんのイラストをつける */
.ideal-candidate-h2::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 赤ちゃんのイラストを配置する */
	background-image: url("../images/ideal-candidate-baby.png");
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -60px;
	right: 8%;
	animation: 3s fuwafuwa infinite;
}

/* 擬似要素で、お母さんと赤ちゃんの写真をつける */
.ideal-candidate-h2::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 写真を配置する */
	background-image: url("../images/ideal-candidate-img.png");
	position: absolute;
	background-size: contain;
	width: 220px;
	height: 220px;
	top: 104px;
	left: 0%;
}

.span-ideal-candidate {
	color: #fe6a77;
	transition-property: color;
	transition: 3s;
	animation-name: scrollAnimation;
	animation-duration: 3s;
	animation-timing-function: ease;
	animation-iteration-count: 1;
}

/** -------- PCからスマホ -------- **/
@media screen and (max-width: 884px) {
	/* 擬似要素のお母さんと赤ちゃんの写真の大きさを調整する */
	.ideal-candidate-h2::before {
		width: 160px;
		top: 170px;
		left:4%;
	}
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	/* コンテンツのお母さんと赤ちゃんの写真を表示する */
		/* 擬似要素の赤ちゃんの画像とお母さんと赤ちゃんの写真を非表示にする */
		.ideal-candidate-h2::after,
		.ideal-candidate-h2::before {
			display: none;
		}

	.ideal-candidate-content{
		display: block;
		text-align: center;
	}

	/* コンテンツの赤ちゃんの画像を表示する */
	.ideal-candidate-baby {
		display: block;
		margin: 0 auto;
		width: 100px;
		animation: 3s fuwafuwa infinite;
	}

	/* 写真を中央に寄せる*/
	.ideal-candidate-img {
		width: 160px;
		margin: 24px auto 0;
	}
}

/** -----------------------------------
			エントリー
	-------------------------------------**/
.entry {
	/* 背景を配置する */
	background-image: url(../images/background-orange.png);
	background-repeat: repeat;
	padding-bottom: 80px;
}

/* h３の下の余白を打ち消す */
.entry h3 {
	margin-bottom: 0px;
}

.entry-h2 {
	/* 擬似要素のposition配置の基準とする */
	position: relative;
}

/* コンテンツのハートの風船を非表示にする */
.entry-heart {
	display: none;
}

/* 擬似要素で、ハートの風船の画像をつける */
.entry-h2::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* ハートのイラストを配置する */
	background-image: url("../images/entry-heart.png");
	/* transform: rotate( 8deg ); */
	position: absolute;
	background-size: contain;
	width: 160px;
	height: 160px;
	top: -80px;
	left: 16%;
	animation: 3s fuwafuwa infinite;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 768px) {
	/* 擬似要素のハートの風船の画像を非表示にする */
	.entry-h2::before {
		display: none;
	}

	/* コンテンツのハートの風船を表示する */
	.entry-heart {
		display: block;
		width: 68px;
		margin: 0 auto;
		animation: 3s fuwafuwa infinite;
	}

	.entry-button {
		/* 中央寄せにする */
		text-align: center;
	}
}

/** -----------------------------------
    フッター
-------------------------------------**/

#footer {
	background-color: #feeed7;
	display: block;
}

.footer-link-sp-col,
.copyright-sp {
	display: none;
}

.footer-col2-pc {
	display: flex;
	justify-content: space-between;
	padding-top: 70px;
}

.sns-link {
	margin: 0 auto;
}

.sns-link li {
	/* リストを横並びにする */
	display: inline;
	/* リストの間隔を調整する */
	margin-left: 16px;
	margin-right: 16px;
}


.footer-link a,
.copyright {
	font-size: 14px;
	line-height: 1.8;
	color: #7e4c47;
	padding-bottom: 10px;
	text-decoration: none;
}

.copyright{
	padding: 24px 0 32px 0;
}

.footer-link li {
	display: inline;
	/* 擬似要素のposition配置の基準とする */
	position: relative;
	text-align: center;
	width: 100px;
	margin: 0 8px;
	word-break: keep-all;
}

/* 擬似要素で、波線をつける */
.footer-link1::before,
.footer-link2::before,
.footer-link3::before,
.footer-link4::before {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 線を配置する */
	background-image: url("../images/footer-line.png");
	position: absolute;
	background-size: contain;
	/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
	width: 5px;
	height: 20px;
	top: 2px;
	left: -12px;
}

.footer-link5::after {
	content: "";
	/* ブロック表示にする */
	display: block;
	/* 線を配置する */
	background-image: url("../images/footer-line.png");
	position: absolute;
	background-size: contain;
	/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
	width: 5px;
	height: 20px;
	top: 2px;
	right: -10px;
}

.footer-link a:hover,
.sns-link a:hover {
	opacity: 0.5;
	transition: 0.6s;
}

.pagetop-sp-box,
.sns-footer-sp {
	display: none;
}

/** -------- スマホ -------- **/
@media screen and (max-width: 1199px) {

	.pagetop,
	.footer-col2-pc .sns-link {
		display: none;
	}

	.pagetop-sp-box,
	.sns-footer-sp {
		display: block;
	}

	.sns-footer-sp {
		padding: 64px 0 32px 0;
	}

	.footer {
		position: relative;
	}

	.pagetop-sp-box {
		position: absolute;
		top: -46px;
		left: calc(50% - 50px);
		margin-bottom: 20px;
	}

	.pagetop-sp {
		display: block;
		height: 100px;
		width: 100px;
		margin: 0 auto;
		z-index: 980;
		background-image: url("../images/top-img.png");
		background-size: contain;
		background-repeat: no-repeat;
		background-position: 0px, 0px;
		text-decoration: none;
		text-align: center;
	}

	.pagetop-sp p {
		display: inline-block;
		padding-bottom: 6px;
		color: #FFFFFF;
		font-size: 16px;
		margin-right: 6px;
		margin-top: 28px;
		font-family: 'Montserrat', sans-serif;
		font-weight: 700;

	}

	/* 未訪問 */
	.pagetop-sp:link {
		opacity: 1;
	}

	/* 訪問済み*/
	.pagetop-sp:visited {
		opacity: 1;
	}

	/* ホバー時 */
	.pagetop-sp:hover {
		opacity: 0.5;
	}

	/* アクティブなリンク */
	.pagetop-sp:active {
		opacity: 0.5;
	}

	.footer-col2-pc {
		display: none;
	}

	.pagetop {
		display: none;
	}

	.footer-link-sp-col {
		display: inline;
	}

	/* Safari対応として、最後の文字を改行させない。 */
	.footer-link-sp-4{
		white-space: nowrap;
	}

	.copyright-sp {
		display: block;
		text-align: center;
	}

	.footer-link-sp-col {
		text-align: center;
	}

	.footer-link-sp-col ul {
		display: block;
	}

	.footer-link-sp-col li {
		margin: 0 8px 0 6px;
		display: inline-block;
		font-size: 14px;
	}

	/* 擬似要素で、波線をつける */
	/* footerのliをポジションの基準とする */
	.footer-link-sp-1,
	.footer-link-sp-2,
	.footer-link-sp-3,
	.footer-link-sp-4 {
		position: relative;
	}

	.footer-link-sp-1::before,
	.footer-link-sp-2::before,
	.footer-link-sp-3::before {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 線を配置する */
		background-image: url("../images/footer-line.png");
		position: absolute;
		background-size: contain;
		/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
		width: 5px;
		height: 20px;
		top: 2px;
		left: -11px;
	}
		
	.footer-link-sp-3::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 線を配置する */
		background-image: url("../images/footer-line.png");
		position: absolute;
		background-size: contain;
		/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
		width: 5px;
		height: 20px;
		top: 2px;
		right: -11px;
	}

	.sns-footer-sp {
		text-align: center;
		padding: 70px 0 24px 0;

	}

	.sns-link li {
		display: inline;
	}

	.copyright {
		text-align: center;
		padding-bottom: 68px;
	}
}
@media screen and (max-width: 768px) {
	.footer-link-sp-4::before {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 線を配置する */
		background-image: url("../images/footer-line.png");
		position: absolute;
		background-size: contain;
		/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
		width: 5px;
		height: 20px;
		top: 2px;
		left: -11px;
	}
}

@media screen and (max-width: 466px) {
	.footer-link-sp-4::before {
		display: none;
	}

.footer-link-sp-2::after {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 線を配置する */
		background-image: url("../images/footer-line.png");
		position: absolute;
		background-size: contain;
		/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
		width: 5px;
		height: 20px;
		top: 2px;
		right: -11px;
	}
}

@media screen and (max-width: 404px) {
.footer-link-sp-4::before {
		content: "";
		/* ブロック表示にする */
		display: block;
		/* 線を配置する */
		background-image: url("../images/footer-line.png");
		position: absolute;
		background-size: contain;
		/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
		width: 5px;
		height: 20px;
		top: 2px;
		left: -11px;
	}
}
@media screen and (max-width: 297px) {
	.footer-link-sp-1::after {
			content: "";
			/* ブロック表示にする */
			display: block;
			/* 線を配置する */
			background-image: url("../images/footer-line.png");
			position: absolute;
			background-size: contain;
			/* 幅が5pxの線であるため、横幅を5pxにすることで、始点を調整する */
			width: 5px;
			height: 20px;
			top: 2px;
			right: -11px;
		}
	
	.footer-link-sp-3::before {
		display: none;
	}
}


.footer {
	position: relative;
}

.pagetop-sp-box {
	position: absolute;
	top: -46px;
	left: calc(50% - 50px);
	margin-bottom: 20px;
}

.pagetop-sp {
	display: block;
	height: 100px;
	width: 100px;
	margin: 0 auto;
	z-index: 980;
	background-image: url("../images/top-img.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 0px, 0px;
	text-decoration: none;
	text-align: center;
}

.pagetop-sp p {
	display: inline-block;
	padding-bottom: 6px;
	color: #FFFFFF;
	font-size: 16px;
	margin-right: 6px;
	margin-top: 28px;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;

}

/* 未訪問 */
.pagetop-sp:link {
	opacity: 1;
}

/* 訪問済み*/
.pagetop-sp:visited {
	opacity: 1;
}

/* ホバー時 */
.pagetop-sp:hover {
	opacity: 0.8;
}

/* アクティブなリンク */
.pagetop-sp:active {
	opacity: 1;
}