/* 基本 */

html,body{
			width: 100%;
			font-size: 62.5%;
			word-wrap:break-word;
			
}

body{
			font-family: -apple-system, BlinkMacSystemFont, 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック  Medium', meiryo, sans-serif;
			margin: 0;
			padding: 0;
			-webkit-text-size-adjust: 100%;
			}

a{
			text-decoration: none;
			color: #000;
}

img{			
			vertical-align: bottom;
}

a img{
			border: none
}

a:focus{
			outline: none;
}

/* header */

header{
		border-bottom: solid 1px #dedede;
}

ul.menu{
		display: flex;
		list-style-type: none;
		font-size: 1.4rem;
		margin: 60px 0 0 0;
		padding: 0 120px;
}

.menu li:first-child{
		margin-right: auto;
		padding-bottom: 20px;
}

.menu li.menu{
		text-align: center;
		border-bottom: solid 5.5px #dcdcdc;
		width: 145px;
		margin: 30px 12px 0 0;
}

.menu li.menu:hover{
		border-bottom: solid 5.5px #007b44;
}

.menu li.menu:nth-child(5){
		border-bottom: solid 5.5px #007b44;
}


/* パンくず */
ul.bread{
		list-style-type: none;
		margin: 0;
		padding: 10px 0;
		display: flex;
		border-bottom: solid 1px #dedede;
		
}

ul.bread li:first-child{
		margin-left: 120px;
}

li.bread img{
		width: 15px;
		height: 15.5px;
}


li.breadtext{
		font-size: 1.2rem;
		color: #969696;
		margin-left: 24px;
		line-height: 1.5;
}

li.breadtext::before{
		content: '>';
		position: relative;
		top: -1px;
		right: 12px;
}


/* mein */
h1{
		font-size: 3rem;
		line-height: 0;
		color: #007b44;
		font-weight: normal;
		margin: 45px auto 0 auto;
		padding: 0;
		max-width: 1200px; 
}

p.mail-con{
		font-size:  1.8rem;
		line-height: 1.5;
		margin: 30px auto 0 auto;
		padding: 0;
		max-width: 1200px; 
}

/* check */
ul.checkbar{
		margin: 40px auto 0 auto;
		padding: 0;
		text-align: center;
		max-width: 1210px;
}

li.check{
		display: inline-block;
		font-size:  1.8rem;
		width: 395px;
		line-height: 1;
		text-align: center;
		list-style-type: none;
		margin: 0 3px 0 0;
		padding: 12px 0 12px 0;
		background-color: #eef0f1;
		color: #007b44;
		position: relative;
}

li.check:first-child{
		color: #fff;
		background-color: #007b44;
}

li.check::before{
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 21px solid transparent;
		border-left: 21px solid #fff;
		right: -47px;
		top: 0px;
		z-index: 1;
}



li.check:first-child::after{
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 21px solid transparent;
		border-left: 21px solid #007b44;
		right: -42px;
		top: 0px;
		z-index: 1;
}

li.check:nth-child(2)::after{
		content: "";
		position: absolute;
		width: 0;
		height: 0;
		border: 21px solid transparent;
		border-left: 21px solid #eef0f1;
		right: -42px;
		top: 0px;
		z-index: 1;
}

/*form */
#form{
		max-width: 1200px; 
		margin: 45px auto 0 auto;
}

table{
		font-size: 1.6rem;
		border-collapse: collapse;
		padding: 0;
		width: 100%;
}

th{
		color: #007244;
		font-weight: normal;
		z-index: -1;
		background: #f5f5f5;
		border: solid 1.5px #dcdcdc;
		padding: 5px 30px 5px 0;
		position: relative;
		text-align: center;
		width: 296px;
		
}

th.lavel::after{
		display: inline;
		content: '必須項目';
		position: absolute;
		right: 8px;
		top: auto;
		bottom: auto;
		color: #fff;
		background: #ff0000;
		font-size: 1.4rem;
		padding: 5px 8px;;
}

td{
		font-size: 1.6rem;
		color: #969696;
		border: solid 1.5px #dcdcdc;
		border-left: none;
		padding: 0 10px 0 0;
}

td p{
		display: inline-block;
		width: 180px;
		vertical-align: middle;
		position: relative;
		margin: 10px 0;
		padding-left: 30px;
		letter-spacing: -0.9px;
}

td p::before{
		content: "(例)";
		position: absolute;
		top: 0;
		left: 0;
}

input#form-input{
		font-size: 1.6rem;
		min-width: 62%;
		height: 35px;
		border: none;
		outline: solid 1px #dcdcdc;
		border-top: solid 4px #f5f5f5;
		border-left: solid 4px #f5f5f5;
		box-sizing:border-box;
		margin: 10px 15px 10px 10px;
}

