@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;
	font-weight: 700;
	text-align: center;
	letter-spacing: 4px;
	margin-bottom: 1rem;
	position: relative;
}

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;
}

/*マージンボトム設定*/
.mb1r{
	margin-bottom: 1rem;
}

.mb2r{
	margin-bottom: 2rem;
}


/*section「top-area」====================================*/

h1{
	padding: 28px 0;
	background: #c7000b;
	color: #fff;
	font-size: 50px;
	text-align: center;
	line-height: 1.15;
    font-family: "ah-hakushu-fude-thick-script", sans-serif;
    font-weight: 300;
    font-style: normal;
}

h1 br{
	display: none;
}

.sec-top-area p{
	margin-top: 1rem;
}


/*section:sec-shiyou「のぼりの仕様について===============================*/
/*「のぼりの仕様について」の下のブロックすべてを囲むdiv*/
.kk-3div1{
	display: flex;
	justify-content: space-between;
	gap:10px;
	margin-bottom:2rem;
}

/*旗と女性のイラストが並んでいる部分*/
.kk-3img{
	background: #dbdfe0;
	display: flex;
	align-items: center;
	width: 50%;
}

.kk-3img img{
	width: 80%;
	margin: 0 auto;
}

/*「のぼりの仕様について」の左側、「生地」から「ヒートカット」を囲んでるdiv*/
.kk-3div2{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap:10px;
	width: 48%;
}

/*生地チチヒートカットと書いてる背景緑のところ*/
.midori{
	background: #cce198;
	padding: 5px 12px;
	margin-bottom: 7px;
	border-radius: 20px 0 0 20px;
	font-weight: bold;
}


/*生地チチヒートカットそれぞれ画像と説明を横並びに*/
.kk-3ul1 ul{
	display: flex;
	justify-content: space-between;
	gap:5px;
	padding: 0 7px;
}

.kk-3ul1 li ul li{
	width: 48%;
}

/*「下部名入れオーダー可能！」*/
.kabu-naire{
	background: #468d38;
	padding: 15px;
}

.kabu-naire p{
	color: #fff;
	font-size: 2.1rem;
	font-weight: 600;
	text-align: center;
	padding-bottom: 5px;
}

.kabu-naire > div{
	padding: 15px;
	background: #fff;
}

/*.section:naire 「名入れ無料」=========================================*/
.sec-naire strong{
	font-size: 2.2rem;
	color: #e60012;
	display: block;
	text-align: center;
	margin-bottom: 1rem;
}

/*「無料でご希望の名入れもOK」の直下のブロック*/
.kk-4ul1{
	display: flex;
	justify-content: space-between;
	gap:10px;
	align-items: stretch; 
	flex-wrap: wrap;
	margin: 0 0.7rem 2rem;
}

/*okの女の人と緑の吹き出しの縦並び*/
.kk-4ul1 ul{
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap:10px;
	text-align: left;
}

.kk-4li1{
	width: 30%;
}

/*緑の吹き出しだけ右に寄せる*/
.li2{
	margin-right: -28px;
}


.kk-4ul1 li{
	text-align: center;
}

/*okしてる女の人と緑の吹き出し*/
/*吹き出し*/
.li2 img{
	width: 85%;
	margin: 0 auto;
}

/*女の人*/
.ok img{
	width: 78%;
	margin: 0 auto;
}

/*真ん中の「ラーメン」旗*/
.kk-4li2{
	width: 30%;
}

.kk-4li2 img{
	width: 92%;
}

/*右の「ラーメン」旗*/

.kk-4li3 img{
	width: 55%;
}

.kk-4li3{
	background: #d0e9e5;
	padding: 14px;
	width: 30%;
}

/*書体について、カラーについてのブロック*/
/*全体を囲むブロック*/

.naire-fonts{
	padding: 20px;
	border: 2px solid #9fabb2;
	margin-bottom: 1.5rem;
}

.about-sc{
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap:1rem;
}

/*左側のブロック*/
.about-scul1{
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	gap:1rem;
	width: 45%;
	align-self: stretch;
}

