/* font ____________________ */
:root {
    font-size: calc(1rem + ((1vw - 7.68px) * 0.3472));
    letter-spacing: 0.05rem;

    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 300;
    font-style: normal;
}

/* font-size */
.post_contents .___title h1,
.post_next li a  {
    font-size: 2.5rem;
}


#global-head .head-logo h1,
.main-content .main-entry h2,
.post_contents .___contents h1,
.post_article .___title h2,
.page .main-content h2 {
    font-size: 2rem;
}

li.main-entry-list .___list_set h3,
.post_contents .___date .number,
.post_contents .___contents h2,
.single_post_navigation {
    font-size: 1.5rem;
}

.post_contents .___contents h3,
.page.privacy h3  {
    font-size: 1.35rem;
}

.post_contents .___contents h4,
.page.privacy h4  {
    font-size: 1.25rem;
}

.category .main-content .main-entry h2,
.post_article .___title h3 {
    font-size: 1rem;
}

#global-head .head-logo h2 {
    font-size: 0.8rem;
}

#global-head .head-nav .search,
#global-head .head-nav .sns dl dt,
ul.global-navigation li dt,
li.main-entry-list .___list_date .data,
.___list_category-tags p,
.___category-tags p,
.post_article .___list_date .data {
    font-size: 0.7rem;
}

/* font-weight */
#global-head .head-nav .search,
#global-head .head-nav .sns,
.category .main-content .main-entry h2,
.post_next li a,
.single_post_navigation {
    font-weight: bold;
}

.main-content .main-entry h2,
li.main-entry-list .___list_set h3,
.post_article .___list_set h3 {
    font-weight: 300;
}

/* letter-spacing */
.main-content .main-entry h2 {
    letter-spacing:0.1rem;
}

 /* line-height */
.post_contents .___contents p {
    line-height: 2;
}

.main-content .main-entry h2,
.page.privacy p {
    line-height: 1.8;
}

.post_contents .___title h1,
li.main-entry-list .___list_set h3 {
    line-height: 1.4;
}

.post_contents .___date .number,
.post_contents .___contents h1,
.post_contents .___contents h2,
.post_contents .___contents h3,
.post_contents .___contents h4,
.post_article .___title h2,
.post_article .___title h3,
ul.post_next li a {
    line-height: 1;
}


 /* google font Icons  _____________________________ */
ul.global-navigation li span,
.___list_category-tags p span,
.category .main-content .main-entry h2 span,
.post_contents .___category-tags p span,
.page .main-content h2.title span,
table ._blank span,
.material-icons {
    font-family: 'Material Symbols Outlined'; /*使用するアイコンの種類*/
    font-variation-settings: 'wght' 200; /* アイコンの太さと大きさ */
    color: black; /* アイコンの色を指定 */
}

ul.global-navigation li span {
    font-size: 24px;
}

.category .main-content .main-entry h2 span {
    font-size: 30px;
    line-height: 1;
}

ul.global-navigation li:nth-child(-n+3) dt,
ul.global-navigation li:nth-child(n+4),
.___list_category-tags p,
.___category-tags p {
    display: flex;
    flex-wrap: wrap;
}

/* 共通 _____________________________ */
body {
    background-color: #E5E5E5!important;
    opacity: 0;
    transition: opacity 0.5s ease-in-out; /* フェードインのアニメーション */
}

/*リンク*/
a {
    color: var(--color-text);
    text-decoration: none;
    transition: .15s ease-out;
    -webkit-transform: translateZ(0);
}

a:hover {
    text-decoration: none;
    opacity: 0.7;
}

/*テーブル*/
table {
    width: 100%;
}

table tr:first-of-type {
    border-top: 1px solid #AAA;
}

table tr th,
table tr td {
    padding: 4% 3%;
    border-bottom: 1px solid #AAA;
}

table tr th {
    width: 30%;
    border-right: 1px solid #AAA;
}

table tr td {
    width: 70%;
}

table a {
    color: blue;
    text-decoration: underline; /* デフォルトはアンダーライン */
}

