@charset "UTF-8";


/*---------- ページ全体の指定 ----------*/

html, body, header, section, article, nav, footer,
div, span, p, h1, h2, h3, h4,
ul, ol, li, dl, dt, dd,
table, tr, th, td, tbody, thead, tfoot {
  margin: 0;
  padding: 0;
}

img {border: 0;}

body {
  width: 100%;
  background-color: #ffffff;
  line-height: 1.7;
}

a:link {
/*--  color: #69821b; --*/
  color: #0000ff;
}

a:hover {
/*--  color: #99ab4e; --*/
  color: #ff0000;
}

a:visited {
/*--  color: #69821b; --*/
  color: #0000ff;
}

span.bd1 {
       color: #ff0000;
       font-size:x-large; 
}

span.bd2 {
       color: #ff0000;
       font-size:large; 
}

span.bd3 {
  width: 100%;
  height: auto;
}

p {
  padding: 15px;
  text-align: left;
  color: #000000;
  font-size: 16px;
}

p1 {
  padding: 15px;
  text-align: left;
  color: #000000;
  font-size: 13px;
}

p2 {
  padding: 15px;
  text-align: left;
  color: #000000;
  font-size: 14px;
}

img.photo {
  width: 100%;
  height: auto;
}

img.photo1 {
  width: 80%;
  height: auto;
}

input[type="text"] {
   font-size: 150%;
}

text-wrap{
  padding: 20px;
  text-align: left;
  word-break:break-all;
}

/*---------- ヘッダー ----------*/

header {
  width: 100%;
  background-color: #86cc66;
}

header h1 {
  padding: 5px 0 5px 0;
  text-align: center;
  color: #333333;
  font-size: 18px;
}

header h1 a {
  color: #ffffff !important;
  text-decoration: none;
  font-size: 18px;
}

header h1 a:hover {
  color: #999999 !important;
  text-decoration: underline;
  font-size: 18px;
}

header img.main_photo {
  width: 100%;
  height: auto;
}

#page_top {
  margin: 0;
  padding: 0;
}


/****メニュー全体****/
#menu{
	/*配置*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
}

/****メニュー開閉ボタン****/
#menu div{
	/*デザイン*/
	width: 45px;
	height: 45px;
	background: rgba(200,200,200,1);
	/*配置*/
	overflow: hidden;
	position: absolute;
	right: 2px;
	top: 2px;
}

#menu .menuopen{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

#menu .menuclose{
	/*デザイン*/
	color: rgba(255,255,255,1);
	font-size: 20px;
	/*配置*/
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	pointer-events: auto;
}

/****メニュー一覧****/
#menu ul{
	/*デザイン*/
	background: rgba(200,200,200,1);
	width: 80%;
	/*配置*/
	position: absolute;
	top: 50px;/*#menu divの高さ*/
	right: 0;
	display: none;
}

#menu li{
	/*デザイン*/
	padding: 10px;
	color: rgba(0,0,0,1);
	border-bottom: 1px rgba(255,255,255,1) solid;
	/*配置*/
	pointer-events: auto;
}

/****メニューオープン時****/
#menu:target .menuopen{
	/*配置*/
	display: none;
}

#menu:target .menuclose{
	/*配置*/
	display: block;
}

#menu:target ul{
	/*配置*/
	display: block;
}

/*** メインエフェクト ***/

/*---------- コンテンツ ----------*/

#content {
  padding: 6px;
}

section {
  margin: 0 0 8px 0;
}

section h2 {
  margin: 0 0 8px 8px;
  padding: 5px 0 3px 14px;
  font-size: 14px;
  color: #ffffff;
  border-bottom: solid 1px;
  border-bottom-color: #cccccc;
  background: url(img/h_bg.gif) center repeat-x;
}

