/*
Template:ystandard
Theme Name:ystandard-child
Theme URI: https://wp-ystandard.com
Author: yosiakatsuki
Author URI: https://yosiakatsuki.net
Description:「自分色に染めた、自分だけのサイトを作る楽しさ」を感じてもらうために作った一風変わったWordPressテーマ「ystandard」の子テーマ
Version: 4.0.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

html {
    scroll-behavior: smooth;
}

ul {
    margin: 0;
}

ul li {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    letter-spacing: .1em;
}

p {
    margin: 0;
    letter-spacing: .1em;
}

img {
    width: 100%;
}

:root {
    --white: #fff;
    --black: #333;
    --glay: #575757;
    --font35: 2.2rem;
    --font25: 1.56rem;
    --font22: 1.375rem;
    --font20: 1.25rem;
    --font16: 1rem;
    --font14: 0.875rem;
}


body {
    background-color: #F0F0F0;
    font-family: "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", sans-serif;
    color: var(--black);
    letter-spacing: .1em;
}

.container {
    width: 100%;
    max-width: 1080px;
    margin-inline: auto;
}

.inner {
    width: 100%;
    max-width: 800px;
    margin-inline: auto;
}

.lato-regular {
    font-family: "Lato", sans-serif;
    font-weight: 400;
}

.lato-bold {
    font-family: "Lato", sans-serif;
    font-weight: 700;
}

.center {
    text-align: center;
}

.m-center {
    margin-inline: auto;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}

.bold {
    font-weight: 700;
}

.medium {
    font-weight: 400;
}

.mgt100 {
    margin-top: 100px;
}

.mgt80 {
    margin-top: 80px;
}

.mgt50 {
    margin-top: 50px;
}

.mgt30 {
    margin-top: 30px;
}

.mgt20 {
    margin-top: 20px;
}

.mgt10 {
    margin-top: 10px;
}


.mgb50 {
    margin-bottom: 50px;
}


header {

    .header-ico {
        width: 100%;
        max-width: 94px;
    }

    .menu {
        gap: 40px;
    }
}

main {

    padding: 210px 0;

    h1 {
        font-size: var(--font35);
    }
    
    p {
        font-size: var(--font20);
        letter-spacing: 0.5em;
        margin-top: 10px;
    }
}

.section-title {
    font-size: var(--font25);
    font-family: "Lato", sans-serif;
    font-weight: 700;
    text-align: center;
}

section {
    padding: 100px 0;
}

section.skill {

    .skill-set-wrap {
        padding: 100px 0 80px;
        align-items: stretch;
        flex-wrap: wrap;
        gap: 50px 0;

        .skill-set {
            width: 47%;
            display: flex;
            flex-direction: column;

            .skill-name {
                font-size: var(--font22);
            }
        
            figure {
                width: 100%;
                max-width: 84px;
            }

            .skill-tx {
                flex-grow: 1;
            }
        }

        .skill-img {
            display: block;
        }
    }
}

section.works {
    .works-cat {
        color: var(--white);
        background-color: var(--black);
        font-size: var(--font16);
        display: inline-block;
        padding: 5px 10px;
    }

    .works-item-wrap {
        gap: 40px 0;

        .works-item {
            width: 32%;
            display: block;
        }

        .works-item:hover p {
            color: #2980b9;
            transition: all .3s;
        }

        p {
            line-height: 1.3;
            font-size: var(--font14);
            color: var(--glay);
        }

    }

    .works-item-wrap::after {
        content:"";
        display: block;
        width: 32%;
    }
}

section.about {

    .portrait {
        width: 100%;
        max-width: 150px;
    }

    .about-tx-wrap {
        width:75%;
    }

}

.footer {
    margin: 200px 0 50px;

    .menu {
        gap: 40px;
    }
}


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

    :root {
        --font35: 1.75rem;
        --font25: 1.25rem;
        --font22: 1.1rem;
        --font20: 1rem;
        --font16: 0.8rem;
        --font14: 0.7rem;
    }

    .mgt100 {
        margin-top: 40px;
    }
    
    .mgt80 {
        margin-top: 40px;
    }
    
    .mgt30 {
        margin-top: 15px;
    }
    
    .mgt20 {
        margin-top: 15px;
    }
    
    .mgt10 {
        margin-top: 10px;
    }
    
    .mgb50 {
        margin-bottom: 30px;
    }

    p {
        font-size: var(--font16);
    }

    .inner {
        padding: 0 5%;
    }

    header {
        margin-top: 20px;

        .header-ico {
            width: 11.75vw;
            min-width: 50px;
        }

        .menu {
            gap: 5vw;
    
            ul li {
                font-size: clamp (0.75rem, 2vw, 1rem);
            }
        }
    }

    main {
        padding: 100px 0;

        h1 {
            font-size: clamp( 1.5rem ,4.375vw, 2.2rem);
        }

        p {
            font-size: clamp( 0.75rem,2vw, 1rem)
        }
    }

    section {
        padding: 50px 0 0;
    }

    section.skill {
        .skill-set-wrap {
            padding: 60px 5%;
            display: block;

            .skill-set {
                width: 100%;
            }

            .skill-set + .skill-set {
                margin-top: 30px;
            }
        }
    }

    section.works {
        .works-item-wrap {
            display: block;

            .works-item {
                width: 80%;
                margin-inline: auto;

                p {
                    margin-top: 10px;
                }
            }

            .works-item + .works-item {
                margin-top: 30px;
            }
        }
    }

    section.about {
        .about-item {
            display: block;

            .portrait {
                margin-inline: auto;
                max-width: 100px;
            }

            .about-tx-wrap {
                width: 100%;
                margin-top: 30px;
            }
        }    
    }

    .footer {
        margin: 80px 0 20px;

        .manu-outer {
            display: block;

            .menu {
                gap: 5vw;
                justify-content: flex-start;
                padding-left: 5%;
            }

            p {
                text-align: right;
                margin-top: 15px;
                font-size: 10px;
            }
        }
    }
}

/* works詳細ページ */  

