@font-face {
font-family: "BartinaThin";
src: url("./fonts/BartinaThin.ttf") format("opentype");
}
body {
    font-family:BartinaThin;
    width: 100%;
    min-height: 100vh;
    margin:0;
    padding:0;
}
.input_text{
    font-family:BartinaThin;
    width:calc(100% - 20px);
    font-size:22pt;
    border:none;
    border-bottom:1px solid #333;
}
.input_text:focus{
    outline: none;
    border-bottom:1px solid #333;
}
H1, h2, p{
    /*color:#8B4513;*/
    color:#333;
}
.container H1{
    text-align:center;
    font-size:40pt;
    margin:20px;
}
.container H2{
    text-align:center;
    font-size:32pt;
    margin:20px;
}
.container p{
    text-align:center;
    font-size:22pt;
    margin:20px;
}
.container .left{
    text-align:left;
}
hr{
    width:40vw;
    background:#333;
    height:1px;
    border:none;
    margin:50px auto;
}
.background{
    position:fixed;
    top:0;
    left:0;
    height:100vh;
    width:100vw;
    z-index:1;
}
.background .wrapper{
    position:relative;
    display:grid;
    height:100vh;
    justify-content:center;
    align-items:center;
    grid-template-columns:1fr;
    grid-template-rows:80vh 20vh;
    grid-template-areas:
        "image_and_text"
        "text"
}
.background .wrapper .image_and_text{
        height:80vh;
        grid-area:image_and_text;
        background-position: center;
    }
@media (min-width: 100px){
    .background .wrapper .image_and_text{
        background-image: url('./images/head_mobile.jpg');
        background-size: contain;
        background-repeat: no-repeat;
    }
}
@media (min-width: 920px){
    .background .wrapper .image_and_text{
        background-image: url('./images/head_pc.jpg');
        background-size:cover;
        background-repeat: no-repeat;
    }
}
.background .wrapper .text{
    grid-area:text;
    font-size:24pt;
    text-align:center;
    margin:0;
    padding:0;
}
.clear{
height:100vh;
z-index:3;
}
.container{
    position:relative;
    justify-content:center;
    display: grid;
    height: auto;
    width:100vw;
    grid-template-rows:auto;
    grid-template-areas:
        "hello";
    z-index:3;
    background:/*#FFEBCD*/#fff;
}
@media (min-width: 100px){
    .container .hello{
        width:100vw;
    }
}
@media (min-width: 920px){
    .container .hello{
        width:70vw;
    }
}
@media (min-width: 1280px){
    .container .hello{
        width:50vw;
    }
}
.container .hello{
    grid-area:hello;
}
.timeline_wrapper{
    position:relative;
    justify-content:center;
    align-items:center;
    display: grid;
    height: auto;
    width:auto;
    grid-template-rows:auto;
    grid-template-columns:1fr 16px 1fr;
    grid-template-areas:
        "left_1 dot_1 ."
        ". dot_2 right_1"
        "left_2 dot_3 ."
        ". dot_4 right_2"
        "left_3 dot_5 ."
        ". dot_6 right_3";
    z-index:3;
}
.timeline_wrapper H2{
    margin-bottom:5px!important;
}
.timeline_wrapper p{
    margin-top:5px!important;
}
.timeline_wrapper .left_1{
    grid-area:left_1;
}
.timeline_wrapper .left_2{
    grid-area:left_2;
}
.timeline_wrapper .left_3{
    grid-area:left_3;
}
.timeline_wrapper .right_1{
    grid-area:right_1;
}
.timeline_wrapper .right_2{
    grid-area:right_2;
}
.timeline_wrapper .right_3{
    grid-area:right_3;
}
.timeline_wrapper .dot_1{
    grid-area:dot_1;
}
.timeline_wrapper .dot_2{
    grid-area:dot_2;
}
.timeline_wrapper .dot_3{
    grid-area:dot_3;
}
.timeline_wrapper .dot_4{
    grid-area:dot_4;
}.timeline_wrapper .dot_5{
    grid-area:dot_5;
}
.timeline_wrapper .dot_6{
    grid-area:dot_6;
}
.timeline_wrapper .dot_1, .timeline_wrapper .dot_2, .timeline_wrapper .dot_3, .timeline_wrapper .dot_4, .timeline_wrapper .dot_5, .timeline_wrapper .dot_6{
    display:flex;
    justify-content: center;
    height:100%;
}
.timeline_wrapper .dot_1 .line{
    height:50%;
    width:1px;
    margin-left:-8px;
    background:#333;
    align-self:flex-end;
}
.timeline_wrapper .dot_2 .line, .timeline_wrapper .dot_3 .line, .timeline_wrapper .dot_4 .line, .timeline_wrapper .dot_5 .line{
    height:100%;
    width:1px;
    margin-left:-8px;
    background:#333;
    align-self:flex-end;
}
.timeline_wrapper .dot_6 .line{
    height:50%;
    width:1px;
    margin-left:-8px;
    background:#333;
    align-self:flex-start;
}
.timeline_wrapper .dot_1 .dot, .timeline_wrapper .dot_2 .dot, .timeline_wrapper .dot_3 .dot, .timeline_wrapper .dot_4 .dot, .timeline_wrapper .dot_5 .dot, .timeline_wrapper .dot_6 .dot{
    width:15px;
    height:15px;
    background:#333;
    border-radius:8px;
    align-self:center;
}
.container .hello .div_img{
    text-align:center;
}
.bold{
    font-weight:700;
}
.textarea{
    width:calc(100% - 40px);
    height:100px;
    font-size:22pt;
    font-family:BartinaThin;
    border-radius:10px;
    padding:10px;
    resize:none;
}
.button{
    width:80%;
    height:70px;
    font-family:BartinaThin;
    font-size:22pt;
    border-radius:10px;
}
.button_red{
    background:#F08080;
    color:#fff;
    border:1px solid #fff;
}
.button_green{
    background:#7FFF00;
    color:#333;
    border:1px solid #fff;
}