@charset "UTF-8";
/* -----------------------------------------------------------------------

    Theme Name:ST Works
    Theme Local URL:
    Description:ST Works
    Author:S.Tokushige
    Version:-
    Tags:-
    License:CC BY 4.0
    License URI:https://creativecommons.org/licenses/by/4.0/deed.ja

----------------------------------------------------------------------- */

body{font-family:'DINPro', sans-serif;font-size:15px;letter-spacing:.05em;color:#262626;}
a{text-decoration:none;}
img{max-width:100%;height:auto;vertical-align:bottom;border-style:none;}
hr{width:72%;margin:auto;border:1px solid #444444;margin-bottom:80px;}
::selection {color:#000;background-color:#ecc600;}
.pc-only{display:block;}
.sp-only{display:none;}

/*--------------------------------
 レイアウト
---------------------------------*/
.wrapper{background:#333;color:#858585;padding-top:0;}
.section{padding:90px 0;}
.section:nth-of-type(odd){background-color:#222;}
.container{max-width:1340px;margin:0 auto;padding:0 40px;}
.container-link{text-align:center;margin-top:4rem;}
.container-link a{border:1px solid #858585;color:#fff;padding:10px 20px;}
.container-link a:hover{border:1px solid #1ca9e3;background:#1ca9e3;}

/*--------------------------------
 見出し
---------------------------------*/
.title{font-size:34px;font-weight:bold;line-height:1;margin-bottom:80px;text-align:center;letter-spacing:.05em;color:#fff;}
.lead{font-size:16px;line-height:1.8;margin-bottom:30px;}

/*--------------------------------
ヘッダー
---------------------------------*/
.header{position:fixed;top:0;z-index:1;width:100%;}
.header .container{display:flex;align-items:center;justify-content:space-between;padding:20px 40px;}
.header-logo{font-size:20px;font-weight:bold;line-height:1.2;margin-right:20px;letter-spacing:.05em;}
.header-logo a{color:#fff;}
.gnav-list{display:flex;justify-content:space-between;list-style:none;}
.gnav-item:not(:last-child){margin-right:20px;}
.gnav-item a{position:relative;font-size:13px;font-weight:bold;display:inline-block;padding:5px 0;transition:.3s;letter-spacing:.05em;color:#fff;}
.gnav-item a:after{position:absolute;bottom:0;left:50%;width:0;height:3px;content:"";transition:.3s;-webkit-transform:translateX(-50%);transform:translateX(-50%);background-color:#fff;}
.gnav-item a:hover:after{width:100%;}

/*--------------------------------
 メインビジュアル
---------------------------------*/
.mv{display:flex;align-items:center;justify-content:center;height:85vh;text-align:center;background-image:url(../img/mv.jpg);color:#fff;}
.mv-container{padding:0 40px;}
.mv-title{font-size:60px;font-weight:bold;line-height:1.2;margin-bottom:5px;letter-spacing:.1em;}
.mv-subtitle{font-size:20px;font-weight:bold;line-height:1;margin-bottom:40px;letter-spacing:.08em;}
.mv-text{line-height:1.7;}
.mv-text a{color:#fff;border:1px solid #fff;padding:10px 20px;}
.mv-text a:hover{background:#fff;color:#000;}

.mv-sub{display:flex;align-items:center;justify-content:center;height:40vh;text-align:center;background-image:url(../img/mv.jpg);color:#fff;}
.mv-sub-container{padding:0 40px;}
.mv-sub-title{font-size:30px;font-weight:bold;line-height:1.2;margin-bottom:5px;letter-spacing:.1em;}

/*--------------------------------
 Works
---------------------------------*/
.works-list{display:flex;flex-wrap:wrap;margin-bottom:-40px;}
.works-item{width:31.74603%;margin-right:1.58730%;margin-bottom:40px;color:#fff;}
.works-item:hover{opacity:.9;}
.works-item:nth-of-type(3n){margin-right:0;}
.works-category{font-size:10px;margin:13px 0 10px 0;}
.works-category-web{color:#1ca9e3;padding:5px;border:1px solid #1ca9e3;border-radius:5px;}
.works-name{font-size:12px;font-weight:bold;margin-top:8px;}
.works-info{font-size:12px;margin-top:5px;color:#858585;}

/*--------------------------------
 Skill
---------------------------------*/
.skills-list{display:flex;flex-wrap:wrap;margin-bottom:-40px;text-align:center;}
.skills-item{width:31.74603%;margin-right:1.58730%;margin-bottom:20px;color:#fff;background:#333333;padding:50px;}
.skills-category{font-size:10px;margin:13px 0 10px 0;}
.skills-category-web{color:#1ca9e3;padding:5px;border:1px solid #1ca9e3;border-radius:5px;}
.skills-name{font-size:20px;font-weight:bold;margin:10px 0;}
.skills-info{font-size:12px;margin-top:5px;color:#858585;}

/*--------------------------------
 About
---------------------------------*/
.profile{display:flex;flex-wrap:wrap;max-width:800px;margin:0 auto;padding-bottom:40px;}
.profile-img{width:20%;margin-right:30px;border-radius:50%;}
.profile-img img{box-shadow:-15px 15px 0px 0px #1ca9e3}
.profile-body{flex:1;}
.profile-body h3{font-size:30px;line-height:1.8;color:#fff;}
.profile-body h3 span{color:#1ca9e3;}
.profile-body p{font-size:12px;line-height:1.8;padding:10px 50px 10px 0;}
.profile-body p:not(:last-child){margin-bottom:30px;}

/*--------------------------------
 ページトップ
---------------------------------*/
.page-top{font-weight:bold;padding:10px;cursor:pointer;text-align:center;background-color:#4c4c4c;}
.page-top .material-icons-outlined{vertical-align:bottom;color:#fff;}

/*--------------------------------
 フッター
---------------------------------*/
.footer{padding:30px;background-color:#333;}
.copyright{font-size:10px;text-align:center;color:#797979;}

/*--------------------------------
 下層：Worksページ
---------------------------------*/
.article{padding:80px 0;}
.article a{text-decoration:none;border-bottom:1px solid #1ca9e3;color:#fff;}
.article a:hover{color:#fff;background:#1ca9e3;}
.article-container{max-width:1040px;margin:0 auto;padding:0 20px;}
.article-title{margin-bottom:30px;text-align:center;}
.article-body{max-width:720px;margin:0 auto;margin-bottom:80px;}
.article-body h3{font-size:16px;margin-bottom:5px;color:#fff;border-left:4px solid #555;padding-left:10px;}
.article-body h3::before{position:absolute;top:0;left:0;width:4px;height:100%;content:"";border-radius:3px;background-color:#333;}
.article-body p{font-size:12px;line-height:1.8;margin:0 14px 30px 14px;}
.article-body p span{border:1px solid;padding:6px;}
.article-body p span.Illustrator{color:#ff9a00;}
.article-body p span.Photoshop{color:#31a8ff;}
.article-body p span.htmlcss{color:#35fa00;}
.article-body p span.Javascript{color:#f8dc3d;}
.article-body p span.PHP{color:#777bb3;}
.article-body p span.WordPress{color:#00769c;}
.article-body p span.figma{color:#ff7262;}
.article-body p span.DR{color:#e67eff;}
.home-link{text-align:center;}
.home-link a{border:1px solid #858585;color:#fff;padding:10px 20px;}
.home-link a:hover{border:1px solid #1ca9e3;}

/*media Queries 767
----------------------------------------------------*/
@media screen and (max-width:767px){body{font-size:14px;}
.pc-only{display:none;}
.sp-only{display:block;}

/* 見出し */
.title{font-size:26px;margin-bottom:20px;}
.lead{font-size:14px;line-height:1.7;margin-bottom:20px;}

/* レイアウト */
.wrapper{padding-top:0;}
.section{padding:60px 0;}
.container{padding:0 20px;}

/* ヘッダー */
.header .container{padding:15px;}
.header-logo{font-size:15px;margin-right:15px;}
.gnav-item:not(:last-child){margin-right:10px;}
.gnav-item a{font-size:10px;}
.gnav-item a:after{display:none;}

/*メインビジュアル */
.mv{height:75vh;}
.mv-container{padding:0 20px;}
.mv-title{font-size:30px;}
.mv-subtitle{font-size:16px;margin-bottom:20px;}
.mv-text{font-size:14px;line-height:1.7;}

/* Works */
.works-name{font-size:12px;}
.works-info{margin-top:3px;}
.works-list{justify-content:space-between;}
.works-item{flex:0 0 48%;margin-right:0;margin-bottom:30px;}

/* Skills */
.skills-item{width:48.4%;margin-right:1.58730%;margin-bottom:10px;color:#fff;padding:20px;}
.Skills-name{font-size:12px;}
.Skills-info{margin-top:3px;}
.Skills-list{justify-content:space-between;}

/* Skill */
.skill-list{display:block;margin-bottom:0;}
.skill-item{width:100%;margin-bottom:35px;}
.skill-item:last-child{margin-bottom:0;}
.skill-name{margin-bottom:5px;}
.skill-text{font-size:13px;line-height:1.7;}

/* About */
.profile{display:block;}
.profile-img{width:150px;margin:0 auto;margin-bottom:25px;}
.profile-body p{font-size:14px;line-height:1.7;}
.profile-body p:not(:last-child){margin-bottom:20px;}

/* フッター */
.footer{padding:20px;}

/* 下層ページ */
.article{padding:50px 0;}
.article-body h3{font-size:16px;}
.article-body h3:not(:first-child){margin-top:30px;}
.article-body p{font-size:14px;line-height:1.7;margin-bottom:20px;}
}