/* =======================================

基本設定
背景色1 白　 background-color: #ffffff;
背景色2 薄緑 background-color: #D7EABB; R:215 G:234 B:187
背景色3 濃緑 background-color: #74AD95; R:116 G:173 B:149
文字　  　　 color: #5E3719;

======================================== */

/* =======================================

    PC  901px〜

======================================== */

body {
  margin: 0px;
  width: 100%;
  background-color: #ffffff;
  text-align: center;
  font-family:
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  color: #5E3719;
  font-size: 16px;
  line-height: 1.5;
}

A:link {
  color: #5E3719;
  text-decoration:none;
}

A:visited {
  color: #5E3719;
  text-decoration:none;
}

A:hover {
  color: #5E3719;
  text-decoration:none;
  font-weight: bold;
}

A:active {
  color: #5E3719;
  text-decoration:none;
}

img { /* Chromeで縮小画像がぼやける問題対策 */
  image-rendering: -webkit-optimize-contrast;
}

.center {
  text-align: center;
}

.right {
  width: 100%;
  text-align: right;
}

.page_all { /* ページ幅全体指定コンテナ */
  position: relative;
  width: 100%;
  background-color: #ffffff;
}

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

    ヘッダ

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

.head_jmc { /* jmcコンテナ */
  position: relative;
  display: flex;
  margin: 0;
  width: 100%;
  background-color: #ffffff;
}

.head_jmc_left { /* jmcロゴ */
  position: relative;
  width: 285px;
  padding: 32px 30px 0px 30px;
  background-color: #ffffff;
}

.head_jmc_left img { /* jmcロゴ */
  width: 285px;
  border: none;
}

.head_jmc_right { /* SNS等 */
  position: relative;
  width: calc(100% - 375px);
  padding: 15px 30px 5px 0;
  background-color: #ffffff;
  text-align: right;
  font-size: 12px;
}

.small_menu { /* 右上の小さなメニューをリスト化 */
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  height: 1rem;
  margin: 0 0 15px 0;
  padding: 0;
  position: relative;
  z-index: 999;
}

.small_menu li { /* small_menuのリスト項目 */
  list-style: none;
  position: relative;
  border-left: 1px solid #ccc;
  text-align: center;
}

.small_menu li a { /* small_menuのリスト項目からリンク */
  display: block;
  background-color: #ffffff;
  text-align: center;
  text-decoration: none;
  padding: 0 10px;
}

.small_menu_drop { /* small_menuのドロップダウンメニューをリスト化（Languageの様なドリップダウンリストを複数並べることを想定 */
  list-style-type:none;
  padding: 0;
}

.small_menu_drop > li { /* small_menuのドロップダウンメニューリスト項目 直下のliにのみ適用 */
  display:inline-block;
  border:none;
  position:relative;
}

.small_menu_drop > li > ul { /* small_menuのドロップダウンメニューリスト項目それぞれのドロップダウンリスト */
  display:none;
}

.small_menu_drop > li:hover ul { /* small_menuのドロップダウンメニューリスト項目にオンカーソルした際のドロップダウンリスト表示方法 */
  display:block;
  position:absolute;
  padding:0;
  margin:0;
  top:1.5em;
  left:0;
  list-style-type:none;
  border:none;
}

.gsc-control-cse { /* Google検索窓用 */
  padding: 0 0 0 1em !important;
  font-size: 12px !important;
}

.gsc-search-button-v2 { /* Google検索窓用 */
  padding: 6px !important;
}

.gsc-input { /* Google検索窓用 */
  font-size: 12px !important;
  height: 15px !important;
}

.gsc-input-box {
  width: 150px;
}

.gscb_a { /* Google検索窓用 */
  line-height: 24px !important;
}

ul.sns { /* SNSアイコン等をリスト化 */
  list-style: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  margin-top: 10px;
  margin-bottom: 0;
  padding: 0;
}