section h3 {
  font-size: 20px;
  background: linear-gradient(transparent 70%, #a7d6ff 70%);
}

section p {
  padding: 15px;
  text-align: left;
  color: #000000;
  font-size: 15px;
}

section .gray_bg {
  margin: 8px 0 8px 0;
  padding: 2px 8px 2px 8px;
  line-height: 1.7;
  letter-spacing: 1px;
  border-top: solid 1px #dddddd;
  border-right: solid 1px #dddddd;
  border-bottom: solid 1px #dddddd;
  border-left: solid 1px #dddddd;
  background-color: #eeeeee;
}

section .gray_bg p {
  padding: 3px;
  line-height: 1.7;
  letter-spacing: 1px;
}

section img.picture {
  margin: 0 10px 10px 0;
  float: left;
}

section img.picture_r {
  margin: 0 0 10px 10px;
  float: right;
}

section span.red {
  color: #e60033;
}

section span.red_b {
  color: #e60033;
  font-weight: bold;
}

section span.blue {
  color: #007bbb;
}

section span.pink {
  color: #c53d43;
}

section span.brown {
  color: #993300;
}

section span.brown_b {
  color: #993300;
  font-weight: bold;
}

section span.green {
  color: #00ae4f;
}

section table.table_line {
  width: 100%;
  border-collapse: collapse;
  border: solid 1px #bbbbbb;
  margin : 8px  0 8px 0;
}

section td.table_line {
  border-collapse: collapse;
  border: solid 1px #bbbbbb;
  padding : 8px 10px 8px 10px;
}


/*---------- ナビ ----------*/

nav {
  width: 100%;
  text-decoration: none;
  margin: 0 0 10px 0;
  background: url(img/nav_bg.gif) repeat-x;
}

nav h2 {
  padding: 5px 0 3px 14px;
  font-size: 14px;
  color: #ffffff;
  border-bottom: solid 1px;
  border-bottom-color: #cccccc;
  background: url(img/h_bg_gray.gif) center repeat-x;
}

nav ul {
  width: 100%;
  border-top: solid 1px;
  border-top-color: #cccccc;
}

nav li {
  width: 100%;
  list-style: none;
  text-align: center;
}

nav li a {
  padding: 10px;
  display: block;
  color: #69821b !important;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #cccccc;
  background: url(img/nav_bg.gif) repeat-x;

}

nav li a:hover {
  color: #99ab4e !important;
  display: block;
  font-weight: bold;
  text-decoration: none;
  border-bottom: solid 2px;
  border-bottom-color: #cccccc;
  background: url(img/nav_bg_hover.gif) repeat-x;
}

/*メイン部分の見出しタグ
----------------------------------------------------------*/

#main h2 {
          margin: 0 0 8px 0;
          padding: 5px 0 3px 30px;
          font-size: 14px;
          color: #ffffff;
          border-bottom: solid 1px;
          border-bottom-color: #cccccc;
          background: url(img/h_bg.gif) center repeat-x;
}

#main h3 {
	font-size: 100%;	/*文字サイズ*/
	color: #2e5502;		/*文字色▼*/
	line-height: 26px;
	margin-bottom: 10px;
	background-image : url(images/head03-650_4b6d0e.gif);	/*見出し(h3タグ)の背景画像▼*/
	background-repeat: no-repeat;
	padding-bottom: 2px;
	padding-left: 12px;
}

#main h4 {
	font-size: 100%;	/*文字サイズ*/
	color: #516d05;		/*文字色*/
	background-image: url(images/icon02_2e4204.gif);	/*見出し(h4タグ)の先頭に表示される画像▼*/
	background-repeat: no-repeat;
	background-position: 0px 3px;
	padding-left: 15px;
	margin-bottom: 10px;
}

/*メイン部分のボックス
----------------------------------------------------------*/
/*イメージボックス
----------------------------------------------------------*/

#main div.imagebox {
	width: 100%;
	margin-bottom: 15px;
	position: relative;
	overflow: hidden;
}

#main div.box div.imagebox {
	margin-bottom: 0px;
}

/*イメージボックス アルバム（画像を並べて表示する設定になっている部分）
----------------------------------------------------------*/

#main ul.imagebox_album li {
	border-width: 1px;		/*画像 ボーダー枠の太さ*/
	border-style: solid;		/*画像 ボーダー枠スタイル*/
	border-color: #cccccc;		/*画像 ボーダー枠カラー▼*/
	background-color: #e6e6e6;	/*画像 枠の余白部分カラー▼*/
	padding: 4px;			/*画像 枠の余白幅*/
	margin: 5px;
	float: left;
}

