/* CSS Document */
main img{
    max-width: 100%;
}
div > p:not(:last-of-type){
    margin-bottom: 1em;
}
section{
    margin-bottom: 5em;
}
.keyV{
    text-align: center;
}
.keyV .title_box{
    margin-bottom: 3em;
}
.keyV .title_box h2{
    display: inline-block;
    border-bottom: 1px solid;
    padding-bottom: 5px;
    margin-top: .5em;
}
.keyV_box{
    position: relative;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}
.keyV_box .keyV_cap{
    position: absolute;
    width: 250px;
    left: -50px;
    bottom: 50px;
}
.point .title_box{
    text-align: center;
    margin-bottom: 6em;
}
.point_box.flexbox{
    align-items: stretch;
    margin-bottom: 6em;
}
.point_box:nth-child(2n-1){
    flex-direction: row-reverse;
}
.point_box .point_img{
    width: 60%;
}
.point_box .point_caption{
    width: 35%;
}
.point_caption .number_box{
    width: 70px;
    height: 70px;
    background: #fff;
    border:1px solid;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.point_caption .caption_title{
    margin-bottom: 2em;
}
.point_caption .number_box .number{
    width: 100%;
    font-size: 2rem;
    position: absolute;
    top: 0;
    transform: translateY(-50%);
}
.txt_horizon {
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-align-items: center;
    align-items: center;
     -webkit-text-align: center; 
    text-align: center; /* for no-flexbox browsers */
}
.txt_horizon::before,
.txt_horizon::after {
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}
.txt_horizon::before {
    margin-right: 0.1em;
}
.txt_horizon::after {
    margin-left: 0.1em;
}
.point_caption h3{
    width: calc(100% - 80px);
}
.kutikomi .title_box{
    text-align: center;
    padding: 2em;
    margin-bottom: 6em;
    border: 1px solid ;
    border-radius: 50px;
    position: relative;
}
.kutikomi .title_box::after{
    content: "";
    width: 20px;
    height: 50px;
    background: #F0F0EB;
    position: absolute;
    bottom: 5px;
    left: 140px;
    border-left: 1px solid;
    transform: translateY(100%) rotate(-40deg);
    transform-origin: left center;
}
.kutikomi_wrap{
    align-items: stretch;
}
.kutikomi_box{
    background: #fff;
    width: 48%;
    padding: 3em;
    position: relative;
}
.kutikomi_box::after{
    content: "";
    width: 50px;
    height: 50px;
    background:linear-gradient(-45deg,#F0F0EB 0%,#F0F0EB 50%,#E0E0E0 50%,#E0E0E0 100%);
    position: absolute;
    bottom: 0;
    right: 0;
}
.kutikomi_box h3{
    text-align: center;
    margin-bottom: 2em;
}
.kutikomi_box .kutikomi_keisen{
    background-color: #fff; /* 背景色 */
    background-image: linear-gradient(180deg, #ccc 1px, transparent 1px); /* 罫線の色と太さ  */
    background-size: 100% 2.5em; /* 行の高さ */
    line-height: 2.5em; /* 文字の高さ */
    padding-bottom: 1px; /* 最終行の下にも罫線を引く */
}
.column{
    text-align: center;
    margin-top: 4em;
}
.column .triangle{
    margin: 2em 0 ;
}
.column img{
    margin-bottom: 1em;
    max-width: 100%;
}
@media screen and (max-width:768px){
    .point_box .point_img{
        width: 100%;
        margin-bottom: 3em;
    }
    .point_box .point_caption{
        width: 100%;
    }
    .kutikomi_box{
        width: 100%;
        margin-bottom: 2em;
    }
}
@media screen and (max-width:480px){
    .keyV_box .keyV_cap{
        left: 0;
    }
}