@charset "utf-8";

.clear:after {
    content: '';
    display: block;
    clear: both;
}

.clear_b {
	clear: both;
}

.mt20_sp20 {margin-top: 20px;}


/* サイドメニューとコンテンツ
---------------------------------*/
.switch {
	display: flex;
	flex-wrap: wrap;
}

/* サイドメニュー */
#side {
	width: 220px;
	margin-right: 40px;
}
#side ul {
	font-size: 90%;
	list-style-type: none;
	padding: 0px;
	margin-top: 20px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 30px; 
}
#side ul li {
	display: block;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #3D3D3D;
	background-image: url(../images/side_vec02.gif);
	background-repeat: no-repeat;
	background-position: left center;
}
#side ul li:hover {
	background-color: #eeeeee;
	background-image: url(../images/side_vec.gif);
}
#side ul li a {
	color: var(--color-link-green);
	text-decoration: none;
	display: block;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 20px;
}
#side ul li a:hover {
    opacity: 1;
}

/* コンテンツ */
.main {
	width: 640px;
	margin-bottom: 20px;
}


/* ページ共通
---------------------------------*/
.main a:hover {
	opacity: 0.8;
}

/* タイトル画像　SPではみ出ないように */
h2 img {
    max-width: 100%;
    height: auto;
}

/* 下層画像 */
.main img {
	max-width: 100%;
	height: auto;
}

/* 下層メインビジュアル */
.kasou_visual img {
	width: 100%;
	height: auto;
}

.cb {
	clear: both;
}
.table01 {
	font-size: 80%;
	line-height: 140%;
}
.table01 td {
    vertical-align: top;
}

.table02 {
	font-size: 90%;
	line-height: 140%;
}
.main h2 {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	border-bottom-color: var(--color-green);
	padding-bottom: 5px;
	margin: 20px 0;
}
.main p {
	line-height: 160%;
	font-size: 90%;
}
.main h3 {
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #666;
	padding-bottom: 5px;
}
.main h4 {
	color: #333;
	font-weight: normal;
	border-left-width: 15px;
	border-left-style: solid;
	border-left-color: var(--color-link-green);
	padding-left: 5px;
}
.table03 {
	font-size: 80%;
	line-height: 140%;
	border-top-width: 1px;
	border-left-width: 1px;
	border-top-style: solid;
	border-left-style: solid;
	border-top-color: #999;
	border-left-color: #999;
}
.table03 th {
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999;
	border-bottom-color: #999;

	background: #f5edc8;
	vertical-align: center; /* 水平中央 */
	width: 20%;
	white-space:nowrap;
	text-align: left;
}
.table03 td {
	border-right-width: 1px;
	border-bottom-width: 1px;
	border-right-style: solid;
	border-bottom-style: solid;
	border-right-color: #999;
	border-bottom-color: #999;
}
.photo01 {
	padding: 3px;
	border: 1px solid #CCC;
}
.li01 {
	font-size: 90%;
	line-height: 160%;
}
.box01 .prd_ind_txt {
	float: left;
	font-size: 80%;
	line-height: 160%;
	padding-top: 10px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
}
.box01 {
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #CCC;
	padding-top: 20px;
	padding-right: 10px;
	padding-bottom: 20px;
	padding-left: 10px;
}
.f_left {
	float: left;
}

.f_right {
	float: right;
}
.txt_s {
	line-height: 140%;
	font-size: 80%;
}
.l_box {
	float: left;
	max-width: 480px;
	width: 100%;
}
.r_box {
	float: right;
	padding: 6px;
	border: 1px solid #CCC;
}
.photo02 {
	padding: 2px;
	border: 1px solid #CCC;
}
.box02 {
	border-top-width: 2px;
	border-top-style: dotted;
	border-top-color: #CCC;
}
.r_box2 {
	float: right;
	padding: 6px;
	font-size: 80%;
	line-height: 140%;
	margin: 4px;
}

/* PCで改行 */
.br-pc {
	display: block;
}


/* ----------------------

ブロックのデザイン調整

----------------------*/
/* ボタン */
.wp-block-button__link {
	background-color: var(--color-green)!important;
	font-size: 100%!important;
	margin-bottom: var(--space20);
}
.wp-block-button__link:hover {
	background-color: var(--color-hover-green)!important;
	transition: ease .2s;
}


/* ----------------------

商品紹介

----------------------*/
/* --- 水稲育苗用培土ページ --- */
.leftimg_flex, .rightimg_flex {
	display: flex;
}
.leftimg_flex img, .rightimg_flex img {
	 width: 250px;
	 height: 235px;
}

/* 順序入れ替え */
.rightimg_flex div {order: 1;}
.rightimg_flex img {order: 2;}

/* --- 火山砂利・山砂ページ --- */
.flex_spacebetween {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}


