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


#main{
	overflow-x: hidden;
	position: relative;
}


#show ,#hide{
	position: fixed;
    width: 60px;
    float: right;
    cursor: pointer;
    font-size: 40px;
    margin-top: 10px;
	margin-left: 325px;

	height: 40px;
  }

#hide{
	margin-left: 140px;
	z-index: 5;
	background-color: darkgray;
  }


#menu {
    z-index: 2;
	
    position: absolute;

    top: 0;
    right: -180px;
	width: 180px;
    min-height: 100%;
	font-size:30px;
    color: whitesmoke;
	background-color: darkgray;

	transition: .4s;
  }

body.menu-open #menu{
	right: 0;
	font-size: 30px;
	position: fixed;
	margin-right: 0px;
	
}


body{

	margin: 0;
	padding: 0;/*左上にくつける*/
}

h1{
    margin-top: 0px;
    background-color: gold;
    margin-bottom: -20px;
	
}
.tate{
    color: white;
    font-size: 17px;
    font-family: sans-serif;
    margin-top: -525px;
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-made: vertical-rl;
    margin-right: 0px;
    margin-left: 270px;
	font-weight: 600;
	
}
.mozi{
	margin-top: -80px;
	margin-left: -285px;
}
h1 img{
    margin-top: 0px;
    margin-left: 10px;
}

.haikei{
    min-height: 10px;
	margin-top: 10px;
}
.buy{
    margin-top: -555px;
    margin-left: -40px;
}
li{
	font-size: 80%;
	font-family: sans-serif;
	font-weight: 550;
	line-height: 80px;
	text-decoration: underline;
}

.haikeii{
	margin-top:-50px;
	width: 370px;
	height: -100px;
	margin: 0;
	padding: 0;/*左上にくつける*/
}
.kittin{
    margin-top: 40px;
    margin-bottom: 20px;
    margin-left: 0px;
}
.aboutbun{
	margin-top: -45px;
	margin-left: 50px;
	font-size: 15px;
	font-family: sans-serif;
	line-height: 17px;
	font-weight: 530;
}
.about{
	text-decoration: overline;
	margin-top: -200px;
	margin-left: 50px;
	font-size: 25px;
	font-family: sans-serif;
}


#hako{
	
    margin-top: -60px;
    margin-left: 190px;
	
}
#aboutbunn{
	margin-top: 35px;
	margin-left: 50px;
	font-size: 15px;
	font-family: sans-serif;
	line-height: 17px;
	font-weight: 530;
	
}
#lineup{
	text-decoration: overline;
	margin-top: 50px;
	margin-left: 50px;
	font-size: 25px;
	font-family: sans-serif;
}
.tate1{
    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-made: vertical-rl;
    text-align: right;
	margin-top: 40px;
	margin-left: 295px;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: 800;
}
#kaniti{
    margin-top: -220px;
    margin-left: 60px;
    margin-bottom: 70px;
}
#kaniniti{
	margin-top: -100px;
    margin-left: 96px;
}
#first{
    margin-top: 30px;
    margin-left: 50px;
    font-size: 15px;
    font-family: sans-serif;
    line-height: 17px;
    margin-right: 50px;
}

#buyb{
margin-top: 0px;
	margin-left: 5px;
}
#view{
	margin-left: 5px;
	margin-top: -10px;
}
#botan{
	margin-left: 5px;
}
#oribu{
	margin-top: -10px;
	font-size: 130%;
	text-decoration: underline;
	margin-left: 40px;
}
#group{
	margin-top: -670px;
}
#second{
	margin-top: -10px;
	line-height: 25px;
	margin-left: 5px;
	font-weight: 530;
}
#fu{
	margin-top: -15px;
	line-height: 25px;
	margin-left: 15px;
	font-family: sans-serif;
	font-weight: 600;
	text-align: center
}
#hhaikei{
	margin-top: -10px;
}
#hhaike{
	margin-top: 55px;
}



#kanni{
    margin-top: -210px;
    margin-left: 95px;
    margin-bottom: 210px;
}
#kaninni{
	margin-top: -220px;
    margin-left: 95px;
    margin-bottom: 220px;
}
.tate2{
	    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-made: vertical-rl;
    text-align: right;
	margin-top: -628px;
	margin-left: 295px;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: 800;
}


