@charset "utf-8";

@media (min-width:1280px){
	.annai{
		position: fixed;
		background-color: #00A5E3;
		width: 100%;
		top: 0;
		text-align: center;
		padding: 5px 0;
		color: #FFED00;
		font-weight: bold;
	}
	
/*ーーーーーーーーーーーーヘッダーーーーーーーーーーーーー*/
	header{
		position: relative;
		width: 100%;
		top: 0;
	}
	.topimg_0_sp{
		display: none;
	}
	.topimg_3_sp{
		display: none;
	}
	.hd_title{
		width: 1100px;
		display: block;
		margin: auto;
		position: relative;
	}
	.hd_title h1{
		text-align: center;
		padding-top: 50px;
		color: #00A5E3;
		font-size: 1.2em;
		font-family:YuGothic, "Yu Gothic medium", "Hiragino Sans", Meiryo, "sans-serif";
	}
	.topimg_flex{
		display: flex;
		width: 1000px;
		flex-direction: row-reverse;
		align-items: flex-end;
		margin: auto;
		padding-top: 110px;
	}
	.topimg_0 img{
		display: block;
		padding-top: 20px; 
		margin-left: auto;
		margin-right: auto;
		width: 1000px;
	}
	.topimg_1 img{
		width: 500px;
		height: auto;
	}
	.topimg_2 img{
		width: 500px;
		height: auto;
	}
	.topimg_3 img{
		display: block;
		padding-top: 30px; 
		margin-left: auto;
		margin-right: auto;
		width: 1000px;
	}
	
	#pc_menu{
		position: absolute;
		top: 100px;
		display: block;
		width: 810px;
		margin: auto;
		right: 0;
		left: 0;
	}
	#pc_menu ul{
		display: -webkit-flex;
		display: flex;
	}
	#pc_menu li{
		padding-left: 20px;
	}
	#pc_menu li:after{
		border-top: #00A5E3 solid 2px;
		content: '';
		display: block;
		width: 0px;
		margin-bottom: 5px;
		margin-left: auto;
		margin-right: auto;
	}
	#pc_menu li:hover:after{
		width: 100%;
		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	-ms-transition: all 0.5s;
    	transition: all 0.5s;
	}
	
	.tver{
		margin: auto;
		margin-top: 50px;
		width: 1000px;
		display: block;
	}
	.sandwitchman img{
		width: 100%;
		height: auto;
	}
	.tver h1{
		font-size: 35px;
		padding-left: 10px;
		color: #00A5E3;
		border-bottom: 5px solid #00A5E3;
	}
	.tver h2{
		font-size: 22px;
		padding-left: 10px;
		margin-top: 5px;
		padding-top: 20px;
		border-top:2px solid #00A5E3;
	}
	.tver_link{
		width: 350px;
		display: block;
		margin: auto;
		margin-top: 20px;
		background-color: #00A5E3;
		padding: 5px 0;
	}
	.tver_link a{
		text-align: center;
		display: block;
		font-size: 24px;
		color: #fff;
	}
/*ーーーーーーーーーーーーみやびじんについてーーーーーーーーーーーー*/
	.about_miyabijin{
		padding: 100px 0;
	}
	.about_flex3{
		display: flex;
		width: 1000px;
		justify-content:space-around;
		margin: auto;
	}
	.about_flex3 h2{
		font-size: 50px;
		text-align: center;
		font-weight: bold;
	}
	.about_flex3 h3{
		font-size: 20px;
		text-align: center;
	}
	.about_flex{
		display: -webkit-flex;
		display: flex;
		-webkit-flex-direction: column-reverse;
		flex-direction: column-reverse;
		width: 900px;
		margin: auto;
	}
	.about_flex2{
		display: -webkit-flex;
		display: flex;
		margin: auto;
		width: 900px;
		margin-top: 100px;
	}
	.about_miyabijin_text h1{
		font-size: 3em;
		text-align: center;
		margin-top: 30px;
	}
	.about_miyabijin_text p{
		margin-top: 20px;
		font-size: 1.2em;
	}
	.about_miyabijin_img img{
		width: 300px;
	}
	.about_miyabijin_img2 img{
		width: 550px;
		margin-left: 50px;
	}
	.about_coment{
		padding: 30px;
		padding-top: 50px;
		box-shadow: 3px 3px 5px #888;
	}
	.about_coment p{
		font-size: 1.1em;
	}
	
	.soramido_mv{
		display: block;
		margin: auto;
		width: 1000px;
		height: auto;
		margin-top: 50px;
	}
