@charset "utf-8";  
/*------------------------------------------------------------ 
	デフォルトスタイル	全ページ共通css
------------------------------------------------------------*/  

/**** フォントサイズ　*************

基本を12pxに、サイズは％指定。

====偶数====　　　====奇数====
■10px = 84%      ■11px = 92%
■12px = 100%     ■13px = 109%
■14px = 117%     ■15px = 125%
■16px = 134%     ■17px = 142%
■18px = 150%     ■19px = 159%
■20px = 167%     ■21px = 175%
■22px = 184%     ■23px = 192%
■24px = 200%     ■25px = 209%
■26px = 217%     ■27px = 226%

**********************************/

html, body{ margin:0; padding:0;}
body{
	font-size:76%;
	background:#F1F1F1;
	-webkit-text-size-adjust:100%;
	padding-top:60px;
}

html{ font-size:100%;}

div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,input,textarea,
table, caption, tbody, tfoot, thead, tr, th, td{
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size:100%;
	line-height:1.2;
	font-weight:normal;
	vertical-align:baseline;
	background:transparent;
}  

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{ 
    display:block;
}

blockquote, q{ quotes:none;}

a{
	text-decoration:none;
	outline:none;
}

ins{
    background-color:#ff9;
    color:#000;
    text-decoration:none;
}

mark{
    background-color:#ff9;
    color:#000;
    font-style:italic;
    font-weight:bold;
}

del{ text-decoration: line-through;}
abbr[title], dfn[title]{
    border-bottom:1px dotted;
    cursor:help;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

hr{
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select, textarea{
    vertical-align:middle;
	font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

ul{ list-style-type:none;}
img{ vertical-align:middle;}
.img{ max-width:100%; height:auto;}

.line:hover{ text-decoration:underline;}
.opacity{ display:inline-block;}
.opacity:hover{
	opacity:0.7;
	filter: alpha(opacity=70);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=70)";  /* ie 8 */
	-moz-opacity:0.7;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0.7;
}

.clear{ clear:both;}
.clearfix{ width:100%;}
.clearfix:after{
    content:"";
    display:block;
    clear:both;
}

.fl{ float:left;}
.fr{ float:right;}

.txtl{ text-align:left;}
.txtr{ text-align:right;}
.txtc{ text-align:center;}

strong,
strong *,
.fwb{ font-weight:bold;}

.clrr{ color:#FF0000;}
.clrb{ color:#333;}
.clrg{ color:#666;}
.clrw{ color:#fff;}

.il{ display:inline;}
.bl{ display:block;}
.no{ display:none;}

.li2{ line-height:2;}


/* margin */

.mT05{ margin-top:5px;}
.mT10{ margin-top:10px;}
.mT15{ margin-top:15px;}
.mT20{ margin-top:20px;}
.mT30{ margin-top:30px;}
.mT50{ margin-top:50px;}

.mR10{ margin-right:10px;}
.mR20{ margin-right:20px;}
.mR30{ margin-right:30px;}

.mB10{ margin-bottom:10px;}
.mB20{ margin-bottom:20px;}
.mB30{ margin-bottom:30px;}
.mB50{ margin-bottom:50px;}

.mL10{ margin-left:10px;}
.mL20{ margin-left:20px;}
.mL30{ margin-left:30px;}

/* padding */

.pT10{ padding-top:10px;}
.pT20{ padding-top:20px;}
.pT30{ padding-top:30px;}

.pR10{ padding-right:10px;}
.pR20{ padding-right:20px;}
.pR30{ padding-right:30px;}

.pB10{ padding-bottom:10px;}
.pB20{ padding-bottom:20px;}
.pB30{ padding-bottom:30px;}

.pL10{ padding-left:10px;}
.pL20{ padding-left:20px;}
.pL30{ padding-left:30px;}

/* font-size */

.font10{ font-size:84%;}
.font11{ font-size:92%;}
.font12{ font-size:100%;}
.font13{ font-size:109%;}
.font14{ font-size:117%;}
.font15{ font-size:125%;}
.font16{ font-size:134%;}
.font17{ font-size:142%;}
.font18{ font-size:150%;}
.font19{ font-size:159%;}
.font20{ font-size:167%;}
.font21{ font-size:175%;}
.font22{ font-size:184%;}
.font23{ font-size:192%;}
.font24{ font-size:200%;}
.font25{ font-size:209%;}
.font26{ font-size:217%;}
.font27{ font-size:226%;}

.inner{
	width:auto;
	max-width:970px;
	overflow:hidden;
	margin:0 auto;
}

/*------------------------------------------------------------ 
    header
------------------------------------------------------------*/

#header{
	width:100%;
	background:#fff;
	position:fixed;
	top:0;
	right:0;
	z-index:1500;
}

.hd-shadow{
	-webkit-box-shadow:rgba(0,0,0,0.05) 0 2px;
	box-shadow:rgba(0,0,0,0.05) 0 2px;
}

#hdlogo{
	width:173px;
	height:44px;
	float:left;
	margin:9px 0 0 10px;
}

#hdlogo img{
	max-width:100%;
	height:auto;
}

#gNavi{
	float:right;
	display:block;
}

#gNavi li{
	float:left;
	padding:0 15px;
}

#gNavi a{
	display:block;
	line-height:62px;
	color:#333;
	font-family:Arial, Helvetica, sans-serif;
	font-weight:bold;
	-webkit-transition:color 0.2s ease-out;
	-moz-transition:color 0.2s ease-out;
	-o-transition:color 0.2s ease-out;
	transition:color 0.2s ease-out;
}

