﻿/*レスポンシブデザイン対応済み　引出し1カラム用*/

/*
  	0px?325px（小型スマートフォン）
	321px?479px（スマートフォン縦）
	480px?599px（スマートフォン横）
	600px?925px（タブレット）
	960px?1275px（小型PC)
	1280px?（大型PC)
*/

/*モバイルファースト*/

/*0px?320px（小型スマートフォン）に共通事項を書く*/

.hikidasi {
	color:#000000;/*文字色を黒色に設定*/
	margin:0 auto;/*要素間の余白を0 autoに設定*/
	text-align:left;/*文字を左寄せで表示*/
	width:325px;/*横幅を325pxに設定*/
}

.wraphikidasi {
	margin:0px;/*要素間の余白を0pxに設定*/
	width:325px;/*横幅を325pxに設定*/
}

/*どの画面サイズでも一つの画面で適切なサイズに変更する設定*/

img {
	height:auto;/*高さを自動に設定*/
	max-width:100%;/*常に画像サイズを100%で設定*/
}

/*共通のh1とヘッダー部の設定*/

header {
	border-bottom:2px solid #A9A9A9;
	box-shadow:0 4px 4px -3px rgba(0,0,0,0.3);
	margin-bottom:20px;
	padding:10px;
}

.siteTitlehikidasi {
	font-size:17px;
	padding-top:20px;
	text-align:center;
}

/*その他の共通設定*/

/*リンクの設定*/

a { 
	font-weight:bold;/*文字を太文字に設定*/
}

a:visited {
	color:#000000;
}

	
/*右寄せ*/

.migi {
	text-align:right;/*文字を右寄せで表示*/
}

/*中央寄せ*/

.mannaka {
	text-align:center;/*文字を中央寄せで表示*/
}

/*共通のボタンデザイン*/

.btn-s {
	background:#DBFFB7;
	border:none;
	boeder-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	color:#000000;
	height:40px;
	margin:0 auto;
	width:40px;
	outline:none;
	-webkit-appearance:none;
	-moz-apperance:none;
	apperance:none;
}


.btn-m {
	background:#FFFF99;
	border:none;
	boeder-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	color:#000000;
	height:40px;
	margin:0 auto;
	width:40px;
	outline:none;
	-webkit-appearance:none;
	-moz-apperance:none;
	apperance:none;
}

.btn-l {
	background:#FFD6FF;
	border:none;
	boeder-radius:50%;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	color:#000000;
	height:40px;
	margin:0 auto;
	width:40px;
	outline:none;
	-webkit-appearance:none;
	-moz-apperance:none;
	apperance:none;
}

/*共通のアコーディオンメニューデザイン*/
    .site_menu_list{
      background-color: #f9f9f9;
    }
    .site_menu_content {
        border-top: 1px solid #999;
	box-shadow:0 5px 5px -3px rgba(0,0,0,0.3);
    }
    .dropdown_btn {
        border-bottom: 1px solid #000000;
	border-left:1px solid #000000;
	border-right:1px solid #000000;
	box-shadow:0 4px 4px -3px rgba(0,0,0,0.3);
	padding: 10px;
        position: relative;
    }
    .dropdown_menu_link{
      background-color: #DBFFB7;
      border-bottom: 1px solid #000000;
      border-left:1px solid #000000;
      border-right:1px solid #000000;
      padding: 10px 20px;
    }

  .dropdown_menu_link a {
        color:#000000;
	text-decoration:none;
  }
  
  .dropdown_menu_link a:visited {
	color:#000000;
  }

/*メインカラムの設定*/

.mainhikidasiindex {
	color:#000000;
}

