@charset "UTF-8";
/* Scss Document */
/* Scss Document */
/*color*/
/*font*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400&display=swap");
@font-face { font-family: 'avenir next', sans-serif; font-style: normal; font-weight: 600; src: url("../fonts/AvenirNext-DemiBold-03.ttf") format("truetype"); }
@font-face { font-family: 'avenir next', sans-serif; font-style: normal; font-weight: 500; src: url("../fonts/AvenirNext-Regular-08.ttf") format("truetype"); }
/*layout*/
/*-------------------------------------
	insta
-------------------------------------*/
.image-container { position: relative; /* 位置を相対的に設定 */ width: 100%; /* コンテナの幅 */ height: 748px; /* コンテナの高さ */ overflow: hidden; /* はみ出た部分を隠す */ }

.image-slider { display: flex; }

#instafeed { width: 2000px; display: grid; grid-template-columns: repeat(8, 245.625px); grid-template-rows: repeat(3, 245.625px); gap: 5px; }

.title { grid-area: 1 / 1 / span 1 / span 9; display: flex; justify-content: center; align-items: center; }
.title h3 { font-family: "avenir next", sans-serif; font-size: 40px; font-weight: bold; }

.icon { grid-area: 2 / 3 / span 1 / span 3; display: flex; justify-content: center; align-items: center; }

.user { grid-area: 3 / 2 / span 1 / span 4; display: flex; justify-content: center; align-items: center; background: url("../idx/user_bg.jpg") no-repeat center center/cover; margin: 0 -5px; }
.user p { font-family: "avenir next", sans-serif; font-size: 18px; font-weight: bold; }

.insta-item { display: none; overflow: hidden; }

.insta { display: block !important; position: relative; margin-bottom: 0; }
.insta.slick-initialized { display: block; }
.insta .insta-item { width: 100%; position: relative; overflow: visible !important; display: block; }
.insta .insta-item::before { content: ''; display: block; padding-top: 100%; }
.insta .insta-item p { position: absolute; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); top: 0; left: 0; color: #FFF; padding: 30px; opacity: 0; transition: all 0.5s; z-index: 3; }
.insta .insta-item img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: center center; top: 0; left: 0; z-index: 1; }
.insta .insta-item:hover p { opacity: 1; }

#img01 { grid-area: 1 / 1 / span 1 / span 1; }

#insta01 { grid-area: 1 / 2 / span 1 / span 1; }

#img02 { grid-area: 1 / 3 / span 1 / span 1; }

#img03 { grid-area: 1 / 4 / span 1 / span 1; }

#insta02 { grid-area: 1 / 5 / span 1  / span 1; }

#insta03 { grid-area: 1 / 6 / span 1 / span 1; }

#insta04 { grid-area: 1 / 7 / span 2 / span 2; }

#insta05 { grid-area: 1 / 9 / span 1 / span 1; }

#insta06 { grid-area: 2 / 1 / span 1 / span 1; }

#img04 { grid-area: 2 / 2 / span 1 / span 1; }

#insta07 { grid-area: 2 / 3 / span 2 / span 2; }

#insta08 { grid-area: 2 / 5 / span 1 / span 1; }

#insta-logo { grid-area: 2 / 6 / span 1 / span 1; }

#insta09 { grid-area: 2 / 9 / span 1 / span 1; }

#insta09 { grid-area: 2 / 9 / span 1 / span 1; }

#insta10 { grid-area: 3 / 1 / span 1 / span 1; }

#insta11 { grid-area: 3 / 2 / span 1 / span 1; }

#text { grid-area: 3 / 5 / span 1 / span 1; }

#insta12 { grid-area: 3 / 6 / span 1 / span 1; }

#img05 { grid-area: 3 / 7 / span 1 / span 1; }

#img06 { grid-area: 3 / 8 / span 1 / span 1; }

#insta13 { grid-area: 3 / 9 / span 1 / span 1; }

.flip-image { transition: transform 1s ease; /* 回転をスムーズにするためのアニメーション */ transform-origin: center; margin: 5.8125px; }

.rotate-image { transition: transform 1s ease; /* 回転をスムーズにするためのアニメーション */ transform-origin: center; margin: 5.8125px; }

.flip-image02 { transition: transform 1s ease; /* 回転をスムーズにするためのアニメーション */ transform-origin: center; margin: 5.8125px; }

.rotate-image02 { transition: transform 1s ease; /* 回転をスムーズにするためのアニメーション */ transform-origin: center; margin: 5.8125px; }

.insta_img { margin: auto; }

/*# sourceMappingURL=insta.css.map */