@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Noto+Serif+JP:wght@200;300;400;500;600;700;900&display=swap');

/* CSS Document */
*{ margin:0; padding:0; box-sizing:border-box; word-break:break-all;}
div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;}
ul,ol{ list-style:none;}
html,body {
margin:0 auto;
padding:0;
font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ","ＭＳ Ｐゴシック",sans-serif;
font-size:20px;
font-weight:500;
font-size-adjust: 100%;
text-size-adjust: 100%;
text-align:left;
color:#000;
min-width:750px;
}
@media screen and (max-width:750px){
html,body{ font-size:calc((20/750)*100vw); min-width:240px; max-width:750px;}
}

/*img*/
img{ border-style:none; vertical-align:bottom; padding:0; line-height:0em; max-width:100%; height:auto;}
video{ vertical-align: bottom; padding: 0; line-height: 0; max-width: 100%;}
figure{margin:0 auto; text-align:center;}

/*txt*/
p{ line-height:1.75em; margin:0 0 1em; padding:0;}
p:last-child{ margin:0;}
strong{ font-weight:bold;}
.bold { font-weight:bold;}
.normal{ font-weight:normal;}
.under_line{ text-decoration:underline;}
.line_through{ text-decoration:line-through;}

.white{ color:#fff;}

.left{ text-align:left;}
.right{ text-align:right;}
.center{ text-align:center;}

/*link*/
a{ color:inherit; text-decoration:none;}
a:hover{}
.opa{ transition: opacity 0.3s;}
.opa:hover{ opacity: 0.7;}



/*ヘッダー*/
header{}
@media screen and (max-width:750px){
}

/*フッター*/
footer{ padding: 30px;}
footer p{ text-align: center; font-size: 0.8rem; letter-spacing: 0.05em; font-weight: 400;}
@media screen and (max-width:750px){
footer{ padding: calc((30/750)*100vw);}
}

/*fixed_btn*/
#fixed_btn{ width: 690px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999; margin: auto; padding: 10px 20px;}
#fixed_btn a{ display: flex; align-items: center; justify-content: center; transition: 0.3s;}
#fixed_btn a:hover{ opacity: 0.7;}
@media screen and (max-width:750px){
#fixed_btn{ width: calc((690/750)*100vw); padding: calc((10/750)*100vw) calc((20/750)*100vw);}
}



/*メイン*/
#wrapper{ width: 750px; margin: auto;}
#content{ overflow:hidden;}
section{ width:100%; margin:0 auto;}
.maincontent{ padding:0; margin:0 auto; width:650px;}
@media screen and (max-width:750px){
#wrapper{ width: 100%; margin: auto;}
.maincontent{ padding:0; margin:0 auto; width:calc((650/750)*100vw);}
}

/*tit*/
h1,h2,h3,h4,h5,h6{ line-height: 1.25em; font-weight: 500;}



/*news*/
.news{ margin: 70px auto 100px;}
.news figure.btn a{ display: flex; align-items: center; justify-content: center; width: 100%; transition: 0.3s;}
.news figure.btn a:hover{ opacity: 0.7;}
@media screen and (max-width:750px){
.news{ margin: calc((70/750)*100vw) auto calc((100/750)*100vw);}
}



/*nav*/
#nav{ margin: 100px auto;}
#nav h2{ margin-bottom: 50px;}
#nav ul{ display: flex; flex-wrap: wrap; gap: 40px 16px;}
#nav ul li{ width: calc(50% - 8px);}
#nav ul li figure.img{ margin-bottom: 20px;}
#nav ul li figure.img a{ transition: 0.3s;}
#nav ul li figure.img a:hover{ opacity: 0.7;}
#nav ul li figure.btn{ margin-top: 16px;}
@media screen and (max-width:750px){
#nav{ margin: calc((100/750)*100vw) auto;}
#nav h2{ margin-bottom: calc((50/750)*100vw);}
#nav ul{ gap: calc((40/750)*100vw) calc((16/750)*100vw);}
#nav ul li{ width: calc(50% - ((8/750)*10));}
#nav ul li figure.img{ margin-bottom: calc((20/750)*100vw);}
#nav ul li figure.btn{ margin-top: calc((16/750)*100vw);}
}



/*subsidy*/
#subsidy{ margin: 100px auto;}
#subsidy h2{ margin-bottom: 50px;}
#subsidy figure.zu{ margin-bottom: 50px;}

#subsidy .att p{ font-size: 0.9rem;}

#subsidy .toggle_area{ margin-top: 60px; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 32px 0;}
#subsidy .toggle_area figure.toggle_btn{ display: flex; align-items: center; justify-content: center; font-size: 1.3rem; letter-spacing: 0.06em; cursor: pointer; position: relative;}
#subsidy .toggle_area figure.toggle_btn strong{ line-height: 0;}
#subsidy .toggle_area figure.toggle_btn strong img{ height: 24px;}
#subsidy .toggle_area figure.toggle_btn span{ line-height: 0; position: absolute; right: 120px; top: 50%; transform: translateY(-50%);}
#subsidy .toggle_area figure.toggle_btn span img{ transition: 0.3s;}
#subsidy .toggle_area figure.toggle_btn.active span img{ transform: rotateX(180deg);}
#subsidy .toggle_area ol{ display: none; margin-top: 32px;}
#subsidy .toggle_area ol li{ font-size: 0.8rem; font-weight: 400; margin-bottom: 1em;}
@media screen and (max-width:750px){
#subsidy{ margin: calc((100/750)*100vw) auto;}
#subsidy h2{ margin-bottom: calc((50/750)*100vw);}
#subsidy figure.zu{ margin-bottom: calc((50/750)*100vw);}

#subsidy .toggle_area{ margin-top: calc((60/750)*100vw); padding: calc((32/750)*100vw) 0;}
#subsidy .toggle_area figure.toggle_btn strong img{ height: calc((24/750)*100vw);}
#subsidy .toggle_area figure.toggle_btn span{ right: calc((120/750)*100vw);}
#subsidy .toggle_area ol{ margin-top: calc((32/750)*100vw);}
}



/*others*/
#others{ margin: 100px auto;}
#others h2{ margin-bottom: 50px;}
#others ul{ display: flex; flex-direction: column; align-items: center; justify-content: center;}
#others ul li{ width: 470px; margin-top: 30px;}
#others ul li:first-child{ margin-top: 0;}
@media screen and (max-width:750px){
#others{ margin: calc((100/750)*100vw) auto;}
#others h2{ margin-bottom: calc((50/750)*100vw);}
#others ul li{ width: calc((470/750)*100vw); margin-top: calc((30/750)*100vw);}
}



/*fuel*/
#fuel{ margin: 100px auto;}
#fuel h2{ background: #F7F8FA; padding: 100px 0 60px;}
#fuel h3{ margin: 80px auto 40px;}
#fuel figure.zu{ margin-bottom: 70px;}

#fuel .att p{ margin: 0;}

#fuel .toggle_area{ margin-top: 60px; border-top: 1px solid #000; border-bottom: 1px solid #000; padding: 32px 0;}
#fuel .toggle_area figure.toggle_btn{ display: flex; align-items: center; justify-content: center; font-size: 1.3rem; letter-spacing: 0.06em; cursor: pointer; position: relative;}
#fuel .toggle_area figure.toggle_btn strong{ line-height: 0;}
#fuel .toggle_area figure.toggle_btn strong img{ height: 24px;}
#fuel .toggle_area figure.toggle_btn span{ line-height: 0; position: absolute; right: 120px; top: 50%; transform: translateY(-50%);}
#fuel .toggle_area figure.toggle_btn span img{ transition: 0.3s;}
#fuel .toggle_area figure.toggle_btn.active span img{ transform: rotateX(180deg);}
#fuel .toggle_area ol{ display: none; margin-top: 32px;}
#fuel .toggle_area ol li{ font-size: 0.8rem; font-weight: 400; margin-bottom: 1em;}
@media screen and (max-width:750px){
#fuel{ margin: calc((100/750)*100vw) auto;}
#fuel h2{ padding: calc((100/750)*100vw) 0 calc((60/750)*100vw);}
#fuel h3{ margin: calc((80/750)*100vw) auto calc((40/750)*100vw);}
#fuel figure.zu{ margin-bottom: calc((70/750)*100vw);}

#fuel .toggle_area{ margin-top: calc((60/750)*100vw); padding: calc((32/750)*100vw) 0;}
#fuel .toggle_area figure.toggle_btn strong img{ height: calc((24/750)*100vw);}
#fuel .toggle_area figure.toggle_btn span{ right: calc((120/750)*100vw);}
#fuel .toggle_area ol{ margin-top: calc((32/750)*100vw);}
}



/*cost*/
#cost{ margin: 100px auto 0; background: url("../images/cost_bg.jpg") center center no-repeat; background-size: cover; padding: 120px 0;}
#cost h2{ margin-bottom: 60px;}
#cost .att{ margin-top: 60px;}
#cost .att p{ margin: 0;}
@media screen and (max-width:750px){
#cost{ margin: calc((100/750)*100vw) auto 0; padding: calc((120/750)*100vw) 0;}
#cost h2{ margin-bottom: calc((60/750)*100vw);}
#cost .att{ margin-top: calc((60/750)*100vw);}
}



/*colors*/
#colors{ margin: 0 auto; padding-top: 100px;}
#colors .maincontent{ padding-bottom: 100px; border-bottom: 1px solid #000;}
#colors h2{ margin-bottom: 70px;}

#colors .colors_img h4{ margin-top: 80px; display: flex; align-items: center; justify-content: center; font-size: 1.0rem;}
#colors .colors_img h4 img{ height: 32px;}
#colors .colors_img{ display: none;}
#colors .colors_img.active{ display: block;}

#colors .colors_switch{ margin-top: 20px; display: flex; align-items: center; justify-content: center;}
#colors .colors_switch span{ width: 30px; cursor: pointer; transition: 0.3s;}
#colors .colors_switch span:hover{ opacity: 0.7;}
#colors .colors_switch ul{ display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 20px;}
#colors .colors_switch ul li{ border: 1px solid #fff; padding: 6px; border-radius: 50%; cursor: pointer;}
#colors .colors_switch ul li.active{ border-color: #D4D4D4;}

#colors .colors_img .bx-wrapper .bx-controls-direction a.bx-prev{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: url("../images/colors/prev.png") center center; background-size: 100%; position: absolute; left: -20px; top: 140px; transform: none;}
#colors .colors_img .bx-wrapper .bx-controls-direction a.bx-next{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: url("../images/colors/next.png") center center; background-size: 100%; position: absolute; right: -20px; top: 140px; transform: none;}
#colors .colors_img .bx-wrapper .bx-controls-direction a{ transition: 0.3s;}
#colors .colors_img .bx-wrapper .bx-controls-direction a:hover{ opacity: 0.7;}
@media screen and (max-width:750px){
#colors{ padding-top: calc((100/750)*100vw);}
#colors .maincontent{ padding-bottom: calc((100/750)*100vw);}
#colors h2{ margin-bottom: calc((70/750)*100vw);}

#colors .colors_img h4{ margin-top: calc((80/750)*100vw);}
#colors .colors_img h4 img{ height: calc((32/750)*100vw);}

#colors .colors_switch{ margin-top: calc((20/750)*100vw);}
#colors .colors_switch span{ width: calc((30/750)*100vw);}
#colors .colors_switch ul{ gap: calc((8/750)*100vw); margin: 0 calc((20/750)*100vw);}
#colors .colors_switch ul li{ padding: calc((6/750)*100vw);}

#colors .colors_img .bx-wrapper .bx-controls-direction a.bx-prev{ width: calc((80/750)*100vw); height: calc((80/750)*100vw); left: calc((-20/750)*100vw); top: calc((140/750)*100vw);}
#colors .colors_img .bx-wrapper .bx-controls-direction a.bx-next{ width: calc((80/750)*100vw); height: calc((80/750)*100vw); right: calc((-20/750)*100vw); top: calc((140/750)*100vw);}
}



/*features*/
#features{ padding-top: 100px;}
#features h2{ margin-bottom: 70px;}
#features .features_slide .bx-wrapper .bx-controls-direction a.bx-prev{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: url("../images/colors/prev.png") center center; background-size: 100%; position: absolute; left: 20px; top: 50%; transform: translateY(-50%);}
#features .features_slide .bx-wrapper .bx-controls-direction a.bx-next{ display: flex; align-items: center; justify-content: center; width: 80px; height: 80px; background: url("../images/colors/next.png") center center; background-size: 100%; position: absolute; right: 20px; top: 50%; transform: translateY(-50%);}
#features .features_slide .bx-wrapper .bx-controls-direction a{ opacity: 0 !important; transition: 0.3s;}
#features .features_slide .bx-wrapper .bx-controls-direction a:hover{ opacity: 0.7;}
#features .features_slide .bx-wrapper .bx-controls-direction a.disabled{ opacity: 0; pointer-events: none;}

#features #features01 .features_slide .bx-wrapper .bx-controls-direction a.bx-prev{ top: calc(50% + 100px); transform: translateY(-50%);}
#features #features01 .features_slide .bx-wrapper .bx-controls-direction a.bx-next{ top: calc(50% + 100px); transform: translateY(-50%);}

#features .features_slide .bx-wrapper .bx-pager, 
#features .features_slide .bx-wrapper .bx-controls-auto{ line-height: 0; bottom: 40px;}
#features .features_slide .bx-wrapper .bx-pager.bx-default-pager a{ background: #7F7F7F; text-indent: -9999px; display: block; width: 64px; height: 4px; margin: 0 10px; outline: 0; border-radius: 0; transition: 0.3s;}
#features .features_slide .bx-wrapper .bx-pager.bx-default-pager a.active{ background: #fff;}
@media screen and (max-width:750px){
#features{ padding-top: calc((100/750)*100vw);}
#features h2{ margin-bottom: calc((70/750)*100vw);}
#features .features_slide .bx-wrapper .bx-controls-direction a.bx-prev{ width: calc((80/750)*100vw); height: calc((80/750)*100vw); left: calc((20/750)*100vw);}
#features .features_slide .bx-wrapper .bx-controls-direction a.bx-next{ width: calc((80/750)*100vw); height: calc((80/750)*100vw); right: calc((20/750)*100vw);}

#features #features01 .features_slide .bx-wrapper .bx-controls-direction a.bx-prev{ top: calc(50% + ((100/750)*100vw));}
#features #features01 .features_slide .bx-wrapper .bx-controls-direction a.bx-next{ top: calc(50% + ((100/750)*100vw));}

#features .features_slide .bx-wrapper .bx-pager, 
#features .features_slide .bx-wrapper .bx-controls-auto{ bottom: calc((40/750)*100vw);}
#features .features_slide .bx-wrapper .bx-pager.bx-default-pager a{ width: calc((64/750)*100vw); height: calc((4/750)*100vw); margin: 0 calc((10/750)*100vw);}
}

#features02{ position: relative;}
#features02 p.txt{ width: 654px; position: absolute; left: 50px; bottom: 100px;}
@media screen and (max-width:750px){
#features02 p.txt{ width: calc((654/750)*100vw); left: calc((50/750)*100vw); bottom: calc((100/750)*100vw);}
}



/*spec*/
#spec{ background: #000; color: #fff; padding: 120px 0 180px;}
#spec h2{ margin-bottom: 80px;}

#spec .spec_list{ width: calc(100% + 20px); margin-left: -10px;}
#spec .spec_list h3{ margin-bottom: 60px;}
#spec .spec_list p{ margin: 0;}
#spec .spec_list figure{ margin: 100px auto 0;}

#spec .att{ margin-top: 60px;}
#spec .att ol{ font-size: 0.8rem; font-weight: 400; line-height: 1.25rem; color: #8E8E8E;}
@media screen and (max-width:750px){
#spec{ padding: calc((120/750)*100vw) 0 calc((180/750)*100vw);}
#spec h2{ margin-bottom: calc((80/750)*100vw);}

#spec .spec_list{ width: calc(100% + ((20/750)*100vw)); margin-left: calc((-10/750)*100vw);}
#spec .spec_list h3{ margin-bottom: calc((60/750)*100vw);}
#spec .spec_list figure{ margin: calc((100/750)*100vw) auto 0;}

#spec .att{ margin-top: calc((60/750)*100vw);}
}



/*gallery*/
#gallery{ background: linear-gradient(to bottom,  #231d20 0%,#537dad 100%);}
#gallery ul li{ padding: 6px 6px 0;}
#gallery ul li:nth-child(5){ padding-bottom: 6px;}
#gallery ul li:nth-child(1),
#gallery ul li:nth-child(6){ padding: 0;}
@media screen and (max-width:750px){
#gallery ul li{ padding: calc((6/750)*100vw) calc((6/750)*100vw) 0;}
#gallery ul li:nth-child(5){ padding-bottom: calc((6/750)*100vw);}
}



@media print, screen and (min-width:751px){
.smp{ display:none !important;}
}
@media screen and (max-width:750px){
.pc{ display:none !important;}
}