@charset "utf-8";

/* ------------------------------------------ */
/* SAFARI Rooftent Storage様サイト用メインCSS */
/* ------------------------------------------ */
/* Modified : 2019/10/17 2:00 */

/* ――――――――――― */
/* ■全環境用のベースCSS  */
/* ――――――――――― */

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-family: 'M PLUS Rounded 1c',"メイリオ",Meiryo,"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","游ゴシック","Yu Gothic","游ゴシック体","YuGothic",sans-serif;
		margin: 0;
		padding: 0;
		color: #000;
		background-color: #fff;
		line-height: 1.4;
		-webkit-text-size-adjust: 100%;
	}

		/* ▽Avenirフォントの適用 */
		.subtitle .title,
		.nameBadge,
		.moreButton,
		.productsMenuList,
		.productName,
		.avenir {
			font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
		}

		/* ▽消極的な改行制御区間 */
		i {
			font-style: normal;
			display: inline-block;
		}

		/* ▽画面幅に応じて自動縮小する画像 */
		.autoResize {
			max-width: 100%;
		}

		/* ▽リンク配色 */
		body a:hover {
			color: #a5a5a5; /*#4e3f38;*/
		}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */

		/* ------------ */
		/* ▼SAFARIロゴ */
		/* ------------ */
		h1 {
			margin: 0;
		}
		.homePage h1 { display: none; }	/* HOMEページでは表示しない */

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowCover {
		position: relative;
		margin: 0 auto;
		padding: 0;
		max-width: 1200px;
	}

	#HeadSlideshow {
		margin: 0px;
		padding: 0px;
	}

		/* ---------------------------- */
		/* ▽スライドショー用表示候補群 */
		/* ---------------------------- */
		#SlideshowBox {
			width: 100%;
			position: relative;
		}

		#SlideshowBox p {
			position: absolute;
			top:  0;
			left: 0;
			right: 0;	/* 左右0にすることで原寸を超えて拡大もできる */
			z-index: 8;
			opacity: 0.0;
			background-color: white;
			margin: 0;
		}

		#SlideshowBox p.active {
			z-index: 10;
			opacity: 1.0;
		}

		#SlideshowBox p.last-active {
			z-index: 9;
		}

		#SlideshowBox p img {
			width: 100%;
			height: auto;
			display: block;
		}

		/* ▼スクリプト無効の場合の固定表示（＋表示空間確保） */
		#NoSlideshow img {
			width: 100%;
			height: auto;
			display: block;
		}

		/* ---------------- */
		/* ▽スライドカバー */
		/* ---------------- */
		.slideFront {
			margin: 0;
			padding: 0;
			position: absolute;
			bottom: -2px;			/* 微調整 */
			left: 0;
			right: 0;
			z-index:10;
		}
			.slideFront img {
				display: block;
			}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */
	main {
		margin: 0;
	}

		/* ▼メインコンテンツ汎用ボックス */
		.mainBox {
			margin: 0;
			padding: 0;
		}

		/* ▼サブタイトル */
		.subtitle {
			margin: 0;
			padding: 1em 0;
			text-align: center;
			font-size: 1.25em;
		}
			/* ▽サブタイトルの文字 */
			.subtitle .title {
				letter-spacing: 0.3em;
				margin-right: -0.3em;
			}
			/* ▽サブタイトル上の画像 */
			.subtitle img {
				display: block;
				margin: 2em auto 0.5em;
				width: 100%;
			}

		/* ▼サブ見出し */
		.subhead {
			text-align: center;
			font-weight: normal;
		}

		/* ▼メインコンテンツ内部の段落 */
		.mainBox p {
			margin: 1em 0;
			padding: 0 1.5em;
			line-height: 1.6;
		}

			/* ▼メインコンテンツ内部の特定本文段落を含むボックス */
			.mainParagraphs p {
				text-align: justify; /* 両端揃え */
			}

		/* ▼長方形角丸ボタン */
		.moreButtonBox {
			margin: 2em 0;
		}
			.moreButton {
				display: block;
				margin: 0 auto;
				padding: 0 1em 0.67em 1em;
				border: 1px solid black;
				border-radius: 0.75em;
				max-width: 15em;
				text-align: center;
				line-height: 1;
				text-decoration: none;
				background-color: #fff;
				color: #000;
			}
			.moreButton:hover {
				background-color: #000;
				color: #fff;
			}

		/* ………………… */
		/* ▼PRODUCTS領域 */
		/* ………………… */
		.productsArea {
			margin: 0;
		}

			/* ＿＿＿＿＿＿＿＿＿ */
			/* ▼製品列挙ボックス */
			/* ￣￣￣￣￣￣￣￣￣ */
			.productsBox {
				margin: 3em 0;
				padding: 0;
			}
				/* ▽製品1つ */
				.productsBox figure {
					margin: 0;
					padding: 0;
					position: relative;
				}
				/* ▽製品写真 */
				.productsBox img {
					width: 100%;
					display: block;
				}
				/* ▽製品キャプション */
				.productsBox figcaption {
					position: absolute;
					top: 30px;
					color: white;
					z-index: 10;
					background-color: #000;
					display: inline-block;
					width: 165px;
					margin: 0;
					padding: 0.4em 0;
					text-align: center;
					font-size: 1em;
				}

		/* ……………… */
		/* ▼Ｑ＆Ａ領域 */
		/* ……………… */
		.qandaArea {
			margin: 0;
		}
			.qandaArea dl {
				margin: 1em 2em;
			}

			/* ▽Ｑ＆Ａ行頭記号(共通) */
			.qandaArea dt::before,
			.qandaArea dd::before {
				height: 1.65em;
				width: 1.65em;
				border-radius: 50%;
				text-align: center;
				font-weight: bold;
				font-size: 1.2em;
				margin-right: 0.5em;
			}

			/* ▽Ｑ */
			.qandaArea dt {
				margin-top: 2em;
			}
			.qandaArea dt::before {
				content: 'Q';
				display: inline-block;
				color: #fff;
				background-color: #000;
			}

			/* ▽Ａ */
			.qandaArea dd {
				margin-top: 2em;
				margin-bottom: 4em;
				padding-left: 1.75em;
			}
			.qandaArea dd::before {
				content: 'A';
				display: block;
				float: left;
				color: #000;
				background-color: #f19236;
				margin-left: -2em;
			}

		/* ………………… */
		/* ▼カタログ領域 */
		/* ………………… */
		.catalogArea {
			margin: 0;
		}
			.catalogLinkBox {
				text-align: center;
			}
			.catalogImage {
				width: 142px;
				height: auto;
			}

		/* ………………………… */
		/* ▼パンくずリスト領域 */
		/* ………………………… */
		.pankuzuArea {
			margin: 5em 4.5em 2.5em;
			padding: 1em;
			font-size: 0.6em;
			text-align: center;
			border-top: 1px solid black;
		}
			/* リンクの配色 */
			.pankuzuArea a {
				text-decoration: none;
				color: #666666;
			}

		/* …………… */
		/* ▼NEWS領域 */
		/* …………… */
		.infoBody {
			margin: 1em 1.5em;
		}

			.onelogbox {
				margin: 2em auto;
				max-width: 18em;
				padding: 0;
			}
			.onelogbox + hr {
				width: 50%;
				height: 1px;
				border-width: 1px 0 0 0;
				border-color: #919191;
				border-style: dashed none none none;
			}
			.infoBody hr:last-child {
				display: none;	/* 最後の項目の後には区切り線を引かない */
			}
			.postdate {
				font-weight: normal;
				margin: 0 0.5em 0.4em 0.5em;
				font-size: 1em;
			}
			.comment {
				margin: 0 1.5em;
			}
			
			a:link { 
				color: #000000;
				text-decoration:none;
					
			}
			a:visited { 
				color: #999999; 
				
			}
			a:hover { 
				color: #a5a5a5; 
				
			}
			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			/* ▼続きを読むリンク（ボタン） */
			/* ‥‥‥‥‥‥‥‥‥‥‥‥‥‥ */
			.readmorebutton:link{ 
				font-size:small;
				color:#000000;
				text-decoration: none;
				
			}
			
			/* ▽ボタンにマウスが載った際の装飾 */
			.readmorebutton:visited {
  				color: #999999;                /* 文字色 */
			
			}
			.readmorebutton:hover {
  				color: #a5a5a5;                /* 文字色 */
			
			}

		/* ……………………… */
		/* ▼ABOUT : 人物領域 */
		/* ……………………… */
		.personArea {
			margin: 0;
		}

			/* タイトル部分の余白調整 */
			.personArea .subtitle { padding-bottom: 0; }
			.personArea .subhead { }

			/* ▽名前＋バッヂ枠 */
			.nameBadge {
				text-align: center;
			}
				.nameBadge .name {
					margin: 0;
					padding: 0;
					font-size: 1.4em;
				}
					/* 姓名を揃えるため */
					.nameBadge .name span {
						display: inline-block;
						text-align: left;
						letter-spacing: 2px;
						/* background-color: orange; */
					}
					.nameBadge .name .first  { min-width: 5.7em; }	/* 名の最小横幅サイズ */
					.nameBadge .name .family { min-width: 4.2em; }	/* 姓の最小横幅サイズ */
					.nameBadge .name .tatsuro {  }
					.nameBadge .name .mariko  { letter-spacing: 4.2px; }
				.nameBadge .badge {
				}
				.nameBadge .badge img {
					margin: 1em 0 2.5em 0;
					border-radius: 14px;	/* 仮の中間値(20～7.7) */
					max-width: 73%;
				}
				.badge img:last-child {
    				margin-top:-0.5em;	/* 写真間の間隔調整 */
					margin-bottom:0;	/* 写真間の間隔調整 */
					
				}
				

			/* ▽グラデーションメッセージ枠 */
			.personalMessageBox {
				background-image: url("/imgs/bg_aboutus01.png");	/* グラデーション背景 */
				background-size: auto 100%;
				color: #fff;
				margin: 0;
				padding: 1px 0;
			}
				.personalMessageBody {
					background-image: url("/imgs/bg_aboutus02.png");	/* 透過背景＋車 */
					background-size: contain;
					background-repeat: no-repeat;
					background-position: right bottom;
				}
				.personalMessageBox p {
					margin: 1em auto;
					padding: 0;
					max-width: 75%;
				}

		/* …………………………… */
		/* ▼ABOUT : 吹き出し領域 */
		/* …………………………… */
		.fukidashiArea {
		}

			.fukidashiArea dl {
				margin: 1em;
				padding: 0;
				text-align: center;
			}

				/* ▽吹き出しそのもの */
				.fukidashiArea dt {
					background-image: url("/imgs/fukidasi.png");
					background-repeat: no-repeat;
					background-size: contain;
					background-position: center bottom;
					height: 4.2em;
					max-width: 270px;
					width: 270px;
					margin: 3em auto 1px;
					padding: 0;
				}

				/* ▽吹き出し下の本文 */
				.fukidashiArea dd {
					margin: 1em auto 4.2em;
					padding: 0;
					max-width: 400px;
					line-height: 1.5;
				}

		/* ……………………………………………… */
		/* ▼PRODUCTS: 冒頭テキストメニュー領域 */
		/* ……………………………………………… */
		.productsMenuBox {
			margin: 1em 0 3em;
		}
			.productsMenuList {
				list-style-type: none;
				margin: 0;
				padding: 0;
				text-align: center;
				line-height: 2.4;
			}

			.productsMenuList a {
				text-decoration: none;
				color: #000;
				display: inline-block;
			}

			.pageMaggiolina .linkMaggiolina a,
			.pageColumbus   .linkColumbus   a,
			.pageAircamping .linkAircamping a,
			.pageOverland   .linkOverland   a,
			.pageOverzone   .linkOverzone   a,
			.pageOvercamp   .linkOvercamp   a {
				color: orange;
			}
			.productsMenuList a:hover {
				/* 共通hover用配色を適用 */
			}

			.pageMaggiolina .linkMaggiolina a::before,
			.pageColumbus   .linkColumbus   a::before,
			.pageAircamping .linkAircamping a::before,
			.pageOverland   .linkOverland   a::before,
			.pageOverzone   .linkOverzone   a::before,
			.pageOvercamp   .linkOvercamp   a::before,
			.productsMenuList a:hover::before {
				content: '▶';
				padding-right: 0.15em;
			}

			/* ＿＿＿＿＿＿＿＿＿＿＿ */
			/* ▼PRODUCTS: 製品大写真 */
			/* ￣￣￣￣￣￣￣￣￣￣￣ */
			.productLargePhoto {
				margin: 1em 0;
				padding: 0;
			}
				/* ▽写真ボックス */
				.productLargePhoto figure {
					margin: 0;
					padding: 0;
					position: relative;
				}

				/* ▽製品写真 */
				.productLargePhoto figure img {
					width: 100%;
					display: block;
				}

				/* ▽製品キャプション */
				.productLargePhoto figcaption {
					position: absolute;
					left: 0px;
					top: 10%;
					z-index: 10;
					color: white;
					background-color: #000;
					display: inline-block;
					width: 40%;
					margin: 0;
					padding: 0.4em 0;
					text-align: center;
					font-size: 1em;
					border-radius: 0 2em 2em 0;
				}

		/* ……………………………… */
		/* ▼PRODUCTS: 詳細紹介領域 */
		/* ……………………………… */
		.detailArea {
			margin: 3em 0;
			text-align: center;
		}

			/* ▽製品名 */
			.productName {
				text-align: center;
				font-weight: normal;
				letter-spacing: 3px;
				margin-bottom: 1.5em;
			}
				.productName i {
					border-bottom: 1px solid #c7c7c7;
					padding: 0 0.15em 0.5em 0.15em;
				}

			/* ▽製品写真 */
			.productPhoto {
			}
				.productPhoto img {
					width: 80%;
					max-width: 100%;
					min-width: 300px;
				}

			/* ▽製品大写真直下のキャプション */
			.productsArea .productCaption {
				text-align: center;
				margin: 2em 0 2.5em 0;
			}

			/* ▽バリエーションサイン */
			.productVariations {
			}
				.productVariations img {
					width: 75px;
					height: auto;
				}

			/* ▽カタログスペック枠 */
			.detailArea .catalogSpec {
				padding: 0 1em;
				font-size: 1em;
				display: inline-block;
				text-align: left;
			}

			/* ▽リンクボタン */
			.productLinkButtonBox {
				padding: 0;
			}
				.productLinkButton {
					display: inline-block;
					margin: 1em 0;
					padding: 0 1em;
					vertical-align: middle;
				}
				.productLinkButton a {
					display: block;
					margin: 0 auto;
					padding: 1em;
					border: 1px solid #000;
					border-radius: 50%;
					text-align: center;
					line-height: 1;
					min-width: 50px;
					max-width: 50px;
					min-height: 50px;
					text-decoration: none;
					background-color: #fff;
					color: #000;
				}
				.productLinkButton a:hover {
					color: #fff;
					background-color: #000;
				}
				.productLinkButton a span {
					vertical-align: middle;
					display: block;
					padding: 17px 0;
				}
					.circleBtnTel {
						background-image: url("/imgs/tel.png");
						background-repeat: no-repeat;
						background-size: 38px;
						background-position: center center;
						text-indent: -10000px;
					}
					.circleBtnTel:hover {
						background-image: url("/imgs/tel02.png");
					}

			/* ＿＿＿＿＿＿＿＿ */
			/* ▼セットアップ枠 */
			/* ￣￣￣￣￣￣￣￣ */
			.detailSetupBox {
				margin: 1.5em 0;
				padding: 0.5em 0 0 0;
			}
				/* セットアップ種別名 */
				.setupType {
					font-weight: normal;
					margin: 0.5em 0;
				}

		/* ………………………… */
		/* ▼CATALOG:縦向き注釈 */
		/* ………………………… */
		.catalogArea .ifPortrait {
			border: 2px solid #4c4b4b;
			border-radius: 1em;
			margin: 1.8em 1.35em 1em;
			padding: 0.67em 0.75em;
			background-color: #ededed;
			color: #4c4b4b;
			font-size: 0.95em;
			line-height: 1.35;
		}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
	footer {
		margin: 0;
		padding: 0;
		text-align: center;
	}

		/* ▼フッタ上部領域 */
		.upperFooter {
			margin: 0;
			padding: 1em;
		}

		/* ▼フッタ中部領域 */
		.middleFooter {
			position: relative;
		}

		/* ……………… */
		/* ▼アドレス枠 */
		/* ……………… */
		.addressBox {
			max-width: 400px;
			margin: auto;
			padding: 0;
		}
		.addressBox img {
			width: 150px;
			margin: auto;
		}

		.addressBox {
			text-align: center;
			margin: 3em auto;
		}

			/* 電話番号 */
			p.tel {
				margin: 0.5em 0 0 0;
			}
				a.tel {
					display: inline-block;
					padding: 3px 10px 3px 30px;
					text-decoration: none;
					font-size: 1.2em;
					color: #000;
					background-image: url('/imgs/tel03.png');
					background-repeat: no-repeat;
					background-position: center left;
					background-size: 27px 27px;
					min-height: 27px;
				}

			/* 住所 */
			.address {
				font-size: 1.2em;
				margin: 0.5em 0;
			}

			/* 地図リンク */
			.mapLink a {
				text-decoration: none;
				color: #666666;
			}

		/* ………………… */
		/* ▼コンタクト枠 */
		/* ………………… */
		.contactBox {
			margin: 2em 0 0 0;
		}
			.contactColumn {
				margin: 1.5em 0 0 0;
			}
				.telNumbersBox {
					line-height: 1.75;
					margin-top: 0;
					margin-bottom: 2.5em;
				}

			/* ▽コンタクト枠内の四角リンク */
			.contactBox .buttonSquare {
				display: block;
				margin: 0 auto;
				padding: 1.25em 1em;
				border: 2px solid black;
				border-radius: 10px;
				max-width: 14.5em;
				text-align: center;
				line-height: 1;
				text-decoration: none;
				background-color: #fff;
				color: #000;
			}
			.contactBox .buttonSquare:hover {
				background-color: #000;
				color: #fff;
			}

			/* ▽コンタクト枠内のアイコンリンク */
			.contactBox .buttonIcon {
				margin: 0;
			}
			.contactBox .buttonIcon img {
				max-width: 36px;
			}

			/* ▽電話番号テキスト(リンク) */
			.teltext {
				color: #000;
				text-decoration: none;
			}

		/* ………………… */
		/* ▼会社名＋ロゴ */
		/* ………………… */
		.companyNameAndLogo {
			margin: 3em auto;
			max-width: 750px;
			text-align: center;
		}
			.companyLogo {
				width: 120px;
			}
			.associateLogo {
				width: 100px;
			}

		/* ……………………… */
		/* ▼HOMEへ戻るボタン */
		/* ……………………… */
		.back2Home {
			display: none;	/* モバイルでは表示しない */
		}

		/* ……………………… */
		/* ▼TOPへ戻るボタン  */
		/* ……………………… */
		.scroll2Top {
			margin: 0;
			padding: 0;
			max-width: 4em;
			position: fixed;
			bottom: 5px;
			right: 5px;
			z-index: 30;
		}

			.scroll2TopButton {
				display: block;
				margin: 0;
				padding: 0.8em;
				background-color: rgba(0,0,0,0.8);
				color: #fff;
				text-decoration: none;
				text-align: center;
				font-size: 1.2em;
				line-height: 1;
				border-radius: 50%;
			}
			.scroll2TopButton:hover {
				background-color: #000;
				color: #fff;
				text-shadow: 1px 1px 1px white;
			}

		/* ▼フッタ下部領域 */
		.bottomFooter {
			margin: 1em 0 0 0;
			padding: 0;
			background-color: #000;
			color: #fff;
		}

		/* …………………… */
		/* ▼サイトマップ枠 */
		/* …………………… */
		.sitemapBox {
			margin: 1em 1em 0;
			padding: 1.2em 1.2em 4.5em 1.2em;	/* リンクが下端すぎるとモバイル版ブラウザのUIとバッティングして操作できなくなるので、下端は多めに余白を確保しておく。 */
			text-align: left;
			line-height: 2.5;
		}
			/* ▽サイトマップ内のリンク */
			.sitemapBox a {
				color: white;
				text-decoration: none;
				font-size: 0.95em;
			}

			/* ▽サイトマップリスト */
			.sitemapList {
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			.sitemapList li {
				display: inline-block;
				margin: 0 0.75em 0 0;
			}
				/* 製品項目 */
				.sitemapList li.itemProducts {
					display: block;
				}
				/* 製品リスト */
				.productsList {
					list-style-type: none;
					margin: 0 0 0 1.5em;
					padding: 0;
				}
				.productsList li {
					min-width: 86px;
				}


/* ========================================================= */
/* ■総合モバイル端末（横幅1023px以下）共通の追加・上書きCSS */
/* ========================================================= */
@media all and (max-width:1023px) {

	.pc-only { display: none !important; }

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */

		/* ------------ */
		/* ▼SAFARIロゴ */
		/* ------------ */
		h1 {
			/* ※ロゴもページ最上部に常時固定する場合は下記3行を有効に */
			/*position: fixed;
			top: 0;
			z-index: 100; */
			width: 100%;
			background-color: rgba(255,255,255,0.75);
		}
		h1 a {
			display: block;
			padding: 0;
		}
		h1 img {
			width: 100%;
			height: auto;
			display: block;
		}

		/* -------------------------------- */
		/* ▼ドロワーメニュー(モバイルのみ) */
		/* -------------------------------- */
		.drawerMenu * {
			margin: 0;
			padding: 0;
			outline: none;
			border: none;
			font: inherit;
			font-family: inherit;
			font-size: 100%;
			font-style: inherit;
			font-weight: inherit;
			-webkit-appearance: none;
			-moz-appearance: none;
			appearance: none;
			text-align: left;
			text-decoration: none;
			list-style: none;
		}

			/* ▼ドロワーボタンの表示と動作 */
			.drawerMenu .drawerBg {
				width: 100%;
				height: 100%;
				position: fixed;
				z-index: 999;
				background-color: rgba(255, 255, 255, 0.5);
				display: none;
				top: 0;
				left: 0;
			}
			.drawerMenu .drawerBtn {
				display: block;
				background: none;
				border: none;
				padding: 0;
				width: 31px;
				height: 31px;
				letter-spacing: 0.1em;
				cursor: pointer;
				position: fixed;
				top: 20px;		/* ボタンの配置(上) */
				right: 20px;		/* ボタンの配置(右) */
				z-index: 1001;
				text-align: center;
				outline: none;
				border-radius: 50%;
				/* ▽配色と領域サイズ調整 */
				background-color: rgba(255,255,255,0.8);	/* 3本線枠の背景色 */
				padding: 6px 6px;							/* 3本線周囲の余白量 */
				box-sizing: content-box;
			}
			.drawerMenu .drawerBtn.active .drawerBar {	width: 26px; }					/* 3本線がクロスする場合の長さ */
			.drawerMenu .drawerBtn.active .drawerBar1 {	transform: rotate(33deg); }
			.drawerMenu .drawerBtn.active .drawerBar2 {	opacity: 0;	}
			.drawerMenu .drawerBtn.active .drawerBar3 {	transform: rotate(-34deg); }
			.drawerMenu .drawerBtn.active .drawerLabelMenu {	display: none;	}
			.drawerMenu .drawerBtn.active .drawerLabelClose {	display: block;	}
			.drawerMenu .drawerBar {
				display: block;
				height: 3px;			/* 3本線の太さ */
				margin: 4px 6px;		/* 3本線の「上下間隔」と「横の長さ」 */
				transition: all 0.2s;
				transform-origin: 0 0;
			}

			/* ▼ドロワーボタンの色 */
			.drawerMenu .drawerBtn { color: #276490; } /* 文字色 */
			.drawerMenu .drawerBtn .drawerBar { background-color: #000; } /* バーの色(元:#276490) */

			/* ▼ドロワーボタン下のラベル */
			.drawerMenu .drawerText {
				text-align: center;
				font-size: 10px;
			}
			.drawerMenu .drawerLabelClose {
				letter-spacing: 0.08em;
				display: none;
			}
			.drawerMenu .drawerLabelMenu {
				display: block;
			}

			/* ▼モバイル用メニュー本体(ラッパー) */
			.drawerMenu .drawerNaviWrapper {
				background-color: rgba(255,255,255,0.9);	/* 重なるメニューの背景色 */
				width: 312px;								/* 重なるメニューの横幅 */
				height: 100%;
				transition: all 0.2s;
				transform: translate(312px);
				position: fixed;
				top: 0;
				right: 0;
				z-index: 1000;	/* 最前面表示 */
			}
			.drawerMenu .drawerNaviWrapper.open {
				transform: translate(0);
			}

			/* ▼モバイル用メニュー本体 */
			.drawerMenu .drawerNaviList {
				padding: 30px 6px;				/* メニューの動的な表示開始位置を調整する際は、padding-topの値を変更する。 */
			}

			/* ▼モバイル用メニュー項目 */
			.drawerMenu a {
				color: inherit;
				text-decoration: none;
				display: block;
				padding: 9px 18px;
				border-bottom: 1px dashed #ccc;
			}
			.drawerMenu a:visited {
			  color: inherit;
			}
			.drawerMenu a:hover {
				background-color: snow;
			}
				/* ▼字下げ項目 */
				.level2nd {
					text-indent: 1em;
				}

		/* ---------------- */
		/* ▽上部案内文章枠 */
		/* ---------------- */
			.tagline {
				font-size: 1.25em;
				letter-spacing: -0.02em;
				margin-top: 1.67em;
			}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */

		/* ………………… */
		/* ▼PRODUCTS領域 */
		/* ………………… */
			/* ＿＿＿＿＿＿＿＿＿ */
			/* ▼製品列挙ボックス */
			/* ￣￣￣￣￣￣￣￣￣ */
				/* ▽製品キャプション */
					/* 奇数番目 */
					.productsBox figure:nth-child(2n+1) figcaption {
						left: 0px;
						border-radius: 0 2em 2em 0;
					}
					/* 偶数番目 */
					.productsBox figure:nth-child(2n) figcaption {
						right: 0px;
						border-radius: 2em 0 0 2em;
					}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */

}

/* ====================================================== */
/* ■スマートフォン（横幅599px以下）専用の追加・上書きCSS */
/* ====================================================== */
@media all and (max-width:599px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.95rem;
	}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */

		/* ……………………… */
		/* ▼ABOUT : 人物領域 */
		/* ……………………… */
			/* ▽名前＋バッヂ枠 */
				.nameBadge .badge img {
					border-radius: 7.7px;
				}

			/* ▽グラデーションメッセージ枠 */
				.personalMessageBox p {
					padding: 0 1.5em;
					max-width: 100%;
				}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */

}

/* ======================================================== */
/* ■やや小型なスマホ（横幅375px以下）専用の追加・上書きCSS */
/* ======================================================== */
@media all and (max-width:375px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.95rem;
	}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */
		/* ……………………………… */
		/* ▼PRODUCTS: 詳細紹介領域 */
		/* ……………………………… */
			/* ▽カタログスペック枠 */
			.detailArea .catalogSpec {
				font-size: 0.9em;
			}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
		/* …………………… */
		/* ▼サイトマップ枠 */
		/* …………………… */
		.sitemapBox {
			margin: 1em 0.67em 0;
			padding: 1.2em 0.9em 4.5em 0.9em;
		}

			/* ▽サイトマップリスト */
			.sitemapList li {
				margin: 0 0.67em 0 0;
			}
				/* 製品リスト */
				.productsList {
					margin: 0 0 0 1.2em;
				}
				.productsList li {
					min-width: 60px;
				}

}

/* ========================================================== */
/* ■小型スマートフォン（横幅359px以下）専用の追加・上書きCSS */
/* ========================================================== */
@media all and (max-width:359px) {

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 0.9rem;
	}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */
	main {
		width: 100%;
		overflow: hidden;
	}

}


