@charset "UTF-8";

/*------------------------------------------
# RESET-CSS
------------------------------------------*/
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}:where([hidden]:not([hidden='until-found'])){display:none!important}:where(html){-webkit-text-size-adjust:none;color-scheme:dark light;tab-size:2}@media (prefers-reduced-motion:no-preference){:where(html:focus-within){scroll-behavior:smooth}}:where(body){line-height:1.5;font-family:system-ui,sans-serif;-webkit-font-smoothing:antialiased}:where(button){all:unset}:where(input,button,textarea,select){font:inherit;color:inherit}:where(textarea){resize:vertical;resize:block}:where(button,label,select,summary,[role='button'],[role='option']){cursor:pointer}:where(:disabled){cursor:not-allowed}:where(label:has(>input:disabled),label:has(+input:disabled)){cursor:not-allowed}:where(a){color:inherit;text-underline-offset:.2ex}:where(ul,ol){list-style:none}:where(img,svg,video,canvas,audio,iframe,embed,object){display:block}:where(img,picture,svg,video){max-inline-size:100%;block-size:auto}:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:break-word}:where(h1,h2,h3){line-height:calc(1em + 0.5rem);text-wrap:balance}:where(hr){border:none;border-block-start:1px solid;color:inherit;block-size:0;overflow:visible}:where(:focus-visible){outline:3px solid CanvasText;box-shadow:0 0 0 5px Canvas;outline-offset:1px}:where(:focus-visible,:target){scroll-margin-block:8vh}:where(.visually-hidden:not(:focus-within,:active)){clip-path:inset(50%)!important;height:1px!important;width:1px!important;overflow:hidden!important;position:absolute!important;white-space:nowrap!important;border:0!important}a{color:inherit;text-decoration: none;}html{scroll-behavior: smooth;}

body{
    font-family: Lato, 'Noto Sans JP', "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    color: #313131;
    box-sizing: border-box;
    line-height: 1.35;
    background-color: #f6f6f6;
    /* background-image: url(../image/bg.jpg);
    background-size: 40%; */
    
  }

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.PC-CSS { display: inline-block !important; }
.SP-CSS { display: none !important; }
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width:768px) {
.PC-CSS { display: none !important; }
.SP-CSS { display: inline-block !important;}
.SP-none{ display: none !important; }
}

@media only screen and (max-width:768px) {
    body{font-size: 3.8vw;}
}
/*------------------------------------------
# contents
------------------------------------------*/

#contents-wrap{
    display: flex;
    margin: 5rem auto;
    width: 90vw;
    position: relative;
}

#navi{
    min-width: 350px;
    margin-right: 2rem;
    position: fixed;
    z-index: 100;
}

#main-column{
    width: 100%;
    margin-left: 400px;
}

section{margin-bottom: 5rem;}

section > h2{
    font-size: 3.8em;
    margin-bottom: 0.5em;
}

li:last-child{margin: 0;}

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

    #contents-wrap{
        width: 98vw;
        flex-direction: column;
        margin: 0 auto;

    }
    #navi{
        min-width: 90%;
        margin-right: 0;
        z-index: 100;
        width: 100%;
        
    }

    #main-column{
        width: 90%;
        margin-left: 0;
        margin: 16vw auto;
    }

    section{
        margin-bottom: 5rem;padding-top: 30vw;
    }

    section > h2{
    font-size: 10vw;
    margin-bottom: 0.5em;
    
}
}

/*------------------------------------------
# navigation
------------------------------------------*/

#navi{
    padding: 2em;
    border-radius: 0.8rem;
    background: #f6f6f6;
    box-shadow: 10px 15px 20px #e1e1e1, -10px -10px 20px #ffffff;
    /* background-image: url(../image/bg.jpg);
    background-size: 40%; */
    
}  

#navi .logo{
    font-size: 2.5em;
    line-height: 1.1;
    font-weight: 900;
}

#navi .update{
    margin-top: 1em;
    font-size: 90%;
    display: flex;
    align-items: center;
}

#navi .update span{
    background-color: #aaa; color: #ffffff;
    border-radius: 0.3em;
    margin-right: 0.5em;
    padding:0.05em 0.5em 0.1em;
    font-weight: 500;
    font-size: 90%;
}

#navi nav > ul {
    margin: 1em 0;
}

#navi nav > ul >li{
    padding:0.5em 0;
    font-weight: 700;
}

#navi .copyright{
    text-align: center;
    font-size: 80%;
}

#navi  a{
  display: inline-block;
  text-decoration:none;
  position: relative;
  transition: .3s;
  font-weight: 500;
}

#navi a:hover{
    font-weight: 800;
  }

#navi  a::after{
  position: absolute;
  bottom: -3px;
  left: 0;
  content: '';
  width: 0;
  height: 1px;
  background-color: #666;
  transition: .3s;
}

#navi a:hover::after{
  width: 100%;
}

