@charset "euc-jp";

@import "table.css";
@import "button.css";
/* --------------------------------------------
更新日：20110210
-----------------------------------------------*/

/* 各要素のリセット
---------------------------------------------------------------------------*/
* {
    margin:0px;
    padding:0px;
}

html{
    overflow-y:scroll;
    font-size:100%;
}

body {
    font-family:'ＭＳ Ｐゴシック','Osaka','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','MS P Gothic',sans-serif !important;
    margin:0 ;
    padding:0;
    font-size:small !important;
    color:#333333;
    height: 100%;
    background:url("../img/body_bg.gif") repeat scroll 0 0 transparent !important;
    text-align:center;
}

img {
    border:0;
    vertical-align:top;
}

p {
    margin:7px 0px;
}

#container{
    margin:0;
    padding:0;
}

#wrapper {
    width:880px;
    margin:0 auto !important;
    text-align:left;
    background: url("../img/wrap_bg880.gif") repeat-y scroll 0 0 transparent;
}

#wrapper-s {
    background-color:#FFFFFF;
}

/* リンクテキスト
---------------------------------------------------------------------------*/
a {
    color: #6666FF;
    text-decoration:none;
    cursor:pointer;
    margin:0;
    padding:0;
}

a:link {
    color: #6666FF !important;
    text-decoration:none !important;
}
a:visited {
    color: #701F9A !important;
    text-decoration:none !important;
}
a:hover {
    color: #701F9A !important;
    text-decoration: underline !important;
}

a:active {
    color:#701F9A !important;
    text-decoration:underline !important;
}

/*
a:link{
    color:#0934AC;
    text-decoration:none;
}

a:active {
    color:#701F9A;
    text-decoration:underline;
}

a:hover{
    color:#701F9A;
    text-decoration:underline;
}

a:visited{
    color:#701F9A;
}
*/


/* 基本レイアウト/コンテンツ内共通スタイル
---------------------------------------------------------------------------*/
/* title  */
.title{
    background:url(../img/h2-border.gif) repeat-x left bottom scroll #FFFFFF;
}

h2{
    font-size:1.4em;
    font-weight:normal;
    padding-bottom:8px;
    float:left;
}

/* ヘルプ  */
.help{
    font-weight:normal;
    background:url(../img/ico-help.gif) no-repeat left bottom scroll #FFFFFF;
    padding-left: 18px;
    padding-top:4px;
    float:right;
}

.login-help{
    background: url(../img/ico-help.gif) no-repeat scroll left center #FFFFFF;
    float: right;
    font-weight: normal;
    padding: 4px 10px 4px 18px;
    text-align: right;
}


h3{
    background:url(../img/bg-h3-title.gif) repeat-x left center scroll #FFFFFF;
    border:1px solid #D1D1D1;
    font-size: 1.1em;
    font-weight: normal;
    margin:15px 0px;
}

h3 span{
    position: relative;
    left: 5px;
    top: 4px;
}

h3 span, x:-moz-broken, x:last-of-type, x:indeterminate {
    top:6px;
}


/* list  */
ul.list-navi{
    margin:20px 5px 5px;
}

ul.list-navi li{
    list-style:none outside none;
    background:url(../img/ico-navi.gif) no-repeat left center scroll transparent;
    padding:3px 3px 3px 20px;
}

ul.list-navi2{
    margin:8px 3px 0px;
}

ul.list-navi2 li{
    list-style:none outside none;
    background:url(../img/ico-navi.gif) no-repeat left center scroll transparent;
    padding:3px 3px 3px 20px;
    font-weight:bold;
}

ul.list{
    margin:10px 5px 5px;
}

ul.list li{
    list-style:none outside none;
    display:inline;
}

/* list-link */
ul.lilnk-list{
/*    overflow:auto;*/
    height:380px;
}

ul.link-list li{
    line-height:0;
}

/* リストマーカーinside */
ul.list-style-none{
    list-style-type:disc;
    list-style-position:inside;
    padding-left:10px;
}

ul.list-style-none2{
    list-style-type:none;
}


/* logout-btn-area  */
.admin_contents{
    border-bottom: 1px solid #ACACAC;
    text-align:right;
    padding-bottom:1px;
    width:100%;
}