/* ===================================================== */
/* ■PCサイズ画面（横幅1024px以上）専用の追加・上書きCSS */
/* ===================================================== */
@media screen and (min-width:1024px) {

	.mobile-only { display: none !important; }

	/* ================== */
	/* ▼ページ全体・汎用 */
	/* ================== */
	body {
		font-size: 1rem;
	}

	/* ※Windows環境で日本語Webフォントのシャギーを防ぐ */
	h4,
	.mainParagraphs,
	.upperFooter {
		transform: rotate(0.03deg);
	}

	/* ============ */
	/* ▼ヘッダ区画 */
	/* ============ */
	.headBox {
		margin: 1em 0 0 0;
		text-align: center;
	}

		/* ---------------------------- */
		/* ▼グローバルメニュー(PCのみ) */
		/* ---------------------------- */
		.globalMenuArea {
			display: block;
			max-width: 1200px;		/* レスポンシブにするために、横幅は最大値だけを指定。 */
			margin: 0 auto 5px;
		}
		.globalMenuBox {
			position: relative;
			z-index: 50;	/* スライドショーに消されないように、スライドショー関連よりも大きな値を指定する */
			list-style-type: none;
			margin: 0;
			padding: 0;
			*zoom: 1;
		}
		.globalMenuBox:before, .globalMenuBox:after{ content: ""; display: table; }
		.globalMenuBox:after{ clear: both; }

		/* ▽メイン(第1階層)メニュー項目 */
		.globalMenuBox li {
			position: relative;
			min-width: 7em;								/* calcで計算できない場合に、最小限の幅は確保できるように。 */
			width: calc( ( 100% - 300px ) / 4 );		/* 先頭のロゴと、末尾のインスタアイコン分の横幅を除いて、均等配分できるサイズを指定する。横幅が1200pxの場合は： 225px＝(1200-200-100)/4 のように計算される。 */
			float: left;
			margin: 0;
			padding: 0;
			text-align: center;
		}
		.globalMenuBox > li:first-child { width: 200px; min-width: 200px; }
		.globalMenuBox > li:last-child { width: 100px; min-width: 36px; }
		.globalMenuBox li a {
			display: block;
			margin: 0;
			padding: 40px 0 0 0;
			background: #fff;
			color: #000;
			font-size: 1.4em;
			line-height: 1;
			text-decoration: none;
			text-align: center;
			vertical-align: bottom;
		}

		/* ▽先頭のSAFARIロゴ */
		.globalMenuBox > li:first-child a { padding: 0; }
		.homeLinkLogo {
			display: block;
		}

		/* ▽Instagramアイコン */
		.globalMenuBox > li:last-child a { padding: 35px 0 0 0; }
		.instaLinkIcon {
			vertical-align: top;
		}

		/* ▽サブ(第2階層)メニュー */
		.globalMenuBox li ul{
			list-style: none;
			position: absolute;
			top: 100%;
			left: 0;
			margin: 0;
			padding: 10px 0 0 0;
		}

		/* ▽サブメニュー項目 */
		.globalMenuBox li ul li{
			width: 100%;
		}
		.globalMenuBox li ul li a {
			padding: 0.57em 1em;
			/*border-top: 1px solid #fff;*/		/* 横幅一杯の区切り線を引きたい場合はこれ */
			color: #fff;
			background-color: #000;
			text-align: center;
			line-height: 1.4;
			opacity: 0.55;
			font-size: 1.2em;
		}
		.globalMenuBox li ul li::before {		/* 横幅に対して少ない割合の区切り線を引きたい場合 */
			content: ' ';
			height: 0px;
			display: block;
			border-bottom: 1px solid white;
			width: 60%;
			margin: -1px auto 0;
		}

		/* ▽リンク配色 */
		.globalMenuBox li.subItem:hover a {
			background-color: #000;
			color: #fff;
			opacity: 1;
		}

		/* ▽サブメニュー開閉(アニメーション) */
		.globalMenuBox li ul {
			opacity: 0;
			top: 50%;
			visibility: hidden;
			transition: .5s;
		}
		.globalMenuBox li:hover ul {
			top: 100%;
			visibility: visible;
			opacity: 1;
		}

		/* ---------------- */
		/* ▽スライドカバー */
		/* ---------------- */
		.slideFront {
		}

	/* ==================== */
	/* ▼スライドショー区画 */
	/* ==================== */
	.slideshowCover {
	}

		.slideshowCover img {
			border-radius: 1em;
		}

		#SlideshowBox p,
		#NoSlideshow {
			overflow: hidden;
		}

	/* ============ */
	/* ▼メイン区画 */
	/* ============ */

		/* ▼サブタイトル */
		.subtitle {
			font-size: 2.7em;
		}
			/* ▽サブタイトル上の画像 */
			.subtitle img {
				width: 80%;
			}

		/* ▼サブ見出し */
		.subhead {
			font-size: 2em;
			margin-bottom: 1.5em;
		}

		/* ▼本文（注：p要素とは限らず、リスト等の場合もあり） */
		.mainParagraphs {
			font-size: 1.2em;
		}
		/* ▼メインコンテンツ内部の段落 */
		.mainBox p {
			margin: 1em 15%;
			line-height: 1.7;
		}

		.moreButton {
			margin: 2.5em auto;
		}

		/* ………………… */
		/* ▼PRODUCTS領域 */
		/* ………………… */
		.productsArea {
		}

			/* ＿＿＿＿＿＿＿＿＿ */
			/* ▼製品列挙ボックス */
			/* ￣￣￣￣￣￣￣￣￣ */
			.productsBox {
				text-align: center;
				max-width: 1350px;
				margin: 4.5em auto;
			}
				/* ▽製品1つ */
				.productsBox figure {
					width:  400px;
					height: 400px;
					display: inline-block;		/* 横並びにする */
					vertical-align: middle;		/* 上下方向の隙間を詰める */
					overflow: hidden;			/* トリミングのため */
				}
				/* ▽製品写真 */
				.productsBox img {
					width: auto;
					height: 400px;
				}
				/* ▽製品キャプション */
				.productsBox figcaption {
					top: 36px;
					width: 210px;
					margin: 0;
					padding: 0.3em 0;
					text-align: center;
					font-size: 24px;		/* 写真サイズと合わせて調整しやすいように単位はpxを採用 */
					font-weight: bold;
				}
					/* 奇数・偶数共通 */
					.productsBox figure figcaption {
						right: 0px;
						border-radius: 2em 0 0 2em;
					}

					/* 製品画像の表示位置調整（トリミング位置） */
					.productsBox figure.maggiolina img { margin-left: -48.5%; }
					.productsBox figure.columbus   img { margin-left: -25.5%; }
					.productsBox figure.aircamp    img { margin-left: -3%; }
					.productsBox figure.overland   img { margin-left: -42.5%; }
					.productsBox figure.overzone   img { margin-left: -46.5%; }
					.productsBox figure.overcamp   img { margin-left: -0%; }

				/* リンク */
				.productsBox a:hover img {
					opacity: 0.7;
				}

		/* ……………… */
		/* ▼Ｑ＆Ａ領域 */
		/* ……………… */
		.qandaArea {
			margin: auto;
			max-width: 1000px;
		}

		/* …………… */
		/* ▼NEWS領域 */
		/* …………… */
		.infoBody {
			max-width: 700px;
			margin: 2em auto;
		}

			.onelogbox {
				margin: 3em auto;
				max-width: 640px;
				padding: 0;
			}

			.onelogbox + hr {
				width: auto;
				max-width: 500px;
			}

		/* ………………… */
		/* ▼カタログ領域 */
		/* ………………… */
		.catalogArea {
		}
			.catalogImage {
				width: 354px;
			}


		/* ……………………… */
		/* ▼ABOUT : 人物領域 */
		/* ……………………… */
		.personArea {
		}

			/* ▽名前＋バッヂ枠 */
				.nameBadge .badge img {
					border-radius: 20px;
					/*max-width: 100%;*/
				}

			/* ▽グラデーションメッセージ枠 */
				.personalMessageBody {
					padding: 1em;
				}
				.personalMessageBox p {
					margin: 1em auto;
					padding: 0;
					max-width: 730px;
				}

		/* …………………………… */
		/* ▼ABOUT : 吹き出し領域 */
		/* …………………………… */
		.fukidashiArea {
		}

			.fukidashiArea dl {
			}

				/* ▽吹き出しそのもの */
				.fukidashiArea dt {
					height: 4.2em;
					max-width: 540px;
					width: 480px;
					margin: 4em auto 1px;
				}

				/* ▽吹き出し下の本文 */
				.fukidashiArea dd {
					margin: 1em auto 5em;
					padding: 0;
					max-width: 80%;
					line-height: 1.5;
				}

		/* ……………………………………………… */
		/* ▼PRODUCTS: 冒頭テキストメニュー領域 */
		/* ……………………………………………… */
		.productsMenuBox {
		}

			/* ＿＿＿＿＿＿＿＿＿＿＿ */
			/* ▼PRODUCTS: 製品大写真 */
			/* ￣￣￣￣￣￣￣￣￣￣￣ */
			.productLargePhoto {
			}

				/* ▽製品キャプション */
				.productLargePhoto figcaption {
					top: 10%;
					width: 36%;
					font-size: 2em;
				}

		/* ……………………………… */
		/* ▼PRODUCTS: 詳細紹介領域 */
		/* ……………………………… */
		.detailArea {
			margin: 6em 0 3em 0;
		}
			/* ▽製品名 */
			.productName {
				margin-bottom: 2.25em;
			}
			/* ▽カタログスペック枠 */
			.detailArea .catalogSpec {
				font-size: 1.2em;
			}

			/* ＿＿＿＿＿＿＿＿ */
			/* ▼セットアップ枠 */
			/* ￣￣￣￣￣￣￣￣ */
			.detailSetupBox {
				margin: 2em 0;
				padding: 0.5em 0 0 0;
			}
				/* セットアップ種別名 */
				.setupType {
					font-weight: normal;
					margin: 0.5em 0;
					font-size: 1.25em;
				}

		/* ………………………… */
		/* ▼PRODUCTS: 注釈領域 */
		/* ………………………… */
		.noteArea {
			text-align: center;
		}
			.noteArea p {
				display: inline-block;
				text-align: left;
				font-size: 1em;
			}

		/* ………………………… */
		/* ▼パンくずリスト領域 */
		/* ………………………… */
		.pankuzuArea {
			font-size: 1em;
		}

	/* ============ */
	/* ▼フッタ区画 */
	/* ============ */
	footer {
		font-size: 1.2em;
	}

		/* ……………… */
		/* ▼アドレス枠 */
		/* ……………… */
		.addressBox {
			max-width: 900px;
		}
		.addressBox img {
			width: auto;
		}

			/* 電話番号 */
				a.tel {
					padding: 3px 10px 3px 33px;
					background-size: 30px 30px;
					min-height: 30px;
				}

		/* ………………… */
		/* ▼コンタクト枠 */
		/* ………………… */
		.contactBox {
			margin: 2em 0 0 0;
		}
			.contactColumn {
				margin: 3em 0 1em 0;
				display: block;			/* 横並びにしたい場合は、値を inline-block に。 */
				vertical-align: top;
				min-width: 450px;
			}

		/* ………………… */
		/* ▼会社名＋ロゴ */
		/* ………………… */
		.companyNameAndLogo {
			margin: 3em auto;
			line-height: 1.6;
			letter-spacing: 3px;
		}
			.companyLogo {
				width: 300px;
			}
			.associateLogo {
				width: 250px;
			}

		/* ……………………… */
		/* ▼HOMEへ戻るボタン */
		/* ……………………… */
		.back2Home {
			position: absolute;
			bottom: 0px;
			left: 2.5em;
			display: block;
			margin: 0;
			padding: 0;
		}
			.back2HomeButton {
				display: block;
				width: 60px;
				background-image: url("/imgs/car.png");
				background-position: top center;
				background-repeat: no-repeat;
				margin: 0;
				padding: 72px 0 0 0;
				color: #fff;
				text-decoration: none;
				font-size: 0.9em;
			}
			.back2HomeButton:hover {
				color: #000;
			}

		/* …………………… */
		/* ▼サイトマップ枠 */
		/* …………………… */
		.sitemapBox {
			margin: 1.2em 1.2em 0;
			padding: 2em;
			text-align: left;
			line-height: 2.5;
		}

}

