h1,h2,h3,h4,h5,h6{ width: 100%; text-align: left;}

h1{ width: 150px; text-align: left; margin: 5px 0; float: left;}
h1 img{ width: 140px; height: 35px; position: relative; right: -10px;}
h2{ }
h3{ font-weight: bold; margin-top: -1px; line-height: 1.2em;}
.subtitle{ color: #ffffff; font-size: 1.6em; line-height: 100%; margin: 0 0 10px!important; padding: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
.subtitle span{ display: block; border-left: 10px solid #ffffff; padding: 3px 18px 3px 8px;}

a{ color: #000000;}
.clr{ clear: both; visibility: hidden; height: 0;}

body{ width: 100%; text-align: center; position: relative; font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}

#wrapper{ width: 100%; max-width: 860px; background: #ffffff; margin: 0 auto; overflow: hidden;}
#top{ padding: 0 10px;}
#main{ text-align: left; padding: 0 10px;}
header{ width: 100%; border-bottom: 1px solid #dddddd; background: #ffffff; position: fixed; top: 0; left: 0; z-index: 99;}

/* グローバルナビ */
nav{ width: 115px; margin: 5px auto; float: right; position: relative; left: -10px; overflow: hidden;}
nav ul{ width: 160px;}
nav li{ margin-right: 5px; float: left;}
nav li:nth-child(1) a{ border: 1px solid #4f8b97; background: #4f8b97;}
nav li:nth-child(2) a{ border: 1px solid #66ac78; background: #66ac78;}
nav li:nth-child(3) a{ border: 1px solid #d77856; background: #d77856;}
nav li:nth-child(4) a{ border: 1px solid #838c86; background: #838c86;}
nav li.none{ display: none;}
nav li a{ display: block; width: 33px; height: 33px; color: #ffffff; font-size: 0.8em; font-weight: bold; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px;}
nav li a span{ display: block; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);}
nav li a.search{ user-select: none; -webkit-user-select: none; -moz-user-select: none; -o-user-select: none; -ms-user-select: none; cursor: pointer;}
header .hidebox{ display: none; width: 175px; border-left: 1px solid #dddddd; border-bottom: 1px solid #dddddd; border-bottom-left-radius: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-bottom-left-radius: 10px; -o-border-bottom-left-radius: 10px; -ms-border-bottom-left-radius: 10px; background: #ffffff; position: absolute; top: 45px; right: 0; padding: 1px 10px 5px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; z-index: 100;}
header .f_box{ height: 36px; border: 1px solid #d77856; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; background: #ffffff; padding-right: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}

/* 検索共通 */
.f_box .liquid{ width: 100%; margin-right: -34px; float: left;}
.f_box .liquid p{ padding: 10px 42px 10px 10px;}
.f_box .liquid p.ios{ padding: 2px 32px 10px 10px;}
.f_box input{ border: none; outline: none;}
.f_box input.s_box{ width: 100%; placeholder: #aaaaaa;}
.f_box input.submit{ width: 24px; height: 24px; background: url(/i.cgi?n=glass); background-size: 100%; float: right; margin-top: 5px; cursor: pointer;}

/* パンくずリスト */
#bc{ border-top: 1px solid #dddddd; background: #dddddd; overflow: hidden; padding: 2px 15px;}
#bc li{ font-size: 0.8em; float: left; margin-right: 15px;}
#bc a{ font-size: 0.8em; background: #ffffff; padding: 3px 5px; float: left; text-decoration: none; color: #444444; position: relative;}
#bc a:before,
#bc a:after{ content:''; position:absolute; top: 0; bottom: 0; width: 1em; background: #ffffff; transform: skew(10deg); -webkit-transform: skew(10deg); -moz-transform: skew(10deg); -o-transform: skew(10deg); -ms-transform: skew(10deg);}
#bc a.first:before{ transform: none; -webkit-transform: none; -moz-transform: none; -o-transform: none; -ms-transform: none;}
#bc a:before{ left: -0.5em;}
#bc a:after{ right: -0.5em;}
#bc a.current{ color: #ffffff;}
#bc a.current:before,
#bc a.current:after{ background: #738c76;}
#bc a.current:after:hover,
#bc a.current:after:hover{ background: #738c76;}
#bc a.current{ font-weight: bold; background: #738c76;}

footer{ background: #3a443c; padding: 6px 10px 0;}
footer p.back{ border: 1px solid #3a443c; background: #4a544c; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
footer p.back a{ display: block; font-size: 0.6em; color: #aaaaaa; padding: 10px;}
footer ul{ margin-top: 5px;}
footer ul li{ width: 50%; float: left; border: 1px solid #3a443c; background: #4a544c; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
footer ul a{ display: block; font-size: 0.6em; color: #aaaaaa; padding: 10px 0;}
footer address{ color: #ffffff; font-size: 0.8em; padding: 8px 0;}

section{ margin-bottom: 25px;}

/* リスト共通 */
.list li.none{ padding: 25px 0;}
.list li a{ display: block; padding-right: 25px; position: relative;}
.list li a:before{ display: block; content: ""; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); top: 50%; right: 10px; width: 10px; height: 10px; margin-top: -5px; background: #3a443c;}
.list li a:after{ display: block; content: ""; position: absolute; transform: rotate(45deg); -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); top: 50%; right: 15px; width: 10px; height: 10px; margin-top: -5px; background: #ffffff;}
.list .image{ width: 90px; text-align: center; padding: 10px 0; float: left;}
.list .image img{ width: 70px; height: 70px;}
.list .text{ width: 100%; margin-left: -90px; float: left;}
.list .text .liquid{ padding: 10px 10px 10px 90px;}
.list .text p{ line-height: 1.4em; text-align: left;}
.list .text p.cap{ font-size: 0.8em; margin-top: 3px;}
.list .text p.logic{ font-size: 0.6em; margin-top: 3px; margin-right: 5px; padding: 3px; float: left;}
.more{ font-size: 0.8em;}
.more a{ display: block; text-align: center; color: #ffffff; padding: 10px 0;}

/* ページャー */
.num-cate{ font-size: 0.8em; text-align: center; margin-bottom: 10px;}
.pager{ text-align: center; padding: 10px 0;}
.pager:after{ content:""; display: table; clear: both;}
.pager li{ display: inline-block; width: 38px; height: 38px; list-style: none; color: #4f8b97; background: #ffffff; margin: 0 5px; border: 1px solid #4f8b97; border-radius: 20px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; -ms-border-radius: 20px; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease; cursor: pointer;}

.pager li.current, .pager li:hover{ color: #ffffff; background: #67b2ca; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease;}
.pager li.current{ font-weight: bold; cursor: default;}
.pager li span{ display: block; text-align: center; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%);}

#new .list{ border-top: 2px solid #ffce30; border-left: 2px solid #ffce30;}
#new .list li{ border-right: 2px solid #ffce30; border-bottom: 2px solid #ffce30;}
#new .subtitle{ border: 1px solid #ffce30; background: #ffce30;}

#contents .subtitle{ border: 1px solid #4f8b97; border-bottom: none; background: #4f8b97;}
#contents .tab li{ display: block; width: 25%; color: #4f8b97; text-align: center; border-top: 2px solid #4f8b97; border-left: 1px solid #4f8b97; border-right: 1px solid #4f8b97; border-bottom: none; border-top-left-radius: 5px; -webkit- border-top-left-radius: 5px; -moz-border-top-left-radius: 5px; -o-border-top-left-radius: 5px; -ms-border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit- border-top-right-radius: 5px; -moz-border-top-right-radius: 5px; -o-border-top-right-radius: 5px; -ms-border-top-right-radius: 5px; background: #ffffff; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; cursor: pointer;}
#contents .tab li:first-child{ border-left: 2px solid #4f8b97;}
#contents .tab li:last-child{ border-right: 2px solid #4f8b97;}
#contents .tab li:hover{ background: #67b2ca; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease;}
#contents .tab li.active{ background: #67b2ca; cursor: default; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease;}
#contents .tab li a{ display: block; color: #4f8b97; padding: 8px 0; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease;}
#contents .tab li:hover a{ color: #ffffff; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease;}
#contents .tab li.active a{ color: #ffffff; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; -ms-transition: 0.3s ease;}
#contents .table{ display: none;} 
#contents .list{ border-top: 2px solid #4f8b97; border-left: 2px solid #4f8b97;}
#contents .list li{ border-right: 2px solid #4f8b97; border-bottom: 2px solid #4f8b97;}
#contents .more{ border-bottom: 2px solid #4f8b97; background: #4f8b97;}

#search .subtitle{ border: 1px solid  #d77856; background: #d77856;}
#search .list{ border-top: 2px solid #d77856; border-left: 2px solid #d77856; margin-bottom: 10px;}
#search .list li{ border-right: 2px solid #d77856; border-bottom: 2px solid #d77856;}
#search .form{ border: 2px solid #d77856; border-bottom: none; padding: 10px;}
#search .f_box{ height: 36px; border: 1px solid #d77856; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; margin: 0 auto; padding-right: 10px; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
#search .category dl{ border-top: 2px solid #d77856; border-left: 2px solid #d77856;}
#search .category dt{ color: #ffffff; text-align: center; border-right: 2px solid #d77856; border-bottom: 2px solid #d77856; background: #f79876; padding: 8px 0;}
#search .category dd{ width:50%; height: 100px; font-size: 0.8em; border-right: 2px solid #d77856; border-bottom: 2px solid #d77856; float:left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box;}
#search .category dd:nth-last-child(2){ border-bottom: none;}
#search .category dd:nth-last-child(3){ border-bottom: none;}
#search .category dl:last-child dd:nth-last-child(2){ border-bottom: 2px solid #d77856;}
#search .category dl:last-child dd:nth-last-child(3){ border-bottom: 2px solid #d77856;}
#search .category dd a{ display: block; line-height: 100%; text-align: center; padding: 15px 0;}
#search .category dd.current{ background: #dddddd;}
#search .category dd span{ display: block; line-height: 100%; text-align: center; padding: 15px 0;}
#search .category .icon{ width: 50px; height: 50px; text-align: center; border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; margin: 0 auto 5px;}
#search .category .icon img{ width: 40px; height: 40px; margin-top: 5px;}

.bg0{ display: none;}
.bg1{ color: #ffffff; border: 1px solid #ffdd55; background: #ffdd55;}
.bg2{ color: #ffffff; border: 1px solid #f6824e; background: #f6824e;}
.bg3{ color: #ffffff; border: 1px solid #4cabb4; background: #4cabb4;}
.bg4{ color: #ffffff; border: 1px solid #838c86; background: #838c86;}
.bg5{ color: #ffffff; border: 1px solid #ffdd55; background: #ffdd55;}
.bg6{ color: #ffffff; border: 1px solid #f6824e; background: #f6824e;}
.bg7{ color: #ffffff; border: 1px solid #4cabb4; background: #4cabb4;}
.bg8{ color: #ffffff; border: 1px solid #dc9a22; background: #dc9a22;}
.bg9{ color: #ffffff; border: 1px solid #838c86; background: #838c86;}
.bg10{ color: #ffffff; border: 1px solid #ff79c4; background: #ff79c4}

#feature .subtitle{ border: 1px solid  #66ac78; background: #66ac78;}
#feature .usual{ border-top: 2px solid #66ac78; border-left: 2px solid #66ac78;}
#feature .usual li{ width: 50%; border-right: 2px solid #66ac78; border-bottom: 2px solid #66ac78; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; position: relative; overflow: hidden;}
#feature .usual li img{ width: 100%;}
#feature .usual li a{ display: block; padding: 10px;}
#feature .more{ border-bottom: 2px solid #66ac78; background: #66ac78;}
#feature .detail{ margin-bottom: 10px;}
#feature .detail .image{ margin-bottom: 10px;}
#feature .detail .image img{ width: 100%;}

#feature .site{ width: 100%; border-top: 2px solid #66ac78; border-left: 2px solid #66ac78; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; margin-bottom: 10px; position: relative; overflow: hidden;}
#feature .site li{ width: 100%; border-right: 2px solid #66ac78; border-bottom: 2px solid #66ac78; float: left; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; position: relative; overflow: hidden;}
#feature .site a{ display: block; padding: 20px;}
#feature .site .image{ margin-bottom: 10px;}
#feature .site img{ width: 100%;}
#feature .cap{ line-height: 100%;}

#feature .pick-label{ position:absolute; top: 23px; left: -33px; background: #7BBD77; color: #fff; padding: 4px 35px; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); pointer-events:none;}

#help .subtitle{ border: 1px solid #4a544c; background: #4a544c;}
#help a{ text-decoration: underline;}