#gNavi a:hover{ color:#000;}


#navBtn{
	display:none;
	width:30px;
	height:18px;
	position:absolute;
	right:15px;
	top:15px;
}

.subNavi{
	display:none;
	width:100%;
	position:absolute;
	right:0;
	top:62px;
	background:#0099FF;
	padding:30px 0;
	overflow:hidden;
}

.navSection{
	float:left;
	margin:0 40px;
}

.navSection h2{
	color:#fff;
	font-size:117%;
	margin-bottom:10px;
}

#gNavi .subNavi li{
	float:none;
	margin:0;
}

#gNavi .subNavi a{
	color:#afdefa;
	line-height:3;
	-webkit-transition:color 0.2s ease-out;
	-moz-transition:color 0.2s ease-out;
	-o-transition:color 0.2s ease-out;
	transition:color 0.2s ease-out;
}

#gNavi .subNavi a:hover{ color:#fff;}


.navSection2{
	float:left;
	padding-left:40px;
	border-left:1px solid #fff;
}

.navSection2 a p{
	font-size:117%;	
}

/*------------------------------------------------------------ 
    content
------------------------------------------------------------*/

.headline{
	width:100%;
	height:400px;
	padding-top:200px;
	text-align:center;
	color:#fff;
}

.headline h2{
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	font-size:200%;
	text-shadow:1px 1px 0 #666;
}

.subhead{
	font-size:400%;
	font-weight:bold;
	margin-top:3px;
	text-shadow:1px 1px 0 #666;
}

.headtxt{
	font-family: "Times New Roman", "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "メイリオ", Meiryo, serif;
	font-size:184%;
	font-weight:bold;
	margin-top:15px;
	text-shadow:1px 1px 0 #666;
}

.box{
	width:100%;
	height:100%;
	position:relative;
}

.rightHalf{
	width:50%;
	height:100%;
	background:#fff;
	position:absolute;
	right:0;
	z-index:-1;
}

/* leftColumn */

#sideColumn{
	width:200px;
	float:left;
	overflow:hidden;
	padding-top:60px;
}

.sideMenu h4{
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	font-size:117%;
	font-weight:bold;
	letter-spacing:2px;
	margin-bottom:12px;
}

.sideMenu ul{ margin-bottom:40px;}
.sideMenu li{
	padding:12px 0;
}

.sideMenu a{
	color:#666;
	font-weight:bold;
	-webkit-transition:color 0.2s ease-out;
	-moz-transition:color 0.2s ease-out;
	-o-transition:color 0.2s ease-out;
	transition:color 0.2s ease-out;
}

.sideMenu a:hover{ color:#000;}

/* main */

#mainColumn{
	width:100%;
	margin-left:-220px;
	float:right;
}

#main{
	width:auto;
	min-height:650px;
	margin-left:220px;
	background:#fff;
	padding:50px 15px 100px 40px;
}

.mainHd{
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	font-size:300%;
	font-weight:bold;
	color:#333;
}

.aboutHd{
	width:100%;
	max-width:710px;
	padding:14px 0;
	margin-bottom:20px;
	border-top:1px solid #ccc;
	border-bottom:1px solid #ccc;
}

.aboutHd h4{ margin-bottom:10px;}
.aboutHd strong{ font-size:117%;}



/* sideMenu */

#sidrBtn{
	position:fixed!important;
	width:50px;
	height:152px;
	overflow:hidden;
	top:20%;
	right:0;
	z-index:1001;
}

