@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);

/* reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;}
ul{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
caption,th{text-align:left;}
q:before,q:after{content:'';}
object,embed{vertical-align:top;}
legend{display:none;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
img,abbr,acronym,fieldset{border:0;}

body{
	font: 14px/1.9 'Noto Sans JP', Arial, Verdana, 游ゴシック, YuGothic,'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN', メイリオ, Meiryo,sans-serif;
	font-weight: 300;
	-webkit-text-size-adjust:100%;
	overflow-x: hidden;
	color: #000;
	background: #fff;
}
/* ------------------------------------- */
/*	 リンク
/* ------------------------------------- */
a{
	color: #1f286f;
	text-decoration: none;
}

a:hover, .active{
  text-decoration: underline;
}

a:active, a:focus,input:active, input:focus{outline:0;}


/* ------------------------------------- */
/* 画像
/* ------------------------------------- */
img{vertical-align:middle;border-style:none;border:0;-webkit-backface-visibility: hidden;}
a:hover img{opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha( opacity=80 )";}
.resizeimage img {width: 100%;}

img.centered,
img.alignright,
img.alignleft,
img.alignnone {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
clear:both;
}
.alignright {
  float: none;
}
.alignleft {
  float: none;
}
.aligncenter {
	clear: both;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
@media screen and (min-width: 992px) {
img.centered {
    display: block;
    margin-left: auto;
    margin-right: auto;
clear:none;
}
img.alignright {
    margin-left: 20px;
    margin-right: 0;
    margin-bottom: 2px;
    display: inline;
clear:none;
}
img.alignleft {
    margin-left: 0;
    margin-right: 20px;
    margin-bottom: 2px;
    display: inline;
clear:none;
}
img.alignnone {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 10px;
clear:none;
}
.alignright {
  float: right;
}
.alignleft {
  float: left;
}
.aligncenter {
	clear: both;
	display: block;
    margin-left: auto;
    margin-right: auto;
}
}
/* ------------------------------------- */
/* 回りこみ解除
/* ------------------------------------- */
.clear {
clear:both;
}
html {/*スクロールバーを常に表示*/
overflow-y:scroll;
}
a img,
ol li img,
li img,
ul li img {/*上揃え*/
vertical-align: top;
text-align:center;
border-style:none;
}
img {
  vertical-align: middle;
  border: none;
    max-width: 100%;
    height: auto;
}

li,ol,ul{/*リストマークを消す*/
margin: 0;
padding: 0;
list-style-type: none;
}
ul ul{
margin-left: 1em;
}
/* ---------------------------------------------------------------------------------------------

　 共通

--------------------------------------------------------------------------------------------- */
section{clear:both;}

section h2{
	font-size: 22px;
	font-weight:normal;
	text-align: center;
}

.clear {
	clear:both;
}
.clearfix:after {
	content: "."; 
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}

.clearfix {
	min-height: 1px;
overflow:hidden;
}

* html .clearfix {
	height: 1px;
	/*¥*//*/
	height: auto;
	overflow: hidden;
	/**/
}
/* container
---------------------------------------------------- */
.container{padding: 0 5%;margin: 0 auto;clear: both;}
@media screen and (min-width: 768px) {
.container {
width:748px;
padding: 0
}
}
@media screen and (min-width: 980px) {
.container {
width: 1000px;
padding: 0
}}



/* ---------------------------------------------------------------------------------------------

　 ヘッダー

--------------------------------------------------------------------------------------------- */
#header{
    width: 100%;
    margin: 0 auto;
	overflow:hidden;
}

#header img{
    max-width:100%;height:auto;
}



/* ---------------------------------------------------------------------------------------------

　 フッター

--------------------------------------------------------------------------------------------- */
#otoiawase_bg{
clear: both;
padding: 50px 10px 50px 0;
text-align: center;
background: url(../img/hanabi/otoiawase_bg.jpg) repeat; 
width:100%;
}
#otoiawase_bg img{
width:300px;
height:auto
}
#footer{
background: #fdf5e9; 
width:100%;
clear: both;
padding: 30px 0;
text-align: center;
}
#footer h4 {
	font-weight: normal;
	font-size:100%;
}
#footer address {
	font-style:normal;
	font-size:75%;
}
#footer p {
	font-size:70%;
	margin-top:10px
}
.button-matsuda {
  display: inline-block;
  padding: 0.4em 1.6em;
  color: #1f286f;
  text-decoration: none;
  user-select: none;
  border: 1px #1f286f solid;
  border-radius: 20px;
  transition: 0.4s ease;
  margin-top:1%
}
.button-matsuda img{
  padding-top: 0.2em;
  width:120px;
  height:auto
}

