/**********************
	Elemment
**********************/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
    font-family: 'Noto Sans Japanese', serif;
    font-weight: 100;
    min-width: 1000px;
}
#sp-nav{
    display: none;
}
.sp{
    display: none;
}
.inner{
    width: 90%;
    margin: 0 auto;
}
#contents01 {
    background: url(../images/main_bg02.jpg) no-repeat top right;
    background-attachment: fixed;
    position: relative;
}
#contents01 h1 {
    position: absolute;
    left: 5%;
    top: 15%;
    font-size: 42px;
    font-weight: 100;
    color: #2a2a2a;
    letter-spacing: 4px;
}
#nav{
    position: absolute;
    top: 50%;
    left: 5%;
    text-align: left;
}
#nav li{
    margin-bottom: 30px;
    display: inline-block;
    margin: 0 10px; 
}
#nav li a {
    font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    font-weight: 100;
    color: #addb2c;
    border: solid 1px #addb2c;
    display: block;
    width: 100px;
    height: 100px;
    background: #fff;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
#nav li a:hover{
    background: #addb2c;
    color: #fff;
}
.word1 span.char1{
    color: #addb2c;
}
.word2 span.char1{
    color: #a2bb29;
}
.word3 span.char1{
    color: #de4eb6;
}

#contents02 {
    padding: 100px 0 200px;
    background: url(../images/bottom_bg.png) repeat-x bottom;
}
#contents02 h2{
    font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    font-size: 62px;
    color: #666;
    margin-bottom: 100px;
}
#contents03{
    background: #addb2c;
    padding: 100px 0;
}
#contents03 h2{
    font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    font-size: 62px;
    color: #fff;
    margin-bottom: 100px;
}
#contents03 dl {
    width: 500px;
    margin: 30px auto;
    text-align: center;
    border-top: 1px solid #c8e27f;
    box-shadow: 0px -1px 0px #a7d429;
    padding-top: 30px;
}
#contents03 dl:first-child{
    border-top: none;   
}
#contents03 dt{
    margin-bottom: 35px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
}
#contents03 dd{
    margin-bottom: 35px;
    color: #fff;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 2px;
}
#contents03 dd a{
    color: #fff;
}
#footer{
    text-align: center;
    padding: 30px;
}
/*--animation--*/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/**********************
　レスポンシブコンテンツ
**********************/
.col-5 {
    width: 38%;
    padding: 0px 6%;
    float: left;
    text-align: center;
}
.col-5 h3 {
    font-weight: 100;
    font-size: 28px;
    color: #666;
    margin-bottom: 45px;
    letter-spacing: 3px;
}
.col-5 p{
    line-height: 48px;
    font-size: 20px;
    letter-spacing: 2px;
}
.col-10 {
    width: 100%;
    text-align: center;
}
.col-10 h3 {
    font-weight: 100;
    font-size: 28px;
    color: #666;
    margin-bottom: 45px;
    letter-spacing: 3px;
}
.col-10 p {
    line-height: 48px;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 100;
}

.helloWorld_area {
position: relative;
    margin: 150px 0;
}

.helloWorld01 {
position: absolute;
top: 0;
left: 20px;
}

.helloWorld02 {
position: absolute;
top: 20px;
left: 140px;
}

.helloWorld03 {
position: absolute;
top: 0;
left: 260px;
}

#top a{
    display: block;
    color: #addb2c;
    position: fixed;
    right: 5%;
    bottom: 25px;
    background: #fff;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    text-align: center;
    line-height: 100px;
    font-size: 24px;
}


