/* === 共通部分用(ヘッダー・フッター、事例紹介はこちら・協業・提携ご案内はこちら)のCSS === */


@charset "utf-8";

/* ヘッダー　共通 */
header{
  height: auto;
  min-height: 60px; /* 高さを指定する */
  width: 100%; /* 幅を指定する */
  background: #fff; /* 背景色を指定する */
}
/* トップ　社名・ナビメニュー */
#top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  text-align: center;
  font-size: 1.8rem;
  max-width: 1024px;
  width: 100%;
  min-height: 85px;
  margin: 0 auto;
}
/* 左上　社名画像 */
.logo h1 img{
  width: 250px;
  height: 69px;
}



/* ナビメニュー */
#gnav{
  display: flex;
  align-items: center;
}
nav ul{
  display: flex;
}
nav ul li a{
  padding: 30px 10px; /* [上下][左右] */
  position: relative;
  font-size: 1.8rem;
  font-weight: bold;
}
nav ul li a::after{
  position: absolute;
  left: 10%;
  content: '';
  width: 80%; /*線の長さ*/
  height: 6px; /*線の太さ*/
  background: #F2970E; /*線の色*/
  /*bottom: -3px;線の上下位置、マイナス値は下に移動・プラス値は上に移動*/
  top: 7.5rem; /* 線の上下位置 */
  transform: scale(0, 1); /* 拡大縮小 */
  transform-origin: center top; /*変形（アンダーラインの伸長）の原点がaタグ（各メニュー）の右端*/
  transition: transform 0.3s; /*変形の時間*/
}
nav ul li a:hover::after, nav ul li a:active::after, nav ul li a:focus::after{
  transform: scale(1, 1); /*ホバー後、x軸方向に1（相対値）伸長*/
}
nav ul li.is-current a::after{
  transform: none; /* class="is-current"の設定されているliは線を出しっぱなしにする */
}
nav ul li.is-current a:hover::after, nav ul li.is-current a:active::after, nav ul li.is-current a:focus::after{
  transform: scale(1.1, 1); /* hover時、表示されていた下線をちょっと横に伸ばす */
}

/* === 「ぶうしすてむについて詳しく見る」
   「事業案内をもっと見る・利用を考えている方へ」
   「制作実績をもっと見る・企業の方へ」
   「お問い合わせフォーム」等のボタン系のCSS === */
.bottanbox{
  max-width: 1024px;
  margin: 0 auto; /* [上下][左右] */
}
.bottan a{
  display: flex;
  justify-content: space-between;
  width: 430px;
  border: solid 2px #9cd226;
  border-radius: 30px;
  font-size: 1.8rem;
  font-weight: bold;
  padding: 10px 50px 9px 50px; /* [上][右][下][左] */
  margin-top: 30px;
  background: #9cd226;
  color: #242424;
  transition: .3s; /* 0.3秒かけて変化 */
  align-items: center;
}
.bottan a:hover, .bottan a:active, .bottan a:focus{
  /* ボタンホバー時に、文字色を#557D26に、背景色を#fffに、0.3秒かけて変化 */
  color: #557D26;
  border: solid 2px #557D26;
  background: #fff;
  transition: .3s; /* 0.3秒かけて変化 */
}
.bottan a:hover span, .bottan a:active span, .bottan a:focus span{
  /* ボタンホバー時に、文字の下だけに下線を表示 */
  text-decoration: underline;
}


/* フッター */
footer{
  background: #9cd226;
  padding-top:90px;
}
footer h2{
  font-size: 2.4rem;
}
footer #footer1 i, footer #footer3 i{
  margin-right: 5px;
}
footer #footer2 i{
  margin-left: 5px;
}
footer a:hover, footer a:active, footer a:focus{
  text-decoration: underline;
}
footer dt{
  font-size: 1.8rem;
}
footer #footer1, footer #footer2{
  max-width: 1024px;
  width: 100%;
  margin: 0 auto; /* [上下][左右] */
}
footer #footer1{
  border-bottom: solid 1px #242424;
  padding-bottom: 70px;
}
footer #footer1 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
footer #footer1 ul li dl dt{
  border-bottom: solid 1px #242424;
}
footer #footer1 ul li dl dd{
  margin-top: 12px;
}
footer #footer1 ul li dl dd.ddotoiawase a{
  display: flex;
  align-items: center;
}
footer #footer1 ul li dl dd.ddotoiawase a:hover, footer #footer1 ul li dl dd.ddotoiawase a:active, footer #footer1 ul li dl dd.ddotoiawase a:focus{
  text-decoration: none;
}
footer #footer1 ul li dl dd.ddotoiawase a:hover span, footer #footer1 ul li dl dd.ddotoiawase a:active span, footer #footer1 ul li dl dd.ddotoiawase a:focus span{
  text-decoration: underline;
}
footer #footer1 ul li dl dd a i.isize2{
  font-size: 2.0rem;
  padding-bottom: 1px;
}
footer #footer1 ul li dl dd a i.isize{
  font-size: 1.3rem;
  margin-left: 5px;
  padding-bottom: 3px;
}
footer #footer1 ul li dl .ddber:before{
  content: "―";
}
footer #footer2{
  padding: 60px 0 80px; /* [上][左右][下] */
}
footer #footer2 ul{
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
  gap: 50px;
  margin-top: 12px;
}
footer #footer3{
  background: #333;
  color:#fff;
}
footer #footer3 span{
  max-width: 1024px;
  width: 100%;
  margin: 0 auto; /* [上下][左右] */
  display: flex;
  align-items: center;
  justify-content: end;
  height: 65px;
}
footer #footer3 span a{
  background: #fff;
  color:#000;
  display: block;
  padding: 15px 35px; /* [上下][左右] */
  border-radius: 5px;
}
footer #footer3 span a:hover{
  transition: .3s; /* 0.3秒かけて変化 */
  text-decoration: underline;
}


