@charset "UTF-8"; /*---------------------------------------------------------- 3STARS Photo Album: 3starsPA.css ----------------------------------------------------------*/ /*---------------------------------------------------------- RESET & BASE ----------------------------------------------------------*/ *{margin:0px;padding:0px;} article,aside,header,hgroup,canvas,details,figcaption,figure,footer,main,nav,section,summary,p{display:block;} ul,ol{margin:0;padding:0;list-style:none;} img,video,object{max-width:100%;height:auto;border:none;vertical-align:bottom;} body{font:16px/1.8 "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",Meiryo,"メイリオ","ＭＳＰゴシック",Helvetica,Sans-Serif;} #container{word-wrap:break-word;height: 100%;position: relative;z-index:0;} p{font-size:100%;color:#555;} .articleBox01,.articleBox02{margin:0px auto 40px;} .articleBox01 p,.articleBox02 p{margin-bottom:20px;} a{color:#a99a48;text-decoration:underline;} a:hover{text-decoration:underline;opacity:0.65;filter:alpha(opacity=65);-ms-filter:"alpha( opacity=65 )";} a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha( opacity=80 )";} ::selection {color: #333333;background-color:#eadea9;}/*選択文字背景*/ /*----- 画像のドラッグで保存対策：右クリック対策はjsファイルにて -----*/ img { -webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none; -o-user-drag: none; user-drag: none; } /* すべての要素で選択を無効にする */ * { user-select: none; -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ } /* デスクトップ・スマホ・タブレットのデバイスごとに適用：JSで設定。に.devicePC or .deviceSP-TB がデバイスごとに入る */ .devicePC .PC{display: block; }/* デスクトップは表示のみ */ .deviceSP-TB .PC{display: none; } /* スマホ・タブレットのみ */ .devicePC .SP {display: none; }/* デスクトップは表示のみ */ .deviceSP-TB .SP {display: block; } /* スマホ・タブレットのみ */ @media (min-width:1200px){ .pc1200{display: block; }/* デスクトップは表示のみ */ .SP1200{display: none; } /* スマホ・タブレットのみ */ } @media (max-width:1000px){ h1,h2,h3{font-size: 0.9em;} } .pc{display:block;}/*w960以下で反転 -----*/ .smart,.sp{display:none;}/*w960以下で反転 -----*/ .pc600{display:block;}/*w600以下で反転 -----*/ .sp600{display:none;}/*w600以下で反転 -----*/ @media only screen and (max-width:960px){ .pc{display:none;}/*w960以下で反転 -----*/ .smart,.sp{display:block;}/*w960以下で反転 -----*/ } /* clear, clearfix */ .clear{clear:both;} .clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;} * html .clearfix{zoom:1;}/* IE6 */ *:first-child + html .clearfix{zoom:1;}/* IE7 */ .clearfix + *{clear:both;}/* DW */ /*---------------------------------------------------------- 基本構造 ----------------------------------------------------------*/ html,body{ width:100%; /*height:100%;*/ margin:0; padding:0; display: flex; flex-direction: column; font-size: 16px; } /*body{ margin: 0 auto; width: 100%; background: rgb(255 255 255 / 100%); min-height: 100vh; display: flex; flex-direction: column; font-size: 1em; overflow-x: hidden; }*/ #PA-3stars #h1Wrapper{ margin: 0 auto; text-align: center; padding: 8px 2% 6px; width: calc(100% - 4%); max-width: 100%; z-index: 0; border-top: 1px solid #b2ae98; } #PA-3stars footer{ font-size: 16px; } #PA-3stars h1.entry-title { font-size: 20px; line-height: 30px; color: #bdad5f; margin: 0 auto; border-bottom: 2px solid #bdad5f; padding: 5px 15px; width: calc(100% - 30px); } footer p{ color:#bcae5e; } #footer-in #footer-menu ul{padding:5px 0;text-align:center;background:none;margin: 0 auto 5px;font-size:14px;} #footer-in ul li{display:inline-block;margin:0 8px;} #footer-in ul li a{text-decoration:none;color:#b2ae98;} #footer-in ul li a:hover{text-decoration:underline;} @media (max-width:1200px){ h1,h2,h3{font-size: 0.95em;} } @media (max-width:1000px){ h1,h2,h3{font-size: 0.9em;} } @media (max-width:768px){ h1,h2,h3{font-size: 0.8em;} } @media (max-width:600px){ h1{font-size: 18px;} } #wrapper { flex: 1; width: 100%; max-width: 100%; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: scroll; margin: 0 auto; position: relative; display: flex; flex-direction: column; background-size: cover !important; background-position: top center !important; z-index: 0; } #Shelf-3stars nav#gNavi { width: 100%; border-top: 1px solid #cab558; border-bottom: 1px solid #cab558; /*background: #cab558;*/ } #PA-3stars .breadcrumb{ position: absolute; top: 0; margin: 3px auto; color: #BDAD60; overflow: hidden; width: 100%; } #PA-3stars .breadcrumb a{ color: #82762e; } #PA-3stars .breadcrumb ul{ overflow-x: auto; white-space: nowrap; } .background-set { background-image: var(--dynamic-bg) !important; } /* オーバーレイ：斜線 BK・WT */ .pattern1 { background: repeating-linear-gradient(-45deg,rgb(0 0 0 / 0.2) 0,rgb(0 0 0 / 0.2) 10px, transparent 10px, transparent 20px), var(--dynamic-bg) !important; background-blend-mode: overlay !important; } .pattern2 { background: repeating-linear-gradient(-45deg, rgb(255 255 255 / 0.2) 0, rgb(255 255 255 / 0.2) 10px, transparent 10px, transparent 20px), var(--dynamic-bg) !important; background-blend-mode: overlay !important; } /* オーバーレイ：ドット・タイル */ .pattern3::before, .pattern4::before, .pattern5::before, .pattern6::before { content: ""; position:absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } /* オーバーレイ：ドットBK（ハーフトーン） */ .pattern3::before { background-image: radial-gradient(rgb(0 0 0 / 0.3) 20%, transparent 60%), radial-gradient(rgb(0 0 0 / 0.4) 20%, transparent 60%); background-size: 10px 10px; background-position: 0 0, 15px 15px; } /* オーバーレイ：ドットWT（ハーフトーン） */ .pattern4::before { background-image: radial-gradient(rgb(255 255 255 / 0.3) 20%, transparent 60%), radial-gradient(rgb(255 255 255 / 0.4) 20%, transparent 60%); background-size: 10px 10px; background-position: 0 0, 15px 15px; position:absolute; } /* オーバーレイ：タイルBK */ .pattern5::before{ background-image: repeating-linear-gradient(45deg,rgba(0 0 0 / 0.3) 0px,transparent 11px), repeating-linear-gradient(135deg,rgba(0 0 0 / 0.3) 0px,transparent 11px); background-size: 15px 15px; } /* オーバーレイ：タイルWT */ .pattern6::before{ background-image: repeating-linear-gradient(45deg,rgb(255 255 255 / 0.3) 0px,transparent 11px), repeating-linear-gradient(135deg,rgb(255 255 255 / 0.3) 0px,transparent 11px); background-size: 15px 15px; } #PA-3stars #gNavi, #Shelf-3stars #gNavi{ display: none; } /* パンクズの「>」はspanでくくってる */ nav.breadcrumb span{ margin: 0 12px 0 12px; } nav.breadcrumb p{ display: inline-block; } /* バーガーメニュー --------------------------*/ .acordion_tree{ border:2px solid #635820; box-shadow: 0px 0px 10px rgb(0 0 0 / 70%); } .menu-gnavi-container { margin: 0 auto; width: max-content; min-width: 250px; max-width: 100%; } .menu-gnavi-container #menu-gnavi > li{ overflow: hidden; white-space: nowrap; } /* バーガーメニューでは削除 */ .menu-gnavi-container #menu-gnavi span{ display: none; } #PA-3stars #menu-gnavi > li > a { padding: 8px 15px 8px 0; } #PA-3stars .acordion_tree li p, #Shelf-3stars .acordion_tree li p{ font-size: 16px; position: relative; text-align: left; text-indent: 28px; line-height: 32px; padding: 8px 15px 8px 0; color: #bcae5e; } /*---------------------------------------------------------- テーマカラー設定 ----------------------------------------------------------*/ /*----- ▼▼▼▼▼ .BK：ブラック ▼▼▼▼▼ ----------------------------------------------------------*/ body.BK{ background: rgb(0 0 0 / 100%); } .BK header{ background: rgb(0 0 0 / 66%)!important; } #PA-3stars.BK #h1Wrapper .entry-title{ color: #bdad5f !important; } #PA-3stars.BK #h1Wrapper{ background: rgb(0 0 0 / 66%)!important; } #PA-3stars.BK #h1Wrapper .entry-title{ color: #bdad5f !important; } .BK #wrapper{ background: linear-gradient(7deg, rgba(66,66,66,.8) 0%,rgb(0 0 0/.8) 33%,rgba(66,66,66,.8) 100%);/*BK Gradient*/ } #PA-3stars.BK .breadcrumb a{ color: #e0d593; } .breadcrumb p{ color: #9f996f; } .BK footer{ background:#2c2c2c!important; } .BK #footer-in ul li a{color:#b2ae98;} .BK .searchBtn svg.search {background: #000000;} /*.BK .loading-overlay ,.BK .overlay{ BKのクラスがbodyにつくのが遅いので、ここでの設定は今は無理。デフォルトを白で設定。 background-color: #181400; background-image: linear-gradient(7deg, #222222 0%, #111111 22%,#000000 33%, #000000 77%, #333321 100%); }*/ /* Shlefページ */ #Shelf-3stars.BK{ background: #333333; } #Shelf-3stars.BK header, #Shelf-3stars.BK footer{ background:transparent!important; } #Shelf-3stars.BK nav#gNavi a{ color: #ffffff } #Shelf-3stars.BK #wrapper{ background: linear-gradient(7deg, #555555 0%,#444444 33%,#555555 100%)!important;/*BK Gradient*/ } #Shelf-3stars.BK #wrapper h1.entry-title{ color: #bdad5f !important; text-shadow:1px 1px 2px rgba(171 165 129 / .7); } /*----- ▼▼▼▼▼ .WT：ホワイト ▼▼▼▼▼ ----------------------------------------------------------*/ .WT nav#gNavi{ background: #000000; } #PA-3stars.WT #h1Wrapper{ background: rgb(255 255 255 / 77%); } .WT #wrapper{ /* background-image: linear-gradient(7deg, rgba(66,66,66,0.8) 0%, rgb(0 0 0/0.8) 33%, rgba(66,66,66,0.8) 100%), url('../3stars/img/3STARS_Wall_w3333.avif'); background-blend-mode: multiply; background-repeat:no-repeat; background-size: cover; background-position: center;*/ background:linear-gradient(90deg, rgba(255 255 255/1) 40%, rgba(218,218,218,1) 100%, rgba(255 255 255/0.1) 100%);/*白BGのグラデ*/ } .WT footer{ background:#ffffff!important; } /*.WT .loading-overlay ,.WT .overlay{ WTのクラスがbodyにつくのが遅いので、ここでの設定は今は無理。デフォルトを白で設定。 background-color: #ffffff; background-image: linear-gradient(7deg, #fffecc 0%, #feffec 22%,#ffffff 33%, #ffffff 77%, #feffec 100%); }*/ #PA-3stars.WT .breadcrumb a{ color: #82762e; } #Shelf-3stars.WT .entry-title{ color:#726e31; } /*----- ▲▲▲▲▲ カラーチェンジcss ▲▲▲▲▲ ----------------------------------------------------------*/ /*---------------------------------------------------------- インフォボックス ----------------------------------------------------------*/ #infoBox{ text-align: center; padding: 5px 15px; color: #ffffff; background: rgb(0 0 0/0.3); background: rgb(0 0 0 / 30%); box-shadow: 0 2px 10px rgb(0 0 0/0.3); width: calc(95% - 30px); margin: 20px auto 50px; border-radius: 10px; font-size: 14px; max-width: 600px; z-index: 0; } #infoBox ul.liBox02{ width: calc(100% - 35px); width: fit-content; max-width: 600px; margin: 5px auto; } #infoBox ul.liBox02 li { margin: 5px auto 5px 1em !important; } #infoBox svg{ position: relative; top: 7px; width:24px; height:24px; margin: 0px 7px 0 0; background: none; border: none; } #infoBox svg.icon.icon-fullscreen { width: 30px; height: 30px; margin: 0 3px 0 -2px; top: 9px; } /*-------------------------------------------------------------------------------*/ /*-----★★★ ▼▼▼▼▼　#DigitalPhotoAlbumWrapperのページデザインの設定 ▼▼▼▼▼　★★★-----*/ /*-------------------------------------------------------------------------------*/ /* #DigitalPhotoAlbumWrapper：ノーマルバージョン（デフォルト） ---------------------------------------------------------*/ #DigitalPhotoAlbumWrapper .album, #DigitalPhotoAlbumWrapper .Page1, #DigitalPhotoAlbumWrapper .Page2, #DigitalPhotoAlbumWrapper .Page3, #DigitalPhotoAlbumWrapper .PageLast, #DigitalPhotoAlbumWrapper .PageLast2, #DigitalPhotoAlbumWrapper .PageLast3{ background-color:white; background-position: center; background-size: cover; position: relative; } #DigitalPhotoAlbumWrapper .page.odd, #DigitalPhotoAlbumWrapper .page.even{ background-color:white; background-position: center; background-size: cover; position: relative; } #DigitalPhotoAlbumWrapper .Page1 .side{ width:5px; height:600px; position:absolute; top:0; left:475px; background: -webkit-linear-gradient(left, #bbb, #ddd, #bbb); /* Webkit（Chrome、Safari）向けのプレフィックス */ background: -moz-linear-gradient(left, #bbb, #ddd, #bbb); /* Moz（Firefox）向けのプレフィックス */ background: linear-gradient(left, #bbb, #ddd, #bbb); transform: rotateY(-90deg); transform-origin: top right; z-index:100000; } .noie #DigitalPhotoAlbumWrapper-transform div[page="1"] > div, .noie #DigitalPhotoAlbumWrapper-transform div[page="2"] > div{ overflow:visible !important; } #DigitalPhotoAlbumWrapper .depth{ background-image:url(../pics/pages-depth.png); position:absolute; top:7px; width:16px; height:590px; } #DigitalPhotoAlbumWrapper .front-side .depth{ left:4px; background-position:0 0; } #DigitalPhotoAlbumWrapper .back-side .depth{ right:4px; background-position:right 0; } #DigitalPhotoAlbumWrapper .page .pageInnerBox{ height: 100%; inset: 0; box-sizing: border-box; position: relative; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 16px; margin: 0 auto; color: #aeab9f; } #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox{ font-size: 14px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; text-align: left; position: absolute; top: 76%; left: 0; opacity: .5; width: 100%; } #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox .floatingButton{ font-size: 14px; padding: 2px 5px; font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; } #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox .linkList { position: relative; margin: 0 auto; background: #000; border-radius: 0px 10px 10px 10px; padding: 5px; opacity: .7; } #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox .linkList a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; } #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox .linkList a svg { width: 20px; height: 20px; margin: 0 10px -5px 3px; } #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox .linkList a svg.icon-mail { width: 16px; height: 16px; margin: 0 12px -2px 5px; } @media (max-width: 800px) { #DigitalPhotoAlbumWrapper .page .pageInnerBox .contactBox .linkList { position: absolute; border-radius: 10px 10px 10px 0px; bottom: 30px; } } /* #DigitalPhotoAlbumWrapper：3starsPAバージョン ★★★★★★★★★★★★ ---------------------------------------------------------*/ body#PA-3stars header{ background: rgb(255 255 255 / 77%); } body#PA-3stars header,body#PA-3stars footer{ background: rgb(255 255 255 / 77%); } body#PA-3stars #wrapper{ background-image:url(https://3stars.jp/dpa/3stars-folder/3stars/img/3STARS-Wall01_w2000.avif); /*background-image: linear-gradient(7deg, rgba(66,66,66,0.8) 0%, rgb(0 0 0/0.8) 33%, rgba(66,66,66,0.8) 100%), url('../3stars/img/3STARS_Wall_w3333.avif');*/ /*background-image: radial-gradient(circle, rgba(255,255,255,0.3) 0%, rgb(255 255 255/0.7) 33%, rgba(255 255 255/0.1) 100%), url('../3stars/img/3STARS_Wall_w3333.avif');*/ background-blend-mode: soft-light; background-repeat:no-repeat; background-size: cover; background-position: top center; z-index: -1; /*background-color: rgb(0 0 0/0.7); /* 半透明の黒色 */ /*background-color: rgb(0 0 0/0); /* 黒色 */ } /* デフォルトの表紙・裏表紙の画像を設定：管理画面で画像を設定すれば上書きされる */ body#PA-3stars #DigitalPhotoAlbumWrapper .page.odd.Page1 { background-image: url(https://3stars.jp/dpa/3stars-folder/3stars/img/AlbumCover-Square3Sv1-01_w1000.avif) !important; background-position: 0 0 !important; } body#PA-3stars #DigitalPhotoAlbumWrapper .page.even.Page2 { background-image: url(https://3stars.jp/dpa/3stars-folder/3stars/img/AlbumCover-Square2WT3S-01_w2000.avif) !important; background-position: 0 0 !important; } body#PA-3stars #DigitalPhotoAlbumWrapper .page.PageLast2 { background-image: url(https://3stars.jp/dpa/3stars-folder/3stars/img/AlbumCover-Square2WT3S-01_w2000.avif) !important; background-position: right 0 center !important; } body#PA-3stars #DigitalPhotoAlbumWrapper .page.PageLast { background-image: url(https://3stars.jp/dpa/3stars-folder/3stars/img/AlbumCover-SquareL1WT3S-01_w1000.avif) !important; background-position: right 0 center !important; } /* #DigitalPhotoAlbumWrapper：hardCoverバージョン ---------------------------------------------------------*/ body.hardCover #DigitalPhotoAlbumWrapper .page-wrapper .page .background-image { position: absolute !important; top: 0; left: 0; width: 100%; height: 100%; background-color: white; background-image: url(https://3stars.jp/dpa/3stars-folder/3stars/img/AlbumCover-Square3Sv1-01-w1000.avif) !important; background-position: center; background-size: cover; z-index: 0; /* 背景画像が最背面に表示されるようにz-indexを設定 */ } body.hardCover #DigitalPhotoAlbumWrapper .page-wrapper .page img { width: calc(100% - 17px); /* 左右のマージンを考慮 */ height: auto; top: 0; left: 0; position: relative; z-index: 1; filter: grayscale(100%); /* 黒バージョンの場合、グレースケール適用 */ } body.hardCover #DigitalPhotoAlbumWrapper .page-wrapper .page.odd { left: 0; margin: 8px 17px 10px 0; /* 表紙を表示させるためのマージン */ } body.hardCover #DigitalPhotoAlbumWrapper .page-wrapper .page.even { right: 0; margin: 8px 0 17px 10px; /* 表紙を表示させるためのマージン */ } /* hardCoverの黒バージョン */ body.hardCover.BK #DigitalPhotoAlbumWrapper .page-wrapper .page img { width: calc(100% - 17px); /* 左右のマージンを考慮 */ height: auto; top: 0; left: 0; filter: grayscale(100%); /* 黒バージョンの場合、グレースケール適用 */ } body.hardCover.BK #DigitalPhotoAlbumWrapper .page-wrapper .page.odd img { left: 0; margin: 8px 17px 10px 0; /* 表紙を表示させるためのマージン */ } body.hardCover.BK #DigitalPhotoAlbumWrapper .page-wrapper .page.even img { right: 0; margin: 8px 0 17px 10px; /* 表紙を表示させるためのマージン */ } /*-------------------------------------------------------------------------------*/ /*-----★★★ ▲▲▲▲▲　#DigitalPhotoAlbumWrapperのページデザインの設定 ▲▲▲▲▲　★★★-----*/ /*-------------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------*/ /*-----★★★ ▼▼▼▼▼　pageの設定 ▼▼▼▼▼　★★★-----*/ /*-------------------------------------------------------------------------------*/ /*----- 表紙と裏表紙のcss -----*/ .Page1,.PageLast { z-index: 2; /* 画像の上に表示されるようにする */ } /* フリップの効果を変更するスタイル */ .Page1.turn-page, .PageLast.turn-page { transition: transform 1.6s ease-in-out; /* エフェクトの速度とイージングを設定 */ /*transform-origin: left center, right center;*/ transform-style: preserve-3d; /* 3D効果を保持 */ } .Page1 { transform-origin: left center; /* 表表紙の回転中心を左に設定 */ } .PageLast { transform-origin: right center; /* 裏表紙の回転中心を右に設定 */ } .Page1, .PageLast { pointer-events: none; /* ホーバーやクリックイベントを無効にする */ } /* クリックエリアのスタイル */ .click-area { position: absolute; width: 20%; height: 100%; background: transparent; /* 透明 */ cursor: pointer; } /* 表表紙のクリックエリアの位置 */ .Page1 .click-area-left { left: 0; top: 0; bottom: 0; } /* 裏表紙のクリックエリアの位置 */ .PageLast .click-area-right { right: 0; top: 0; bottom: 0; } /*-------------------------------------------------------------------------------*/ /*-----★★★ ▲▲▲▲▲　pageの設定 ▲▲▲▲▲　★★★-----*/ /*-------------------------------------------------------------------------------*/ /*----------------------------- ページ送りボタン：Previous,Next Button ------------------------------*/ .next-button, .previous-button { width: 50px; height: 100%; /* albumWrapperの高さと一致させる */ position: absolute; top: 0; background-color: rgb(0 0 0/0.0); /* ボタンの背景色を設定 */ color: #fff; cursor: pointer; z-index: 0; transition: all 1s ease; } .next-button { right: -50px; border-radius: 0 15px 15px 0; background-position: -64px 50%; } .previous-button { left: -50px; border-radius: 15px 0 0 15px; background-position: 64px 50%; } /* svgアイコン << < > >> */ .next-button svg.icon.icon-arrowSingle-right, .previous-button svg.icon.icon-arrowSingle-left{ width: 40px; height: 40px; fill:white; position: relative; top: calc(50% - 20px); opacity: 0; transition: all 1.2s ease; /* トランジションを設定 */ } .next-button svg.icon.icon-arrowSingle-right{ left: -30px; } .previous-button svg.icon.icon-arrowSingle-left{ right: -30px; } .previous-button-hover,.next-button-hover{ background-color:rgb(0 0 0/ 0.3); } .next-button-hover{ background-image: linear-gradient(-90deg, rgb(0 0 0 / 0), rgb(0 0 0 / .2)); } .previous-button-hover{ background-image: linear-gradient(90deg, rgb(0 0 0 / 0), rgb(0 0 0 / .2)); } .previous-button-down,.next-button-down{ background-color:rgb(0 0 0/ 0.5); } /* hover時にSVGアイコンを表示＆左からスライドイン */ .next-button-hover svg.icon.icon-arrowSingle-right, .next-button-down svg.icon.icon-arrowSingle-right { left: -5px; /* 目的の位置に移動 */ opacity: 1; /* 表示する */ } /* hover時にSVGアイコンを表示＆右からスライドイン */ .previous-button-hover svg.icon.icon-arrowSingle-left, .previous-button-down svg.icon.icon-arrowSingle-left { right: -5px; /* 目的の位置に移動 */ opacity: 1; /* 表示する */ } /*----------------------------- スライダー ------------------------------*/ /* スマホ・タブレットでは、タップで移動はできても、スライドでは移動できないので、スマホ・タブレットではオフに設定タグに*/ /* モバイルデバイスにのみ適用 * .devicePC #sliderBox {display: block; }/* デスクトップデバイスにのみ適用 * .deviceSP-TB #sliderBox {display: none; } /* スマホ・タブレットにのみ適用 */ #sliderBox { width: 600px; height: 8px; background: none; border-radius: 5px; margin: 50px auto -30px; } #sliderBox .ui-slider-horizontal { height: 8px; border-radius: 10px; } .ui-slider { background-color: #ccc; /* 背景色を変更 */ } #slider { position: relative; } .ui-slider-handle { display: block; background-color: #000; width: 20px; /* ハンドルの幅 */ height: 20px; /* ハンドルの高さ */ border-radius: 50%; cursor: pointer; position: absolute; z-index: 1; /* 他の要素の上に表示 */ } #sliderBox .ui-slider-handle { border: 1px solid #ddd2a1; background-color: #828072; opacity: 1 !important; display: block; transition: opacity 0.2s; height: 10px; top: -1px; } .ui-slider-handle:focus { /*outline: none; /* フォーカス時のアウトラインを削除 */ outline: 2px solid #b69f2d; box-shadow: 0 2px 10px rgb(0 0 0/0.3); } /*----------------------------- コントロールバー ------------------------------*/ #controlBox { display: flex; align-items: center; justify-content: space-between; /* 左右に分ける */ margin:50px auto 10px; background: rgb(188 174 94 / 77%); padding: 7px 0; color: #493d00; height: 28px; position: relative; } #controlBox svg{ width:36px; height:36px; fill:white; } #soundControlBox{ display: flex; align-items: center; position: absolute; left: 20px; } #soundOnOff { background: none; border: none; cursor: pointer; margin: 3px 15px 0 0px; } #soundOnOff svg{ width:24px; height:24px; } #controlBox svg.icon-sound-off {display: none; fill:#ccc; /* 音がオフのときの色 */ } #soundControlBox input[type="range"] { width :80px; margin: 0 0 0 10px } #volumeSlider { width: 100px; /* スライダーの幅を設定 */ height: 10px; /* スライダーの高さを設定 */ /*-webkit-appearance: none; /* ブラウザのデフォルトスタイルを無効化 * appearance: none;*/ } /* スライダーのトラック部分の色を変更 * #volumeSlider::-webkit-slider-runnable-track{background:#ccab00;} #volumeSlider::-moz-range-track{background:#ccab00;} #volumeSlider::-ms-track{background: #ccab00;} /* スライダーのハンドル部分の色を変更 * #volumeSlider::-webkit-slider-thumb{background: #493d00;/* -webkit-appearance: none; ブラウザのデフォルトスタイルを無効化 *} #volumeSlider::-moz-range-thumb{background: #493d00;} #volumeSlider::-ms-thumb{background: #493d00;}*/ #controlMainBox{ display: flex; align-items: center; justify-content: space-between; /* 左右に分ける */ margin: 10px auto; padding: 7px 0; height: 28px; width:300px; } #page-number { width: 55px; text-align: center; margin: 0 5px; border: none; font-size: 1.3em; background: none; color: #493d00; font-weight: bold; } #number-pages { width: 33px; margin: 0 5px; font-size: 16px; } #controlBox .first-button2, #controlBox .last-button2, #controlBox .previous-button2, #controlBox .next-button2 { display: flex; justify-content: center; align-items: center; width: 50px; height: 28px; color: #493d00; cursor: pointer; } #controlBox .first-button2, #controlBox .last-button2 { font-size: 1.4em; margin: -1px auto auto; } #controlBox .previous-button2, #controlBox .next-button2 { font-size: 1.4em; } #rightControlBox { display: flex; position: absolute; right: 10px; } #rightControlBox svg{ width:36px; height:36px; margin: 0 0px auto 0; } #rightControlBox button#fullscreenButton { background: none; border: none; cursor: pointer; } #rightControlBox svg.icon-ThreeStars-1{ width:36px; height:36px; margin: -1px 0px auto 0; } /*-------------------------------------------------------------------------------*/ /*-----★★★ ▼▼▼▼▼　シャドウ・影の設定 ▼▼▼▼▼　★★★-----*/ /*-------------------------------------------------------------------------------*/ /*-------------------- 表紙と裏表紙のcss：hardCover --------------------*/ #album.hardCover .Page1.odd .gradient{/*最初のページ：表紙の影*/ background: linear-gradient(to bottom, rgb(0 0 0/0.1) 0%, rgb(0 0 0/0) 2%, rgb(0 0 0/0) 98%, rgb(0 0 0/0.1) 100%), /* 上下の影 */ linear-gradient(to left, rgb(0 0 0/0.2) 0%,rgb(0 0 0/0) 3%,rgb(0 0 0/0) 96%,rgb(0 0 0/ .3) 98%,rgb(222 222 222 / 0.3) 99%,rgb(0 0 0/0.3) 100%); } #album.hardCover .PageLast.even .gradient{/*最後のページ：裏表紙の影*/ background: linear-gradient(to bottom, rgb(0 0 0/0.1) 0%, rgb(0 0 0/0) 2%, rgb(0 0 0/0) 98%, rgb(0 0 0/0.1) 100%), /* 上下の影 */ linear-gradient(to right, rgb(0 0 0/0.2) 0%,rgb(0 0 0/0) 3%,rgb(0 0 0/0) 96%,rgb(0 0 0/ .3) 98%,rgb(222 222 222 / 0.3) 99%,rgb(0 0 0/0.3) 100%); } /*-------------------- 表紙と裏表紙のcss：normalバージョン(softCover) --------------------*/ #album .Page1.odd .gradient{/*最初のページ：表紙の影*/ background: linear-gradient(to left, rgb(0 0 0/0.1) 0%,rgb(0 0 0/.0) 33%,rgb(0 0 0/0) 85%,rgb(0 0 0 / 0.2) 98%,rgb(0 0 0/.3) 100%); } #album .PageLast.even .gradient{/*最後のページ：裏表紙の影*/ background: linear-gradient(to right, rgb(0 0 0/0.1) 0%,rgb(0 0 0/.0) 33%,rgb(0 0 0/0) 85%,rgb(0 0 0 / 0.2) 98%,rgb(0 0 0/.3) 100%); } /*----- .gradient：ページの内側の影 -------------------------------------------------------*/ /*----- Noarmal：ノーマル -----*/ .even.odd{ /*box-shadow: 10px 20px 10px rgba(255, 0, 0, 1.0);テストよう赤*/ transition: box-shadow 1.6s ease; } #album .even .gradient,#album .odd .gradient{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; /* これを追加してクリック操作を無効化 */ } #album .even .gradient{/* 偶数ページの影：見開き左ページ */ position:absolute; top:0; left:0; width:100%; height:100%; /*background: linear-gradient(to right, rgb(0 0 0/0) 95%, rgb(0 0 0/0.2) 100%);ベース*/ background:linear-gradient(to right, rgb(0 0 0/.1) 0%,rgb(0 0 0/0) 15%, rgb(0 0 0/0) 88%, rgba(150 150 150/0.15) 95%, rgb(0 0 0/0.1) 100%); } #album .Page2.even .gradient,/* 表紙の裏の影を削除 */ #album .PageLast2.odd .gradient{/* 裏表紙の裏の影を削除 */ background:none; } #album .odd .gradient{/* 奇数ページの影：見開き右ページ */ position:absolute; top:0; left:0; width:100%; height:100%; /*background: linear-gradient(to left, rgb(0 0 0/0) 95%, rgb(0 0 0/0.15) 100%);ベース*/ background:linear-gradient(to left, rgb(0 0 0/.1) 0%,rgb(0 0 0/0) 15%, rgb(0 0 0/0) 88%, rgb(150 150 150/ .15) 95%, rgb(0 0 0/0.15) 100%); } /*----- .gradient：ページの内側の影 -------------------------------------------------------*/ /* CSS: 影のスタイル */ .shadow { transition: /*width 0.5s ease, 横にスライドさせたいけど、1から2の時おかしくなるので今はやめ。* opacity 1.5s ease,*/ 　box-shadow 0.5s ease; box-shadow:0 0 20px #777777; /* width: 1000px; 初期幅を設定 */ } .animated { transition: all 1.0s ease !important; } /*-------------------------------------------------------------------------------*/ /*-----★★★ ▲▲▲▲▲　シャドウ・影の設定 ▲▲▲▲▲　★★★-----*/ /*-------------------------------------------------------------------------------*/ /*---------------------------------------------------------- その他の機能：ローディングアニメーション・ポップアップメッセージ ----------------------------------------------------------*/ .loading-overlay ,.overlay{ position: fixed; /* fixedを使用 */ top: 0; left: 0; width: 100%; height: 100%; display: flex; /* 初期状態を非表示に設定 */ justify-content: center; align-items: center; z-index: 1050; /* モーダルよりも前面に表示 */ transition: opacity 0.3s ease; /* フェードアニメーション */ /*background: transparent; テスト用*/ } /* Defaultは白で設定中 */ /*.loading-overlay ,.overlay{/*BKメイン* background-color: #181400; background-image: linear-gradient(7deg, #222222 0%, #111111 22%,#000000 33%, #000000 77%, #333321 100%); /*background: radial-gradient(circle, rgb(0 0 0/1) 0%, rgba(57,56,39,1) 77%, rgba(53,52,41,1) 100%);* }*/ .loading-overlay ,.overlay{/*WTがメイン*/ background-color: #ffffff; /* background-image: linear-gradient(7deg, #fffecc 0%, #feffec 22%,#ffffff 33%, #ffffff 77%, #feffec 100%); */ } .loading-spinner { width: 100px; height: 100px; animation: spinY 1.5s linear infinite, fadeInSpinner 0.5s ease-in-out forwards; margin: auto; /* スピナーを中央に配置 */ top: calc(50% - 50px); /* 上から50% */ left: calc(50% - 50px); /* 左から50% */ position: fixed; /* 画面全体を覆うように設定 */ /* svgアイコンで表示すると、svgスプライトの読み込みで結構な時間差ででてくるので、avifファイルで出すように変更 background: url("https://3stars.jp/common/SVG-font/ThreeStars-1.svg#icon") no-repeat center center; background-size: contain; filter: invert(74%) sepia(70%) saturate(414%) hue-rotate(1deg) brightness(100%) contrast(100%);/* ゴールドの色調を調整 */ /*border: 8px solid #f3f3f3;ぐるぐる回るjQueryのloadingアイコン border-top: 8px solid #3498db; border-radius: 50%;*/ } /*.loading-spinner svg{ background: rgb(217,205,73); background: radial-gradient(circle, rgba(217,205,73,1) 0%, rgba(232,236,107,1) 33%, rgba(241,230,131,1) 100%); }*/ @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes spinX { 0% { transform: rotateX(0deg); } 100% { transform: rotateX(360deg); } } @keyframes spinY { 0% { transform: rotateY(0deg); } 100% { transform: rotateY(360deg); } } @keyframes spin3D { 0% { transform: rotate3d(1, 1, 1, 0deg) rotateZ(333deg);} /* 初期状態でZ軸を10度傾ける */ 100% {transform: rotate3d(1, 1, 1, 360deg) rotateZ(333deg);} /* 回転後もZ軸を10度傾けたまま */ } /* フェードインアニメーション */ @keyframes fadeInSpinner { 0% {opacity: 0;} /* 初期状態は透明 */ 100% {opacity: 1;} /* 最終状態は不透明 */ } /* 最初と最後のポップアップメッセージ */ #popup-message { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: rgb(0 0 0/0.7); /*background-color: #000;*/ color: #fff; padding: 20px; border-radius: 10px; text-align: center; z-index: 1000; opacity: 0; /* 初期状態で透明にする */ /*transition: opacity 0.3s ease-in-out; /* フェードイン・フェードアウト効果 */ } .overlay { pointer-events: none; /* 初期状態でクリック不可 */ } /*.overlay.show { pointer-events: auto; /* 表示状態でクリック可 *　オーバーレイはLoadingアニメーションのためなので、showされてる時はクリック必要ないのでコメントアウト。念の為おいてる。 }*/ /*-------------------------------------------------------------------------------------------------------------------- #DigitalPhotoAlbumWrapperの設定 --------------------------------------------------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------*/ /*-----★★★ ▼▼▼▼▼　#DigitalPhotoAlbumWrapperの基本構造の設定 ▼▼▼▼▼　★★★-----*/ /*--------------------------------------------------------------------------*/ #centerBox{/* #DigitalPhotoAlbumWrapper をくくってるだけ。でも必要！*/ margin: 0px auto 10px!important; max-width: 100%; height: fit-content; display: flex; justify-content: center; align-items: center; width: 100%; } /*----- width, heightは、メディアクエリで全サイズ設定：基本のベースサイズは設定なし -----*/ #DigitalPhotoAlbumWrapper{ padding: 55px 0px 10px; text-align: center; transform: scale(1); /*margin: 0 50px;*/ margin: 0 auto; display: none; position: relative; } #albumWrapper{ position: relative; margin: 0 auto; } #album{ margin: 0 auto; position: relative; } .page-wrapper { position: absolute; overflow: hidden; } .page { position: relative; padding: 0 !important; /*common.cssのp5が競合するので追加 */ overflow: hidden; /* overflowを隠すことで背景画像がはみ出さないようにする */ } /* .page img：ノーマルバージョン（デフォルト） */ .page img { position: relative; /* 画像の位置指定をrelativeに変更 */ width: 100%; /* ノーマルバージョンでは幅を100%に設定 */ height: auto; top: 0; left: 0; } .page.odd img { left: 0; margin: 0; } .page.even img { right: 0; margin: 0; } /*---------------------------------------------------------- PA レスポンシブ設定 ----------------------------------------------------------*/ /* DigitalPhotoAlbum内のレスポンシブのCSS */ @media (min-width: 1601px){ #DigitalPhotoAlbumWrapper { width: 1500px; } #albumWrapper { width: 1500px; } .previous-button, .next-button { height: 750px; } } @media (min-width: 1401px) and (max-width: 1600px) { #DigitalPhotoAlbumWrapper { width: 1200px; } #albumWrapper { width: 1200px; } .previous-button, .next-button { height: 600px; } } @media (min-width: 1201px) and (max-width: 1400px) { #DigitalPhotoAlbumWrapper { width: 1000px; } #albumWrapper { width: 1000px; } .previous-button, .next-button { height: 500px; } } @media (min-width: 1001px) and (max-width: 1200px) { #DigitalPhotoAlbumWrapper { width: 900px; } #albumWrapper { width: 900px!important; } .previous-button, .next-button { height: 450px; } } @media (max-width: 1000px) { #DigitalPhotoAlbumWrapper { width: 800px; } #albumWrapper { width: 800px; /*height: 400px;*/ } .previous-button, .next-button { height: 400px; } } @media (max-width: 900px) { #DigitalPhotoAlbumWrapper { width: 700px; } #albumWrapper { width: 700px; } .previous-button, .next-button { height: 350px; } #soundControlBox input[type="range"]{width: 50px;margin: 0} #controlMainBox { margin: 10px auto; padding: 7px 0; height: 28px; width: 230px; } #controlBox .first-button2, #controlBox .last-button2, #controlBox .previous-button2, #controlBox .next-button2 { width: 30px; } } @media (max-width: 800px) { #DigitalPhotoAlbumWrapper { width: 600px; } #albumWrapper { width: 600px; } .previous-button, .next-button { height: 300px; } } @media (max-width: 700px) { #DigitalPhotoAlbumWrapper { width: 500px; } #albumWrapper { width: 500px; } .previous-button, .next-button { height: 250px; } #sliderBox{ width: 100%; margin: 50px auto 20px -25px; } #sliderBox .ui-slider-horizontal { width: 100%; } #sliderBox span{ width: 50px; } .fullscreen #sliderBox { width: calc(100% - 60px); } #controlBox { width: calc(100% + 100px); margin: 10px auto 10px -50px; } .fullscreen #controlBox { margin: 10px auto 10px; } } @media (max-width: 600px) { #DigitalPhotoAlbumWrapper { width: 400px; } #albumWrapper { width: 400px; } .previous-button, .next-button { height: 200px; } } @media (max-width: 500px) { #DigitalPhotoAlbumWrapper { width: 280px; margin: 0 30px; } #albumWrapper { width: 280px; } .page { width: 140px; height: 140px; } .previous-button, .next-button { height: 140px; } #volumeSlider{display: none;} } @media (max-width: 400px) { #controlBox { width: calc(100% + 60px); margin: 10px auto 10px -30px; } #volumeSlider{display: none;} } /*---------------------------------------------------------- フルスクリーン・全画面表示設定：DigitalPhotoAlbumWrapperのみ：20241208時点、パソコンのみ。iPad・Safariはパソコンとしてなので有効 ----------------------------------------------------------*/ /* 全画面表示用のスタイル */ .fullscreen { display: flex!important; justify-content: center; align-items: center; height: 100% !important; width: 100vw !important; margin: 0; padding: 0; overflow: hidden; flex-wrap: wrap; } .fullscreen #DigitalPhotoAlbumWrapper{ padding: 0; margin: 0 auto; } /* 全画面表示時のボタンのスタイル */ .fullscreen .previous-button, .fullscreen .next-button { /* background-color: rgba(100, 100, 100, 0.8); transition: all 1s ease; */ background-color: rgba(55, 55, 55, 0.5); transition: all .7s ease; opacity: .5; } .fullscreen .previous-button{ background-image: linear-gradient(-90deg, rgb(255 255 255 /0), rgb(170 170 170/.2)); background-position: 10px 50%; } .fullscreen .next-button { background-image: linear-gradient(90deg, rgb(255 255 255 /0), rgb(170 170 170/.2)); background-position: -10px 50%; } .fullscreen .previous-button:hover, .fullscreen .next-button:hover { background-color: rgba(100, 100, 100, 0.6); opacity: .8; } .fullscreen .previous-button:hover svg, .fullscreen .next-button:hover svg{ opacity: 1!important; } .fullscreen .previous-button svg.icon.icon-arrowSingle-left { left: 5px; opacity: .8; } .fullscreen .next-button svg.icon.icon-arrowSingle-right { left: -5px; opacity: .8; } .fullscreen #sliderBox { position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%); } .fullscreen #controlBox { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: space-between; margin-top: 10px; background: rgba(188, 174, 94, 0.77); padding: 7px 0; color: #493d00; height: 28px; width: 100%; } /*--------------------------------------------------------------------------*/ /*-----★★★ ▲▲▲▲▲　#DigitalPhotoAlbumWrapperの基本構造の設定 ▲▲▲▲▲　★★★-----*/ /*--------------------------------------------------------------------------*/ /*-------------------------------------------------------------------------------------------------------------------- #Shelf-3stars の設定 --------------------------------------------------------------------------------------------------------------------*/ #Shelf-3stars #wrapper{ overflow: visible; background: #f5f5f5; position: relative; } #Shelf-3stars #wrapper::after{ content:''; display: block; height: 100px; width: 100%; margin: 30px auto 0; background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5)), url(https://3stars.jp/dpa/3stars-folder/assets/img/PainWoodPlate01_w500.avif); /* 「linear-gradientは始点と終点の2色が必要」「同じ値を2回指定すると均一な半透明になる」「linear-gradientでは1つのrgbaだけでは効果が成立しない」 */ background-blend-mode: overlay; background-size: contain; background-repeat: repeat; background-position: top left; box-shadow: 0px -3px 3px rgb(170 169 157 / .5); } .album { opacity: 0; transition: opacity 0.5s ease-in-out; } /*------------------------------------------------------------*/ /*--------------- H1 ---------------*/ #Shelf-3stars #wrapper .contentsHeader{ margin: 0px auto 30px; padding:25px 5% 25px; width: calc(100% - 10%); background: linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.5)), url(https://3stars.jp/dpa/3stars-folder/assets/img/PainWoodPlate01_w500.avif); /* 「linear-gradientは始点と終点の2色が必要」「同じ値を2回指定すると均一な半透明になる」「linear-gradientでは1つのrgbaだけでは効果が成立しない」 */ background-blend-mode: overlay; background-size: contain; background-repeat: repeat; background-position: top left; box-shadow: 0px 3px 3px 3px rgb(170 169 157 / .7); } #Shelf-3stars #wrapper h1{ text-align: center; position: relative; padding: 7px 20px; margin: 0 auto; width: fit-content; color:#918b68; text-shadow:1px 1px 2px rgba(171 165 129 / .7); background: #ffffff; /* ゴールド調 * border: ridge 4px #bcae5e; border: ridge 4px #faed7c; box-shadow: 0px 0px 0 4px #e0ddc9 inset, 0px 0px 0 3px #cbc89c, 0px 3px 3px 3px rgb(170 169 157 / .7);*/ /* ホワイト調 * border: ridge 4px #eeeeee; box-shadow: 0px 0px 0 4px #e7e7e7 inset, 0px 0px 0 3px #e5e5e5, 0px 3px 3px 3px rgb(170 169 157 / .7);*/ /* ホワイト+木枠風 */ border: ridge 4px #fff6c1; box-shadow: 0px 0px 0 4px #e7e7e7 inset, 0px 0px 0 3px #e5e5e5, 0px 3px 3px 3px rgb(170 169 157 / .7); } /*#Shelf-3stars #wrapper h1:before, #Shelf-3stars #wrapper h1:after{ content: ''; position: absolute; width:10px; height: 10px; border: solid 2px black; border-radius: 50%; background-color: black; } #Shelf-3stars #wrapper h1:before{ top:-12px; left:-12px; } #Shelf-3stars #wrapper h1:after{ top:-12px; left:-12px; }*/ /*--------------- /H1 ---------------*/ /*------------------------------------------------------------*/ #Shelf-3stars #wrapper .breadcrumb{ margin: 20px auto 10px; } #albumShelf{ display: flex; flex-wrap: wrap; gap: 10px; padding: 20px; margin: 0 auto ; max-width: 1200px; /* 親要素の最大幅を設定 */ /*background-color: #f5f5f7;*/ } #albumShelf .shelfRow{ display: flex; flex-wrap: wrap; justify-content: space-between; width: calc(100% - 80px); margin: 40px auto 0px; padding: 0 40px; position: relative; /*max-width: 1200px; /* 親要素の最大幅を設定 */ /*background-color: #f5f5f5;*/ } /* 4列のデフォルトスタイル */ .shelfRow.column4 .album { width: calc(75% / 4); } /* 3列のスタイル */ .shelfRow.column3 .album { width: calc(77% / 3); } .album { height:auto; /*background-color: #7f7f7f;*/ display: flex; justify-content: center; align-items: center; color: white; font-size: 18px; cursor: pointer; z-index: 111; position: relative; margin: 0 auto; transition:transform 0.8s, opacity 0.5s ease-in-out; opacity: 0; } .album:hover { transform: scale(1.1); transition: transform 0.2s ease; /* 拡大のトランジション */ } .album a:hover,a:hover img { opacity: 1; } .album-thumbnail { width: 100%; height: auto; display: block; position: relative; border-radius:3px; z-index: 1; box-shadow: 0 10px 10px rgba(0, 0, 0, .5); transition: transform 1.0s ease, opacity .7s ease;/* クリック時のアニメーションもここで指定 */ } .album-thumbnail.zoom-out { transform: scale(5); opacity: 0; z-index: 100; /* 他の要素よりも上に */ } .album a:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; /* 親要素にフィットさせる */ height: 100%; border-radius:3px; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0) 2%, rgba(0, 0, 0, 0) 98%, rgba(0, 0, 0, 0.1) 100%), linear-gradient(to left, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 3%, rgba(0, 0, 0, 0) 96%, rgba(0, 0, 0, 0.3) 98%, rgba(222, 222, 222, 0.3) 99%, rgba(0, 0, 0, 0.3) 100%); pointer-events: none; /* グラデーションがクリックを邪魔しないように */ z-index: 1; /* 画像の上に重なるように * transform: inherit; /* 親要素のtransformを継承させる */ transition: transform 1.0s ease, opacity .7s ease;/* クリック時のアニメーションもここで指定 */ transform: scale(1); /* 初期状態では影の拡大なし */ } .album a.zoom-out::after { transform: scale(5); opacity: 0; z-index: 100; /* 他の要素よりも上に */ } .album.itemImg-w70 img { width: 70%; } /*.album:first-child,.album:nth-of-type(4n+1) { margin: 0 auto 0 60px } .album:nth-of-type(4n) { margin: 0 60px 0 auto }*/ .shelf { width: calc(100% + 80px);/*100%;*/ height: 150px; background-size: contain; background-repeat: no-repeat; background-position: bottom left; margin:-33px -40px 20px; display: block; } /*----- アルバムサムネをクリックした時のアニメーション -----*/ /* ベースはloading-overlayと同じにしてフェードさせる */ .overlay,.overlay:not(.show) {/*ブラウザの戻るボタンでも取った時、showが残った状態になるので、その対策で念の為、.overlay:not(.show)も追加*/ opacity: 0; /* 初期状態では透明 */ z-index: -100; /* 他の要素よりも下からスタート */ transition: opacity .7s ease; /* z-index はアニメーションできないので除外 */ } /* showクラスを追加した時にオーバーレイが表示される */ .overlay.show { opacity: 1; /* オーバーレイが表示される */ z-index: 1000; /* 他の要素よりも上に */ } .noHover{ pointer-events:none; } .noHover .album-thumbnail{ box-shadow:none; } /*--------------------------------------------------------------------------*/ /*-----★★★ ▼▼▼▼▼　#DigitalPhotoAlbumWrapperの基本構造の設定 ▼▼▼▼▼　★★★-----*/ /*--------------------------------------------------------------------------*/ /*--------------------------------------------------------------------------*/ /*-----★★★ ▲▲▲▲▲　#DigitalPhotoAlbumWrapperの基本構造の設定 ▲▲▲▲▲　★★★-----*/ /*--------------------------------------------------------------------------*/ /*---------------------------------------------------------- Shelf-3stars レスポンシブ設定 ----------------------------------------------------------*/ /* shelfRowのレスポンシブ設定 * .album { width:calc(90% / 4); } #albumShelf .shelfRow article.album:nth-child(4n)::after { content: ""; background: url(https://3stars.jp/dpa/3stars-folder/assets/img/shelf01_w2000.avif); background-size: contain; background-repeat: no-repeat; background-position: bottom left; width: 100%; height: 140px; display: block; }*/ @media (max-width: 1099px) { .shelf {margin:-45px -40px 20px;} } @media (max-width: 999px) { .shelf {margin:-55px -40px 20px;} .shelfRow.column4 .album,.shelfRow.column3 .album {width:calc(72% / 3);} /* .album:nth-of-type(4n),.album:nth-of-type(4n+1) {/*リセット* margin: 0 auto 0; } .album:first-child,.album:nth-of-type(3n+1) { margin: 0 auto 0 60px; } .album:nth-of-type(3n) { margin: 0 60px 0 auto; }*/ } @media (max-width: 899px) { .shelf {margin:-64px -40px 20px;} .shelfRow.column4 .album,.shelfRow.column3 .album {width:calc(70% / 3);} .album-thumbnail{box-shadow: 0 7px 10px rgba(0, 0, 0, .5);} } @media (max-width: 799px) { .shelf {margin:-74px -40px 15px;} } @media (max-width: 699px) { .shelf {margin:-86px -40px 10px;} /* .album:first-child,.album:nth-of-type(3n+1) { margin: 0 auto 0 50px; }*/ } @media (max-width: 599px) { .shelf {margin:-94px -40px 5px;} /* .album:first-child,.album:nth-of-type(3n+1) { margin: 0 auto 0 40px; } .album:nth-of-type(3n) { margin: 0 40px 0 auto; }*/ } @media (max-width: 499px) { .shelf {margin:-98px -20px 5px;} #albumShelf .shelfRow{ width: calc(100% - 10px); padding: 0 5px; } .album-thumbnail{box-shadow: 0 5px 10px rgba(0, 0, 0, .5);} } @media (max-width: 449px) { .shelf {margin:-101px -18px 0px;} #albumShelf .shelfRow{ width:100%; padding: 0; } } @media (max-width: 399px) { .shelf {margin:-108px -15px 10px;} .shelfRow.column4 .album,.shelfRow.column3 .album {width:calc(70% / 2);} .album:nth-of-type(4n),.album:nth-of-type(4n+1) {/*リセット*/ margin: 0 auto 0; } /* .album:first-child,.album:nth-of-type(2n+1) { margin: 0 auto 0 30px; } .album:nth-of-type(2n) { margin: 0 30px 0 auto; }*/ } /* 初期非表示状態 */ .hidden { opacity: 0; visibility: hidden; transition: opacity 0.5s ease, visibility 0.5s ease; } /* フェードインアニメーション */ .fadeIn { opacity: 1; visibility: visible; }