/* container
---------------------------------------------------- */
.container{padding: 0 5%;margin: 0 auto;clear: both;}
@media screen and (min-width: 768px) {
.container {
width:748px;
padding: 0
}
}
@media screen and (min-width: 980px) {
.container {
width: 1000px;
padding: 0
}}
/* ---------------------------------------------------------------------------------------------

　 SEC00 プライベート花火とは

--------------------------------------------------------------------------------------------- */
.vision{
	margin: 0 auto;
	padding-bottom: 5%;
	text-align:center
}
h2.t50 img{width:auto;max-height:24px;text-align:center;display:block;margin:auto;}
.sb2 {
	display: block;
}
.pb2 {
	display: none;
}
@media screen and (min-width: 800px) {
.sb2 {
	display: none;
}
.pb2 {
	display: block;
}
}
@media only screen and (max-width: 799px){
.vision{
	text-align:left
}
.vision br{
	display: none;
}	
}	
/* ---------------------------------------------------------------------------------------------

　 SEC01 内容

--------------------------------------------------------------------------------------------- */
.bg { 
background: #fdf5e9; 
width:100%;
}
h2.t_sec01 img{width:auto;max-height:88px;text-align:center;display:block;margin:auto;}

/* 等分
------------------------------------------------------------*/
/* クリアフィックス */
.appositive-list ul:after {
  content: "";
  clear: both;
  display: block;
}

/* 一覧のリストの設定 */
.appositive-list ul li {
  list-style-type: none;
  display: block;
  float: left;
  margin-bottom: 2.87%;
  text-align: center;/* 見た目の調整 */
}

/* 等分なし */
.appositive-list ul.al-1 li {
  width: 100%;
}

/* オプションプラン */
.appositive-list ul.al-option2 li {
  width: 47%;
  margin-right: 5%;
}
.appositive-list ul.al-option2 li img{
  padding: 10px 0
}
.appositive-list ul.al-option2 li:nth-child(2n) {
  margin-right: 0;
}

/* プライベート花火おすすめ */
.appositive-list ul.al-osusume4 li {
  width: 24%;
  margin-right: 1%;
}
.appositive-list ul.al-osusume4 li:nth-child(4n) {
  margin-right: 0;
}
.appositive-list ul.al-osusume4 li img{
  padding: 10px 0
}

@media only screen and (min-width: 769px) {
/* 横並びに等分 */
.appositive-list ul.al-2 li {
  width: 48.56%;
  margin-right: 2.88%;
}
.appositive-list ul.al-2 li:nth-child(2n) {
  margin-right: 0;
}}

/* 横並びに3等分 */
.appositive-list ul.al-3 li {
  width: 31.42%;
  margin-right: 2.87%;
}
.appositive-list ul.al-3 li:nth-child(3n) {
  margin-right: 0;
}

.i {
  width: 100%;/*上下のpaddingと同じにする*/
  height: 0;
  padding-top: 100%;/*widthと同じにする*/
  position: relative;
  overflow: hidden;
}
.i img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}
/* 花火テキスト */
.hanabi_t{
	text-align:center;
	font-size:100%;
	line-height:1.6;
}
/* オプションテキスト */
.op_t{
	text-align:center;
	font-size:100%;
	line-height:1.6;
}
.op_t2{
	text-align:center;
	font-size:90%;
	line-height:1.3;
}

/* 花火色 */
.syokibo,.daikibo  {
  display: inline-block;
  padding: 0.4em 1em;
  font-size: 0.8em;
  color: #fff;
  text-decoration: none;
  user-select: none;
  border-radius: 3px;
  transition: 0.2s ease;
  margin-top:5%
}
.syokibo {
   background: #ff6260;
}
.daikibo {
   background: #1f286f;
}
@media only screen and (max-width: 799px){
.hanabi_t{
	font-size:80%	
}
.op_t{
	font-size:90%	
}
.op_t2{
	font-size:70%	
}
.syokibo,.daikibo  {
	padding: 0.2em 1em;
  font-size:60%
}	
}