/*左側ブロックの、listの中に入れ子になってるul*/
.about-scul1-2 li:first-child{
	background: #d9eeed;
	padding: 7px 5px;
	margin-bottom: 10px;
	font-weight: 600;
}

.about-scul1-2 li:last-child{
	padding-left: 1em;
}

/*右側のブロック*/
.about-scul2{
	width: 52%;
}
/*【記入例】*/
.about-scul2 li:first-child{
	font-weight: bold;
	font-size: 1.2rem;
	padding-bottom: 5px;
}

/*フォント例*/

.fonts-ul{
	display: flex;
	flex-direction: column;
	gap:20px;
	margin-top: 2rem;
}

.fonts-ul2{
	display: flex;
	gap:24px;
} 

.fonts-ul2 li:nth-child(2){
	flex-grow: 1;
	padding-bottom: 12px;
}

.dotted{
	border-bottom: 2px dotted #c3c4c4;
}

/*「本体の柄が変わっても、名入れの内容が同一の場合は枚数の総量で計算いたします」*/
.sec-naire p{
	margin-bottom: 1.5rem;
	font-size: 1.2rem;
	text-align: center;
}

/*「名入れ例」===*/
/*h3*/
.h3-naire{
	color: #e60012;
	text-align: center;
	font-size: 2rem;
	font-weight: 600;
	border: 2px solid #e60012;
	padding: 8px;
}

/*h3見出し下の灰色ブロック*/
.naire-rei-block{
	padding: 20px;
	background: #d3dde8;
}

.naire-rei-block ul{
	display: flex;
	gap:10px;
	justify-content: space-around;
}

.naire-rei-block li{
	width: 14%;
}


/*section:sec-order「カンタンご注文方法」==========================================*/
/*注文方法の流れの全体を囲むdiv*/
.kk-5block{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap:12px 7px;
	align-items: center;
	margin-bottom: 2rem;
}

/*女性の画像*/
.josei{
	width: 30%;
	text-align: center;
}

.josei img{
	width: 60%;
	padding: 8px;
}

/*注文方法について説明してる四角い部分*/
.kk-5block ul{
	width: 30%;
	border: 2px #7d7d7d solid;
	height: 200px;
}

/*背景緑色の部分*/
.kk-5block ul li:first-child{
	background: #009944;
	padding: 12px 10px;;
	color: #fff;
	font-size: 20px;
	font-weight: 600;
	text-align: center;
}

/*注文方法についての説明書いてる部分*/
.kk-5block ul li:last-child{
	padding: 10px;
	font-size: 1.2rem;
	line-height: 1.4;
}

/*やじるし*/
.yajirushi, .yajirushi2{
	width: 2%;
}

.yajirushi2{
	display: none;
}

/*「販売サイト」*/
.kk-5block a{
	color: #4682B4;
	border-bottom: 1px solid #4682B4;
}

/*fax番号*/
.fax{
	text-align: center;
	font-size: 2.3rem;
	font-weight: 700;
	margin-bottom: 2rem;
}

/*kk-6のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
.kei-5ul1{
	display: flex;
	justify-content: center;
	gap:10px;
	align-items: center;
	margin-bottom: 1rem;
}

.kei-5ul1 li:first-child{
	width: 13%;
}

/*吹き出しのところ*/
.speechBubble {
  position: relative;
  display: inline-block;
  margin-left: 16px;
  padding: 16px;
  border-radius: 12px;
  background-color: #d7ece3;
  text-align: left;
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
  width: 83%;
}

.speechBubble::after {
  content: "";
  position: absolute;
  top: 43%;
  left: 0;
  border-style: solid;
  border-width: 7.5px 16px 7.5px 0;
  border-color: transparent #d7ece3 transparent transparent;
  translate: -100% -50%;
  transform: skew(0, 2deg);
  transform-origin: right;
}

/*赤文字*/
.red{
	font-size: 2rem;
	font-weight: 600;
	color: #e60012;
}

/*「黄色い項目」のリスト*/
.kei-5ul2{
	display: flex;
	flex-wrap: wrap;
	gap:14px 10px;
	justify-content: space-around;
}

