@charset "utf-8";

/***********************************************************************
 TOP ページ レスポンシブ対応 追加CSS
 ------------------------------------------------------------------------
 ・元のTOP用CSSの「後ろ」に読み込んでください（上書き用）
 ・PC表示（1025px以上）は元のCSSのまま変わりません
 ・<head>内に下記のviewportが必要です
   <meta name="viewport" content="width=device-width, initial-scale=1">
 ・ブレイクポイント：タブレット 1024px / スマホ 767px
***********************************************************************/

/* 共通：はみ出し防止
========================================== */
img {
	max-width: 100%;
	height: auto;
}
html, body {
	overflow-x: hidden;
}

/* 元CSSの誤記修正（height: 70q → 70px相当を自動に） */
.search-box .search-right ul.search-area li {
	height: auto;
	min-height: 70px;
}


/***********************************************************************
 タブレット（～1024px）
***********************************************************************/
@media screen and (max-width: 1024px) {

	/* MV */
	.mv-catch span {
		font-size: 24px;
		padding: 8px 16px;
	}

	/* メッセージ */
	.about {
		padding: 120px 20px;
		gap: 40px 0;
	}
	.about .about-pic::after {
		width: 60%;
		height: 200px;
	}
	.about .about-txt .about-txt-catch p {
		font-size: 22px;
		margin-top: 40px;
		padding-bottom: 35px;
	}

	/* ピックアップ */
	.pickup-box {
		gap: 60px 20px;
		padding-left: 20px;
		padding-right: 20px;
		box-sizing: border-box;
	}
	.pickup-box .pickup-item {
		width: calc(50% - 10px);
	}
	.pickup-box .pickup-item a figure {
		height: auto;
	}

	/* 検索 */
	.search-box {
		padding: 30px 20px;
	}
	ul.search-type li {
		width: 25%;
	}
	dl.search-kodawari dd ul li {
		width: 32%;
	}

	/* メール通知 */
	.mailnews {
		padding: 30px;
		margin-left: 20px;
		margin-right: 20px;
	}

	/* お知らせ */
	.info .info-item .info-item-tit > dl dt {
		padding-left: 30px;
	}
	.info .info-item .info-item-tit > dl dt em {
		margin-left: 40px;
	}
	.info .info-item .info-item-wrap {
		padding-left: 30px;
	}

	/* 店舗案内 */
	.stoer .stoer-data {
		width: 100%;
		min-width: 0;
	}
	.stoer-pic {
		width: 100%;
		height: 300px;
	}
	.stoer .stoer-address {
		gap: 0 30px;
	}

	/* 石神井バナー */
	.bg-bnr {
		padding: 30px 20px;
	}
	.bnr-shakujii {
		box-sizing: border-box;
	}
	.bnr-shakujii .bnr-shakujii-txt dl dt {
		font-size: 34px;
	}
}


