@charset "UTF-8";

@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

/* line-height:1.56; */

* {
    margin:0;
    padding:0;
    line-height:1.0;
}
 
html, body{
    font-family:"Noto Sans Japanese","ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-style:normal;
    font-weight:300;
    font-size:18px;
    -webkit-text-size-adjust: 100%;
  -moz-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
  -o-text-size-adjust: 100%;
  text-size-adjust: 100%;
}


/* ========== row ========== */

.row {
    margin:0 10px;
    width:auto;
 }

.row:after,
.row:before {
    display: table;
    content: " ";
    box-sizing: border-box;
}

.row:after {
    display: table;
    content: " ";
    box-sizing: border-box;
    clear: both;
}


/* ========== header ========= */
    
header {
    width:100%;
}

header .logo-area{
    width:100%;
    margin:0 0 3px 0;
    padding:0;
    position:relative;
    background-color:#476375;
}

header .logo {
    width:960px;
    height:147px;
    position:relative;
    margin:0 auto 0 auto;
    padding:0;
}

header .logo h1{
    width:627px;
    height:56px;
    margin:0;
    padding:25px 0 0 7px;
    line-height:1.0;
}

header .logo h2{
    width:448px;
    height:24px;
    margin:0;
    padding:18px 0 0 9px;
    line-height:1.0;
}

header .logo .img {
    position:absolute;
    top:0;
    right:0px;
    width:374px;
    height:147px;
}

header .logo h1 img,
header .logo h2 img,
header .logo .img img {
    width:100%;
    height:100%;
    padding:0;
}

header .nav {
    background-color:rgba( 255, 255, 255, 1.0 );
    border-top:solid 1px rgba( 185, 167, 125, 1.0 );
    border-bottom:solid 1px rgba( 185, 167, 125, 1.0 );
}

header .nav .global-navigation ul {
    width:960px;
    margin:0 auto;
    text-align:center;
    display:block;
}

header .nav  .global-navigation ul li{
    display:inline-block;
}

header .nav  .global-navigation ul li a{
    display:inline-block;
    margin:0;
    padding:0 30px 0 30px;
    font-size:18px;
    line-height:75px;
}

header .nav  .global-navigation ul li a:link,
header .nav  .global-navigation ul li a:visited{
    color:rgba( 0, 0, 0, 1.0 );
    text-decoration:none;
}

header .nav  .global-navigation ul li a:hover,
header .nav  .global-navigation ul li a:active{
    color:rgba( 35, 62, 79, 1.0 );
    background:rgba( 133, 161, 179, 0.3 );
    text-decoration:none;
}

header .nav  .global-navigation ul li a.active{
    color:rgba( 35, 62, 79, 1.0 );
    background:rgba( 136, 165, 184, 0.1 );
    text-decoration:none;
}

header.fixed {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:227px;
    z-index:1000;
    background:#fff;
    -webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);
    box-shadow:0 1px 3px rgba(0,0,0,.5);
    animation: inout 0.5s;
    animation-iteration-count: 1;
    -webkit-animation: inout 0.5s; /* Safari & Chrome */
    -webkit-animation-iteration-count: 1;
}