@media only screen and (max-width:768px) {
    #navi{
        padding: 5vw 5vw 2vw 5vw;
        border-radius: 0;
        box-shadow: initial;
        box-sizing: border-box;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        border-bottom: 1px solid #eee;
        
    }
    #navi .logo{
        font-size: 8vw;
        line-height: 1.1;
        font-weight: 900;
    }

    #navi .update{
        position: absolute;
        top:1.5vw;
        right: 5vw;
        font-size: 3.8vw;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
    }

    #navi .update span{
        border-radius: 0.3em;
        margin-right: 0;
    }

    #navi nav > ul {
        display: flex;
        margin: 0.5em 0;
        flex-wrap: wrap;
    }

    #navi nav > ul >li{
        padding:0 3vw 1vw 0;
    }

    #navi  a{
        font-size: 4vw;
      }
    
}


/*------------------------------------------
# 基本設定
------------------------------------------*/

.dl-list > dt{
    font-size: 130%;
    font-weight: 700;
    display: flex;
    align-items: center;
    margin-bottom: 1em;
}

.dl-list > dt::before {
    content: "#";
    margin-right: 0.2em;
    color: #bbb;
    font-size: 120%;
}

.dl-list > dt::after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #ccc;
    margin-left: 0.5em;
}

.dl-list {margin-bottom: 2em;}
.dl-list > dd{margin-left: 1em;}

.check-list > li , .mark-list > li{
    margin-bottom: 0.5em;
    position: relative;
    padding-left: 1.7em;
}

.check-list > li:before {
    content: '';/*何も入れない*/
    display: inline-block;
    width: 1.2em;/*画像の幅*/
    height: 1.2em;/*画像の高さ*/
    background-image: url(../image/checkbox_gray.svg);
    background-size: contain;
    vertical-align: middle;
    margin-right: 0.5em;
    position: absolute;
    top:0.12em;
    left:0;
  }

.mark-list > li:before{
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 100%;
    background: #aaa;
    position: absolute;
    top: 0.4em;
    left: 0.5em;
}

.harf-layout{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.harf-layout > li{width: 48%;}

@media only screen and (max-width:768px) {
    .harf-layout{flex-direction: column;}
    .harf-layout > li{width: 100%;}
    .dl-list > dd {
        margin-left: 0;
    }

}

/*------------------------------------------
# MV
------------------------------------------*/
.MV{
    width: 100%;
    background-color: #084e8f;
    height: 35vw;
    border-radius: 1em;
    margin-left: ;
}

@media only screen and (max-width:768px) {
.MV {
    height: 40vh;
    border-radius: 0.5em;}
}
/*------------------------------------------
#WORK
------------------------------------------*/

#WORK{

}

#WORK > ul {
display: grid;
grid-template-columns: repeat(3, 31%);
gap: 2.5em 3.4%;
}

#WORK > ul >li {

}

#WORK a{
    -webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
}

#WORK .workImg{
    width: 100%;
    aspect-ratio: 1 / 1;
    background-color: red;
    border-radius: 0.8em 0.8em 0.8em 0;
    background-size: cover;
    position: relative;
}

.workImg-mask{
    position: absolute;
    z-index: ;
    width: 100%;
    height: 100%;
    border-radius: 0.8em 0.8em 0.8em 0;
	/* background-color:	rgba(0,0,0,0.7); */
	-webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
    opacity: 0;
    background-color: #333;
    mix-blend-mode: multiply;
}

.workImg-text{
    position: absolute;
    color: #FFF;
    opacity: 0;
    padding: 2em 2em 2em 2em;
    -webkit-transition:	all 0.6s ease;
	transition:		all 0.6s ease;
    left:-2em;
    width: 100%;
    height: 100%;
}

.workImg-text > div{
    width: 80%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    line-height: 1.7;
    font-size: 90%;
}

.workImg-mask > p{
    color: #FFF;
    
}

.workImg:hover .workImg-mask ,.workImg:hover .workImg-text{
	opacity:		1;	/* マスクを表示する */
    padding: 2em 2em 2em 2em;	/* 右にずらす */
    left: 0;
}







#WORK .p01{background-image: url(../image/port01-thumbnail.jpg);}
#WORK .p02{background-image: url(../image/port02-thumbnail.jpg);}
#WORK .p03{background-image: url(../image/port03-thumbnail.jpg);}
#WORK .p04{background-image: url(../image/port04-thumbnail.jpg);}
#WORK .p05{background-image: url(../image/port05-thumbnail.jpg);}
#WORK .p06{background-image: url(../image/port06-thumbnail.jpg);}
#WORK .p07{background-image: url(../image/port07-thumbnail.jpg);}
#WORK .p08{background-image: url(../image/port08-thumbnail.jpg);}
#WORK .p09{background-image: url(../image/port09-thumbnail.jpg);}
#WORK .p10{background-image: url(../image/port10-thumbnail.jpg);}
#WORK .p11{background-image: url(../image/port11-thumbnail.jpg);}
#WORK .p12{background-image: url(../image/port12-thumbnail.jpg);}

