@charset "utf-8";

/* ++++++++++++++++++++++++++++++++++++++++

	/dog/honda-car/N-VAN/ for SP

++++++++++++++++++++++++++++++++++++++++ */

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

#contents_area {
	background-image: url(../image/bg_sp.jpg);
	letter-spacing: -.04em;
	font-size: 16px;
	font-size: -webkit-calc(16 * 100vw / 320);
	font-size: calc(16 * 100vw / 320);
	line-height: 2;
}


/* ----------------------------------------
	section_title
---------------------------------------- */

#section_title {
	margin: 0;
	padding: 153.75% 8.33% 18.75%;
	background-image: url(../image/title_sp.png);
	text-align: left;
	line-height: inherit;
}


/* ----------------------------------------
	section_info
---------------------------------------- */

#section_info {
	width: auto;
	margin: 0 8.33%;
	background-image: url(../image/info_bg_sp.png);
}

#profile {
	position: relative;
	margin-bottom: 0;
	padding: 7.5% 0 15%;
	background: none;
}

#section_info .title {
	width: 59.25%;
}

#profile ul,
#profile li {
	background-image: url(../image/profile_border.png);
}
#profile ul {
	display: block;
	width: 86.5%;
	margin: 71.5% auto 0;
}
#profile li {
	padding-left: 7.22%;
}

#profile .photo {
	position: absolute;
	left: 26.25%;
	top: 0;
	width: 47.5%;
	padding-top: 29%;
}

#profile .size {
	width: 91.25%;
	margin: 11% 0 0 5.5%;
}


/* ----------------------------------------
	section_reason
---------------------------------------- */

.section_reason .section_inner,
#section_car .section_inner {
	margin: 0 8.33%;
}

.section_reason h3 {
	position: relative;
	width: 58.75%;
	margin-bottom: 12%;
}
.section_reason h3:before {
	content: '';
	position: absolute;
}

.section_reason .heading,
.section_reason .text {
	width: auto;
}
.section_reason .heading h3+p {
	letter-spacing: .02em;
	font-size: inherit;
	line-height: 2;
}

.section_reason h4,
.section_reason .column h5,
#seatarrange .passenger h6 span {
	font-size: 22px;
	font-size: -webkit-calc(34 * 100vw / 480);
	font-size: calc(34 * 100vw / 480);
	line-height: 1.47;
	line-height: -webkit-calc(50 * 100vw / 480);
	line-height: calc(50 * 100vw / 480);
}

.section_reason .notes {
	font-size: 12px;
	font-size: -webkit-calc(12 * 100vw / 320);
	font-size: calc(12 * 100vw / 320);
}

.section_reason .photo {
	position: relative;
}

.section_reason .photo_slide {
	padding-bottom: 23.75%;
}

.section_reason .slick-slide img {
	padding-bottom: 4%;
}

.section_reason .photo_slide .slick-arrow {
	width: 16%;
	height: 0;
	bottom: 0;
	padding-top: 16%;
	background: 50% 50% no-repeat;
	background-size: contain;
}

.section_reason .photo_slide .slick-prev {
	left: 4.5%;
	background-image: url(../image/slider_btn_prev.png);
}

.section_reason .photo_slide .slick-next {
	right: 4.5%;
	background-image: url(../image/slider_btn_next.png);
}

.section_reason .slick-dots {
	position: absolute;
	top: auto;
	bottom: 0;
	height: 0;
	padding-top: 16%;
}
.section_reason .slick-dots li {
	position: relative;
	width: 5%;
	height: 0;
	margin: -10.5% 5px 0;
	padding-top: 5%;
	vertical-align: top;
}
.section_reason .slick-dots li button {
	position: absolute;
	left: 0;
	top: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0 !important;
	background: none !important;
}
.section_reason .slick-dots li button:before {
	display: block;
	box-sizing: border-box;
	left: 20%;
	top: 20%;
	width: 60%;
	height: 60%;
	border: solid 1px #909c5d;
	border-radius: 50%;
	background: #909c5d;
}

