@charset "UTF-8";
.pc {}
.sp {display: none !important;}

/*** common color
logo blue rgb(10,55,100)
logo orange rgb(222,111,11)
smart green rgb(91,178,104)
smart blue rgb(77,86,151)
sky rgb(29,185,253) 
sky2 rgb(22,155,222)
***/

/**************************** common inner ********************************/
.common_inner {
width: calc(100% - 20vw);
padding-left:10vw;
padding-right:10vw;
}

.common_inner_800 {
width: 800px;
padding-left:calc((100% - 800px) / 2 );
padding-right:calc((100% - 800px) / 2 );
}

@media screen and (min-width:1500px) {
}
@media screen and (max-width:1080px) {
}

/**************************** flex ********************************/
.flex {
display: flex;
flex-wrap: wrap;
}

.f_start {align-items: flex-start;}
.f_center {align-items:center !important;}
.f_stretch {align-items:stretch !important;}
.f_end {align-items:flex-end;}
.f_reverse {flex-direction: row-reverse;}
.nowrap {flex-wrap: nowrap;}
.between {justify-content: space-between;}
.around {justify-content: space-around;}
.center {justify-content: center !important;}

.flex .halfbox {width: calc(50% - 0px);}
.flex .thirdbox {width: calc((100% / 3 ) - 0px);}

.flex100 {width:calc((100% / 1 ) - 0px);}
.flex80 {width:calc((80% / 1 ) - 0px); padding:0 10%;}
.flex50 {width:calc((100% / 2 ) - 20px);}
.flex33 {width:calc((100% / 3 ) - 12px); margin-bottom: 18px;}
.flex25 {width:calc((100% / 4 ) - 12px); margin-bottom: 16px;}
.flex20 {width:calc((100% / 5 ) - 10px); margin-bottom: 10px;}

.flex55 {width:calc((100% - 45% ) - 20px);}
.flex45 {width:calc((100% - 55% ) - 20px);}


/**************************** header ****************************/
header {
position: fixed;
top:0;
left:0;
background: rgba(255,255,255,0.0);
width: 100%;
height:30px;
padding:20px 40px;
z-index: 100000;
transition: 0.3s;
}

header.active {
background: rgba(255,255,255,0.97);
}

header .header_logo {
width: 100px;
display: block;
}

header .header_logo img {
width: 100%;
}


/**************************** main ******************************/
main {
position: relative;
}


/**************************** KV ********************************/
section .KV {
width: 100%;
height:calc(100vh - 80px);
}

.kv_01 {
width: 100%;
height:calc(100vh - 80px);
background: url("../img/KV/kv_adrums_01.jpg") center right / auto calc(100vh - 80px) no-repeat;
}

.KV .kv_left {
display: inline-block;
padding:20px 3vw 10px 5vw;
background: rgba(255,255,255,0.9);
}


/**************************** control ***************************/
.control {
position: sticky;
top:70px;
z-index: 99999;
}

.control, .control nav {
width: 100%;
height:80px;
line-height: 1.2em;
}

.control nav a {
width: auto;
text-align: center;
padding:1em 1em;
}

.control nav a:first-child {
padding-left: 5vw !important;
}

.control nav a:last-child {
padding-right: 5vw !important;
}

/**************************** article ***************************/
article section {
min-height:300px;
}

article section .section_title {
width: 10em;
text-align: center;
background: rgba(44,44,44,1.0);
color: white;
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
font-size: 135%;
margin-left: calc((100% - 10em) / 2);
padding:15px 0;
border-radius: 0 0 10px 10px;
}

/*** Overview ***/
#overview {
background: url("../img/sec02_overview_01.jpg") center center / cover no-repeat fixed;
}

#overview .title {
font-family: 'Ubuntu', sans-serif;
font-weight: 500;
font-size: 200%;
display: inline-block;
width: auto;
padding-bottom: 30px;
}

#overview .sub_title {
display: inline-block;
width: auto;
float: right;
}

#overview .copy {
font-weight: 400;
font-size: 130%;
padding-bottom: 30px;
}

#overview .flex33 {
width:calc((100% / 3 ) - 12px - 40px);
margin-bottom: 18px;
padding:20px;
border-radius: 10px;
background: rgba(255,255,255,0.95);
text-align: justify;
}

#overview .flex50 {
width:calc((100% / 2 ) - 12px - 40px);
margin-bottom: 18px;
padding:20px;
border-radius: 10px;
background: rgba(255,255,255,0.95);
text-align: justify;
}

/*** Features ***/
#features {
}

#features figure {
padding:-20px;
margin:-20px 0 0 -20px;
width: calc(100% + 40px);
border-radius: 10px 10px 0 0;
}

#features figure img {
width: 100%;
}

#features .copy {
font-weight: 400;
font-size: 130%;
padding-top:30px;
padding-bottom: 30px;
}

#features .flex33 {
width:calc((100% / 3 ) - 12px - 40px);
margin-bottom: 18px;
padding:20px;
border-radius: 10px;
background: rgba(255,255,255,0.95);
text-align: justify;
}

#features .flex50 {
width:calc((100% / 2 ) - 12px - 40px);
margin-bottom: 18px;
padding:20px;
border-radius: 10px;
background: rgba(255,255,255,0.95);
text-align: justify;
}

/**************************** aside *****************************/
aside {
position: relative;
height: 300px;
}



/**************************** footer *****************************/
footer {
position: relative;
height: 500px;
}