:root{
--placeColor:#949494;
--selectColor:#333;
--linkColor:#666;
--linkColorActive:#333;
--linkColorDisabled:#ccc;
--notesColor:#666;
--capColor:#333;
--highlightColor:#fff094;
}

/* --------------------------------------------
  Page Control
----------------------------------------------- */
/* str-container
------------------------------------------------ */
.str-container{
display:none;
}
.str-container.is-active{
display:block;
}

/* -----------------------------------------------
 http://cybozu/cgi-bin/cbag/ag.exe?page=ProjectDocView&pPID=4789&pbid=1906854&pPCID=1918156#comment
------------------------------------------------ */
/* @media (min-width:720px){
  .str-container{
    width: 400px;
    margin:0 auto;
  }
} */
/* for IE
------------------------------------------------ */
/* .cmn-ms{
  & .select-custom{

    & select{
      padding-right:10px;
    }
    &::before{
      display:none;
    }
  }
} */
/* pseudo-content
---------------------------------------------- */
.pseudo-content{
padding:0 10px 10px;
display:none;
}
.pseudo-content.is-active{
display:block;
}
.pseudo-content.lyt-sticky{
padding-bottom:65px;
}

/* .pseudo-header
----------------------------------------------- */
.pseudo-header{
margin:0 -10px;
padding:0 50px;
color:#fff;
position:relative;
background-color:#444
& .pseudo-hdg-l1{
padding:5px 5px 3px;
box-sizing:border-box;
min-height:35px;
line-height:1.55;
font-size:17px;
text-align:center;
}
}
.pseudo-header .pseudo-header-btn-prev{
margin:0;
padding:0;
color:#fff;
border-width:0 1px 0 0;
border-color:#000;
border-style:solid;
position:absolute;
top:0;
left:0;
width:50px;
height:100%;
background:0 0;
font-size:13px;
}

/* --------------------------------------------
  Form Modules
----------------------------------------------- */
/* .radio-custom
------------------------------------------------*/
.radio-custom{
display:inline-block;
position:relative;
padding-left:25px;

}
.radio-custom .cmn-tip-btn{
position:relative;
top:-2px;
vertical-align:middle;
}
.radio-custom label{
display:inline;
}
.radio-custom label.is-disabled{
opacity:.25;
}
.radio-custom label input[type="radio"]{
display:none;
}
.radio-custom label input[type="radio"]:checked +.custom-inner::before{
background-image:url(/element_sp/shared/images/icon/icon-form-radio-on.svg);
}
.radio-custom label > .custom-inner::before{
position:absolute;
top:50%;
left:2px;
margin-top:-9px;
width:16px;
height:16px;
background-image:url(/element_sp/shared/images/icon/icon-form-radio.svg);
background-position:0 0;
background-size:100%;
background-repeat:no-repeat;
content:"";
}

/* .checkbox-custom
------------------------------------------------*/
.checkbox-custom{
display:inline-block;
position:relative;
padding-left:25px;
vertical-align:middle;
}
.checkbox-custom .cmn-tip-btn{
position:relative;
top:-1px;
vertical-align:middle;
}
.checkbox-custom label{
display:inline;
}
.checkbox-custom label.is-disabled{
opacity:.25;
}
.checkbox-custom label input[type="checkbox"]{
display:none;
}
.checkbox-custom label input[type="checkbox"]:checked +span:before{
width:20px;
height:20px;
background:url(/element_sp/shared/images/icon/icon-form-checkbox-on.svg) top left no-repeat;
background-size:100% auto;
}
.checkbox-custom label input[type="checkbox"] +span:before{
display:block;
position:absolute;
top:50%;
left:0;
margin-top:-11px;
width:20px;
height:20px;
background:url(/element_sp/shared/images/icon/icon-form-checkbox.svg) top left no-repeat;
background-size:100% auto;
content:"";
}

/* .select-custom
----------------------------------------------- */
.select-custom{
box-sizing:border-box;
display:block;
position:relative;
border-radius:3px;
background-color:#fff;
width:100%;
}
.select-custom::before{
display:block;
position:absolute;
top:50%;
right:11px;
margin:0;
margin-top:-3px;
border-width:7px 6px 0 6px;
border-style:solid;
border-color:#888 transparent transparent transparent;
width:0;
height:0;
content:"";
}
.select-custom select{
box-sizing:border-box;
display:block;
position:relative;
margin:0;
padding:5px 20px 5px 10px;
border:1px solid #bbb;
border-radius:4px;
width:100%;
min-height:38px;
color:var(--baseColor);
background:transparent;
font-size:16px;
-webkit-appearance:none;
-moz-appearance:none;
}
.select-custom select option:disabled{
color:var(--disabledColor);
}
.select-custom.is-selected select{
font-weight:bold;
}