.section_reason .slick-dots .slick-active button:before {
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #fff;
}

.section_reason .photo_slide .slick-dots li button:after {
	display: none;
}

.photo_size .slick-slider {
	padding-bottom: 7%;
}

.photo_size .slick-dots {
	padding-top: 5%;
}
.photo_size .slick-dots li {
	margin-top: -5%;
}

.accessory_title {
	padding-left: 12%;
	background: url(../image/accessory_icon.png) 0 0 no-repeat;
	background-size: auto 100%;
	letter-spacing: .02em;
	line-height: 20px;
	line-height: -webkit-calc(20 * 100vw / 320);
	line-height: calc(20 * 100vw / 320);
}

.accessory .name {
	white-space: nowrap;
	color: #909c5d;
	font-weight: bold;
}
.accessory .name small {
	display: block;
	font-size: 12px;
	font-size: -webkit-calc(12 * 100vw / 320);
	font-size: calc(12 * 100vw / 320);
	text-indent: -.5em;
}

.btn_detail {
	display: block;
	overflow: hidden;
	width: 78%;
	height: 0;
	margin: auto;
	padding-top: 12.25%;
	background: url(../image/btn_detail_sp.png) 50% 0 no-repeat;
	background-size: contain;
}

/* secion_reason01
---------------------------------------- */

#section_reason01 {
	margin-top: 21.875%;
}
#section_reason01 h3 {
	margin-bottom: 8%;
}

#section_reason01 .mv {
	margin-top: 8%;
}

/* style */

#style {
	margin-top: 24.5%;
}

#style p {
	text-align: center;
	line-height: 1;
}
#style p img {
	width: 60.25%;
	margin: auto;
	padding-bottom: 0;
}

#style_side>div {
	margin: 0 -10%;
	padding: 8.25% 0 6%;
}
#style_side>div img {
	padding-bottom: 0;
}

#style_back li img {
	padding-top: 2%;
}

#style_back .copy {
	position: absolute;
	right: -2.25%;
	top: 0;
	width: 29.75%;
	padding-top: 11%;
}
#style_back .copy img {
	width: auto;
}

#style_back .slick-slider {
	padding-bottom: 0;
}

#style_back .slick-dots {
	display: none !important;
}

#style_back .btn,
#style_back .btn:before {
	background: url(../image/btn_size_pc.png) 100% 0 no-repeat;
	background-size: auto 200%;
}
#style_back .btn {
	display: block;
	overflow: hidden;
	position: absolute;
	right: 10%;
	top: 75%;
	width: 17%;
	height: 0;
	padding-top: 8%;
	text-indent: 100%;
}
#style_back .btn:before {
	content: '';
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-position: 100% 100%;
	transition: .2s;
}
#style_back .btn.on:before  {
	opacity: 1;
}

/* carrycase */

#carrycase {
	margin-top: 28%;
}
#carrycase li p {
	text-align: center;
	line-height: 1;
}

/* column */

#section_reason01 .column {
	width: auto;
	margin-top: 28%;
	padding: 27px 7.5% 35px;
	background-image: url(../image/reason01/column_bg_sp.png);
}
#section_reason01 .column h4 {
	width: 56.47%;
	margin-bottom: 5.88%;
}

#section_reason01 .column .photo {
	margin-bottom: 5.88%;
}
#section_reason01 .column .photo img {
	margin-bottom: 4.7%;
}

#section_reason01 .column small {
	display: block;
	margin-top: 5.88%;
	font-size: 12px;
	font-size: -webkit-calc(12 * 100vw / 320);
	font-size: calc(12 * 100vw / 320);
	line-height: 1.55;
	line-height: -webkit-calc(28 * 100vw / 480);
	line-height: calc(28 * 100vw / 480);
}

