@charset "UTF-8";
/*@font-face {
  font-family:'Acumin';
  src: url('AcuminVariableConcept.otf') format('opentype');
}*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&family=Oswald:wght@300;400&display=swap');
/* CSS Document */

/* --------------------------------------------
    common
-------------------------------------------- */
body {
    color: #000;
    font-family:'Noto Sans JP', sans-serif;
    line-height: 1.83;
    text-align: left;
    font-size: 14px;
    /*background:linear-gradient(to right, #ff8700 0%, #fcb400 100%);*/
    background-color:  #ff8700;
    background-image: url("../img/back-fcb400.gif");
    background-repeat: repeat-y;
    background-position: right top;
    background-size: 50%;
}
img {
    display: block;
    width: 100%;
    margin: 0 auto;
}


/*font*/
.jpn {
    font-family:'Noto Sans JP', sans-serif;
}
.eng {
    font-family:Arial, Helvetica, 'sans-serif';
}
h1, h2, h3, h4, h5, nav, .font {
    font-family:'Oswald', sans-serif;
    font-stretch:ultra-condensed;
    font-weight: 400;
}
h1 {
    font-size:3.75em;
}
h2 {
    font-size:4em;
}
h3 {
    font-size:1.15em;
    font-weight: 800;
    display: inline-block;
    background-color: #ff8700;
    border-radius: 1em;
    padding:0 .5em .05em;
    text-align: center;
    margin: 0 auto .5em;
    font-family:'Noto Sans JP', sans-serif;
}
h3 span {
    color: #fff;
}
.content_w,.back-city-back {
    margin: 0 auto;
    width: 92%;
    max-width:1020px;
    background:linear-gradient(to right, #ff8700 0%, #fcb400 100%);
}
.margin-set {
    margin: 0 auto;
    width: 92%;
    max-width:1020px;
    background:linear-gradient(to right, #ff8700 0%, #fcb400 100%);
}
header .margin-set { height: 1.5em }
#brand .margin-set { height: 2em }
.product-slide .margin-set { height: 2em; width: 100% }
#coordinate .margin-set { height: 1.5em; }
/* header
-------------------------------------------- */
header .read {
    background-color: rgba(255,255,255,1.00);
    text-align: center;
    line-height: 1.25;
    font-size: 1em;
    font-weight:500;
    padding: 0.35em 0 0.5em;
}
header .title {
    padding: 2em 0;
}
header .title h1 {
    padding-bottom: 0.25em
}
header .title > img {
    max-width: 300px;
    width: 90%;
}
header .link_wrap {
    max-width: 400px;
    min-width: 293px;
    margin: 2em auto .5em;
}
header .link_wrap a {
    width: 100%;
    display: block;
}
header .link {
    background-color: #000;
    padding: .5em .75em;
    display: flex;
    justify-content:center;
    align-items: center;
    color: #fcb400;
}
header .link h2 {
    font-size:2.25em;
    line-height: 1;
    margin-bottom: .25em;
}
header .link h2 img {
    display: inline-block;
    width: 12px;
}
header .link .image {
    padding-right: .75em;
}
header .link .text {
    width:723px;
    font-size: 0.9em;
    line-height: 1.5;
    font-weight: 700;
}
header .scroll-down {
    background-color: #000;
    padding: 1em 0 1.5em;
}
header .scroll-down a {
    color: #fff;
}
header .scroll-down .scroll-down_arrow {
    text-align: center;
    font-size:1.42857em;
    color: #fff;
    font-weight: 700;
}
header .scroll-down .scroll-down_arrow img {
    text-align: center;
    width:60px;
    padding:3px 0 0;
}

/* article
-------------------------------------------- */
article {}
/*outset*/
.outset {
    padding-top: .75em;
    color: #fff;
    text-align: center;
}
.outset nav {
    font-size:1.35em; 
    font-weight: 500;
}
.outset nav a,
.outset nav span {
    color: #000;
    margin: 0 .5em;
}
.outset nav span,
.outset nav a:hover{
    color: #000;
    text-decoration: underline;
}
.outset .sub_title {
    font-size:1.45em; 
    line-height: 1.65;
    font-weight:900;
    margin-bottom: 0.55em;
}
.outset .sentence {
    text-align: left;
}

/* brand
-------------------------------------------- */
#brand .content_02 {
    position: relative;
}
#brand .catch {
    text-align: center;
    margin-bottom:1.25em;
}
#brand .content_inner {
    position: absolute;
    z-index: 10;
    width: 100%;
}
/*content_inner content_top*/
#brand .content_top {
    background-image: url("../img/back-tag.png");
    background-repeat: no-repeat;
    background-position: center -5.5em;
    background-size: cover;
    position: relative;
}
/*content_inner content_bottom*/
#brand .content_bottom {
    color: #fff;
    margin: -14.5em auto 0;
    position: relative;
    z-index: 20;
    padding-bottom: 4em;
    background:rgba(255,255,255,0.00);
}
#brand .content_bottom .item {
    float: right;
    width:35%;
    padding-left: .25em;
    max-width: 150px;
    }