@media (min-width: 1245px) {

    header {
        width:100%;
    }
    
    header .logo-area{
        width:100%;
        margin:0 0 3px 0;
        padding:0;
        position:relative;
        background-color:#476375;
    }
    
    header .logo {
        width:1050px;
        height:147px;
        position:relative;
        margin:0 auto 0 auto;
        padding:0;
    }
    
    header .logo h1{
        width:627px;
        height:56px;
        margin:0;
        padding:25px 0 0 7px;
        line-height:1.0;
    }
    
    header .logo h2{
        width:448px;
        height:24px;
        margin:0;
        padding:18px 0 0 9px;
        line-height:1.0;
    }
    
    header .logo .img {
        position:absolute;
        top:0;
        right:-76px;
        width:374px;
        height:147px;
    }
    
    header .logo h1 img,
    header .logo h2 img,
    header .logo .img img {
        width:100%;
        height:100%;
        padding:0;
    }
    
    header .nav {
        background-color:rgba( 255, 255, 255, 1.0 );
        border-top:solid 1px rgba( 185, 167, 125, 1.0 );
        border-bottom:solid 1px rgba( 185, 167, 125, 1.0 );
    }
    
    header .nav .global-navigation ul {
        width:1045px;
        margin:0 auto;
        text-align:center;
        display:block;
    }
    
    header .nav  .global-navigation ul li{
        display:inline-block;
    }
    
    header .nav  .global-navigation ul li a{
        display:inline-block;
        margin:0;
        padding:0 50px 0 50px;
        font-size:18px;
        line-height:75px;
    }
    
    header .nav  .global-navigation ul li a:link,
    header .nav  .global-navigation ul li a:visited{
        color:rgba( 0, 0, 0, 1.0 );
        text-decoration:none;
    }
    
    header .nav  .global-navigation ul li a:hover,
    header .nav  .global-navigation ul li a:active{
        color:rgba( 35, 62, 79, 1.0 );
        background:rgba( 133, 161, 179, 0.2 );
        text-decoration:none;
    }
    
    header .nav  .global-navigation ul li a.active{
        color:rgba( 35, 62, 79, 1.0 );
        background:rgba( 136, 165, 184, 0.3 );
        text-decoration:none;
    }
    
    header.fixed {
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:227px;
        z-index:1000;
        background:#fff;
        -webkit-box-shadow:0 1px 3px rgba(0,0,0,.5);
        box-shadow:0 1px 3px rgba(0,0,0,.5);
        animation: inout 0.5s;
        animation-iteration-count: 1;
        -webkit-animation: inout 0.5s; /* Safari & Chrome */
        -webkit-animation-iteration-count: 1;
    }
}

@keyframes inout {
  0%   { transform: translate(0, -100px); }
  100%   { transform: translate(0, 0); }
}

@-webkit-keyframes inout { /* Safari & Chrome */
   0%   { transform: translate(0, -100px); }
  100%   { transform: translate(0, 0); }
}


/*  ========== main-visual ========= */

#main-visual {
    width:960px;
    height:274px;
    margin:0 auto;
    padding:0;
    position:relative;
}

#main-visual.fixed {
    margin-top:227px;
}

#main-visual .background{
    width:100%;
    height:auto;
    margin:0;
    padding:0;
    position:absolute;
    top:0;
    left:0;
}

#main-visual .background img{
    width:100%;
    height:100%;
}

#main-visual .text {
    position:absolute;
    top:16px;
    left:80px;
    width:336px;
    height:243px;
    background:rgba( 0, 0, 0, 0.7 );
}

#main-visual h1{
    font-size:22px;
    font-weight:400;
    line-height:22px;
    letter-spacing:1px;
    margin:0;
    padding:32px 25px 0 25px;
    color:rgba( 255, 255, 255, 1.0 );
}

#main-visual p{
    font-size:15px;
    font-weight:300;
    line-height:24px;
    margin:0;
    padding:24px 25px 0 25px;
    color:rgba( 255, 255, 255, 1.0 );
}

@media (min-width: 1245px) {

    #main-visual {
        width:1245px;
        height:355px;
        margin:0 auto;
        padding:0;
        position:relative;
    }
    
    #main-visual.fixed {
        margin-top:227px;
    }
    
    #main-visual .background{
        width:100%;
        height:auto;
        margin:0;
        padding:0;
        position:absolute;
        top:0;
        left:0;
    }
    
    #main-visual .background img{
        width:100%;
        height:100%;
    }
    
    #main-visual .text {
        position:absolute;
        top:55px;
        left:140px;
        width:336px;
        height:243px;
        background:rgba( 0, 0, 0, 0.7 );
    }
    
    #main-visual h1{
        font-size:22px;
        font-weight:400;
        line-height:22px;
        letter-spacing:1px;
        margin:0;
        padding:32px 25px 0 25px;
        color:rgba( 255, 255, 255, 1.0 );
    }
    
    #main-visual p{
        font-size:15px;
        font-weight:300;
        line-height:24px;
        margin:0;
        padding:24px 25px 0 25px;
        color:rgba( 255, 255, 255, 1.0 );
    }
    
}

/* ========== concept =========== */

#concept {
    width:100%;
    margin:0 auto;
    padding:79px 0 207px 0;
}

#concept h1{
    text-align:center;
    font-size:36px;
    max-height: 100%;
    line-height:36px;
    padding-bottom:10px;
}

#concept h1 img {
    width:100%;
    height:100%;
}

#concept p {
    width:965px;
    margin:0 auto;
    text-align:left;
    font-size:18px;
    line-height:30px;
    padding:40px 0 0 0;
    font-weight:200;
}

#concept p.sign{
    text-align:right;
}
    


 /* =========== profile =========== */
    
