@charset "UTF-8";
/*
Theme Name: TZK Ver.2
Theme URI: http://masahirotozaki.com
Description: A theme by <a href="http://ku-g.jp">KUG</a>.
Version: 2.0
Author: Uichiro Kobayashi
Author URI: http://ku-g.jp
*/
/* CSS Document
----------------------------------------
Default Reset   common Style Seet
---------------------------------------- */
/* ----------------------------------------
1-1.ブラウザ初期設定リセット
---------------------------------------- */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, strong, dl, dt, dd, ol, ul, li, form, label, legend, table, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, nav, section, audio, video, a {margin: 0;padding: 0;border: 0;line-height: 1;font-size: 100%;font-style: normal;font-weight: normal;font-variant: normal;font-family: 'ABeeZee', sans-serif; box-sizing: border-box;user-select:none;-webkit-user-select:none;-moz-user-select:none;-khtml-user-select:none;-webkit-user-drag:none;-khtml-user-drag:none;}
article, aside, figure, footer, header, nav, section {display: block;}
nav, ul, ol, li { list-style-image: none;list-style-type: none;}
img { border: none;}
area{border:none;outline:none;}
*:focus {outline: none;}
/* ----------------------------------------
1-2.クリア
---------------------------------------- */
ul:after ,dl:after ,.clearfix:after ,#container:after ,#wrapper:after ,#header:after{ content:".";  height:0; clear:both; display:block;  visibility:hidden;font-size:0.1px;}
ul ,dl ,.clearfix ,#container ,#wrapper ,#header{zoom:1;}
/* ----------------------------------------
1-3.リンク
---------------------------------------- */
a {opacity:1;}
a:hover{cursor: pointer;}
.txt_substitution{text-indent: 100%;white-space: nowrap;overflow: hidden;font-size: 0;}

/* ----------------------------------------
1-4.PC / SP切替
---------------------------------------- */

.pc_style{display: block!important;}
@media (max-width:768px){.pc_style{display: none!important;visibility: hidden!important;height: 0!important;  }}
.sp_style{display: none!important;visibility: hidden;height: 0!important;}
@media (max-width:768px){.sp_style{display: block!important;visibility: visible!important;height: auto!important;}}

/* ----------------------------------------
2-1.toggle_btn
---------------------------------------- */
/* #head{position: fixed; top:0; z-index: 3000;} */
/*   PC Toggle */
#dropmenu {position: relative;width:30px;height: 40px;margin: 0 auto 300px;padding: 0;
}
#dropmenu .dropmenu_inner {width: 20%;float: left;margin: 0;padding: 0;text-align: center;
}
#dropmenu .dropmenu_inner > ul > li > a {display: block;margin: 0;padding: 0 0 11px;color: #fff;font-size: 14px;font-weight: bold;line-height: 1;text-decoration: none;text-indent: -9999px;width: 55px;height: 16px;
}
#dropmenu .dropmenu_inner .dropmenu_inner_block {list-style: none;position: absolute;top: 108px;left: 13px;margin: 0;padding: 0;
}
#dropmenu .dropmenu_inner .dropmenu_inner_block > li{overflow: hidden;width: 100px;height: 0;color: #fff;-moz-transition: .2s;-webkit-transition: .2s;-o-transition: .2s;-ms-transition: .2s;transition: .2s;
}
#dropmenu .dropmenu_inner .dropmenu_inner_block li a{text-align: left; font-weight: normal;}
#dropmenu > .dropmenu_inner:hover a{border-radius: 3px 3px 0 0;}
/* #dropmenu .dropmenu_inner:hover .dropmenu_inner_block > li{overflow: visible;height: 20px;} */
#dropmenu .dropmenu_inner:hover .dropmenu_inner_block > li:first-child{border-top: 0;}
#dropmenu .dropmenu_inner:hover .dropmenu_inner_block > li:last-child{border-bottom: 0;}


#dropmenu > li.dropmenu_inner:hover .dropmenu_inner_block > li {overflow: visible;height: 20px;
}
#dropmenu .dropmenu_inner .dropmenu_inner_block > li {overflow: hidden;height: 0;transition: height .2s;
}

/* ホバー時に展開 */
#dropmenu > li.dropmenu_inner:hover .dropmenu_inner_block > li {overflow: visible;height: 20px;
}
.menu {display: none;
}
/* ハンバーガー（/* COMMENTED OUT:
.switch）は常に見せる */
.switch {display: block;
}
*/

/* メニュー（.menu）はPCでは非表示、SPでは表示 */
.menu {display: none;
}
@media screen and (max-width: 768px) {.menu {  display: none;}
}
/* COMMENTED OUT:
.switch {width: 30px;height: 22px;position: relative;cursor: pointer;display: block;z-index: 1000;
}
*/

/* もともとのスタイルを少しだけ補強する */
/* COMMENTED OUT:
.bar {width: 40px;height: 2px;background: #000;display: block;margin: 8px auto;transition: all 0.3s;position: absolute; /* ←これ追加！ */left: 0; /* ←これも追加！ */
}
*/

/* それぞれのバーの位置 */
#bar01 {top: 0;
}

#bar02 {top: 9px;
}

#bar03 {top: 18px;
}

/*

 burger / Close

 */