#brand .content_bottom .model {
    width:40%;
    max-width: 180px;
    padding-right: 1em;
    float: left;
    }
#brand .content_bottom .title {
    font-size:1.45em; 
    line-height: 1.65;
    font-weight:900;
    margin-bottom: .5em;
    text-align: center;
    }
/*都市の背景*/
#brand .content_02 .back-city {
    background-image: url("../img/back-city-sp.png");
    background-size: contain;
    background-position: center bottom;
    background-repeat: no-repeat;
    mix-blend-mode: multiply;
}

/* product
-------------------------------------------- */
.product-slide li {
    color:#fff;
}
.product-slide li h4 {
    text-align: center;
    font-size: 1.25em;
}
.product-slide li .product-name {
    text-align: center;
    color: #000;
    line-height: 1.7;
    font-size: 0.9em;
    margin-bottom: 1em;
}
.product-slide li .product-info {
    width: 70%;
    margin: 0 auto;
}
.product-slide li .product-info .buy {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5em;
}
.product-slide li .product-info .buy .line {
    height: 1px;
    border-top: 1px solid #fff;
    width: 50%;
}
.product-slide li .product-info .buy a {
    font-size:1.25em;
    font-weight: 800;
    display: inline-block;
    background-color: #000;
    color: #ff8700;
    border-radius: 1em;
    padding:0.1em .75em .175em;
    text-align: center;
    margin: 0 auto;
}
.product-slide li .product-explanation {
    width: 90%;
    margin: 0 auto ;
    padding-top: .75em;
}
.product-slide li .product-explanation div:first-child {
    font-weight: 900;
    font-size: 1.1em;
    line-height: 1.75;
    margin-bottom: 0.45em;
}
#product .product-top-line {
    padding-bottom: .75em;
    margin-top:3em;
    border-top: 1px solid #fff;
}
#product .product-bottom-line {
    border-top: 1px solid #fff;
}
#product .product-number {
    text-align: right;
    font-size: 1.5em;
    color: #fff;
}
.product-layer {
    position: relative;
    background:linear-gradient(to right, #ff8700 0%, #fcb400 100%);
}
.product-layer .front {
  position: absolute;
    z-index:1;
}
.product-layer .shadow {
    mix-blend-mode: multiply;
}

/* coordinate
-------------------------------------------- */
#coordinate .content {
    background-color: #000;
    padding: 1.85em 0 3em;
}
#coordinate .content .content_w {
    background: #000;
}
#coordinate .content .image,
#coordinate .content .point-text {
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#coordinate .content .image {
    margin-bottom: 1.5em;
}
#coordinate .content .point {
    text-align: center;
    margin-bottom:.5em;
}
#coordinate .content .text {
   color: #ff8700;
}
/*coordinate-slide*/
.coordinate-slide {
}
.coordinate-slide .coordinate-top-line {
    padding-bottom: 1em;
    border-top: 1px solid #fff;
}
.coordinate-slide .coordinate-bottom-line {
    border-top: 1px solid #fff;
}
.coordinate-slide .coordinate-number {
    font-size: 1.5em;
    color: #fff;
    line-height: 1;
    margin-bottom: .5em;
    
    text-align: center;
}
/*wrap*/
.coordinate-wrap {
    position: relative;
    height: 100%;
    padding: 4em 0 4em;
}
/*base*/
.coordinate-base {
    position: relative;
    margin: 0 auto;
    width: 70%;
    max-width: 550px;
    height: 100%;
}
.coordinate-base h4 {
    color:#ff8700;
    font-size: 1.5em;
    position: absolute;
    padding-top: 11%;
    width: 100%;
    text-align: center;
}
.coordinate-base .cover {
    position: absolute;
    text-align: center;
    height: 100%;
    display: flex;
    align-items: center;
}
.coordinate-base .cover .body {
    color:#ff8700;
    width: 90%;
    display: block;
    margin:0 auto;
}
.coordinate-base .base img:nth-child(2) {
    background-color: #fff;
}
/*flex*/
.coordinate_flex {
    position: absolute;
    display: flex;
    justify-content: space-between;
    width: 100%;
    min-height: 100%;
    top:0em;
    padding-bottom: 1em;
}
.coordinate_flex .coordinate-info.left,
.coordinate_flex .coordinate-info.right {
    width: 30%;
    max-width: 300px;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
}
.coordinate_flex .coordinate-info.left {
    align-content: flex-end
}
.coordinate_flex .coordinate-info.right {
    align-content:flex-start;
}
.coordinate-info .blank {
    visibility: hidden;
}
.coordinate-info li:first-child {
    margin-bottom: 2.5em
}
.coordinate-info .image {
    position: relative;
}
.coordinate-info .image .icon {
    position: absolute;
    top: 0;
    min-width: 1.5em;
    /*max-width:2em;*/
    width: 30%;
    z-index: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}