ul.sns li a img { /* SNSアイコン等のリスト項目内のリンクと画像 */
  width: 30px;
  padding: 0px 10px 0px 10px;
  vertical-align: middle;
}

.sticky { /* スクロール時に上部に固定する */
  position: -webkit-sticky; /* Safari用 */
  position:sticky; /* 要素をスクロールに応じて固定 */
  top:0; /* 縦スクロールに追従 */
  z-index: 100; /* z-indexで最前面に持ってくる */
}

.head_menu { /* menuコンテナ */
  position: relative;
  margin: 0;
  width: 100%;
  background-color: #ffffff;
}

.head_menu > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.head_menu > ul > li > img {
  display: none;
}

.head_menu > ul > li > ul { /* menuコンテナをリスト化 */
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin-top: 0;
  margin-bottom: 5px;
}

.head_menu > ul > li > ul li { /* menuコンテナのリスト項目 */
  position: relative;
  list-style: none;
  padding: 0;
  width: 120px;
  border: 0;
  text-align: center;
}

.dropdown_lists { /* グローバルメニューのドロップダウンリスト */
  visibility: hidden; /* デフォルトでは非表示の状態にしておく */
  opacity: 0; /* デフォルトでは不透明度 0*/
  transition: all .3s; /* ふわっと表示する 0*/
  box-shadow: 5px 5px 10px 0 rgba(116, 173, 149, .5);
  width: 240px;
  position: absolute;
  top: 81px;
  left: 0;
  right: -120px;
  padding: 0;
}

.global_menu:hover .dropdown_lists {  /* グローバルメニューにホバーしたらドロップダウンリストを表示 */
  visibility: visible;
  opacity: 1;
}

.global_menu:hover {  /* グローバルメニューにホバーしたら背景色表示 */
  background-color: #D7EABB;
}

.dropdown_list {
  background-color: #FFFFFF;
  border: solid #D7EABB 2px !important;
  border-bottom: none !important; /* 次のリストとの境界が太くなるので下には線を付けない  */
  height: 40px;
  line-height: 40px;
  padding: 0 0 0 10px !important;
  width: 226px !important;
  text-align: left !important;
  position: relative;
  font-size: 14px;
}

.dropdown_list:last-child{ /* 最後のリストのみ下には線を付ける  */
    border-bottom: solid #D7EABB 2px !important;
}

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

    本文

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


.page_title { /* タイトルセクション */
  position: relative;
  margin: 0;
  width: calc(100% - 200px);
  padding: 10px 100px 10px 100px;
  background-color: #74AD95;
  font-size: 18px;
  color: #ffffff;
  font-weight: bold;
}

div.contents:nth-of-type(4n+1) { /* 白背景・右に木があるセクション */
  position: relative;
  margin: 0;
  width: 840px;
  padding: 10px calc(50% - 420px) 10px calc(50% - 420px);
  background-color: #ffffff;
  text-align: left;
  background-image: url("/img-design23/tree-right.png");
  background-repeat: no-repeat;
  background-position: right bottom;
}

div.contents:nth-of-type(4n+3) { /* 白背景・左に木があるセクション */
  position: relative;
  margin: 0;
  width: 840px;
  padding: 10px calc(50% - 420px) 10px calc(50% - 420px);
  background-color: #ffffff;
  text-align: left;
  background-image: url("/img-design23/tree-left.png");
  background-repeat: no-repeat;
  background-position: left bottom;
}

div.contents:nth-of-type(2n) { /* 淡緑背景セクション */
  position: relative;
  margin: 0;
  width: 840px;
  padding: 10px calc(50% - 420px) 10px calc(50% - 420px);
  background-color: #D7EABB;
  text-align: left;
}

.iframe-responsive_560-315 {
  position: relative;
  margin: 0 auto;
  width: calc(100% - 60px);
  max-width: 560px;
}

.iframe-responsive_560-315::before {
  content: "";
  display: block;
  width: 100%;
  padding: calc(315 / 560 * 100%) 0 0 0;
}