#lemon{
	margin-top: -240px;
	font-size: 130%;
	text-decoration: underline;
	margin-left: 55px;
	font-family: sans-serif;
}
#secondd{
	margin-top: -10px;
	line-height: 25px;
	margin-left: 5px;
	font-weight: 530;
}
#fuu{
	margin-top: -15px;
	line-height: 25px;
	margin-left: 15px;
	font-family: sans-serif;
	font-weight: 600;
	text-align: center
}
#firstt{
    margin-top: 30px;
    margin-left: 50px;
    font-size: 15px;
    font-family: sans-serif;
	text-align: justify;
    line-height: 17px;
    margin-right: 50px;
}



#haikee{
	margin-top: 55px;
}
.tate3{
		    -ms-writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;
    writing-made: vertical-rl;
    text-align: right;
	margin-top: -628px;
	margin-left: 295px;
	font-family: sans-serif;
	font-size: 18px;
	font-weight: 800;
}
#kansan{
    margin-top: -200px;
    margin-left: 95px;
    margin-bottom: 210px;
}
#kaninsan{
	margin-top: -220px;
    margin-left: 95px;
    margin-bottom: 220px;
}
#tiri{
	margin-top: -240px;
	font-size: 130%;
	text-decoration: underline;
	margin-left: 25px;
	font-family: sans-serif;
}
#seconddd{
	margin-top: -10px;
	line-height: 25px;
	margin-left: 5px;
	font-weight: 530;
}
#fuuu{
	margin-top: -15px;
	line-height: 25px;
	margin-left: 15px;
	font-family: sans-serif;
	font-weight: 600;
	text-align: center
}
#firsttt{
    margin-top: 30px;
    margin-left: 50px;
    font-size: 15px;
    font-family: sans-serif;
	text-align: justify;
    line-height: 17px;
    margin-right: 50px;
}
.set{
	margin-left: 5px;
	margin-top: -10px;
}
.sett{
	margin-left: 5px;
	margin-top: -10px;
}
#recipe{
	text-decoration: overline;
	margin-top: 80px;
	margin-left: 50px;
	font-size: 25px;
	font-family: sans-serif;
}

.bou{
	margin-left: -50px;
	margin-top: -0px;
}
.horizontal-list {
      overflow-x: auto;
      white-space: nowrap;
      -webkit-overflow-scrolling: touch;
    }

    .item {
      /* 横スクロール用 */
      display: inline-block;
      width: 90%;
		color: black;

      /* 見た目調整 */
      height: 400px;
      margin: 5px;
      font-size: 20px;
	margin-top: -28px;
    }
h4{
	margin-top: -83px;
		color: whitesmoke;
	text-decoration: none;
}
#cookpad{
	margin-left: 57px;
	margin-top: -55px;
	font-family: sans-serif;
	font-weight: 530;
	
}
#cookpadd{
	margin-top: -50px;
}

#accesss{
		text-decoration: overline;
	margin-left: 50px;
	font-size: 25px;
	margin-bottom: -50px;
	font-family: sans-serif;
}
.clearTxt{
	font-family: sans-serif;
	margin-left: 50px;
	margin-right: 50px;
	line-height: 10px
}
#zyuusyo{
	margin-top: -10px;
	font-weight: 530;
	
}
#saigo{
	margin-top: 20px;
	margin-left: 45px;
	
}
.button{
	background-image: url("images/hata.png");
	margin-left: 270px;
	margin-bottom: 30px;
	font-size: 20px;
}
#aaa{
	color: white;
	font-size: 8px;
}
.zennbu{
	width: 100%;
	margin-left: 0px;
}
#lemon1{
	margin-left: 20px;
}
.pagetop {
	color: black;
	background-color: gold;
	text-decoration: none;
	display: none;
	position: fixed;
	bottom: 1rem;
	right: 1rem;
	font-size: 1.5rem;
	width: 4rem;
	height: 4rem;
	line-height: 4rem;
	border-radius: 4rem;
	text-align: center;
	cursor: pointer;
	font-family: sans-serif;
	font-weight: 530;
}