#sidrBtn span{
	display:block;
	width:50px;
	height:50px;
	float:right;
	clear:both;
	text-align:center;
	line-height:50px;
	background:#007DD0;
	border-bottom:1px solid #fff;
}

.sidr_close{
	text-align:right;
	margin:15px 0 50px 0;
}

.sidrHd{
	height:32px;
	line-height:32px;
	color:#fff;
	font-size:134%;
	border-bottom:1px solid #fff;
	padding-bottom:5px;
}

#pdf{ background:url(../img/icon_pdf.png) no-repeat right 0;}
#contact{ background:url(../img/icon_contact.png) no-repeat right 50%;}
#weather{ background:url(../img/icon_weather.png) no-repeat right 0;}

.sidrBtn{
	width:206px;
	height:36px;
	margin:24px auto 30px;
}

.sidrBtn a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:36px;
	background:#3A3A3A;
	color:#fff;
	font-size:117%;
	font-weight:bold;
	border-radius:5px;
	-webkit-transition:background 0.2s ease-out;
	-moz-transition:background 0.2s ease-out;
	-o-transition:background 0.2s ease-out;
	transition:background 0.2s ease-out;
}

.sidrBtn a:hover{ background:#007DD0;}

.weatherHd{
	height:33px;
	line-height:33px;
	border-bottom:1px solid #47B7FF;
	color:#fff;
	font-size:134%;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
}

.weatherList{
	width:240px;
	height:80px;
	overflow:hidden;
}

.weatherList li{
	width:80px;
	float:left;
	text-align:center;
}

.wicon{
	width:80px;
	height:65px;
	line-height:65px;
}

.wdata{
	width:80px;
	height:45px;
	line-height:45px;
	color:#fff;
	font-size:150%;
}

.wtxt{
	width:80px;
	height:20px;
	line-height:20px;
	color:#fff;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
}

/*------------------------------------------------------------ 
    showcase
------------------------------------------------------------*/

.portfolio{
	border-top:1px solid #96A6A6;
	margin:50px 0;
}

.gridHd{
	color:#96A6A6;
	font-size:227%;
	font-weight:bold;
	text-align:center;
	padding:30px 0;
}

.grid-wrap{
	clear:both;
	margin-right:auto;
	margin-left:auto;
/*	max-width:1260px;*/
	margin-bottom:30px;
}

.grid{
	margin:0px auto;
	padding:0 5px;
	text-align:center;
	letter-spacing: -.40em;
}

.grid li{
	width:240px;
	display:inline-block;
	overflow:hidden;
	text-align:left;
	vertical-align:top;
	letter-spacing: normal;
}

.grid figure{
	position:relative;
	overflow:hidden;
	margin:5px;
	background:#333;
}

.grid figure img{
	position:relative;
	display:block;
}

.grid figcaption{
	position:absolute;
	top:0;
	z-index:11;
	width:100%;
	height:100%;
	text-align:center;
}

.grid figcaption .item-name{
	color:#333;
	line-height:50px;
	font-size:117%;
	font-weight:bold;
	background:#fff;
	margin-top:250px;
}

.category{
	width:76px;
	height:21px;
	text-align:center;
	line-height:21px;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	letter-spacing:1px;
	color:#fff;
	font-size:92%;
	position:absolute;
	top:10px;
	left:10px;
}

.new{
	width:50px;
	height:21px;
	text-align:center;
	line-height:21px;
	font-family: MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', Helvetica, Arial, sans-serif;
	letter-spacing:1px;
	color:#fff;
	font-size:92%;
	position:absolute;
	top:10px;
	left:86px;
	background:#F1C40F;
}

.c1{ background:#1CBB9F;}
.c2{ background:#2FCC71;}
.c3{ background:#3598DC;}
.c4{ background:#FF6666;}


.grid figure .button{
	border: none;
	display:block;
	width:230px;
	height:300px;
	position:absolute;
	z-index:100;
	top:50%;
	left:50%;
	text-indent:-9999px;
	background:url(../img/button.png) no-repeat 50% 50% rgba(0,153,255,0.7);
	cursor:pointer;
	opacity: 0;
	filter: alpha(opacity=0);
	-ms-filter: "alpha(opacity=0)";
	-moz-opacity:0;
	-khtml-opacity: 0;
	-webkit-transform: translateY(-50%) translateX(-50%) scale(0.25);
	transform: translateY(-50%) translateX(-50%) scale(0.25);
	-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
	transition: opacity 0.3s, transform 0.3s;
}

.grid figure .button {
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}


.grid a:hover figure .button{
	opacity: 1;
	filter: alpha(opacity=100);
	-ms-filter: "alpha(opacity=100)";
	-moz-opacity:1;
	-khtml-opacity:1;
	-webkit-transform: translateY(-50%) translateX(-50%) scale(1);
	transform: translateY(-50%) translateX(-50%) scale(1);
}


/* sort/search */

#search{
	width:auto;
	background:#EDEDED;
	padding:20px 10px;
}

.searchHd{
	width:136px;	
	height:57px;
	line-height:57px;
	float:left;
	margin-right:20px;
	font-size:150%;
	padding-left:60px;
	color:#fff;
	font-weight:bold;
	background:url(../img/searchBg.png) no-repeat;
}

.select{
	width:216px;
	height:47px;
	float:left;
	margin:5px 20px 0 0;
	position:relative;
}

.select select{
	display:block;
	width:100%;
	height:47px;
	position:absolute;
	top:0;
	bottom:0;
	z-index:10;
	opacity:0;
	filter: alpha(opacity=0);        /* ie lt 8 */
	-ms-filter: "alpha(opacity=0)";  /* ie 8 */
	-moz-opacity:0;                 /* FF lt 1.5, Netscape */
	-khtml-opacity: 0;
}

.result{
	width:100%;
	height:47px;
	line-height:47px;
	text-indent:10px;
	position:absolute;
	top:0;
	left:0;
	z-index:1;
	background:url(../img/selectboxBg.png) no-repeat;
}

.searchBtn{
	width:216px;
	height:47px;
	margin-top:5px;
	float:left;
}

.searchBtn a{
	display:block;
	width:100%;
	height:100%;
	text-align:center;
	line-height:47px;
	color:#fff;
	font-size:150%;
	font-weight:bold;
	background:#0099FF;
	border-radius:5px;
	-webkit-transition:background 0.2s ease-out;
	-moz-transition:background 0.2s ease-out;
	-o-transition:background 0.2s ease-out;
	transition:background 0.2s ease-out;	
}

.searchBtn a:hover{ background:#007DD0;}

.sort{
	width:auto;
	max-width:970px;
	margin:20px auto 0;
	padding:0 10px;
	overflow:hidden;
}

.sort a{
	color:#666;
	font-weight:bold;
	-webkit-transition:color 0.2s ease-out;
	-moz-transition:color 0.2s ease-out;
	-o-transition:color 0.2s ease-out;
	transition:color 0.2s ease-out;
}

.sort a:hover{ color:#000;}





/*------------------------------------------------------------ 
    footer
------------------------------------------------------------*/  

#footer{
	width:100%;
	padding:13px 0;
	background:#333;
}

.ftInner{
	width:auto;
	max-width:1200px;
	overflow:hidden;
	margin:0 auto;
}

.copyright{
	height:34px;
	padding-right:15px;
	margin-right:15px;
	float:left;
	border-right:1px solid #666;
	font-size:92%;
}

.copyright small{
	display:inline-block;
	color:#fff;
	padding-left:154px;
	height:34px;
	line-height:34px;
	font-family:Arial, Helvetica, sans-serif;
	background:url(../img/ftLogo10th.png) no-repeat 10px 50%;
	background-size:134px 34px;
}

.ftNavi{
	float:left;
	margin-top:6px;
	overflow:hidden;
}

.ftNavi li{
	float:left;
	height:22px;
	margin-right:25px;
}

.ftNavi a{
	display:block;
	height:22px;
	line-height:22px;
	color:#ccc;
	font-weight:bold;
	font-family:Arial, Helvetica, sans-serif;
	-webkit-transition:color 0.2s ease-out;
	-moz-transition:color 0.2s ease-out;
	-o-transition:color 0.2s ease-out;
	transition:color 0.2s ease-out;
}

.ftNavi a:hover{ color:#fff;}

.mail{
	position:relative;
	padding-left:30px;
}

.mail:before{
	content:"";
	display:block;
	width:20px;
	height:15px;
	position:absolute;
	top:4px;
	left:0%;
	background:url(../img/icon_mail.png) no-repeat
}

/* sp */

#pagetop{
	display:none;
	width:60px;
	height:60px;
	position:fixed;
	bottom:10px;
	right:10px;
	z-index:1000;
}


/*------------------------------------------------------------ 
    Medis Queries
------------------------------------------------------------*/ 





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

#sideColumn{
	width:190px;
	padding:60px 15px 0;
}

}

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

.searchHd{
	float:none;
	margin-bottom:10px;
}

}

@media screen and (min-width: 831px){

#gNavi{
	display:block!important;
}

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

body{ padding-top:0px;}


/* header */

#header{
	position:static;
	padding:9px 0 0;
	-webkit-box-shadow:rgba(0,0,0,0.05) 0 2px!important;
	box-shadow:rgba(0,0,0,0.05) 0 2px!important;
}

#hdlogo{
	float:none;
	width:122px;
	height:31px;
	margin:0 0 0 15px;
	padding-bottom:9px;
}