#WORK .workImg > span{
    position: absolute;
    bottom: 0;
    background-color: #555;
    color: #FFF;
    padding:0.1em 0.8em;
    font-size: 80%;
}

#WORK .workDl {
    display: flex;
    flex-direction: column;
    margin: 0.6em 0 0;
}


#WORK .workDl > dt{
    font-weight: 700;
    font-size: 105%;
    margin-bottom: 0.5em;
}

#WORK .workDl > dt > span{
    font-weight: 500;
    font-size: 90%;
    display: block;
    
}

#WORK .workDl > dd > ul{
    display: flex;
    margin-bottom: 0.3em;
}

#WORK .workDl > dd > ul > li{
    font-size: 80%;
    border-radius: 3px;
    background-color: #ddd;
    padding:0.1em 0.5em 0.2em;
    margin-right: 0.5em;
}

.classifying{
    display: flex;
    align-items: center;
}

.classifying span{
    font-size: 80%;
    margin-right: 0.5em;
}

.workDl-link{
    font-size: 75%;
    color: #666;
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 0.3em;
    -webkit-transition:	all 0.3s ease;
	transition:		all 0.3s ease;
}

.workDl-link:before {
    content: '';
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    background-image: url(../image/link.svg);
    background-size: contain;
    vertical-align: middle;
    margin-right: 0.3em;
    background-repeat: no-repeat;
}

#WORK a:hover .workDl > dt{
    color:#084e8f;
}

#WORK a:hover .workDl-link{
    color:#084e8f;
    font-weight: 500;
}


@media only screen and (max-width:768px) {
    #WORK > ul {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        gap: 15vw 0;
        }
}


/*------------------------------------------
# PROFILE
------------------------------------------*/

#PROFILE .contents-wrap{

}

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

.profile-basic .photo{
    width: 30%;
    background-color: #FFF;
    aspect-ratio: 1 / 1.3;
    border-radius: 0.4em;
}

.profile-basic .text{
    width: 65%;
}

.profile-basic .name{
    line-height: 1.2;
    font-weight: 600;

}

.profile-basic .name dd{
    font-size: 200%;
    letter-spacing: 0.1em;
}

.profile-basic .name dd > span{
    font-size: 50%;
    letter-spacing: normal;
    font-weight: 400;
}

.profile-basic li{
    margin-bottom: 0.5em;

}


.profile-business{
    margin: 3em 0;
}

.profile-business > ul > li{
    margin-bottom: 3em;
}


@media only screen and (max-width:768px) {
    .profile-basic{
        flex-direction: column;
    }
    .profile-basic .photo{
        width: 100%;
        aspect-ratio: 1 / 0.6;
        border-radius: 0.4em;
        margin-bottom: 1em;
    }
    
    .profile-basic .text{ width: 100%;}
}


.application-list{
    display: flex;
    margin-top: 1em;
}

.application-list li{
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.application-list li .small{
    width: 70%;
}

/*---------------
# biography 経歴
---------------*/
.biography-list > li{ margin-bottom: 0.5em;}
.biography-list > li > dl{ display: flex;}
.biography-list > li > dl > dt{ margin-right: 1.5em;}

@media only screen and (max-width:768px) {
    .biography-list > li > dl{ flex-direction: column;}
    .biography-list > li > dl > dt{ font-weight: 600;}
}

/*---------------
# appeal-point 得意なこと
---------------*/
.appeal-point dt{font-weight: 700; font-size: 105%;}
.appeal-point dd{margin: 0.3em 0 1.2em;}

@media only screen and (max-width:768px) {
    .appeal-point dt >span{display: block;font-size: 90%;
        margin-left: -0.5em;}
}


.service-list{
    display: grid;
    flex-wrap: wrap;
    align-items: stretch;
    grid-template-columns: repeat(3, 32%);
    gap: .5em 1.5%;

}

.service-list > li{
    /* width: 20vw; */
    margin-right: 1em;
    margin-bottom: 1em;
    background-color: #FFF;
    padding:1.3em;
    box-sizing: border-box;
    border-radius: 0.3em;
}

.service-list > li:last-child{
    width: 40vw;
    background-color: initial;
    padding:0;
    border-radius: 0.3em;
    font-size: 80%;
    color: #666;
}

.service-list dt{
    font-weight: 700;
    font-size: 120%;
}

.service-list span.price{
    display: block;
    font-size: 90%;
    color: #313131;
    font-weight: 400;
}

.service-list dd{
    color: #666;
    font-size: 90%;
    margin-top: 0.5em;
}


@media only screen and (max-width:768px) {
    .service-list{display: flex;}
    .service-list > li{
        width: 100%;}
        .service-list > li:last-child{
            width: 100%;
}