body {
  font-family: 'Noto Sans JP', 'Zen Maru Gothic';
  margin: 0;
  padding: 0;
}

body p {
    line-height: 1.6;
}


/* 背景色 */
.bg-gray {
    background: #f3f3f3;
}
.bg-black {
    background: #555555;
}
.bg-yellow {
    background: #ffd800;
}
.bg-light-yellow {
    background: #feea92;
}
.bg-blue {
    background: #5EACC0;
}
.bg-red {
    background: #E83437;
}
/* 文字色 */
.text-blue {
    color: #5EACC0;
}

/* input */
.input-text {
    border: 2px solid #555555;
    padding: 5px;
    border-radius: 0.5em;
}
.input-textarea {
    border: 2px solid #555555;
    padding: 5px;
    border-radius: 0.5em;
}

/* button */
a.btn {
  text-align: center;
  display: block;
  border-radius: 100vh;
  border: 3px solid #333333;
  background: #FFFFFF;
  margin: 0 auto;
  font-weight: bold;
  background: #FFFFFF;
  --box-shadow-color: #000000;
}
a.btn.btn-turquoise {
  background: #30b7cd;
  border: 2px solid #0e8fa4;
  color: #FFFFFF;
  --box-shadow-color: #0e8fa4;
}
a.btn.btn-yellow {
  background: #ffd800;
  border: 2px solid #333333;
}
a.btn.btn-sm {
  width: 200px;
  line-height: 36px;
  padding: 0;
  font-size: 1.2rem;
  box-shadow: 0px 1px 0px var(--box-shadow-color);
}
a.btn.btn-lg {
  width: 300px;
  line-height: 48px;
  padding: 0;
  font-size: 1.2rem;
  box-shadow: 0px 4px 0px var(--box-shadow-color);
}
@media screen and (max-width:768px) {
  a.btn.btn-lg {
    width: auto;
  } 
}


/* header */
h2 {
    font-weight: bold;
    line-height: 1.6;
}
.section_title {
    text-align: center;
    font-size: 1.4em;
    margin: 0 0 1em 0;
}
/* article */
#article p {
    margin: 0 0 1em 0;
}
#article a {
    text-decoration: underline;
}