.account-area{
    float:left;
    padding-top:5px;
}

/* パンくず  */
.crumb-area{
    width:100%;
}

ul.crumb{
    margin:3px 0px 30px;
    font-size:0.9em;
}

ul.crumb li{
    display:inline;
    background:url(../img/ico-crumb.gif) no-repeat left center scroll transparent;
    margin-right:3px;
    padding-left:12px;
}


/* textarea */
textarea{
    font-size:1.0em;
}


/* header */
#header , #footer , #gnavi {
    width:880px;
}

#header{
    height: 48px;
    position: relative;
    border-bottom:1px solid #ACACAC;
    width:880px;
}

#header h1{
    left: 12px;
    margin: 0;
    padding: 0;
    position: absolute;
    top: 9px;
}

#header .hLink {
    margin:0;
    padding:0;
    width:350px;
    height:24px;
    position:absolute;
    top:0;
    left:528px;
    list-style-type:none;
}

.hLink li{
    position:absolute;
    top:6px;
}

.hLink li.hAppl { left:0; }
.hLink li.hServ { left:103px; }
.hLink li.hSupp { left:182px; }
.hLink li.hEo { left:282px; }

#header .hSearch {
    margin:0;
    padding:0;
    width:412px;
    height:23px;
    position:absolute;
    top:24px;
    left:450px;
    list-style-type:none;
}

.hSearch li{position:absolute;}

.hSearch .hsSite {
    top:3px;
    left:340px;
}


/* filelist */
#filelist{
    width:100%;
    height:300px;
    overflow:auto;
}

#filelist div.p{
   padding-bottom: 5px;
   border-bottom: 1px dotted #bbbbbb;
   padding-top:5px;
}

#filelist img{
   margin-right: 8px;
}

div.period{
   margin: 10px 20px;
   padding: 5px 10px;
   background-color: #dddddd;
}


/* footer */
#footer{
    display: block;
    border-top: 1px solid #ACACAC;
    border-bottom: 1px solid #ACACAC;
}

#footer .footer-mainbox{
    float: left;
    margin-left: 10px;
    padding-top: 13px;
    text-align: left;
    width: 660px;
}

#footer .footer-mainbox-biz{
    float: left;
    margin-left: 10px;
    padding-top: 13px;
    text-align: left;
    width: 560px;
	_width: 545px;
}

#footer .footer-mainbox .footerlist {
    font-size: 80%;
}

#footer .footer-mainbox .footerlist li {
    display: inline;
}

#footer .footer-mainbox-biz .footerlist {
    font-size: 80%;
}

#footer .footer-mainbox-biz .footerlist li {
    display: inline;
}

#footer .footercredit{
    margin-top:7px;
}

#footer .footer-logobox{
    height:60px;
}

#footer .footer-logobox-biz{
    height:50px;
	_height:45px;
    padding-top:5px;
}

#footer .footer-logobox img{
    margin-top:18px;
}


/* 05：ログイン画面
---------------------------------------------------------------------------*/
#login-area{
    text-align:center;
    width:405px;
    margin:30px auto 30px;
    min-height: 400px;
    height:auto !important;
    height:400px;
}

.login-top{
    background:url(../img/bg-login-top.gif) top left no-repeat #FFFFFF;
    height:48px;
    width:400px;
}

.login-top span{
    position: relative;
    top: 16px;
    font-size:17px;
    color:#FFFFFF;
}

.login-bottom{
    background: url(../img/bg-login.gif) no-repeat scroll left bottom #FFFFFF;
    width:400px;
    padding-top:20px;
}

table.login-table{
    text-align:center;
    margin:0 auto;
}

table.login-table td{
    padding:3px;
    text-align:left;
    font-size:13px !important;
}

table.login-table th{
    padding:3px;
    text-align:right;
    font-weight:normal;
    white-space:nowrap;
    font-size:13px !important;
}

.login-btn{
    margin:10px auto;
    padding-bottom:20px;
    text-align:right;
    width:210px;
}

.btn-login{
    background: url(../img/btn-login.gif) no-repeat scroll left bottom #FFFFFF;
    width:107px;
    height:35px;
    border:none;
    text-indent: -9999px;
    cursor: pointer;
    vertical-align:center;
}

