@charset "utf-8";
/* CSS Document */
/*　中華のぼり＿ラーメン　*/

main{
	padding-top: 1rem;
}

section{
	margin-bottom: 2.3rem;
}


h2{
	background: #e60012;
	padding: 11px 0;
	font-size: 2.3rem;
	color: #fff;
	text-align: center;
	letter-spacing: 4px;
	margin-bottom: 1rem;
	position: relative;
	font-weight: 700;
}

h2:not(.h2-naire){
	font-family: "ah-hakushu-fude-thick-script", sans-serif;
    font-style: normal;
}

h2:before{
	content: "";
    width: 0;
    height: 100%;
    border-style: solid;
    border-top: 32px solid transparent;
    border-bottom: 32px solid transparent;
    border-left: 64px solid #000000;
    border-right: 0;
	position: absolute;
	top: 0;
	left: 0;
}

h2:after{
	content: "";
    width: 150px;
    height: 50px;
    background-image: url('img/category-8.png');
    background-position: center;
    background-size: contain;
	position: absolute;
	bottom: -7px;
	left: 8%;
	background-repeat: no-repeat;
}

/*h1エリア
======================================*/
h1{
	padding: 16px 4%;
	background: #c7000b;
	color: #fff;
	font-size: 50px;
	display: flex;
	gap:15%;
	align-items: center;
	line-height: 1.15;
    font-family: "ah-hakushu-fude-thick-script", sans-serif;
    font-weight: 300;
    font-style: normal;
}

h1 span{
	font-size: 1.5rem;
	border-top: 1px solid #fff;
	border-bottom: 1px solid #fff;
	padding: 8px;
	text-align: center;
}

/*メイン画像*/
.main_img{
	margin-bottom: 1rem;
}

/*section:.sec-nairerei 「名入れ例」
============================================*/
/*h2*/
.h2-naire{
	border: 2px solid #e60012;
	color: #e60012;
	background: #fff;
	margin-bottom: 0;
}

.h2-naire:before, .h2-naire:after{
	display: none;
}

/*背景グレーでのぼり並んでいる部分*/
.back-gray{
	padding: 20px;
	background: #d3dde8;
}

.sec-nairerei ul{
	display: flex;
	gap:10px;
	justify-content: space-around;
}

.sec-nairerei li{
	width: 14%;
}

/*のぼり一覧
===================================================*/
/*サイズ書いているところ*/
.size{
	margin:-10px 0 1rem 0;
	text-align: right;
}

/*ｈ2下の説明*/
	.exp{
		margin-bottom: 1.5rem;
	}

/*画像６枚の列と1枚の列*/
.nobori-ul6, .nobori-ul1{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap:20px 5%;
	text-align: center;
	margin:0 10px;
}

/*画像２枚のみの列の調整*/
.nobori-ul2{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap:20px 5%;
	text-align: center;
	margin:0 10px;
}

