@charset "utf-8";

/* PC---------------------------------------------------------------------------------------- */
@media screen and (min-width:980px) {

	/*1000px*/
	#wrap{
		width: 100%;
		margin: 0 auto;
		margin-top: 132px;
	}
	
	.teabag_contents_1{
		width: 100%;
		height: 501px;
		margin: 0 auto;
		background-image: url(../images/teabag_top_img.png);
		background-repeat: no-repeat;
	}
	
	.contents_2{
		width: 100%;
		/* height: 200px; */
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: 0px 30px;
	}
	
	.contents_2_txt{
		line-height: 160%;
		margin: 0 auto;
		width:  800px;
		text-align: center;
	}
	
	.contents_3{
		width: 100%;
		height: 700px;
		margin: 0 auto;
		background-color: #f5f5f5;
	}
	
	.contents_3_txt{
		width: 780px;
		text-align: center;
		padding-top: 30px;
		margin: 0 auto;
	}
	
	.rakuten_btn{
		position:  absolute;
		left: 500px-100px;
		width:  1000px;
		text-align:  center;
		bottom: -180px;
	}
	
	.contents_4{
		width: 100%;
		height: 600px;
		margin: 0 auto;
		background-color: #fff;
	}
	
	.contents_5{
		width: 100%;
		height: 400px;
		margin: 0 auto;
		background-color: #fff;
	}
	
	.contents_5_img{
		padding:  30px;
		text-align:  center;
		margin: 0 auto;
		text-align: center;
		padding: 30px;
		font-size: 2.2em;
		font-family: "Noto Sans JP";
		line-height: 160%;
	}
	.contents_5_txt{
		width: 1000px;
		text-align: justify;
		padding-top: 30px;
		line-height:  160%;
	}
	
	.contents_5_txt2{
		width: 1000px;
		text-align: center;
		padding-top: 30px;
		line-height:  160%;
	}
	
	
	.contents_6{
		width: 100%;
		height: 900px;
		margin: 0 auto;
		background-color: #f5f5f5;
	}
	
	.hattyu_frow{
		
	}
	
	.hattyu_frow ul{
		
	}
	
	.hattyu_frow ul li{
		
	}
	
	.hattyu_frow_title{
		font-size: 1.4em;
		line-height: 180%;
		margin-top: 30px;
	}
	
	.hattyu_frow_dital{
		line-height: 140%;
		margin-bottom: 3px;
		margin-left: 30px;
	}
	
	.company_img{
		width: 442px;
		float:  left;
		margin-top: 40px;
	}
	
	.company_txt{
		width: 400px;
		float: right;
		line-height: 160%;
		margin-top:  40px;
	}
	
	.inner{
		width: 1000px;
		padding: 10px;
		margin: 0 auto;
		position:  relative;
	}
	
	.inner_shop{
		width: 1000px;
		height: 340px;
		padding: 10px;
		margin: 0 auto;
		position:  relative;
	}
	
	.sec_title{
		margin: 0 auto;
		text-align: center;
		padding: 30px;
		font-size: 1.8em;
		color: #568946;
		font-family: "Noto Sans JP";
		line-height: 160%;
	}
	
	.sec_title img{
		width: 800p;
	}
	
	.contents_1_block{
		float: left;
		width: 333px;
	}
	
	.contents_1_block img{
		
	}
	
	.contents_1_block p{
		line-height: 160%;
		padding: 5px;
		min-height: 160px;
		height: auto !important;
		height: 160px;
	}
	
	.flow{
		
	}
	.flow ul{
	  width: 1000px;
	  padding:0;
	  font-size:0px;
	  margin-top: 50px;
	  margin-bottom: 30px;
	  height: 165px;
	}
	
	.flow ul li {
	  display: table;
	  text-align: center;
	  font-size:16px;
	  float:  left;
	}
	
	.flow ul li p{
		display: table-cell;
		margin: 0;
		text-align: center;
		vertical-align: middle;
	}
	
	.kako1,.kako2,.kako3,.kako4{
		width: 160px;
	}
	
	
	.kako5{
		width:  160px;
		padding: -100px;
		padding-top: 50px;
	}
	
	.kako6{
		padding-top: 35px;
	}
	
	.kako7,.kako9,.kako11,.kako12{
		width: 167px;
	}
	
	.kako8{
		width: 110px;
		padding: -100px;
		padding-top: 50px;
	}
	
	
	.kako10{
		width: 110px;
		padding: -100px;
		padding-top: 50px;
	}
	
	.option_area{
		width: 100%;
		padding: 30px;
		/* height:400px; */
		border: 1px solid #678065;
		margin-top: 50px;
		line-height: 180%;
	}
	.option_area_title{
		width: 400px;
		text-align: left;
		margin-bottom: 20px;
		font-size: 1.8em;
		font-family: "Noto Sans JP";
		line-height: 160%;
	}
	
	.mitumori_muryo{
		text-align: center;
		padding: 30px;
		color: red;
		font-size: 1.6em;
	}
	
	.contents_7{
		width: 100%;
		height: 300px;
		margin: 0 auto;
		background-color: #f5f5f5;
	}
	
	/*発注までの流れ*/
	.contents_8{
		width: 100%;
		/* height: 1300px; */
		margin: 0 auto;
		background-color: #fff;
	}
	
	/*お問い合わせ*/
	.contents_9{
		width: 100%;
		height: 400px;
		margin: 0 auto;
		background-color: #fff;
	}
	
	.contents_9_inner{
		width: 600px;
		margin: 0 auto;
		margin-top: 30px;
	}
	
	.fukidasi{
		background-image: url(../images/fukidasi.png);
		background-repeat: no-repeat;
		width: 885px;
		height:280px;
		float: left;
	}
	
	.fukidasi_p{
		width: 450px;
		height: 150px;
		line-height: 160%;
		font-size: 1.4em;
		margin-left: 40px;
		margin-top: 10px;
	}
	
	.tel{
		text-align: center;
		margin: 0 auto;
		width: 400px;
		float: left;
	}
	
	.mail{
		text-align: center;
		margin: 0 auto;
		width: 400px;
	}
	
	/*ご提案*/
	.contents_10{
		background-color: #f5f5f5;
		background-image: url(../images/oem.png);
		background-repeat: no-repeat;
		background-position: right bottom;
		width: 100%;
		height: 630px;
		margin: 0 auto;
	}
	
	.contents_10_img{
		text-align: center;
		margin-top: 30px;
	}
	
	.contents_10_p{
		
	width: 625px;
	margin: 0 auto;
	line-height: 180%;
	}
	
	/*ノベルティ紹介*/
	.contents_11{
		background-color: #fff;
		width: 100%;
		height: 300px;
		margin: 0 auto;
	}
	
	.contents_11_p{
		width: 600px;
		margin: 0 auto;
		text-align: justify;
	}
	
	dt{  
	  padding-top : 10px;    
	  padding-bottom : 10px;
	  padding-left : 10px;
	  width : 200px;
	  float : left;
	  clear : both;
	  font-weight: 600;
	}
	 
	dd{
	  padding-top : 10px;
	  margin-left : 140px;
	  overflow: auto;
	}
	/*20211126追加*/
	.btn {
		position: relative;
		width: 100%;
		height: 120px;
		margin: 0 auto;
		display: block;
		border-radius: 12px;
		overflow: hidden;
		cursor: pointer;
		margin-bottom: 30px;
	}
	.btn img {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 100%;
		display: block;
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
		margin-bottom: 30px;
	}
	
	
	
	
	
	.btn:hover img:nth-of-type(2) {
		opacity: 0;
	}
	
	.kako-wrap{
	    display: flex;
	    align-content: flex-start;
	    justify-content: space-around;
	    align-items: flex-start;
	    flex-wrap: nowrap;
	}
	.kako-wrap-inner{
	    width: 30%;
	    text-align: center;
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    align-content: center;
	    justify-content: space-around;
	    align-items: flex-start;
	}
	.kako-wrap-title{
	    text-align: center;
	    width: 100%;
	}
	.kako-wrap-inner img{
	    width: 90%;
	    margin: 10px;
	    margin-bottom: 30px;
	}
	.kako-wrap-how{
	    border: 1px solid #4482ae;
	    margin-bottom: 30px;
	    padding: 4px;
	    color: #4482ae;
	    width: 100%;
	}
	.kako-wrap-how-midasi{
	    text-align: left;
	    margin-bottom: 20px;
	    border-left: 6px solid #4482ae;
	    padding-left: 10px;
	    height: 30px;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    font-size: 1.3em;
	}
	.kako-wrap-how-chk{
	    text-align: left;
	    min-height: 30px;
	    font-size: 0.9em;
	    background-image: url(../images/img5.png);
	    background-repeat: no-repeat;
	    padding-left: 25px;
	    background-size: 14px;
	    background-position: 4px 5px;
	}
	.kako-wrap-how-link{
	    text-align: -webkit-auto;
	    color: #4482ae;
	    /* border-bottom: 1px solid; */
	    /* width: 150px; */
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-end;
	    align-items: center;
	    flex-wrap: nowrap;
	    /* margin-top: 30px; */
	    /* margin-bottom: 50px; */
	    text-decoration: underline;
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    cursor: pointer;
	}
	.btn-wrap{
		width: 400px;
		margin: auto;
	}
	.kako-wrap-box{
	    min-height: 200px;
	    position: relative;
	    margin-bottom: 50px;
	    width: 100%;
	}
	.popup{
	    width: 480px;
	    margin: auto;
	    padding: 30px;
	    border: 1px solid #4482ae;
	    position: relative;
	}
	.popup-midasi{
		border: 1px solid #4482ae;
		margin-bottom: 30px;
		padding: 4px;
		color: #4482ae;
		width: 80%;
		text-align: center;
		margin: auto;
		margin-bottom: 30px;
	}
	.tujyojyoken{
		
	}	
	.popup-title{
	    margin-bottom: 20px;
	    margin-top: 20px;
	    text-decoration-line: underline;
	    padding-bottom: 2px;
	}
	.popup p{}
	.popup hr{
	    border: 1px dotted;
	}	
	.button-close{
		color: #4482ae;
		font-size: 2em;
		font-weight: 800;
		position: absolute;
		cursor: pointer;
	}
	.popup-img{
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	}
	.popup-img img{width: 40%;margin: 10px;}
	.price{
		text-align: right;
		text-decoration: underline;
		margin-top: 30px;
	}
}


