@charset "utf-8";

/* =========================== PAGE */
#portfolo1001{overflow:hidden;position:relative;background:url("../img/sub/portfolio1001_img04.png") no-repeat top 0.8% right 2%}
#portfolo1001 .top_img {position:absolute;top:0;left:3%;animation:toproundImg .9s infinite ease-in-out}
@keyframes toproundImg {0%{transform:scale(1)}50% {transform:scale(1.1)}}
#portfolo1001 .port_top{display:flex;justify-content:space-between;padding:135px 170px 0 130px}
#portfolo1001 .port_t_left .t_l_tit{margin-bottom:70px;text-transform:uppercase;line-height:1;font-size:106.35px;font-family:var(--gothic);color:var(--color)}
#portfolo1001 .port_t_left .t_l_year{font-size:26px;font-family:var(--gothic);font-weight:300;color:var(--color)}
#portfolo1001 .port_t_right{margin-top:25px;color:var(--color);text-align:right}
#portfolo1001 .port_t_right > span{display:block}
#portfolo1001 .port_t_right .name{display:flex;flex-direction:column;align-items:flex-end;font-size:22px;font-family:var(--gothic);font-weight:300;text-align:right}
#portfolo1001 .port_t_right .name:after{content:""; display:block; width:8px; height:8px; margin:30px 0px;border-radius:50%;background:#fff}
#portfolo1001 .port_t_right .phon{font-size:16px;font-family:var(--gothic)}
#portfolo1001 .port_t_right .mail{font-size:16px;font-family:var(--gothic)}
#portfolo1001 .port_inner{width:64%;margin:0 auto}
#portfolo1001 .port_all_tit{display:flex;align-items:center;justify-content:center;width:163px;height:46px;margin:170px 0 60px;border-radius:50pt;border:1px solid #4d4d4d;font-size:18px;font-family:var(--gothic);box-sizing:border-box;color:var(--color)}
#portfolo1001 .port_about {color:var(--color)}
#portfolo1001 .port_about .about_txt_box{display:flex;justify-content:space-between}
#portfolo1001 .port_about .about_tit{width:35%}
#portfolo1001 .port_about .font01{text-align:right}
#portfolo1001 .port_about .font03{margin-left:50px}
#portfolo1001 .port_about .font{display:block;font-size:52px;font-weight:200}
#portfolo1001 .port_about .about_r_txt{width:54%;margin-top:115px}
#portfolo1001 .port_about .r_top_txt{margin-bottom:50px;font-size:22px;font-family:var(--gothic)}
#portfolo1001 .port_about .r_bot_txt p{display:inline;-webkit-text-fill-color:rgba(255,255,255,0.3);background-image:linear-gradient(#fff, #fff);-webkit-background-clip:text;background-clip:text;background-repeat:no-repeat;background-size:0% 100%;font-size:18px;line-height:1.9}
#portfolo1001 .port_works{padding-left:18%}
#portfolo1001 .port_works .work_list{overflow:hidden}
#portfolo1001 .port_works .work_list > a{ overflow:hidden;position:relative;display:block;padding-bottom:95%}
#portfolo1001 .port_works .work_list > a:after{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:400px;background:linear-gradient(to top,rgb(0,0,0,0.8),rgba(0,0,0, 0.6),rgba(0,0,0,0));z-index:1;opacity:0;transition:all .5s}
#portfolo1001 .port_works .work_list:hover > a:after{opacity:1}
#portfolo1001 .port_works .work_list a .img{position:absolute;top:0px;left:0px;width:100%;height:100%;object-position:top;object-fit:cover;transition:object-position 3s cubic-bezier(0.5, 1, 0.89, 1)}
#portfolo1001 .port_works .work_list:hover a .img{object-position:bottom}
#portfolo1001 .port_works .work_list a .list_bot_txt{position:absolute;left:0;bottom:0;z-index:3;width:100%;padding:0 40px 45px;box-sizing:border-box;opacity:0;transition:all .5s}
#portfolo1001 .port_works .work_list:hover a .list_bot_txt{opacity:1}
#portfolo1001 .port_works .work_list a .list_bot_txt > b{display:block;margin-bottom:15px;font-size:22px;color:var(--color)}
#portfolo1001 .port_works .work_list a .list_bot_txt > .line{display:flex;color:rgba(255,255,255,0.4)}
#portfolo1001 .port_works .work_list a .list_bot_txt > .line > li{font-size:16px}
#portfolo1001 .port_works .work_list a .list_bot_txt > .line > li:after{content:"";display:inline-block;width:1px;height:8px;margin:0 13px;background:rgba(255,255,255,0.4)}
#portfolo1001 .port_works .work_list a .list_bot_txt > .line > li:last-child:after{display:none}
#portfolo1001 .port_works .work_list a .arrow{position:absolute;right:40px;bottom:45px;display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#df90a8; z-index:3;color:var(--color);opacity:0;transition:all .5s}
#portfolo1001 .port_works .work_list:hover a .arrow{opacity:1}
#portfolo1001 .port_skill{color:var(--color)}
#portfolo1001 .port_skill .skill_list{display:flex;flex-wrap:wrap}
#portfolo1001 .port_skill .skill_list > li{display:flex;align-items:center;width:50%;height:320px;border-bottom:1px solid #262626;border-right:1px solid #262626}
#portfolo1001 .port_skill .skill_list > li:nth-child(n+3){border-bottom:none}
#portfolo1001 .port_skill .skill_list > li:nth-child(2n){border-right:none}
#portfolo1001 .port_skill .skill_list > li .img{width:50%; height:100%}
#portfolo1001 .port_skill .skill_list > li:nth-child(1) .img{background:url("../img/sub/portfolio1001_img06.png") no-repeat center/226px 239px}
#portfolo1001 .port_skill .skill_list > li:nth-child(2) .img{background:url("../img/sub/portfolio1001_img07.png") no-repeat center/264px 68px}
#portfolo1001 .port_skill .skill_list > li:nth-child(3) .img{background:url("../img/sub/portfolio1001_img08.png") no-repeat center/175px 189px}
#portfolo1001 .port_skill .skill_list > li:nth-child(4) .img{background:url("../img/sub/portfolio1001_img09.png") no-repeat center/242px 235px}
#portfolo1001 .port_skill .skill_list > li .txt{width:50%}
#portfolo1001 .port_skill .skill_list > li .txt > b{display:flex;margin-bottom:30px;font-size:24px;font-family:var(--gothic)}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list{display:flex;margin-bottom:35px}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list > li{width:13px;height:13px;margin-right:8px;border-radius:50%;background:#0000ff}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list > li:last-child{margin-right:0}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list > li.on{background:#fff}
#portfolo1001 .port_skill .skill_list > li .txt > p {line-height:1.8;font-size:16px}
#portfolo1001 .port_txt{position:relative;padding:155px 0 125px}
#portfolo1001 .port_txt .port_txt_center{position:relative;display:flex;justify-content:space-between;align-items:flex-end;height:500px;padding:0 100px}
#portfolo1001 .port_txt .l_txt{font-size:18px;color:rgba(255,255,255,0.6);font-family:var(--Pop)}
#portfolo1001 .port_txt .r_box{position:relative;right:100px;width:680px;height:600px;opacity:0;transition:all .3s}
#portfolo1001 .port_txt .word{position:absolute;pointer-events:none;z-index:10;display:inline-block;padding:20px 30px;border-radius:50pt;border:1px solid #fff;background:#000;font-size:40px;font-family:var(--gothic);line-height:1;;color:#fff}
#portfolo1001 .port_txt canvas{position:absolute;z-index:1;top:0;display:block;background:transparent !important}

