﻿@media (min-width: 768px) {
    .c-breadcrumb{
    max-width: 1200px;
    margin: 0 auto .5rem;
    }
}
@media (max-width: 767px) {
    .c-breadcrumb{
    padding: 0 10px;
    margin-bottom: 0.5rem;

    }
}

header{
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
width: 1240px;
margin: 30px auto;
padding: 0 20px;
box-sizing: border-box}


@media screen and (max-width: 767px){
header{display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: space-between;
-ms-justify-content: space-between;
justify-content: space-between;
align-items: flex-end;
width: 100%;
margin: 0px auto;	
padding: 10px;
box-sizing: border-box}
header .logo img{
width: 170px
}
header .back img{
width: 130px
}
}


body{
font-family: sans-serif;
font-size: 16px;
overflow: hidden;
}
.maindesign{
font-size: 16px;
background: #000;
}
.maindesign h1{
background: #BD1D1D;

padding: 0.5em 2em;
font-weight: 700;
font-size: 1em;
line-height: 1.2;
color: #fff;
font-feature-settings: 'palt';
}
.maindesign h2{
margin-bottom:1em;
font-weight:700;
font-size:2.0em;
line-height: 1.2;
color:#fff;
font-feature-settings: 'palt';
}
.maindesign .webfont{
font-family: 'Noto Sans JP', sans-serif;
font-feature-settings: "palt" 1;
}
.maindesign .stan{
font-size: 1.3em;
line-height: 1.3;
}
#wrap{
max-width: 1240px;
width:100%;
}
.maindesign .title{
background: #000;
position: relative;
text-align: center;
min-height: 260px;
display: flex;
justify-content: center;
align-items: center;
}
.maindesign .title .product{
/*opacity: 0.54;*/
width: 100%;
    height: auto;
    max-width: 1200px;
}
.maindesign .title .filter1{
position:absolute;
top:0;
left:0;
opacity:0.5;
width:100%;
height:100%;
}
.maindesign .title .filter2{
position:absolute;
top:0;
left:0;
mix-blend-mode:soft-light;
width:100%;height:100%;
}
/*ie hack*/
@media (-ms-high-contrast: none), (-ms-high-contrast: active) {
.maindesign .title .filter2{
/*mix-blend-mode:soft-light;*/
opacity:0.2;
}
.maindesign .title .box1{
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
/* -webkit- transform: translateY(-50%) translateX(-50%); */
margin: auto;
}
}
.maindesign .title .box1{
width:100%;
text-align:center;
position:absolute;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
top: 50%;
left: 50%; 
}
.maindesign .title .logos{
max-width: 390px;
width: 70%;
}
@media screen and (max-width: 767px){
.maindesign .title .logos{
max-width: 150px !important; 
width: 45% !important;
} 
.maindesign .title .product{
width: 100%;
} 
} 
 
.maindesign .title .word1{
font-feature-settings: 'palt';
font-size:3em;
margin-bottom: 1.25em;
font-weight:700;
/*text-shadow: 0px 2px 0px #333230a6, 0px 12px 10px rgb(0 0 0 / 15%), 0px 8px 2px rgb(0 0 0 / 10%), 0px 34px 30px rgb(0 0 0 / 10%); */
text-shadow: -1px 5px 10px rgba(0,0,0,1); 
}
.maindesign .title .word2{
font-feature-settings: 'palt';
line-height:2;
font-size: 1.5em;
font-weight:700;
color: #000;
text-shadow: -1px -1px 1px #ccc, 1px 1px #fff; 
}
.maindesign .title .word3{
font-feature-settings: 'palt';
font-size: 2.75em;
margin-top: 2em;
font-weight:700;
text-shadow: -1px 5px 10px rgb(0,0,0); 
}
.maindesign section.teaser{
background: #000; 
color:#FFF;
}
.maindesign .teaser .box1{
text-align: center;
padding: 1.5em 1em;
}
.maindesign section.quality{
background: #BD1D1D;
overflow: hidden;
text-align: center;
}
.maindesign .quality .balloonTail{
display:inline-block;
width:1.5em;
height:1.5em;
background: #000;
transform-origin: center;
transform: rotate(45deg);
margin-top: -0.8em;
margin-bottom: 0.6em;
}
.maindesign .quality .box3{
text-align: center;
color:#fff;
padding:1em;
}
.maindesign .quality .word1{
font-size: 1.7em;
font-weight: 700;
font-feature-settings: 'palt';
margin-bottom: 1em;
}

