/*Theme Name: Kazuho Hirano
 Auther: Chiaki Minami
 */
    
    @charset "utf-8";
    html {
        font-size: 62.5%;
        color: #4d4d4d;
        /*16px × 62.5%=10px*/
    }
    
    body {
        font-family: 'Kefa', Arial, Helvetica, sans-serif;
        /*overflow: hidden;*/
        line-height: inherit;
        color: #4d4d4d;
    }
    
    a {
        color: #4d4d4d;
        text-decoration: none;
        position: relative;
    }
    
    a:hover {
        color: #943d3d;
    }
    
    .myWebFontClass {
        font-family: 'Kefa', 'Kefa Regular', 'Kefa-Regular', serif !important;
    }
    
    ul {
        list-style: none;
    }
    
    li {
        margin: 0;
    }

    @font-face {
        font-family: "Kefa";
        src: url(../css/fonts/kefa-regular.woff);
    }
    /*--------------------------
 *
 *PC header
 *
-------------------------*/
    
    
    .logo {
        padding: 35px 0px 0px 0px;
        font-size: 2vw;
        letter-spacing: 1.5px;
    }
    
    .logo_img {
        max-width: inherit;
    }
    
    .photographer {
        /*font-size: 1.6rem;0922*/
        font-size: 1.1vw;
        letter-spacing: 1px;
        margin-top: 5px;
        padding-left: 2px;
    }
    
    a.noline span {
        font-size: 3rem;
    }
    
    h1 {
        line-height: 1;
    }
    
    h1>img {
        width: 100%;
        /*効いてない小さい*/
    }
    
    .header-nav {
        display: flex;
        /*ヘッダーのロゴとナビゲーションメニューを横並びにするための指示*/
        /*font-size: 16px; 0922*/
        font-size: 1.1vw;
        justify-content: space-between;
        width: 90%;
        margin: 0 auto;
    }
    
    #nav-drawer {
        display: none;
        top: 20px;
        left: 90%;
    }
    
    .nav-item__link {
        margin: 0 11px;
    }
    
    .nav-item__sns {
        margin: 0 10px;
    }
    
    .nav-menu {
        padding: 70px 0px 0px 100px;
    }

    
    header nav {
        display: flex;
        /*ナビゲーションメニューを横並びにするための指示 display flexは親要素へかける*/
    }
    
    header ul {
        display: flex;
        /*ナビゲーションメニューを横並びにするための指示 display flexは親要素へかける*/
        list-style: none;
    }
    
    .nav-list-line a {
        text-decoration: none;
    }
    
    .header-line {
        display: none;
    }
    
    .header-line-for-pc {
        width: 95%;
        border-top: solid 0.9px #898989;
        margin: auto;
    }
    
    .o {
        display: flex;
        justify-content: space-between;
        width: 90%;
        margin: 40px auto;
    }
    
    .nav-for-sp {
        display: none;
    }
    
    .nav-list-for-sp-sns {
        margin-left: 38px;
    }
    
    a.noline p {
        margin-bottom: 0;
        white-space: nowrap;
    }
    
    a::before {
        left: 50%;
    }
    
    a::after {
        right: 50%;
    }
    
    a:hover::before,
    a:hover::after {
        width: 50%;
    }
    
    a::before,
    a::after {
        border-bottom: solid 2px #5f707e;
        bottom: -5px;
        content: "";
        display: block;
        position: absolute;
        transition: all .5s ease;
        -webkit-transition: all .5s ease;
        width: 0;
    }
    
    a.noline::before,
    a.noline::after {
        text-decoration: none;
        border-bottom: none;
    }
    
    .nav-open {
        display: none;
    }
    
    #nav-content {
        display: none;
    }
    /*-----------------------------------------
 *スマホ headerエリア
 *----------------------------------------*/
    
    @media screen and (max-width:768px) {
        .btn-pageTop {
            display: none;
        }
        #nav-drawer {
            display: block;
            margin-top: 5%;
        }
        h1 {
            text-align: center;
        }
        img {
            width: 100%;
        }
        .logo {
            display: block;
            margin: 0;
            padding: 10% 0 0 10%;
            font-size: 2.5rem;
            text-align: left;
            letter-spacing: 1.3px;
        }

        .photographer {
            font-size: 2rem;
        }
        a.noline p {
            margin-bottom: 0;
        }
        a.noline span {
            font-size: 2.5rem;
        }
        .all {
            padding: 80px 0px 40px 0px;
        }
        h1 a img {
            width: 60%;
            padding-left: 20px;
        }
        a::before,
        a::after {
            display: none;
        }
        .nav-menu {
            display: none;
        }
        .header-line {
            display: block;
            border-top: 1px solid #696969;
            width: 90vw;
            margin-left: 5%;
            margin-bottom: 5%;
        }
        .header-line-for-pc {
            display: none;
        }
        .header-nav.hide {
            transform: translateY(-130%);
        }
        /*アイコンのスペース*/
        .nav-open {
            display: block;
            width: 30px;
            height: 22px;
            vertical-align: middle;
            position: relative;
            z-index: 3;
            top: 30%;
        }
        /*ハンバーガーの形をCSSで表現*/
        .nav-open span {
            position: absolute;
            height: 2px;
            width: 25px;
            border-radius: 3px;
            background: #555;
            display: block;
            content: '';
            cursor: pointer;
            transition: all 0.5s ease;
        }
        .nav-open span.bar1 {
            top: 10px;
        }
        .nav-open span.bar2 {
            top: 20px;
        }
        .nav-open span.bar3 {
            top: 30px;
        }
        .nav-open.close .bar1 {
            transform: translate(-50%, 12px) rotate(45deg);
            transition: transform .3s;
        }
        .nav-open.close .bar2 {
            opacity: 0;
            transition: opacity .3s;
        }
        .nav-open.close .bar3 {
            transform: translate(-50%, -8px) rotate(-45deg);
            transition: transform .3s;
        }
        #nav-content {
            width: 100%;
            height: 100%;
            background-color: #fff;
            z-index: 2;
            position: fixed;
            left: 0;
            top: 0;
            display: block;

            visibility: hidden;
            transition: opacity 1s ease, visibility 1s;
            pointer-events: none;
            opacity: 0;
        }
        #nav-content ul {
            display: block;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        #nav-content li {
            margin-right: 0;
            margin-bottom: 40px;
            font-size: 2rem;
        }

        #nav-content.is-active {
            visibility: visible;
            opacity: 1;
            pointer-events: auto;
        }
        .header-nav {
            display: flex;
            display: -moz-flex;
            display: -o-flex;
            display: -webkit-flex;
            display: -ms-flex;
            flex-direction: row;
            -moz-flex-direction: row;
            -o-flex-direction: row;
            -webkit-flex-direction: row;
            -ms-flex-direction: row;
        }
        .nav-for-sp {
            display: flex;
            margin: 0 40%;
            font-size: large;
        }
        .nav-for-sp-2 {
            display: flex;
            margin: 15% 35%;
            position: absolute;
            font-size: large;
            top: 70%;
        }
        .nav-for-sp p {
            margin: 0 20px;
        }
        .nav-for-sp-2 p {
            margin: 0 20px;
        }
        .header-nav {
            width: 100%;
            position: fixed;
            background-color: #fff;
            z-index: 999;
            padding-bottom: 20px;
            transition: .5s;
        }
        .header-nav-for-sp-flex {
            display: flex;
            justify-content: space-between;
        }
        .header-nav-for-sp-block {
            display: block;
        }
    }
    /*--------------------------
*
*PC main PC
*
-------------------------*/
    
    .main {
        /*width: 100%;*/
        width: 90%;
        max-width: 1280px;
        min-width: 800px;
        margin: 50px auto;
    }
    
    .main-all {
        display: flex;
        width: 90%;
        margin: 0 auto;
    }
    
    .main-img img {
        width: 100%;
        height: auto;
        vertical-align: bottom;
        image-rendering: -webkit-optimize-contrast;
    }
    
    .main-all-for-archive {
        column-count: 4;
        -webkit-column-count: 4;
        -moz-column-count: 4;
        column-count: 4;
        /*column-fill: auto;*/
        -webkit-column-fill: auto;
        -moz-column-fill: auto;
        -webkit-column-gap: 15px;
        -moz-column-gap: 15px;
        column-gap: 15px;
        margin: 2% 5%;
        text-align: center;
    }
    
    .line-one {
        width: 95%;
        display: inline-block;
        background: #FEFEFE;
        margin: 13px 0 5px 0;
        break-inside: avoid;
        position: relative;
        -webkit-column-break-inside: avoid;
        -moz-column-break-inside: avoid;
    }
    
    .text__arrange {
        display: none;
        position: absolute;
    }
    
    .noline:hover .text__arrange {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #fff;
        top: 0;
        left: 0%;
        width: 100%;
        height: 100%;
        background-color: #333;
        opacity: .7;
        z-index: 9999;
    }
    
    .single-main {
        padding-top: 40px;
    }
    
    @media screen and (max-width:768px) {
        /*-----------------------------------------
 *スマホ mainエリア
 *----------------------------------------*/
        .main-all {
            display: block;
            padding-top: 45%;
        }
        .main-wrap {
            padding-top: 40%;
        }
        .line-one {
            width: 90%;
            display: inline-block;
            background: #FEFEFE;
            margin: 0;
            break-inside: avoid;
            position: relative;
            -webkit-column-break-inside: avoid;
        }
    }
    /*--------------------------
*
*PC (個別ページ　fasnion,beauty,portrait)エリア
*
-------------------------*/
    
    .single-title {
        text-align: center;
    }
    
    h2 {
        text-align: center;
        font-size: 1.1vw;
        margin-top: 35px;
        margin-bottom: 0px;
        letter-spacing: 0.5px;
        color: #4d4d4d;
    }
    
    .single-wrap {
        margin: 1.5% 5%;
    }
    
    .grid {
        width: 100%;
    }
    
    .grid::after {
        content: '';
        display: block;
        clear: both;
    }
    
    .main-img {
        
        width: 22.5%;
        float: left;
        margin-bottom: 10px;
    }
    
    .main-img-1 {
        background: #FEFEFE;
        margin: 5px 0;
        break-inside: avoid;
        position: relative;
        -webkit-column-break-inside: avoid;
    }
    
    .main-img-1 img {
        width: 100%;
    }
    
    .main-img img {
        display: block;
        width: 100%;
    }
    
    .h2-for-pc-left {
        text-align: left;
        margin-left: 5.8%;
    }
    
    @media screen and (min-width:769px) {
        .h2-for-sp {
            display: none;
        }
    }
    
    @media screen and (max-width:768px) {
        /*-----------------------------------------
*スマホ (fasnion,beauty,portrait)エリア
*----------------------------------------*/
        .main-all-for-archive {
            column-count: 1;
            margin: 2% 0%;
        }
        .single-main-all-for-archive {
            column-count: 1;
            margin: 1.5% 4%;
        }
        .main-img {
            width: 90%;
            height: auto;
            margin-top: 10px;
        }
        h2 {
            text-align: center;
            font-size: 15px;
            letter-spacing: 1.5px;
            margin: 0;
        }
        .h2-for-sp {
            margin-left: 10%;
        }
        .h2-for-pc {
            display: none;
        }
    }
    /*--------------------------
*
*PC (movie)エリア
*
-------------------------*/
    
    .pc_thumbnail {
        width: 90vw;
        margin: 30px auto 0 auto;
        justify-content: space-between;
        overflow: hidden;
    }
    
    .movie_wrap {
        display: flex;
        flex-wrap: wrap;
        text-align: center;
    }
    
    .whitebox_movie {
        width: 30%;
        height: 335px;
        margin: 0 1%;
    }
    
    @media screen and (max-width:768px) {
        /*-----------------------------------------
*スマホ (fasnion,beauty,portrait)エリア
*----------------------------------------*/
        .movie_wrap {
            display: block;
        }
        .whitebox_movie {
            width: 100%;
        }
    }
    /*--------------------------
*
*PC about PC
*
-------------------------*/
    
    
    .name {
        font-size: 2.8rem;
        margin-bottom: 28px;
        margin-top: 60px;
        font-size: 2vw;
        color: #4d4d4d;
        text-align: center;
    }
    
    
    .about-english {
        font-size: 14px;
        margin-top: 5px;
        letter-spacing: 0.5px;
    }
    
    .sp_profile {
        display: none;
    }
    
    .profile hr,
    .client hr {
        display: none;
    }
    
    .jp-name {
        margin-bottom: 0;
        font-size: 20px;
    }
    /*日本語の部分のcss*/
    
    .jp-text {
        display: flex;
    }
    
    
    .jp-text-year {
        padding-right: 10px;
        margin-bottom: 0;
    }
    
    .jp-text-content {
        margin-bottom: 2rem;
    }
    
    
    .en-text {
        display: flex;
    }
    
    .plofile-between {
        display: flex;
        justify-content: space-between;
        width: 620px;
        margin: 48px auto 0;
        color: #4d4d4d;
    }
    
    .client {
        margin: 0 auto;
        width: 650px;
        color: #4d4d4d;
    }
    
    .client_ {
        font-size: 16px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    
    .sp_clientlist {
        font-size: 16px;
        font-weight: bold;
    }
    
    .sp_clientlist span {
        display: none;
    }
    
    .client p {
        line-height: 25px;
    }
    
    .br-sp {
        display: none;
    }
    
    @media screen and (max-width:768px) {
        /*-----------------------------------------
*スマホ about エリア
*----------------------------------------*/
        .whitebox__about {
            display: block;
            margin: auto;
            width: auto;
            height: auto;
            color: #666;
            background-color: #ffffff;
            padding: 10px 40px 0 40px;
        }
        .name {
            font-size: 1.6rem;
            margin-bottom: 0;
            padding-bottom: 25px;
            margin-top: 30px;
        }
        .profile {
            font-size: 1.3rem;
            margin: 0 0 35px 0;
            display: block;
        }
        .sp_profile {
            display: block;
            font-size: 1.4rem;
        }
        .sp_profile span {
            padding-left: 10px;
            font-size: 10px;
            font-weight: bold;
        }
        .profile hr {
            display: block;
            border-width: 0.5px 0px 0px 0px;
            border-style: solid;
            border-color: #5f707e;
            padding-left: 0;
            margin: 5px 0;
        }
        .plofile-between {
            display: flex;
            justify-content: space-between;
            margin: 20px auto 0;
            color: #4d4d4d;
            width: auto;
        }
        .jp-text {
            padding-top: 10px;
            padding-bottom: 15px;
            padding-left: 0px;
        }
        .jp-text_space {
            line-height: inherit;
        }
        .ul-jp-text {
            margin-bottom: 0;
        }
        .ul-jp-text p {
            margin: 0
        }
        .ul-en-text {
            display: none;
        }
        .br-jp-text_01::after {
            content: "Born in Kyoto & rased in Osaka Graduated from Kyoto Seika Univ.";
            color: #c0c0c0;
            font-size: 1.2rem;
            display: block;
            letter-spacing: initial;
            width: 200px;
        }
        .br-jp-text_02::after {
            content: "Join Gaien Studio";
            color: #c0c0c0;
            font-size: 1.2rem;
            display: block;
        }
        .br-jp-text_03::after {
            content: "Working as assistant to AKINORI ITO";
            color: #c0c0c0;
            font-size: 1.2rem;
            display: block;
        }
        .br-jp-text_04::after {
            content: "Become freelance photographer";
            color: #c0c0c0;
            font-size: 1.2rem;
            display: block;
        }
        .client {
            margin: 0 auto;
            width: auto;
            padding-top: 0px;
        }
        .client p {
            font-size: 12px;
            margin-top: 15px;
            line-height: 20px;
        }
        .br-pc {
            display: none;
        }
        .br-sp {
            display: block;
        }
        .client hr {
            display: block;
            border-width: 0.5px 0px 0px 0px;
            border-style: solid;
            border-color: #5f707e;
            padding-left: 0;
            margin: 5px 0;
        }
        .client_ {
            font-size: 1.4rem;
            padding-top: 5px;
            padding-bottom: 0;
        }
        .sp_clientlist {
            font-weight: inherit;
            font-size: 1.4rem;
        }
        .sp_clientlist span {
            padding-left: 10px;
            font-size: 10px;
            font-weight: bold;
            display: initial;
        }
    }
    /*--------------------------
*
*PC contact PC
*
-------------------------*/
    
    .whitebox__contact {
        height: 584px;
    }
    
    
    .contact__text a {
        letter-spacing: 1.3px;
    }
    
    .contact___text {
        
        font-family: 'Kefa';
        margin-top: 6%;
    }
    
    .contact_flex {
        display: flex;
        width: fit-content;
        width: 250px;
        margin: 0 auto;
    }
    
    .contact_tel {
        margin-right: 20px;
        margin-left: 15px;
    }
    
    .contact_mail {
        margin-right: 10px;
        margin-left: 15px;
    }
    
    .contact_title {
        margin-bottom: 90px;
    }
    
    p.contact__text {
        text-decoration: underline;
    }
    
    .contact-sns {
        display: flex;
        font-size: 1.4vw;
        justify-content: space-between;
        width: 5%;
        margin: 5% auto 0;
    }
    
    
    @media screen and (max-width:768px) {
        /*-----------------------------------------
*スマホ contact エリア
*----------------------------------------*/
        .whitebox__contact {
            height: auto;
            padding: 0 40px;
        }
        .contact_title {
            padding: 0;
            text-align: left;
            margin: 0;
        }
        .contact__text {
            font-size: 1.3rem;
            margin-left: 0px;
            padding-bottom: 0;
        }
        .contact_underline {
            margin: 20px 0 0 0;
        }
        .contact_flex {
            display: flex;
            margin-top: 15px;
        }
        .contact___text {
            padding-top: 0px;
            margin-top: 15%;
        }
        .contact-sns {
            display: none;
        }
    }
    /*--------------------------
*
*PC footer PC
*
-------------------------*/
    
    .footer {
        font-family: 'Kefa';
    }
    
    .text-center {
        text-align: center;
    }
    
    #btn-pageTop {
        display: none;
    }
    
    #btn-pageTop a {
        font-size: 1.6rem;
        background: rgba(194, 193, 193, 0.75);
        text-decoration: none;
        color: #000;
        width: 60px;
        padding: 20px 0;
        text-align: center;
        display: block;
        border-radius: 2px;
    }
    
    #btn-pageTop a:hover {
        text-decoration: none;
        background: rgba(194, 193, 193, 1);
    }
    
    .footer .nav-list {
        display: flex;
        list-style: none;
        position: absolute;
        right: 5%;
    }
    
    .all-footer {
        border-top: 1px solid #898989;
        text-align: center;
        width: 93%;
    }
    
    .footer p {
        position: relative;
    }
    
    @media screen and (max-width: 768px) {
        .footer {
            font-size: 0.8rem;
            padding: 0;
        }
        .all-footer {
            display: block;
            border-style: solid;
            border-color: #696969;
            padding-left: 0;
            width: 91%;
        }
        .footer .nav-list {
            display: flex;
            list-style: none;
            width: 23%;
            justify-content: space-between;
            margin: 20px auto;
            position: initial;
            font-size: 18px;
        }
        #btn-pageTop {
            position: fixed;
            bottom: 1px;
            right: 20px;
            font-size: 77%;
        }
        .fa-xs {
            font-size: 2rem;
        }
    }
    /*ここからsingle.htmlの移植*/
    
    .single-container {
        display: flex;
        flex-wrap: wrap;
    }
    
    .tate img {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
        line-height: 1.0em;
        object-fit: cover;
    }
    
    .yoko img {
        width: 100%;
        height: 100%;
        vertical-align: bottom;
        line-height: 1.0em;
        object-fit: cover;
        object-fit: cover;
    }
    
    .tate {
        width: 24.5%;
        font-size: 0%;
        margin: 0.25%;
    }
    
    .yoko {
        width: 49.5%;
        font-size: 0%;
        margin: 0.25%;
    }
    
    @media screen and (max-width:768px) {
        /*-----------------------------------------
    *スマホ single-pageエリア
    *----------------------------------------*/
        .single-container {
            display: block;
        }
        .tate {
            width: 100%;
            margin: 1% 0;
        }
        .yoko {
            width: 100%;
            margin: 1% 0;
        }
    }
    /*-----------------------------------------
    magnific Popup ＋　Slick slider
    *----------------------------------------*/
    /*  c-list-sample
    --------------------------------------------- */
    
    .c-list-sample {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    
    .c-list-sample__item {
        width: 24%;
    }
    
    .c-list-sample__item img {
        width: 100%;
    }
    /*  c-modal-slider
    --------------------------------------------- */
    
    .c-modal-slider .slick-arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
        height: 60px;
    }
    
    .c-modal-slider .slick-arrow::before {
        color: #fff;
        font-size: 5rem;
    }
    
    .c-modal-slider .slick-arrow.slick-prev {
        left: calc(2% - 10px);
        z-index: 1;
    }
    
    @media screen and (max-width: 767px) {
        .c-modal-slider .slick-arrow.slick-prev {
            left: 10px;
        }
    }
    
    .c-modal-slider .slick-arrow.slick-next {
        right: calc(5% - 40px);
    }
    
    @media screen and (max-width: 767px) {
        .c-modal-slider .slick-arrow.slick-next {
            right: 10px;
        }
    }
    
    .c-modal-slider__slide {
        margin-right: 4vw;
        margin-left: 4vw;
        padding: 0px;
        text-align: center;
    }
    
    .c-modal-slider__slide img {
        /*width: 100%;
        margin: 0 auto;*/
        height: 70vw;
        max-height: 750px;
        /*800*/
        min-height: 700px;
        /*700*/
    }
    
    @media screen and (max-width: 767px) {
        .c-modal-slider__slide {
            margin-right: 0;
            margin-left: 0;
        }
    }
    /*  c-modal-close
    --------------------------------------------- */
    
    .c-modal-close {
        position: absolute;
        top: 1%;
        /*元々-1.5emだった*/
        right: 1%;
        color: #fff;
        font-size: 5rem;
        /*元々2rem*/
        cursor: pointer;
        border: 0px;
        background-color: transparent;
    }
    /* -- その他 -- */
    
    img {
        max-width: 100%;
        height: auto;
        vertical-align: middle;
    }
    
    .c-list-sample {
        margin-top: 50px;
    }
    
    .slick-slide {
        height: auto;
    }
    
    .slick-next {
        right: 50px;
    }
    /*slick sliderの矢印を変更、safariの際に矢印のCSS崩れるを防ぐ*/
    
    .slick-prev::before {
        content: "";
        line-height: inherit;
    }
    
    .slick-next::before {
        content: "";
        line-height: inherit;
    }

    .hiranokazuho {
        font-weight: bold;
    }