textarea{
		font-size: 1.6rem;
		width: 62%;
		height: 205px;
		outline: solid 1px #dcdcdc;
		border: none;
		border-top: solid 4px #f5f5f5;
		border-left: solid 4px #f5f5f5;
		margin: 10px 15px 4px 10px;
}

p.med-buy{
		color: #fff;
		font-size: 1.8rem;
		background: #007b44;
		text-align: center;
		margin: 45px auto;
		padding: 20px 0;
		line-height: 1px;
}

p.medart{
		color: #007b44;
		font-size: 1.8rem;
		background: #f5f5f5;
		text-align: center;
		margin: 45px auto;
		padding: 18px 0;
		line-height: 1px;
		max-width: 1200px;
}

div.medart-sent{
		margin: 0 auto;
		padding: 0;
		max-width: 1200px;
}

p.medart-chui{
		font-size: 1.8rem;
		padding: 0 0 0 185px;
		margin: 0;
		line-height: 1.7;
		letter-spacing: -0.5px;
		position: relative;
}

p.medart-chui:first-child::before{
		content: '■営業時間';
		position: absolute;
		top: 0;
		left: 18px;
}

p.medart-chui:nth-child(2)::before{
		content: '■配送業者';
		position: absolute;
		top: 0;
		left: 18px;
}

p.medart-chui:nth-child(3)::before{
		content: '■配送料金';
		position: absolute;
		top: 0;
		left: 18px;
}

p.medart-chui:nth-child(4)::before{
		content: '■お支払い方法';
		position: absolute;
		top: 0;
		left: 18px;
}

p.medart-chui:nth-child(5)::before{
		content: '■返品について';
		position: absolute;
		top: 0;
		left: 18px;
}

p.medart-chui:nth-child(6)::before{
		content: '■その他のご注意';
		position: absolute;
		letter-spacing: -0.5px;
		top: 0;
		left: 18px;
}

p.medart-chuilast{
		font-size: 1.8rem;
		margin: 0;
		padding: 0 0 0 18px;
}
p.medart-chuilast a{
		color: #04c;
}

p.medart-chuilast a:hover{
		opacity: 0.8 ;
		-moz-opacity: 0.8;
}
#submit{
		width: 500px;
		text-align: center;
		margin: 50px auto 70px auto;
		background: #007b44;
		border-radius: 5px;

}

#btn-submit{
		background: none;
		border: none;
		color: #fff;
		font-size: 2rem;
		padding: 10px 0;
}	

#submit:hover{
		opacity: 0.9;
		-moz-opacity: 0.9;
}

/* to Top */
.totop{
			background-color: #b4b4b4;
			border-bottom: solid 2px #dcdcdc;
			padding: 0;
			margin: 0;
}


.totop p{
			text-align: center;
			color: #fff;
			font-size: 1.5rem;
			font-weight: bold;
			margin: 0;
			padding: 11px 0;
}

#totop{
			text-align: center;
			margin: 0;
			padding: 0;
}

#totop img{
			width: 27px;
			height: 27px;
			position: relative;
			top: 13.5px;
}



/* footer */
ul.footer,
ul.footer ul{
			margin: 0;
			padding: 0;
			font-size: 1.3rem;
}

ul.footer{
			display: flex;
			justify-content: center;
			margin: 50px auto 0 auto;	
}



ul.footer li{
			list-style-type: none;
}

li.footer-info:first-child{
			margin-right: 190px;
}


li.footer-logo img{
			width: 181px;
			height: 52px;
}

li.address{
			line-height: 1.7;
			margin-top: 25px;
}

li.footer-menu{
			line-height: 2.3;
}

.footer-text{
			font-size: 1.6rem;
			font-weight: bold;
			color: #007b44;
}

.footer-text a{
			color: #007b44;
}

.footer-text a:hover{
			 opacity: 0.6;
			 -moz-opacity: 0.6;
}

.cate a:hover{
			opacity: 0.6;
			 -moz-opacity: 0.6;
}

			

/* footer-base */
ul.footer-base{
			background-color: #007b44;
			list-style-type: none;
			display: flex;
			 justify-content: space-between;
			padding: 15px 120px;
			margin-top: 40px;
}

ul.footer-base li.text{
			margin-top: 8px;
			padding: 0;
			color: #fff;
			font-size: 1rem;
}

ul.footer-base img{
			width: 147px;
			height: 23px;
}

/* media ceri */
@media only screen and (max-width: 1199px)
{
	
html,body{
		width: 1200px;
			
}
}

@media only screen and (max-width: 1500px)
{
h1{
		margin: 45px 120px 0 120px;
}

p.mail-con{
		margin: 30px 120px 0 120px;
}

#form{
		margin: 45px 120px 0 120px;
}
p.medinfo{
		margin: 45px 120px;
}

li.check{
		width: 316px;
}

p.medart{
		margin: 45px 120px;
}

div.medart-sent
{
		margin: 0  120px;
}


}