/*検索窓*/
.search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 90%;
    margin-top: 3%;    
}

.search-field {
    width: 200px;
    border: none;
    padding: 4% 0;
    outline: none; /* フォーカス時のアウトラインを消す */
}

.search-field:focus {
    border-color: #ccc; /* フォーカス時のボーダー色を変更 */
    box-shadow: none;  /* フォーカス時のシャドウを消す */
}

.search-submit {
    background-color: transparent;
    border: none;
    cursor: pointer;

}

/* #global-head _____________________________ */  
#global-head,
#global-head .head-nav,
#global-head .head-nav .sns dl,
.category .main-content .main-entry h2 {
    position: relative;
    display: flex;
    flex-wrap: wrap;
}

#global-head {
    justify-content: space-between;

    width: 90%;
    margin: 3% 5% 0;
}

#global-head .head-logo h1,
#global-head .head-logo h2 {
    line-height: 1;
}

#global-head .head-logo h2 {
    margin-top: 10px;
    display: inline-block;
}

#global-head .head-nav .search,
#global-head .head-nav .sns {
    height: 46px;
    border-radius: 100px;
}

#global-head .head-nav .search {
    width: 300px;            
    background-color: white;
    margin-right: 20px;
}

#global-head .head-nav .sns {
    width: 170px;
    background-color: yellow;
}

#global-head .head-nav .sns dl dd a img {
    vertical-align: sub;
}

#global-head .head-nav .sns dl dd:nth-of-type(1),
#global-head .head-nav .sns dl dd:nth-of-type(2) {
    position: absolute;
    top: 5px;
}

#global-head .head-nav .sns dl dd:nth-of-type(1){
    right: 50px;
}

#global-head .head-nav .sns dl dd:nth-of-type(2){
    right: 5px;
}

#global-head .head-nav .search,
#global-head .head-nav .sns dt {
    padding-left: 20px;
    display: table;
    height: 46px;
    
}

#global-head .head-nav .search span,
#global-head .head-nav .sns dt span {
    vertical-align: middle;
    display: table-cell;
}

/* .global-navigation _____________________________ */  
ul.global-navigation { 
    position: relative;
    margin-left: 10%;
    margin-top: 5%;

}

ul.global-navigation li:nth-child(-n+2) {
    margin-bottom: 50px;
}

ul.global-navigation li:nth-child(3) {
    margin-bottom: 80px;
}

ul.global-navigation li:nth-child(4) {
    margin-bottom: 20px;
}

ul.global-navigation li:nth-child(-n+3) dt {
    line-height: 0;
    margin-bottom: 20px;
}

ul.global-navigation li dd{
    margin-bottom: 5px;
}

/*ul.global-navigation li:nth-child(n+4) span {
    margin-top: -0.6%;
}*/

/* .global-navigation-icon */
.global-navigation-icon {
    display: none;
    transition: all 1s; /* opacityプロパティに0.5秒のトランジションを追加 */
}

.global-navigation-icon li {
    width: 50px;
    height: 50px;
    border-radius: 100px;
    background-color: yellow;
    position: relative;

    cursor: pointer;
}

.global-navigation-icon li i {
    display: block;
    width: 50%;
    height: 2px;
    background-color: black;
    position: absolute;
    left: 25%;
}

.global-navigation-icon li i:nth-child(1) {
    top: 35%;
}

.global-navigation-icon li i:nth-child(2) {
    top: 50%;
}

.global-navigation-icon li i:nth-child(3) {
    top: 65%;
}

.global-navigation-icon li.active i:nth-child(1) {
    top: 50%;
    transform: rotate(45deg);
}

.global-navigation-icon li.active i:nth-child(2) {
    transform: scale(0);
}

.global-navigation-icon li.active i:nth-child(3) {
    top: 50%;
    transform: rotate(-45deg);
}



/* .main-content _____________________________ */
.main-content {
    position: absolute;
    width: 60vw;
    right: 10%;
    top: 10%;
    margin-top: 5%;
}

