@charset "utf-8";

/***********************************************************************
 レイアウトCSS（Gナビ・マイリスト・お問い合わせ・フッター等）
 レスポンシブ対応 追加CSS
 ------------------------------------------------------------------------
 ・元のCSSの「後ろ」に読み込んでください（上書き用）
 ・PC表示（1025px以上）は元のCSSのまま変わりません
 ・ブレイクポイント：タブレット 1024px / スマホ 767px
 ・推奨の読み込み順
   元CSS → このファイル → common-responsive.css → top-responsive.css
***********************************************************************/


/* タッチデバイスではカスタムカーソルを非表示
========================================== */
@media (hover: none) {
	.cursor-dot,
	.cursor-dot-outline {
		display: none;
	}
}


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

	/* ---- Gナビ（ヘッダー） ---- */
	.gNav {
		gap: 15px;
	}
	.gNav ul.gNav-link {
		gap: 8px 14px;
		max-width: 300px;
	}
	.gNav ul.gNav-link li a {
		font-size: 13px;
	}
	.gNav .gNav-tel p {
		font-size: 16px;
		padding-left: 28px;
		background-size: 22px;
	}
	.gNav .gNav-contact {
		width: 90px;
		font-size: 10px;
		margin-right: 5px;
	}

	/* ---- マイリスト ---- */
	.mylist ul.mylist-type li {
		width: 200px;
	}

	/* ---- お問い合わせ ---- */
	.contact {
		margin-top: 70px;
		padding: 60px 15px 80px;
	}
	.contact .contact-box {
		padding: 60px 15px 80px;
	}
	.contact-item {
		gap: 40px;
	}
	.contact-item dl + dl {
		
	}
	.contact-item dl dd em.contact-tel {
		font-size: 30px;
	}

	/* ---- フッター ---- */
	.footer {
		padding: 80px 15px;
	}
	.footer .footer-wrap {
		gap: 40px 0;
	}
	.footer .footer-btm {
		margin-top: 80px;
	}
	.footer .footer-btm .footer-btm-wrap {
		margin-top: 50px;
		gap: 30px 50px;
	}
}


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

	/* ---- 各種設定 ---- */
	.w280 {
		width: 100%;
		max-width: 280px;
	}
	input[type=password].w300 {
		width: 100%;
		max-width: 300px;
	}
	.gap60 {
		gap: 30px;
	}
	.gap060 {
		gap: 0 20px;
	}

	/* ---- Pナビ（パンくず） ---- */
	ul.pNav {
		flex-wrap: wrap;
		gap: 5px 30px;
		padding: 0 15px 15px;
		margin-top: 15px;
		font-size: 12px;
	}

	/* ---- Gナビ（ヘッダー） ---- */
	.top-gNav {
		padding-bottom: 10px;
	}
	.gNav-btn {
		width: 50px;
		height: 50px;
		right: 8px;
		top: 8px;
		background-size: 20px;
	}

	/* ---- ハンバーガーメニュー内 ---- */
	.gNav-inner {
		height: 100vh;
		height: 100dvh;
	}
	.gNav-inner .gNav-close {
		width: 8vw;
		flex-shrink: 0;
	}
	.gNav-inner .gNav-inner-link {
		height: 100vh;
		height: 100dvh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 70px 15px 40px;
	}
	ul.gNav-head {
		gap: 0 10px;
	}
	ul.gNav-head li a {
		font-size: 13px;
	}
	ul.gNav-list li a {
		padding: 14px 40px 14px 15px;
	}
	ul.gNav-list02 {
		margin-top: 20px;
		padding-top: 20px;
	}
	dl.gNav-dl dt::after,
	dl.gNav-dl dt.js-ac::after {
		width: calc(100% - 140px);
	}

	/* ---- マイリスト ---- */
	.mylist-btn {
		bottom: 12vh;
		left: -10em;
		padding: 8px 15px 8px 8px;
	}
	.mylist .close {
		height: calc(100% - 75vh);
	}
	.mylist .close::after {
		bottom: 10px;
		right: 10px;
	}
	.mylist ul.mylist-type {
		width: 100%;
		top: -50px;
		gap: 0 5px;
	}
	.mylist ul.mylist-type li {
		width: 50%;
		height: 50px;
		font-size: 13px;
		padding: 0 5px;
		box-sizing: border-box;
	}
	.mylist ul.mylist-type li + li {
		margin-left: 0;
	}
	.mylist .mylist-inner {
		height: 75vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		box-sizing: border-box;
	}
	.mylist .mylist-inner .mylist-item {
		display: block;
	}
	.mylist .mylist-inner .mylist-item dl {
		width: 100%;
		box-sizing: border-box;
	}
	.mylist .mylist-inner .mylist-item dl + dl {
		margin-top: 10px;
	}
	.mylist .mylist-inner .mylist-item dl dd {
		margin-top: 15px;
	}
	.mylist .mylist-inner .mylist-item dl dd ul li a em {
		max-width: 90px;
		margin-right: 10px;
		padding-left: 0;
		box-sizing: border-box;
	}

	/* ---- お問い合わせ ---- */
	.contact {
		margin-top: 50px;
		padding: 40px 15px 50px;
	}
	.contact .contact-box {
		padding: 40px 15px 50px;
		margin-bottom: 30px;
	}
	.contact-item {
		display: block;
		margin-top: 30px;
	}
	.contact-item dl + dl {
		margin-top: 40px;
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.contact-item dl dd {
		margin-top: 25px;
	}
	.contact-item dl dd em.contact-tel {
		display: inline-block;
		font-size: 26px;
		padding-left: 38px;
		background-size: 28px;
		line-height: 1.5;
	}

	/* ---- フッター ---- */
	.footer {
		padding: 50px 15px;
	}
	.footer .footer-wrap {
		display: block;
	}
	.footer .footer-wrap ul {
		margin-bottom: 20px;
	}
	.footer ul li a {
		background: #ffffff25;
		display: block;
		padding: 0.5em;
	}
	.footer dl {
		border-top: 1px solid #fff;
		padding-top: 1em;
	}
	.footer dl + dl {
		margin-top: 30px;
	}
	.footer dl dd {
		gap: 0 20px;
		display: block;
		margin-top: 15px;
	}
	.footer dl dt em::after {
		display: none;
	}
	.footer ul li + li {
		padding-top: 15px;
	}
	.footer .footer-btm {
		margin-top: 40px;
	}
	.footer .footer-btm .footer-btm-wrap {
		display: block;
		margin-top: 35px;
	}
	.footer .footer-btm .footer-btm-wrap .footer-tel {
		flex-wrap: wrap;
		gap: 10px 0;
	}
	.footer .footer-btm .footer-btm-wrap .footer-tel em {
		font-size: 22px;
	}
	.footer .footer-btm .footer-btm-wrap .footer-tel em + p {
		margin-left: 0;
		width: 100%;
		font-size: 13px;
	}
	.bnr-footer {
	}
	.footer .copy {
		margin-top: 40px;
		text-align: center;
	}

	/* ---- ページトップ ---- */
	.pt {
		width: 36px;
		height: 36px;
		bottom: 15px;
		right: 15px;
	}
	.pt:hover {
		width: 36px;
		height: 36px;
	}
}