@charset "UTF-8";
/** -----------------------------------------------
  共通
------------------------------------------------**/
body {
	/* background: color #e1e0dd; */
	background-color: #fcf6e9;
	font-weight: Light;
	font-size: 18px;
	line-height: 1.6;
	color: #491616;
	font-family:"Noto Sans JP","Yu Gothic", "游ゴシック",
	"YuGothic", "游ゴシック体", "Osaka", "Verdana",
	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
	"Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

.section-inner {
	width: 100%;
	max-width: 1040px;
	margin-top: 250px;
	margin-right: auto;
	margin-left: auto;
}

img {
	max-width: 100%;
}

h2.large:before {
	content: '';
	display: inline-block;
	width: 95px;
	height: 45px;
	background-image: url(../images/icon.png);
	background-size: contain;
	position: absolute;
	bottom: 145px;
}

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

	.section-inner {
		padding: 0 24px;
		margin-top: 75px;
		max-width: 350px;
	}
	
	.pc-only {
		display: none;
	}

	.sp-only {
		display: block;
	}

	.button-yellow {
		width: 140px;
	}

	h2.large:before {
		width: 50px;
		height: 20px;
		bottom: 70px;
	}
}


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

h2.large {
	display: flex;
	justify-content: center;
	font-weight: Medium;
	font-size: 38px;
	position: relative;
	margin-top: 50px;
	margin-bottom: 25px;
	
}

h3.medium {
	display: flex;
	justify-content: center;
	font-weight: SemiBold;
	font-size: 36px;
	line-height: 2.08;
	text-align: center;
}

p.subtitle {
	text-align: center;
	margin-bottom: 50px;
}

p.company-name {
	/* font-weight: Light; */
	font-size: 30px;
	margin: 10px 0 30px 0;
	text-align: center;
}

p.large {
	font-weight: Light;
	font-size: 24px;
}

p.text-membername {
	font-weight:Light;
	font-size: 20px;
	text-align: center;
	margin: 30px 0 15px 0;
}

p.text-light {
	font-weight: Light;
	font-size: 18px;
}

p.small {
	font-weight: Light;
	font-size: 16px;
}

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	h2.large {
		font-size: 18px;
		margin-top: 125px;
		margin-bottom: 13px;
	}
	
	h3.medium {
		font-size: 14px;
	}
	
	p.subtitle {
		font-size: 12px;
		margin-bottom: 30px;
	}
	
	p.company-name {
		font-size: 14px;
		margin: 18px 0 30px 0;
		text-align: center;
	}
	
	p.large {
		font-size: 12px;
	}
	
	p.text-membername {
		font-size: 14px;
		margin: 18px 0 13px 0;
	}
	
	p.text-light {
		font-size: 12px;
	}
	
	p.small {
		font-size: 10px;
	}
	}


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

.button-yellow {
	display: block;
	width: 250px;
	height: 60px;
	background-color: #f7f186;
	font-size: 20px;
	font-weight: bold;
	border-radius: 30px;
	text-align: center;
	line-height: 60px;
	z-index: 2;
	position: relative;
	margin-bottom: 0.2rem;
	padding: 1rem;
	color: #491616;
}

.button-yellow:before {
	position: absolute;
	inset: -5px 5px 5px -5px;
	border: 1px solid #491616;
	border-radius: 30px;
	content: '採用エントリー';
	text-decoration: none;
}

.button-blown  {
	display: block;
	width: 300px;
	height: 60px;
	background-color: #a38f91;
	font-size: 16px;
	font-weight: medium;
	border-radius: 30px;
	text-align: center;
	line-height: 60px;
	z-index: 2;
	position: relative;
	margin-bottom: 0.2rem;
	padding: 1rem;
	color: #fff;
	margin: 70px auto;
}


/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	.button-yellow {
		width: 140px;
		height: 35px;
		font-size: 11px;
		line-height: 35px;
	}

	.button-blown {
		width: 170px;
		height: 35px;
		font-size: 10px;
		line-height: 35px;
	}
	}


/* ------------------------------------------------
　　レイアウト
------------------------------------------------- */

.col-2 {
	display: flex;
	justify-content: center;
	margin-bottom: 70px;
}

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

.col-3 {
	display: flex;
	justify-content: space-between;
}

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


/* ------------------------------------------------
　　ヘッダー
------------------------------------------------- */

#header {
	background-color: #ead9bc;
	width: 100%;
	height: 90px;
	display: flex;
	justify-content: space-between;
	padding: 0 30px;
	position: fixed !important;
	top:0;
	z-index: 10;
	position: relative;
}

