@charset "UTF-8";
/*全体に適応させる*/
body {
  background-color: #1D1D1D;
  margin: 0px;
  font-family: 'Avenir', 'Helvetica Neue', 'Helvetica', 'Arial', 'Hiragino Sans', 'ヒラギノ角ゴシック', YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic'
}
h1 {
  color: #FFFFFF;
	position: absolute;
  z-index: 4;
	left:120px;
	top:450px;
}
h2 {
	margin-top: 100px;
	margin-left: 20px;
  font-size: 4rem;
  color: rgba(255, 255, 255, 0.6);
}
h3 {
  color: #F4F4F4;
}
p {
  color: #F4F4F4;
  padding: 20px 60px 20px 60px;
  line-height: 2.3;
  z-index: 5;
}
.sirotext {
  background-color: #F0F0F0;
  margin-left: 80px;
  padding: 20px 10px 10px 20px;
  z-index: 1;
}
.sirotext p {
  color: #000000;
  padding: 10px 10px 0px 10px;
}
/*ヘッダー*/
#fixed {
  position: fixed;
  top: 0;
  left: 0;
  margin: 0;
  width: 60%;
	max-width: 250px;
  height: 10px;
  background: black;
  opacity: 0.6;
  color: white;
  z-index: 10;
  border-bottom: solid 5px #ABA456;
}
a {
  color: white;
  text-decoration: none;
}
.header {
  display: flex;
}
#about0 {
  z-index: 20;
  padding: 7px;
  margin: 8px 10px 0px 100px;
  position: fixed;
  font-weight: bold;
}
#package0 {
  z-index: 20;
  padding: 7px;
  margin: 7px 10px 0px 180px;
  position: fixed;
  font-weight: bold;
}
#topping0 {
  z-index: 20;
  padding: 7px;
  margin: 7px 10px 0px 275px;
  position: fixed;
  font-weight: bold;
}
.nissin-white img {
  z-index: 20;
  width: 12%;
	max-width: 50px;
  height: auto;
  padding: 8px;
  position: fixed;
}
/*リンク*/
a:hover {
  color: white;
  text-decoration: none;
}
/*ヒーローエリア*/
.top img {
	position: relative;
  width: 100%;
	max-width: 500px;
  height: auto;
	margin-left: auto;
}
/*装飾　四角*/
.square1 {
  width: 75%;
  height: 10px;
  background-color: #9A2C2E;
  margin-bottom: 5px;
  z-index: 2;
  position: absolute;
  margin-top: 50px;
}
.square2 {
  width: 80%;
  height: 10px;
  background-color: #ABA456;
  z-index: 3;
  position: absolute;
  margin-top: 75px;
  margin-left: 30px;
}
.square3 {
  border-bottom: solid 5px #FFFFFF;
  border-left: solid 5px #FFFFFF;
  width: 100%;
	max-width: 310px;
  height: 570px;
  position: absolute;
  left: 100px;
  z-index: 2
}
/*intro前画像*/
.sikakukasane {
  position: relative;
}
#piramiddo img {
  position: absolute;
  width: 90%;
	max-width: 450px;
  height: auto;
  top: 20px;
}
.kazarisikaku {
  top: 300px;
  height: 200px;
  background: linear-gradient(to bottom right, #ABA456, #9A2C2E);
  margin: 100px 0px 150px 80px;
}
/*intro*/
.sirotext-line .square1{
	margin-top: 5px;
}
.sirotext-line  .square2{
	margin-top: 25px;
}
.yokomozi {
  transform: rotate(-90deg);
  position: absolute;
  padding-top: 10px;
  margin: 20px 20px 0px 0px;
  font-size: 1.9em;
}
.titlemozi {
  position: absolute;
  bottom: 140px;
  left: 80px;
  z-index: 4;
}
.titlegazou {
  position: relative;
  margin-right: auto;
  z-index: 1;
}
/*about*/
#cupnoodletoha {
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
#cupnoodletoha p {
  margin-right: auto;
  margin-left: auto;
  padding: 0px;
  text-align: center;
}
.line-migi {
  transform: rotate(6deg);
  height: 415px;
  border-right: solid 2px white;
  position: absolute;
  align: right;
  margin-left: 360px;
}
.line-hidari {
  transform: rotate(-6deg);
  height: 415px;
  border-left: solid 2px white;
  position: absolute;
  align: left;
  margin-left: 18px
}
.line-sita {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  border-bottom: dashed 2px white;
  height: 37px
}
#cupnoodletoha p {
  position: relative;
  top: 10px;
  width: 85%;
}
.yazirusi-ue {
  color: white;
  position: relative;
  bottom: 130px;
  left: 33px;
}
.yazirusi-sita {
  color: white;
  position: relative;
  bottom: 110px;
}
/*スライドショー*/
.roll img{
	margin-left: auto;
	margin-right:auto;
}
/*package*/
.kyatapira-mozi p{
	 padding: 20px 60px 20px 20px;
}
.kyatapira {
  border: solid 2px white;
   margin-left: auto;
	margin-right: auto;
}
.kyatapira-ue {
  position: relative;
  top: 45px;
  width: 800px; /* 領域の幅を指定 */
  height: 100px; /* 領域の高さを指定 */
  margin: 1em 0;
  margin-left: auto;
	margin-right: auto;
  margin-bottom: 0px;
}
.kyatapira-sita {
  position: relative;
  width: 800px; /* 領域の幅を指定 */
  height: 30px; /* 領域の高さを指定 */
  margin: 1em;
    margin-left: auto;
	margin-right: auto;
}
#package img {
  width: 50%;
	max-width: 350px;
  height: auto;
  margin-reft: auto;
	margin-right: auto;
  margin-bottom: 50px;
}
.sikaku {
  height: 10px;
  width: 10px;
  background-color: aqua
}
/*topping*/
#kayaku h2 {
  position: absolute;
  padding-left: 20px;
  margin-top: 0px;
  color: rgba(25, 25, 25, 0.6); /*半透明*/
}
.kayakutop img {
 position: absolute;
  padding: 30px 0px 0px 10px;
  width: 80%;
  height: auto;
	max-width: 450px;
	margin-left: auto;
	margin-right: auto;
}
.kayakutop .kazarisikaku {
  top: 200px;
  height: 200px;
	width: 70%;
  background: linear-gradient(to bottom right, #ABA456, #9A2C2E);
  margin: 100px 0px 60px 0px;
	
}
#kayaku {
  position: relative;
  background-color: #EBEBEB;
  margin-top: 20px;
  padding-top: 20px;
}
.kayakusell img {
  width: 20%;
  height: auto;
	max-width: 120px;
  padding: 20px 20px 20px 20px;
}
#kayaku .gu p {
  background-color: #000000;
  margin: 10px 0px 0px 0px;
  padding: 10px 20px 10px 20px;
  width: 60%;
}
#kayaku .namae p {
  color: black;
  border-top: dashed 4px black;
  border-right: dashed 4px black;
  padding: 0px 10px 0px 25px;
  margin: 10px 180px 0px 0px;
  font-size: 1.2em;
	width: 80%;
}
.gu { display: flex;
	height: 250px;
	 flex-direction:row-reverse;
}
.gu img {
  padding: 0px 10px 0px 10px;
  margin: auto;
}
.triangle {
  width: 0px;
  height: 0px;
  border-top:  solid 50px #EBEBEB;
  border-right:  solid 200px transparent;
  border-left: solid 200px transparent;
  margin-left: auto;
  margin-right: auto;
}
/*かやくの表*/
.ebi img {
  position: relative;
  height: auto;
  width: 80%;
	max-width: 300px;
  bottom: 200px;
	margin-left: 80px;
	z-index: 1;
}
.ebi{
		height: 0
}
.ebisetumei p {
position:relative;
  color: white; /*文字は白に*/
	z-index: 10;
}
h4 {
  color: white;
  text-align: center;
  line-height: 2.3;
  margin: 10px 0px 0px 0px;
}
.linemannaka {
  border-top: solid 5px white;
  width: 50%;
  margin-left: auto;
  margin-right: auto;
}
/*what's "3"*/
#3nohimitu h2 {
  background-color: darkolivegreen;
}
#3nohimitu p{
	position: absolute;
	z-index: 5;
}
.futa-migi img {
 
  width: 25%;
	max-width: 100px;
  height: auto;
	top:590px;
	opacity: 0.3;
	z-index: 2;
}
.futa-migi{
	height: 0px;
}