/* ----------------------

アクセス

----------------------*/
/* --- Google Map --- */
.m-w630 {
	max-width: 630px;
}
.googlemap {
	position:relative;
	width:100%;
	height:0;
	padding-top: 50%; /* 高さ　比率のままレスポンシブ */
}
.googlemap iframe {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}


/* --- 拡大マップと交通情報　横並び --- */
.w310 { width: 310px;}

/* 他ページ共有 */
/* ぐんまちゃんの画像と横並び */
.img_position {
	position: relative;
}
.img_position h4, .img_position ol { /* h4はアクセス、olは品質管理用 */
	position: absolute;
	top: 0;
	left: 0;
}
.img_position p { /* アクセス用 */
	position: absolute;
	top: 60px;
	left: 0;
	margin: 0;
}
.gunmachan_img {
	float: right;
}


/* ----------------------

お問い合わせフォーム

----------------------*/
.contactform td { padding: 15px 10px;}
.contactform td p {	margin: 0;}

/* 入力欄のサイズ */
.boxsize_s input, .boxsize_m input {
    padding: 9px;
	border: 1px solid #999;
	width: 100%;
}

/* 入力欄　郵便番号用 */
.yuubin input {
	width: calc(100% - 16px);
}

/* テキストエリア */
textarea {
	resize: vertical; /* 横は可変禁止 */
	width: 100%;
    min-height: 150px;
    max-height: 400px;
	border: 1px solid #999;
	padding: 9px;
}

/* 見えない送信ボタンの横にあるもの */
span.wpcf7-spinner {
    display: none;
}

/* SPで改行 */
.br-sp {
	display: none;
}

/* 送信ボタン */
.submit_btn input {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto;
	max-width: 200px;
    width: 100%;
    color: var(--color-white);
	background: var(--color-green);
	border: 1px solid var(--color-link-green);
    border-radius: 25px;
    padding: 15px;
    text-decoration: none !important;
	margin-top: var(--space40);
	cursor: pointer;
	font-size: var(--fz16);
}
.submit_btn input:hover {
	background-color: var(--color-hover-green)!important;
	transition: ease .2s;
}


/* ----------------------

投稿、アーカイブ、404

----------------------*/
/* .mainに見出し等のcssが記載されており取れないため、不要なところはsingle_styleで変更 */
.single_style {
	float:none!important;
	width: 100%!important;
}

.single_title, .archive_title {
    font-weight: var(--fw700);
    border-bottom: none !important;
	margin-top: var(--space40);
}
.single_title {
    margin-bottom: 5px !important;
}

.single_day {
	color: var(--color-gray);
	margin-top: 0!important;
	margin-bottom: var(--space40);
}

.single_style img {
	max-width: 600px!important; /* 画像最大サイズ */
	width: 100%;
}

/* TOPICS一覧をみるボタン、トップページへボタン */
.border_btn a {
	display: flex;
	align-items: center;
    justify-content: center;
	margin: auto;
	margin-top: var(--space40);

	border: 1px solid var(--color-gray);
	color: var(--color-default-text);

	max-width: 200px;
	width: 100%;	
	padding: 15px;
	font-size: var(--fz16);
	text-decoration: none!important;
}
.border_btn a:hover {
	transition: ease .2s;
	opacity: 1;
	color: var(--color-green);
	border: 1px solid var(--color-green);
}

/* アーカイブ */
.archive_table {
	font-size: var(--fz16);
}
/* 日付 */
.archive_table td {
	padding-top: 5px;
	padding-bottom: 5px;
}
.archive_table td:first-child {
	width: 110px;
}


/* ページナビゲーション　TOPICS一覧用
----------------------------------------------- */
.pagination {
	margin: 40px auto 0;
}
.pagination a {
	text-decoration: none!important; /* 下線が自動で引かれてしまうのを回避 */
}
.pagination > div {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
}
.pagination > div .page-numbers {
	width: 41px;
	height: 41px;
	color:var(--color-green);
	background-color: var(--color-white);
	border: 1px solid var(--color-green);
	margin: 0px 5px;
	font-weight: var(--fw600);
    text-align: center;
    line-height: 41px;
	border-radius: 50%;
}

/* 閲覧しているページ */
.page-numbers.current {
	color:var(--color-white)!important;
	background-color: var(--color-green)!important;
	cursor: default!important;
}

/* 省略の3ドット */
.page-numbers.dots {
	color: var(--color-green);
	cursor: default;
}

/* 未選択ページ、左右矢印 */
.pagination > div > a {
	color: var(--color-green);
    cursor: pointer;

    display: flex;
    justify-content: center;
    align-items: center;
}

/* 最初と最後 */
.pagination > div > .page-numbers:first-child {margin-left: 0!important;}
.pagination > div > .page-numbers:last-child {margin-right: 0!important;}

