@charset "utf-8";
/* CSS Document */


/*
=========================================
	Base Layout
=========================================

/**/
/* =====================================
 このコンテンツのdiv内のみをリセット
===================================== */
.container_inner{color:#000;background:#ffcf5}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-weight:inherit;font-size:100%}
legend{color:#000}

.container_inner {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
         -o-box-sizing: border-box;
        -ms-box-sizing: border-box;
            box-sizing: border-box;
}

/*
////
　　base
※ここはいじらない
　　　　　　　　//////
*/

/* =====================
  pankuzu
===================== */
div#container .maintitle02{
font-weight: bold;
}

ul.topicpath02{
margin: 0;
padding: 0;
}

.pankuzu{
padding: 0 15px 0 15px !important;
}

/* =====================
  PC横幅可変
===================== */
div#container{
min-width: auto !important;
min-width: 960px;
text-size-adjust: 100%;
}

div#container .container_inner{
position: relative;
max-width: 960px !important;
margin: 0 auto;
}

/* =====================
  img初期化
===================== */
div#container .img{
border: 0;
vertical-align: bottom !important;
max-width: 100%;
}

/* =====================
  画像センタリング用
===================== */
#container_inner .center{
max-width: 960px;
margin: 0 auto;
text-align: center;
}

/* =====================
  clearfix
===================== */
.clearfix:after {
content: ""; 
display: block; 
clear: both; 
}

.clearfix{
zoom:1;
}

/* =============================
  pc用とsp用のレイアウト切り替え
============================= */
.pc {
	display: block;
}
.sp {
	display: none;
}


/*
////
　　pcレイアウト
　　　　　　　　//////
*/


#titleimg {
	width: 100%;
    background-image: url(https://www.mapcamera.com/html/topnotch/images/mainbg30.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 500px;
}
	
.inner{
	max-width: 960px;
	margin: 0 auto;
}


/* =============================
  youtube
============================= */
.youtube {
	max-width: 98%;
	padding: 0;
	box-sizing: border-box;
}

.youtube .inner {
	padding-top: 56.25%;
	position: relative;
	height: 0;
	overflow: hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 90%;
	height: 90%;
}



/*================
背景指定
================*/

.bg01{
	background: #fffcf5;/*背景色01*/
	padding-top: 1.5%;
	padding-bottom: 4%;
}

.bg02{
	background: #cad2c7;/*背景色02*/
	padding-bottom: 0;
}
.bg03{
	background: #f7f0de;/*背景色03*/
	padding-bottom: 0;
}


#container .midashi_box {
  width: 700px;
  background: #f7f0de;
  padding: 30px 25px 20px 35px;
  margin: 10px auto 15px;
}
#container .midashi_box a {
  color: #000;
  line-height: 2;
}
#container .midashi_box .al_rig {
  text-align: right;
  margin-top: 20px;
}



/*ボタン*/
#container .btn {
  background: #f7f0de;
  text-align: center;
  font-size: 1.0rem;
  margin-bottom: 50px;
  margin: 30px 27% 50px;
  border-radius: 5px;
  color: #000;
border: 1px solid #000;
}
#container .btn a {
  padding: 5px 5px;
  display: block;
  color: #000;
text-decoration: none;
}
#container .btn:hover {
  opacity: 0.5;
  transition: 0.3s;
  filter: alpha(opacity=70);
  -ms-filter: "alpha(opacity=70)";
}


/*================
タイトル指定
================*/
#container .title_bg01{
	padding: 1% 0;
	text-align: center;
}

#container .title_bg02{
	padding: 0.5% 0;
}

/*タイトル用*/
#container .level1{
	display: inline-block;
  line-height: 1.2;
	color: #000;
  font-size: 160%;
letter-spacing: 3px;
  height: 30px;
  padding: 1% 1%;
  text-align: center;
}

/*大見出し用*/
#container .level2{
	padding: 1%;
	margin: 2% 0 1% 1%;
	display: inline-block;
  line-height: 2.0;
	color: #000;
font-weight: 600;
  font-size: 140%;
	letter-spacing: 4px;
	text-align: center;
}


#container .title_center{
	text-align: center;
}

#container .title_left{
	text-align: left;
}
#container .title_right{
	text-align: right;
}


/*================
テキスト
================*/
#container .text{
	text-align: center;
	font-size: 100%;
	line-height: 1.8;
	padding: 1%;
	color: #000;
}
#container .text a{
	text-decoration: none;
	color: #000;
}

