ここにテキスト。テキストに応じて画像の高さも変わる。z-index1を指定する
*/
.hoge{
position:relative;
overflow: hidden;
}
.hoge__attachment{
position:absolute;
left:0;
top:0;
display:block;
height:100%;
width:100%;
overflow: hidden;
}
.hoge__attachment__clip{
position:relative;
overflow:hidden;
clip-path:inset(0 0 0 0);/*要素を矩形にトリミング*/
height:100%;
}
.hoge__attachment__clip img{
position:fixed;
width:100%;
min-height:100vh;
height:auto;
left:0;
top:0;
pointer-events:none;
object-fit:cover;
}
/*４、画面いっぱいスライドショー、最新記事などのslick03をslick02にすれば画面１枚ずつの表示*/
.slick02_sliderArea{
max-width: 100%;
margin: 0 auto;
padding:0 auto;
}
.slick02 .slick-slide {
margin: 0 auto;
}
.slick02 .slick-slide img {
width: 100%;
height: auto;
}
.slick02 .slick-prev, .slick-next {
z-index: 1;
}
.slick02 .slick-prev:before,.slick02 .slick-next:before {
color: #000;
}
.slick02 .slick-prev {
left: 0;
}
.slick02 .slick-next {
right: 0;
}
.slick02 .slick-active {
opacity: 1;
}
.slick02 .slick-current {
opacity: 1;
}
.slick02 .thumb {
margin: 20px 0 0;
}
.slick02 .thumb .slick-slide {
cursor: pointer;
}
.slick02 .slick-dots {
bottom: 10px;
}
.slick02.full-screen .slick-list {
overflow: visible;
}
.slick02_sliderArea {
overflow: hidden;
}
.slick02.full-screen.slider {
max-width: 100vw;
margin: 0 auto;
}
/*高さの上限*/
.slick-slide {
max-height: 900px;
}
.slick02 .slick-slide img {
object-fit: cover;
max-height: 900px;
}
/*4.5、サムネイルを押すか矢印を押すと画像が切り替わる*/
/*メイン画像下に余白をつける*/
.gallery{
margin:0 0 5px 0;
}
.gallery li{
list-style:none;
}
.gallery .slick-slide img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
max-height: 900px;
/* max-width: 1920px; */
object-position: center;
/* text-align: center; */
margin: 0 auto;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.make-slick-prev,
.make-slick-next {
position: absolute;/*絶対配置にする*/
z-index: 3;
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #ccc;/*矢印の色*/
border-right: 2px solid #ccc;/*矢印の色*/
height: 25px;
width: 25px;
}
.make-slick-prev {/*戻る矢印の位置と形状*/
left:2.5%;
transform: rotate(-135deg);
}
.make-slick-next {/*次へ矢印の位置と形状*/
right:2.5%;
transform: rotate(45deg);
}
/*選択するサムネイル画像の設定*/
.choice-btn li{
cursor: pointer;
outline: none;
background:#333;
list-style:none;
}
.choice-btn li img{
opacity: 0.4;/*選択されていないものは透過40%*/
}
.choice-btn .slick-current li img{
opacity: 1;/*選択されているものは透過しない*/
}
.choice-btn .slick-track {
transform: unset !important;/*画面幅サイズ変更に伴うサムネイル固定*/
}
/*サムネイルを押すか矢印を押すと画像が切り替わる2*/
/*メイン画像下に余白をつける*/
.gallery_auto{
margin:0 0 5px 0;
}
.gallery_auto li{
list-style:none;
}
/*矢印の設定*/
/*戻る、次へ矢印の位置*/
.slick-prev,
.slick-next {
position: absolute;/*絶対配置にする*/
z-index: 3;
top: 42%;
cursor: pointer;/*マウスカーソルを指マークに*/
outline: none;/*クリックをしたら出てくる枠線を消す*/
border-top: 2px solid #ccc;/*矢印の色*/
border-right: 2px solid #ccc;/*矢印の色*/
height: 25px;
width: 25px;
}
.slick-prev {/*戻る矢印の位置と形状*/
left:2.5%;
transform: rotate(-135deg);
}
.slick-next {/*次へ矢印の位置と形状*/
right:2.5%;
transform: rotate(45deg);
}
/*選択するサムネイル画像の設定*/
.choice-btn_auto li{
cursor: pointer;
outline: none;
background:#333;
list-style:none;
}
.choice-btn_auto li img{
opacity: 0.4;/*選択されていないものは透過40%*/
}
.choice-btn_auto li.slick-current img{
opacity: 1;/*選択されているものは透過しない*/
}
.gallery_auto .slick-next:before,.gallery_auto .slick-prev:before,.choice-btn_auto .slick-next:before,.choice-btn_auto .slick-prev:before{
display:none;
}
/*4.6、ギャラリー*/
.all_gallery{
columns: 4;/*段組みの数*/
padding:0 15px;/*ギャラリー左右に余白をつける*/
margin:0;
}
.all_gallery li {
margin-bottom: 20px;/*各画像下に余白をつける*/
list-style:none;
}
/*ギャラリー内のイメージは横幅100%にする*/
.all_gallery img{
width:100%;
height:auto;
vertical-align: bottom;/*画像の下にできる余白を削除*/}
/* 横幅900px以下の段組み設定 */
@media only screen and (max-width: 900px) {
.all_gallery{
columns:3;
}
}
@media only screen and (max-width: 768px) {
.all_gallery{
columns: 2;
}
}
/*画像を出現させるアニメーションCSS*/
.flipLeft{
animation-name: flipLeft;
animation-duration:0.5s;
animation-fill-mode:forwards;
perspective-origin: left center;
opacity: 0;
}
@keyframes flipLeft{
from {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(30deg);
opacity: 0;
}
to {
transform: perspective(600px) translate3d(0, 0, 0) rotateY(0deg);
opacity: 1;
}
}
/*5、文字が１字ずつ出現する(eachTextAnimeクラスを付与しておく)*/
.eachTextAnime {opacity: 0;}
.eachTextAnime.appeartext {opacity: 1;}
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
0% {opacity:0;}
100% {opacity:1;}
}
.eachTextAnime2 {opacity: 0;}
.eachTextAnime2.appeartext {opacity: 1;}
.eachTextAnime2 span{opacity: 0;}
.eachTextAnime2.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
0% {opacity:0;}
100% {opacity:1;}
}
.eachTextAnime3 {opacity: 0;}
.eachTextAnime3.appeartext {opacity: 1;}
.eachTextAnime3 span{opacity: 0;}
.eachTextAnime3.appeartext span{ animation:text_anime_on 1s ease-out forwards; }
@keyframes text_anime_on {
0% {opacity:0;}
100% {opacity:1;}
}
/*6、新着記事スライドショートコード(サムネイルあり)*/
.new_post_list {
max-width: 1000px;
margin:0 auto;
}
.new_post_list .slick-slide {
padding: 10px;
}
.new_post_list .slick-slide img {
width: 100%;
height: 12vw;
max-height: 200px;
min-height: 100px;
object-fit: cover;
}
.slick03 .slick-prev:before,.slick03 .slick-next:before {
color: #000;
}
/*7、新着記事ショートコード(サムネなし5件)*/
.new_post_noimagelist ul {
max-width: 980px;
margin: 0 auto;
}
.new_post_noimagelist li a {
display: flex;
margin-bottom: 1rem;
flex-wrap: wrap;
}
.new_post_noimagelist span {
padding-right: 3%;
width: 130px;
}
.new_post_noimagelist h3 {
width: calc(100% - 130px);
}
@media(max-width:600px){
.new_post_noimagelist span {
padding-right: 0;
width: 100%;
}
.new_post_noimagelist h3 {
width: 100%;
margin-bottom:1rem;
}
}
/*8、スクロールアニメーション、ロッテぃ*/
#scroll {
position: absolute;
width: 20%;
left: -5%;
bottom: -12%;
min-width: 300px;
max-width:380px;
}
@media (max-width: 600px) {
#scroll {
right: -25%;
bottom: -20%;
left: auto;
min-width: 250px;
}
}
/*9、アコーディオン
*