/*ーーーーーーーーーーーー３つの魅力ーーーーーーーーーーーー*/
	#kodawari{
		padding: 100px 0;
		width: 1200px;
		margin: auto;
	}
	.kodawari_flex{
		display: flex;
		justify-content:space-between;
		align-items: center;
	}
	.kodawari_flex_0 img{
		width: 800px;
		padding-top: 10px;
	}
	#kodawari h1{
		font-size: 1.2em;
		padding-left: 20px;
	}
	#kodawari h1 span{
		font-size: 3em;
		padding-left: 10px;
	}
	#kodawari1,#kodawari2,#kodawari3{
		display: -webkit-flex;
		display: flex;
		margin-top: 50px;
	}
	#kodawari1{
		margin-top: 50px;
	}
	#kodawari2{
		-webkit-flex-direction: row-reverse;
		flex-direction: row-reverse;
	}
	.kodawari1_box,.kodawari2_box,.kodawari3_box{
		padding: 0 50px;
		padding-top: 50px;
		box-shadow: 3px 3px 5px #888;
	}
	#kodawari h2{
		font-size: 2em;
		margin-bottom: 30px;
	}
	#kodawari p{
		font-size: 1.2em;
		margin-top: 10px;
	}
	.kodawariimgsp img{
		width: 550px;
	}
	.repeat90imgsp img{
		width: 550px;
	}
/*ーーーーーーーーーーーー注文リンクボタンーーーーーーーーーーーー*/
	.orderbg{
		margin: 50px 0;
		padding: 100px 0;
		background-color: #84B4E1;
	}
	.order_box{
		padding: 30px 50px;
		width: 600px;
		margin: auto;
		border-top: solid 2px #fff;
		border-bottom: solid 2px #fff;
	}
	.order_box h2{
		background-color: #fff;
		color: #F09BC0;
		text-align: center;
		font-size: 2.5em;
		padding: 10px 0;
		display: block;
		margin: auto;
		font-weight: bold;
		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	-ms-transition: all 0.5s;
    	transition: all 0.5s;
	}
	.order_box h2:hover{
		background-color:#F7896D;
		color: #fff;
	}
	.order_box h3{
		background-color: #F09BC0;
		color: #fff;
		box-sizing: border-box;
		text-align: center;
		margin-top: 20px;
		padding: 10px 0;
		font-size: 1.1em;
		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	-ms-transition: all 0.5s;
    	transition: all 0.5s;
	}
	.order_box h3:hover{
		background-color:#F7896D;
	}
	.orderbg p{
		font-size: 1.1em;
		color: #fff;
		width: 700px;
		margin: auto;
		padding: 0 70px;
		padding-bottom: 30px;
		border-bottom: 1px solid #fff;
		box-sizing: border-box;
	}
	
/*ーーーーーーーーーーーー贈答用におすすめーーーーーーーーーーーー*/
	.zoutouimg_sp{
		display: none;
	}
	.zoutou_bg{
		position: relative;
		padding-bottom: 450px;
		width: 1200px;
		display: block;
		margin: auto;
	}
	.zoutouimg_pc img{
		position: relative;
		display: block;
		margin: auto;
		margin-right: 0;
		width: 1000px;
		top: 130px;
		left: auto;
		right: 0;
		z-index: -99;
	}
	.zoutou_box{
		width: 500px;
		height: 500px;
		padding: 20px;
		position: absolute;
		background-color: #fff;
		top: 300px;
		left: 0;
		right: auto;
		box-shadow: 3px -3px 3px #d0d0d0; 
	}
	.zoutou_box h1{
		font-size: 2em;
		border-bottom: 2px solid #00A5E3;
		padding-bottom: 5px;
	}
	.zoutou_box h2{
		font-size: 1.5em;
		padding: 10px;
	}
	.zoutou_box img{
		width: 100%;
	}
	.zoutoubg h3{
		position: absolute;
		top: 10px;
		font-size: 2em;
		left: 0;
		right: 0;
		text-align: center;
	}
	.zoutoubg p{
		position: absolute;
		top: 790px;
		font-size: 1.1em;
		width: 450px;
		left: 40px;
		right: auto;
	}
	