.futa-hidari img {
  position: relative;
  width: 25%;
	max-width: 100px;
  height: auto;
	top:95px;
	left:305px;
	opacity: 0.5;
	z-index: 2;
}
.futa-hidari{
	height: 0px;
}

ul {
  background-color: #1D1D1D;
  color: aliceblue;
  font-size: 1.3em;
  margin: 0px 40px 0px 40px;
}
/*オンラインショップ*/
#onlinestore {
  position: relative;
}
#onlinestore p {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  margin: 0;
  padding: 0;
  text-align: center
}
#onlinestore img {
  width: 80%;
  height: auto;
  padding: 0;
}
.linkline {
  pdisplay: block; /*前後に改行*/
  position: relative;
  background-color: white;
  height: 2px;
  width: 15%;
  margin-left: 60px;
  top: 180px;
	z-index: 5
}
#onlinestore .link {
  display: block; /*前後に改行*/
  position: relative;
  height: 40px;
  width: 55%;
  margin-left: auto;
  margin-right: auto;
  top: 200px;
}
#onlinestore p {
  font-size: 1.1rem;
}
.link p {
  width: 100%;
  font-size: 1.2rem;
}
.link_button {
  font-weight: bold;
  text-decoration: none; /*下線消す*/
  background: black; /*背景を水色に*/
  color: white; /*文字を白に*/
  padding: 5px 40px; /*内側の余白*/
  font-family: 'Avenir', 'Arial';
	z-index: 2
}
/*以下カーソルを当てたとき*/
.link_button:hover {
  background: silver; /*背景色をシルバーに*/
  text-decoration: none; /*下線を消す*/
}
#syouhinzyouhou {
  background-color: white;
  margin-left: auto;
  margin-right: auto;
}
#syouhinzyouhou img {
  width: 90%;
	max-width: 400px;
  margin-left: 20px;
	
}
/*最後*/
.saigo {
  text-align: center;
  background-color: #1D1D1D;
}
.nissin-black img {
  width: 40%;
  height: auto;
}
.cupnoodle-logo img {
  width: 40%;
  height: auto;
}
.aidasen{
	border-left:solid 2px white;
	height: 60px
}
.conteiner{
	display: flex;
	padding-top: 50px;
	padding-bottom: 30px;
}
.conteiner1{
	display: flex;
	padding-top:30px;
	padding-bottom: 30px;
}
.icon {
  padding: 0px 50px 0px 55px;

}
.icon-color{
	color:white;
}
h6{
	color:white;
}