@charset "UTF-8";

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

/*-----------------------------------------------------*/
/*------------------タイトル--------------------*/
/*-----------------------------------------------------*/
.gallery-op{
background-image: url(../img/gallery_main_back.webp);
background-size: cover;
background-position: center;
height: 0;
padding-top: 30.255%;
margin-top: var(--hamburger-size);
position: relative;
}
@media screen and (max-width: 768px) {
.gallery-op{
background-image: url(../img/gallery_main_back_sp.webp);
padding-top: 46.83%;
}
}


/* アイテム */
.gallery-op-list{
}
.gallery-op-list :is(.bubble01, .bubble02, .bubble03, .bubble04,.img01, .img02, .img03, .img04){
position: absolute;
}
@media screen and (max-width: 768px) {
.gallery-op-list :is(.img01, .img02, .img03, .img04){
display: none;
}
}


/* タイトルロゴ */
.gallery-op .title-logo{
position: absolute;
width: 20vw;
top:5vw;
left: 0;
right: 0;
margin: 0 auto;
}

/*撮影の裏側も */
.gallery-op-list .bubble01{
width: 12vw;
top:10vw;
left: 27vw;
transition-delay:0.3s;/*アニメ開始*/
}
/*ちょっと恥ずかしい場面も */
.gallery-op-list .bubble02{
width: 15vw;
top:4vw;
left: 27vw;
}
/*北海道の壮大な景色も */
.gallery-op-list .bubble03{
width: 15vw;
top:4vw;
right: 27vw;
transition-delay:0.5s;/*アニメ開始*/
}
/*宣伝も */
.gallery-op-list .bubble04{
width: 15vw;
top:10vw;
right: 24vw;
transition-delay:0.7s;/*アニメ開始*/
}
@media screen and (max-width: 768px) {
/* タイトルロゴ */
.gallery-op .title-logo{
width: 35vw;
top:5vw;
left: 0;
right: 0;
}
/*撮影の裏側も */
.gallery-op-list .bubble01{
width: 27vw;
top:15vw;
left: 4vw;
}
/*ちょっと恥ずかしい場面も */
.gallery-op-list .bubble02{
width: 27vw;
top:4vw;
left: 8vw;
}
/*北海道の壮大な景色も */
.gallery-op-list .bubble03{
width: 27vw;
top:4vw;
right: 8vw;
}
/*宣伝も */
.gallery-op-list .bubble04{
width: 27vw;
top:15vw;
right: 4vw;
}
}

/*画像全体*/
.gallery-op-list :is(.img01,.img02,.img03,.img04){
transition-delay:0.8s;
}
/*画像01 */
.gallery-op-list .img01{
width: 12vw;
top:11vw;
left: 13vw;
}
/*画像02 */
.gallery-op-list .img02{
width: 9vw;
top:2vw;
left: 8vw;
}
/*画像03 */
.gallery-op-list .img03{
width: 6vw;
top:1.7vw;
right: 20vw;
}
/*画像04 */
.gallery-op-list .img04{
width: 11vw;
top:10.5vw;
right: 6vw;
}


.gallery-op .title05{
text-align: center;
margin-top: -8vw;
}

/* ローディング後に再生 */
.gallery-op.start .turning,
.gallery-op.start .fadeUp,
.gallery-op.start .bound {
  opacity: 1;
  transform: none;
}




/*-----------------------------------------------------*/
/*------------------ギャラリー--------------------*/
/*-----------------------------------------------------*/

.gallery_all{
}


/* ----可変グリッドの見た目----- */

/*タイルレイアウトを動かす領域の大きさ*/
.list{
width: 100%;
margin: 0 auto 0 auto;
}

/*タイルレイアウト上下左右の余白*/
.list-box{margin: 10px;}
@media screen and (max-width: 768px) {
.list-box{margin: 5px;}
}

/*サムネイル画像を固定サイズにしたいなら無くてもok*/
.list-img {max-height: 500px;}

/*画像の大きさ widthは必須。heightを指定すると高さが異なるタイルレイアウトにはなりません。*/
.list-img img {
width: 250px;
height: auto;
}
@media screen and (max-width: 768px) {
.list-img img {
width: 200px;
height: auto;
}
}
@media screen and (max-width: 500px) {
.list-img img {
width: 160px;
height: auto;
}
}





/* -------------------------- */
/* ---  ページャー 共通  --- */
/* -------------------------- */

.pager01{
margin: 0 0 20px 0;
}
.pager02{
text-align:right;
margin: 20px 0 100px 0;
}
@media screen and (max-width: 400px) {
.pager01{
margin: 30px 0 20px 0;
}
}

.pager01,.pager02{clear:both;}

/*ページャーボタン*/
.pager01 a, .pager02 a{
background:var(--color-blue);
display: inline-flex;
justify-content: center;
align-items: center;
border-radius: 50%;
flex-flow: column;
vertical-align: top;
width: 40px;
height: 40px;
color: var(--color-white);
margin: 3px 3px;
}

.pager01 a:last-child,
.pager02 a:last-child{
background-color: var(--color-blue-rich);
font-size: var(--s14);
}


/*現在のページのボタン*/
.pager01 a.current,.pager02 a.current{background: #999;}
.pager01 a:hover,.pager02 a:hover{background:#999;}









/* --------------------- */
/* -----ローディング------- */
/* --------------------- */
#loading {
  position: fixed;
  inset: 0;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: opacity .8s, visibility .8s;
  z-index: 9999;
}
#loading.hide {
  opacity: 0;
  visibility: hidden;
}
#content {
  transition: opacity 1s;
}

/* ローディング終わったらメインpngアニメ再生*/
.png-anim {
  opacity:0;
  transition: opacity .6s;
}
.png-anim.start {
  opacity:1;
}