@charset "UTF-8";

#works_container{
	/*position:relative;*/
	display:none;
	width:800px;
	overflow:hidden;
	position:relative;
	margin-left:100px;
	
}
#works_contents{
	position:absolute;/*この指定が大切*/
	display:block;
}

.work{
	float:left;
	margin-right: 14px;
    margin-bottom: 14px;
    cursor: pointer;
}


#preview{
	position: absolute;
	background-color:#fff;
	display: none;
	color: #639ec8;
	text-align: center;
	padding: 5px 5px 5px 5px;
	border:solid 1px #c7d9e5;
	font-size:70%;
}

.work_view{
	clear:both;
	width:760px;
	position:relative;
	margin-top:10px;
	margin-left:10px;
	display:none;
	border:solid 1px #c7d9e5;
    background-color:#fff;
}

.work_view img{
	margin-left:71px;
}
.work_view .work_img{
    margin-top: 30px;
}
.work_view .work_img img{
	width:613px;
    height:438px;
}

.work_view ul{
	margin-left:20px;
    margin-right:20px;
	padding-top:20px;
	padding-bottom:20px;
	color: #639ec8;
	font-size:70%;
}

.work_view ul li{
    margin-top: 10px;
    line-height: 1.4em;
}

.work_view ul li a {
            padding: 5px; /* パディング */
            background-color: #639ec8; /* ボタンの背景色 */
            color: white; /* テキストの色 */
            border: none; /* ボーダーなし */
            border-radius: 10px; /* 角丸 */
            cursor: pointer; /* カーソルをポインターに */
            text-align: center; /* テキストを中央揃え */
            text-decoration: none; /* テキストの下線なし */
            display: inline-block; /* インラインブロック要素に */
            font-size: 12px; /* フォントサイズ */
}
.work_view ul li a:hover {
            background-color: #187cc4; /* ボタンの背景色を変更 */
        }


.close_btn{
    width:26px;
    height:24px;
    position: absolute;
    display: none;
    left:735px;
    cursor: pointer;
}
.close_btn img{
    width:26px;
    height:24px;
}


/*----------スマホ用の記述----------------*/

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

#works_container{
	width:var(--window-width);
    width:calc(--window-width*(800/1000));
    margin-left:0px;
    height:calc((560*56.25%)/1000);
}
        
#works_contents{
    width:calc(100%*(800/1000));
    margin-left:calc(100%*(100/1000));
}

.work{
    width:calc(100%*(200/800));/*--114のところを200にしたサイズ調整--*/
    margin-right: 0px;
    margin-bottom: calc(100%*(14/800));
    cursor: pointer;
}
.work img{
    width:calc(100%*(100/114));
    height:calc(100%*(102.5/114));
}
.work_view{
	width:calc(100%*(760/1000));
	margin-top:calc(100%*(10/1000));
	margin-left:calc(100%*(110/1000));/*--なぜ110かわからない--*/
    background-color:#fff;
}
.work_view img{
    margin-left:calc(100%*(71/760));
}
.work_view .work_img img{
    width:calc(100%*(613/760));
    height:calc(100%*(438/760));
}
.close_btn{
    position: absolute;
    display: none;
    left:calc(100%*(774/1000));
    cursor: pointer;
    text-align: right;
}
.close_btn img{
    width:calc(100%*(25/30));
    height:calc(100%*(25/30));
    
}

    
}




/*----------スマホ用の記述　iPhone SE 2ndGen----------------*/

@media screen and (max-height:800px) {
    
.work{
    width:calc(100%*(200/1000));/*--114のところを200にしたサイズ調整--*/
    margin-right: 0px;
    margin-bottom: calc(100%*(14/1000));
}
    
.work_view .introduction{
    display: none;
}
    
}