@charset "utf-8";

html {font-size: 62.5%;}

body{
	margin: 0px;
	padding: 0px;
	overflow:auto;
    background:#fff;
    box-sizing:border-box;
	line-height:1.5em;
	font-size:1.8em;
	font-family:'Noto Sans JP', serif;
	font-weight:400;
	color: #000;
}


main {
	width:100%;
	overflow:hidden;
	margin:auto;
	display:block;
}

input, select, textarea{
    font-family:'Noto Sans JP','sans-serif';cursor:pointer;width:100%;
	border-radius:6px;padding:14px 15px;display:block;background:#ededed;
}
::placeholder{color:#808080;}
input[type=checkbox], input[type=radio] {display: none;}
input[type=checkbox] + label{position: relative;padding-left: 30px;cursor: pointer;}
input[type=checkbox] + label::before{
	content: "";
    position: absolute;
    top: 50%;
    left: 0;
    box-sizing: border-box;
    display: block;
    width: 20px;
    height: 20px;
    margin-top: -9px;
    background-color: #fff;
    border: 1px solid #808080;
    border-radius: 4px;
}
input[type=checkbox]:checked + label::after{
	content: "";
    position: absolute;
    left: 4.5px;
    top: 50%;
    width: 11px;
    height: 7px;
    margin-top: -4px;
    transform: rotate(-45deg);
    border-left: 3px solid #ea8603;
    border-bottom: 3px solid #ea8603;
}
input[type=radio] + label{border-radius:6px;padding:14px 0 14px 45px;display:block;background:#ededed;cursor: pointer;position:relative;}
input[type=radio] + label::before{
content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    box-sizing: border-box;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background: #fff;
    border: 4px solid #fff;
    box-shadow: 0px 0px 0px 1px #808080;
    border-radius: 10px;
}
input[type=radio]:checked+label::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: block;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    background-color: #003068;
    border: 4px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 0px 1px #003068;
}
.selectwrap{position:relative;}
.selectwrap::after{
    content:"";
    width:10px;
    height:10px;
    border: 0px;
    border-top: solid 1px #333;
    border-right: solid 1px #333;
    transform: rotate(135deg);
    position: absolute;
    top: 50%;
    right:15px;
    margin-top: -6px;
    pointer-events: none;
}
table{width:100%;}
a{cursor:pointer;transition: all 0.2s ease-in-out;}
a.underline{text-decoration:underline;}
a.underlin:hover{text-decoration:none;}
img{width:100%;}
button{transition: all 0.2s ease-in-out;}
button img{vertical-align: middle;}

.container{max-width:1200px;margin:auto;width:96%;}
main .container{padding-bottom:100px;}
.wh_wrapper{background:#fff;box-shadow:0px 0px 20px -7px #b5b5b5;padding:50px 120px 80px;}
.btn{background:#ea8603;position:relative;text-align:center;font-weight:bold;display:block;width:300px;padding:10px 10px 12px;
font-size:2.2rem;line-height:1.8em;color:#fff;letter-spacing:0.04em;border-radius:0;}
.btn:hover{background:#fcc26d;}
.btn.navy{background:#003068;}
.btn.navy:hover{background:#396e99;}
.btn.black{background:#333;}
.btn.black:hover{background:#999;}
.btn.line::after{position:absolute;content:"";width:30px;height:1px;background:#fff;right:0;top:50%;margin-top:-1px;transition: all 0.2s ease-in-out;}
.btn.line:hover::after{width:0;}

p.ti{text-indent:-1em;padding-left:1em;}
.tiN{padding-left:1.5em;text-indent:-1.5em;}
.red{color:#f93a3a;}
.lblue{color:#29abe2;}
.orange{color:#ea8603;}
h2{font-size:3.2rem;font-weight:bold;}
h3{font-size:2.8rem;line-height:1.3em;}
h4{font-size:2.5rem;line-height:1.4em;}
h5{font-size:2.2rem;line-height:1.5em;font-weight:bold;}
h6{font-size:2rem;line-height:1.7em;}

@font-face {
  font-family: 'gmec';
  src: url('../font/gmec.ttf') format('truetype');
}
.gin{font-family: "gin";font-weight: 400;font-style: normal;line-height: 0.86em;letter-spacing: 0.04em;}

.pagetitle{background:#f09200;padding:35px;text-align:center;}
.pagetitle img{max-width:400px;}
.pagetitle h1{font-size: 7rem;}
.pagetitle p{font-size:2rem;line-height:1em;margin-top:20px;}

.pankuzu {padding-top: 20px;width: 96%;margin: auto;color: #808080;}
.pankuzu ul {display: flex;flex-wrap: wrap;}
.pankuzu ul li {margin-right: 26px;position: relative;}
.pankuzu ul li::after {
    content: "";
    width: 8px;
    height: 8px;
    border: 0px;
    border-top: solid 1px #808080;
    border-right: solid 1px #808080;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    margin-top: -4px;
    right: -15px;
}
.pankuzu ul li:last-child::after{display:none;}
.pankuzu ul li a {text-decoration: underline;}
.pankuzu ul li a:hover{text-decoration: none;}

.floating {position: fixed;width: 60px;right: 0;top: 30%;z-index: 80;}
.floating a{position:relative;background:#fff;display:block;color:#ea8603;font-weight:bold;font-size:2.2rem;
padding:20px 20px 50px;line-height: 1em;letter-spacing:0.08em;box-shadow: -1px 0px 14px -2px rgba(0,0,0,.2);}
.floating a::before, .floating a::after{
    content: "";
    width: 12px;
    height: 12px;
    border: 0px;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    transform: rotate(135deg);
    position: absolute;
    bottom:22px;
    right:50%;
    margin-right:-6px;
    transition: all 0.2s ease-in-out;
}
.floating a::after{bottom:32px;}
.floating a span{transition: 200ms;}
.floating a:hover span{color: transparent;}


/*header--------------*/
header{position:fixed;width:100%;top:0;left:0;z-index:99;background:#fff;display:flex;justify-content:space-between;align-items:center;}
header .nav-list a{font-size:1.4rem;font-weight:bold;text-align:center;}
header .logo{display:inline-block;margin:0 10px;}
header .logo:hover, footer .logo:hover{opacity:.6;}
header .logo img{max-width:218px;}
header .btns .btn_login{background:#fff;}
header .btns .btn_members{background:#333;}
header .btns a:hover{background:#ea8603;}
header .btns a img{max-width:67px;}



/*footer-------------*/
footer{background:#333;padding-top:30px;}
footer nav ul{display:flex;flex-wrap:wrap;}
footer nav ul li a{color:#fff;font-weight:bold;}
footer nav ul li a:hover{color:#f09200;}
footer nav .logo {display:inline-block;}
footer nav .logo img{max-width:89px;}
footer nav ul li{border-left:1px solid #fff;margin-left:15px;padding-left:15px;line-height:1.2em;}
footer nav ul li:first-child{border:none;}
footer nav ul li a{display:block;text-align:center;}
footer .subnav{margin:35px 0 50px;}
footer .subnav ul{display:flex;}
footer .subnav ul li{margin:0 15px;}
footer .subnav ul li a{font-size:1.6rem;color:#fff;text-align:center;}
footer .subnav ul li a:hover{text-decoration:underline;}
footer .subnav .snslink a {background:#fff;border-radius:50%;display:inline-block;padding:10px;margin-right:10px;}
footer .subnav .snslink a:hover{background:#ccc;}
footer .subnav .snslink a img{max-width:37px;}
footer .copyright{background:#ededed;text-align:center;padding:15px;font-size:1.4rem;line-height:1.5em;}
footer .copyright a{font-size:2rem;font-weight:700;letter-spacing:0.04em;color:#e60012;}
footer .copyright a:hover, footer .pc .container .logo:hover{opacity:.5;}
.totopfade {
    position: fixed;
    right: 0;
    bottom: 15px;
    width: 62px;
    height: 62px;
    box-sizing: border-box;
    z-index: 98;
    box-shadow: -3px 6px 12px 0 rgba(0,0,0,.15);
}

/*top----------------*/
body.noscroll{overflow: hidden;}

#top #top-slide{background:#333;}
#top #top-slide .slick-slide.bg{background:url(../img/bg.jpg)no-repeat center center;background-size:cover;}

#top .mainV .scroll{animation: cycle 1s ease 0s infinite alternate;letter-spacing:0.08em;color:#fff;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;
position:absolute;top:50%;right: 10px;transform: translateX(-50%);border-left:2px solid #fff;padding:10px 5px;}
#top .mainV .scroll::after{content:"";width:2px;height:10px;position:absolute;background:#fff;bottom: -1px;left: -5px;transform: rotate(135deg);}
@keyframes cycle {
  0% { 
    transform: translateY(10px); }
  100% {
    transform: translateY(-15px); } 
}
#top .mainV{position:relative;}
#top .mainV .copy{position: absolute;width:100%;left:0;top:0;}
#top .mainV .btn{color:#000;position:absolute;bottom:10%;left:8%;width:500px;padding:15px;font-size: 2.4rem;line-height: 2em;
box-shadow: 6px 6px 12px -6px rgb(0 0 0 / 50%);}
#top .mainV .btn span{position:relative;display:block;padding-right:14px;}
#top .mainV .btn span::before, #top .mainV .btn span::after{
	content: "";
    width: 14px;
    height: 14px;
    border: 0px;
    border-top: solid 2px #000;
    border-right: solid 2px #000;
    transform: rotate(45deg);
    position: absolute;
    top: 50%;
    right:15px;
    margin-top: -7px;
    transition: all 0.2s ease-in-out;
}
#top .mainV .btn span::after{right:24px;}
#top .mainV .btn:hover{background:#fff;color:#ea8603;}
#top .mainV .btn span:hover::before, #top .mainV .btn span:hover::after{border-color:#ea8603;right:5%;}
#top .mainV .scroll{animation: cycle 1s ease 0s infinite alternate;letter-spacing:0.08em;color:#fff;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;
position:absolute;top:50%;right: 10px;transform: translateX(-50%);border-left:2px solid #fff;padding:10px 5px;}
#top .mainV .scroll::after{content:"";width:2px;height:10px;position:absolute;background:#fff;bottom: -1px;left: -5px;transform: rotate(135deg);}
@keyframes cycle {
  0% { 
    transform: translateY(10px); }
  100% {
    transform: translateY(-15px); } 
}
#top .testdrive{max-width:700px;margin:60px auto;border:15px solid rgba(41,171,226,.2);padding:30px;text-align:center;}
#top .testdrive h4{font-weight:bold;}
#top .testdrive h4 span{color:#29abe2;}
#top .testdrive .btn{margin:20px auto 0;background:#29abe2;}
#top .testdrive .btn:hover{background:#7dd8ff;}
#top section{padding:70px 0;}
#top .service{background:#ededed;}
#top .service .container{position:relative;}
#top .service .midashi{max-width:526px;position:absolute;top:-140px;left:0;}
#top .service .img-side{text-align:right;}
#top .service .img-side .txt{box-sizing: border-box;width: 54%;padding:40px 5% 55px;background:#fff;z-index:2;text-align:left;}
#top .service .img-side .pic{max-width:792px;width:50%;}
#top .service .img-side h4{font-weight:bold;line-height:1.6em;}
#top .service .img-side h4 span{background:linear-gradient(transparent 60%, #fcc26d 60%);}
#top .service .img-side p{margin:15px 0 30px;}
#top .service .img-side .twobtns li a{width:auto;}
#top .sectitle{margin-bottom:55px;text-align:center;}
#top .sectitle h2{font-size: 7.4rem;}
#top .sectitle p{font-weight:bold;margin-top:15px;}
#top .plan h4{box-sizing: border-box;padding-left:40px;position: relative;font-size:2.4rem;}
#top .plan h4:first-of-type{margin-bottom:20px;}
#top .plan h4::before {
    background: #fff;
    border: 1px solid #333;
    content: "";
    display: block;
    height: 24px;
    left: 0;
    position: absolute;
    top: 6px;
    width: 24px;
}
#top .plan h4::after {
    border-right: 4px solid #333;
    border-bottom: 3px solid #333;
    content: "";
    display: block;
    height: 23px;
    left: 10px;
    position: absolute;
    top: 2px;
    transform: rotate(45deg);
    width: 9px;
}
#top .plan h4 span{color:#ea8603;font-weight:bold;}
#top .plan .ta-r{margin:10px 0 40px;}
#top .plan ul{display:flex;justify-content:space-between;}
#top .plan ul li{width:24%;font-size:2.4rem;position:relative;}
#top .plan ul li:first-child{width:49%;}
#top .plan .years li{padding-right:20px;}
#top .plan .years li:last-child{padding:0;}
#top .plan .years li::before{content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 23.5px 0 23.5px 20px;
    border-color: transparent transparent transparent #29abe2;
    top: 50%;
    margin-top: -23.5px;
    right: 0;
}
#top .plan .years li:last-child::before{display:none;}
#top .plan .years li p{background:#29abe2;color:#fff;text-align:center;padding:10px;font-weight:bold;}
#top .plan .price li{background:#ededed;margin-top:15px;text-align:center;padding:20px;display:flex;align-items:center;justify-content: center;}
#top .plan .price li p{font-weight:bold;}
#top .plan .price li:first-child p{width:38%;}
#top .plan .price li div{background:#fff;color:#29abe2;padding:30px;width: 58%;margin-right:4%;}
#top .plan .price li span{position:absolute;width:6em;font-size:1.8rem;background:#333;padding:8px 0;color:#fff;border-radius:30px;right: -3.5em;bottom: -30px;z-index:1;}
#top .plan .price li:last-child span{right:-3em;}
#top .plan .price li span::before{
	content: "";
	position:absolute;
    display: block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 12px 0 12px 12px;
    border-color: transparent transparent transparent #333;
    top: -10px;
    left: 50%;
    transform: rotate(-90deg) translateX(50%);
    margin-left:-6px;
}
#top .plan .young h2{color:#ea8603;text-align:center;border-top:2px solid #ea8603;border-bottom:2px solid #ea8603;padding:15px;max-width:700px;margin:120px auto 30px;position:relative;}
#top .plan .young h2::before{
	content: "";
	position:absolute;
    display: block;
	background: url(../img/top_young.png)no-repeat center center;
	width:144px;
	height:141px;
	background-size:cover;
    top: -50px;
    left: -17.5%;
}
#top .plan .young h2 span{font-size:4rem;padding-right:5px;}
#top .plan .young h5{margin-bottom:40px;text-align:center;font-weight:400;}
#top .plan .young h5 span{background: linear-gradient(transparent 10%, #fcc26d 10%);}
#top .plan, #top .flow{padding:70px 0 90px;}
#top .plan .container, #top .flow .container, #top .reason .container, #top .news .container{padding:0;}
#top .flow .sectitle{margin-bottom:25px;}
#top .flow .btn{margin:50px auto 0;}
/* 231220 */
#top .flow a{text-decoration:underline;}
#top .flow a:hover{text-decoration:none;}
#top .reason{padding:0;}
#top .reason .bgor{background:#f09200;padding:70px 0 90px;position:relative;}
#top .reason .bgor::after{
	content:"";
    border-color: transparent transparent transparent #f09200;
    position: absolute;
    border-width: 32px 0 32px 36px;
    left: 50%;
    margin-top: 0;
    transform: rotate(90deg);
    bottom: -50px;
    margin-left: -18px;
}
#top .bike{background:#003068;padding:30px 0 0;}
#top .bike .container{padding-bottom:0;}
#top .bike .flex{color:#fff;}
#top .bike .flex .txt h4{display:inline-block;border-bottom:2px solid #fff;padding-bottom:5px;margin-bottom:15px;}
#top .bike .flex .txt dl{display:flex;color:#fff;}
#top .bike .flex .txt dl dt{width:35%;font-weight:400;padding-bottom:10px;}
#top .bike .flex .txt dl dd{width:65%;padding-bottom:10px;}
#top .bike .flex .txt .btn{background:#d1ba80;margin-top:30px;color:#333;}
#top .bike .flex .txt .btn.line::after{background:#333;}
#top .bike .flex .txt .btn:hover{background:#fff;}
#top .bike .threepic li{position:relative;}
#top .bike .threepic li p{background:#e6e6e6;text-align;center;padding:10px 20px;position:absolute;width:auto;top:30px;right:30px;transform: skew(-15deg);}
#top .bike .threepic li:nth-child(2) p{top:auto;bottom:30px;left:30px;right:auto;}
#top .bike .threepic li p span{transform: skew(15deg);display:inline-block;font-weight:bold;color:#003068;font-size:2.8rem;}

#top .reason .sectitle{color:#fff;}
#top .reason .bgor ul li div{background:#fff;box-shadow: 6px 6px 12px -6px rgba(0,0,0,.3);padding:20px 40px 30px;margin-bottom:10px;}
#top .reason .bgor ul li img{max-width:178px;display:block;margin:auto;}
#top .reason .bgor ul li h4{font-weight:bold;text-align:center;margin:15px 0 20px;height:70px;}
#top .reason .bgor ul li h4 span{display:inline-block;vertical-align:middle;line-height:70px;}
#top .reason .bgor ul li h6{line-height:1.5em;margin-bottom:15px;position:relative;padding-left:25px;}
#top .reason .bgor ul li:first-child h6:last-of-type{margin-bottom:0;}
#top .reason .bgor ul li h6::before{
	border-right: 3px solid #b3b3b3;
    border-bottom: 3px solid #b3b3b3;
    content:"";
    display: block;
    height: 15px;
    left: 2px;
    position: absolute;
    top: 5px;
    transform: rotate(45deg);
    width: 10px;
}
#top .reason .recommend{padding:90px 0;}
#top .reason .recommend h2{text-align:center;}
#top .reason .recommend h2 span{position:relative;display:inline-block;padding-left:10px;}
#top .reason .recommend h2 span::before, #top .reason .recommend h2 span::after{
  content:"";
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 52px;
  height: 2px;
  background-color: black;
}
#top .reason .recommend h2 span::before{left:-45px;transform: rotate(56deg);}
#top .reason .recommend h2 span::after{right:-45px;transform: rotate(-56deg);}
#top .reason .p-box{border:3px solid #333;margin-top:90px;position:relative;padding:45px 45px 30px;}
#top .reason .p-box h4{position: absolute;width: auto;padding: 15px 20px;background: #333;color: #fff;left: -20px;top: -45px;font-weight: bold;}
#top .reason .p-box h4::after {
    position: absolute;
    content:"";
    right: -30px;
    top: 0;
    width: 0;
    height: 0;
    border-left: solid 30px #333;
    border-bottom: solid 65px transparent;
    display:block;
}
#top .reason .p-box h4 span{font-family: 'gmec';font-weight:400;color:#f09200;padding-right:10px;font-size:4.5rem;font-size: 3.4rem;line-height: 0.9;vertical-align:text-bottom;letter-spacing:0.03em;}
#top .reason .p-box ul li{position:relative;}
#top .reason .p-box ul li:first-child::after{
	content: "";
    position: absolute;
    display: block;
}
#top .reason .p-box ul li h5{color:#ea8603;position:relative;padding-left:24px;}
#top .reason .p-box ul li h5::before{
    position: absolute;
    content:"";
    left: 0;
    top: 14px;
    width: 8px;
    height: 8px;
    display:block;
    background:#ea8603;
    transform: rotate(45deg);
}
#top .news{background:#ededed;padding:70px 0 90px;}
#top .news .box{background:#fff;padding:40px;}
#top .access{padding-bottom:0;}
#top .access .sectitle{color:#ea8603;}
#top .access h4{font-weight:bold;border-bottom:2px solid #333;padding-bottom:15px;}
#top .access .flex{display:flex;margin:40px 0;}
#top .access p{margin-top:20px;}
.gmap {width: 100%;position: relative;padding-top: 36.25%;filter: grayscale(100%);}
.gmap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/*news----------------*/
.newslist li a{padding:20px 0;position:relative;}
.newslist li a .date{position:relative;font-weight:bold;font-size:3rem;padding-left:30px;}
.newslist li a .date::before{
	display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    transform: rotate(45deg);
    transition: all 0.2s ease-in-out;
    margin-top:-4px;
}
.newslist li a:hover .date::before{left:10px;}
.newslist li a .date span, #news.detail .date span{font-size:1.9rem;display:inline-block;vertical-align:bottom;margin-right:10px;}
.newslist li a .title{position:relative;padding-left:44px;}
.newslist li a .title::before{
    content: "";
    width:2px;
    height:32px;
    background:#ea8603;
    position:absolute;
    top:0;
    left:21px;
    transform: rotate(30deg);
    margin-top:-1px;
}

#news .pagetitle{background:#003068;color:#d1ba80;}
#news .container, #lineup .container{padding-top:70px;}
#news.detail .date{font-size:3rem;font-weight:bold;}
#news.detail .title{border-top:6px double #000;padding:20px;margin:15px 0 30px;}
#news.detail{background:#ededed;}
#news.detail .wh_wrapper{padding:60px;}
#news.detail .pagenation {display:flex;text-align: center;margin: 20px auto;flex-wrap: wrap;justify-content: space-between;}
#news.detail .pagenation li{width: calc(100% / 3);display: inline-block;}
#news.detail .pagenation li a {position: relative;letter-spacing: 0.05em;padding:0 18px;}
#news.detail .pagenation li a:hover{color:#ea8603;}
#news.detail .pagenation li.pervbtn{text-align:left;}
#news.detail .pagenation li.nextbtn{text-align:right;}
#news.detail .pagenation li.pervbtn a::before, #news.detail .pagenation li.nextbtn a::before {
    content: "";
    width: 8px;
    height: 8px;
    border: 0px;
    border-bottom: solid 2px #000;
    border-right: solid 2px #000;
    position: absolute;
    top: 50%;
    margin-top:-4px;
    transition: all 0.2s ease-in-out;
}
#news.detail .pagenation li.pervbtn a::before {transform: rotate(135deg);left: 4px;}
#news.detail .pagenation li.nextbtn a::before {transform: rotate(-45deg);right: 4px;}
#news.detail .pagenation li a:hover::before{border-color:#ea8603;}

/*members------------*/
#members .container, #entry .container{padding:60px 0 100px;}
#members h2{text-align:center;letter-spacing:0.06em;margin-bottom:80px;position:relative;}
#members h2::after{width:36px;height:2px;background:#ea8603;content:"";position:absolute;bottom:-30px;left:50%;transform: translateX(-50%);}
form table td p{margin-top:10px;}
#members .box, #entry .box{border:2px solid #ea8603;margin-top:40px;padding:40px 70px;}
.box ul.links li{margin-bottom:15px;}
.box ul.links li a{font-weight:bold;color:#ea8603;position:relative;padding-left:15px;}
.box ul.links li a:hover{text-decoration:underline;}
.box ul.links li a::before{
    display: block;
    content: "";
    width: 8px;
    height: 8px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
    transform: rotate(45deg);
}
#members .box label, #entry .box label{font-size:2rem;font-weight:bold;display:inline-block;}
#members .btn, #entry .btn{margin:40px auto 0;}
#members .intro, #entry .intro{margin:10px 0 20px;}
#members.fin h6{margin:90px 0 120px;text-align:center;}
#members.login h6{margin-top:85px;text-align:center;}
#members.login .ta-c{margin-top:20px;}
#members p a, #entry p a{color:#ea8603;text-decoration:underline;}
#members p a:hover, #entry p a:hover{text-decoration:none;}


/*entry------------*/
#entry .flow {margin:0 auto 70px;display: flex;flex-wrap: wrap;justify-content: space-between;max-width:900px;}
#entry .flow li {position: relative;text-align: center;text-transform: uppercase;width: 25%;color: #fcce86;
font-weight: bold;counter-increment: steps;line-height: 1em;}
#entry .flow li:before {
    display: block;
    width: 46px;
    height: 46px;
    margin: 10px auto;
    content: "";
    line-height: 46px;
    font-size: 2rem;
    text-align: center;
    border-radius: 50%;
    background: #fcce86;
    content:counter(steps);
    color:#fff;
}
#entry .flow li:after {position: absolute;z-index: -1;top: 32px;left: -50%;width: 100%;height: 3px;content:"";background: #fcce86;}
#entry .flow li:first-child::after{display:none;}
#entry .flow li.now{color:#ea8603;}
#entry .flow li.now::before, #entry .flow li.now::after, #entry.confirm .flow li:first-child::before,
#entry.settlement .flow li:first-child::before, #entry.settlement .flow li:nth-child(2)::before, #entry.settlement .flow li:nth-child(2)::after,
#entry.fin .flow li:before, #entry.fin .flow li::after{background:#ea8603;}
#entry .birth_flex li{display:flex;align-items:center;}
#entry .birth_flex li input{width:160px;}
#entry .birth_flex li select{width:90px;}
#entry .birth_flex li span{padding:0 30px 0 10px;}
#entry table td .btn, #mypage table td .btn{margin:0;font-size:1.6rem;width:220px;}
#entry .zip_flex{display:flex;}
#entry .zip_flex input, #mypage .zip input{width:200px;}
#entry .zip_flex .btn{margin-left:26px;width:200px;}
#entry.input .box ul.links{border-top:1px dotted #000;padding-top:40px;margin-top:40px;}
#entry.input .box .ti{margin-bottom:10px;}
#entry.input .box.option, #entry.input .box.option input[type=checkbox]:checked + label::after{border-color:#003068;}
#entry.input .box.option input[type=checkbox]+ label{margin:30px 0 10px;}
#entry.input .box h5{color:#003068;}
#entry.input .btn.line{margin-top:55px;}
#entry.confirm .btn.back.line{background:#d8d8d8;color:#333;}
#entry.confirm .btn.back.line:hover{background:#e6e6e6;}
#entry.confirm .btn.back.line::after{background:#333;}
#entry.settlement .total{border-top:2px solid #000;border-bottom:2px solid #000;padding:25px;text-align:center;margin-top:15px;}
#entry.settlement .total p{font-size:3rem;}
#entry.settlement h5{color:#003068;border-left:6px solid #003068;line-height:1.3em;padding-left:10px;margin:55px 0 15px;}
#entry.fin h3{text-align:center;padding:30px 0;}


/*mypage------------*/
#mypage .container{padding-bottom:0;}
#mypage aside{background:#fff;padding:70px 60px 170px;z-index:2;}
#mypage aside h2{color:#003068;text-align:center;}
#mypage aside img{max-width:86px;margin:20px auto;display:block;}
#mypage aside h3{text-align:center;}
#mypage aside ul{margin-top:40px;}
#mypage aside ul li a{padding:30px;display:block;font-size:2.2rem;font-weight:bold;border:2px solid #fff;}
#mypage aside ul li a:hover{border-color:#ea8603!important;color:#ea8603;}
#mypage aside ul li a span{position:relative;padding-left:20px;}
#mypage aside ul li a span::before{
    display: block;
    content: "";
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-top: 2px solid #000;
    position: absolute;
    top: 50%;
    left: 0;
    margin-top: -4px;
    transform: rotate(45deg);
}
#mypage aside ul li.select a{background:#fae9c1;color:#ea8603;border-color:#fae9c1;}
#mypage aside ul li.select a span::before, #mypage aside ul li a:hover span::before{border-color:#ea8603;}
#mypage section{padding:70px 5% 100px;}
#mypage .dm ul li{border-bottom:1px solid #808080;}
#mypage .dm ul li:first-child{border-top:1px solid #808080;}
#mypage .dm ul li a{padding:25px 20px;}
#mypage .dm ul li a:hover{background:#ededed;}
#mypage .dm ul li a .date{font-weight:bold;position:relative;margin-right:20px;padding-left:70px;}
#mypage .dm ul li a .date::before{display: block;content: "";width: 58px;height: 54px;position: absolute;top: 50%;left: 0;transform: translateY(-50%);transition: all 0.2s ease-in-out;}
#mypage .dm ul li a.unread{color:#ea8603;}
#mypage .dm ul li a.unread .date::before{background:url(../img/dm_mark.png);background-size:cover;}
#mypage .dm ul li a.opened .date::before{background:url(../img/dmopen_mark.png);background-size:cover;}
#mypage .dm.detail .date{font-weight:bold;margin-bottom:5px;}
#mypage .dm.detail .title{border-bottom:1px solid #808080;padding-bottom:15px;font-weight:400;}
#mypage .dm.detail .txt{margin:40px 0 70px;}
#mypage .btn.line{margin:50px auto 0;}
#mypage .midashi{font-weight:bold;position:relative;padding:0 15px 15px;margin-bottom:4px;line-height: 1.4em;}
#mypage .midashi::before, #userguide h4.border::before{position:absolute;content:"";display:block;width:100%;height:2px;left:0;bottom:0;background:#d8d8d8;}
#mypage .midashi::after, #userguide h4.border::after{position:absolute;content:"";display:block;width:32%;height:2px;left:0;bottom:0;background:#ea8603;}
#mypage .state{padding-right:0;padding-top:15px;}
#mypage .state .flex h5{margin-bottom:20px;}
#mypage .state dl{display:flex;align-items:center;margin-bottom:10px;}
#mypage .state dl dt{width:13%;text-align:center;background:#d8d8d8;border-radius:20px;padding:5px;margin-right:2%;}
#mypage .state dl dd{width:85%;}
#mypage .state .now{padding:55px 40px 60px;}
#mypage .state .until{padding:55px 40px 60px;background:#ededed;}
#mypage .state .until .midashi::before{background:#fff;}
#mypage .state .until .midashi::after{background:#003068;}
#mypage .state .until dl dt{background:#fff;}

#mypage .product li{margin-bottom:80px;}
#mypage .product li .txt h4{font-weight:bold;margin:20px 0 5px;}
#mypage .product li .txt .price{font-size:3.5rem;font-weight:bold;}
#mypage .product li .txt .price span{font-size:2.2rem;padding-left:20px;}
#mypage .product li .txt .btn{margin:20px auto 15px;}
#mypage .product li .txt .att{text-align:center;color:#ea8603;}
#mypage .product li.soldout figure{position:relative;}
#mypage .product li.soldout figure::before{position:absolute;content:"\7533\8FBC\307F\7D42\4E86";display:block;top:50%;left:50%;width:200px;line-height: 1.6em;
transform: translate(-50%,-50%);text-align:center;background:#333;padding:20px;color:#fff;font-weight:bold;font-size:2rem;border:3px solid #fff;}
#mypage .product li.soldout .txt .btn{pointer-events:none;background:#999;color:#d1d1d1;}

/*lineup*/
#lineup h2.line{font-weight:bold;position:relative;padding:0 15px 15px;margin-bottom:40px;}
#lineup h2.line::before, #lineup .midashi::before{position:absolute;content:"";display:block;width:100%;height:2px;left:0;bottom:0;background:#d8d8d8;}
#lineup h2.line::after, #lineup .midashi{position:absolute;content:"";display:block;width:32%;height:2px;left:0;bottom:0;background:#ea8603;}
/* 202402
#lineup .product li{margin-bottom:80px;}
#lineup .product li .txt h4{font-weight:bold;margin:20px 0 5px;}
#lineup .product li .txt .price{font-size:3.5rem;font-weight:bold;}
#lineup .product li .txt .price span{font-size:2.2rem;padding-left:20px;}
#lineup .product li .txt .btn{margin:20px auto 15px;}
#lineup .product li .txt .att{text-align:center;color:#ea8603;}
*/
#lineup .product li.soldout figure{position:relative;}
#lineup .product li.soldout figure::after{position:absolute;content:"\7533\8FBC\307F\7D42\4E86";display:block;top:50%;left:50%;width:200px;line-height: 1.6em;transform: translate(-50%,-50%);text-align:center;background:#333;padding:20px;color:#fff;font-weight:bold;font-size:2rem;border:3px solid #fff;}
#lineup .product li.soldout figure::before{content: ""; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.2); width: 100%; height: 100%;}
#lineup .product li.soldout .btn{pointer-events:none;background:#999;color:#d1d1d1;}


#lineup .spec h3{font-weight:bold;margin-top:40px;line-height:1.2em;}
#lineup .spec .pcflex{margin:30px 0 20px;}
#lineup .spec .ti, #lineup .spec table{font-size:1.4rem;}
#lineup .pcflex table th{text-align:center;background:#ededed;font-weight:400;padding:12px 10px;vertical-align:middle;width:30%;border-bottom:1px solid #333;}
#lineup .pcflex table td{padding:12px 15px;vertical-align:middle;width:70%;border-bottom:1px solid #333;}
.pagebtm_link{background: url(../img/bg_photo.jpg) center center no-repeat;background-size: auto;padding:160px 0;}
.pagebtm_link ul{max-width:1032px;width:96%;margin:auto;}
.pagebtm_link ul li a{display:block;background:rgba(255,255,255,.7);text-align:center;padding:20px;border:3px solid #fff;position:relative;}
.pagebtm_link ul li a::after{
	display: block;
    content: "";
    width: 16px;
    height: 16px;
    border-right: 3px solid #000;
    border-top: 3px solid #000;
    position: absolute;
    top: 50%;
    right: 20px;
    margin-top: -8px;
    transform: rotate(45deg);
    transition: all 0.2s ease-in-out;
}
.pagebtm_link ul li a p{font-weight:bold;font-size:2.6rem;letter-spacing:0.05em;line-height: 2em;margin-right:15px}
.pagebtm_link ul li a p span{text-align:center;background:#fff;border-radius:50%;width:70px;height:70px;display:inline-block;padding:8px;margin-right:10px;transition: all 0.2s ease-in-out;}
.pagebtm_link ul li a p span img{max-width:52px;}
.pagebtm_link ul li a:hover::after{right:30px;}
.pagebtm_link ul li a:hover span{background:#ea8603;}


/*userguide*/
.jumpbtns{display:flex;flex-wrap:wrap;margin-top:35px;}
.bggray .container{padding:0;}
.jumpbtns li a{display:block;background:#fff;text-align:center;padding:15px 10px 25px;position:relative;border:1px solid #fff;}
.jumpbtns li a::before{
 	content: "";
    width: 10px;
    height: 10px;
    border: 0px;
    border-top: solid 2px #f09200;
    border-right: solid 2px #f09200;
    transform: rotate(135deg);
    position: absolute;
    bottom: 10px;
    right: 50%;
    margin-right: -5px;
}
.jumpbtns li a:hover{border-color:#000;}
.bggray{background:#e6e6e6;padding-bottom:60px;}
#userguide .pagetitle{background:#003068;color:#fff;}
#userguide h2 {text-align:center;margin:90px 0 65px;}
#userguide h2 span{position: relative;padding:0 15px 15px;border-bottom: 2px solid #333;font-weight:bold;}
#userguide h2 span::after{
	position: absolute;
    top: 100%;
    left: 50%;
    transform: skew(-40deg) translateX(-50%);
    height: 15px;
    width: 25px;
    border-right: 2px solid #333;
    background-color: white;
    content: "";
}
#userguide .wh_wrapper{padding:50px 50px 70px;}
#userguide p a, #faq p a, #kiyaku p a{text-decoration:underline;}
#userguide p a:hover, #faq p a:hover, #kiyaku p a:hover{text-decoration:none;}
#userguide h4.border{font-weight: bold;position: relative;padding:0 10px 10px;margin:70px 0 25px;}
#userguide h6{font-weight:bold;border-left:6px solid #ea8603;line-height:1.3em;padding-left:8px;margin:40px 0 15px;}
#userguide .wh_wrapper .att{background:#ededed;padding:30px;margin-top:40px;}
#userguide .steps li{display:flex;align-items:flex-start;padding-bottom:50px;position: relative;}
#userguide .steps li::before{
	position: absolute;
	top: 0;
	left: 35px;
	width: 3px;
	height: 100%;
	background: #ea8603;
	content:"";
}
#userguide .steps li.kikan::before{background:#29abe2;}
#userguide .steps li:last-child{padding:0;}
#userguide .steps li:last-child::before{display:none;}

#userguide .steps li .number{
	position: relative;
	font-family: 'gmec';
	border-radius: 50%;
	width: 70px;
	height: 70px;
	text-align: center;
	background: #ea8603;
	color: #333;
	font-size: 3rem;
}
#userguide .steps li .number p{position:absolute;top:50%;left:50%;transform: translate(-50%,-50%);}
#userguide .steps li .number span{font-size:1.6rem;letter-spacing:0.18em;line-height:1.2em;color:#fff;display:block;margin-left:0.15em;}
/* 231220 */
#userguide .steps li .number .alpha{font-family: math;color: #333;font-size: 2.2rem;font-weight: bold;letter-spacing: 0;text-align: left;}
#userguide .steps li.kikan .number{background:#29abe2;}
#userguide .steps li .text{margin:18px 0 0 15px;width:calc(100% - 85px);}
#userguide .steps li .text h5{color:#ea8603;font-weight:bold;margin-bottom:15px;}
#userguide .steps li.kikan h5{color:#29abe2;}

#userguide .dotlist li{position:relative;padding:0 0 0 1em!important;margin:5px 0 0 0;display:block;}
#userguide .dotlist li::before{
	content: "";
    background: #333;
    width: 4px;
    height: 4px;
    left: 0.5rem!important;
    top: 11px;
    display: inline-block!important;
    position: absolute;
}

/*faq*/
#faq .pagetitle{background:#f09200;color:#fff;}
#faq h3{font-weight:bold;border-bottom:2px solid #ea8603;padding:15px 15px 30px;margin-top:60px;}
#faq .ac-box {padding:15px 20px;border-bottom:2px solid #ea8603;}
#faq .ac-box .ac-q {position: relative;cursor: pointer;display:flex;}
#faq .ac-box .ac-q::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 15px;
    height: 2px;
    transform: rotate(90deg);
    background: #333;
    transition: all .3s ease-in-out;
}
#faq .ac-box .ac-q::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    width: 15px;
    height: 2px;
    background: #333;
}
#faq .ac-box .ac-q.active::before{transform: rotate(180deg);}
#faq .ac-box .ac-q h6{font-weight:bold;width:calc(100% - 67px);margin-top:12px;line-height:1.4em;}
#faq .ac-box .ac-open {display: none;}
#faq .ac-box h4{width:52px;height:52px;line-height:52px;font-family: 'gmec';background:#333;text-align:center;border-radius:50%;color:#fff;margin-right:15px;}
#faq .ac-box .ac-open .text{display:flex;padding-top:15px;}
#faq .ac-box .ac-open .text h4{background:#ea8603;}
#faq .ac-box .ac-open .text p{width:calc(100% - 67px);margin-top:9px;line-height:1.7em;}

/*kiyaku------------*/
#kiyaku .pagetitle{background:#e2e2e2;color:#003068;}
#kiyaku .container{padding-top:70px;}
#kiyaku h2{margin:80px 0 40px;font-size:3.4rem;text-align:center;line-height:1.3em;border-bottom:3px solid #ea8603;padding-bottom:15px;}
#kiyaku h4{font-weight:bold;border-left:5px solid #003068;color: #003068;line-height:1.2em;padding-left:10px;margin:55px 0 15px;}
#kiyaku h5{margin:25px 0 10px;}
#kiyaku h6{margin-top:15px;font-weight:bold;color:#ea8603;}
#kiyaku.legal table{border-top:1px solid #333;}
#kiyaku p.ti1 {text-indent: -0.8em;padding-left: 0.8em;}
#kiyaku p.ti2 {text-indent: -1.3em;padding-left: 1.3em;}
#kiyaku .numberlist li{padding-left:1.2em;text-indent:-1.2em;}
#kiyaku .numberlist li.niketa{padding-left:1.8em;text-indent:-1.8em;}
#kiyaku .numberlist.mlti{margin-left:0.8em;}

/*PC==============================================*/
@media screen and (min-width:929px){
.pc{display:block;}
.sp{display:none;}

header .btns{display:flex;}
header .pcflex{display:flex;justify-content:flex-end;align-items:center;}
header .nav-list{display:flex;}
header .nav-list li{margin-right:35px;}
header .nav-list li a:hover{color:#ccc;}
header .nav-list li.select a{color:ea8603;}
footer nav{display:flex;align-items:center;justify-content:center;}
#top .service .img-side .txt{position:absolute;top:80px;left:0;}
#top .plan .young h5 span br{display:none;}
#top .bike .flex{display:flex;justify-content:space-between;align-items:center;margin-left:-60px;}
#top .bike .flex img{width:64%;}
#top .bike .flex .txt{width:32%;padding-top:60px;}
#top .bike .threepic{display:flex;justify-content:space-between;align-items:center;margin-top:30px;}
#top .bike .threepic li{width:33.333%;}
#top .reason .bgor ul, #lineup .pcflex{display:flex;justify-content:space-between;}
#top .reason .bgor ul li{width:32%;display:flex;flex-direction: column;}
#top .reason .bgor ul li div{width:100%;}
#lineup .pcflex table{width:49%;border-top:1px solid #333;}
#lineup .product{display:flex;justify-content:space-between;flex-wrap:wrap;}
#lineup .product li{width:48%;}
.jumpbtns li{width:19%;margin-right:1.25%;margin-bottom:15px;}
.jumpbtns li:nth-child(5n){margin-right:0;}
#entry.input .box.option .ta-r span{padding-left:1em;}
#userguide .picwrap{position:relative;}
#userguide .picwrap .pcLside{width:80%;}
#userguide .picwrap img{width:18%;margin-left:2%;position:absolute;top:0;right:0;}
#userguide .steps li.kikan:last-child .picwrap img{top: -50px;}
}

@media screen and (min-width:769px){
.min{display:none;}
footer .subnav{display:flex;align-items:center;justify-content:center;}
.floating a{-ms-writing-mode: tb-rl;writing-mode: vertical-rl;}
.floating a:hover{background:#ea8603;}
.floating a:hover::before{bottom: 48%;}
.floating a:hover::after{bottom: 52%;}
#top .reason .p-box ul{display:flex;justify-content:space-between;align-items:center;}
#top .reason .p-box ul li{width:43%;}
#top .reason .p-box ul li:first-child{width:41%;}
#top .reason .p-box ul li:first-child::after{
    background: url(../img/threearrow.png)no-repeat center center;
    background-size: cover;
    top: 50%;
    transform: translateY(-50%);
    width: 85px;
    height: 32px;
    right: -28%;
}
#top .news .pcflex{display:flex;align-items:flex-start;justify-content:space-between;}
#top .news .pcflex .btn{margin-top:5px;}
#top .news .sectitle h2{display:inline-block;vertical-align: middle;}
#top .news .sectitle p{display:inline-block;margin:5px 15px 0;;vertical-align: middle;}
#top .access .flex img{width:48%;}
#top .access .flex .txt{width:48%;margin-left:4%;}
#top .access h4 span{padding-left:1em;}
form table th{padding:32px 0 20px;width:25%;}
form table td{padding:20px 0;width:75%;}
#entry .birth_flex, #entry .sex_flex, #entry.confirm .twobtns, #mypage .change .mail_flex, .newslist li a{display:flex;}
#entry .sex_flex label{margin-right:25px;width:200px;}
.confirm form table th, .confirm form table td, #mypage form table th, #mypage form table td{vertical-align:middle;padding:20px 0;}
#entry.settlement .total p{display:inline-block;margin-left:30px;vertical-align:top;}
#mypage .container{display:flex;max-width:1600px;}
#mypage aside{box-shadow:8px 0px 17px -14px #b5b5b5;width:28%;}
#mypage section{width:72%;}
#mypage .dm ul li a{display:flex;align-items:center;}
#mypage .state .flex{display:flex;align-items:flex-start;margin-top:50px;}
#mypage .state .flex img{width:25%;border:1px solid #808080;}
#mypage .state .flex .txt{width:71%;margin-left:4%;}
#mypage .state .flex .btns{display:flex;justify-content:space-between;margin-top:30px;}
#mypage .state .flex .btns .btn{width:48%;font-size: 2rem;}
#mypage .change .mail_flex .btn{margin-left:30px;}
.newslist li a .date{width:15%;}
.newslist li a .title{width:85%;}
.newslist li a::after{
  content:"";
  position: absolute;
  width: 100%;
  height: 2px;
  border-radius: 4px;
  background-color: #333;
  bottom: 5px;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .2s ease-in-out;
}
.newslist li a:hover::after{transform-origin: left;transform: scaleX(1);}
#news.detail .pic.one{width:60%;margin:0 auto 40px;}
#news.detail .pic.multiple{display:flex;flex-wrap:wrap;}
#news.detail .pic.multiple img{width:48%;margin-bottom:40px;}
#news.detail .pic.multiple img:nth-of-type(2n){margin-left:4%;}
.twobtns{display:flex;justify-content:space-between;}
.twobtns li, .pagebtm_link ul li{width:48%;}
.pagebtm_link ul{display:flex;justify-content:space-between;align-itams:center;}
#kiyaku.legal table th{width:25%;padding:15px 20px;border-bottom:1px solid #333;border-right:1px solid #333;vertical-align:middle;}
#kiyaku.legal table td{width:75%;padding:15px 20px;border-bottom:1px solid #333;vertical-align:middle;}
}

@media screen and (max-width: 1600px) {
#top .mainV .btn{width:26.25vw;padding:1vw;}
#top .bike .threepic li p span{font-size:2.4rem;}
.pagebtm_link{background-size:cover;}
/* 240109 */
header .nav-list li {margin-right: 20px;}
header .nav-list li:last-child{margin-left:20px;}
}

@media screen and (max-width: 1307px) {
header .nav-list li {margin-right: 15px;}
header .nav-list li:last-child{margin-left:15px;}
.newslist li a .title::before{left: 1%;}
.newslist li a .title{width:82%;}
.newslist li a .date{width:18%;}
#top .plan .price li:last-child span{right: -2em;}
#top .plan .price li:last-child span::before{margin-left:11px;}
}

@media screen and (max-width: 1230px) {
header .logo img {max-width: 16.5vw;}
header .nav-list li a{font-size:1.3rem;line-height: 2.4em;}
/* 240109 */
header .nav-list li img{width:80%;margin-bottom: 5px;}
header .nav-list li{margin-right:10px;}
footer nav ul li a{font-size:1.6rem;}
#top .service .img-side .txt{width:58%;}
}

@media screen and (max-width: 1201px) {
#top .service .container{width:100%;}
#top .bike .threepic li p span{font-size:2.2rem;}
#top .reason .bgor ul li div{padding:20px 20px 30px;}
.newslist li a .title::before{left: 1.5%;}
}


@media screen and (max-width: 1161px) {
header .nav-list li{margin-right:10px;}
footer nav ul li:first-child{margin-left:0;}
#top .service .img-side .txt{width:60%;}
.newslist li a .title::before{left: 2%;}
.jumpbtns li a{font-size:1.6rem;}
}
@media screen and (max-width: 1113px) {
header .nav-list li a, footer nav ul li a, footer .subnav ul li a{font-size:1.1rem;}
/* 240109 */
header .nav-list li img{width:80%;margin-bottom: 3px;}
footer nav .logo img{max-width:8vw;}
h2{font-size:3rem;}
h4{font-size:2.3rem;}
h5{font-size:2rem;}
h6{font-size:1.8rem;}
.btn{font-size:2rem;}
#top .mainV .btn{width:29vw;font-size: 2.2rem;bottom: 9%;padding: 5px 5px 8px;}
#top .mainV .btn span::before, #top .mainV .btn span::after{width:12px;height:12px;margin-top:-5px;}
#top .service .midashi{max-width: 46vw;left: 2vw;}
#top .service .img-side .txt{top:5vw;}
#top .plan h4{font-size:2.2rem;}
#top .plan .price li{font-size:2.2rem;}
#top .bike .threepic li p span{font-size:1.8rem;}
#top .reason .p-box h4{line-height:1.5em;}
#top .reason .p-box{padding: 45px 35px 30px;}
#top .reason .p-box ul li:first-child::after{right: -32%;}
#top .reason .p-box ul li h5::before{top:12px;}
.newslist li a .title::before{left: 1.5%;}
.newslist li a .title{width:80%;}
.newslist li a .date{width:20%;}
.jumpbtns li, .jumpbtns li:nth-child(5n){width:32%;margin-right:2%;margin-bottom:15px;}
.jumpbtns li:nth-child(3n){margin-right:0;}
.wh_wrapper{padding: 50px 80px 80px;}
#kiyaku h2{font-size:3.2rem;}
}

/*tablet==============================================*/
@media screen and (min-width:929px) and (max-width:1065px) {
header .logo{background:url(../img/footer_logo.png)no-repeat center center;width: 6vw;height: 6vw;background-size: cover;}
header .logo img{display:none;}
header .nav-list li{margin-right:10px;}
#top .mainV .btn{width:30.5vw;}
#top .plan .price li div{width:52%;padding:30px 20px;font-size:2rem;}
#top .plan .price li:first-child p {width: 44%;}
#top .reason .bgor ul li:nth-child(2) h6 br{display:none;}
#top .bike .flex img{width:62%;}
#top .bike .flex .txt{width:35%;}
.newslist li a .title::before{left: 2%;}
.newslist li a .title{width:78%;}
.newslist li a .date{width:22%;}
#lineup .product li .txt .price{font-size:3.2rem;}
#lineup .product li .txt .price span{font-size:2rem;}
#lineup .product li .txt .att{font-size:1.6rem;}
#lineup .product li .txt .att br{display:none;}
} 

/*�X�}�z==========================================*/
@media screen and (max-width: 928px) {
.sp{display:block;}
.pc{display:none;}

body{font-size:1.6rem;}
.container{width:94%;}

header .logo img{max-width:195px;}
header .btns{position:absolute;right:65px;top:0;}
header .btns a.btn_login{display:block;}
header .btns a img{max-width:60px;}
header .nav-wrapper {
    visibility: hidden;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    opacity: 0;
    transition: opacity .5s;
    z-index: 99;
}
header .nav-wrapper.fade {opacity: 1;visibility: visible;}
header .burger-btn {
    height: 34px;
    position: relative;
    width: 34px;
    z-index: 100;
    background-color: transparent;
    border: none;
    margin-right:15px;
}
header .bar {
    background: #333;
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    transform: translateX(-50%);
    width:100%;
}
header .bar_top {top: 5px;}
header .bar_mid {top: 50%;transform: translate(-50%,-50%);}
header .bar_bottom {bottom: 5px;}
header .burger-btn.close .bar{background:#fff;}
header .burger-btn.close .bar_top {transform: translate(-50%,10px) rotate(45deg);transition: transform .3s;}
header .burger-btn.close .bar_mid {opacity: 0;transition: opacity .3s;}
header .burger-btn.close .bar_bottom {transform: translate(-50%,-12px) rotate(-45deg);transition: transform .3s;}
header .header-nav {
    background: #f09200;
    height: 100%;
    width: 100%;
    z-index: 97;
}
header .nav-list {display: block;left: 50%;position: absolute;top: 50%;transform: translate(-50%,-50%);}
header .nav-list li {margin: 0 0 3vw!important;text-align:center;color: #fff;opacity:0;}
header .nav-wrapper.fade .nav-list li{opacity:1;}
header .nav-list li a {font-size: 1.6rem;display:block;padding:2vw;}
footer nav{text-align:center;}
footer nav ul{justify-content:space-between;margin-top:20px;}
footer nav ul li{width:25%;padding:0;margin:3vw 0 0;}
footer nav ul li:nth-child(5){border:0;}
.floating{width:50px;}
.floating a{font-size: 2rem;padding: 20px 15px 50px;}
h2{font-size:2.8rem;}
.pagetitle h1{font-size:6.2rem;}
main .container {padding-bottom: 9vw;}
#top section{padding:12vw 0;}
#top .mainV .btn {width: 80%;font-size: 2.2rem;bottom: 9%;padding: 12px 15px 15px;left: 50%;transform: translateX(-50%);}
#top .mainV .scroll {left:20px;right:auto;}
#top .testdrive{border: 12px solid rgba(41,171,226,.2);}
#top .service {padding-bottom:6vw;}
#top .service .midashi {max-width: 60vw;left: 2vw;top: -22vw;}
#top .service .img-side {text-align: right;display: flex;flex-direction: column-reverse;}
#top .service .img-side .txt {width: 94%;margin-top: -6vw;margin-left: 6vw;padding:6vw 4vw 8vw;}
#top .service .img-side .pic{width:90%;}
#top .sectitle h2, #top .flow .sectitle h2{font-size: 7rem;}
#top .sectitle{margin-bottom:7vw;}
#top .plan, #top .flow, #top .reason .bgor {padding:12vw 0 18vw;}
#top .plan h4 {font-size: 2rem;}
#top .plan .ta-r {margin: 5vw 0 10vw;}
#news.detail .pic img{display:block;margin-bottom:6vw;}
#top .plan .years li{font-size: 2.2rem;}
#top .plan .years li p{line-height:1.2em;}
#top .plan ul li:first-child {width: 40%;}
#top .plan ul li{width:28%;}
#top .plan .price li{flex-direction: column;}
#top .plan .price li div{width:100%;padding:10px;margin:0 0 10px;}
#top .plan .price li:first-child p{width:100%;}
#top .plan .young{text-align:center;}
#top .plan .young h2::before{left:-110px;}
#top .plan .young h2{display:inline-block;padding: 15px 35px;}
#top .plan .young h2 span{font-size: 3.4rem;display:block;padding:0 0 2vw;line-height: 1.1em;}
#top .flow img{max-width:735px;margin:auto;width:55%;}
#top .bike .flex{margin:-12% -10% 8vw;}
#top .bike .flex .txt{padding:0 10%;}
#top .bike .flex .txt dl{font-size:1.8rem;}
#top .bike .flex .txt .btn{margin:5vw auto 0;}
#top .bike .threepic li p span{font-size:2.5rem;}
#top .reason .bgor ul li{margin-bottom:7vw;}
#top .reason .bgor ul li:last-child{margin:0;}
#top .reason .bgor ul li div{padding:5vw 6vw 6vw;}
.newslist li a .date{font-size:2.6rem;width:25%;}
.newslist li a .date span, #news.detail .date span{font-size:1.6rem;}
.newslist li a .title{width:75%;padding-left: 5vw;}
.newslist li a .title::before{left:1vw;}
#lineup .pcflex table:first-of-type{border-top:1px solid #333;}
#lineup .product li{margin-bottom:10vw;}
#lineup .product li .txt .price{font-size:2.8rem;}
#lineup .product li .txt .price span{font-size:1.8rem;}
.pagebtm_link{padding:18vw 0;}
.pagebtm_link ul{width:94%;}
.pagebtm_link ul li:first-child{margin-bottom:6vw;}
.pagebtm_link ul li a p{font-size:2.2rem;margin-right:20px;line-height: 2.2em;}
#entry.input .box.option .ta-r span{display:block;}
#userguide .picwrap img{max-width:352px;margin:4vw auto 0;display:block;width:30%;}
}

@media screen and (max-width: 768px) {
.min{display:block;}
.container{width:92%;}
footer{text-align:center;}
footer nav .logo img{max-width:72px;}
footer .subnav{margin:8vw 0 9vw;}
footer .subnav .snslink a{padding:8px;margin-right:20px;}
footer .subnav .snslink a.btn_ig{margin:0;}
footer .subnav ul{justify-content:center;}
footer .subnav ul li{margin:2.5vw 10px 0;}
footer .subnav ul li a{font-size:1.4rem;}
footer .copyright{padding:10px;font-size:1.2rem;}
.twobtns li:first-child{margin-bottom:4vw;}
#top .mainV .scroll {left:20px;right:auto;}
#top .testdrive{margin: 6vw auto 12vw;padding:4vw;}
#top .testdrive .btn{width:100%;}
#top .plan h4{padding-left:30px;font-size:1.7rem;}
#top .plan h4::before{width:20px;height:20px;top:2px;}
#top .plan h4::after{height: 20px;left: 7px;top: -2px;width: 9px;}
#top .plan .price li{font-size:2rem;}
#top .flow img{width:80%;}
#top .reason .p-box ul li:first-child{margin-bottom:8vw;}
#top .reason .p-box ul li:first-child::after{
	content: "";
    border-color: transparent transparent transparent #ccc;
    position: absolute;
    border-width: 22px 0 22px 24px;
    right: 50%;
    margin-top: 0;
    transform: rotate(90deg);
    bottom: -9vw;
    margin-right: -12px;
}
#top .news .box{padding:5vw;}
.pagetitle{padding:5vw;}
.pagetitle h1{font-size:5.4rem;}
.pagetitle p{font-size:1.6rem;margin-top:3vw;}
.newslist li{margin-bottom:6vw;}
.newslist li:last-child{margin:0;}
.newslist li a .date{width:100%;}
.newslist li a .title{padding-left:30px;margin-top:1.5vw;width:100%;}
.newslist li a .title::before{display:none;}
#top .news .btn{margin:50px auto 0;}
#top .access .flex{flex-direction: column-reverse;margin:5vw 0 8vw;}
#top .access h4 span{display:block;}
#top .access .flex img{display:block;margin:4vw auto 0;}
.gmap{padding-top: 66.25%;}
#news .container, #lineup .container{padding:10vw 0 12vw;}
#news.detail .title{padding:5vw 0;margin: 5vw 0 2vw;}
#news.detail .wh_wrapper{padding:5vw 4vw;}
#news.detail .title h3{font-size:2.2rem;}
#lineup h2.line{padding:0 3vw 4vw;margin-bottom: 6vw;}
#lineup .product li .txt .price span{padding:0;display:block;margin-top:3vw;}
#lineup .product li .txt .att{text-align:left;}
#lineup .product li .txt .att br{display:none;}
#lineup .spec .pcflex{margin:5vw 0 4vw;}
.pagebtm_link ul li a p{font-size: 2rem;margin-right: 3vw;line-height: 2.5em;}
.bggray{padding-bottom:7vw;}
.jumpbtns{margin-top:6vw;}
.jumpbtns li, .jumpbtns li:nth-child(5n){width:48%;margin-right:4%!important;}
.jumpbtns li:nth-child(2n){margin-right:0!important;}
#userguide h2{margin:18vw 0 14vw;}
#userguide .wh_wrapper{padding:6vw 4vw 7vw;}
#userguide h4.border{margin:8vw 0 5vw;}
#userguide .wh_wrapper .att{padding:4vw;margin-top:6vw;}
#userguide .steps li .number{width:46px;height:46px;font-size:2.4rem;}
#userguide .steps li .number span{font-size:1.2rem;}
#userguide .steps li::before{left:23px;}
#userguide .steps li .text{width: calc(100% - 56px);margin: 8px 0 0 10px;}
#userguide .steps li .text h5{margin-bottom:2vw;}
#userguide .steps li.kikan::after{left:-10px;}
#userguide h6{margin:8vw 0 4vw;}
#faq .ac-box{padding:4vw 0;}
#faq .ac-box h4{width:32px;height:32px;line-height:32px;margin-right:8px;}
#faq .ac-box .ac-q::before, #faq .ac-box .ac-q::after{right:5px;}
#faq .ac-box .ac-q h6 {width: calc(100% - 40px);margin: 5px 20px 0 0;font-size:1.5rem;}
#faq .ac-box .ac-open .text p{width: calc(100% - 40px);margin-top: 4px;}
#faq h3{padding: 5vw 0;margin-top: 10vw;}
#entry.settlement h5{margin: 8vw 0 4vw;}
#entry.settlement .total{padding:5vw;}
#entry.settlement .total p{font-size:2.6rem;margin-top:2vw;}
#entry .flow{margin-bottom:7vw;}
#entry .flow li{line-height:1.3em;font-size:1.4rem;}
#entry table, #entry tbody, #entry th, #entry td, #entry tr, #members table, #members tbody, #members th, #members td, #members tr,
#mypage table, #mypage tbody, #mypage th, #mypage td, #mypage tr,
#kiyaku table, #kiyaku tbody, #kiyaku th, #kiyaku td, #kiyaku tr {display:block;}
table th{margin-bottom:2vw;}
table td{padding-bottom:6vw;}
.wh_wrapper{padding:6vw 4vw 8vw;}
#members .container, #entry .container{padding:8vw 0 16vw;}
#members h2::after{bottom:-25px;}
#members h2{margin-bottom:16vw;}
#members .box, #entry .box{padding:6vw 4vw 7vw;margin-top:5vw;}
#members .box label, #entry .box label{font-size:1.8rem;}
#members .btn, #entry .btn{margin:6vw auto 0;}
#members.login table tr:last-child td{padding-bottom:0;}
#mypage aside{padding:8vw 0;margin:0 -5%;box-shadow: 0 9px 6px -6px rgba(0,0,0,0.2);}
#mypage aside img{max-width:20vw;margin:4vw auto;}
#mypage aside ul{display:flex;flex-wrap:wrap;}
#mypage aside ul li{width:calc(100% / 3);}
#mypage aside ul li a{font-size:1.6rem;padding:3vw 2vw;}
#mypage section{padding:8vw 0 14vw;}
#entry table td .btn, #mypage table td .btn, #mypage table td .btn{width:100%;margin-top:3vw;}
#mypage .btn.line {margin: 8vw auto 0;}
#mypage .dm ul li a{padding:3vw;display:block;}
#mypage .dm ul li a .date{margin:0 0 2vw;display:block;padding-left:14vw;}
#mypage .dm ul li a .date::before{width: 10.229vw;height: 9.524vw;}
#mypage .midashi{margin-bottom:6vw;}
#mypage .state{padding-bottom:0;}
#mypage .state .now{padding:8vw 0 12vw;}
#mypage .state .until{padding:10vw 5% 12vw;margin:3vw -5% 0;}
#mypage .state .now .txt .btns .btn{margin:4vw auto 0;}
#mypage .state .flex img{max-width:70%;display:block;margin:0 auto 4vw;border: 1px solid #808080;}
#mypage .state .until .flex{margin-top:6vw;}
#entry .birth_flex li:last-child{margin-top:4vw;}
#entry .sex_flex label{margin-bottom:4vw;}
#entry .sex_flex label:last-of-type{margin:0;}
#entry.input .box ul.links{padding-top:6vw;margin-top:6vw;}
#entry .zip_flex .btn{margin-top:0;}
#top .bike .threepic li p span{font-size:2rem;}
#kiyaku .container{padding-top:10vw;}
#kiyaku h2{font-size:2.6rem;margin:14vw 0 8vw;padding-bottom:3vw;}
#kiyaku table th{padding-top:3vw;}
#kiyaku table td{padding-bottom:3vw;border-bottom:1px solid #333;}
#kiyaku h5{margin:6vw 0 2vw;}
#kiyaku h4{margin: 12vw 0 4vw;}
}

@media screen and (min-width: 577px) {
.ss{display:none;}
}

@media screen and (max-width: 576px) {

.ss{display:block;}
body{font-size:1.5rem;}
footer nav ul li{width:50%;line-height:1.3em;border-left:none;}
footer nav ul li:nth-child(2n){border-left:1px solid #fff;}
footer .subnav ul{display:block;}
.totopfade{width:50px;height:50px;}
.floating{width:80%;left:3%;bottom:15px;right:auto;top:auto;}
.floating a{font-size:1.8rem;text-align:center;padding:13px;border:1px solid #333;line-height: 1.2em;}
.floating a::before, .floating a::after{transform: rotate(45deg);right: 6%;margin: 0 0 -6px;bottom:50%;}
.floating a::after{right:9.5%;}
h2{font-size:2.6rem;}
h3{font-size:2.4rem;}
h4{font-size:2rem;}
h5, .btn{font-size:1.8rem;}
h6{font-size:1.6rem;}
#top .sectitle h2 {font-size: 6rem;}
#top .plan h4{font-size:1.6rem;}
#top .plan .ta-r{text-align:left;}
#top .plan .price li, #top .plan .years li{font-size:1.7rem;}
#top .plan .years li p{line-height:1.45em;}
#top .plan .price li{padding:10px;}
#top .plan .price li span{font-size:1.4rem;-ms-writing-mode: tb-rl;writing-mode: vertical-rl;right: -1.3em;line-height: 2em;padding:8px 0 10px;width: 2em;}
#top .plan .price li:last-child span{right: -1em;}
#top .plan .price li span::before, #top .plan .price li:last-child span::before{margin-left: -4px;top: -5px;border-width: 8px 0 8px 8px;}
#top .plan .price li p sub{display:block;line-height:1.6em;}
#top .plan .young h2::before{left:-8.5vw;width:24.57vw;height:24.14vw;}
#top .plan .young h2{padding:15px;}
#top .plan .young h2 span{font-size:3rem;}
#top .plan .young h5{text-align:left;margin-bottom: 6vw;}
#top .plan .young h5 br{display:none;}
#top .flow img{width:100%;}
#top .reason .p-box {padding: 0 5vw 6vw;margin-top: 9vw;}
#top .reason .p-box h4 {margin: 0 -5vw;margin-bottom:4vw;position:static;text-align:center;}
#top .reason .p-box h4::after{display:none;}
#top .reason .p-box ul li:first-child{margin-bottom:9vw;}
#top .reason .p-box ul li:first-child::after{bottom:-10.5vw;}
#top .reason .p-box ul li h5::before{top:11px;}
.jumpbtns li a{font-size:1.4rem;padding:2vw 2vw 6vw}
#members .box label, #entry .box label{font-size:1.6rem;}
#members.fin h6{margin:14vw 0;}
#members.login h6{margin-top:10vw;}
#mypage aside h2{display:inline-block;vertical-align:middle;margin: 0 14vw;}
#mypage aside img{display:inline-block;vertical-align:middle;margin:0;}
#mypage aside h3{margin-top:3vw;}
#mypage aside ul li a{font-size:1.5rem;}
.btn{width:100%;}
#userguide .steps li{padding-bottom:10vw;}
#userguide .picwrap img{width:50%;}

}

@media screen and (max-width: 375px) {
#mypage aside ul li a{font-size:1.4rem;}
.pagetitle h1{font-size:5.2rem;}
}


@media screen and (max-width: 360px) {
#mypage aside ul li a{font-size:1.3rem;}
.pagetitle h1{font-size:4.9rem;}
}


/* 202309 / 202402追加修正あり ---------------------------------------------------------- */
#top .plan {background: #ededed; }
#top .plan .price li  {background: #fff;}
#top .plan .price li div {border: 1px solid #29abe2;}
#top .plan .plan__title {margin-bottom: 15px;}

#top .lineup .container { padding: 0;}
#top .lineup {padding-bottom: 100px;}
#top .lineup__read {text-align: center; margin-bottom: min(5vw , 60px); font-size: min(2vw , 2.4rem); line-height: 1.6;}
#top .lineup__flex {display: flex; display:-webkit-flex; justify-content: space-between; flex-wrap: wrap;}
#top .lineup__cont {width: 31%; text-align: center; margin-top: min(5vw, 60px) ;}
#top .lineup__cont:first-child, #top .lineup__cont:nth-child(2), #top .lineup__cont:nth-child(3) {margin-top: 0;}
#top .lineup__cont h4 {font-weight: bold; position: relative; color: #003068; margin-bottom: min( 2vw , 2.4rem); font-size: min(2.92vw , 3.5rem); }
#top .lineup__cont h4  span {position: relative; z-index: 1; background: #fff; padding: 0 20px;}
#top .lineup__cont h4::before {content: ""; width: 100%; height: 3px; background: #003068; position: absolute; left: 0; top: 50%; transform: translateY(-50%);}
#top .lineup__sub {display: flex; display: -webkit-flex; justify-content: space-between; margin: min( 1.66vw, 2rem) auto min(5vw , 60px);}
#top .lineup__sub li {width: 32%;}
#top .lineup__btn {margin:  min(2.5vw , 30px) auto 0; }
#top .lineup__btn a {margin: 0 auto;}


@media screen and (min-width: 1200px) {
#top .reason .p-box {padding:  45px 30px 30px;}
}

@media screen and (max-width: 928px) {
#top .plan {padding-bottom: 12vw; }
#top .lineup {padding-bottom: 15vw;}
#top .lineup__read { font-size: min(4vw , 2.4rem);  margin-bottom: min(8vw , 60px);}
#top .lineup__cont {width: 100%; margin-bottom: min(12vw , 60px);}
#top .lineup__cont:last-child {margin: 0 auto !important;}
#top .lineup__cont h4 {margin-bottom: min( 4vw , 3rem); font-size: min(6vw , 4rem); }
#top .lineup__sub {margin: min( 1.66vw, 2rem) auto min(6vw , 60px);}
#top .lineup__btn {margin:  min(6vw , 60px) auto 0; }
#top .lineup__btn a {width: 80%;}
}

/* 202402追加 */
#top .lineup__cont {display: flex; display: -webkit-flex; flex-direction: column;}
#top .lineup__cont .lineup_read {text-align:left; flex-grow: 1; margin-bottom: min(2.5vw, 30px);}
@media screen and (max-width: 928px) {
 #top .lineup__cont {display: block;}
}


/* lineup */
#lineup .lineup__item {margin-top: min(12.5vw, 150px);}
#lineup .lineup__item:first-child {margin-top: 0;}
#lineup .lineup__item .lineup__item__title {font-size: min(3.3vw , 4rem); line-height: 1.4; color: #f09200; border-top: 3px solid #f09200; border-bottom: 2px dotted #aaa;  padding: min(1.66vw, 20px) 0; margin-bottom: min(4vw, 50px);}
#lineup .lineup__item .lineup__read {text-align: center; font-weight: 500; margin-bottom: min(4vw, 50px);font-size: 2.5rem; }

#lineup .prd__flex {display: flex; display: -webkit-flex; justify-content: space-between; flex-wrap: wrap;}
#lineup .prd__flex .prd__img {width: 56%;}
#lineup .prd__flex .prd__data {width: 40%;}
#lineup .prd__thum  {margin-top: min(0.83vw, 10px);}
#lineup .prd__thum .slick-slide {position: relative; margin: 5px;}
#lineup .prd__thum .slick-slide::before {content: ""; width: 100%; height: 100%; position: absolute; left: 0; top:0; background: rgba(0,0,0,0.2); z-index: 1;}
#lineup .prd__thum .slick-slide.slick-current::before{content: none!important;}

#lineup .prd__data .prd__data__tbl {width: 100%; }
#lineup .prd__data .prd__data__tbl tr {border-bottom: 2px solid #fff;}
#lineup .prd__data .prd__data__tbl th {background: #666; color: #fff; padding: min(1.28vw , 17px) min(1.25vw , 17px);}
#lineup .prd__data .prd__data__tbl td {background: #f3f3f3; padding: min(1.28vw , 17px) min(1.25vw , 16px);}
#lineup .prd__data .prd__data__tbl td ul li {position: relative; padding-left: 5.5em;}
#lineup .prd__data .prd__data__tbl td ul li span {position: absolute; left: 0;}
#lineup .prd__data .prd__data__tbl td .prd__data__btn {margin: min(15px) auto; background: #003068; color: #fff; text-align: center; padding:  min(8px); cursor: pointer; transition: 0.3s all ease;}

body.fixed {position: fixed;	left: 0; width: 100%;}
.modal-content {display: none;position: fixed;	left: 0;	top: 0;	width: 100%;	height: 100vh;	z-index: 1000;	transition: 0.2s all ease-in-out;}
.is-show {display: block !important;	transition: 0.2s all ease-in-out;}
.overlay {	width: 100%;	height: 100vh;	background-color: rgba(0, 0, 0, 0.6);	z-index: 900; cursor: pointer; }
.modal {position: fixed;	background-color: #fff;	top: 50%;	left: 50%;	transform: translate(-50%, -50%);	width: min(90% , 1200px);	height: auto; max-height: 90vh; overflow: auto; 	display: none;	padding: min(5vw, 60px);	z-index: 2000; }
#lineup .spec h3 {margin-top: 0;}

.read__hosoku { background:#ededed; position: relative; padding: min(4.4vw, 50px); margin-top: min(4.4vw, 50px);}
.read__hosoku p:not(:last-child) {margin-bottom: 20px;}
.read__hosoku h3 {position: absolute; left: 20px; top: 0; transform: translate(0,-50%); color:#f09200; font-weight: 600;}
.read__hosoku .att{color:#ea8603;}

.color__variation { margin-top: min(6.6vw, 80px);}
.color__variation h3 {font-size: 3.5rem;line-height: 1.4em;font-weight: bold; letter-spacing: 0.3rem; text-align: center; color:#f09200;}
.color__variation h3 span {position: relative; display: inline-block;}
.color__variation h3 span::before, .color__variation h3 span::after{content: "";position: absolute; top: 50%; width: 40px; height: 3px;background: #f09200;}
.color__variation h3 span::before {left: -45px; transform: rotate(56deg);}
.color__variation h3 span::after{right: -45px; transform: rotate(-56deg);}
.color__variation .product {margin-top: min(5vw, 60px);}
.color__variation .product li{margin-bottom: 90px; text-align: center; position: relative;}
.color__variation .product li h4 {text-align: center; margin-bottom:20px; position: relative;}
.color__variation .product li h4::before {content: ""; width: 100%; height: 2px; background: #333; position: absolute; left: 0; top:50%; transform: translateY(-50%);}
.color__variation .product li h4 span {position: relative; background: #fff;color: #333; height: 50px; line-height:50px;display: inline-block;  padding: 0 20px; font-weight: 600;}

.color__variation .product li:nth-last-of-type(-n + 2) {margin-bottom: 0;}
.color__variation .product li button {margin: 30px auto 0;}


@media screen and (max-width: 928px) {
#lineup .lineup__item {margin-top: min(12vw, 120px);}
#lineup .lineup__item .lineup__item__title {font-size: min(6vw , 4rem); padding: min(4vw, 20px) 0; margin-bottom: min(5vw, 60px);}
#lineup .lineup__item .lineup__read {text-align: left; margin-bottom: min(6vw, 50px);font-size: 2rem; }
#lineup .prd__flex .prd__img, #lineup .prd__flex .prd__data {width: 100%;}
#lineup .prd__flex .prd__data{margin-top: min( 6vw, 30px);}
#lineup .prd__thum  {margin-top: min(1vw, 5px);}
#lineup .prd__thum .slick-slide { margin: min(1vw, 5px);}
#lineup .prd__data .prd__data__tbl th {width: 25%;}
#lineup .prd__data .prd__data__tbl th, #lineup .prd__data .prd__data__tbl td {padding: min(2vw , 10px) min(3vw , 15px);}
#lineup .prd__data .prd__data__tbl td .prd__data__btn {margin: min(2vw,15px) auto;  padding:  min(2vw , 8px); }

.read__hosoku { padding: min(7vw, 35px)  min(5vw, 25px) min(5vw, 25px); margin-top: min(6vw, 50px);}
.read__hosoku h3 {left: min(5vw, 25px); top: 0; transform: translate(0,-50%); color:#f09200; font-weight: 600;}

.color__variation { margin-top: min(10vw, 80px);}
.color__variation h3 {font-size: 2.4rem;}
.color__variation h3 span::before, .color__variation h3 span::after{width: 30px; }
.color__variation .product {margin-top: min(8vw, 60px);}
.color__variation .product li h4 span {height: 40px; line-height:40px; padding: 0 20px}
.color__variation .product li h4 span::before {border-bottom: solid 40px transparent; }
.color__variation .product li h4 span::after {border-top: solid 40px transparent;}
.color__variation .product li button {margin: 30px auto 0;}

}