﻿@charset "UTF-8";
/* Body */
body {
  font-family: 'メイリオ', Meiryo, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', sans-serif;
  background-color: rgba(244, 239, 165, 0.80); /*Rgba指定　a（アルファ)透明度*/
  /*background-color: #4E9904;*/
  margin-top: 0px;
  margin-right: auto;
  margin-bottom: 0px;
  margin-left: auto;
  font-style: normal;
  font-weight: 200;
  width: 100%;
}
/*画像の下の余白を消す。*/
img {
  vertical-align: bottom;
} /*画像にvertical-align:baseline;（初期値）が指定されているときは、画像の下にpaddingやmarginでは消すことができない余白がでる。*/
/* 最終的に消す*/
/*#nav-drawer,.logo_area,nav ul,nav li   {border: solid 1px #FF0206;}*/
/*.toppage_background_color,.hero_area,.sp_top_img  {border: solid 1px #FF0206;}*/
/*.top_banner  {border: solid 1px #FF0206;}*/
/*.footer_area,.tbl_area {border: solid 1px #FF0206;}*/
/* END  最終的に消す*/
/**/
/* Container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  background-color: white;
}
/* ///////////////Hero Section */
.top_pc_img { /*pc用*/
  width: 100%;
  height: auto;
}
.top_sp_img { /*sp用*/
  width: 100%;
  height: auto;
}
/* END  Hero Section */

/* スタートボタン
-------------------------------------------------------------------------*/
.banner_area {
	width: 100%;
  padding: 10px 0;
		text-align: center;
	border: solid 0px;
}
.inlineblock{
	display: inline-block;
	vertical-align:  middle;
}
.top_button {
  width: 400px;
}
a.top_button {
  display: block;
  padding: 0.8em;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
	background: red;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 9px;
  border: 2px solid red;
}
a.top_button:hover {
  /*background: red;*/
  /*color: #fff;*/
	color: #F3EC8A;
	border: 2px solid #F3EC8A;
  cursor: pointer;
}

/*光秀編リンクバナー */
.inlineblock img{
	width: 200px;
	margin-left: 30px;
}
/* スマホ 340px以下*/
@media(max-width: 340px) {
  .wrapper { /*  htmlではトップで指定してある*/
    min-height: 100vh; /*100vh が、ブラウザの画面の高さ*/
    position: relative; /*←相対位置*/
    /* ↓コンテンツに被らないようにする場合は必要　 スクロール後下に固定されている-------*/
    /*padding-bottom: 120px;*/ /*←wrapper_areaの高さ*/
    /*box-sizing: border-box;*/ /*←全て含めてmin-height:100vhに*/
  }
  .wrapper_area { /*  ちょっとのぞく、住所　copyrightを範囲していしてある*/
    /*padding-top: 1vh;*/
    width: 100%;
    position: absolute; /*←絶対位置*/
    bottom: 0; /*下に固定*/
    border: solid #09E8BFpx;
  }
  /* END wrapper　 スマホのみ対応　フッターとちょっと覗くを画面下に固定----------------------*/
  .top_pc_img { /* pc用画像非表示*/
    display: none;
  }
/* スタートボタン
-------------------------------------------------------------------------*/
.inlineblock{
	display: block;
}
  .top_button {/* 光秀編ボタン*/
    width: 80%;
  }
  a.top_button {
    border: 1px solid #F20509;
    /*background-color: rgba(238,224,26,0.80); */ /*Rgba指定　a（アルファ)透明度*/
    background-color: rgba(251, 251, 243, 0.80); /*Rgba指定　a（アルファ)透明度*/
    font-size: 20px;
		  color: red;
		  letter-spacing: 2px;
  }
	a.top_button:hover{
		background-color: red;
	}
/*光秀編リンクバナー */
.inlineblock img{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
  
}


/* スマホ */
@media (min-width: 341px) and (max-width: 766px) {
  .wrapper { /*  htmlではトップで指定してある*/
    min-height: 100vh; /*100vh が、ブラウザの画面の高さ*/
    position: relative; /*←相対位置*/
    /* ↓コンテンツに被らないようにする場合は必要　 スクロール後下に固定されている-------*/
    /*padding-bottom: 120px;*/ /*←wrapper_areaの高さ*/
    /*box-sizing: border-box;*/ /*←全て含めてmin-height:100vhに*/
    /*background-color: #0C6401;*/
  }
  .wrapper_area { /*  ちょっとのぞく、住所　copyrightを範囲していしてある*/
    /*padding-top: 1vh;*/
    width: 100%;
    /*background-color: #0C6401;*/
    position: absolute; /*←絶対位置*/
    bottom: 0; /*下に固定*/
    border: solid #09E8BFpx;
  }
  /* END wrapper　 スマホのみ対応　フッターとちょっと覗くを画面下に固定----------------------*/
  body {
    max-width: 500px;
  }
  .top_pc_img { /* pc用画像非表示*/
    display: none;
  }
  	/* スタートボタン
-------------------------------------------------------------------------*/
.inlineblock{
	display: block;
}
  .top_button {/* 光秀編ボタン*/
    width: 80%;
   }
  a.top_button {
    border: 1px solid #F20509;
    /*background-color: rgba(238,224,26,0.80); */ /*Rgba指定　a（アルファ)透明度*/
    background-color: rgba(251, 251, 243, 0.80); /*Rgba指定　a（アルファ)透明度*/
    font-size: 24px;
		  color: red;
		  letter-spacing: 2px;
  }
	a.top_button:hover{
		background-color: red;
	}
/*光秀編リンクバナー */
.inlineblock img{
	margin-top: 10px;
	margin-left: auto;
	margin-right: auto;
}
}


/* Small Tablets */
@media (min-width: 767px)and (max-width: 1099px) {
  body {
    max-width: 850px;
    margin-top: 20px;
  }
  .top_sp_img { /* スマホ用画像非表示*/
    display: none;
  }
  .banner_area {
    background-color: rgba(32, 116, 40, 1.00);
  }
}


/* PC */
@media (min-width: 1100px) {
  body {
    width: 1100px;
    margin-top: 20px;
  }
  .top_sp_img { /* スマホ用イメージ非表示*/
    display: none;
  }
  .banner_area {
    background-color: rgba(32, 116, 40, 1.00);
  }
}