/*

  全体レイアウト

================================================================
*/
#wrapper {
  width: 640px;
  margin: 0 auto;}
/* ------------------------------------------------------- sp */
@media (max-width: 639px) {
#wrapper {
  width: 100%;}}

/*

  ヘッダー

================================================================
*/
#header {
  position: absolute;
  top: 0;
  left: 50%;
  width: 640px;
  margin-left: -320px;
  z-index: 10;}
#header .flex {
  display: flex;
  justify-content: space-between;}
#header .flex a {
  pointer-events: none;}
/* ------------------------------------------------------- sp */
@media (max-width: 639px) {
#header {
  left: 0;
  width: 100%;
  margin-left: 0;}
#header .flex a {
  pointer-events: auto;}}

/*

  sec01

================================================================
*/
.sec01 {
  position: relative;
  width: 100%;
  padding-top: 522%;
  background: url(../img/bgsec01.jpg) no-repeat top center / 100% auto;}
.sec01 .txt {
  position: absolute;
  top: 0;
  width: 100%;
  font-weight: 600;
  font-size: 1.4em;
  color: #fff;
  line-height: 1.7;}
.sec01 .txt span {
  display: block;
  margin-bottom: .1em;
  text-align: center;
  font-weight: bold;
  font-size: 1.25em;
  color: #00949d;}
.sec01 .txt span i {
  display: inline-block;
  padding: 5px 8px;
  background-color: #fffa14;
  line-height: 1.0;}
.sec01 .num01 {
  top: 10.4%;
  padding: 0 4%;}
.sec01 .num02 {
  top: 25%;
  padding: 0 9%;
  font-size: 1.3em;
  line-height: 1.9;
  color: #040404;}
.sec01 .num03 {
  top: 45.3%;
  padding: 0 9%;
  font-size: 1.3em;
  line-height: 1.9;
  color: #040404;}
.sec01 .num04 {
  top: 65.8%;
  padding: 0 9%;
  font-size: 1.3em;
  line-height: 1.9;
  color: #040404;}
.sec01 .num05 {
  top: 87.5%;
  padding: 0 9%;
  font-size: 1.3em;
  line-height: 1.9;
  color: #040404;}
/* ------------------------------------------------------- sp */
@media (max-width: 639px) {
.sec01 .txt span {
  margin-bottom: 2vw;}
.sec01 .num02,.sec01 .num03,.sec01 .num04,.sec01 .num05 {
  line-height: 1.8;}}

/*

  sec02

================================================================
*/
.sec02 {
  position: relative;
  width: 100%;
  padding-top: 222%;
  background: url(../img/bgsec02.jpg) no-repeat top center / 100% auto;}
.sec02 .txt {
  position: absolute;
  top: 29.4%;
  width: 100%;
  padding: 0 9%;
  font-weight: 600;
  font-size: 1.33em;
  color: #040404;
  line-height: 2.58;}
.sec02 .txt span {
  color: #c1292f;}
/* ------------------------------------------------------- sp */
@media (max-width: 639px) {
.sec02 .txt {
  font-size: 1.31em;
  line-height: 2.58;}}

/*

  sec03

================================================================
*/
.sec03 {
  position: relative;
  width: 100%;
  padding-top: 275%;
  background: url(../img/bgsec03.jpg) no-repeat top center / 100% auto;}
.sec03 .txt {
  position: absolute;
  top: 32%;
  width: 100%;
  padding: 0 5%;
  font-weight: 600;
  font-size: 1.33em;
  color: #040404;
  line-height: 1.9;}
.sec03 .txt span {
  color: #c1292f;}
.sec03 .txt i {
  display: block;
  font-size: 90%;}
/* ------------------------------------------------------- sp */
@media (max-width: 639px) {
.sec03 .txt {
  line-height: 1.8;}}

/*

  sec04

================================================================
*/
.sec04 {
  position: relative;
  width: 100%;
  padding-top: 55%;
  background: url(../img/bgsec04.jpg) no-repeat top center / 100% auto red;}
.sec04 a {
  position: absolute;
  top: 28%;
  left: 5%;
  right: 5%;
  z-index: 2;}

/* Sticky */
.sticky {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 640px;
    display: grid;
    grid-template-columns: 1fr;
    z-index: 1000;
}