#container .text a:hover{
  background: #000;
  color: #fff;
}


#container .kakoi {
  margin: 0 auto 60px;
  display: inline-block;
  line-height: 2;
  letter-spacing: 1px;
  text-align: center;
  color: #000;
  padding: 0px 20px;
  border-radius: 3px;
}




/*================
左画像+右テキスト
================*/
.left_img{
	float: left;
	width: 50%;
	margin: 0 2%;
}

.right_text{
	color:#000;
	text-align: left;	
	line-height: 1.8;
	padding: 60px 2% 1%;
}
.center_text{
	font-size: 100%;
	text-align: center;
	line-height: 1.8;
	padding: 20px 2% 1% ;
	color: #000;
}
.center_text a{
	color: #000;
}


/*================
右画像+左テキスト
================*/
.right_img{
	float: right;
	width: 50%;
	margin: 0 2%;
}

.left_text{
	text-align: left;	
	color: #000;
	line-height: 2.0;
	padding: 1% 2%;
}



/*================
2カラム画像
================*/
.column2_img{
	float: left;
	width: 48%;
	margin-right: 2%;
	margin-bottom: 4%;
}

.column2_text{
	padding: 2%;
	font-size: 100%;
	line-height: 2.0;
	text-align: justify;
}





/*================
1個画像、バナーのセンタリング
================*/
.single_img{
	text-align: center;
	margin-bottom: 2%;
}

/*================
バナー用罫線
================*/
.boeder{
	border: solid 1px #000;
}


/*================
トップへ戻る
================*/	
#l_main .pageup{
	text-align: right;
}

#l_main .pageup a{
	color: #000;
	font-size: 14px;
	text-decoration: underline;
	
}

#l_main .pageup a:hover{
	text-decoration: none;
}


/*================
追尾ボタン
================*/	
/*全体を囲むボックスを基点とする*/
.container {
	position: relative;
}

/*円の位置設定*/
.back-to-top {
	position: fixed;
	right: 35px;
	bottom: 165px;
	color: #fff;
	width: 100px;
	height: 100px;
	z-index: 2;
/*円の重なりを最前面にする*/
	display: none;
}

/*円のサイズ、位置はfixedで行います*/
.back-to-top:before {
	content: "";
	display: block;
	width: 100px;
	height: 100px;
	border-radius: 100px;
	-webkit-border-radius: 10px;
	behavior: url(css/PIE.htc);
	position: absolute;
	right: 0;
	bottom: 0;
	background: #E10205;/*赤*/
}

/*テキストの設定、位置はfixedで行います*/
.back-to-top:after {
	content: "中古商品を見る";/*1行　<br>はできません*/
	display: block;
	text-align: center;
	width: 100px;
	height: 100px;
	line-height: 100px;
	position: absolute;
	right: 0;
	bottom: 0;
	color: #fff;/*白*/
	font-size: 12px;
}

/*================
動画
================*/
.movie{
	text-align: center;
	background: #000;
}

.movie iframe{
	margin: 2% 0 3% 0;
	width:800px;
	height: 450px;
}

#l_main .comment{
	padding: 1% 0;
  display: inline-block;
}

/*================
余白
================*/
#container .mt10{
	margin-top: 10px
}

#container .mt20{
	margin-top: 20px
}
#container .mt30{
	margin-top: 30px
}
#container .mt50{
	margin-top: 50px
}

#container .mb10{
	margin-bottom: 10px
}
#container .mb20{
	margin-bottom: 20px
}
#container .mb30{
	margin-bottom: 30px
}
#container .mb50{
	margin-bottom: 50px
}


table .youtube {
    border-spacing: 20px;
}



/*
////
　　spレイアウト
　　　　　　　　//////
*/

@media screen and (max-width: 800px) {
	/*================
フロート解除
================*/
.img_box{
	width: 95%;
	}
#container_inner .center{
max-width: 95%;
margin: 0 auto;
text-align: center;	
}
	
	
	
/*================
テキスト
================*/
.text{
	font-size: 100%;
}	

	/*================
左画像+右テキスト
　フロート解除
================*/
.left_img{
	float: none;
	width: 80%;
	padding-top: 1%;
	margin-bottom: 2%;
	margin-right: 0;
}

.right_text{
	float: none;
	width: 90%;
	text-align: left;
	color: #000;
	padding: 2% 4%;
  box-sizing: border-box;
}
	
.center_text{
	float: none;
	text-align: center;
	font-size: 100%;
	color: #000;
  box-sizing: border-box;
}	