* html #main ul.imagebox_album li {
	display: inline;	/*IE6用*/
}

#main ul.imagebox_album img {
	vertical-align: bottom;
}

/*イメージボックス レフト（左側に画像を置く設定になっている部分）
----------------------------------------------------------*/

#main div.imagebox_left {
	background-color: white;
	padding-right: 10px;
	float: left;
}

#main div.imagebox_left img {
	border-width: 1px;		/*画像 ボーダー枠の太さ*/
	border-style: solid;		/*画像 ボーダー枠スタイル*/
	border-color: #cccccc;		/*画像 ボーダー枠カラー▼*/
	background-color: #e6e6e6;	/*画像 枠の余白部分カラー▼*/
	padding: 5px;			/*画像 枠の余白幅*/
}
/*イメージボックス ライト（右側に画像を置く設定になっている部分）
----------------------------------------------------------*/

#main div.imagebox_right {
	background-color: white;
	padding-left: 10px;
	float: right;
}

#main div.imagebox_right img {
	border-width: 1px;		/*画像 ボーダー枠の太さ*/
	border-style: solid;		/*画像 ボーダー枠スタイル*/
	border-color: #cccccc;		/*画像 ボーダー枠カラー▼*/
	background-color: #e6e6e6;	/*画像 枠の余白部分カラー▼*/
	padding: 1px;			/*画像 枠の余白幅*/
}

/*---------- トップに戻る ----------*/

#page_back {
  margin: 0 0 8px 0;
  padding: 0 6px 0 0;
  text-align: right;
}


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

footer {
  width: 100%;
  padding: 10px 0 10px 0;
  color: #333333;
  text-align: center;
  border-top: solid 1px;
  border-top-color: #cccccc;
  background-color: #000099;
}

footer p {
  padding: 10px;
  color: #555555; 
  text-align: center;
}

footer a {
  color: #ffffff !important;
}

footer a:hover {
  color: #ff0000 !important;
}

footer a:visited {
  color: #555555;
}

footer p.copy {
  padding: 10px;
  font-size: 12px;
  color: #ffffff;
}

footer p.copy a {
  color: #69821b !important;
  text-decoration: none;
}

footer p.copy a:hover {
  color: #99ab4e !important;
  text-decoration: underline;
}

footer p.copy a:visited {
  color: #69821b;
  text-decoration: none;
}

footerFloatingMenu {
    display: block;
    width: 100%;
    background-color: #FFF;
    position: fixed;
    left: 0px;
    bottom: 0px;
    z-index: 9999;
    text-align: center;
    padding: 0 auto;
}

/* スマホ用 */
@media only screen and (max-width: 480px) {
	#body { margin-left: 0; }
	
	/* 投稿フォーム */
	#form-tbl { margin: 0 auto; text-align: center; }
	#form { width: 96%; margin: 10px auto; }
    #form th, #form td {
    	text-align: left;
		width: 100%;
        display: block;
        padding: 6px 3px;
        border-top: none;
    }
    #form tr:first-child th	{ border-top: 1px solid #666; }
    p.btn input { width: 10em; }
    
	/* 小見出し */
	h2 { margin: 1em 3px; width: 90%; }
	
	/* サンクス */
	p.msg { margin: 1em auto; text-align: left;}
}

/****スマホ用メニュー全体****/
#menu{
	/*配置*/
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 100;
}

/****スマホ用プルダウンメニュー****/
.same-width-list{
  width: 150px;
  font-size: 25px;
}

.box74{
       display: inline-block;
       margin: 2em auto; /* ボックスの余白 */
       background-color: #ffff99; /* ボックス背景色 */
       padding:3em 2em 2em; /* ボックス内側余白 */
       position:relative; /* 配置(ここを基準に)*/
       border: 3px solid #000000;/* ボックスの線 (太さ　種類　色)*/
       border-radius:10px;
       height: 50%;
       width:  300px;
}

