@charset "UTF-8";
/*共通部分------------------------------------------------------------*/
html, body {
  margin: auto;
}
body {
  /*  background-color: #004794;*/
  background-image: linear-gradient(to right, #1e3c72 0%, #2a5298 100%);
/*  overflow-x: hidden;*/
}
main {
/*　width: 980px;*/
　width: 100%;
  margin: auto;
  /*  font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", Helvetica, Arial, sans-serif;*/
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 500;
  /*overflow-x: hidden; ここ入れると横スクロールは制御されるけどタイトル部分の白も限定的な四角になってしまう*/
}
article {
    width: 980px;
    margin: auto;
}
/*
.mainblue {
background-color: #004794;
  z-index: -5;
}
*/
.whiteback {
  background-color: #ffffff;
/*  width: 100%;*/
}

.mt1 {
    margin-top: 1rem;
}

.mt2 {
    margin-top: 2rem;
}

.ml1 {
    margin-left: 1rem;
}

.ml05 {
    margin-left: .5rem;
}

/*--------------------------------------------------------タイトル部分*/
.top {
  background-color: #ffffff;
/*
  margin: 0 -200%;
  padding: 0 200%;
*/
}
.top p {
  font-size: 1.5rem;
  font-weight: bold;
  color: #474747;
}
.top img {
    margin-left: 5rem;
}
.flex {
  display: flex;
  justify-content: center;
}
.flex2 {
  display: flex;
  justify-content: space-between;
}
.title {
  margin-left: 1.5rem;
}
.logo {
  margin-top: 1rem;
  margin-right: 1rem;
}
/*--------------------------------------------------------hタグ部分*/
h1 {
  line-height: 1.25;
  font-size: 2.5rem;
  letter-spacing: -0.1em;
  font-family: 'Rampart One', cursive;
  color: #515151;
}
.h1 {
  color: #ACB6E5;
  background: -webkit-linear-gradient(0deg, #4C63C6, #6fcebd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 3rem;
  margin-top: .5rem;
  letter-spacing: -0.05em;
}
@keyframes gradientEffect {
  from {
    background-position: left
  }
  to {
    background-position: right
  }
}
.h2 {
  font-size: 2rem;
  position: relative;
  color: #004794;
  display: inline-block;
  /*  margin: 47px 0;*/
  margin-left: 2rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
  z-index: 1;
}
.h2:before {
  content: "";
  position: absolute;
  background: #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: -1;
}
/*------------------------------------------概要部分*/
.list {
  background-color: #C2D0E4;
  margin-left: 1rem;
  width: 55%;
  margin-bottom: .5rem;
}
.list p {
  font-weight: bold;
  color: #474747;
  padding-left: 1rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
  padding-right: 1rem;
}
.list .col {
  display: inline-block;
  width: 120px;
  line-height: 2rem;
}
.col {
  margin-right: -1.5rem;
}
.info_txt{
   line-height: 1.25rem;
   margin-left: 7rem;
}

/*------------------------------------------完成イメージ図部分*/
h3 {
  color: #ffffff;
  font-weight: bold;
  font-size: 1.6rem;
}
.photo {
  margin-top: -2rem;
  margin-right: 1rem;
  width: 40%;
}
.photo img {
  margin-top: -1rem;
}
/*------------------------------------------年表部分*/
dl {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
dt {
  font-weight: bold;
  color: #ffffff;
  font-size: 1.5rem;
  margin-left: -1rem;
}
dd {
  line-height: 1.5rem;
}
dl dt {
  text-align: right;
  width: 8.9em;
  padding: 0.5em 1.0em 0.5em 0.5em;
  position: relative;
}
dl dt::after {
  content: '●';
  position: absolute;
  left: 3rem;
  top: .8rem;
  font-size: 1.5rem;
  color: #ffffff;
}
dt.new {
  width: 12em;
}
dt.new::after {
  content: '●';
  position: absolute;
  left: 3rem;
  top: .8rem;
  font-size: 1.5rem;
  color: #FFF800;
}
.Newicon {
  background-color: #FFF800;
  color: #3f3f3f;
  font-size: 1.5rem;
  padding: .25rem .5rem;
}
dl dd {
  width: calc(100% - 8.5em);
  padding: 0.5em 2.0em 3.0em;
  border-left: 4px solid #ffffff;
}
dl dd h4 {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 5px;
  color: #004794;
}
.history {
  background: #ffffff;
  padding: 2rem 1rem;
}
.history p {
  font-weight: bold;
  color: #474747;
}
.hisphoto {
  display: flex;
  justify-content: center;
  padding-top: 1rem;
}
.onephoto img {
  display: block;
  margin-left: 1rem;
  padding-top: 1rem;
}

.pt1 {
    padding-top: 1rem;
}

/*------------------------------------------動画掲載部分*/
.movie {
  margin-left: 1rem;
}

/*------------------------------------------タイムラプス掲載部分*/

.timelaps {
 margin-top: 3rem;
 margin-left: 1rem;  
}

.timelaps h2 {
  font-weight: bold;
  font-size: 1.5rem;
  color: #ffffff;
}


/*------------------------------------------進捗あり次第の部分*/
.continue {
  margin-left: 2.5rem;
  margin-bottom: 10rem; /*線の延長線上のスペース*/
  width: calc(100% - 8.5em);
  padding: 0.5em 2.0em 3.0em;
  border-left: 4px solid #ffffff;
  color: #ffffff;
  font-weight: bold;
}
/*------------------------------------------コピーライト部分*/
.copy {
  color: #ffffff;
  text-align: center;
}
/*------------------------------------------SPの改行非表示*/
.br_sp {
  display: none;
}

/*---------------------------------------------------------------------------タブレット版CSS*/
@media(max-width:768px) {
  main {
    width: 100%;
    font-size: 20px;
    margin: auto;
    overflow-x: hidden;
  }
    
  article {
    width: 90%;
    margin: auto;
}
  /*------------------------------------------タブレット版のTOP部分*/
  .mobileflex {
    display: flex;
    flex-direction: column-reverse;
  }
    .mobileflex2 {
    display: flex;
    flex-direction: column; 
    }
  h1 {
    font-size: 3rem;
  }
  .h1 {
    font-size: 3rem;
  }
  .title {
    font-size: 1rem;
    margin-left: 1rem;
  }
  .logo {
    padding-bottom: 3rem;
    text-align: right;
  }
  .logo img {
    width: 40%;
    height: 10%;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  /*------------------------------------------タブレット版の概要部分*/
  .list {
    width: 100%;
    font-size: 1rem;
    margin: auto;
  }
  .photo {
    margin-top: .5rem;
    margin-left: 2rem;
  }
  .photo h3 {
    width: 15rem;
  }
  .photo img {
    width: 200%;
    height: auto;
  }
  /*------------------------------------------タブレット版の歩み部分*/
  .history {
    width: 110%;
    padding: 1rem;
    margin-left: -1rem;
  }
  .hisphoto {
    display: flex;
    flex-direction: column;
  }
  .photo2 img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
  }
  .onephoto img {
    display: block;
    margin-left: -.25rem;
    padding-top: 1rem;
  }
  /*------------------------------------------タブレット版の動画部分*/
  .movie iframe {
    width: 100%;
    height: 100%;
    margin-left: -1rem;
  }
  /*------------------------------------------コピーライト部分*/
  .copy {
    color: #ffffff;
    text-align: center;
  }
  /*------------------------------------------SPの改行表示*/
  .br_sp {
    display: block;
  }
}


/*---------------------------------------------------------------------------モバイル版CSS*/
@media(max-width:480px) {
  main {
    width: 100%;
    font-size: 20px;
    margin: auto;
    overflow-x: hidden;
  }
    
  article {
    width: 95%;
    margin: auto;
}
  /*------------------------------------------モバイル版のTOP部分*/
  .mobileflex {
    display: flex;
    flex-direction: column-reverse;
  }
    .mobileflex2 {
    display: flex;
    flex-direction: column; 
    }
  h1 {
    font-size: 2rem;
  }
  .h1 {
    font-size: 2.25rem;
  }
  .title {
    font-size: 1rem;
    margin-left: 1rem;
  }
  .logo {
    padding-bottom: 3rem;
    text-align: right;
  }
  .logo img {
    width: 50%;
    height: 10%;
    margin-left: 1rem;
  }
  .flex {
    display: flex;
    flex-direction: column;
  }
  /*------------------------------------------モバイル版の概要部分*/
  .list {
    width: 100%;
    font-size: 1rem;
    margin: auto;
  }
  .photo {
    margin-top: .5rem;
    margin-left: 2rem;
  }
  .photo h3 {
    width: 15rem;
  }
  .photo img {
    width: 200%;
    height: auto;
  }
  /*------------------------------------------モバイル版の歩み部分*/
  .history {
    width: 110%;
    padding: 1rem;
    margin-left: -1rem;
  }
  .hisphoto {
    display: flex;
    flex-direction: column;
  }
  .photo2 img {
    width: auto;
    max-width: 100%;
    height: auto;
    margin-top: 1rem;
  }
  .onephoto img {
    display: block;
    margin-left: -.25rem;
    padding-top: 1rem;
  }
    
    .history p a {
    box-sizing: border-box;
    width: 100%;
    display: block;
　　　word-wrap: break-word;
    margin-top: 1rem;
  }
    
  /*------------------------------------------モバイルの動画部分*/
  .movie iframe {
    width: 100%;
    height: 100%;
    margin-left: -1rem;
  }
  /*------------------------------------------コピーライト部分*/
  .copy {
    color: #ffffff;
    text-align: center;
  }
  /*------------------------------------------SPの改行表示*/
  .br_sp {
    display: block;
  }
}