.burger {  margin: 34px 10px 10px 8px; display: inline-block; width: 30px;  height: 63px;}
.burger span,
.burger span:before,
.burger span:after { display: block; width: 100%; height: 3px; background: #808080; transition: all 0.5s; backface-visibility: hidden;}

.dropmenu_inner:hover .burger span,
.dropmenu_inner:hover .burger span:before,
.dropmenu_inner:hover .burger span:after {background: #000;}

.burger span { position: relative;margin: 24px 0 0;}
.burger span:before,
.burger span:after {position: absolute;content: "";}
.burger span:before {top: -10px;}
.burger span:after {top: 10px;}
.panel_hover .panel_hover_g{display: block;}
.panel_hover:hover .panel_hover_g{display: none;}
.panel_hover .panel_hover_b{display: none;}
.panel_hover:hover .panel_hover_b{display: block;}
.panel_hover_top{margin-left: -3px;}

@media (max-width:768px){/* COMMENTED OUT:
.switch {left: -90%;top: 24px;z-index: 9999; }
*/}

/* COMMENTED OUT:
.switch_menu {display: none;float: right;margin: 0 0 0 0;width: 95px;}
*/
@media (max-width:768px){/* COMMENTED OUT:
.switch_menu {float: none;margin: -5px 0 15px 0;width: auto;}
*/}

/* COMMENTED OUT:
.switch_menu li{float: none;height:13px;margin: 0 0 13px 0;text-align: right;width: 95px;}
*/
@media (max-width:768px){
/* COMMENTED OUT:
.switch_menu li{ height: auto; margin: 0 auto 16px;text-align: center;width: 50%;}
*/
/* COMMENTED OUT:
.switch_menu li img{display: block; margin: auto; width: 25%;}
*/
/* COMMENTED OUT:
.switch_menu .switch_menu02{margin: 0 0 7px 0;}
*/
.sp_style /* COMMENTED OUT:
.switch_menu a:hover{opacity: 1;}
*/
}

/* COMMENTED OUT:
.switch a {display: block;margin-bottom: 1px;padding: 12px;background-color: #ff5b6b;color: #ffffff;text-decoration: none;text-align: center;}
*/
/* COMMENTED OUT:
.switch /* COMMENTED OUT:
.bar {display: inline-block;width: 20px;height: 2px;background-color: #808080;position: absolute;left: 0;transition: .15s ease-in-out;}
*/
*/
#bar01 {top: 0;}
#bar02 {top: 6px;}
#bar03 {top: 12px;}
.active #bar01 {top: 7px; -webkit-transform:rotate(45deg);transform: rotate(45deg);}
.active #bar02 {width: 0;}
.active #bar03 {top: 7px;-webkit-transform:rotate(-45deg); transform: rotate(-45deg);}


/* COMMENTED OUT:
.switch span {display: block;width: 30px;height: 3px;margin: 6px auto;background-color: #333;transition: all 0.3s ease;
}
*/

/* COMMENTED OUT:
.switch.active #bar01 {transform: rotate(45deg) translate(5px, 5px);
}
*/
/* COMMENTED OUT:
.switch.active #bar02 {opacity: 0;
}
*/
/* COMMENTED OUT:
.switch.active #bar03 {transform: rotate(-45deg) translate(5px, -5px);
}
*/


/* ----------------------------------------
3-1.Basic_rayout
---------------------------------------- */
body{padding: 252px 0 0 0!important;}
.home{padding: 188px 0 0 0!important;}
.page-template-page-protected-login-php{padding: 188px 0 0 0!important;}

.page-style{background: transparent; padding: 0 0 0 0!important;}
@media screen and (min-width: 481px) and (max-width: 768px){body{padding: 0!important;}}
@media (max-width:480px){
body,.home{padding: 25px 0 0 0!important;}
.page-style{ padding: 0 ;}
}
header{background: #fff;height: 188px;opacity: .95;position: fixed;top:0;left: 0;right: 0;margin: auto;width: 100%;z-index:99;
}

.single header{height: 252px; width: 850px;}
.page-template-page-profile-php header,.page-template-page-contact-php header{width: 850px;height: 236px;}
.single_page header{ position: relative; z-index: 2015;}

@media (max-width:768px){
header{background-image: none;background-color: #fff;opacity: .95;height: auto;position: static;
}
.single header{height: auto; width: 100%;}
.page-template-page-profile-php header,.page-template-page-contact-php header{width: 100%;height: auto;}

}
.head_logo{margin: 70px auto 0;width: 316px;
}
.head_logo a{display: block; height: 36px;}
.head_logo_inner{background: url("img/masahirotozaki_logo.png") no-repeat center 0;background-size: contain;height: 36px;margin: 0 0 10px 0;text-align: center;
}
@media (max-width:768px){
.head_logo_inner{ height: auto; margin-bottom: -12px;}
}
.head_logo_inner:hover{ background: url("img/masahirotozaki_logo_h.png") no-repeat center 0;background-size: contain;cursor: pointer;}
.head_logo_w{background: url("img/masahirotozaki_logo_w.png") no-repeat center top; background-size: contain; height: 27px;}
.head_logo_w:hover{background: url("img/masahirotozaki_logo.png") no-repeat center top; background-size: contain;}

@media screen and (min-width:650px) and (max-width:768px){
.head_logo{ margin:-15px auto 22px;padding: 0 0 0 0; width: 40%;}
.head_logo img{width: 100%;}
}
@media (max-width:649px){.head_logo{ margin:-15px auto 0;padding: 0 0 0 0; width: 44%;}}

.head_date{
 color: #808080;
 font-size: 9px;
 font-weight: bold;
 margin:auto;
 text-align: center;
 height: 8px;
 width: 120px;
 }
@media (max-width:768px){.head_date{margin: 0 auto 20px;width: 20.5%;}}
.head_date img{
 height: 13px;
 width: 130px;
}
@media (max-width:768px){.head_date img{height: auto; width: 100%;}}
#container{margin: 0 auto 0;padding:0 40px 0 40px;position: relative;width: 100%;
}
@media (max-width:768px){#container{padding: 0 5% 0; width: 100%; /* min-width: 100%; */}}

#masonry_box{width: 100%!important;
}
#masonry_box .box{box-sizing: border-box;display: inline;float: left;overflow: hidden;padding: 0 1px 1px 0;/* -webkit-transition:0.3s;transition:0.3s; */
}
#masonry_box .bg_img_2nd{/* -webkit-transition:0.3s;transition:0.3s; */}
#masonry_box .bg_img_2nd:hover .work_img{opacity: 0; }

/*
#masonry_box .box .work_img{-webkit-transition:0.3s;transition:0.3s;}
#masonry_box .box:hover .work_img{-webkit-transform: scale(1.3); transform: scale(1.3);}
*/
#masonry_box .box a,#masonry_box .box a img{display: block;}

