@charset "UTF-8";

/* ***** futureLine以外は適宜調整してお使いください ***** */
/* カラーコード変数（各スタイルで直書きでも問題ありません。） */
:root{
    --color-daiichi-life-blue: #1746FF;
    --color-dark-blue: #000064;
    --color-blue: #0091ff;
    --color-light-blue: #4edaff;
}

/* futureLine CSS */
.line-container{
  display: grid;
  height: 2.0512820513vw;
  background-image: linear-gradient(to right, var(--color-daiichi-life-blue) 50%, var(--color-light-blue) 50%);
  place-items: stretch start;
  overflow-x: hidden;
}
.line-container > .svg > path:nth-child(1) {
  fill: var(--color-light-blue);
}
.line-container > .svg > path:nth-child(2) {
  fill: var(--color-daiichi-life-blue);
}
.line-container > .svg > path:nth-child(3) {
  fill: var(--color-blue);
}
.line-container > .svg > path:nth-child(4) {
  fill: var(--color-dark-blue);
}
@media screen and (min-width: 769px) {
    .line-container{
        height: 0.8333333333vw;
    }
    .line-container .no-pc{
      display: none;
    }
}
@media screen and (max-width: 768px) {
    .line-container .no-sp{
      display: none;
    }
}

/* Logo CSS */
.logo-container{
  background-color: #FFF;
}
.logo-container:not(.logo-container-full) .logo-inner{  /*フルサイズにしない場合*/
  margin: 0 auto;
  max-width: 860px;
  width: 90%;
}
.logo-container .logo{
  padding: 2px 0;
  margin: 0;
  max-width: 305px;
  width: 70.4%;
}
.logo-container .logo img{
  max-width: 100%;
  height: auto;
}
@media screen and (min-width: 769px) {
  .logo-container .logo{
    padding: 4px 0;
  }
}