@charset "UTF-8";

.model-flow {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
.model-flow > div {
  /*! flex: 4; */
}
.model-flow .ttl,
.model-flow .sub-ttl {
  font-size: 1.6rem;
}
.section01 .ttl, .section02 .ttl {
  background: url(sub_title.png) repeat-y right center;
  background-size: 80%;
  line-height: 1;
  margin-bottom: 30px;
  color: #1c4d04;
  font-size: 1.8rem;
  padding: 3px 0;
}
.model-flow .item {
  display: flex;
}

.model-flow .item > div {
  flex: 3.2;
}
.model-flow .item .sub-item {
  flex: 1;
}
.model-flow .item .sub-item img {
  height: auto;
}
.flow-table {
  width: 100%;
  font-size: 1.2rem;
  border: 1px solid #ccc;
}
.flow-table th,
.flow-table td {
  width: 12.5%;
  text-align: center;
  vertical-align: top;
}
.flow-table th {
  background: url("calendar_day01.png");
  font-size: 1.6rem;
  padding: 7px;
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
  background-size: contain;
}
.flow-table th b {
  font-weight: normal;
}
.flow-table th:last-child {
  border-right: none;
}
.flow-table th.sat-th {
  background-image: url("calendar_day02.png");
}
.flow-table th.sun-th {
  background-image: url("calendar_day03.png");
}
.flow-table td {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.flow-table td.bg-white {
  background: #fff;
}
.flow-table td .bg-orange {
  background: #faf8e5;
  padding: 3px 0;
}
.flow-table td p {
  display: block;
}
.flow-table td.br-b-none {
  border-bottom: none;
}
.flow-table td img {
  margin: 10px 0;
}
.flow-arrow-01 {
  position: relative;
  background-clip: padding-box;
}
.flow-arrow-01:after {
  content: "";
  background: url("calendar_icn03.png") no-repeat center left;
  background-size: contain;
  width: 26px;
  height: 36px;
  display: block;
  position: absolute;
  top: 40px;
  right: -19px;
}
.flow-arrow-02 {
  position: relative;
  background-clip: padding-box;
}
.flow-arrow-02:after {
  content: "";
  background: url("calendar_icn04.png") no-repeat center left;
  background-size: contain;
  width: 85px;
  height: 36px;
  display: block;
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
}
.flow-arrow-03 {
  position: relative;
  background-clip: padding-box;
}
.flow-arrow-03:after {
  content: "";
  background: #ff4545;
  width: 160px;
  height: 20px;
  display: block;
  position: absolute;
  top: 48px;
  left: 0px;
}
.flow-arrow-04 {
  position: relative;
  background-clip: padding-box;
}
.flow-arrow-04:after {
  content: "";
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ff4545+85&0+0,1+85 */
	background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,69,69,1) 85%); /* FF3.6-15 */
	background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,69,69,1) 85%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,69,69,1) 85%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ff4545',GradientType=1 ); /* IE6-9 */
  width: 160px;
  height: 20px;
  display: block;
  position: absolute;
  top: 48px;
  left: 0;
}

@media screen and (max-width: 767px) {
  .model-flow {
    display: block;
  }
  .flow-table {
    font-size: 0.8rem;
    width: 150%;
  }
  .flow-table th {
    font-size: 0.8rem;
  }
  .flow-table img {
    width: 80%;
  }
  .flow-arrow-01:after {
    width: 30%;
    height: 100%;
    top: 0;
    right: -23%;
  }
  .flow-arrow-02:after {
    width: 85%;
    height: 100%;
    top: -25%;    
  }
  .flow-arrow-03:after {
    width: 110%;
    height: 15%;
    top: 38px;    
    left: 0px;
  }
  .flow-arrow-04:after {
    width: 110%;
    height: 15%;
    top: 38px;    
    left: 0px;
  }
}
@media screen and (max-width: 640px) {
  .model-flow .ttl {
    background-size: 60%;
  }
}
@media screen and (max-width: 480px) {
  .model-flow .ttl {
    background-size: 40%;
  }
}
@media (min-width: 481px) {
  ._sp-480 {
    display: none;
  }
}
@media (max-width: 480px) {
  ._pc-480 {
    display: none;
  }
}

.mv_wrap {
  padding: 10px;
  display: flex;
}
.mv_title {
  width: 300px;
  flex: 1;
  margin-right: 10px;
}
.mv_title img {
  width: 100%;
}
.mv_txt {
  background-color: #fff;
  /*! border-radius: 5px; */
  padding: 15px;
  flex: 2.82;
  /*! font-size: 1.5rem; */
  height: 111px;
  font-size: 1.6rem;
}
.mv_list {
  display: flex;
  margin-top: 10px;
}
.mv_list li + li {
  margin-left: 10px;
}

@media screen and (max-width: 767px) {
  .mv_wrap {
    display: block;
  }
  .mv_title {
    width: 100%;
    margin: 0 0 10px;
    padding: 17px 0;
  }
  .mv_txt {
    font-size: 1.2rem;
    height: auto;
    padding: 10px;
  }
  .mv_list {
    flex-wrap: wrap;
  }
  .mv_list li + li {
    /*margin-left: 0;*/
	margin-left: 10px;
  }
}

.mv_title {
  padding-top: 15px;
}
.mv_wrap {
  background: url(bg_title.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
}
.mv_list .item {
  color: #fff;
  /*! border-radius: 5px; */
  padding: 0px 8px 0px 0;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  /*line-height: 1.4;*/
  background-color: #1c4d04;
  position: relative;
  height: 35px;
  line-height: 36px;
}
.mv_list .item:before{
  content:"";
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  position: absolute;
  top:50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  transform: translateY(-50%);
}
.mv_list .item.free{
  padding-left: 48px;
}
.mv_list .item.free:before {
  background: url(../ui3000/icn_free.png) #1C4D04 center no-repeat;
  width:35px;
  height:28px;
  background-size: 90%;
}
.mv_list .item + .item {
  margin-left: 18px;
}

@media screen and (max-width: 767px) {
  .mv_title {
    padding-top: 17px;
  }
  .mv_list {
    margin-top: 10px;
    /*justify-content: space-between;*/
  }
  .mv_list .item {
    font-size: 1.1rem;
    width:100%;
  }
}

@media (min-width: 768px) {
  .mv_list .item {
    min-width: 180px;
  }
}

@media screen and (min-width:600px){
  .mv_list .item:before{
    left:10px;
  }
  .mv_list .item{
    padding-left: 66px;
  }
}

@media screen and (min-width: 600px) and (max-width: 767px){
  .mv_list li {
    width: 31%;
  }
  .mv_list li span{
    width:85%;
    text-align: center;
  }
}

@media screen and (max-width: 599px){
  .mv_list li  {
    width: 48%;
  }
  .mv_list li span{
    width:100%;
    text-align: center;
  }
  .mv_list .item:before{
    left:5px;
  }
  .mv_list .item{
    padding-left: 45px;
  }
}




.section01 .content-item{
  width: 48%;
}
.section01 .content-note{
  background: #eee;
  padding: 10px;
}

.section02 .flow-table td:nth-child(4){
  background-color: #eef8fa;
}
.section02 .flow-table td:nth-child(5){
  background-color: #fff8f8;
}

@media screen and (max-width: 767px) {
.section01 .content-item{
  width: 100%;
}
.section01 .content-note{
  background: #eee;
  padding: 10px;
}
.section01 .ttl, .section02 .ttl {
  background-size: 40%;
  font-size: 1.6rem;
}
.section02 .flow-item{
  overflow: auto;
  padding-bottom: 20px;
}
}