.btn-clear{
    background: url(../img/btn-clear.gif) no-repeat scroll left bottom #FFFFFF;
    width:83px;
    height:28px;
    border:none;
    text-indent: -9999px;
    cursor: pointer;
    margin: 10px 5px 0px 0px;
}

.btn-close{
    background: url(../img/btn-close.gif) no-repeat scroll left bottom #FFFFFF;
    width:83px;
    height:28px;
    border:none;
    text-indent: -9999px;
    cursor: pointer;
    vertical-align:center;
}

p.login-p{
    text-align:left;
    padding:5px 15px;
    font-size:13px !important;
}




/* コンテンツ内
---------------------------------------------------------------------------*/
#content{
    margin:5px 40px 40px;
}

#user-area{
    height: 600px;
    overflow: scroll;
    width: 100%;
    font-family: "ＭＳ ゴシック","ＭＳ Ｐゴシック",Osaka-等幅,Osaka,平成角ゴシック !important;
}

.category{
    margin-top:10px;
}

.category-hp{
    margin:2px 0px;
    border-bottom:1px dotted #202020;
    clear:both;
}

.data-area{
    margin-top:20px;
    line-height:1.4em;
}

.data-border{
    border:1px solid #C6C6C6;
    padding:5px;
    margin:3px 0px 20px;
}

.data-border-en{
    border:1px solid #CCCCCC;
    padding:5px;
    margin:3px 0px 15px;
}

.data-border-en2{
    border:4px double #B4B4B4;
    padding:8px;
    margin:3px 0px 15px;
    height:1%;
}

/* かんたん作成  */
.hpcreate-style-box{
    padding-right: 5px;
    float:left;
    text-align:center;
}

.hpcreate-style-box a{
    border:1px solid #FFFFFF;
    display:block;
}

.hpcreate-style-box a:link{
    border:1px solid #FFFFFF;
    display:block;
}

.hpcreate-style-box a:visited{
    border:1px solid #FFFFFF;
    display:block;
}

.hpcreate-style-box a:hover{
    border:1px solid #FF0000;
    display:block;
}

/* かんたん作成-STEPのライン */
.progress{
    background-color: #EFF6FC;
    border: 1px solid #6990B3;
    padding: 5px 0px 5px 0px;
    text-align: left;
    width:auto;
}

html*.progress{
    padding:0px;
}

.progress span.progress-now-l{
    background:url(../img/bg-line-step.gif) repeat-x left top scroll #97BEDE;
    border-right: 1px dotted #FFFFFF;
    color: #164269;
    font-weight: bold;
    height: 19px;
}

.progress span.progress-now-c{
    background:url(../img/bg-line-step.gif) repeat-x left top scroll #97BEDE;
    border-right: 1px dotted #FFFFFF;
    border-left: 1px dotted #FFFFFF;
    color: #164269;
    font-weight: bold;
    height: 19px;
}

.progress span.progress-now-r{
    background:url(../img/bg-line-step.gif) repeat-x left top scroll #97BEDE;
    border-left: 1px dotted #FFFFFF;
    color: #164269;
    font-weight: bold;
    height: 19px;
}

.progress span{
    padding: 5px 20px;
}

/* かんたん作成-リンクエリア*/
.link-area{
    border:4px groove #999999;
    width:600px;
    height:320px;
    padding:3px;
    text-align:left;
    overflow-y:scroll;
    overflow-x:auto;
}

/* かんたん作成-カウント */
ul.count-list{
    list-style:none inside none;
    margin-top:20px;
}

ul.count-list li{
    list-style:none inside none;
    margin:10px 0px;
}

/* MYダイアリ-カレンダー */
.month-select-area{
    width:700px;
    margin:0 auto;
    text-align:center;
}

.select{
    white-space:pre;
    font-size: 12px;
    font-family: 'ＭＳ ゴシック','Osaka−等幅',monospaac !important;
    width:700px;
}

.last-month, .month-select, .next-month{
    width:33.3%;
    float:left;
}

.month-select{
    text-align:center;
    margin:0 auto;
}

.diary-day, .diary-title, .diary-new-day{
    float:left;
    text-align:left;
    white-space:nowrap;
    color:#666666;
    font-size:1.1em;
    font-weight:bold;
    margin-bottom:5px;
}

