@charset "UTF-8";
html,body,div,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,pre,form,p,blockquote,fieldset,input { margin: 0; padding: 0; }

@font-face {
font-family: copper;
src: url('Copperplate.ttc') format("truetype");
}

body{
	font-family: Lato,'Noto Sans CJK JP Light','Yu Gothic Light','Hiragino Sans',Arial,sans-serif;
	line-height:1.6em;
	color:#000;
	font-size:100%;
	background:#fff;
	text-align: center;
}
.clear{
	clear:both;
}
.clearfix:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
.clearfix {
/*\*//*/
	overflow: hidden;
	/**/
}
img{
max-width: 100%;
height: auto;
}

.copper{
font-family: copper;
}

#screen{
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
background-image:url(../img_h/screen_bg.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
text-align: center;
}
#screen #title{
z-index: 98;
margin: auto;
width: 100%;
position: relative;
  top: 40%;
  -webkit-transform: translateY(-40%);
  transform: translateY(-40%);
}
#screen #title h1{
width: 90%;
max-width: 1309px;
margin: auto;
padding-bottom: 4vh;
}
#screen #title h1 img.forpc{
display: block;
}
#screen #title h1 img.forsp{
display: none;
}
#screen #title h2{
width: 60%;
max-width: 480px;
margin: auto;
}
#screen #title h2 a{
text-decoration: none;
}

h3.chapter{
font-family: copper;
font-size:42px;
line-height: 1em;
padding-bottom: 1em;
text-align: center;
}
h4{
font-size: 18px;
line-height: 1em;
padding-bottom: 1em;
}
h3.chapter.comparison{
padding-bottom: 0.25em;
}
h4.comparison{
padding-bottom: 2em;
}
p {
    font-size: .875rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
}
.intake_blue{
color: #158a9f;
}
.quote{
padding-left: 4em;
font-style: italic;
}

.row{
padding-top: 50px;
margin: auto;
width: 90%;
max-width: 1000px;
border-bottom: #d6dfe0 solid 1px;
padding-bottom: 40px;
}
.row:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}

#footer{
font-family: Arial, Helvetica, "sans-serif";
font-size: 14px;
padding: 15px 0;
}

/* STORY */
.col-text{
float: left;
width: 55%;
text-align: left;
padding-right: 2em;
box-sizing: border-box;
}
.col-img{
float: right;
width: 40%;
padding: 20px;
box-sizing: border-box;
}



/* CONCEPT */
#concept{
}
#concept_logo{
text-align: center;
padding:0px 0  45px;
}
#concept_logo .logo{
display: inline-block;
width: 40%;
max-width: 320px;
margin: 0 4%;
}
#concept p{
    margin-bottom: 0.5rem;
}


/* APPLECATION */
#application_icon{
text-align: center;
}
#application_icon .icon{
display: inline-block;
width: 20%;
margin: 0 2% 10px;;
vertical-align: top;
}
#application_icon .icon h5{
font-size: 16px;
line-height: 1em;
padding-bottom: 1em;
}
#application_icon .icon p{
text-align: left;
line-height: 1.5em;
text-align: justify;
}
#application_icon .icon p.icon_image{
text-align: center;
width: 40%;
margin: auto;
padding-bottom: 0.25em;
}


/* EXPERIENCE */
#experience{
text-align: center;
}
.experience_box{/*
display: inline-block;
width: 29%;
margin: 0 1.5% 0;
text-align: left;
vertical-align: top;*/
padding-bottom:20px;
}

.experience_box:after {
	height: 0;
	visibility: hidden;
	content: ".";
	display: block;
	clear: both;
}
.experience_box h4{
font-size: 18px;
line-height: 24px;
}
.experience_box p{
text-align: justify;
line-height: 1.5em;
margin-bottom: 1em;
padding-left:1em;
text-indent:-1em;
}
.exp_title{
height: 70px;
}
.sml80{
font-size: 80%;
}
.exp-text{
float: left;
width: 55%;
text-align: left;
box-sizing: border-box;
}
.exp-pic{
float: right;
width: 40%;
padding: 0 20px;
box-sizing: border-box;
}


/* PRODUCT */
#product{}

#product table{
box-sizing: border-box;
width: 100%;
border-top: solid 1px #b1b1b1;
border-left: solid 1px #b1b1b1;
}
#product td{
box-sizing: border-box;
border-bottom: solid 1px #b1b1b1;
border-right: solid 1px #b1b1b1;
    font-size: .875rem;
	padding: 3px 0 3px 15px;
}
#product td.title{
background: url(../img/td_bg.gif);
text-align: center;
}
.product-img{
float: right;
width: 40%;
padding: 0 10px;
box-sizing: border-box;
}


/* OPERATION */



/* LINEUP */
.lineup_box{
display: inline-block;
width: 24%;
margin: 0 0.25% 10px;
vertical-align: top;
}
.lineup_box{
padding-bottom: 15px;
}
.lineup_box h5{
font-size: initial;
font-size: 16px
line-height: 1.25em;
padding-bottom: 0.5em;
}
.lineup_box p{
margin-bottom: 0;
}
.lineup_box p.lineup_logo{
width: 70%;
margin-left: 20%;
padding-bottom: 10px;
}
.lineup_box p.cc{
line-height: 1.25em;
border-bottom: #b1b1b1 solid 1px;
width: 80%;
margin: auto;
padding-bottom: 5px;
margin-bottom: 5px;
}
.stream{
font-size: 140%;
font-family: copper;
color: #e50000;
}
.magnum{
font-size: 140%;
font-family: copper;
color: #b9b024;
}
.grande{
font-size: 140%;
font-family: copper;
color: #8a24b9;
}