.yellow-li{
  width: 30%;
  text-align: center;
  text-decoration: none;
  color: #e60012;
  font-size: 1.4rem;
  font-weight: 600;
  border-radius: 12px;
  background-color: #fff100;
  box-shadow: 5px 5px 0px #bbae00;
  transition: .2s;
}

.yellow-li:hover{
	box-shadow: unset;
  transform: translate(4px,4px);
}

.yellow-a{
	display: block;
	padding: 16px 10px;
}


/*kk-7「価格表」======================================*/
/*.wrapよりもっと左右に余白*/
.wrap-2{
	margin: 0 16px;
}

/*table上の「仕様：W600×H1800mm/ポリエステル製/ヒートカット」*/
.above-table div{
	display: flex;
	justify-content: space-between;
	font-size: 1.2rem;
	margin-bottom: 0.5rem;
	padding: 8px;
	background: #d9e8ad;
}

/*table*/
.sec-price table{
	width: 100%;
	border: 2px solid;
	margin-bottom: 1rem;
}

.sec-price th, .sec-price td{
	border: 1px solid;
	padding: 7px 8px;;
}

.sec-price th{
	font-size: 1.3rem;
	font-weight: 600;
	text-align: center;
}

.sec-price td{
	font-size: 1.2rem;
	text-align: center
}

/*価格表下の文字*/
.bottom-table{
	text-align: right;
	font-size: 1.2rem;
	font-weight: bold;
	margin-bottom: 2.5rem;
}

/*section:sec-choice 「のぼりの効果的な商品の選び方について」
========================================================*/
/*h2その2*/
.h2-choice{
	background: #00a73c;
	color: #fff;
	border-width: 0 18px;
	border-color: #c4d700;
	padding:8px 5px;
	text-shadow: 3px 3px 2px #00682a;
}

.h2-choice:before{
	display: none;
}

/*背景黄緑版のh3*/
.h3-kimidori{
	background: #d9e367;
	padding: 8px;
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	gap:10px;
	line-height: 1;
	align-items: center;
	margin-bottom: 1rem;
}

.h3-kimidori:before{
	content: "";
	width: 21px;
	height: 21px;
	background: #000;
}

/*背景赤版のh3*/
.h3-red{
	color: #fff;
	background: #c8161d;
	padding: 8px;
	font-size: 1.5rem;
	font-weight: 600;
	display: flex;
	gap:10px;
	line-height: 1;
	align-items: center;
	margin-bottom: 1rem;
}

.h3-red:before{
	content: "";
	width: 21px;
	height: 21px;
	background: #fff;
}

/*設置例ブロック*/
.sec-choice-block{
	margin-bottom: 2rem;
}

/*設置例画像*/
.sec-choice-block img{
	padding:0 10px;
}

.modoru{
	margin-top: 4rem;
}

@media screen and (max-width: 921px){
/*kk-6のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
.kk-6 ul li{
	background: #e50012;
	width: 30%;
	border-radius: 6px;
	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
}
}


@media screen and (max-width: 900px){
/*.kk-5(カンタンご注文方法）==========================================*/
/*女性の画像*/
.josei img{
	width: 70%;
	padding: 8px;
}
	
/*背景緑色の部分*/
.kk-5block ul li:first-child{
	padding: 10px 7px;
	font-size: 18px;
}
	
/*注文方法について説明してる四角い部分*/
.kk-5block ul{
	width: 30%;
	border: 2px #7d7d7d solid;
	height: 220px;
}
}

@media screen and (max-width: 805px){
	
/*「下部名入れオーダー可能！」*/

.kabu-naire p{
	font-size: 1.8rem;
}
/*.kk-5(カンタンご注文方法）==========================================*/
/*女性の画像*/
.josei{
	width: 30%;
	text-align: center;
}	

.josei img{
	width: 80%;
	padding: 5px;
}
	
/*背景緑色の部分*/
.kk-5block ul li:first-child{
	padding: 10px 5px;
	font-size:1rem;
}
	
/*注文方法について説明してる四角い部分*/
.kek-5block ul{
	width: 30%;
	border: 2px #7d7d7d solid;
	height: 220px;
}
	
/*kk-6のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
.kk-6 ul li{
	background: #e50012;
	width: 31%;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}
}

@media screen and (max-width: 767px){
/*メイン画像エリア*/
	h1{
		font-size: 44px;
	}
	
	h1 br{
		display: block;
	}
	
	.kk-1 p{
		font-size: 28px;
		line-height: 0.8;
	}
	
}