.coordinate-info .image .icon.plus {
    background-image: url("../img/plus.svg");
}
.coordinate-info .image .icon.minus {
    background-image: url("../img/minus.svg");
}
.coordinate-info .image > img {
    z-index: 2;
    position: relative;
}
.coordinate_flex .coordinate-info.left .image .icon {
    left:0;
}
.coordinate_flex .coordinate-info.right .image .icon {
    right:0;
}

/*info*/
.coordinate-info .name {
    font-size: 11px;
    line-height: 1.5;
    font-family: Helvetica, "sans-serif";
    text-align: center;
    margin-bottom: 0.25em;
}
.coordinate-info .buy {
    text-align: center;
}
.coordinate-info .buy a {
    font-size:1em;
    font-weight: 800;
    display: inline-block;
    background-color: #000;
    color: #ff8700;
    border-radius: 1em;
    padding:0.15em .75em .175em;
}

/* powered
-------------------------------------------- */
.powered {
    background-color: rgba(0,0,0,1.00);
    padding:4em 0;
    color: #fff;
}
.powered > div {
    width:65%;
    margin: 0 auto;
}
#powered .logo {
    margin-bottom: 1em;
    max-width: 200px
}
#powered .powered_text {
    font-size: 0.9em;
    margin-bottom: 3em;
    max-width: 740px
}
#powered .powered_logo {
    font-size: 0.85em;
    text-align: center;
}
#powered .powered_logo span {
    display:inline-block;
    width: calc(100% - 11em);
    max-width:115px;
    margin-left: 1em;
}

/* copyright
-------------------------------------------- */
.copyright {
    text-align: center;
    color: #fff;
    background-color: rgba(0,0,0,1.00);
    font-size: 0.75em;
}
.copyright .content_w {
    background: rgba(0,0,0,1.00)!important;
    padding: 2.5em 0 3em;
    border-top:1px solid #666; 
}
/* --------------------------------------------
    scroll up
-------------------------------------------- */    
.scroll-up {
    position: fixed;
    z-index:999;
    top:0;
    left: 0;
    opacity: 0.0;
    transition: all 0.4s ease-in-out 0s;
    -webkit-transition: all 0.4s ease-in-out 0s;
    }
.scroll-up a {
    width:42px;
	padding:13px 10px 14px;
	line-height: 1;
	display: inline-block;
	color:#fff;
    mix-blend-mode: multiply;
    opacity: 1.0;
	-webkit-transition: .3s ease-in-out;
    transition: .3s ease-in-out;    
    background-color: #000;
    }
.scroll-up a:hover{
    opacity: .5;
    }


@media screen and (min-width: 950px) {
/* coordinate slider
    -------------------------------------------- */
   coordinate_flex .coordinate-info.left,
    .coordinate_flex .coordinate-info.right {
        width: 26%;
    }
    .coordinate_flex .coordinate-info.left {
        margin-left:4em;
    }
    .coordinate_flex .coordinate-info.right {
        margin-right:4em;
    }
}