.diary-day{ width:12%;}
.diary-title{ width:70%;}
.diary-new-day{ width:18%;}


/* MYアルバム- ケース一覧 */
.case-area{
    width:800px;
    height:auto;
    position:relative;
    font-size:12px;
    border:1px solid #A6C9E2;
    padding: 0.2em;
    overflow: hidden;
}

.ui-dialog-title li{
    padding:5px;
    display:inline;
    text-align:center;
    float:left;
}

/* ケース */
.ui-dialog-title li.ca-name{
    width:310px;
}

.ui-dialog-title li.ca-day{
    width:120px;
}

.ui-dialog-title li.ca-status{
    width:auto;
    text-align:left;
    padding-left:20px;
}

/* アルバム */
.ui-dialog-title li.al-name{
    width:350px;
}

.ui-dialog-title li.al-day{
    width:125px;
}

.ui-dialog-title li.al-status{
    width:auto;
    text-align:left;
}


ul#sortable{
    overflow:auto;
    height:300px;
    position:relative;
}

ul#sortable li{
    list-style:none;
    overflow:auto;
    cursor:move;
    font-family: monospace;
    width:99%;
    padding:3px 1px;
}
ul#sortable .sort-hover{
    /*border: 1px solid #79b7e7;*/
    background: #d0e5f5;
}

ul#sortable li input{
    display:block;
    float:left;
    zoom: 1;
}

ul#sortable li .sort-list{
    float:left;
}

ul#sortable li .sort-list-btn-area{
    float:right;
}


ul.sortable{
    overflow:auto;
    height:250px;
    _width:98%;
    margin:5px;
    border:1px solid #A6C9E2;
    position:relative;
}

ul.sortable li{
    list-style:none;
    overflow:auto;
    cursor:move;
    font-family: monospace;
    width:99%;
    padding:3px 1px;
}
ul.sortable .sort-hover{
    /*border: 1px solid #79b7e7;*/
    background: #d0e5f5;
}

ul.sortable li input{
    display:block;
    float:left;
    zoom: 1;
}

ul.sortable li .sort-list{
    float:left;
}

ul.sortable li .sort-list-btn-area{
    float:right;
}


/* MYアルバム-ソート */
.sort-area{
    overflow:auto !important;
    height:300px !important;
}

/* アンケート設問設定 */
.enquete-category-area{
    margin-left: 20px;
}

.enquete-category{
    margin:5px 0px ;
    text-align:left;
    line-height:1.4em;
}

/* アンケート選択画面 */
.en-select-area{
    width:785px;
    height:200px;
}

.en-select-scroll-area{
    width:100%;
    overflow-y:auto;
    border:1px solid #999999;
}

.en-btn-area{
    float:right;
    _position:relative;
}

/* アンケート・掲示板タイトル共通スタイル */
.top-title-area{
    font-weight:bold;
    border:1px solid #999999;
    font-size:1.2em;
    padding: 5px;
    float:left;
    margin:0px 5px 10px 0px;
}

/* ボタンの範囲
---------------------------------------------------------------------------*/
/* ログアウト  */
.logout{
    background-color:#F4F4F4;
    padding:3px;
    text-align:center;
    margin:20px auto;
}

/* 戻るボタン  */
/* 閉じるボタン  */
.btn-back-area{
    text-align:left;
    margin:20px 0px;
}

.btn-back-cc-area{ /* center */
    text-align:center;
    margin:20px auto;
    width:120px;
    /width:135px;
}

.btn-back-a-area{ /* right */
    margin:20px auto;
    text-align:center;
    width:400px;
}

/* ボタンが２つある場合の真ん中揃え*/
.btn-back-al2-area{
    margin:20px auto;
    text-align:center;
    width:225px;
}

/* ボタンが4以上ある場合の真ん中揃え1*/
.btn-back-al3-area{
    margin:20px auto;
    text-align:center;
    width:560px;
}

/* ボタンが4以上ある場合の真ん中揃え2*/
.btn-back-al4-area{
    margin:20px auto;
    text-align:center;
    width:660px;
}

/* 作業ボタンエリア(戻る、確定)  */
.data-btn-area{
    padding:3px;
    text-align:center;
    margin:30px auto 20px;
}