#profile {
    width:960px;
    margin:0 auto;
}

#profile .img-1 {
    width:960pxx;
    margin:0 auto;
}

#profile .img-1 img {
    width:100%;
    height:auto;
}

#profile h1 {
    text-align:center;
    font-size:36px;
    font-weight:500;
    line-height:36px;
    max-height: 100%;
    padding:53px 0 10px 0;
    letter-spacing:5px;
}   

#profile .text {
    width:680px;
    margin:0 auto;
    padding:60px 0 0 0;
}

#profile .text  p {
    text-align:left;
    font-size:18px;
    line-height:30px;
    max-height: 100%;
    padding:0;
    font-weight:200;
}

#profile .text  h2 {
    text-align:left;
    font-size:18px;
    max-height: 100%;
    line-height:30px;
    padding:40px 0 0 0;
    font-weight:500;
}

 #profile .text  h3 {
    text-align:left;
    font-size:18px;
    line-height:30px;
    max-height: 100%;
    padding:0;
    font-weight:200;
}

#profile .text  dl {
    text-align:left;
    font-size:18px;
    line-height:30px;
    padding:0 0 0 35px;
    font-weight:200;
}

#profile .text  dt {
    width:60px;
    text-align:left;
    font-size:18px;
    line-height:30px;
    padding:0;
    font-weight:200;
    list-style:disc;
    display:list-item;
    float:left;
}

#profile .text  dl.no-dt dt {
    width:1px;
}

#profile .text  dd {
    width:524px;
    text-align:left;
    font-size:18px;
    line-height:30px;
    padding:0;
    font-weight:200;
    float:right;
}

#profile .text  dl.no-dt dd {
    float:left;
    width:540px;
}

#profile .text  p.txt-01 {
    padding-left:42px;
}

 #profile .text  ul {
    padding:0 0 0 45px;
    max-height: 100%;
}

#profile .text  ul li{
    font-size:18px;
    line-height:30px;
    font-weight:200;
    max-height: 100%;
}

#profile .text-2 {
    width:965px;
    margin:0 auto;
    padding:20px 0 0 0;
}

#profile .text-2  h2 {
    text-align:left;
    font-size:18px;
    line-height:30px;
    padding:40px 0 0 0;
    font-weight:500;
}

#profile .text-2  p {
    text-align:left;
    font-size:18px;
    line-height:30px;
    padding:0;
    font-weight:200;
}

#profile .img-2  {
    width:458px;
    height:298px;
    margin: 0 auto;
    padding:120px 0 110px 0;
}

#profile .img-2  img{
    width:100%;
    height:auto;
}
    
