@charset "utf-8";
	       /*======全てのページに共通なｓｔｙｌｅ======*/
html {
	font-size: 16px;
}
h1 {
	font-size: 1.6rem;
}
h2 {
	font-size: 1.2rem;
}
body {
	color: #444;
	margin: 0;
}
h1 {
	margin: 0;
}
main p:last-child {
	margin-bottom: 0;
}
.main-title {
	margin: 0;
}
.copyright {
	margin: 0;
}
.img-responsive {   /*画像をレシポンシヴに*/
	width: 100%;
	height: auto;
}
.top {			/*ページトップに帰るボタンに使用*/
	font-size: larger;
	font-weight: bolder;
	color: skyblue;
	text-decoration: none;
	text-shadow: 2px 2px 2px #444;
}
a:hover {
	opacity: 0.5;
}
a[target="_blank"]::after { 	/*リンクの後ろにnote画像をつける*/
	content: url(../images/opentab.png);
}
.bs {					/*段落間の調整*/
	margin-bottom: 2em;
}
.ss {					/*段落間の調整*/
	margin-bottom: 0.5em;
}
.align-center {			/*要素を中央配置*/
	text-align: center;
}
.float-box {			/*フロートBOX*/
	float: left;
	margin: 10px;
}

				/*=====文字装飾======*/
.bold {					
	font-weight: bold;
}
.brown-bold {			
	font-weight: bold;
	font-size: 1.2em;
	color: brown;
}
.green-bold {
	font-weight: bold;
	font-size: 1.2em;
	color: green;
}
.orangered-bold {
	font-weight: bold;
	font-size: 1.2em;
	color: orangered;
}
.blue-bold {
	font-weight: bold;
	font-size: 1.2em;
	color: blue;
}
.blue-shin {
	font-weight: normal;
	color: blue;
}
				/*=======区切り線=======*/
.separator {
	width: 100%;
	height: 2px;
	background:#ecd0bc;
}

			/*=======テンプレートのベースデザイン=======*/

	/*コンテナーの最大幅を指定*/
.container {
		margin: 0 auto 0 auto;
		max-width: 800px;
}
		/*section部の２カラム実現のためflexに*/
section .container {
		display: flex;
		flex-flow: column;/*小画面の時縦並び*/
}
@media only screen and (min-width: 768px) {
section .container {
		flex-flow: row; /*画面が大きいときに横並び、columnに設定しているのでここでrowに*/
	}
}
	/* 
	各パートにパディング、背景、テキスト色などを指定する
	<div class="container">の子要素に指定する
	*/
.header-inner {
		padding: 10px 10px 0 10px;
		background: #bad7f5;
}
				/*=======メイン部======*/
main {
	padding: 20px 10px 20px 10px;
	background: #fffde3;
	
}
@media only screen and (min-width: 768px) {
	main {
		flex: 1 1 auto; /*拡大縮小する*/
		max-width: 580px;
	}
}
	/*=======サイドバー部=======*/
.sidebar {
	padding: 20px 10px 20px 10px;
	background: #c0f5b9;
}
@media only screen and (min-width: 768px) {
	.sidebar {
		flex: 0 0 180px; /*伸縮しないで幅固定*/
	}
}	
.sidebar-inner {
	position: sticky; /*通常の位置に配置され、その要素の位置がウインドウ全体を基準として、指定位置の条件を満たすとフロートされます*/
	top: 10px;
	display: flex;
	flex-flow: row wrap;
}
.sidebar-inner a::after { /*サイドバー内のリンクにはnote画像を付けない*/
	content: none;
}
@media only screen and (min-width: 768px) {
	.saidebar-inner {
		flex-flow: column;/*画面が大きいとき中身が縦並び*/
		align-items: center;/*itemをセンター位置に*/
	}
}
				/*======= ヘッダー部=======*/
.hamburger {
	border: none;
	width: 50px;
	height: 50px;
	background: url(../images/hamburger.png) no-repeat;
	background-size: contain;  /*画像サイズを50px*50pxの中に収める*/
}
@media only screen and (min-width: 768px) {
	.hamburger {
		display: none; /*画面大きい時hamburgerボタンを表示しない*/
	}
}
				/*======== ナビゲーション========*/