/*================
右画像+左テキスト
	フロート解除
================*/
	.right_img{
	float: none;
	width: 80%;
	padding-top: 1%;
	margin-bottom: 2%;
	margin-left: 0;
}

.left_text{
	float: none;
	width: 90%;
	text-align: left;
	padding: 2% 4%;
  box-sizing: border-box;
}

/*================
2カラム画像
================*/
.column2_text{
	float: none;
	text-align: left;
	padding: 1%;
}
	
}





@media screen and (max-width: 640px) {

/*
////
　　base
※ここはいじらない
　　　　　　　　//////
*/
	/* =====================
  パターン背景適用
===================== */
#titleimg {
	width: 100%;
    background-image: url(https://www.mapcamera.com/html/topnotch/images/mainbg30.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 600px;
}
	
/* =====================
  h1
===================== */
#staticHtmlBody h1{
	margin-bottom: 0;
}

#staticHtmlBody ul.topicpath{
margin: -5px auto 5px;/*スマホと調整*/
}	
	
	
/* =====================
  pankuzu
===================== */
div#container .maintitle02{
font-weight: normal;
}

.pankuzu{
padding: 0!important;
}
/*↑ここまではいじらないでください↑*/	
	
	
/*
////

　　　　　　　　//////
*/	
	

/*↓ここからスマホ設定↓*/		
.pc {
	display: none;
}
.sp {
	display: block;
}
	
/*================
背景
================*/
.bg01 {
  padding-bottom: 8%;
}
	
.bg02 {
  padding-bottom: 8%;
}
	
.bg03 {
  padding-bottom: 8%;
}	
	
.inner{
	max-width: 88%;
	margin: 0 auto;
}	
	
#container .midashi_box {
  max-width: 85%;
  background: #f7f0de;
  padding: 30px 25px 20px 35px;
  margin: 10px auto 15px;
}
#container .midashi_box a {
  color: #000;
  line-height: 2;
}
#container .midashi_box .al_rig {
  text-align: right;
  margin-top: 20px;
}
	
	
/*================
タイトル指定
================*/
	.title_bg01 {
  padding: 1% 1% 0 1%;
	text-align: left;
}
	
	.level1{
	padding: 1% 1%;
  font-weight: 800;
  font-size: 140%;
	letter-spacing: 1px;
	line-height: 1.2;
}
	
	
	.level2{
	margin-left: 2%;
	text-align: center;
	padding: 1% 1%;
	color: #000;
font-weight: 600;
  font-size: 160%;
}
	
/*================
テキスト
================*/
.text {
  font-size: 100%;
  line-height: 1.8;
color: #000;
  /*padding: 1% 3%;*/
	text-align: justify;
}
	
	/*================
フロート解除
================*/
.img_box{
	width: 100%;
	text-align: center;
	}	
	
/*================
左画像+右テキスト
　フロート解除
================*/
.left_img{
	float: none;
	width: 100%;
	padding-top: 1%;
	margin-bottom: 2%;
	margin-right: 0;
}

.right_text{
	float: none;
	width: 100%;
	font-size: 100%;
	text-align: left;
	padding: 1% 3%;
	text-align: justify;
  box-sizing: border-box;
}

/*================
右画像+左テキスト
	フロート解除
================*/
	.right_img{
	float: none;
	width: 100%;
	padding-top: 1%;
	margin-bottom: 2%;
	margin-left: 0;
}

.left_text{
	float: none;
	width: 100%;
	text-align: left;
	padding: 1% 3%;
	text-align: justify;
  box-sizing: border-box;
}
	
	
/*================
2カラム画像
================*/
.column2_img{
	float: none;
	width: 100%;
	padding-top: 1%;
	padding-bottom: 8%;
	margin-bottom: 2%;
	margin-right: 0;
	text-align: center;
}

.img_80{
width: 100%;
}

.column2_text{
	float: none;
	font-size: 100%;
	text-align: left;
	padding: 1% 3%;
	text-align: justify;
}
	
	

	
/*================
1個画像、バナーのセンタリング
================*/
.single_img{
	text-align: center;
	width: 80%;
  margin: 3% auto 4%;
}
	
	
.back-to-top {/*円の位置設定*/
	position: fixed;
	right: 20px;
	bottom:10px;
}
	

	

/* =============================
  youtube
============================= */
.youtube {
	max-width: 100%;
	padding: 0;
	box-sizing: border-box;
}
.youtube .iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 90%;
	height: 90%;
}
	


	
}