h1.header-logo:after {
	content: '採用サイト';
	font-size: 18px;
	display: flex;
	justify-content: center;
}

.header-logo {
	width: 210px;
}

.gnav-pc {
	display: flex;
}

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

ul.gnav-pc li {
	display: inline;
	margin-right: 20px;
	margin-bottom: 0;
}

ul.gnav-pc li a{
	color: #491616;
	text-decoration: none;
}

ul.gnav-pc li a:hover {
	color: #e9b6af;
}

#header .button-yellow {
	margin: auto 0;
}

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	/* .pc-only { */
	/* display: none; */
/* } */
	#header .sp-only {
	display: flex;
	align-items: center;
}

.burger {
	width: 40px;
	height: 40px;
	background-image: url(../images/burger.svg);
	background-size: 35px;
	background-position: center;
	background-repeat: no-repeat;
	/* margin: 0 0 0 30px; */
	border-radius: 4px;
	position: relative;
	z-index: 3;
	/* background-color: #e9b6af; */
}

.burger.is-active {
	background-image: url(../images/close.svg);
}

ul.menu {
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	margin: 0 auto;
	width: 100vw;
	height: 100vh;
	background-color:#fcf6e9;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 2;
	display: none;
}

ul.menu li {
	list-style: none;
}

ul.menu li a {
	color: #491616;
	text-decoration: none;
}

ul.menu li a:hover {
	color: #e9b6af;
}

.menu.is-active {
	display: flex;
}

h1.header-logo:after {
	font-size: 14px;
}

	.header-logo {
	width: 100px;
}
	.gnav-pc-wrap {
	display: none;
}
	.gnav-sp-wrap {
	display: flex;
	gap:5%;
}
	#menu-button {
	display: flex;
	align-items: center;
}
	.menu-button-inner span {
	display: block;
	height: 3px;
	width: 50px;
	margin-bottom: 10px;
	background-color: #491616;
}
}

/* ------------------------------------------------
　　メインビジュアル
------------------------------------------------- */

#mainvisual {
	/* vwだと縦スクロールバーを含めてしまう */
	width: 100%;
	height:100vh;
	background-image: url(../images/mv.jpg);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;

	/* 右下、黄色の丸見切れるように */
	/* →after使ったから不要 */
	overflow: hidden;

}

.copy-wrap {
	position: absolute;
	right: 180px;
	bottom: 105px;
	z-index: 3;
}

.maincopy {
	font-family:"Zen Maru Gothic","Noto Sans JP","Yu Gothic",
	"游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana",
	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
	"Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75;

	/* 縁取り文字 */
	color: #fff;
	text-shadow: 1px 1px 0 #491616,-1px -1px 0 #491616,
				-1px 1px 0 #491616,1px -1px 0 #491616,
				0px 1px 0 #491616,0 -1px 0 #491616,
				-1px 0 0 #491616,1px 0 0 #491616;
}

.subcopy {
	font-family:"Zen Maru Gothic","Noto Sans JP","Yu Gothic",
	"游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana",
	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
	"Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 60px;
	font-weight: bold;
	text-align: center;
	line-height: 1.75;
	position: relative;
}

#mainvisual .subcopy:before {
	content: '';
	position: absolute;
	top: -100px;
	left: 110px;
	z-index: -1;
	width: 320px;
	height: 320px;
	background-image: url(../images/circle-pg.png);
	background-size: contain;
}

#mainvisual .subcopy:after {
	content: '';
	position: absolute;
	top: -85px;
	right: -430px;
	z-index: -1;
	width: 500px;
	height: 500px;
	background-image: url(../images/circle-yellow.png);
	background-size: contain;
}

.circle-lp {
	position: absolute;
	width: 300px;
	height: 300px;
	top: 0px;
	left: 0px;
}

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	#mainvisual {
		width: 100%;
		height: 100vw;
		background-image: url(../images/mv-sp.jpg);
	}

	.copy-wrap {
		position: absolute;
		right: 40px;
		bottom: 25px;
		z-index: 3;
	}

	.maincopy {
		font-size: 25px;
		letter-spacing: 0;
	}
	.subcopy {
		font-size: 25px;
		letter-spacing: 0;
	}

	#mainvisual .subcopy:before {
		content: '';
		position: absolute;
		top: -45px;
		left: 50px;
		z-index: -1;
		width: 130px;
		height: 130px;
		background-image: url(../images/circle-pg.png);
		background-size: contain;
	}
	
	#mainvisual .subcopy:after {
		content: '';
		position: absolute;
		top: -40px;
		right: -170px;
		z-index: -1;
		width: 250px;
		height: 250px;
		background-image: url(../images/circle-yellow.png);
		background-size: contain;
	}
	
	.circle-lp {
		width: 115px;
		height: 115px;
	}
}