section.works-page {
    .none {
        display: none;
    }

    .works-page-title {
        p {
            font-size: var(--font25);
        }
    }

    .works-contnt {
        justify-content: flex-start;
        flex-wrap: nowrap;
        align-items: flex-start;

        .works-content-label {
            min-width: 8em;
        }

        .works-contnt-tx {
            display: flex;
        }

        .works-contnt-tx::before {
            content: '：';
            display: inline-block;
            padding-right: 0.2em;
        }

    }

    .wp-block-video {
        width: 50%;
        margin-inline: auto;
    }

    .wp-block-video +.wp-block-video {
        margin-top: 20px;
    }
}

/* ポップアップ */

input {
    display: none;
}


/* ポップアップwindow部分 */
#overlay,#overlay2 {
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 70;
    width: 100%;
    height: 100%;
}
/* オーバーレイの背景部分 */
.bg_gray {
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 80;
}
/* ウィンドウ部分 */
#window,#window2 {
    width: 50%;
    padding: 20px;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
    border-radius: 10px;
    box-shadow: 0px 0px 20px -6px rgba(0,0,0,0.6);
    z-index: 90;
    opacity: 0;
}

/* 閉じるボタン */
.btn_cloth {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #2980b9;
    border-radius: 5px;
    z-index: 100;
    cursor: pointer;
}
.btn_cloth:hover {
    opacity: 0.7;
}
.btn_cloth span,
.btn_cloth span::before {
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background: #fff;
}
.btn_cloth span {
    transform: rotate(45deg);
}
.btn_cloth span::before {
    content: "";
    position: absolute;
    bottom: 0;
    transform: rotate(-90deg);
}

/* クリックで表示 */
#popup:checked ~ #overlay,#popup2:checked ~ #overlay2  {
    visibility: visible;
}
#popup:checked ~ #overlay #window,#popup2:checked ~ #overlay2 #window2  {
    animation: fadein 500ms forwards;
    animation-timing-function: ease-in-out;
}
@keyframes fadein {
    100% {
        opacity: 1;
    }
}

.msg {
    iframe {
        aspect-ratio: 16 / 14;
        width: 70%;
        height: 100%;
        border: none;
    }
}

.msg_pc {
    iframe {
        aspect-ratio: 16 / 14;
        width: 100%;
        height: 100%;
        border: none;
    }
}

/* ボタンのスタイル */
.buttonIconText {
    display: flex;
    gap: 8px;
    align-items: center;
    width: 100%;
    max-width: 320px;
    height: 64px;
    padding: 8px 40px 8px 8px;
    font-family: sans-serif;
    font-size: 16px;
    color: #fff;
    text-align: center;
    overflow-wrap: anywhere;
    background-color: #333;
    border-radius: 32px; /* (buttonの高さ / 2) の値 */
}
  
.buttonIconText__reverse {
    flex-direction: row-reverse;
    padding: 8px 8px 8px 40px;
}
  
.buttonIconText_icon {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 48px;
    aspect-ratio: 1;
    padding: 4px;
    overflow: hidden;
    background-color: #fff;
    border-radius: 50%;
}
  
.buttonIconText_text {
    flex-shrink: 1;
    width: 100%;
}
  
@media (any-hover: hover) {
    .buttonIconText {
        transition: background-color 0.2s;
    }

    .buttonIconText_icon_item {
        transition: background-color 0.2s;
    }

    .buttonIconText:hover {
        background-color: #2980b9;
    }
}

.design-btn {
    justify-content: flex-start;
    gap: 1em;

    .btn {
        cursor: pointer;
    }
}


.works-main-img {
    display: block;

}

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

    #window, #window2 {
        width: 80%;
    }

    .msg {
        iframe {
            width: 100%;
        }
    }
}



@media screen and (max-width:690px) {
    .design-btn {
        justify-content: center;
        margin-top: 30px;
    }
}

.wp-block-gallery.has-nested-images figure.wp-block-image:has(figcaption):before {
    -webkit-backdrop-filter: none;
     backdrop-filter: none;
}

.wp-block-gallery.has-nested-images figure.wp-block-image figcaption {
    font-weight: 800;
}

/* 次の記事、前の記事のナビゲーションのスタイル */

.p-post-nav {
    margin-top: 80px;
}

.nav-links {
    font-size: 16px;
    display: flex;
  }
  .nav-links div[class^="nav-"] {
    width: 50%;
  }
  .nav-links .nav-next {
    margin-left: auto;
  }
  .nav-links .nav-previous + .nav-next {
    margin-left: -1px;
  }
  .nav-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 3.5em;
    border: 1px solid #ddd;
  }
  @media (max-width: 767px) {
    .nav-links {
      font-size: 14px;
    }
  }