@charset "UTF-8";

/****
headbar & footer
***************************************************************************/
#headbar,
footer {
    max-width: 1000px;
}


/****
Layout
***************************************************************************/
#container {
    position: relative;
    max-width: 1000px;
}
.ie #container {
    width: 1000px;
}
.content {
    width: 750px;
    float: right;
    display: inline;
    padding: 10px 20px;
}
#diaryBlock {
    display: none;
}
.privilegeBlock1 {
    display: none;
}
.privilegeBlock2 {
    display: none;
}
/****
float
***************************************************************************/
.f-left {
    float: left;
    margin: 0 10px 10px 0;
}
.f-right {
    float: right;
    margin: 0 0 10px 10px;
}

/****
2 column
***************************************************************************/
.column2:before, .column2:after { content: ""; display: table; }
.column2:after { clear: both; }
.ie .column2 { zoom:1;}
.column2 .colinner-1 {
    float: left;
    width: 48.5%;
}
.column2 .colinner-2 {
    float: right;
    width: 48.5%;
}
.column2 .w70 {
    width: 67%;
}
.column2 .w30 {
    width: 30%;
}


/****
3 column
***************************************************************************/
.column3:before, .column3:after { content: ""; display: table; }
.column3:after { clear: both; }
.ie .column3 { zoom:1;}
.column3 .colinner-1 {
    float: left;
    width: 32%;
    margin-right: 2%;
}
.column3 .colinner-2 {
    float: left;
    width: 32%;
    margin-right: 2%;
}
.column3 .colinner-3 {
    float: left;
    width: 32%;
}


/****
4 column
***************************************************************************/
.column4:before, .column4:after { content: ""; display: table; }
.column4:after { clear: both; }
.ie .column4 { zoom:1;}
.column4 .colinner-1 {
    float: left;
    width: 23.5%;
    margin-right: 2%;
}
.column4 .colinner-2 {
    float: left;
    width: 23.5%;
    margin-right: 2%;
}
.column4 .colinner-3 {
    float: left;
    width: 23.5%;
    margin-right: 2%;
}
.column4 .colinner-4 {
    float: left;
    width: 23.5%;
}



/****
bread Nav
***************************************************************************/
#breadNav {
    font-size: 11px;
    background-color: #ececec;
    height: 2em;
    line-height: 2;
    -webkit-border-radius: 1em;
       -moz-border-radius: 1em;
            border-radius: 1em;
    padding: 0 1em;
    margin-bottom: 20px;
}
#breadNav ul {
    list-style:none;
    padding: 0;
}
#breadNav li {
    display: inline;
    margin-right: 5px;
    padding-left: 10px;
    background: url(/img/fppc/bnav_arr_icon.png) no-repeat 0 0.4em;
}
#breadNav li:first-child {
    background: url(/img/fppc/bnav_home_icon.png) no-repeat 0 0.05em;
    padding-left: 15px;
}


/****
article & section
***************************************************************************/
article h1 {
    /*background: #ececec url(/img/fppc/h1_bgimg.gif) no-repeat 0 0;*/
    background-color:#eee;
    margin: 0 0 30px 0;
    line-height: 1;
    padding: 10px;
    position: relative;
}
article h1 .lv1 {
    display: block;
    font-size: 16px;
    padding-bottom: 5px;
    border-bottom:1px solid #ccc;
}
article h1 .lv2 {
    display: block;
    margin-top: 8px;
}

article figure,
article section {
    margin: 0 0 30px 0;
}
article section .inner {
    margin: 0 20px 0 30px;
}
article section h2 {
    border-top: 3px solid #c00;
    border-bottom: 1px solid #ccc;
    padding: 8px 10px 5px 10px;
}
article section h3 {
    background: url(/img/fppc/h3_bgimg.gif) no-repeat 0 0.1em;
    padding-left: 17px;
    margin-top: 1em;
}
article section p,
article section ol,
article section ul {
    line-height: 1.6;
    margin: 0 0 1em 0;
}
article section li {
    margin: 0 0 0.5em 0;
}



/****
button
***************************************************************************/
.link-btn {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: auto;
    padding: 6px 25px 6px 10px;
    background: #c00 url(/img/fppc/dl_icon.png) no-repeat center right;
    color:#fff;
    text-decoration:none;
    -webkit-text-shadow:0 -1px -1px rgba(0, 0, 0, 0.5);
    -moz-text-shadow:0 -1px -1px rgba(0, 0, 0, 0.5);
    text-shadow:0 -1px -1px rgba(0, 0, 0, 0.5);
    -webkit-border-radius:6px;
    -moz-border-radius:6px;
    border-radius:6px;
    -webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    -moz-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
    font-weight: bold;
}
.link-btn h4 {
    font-size: 1.2em;
}
.link-btn p {
    font-size: 0.95em;
    margin: 0;
}
.link-btn:hover {
    color: #fff;
    background-color: #f00;
}
.page-btn {
    background: #c00 url(/img/fppc/dl_icon_page.png) no-repeat center right;
}
.dl-btn {
    background: #c00 url(/img/fppc/dl_icon.png) no-repeat center right;
}