/* ---------------------------------------------------------------------------------------------

　 main

--------------------------------------------------------------------------------------------- */
main {
float: none;
width:100%;
text-align: left;
margin:30px 0;
}
hr {
border-width: 1px 0 0 0; /* 太さ */
border-style: dotted; /* 線種 */
border-color: #3F3F3F; /* 線色 */
height: 1px; /* 高さ */
max-width: 100%;
clear:both;
margin: 15px 0;
}
.tex {
width: 100%;
line-height: 2em;
text-align:justify;
text-justify:inter-ideograph;
overflow: hidden;
}
.tex img {
border: 0;
max-width: 100%;
height: auto;
box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
}
.tex p{
margin: 0;
padding: 0;
}
.tex img a {
border: 0;
}
.tex a:hover img {
opacity: 0.6;
transition: 0.5s;
}
/* ---------------------------------------------------------------------------------------------

　 見出し

--------------------------------------------------------------------------------------------- */
h3.midasi {
width: 100%;
font-weight: normal;
padding: 1rem;
font-size: 1.2em;
color: #fff;
margin: 20px 0 10px 0;
text-align: left;
clear: both;
background: url(../img/hanabi/otoiawase_bg.jpg) repeat; 
}
h3.midasi span {
font-size: 70%;
margin: 0 0 0 10px;
}
h4.midasi{
border-bottom: 3px solid #1f286f;
color:#1f286f;
font-size: 1.3em;
line-height: 1.6em;
font-weight: normal;
padding: .3em 0;
margin-bottom:.3em
}
h4.midasi_op{
color:#1f286f;
font-size: 1.4em;
line-height: 1.4em;
font-weight: normal;
padding: .3em 0;
margin-bottom:.3em
}
h5.midasi {
padding: 1rem 2rem;
border: 1px dotted #1f286f;
margin:10px 0;
color:#1f286f;
}
h3.midasi:after,
h4.midasi:after,
h4.midasi_op:after,
h5.midasi:after {
content: "";
clear: both;
height: 0;
display: block;
visibility: hidden;
}

.midasi_doron {
	display: flex;
	font-size: 1.1em;
	color: #1f286f;
	font-weight: normal;
}
.midasi_doron::before,
.midasi_doron::after {
	content: '';
	width: 2px;
	height: 25px;
	background-color: #1f286f;
}
.midasi_doron::before {
	margin-right: 15px;
	transform: rotate(-35deg)
}
.midasi_doron::after {
	margin-left: 15px;
	transform: rotate(35deg)
}
@media screen and (max-width: 767px) {
.box2_op .midasi_doron {
margin-left: 10px;
}
h4.midasi_op{
font-size: 1.3em;
line-height: 1.6em;
}
}
/* ---------------------------------------------------------------------------------------------

　 横並び

--------------------------------------------------------------------------------------------- */
.boxA_op{
        display: flex;
				width: 90%;
				margin: 0 auto
    }
.box2_op img,
.box3_op img{
max-width: 100%;
height: auto;
padding: 0;
margin: 0}
@media screen and (min-width:768px) {
h3.midasi,
h4.midasi {font-size: 1.5em;}
h5.midasi {font-size: 1em;}
/*2等分*/
.boxA_op:after,
.boxA:after{content: "";display: block;clear: both;}
.box2{float: left;width: 48%;}
.box3{float: right;width: 48%;}

.boxA_op{
				align-items: center;
				width: 80%;
    }
.box2_op{float: left;width: 48%;}
.box3_op{float: right;width: 48%;}

.boxA_op .box2_op {
  width: 48.56%;
  margin-right: 2.88%;
}
.boxA_op .box2_op:nth-child(2n) {
  margin-right: 0;
}
}
@media screen and (max-width: 767px) {
.boxA_op {
flex-direction: column;
margin-bottom: 30px
}

.order1 {
  order: 1;
}
.order2 {
  order: 2;
	z-index: 1;
}
}


/* ---------------------------------------------------------------------------------------------

　 table

--------------------------------------------------------------------------------------------- */
table {
	border-collapse: collapse;
	margin: 0 0 0 0;
	border-color: #034da2;
	border-style: solid;
	border-width: 0;
	width:100%
}
table td {
	font-size: 80%;
	line-height: 160%;
	border: 2px solid #fff;
	padding: 5px;
}

table td img {
	margin: 0 0 10px 0;
/* IE 6 */
      margin-bottom:0px;
}
[id^="gallery-"] img,
[id*=" gallery-"] img {
border:none !important;
}
@media (max-width:670px){
table.mobile-block td,table.mobile-block th{display:block;}
}
@media (min-width:671px){
table.mobile-block td,table.mobile-block th{display:table-cell; width:50%;}
}
@media screen and (min-width: 768px) {
table td {
	font-size: 100%;
	line-height: 170%;
	padding: 5px;
}
[id^="gallery-"],
[id*=" gallery-"] {
	width: 300px !important;;
}
}


