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


/* トップイメージ */
@media (min-width: 768px) {
	.contents{ width: 1200px; margin: 0 auto; padding: 33px 0 0 0; background-color: #fff;}
	
	.top_image{ margin: 0 auto 70px; display: block; text-align: center;}
	.top_image img{ width: 1051px; height: auto;}
	/*.top_image .top1{ position: absolute; width: 278px; top: 25px; right: 20px;}
	.top_image .top2{ position: absolute; color: #e74c94; font-size: 60px; top: 175px; right: 32px; font-family: 'Shippori Mincho', serif; font-weight: 500; line-height: 1.0; letter-spacing: -5px;}
	.top_image .top3{ position: absolute; color: #e74c94; font-size: 22px; top: 257px; right: 100px;}*/
}
@media (max-width: 767.98px) {
	.contents{ width: 100%; margin: 0 auto; padding: 30px 15px 40px; background-color: #fff;}
	
	.top_image{ margin: 0 auto; display: block; text-align: center;}
	.top_image img{ width: 100%; height: auto;}
}


/* タイトル */
@media (min-width: 768px) {
	.title1{ text-align: center; font-size: 51px; position: relative; margin: 0 0 30px 0; font-weight: 600;}
	.title1 div{ position: relative; z-index: 2;}
	.title1 span{ color: #e74c94;}
	.title1 img{ position: absolute; top: -30px; left: calc(50% - 360px); width: 118px; z-index: 1;}
	
	.title2{ text-align: center; font-size: 29px; margin: 0 0 10px 0; font-weight: 600;}
	
	.movie_flex .title2{ text-align: center; font-size: 18px; margin: 0 0 10px 0; font-weight: 600;}
	
	.title3{ text-align: center; margin: 0 0 58px 0;}
	.title3 img{ width: 934px;}

	.title4{ text-align: center; margin: 0 0 62px;}
	.title4 img{ width: 939px;}
	
	.title5{ text-align: center; margin: 84px 0 107px;}
	.title5 img{ width: 820px;}
	
	.title6{ display: block; word-wrap: break-word; padding-bottom: 10px; border-bottom: 1px solid #eee; font-size: 21px; padding: 22px 0 10px 0; margin: 0 0 25px 0; font-weight: 600;}
	
	.title7{ text-align: center; color: #e74c94; font-size: 48px; line-height: 1.5; margin: 0 0 84px 0; position: relative; font-weight: 600;}
	.title7 .deco{ width: 48px; position: absolute; left: 252px; top: 12px;}
	.title7 .onechan{ width: 140px; position: absolute; top: -130px; right: 90px;}
	
	.title8{ text-align: center; color: #e74c94; font-size: 40px; line-height: 1.5; margin: -50px 0 20px 0; position: relative; font-weight: 600;}
	.title8 .wonderful{ width: 780px; position: relative; top: 35px; left: -50px; z-index: 3;}
	
	.title9{ text-align: center; margin: 0 0 62px;}
	.title9 img{ width: 900px;}
}
@media (max-width: 767.98px) {
	.title1{ text-align: center; font-size: 30px; position: relative; margin: 0 0 20px 0; font-weight: 600;}
	.title1 div{ position: relative; z-index: 2;}
	.title1 span{ color: #e74c94;}
	.title1 img{ position: absolute; top: -20px; left: calc(50% - 150px); width: 90px; z-index: 1;}
	
	.title2{ text-align: center; font-size: 18px; margin: 0 0 10px 0; font-weight: 600; position: relative;}
	
	.movie_flex .title2{ text-align: center; font-size: 13px; margin: 0 0 10px 0; font-weight: 600; height: 31px; display: flex; justify-content: center; align-items: flex-end;}
	
	.title3{ text-align: center; margin: 50px 0 30px 0;}
	.title3 img{ width: 95%; max-width: 450px;}

	.title4{ text-align: center; margin: 0 0 30px 0;}
	.title4 img{ width: 95%; max-width: 550px;}
	.title4 p{ margin: 10px 0 0 0; padding: 10px 0 0 0; border-top: 2px dashed #ea6da0; color: #ea6da0; font-size: 15px;}
	
	.title5{ text-align: center; margin: 50px 0 30px 0;}
	.title5 img{ width: 95%; max-width: 450px;}
	
	.title6{ display: block; word-wrap: break-word; padding-bottom: 10px; border-bottom: 1px solid #eee; font-size:18px; padding: 15px 0 10px 0; margin: 0 0 25px 0; font-weight: 600;}
	
	.title7{ text-align: center; color: #e74c94; font-size: 24px; line-height: 1.5; margin: 0 0 30px 0; position: relative; font-weight: 600;}
	.title7 .deco{ width: 30px; position: absolute; left: calc(50% - 100px); top: -5px;}
	.title7 .onechan{ width: 65px; position: absolute; top: -80px; right: calc(50% - 160px);}
	
	.title8{ text-align: center; color: #e74c94; font-size: 19px; line-height: 1.5; margin: 0 0 10px 0; position: relative; font-weight: 600; padding: 0;}
	.title8 .wonderful{ width: 96%; position: relative; top: 15px; left: 0; z-index: 3;}
	
	.title9{ text-align: center; margin: 0 0 30px 0;}
	.title9 img{ width: 95%;}
}


/* TVCM */
@media (min-width: 768px) {
	.youtube-container { margin: 0 auto 100px; text-align: center; padding: 0; position: relative; height: 450px;}
	.youtube-container .video-area-wrapper { width: 800px; height: 450px; position: absolute; top: 0; left: 200px; z-index: 1;}
	.youtube-container .samune{ position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 800px; margin: 0 auto;}
	.youtube-container .samune2:hover{ cursor: pointer;}
	.youtube-container .samune img{ width: 800px; height: auto;}
	.youtube-container .samune2.open img{ display: none;}
	.youtube-container .samune .start,.youtube-container .samune .start_on{ width: 90px; height: auto; position: absolute;}
	.youtube-container .samune .start_on{ display: none;}
	.youtube-container .samune:hover .start_on{ display: block;}
	.youtube-container .samune:hover .start{ display: none;}
}
@media (max-width: 767.98px) {
	.youtube-container { margin: 0 auto 30px; text-align: center; padding: 0; position: relative; height: 194px;}
	.youtube-container .video-area-wrapper { width: 345px; height: 194px; position: absolute; top: 0; left: calc(50% - 172px); z-index: 1;}
	.youtube-container .samune{ position: relative; z-index: 2; display: flex; justify-content: center; align-items: center;}
	.youtube-container .samune2:hover{ cursor: pointer;}
	.youtube-container .samune img{ width: 345px; height: 194px;}
	.youtube-container .samune2.open img{ display: none;}
	.youtube-container .samune .start,.youtube-container .samune .start_on{ width: 40px; height: auto; position: absolute;}
	.youtube-container .samune .start_on{ display: none;}
}
@media (min-width: 414px) and (max-width: 767.98px) {
	.youtube-container { height: 216px;}
	.youtube-container .video-area-wrapper { width: 384px; height: 216px; left: calc(50% - 192px);}
	.youtube-container .samune img{ width: 384px; height: 216px;}
	.youtube-container .samune .start,.youtube-container .samune .start_on{ width: 46px;}
}
@media (min-width: 630px) and (max-width: 767.98px) {
	.youtube-container { height: 333px;}
	.youtube-container .video-area-wrapper { width: 592px; height: 333px; left: calc(50% - 296px);}
	.youtube-container .samune img{ width: 592px; height: auto;}
	.youtube-container .samune .start,.youtube-container .samune .start_on{ width: 70px;}
}


/* PROFILE */
@media (min-width: 768px) {
	.profile_flex{ display: flex; margin: 0 135px 85px;}
	.profile_flex>div:first-child{ width: 367px;}
	.profile_flex>div:first-child img{ width: 367px;}
	.profile_flex>div:last-child{ width: calc(100% - 367px); margin: 0 0 0 56px;}
	.profile_flex>div:last-child strong{ font-size: 42px; line-height: 1.0; margin: 73px 0 29px 0; display: block;}
	.profile_flex>div:last-child p{ font-size: 25px; margin: 0;}
}
@media (max-width: 767.98px) {
	.profile_flex{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 50px 0;}
	.profile_flex>div:first-child{ width: 100%; text-align: center;}
	.profile_flex>div:first-child img{ width: 70%; max-width: 450px;}
	.profile_flex>div:last-child{ width: 100%; margin: 10px 0 0 0;}
	.profile_flex>div:last-child strong{ font-size: 26px; line-height: 1.0; margin: 20px 0 15px 0; display: block;}
	.profile_flex>div:last-child p{ font-size: 15px; margin: 0;}
}


/* オフショット展 */
@media (min-width: 768px) {
	.offshot_list{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0 130px; padding: 0; list-style: none;}
	.offshot_list li span{ display: block; text-align: center; color: #e74c94; font-size: 20px; font-weight: 500; margin: 22px 0 32px}
	.offshot_list li img{ width: 265px;}
}
@media (max-width: 767.98px) {
	.offshot_list{ display: flex; flex-wrap: wrap; justify-content: space-between; margin: 0; padding: 0; list-style: none;}
	.offshot_list li{ width: 48%;}
	.offshot_list li span{ display: block; text-align: center; color: #e74c94; font-size: 12px; font-weight: 500; margin: 5px 0 20px}
	.offshot_list li img{ width: 100%;}
}


/* ONE CHAN MASSAGE! */
@media (min-width: 768px) {
	.message_p{ text-align: center; font-size: 36px; font-family: 'Shippori Mincho', serif; margin: 0; line-height: 2.2; letter-spacing: -2px;}
	
	.message_name{ text-align: center; position: relative; margin: 70px 0 0 0;}
	.message_name span{ font-size: 28px; display: block; font-weight: bold;}
	.message_name strong{ font-size: 48px; display: block;}
	.message_name .onechan{ width: 175px; position: absolute; left: 222px; bottom: -50px;}
	.message_name .deco{ width: 79px; position: absolute; right: 335px; bottom: 10px;}
}
@media (max-width: 767.98px) {
	.message_p{ text-align: center; font-size: 17px; font-family: 'Shippori Mincho', serif; margin: 0; line-height: 2.0; letter-spacing: -2px;}
	
	.message_name{ text-align: center; position: relative; margin: 30px 0 0 0;}
	.message_name span{ font-size: 18px; display: block; font-weight: bold;}
	.message_name strong{ font-size: 24px; display: block;}
	.message_name .onechan{ width: 70px; position: absolute; right: calc(50% + 95px); bottom: -10px;}
	.message_name .deco{ width: 40px; position: absolute; left: calc(50% + 92px); bottom: 5px;}
}


/* YouTubeチャンネル */
@media (min-width: 768px) {
	.youtube_box{ margin: 100px 83px 81px; padding: 0 10px 98px; border-top: 3px dashed #b5b5b6; border-bottom: 3px dashed #b5b5b6;}
	.youtube_list{ display: flex; flex-wrap: wrap; justify-content: space-between; color: #343434; margin: 0; padding: 0;}
	.youtube_list a{ width: 241px; margin-right: 14px;}
	.youtube_list a:last-child{ margin-right: 0;}
	.youtube_list a img{ width: 241px;}
	.youtube_list a:hover{ opacity: 0.5;}
	.youtube_list span{ word-wrap: break-word; display: block; margin: 10px 0 0 0;}
}
@media (max-width: 767.98px) {
	.youtube_box{ margin: 60px 0 40px; padding: 0 0 30px; border-top: 2px dashed #b5b5b6; border-bottom: 2px dashed #b5b5b6;}
	.youtube_list{ display: flex; flex-wrap: wrap; justify-content: space-between; color: #343434; margin: 0; padding: 0;}
	.youtube_list a{ width: 48%; margin: 0 0 30px 0;}
	.youtube_list a img{ width: 100%;}
	.youtube_list a:hover{ opacity: 0.5;}
	.youtube_list span{ word-wrap: break-word; display: block; margin: 10px 0 0 0;}
}


/* 車種 */
@media (min-width: 768px) {
	.tabBox { background-color: #fff; margin: 0 83px;}
	.tabBox .tab_item { width: calc(100%/9); height: 42px; background: #f6f6f6; line-height: 42px; font-size: 15px; text-align: center; color: #000; display: block; float: left; transition: all 0.1s ease; white-space: nowrap; border-right: 1px solid #ccc; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; margin: 0;}
	.tabBox .tab_item:hover{ cursor: pointer;}
	.tabBox .tab_item1{ width: 100px; border-left: 1px solid #ccc;}
	.tabBox .tab_item2{ width: 161px;}
	.tabBox .tab_item3{ width: 123px;}
	.tabBox .tab_item4{ width: 105px;}
	.tabBox .tab_item5{ width: 135px;}
	.tabBox .tab_item6{ width: 70px;}
	.tabBox .tab_item7{ width: 200px;}
	.tabBox .tab_item8{ width: 70px;}
	.tabBox .tab_item9{ width: 70px;}
	.tabBox .tab_item:hover { opacity: 0.8;}
	.tabBox input[name="tab_item"] { display: none;}
	.tabBox .tab_content { display: none; padding: 20px 20px 40px; clear: both; overflow: hidden;}
	.tabBox #category1:checked ~ #category1_content,
	.tabBox #category2:checked ~ #category2_content,
	.tabBox #category3:checked ~ #category3_content,
	.tabBox #category4:checked ~ #category4_content,
	.tabBox #category5:checked ~ #category5_content,
	.tabBox #category6:checked ~ #category6_content,	
	.tabBox #category7:checked ~ #category7_content,
	.tabBox #category8:checked ~ #category8_content,
	.tabBox #category9:checked ~ #category9_content	{ display: block; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc;}
	.tabBox input:checked + .tab_item { background-color: #fff; border-bottom-color: #fff; position: relative;}
	.tabBox .tab2{ position: relative; top: 10px;}
	.tabBox input:checked + .tab_item:after { content: ''; display: block; background: #c3002f; height: 5px; float: left; position: absolute; bottom: 0; left: 20px; right: 20px;}
	
	.car_list{ display: flex; justify-content: center; flex-wrap: wrap;}
	.car_list a{ padding: 10px;}
	.car_list a img{ width: 167px;}
	.car_list a span{ display: block; text-align: center;}
}
@media (max-width: 767.98px) {
	.tabBox{ border-bottom: 1px solid #d2d2d2;}
	.car_ul{ margin: 0; padding: 0; list-style: none; font-size: 16px; border-top: 1px solid #d2d2d2;}
    .car_ul>li{ position: relative; margin: 0;}
	.car_ul>li:first-child{ display: flex; align-items: center; padding: 0.8em 30px 0.8em 0;}
	.car_ul>li .car_img{ width: 25%;}
	.car_ul>li .car_img img{ width: 100%;}
	.car_ul>li .car_name{ width: 75%; font-size: 4vw; padding: 0 0 0 10px;}
    .car_ul>li>span{ position: absolute; top: calc(50% - 16px); right: 20px; width: 24px; height: 24px;}
	.car_ul>li>span::before,
	.car_ul>li>span::after{ display: block; position: absolute;}
	.car_ul>li>span::before{ content: ""; z-index: 1;}
	.car_ul>li>span::after{ font-size: 20px; content: "＋"; z-index: 2; transition: .3s; color: #c3002f; font-weight: bold;}
    .car_ul.open>li>span::after{ content: "ー"; transform: rotate(-180deg); font-size: 18px;}
	.car_ul .tab_content{ display: none;}
	.car_ul.open .tab_content{ display: flex; padding: 1.1em 0;}
	
	.car_ul .tab_content .car_list{ display: flex; flex-wrap: wrap; width: 100%;}
	.car_ul .tab_content .car_list>a{ width: 50%; font-size: 13px; min-height: 5em; display: flex; align-items: center;}
	.car_ul .tab_content .car_list>a img{ width: 72px;}
	.car_ul .tab_content .car_list>a span{ padding: 0 0 0 5px;}
}
@media (min-width: 580px) and (max-width: 767.98px) {
	.car_ul.open .tab_content{ display: flex; padding: 1.1em 0 0;}
	.car_ul .tab_content .car_list{ display: flex; flex-wrap: wrap; width: 100%;}
	.car_ul .tab_content .car_list>a{ width: 150px; font-size: 14px; min-height: 5em; display: block; margin: 0 0 50px 0; text-align: center;}
	.car_ul .tab_content .car_list>a img{ width: 130px;}
	.car_ul .tab_content .car_list>a span{ padding: 5px 0 0 0; display: block; width: 100%;}
}


@media (min-width: 768px) {
	.banner_box{ text-align: center; margin: 0 0 100px 0; position: relative;}
	.banner_box img{ width: 800px; z-index: 2; position: relative;}
	.banner_box:hover img{ opacity: 0.85;}
	.banner_box::before{ content: ""; background-image: url("../images/deco/footprints.svg"); background-repeat: repeat-x; width: 300vw; height: 320px; position: absolute; left: calc(50% - 2100px); bottom: -30px; z-index: 1;}
}
@media (max-width: 767.98px) {
	.banner_box{ text-align: center; margin: 0 0 50px 0; position: relative;}
	.banner_box img{ width: 100%; z-index: 2; position: relative;}
	.banner_box:hover img{ opacity: 0.85;}
	.banner_box::before{ content: ""; background-image: url("../images/deco/footprints.svg"); background-repeat: repeat-x; width: 700px;
        height: 220px; position: absolute; left: calc(50% - 400px); top: -80px; z-index: 1;}
}


/* 2024.06.28 追加 */
@media (min-width: 768px) {
	.fixed_btn{ padding: 0; list-style: none; margin: 0; display: flex; position: fixed; z-index: 3; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; width: 60px; height: 510px; top: 160px; right: 0;}
	.fixed_btn>li:first-child{ height: 135px;}
	.fixed_btn>li{ height: 145px; margin: 5px 0; position: relative;}
	.fixed_btn>li>a{ font-size: 16px; position: relative; color: #414141; background-color: rgba(255,255,255,0.9); display: flex; height: 100%; width: 100%; justify-content: center; align-items: center; transition: .3s; border-radius: 5px 0 0 5px; border-left: 3px solid #e74c94; border-bottom: 3px solid #e74c94;}
	.fixed_btn>li>a img{ width: 26px; margin: 0 0 7px 0;}
	.fixed_btn>li>a p{ margin: 0; line-height: 1.1;}
	.fixed_btn>li:last-child>a{ background-color: rgba(255, 250, 199, 0.9); border-left: 3px solid #ffe600; border-bottom: 3px solid #ffe600;}
	.fixed_btn .link1 img{ width: 32px; height: 20px;}
	.fixed_btn .link2 img{ width: 26px; height: 23.5px;}
	.fixed_btn .link3 img{ width: 36px; height: 18px;}
	.fixed_btn .link4 img{ width: 26px; height: 26.5px;}
	#link1,#link2,#link3{ padding-top: 120px; margin-top: -120px;}
	
	.movie_flex{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0 0 100px 0;}
	.movie_flex>div{ margin: 0 10px;}
	
	.new_mark{ width: 100px; margin: 0 0 0 10px;}
	
	.border_bottom{ border-top: 3px dashed #b5b5b6; width: 1034px; margin: 100px auto 60px;}
}
@media (max-width: 767.98px) {
	.fixed_btn{ padding: 0 3px; list-style: none; margin: 0; display: flex; position: fixed; z-index: 4; width: 100%; height: 63px; bottom: 0;}
	.fixed_btn>li{ height: 100%; margin: 0 2px; width: calc(33.3% - 4px);}
	.fixed_btn>li>a{ position: relative; color: #414141; background-color: rgba(255,255,255,0.9); display: flex; flex-wrap: wrap; height: 100%; width: 100%; justify-content: center; align-items: center; transition: .3s; font-size: 13px; text-align: center; padding: 3px; border-radius: 5px 5px 0 0; border-top: 3px solid #e74c94; border-right: 1px solid #e74c94; border-left: 1px solid #e74c94;}
	.fixed_btn>li>a::before{ width: 100%; height: 2px;}
	.fixed_btn>li>a img{ width: 20px; margin: 0 0 3px 0;}
	.fixed_btn>li>a p{ margin: 0; line-height: 1.1; width: 100%;}
	.fixed_btn>li:last-child>a{ background-color: rgba(255, 250, 199, 0.9); border-top: 3px solid #ffe600; border-right: 1px solid #ffe600; border-left: 1px solid #ffe600;}
	.fixed_btn .link1 img{ width: 28px; height: 18px;}
	.fixed_btn .link2 img{ width: 20px; height: 18px;}
	.fixed_btn .link3 img{ width: 32px; height: 16px; margin: 0 0 5px 0;}
	.fixed_btn .link4 img{ width: 20px; height: 20.5px;}
	#link1,#link2,#link3{ padding-top: 90px; margin-top: -90px;}
	
	.movie_flex{ display: flex; justify-content: center; flex-wrap: wrap; margin: 0 auto 46px; width: 345px;}
	.movie_flex>div:nth-child(odd){ margin: 0 5px 0 0;}
	.movie_flex>div:nth-child(even){ margin: 0 0 0 5px;}
	
	.new_mark{ width: 40px; margin: 0 0 0 10px; position: absolute; top: -14px;}
	
	.border_bottom{ border-top: 2px dashed #b5b5b6; width: 98%; margin: 60px auto 60px;}
}

/* 旧TVCM */
@media (min-width: 768px) {
	.youtube-container2 { margin: 0 auto; text-align: center; padding: 0; position: relative; width: 300px; height: 170px;}
	.youtube-container2 .samune{ position: relative; z-index: 2; display: flex; justify-content: center; align-items: center; width: 300px; margin: 0 auto;}
	.youtube-container2 .samune:hover{ cursor: pointer;}
	.youtube-container2 .samune img{ width: 300px; height: auto;}
	.youtube-container2 .samune.open img{ display: none;}
	.youtube-container2 .samune .start,.youtube-container2 .samune .start_on{ width: 40px; height: auto; position: absolute;}
	.youtube-container2 .samune .start_on{ display: none;}
	.youtube-container2 .samune:hover .start_on{ display: block;}
	.youtube-container2 .samune:hover .start{ display: none;}
}
@media (max-width: 767.98px) {
	.youtube-container2 { margin: 0 auto 30px; text-align: center; padding: 0; position: relative; width: 166px; height: 82px;}
	.youtube-container2 .samune{ position: relative; z-index: 2; display: flex; justify-content: center; align-items: center;}
	.youtube-container2 .samune:hover{ cursor: pointer;}
	.youtube-container2 .samune img{ width: 166px; height: 82px;}
	.youtube-container2 .samune .start{ width: 30px; height: auto; position: absolute;}
}
@media (min-width: 630px) and (max-width: 767.98px) {
	.movie_flex{ width: 550px;}
	.youtube-container2 { width: 270px; height: 152px;}
	.youtube-container2 .samune img{ width: 270px; height: 152px;}
	.youtube-container2 .samune .start{ width: 46px;}
}


/* キャンペーン */
@media (min-width: 768px) {
	.campaign_box{ width: 800px; display: block; margin: 0 auto 80px;}
	.campaign_box img{ width: 100%;}
}
@media (max-width: 767.98px) {
	.campaign_box{ width: 100%; display: block; margin: 0 auto 60px;}
	.campaign_box img{ width: 100%;}
}