/* ======== */
/* ■注釈用 */
/* ======== */
/* ▽モバイル端末での縦向き時のみ表示する注釈 */
@media screen and (min-width: 1024px), screen and (orientation: landscape) {
   .ifPortrait { display: none; }
}



/* ======================= */
/* ■埋め込みツール等用CSS */
/* ======================= */
/* ―――――――――――― */
/* ★ループスライダー用CSS  */
/* ―――――――――――― */
/* ▼loopSlider  */
.loopSliderWrap { top: 0; left: 0; height: 275px; overflow: hidden; position: absolute; text-align: center; }
.loopSliderWrap p { margin:0; padding: 0; }
.loopSlider { margin: 3em auto; width: 100%; height: 270px; text-align: left; position: relative; overflow: hidden; }
.loopSlider ul { height: 265px; float: left; overflow: hidden; }
.loopSlider ul li { padding: 15px; float: left; display: inline; overflow: hidden; border: 1px solid #eeeeee; box-sizing: border-box; }
.loopSlider ul li img { display: block; }
.loopSlider * { margin: 0; padding: 0; }
.loopSliderWrap:after { content: ""; display: none; clear: none; }

.loopBoxTitle { font-size: 1em;  color: #d8abac; }
.loopBoxGuide { font-size: 0.9em; color: #d8abac; }