.iframe-responsive_560-315 iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main img {
  max-width: calc(100% - 60px);
}

.thumbnail-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  flex-shrink: 0;
  justify-content: space-around;
  align-items: flex-start;
  margin: 0 auto;
}

.thumbnail-item {
  flex-basis: 200px;
  margin: 0 5px 10px 5px;
  padding: 0;
}

.thumbnail-item .iframe-responsive_560-315 {
  width: 200px;
}

.thumbnail-item p {
  width: 180px;
  padding: 0 10px;
  overflow-wrap: break-word;
}

.thumbnail-item p.img {
  width: 180px;
  margin: 0 auto;
  padding: 0;
}

.thumbnail-item img {
  width: 180px;
  max-width: initial;
}



.thumbnail-item2 {
  flex-basis: 150px;
  margin: 0 5px 10px 5px;
  padding: 0;
}

.thumbnail-item2 .iframe-responsive_560-315 {
  width: 150px;
}

.thumbnail-item2 p {
  width: 130px;
  padding: 0 10px;
  overflow-wrap: break-word;
}

.thumbnail-item2 p.img {
  width: 130px;
  margin: 0 auto;
  padding: 0;
}

.thumbnail-item2 img {
  width: 130px;
  max-width: initial;
}


.contents:last-child{ /* 最後のリストのみフッターに被せるために下に草部分の余白を取る */
  padding-bottom: 81px !important;
}

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

    フッタ

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

footer {
  position: relative; /* position: relative;にしないとtop指定できない */
  top: -81px; /* フッターに被せるため上にずらす */
}

.page_all_foot_animal { /* フッタの動物部分用ページ幅全体指定コンテナ */
  position: relative;
  width: 100%;
  min-width: 900px;
  height: 81px;
  background-color: transparent;
}

.foot_animal { /* 動物用コンテナ */
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 900px;
  height: 81px; /* 高さを指定しないと高さがゼロになってしまう */
  background-color: transparent;
  padding: 0;
  background-image: url("/img-design23/foot-animal.png");
  background-repeat: no-repeat;
}

.foot_grass_left { /* 動物用コンテナの子コンテナとして左側の草を表示 */
  position: relative;
  top: -81px; /* 本来の位置から親コンテナ分上に移動して表示 */
  width: calc(50% - 450px); /* 左半分のうち親コンテナの半分450pxを引いた幅 */
  height: 81px; /* 高さを指定しないと高さがゼロになってしまう */
  background-color: transparent;
  padding: 0;
  background-image: url("/img-design23/foot-grass.png");
  background-repeat: repeat-x;
  background-position: right;
}

.foot_grass_right { /* 動物用コンテナの子コンテナとして右側の草を表示 */
  position: relative;
  top: -162px; /* 本来の位置から親コンテナ+子コンテナ分上に移動して表示 */
  left: calc(50% + 450px); /* 左半分から更に親コンテナの半分450pxを足した分だけ右へ移動 */
  width: calc(50% - 450px); /* 右半分のうち親コンテナの半分450pxを引いた幅 */
  height: 81px; /* 高さを指定しないと高さがゼロになってしまう */
  background-color: transparent;
  padding: 0;
  background-image: url("/img-design23/foot-grass.png");
  background-repeat: repeat-x;
  background-position: left;
}

.page_all_foot { /* フッタ用ページ幅全体指定コンテナ */
  position: relative;
  width: 100%;
  min-width: 900px;
  background-color: #74AD95;
}

.foot_menu { /* フッタメニューコンテナ */
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin-left: auto;
  margin-right: auto;
  width: 880px;
  padding: 10px 10px 10px 10px;
  min-height: 248px; /* 足跡画像の高さ */
  background-color: #74AD95;
  text-align: left;
  background-image: url("/img-design23/foot-foot.png");
  background-repeat: no-repeat;
  background-position: right top;
  font-size: 12px;
}