/* interior */

#interior {
	margin-top: 1.5%;
}
#interior h4,
#seatarrange h4 {
	-webkit-transform: scaleX(1);
	transform: scaleX(1);
}
#interior h4 {
	margin-bottom: 6%;
}
#interior>div {
	position: relative;
	z-index: 1;
}

#interior .copy {
	position: absolute;
	left: 0;
	z-index: 2;
	margin: 0 -10%;
}

#interior .slick-slide img {
	padding-bottom: 0;
}

#interior>div:nth-child(even) .slick-dots {
	left: 7.5%;
}

#interior>div:nth-child(odd) .slick-dots {
	left: -7.5%;
}

#interior .photo+p {
	margin-top: 3%;
}
#interior>div:nth-child(even) .photo+p {
	margin-left: 15%;
}
#interior>div:nth-child(odd) .photo+p {
	margin-right: 15%;
}

#interior #interior01 {
	padding-top: 35.5%;
}

#interior01 .copy {
	top: -34.05%;
}

#interior #interior02 {
	margin-top: 9%;
	padding-top: 27%;
}

#interior02 .copy {
	top: -26.08%;
}

/* seatarrange */

#seatarrange {
	margin-top: -4%;
	padding-bottom: 18%;
}
#seatarrange:before {
	content: '';
	position: absolute;
	left: -10%;
	right: -10%;
	bottom: 0;
	padding-top: 10%;
	background: url(../image/reason01/seatarrange_foot_sp.png) 50% 100% no-repeat;
	background-size: 100%;
}
#seatarrange>div+div {
	margin-top: 22.5%;
	padding-top: 16.5%;
	background: url(../image/reason01/seatarrange_border_sp.png) 50% 0 no-repeat;
	background-size: 100%;
}
#seatarrange h4 {
	margin: 0 -10%;
}

#seatarrange .passenger {
	position: relative;
	margin-top: 13.5%;
}
#seatarrange .passenger h6 {
	text-align: center;
	white-space: nowrap;
	-webkit-transform-origin: 50% 0;
	-webkit-transform: scaleX(.8);
	transform-origin: 50% 0;
	transform: scaleX(.8);
}
#seatarrange .passenger h6 span,
#seatarrange .passenger h6 small {
	display: block;
	margin: 0 -50%;
	letter-spacing: .1em;
	line-height: 1;
}
#seatarrange .passenger h6 small {
	margin-top: 4%;
	font-size: 18px;
	font-size: -webkit-calc(28 * 100vw / 480);
	font-size: calc(28 * 100vw / 480);
}
#seatarrange .passenger p,
#seatarrange .passenger figure {
	margin-top: 4.5%;
}

#seatarrange>div>figure {
	margin-top: 7.5%;
}

#seatarrange .note {
	position: absolute;
	right: 0;
	z-index: 2;
	margin-top: 2%;
	text-align: right;
	white-space: nowrap;
	font-size: 11px;
	font-size: -webkit-calc(16 * 100vw / 480);
	font-size: calc(16 * 100vw / 480);
	line-height: 1;
}

#seatarrange .accessory {
	position: relative;
	z-index: 1;
	margin: 12.5% 0 0;
}

#seatarrange .accessory_title {
	margin-left: 11%;
}

#seatarrange .accessory ul {
	margin-top: 5%;
}
#seatarrange .accessory li {
	position: relative;
}
#seatarrange .accessory li+li {
	margin-top: 14.5%;
}
#seatarrange .accessory li:before {
	content: '';
	position: absolute;
	bottom: 100%;
	background: 50% 0 no-repeat;
	background-size: contain;
}
#seatarrange .accessory li>div {
	position: relative;
	margin: 0 11.25%;
}

#seatarrange .accessory .name+p {
	margin-top: 1%;
}

#seatarrange .accessory li figure {
	margin-top: 4%;
}