.Kerning1{
transform: scale(0.8, 1);
display:inline-block;
margin:0 -0.1em;
}
@media screen and (max-width: 767px){
.maindesign h2{
margin-bottom:1em;
font-weight:700;
font-size: 1.4em;
line-height: 1.2;
color:#fff;
font-feature-settings: 'palt';
}
.maindesign .stan{
font-size: 1.0em;
text-align: left;
}
.maindesign .stan br{
display:none;
}
.maindesign .title .box1{
font-size: 3vw;
}
.maindesign .title .word1{
font-feature-settings: 'palt';
font-size:2em;
margin-bottom: 1em;
}
.maindesign .title .word2{
line-height:2;
color: #fff;
text-shadow: none; 
}
.maindesign .title .word3{
font-size: 2em;
margin-top: 0.5em;
}
.maindesign .teaser .box1{
text-align: left;
}
/* .maindesign .quality .box3{
text-align: left;
} */
.maindesign .quality .word1{
font-size:1.5em;
}
.maindesign h1{
padding: 0.5em 0.5em;
}
}
.maindesign h1 span{
max-width: 1200px;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.breadcrumb {
    max-width: 1200px;
    padding: 0 10px;
    margin: 0 auto 10px;
    box-sizing: border-box;
    color: #83838f;
    display: flex;
    flex-wrap: wrap;
    font-size: 0.875em;
} 
.breadcrumb a {
    color: #83838f !important;
    text-decoration: none;
}


.maindesign .movie{
margin: 2em 0;
	} 
.maindesign .movie .frames{
	width: 100%;
    max-width: 900px;
    margin: auto;
    border: 1em solid #9c9b9d;
    box-sizing: border-box;
	}
.maindesign .movie .videos{
    width: 100%;
	height:100%;	
	}
@media screen and (max-width: 767px){
.maindesign .movie{
margin: 3em 0;
	} 
.maindesign .movie .frames{
    border: 0.5em solid #9c9b9d;
    width: 95%;
	}
    }

    .campaignbnr{
    margin: 40px 0 0;
        text-align: center;
    }
    .campaignbnr img{
        max-width: 900px;
        width: 100%;
    margin: auto;
    border: 3px solid #fff;
    box-sizing: border-box;
    }
    @media screen and (max-width: 767px){
     .campaignbnr {
    margin: 40px 20px 0;
}   
    }


    .award {
        width: 100%;
    }
    .award-outer {
        background-color: #fff;
        max-width: 900px;
        margin: 0 auto;
        padding: 10px;
        box-sizing: border-box;
    }
    .award-inner {
        border: 3px solid #000;
        padding: 20px 15px 30px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        box-sizing: border-box;
    }
    .award-img {
        width: 40%;
    }
    .award-img > img {
        width: 100%;
        height: auto;
    }
    .award-detail {
        width: 55%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .awatd-logo > img {
        width: 100%;
        height: auto;
    }
    .award-text {
        font-weight: bold;
        line-height: 1.5;
        padding-left: 50px;
        font-size: 1.25rem;
    }
    .award-btn {
        position: relative;
        font-size: 1.15rem;
    }
    .award-btn > a {
        display: block;
        text-decoration: none;
    }
    .award-btn__01 > a {
        color: #fff !important;
    }
    .award-btn__02 > a {
        color: #fff !important;
    }
    .award-btn__01 {
        background-color: #EA6D0D;
        border-radius: 50px;
        color: #fff !important;
    }
    .award-btn__02 {
        background-color: #979797;
        border-radius: 30px;
        margin-top: 30px;
        width: 100%;
/*        border: 3px solid #000;*/
    }
    .award-btn--inner {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0;
        text-align: center;
    }
/*
    .award-btn--inner__02 {
        font-weight: bold;
    }
*/
    .award-btn--inner::after {
        content: '';
        position: absolute;
        top: 50%;
        right: 30px;
        transform: translateY(-50%) rotate(45deg);
        
    }
    .award-btn--inner__01::after {
        border-top: solid 2px #fff;
        border-right: solid 2px #fff;
        width: 10px;
        height: 10px;
    }
    .award-btn--inner__02::after {
        border-top: solid 3px #fff;
        border-right: solid 3px #fff;
        width: 10px;
        height: 10px;
    }
    .award-detail--item {
        min-height: 0%;
    }
    @media screen and (max-width:767px) {
        .award-img {
            width: 100%;
            margin-top: 15px;
        }
        .award-text {
            padding-left: 0;
        }
        .award-detail {
            width: 100%;
        }
        .award-btn__01 {
            margin-top: 15px;
        }
    }


    .campeign_banner {
        max-width: 900px;
        margin: 30px auto;
        border: 3px solid #fff;
        box-sizing: border-box;
    }
    .campeign_banner img {
        width: 100%;
        height: auto;
        display:block;
    }
	@media screen and (max-width:767px) {
        .campeign_banner {
           width: calc(100% - 20px);
        margin: 30px auto;
        }
    }
	

.ball{
display:flex;
align-items: center;
justify-content: center;
width:8em;
height:8em;
border-radius: 50%;
background: #A8A8A8;
position:relative;
overflow:hidden;
}
.ball::before{
display:block;
content:"";
width:25%;
height:25%;
top:25%;
left:25%;
position: absolute;
background-color:#fff;
border-radius: 50%;  
z-index:2;
filter: blur(0.2em);
}	
.ball::after{
display:block;
content:"";
width:8em;
height:8em;
top:0px;
left:0px;
position: absolute;
filter: blur(5px);
background-color:transparent;
z-index:1;
box-shadow: inset -10px -10px 0 3px #888;
border-radius: 50%;
}
.ball .text{
font-size: 1.2em;
z-index: 3;
font-weight: 700;
color:#333;
text-shadow:-1px -1px 1px #aaa, 1px 1px #fff;

}
.maindesign .quality ul{
max-width:1200px;
margin: auto;
display:flex;
flex-wrap: wrap;
padding: 1em 0.5em;

}
.maindesign .quality li{
width:50%;
margin: 1em 0;
}
.maindesign .quality .box11{
display:flex;
float:left;
align-items: center;
height:100%;
}
.maindesign .quality .box12{
display:inline-block;
width:calc(100% - 8em);
box-sizing: border-box;
text-align: left;
padding:0 1em;
}
@media screen and (max-width: 767px){
.ball{
width:5em;
height:5em;
}
.ball::before{
display:block;
content:"";
width:25%;
height:25%;
top:25%;
left:25%;
position: absolute;
background-color:#fff;
border-radius: 50%;  
z-index:2;
filter: blur(0.2em);
}	
.ball::after{
display:block;
content:"";
width:5em;
height:5em;
}
.ball .text{
font-size: 0.8em;

}.maindesign .quality ul{
padding: 1em 0.5em;
}
.maindesign .quality li{
width:100%;
margin: 1em 0;
}
.maindesign .quality .box11{
display:flex;
float:left;
align-items: center;
height:100%;
}
.maindesign .quality .box12{
display:inline-block;
width:calc(100% - 6em);
box-sizing: border-box;
text-align: left;
padding:0;
}
}


.maindesign .multi .balloonTail{
display: inline-block;
width: 1.5em;
height: 1.5em;
background: #BD1D1D;
transform-origin: center;
transform: rotate(45deg);
margin-top: -0.8em;
margin-bottom: 0.6em;
}
.maindesign .multi .box1{
text-align: center;
color:#fff;
margin-bottom: 2em;
}	
@media screen and (max-width: 767px){
.maindesign .multi .box1{
/*text-align: left;*/
padding:1em;
margin-bottom: 2em;
}	
}


    .spacer_box{
        position: relative;
        max-width: 1200px;
        height: 1200px;
    margin: auto;
        padding: 0 0 2em;
    } 
    .spacer_box img{
        width: 100%
    } 
.spacer_box img.battery-mark-01{
        width: 160px;
    position: absolute;
    left: 0%;
    }
.spacer_box img.battery-mark-02{
        width: 160px;
    position: absolute;
    left: 0%;
    top: 70%; 
    }
body .spacer_box a:hover img {
    opacity: 0.8;
    background: none;
}

body .spacer_box a:hover{
    opacity: 0.8;
}
    .spacer_box a.spacers{
        position: absolute;
        transform: translate(-50%,-50%);
            width: 200px;
            text-decoration: none;
    }
    .spacer_box a.spacers p{
    text-align: center;
        width: 100%;
        color: #fff;
        line-height: 1.25;
    } 
    .spacer_box a:hover {
    opacity: 0.5;
}
    .spacer_box a img{
    width: 100%;
        height: auto;
}



    .spacer_box a.spacers.link01{
top: 11%;
left: 41%;
}
    .spacer_box a.spacers.link02{
top: 11%;
left: 59%;
}
    .spacer_box a.spacers.link03{
top: 37%;
left: 19%;
}
    .spacer_box a.spacers.link04{
top: 18%;
left: 23%;
}
    .spacer_box a.spacers.link05{
top: 37%;
left: 82%;
}
    .spacer_box a.spacers.link06{
    top: 54%;
    left: 32%;
    }
    .spacer_box a.spacers.link07{
    top: 58%;
    left: 50%;
    }
    .spacer_box a.spacers.link08{
    top: 53%;
    left: 68%;
    }
    .spacer_box a.spacers.link09{
    top: 18%;
    left: 77%;
    }
    .spacer_box a.spacers.link10_01{
    top: 35%;
    left: 40%;
    width: 260px;
}
.spacer_box a.spacers.link10_02{
top: 35%;
    left: 60%;
    width: 260px;
	transform: translate(-50%, -50%)
}
.spacer_box a.spacers.link10_01 p,.spacer_box a.spacers.link10_02 p{
position: absolute;
    bottom: 0;
    font-size: 1.25em;
}
    .spacer_box a.spacers.link11{
top: 84%;
    left: 28%;
    }
    .spacer_box a.spacers.link12{
top: 84%;
    left: 50%;
    }
.spacer_box a.spacers.link13{
top: 84%;
    left: 77%;
    }

@media screen and (max-width: 767px){
.spacer_box{
        height: auto;
    } 
    .spacer_box a.spacers{
            width: 17vw;
    }
    .spacer_box a.spacers p{
        font-size: 2vw;
    } 
    .spacer_box img.battery-mark-01{
            width: 60px;
    position: absolute;
    left: 4%;
    top: -8%;
    }
.spacer_box img.battery-mark-02{
           width: 60px;
    position: absolute;
    left: 4%;
    top: 75%;
    }
   .spacer_box a.spacers.link11{
top: 84%;
    left: 32%;
    }
    .spacer_box a.spacers.link12{
top: 84%;
    left: 54%;
    }
.spacer_box a.spacers.link13{
top: 84%;
    left: 77%;
    }
    .spacer_box a.spacers.link10_01,.spacer_box a.spacers.link10_02{
        width: 24vw;
}
.spacer_box a.spacers.link10_01 p,.spacer_box a.spacers.link10_02 p{
position: absolute;
    bottom: 15%;
    font-size: 2vw;
}
}

.maindesign .lineup .balloonTail{
display: inline-block;
width: 1.5em;
height: 1.5em;
background: #262626;
transform-origin: center;
transform: rotate(45deg);
margin-top: -0.8em;
margin-bottom: 0.6em;
}
.maindesign .lineup .box1{
text-align: center;
color:#fff;
margin-bottom: 2em;
}
.maindesign .lineup .h3_cover{
width:100%;
max-width:1200px;
margin:auto;
}
.maindesign .lineup h3{
color: #fff;
text-align: left;
padding: 0em 1em;
}
.maindesign .lineup h3 img{
height: 3.5em;
float: right;
}
.maindesign .lineup h3 .word1{
line-height: 1.5;
vertical-align: top;
font-size: 2.3em;
font-weight: 700;
}

.maindesign .lineup ul{
display:flex;
flex-wrap: wrap;
justify-content: space-between;
max-width:1200px;
margin:auto;
padding: 4em 0;
}

.maindesign .lineup ul::after{
display: block;
content:"";
width:calc(33.33% - 20px);
}
.maindesign .lineup li {
width:calc(33.33% - 20px);
margin-bottom: 2em;
}
.maindesign .lineup .main_pic {
width:100%;
height: auto;
}
.maindesign .lineup .maker1 {
position: absolute;
top: 3%;
left: 3%;
width: 4em;
}
.maindesign .lineup .maker2.new{
		color: #fff;
    	background: #E41E25;
    	display: inline-block;
    	padding: 0.3em 0.5em;
    	font-size: 1.5em;
    	font-weight: 700;
    	margin-bottom: 0.5em;
    width: 3em;
	}
.maindesign .lineup .maker2 {
position: absolute;
top: 3%;
right: 3%;
width: 7em;
}		
.maindesign .lineup .word1 {
padding:1em 0;
font-weight: 700;
color:#fff;
text-align: left;
line-height: 1.3;
font-size: 1.5em;
}
.maindesign .lineup a {
text-decoration: none;		
}
@media screen and (max-width: 767px){
.maindesign .lineup .box1{
text-align: left;
padding:1em;
margin-bottom: 0em;
}	
.maindesign .lineup h3 img{
height: 2em;
float: right;
}
.maindesign .lineup h3 .word1{
line-height: 1.1;
vertical-align: top;
font-size: 1.5em;
font-weight: 400;
}
.maindesign .lineup ul{
padding: 1em;	
}
.maindesign .lineup li {
width:100%;
margin-bottom: 1.8em;
}
.maindesign .lineup .word1 {
padding: 1.0em 0;
font-size:1.3em;	
font-weight: 700;
color: #fff;
text-align: left;
line-height: 1.3;
}	
}


.maindesign .Social{
border-top: solid 1px #fff;
padding: 3em 0 5em 0;
}
.maindesign .Social .inner{
max-width:1200px;
margin:auto;
}
.maindesign .socialBtn{
text-align: center;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
width: 55%;
}
.maindesign .socialBtn a{
text-decoration: none;
width: calc(25% - 10px);
margin: 0 5px 10px;
}
.maindesign .socialBtn a:hover img {
background-color: rgba(0,0,0,0);
}
@media screen and (max-width: 767px){
.maindesign .socialBtn{
width: 80%;
max-width: 380px;
}
.maindesign .socialBtn a{
width: calc(50% - 20px);
margin: 0 10px 10px;
}
.maindesign .socialBtn a:nth-child(2n){
margin: 0 10px 10px;
}
.maindesign .socialBtn a img{
width: 100%;
}  
}

.maindesign .pickup{
    max-width: 900px;
    margin: 30px auto;
    border: 3px solid #fff;
    box-sizing: border-box;
        background: #141515;
}
.maindesign .pickup-inner{
    position: relative;
}
.maindesign .pickup-inner img{
    width: 100%;
    height: auto;
}
.maindesign .pickup-inner .link01{
    font-size: 1.25em;
    padding: 0.8rem 1.2rem;
    position: absolute;
    top: 83%;
    left: 3%;
    width: 50%;
    color: #fff;
    background: #EA6D0D;
    box-sizing: border-box;
    text-align: center;
    border-radius: 40px;
    display: flex;
    opacity: 1.0;
    /* width: auto; */
    /* height: 100%; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
.maindesign .pickup-inner .link02{
    font-size: 1.25em;
    padding: 0.8rem 1.2rem;
    position: absolute;
    top: 90%;
    left: 3%;
    width: 50%;
    color: #fff;
    background: #979797;
    box-sizing: border-box;
    text-align: center;
    border-radius: 40px;
    display: flex;
    opacity: 1.0;
    /* width: auto; */
    /* height: 100%; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}

.maindesign .pickup-inner .link01::after,.maindesign .pickup-inner .link02::after {
    content: "";
    position: absolute;
    right: 12px;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    width: 8px;
    height: 8px;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 0;
    bottom: 0;
    margin: auto;
}

@media screen and (max-width: 767px){
    .maindesign .pickup{
    width: calc(100% - 20px);
}
    .maindesign .pickup-inner .link01 {
    font-size: 0.8em;
    padding: 0.8rem 1.2rem;
    position: relative;
    margin: 20px auto;
    top: auto;
    left: auto;
    width: 90%;
    color: #fff;
    background: #EA6D0D;
    box-sizing: border-box;
    text-align: center;
    border-radius: 40px;
    display: flex;
    opacity: 1.0;
    /* width: auto; */
    /* height: 100%; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
    .maindesign .pickup-inner .link02 {
    font-size: 0.8em;
    padding: 0.8rem 1.2rem;
    position: relative;
    margin: 20px auto;
    top: auto;
    left: auto;
    width: 90%;
    color: #fff;
    background: #979797;
    box-sizing: border-box;
    text-align: center;
    border-radius: 40px;
    display: flex;
    opacity: 1.0;
    /* width: auto; */
    /* height: 100%; */
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
}
}







.videos{
	position:relative;
	cursor:pointer;
	border: 1px solid #ccc;
	box-sizing: border-box;
	}
	.videos img{
	display: block;
	}
	#main .videos--overmaker{
	top: 50%;
	left: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
	width: 20%;
	height: auto;
	opacity:0.7;
	}
	#modalwindow{
	display:none;
	background:rgba(0,0,0,0.7);
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index: 10000;
	}
	#bamiri{
	width: 65%;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translateY(-50%) translateX(-50%);
	background-color: #fff;
	}
	#subwindow{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	border:0;
	}
	.modal_close{
    position: absolute;
	top: 0;
	right: 0;
	width: 15%;
	height: 15%;
	max-width: 80px;
	max-height: 80px;
	transform: translate(50%, -100%);
	}
	/* -- 動画（YouTube・MP4　共通） end --  */

	.insert-container {
	margin-top:10px;		  
	}
		  
	@media screen and (max-width:767px) {
		#bamiri{
			width: 80%;
		}
		.modal_close{
			top: -40px;
			right: -20px;
			width: 40px;
			height: 40px;
			transform: translate(0,0);
		}
		
		.insert-container {
	        padding: 10px;		  
	}
	}