/* ------------ 矢印 ------------ */
/* 共通 */
.pagination > div > a.prev, .pagination > div > a.next { position:relative;}
.pagination > div > a.prev::after,
.pagination > div > a.next::after {
    content: '';
    width: 9px;
    height: 9px;
	position: absolute;
	top: 50%;
    left: 50%;
}

/* 左向き矢印 */
.pagination > div > a.prev::after {
    border-top: 2px solid var(--color-green);
    border-right: 2px solid var(--color-green);
    transform: translate(-44%, -50%) rotate(225deg);
    -webkit-transform: translate(-44%, -50%) rotate(225deg);
    -ms-transform: translate(-44%, -50% rotate(225deg));
}
/* 右向き矢印 */
.pagination > div > a.next::after {
    border-top: 2px solid var(--color-green);
    border-right: 2px solid var(--color-green);
    transform: translate(-56%, -50%) rotate(45deg);
    -webkit-transform: translate(-56%, -50%) rotate(45deg);
    -ms-transform: translate(-56%, -50% rotate(45deg));
}
/* ------------ 矢印　ここまで ------------ */

/* 404 */
.mb50 { margin-bottom: 50px;}


/* 電話　pcの時はタップ不可 */
@media screen and (min-width: 768px) {
	a[href^='tel:'] {
		pointer-events: none;
	}
}

.color_black { color: var(--color-default-text)!important;}


@media (max-width: 1050px) {
	/* サイドメニューとコンテンツ
	---------------------------------*/
	#side {
        max-width: 220px;
        width: 100%;
    }
	#side ul {
		margin-left: 0;
	}	
}

@media (max-width: 940px) {

	.main {
		width: 100%;
	}

	/* サイドメニューとコンテンツ
	---------------------------------*/
	.switch {
		display: flex;
		flex-wrap: wrap;
	}

	/* 順番入れ替え */
	#side {
		order: 2;
		margin-right: 0;
	}
	.main {
		order: 1;
	}

	#side ul {
		margin-top: 0;
	}

	
	/* ページ共通
	---------------------------------*/
	.main p, .main th, .main td, .txt_s,.footer_box01, .boxsize_s input, .boxsize_m input,.main li,textarea {
		font-size: var(--fz16)!important;
	}

	.table01 {
		font-size: var(--fz16);
		width: 100%;
	}

	.main h2:not(.single_title) {
		font-size: 1.8rem;
	}
	.main h3 {
		font-size: 1.6rem;
	}


	/* ----------------------

	会社紹介（経営理念、社長挨拶）のタイトル画像サイズ調整

	----------------------*/
	img.aboutus_titleimg_sise {
		height: 18px;
		width: auto;
	}
}


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

	アクセス

	----------------------*/
	.googlemap {
		padding-top: 90%;
	}

	.map_traffic_wrap tr td {
		display: block;
	}

	.adress {margin-top: 20px;}
	.adress td {
		display: block;
	}

}


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

	/* SPで改行解消 */
	.br-pc {
		display: none;
	}

	/* ----------------------

	商品紹介（水稲育苗用培土,火山砂利・山砂ページ）

	----------------------*/
	.leftimg_flex, .rightimg_flex, .flex_spacebetween {
		display: block;
	}

	/* 画像と商品名は中央ぞろえ */
	.leftimg_flex img, .leftimg_flex p:first-child, .rightimg_flex img, .rightimg_flex p:first-child {
		text-align: center;
		margin: auto;
	}

	/* --- 園芸用土ページ --- */
	/* 商品2列をspでは一列　画像と商品名は中央ぞろえ */
	.prd02_table td {
		display: block;
		width: 100%;
	}
	.prd02_table img, .prd02_table p strong {
        text-align: center;
        margin: auto;
        display: block;
    }


	/* ----------------------

	アクセス

	----------------------*/
	/* --- 拡大マップと交通情報　横並び --- */
	.w310 { max-width: 310px; width: 100%;}
	.img_position {
		position: static;
	}
	.img_position h4, .img_position p ,.img_position ol {
		position: static;
	}
	.gunmachan_img {
		float: none;
		margin-top: 15px;
	}

}


@media (max-width: 485px) {

	.r_box, .r_box2 {
		float: none;
	}

	/* アーカイブ 日付 */
	.archive_table td:first-child {
		width: 85px;
		vertical-align: top;
	}


	/* ----------------------

	会社紹介
	会社概要のテーブル
	----------------------*/
	.profile_gaiyou_table td:first-child {
		min-width: 66px;
	}


	/* ----------------------

	お問い合わせフォーム

	----------------------*/
	.contactform th, .contactform td {
		display: block;
		width: 100%;
	}
	.contactform p {
		margin: 5px auto;
	}

	/* SPで改行 */
	.br-sp {
		display: block;
	}
	
}