/*----------------------------------------------テスト用サイト*/
@charset "utf-8";


* {
	box-sizing: border-box;
}

p,li,ul,ol {
	margin: 0px;
	padding: 0px;
}


ul.gm {
	width: 900px !important;
/*	display: flex !important;*/
	justify-content: space-between;
}

nav {
	background: rgba(118, 177, 78, 0.8) !important;
}

nav.sp-only {
	display: none;
}

.sp-only {
	display: none;
}

a.sp-only {
	display: none;
}

span.pc-only {
	display: unset;
}

main {
	background: url(../img/sky.png) top center no-repeat;
	background-size: contain;
	padding-top: 10%;
}

.particles_title {
	top: 0px !important;
	left: 0px !important;
	text-align: center;
	width: 100%;
	position: relative !important;
	-webkit-transform: translate(0%, 0%) !important;
	transform: translate(0%, 0%) !important;
	margin-bottom: 10%;
}

.particles_title img {
	height: auto !important;	
}

.particles_box {
	height: auto !important;
}

p.graun-titletext {
	display: inline-block;
	padding: 10px 40px;
	font-size: 20px;
	background: #ff6969;
	color: #fff;
	border-radius: 40px;
}

.graun-h1 {
	padding: 10px 0px !important;
	margin-bottom: 50px;
	font-size: 50px;
	font-weight: bold;
	color: #344c88;
	text-shadow: 2px 2px 0px rgba(251,130,25,0.5);
	text-shadow: 2px 2px 0px rgba(255,255,255,0.5);
	
}
/*------------------------白ボックスより↑の要素*/
#graun {
    margin: 0 auto 50px;
    padding: 50px 30px 45px;
    background: rgba(241 241 241 / 60%);
    width: 1050px;
    position: unset !important;
    z-index: 5;
    top: 490px;
    left: 0;
    right: 0;
    box-shadow: 0px 0 9px rgb(0 0 0 / 20%);
    border-radius: 10px;
}

#graun h3 p {
	margin-bottom: 8%;
}

span.yellow-marker {
	background: linear-gradient(transparent 60%, #f8f875 60%);
	font-weight:bold;
	font-size: 30px;
	color: #344c88;
	padding: 4px 16px;
	text-align: left;
	display: inline-block;
	width: 80%;
	position: relative;
}

h3 span:before, h3 span:after {
	position: unset !important;
	top: 0% !important;
	width: auto !important;
	border: none !important;
}
/*-------------凄い惜しいやつ。できればこっちを採用したい。
#graun h3 li:after {
	content: "";
	display: block;
	height: 20px;
	background: -webkit-linear-gradient(to right, #dada12, transparent);
	background: linear-gradient(to right, #dada12, transparent);
}
*/
#graun .graun-zennou {
	display: flex;
	justify-content: center;
	margin-bottom: 60px;
}

#graun .graun-zennou img {
	width: 30%;
	border-radius: 12px 0px 0px 12px;
}

#graun ul.graun-ul {
	background: #59af5a;
	border-radius: 0px 12px 12px 0px;
}

#graun ul.graun-ul li {
	font-size: 20px;
	list-style: none;
	padding: 6px 20px;
	color: #fff;
	border-bottom: 1px solid #0a7305;
}

#graun ul.graun-ul li:last-child {
	border-bottom: none;
}

/*--------------------------------------システム構成図、全農EDI標準対応、配分マスタ登録による自動計算*/

#graun .image {
	text-align: center;
	margin-bottom: 30px;
}

#graun .image img {
	width: 80%;
}

#graun h2 {
	border-bottom: dashed 2px #f69b00;
	padding-bottom: 10px;
	margin: 0 0 20px !important;
	font-weight: bold;
}

#graun ul.graun-ul-02 {
	font-size: 22px;
}

#graun .ul-center {
	display: flex;
	justify-content: center;
	margin-bottom: 30px;
}

#graun p.big {
	font-size: 22px;
	text-align: center;
	margin-bottom: 30px;
}

#graun .flex {
	display: flex;
	justify-content: space-around;
}

#graun h4 {
	padding-top: 20px;
	font-size: 26px;
	margin-bottom: 30px;
}

#graun .graun-content {
	margin-bottom: 120px;
}

/*----------------------------------テーブル*/

table {
  border-collapse: collapse;
  border-spacing: 0;
}

.graun-table-oya {
	display: flex;
	justify-content: space-between;
	width: 90%;
	margin: auto auto 60px;
}

.graun-table {
	width: 48%;
}


.graun-table h5 {
	font-size: 22px;
	padding: 4px 20px;
	display: inline-block;
	margin-bottom: 10px;
	background: #f59d22;
	color: #fff;
	border-right: 7px solid #848484;
	box-shadow: 2px 2px 2px 0px rgba(0 0 0 / 40%);
}

.graun-table table{
  width: 100%;
  border-spacing: 0;
}

