@charset "UTF-8";
body { margin: 0;
       font-family: 'Source Sans Pro', 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;}
/* サイト名 */
.site { margin: 5px 0 2px 0;
        background: #fff;}
.site a	{ color: #000;
	  font-size: small;
	  font-family: 'Paytone One', sans-serif;
	  text-decoration: none;}
.site img { vertical-align: bottom;}

button { display: none;
 	 padding: 6px;
	 border: none;
	 background-color: transparent;
	 color: #888;
	 font-size: 28px;
	 cursor: pointer;}
button:focus { outline: none;}

.menu ul { display: block;
	   margin: 0 0 10px 0;
	   padding: 8px 10px 10px 10px;
	   list-style: none;
           background: whitesmoke;
           border:1px dotted #333;
}
.menu li a { display: block;
	     padding: 3px 15px;
	     color: #000;
	     font-size: 15px;
             font-weight:500;
	     text-decoration: none;}
.menu li a:hover { background-color: #eee;}

.headimg { width: 100%;
   	   height: auto;
	   margin-bottom: 10px;
	   vertical-align: bottom;}

.title { margin: 40px 0;
	 padding: 8px 20px 1px 20px;
         background-color: #000;
         color: #fff;
	 font-size: 2.5vw;}

.pickup { margin-bottom: 0px;
  	  padding: 5px;
	  border: solid 1px #ddd;}

.copyright p { margin: 0;
	       color: #fff;
	       font-size: 12px;}
.gaiyou {
  display: block;
  color: #000;
  text-align: left;
  text-decoration: none;
}
.gaiyoulink {
  display: block;
  color: #000;
  text-align: left;
  text-decoration: none;
}
.gaiyou a {
  color: #000;
  text-decoration: none;
}
.gaiheadimg {
  width: 290px;
  height: 195px;
  border: 1px dotted #666;
}
.gaiyou p {
 width: 280px;
 margin: 7px auto;
 height: auto;
 border: 1px dotted #333;
 background: #fff;
 font-size: 14px;
 padding: 5px 10px;
 border: 1px dotted #888;
 border-radius: 5px;
}
/*--Old type--*/
body {
 display: -ms-grid;
 -ms-grid-columns: 1fr 1180px 1fr;
 -ms-grid-rows: auto auto auto auto auto auto;
}
.site {
 -ms-grid-column-span: 3;
 -ms-grid-row: 1;
}
button {
 -ms-grid-column: 2;
 -ms-grid-row: 1;
 -ms-grid-column-align: end;
 -ms-grid-row-align: center;
}
.menu {
 -ms-grid-column: 2;
 -ms-grid-column-span: 2;
 -ms-grid-row: 3;
 -ms-grid-column-align: start;
 -ms-grid-row-align: top;
}
.headimg {
 -ms-grid-column: 2;
 -ms-grid-column-span: 1;
 -ms-grid-row: 2;
}
.gaiheadimg {
 -ms-grid-column-span: 2;
 -ms-grid-row: 2;
}
.title {
 -ms-grid-column: 2;
 -ms-grid-row: 2;
 -ms-grid-column-align: center;
 -ms-grid-row-align: end;
 margin-left: 0px;
 margin-bottom: 120px;
}
.pickup	{
 -ms-grid-column: 3;
 -ms-grid-column-span: 1;
 -ms-grid-row: 3;
 -ms-grid-column-align: end;
 display: -ms-grid;
 -ms-grid-column: 2;
 -ms-grid-column-gap: 16px;
 -ms-grid-rows: auto;
}
.gaiyoulink	{
 -ms-grid-column-span: 3;
 -ms-grid-row: 8;
 display: -ms-grid;
 -ms-grid-columns: 1fr 10px;
 -ms-grid-rows: auto;
}
 .gaiyou:nth-child(1) {-ms-grid-column: 1}
 .gaiyou:nth-child(2) {-ms-grid-column: 3}
 .gaiyou:nth-child(3) {-ms-grid-column: 5}
 .gaiyou:nth-child(1) {-ms-grid-column: 1}
 .gaiyou:nth-child(2) {-ms-grid-column: 3}
 .gaiyou:nth-child(3) {-ms-grid-column: 5}
.copyright {
  -ms-grid-column-span: 3;
  -ms-grid-row: 9;
  margin: 15px 0;
  background-color: #000;
}
.fbar {
 display: block;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3;
  -ms-grid-row: 9;
  z-index: -1;
  background-color: #ddd;
}
/*--For IE11 Configuration--*/
@media all and (-ms-high-contrast: none), not all and (-ms-high-contrast: none) {
}
/* グリッド */
body { display: grid;
       grid-template-columns: 
		[left] minmax(10px, 1fr) [main] minmax(auto, 1180px) [main-end] minmax(10px, 1fr) [right];
	grid-template-rows: 
		[head] auto [head] auto [img] auto [title] auto [main] auto [foot] auto [bottom]}
.site { grid-column-start: left;
        grid-column-end: right;
	grid-row-start: head;}
button { grid-column-start: main;
	 grid-row-start: head;
	 justify-self: end;
	 align-self: center;}
.headimg { grid-column-start: main;
           grid-column-end: main-end;
	   grid-row-start: img;}
.menu { grid-column-start: main;
	grid-row-start: main;
	justify-self: start;
	align-self: left;}
.title { grid-column-start: main;
	 grid-row-start: img;
	 background-color: rgba(0,0,0,0.3);
	 justify-self: center;
	 align-self: center;}
.pickup { grid-column-start: main;
	  grid-row-start: main;
          grid-column-gap: 6px;
          display: grid;
          grid-template-columns: 1fr 1fr 1fr;
          grid-template-rows: auto;
	  justify-self: end;
          margin: 0;}
.copyright { grid-column-start: left;
             grid-column-end: right;
	     grid-row-start: foot;
             background-color: #000;
             margin: 60px 0;
             text-align:center;}
/* ########### 1179px以下 ########### */
@media (max-width: 1179px) {
.headimg { grid-column-start: left;
	   grid-column-end: right;}
/*--Old type Grid Config--*/
body {
 display: -ms-grid;
 -ms-grid-columns: 10px 1fr 10px;
 -ms-grid-rows: auto auto auto auto auto auto auto auto;
}
.headimg {
 -ms-grid-column: 1;
 -ms-grid-column-span: 3;
}
.gaiheadimg {
 -ms-grid-column: 1;
 -ms-grid-column-span: 3;
 }
}
/* ########### 767px以下 ########### */
@media (max-width: 767px) {
/*--Old type Grid Config--*/
.menu {
 -ms-grid-row: 2;
 -ms-grid-column-align: stretch;
}
.pickup	{
 -ms-grid-columns: 1fr;
 -ms-grid-rows: auto 10px auto 10px auto 10px auto;
}
 .gaiyou:nth-child(1) {
 -ms-grid-column: 1;
 -ms-grid-row: 1}
 .gaiyou:nth-child(2) {
 -ms-grid-column: 1;
 -ms-grid-row: 3;
}
 .gaiyou:nth-child(3) {
 -ms-grid-column: 1;
 -ms-grid-row: 5;
}
.gaiyou a {
 display: -ms-grid;
 -ms-grid-columns: 1fr 4fr;
 -ms-grid-rows: auto auto;
}
.gaiyou a span	{
 -ms-grid-column: 1;
 -ms-grid-row: 1;
 -ms-grid-row-span: 2;
}
.gaiyou a h2 {
-ms-grid-column: 2;
 -ms-grid-row: 1;
}
.gaiyou a p {
 -ms-grid-column: 2;
 -ms-grid-row: 2;
}
.fbar {
 -ms-grid-column-span:3;
 -ms-grid-column-end: right;
 -ms-grid-row: 9;
 z-index: -1;
 background-color: #000;
}
button { display: block;}
.menu { grid-row-start: head 2;
	justify-self: stretch;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease-out;}
.menu ul { flex-direction: column;}
}
/* ########### 599px以下 ########### */
@media (max-width: 599px) {

.gaiyou li {
 display: -ms-grid;
 -ms-grid-columns: 2fr;
 -ms-grid-rows: auto auto;
}
.gaiyou a {
 display: -ms-grid;
 -ms-grid-columns: 2fr;
 -ms-grid-rows: auto auto;
}
.site {
 -ms-grid-column-span: 3;
 -ms-grid-row: 1;
}
button {
 -ms-grid-column: 2;
 -ms-grid-row: 1;
 -ms-grid-column-align: end;
}
.headimg {
 -ms-grid-column: 2;
 -ms-grid-column-span: 1;
 -ms-grid-row: 3;
}
.title {
 -ms-grid-column: 2;
 -ms-grid-row: 3;
 -ms-grid-column-align: center;
 -ms-grid-row-align: center;
 margin: auto;
 margin-bottom: 120px;
}
.menu {
 -ms-grid-row: 2;
 -ms-grid-column-align: stretch;}
.gaiheadimg {
 -ms-grid-column: 2;
 -ms-grid-row: 3;
 -ms-grid-column-align: center;
 -ms-grid-row-align: center;
}
.pickup	{
 -ms-grid-column: 3;
 -ms-grid-column-span: 1;
 -ms-grid-row: 4;
 display: -ms-grid;
 -ms-grid-column-align: end;
 -ms-grid-rows: auto;
}
.title {
 margin:auto;
 padding: 2px 10px 1px 10px;
 background-color: #000;
 color: #fff;
 background-color: rgba(0,0,0,0.3);
 font-size: 16px;
 }
.pickup {
 grid-column-start: left;
 grid-column-end: right;
 grid-row-start: main;
 grid-column-gap: 10px;
 display: block;
 grid-template-columns: 1fr;
 grid-template-rows: auto;
 justify-self: center;
 margin: 0;
}
.gaiyou {
 display: block;
 color: #000;
 text-align: left;
 text-decoration: none;
}
.gaiheadimg {
 width: 100px;
 height: 67px;
 border: 1px solid lightgrey;
 float: left;
 margin-top: 8px;
} 
.gaiyou p {
 width: 216px;line-height:130%;
 height: 52px;
 border: 1px solid lightgrey;
 float: right;
 font-size: 14px;
 background: whitesmoke;
 margin-left: 2px;
}
.gaiyou a {
 font-size:14px;
 }
}