/*--スマホ用スタイル--*/
@media screen and (min-width:320px) and ( max-width: 767px) {

/**********************
    Elemment
**********************/
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);
body{
    font-family: 'Noto Sans Japanese', serif;
    font-weight: 100;
    min-width: 0;
}
.sp{
    display: block;
}
.pc{
    display: none;
}
#sp-nav{
    display: block;
}
#nav{
    display: none;
}
.inner{
    width: 90%;
    margin: 0 auto;
}
#contents01 {
    background: url(../images/main_bg02.jpg) no-repeat top right;
    background-attachment: fixed;
    position: relative;
}
#contents01 h1 {
    position: absolute;
    left: 5%;
    top: 15%;
    font-size: 42px;
    font-weight: 100;
    color: #2a2a2a;
    letter-spacing: 4px;
    text-align: center;
    line-height: 62px;
}
#sp-nav{
    letter-spacing: -.40em;
    position: absolute;
    top: 50%;
    left: 5%;
    text-align: center;
}
#sp-nav li {
    letter-spacing: normal;
    margin-bottom: 30px;
    display: inline-block;
    margin: 0 5px;
}
#sp-nav li a {
    font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    font-size: 16px;
    font-weight: 100;
    color: #ffffff;
    border: solid 1px #addb2c;
    display: block;
    width: 100px;
    height: 100px;
    background: #b0db35;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;
}
#nav li a:hover{
    background: #addb2c;
    color: #fff;
}
.word1 span.char1{
    color: #addb2c;
}
.word2 span.char1{
    color: #a2bb29;
}
.word3 span.char1{
    color: #de4eb6;
}

#contents02 {
    padding: 100px 0 200px;
    background: url(../images/bottom_bg.png) repeat-x bottom;
}
#contents02 h2{
    font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    font-size: 42px;
    color: #666;
    margin-bottom: 100px;
}
#contents03{
    background: #addb2c;
    padding: 100px 0;
}
#contents03 h2{
    font-family: Quicksand, 游ゴシック体, "Yu Gothic", YuGothic, "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", メイリオ, Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-align: center;
    font-size: 42px;
    color: #fff;
    margin-bottom: 100px;
}
#contents03 dl {
    width: 100%;
    margin: 30px auto;
    text-align: center;
    border-top: 1px solid #c8e27f;
    box-shadow: 0px -1px 0px #a7d429;
    padding-top: 30px;
}
#contents03 dl:first-child{
    border-top: none;   
}
#contents03 dt{
    margin-bottom: 35px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 2px;
}
#contents03 dd{
    margin-bottom: 35px;
    color: #fff;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 2px;
}
#contents03 dd a{
    color: #fff;
}
#footer{
    text-align: center;
    padding: 30px;
}
/*--animation--*/
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}
@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(-100px); -ms-transform: translateY(-100px); transform: translateY(-100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}

.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(100px); -ms-transform: translateY(100px); transform: translateY(100px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/**********************
　レスポンシブコンテンツ
**********************/
.col-5 {
    width: 38%;
    padding: 0px 6%;
    float: left;
    text-align: center;
}
.col-5 h3 {
    font-weight: 100;
    font-size: 28px;
    color: #666;
    margin-bottom: 45px;
    letter-spacing: 3px;
}
.col-5 p{
    line-height: 48px;
    font-size: 20px;
    letter-spacing: 2px;
}
.col-10 {
    width: 100%;
    text-align: center;
}
.col-10 h3 {
    font-weight: 100;
    font-size: 28px;
    color: #666;
    margin-bottom: 45px;
    letter-spacing: 3px;
}
.col-10 p {
    line-height: 48px;
    font-size: 16px;
    letter-spacing: 2px;
    font-weight: 100;
}

.helloWorld_area {
position: relative;
    margin: 150px 0;
}

.helloWorld01 {
position: absolute;
top: 0;
left: auto;
}

.helloWorld02 {
position: absolute;
top: 20px;
left: auto;
}

.helloWorld03 {
position: absolute;
top: 0;
left: auto;
}

#top a {
    display: block;
    color: #addb2c;
    position: fixed;
    right: 2%;
    bottom: 50px;
    background: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    text-align: center;
    line-height: 50px;
    font-size: 14px;
}
}