.mainhikidasiaisatu {
	background-color:#DBFFB7;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

.mainhikidasirekisi {
	background-color:#FFD1A3;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

.mainhikidasinakami {
	background-color:#FFFFB2;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

.mainhikidasirenraku {
	background-color:#E5CCFF;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

.mainhikidasionegai {
	background-color:#FFCCCC;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

.mainhikidasilink {
	background-color:#D6EAFF;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

.mainhikidasiosirase {
	background-color:#D6FFEA;
	background-image:linear-gradient(180deg,rgba(100,100,100,0) 0%,rgba(100,100,100,0) 98%,#000000 100%);
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	line-height:2em;
	margin: 30px auto;
	padding: 0.5em 1em;
	width:100%;
	
}

/*共通の表の設定*/

table {
	background-color:white;
	background-size:100% 2em;
	box-shadow: 5px 5px 5px -5px;
	margin:auto;
}

table td {
	border:solid 2px green;
	line-height:1.5em;
	margin: 1px auto;
	padding: 0em 0.5em;
	padding-top:5px;
	padding-bottom:5px;
}

	
/*サイドカラムの設定*/

.sidehikidasi {
	color:black;
	margin:0px;
}

/*フッターの設定*/
footer {
	background-color:#ECECEC;
	border-top:1px solid #A9A9A9;
	color:#000000;
	margin-top:20px;
        margin-bottom:20px;
	text-align:center;
}

/*共通のパンくずリストの設定*/

.breadcrumbs {
    width: 980px;
    margin: 10px auto 0;
}
 
.breadcrumbs ul {
    display: table;
    font-size: 13px;
}
 
.breadcrumbs ul li {
    margin: 0 10px 0 0;
    font-size: 13px;
    float: left;
}
 
.breadcrumbs ul li:first-child::before {
    padding: 0 3px 0 0;
    content: "";
    font-size: 14px;
}
 
.breadcrumbs ul li::before {
    padding: 0 10px 0 0;
    content: ">";
    font-size: 14px;
}

/*321px?479px（スマートフォン縦）*/
@media screen and (min-width:321px) and (max-width:479px) {
	
	.hikidasiindex {
		margin:0px auto;
		width:350px;
	}

	.wraphikidasiindex {
		margin:0px auto;
		width:350px;
	}
}

/*480px?599px（スマートフォン横）*/
@media screen and (min-width:480px) and (max-width:599px) {
	
	.hikidasiindex {
		margin:0px auto;
		width:500px;
	}

	.wraphikidasiindex {
		margin:0px auto;
		width:500px;
	}

}

/*768px?1024px;（タブレット縦）*/
@media screen and (min-width:768px) and (max-width:1024px) {

	.hikidasiindex {
		margin:0px auto;
		width:500px;
	}

	.wraphikidasiindex {
		margin:0px auto;
		width:500px;
	}
}

/*960px?1275px（小型PC)*/
@media screen and (min-width:960px) and (max-width:1275px) {

	.hikidasi {
		margin:0px auto;
		width:1000px;
	}

	.wraphikidasi{
		margin:0px auto;/*要素間の余白を0px autoに設定*/
		width:1000px;/*横幅を1000pxに設定*/
	}

	.mainhikidasiindex {
		float:right;
		width:650px;
	}

	.mainhikidasiaisatu {
		float:right;
		width:650px;
	
	}

	.mainhikidasirekisi {
		float:right;
		width:650px;
	}
		

	.mainhikidasinakami {
		float:right;
		width:650px;
	}

	.mainhikidasirenraku {
		float:right;
		width:650px;
	}

	.mainhikidasionegai {
		float:right;
		width:650px;
	}

	.mainhikidasiosirase {
		float:right;
		width:650px;
	}

	.mainhikidasilink {
		float:right;
		width:650px;
	}

	.sidehikidasi {
		float:left;
		width:250px;
	}

	footer {
		clear:both;
	}
}


/*1280px?（大型PC）用2カラム*/
@media screen and (min-width:1280px) {

	.hikidasi {
		margin:0px auto;
		width:1000px;
	}

	.wraphikidasi {
		margin:0px auto;/*要素間の余白を0px autoに設定*/
		width:1000px;/*横幅を1000pxに設定*/
	}

	.mainhikidasiindex {
		float:right;
		width:650px;
	}

	.mainhikidasiaisatu {
		float:right;
		width:650px;
	}

	.mainhikidasirekisi {
		float:right;
		width:650px;
	}

	.mainhikidasinakami {
		float:right;
		width:650px;
	}

	.mainhikidasirenraku {
		float:right;
		width:650px;
	}

	.mainhikidasionegai {
		float:right;
		width:650px;
	}

	.mainhikidasiosirase {
		float:right;
		width:650px;
	}

	.mainhikidasilink {
		float:right;
		width:650px;
	}


	.sidehikidasi {
		float:left;
		width:250px;
	}

	footer {
		clear:both;
	}
}

/*br.spbrをタブレット以上のサイズで非表示にする*/
@media screen and (min-width:960px) {
	.spbr{
		display:none;
	}
}

/*br.spbrlをタブレット以下のサイズで非表示にする*/
@media screen and (max-width:960px) {
	.spbrl {
		display:none;
	}
}