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

/*------------------------------------------------------------
	2020/09/11制作
------------------------------------------------------------*/

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

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


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

#in_contents ul:after{
	clear: both;
}

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

#in_contents ul:after{
	clear: both;
}

#in_contents .contents_box{
	width: 100%;
	height: auto;
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
	text-align: left;
	overflow: hidden;
}

#in_contents .contents_box_in{
	width: 85%;
	height: auto;
	margin: 0 auto;
	max-width: 1280px;
	position: relative;
	text-align: left;
	overflow: hidden;
}

#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 img:hover{
	filter:brightness(120%);
	opacity: 0.8;
}

#in_contents img{
	vertical-align:bottom;
	border: 0;
	font-size: 0;/*-inline-block隙間対応-*/
	width: 100%;
	height: auto;
}

#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: block !important; }
.sp { display: none !important; }
.sp_2 { display: none !important;}/* 幅1000px以下 */

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

#in_contents .price_num{
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
}

#in_contents .comma{
    font-family: 'Rubik', sans-serif;
}

#in_contents .maru_gothic{
	font-family:"ヒラギノ丸ゴ Pro W4", "ヒラギノ丸ゴ Pro", "Hiragino Maru Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO", "HGMaruGothicMPRO";
}

#in_contents .note{
	font-size: 11px;
	line-height: 15px;
}

#in_contents .no_border{
	border: none;
}

/*----- 背景 共通 ------*/

#in_contents .pink_bk{
	background: linear-gradient(180deg,white 0%, white 160px, #fde4ea 160px, #fde4ea 100%);
	position: relative;
	padding: 0;
	line-height: 0;
	font-size: 0;
}

#in_contents .pink_bk section{
	background: url("../../img/dots.png") top left;
	position: relative;
	padding: 0;
	line-height: 0;
	font-size: 0;
}

#in_contents .yellow_bk{
	background: url("../../img/y_back.png") top left;
	position: relative;
}

#in_contents .pink_bk::before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 16px;
	background: url(../../img/white_line_down.png) top left repeat-x;
	top: 158px;
}

#in_contents .yellow_bk::before{
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 16px;
	background: url(../../img/white_line_down.png) top left repeat-x;
	top: 0;
}

#in_contents .pink_bk::after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 16px;
	background: url(../../img/white_line_up.png) bottom left repeat-x;
	bottom: 0;
	visibility: visible;
}

#in_contents .yellow_bk::after{
	content: "";
	display: inline-block;
	position: absolute;
	width: 100%;
	height: 16px;
	background: url(../../img/white_line_up.png) bottom left repeat-x;
	bottom: 0;
	visibility: visible;
}

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

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

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

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

#in_contents h3{
	color: #f189a1;
	font-size: 24px;
	font-weight: bold;
	margin: 1% auto 2%;
	text-align: center;
	border-bottom: 2px dotted #4c4948;
}

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

#in_contents .slider{
	margin: 0 auto 7%;
	width: 100%;
	height: auto;
	position: relative;
}

#in_contents .slider img{
	margin: 0 auto;
	width: 90%;
	height: auto;
	max-width: 1100px;
}

#in_contents .slider01{
	margin: 0 auto;
}

#in_contents .slick-arrow{
	max-width: 83px!important;
}

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

#in_contents .pre_btn{
	position: absolute;
	left: 8%;
	top: 45%;
	z-index: 10;
}

#in_contents .next_btn{
	position: absolute;
	right: 8%;
	top: 45%;
}

.slick-dots {
	bottom: -5%;
}

.slick-dots li {
	padding:0 10px!important;
}

.slick-dots li button:hover:before,
.slick-dots li button:focus:before{
    opacity: .55;
}

.slick-dots li button:before{
    font-family: 'slick';
    font-size: 25px;
    line-height: 25px;
    position: absolute;
    top: 0;
    left: 0;
    width: 25px;
    height: 25px;
    content: url("../../img/slide/dbtn_01.png");
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    text-align: center;
    opacity: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.slick-dots li.slick-active button:before{
    opacity: 1;
	content: url("../../img/slide/dbtn_02.png");
    -webkit-transform: scale(0.55);
    transform: scale(0.55);
}

/*----- nav ------*/

#in_contents #nav{
    position: fixed;
    top: 0;
	left: 0;
	width: 100%;
	height: auto;
	z-index: 99;
	font-size:0;
}

#in_contents #nav ul{
	width: 100%;
	height: auto;
	max-width: 1800px;
	margin: 0 auto;
}

#in_contents #nav li{
	display: inline-block;
	width: 23.99%;
	height: auto;
	background: white;
	vertical-align: top;
}