.main-content .main-entry h2 {
    text-align: right;
}

.main-content .main-entry ul,
.post_article ul.___list
 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 8%;
}

.main-content .main-entry ul li.main-entry-list,
.post_article .___list li {
    width: 48%;
    background-color: white;
    border-radius: 20px;
    padding: 2.5% 3%;
    margin-bottom: 4%;
    position: relative;
}

.main-content .main-entry ul li.main-entry-list::after,
.post_article ul.___list li::after {
    content: "";
    position: absolute;
    display: inline-block;
    border-bottom: 60px solid yellow;
    border-left: 60px solid transparent;

    right: 0;
    bottom: 0;
}

/* .___list_date */
li.main-entry-list .___list_date,
.post_contents .___date,
.post_article .___list_date {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative;

    padding-bottom: 10px;
    margin-bottom: 30px;            
}

li.main-entry-list .___list_date::before,
li.main-entry-list .___list_date::after,
li.main-entry-list .___list_set::before,
li.main-entry-list .___list_set::after,
.post_contents .___date::before,
.post_contents .___date::after,
.post_contents .___contents::before,
.post_contents .___contents::after,
.post_article .___list_date::before,
.post_article .___list_date::after,
.post_article .___list_set::before,
.post_article .___list_set::after {
    content: "";
    width: 100%;
    border-top: 1px solid black;
    position: absolute;
}

li.main-entry-list .___list_date::before,
li.main-entry-list .___list_set::before,
.post_contents .___date::before,
.post_contents .___contents::before,
.post_article .___list_date::before,
.post_article .___list_set::before{
    bottom: 0px;
}

li.main-entry-list .___list_date::after,
li.main-entry-list .___list_set::after,
.post_contents .___date::after,
.post_contents .___contents::after,
.post_article .___list_date::after,
.post_article .___list_set::after {
    bottom: -4px;
}

li.main-entry-list .___list_date .data span,
.post_contents .___date span,
.post_article .___list_date .data span {
    color: #AAA;
}

#global-head .head-logo h2,
li.main-entry-list .___list_date .number,
.post_contents .___date .number,
.post_article .___title h3,
.post_article .___list_date .number,
ul.post_next li a,
.single_post_navigation .return-to-list a,
.page .single_post_navigation a {
    background:linear-gradient(transparent 70%, yellow 100%);
}

/* .___list_set */
li.main-entry-list .___list_set {
    position: relative;
    padding-bottom: 30px;
    margin-bottom: 30px; 
}