@media screen and (min-width: 768px) {
    body {
        font-size: 17px;
    }
    h3 {
        font-size: 1.65em;
    }
    /* header
    -------------------------------------------- */
    header .title > img {
        max-width: none;
        width: 100%;
    }
    header .read {
        font-size: 1.15em;
    }
    header .scroll-down {
        padding: 0;
    }
    header .scroll-down_w {
        position: relative;
        display: flex;
        justify-content: flex-end;
        max-width: 1020px;
        margin: 0 auto;
    }
    header .scroll-down .scroll-down_arrow {
        position: absolute;
        width:6em;
        left: 50%;
        top: 50%;
        margin-top: -1.65em;
        margin-left: -3em;
    }
    header .link_wrap {
        margin: 0;
        max-width: 340px;
    }
    header .link_wrap a {
        width: 100%;
        margin: 0;
    }
    header .link {
        padding: .5em 0;
        justify-content: flex-end;
    }
    header .link h2 {
        font-size: 3em;
    }
    header .link .image {
        padding-right:0;
        margin-left: .5em;
    }
    header .link .text {
        width:735px;
        font-size: 0.75em;
    }
    
    /*common*/
    .outset .sub_title br {
        display: none;
    }
    .outset .sentence {
        max-width: 38em;
        margin: 0 auto;
    }
    
    /*brand*/
    #brand .content_inner .content_top > div {
        padding-top: 2.5em;
    }
    #brand .content_inner .content_bottom {
        margin: -24em auto 0;
    }
    #brand .content_inner .content_bottom .content_flex {
        align-items: center;
    }
    #brand .content_02 .back-city {
        background-image: url("../img/back-city-pc.png");
        background-size: cover
    }
    /*content_inner content_top*/
    #brand .content_top {
        background-position: center top;
        background-size:contain;
    }
    #brand .content_top .catch {
        position: absolute;
        width: 100%;
        text-align: center;
        padding-top: 2em;
    }
    #brand .content_top .catch img {
        width: 96%;
    }
    /*content_inner content_bottom*/
    #brand .content_bottom {
        color: #fff;
        margin: -14.5em auto 0;
        position: relative;
        z-index: 20;
        padding-bottom: 4em;
    }
    #brand .content_bottom .content_flex {
        display: flex;
        justify-content:space-between;
        flex-wrap: wrap;
    }
    #brand .content_bottom .image {
        width: 54%;
        margin-left: -1em;
    }
    #brand .content_bottom .explanation {
        width: 46%;
        padding-right: 3%;
        font-size: 0.9em;
    }
    #brand .content_bottom .title {
        text-align: left;
        font-size: 1.25em;
    }
    
    
    /* coordinate slider
    -------------------------------------------- */
    .product-slide li .product-explanation {
        width: 68%;
        padding-top: 1.15em;
    }
    /* coordinate
    -------------------------------------------- */
    #coordinate .content .content_w {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    #coordinate .content .image {
        margin-bottom: 0em;
        width:45%;
        margin-right: 1.5em;
    }
    #coordinate .content .point-text {
        width: 55%;
        text-align: left;
    }
    #coordinate .content .point {
        margin-bottom:0.35em;
        display: flex;
        flex-wrap: wrap;
        justify-content:center;
    }
    #coordinate .content .point h3 {
        font-size: 1.15em;
        margin: inherit;
        width: 45%;
        min-width:240px;
        margin-bottom:0.5em;
    }
    #coordinate .content .point h3:nth-child(2) {
        margin-right:.5em;
        margin-left:.5em;
    }
    .coordinate-info .image {
        padding-top: .5em;
    }
    .coordinate-info .image .icon {
        min-width: 3em;
        max-width: 5em;
        width: 50%;
    }
    .coordinate-base {
        width: 75%
    }
    .coordinate-info .name {
        font-size: 12px;
        margin-bottom: 0.5em;
    }
    .coordinate-base h4 {
        font-size: 1.75em;
        padding-top: 10%;
        top:0;
    }
    .coordinate-slide .coordinate-number {
        text-align: right;
    }
    .product-slide li h4 {
        font-size: 1.75em;
    }
    .product-slide li .product-explanation div:first-child {
        font-size: 1.25em;
        margin-bottom: 0.45em;
    }
    /* powered
    -------------------------------------------- */
    #powered .logo {
        margin-bottom: 1.5em;
    }
    /* scroll
    -------------------------------------------- */
    .scroll-up {
        top: unset;
        bottom: 1em;
        left: unset;
        right: 2.8vw;
    }
 }






/*進む戻るボタン
----------------------------------*/
.slick-prev,
.slick-next {
    font-size: 0;
    line-height: 0;
    position: absolute;
    top: 35%;
    display: block;
    width: 25px;
    height: 45px;
    padding: 0;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    cursor: pointer;
    color: transparent;
    border: none;
    outline: none;
    z-index:900;
    
    background-repeat: no-repeat;
    background-size: contain;
    background-color:currentColor;
}
.slick-prev {
    left:0;
    background-position:left center;
    background-image: url("../img/prev.svg");
}
.slick-next{
    right:0;
    background-position:right center;
    background-image: url("../img/next.svg");
}

.slider_02 .slick-prev,
.slider_02 .slick-next {
    top: unset;
    bottom:-4px;
    height: 28px;
}
@media screen and (min-width: 768px) {
    .slick-prev,
    .slick-next {
        top:41%;
    }
    .slider_02 .slick-prev,
    .slider_02 .slick-next {
        top:55%;
        bottom:unset;
        height: 60px;
    }
}
@media screen and (min-width: 1024px) {
    .slick-prev,
    .slick-next,
    .slider_02 .slick-prev,
    .slider_02 .slick-next{
        height: 80px;
        top:45%;
    }    
}