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

/*テスト用に追加
box-sizing: border-box;
border: 1px solid #FF4BE5;
display: none;
*/
#width{
position: fixed;
z-index: 999;
font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
font-size: 10px;
color: rgba(255,255,255,0.7);
background-color: rgba(0,0,0,0.7);
}
/*
div,h1,h2,h3,ul,li,dl,dt,dd{
border: 1px dashed rgba(242,129,255,0.4);
}
p{
border: 1px dashed rgba(0,0,0,0.2);
}
img{
border: 1px dashed rgba(0,110,255,0.6);
}
a{
border: 1px dashed rgba(255,0,0,0.10);
}
li{
border: 1px dashed rgba(251,255,129,0.40);
}
div{
border: 1px dashed rgba(242,129,255,0.6);
}
p{
border: 1px dashed rgba(40,176,255,0.40);
}
*/

/*テスト用ここまで*/

/*-------------------------------------------------------------- リセット*/
html{font-size: 12px; }
* {box-sizing: border-box; margin: 0;padding: 0; font-weight: normal;}
*:focus {outline: none;}
body { line-height: 1; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; color: #fff;background-color: #000; }
img {vertical-align: middle; max-width: 100%; height: auto;}
ul,ol {list-style: none;}
h1,h2,h3,h4,h5,h6{position: relative;text-align: center; font-size: 100%; font-weight: bold; line-height: 1.2;color: #000; }
a {text-decoration: none; color: #CC0000; 
  -webkit-tap-highlight-color:rgba(0,0,0,0);
  cursor:pointer;
}
p{position: relative; line-height: 1.4; margin: 1em 0;}
li{position: relative;}
article,aside,details,footer,header,main,menu,nav,section,summary {
	display: block;
}

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

@media screen and (min-width:480px){
html{font-size: 13px; }
}
@media screen and (min-width:640px){
html{font-size: 14px; }
}
@media screen and (min-width:800px){
}
@media screen and (min-width:1000px){
}

/*------------------*/
header{height: 100vh; position: relative;text-align: center;background-color: #a0a0a0;}
header img.sp{display: block;}
header img.pc{display: none;}
header img.titlelogo{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);
max-height: 92vh;
max-width:92vw;}
header div.arrow{position: fixed; z-index: 999; bottom:3vh; left:0;width: 100%;}
header div.arrow img{width: 8%; max-width: 60px}

@media screen and (min-width:640px){
header img.sp{display: none;}
header img.pc{display: block;}
header img.titlelogo{
max-height: 80vh;
max-width:80vw;}
}
@media screen and (min-width:800px){
header img.titlelogo{
max-height: 70vh;
max-width:70vw;}
}
@media screen and (max-height:480px){
header img.titlelogo{
max-height: 100vh;
max-width:75vw;}
header div.arrow{padding: 0 0 1vh; }
header div.arrow img{width: 8vh; }
}

div.max-w{
width: 100%;
margin: 0 auto;
padding: 0 1px;}



/*------------------*/
ul.phlist{
display: flex;
flex-wrap: wrap;
border-left: 1px solid #333;
border-top: 1px solid #333;}
.phlist li{
width: calc(100%/3);
border-right: 1px solid #333;
border-bottom: 1px solid #333;
display: flex;
flex-direction: column;
justify-content: space-between;}
.phlist li a{}
.phlist li a img{
width: 100%;
height: calc(100vw/3);
object-fit: cover;
}

.phlist li a img {
  opacity: 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}
.phlist li a img.lazyloaded {
  opacity: 1;
}




@media screen and (min-width:800px){
.phlist li{width: calc(100%/4);}
.phlist li a img{height: calc(100vw/4);}
}
@media screen and (min-width:1400px){
.phlist li{width: calc(100%/5);}
.phlist li a img{height: calc(100vw/5);}
}
@media screen and (min-width:2000px){
.phlist li{width: calc(100%/6);}
.phlist li a img{height: calc(100vw/6);}
}


/*------------------*/
footer{font-family: Helvetica, Arial, sans-serif;text-align: center;padding: 3em;color: #666;}

/*------------------00gif */
img { pointer-events: none; }
img {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-touch-callout:none;
  -moz-user-select:none;
  touch-callout:none;
  user-select:none;
}