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

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

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

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

#in_contents #con_top h1 img{
	margin-top: 230px!important;
}

}

/* ウィンドウ幅が0-1520pxの場合に適用 */
@media screen and ( max-width:1520px )
{
	
	#in_contents .margin_t32{
		margin-top: 3.2%;
	}
	
	#in_contents .margin_t7{
		margin-top: 7%;
	}
	
	#in_contents .margin_b7{
		margin-bottom: 7%;
	}
	
	#in_contents .margin_b10{
		margin-bottom: 10%;
	}

	#in_contents .note{
		font-size: 0.8vw;
		line-height: 1.5vw;
	}

	/* -1520px　見出し共通 */

	#in_contents h3{
		font-size: 2.5vw;
	}

	/* -1520px　背景共通 */

	#in_contents .pink_bk{
		background: linear-gradient(180deg,white 0%, white 9vw, #fde4ea 9vw, #fde4ea 100%);
	}

	#in_contents .pink_bk::before{
		top: 8.9vw;
	}

	/* -1520px　grade */

	#in_contents #grade table th{
		font-size: 2.5vw;
	}

	#in_contents #grade table .txt{
		font-size: 1.3vw;
		line-height: 1.8vw;
	}

	#in_contents #grade table .price{
		font-size: 1.4vw;
	}

	#in_contents #grade table .price_num{
		font-size: 4vw;
	}

	/* -1520px　safety */

	#in_contents #safety .h3_txt{
		font-size: 1.8vw;
		line-height: 2.1vw;
	}

	#in_contents #safety p{
		font-size: 1.12vw;
		line-height: 2.2vw;
		letter-spacing: 0;
	}

	/* -1520px　usability */

	#in_contents #usability h3{
		line-height: 3.5vw;
	}

	#in_contents #usability .h3_txt{
		font-size: 1.8vw;
		line-height: 2.1vw;
	}

	/* -1520px　luggage */

	#in_contents #luggage h3{
		line-height: 3.5vw;
	}

	#in_contents #luggage .h3_txt{
		font-size: 1.5vw;
		line-height: 2.1vw;
	}

	/* -1520px exterior */

	#in_contents #exterior h2{
		margin-top: 5.5%;
	}

	#in_contents #exterior h3 {
		font-size: 2.2vw;
	}

	#in_contents #exterior li:first-child{
		width: 54%;
		margin-top: -12%;
		margin-left: 1.2%;
	}

	#in_contents #exterior li:last-child{
		width: 54%;
		margin: -19% 1.2% 7% auto;
	}

	#in_contents #exterior .txt{
		font-size: 1.5vw;
		line-height: 3.5vw;
		top: 20%;
	}

	/* -1520px　body color */

	#in_contents #color .slider{
		width: 83%;
	}

	#in_contents #color .slider .img_ch{
		width: 18%;
		top: 20.6vw;
		right: -1.5vw;
	}

	#in_contents #color .slider02 .car img{
		margin-top: 3.5vw;
	}

	#in_contents #color .slider02 .car p{
		font-size: 1.5vw;
	}

	#in_contents #color .slider02 .car p span{
		font-size: 1.2vw;
	}

	#in_contents #color .slider02 .car .line_2{
		line-height: 2vw;
	}

	#in_contents .slider02-2{
		width: 90vw;
		margin: 2vw auto 0 15vw;
		padding-bottom: 8vw;
	}

	#in_contents .slider02-2 li{
		width: 2.1vw!important;
		height: 2.1vw;
		margin-left: 1.2vw;
	}

	#in_contents .slider02-2 .twotone{
		margin-left: 18vw;
	}

	#in_contents .slider02-2 li img{
		width: 2.1vw;
		height: 2.1vw;
	}

	#in_contents .mono_txt{
		font-size: 1.8vw;
		bottom: 18.6%;
		left: 7.3vw;
	}

	#in_contents .two_txt{
		font-size: 1.8vw;
		bottom: 18.6%;
		left: 55.5vw;
	}

	/* -1520px　zanka */

	#in_contents #zanka h2{
		font-size: 3vw;
		letter-spacing: 0.1vw;
	}

	#in_contents #zanka h2 .bold{
		font-size: 3.5vw;
	}

	#in_contents #zanka .h2_txt{
		font-size: 2.2vw;
	}

	/* -1520px　footer */

	#in_contents #footer p{
		font-size: 2.5vw;
	}

	#in_contents #footer p span{
		font-size: 3vw;
	}

	#in_contents .copy span{
		font-size: 1.5vw;
		line-height: 1.5vw;
	}

	/* -1520px　topへ戻るボタン */
		
	#topBtn img{
		width: 200px;
		height: auto;
	}

}