.foot_menu_left { /* フッタメニューコンテナ左 */
  flex-shrink: 0;
  width: 220px;
  padding: 0 0 0 50px;
  text-align: left;
}

.foot_menu_center { /* フッタメニューコンテナ中 */
  flex-shrink: 0;
  width: 220px;
  padding: 0 0 0 50px;
  text-align: left;
}

.foot_menu_right { /* フッタメニューコンテナ右 */
  flex-shrink: 0;
  width: 220px;
  padding: 0 0 0 120px;
  text-align: left;
}

.foot_sns {
  display: none;
}

.foot_menu_under { /* フッタメニューコンテナ下 */
  flex-shrink: 0;
  width: calc(100% - 20px);
  padding: 10px 10px 10px 10px;
  text-align: center;
  font-size: 12px;
}

/* =======================================

    タブレット  601px〜900px

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

body {
  font-size: 14px;
}

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

    ヘッダ

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

.head_jmc_right { /* SNS等 */
  width: calc(100% - 355px);
  padding: 15px 10px 5px 0;
  font-size: 10px;
}

.small_menu li a { /* small_menuのリスト項目からリンク */
  padding: 0 5px;
}

ul.sns li a img { /* SNSアイコン等のリスト項目内のリンクと画像 */
  width: 25px;
  padding: 0px 5px 0 5px;
}

.head_menu > ul > li > ul li { /* menuコンテナのリスト項目 */
  width: 85px;
}

.dropdown_lists { /* グローバルメニューのドロップダウンリスト */
  top: 75px;
}

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

    本文

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


.page_title { /* タイトルセクション */
  width: calc(100% - 40px);
  padding: 10px 20px 10px 20px;
  font-size: 16px;
}

div.contents:nth-of-type(4n+1) { /* 白背景・右に木があるセクション */
  width: calc(100% - 80px);
  padding: 10px 40px 10px 40px;
}

div.contents:nth-of-type(4n+3) { /* 白背景・左に木があるセクション */
  width: calc(100% - 80px);
  padding: 10px 40px 10px 40px;
}

div.contents:nth-of-type(2n) { /* 淡緑背景セクション */
  width: calc(100% - 80px);
  padding: 10px 40px 10px 40px;
}

.iframe-responsive_560-315 {
  width: calc(100% - 40px);
}

main img {
  max-width: calc(100% - 40px);
}

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

    フッタ

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

.page_all_foot_animal { /* フッタの動物部分用ページ幅全体指定コンテナ */
  min-width: initial;
  height: 81px;
}

.foot_animal { /* 動物用コンテナ */
  width: initial;
  height: 81px; /* 高さを指定しないと高さがゼロになってしまう */
}

.foot_grass_left { /* 動物用コンテナの子コンテナとして左側の草を表示 */
  display: none;
}

.foot_grass_right { /* 動物用コンテナの子コンテナとして右側の草を表示 */
  display: none;
}

.page_all_foot { /* フッタ用ページ幅全体指定コンテナ */
  min-width: initial;
}

.foot_menu { /* フッタメニューコンテナ */
  display: block;
  flex-wrap: initial;
  margin: 0;
  width: calc(100% - 80px);
  min-height: initial;
  background-color: #74AD95;
  padding: 10px 40px 10px 40px;
  font-size: 12px;
}

.foot_menu_left { /* フッタメニューコンテナ左 */
  position: relative;
  flex-shrink: initial;
  width: 100%;
  padding: 0;
}

.foot_menu_center { /* フッタメニューコンテナ中 */
  position: relative;
  flex-shrink: initial;
  width: 100%;
  padding: 0;
}

.foot_menu_right { /* フッタメニューコンテナ右 */
  position: relative;
  flex-shrink: initial;
  width: 100%;
  padding: 0;
}

.foot_menu_under { /* フッタメニューコンテナ下 */
  position: relative;
  flex-shrink: initial;
  width: calc(100% - 20px);
  padding: 10px 10px 10px 10px;
  text-align: center;
  font-size: 10px;
}

}