@media screen and (max-width: 700px){
/*.kk-5(カンタンご注文方法）==========================================*/
/*注文方法の流れの全体を囲むdiv*/


/*女性の画像*/
.josei{
	width: 44%;
	text-align: center;
}

.josei img{
	width: 70%;
}
	
/*kk-3==========================================*/

/*「のぼりの仕様について」の下のブロックすべてを囲むdiv*/
.kk-3div1{
	gap:16px;
	flex-direction: column;
}

/*旗と女性のイラストが並んでいる部分*/
.kk-3img{
	width: 90%;
	margin: 0 auto;
	padding: 10px;
}

.kk-3img img{
	width: 80%;
}

/*「のぼりの仕様について」の左側、「生地」から「ヒートカット」を囲んでるdiv*/
.kk-3div2{
	gap:16px;
	width: 100%;
}

/*生地チチヒートカットと書いてる背景緑のところ*/
.midori{
	padding: 5px 12px;
	margin-bottom: 7px;
	border-radius: 20px 0 0 20px;
}

/*.kk-4「名入れもできます」============================*/
/*書体について、カラーについてのブロック*/
/*全体を囲むブロック*/
.about-sc{
	flex-direction: column;
}

/*左側のブロック*/
.about-scul1{
	width: 100%;
}

/*右側のブロック*/
.about-scul2{
	width: 100%;
}
	
/*フォント見本一覧*/
.fonts-ul2{
	flex-direction: column;
	gap:12px;
}

.fonts-ul2 li:first-child{
	width:30%;
}

	
/*注文方法について説明してる四角い部分*/
.kk-5block ul{
	width: 44%;
	border: 2px #7d7d7d solid;
	height: 210px;
}

/*注文方法についての説明書いてる部分*/
.kk-5block ul li:last-child{
	padding: 10px;
	font-size: 1.1rem;
}
	
/*やじるし*/
.yajirushi{
	width: 3%;
}
	
.yajirushi2{
	display: block;
	width: 3%;
	}
	
/*のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
/*指さしてる女性*/	
.kei-5ul1 li:first-child{
	width: 18%;
}
/*吹き出しのところ*/
.speechBubble {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.5;
  color: #000000;
  width: 83%;
}
	
.red{
	font-size: 1.3em;
}

/*「黄色い項目」のリスト*/
.kei-5ul2{
	justify-content: space-between;
}

.yellow-li{
  width: 48%;
  font-size: 1.2rem;
}
	
	.yellow-a{
		padding:14px 6px;
	}
}

@media screen and (max-width: 688px){
	
/*「下部名入れオーダー可能！」*/

.kabu-naire p{
	font-size: 1.5rem;
}
	
/*kk-6のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
.kk-6 ul li{
	background: #e50012;
	width: 48%;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}
	
.kk-6 ul a{
	display: block;
	padding: 15px 5px;
}

.sonota{
	gap:16px;
	justify-content: space-between;
}

/*kk-7価格表=============================*/
.above-table div{
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	margin-bottom: 0.5rem;
	padding-left: 0;
}
	
.above-table2 div{
	display: flex;
	justify-content: space-between;
	font-size: 1rem;
	padding-left: 0;
}
	
.atp-7{
	padding-left: 0;
}
	
}