@media (min-width: 1245px) {
    
    #profile {
        width:1245px;
        margin:0 auto;
    }
    
    #profile .img-1 {
        width:1245px;
        margin:0 auto;
    }
    
    #profile .img-1 img {
        width:100%;
        height:auto;
    }
    
    #profile h1 {
        text-align:center;
        font-size:36px;
        font-weight:500;
        line-height:36px;
        padding:53px 0 10px 0;
        letter-spacing:5px;
    }   
    
    #profile .text {
        width:680px;
        margin:0 auto;
        padding:60px 0 0 0;
    }
    
    #profile .text  p {
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:0;
        font-weight:200;
    }
    
    #profile .text  h2 {
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:40px 0 0 0;
        font-weight:500;
    }
    
     #profile .text  h3 {
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:0;
        font-weight:200;
    }
    
    #profile .text  dl {
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:0 0 0 35px;
        font-weight:200;
    }
    
    #profile .text  dt {
        width:60px;
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:0;
        font-weight:200;
        list-style:disc;
        display:list-item;
        float:left;
    }
    
    #profile .text  dl.no-dt dt {
        width:1px;
    }
    
    #profile .text  dd {
        width:524px;
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:0;
        font-weight:200;
        float:right;
    }
    
    #profile .text  dl.no-dt dd {
        float:left;
        width:540px;
    }
    
    #profile .text  p.txt-01 {
        padding-left:42px;
    }
    
     #profile .text  ul {
        padding:0 0 0 45px;
    }
    
    #profile .text  ul li{
        font-size:18px;
        line-height:30px;
        font-weight:200;
    }
    
    #profile .text-2 {
        width:965px;
        margin:0 auto;
        padding:20px 0 0 0;
    }
    
    #profile .text-2  h2 {
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:40px 0 0 0;
        font-weight:500;
    }
    
    #profile .text-2  p {
        text-align:left;
        font-size:18px;
        line-height:30px;
        padding:0;
        font-weight:200;
    }
    
    #profile .img-2  {
        width:458px;
        height:298px;
        margin: 0 auto;
        padding:120px 0 110px 0;
    }
    
    #profile .img-2  img{
        width:100%;
        height:auto;
    }
}

 /* =========== works =========== */
    
    #works{
        padding:0;
    }
    
    #works h1 {
        text-align:center;
        font-size:36px;
        line-height:96px;
        max-height: 100%;
        background:rgba( 0, 0, 0, 1.0 );
        font-weight:500;
        color:rgba( 255, 255, 255, 1.0 );
    }
    
    #works h2 {
        text-align:center;
        font-size:36px;
        font-weight:500;
        line-height:36px;
        max-height: 100%;
        padding:75px 0 40px 0;
    }
    
     #works h2.head-2 {
        padding:190px 0 30px 0;
    }
    
    #works h2.head-3 {
        padding:110px 0 0px 0;
    }
    
    #works p.link {
        text-align:center;
        font-size:18px;
        line-height:30px;
        padding:0 0 15px 0;
        font-weight:200;
    }
    
    #works p {
        padding-top:60px;
        text-align:center;
        max-height: 100%;
    }
    
    #works p.text{
        text-align:center;
        font-size:18px;
        line-height:30px;
        padding:30px 0 100px 0;
        font-weight:200;
    }
    
    #works #w001 img { width:424px; height:617px; }
    #works #w023 img { width:628px; height:474px; }
    #works #w024 img { width:432px; height:600px; }
    #works #w040 img { width:591px; height:431px; }
    #works #w041 img { width:611px; height:430px; }
    #works #w065 img { width:616px; height:457px; }
    #works #w066 img { width:616px; height:462px; }
    #works #w088 img { width:619px; height:450px; }
    #works #r001 img { width:336px; height:623px; }
    #works #r002 img { width:300px; height:548px; }
    #works #r003 img { width:312px; height:608px; }
    #works #h001 img { width:640px; height:480px; }
}


 /* =========== works =========== */
    
    #purchase{
        
    }
    
    #purchase h1 {
        text-align:center;
        font-size:36px;
        font-weight:500;
        line-height:36px;
        max-height: 100%;
        padding:130px 0 30px 0;
    }
    
    #purchase h2 {
        text-align:center;
        font-size:24px;
        font-weight:500;
        line-height:36px;
        max-height: 100%;
        padding:110px 0 0 0;
    }
    
    #purchase h2.head-2 {
        padding:60px 0 0 0;
    }
    
    #purchase h2.head-3 {
        padding:90px 0 0 0;
    }
    
    #purchase p {
        text-align:center;
        font-size:18px;
        line-height:30px;
        padding:30px 0 0 0;
        font-weight:200;
        max-height: 100%;
    }
    
    #purchase p.notice {
        padding-top:60px;
        padding-bottom:150px;
    }
    
    #purchase #a001 {
        padding-top:85px;
    }
    
    #purchase #a001 img { width:408px; height:303px; }
    

 /* =========== footer =========== */
 
   footer {
       background:rgba( 0, 0, 0, 1.0 );
   }
 
   footer h1{
       text-align:center;
        font-size:30px;
        font-weight:500;
        line-height:150px;
        max-height: 100%;
        padding:0;
        color:rgba( 255, 255, 255, 1.0);
   }
   
    footer .info {
        width:712px;
        margin:0 auto 63px auto;
        padding:75px 108px 46px 142px;
        background:rgba( 255, 255, 255, 1.0 );
    }
    
    footer .info h3{
        font-size:18px;
        font-weight:400;
        padding-bottom:20px;
    }
    
     footer .info .logo h2{
         width:307px;
         height:58px;
         margin:0;
         float:left;
     }
     
     footer .info .logo p.img-01{
         width:331px;
         height:83px;
         margin:0;
         float:right;
         padding-bottom:10px;
     }
     
     footer .logo h2 img,
     footer .logo .img-01 img{
        width:100%;
        height:auto;
     }
    
     footer .info .notice {
         font-size:18px;
         line-height:30px;
         font-weight:600;
         text-align:center;
         padding:60px 0 0 0;
     }
     
     footer .info p.link {
         font-size:18px;
         line-height:30px;
         text-align:center;
         padding:30px 0 0 0;
     }
    
    footer address {
        background:rgba( 100, 91, 71, 1.0 );
        text-align:center;
        font-style:normal;
        color:rgba( 255, 255, 255, 1.0);
        font-size:12px;
        line-height:41px;
        max-height: 100%;
        letter-spacing:1px;
    }


