@charset "utf-8";
/* トップページ ここから↓ */

html {
  font-size: 100%;
}
body {
  color: #383e45;
  font-size: 0.9rem;
}
a {
  text-decoration: none;
}
img {
  max-width: 100%;
}
li {
  list-style: none;
}



header{
  background-color: #fff;
  padding: 15px;
}

body {

	background-color: #c9dfec;
  margin: 0px;
}


#topics ul {
	list-style-type: none;
	margin: 0;
	padding-left: 0;
}
#topics ul li {
	margin-top: 20px;
	padding: 0 10px 20px 160px;
	border-bottom: 1px dotted #333333;
	text-indent: -160px;
}
footer #pagetop {
	float: right;
}

.pc-menu {
  display: block;
}
.sp-menu {
  display: none;
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */

.pc-menu {
  display: none;
}
.sp-menu {
  display: block;
}

}


nav ul {
	
	display: flex;
	justify-content: space-around;
	color: #fa474d;
	

}
nav ul li{
border:solid 10px#ff69b4;
width:150px;
padding: 30px;
text-align: center;
}
#top {
	text-align: center;
}

.product-img{
	width:50%;
	box-shadow: 6px 6px 10px 0px rgba(0, 0, 0, 0.4);

}

footer {
	background-color: #ffffff;
  padding: 15px;
}
/* a:hover {
	color: #fc9698;
} */

/* トップページ ここまで↑ */

/* 「フォトショップ」ページ ここから↓ */
.button{
  
  padding:20px 30px 20px 30px;
  border:black 2px solid;
  font-size: 22px;
  color:black;
  margin:0 auto;
  background-color: #EEDCB3; /* 背景色 */
  box-shadow: 0 2px 0 #000; /* 影の太さ・色 */
  display: inline-block;
  text-decoration: none; /* 文字の下線を消す */
  border-radius: 60px;
  cursor: pointer;
 
}

.block{
  display:block;
  width:100px;
  margin:0 auto;
}

/* 「フォトショップ」ページ ここまで↑ */

/* 「イラストレーター」ページ ここから↓ */


/* 「イラストレーター」ページ ここまで↑ */
.menu_box{
	max-width: 1040px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;

}
.hako {
	width: 500px;
	margin: 0 auto 50px auto;
}



@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
}
@media screen and (max-width: 480px) {
	/* 480px以下に適用されるCSS（スマホ用） */
.hako {
	width: 100%;
}


}


/* 
hamburger(ハンバーガーアイコン)
=================================== */
.hamburger {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 50px;
  height: 40px;
  cursor: pointer;
  z-index: 300;
}

.hamburger__line {
  position: absolute;
  width: 50px;
  height: 3px;
  right: 0;
  background-color: #000;
  transition: all 0.5s;
}

.hamburger__line--1 {
  top: 1px;
}

.hamburger__line--2 {
  top: 18px;
}

.hamburger__line--3 {
  top: 36px;
}

/*ハンバーガーがクリックされたら*/
.open .hamburger__line--1 {
  transform: rotate(-45deg);
  top: 11px;
}

.open .hamburger__line--2 {
  opacity: 0;
}

.open .hamburger__line--3 {
  transform: rotate(45deg);
  top: 11px;
}

/* 
sp-nav(ナビ)
=================================== */
.sp-nav {
  position: fixed;
  right: -100%; /*ハンバーガーがクリックされる前はWindow右側に隠す*/
  top: 0;
  width: 70%; /* 出てくるスライドメニューの幅 */
  height: 100vh;
  background-color: #fff;
  transition: all 0.5s;
  z-index: 200;
  overflow-y: auto; /* メニューが多くなったらスクロールできるように */
}
.sp-nav ul{
  display:block;
  margin-top:70px;
}
/*ハンバーガーがクリックされたら右からスライド*/
.open .sp-nav {
  right: 0;
}


/* 
black-bg(ハンバーガーメニュー解除用bg)
=================================== */
.black-bg {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 5;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s;
  cursor: pointer;
  z-index: 100;
}

/*ハンバーガーメニューが開いたら表示*/
.open .black-bg {
  opacity: 0.3;
  visibility: visible;
}