/*ーーーーーーーーーーーーミネラルが豊富ーーーーーーーーーーーー*/
	.mango_flex_0 img{
		width: 1000px;
		display: block;
		margin: auto;
	}
	.mango h1{
		font-size: 1.2em;
		width: 1000px;
		display: block;
		margin: auto;
		text-align: center;
	}
	.mango h1 span{
		font-size: 3em;
	}
	.mango h2{
		width: 1000px;
		display: block;
		margin: 30px auto;
		font-size: 1.3em;
		text-align: center;
	}
	.mango h2 span{
		font-size: 1.5em;
	}
	.mango_box_bg{
		background-color: #95D0C0;
		padding: 70px 0;
		margin-top: 50px;
	}
	.mango_box2{
		display: -webkit-flex;
		display: flex;
		width: 1000px;
		margin: auto;
	}
	.mango_box3{
		box-sizing: border-box;
		padding: 30px;
		background-color: #fff;
		margin-right: 50px;
	}
	.mango_box3 p{
		color: #95D0C0;
		font-size: 1.1em;
	}
	.mango_box3 p span{
		font-size: 1.3em;
	}
	.mangoimg img{
		width: 500px;
	}
	
/*ーーーーーーーーーーーーマンゴーの歴史ーーーーーーーーーーーー*/
	.history{
		padding-top: 100px;
	}
	.history h1{
		font-size: 1.2em;
		width: 1000px;
		display: block;
		margin: auto;
		text-align: center;
	}
	.history h1 span{
		font-size: 3em;
	}
	.history h2{
		width: 1000px;
		display: block;
		margin: 30px auto;
		font-size: 1.3em;
		text-align: center;
	}
	.history h2 span{
		font-size: 1.5em;
	}
	.history_box_bg{
		background-color: #1EB0D9;
		padding: 70px 0;
		margin-top: 50px;
	}
	.history_box3{
		background-color: #1EB0D9;
		padding: 20px 5%;
	}
	.history_box2{
		display: -webkit-flex;
		display: flex;
		width: 1000px;
		margin: auto;
	}
	.history_box3{
		box-sizing: border-box;
		padding: 30px;
		background-color: #fff;
		margin-right: 50px;
	}
	.history_box3 p{
		color: #1EB0D9;
		font-size: 1.1em;
	}
	.history_box3 p span{
		font-size: 1.3em;
	}
	.historyimg img{
		width: 550px;
	}
	
/*ーーーーーーーーーーーーアイランドファーム商品一覧ーーーーーーーーーーーー*/
	#product{
		padding: 100px 0;
		width: 1200px;
		margin: auto;
	}
	#product h1{
		font-size: 1.2em;
		border-bottom: 2px solid #000;
	}
	#product h1 span{
		font-size: 3em;
		padding-left: 5px;
	}
	#product p{
		padding: 30px 0;
		font-size: 1.2em;
	}
	#product p span{
		font-weight: bold;
	}
	.product_flex{
		display: -webkit-flex;
		display: flex;
		align-content: flex-end;
	}
	.product_flex1{
		box-sizing: border-box;
		padding: 30px;
		padding-right: 0;
	}
	#product .product_flex1 p{
		padding: 0;
		padding-top: 10px;
		font-weight: bold;
	}
	.productimg img{
		width: 100%;
		padding-top: 30px;
	}
	#product h2{
		font-size: 1.1em;
	}
	.product_box{

	}
	.product_box h3{
		font-size: 1.5em;
		padding-top: 30px;
		clear: both;
	}
	.product_box h4{
		font-size: 1.1em;
		float: left;
		margin-left: 20px;
	}
	.product_box h4 span{
		font-size: 1.7em;
		padding-left: 10px;
	}
	
/*ーーーーーーーーーーーー保存方法ーーーーーーーーーーーー*/
	.hozon{
		padding: 100px 0;
		width: 1200px;
		display: -webkit-flex;
		display: flex;
		margin: auto;
	}
	.hozon_box{
		box-sizing: border-box;
		padding-right: 50px;
	}
	.hozon h1{
		font-size: 2em;
	}
	.hozon_box p{
		font-size: 1.2em;
		padding: 20px 0;
	}
	.hozon_subbox h2{
		font-size: 1.5em;
		border-bottom: 1px solid #000;
	}
	.hozonimg img{
		width: 600px;
		margin-top: 70px;
	}
	
/*ーーーーーーーーーーーーお支払い方法ーーーーーーーーーーーー*/
	.about_pay{
		padding: 100px 0;
		width: 1200px;
		margin: auto;
	}
	.about_pay h1{
		font-size: 2em;
	}
	.about_pay p{
		padding: 20px 0;
	}
	.about_pay li{
		font-size: 1.2em;
	}
	.about_pay h2{
		font-size: 1.5em;
		border-bottom: 2px solid #000;
		padding-top: 20px;
	}
	.about_pay h3{
		font-size: 1.3em;
	}
	.about_pay h4{
		font-size: 1.2em;
	}
	.about_pay h5{
		font-size: 1.2em;
		padding-top: 10px;
	}
	.about_pay img{
		width: 800px;
		margin-top: 20px;
	}
	.creditimg{
		display: none;
	}
	