/* ========== loading =========== */

#loader {
    position:absolute;
    top:50%;
    left:50%;
    margin:-70px 0 0 -60px;
    width:120px;
    height:95px;
    background:#fff;
    padding:10px 10px 20px 10px;
    border-radius:7px;
    box-shadow:0 0 3px 1px rgba(0,0,0,0.5);
}

#loader-circles{
	position:relative;
	width:74px;
	height:74px;
	margin:auto;
	transform:scale(0.6);
		-o-transform:scale(0.6);
		-ms-transform:scale(0.6);
		-webkit-transform:scale(0.6);
		-moz-transform:scale(0.6);
}

#loader-text {
    font-size:16px;
}

.f-circle{
	position:absolute;
	background-color:rgb(255,255,255);
	height:13px;
	width:13px;
	border-radius:7px;
		-o-border-radius:7px;
		-ms-border-radius:7px;
		-webkit-border-radius:7px;
		-moz-border-radius:7px;
	animation-name:f_fade;
		-o-animation-name:f_fade;
		-ms-animation-name:f_fade;
		-webkit-animation-name:f_fade;
		-moz-animation-name:f_fade;
	animation-duration:1.2s;
		-o-animation-duration:1.2s;
		-ms-animation-duration:1.2s;
		-webkit-animation-duration:1.2s;
		-moz-animation-duration:1.2s;
	animation-iteration-count:infinite;
		-o-animation-iteration-count:infinite;
		-ms-animation-iteration-count:infinite;
		-webkit-animation-iteration-count:infinite;
		-moz-animation-iteration-count:infinite;
	animation-direction:normal;
		-o-animation-direction:normal;
		-ms-animation-direction:normal;
		-webkit-animation-direction:normal;
		-moz-animation-direction:normal;
}

#frotate-01{
	left:0;
	top:30px;
	animation-delay:0.45s;
		-o-animation-delay:0.45s;
		-ms-animation-delay:0.45s;
		-webkit-animation-delay:0.45s;
		-moz-animation-delay:0.45s;
}

#frotate-02{
	left:9px;
	top:9px;
	animation-delay:0.6s;
		-o-animation-delay:0.6s;
		-ms-animation-delay:0.6s;
		-webkit-animation-delay:0.6s;
		-moz-animation-delay:0.6s;
}

#frotate-03{
	left:30px;
	top:0;
	animation-delay:0.75s;
		-o-animation-delay:0.75s;
		-ms-animation-delay:0.75s;
		-webkit-animation-delay:0.75s;
		-moz-animation-delay:0.75s;
}

#frotate-04{
	right:9px;
	top:9px;
	animation-delay:0.9s;
		-o-animation-delay:0.9s;
		-ms-animation-delay:0.9s;
		-webkit-animation-delay:0.9s;
		-moz-animation-delay:0.9s;
}

#frotate-05{
	right:0;
	top:30px;
	animation-delay:1.05s;
		-o-animation-delay:1.05s;
		-ms-animation-delay:1.05s;
		-webkit-animation-delay:1.05s;
		-moz-animation-delay:1.05s;
}

#frotate-06{
	right:9px;
	bottom:9px;
	animation-delay:1.2s;
		-o-animation-delay:1.2s;
		-ms-animation-delay:1.2s;
		-webkit-animation-delay:1.2s;
		-moz-animation-delay:1.2s;
}

#frotate-07{
	left:30px;
	bottom:0;
	animation-delay:1.35s;
		-o-animation-delay:1.35s;
		-ms-animation-delay:1.35s;
		-webkit-animation-delay:1.35s;
		-moz-animation-delay:1.35s;
}

#frotate-08{
	left:9px;
	bottom:9px;
	animation-delay:1.5s;
		-o-animation-delay:1.5s;
		-ms-animation-delay:1.5s;
		-webkit-animation-delay:1.5s;
		-moz-animation-delay:1.5s;
}



@keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-o-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-ms-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-webkit-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}

@-moz-keyframes f_fade{
	0%{
		background-color:rgb(0,0,0);
	}

	100%{
		background-color:rgb(255,255,255);
	}
}