@charset "utf-8";
body{
font-family: DM Sans,sans-serif;
font-weight:400;
letter-spacing:.025rem;
font-feature-settings: "palt" 1;/*基本役物詰め*/
}
/*========================================
⇩フィックスヘッダー⇩
=========================================*/
#fixed-header{
z-index: 997;/* オープニング999/モーダル998*/
position: fixed;
display: flex;
justify-content:center;
align-items: center;
top: -60px;
transition: .5s;
width: 100%;
height: 60px;
padding: 17px 0 13px;
color: #000;
background: #fff;
box-sizing: border-box;
}
#fixed-header.is-show{
top: 0;
}
/* 上下左右中央をflexで指定したけどimgつけないと操作できなかった */
.fixed-header-item img{ 
width:auto;
height:30px;
}
/*=========ページトップへボタン==========*/
.pagetop {
height: 50px;
width: 50px;
position: fixed;
right: 30px;
bottom: 30px;
background: #fff;
border: solid 2px #000;
border-radius: 50%;
display: none;
justify-content: center;
align-items: center;
z-index: 2;
cursor: pointer;
}
.pagetop__arrow {
display: block;
height: 10px;
width: 10px;
border-top: 3px solid #000;
border-right: 3px solid #000;
transform: translateY(20%) rotate(-45deg);
}
/*========================================
⇩セクションヒーロー⇩
=========================================*/
#section-1{
  background: url("../img/bg/gerunika-bgc-w_min.jpg") no-repeat center/cover;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

/*========================================
⇩muuiギャラリー⇩
=========================================*/
/* Safariの青い枠線を消す*/
*:focus {
outline: none;
}
/*並び替えボタンのCSS*/
.sort-btn{
display: flex;
justify-content: center;
flex-wrap: wrap;
padding:50px 20px;
}
.sort-btn li{
color:#fff;
background:#1A180B;
border-radius:4px;
cursor: pointer;
padding: 8px 32px;
margin:5px;
}
/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
.sort-btn li.active{
background:#EEB822;	
}
/*並び替えボタン横幅が480px以下になった際の指定*/
@media only screen and (max-width: 480px) {
.sort-btn{
justify-content: space-between;
}	
.sort-btn li{
width:48%;
margin:0 0 10px 0;
text-align:center;
}	
}
/*=========Muuriのレイアウトのための調整=========*/
.grid {
position: relative;/*並び替えの基準点を指定*/
}
.pl1{
padding-left: 1%;
}
/*各画像の横幅などの設定*/
.item {
display: block;
position: absolute;
width: 20%;/*横並びで5つ表示*/
z-index: 1;
padding:0 1% 1% 0;
}
/*内側のボックスの高さが崩れないように維持*/
.item-content {
position: relative;
width: 100%;
height: 100%;
}
.item-content p {
padding: 10px 1% 40px 1%;
}
/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
width:100%;
height:auto;
/*画像の下にできる余白を削除*/
vertical-align: bottom;
}
/*横幅が1280px以下になった際の指定*/
@media only screen and (max-width: 1280px) {
.item {
width: 33.3%;/*横並びで3つ表示*/
}
}
/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
width: 49.5%;/*横並びで2つ表示*/
}
}
/* 480px以下に適用されるCSS（スマホ用） */
@media only screen and  (max-width: 480px) {
.item {
width: 100%;/*横並びで2つ表示*/
}
}
/*fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
background: transparent!important;
}

.fancybox-thumbs__list a:before {
border: 6px solid #FA999B;
}
/*=========レイアウトのための調整=========*/
ul{
margin:0;
padding: 0;
list-style: none;
}

a{
color: #333;
}

a:hover,
a:active{
text-decoration: none;
}

h1{
text-align: center;
font-size:6vw;
letter-spacing: 0.1em;
text-transform: uppercase;
margin:30px 0;
}

p{
margin:0 10px 10px 10px;
word-wrap : break-word;
}