#in_contents #nav li:first-child{
	width: 28%;
}

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

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

#in_contents #con_top h1 img{
	width: 100%;
	height: auto;
	max-width: 1280px;
}

#in_contents .anchor_btn{
	width: 98%;
	height: auto;
	margin: 3.5% auto 0;
	text-align: center;
}

#in_contents .anchor_btn li{
	display: inline-block;
	width: 11.5%;
	height: auto;
	margin-right: 0.05%;
}

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

#in_contents #con_top .full_img{
	margin-top: 4%;
}

/*-----1 GRADE------*/

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

#in_contents #grade .chara_01{
	position: absolute;
	width: 22.6%;
	height: auto;
	top: 1%;
	left: 8.5%;
	z-index: 50;
}

#in_contents #grade li{
	position: relative;
}

#in_contents #grade .slider .car{
	width: 40%;
	height: auto;
}

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

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

#in_contents #grade .note{
	text-align: right;
}

#in_contents #grade table {
	width: 100%;
    border-top: 1px dotted black;
    border-bottom: 1px dotted black;
    border-collapse: collapse;
	margin: 1% auto 0;
}

#in_contents #grade table td,#in_contents #grade table th{
	vertical-align: middle;
}

#in_contents #grade table th{
	width: 46%;
	height: auto;
	font-size: 38px;
	font-weight: bold;
	padding-left: 2.5%;
	text-align: center;
}

#in_contents #grade table .small_txt{
	font-size: 0.75em;
	font-weight: normal;
}

#in_contents #grade table .txt{
	width: 15%;
	height: auto;
	text-align: right;
	font-size: 14px;
	line-height: 22px;
	padding-top: 1%;
}

#in_contents #grade table .price{
	width: 38.2%;
	height: auto;
	text-align: right;
	font-weight: bold;
	font-size: 37px;
	padding-right: 2.5%;
}

#in_contents #grade table .price_num{
	font-size: 38px;
}

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

#in_contents #grade .wd{
	width: 13%;
	height: auto;
	padding: 0 0 0 2%;
}

#in_contents #grade tr:first-child{
    border-bottom: 1px dotted black;
}

#in_contents #grade .mt_1{
	padding-top: 1%;
}

/*-----2 PAY------*/

#in_contents #pay {
	text-align: center;
}
#in_contents #pay img {
	margin: 0 auto;
	max-width: 1520px;
}

/*-----3 SAFETY------*/

#in_contents #safety h2{
	margin-top: 5%;
}

#in_contents #safety .h_img{
	width: 79.87%;
	height: auto;
	padding-left: 3%;
	margin-bottom: 4%;
}

#in_contents #safety article{
	width: 88.84%;
	height: auto;
	margin: 1% auto;
	position: relative;
	display: block;
}

#in_contents #safety .pink_box{
	background: #fce7ec;
	border-radius: 25px;
	padding: 3% 1.5% 2%;
}

#in_contents #safety h3{

	height: auto;
	padding-bottom: 0.5%;
}

#in_contents #safety .h3_txt{
	color: #f189a1;
	font-weight: bold;
	text-align: center;
	margin-top: -0.6%;
	margin-bottom: 2%;
	font-size: 27px;
	line-height: 33px;
}

#in_contents #safety .note{
	text-align: right;
	margin-right: 1.8%;
}

#in_contents #safety p{
	padding: 2% 0 1.5% 2.3%;
	font-size: 16px;
	line-height: 30px;
	letter-spacing: 2px;
}

#in_contents #safety_1 li{
	width: 49%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-left: 0.4%;
	position: relative;
}

#in_contents #safety .ya{
	position: absolute;
	width: 7%;
	height: auto;
	left: -4%;
	top: 32%;
}

#in_contents #safety_2 h3{
	margin-top: 10%;
	width: 45%;
}

#in_contents #safety_2 .img_ch{
	position: absolute;
	width: 12%;
	height: auto;
	top: -9%;
	right: 13%;
}

#in_contents #safety_2 li{
	display: inline-block;
	width: 48.6%;
	height: auto;
	margin-left: 0.4%;
	margin-right: 0.8%;
}

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

#in_contents #safety_2 .img_2{
	display: inline-block;
	width: 45.3%;
	height: auto;
	padding: 2.5% 0 4% 0;
}

#in_contents #safety_2 p{
	display: inline-block;
	width: 45.3%;
	height: auto;
	vertical-align: top;
	padding-left: 1.5%;
}

#in_contents #safety_2 .img_3{
	position: absolute;
	width: 7%;
	height: auto;
	right: 2%;
	bottom: 7%;
}

#in_contents #safety_2 .note{
	margin-bottom: 7%;
}