/* HOME */
.list_icon_light li {
    padding: 0.2em 0.5em 0.2em 2em;
    margin: 1em 0;
    background: url(/assets/asobiz/common/icon_light.png) left center no-repeat;
    background-size: auto 1.5em;
}
.list_icon_pencil {
    padding: 0.5em 0.5em 0.5em 2.5em;
    margin: 0 0 0.5em 0;
    background: url(/assets/asobiz/home/pencil.png) left center no-repeat;
    background-size: auto 2em;
}
/* NUMBER */
.list_icon_num li {
    padding: 0.5em 1em;
    margin-bottom: 1em;
    position: relative;
    border: 2px solid #222;
    border-radius: 0.5em;
}
.list_icon_num li.next:before,
.list_icon_num li.next:after {
    content: '';
    position: absolute;
    left: 10%;
    transform: translateX(-50%);
    bottom: -1.4em;
    border-top: 1.4em solid #222;
    border-right: 20px solid transparent;
    border-left: 20px solid transparent;
}
.list_icon_num li.bg-gray:after {
    bottom: calc( 4px - 1.5em );
    border-top: solid 1.5em #f2f2f2;
}
.list_icon_num li.bg-white:after {
    bottom: calc( 4px - 1.5em );
    border-top: solid 1.5em #FFFFFF;
}
.list_icon_num li p {
    padding: 0.5em 0.5em 0.5em 2.5em;
}
.list_icon_num .num01 {
    background: url(/assets/asobiz/service/icon/eventflow01.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num02 {
    background: url(/assets/asobiz/service/icon/eventflow02.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num03 {
    background: url(/assets/asobiz/service/icon/eventflow03.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num04 {
    background: url(/assets/asobiz/service/icon/eventflow04.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num05 {
    background: url(/assets/asobiz/service/icon/eventflow05.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num06 {
    background: url(/assets/asobiz/service/icon/eventflow06.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num07 {
    background: url(/assets/asobiz/service/icon/eventflow07.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num08 {
    background: url(/assets/asobiz/service/icon/eventflow08.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num09 {
    background: url(/assets/asobiz/service/icon/eventflow09.png) left center no-repeat;
    background-size: auto 2em;
}
.list_icon_num .num10 {
    background: url(/assets/asobiz/service/icon/eventflow10.png) left center no-repeat;
    background-size: auto 2em;
}


/* FLOW */
#flow>div>div {
  width: 15%;
}
#flow>div>div:first-child{
  margin: 0;
}
#flow>div>div {
  margin-left: 2%;
}
/* flow,timeline共通 */
.flow-icon {
  position: relative;
  border: 3px solid #333333;
  border-radius: 30px;
  background: #FFFFFF;
  margin: 0 0 1rem 0;
}
.flow-icon dt {
  font-size: 2em;
  width: 100%;
  text-align: center;
  color: #ffcc00;
  position: absolute;
  top: -0.5em;
  z-index: 1;
}
.flow-icon dt > span {
  padding: 0 10px;
  background: linear-gradient(transparent 0%, transparent 50%, #FFFFFF 50%, #FFFFFF 100%);
  font-weight: bold;
}
.flow-icon dd {
  position: relative;
  z-index: 2;
  padding: 1rem 0;
}
.flow-icon dd img {
  margin: auto;
}
.flow-text dt {
  font-weight: bold;
  text-align: center;
}
.flow-text dd {
    padding: 0.5em;
}
@media screen and (max-width:768px) {
  #flow>div>div {
    width: auto;
    display: flex;
  }
  #flow>div>div>div:first-child {
    width: 40%;
    padding: 1rem 0 0 0;
  }
  #flow>div>div>div:last-child {
    width: 60%;
  }
  .flow-icon dd img {
    width: 80%;
  }
  .flow-icon dt {
    font-size: var(--font-size-large);
    color: #ffcc00;
    position: absolute;
    top: -16px;
    z-index: 1;
    font-size: 2em;
  }
  .flow-text {
    padding: 0 0 1rem 0;
  }
  .flow-text dt {
    font-size: 1.0rem;
  }
  .flow-text dd {
    padding: 0.5em;
  }
}


/* timeline */
.timeline>div .flow-text dt {
  font-size: 1.6rem;
}
.timeline_message {
  border-top: 3px solid #333333;
  border-bottom: 3px solid #333333;
  font-weight: bold;
  font-size: 4rem;
  line-height: 1.2;
}
.timeline>div.six-columns,
.timeline>div.original {
  max-width: 1650px;
}
.timeline>div.six-columns>div {
  width: 15%;
  margin-left: 2%;
}
.timeline>div.six-columns>div:first-child {
  margin-left: 0;
}


.timeline_message div:first-child {
  padding: 2rem 0;
}
.timeline_message div:last-child {
  padding: 3rem 2rem;
}

.timeline_message .sp-text {
  display: none;
}
.timeline_message .image {
  padding: 2rem 0;
  text-align: right;
}
.timeline_message img {
  height: 100px;
  display: inline;
}
@media screen and (max-width:768px) {
  .timeline {
    padding: 0 2rem;
  }
  .timeline div.three-columns>div,
  .timeline div.four-columns>div {
    width: auto;
    display: flex;
  }

  .timeline>div.six-columns,
  .timeline>div.original {
    max-width: auto;
  }
  .timeline>div.six-columns>div,
  .timeline>div.original>div {
    width: auto;
    display: flex;
  }
  .timeline>div.six-columns>div {
    width: auto;
    margin-left: 0;
  }


  .timeline .flow-icon {
    width: 40%;
    padding: 1rem 0 0 0;
  }
  .timeline .flow-text {
    width: 60%;
  }
  .timeline_message {
    width: auto;
    font-size: 3rem;
    text-align: center;
    padding: 0 0 2rem 0;
  }
  .timeline_message .image {
    text-align: center;
    padding: 1rem 0 0 0;
  }
  .timeline_message img {
    width: 70%;
    height: auto;
    margin: 0 auto;
  }
  .timeline_message .sp-text {
    display: block;
  }
  .timeline_message .pc-text {
    display: none;
  }
}