* {
  font-family: "Send Flowers", 'Kiwi Maru', serif, cursive;
}
/*PC画面*/
@media screen and (min-width : 769px){

.header {
  background: rgb(6, 38, 101);
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 0 30px;
  color: rgb(234, 211, 4);
}
.header__top {
  display: flex;
  align-items: center;
}
a {
  text-decoration: none;
  color: inherit;
}
.header__logo {
  width: 80px;
  padding-right: 20px;
}
.header__logo img {
  width: 100%;
  border-radius: 50%;
}
.header__ttl {
  font-size: 50px;
  text-shadow: 3px 3px 3px rgba(255, 28, 28, 0.765);
}
.header__nav__list {
  display: flex;
  align-items: center;
  font-weight: bold;
}
.header__nav__item {
  white-space: nowrap;
  text-shadow: 3px 3px 3px rgba(255, 28, 28, 0.765);
  padding-right: 30px;
}
.header__nav__item:last-child {
  margin-right: 30px;
}

.main {
  background: #512603 radial-gradient(circle at 50% 50%, transparent 70%, black 95%);
  height: auto;
  display: flex;
  width: 80%;
}

.content {
  height: 100%;
  color: rgb(255, 255, 255);
  text-shadow: 4px 4px 1px rgba(17, 10, 0, 0.765);
  margin: 0px auto 120px;
  text-align: center;
}
.content__store {
  display: flex;
  flex-direction: column;
}
.content__top {
  margin-top: 150px;
  line-height: 24px;
}
#content__top-ttl {
  font-size: x-large;
  margin-bottom: 20px;
}
.content__store-img {
  width: 300px;
  margin: 20px auto;
}
.content__store-img img {
  width: 100%;
  margin: 0 auto;
}
.content__store-img:hover {
  transform: translate(0, 5px);
}
.content__store-link {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
}
.content__store-link:hover {
  color: gold;
}
.content__goods-imgs {
  width: 200px;
  margin: 50px auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 50px;
}
.content__goods-imgs img {
  width: 100%;
}

/*クロねこのリボン*/
.content__story-kuroneko {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}
.content__story-kuroneko-img {
  width: 300px;
}
.content__story-kuroneko-img img {
  width: 100%;
}
#content__story-kuroneko-link {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
  margin-top: 200px;
}
#content__story-kuroneko-link:hover {
  color: gold;
}
.content__story-kuroneko p {
  font-size: small;
  margin-top: 20px;
}

/*marieの部屋*/
.content__creator {
  display: flex;
  justify-content: center;
  margin: 50px 0;
  gap: 50px;
}
.content__creator-img {
  width: 200px;
}
.content__creator-img img {
  width: 100%;
}
#content__creator-link {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
  margin-top: 50px;
}
#content__creator-link:hover {
  color: gold;
}

