﻿/*  共通デザイン */
.p img {
   vertical-align: bottom;
}


.menubutton {
	-webkit-appearance: none;
   display       : inline-block;
  border-radius : 10px;          /* 角丸       */
  width         : 70%;
  font-size     : 10pt;      /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 4px 2px;   /* 余白       */
  background    : #1D510B;  /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 0px solid #000066;    /* 枠の指定 */
}
.menubutton:hover {
  box-shadow    : none;        /* カーソル時の影消去 */
  background    : #3cb371;     /* 背景色     */
　color         : #ffffff; 
  border        : 0px solid #000066;    /* 枠の指定 */
  }



body {
width: 100%;
 margin-left : auto ;
 margin-right : auto ;
 background-color:#F0F7f0 ;
 margin-top:10px;
 -webkit-text-size-adjust: 100%;
 }
 
table{
	width:90%;
	border: 0px ;
	margin-left : auto ;
    margin-right : auto ;
	padding:0px 0px 0px 0px;
	border-collapse:collapse;
	background:#FFFFFF;

	
	}


   

/*  ヘッダーデザイン */

table.header1 {
background-color:#ffffff;
}


td.headera.a1 {
width: 20vw;
min-width: 120px;
max-width: 200px;
text-align:center;
vertical-align:top;
padding:0px 0px 0px 0px;
border-collapse:collapse;
background    : #007dc3;     /* 背景色     */

}

td.headera.a2 {

text-align:left;
vertical-align:middle;


}

td.headera.a3 {

text-align:right;
vertical-align:middle;
padding:0px 0px 0px 0px;

}

td.headera.a4{

text-align:right;
vertical-align:top;

}

.title1{
	font-size: 14pt;
	color: #000000;
	width: auto;
	line-height: 1.4;
	letter-spacing: 0.1em;
	font-weight: bold;
}
.title2{
	font-size: 10pt;
	color: #ffffff;
	width: auto;
	line-height: 1.4;
	letter-spacing: 0.1em;
	font-weight: bold;
}

.head1{
/*	background    : #228b22;     /* 背景色   */ 
	 display       : inline-block;
	color: #ffffff;
	line-height: 7px;
	font-weight: bold;
	font-size   : 10pt;
  letter-spacing: 0.1em; 
	text-align    : center;      /* 文字位置   */
	background    : #007dc3;     /* 背景色     */
}


/* English boxデザイン */
table.englisho1 {
  background-color:#ffffff;
  height:15Vh;
 
  }

table.english1 {
background-color:#ffffff;
height:15Vh;
Max-width: 700px;
}

td.english{
width: 50Vw;

;
text-align: center;
vertical-align: middle;
padding:20px 20px 20px 20px;

}