li.main-entry-list .___list_set h3 {
    padding-bottom: 20px;
    margin-bottom: 30px;
    background-image: linear-gradient(to right, #333, #333 2px, transparent 2px);
    background-size: 3px 1px;
    background-position: left bottom;
    background-repeat: repeat-x;
}

/* .___list_set */
li.main-entry-list .___list_set p {
    position: relative;
    margin-bottom: 10px;
    padding-left: 1rem;
}

li.main-entry-list .___list_set p::before {
    content: "・";
    margin-left: -1rem;
}

/* .___list_category-tags */
li.main-entry-list .___list_category-tags,
.post_contents .___category-tags,
.post_article .___list_category-tags {
    display: flex;
    flex-wrap: wrap;
}

li.main-entry-list .___list_category-tags p,
.post_contents .___category-tags p,
.post_article .___list_category-tags p {
    background-color: #F2F2F2;
    line-height: 1;
    padding: 0.5rem ;
    border-radius: 100px;

    margin-right: 1%;
    margin-bottom: 1%;
}

li.main-entry-list .___list_category-tags p:last-of-type {
    margin-right: 0;
}

/* カテゴリーページ _________________________ */
.category .main-content .main-entry h2 {
    text-align: left;
}


/* シングルページ _________________________ */
.single .main-content .post_contents,
.page .main-content .post_contents {
    display: block;
    position: relative;
    padding: 6% 8%;

    border-radius: 20px;
    background-color: white;
}

.post_contents .___title {
   padding: 3% 0 6%;
}

.post_contents .___contents {
    display: block;
    position: relative;
    padding-bottom: 10%;
    margin-bottom: 5%;
}

/* .___contents */
.post_contents .___contents p {
    margin-bottom: 10%;
}

.post_contents .___contents p:last-of-type {
    margin-bottom: 0;
}

.post_contents .___contents h1 {
    margin-bottom: 5%;
}

.post_contents .___contents h2,
.post_contents .___contents h3,
.post_contents .___contents h4 {
    margin-bottom: 2%;
}

.post_contents .___contents h4 {
    padding: 2% 2% 1%;
    background-color: #F2F2F3;
}

/* .post_article */
.post_article {
    display: block;
    position: relative;
    margin: 15% 0 20%;
}

.post_article .___title {
    text-align: center;
}

.post_article .___title h3 {
    display: inline-block;
}

.post_article ul.___list {
    margin-top: 5%; 
}

.post_article .___list_set {
    position: relative;
    padding-bottom: 20px;
    margin-bottom: 20px; 
}

.post_article .___list li {
    margin-bottom: 0;
}

/* ul.post_return */
ul.post_return li,
.post_next li {
    text-align: center;
}

ul.post_return li a {
    line-height: 1;
    display: inline-block;

    background-color: yellow;
    border-radius: 100px;

    padding: 3% 10%;

    background-image: url("image/icon_5_normal.svg");
    background-size: 10%;
    background-position: 95% center;
    background-repeat: no-repeat;
}

ul.post_return li a:hover {
    background-color: black;
    color: white;
    background-image: url("image/icon_5_hover.svg");
}

ul.post_next li a {
    position: relative;
    display: inline-block;
    margin: 10% 0;
}

ul.post_next li a::after {
    content: "";
    position: absolute;
    display: block;
    width: 40px;
    height: 21px;
    background-image: url("image/icon_4.svg");
    bottom: -40px;
    left: 35%;
}

ul.post_return,
ul.post_return li {
    position: relative;
}

ul.post_return::before,
ul.post_return li::before,
ul.post_return::after,
ul.post_return li::after {
    content: "";
    width: 100%;
    border-top: 1px solid #AAA;
    position: absolute;
    height: 1px;
    left: 0;
}

ul.post_return::before {
    top: -40px;
}

ul.post_return li::before {
    top: -37px;
}

ul.post_return::after {
    bottom: -40px;
}
ul.post_return li::after  {
    bottom: -37px;
}

ul.post_next {
    padding: 5% 0;
    margin-top: 15%;
}

/* ページ__________ */
.page .main-content h2.title {
 text-align: center;
}

.page .main-content h2.title span {
    display: block;
}

.page .post_contents {
    margin-top: 5%;
}

.page .post_contents .___content_90 {
    width: 90%;
    margin: auto;
}

.page .post_contents .___content_90 h3,
.page.privacy h3 {
    margin-top: 10%;
    padding-left: 10px;
    border-left: 5px solid yellow;
    line-height: 1;
    margin-bottom: 3%;
}

.page .post_contents .___content_90 .skill {
    padding: 1% 0 1% 3%;
    border-left: 3px solid black;
    margin-top: 6%;
}

.page .post_contents .___content_90 table li {
    margin-bottom: 1%;
}

.page .post_contents .___content_90 table li:last-child {
    margin-bottom: 0;
}

/* .single_post_navigation */
.single_post_navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 20px 0;
    position: relative;
    margin-bottom: 250px;
}

.single_post_navigation .nav-item {
    flex: 1;
}

.single_post_navigation .previous {
    text-align: left;
    padding-left: 40px;
    background-image: url("image/icon_6.svg");
    background-position: left center;
    background-repeat: no-repeat;
}

.single_post_navigation .return-to-list {
    text-align: left;
}

.single_post_navigation .next {
    text-align: right;
    padding-right: 40px;
    background-image: url("image/icon_7.svg");
    background-position: right center;
    background-repeat: no-repeat;

}


