@charset "UTF-8";

/*---------------------------------
RESET CSS
---------------------------------*/
html,body,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,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/*---------------------------------
COMMON
---------------------------------*/
html {
    font-size: 62.5%;
}
body {
	color: #222222;
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size: 1.6em;	
	line-height: 1.6;
}

body:before{
    content:"";
    display:block;
    position:fixed;
    top:0;
    left:0;
    z-index:-1;
    width:100%;
    height:100vh;
    background:url(../images/bg_visual.jpg) center no-repeat;
    background-size:cover;
}

#container {
	width: 1200px;
	margin: 0 auto;
}
a {
	color: #04437c;
}
a:hover {
	color: #999999;
}
a img:hover {
	opacity: 0.6;
}
h2 {
	margin-top: 0.4em;
	margin-bottom: 0.4em;
    color: #000000;
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 2.2em;
    font-weight: lighter;
	letter-spacing: 0.4em;
    line-height: 1.5;
    text-align: center;
    text-decoration: none;
    clear: both;
}
h2 img{
    width: 56%;
    margin: 2em 0 0;
}
h3 {
	margin-top: 2em;
    margin-bottom: 0.5em;
    border-bottom: 1px solid #000000;
    color:#000000;
    font-family: "メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 1.2em;
    font-weight: bold;
	text-decoration: none;
}
p {
	margin: 1em 0;
    letter-spacing: 0.2em;
    line-height: 1.8;
    text-align: center;
}
img {
	vertical-align: bottom;
}
strong {
    font-size: 1.6em;
	font-weight: bold;
	color: #000000;
}
ul,dl {
	margin: 0;
    font-size: 1em;
    letter-spacing: 0.1em;
}
ul li {
	list-style: disc;
}
li {
	list-style:decimal;
}

/*---------------------------------
 GENERIC
---------------------------------*/
.icon {
	width:30px !important;
    margin-top: 0.5em;
}

.cyu{
    font-size: 0.8em;
    letter-spacing: 0.12em;
}

.btnBorder {
    display: inline-block;
    margin: 4em 0;
    padding: 0.6em 9em;
    color: #000000;
    border: solid 1px #000000;
    letter-spacing: 0.3em;
    text-decoration: none;
    transition: .4s;
}

.btnBorder:hover {
  background: #aaaaaa;
  border: solid 1px #aaaaaa;
  color: white;
}

/*---------------------------------
 CONTENTS
---------------------------------*/
.aboutarea, .botanicarea, .designarea, .usagearea{
    margin: 6em 0 2em;
    } 

/*== MOVIE ==*/
.processmovie{
    margin-bottom: 3em;
    text-align: center;
}

/*== ABOUT ==*/
.twoAba {
	margin: 2em 0;
	overflow: hidden;
}
.twoAbaInner {
	width: 92%;
    margin-right: -2%;
    margin-left: 4%;
    text-align: left;
    overflow: hidden;
}
.twoAbaInner div {
	width: 46%;	
	margin-right: 4%;
    margin-bottom: 0;
    float: left;
}
.twoAbaInner p {
    font-size: 0.9em;
    text-align: left;
}

/*== DESIGN ==*/
.twoDes {
	margin: 2em 0;
	overflow: hidden;
}
.twoDesInner {
	width: 70%;
    margin-right: -2%;
    margin-left: 15%;
    text-align: left;
    overflow: hidden;
}
.twoDesInner div {
	width: 36%;
	margin-right: 2%;
    margin-bottom: 0;
    float: left;
}
.twoDesInner div:nth-child(2n+1) {
    width: 60%;	
	margin-right: 2%;
	clear: both;
}
.twoDesInner img {
	width: 100%;
	margin-bottom: 1.25em;
}
.twoDesInner p {
    text-align: left;
}

/*== BOTANIC ==*/
.fourBot {
	margin-bottom: 1em;
    overflow: hidden;
}
.fourBotInner {
	width: 56%;
    margin-top: 1em;
    margin-left: 22%;
    margin-right: -2%;
    overflow: hidden;
}
.fourBotInner div {
	width: 18%;
	margin-right: 7%;
    float: left;
}
.fourBotInner div:nth-child(4n+1) {
	clear: both;
}
.fourBotInner img {
	width: 100%;
	margin-bottom: 0.5em;
}

/*== USAGE ==*/
.usagearea dl {
    width: 68%;
    margin-right: -2%;
    margin-left: 16%; 
    overflow: hidden;
}
.usagearea dt {
    width: 10%;
    margin: 0;
    float: left;
    font-family: 'Roboto',"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
    font-size: 3.6em;
}
.usagearea dd {
    float: left;
    padding-top: 1.2em;
}
.usagearea .comment{
    width: 70%;
} 
.usagearea .imgUsa {
    width: 20%;
}

.usagearea dd img {
    width: 90%; 
}


/*---------------------------------
 HEADER
---------------------------------*/
header {
    height: 60px;
	width: 100%;
}
header h1 {
	padding: 28px 0 10px;
}
header .inner {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}

/*---------------------------------
 FOOTER
---------------------------------*/
footer {
	padding: 1em 0;
	font-size: 0.75em;
	text-align: center;
	clear: both;
}

footer img {
    margin: 2em 1em;
}