#seatarrange .accessory .btn_detail {
	margin-top: 4.5%;
}

#seatarrange01 .accessory [data-accessory='1']:before {
	left: 4.75%;
	width: 59.75%;
	margin-bottom: -7%;
	padding-top: 58.5%;
	background-image: url(../image/reason01/seatarrange01_accessory01_line_sp.png);
}

#seatarrange01 .accessory [data-accessory='2']:before {
	right: -1%;
	width: 22.75%;
	margin-bottom: -13%;
	padding-top: 274%;
	background-image: url(../image/reason01/seatarrange01_accessory02_line_sp.png);
}

#seatarrange02 .accessory [data-accessory='1']:before {
	left: 33%;
	width: 12.5%;
	margin-bottom: 13%;
	padding-top: 46.5%;
	background-image: url(../image/reason01/seatarrange02_accessory01_line_sp.png);
}

/* secion_reason02
---------------------------------------- */

#section_reason02 {
	margin-top: 46.25%;
}
#section_reason02 h3:before {
	left: -28.51%;
	top: -83.4%;
	width: 27.23%;
	height: 99.17%;
	background: url(../image/reason02/title_deco_sp.png) 50% 0 no-repeat;
	background-size: contain;
}
#section_reason02 .heading+ul {
	margin-top: 10.5%;
}
#section_reason02 [data-num]+li {
	margin-top: 18%;
}
#section_reason02 .photo {
	margin-top: 5.5%;
}

#section_reason02 [data-num='1'] .photo figure {
	padding-left: 28.5%;
}

#section_reason02 [data-num='1'] .icon {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 25%;
}
#section_reason02 [data-num='1'] .icon li {
	margin-bottom: 12.5%;
}

#section_reason02 [data-num='2'] .accessory {
	margin-top: 7%;
}

#section_reason02 [data-num='2'] .accessory .name {
	margin: 1% 0 0 12%;
}

#section_reason02 [data-num='2'] .photo {
	margin-top: 4%;
}

#section_reason02 [data-num='2'] .btn_detail {
	margin-top: 7%;
}


/* ----------------------------------------
	section_car
---------------------------------------- */

#section_car {
	margin-top: 4.16%;
	padding-top: 48.75%;
}
#section_car:before {
	content: '';
	position: absolute;
	left: 8.33%;
	right: 8.33%;
	top: 0;
	padding-top: 43.75%;
	background: url(../image/car_deco_sp.png) 50% 0 no-repeat;
	background-size: 100%;
}
#section_car h3 {
	position: relative;
	text-align: center;
	letter-spacing: .02em;
	font-size: 16px;
	font-size: -webkit-calc(16 * 100vw / 320);
	font-size: calc(16 * 100vw / 320);
	line-height: 1;
}
#section_car h3 strong {
	display: block;
	margin-top: 6%;
	letter-spacing: .04em;
	font-size: 22px;
	font-size: -webkit-calc(34 * 100vw / 480);
	font-size: calc(34 * 100vw / 480);
	line-height: 1.5;
}
#section_car figure {
	overflow: hidden;
	margin-top: 10.625%;
}
#section_car figure img {
	width: 115%;
	max-width: 115%;
	margin-left: -9%;
}

#section_car .heading .caution {
	font-size: 18px;
	font-size: -webkit-calc(26 * 100vw / 480);
	font-size: calc(26 * 100vw / 480);
	line-height: 26px;
	line-height: -webkit-calc(40 * 100vw / 480);
	line-height: calc(40 * 100vw / 480);
}
#section_car .heading .caution span {
	width: 200%;
	margin-left: -50%;
}

#section_car .btn {
	width: auto;
	margin-top: 5%;
	padding-left: 12.5%;
	background: #909c5d;
	text-align: left;
	letter-spacing: .02em;
	font-size: inherit;
}
#section_car .btn+p {
	margin-top: 10.5%;
}

}