/* ------------------------------------------------
　　私たちについて(about)
------------------------------------------------- */

#about h2.large {
	margin-bottom: 50px;
}

#about p.text-light {
	line-height: 2.0;
}

#about .item {
	position: relative;
	width: 400px;
}

#about .item p.large {
	padding-top: 50px;
	text-align: center;
}


#about .item .card-img {
	width: 350px;
}

#about .item .card-img::before {
	content: '人事部部長　伊藤 小百合';
	position: absolute;
	width: 305px;
	height: 75px;
	background-color: #bed3c6;
	font-size: 18px;
	font-weight: normal;
	line-height: 75px;
	text-align: center;
	z-index: 3;	top:50px;
	box-shadow: 4px 4px 4px #a38f91cc;
	top:385px;
	left: 65px;
}

#about .button-blown:before {
	position: absolute;
	inset: -5px 5px 5px -5px;
	border: 1px solid #491616;
	border-radius: 30px;
	content: 'ミッション/バリューを見る';
	text-decoration: none;
}

.piyo {
	display: flex;
	align-items: center;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	
}

#about p.large {
	text-align: center;
	margin-top: 70px;
}

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	
	#about .item {
		width: 240px;
		margin-bottom: 30px;
		margin-left: auto;
		margin-right: auto;
	}

	#about .item .card-img {
		width: 150px;
		margin-left: auto;
		margin-right: auto;
	}

	#about .item .card-img::before {
		width: 150px;
		height: 35px;
		font-size: 10px;
		line-height: 35px;
		z-index: 3;
		box-shadow: 2px 2px 2px #a38f91cc;
		top:165px;
		right: 25px;
	}

	#about .item .span {
		display: block;
	}

	.piyo {
		width: 50px;
	}
	
	#about p.large {
		margin: 0 auto;
	}
	}



/* ------------------------------------------------
　　事業について(service)
------------------------------------------------- */

.card1 {
	position: relative;
}

.card2 {
	position: relative;
}

.card3 {
	position: relative;
}

.mst1 {
	width: 100px;
	position: absolute;
	z-index: 2;
	display: flex;
	top:-30px;
	left: 120px;
}

.mst2 {
	width: 100px;
	position: absolute;
	z-index: 2;
	display: flex;
	top:-20px;
	left: 120px;
}

.mst3 {
	width: 150px;
	position: absolute;
	z-index: 2;
	display: flex;
	top:-18px;
	left:95px;
}

#service .item {
	width: 330px;
}

#service p.text-light {
	margin: 30px auto 18px auto;
	text-align: center;
}

#service .button .button-blown  {
	width: 250px;
}

#service .button-blown:before {
	position: absolute;
	inset: -5px 5px 5px -5px;
	border: 1px solid #491616;
	border-radius: 30px;
	content: '詳しく見る';
	text-decoration: none;
}

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

#service p.subtitle span{
	display: block;
}	

#service .col-3 {
	display: block;
	margin: 0 auto;
	}

#service .item {
	width: 180px;
	margin: 0 auto;
}

#service p.text-light {
	margin-top: 18px;
	margin-bottom: 10px;
}

#service p.small {
	margin-bottom: 30px;
}

#service .button .button-blown  {
	width: 170px;
}
}
/* ------------------------------------------------
　　メンバーインタビュー(member)
------------------------------------------------- */

.grid-container {
	display: grid;
	grid-template-columns: 400px 400px;
	grid-template-rows: 600px 600px;
	gap: 200px;
	justify-content: center;
}

#member .grid-container .grid-item .gi1,.gi2,.gi3,.gi4 {
	position: relative;
}

#member .grid-container .grid-item .gi1::before {
	content: '';
	display: block;
	position: absolute;
	width: 250px;
	height: 110px;
	background-image: url(../images/comment1.png);
	background-size: contain;
	top: 230px;
	left: -125px;
/*---------- コメントフェードイン ----------*/
	opacity: 0;
	animation:fadeIn linear;
	animation-timeline: view();
	animation-range: entry 30% cover 50%;
	animation-fill-mode: forwards;
}

#member .grid-container .grid-item .gi2::before {
	content: '';
	display: block;
	position: absolute;
	width: 250px;
	height: 110px;
	background-image: url(../images/comment2.png);
	background-size: contain;
	top: 230px;
	left: -125px;
/* ---------- コメントフェードイン ---------- */
	opacity: 0;
	animation:fadeIn linear;
	animation-timeline: view();
	animation-range: entry 30% cover 50%;
	animation-fill-mode: forwards;
}

