/* ===== Webサイト全体のスタイル ===== */

/* html */
html {
  height: 100%;
}

/* body */
body {
  font-family: sans-serif;
  height: 100%;
  margin: 0;
}

/*  キャッチ  */

.catch {
  color: #ffffff;
  text-shadow: 15px 15px 15px #663300 ;
  font-family: "Sawarabi Mincho";
  padding-top: 260px;
  font-size: 5rem;
  text-align: center;
  z-index: 20;
}

/* ===== ヘッダー ===== */

.main_imgBox {
    height: 600px;
    overflow: hidden;
    position: relative;
}

/*== アニメーション背景1 ==*/

.main_img {
    z-index:-1;
    opacity: 0;
    width: 100%;
    height: 680px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 20s 0s infinite;
    animation: anime 20s 0s infinite; }

          .main_img:nth-of-type(2) {
            -webkit-animation-delay: 5s;
            animation-delay: 5s; }

          .main_img:nth-of-type(3) {
            -webkit-animation-delay: 10s;
            animation-delay: 10s; }

          .main_img:nth-of-type(4) {
            -webkit-animation-delay: 15s;
            animation-delay: 15s; }

            @keyframes anime {
              0% {
                  visibility: visible;
                  opacity: 0;
                 }

             13% {
                  opacity: 1;
                 }

             25% {
                 opacity: 1;
                 }

             35% {
                  opacity: 0;
                  transform: scale(1) ;
                  z-index:-1;
                 }

            100% {
                 opacity: 0;
                 }

                 }

/* ナビゲーションの箱 */

