/*  html {
   background-color:#edb328; /* 周囲の背景色 */

  
 @media screen and (min-width : 1200px){

 /* 1200px以上の画面用 */


  
  /*包装紙のテーブル*/
  
.hs {
	text-align:center;
	max-width:100%;
	/*border:solid 1px #71686c;
	background-color:#FFF;*/
border-spacing: 10px;
	}
	
.hs img { width:90%;
  /* 画像の横幅 */
margin:15px 5px 10px;
	/*border-bottom:solid 1px #999999; */}

.hs td{
	width:40%;
	text-align:center;
	margin:5px;
	 /*border:solid 1px #71686c;*/
	 background-color:#FFF;
    display: inline-block;
	 border-radius:15px;}


.hs tr td h3 {
	 margin:25px;
	 border-bottom:solid 1px #999999;
  text-align:left;
  font-family:serif;
  margin-bottom:auto;}
  
  


 .hs tr td p {
	 height:100px;
margin:25px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:10px;
  font-size:85%;
   color:#606060;}
  
  
  
  
.wrap {
  position: relative; 
  overflow: hidden; 
}


.wrap tr {
  position: relative;
  left: 50%; 
  float: left;
}

.wrap tr td {
  position: relative;
  left: -40%;
  float: left;
  list-style: none; 
}


 .midasi{
	 margin:100px;
	 text-align:center;
	max-width:1500px;
	 margin-bottom:150px;}
 .midasi h2{
	 font-size:2em;
	 font-family:sans-serif;
	 color:#414141;
	 border-bottom:solid 1px #999999;
 padding: 1rem 2rem;
 /* background: #f4f4f4; */}
 
.midasi span {
	color:#a4a4a4;}


.option {
	max-width:1200px;
	text-align:left;
padding:20px;}
	
	.option h2{
		font-size:2em;
		color:#374149;
		margin:25px;
		padding-left:15px;
		border-left: solid 10px #374149;
		padding: 0.25em 0.5em;}
	.option span{
		background-color:#374149;
		padding:8px;
		color:#FFF;}
		
		
	.option p {
margin:25px;
padding-left:15px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:10px;
  font-size:85%;
   color:#606060;}
 
 .optionimg{
  background-color:#FFF; 
 border-radius:15px;
 width:80%;
 max-width:1200px;}

.optionimg img{
	width:90%;
	max-width:900px;
  /* 画像の横幅 */
margin:15px 5px 10px;}

	 

.pc{ display:inline!important; }
.tb{ display:none!important; }
.pctb{display:inline!important; }
.mb	{ display:none!important; }
.tbmb{ display:none!important; }
}



  
@media screen and (min-width:900px) and (max-width:1200px) {
	
/* 701～1024pxの画面用*/

	
	/*包装紙のテーブル*/

	.hs tr td h3 {
	 margin:10px;
	 border-bottom:solid 1px #999999;
  text-align:left;
  font-family:serif;
  margin-bottom:auto;}
  
  
.hs {
	text-align:center;
	width:100%;
	
	/*border:solid 1px #71686c;
	background-color:#FFF;*/
border-spacing: 10px;
	}
	
 .hs img {
	width:90%;
  /* 画像の横幅 */
	  /*height:400px;
  /* 画像の縦幅 */
    /*object-fit: cover;
   /* 画像をトリミングする */
margin:15px 5px 10px;
	/*border-bottom:solid 1px #999999; */}



.hs td{
	width:45%;
	text-align:center;
	margin:5px;
	 /*border:solid 1px #71686c;*/
	 background-color:#FFF;
    display: inline-block;
	 border-radius:15px;
	}
	
	

	.hs tr td h3 {
	 margin:20px;
	 border-bottom:solid 1px #999999;
  text-align:left;
  font-family:serif;
  margin-bottom:auto;
  white-space: nowrap;}
  
  

 .hs tr td p {
margin:20px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:20px;
  padding-bottom:5px;
  font-size:80%;
  color:#666;
display:block;
  height:90px;
  }
  
  

	
	
	.wrap {
  position: relative; 
  overflow: hidden; 
}

.wrap tr {
  position: relative;
  left: 50%; 
  float: left;
}

.wrap tr td {
  position: relative;
  left: -45%; 
  float: left;
  list-style: none; 
}


.option {
	width:90%;
	text-align:left;
padding:20px;}
	
	.option h2{
		font-size:2em;
		color:#374149;
		margin:25px;
		padding-left:15px;
		border-left: solid 10px #374149;
		padding: 0.25em 0.5em;}
	.option span{
		background-color:#374149;
		padding:8px;
		color:#FFF;}
		
		
	.option p {
margin:25px;
padding-left:15px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:10px;
  font-size:85%;
   color:#606060;}
 
 .optionimg{
  background-color:#FFF; 
 border-radius:15px;
 width:80%;}

.optionimg img{
	width:90%;
  /* 画像の横幅 */
margin:15px 5px 10px;}



 .midasi{
	 margin:30px;
	 text-align:center;
	max-width:1500px;
	 margin-bottom:50px;}
 .midasi h2{
	 font-size:2em;
	 font-family:sans-serif;
	 color:#414141;
	 border-bottom:solid 1px #999999;
 padding: 1rem 2rem;
 /* background: #f4f4f4; */}
 
.midasi span {
	color:#a4a4a4;}

.pc{ display:none!important; }
.tb{ display:inline!important; }
.pctb{display:inline!important; }
.mb { display:none!important; }
.tbmb{ display:inlin!important; }
 
  }

@media screen and (max-width:900px) {

	
/* 700以下用(スマホ)*/

   
   /*包装紙のテーブル*/
	.hs {
	text-align:center;
	width:100%;
	/*border:solid 1px #71686c;
	background-color:#FFF;*/
border-spacing: 10px;
 position: relative; 
  overflow: hidden; 
	}
	
	 .hs tr td{
		 width:90%;
	text-align:center;
	margin:5px;
	 /*border:solid 1px #71686c;*/
	 background-color:#FFF;
    display: inline-block;
	 border-radius:15px;
	}
	
	.hs img {
	width:90%;
  /* 画像の横幅 */
	/*height:150px;
  /* 画像の縦幅 */
 /* object-fit: cover;
   /* 画像をトリミングする */
margin:15px 5px 10px;
	/*border-bottom:solid 1px #999999; */}
.hs tr td h3 {
	 margin:20px;
	border-bottom:solid 1px #999999;
  text-align:left;
  font-family:serif;
  }
  
  

 .hs tr td p {
margin:20px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:20px;
  font-size:80%;
  color:#606060;}
  
  
  
.option {
	width:90%;
	text-align:left;
padding:20px;}
	
	.option h2{
		font-size:1.5em;
		color:#374149;
		margin:15px;
		border-left: solid 10px #374149;
		padding: 0.25em 0.5em;}
	.option span{
		background-color:#374149;
		padding:8px;
		color:#FFF;}
		
		
	.option p {
margin:15px;
margin-top:25px;
  text-align:left;
  font-family:sans-serif;
  margin-bottom:10px;
  font-size:85%;
   color:#606060;}
 
 .optionimg{
  background-color:#FFF; 
 border-radius:15px;
 width:80%;}

.optionimg img{
	width:90%;
  /* 画像の横幅 */
margin:15px 5px 10px;}



  .balloon4 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding:7px 10px;
  padding-top:20px;
 width:80%;
max-width:900px; 
  color: #000;
  font-family:serif;
  line-height: 1em;
  font-size:120%;
  background: #f8e58c;
}
  
  .balloon4 p{
	  padding-top:-1.0em;
	  font-size:0.8em;
	  width:250px;
	  text-align:left;}
   
   

.pc{ display:none!important; }
.tb{ display:none!important; }
.pctb{display:none!important; }
.mb { display:inline!important; }
.tbmb{ display:inlin!important; }

 .midasi{
	 padding:30px 5px 5px;/* 上・左右・下 */	 text-align:center;
	max-width:100%;
	 margin-bottom:30px;}
 .midasi h2{
	 font-size:1.5em;
	 font-family:sans-serif;
	 color:#414141;
	 border-bottom:solid 1px #999999;
	 padding: 1rem;
 white-space: nowrap;
 /* background: #f4f4f4; */}
 
.midasi span {
		color:#a4a4a4;
	 padding: 0.5rem;}

 .example {/*親div*/
  position: relative;
  }

.example p {
  position: absolute;
  color:#444444;
  font-weight: bold; /*太字に*/
  font-size: 2em;/*サイズ1.5倍*/
  font-style: italic;
  font-family :serif;/*Google Font*/  
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:10% 5%;
  /*background:#FFF;
  background: rgba(255,255,255,0.8);*/
  }

.example img {
  width: 100%;
  }
  
  
}
  
  
  
.menu {
	position: fixed;
	 /*基準を画面の左下に*/
	left: 0;
	bottom: 0;
	background:#e0e0e0;
	width: 100%;
}
.menu tr td {
		text-align:center;
	border-left-color:666;}
	
	　.menu tr td a{
    　display:block;
    　width:100%;
      height:100%;
 　  } 
.menu tr td img{
	width:80px;
	display:block;
	margin-left : auto ;
	 margin-right : auto ;
	}
body {
   margin: 30px;   /* 外側の余白を30pxに */
   padding: 0px;   /* 内側の余白を消す */
   background-color: #ffffff; /* 本文部分の背景色 */
}


 .example {/*親div*/
  position: relative;
  }

 /* .example::before{

    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: brown;
    opacity: 0.5;
    display:block;

}*/

.example img {
  width: 100%;
   opacity: 0.4;
  }
.example p{
  position: absolute;
 color:#444444;
  font-weight: bold; /*太字に*/
   font-size: 3.5em;/*サイズ1.5倍*/
    font-style: italic;
  font-family :serif;/*Google Font*/  
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:5% 100%;
 
  }
  

	
  .setumei{
  margin:10px;
  text-align:center;
  font-family:serif;
  margin-bottom:30px;}

/*吹き出し-内祝い-*/
.balloon4 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
   padding-top:20px;
 width:80%;
max-width:900px; 
  color: #000;
  font-family:serif;
  font-size:120%;
  background: #f8e58c;
  border-radius:10px;
}

  
  .balloon4 p{
	  padding-top:-1.0em;
	  font-size:0.8em;
	 }
   
   
   
.balloon4:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #f8e58c;
  
}

/*吹き出し-弔辞-*/
.balloon5 {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 7px 10px;
 width:80%;
max-width:900px; 
  color: #000;
  font-family:serif;
  font-size:120%;
  background: #e5e5e5;
}

.balloon5:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  margin-left: -15px;
  border: 15px solid transparent;
  border-top: 15px solid #e5e5e5;
}


.balloon3-right {
  position: relative;
  display: inline-block;
  margin:0.5em 10px 0px 0px;
  width: 50px;
  height: 50px;
  line-height:50px;
  text-align: center;
  color: #FFF;
  font-size: 20px;
  font-weight: bold;
  background: #66cc33;
  border-radius: 50%;
  box-sizing: border-box;
}



.balloon1 p {
  margin: 0;
  padding: 0;
}