.single_post_navigation .return-to-list {
    flex: 1;
    text-align: center;
}



.single_post_navigation::before,
.single_post_navigation::after,
.single_post_navigation .previous::before,
.single_post_navigation .next::after {
    content: "";
    position: absolute;
    border-top: 1px solid black;
    width: 100%;
    left: 0;
}

.single_post_navigation::before {
    top: -40px;
}

.single_post_navigation .previous::before {
    top: -37px;
}

.single_post_navigation::after {
    bottom: -40px;    
}

.single_post_navigation .next::after {
    bottom: -37px; 
}

/* ページ */
.page .single_post_navigation {
    justify-content: center;
    margin-top: 20%;
}

.page.privacy h4 {
    margin-top: 40px;
    margin-bottom: 5px;
}

.page.privacy .mt0{
    margin-top: 0!important;
}



/*アニメーション*/
* {
    transition: all .5s;
}

.fade-out-target {
    transition: opacity 0.2s ease-in-out;
    opacity: 1;
}

.fade-out {
    opacity: 0;
    pointer-events: none; /* ユーザーが要素と対話できないようにする */
}


@media screen and (max-width: 1180px) {
    /* .global-navigation _____________________________ */  
    ul.global-navigation {
        margin-left: 5%;
    }
   
    /* .main-content _____________________________ */
    .main-content {
        right: 5%;
    }

    .main-content .main-entry ul,
    .post_article ul.___list  {
        display: block;
    }

    .main-content .main-entry ul li.main-entry-list,
    .post_article ul.___list li {
        width: 100%;
    }

    .post_article ul.___list li {
        margin-bottom: 5%;
    }
}


@media screen and (max-width: 860px) {

    /* 共通 */
    table tr th,
    table tr td {
        display: block; /* ブロック要素にする */
    }
    
    table tr th,
    table tr td {
        width: 100%;
        border-right: none;
        padding: 3% 0;        
    }


    #global-head {
        margin-top: 8%;
    }

    .main-content {
        width: 90%;
    }

    .main-content .main-entry h2 {
        text-align: left;
    }

    .page .post_contents .___content_90 {
        width: 100%;
    }

    /* アーカイブ用 css */
    .category .main-content {
        margin-top: 10%;
    }

    /*コンテナ用*/
    .single .main-content .post_contents,
    .page .main-content .post_contents,
    .main-content .main-entry ul li.main-entry-list,
    .post_article .___list li {
        border-radius: 10px;
    }

    /*Singleページ*/
    .single_post_navigation {
        margin-bottom: 150px;
    }

    .single_post_navigation a span {
        display: none;
    }

    .single_post_navigation .previous a,
    .single_post_navigation .next a {
        display: inline-block;
        width: 60px;
        height: 60px;
    }

    .single_post_navigation .previous,
    .single_post_navigation .next {
        padding: 0;
    }

    .single_post_navigation .previous {
        margin-left: 20px;
    }

    .single_post_navigation .next {
        margin-right: 20px;
    }

    .single_post_navigation::before {
        top: -25px;
    }
    
    .single_post_navigation .previous::before {
        top: -22px;
    }
    
    .single_post_navigation::after {
        bottom: -25px;    
    }
    
    .single_post_navigation .next::after {
        bottom: -22px; 
    }




    /* サイドナビゲーション用 css　*/
    .fade-out-target {
        opacity: 0;
        pointer-events: none;
    }

    li.main-entry-list .___list_category-tags p {
        padding: 2% 3%;
    }

    /* global-navigation-icon */
    ul.global-navigation-icon {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 1000;
        display: block;
    }

    /* global-navigation */
    ul.global-navigation {
        position: fixed;
        top: 0;
        right: -100vw;
        z-index: 900;

        width: 90vw;
        height: 100vh;
       
        margin-top: 0;
        padding: 10%;

        background-color: white;

        overflow-y: auto;
        max-height: 100vh;
    }

    ul.global-navigation.active {
        right: 0;
    }

    .blurred {
        filter: blur(5px);
        pointer-events: none;
    }
}