/***********************************************************************
 スマホ（～767px）
***********************************************************************/
@media screen and (max-width: 767px) {

	/* ---- MV ---- */
	.mv,
	ul.mv-bg li {
		height: 80vh;
		min-height: 420px;
	}
	.mv-catch {
		left: 4%;
		right: 4%;
		line-height: 1.8;
	}
	.mv-catch span {
		font-size: 18px;
		padding: 6px 12px;
	}
	.mv-catch span:nth-of-type(2),
	.mv-catch span:nth-of-type(3) {
		margin-top: 6px;
	}
	.mv-info {
		width: 92%;
		left: 4%;
		bottom: 3%;
		height: auto;
		min-height: 50px;
	}
	.mv-info dl.mv-info-tit dt {
		padding-left: 15px;
		font-size: 13px;
	}
	.mv-info dl.mv-info-tit dd {
		width: 120px;
		line-height: 50px;
	}
	.mv .bnr-no01 {
		right: 4%;
		bottom: 22%;
		width: 90px;
	}

	/* ---- メッセージ ---- */
	.about {
		padding: 70px 20px;
		display: block;
	}
	.about .about-pic,
	.about .about-pic + div {
		width: 100%;
	}
	.about .about-pic {
		margin-bottom: 30px;
	}
	.about .about-pic::after {
		width: 70%;
		height: 120px;
		bottom: auto;
		top: 40px;
	}
	.about.move .about-txt {
		line-height: 2.2;
		letter-spacing: 0.1em;
		margin-top: 30px;
	}
	.about.move .about-txt p {
		font-size: 14px;
	}
	.about.move .about-txt figure {
		position: static;
	}
	.about .about-txt .about-txt-catch > span {
		font-size: 18px;
	}
	.about .about-txt .about-txt-catch p {
		font-size: 18px;
		letter-spacing: 0.1em;
		margin-top: 25px;
		padding-bottom: 25px;
	}
	.about .about-txt figure {
		margin-top: 40px;
	}

	/* ---- イベント ---- */
	.event {
		padding-bottom: 60px;
	}
	.bx-viewport {
		width: 100% !important;
	}
	.bx-wrapper .bx-controls-direction a {
		width: 28px;
		height: 28px;
		border-top-width: 2px;
		border-right-width: 2px;
	}
	.bx-wrapper .bx-prev {
		left: 10px;
	}
	.bx-wrapper .bx-next {
		right: 10px;
	}

	/* ---- ピックアップ ---- */
	.pickup {
		padding: 40px 0 60px;
	}
	ul.pickup-link {
		flex-wrap: wrap;
		gap: 10px 15px;
		padding: 0 15px;
	}
	.pickup-box {
		gap: 40px 0;
		padding-top: 30px;
		padding-bottom: 40px;
	}
	.pickup-box .pickup-item {
		width: 100%;
	}
	.pickup-box .pickup-item a dl {
		margin-top: 25px;
	}
	.pickup-box .pickup-item a dl dt {
		font-size: 16px;
	}
	.pickup-box .pickup-item a dl dd {
		padding: 0 15px;
		max-width: 100%;
	}
	.pickup-box .pickup-item a dl dd em {
		font-size: 18px;
	}

	/* ---- 検索 ---- */
	.search {
		background: #F2F2F2 ;
		padding: 60px 0 70px;
	}
	.search ul.search-mylist {
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 10px 0;
		font-size: 14px;
	}
	.search ul.search-mylist li + li {
		margin-left: 30px;
	}
	ul.search-btn li {
		height: 60px;
	}
	ul.search-type {
		flex-wrap: wrap;
		gap: 5px;
		margin-top: 20px;
	}
	ul.search-type li {
		width: calc(50% - 3px);
	}
	.search-box {
		padding: 20px 15px;
	}
	.search-box ul.search-type02 {
		flex-wrap: wrap;
		gap: 5px;
	}
	.search-box ul.search-type02 li {
		width: calc(50% - 3px);
		height: 60px;
	}
	.search-box .search-right dl dd {
		margin-top: 10px;
	}
	.search-box .search-right ul.search-area li {
		width: 48.5%;
		min-height: 50px;
	}
	.search-freeword {
		flex-wrap: wrap;
		gap: 10px 0;
	}
	.search-freeword input {
		width: 100%;
	}
	.search-freeword button {
		width: 100%;
	}
	dl.search-kodawari dd ul li {
		width: 48.5%;
	}
	ul.search-line li {
		height: auto;
		min-height: 2em;
	}
	.btn-st {
		padding: 15px;
	}

	/* メール通知 */
	.mailnews {
		display: block;
		margin: 30px 15px 0;
		padding: 20px;
	}
	.mailnews dl dt {
		font-size: 16px;
	}
	.mailnews dl dd {
		font-size: 14px;
	}
	.mailnews dl + a {
		display: block;
		width: 100%;
		height: 55px;
		line-height: 55px;
		margin-top: 20px;
		text-align: center;
	}

	/* ---- お知らせ ---- */
	.info {
		padding-bottom: 60px;
	}
	.info .info-item .info-item-tit > dl {
		display: block;
	}
	.info .info-item .info-item-tit > dl dt {
		padding: 15px 15px 5px;
		font-size: 14px;
	}
	.info .info-item .info-item-tit > dl dt em {
		display: block;
		margin-left: 0;
		margin-bottom: 5px;
	}
	.info .info-item .info-item-tit > dl dd {
		width: 100%;
		height: auto;
		line-height: 1.5;
		padding: 0 15px 15px;
		box-sizing: border-box;
	}
	.info .info-item .info-item-wrap {
		padding: 15px;
	}

	/* ---- 店舗案内 ---- */
	.stoer {
		padding: 60px 0;
	}
	.stoer .stoer-data {
		padding: 30px 20px;
	}
	.stoer .stoer-address {
		display: block;
		margin-top: 25px;
		margin-bottom: 40px;
	}
	.stoer .stoer-address dl dd {
		margin-top: 15px;
		font-size: 14px;
	}
	span.ic-park {
		margin-left: 0;
		margin-top: 10px;
	}
	.stoer .stoer-keisai dl {
		padding: 20px 15px;
	}
	.stoer .stoer-keisai dl dd {
		flex-wrap: wrap;
		gap: 10px 20px;
	}
	.stoer-pic {
		height: 220px;
	}

	/* ---- バナーエリア ---- */
	.bnr-area {
		padding: 60px 15px;
	}

	/* ---- 採用情報 ---- */
	.recruit {
		padding: 60px 0;
	}
	.recruit dl.recruit-item {
		height: auto;
		flex-wrap: wrap;
	}
	.recruit dl.recruit-item dt {
		padding: 15px;
		width: 100%;
		box-sizing: border-box;
	}
	.recruit dl.recruit-item dd {
		width: 100%;
	}
	.recruit dl.recruit-item dd a {
		display: block;
		text-align: center;
	}

	/* ---- ポップアップ ---- */
	.popup-info {
		padding: 20px 15px;
	}
	.popup-info dl dd ul li {
		text-indent: 0;
	}

	/* ---- 石神井バナー ---- */
	.bg-bnr {
		padding: 20px 10px;
		background-size: cover;
	}
	.bnr-shakujii {
		padding: 15px;
		gap: 20px 0;
		border-width: 3px;
	}
	.bnr-shakujii::before {
		width: 65px;
		height: 95px;
		background-size: contain;
	}
	.bnr-shakujii .bnr-shakujii-pic figure {
		margin-left: 0;
	}
	.bnr-shakujii figure {
		width: 100%;
	}
	.bnr-shakujii .zoom-pic {
		max-width: 100%;
	}
	.bnr-shakujii .bnr-shakujii-txt dl dt {
		font-size: 24px;
	}
	.bnr-shakujii .bnr-shakujii-tit p em {
		font-size: 20px;
		margin-bottom: 10px;
	}
	.bnr-shakujii .bnr-shakujii-txt span {
		width: 100%;
		box-sizing: border-box;
		padding: 15px;
	}

	/* ---- 見出し・アニメ（SPでは控えめに） ---- */
	@keyframes fadeUpAnime {
		0% {
			opacity: 0;
			transform: translateY(40px);
		}
		100% {
			opacity: 1;
			transform: translateY(0);
		}
	}
}