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

/*------------------------------------------------------------
	2021/7　制作
------------------------------------------------------------*/

/*-----common------*/

#in_contents div:after{
	content: " ";
	display: block;
	visibility: hidden;
	clear: both;
	height: 0.1px;
	font-size: 0.1em;
	line-height: 0;
}

body { font-family:"Yu Gothic", "游ゴシック", YuGothic, "游ゴシック体", 'メイリオ', Meiryo, "ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, "MS Pゴシック", "MS PGothic", Arial, Helvetica, Verdana, sans-serif; 
 /*overflow-x: hidden;*/}

#in_contents{
	width: 100%;
	height: auto;
	background-color: white;
	margin: 0 auto;
	overflow:auto;
}

#in_contents ul:after{
	clear: both;
}

#in_contents .contents_box{
	width: 100%;
	height: auto;
	max-width: 1520px;
	margin: 0 auto;
	position: relative;
	text-align: center;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}

#in_contents .contents_box_in{
	width: 80.13%;
	height: auto;
	max-width: 1218px;
	margin: 0 auto;
	position: relative;
}

#in_contents h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}

#in_contents nav, section, article, hgroup {
	display: block;
}

#in_contents a{
	outline: none;
	font-size: 0;
}

#in_contents a:hover{
	filter:brightness(120%);
	opacity: 0.8;
}

#in_contents img{
	vertical-align:bottom;
	border: 0;
	font-size: 0;/* inline-block隙間対応 */
	width: 100%;
	height: auto;
	-webkit-backface-visibility: hidden;/* Chromeなど画像ボケ対応 */
}

#in_contents .gray-bk{
	background: #e6e6e6;
}

#in_contents .blue-bk{
	background: #c7e0f1;
}

#in_contents .yellow-bk{
	background: #fffbd3;
}

#in_contents * {
	margin: 0px;
	padding: 0px;
}

#in_contents *:focus {/* chrome画像フォーカス時の線を消す */
	outline: none;
}

#in_contents .margin_t32{
	margin-top: 45px;/* 約3.2% */
}

#in_contents .margin_t7{
	margin-top: 98px;/* 約7% */
}

#in_contents .margin_b7{
	margin-bottom: 98px;/* 約7% */
}

#in_contents .margin_b10{
	margin-bottom: 140px;/* 約10% */
}

/* パソコン画像表示 */
.pc { display: inline !important; }
.sp { display: none !important; }

/*----- 共通 ------*/

#in_contents .link_btn{
	margin-bottom: 5%;
	text-align: center;
}

#in_contents .link_btn li{
	display: inline-block;
	width: 36.316%;
}

#in_contents .link_btn li:first-child{
	margin-right: 5%;
}

#in_contents h2{
	width: 90.59%;
	margin: 7% auto 3% 0;
}

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

#in_contents .right-img .img{
	float: right;
}

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

#in_contents .left-img .img{
	float: left;
}

/*-----top------*/

#in_contents #con_top{
	width: 100%;
	height: auto;
	text-align: center;
}

#in_contents #con_top h1{
	max-width: 2800px;
	margin: 0 auto;
}

#in_contents #con_top .img{
	margin: 7% auto;
	width: 82.37%;
}

#in_contents #con_top .img2{
	margin: 7% auto;
	width: 85.65%;
}

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

#in_contents #con_top .txt{
	width: 98%;
	margin: -2% auto 0;
}

/*-----grsport------*/

#grsport .img img{
	width: 84.21%;
	max-width: 1280px;
	margin: 0 auto 3% 0;
}

/*-----feature------*/

#feature ul{
	width: 80%;
	margin: 8% auto 0;
	text-align: left;
	overflow:hidden;
}

#feature .img{
	width: 46.5%;
}

#feature .txt{
	width: 50.36%;
}

#feature .note img{
	width: 100%;
	margin-left: 0.3%;
	margin: 2% auto 0 0.4%;
}

#feature li{
	overflow:hidden;
	margin-bottom: 12%;
}

#feature .feature-note{
	width: 80%;
	margin: -3.5% auto 10%;
}

/*-----performance------*/

#performance h2{
	margin-top: 8%;
}

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

#performance .img{
	width: 46.5%;
}

#performance .txt{
	width: 50.36%;
}

#performance .note img{
	width: 75.71%;
	margin-left: 0.3%;
	margin: 2% auto 0 0.4%;
}

#performance li{
	overflow:hidden;
	margin-bottom: 9.7%;
}

/*-----design------*/