table#otoiawase th {
background-color:#efe1bd;
}
table#otoiawase td {
background-color:#fdf5e9;
}
table#otoiawase th,
table#otoiawase td {
font-weight:normal;
padding: 15px 20px;
border: 2px solid #fff;
}
table.mobile-block {
border-left: none;
}
table.mobile-block th,
table.mobile-block td {
border-right: none;
}
table.mobile-block th{
color:#444;
}
textarea{
width:100%;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Chrome, Safari */
}
input[type="text"] ,input[type="email"] {
width:100%;
padding:5px;
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Chrome, Safari */
}
/* お問い合わせボタン */
.buttonContainer {
text-align: center;
padding: 20px 0 0 0;
}
#button {
width: 90%;
display: inline-block;
font: normal normal 300 1.3em '';
text-decoration: none;
color: #1f286f;
background-color: transparent;
border: 1px solid #1f286f;
border-radius: 100px;
padding: .6em 1em;
margin: 5px;
background-size: 200% 100%;
background-color: #fff;
transition: background-position .3s cubic-bezier(0.19, 1, 0.22, 1) .1s, color .5s ease 0s, background-color .5s ease;
}
#button:hover {
color: rgba(255, 255, 255, 1);
background-color: #1f286f;
background-position: -100% 100%;
}
/* 確認赤枠 */
.red_line {
padding: 1em;
margin: 2em 0;
font-weight: bold;
border: solid 1px red;
color:red;
}
.red_line p{
margin: 0; 
padding: 0;
}

/* CF7ラジオボタンを縦並びに */
.wpcf7-radio .wpcf7-list-item {
margin-top:5px;
display: block;
}
@media screen and (min-width: 768px) {
table#otoiawase th,
table#otoiawase td {
padding: 20px;
}
table#otoiawase th {
width:30%;
}
.contactform-width {
max-width: 90%;
}
#button {
width: 240px;}
}
/* ------------------------------------- */
/*contactform7-必須
/* ------------------------------------- */
/* 必須マーク */
.must {background: #ff6260}
/* 任意マーク */.free {background: #999;}
.must,.free {
color: #FFF;
border-radius: 3px;
font-size: 10px;
margin-right: 10px;
padding: 5px;
letter-spacing: 0.2em;}
/* ---------------------------------------------------------------------------------------------

　 qa

--------------------------------------------------------------------------------------------- */
h3.qa-faq-title a {
	display: block;
	width: 95%;
	margin: 0px 0px 10px 0px;
	padding: 10px 10px 10px 0px;
	color: #666;
	font-size: 100%;
	line-height: 1.5;
	text-decoration: none;
	-moz-border-radius: 20px;    /* Firefox */
   -webkit-border-radius: 20px; /* Safari,Chrome */
   border-radius: 20px;         /* CSS3 */
   background-color: #fdf5e9;   /* 背景色 */
	font-weight: normal;
	padding-left:1em;
text-indent:-1em;
}
h3.qa-faq-title a:before {
content: "Q";
font-weight: bold;
margin: 0px 10px 0px 10px;
color:#eb6b75
}
h3.qa-faq-title a:hover {
	color: #444;
	text-decoration: underline;
}
.qa-faq-answer {
	margin: 0px 0px 30px 0px;
	padding: 0px 0px 0px 0px;	
}
.qa-faq-answer p {
	margin: 0px 0px 10px 0px;
	padding: 0px 0px 0px 25px;
	font-size: 100%;
	font-weight: normal;
}


h2.faq-catname  {/* カテゴリタイトルを見えなくする */
display:		none;
}
@media only screen and (max-width:800px) {/* タブレット幅 */
h3.qa-faq-title a {
   -moz-border-radius: 30px;    /* Firefox */
   -webkit-border-radius: 30px; /* Safari,Chrome */
   border-radius: 30px;         /* CSS3 */
	font-size: 90%;
	line-height: 1.3;
	padding: 10px 10px ;
}
}
h2.faq-catname  {/* カテゴリタイトルを見えなくする */
text-indent: -9999px;
}

/* ---------------------------------------------------------------------------------------------

　 メニュー

--------------------------------------------------------------------------------------------- */
@media only screen and (min-width: 1200px){
	.inner{
		width: 1024px;
		padding-bottom: 120px;
	}
	section h2{
		padding: 70px 0 20px;
	}
	.txt h2{
		padding: 0 0 20px !important;
	}
}

@media only screen and (min-width: 800px){
	body{
		font-size:16px;
	}
	
  a#menu{
		display:none;
	}	

	.panel{
		display:block !important;
	}

	#mainnav{
		position:fixed;
		top: 0;
		width:100%;
		z-index:500;
	}

	#mainnav ul{
		text-align: right;
		padding-right: 30px;
	}

	#mainnav li{
		display: inline-block;
		padding: 45px 10px 20px;
		font-size: 14px;
		font-weight: 300;
	}
	
  #mainnav a{
		color: #fff;
	}
	
	#mainnav.changeNav{
		background: rgba(31,40,111,0.6);
	}
	
	#mainnav.changeNav li{
		padding: 20px 10px;
	}
}
@media only screen and (max-width: 799px){
#mainnav li a:hover{
  opacity:0.8;filter:alpha(opacity=80);-ms-filter:"alpha( opacity=80 )";
text-decoration: none;
background-color:#FFF
}
  a#menu{
  	display: inline-block;
  	position: relative;
  	width: 40px;
  	height: 40px;
  	margin: 10px;
	}

	#menuBtn{
  	display: block;
  	position: absolute;
  	top: 50%;
  	left: 20%;
  	width: 30px;
  	height: 2px;
  	margin: -1px 0 0 -7px;
  	background: #fff;
  	transition: .2s;
	}

	#menuBtn:before, #menuBtn:after{
  	display: block;
  	content: "";
  	position: absolute;
  	top: 50%;
  	left: 0;
  	width: 30px;
  	height: 2px;
  	background: #fff;
  	transition: .3s;
	}

	#menuBtn:before{
  	margin-top: -7px;
	}

	#menuBtn:after{
  	margin-top: 5px;
	}

	a#menu .close{
  	background: transparent;
	}

	a#menu .close:before, a#menu .close:after{
  	margin-top: 0;
	}

	a#menu .close:before{
  	transform: rotate(-45deg);
  	-webkit-transform: rotate(-45deg);
	}

	a#menu .close:after{
  	transform: rotate(-135deg);
  	-webkit-transform: rotate(-135deg);
	}

	.panel{
		width: 100%;
		display: none;
		overflow: hidden;
		position: relative;
		left: 0;
		top: 0;
		z-index: 100;
	}

	#mainnav{
		position: absolute;
		top: 0;
		right: 0;
		width: 100%;
		text-align: right;
		z-index:500;
	}

	#mainnav ul{
		background: rgba(255,255,255,0.8);
		text-align: left;
	}

	#mainnav li a{
		position: relative;
		display:block;
		padding:15px 30px;
		color: #000;
		font-weight: 400;
	}

	#mainnav li a:before{
		display: block;
		content: "";
		position: absolute;
		top: 50%;
		left: 10px;
		width: 6px;
		height: 6px;
		margin: -4px 0 0 0;
		border-top: solid 2px #000;
		border-right: solid 2px #000;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
}