/* input[type="text/search"]
----------------------------------------------- */
input[type="text"],
input[type="search"]{
-webkit-appearance:none;
box-sizing:border-box;
margin:0;
padding:0 5px;
border:1px solid #bbb;
border-radius:4px;
width:100%;
min-height:42px;
font-size:16px;
color:var(--baseColor);
}
input[type="text"]::-webkit-input-placeholder,
input[type="search"]::-webkit-input-placeholder{
color:var(--placeholderColor);
}
input[type="text"]::-webkit-input-placeholder, input[type="search"]::-webkit-input-placeholder{
color:var(--placeholderColor);
}
input[type="text"]::placeholder,
input[type="search"]::placeholder{
color:var(--placeholderColor);
}

/* textarea
----------------------------------------------- */
textarea{
box-sizing:border-box;
padding:5px;
border:1px solid #bbb;
border-radius:4px;
width:100%;
font-size:16px;
min-height:42px;
-webkit-appearance:none;
color:var(--baseColor);
}
textarea::-webkit-input-placeholder{
color:var(--placeholderColor);
}
textarea::placeholder{
color:var(--placeholderColor);
}

/* btn
------------------------------------------------ */
.btn{
margin:20px auto 0;
padding:8px 10px;
border:1px solid #bbb;
border-radius:5px;
color:#666;
display:table;
min-width:55%;
text-align:center;
font-weight:bold;
font-size:13px;
background-color:#fff;
}

/* ----------------------------------------------------------------
loading
----------------------------------------------------------------- */

@-webkit-keyframes loading{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}