/* ウィンドウ幅が1400px以上の場合に適用 */
@media screen and ( min-width:1400px ){
	#in_contents #con_top h1 img{
		margin: 115px auto 0;
	}
}

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

	.sp_2 { display: inline !important; }

	/*---- -1000px slider------*/

	#in_contents .slick-arrow{
	width: 40px!important;
	height: auto;
	}

	#in_contents .pre_btn{
		left: 1%;
		top: 43%;
	}

	#in_contents .next_btn{
		right: 1%;
		top: 43%;
	}

	#in_contents .note{
		font-size: 1vw;
		line-height: 1.5vw;
	}

	#in_contents #grade .note{
		font-size: 1vw;
	}

	/*---- -1000px pay------*/

	#in_contents #pay .note{
		width: 81%;
		padding-left: 1%;
		text-align: left;
	}

	/*---- -1000px usability------*/

	#in_contents #usability .box_02 li:last-child .note{
		text-align: left;
	}

	#in_contents #usability .note_2{
		text-align: left;
	}

	/* -1000px　footer */
	#in_contents .shop_btn{
		margin: 0 auto 14%;
	}

	/* -1000px　topBtn */
	#topBtn img {
		width: 130px;
		height: auto;
	}

	#topBtn {
		bottom: 20px;
		right: 20px;
	}

}