#in_contents #safety_3 li{
	width: 48.5%;
	height: auto;
	display: inline-block;
	vertical-align: top;
	margin-left: 0.5%;
	margin-right: 0.8%;
	position: relative;
}

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

#in_contents #safety_3 p{
	letter-spacing: 1px;
}

#in_contents #safety_4 h3{
	margin-top: 8%;
}

#in_contents #safety_4 .img_ch{
	position: absolute;
	width: 14.2%;
	height: auto;
	top: -10%;
}

#in_contents #safety_4 .img{
	width: 99%;
	margin: 0 auto 1%;
}

#in_contents #safety_4 .note{
	margin-right: 0;
	margin-bottom: 5%;
}

#in_contents #safety_5 .img{
	width: 99%;
	margin: 0 auto 1%;
}

#in_contents #safety_5 .note{
	margin-right: 0;
	margin-bottom: 0;
}

#in_contents #safety .note_box{
	border: 1px solid #231815;
	width: 78%;
	margin: 2% auto;
	padding: 0.8% 1%;
	text-align: left;
}

/*-----4 USABILITY------*/

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

#in_contents #usability h3{
	padding-bottom: 1.2%;
	line-height: 50px;
}

#in_contents #usability .h3_txt{
	text-align: center;
	font-size: 22px;
	line-height: 35px;
	margin-bottom: 2%;
}

#in_contents #usability .note{
	text-align: right;
	margin-right: 0;
}

#in_contents #usability .box_01 h3{
	margin-bottom: 3%;
}

#in_contents #usability .box_01 .h3_txt{
	margin-top: 2.8%;
}

#in_contents #usability .box_01 li{
	display: inline-block;
	width: 37%;
	height: auto;
	margin: 0 6%;
	vertical-align: top;
	position: relative;
}

#in_contents #usability .box_02 h3{
	width: 80%;
	margin-top: 4%;
}

#in_contents #usability .box_02 li{
	width: 82%;
	height: auto;
	margin: 0 auto;
	vertical-align: top;
	position: relative;
}

#in_contents #usability .box_02 .img{
	width: 80%;
	margin: -2% auto 0;
}

#in_contents #usability .box_02 li:last-child .img{
	margin-bottom: 2%;
}

#in_contents #usability .box_02 li:last-child .note{
	margin-bottom: 5%;
}

#in_contents #usability .box_02 .img_ch{
	position: absolute;
	top: -23%;
	left: -7%;
	width: 17.8%;
	height: auto;
}

#in_contents #usability .note_2{
	width: 85%;
	margin: 4% auto 7%;
}

#in_contents #usability .box_01 .img_ch{
	position: absolute;
	bottom: -7%;
	right: -18%;
	width: 34.7%;
	height: auto;
}

/*-----5 luggage------*/

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

#in_contents #luggage .h_img{
	width: 85%;
	padding-top: 1%;
	padding-left: 4%;
}

#in_contents #luggage h3{
	width: 62%;
	padding-bottom: 0.5%;
	line-height: 50px;
}

#in_contents #luggage .h3_txt{
	margin-top: -0.7%;
	text-align: center;
	font-size: 22px;
	line-height: 35px;
	margin-bottom: 2%;
}

#in_contents #luggage .img{
	width: 75%;
	height: auto;
	margin: 0 auto;
}

#in_contents #luggage .note{
	width: 90%;
	height: auto;
	margin-top: 1%;
	text-align: right;
}

/*-----6 EXTERIOR------*/

#in_contents #exterior h2 {
    margin: 6.5% auto 3.2%;
}

#in_contents #exterior h3 {
	font-size: 33px;
    padding-bottom: 2%;
	width: 90%;
}

#in_contents #exterior li:first-child{
width: 50.3%;
    margin-top: -10.5%;
}

#in_contents #exterior li:last-child{
	width: 54.3%;
	margin: -21% 0 7% auto;
}

#in_contents #exterior .txt{
	position: absolute;
	font-size: 23px;
	line-height: 50px;
	right: -5%;
	top: 22%;
	width: 50%;
	height: auto;
	font-weight: bold;
}

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

/*-----7 INTERIOR------*/

#in_contents #interior h2{
	margin: 10% auto 2%;
}

#in_contents #interior .img_1{
	position: absolute;
	width: 94.89%;
	height: auto;
	top: 8%;
	padding-left: 10%;
	z-index: 10;
}

#in_contents #interior h3{
	margin-bottom: 3.5%;
}

#in_contents #interior li{
	width: 82%;
	height: auto;
	margin: 3% auto 0;
}

#in_contents #interior li:first-child{
	margin-top: -1.95%;
	z-index: 0;
}