@keyframes loading{
0%{
-webkit-transform:rotate(0deg);
transform:rotate(0deg);
}
100%{
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
}
.loading{
display:block;
margin:20px auto 30px;
color:transparent;
width:40px;
height:40px;
overflow:hidden;
-webkit-user-select:none;
user-select:none;
background:url(/element_sp/shared/images/icon/icon-loading.svg) 0 0 no-repeat;
background-size:100%;
text-align:center;
-webkit-animation:1s linear 0s infinite loading;
animation:1s linear 0s infinite loading;
-webkit-backface-visibility:hidden;
backface-visibility:hidden;
}

/* ----------------------------------------------------------------
Error
----------------------------------------------------------------- */
/* .error
----------------------------------------------- */
.error,
.error-result{
margin:22px 0 60px;
text-align:center;
font-size:14px;
}
main > .error{
margin:22px 0 60px!important;
}
.error .error-align-l{
text-align:left;
}
.error > *,
.error-result > *{
margin:0;
font-size:14px;
}
.error .error-catch,
.error-result .error-catch{
font-size:16px;
margin-bottom:16px;
}
.error .error-catch strong,
.error-result .error-catch strong{
color:#222 !important;
font-weight:normal;
}
.error .error-catch + p,
.error-result .error-catch + p{
font-size:12px;
}
.error .btn,
.error-result .btn{
display: table;
margin: 20px auto 0;
padding: 8px 10px;
border: 1px solid #bbb;
border-radius: 5px;
min-width: 55%;
color: #222;
background-color: #fff;
text-align: center;
font-weight: normal;
font-size: 14px;
}

/* .error-btn
----------------------------------------------- */
.error-btn{
margin:45px auto 0;
padding:8px 10px;
border:1px solid #bbb;
border-radius:5px;
color:#555;
display:table;
min-width:55%;
text-align:center;
font-weight:bold;
font-size:13px;
background-color:#fff;
}

/* ----------------------------------------------
 Tab
----------------------------------------------- */
/* tab
------------------------------------------------ */
.tab{
margin:0 -10px;
padding-bottom:10px;
}
.tab .tab-list{
display:-webkit-box;
display:flex;
margin:0;
border-bottom:1px solid #bbb;
}
.tab .tab-list > li{
-webkit-box-flex:1;
flex:1;
border-top:1px solid #bbb;
background-color:#fff;
border-bottom:1px solid #bbb;
position:relative;
top:1px;
}
.tab .tab-list > li:first-child{
margin-right:2px;
border-right:1px solid #bbb;
}
.tab .tab-list > li:last-child{
margin-left:2px;
border-left:1px solid #bbb;
}
.tab .tab-list > li a{
padding:12px 10px 11px;
display:-webkit-box;
display:flex;
-webkit-box-align:end;
align-items:flex-end;
-webkit-box-pack:center;
justify-content:center;
color:#666;
background-color:#f5f5f5;
font-size:13px;
}
.tab .tab-list > li a > span{
margin-left:4px;
}
.tab .tab-list > li a > span > span{
line-height:1;
}
.tab .tab-list > li.is-active{
border-bottom:none;
}
.tab .tab-list > li.is-active a{
font-weight:bold;
background-color:#fff;
position:relative;
color:#333;
}
.tab-item{
display:none;
}
.tab-item.is-active{
display:block;
}

/* ----------------------------------------------
 Pager
----------------------------------------------- */
/* pager
------------------------------------------------ */
.pager{
margin:0 auto;
padding:10px 0 20px;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
max-width:400px;
line-height:1.3;
font-size:13px;
}
.pager > li > a{
padding:9px 0;
border:1px solid #bbb;
display:block;
border-radius:3px;
width:43px;
color:#666;
text-align:center;
text-decoration:none;
background-color:#fff;
}
.pager > li.pager-first{
margin-right:6px;
}
.pager > li.pager-first + .pager-prev{
margin-left:0;
}
.pager > li.pager-prev{
margin-left:51px;
}
.pager > li.pager-current{
-webkit-box-flex:1;
flex:1;
text-align:center;
font-size:12px;
}
.pager > li.pager-current >span{
font-family:Arial;
font-size:13px;
}
.pager > li.pager-current > b{
display:block;
font-weight:normal;
font-size:14px;
}
.pager > li.pager-current > b span{
font-family:Arial;
font-size:15px;
}
.pager > li.pager-current:first-child{
margin-left:96px;
}
.pager > li.pager-current:last-child{
margin-right:96px;
}
.pager > li.pager-next{
width:96px;
}

/* ----------------------------------------------
 Writer
----------------------------------------------- */
/* writer-list
----------------------------------------------- */
.writer-list{
margin:0;
padding-top:10px;
}
.writer-list > li{
padding:15px 10px;
margin-bottom:10px;
overflow:hidden;
position:relative;
background-color:#fff;
box-shadow:0px 1px 2px rgba(0, 0, 0, .16);
}
.writer-list .writer-list-header{
position:relative;
}
.writer-list .writer-list-header > a{
padding-left:70px;
min-height:60px;
display:block;
}
.writer-list .writer-list-header .writer-list-name{
font-size:13px;
font-weight:bold;
color:#333;
}
.writer-list .writer-list-header .writer-list-title{
font-size:11px;
color:#666;
}
.writer-list .writer-list-header .writer-list-outline{
font-size:12px;
line-height:1.4;
margin:5px 0 0;
color:#333;
}
.writer-list .writer-list-header .writer-list-image{
position:absolute;
left:0;
top:0;
width:60px;
height:60px;
border-radius:50%;
background-color:#f5f5f5;
overflow:hidden;
display:-webkit-box;
display:flex;
-webkit-box-pack:center;
justify-content:center;
-webkit-box-align:center;
align-items:center;
box-sizing:border-box;
}
.writer-list .writer-list-header .writer-list-image img{
max-width:60px;
height:60px;
vertical-align:middle;
}

/* writer-category-list
------------------------------------------------ */
.writer-category-list{
margin:5px 0 0 -5px;
display:-webkit-box;
display:flex;
flex-wrap:wrap;
-webkit-box-align:stretch;
align-items:stretch;
}
.writer-category-list > li{
width:33.3%;
margin-top:5px;
padding-left:5px;
box-sizing:border-box;
}
.writer-category-list > li.is-disabled a{
color:#ccc;
border-color:rgba(204,204,204,.33);
}
.writer-category-list > li.is-selected a{
color:#fff;
background-color:#888;
}
.writer-category-list > li > a{
position:relative;
display:table-cell;
vertical-align:middle;
padding:4px 3px 5px;
width:350px;
height:41px;
color:#666;
font-size:12px;
text-align:center;
line-height:1.3;
border-radius:3px;
background-color:#fff;
border:1px solid #ccc;
box-sizing:border-box;
}
.writer-category-list > li .num{
display:inline-block;
font-size:11px;
line-height:1;
}

/* writer-header
------------------------------------------------ */
.writer-header{
margin-top:-10px;
padding:10px 0 15px;
min-height:60px;
}
.writer-header > a{
display:-webkit-box;
display:flex;
color:#333;
}
.writer-header > a > div:last-child{
-webkit-box-flex:1;
flex:1;
word-break:break-all;
}
.writer-header .writer-header-hdg-name{
font-size:13px;
font-weight:bold;
word-break:break-all;
}
.writer-header .writer-header-hdg-sup{
display:block;
font-size:11px;
line-height:1.3;
color:#666;
}
.writer-header .writer-header-sup{
font-size:12px;
margin:5px 0 0;
line-height:1.3;
}
.writer-header .writer-header-thumb{
width:60px;
margin-right:7px;
margin-top:5px;
}
.writer-header .writer-header-thumb > span{
position:relative;
width:60px;
height:60px;
border-radius:50%;
background-color:#f5f5f5;
overflow:hidden;
display:-webkit-box;
display:flex;
-webkit-box-pack:center;
justify-content:center;
-webkit-box-align:center;
align-items:center;
box-sizing:border-box;
}
.writer-header .writer-header-thumb > span img{
max-width:60px;
height:60px;
vertical-align:middle;
}

/* writer-article-list
------------------------------------------------ */
.writer-article-list{
margin:0 0 10px 0;
}
.writer-article-list > li:not(:first-child){
margin-top:10px;
}
.writer-article-list > li .writer-article-list-item >a{
position:relative;
display:block;
padding:10px;
background-color:#fff;
color:#333;
box-shadow:0px 1px 2px rgba(0, 0, 0, .16);
}
.writer-article-list .writer-article-list-header{
display:-webkit-box;
display:flex;
}
.writer-article-list .writer-article-list-header .writer-article-list-item{
-webkit-box-flex:1;
flex:1;
}
.writer-article-list .writer-article-list-header .writer-article-list-item >:first-child{
margin-top:0;
}
.writer-article-list .writer-article-list-header .writer-article-list-en{
font-size:11px;
line-height:1.3;
word-break:break-word;
}
.writer-article-list .writer-article-list-header .writer-article-list-hdg{
font-size:15px;
font-weight:bold;
line-height:1.4;
word-break:break-word;
margin-top:3px;
}
.writer-article-list .writer-article-list-header .writer-article-list-sup{
font-size:13px;
line-height:1.4;
margin-top:3px;
wovcrd-break:break-word;
}
.writer-article-list .writer-article-list-header .writer-article-list-thumb{
width:80px;
margin-left:5px;
}
.writer-article-list .writer-article-list-header .writer-article-list-thumb >span{
display:-webkit-box;
display:flex;
height:80px;
width:80px;
-webkit-box-align:center;
align-items:center;
-webkit-box-pack:center;
justify-content:center;
}
.writer-article-list .writer-article-list-header .writer-article-list-thumb >span > img{
vertical-align:top;
max-height:80px;
max-width:80px;
}
.writer-article-list .writer-article-list-header .writer-article-list-thumb >span.mod-noimg{
border:1px solid #eee;
background-color:#fcfcfc;
}
.writer-article-list .writer-article-list-header .writer-article-list-thumb >span.mod-noimg > img{
width:70px;
}
.writer-article-list .writer-article-list-header .writer-article-list-date{
display:block;
font-size:0;
margin:5px 0 0 0;
}
.writer-article-list .writer-article-list-header .writer-article-list-date >li{
font-size:11px;
display:inline-block;
}
.writer-article-list .writer-article-list-header .writer-article-list-date >li:not(:last-child){
margin-right:4px;
}
.writer-article-list .writer-article-list-header .writer-article-list-date >li > span:first-child::after{
content:":";
display:inline-block;
margin:0 2px;
}
.writer-article-list .writer-article-list-header .writer-article-list-tag{
margin:0;
font-size:0;
}
.writer-article-list .writer-article-list-header .writer-article-list-tag >li{
display:inline-block;
font-size:11px;
line-height:1.3;
background-color:#eee;
min-height:17px;
padding:2px 5px 0;
border-radius:3px;
box-sizing:border-box;
margin-top:5px;
}
.writer-article-list .writer-article-list-header .writer-article-list-tag >li:not(:last-child){
margin-right:5px;
}
.writer-article-list .writer-article-list-intro{
font-size:13px;
display:block;
word-break:break-word;
padding:10px 10px 0;
margin:0 -10px;
}
.writer-article-list .writer-article-list-intro .writer-article-list-intro-more{
padding:2px 0;
color:#a4a4a4;
display:inline-block;
}
.writer-article-list .writer-article-list-intro .writer-article-list-intro-more::before{
margin:0 3px;
content:"...";
color:#333;
display:inline-block;
vertical-align:bottom;
}
.writer-article-list .writer-article-list-related{
margin-top:2px;
font-size:12px;
display:-webkit-box;
display:flex;
background-color:#fff;
box-shadow:0px 1px 2px rgba(0, 0, 0, .16);
color:#666;
padding:10px;
}
.writer-article-list .writer-article-list-related .writer-article-list-related-sup{
width:55px;
margin-right:5px;
position:relative;
box-sizing:border-box;
}
.writer-article-list .writer-article-list-related .writer-article-list-related-sup::after{
position:absolute;
top:0px;
right:0;
content:":";
display:block;
}
.writer-article-list .writer-article-list-related > ul{
margin:0;
-webkit-box-flex:1;
flex:1;
}
.writer-article-list .writer-article-list-related > ul li > a{
word-break:break-word;
font-size:12px;
text-decoration:underline;
position:relative;
display:block;
color:#666;
}
.writer-article-list .writer-article-list-related > ul li:not(:first-child){
margin-top:7px;
}

/* writer-profile
------------------------------------------------ */
.writer-profile{
margin:0 -10px;
padding:10px;
background-color:#fff;
}
.writer-profile .writer-profile-inr{
padding-bottom:20px;
margin-bottom:-10px;

/* border-bottom:1px solid #e9e9e9; */
}
.writer-profile .writer-profile-inr >:first-child{
margin-top:0;
}
.writer-profile .writer-profile-hdg{
font-size:13px;
margin-top:20px;
}
.writer-profile .writer-profile-desc{
margin-top:10px;
font-size:13px;
}
.writer-profile .writer-profile-site-list{
margin:5px 0 0;
}
.writer-profile .writer-profile-site-list a{
font-size:14px;
}
.writer-profile .writer-profile-site-list a .link-blank{
position:relative;
top:1px;
width:12px;
}
.writer-profile .writer-profile-footer{
margin-top:20px;
}
.writer-profile .writer-profile-notes{
text-align:right;
}
.writer-profile .writer-profile-notes li{
font-size:12px;
color:#777;
text-indent:-1.3em;
margin-left:1.3em;
}
.writer-profile .writer-profile-notes li .mark{
margin-right:4px;
}

/* writer-profile-category
------------------------------------------------ */
.writer-profile-category{
padding:20px 10px 10px;
margin:0 -10px;
background-color:#fff;
display:none;
}
.writer-profile-category.is-active{
display:block;
}
.writer-profile-category .writer-profile-category-hdg{
margin-top:20px;
font-size:15px;
font-weight:bold;
}
.writer-profile-category >:first-child{
margin-top:0;
}

/* result-list-loading
------------------------------------------------ */
.result-list-loading{
padding:50px 0;
}

/* result-list-error
------------------------------------------------ */
.result-list-error{
padding:20px 0;
}
.result-list-error .error-catch{
margin:10px 0;
}
.result-list-error .error-catch strong{
color:#e30707;
}
.result-list-error .error-align-c{
text-align:center;
}

/* result-list-container
------------------------------------------------ */
.result-list-container{
background-color:#eee;
margin:0 -10px -10px;
padding:0 10px;
}

/* result-header
------------------------------------------------ */
.result-header{
padding:8px 10px;
margin:-10px -10px 0;
background-color:#fff;
border-bottom:1px solid #ccc;
}
.result-header .result-header-hdg{
font-size:16px;
font-weight:bold;
}

/* result-list-back
------------------------------------------------ */
.result-list-back{
margin:0;
}
.result-list-back + .writer-list{
padding-top:0;
}
.result-list-back a{
position:relative;
color:#666;
font-size:14px;
display:inline-block;
padding:10px 10px 10px 20px;
}
.result-list-back a::before{
position:absolute;
left:5px;
top:50%;
margin-top:-5px;
content:"";
display:block;
width:7px;
height:7px;
border-left:2px solid #555;
border-top:2px solid #555;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}

/* result-list-filter
------------------------------------------------ */
.result-list-filter{
font-size:11px;
margin:0px -10px;
padding:10px;
display:-webkit-box;
display:flex;
-webkit-box-align:center;
align-items:center;
border-top:1px solid #ccc;
}
.result-list-filter ul{
-webkit-box-flex:1;
flex:1;
font-size:0;
margin:0 10px 0 0;
}
.result-list-filter ul >li{
font-size:11px;
display:inline;
}
.result-list-filter ul >li:not(:last-child):after{
content:"\3001";
display:inline;
margin-left:-3px;
}
.result-list-filter ul >li >span:first-child:not(:last-child){
position:relative;
padding-right:6px;
display:inline-block;
}
.result-list-filter ul >li >span:first-child:not(:last-child)::after{
top:-1px;
right:0;
position:absolute;
content:":";
display:block;
}
.result-list-filter >div{
-webkit-box-flex:1;
flex:1;
}