#member .grid-container .grid-item .gi3::before {
	content: '';
	display: block;
	position: absolute;
	width: 250px;
	height: 110px;
	background-image: url(../images/comment3.png);
	background-size: contain;
	top: 230px;
	left: -125px;
/* ---------- コメントフェードイン ---------- */
	opacity: 0;
	animation:fadeIn linear;
	animation-timeline: view();
	animation-range: entry 30% cover 50%;
	animation-fill-mode: forwards;
}

#member .grid-container .grid-item .gi4::before {
	content: '';
	display: block;
	position: absolute;
	width: 250px;
	height: 110px;
	background-image: url(../images/comment4.png);
	background-size: contain;
	top: 230px;
	left: -125px;
/* ---------- コメントフェードイン ---------- */
	opacity: 0;
	animation:fadeIn linear;
	animation-timeline: view();
	animation-range: entry 30% cover 50%;
	animation-fill-mode: forwards;
}

.grid-container p.text-light {
	text-align: center;
	margin-bottom: 50px;
}


#member .button-blown:before {
	position: absolute;
	inset: -5px 5px 5px -5px;
	border: 1px solid #491616;
	border-radius: 30px;
	content: 'インタビューはこちら';
	text-decoration: none;
}

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(0.01rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

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

.sp-only {
	display: block;
}

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

.grid-container {
	display: flex; 
	overflow-x: auto; /* 横スクロールを可能にする */
	scroll-snap-type: none;
	/* scroll-snap-type: x mandatory;  *//* スクロール位置を固定 */
	-webkit-overflow-scrolling: touch; /* iOSでのスムーズなスクロール */
	padding-bottom: 15px; /* スクロールバーでコンテンツが隠れないように */
	gap: 10%;
	justify-content: initial;
	}


.grid-item {
	flex: 0 0 80%; /* 各アイテムの幅を画面の80%に */
	scroll-snap-align: start; /* スナップ位置をアイテムの開始位置に */
	text-align: center;
}

.grid-container .grid-item  img {
	width: 175px;
	}

#member .grid-container .grid-item .gi1::before {
	width: 130px;
	background-image: url(../images/comment_SP_1.png);
	top: 130px;
	left: 0px;
}

#member .grid-container .grid-item .gi2::before {
	width: 130px;
	background-image: url(../images/comment_SP_2.png);
	top: 130px;
	left: 0px;
}

#member .grid-container .grid-item .gi3::before {
	width: 130px;
	background-image: url(../images/comment_SP_3.png);
	top: 130px;
	left: 0px;
}

#member .grid-container .grid-item .gi4::before {
	width: 130px;
	background-image: url(../images/comment_SP_4.png);
	top: 130px;
	left: 0px;
}

}


/* ------------------------------------------------
　　働く環境(work)
------------------------------------------------- */

#work .col-3  .item {
	display: inline-block;
	text-align: center;
	width: calc((100% - 100px)/3) ;
	position: relative;
}

#work .col-3 .item img {
	width: 250px;
}	

#work .col-3 .item-text {
	display: flex;
	justify-content: center;
	position: absolute;
	right: 0;
	left: 0;
	bottom: -10px;
	margin: 0 auto;
}

#work .col-3 .item p.large {
	font-family:"Zen Maru Gothic","Noto Sans JP","Yu Gothic",
	"游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana",
	"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ",
	"Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: bold;
}

#work .button-blown {
	margin-top: 70px;
	margin-bottom: 70px;
}

#work .button-blown::before {
	position: absolute;
	inset: -5px 5px 5px -5px;
	border: 1px solid #491616;
	border-radius: 30px;
	content: '福利厚生を見る';
	text-decoration: none;
}

.autoplay {
	overflow: visible;
}

.autoplay img {
	max-width: 330px;
	margin: 0 5px;
}

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

#work p.subtitle span{
	display: block;
}	

#work .col-3 .item {
	width: calc((100% - 16px)/3) ;
}

#work .col-3 .item img {
	width: 100px;
}	

#work .col-3 .item p.large {
	letter-spacing: -0.06em;
}

.autoplay img {
	margin: 0 2px;
}
}

/* ------------------------------------------------
　　募集職種(recruit)
------------------------------------------------- */

#recruit {
	background-image: url(../images/sprout.png);
	background-size: contain;
	background-position: bottom ;
	background-repeat: no-repeat;
	position: relative;
	max-width: 100%;
	height: 650px;
	/* padding: 150px 375px 150px 375px; */
}

#recruit ul.occupation {
	left:100px;
}

