@charset "utf-8";
body{
    font-family: 'Oswald', sans-serif;
    /*text-transform: uppercase;*/
    letter-spacing: 0.1em;
    font-size:1rem;
    line-height:1.85;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-text-size-adjust: 100%; 
    word-wrap: break-word;
    overflow-wrap: break-word;
}
html {
    font-size: 62.5%;
    /*16px * 62.5% = 10px*/
}

p{
    font-size: 1.6rem;
    line-height: 1.5;
    /*10px * 1.6 = 16px*/
}
nav{
    font-size: 1.3rem;
}
/*========= レイアウトのためのCSS ===============*/
/* header */

#header h1 a{
    color: #ddd;
}

#header h1{
    text-transform: uppercase;
    font-size: 1.5rem;
    padding: 0 0 0 2%; 
    line-height: 1;
    white-space: nowrap;
}

@media screen and (max-width:960px){
  #header h1{
    position: absolute;
      /*top:22px;*/
      left:20px;
      padding: 0;
    }
}

.scrolldown1 span {
    transform: rotate(-90deg);
    text-transform:uppercase;
    left: -23px;
    top: -31px;
}



/*==================================================
/*印象編　6-3　スクロールすると画面分割した左右がそれぞれ動く*/
/*===================================*/
/*全体のエリア設定*/

.ms-section{
    color:#fff;
    padding:20px;
}

.ms-section a{
    color:#fff;
}

h1{
    font-size: 4.8rem;
    z-index: 999;
    /*letter-spacing: 0.1em;
    width:10em;*/
}

@media screen and (max-width:768px){
 h1{
    font-size: 3.2rem;
    }
}


h2{
    font-size:3.2rem;
    margin:0 0 20px 0;
    text-align: center;
}

p{
    margin:0 0 20px 0;
}

/*右にある丸ナビゲーション色*/

#multiscroll-nav span{
    background:transparent!important;
    border-color:#fff!important;
}

/*右にある丸のナビゲーション現在地色*/

#multiscroll-nav li .active span{
    background:#fff!important;
}

/*右上のナビゲーション*/

#menu li {
    display:inline-block;
    margin: 10px;
}

#menu li a{
    text-decoration:none;
    color: #fff;
    padding: 5px 10px;
    display:block;
    border-radius: 10px;
}

#menu li.active a{
    color: #666;
}


/*左右エリア画像設定*/
#left1{
    background:url("../img/main-left.jpg") no-repeat center right;
    background-size:cover;
}
#right1{
    background:url("../img/main-right.jpg") no-repeat center left;
    background-size:cover;
}

#right2{
    background:url("../img/02.jpg") no-repeat center;
    background-size:cover;
}

#right3{
    background:url("../img/03.jpg") no-repeat center;
    background-size:cover;
}

#right4{
    background:url("../img/04.jpg") no-repeat center;
    background-size:cover;
}

#right5{
    background:url("../img/05.jpg") no-repeat center;
    background-size:cover;
}

#right6{
    background:url("../img/06.jpg") no-repeat center;
    background-size:cover;
}
#right7{
    background:url("../img/07.jpg") no-repeat center;
    background-size:cover;
}

.sp-bottom{
    filter: drop-shadow(0px 0px 30px rgba(0, 0, 0, .75));
}
p.copylight{
text-align: center;}
/*＝＝＝＝＝＝＝＝＝＝＝タブレット以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

@media screen and (max-width:768px){
    
#header{
    justify-content: center;
}

/*全体のボックスについている余白をリセット*/
.ms-section{
    padding:0;
}

/*天地中央になっている見せ方を上ぞろえに上書き*/
.ms-tableCell{
    vertical-align:top;
}

/*右上ナビゲーションと右エリア非表示*/
#menu,
.ms-right{
    display: none;
}

/*左エリアを横幅100%にして画像＋テキストを出す設定*/
.ms-left{
    width:100%!important;
}

 /*左エリア上部画像設定*/
.sp-top{
    height:50%;
    margin:0 0 20px 0;
}
h2{
    font-size: 2rem;
}
p{
    font-size: 1.3rem;
}
p.copylight{
    font-size: 1rem;
letter-spacing: .25rem;}

#left1{
    background:url("../img/main-right.jpg") center;
    background-size:cover;
}

#left2 .sp-top{
    background:url("../img/02.jpg") no-repeat center;
    background-size:cover;
}

#left3 .sp-top{
    background:url("../img/03.jpg") no-repeat center;
    background-size:cover;
}
    
#left4 .sp-top{
    background:url("../img/04.jpg") no-repeat center;
    background-size:cover;
}

#left5 .sp-top{
    background:url("../img/05.jpg") no-repeat center;
    background-size:cover;
}

#left6 .sp-top{
    background:url("../img/06.jpg") no-repeat center;
    background-size:cover;
}
#left7 .sp-top{
    background:url("../img/07.jpg") no-repeat center;
    background-size:cover;
}
/*左エリア下部テキスト余白設定*/
.sp-bottom{
    padding:20px;
}
}



#footer{
  z-index: 2;
  position: fixed;
    bottom: 20px;
    left: 20px;
color: #fff;
}