#in_contents #interior .note{
	width: 80%;
	margin: 0 auto;
	text-align: right;
	padding: 10px 0 0;
}


/*-----8 BODYCOLOR------*/

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

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

#in_contents #color .chara_01{
	position: absolute;
	width: 23.8%;
	height: auto;
	top: 13%; 
}

#in_contents #color .chara_02{
	position: absolute;
	width: 10%;
	height: auto;
	bottom: 6%;
	left: 2%;
}

#in_contents #color .slider{
	margin-top: 3%;
	width: 1302px;
	height: auto;
	position: relative;
}

#in_contents #color .slider .img_ch{
	position: absolute;
	width: 18%;
	top: 309px;
	right: -25px;
}

#in_contents #color .slider02{
	background-color: white;
}

#in_contents #color .slider02 .car{
	background: white;
}

#in_contents #color .slider02 .car img{
	width: 48%;
	height: auto;
	margin-top: 60px;
}

#in_contents #color .slider02 .car p{
	font-size: 17px;
	margin: 0 auto ;
	text-align: center;
	padding: 1.5% 0 3.5%;
}

#in_contents #color .slider02 .car p span{
	font-size: 15px;
}

#in_contents #color .slider02 .car .line_2{
	line-height: 20px;
	padding: 0.2% 0 2%;
}

#in_contents #color .pre_btn {
    left: 3%;
    top: 45%;
}

#in_contents #color .next_btn {
    right: 3%;
    top: 45%;
}

#in_contents .slider02-2{
	width: 1000px;
	height: auto;
	margin: 30px auto 0 200px;
	padding-bottom: 8%;
}

/* IE10-11 */
_:-ms-input-placeholder, :root #slidercolor_s {
  transform:translate3d(0px, 0px, 0px)
}
/* Edge12-14 */
@supports (-ms-ime-align: auto) and (not (-webkit-text-stroke: initial)) {
  #slidercolor_s {
    transform:translate3d(0px, 0px, 0px)
  }
}

#in_contents .slider02-2 li{
	margin: 0;
	position: relative;
	width: 31px!important;
	height: 31px;
	margin-left: 20px;
}

#in_contents .slider02-2 .twotone{
	margin-left: 260px;
}

#in_contents .slider02-2 li img{
	width: 31px;
	height: 31px;
}

#in_contents .slider02-2 li img:hover{
	cursor: pointer;
	cursor: hand;
	opacity: 0.8;
}

#in_contents .mono_txt{
	position: absolute;
	font-size: 26px;
	font-weight: bold;
	bottom: 16.6%;
	left: 120px;
}

#in_contents .two_txt{
	position: absolute;
	font-size: 26px;
	font-weight: bold;
	bottom: 16.6%;
	left: 795px;
}


/*-----zanka------*/

#in_contents #zanka h2{
	width: 100%;
	margin: 0 auto;
	padding: 7% 0 0;
	font-size: 45px;
	text-align: center;
	letter-spacing: 2px;
}

#in_contents #zanka h2 .bold{
	font-size: 52px;
	font-weight: bold;
}

#in_contents #zanka .h2_txt{
	width: 100%;
	font-size: 30px;
	text-align: center;
}

#in_contents #zanka .img{
	margin: -12% auto 3%;
	width: 92.5%;
	height: auto;
}

#in_contents #zanka .note{
	width: 80%;
	height: auto;
	margin: 2% auto 5%;
}

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

#in_contents #footer {
	text-align: center;
	margin: 5% auto 0;
}

#in_contents #footer p{
	width: 100%;
	height: auto;
	text-align: center;
	font-size: 24px;
	margin-bottom: 2%;
	font-weight: bold;
}

#in_contents #footer p span{
	font-size: 30px;
}

#in_contents .shop_btn{
	width: 60%;
	height: auto;
	max-width: 660px;
	margin: 0 auto 6%;
}

#in_contents .copy{
	background: black;
	color: white;
	font-size: 0;
	line-height: 0;
}

#in_contents .copy span{
	display: block;
	margin: 0.1% auto;
	padding: 1% 0 1%;
	font-size: 15px;
	line-height: 20px;
	font-weight: normal;
}

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

#topBtn {
    position: fixed;
    bottom: 30px;
	right: 30px;
	z-index: 55;
}

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

#gHeader .hBox .hBtnList {
	display: flex !important;
}

#gNavi > ul > li > a {
	font-size: 15px;
}

/*----- banner ------*/

#banner_contents{
	padding: 5% 2% 3%;
}

#banner_contents .banner_link{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 16px;
	padding: 16px 0 0;
}

#banner_contents .banner_link div{
	width: calc(45% - 16px * 1 / 2);
}