.link-btn02 {
    display:block;
    background: url(/img/fppc/link_bg01.png) no-repeat top left;
    color:#fff;
    text-decoration:none;
    width:240px;
    height:20px;
    padding-left:10px;
}
.link-btn02:hover {
    background-position: bottom left;
    color: #fff;
}


/****
Tel & Fax
***************************************************************************/
.address {
    background-color: #e8e8e8;
    border: 1px solid #ccc;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    padding: 8px;
}
.address h2 {
    background-color: #c00;
    color: #fff;
    margin: 0;
    text-align: center;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
}
.address .tel {
    font-weight: bold;
    font-size: 1.1em;
    padding: 10px 5% 3px 5%;
    text-align: center;
}
.address .tel p {
    clear: both;
}
.address .tel address {
    font-size: 2em;
    display: inline;
    line-height: 1;
    margin: 0 1em 10px 0;
}
.address .tel address .icon {
    font-size: 14px;
    display: inline-block;
    width: 3em;
    margin: 0 10px 0 0;
    padding: 0.3em;
    text-align: center;
    vertical-align: middle;
    background-color: #666;
    color: #fff;
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px;
    position: relative;
    top: -0.25em;
}


/* screens bigger than 820
***************************************************************************/
@media only screen and (min-width:821px) {
#container {
    width: 1000px;
}
}


/* screens smaller than 820
***************************************************************************/
@media only screen and (min-width:541px) and (max-width:820px) {
#diaryBlock {
    display: block;
}
#breadNav {
    display: none;
}
.content {
    width: 550px;
    float: none;
    display: block;
}
article h1 {
    margin: 0 0 20px 0;
}
.address .tel address {
    display: block;
    margin: 0 0 10px 0;
}
.privilegeBlock1 {
    display: block;
}
.privilegeBlock2 {
    display: none;
}
}
/* /screens smaller than 820 */


/* screens smaller than 540
***************************************************************************/
@media only screen and (max-width:540px) {
#breadNav {
    display: none;
}
.sidebar {
    width: 100%;
    float: none;
    display: block;
}
.content {
    width: 100%;
    float: none;
    display: block;
    padding: 15px;
}
article h1 {
    background: #ececec;
    height: auto;
    margin: 0 0 20px 0;
    line-height: 1;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}
article h1 .lv1 {
    display: none;
}
article h1 .lv2 {
    display: inline;
    position: static;
}
article section h2 {
    padding: 8px 0 4px 0;
}
article section .inner {
    margin: 0;
}

.column2 .colinner-1,
.column2 .colinner-2 {
    float: none;
    width: 100%;
    margin: 10px 0;
}
.column3 .colinner-1,
.column3 .colinner-2,
.column3 .colinner-3 {
    float: none;
    width: 100%;
    margin-right: 0;
    margin: 10px 0;
}
.column4 .colinner-1,
.column4 .colinner-2,
.column4 .colinner-3,
.column4 .colinner-4 {
    float: none;
    width: 100%;
    margin-right: 0;
    margin: 10px 0;
}
.address .tel address {
    font-size: 1.7em;
    display: block;
    margin: 0 0 10px 0;
}
.address .tel p span {
    display: block;
}
.f-clear {
    clear:both;
}
#diaryBlock {
    display: block;
}
.privilegeBlock1 {
    display: none;
}
.privilegeBlock2 {
    display: block;
}
}
/* /screens smaller than 540 */
/* -----↓privilegeBlock----- */
.privilegeBlock1 .privilegeBox{
    overflow:hidden;
    margin-bottom:20px;
    border-radius:5px;
    padding:10px 10px 10px 0;
}
.privilegeBlock1 .privilegeBox1{
    background-color:#FDE6D8;
}
.privilegeBlock1 .privilegeBox2{
    background-color:#D6FDC8;
}
.privilegeBlock1 table{
    table-layout:fixed;
    width:100%;
}
.privilegeBlock1 .privilegeLeft{
    color:#7f7f7f;
    width:60px;
    font-size:15px;
    font-weight:bold;
    text-align:center;
    vertical-align:middle;
}
.privilegeBlock1 .privilegeRight{
    background-color:#fff;
    border-radius:5px;
    padding:10px;
}
.privilegeBlock1 .privilegeRight div{
    display:table-cell;
}
.privilegeBlock1 .privilegeImg{
    width:160px;
    padding-right:10px;
    vertical-align:middle;
}
.privilegeBlock1 .privilegeImg img{
    width:100%;
    height:auto;
}
.privilegeBlock1 .privilegeComment{
    width:auto;
    height:auto;
    font-size:13px;
    vertical-align:middle;
}
.privilegeBlock2{
    overflow:hidden;
    margin-bottom:20px;
    width:100%;
    text-align:center;
}
.privilegeBlock2 p.privilegeTitle{
    color:#303030;
    font-size:16px;
    font-weight:bold;
    margin-bottom:5px;
}
.privilegeBlock2 .privilegeImg{
    width:100%;
    text-align:center;
    padding-bottom:5px;
}
.privilegeBlock2 .privilegeImg img{
    height:auto;
    width:240px;
}
.privilegeBlock2 p.privilegeComment{
    font-size:14px;
    margin:0 10px;
    text-align:left;
}
/* -----↑privilegeBlock----- */