#navBtn{ display:block;}


#gNavi{
	display:none;
	width:100%;
	float:none;
	background:rgba(0,153,255,1);
}

#gNavi li{
	float:none;
	padding:0;
}

#gNavi a{
	display:block;
	line-height:33px;
	padding:5px 20px 5px 10px;
	background:url(../img/arrow_white.png) no-repeat right 10px top 50%;
	background-size:10px 20px;
	color:#afdefa;
	-webkit-transition:color 0.2s ease-out;
	-moz-transition:color 0.2s ease-out;
	-o-transition:color 0.2s ease-out;
	transition:color 0.2s ease-out;
}

#gNavi a:hover,
#gNavi .hover{
	text-decoration:none;
	color:#fff;
}

#gNavi .subNavi{
	position:static;
	padding:5px 0;
	background:rgba(0,125,208,1);
}


.hidden-sm{ display:none;}


.navSection,
.navSection2{
	float:none;
	margin:0;
	padding:0 10px;
	border:none;
}

.navSection2 a p{
	font-size:100%;
	font-weight:bold;
	line-height:30px;
}


.navSection h2{ display:none;}
#gNavi .navSection a{ line-height:30px;}

#sideColumn{ height:auto!important;}
#sideInner{ position:static!important;}


}


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


/* content */