.navbar {
	display: none;/*画面小さいときのナビメニューを隠す設定*/
	margin: 0;
	padding: 0;
	list-style-type: none;
	background: #565656;
}
.navbar li {
	padding: 1em 0 1em 0;
	border-bottom: #fff solid 0.5px;
}
@media only screen and (min-width: 768px) {
.navbar {
	display: flex !important;/*画面大きいときにFlexを適用、flex-flowは初期値でrowになる*/
	}
.navbar li {
	padding: 0;
	border: none;
}
}
.navbar li a {
	display: block; /*インラインからブロック要素に変えてクリック領域を拡大する*/
	padding: 10px 8px;
	color: #fff;
	text-decoration: none;
}
.navbar li a::after { /*大画面の時はcontent後ろのopentab画像をなくす*/
	content: none;
}
.navbar li a:hover {
	background: #fff;
	color: #565656;
}
		    /*=======レイアウト用botton title=======*/
				
.home-catch {				
	text-align: center;
	text-shadow: 2px 2px 3px rgb(68, 67, 67);
	color: rgb(7, 196, 7);
}
.home-catch2 {		/*恋人参の*/
	text-align: center;
	text-shadow: 2px 2px 3px rgb(68, 67, 67);
	color: rgb(252, 164, 178);
	font-family: serif;
	margin-bottom: 40px;
}
			
	/*タイトルBOX*/
.title1 {	 	/*トップページで*/
	background: skyblue;
	margin-right: auto;
	margin-left: auto;
	width: fit-content;
	box-shadow: 2px 2px silver;
	color: red;
}
.title2 {		/*恋人参で*/
	color: rgb(243, 116, 32);
	background: #deeefe;
	margin-right: auto;
	margin-left: auto;
	margin-bottom: 5px;
	width: fit-content;
	box-shadow: 3px 3px 6px silver;
}
		/*コメントBOXデザイン1*/
.box1 {
    padding: 0.5em 1em;
    margin: 1em 0;
    color: #474747;
    background: whitesmoke;/*背景色*/
    border-left: double 7px burlywood;/*左線*/
    border-right: double 7px burlywood;/*右線*/
}

.box2 {			/*色付き枠線有り*/
	margin: 0;
	padding: 0;
	border: solid 2px rgb(7, 196, 7);
	background: whitesmoke;
}
.box3 {						/*box1の色違い*/
	padding: 0.5em 1em;
    margin: 1em 0;
    color: darkblue;
    background: whitesmoke;/*背景色*/
    border-left: double 7px burlywood;/*左線*/
    border-right: double 7px burlywood;/*右線*/
}
.box4 {				/*--枠線のない小さいbox 人参栽培のmainのflexbox内で使用--*/
	max-width: 260px;
	text-align: center;
}
.box4 span {
	color: blue;
}
.box5 {				/*margin-bottomにスペース有り。spanに色文*/
	padding: 10px;
	margin-bottom: 2em;
}
.box5 span {
	color: blue;
}
.box5 h2 {
	color: darkorange;
}
.box6 {					/*何でもない文字色有りのbox*/
	color: blue;
}
.box7 {					/*max-widthを設定spanがブルーbox4とセットで3個並ぶ*/
	max-width: 260px;
}
.box7 span {			/*人参栽培のmainのflexbox内で使用*/
	color: blue;
}
.box8 {					/*margin-topに余白が有るだけ*/
	margin-top: 40px;
}
@media only screen and (min-width: 768px) {
	.box8 {
		max-width: 550px;
		margin-top: 40px;
	}
}

		/*--恋人参のyoutube画像で使用--*/
.box9 {
	text-align: center;
	color: rgb(4, 112, 4);
	margin-bottom: 40px;
}
.box9 p {
	line-height: 1em;
	font-weight: 600;
}
.box9 h2 {
	font-family: serif;
	line-height: 0.8rem;
	color: tomato;
}

		/*トップページのコンテンツ選択ボタンのｓｔｙｌｅ*/
		
.content-botton1 {
	width: 150px;
	height: 150px;
	padding: 0px;
	margin: 10px;
	box-shadow: 2px 2px 4px; 
}
.content-botton2 {		/*コンテンツボタン2と3はトップページ以外*/
	text-align: center;
	width: 150px;
	height: 50px;
	padding: 0px;
	margin: 10px;
	box-shadow: 2px 2px 4px;
	border-radius: 10%;
	background: #ecd0dc; 
}
.content-botton3 {		/*偽装ボタン*/
	color: blue;
	text-align: center;
	line-height: 50px;
	width: 150px;
	height: 50px;
	padding: 0px;
	margin: 10px;
	border-radius: 10%;
	background:#bad7f5 
}
		/*アクティブ時にコンテンツボタンが窪み影が消える*/
