@charset "UTF-8";
/* CSS Document */

body{
	background-color: #000000;
	color: #F3F3F3;
}



/* 文字やリンクについて */

body{
	/*font-family: 'Sawarabi Mincho', serif;*/
	/*font-family: "Hannari";*/
	/*font-family: 'Hina Mincho', serif;*/
	font-family: 'Shippori Mincho B1', serif;
}

a {
	color: #AEF1FF;
	text-decoration: none;
}

a:visited{
	color:#3FAD30;
}

a:hover{
	color: #008ABD;
	text-decoration: underline;
}

.wf-sawarabigothic { font-family: "Sawarabi Gothic"; }

/* リンクの下線について */



/* ここから下がハンバーガーメニューに関するCSS */
/* CSSコード */
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  background: #fff;
}

.logo {
  font-size: 24px;
}

/* ここから下がハンバーガーメニューに関するCSS */
  
/* チェックボックスを非表示にする */
.drawer_hidden {
  display: none;
}

/* ハンバーガーアイコンの設置スペース */
.drawer_open {
  display: flex;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: 100;/* 重なり順を一番上にする */
  cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background: #333;
  transition: 0.5s;
  position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
  bottom: 8px;
}

/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
  top: 8px;
}

/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
  background: rgba(255, 255, 255, 0);
}

/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
  bottom: 0;
  transform: rotate(45deg);
}

#drawer_input:checked ~ .drawer_open span::after {
  top: 0;
  transform: rotate(-45deg);
}
  
/* メニューのデザイン*/
.nav_content {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 100%; /* メニューを画面の外に飛ばす */
  z-index: 99;
  background: #fff;
  transition: .5s;
}

/* メニュー黒ポチを消す */
.nav_list {
  list-style: none;
}

/* アイコンがクリックされたらメニューを表示 */
#drawer_input:checked ~ .nav_content {
  left: 0;/* メニューを画面に入れる */
}
/* ここから上がハンバーガーメニューに関するCSS */

/* 全体的なデザイン */

h2{
	justify-content: space-evenly;
	font-size: 40px;
}

/* 全体的なデザイン */

/* カテゴリ */

.category_lisut {
	display: flex;
	justify-content: center;
	height: 100%;
	padding: 0;
}

.category_lisut li{
	display: inline-block;
	list-style-type: none;
	height: 100%;
	margin: 0 2vw;
}

.link{
    display: inline-block;
}

.link img{
    display: block;
}

/* カテゴリ */

/* ネイル使用例の画像 */

/*==================================================
ギャラリーのためのcss
===================================*/

/*＝＝＝並び替えボタンのCSS*/
.sort-btn{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	padding:50px 20px;
	color: #575757;
}

.sort-btn li{
  background:#eee;
  border-radius:10px;
  cursor: pointer;
  padding: 10px;
  margin:0 10px;
}

.sort-btn li.active{/*ボタンに現在地＝activeというクラス名がついたら背景色を変更*/
	
	color: #575757;
}

/*横幅が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;/*並び替えの基準点を指定*/
}

/*各画像の横幅などの設定*/
.item {
  display: block;
  position: absolute;
  width: 33%;/*横並びで3つ表示*/
  z-index: 1;
}

/*内側のボックスの高さが崩れないように維持*/
.item-content{
  position: relative;
  width: 100%;
  height: 100%;
}

/*画像の横幅を100%にしてレスポンシブ化*/
.grid img{
  width:100%;
  height:auto;
  vertical-align: bottom;/*画像の下にできる余白を削除*/
}

/*横幅が768px以下になった際の指定*/
@media only screen and (max-width: 768px) {
.item {
  width: 49.5%;/*横並びで2つ表示*/
}
}

/*＝＝＝fancyboxサムネイル背景と画像選択時の枠線の指定*/
.fancybox-thumbs {
    background: transparent!important;
}

.fancybox-thumbs__list a:before {
    border: 6px solid #FA999B;
}


/*========= レイアウトのためのCSS ===============*/
ul{
  margin:0;
  padding: 0;
  list-style: none;
}

a{
  color: #333;
}

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

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

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



/* ネイル使用例の画像 */

/* はじめての方へCSS */

#caoption{
	font-size: 30px;
	text-align: center;
	justify-content: center;
	margin-bottom: 50px;
}

/*==================================================
共通　横並びのための設定
===================================*/

.gnavi{
    display: flex;
	justify-content: space-around;
    flex-wrap: wrap;/*スマホ表示折り返し用なのでPCのみなら不要*/
    margin:0 0 50px 0;
    list-style: none;
}

.gnavi li a{
    display: block;
    padding:10px 30px;
    text-decoration: none;
}

.gnavi li p{
	width: 300px;
    margin-bottom:20px;
}


/*==================================================
　5-3-3 左から右に線が伸びる（下部）
===================================*/
.gnavi li a{
    /*線の基点とするためrelativeを指定*/
  position: relative;
}

.gnavi li.current a,
.gnavi li a:hover{
  color:#0481A2;
}

.gnavi li a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 50%;
    height: 2px;
    background:#0481A2;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: left top;/*左上基点*/
}

/*現在地とhoverの設定*/
.gnavi li.current a::after,
.gnavi li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}
/*========= レイアウトのためのCSS ===============*/

.lead{
  padding: 50px 20px;
}

/* はじめての方へCSS */

/* カラーパレット */

.color_palette{
	width: 100%;
}

/* カラーパレット */

/*おすすめ一覧*/

article h2{
	text-align: left;
	margin-left: 5vw;
}

.news{
	width: 800px;
	margin: 5vh 0 2vh 25vw;
	font-size: x-large;
	justify-content: center;
}

.news_flex{
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
}

.news_flex p{
	width: 800px;
	border-bottom: dotted 2px #FFFFFF;
}

/*おすすめ一覧*/

/* フッターリンクリスト */

.color_palette{
	text-align-last: center;
	margin: 10vh 0;
}

.sns_link {
	display: flex;
	justify-content: space-around;
	list-style-type: none;
	font-size: 20px;
}

.footer_nav{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	list-style-type: none;
	font-size: 20px;
}

.footer_nav div{
	margin:30px 50px;
}

.kadai{
	text-align: center;
	justify-content: center;
}
/* フッターリンクリスト */