.eigo1 {
	font-size: 20pt;
  font-weight: bold;
	color: black;
	width: auto;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

.explain2{
  font-size: 12pt;
	color: rgb(22, 12, 63);
	width: auto;
	line-height: 1.5;
	letter-spacing: 0.1em;
}  

.kouji_tyuu {
	font-size: 16pt;
	color: #58539e;
	width: auto;
	line-height: 1.0;
	letter-spacing: 0.1em;

}


.image_menu_title{
  height:30vh;
}



/* メニューデザイン */
table.menu{
  border-collapse: collapse;
  border-spacing: 0;
  table-layout: fixed;
   background-color:#F0F7f0 ;
}

table.menu tr{
  
  height:50px;
 
  
}

table.menu tr:first-child{
  height:30px;

}
table.menu tr:last-child{
  border-bottom:solid 1px #ddd;
}

table.menu th{
  text-align: center;
  padding: 0px 0px 0px 0px;
  border-right:solid 1px #ddd;
  border-left:solid 1px #ddd;

}

table.menu td{
  text-align: center;
  padding: 3px 0;
  border-right:solid 1px #ddd;
  border-left:solid 1px #ddd;
  width: 33px;
  background:white；
}

/*  リンクボタンデザイン */
/*
table.menu td a{
  background-color: #25b327;
  color: white;
  padding:5px 10px;
  border-radius: 10px;
  font-weight: bold;
  font-size:16px;


}
*/
table.menu.popular{
  width: 50px;

}

table.menu th.popular{
  position: relative;

}
/*  Newマークデザイン 　topで高さ調整*/
table.menu th.popular span.new{
  position: absolute;
  top: -12px;
  left:calc(50% - 60px);
  background: #bdcc28;
  width: 33px;
  font-size: 10px;
  border-radius: 15px;
  line-height: 1;
  padding: 5px;
}
.new{
   font-size: 4px;
  
}

/*  見出しデザイン 　paddingで高さ調整*/
table.menu th.popular span.inner1{

  color:white;
  background-color: #87cefa;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 7px 0;
  
}

table.menu th.popular span.inner2{

  color:white;
  background-color: #008b8b;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 7px 0;
}

table.menu th.popular span.inner3{

  color:white;
  background-color: #a39e31;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 7px 0;
}

table.menu th.popular span.inner4{

  color:white;
  background-color: #ff5050;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 7px 0;
}



/* ご利用の案内デザイン */

td.annai {
   background-color:#ffffff;
  padding: 20px 100px 20px 130px;
  }
.annai_title1 {
  font-size: 14pt;
  font-weight: bold;
  color: black;
  width: auto;
  line-height: 1.0;
  letter-spacing: 0.1em;

  }
  .annai_title2 {
    font-size: 11pt;
    color:rgb(39, 39, 179);
    width: auto;
    line-height: 1.0;
    letter-spacing: 0.1em;
    height: 10px;
  
  }
  .annai_contents {
    font-size: 10pt;
    color: black;
    width: auto;
    line-height: 1.0;
    letter-spacing: 0.1em;
    
      }


/* フッターデザイン */


table.fotter1 {
background-color:#ffffff;
height:2px;
}

td.line{
text-align:center;
height:40px;
vertical-align:bottom;
padding:0px 0px 0px 0px;
}

td.copy{
text-align:right;
height:50px;
vertical-align:top;
padding:0px 80px 0px 0px;
}

.hr{
	width: 90%;
	 border-width: 1px 0px 1px 0px; /* 太さ */
   border-style: solid; /* 線種 */
   border-color: #4682B4;   /* 線色 */
   height: 0px;         /* 高さ(※古いIE用) */
  
}

.copy_right {
	font-size: 10pt;
	color: black;
	width: auto;
	line-height: 1.0;
	letter-spacing: 0.1em;

}


@media screen and (max-width: 959px) {
	/* 959px以下に適用されるCSS（タブレット用） */
body {
  margin-top:0px;
 }
	
.image_top  {
	height: 20px;
}
table{
	width:95%;
	border: 0px ;
	margin-left : auto ;
    margin-right : auto ;
	padding:0px 0px 0px 0px;
	border-collapse:collapse;
	background:#FFFFFF;
	}
	
	
/* English boxデザイン */
table.english1 {
background-color:#ffffff;
height:50px;
}

.eigo1 {
	font-size: 12pt;
	color: rgb(13, 3, 37);
	width: auto;
	line-height: 1.5;
	letter-spacing: 0em;
}
	.menubutton {
-webkit-appearance: none;
  display       : inline-block;
  border-radius : 10px;          /* 角丸       */
  width         : 90%;
  font-size     : 10pt;      /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 4px 3px;   /* 余白       */
  background    : #1D510B;  /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 0px solid #000066;    /* 枠の指定 */
	 }
}

/* メニュー案内テーブルデザイン */
td.annai {
  background-color:#ffffff;
 padding: 20px 40px 20px 40px;
 }



@media screen and (orientation: portrait) and (max-width:480px)
 {
	/* 480px以下の縦画面に適用されるCSS（スマホ用） */	




table{
	width:100%;
	border: 0px ;
	margin-left : auto ;
    margin-right : auto ;
	padding:0px 0px 0px 0px;
	border-collapse:collapse;
	background:#FFFFFF;

	}
  table.englisho1 {
    background-color:#ffffff;
    height:15Vh;
    width:100%;
    }



.image_top  {
	height: 20px;
}

.eigo1 {
	font-size: 13pt;
	color:darkred;
	width: auto;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

	 
.menubutton {
-webkit-appearance: none;
  display       : inline-block;
  border-radius : 10px;          /* 角丸       */
  width         : 90%;
  font-size     : 8pt;      /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 4px 3px;   /* 余白       */
  background    : #1D510B;  /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 0px solid #000066;    /* 枠の指定 */
	 }

.menubutton {
-webkit-appearance: none;
  display       : inline-block;
  border-radius : 10px;          /* 角丸       */
  width         : 90%;
  font-size     : 8pt;      /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 4px 3px;   /* 余白       */
  background    : #1D510B;  /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 0px solid #000066;    /* 枠の指定 */
	 }
	 

/*  見出しデザイン 　paddingで高さ調整*/
table.menu th.popular span.inner1{

 
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  padding: 7px 0;
  font-size:12px;
  
}

table.menu th.popular span.inner2{

 
  left: 0;
  bottom: 0;
  display: block;
   width: 100%;
  padding: 7px 0;
  font-size:12px;

}

table.menu th.popular span.inner3{


  left: 0;
  bottom: 0;
  display: block;
   width: 100%;
  padding: 7px 0;
  font-size:12px;

}

table.menu th.popular span.inner4{


  left: 0;
  bottom: 0;
  display: block;
   width: 100%;
  padding: 7px 0;
  font-size:12px;

}



/*  リンクボタンデザイン */

table.menu td a{
  background-color: #25b327;
  color: aqua;
  padding:5px 0px;
  border-radius: 10px;
  font-weight: bold;
  font-size:8pt;
}

/* メニュー案内テーブルデザイン */
td.annai {
  background-color:#ffffff;
 padding: 20px 20px 20px 20px;
 }



/* フッターデザイン */

td.copy{
text-align:right;
height:50px;
vertical-align:top;
padding:0px 10px 0px 0px;
}




}
@media screen and (orientation: landscape) and (max-height:360px)
{	
/* スマフォ横向き設定*/

table.english1 {
height:6Vh;
}

.eigo1 {
	font-size: 14pt;
	color: blue;
	width: auto;
	line-height: 1.5;
	letter-spacing: 0.1em;
}

	.menubutton {
-webkit-appearance: none;
  display       : inline-block;
  border-radius : 10px;          /* 角丸       */
  width         : 90%;
  font-size     : 8pt;      /* 文字サイズ */
  text-align    : center;      /* 文字位置   */
  cursor        : pointer;     /* カーソル   */
  padding       : 4px 3px;   /* 余白       */
  background    : #1D510B;  /* 背景色     */
  color         : #ffffff;     /* 文字色     */
  line-height   : 1em;         /* 1行の高さ  */
  transition    : .3s;         /* なめらか変化 */
  box-shadow    : 1px 1px 3px #666666;  /* 影の設定 */
  border        : 0px solid #000066;    /* 枠の指定 */
	 }
}