/* SmartPhone---------------------------------------------------------------------------------------- */
@media screen and (max-width:979px) {

	/*1000px*/
	#wrap{
		width: 100%;
		margin: 0 auto;
		margin-top: 220px;
		
	}
	
	.teabag_contents_1{
		width: 100%;
		height:600px;
		margin: 0 auto;
		background-image: url(../images/teabag_top_img_sp.png);
		background-repeat: no-repeat;
	}
	
	.contents_2{
		width: 100%;
		margin: 0 auto;
		background-repeat: no-repeat;
		background-position: 0px 30px;
	}
	
	.contents_2_txt{
		line-height: 160%;
		margin: 0 auto;
		width:  95%;
		text-align: center;
		font-size: 0.9em;
	}
	
	.contents_3{
		width: 100%;
		margin: 0 auto;
		background-color: #f5f5f5;
		/* margin-top: 1000px; */
	}
	
	.contents_3_txt{
		width: 100%;
		text-align: center;
		padding-top: 30px;
	}
	
	.rakuten_btn{
		position:  absolute;
		left: 500px-100px;
		width:  1000px;
		text-align:  center;
		bottom: -180px;
	}
	
	.contents_4{
		width: 100%;
		height: 600px;
		margin: 0 auto;
		background-color: #fff;
	}
	
	.contents_5{
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
		padding: 30px 0 30px 0;
	}
	
	.contents_5_img{
		text-align:  center;
		/*! width: 100%; */
	}
	
	.contents_5_img img{
		width: 280px;
	}
	
	.contents_5_txt{
		text-align: justify;
		padding-top: 30px;
		line-height:  160%;
	}
	
	.contents_5_txt2{
		text-align: justify;
		padding-top: 30px;
		line-height:  160%;
		padding-bottom: 30px;
	}
	
	
	.contents_6{
		width: 100%;
		margin: 0 auto;
		background-color: #f5f5f5;
	}
	
	.hattyu_frow{
		
	}
	
	.hattyu_frow ul{
		
	}
	
	.hattyu_frow ul li{
		
	}
	
	.hattyu_frow_title{
		font-size: 1.4em;
		line-height: 180%;
		margin-top: 30px;
	}
	
	.hattyu_frow_dital{
		line-height: 140%;
		margin-bottom: 3px;
		margin-left: 30px;
	}
	
	.company_img{
		width: 442px;
		float:  left;
		margin-top: 40px;
	}
	
	.company_txt{
		width: 400px;
		float: right;
		line-height: 160%;
		margin-top:  40px;
	}
	
	.inner{
		padding: 15px;
		margin: 0 auto;
		position:  relative;
	}
	
	.inner_shop{
		width: 1000px;
		height: 340px;
		padding: 10px;
		margin: 0 auto;
		position:  relative;
	}
	
	.sec_title{
		/* margin: 0 auto; */
		/* text-align: center; */
		/* padding: 10px; */
		margin: 0 auto;
		text-align: center;
		padding: 5px;
		font-size: 1.4em;
		color: #568946;
		font-family: "Noto Sans JP";
		line-height: 160%;
	}
	
	.sec_title img{
		width: 800p;
		width: 100%;
	}
	
	.contents_1_block{
		float: left;
		width: 333px;
	}
	
	.contents_1_block img{
		
	}
	
	.contents_1_block p{
		line-height: 160%;
		padding: 5px;
		min-height: 160px;
		height: auto !important;
		height: 160px;
	}
	
	.flow_sp{
		text-align: center;
	}
	
	.flow_sp img{
		width: 90%;
	}

	
	.option_area{
		padding: 5px;
		border: 1px solid #678065;
		margin-top: 50px;
		line-height: 180%;
	}
	.option_area_title{
		text-align: center;
		margin-bottom: 30px;
		padding-top: 20px;
	}

	.option_area_title img{
		width: 280px;
	}
	.mitumori_muryo{
		text-align: center;
		padding: 30px;
		color: red;
		font-size: 1.2em;
		line-height: 160%;
	}
	
	.contents_7{
		width: 100%;
		margin: 0 auto;
		background-color: #f5f5f5;
	}
	
	/*発注までの流れ*/
	.contents_8{
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
	}
	
	/*お問い合わせ*/
	.contents_9{
		width: 100%;
		margin: 0 auto;
		background-color: #fff;
	}
	
	.contents_9_inner{
		width: 100%;
		margin: 0 auto;
		margin-top: 30px;
	}
	
	.fukidasi{
		width: 100%;
	}
	
	.fukidasi img{
		padding: 0px;
		margin: 0px;	
		margin-top: -8px;
	}
	
	
	.fukidasi_p{
		width: 450px;
		height: 150px;
		line-height: 160%;
		font-size: 1.4em;
		margin-left: 40px;
		margin-top: 10px;
	}
	
	.tel{
		text-align: center;
		margin: 0 auto;
		width: 400px;
		float: left;
	}
	
	.mail{
		text-align: center;
		margin: 0 auto;
		width: 400px;
	}
	
	/*ご提案*/
	.contents_10_sp{
		background-color: #f5f5f5;
		width: 100%;
		margin: 0 auto;
		margin-top: -30px;
	}
	
	.contents_10_img{
		text-align: center;
		margin-top: 30px;
	}
	
	.contents_10_p{
		margin: 0 auto;
		line-height: 180%;
		padding: 20px;
	}
	
	/*ノベルティ紹介*/
	.contents_11{
		background-color: #fff;
		width: 100%;
		margin: 0 auto;
		padding-top: 30px;
	}
	
	.contents_11_p{
		margin: 0 auto;
		text-align: justify;
		padding: 20px;
	}
	
	dt{  
	  padding-bottom : 10px;
	   clear : both;
	  font-weight: 600;
	}
	 
	dd{    
	  
	}
	/*20211126追加*/
	.btn {
		position: relative;
		width: 100%;
		height: 80px;
		margin: 0 auto;
		display: block;
		border-radius: 12px;
		/* overflow: hidden; */
		cursor: pointer;
		margin-bottom: 50px;
	}
	.btn img {
		position: absolute;
		top: 45%;
		left: 43%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 80%;
		display: block;
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
		margin-bottom: 30px;
		/* width: 300px!important; */
	}
	.btn:hover img:nth-of-type(2) {
		opacity: 0;
	}
	
	.kako-wrap{
	    display: flex;
	    align-content: center;
	    justify-content: space-between;
	    align-items: center;
	    flex-wrap: wrap;
	    /* height: 1000px; */
	    flex-direction: column;
	    padding: 5px;
	}
	.kako-wrap-inner{
	    width: 80%;
	    text-align: center;
	    display: flex;
	    flex-direction: column;
	    flex-wrap: nowrap;
	    align-content: center;
	    justify-content: space-around;
	    align-items: center;
	}
	.kako-wrap-title{
	    text-align: center;
	    width: 100%;
	}
	.kako-wrap-inner img{
	    width: 270px;
	    margin: 30px;
	    margin-bottom: 30px;
	    text-align: center;
	}
	.kako-wrap-how{
	    border: 1px solid #4482ae;
	    margin-bottom: 30px;
	    padding: 4px;
	    color: #4482ae;
	    width: 100%;
	    height: 30px;
	    padding-top: 10px;
	}
	.kako-wrap-how-midasi{
	    text-align: left;
	    margin-bottom: 20px;
	    border-left: 6px solid #4482ae;
	    padding-left: 10px;
	    height: 30px;
	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	    font-size: 1.2em;
	    width: 100%;
	}
	.kako-wrap-how-chk{
	    text-align: left;
	    min-height: 30px;
	    font-size: 0.9em;
	    background-image: url(../images/img5.png);
	    background-repeat: no-repeat;
	    padding-left: 25px;
	    background-size: 14px;
	    background-position: 4px 5px;
	}
	.kako-wrap-how-link{
	    text-align: -webkit-auto;
	    color: #4482ae;
	    /* border-bottom: 1px solid; */
	    /* width: 150px; */
	    display: flex;
	    flex-direction: row;
	    justify-content: flex-end;
	    align-items: center;
	    flex-wrap: nowrap;
	    /* margin-top: 30px; */
	    /* margin-bottom: 50px; */
	    text-decoration: underline;
	    position: absolute;
	    bottom: 0;
	    right: 0;
	    cursor: pointer;
	}
	.btn-wrap{
		width: 320px;
		margin: auto;
		/* height: 180px; */
		margin-top: 30px;
	}
	
	.btn-wrap>.btn {
		position: relative;
		width: 100%;
		height: 80px;
		margin: 0 auto;
		display: block;
		border-radius: 12px;
		overflow: hidden;
		cursor: pointer;
		margin-bottom: 30px;
	}
	.btn-wrap>.btn img {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		width: 80%;
		display: block;
		-webkit-transition: .4s ease-in-out;
		transition: .4s ease-in-out;
		margin-bottom: 30px;
		/* width: 70%!important; */
	}

	.kako-wrap-box{
	    min-height: 200px;
	    position: relative;
	    margin-bottom: 10px;
	    width: 100%;
	}
	.popup{
	    width: 80vw;
	    margin: auto;
	    padding: 30px;
	    border: 1px solid #4482ae;
	    position: relative;
	}
	.popup-midasi{
		border: 1px solid #4482ae;
		margin-bottom: 30px;
		padding: 4px;
		color: #4482ae;
		width: 80%;
		text-align: center;
		margin: auto;
		margin-bottom: 30px;
	}
	.tujyojyoken{
		
	}	
	.popup-title{
	    margin-bottom: 20px;
	    margin-top: 20px;
	    text-decoration-line: underline;
	    padding-bottom: 2px;
	}
	.popup p{}
	.popup hr{
	    border: 1px dotted;
	}	
	.button-close{
		color: #4482ae;
		font-size: 2em;
		font-weight: 800;
		position: absolute;
		cursor: pointer;
	}
	.popup-img{
	    display: flex;
	    flex-direction: row;
	    justify-content: center;
	}
	.popup-img img{width: 40%;margin: 10px;}
	.price{
		text-align: right;
		text-decoration: underline;
		margin-top: 30px;
	}

}

/*20211126追加　共通*/


.comment{
    font-size: 0.8em;
}

.text-right{
	text-align: right;
}

.modal-window {
　display:none !important;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 580px;
  height: 600px;
  background-color: #fff;
  border-radius: 5px;
  z-index: 11;
  padding: 2rem;
  overflow: scroll;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
  z-index: 10;
}