@charset "utf-8";
/* CSS Document */



html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, 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,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers 
*/
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
display: block;
}
body {font-family:ヒラギノ角ゴシック Pro, 'Hiragino Kaku Gothic Pro',游ゴシック体, 'Yu Gothic', YuGothic,  メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
line-height:1;
margin:0;}

blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}



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





header {  
/*
background:url(../img/backimage.jpg) no-repeat center top; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
 */
  height:860px;
margin-left:auto;
margin-right:auto;
}

header p {font-size: 80%;
    /* width: 960px; */
    margin-left: auto;
    margin-right: auto;
    line-height: 30px;
    background: white;
    text-align: center;}


  
div.title {padding-top:60px;
padding-bottom:230px;}
  
 h1 {overflow:hidden;
text-indent: 100%;
white-space: nowrap;
background:url(../img/index_mainvisual.png) no-repeat;
background-position:left top;
width:960px;
height:315px;
margin-left:auto;
margin-right:auto;}

header nav {background-color:#000000;}





header input {display:none;}
header label {display:none;}
#ham-menu {display:none;}










ul {overflow:hidden;
list-style:none;
width:956px;
margin-left:auto;
margin-right:auto;
padding-left:2px;
}
li {float:left;
border-left:1px solid #FFF;
height:50px;}
li:last-child {border-right:1px solid #FFF;}



ul li a {color:#FFFFFF;
text-decoration:none;
display:block;
height:100%;
    line-height: 50px;
    padding-left: 53px;
    padding-right: 53px;}
ul li a:hover {
background-color:#333333;}




h2 {width:750px;
padding-top:40px;
margin-left:30px;
font-size:22px;
color:#234207;
padding-bottom:5px;
margin-bottom:20px;
border-bottom:dashed 1px #234207;}


article {width:960px;
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
border-radius: 10px 10px 0px 0px;
margin-top:-130px;
 position:relative;
background-color:#FFFFFF;}

article p {line-height:26px;
color:#234207;
width:900px;
margin-left:auto;
margin-right:auto;}


aside {overflow:hidden;
width:900px;
margin-top:60px;
margin-left:auto;
margin-right:auto;
}

dl {
width:270px;
float:left;
margin-right:35px;}

dl:last-child {margin-right:0;}

dt.pic1 {background:url(../img/index_pic1.jpg) no-repeat;
background-position:top;
height:180px;
width:270px;}
dt.pics a {
height:100%;
display:block;
overflow:hidden;
text-indent:100%;
white-space:nowrap;}

dt.pics:hover {opacity:0.7;}

dt.pic2 {background:url(../img/index_pic2.jpg) no-repeat;
background-position:top;
height:180px;
width:270px;}


dt.pic3 {background:url(../img/index_pic3.jpg) no-repeat;
background-position:top;
height:180px;
width:270px;}

dt.nopic {margin-top:5px;
margin-bottom:5px;
border:1px solid #234207;
box-sizing:border-box;}

dt.nopic a {display:block;
text-align:center;
font-weight:bold;
text-decoration:none;
color:#234207;
padding-top:5px;
padding-bottom:5px;}

dt a:hover {opacity:0.7;}

dd {font-size:85%;
line-height:20px;}

footer {background-color:dimgray;
padding-top:30px;}


footer nav {width:960px;
margin-left:auto;
margin-right:auto;
padding-bottom:40px;
overflow:hidden;
}

footer div.leftbox {width:400px;
float:left;}

footer p {padding-left:75px;

color:#FFFFFF;
font-size:14px;
line-height:20px;
background:url(../img/footer_logo.png) no-repeat;
margin-bottom:10px;}

footer p span {font-size:16px;}

small {font-size:13px;
color:#FFF;
display:block;}

footer div.rightbox {width:400px;
float:right;
overflow:hidden;
padding-top:5px;}

footer a {display:block;
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
width:182px;
height:57px;
float:left;
margin-top:10px;}

footer a.link1 {background:url(../img/link1.jpg);
margin-right:20px;}
footer a.link2 {background:url(../img/link2.jpg);}

footer a:hover {opacity:0.7;}










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

header nav  {display:none;}

/*------------------------ハンバーガー--------------------------------*/



#ham-menu ul {padding: 0px; /* 左の余白（箇条書きの「・」）削除 */}

#ham-menu a {display:block;
text-align: center;
text-decoration:none;
color:#FFF;
font-size:90%;
font-weight:bold;
padding:10px 0px 10px 0px;}

#ham-menu li {    list-style: none;
    border-bottom: 1px solid #CCC;
padding-bottom: 5px;
    padding-top: 5px;
    letter-spacing: 2px;}


#ham-menu li:last-child {border-bottom:none;}

 /*
header li:last-child  {width:166px;} 
 
header li+ li {
  border-left: 0;
  border-right: 2px solid #333;
}
*/


#ham-menu {
    background-color:#2B2B2B; /*メニュー背景色*/
    box-sizing: border-box;
    height: 100%;
    padding: 5px 10px; /*メニュー内左右上下余白*/
    position: fixed;
    right: -200px; /*メニュー横幅 width と合わせる*/
    top: 0;
    transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 200px; /*メニュー横幅*/
    z-index: 1000;
}

#menu-background {
    background-color: #333; /*黒背景*/
    display: block;
    opacity: 0;
    position: fixed;
    right: 0;
    top: 0;
    transition: all 0.1s linear 0s; /*0.3s はアニメーションにかかる時間*/
    width: 100%;
    z-index: -1;
}

#menu-icon {
    background-color:#2B2B2B; /*アイコン部分背景色*/
    border-radius: 0 0 0 0px; /*左下角丸*/
    color:#FFFFFF; /*アイコン（フォント）色*/
    cursor: pointer;
    display: block;
    font-size: 50px; /*アイコン（フォント）サイズ*/
    height: 50px; /*アイコン縦高さ*/
    line-height: 40px; /*縦位置中央化*/
	position: fixed;
    z-index: 1;
	margin-top:0;
    right: 0;
    text-align: center;
    top: 0;
    width: 50px; /*アイコン横幅*/
    transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
}

