@charset "utf-8";
/* CSS Document */

/*動物病院----------------------------------------------*/
.thumnail li:nth-child(1) a{
display: block;
position: relative;
}

#web .thumnail li:nth-child(1) a::before{
    content: "・架空の動物病院のホームページ\A・トップページ1枚、下層ページ2枚\A・デザイン＆コーディング";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#web .thumnail li:nth-child(1) img{
    width: 100%;
}

#web .thumnail li:nth-child(1) a:hover::before{
    opacity: 1;
}


/*チョコレート専門店----------------------------------------------*/
.thumnail li:nth-child(2) a{
display: block;
position: relative;
}

#web .thumnail li:nth-child(2) a::before{
    content: "・架空のチョコレート専門店のホームページ\A・トップページ1枚\A・デザイン＆コーディング";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#web .thumnail li:nth-child(2) img{
    width: 100%;
}

#web .thumnail li:nth-child(2) a:hover::before{
    opacity: 1;
}


/*美容室----------------------------------------------*/
.thumnail li:nth-child(3) a{
display: block;
position: relative;
}

#web .thumnail li:nth-child(3) a::before{
    content: "・架空の美容室のホームページ\A・トップページ1枚、下層ページ3枚\A・デザインのみ";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#web .thumnail li:nth-child(3) img{
    width: 100%;
}

#web .thumnail li:nth-child(3) a:hover::before{
    opacity: 1;
}


/*ギター教室----------------------------------------------*/
#lp .thumnail li:nth-child(1) a::before{
    content: "・架空のギター教室のランディングページ\A・ページ1枚\A・デザイン＆コーディング";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#lp .thumnail li:nth-child(1) img{
    width: 100%;
}

#lp .thumnail li:nth-child(1) a:hover::before{
    opacity: 1;
}

/*オープンハウス----------------------------------------------*/
#banner .thumnail li:nth-child(1) a::before{
    content: "・架空のオープンハウスのバナー広告\A・W1200px×H628px、W1200px×H1200pxの全2枚";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#banner .thumnail li:nth-child(1) img{
    width: 100%;
}

#banner .thumnail li:nth-child(1) a:hover::before{
    opacity: 1;
}


/*ファッションセール----------------------------------------------*/
#banner .thumnail li:nth-child(2) a::before{
    content: "・架空のファッションセールのバナー広告\A・W1200px×H628pxの1枚";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#banner .thumnail li:nth-child(2) img{
    width: 100%;
}

#banner .thumnail li:nth-child(2) a:hover::before{
    opacity: 1;
}


/*かがり火フェス----------------------------------------------*/
#leaf .thumnail li:nth-child(1) a::before{
    content: "・架空の音楽フェスティバルのチラシ\A・W210mm×H297mm(a4)の表裏";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#leaf .thumnail li:nth-child(1) img{
    width: 100%;
}

#leaf .thumnail li:nth-child(1) a:hover::before{
    opacity: 1;
}


/*美容室チラシ----------------------------------------------*/
#leaf .thumnail li:nth-child(2) a::before{
    content: "・架空の美容室のチラシ\A・W210mm×H297mm(a4)の表";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#leaf .thumnail li:nth-child(2) img{
    width: 100%;
}

#leaf .thumnail li:nth-child(2) a:hover::before{
    opacity: 1;
}


/*動物病院三つ折り----------------------------------------------*/
#leaf .thumnail li:nth-child(3) a::before{
    content: "・架空の動物病院の三つ折りリーフレット\A・W100mm×H210mm(巻き三つ折り)";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#leaf .thumnail li:nth-child(3) img{
    width: 100%;
}

#leaf .thumnail li:nth-child(3) a:hover::before{
    opacity: 1;
}


/*ゼロ賃----------------------------------------------*/
.thumnail li:nth-child(4) a{
display: block;
position: relative;
}

#leaf .thumnail li:nth-child(4) a::before{
    content: "・知人からの依頼で制作した不動産管理会社のサービス案内チラシ\A・W210mm×H297mm(a4)の表";
		line-height: 1.75em;
		white-space: pre;
    width: 98.15%;
    height: 100%;
    background: rgba(0,0,0,.6);
    color: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    align-items: center;
		padding-left: 2%;
    opacity: 0;
    transition: all .3s ease-in-out;
}

#leaf .thumnail li:nth-child(4) img{
    width: 100%;
}

#leaf .thumnail li:nth-child(4) a:hover::before{
    opacity: 1;
}


@media(max-width: 767px){
#web .thumnail li:nth-child(1) a:hover::before{
    opacity: 0;
}
#web .thumnail li:nth-child(2) a:hover::before{
    opacity: 0;
}
#web .thumnail li:nth-child(3) a:hover::before{
    opacity: 0;
}
#lp .thumnail li:nth-child(1) a:hover::before{
    opacity: 0;
}
#banner .thumnail li:nth-child(1) a:hover::before{
    opacity: 0;
}
#banner .thumnail li:nth-child(2) a:hover::before{
    opacity: 0;
}
#leaf .thumnail li:nth-child(1) a:hover::before{
    opacity: 0;
}
#leaf .thumnail li:nth-child(2) a:hover::before{
    opacity: 0;
}
#leaf .thumnail li:nth-child(3) a:hover::before{
    opacity: 0;
}
#leaf .thumnail li:nth-child(4) a:hover::before{
    opacity: 0;
}
}