.content-botton1:active {
	transform: translateY(+5px);
	transition: 0.2s;
	box-shadow: 0px 0px 0px;
}
.content-botton2:active {
	transform: translateY(+5px);
	transition: 0.2s;
	box-shadow: 0px 0px 0px;
}
		/*aの範囲をボタン全体に広げる*/
.content-botton1 a { 
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color:coral;
}
.content-botton2 a { 
	text-align: center;
	line-height: 50px;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
	color: rgb(243, 116, 32);
	font-weight:700;
}
		/*コンテンツ選択ボタンの背景画像*/
 #n-saibai {
	 background: url(../images/661236.jpg);
	 background-repeat: no-repeat;/*繰り返しなし*/
	 background-size: contain;/*親要素の大きさに合わす*/
}
 #n-hassouga {
	background: url(../images/22265171.jpg);
	background-repeat: no-repeat;
	background-size: contain;
}
 #koe {
	background: url(../images/koe.gif);
	background-repeat: no-repeat;
	background-size: contain;
}
#blog {
	background: url(../images/logo5.gif);
	background-repeat: no-repeat;
	background-size: contain;
}
#hozon {
	background: url(../images/2612961.jpg) ;
	background-repeat:no-repeat ;
	background-size: contain;
}
#cyuumon {
	background: url(../images/shop.gif) ;
	background-repeat:no-repeat ;
	background-size: contain;
}
#kateisaien {
	background: url(../images/813261.jpg) ;
	background-repeat:no-repeat ;
	background-size: contain;
}
#okiniiri {
	background: url(../images/22309664.jpg) ;
	background-repeat:no-repeat ;
	background-size: contain;
}
#siken {
	background: url(../images/22206275.jpg) ;
	background-repeat:no-repeat ;
	background-size: contain;
}
#koininjin {
	background: url(../images/22221034.jpg) ;
	background-repeat:no-repeat ;
	background-size: contain;
}
#sizen {
	background: url(../images/22244857.jpg) ;
	background-repeat:no-repeat ;
	background-size: contain;
}

					/*=========お知らせボード==========*/				 
.osirase {
	position: relative;
	width: 80%;
	margin-top: 10px;
	margin-right: auto;
	margin-left: auto;
	background-color: #ecd0dc;/*背景色*/
    box-shadow: 0 0 0 5px #ecd0bc;/*背景色*/
    border-top: 1px dashed #fff;/*点線の色*/
    border-bottom: 1px dashed #fff;/*点線の色*/
}
.osirase ul {
	list-style: none;
	color: rgb(27, 109, 202);
}
.osirase li:first-child{
	text-align: center;
	font-size: 1.2rem;
	font-weight: bold;
	color: red;
}
.suzu {
	position: absolute;
	top: 0;
	left: 0px;
	width: 50px;
	height: auto;
}
		/*=======トップページ以外で使用するボックスｓｔｙｌｅ=======*/



							/*--sizen内のtable--*/
.table-sizen {
	border-collapse: collapse;
	background: whitesmoke;
	width: 100%;
	margin: 10px;
}
.table-sizen th, td {
	border: 2px double rgb(216, 198, 198);
	width: 50%;
	padding: 2px;
}
		/*--お客様の声のtable--*/
.table-takara{
	border-collapse: collapse;
	width: 100%;
	margin: 10px;
	border:none
}
.table-takara td ,th {
	border: none;
}
.table-takara .name {
	width: 20%;
}
.table-takara .comment {
	border-bottom: solid 1px palevioletred;
}
.flex-box1 {				/*人参栽培のmainのboxに使用*/
	display: flex;
	flex-flow: row wrap;
	justify-content: space-around;
}
				/*========フッター部=======*/
	.footer-inner {
		padding: 20px 16px 10px 16px;
		background: #bad7f5;
	}
		/*--恋人参の使用ソフト説明欄のテーブル--*/
.table-enta {
	border-collapse: collapse;
	width: 100%;
	border: 1px dotted palevioletred;
}

.table-enta tr, td {
	border: 1px dotted palevioletred;
}

.table-enta .name {
	width: 20%;
}

		/*--youtube画像のresponsive--*/
.iframe {
	position: relative;
  height: 0;
  padding-top: 56.25%; 		/*paddingは親要素の横幅を基準に計算するからこうなる*/
}
.iframe iframe {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}