.pagetop:hover {
	color: black;
	background-color: gold;
	text-decoration: none;
	font-family: sans-serif;
	font-weight: 530;
}
.btn-square-slant {
	font-family: sans-serif;
	margin-left: 20px;
	margin-top: 10px;
  display: inline-block;
  position: relative;
  padding: 0.5em 1.4em;
  text-decoration: none;
  background: #CF23C7;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 5px #2424EA;/*ボタン色より暗めに*/
  border-right: solid 5px #F1E700;/*ボタン色より暗めに*/
}

.btn-square-slant:before {  
  content: " ";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 6px 6px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFF;
}

.btn-square-slant:after {  
  content: " ";
  position: absolute;
  top: -1px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 0px 6px 6px 0px;
  border-style: solid;
  border-color: #FFF;
  border-bottom-color: transparent;
}

.btn-square-slant:active {
  /*ボタンを押したとき*/
  border:none;
  -webkit-transform: translate(6px,6px);
  transform: translate(6px,6px);
}

.btn-square-slant:active:after, .btn-square-slant:active:before {
  content: none;/*ボタンを押すと線が消える*/
}
.btn-square-slant2 {
	font-family: sans-serif;
  display: inline-block;
  position: relative;
  padding: 0.5em 1.4em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/
  border-right: solid 5px #5375bd;/*ボタン色より暗めに*/
}

.btn-square-slant2:before {  
  content: " ";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 6px 6px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFF;
}

.btn-square-slant2:after {  
  content: " ";
  position: absolute;
  top: -1px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 0px 6px 6px 0px;
  border-style: solid;
  border-color: #FFF;
  border-bottom-color: transparent;
}

.btn-square-slant2:active {
  /*ボタンを押したとき*/
  border:none;
  -webkit-transform: translate(6px,6px);
  transform: translate(6px,6px);
}

.btn-square-slant2:active:after, .btn-square-slant:active:before {
  content: none;/*ボタンを押すと線が消える*/
}
#aaaa{
	color: white;
	font-size: 8px;
}
.btn-square-slant2 {
	font-family: sans-serif;
	margin-top: 10px;
	margin-left: 50px;
  display: inline-block;
  position: relative;
  padding: 0.5em 1.4em;
  text-decoration: none;
  background: #668ad8;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 5px #36528c;/*ボタン色より暗めに*/
  border-right: solid 5px #5375bd;/*ボタン色より暗めに*/
}

.btn-square-slant2:before {  
  content: " ";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 6px 6px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFF;
}

.btn-square-slant2:after {  
  content: " ";
  position: absolute;
  top: -1px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 0px 6px 6px 0px;
  border-style: solid;
  border-color: #FFF;
  border-bottom-color: transparent;
}

.btn-square-slant2:active {
  /*ボタンを押したとき*/
  border:none;
  -webkit-transform: translate(6px,6px);
  transform: translate(6px,6px);
}

.btn-square-slant2:active:after, .btn-square-slant:active:before {
  content: none;/*ボタンを押すと線が消える*/
}
#aaaa{
	color: white;
	font-size: 8px;
}
.btn-square-slant3 {
	font-family: sans-serif;
	margin-left: 50px;
  display: inline-block;
  position: relative;
  padding: 0.5em 1.4em;
  text-decoration: none;
  background: #ADADAD;/*ボタン色*/
  color: #FFF;
  border-bottom: solid 5px #525252;/*ボタン色より暗めに*/
  border-right: solid 5px #797979;/*ボタン色より暗めに*/
}

.btn-square-slant3:before {  
  content: " ";
  position: absolute;
  bottom: -5px;
  left: -1px;
  width: 0;
  height: 0;
  border-width: 0 6px 6px 0px;
  border-style: solid;
  border-color: transparent;
  border-bottom-color: #FFF;
}

.btn-square-slant3:after {  
  content: " ";
  position: absolute;
  top: -1px;
  right: -5px;
  width: 0;
  height: 0;
  border-width: 0px 6px 6px 0px;
  border-style: solid;
  border-color: #FFF;
  border-bottom-color: transparent;
}

.btn-square-slant3:active {
  /*ボタンを押したとき*/
  border:none;
  -webkit-transform: translate(6px,6px);
  transform: translate(6px,6px);
}

.btn-square-slant3:active:after, .btn-square-slant:active:before {
  content: none;/*ボタンを押すと線が消える*/
}