/* @media (max-width:768px){#masonry_box .box a{margin: 0 5px 5px 0;}} */

#works_item{position: relative;}
/* max-650 */@media (max-width:768px){#works_item .box{width: 50%;min-width: 50%; }}
/* min-651-max1199 */@media screen and (min-width: 651px) and (max-width: 1199px) {#works_item .box{ width: 33.333%;}}
/* min1200-max1399 */@media screen and (min-width: 1200px) and (max-width: 1399px) {#works_item .box{ width: 25%;}}
/* min1400-max1699 */@media screen and (min-width: 1400px) and (max-width: 1699px) {#works_item .box{ width: 20%;}}
/* min1700-max1899 */@media screen and (min-width: 1700px) and (max-width: 1899px) {#works_item .box{ width: 16.666%;}}
/* min1900 */@media (min-width:1900px) {#works_item .box{ width: 14.285%;}}
#masonry_box .box_inner{margin: 0 1px 1px 0; position: relative;}
/* @media (max-width:768px){#masonry_box .box_inner{margin: auto;}} */

/* 画像一枚目 */
.box_inner .work_img { position: relative; overflow: hidden;width: 850px;}
.box_inner .work_img{width: 100%;height: auto;}
.work_img64{width: 64%;}
@media (max-width:768px){
.box_inner .work_img {width: 100%;}
}
/* 画像二枚目箱 */
.box_inner{position: static;top: 0;left: 0;z-index: -1;width: 100%;height: 100%;-webkit-transition:0.3s;transition:0.3s;/* opacity: 0; */display: block;text-align: center;
}
.box_inner:hover {opacity: 1;}
.js-item:hover a .box_inner{opacity: 1; z-index: 5;}


/* 画像二枚目 */
/* .box_inner img{height: auto;display: block;width: 100%;top: 0;position: static;left: 0;right: 0;bottom: 0;margin: auto;
} */
/*
@media (max-width:768px){
.box_inner .overlay img{width: 30%;}
}
*/
/* ----------------------------------------
3-1.footer
---------------------------------------- */
footer{margin: 45px auto 100px;}
.copyright{position:fixed;right: 17px;top:188px;z-index: 120
}
.copylight_sign img{width: 8px;display: block;
}
.copylight_sign{position: fixed;right: 20px;top:25%;
}

.copylight_sign_sp{zoom:50%}
@media (max-width:651px){
.copylight_sign{position: static;right: auto;top:auto;display: inline-block;margin: 0;line-height: 0;vertical-align: ;
}
.copylight_sign img{ display: block;transform: rotate(90deg);transform-origin: center center;
}
footer{padding: 35px 0;text-align: center;width: 100%;
}
footer{padding: 20px 0;}
.foot_inner{margin: 0 0 15px 0;
}
}
.foot_inner_dbl{margin: auto;width: 353px;
}
.foot_inner_copy{clear: both; margin: 0 auto 15px; width: 142px;}
.foot_inner_copy img{width:100%; }

@media (max-width:768px){
footer{margin: auto; width: 70%; }
.foot_inner li{width: 100%;}
.foot_inner,.foot_inner a,.foot_inner,footer p{font-size: 8px;}
}

.foot_inner_mail{background: url("img/foot_item01.png") no-repeat left top;background-size: contain; width: 191px; height: 9px;display: block; float: left; margin:0 10px 5px 0;}
@media screen and (min-width: 481px) and (max-width: 768px){.foot_inner_mail{margin:0 10px 8px 0;}}
@media (max-width:480px){.foot_inner_mail{margin:0 10px 5px 0;}}

.foot_inner_mail:hover{background: url("img/foot_item01b.png") no-repeat left top;background-size: contain;}
.foot_inner_tel{background: url("img/foot_item02.png") no-repeat left top;background-size: contain; width: 152px; height: 9px;display: block; float: left;}
.foot_inner_tel:hover{background: url("img/foot_item02b.png") no-repeat left top;background-size: contain;}

@media screen and (min-width:650px) and (max-width:768px){.foot_inner_mail,.foot_inner_tel{height: 12px;}
}
@media (max-width:649px){.foot_inner_mail,.foot_inner_tel{height: 6px;}}

@media (max-width:768px){
.foot_inner_mail,foot_inner_tel{ float: left; display: block;}
.foot_inner_mail{ background-size: cover; width: 55%; margin-left: -5px;}
.foot_inner_mail:hover{background: url("img/foot_item01b.png") no-repeat left top; background-size: cover;}

.foot_inner_tel{background-size: cover;width: 45%; margin-right: -5px;}
.foot_inner_tel:hover{background: url("img/foot_item02b.png") no-repeat left top; background-size: cover;}

.foot_inner_copy img{width: 45%;}
.foot_inner_copy.sp_style img{width: 60%;}
}

.foot_inner_mail_bgw{background: url("img/foot_01w.png") no-repeat left top; width: 191px; height: 13px;display: inline-block;}
.foot_inner_mail_bgw:hover{background: url("img/foot_01.png") no-repeat left top;}
.foot_inner_tel_bgw{background: url("img/foot_02w.png") no-repeat left top; width: 152px; height: 13px;display: inline-block;}
.foot_inner_tel_bgw:hover{background: url("img/foot_02.png") no-repeat left top;}

/* ----------------------------------------
4-1.Modal
---------------------------------------- */
.modal-content {color: #fff;position:relative;display:none;max-height:100%;overflow: scroll;top:0px!important;left: 0px!important;z-index: 120;text-align: center;}
.modal-overlay {z-index:120;display:none;position:fixed;top:0;left:0;width:100%;height:100%;}
@media (max-width:768px){.modal-overlay {z-index:1;}}
.modal-wrap {z-index:10000;display:none;position:fixed;top:0;left:0;width:100%;height:100%;overflow: scroll;background-color:rgba(0,0,0,0.9);}
.modal-wrap:hover{cursor: pointer;}
.modal-open {color:#00f;text-decoration:underline;}
.modal-open:hover {cursor:pointer;}
.modal-close {color:#00f;text-decoration:underline;}
.modal-close:hover {cursor:pointer;color:#f00;}
/* ----------------------------------------
4-2.Modal-TEXT
---------------------------------------- */
.con_block_other{padding: 32px 0 125px; width: 850px; margin: auto; text-align: center;}
/* .con_block_other img{display: block; width: auto; height: auto; transform: scale(0.5); transform-origin: center;margin: 0 auto;} */
.con_block_other img {display:block;margin:0 auto;width:50%;     /* 元サイズ比で半分 */height:auto;
}

.con_block:hover{cursor: default;}


@media (max-width:768px){
.con_block{ margin:0 auto 0;width: 90%;}
}
.con_block img{margin: auto; width: 81%!important;}
.con_block img{margin: auto; width: 81%!important;}
.con_block_contact img{width: 53%!important;}
.con_block_contact a:hover{opacity: 0.8;}
.head_date.con_head_date img{width: 100%!important;}
.con_block .head_logo{margin: 68px auto 20px;padding: 0;}
.con_block .head_logo a{display: block;height: 27px;width: 316px;
}
.con_block .head_logo{background: url("img/masahirotozaki_logo.png") no-repeat center top; background-size: contain;}
.con_block .head_logo:hover{background: url("img/masahirotozaki_logo_w.png") no-repeat center top; background-size: contain;}
@media (max-width:768px){
.con_block img{width: 100%!important;}
.con_block .head_logo{margin:50px auto 0;}
.con_block .head_logo a{  width: 100%!important;}
.con_block .head_logo a img{width: 100%!important;}
}
.con_head_date{color: #fff;margin:0 auto 60px;}
.con_block_contact_box:hover .con_block_contact_w{display: none;}
.con_block_contact_g{display: none;}
.con_block_contact_box:hover .con_block_contact_g{display: block;}
.con_block_footer{margin: 150px auto 35px;
}
.con_block_footer .foot_inner,
.con_block_footer .foot_inner li,
.con_block_footer .foot_inner a,
.con_block_footer p{color: #fff!important;}

@media (max-width:768px){
.con_head_date{margin:0 auto 20px;}
}

/* ----------------------------------------
5-1.Single Page
---------------------------------------- */
.works_ttl {position: absolute;bottom: 88px;left: 50%;transform: translateX(-50%);/* 必要なら幅も合わせる *//* width: 100%; object-fit: contain; */zoom:50%
}
.ttl_block{padding: 57px 0 21px; margin: auto; width: 850px; border-bottom: 1px solid #808080;}
.otherpage_ttl{display: block; width: auto; height: auto; transform: scale(0.5); transform-origin: center;margin: 0 auto;}
.single_page{padding: 0!important;}
@media screen and (min-width: 481px) and (max-width: 768px){
.single_page{padding: 0;}
.single_page header{height: auto;}
}
@media (max-width:480px){
.works_ttl {position:static;bottom: auto;left: auto; transform: translateX(0);zoom: normal; width: 100%;margin-bottom: 16px;transform: scale(1.07);}
.otherpage_ttl{transform: scale(0.25);}
.single_page{padding: 0 0 0 0;}
.single_page header{height: auto;}
.ttl_block{width:79%; padding: 0;}

}

.single_page .head_date{margin: 0 auto 60px;}
@media screen and (min-width: 481px) and (max-width: 768px){.single_page .head_date{margin: 0 auto 20px; padding-top:5px; }
}
@media (max-width:480px){.single_page .head_date{margin: 0 auto 10px; padding-top: 0; }}

.single_page .head_title{margin:0 auto 15px;width: 850px;
}
@media (max-width:768px){.single_page .head_title{ width: 90%; }}
.single_page .head_title img{height: 20px;width: 100%;
}
@media (max-width:768px){.single_page .head_title img{ height: auto; width: 100%; }}
.head_subtitle{font-weight: bold; margin: auto; position: relative; text-align: center; width: 850px;}
.head_subtitle .head_subtitle_btn{display: inline-block; float: right;}
@media (max-width:768px){
.head_subtitle{font-size: 12px; margin: 0 auto 20px; width: 80%;}
.head_subtitle .head_subtitle_btn{display: none;}
}
.single_work_title01,
.single_work_title02{font-weight: bold;
}
.single_work{margin: auto;max-width: 850px;position: relative;z-index: 5;
}
.single_work_title{border-top: 1px solid #d3d3d3; padding: 15px 0;}
.single_work_title img{width: 100%;}
.single_work_item{margin:  0 0 15px 0;text-align: center;
}
@media (max-width:768px){.single_work_item{width: 100%!important;margin: 0 0 7px 0;}.single_work{width: 100%;}}
/* @media (max-width:768px){.single_work_item {margin: 0 0 2px 0;}} */
@media screen and (min-width: 768px) and (max-width: 1000px) {.work_img{width: 100%;}}
@media (max-width:768px){.single_work_item img{width: 100%!important;}}

.head_titleblock h3{position: relative;}
.head_titleblock h3 .close{display: block;opacity: 0.6;position: absolute;/* right: -55px; */top:0;height: 22px;width: 22px;
}
.head_titleblock h3 .close:hover{opacity: 1;}

/* ----------------------------------------
6-1.GoTop Page
---------------------------------------- */
.pagetop{
position: fixed;
/* left: 97.3%; */
right: 7px;
bottom: 30px;
z-index: 10000;}
.pagetop a{
background: url("img/gotopb.png");
background-size: contain;
display: block;height: 14px;position: relative;width: 26px;
}
.pagetop img{height: 14px;width: 26px;
}
.pagetop:hover img{opacity: 0;}

/* ----------------------------------------
7-1.Scrollbar
---------------------------------------- */
/* .single_close{
    background-image: url(img/close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    background: url("img/close.png");
    background-size: contain;
    display: block;
    height: 20px;right: -50px;bottom: 45px;position: absolute;width: 20px;z-index: 100;
} */




/* 親要素（通常時の画像） */
.single_close {
    display: block;
    position: absolute;
    width: 20px;
    height: 20px;
    right: -50px;
    bottom: 45px;
    z-index: 100;
    
    /* 通常時の画像 */
    background-image: url(img/close.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* 疑似要素（ホバー時の画像） */
.single_close::before {
    content: ''; /* 疑似要素には必須 */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* ホバー時の画像 */
    background-image: url(img/closeb.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    
    /* 最初は透明にして隠しておく */
    opacity: 0;
    
    /* opacityを0.3秒かけて滑らかに変化させる */
    transition: opacity 0.1s ease;
}

/* 親要素にマウスオンした時に、疑似要素を不透明にする */
.single_close:hover::before {
    opacity: 1;
}






.fixed .single_close{right: 40px;}
/* .single_close img{opacity: 0;}
.single_close:hover img{opacity: 1;} */
@media (max-width:768px){.single_close{display: none;}}

#cboxClose{display: none;}
/* ----------------------------------------
8-1.Single Header fixed
---------------------------------------- */
.single_page .header .fixbar {background: #fff;width: 100%;
}
@media (min-width:769px){
.single_page .header.fixed .fixbar {padding: 45px 0 25px;position: fixed;top: 0px;right: 0;left: 0;
}
}
@media (max-width:768px){
.single_page .header.fixed .fixbar,
.single_page .header.fixed{position: static;}
}
/* ----------------------------------------
9-1.backtotop
---------------------------------------- */
.backtotop a{display: block;position: fixed;min-height:700px;height: auto;width: 100%;z-index: 1;
}
.backtotop:hover + .header .head_titleblock .single_close img{opacity: 1;}

/* ----------------------------------------
10-1.protected-login
---------------------------------------- */
.protected-login__inner{height: 20px; width: 250px; margin: auto;padding: 50px 0 75px;}
/* .protected-login{padding-top: 50px;} */
/* input[type="password"] {border: #bfbfbf 1px solid;border-radius: 3px;display: inline-block; height: 18px;padding: 0;} */

/* パスワード欄の内側余白 */
.pca-wrap input[type="password"]{padding: 2px;          /* ← 左右に“ちょい”余白 */box-sizing: border-box;  /* 余白を付けても全体サイズを保つ */height: 18px;            /* 必要なら少しだけ背を伸ばす */line-height: 18px;       /* 古い環境向けの縦中央安定化（任意） */border-radius: 3px;      /* ボタンと角丸を合わせたい場合（任意） */
}

/* ボタン本体 */
.pca-submit{position: relative;width: 90px;height: 20px;padding: 0;border: 0;background: transparent;cursor: pointer;
/* 角丸 + はみ出しカット */border-radius: 4px;overflow: hidden;
/* UA差抑制（任意） */appearance: none;
}

/* 画像2枚重ね（通常：before / ホバー：after） */
.pca-submit::before,
.pca-submit::after{content: "";position: absolute;inset: 0;background-repeat: no-repeat;background-position: center;background-size: contain;border-radius: inherit; /* 擬似要素にも角丸を継承 */
}

/* ←通常状態の画像 */
.pca-submit::before{background-image: url('img/submit_btn.png');
}

/* ←ホバー時に上に被せる画像 */
.pca-submit::after{background-image: url('img/submit_btn_on.png');opacity: 0;transition: opacity .25s ease;
}

.pca-submit:hover::after,
.pca-submit:focus-visible::after{opacity: 1;
}

/* 入力とボタンの段差対策（Flexで中央揃え） */
.pca-wrap form{display: flex;align-items: center;gap: 12px;
}

/* パスワード入力の見た目リセット＆フラット化 */
.pca-wrap input[type="password"]{-webkit-appearance: none;appearance: none;background-color: #fff;color: #333;border: 1px solid #bfbfbf;border-radius: 3px;background-image: none !important; /* 既定グラデ無効 */background-clip: padding-box;      /* 角丸の縁のにじみ防止 */box-shadow: none !important;       /* 内外の影を消す */outline: none;font-size: .6rem;padding: 3px;height: 20px;line-height: 20px;
}

/* フォーカス時（任意） */
.pca-wrap input[type="password"]:focus{border-color: #666;box-shadow: 0 0 0 2px rgba(0,0,0,.06); /* うっすらハイライト */
}


/* Portfolio
 ========================================================================== */
.portfolio {-webkit-transition: height 0.5s;-moz-transition: height 0.5s;-ms-transition: height 0.5s;transition: height 0.5s;width: 100%;}
.gridSizer {float: left;width: 50%;min-height: 10px;}
.portfolio-item {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;width: 50%;min-height: 60px;float: left; padding: 0 1px 1px 0;}
.active .portfolio-item {-webkit-transition-duration: 0.8s;-moz-transition-duration: 0.8s;transition-duration: 0.8s;}
.portfolio-item a:hover .portfolio-itemTitle:before {opacity: 0.5;filter: alpha(opacity=50);}
.portfolio-item a {position: relative;display: block;
}

.portfolio-item a{position: relative;display: block;}
.portfolio-itemTitle {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;background: rgba(0,0,0,0.5);transition: opacity .3s ease;display: flex;align-items: center;justify-content: center;/* pointer-events: none;  削除 */
}

.portfolio-item:hover .portfolio-itemTitle {opacity: 1;
}

/* 4) ホバーでキャプション表示 */
.box_inner:hover + .portfolio-itemTitle {opacity: 1;pointer-events: auto;
}

/* 5) オーバーレイ画像 */
.portfolio-itemTitle-inner .overlay-image {max-width: 80%;height: auto;display: block;
}
.portfolio-itemTitle-inner .overlay-image {max-width: 80%;height: auto;display: block;
}

.portfolio-item a:hover .portfolio-itemTitle-inner,.portfolio-item.is-loadComp a:hover .portfolio-itemArtist-inner {opacity: 1;filter: alpha(opacity=100);-webkit-transform: translate3d(0, 0, 0);-moz-transform: translate3d(0, 0, 0);-ms-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}

.portfolio-item a:hover .portfolio-itemArtist-inner{opacity: 1;filter: alpha(opacity=100);/* -webkit-filter: blur(1px);filter: blur(1px); */}

.portfolio-itemTitle {cursor: pointer; -webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;position: absolute;width: 100%;height: 100%;overflow: hidden;/* padding: 9px 15px; */z-index: 10;}
.portfolio-itemTitle:before {-webkit-transition: all 0.2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;transition: all 0.2s ease-out;opacity: 0;filter: alpha(opacity=0);content: '';background-color: #000;position: absolute;top: 0;left: 0;width: 100%;height: 100%;}

.portfolio-itemTitleBlock{
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
width: 100%;
}
.portfolio-itemTitle-inner,.portfolio-itemArtist-inner {
-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;
/*-webkit-transform: translate3d(0, -15px, 0);-moz-transform: translate3d(0, -15px, 0);-ms-transform: translate3d(0, -15px, 0);transform: translate3d(0, -15px, 0);*/
/* font-size: 13.5px;font-size: 1.35rem; */opacity: 0;filter: alpha(opacity=0);display: inline-block;width: 100%;}
/*.portfolio-itemTitle-inner:after {content: '';display: block;background-color: #fff;width: 9px;height: 1px;margin-top: 4px;}*/

/* .portfolio-itemTitle-inner{margin-left: -41%;} */
.portfolio-itemArtist-inner{}

/* .portfolio-itemTitle-inner img{display: block; margin: auto; width: 100%;-webkit-transform: scale(1.8,1.8);-moz-transform: scale(1.8,1.8); transform: scale(1.8,1.8);-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;} */
.portfolio-itemTitle-inner img{display: block; margin: auto; width: 100%;/* -webkit-transform: scale(1.8,1.8);-moz-transform: scale(1.8,1.8); transform: scale(1.8,1.8); */-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}

@media screen and (max-width: 900px) {
.portfolio-itemTitle-inner{margin:auto; }
.portfolio-itemTitle-inner img{width: 90%;}
}

.portfolio-itemArtist-inner img{display: block; margin: auto;width: 30%;-webkit-backface-visibility: hidden;-moz-backface-visibility: hidden;backface-visibility: hidden;}

.portfolio-itemImg {opacity: 0;filter: alpha(opacity=0);width: 100%;height: 100%;overflow: hidden;-webkit-transition: -webkit-transform 0.2s ease-in-out, opacity 1s ease-out;-moz-transition: transform 0.2s ease-in-out, opacity 1s ease-out;-ms-transition: transform 0.2s ease-in-out, opacity 1s ease-out;-o-transition: transform 0.2s ease-in-out, opacity 1s ease-out;transition: transform 0.2s ease-in-out, opacity 1s ease-out;}
.is-loadComp .portfolio-itemImg {display: block; opacity: 1;filter: alpha(opacity=100);}

.portfolio-itemArtist-inner.sato{background: url('img/cmn_name_sato-h.png');}
.portfolio-itemArtist-inner.hyodo{background: url('img/cmn_name_hyodo-h.png');}
.portfolio-itemArtist-inner.shimura{background: url('img/cmn_name_shimura-h.png');}
.portfolio-itemArtist-inner.fkng{background: url('img/cmn_name_fkng-h.png');}
.portfolio-itemTitleBlock .portfolio-itemArtist-inner{background-position: center top; background-size: contain; background-repeat: no-repeat; display: inline-block; height: 11px; width: 100%;}


#js-content .profile figure{padding: 110px 120px 120px; }
#js-content .profile .portfolio-item.js-item.cat-prof{background: #dcdcdc; width: 100%; pointer-events: none;}
#js-content .profile .portfolio-item.js-item.cat-prof a{pointer-events: none;}
#js-content .profile .portfolio-itemImg{width: auto; height: auto;}

@media screen and (max-width: 900px) {
#js-content .profile figure{padding:5% 7.5%;}
.page-template-page-sato #js-content .profile figure{background: url('img/prof_sp_sato.png');height: 480px;}
.page-template-page-fkng #js-content .profile figure{background: url('img/prof_sp_fkng.png');height: 346px;}
.page-template-page-shimura #js-content .profile figure{background: url('img/prof_sp_shimura.png');height: 410px;}
.page-template-page-hyodo #js-content .profile figure{background: url('img/prof_sp_hyodo.png');height: 367px;}
.page-template #js-content .profile figure{ background-size: 85%; background-position: center 30px; background-repeat: no-repeat;}
#js-content .profile .portfolio-item.js-item.cat-prof{padding-bottom: 70px;}
#js-content .profile figure .portfolio-itemImg{display: none!important;}
}

@media screen and (max-width: 639px), screen and (orientation: landscape) and (max-width: 736px) {
.content {}
.portfolio {width: 100%;}
.portfolio-item {}.portfolio-item a:hover img {}
.portfolio-item a:hover .portfolio-itemTitle:before {opacity: 0;filter: alpha(opacity=0);}
.portfolio-item a:hover .portfolio-itemTitle-inner,.portfolio-item a:hover .portfolio-itemArtist-inner {  opacity: 0;  filter: alpha(opacity=0);}
}
@media screen and (min-width: 1px) and (max-width: 640px) and (orientation: portrait) {.gridSizer,.portfolio-item {  width: 50%;}}
@media screen and (min-width: 641px) and (max-width: 999px) and (orientation: portrait) {.gridSizer,.portfolio-item {  width: 50%;}}
@media screen and (min-width: 1000px) and (max-width: 1199px) {.gridSizer,.portfolio-item {  width: 33%;}}
@media screen and (min-width: 1200px) and (max-width: 1399px) {.gridSizer,.portfolio-item {  width: 25%;}}
@media screen and (min-width: 1400px) and (max-width: 1699px) {.gridSizer,.portfolio-item {  width: 20%;}}
@media screen and (min-width: 1700px) {.gridSizer,.portfolio-item {  width: 16.67%;}}

@media screen and (max-width: 900px) {
.portfolio-itemTitleBlock{position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit-transform: translateY(-50%) translateX(-50%);
width: 100%;
}
.portfolio-itemTitleBlock .portfolio-itemArtist-inner{height: 6px;}
/* .portfolio-itemTitle-inner img{-webkit-transform: scale(2.3,2.3);-moz-transform: scale(2.3,2.3); transform: scale(2.3,2.3);} */
.portfolio-itemTitleBlock .portfolio-itemArtist-inner{display:block;margin-top: 5px;}
}


/* EX Style */


.con_block_contact_add{background: url('http://masahirotozaki.com/tzk/wp-content/themes/mt2/img/modal_contact02.png');background-size: contain;background-repeat: no-repeat;  display: block;width: 100%;height: 25px;}
@media screen and (max-width: 900px) {
.con_block_contact_add{height:11px;}
}

/* Pasawords */
form.post_password_box{padding: 45px 0 90px; text-align: center;}

.post_password {border: 1px solid #c8c8c8;
border-radius:2px;
display: inline-block;
width: 140px;
padding:4px;
height: 10px;
}
.post_password_btn{
display: inline-block;
padding: 0px;
margin: 0;
margin-left: 5px;
width: 90px;
height: 20px;
opacity: 20%;
vertical-align: top;
}

.post_password_btn:hover {opacity: 70%;transition: 0.1s ease}
.work_img{display: block; margin: auto; max-width: 850px;}
.work_img50{max-width: 550px;}

@media screen and (max-width: 767px) {form.post_password_box{padding:33px 0 40px;}.post_password {  width: 100px;  padding:2px;  height: 9px;}.post_password_btn{width: 64px;height: 15px;vertical-align: bottom;}
}

/* 2025/04/06 masonry */
.portfolio-item {}
/* どの動画要素にも適用 */
video {display: block;max-width: 100% !important;height: auto !important;object-fit: contain;}
/* 万が一 overflow:visible を指定している親があれば隠す */
.video-container, .modal video, .js-modal video {overflow: hidden;}
.video-wrap {position: relative;width: 100%;padding-bottom: 56.25%; /* 16:9 */height: 0;overflow: hidden;}
.video-wrap iframe {position: absolute;top: 0; left: 0;width: 100%; height: 100%;}
.video-wrapper {position: relative;max-width: 100%;cursor: pointer;}
.video-thumb {position: relative;width: 100%;height: auto;overflow: hidden;  /* レイアウト崩れ防止 */}
.video-thumb .hover-image {width: 100%;height: auto;display: block;}
.play-button {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 60px;height: 60px;/* background: url('/tzk03/wp-content/uploads/2025/04/play-icon.svg') no-repeat center center; */background: url('/tzk03/wp-content/themes/mt3/img/play-icon.svg') no-repeat center center;background-size: contain;opacity: 1;transition: opacity 0.2s;pointer-events: none;z-index: 5;}
.play-button.fadeout {opacity: 0;}
.play-button.fadeout {opacity: 0;}
.video-thumb:hover .play-button {opacity: 1;visibility: visible;}
.play-button.fadeout {opacity: 0;visibility: hidden;transition: opacity 0.1s, visibility 0.1s;}

.img-hover-wrap {position: relative;display: block;width: 100%;overflow: hidden;}
.base-img {display: block;width: 100%;height: auto;z-index: 1;position: relative;transition: opacity 0.3s ease;}
.hover-img {position: absolute;top: 0;left: 0;display: block;width: 100%;height: auto;opacity: 0;z-index: 2;transition: opacity 0.3s ease;}
.img-hover-wrap:hover .hover-img {opacity: 1;}
.img-hover-wrap:hover .base-img:not(.only-img):has(+ .hover-img) {opacity: 0;}

/* 黒オーバーレイ */
.hover-overlay {position: absolute;top: 0;left: 0;z-index: 3;width: 100%;height: 100%;background: rgba(0, 0, 0, 0);transition: background 0.3s ease;}
.img-hover-wrap:hover .hover-overlay {background: rgba(0, 0, 0, 0.8);}

/* hover_ttl：hover時のみ中央に出す */
.hover-ttl-img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 4;opacity: 0;transition: opacity 0.3s ease;pointer-events: none;max-width: 90%;max-height: 90%;}
.img-hover-wrap:hover .hover-ttl-img {opacity: 1;}

/* 1) .img-hover-wrap を相対配置に */
.img-hover-wrap {position: relative;}
/* 2) ベース画像はそのまま */
.img-hover-wrap .base-img {display: block;width: 100%;height: auto;position: relative;z-index: 0;}
/* 3) TTL画像を中央に絶対配置 */
.img-hover-wrap .hover-ttl-img {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);z-index: 2;/* 必要に応じてサイズ調整 */max-width: 80%;height: auto;}
/* 4) オーバーレイレイヤー */
.img-hover-wrap::after {content: "";position: absolute;top: 0; left: 0;width: 100%; height: 100%;background: rgba(0,0,0,0);  /* 通常は透明 */transition: background 0.3s ease;z-index: 1;}
/* 5) ホバー時に黒50% */
.pickup-item:hover .img-hover-wrap::after {background: rgba(0,0,0,0.5);}
/* 例：style.css の末尾に追加 */
.img-hover-wrap {position: relative;}
.img-hover-wrap .base-img {position: relative; z-index: 0;}
.img-hover-wrap .hover-ttl-img {position: absolute; top:50%; left:50%;transform: translate(-50%, -50%); z-index:2;max-width:80%; height:auto;}
.img-hover-wrap::after {content: "";position: absolute; top:0; left:0;width:100%; height:100%;background: rgba(0,0,0,0);transition: background 0.3s ease;z-index:1;}
.pickup-item:hover .img-hover-wrap::after {background: rgba(0,0,0,0.5);}

/* ページ読み込み前は透明に */
#js-content {opacity: 0;transition: opacity 0.4s ease;}

/* レイアウト完了後に一気にフェードイン */
#js-content.is-visible {opacity: 1;}

/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {position: fixed;left: 50px;top: 50px;width: 30px;height: 23px;cursor: pointer;z-index: 99999;}
.hamburger__line {position: absolute;width: 30px;height: 3px;right: 0;background-color: #808080;transition: all 0.5s;}
.hamburger:hover .hamburger__line{background-color: #000;}
.hamburger__line--1 {top: 1px;}
.hamburger__line--2 {top: 11px;}
.hamburger__line--3 {top: 21px;}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {transform: rotate(-45deg);top: 11px;}
.open .hamburger__line--2 {opacity: 0;}
.open .hamburger__line--3 {transform: rotate(45deg);top: 11px;}

@media (max-width:480px){
.hamburger {position: relative; left: 6px;top: 5px;width: 20px;}
.hamburger .hamburger__line{background-color: #808080; height: 2px;width: 20px;}
.hamburger__line--1 {top: 1px;}
.hamburger__line--2 {top: 7px;}
.hamburger__line--3 {top: 13px;}

}


/* 
sp-nav(ナビ)
=================================== */
/* ① .sp-nav の初期状態を画面上部ではなく、常に top:0 に */
.sp-nav {position: fixed;top: 0;           /* 常に上端に */left: 0;width: 100%;height: 100%;background-color: #fff;
/* フェード用に opacity & visibility */opacity: 0;visibility: hidden;pointer-events: none;          /* 非表示時はクリック無効 */
/* トランジションは opacity のみ */transition: opacity 0.5s ease, visibility 0s linear 0.5s;/* visibility は opacity の遅延と合わせて切り替える */display: flex;align-items: center;justify-content: center;z-index: 9999;}
/* ② open クラス時にフェードイン */
.open .sp-nav {opacity: 1;visibility: visible;pointer-events: auto;          /* 表示時はクリック有効 */
/* visibility はすぐに切り替え */transition-delay: 0s;
}

.sp-nav ul li{margin-bottom: 15px;}
.sp-nav ul li a {display: inline-block;width: 90px;height:19px;/* background: url('/tzk03/wp-content/themes/mt3/img/top_g_sp.png') no-repeat center/contain; */overflow: hidden;transition: background-image 0.1s ease;}
.sp-nav ul li:first-child a{background: url('/tzk03/wp-content/themes/mt3/img/top_g_sp.png') no-repeat center/contain;}
.sp-nav ul li:nth-child(2) a{background: url('/tzk03/wp-content/themes/mt3/img/profile_g_sp.png') no-repeat center/contain;}
.sp-nav ul li:nth-child(3) a{background: url('/tzk03/wp-content/themes/mt3/img/contact_g_sp.png') no-repeat center/contain;}

.sp-nav ul li:first-child a:hover{background: url('/tzk03/wp-content/themes/mt3/img/top_b_sp.png') no-repeat center/contain;}
.sp-nav ul li:nth-child(2) a:hover{background: url('/tzk03/wp-content/themes/mt3/img/profile_b_sp.png') no-repeat center/contain;}
.sp-nav ul li:nth-child(3) a:hover{background: url('/tzk03/wp-content/themes/mt3/img/contact_b_sp.png') no-repeat center/contain;}


/* =================================== */
/* PC表示のドロップダウンメニュー用スタイル */
/* (画面幅769px以上で適用)          */
/* =================================== */
@media screen and (min-width: 769px) {

  /* ▼ ナビゲーションメニュー(.sp-nav)のスタイル（ユーザー調整を維持） */
  .sp-nav {
    position: fixed;
    top: 100px;
    left: 53px;
    width: 80px;
    height: auto;
    display: block;
    background-color: transparent;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0s linear 0.3s;
  }

  /* .open クラスが付いた時の表示スタイル */
  .open .sp-nav {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  /* ▼ メニュー項目(li)のスタイル */
  .sp-nav ul li {
    margin-bottom: 0;
  }
  .sp-nav ul li:not(:last-child) {
    margin-bottom: 10px;
  }
  
  /* ▼ 全画面表示用の黒い背景は非表示 */
  .black-bg {
    display: none;
  }

  /*
  ===================================
   【最終修正】IDセレクタで優先度を確保
  ===================================
  */
  
  /* ▼ メニュー画像(a)の基本スタイル */
  #nav-wrapper .sp-nav ul li a {
    display: block;
    position: relative;
    height: 11px;
    width: 80px;
    background: transparent no-repeat left center / contain;
  }

  /* ▼ 各項目の通常時画像 */
  #nav-wrapper .sp-nav ul li:first-child a {
    background-image: url('/tzk03/wp-content/themes/mt3/img/top_g.png');
  }
  #nav-wrapper .sp-nav ul li:nth-child(2) a {
    background-image: url('/tzk03/wp-content/themes/mt3/img/profile_g.png');
  }
  #nav-wrapper .sp-nav ul li:nth-child(3) a {
    background-image: url('/tzk03/wp-content/themes/mt3/img/contact_g.png');
  }

  /* ▼ ホバー用の::before疑似要素 */
  #nav-wrapper .sp-nav ul li a::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent no-repeat left center / contain;
    opacity: 0;
    transition: opacity 0.3s ease;
  }

  /* ▼ 各項目のホバー時画像（::before に設定） */
  #nav-wrapper .sp-nav ul li:first-child a::before {
    background-image: url('/tzk03/wp-content/themes/mt3/img/top_b.png');
  }
  #nav-wrapper .sp-nav ul li:nth-child(2) a::before {
    background-image: url('/tzk03/wp-content/themes/mt3/img/profile_b.png');
  }
  #nav-wrapper .sp-nav ul li:nth-child(3) a::before {
    background-image: url('/tzk03/wp-content/themes/mt3/img/contact_b.png');
  }

  /* ▼ ホバー時に ::before を不透明にする */
  #nav-wrapper .sp-nav ul li a:hover::before {
    opacity: 1;
  }
}