@media screen and (max-width: 580px){
/*メイン画像エリア*/
	h1{
		font-size: 40px;
	}
	
	.kk-1 p{
		font-size: 24px;
	}
	
	.anzen-img{
		bottom: 24px;
	}
/*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;
}
	
	h3{
		font-size:1.9rem;
	}
	
/*「下部名入れオーダー可能！」*/

.kabu-naire p{
	font-size: 1.3rem;
}
	
/*「名入れ例」*/
.naire-rei-block ul{
	display: flex;
	flex-wrap: wrap;
	gap:20px 14px;
	justify-content: center;
}

.naire-rei-block li{
	width: 30%;
}

}
@media screen and (max-width: 550px){
	
/*.kk-4「名入れ無料」の部分=========================================*/
/*「無料でご希望の名入れもOK」*/
	.kk-4 strong{
		font-size: 1.9rem;
	}
	
	.kk-4ul1{
		justify-content: center;
		gap:1rem;
	}
	
	.kk-4li1{
	width: 47%;
}

.kk-4li2{
	width: 47%;
}

.kk-4li3{
	width: 50%;
}
	
/*「のぼりの効果的な商品の選び方について」*/
/*背景黄緑版のh3*/
.h3-kimidori{
	background: #d9e367;
	padding: 8px;
	font-size: 1.3rem;
	font-weight: 600;
	display: flex;
	gap:10px;
	line-height: 1;
	align-items: center;
	margin-bottom: 1rem;
}

.h3-kimidori:before{
	content: "";
	width: 21px;
	height: 21px;
	background: #000;
}

/*背景赤版のh3*/
.h3-red{
	color: #fff;
	background: #c8161d;
	padding: 8px;
	font-size: 1.3rem;
	font-weight: 600;
	display: flex;
	gap:10px;
	line-height: 1;
	align-items: center;
	margin-bottom: 1rem;
}

.h3-red:before{
	content: "";
	width: 21px;
	height: 21px;
	background: #fff;
}


/*kk-6のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
.kk-6 p{
	font-size: 1.2rem;
}
	
/*kk-7価格表=============================*/
.wrap-2{
	margin: 0 0.8rem;
}	

.above-table div{
	display: block;
}
	
.atp-3{
		text-align: right;
}
	
.above-table2 div{
	display: block;
}
	
.atp-6{
	text-align: right;
}
	
}


@media screen and (max-width: 499px){
/*メイン画像エリア*/
	h1{
		font-size: 36px;
	}
	
	.kk-1 p{
		font-size: 20px;
		line-height: 1;
	}
	
/*kei-4「カンタンご注文方法」のところ================*/
/*女性の画像*/
.josei{
	width: 100%;
}

.josei img{
	width: 50%;
}

/*注文方法について説明してる四角い部分*/
.kk-5block ul{
	width: 100%;
	height: 150px;
}

/*やじるし*/
.yajirushi, .yajirushi2{
	margin: 0 auto;
	transform:rotate(90deg);
}
	
/*fax番号*/
.fax{
	font-size: 1.6rem;
}
	
/*kk-6のぼり旗デザイン一覧===============================*/
/*「ご覧になりたいカテゴリーをクリックしてください」*/
.kk-6 ul li{
	background: #e50012;
	width: 47.5%;
	border-radius: 6px;
	font-size: 1rem;
	font-weight: 600;
	color: #fff;
}
	
.kk-6 ul a{
	display: block;
	padding: 15px 5px;
}
	
.kk-6 ul:not(.sonota){
	padding:24px 8px;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap:16px;
	text-align: center;
	background: #fff000;
	border-radius: 0 0 10px 10px;
}
	
.sonota{
	padding:24px 8px;
}

	
}

@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;
}
/*「無料でご希望の名入れもOK」*/
	.kk-4 strong{
		font-size: 1.5rem;
	}
	
	h3{
		font-size: 1.5rem;
	}
	
/*背景黄緑版のh3*/
.h3-kimidori{
	padding: 8px;
	font-size: 1.2rem;
	gap:8px;
}

.h3-kimidori:before{
	content: "";
	width: 18px;
	height: 18px;
	background: #000;
}

/*背景赤版のh3*/
.h3-red{
	padding: 8px;
	font-size: 1.2rem;
	gap:8px;
}

.h3-red:before{
	width: 18px;
	height: 18px;
}
}

@media screen and (max-width: 420px){
/*メイン画像エリア*/
	h1{
		font-size: 32px;
	}
	
	.kk-1 p{
		font-size: 18px;
	}
	
	.kk1pspan2{
		margin-right: 10%;
	}
	
	.anzen-img{
		left: 3%;
		bottom: 28px;
	}
}