/* ウィンドウ幅が0-576pxの場合に適用 */
@media screen and ( max-width:576px ){
	
	/* パソコン画像表示 */
	.pc { display: none !important; }
	.sp { display: inline !important; }

	#in_contents{
	font-family: system-ui, "Hiragino Sans", "YuGothic", "Arial", sans-serif;
	}

	#in_contents .note{
		font-size: 1.9vw;
		line-height: 2.8vw;
	}

	/* -576px 背景 共通 */

	#in_contents .pink_bk{
		background: linear-gradient(180deg,white 0%, white 7.1vw, #fde4ea 7.1vw, #fde4ea 100%);
	}

	#in_contents .pink_bk section{
		background-size:7% auto;
	}

	#in_contents .yellow_bk{
		background-size:7% auto;
	}

	#in_contents .pink_bk::before{
		height: 1.85vw;
		background-size:20% auto;
		top: 7vw;
	}

	#in_contents .yellow_bk::before{
		height: 1.85vw;
		background-size:20% auto;
	}

	#in_contents .pink_bk::after{
		height: 1.85vw;
		background-size:20% auto;
	}

	#in_contents .yellow_bk::after{
		height: 1.85vw;
		background-size:20% auto;
	}

	/* -576px 見出し 共通 */

	#in_contents h2{
		width: 70%;
		height: auto;
		margin: 2% auto;
	}

	#in_contents .pink_bk h2{
		margin: 2% auto;
	}

	#in_contents .h_img{/* h2周辺の画像 */
		margin: -10% auto 0;
	}

	#in_contents h3{
		font-size: 3.6vw;
	}

	/* -576px nav */

	#in_contents #nav li{
		width: 49.8%;
	}

	#in_contents #nav li:last-child{
		border-left: 1px solid white;
	}

	/* -576px　top */

	#in_contents #con_top h1{
		margin: 5% auto 0;
	}

	/* -576px anchor_btn*/

	#in_contents .anchor_btn{
		width: 97%;
		margin: 7% auto 6%;
	}

	#in_contents .anchor_btn ul{
		display: flex;
		flex-wrap: wrap;
		gap: 2px 4px;
	}

	#in_contents .anchor_btn li{
		width: 23.5%;
		margin-right: 0.05%;
		margin-bottom: 0.7%;
	}

	#in_contents .anchor_btn li:last-child{
		margin-right: 0;
	}

	/* -576px slider */
		
	#in_contents .slick-arrow{
		width: 30px!important;
		height: auto;
	}

	#in_contents .pre_btn{
		position: absolute;
		left: 2%;
		top: 43%;
	}

	#in_contents .next_btn{
		position: absolute;
		right: 2%;
		top: 43%;
	}
	
	.slick-dots {
		bottom: -9%;
	}

	.slick-dots li button:before{
		-webkit-transform: scale(0.38);
		transform: scale(0.38);
	}

	.slick-dots li.slick-active button:before{
		-webkit-transform: scale(0.40);
		transform: scale(0.40);
	}

	/* -576px GRADE */

	#in_contents #grade{
		margin-bottom: 10%;
	}

	#in_contents #grade h2{
		margin-top: 4%;
		margin-bottom: 4%;
	}

	#in_contents #grade .sl_bk::after{
		content: "";
		display: inline-block;
		position: absolute;
		top: 0;
		left: 10%;
		width: 85%;
		height: 75%;
		background: url(../../img/slide/grade_slider_bk_sp.png) no-repeat;
		background-size: contain;
		z-index: 5;
	}

	#in_contents #grade .slider .car{
		width: 55%;
		height: auto;
		margin-top: 5%;
	}

	#in_contents #grade .sl_box{
		width: 75%;
		height: auto;
		margin: -3.4% auto 0;
	}

	#in_contents #grade .note{
		font-size: 1.6vw;
	}

	#in_contents #grade table th{
		font-size: 3vw;
	}

	#in_contents #grade table .txt{
		font-size: 1.8vw;
		line-height: 2.3vw;
		width: 16%;
	}

	#in_contents #grade table .price{
		font-size: 2.5vw;
	}

	#in_contents #grade table .price_num{
		font-size: 5.1vw;
	}

	#in_contents #grade .line_2 th{/* 2行テーブル */
		width: 30%;
	}

	#in_contents #grade .wd{
		width: 15%;
		height: auto;
		text-align: center;
		padding-right: 2%;
	}

	#in_contents #grade .line_2 .price{
		width: 35.6%;
		height: auto;
	}

	/* -576px pay */

	#in_contents #pay h2 {
		margin: 1% auto 0;
	}

	#in_contents #pay .img02{
		margin: -12% auto 0;
		padding-right: 1.5%;
		width: 95%;
	}

	#in_contents #pay .note{
		width: 92%;
		margin: 0.5% auto;
		text-align: right;
	}

	#in_contents #pay .note_2{
		margin-top: 1.1%;
		width: 91%;
		text-align: left;
		padding-left: -0.5%;
	}

	/* -576px safety */

	#in_contents #safety .h_img{
		width: 85%;
		padding-left: 0;
	}

	#in_contents #safety article{
		width: 93%;
	}

	#in_contents #safety .pink_box{
		border-radius: 10px;
		padding: 2.5% 2.5% 2.5%;
	}

	#in_contents #safety h3{
		width: 100%;
		padding-bottom: 0.8%;
		margin-top: 3%;
	}

	#in_contents #safety .h3_txt{
		margin-top: 2%;
		margin-bottom: 3%;
		font-size: 2.9vw;
		line-height: 3.5vw;
	}

	#in_contents #safety_1 li{
		width: 100%;
		margin-left: 0;
	}

	#in_contents #safety_1 li:first-child{
		margin-bottom: 5%;
	}

	#in_contents #safety p{
	padding: 2% 0 0 1%;
	font-size: 2.18vw;
	line-height: 4.2vw;
	letter-spacing: 0.3vw;
	}

	#in_contents #safety .ya{
		width: 9%;
		left: 45.5%;
		top: -10%;
	}

	#in_contents #safety_2 h3{
		margin-top: 12%;
		width: 63.2%;
	}

	#in_contents #safety_2 .img_ch{
		width: 18%;
		top: -4.6%;
		right: 2%;
	}

	#in_contents #safety_2 li{
		width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	#in_contents #safety_2 .img_3{
		width: 12%;
		right: 2%;
		bottom: 7%;
	}

	#in_contents #safety_2 .note{
		text-align: left;
	}

	#in_contents #safety_3 li{
		width: 100%;
		margin-left: 0;
		margin-bottom: 5%;
	}

	#in_contents #safety_4 h3{
		width: 60%;
		margin-top: 7%;
	}

	#in_contents #safety_4 .img_ch{
		width: 26%;
		top: -2.5%;
		left: -2.2%;
	}

	#in_contents #safety .note_box{
		width: 87%;
		margin: 4% auto 7%;
		padding: 2% 2.5%;
		text-align: left;
	}

	/* -576px usability */

	#in_contents #usability h2{
		margin-top: 1%;
	}

	#in_contents #usability .img_1{
		width: 62%;
		margin: -2% auto 0;
	}

	#in_contents #usability h3{
		margin-top: -7%;
		font-size: 4.2vw;
		line-height: 5vw;
		padding-bottom: 3%;
	}

	#in_contents #usability .h3_txt{
		font-size: 3vw;
		line-height: 5vw;
		margin-top: 4%;
		margin-bottom: 3%;
	}

	#in_contents #usability .box_01 li{
		display: block;
		width: 75%;
		height: auto;
		margin: 10% auto 0;
		padding-bottom: 5%;
	}

	#in_contents #usability .box_02 li{
		width: 95%;
	}

	#in_contents #usability .box_02 li:first-child h3 {
		width: 100%;
		margin-top: 8%;
	}

	#in_contents #usability .box_02 li .note{
		width: 95%;
		margin: 4% auto 0;
		text-align: left;
		padding-bottom: 5%;
	}

	#in_contents #usability .box_02 .img_ch{
		top: 3%;
		left: 1%;
		width: 17.5%;
		transform: rotate( -10deg );
	}

	#in_contents #usability .note_2{
		width: 90%;
	}

	#in_contents #usability .box_01 .img_ch{
		bottom: -5%;
		right: -15.5%;
		width: 34.5%;
		height: auto;
	}

	/* -576px　luggage */

	#in_contents #luggage .h_img{
		width: 60%;
		padding-top: 8%;
		padding-left: 0.7%;
	}

	#in_contents #luggage h3{
		width: 80%;
		font-size: 4vw;
		padding-bottom: 2%;
		margin-top: 4%;
	}

	#in_contents #luggage .h3_txt{
		margin-top: 2%;
		font-size: 2.5vw;
		line-height: 4vw;
		margin-bottom: 3%;
	}

	#in_contents #luggage .img{
		display: block!important;
		width: 68%;
		height: auto;
		margin: 0 auto;
	}

	#in_contents #luggage .img:last-child{
		width: 80%;
		margin: 3% auto;
	}

	#in_contents #luggage .note{
		margin-top: 3%;
	}

	/* -576px　exterior */

	#in_contents #exterior h2 {
		margin: 1% auto 0;
	}

	#in_contents #exterior h3 {
		font-size: 4vw;
		line-height: 5vw;
		padding-bottom: 2%;
		width: 90%;
	}

	#in_contents #exterior li:first-child{
		width: 97%;
		margin-top: 0;
		margin: -16% auto 0;
		padding-left: 0.6%;
	}

	#in_contents #exterior li:last-child{
		width: 91%;
		padding-left: 0.45%;
		margin: 3% auto 10%;
	}

	#in_contents #exterior .txt{
		font-size: 2.3vw;
		line-height: 4vw;
		left: 25%;
		top: 14.5%;
		width: 50%;
		text-align: center;
	}

	#in_contents #exterior .img_ch{
		position: absolute;
		width: 32.04%;
		height: auto;
		bottom: 6.5%;
		left: 15%;
	}

	/* -576px interior */

	#in_contents #interior h2{
		margin-bottom: 1.2%;
	}

	#in_contents #interior .img_1{
		width: 95%;
		top: 6.5%;
		padding-left: 5%;
	}

	#in_contents #interior li{
		width: 91%;
	}

	#in_contents #interior li:first-child{
		margin-top: -0.1%;
	}

	/* -576px color */

	#in_contents #color h2 {
		margin-top: 5%;
		padding-top: 2%;
	}

	#in_contents #color h3 {
		margin-top: 5%;
		margin-bottom: 5%;
	}

	#in_contents #color .chara_01{
		width: 19%;
		top: 8.85%; 
	}

	#in_contents #color .chara_02{
		width: 10%;
		bottom: 6%;
		left: auto;
		right: 22%;
	}

	#in_contents #color .img_ch{
		position: absolute;
		width: 28.5%;
		top: auto;
		bottom: -2%;
		right: 0;
	}
	
	#in_contents #color .slider{
		width: 90%;
	}

	#in_contents #color .slider02 .car{
		margin-top: 1vw;
	}

	#in_contents #color .slider02 .car img{
		width: 70%;
		margin-top: 4.5vw;
	}

	#in_contents #color .slider02 .car p{
		font-size: 2vw;
		line-height: 3vw;
	}

	#in_contents #color .slider02 .car p span{
		font-size: 1.5vw;
	}

	#in_contents #color .slider02 .car .line_2{
		line-height: 3vw;
	}
	
	#in_contents .slider02-2{
		width: 65vw;
		padding-top: 3%;
		padding-bottom: 8%;
		margin: 2vw auto 0 8.1vw;
	}

	#in_contents .slider02-2 li{
		width: 4vw!important;
		height: 4vw;
		margin-left: 1vw;
		margin-bottom: 1vw;
	}

	#in_contents .slider02-2 .twotone{
		margin-left: 1vw;
	}

	#in_contents .slider02-2 li img{
		width: 4vw;
		height: 4vw;
	}

	#in_contents .mono_txt{
		font-size: 2.7vw;
		bottom: 19.2%;
		left: 0.5vw;
	}

	#in_contents .two_txt{
		font-size: 2.7vw;
		bottom: 12.2%;
		left: 2.2vw;
	}

	/* -576px zanka */

	#in_contents #zanka .img{
		margin: 7% auto 7%;
		width: 92%;
		padding-left: 4.5%;
	}

	/* -576px footer */

	#in_contents #footer .copy span{
		font-size: 2.5vw;
	padding: 3% 0;
	}

	#in_contents #footer .shop_btn{
		width: 88%;
		height: auto;
		margin: 5% auto 27%;
	}
		
	/* -576px topへ戻る */

	#topBtn {
		position: fixed;
		bottom: 20px;
		right: 10px;
		z-index: 999;
	}

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

}

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

	/* -576px color */
	#in_contents .slider02-2{
		margin: 2vw auto 0 5.8vw;
	}

	#in_contents .mono_txt{
		bottom: 19%;
	}

	#in_contents .two_txt{
		bottom: 12%;
	}
}