/*---------------------------------
 PAGE TOP
---------------------------------*/
.totop {
	position: fixed;
	bottom: 15px;
	right: 17px;
}
.totop a {
	display: block;
	text-decoration: none;
}

/*---------------------------------
 PC1
---------------------------------*/
@media screen and (max-width:1679px) {
	body:before{
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background:url(../images/pad_visual.jpg) center no-repeat;
        background-size:cover;
	}
    h2 img {
        width: 48%;
    }
    
}
/*---------------------------------
 PC2
---------------------------------*/
@media screen and (max-width:1199px) {
	header h1 {
        width: 25%;
        margin-left: 10px;
        padding: 12px 0 18px;

	}
	header .inner {
		width: 100%;
	}
    h2 {
		margin-top: 0.2em;
        font-size: 1.6em;
        letter-spacing: 0.3em;
        line-height: 1.2;
	}
    h2 img {
        width: 54%;
    }
    
    h3{
        margin-top: 1em;
        font-size: 1em; 
    }
    p{
        font-size: .9em;
        letter-spacing: 0.2em;
    }
    #container {
		box-sizing: border-box;
		width: 100%;
		padding: 0 10px;
	}
    .twoAbaInner {
	   width: 94%;
        margin-right: -2%;
        margin-left: 3%;
        text-align: left;
        overflow: hidden;
}
    .twoAbaInner div {
	   width: 45%;	
	   margin-right: 5%;
        margin-bottom: 0;
        float: left;
    }
    .fourBotInner {
	   width: 64%;
        margin-top: 1em;
        margin-left: 18%;
        margin-right: -2%;
        overflow: hidden;
    }
    .usagearea dl {
        width: 78%;
        margin-right: -2%;
        margin-left: 11%; 
        overflow: hidden;
    }
}

/*---------------------------------
 TABLET
---------------------------------*/
@media screen and (max-width:979px) {
    body:before{
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background:url(../images/pad_visual.jpg) center no-repeat;
        background-size:cover;
    }
    h2 img {
        width: 68%;
    }
    video {
        width: 80%;
        height: auto;
    }
    #container {
		box-sizing: border-box;
		width: 100%;
		padding: 0 10px;
	}
    .twoAbaInner p {
        font-size: 0.85em;
    }
    .botanicarea p {
        letter-spacing: 0.1em;
        text-align: left;
    }
    .twoDesInner {
	    width: 82%;
        margin-right: -2%;
        margin-left: 9%;
        text-align: left;
        overflow: hidden;
    }
    .usagearea dl {
        width: 94%;
        margin-right: -2%;
        margin-left: 3%;
        overflow: hidden;
    }
    .usagearea dt {
        width: 9%;
        font-size: 3.4em;
    }
    .usagearea .comment{
        width: 71%;
        font-size: 0.9em;
} 
}

/*---------------------------------
 SP
---------------------------------*/
@media screen and (max-width:767px) {
    body:before{
        content:"";
        display:block;
        position:fixed;
        top:0;
        left:0;
        z-index:-1;
        width:100%;
        height:100vh;
        background:url(../images/sp_visual.jpg) center no-repeat;
        background-size:cover;
}
    
    header h1 {
        margin-bottom: 0;
        padding: 12px 0 0;
    }
    header h1 img {
		width: 110%;
	}
    h2 {
		margin-top: 0.2em;
        font-size: 1.05em;
        letter-spacing: 0.3em;
        line-height: 1.4;
        text-align: left;
	}
    h2 img {
        width: 100%;
    }
    h3{
        font-size: 0.9em; 
    }
    p{
        font-size: .82em;
        letter-spacing: 0.1em;
        text-align: left;
    }
    .aboutarea, .botanicarea, .designarea, .usagearea{
        margin: 3.5em 0.4em 2em;
        text-align: left;
    } 
    .processmovie {
        text-align: left;
    }
    video {
        width: 100%;
        height: auto;
    }
	.twoInner {
		margin-right: 0;
	}
	.twoInner div {
		float: none;
		width: 100%;
	}
    .twoAba, .twoDes {
		margin-top: 0;
        margin-right: 0;
		margin-bottom: 20px;
	}
    .twoAbaInner, .twoDesInner {
		width: 100%;
        margin-right: 0;
        margin-left: 0;
	}
	.twoAbaInner div, .twoDesInner div {
		width: 100%;
		float: none;
    }
    .twoDesInner div:nth-child(2n+1) {
        width: 100%;	
    }
    .fourBot {
		margin-bottom: 20px;
	}
	.fourBotInner {
		width: 100%;
        margin-right: 0;
        margin-left: 0;
	}
	.fourBotInner div {
		width: 42%;
        margin-bottom: 0.9em;
        float: left;
	}
    .usagearea dl {
        width: 100%;
        overflow: hidden;
    }
    .usagearea dt {
        width: 14%;
        margin: 0;
        font-size: 3.2em;
    }
    .usagearea dd {
        float: left;
        padding-top: 1em;
    }
    .usagearea .comment{
        width: 86%;
        float: left;
    } 
    .usagearea .imgUsa {
        margin-left: 14%;
        width: 54%;   
    }
    .usagearea dd img {
        width: 90%; 
    }
    footer {
        width: 72%;
        padding-left: 2em;
        text-align: left;
        font-size: 0.6em;
    }
    .btnBorder {
        margin: 4em 0;
        padding: 0.6em 6em;
        text-align: center;
    }

}