@charset "utf-8";

/* フォント読み込み */
@font-face {
    font-family: "Quicksand_Light";
    src: url("./font/Quicksand_Light.otf") format("opentype");
}

@font-face {
    font-family: "Quicksand_Book";
    src: url("./font/Quicksand_Book.otf") format("opentype");
}

@font-face {
    font-family: "Quicksand_Dash";
    src: url("./font/Quicksand_Dash.otf") format("opentype");
}

@font-face {
    font-family: "HenriDiot";
    src: url("./font/HenriDidot.otf") format("opentype");
}

@font-face {
    font-family: "JosefinSlab-Thin";
    src: url("./font/JosefinSlab-Thin.ttf") format("truetype");
}

/* サイト全体のフォント指定 */
body {
font-family: "Quicksand_Book","はんなり明朝", serif ;
background-color: #c0c6c9;
}

header {
    height: 50px;
    width: 100%;
    border-bottom: 0.8px solid #0f2350;
}

h1,h2,h3{
    margin-bottom: 50pt;
}

.nav ul {
    height: 100%;
    display: flex;
    justify-content: right;
    align-items: flex-end;
    list-style-type: none;
    transition: 1s all;
}

.nav ul li a, a:visited{
    color:#0f2350;
    text-decoration: none;
    transition: 0.5s;
}

.nav ul li a:hover{
    opacity: 0.5;
}

.nav ul li {
    transition: 0.5s;
}

.nav ul li:hover{
    transform: translateY(-3px);
}

li {
    margin: 10px;
    }

.about{
    width: 50vw;
    margin: auto;
    text-align: left;
    margin-top: 100pt;
}

.about-title{
    text-align: left;
}

.para{
    margin-top: 30pt;
}

.para2{
    margin-top: 50pt;
}

.para-about{
    font-family: Quicksand_Dash;
    margin-top: 80pt;
}

.para-about a{
    color:#0f2350;
    text-decoration: none;
    background-image: linear-gradient( #0f2350, #0f2350 );
    background-size: 0 0.5px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: all 0.5s;
}

.para-about a:hover{
    background-size: 100% 0.5px;
}

.works{
    width: 50vw;
    margin: auto;
    margin-top: 100pt;
    text-align: right;
}

.works-title{
    text-align: right;
}



.works-contents{
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    align-items: flex-end;
}

.works-item{
    display: flex;
    width: 510.6px;
    height: 180px;
    margin-bottom: 80px;
}

.works-text{
    display: grid;
    place-items: center;
    width: 240px;
    height: 180px;
    background-color: rgba(114,113,113,0.2);
}

.works-img{
    width: 270.6px;
    height: 180px;
}

.works-img img{
    height: 180px;
}


.para-works{
    font-family: Quicksand_Dash;
}

.para-works a{
    color:#0f2350;
    text-decoration: none;
    background-image: linear-gradient( #0f2350, #0f2350 );
    background-size: 0 0.5px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: all 0.5s;
}

.para-works a:hover{
    background-size: 100% 0.5px;
}

.journal{
    width: 50vw;
    margin: auto;
    text-align: left;
    margin-top: 100pt;
}

.journal-title{
    text-align: left;
}



.journal-contents{
    display: flex;
    flex-direction: column;
    margin-top: 80px;
    align-items: flex-start;
}

.journal-item{
    display: flex;
    width: 510.6px;
    height: 180px;
    margin-bottom: 80px;
}

.journal-text{
    display: grid;
    place-items: center;
    width: 240px;
    height: 180px;
    background-color: rgba(114,113,113,0.2);
}

.journal-img{
    width: 270.6px;
    height: 180px;
}

.journal-img img{
    height: 180px;
}


.para-journal{
    font-family: Quicksand_Dash;
}

.para-journal a{
    color:#0f2350;
    text-decoration: none;
    background-image: linear-gradient( #0f2350, #0f2350 );
    background-size: 0 0.5px;
    background-position: left bottom;
    background-repeat: no-repeat;
    transition: all 0.5s;
}

.para-journal a:hover{
    background-size: 100% 0.5px;
}