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

body{
	margin: 0;
	font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif
}

/* 基本 */
article{
	margin: 0 auto;
	background-color: rgba(255,205,172,1.00);
	position: relative
}
h1{
	font-size: 22px;
}
h2{
	position: relative;
	color: white;
	font-size: 23px;
	background-color: rgba(254,76,70,1.00);
	margin: 0 -23px;
	padding: 18px 26px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}
h3{
	font-size: 20px;
	padding:30px 0px 0px 0px;
}
h4{
	font-size: 18px;
	background: linear-gradient(transparent 50%, yellow 50%);
	margin: 40px 0px 30px 0px
}
p{
	font-size: 15px;
	line-height: 33px
}

/* グリッド */
header{
	background-color: white;
	width: 100%;
	display: grid;
	grid-template-columns: 20px 1fr 40px 20px;
	grid-template-rows: 10px 1fr 10px;
	position: fixed;
	z-index: 10;
	box-shadow: 0 0px 10px rgba(0,0,0,0.4);
}
.head-logo{
	grid-column: 2;
	grid-row: 2;
}
.head-logo img{
	width: 45%;
	max-width: 200px;
	padding-top: 22px;
}
.head-botton{
	grid-column: 3;
	grid-row: 2;
	
	text-align: center;
	font-size: 12px;
}
.head-botton img{
	padding-bottom: 3px;
	vertical-align: bottom
}
a{
	text-decoration: none;
	color: rgba(80,80,80,1.00)
}
main{
	width: 100%;
	margin: 0 auto;
	max-width: 960px;
	
	display: grid;
	grid-template-columns:13px 1fr 13px;
	grid-template-rows: auto 70px auto 70px auto 70px auto 13px auto;
}
.top{
	grid-column: 1/4;
	grid-row: 1;
	width: 100%;
	height: 100%;
	
	display: grid;
	grid-template-columns: 26px 1fr 26px;
	grid-template-rows: 667px auto 80px auto 0px
}
.top-background{
	grid-column: 1/4;
	grid-row: 1;
	
	background-image: url("../images/back.png");
	background-position: center;
	background-size: cover;
	background-attachment: fixed
}
.top-img{
	grid-column: 2;
	grid-row: 2;
}
.top-img img{
	width: 90%;
	max-width: 500px;
	height: auto;
	
	position: absolute;
	top:545px;
	left: 50%;
	transform: translateX(-50%);
}
.top-p{
	grid-column: 1/4;
	grid-row: 4;
	
	display: grid;
	grid-template-columns: 13px 1fr 13px;
	
	color: black;
}
.top-word{
	grid-column: 2;
	
	background: white;
	padding: 30px 23px 20px 23px
}
.top-p img{
	grid-column: 2;

	width: 100%
}
.top-p p{
	border-top: dotted red;
	padding-top: 30px
}
.lineup{
	grid-column: 2;
	grid-row: 3;
	
	display: grid;
	grid-template-columns: 23px 1fr 23px;
	grid-template-rows: 0px auto 0px auto 24px auto 24px auto 0px;
	
	background: white;
}
.lineup img{
	width: 75%;
	max-width: 400px;
}
.lineup h4{
	text-align: center
}
.lineup-p{
	grid-column: 2;
	grid-row: 2;
}
.lineup-p p{
	border-top: dotted red;
	padding-top: 30px;
}
.line-regular{
	grid-column: 2;
	grid-row: 4;
	text-align: center
}
.lineup p{
	text-align: left;
	padding-bottom: 30px
}

.line-hot{
	grid-column: 2;
	grid-row: 6;
	text-align: center
}

.line-premium{
	grid-column: 2;
	grid-row: 8;
	text-align: center
}

.howtoeat{
	grid-column: 2;
	grid-row: 5;
	
	display: grid;
	grid-template-columns: 23px 1fr 23px;
	grid-template-rows: 0px auto 24px auto 24px auto 24px auto 30px;
	
	background: white;
}
.how-p{
	grid-column: 2;
	grid-row: 2
}
.how-p p{
	border-top: dotted red;
	padding: 30px 0px 0px 0px;
}
.how-rice{
	grid-column: 2;
	grid-row: 4
}
.how-rice p{
	padding-bottom: 40px
}
.how-bread{
	grid-column: 2;
	grid-row: 6
}
.how-bread p{
	padding-bottom: 40px
}
.how-noodle{
	grid-column: 2;
	grid-row: 8
}
.how-noodle p{
	padding-bottom: 20px
}
.howtoeat img{
	width: 100%
}
.product{
	grid-column: 2;
	grid-row: 7;
	
	display: grid;
	grid-template-columns: 23px 1fr 23px;
	grid-template-rows: 0px auto 24px auto 90px auto 90px auto 90px auto 70px;
	
	background: white;
	font-size: 18px
}
.product h3{
	padding: 10px 0px
}
.product p,h4{
	text-align: center
}
.product p{
	font-size: 18px;
}
.product a{
	display: inline-block;
  padding: 0.7em 1em;
  text-decoration: none;
  color: rgba(254,76,70,1.00);
  border: solid 2px rgba(254,76,70,1.00);
  border-radius: 3px;
  transition: .4s;
}
.product a:hover
{background: rgba(254,76,70,1.00);
  color: white;}
.pro-p{
	grid-column: 2;
	grid-row: 2;
}
.pro-regular{
	grid-column: 2;
	grid-row: 4;
	text-align: center;
	padding-top: 20px;

}
.pro-hot{
	grid-column: 2;
	grid-row: 6;
	text-align: center;
}
.pro-premium{
	grid-column: 2;
	grid-row: 8;
	text-align: center;
}
.pro-set{
	grid-column: 2;
	grid-row: 10;
	text-align: center;
}
.product img{
	width: 100%;
	max-width: 500px;
	
}
.botton{
	grid-column: 1/4;
	grid-row: 9;
	
	background: white
}
.back-botton{
	grid-column: 2;
	grid-row: 2;
	display: grid;
	grid-template-columns: 130px 1fr 130px;
	grid-template-rows: 12px auto 5px;
	text-align: center;
	background-color: rgba(254,76,70,1.00);
}
.back-botton a{
	grid-column: 2;
	grid-row: 2;
}
.back-botton img{
	width: 35px;
	vertical-align: bottom
}
.back-botton p{
	font-size: 17px;
	font-weight: bold;	color: white;
}
footer{
	display: grid;
	grid-template-columns: 20px 1fr 20px;
	grid-template-rows: 25px auto 0px;
	
	background: white;
}

.foot-logo{
	grid-column: 2;
	grid-row: 2;
	
	text-align: center;
}
.foot-logo img{
	width: 100px;
	vertical-align: bottom
}
.foot-logo p{
	text-align: center;
	font-size: 10px
}