#menu-cb {
    display: none; /*チェックボックス本体は消しておく*/
}

#menu-cb:checked ~ #ham-menu,
#menu-cb:checked ~ #menu-icon {
    transform: translate(-200px); /*メニュー本体横幅 width と合わせる*/
}

#menu-cb:checked ~ #menu-background {
    opacity: 0.5;
    z-index: 999;
}


/*------------------------ハンバーガー--------------------------------*/












header {  background:url(../img/backimage_sp.jpg) no-repeat center top; 

height: 310px !important;
    margin-left: auto;
    margin-right: auto;
    background-size: cover;
}

header p {font-size:80%;
width:960px;
margin-left:auto;
margin-right:auto;
line-height:30px;
display:none;}


  
div.title {}
  
 h1 {overflow:hidden;
text-indent: 100%;
white-space: nowrap;
background:url(../img/index_mainvisual_sp.png) no-repeat;
background-size: contain;
    background-position: center 25%;
height:315px;
margin-left:auto;
margin-right:auto;}






h2 {width: 95%;
    margin: 0 auto;
    text-align: center;
    line-height: 30px;
    font-size: 19px;
    color: #234207;
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: dashed 1px #234207;
	    padding-top: 10px;}


article {
margin-left:auto;
margin-right:auto;
margin-bottom:60px;
/*
border-radius: 10px 10px 0px 0px;
*/
background-color:#FFFFFF;}

article p {line-height: 22px;
    color: #234207;
    font-size: 14px;
    /* width: 900px; */
    /* margin-left: auto; */
    /* margin-right: auto; */
    padding: 10px;}


aside {overflow: hidden;
    /* width: 900px; */
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

dl {width: 90%;
    /* float: left; */
    /* margin-right: 35px; */
    margin: 0 auto;
    margin-bottom: 30px;}



dt.pic1 {background:url(../img/index_pic1.jpg) no-repeat;
background-position:top;
height:180px;
width:100%;
background-size: cover;}
dt.pics a {
height:100%;
display:block;
overflow:hidden;
text-indent:100%;
white-space:nowrap;}

dt.pics:hover {opacity:0.7;}

dt.pic2 {background:url(../img/index_pic2.jpg) no-repeat;
background-position:top;
height:180px;
width:100%;
background-size: cover;}


dt.pic3 {background:url(../img/index_pic3.jpg) no-repeat;
background-position:top;
height:180px;
width:100%;
background-size: cover;}

dt.nopic {margin-top:5px;
margin-bottom:5px;
border:1px solid #234207;
box-sizing:border-box;}

dt.nopic a {display:block;
text-align:center;
font-weight:bold;
text-decoration:none;
color:#234207;
padding-top:5px;
padding-bottom:5px;}



dd {font-size:85%;
line-height:20px;}

dd br {display:none;}

footer {background-color:dimgray;
padding-top:30px;}


footer nav {
margin-left:auto;
margin-right:auto;
padding-bottom:40px;
overflow:hidden;
}

footer div.leftbox {
}

footer p {    /* padding-left: 75px; */
    color: #FFFFFF;
    font-size: 14px;
    line-height: 22px;
    /* background: url(../img/footer_logo.jpg) no-repeat; */
    text-align: center;}

footer p span {font-size:16px;}

small {font-size:13px;
color:#FFF;
display:block;
line-height: 22px;
text-align:center;}

footer div.rightbox {
overflow:hidden;
padding-top:5px;}

footer a {display:block;
overflow:hidden;
text-indent: 100%;
white-space: nowrap;
width:182px;
height:57px;
margin: 0 auto;
margin-top:10px;}


footer a.link1 {background:url(../img/link1.jpg);
}
footer a.link2 {background:url(../img/link2.jpg);}

}