#about h2{
    background: transparent;
    color: #382b25;
    border: none;
}

.kome {
    position: absolute;
    top: 50%;
    right: 11%;
    transform: translateY(-50%);
}
.method-num {
    margin-right: 10px;
}
.period-area {
    width: 7%;
    position: relative;
    /*border-top: dashed 2px #333;
    padding-top: 15px;
    margin-top: 14px;
    margin-bottom: -15px;*/
    padding-bottom: 15px;
    background-color: #e4ddd7;
}
.period {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    height: 100%;
    overflow: hidden;
    text-align: center;
}
#flow{
    background-color: #e9e9e9;
    padding: 60px 0;
}

.flow-flexbox{
    background-color: #fff;
    margin-bottom: 20px;
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    overflow: hidden;
    box-shadow: 0 0 10px 0 rgba(0,0,0,0.1);
}



/**/


  .thintop{
    height: 88px;          /* ←縦長だと宝石化しやすいので少し短く */
    background: #b7ab93;
    color:#fff;
  
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:40px;
    font-weight:700;
    line-height:1;
    width: 100%;
  
    /* ▼ “ほぼ台形＋浅い尖り” */
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 68%,
      50% 88%,   /* ←ここを 85〜92%で調整（大きいほど尖りが短い） */
      0% 68%
    );
  }
  
  /* 縦書きテキスト */
  .vertical-rl{
    display: inline-block;
    /*margin-top: 16px;*/
    margin-top: 0px;
    writing-mode: vertical-rl;
    text-orientation: upright;
  
    color: #6b6257;
    font-weight: 600;
    letter-spacing: .15em;
    font-size: 14px;
  }

/**/


.thinbottom {
    position: relative;
    border-left: 1px solid #333;
    height: 35%;
}

.flow-content-box {
    width: 93%;
    /*padding-left: 2%;*/
    padding: 2%;
}
.flow-box {
    border-left: 1px solid #b7ab93;
    margin-left: 6px;
    margin-top: -12px;
}
.flow {
    padding: 10px 0 0px 10px;
}

.method-num img{
    width: 40px;
    margin-right: 10px;
}

.flow-flexbox ul.ul1 {
    display: flex;
    list-style: none;
    padding-left: 0;
    flex-wrap: wrap;
    margin-top: 0;
}
.flow-flexbox ul.ul1 > li {
    padding-left: 1.5em;
    position: relative;
    width: 32%;
}
.flow-flexbox ul.ul1 > li::after {
    content: '';
    position: absolute;
    width: 1em;
    height: 1em;
    top: 5px;
    left: 0;
    background: #b7ab93;
    border-radius: 50%;
}

.flow-flexbox:nth-of-type(2) ul.ul1 > li::after{
    background: #9fa47a;
}
.flow-flexbox:nth-of-type(3) ul.ul1 > li::after{
    background: #9aa7a0;
}
.flow-flexbox:nth-of-type(4) ul.ul1 > li::after{
    background: #8f8b86;
}
.flow-flexbox:nth-of-type(5) ul.ul1 > li::after{
    background: #a09f7a;
}
.flow-flexbox:nth-of-type(6) ul.ul1 > li::after{
    background: #7f8c8a;
}

.flow-flexbox:nth-of-type(2) .thintop{
    background: #9fa47a;
}
.flow-flexbox:nth-of-type(3) .thintop{
    background: #9aa7a0;
}
.flow-flexbox:nth-of-type(4) .thintop{
    background: #8f8b86;
}
.flow-flexbox:nth-of-type(5) .thintop{
    background: #a09f7a;
}
.flow-flexbox:nth-of-type(6) .thintop{
    background: #7f8c8a;
}

.flow-flexbox:nth-of-type(2) .flow-box {
    border-left: 1px solid #9fa47a;
}
.flow-flexbox:nth-of-type(3) .flow-box {
    border-left: 1px solid #9aa7a0;
}
.flow-flexbox:nth-of-type(4) .flow-box {
    border-left: 1px solid #8f8b86;
    /*height: 87%;*/
}
.flow-flexbox:nth-of-type(5) .flow-box {
    border-left: 1px solid #a09f7a;
    /*height: 87%;*/
}
.flow-flexbox:nth-of-type(6) .flow-box {
    border-left: 1px solid #7f8c8a;
    /*height: 87%;*/
}

@media (max-width: 767px) {
    .flow-flexbox ul.ul1 > li {
        width: 100%;
    }
    .period-area {
        width: 15%;
    }
    .flow-content-box {
        width: 85%;
    }
}
@media (max-width: 480px) {
    .period-area {
        width: 20%;
    }
    .flow-content-box {
        width: 80%;
    }
}