.box74 .box-title {
                  background-color:#000000; /* タイトル背景色 */
                  font-size: 1em;/* タイトル文字の大きさ */
                  color: #fff ; /* タイトル文字色 */
                  padding: 7px 10px;/*タイトルの余白*/
                  line-height: 1;/*タイトルの行の高さ*/
                  position:absolute;	/* 配置(ここを動かす) */
                  top: -10px; /*上から（0px）移動*/
                  left: 20px; /*左から(0px)移動*/
}

/*背景色をつけて丸くする*/
.box51 {
       display: inline-block;
       margin: 1em auto;
       padding:1em;/*内側余白*/
       border-radius:30px;/*丸みを調整*/
       background-color:#f7e9e8;
       height: 50%;
       width:  300px;
}

/*少しずらしたボックス*/
.box27{
       display: inline-block;
       margin: 2em auto;
       padding:2em;/*内側の余白*/
       background: none;/*元のボックス背景色なし*/
       border:1px solid #ccc ;/*線の太さ・種類・色*/
       position: relative;/*配置（基準）*/
       height: 50%;
       width:  300px;
}

.box27:after{
       background-color:#eee;/*ずらしたボックスの背景色*/
       border:none;
       content: '';
       position: absolute;/*配置（ここを動かす）*/
       top: 7px;/*上から7pxずらす*/
       left: 15px;/*左から7pxずらす*/
       width: 93%;
       height: 93%;
       z-index: -1;
}

.box29 {
    display: inline-block;
    margin: 2em 0;
    background: #FFB6C1;
    height: 50%;
    width:  350px;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #FF773E;
    padding: 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;

}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}

/*めくれたテープ風*/
.box6 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#FFFF99;/*うすい黄色背景色*/
position:relative;
}

.box6:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.box7 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#CCFFCC;/*うす緑背景色*/
position:relative;
}

.box7:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.example img {
     width: 100%;
     height: auto;
}

.box8 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#FFCCFF;/*うすいピンク背景色*/
position:relative;
}

.box8:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.box9 {
margin: 2em auto;
padding:2em;/*内側余白*/
background-color:#f5deb3;/*wheat背景色*/
position:relative;
}

.box9:after{
position: absolute;
content: '';
right: 0px;
top: 0px;
border-width: 0 15px 15px 0;
border-style: solid;
border-color: #ccc #fff  #ccc;
box-shadow: -1px 1px 1px rgba(0, 0, 0, 0.15);
}

.example img {
     width: 100%;
     height: auto;
}

.box5-1{
	margin: 2em auto; /* ボックスの余白 */
	background-color: #fff;/* ボックス背景色 */
	padding: 5em 2em 2em; /* ボックス内側余白 */
	position:relative; /*配置(ここを基準に)*/
	box-shadow: 0px 1px 5px rgba(1,1,1,1.1);/*ボックス影*/
}
.box5-1 .box-title {
	background-color: #ff7f50;/* タイトル背景色 */
	font-size: 1.4em;/* タイトル文字の大きさ */
	color: #fff; /* タイトル文字色 */
	padding:10px;/*タイトル余白*/
	text-align: center;	/* タイトル中央寄せ */
	position:absolute;	/* 配置(ここを動かす) */
	top:0;	/*上から(0px)に配置 */
	left:0; /*左から(0px)に配置 */
	width: 99%;/*横幅最大幅 */
}

/*ボタン定義*/

a.btn--green {
  color: #fff;
  background-color: #094;
}

a.btn--green:hover {
  color: #fff;
  background: #00a349;
}

a.btn--green.btn--cubic {
  border-bottom: 5px solid #00662d;
}

a.btn--green.btn--cubic:hover {
  margin-top: 3px;
  border-bottom: 2px solid #00662d;
}

a.btn-c {
  font-size: 0.9rem;
  position: relative;
  padding: 1.5rem 3rem 1.5rem 2rem;
  border-radius: 100vh;
}

a.btn-c i.fa {
  margin-right: 1rem;
}

a.btn-c:before {
  font-family: 'Font Awesome 5 Free';
  font-size: 1.6rem;
  line-height: 1;
  position: absolute;
  top: calc(50% - .8rem);
  right: 1rem;
  margin: 0;
  padding: 0;
  content: '\f054';
}