.nobori-ul2:after{
	content: "";
    display: block;
    width: 66%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

/*画像３枚のみの列の調整*/
.nobori-ul3{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap:20px 5%;
	text-align: center;
	margin:0 10px;
}

.nobori-ul3:after{
	content: "";
    display: block;
    width: 47%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

/*画像4枚のみの列の調整*/
.nobori-ul4{
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	justify-content: space-between;
	gap:25px 5%;
	text-align: center;
	margin:0 10px;
}

.nobori-ul4:after{
	content: "";
    display: block;
    width: 29.5%;  /* .boxに指定したwidthと同じ幅を指定する */
    height: 0;
}

/*全のぼり一覧ul共通*/
.nobori-ul{
	margin-bottom: 4rem;
}

/*のぼり一覧の全のぼりのwidth設定*/
.nobori-ul > li{
	width: 12%;
}

/*規格描いてる四角部分*/
/*四角全体*/
.kikaku{
	margin:12px 0px 0 10px;
	border: 1px solid;
}

/*「商品番号」*/
.bangou{
	border-bottom: 1px solid;
	display: block;
	padding: 3px;
}

/*「VS…」*/
.number{
	display: block;
	padding: 3px;
}

/*ご注文はこちらボタン*/
.order-btn-block{
	text-align: center;
	margin-bottom: 3rem;
}

.order-btn-block span{
	font-size: 1rem;
	font-weight: 500;
}


.btn,
a.btn,
button.btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.1;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
  text-align: center;
  vertical-align: middle;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-border-shadow {
  padding: calc(1.5rem - 12px) 3rem 1.5rem;
  background: #fff;
	color: #fff;
}

a.btn-border-shadow:before {
  position: absolute;
  top: -6px;
  left: -6px;
  width: 100%;
  height: 100%;
  content: "";
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
  border: 2px solid #000;
  border-radius: 0.5rem;
}

a.btn-border-shadow:hover {
  padding: calc(1.5rem - 6px) 3rem;
  opacity: 10;
}

a.btn-border-shadow:hover:before {
  top: 0;
  left: 0;
}

a.btn-border-shadow--color {
  border-radius: 0;
  background-color: darkorange;
}

a.btn-2{
	background-color: #FE5D27;
}

a.btn-border-shadow--color:before {
  border-radius: 0;
}

/*「戻る」ボタン*/
.modoru{
	margin-top: 5rem;
}

@media screen and (max-width: 805px){
h2:after{
	content: "";
    width: 120px;
    height: 50px;
    background-image: url('img/category-8.png');
    background-position: center;
    background-size: contain;
	position: absolute;
	bottom: -10px;
	left: 10%;
	background-repeat: no-repeat;
}
}

@media screen and (max-width: 760px){
/*h1エリア
======================================*/
h1{
	padding: 16px 4%;
	font-size: 46px;
	gap:7%;
	line-height: 1.15;
 
}

h1 span{
	font-size: 1.2rem;
	padding: 8px;
}

	
/*のぼり一覧
==========================================*/
/*のぼり一覧の全のぼりのwidth設定*/
.nobori-ul > li{
	width: 14%;
}
	
/*横同士の余白変える*/
.nobori-ul2, .nobori-ul4, .nobori-ul3{
	gap:20px 3%;
}

/*ulのそれぞれの最後の余白調整*/
.nobori-ul2:after{
    width: 60%;  /* .boxに指定したwidthと同じ幅を指定する */
}

.nobori-ul3:after{
    width: 48%;  /* .boxに指定したwidthと同じ幅を指定する */
}

/*規格描いてる四角部分*/
/*四角全体*/
.kikaku{
	margin:10px 0px 0 2px;
	border: 1px solid;
}	
}

@media screen and (max-width: 650px){
	h1{
	font-size: 2.5rem;
	letter-spacing: 4px;
}

	
/*h2*/
	h2{
	font-size: 2rem;
	color: #fff;
	font-weight: 700;
	text-align: center;
	letter-spacing: initial;
}

h2:before{
    height: 100%;
    border-top: 29px solid transparent;
    border-bottom: 29px solid transparent;
    border-left: 46px solid #000000;
}
	
/*目次ボタン*/
	.kb-index ul li{
	width: 48%;
	color: #009844;
	font-weight: 600;
	font-size: 1.2rem;
	border: 2.5px solid #009844;
	background: #fff;
	text-align: center;
	border-radius: 10px;
	
}


/*他のジャンルののぼりへとぶボタン*/
.nobori-others-btn{
	font-size: 1.8rem;
}

}

@media screen and (max-width: 580px){
	
	h1{
	font-size: 2.2rem;
	letter-spacing: 3px;
}

/*「名入れ例」*/
.sec-nairerei ul{
	display: flex;
	flex-wrap:wrap;
	gap:20px 14px;
	justify-content: center;
}

.sec-nairerei li{
	width: 30%;
}

/*のぼり一覧の全のぼりのwidth設定*/
.nobori-ul > li{
	width: 30%;
}
	
/*横同士の余白変える*/
.nobori-ul2, .nobori-ul4, .nobori-ul5{
	gap:20px 5%;
}
	
/*のぼり一覧
=================*/
.nobori-ul2:after{
  width: 30%;  /* .boxに指定したwidthと同じ幅を指定する */
  
}
	
}

@media screen and (max-width: 520px){
/*h1エリア
======================================*/
h1{
	flex-direction: column;
	padding: 12px 4%;
	font-size: 40px;
	gap:5%;
	line-height: 1.15;
 
}

h1 span{
	font-size: 1.1rem;
	padding: 8px;
	margin-bottom: 10px;
}
	
/*h2の「category」部分*/
h2:after{
	content: "";
    width: 100px;
    height: 50px;
	bottom: -13px;
	left: 12%;
}
}

@media screen and (max-width: 430px){
	
h2{
	font-size: 1.6rem;
	color: #fff;
	font-weight: 700;
	text-align: center;
	letter-spacing: initial;
}

h2:before{
    height: 100%;
    border-top: 25.9px solid transparent;
    border-bottom: 26px solid transparent;
    border-left: 46px solid #000000;
}

}