@charset "UTF-8";


html {
	overflow-x: hidden;
}

body {
  background: url(img/backgrounds.jpg)no-repeat;
  background-size: auto;
  background-color: #ffffff;
   max-width: 390px;
    font-family: "Kiwi Maru", serif;
    font-weight: 300;
    font-style: normal;
    font-size: 16px;
}

#container {
  max-width: auto;
  margin: 0 auto;
  height: fit-content;
  text-align: left;
  position: relative;
}
html,body{
  margin: 0px;
  padding: 0px;
}

header{
  max-width: 390px;
  height: 90px;
  background: url(img/header.svg) no-repeat;
  box-sizing: border-box; /* padding分を含んで幅を100%にするため */
  position: fixed; /* ウィンドウを基準に画面に固定 */
  top: 0; /* 上下の固定位置を上から0pxにする */
  left: 0; /* 左右の固定位置を左から0pxにする */
  display: flex; /* 中の要素を横並びにする */
  align-items: center; /* 中の要素を上下中央に並べる */
  z-index: 999;
}
/* あとでメニューボタン入れよう！ */
header h1{
  margin: 0;

}
header h1 img{
  padding: 0 300px;
  display: flex; /* 中の要素を横並びにする */
}

.box1{
 max-width: 390px;
  margin: 0 ;
}

.title-rogo{
  padding: 100px 50px 0px 50px;
}



/* クラッカーの具材！ */
ul {
  min-height: fit-content;
  padding: 0 20 0 20;
  overflow-x: auto;       /* 横幅が画面からはみ出たら横スクロールさせる */
  white-space: nowrap;
}
ul li {
  display: inline-block;  /* 要素を横並びにする */
  width: 390px;
  padding: 50px;
}
ul li p {
  text-align: center;
}

.box2{
  max-width: 390px;

}
.title-rogo2 img{
  position: relative;
  left: 50px;
  top: 280px;

}

.intro{
  position: relative;
  top: 330px;
  right: 50px;
  text-align: center;
  margin-bottom: 30px;
}

.box3{
  min-height: fit-content;
}

.title-rogo3{
  position: relative;
  top: 400px;
  left: 30px;
}

.text{
  line-height: 2em;
  text-align: center;
  margin-bottom: 50px;
  position: relative;
  top: 360px;
}

.back01{
  width: 300px;
  height: 300px;
  position: relative;
  top: 300px;
}
.text-asa{
  text-align: center;
  margin-top: 85px;
  position: absolute;
  left: 155px;
}
.cracker-asa{
  position: relative;
  top: 300px;
}
.cracker-1{
  display: flex;
  justify-content: space-around;
  position: relative;
  left: 20px;
  bottom: 20px;
}
.cracker-1 h{
  position: relative;
  right: 10px;
}
.cracker-2{
  position: relative;
  bottom: 20px;
  left: 30px;
}
.cracker-2 h{
  position: relative;
  right: 10px;
  bottom: 30px;
}
.cracker-3{
  position: relative;
  bottom: 20px;
  left: 30px;
}
.cracker-3 h{
  position: relative;
left: 10px;
  bottom: 10px;
}

.noon{
  position: relative;
  top: 250px;
}
.back02{
  width: 390px;
  height: 300px;
  position: relative;
}
.text-hiru{
  line-height: 1.5em;
  text-align: center;
  position: absolute;
  left: 30px;
  top: 60px;

}

.cracker-hiru{
max-width: 380px;
min-height: fit-content;
}

.cracker-4{
  display: flex;
  position: relative;
  bottom: 30px;
  align-items: flex-start;
}
.cracker-4 h{
  position: relative;
  top: 35px;
  right: 20px;
}
.cracker-5{
  position: relative;
  left: 20px;
}

.cracker-5 h{
  position: relative;
  bottom: 20px;
  right: 5px;
}
.cracker-6 img{
  position: relative;
  top: 30px;
  left: 20px;
}
.cracker-6 h{
  position: relative;
  left: 20px;
}

.evening{
  position: relative;
  top: 50px;
}

.back03{
  width: 390px;
  height: 390px;
  position: relative;
  top: 230px;
}
.text-yoru{
  line-height: 2em;
  text-align: center;
  margin-top: 100px;
  position: absolute;
  left: 180px;
 top: 200px;
}
.cracker-yoru{
  position: relative;
  top: 150px;
  max-width: 380px;
  }
  
  .cracker-7{
    display: flex;
    align-items: flex-start;
    position: relative;
    left: 20px;
    bottom: 10px;
  }
  .cracker-7 h{
    position: absolute;
    top: 25px;
    right: 30px;
  }
  .cracker-8{
    display: flex;
    align-items: flex-start;
    position: relative;
    left: 20px;
    top: 20px;
  }
  
  .cracker-8 h{
    position: relative;
    bottom: 10px;
    right: 5px;
  }
  .cracker-9{
    display: flex;
    align-items: flex-start;
    position: relative;
  top: 20px;
    left: 20px;
  }
  .cracker-9 h{
    position: relative;
    top: 10px;
    right: 10px;
  }

button{
  position: relative;
  left: 130px;
  top: 250px;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;

  font-family: "Kiwi Maru", serif;
  font-size: 16px;
  line-height: 24px;
  margin: 1em 0; /* 前後の隙間 */
  padding: 0.6em 1em; /* 塗りの余白 */
  font-size: 1em; /* フォントサイズ */
  background-color: #fa5c23; /* 背景色 */
  color: #FFF; /* テキストカラー */
  cursor: pointer; /* カーソルを指マークに */
  border-radius: 20px; /* 角の丸み */
  border: 0; /* 枠線を消す */
  transition: 0.3s; /* ホバーの変化を滑らかに */
}

/* ホバー時（カーソルをのせた時）の見た目 */
button:hover {
  background-color: #ffdc5f; /* 背景色 */
}

.box4{
  height: 200px;
}
.topic img{
  position: relative;
  top: 350px;
  left: 20px;
}
.topic h {
  position: relative;
  bottom: 50px;
}

.rogo-end{
  position: relative;
  top: 330px;
  left: 110px;
}
.urls{
position: relative;
top: 330px;
left: 130px;

}
.sns-text {
  position: relative;
  left: 300px;
}
.x {
position: relative;
left: 20px;
}
.insta{
  position: relative;
  left: 60px;
  bottom: 28px;
}

.copy h1{
  font-size: 15px;
  position: relative;
  top: 380px;
  left: 130px;

}
.copy p{
  font-size: 10px;
  position: relative;
  top: 380px;
  left: 50px;

}