.headline{
	height:226px;
	padding-top:130px;
}

.subhead{ font-size:300%;}
.headtxt{ font-size:150%;}


.mainHd{ font-size:250%;}
.aboutHd strong{ display:block;}

#mainColumn{
	width:auto;
	float:none;
}

#main{
	padding:20px 10px;
	min-height:0;
}

#sideColumn{
	width:auto;
	float:none;
	padding:0px 0 20px 0;
}

.rightHalf{ display:none;}

.sideMenu h4{
	padding:25px 0 15px;
	text-align:center;
}

.sideMenu ul{ margin-bottom:0;}
.sideMenu li{
	border-top:1px solid #ccc;
	padding:0;
}

.sideMenu a{
	width:auto;
	display:block;
	padding:13px 10px;
}

.sort p{
	width:76px;
	height:46px;
	line-height:46px;
	background-size:76px 46px;
	text-indent:10px;
	font-size:109%;
}

.sort ul{ margin-top:11px;}


.searchHd{
	width:108px;
	height:46px;
	line-height:46px;
	padding-left:50px;
	font-size:117%;
	background-size:158px 46px;
}

.select{
	float:none;
	display:inline-block;
	margin:5px 10px 0 0;
}

.searchBtn{
	clear:both;
	width:100%;
	height:45px;
	float:none;
	margin-top:10px;
}

.searchBtn a{ font-size:117%;}



/* footer */

#footer{
	text-align:center;
	position:relative;
	padding:0 0 47px;
}

.copyright{
	width:100%;
	float:none;
	border:none;
	text-align:center;
	padding-right:0;
	margin-right:0;
	position:absolute;
	bottom:13px;
	left:0;
	font-size:84%;
}

.ftNavi{
	clear:both;
	float:none;
	padding-bottom:13px;
}

.ftNavi li{
	float:none;
	width:100%;
	height:40px;
	margin:0;
	border-bottom:1px solid #ccc;
	text-align:center;
}

.ftNavi a{
	display:inline-block;
	width:100%;
	height:40px;
	line-height:40px;
	font-size:109%;
}

.mail{ padding-left:0;}
.mail:before{
	top:13px;
	left:50%;
	margin-left:-50px;
}

#topcontrol{ display:none;}

}


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

.headline{
	height:130px;
	padding-top:60px;
}

.headline h2{ font-size:134%;}

.subhead{
	font-size:184%;
	margin-top:0;
}

.headtxt{
	font-size:109%;
	margin-top:5px;
}

.mainHd{ font-size:200%;}
.gridHd{ font-size:175%;}


.grid figure .button{ display:none;}

.copyright small{
	background:none;
	padding:0;
}

.sort p,
.sort ul{
	float:none;
}

.sort a{ font-size:109%;}

}


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

.subhead{ font-size:175%;}
.headtxt{ font-size:109%;}

}