#design .blue-bk .contents_box{
	background: url("https://kagawa-toyota.jp/file/special/07201/14420/new-aqua/img/design-bk.png")no-repeat top;
	background-size: 100% 1139px;
	font-size: 0;
	line-height: 0;
}

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

#design-popup-area{
	position: relative;
}

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

#design-popup-area .btn{
	position: absolute;
	width: 17.04%;
}

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

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

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

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

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

button {
    width: auto;
    padding:0;
    margin:0;
    background:none;
    border:0;
    font-size:0;
    line-height:0;
    overflow:visible;
	cursor: pointer;
}

#design-popup-area .btn-01{
	display: block;
	transition-duration: 0.3s;
}
#design-popup-area .btn:hover {
	transform: scale(1.1);
	transition-duration: 0.3s;
	cursor: pointer;
	filter: drop-shadow(3px 2px 5px rgba(0, 0, 0, .4));
}

/* popup */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.modalBg {
	width: 100%;
	height: 100%;
	background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	transform:translate(-50%,-50%);
	width: 70%;
	max-width: 1396px;
}

.closeModal {
	position: absolute;
	top: 0.5%;
	right: 1%;
	cursor: pointer;
	font-size: 18px;
	color: white;
}

#design .f-img{
	position: absolute;
	bottom: 38%;
	right: 14%;
	width: 7.5%;
}

#design ul{
	width: 80%;
	margin: 0 auto;
	text-align: left;
	overflow: hidden;
}

#design .img{
	width: 44%;
}

#design .txt{
	width: 50.5%;
}

#design li{
	overflow:hidden;
	margin-bottom: 9.7%;
}

/*スライド*/

/*スライドをdesign中へ移動のため調整*/
#in_contents #design .movie_slider ul{
	width: 100%;
	margin: 3% auto 10%;
	text-align: center;
	overflow: visible;
}

#in_contents #design .movie_slider li{
	overflow: visible;
	margin-bottom: 0;
}
/*design中へ移動のため調整 ここまで*/

#in_contents .slick-arrow:hover{
	opacity: 0.5;
	cursor: pointer;
}

#in_contents .pre_btn{
	position: absolute;
	z-index: 10;
	width: 1.9%;
	left: -4%;
	top: 46.5%;
}

#in_contents .next_btn{
	position: absolute;
	width: 1.9%;
	right: -4%;
	top: 46.5%;
}

#in_contents .slider_m{
	width: 90%;
	margin: 10% auto 2%;
	background: url("https://kagawa-toyota.jp/file/special/07201/14420/new-aqua/img/movie_slide/m_back.png")no-repeat;
	background-size: 100% 100%;
	z-index: 0;
}

#in_contents .slider_m li{
	position: relative;
	overflow: hidden;
}
#in_contents .slider_m li::before{
	padding-top: 56.25%;
	display: block;
	content: "";
}
#in_contents .slider_m li iframe{
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}

#design .yellow-bk ul{
	margin: 10% auto 0;
}

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

#design .yellow-bk .txt{
	width: 46%;
}

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

/*-----color------*/

#color .img{
	width: 69.6%;
	margin: 7% auto 4%;
}

/*-----price-grade------*/

#price-grade h2{
	margin-top: 14%;
}

#price-grade ul{
	margin: 7% auto 2.5%;
}

#price-grade li{
	display: inline-block;
	width: 37.75%;
}

#price-grade li:first-child{
	margin-right: 4.1%;
}

/* plan */

#price-grade #plan h3{
	width: 60.39%;
	margin: 11% auto 0;
}

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

#price-grade #plan li{
	width: 100%;
}

#price-grade #plan .img{
	width: 46.5%;
	float: left;
}

#price-grade #plan .txt{
	width: 50.36%;
	float: right;
}

#price-grade #plan .price{
	margin: 1.5% auto 7%;
}

/* 残価設定型プランとは？ */

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

#price-grade #what-plan li{
	width: 100%;
}

#price-grade #what-plan .img{
	width: 37%;
	float: left;
}

#price-grade #what-plan .txt{
	width: 60.8%;
	float: right;
}

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

/*-----aero-package------*/

#aero-package .img img{
	width: 84.21%;
	max-width: 1280px;
	margin: 0 auto 3% 0;
}

/*-----footer------*/

#f_linkbtn{
	margin-top: 4.5%;
}

#f_linkbtn .link_btn{
	padding-top: 7%;
	padding-bottom: 3%;
}

/*-----topへ戻るボタン------*/

#topBtn {
    position: fixed;
    bottom: 28px;
    right: 35px;
}

#topBtn img{
	width: 80px;
	height: auto;
}

#topBtn img:hover{
	filter:brightness(120%);
	opacity: 0.8;
}