@media(max-width:1024px){
#portfolo1001 .port_about .r_bot_txt p .line02{display:none}
#portfolo1001 .port_inner{width:85%}
#portfolo1001 .top_img{left:0;width:auto}
#portfolo1001 .port_top{width:93%;margin:0 auto;padding:135px 0 0;flex-direction:column; align-items:flex-start}
#portfolo1001 .port_t_left{width:100%}
#portfolo1001 .port_t_left .t_l_tit{margin-bottom:30px;font-size:60px}
#portfolo1001 .port_t_right{padding-right:0;text-align:left}
#portfolo1001 .port_t_right {display:flex;align-items:center;margin-top:15px}
#portfolo1001 .port_t_right .name{display:block;text-align:left}
#portfolo1001 .port_t_right .name:after{display:none}
#portfolo1001 .port_t_right > span::before {content:"";display:inline-block;width:5px;height:5px;margin:0px 15px;border-radius:50%;background:#fff}
#portfolo1001 .port_t_right > span:first-child:before{display:none}
#portfolo1001 .port_all_tit{margin:130px auto 40px}
#portfolo1001 .port_about .about_txt_box{flex-direction:column}
#portfolo1001 .port_about .about_tit{width:100%}
#portfolo1001 .port_about .font{display:initial;margin-left:0;font-size:33px}
#portfolo1001 .port_about .font+.font{margin-left:5px}
#portfolo1001 .port_about .about_r_txt{width:100%;margin-top:20px}
#portfolo1001 .port_about .r_top_txt{margin-bottom:15px;font-size:20px}
#portfolo1001 .port_works{padding-left:0}
#portfolo1001 .port_skill .skill_list > li{position:relative; display:block;display:block;height:auto;padding-bottom:30px}
#portfolo1001 .port_skill .skill_list > li .img {margin:0 auto; width:100%;height:212px;width:100%; filter:brightness(40%)}
#portfolo1001 .port_skill .skill_list > li .txt > b{display:block;text-align:center}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list{margin-bottom:30px;justify-content:center}
#portfolo1001 .port_skill .skill_list > li .txt {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;width:100%;height:100%;align-items:center;justify-content:center;text-align:center}
#portfolo1001 .port_txt .port_txt_center {width:90%;padding:0;margin:0 auto}
#portfolo1001 .port_txt canvas{position:unset;width:100%}
#portfolo1001 .port_txt .word{font-size:30px}
#portfolo1001 .port_txt .port_txt_center{flex-direction:column;align-items:center}
#portfolo1001 .port_txt .l_txt{text-align:center}
#portfolo1001 .port_txt .r_box{right:unset}
}
@media(max-width:768px){
#portfolo1001 .port_top{width:90%;padding:100px 0 0}
#portfolo1001 .port_t_left .t_l_tit{margin-bottom:20px;font-size:45px}
#portfolo1001 .port_t_left .t_l_year{font-size:20px}
#portfolo1001 .port_t_right{position:relative;flex-direction:column;align-items:flex-end;width:100%;margin-top:10px;padding-right:15px}
#portfolo1001 .port_t_right::before{content:"";display:block;position:absolute;top:0;right:0;width:2px;height:100%;background:#fff}
#portfolo1001 .port_t_right > span::before{display:none}
#portfolo1001 .port_inner{width:90%}
#portfolo1001 .port_all_tit{width:140px;font-size:15px}
#portfolo1001 .port_about .font{font-size:28px}
#portfolo1001 .port_about .r_top_txt{font-size:17px}
#portfolo1001 .port_works .work_list > a:after{width:100%;height:300px; border-left:1px solid #262626}
#portfolo1001 .port_skill .skill_list > li{width:100%;padding-bottom:0;border-left:1px solid #262626}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list{margin-bottom:25px}
#portfolo1001 .port_skill .skill_list > li:first-child {border-top:1px solid #262626}
#portfolo1001 .port_skill .skill_list > li:nth-child(n+3){border-bottom:1px solid #262626}
#portfolo1001 .port_skill .skill_list > li:nth-child(2n){border-right:1px solid #262626}
#portfolo1001 .port_skill .skill_list > li .txt > b {margin-bottom:20px;font-size:20px}
#portfolo1001 .port_txt{padding:155px 0 50px}
#portfolo1001 .port_txt .port_txt_center{height:auto}
#portfolo1001 .port_txt .word{font-size:20px}
#portfolo1001 .port_txt .r_box{position:unset;transform:none;width:auto !important;height:auto !important}
#portfolo1001 .port_txt canvas{height:auto !important}
}
@media(max-width:480px){
#portfolo1001 .top_img{left:-70%}
#portfolo1001 .port_t_left .t_l_tit{font-size:35px}
#portfolo1001 .port_t_left .t_l_year{font-size:16px}
#portfolo1001 .port_t_right .name{font-size:14px}
#portfolo1001 .port_t_right .phon{font-size:14px}
#portfolo1001 .port_t_right .mail{font-size:14px}
#portfolo1001 .port_about .font{font-size:25px}
#portfolo1001 .port_about .about_tit{text-align:center}
#portfolo1001 .port_about .r_top_txt{text-align:center}
#portfolo1001 .port_about .r_bot_txt p .line01{display:none}
#portfolo1001 .port_works .work_list a .arrow{top:50%;left:50%;right:initial;bottom:initial;transform:translate(-50%,-50%)}
#portfolo1001 .port_works .work_list a .list_bot_txt > b{font-size:20px}
#portfolo1001 .port_works .work_list > a:after{height:250px}
#portfolo1001 .port_txt{padding:50px 0}
#portfolo1001 .port_txt .word{padding:10px 20px;font-size:20px}
}
@media(max-width:380px){
#portfolo1001 .port_about .font{font-size:23px}
#portfolo1001 .port_t_left .t_l_tit{font-size:30px;line-height:1.2}
#portfolo1001 .port_about .r_bot_txt p{font-size:16px}
#portfolo1001 .port_all_tit{font-size:13px;height:40px;width:120px}
#portfolo1001 .port_works .work_list a .list_bot_txt{padding:0 15px 20px}
#portfolo1001 .port_works .work_list a .list_bot_txt > b{margin-bottom:5px;font-size:18px}
#portfolo1001 .port_works .work_list a .list_bot_txt > .line > li{font-size:15px}
#portfolo1001 .port_works .work_list a .list_bot_txt > .line > li:after{margin:0 8px}
#portfolo1001 .port_works .work_list a .arrow{width:43px;height:43px}
#portfolo1001 .port_works .work_list > a:after{height:200px}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list{margin-bottom:0}
#portfolo1001 .port_skill .skill_list > li .txt > b{font-size:18px}
#portfolo1001 .port_skill .skill_list > li .txt > .dot_list > li{width:10px;height:10px}
#portfolo1001 .port_txt .word{font-size:16px}
}