@media only screen and (max-width: 1199px){
	section h2{
		padding: 30px 0 20px 0;
	}
	#sec01 h2{
		padding: 30px 0 20px;
	}
}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { display: block !important; }
.sp { display: none !important; }
 
/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 600px) {
    .pc { display: none !important; }
    .sp { display: block !important; }
}


/* ---------------------------------------------------------------------------------------------

　youtube

--------------------------------------------------------------------------------------------- */
.youtube {
position: relative;
width: 100%;
padding-top: 56.25%;
margin-bottom:10px
}
.youtube iframe{
position: absolute;
top: 0;
right: 0;
width: 100% !important;
height: 100% !important;
}

/* ---------------------------------------------------------------------------------------------

　飾り

--------------------------------------------------------------------------------------------- */
.kazari_option {
  position: relative;
  display: inline-block;
  padding: 0.4em 0;
  font-size: 3.8em;
  color: #eb6100;
  text-decoration: none;
  user-select: none;
  border: 1px solid #fff;
	font-weight: bold;
	font-family: 'Arial';
}

.kazari_option::before {
  position: absolute;
  top: -20px;
  left: 50%;
  font-size: 0.3em;
  content: 'OPTION';
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* ---------------------------------------------------------------------------------------------

　リンクバナー

--------------------------------------------------------------------------------------------- */
.enlink{
margin: 20px auto 0 auto;
display: flex;
justify-content: center;
}
.enlink a {
  display: inline-block;
  width: 300px;
  text-align: center;
  text-decoration: none;
  line-height: 60px;
  outline: none;
  color: #e95514;
  border:1px solid #e95514;
  background-color: #fff;
  -webkit-transition: all .3s;
  transition: all .3s;
	position: relative;
}

.enlink a:hover {
  color: #fff;
  border:1px solid #e95514;
  background-color: #e95514;
	text-decoration: none
}

.enlink a:after {
    content: '';
    width: 5px;
    height: 5px;
    border-top: 1px solid #e95514;
    border-right: 1px solid #e95514;
    transform: rotate(45deg) translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20px;
    border-radius: 1px;
    transition: 0.3s ease-in-out;
}
.enlink a:hover:after {
    border-color: #FFF;
}