/* かんたん作成の編集ボタンエリア */
.edit-btn-area{
    margin:6px 0px 5px;
    text-align:right;
}

.edit-btn-area form{
    float:right;
    margin-right:5px;
}

.edit-bottom-btn{
    margin: 0 auto;
    text-align: center;
    width:470px;
}

/* アルバムフォト情報プレビューボタン */
.btn-a-cc-area{ /* center */
    text-align:center;
    margin:10px auto;
    width:250px;
}

/* アクセスボタンエリア */
.access-btn-area{
    margin: 0 auto;
    text-align: center;
    width: 550px;
}

.access-btn-area input{
    margin-left:80px;
    /margin-left:0px;
}

.acsctrl-area{
    width: 600px;
    margin: 10pt auto 0px;
    text-align: center;
}

.acsctrl-id{
    background-color:#99CCFF;
    width:20px;
    height:20px;
    padding-left:10px;
}

.acsctrl-area form{
    margin:0px;
}

/* アクセス分析管理タイトル等 */
.log-title{
    font-size: 1.2em;
    border-top:1px solid #F1F3F3;
    border-right:1px solid #C9CDCF;
    border-left:1px solid #C9CDCF;
    border-bottom:1px solid #C8CDCE;
    padding:5px 5px 3px 5px;
    background-color:#DFDFDF;
}

.log-title-link{
    font-size: 1.2em;
    padding:5px 5px 3px 5px;
}

ul.list-log-navi{
    margin:8px 5px 25px;
}

ul.list-log-navi li{
    list-style:none outside none;
    background:url(../img/ico-navi.gif) no-repeat left center scroll transparent;
    padding:3px 3px 3px 20px;
}