#recruit ul.occupation li {
	display: flex;
}

#recruit ul.occupation li a{
	text-decoration: none;
}

#recruit p.text-light {
	line-height: 2;
	color: #491616;
}

/* リストのドットを画像に*/
#recruit ul.occupation li p.text-light:before {
	display: inline-block;
	width: 25px;
	height: 25px;
	background-image: url(../images/seeds.png);
	background-size: contain;
	content: "";
}

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

#recruit {
	height: 395px;
}

#recruit p.subtitle span{
	display: block;
}	

#recruit ul.occupation li p.text-light:before {
	width: 17px;
	height: 17px;
}

}

/* ------------------------------------------------
　　やさしい世界を目指しませんか
------------------------------------------------- */

#entry {
	height: 910px;
	/* padding: 200px 460px 275px 460px; */
	background-image: url(../images/hands.png);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	position: relative;
}

#entry h3.medium {
	position: relative;
	z-index: 1;
	top: 225px;
}

#entry h3.medium:before {
	content: '';
	position: absolute;
	top: 20px;
	left: 420px;
	z-index: -1;
	width: 230px;
	height: 230px;
	background-image: url(../images/circle-s-p.png);
	background-size: contain;
}

#entry h3.medium::after {
	content: '';
	position: absolute;
	top: -120px;
	right: 415px;
	z-index: -1;
	width: 280px;
	height: 420px;
	background-image: url(../images/circle-s-yg.png);
	background-size: contain;
}

#entry .button-yellow {
	margin-right: auto;
	margin-left: auto;
	top:355px;
} 

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	#entry {
		height: 350px;
		background-image: url(../images/hands-sp.png);
		background-size: contain;
	}

	#entry h3.medium {
		top:100px;
	}

	#entry h3.medium:before {
		top: 20px;
		left: 65px;
		width: 73px;
	}
	
	#entry h3.medium::after {
		top: -25px;
		right: 90px;
		width: 77px;
	}

	#entry .button-yellow {
		font-size: 11px;
		top: 130px;
	}

}

/* ------------------------------------------------
　　お問い合わせ(contact)
------------------------------------------------- */

#contact .logo-large {
	width: 450px;
	margin: 0 auto;
}

#contact .button-blown {
	width: 250px;
	height: 60px;
	margin: 30px auto 30px auto;
	top:50px;
}

#contact .button-blown:before {
	position: absolute;
	inset: -5px 5px 5px -5px;
	border: 1px solid #491616;
	border-radius: 30px;
	content: 'お問い合わせ';
	text-decoration: none;
}

#contact .col-2 .item {
	width: 100%;
}

#contact p.large {
	text-align: center;
	margin-bottom: 30px;
	padding-top: 0;
	letter-spacing: 0.2em;
}

#contact p.text-light {
	text-align: center;
	margin-bottom: 25px;
}

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	#contact .logo-large {
		width: 200px;
	}

	#contact p.large {
		margin-bottom: 18px;
	}
	#contact p.text-light {
		margin-bottom: 13px;
	}

	#contact .col-2 {
		text-align: center;
	}

	#contact .col-2 p.large {
		margin-bottom: 13px;
	}
	#contact .button-blown {
		width: 130px;
		height: 35px;
		top:0;
	}
}

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

#footer .footer {
	display: flex;
	justify-content: center;
}

/* #footer ul.footer { */
	/* display: flex; */
	/* gap:5%; */
	/* margin-bottom: 18px; */
/* } */

ul.footer {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	align-items: center;
	width: 800px;
	height: 50px;
	margin: 0 auto;
}

ul.footer li {
	flex-grow: 1;
	text-align: center;
	list-style: none;

}

/* ul.footer li:hover { */
	/* background-color: #e9b6af; */
/* } */

ul.footer li+li {
	border-left: 1px solid #491616;
}

ul.footer li a {
	text-decoration: none;
	color: #491616;
}

ul.footer li a:hover {
	color: #e9b6af;
}

p.copyright {
	text-align: center;
	line-height: 78px;
	background-color: #fff;
}

/** -------- スマホ -------- **/
@media screen and (max-width:640px){
	
	#footer .footer {
		display: block;
		height: initial;
	}

	#footer ul li a {
		font-size: 10px;
	}

	ul.footer {
		width: 100%;
		margin-bottom: 30px;
	}

	p.copyright {
		font-size: 12px;
		line-height: 48px;
	}

}


/** -----------------------------------------------
  PC :  画面の横幅が641px以上
------------------------------------------------**/
.pc-only {
	display: block;
}

.sp-only {
	display: none;

}

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