/* COMPARISON */
#comparison{}

#comparison table{
box-sizing: border-box;
width: 100%;
border-top: solid 1px #b1b1b1;
border-left: solid 1px #b1b1b1;
}
#comparison td{
box-sizing: border-box;
border-bottom: solid 1px #b1b1b1;
border-right: solid 1px #b1b1b1;
font-size: .875rem;
padding: 5px;
vertical-align: middle;
}
#comparison td.title{
background: url(../img/td_bg.gif);
text-align: center;
}
.comparison_sp{
display: none;
}



/* OPERATION */
.operation_box{
display: inline-block;
width: 45%;
margin: 2%;
vertical-align: top;
text-align: left;
padding-bottom: 20px;
border: solid 1px #A4CDE2;
padding: 25px;
box-sizing: border-box;
}
#notes h3.chapter{
font-size: 32px;
padding-bottom: 0.5em;
}
#notes h4{
padding: 0.75em 0;
}
.operation_box p{
padding-left:1em;
text-indent:-1em;
line-height: 1.55em;
margin-bottom: 0.5em;
}
#notes.row{
border-bottom: 0;
}
.btn_graf{
width: 80%;
margin: auto;
}


/* BUTTON */

#button .button{
display: inline-block;
width: 45%;
margin: 2%;
vertical-align: top;
text-align: center;
box-sizing: border-box;
  padding: 0 0;
  font-size: 120%;
  line-height: 60px;
  text-decoration: none;
  color: #fff;
  border: solid 1px #0d335e;
  border-radius: 5px;
  transition: .4s;
  background-image: linear-gradient(#035eab 0%, #0057b9 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.3);
	position: relative;
}

#button .button a{
text-decoration: none;
display: block;
color: #fff;
}
#button .button:hover{
opacity: 0.8;
}


.arrow-down {
display: inline-block;
width: 2.75rem;
height: 2.75rem;
line-height: 44px;
position: absolute;
bottom: 2.125rem;
left: 50%;
margin-left: -1.375rem;
cursor: pointer;
z-index: 8;
text-align: center;
-webkit-transition: opacity 250ms ease-in-out;
transition: opacity 250ms ease-in-out;
-webkit-animation-delay: 1s;
animation-delay: 1s;
-webkit-animation: bounce 800ms ease 1s infinite;
animation: bounce 800ms ease 1s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-5px);}
}
.arrow-down a{
display: block;
}

.back-to-top {
    position: fixed;
    bottom: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: block;
    background-color: #383838;
    color: #fff;
    text-align: center;
	display:none;
	cursor: pointer;
}

.back-to-top img{
width: 70%;
padding-top: 15%;
}


@media  screen and (max-width: 800px){
.col-text{
float: none;
width: 100%;
padding: 0;
}
.col-img{
float: none;
width: 60%;
max-width: 360px;
padding: 0px;
box-sizing: border-box;
margin: auto;
}
.quote{
padding-left: 0;
text-align: center;
}

.row{
padding-top: 60px;
}
#application_icon .icon{
display: inline-block;
width: 28%;
margin: 0 2% 10px;;
vertical-align: top;
}

.exp-text{
float: none;
width: 100%;
text-align: left;
box-sizing: border-box;
}
.exp-pic{
float: none;
width: 70%;
max-width: 360px;
padding: 0px;
padding-top: 15px;
box-sizing: border-box;
margin: auto;
}
.experience_box p{
text-align: justify;
line-height: 1.5em;
margin-bottom: 0.5em;
padding-left:1em;
text-indent:-1em;
}

.product-img{
float: none;
width: 80%;
max-width: 480px;
padding: 0 0;
padding-top: 40px;
margin: auto;
box-sizing: border-box;
}
.lineup_box{
display: inline-block;
width: 45%;
margin: 0 2% 30px;
vertical-align: top;
}
.lineup_box p.lineup_logo{
width: 80%;
margin-left: 16%;
padding-bottom: 10px;
}

#operation.row{
padding-top: 30px;
}
#operation h3.chapter{
text-align: left;
}
.operation_box{
display: block;
width: 100%;
margin: auto;
vertical-align: top;
text-align: left;
margin-top: 20px;
}
#operation h4{
font-size: 92.5%;
padding-bottom: 0.25em;
}
.operation_box p{
margin-bottom: 0.25em;
}
.btn_graf{
width: 70%;
margin: auto;
}
}

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

#screen #title h1 img.forpc{
display: none;
}
#screen #title h1 img.forsp{
display: block;
}

h3.chapter{
font-family: copper;
font-size:36px;
line-height: 1em;
padding-bottom: 1em;
text-align: center;
}
#concept_logo .logo{
display: block;
width: 70%;
max-width: 320px;
margin: 0 auto;
}
#concept p{
text-align: left;
padding-left:1em;
text-indent:-1em;
}
#application_icon .icon{
display: inline-block;
width: 40%;
margin: 0 4% 10px;;
vertical-align: top;
}
#application_icon .icon p.icon_image{
text-align: center;
width: 30%;
margin: auto;
padding-bottom: 0.25em;
}
.comparison_sp{
display: block;
}
.comparison_pc{
display: none;
}
.comparison_sp .table_sp{
margin-bottom: 12px;
}
.comparison_sp .table_sp td.sp_title{
width: 160px;
}
}

@media  screen and (max-width: 680px){
#button .button{
display: block;
width: 90%;
margin: 0;
margin: auto;
margin-bottom: 20px;
box-sizing: border-box;
  padding: 0 0;
  font-size: 120%;
  line-height: 60px;
}
}
@media  screen and (max-width: 500px){

.arrow-down {
bottom: 4rem;
}
}