/* === タブレット版：幅が1024pxより狭い時に適用 === */
@media screen and (max-width:1024px){
  /* タブレット版：(幅1024px)：ヘッダー */
  #top .logo{
    margin-left: 10px;
  }

  /* タブレット版：(幅1024px)：フッター */
  footer #footer1, footer #footer2{
    padding-left:10px;
    padding-right:10px;
  }
  footer #footer3 span a{
    margin-right: 10px;
  }
}



/* === 幅が940pxより狭い時にメニューをまとめる === */
@media screen and (max-width:940px){
  .logo h1 img {
    width: 167px;
    height: 46px;
  }
  #top .logo{
    margin: 8px auto 0;/* [上][左右][下] */
  }
  #top #gnav{
    display: flex;
    flex-wrap: wrap;
    flex-flow: column;
    max-width: 1024px;
    width: 100%;
    margin-top: 7px;
    text-align: left;
  }
  #top #gnav nav{
    width: 100%;
    height: auto;
  }
  #top #gnav nav ul{
    flex-wrap: wrap;
    border-top: 1px solid #000;
    border-bottom: 1px solid #000;
  }
  #top #gnav nav ul li{
    width: 50%;
  }
  #top #gnav nav ul li:nth-child(1),#top #gnav nav ul li:nth-child(2){
    border-bottom: 1px solid #000;
  }
  #top #gnav nav ul li:nth-child(odd){
    border-right: 1px solid #000;
  }
  #top #gnav nav ul li a{
    padding: 1.2rem 0; /* [上下][左右] */
    display: block;
    text-align: center;
    height: 100%;
  }
  #top #gnav nav ul li a::after{
    background: transparent; /* マウスオーバーで下にオレンジ線を出していたのを透明にして見えないようにする */
    height: 0; /* フォーカス時に出る枠線が下にずれるので、高さも０にする */
  }
/*  #top #gnav nav ul li:hover, #top #gnav nav ul li:active, #top #gnav nav ul li:focus{
    background: #BDE858;
  }*/
  #top #gnav nav ul li a:hover, #top #gnav nav ul li a:active, #top #gnav nav ul li a:focus{
    background: #BDE858;
  }
  #top #gnav nav ul li.is-current a{
    background: #BDE858; /* class="is-current"の設定されているliは背景色を出しっぱなしにする */
  }
  #top #gnav nav ul li.is-current a:hover, #top #gnav nav ul li.is-current a:active, #top #gnav nav ul li.is-current a:focus{
    background: #E0F3AE;
  }
}




/* === 幅が700pxより狭い時に適用 === */
@media screen and (max-width: 704px){
  /* 関連リンクの間のgapを狭くする */
  footer #footer2 ul{
    gap: 25px;
  }
}



/* === スマホ版：幅が599pxより狭い時に適用 === */
@media screen and (max-width: 599px){
  /* トップ　社名・ナビメニュー */
  #top{
    max-width: 100%;
    height: auto;
  }

  /* 左上　社名画像 */
  .logo img{
    width: 200px;
    height: 55px;
  }

  /* メニューの文字が２行にならないようにする */
  nav ul li a{
    font-size: 4.8vmin;
  }

  /* === 「ぶうしすてむについて詳しく見る」
     「事業案内をもっと見る・利用を考えている方へ」
     「制作実績をもっと見る・企業の方へ」
     「お問い合わせフォーム」等のボタン系のCSS === */
  .bottan a{
    width: auto;
    padding: 10px 5%; /* [上下][左右] */
  }


  /* スマホ版(幅599px)：フッター */
  footer{
    padding-top: 50px;
  }
  footer #footer1 h2, footer #footer1 ul, footer #footer2 h2, footer #footer2 ul{
    padding: 0 20px; /* [上下][左右] */
  }
  footer #footer2 ul{
    display: flex;
    justify-content: start;
    gap: 50px;
    margin-top: 12px;
  }
  footer #footer1 ul, footer #footer2 ul{
    flex-direction: column;
  }
  footer #footer1 ul li{
    margin-top: 20px;
  }
  footer #footer1 ul li:first-child{
    margin-top: 0;
  }
  footer #footer1 ul li dl dd{
    margin-top: 6px;
  }
  footer #footer2{
    padding: 20px 0 40px; /* [上][左右][下] */
  }
  footer #footer2 ul{
    gap: 10px;
  }
  footer #footer3 span{
    justify-content: center;
    height: 50px;
  }
  footer #footer3 span a{
    width: 94vw;
    padding: 8px 35px; /* [上下][左右] */
    text-align: center;
    margin-right: 0px;
  }



}