/*ーーーーーーーーーーーーマップーーーーーーーーーーーー*/
	#map{
		margin: 100px 0;
		width: 100%;
		height: 700px;
	}
	
/*ーーーーーーーーーーーー企業概要ーーーーーーーーーーーー*/
	#info{
		width: 1000px;
		padding: 100px 0;
		margin: auto;
	}
	#info h1{
		font-size: 2em;
	}
	#info dl{
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		-webkit-align-items:center;
		align-items:center;
	}
	#info dt{
		font-size: 1em;
		width: 200px;
		padding-top: 23px;
		padding-bottom: 6px;
		border-bottom: 1px solid #000;
		padding-left: 50px;
	}
	#info dd{
		font-size: 1.2em;
		padding-top: 20px;
		padding-bottom: 5px;
		border-bottom: 1px solid #000;
		width: 750px;
	}
	
/*ーーーーーーーーーーーーフッターーーーーーーーーーーーー*/
	#news{
		padding:100px;
		width: 800px;
		margin: auto;
	}
	.news_title{
		width: 50px;
		border-bottom: thick solid #00A5E3;
	}
	#news h1{
		width: 200px;
		font-size:1.2em;
		color: rgba(30,6,6,1.00);
	}
	.news_time{
		font-size: 1em;
		color: rgba(30,6,6,1.00);
		padding-top: 10px;
	}
	.news_list{
		font-size: 1em;
		color: rgba(30,6,6,1.00);
		padding-bottom: 10px;
		border-bottom: thin solid #00A5E3;
	}
	.bloglink{
		width: 130px;
		background-color: #00A5E3;
		margin-left: auto;
		margin-top: 10px;
		margin-right: 0px;
		padding: 10px 0;
		font-size: 18px;
		text-align: center;
		color: #fff;
		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	-ms-transition: all 0.5s;
    	transition: all 0.5s;
	}
	.bloglink:hover{
		background-color: #29AB80;
	}
	
	.copyright{
		text-align: center;
		margin-top: 100px;
	}
	.copyright h1{
		background-color: #00A5E3;
		padding: 15px 5%;
		color: #fff;
		font-size: 1em;
	}
	.copyright h2{
		color: #00A5E3;
		font-size: 1em;
		line-height: 20px;
		padding: 20px 5%;
	}
	
	.creator p{
		font-size: 1.2em;
		border: 1px solid #00A5E3;
		width: 400px;
		display: block;
		margin: auto;
		color: #00A5E3;
		padding: 5px 0;
	}
	.creator a{
		color: #fff;
		background-color: #00A5E3;
		font-size: 1.2em;
		width: 400px;
		display: block;
		margin: auto;
		padding: 5px 0;
		margin-top: 10px;
	}
	
	.snslinkimg{
		display: -webkit-flex;
		display: flex;
		margin: auto;
		justify-content: -webkit-space-around;
		justify-content: space-around;
		width: 500px;
	}
	.snslinkimg img{
		width: 50px;
		height: auto;
	}
	.snslinkimg a{
		text-align: center;
		text-decoration: none;
		color: #BB4020;
	}
	
	.hdlogo img{
		display: block;
		width: 200px;
		margin: 70px auto;
	}
	

	#renraku{
		position: fixed;
		bottom: 20px;
		right: 90px;;
		width: 280px;
		background-color: rgba(79,56,37,0.00);
		z-index: 2;
	}
	.renbg{
		display: -webkit-flex;
		display: flex;
		justify-content: -webkit-space-between;
		justify-content: space-between;
	}
	#renraku p{
		font-size: 1.4em;
		font-weight: bold;
		text-align: center;
	}
	.ren_3{
		background-color: #006837;
		color: #fff;
		width: 200px;
		padding: 6px 0;
		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	-ms-transition: all 0.5s;
    	transition: all 0.5s;
	}
	.ren_3:hover{
		background-color: #94CFBF;
		margin-bottom: 5px;
	}
	.ren_2,.ren_1{
		display: none;
	}
	
	.yajirushi a{
		width: 51px;
		height: 51px;
		position: fixed;
		bottom: 20px;
		right: 20px;
		-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	-o-transition: all 0.5s;
    	-ms-transition: all 0.5s;
    	transition: all 0.5s;
	}
	.yajirushi a:hover{
		bottom: 25px;
	}
	.yajirushi img{
		width: 51px;
	}
	
	.counter{
		text-align: center;
	}
}