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

/*------------------------------------------------------------
レスポンシブ用
------------------------------------------------------------*/

/*-----レスポンシブ------*/


/* ウィンドウ幅が0-2800px以上の場合に適用 */
@media screen and ( min-width:2800px )
{

}

/* ウィンドウ幅が0-1520pxの場合に適用 */
@media screen and ( max-width:1520px )
{

#container .margin_t32{
	margin-top: 3.2%;
}

#container .margin_t7{
	margin-top: 7%;
}

#container .margin_b7{
	margin-bottom: 7%;
}

#container .margin_b10{
	margin-bottom: 10%;
}

#design .blue-bk .contents_box{
	background-size: 100% 74vw;
}

}

/* ウィンドウ幅が-576pxの場合に適用 */
@media screen and ( max-width:576px )
{

.pc { display: none !important; }
.sp { display: inline !important; }

#in_contents .contents_box_in{
	width: 95%;
}

#in_contents h2{
	width: 95.5%;
	margin: 10% auto 10% 0;
}

#in_contents .right-img .txt,
#in_contents .right-img .img,
#in_contents .left-img .txt,
#in_contents .left-img .img
{
	float: none;
}

/* -576px Link-btn */

#in_contents .link_btn{
	width: 96%;
	margin: 0 auto 10%;
}

#in_contents .link_btn li{
	width: 100%;
}

#in_contents .link_btn li:first-child{
	margin-right: 0;
	margin-bottom: 2.5%;
}

/* top -576px */

#in_contents #con_top .img{
	margin: 5% auto 8%;
	width: 95%;
}

#in_contents #con_top .img2{
	margin: -4% auto 5%;
	width: 100%;
}

#in_contents #con_top .bnr{
	margin: 0 auto 5%;
	width: 93.5%;
}

#in_contents #con_top .link_btn{
	margin-top: 7%;
}

#in_contents #con_top .txt{
	width: 100%;
	margin: -5% auto 3%;
}

/* feature -576px */

#feature ul{
	width: 90%;
	margin: 0 auto 0;
	text-align: left;
}

#feature .img{
	width: 100%;
}

#feature .txt{
	width: 100%;
	margin-bottom: 2.5%;
}

#feature .feature-note{
	width: 90%;
	margin: -6% auto 12%;
}

/* performance -576px */

#performance ul{
	width: 90%;
	margin: 0 auto 0;
	text-align: left;
}

#performance .img{
	width: 100%;
	margin-bottom: 5%;
}

#performance .txt{
	width: 100%;
	margin-bottom: 1%;
}

/* #design -576px */

#design .blue-bk .contents_box{
	background: url("https://kagawa-toyota.jp/file/special/07201/14420/new-aqua/img/design-bk-sp.png")no-repeat top;
	background-size: 100% 79vw;
}

#design h2{
	margin-top: 8%;
	margin-bottom: 7%;
	width: 95%;
	padding-top: 2.5%;
}

#design-popup-area .car-img{
	width: 55%;
	padding-left: 0%;
}

#design-popup-area .btn{
	width: 20%;
}

#design-popup-area #openModal-01 .btn{
	top: -2.5%;
	right: 4%;
}

#design-popup-area #openModal-02 .btn{
	top: 9.2%;
	right: 12.5%;
}

#design-popup-area #openModal-03 .btn{
	top: 16%;
	right: 31.7%;
}

#design-popup-area #openModal-04 .btn{
	top: 19%;
	right: 54%;
}

#design-popup-area #openModal-05 .btn{
	top: 19%;
	right: 76.5%;
}

.modalWrapper {
	width: 90%;
}

.closeModal {
	top: -3%;
	right: -3%;
	font-size: 8vw;
}

#design .f-img{
	bottom: 66.5%;
	right: 8%;
	width: 7.5%;
}

#design ul{
	width: 90%;
	margin: -5% auto 0;
	text-align: left;
}

#design .img,
#design .yellow-bk .img
{
	width: 100%;
}

#design .txt,
#design .yellow-bk .txt
{
	width: 100%;
	margin-bottom: 1%;
}

#design .img{
	padding-top: 6%;
}

#design .yellow-bk .note img{
	margin: 7% auto 0;
}

/* スライド共通 -576px */
#in_contents #design .movie_slider ul{
	width: 100%;
	margin: 0 auto 12%;
	text-align: center;
}

#in_contents .pre_btn{
	width: 2.8%;
}

#in_contents .next_btn{
	width: 2.8%;
}

#in_contents .slider_m{
	margin: 7% auto 8%;
}

#in_contents .slider_m .pre_btn{
	width: 4%;
	left: 1%;
	top: 45%;
	filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

#in_contents .slider_m .next_btn{
	width: 4%;
	right: 1%;
	top: 45%;
	filter: invert(88%) sepia(61%) saturate(0%) hue-rotate(229deg) brightness(107%) contrast(101%);
}

/* color -576px */

#color h2{
	margin-bottom: 5.5%;
}

#color .img{
	width: 96%;
	margin: 0 auto 8%;
}

/* aero-package -576px */

#aero-package h2{
	margin-top: 5%;
	margin-bottom: 5%;
}

#aero-package .img img{
	width: 100%;
	margin: 0 auto 3%;
}

/* aero-package -576px */

#price-grade h2{
	margin-bottom: 0;
}

#price-grade ul{
	margin-top: 5%;
}

#price-grade li {
    width: 42.5%;
}

#price-grade #plan h3{
	width: 90%;
}

#price-grade #plan ul{
	width: 90%;
	margin: 7% auto 0;
	text-align: left;
}

#price-grade #what-plan ul{
	width: 90%;
	margin: 1% auto 0;
	text-align: left;
}

#price-grade #what-plan .img{
	width: 100%;
	float: none;
	margin: 5% auto 6%;
}

#price-grade #what-plan .txt{
	width: 100%;
	float: none;
}

#price-grade #what-plan .note{
	width: 100%;
	margin: 4.5% auto 0;
}

/* footer -576px */

#f_linkbtn .link_btn{
	padding-top: 7.8%;
	padding-bottom: 11%;
}

/* topへ戻る -576px */
	
#topBtn {
    position: fixed;
    bottom: 7px;
    right: 16px;
	width: 15%;
	text-align: right;
}

#topBtn img{
	width: 100%;
	height: auto;
}

}