/* =======================================

    スマホ表示用

======================================== */

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

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

    ヘッダ

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

.head_jmc { /* jmcコンテナ */
  margin: 0 70px 5px 0;
  width: calc(100% - 70px);

  display: block;
}

.head_jmc_left { /* jmcロゴ */
  width: calc(100% - 30px);
  padding: 32px 15px 0px 15px;
}

.head_jmc_left img { /* jmcロゴ */
  width: 100%;
  max-width: 285px;
  border: none;
}

.head_jmc_right {
  display: flex;
  justify-content: right;
  flex-direction: row-reverse;
  align-items: center;
  width: auto;
  margin: 0 -70px 0 auto;
}

.head_jmc_right .small_menu {  
  margin: 0;
  z-index: 50;
}

.head_jmc_right .small_menu li {  
  display: none !important;
}

.head_jmc_right .small_menu li:last-child{ /* 最後のリストのみ表示する */
  display: block !important;
  margin-left: 10px;
}

.head_jmc_right .sns {  
  margin: 0;
}

.head_jmc_right .sns li {  
  display: none !important;
}

.head_jmc_right .sns li:last-child{ /* 最後のリストのみ表示する */
  display: block !important;
}

.gsc-search-button-v2 { /* Google検索窓用 */
  padding: 9px 9px 10px 9px !important;
}

/* SNS等
.head_jmc_right {  
  display: none;
}
*/

.sticky { /* スマホ表示時は右上に固定 */
  position: fixed;
  width: 40px;
  top: 0;
  right: 15px;
  z-index: 100; /* z-indexで最前面に持ってくる */
  background-color: transparent;
}

.head_menu { /* menuコンテナ */
  position: relative;
  margin: 26px 0 0 0;
  width: 40px;
  height: 40px;
  background-color: transparent;
}

.head_menu > ul {
  list-style: none;
  padding: 0;
}

.head_menu > ul > li > img {
  display: initial;
  width: 40px;
  border: none;
}

.head_menu > ul > li > ul { /* menuコンテナをリスト化 */
  display: none;
}

.head_menu > ul > li:hover > ul { /* menuコンテナをリスト化 */
  position: relative;
  top: 10px;
  left: -77px;
  display: flex;
  flex-direction: column;
  align-items: center;
  list-style: none;
  padding: 0;
  width: 117px;
  margin-top: 0;
  margin-bottom: 0;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 5px;
}

.head_menu > ul > li > ul li { /* menuコンテナのリスト項目 */
  list-style: none;
  padding: 0;
  position: relative;
  border: 0;
}


.dropdown_lists { /* グローバルメニューのドロップダウンリスト */
  width: 170px;
  top: 0px;
  left: -170px;
  right: 0px;
  z-index: 200; /* z-indexで最前面に持ってくる */
}

.dropdown_lists_bottom { /* 最後のグローバルメニューのドロップダウンリストは下が表示しきれないので上にずらす */
  top: -250px;
}


.global_menu:hover {  /* グローバルメニューにホバーしたら背景色表示 */
  background-color: #D7EABB;
}

.dropdown_list {
  width: 156px !important;
  font-size: 12px;
}

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

    本文

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

.thumbnail-item {
  flex-basis: 137px;
  margin: 0 0 10px 0;
}

.thumbnail-item .iframe-responsive_560-315 {
  width: 137px;
}

.thumbnail-item p {
  width: 137px;
  padding: 0 5px;
}

.thumbnail-item p.img {
  width: 137px;
  margin: 0 auto;
  padding: 0;
}

.thumbnail-item img {
  width: 137px;
  max-width: initial;
}


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

    フッタ

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

.foot_sns {
  display: block;
  width: 100%;
  padding: 0;
  text-align: center;
}

.foot_sns ul.sns { /* SNSアイコン等をリスト化 */
  flex-direction: row;
  justify-content: center;
}

.foot_sns img{
}


}