

/*** for PC Browser ***/
@media (min-width:401px)
{
/*LightBoxもどき*/
.lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}

.lb img {
    width: auto !important;
    max-height: 100%!important;
    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}

.lb:target {
    opacity: 1;
    z-index: 103;
}

.lb:target img {
    transform: scale(1);
}


/* 閉じるボタン（ダミー） */
.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height:3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.lb::before {
    transform: rotate(-315deg);
}
.lb::after {
    transform: rotate(315deg);
}

HTML
<a href="#sample01"><img src="secure/199160/thumbnail01.jpg"></a>
<a id="sample01" href="#close" class="lb"><img src="secure/199160/large01.jpg"></a>

<a href="#sample02"><img src="secure/199160/thumbnail02.jpg"></a>
<a id="sample02" href="#close" class="lb"><img src="secure/199160/large02.jpg"></a>

<a href="#sample03"><img src="secure/199160/thumbnail03.jpg"></a>
<a id="sample03" href="#close" class="lb"><img src="secure/199160/large03.jpg"></a>

<a href="secure/198927/large01.jpg"><img alt="thumb01" src="secure/198927/thumbnail01.jpg" /></a>
}


/*** for Smart Phone ***/
@media (max-width:400px)
{
/*LightBoxもどき*/
.lb {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    background: rgba(0,0,0,.7);
    opacity: 0;
    transition: .3s opacity ease;
    z-index: -1;
}

.lb img {
    width: auto !important;
    max-height: 100%!important;
    transform: scale(.7);
    transition: .4s transform ease;
    pointer-events: none;
}

.lb:target {
    opacity: 1;
    z-index: 103;
}

.lb:target img {
    transform: scale(1);
}


/* 閉じるボタン（ダミー） */
.lb::before,.lb::after {
    display: block;
    position: fixed;
    content: "";
    width: 24px;
    height:3px;
    top: 24px;
    right: 12px;
    background: #fff;
    border-radius: 4px;
}
.lb::before {
    transform: rotate(-315deg);
}
.lb::after {
    transform: rotate(315deg);
}

HTML
<a href="#sample01"><img src="secure/199160/thumbnail01.jpg"></a>
<a id="sample01" href="#close" class="lb"><img src="secure/199160/large01.jpg"></a>

<a href="#sample02"><img src="secure/199160/thumbnail02.jpg"></a>
<a id="sample02" href="#close" class="lb"><img src="secure/199160/large02.jpg"></a>

<a href="#sample03"><img src="secure/199160/thumbnail03.jpg"></a>
<a id="sample03" href="#close" class="lb"><img src="secure/199160/large03.jpg"></a>

<a href="secure/198927/large01.jpg"><img alt="thumb01" src="secure/198927/thumbnail01.jpg" /></a>
}