nav {
  z-index: 999;
  width: 100%;
  position: fixed;
  background: linear-gradient(#142a10, #4f8a40);
  padding-top: 20px;
  padding-bottom: 20px;
}

/* リスト全体 */

nav ul {
  display: table;
  margin: 0 auto;
  padding: 0 ;
  width: 80%;
  text-align: center;
  font-size: 1.05rem;

}

/* リスト */

nav li {
  display: table-cell;
  min-width: 50px;
}

/* リンク */

nav a {
  display: block;
  width: 100%;
  color: #ffffff;
  text-decoration: none;
  padding-bottom: 5px;
}

nav li .current {
  border-bottom: 3px solid #f7d500;
}

nav li:hover{
  color: #E7DA66;
  border-bottom: 3px solid #ffffff;
}

/* リンクにふれた時 */

nav a:hover {
  color: #ffcc11;
}

/* ===== 自然と共に生きる建物 ===== */

/*== 木造建築の多い国日本 ==*/

.artchit {
  overflow: visible;
  background-image: url(img/index/gimon_bg01.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  color: #663300;
  padding: 30px;
  margin: 40px;
}

/*導入*/
.gimon {
  font-family: "Sawarabi Gothic";
  font-size: 1.47rem;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2.5%;
  border-radius: 30px;
  margin: 1rem;
}



/* h2見出し  木造建築の『メリット』,建築と『これから』 */

.title2 {
  position: static;
  color: #ffffff;
  text-shadow: 3px 3px 3px  #432700 ;
  font-size: 30px;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
  font-family: "Sawarabi Mincho";
}

.title3 {
  position: static;
  color: #ffffff;
  text-shadow: 2px 2px 5px #432700, 2px 2px 5px #432700, 2px 2px 5px #432700, 2px 2px 5px #432700 ;
  font-size: 30px;
  border-left-style: solid;
  border-left-width: 10px;
  padding-left: 15px;
  margin-bottom: 50px;
  font-family: "Sawarabi Mincho";
}

/* ===== 木造建築の『メリット』 ===== */

/* セクション */

.merit {
  margin: 40px;
  padding: 30px;
  background-image: url(img/index/merit_bg01.jpg);
  background-size: cover;
  z-index: -5;
  background-position: 10%;
  position: relative;
}

.merit::after {
  content: '';
  background-color: rgba(0,0,0, .5);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
}


/* h3見出し */
.merit h3 {
  margin: 4%;
  color: #663300;
  border-color: #ffcc11;
  font-family: "Sawarabi Gothic";
  font-size: 1.6rem;
  text-align: justify;
   background: -webkit-linear-gradient(top,#663300 0%, #663300 51%, #FF7C00 100%);
 -webkit-background-clip: text;
 -webkit-text-fill-color: transparent;
}

/* 段落 */

.merit p {
  color: #663300;
  clear: left;
}

.merits {
  z-index: 5;
  display: flex;
  justify-content: space-between;
}

/* 大きな箱 */

.big {
  font-family: "Sawarabi Gothic";
  position: relative;
  font-size: 1.5rem;
  background-color: rgba(255,255,255,0.9);
  height: 70%;
  width: 30%;
  padding: 2%;
  margin: 0.7%;
  box-shadow: 10px 10px 20px #000000;
  float: left;
  border-radius: 1.7rem;
  overflow: hidden;
}

/*丸い説明*/

.maru {
   max-width: 90%;
   border-radius: 50rem;
}
/* 箱 */

.box {
  float: left;
}


/* ===== 建物とこれから ===== */

.future {
  padding: 30px;
  background-image: url(img/index/future_bg01.jpg);
  background-size: cover;
  height: auto;
  background-repeat: no-repeat;
  color: #663300;
  margin: 40px;
}

.mirai_1 {
  font-family: "Sawarabi Gothic";
  font-size: 1.5rem;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2.5%;
  border-radius: 30px;
  margin: 1rem;
}

.abroad {
  text-align: center;
  position: relative;
  padding: 30px;
  margin: 40px;
  background-image: url(img/index/abroad_bg01.jpg);
  height: 400px;
  color: #ffffff;
  background-size: contain;
}

.see {
  font-family: "Sawarabi Mincho";
  font-size: 1.3rem;
}


/*表示するテキスト切り替え*/

.btntextchange {
  position: relative;
  border: 5px solid #FFFAAA;
  border-radius: 25px;
  min-width: 15rem;
  padding: 30px;
  text-align: center;
  display: inline-block;
  outline: none;
  transition: all .2s;
  color: #ffffff;
  text-shadow: 3px 3px 3px  #432700 ;
  font-size: 30px;
  padding-left: 15px;
  margin-bottom: 50px;
  font-family: "Sawarabi Mincho";
}

.btntextchange:hover {
  background-color: rgba(255, 248, 171, 0.9);
  color: #0F384C;
  text-shadow: 3px 3px 3px  #ffffff ;
}

.btntextchange span{
  position: absolute;
  left: 50%;
  top:50%;
  transform:translate(-50%,-50%);
  transition: all .5s;
  display: block;
  white-space: nowrap;
}

.btntextchange span:nth-child(2){
  opacity:0;
}

.btntextchange:hover span:nth-child(1){
  opacity:0;
}

.btntextchange:hover span:nth-child(2){
  opacity:1;
}

/* フッター */

footer {
  width: 100%;
  position: absolute;
  text-align: center;
  background-color: #4f8a40;
  color: #ffffff;
}

/* == example1 == */

.catch2 {
  color: #0E5377;
  text-shadow: 0 0 10px #FFFEEE , 0 0 10px #FFFEEE , 0 0 10px #FFFEEE , 0 0 10px #FFFEEE , 0 0 10px #FFFEEE , 0 0 10px #FFFEEE , 0 0 10px #FFFEEE ,  0 0 10px #FFFEEE ;
  font-family: "Sawarabi Mincho";
  padding-top: 260px;
  font-size: 5rem;
  text-align: center;
  z-index: 20;
}

/*== アニメーション背景2 ==*/

.main_img2 {
    z-index:-1;
    opacity: 0;
    width: 100%;
    height: 680px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    -webkit-animation: anime 15s 0s infinite;
    animation: anime 15s 0s infinite; }


          .main_img2:nth-of-type(2) {
            -webkit-animation-delay: 5s;
            animation-delay: 5s; }

          .main_img2:nth-of-type(3) {
            -webkit-animation-delay: 10s;
            animation-delay: 10s; }

            @keyframes anime {
             0% {
                  visibility: visible;
                  opacity: 0;
                }

            13% {
                  opacity: 1;
                }

            25% {
                  opacity: 1;
                }

            39% {
                  opacity: 0;
                  transform: scale(1) ;
                  z-index:-1;
                }

           100% {
                  opacity: 0;
                }

                }



.artchit2 {
     overflow: visible;
     background-image: url(img/example/gimon_bg01.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     color: #663300;
     padding: 30px;
     margin: 40px;
}

/*== ノルウェー 日本 サントリーニ島 共通 ==*/

/*左寄せ*/
.explain1 {
  font-family: "Sawarabi Gothic";
  font-size: 1.47rem;
  background-color: rgba(255, 255, 255, 0.9);
  display: block;
  width: 45%;
  padding: 2.5%;
  border-radius: 30px;
  margin: 1rem;
}

/*右寄せ*/
.explain2 {
  font-family: "Sawarabi Gothic";
  font-size: 1.47rem;
  background-color: rgba(255, 255, 255, 0.9);
  float: right;
  display: block;
  width: 45%;
  padding: 2.5%;
  border-radius: 30px;
  margin: 1rem;
}

/*==== 国紹介 ====*/

/*== ノルウェー ==*/

   .see1 {
     overflow: hidden;
     background-image: url(img/example/see1_bg01.jpg);
     background-size: cover;
     color: #663300;
     padding: 30px;
     margin: 40px;
}

/*== 日本 == */

   .see2 {
     overflow: hidden;
     background-image: url(img/example/see2_bg01.jpg);
     background-size: cover;
     color: #663300;
     padding: 30px;
     margin: 40px;
}

/*== サントリーニ島 ==*/

   .see3 {
     overflow: hidden;
     background-image: url(img/example/see3_bg01.jpg);
     background-repeat: no-repeat;
     background-size: cover;
     color: #663300;
     padding: 30px;
     margin: 40px;
}

/*== 建物とこれから ==*/

  .see4 {
    padding: 30px;
    background-image: url(img/example/see4_bg01.jpg);
    background-size: cover;
    height: auto;
    background-repeat: no-repeat;
    color: #663300;
    margin: 40px;
}