.graun-table table th{
	border-bottom: solid 2px #f69b00 ;
	width: 35%;
	vertical-align: middle;
}

.graun-table table td{
  border-bottom: solid 2px #ddd;
  text-align: center;
  padding: 10px 0;
}

/*お問い合わせ欄*/

h2.contact-h2 {
	margin: 0px 0px 20px !important;
	font-weight: bold;
	color: #fff;
	background: #9bd28c;
	background: #ff6969;
	padding: 20px !important;
	border-radius: 10px;
	border-bottom: none !important;
}

.graun-otoiawase {
	background: #d4d4d4;
	padding: 20px;
	border-radius: 20px;
}

span.big {
	font-size: 20px;
	display: block;
}

span.bigest {
	font-size: 36px !important;
	font-weight: bold;
	padding-left: 50px;
	background: url(../img/tel.svg)no-repeat left center;
	background-size: 13%;
}

.graun-otoiawase p {
	text-align: center;
}

/*--------------------------------フッター*/

footer {
	background: #7bb952 !important;
}

.graun-footer {
	display: flex;
	color: #fff;
	padding: 30px;
	margin: auto;
	width: 52%;
	justify-content: space-between;
}

.graun-footer p {
	margin-top: auto;
}

/*-----------------------------------PCのみ改行なし*/

br.sp-only {
	display: none;
}

br.tab-only {
	display: none;
}

/*---------------------------------------------------------------------------------------
 * 
 * 　タブレットCSS
 * 
---------------------------------------------------------------------------------------*/
@media screen and (max-width: 1249px) {

.graun-footer {
	width: 100%;
}

#graun {
	width: 90%;
}

ul.gm {
	width: 80% !important;
}

br.tab-only {
	display: unset !important;
}

span.yellow-marker {
	font-size: 24px;
	width: 90%;
}

/*---------------------------------------------------------------------------------------
 * 
 * 　スマホ用
 * 
---------------------------------------------------------------------------------------*/
  @media screen and (max-width: 767px) {
  
  main {
  	padding-top: 20%;
  }
  
  nav.pc-only {
  	display: none !important;
  }
  
  nav.sp-only {
 	display: unset !important;
  }

  a.sp-only {
	display: unset !important;
  }

  span.pc-only {
	display: none;
  }
  
  .sp-only {
  	display: unset !important;
  }

  
  #graun {
	  width: 90%;
  }
  
  .graun-h1 {
  	font-size: 30px;
  }
  
  .particles_title img {
  	width: 100% !important;
  }
  
  span.yellow-marker {
  	margin-bottom: 20px;
  	background: linear-gradient(transparent 0%, #f8f875 20%);;
  }
  
  p.graun-titletext {
  	font-size: 18px;
  }
  
  li.gm-sp a {
  	padding: 10px;
  	display: block;
  	color: #fff;
  }
  
  .drawer-nav {
  	overflow: scroll;
  }
  
  /*----------白ボックスより上の要素*/
  
  br.sp-only {
  	display: unset !important;
  }
  
  #graun .graun-zennou img {
  	width: 50%;
  }

  #graun ul.graun-ul li {
  	font-size: 18px;
  	padding: 10px 20px;
  }
  
  #graun ul.graun-ul-02 {
  	font-size: 16px;
  }
  
  #graun ul.graun-ul-02 li {
  	margin-bottom: 14px;
  }
  
  #graun p.big {
  	font-size: 18px;
  }
  
  #graun h2 {
  	font-size: 26px;
  }
  
  #graun h4 {
  	font-size: 22px;
  }
  
  #graun .image {
  	width: 100%;
	margin: auto auto 30px;
  }
  
  #graun .image img {
  	width: 100%;
  }
  
  #graun .flex {
  	display: unset !important;
  }
  
  .graun-zennou {
  	display: unset !important;
  }
  
  #graun .graun-zennou img {
  	width: 100%;
  	border-radius: 12px 12px 0px 0px;
  }
  
  #graun ul.graun-ul {
  	background: #59af5a;
	border-radius: 0px 0px 12px 12px;
	margin-bottom: 60px;
  }
  /*-----table*/
  
  .graun-table-oya {
  	display: block !important;
  }
  
  .graun-table {
  	width: 100% !important;
	margin: auto auto 30px;
  }
  
  /*--------------------------お問い合わせ*/
   h2.contact-h2 {
  	font-size: 18px;
  }
  
  span.bigest {
  	font-size: 25px !important;
  	padding-left: 24px;
  	background-size: 10%;
  }
  
  /*----------------------------フッター*/
  footer {
  	padding: 20px 10px !important;
  }
  
  .graun-footer {
  	width: 100%;
  	display: unset !important;
  	padding: 0px !important;
  }
  
  .graun-footer img {
  	width: 100%;
  	margin-bottom: 20px;
  }


  } /* media queryの閉じカッコ */
} /* media queryの閉じカッコ */