/* ボタン全体 */
.flowbtn5{
font-family:'Times New Roman',sans-serif;	
border-radius:13px;		
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
}
/* アイコンをど真ん中に*/
.flowbtn5 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* 問い合わせ */
.fl_ma1{
background:#f3981d;	
}
/* Facebook */
.fl_fb1{
background:#3b5998;
}
/* YouTube */
.fl_yu1{
background:#fc0d1c;
}
/* LINE */
.fl_li1{
background:#00c300;
}
/* Instagram紫グラデ背景色 */
.insta_btn5 {
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Instagramオレンジグラデ背景色 */
.insta_btn5:before{
content: '';
position:absolute;
top:17px;
left:-1px;
width:45px;
height:34px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
/* Instagramアイコン調整 */
.insta_btn5 .fa-instagram{
font-size:40px;	
}
/* アイコンボタン下テキスト調整 */
.flowbtn5 div{
font-family: initial;
font-size:11px;
color: white;	
position:relative;
top:55px;
}
/* アイコンボタンにマウスホバーした時の指定*/
.flowbtn5:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
list-style:none;
text-shadow: none;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti li {
text-align:center!important;
}

.sidebar {
  background: #a87001e6;
  position: fixed;
  width: 20%;
  right: 0;
  height: 100%;
  color: #fff;
  margin: 100px 0;
}
.sidebar__nav__list {
  font-size: small;
  margin: 30px;
}
.sidebar__nav__list a {
  display: flex;
  margin-bottom: 10px;
}
.sidebar__nav__list a:hover {
  color: rgb(6, 38, 101);
}
}

/*スマホ画面*/
@media screen and (max-width : 768px){

.header {
  background: rgb(6, 38, 101);
  position: fixed;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100px;
  padding: 0 20px;
  color: rgb(234, 211, 4);
}
.header__top {
  display: flex;
  align-items: center;
}
a {
  text-decoration: none;
  color: inherit;
}
.header__logo {
  width: 90px;
  padding-right: 20px;
}
.header__logo img {
  width: 100%;
  border-radius: 50%;
}
.header__ttl {
  font-size: 30px;
  text-shadow: 3px 3px 3px rgba(255, 28, 28, 0.765);
}
.header__nav__list {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-weight: bold;
  line-height: 20px;
  margin-right: 20px;
  margin-left: -30px;
}
.header__nav__item {
  text-shadow: 3px 3px 3px rgba(255, 28, 28, 0.765);
  font-size: x-small;
}

.main {
  background: #512603 radial-gradient(circle at 50% 50%, transparent 70%, black 95%);
  height: auto;
  display: flex;
  width: 100%;
}

.content {
  height: 100%;
  color: rgb(255, 255, 255);
  text-shadow: 4px 4px 1px rgba(17, 10, 0, 0.765);
  margin: 0px 30px 120px;
  text-align: center;
}
.content__store {
  display: flex;
  flex-direction: column;
}
.content__top {
  margin-top: 150px;
  line-height: 24px;
}
#content__top-ttl {
  font-size: x-large;
  margin-bottom: 20px;
}
.content__store-img {
  width: 300px;
  margin: 20px auto;
}
.content__store-img img {
  width: 100%;
  margin: 0 auto;
}
.content__store-link {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
}

.content__goods-text{
  margin-top: 50px;
}
.content__goods-imgs {
  width: 200px;
  margin: 30px auto 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.content__goods-imgs img {
  width: 100%;
}

/*クロねこのリボン*/
.content__story-kuroneko a {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
}
.content__story-kuroneko  {
  margin: 50px 0;
}
.content__story-kuroneko-img {
  width: 150px;
  margin: 0 auto;
}
.content__story-kuroneko-img img {
  width: 100%;
}
#content__story-kuroneko-link {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
  margin-top: 10px;
}
.content__story-kuroneko p {
  font-size: small;
  margin-top: 20px;
}

/*marieの部屋*/
.content__creator {
  margin: 50px 0;
}
.content__creator-img {
  width: 130px;
  margin: 0 auto;
}
.content__creator-img img {
  width: 100%;
}
#content__creator-link {
  text-decoration: underline;
  font-size: large;
  font-weight: bold;
  margin-top: 10px;
}

/* ボタン全体 */
.flowbtn5{
font-family:'Times New Roman',sans-serif;	
border-radius:13px;		
position:relative;
display:inline-block;
width:50px;
height:50px;
font-size:33px;
color:#fff!important;
transition:.5s;
text-decoration:none;
}
/* アイコンをど真ん中に*/
.flowbtn5 i{
position:absolute;
top:50%;
left:50%;
-ms-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
}
/* Twitter */
.fl_tw1{
background:#55acee;
}
/* 問い合わせ */
.fl_ma1{
background:#f3981d;	
}
/* Facebook */
.fl_fb1{
background:#3b5998;
}
/* YouTube */
.fl_yu1{
background:#fc0d1c;
}
/* LINE */
.fl_li1{
background:#00c300;
}
/* Instagram紫グラデ背景色 */
.insta_btn5 {
background:-webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;
background:linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat;		
}
/* Instagramオレンジグラデ背景色 */
.insta_btn5:before{
content: '';
position:absolute;
top:17px;
left:-1px;
width:45px;
height:34px;
background:-webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
background:radial-gradient(#ffdb2c 5%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%);
}
/* Instagramアイコン調整 */
.insta_btn5 .fa-instagram{
font-size:40px;	
}
/* アイコンボタン下テキスト調整 */
.flowbtn5 div{
font-family: initial;
font-size:11px;
color: white;	
position:relative;
top:55px;
}
/* アイコンボタンにマウスホバーした時の指定*/
.flowbtn5:hover{
-webkit-transform:translateY(-5px);
-ms-transform:translateY(-5px);
transform:translateY(-5px);
text-decoration:none;
}
/* ulタグの内側余白を０にする */
ul.snsbtniti{
padding:0!important;
}
/* アイコンボタン全体の位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:space-around;
list-style:none;
text-shadow: none;
}
/* アイコンボタン同士の余白調整 */
.snsbtniti li {
text-align:center!important;
}


.sidebar {
  display: none;
}
}

.footer{
  background: rgb(6, 38, 101);
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  bottom: 0;
  height: 50px;
  color: rgb(234, 211, 4);
}