/* 共通  */
.error{ color:#FF0000; }
.blue{ color:#0000FF;}
.bold{ font-weight:bold;}
.font13{
    font-size:1.3em;
    margin:2px;
}

.fleft{ float:left;}
.fright{ float:right;}
.fnone{ float:none;}

.inline{ display:inline;}
.block{ display:block;}
.dnone{ display:none;}

.vm{ vertical-align:middle;}
.vt{ vertical-align:top;}

.cc{ text-align:center !important;}
.ll{ text-align:left !important;}
.rr{ text-align:right !important;}

.center-area{
    margin: 0 auto;
    text-align: center;
    width:500px;
}

.bnone{ border:none !important;}
.bdot{ border-bottom:1px dotted #999999 !important;}

.nowrap{ white-space:nowrap;}

.clear{
    clear:both;
    overflow: hidden;
    height:1px;
}

.padding2{ padding:2px !important;}
.padding5{ padding:5px;}
.padding10{ padding:10px;}
.paddingLeft20{ padding-left:20px !important;}

.margin0{ margin:0px !important;}
.margin5{ margin:5px !important;}
.margin20{ margin:20px !important;}
.marginTop20{ margin-top:20px; }
.marginLeft50{ margin-left:50px !important;}
.marginLeft200{ margin-left:250px !important;}
.marginRight5{ margin-right:5px;}
.marginTop15{ margin-top:15px;}
.marginTB15{ margin:15px 0px;}

.w5{ width:5% !important;}
.w15{ width:15% !important;}
.w19{ width:19% !important;}
.w35{ width:35% !important;}
.w40{ width:40% !important;}
.w47{ width:47% !important;}
.w50{ width:50% !important;}
.w55{ width:55% !important;}
.w80{ width:80%;}
.w100{ width:100% !important;}

.w100p{ width:100px !important;}
.w110p{ width:110px !important;}
.w160p{ width:160px !important;}
.w270p{ width:270px !important;}

.h73{ height:73px !important;}
.h300{ height:300px !important;}
.h450{ height:450px !important;}

.f90{ font-size:90%;}

/* アクセス選択背景色 */
.bg-check{ background-color:#99CCFF !important;}
.bg-white{ background-color:#FFFFFF !important;}

/* 掲示板文字背景色 */
.bg-move{
    background-color:#CCFF99;
    padding:2px;
}

.bg-stop{
    background-color:#FFB6C1;
    padding:2px;
}

/* メールフォーム背景色 */
.bg-white{ background-color:#FFFFFF;}
.bg-cyan{ background-color:#E0FFFF;}
.bg-skyblue{ background-color:#87CEFA;}
.bg-green{ background-color:#90EE90;}
.bg-yellow{ background-color:#FFFFE0;}
.bg-salmon{ background-color:#FFA07A;}
.bg-pink{ background-color:#FFB6C1;}
.bg-grey{ background-color:#D3D3D3;}

/* メールフォームプレビュー時の範囲 */
.content-mail-area{
    padding:15px 0px;
}

/* 特別指定 */
#in_limit_end{ margin:5px;}


/* フッター */
:root {
    --color-textgray: rgb(82, 109, 123);
    --color-qualitygray: rgb(115, 135, 146);
    --color-yellow: rgb(250, 190, 0);
}

footer#footer-re {
    width: 878px!important;
    padding-top: 24px;
    padding-bottom: 32px;
    font-family: Meiryo, sans-serif;
    color: rgb(82, 109, 123);
    color: var(--color-textgray);
    background-color: #fff !important;
    /* background-color:#f6f6f6 !important; */
    margin: 0;
    margin-left:1px;
    display: block;
    border: none;
    border-bottom:solid 1px #a8a8a8;
}

footer#footer-re * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    list-style: none;
    line-height: 1;
    letter-spacing: 1;
    display: block;
    border: none;
}

footer#footer-re #footer_logo {
    background: linear-gradient(0deg, rgb(115, 135, 146) 10px, #fff 10px);
    background: linear-gradient(0deg, var(--color-qualitygray) 10px, #fff 10px);
}

footer#footer-re #footer_logo_inner {
    /* padding-bottom: 45px; */
    padding: 0;
    width: 100%;
    margin: 0;
    border: none;
    /* border-bottom: 15px solid rgb(250,190,0); */
    /* display: inline-block; */
    text-align: center;
    /* max-width: 1200px; */
    /* background:linear-gradient( 0deg, var(--color-yellow) 15px, #fff 15px ); */
}

footer#footer-re #footer_logo_inner img {
    margin: 0 auto 16px;
    height: 50px;
    width: auto;
}

footer#footer-re #footer_logo_inner span {
    background-color: rgb(250, 190, 0);
    background-color: var(--color-yellow);
    display: block;
    height: 10px;
    width: 50px;
    margin: 0 0 0 50px;
}

footer#footer-re address {
    font-style: normal;
    font-family: helvetica, arial, meiryo, sans-serif;
    text-align: center;
    font-size: 11px;
    padding: 0;
}

footer#footer-re ul {
    text-align: center;
    padding: 16px 0 32px;
    width: 100%;
}

footer#footer-re ul li {
    display: inline-block;
    font-size: 12px;
}

footer#footer-re>ul li a {
    text-decoration: none!important;
    color: rgb(82, 109, 123)!important;
    color: var(--color-textgray)!important;
    box-sizing: border-box;
    padding: 2px 5px;
    transition: all 0.1s ease;
    margin: 0 0 0 3px;
    display: inline;
    line-height: 1;
    letter-spacing: 1!important;
}

footer#footer-re ul li a:hover {
    background-color:  rgb(250, 190, 0);
    background-color: var(--color-yellow);
    color: #fff;
    border-radius: 5px;
}



@media screen and (min-width: 801px) {
    footer#footer-re ul li:not(:nth-child(1)):before {
        content: " /";
        color: rgb(250, 190, 0);
        color: var(--color-yellow);
        font-weight: bold;
    }
}

@media screen and (max-width: 800px) {
    footer#footer-re {
        /*padding-bottom: 5px;*/
    }

    footer#footer-re ul {
        text-align: left;
        padding: 0;
        margin: 0 0 32px;
    }

    footer#footer-re ul li {
        display: list-item;
        font-size: 14px;
        margin: 0;
        padding: 0 0 0 0;
        list-style-type: disc;
    }

    footer#footer-re ul li a {
        display: block;
        background-color: #eaeaea;
        padding: 16px 10px;
        border-bottom: 1px #bfbfbf dotted;
        margin: 0;
    }

    footer#footer-re ul li a:hover {
        border-radius: 0;
    }
}